sigmx 0.1.0 → 0.2.0

package/dist/plugins/directives/boost.js

@@ -1,33 +1,37 @@
-import { attribute } from "../../kernel/index.js";
-const boost = attribute({
-  name: "boost",
-  key: "forbidden",
-  value: "forbidden",
-  mount({ el, mods, store, runtime, listen, error, cleanup }) {
-    const ctx = { el, store, runtime, error, cleanup };
-    const go = (url, method = "get", evt, form) => {
-      const o = form ? { contentType: "form", selector: void 0, openWhenHidden: true } : { openWhenHidden: true };
-      const p = runtime.call(method, { ...ctx, el: form ?? el, evt }, [url, o]);
-      history[mods.has("replace") ? "replaceState" : "pushState"](null, "", url);
-      Promise.resolve(p).then(() => scrollTo(0, 0));
-    };
-    listen(el, "click", (e) => {
-      const a = e.target.closest("a[href]");
-      if (!a || e.defaultPrevented || e.button || e.metaKey || e.ctrlKey || e.shiftKey || a.target || a.hasAttribute("download")) return;
-      if (a.origin !== location.origin || a.hash && a.pathname === location.pathname) return;
-      e.preventDefault();
-      go(a.href, "get", e);
-    });
-    listen(el, "submit", (e) => {
-      const form = e.target;
-      if (e.defaultPrevented || form.target) return;
-      const url = new URL(form.action || location.href);
-      if (url.origin !== location.origin) return;
-      e.preventDefault();
-      go(url.href, form.method.toLowerCase() === "post" ? "post" : "get", e, form);
-    });
-    listen(window, "popstate", () => runtime.call("get", ctx, [location.href, { openWhenHidden: true }]));
-  }
+import { dir } from "../def.js";
+const boost = dir("boost", 10, ({ el, store, runtime, listen, error, cleanup, report }) => {
+  const ctx = { el, store, runtime, error, cleanup, report };
+  let current = location.pathname + location.search;
+  const go = (url, method, evt, form) => {
+    evt.preventDefault();
+    const p = runtime.call(method, { ...ctx, el: form ?? el, evt }, [url.href, { contentType: form && "form" }]);
+    Promise.resolve(p).then((r) => {
+      const next = new URL(r && (r.redirected || form && method === "get") ? r.url : url.href);
+      current = next.pathname + next.search;
+      history.pushState(null, "", next.href);
+      const target = next.hash && document.querySelector(next.hash);
+      target ? target.scrollIntoView() : scrollTo(0, 0);
+    }, report);
+  };
+  listen(el, "click", (e) => {
+    const a = e.target.closest("a[href]");
+    if (a && !(e.defaultPrevented || e.button || e.metaKey || e.ctrlKey || e.shiftKey || a.target) && !a.hasAttribute("download") && a.origin === location.origin && !(a.hash && a.pathname === location.pathname && a.search === location.search))
+      go(new URL(a.href), "get", e);
+  });
+  listen(el, "submit", (e) => {
+    const form = e.target;
+    const attr = (name) => e.submitter?.getAttribute(`form${name}`) ?? form.getAttribute(name);
+    const method = (attr("method") ?? "get").toLowerCase();
+    const url = new URL(attr("action") || location.href, location.href);
+    if (!e.defaultPrevented && !form.target && method !== "dialog" && url.origin === location.origin)
+      go(url, method === "post" ? "post" : "get", e, form);
+  });
+  listen(window, "popstate", () => {
+    const now = location.pathname + location.search;
+    if (now === current) return;
+    current = now;
+    Promise.resolve(runtime.call("get", ctx, [location.href, {}])).then(void 0, report);
+  });
 });
 export {
   boost

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/boost.ts"],
-  "sourcesContent": ["import { attribute, type ActionCtx } from '../../kernel/index.js'\n\n/**\n * Turns same-origin links and forms inside the element into requests whose full-document response\n * is morphed into the current page, with history entries: `boost` on a container (or `body`).\n * Needs `httpGet`, `httpPost` and `applyElements`. `__replace` replaces the history entry instead.\n */\nexport const boost = attribute({\n  name: 'boost',\n  key: 'forbidden',\n  value: 'forbidden',\n  mount({ el, mods, store, runtime, listen, error, cleanup }) {\n    const ctx: ActionCtx = { el, store, runtime, error, cleanup }\n    const go = (url: string, method = 'get', evt?: Event, form?: HTMLFormElement) => {\n      const o = form ? { contentType: 'form', selector: undefined, openWhenHidden: true } : { openWhenHidden: true }\n      const p = runtime.call(method, { ...ctx, el: form ?? el, evt }, [url, o])\n      history[mods.has('replace') ? 'replaceState' : 'pushState'](null, '', url)\n      Promise.resolve(p).then(() => scrollTo(0, 0))\n    }\n    listen(el, 'click', (e: MouseEvent) => {\n      const a = (e.target as Element).closest('a[href]') as HTMLAnchorElement | null\n      if (!a || e.defaultPrevented || e.button || e.metaKey || e.ctrlKey || e.shiftKey || a.target || a.hasAttribute('download')) return\n      if (a.origin !== location.origin || a.hash && a.pathname === location.pathname) return\n      e.preventDefault()\n      go(a.href, 'get', e)\n    })\n    listen(el, 'submit', (e: SubmitEvent) => {\n      const form = e.target as HTMLFormElement\n      if (e.defaultPrevented || form.target) return\n      const url = new URL(form.action || location.href)\n      if (url.origin !== location.origin) return\n      e.preventDefault()\n      go(url.href, form.method.toLowerCase() === 'post' ? 'post' : 'get', e, form)\n    })\n    listen(window, 'popstate', () => runtime.call('get', ctx, [location.href, { openWhenHidden: true }]))\n  },\n})\n"],
-  "mappings": "AAAA,SAAS,iBAAiC;AAOnC,MAAM,QAAQ,UAAU;AAAA,EAC7B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM,EAAE,IAAI,MAAM,OAAO,SAAS,QAAQ,OAAO,QAAQ,GAAG;AAC1D,UAAM,MAAiB,EAAE,IAAI,OAAO,SAAS,OAAO,QAAQ;AAC5D,UAAM,KAAK,CAAC,KAAa,SAAS,OAAO,KAAa,SAA2B;AAC/E,YAAM,IAAI,OAAO,EAAE,aAAa,QAAQ,UAAU,QAAW,gBAAgB,KAAK,IAAI,EAAE,gBAAgB,KAAK;AAC7G,YAAM,IAAI,QAAQ,KAAK,QAAQ,EAAE,GAAG,KAAK,IAAI,QAAQ,IAAI,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC;AACxE,cAAQ,KAAK,IAAI,SAAS,IAAI,iBAAiB,WAAW,EAAE,MAAM,IAAI,GAAG;AACzE,cAAQ,QAAQ,CAAC,EAAE,KAAK,MAAM,SAAS,GAAG,CAAC,CAAC;AAAA,IAC9C;AACA,WAAO,IAAI,SAAS,CAAC,MAAkB;AACrC,YAAM,IAAK,EAAE,OAAmB,QAAQ,SAAS;AACjD,UAAI,CAAC,KAAK,EAAE,oBAAoB,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,UAAU,EAAG;AAC5H,UAAI,EAAE,WAAW,SAAS,UAAU,EAAE,QAAQ,EAAE,aAAa,SAAS,SAAU;AAChF,QAAE,eAAe;AACjB,SAAG,EAAE,MAAM,OAAO,CAAC;AAAA,IACrB,CAAC;AACD,WAAO,IAAI,UAAU,CAAC,MAAmB;AACvC,YAAM,OAAO,EAAE;AACf,UAAI,EAAE,oBAAoB,KAAK,OAAQ;AACvC,YAAM,MAAM,IAAI,IAAI,KAAK,UAAU,SAAS,IAAI;AAChD,UAAI,IAAI,WAAW,SAAS,OAAQ;AACpC,QAAE,eAAe;AACjB,SAAG,IAAI,MAAM,KAAK,OAAO,YAAY,MAAM,SAAS,SAAS,OAAO,GAAG,IAAI;AAAA,IAC7E,CAAC;AACD,WAAO,QAAQ,YAAY,MAAM,QAAQ,KAAK,OAAO,KAAK,CAAC,SAAS,MAAM,EAAE,gBAAgB,KAAK,CAAC,CAAC,CAAC;AAAA,EACtG;AACF,CAAC;",
+  "sourcesContent": ["import type { ActionCtx } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\n/**\n * Turns same-origin links and forms inside the element into requests whose full-document response\n * is morphed into the current page, with history entries: `boost` on a container (or `body`).\n * Needs `httpGet`, `httpPost` and `applyElements`.\n */\nexport const boost = dir('boost', 10, ({ el, store, runtime, listen, error, cleanup, report }) => {\n  const ctx: ActionCtx = { el, store, runtime, error, cleanup, report };\n  let current = location.pathname + location.search;\n  const go = (url: URL, method: string, evt: Event, form?: HTMLFormElement) => {\n    evt.preventDefault();\n    const p = runtime.call(method, { ...ctx, el: form ?? el, evt }, [url.href, { contentType: form && 'form' }]);\n    Promise.resolve(p).then((r) => {\n      // The address becomes the final URL: redirects are followed, GET forms carry their fields.\n      const next = new URL(r && (r.redirected || (form && method === 'get')) ? r.url : url.href);\n      current = next.pathname + next.search;\n      history.pushState(null, '', next.href);\n      const target = next.hash && document.querySelector(next.hash);\n      target ? target.scrollIntoView() : scrollTo(0, 0);\n    }, report);\n  };\n  listen(el, 'click', (e: MouseEvent) => {\n    const a = (e.target as Element).closest('a[href]') as HTMLAnchorElement | null;\n    if (\n      a &&\n      !(e.defaultPrevented || e.button || e.metaKey || e.ctrlKey || e.shiftKey || a.target) &&\n      !a.hasAttribute('download') &&\n      a.origin === location.origin &&\n      !(a.hash && a.pathname === location.pathname && a.search === location.search)\n    )\n      go(new URL(a.href), 'get', e);\n  });\n  listen(el, 'submit', (e: SubmitEvent) => {\n    const form = e.target as HTMLFormElement;\n    // Attributes, not properties: an <input name=\"action\"> shadows form.action; the submitter may override.\n    const attr = (name: string) => e.submitter?.getAttribute(`form${name}`) ?? form.getAttribute(name);\n    const method = (attr('method') ?? 'get').toLowerCase();\n    const url = new URL(attr('action') || location.href, location.href);\n    if (!e.defaultPrevented && !form.target && method !== 'dialog' && url.origin === location.origin)\n      go(url, method === 'post' ? 'post' : 'get', e, form);\n  });\n  listen(window, 'popstate', () => {\n    const now = location.pathname + location.search;\n    if (now === current) return; // a hash change: nothing to fetch\n    current = now;\n    Promise.resolve(runtime.call('get', ctx, [location.href, {}])).then(undefined, report);\n  });\n});\n"],
+  "mappings": "AACA,SAAS,WAAW;AAOb,MAAM,QAAQ,IAAI,SAAS,IAAI,CAAC,EAAE,IAAI,OAAO,SAAS,QAAQ,OAAO,SAAS,OAAO,MAAM;AAChG,QAAM,MAAiB,EAAE,IAAI,OAAO,SAAS,OAAO,SAAS,OAAO;AACpE,MAAI,UAAU,SAAS,WAAW,SAAS;AAC3C,QAAM,KAAK,CAAC,KAAU,QAAgB,KAAY,SAA2B;AAC3E,QAAI,eAAe;AACnB,UAAM,IAAI,QAAQ,KAAK,QAAQ,EAAE,GAAG,KAAK,IAAI,QAAQ,IAAI,IAAI,GAAG,CAAC,IAAI,MAAM,EAAE,aAAa,QAAQ,OAAO,CAAC,CAAC;AAC3G,YAAQ,QAAQ,CAAC,EAAE,KAAK,CAAC,MAAM;AAE7B,YAAM,OAAO,IAAI,IAAI,MAAM,EAAE,cAAe,QAAQ,WAAW,SAAU,EAAE,MAAM,IAAI,IAAI;AACzF,gBAAU,KAAK,WAAW,KAAK;AAC/B,cAAQ,UAAU,MAAM,IAAI,KAAK,IAAI;AACrC,YAAM,SAAS,KAAK,QAAQ,SAAS,cAAc,KAAK,IAAI;AAC5D,eAAS,OAAO,eAAe,IAAI,SAAS,GAAG,CAAC;AAAA,IAClD,GAAG,MAAM;AAAA,EACX;AACA,SAAO,IAAI,SAAS,CAAC,MAAkB;AACrC,UAAM,IAAK,EAAE,OAAmB,QAAQ,SAAS;AACjD,QACE,KACA,EAAE,EAAE,oBAAoB,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,WAC9E,CAAC,EAAE,aAAa,UAAU,KAC1B,EAAE,WAAW,SAAS,UACtB,EAAE,EAAE,QAAQ,EAAE,aAAa,SAAS,YAAY,EAAE,WAAW,SAAS;AAEtE,SAAG,IAAI,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC;AAAA,EAChC,CAAC;AACD,SAAO,IAAI,UAAU,CAAC,MAAmB;AACvC,UAAM,OAAO,EAAE;AAEf,UAAM,OAAO,CAAC,SAAiB,EAAE,WAAW,aAAa,OAAO,IAAI,EAAE,KAAK,KAAK,aAAa,IAAI;AACjG,UAAM,UAAU,KAAK,QAAQ,KAAK,OAAO,YAAY;AACrD,UAAM,MAAM,IAAI,IAAI,KAAK,QAAQ,KAAK,SAAS,MAAM,SAAS,IAAI;AAClE,QAAI,CAAC,EAAE,oBAAoB,CAAC,KAAK,UAAU,WAAW,YAAY,IAAI,WAAW,SAAS;AACxF,SAAG,KAAK,WAAW,SAAS,SAAS,OAAO,GAAG,IAAI;AAAA,EACvD,CAAC;AACD,SAAO,QAAQ,YAAY,MAAM;AAC/B,UAAM,MAAM,SAAS,WAAW,SAAS;AACzC,QAAI,QAAQ,QAAS;AACrB,cAAU;AACV,YAAQ,QAAQ,QAAQ,KAAK,OAAO,KAAK,CAAC,SAAS,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,QAAW,MAAM;AAAA,EACvF,CAAC;AACH,CAAC;",
   "names": []
 }

package/dist/plugins/directives/busy-flag.js

@@ -1,19 +1,16 @@
-import { attribute } from "../../kernel/index.js";
-const indicator = attribute({
-  name: "indicator",
-  mount({ el, key, value, cased, store, listen }) {
-    const path = key ? cased() : value.trim();
-    const mine = /* @__PURE__ */ new Set();
-    store.set(path, false);
-    listen(document, "sigmx-fetch", (e) => {
-      const { el: from, type, rid } = e.detail;
-      if (type === "started" && (from === el || el.contains(from))) mine.add(rid);
-      else if (type === "finished") mine.delete(rid);
-      else return;
-      store.set(path, mine.size > 0);
-    });
-    return () => store.set(path, false);
-  }
+import { dir } from "../def.js";
+const indicator = dir("indicator", 0, ({ el, key, value, cased, store, listen }) => {
+  const path = key ? cased() : value.trim();
+  const mine = /* @__PURE__ */ new Set();
+  store.set(path, false);
+  listen(document, "sigmx-fetch", (e) => {
+    const { el: from, type, rid } = e.detail;
+    if (type === "started" && el.contains(from)) mine.add(rid);
+    else if (type === "finished") mine.delete(rid);
+    else return;
+    store.set(path, mine.size > 0);
+  });
+  return () => store.set(path, false);
 });
 export {
   indicator

package/dist/plugins/directives/busy-flag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/busy-flag.ts"],
-  "sourcesContent": ["import { attribute } from '../../kernel/index.js'\n\n/** A boolean signal that is true while a request started from this element (or one inside it) is in flight. */\nexport const indicator = attribute({\n  name: 'indicator',\n  mount({ el, key, value, cased, store, listen }) {\n    const path = key ? cased() : value.trim()\n    // Requests are remembered by id at `started`, because the element that made one may have been\n    // morphed away by the time it finishes.\n    const mine = new Set<number>()\n    store.set(path, false)\n    listen(document, 'sigmx-fetch', (e: CustomEvent<{ el: Element; type: string; rid: number }>) => {\n      const { el: from, type, rid } = e.detail\n      if (type === 'started' && (from === el || el.contains(from))) mine.add(rid)\n      else if (type === 'finished') mine.delete(rid)\n      else return\n      store.set(path, mine.size > 0)\n    })\n    return () => store.set(path, false)\n  },\n})\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAGnB,MAAM,YAAY,UAAU;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,EAAE,IAAI,KAAK,OAAO,OAAO,OAAO,OAAO,GAAG;AAC9C,UAAM,OAAO,MAAM,MAAM,IAAI,MAAM,KAAK;AAGxC,UAAM,OAAO,oBAAI,IAAY;AAC7B,UAAM,IAAI,MAAM,KAAK;AACrB,WAAO,UAAU,eAAe,CAAC,MAA+D;AAC9F,YAAM,EAAE,IAAI,MAAM,MAAM,IAAI,IAAI,EAAE;AAClC,UAAI,SAAS,cAAc,SAAS,MAAM,GAAG,SAAS,IAAI,GAAI,MAAK,IAAI,GAAG;AAAA,eACjE,SAAS,WAAY,MAAK,OAAO,GAAG;AAAA,UACxC;AACL,YAAM,IAAI,MAAM,KAAK,OAAO,CAAC;AAAA,IAC/B,CAAC;AACD,WAAO,MAAM,MAAM,IAAI,MAAM,KAAK;AAAA,EACpC;AACF,CAAC;",
+  "sourcesContent": ["import { dir } from '../def.js';\n\n/** A boolean signal that is true while a request started from this element (or one inside it) is in flight. */\nexport const indicator = dir('indicator', 0, ({ el, key, value, cased, store, listen }) => {\n  const path = key ? cased() : value.trim();\n  // Requests are remembered by id at `started`, because the element that made one may have been\n  // morphed away by the time it finishes.\n  const mine = new Set<number>();\n  store.set(path, false);\n  listen(document, 'sigmx-fetch', (e: CustomEvent<{ el: Element; type: string; rid: number }>) => {\n    const { el: from, type, rid } = e.detail;\n    if (type === 'started' && el.contains(from)) mine.add(rid);\n    else if (type === 'finished') mine.delete(rid);\n    else return;\n    store.set(path, mine.size > 0);\n  });\n  return () => store.set(path, false);\n});\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAGb,MAAM,YAAY,IAAI,aAAa,GAAG,CAAC,EAAE,IAAI,KAAK,OAAO,OAAO,OAAO,OAAO,MAAM;AACzF,QAAM,OAAO,MAAM,MAAM,IAAI,MAAM,KAAK;AAGxC,QAAM,OAAO,oBAAI,IAAY;AAC7B,QAAM,IAAI,MAAM,KAAK;AACrB,SAAO,UAAU,eAAe,CAAC,MAA+D;AAC9F,UAAM,EAAE,IAAI,MAAM,MAAM,IAAI,IAAI,EAAE;AAClC,QAAI,SAAS,aAAa,GAAG,SAAS,IAAI,EAAG,MAAK,IAAI,GAAG;AAAA,aAChD,SAAS,WAAY,MAAK,OAAO,GAAG;AAAA,QACxC;AACL,UAAM,IAAI,MAAM,KAAK,OAAO,CAAC;AAAA,EAC/B,CAAC;AACD,SAAO,MAAM,MAAM,IAAI,MAAM,KAAK;AACpC,CAAC;",
   "names": []
 }

package/dist/plugins/directives/class-toggle.js

@@ -1,20 +1,21 @@
-import { attribute } from "../../kernel/index.js";
-const className = attribute({
-  name: "class",
-  value: "required",
-  mount({ el, key, cased, evaluate, effect }) {
-    const applied = /* @__PURE__ */ new Set();
-    effect(() => {
-      const map = key ? { [cased("kebab")]: evaluate() } : evaluate();
-      for (const k in map) {
-        for (const name of k.split(/\s+/).filter(Boolean)) {
-          el.classList.toggle(name, !!map[k]);
-          map[k] ? applied.add(name) : applied.delete(name);
-        }
+import { dir } from "../def.js";
+const className = dir("class", 4, ({ el, key, cased, evaluate, effect }) => {
+  const applied = /* @__PURE__ */ new Set();
+  effect(() => {
+    const map = key ? { [cased("kebab")]: evaluate() } : evaluate();
+    const seen = /* @__PURE__ */ new Set();
+    for (const k in map) {
+      for (const name of k.split(/\s+/).filter(Boolean)) {
+        seen.add(name);
+        if (map[k]) {
+          if (!el.classList.contains(name)) applied.add(name);
+          el.classList.add(name);
+        } else if (applied.delete(name)) el.classList.remove(name);
       }
-    });
-    return () => el.classList.remove(...applied);
-  }
+    }
+    for (const name of applied) if (!seen.has(name) && applied.delete(name)) el.classList.remove(name);
+  });
+  return () => el.classList.remove(...applied);
 });
 export {
   className

package/dist/plugins/directives/class-toggle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/class-toggle.ts"],
-  "sourcesContent": ["import { attribute } from '../../kernel/index.js'\n\n/** `class:active=\"expr\"` or `class=\"{ active: expr, 'a b': expr }\"`. */\nexport const className = attribute({\n  name: 'class',\n  value: 'required',\n  mount({ el, key, cased, evaluate, effect }) {\n    const applied = new Set<string>()\n    effect(() => {\n      const map: Record<string, unknown> = key ? { [cased('kebab')]: evaluate() } : evaluate()\n      for (const k in map) {\n        for (const name of k.split(/\\s+/).filter(Boolean)) {\n          el.classList.toggle(name, !!map[k])\n          map[k] ? applied.add(name) : applied.delete(name)\n        }\n      }\n    })\n    return () => el.classList.remove(...applied)\n  },\n})\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAGnB,MAAM,YAAY,UAAU;AAAA,EACjC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM,EAAE,IAAI,KAAK,OAAO,UAAU,OAAO,GAAG;AAC1C,UAAM,UAAU,oBAAI,IAAY;AAChC,WAAO,MAAM;AACX,YAAM,MAA+B,MAAM,EAAE,CAAC,MAAM,OAAO,CAAC,GAAG,SAAS,EAAE,IAAI,SAAS;AACvF,iBAAW,KAAK,KAAK;AACnB,mBAAW,QAAQ,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO,GAAG;AACjD,aAAG,UAAU,OAAO,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAClC,cAAI,CAAC,IAAI,QAAQ,IAAI,IAAI,IAAI,QAAQ,OAAO,IAAI;AAAA,QAClD;AAAA,MACF;AAAA,IACF,CAAC;AACD,WAAO,MAAM,GAAG,UAAU,OAAO,GAAG,OAAO;AAAA,EAC7C;AACF,CAAC;",
+  "sourcesContent": ["import { dir } from '../def.js';\n\n/** `class:active=\"expr\"` or `class=\"{ active: expr, 'a b': expr }\"`. */\nexport const className = dir('class', 4, ({ el, key, cased, evaluate, effect }) => {\n  const applied = new Set<string>(); // classes this directive turned on (and that were not already there)\n  effect(() => {\n    const map: Record<string, unknown> = key ? { [cased('kebab')]: evaluate() } : evaluate();\n    const seen = new Set<string>();\n    for (const k in map) {\n      for (const name of k.split(/\\s+/).filter(Boolean)) {\n        seen.add(name);\n        if (map[k]) {\n          if (!el.classList.contains(name)) applied.add(name);\n          el.classList.add(name);\n        } else if (applied.delete(name)) el.classList.remove(name);\n      }\n    }\n    for (const name of applied) if (!seen.has(name) && applied.delete(name)) el.classList.remove(name); // key gone from the object\n  });\n  return () => el.classList.remove(...applied);\n});\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAGb,MAAM,YAAY,IAAI,SAAS,GAAG,CAAC,EAAE,IAAI,KAAK,OAAO,UAAU,OAAO,MAAM;AACjF,QAAM,UAAU,oBAAI,IAAY;AAChC,SAAO,MAAM;AACX,UAAM,MAA+B,MAAM,EAAE,CAAC,MAAM,OAAO,CAAC,GAAG,SAAS,EAAE,IAAI,SAAS;AACvF,UAAM,OAAO,oBAAI,IAAY;AAC7B,eAAW,KAAK,KAAK;AACnB,iBAAW,QAAQ,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO,GAAG;AACjD,aAAK,IAAI,IAAI;AACb,YAAI,IAAI,CAAC,GAAG;AACV,cAAI,CAAC,GAAG,UAAU,SAAS,IAAI,EAAG,SAAQ,IAAI,IAAI;AAClD,aAAG,UAAU,IAAI,IAAI;AAAA,QACvB,WAAW,QAAQ,OAAO,IAAI,EAAG,IAAG,UAAU,OAAO,IAAI;AAAA,MAC3D;AAAA,IACF;AACA,eAAW,QAAQ,QAAS,KAAI,CAAC,KAAK,IAAI,IAAI,KAAK,QAAQ,OAAO,IAAI,EAAG,IAAG,UAAU,OAAO,IAAI;AAAA,EACnG,CAAC;AACD,SAAO,MAAM,GAAG,UAAU,OAAO,GAAG,OAAO;AAC7C,CAAC;",
   "names": []
 }

package/dist/plugins/directives/cloak.js

@@ -1,10 +1,5 @@
-import { attribute } from "../../kernel/index.js";
-const cloak = attribute({
-  name: "cloak",
-  key: "forbidden",
-  value: "forbidden",
-  mount: ({ el, attr }) => el.removeAttribute(attr)
-});
+import { dir } from "../def.js";
+const cloak = dir("cloak", 10, ({ el, attr }) => el.removeAttribute(attr));
 export {
   cloak
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/cloak.ts"],
-  "sourcesContent": ["import { attribute } from '../../kernel/index.js'\n\n/**\n * Removed as soon as the element mounts. Pair it with CSS that hides cloaked markup until then:\n * `[data-cloak] { display: none !important }`.\n */\nexport const cloak = attribute({\n  name: 'cloak',\n  key: 'forbidden',\n  value: 'forbidden',\n  mount: ({ el, attr }) => el.removeAttribute(attr),\n})\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAMnB,MAAM,QAAQ,UAAU;AAAA,EAC7B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO,CAAC,EAAE,IAAI,KAAK,MAAM,GAAG,gBAAgB,IAAI;AAClD,CAAC;",
+  "sourcesContent": ["import { dir } from '../def.js';\n\n/**\n * Removed as soon as the element mounts. Pair it with CSS that hides cloaked markup until then:\n * `[data-cloak] { display: none !important }`.\n */\nexport const cloak = dir('cloak', 10, ({ el, attr }) => el.removeAttribute(attr));\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAMb,MAAM,QAAQ,IAAI,SAAS,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM,GAAG,gBAAgB,IAAI,CAAC;",
   "names": []
 }

package/dist/plugins/directives/collapse.js

@@ -1,40 +1,39 @@
-import { attribute, toMs } from "../../kernel/index.js";
-const collapse = attribute({
-  name: "collapse",
-  key: "forbidden",
-  value: "required",
-  mount({ el, mods, evaluate, effect, cleanup }) {
-    const style = el.style;
-    const ms = toMs(mods.get("duration"), 250);
-    const min = mods.get("min")?.[0] ?? "0px";
-    const instant = matchMedia("(prefers-reduced-motion: reduce)").matches;
-    let timer;
-    let first = true;
-    let last;
-    const settle = (open) => {
-      style.transition = "";
-      style.overflow = open ? "" : "hidden";
-      style.height = open ? "" : min;
-    };
-    effect(() => {
-      const open = !!evaluate();
-      if (open === last) return;
-      last = open;
-      clearTimeout(timer);
-      if (first || instant) {
-        first = false;
-        return settle(open);
-      }
-      const from = `${el.getBoundingClientRect().height}px`;
-      style.overflow = "hidden";
-      style.height = open ? min : from;
-      void el.getBoundingClientRect();
-      style.transition = `height ${ms}ms ease`;
-      style.height = open ? `${el.scrollHeight}px` : min;
-      timer = setTimeout(() => settle(open), ms + 20);
-    });
-    cleanup(() => clearTimeout(timer));
-  }
+import { toMs } from "../../kernel/index.js";
+import { dir } from "../def.js";
+const collapse = dir("collapse", 6, ({ el, mods, evaluate, effect, cleanup }) => {
+  const style = el.style;
+  const ms = toMs(mods.get("duration"), 250);
+  const instant = matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const own = [style.height, style.overflow, style.transition];
+  let timer;
+  let first = true;
+  let last;
+  const settle = (open) => {
+    style.transition = "";
+    style.overflow = open ? "" : "hidden";
+    style.height = open ? "" : "0px";
+  };
+  effect(() => {
+    const open = !!evaluate();
+    if (open === last) return;
+    last = open;
+    clearTimeout(timer);
+    if (first || instant) {
+      first = false;
+      return settle(open);
+    }
+    const from = `${el.getBoundingClientRect().height}px`;
+    style.overflow = "hidden";
+    style.height = open ? "0px" : from;
+    void el.getBoundingClientRect();
+    style.transition = `height ${ms}ms ease`;
+    style.height = open ? `${el.scrollHeight}px` : "0px";
+    timer = setTimeout(() => settle(open), ms + 20);
+  });
+  cleanup(() => {
+    clearTimeout(timer);
+    [style.height, style.overflow, style.transition] = own;
+  });
 });
 export {
   collapse

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/collapse.ts"],
-  "sourcesContent": ["import { attribute, toMs } from '../../kernel/index.js'\n\n/**\n * Animates the element's height open and closed: `collapse=\"$open\"`.\n * Modifiers: `__duration.250ms`, `__min.40px` (collapsed height, default 0).\n */\nexport const collapse = attribute({\n  name: 'collapse',\n  key: 'forbidden',\n  value: 'required',\n  mount({ el, mods, evaluate, effect, cleanup }) {\n    const style = (el as HTMLElement).style\n    const ms = toMs(mods.get('duration'), 250)\n    const min = mods.get('min')?.[0] ?? '0px'\n    const instant = matchMedia('(prefers-reduced-motion: reduce)').matches\n    let timer: ReturnType<typeof setTimeout> | undefined\n    let first = true\n    let last: boolean | undefined\n    const settle = (open: boolean) => {\n      style.transition = ''\n      style.overflow = open ? '' : 'hidden'\n      style.height = open ? '' : min\n    }\n    effect(() => {\n      const open = !!evaluate()\n      if (open === last) return\n      last = open\n      clearTimeout(timer)\n      if (first || instant) {\n        first = false\n        return settle(open)\n      }\n      const from = `${el.getBoundingClientRect().height}px`\n      style.overflow = 'hidden'\n      style.height = open ? min : from\n      void el.getBoundingClientRect() // commit the start height before transitioning\n      style.transition = `height ${ms}ms ease`\n      style.height = open ? `${el.scrollHeight}px` : min\n      timer = setTimeout(() => settle(open), ms + 20)\n    })\n    cleanup(() => clearTimeout(timer))\n  },\n})\n"],
-  "mappings": "AAAA,SAAS,WAAW,YAAY;AAMzB,MAAM,WAAW,UAAU;AAAA,EAChC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM,EAAE,IAAI,MAAM,UAAU,QAAQ,QAAQ,GAAG;AAC7C,UAAM,QAAS,GAAmB;AAClC,UAAM,KAAK,KAAK,KAAK,IAAI,UAAU,GAAG,GAAG;AACzC,UAAM,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC,KAAK;AACpC,UAAM,UAAU,WAAW,kCAAkC,EAAE;AAC/D,QAAI;AACJ,QAAI,QAAQ;AACZ,QAAI;AACJ,UAAM,SAAS,CAAC,SAAkB;AAChC,YAAM,aAAa;AACnB,YAAM,WAAW,OAAO,KAAK;AAC7B,YAAM,SAAS,OAAO,KAAK;AAAA,IAC7B;AACA,WAAO,MAAM;AACX,YAAM,OAAO,CAAC,CAAC,SAAS;AACxB,UAAI,SAAS,KAAM;AACnB,aAAO;AACP,mBAAa,KAAK;AAClB,UAAI,SAAS,SAAS;AACpB,gBAAQ;AACR,eAAO,OAAO,IAAI;AAAA,MACpB;AACA,YAAM,OAAO,GAAG,GAAG,sBAAsB,EAAE,MAAM;AACjD,YAAM,WAAW;AACjB,YAAM,SAAS,OAAO,MAAM;AAC5B,WAAK,GAAG,sBAAsB;AAC9B,YAAM,aAAa,UAAU,EAAE;AAC/B,YAAM,SAAS,OAAO,GAAG,GAAG,YAAY,OAAO;AAC/C,cAAQ,WAAW,MAAM,OAAO,IAAI,GAAG,KAAK,EAAE;AAAA,IAChD,CAAC;AACD,YAAQ,MAAM,aAAa,KAAK,CAAC;AAAA,EACnC;AACF,CAAC;",
+  "sourcesContent": ["import { toMs } from '../../kernel/index.js';\nimport { dir } from '../def.js';\n\n/**\n * Animates the element's height open and closed: `collapse=\"$open\"`.\n * Modifiers: `__duration.250ms`, `__min.40px` (collapsed height, default 0).\n */\nexport const collapse = dir('collapse', 6, ({ el, mods, evaluate, effect, cleanup }) => {\n  const style = (el as HTMLElement).style;\n  const ms = toMs(mods.get('duration'), 250);\n  const instant = matchMedia('(prefers-reduced-motion: reduce)').matches;\n  const own = [style.height, style.overflow, style.transition];\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let first = true;\n  let last: boolean | undefined;\n  const settle = (open: boolean) => {\n    style.transition = '';\n    style.overflow = open ? '' : 'hidden';\n    style.height = open ? '' : '0px';\n  };\n  effect(() => {\n    const open = !!evaluate();\n    if (open === last) return;\n    last = open;\n    clearTimeout(timer);\n    if (first || instant) {\n      first = false;\n      return settle(open);\n    }\n    const from = `${el.getBoundingClientRect().height}px`;\n    style.overflow = 'hidden';\n    style.height = open ? '0px' : from;\n    void el.getBoundingClientRect(); // commit the start height before transitioning\n    style.transition = `height ${ms}ms ease`;\n    style.height = open ? `${el.scrollHeight}px` : '0px';\n    timer = setTimeout(() => settle(open), ms + 20);\n  });\n  cleanup(() => {\n    clearTimeout(timer);\n    [style.height, style.overflow, style.transition] = own;\n  });\n});\n"],
+  "mappings": "AAAA,SAAS,YAAY;AACrB,SAAS,WAAW;AAMb,MAAM,WAAW,IAAI,YAAY,GAAG,CAAC,EAAE,IAAI,MAAM,UAAU,QAAQ,QAAQ,MAAM;AACtF,QAAM,QAAS,GAAmB;AAClC,QAAM,KAAK,KAAK,KAAK,IAAI,UAAU,GAAG,GAAG;AACzC,QAAM,UAAU,WAAW,kCAAkC,EAAE;AAC/D,QAAM,MAAM,CAAC,MAAM,QAAQ,MAAM,UAAU,MAAM,UAAU;AAC3D,MAAI;AACJ,MAAI,QAAQ;AACZ,MAAI;AACJ,QAAM,SAAS,CAAC,SAAkB;AAChC,UAAM,aAAa;AACnB,UAAM,WAAW,OAAO,KAAK;AAC7B,UAAM,SAAS,OAAO,KAAK;AAAA,EAC7B;AACA,SAAO,MAAM;AACX,UAAM,OAAO,CAAC,CAAC,SAAS;AACxB,QAAI,SAAS,KAAM;AACnB,WAAO;AACP,iBAAa,KAAK;AAClB,QAAI,SAAS,SAAS;AACpB,cAAQ;AACR,aAAO,OAAO,IAAI;AAAA,IACpB;AACA,UAAM,OAAO,GAAG,GAAG,sBAAsB,EAAE,MAAM;AACjD,UAAM,WAAW;AACjB,UAAM,SAAS,OAAO,QAAQ;AAC9B,SAAK,GAAG,sBAAsB;AAC9B,UAAM,aAAa,UAAU,EAAE;AAC/B,UAAM,SAAS,OAAO,GAAG,GAAG,YAAY,OAAO;AAC/C,YAAQ,WAAW,MAAM,OAAO,IAAI,GAAG,KAAK,EAAE;AAAA,EAChD,CAAC;AACD,UAAQ,MAAM;AACZ,iBAAa,KAAK;AAClB,KAAC,MAAM,QAAQ,MAAM,UAAU,MAAM,UAAU,IAAI;AAAA,EACrD,CAAC;AACH,CAAC;",
   "names": []
 }

package/dist/plugins/directives/declare.js

@@ -1,11 +1,8 @@
-import { attribute, expand } from "../../kernel/index.js";
-const signals = attribute({
-  name: "signals",
-  value: "required",
-  mount({ key, cased, evaluate, store, mods }) {
-    const v = evaluate();
-    store.merge(key ? expand({}, cased(), v) : v, { ifMissing: mods.has("ifmissing") });
-  }
+import { expand } from "../../kernel/index.js";
+import { dir } from "../def.js";
+const signals = dir("signals", 4, ({ key, cased, evaluate, store, mods }) => {
+  const v = evaluate();
+  store.merge(key ? expand({}, cased(), v) : v, { ifMissing: mods.has("ifmissing") });
 });
 export {
   signals

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,18 +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(cased(), makeComputed(() => evaluate()))\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,OAAO,MAAM,GAAG,aAAa,MAAM,SAAS,CAAC,CAAC;AACpD;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,26 +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 =\n      mods.has('window') ? window : mods.has('document') || outside || type.startsWith('sigmx-') ? document : el\n    const run = withTiming(withViewTransition((e: Event) => evaluate(e), mods), mods)\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,SACJ,KAAK,IAAI,QAAQ,IAAI,SAAS,KAAK,IAAI,UAAU,KAAK,WAAW,KAAK,WAAW,QAAQ,IAAI,WAAW;AAC1G,UAAM,MAAM,WAAW,mBAAmB,CAAC,MAAa,SAAS,CAAC,GAAG,IAAI,GAAG,IAAI;AAChF;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
 };