sigmx 0.1.1 → 0.2.0

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

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

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

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

package/dist/plugins/directives/url-params.js

@@ -1,4 +1,4 @@
-import { attribute, expand, toPredicate } from "../../kernel/index.js";
+import { dir } from "../def.js";
 const parse = (s) => {
   try {
     return JSON.parse(s);
@@ -6,69 +6,45 @@ const parse = (s) => {
     return s;
   }
 };
-const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
-const queryString = attribute({
-  name: "query-string",
-  mount({ key, value, mods, evaluate, cased, store, listen, effect }) {
-    const history = mods.has("history");
-    const push = (url) => {
+const enc = (v) => typeof v === "string" ? v : JSON.stringify(v);
+const same = (a, b) => enc(a) === enc(b);
+const params = () => new URLSearchParams(location.search);
+const queryString = dir("query-string", 1, ({ key, value, mods, evaluate, cased, store, listen, effect }) => {
+  const history = mods.has("history");
+  let restoring = false;
+  const wire = (read, write) => {
+    effect(() => {
+      const q = params();
+      write(q);
+      if (restoring) return;
+      const qs = String(q);
+      const url = `${location.pathname}${qs ? `?${qs}` : ""}${location.hash}`;
       if (url !== location.pathname + location.search + location.hash)
         window.history[history ? "pushState" : "replaceState"](null, "", url);
-    };
-    const urlWith = (q) => `${location.pathname}${q.size ? `?${q}` : ""}${location.hash}`;
-    let restoring = false;
-    const restore = (fn) => {
-      restoring = true;
-      try {
-        fn();
-      } finally {
-        restoring = false;
-      }
-    };
-    if (key) {
-      const path = cased();
-      const fallback = value ? evaluate() : "";
-      const fromUrl2 = () => {
-        const raw = new URLSearchParams(location.search).get(key);
-        store.set(path, raw === null ? fallback : parse(raw));
-      };
-      if (!store.has(path) || new URLSearchParams(location.search).has(key)) fromUrl2();
-      effect(() => {
-        const v = store.get(path);
-        if (restoring) return;
-        const q = new URLSearchParams(location.search);
-        if (v === void 0 || same(v, fallback)) q.delete(key);
-        else q.set(key, typeof v === "string" ? v : JSON.stringify(v));
-        push(urlWith(q));
+    });
+    if (history)
+      listen(window, "popstate", () => {
+        restoring = true;
+        try {
+          read(params());
+        } finally {
+          restoring = false;
+        }
       });
-      if (history) listen(window, "popstate", () => restore(fromUrl2));
-      return;
-    }
-    const filter = value ? evaluate() : void 0;
-    const ok = toPredicate(filter);
-    const fromUrl = () => {
-      const patch = {};
-      for (const [k, v] of new URLSearchParams(location.search)) if (ok(k)) expand(patch, k, parse(v));
-      store.merge(patch);
+  };
+  {
+    const name = key;
+    const path = cased();
+    const fallback = value ? evaluate() : "";
+    const read = (q) => {
+      const raw = q.get(name);
+      store.set(path, raw === null ? fallback : typeof fallback === "string" ? raw : parse(raw));
     };
-    fromUrl();
-    effect(() => {
-      const snap = store.snapshot(filter, { computed: false });
-      if (restoring) return;
-      const q = new URLSearchParams(location.search);
-      const walk = (obj, prefix) => {
-        for (const k in obj) {
-          const p = prefix ? `${prefix}.${k}` : k;
-          const v = obj[k];
-          if (v && typeof v === "object" && !Array.isArray(v)) walk(v, p);
-          else if (mods.has("filter") && (v === "" || v == null)) q.delete(p);
-          else q.set(p, typeof v === "string" ? v : JSON.stringify(v));
-        }
-      };
-      walk(snap, "");
-      push(urlWith(q));
+    if (!store.has(path) || params().has(name)) read(params());
+    wire(read, (q) => {
+      const v = store.get(path);
+      v === void 0 || same(v, fallback) ? q.delete(name) : q.set(name, enc(v));
     });
-    if (history) listen(window, "popstate", () => restore(fromUrl));
   }
 });
 export {

package/dist/plugins/directives/url-params.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/url-params.ts"],
-  "sourcesContent": ["import { attribute, expand, toPredicate } from '../../kernel/index.js';\n\nconst parse = (s: string): unknown => {\n  try {\n    return JSON.parse(s);\n  } catch {\n    return s;\n  }\n};\nconst same = (a: unknown, b: unknown) => JSON.stringify(a) === JSON.stringify(b);\n\n/**\n * Keeps signals and the URL query string in step.\n *\n * Keyed form declares one signal with a default: `query-string:page=\"1\"` creates `page`, reads\n * `?page=` on load when present (otherwise uses the default), writes it whenever it changes, and\n * drops the parameter again when the value is back at the default. The parameter name is the key\n * as written; the signal name is recased as usual.\n *\n * Bare form syncs existing signals: `query-string=\"{ include: /^(q|sort)$/ }\"` mirrors matching\n * paths both ways. `__history` pushes an entry per change and restores on back/forward;\n * `__filter` drops empty values from the URL.\n */\nexport const queryString = attribute({\n  name: 'query-string',\n  mount({ key, value, mods, evaluate, cased, store, listen, effect }) {\n    const history = mods.has('history');\n    const push = (url: string) => {\n      if (url !== location.pathname + location.search + location.hash)\n        window.history[history ? 'pushState' : 'replaceState'](null, '', url);\n    };\n    const urlWith = (q: URLSearchParams) => `${location.pathname}${q.size ? `?${q}` : ''}${location.hash}`;\n    let restoring = false;\n    const restore = (fn: () => void) => {\n      restoring = true;\n      try {\n        fn();\n      } finally {\n        restoring = false;\n      }\n    };\n\n    if (key) {\n      const path = cased();\n      const fallback = value ? evaluate() : '';\n      const fromUrl = () => {\n        const raw = new URLSearchParams(location.search).get(key);\n        store.set(path, raw === null ? fallback : parse(raw));\n      };\n      if (!store.has(path) || new URLSearchParams(location.search).has(key)) fromUrl();\n      effect(() => {\n        const v = store.get(path);\n        if (restoring) return;\n        const q = new URLSearchParams(location.search);\n        if (v === undefined || same(v, fallback)) q.delete(key);\n        else q.set(key, typeof v === 'string' ? v : JSON.stringify(v));\n        push(urlWith(q));\n      });\n      if (history) listen(window, 'popstate', () => restore(fromUrl));\n      return;\n    }\n\n    const filter = value ? evaluate() : undefined;\n    const ok = toPredicate(filter);\n    const fromUrl = () => {\n      const patch = {};\n      for (const [k, v] of new URLSearchParams(location.search)) if (ok(k)) expand(patch, k, parse(v));\n      store.merge(patch);\n    };\n    fromUrl();\n    effect(() => {\n      const snap = store.snapshot(filter, { computed: false });\n      if (restoring) return;\n      const q = new URLSearchParams(location.search);\n      const walk = (obj: Record<string, any>, prefix: string) => {\n        for (const k in obj) {\n          const p = prefix ? `${prefix}.${k}` : k;\n          const v = obj[k];\n          if (v && typeof v === 'object' && !Array.isArray(v)) walk(v, p);\n          else if (mods.has('filter') && (v === '' || v == null)) q.delete(p);\n          else q.set(p, typeof v === 'string' ? v : JSON.stringify(v));\n        }\n      };\n      walk(snap, '');\n      push(urlWith(q));\n    });\n    if (history) listen(window, 'popstate', () => restore(fromUrl));\n  },\n});\n"],
-  "mappings": "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",
-  "names": ["fromUrl"]
+  "sourcesContent": ["import { dir } from '../def.js';\n\nconst parse = (s: string): unknown => {\n  try {\n    return JSON.parse(s);\n  } catch {\n    return s;\n  }\n};\nconst enc = (v: unknown) => (typeof v === 'string' ? v : JSON.stringify(v));\nconst same = (a: unknown, b: unknown) => enc(a) === enc(b);\nconst params = () => new URLSearchParams(location.search);\n\n/**\n * Keeps signals and the URL query string in step.\n *\n * Keyed form declares one signal with a default: `query-string:page=\"1\"` creates `page`, reads\n * `?page=` on load when present (otherwise uses the default), writes it whenever it changes, and\n * drops the parameter again when the value is back at the default. The parameter name is the key\n * as written; the signal name is recased as usual.\n *\n * Bare form syncs existing signals: `query-string=\"{ include: /^(q|sort)$/ }\"` mirrors matching\n * paths both ways. `__history` pushes an entry per change and restores on back/forward;\n * `__filter` drops empty values from the URL.\n */\nexport const queryString = dir('query-string', 1, ({ key, value, mods, evaluate, cased, store, listen, effect }) => {\n  const history = mods.has('history');\n  let restoring = false;\n  /** `read` pulls signals from the query; `write` puts them into it. Reads are wired to back/forward. */\n  const wire = (read: (q: URLSearchParams) => void, write: (q: URLSearchParams) => void) => {\n    effect(() => {\n      const q = params();\n      write(q);\n      if (restoring) return;\n      const qs = String(q);\n      const url = `${location.pathname}${qs ? `?${qs}` : ''}${location.hash}`;\n      if (url !== location.pathname + location.search + location.hash)\n        window.history[history ? 'pushState' : 'replaceState'](null, '', url);\n    });\n    if (history)\n      listen(window, 'popstate', () => {\n        restoring = true;\n        try {\n          read(params());\n        } finally {\n          restoring = false;\n        }\n      });\n  };\n\n  {\n    const name = key as string;\n    const path = cased();\n    const fallback = value ? evaluate() : '';\n    const read = (q: URLSearchParams) => {\n      const raw = q.get(name);\n      // The parameter takes the default's type: a string default keeps '007' a string, a number default parses.\n      store.set(path, raw === null ? fallback : typeof fallback === 'string' ? raw : parse(raw));\n    };\n    if (!store.has(path) || params().has(name)) read(params());\n    wire(read, (q) => {\n      const v = store.get(path);\n      v === undefined || same(v, fallback) ? q.delete(name) : q.set(name, enc(v));\n    });\n  }\n});\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAEpB,MAAM,QAAQ,CAAC,MAAuB;AACpC,MAAI;AACF,WAAO,KAAK,MAAM,CAAC;AAAA,EACrB,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AACA,MAAM,MAAM,CAAC,MAAgB,OAAO,MAAM,WAAW,IAAI,KAAK,UAAU,CAAC;AACzE,MAAM,OAAO,CAAC,GAAY,MAAe,IAAI,CAAC,MAAM,IAAI,CAAC;AACzD,MAAM,SAAS,MAAM,IAAI,gBAAgB,SAAS,MAAM;AAcjD,MAAM,cAAc,IAAI,gBAAgB,GAAG,CAAC,EAAE,KAAK,OAAO,MAAM,UAAU,OAAO,OAAO,QAAQ,OAAO,MAAM;AAClH,QAAM,UAAU,KAAK,IAAI,SAAS;AAClC,MAAI,YAAY;AAEhB,QAAM,OAAO,CAAC,MAAoC,UAAwC;AACxF,WAAO,MAAM;AACX,YAAM,IAAI,OAAO;AACjB,YAAM,CAAC;AACP,UAAI,UAAW;AACf,YAAM,KAAK,OAAO,CAAC;AACnB,YAAM,MAAM,GAAG,SAAS,QAAQ,GAAG,KAAK,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,IAAI;AACrE,UAAI,QAAQ,SAAS,WAAW,SAAS,SAAS,SAAS;AACzD,eAAO,QAAQ,UAAU,cAAc,cAAc,EAAE,MAAM,IAAI,GAAG;AAAA,IACxE,CAAC;AACD,QAAI;AACF,aAAO,QAAQ,YAAY,MAAM;AAC/B,oBAAY;AACZ,YAAI;AACF,eAAK,OAAO,CAAC;AAAA,QACf,UAAE;AACA,sBAAY;AAAA,QACd;AAAA,MACF,CAAC;AAAA,EACL;AAEA;AACE,UAAM,OAAO;AACb,UAAM,OAAO,MAAM;AACnB,UAAM,WAAW,QAAQ,SAAS,IAAI;AACtC,UAAM,OAAO,CAAC,MAAuB;AACnC,YAAM,MAAM,EAAE,IAAI,IAAI;AAEtB,YAAM,IAAI,MAAM,QAAQ,OAAO,WAAW,OAAO,aAAa,WAAW,MAAM,MAAM,GAAG,CAAC;AAAA,IAC3F;AACA,QAAI,CAAC,MAAM,IAAI,IAAI,KAAK,OAAO,EAAE,IAAI,IAAI,EAAG,MAAK,OAAO,CAAC;AACzD,SAAK,MAAM,CAAC,MAAM;AAChB,YAAM,IAAI,MAAM,IAAI,IAAI;AACxB,YAAM,UAAa,KAAK,GAAG,QAAQ,IAAI,EAAE,OAAO,IAAI,IAAI,EAAE,IAAI,MAAM,IAAI,CAAC,CAAC;AAAA,IAC5E,CAAC;AAAA,EACH;AACF,CAAC;",
+  "names": []
 }

package/dist/plugins/directives/url-replace.js

@@ -1,10 +1,9 @@
-import { attribute } from "../../kernel/index.js";
-const replaceUrl = attribute({
-  name: "replace-url",
-  key: "forbidden",
-  value: "required",
-  mount: ({ evaluate, effect }) => effect(() => history.replaceState(history.state, "", new URL(String(evaluate()), location.href)))
-});
+import { dir } from "../def.js";
+const replaceUrl = dir(
+  "replace-url",
+  6,
+  ({ evaluate, effect }) => effect(() => history.replaceState(history.state, "", new URL(String(evaluate()), location.href)))
+);
 export {
   replaceUrl
 };

package/dist/plugins/directives/url-replace.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/url-replace.ts"],
-  "sourcesContent": ["import { attribute } from '../../kernel/index.js';\n\nexport const replaceUrl = attribute({\n  name: 'replace-url',\n  key: 'forbidden',\n  value: 'required',\n  mount: ({ evaluate, effect }) =>\n    effect(() => history.replaceState(history.state, '', new URL(String(evaluate()), location.href))),\n});\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAEnB,MAAM,aAAa,UAAU;AAAA,EAClC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO,CAAC,EAAE,UAAU,OAAO,MACzB,OAAO,MAAM,QAAQ,aAAa,QAAQ,OAAO,IAAI,IAAI,IAAI,OAAO,SAAS,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC;AACpG,CAAC;",
+  "sourcesContent": ["import { dir } from '../def.js';\n\nexport const replaceUrl = dir('replace-url', 6, ({ evaluate, effect }) =>\n  effect(() => history.replaceState(history.state, '', new URL(String(evaluate()), location.href))),\n);\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAEb,MAAM,aAAa;AAAA,EAAI;AAAA,EAAe;AAAA,EAAG,CAAC,EAAE,UAAU,OAAO,MAClE,OAAO,MAAM,QAAQ,aAAa,QAAQ,OAAO,IAAI,IAAI,IAAI,OAAO,SAAS,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC;AAClG;",
   "names": []
 }

package/dist/plugins/directives/validity.js

@@ -1,12 +1,9 @@
-import { attribute } from "../../kernel/index.js";
-const customValidity = attribute({
-  name: "custom-validity",
-  key: "forbidden",
-  value: "required",
-  mount({ el, evaluate, effect, error }) {
-    if (!("setCustomValidity" in el)) throw error("only works on form fields");
-    effect(() => el.setCustomValidity(String(evaluate() ?? "")));
-  }
+import { dir } from "../def.js";
+const customValidity = dir("custom-validity", 6, ({ el, evaluate, effect, error }) => {
+  if (!("setCustomValidity" in el)) throw error("only works on form fields");
+  const field = el;
+  effect(() => field.setCustomValidity(String(evaluate() ?? "")));
+  return () => field.setCustomValidity("");
 });
 export {
   customValidity

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/validity.ts"],
-  "sourcesContent": ["import { attribute } from '../../kernel/index.js';\n\n/** The expression's string becomes the field's validity message; '' means valid. */\nexport const customValidity = attribute({\n  name: 'custom-validity',\n  key: 'forbidden',\n  value: 'required',\n  mount({ el, evaluate, effect, error }) {\n    if (!('setCustomValidity' in el)) throw error('only works on form fields');\n    effect(() => (el as HTMLInputElement).setCustomValidity(String(evaluate() ?? '')));\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAGnB,MAAM,iBAAiB,UAAU;AAAA,EACtC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM,EAAE,IAAI,UAAU,QAAQ,MAAM,GAAG;AACrC,QAAI,EAAE,uBAAuB,IAAK,OAAM,MAAM,2BAA2B;AACzE,WAAO,MAAO,GAAwB,kBAAkB,OAAO,SAAS,KAAK,EAAE,CAAC,CAAC;AAAA,EACnF;AACF,CAAC;",
+  "sourcesContent": ["import { dir } from '../def.js';\n\n/** The expression's string becomes the field's validity message; '' means valid. */\nexport const customValidity = dir('custom-validity', 6, ({ el, evaluate, effect, error }) => {\n  if (!('setCustomValidity' in el)) throw error('only works on form fields');\n  const field = el as HTMLInputElement;\n  effect(() => field.setCustomValidity(String(evaluate() ?? '')));\n  return () => field.setCustomValidity('');\n});\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAGb,MAAM,iBAAiB,IAAI,mBAAmB,GAAG,CAAC,EAAE,IAAI,UAAU,QAAQ,MAAM,MAAM;AAC3F,MAAI,EAAE,uBAAuB,IAAK,OAAM,MAAM,2BAA2B;AACzE,QAAM,QAAQ;AACd,SAAO,MAAM,MAAM,kBAAkB,OAAO,SAAS,KAAK,EAAE,CAAC,CAAC;AAC9D,SAAO,MAAM,MAAM,kBAAkB,EAAE;AACzC,CAAC;",
   "names": []
 }

package/dist/plugins/directives/viewport.js

@@ -1,29 +1,21 @@
-import { attribute, withTiming, withViewTransition } from "../../kernel/index.js";
-const onIntersect = attribute({
-  name: "on-intersect",
-  key: "forbidden",
-  value: "required",
-  returns: false,
-  mount({ el, mods, evaluate }) {
-    const t = mods.get("threshold")?.[0];
-    const threshold = mods.has("full") ? 1 : mods.has("half") ? 0.5 : t ? Math.min(100, Math.max(0, +t)) / 100 : 0;
-    const run = withTiming(
-      withViewTransition(() => evaluate(), mods),
-      mods
-    );
-    const io = new IntersectionObserver(
-      (entries) => {
-        for (const e of entries) {
-          if (e.isIntersecting === mods.has("exit")) continue;
-          run();
-          if (mods.has("once")) io.disconnect();
-        }
-      },
-      { threshold }
-    );
-    io.observe(el);
-    return () => io.disconnect();
-  }
+import { withTiming } from "../../kernel/index.js";
+import { dir } from "../def.js";
+const onIntersect = dir("on-intersect", 22, ({ el, mods, evaluate, cleanup }) => {
+  const t = +(mods.get("threshold")?.join(".") ?? 0);
+  const threshold = Number.isFinite(t) ? Math.min(100, Math.max(0, t)) / 100 : 0;
+  const run = withTiming(() => evaluate(), mods, cleanup);
+  const io = new IntersectionObserver(
+    (entries) => {
+      for (const e of entries) {
+        if (e.isIntersecting === mods.has("exit")) continue;
+        run();
+        if (mods.has("once")) io.disconnect();
+      }
+    },
+    { threshold }
+  );
+  io.observe(el);
+  return () => io.disconnect();
 });
 export {
   onIntersect

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/viewport.ts"],
-  "sourcesContent": ["import { attribute, withTiming, withViewTransition } from '../../kernel/index.js';\n\n/** Runs when the element enters the viewport. Modifiers: once, exit, full, half, threshold.N. */\nexport const onIntersect = attribute({\n  name: 'on-intersect',\n  key: 'forbidden',\n  value: 'required',\n  returns: false,\n  mount({ el, mods, evaluate }) {\n    const t = mods.get('threshold')?.[0];\n    const threshold = mods.has('full') ? 1 : mods.has('half') ? 0.5 : t ? Math.min(100, Math.max(0, +t)) / 100 : 0;\n    const run = withTiming(\n      withViewTransition(() => evaluate(), mods),\n      mods,\n    );\n    const io = new IntersectionObserver(\n      (entries) => {\n        for (const e of entries) {\n          if (e.isIntersecting === mods.has('exit')) continue;\n          run();\n          if (mods.has('once')) io.disconnect();\n        }\n      },\n      { threshold },\n    );\n    io.observe(el);\n    return () => io.disconnect();\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,WAAW,YAAY,0BAA0B;AAGnD,MAAM,cAAc,UAAU;AAAA,EACnC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM,EAAE,IAAI,MAAM,SAAS,GAAG;AAC5B,UAAM,IAAI,KAAK,IAAI,WAAW,IAAI,CAAC;AACnC,UAAM,YAAY,KAAK,IAAI,MAAM,IAAI,IAAI,KAAK,IAAI,MAAM,IAAI,MAAM,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,IAAI,MAAM;AAC7G,UAAM,MAAM;AAAA,MACV,mBAAmB,MAAM,SAAS,GAAG,IAAI;AAAA,MACzC;AAAA,IACF;AACA,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,YAAY;AACX,mBAAW,KAAK,SAAS;AACvB,cAAI,EAAE,mBAAmB,KAAK,IAAI,MAAM,EAAG;AAC3C,cAAI;AACJ,cAAI,KAAK,IAAI,MAAM,EAAG,IAAG,WAAW;AAAA,QACtC;AAAA,MACF;AAAA,MACA,EAAE,UAAU;AAAA,IACd;AACA,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\n/** Runs when the element enters the viewport. Modifiers: once, exit, full, half, threshold.N. */\nexport const onIntersect = dir('on-intersect', 22, ({ el, mods, evaluate, cleanup }) => {\n  const t = +(mods.get('threshold')?.join('.') ?? 0);\n  const threshold = Number.isFinite(t) ? Math.min(100, Math.max(0, t)) / 100 : 0;\n  const run = withTiming(() => evaluate(), mods, cleanup);\n  const io = new IntersectionObserver(\n    (entries) => {\n      for (const e of entries) {\n        if (e.isIntersecting === mods.has('exit')) continue;\n        run();\n        if (mods.has('once')) io.disconnect();\n      }\n    },\n    { threshold },\n  );\n  io.observe(el);\n  return () => io.disconnect();\n});\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,WAAW;AAGb,MAAM,cAAc,IAAI,gBAAgB,IAAI,CAAC,EAAE,IAAI,MAAM,UAAU,QAAQ,MAAM;AACtF,QAAM,IAAI,EAAE,KAAK,IAAI,WAAW,GAAG,KAAK,GAAG,KAAK;AAChD,QAAM,YAAY,OAAO,SAAS,CAAC,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,CAAC,CAAC,IAAI,MAAM;AAC7E,QAAM,MAAM,WAAW,MAAM,SAAS,GAAG,MAAM,OAAO;AACtD,QAAM,KAAK,IAAI;AAAA,IACb,CAAC,YAAY;AACX,iBAAW,KAAK,SAAS;AACvB,YAAI,EAAE,mBAAmB,KAAK,IAAI,MAAM,EAAG;AAC3C,YAAI;AACJ,YAAI,KAAK,IAAI,MAAM,EAAG,IAAG,WAAW;AAAA,MACtC;AAAA,IACF;AAAA,IACA,EAAE,UAAU;AAAA,EACd;AACA,KAAG,QAAQ,EAAE;AACb,SAAO,MAAM,GAAG,WAAW;AAC7B,CAAC;",
   "names": []
 }

package/dist/plugins/directives/visibility.js

@@ -1,17 +1,12 @@
-import { attribute } from "../../kernel/index.js";
-const show = attribute({
-  name: "show",
-  key: "forbidden",
-  value: "required",
-  mount({ el, evaluate, effect }) {
-    const initial = el.style.display === "none" ? "" : el.style.display;
-    effect(() => {
-      el.style.display = evaluate() ? initial : "none";
-    });
-    return () => {
-      el.style.display = initial;
-    };
-  }
+import { dir } from "../def.js";
+const show = dir("show", 6, ({ el, evaluate, effect }) => {
+  const initial = el.style.display === "none" ? "" : el.style.display;
+  effect(() => {
+    el.style.display = evaluate() ? initial : "none";
+  });
+  return () => {
+    el.style.display = initial;
+  };
 });
 export {
   show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/visibility.ts"],
-  "sourcesContent": ["import { attribute } from '../../kernel/index.js';\n\n/** Toggles `display: none`, restoring whatever inline display the element had. */\nexport const show = attribute({\n  name: 'show',\n  key: 'forbidden',\n  value: 'required',\n  mount({ el, evaluate, effect }) {\n    const initial = el.style.display === 'none' ? '' : el.style.display;\n    effect(() => {\n      el.style.display = evaluate() ? initial : 'none';\n    });\n    return () => {\n      el.style.display = initial;\n    };\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAGnB,MAAM,OAAO,UAAU;AAAA,EAC5B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM,EAAE,IAAI,UAAU,OAAO,GAAG;AAC9B,UAAM,UAAU,GAAG,MAAM,YAAY,SAAS,KAAK,GAAG,MAAM;AAC5D,WAAO,MAAM;AACX,SAAG,MAAM,UAAU,SAAS,IAAI,UAAU;AAAA,IAC5C,CAAC;AACD,WAAO,MAAM;AACX,SAAG,MAAM,UAAU;AAAA,IACrB;AAAA,EACF;AACF,CAAC;",
+  "sourcesContent": ["import { dir } from '../def.js';\n\n/** Toggles `display: none`, restoring whatever inline display the element had. */\nexport const show = dir('show', 6, ({ el, evaluate, effect }) => {\n  const initial = el.style.display === 'none' ? '' : el.style.display;\n  effect(() => {\n    el.style.display = evaluate() ? initial : 'none';\n  });\n  return () => {\n    el.style.display = initial;\n  };\n});\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAGb,MAAM,OAAO,IAAI,QAAQ,GAAG,CAAC,EAAE,IAAI,UAAU,OAAO,MAAM;AAC/D,QAAM,UAAU,GAAG,MAAM,YAAY,SAAS,KAAK,GAAG,MAAM;AAC5D,SAAO,MAAM;AACX,OAAG,MAAM,UAAU,SAAS,IAAI,UAAU;AAAA,EAC5C,CAAC;AACD,SAAO,MAAM;AACX,OAAG,MAAM,UAAU;AAAA,EACrB;AACF,CAAC;",
   "names": []
 }

package/dist/plugins/directives/watch.js

@@ -1,11 +1,5 @@
-import { attribute } from "../../kernel/index.js";
-const effect = attribute({
-  name: "effect",
-  key: "forbidden",
-  value: "required",
-  returns: false,
-  mount: (ctx) => ctx.effect(() => ctx.evaluate())
-});
+import { dir } from "../def.js";
+const effect = dir("effect", 22, (ctx) => ctx.effect(() => ctx.evaluate()));
 export {
   effect
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/directives/watch.ts"],
-  "sourcesContent": ["import { attribute } from '../../kernel/index.js';\n\nexport const effect = attribute({\n  name: 'effect',\n  key: 'forbidden',\n  value: 'required',\n  returns: false,\n  mount: (ctx) => ctx.effect(() => ctx.evaluate()),\n});\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAEnB,MAAM,SAAS,UAAU;AAAA,EAC9B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO,CAAC,QAAQ,IAAI,OAAO,MAAM,IAAI,SAAS,CAAC;AACjD,CAAC;",
+  "sourcesContent": ["import { dir } from '../def.js';\n\nexport const effect = dir('effect', 22, (ctx) => ctx.effect(() => ctx.evaluate()));\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAEb,MAAM,SAAS,IAAI,UAAU,IAAI,CAAC,QAAQ,IAAI,OAAO,MAAM,IAAI,SAAS,CAAC,CAAC;",
   "names": []
 }