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

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/package.json

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