sigmx 0.1.0

package/dist/plugins/directives/scroll-to.d.ts

@@ -0,0 +1,2 @@
+/** Scrolls the element into view on mount. Modifiers: smooth/instant/auto, vstart..vnearest, hstart..hnearest, focus. */
+export declare const scrollIntoView: import("../../kernel/contracts.js").AttributePlugin;

package/dist/plugins/directives/scroll-to.js

@@ -0,0 +1,19 @@
+import { attribute } from "../../kernel/index.js";
+const pick = (mods, names, fallback) => names.find((n) => mods.has(n)) ?? fallback;
+const scrollIntoView = attribute({
+  name: "scroll-into-view",
+  key: "forbidden",
+  value: "forbidden",
+  mount({ el, mods }) {
+    el.scrollIntoView({
+      behavior: pick(mods, ["smooth", "instant", "auto"], "smooth"),
+      block: pick(mods, ["vstart", "vcenter", "vend", "vnearest"], "vcenter").slice(1),
+      inline: pick(mods, ["hstart", "hcenter", "hend", "hnearest"], "hcenter").slice(1)
+    });
+    if (mods.has("focus")) el.focus?.();
+  }
+});
+export {
+  scrollIntoView
+};
+//# sourceMappingURL=scroll-to.js.map

package/dist/plugins/directives/scroll-to.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/plugins/directives/scroll-to.ts"],
+  "sourcesContent": ["import { attribute } from '../../kernel/index.js'\n\nconst pick = (mods: Map<string, string[]>, names: string[], fallback: string) =>\n  names.find((n) => mods.has(n)) ?? fallback\n\n/** Scrolls the element into view on mount. Modifiers: smooth/instant/auto, vstart..vnearest, hstart..hnearest, focus. */\nexport const scrollIntoView = attribute({\n  name: 'scroll-into-view',\n  key: 'forbidden',\n  value: 'forbidden',\n  mount({ el, mods }) {\n    el.scrollIntoView({\n      behavior: pick(mods, ['smooth', 'instant', 'auto'], 'smooth') as ScrollBehavior,\n      block: pick(mods, ['vstart', 'vcenter', 'vend', 'vnearest'], 'vcenter').slice(1) as ScrollLogicalPosition,\n      inline: pick(mods, ['hstart', 'hcenter', 'hend', 'hnearest'], 'hcenter').slice(1) as ScrollLogicalPosition,\n    })\n    if (mods.has('focus')) (el as HTMLElement).focus?.()\n  },\n})\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,MAAM,OAAO,CAAC,MAA6B,OAAiB,aAC1D,MAAM,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,KAAK;AAG7B,MAAM,iBAAiB,UAAU;AAAA,EACtC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM,EAAE,IAAI,KAAK,GAAG;AAClB,OAAG,eAAe;AAAA,MAChB,UAAU,KAAK,MAAM,CAAC,UAAU,WAAW,MAAM,GAAG,QAAQ;AAAA,MAC5D,OAAO,KAAK,MAAM,CAAC,UAAU,WAAW,QAAQ,UAAU,GAAG,SAAS,EAAE,MAAM,CAAC;AAAA,MAC/E,QAAQ,KAAK,MAAM,CAAC,UAAU,WAAW,QAAQ,UAAU,GAAG,SAAS,EAAE,MAAM,CAAC;AAAA,IAClF,CAAC;AACD,QAAI,KAAK,IAAI,OAAO,EAAG,CAAC,GAAmB,QAAQ;AAAA,EACrD;AACF,CAAC;",
+  "names": []
+}

package/dist/plugins/directives/size-watch.d.ts

@@ -0,0 +1 @@
+export declare const onResize: import("../../kernel/contracts.js").AttributePlugin;

package/dist/plugins/directives/size-watch.js

@@ -0,0 +1,17 @@
+import { attribute, withTiming } from "../../kernel/index.js";
+const onResize = attribute({
+  name: "on-resize",
+  key: "forbidden",
+  value: "required",
+  returns: false,
+  mount({ el, mods, evaluate }) {
+    const run = withTiming(() => evaluate(), mods);
+    const ro = new ResizeObserver(() => run());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }
+});
+export {
+  onResize
+};
+//# sourceMappingURL=size-watch.js.map

package/dist/plugins/directives/size-watch.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/plugins/directives/size-watch.ts"],
+  "sourcesContent": ["import { attribute, withTiming } from '../../kernel/index.js'\n\nexport const onResize = attribute({\n  name: 'on-resize',\n  key: 'forbidden',\n  value: 'required',\n  returns: false,\n  mount({ el, mods, evaluate }) {\n    const run = withTiming(() => evaluate(), mods)\n    const ro = new ResizeObserver(() => run())\n    ro.observe(el)\n    return () => ro.disconnect()\n  },\n})\n"],
+  "mappings": "AAAA,SAAS,WAAW,kBAAkB;AAE/B,MAAM,WAAW,UAAU;AAAA,EAChC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM,EAAE,IAAI,MAAM,SAAS,GAAG;AAC5B,UAAM,MAAM,WAAW,MAAM,SAAS,GAAG,IAAI;AAC7C,UAAM,KAAK,IAAI,eAAe,MAAM,IAAI,CAAC;AACzC,OAAG,QAAQ,EAAE;AACb,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B;AACF,CAAC;",
+  "names": []
+}

package/dist/plugins/directives/state-dump.d.ts

@@ -0,0 +1,2 @@
+/** Renders the store (or a filtered part) as JSON. `__terse` for single-line output. */
+export declare const jsonSignals: import("../../kernel/contracts.js").AttributePlugin;

package/dist/plugins/directives/state-dump.js

@@ -0,0 +1,15 @@
+import { attribute } from "../../kernel/index.js";
+const jsonSignals = attribute({
+  name: "json-signals",
+  key: "forbidden",
+  mount({ el, value, mods, evaluate, effect, store }) {
+    const filter = value ? evaluate() : void 0;
+    effect(() => {
+      el.textContent = JSON.stringify(store.snapshot(filter), null, mods.has("terse") ? 0 : 2);
+    });
+  }
+});
+export {
+  jsonSignals
+};
+//# sourceMappingURL=state-dump.js.map

package/dist/plugins/directives/state-dump.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/plugins/directives/state-dump.ts"],
+  "sourcesContent": ["import { attribute } from '../../kernel/index.js'\n\n/** Renders the store (or a filtered part) as JSON. `__terse` for single-line output. */\nexport const jsonSignals = attribute({\n  name: 'json-signals',\n  key: 'forbidden',\n  mount({ el, value, mods, evaluate, effect, store }) {\n    const filter = value ? evaluate() : undefined\n    effect(() => {\n      el.textContent = JSON.stringify(store.snapshot(filter), null, mods.has('terse') ? 0 : 2)\n    })\n  },\n})\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAGnB,MAAM,cAAc,UAAU;AAAA,EACnC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM,EAAE,IAAI,OAAO,MAAM,UAAU,QAAQ,MAAM,GAAG;AAClD,UAAM,SAAS,QAAQ,SAAS,IAAI;AACpC,WAAO,MAAM;AACX,SAAG,cAAc,KAAK,UAAU,MAAM,SAAS,MAAM,GAAG,MAAM,KAAK,IAAI,OAAO,IAAI,IAAI,CAAC;AAAA,IACzF,CAAC;AAAA,EACH;AACF,CAAC;",
+  "names": []
+}

package/dist/plugins/directives/storage-sync.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Saves matching signals to localStorage (`__session` for sessionStorage) and restores them on
+ * mount. `persist:key` sets the storage key; the value is an optional `{ include, exclude }` filter.
+ * Declare defaults with `signals:x__ifmissing` so restored values are not overwritten.
+ */
+export declare const persist: import("../../kernel/contracts.js").AttributePlugin;

package/dist/plugins/directives/storage-sync.js

@@ -0,0 +1,16 @@
+import { attribute } from "../../kernel/index.js";
+const persist = attribute({
+  name: "persist",
+  mount({ key, value, mods, evaluate, store, effect }) {
+    const storage = mods.has("session") ? sessionStorage : localStorage;
+    const name = key || "sigmx";
+    const filter = value ? evaluate() : void 0;
+    const saved = storage.getItem(name);
+    if (saved) store.merge(JSON.parse(saved));
+    effect(() => storage.setItem(name, JSON.stringify(store.snapshot(filter, { computed: false }))));
+  }
+});
+export {
+  persist
+};
+//# sourceMappingURL=storage-sync.js.map

package/dist/plugins/directives/storage-sync.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/plugins/directives/storage-sync.ts"],
+  "sourcesContent": ["import { attribute } from '../../kernel/index.js'\n\n/**\n * Saves matching signals to localStorage (`__session` for sessionStorage) and restores them on\n * mount. `persist:key` sets the storage key; the value is an optional `{ include, exclude }` filter.\n * Declare defaults with `signals:x__ifmissing` so restored values are not overwritten.\n */\nexport const persist = attribute({\n  name: 'persist',\n  mount({ key, value, mods, evaluate, store, effect }) {\n    const storage = mods.has('session') ? sessionStorage : localStorage\n    const name = key || 'sigmx'\n    const filter = value ? evaluate() : undefined\n    const saved = storage.getItem(name)\n    if (saved) store.merge(JSON.parse(saved))\n    effect(() => storage.setItem(name, JSON.stringify(store.snapshot(filter, { computed: false }))))\n  },\n})\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAOnB,MAAM,UAAU,UAAU;AAAA,EAC/B,MAAM;AAAA,EACN,MAAM,EAAE,KAAK,OAAO,MAAM,UAAU,OAAO,OAAO,GAAG;AACnD,UAAM,UAAU,KAAK,IAAI,SAAS,IAAI,iBAAiB;AACvD,UAAM,OAAO,OAAO;AACpB,UAAM,SAAS,QAAQ,SAAS,IAAI;AACpC,UAAM,QAAQ,QAAQ,QAAQ,IAAI;AAClC,QAAI,MAAO,OAAM,MAAM,KAAK,MAAM,KAAK,CAAC;AACxC,WAAO,MAAM,QAAQ,QAAQ,MAAM,KAAK,UAAU,MAAM,SAAS,QAAQ,EAAE,UAAU,MAAM,CAAC,CAAC,CAAC,CAAC;AAAA,EACjG;AACF,CAAC;",
+  "names": []
+}

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

@@ -0,0 +1,5 @@
+/**
+ * Moves the element to another place in the document: `teleport="body"` (a selector).
+ * `__prepend` inserts at the start. The element and its signals keep working where it lands.
+ */
+export declare const teleport: import("../../kernel/contracts.js").AttributePlugin;

package/dist/plugins/directives/teleport.js

@@ -0,0 +1,19 @@
+import { attribute } from "../../kernel/index.js";
+const teleport = attribute({
+  name: "teleport",
+  key: "forbidden",
+  value: "required",
+  mount({ el, value, mods, error }) {
+    const target = document.querySelector(value);
+    if (!target) throw error(`no element matches "${value}"`);
+    if (el.parentElement === target) return;
+    const before = mods.has("prepend") ? target.firstChild : null;
+    const t = target;
+    if (t.moveBefore) t.moveBefore(el, before);
+    else target.insertBefore(el, before);
+  }
+});
+export {
+  teleport
+};
+//# sourceMappingURL=teleport.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/plugins/directives/teleport.ts"],
+  "sourcesContent": ["import { attribute } from '../../kernel/index.js'\n\n/**\n * Moves the element to another place in the document: `teleport=\"body\"` (a selector).\n * `__prepend` inserts at the start. The element and its signals keep working where it lands.\n */\nexport const teleport = attribute({\n  name: 'teleport',\n  key: 'forbidden',\n  value: 'required',\n  mount({ el, value, mods, error }) {\n    const target = document.querySelector(value)\n    if (!target) throw error(`no element matches \"${value}\"`)\n    if (el.parentElement === target) return\n    const before = mods.has('prepend') ? target.firstChild : null\n    const t = target as Node & { moveBefore?: (n: Node, b: Node | null) => void }\n    // `moveBefore` keeps state and avoids an unmount/remount; fall back to a plain move.\n    if (t.moveBefore) t.moveBefore(el, before)\n    else target.insertBefore(el, before)\n  },\n})\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAMnB,MAAM,WAAW,UAAU;AAAA,EAChC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM,EAAE,IAAI,OAAO,MAAM,MAAM,GAAG;AAChC,UAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,QAAI,CAAC,OAAQ,OAAM,MAAM,uBAAuB,KAAK,GAAG;AACxD,QAAI,GAAG,kBAAkB,OAAQ;AACjC,UAAM,SAAS,KAAK,IAAI,SAAS,IAAI,OAAO,aAAa;AACzD,UAAM,IAAI;AAEV,QAAI,EAAE,WAAY,GAAE,WAAW,IAAI,MAAM;AAAA,QACpC,QAAO,aAAa,IAAI,MAAM;AAAA,EACrC;AACF,CAAC;",
+  "names": []
+}

package/dist/plugins/directives/text-content.d.ts

@@ -0,0 +1 @@
+export declare const text: import("../../kernel/contracts.js").AttributePlugin;

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

@@ -0,0 +1,13 @@
+import { attribute } from "../../kernel/index.js";
+const text = attribute({
+  name: "text",
+  key: "forbidden",
+  value: "required",
+  mount: ({ el, evaluate, effect }) => effect(() => {
+    el.textContent = String(evaluate() ?? "");
+  })
+});
+export {
+  text
+};
+//# sourceMappingURL=text-content.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -0,0 +1,2 @@
+/** `on-interval__duration.5s.leading="expr"`. Default one second. */
+export declare const onInterval: import("../../kernel/contracts.js").AttributePlugin;

package/dist/plugins/directives/timer.js

@@ -0,0 +1,18 @@
+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);
+  }
+});
+export {
+  onInterval
+};
+//# sourceMappingURL=timer.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -0,0 +1 @@
+export declare const viewTransition: import("../../kernel/contracts.js").AttributePlugin;

package/dist/plugins/directives/transition-name.js

@@ -0,0 +1,11 @@
+import { attribute } from "../../kernel/index.js";
+const viewTransition = attribute({
+  name: "view-transition",
+  key: "forbidden",
+  value: "required",
+  mount: ({ el, evaluate, effect }) => effect(() => el.style.setProperty("view-transition-name", String(evaluate())))
+});
+export {
+  viewTransition
+};
+//# sourceMappingURL=transition-name.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/plugins/directives/transition-name.ts"],
+  "sourcesContent": ["import { attribute } from '../../kernel/index.js'\n\nexport const viewTransition = attribute({\n  name: 'view-transition',\n  key: 'forbidden',\n  value: 'required',\n  mount: ({ el, evaluate, effect }) => effect(() => el.style.setProperty('view-transition-name', String(evaluate()))),\n})\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAEnB,MAAM,iBAAiB,UAAU;AAAA,EACtC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO,CAAC,EAAE,IAAI,UAAU,OAAO,MAAM,OAAO,MAAM,GAAG,MAAM,YAAY,wBAAwB,OAAO,SAAS,CAAC,CAAC,CAAC;AACpH,CAAC;",
+  "names": []
+}

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

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

package/dist/plugins/directives/transition.js

@@ -0,0 +1,40 @@
+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;
+      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";
+      };
+    });
+  }
+});
+export {
+  transition
+};
+//# sourceMappingURL=transition.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -0,0 +1,5 @@
+/**
+ * Keeps keyboard focus inside the element while the expression is true and restores the previously
+ * focused element when it turns false: `trap="$open"`. `__inert` also makes the rest of the page inert.
+ */
+export declare const trap: import("../../kernel/contracts.js").AttributePlugin;

package/dist/plugins/directives/trap.js

@@ -0,0 +1,48 @@
+import { attribute } from "../../kernel/index.js";
+const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]):not([type=hidden]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),[contenteditable]';
+const trap = attribute({
+  name: "trap",
+  key: "forbidden",
+  value: "required",
+  mount({ el, mods, evaluate, effect, listen, cleanup }) {
+    let previous = null;
+    let active = false;
+    const inerted = [];
+    const focusables = () => [...el.querySelectorAll(FOCUSABLE)].filter((e) => e.offsetParent !== null || e === document.activeElement);
+    const release = () => {
+      if (!active) return;
+      active = false;
+      for (const e of inerted.splice(0)) e.removeAttribute("inert");
+      previous?.focus?.();
+    };
+    listen(document, "keydown", (e) => {
+      if (!active || e.key !== "Tab") return;
+      const items = focusables();
+      if (!items.length) return e.preventDefault();
+      const i = items.indexOf(document.activeElement);
+      const next = e.shiftKey ? i <= 0 ? items.length - 1 : i - 1 : i === items.length - 1 ? 0 : i + 1;
+      if (i < 0 || next !== i + (e.shiftKey ? -1 : 1)) {
+        e.preventDefault();
+        items[next].focus();
+      }
+    });
+    effect(() => {
+      if (evaluate()) {
+        if (active) return;
+        active = true;
+        previous = document.activeElement;
+        if (mods.has("inert")) {
+          for (let n = el; n && n !== document.body; n = n.parentElement) {
+            for (const sib of n.parentElement?.children ?? []) if (sib !== n && !sib.hasAttribute("inert")) sib.setAttribute("inert", ""), inerted.push(sib);
+          }
+        }
+        queueMicrotask(() => (focusables()[0] ?? el).focus?.());
+      } else release();
+    });
+    cleanup(release);
+  }
+});
+export {
+  trap
+};
+//# sourceMappingURL=trap.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/plugins/directives/trap.ts"],
+  "sourcesContent": ["import { attribute } from '../../kernel/index.js'\n\nconst FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]):not([type=hidden]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"]),[contenteditable]'\n\n/**\n * Keeps keyboard focus inside the element while the expression is true and restores the previously\n * focused element when it turns false: `trap=\"$open\"`. `__inert` also makes the rest of the page inert.\n */\nexport const trap = attribute({\n  name: 'trap',\n  key: 'forbidden',\n  value: 'required',\n  mount({ el, mods, evaluate, effect, listen, cleanup }) {\n    let previous: Element | null = null\n    let active = false\n    const inerted: Element[] = []\n    const focusables = () => [...el.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((e) => e.offsetParent !== null || e === document.activeElement)\n    const release = () => {\n      if (!active) return\n      active = false\n      for (const e of inerted.splice(0)) e.removeAttribute('inert')\n      ;(previous as HTMLElement | null)?.focus?.()\n    }\n    listen(document, 'keydown', (e: KeyboardEvent) => {\n      if (!active || e.key !== 'Tab') return\n      const items = focusables()\n      if (!items.length) return e.preventDefault()\n      const i = items.indexOf(document.activeElement as HTMLElement)\n      const next = e.shiftKey ? (i <= 0 ? items.length - 1 : i - 1) : i === items.length - 1 ? 0 : i + 1\n      if (i < 0 || next !== i + (e.shiftKey ? -1 : 1)) {\n        e.preventDefault()\n        items[next].focus()\n      }\n    })\n    effect(() => {\n      if (evaluate()) {\n        if (active) return\n        active = true\n        previous = document.activeElement\n        if (mods.has('inert')) {\n          for (let n: Element | null = el; n && n !== document.body; n = n.parentElement) {\n            for (const sib of n.parentElement?.children ?? []) if (sib !== n && !sib.hasAttribute('inert')) (sib.setAttribute('inert', ''), inerted.push(sib))\n          }\n        }\n        queueMicrotask(() => (focusables()[0] ?? (el as HTMLElement)).focus?.())\n      } else release()\n    })\n    cleanup(release)\n  },\n})\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,MAAM,YAAY;AAMX,MAAM,OAAO,UAAU;AAAA,EAC5B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM,EAAE,IAAI,MAAM,UAAU,QAAQ,QAAQ,QAAQ,GAAG;AACrD,QAAI,WAA2B;AAC/B,QAAI,SAAS;AACb,UAAM,UAAqB,CAAC;AAC5B,UAAM,aAAa,MAAM,CAAC,GAAG,GAAG,iBAA8B,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,iBAAiB,QAAQ,MAAM,SAAS,aAAa;AAC/I,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,OAAQ;AACb,eAAS;AACT,iBAAW,KAAK,QAAQ,OAAO,CAAC,EAAG,GAAE,gBAAgB,OAAO;AAC3D,MAAC,UAAiC,QAAQ;AAAA,IAC7C;AACA,WAAO,UAAU,WAAW,CAAC,MAAqB;AAChD,UAAI,CAAC,UAAU,EAAE,QAAQ,MAAO;AAChC,YAAM,QAAQ,WAAW;AACzB,UAAI,CAAC,MAAM,OAAQ,QAAO,EAAE,eAAe;AAC3C,YAAM,IAAI,MAAM,QAAQ,SAAS,aAA4B;AAC7D,YAAM,OAAO,EAAE,WAAY,KAAK,IAAI,MAAM,SAAS,IAAI,IAAI,IAAK,MAAM,MAAM,SAAS,IAAI,IAAI,IAAI;AACjG,UAAI,IAAI,KAAK,SAAS,KAAK,EAAE,WAAW,KAAK,IAAI;AAC/C,UAAE,eAAe;AACjB,cAAM,IAAI,EAAE,MAAM;AAAA,MACpB;AAAA,IACF,CAAC;AACD,WAAO,MAAM;AACX,UAAI,SAAS,GAAG;AACd,YAAI,OAAQ;AACZ,iBAAS;AACT,mBAAW,SAAS;AACpB,YAAI,KAAK,IAAI,OAAO,GAAG;AACrB,mBAAS,IAAoB,IAAI,KAAK,MAAM,SAAS,MAAM,IAAI,EAAE,eAAe;AAC9E,uBAAW,OAAO,EAAE,eAAe,YAAY,CAAC,EAAG,KAAI,QAAQ,KAAK,CAAC,IAAI,aAAa,OAAO,EAAG,CAAC,IAAI,aAAa,SAAS,EAAE,GAAG,QAAQ,KAAK,GAAG;AAAA,UAClJ;AAAA,QACF;AACA,uBAAe,OAAO,WAAW,EAAE,CAAC,KAAM,IAAoB,QAAQ,CAAC;AAAA,MACzE,MAAO,SAAQ;AAAA,IACjB,CAAC;AACD,YAAQ,OAAO;AAAA,EACjB;AACF,CAAC;",
+  "names": []
+}

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

@@ -0,0 +1,6 @@
+/**
+ * `animate:opacity="$open ? 1 : 0"` tweens a numeric CSS property (or attribute, for SVG) 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.
+ */
+export declare const animate: import("../../kernel/contracts.js").AttributePlugin;

package/dist/plugins/directives/tween.js

@@ -0,0 +1,58 @@
+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
+};
+const num = (s) => {
+  const m = /^\s*(-?\d*\.?\d+)([a-z%]*)\s*$/i.exec(s);
+  return m ? { n: +m[1], unit: 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));
+  }
+});
+export {
+  animate
+};
+//# sourceMappingURL=tween.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -0,0 +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.
+ */
+export declare const bind: import("../../kernel/contracts.js").AttributePlugin;

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

@@ -0,0 +1,82 @@
+import { attribute } from "../../kernel/index.js";
+const adapter = (_read, _write, ..._events) => ({ a: _read, b: _write, c: _events });
+const readFiles = (input) => Promise.all(
+  [...input.files ?? []].map(
+    (f) => new Promise((resolve) => {
+      const r = new FileReader();
+      r.onloadend = () => resolve({ name: f.name, type: f.type, size: f.size, contents: String(r.result).split(",")[1] ?? "" });
+      r.readAsDataURL(f);
+    })
+  )
+);
+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);
+    });
+  }
+});
+export {
+  bind
+};
+//# sourceMappingURL=two-way-bind.js.map

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

@@ -0,0 +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": "AAAA,SAAS,iBAAiB;AAG1B,MAAM,UAAU,CAAC,OAAsB,WAA6B,aAAgC,EAAEA,GAAA,OAAOC,GAAA,QAAQC,GAAA,QAAQ;AAE7H,MAAM,YAAY,CAAC,UACjB,QAAQ;AAAA,EACN,CAAC,GAAI,MAAM,SAAS,CAAC,CAAE,EAAE;AAAA,IACvB,CAAC,MACC,IAAI,QAAwE,CAAC,YAAY;AACvF,YAAM,IAAI,IAAI,WAAW;AACzB,QAAE,YAAY,MACZ,QAAQ,EAAE,MAAM,EAAE,MAAM,MAAM,EAAE,MAAM,MAAM,EAAE,MAAM,UAAU,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG,CAAC;AACtG,QAAE,cAAc,CAAC;AAAA,IACnB,CAAC;AAAA,EACL;AACF;AAOK,MAAM,OAAO,UAAU;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM,EAAE,IAAI,KAAK,OAAO,OAAO,MAAM,OAAO,QAAQ,OAAO,GAAG;AAC5D,UAAM,OAAO,MAAM,MAAM,IAAI,MAAM,KAAK;AACxC,UAAM,UAAU,MAAM,MAAM,IAAI,IAAI;AACpC,UAAM,WAAW,CAAC,MAAe,OAAO,QAAQ,MAAM,WAAW,CAAC,IAAI;AACtE,QAAI;AACJ,UAAM,OAAO,KAAK,IAAI,MAAM,IAAI,CAAC;AAEjC,QAAI,MAAM;AACR,UAAI,QAAQ,MAAO,GAAW,IAAI,GAAG,CAAC,MAAQ,GAAW,IAAI,IAAI,GAAI,SAAS,QAAQ;AAAA,IACxF,WAAW,cAAc,kBAAkB;AACzC,YAAM,IAAI,GAAG;AACb,UAAI,MAAM,YAAY;AACpB,cAAM,MAAM,GAAG,aAAa,OAAO,KAAK,GAAG,UAAU;AACrD,YAAI;AAAA,UACFF,GAAO,MAAM;AACX,kBAAM,MAAM,QAAQ;AACpB,gBAAI,MAAM,QAAQ,GAAG,GAAG;AACtB,oBAAM,MAAM,IAAI,IAAI,GAAG;AACvB,iBAAG,UAAU,IAAI,IAAI,GAAG,KAAK,IAAI,IAAI,OAAO,GAAG,KAAK;AACpD,qBAAO,CAAC,GAAG,GAAG;AAAA,YAChB;AACA,mBAAO,MAAO,GAAG,UAAU,GAAG,QAAQ,KAAM,GAAG;AAAA,UACjD;AAAA,UACAC,GAAQ,CAAC,MAAM;AACb,eAAG,UAAU,MAAM,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,KAAK,IAAI,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC;AAAA,UAClF;AAAA,UACAC,GAAS,CAAC,OAAO;AAAA,QACnB;AAAA,MACF,WAAW,MAAM,SAAS;AACxB,YAAI,CAAC,GAAG,KAAM,IAAG,OAAO;AACxB,YAAI,QAAQ,MAAO,GAAG,UAAU,SAAS,GAAG,KAAK,IAAI,QAAQ,GAAI,CAAC,MAAO,GAAG,UAAU,OAAO,CAAC,MAAM,GAAG,OAAQ,OAAO;AAAA,MACxH,WAAW,MAAM,QAAQ;AACvB,eAAO,IAAI,UAAU,MAAM,UAAU,EAAE,EAAE,KAAK,CAAC,UAAU,MAAM,IAAI,MAAM,KAAK,CAAC,CAAC;AAChF;AAAA,MACF,WAAW,MAAM,YAAY,MAAM,SAAS;AAC1C,YAAI,QAAQ,MAAO,GAAG,UAAU,KAAK,KAAK,CAAC,GAAG,OAAQ,CAAC,MAAO,GAAG,QAAQ,OAAO,KAAK,EAAE,GAAI,OAAO;AAAA,MACpG,OAAO;AACL,YAAI,QAAQ,MAAM,GAAG,OAAO,CAAC,MAAO,GAAG,QAAQ,OAAO,KAAK,EAAE,GAAI,OAAO;AAAA,MAC1E;AAAA,IACF,WAAW,cAAc,mBAAmB;AAC1C,UAAI;AAAA,QACFF,GAAO,MAAO,GAAG,WAAW,CAAC,GAAG,GAAG,eAAe,EAAE,IAAI,CAAC,MAAM,SAAS,EAAE,KAAK,CAAC,IAAI,SAAS,GAAG,KAAK;AAAA,QACrGC,GAAQ,CAAC,MAAM;AACb,cAAI,GAAG,SAAU,YAAW,KAAK,GAAG,QAAS,GAAE,WAAW,MAAM,QAAQ,CAAC,KAAK,EAAE,IAAI,MAAM,EAAE,SAAS,EAAE,KAAK;AAAA,cACvG,IAAG,QAAQ,OAAO,KAAK,EAAE;AAAA,QAChC;AAAA,QACAC,GAAS,CAAC,QAAQ;AAAA,MACpB;AAAA,IACF,WAAW,cAAc,uBAAuB,WAAW,IAAI;AAC7D,UAAI,QAAQ,MAAO,GAAW,OAAO,CAAC,MAAQ,GAAW,QAAQ,OAAO,KAAK,EAAE,GAAI,SAAS,QAAQ;AAAA,IACtG,OAAO;AACL,UAAI,QAAQ,MAAM,GAAG,aAAa,OAAO,GAAG,CAAC,MAAM,GAAG,aAAa,SAAS,OAAO,KAAK,EAAE,CAAC,GAAG,QAAQ;AAAA,IACxG;AAEA,QAAI,CAAC,MAAM,IAAI,IAAI,GAAG;AACpB,YAAM,UAAU,EAAEF,EAAM;AACxB,UAAI,YAAY,UAAa,YAAY,GAAI,OAAM,IAAI,MAAM,OAAO;AAAA,IACtE;AACA,UAAM,OAAO,MAAM,MAAM,IAAI,MAAM,EAAEA,EAAM,CAAC;AAC5C,eAAW,QAAQ,KAAK,IAAI,OAAO,KAAK,EAAEE,EAAS,QAAO,IAAI,MAAM,IAAI;AACxE,WAAO,IAAI,qBAAqB,IAAI;AACpC,WAAO,MAAM;AACX,YAAM,IAAI,QAAQ;AAClB,UAAI,MAAM,OAAW,GAAED,EAAO,CAAC;AAAA,IACjC,CAAC;AAAA,EACH;AACF,CAAC;",
+  "names": ["_read", "_write", "_events"]
+}

package/dist/plugins/directives/url-params.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Keeps signals and the URL query string in step.
+ *
+ * Keyed form declares one signal with a default: `query-string:page="1"` creates `page`, reads
+ * `?page=` on load when present (otherwise uses the default), writes it whenever it changes, and
+ * drops the parameter again when the value is back at the default. The parameter name is the key
+ * as written; the signal name is recased as usual.
+ *
+ * Bare form syncs existing signals: `query-string="{ include: /^(q|sort)$/ }"` mirrors matching
+ * paths both ways. `__history` pushes an entry per change and restores on back/forward;
+ * `__filter` drops empty values from the URL.
+ */
+export declare const queryString: import("../../kernel/contracts.js").AttributePlugin;