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

package/dist/elements.d.ts

@@ -18,15 +18,27 @@ import type { Optic } from "@rhi-zone/rainbow";
 import type { AnyEl } from "./html.js";
 import type { Widget } from "./widget.js";
 /**
- * Maps field names of `T` to optics that convert between `string | null`
- * (raw HTML attribute) and `T[K]` (typed signal field).
+ * An entry in `AttrSchema<T>`. Either a plain optic (attribute name = prop name)
+ * or a named entry `{ name, optic }` where `name` is the HTML attribute name
+ * (e.g. `"requires-review"`) and the TypeScript key remains the camelCase prop.
  *
  * - `optic.view(raw)`    — parse attribute string into `T[K]`;
  *                          `undefined` means use `defaults[K]`
  * - `optic.review(v, _)` — serialise `T[K]` back to a string for reflection
+ *
+ * @example
+ * // Simple: attr name = prop name
+ * attrs: { label: attrString, score: attrNumber }
+ *
+ * // Alias: HTML "requires-review" → TS prop "requiresReview"
+ * attrs: { requiresReview: { name: "requires-review", optic: attrBoolean } }
  */
+export type AttrEntry<V> = Optic<string | null, V> | {
+    name: string;
+    optic: Optic<string | null, V>;
+};
 export type AttrSchema<T> = {
-    [K in keyof T]?: Optic<string | null, T[K]>;
+    [K in keyof T]?: AttrEntry<T[K]>;
 };
 /**
  * Pass-through: `view` returns the raw string, or `undefined` when absent.

package/dist/elements.js

@@ -1,16 +1,23 @@
-var y = Object.defineProperty;
-var m = (t, e, n) => e in t ? y(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var a = (t, e, n) => m(t, typeof e != "symbol" ? e + "" : e, n);
-import { signal as v } from "@rhi-zone/rainbow";
-import { mount as S } from "./widget.js";
-const w = {
+var v = Object.defineProperty;
+var S = (t, e, n) => e in t ? v(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var f = (t, e, n) => S(t, typeof e != "symbol" ? e + "" : e, n);
+import { signal as w } from "@rhi-zone/rainbow";
+import { mount as k } from "./widget.js";
+function N(t, e) {
+  if ("name" in e && typeof e.name == "string") {
+    const n = e;
+    return { attrName: n.name, optic: n.optic };
+  }
+  return { attrName: t, optic: e };
+}
+const O = {
   view(t) {
     return t ?? void 0;
   },
   review(t) {
     return t;
   }
-}, k = {
+}, C = {
   view(t) {
     if (t == null) return;
     const e = Number(t);
@@ -19,7 +26,7 @@ const w = {
   review(t) {
     return String(t);
   }
-}, N = {
+}, E = {
   view(t) {
     if (t != null)
       return t !== "false" && t !== "0";
@@ -28,7 +35,7 @@ const w = {
     return String(t);
   }
 };
-function A() {
+function K() {
   return {
     view(t) {
       if (t != null)
@@ -43,15 +50,15 @@ function A() {
     }
   };
 }
-function J(t) {
+function M(t) {
   const e = {};
   for (const n of Object.keys(t)) {
     const s = typeof t[n];
-    s === "string" ? e[n] = w : s === "number" ? e[n] = k : s === "boolean" && (e[n] = N);
+    s === "string" ? e[n] = O : s === "number" ? e[n] = C : s === "boolean" && (e[n] = E);
   }
   return e;
 }
-function h(t) {
+function m(t) {
   if (typeof t == "string") {
     const e = new CSSStyleSheet();
     return e.replaceSync(t), e;
@@ -62,57 +69,62 @@ function x(t, e) {
   const {
     widget: n,
     defaults: s,
-    attrs: u = {},
-    shadow: l = "open",
+    attrs: p = {},
+    shadow: c = "open",
     styles: i
-  } = e, g = Object.keys(u), c = i == null ? [] : Array.isArray(i) ? i.map(h) : [h(i)];
-  class f extends HTMLElement {
+  } = e, u = /* @__PURE__ */ new Map();
+  for (const o of Object.keys(p)) {
+    const a = p[o], { attrName: r, optic: g } = N(o, a);
+    u.set(r, { propKey: o, optic: g });
+  }
+  const h = [...u.keys()], b = i == null ? [] : Array.isArray(i) ? i.map(m) : [m(i)];
+  class d extends HTMLElement {
     constructor() {
       super(...arguments);
       // Use underscore prefix rather than # so Object.defineProperty below can
       // access instance state from outside the class body.
-      a(this, "_rb_signal", v({ ...s }));
-      a(this, "_rb_cleanup", null);
+      f(this, "_rb_signal", w({ ...s }));
+      f(this, "_rb_cleanup", null);
     }
     static get observedAttributes() {
-      return g;
+      return h;
     }
     connectedCallback() {
-      const r = l !== !1 ? this.shadowRoot ?? this.attachShadow({ mode: l }) : this;
-      l !== !1 && c.length > 0 && (r.adoptedStyleSheets = c), this._rb_cleanup = S(n, this._rb_signal, r);
+      const r = c !== !1 ? this.shadowRoot ?? this.attachShadow({ mode: c }) : this;
+      c !== !1 && b.length > 0 && (r.adoptedStyleSheets = b), this._rb_cleanup = k(n, this._rb_signal, r);
     }
     disconnectedCallback() {
       var r;
       (r = this._rb_cleanup) == null || r.call(this), this._rb_cleanup = null;
     }
-    attributeChangedCallback(r, O, _) {
-      const d = u[r];
-      if (d == null) return;
-      const p = d.view(_) ?? s[r];
-      this._rb_signal.set({ ...this._rb_signal.get(), [r]: p });
+    attributeChangedCallback(r, g, y) {
+      const l = u.get(r);
+      if (l == null) return;
+      const _ = l.optic.view(y) ?? s[l.propKey];
+      this._rb_signal.set({ ...this._rb_signal.get(), [l.propKey]: _ });
     }
   }
   for (const o of Object.keys(s))
-    Object.defineProperty(f.prototype, o, {
+    Object.defineProperty(d.prototype, o, {
       get() {
         return this._rb_signal.get()[o];
       },
-      set(b) {
+      set(a) {
         this._rb_signal.set({
           ...this._rb_signal.get(),
-          [o]: b
+          [o]: a
         });
       },
       configurable: !0,
       enumerable: !0
     });
-  customElements.define(t, f);
+  customElements.define(t, d);
 }
 export {
-  N as attrBoolean,
-  A as attrJson,
-  k as attrNumber,
-  w as attrString,
-  J as attrsFrom,
+  E as attrBoolean,
+  K as attrJson,
+  C as attrNumber,
+  O as attrString,
+  M as attrsFrom,
   x as defineElement
 };

package/dist/index.d.ts

@@ -3,4 +3,4 @@ export * from "./widget.js";
 export * from "./form-state.js";
 export * from "./keybinds.js";
 export { attrString, attrNumber, attrBoolean, attrJson, attrsFrom, defineElement } from "./elements.js";
-export type { AttrSchema, PrimitiveAttrSchema } from "./elements.js";
+export type { AttrEntry, AttrSchema, PrimitiveAttrSchema } from "./elements.js";

package/dist/index.js

@@ -1,9 +1,9 @@
 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 { 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 { 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) {
+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(
     n,
     () => r(t.get()),
@@ -24,11 +24,11 @@ function b(e) {
 }
 export {
   l as above,
-  ee as attrBoolean,
-  te as attrJson,
-  ne as attrNumber,
-  ie as attrString,
-  oe as attrsFrom,
+  te as attrBoolean,
+  ne as attrJson,
+  ie as attrNumber,
+  oe as attrString,
+  re as attrsFrom,
   p as beside,
   f as bindAttr,
   x as bindCheckbox,
@@ -40,9 +40,9 @@ export {
   b as bindingsStoreSignal,
   k as checkboxWidget,
   C as concat,
-  U as createForm,
-  X as createFormState,
-  re as defineElement,
+  X as createForm,
+  Y as createFormState,
+  se as defineElement,
   E as dynamic,
   F as each,
   A as eachKeyed,
@@ -50,23 +50,24 @@ export {
   K as foldWidget,
   g as html,
   L as inputWidget,
-  Y as isDirty,
-  Z as isFormValid,
-  c as keybindsContext,
+  Z as isDirty,
+  _ as isFormValid,
+  d 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
+  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
 };

package/dist/widget.d.ts

@@ -379,6 +379,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;

package/dist/widget.js

@@ -1,347 +1,368 @@
-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";
+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";
 let k = null;
 function i(e) {
   k == null || k.push(e);
 }
-function b(e) {
-  const t = k, o = [];
+function h(e) {
+  const n = k, o = [];
   k = o;
-  const n = e();
-  return k = t, [n, () => {
+  const t = e();
+  return k = n, [t, () => {
     for (const c of o) c();
   }];
 }
-function K(e) {
-  return b(e);
+function M(e) {
+  return h(e);
 }
-function w(e, t) {
-  i(e.subscribe(t));
+function v(e, n) {
+  i(e.subscribe(n));
 }
-function M(e) {
+function O(e) {
   i(e);
 }
-function O(e, t, o) {
-  const [n, c] = b(() => e(t));
-  return o.appendChild(n.node), () => {
-    n.node.remove(), c();
+function T(e, n, o) {
+  const [t, c] = h(() => e(n));
+  return o.appendChild(t.node), () => {
+    t.node.remove(), c();
   };
 }
-function T(e, t) {
-  return (o) => e(o.focus(t));
+function V(e, n) {
+  return (o) => e(o.focus(n));
 }
-function H(e, t) {
+function H(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);
+      r = u.narrow(n);
+      const [a, l] = h(() => e(r));
+      c = l, 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 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 };
   };
 }
 function R(e) {
-  return (t) => {
-    const o = t, n = document.createElement("div");
-    n.dataset.each = "";
+  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;
+      for (const s of c) s();
+      c = [], t.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;
           }
-        ), m = o.focus(p), [g, v] = b(() => e(m));
-        c.push(v), n.appendChild(g.node);
+        ), g = o.focus(l), [m, w] = h(() => e(g));
+        c.push(w), t.appendChild(m.node);
       }
     };
-    r(t.get());
-    const u = t.map((d) => d.length);
-    return w(u, () => r(t.get())), i(() => {
+    r(n.get());
+    const u = n.map((d) => d.length);
+    return v(u, () => r(n.get())), i(() => {
       for (const d of c) d();
-    }), { _tag: "div", node: n };
+    }), { _tag: "div", node: t };
   };
 }
-function U(e, t) {
+function U(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(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 };
   };
 }
-function V(e, t) {
+function z(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(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 };
   };
 }
-function z(e, t) {
+function D(e, n) {
   return (o) => {
-    const n = S(e, o);
-    return t(n);
+    const t = S(e, o);
+    return n(t);
   };
 }
-function D(e, t) {
+function G(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 J(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 t = document.createElement("div");
+    t.dataset.show = "";
+    const [c, r] = h(() => e(o));
+    t.appendChild(c.node), i(r);
     const u = (d) => {
-      n.style.display = t(d) ? "" : "none";
+      t.style.display = n(d) ? "" : "none";
     };
-    return u(o.get()), w(o, u), { _tag: "div", node: n };
+    return u(o.get()), v(o, u), { _tag: "div", node: t };
   };
 }
-function J(e, t) {
+function Q(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] = 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 };
   };
 }
-function Q(...e) {
-  return (t) => {
+function X(...e) {
+  return (n) => {
     const o = document.createElement("div");
     o.dataset.stack = "";
-    for (const n of e) {
-      const [c, r] = b(() => n(t));
+    for (const t of e) {
+      const [c, r] = h(() => t(n));
       o.appendChild(c.node), i(r);
     }
     return { _tag: "div", node: o };
   };
 }
-function X(e, t, o) {
-  const n = document.createElement("template");
-  return n.innerHTML = e, (c) => {
+function Y(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));
+    r.dataset.templ = "", r.appendChild(t.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)
+    for (const d of Object.keys(n)) {
+      const s = n[d], a = r.querySelector(`${s}[data-ref="${d}"]`);
+      if (a === null)
         throw new Error(
-          `templ: ref "${d}" not found — expected <${a} data-ref="${d}"> in template`
+          `templ: ref "${d}" not found — expected <${s} data-ref="${d}"> in template`
         );
-      u[d] = { _tag: a, node: s };
+      u[d] = { _tag: s, node: a };
     }
     return o(c, u), { _tag: "div", node: r };
   };
 }
-function Y(e, t, o, n) {
-  const c = (n == null ? void 0 : n.container) ?? "div", r = document.createElement(c);
+function Z(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 u = /* @__PURE__ */ new Map(), d = (a, l) => {
+    const g = B(l);
+    let m = !1, w = () => {
     };
-    "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 && (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);
       }
     }));
-    const [l, f] = b(() => o(m));
+    const [f, p] = h(() => o(g));
     return {
-      itemSignal: m,
-      childNode: l.node,
+      itemSignal: g,
+      childNode: f.node,
       cleanup: () => {
-        f(), v();
+        p(), w();
       },
-      setFromParent: (h) => {
-        g = !0, m.set(h), g = !1;
+      setFromParent: (b) => {
+        m = !0, g.set(b), m = !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 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));
     }
-    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 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;
     }
   };
-  return a(e.get()), w(e, a), i(() => {
-    for (const s of u.values()) s.cleanup();
+  return s(e.get()), v(e, s), i(() => {
+    for (const a of u.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 _(e, n, o) {
+  const t = o;
+  e.addEventListener(n, t), i(() => e.removeEventListener(n, t));
 }
-function _(e, t) {
-  e.value = t.get();
-  const o = () => t.set(e.value);
+function A(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;
 }
-function I(e, t) {
-  A(e, "change", () => t.set(e.value)), w(t, (o) => {
+function P(e, n) {
+  _(e, "change", () => n.set(e.value)), v(n, (o) => {
     e.value !== o && (e.value = o);
   });
 }
-function P(e, t) {
-  A(e, "change", () => t.set(e.checked)), w(t, (o) => {
+function j(e, n) {
+  _(e, "change", () => n.set(e.checked)), v(n, (o) => {
     e.checked !== o && (e.checked = o);
   });
 }
-function Z(e, t) {
-  t(e.get()), i(e.subscribe(t));
+function ee(e, n) {
+  n(e.get()), i(e.subscribe(n));
 }
-function ee(e, t) {
-  e.textContent = t.get(), i(t.subscribe((o) => {
+function te(e, n) {
+  e.textContent = n.get(), i(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 ne(e, n, o) {
+  e.setAttribute(n, o.get()), i(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 oe(e, n, o) {
+  e.classList.toggle(n, o.get()), i(o.subscribe((t) => {
+    e.classList.toggle(n, t);
   }));
 }
-function oe(e, t) {
-  t();
-  const o = e.map((n) => n.subscribe(t));
+function ce(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 re(e, n) {
+  return e.style.display = n.get() ? "" : "none", n.subscribe((o) => {
     e.style.display = o ? "" : "none";
   });
 }
-function re(e, t) {
+function ue(e, n) {
+  return (o) => {
+    const t = document.createElement("div");
+    t.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];
+      if (a == null) return;
+      const l = o.narrow(W(e, s));
+      let g;
+      [g, c] = h(
+        () => a(l)
+      ), t.appendChild(g.node);
+    };
+    return v(o, u), u(o.get()), i(() => c == null ? void 0 : c()), { _tag: "div", node: t };
+  };
+}
+function de(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();
+    t !== null && (t(), t = null), o.replaceChildren();
     let u = null;
     switch (r.status) {
       case "notAsked":
-        u = t.notAsked ?? null;
+        u = n.notAsked ?? null;
         break;
       case "loading":
-        u = t.loading ?? null;
+        u = n.loading ?? null;
         break;
       case "failure":
-        u = t.failure ? () => t.failure(r.error) : null;
+        u = n.failure ? () => n.failure(r.error) : null;
         break;
       case "success":
-        u = t.success ? () => t.success(r.value) : null;
+        u = n.success ? () => n.success(r.value) : null;
         break;
     }
     if (u !== null) {
       let d;
-      [d, n] = b(u), o.appendChild(d.node);
+      [d, t] = h(u), o.appendChild(d.node);
     }
   };
-  return c(e.get()), i(e.subscribe(c)), i(() => n == null ? void 0 : n()), { _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;
-  };
+  return c(e.get()), i(e.subscribe(c)), i(() => t == null ? void 0 : t()), { _tag: "div", node: o };
 }
-function de(e) {
-  return (t) => {
-    const o = t, n = F(e ?? {});
-    return n.node.value = o.get(), _(n.node, o), n;
+function ae(e) {
+  return (n) => {
+    const o = n, t = N(e ?? {});
+    return t.node.value = o.get(), A(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;
+  return (n) => {
+    const o = n, t = I(e ?? {});
+    return t.node.value = o.get(), A(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;
+  return (n) => {
+    const o = n, t = N({ ...e, type: "checkbox" });
+    return t.node.checked = o.get(), j(t.node, o), t;
+  };
+}
+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;
       isNaN(c) || o.set(c);
-    }), w(t, (c) => {
-      n.node.valueAsNumber !== c && (n.node.value = String(c));
-    }), n;
+    }), v(n, (c) => {
+      t.node.valueAsNumber !== c && (t.node.value = String(c));
+    }), t;
   };
 }
-function ae(e, t) {
+function fe(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 = $(n ?? {}, ...e.map((r) => F({ value: r.value }, r.label)));
+    return c.node.value = t.get(), P(c.node, t), c;
   };
 }
 export {
-  V as above,
+  z 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,
+  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,
-  Y as eachKeyed,
-  T as focus,
-  re as foldWidget,
-  ue as inputWidget,
-  D as map,
-  O as mount,
+  Z as eachKeyed,
+  V as focus,
+  de as foldWidget,
+  ae as inputWidget,
+  G as map,
+  ue as match,
+  T as mount,
   H as narrow,
-  ie as numberInputWidget,
-  A as on,
-  M as register,
-  ae as selectWidget,
-  G as show,
-  Q as stack,
-  w as subscribe,
-  Z as subscribeNow,
-  X as template,
-  de as textareaWidget,
-  oe as watchAll,
-  K as withScope
+  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
 };

package/package.json

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