@rhi-zone/rainbow-ui 0.2.0-alpha.0

package/dist/widget.js

@@ -0,0 +1,347 @@
+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, () => {
+    for (const c of o) c();
+  }];
+}
+function K(e) {
+  return b(e);
+}
+function w(e, t) {
+  i(e.subscribe(t));
+}
+function M(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, t) {
+  return (o) => e(o.focus(t));
+}
+function H(e, t) {
+  return (o) => {
+    const n = document.createElement("div");
+    n.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);
+    };
+    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 };
+  };
+}
+function R(e) {
+  return (t) => {
+    const o = t, n = document.createElement("div");
+    n.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;
+          }
+        ), m = o.focus(p), [g, v] = b(() => e(m));
+        c.push(v), n.appendChild(g.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 };
+  };
+}
+function U(e, t) {
+  return (o) => {
+    const n = 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 };
+  };
+}
+function V(e, t) {
+  return (o) => {
+    const n = 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 };
+  };
+}
+function z(e, t) {
+  return (o) => {
+    const n = S(e, o);
+    return t(n);
+  };
+}
+function D(e, t) {
+  return (o) => {
+    const n = o.narrow(t);
+    return e(n);
+  };
+}
+function G(e, t) {
+  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";
+    };
+    return u(o.get()), w(o, u), { _tag: "div", node: n };
+  };
+}
+function J(e, t) {
+  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 };
+  };
+}
+function Q(...e) {
+  return (t) => {
+    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);
+    }
+    return { _tag: "div", node: o };
+  };
+}
+function X(e, t, o) {
+  const n = document.createElement("template");
+  return n.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)
+        throw new Error(
+          `templ: ref "${d}" not found — expected <${a} data-ref="${d}"> in template`
+        );
+      u[d] = { _tag: a, node: s };
+    }
+    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);
+  r.dataset.eachKeyed = "";
+  const u = /* @__PURE__ */ new Map(), d = (s, p) => {
+    const m = W(p);
+    let g = !1, v = () => {
+    };
+    "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);
+      }
+    }));
+    const [l, f] = b(() => o(m));
+    return {
+      itemSignal: m,
+      childNode: l.node,
+      cleanup: () => {
+        f(), v();
+      },
+      setFromParent: (h) => {
+        g = !0, m.set(h), g = !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));
+    }
+    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;
+    }
+  };
+  return a(e.get()), w(e, a), i(() => {
+    for (const s of u.values()) s.cleanup();
+  }), { _tag: c, node: r };
+}
+function A(e, t, o) {
+  const n = o;
+  e.addEventListener(t, n), i(() => e.removeEventListener(t, n));
+}
+function _(e, t) {
+  e.value = t.get();
+  const o = () => t.set(e.value);
+  e.addEventListener("input", o);
+  const n = t.subscribe((r) => {
+    e.value !== r && (e.value = r);
+  }), c = () => {
+    e.removeEventListener("input", o), n();
+  };
+  return i(c), c;
+}
+function I(e, t) {
+  A(e, "change", () => t.set(e.value)), w(t, (o) => {
+    e.value !== o && (e.value = o);
+  });
+}
+function P(e, t) {
+  A(e, "change", () => t.set(e.checked)), w(t, (o) => {
+    e.checked !== o && (e.checked = o);
+  });
+}
+function Z(e, t) {
+  t(e.get()), i(e.subscribe(t));
+}
+function ee(e, t) {
+  e.textContent = t.get(), i(t.subscribe((o) => {
+    e.textContent = o;
+  }));
+}
+function ne(e, t, o) {
+  e.setAttribute(t, o.get()), i(o.subscribe((n) => {
+    e.setAttribute(t, n);
+  }));
+}
+function te(e, t, o) {
+  e.classList.toggle(t, o.get()), i(o.subscribe((n) => {
+    e.classList.toggle(t, n);
+  }));
+}
+function oe(e, t) {
+  t();
+  const o = e.map((n) => n.subscribe(t));
+  return () => {
+    for (const n of o) n();
+  };
+}
+function ce(e, t) {
+  return e.style.display = t.get() ? "" : "none", t.subscribe((o) => {
+    e.style.display = o ? "" : "none";
+  });
+}
+function re(e, t) {
+  const o = document.createElement("div");
+  o.dataset.foldWidget = "";
+  let n = null;
+  const c = (r) => {
+    n !== null && (n(), n = null), o.replaceChildren();
+    let u = null;
+    switch (r.status) {
+      case "notAsked":
+        u = t.notAsked ?? null;
+        break;
+      case "loading":
+        u = t.loading ?? null;
+        break;
+      case "failure":
+        u = t.failure ? () => t.failure(r.error) : null;
+        break;
+      case "success":
+        u = t.success ? () => t.success(r.value) : null;
+        break;
+    }
+    if (u !== null) {
+      let d;
+      [d, n] = b(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;
+  };
+}
+function de(e) {
+  return (t) => {
+    const o = t, n = F(e ?? {});
+    return n.node.value = o.get(), _(n.node, o), n;
+  };
+}
+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 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;
+      isNaN(c) || o.set(c);
+    }), w(t, (c) => {
+      n.node.valueAsNumber !== c && (n.node.value = String(c));
+    }), n;
+  };
+}
+function ae(e, t) {
+  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;
+  };
+}
+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,
+  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
+};

package/dist/widget.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Widget combinator tests.
+ *
+ * Uses happy-dom (via vitest) for a lightweight DOM environment.
+ * All tests share a single <div id="root"> that is cleared between tests.
+ */
+export {};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@rhi-zone/rainbow-ui",
+  "version": "0.2.0-alpha.0",
+  "description": "Type-safe DOM factories and algebraic widget combinators for rainbow",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types":  "./dist/index.d.ts"
+    },
+    "./html": {
+      "import": "./dist/html.js",
+      "types":  "./dist/html.d.ts"
+    },
+    "./widget": {
+      "import": "./dist/widget.js",
+      "types":  "./dist/widget.d.ts"
+    },
+    "./elements": {
+      "import": "./dist/elements.js",
+      "types":  "./dist/elements.d.ts"
+    },
+    "./form-state": {
+      "import": "./dist/form-state.js",
+      "types":  "./dist/form-state.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "dev":       "vite build --watch",
+    "build":     "vite build && tsgo --emitDeclarationOnly",
+    "typecheck": "tsgo --noEmit",
+    "test":      "vitest run"
+  },
+  "dependencies": {
+    "@rhi-zone/rainbow": "workspace:*"
+  },
+  "devDependencies": {
+    "happy-dom": "^16.0.0",
+    "vite":      "^6.0.0",
+    "vitest":    "^2.0.0"
+  }
+}