sigmx 0.1.1 → 0.2.0

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

@@ -1,17 +1,11 @@
-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?.();
-  }
+import { dir } from "../def.js";
+const pick = (mods, re, fallback) => [...mods.keys()].find((n) => re.test(n)) ?? fallback;
+const scrollIntoView = dir("scroll-into-view", 10, ({ el, mods }) => {
+  el.scrollIntoView({
+    behavior: pick(mods, /^(smooth|instant|auto)$/, "smooth"),
+    block: pick(mods, /^v(start|center|end|nearest)$/, "vcenter").slice(1)
+  });
+  if (mods.has("focus")) el.focus?.();
 });
 export {
   scrollIntoView

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

@@ -1,7 +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;",
+  "sourcesContent": ["import { dir } from '../def.js';\n\nconst pick = (mods: Map<string, string[]>, re: RegExp, fallback: string) =>\n  [...mods.keys()].find((n) => re.test(n)) ?? fallback;\n\n/**\n * Scrolls the element into view when it mounts: `scroll-into-view__smooth__vcenter__focus`.\n * Modifiers: `smooth|instant|auto`, `vstart|vcenter|vend|vnearest`, `focus`.\n */\nexport const scrollIntoView = dir('scroll-into-view', 10, ({ el, mods }) => {\n  el.scrollIntoView({\n    behavior: pick(mods, /^(smooth|instant|auto)$/, 'smooth') as ScrollBehavior,\n    block: pick(mods, /^v(start|center|end|nearest)$/, 'vcenter').slice(1) as ScrollLogicalPosition,\n  });\n  if (mods.has('focus')) (el as HTMLElement).focus?.();\n});\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAEpB,MAAM,OAAO,CAAC,MAA6B,IAAY,aACrD,CAAC,GAAG,KAAK,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,KAAK;AAMvC,MAAM,iBAAiB,IAAI,oBAAoB,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM;AAC1E,KAAG,eAAe;AAAA,IAChB,UAAU,KAAK,MAAM,2BAA2B,QAAQ;AAAA,IACxD,OAAO,KAAK,MAAM,iCAAiC,SAAS,EAAE,MAAM,CAAC;AAAA,EACvE,CAAC;AACD,MAAI,KAAK,IAAI,OAAO,EAAG,CAAC,GAAmB,QAAQ;AACrD,CAAC;",
   "names": []
 }

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

@@ -1,15 +1,10 @@
-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();
-  }
+import { withTiming } from "../../kernel/index.js";
+import { dir } from "../def.js";
+const onResize = dir("on-resize", 22, ({ el, mods, evaluate, cleanup }) => {
+  const run = withTiming(() => evaluate(), mods, cleanup);
+  const ro = new ResizeObserver(() => run());
+  ro.observe(el);
+  return () => ro.disconnect();
 });
 export {
   onResize

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

@@ -1,7 +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;",
+  "sourcesContent": ["import { withTiming } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\nexport const onResize = dir('on-resize', 22, ({ el, mods, evaluate, cleanup }) => {\n  const run = withTiming(() => evaluate(), mods, cleanup);\n  const ro = new ResizeObserver(() => run());\n  ro.observe(el);\n  return () => ro.disconnect();\n});\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,WAAW;AAEb,MAAM,WAAW,IAAI,aAAa,IAAI,CAAC,EAAE,IAAI,MAAM,UAAU,QAAQ,MAAM;AAChF,QAAM,MAAM,WAAW,MAAM,SAAS,GAAG,MAAM,OAAO;AACtD,QAAM,KAAK,IAAI,eAAe,MAAM,IAAI,CAAC;AACzC,KAAG,QAAQ,EAAE;AACb,SAAO,MAAM,GAAG,WAAW;AAC7B,CAAC;",
   "names": []
 }

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

@@ -1,13 +1,9 @@
-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);
-    });
-  }
+import { dir } from "../def.js";
+const jsonSignals = dir("json-signals", 2, ({ el, value, evaluate, effect, store }) => {
+  const filter = value ? evaluate() : void 0;
+  effect(() => {
+    el.textContent = JSON.stringify(store.snapshot(filter), null, 2);
+  });
 });
 export {
   jsonSignals

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

@@ -1,7 +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;",
+  "sourcesContent": ["import { dir } from '../def.js';\n\n/** Renders the store (or a filtered part) as JSON. `__terse` for single-line output. */\nexport const jsonSignals = dir('json-signals', 2, ({ el, value, evaluate, effect, store }) => {\n  const filter = value ? evaluate() : undefined;\n  effect(() => {\n    el.textContent = JSON.stringify(store.snapshot(filter), null, 2);\n  });\n});\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAGb,MAAM,cAAc,IAAI,gBAAgB,GAAG,CAAC,EAAE,IAAI,OAAO,UAAU,QAAQ,MAAM,MAAM;AAC5F,QAAM,SAAS,QAAQ,SAAS,IAAI;AACpC,SAAO,MAAM;AACX,OAAG,cAAc,KAAK,UAAU,MAAM,SAAS,MAAM,GAAG,MAAM,CAAC;AAAA,EACjE,CAAC;AACH,CAAC;",
   "names": []
 }

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

@@ -1,14 +1,18 @@
-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);
+import { dir } from "../def.js";
+const persist = dir("persist", 0, ({ key, value, evaluate, store, effect }) => {
+  const name = key || "sigmx";
+  const filter = value ? evaluate() : void 0;
+  try {
+    const saved = localStorage.getItem(name);
     if (saved) store.merge(JSON.parse(saved));
-    effect(() => storage.setItem(name, JSON.stringify(store.snapshot(filter, { computed: false }))));
+  } catch {
   }
+  effect(() => {
+    try {
+      localStorage.setItem(name, JSON.stringify(store.snapshot(filter, { computed: false })));
+    } catch {
+    }
+  });
 });
 export {
   persist

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

@@ -1,7 +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;",
+  "sourcesContent": ["import { dir } from '../def.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 = dir('persist', 0, ({ key, value, evaluate, store, effect }) => {\n  const name = key || 'sigmx';\n  const filter = value ? evaluate() : undefined;\n  try {\n    const saved = localStorage.getItem(name);\n    if (saved) store.merge(JSON.parse(saved));\n  } catch {} // corrupted or blocked storage: start from the declared defaults\n  effect(() => {\n    try {\n      localStorage.setItem(name, JSON.stringify(store.snapshot(filter, { computed: false })));\n    } catch {} // quota exceeded or storage disabled: keep working in memory\n  });\n});\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAOb,MAAM,UAAU,IAAI,WAAW,GAAG,CAAC,EAAE,KAAK,OAAO,UAAU,OAAO,OAAO,MAAM;AACpF,QAAM,OAAO,OAAO;AACpB,QAAM,SAAS,QAAQ,SAAS,IAAI;AACpC,MAAI;AACF,UAAM,QAAQ,aAAa,QAAQ,IAAI;AACvC,QAAI,MAAO,OAAM,MAAM,KAAK,MAAM,KAAK,CAAC;AAAA,EAC1C,QAAQ;AAAA,EAAC;AACT,SAAO,MAAM;AACX,QAAI;AACF,mBAAa,QAAQ,MAAM,KAAK,UAAU,MAAM,SAAS,QAAQ,EAAE,UAAU,MAAM,CAAC,CAAC,CAAC;AAAA,IACxF,QAAQ;AAAA,IAAC;AAAA,EACX,CAAC;AACH,CAAC;",
   "names": []
 }

package/dist/plugins/directives/teleport.js

@@ -1,17 +1,11 @@
-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);
-  }
+import { dir } from "../def.js";
+const teleport = dir("teleport", 38, ({ el, evaluate, error }) => {
+  const selector = String(evaluate());
+  const target = document.querySelector(selector);
+  if (!target) throw error(`no element matches "${selector}"`);
+  if (el.parentElement === target) return;
+  const t = target;
+  (t.moveBefore ?? t.insertBefore).call(t, el, null);
 });
 export {
   teleport

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

@@ -1,7 +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;",
+  "sourcesContent": ["import { dir } from '../def.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 = dir('teleport', 38, ({ el, evaluate, error }) => {\n  const selector = String(evaluate()); // a literal selector, or an expression with `__dynamic`\n  const target = document.querySelector(selector);\n  if (!target) throw error(`no element matches \"${selector}\"`);\n  if (el.parentElement === target) return;\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  (t.moveBefore ?? t.insertBefore).call(t, el, null);\n});\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAMb,MAAM,WAAW,IAAI,YAAY,IAAI,CAAC,EAAE,IAAI,UAAU,MAAM,MAAM;AACvE,QAAM,WAAW,OAAO,SAAS,CAAC;AAClC,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,MAAI,CAAC,OAAQ,OAAM,MAAM,uBAAuB,QAAQ,GAAG;AAC3D,MAAI,GAAG,kBAAkB,OAAQ;AACjC,QAAM,IAAI;AAEV,GAAC,EAAE,cAAc,EAAE,cAAc,KAAK,GAAG,IAAI,IAAI;AACnD,CAAC;",
   "names": []
 }

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

@@ -1,12 +1,11 @@
-import { attribute } from "../../kernel/index.js";
-const text = attribute({
-  name: "text",
-  key: "forbidden",
-  value: "required",
-  mount: ({ el, evaluate, effect }) => effect(() => {
+import { dir } from "../def.js";
+const text = dir(
+  "text",
+  6,
+  ({ el, evaluate, effect }) => effect(() => {
     el.textContent = String(evaluate() ?? "");
   })
-});
+);
 export {
   text
 };

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 = () =>\n      css\n        ? el.style.getPropertyValue(prop) || getComputedStyle(el).getPropertyValue(prop)\n        : (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 (\n        from &&\n        target &&\n        from.unit === 'px' &&\n        target.unit === '%' &&\n        (prop === 'width' || prop === 'height') &&\n        el.parentElement\n      ) {\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,MACX,MACI,GAAG,MAAM,iBAAiB,IAAI,KAAK,iBAAiB,EAAE,EAAE,iBAAiB,IAAI,IAC5E,GAAG,aAAa,IAAI,KAAK;AAChC,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,UACE,QACA,UACA,KAAK,SAAS,QACd,OAAO,SAAS,QACf,SAAS,WAAW,SAAS,aAC9B,GAAG,eACH;AACA,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;