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

package/dist/index.js

@@ -1,8 +1,8 @@
-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 { 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 ie, attrJson as re, attrNumber as se, attrString as ae, attrsFrom as ce, defineElement as de } from "./elements.js";
+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,
@@ -23,12 +23,12 @@ function b(e) {
   return e.addEventListener("change", t), [n, () => e.removeEventListener("change", t)];
 }
 export {
-  l as above,
-  ie as attrBoolean,
-  re as attrJson,
-  se as attrNumber,
-  ae as attrString,
-  ce 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,37 +40,38 @@ export {
   b as bindingsStoreSignal,
   k as checkboxWidget,
   C as concat,
-  _ as createForm,
-  $ as createFormState,
-  de 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,
   L as h,
-  u as html,
+  l as html,
   N as inputWidget,
-  ee as isDirty,
-  te as isFormValid,
+  te as isDirty,
+  ne 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
+  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

@@ -458,19 +458,35 @@ export declare function selectWidget(options: {
     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.
+ * 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 type RChild<T> = AnyEl | string | Widget<T, AnyEl>;
+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. Static children
- * (`AnyEl`) are deep-cloned on each widget invocation so that the same static
- * node can be safely reused across multiple widget instances.
+ * 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>;

package/dist/widget.js

@@ -1,350 +1,353 @@
 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;
+let k = null;
 function l(e) {
-  y == null || y.push(e);
+  k == null || k.push(e);
 }
-function g(e) {
-  const n = y, o = [];
-  y = o;
-  const t = e();
-  return y = n, [t, () => {
+function m(e) {
+  const t = k, o = [];
+  k = o;
+  const n = e();
+  return k = t, [n, () => {
     for (const c of o) c();
   }];
 }
 function V(e) {
-  return g(e);
+  return m(e);
 }
-function w(e, n) {
-  l(e.subscribe(n));
+function w(e, t) {
+  l(e.subscribe(t));
 }
 function H(e) {
   l(e);
 }
-function R(e, n, o) {
-  const [t, c] = g(() => 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 P(e, n) {
-  return (o) => e(o.focus(n));
+function P(e, t) {
+  return (o) => e(o.focus(t));
 }
-function U(e, n) {
-  return P(e, W(n));
+function U(e, t) {
+  return P(e, W(t));
 }
-function z(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 d = o, u = () => {
-      r = d.narrow(n);
-      const [a, f] = g(() => e(r));
-      c = f, t.appendChild(a.node);
+    const u = o, d = () => {
+      r = u.narrow(t);
+      const [a, f] = m(() => e(r));
+      c = f, n.appendChild(a.node);
     };
     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 };
+      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 D(e) {
-  return (n) => {
-    const o = n, t = document.createElement("div");
-    t.dataset.each = "";
+  return (t) => {
+    const o = t, n = document.createElement("div");
+    n.dataset.each = "";
     let c = [];
-    const r = (u) => {
+    const r = (d) => {
       for (const s of c) s();
-      c = [], t.replaceChildren();
-      for (let s = 0; s < u.length; s++) {
+      c = [], n.replaceChildren();
+      for (let s = 0; s < d.length; s++) {
         const a = s, f = B(
           (p) => p[a],
           (p, h) => {
-            const b = [...h];
-            return b[a] = p, b;
+            const g = [...h];
+            return g[a] = p, g;
           }
-        ), m = o.focus(f), [v, C] = g(() => e(m));
-        c.push(C), t.appendChild(v.node);
+        ), b = o.focus(f), [v, C] = m(() => e(b));
+        c.push(C), n.appendChild(v.node);
       }
     };
-    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 };
+    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: n };
   };
 }
-function G(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(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 };
+    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 J(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(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 };
+    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 Q(e, n) {
+function Q(e, t) {
   return (o) => {
-    const t = L(e, o);
-    return n(t);
+    const n = L(e, o);
+    return t(n);
   };
 }
-function X(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 Y(e, n) {
+function Y(e, t) {
   return (o) => {
-    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";
+    const n = document.createElement("div");
+    n.dataset.show = "";
+    const [c, r] = m(() => e(o));
+    n.appendChild(c.node), l(r);
+    const u = (d) => {
+      n.style.display = t(d) ? "" : "none";
     };
-    return d(o.get()), w(o, d), { _tag: "div", node: t };
+    return u(o.get()), w(o, u), { _tag: "div", node: n };
   };
 }
-function Z(e, n) {
+function Z(e, t) {
   return (o) => {
-    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 };
+    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 ee(...e) {
-  return (n) => {
+  return (t) => {
     const o = document.createElement("div");
     o.dataset.stack = "";
-    for (const t of e) {
-      const [c, r] = g(() => t(n));
+    for (const n of e) {
+      const [c, r] = m(() => n(t));
       o.appendChild(c.node), l(r);
     }
     return { _tag: "div", node: o };
   };
 }
-function te(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));
-    const d = {};
-    for (const u of Object.keys(n)) {
-      const s = n[u], a = r.querySelector(`${s}[data-ref="${u}"]`);
+    r.dataset.templ = "", r.appendChild(n.content.cloneNode(!0));
+    const u = {};
+    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 "${u}" not found — expected <${s} data-ref="${u}"> in template`
+          `templ: ref "${d}" not found — expected <${s} data-ref="${d}"> in template`
         );
-      d[u] = { _tag: s, node: a };
+      u[d] = { _tag: s, node: a };
     }
-    return o(c, d), { _tag: "div", node: r };
+    return o(c, u), { _tag: "div", node: r };
   };
 }
-function ne(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 d = /* @__PURE__ */ new Map(), u = (a, f) => {
-    const m = j(f);
+  const u = /* @__PURE__ */ new Map(), d = (a, f) => {
+    const b = j(f);
     let v = !1, C = () => {
     };
-    "set" in e && (C = m.subscribe((b) => {
+    "set" in e && (C = b.subscribe((g) => {
       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 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 [p, h] = g(() => o(m));
+    const [p, h] = m(() => o(b));
     return {
-      itemSignal: m,
+      itemSignal: b,
       childNode: p.node,
       cleanup: () => {
         h(), C();
       },
-      setFromParent: (b) => {
-        v = !0, m.set(b), v = !1;
+      setFromParent: (g) => {
+        v = !0, b.set(g), v = !1;
       }
     };
   }, 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));
+    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], b = a[p];
-      d.has(h) ? d.get(h).setFromParent(b) : d.set(h, u(h, b));
+      const h = f[p], g = a[p];
+      u.has(h) ? u.get(h).setFromParent(g) : u.set(h, d(h, g));
     }
     let v = null;
     for (let p = a.length - 1; p >= 0; p--) {
-      const h = d.get(f[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()), w(e, s), l(() => {
-    for (const a of d.values()) a.cleanup();
+    for (const a of u.values()) a.cleanup();
   }), { _tag: c, node: r };
 }
-function A(e, n, o) {
-  const t = o;
-  e.addEventListener(n, t), l(() => e.removeEventListener(n, t));
+function A(e, t, o) {
+  const n = o;
+  e.addEventListener(t, n), l(() => e.removeEventListener(t, n));
 }
-function S(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 l(c), c;
 }
-function T(e, n) {
-  A(e, "change", () => n.set(e.value)), w(n, (o) => {
+function T(e, t) {
+  A(e, "change", () => t.set(e.value)), w(t, (o) => {
     e.value !== o && (e.value = o);
   });
 }
-function q(e, n) {
-  A(e, "change", () => n.set(e.checked)), w(n, (o) => {
+function q(e, t) {
+  A(e, "change", () => t.set(e.checked)), w(t, (o) => {
     e.checked !== o && (e.checked = o);
   });
 }
-function oe(e, n) {
-  n(e.get()), l(e.subscribe(n));
+function oe(e, t) {
+  t(e.get()), l(e.subscribe(t));
 }
-function ce(e, n) {
-  e.textContent = n.get(), l(n.subscribe((o) => {
+function ce(e, t) {
+  e.textContent = t.get(), l(t.subscribe((o) => {
     e.textContent = o;
   }));
 }
-function re(e, n, o) {
-  e.setAttribute(n, o.get()), l(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 de(e, n, o) {
-  e.classList.toggle(n, o.get()), l(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 ue(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 ie(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 ae(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 d = (u) => {
-      const s = u[e];
+    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 f = o.narrow($(e, s));
-      let m;
-      [m, c] = g(
+      let b;
+      [b, c] = m(
         () => a(f)
-      ), t.appendChild(m.node);
+      ), n.appendChild(b.node);
     };
-    return w(o, d), d(o.get()), l(() => 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 se(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();
-    let d = null;
+    n !== null && (n(), n = null), o.replaceChildren();
+    let u = null;
     switch (r.status) {
       case "notAsked":
-        d = n.notAsked ?? null;
+        u = t.notAsked ?? null;
         break;
       case "loading":
-        d = n.loading ?? null;
+        u = t.loading ?? null;
         break;
       case "failure":
-        d = n.failure ? () => n.failure(r.error) : null;
+        u = t.failure ? () => t.failure(r.error) : null;
         break;
       case "success":
-        d = n.success ? () => n.success(r.value) : null;
+        u = t.success ? () => t.success(r.value) : null;
         break;
     }
-    if (d !== null) {
-      let u;
-      [u, t] = g(d), o.appendChild(u.node);
+    if (u !== null) {
+      let d;
+      [d, n] = m(u), o.appendChild(d.node);
     }
   };
-  return c(e.get()), l(e.subscribe(c)), l(() => 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 le(e) {
-  return (n) => {
-    const o = n, t = _(e ?? {});
-    return t.node.value = o.get(), S(t.node, o), t;
+  return (t) => {
+    const o = t, n = _(e ?? {});
+    return n.node.value = o.get(), S(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;
+  return (t) => {
+    const o = t, n = O(e ?? {});
+    return n.node.value = o.get(), S(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;
+  return (t) => {
+    const o = t, n = _({ ...e, type: "checkbox" });
+    return n.node.checked = o.get(), q(n.node, o), n;
   };
 }
 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;
+  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);
-    }), w(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 ge(e, n) {
+function me(e, t) {
   return (o) => {
-    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;
+    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 (n, ...o) => (t) => {
+  return (t, ...o) => (n) => {
     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, 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(t).node) : typeof r == "string" ? c.appendChild(document.createTextNode(r)) : c.appendChild(r.node.cloneNode(!0));
+      typeof r == "function" ? c.appendChild(r(n).node) : c.appendChild(document.createTextNode(r));
     return { _tag: e, node: c };
   };
 }
-const me = {
+const ge = {
   // Sectioning / flow
   div: i("div"),
   section: i("section"),
@@ -378,13 +381,13 @@ const me = {
   form: i("form"),
   fieldset: i("fieldset")
 };
-function be(e, n, o, t) {
-  const c = o(n.get());
+function ve(e, t, o, n) {
+  const c = o(t.get());
   if (c === void 0) {
     e.remove();
     return;
   }
-  const r = c(t ?? n);
+  const r = c(n ?? t);
   e.replaceWith(r.node);
 }
 export {
@@ -392,7 +395,7 @@ export {
   G as beside,
   re as bindAttr,
   q as bindCheckbox,
-  de as bindClass,
+  ue as bindClass,
   S as bindInput,
   T as bindSelect,
   ie as bindShow,
@@ -404,8 +407,9 @@ export {
   ne as eachKeyed,
   P as focus,
   se as foldWidget,
-  me as h,
+  ge as h,
   le as inputWidget,
+  be as lift,
   X as map,
   ae as match,
   R as mount,
@@ -414,14 +418,14 @@ export {
   A as on,
   U as prop,
   H as register,
-  ge as selectWidget,
+  me as selectWidget,
   Y as show,
-  be as slot,
+  ve as slot,
   ee as stack,
   w as subscribe,
   oe as subscribeNow,
   te as template,
   fe as textareaWidget,
-  ue as watchAll,
+  de as watchAll,
   V as withScope
 };

package/package.json

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