sigmx 0.1.1 → 0.2.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/declare.ts"],
-  "sourcesContent": ["import { attribute, expand } from '../../kernel/index.js';\n\n/** `signals:name=\"expr\"` or `signals=\"{ ... }\"`. `__ifmissing` keeps existing values. */\nexport const signals = attribute({\n  name: 'signals',\n  value: 'required',\n  mount({ key, cased, evaluate, store, mods }) {\n    const v = evaluate();\n    store.merge(key ? expand({}, cased(), v) : v, { ifMissing: mods.has('ifmissing') });\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,WAAW,cAAc;AAG3B,MAAM,UAAU,UAAU;AAAA,EAC/B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM,EAAE,KAAK,OAAO,UAAU,OAAO,KAAK,GAAG;AAC3C,UAAM,IAAI,SAAS;AACnB,UAAM,MAAM,MAAM,OAAO,CAAC,GAAG,MAAM,GAAG,CAAC,IAAI,GAAG,EAAE,WAAW,KAAK,IAAI,WAAW,EAAE,CAAC;AAAA,EACpF;AACF,CAAC;",
+  "sourcesContent": ["import { expand } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\n/** `signals:name=\"expr\"` or `signals=\"{ ... }\"`. `__ifmissing` keeps existing values. */\nexport const signals = dir('signals', 4, ({ key, cased, evaluate, store, mods }) => {\n  const v = evaluate();\n  store.merge(key ? expand({}, cased(), v) : v, { ifMissing: mods.has('ifmissing') });\n});\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,WAAW;AAGb,MAAM,UAAU,IAAI,WAAW,GAAG,CAAC,EAAE,KAAK,OAAO,UAAU,OAAO,KAAK,MAAM;AAClF,QAAM,IAAI,SAAS;AACnB,QAAM,MAAM,MAAM,OAAO,CAAC,GAAG,MAAM,GAAG,CAAC,IAAI,GAAG,EAAE,WAAW,KAAK,IAAI,WAAW,EAAE,CAAC;AACpF,CAAC;",
   "names": []
 }

package/dist/plugins/directives/derive.js

@@ -1,21 +1,12 @@
-import { attribute, computed as makeComputed } from "../../kernel/index.js";
-const computed = attribute({
-  name: "computed",
-  value: "required",
-  mount({ key, cased, evaluate, store, error }) {
-    if (key) {
-      store.define(
-        cased(),
-        makeComputed(() => evaluate())
-      );
-      return;
-    }
-    const obj = evaluate();
-    for (const k in obj) {
-      if (typeof obj[k] !== "function") throw error(`"${k}" must be a function`);
-      store.define(k, makeComputed(obj[k]));
-    }
-  }
+import { computed as makeComputed } from "../../kernel/index.js";
+import { dir } from "../def.js";
+const computed = dir("computed", 5, ({ cased, evaluate, store }) => {
+  const path = cased();
+  store.define(
+    path,
+    makeComputed(() => evaluate())
+  );
+  return () => store.remove(path);
 });
 export {
   computed

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/derive.ts"],
-  "sourcesContent": ["import { attribute, computed as makeComputed } from '../../kernel/index.js';\n\n/** `computed:name=\"expr\"` or `computed=\"{ name: () => expr }\"`. */\nexport const computed = attribute({\n  name: 'computed',\n  value: 'required',\n  mount({ key, cased, evaluate, store, error }) {\n    if (key) {\n      store.define(\n        cased(),\n        makeComputed(() => evaluate()),\n      );\n      return;\n    }\n    const obj = evaluate();\n    for (const k in obj) {\n      if (typeof obj[k] !== 'function') throw error(`\"${k}\" must be a function`);\n      store.define(k, makeComputed(obj[k]));\n    }\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,WAAW,YAAY,oBAAoB;AAG7C,MAAM,WAAW,UAAU;AAAA,EAChC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM,EAAE,KAAK,OAAO,UAAU,OAAO,MAAM,GAAG;AAC5C,QAAI,KAAK;AACP,YAAM;AAAA,QACJ,MAAM;AAAA,QACN,aAAa,MAAM,SAAS,CAAC;AAAA,MAC/B;AACA;AAAA,IACF;AACA,UAAM,MAAM,SAAS;AACrB,eAAW,KAAK,KAAK;AACnB,UAAI,OAAO,IAAI,CAAC,MAAM,WAAY,OAAM,MAAM,IAAI,CAAC,sBAAsB;AACzE,YAAM,OAAO,GAAG,aAAa,IAAI,CAAC,CAAC,CAAC;AAAA,IACtC;AAAA,EACF;AACF,CAAC;",
+  "sourcesContent": ["import { computed as makeComputed } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\n/** `computed:name=\"expr\"` or `computed=\"{ name: () => expr }\"`. */\nexport const computed = dir('computed', 5, ({ cased, evaluate, store }) => {\n  const path = cased();\n  store.define(\n    path,\n    makeComputed(() => evaluate()),\n  );\n  return () => store.remove(path); // unsubscribes the computed from everything it read\n});\n"],
+  "mappings": "AAAA,SAAS,YAAY,oBAAoB;AACzC,SAAS,WAAW;AAGb,MAAM,WAAW,IAAI,YAAY,GAAG,CAAC,EAAE,OAAO,UAAU,MAAM,MAAM;AACzE,QAAM,OAAO,MAAM;AACnB,QAAM;AAAA,IACJ;AAAA,IACA,aAAa,MAAM,SAAS,CAAC;AAAA,EAC/B;AACA,SAAO,MAAM,MAAM,OAAO,IAAI;AAChC,CAAC;",
   "names": []
 }

package/dist/plugins/directives/element-ref.js

@@ -1,11 +1,11 @@
-import { attribute } from "../../kernel/index.js";
-const ref = attribute({
-  name: "ref",
-  mount({ el, key, value, cased, store }) {
-    const path = key ? cased() : value.trim();
-    store.set(path, el);
-    return () => store.remove(path);
-  }
+import { untracked } from "../../kernel/index.js";
+import { dir } from "../def.js";
+const ref = dir("ref", 0, ({ el, key, value, cased, store }) => {
+  const path = key ? cased() : value.trim();
+  store.set(path, el);
+  return () => {
+    if (untracked(() => store.get(path)) === el) store.remove(path);
+  };
 });
 export {
   ref

package/dist/plugins/directives/element-ref.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/element-ref.ts"],
-  "sourcesContent": ["import { attribute } from '../../kernel/index.js';\n\n/** Stores the element in a signal: `ref:dialog` or `ref=\"dialog\"`. */\nexport const ref = attribute({\n  name: 'ref',\n  mount({ el, key, value, cased, store }) {\n    const path = key ? cased() : value.trim();\n    store.set(path, el);\n    return () => store.remove(path);\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAGnB,MAAM,MAAM,UAAU;AAAA,EAC3B,MAAM;AAAA,EACN,MAAM,EAAE,IAAI,KAAK,OAAO,OAAO,MAAM,GAAG;AACtC,UAAM,OAAO,MAAM,MAAM,IAAI,MAAM,KAAK;AACxC,UAAM,IAAI,MAAM,EAAE;AAClB,WAAO,MAAM,MAAM,OAAO,IAAI;AAAA,EAChC;AACF,CAAC;",
+  "sourcesContent": ["import { untracked } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\n/** Stores the element in a signal: `ref:dialog` or `ref=\"dialog\"`. */\nexport const ref = dir('ref', 0, ({ el, key, value, cased, store }) => {\n  const path = key ? cased() : value.trim();\n  store.set(path, el);\n  return () => {\n    if (untracked(() => store.get(path)) === el) store.remove(path);\n  };\n});\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AAGb,MAAM,MAAM,IAAI,OAAO,GAAG,CAAC,EAAE,IAAI,KAAK,OAAO,OAAO,MAAM,MAAM;AACrE,QAAM,OAAO,MAAM,MAAM,IAAI,MAAM,KAAK;AACxC,QAAM,IAAI,MAAM,EAAE;AAClB,SAAO,MAAM;AACX,QAAI,UAAU,MAAM,MAAM,IAAI,IAAI,CAAC,MAAM,GAAI,OAAM,OAAO,IAAI;AAAA,EAChE;AACF,CAAC;",
   "names": []
 }

package/dist/plugins/directives/event-listener.js

@@ -1,29 +1,21 @@
-import { attribute, withTiming, withViewTransition } from "../../kernel/index.js";
-const on = attribute({
-  name: "on",
-  key: "required",
-  value: "required",
-  returns: false,
-  mount({ el, mods, cased, evaluate, listen }) {
-    const type = cased("kebab");
-    const outside = mods.has("outside");
-    const target = mods.has("window") ? window : mods.has("document") || outside || type.startsWith("sigmx-") ? document : el;
-    const run = withTiming(
-      withViewTransition((e) => evaluate(e), mods),
-      mods
-    );
-    listen(
-      target,
-      type,
-      (e) => {
-        if (outside && el.contains(e.target)) return;
-        if (mods.has("prevent") || type === "submit" && el instanceof HTMLFormElement) e.preventDefault();
-        if (mods.has("stop")) e.stopPropagation();
-        run(e);
-      },
-      { capture: mods.has("capture"), passive: mods.has("passive"), once: mods.has("once") }
-    );
-  }
+import { withTiming } from "../../kernel/index.js";
+import { dir } from "../def.js";
+const on = dir("on", 21, ({ el, mods, cased, evaluate, listen, cleanup }) => {
+  const type = cased("kebab");
+  const outside = mods.has("outside");
+  const target = mods.has("window") ? window : mods.has("document") || outside || type.startsWith("sigmx-") ? document : el;
+  const run = withTiming((e) => evaluate(e), mods, cleanup);
+  listen(
+    target,
+    type,
+    (e) => {
+      if (outside && el.contains(e.target)) return;
+      if (mods.has("prevent") || type === "submit" && el instanceof HTMLFormElement) e.preventDefault();
+      if (mods.has("stop")) e.stopPropagation();
+      run(e);
+    },
+    { once: mods.has("once") }
+  );
 });
 export {
   on

package/dist/plugins/directives/event-listener.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/event-listener.ts"],
-  "sourcesContent": ["import { attribute, withTiming, withViewTransition } from '../../kernel/index.js';\n\n/**\n * `on:click=\"expr\"`. Modifiers: window, document, outside, prevent, stop, capture, passive, once,\n * delay/debounce/throttle, viewtransition, case.\n */\nexport const on = attribute({\n  name: 'on',\n  key: 'required',\n  value: 'required',\n  returns: false,\n  mount({ el, mods, cased, evaluate, listen }) {\n    const type = cased('kebab');\n    const outside = mods.has('outside');\n    const target: EventTarget = mods.has('window')\n      ? window\n      : mods.has('document') || outside || type.startsWith('sigmx-')\n        ? document\n        : el;\n    const run = withTiming(\n      withViewTransition((e: Event) => evaluate(e), mods),\n      mods,\n    );\n    listen(\n      target,\n      type,\n      (e: Event) => {\n        if (outside && el.contains(e.target as Node)) return;\n        if (mods.has('prevent') || (type === 'submit' && el instanceof HTMLFormElement)) e.preventDefault();\n        if (mods.has('stop')) e.stopPropagation();\n        run(e);\n      },\n      { capture: mods.has('capture'), passive: mods.has('passive'), once: mods.has('once') },\n    );\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,WAAW,YAAY,0BAA0B;AAMnD,MAAM,KAAK,UAAU;AAAA,EAC1B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM,EAAE,IAAI,MAAM,OAAO,UAAU,OAAO,GAAG;AAC3C,UAAM,OAAO,MAAM,OAAO;AAC1B,UAAM,UAAU,KAAK,IAAI,SAAS;AAClC,UAAM,SAAsB,KAAK,IAAI,QAAQ,IACzC,SACA,KAAK,IAAI,UAAU,KAAK,WAAW,KAAK,WAAW,QAAQ,IACzD,WACA;AACN,UAAM,MAAM;AAAA,MACV,mBAAmB,CAAC,MAAa,SAAS,CAAC,GAAG,IAAI;AAAA,MAClD;AAAA,IACF;AACA;AAAA,MACE;AAAA,MACA;AAAA,MACA,CAAC,MAAa;AACZ,YAAI,WAAW,GAAG,SAAS,EAAE,MAAc,EAAG;AAC9C,YAAI,KAAK,IAAI,SAAS,KAAM,SAAS,YAAY,cAAc,gBAAkB,GAAE,eAAe;AAClG,YAAI,KAAK,IAAI,MAAM,EAAG,GAAE,gBAAgB;AACxC,YAAI,CAAC;AAAA,MACP;AAAA,MACA,EAAE,SAAS,KAAK,IAAI,SAAS,GAAG,SAAS,KAAK,IAAI,SAAS,GAAG,MAAM,KAAK,IAAI,MAAM,EAAE;AAAA,IACvF;AAAA,EACF;AACF,CAAC;",
+  "sourcesContent": ["import { withTiming } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\n/**\n * `on:click=\"expr\"`. Modifiers: window, document, outside, prevent, stop, capture, passive, once,\n * delay/debounce/throttle, viewtransition, case.\n */\nexport const on = dir('on', 21, ({ el, mods, cased, evaluate, listen, cleanup }) => {\n  const type = cased('kebab');\n  const outside = mods.has('outside');\n  const target: EventTarget = mods.has('window')\n    ? window\n    : mods.has('document') || outside || type.startsWith('sigmx-')\n      ? document\n      : el;\n  const run = withTiming((e: Event) => evaluate(e), mods, cleanup);\n  listen(\n    target,\n    type,\n    (e: Event) => {\n      if (outside && el.contains(e.target as Node)) return;\n      if (mods.has('prevent') || (type === 'submit' && el instanceof HTMLFormElement)) e.preventDefault();\n      if (mods.has('stop')) e.stopPropagation();\n      run(e);\n    },\n    { once: mods.has('once') },\n  );\n});\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,WAAW;AAMb,MAAM,KAAK,IAAI,MAAM,IAAI,CAAC,EAAE,IAAI,MAAM,OAAO,UAAU,QAAQ,QAAQ,MAAM;AAClF,QAAM,OAAO,MAAM,OAAO;AAC1B,QAAM,UAAU,KAAK,IAAI,SAAS;AAClC,QAAM,SAAsB,KAAK,IAAI,QAAQ,IACzC,SACA,KAAK,IAAI,UAAU,KAAK,WAAW,KAAK,WAAW,QAAQ,IACzD,WACA;AACN,QAAM,MAAM,WAAW,CAAC,MAAa,SAAS,CAAC,GAAG,MAAM,OAAO;AAC/D;AAAA,IACE;AAAA,IACA;AAAA,IACA,CAAC,MAAa;AACZ,UAAI,WAAW,GAAG,SAAS,EAAE,MAAc,EAAG;AAC9C,UAAI,KAAK,IAAI,SAAS,KAAM,SAAS,YAAY,cAAc,gBAAkB,GAAE,eAAe;AAClG,UAAI,KAAK,IAAI,MAAM,EAAG,GAAE,gBAAgB;AACxC,UAAI,CAAC;AAAA,IACP;AAAA,IACA,EAAE,MAAM,KAAK,IAAI,MAAM,EAAE;AAAA,EAC3B;AACF,CAAC;",
   "names": []
 }

package/dist/plugins/directives/frame-loop.js

@@ -1,17 +1,12 @@
-import { attribute, withTiming } from "../../kernel/index.js";
-const onRaf = attribute({
-  name: "on-raf",
-  key: "forbidden",
-  value: "required",
-  returns: false,
-  mount({ mods, evaluate }) {
-    const run = withTiming(() => evaluate(), mods);
-    let id = requestAnimationFrame(function tick() {
-      run();
-      id = requestAnimationFrame(tick);
-    });
-    return () => cancelAnimationFrame(id);
-  }
+import { withTiming } from "../../kernel/index.js";
+import { dir } from "../def.js";
+const onRaf = dir("on-raf", 22, ({ mods, evaluate, cleanup }) => {
+  const run = withTiming(() => evaluate(), mods, cleanup);
+  let id = requestAnimationFrame(function tick() {
+    run();
+    id = requestAnimationFrame(tick);
+  });
+  return () => cancelAnimationFrame(id);
 });
 export {
   onRaf

package/dist/plugins/directives/frame-loop.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/frame-loop.ts"],
-  "sourcesContent": ["import { attribute, withTiming } from '../../kernel/index.js';\n\nexport const onRaf = attribute({\n  name: 'on-raf',\n  key: 'forbidden',\n  value: 'required',\n  returns: false,\n  mount({ mods, evaluate }) {\n    const run = withTiming(() => evaluate(), mods);\n    let id = requestAnimationFrame(function tick() {\n      run();\n      id = requestAnimationFrame(tick);\n    });\n    return () => cancelAnimationFrame(id);\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,WAAW,kBAAkB;AAE/B,MAAM,QAAQ,UAAU;AAAA,EAC7B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM,EAAE,MAAM,SAAS,GAAG;AACxB,UAAM,MAAM,WAAW,MAAM,SAAS,GAAG,IAAI;AAC7C,QAAI,KAAK,sBAAsB,SAAS,OAAO;AAC7C,UAAI;AACJ,WAAK,sBAAsB,IAAI;AAAA,IACjC,CAAC;AACD,WAAO,MAAM,qBAAqB,EAAE;AAAA,EACtC;AACF,CAAC;",
+  "sourcesContent": ["import { withTiming } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\nexport const onRaf = dir('on-raf', 22, ({ mods, evaluate, cleanup }) => {\n  const run = withTiming(() => evaluate(), mods, cleanup);\n  let id = requestAnimationFrame(function tick() {\n    run();\n    id = requestAnimationFrame(tick);\n  });\n  return () => cancelAnimationFrame(id);\n});\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,WAAW;AAEb,MAAM,QAAQ,IAAI,UAAU,IAAI,CAAC,EAAE,MAAM,UAAU,QAAQ,MAAM;AACtE,QAAM,MAAM,WAAW,MAAM,SAAS,GAAG,MAAM,OAAO;AACtD,MAAI,KAAK,sBAAsB,SAAS,OAAO;AAC7C,QAAI;AACJ,SAAK,sBAAsB,IAAI;AAAA,EACjC,CAAC;AACD,SAAO,MAAM,qBAAqB,EAAE;AACtC,CAAC;",
   "names": []
 }

package/dist/plugins/directives/html.js

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/html.ts"],
-  "sourcesContent": ["import { attribute } from '../../kernel/index.js';\n\n/** Sets `innerHTML` from an expression: `html=\"$markup\"`. Scripts inside are not executed. */\nexport const html = attribute({\n  name: 'html',\n  key: 'forbidden',\n  value: 'required',\n  mount: ({ el, evaluate, effect }) =>\n    effect(() => {\n      el.innerHTML = String(evaluate() ?? '');\n    }),\n});\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAGnB,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,YAAY,OAAO,SAAS,KAAK,EAAE;AAAA,EACxC,CAAC;AACL,CAAC;",
+  "sourcesContent": ["import { dir } from '../def.js';\n\n/** Sets `innerHTML` from an expression: `html=\"$markup\"`. Scripts inside are not executed. */\nexport const html = dir('html', 6, ({ el, evaluate, effect }) =>\n  effect(() => {\n    el.innerHTML = String(evaluate() ?? '');\n  }),\n);\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAGb,MAAM,OAAO;AAAA,EAAI;AAAA,EAAQ;AAAA,EAAG,CAAC,EAAE,IAAI,UAAU,OAAO,MACzD,OAAO,MAAM;AACX,OAAG,YAAY,OAAO,SAAS,KAAK,EAAE;AAAA,EACxC,CAAC;AACH;",
   "names": []
 }

package/dist/plugins/directives/inline-style.js

@@ -1,23 +1,20 @@
-import { attribute, kebab } from "../../kernel/index.js";
-const style = attribute({
-  name: "style",
-  value: "required",
-  mount({ el, key, cased, evaluate, effect }) {
-    const original = /* @__PURE__ */ new Map();
-    const put = (prop, v) => {
-      if (!original.has(prop)) original.set(prop, el.style.getPropertyValue(prop));
-      if (v || v === 0) el.style.setProperty(prop, String(v));
-      else el.style.setProperty(prop, original.get(prop) ?? "");
-    };
-    effect(() => {
-      const map = key ? { [cased("kebab")]: evaluate() } : evaluate();
-      for (const prop of original.keys()) if (!(prop in map)) put(prop, "");
-      for (const prop in map) put(kebab(prop), map[prop]);
-    });
-    return () => {
-      for (const [prop, v] of original) el.style.setProperty(prop, v);
-    };
-  }
+import { kebab } from "../../kernel/index.js";
+import { dir } from "../def.js";
+const style = dir("style", 4, ({ el, key, cased, evaluate, effect }) => {
+  const original = /* @__PURE__ */ new Map();
+  const put = (prop, v) => {
+    if (!original.has(prop)) original.set(prop, el.style.getPropertyValue(prop));
+    if (v || v === 0) el.style.setProperty(prop, String(v));
+    else el.style.setProperty(prop, original.get(prop) ?? "");
+  };
+  effect(() => {
+    const map = key ? { [cased("kebab")]: evaluate() } : evaluate();
+    for (const prop of original.keys()) if (!(prop in map)) put(prop, "");
+    for (const prop in map) put(prop.startsWith("--") ? prop : kebab(prop), map[prop]);
+  });
+  return () => {
+    for (const [prop, v] of original) el.style.setProperty(prop, v);
+  };
 });
 export {
   style

package/dist/plugins/directives/inline-style.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/inline-style.ts"],
-  "sourcesContent": ["import { attribute, kebab } from '../../kernel/index.js';\n\n/** `style:color=\"expr\"` or `style=\"{ color: expr }\"`. Falsy values (except 0) restore the original. */\nexport const style = attribute({\n  name: 'style',\n  value: 'required',\n  mount({ el, key, cased, evaluate, effect }) {\n    const original = new Map<string, string>();\n    const put = (prop: string, v: unknown) => {\n      if (!original.has(prop)) original.set(prop, el.style.getPropertyValue(prop));\n      if (v || v === 0) el.style.setProperty(prop, String(v));\n      else el.style.setProperty(prop, original.get(prop) ?? '');\n    };\n    effect(() => {\n      const map: Record<string, unknown> = key ? { [cased('kebab')]: evaluate() } : evaluate();\n      for (const prop of original.keys()) if (!(prop in map)) put(prop, '');\n      for (const prop in map) put(kebab(prop), map[prop]);\n    });\n    return () => {\n      for (const [prop, v] of original) el.style.setProperty(prop, v);\n    };\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,WAAW,aAAa;AAG1B,MAAM,QAAQ,UAAU;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM,EAAE,IAAI,KAAK,OAAO,UAAU,OAAO,GAAG;AAC1C,UAAM,WAAW,oBAAI,IAAoB;AACzC,UAAM,MAAM,CAAC,MAAc,MAAe;AACxC,UAAI,CAAC,SAAS,IAAI,IAAI,EAAG,UAAS,IAAI,MAAM,GAAG,MAAM,iBAAiB,IAAI,CAAC;AAC3E,UAAI,KAAK,MAAM,EAAG,IAAG,MAAM,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA,UACjD,IAAG,MAAM,YAAY,MAAM,SAAS,IAAI,IAAI,KAAK,EAAE;AAAA,IAC1D;AACA,WAAO,MAAM;AACX,YAAM,MAA+B,MAAM,EAAE,CAAC,MAAM,OAAO,CAAC,GAAG,SAAS,EAAE,IAAI,SAAS;AACvF,iBAAW,QAAQ,SAAS,KAAK,EAAG,KAAI,EAAE,QAAQ,KAAM,KAAI,MAAM,EAAE;AACpE,iBAAW,QAAQ,IAAK,KAAI,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC;AAAA,IACpD,CAAC;AACD,WAAO,MAAM;AACX,iBAAW,CAAC,MAAM,CAAC,KAAK,SAAU,IAAG,MAAM,YAAY,MAAM,CAAC;AAAA,IAChE;AAAA,EACF;AACF,CAAC;",
+  "sourcesContent": ["import { kebab } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\n/** `style:color=\"expr\"` or `style=\"{ color: expr }\"`. Falsy values (except 0) restore the original. */\nexport const style = dir('style', 4, ({ el, key, cased, evaluate, effect }) => {\n  const original = new Map<string, string>();\n  const put = (prop: string, v: unknown) => {\n    if (!original.has(prop)) original.set(prop, el.style.getPropertyValue(prop));\n    if (v || v === 0) el.style.setProperty(prop, String(v));\n    else el.style.setProperty(prop, original.get(prop) ?? '');\n  };\n  effect(() => {\n    const map: Record<string, unknown> = key ? { [cased('kebab')]: evaluate() } : evaluate();\n    for (const prop of original.keys()) if (!(prop in map)) put(prop, '');\n    for (const prop in map) put(prop.startsWith('--') ? prop : kebab(prop), map[prop]);\n  });\n  return () => {\n    for (const [prop, v] of original) el.style.setProperty(prop, v);\n  };\n});\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,WAAW;AAGb,MAAM,QAAQ,IAAI,SAAS,GAAG,CAAC,EAAE,IAAI,KAAK,OAAO,UAAU,OAAO,MAAM;AAC7E,QAAM,WAAW,oBAAI,IAAoB;AACzC,QAAM,MAAM,CAAC,MAAc,MAAe;AACxC,QAAI,CAAC,SAAS,IAAI,IAAI,EAAG,UAAS,IAAI,MAAM,GAAG,MAAM,iBAAiB,IAAI,CAAC;AAC3E,QAAI,KAAK,MAAM,EAAG,IAAG,MAAM,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA,QACjD,IAAG,MAAM,YAAY,MAAM,SAAS,IAAI,IAAI,KAAK,EAAE;AAAA,EAC1D;AACA,SAAO,MAAM;AACX,UAAM,MAA+B,MAAM,EAAE,CAAC,MAAM,OAAO,CAAC,GAAG,SAAS,EAAE,IAAI,SAAS;AACvF,eAAW,QAAQ,SAAS,KAAK,EAAG,KAAI,EAAE,QAAQ,KAAM,KAAI,MAAM,EAAE;AACpE,eAAW,QAAQ,IAAK,KAAI,KAAK,WAAW,IAAI,IAAI,OAAO,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC;AAAA,EACnF,CAAC;AACD,SAAO,MAAM;AACX,eAAW,CAAC,MAAM,CAAC,KAAK,SAAU,IAAG,MAAM,YAAY,MAAM,CAAC;AAAA,EAChE;AACF,CAAC;",
   "names": []
 }

package/dist/plugins/directives/mask.js

@@ -1,4 +1,4 @@
-import { attribute } from "../../kernel/index.js";
+import { dir } from "../def.js";
 const slots = { "9": /\d/, a: /[a-zA-Z]/, "*": /[a-zA-Z0-9]/ };
 const applyMask = (mask2, raw) => {
   let out = "";
@@ -17,28 +17,24 @@ const applyMask = (mask2, raw) => {
   }
   return out;
 };
-const mask = attribute({
-  name: "mask",
-  key: "forbidden",
-  value: "required",
-  mount({ el, value, mods, evaluate, listen, effect }) {
-    const input = el;
-    let pattern = value;
-    const format = () => {
-      const next = applyMask(pattern, input.value);
-      if (next !== input.value) {
-        input.value = next;
-        input.dispatchEvent(new Event("input", { bubbles: true }));
-      }
-    };
-    listen(input, "input", format);
-    if (mods.has("dynamic")) {
-      effect(() => {
-        pattern = String(evaluate() ?? "");
-        format();
-      });
-    } else format();
-  }
+const mask = dir("mask", 38, ({ el, evaluate, listen, effect }) => {
+  const input = el;
+  let pattern = "";
+  const format = () => {
+    const next = applyMask(pattern, input.value);
+    if (next !== input.value) {
+      const pos = input.selectionStart;
+      const atEnd = pos === null || pos >= input.value.length;
+      input.value = next;
+      if (!atEnd) input.setSelectionRange(pos, pos);
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  };
+  listen(input, "input", format);
+  effect(() => {
+    pattern = String(evaluate() ?? "");
+    format();
+  });
 });
 export {
   applyMask,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/mask.ts"],
-  "sourcesContent": ["import { attribute } from '../../kernel/index.js';\n\nconst slots: Record<string, RegExp> = { '9': /\\d/, a: /[a-zA-Z]/, '*': /[a-zA-Z0-9]/ };\n\n/** Format raw input against a mask: `9` digit, `a` letter, `*` either, anything else literal. */\nexport const applyMask = (mask: string, raw: string): string => {\n  let out = '';\n  let i = 0;\n  for (const m of mask) {\n    if (i >= raw.length) break;\n    const slot = slots[m];\n    if (slot) {\n      while (i < raw.length && !slot.test(raw[i])) i++;\n      if (i >= raw.length) break;\n      out += raw[i++];\n    } else {\n      out += m;\n      if (raw[i] === m) i++;\n    }\n  }\n  return out;\n};\n\n/**\n * Formats the input as the user types: `mask=\"(999) 999-9999\"`. The value is the mask itself;\n * add `__dynamic` to evaluate it as an expression instead (`mask__dynamic=\"$isUS ? '999-999' : '9999'\"`).\n */\nexport const mask = attribute({\n  name: 'mask',\n  key: 'forbidden',\n  value: 'required',\n  mount({ el, value, mods, evaluate, listen, effect }) {\n    const input = el as HTMLInputElement;\n    let pattern = value;\n    const format = () => {\n      const next = applyMask(pattern, input.value);\n      if (next !== input.value) {\n        input.value = next;\n        input.dispatchEvent(new Event('input', { bubbles: true })); // let `bind` see the formatted value\n      }\n    };\n    listen(input, 'input', format);\n    if (mods.has('dynamic')) {\n      effect(() => {\n        pattern = String(evaluate() ?? '');\n        format();\n      });\n    } else format();\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,MAAM,QAAgC,EAAE,KAAK,MAAM,GAAG,YAAY,KAAK,cAAc;AAG9E,MAAM,YAAY,CAACA,OAAc,QAAwB;AAC9D,MAAI,MAAM;AACV,MAAI,IAAI;AACR,aAAW,KAAKA,OAAM;AACpB,QAAI,KAAK,IAAI,OAAQ;AACrB,UAAM,OAAO,MAAM,CAAC;AACpB,QAAI,MAAM;AACR,aAAO,IAAI,IAAI,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,EAAG;AAC7C,UAAI,KAAK,IAAI,OAAQ;AACrB,aAAO,IAAI,GAAG;AAAA,IAChB,OAAO;AACL,aAAO;AACP,UAAI,IAAI,CAAC,MAAM,EAAG;AAAA,IACpB;AAAA,EACF;AACA,SAAO;AACT;AAMO,MAAM,OAAO,UAAU;AAAA,EAC5B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM,EAAE,IAAI,OAAO,MAAM,UAAU,QAAQ,OAAO,GAAG;AACnD,UAAM,QAAQ;AACd,QAAI,UAAU;AACd,UAAM,SAAS,MAAM;AACnB,YAAM,OAAO,UAAU,SAAS,MAAM,KAAK;AAC3C,UAAI,SAAS,MAAM,OAAO;AACxB,cAAM,QAAQ;AACd,cAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;AAAA,MAC3D;AAAA,IACF;AACA,WAAO,OAAO,SAAS,MAAM;AAC7B,QAAI,KAAK,IAAI,SAAS,GAAG;AACvB,aAAO,MAAM;AACX,kBAAU,OAAO,SAAS,KAAK,EAAE;AACjC,eAAO;AAAA,MACT,CAAC;AAAA,IACH,MAAO,QAAO;AAAA,EAChB;AACF,CAAC;",
+  "sourcesContent": ["import { dir } from '../def.js';\n\nconst slots: Record<string, RegExp> = { '9': /\\d/, a: /[a-zA-Z]/, '*': /[a-zA-Z0-9]/ };\n\n/** Format raw input against a mask: `9` digit, `a` letter, `*` either, anything else literal. */\nexport const applyMask = (mask: string, raw: string): string => {\n  let out = '';\n  let i = 0;\n  for (const m of mask) {\n    if (i >= raw.length) break;\n    const slot = slots[m];\n    if (slot) {\n      while (i < raw.length && !slot.test(raw[i])) i++;\n      if (i >= raw.length) break;\n      out += raw[i++];\n    } else {\n      out += m;\n      if (raw[i] === m) i++;\n    }\n  }\n  return out;\n};\n\n/**\n * Formats the input as the user types: `mask=\"(999) 999-9999\"`. The value is the mask itself;\n * add `__dynamic` to evaluate it as an expression instead (`mask__dynamic=\"$isUS ? '999-999' : '9999'\"`).\n */\nexport const mask = dir('mask', 38, ({ el, evaluate, listen, effect }) => {\n  const input = el as HTMLInputElement;\n  let pattern = '';\n  const format = () => {\n    const next = applyMask(pattern, input.value);\n    if (next !== input.value) {\n      const pos = input.selectionStart;\n      const atEnd = pos === null || pos >= input.value.length;\n      input.value = next;\n      if (!atEnd) input.setSelectionRange(pos, pos);\n      input.dispatchEvent(new Event('input', { bubbles: true })); // let `bind` see the formatted value\n    }\n  };\n  listen(input, 'input', format);\n  // Literal by default; with `__dynamic` the value is an expression and the mask follows its signals.\n  effect(() => {\n    pattern = String(evaluate() ?? '');\n    format();\n  });\n});\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAEpB,MAAM,QAAgC,EAAE,KAAK,MAAM,GAAG,YAAY,KAAK,cAAc;AAG9E,MAAM,YAAY,CAACA,OAAc,QAAwB;AAC9D,MAAI,MAAM;AACV,MAAI,IAAI;AACR,aAAW,KAAKA,OAAM;AACpB,QAAI,KAAK,IAAI,OAAQ;AACrB,UAAM,OAAO,MAAM,CAAC;AACpB,QAAI,MAAM;AACR,aAAO,IAAI,IAAI,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,EAAG;AAC7C,UAAI,KAAK,IAAI,OAAQ;AACrB,aAAO,IAAI,GAAG;AAAA,IAChB,OAAO;AACL,aAAO;AACP,UAAI,IAAI,CAAC,MAAM,EAAG;AAAA,IACpB;AAAA,EACF;AACA,SAAO;AACT;AAMO,MAAM,OAAO,IAAI,QAAQ,IAAI,CAAC,EAAE,IAAI,UAAU,QAAQ,OAAO,MAAM;AACxE,QAAM,QAAQ;AACd,MAAI,UAAU;AACd,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,UAAU,SAAS,MAAM,KAAK;AAC3C,QAAI,SAAS,MAAM,OAAO;AACxB,YAAM,MAAM,MAAM;AAClB,YAAM,QAAQ,QAAQ,QAAQ,OAAO,MAAM,MAAM;AACjD,YAAM,QAAQ;AACd,UAAI,CAAC,MAAO,OAAM,kBAAkB,KAAK,GAAG;AAC5C,YAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;AAAA,IAC3D;AAAA,EACF;AACA,SAAO,OAAO,SAAS,MAAM;AAE7B,SAAO,MAAM;AACX,cAAU,OAAO,SAAS,KAAK,EAAE;AACjC,WAAO;AAAA,EACT,CAAC;AACH,CAAC;",
   "names": ["mask"]
 }

package/dist/plugins/directives/media-query.d.ts

@@ -1,2 +1,5 @@
-/** `match-media:is-dark="'prefers-color-scheme: dark'"` keeps a boolean signal in sync. */
+/**
+ * Keeps a boolean signal in step with a media query: `match-media:dark="(prefers-color-scheme: dark)"`.
+ * The value is a literal; `__dynamic` makes it an expression that can read signals.
+ */
 export declare const matchMedia: import("../../kernel/contracts.js").AttributePlugin;

package/dist/plugins/directives/media-query.js

@@ -1,18 +1,18 @@
-import { attribute } from "../../kernel/index.js";
-const matchMedia = attribute({
-  name: "match-media",
-  key: "required",
-  value: "required",
-  mount({ cased, evaluate, store, listen }) {
+import { dir } from "../def.js";
+const matchMedia = dir("match-media", 37, ({ cased, evaluate, store, effect, cleanup }) => {
+  const path = cased();
+  let mql;
+  const sync = () => store.set(path, !!mql?.matches);
+  const stop = () => mql?.removeEventListener("change", sync);
+  effect(() => {
     let q = String(evaluate()).trim();
-    if (!/^[(a-z]/.test(q) || !q.startsWith("(") && q.includes(":") && !/^(not|only|all|screen|print)\b/.test(q))
-      q = `(${q})`;
-    const mql = window.matchMedia(q);
-    const path = cased();
-    const sync = () => store.set(path, mql.matches);
+    if (/^[\w-]+\s*:/.test(q)) q = `(${q})`;
+    stop();
+    mql = window.matchMedia(q);
     sync();
-    listen(mql, "change", sync);
-  }
+    mql.addEventListener("change", sync);
+  });
+  cleanup(stop);
 });
 export {
   matchMedia

package/dist/plugins/directives/media-query.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/media-query.ts"],
-  "sourcesContent": ["import { attribute } from '../../kernel/index.js';\n\n/** `match-media:is-dark=\"'prefers-color-scheme: dark'\"` keeps a boolean signal in sync. */\nexport const matchMedia = attribute({\n  name: 'match-media',\n  key: 'required',\n  value: 'required',\n  mount({ cased, evaluate, store, listen }) {\n    let q = String(evaluate()).trim();\n    if (!/^[(a-z]/.test(q) || (!q.startsWith('(') && q.includes(':') && !/^(not|only|all|screen|print)\\b/.test(q)))\n      q = `(${q})`;\n    const mql = window.matchMedia(q);\n    const path = cased();\n    const sync = () => store.set(path, mql.matches);\n    sync();\n    listen(mql, 'change', sync);\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAGnB,MAAM,aAAa,UAAU;AAAA,EAClC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM,EAAE,OAAO,UAAU,OAAO,OAAO,GAAG;AACxC,QAAI,IAAI,OAAO,SAAS,CAAC,EAAE,KAAK;AAChC,QAAI,CAAC,UAAU,KAAK,CAAC,KAAM,CAAC,EAAE,WAAW,GAAG,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,iCAAiC,KAAK,CAAC;AAC1G,UAAI,IAAI,CAAC;AACX,UAAM,MAAM,OAAO,WAAW,CAAC;AAC/B,UAAM,OAAO,MAAM;AACnB,UAAM,OAAO,MAAM,MAAM,IAAI,MAAM,IAAI,OAAO;AAC9C,SAAK;AACL,WAAO,KAAK,UAAU,IAAI;AAAA,EAC5B;AACF,CAAC;",
+  "sourcesContent": ["import { dir } from '../def.js';\n\n/**\n * Keeps a boolean signal in step with a media query: `match-media:dark=\"(prefers-color-scheme: dark)\"`.\n * The value is a literal; `__dynamic` makes it an expression that can read signals.\n */\nexport const matchMedia = dir('match-media', 37, ({ cased, evaluate, store, effect, cleanup }) => {\n  const path = cased();\n  let mql: MediaQueryList | undefined;\n  const sync = () => store.set(path, !!mql?.matches);\n  const stop = () => mql?.removeEventListener('change', sync);\n  effect(() => {\n    let q = String(evaluate()).trim();\n    if (/^[\\w-]+\\s*:/.test(q)) q = `(${q})`; // a bare `feature: value` pair gets its parentheses\n    stop();\n    mql = window.matchMedia(q);\n    sync();\n    mql.addEventListener('change', sync);\n  });\n  cleanup(stop);\n});\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAMb,MAAM,aAAa,IAAI,eAAe,IAAI,CAAC,EAAE,OAAO,UAAU,OAAO,QAAQ,QAAQ,MAAM;AAChG,QAAM,OAAO,MAAM;AACnB,MAAI;AACJ,QAAM,OAAO,MAAM,MAAM,IAAI,MAAM,CAAC,CAAC,KAAK,OAAO;AACjD,QAAM,OAAO,MAAM,KAAK,oBAAoB,UAAU,IAAI;AAC1D,SAAO,MAAM;AACX,QAAI,IAAI,OAAO,SAAS,CAAC,EAAE,KAAK;AAChC,QAAI,cAAc,KAAK,CAAC,EAAG,KAAI,IAAI,CAAC;AACpC,SAAK;AACL,UAAM,OAAO,WAAW,CAAC;AACzB,SAAK;AACL,QAAI,iBAAiB,UAAU,IAAI;AAAA,EACrC,CAAC;AACD,UAAQ,IAAI;AACd,CAAC;",
   "names": []
 }

package/dist/plugins/directives/on-mount.js

@@ -1,15 +1,7 @@
-import { attribute, withTiming, withViewTransition } from "../../kernel/index.js";
-const init = attribute({
-  name: "init",
-  key: "forbidden",
-  value: "required",
-  returns: false,
-  mount({ mods, evaluate }) {
-    withTiming(
-      withViewTransition(() => evaluate(), mods),
-      mods
-    )();
-  }
+import { withTiming } from "../../kernel/index.js";
+import { dir } from "../def.js";
+const init = dir("init", 22, ({ mods, evaluate, cleanup }) => {
+  withTiming(() => evaluate(), mods, cleanup)();
 });
 export {
   init

package/dist/plugins/directives/on-mount.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/on-mount.ts"],
-  "sourcesContent": ["import { attribute, withTiming, withViewTransition } from '../../kernel/index.js';\n\n/** Runs once when the element is mounted. Supports `__delay.500ms` and `__viewtransition`. */\nexport const init = attribute({\n  name: 'init',\n  key: 'forbidden',\n  value: 'required',\n  returns: false,\n  mount({ mods, evaluate }) {\n    withTiming(\n      withViewTransition(() => evaluate(), mods),\n      mods,\n    )();\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,WAAW,YAAY,0BAA0B;AAGnD,MAAM,OAAO,UAAU;AAAA,EAC5B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM,EAAE,MAAM,SAAS,GAAG;AACxB;AAAA,MACE,mBAAmB,MAAM,SAAS,GAAG,IAAI;AAAA,MACzC;AAAA,IACF,EAAE;AAAA,EACJ;AACF,CAAC;",
+  "sourcesContent": ["import { withTiming } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\n/** Runs once when the element is mounted. Supports `__delay.500ms` and `__viewtransition`. */\nexport const init = dir('init', 22, ({ mods, evaluate, cleanup }) => {\n  withTiming(() => evaluate(), mods, cleanup)();\n});\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,WAAW;AAGb,MAAM,OAAO,IAAI,QAAQ,IAAI,CAAC,EAAE,MAAM,UAAU,QAAQ,MAAM;AACnE,aAAW,MAAM,SAAS,GAAG,MAAM,OAAO,EAAE;AAC9C,CAAC;",
   "names": []
 }

package/dist/plugins/directives/patch-listener.js

@@ -1,34 +1,39 @@
-import { attribute, withTiming } from "../../kernel/index.js";
+import { withTiming } from "../../kernel/index.js";
+import { dir } from "../def.js";
 const touches = (patch, path) => {
   let cur = patch;
   for (const k of path.split(".")) {
-    if (cur == null || typeof cur !== "object" || !(k in cur)) return false;
+    if (cur === null) return true;
+    if (typeof cur !== "object" || !(k in cur)) return false;
     cur = cur[k];
   }
   return true;
 };
-const onSignalPatch = attribute({
-  name: "on-signal-patch",
-  value: "required",
-  returns: false,
-  args: ["patch"],
-  mount({ key, cased, mods, evaluate, listen }) {
+const onSignalPatch = dir(
+  "on-signal-patch",
+  20,
+  ({ key, cased, mods, evaluate, listen, cleanup }) => {
     const path = key ? cased() : "";
     let running = false;
-    const run = withTiming((patch) => {
-      if (running) return;
-      running = true;
-      try {
-        evaluate(void 0, patch);
-      } finally {
-        running = false;
-      }
-    }, mods);
+    const run = withTiming(
+      (patch) => {
+        if (running) return;
+        running = true;
+        try {
+          evaluate(void 0, patch);
+        } finally {
+          running = false;
+        }
+      },
+      mods,
+      cleanup
+    );
     listen(document, "sigmx-signal-patch", (e) => {
       if (!path || touches(e.detail, path)) run(e.detail);
     });
-  }
-});
+  },
+  ["patch"]
+);
 export {
   onSignalPatch
 };

package/dist/plugins/directives/patch-listener.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/patch-listener.ts"],
-  "sourcesContent": ["import { attribute, withTiming } from '../../kernel/index.js';\n\nconst touches = (patch: Record<string, any>, path: string): boolean => {\n  let cur: any = patch;\n  for (const k of path.split('.')) {\n    if (cur == null || typeof cur !== 'object' || !(k in cur)) return false;\n    cur = cur[k];\n  }\n  return true;\n};\n\n/**\n * Runs after signals change, with the patch as `patch`. A key narrows it to one path:\n * `on-signal-patch:user.name=\"...\"`.\n */\nexport const onSignalPatch = attribute({\n  name: 'on-signal-patch',\n  value: 'required',\n  returns: false,\n  args: ['patch'],\n  mount({ key, cased, mods, evaluate, listen }) {\n    const path = key ? cased() : '';\n    let running = false;\n    const run = withTiming((patch: Record<string, any>) => {\n      if (running) return;\n      running = true;\n      try {\n        evaluate(undefined, patch);\n      } finally {\n        running = false;\n      }\n    }, mods);\n    listen(document, 'sigmx-signal-patch', (e: CustomEvent) => {\n      if (!path || touches(e.detail, path)) run(e.detail);\n    });\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,WAAW,kBAAkB;AAEtC,MAAM,UAAU,CAAC,OAA4B,SAA0B;AACrE,MAAI,MAAW;AACf,aAAW,KAAK,KAAK,MAAM,GAAG,GAAG;AAC/B,QAAI,OAAO,QAAQ,OAAO,QAAQ,YAAY,EAAE,KAAK,KAAM,QAAO;AAClE,UAAM,IAAI,CAAC;AAAA,EACb;AACA,SAAO;AACT;AAMO,MAAM,gBAAgB,UAAU;AAAA,EACrC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM,CAAC,OAAO;AAAA,EACd,MAAM,EAAE,KAAK,OAAO,MAAM,UAAU,OAAO,GAAG;AAC5C,UAAM,OAAO,MAAM,MAAM,IAAI;AAC7B,QAAI,UAAU;AACd,UAAM,MAAM,WAAW,CAAC,UAA+B;AACrD,UAAI,QAAS;AACb,gBAAU;AACV,UAAI;AACF,iBAAS,QAAW,KAAK;AAAA,MAC3B,UAAE;AACA,kBAAU;AAAA,MACZ;AAAA,IACF,GAAG,IAAI;AACP,WAAO,UAAU,sBAAsB,CAAC,MAAmB;AACzD,UAAI,CAAC,QAAQ,QAAQ,EAAE,QAAQ,IAAI,EAAG,KAAI,EAAE,MAAM;AAAA,IACpD,CAAC;AAAA,EACH;AACF,CAAC;",
+  "sourcesContent": ["import { withTiming } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\nconst touches = (patch: Record<string, any>, path: string): boolean => {\n  let cur: any = patch;\n  for (const k of path.split('.')) {\n    if (cur === null) return true; // an ancestor was removed: everything under it changed\n    if (typeof cur !== 'object' || !(k in cur)) return false;\n    cur = cur[k];\n  }\n  return true;\n};\n\n/**\n * Runs after signals change, with the patch as `patch`. A key narrows it to one path:\n * `on-signal-patch:user.name=\"...\"`.\n */\nexport const onSignalPatch = dir(\n  'on-signal-patch',\n  20,\n  ({ key, cased, mods, evaluate, listen, cleanup }) => {\n    const path = key ? cased() : '';\n    let running = false;\n    const run = withTiming(\n      (patch: Record<string, any>) => {\n        if (running) return;\n        running = true;\n        try {\n          evaluate(undefined, patch);\n        } finally {\n          running = false;\n        }\n      },\n      mods,\n      cleanup,\n    );\n    listen(document, 'sigmx-signal-patch', (e: CustomEvent) => {\n      if (!path || touches(e.detail, path)) run(e.detail);\n    });\n  },\n  ['patch'],\n);\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,WAAW;AAEpB,MAAM,UAAU,CAAC,OAA4B,SAA0B;AACrE,MAAI,MAAW;AACf,aAAW,KAAK,KAAK,MAAM,GAAG,GAAG;AAC/B,QAAI,QAAQ,KAAM,QAAO;AACzB,QAAI,OAAO,QAAQ,YAAY,EAAE,KAAK,KAAM,QAAO;AACnD,UAAM,IAAI,CAAC;AAAA,EACb;AACA,SAAO;AACT;AAMO,MAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,CAAC,EAAE,KAAK,OAAO,MAAM,UAAU,QAAQ,QAAQ,MAAM;AACnD,UAAM,OAAO,MAAM,MAAM,IAAI;AAC7B,QAAI,UAAU;AACd,UAAM,MAAM;AAAA,MACV,CAAC,UAA+B;AAC9B,YAAI,QAAS;AACb,kBAAU;AACV,YAAI;AACF,mBAAS,QAAW,KAAK;AAAA,QAC3B,UAAE;AACA,oBAAU;AAAA,QACZ;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,WAAO,UAAU,sBAAsB,CAAC,MAAmB;AACzD,UAAI,CAAC,QAAQ,QAAQ,EAAE,QAAQ,IAAI,EAAG,KAAI,EAAE,MAAM;AAAA,IACpD,CAAC;AAAA,EACH;AAAA,EACA,CAAC,OAAO;AACV;",
   "names": []
 }

package/dist/plugins/directives/remove-me.js

@@ -1,11 +1,10 @@
-import { attribute, toMs } from "../../kernel/index.js";
-const removeMe = attribute({
-  name: "remove-me",
-  key: "forbidden",
-  mount({ el, value, cleanup }) {
-    const t = setTimeout(() => el.remove(), toMs([value], 0));
-    cleanup(() => clearTimeout(t));
-  }
+import { toMs } from "../../kernel/index.js";
+import { dir } from "../def.js";
+const removeMe = dir("remove-me", 34, ({ el, evaluate, value, cleanup, error }) => {
+  const delay = value ? String(evaluate()) : "";
+  if (delay && toMs([delay], -1) < 0) throw error(`bad delay "${delay}"`);
+  const t = setTimeout(() => el.remove(), toMs([delay], 0));
+  cleanup(() => clearTimeout(t));
 });
 export {
   removeMe

package/dist/plugins/directives/remove-me.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/remove-me.ts"],
-  "sourcesContent": ["import { attribute, toMs } from '../../kernel/index.js';\n\n/** Removes the element after a delay: `remove-me=\"3s\"` (default immediately). Handy for toasts. */\nexport const removeMe = attribute({\n  name: 'remove-me',\n  key: 'forbidden',\n  mount({ el, value, cleanup }) {\n    const t = setTimeout(() => el.remove(), toMs([value], 0));\n    cleanup(() => clearTimeout(t));\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,WAAW,YAAY;AAGzB,MAAM,WAAW,UAAU;AAAA,EAChC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM,EAAE,IAAI,OAAO,QAAQ,GAAG;AAC5B,UAAM,IAAI,WAAW,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;AACxD,YAAQ,MAAM,aAAa,CAAC,CAAC;AAAA,EAC/B;AACF,CAAC;",
+  "sourcesContent": ["import { toMs } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\n/** Removes the element after a delay: `remove-me=\"3s\"` (default immediately). Handy for toasts. */\nexport const removeMe = dir('remove-me', 34, ({ el, evaluate, value, cleanup, error }) => {\n  const delay = value ? String(evaluate()) : ''; // a literal delay, or an expression with `__dynamic`\n  if (delay && toMs([delay], -1) < 0) throw error(`bad delay \"${delay}\"`);\n  const t = setTimeout(() => el.remove(), toMs([delay], 0));\n  cleanup(() => clearTimeout(t));\n});\n"],
+  "mappings": "AAAA,SAAS,YAAY;AACrB,SAAS,WAAW;AAGb,MAAM,WAAW,IAAI,aAAa,IAAI,CAAC,EAAE,IAAI,UAAU,OAAO,SAAS,MAAM,MAAM;AACxF,QAAM,QAAQ,QAAQ,OAAO,SAAS,CAAC,IAAI;AAC3C,MAAI,SAAS,KAAK,CAAC,KAAK,GAAG,EAAE,IAAI,EAAG,OAAM,MAAM,cAAc,KAAK,GAAG;AACtE,QAAM,IAAI,WAAW,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;AACxD,UAAQ,MAAM,aAAa,CAAC,CAAC;AAC/B,CAAC;",
   "names": []
 }

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

@@ -1,2 +1,5 @@
-/** Scrolls the element into view on mount. Modifiers: smooth/instant/auto, vstart..vnearest, hstart..hnearest, focus. */
+/**
+ * Scrolls the element into view when it mounts: `scroll-into-view__smooth__vcenter__focus`.
+ * Modifiers: `smooth|instant|auto`, `vstart|vcenter|vend|vnearest`, `focus`.
+ */
 export declare const scrollIntoView: import("../../kernel/contracts.js").AttributePlugin;