@rhi-zone/rainbow-ui 0.2.0-alpha.3 → 0.2.0-alpha.5

package/dist/index.js

@@ -1,34 +1,34 @@
-import { h as g } from "./html-C8SnQjvU.js";
-import { above as l, beside as p, bindAttr as f, bindCheckbox as x, bindClass as S, bindInput as w, bindSelect as W, bindShow as v, bindText as y, checkboxWidget as k, concat as C, dynamic as E, each as F, eachKeyed as A, focus as I, foldWidget as K, inputWidget as L, map as N, match as B, mount as D, narrow as J, numberInputWidget as T, on as V, register as j, selectWidget as q, show as z, stack as G, subscribe as H, subscribeNow as M, template as O, textareaWidget as P, watchAll as Q, withScope as R } from "./widget.js";
-import { createForm as X, createFormState as Y, isDirty as Z, isFormValid as _, shouldShowError as $ } from "./form-state.js";
+import { h as l } from "./html-C8SnQjvU.js";
+import { above as g, beside as p, bindAttr as f, bindCheckbox as x, bindClass as S, bindInput as w, bindSelect as W, bindShow as v, bindText as y, checkboxWidget as k, concat as C, dynamic as E, each as F, eachKeyed as A, focus as I, foldWidget as K, h as L, inputWidget as N, lift as B, map as D, match as J, mount as T, narrow as V, numberInputWidget as j, on as q, prop as z, register as G, selectWidget as H, show as M, slot as O, stack as P, subscribe as Q, subscribeNow as R, template as U, textareaWidget as X, watchAll as Y, withScope as Z } from "./widget.js";
+import { createForm as $, createFormState as ee, isDirty as te, isFormValid as ne, shouldShowError as oe } from "./form-state.js";
 import { signal as a } from "@rhi-zone/rainbow";
-import { attrBoolean as te, attrJson as ne, attrNumber as ie, attrString as oe, attrsFrom as re, defineElement as se } from "./elements.js";
-function d(e, n, t, r, i) {
-  const o = e(
+import { attrBoolean as re, attrJson as se, attrNumber as ae, attrString as ce, attrsFrom as de, defineElement as be } from "./elements.js";
+function d(e, n, t, r, o) {
+  const i = e(
     n,
     () => r(t.get()),
-    i
+    o
   ), s = t.subscribe(() => {
   });
   return () => {
-    s(), o();
+    s(), i();
   };
 }
 function b(e) {
   const n = a(e.get());
-  function t(i) {
-    const o = i;
-    n.set(o.detail.bindings);
+  function t(o) {
+    const i = o;
+    n.set(i.detail.bindings);
   }
   return e.addEventListener("change", t), [n, () => e.removeEventListener("change", t)];
 }
 export {
-  l as above,
-  te as attrBoolean,
-  ne as attrJson,
-  ie as attrNumber,
-  oe as attrString,
-  re as attrsFrom,
+  g as above,
+  re as attrBoolean,
+  se as attrJson,
+  ae as attrNumber,
+  ce as attrString,
+  de as attrsFrom,
   p as beside,
   f as bindAttr,
   x as bindCheckbox,
@@ -40,34 +40,38 @@ export {
   b as bindingsStoreSignal,
   k as checkboxWidget,
   C as concat,
-  X as createForm,
-  Y as createFormState,
-  se as defineElement,
+  $ as createForm,
+  ee as createFormState,
+  be as defineElement,
   E as dynamic,
   F as each,
   A as eachKeyed,
   I as focus,
   K as foldWidget,
-  g as html,
-  L as inputWidget,
-  Z as isDirty,
-  _ as isFormValid,
+  L as h,
+  l as html,
+  N as inputWidget,
+  te as isDirty,
+  ne as isFormValid,
   d as keybindsContext,
-  N as map,
-  B as match,
-  D as mount,
-  J as narrow,
-  T as numberInputWidget,
-  V as on,
-  j as register,
-  q as selectWidget,
-  $ as shouldShowError,
-  z as show,
-  G as stack,
-  H as subscribe,
-  M as subscribeNow,
-  O as template,
-  P as textareaWidget,
-  Q as watchAll,
-  R as withScope
+  B as lift,
+  D as map,
+  J as match,
+  T as mount,
+  V as narrow,
+  j as numberInputWidget,
+  q as on,
+  z as prop,
+  G as register,
+  H as selectWidget,
+  oe as shouldShowError,
+  M as show,
+  O as slot,
+  P as stack,
+  Q as subscribe,
+  R as subscribeNow,
+  U as template,
+  X as textareaWidget,
+  Y as watchAll,
+  Z as withScope
 };

package/dist/widget.d.ts

@@ -31,7 +31,7 @@
  *   false and rebuild them when it becomes true again.
  */
 import { type Signal, type ReadonlySignal, type Lens, type Prism, type AsyncData } from "@rhi-zone/rainbow";
-import type { AnyEl, El, FlowContent, DivEl, InputEl, InputAttrs, TextareaEl, TextareaAttrs, SelectEl, SelectAttrs } from "./html.js";
+import type { AnyEl, El, FlowContent, DivEl, InputEl, InputAttrs, TextareaEl, TextareaAttrs, SelectEl, SelectAttrs, GlobalAttrs } from "./html.js";
 /**
  * A widget is a pure function from a reactive signal to a typed DOM node.
  * Calling a widget subscribes it to the signal; the returned node is updated
@@ -91,6 +91,16 @@ export declare function mount<T, E extends AnyEl>(widget: Widget<T, E>, signal:
  * focus(opPicker, field('op'))
  */
 export declare function focus<A, B, E extends AnyEl>(w: Widget<B, E>, l: Lens<A, B>): Widget<A, E>;
+/**
+ * Sugar for `focus(w, field(key))`. Zoom into a named property of the signal.
+ * The most common use of `focus` — use this instead when the lens is a simple
+ * field access.
+ *
+ * @example
+ * prop(each(rowWidget), 'items')  // Widget<{ items: Row[] }>
+ * prop(nameWidget, 'name')        // Widget<{ name: string }>
+ */
+export declare function prop<T, K extends keyof T & string, E extends AnyEl>(w: Widget<T[K], E>, key: K): Widget<T, E>;
 /**
  * Zoom into a sum variant. The child widget renders when the prism matches;
  * renders an empty container when it doesn't. Container switches on match
@@ -199,14 +209,21 @@ export type RefsMap<R extends Record<string, keyof HTMLElementTagNameMap>> = {
     readonly [K in keyof R]: El<R[K] & string, HTMLElementTagNameMap[R[K]]>;
 };
 /**
- * Template combinator. Parses `innerHTML` once (at definition time), then for
- * each widget instantiation clones the template, queries out typed DOM refs via
- * `data-ref` attributes, and calls `bind` with the signal and those refs.
+ * **Performance escape hatch.** Prefer the reactive hyperscript factories
+ * (`h.div`, `h.span`, …) for normal widget authoring — they are type-safe,
+ * compose naturally with slots and combinators, and avoid the `data-ref`
+ * indirection.
+ *
+ * Use `template` only when instantiation count is high and the clone-vs-create
+ * difference is measurable: it parses `innerHTML` once at definition time and
+ * calls `cloneNode(true)` on each instantiation, which is faster than N
+ * `createElement` calls for large identical subtrees (e.g. a `eachKeyed` row
+ * with many static nodes).
  *
  * Refs are queried as `tagName[data-ref="refName"]`, so `{ name: "span" }`
  * expects `<span data-ref="name">` in the template. Using `data-ref` rather
- * than `id` means the same template can be cloned many times (e.g. inside
- * `eachKeyed`) without duplicate-ID issues.
+ * than `id` means the same template can be cloned many times without
+ * duplicate-ID issues.
  *
  * `bind` is called inside the widget call context, so any `subscribe` calls
  * inside it are tracked and cleaned up by `mount` / parent combinators.
@@ -214,12 +231,11 @@ export type RefsMap<R extends Record<string, keyof HTMLElementTagNameMap>> = {
  * @throws if a declared ref is absent from the cloned template.
  *
  * @example
- * const cardWidget = template(
- *   `<div class="card"><span data-ref="name"></span><b data-ref="score"></b></div>`,
- *   { name: "span", score: "b" } as const,
+ * // High-volume row widget — justified use of template()
+ * const rowWidget = template(
+ *   `<tr><td data-ref="name"></td><td data-ref="score"></td></tr>`,
+ *   { name: "td", score: "td" } as const,
  *   (s, { name, score }) => {
- *     name.node.textContent = s.get().label
- *     score.node.textContent = String(s.get().value)
  *     subscribe(s, v => {
  *       name.node.textContent = v.label
  *       score.node.textContent = String(v.value)
@@ -441,4 +457,78 @@ export declare function selectWidget(options: {
     value: string;
     label: string;
 }[], attrs?: SelectAttrs): Widget<string, SelectEl>;
+/**
+ * A reactive child: either a plain string or a widget that accepts the same
+ * signal type `T` and returns any element.
+ *
+ * `AnyEl` is intentionally excluded. Passing a pre-built element directly would
+ * require `cloneNode(true)` on each widget invocation, silently dropping event
+ * listeners. Use `lift(el)` to wrap a freshly-built element instead.
+ */
+export type RChild<T> = string | Widget<T, AnyEl>;
+/**
+ * Lift a static element into the widget context. Use this to pass a
+ * pre-built `AnyEl` as a child to an `h.*` reactive factory:
+ *
+ *   h.div({}, lift(iconEl), reactiveChild)
+ *
+ * The element is inserted as-is — no cloning — so event listeners are
+ * preserved. Only use `lift` when the element is freshly built at widget
+ * call time (i.e. inside the widget function body). Do NOT lift a module-
+ * level static element — it can only have one parent at a time.
+ */
+export declare function lift<T, E extends AnyEl>(el: E): Widget<T, E>;
+/**
+ * Reactive hyperscript factories — the same element tags as `html.ts` but
+ * returning `Widget<T, El>` instead of `El`. Import as:
+ *
+ *   import { h } from '@rhi-zone/rainbow-ui/widget'
+ *
+ * Widget children receive the same signal as their parent. String children
+ * create fresh text nodes. To pass a pre-built element, wrap it with `lift(el)`
+ * so it is inserted directly without cloning — preserving event listeners.
+ */
+export declare const h: {
+    readonly div: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"div", HTMLDivElement>;
+    readonly section: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"section", HTMLElement>;
+    readonly article: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"article", HTMLElement>;
+    readonly header: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"header", HTMLElement>;
+    readonly footer: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"footer", HTMLElement>;
+    readonly main: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"main", HTMLElement>;
+    readonly nav: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"nav", HTMLElement>;
+    readonly h1: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"h1", HTMLHeadingElement>;
+    readonly h2: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"h2", HTMLHeadingElement>;
+    readonly h3: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"h3", HTMLHeadingElement>;
+    readonly h4: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"h4", HTMLHeadingElement>;
+    readonly h5: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"h5", HTMLHeadingElement>;
+    readonly h6: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"h6", HTMLHeadingElement>;
+    readonly p: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"p", HTMLParagraphElement>;
+    readonly span: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"span", HTMLSpanElement>;
+    readonly a: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"a", HTMLAnchorElement>;
+    readonly em: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"em", HTMLElement>;
+    readonly strong: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"strong", HTMLElement>;
+    readonly code: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"code", HTMLElement>;
+    readonly pre: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"pre", HTMLPreElement>;
+    readonly ul: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"ul", HTMLUListElement>;
+    readonly ol: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"ol", HTMLOListElement>;
+    readonly li: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"li", HTMLLIElement>;
+    readonly button: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"button", HTMLButtonElement>;
+    readonly label: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"label", HTMLLabelElement>;
+    readonly form: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"form", HTMLFormElement>;
+    readonly fieldset: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"fieldset", HTMLFieldSetElement>;
+};
+/** A widget that takes no meaningful signal and renders flow content. */
+export type Slot = Widget<void, FlowContent>;
+/** A widget that takes a typed signal `T` and renders flow content. */
+export type ScopedSlot<T> = Widget<T, FlowContent>;
+/**
+ * Mount a slot widget by replacing a placeholder element.
+ * If no slot is provided, removes the placeholder.
+ * The slot signal defaults to `s` (cast) if `slotSignal` is omitted.
+ *
+ * @example
+ * slot(placeholder, s, v => v.actionsSlot)               // slot signal = s
+ * slot(placeholder, s, v => v.rowSlot, s.focus(rowLens)) // slot signal = focused
+ */
+export declare function slot<Props, T>(placeholder: HTMLElement, s: Signal<Props>, extract: (props: Props) => Widget<T, FlowContent> | undefined, slotSignal?: Signal<T>): void;
 export {};

package/dist/widget.js

@@ -1,144 +1,147 @@
-import { index as C, stateful as S, lens as L, tagged as W, signal as B } from "@rhi-zone/rainbow";
-import { i as N, s as $, o as F, t as I } from "./html-C8SnQjvU.js";
+import { index as E, stateful as L, field as W, lens as B, tagged as $, signal as j } from "@rhi-zone/rainbow";
+import { i as _, s as F, o as I, t as O } from "./html-C8SnQjvU.js";
 let k = null;
-function i(e) {
+function l(e) {
   k == null || k.push(e);
 }
-function h(e) {
-  const n = k, o = [];
+function m(e) {
+  const t = k, o = [];
   k = o;
-  const t = e();
-  return k = n, [t, () => {
+  const n = e();
+  return k = t, [n, () => {
     for (const c of o) c();
   }];
 }
-function M(e) {
-  return h(e);
+function V(e) {
+  return m(e);
 }
-function v(e, n) {
-  i(e.subscribe(n));
+function w(e, t) {
+  l(e.subscribe(t));
 }
-function O(e) {
-  i(e);
+function H(e) {
+  l(e);
 }
-function T(e, n, o) {
-  const [t, c] = h(() => e(n));
-  return o.appendChild(t.node), () => {
-    t.node.remove(), c();
+function R(e, t, o) {
+  const [n, c] = m(() => e(t));
+  return o.appendChild(n.node), () => {
+    n.node.remove(), c();
   };
 }
-function V(e, n) {
-  return (o) => e(o.focus(n));
+function P(e, t) {
+  return (o) => e(o.focus(t));
+}
+function U(e, t) {
+  return P(e, W(t));
 }
-function H(e, n) {
+function z(e, t) {
   return (o) => {
-    const t = document.createElement("div");
-    t.dataset.narrow = "";
+    const n = document.createElement("div");
+    n.dataset.narrow = "";
     let c = null, r = null;
     const u = o, d = () => {
-      r = u.narrow(n);
-      const [a, l] = h(() => e(r));
-      c = l, t.appendChild(a.node);
+      r = u.narrow(t);
+      const [a, f] = m(() => e(r));
+      c = f, n.appendChild(a.node);
     };
-    return v(o, (a) => {
-      const l = n.view(a);
-      l !== void 0 && c === null ? d() : l === void 0 && c !== null && (c(), c = null, r = null, t.replaceChildren());
-    }), n.view(o.get()) !== void 0 && d(), i(() => c == null ? void 0 : c()), { _tag: "div", node: t };
+    return w(o, (a) => {
+      const f = t.view(a);
+      f !== void 0 && c === null ? d() : f === void 0 && c !== null && (c(), c = null, r = null, n.replaceChildren());
+    }), t.view(o.get()) !== void 0 && d(), l(() => c == null ? void 0 : c()), { _tag: "div", node: n };
   };
 }
-function R(e) {
-  return (n) => {
-    const o = n, t = document.createElement("div");
-    t.dataset.each = "";
+function D(e) {
+  return (t) => {
+    const o = t, n = document.createElement("div");
+    n.dataset.each = "";
     let c = [];
     const r = (d) => {
       for (const s of c) s();
-      c = [], t.replaceChildren();
+      c = [], n.replaceChildren();
       for (let s = 0; s < d.length; s++) {
-        const a = s, l = L(
-          (f) => f[a],
-          (f, p) => {
-            const b = [...p];
-            return b[a] = f, b;
+        const a = s, f = B(
+          (p) => p[a],
+          (p, h) => {
+            const g = [...h];
+            return g[a] = p, g;
           }
-        ), g = o.focus(l), [m, w] = h(() => e(g));
-        c.push(w), t.appendChild(m.node);
+        ), b = o.focus(f), [v, C] = m(() => e(b));
+        c.push(C), n.appendChild(v.node);
       }
     };
-    r(n.get());
-    const u = n.map((d) => d.length);
-    return v(u, () => r(n.get())), i(() => {
+    r(t.get());
+    const u = t.map((d) => d.length);
+    return w(u, () => r(t.get())), l(() => {
       for (const d of c) d();
-    }), { _tag: "div", node: t };
+    }), { _tag: "div", node: n };
   };
 }
-function U(e, n) {
+function G(e, t) {
   return (o) => {
-    const t = o, c = document.createElement("div");
+    const n = o, c = document.createElement("div");
     c.dataset.beside = "";
-    const r = t.focus(C(0)), u = t.focus(C(1)), [d, s] = h(() => e(r)), [a, l] = h(() => n(u));
-    return c.appendChild(d.node), c.appendChild(a.node), i(s), i(l), { _tag: "div", node: c };
+    const r = n.focus(E(0)), u = n.focus(E(1)), [d, s] = m(() => e(r)), [a, f] = m(() => t(u));
+    return c.appendChild(d.node), c.appendChild(a.node), l(s), l(f), { _tag: "div", node: c };
   };
 }
-function z(e, n) {
+function J(e, t) {
   return (o) => {
-    const t = o, c = document.createElement("div");
+    const n = o, c = document.createElement("div");
     c.dataset.above = "";
-    const r = t.focus(C(0)), u = t.focus(C(1)), [d, s] = h(() => e(r)), [a, l] = h(() => n(u));
-    return c.appendChild(d.node), c.appendChild(a.node), i(s), i(l), { _tag: "div", node: c };
+    const r = n.focus(E(0)), u = n.focus(E(1)), [d, s] = m(() => e(r)), [a, f] = m(() => t(u));
+    return c.appendChild(d.node), c.appendChild(a.node), l(s), l(f), { _tag: "div", node: c };
   };
 }
-function D(e, n) {
+function Q(e, t) {
   return (o) => {
-    const t = S(e, o);
-    return n(t);
+    const n = L(e, o);
+    return t(n);
   };
 }
-function G(e, n) {
+function X(e, t) {
   return (o) => {
-    const t = o.narrow(n);
-    return e(t);
+    const n = o.narrow(t);
+    return e(n);
   };
 }
-function J(e, n) {
+function Y(e, t) {
   return (o) => {
-    const t = document.createElement("div");
-    t.dataset.show = "";
-    const [c, r] = h(() => e(o));
-    t.appendChild(c.node), i(r);
+    const n = document.createElement("div");
+    n.dataset.show = "";
+    const [c, r] = m(() => e(o));
+    n.appendChild(c.node), l(r);
     const u = (d) => {
-      t.style.display = n(d) ? "" : "none";
+      n.style.display = t(d) ? "" : "none";
     };
-    return u(o.get()), v(o, u), { _tag: "div", node: t };
+    return u(o.get()), w(o, u), { _tag: "div", node: n };
   };
 }
-function Q(e, n) {
+function Z(e, t) {
   return (o) => {
-    const t = document.createElement("div");
-    t.dataset.concat = "";
-    const [c, r] = h(() => e(o)), [u, d] = h(() => n(o));
-    return t.appendChild(c.node), t.appendChild(u.node), i(r), i(d), { _tag: "div", node: t };
+    const n = document.createElement("div");
+    n.dataset.concat = "";
+    const [c, r] = m(() => e(o)), [u, d] = m(() => t(o));
+    return n.appendChild(c.node), n.appendChild(u.node), l(r), l(d), { _tag: "div", node: n };
   };
 }
-function X(...e) {
-  return (n) => {
+function ee(...e) {
+  return (t) => {
     const o = document.createElement("div");
     o.dataset.stack = "";
-    for (const t of e) {
-      const [c, r] = h(() => t(n));
-      o.appendChild(c.node), i(r);
+    for (const n of e) {
+      const [c, r] = m(() => n(t));
+      o.appendChild(c.node), l(r);
     }
     return { _tag: "div", node: o };
   };
 }
-function Y(e, n, o) {
-  const t = document.createElement("template");
-  return t.innerHTML = e, (c) => {
+function te(e, t, o) {
+  const n = document.createElement("template");
+  return n.innerHTML = e, (c) => {
     const r = document.createElement("div");
-    r.dataset.templ = "", r.appendChild(t.content.cloneNode(!0));
+    r.dataset.templ = "", r.appendChild(n.content.cloneNode(!0));
     const u = {};
-    for (const d of Object.keys(n)) {
-      const s = n[d], a = r.querySelector(`${s}[data-ref="${d}"]`);
+    for (const d of Object.keys(t)) {
+      const s = t[d], a = r.querySelector(`${s}[data-ref="${d}"]`);
       if (a === null)
         throw new Error(
           `templ: ref "${d}" not found — expected <${s} data-ref="${d}"> in template`
@@ -148,221 +151,281 @@ function Y(e, n, o) {
     return o(c, u), { _tag: "div", node: r };
   };
 }
-function Z(e, n, o, t) {
-  const c = (t == null ? void 0 : t.container) ?? "div", r = document.createElement(c);
+function ne(e, t, o, n) {
+  const c = (n == null ? void 0 : n.container) ?? "div", r = document.createElement(c);
   r.dataset.eachKeyed = "";
-  const u = /* @__PURE__ */ new Map(), d = (a, l) => {
-    const g = B(l);
-    let m = !1, w = () => {
+  const u = /* @__PURE__ */ new Map(), d = (a, f) => {
+    const b = j(f);
+    let v = !1, C = () => {
     };
-    "set" in e && (w = g.subscribe((b) => {
-      if (m) return;
-      const E = e.get(), x = E.findIndex((y) => n(y) === a);
-      if (x !== -1 && !Object.is(E[x], b)) {
-        const y = [...E];
-        y[x] = b, e.set(y);
+    "set" in e && (C = b.subscribe((g) => {
+      if (v) return;
+      const x = e.get(), N = x.findIndex((y) => t(y) === a);
+      if (N !== -1 && !Object.is(x[N], g)) {
+        const y = [...x];
+        y[N] = g, e.set(y);
       }
     }));
-    const [f, p] = h(() => o(g));
+    const [p, h] = m(() => o(b));
     return {
-      itemSignal: g,
-      childNode: f.node,
+      itemSignal: b,
+      childNode: p.node,
       cleanup: () => {
-        p(), w();
+        h(), C();
       },
-      setFromParent: (b) => {
-        m = !0, g.set(b), m = !1;
+      setFromParent: (g) => {
+        v = !0, b.set(g), v = !1;
       }
     };
   }, s = (a) => {
-    var w;
-    const l = a.map(n), g = new Set(l);
-    for (const [f, p] of u)
-      g.has(f) || (p.cleanup(), (w = p.childNode.parentNode) == null || w.removeChild(p.childNode), u.delete(f));
-    for (let f = 0; f < a.length; f++) {
-      const p = l[f], b = a[f];
-      u.has(p) ? u.get(p).setFromParent(b) : u.set(p, d(p, b));
+    var C;
+    const f = a.map(t), b = new Set(f);
+    for (const [p, h] of u)
+      b.has(p) || (h.cleanup(), (C = h.childNode.parentNode) == null || C.removeChild(h.childNode), u.delete(p));
+    for (let p = 0; p < a.length; p++) {
+      const h = f[p], g = a[p];
+      u.has(h) ? u.get(h).setFromParent(g) : u.set(h, d(h, g));
     }
-    let m = null;
-    for (let f = a.length - 1; f >= 0; f--) {
-      const p = u.get(l[f]);
-      (p.childNode.parentNode !== r || p.childNode.nextSibling !== m) && r.insertBefore(p.childNode, m), m = p.childNode;
+    let v = null;
+    for (let p = a.length - 1; p >= 0; p--) {
+      const h = u.get(f[p]);
+      (h.childNode.parentNode !== r || h.childNode.nextSibling !== v) && r.insertBefore(h.childNode, v), v = h.childNode;
     }
   };
-  return s(e.get()), v(e, s), i(() => {
+  return s(e.get()), w(e, s), l(() => {
     for (const a of u.values()) a.cleanup();
   }), { _tag: c, node: r };
 }
-function _(e, n, o) {
-  const t = o;
-  e.addEventListener(n, t), i(() => e.removeEventListener(n, t));
+function A(e, t, o) {
+  const n = o;
+  e.addEventListener(t, n), l(() => e.removeEventListener(t, n));
 }
-function A(e, n) {
-  e.value = n.get();
-  const o = () => n.set(e.value);
+function S(e, t) {
+  e.value = t.get();
+  const o = () => t.set(e.value);
   e.addEventListener("input", o);
-  const t = n.subscribe((r) => {
+  const n = t.subscribe((r) => {
     e.value !== r && (e.value = r);
   }), c = () => {
-    e.removeEventListener("input", o), t();
+    e.removeEventListener("input", o), n();
   };
-  return i(c), c;
+  return l(c), c;
 }
-function P(e, n) {
-  _(e, "change", () => n.set(e.value)), v(n, (o) => {
+function T(e, t) {
+  A(e, "change", () => t.set(e.value)), w(t, (o) => {
     e.value !== o && (e.value = o);
   });
 }
-function j(e, n) {
-  _(e, "change", () => n.set(e.checked)), v(n, (o) => {
+function q(e, t) {
+  A(e, "change", () => t.set(e.checked)), w(t, (o) => {
     e.checked !== o && (e.checked = o);
   });
 }
-function ee(e, n) {
-  n(e.get()), i(e.subscribe(n));
+function oe(e, t) {
+  t(e.get()), l(e.subscribe(t));
 }
-function te(e, n) {
-  e.textContent = n.get(), i(n.subscribe((o) => {
+function ce(e, t) {
+  e.textContent = t.get(), l(t.subscribe((o) => {
     e.textContent = o;
   }));
 }
-function ne(e, n, o) {
-  e.setAttribute(n, o.get()), i(o.subscribe((t) => {
-    e.setAttribute(n, t);
+function re(e, t, o) {
+  e.setAttribute(t, o.get()), l(o.subscribe((n) => {
+    e.setAttribute(t, n);
   }));
 }
-function oe(e, n, o) {
-  e.classList.toggle(n, o.get()), i(o.subscribe((t) => {
-    e.classList.toggle(n, t);
+function ue(e, t, o) {
+  e.classList.toggle(t, o.get()), l(o.subscribe((n) => {
+    e.classList.toggle(t, n);
   }));
 }
-function ce(e, n) {
-  n();
-  const o = e.map((t) => t.subscribe(n));
+function de(e, t) {
+  t();
+  const o = e.map((n) => n.subscribe(t));
   return () => {
-    for (const t of o) t();
+    for (const n of o) n();
   };
 }
-function re(e, n) {
-  return e.style.display = n.get() ? "" : "none", n.subscribe((o) => {
+function ie(e, t) {
+  return e.style.display = t.get() ? "" : "none", t.subscribe((o) => {
     e.style.display = o ? "" : "none";
   });
 }
-function ue(e, n) {
+function ae(e, t) {
   return (o) => {
-    const t = document.createElement("div");
-    t.dataset.match = "";
+    const n = document.createElement("div");
+    n.dataset.match = "";
     let c = null, r = null;
     const u = (d) => {
       const s = d[e];
       if (s === r) return;
-      c == null || c(), c = null, t.replaceChildren(), r = s;
-      const a = n[s];
+      c == null || c(), c = null, n.replaceChildren(), r = s;
+      const a = t[s];
       if (a == null) return;
-      const l = o.narrow(W(e, s));
-      let g;
-      [g, c] = h(
-        () => a(l)
-      ), t.appendChild(g.node);
+      const f = o.narrow($(e, s));
+      let b;
+      [b, c] = m(
+        () => a(f)
+      ), n.appendChild(b.node);
     };
-    return v(o, u), u(o.get()), i(() => c == null ? void 0 : c()), { _tag: "div", node: t };
+    return w(o, u), u(o.get()), l(() => c == null ? void 0 : c()), { _tag: "div", node: n };
   };
 }
-function de(e, n) {
+function se(e, t) {
   const o = document.createElement("div");
   o.dataset.foldWidget = "";
-  let t = null;
+  let n = null;
   const c = (r) => {
-    t !== null && (t(), t = null), o.replaceChildren();
+    n !== null && (n(), n = null), o.replaceChildren();
     let u = null;
     switch (r.status) {
       case "notAsked":
-        u = n.notAsked ?? null;
+        u = t.notAsked ?? null;
         break;
       case "loading":
-        u = n.loading ?? null;
+        u = t.loading ?? null;
         break;
       case "failure":
-        u = n.failure ? () => n.failure(r.error) : null;
+        u = t.failure ? () => t.failure(r.error) : null;
         break;
       case "success":
-        u = n.success ? () => n.success(r.value) : null;
+        u = t.success ? () => t.success(r.value) : null;
         break;
     }
     if (u !== null) {
       let d;
-      [d, t] = h(u), o.appendChild(d.node);
+      [d, n] = m(u), o.appendChild(d.node);
     }
   };
-  return c(e.get()), i(e.subscribe(c)), i(() => t == null ? void 0 : t()), { _tag: "div", node: o };
+  return c(e.get()), l(e.subscribe(c)), l(() => n == null ? void 0 : n()), { _tag: "div", node: o };
 }
-function ae(e) {
-  return (n) => {
-    const o = n, t = N(e ?? {});
-    return t.node.value = o.get(), A(t.node, o), t;
+function le(e) {
+  return (t) => {
+    const o = t, n = _(e ?? {});
+    return n.node.value = o.get(), S(n.node, o), n;
   };
 }
-function se(e) {
-  return (n) => {
-    const o = n, t = I(e ?? {});
-    return t.node.value = o.get(), A(t.node, o), t;
+function fe(e) {
+  return (t) => {
+    const o = t, n = O(e ?? {});
+    return n.node.value = o.get(), S(n.node, o), n;
   };
 }
-function ie(e) {
-  return (n) => {
-    const o = n, t = N({ ...e, type: "checkbox" });
-    return t.node.checked = o.get(), j(t.node, o), t;
+function pe(e) {
+  return (t) => {
+    const o = t, n = _({ ...e, type: "checkbox" });
+    return n.node.checked = o.get(), q(n.node, o), n;
   };
 }
-function le(e) {
-  return (n) => {
-    const o = n, t = N({ ...e, type: "number" });
-    return t.node.value = String(o.get()), _(t.node, "input", () => {
-      const c = t.node.valueAsNumber;
+function he(e) {
+  return (t) => {
+    const o = t, n = _({ ...e, type: "number" });
+    return n.node.value = String(o.get()), A(n.node, "input", () => {
+      const c = n.node.valueAsNumber;
       isNaN(c) || o.set(c);
-    }), v(n, (c) => {
-      t.node.valueAsNumber !== c && (t.node.value = String(c));
-    }), t;
+    }), w(t, (c) => {
+      n.node.valueAsNumber !== c && (n.node.value = String(c));
+    }), n;
   };
 }
-function fe(e, n) {
+function me(e, t) {
   return (o) => {
-    const t = o, c = $(n ?? {}, ...e.map((r) => F({ value: r.value }, r.label)));
-    return c.node.value = t.get(), P(c.node, t), c;
+    const n = o, c = F(t ?? {}, ...e.map((r) => I({ value: r.value }, r.label)));
+    return c.node.value = n.get(), T(c.node, n), c;
+  };
+}
+function be(e) {
+  return (t) => e;
+}
+function i(e) {
+  return (t, ...o) => (n) => {
+    const c = document.createElement(e);
+    for (const [r, u] of Object.entries(t))
+      u == null || u === !1 || c.setAttribute(r, u === !0 ? "" : String(u));
+    for (const r of o)
+      typeof r == "function" ? c.appendChild(r(n).node) : c.appendChild(document.createTextNode(r));
+    return { _tag: e, node: c };
   };
 }
+const ge = {
+  // Sectioning / flow
+  div: i("div"),
+  section: i("section"),
+  article: i("article"),
+  header: i("header"),
+  footer: i("footer"),
+  main: i("main"),
+  nav: i("nav"),
+  // Headings
+  h1: i("h1"),
+  h2: i("h2"),
+  h3: i("h3"),
+  h4: i("h4"),
+  h5: i("h5"),
+  h6: i("h6"),
+  // Phrasing
+  p: i("p"),
+  span: i("span"),
+  a: i("a"),
+  em: i("em"),
+  strong: i("strong"),
+  code: i("code"),
+  pre: i("pre"),
+  // Lists
+  ul: i("ul"),
+  ol: i("ol"),
+  li: i("li"),
+  // Forms
+  button: i("button"),
+  label: i("label"),
+  form: i("form"),
+  fieldset: i("fieldset")
+};
+function ve(e, t, o, n) {
+  const c = o(t.get());
+  if (c === void 0) {
+    e.remove();
+    return;
+  }
+  const r = c(n ?? t);
+  e.replaceWith(r.node);
+}
 export {
-  z as above,
-  U as beside,
-  ne as bindAttr,
-  j as bindCheckbox,
-  oe as bindClass,
-  A as bindInput,
-  P as bindSelect,
-  re as bindShow,
-  te as bindText,
-  ie as checkboxWidget,
-  Q as concat,
-  D as dynamic,
-  R as each,
-  Z as eachKeyed,
-  V as focus,
-  de as foldWidget,
-  ae as inputWidget,
-  G as map,
-  ue as match,
-  T as mount,
-  H as narrow,
-  le as numberInputWidget,
-  _ as on,
-  O as register,
-  fe as selectWidget,
-  J as show,
-  X as stack,
-  v as subscribe,
-  ee as subscribeNow,
-  Y as template,
-  se as textareaWidget,
-  ce as watchAll,
-  M as withScope
+  J as above,
+  G as beside,
+  re as bindAttr,
+  q as bindCheckbox,
+  ue as bindClass,
+  S as bindInput,
+  T as bindSelect,
+  ie as bindShow,
+  ce as bindText,
+  pe as checkboxWidget,
+  Z as concat,
+  Q as dynamic,
+  D as each,
+  ne as eachKeyed,
+  P as focus,
+  se as foldWidget,
+  ge as h,
+  le as inputWidget,
+  be as lift,
+  X as map,
+  ae as match,
+  R as mount,
+  z as narrow,
+  he as numberInputWidget,
+  A as on,
+  U as prop,
+  H as register,
+  me as selectWidget,
+  Y as show,
+  ve as slot,
+  ee as stack,
+  w as subscribe,
+  oe as subscribeNow,
+  te as template,
+  fe as textareaWidget,
+  de as watchAll,
+  V as withScope
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhi-zone/rainbow-ui",
-  "version": "0.2.0-alpha.3",
+  "version": "0.2.0-alpha.5",
   "description": "Type-safe DOM factories and algebraic widget combinators for rainbow",
   "type": "module",
   "types": "./dist/index.d.ts",