sigmx 0.1.0 → 0.2.0

package/dist/plugins/directives/text-content.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/text-content.ts"],
-  "sourcesContent": ["import { attribute } from '../../kernel/index.js'\n\nexport const text = attribute({\n  name: 'text',\n  key: 'forbidden',\n  value: 'required',\n  mount: ({ el, evaluate, effect }) =>\n    effect(() => {\n      el.textContent = String(evaluate() ?? '')\n    }),\n})\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAEnB,MAAM,OAAO,UAAU;AAAA,EAC5B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO,CAAC,EAAE,IAAI,UAAU,OAAO,MAC7B,OAAO,MAAM;AACX,OAAG,cAAc,OAAO,SAAS,KAAK,EAAE;AAAA,EAC1C,CAAC;AACL,CAAC;",
+  "sourcesContent": ["import { dir } from '../def.js';\n\nexport const text = dir('text', 6, ({ el, evaluate, effect }) =>\n  effect(() => {\n    el.textContent = String(evaluate() ?? '');\n  }),\n);\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAEb,MAAM,OAAO;AAAA,EAAI;AAAA,EAAQ;AAAA,EAAG,CAAC,EAAE,IAAI,UAAU,OAAO,MACzD,OAAO,MAAM;AACX,OAAG,cAAc,OAAO,SAAS,KAAK,EAAE;AAAA,EAC1C,CAAC;AACH;",
   "names": []
 }

package/dist/plugins/directives/timer.js

@@ -1,16 +1,10 @@
-import { attribute, toMs, withViewTransition } from "../../kernel/index.js";
-const onInterval = attribute({
-  name: "on-interval",
-  key: "forbidden",
-  value: "required",
-  returns: false,
-  mount({ mods, evaluate }) {
-    const d = mods.get("duration");
-    const run = withViewTransition(() => evaluate(), mods);
-    if (d?.includes("leading")) run();
-    const id = setInterval(run, toMs(d, 1e3));
-    return () => clearInterval(id);
-  }
+import { toMs } from "../../kernel/index.js";
+import { dir } from "../def.js";
+const onInterval = dir("on-interval", 22, ({ mods, evaluate }) => {
+  const d = mods.get("duration");
+  const run = () => evaluate();
+  const id = setInterval(run, toMs(d, 1e3));
+  return () => clearInterval(id);
 });
 export {
   onInterval

package/dist/plugins/directives/timer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/timer.ts"],
-  "sourcesContent": ["import { attribute, toMs, withViewTransition } from '../../kernel/index.js'\n\n/** `on-interval__duration.5s.leading=\"expr\"`. Default one second. */\nexport const onInterval = attribute({\n  name: 'on-interval',\n  key: 'forbidden',\n  value: 'required',\n  returns: false,\n  mount({ mods, evaluate }) {\n    const d = mods.get('duration')\n    const run = withViewTransition(() => evaluate(), mods)\n    if (d?.includes('leading')) run()\n    const id = setInterval(run, toMs(d, 1000))\n    return () => clearInterval(id)\n  },\n})\n"],
-  "mappings": "AAAA,SAAS,WAAW,MAAM,0BAA0B;AAG7C,MAAM,aAAa,UAAU;AAAA,EAClC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM,EAAE,MAAM,SAAS,GAAG;AACxB,UAAM,IAAI,KAAK,IAAI,UAAU;AAC7B,UAAM,MAAM,mBAAmB,MAAM,SAAS,GAAG,IAAI;AACrD,QAAI,GAAG,SAAS,SAAS,EAAG,KAAI;AAChC,UAAM,KAAK,YAAY,KAAK,KAAK,GAAG,GAAI,CAAC;AACzC,WAAO,MAAM,cAAc,EAAE;AAAA,EAC/B;AACF,CAAC;",
+  "sourcesContent": ["import { toMs } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\n/** `on-interval__duration.5s.leading=\"expr\"`. Default one second. */\nexport const onInterval = dir('on-interval', 22, ({ mods, evaluate }) => {\n  const d = mods.get('duration');\n  const run = () => evaluate();\n  const id = setInterval(run, toMs(d, 1000));\n  return () => clearInterval(id);\n});\n"],
+  "mappings": "AAAA,SAAS,YAAY;AACrB,SAAS,WAAW;AAGb,MAAM,aAAa,IAAI,eAAe,IAAI,CAAC,EAAE,MAAM,SAAS,MAAM;AACvE,QAAM,IAAI,KAAK,IAAI,UAAU;AAC7B,QAAM,MAAM,MAAM,SAAS;AAC3B,QAAM,KAAK,YAAY,KAAK,KAAK,GAAG,GAAI,CAAC;AACzC,SAAO,MAAM,cAAc,EAAE;AAC/B,CAAC;",
   "names": []
 }

package/dist/plugins/directives/transition.d.ts

@@ -1,5 +1,4 @@
 /**
- * Shows and hides with a fade (and optional scale): `transition="$open"`.
- * Modifiers: `__duration.200ms`, `__scale` (from 95%) or `__scale.90`, `__origin.top`.
+ * Shows and hides with a fade: `transition="$open"`. Modifier: `__duration.200ms`.
  */
 export declare const transition: import("../../kernel/contracts.js").AttributePlugin;

package/dist/plugins/directives/transition.js

@@ -1,38 +1,36 @@
-import { attribute, toMs } from "../../kernel/index.js";
-const transition = attribute({
-  name: "transition",
-  key: "forbidden",
-  value: "required",
-  mount({ el, mods, evaluate, effect }) {
-    const style = el.style;
-    const duration = matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : toMs(mods.get("duration"), 200);
-    const scale = mods.has("scale") ? +(mods.get("scale")?.[0] ?? 95) / 100 : 1;
-    const origin = mods.get("origin")?.join(" ");
-    if (origin) style.transformOrigin = origin;
-    const hidden = { opacity: 0, transform: `scale(${scale})` };
-    const shown = { opacity: 1, transform: "scale(1)" };
-    const initial = style.display === "none" ? "" : style.display;
-    let anim;
-    let first = true;
-    let last;
-    effect(() => {
-      const open = !!evaluate();
-      if (open === last) return;
-      last = open;
+import { toMs } from "../../kernel/index.js";
+import { dir } from "../def.js";
+const transition = dir("transition", 6, ({ el, mods, evaluate, effect, cleanup }) => {
+  const style = el.style;
+  const duration = matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : toMs(mods.get("duration"), 200);
+  const hidden = { opacity: 0 };
+  const shown = { opacity: 1 };
+  const own = style.display;
+  const initial = own === "none" ? "" : own;
+  let anim;
+  let first = true;
+  let last;
+  effect(() => {
+    const open = !!evaluate();
+    if (open === last) return;
+    last = open;
+    anim?.cancel();
+    if (first || !el.animate) {
+      first = false;
+      style.display = open ? initial : "none";
+      return;
+    }
+    if (open) style.display = initial;
+    anim = el.animate(open ? [hidden, shown] : [shown, hidden], { duration, easing: "ease-out", fill: "forwards" });
+    anim.onfinish = () => {
       anim?.cancel();
-      if (first) {
-        first = false;
-        style.display = open ? initial : "none";
-        return;
-      }
-      if (open) style.display = initial;
-      anim = el.animate(open ? [hidden, shown] : [shown, hidden], { duration, easing: "ease-out", fill: "forwards" });
-      anim.onfinish = () => {
-        anim?.cancel();
-        if (!open) style.display = "none";
-      };
-    });
-  }
+      if (!open) style.display = "none";
+    };
+  });
+  cleanup(() => {
+    anim?.cancel();
+    style.display = own;
+  });
 });
 export {
   transition

package/dist/plugins/directives/transition.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/transition.ts"],
-  "sourcesContent": ["import { attribute, toMs } from '../../kernel/index.js'\n\n/**\n * Shows and hides with a fade (and optional scale): `transition=\"$open\"`.\n * Modifiers: `__duration.200ms`, `__scale` (from 95%) or `__scale.90`, `__origin.top`.\n */\nexport const transition = attribute({\n  name: 'transition',\n  key: 'forbidden',\n  value: 'required',\n  mount({ el, mods, evaluate, effect }) {\n    const style = (el as HTMLElement).style\n    const duration = matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : toMs(mods.get('duration'), 200)\n    const scale = mods.has('scale') ? +(mods.get('scale')?.[0] ?? 95) / 100 : 1\n    const origin = mods.get('origin')?.join(' ')\n    if (origin) style.transformOrigin = origin\n    const hidden = { opacity: 0, transform: `scale(${scale})` }\n    const shown = { opacity: 1, transform: 'scale(1)' }\n    const initial = style.display === 'none' ? '' : style.display\n    let anim: Animation | undefined\n    let first = true\n    let last: boolean | undefined\n    effect(() => {\n      const open = !!evaluate()\n      if (open === last) return // a dependency changed but the outcome did not: leave the element alone\n      last = open\n      anim?.cancel()\n      if (first) {\n        first = false\n        style.display = open ? initial : 'none'\n        return\n      }\n      if (open) style.display = initial\n      anim = el.animate(open ? [hidden, shown] : [shown, hidden], { duration, easing: 'ease-out', fill: 'forwards' })\n      anim.onfinish = () => {\n        anim?.cancel()\n        if (!open) style.display = 'none'\n      }\n    })\n  },\n})\n"],
-  "mappings": "AAAA,SAAS,WAAW,YAAY;AAMzB,MAAM,aAAa,UAAU;AAAA,EAClC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM,EAAE,IAAI,MAAM,UAAU,OAAO,GAAG;AACpC,UAAM,QAAS,GAAmB;AAClC,UAAM,WAAW,WAAW,kCAAkC,EAAE,UAAU,IAAI,KAAK,KAAK,IAAI,UAAU,GAAG,GAAG;AAC5G,UAAM,QAAQ,KAAK,IAAI,OAAO,IAAI,EAAE,KAAK,IAAI,OAAO,IAAI,CAAC,KAAK,MAAM,MAAM;AAC1E,UAAM,SAAS,KAAK,IAAI,QAAQ,GAAG,KAAK,GAAG;AAC3C,QAAI,OAAQ,OAAM,kBAAkB;AACpC,UAAM,SAAS,EAAE,SAAS,GAAG,WAAW,SAAS,KAAK,IAAI;AAC1D,UAAM,QAAQ,EAAE,SAAS,GAAG,WAAW,WAAW;AAClD,UAAM,UAAU,MAAM,YAAY,SAAS,KAAK,MAAM;AACtD,QAAI;AACJ,QAAI,QAAQ;AACZ,QAAI;AACJ,WAAO,MAAM;AACX,YAAM,OAAO,CAAC,CAAC,SAAS;AACxB,UAAI,SAAS,KAAM;AACnB,aAAO;AACP,YAAM,OAAO;AACb,UAAI,OAAO;AACT,gBAAQ;AACR,cAAM,UAAU,OAAO,UAAU;AACjC;AAAA,MACF;AACA,UAAI,KAAM,OAAM,UAAU;AAC1B,aAAO,GAAG,QAAQ,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,OAAO,MAAM,GAAG,EAAE,UAAU,QAAQ,YAAY,MAAM,WAAW,CAAC;AAC9G,WAAK,WAAW,MAAM;AACpB,cAAM,OAAO;AACb,YAAI,CAAC,KAAM,OAAM,UAAU;AAAA,MAC7B;AAAA,IACF,CAAC;AAAA,EACH;AACF,CAAC;",
+  "sourcesContent": ["import { toMs } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\n/**\n * Shows and hides with a fade: `transition=\"$open\"`. Modifier: `__duration.200ms`.\n */\nexport const transition = dir('transition', 6, ({ el, mods, evaluate, effect, cleanup }) => {\n  const style = (el as HTMLElement).style;\n  const duration = matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : toMs(mods.get('duration'), 200);\n  const hidden = { opacity: 0 };\n  const shown = { opacity: 1 };\n  const own = style.display;\n  const initial = own === 'none' ? '' : own;\n  let anim: Animation | undefined;\n  let first = true;\n  let last: boolean | undefined;\n  effect(() => {\n    const open = !!evaluate();\n    if (open === last) return; // a dependency changed but the outcome did not: leave the element alone\n    last = open;\n    anim?.cancel();\n    if (first || !el.animate) {\n      first = false;\n      style.display = open ? initial : 'none';\n      return;\n    }\n    if (open) style.display = initial;\n    anim = el.animate(open ? [hidden, shown] : [shown, hidden], { duration, easing: 'ease-out', fill: 'forwards' });\n    anim.onfinish = () => {\n      anim?.cancel();\n      if (!open) style.display = 'none';\n    };\n  });\n  cleanup(() => {\n    anim?.cancel();\n    style.display = own; // the element's own inline display comes back when the directive goes\n  });\n});\n"],
+  "mappings": "AAAA,SAAS,YAAY;AACrB,SAAS,WAAW;AAKb,MAAM,aAAa,IAAI,cAAc,GAAG,CAAC,EAAE,IAAI,MAAM,UAAU,QAAQ,QAAQ,MAAM;AAC1F,QAAM,QAAS,GAAmB;AAClC,QAAM,WAAW,WAAW,kCAAkC,EAAE,UAAU,IAAI,KAAK,KAAK,IAAI,UAAU,GAAG,GAAG;AAC5G,QAAM,SAAS,EAAE,SAAS,EAAE;AAC5B,QAAM,QAAQ,EAAE,SAAS,EAAE;AAC3B,QAAM,MAAM,MAAM;AAClB,QAAM,UAAU,QAAQ,SAAS,KAAK;AACtC,MAAI;AACJ,MAAI,QAAQ;AACZ,MAAI;AACJ,SAAO,MAAM;AACX,UAAM,OAAO,CAAC,CAAC,SAAS;AACxB,QAAI,SAAS,KAAM;AACnB,WAAO;AACP,UAAM,OAAO;AACb,QAAI,SAAS,CAAC,GAAG,SAAS;AACxB,cAAQ;AACR,YAAM,UAAU,OAAO,UAAU;AACjC;AAAA,IACF;AACA,QAAI,KAAM,OAAM,UAAU;AAC1B,WAAO,GAAG,QAAQ,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,OAAO,MAAM,GAAG,EAAE,UAAU,QAAQ,YAAY,MAAM,WAAW,CAAC;AAC9G,SAAK,WAAW,MAAM;AACpB,YAAM,OAAO;AACb,UAAI,CAAC,KAAM,OAAM,UAAU;AAAA,IAC7B;AAAA,EACF,CAAC;AACD,UAAQ,MAAM;AACZ,UAAM,OAAO;AACb,UAAM,UAAU;AAAA,EAClB,CAAC;AACH,CAAC;",
   "names": []
 }

package/dist/plugins/directives/tween.d.ts

@@ -1,6 +1,6 @@
 /**
- * `animate:opacity="$open ? 1 : 0"` tweens a numeric CSS property (or attribute, for SVG) from its
+ * `animate:opacity="$open ? 1 : 0"` tweens a numeric CSS property from its
  * current value to the expression's value whenever the expression changes.
- * Modifiers: `__duration.300ms`, `__easing.ease-in-out`. Non-numeric values apply immediately.
+ * `__duration.300ms` sets the length; the tween eases out. Non-numeric values apply immediately.
  */
 export declare const animate: import("../../kernel/contracts.js").AttributePlugin;

package/dist/plugins/directives/tween.js

@@ -1,56 +1,40 @@
-import { attribute, toMs } from "../../kernel/index.js";
-const easings = {
-  linear: (t) => t,
-  "ease-in": (t) => t * t,
-  "ease-out": (t) => 1 - (1 - t) * (1 - t),
-  "ease-in-out": (t) => t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2
-};
+import { toMs } from "../../kernel/index.js";
+import { dir } from "../def.js";
 const num = (s) => {
   const m = /^\s*(-?\d*\.?\d+)([a-z%]*)\s*$/i.exec(s);
-  return m ? { n: +m[1], unit: m[2] } : void 0;
+  return m ? [+m[1], m[2]] : void 0;
 };
-const animate = attribute({
-  name: "animate",
-  key: "required",
-  value: "required",
-  mount({ el, mods, cased, evaluate, effect, cleanup }) {
-    const prop = cased("kebab");
-    const css = CSS.supports(prop, "inherit");
-    const duration = toMs(mods.get("duration"), 300);
-    const ease = easings[mods.get("easing")?.[0] ?? "ease-out"] ?? easings["ease-out"];
-    const instant = matchMedia("(prefers-reduced-motion: reduce)").matches;
-    const read = () => css ? el.style.getPropertyValue(prop) || getComputedStyle(el).getPropertyValue(prop) : el.getAttribute(prop) ?? "";
-    const write = (v) => css ? el.style.setProperty(prop, v) : el.setAttribute(prop, v);
-    let frame = 0;
-    let first = true;
-    let last;
-    effect(() => {
-      const to = String(evaluate());
-      if (to === last) return;
-      last = to;
-      cancelAnimationFrame(frame);
-      let from = num(read());
-      const target = num(to);
-      if (from && target && from.unit === "px" && target.unit === "%" && (prop === "width" || prop === "height") && el.parentElement) {
-        const size = prop === "width" ? el.parentElement.clientWidth : el.parentElement.clientHeight;
-        if (size) from = { n: from.n / size * 100, unit: "%" };
-      }
-      if (first || instant || !from || !target || from.unit !== target.unit) {
-        first = false;
-        return write(to);
-      }
-      const a = from.n;
-      const b = target.n;
-      const start = performance.now();
-      const tick = (now) => {
-        const p = Math.min(1, (now - start) / duration);
-        write(`${a + (b - a) * ease(p)}${target.unit}`);
-        if (p < 1) frame = requestAnimationFrame(tick);
-      };
-      frame = requestAnimationFrame(tick);
-    });
-    cleanup(() => cancelAnimationFrame(frame));
-  }
+const animate = dir("animate", 5, ({ el, mods, cased, evaluate, effect, cleanup }) => {
+  const prop = cased("kebab");
+  const duration = toMs(mods.get("duration"), 300);
+  const instant = matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const read = () => el.style.getPropertyValue(prop) || getComputedStyle(el).getPropertyValue(prop);
+  const write = (v) => el.style.setProperty(prop, v);
+  let frame = 0;
+  let first = true;
+  let last;
+  effect(() => {
+    const to = String(evaluate());
+    if (to === last) return;
+    last = to;
+    cancelAnimationFrame(frame);
+    const from = num(read());
+    const target = num(to);
+    if (first || instant || duration <= 0 || !from || !target || from[1] !== target[1]) {
+      first = false;
+      return write(to);
+    }
+    const [a, unit] = from;
+    const b = target[0];
+    const start = performance.now();
+    const tick = (now) => {
+      const p = Math.min(1, (now - start) / duration);
+      write(`${a + (b - a) * (1 - (1 - p) ** 2)}${unit}`);
+      if (p < 1) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+  });
+  cleanup(() => cancelAnimationFrame(frame));
 });
 export {
   animate

package/dist/plugins/directives/tween.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/tween.ts"],
-  "sourcesContent": ["import { attribute, toMs } from '../../kernel/index.js'\n\nconst easings: Record<string, (t: number) => number> = {\n  linear: (t) => t,\n  'ease-in': (t) => t * t,\n  'ease-out': (t) => 1 - (1 - t) * (1 - t),\n  'ease-in-out': (t) => (t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2),\n}\nconst num = (s: string): { n: number; unit: string } | undefined => {\n  const m = /^\\s*(-?\\d*\\.?\\d+)([a-z%]*)\\s*$/i.exec(s)\n  return m ? { n: +m[1], unit: m[2] } : undefined\n}\n\n/**\n * `animate:opacity=\"$open ? 1 : 0\"` tweens a numeric CSS property (or attribute, for SVG) from its\n * current value to the expression's value whenever the expression changes.\n * Modifiers: `__duration.300ms`, `__easing.ease-in-out`. Non-numeric values apply immediately.\n */\nexport const animate = attribute({\n  name: 'animate',\n  key: 'required',\n  value: 'required',\n  mount({ el, mods, cased, evaluate, effect, cleanup }) {\n    const prop = cased('kebab')\n    const css = CSS.supports(prop, 'inherit')\n    const duration = toMs(mods.get('duration'), 300)\n    const ease = easings[mods.get('easing')?.[0] ?? 'ease-out'] ?? easings['ease-out']\n    const instant = matchMedia('(prefers-reduced-motion: reduce)').matches\n    // Prefer the inline value (which this directive wrote last time); computed styles report px only.\n    const read = () => (css ? el.style.getPropertyValue(prop) || getComputedStyle(el).getPropertyValue(prop) : (el.getAttribute(prop) ?? ''))\n    const write = (v: string) => (css ? el.style.setProperty(prop, v) : el.setAttribute(prop, v))\n    let frame = 0\n    let first = true\n    let last: string | undefined\n    effect(() => {\n      const to = String(evaluate())\n      if (to === last) return\n      last = to\n      cancelAnimationFrame(frame)\n      let from = num(read())\n      const target = num(to)\n      // A px start and a % target are common for width/height: convert against the parent box.\n      if (from && target && from.unit === 'px' && target.unit === '%' && (prop === 'width' || prop === 'height') && el.parentElement) {\n        const size = prop === 'width' ? el.parentElement.clientWidth : el.parentElement.clientHeight\n        if (size) from = { n: (from.n / size) * 100, unit: '%' }\n      }\n      if (first || instant || !from || !target || from.unit !== target.unit) {\n        first = false\n        return write(to)\n      }\n      const a = from.n\n      const b = target.n\n      const start = performance.now()\n      const tick = (now: number) => {\n        const p = Math.min(1, (now - start) / duration)\n        write(`${a + (b - a) * ease(p)}${target.unit}`)\n        if (p < 1) frame = requestAnimationFrame(tick)\n      }\n      frame = requestAnimationFrame(tick)\n    })\n    cleanup(() => cancelAnimationFrame(frame))\n  },\n})\n"],
-  "mappings": "AAAA,SAAS,WAAW,YAAY;AAEhC,MAAM,UAAiD;AAAA,EACrD,QAAQ,CAAC,MAAM;AAAA,EACf,WAAW,CAAC,MAAM,IAAI;AAAA,EACtB,YAAY,CAAC,MAAM,KAAK,IAAI,MAAM,IAAI;AAAA,EACtC,eAAe,CAAC,MAAO,IAAI,MAAM,IAAI,IAAI,IAAI,KAAK,KAAK,IAAI,MAAM,IAAI;AACvE;AACA,MAAM,MAAM,CAAC,MAAuD;AAClE,QAAM,IAAI,kCAAkC,KAAK,CAAC;AAClD,SAAO,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,IAAI;AACxC;AAOO,MAAM,UAAU,UAAU;AAAA,EAC/B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM,EAAE,IAAI,MAAM,OAAO,UAAU,QAAQ,QAAQ,GAAG;AACpD,UAAM,OAAO,MAAM,OAAO;AAC1B,UAAM,MAAM,IAAI,SAAS,MAAM,SAAS;AACxC,UAAM,WAAW,KAAK,KAAK,IAAI,UAAU,GAAG,GAAG;AAC/C,UAAM,OAAO,QAAQ,KAAK,IAAI,QAAQ,IAAI,CAAC,KAAK,UAAU,KAAK,QAAQ,UAAU;AACjF,UAAM,UAAU,WAAW,kCAAkC,EAAE;AAE/D,UAAM,OAAO,MAAO,MAAM,GAAG,MAAM,iBAAiB,IAAI,KAAK,iBAAiB,EAAE,EAAE,iBAAiB,IAAI,IAAK,GAAG,aAAa,IAAI,KAAK;AACrI,UAAM,QAAQ,CAAC,MAAe,MAAM,GAAG,MAAM,YAAY,MAAM,CAAC,IAAI,GAAG,aAAa,MAAM,CAAC;AAC3F,QAAI,QAAQ;AACZ,QAAI,QAAQ;AACZ,QAAI;AACJ,WAAO,MAAM;AACX,YAAM,KAAK,OAAO,SAAS,CAAC;AAC5B,UAAI,OAAO,KAAM;AACjB,aAAO;AACP,2BAAqB,KAAK;AAC1B,UAAI,OAAO,IAAI,KAAK,CAAC;AACrB,YAAM,SAAS,IAAI,EAAE;AAErB,UAAI,QAAQ,UAAU,KAAK,SAAS,QAAQ,OAAO,SAAS,QAAQ,SAAS,WAAW,SAAS,aAAa,GAAG,eAAe;AAC9H,cAAM,OAAO,SAAS,UAAU,GAAG,cAAc,cAAc,GAAG,cAAc;AAChF,YAAI,KAAM,QAAO,EAAE,GAAI,KAAK,IAAI,OAAQ,KAAK,MAAM,IAAI;AAAA,MACzD;AACA,UAAI,SAAS,WAAW,CAAC,QAAQ,CAAC,UAAU,KAAK,SAAS,OAAO,MAAM;AACrE,gBAAQ;AACR,eAAO,MAAM,EAAE;AAAA,MACjB;AACA,YAAM,IAAI,KAAK;AACf,YAAM,IAAI,OAAO;AACjB,YAAM,QAAQ,YAAY,IAAI;AAC9B,YAAM,OAAO,CAAC,QAAgB;AAC5B,cAAM,IAAI,KAAK,IAAI,IAAI,MAAM,SAAS,QAAQ;AAC9C,cAAM,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,GAAG,OAAO,IAAI,EAAE;AAC9C,YAAI,IAAI,EAAG,SAAQ,sBAAsB,IAAI;AAAA,MAC/C;AACA,cAAQ,sBAAsB,IAAI;AAAA,IACpC,CAAC;AACD,YAAQ,MAAM,qBAAqB,KAAK,CAAC;AAAA,EAC3C;AACF,CAAC;",
+  "sourcesContent": ["import { toMs } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\n/** '12.5px' \u2192 [12.5, 'px']; undefined when not numeric. */\nconst num = (s: string): [number, string] | undefined => {\n  const m = /^\\s*(-?\\d*\\.?\\d+)([a-z%]*)\\s*$/i.exec(s);\n  return m ? [+m[1], m[2]] : undefined;\n};\n\n/**\n * `animate:opacity=\"$open ? 1 : 0\"` tweens a numeric CSS property from its\n * current value to the expression's value whenever the expression changes.\n * `__duration.300ms` sets the length; the tween eases out. Non-numeric values apply immediately.\n */\nexport const animate = dir('animate', 5, ({ el, mods, cased, evaluate, effect, cleanup }) => {\n  const prop = cased('kebab');\n  const duration = toMs(mods.get('duration'), 300);\n  const instant = matchMedia('(prefers-reduced-motion: reduce)').matches;\n  // Prefer the inline value (which this directive wrote last time); computed styles report px only.\n  const read = () => el.style.getPropertyValue(prop) || getComputedStyle(el).getPropertyValue(prop);\n  const write = (v: string) => el.style.setProperty(prop, v);\n  let frame = 0;\n  let first = true;\n  let last: string | undefined;\n  effect(() => {\n    const to = String(evaluate());\n    if (to === last) return;\n    last = to;\n    cancelAnimationFrame(frame);\n    const from = num(read());\n    const target = num(to);\n    if (first || instant || duration <= 0 || !from || !target || from[1] !== target[1]) {\n      first = false;\n      return write(to);\n    }\n    const [a, unit] = from;\n    const b = target[0];\n    const start = performance.now();\n    const tick = (now: number) => {\n      const p = Math.min(1, (now - start) / duration);\n      write(`${a + (b - a) * (1 - (1 - p) ** 2)}${unit}`);\n      if (p < 1) frame = requestAnimationFrame(tick);\n    };\n    frame = requestAnimationFrame(tick);\n  });\n  cleanup(() => cancelAnimationFrame(frame));\n});\n"],
+  "mappings": "AAAA,SAAS,YAAY;AACrB,SAAS,WAAW;AAGpB,MAAM,MAAM,CAAC,MAA4C;AACvD,QAAM,IAAI,kCAAkC,KAAK,CAAC;AAClD,SAAO,IAAI,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI;AAC7B;AAOO,MAAM,UAAU,IAAI,WAAW,GAAG,CAAC,EAAE,IAAI,MAAM,OAAO,UAAU,QAAQ,QAAQ,MAAM;AAC3F,QAAM,OAAO,MAAM,OAAO;AAC1B,QAAM,WAAW,KAAK,KAAK,IAAI,UAAU,GAAG,GAAG;AAC/C,QAAM,UAAU,WAAW,kCAAkC,EAAE;AAE/D,QAAM,OAAO,MAAM,GAAG,MAAM,iBAAiB,IAAI,KAAK,iBAAiB,EAAE,EAAE,iBAAiB,IAAI;AAChG,QAAM,QAAQ,CAAC,MAAc,GAAG,MAAM,YAAY,MAAM,CAAC;AACzD,MAAI,QAAQ;AACZ,MAAI,QAAQ;AACZ,MAAI;AACJ,SAAO,MAAM;AACX,UAAM,KAAK,OAAO,SAAS,CAAC;AAC5B,QAAI,OAAO,KAAM;AACjB,WAAO;AACP,yBAAqB,KAAK;AAC1B,UAAM,OAAO,IAAI,KAAK,CAAC;AACvB,UAAM,SAAS,IAAI,EAAE;AACrB,QAAI,SAAS,WAAW,YAAY,KAAK,CAAC,QAAQ,CAAC,UAAU,KAAK,CAAC,MAAM,OAAO,CAAC,GAAG;AAClF,cAAQ;AACR,aAAO,MAAM,EAAE;AAAA,IACjB;AACA,UAAM,CAAC,GAAG,IAAI,IAAI;AAClB,UAAM,IAAI,OAAO,CAAC;AAClB,UAAM,QAAQ,YAAY,IAAI;AAC9B,UAAM,OAAO,CAAC,QAAgB;AAC5B,YAAM,IAAI,KAAK,IAAI,IAAI,MAAM,SAAS,QAAQ;AAC9C,YAAM,GAAG,KAAK,IAAI,MAAM,KAAK,IAAI,MAAM,EAAE,GAAG,IAAI,EAAE;AAClD,UAAI,IAAI,EAAG,SAAQ,sBAAsB,IAAI;AAAA,IAC/C;AACA,YAAQ,sBAAsB,IAAI;AAAA,EACpC,CAAC;AACD,UAAQ,MAAM,qBAAqB,KAAK,CAAC;AAC3C,CAAC;",
   "names": []
 }

package/dist/plugins/directives/two-way-bind.d.ts

@@ -1,6 +1,6 @@
 /**
  * Two-way binding: `bind:name` or `bind="name"`. Creates the signal from the element when missing.
  * Checkbox groups bind to arrays, radios to the checked value, `select multiple` to arrays.
- * `__prop.value` binds a custom element property; `__event.change` picks the events to listen for.
+ * `__event.change` picks the events to listen for.
  */
 export declare const bind: import("../../kernel/contracts.js").AttributePlugin;

package/dist/plugins/directives/two-way-bind.js

@@ -1,5 +1,5 @@
-import { attribute } from "../../kernel/index.js";
-const adapter = (_read, _write, ..._events) => ({ a: _read, b: _write, c: _events });
+import { dir } from "../def.js";
+const str = (v) => String(v ?? "");
 const readFiles = (input) => Promise.all(
   [...input.files ?? []].map(
     (f) => new Promise((resolve) => {
@@ -9,72 +9,75 @@ const readFiles = (input) => Promise.all(
     })
   )
 );
-const bind = attribute({
-  name: "bind",
-  mount({ el, key, value, cased, mods, store, listen, effect }) {
-    const path = key ? cased() : value.trim();
-    const current = () => store.get(path);
-    const asNumber = (s) => typeof current() === "number" ? +s : s;
-    let a;
-    const prop = mods.get("prop")?.[0];
-    if (prop) {
-      a = adapter(() => el[prop], (v) => el[prop] = v, "input", "change");
-    } else if (el instanceof HTMLInputElement) {
-      const t = el.type;
-      if (t === "checkbox") {
-        const own = el.hasAttribute("value") && el.value !== "on";
-        a = {
-          a: () => {
-            const cur = current();
-            if (Array.isArray(cur)) {
-              const set = new Set(cur);
-              el.checked ? set.add(el.value) : set.delete(el.value);
-              return [...set];
-            }
-            return own ? el.checked ? el.value : "" : el.checked;
-          },
-          b: (v) => {
-            el.checked = Array.isArray(v) ? v.includes(el.value) : own ? v === el.value : !!v;
-          },
-          c: ["input"]
-        };
-      } else if (t === "radio") {
-        if (!el.name) el.name = path;
-        a = adapter(() => el.checked ? asNumber(el.value) : current(), (v) => el.checked = String(v) === el.value, "input");
-      } else if (t === "file") {
-        listen(el, "change", () => readFiles(el).then((files) => store.set(path, files)));
-        return;
-      } else if (t === "number" || t === "range") {
-        a = adapter(() => el.value === "" ? "" : +el.value, (v) => el.value = String(v ?? ""), "input");
-      } else {
-        a = adapter(() => el.value, (v) => el.value = String(v ?? ""), "input");
-      }
-    } else if (el instanceof HTMLSelectElement) {
-      a = {
-        a: () => el.multiple ? [...el.selectedOptions].map((o) => asNumber(o.value)) : asNumber(el.value),
-        b: (v) => {
-          if (el.multiple) for (const o of el.options) o.selected = Array.isArray(v) && v.map(String).includes(o.value);
-          else el.value = String(v ?? "");
-        },
-        c: ["change"]
-      };
-    } else if (el instanceof HTMLTextAreaElement || "value" in el) {
-      a = adapter(() => el.value, (v) => el.value = String(v ?? ""), "input", "change");
-    } else {
-      a = adapter(() => el.getAttribute("value"), (v) => el.setAttribute("value", String(v ?? "")), "change");
-    }
-    if (!store.has(path)) {
-      const initial = a.a();
-      if (initial !== void 0 && initial !== "") store.set(path, initial);
-    }
-    const sync = () => store.set(path, a.a());
-    for (const type of mods.get("event") ?? a.c) listen(el, type, sync);
-    listen(el, "sigmx-prop-change", sync);
-    effect(() => {
-      const v = current();
-      if (v !== void 0) a.b(v);
-    });
+const bind = dir("bind", 0, ({ el, key, value, cased, mods, store, listen, effect }) => {
+  const path = key ? cased() : value.trim();
+  const current = () => store.get(path);
+  const asNumber = (s) => typeof current() === "number" ? +s : s;
+  const input = el;
+  const type = el instanceof HTMLInputElement ? input.type : "";
+  const valued = (_read, ..._events) => ({
+    a: _read,
+    b: (v) => {
+      if (str(v) !== input.value && !input.validity?.badInput) input.value = str(v);
+    },
+    c: _events
+  });
+  let a;
+  if (type === "checkbox") {
+    const own = el.hasAttribute("value") && input.value !== "on";
+    a = {
+      a: () => {
+        const cur = current();
+        if (Array.isArray(cur)) {
+          const set = new Set(cur);
+          input.checked ? set.add(input.value) : set.delete(input.value);
+          return [...set];
+        }
+        return own ? input.checked ? input.value : "" : input.checked;
+      },
+      b: (v) => {
+        input.checked = Array.isArray(v) ? v.includes(input.value) : own ? v === input.value : !!v;
+      },
+      c: ["input"]
+    };
+  } else if (type === "radio") {
+    input.name ||= path;
+    a = {
+      a: () => input.checked ? asNumber(input.value) : current(),
+      b: (v) => input.checked = String(v) === input.value,
+      c: ["input"]
+    };
+  } else if (type === "file") {
+    listen(el, "change", () => readFiles(input).then((files) => store.set(path, files)));
+    return;
+  } else if (type) {
+    const numeric = type === "number" || type === "range";
+    a = valued(() => numeric && input.value !== "" ? +input.value : input.value, "input");
+  } else if (el instanceof HTMLSelectElement) {
+    a = {
+      a: () => el.multiple ? [...el.selectedOptions].map((o) => asNumber(o.value)) : asNumber(el.value),
+      b: (v) => {
+        if (el.multiple) for (const o of el.options) o.selected = Array.isArray(v) && v.map(String).includes(o.value);
+        else el.value = str(v);
+      },
+      c: ["change"]
+    };
+  } else if ("value" in el) {
+    a = valued(() => input.value, "input", "change");
+  } else {
+    a = {
+      a: () => el.getAttribute("value"),
+      b: (v) => el.setAttribute("value", str(v)),
+      c: ["change"]
+    };
   }
+  if (!store.has(path)) {
+    const initial = a.a();
+    if (initial !== void 0 && initial !== "") store.set(path, initial);
+  }
+  const sync = () => store.set(path, a.a());
+  for (const t of [...mods.get("event") ?? a.c, "sigmx-prop-change"]) listen(el, t, sync);
+  effect(() => a.b(current()));
 });
 export {
   bind

package/dist/plugins/directives/two-way-bind.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/two-way-bind.ts"],
-  "sourcesContent": ["import { attribute } from '../../kernel/index.js'\n\ntype Adapter = { _read(): unknown; _write(v: unknown): void; _events: string[] }\nconst adapter = (_read: () => unknown, _write: (v: any) => void, ..._events: string[]): Adapter => ({ _read, _write, _events })\n\nconst readFiles = (input: HTMLInputElement) =>\n  Promise.all(\n    [...(input.files ?? [])].map(\n      (f) =>\n        new Promise<{ name: string; type: string; size: number; contents: string }>((resolve) => {\n          const r = new FileReader()\n          r.onloadend = () =>\n            resolve({ name: f.name, type: f.type, size: f.size, contents: String(r.result).split(',')[1] ?? '' })\n          r.readAsDataURL(f)\n        }),\n    ),\n  )\n\n/**\n * Two-way binding: `bind:name` or `bind=\"name\"`. Creates the signal from the element when missing.\n * Checkbox groups bind to arrays, radios to the checked value, `select multiple` to arrays.\n * `__prop.value` binds a custom element property; `__event.change` picks the events to listen for.\n */\nexport const bind = attribute({\n  name: 'bind',\n  mount({ el, key, value, cased, mods, store, listen, effect }) {\n    const path = key ? cased() : value.trim()\n    const current = () => store.get(path)\n    const asNumber = (s: string) => (typeof current() === 'number' ? +s : s)\n    let a: Adapter\n    const prop = mods.get('prop')?.[0]\n\n    if (prop) {\n      a = adapter(() => (el as any)[prop], (v) => ((el as any)[prop] = v), 'input', 'change')\n    } else if (el instanceof HTMLInputElement) {\n      const t = el.type\n      if (t === 'checkbox') {\n        const own = el.hasAttribute('value') && el.value !== 'on'\n        a = {\n          _read: () => {\n            const cur = current()\n            if (Array.isArray(cur)) {\n              const set = new Set(cur)\n              el.checked ? set.add(el.value) : set.delete(el.value)\n              return [...set]\n            }\n            return own ? (el.checked ? el.value : '') : el.checked\n          },\n          _write: (v) => {\n            el.checked = Array.isArray(v) ? v.includes(el.value) : own ? v === el.value : !!v\n          },\n          _events: ['input'],\n        }\n      } else if (t === 'radio') {\n        if (!el.name) el.name = path\n        a = adapter(() => (el.checked ? asNumber(el.value) : current()), (v) => (el.checked = String(v) === el.value), 'input')\n      } else if (t === 'file') {\n        listen(el, 'change', () => readFiles(el).then((files) => store.set(path, files)))\n        return\n      } else if (t === 'number' || t === 'range') {\n        a = adapter(() => (el.value === '' ? '' : +el.value), (v) => (el.value = String(v ?? '')), 'input')\n      } else {\n        a = adapter(() => el.value, (v) => (el.value = String(v ?? '')), 'input')\n      }\n    } else if (el instanceof HTMLSelectElement) {\n      a = {\n        _read: () => (el.multiple ? [...el.selectedOptions].map((o) => asNumber(o.value)) : asNumber(el.value)),\n        _write: (v) => {\n          if (el.multiple) for (const o of el.options) o.selected = Array.isArray(v) && v.map(String).includes(o.value)\n          else el.value = String(v ?? '')\n        },\n        _events: ['change'],\n      }\n    } else if (el instanceof HTMLTextAreaElement || 'value' in el) {\n      a = adapter(() => (el as any).value, (v) => ((el as any).value = String(v ?? '')), 'input', 'change')\n    } else {\n      a = adapter(() => el.getAttribute('value'), (v) => el.setAttribute('value', String(v ?? '')), 'change')\n    }\n\n    if (!store.has(path)) {\n      const initial = a._read()\n      if (initial !== undefined && initial !== '') store.set(path, initial)\n    }\n    const sync = () => store.set(path, a._read())\n    for (const type of mods.get('event') ?? a._events) listen(el, type, sync)\n    listen(el, 'sigmx-prop-change', sync)\n    effect(() => {\n      const v = current()\n      if (v !== undefined) a._write(v)\n    })\n  },\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { dir } from '../def.js';\n\ntype Adapter = { _read(): unknown; _write(v: unknown): void; _events: string[] };\n\nconst str = (v: unknown) => String(v ?? '');\n\nconst readFiles = (input: HTMLInputElement) =>\n  Promise.all(\n    [...(input.files ?? [])].map(\n      (f) =>\n        new Promise<{ name: string; type: string; size: number; contents: string }>((resolve) => {\n          const r = new FileReader();\n          r.onloadend = () =>\n            resolve({ name: f.name, type: f.type, size: f.size, contents: String(r.result).split(',')[1] ?? '' });\n          r.readAsDataURL(f);\n        }),\n    ),\n  );\n\n/**\n * Two-way binding: `bind:name` or `bind=\"name\"`. Creates the signal from the element when missing.\n * Checkbox groups bind to arrays, radios to the checked value, `select multiple` to arrays.\n * `__event.change` picks the events to listen for.\n */\nexport const bind = dir('bind', 0, ({ el, key, value, cased, mods, store, listen, effect }) => {\n  const path = key ? cased() : value.trim();\n  const current = () => store.get(path);\n  const asNumber = (s: string) => (typeof current() === 'number' ? +s : s);\n  const input = el as HTMLInputElement;\n  const type = el instanceof HTMLInputElement ? input.type : '';\n  /** Adapter writing `el.value`. */\n  const valued = (_read: () => unknown, ..._events: string[]): Adapter => ({\n    _read,\n    _write: (v) => {\n      // A number field mid-entry ('-', '1e') reads as '' with badInput; do not wipe what the user is typing.\n      if (str(v) !== input.value && !input.validity?.badInput) input.value = str(v);\n    },\n    _events,\n  });\n  let a: Adapter;\n\n  if (type === 'checkbox') {\n    const own = el.hasAttribute('value') && input.value !== 'on';\n    a = {\n      _read: () => {\n        const cur = current();\n        if (Array.isArray(cur)) {\n          const set = new Set(cur);\n          input.checked ? set.add(input.value) : set.delete(input.value);\n          return [...set];\n        }\n        return own ? (input.checked ? input.value : '') : input.checked;\n      },\n      _write: (v) => {\n        input.checked = Array.isArray(v) ? v.includes(input.value) : own ? v === input.value : !!v;\n      },\n      _events: ['input'],\n    };\n  } else if (type === 'radio') {\n    input.name ||= path;\n    a = {\n      _read: () => (input.checked ? asNumber(input.value) : current()),\n      _write: (v) => (input.checked = String(v) === input.value),\n      _events: ['input'],\n    };\n  } else if (type === 'file') {\n    listen(el, 'change', () => readFiles(input).then((files) => store.set(path, files)));\n    return;\n  } else if (type) {\n    const numeric = type === 'number' || type === 'range';\n    a = valued(() => (numeric && input.value !== '' ? +input.value : input.value), 'input');\n  } else if (el instanceof HTMLSelectElement) {\n    a = {\n      _read: () => (el.multiple ? [...el.selectedOptions].map((o) => asNumber(o.value)) : asNumber(el.value)),\n      _write: (v) => {\n        if (el.multiple) for (const o of el.options) o.selected = Array.isArray(v) && v.map(String).includes(o.value);\n        else el.value = str(v);\n      },\n      _events: ['change'],\n    };\n  } else if ('value' in el) {\n    a = valued(() => input.value, 'input', 'change');\n  } else {\n    a = {\n      _read: () => el.getAttribute('value'),\n      _write: (v) => el.setAttribute('value', str(v)),\n      _events: ['change'],\n    };\n  }\n\n  if (!store.has(path)) {\n    const initial = a._read();\n    if (initial !== undefined && initial !== '') store.set(path, initial);\n  }\n  const sync = () => store.set(path, a._read());\n  for (const t of [...(mods.get('event') ?? a._events), 'sigmx-prop-change']) listen(el, t, sync);\n  effect(() => a._write(current())); // undefined (removed signal) clears the field\n});\n"],
+  "mappings": "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",
   "names": ["_read", "_write", "_events"]
 }