@rhi-zone/rainbow-ui 0.2.0-alpha.2 → 0.2.0-alpha.4

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, mount as B, narrow as D, numberInputWidget as J, on as T, register as V, selectWidget as j, show as q, stack as z, subscribe as G, subscribeNow as H, template as M, textareaWidget as O, watchAll as P, withScope as Q } from "./widget.js";
-import { createForm as U, createFormState as X, isDirty as Y, isFormValid as Z, shouldShowError as _ } from "./form-state.js";
+import { h as u } 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, h as L, inputWidget as N, map as B, match as D, mount as J, narrow as T, numberInputWidget as V, on as j, prop as q, register as z, selectWidget as G, show as H, slot as M, stack as O, subscribe as P, subscribeNow as Q, template as R, textareaWidget as U, watchAll as X, withScope as Y } from "./widget.js";
+import { createForm as _, createFormState as $, isDirty as ee, isFormValid as te, shouldShowError as ne } from "./form-state.js";
 import { signal as a } from "@rhi-zone/rainbow";
-import { attrBoolean as ee, attrJson as te, attrNumber as ne, attrString as ie, attrsFrom as oe, defineElement as re } from "./elements.js";
-function c(e, n, t, r, i) {
-  const o = e(
+import { attrBoolean as ie, attrJson as re, attrNumber as se, attrString as ae, attrsFrom as ce, defineElement as de } 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,
-  ee as attrBoolean,
-  te as attrJson,
-  ne as attrNumber,
-  ie as attrString,
-  oe as attrsFrom,
+  ie as attrBoolean,
+  re as attrJson,
+  se as attrNumber,
+  ae as attrString,
+  ce as attrsFrom,
   p as beside,
   f as bindAttr,
   x as bindCheckbox,
@@ -40,33 +40,37 @@ export {
   b as bindingsStoreSignal,
   k as checkboxWidget,
   C as concat,
-  U as createForm,
-  X as createFormState,
-  re as defineElement,
+  _ as createForm,
+  $ as createFormState,
+  de as defineElement,
   E as dynamic,
   F as each,
   A as eachKeyed,
   I as focus,
   K as foldWidget,
-  g as html,
-  L as inputWidget,
-  Y as isDirty,
-  Z as isFormValid,
-  c as keybindsContext,
-  N as map,
-  B as mount,
-  D as narrow,
-  J as numberInputWidget,
-  T as on,
-  V as register,
-  j as selectWidget,
-  _ as shouldShowError,
-  q as show,
-  z as stack,
-  G as subscribe,
-  H as subscribeNow,
-  M as template,
-  O as textareaWidget,
-  P as watchAll,
-  Q as withScope
+  L as h,
+  u as html,
+  N as inputWidget,
+  ee as isDirty,
+  te as isFormValid,
+  d as keybindsContext,
+  B as map,
+  D as match,
+  J as mount,
+  T as narrow,
+  V as numberInputWidget,
+  j as on,
+  q as prop,
+  z as register,
+  G as selectWidget,
+  ne as shouldShowError,
+  H as show,
+  M as slot,
+  O as stack,
+  P as subscribe,
+  Q as subscribeNow,
+  R as template,
+  U as textareaWidget,
+  X as watchAll,
+  Y 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)
@@ -379,6 +395,30 @@ export declare function bindShow(el: HTMLElement, s: ReadonlySignal<boolean>): (
  *   success:  (data) => renderData(data),
  * })
  */
+/**
+ * Render a discriminated union by tag. Exhaustively maps each variant to a
+ * widget; swaps the rendered child when the tag changes.
+ *
+ * Compared to N `narrow` + `stack` calls:
+ * - Single container div (not N+1)
+ * - Exhaustiveness checked at compile time — missing variant = type error
+ * - No `tagged()` declarations at the call site
+ *
+ * Must be called during a widget call context.
+ *
+ * @example
+ * type Screen =
+ *   | { screen: 'list';   items: Item[] }
+ *   | { screen: 'detail'; item: Item }
+ *
+ * match('screen', {
+ *   list:   (s) => listWidget(s),
+ *   detail: (s) => detailWidget(s),
+ * })
+ */
+export declare function match<S extends Record<K, string>, K extends keyof S & string>(key: K, cases: {
+    [V in S[K] & string]: Widget<Extract<S, Record<K, V>>, FlowContent>;
+}): Widget<S, DivEl>;
 export declare function foldWidget<T, E>(s: Signal<AsyncData<T, E>> | ReadonlySignal<AsyncData<T, E>>, cases: {
     notAsked?: () => AnyEl;
     loading?: () => AnyEl;
@@ -417,4 +457,62 @@ export declare function selectWidget(options: {
     value: string;
     label: string;
 }[], attrs?: SelectAttrs): Widget<string, SelectEl>;
+/**
+ * A reactive child: either a static element, a string, or a widget that
+ * accepts the same signal type `T` and returns any element.
+ */
+export type RChild<T> = AnyEl | string | Widget<T, AnyEl>;
+/**
+ * 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. Static children
+ * (`AnyEl`) are deep-cloned on each widget invocation so that the same static
+ * node can be safely reused across multiple widget instances.
+ */
+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,347 +1,427 @@
-import { index as C, stateful as S, lens as L, signal as W } from "@rhi-zone/rainbow";
-import { i as N, s as B, o as $, t as F } from "./html-C8SnQjvU.js";
-let k = null;
-function i(e) {
-  k == null || k.push(e);
-}
-function b(e) {
-  const t = k, o = [];
-  k = o;
-  const n = e();
-  return k = t, [n, () => {
+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 y = null;
+function l(e) {
+  y == null || y.push(e);
+}
+function g(e) {
+  const n = y, o = [];
+  y = o;
+  const t = e();
+  return y = n, [t, () => {
     for (const c of o) c();
   }];
 }
-function K(e) {
-  return b(e);
+function V(e) {
+  return g(e);
 }
-function w(e, t) {
-  i(e.subscribe(t));
+function w(e, n) {
+  l(e.subscribe(n));
 }
-function M(e) {
-  i(e);
+function H(e) {
+  l(e);
 }
-function O(e, t, o) {
-  const [n, c] = b(() => e(t));
-  return o.appendChild(n.node), () => {
-    n.node.remove(), c();
+function R(e, n, o) {
+  const [t, c] = g(() => e(n));
+  return o.appendChild(t.node), () => {
+    t.node.remove(), c();
   };
 }
-function T(e, t) {
-  return (o) => e(o.focus(t));
+function P(e, n) {
+  return (o) => e(o.focus(n));
 }
-function H(e, t) {
+function U(e, n) {
+  return P(e, W(n));
+}
+function z(e, n) {
   return (o) => {
-    const n = document.createElement("div");
-    n.dataset.narrow = "";
+    const t = document.createElement("div");
+    t.dataset.narrow = "";
     let c = null, r = null;
-    const u = o, d = () => {
-      r = u.narrow(t);
-      const [s, p] = b(() => e(r));
-      c = p, n.appendChild(s.node);
+    const d = o, u = () => {
+      r = d.narrow(n);
+      const [a, f] = g(() => e(r));
+      c = f, t.appendChild(a.node);
     };
-    return w(o, (s) => {
-      const p = t.view(s);
-      p !== void 0 && c === null ? d() : p === void 0 && c !== null && (c(), c = null, r = null, n.replaceChildren());
-    }), t.view(o.get()) !== void 0 && d(), i(() => c == null ? void 0 : c()), { _tag: "div", node: n };
+    return w(o, (a) => {
+      const f = n.view(a);
+      f !== void 0 && c === null ? u() : f === void 0 && c !== null && (c(), c = null, r = null, t.replaceChildren());
+    }), n.view(o.get()) !== void 0 && u(), l(() => c == null ? void 0 : c()), { _tag: "div", node: t };
   };
 }
-function R(e) {
-  return (t) => {
-    const o = t, n = document.createElement("div");
-    n.dataset.each = "";
+function D(e) {
+  return (n) => {
+    const o = n, t = document.createElement("div");
+    t.dataset.each = "";
     let c = [];
-    const r = (d) => {
-      for (const a of c) a();
-      c = [], n.replaceChildren();
-      for (let a = 0; a < d.length; a++) {
-        const s = a, p = L(
-          (l) => l[s],
-          (l, f) => {
-            const h = [...f];
-            return h[s] = l, h;
+    const r = (u) => {
+      for (const s of c) s();
+      c = [], t.replaceChildren();
+      for (let s = 0; s < u.length; s++) {
+        const a = s, f = B(
+          (p) => p[a],
+          (p, h) => {
+            const b = [...h];
+            return b[a] = p, b;
           }
-        ), m = o.focus(p), [g, v] = b(() => e(m));
-        c.push(v), n.appendChild(g.node);
+        ), m = o.focus(f), [v, C] = g(() => e(m));
+        c.push(C), t.appendChild(v.node);
       }
     };
-    r(t.get());
-    const u = t.map((d) => d.length);
-    return w(u, () => r(t.get())), i(() => {
-      for (const d of c) d();
-    }), { _tag: "div", node: n };
+    r(n.get());
+    const d = n.map((u) => u.length);
+    return w(d, () => r(n.get())), l(() => {
+      for (const u of c) u();
+    }), { _tag: "div", node: t };
   };
 }
-function U(e, t) {
+function G(e, n) {
   return (o) => {
-    const n = o, c = document.createElement("div");
+    const t = o, c = document.createElement("div");
     c.dataset.beside = "";
-    const r = n.focus(C(0)), u = n.focus(C(1)), [d, a] = b(() => e(r)), [s, p] = b(() => t(u));
-    return c.appendChild(d.node), c.appendChild(s.node), i(a), i(p), { _tag: "div", node: c };
+    const r = t.focus(E(0)), d = t.focus(E(1)), [u, s] = g(() => e(r)), [a, f] = g(() => n(d));
+    return c.appendChild(u.node), c.appendChild(a.node), l(s), l(f), { _tag: "div", node: c };
   };
 }
-function V(e, t) {
+function J(e, n) {
   return (o) => {
-    const n = o, c = document.createElement("div");
+    const t = o, c = document.createElement("div");
     c.dataset.above = "";
-    const r = n.focus(C(0)), u = n.focus(C(1)), [d, a] = b(() => e(r)), [s, p] = b(() => t(u));
-    return c.appendChild(d.node), c.appendChild(s.node), i(a), i(p), { _tag: "div", node: c };
+    const r = t.focus(E(0)), d = t.focus(E(1)), [u, s] = g(() => e(r)), [a, f] = g(() => n(d));
+    return c.appendChild(u.node), c.appendChild(a.node), l(s), l(f), { _tag: "div", node: c };
   };
 }
-function z(e, t) {
+function Q(e, n) {
   return (o) => {
-    const n = S(e, o);
-    return t(n);
+    const t = L(e, o);
+    return n(t);
   };
 }
-function D(e, t) {
+function X(e, n) {
   return (o) => {
-    const n = o.narrow(t);
-    return e(n);
+    const t = o.narrow(n);
+    return e(t);
   };
 }
-function G(e, t) {
+function Y(e, n) {
   return (o) => {
-    const n = document.createElement("div");
-    n.dataset.show = "";
-    const [c, r] = b(() => e(o));
-    n.appendChild(c.node), i(r);
-    const u = (d) => {
-      n.style.display = t(d) ? "" : "none";
+    const t = document.createElement("div");
+    t.dataset.show = "";
+    const [c, r] = g(() => e(o));
+    t.appendChild(c.node), l(r);
+    const d = (u) => {
+      t.style.display = n(u) ? "" : "none";
     };
-    return u(o.get()), w(o, u), { _tag: "div", node: n };
+    return d(o.get()), w(o, d), { _tag: "div", node: t };
   };
 }
-function J(e, t) {
+function Z(e, n) {
   return (o) => {
-    const n = document.createElement("div");
-    n.dataset.concat = "";
-    const [c, r] = b(() => e(o)), [u, d] = b(() => t(o));
-    return n.appendChild(c.node), n.appendChild(u.node), i(r), i(d), { _tag: "div", node: n };
+    const t = document.createElement("div");
+    t.dataset.concat = "";
+    const [c, r] = g(() => e(o)), [d, u] = g(() => n(o));
+    return t.appendChild(c.node), t.appendChild(d.node), l(r), l(u), { _tag: "div", node: t };
   };
 }
-function Q(...e) {
-  return (t) => {
+function ee(...e) {
+  return (n) => {
     const o = document.createElement("div");
     o.dataset.stack = "";
-    for (const n of e) {
-      const [c, r] = b(() => n(t));
-      o.appendChild(c.node), i(r);
+    for (const t of e) {
+      const [c, r] = g(() => t(n));
+      o.appendChild(c.node), l(r);
     }
     return { _tag: "div", node: o };
   };
 }
-function X(e, t, o) {
-  const n = document.createElement("template");
-  return n.innerHTML = e, (c) => {
+function te(e, n, o) {
+  const t = document.createElement("template");
+  return t.innerHTML = e, (c) => {
     const r = document.createElement("div");
-    r.dataset.templ = "", r.appendChild(n.content.cloneNode(!0));
-    const u = {};
-    for (const d of Object.keys(t)) {
-      const a = t[d], s = r.querySelector(`${a}[data-ref="${d}"]`);
-      if (s === null)
+    r.dataset.templ = "", r.appendChild(t.content.cloneNode(!0));
+    const d = {};
+    for (const u of Object.keys(n)) {
+      const s = n[u], a = r.querySelector(`${s}[data-ref="${u}"]`);
+      if (a === null)
         throw new Error(
-          `templ: ref "${d}" not found — expected <${a} data-ref="${d}"> in template`
+          `templ: ref "${u}" not found — expected <${s} data-ref="${u}"> in template`
         );
-      u[d] = { _tag: a, node: s };
+      d[u] = { _tag: s, node: a };
     }
-    return o(c, u), { _tag: "div", node: r };
+    return o(c, d), { _tag: "div", node: r };
   };
 }
-function Y(e, t, o, n) {
-  const c = (n == null ? void 0 : n.container) ?? "div", r = document.createElement(c);
+function ne(e, n, o, t) {
+  const c = (t == null ? void 0 : t.container) ?? "div", r = document.createElement(c);
   r.dataset.eachKeyed = "";
-  const u = /* @__PURE__ */ new Map(), d = (s, p) => {
-    const m = W(p);
-    let g = !1, v = () => {
+  const d = /* @__PURE__ */ new Map(), u = (a, f) => {
+    const m = j(f);
+    let v = !1, C = () => {
     };
-    "set" in e && (v = m.subscribe((h) => {
-      if (g) return;
-      const x = e.get(), E = x.findIndex((y) => t(y) === s);
-      if (E !== -1 && !Object.is(x[E], h)) {
-        const y = [...x];
-        y[E] = h, e.set(y);
+    "set" in e && (C = m.subscribe((b) => {
+      if (v) return;
+      const x = e.get(), N = x.findIndex((k) => n(k) === a);
+      if (N !== -1 && !Object.is(x[N], b)) {
+        const k = [...x];
+        k[N] = b, e.set(k);
       }
     }));
-    const [l, f] = b(() => o(m));
+    const [p, h] = g(() => o(m));
     return {
       itemSignal: m,
-      childNode: l.node,
+      childNode: p.node,
       cleanup: () => {
-        f(), v();
+        h(), C();
       },
-      setFromParent: (h) => {
-        g = !0, m.set(h), g = !1;
+      setFromParent: (b) => {
+        v = !0, m.set(b), v = !1;
       }
     };
-  }, a = (s) => {
-    var v;
-    const p = s.map(t), m = new Set(p);
-    for (const [l, f] of u)
-      m.has(l) || (f.cleanup(), (v = f.childNode.parentNode) == null || v.removeChild(f.childNode), u.delete(l));
-    for (let l = 0; l < s.length; l++) {
-      const f = p[l], h = s[l];
-      u.has(f) ? u.get(f).setFromParent(h) : u.set(f, d(f, h));
+  }, s = (a) => {
+    var C;
+    const f = a.map(n), m = new Set(f);
+    for (const [p, h] of d)
+      m.has(p) || (h.cleanup(), (C = h.childNode.parentNode) == null || C.removeChild(h.childNode), d.delete(p));
+    for (let p = 0; p < a.length; p++) {
+      const h = f[p], b = a[p];
+      d.has(h) ? d.get(h).setFromParent(b) : d.set(h, u(h, b));
     }
-    let g = null;
-    for (let l = s.length - 1; l >= 0; l--) {
-      const f = u.get(p[l]);
-      (f.childNode.parentNode !== r || f.childNode.nextSibling !== g) && r.insertBefore(f.childNode, g), g = f.childNode;
+    let v = null;
+    for (let p = a.length - 1; p >= 0; p--) {
+      const h = d.get(f[p]);
+      (h.childNode.parentNode !== r || h.childNode.nextSibling !== v) && r.insertBefore(h.childNode, v), v = h.childNode;
     }
   };
-  return a(e.get()), w(e, a), i(() => {
-    for (const s of u.values()) s.cleanup();
+  return s(e.get()), w(e, s), l(() => {
+    for (const a of d.values()) a.cleanup();
   }), { _tag: c, node: r };
 }
-function A(e, t, o) {
-  const n = o;
-  e.addEventListener(t, n), i(() => e.removeEventListener(t, n));
+function A(e, n, o) {
+  const t = o;
+  e.addEventListener(n, t), l(() => e.removeEventListener(n, t));
 }
-function _(e, t) {
-  e.value = t.get();
-  const o = () => t.set(e.value);
+function S(e, n) {
+  e.value = n.get();
+  const o = () => n.set(e.value);
   e.addEventListener("input", o);
-  const n = t.subscribe((r) => {
+  const t = n.subscribe((r) => {
     e.value !== r && (e.value = r);
   }), c = () => {
-    e.removeEventListener("input", o), n();
+    e.removeEventListener("input", o), t();
   };
-  return i(c), c;
+  return l(c), c;
 }
-function I(e, t) {
-  A(e, "change", () => t.set(e.value)), w(t, (o) => {
+function T(e, n) {
+  A(e, "change", () => n.set(e.value)), w(n, (o) => {
     e.value !== o && (e.value = o);
   });
 }
-function P(e, t) {
-  A(e, "change", () => t.set(e.checked)), w(t, (o) => {
+function q(e, n) {
+  A(e, "change", () => n.set(e.checked)), w(n, (o) => {
     e.checked !== o && (e.checked = o);
   });
 }
-function Z(e, t) {
-  t(e.get()), i(e.subscribe(t));
+function oe(e, n) {
+  n(e.get()), l(e.subscribe(n));
 }
-function ee(e, t) {
-  e.textContent = t.get(), i(t.subscribe((o) => {
+function ce(e, n) {
+  e.textContent = n.get(), l(n.subscribe((o) => {
     e.textContent = o;
   }));
 }
-function ne(e, t, o) {
-  e.setAttribute(t, o.get()), i(o.subscribe((n) => {
-    e.setAttribute(t, n);
+function re(e, n, o) {
+  e.setAttribute(n, o.get()), l(o.subscribe((t) => {
+    e.setAttribute(n, t);
   }));
 }
-function te(e, t, o) {
-  e.classList.toggle(t, o.get()), i(o.subscribe((n) => {
-    e.classList.toggle(t, n);
+function de(e, n, o) {
+  e.classList.toggle(n, o.get()), l(o.subscribe((t) => {
+    e.classList.toggle(n, t);
   }));
 }
-function oe(e, t) {
-  t();
-  const o = e.map((n) => n.subscribe(t));
+function ue(e, n) {
+  n();
+  const o = e.map((t) => t.subscribe(n));
   return () => {
-    for (const n of o) n();
+    for (const t of o) t();
   };
 }
-function ce(e, t) {
-  return e.style.display = t.get() ? "" : "none", t.subscribe((o) => {
+function ie(e, n) {
+  return e.style.display = n.get() ? "" : "none", n.subscribe((o) => {
     e.style.display = o ? "" : "none";
   });
 }
-function re(e, t) {
+function ae(e, n) {
+  return (o) => {
+    const t = document.createElement("div");
+    t.dataset.match = "";
+    let c = null, r = null;
+    const d = (u) => {
+      const s = u[e];
+      if (s === r) return;
+      c == null || c(), c = null, t.replaceChildren(), r = s;
+      const a = n[s];
+      if (a == null) return;
+      const f = o.narrow($(e, s));
+      let m;
+      [m, c] = g(
+        () => a(f)
+      ), t.appendChild(m.node);
+    };
+    return w(o, d), d(o.get()), l(() => c == null ? void 0 : c()), { _tag: "div", node: t };
+  };
+}
+function se(e, n) {
   const o = document.createElement("div");
   o.dataset.foldWidget = "";
-  let n = null;
+  let t = null;
   const c = (r) => {
-    n !== null && (n(), n = null), o.replaceChildren();
-    let u = null;
+    t !== null && (t(), t = null), o.replaceChildren();
+    let d = null;
     switch (r.status) {
       case "notAsked":
-        u = t.notAsked ?? null;
+        d = n.notAsked ?? null;
         break;
       case "loading":
-        u = t.loading ?? null;
+        d = n.loading ?? null;
         break;
       case "failure":
-        u = t.failure ? () => t.failure(r.error) : null;
+        d = n.failure ? () => n.failure(r.error) : null;
         break;
       case "success":
-        u = t.success ? () => t.success(r.value) : null;
+        d = n.success ? () => n.success(r.value) : null;
         break;
     }
-    if (u !== null) {
-      let d;
-      [d, n] = b(u), o.appendChild(d.node);
+    if (d !== null) {
+      let u;
+      [u, t] = g(d), o.appendChild(u.node);
     }
   };
-  return c(e.get()), i(e.subscribe(c)), i(() => n == null ? void 0 : n()), { _tag: "div", node: o };
+  return c(e.get()), l(e.subscribe(c)), l(() => t == null ? void 0 : t()), { _tag: "div", node: o };
 }
-function ue(e) {
-  return (t) => {
-    const o = t, n = N(e ?? {});
-    return n.node.value = o.get(), _(n.node, o), n;
+function le(e) {
+  return (n) => {
+    const o = n, t = _(e ?? {});
+    return t.node.value = o.get(), S(t.node, o), t;
   };
 }
-function de(e) {
-  return (t) => {
-    const o = t, n = F(e ?? {});
-    return n.node.value = o.get(), _(n.node, o), n;
+function fe(e) {
+  return (n) => {
+    const o = n, t = O(e ?? {});
+    return t.node.value = o.get(), S(t.node, o), t;
   };
 }
-function se(e) {
-  return (t) => {
-    const o = t, n = N({ ...e, type: "checkbox" });
-    return n.node.checked = o.get(), P(n.node, o), n;
+function pe(e) {
+  return (n) => {
+    const o = n, t = _({ ...e, type: "checkbox" });
+    return t.node.checked = o.get(), q(t.node, o), t;
   };
 }
-function ie(e) {
-  return (t) => {
-    const o = t, n = N({ ...e, type: "number" });
-    return n.node.value = String(o.get()), A(n.node, "input", () => {
-      const c = n.node.valueAsNumber;
+function he(e) {
+  return (n) => {
+    const o = n, t = _({ ...e, type: "number" });
+    return t.node.value = String(o.get()), A(t.node, "input", () => {
+      const c = t.node.valueAsNumber;
       isNaN(c) || o.set(c);
-    }), w(t, (c) => {
-      n.node.valueAsNumber !== c && (n.node.value = String(c));
-    }), n;
+    }), w(n, (c) => {
+      t.node.valueAsNumber !== c && (t.node.value = String(c));
+    }), t;
   };
 }
-function ae(e, t) {
+function ge(e, n) {
   return (o) => {
-    const n = o, c = B(t ?? {}, ...e.map((r) => $({ value: r.value }, r.label)));
-    return c.node.value = n.get(), I(c.node, n), c;
+    const t = o, c = F(n ?? {}, ...e.map((r) => I({ value: r.value }, r.label)));
+    return c.node.value = t.get(), T(c.node, t), c;
+  };
+}
+function i(e) {
+  return (n, ...o) => (t) => {
+    const c = document.createElement(e);
+    for (const [r, d] of Object.entries(n))
+      d == null || d === !1 || c.setAttribute(r, d === !0 ? "" : String(d));
+    for (const r of o)
+      typeof r == "function" ? c.appendChild(r(t).node) : typeof r == "string" ? c.appendChild(document.createTextNode(r)) : c.appendChild(r.node.cloneNode(!0));
+    return { _tag: e, node: c };
   };
 }
+const me = {
+  // 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 be(e, n, o, t) {
+  const c = o(n.get());
+  if (c === void 0) {
+    e.remove();
+    return;
+  }
+  const r = c(t ?? n);
+  e.replaceWith(r.node);
+}
 export {
-  V as above,
-  U as beside,
-  ne as bindAttr,
-  P as bindCheckbox,
-  te as bindClass,
-  _ as bindInput,
-  I as bindSelect,
-  ce as bindShow,
-  ee as bindText,
-  se as checkboxWidget,
-  J as concat,
-  z as dynamic,
-  R as each,
-  Y as eachKeyed,
-  T as focus,
-  re as foldWidget,
-  ue as inputWidget,
-  D as map,
-  O as mount,
-  H as narrow,
-  ie as numberInputWidget,
+  J as above,
+  G as beside,
+  re as bindAttr,
+  q as bindCheckbox,
+  de 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,
+  me as h,
+  le as inputWidget,
+  X as map,
+  ae as match,
+  R as mount,
+  z as narrow,
+  he as numberInputWidget,
   A as on,
-  M as register,
-  ae as selectWidget,
-  G as show,
-  Q as stack,
+  U as prop,
+  H as register,
+  ge as selectWidget,
+  Y as show,
+  be as slot,
+  ee as stack,
   w as subscribe,
-  Z as subscribeNow,
-  X as template,
-  de as textareaWidget,
-  oe as watchAll,
-  K as withScope
+  oe as subscribeNow,
+  te as template,
+  fe as textareaWidget,
+  ue as watchAll,
+  V as withScope
 };

package/package.json

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