sibujs 1.4.0 → 1.5.0

package/dist/plugins.cjs

@@ -1014,7 +1014,15 @@ function dispose(node) {
     const disposers = elementDisposers.get(current);
     if (disposers) {
       if (_isDev5) activeBindingCount -= disposers.length;
-      for (const d of disposers) d();
+      for (const d of disposers) {
+        try {
+          d();
+        } catch (err) {
+          if (_isDev5 && typeof console !== "undefined") {
+            console.warn("[SibuJS] Disposer threw during cleanup:", err);
+          }
+        }
+      }
       elementDisposers.delete(current);
     }
   }
@@ -1425,9 +1433,7 @@ function t(key, params) {
   return params ? message.replace(/\{(\w+)\}/g, (_, p2) => String(params[p2] ?? "")) : message;
 }
 function Trans(key, params) {
-  return span({
-    nodes: () => t(key, params)
-  });
+  return span(() => t(key, params));
 }
 function hasTranslation(key) {
   const locale = currentLocale();
@@ -1598,9 +1604,12 @@ var RouteMatcher = class {
     return this.namedRoutes.get(name) || null;
   }
   matchPattern(path2, routePath) {
-    if (routePath === "*" || routePath.endsWith("/*")) {
+    if (routePath === "*") {
+      return { params: { pathMatch: path2 } };
+    }
+    if (routePath.endsWith("/*")) {
       const basePath = routePath.slice(0, -2);
-      if (path2.startsWith(basePath)) {
+      if (path2 === basePath || path2.startsWith(`${basePath}/`)) {
         return { params: { pathMatch: path2.slice(basePath.length) } };
       }
       return null;
@@ -1719,6 +1728,8 @@ var GuardManager = class {
       const next = (result) => {
         if (resolved || signal2.aborted) return;
         resolved = true;
+        clearTimeout(timeoutId);
+        signal2.removeEventListener("abort", abortHandler);
         if (result instanceof Error) {
           reject(result);
         } else if (result === false) {
@@ -1732,10 +1743,10 @@ var GuardManager = class {
       const abortHandler = () => {
         if (!resolved) {
           resolved = true;
+          clearTimeout(timeoutId);
           reject(new Error("Navigation aborted"));
         }
       };
-      signal2.addEventListener("abort", abortHandler);
       const timeoutId = setTimeout(() => {
         if (!resolved) {
           resolved = true;
@@ -1743,6 +1754,7 @@ var GuardManager = class {
           reject(new Error("Guard timeout"));
         }
       }, this.timeout);
+      signal2.addEventListener("abort", abortHandler);
       try {
         guard(to, from, next);
       } catch (error) {
@@ -1753,12 +1765,6 @@ var GuardManager = class {
           reject(error instanceof Error ? error : new Error(String(error)));
         }
       }
-      Promise.resolve().then(() => {
-        if (resolved) {
-          clearTimeout(timeoutId);
-          signal2.removeEventListener("abort", abortHandler);
-        }
-      });
     });
   }
   addBeforeEach(guard) {

package/dist/plugins.d.cts

@@ -24,7 +24,7 @@ declare function t(key: string, params?: Params$1): string;
  * registerTranslations("en", { greeting: "Hello, {name}!" });
  * registerTranslations("es", { greeting: "Hola, {name}!" });
  *
- * div({ nodes: [Trans("greeting", { name: "World" })] });
+ * div([Trans("greeting", { name: "World" })]);
  * // When locale changes, the text updates automatically
  * ```
  */
@@ -235,11 +235,11 @@ declare function Route(): Node;
  * ```ts
  * // Cache all routes (max 10)
  * createRouter(routes, { keepAlive: 10 });
- * mount(() => div({ nodes: [nav, KeepAliveRoute()] }), root);
+ * mount(() => div([nav, KeepAliveRoute()]), root);
  *
  * // Or cache specific routes by name
  * createRouter(routes, { keepAlive: ["dashboard", "settings"] });
- * mount(() => div({ nodes: [nav, KeepAliveRoute()] }), root);
+ * mount(() => div([nav, KeepAliveRoute()]), root);
  *
  * // Or override per-outlet
  * KeepAliveRoute({ max: 5, include: ["dashboard"] })

package/dist/plugins.d.ts

@@ -24,7 +24,7 @@ declare function t(key: string, params?: Params$1): string;
  * registerTranslations("en", { greeting: "Hello, {name}!" });
  * registerTranslations("es", { greeting: "Hola, {name}!" });
  *
- * div({ nodes: [Trans("greeting", { name: "World" })] });
+ * div([Trans("greeting", { name: "World" })]);
  * // When locale changes, the text updates automatically
  * ```
  */
@@ -235,11 +235,11 @@ declare function Route(): Node;
  * ```ts
  * // Cache all routes (max 10)
  * createRouter(routes, { keepAlive: 10 });
- * mount(() => div({ nodes: [nav, KeepAliveRoute()] }), root);
+ * mount(() => div([nav, KeepAliveRoute()]), root);
  *
  * // Or cache specific routes by name
  * createRouter(routes, { keepAlive: ["dashboard", "settings"] });
- * mount(() => div({ nodes: [nav, KeepAliveRoute()] }), root);
+ * mount(() => div([nav, KeepAliveRoute()]), root);
  *
  * // Or override per-outlet
  * KeepAliveRoute({ max: 5, include: ["dashboard"] })

package/dist/plugins.js

@@ -34,25 +34,25 @@ import {
 } from "./chunk-K5ZUMYVS.js";
 import {
   span
-} from "./chunk-32DY64NT.js";
-import "./chunk-F3FA4F32.js";
+} from "./chunk-P3XWXJZU.js";
+import "./chunk-SFKNRVCU.js";
 import {
   dispose,
   registerDisposer
-} from "./chunk-PTQJDMRT.js";
+} from "./chunk-5ZYQ6KDD.js";
 import {
   sanitizeUrl
 } from "./chunk-CMBFNA7L.js";
 import {
   effect
-} from "./chunk-CHF5OHIA.js";
+} from "./chunk-VQNQZCWJ.js";
 import "./chunk-EUZND3CB.js";
 import {
   signal
-} from "./chunk-WZSPOOER.js";
+} from "./chunk-NZIIMDWI.js";
 import {
   track
-} from "./chunk-ZD6OAMTH.js";
+} from "./chunk-K4G4ZQNR.js";
 import "./chunk-5X6PP2UK.js";
 
 // src/plugins/i18n.ts
@@ -73,9 +73,7 @@ function t(key, params) {
   return params ? message.replace(/\{(\w+)\}/g, (_, p) => String(params[p] ?? "")) : message;
 }
 function Trans(key, params) {
-  return span({
-    nodes: () => t(key, params)
-  });
+  return span(() => t(key, params));
 }
 function hasTranslation(key) {
   const locale = currentLocale();
@@ -206,9 +204,12 @@ var RouteMatcher = class {
     return this.namedRoutes.get(name) || null;
   }
   matchPattern(path, routePath) {
-    if (routePath === "*" || routePath.endsWith("/*")) {
+    if (routePath === "*") {
+      return { params: { pathMatch: path } };
+    }
+    if (routePath.endsWith("/*")) {
       const basePath = routePath.slice(0, -2);
-      if (path.startsWith(basePath)) {
+      if (path === basePath || path.startsWith(`${basePath}/`)) {
         return { params: { pathMatch: path.slice(basePath.length) } };
       }
       return null;
@@ -327,6 +328,8 @@ var GuardManager = class {
       const next = (result) => {
         if (resolved || signal2.aborted) return;
         resolved = true;
+        clearTimeout(timeoutId);
+        signal2.removeEventListener("abort", abortHandler);
         if (result instanceof Error) {
           reject(result);
         } else if (result === false) {
@@ -340,10 +343,10 @@ var GuardManager = class {
       const abortHandler = () => {
         if (!resolved) {
           resolved = true;
+          clearTimeout(timeoutId);
           reject(new Error("Navigation aborted"));
         }
       };
-      signal2.addEventListener("abort", abortHandler);
       const timeoutId = setTimeout(() => {
         if (!resolved) {
           resolved = true;
@@ -351,6 +354,7 @@ var GuardManager = class {
           reject(new Error("Guard timeout"));
         }
       }, this.timeout);
+      signal2.addEventListener("abort", abortHandler);
       try {
         guard(to, from, next);
       } catch (error) {
@@ -361,12 +365,6 @@ var GuardManager = class {
           reject(error instanceof Error ? error : new Error(String(error)));
         }
       }
-      Promise.resolve().then(() => {
-        if (resolved) {
-          clearTimeout(timeoutId);
-          signal2.removeEventListener("abort", abortHandler);
-        }
-      });
     });
   }
   addBeforeEach(guard) {

package/dist/ssr.cjs

@@ -658,12 +658,21 @@ function queueSignalNotification(signal2) {
     }
   }
 }
+var MAX_DRAIN_ITERATIONS = 1e3;
 function drainNotificationQueue() {
   if (notifyDepth > 0) return;
   notifyDepth++;
   try {
     let i2 = 0;
     while (i2 < pendingQueue.length) {
+      if (i2 >= MAX_DRAIN_ITERATIONS) {
+        if (typeof console !== "undefined") {
+          console.error(
+            `[SibuJS] Notification queue exceeded ${MAX_DRAIN_ITERATIONS} iterations \u2014 likely an effect that writes to a signal it reads. Breaking to prevent infinite loop.`
+          );
+        }
+        break;
+      }
       safeInvoke(pendingQueue[i2]);
       i2++;
     }

package/dist/ssr.d.cts

@@ -217,7 +217,7 @@ interface SharedScope<T extends Record<string, unknown>> {
  * const app = createMicroApp({ name: "widget", shadow: true });
  * document.body.appendChild(app.element);
  *
- * app.mount(() => div({ nodes: "Hello from micro-app!" }));
+ * app.mount(() => div("Hello from micro-app!"));
  *
  * // Later, tear it down:
  * app.unmount();

package/dist/ssr.d.ts

@@ -217,7 +217,7 @@ interface SharedScope<T extends Record<string, unknown>> {
  * const app = createMicroApp({ name: "widget", shadow: true });
  * document.body.appendChild(app.element);
  *
- * app.mount(() => div({ nodes: "Hello from micro-app!" }));
+ * app.mount(() => div("Hello from micro-app!"));
  *
  * // Later, tear it down:
  * app.unmount();

package/dist/ssr.js

@@ -22,7 +22,7 @@ import {
   wasm,
   worker,
   workerFn
-} from "./chunk-2BYQDGN3.js";
+} from "./chunk-MYRV7VDM.js";
 import {
   collectStream,
   deserializeState,
@@ -42,14 +42,14 @@ import {
   suspenseSwapScript,
   trustHTML
 } from "./chunk-3X2YG6YM.js";
-import "./chunk-32DY64NT.js";
-import "./chunk-F3FA4F32.js";
-import "./chunk-PTQJDMRT.js";
+import "./chunk-P3XWXJZU.js";
+import "./chunk-SFKNRVCU.js";
+import "./chunk-5ZYQ6KDD.js";
 import "./chunk-CMBFNA7L.js";
-import "./chunk-CHF5OHIA.js";
+import "./chunk-VQNQZCWJ.js";
 import "./chunk-EUZND3CB.js";
-import "./chunk-WZSPOOER.js";
-import "./chunk-ZD6OAMTH.js";
+import "./chunk-NZIIMDWI.js";
+import "./chunk-K4G4ZQNR.js";
 import "./chunk-5X6PP2UK.js";
 export {
   Head,

package/dist/testing.js

@@ -1,8 +1,8 @@
 import {
   effect
-} from "./chunk-CHF5OHIA.js";
+} from "./chunk-VQNQZCWJ.js";
 import "./chunk-EUZND3CB.js";
-import "./chunk-ZD6OAMTH.js";
+import "./chunk-K4G4ZQNR.js";
 import "./chunk-5X6PP2UK.js";
 
 // src/testing/a11y.ts

package/dist/ui.cjs

@@ -324,21 +324,37 @@ function derived(getter, options) {
     cs._v = getter();
   }, 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;
+        try {
+          cs._d = false;
+          cs._v = getter();
+        } finally {
+          evaluating = false;
+        }
       }
       return cs._v;
     }
     recordDependency(cs);
     if (cs._d) {
       const oldValue = cs._v;
-      track(() => {
-        cs._d = false;
-        cs._v = getter();
-      }, markDirty);
+      evaluating = true;
+      try {
+        track(() => {
+          cs._d = false;
+          cs._v = getter();
+        }, markDirty);
+      } finally {
+        evaluating = false;
+      }
       if (hook && oldValue !== cs._v) {
         hook.emit("computed:update", { signal: cs, oldValue, newValue: cs._v });
       }
@@ -477,7 +493,7 @@ function bindField(field, extras) {
     blur: () => field.touch()
   };
   const { on: extraOn, value: _ignoreValue, ...restExtras } = extras ?? {};
-  const mergedOn = extraOn && typeof extraOn === "object" ? { ...fieldOn, ...extraOn } : fieldOn;
+  const mergedOn = extraOn && typeof extraOn === "object" ? { ...extraOn, ...fieldOn } : fieldOn;
   return {
     value: field.value,
     on: mergedOn,
@@ -548,14 +564,23 @@ function form(config) {
     }
     return result;
   });
+  const [submitting, setSubmitting] = signal(false);
   function handleSubmit(onSubmit) {
     return (e) => {
       if (e) e.preventDefault();
+      if (submitting()) return;
       for (const field of Object.values(fieldMap)) {
         field.touch();
       }
       if (isValid()) {
-        onSubmit(values());
+        const result = onSubmit(values());
+        if (result && typeof result.then === "function") {
+          setSubmitting(true);
+          result.then(
+            () => setSubmitting(false),
+            () => setSubmitting(false)
+          );
+        }
       }
     };
   }
@@ -572,6 +597,7 @@ function form(config) {
     errors,
     isValid,
     isDirty,
+    submitting,
     touched: touchedState,
     values,
     handleSubmit,
@@ -615,6 +641,20 @@ function formAction(fn) {
   return { run, pending, error, result, reset, onSubmit };
 }
 
+// src/core/rendering/dispose.ts
+var elementDisposers = /* @__PURE__ */ new WeakMap();
+var _isDev4 = isDev();
+var activeBindingCount = 0;
+function registerDisposer(node, teardown) {
+  let disposers = elementDisposers.get(node);
+  if (!disposers) {
+    disposers = [];
+    elementDisposers.set(node, disposers);
+  }
+  disposers.push(teardown);
+  if (_isDev4) activeBindingCount++;
+}
+
 // src/core/ssr-context.ts
 var ssrMode = false;
 function isSSR() {
@@ -668,9 +708,9 @@ function VirtualList(props) {
   content.style.right = "0";
   spacer.appendChild(content);
   container.appendChild(spacer);
-  container.addEventListener("scroll", () => {
-    setScrollTop(container.scrollTop);
-  });
+  const onScroll = () => setScrollTop(container.scrollTop);
+  container.addEventListener("scroll", onScroll);
+  registerDisposer(container, () => container.removeEventListener("scroll", onScroll));
   const update = () => {
     const items = props.items();
     const totalHeight = items.length * props.itemHeight;
@@ -778,13 +818,52 @@ function inputMask(options) {
     }
     return raw;
   }
+  function isSlot(c) {
+    return c === "9" || c === "A" || c === "*";
+  }
+  function buildStripRegex() {
+    const hasDigit = options.pattern.includes("9");
+    const hasLetter = options.pattern.includes("A");
+    const hasAny = options.pattern.includes("*");
+    if (hasAny) {
+      const literals = /* @__PURE__ */ new Set();
+      for (const c of options.pattern) {
+        if (!isSlot(c)) literals.add(c.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+      }
+      return literals.size > 0 ? new RegExp(`[${Array.from(literals).join("")}]`, "g") : /(?!)/g;
+    }
+    if (hasDigit && hasLetter) return /[^a-zA-Z0-9]/g;
+    if (hasDigit) return /[^0-9]/g;
+    if (hasLetter) return /[^a-zA-Z]/g;
+    return /[^a-zA-Z0-9]/g;
+  }
+  const stripRegex = buildStripRegex();
+  const rawCharTest = options.pattern.includes("*") ? () => true : (c) => /[a-zA-Z0-9]/.test(c);
   function bind(input) {
     input.addEventListener("input", () => {
-      const raw = input.value.replace(/[^a-zA-Z0-9]/g, "");
+      const cursorBefore = input.selectionStart ?? input.value.length;
+      const oldValue = input.value;
+      const raw = oldValue.replace(stripRegex, "");
       const masked = applyMask(raw);
       setValue(masked);
       setRawValue(extractRaw(masked));
       input.value = masked;
+      let rawBefore = 0;
+      for (let i = 0; i < cursorBefore && i < oldValue.length; i++) {
+        if (rawCharTest(oldValue[i])) rawBefore++;
+      }
+      let newCursor = 0;
+      let counted = 0;
+      for (; newCursor < masked.length; newCursor++) {
+        if (newCursor < options.pattern.length && isSlot(options.pattern[newCursor])) {
+          counted++;
+          if (counted >= rawBefore) {
+            newCursor++;
+            break;
+          }
+        }
+      }
+      input.setSelectionRange(newCursor, newCursor);
     });
     input.addEventListener("focus", () => {
       if (!input.value) {
@@ -854,7 +933,10 @@ function FocusTrap(nodes, options = {}) {
     const focusable = container.querySelectorAll(
       'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
     );
-    if (focusable.length === 0) return;
+    if (focusable.length === 0) {
+      e.preventDefault();
+      return;
+    }
     const first = focusable[0];
     const last = focusable[focusable.length - 1];
     if (e.shiftKey) {
@@ -877,24 +959,27 @@ function FocusTrap(nodes, options = {}) {
       first?.focus();
     });
   }
+  let trapObserver = null;
+  function restoreFocusAndCleanup() {
+    if (options.restoreFocus !== false) previouslyFocused?.focus();
+    if (trapObserver) {
+      trapObserver.disconnect();
+      trapObserver = null;
+    }
+  }
   if (options.restoreFocus !== false) {
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        for (const removed of Array.from(mutation.removedNodes)) {
-          if (removed === container || removed.contains(container)) {
-            previouslyFocused?.focus();
-            observer.disconnect();
-            return;
-          }
-        }
+    trapObserver = new MutationObserver(() => {
+      if (!container.isConnected) {
+        restoreFocusAndCleanup();
       }
     });
     queueMicrotask(() => {
-      if (container.parentNode) {
-        observer.observe(container.parentNode, { childList: true });
+      if (container.isConnected) {
+        trapObserver.observe(document.body, { childList: true, subtree: true });
       }
     });
   }
+  registerDisposer(container, restoreFocusAndCleanup);
   return container;
 }
 function hotkey(combo, handler, options = {}) {
@@ -951,20 +1036,6 @@ function createId(prefix = "sibu") {
   return `${prefix}-${idCounter}`;
 }
 
-// src/core/rendering/dispose.ts
-var elementDisposers = /* @__PURE__ */ new WeakMap();
-var _isDev4 = isDev();
-var activeBindingCount = 0;
-function registerDisposer(node, teardown) {
-  let disposers = elementDisposers.get(node);
-  if (!disposers) {
-    disposers = [];
-    elementDisposers.set(node, disposers);
-  }
-  disposers.push(teardown);
-  if (_isDev4) activeBindingCount++;
-}
-
 // src/ui/a11yPrimitives.ts
 var DEFAULT_FOCUS_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
 function createFocusManager(container, options = {}) {
@@ -1177,6 +1248,10 @@ function scopedStyle(css) {
     if (trimmed.startsWith("@") || trimmed.startsWith("from") || trimmed.startsWith("to") || /^\d+%$/.test(trimmed)) {
       return match;
     }
+    const pseudoIdx = trimmed.indexOf("::");
+    if (pseudoIdx >= 0) {
+      return `${trimmed.slice(0, pseudoIdx)}[${attr}]${trimmed.slice(pseudoIdx)}${delimiter}`;
+    }
     return `${trimmed}[${attr}]${delimiter}`;
   });
   if (typeof document !== "undefined") {
@@ -1341,28 +1416,35 @@ function dialog() {
       close();
     }
   }
-  function open() {
-    setIsOpen(true);
+  function attachListener() {
     if (typeof window !== "undefined" && !listenerAttached) {
       window.addEventListener("keydown", handleKeydown);
       listenerAttached = true;
     }
   }
-  function close() {
-    setIsOpen(false);
+  function detachListener() {
     if (typeof window !== "undefined" && listenerAttached) {
       window.removeEventListener("keydown", handleKeydown);
       listenerAttached = false;
     }
   }
+  function open() {
+    setIsOpen(true);
+    attachListener();
+  }
+  function close() {
+    setIsOpen(false);
+    detachListener();
+  }
   function toggle() {
-    if (isOpen()) {
-      close();
-    } else {
-      open();
-    }
+    if (isOpen()) close();
+    else open();
+  }
+  function dispose() {
+    detachListener();
+    setIsOpen(false);
   }
-  return { open, close, isOpen, toggle };
+  return { open, close, isOpen, toggle, dispose };
 }
 
 // src/ui/toast.ts

package/dist/ui.d.cts

@@ -1,5 +1,5 @@
-export { B as BoundFieldProps, C as CustomElementOptions, F as FieldConfig, a as FocusTrap, b as FormConfig, c as FormField, d as FormReturn, I as IntersectionResult, M as MaskOptions, T as Toast, e as ToastInstance, V as ValidatorFn, f as VirtualList, g as VirtualListProps, h as announce, i as aria, j as bindAttrs, k as bindBoolAttr, l as bindData, m as bindField, n as creditCardMask, o as custom, p as dateMask, q as defineElement, r as dialog, s as email, t as eventBus, u as focus, v as form, w as hotkey, x as infiniteScroll, y as inputMask, z as intersection, A as lazyLoad, D as matchesPattern, E as max, G as maxLength, H as min, J as minLength, K as pagination, L as phoneMask, N as removeScopedStyle, O as required, P as scopedStyle, Q as ssnMask, R as svgElement, S as timeMask, U as toast, W as withScopedStyle, X as zipMask } from './customElement-D2DJp_xn.cjs';
-export { C as ComponentProps, P as PropDef, a as PropSchema, R as RenderProp, V as Validator, b as assertType, c as compose, d as createGuard, e as createSlots, f as defineComponent, g as defineSlottedComponent, h as defineStrictComponent, v as validateProps, i as validators, w as withBoundary, j as withDefaults, k as withProps, l as withWrapper } from './contracts-xo5ckdRP.cjs';
+export { B as BoundFieldProps, C as CustomElementOptions, F as FieldConfig, a as FocusTrap, b as FormConfig, c as FormField, d as FormReturn, I as IntersectionResult, M as MaskOptions, T as Toast, e as ToastInstance, V as ValidatorFn, f as VirtualList, g as VirtualListProps, h as announce, i as aria, j as bindAttrs, k as bindBoolAttr, l as bindData, m as bindField, n as creditCardMask, o as custom, p as dateMask, q as defineElement, r as dialog, s as email, t as eventBus, u as focus, v as form, w as hotkey, x as infiniteScroll, y as inputMask, z as intersection, A as lazyLoad, D as matchesPattern, E as max, G as maxLength, H as min, J as minLength, K as pagination, L as phoneMask, N as removeScopedStyle, O as required, P as scopedStyle, Q as ssnMask, R as svgElement, S as timeMask, U as toast, W as withScopedStyle, X as zipMask } from './customElement-BL3Uo8dL.cjs';
+export { C as ComponentProps, P as PropDef, a as PropSchema, R as RenderProp, V as Validator, b as assertType, c as compose, d as createGuard, e as createSlots, f as defineComponent, g as defineSlottedComponent, h as defineStrictComponent, v as validateProps, i as validators, w as withBoundary, j as withDefaults, k as withProps, l as withWrapper } from './contracts-ey_Qh8ef.cjs';
 
 interface FormActionHandle<TArgs extends unknown[], TResult> {
     /** Invoke the action. Rejections become `error()`, resolutions `result()`. */
@@ -30,14 +30,11 @@ interface FormActionHandle<TArgs extends unknown[], TResult> {
  *   return res.json();
  * });
  *
- * form({
- *   on: { submit: save.onSubmit },
- *   nodes: [
- *     input({ name: "title" }),
- *     button({ disabled: save.pending, nodes: () => (save.pending() ? "Saving..." : "Save") }),
- *     when(() => save.error() != null, () => div({ class: "error", nodes: () => String(save.error()) })),
- *   ],
- * });
+ * form({ on: { submit: save.onSubmit } }, [
+ *   input({ name: "title" }),
+ *   button({ disabled: save.pending }, () => (save.pending() ? "Saving..." : "Save")),
+ *   when(() => save.error() != null, () => div("error", () => String(save.error()))),
+ * ]);
  * ```
  */
 declare function formAction<TArgs extends unknown[], TResult>(fn: (...args: TArgs) => Promise<TResult>): FormActionHandle<TArgs, TResult>;
@@ -102,10 +99,10 @@ interface ListboxHandle {
  *
  * @example
  * ```ts
- * const container = ul({ nodes: [
- *   li({ role: "option", "data-value": "a", nodes: "Apple" }),
- *   li({ role: "option", "data-value": "b", nodes: "Banana" }),
- * ]}) as HTMLElement;
+ * const container = ul([
+ *   li({ role: "option", "data-value": "a" }, "Apple"),
+ *   li({ role: "option", "data-value": "b" }, "Banana"),
+ * ]) as HTMLElement;
  *
  * const lb = createListbox(container, { onSelect: v => console.log(v) });
  * ```
@@ -142,8 +139,8 @@ interface DialogAriaHandle {
  * const dlg = document.createElement("div");
  * const aria = createDialogAria(dlg, { alert: false });
  * dlg.append(
- *   h2({ id: aria.titleId, nodes: "Delete?" }),
- *   p({ id: aria.descriptionId, nodes: "This cannot be undone." }),
+ *   h2({ id: aria.titleId }, "Delete?"),
+ *   p({ id: aria.descriptionId }, "This cannot be undone."),
  * );
  * ```
  */