sibujs 1.4.0 → 2.0.0

package/dist/widgets.cjs

@@ -39,12 +39,12 @@ function isDev() {
 var _isDev = isDev();
 function devAssert(condition, message) {
   if (_isDev && !condition) {
-    throw new Error(`[Sibu] ${message}`);
+    throw new Error(`[SibuJS] ${message}`);
   }
 }
 function devWarn(message) {
   if (_isDev) {
-    console.warn(`[Sibu] ${message}`);
+    console.warn(`[SibuJS] ${message}`);
   }
 }
 
@@ -54,11 +54,11 @@ var subscriberStack = new Array(32);
 var stackCapacity = 32;
 var stackTop = -1;
 var currentSubscriber = null;
-var signalSubscribers = /* @__PURE__ */ new WeakMap();
 var SUBS = "__s";
 var notifyDepth = 0;
 var pendingQueue = [];
 var pendingSet = /* @__PURE__ */ new Set();
+var propagateStack = [];
 function safeInvoke(sub) {
   try {
     sub();
@@ -67,6 +67,15 @@ function safeInvoke(sub) {
   }
 }
 var trackingSuspended = false;
+function retrack(effectFn, subscriber) {
+  const prev = currentSubscriber;
+  currentSubscriber = subscriber;
+  try {
+    effectFn();
+  } finally {
+    currentSubscriber = prev;
+  }
+}
 function track(effectFn, subscriber) {
   if (!subscriber) subscriber = effectFn;
   cleanup(subscriber);
@@ -105,7 +114,6 @@ function recordDependency(signal2) {
   let subs = signal2[SUBS];
   if (!subs) {
     subs = /* @__PURE__ */ new Set();
-    signalSubscribers.set(signal2, subs);
     signal2[SUBS] = subs;
   }
   subs.add(currentSubscriber);
@@ -127,57 +135,71 @@ function queueSignalNotification(signal2) {
     }
   }
 }
+var maxDrainIterations = 1e5;
 function drainNotificationQueue() {
   if (notifyDepth > 0) return;
   notifyDepth++;
   try {
     let i = 0;
     while (i < pendingQueue.length) {
+      if (i >= maxDrainIterations) {
+        if (typeof console !== "undefined") {
+          console.error(
+            `[SibuJS] Notification queue exceeded ${maxDrainIterations} iterations \u2014 likely an effect that writes to a signal it reads. Breaking to prevent infinite loop.`
+          );
+        }
+        break;
+      }
       safeInvoke(pendingQueue[i]);
       i++;
     }
   } finally {
-    pendingQueue.length = 0;
-    pendingSet.clear();
     notifyDepth--;
+    if (notifyDepth === 0) {
+      pendingQueue.length = 0;
+      pendingSet.clear();
+    }
   }
 }
 function propagateDirty(sub) {
   sub();
-  let sig = sub._sig;
-  while (sig) {
+  const rootSig = sub._sig;
+  if (!rootSig) return;
+  const stack = propagateStack;
+  const baseLen = stack.length;
+  stack.push(rootSig);
+  while (stack.length > baseLen) {
+    const sig = stack.pop();
     const first = sig.__f;
     if (first) {
       if (first._c) {
         const nSig = first._sig;
-        nSig._d = true;
-        sig = nSig;
-        continue;
-      }
-      if (!pendingSet.has(first)) {
+        if (!nSig._d) {
+          nSig._d = true;
+          stack.push(nSig);
+        }
+      } else if (!pendingSet.has(first)) {
         pendingSet.add(first);
         pendingQueue.push(first);
       }
-      break;
+      continue;
     }
     const subs = sig[SUBS];
-    if (!subs) break;
-    let nextSig;
+    if (!subs) continue;
     for (const s of subs) {
       if (s._c) {
-        s();
         const nSig = s._sig;
-        if (nSig && !nextSig) {
-          nextSig = nSig;
-        } else if (nSig) {
-          propagateDirty(s);
+        if (nSig && !nSig._d) {
+          nSig._d = true;
+          stack.push(nSig);
+        } else if (!nSig) {
+          s();
         }
       } else if (!pendingSet.has(s)) {
         pendingSet.add(s);
         pendingQueue.push(s);
       }
     }
-    sig = nextSig;
   }
 }
 function notifySubscribers(signal2) {
@@ -201,13 +223,23 @@ function notifySubscribers(signal2) {
       }
       let i = 0;
       while (i < pendingQueue.length) {
+        if (i >= maxDrainIterations) {
+          if (typeof console !== "undefined") {
+            console.error(
+              `[SibuJS] Notification queue exceeded ${maxDrainIterations} iterations \u2014 likely an effect that writes to a signal it reads. Breaking to prevent infinite loop.`
+            );
+          }
+          break;
+        }
         safeInvoke(pendingQueue[i]);
         i++;
       }
     } finally {
-      pendingQueue.length = 0;
-      pendingSet.clear();
       notifyDepth--;
+      if (notifyDepth === 0) {
+        pendingQueue.length = 0;
+        pendingSet.clear();
+      }
     }
     return;
   }
@@ -227,30 +259,48 @@ function notifySubscribers(signal2) {
   notifyDepth++;
   try {
     let directCount = 0;
+    let hasComputedSub = false;
     for (const sub of subs) {
+      if (sub._c) hasComputedSub = true;
       pendingQueue[directCount++] = sub;
     }
-    for (let i2 = 0; i2 < directCount; i2++) {
-      if (pendingQueue[i2]._c) {
-        propagateDirty(pendingQueue[i2]);
+    if (!hasComputedSub) {
+      for (let i2 = 0; i2 < directCount; i2++) {
+        safeInvoke(pendingQueue[i2]);
       }
-    }
-    for (let i2 = 0; i2 < directCount; i2++) {
-      if (!pendingQueue[i2]._c) {
-        if (!pendingSet.has(pendingQueue[i2])) {
-          safeInvoke(pendingQueue[i2]);
+    } else {
+      for (let i2 = 0; i2 < directCount; i2++) {
+        if (pendingQueue[i2]._c) {
+          propagateDirty(pendingQueue[i2]);
+        }
+      }
+      for (let i2 = 0; i2 < directCount; i2++) {
+        const sub = pendingQueue[i2];
+        if (!sub._c && !pendingSet.has(sub)) {
+          pendingSet.add(sub);
+          safeInvoke(sub);
         }
       }
     }
     let i = directCount;
     while (i < pendingQueue.length) {
+      if (i - directCount >= maxDrainIterations) {
+        if (typeof console !== "undefined") {
+          console.error(
+            `[SibuJS] Notification queue exceeded ${maxDrainIterations} iterations \u2014 likely an effect that writes to a signal it reads. Breaking to prevent infinite loop.`
+          );
+        }
+        break;
+      }
       safeInvoke(pendingQueue[i]);
       i++;
     }
   } finally {
-    pendingQueue.length = 0;
-    pendingSet.clear();
     notifyDepth--;
+    if (notifyDepth === 0) {
+      pendingQueue.length = 0;
+      pendingSet.clear();
+    }
   }
 }
 function cleanup(subscriber) {
@@ -261,7 +311,9 @@ function cleanup(subscriber) {
     if (subs) {
       subs.delete(subscriber);
       if (singleDep.__f === subscriber) {
-        singleDep.__f = void 0;
+        singleDep.__f = subs.size === 1 ? subs.values().next().value : void 0;
+      } else if (subs.size === 1 && singleDep.__f === void 0) {
+        singleDep.__f = subs.values().next().value;
       }
     }
     sub._dep = void 0;
@@ -274,7 +326,9 @@ function cleanup(subscriber) {
     if (subs) {
       subs.delete(subscriber);
       if (signal2.__f === subscriber) {
-        signal2.__f = void 0;
+        signal2.__f = subs.size === 1 ? subs.values().next().value : void 0;
+      } else if (subs.size === 1 && signal2.__f === void 0) {
+        signal2.__f = subs.values().next().value;
       }
     }
   }
@@ -285,6 +339,7 @@ function cleanup(subscriber) {
 function derived(getter, options) {
   devAssert(typeof getter === "function", "derived: argument must be a getter function.");
   const debugName = options?.name;
+  const equals = options?.equals;
   const cs = {};
   cs._d = false;
   cs._g = getter;
@@ -295,25 +350,56 @@ function derived(getter, options) {
   markDirty._c = 1;
   markDirty._sig = cs;
   track(() => {
-    cs._d = false;
-    cs._v = getter();
+    let threw = true;
+    try {
+      cs._v = getter();
+      cs._d = false;
+      threw = false;
+    } finally {
+      if (threw) cs._d = true;
+    }
   }, markDirty);
   const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+  let evaluating = false;
   function computedGetter() {
+    if (evaluating) {
+      throw new Error(
+        `[SibuJS] Circular dependency detected in derived${debugName ? ` "${debugName}"` : ""}. A derived signal cannot read itself (directly or through a chain).`
+      );
+    }
     if (trackingSuspended) {
       if (cs._d) {
-        cs._d = false;
-        cs._v = getter();
+        evaluating = true;
+        let threw = true;
+        try {
+          retrack(() => {
+            cs._v = getter();
+            cs._d = false;
+            threw = false;
+          }, markDirty);
+        } finally {
+          evaluating = false;
+          if (threw) cs._d = true;
+        }
       }
       return cs._v;
     }
     recordDependency(cs);
     if (cs._d) {
       const oldValue = cs._v;
-      track(() => {
-        cs._d = false;
-        cs._v = getter();
-      }, markDirty);
+      evaluating = true;
+      let threw = true;
+      try {
+        retrack(() => {
+          const next = getter();
+          cs._v = equals && cs._v !== void 0 ? equals(cs._v, next) ? cs._v : next : next;
+          cs._d = false;
+          threw = false;
+        }, markDirty);
+      } finally {
+        evaluating = false;
+        if (threw) cs._d = true;
+      }
       if (hook && oldValue !== cs._v) {
         hook.emit("computed:update", { signal: cs, oldValue, newValue: cs._v });
       }
@@ -329,6 +415,121 @@ function derived(getter, options) {
   return computedGetter;
 }
 
+// src/core/ssr-context.ts
+var als = null;
+try {
+  if (typeof process !== "undefined" && process.versions && process.versions.node) {
+    const req = Function("return typeof require==='function'?require:null")();
+    if (req) {
+      const mod = req("node:async_hooks");
+      als = new mod.AsyncLocalStorage();
+    }
+  }
+} catch {
+  als = null;
+}
+var fallbackStore = { ssr: false, suspenseIdCounter: 0 };
+function getSSRStore() {
+  if (als) {
+    const s = als.getStore();
+    if (s) return s;
+  }
+  return fallbackStore;
+}
+function isSSR() {
+  return getSSRStore().ssr;
+}
+
+// src/core/signals/effect.ts
+var _g = globalThis;
+function effect(effectFn, options) {
+  devAssert(typeof effectFn === "function", "effect: argument must be a function.");
+  if (isSSR()) return () => {
+  };
+  const onError = options?.onError;
+  let userCleanups = [];
+  const onCleanup = (fn) => {
+    userCleanups.push(fn);
+  };
+  const runUserCleanups = () => {
+    if (userCleanups.length === 0) return;
+    const list = userCleanups;
+    userCleanups = [];
+    for (let i = list.length - 1; i >= 0; i--) {
+      try {
+        list[i]();
+      } catch (err) {
+        if (typeof console !== "undefined") {
+          console.warn("[SibuJS effect] onCleanup threw:", err);
+        }
+      }
+    }
+  };
+  const invokeBody = () => effectFn(onCleanup);
+  const wrappedFn = onError ? () => {
+    try {
+      invokeBody();
+    } catch (err) {
+      onError(err);
+    }
+  } : invokeBody;
+  let cleanupHandle = () => {
+  };
+  let running = false;
+  const subscriber = () => {
+    if (running) {
+      if (_g.__SIBU_DEV_WARN__ !== false && typeof console !== "undefined") {
+        console.warn(
+          "[SibuJS] effect re-entered itself while running \u2014 the triggering update will be ignored. Wrap mutual writes in `batch()` or split the effect to avoid this."
+        );
+      }
+      return;
+    }
+    running = true;
+    try {
+      runUserCleanups();
+      cleanupHandle();
+      cleanupHandle = track(wrappedFn, subscriber);
+    } finally {
+      running = false;
+    }
+  };
+  running = true;
+  try {
+    cleanupHandle = track(wrappedFn, subscriber);
+  } finally {
+    running = false;
+  }
+  const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook) hook.emit("effect:create", { effectFn });
+  let disposed = false;
+  return () => {
+    if (disposed) return;
+    disposed = true;
+    const h = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+    if (h) {
+      try {
+        h.emit("effect:destroy", { effectFn });
+      } catch {
+      }
+    }
+    try {
+      runUserCleanups();
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[SibuJS effect] onCleanup threw during dispose:", err);
+      }
+    }
+    try {
+      cleanupHandle();
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[SibuJS effect] dispose threw:", err);
+      }
+    }
+  };
+}
+
 // src/reactivity/batch.ts
 var batchDepth = 0;
 var pendingSignals = /* @__PURE__ */ new Set();
@@ -349,15 +550,18 @@ function enqueueBatchedSignal(signal2) {
   return true;
 }
 function flushBatch() {
-  for (const signal2 of pendingSignals) {
-    queueSignalNotification(signal2);
+  try {
+    for (const signal2 of pendingSignals) {
+      queueSignalNotification(signal2);
+    }
+  } finally {
+    pendingSignals.clear();
   }
-  pendingSignals.clear();
   drainNotificationQueue();
 }
 
 // src/core/signals/signal.ts
-var _g = globalThis;
+var _g2 = globalThis;
 var _isDev3 = isDev();
 function signal(initial, options) {
   const state = { value: initial };
@@ -378,7 +582,7 @@ function signal(initial, options) {
     if (_isDev3) {
       const oldValue = state.value;
       state.value = newValue;
-      const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+      const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
       if (hook) hook.emit("signal:update", { signal: state, name: debugName, oldValue, newValue });
     } else {
       state.value = newValue;
@@ -388,18 +592,12 @@ function signal(initial, options) {
     }
   }
   if (_isDev3) {
-    const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+    const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
     if (hook) hook.emit("signal:create", { signal: state, name: debugName, getter: get, initial });
   }
   return [get, set];
 }
 
-// src/core/ssr-context.ts
-var ssrMode = false;
-function isSSR() {
-  return ssrMode;
-}
-
 // src/core/signals/watch.ts
 function watch(getter, callback) {
   devAssert(typeof getter === "function", "watch: first argument must be a getter function.");
@@ -425,6 +623,8 @@ function watch(getter, callback) {
 }
 
 // src/widgets/Combobox.ts
+var comboboxIdCounter = 0;
+var boundComboboxes = /* @__PURE__ */ new WeakMap();
 function combobox(options) {
   const { items, filterFn, itemToString } = options;
   const defaultFilterFn = (item, q) => {
@@ -481,6 +681,92 @@ function combobox(options) {
   function close() {
     setIsOpen(false);
   }
+  function bind(els) {
+    const existing = boundComboboxes.get(els.input);
+    if (existing) return existing;
+    const listboxId = `sibu-combobox-listbox-${++comboboxIdCounter}`;
+    els.listbox.id = listboxId;
+    els.listbox.setAttribute("role", "listbox");
+    els.input.setAttribute("role", "combobox");
+    els.input.setAttribute("aria-autocomplete", "list");
+    els.input.setAttribute("aria-controls", listboxId);
+    const fxTeardown = effect(() => {
+      const open2 = isOpen();
+      els.input.setAttribute("aria-expanded", open2 ? "true" : "false");
+      els.listbox.hidden = !open2;
+      const idx = highlightedIndex();
+      const filtered = filteredItems();
+      let activeId = "";
+      for (let i = 0; i < filtered.length; i++) {
+        const optEl = els.option(filtered[i], i);
+        if (!optEl) continue;
+        if (!optEl.id) optEl.id = `${listboxId}-opt-${i}`;
+        optEl.setAttribute("role", "option");
+        const isHighlighted = i === idx;
+        optEl.setAttribute("aria-selected", isHighlighted ? "true" : "false");
+        if (isHighlighted) activeId = optEl.id;
+      }
+      if (activeId) els.input.setAttribute("aria-activedescendant", activeId);
+      else els.input.removeAttribute("aria-activedescendant");
+    });
+    const onInput = () => {
+      setQuery(els.input.value);
+      open();
+    };
+    const onKey = (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!isOpen()) open();
+        highlightNext();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (!isOpen()) open();
+        highlightPrev();
+      } else if (e.key === "Enter") {
+        if (highlightedIndex() >= 0) {
+          e.preventDefault();
+          selectHighlighted();
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        if (filteredItems().length > 0) setHighlightedIndex(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        const len = filteredItems().length;
+        if (len > 0) setHighlightedIndex(len - 1);
+      }
+    };
+    let blurTimer = null;
+    const onFocus = () => open();
+    const onBlur = () => {
+      if (blurTimer !== null) clearTimeout(blurTimer);
+      blurTimer = setTimeout(() => {
+        blurTimer = null;
+        if (document.activeElement !== els.input) close();
+      }, 100);
+    };
+    els.input.addEventListener("input", onInput);
+    els.input.addEventListener("keydown", onKey);
+    els.input.addEventListener("focus", onFocus);
+    els.input.addEventListener("blur", onBlur);
+    const teardown = () => {
+      boundComboboxes.delete(els.input);
+      fxTeardown();
+      els.input.removeEventListener("input", onInput);
+      els.input.removeEventListener("keydown", onKey);
+      els.input.removeEventListener("focus", onFocus);
+      els.input.removeEventListener("blur", onBlur);
+      if (blurTimer !== null) {
+        clearTimeout(blurTimer);
+        blurTimer = null;
+      }
+    };
+    boundComboboxes.set(els.input, teardown);
+    return teardown;
+  }
   return {
     query,
     setQuery,
@@ -493,11 +779,13 @@ function combobox(options) {
     selectHighlighted,
     isOpen,
     open,
-    close
+    close,
+    bind
   };
 }
 
 // src/widgets/Tabs.ts
+var boundTablists = /* @__PURE__ */ new WeakMap();
 function tabs(options) {
   const { tabs: tabDefs, defaultTab } = options;
   const initialTab = defaultTab ?? tabDefs.find((t) => !t.disabled)?.id ?? tabDefs[0]?.id ?? "";
@@ -544,6 +832,118 @@ function tabs(options) {
   function isActive(id) {
     return activeTab() === id;
   }
+  function bind(els) {
+    const existing = boundTablists.get(els.tablist);
+    if (existing) return existing;
+    const restore = [];
+    const prevTablistRole = els.tablist.getAttribute("role");
+    els.tablist.setAttribute("role", "tablist");
+    restore.push(() => {
+      if (prevTablistRole === null) els.tablist.removeAttribute("role");
+      else els.tablist.setAttribute("role", prevTablistRole);
+    });
+    for (const def of tabDefs) {
+      const tabEl = els.tabs[def.id];
+      if (!tabEl) continue;
+      const prevRole = tabEl.getAttribute("role");
+      const prevId = tabEl.id;
+      const prevDisabled = tabEl.getAttribute("aria-disabled");
+      const prevControls = tabEl.getAttribute("aria-controls");
+      tabEl.setAttribute("role", "tab");
+      tabEl.setAttribute("id", `sibu-tab-${def.id}`);
+      if (def.disabled) tabEl.setAttribute("aria-disabled", "true");
+      const panelEl = els.panels?.[def.id];
+      let prevPanelRole = null;
+      let prevPanelId = "";
+      let prevPanelLabelledBy = null;
+      if (panelEl) {
+        prevPanelRole = panelEl.getAttribute("role");
+        prevPanelId = panelEl.id;
+        prevPanelLabelledBy = panelEl.getAttribute("aria-labelledby");
+        panelEl.setAttribute("role", "tabpanel");
+        panelEl.setAttribute("id", `sibu-tabpanel-${def.id}`);
+        panelEl.setAttribute("aria-labelledby", `sibu-tab-${def.id}`);
+        tabEl.setAttribute("aria-controls", `sibu-tabpanel-${def.id}`);
+      }
+      restore.push(() => {
+        if (prevRole === null) tabEl.removeAttribute("role");
+        else tabEl.setAttribute("role", prevRole);
+        if (prevId === "") tabEl.removeAttribute("id");
+        else tabEl.id = prevId;
+        if (prevDisabled === null) tabEl.removeAttribute("aria-disabled");
+        else tabEl.setAttribute("aria-disabled", prevDisabled);
+        if (prevControls === null) tabEl.removeAttribute("aria-controls");
+        else tabEl.setAttribute("aria-controls", prevControls);
+        tabEl.removeAttribute("aria-selected");
+        tabEl.removeAttribute("tabindex");
+        if (panelEl) {
+          if (prevPanelRole === null) panelEl.removeAttribute("role");
+          else panelEl.setAttribute("role", prevPanelRole);
+          if (prevPanelId === "") panelEl.removeAttribute("id");
+          else panelEl.id = prevPanelId;
+          if (prevPanelLabelledBy === null) panelEl.removeAttribute("aria-labelledby");
+          else panelEl.setAttribute("aria-labelledby", prevPanelLabelledBy);
+        }
+      });
+    }
+    const fxTeardown = effect(() => {
+      const active = activeTab();
+      for (const def of tabDefs) {
+        const tabEl = els.tabs[def.id];
+        if (!tabEl) continue;
+        const isAct = def.id === active;
+        tabEl.setAttribute("aria-selected", isAct ? "true" : "false");
+        tabEl.tabIndex = isAct ? 0 : -1;
+        const panelEl = els.panels?.[def.id];
+        if (panelEl) panelEl.hidden = !isAct;
+      }
+    });
+    const onKey = (e) => {
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        nextTab();
+        els.tabs[activeTab()]?.focus();
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        prevTab();
+        els.tabs[activeTab()]?.focus();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        const first = tabDefs.find((t) => !t.disabled);
+        if (first) {
+          setActiveTabState(first.id);
+          els.tabs[first.id]?.focus();
+        }
+      } else if (e.key === "End") {
+        e.preventDefault();
+        for (let i = tabDefs.length - 1; i >= 0; i--) {
+          if (!tabDefs[i].disabled) {
+            setActiveTabState(tabDefs[i].id);
+            els.tabs[tabDefs[i].id]?.focus();
+            break;
+          }
+        }
+      }
+    };
+    els.tablist.addEventListener("keydown", onKey);
+    const clickHandlers = [];
+    for (const def of tabDefs) {
+      const tabEl = els.tabs[def.id];
+      if (!tabEl) continue;
+      const fn = () => setActiveTab(def.id);
+      tabEl.addEventListener("click", fn);
+      clickHandlers.push({ el: tabEl, fn });
+    }
+    const teardown = () => {
+      boundTablists.delete(els.tablist);
+      fxTeardown();
+      els.tablist.removeEventListener("keydown", onKey);
+      for (const { el, fn } of clickHandlers) el.removeEventListener("click", fn);
+      for (const r of restore) r();
+    };
+    boundTablists.set(els.tablist, teardown);
+    return teardown;
+  }
   return {
     activeTab,
     setActiveTab,
@@ -551,11 +951,13 @@ function tabs(options) {
     nextTab,
     prevTab,
     /** Reactive check — use inside class/nodes bindings for per-tab reactivity */
-    isActive
+    isActive,
+    bind
   };
 }
 
 // src/widgets/Accordion.ts
+var boundAccordions = /* @__PURE__ */ new WeakMap();
 function accordion(options) {
   const { items: itemDefs, multiple = false, defaultExpanded = [] } = options;
   const [expandedIds, setExpandedIds] = signal(new Set(defaultExpanded));
@@ -602,6 +1004,86 @@ function accordion(options) {
   function isExpanded(id) {
     return expandedIds().has(id);
   }
+  function bind(els) {
+    const idempotencyKey = els.root ?? (itemDefs.length > 0 ? els.triggers[itemDefs[0].id] : void 0);
+    if (idempotencyKey) {
+      const existing = boundAccordions.get(idempotencyKey);
+      if (existing) return existing;
+    }
+    const restore = [];
+    for (const item of itemDefs) {
+      const trig = els.triggers[item.id];
+      const panel = els.panels[item.id];
+      if (!trig) continue;
+      const prevTrigId = trig.id;
+      const prevTrigControls = trig.getAttribute("aria-controls");
+      trig.id = `sibu-accordion-trigger-${item.id}`;
+      let prevPanelRole = null;
+      let prevPanelId = "";
+      let prevPanelLabelledBy = null;
+      if (panel) {
+        prevPanelRole = panel.getAttribute("role");
+        prevPanelId = panel.id;
+        prevPanelLabelledBy = panel.getAttribute("aria-labelledby");
+        panel.setAttribute("role", "region");
+        panel.id = `sibu-accordion-panel-${item.id}`;
+        panel.setAttribute("aria-labelledby", trig.id);
+        trig.setAttribute("aria-controls", panel.id);
+      }
+      restore.push(() => {
+        if (prevTrigId === "") trig.removeAttribute("id");
+        else trig.id = prevTrigId;
+        if (prevTrigControls === null) trig.removeAttribute("aria-controls");
+        else trig.setAttribute("aria-controls", prevTrigControls);
+        trig.removeAttribute("aria-expanded");
+        if (panel) {
+          if (prevPanelRole === null) panel.removeAttribute("role");
+          else panel.setAttribute("role", prevPanelRole);
+          if (prevPanelId === "") panel.removeAttribute("id");
+          else panel.id = prevPanelId;
+          if (prevPanelLabelledBy === null) panel.removeAttribute("aria-labelledby");
+          else panel.setAttribute("aria-labelledby", prevPanelLabelledBy);
+        }
+      });
+    }
+    const fxTeardown = effect(() => {
+      const ids = expandedIds();
+      for (const item of itemDefs) {
+        const trig = els.triggers[item.id];
+        const panel = els.panels[item.id];
+        if (!trig) continue;
+        const expanded = ids.has(item.id);
+        trig.setAttribute("aria-expanded", expanded ? "true" : "false");
+        if (panel) panel.hidden = !expanded;
+      }
+    });
+    const handlers = [];
+    for (const item of itemDefs) {
+      const trig = els.triggers[item.id];
+      if (!trig) continue;
+      const click = () => toggle(item.id);
+      const key = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          toggle(item.id);
+        }
+      };
+      trig.addEventListener("click", click);
+      trig.addEventListener("keydown", key);
+      handlers.push({ el: trig, click, key });
+    }
+    const teardown = () => {
+      if (idempotencyKey) boundAccordions.delete(idempotencyKey);
+      fxTeardown();
+      for (const { el, click, key } of handlers) {
+        el.removeEventListener("click", click);
+        el.removeEventListener("keydown", key);
+      }
+      for (const r of restore) r();
+    };
+    if (idempotencyKey) boundAccordions.set(idempotencyKey, teardown);
+    return teardown;
+  }
   return {
     items,
     toggle,
@@ -610,11 +1092,14 @@ function accordion(options) {
     expandAll,
     collapseAll,
     /** Reactive check — use inside class/nodes bindings for per-item reactivity */
-    isExpanded
+    isExpanded,
+    bind
   };
 }
 
 // src/widgets/Popover.ts
+var popoverIdCounter = 0;
+var boundPopovers = /* @__PURE__ */ new WeakMap();
 function popover() {
   const [isOpen, setIsOpen] = signal(false);
   function open() {
@@ -626,12 +1111,88 @@ function popover() {
   function toggle() {
     setIsOpen((prev) => !prev);
   }
-  return { isOpen, open, close, toggle };
+  function bind(els) {
+    const existing = boundPopovers.get(els.trigger);
+    if (existing) return existing;
+    const id = `sibu-popover-${++popoverIdCounter}`;
+    const prevPopoverRole = els.popover.getAttribute("role");
+    const prevPopoverId = els.popover.id;
+    const prevLabelledBy = els.popover.getAttribute("aria-labelledby");
+    const prevTriggerHaspopup = els.trigger.getAttribute("aria-haspopup");
+    const prevTriggerControls = els.trigger.getAttribute("aria-controls");
+    els.popover.setAttribute("role", "dialog");
+    els.popover.id = id;
+    els.trigger.setAttribute("aria-haspopup", "dialog");
+    els.trigger.setAttribute("aria-controls", id);
+    let assignedLabelId = null;
+    if (els.labelledBy) {
+      if (!els.labelledBy.id) {
+        els.labelledBy.id = `${id}-label`;
+        assignedLabelId = els.labelledBy.id;
+      }
+      els.popover.setAttribute("aria-labelledby", els.labelledBy.id);
+    }
+    const fxTeardown = effect(() => {
+      const open2 = isOpen();
+      els.trigger.setAttribute("aria-expanded", open2 ? "true" : "false");
+      els.popover.hidden = !open2;
+    });
+    const onTriggerClick = (e) => {
+      e.preventDefault();
+      toggle();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape" && isOpen()) {
+        e.stopPropagation();
+        close();
+        els.trigger.focus();
+      }
+    };
+    const onDocPointer = (e) => {
+      if (!isOpen()) return;
+      const t = e.target;
+      if (!t) return;
+      if (els.trigger.contains(t) || els.popover.contains(t)) return;
+      close();
+    };
+    els.trigger.addEventListener("click", onTriggerClick);
+    els.popover.addEventListener("keydown", onKey);
+    els.trigger.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onDocPointer);
+    const teardown = () => {
+      boundPopovers.delete(els.trigger);
+      fxTeardown();
+      els.trigger.removeEventListener("click", onTriggerClick);
+      els.popover.removeEventListener("keydown", onKey);
+      els.trigger.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDocPointer);
+      if (prevPopoverRole === null) els.popover.removeAttribute("role");
+      else els.popover.setAttribute("role", prevPopoverRole);
+      if (prevPopoverId === "") els.popover.removeAttribute("id");
+      else els.popover.id = prevPopoverId;
+      if (prevLabelledBy === null) els.popover.removeAttribute("aria-labelledby");
+      else els.popover.setAttribute("aria-labelledby", prevLabelledBy);
+      if (assignedLabelId && els.labelledBy?.id === assignedLabelId) {
+        els.labelledBy.removeAttribute("id");
+      }
+      if (prevTriggerHaspopup === null) els.trigger.removeAttribute("aria-haspopup");
+      else els.trigger.setAttribute("aria-haspopup", prevTriggerHaspopup);
+      if (prevTriggerControls === null) els.trigger.removeAttribute("aria-controls");
+      else els.trigger.setAttribute("aria-controls", prevTriggerControls);
+      els.trigger.removeAttribute("aria-expanded");
+    };
+    boundPopovers.set(els.trigger, teardown);
+    return teardown;
+  }
+  return { isOpen, open, close, toggle, bind };
 }
 
 // src/widgets/Select.ts
+var selectIdCounter = 0;
+var boundSelects = /* @__PURE__ */ new WeakMap();
 function select(options) {
-  const { items, multiple = false } = options;
+  const { items, multiple = false, itemToString, isDisabled } = options;
+  const isItemDisabled = isDisabled ?? (() => false);
   const [selectedItems, setSelectedItems] = signal([]);
   const [isOpen, setIsOpen] = signal(false);
   const [highlightedIndex, setHighlightedIndex] = signal(-1);
@@ -640,6 +1201,7 @@ function select(options) {
     return sel.length > 0 ? sel[sel.length - 1] : null;
   });
   function select2(item) {
+    if (isItemDisabled(item)) return;
     if (multiple) {
       setSelectedItems((prev) => {
         if (prev.includes(item)) return prev;
@@ -671,18 +1233,28 @@ function select(options) {
   function close() {
     setIsOpen(false);
   }
+  function nextEnabled(from, dir) {
+    const len = items.length;
+    if (len === 0) return -1;
+    let i = from;
+    for (let n = 0; n < len; n++) {
+      i = (i + dir + len) % len;
+      if (!isItemDisabled(items[i])) return i;
+    }
+    return -1;
+  }
   function highlightNext() {
     if (items.length === 0) return;
     setHighlightedIndex((prev) => {
-      const next = prev + 1;
-      return next >= items.length ? 0 : next;
+      const n = nextEnabled(prev < 0 ? -1 : prev, 1);
+      return n === -1 ? prev : n;
     });
   }
   function highlightPrev() {
     if (items.length === 0) return;
     setHighlightedIndex((prev) => {
-      const next = prev - 1;
-      return next < 0 ? items.length - 1 : next;
+      const n = nextEnabled(prev < 0 ? items.length : prev, -1);
+      return n === -1 ? prev : n;
     });
   }
   function selectHighlighted() {
@@ -694,6 +1266,73 @@ function select(options) {
   function clear() {
     setSelectedItems([]);
   }
+  function bind(els) {
+    const existing = boundSelects.get(els.listbox);
+    if (existing) return existing;
+    const listboxId = `sibu-select-${++selectIdCounter}`;
+    els.listbox.id = listboxId;
+    els.listbox.setAttribute("role", "listbox");
+    els.listbox.setAttribute("aria-multiselectable", multiple ? "true" : "false");
+    if (els.listbox.tabIndex < 0) els.listbox.tabIndex = 0;
+    const toStr = els.itemToString ?? itemToString ?? ((it) => String(it));
+    const fxTeardown = effect(() => {
+      const idx = highlightedIndex();
+      const sel = selectedItems();
+      let activeId = "";
+      for (let i = 0; i < items.length; i++) {
+        const optEl = els.option(items[i], i);
+        if (!optEl) continue;
+        if (!optEl.id) optEl.id = `${listboxId}-opt-${i}`;
+        optEl.setAttribute("role", "option");
+        optEl.setAttribute("aria-selected", sel.includes(items[i]) ? "true" : "false");
+        if (isItemDisabled(items[i])) optEl.setAttribute("aria-disabled", "true");
+        else optEl.removeAttribute("aria-disabled");
+        if (i === idx) activeId = optEl.id;
+      }
+      if (activeId) els.listbox.setAttribute("aria-activedescendant", activeId);
+      else els.listbox.removeAttribute("aria-activedescendant");
+    });
+    let typeBuffer = "";
+    let typeTimer = null;
+    const onKey = (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        highlightNext();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        highlightPrev();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        if (items.length > 0) setHighlightedIndex(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        if (items.length > 0) setHighlightedIndex(items.length - 1);
+      } else if (e.key === "Enter" || e.key === " ") {
+        if (highlightedIndex() >= 0) {
+          e.preventDefault();
+          selectHighlighted();
+        }
+      } else if (e.key.length === 1 && /\S/.test(e.key)) {
+        typeBuffer += e.key.toLowerCase();
+        if (typeTimer !== null) clearTimeout(typeTimer);
+        typeTimer = setTimeout(() => {
+          typeBuffer = "";
+          typeTimer = null;
+        }, 500);
+        const found = items.findIndex((it) => !isItemDisabled(it) && toStr(it).toLowerCase().startsWith(typeBuffer));
+        if (found !== -1) setHighlightedIndex(found);
+      }
+    };
+    els.listbox.addEventListener("keydown", onKey);
+    const teardown = () => {
+      boundSelects.delete(els.listbox);
+      fxTeardown();
+      els.listbox.removeEventListener("keydown", onKey);
+      if (typeTimer !== null) clearTimeout(typeTimer);
+    };
+    boundSelects.set(els.listbox, teardown);
+    return teardown;
+  }
   return {
     selectedItems,
     selectedItem,
@@ -708,21 +1347,28 @@ function select(options) {
     highlightNext,
     highlightPrev,
     selectHighlighted,
-    clear
+    clear,
+    bind
   };
 }
 
 // src/widgets/Tooltip.ts
+var tooltipIdCounter = 0;
+var boundTriggers = /* @__PURE__ */ new WeakMap();
 function tooltip(options) {
   const delay = options?.delay ?? 0;
+  const hideDelay = options?.hideDelay ?? 100;
   const [isVisible, setIsVisible] = signal(false);
   const [content, setContent] = signal("");
   let delayTimer = null;
+  let hideTimer = null;
   function show() {
+    if (hideTimer !== null) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
     if (delay > 0) {
-      if (delayTimer !== null) {
-        clearTimeout(delayTimer);
-      }
+      if (delayTimer !== null) clearTimeout(delayTimer);
       delayTimer = setTimeout(() => {
         setIsVisible(true);
         delayTimer = null;
@@ -738,10 +1384,82 @@ function tooltip(options) {
     }
     setIsVisible(false);
   }
-  return { isVisible, show, hide, content, setContent };
+  function scheduleHide() {
+    if (delayTimer !== null) {
+      clearTimeout(delayTimer);
+      delayTimer = null;
+    }
+    if (hideTimer !== null) clearTimeout(hideTimer);
+    hideTimer = setTimeout(() => {
+      hideTimer = null;
+      setIsVisible(false);
+    }, hideDelay);
+  }
+  function bind(els) {
+    const existing = boundTriggers.get(els.trigger);
+    if (existing) return existing;
+    const id = `sibu-tooltip-${++tooltipIdCounter}`;
+    els.tooltip.setAttribute("role", "tooltip");
+    els.tooltip.id = id;
+    const prevDescribedBy = els.trigger.getAttribute("aria-describedby");
+    els.trigger.setAttribute("aria-describedby", prevDescribedBy ? `${prevDescribedBy} ${id}` : id);
+    const fxTeardown = effect(() => {
+      els.tooltip.hidden = !isVisible();
+    });
+    const onTriggerEnter = () => show();
+    const onTriggerLeave = () => scheduleHide();
+    const onTooltipEnter = () => {
+      if (hideTimer !== null) {
+        clearTimeout(hideTimer);
+        hideTimer = null;
+      }
+    };
+    const onTooltipLeave = () => scheduleHide();
+    const onFocus = () => show();
+    const onBlur = () => hide();
+    const onKey = (e) => {
+      if (e.key === "Escape" && isVisible()) {
+        e.stopPropagation();
+        hide();
+      }
+    };
+    els.trigger.addEventListener("pointerenter", onTriggerEnter);
+    els.trigger.addEventListener("pointerleave", onTriggerLeave);
+    els.trigger.addEventListener("focus", onFocus);
+    els.trigger.addEventListener("blur", onBlur);
+    els.trigger.addEventListener("keydown", onKey);
+    els.tooltip.addEventListener("pointerenter", onTooltipEnter);
+    els.tooltip.addEventListener("pointerleave", onTooltipLeave);
+    const teardown = () => {
+      boundTriggers.delete(els.trigger);
+      fxTeardown();
+      els.trigger.removeEventListener("pointerenter", onTriggerEnter);
+      els.trigger.removeEventListener("pointerleave", onTriggerLeave);
+      els.trigger.removeEventListener("focus", onFocus);
+      els.trigger.removeEventListener("blur", onBlur);
+      els.trigger.removeEventListener("keydown", onKey);
+      els.tooltip.removeEventListener("pointerenter", onTooltipEnter);
+      els.tooltip.removeEventListener("pointerleave", onTooltipLeave);
+      const cur = els.trigger.getAttribute("aria-describedby");
+      if (cur) {
+        const remaining = cur.split(/\s+/).filter((part) => part && part !== id);
+        if (remaining.length > 0) els.trigger.setAttribute("aria-describedby", remaining.join(" "));
+        else els.trigger.removeAttribute("aria-describedby");
+      } else if (prevDescribedBy) {
+        els.trigger.setAttribute("aria-describedby", prevDescribedBy);
+      }
+      if (delayTimer !== null) clearTimeout(delayTimer);
+      if (hideTimer !== null) clearTimeout(hideTimer);
+    };
+    boundTriggers.set(els.trigger, teardown);
+    return teardown;
+  }
+  return { isVisible, show, hide, content, setContent, bind };
 }
 
 // src/widgets/FileUpload.ts
+var fileUploadIdCounter = 0;
+var boundFileUploads = /* @__PURE__ */ new WeakMap();
 function fileUpload(options) {
   const accept = options?.accept;
   const multiple = options?.multiple ?? false;
@@ -809,6 +1527,107 @@ function fileUpload(options) {
       setErrors([]);
     });
   }
+  function bind(els) {
+    const existing = boundFileUploads.get(els.input);
+    if (existing) return existing;
+    const id = `sibu-fileupload-${++fileUploadIdCounter}`;
+    const restore = [];
+    if (accept) els.input.accept = accept;
+    els.input.multiple = multiple;
+    let hintId = null;
+    if (els.hint) {
+      const assignedHintId = !els.hint.id;
+      if (assignedHintId) els.hint.id = `${id}-hint`;
+      hintId = els.hint.id;
+      const prev = els.input.getAttribute("aria-describedby");
+      els.input.setAttribute("aria-describedby", prev ? `${prev} ${hintId}` : hintId);
+      restore.push(() => {
+        const cur = els.input.getAttribute("aria-describedby");
+        if (cur) {
+          const parts = cur.split(/\s+/).filter((p) => p && p !== hintId);
+          if (parts.length > 0) els.input.setAttribute("aria-describedby", parts.join(" "));
+          else els.input.removeAttribute("aria-describedby");
+        }
+        if (assignedHintId && els.hint && els.hint.id === hintId) els.hint.removeAttribute("id");
+      });
+    }
+    if (els.errorRegion) {
+      const prevRole = els.errorRegion.getAttribute("role");
+      const prevLive = els.errorRegion.getAttribute("aria-live");
+      els.errorRegion.setAttribute("role", "status");
+      els.errorRegion.setAttribute("aria-live", "polite");
+      restore.push(() => {
+        if (prevRole === null) els.errorRegion.removeAttribute("role");
+        else els.errorRegion.setAttribute("role", prevRole);
+        if (prevLive === null) els.errorRegion.removeAttribute("aria-live");
+        else els.errorRegion.setAttribute("aria-live", prevLive);
+      });
+    }
+    if (els.dropZone) {
+      const prevDzRole = els.dropZone.getAttribute("role");
+      const prevDzLabel = els.dropZone.getAttribute("aria-label");
+      const prevDzTabindex = els.dropZone.hasAttribute("tabindex") ? els.dropZone.getAttribute("tabindex") : null;
+      els.dropZone.setAttribute("role", "button");
+      els.dropZone.setAttribute("aria-label", "File drop zone \u2014 click or press Enter to browse");
+      if (els.dropZone.tabIndex < 0) els.dropZone.tabIndex = 0;
+      restore.push(() => {
+        if (prevDzRole === null) els.dropZone.removeAttribute("role");
+        else els.dropZone.setAttribute("role", prevDzRole);
+        if (prevDzLabel === null) els.dropZone.removeAttribute("aria-label");
+        else els.dropZone.setAttribute("aria-label", prevDzLabel);
+        if (prevDzTabindex === null) els.dropZone.removeAttribute("tabindex");
+        else els.dropZone.setAttribute("tabindex", prevDzTabindex);
+      });
+    }
+    const fxTeardown = effect(() => {
+      const errs = errors();
+      if (els.errorRegion) els.errorRegion.textContent = errs.join(". ");
+      if (els.dropZone) els.dropZone.setAttribute("data-drag-over", isDragOver() ? "true" : "false");
+    });
+    const onChange = () => {
+      if (els.input.files) addFiles(els.input.files);
+    };
+    const onDropClick = () => els.input.click();
+    const onDropKey = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        els.input.click();
+      }
+    };
+    const onDragOver = (e) => {
+      e.preventDefault();
+      setDragOver(true);
+    };
+    const onDragLeave = () => setDragOver(false);
+    const onDrop = (e) => {
+      e.preventDefault();
+      setDragOver(false);
+      if (e.dataTransfer?.files) addFiles(e.dataTransfer.files);
+    };
+    els.input.addEventListener("change", onChange);
+    if (els.dropZone) {
+      els.dropZone.addEventListener("click", onDropClick);
+      els.dropZone.addEventListener("keydown", onDropKey);
+      els.dropZone.addEventListener("dragover", onDragOver);
+      els.dropZone.addEventListener("dragleave", onDragLeave);
+      els.dropZone.addEventListener("drop", onDrop);
+    }
+    const teardown = () => {
+      boundFileUploads.delete(els.input);
+      fxTeardown();
+      els.input.removeEventListener("change", onChange);
+      if (els.dropZone) {
+        els.dropZone.removeEventListener("click", onDropClick);
+        els.dropZone.removeEventListener("keydown", onDropKey);
+        els.dropZone.removeEventListener("dragover", onDragOver);
+        els.dropZone.removeEventListener("dragleave", onDragLeave);
+        els.dropZone.removeEventListener("drop", onDrop);
+      }
+      for (const r of restore) r();
+    };
+    boundFileUploads.set(els.input, teardown);
+    return teardown;
+  }
   return {
     files,
     addFiles,
@@ -816,14 +1635,36 @@ function fileUpload(options) {
     clear,
     errors,
     isDragOver,
-    setDragOver
+    setDragOver,
+    bind
   };
 }
 
+// src/utils/sanitize.ts
+function stripHtml(html) {
+  return String(html).replace(/<[^>]*>/g, "");
+}
+
 // src/widgets/contentEditable.ts
 function contentEditable() {
-  const [content, setContent] = signal("");
+  const [content, setContentInternal] = signal("");
   const [isFocused, setFocused] = signal(false);
+  function setContent(input) {
+    if (typeof input === "string") {
+      setContentInternal(input);
+      return;
+    }
+    if (typeof input.text === "string") {
+      setContentInternal(input.text);
+      return;
+    }
+    if (typeof input.html === "string") {
+      const shouldSanitize = input.sanitize !== false;
+      setContentInternal(shouldSanitize ? stripHtml(input.html) : input.html);
+      return;
+    }
+    setContentInternal("");
+  }
   function wrapSelection(tagName) {
     if (typeof window === "undefined") return;
     const selection = window.getSelection();
@@ -900,6 +1741,7 @@ function contentEditable() {
 }
 
 // src/widgets/datePicker.ts
+var boundDatePickers = /* @__PURE__ */ new WeakMap();
 function datePicker(options) {
   const minDate = options?.minDate;
   const maxDate = options?.maxDate;
@@ -923,33 +1765,20 @@ function datePicker(options) {
       setSelectedDate(date);
     }
   }
+  function shiftMonth(prev, delta) {
+    return new Date(prev.getFullYear(), prev.getMonth() + delta, 1);
+  }
   function nextMonth() {
-    setViewDate((prev) => {
-      const next = new Date(prev);
-      next.setMonth(next.getMonth() + 1);
-      return next;
-    });
+    setViewDate((prev) => shiftMonth(prev, 1));
   }
   function prevMonth() {
-    setViewDate((prev) => {
-      const next = new Date(prev);
-      next.setMonth(next.getMonth() - 1);
-      return next;
-    });
+    setViewDate((prev) => shiftMonth(prev, -1));
   }
   function nextYear() {
-    setViewDate((prev) => {
-      const next = new Date(prev);
-      next.setFullYear(next.getFullYear() + 1);
-      return next;
-    });
+    setViewDate((prev) => new Date(prev.getFullYear() + 1, prev.getMonth(), 1));
   }
   function prevYear() {
-    setViewDate((prev) => {
-      const next = new Date(prev);
-      next.setFullYear(next.getFullYear() - 1);
-      return next;
-    });
+    setViewDate((prev) => new Date(prev.getFullYear() - 1, prev.getMonth(), 1));
   }
   const daysInMonth = derived(() => {
     const vd = viewDate();
@@ -1014,8 +1843,87 @@ function datePicker(options) {
     daysInMonth,
     isDateDisabled,
     /** Reactive check — use inside class bindings for per-day reactivity */
-    isSelected
+    isSelected,
+    bind
   };
+  function bind(els) {
+    const existing = boundDatePickers.get(els.grid);
+    if (existing) return existing;
+    els.grid.setAttribute("role", "grid");
+    if (els.grid.tabIndex < 0) els.grid.tabIndex = 0;
+    const fxTeardown = effect(() => {
+      const sel = selectedDate();
+      const view = viewDate();
+      const days = daysInMonth();
+      for (const d of days) {
+        const cell = els.cell(d.date);
+        if (!cell) continue;
+        cell.setAttribute("role", "gridcell");
+        cell.setAttribute("aria-selected", sel && isSameCalendarDay(sel, d.date) ? "true" : "false");
+        if (d.isDisabled) cell.setAttribute("aria-disabled", "true");
+        else cell.removeAttribute("aria-disabled");
+        cell.tabIndex = isSameCalendarDay(view, d.date) ? 0 : -1;
+      }
+    });
+    function isSameCalendarDay(a, b) {
+      return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+    }
+    function shiftDays(delta) {
+      setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth(), prev.getDate() + delta));
+    }
+    const onKey = (e) => {
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          shiftDays(-1);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          shiftDays(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          shiftDays(-7);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          shiftDays(7);
+          break;
+        case "Home":
+          e.preventDefault();
+          setViewDate((p) => new Date(p.getFullYear(), p.getMonth(), p.getDate() - p.getDay()));
+          break;
+        case "End": {
+          e.preventDefault();
+          setViewDate((p) => new Date(p.getFullYear(), p.getMonth(), p.getDate() + (6 - p.getDay())));
+          break;
+        }
+        case "PageUp":
+          e.preventDefault();
+          if (e.shiftKey) prevYear();
+          else prevMonth();
+          break;
+        case "PageDown":
+          e.preventDefault();
+          if (e.shiftKey) nextYear();
+          else nextMonth();
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          select2(viewDate());
+          break;
+      }
+    };
+    els.grid.addEventListener("keydown", onKey);
+    const teardown = () => {
+      boundDatePickers.delete(els.grid);
+      fxTeardown();
+      els.grid.removeEventListener("keydown", onKey);
+    };
+    boundDatePickers.set(els.grid, teardown);
+    return teardown;
+  }
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {