Solucionados AutoComplete y DatePicker con la nueva SigPro

src/components/Autocomplete.js

@@ -17,42 +17,49 @@ import { Input } from "./Input.js";
 export const Autocomplete = (props) => {
   const { class: className, items = [], value, onselect, label, placeholder, ...rest } = props;
 
+  // Inicializamos query con el valor actual de la señal recibida o string vacío
   const query = $(val(value) || "");
   const isOpen = $(false);
   const cursor = $(-1);
 
-  const list = $(() => {
-    const q = query().toLowerCase();
+  // FIX CRÍTICO: En lugar de una computed automática, usamos una señal manual
+  // y un Watch para garantizar que la lista se actualice SÍNCRONAMENTE.
+  const list = $([]);
+
+  Watch(() => {
+    const q = String(query()).toLowerCase();
     const data = val(items) || [];
-    return q 
+    const filtered = q 
       ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) 
       : data;
+    list(filtered);
   });
 
   const pick = (opt) => {
     const valStr = typeof opt === "string" ? opt : opt.value;
     const labelStr = typeof opt === "string" ? opt : opt.label;
 
+    // Actualizamos ambas señales
     query(labelStr);
     if (typeof value === "function") value(valStr);
+    
     onselect?.(opt);
-
     isOpen(false);
     cursor(-1);
   };
 
   const nav = (e) => {
-    const items = list();
+    const currentItems = list();
     if (e.key === "ArrowDown") {
       e.preventDefault();
       isOpen(true);
-      cursor(Math.min(cursor() + 1, items.length - 1));
+      cursor(Math.min(cursor() + 1, currentItems.length - 1));
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       cursor(Math.max(cursor() - 1, 0));
     } else if (e.key === "Enter" && cursor() >= 0) {
       e.preventDefault();
-      pick(items[cursor()]);
+      pick(currentItems[cursor()]);
     } else if (e.key === "Escape") {
       isOpen(false);
     }
@@ -63,13 +70,13 @@ export const Autocomplete = (props) => {
       label,
       class: className, 
       placeholder: placeholder || tt("search")(),
-      value: query,
+      value: query, // Vinculado a la señal query
       onfocus: () => isOpen(true),
       onblur: () => setTimeout(() => isOpen(false), 150),
       onkeydown: nav,
       oninput: (e) => {
         const v = e.target.value;
-        query(v);
+        query(v); // Esto dispara el Watch de arriba y actualiza 'list'
         if (typeof value === "function") value(v);
         isOpen(true);
         cursor(-1);
@@ -80,6 +87,7 @@ export const Autocomplete = (props) => {
       "ul",
       {
         class: "absolute dropdown-menu left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",
+        // Usamos una función para que el estilo sea reactivo
         style: () => (isOpen() && list().length ? "display:block" : "display:none"),
       },
       [
@@ -99,6 +107,7 @@ export const Autocomplete = (props) => {
             ]),
           (opt, i) => (typeof opt === "string" ? opt : opt.value) + i,
         ),
+        // Mensaje de "no hay datos" reactivo
         () => (list().length ? null : Tag("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())),
       ],
     ),