microtags 0.0.1 → 0.0.3

package/README.md

@@ -1,6 +1,6 @@
 # microtags
 
-![tests](https://github.com/nichoth/microtags/actions/workflows/nodejs.yml/badge.svg)
+[![tests](https://img.shields.io/github/actions/workflow/status/nichoth/microtags/nodejs.yml?style=flat-square)](https://github.com/nichoth/microtags/actions/workflows/nodejs.yml)
 [![types](https://img.shields.io/npm/types/microtags?style=flat-square)](README.md)
 [![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)
 [![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)
@@ -13,6 +13,8 @@ Web component helper with reactive props, automatic cleanup,
 and no Shadow DOM. Reactive via
 [alien-signals](https://github.com/stackblitz/alien-signals).
 
+**Size**: 3.41 kB with all dependencies, minified and brotlied
+
 Inspired by [nanotags](https://nanotags.psdcoder.dev/). Reactive props use
 **alien-signals** instead of nanostores atoms.
 
@@ -21,15 +23,23 @@ Inspired by [nanotags](https://nanotags.psdcoder.dev/). Reactive props use
 <!-- toc -->
 
 - [Install](#install)
+  * [Import map](#import-map)
+  * [Pre-bundled](#pre-bundled)
 - [Example](#example)
+  * [Client-side validation](#client-side-validation)
 - [Serverside Example](#serverside-example)
+  * [`.TAG`](#tag)
+  * [`.refs`](#refs)
 - [API](#api)
   * [Props](#props)
+    + [`withProps`](#withprops)
+  * [Refs](#refs)
+    + [`withRefs`](#withrefs)
+    + [Element types](#element-types)
   * [define](#define)
-  * [withProps](#withprops)
-  * [withRefs](#withrefs)
   * [withContexts](#withcontexts)
   * [setup and ctx](#setup-and-ctx)
+    + [peek and untracked](#peek-and-untracked)
 - [Subpaths](#subpaths)
   * [microtags/context](#microtagscontext)
   * [microtags/render](#microtagsrender)
@@ -39,12 +49,55 @@ Inspired by [nanotags](https://nanotags.psdcoder.dev/). Reactive props use
 
 </details>
 
+----------------------------------------------------------------------
 ## Install
+----------------------------------------------------------------------
 
 ```sh
 npm i -S microtags
 ```
 
+### Import map
+
+No build step needed. Resolve `microtags` with an
+[import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap)
+and `esm.sh`.
+
+
+```html
+<script type="importmap">
+{
+    "imports": {
+        "microtags": "https://esm.sh/microtags"
+    }
+}
+</script>
+
+<script type="module">
+    import { define } from 'microtags'
+</script>
+```
+
+Subpaths follow the same URL pattern: `microtags/context`, `microtags/render`.
+
+### Pre-bundled
+
+For raw-file CDNs (jsDelivr, unpkg) or local files, where dependencies are
+not resolved for you, use the pre-bundled `microtags/min` build. It is a
+single self-contained file with `alien-signals` inlined, so no other
+mappings are needed:
+
+```html
+<script type="importmap">
+{
+    "imports": {
+        "microtags": "https://cdn.jsdelivr.net/npm/microtags/dist/index.min.js"
+    }
+}
+</script>
+```
+
+
 ----------------------------------------------------------------------
 ## Example
 ----------------------------------------------------------------------
@@ -54,13 +107,13 @@ to do client-side-rendered components, that is possible. You would update the
 DOM inside `.setup`.
 
 Since the full HTML exists already, defining your components in the
-client-side JS is about "hydrating" the page only (adding behavior).
+client-side JS is about "hydrating" the page (adding behavior).
 
 ---
 
 `withProps`, `withRefs`, and `withContexts` are optional and can appear in
-any order. setup ends the chain: it calls `customElements.define` under the hood
-and returns a typed constructor.
+any order. `.setup` ends the chain: it calls `customElements.define` under the
+hood and returns a typed constructor.
 
 ```ts
 import { define } from 'microtags'
@@ -117,36 +170,130 @@ export const myCounter = define('my-counter')
 </my-counter>
 ```
 
+### Client-side validation
+
+See [example/subscribe-form.ts](./example/subscribe-form.ts).
+
+There are two separate things people call "validation", and `microtags`
+handles them in different places:
+
+1. **Prop validation** checks the attributes passed *into* a component.
+   Pass a [Standard Schema](https://standardschema.dev) (Zod, Valibot,
+   ArkType) to [`p.schema`](#withprops); it coerces the attribute value
+   and falls back to `undefined` when the value doesn't match.
+2. **Form input validation** checks live user input in a form, for example a
+   value that changes on every keystroke and needs to report *why* it is invalid.
+   There is no dedicated API for this. Validate the schema directly
+   inside `.setup()` and hold the result in a signal:
+
+The example below is the second kind -- form input (client-side) validation.
+
+```ts
+import { signal, startBatch, endBatch } from 'alien-signals'
+import { z } from 'zod'
+import { define } from 'microtags'
+
+const Email = z.email('Please enter a valid email address.')
+
+define('subscribe-form')
+    .withRefs(r => ({
+        form: r.one('form'),
+        input: r.one('input'),
+        submit: r.one('button'),
+        error: r.one('.error'),
+        status: r.one('.status'),
+    }))
+    .setup(ctx => {
+        const value = signal('')
+        const touched = signal(false)
+
+        // capture the live value (two-way; clears the field on reset)
+        ctx.bind(value, ctx.refs.input)
+        // only reveal errors after the first blur
+        ctx.on(ctx.refs.input, 'blur', () => touched(true))
+
+        ctx.effect(() => {
+            const result = Email.safeParse(value())
+            const message = result.success ?
+                '' :
+                result.error.issues[0].message
+            const showError = touched() && !result.success
+
+            ctx.refs.submit.disabled = !result.success
+            ctx.refs.input.setAttribute('aria-invalid', String(showError))
+            ctx.refs.error.textContent = showError ? message : ''
+        })
+
+        ctx.on(ctx.refs.form, 'submit', ev => {
+            ev.preventDefault()
+            if (!Email.safeParse(value()).success) return
+            ctx.refs.status.textContent = 'Thanks for subscribing!'
+            startBatch()
+            value('')
+            touched(false)
+            endBatch()
+        })
+    })
+```
+
+The error stays hidden until the field is blurred once, then updates live;
+the submit button is gated on validity. See `example/subscribe-form.ts`
+for the full working component.
+
 
 ----------------------------------------------------------------------
 ## Serverside Example
 ----------------------------------------------------------------------
 
+### `.TAG`
+
 Each tag name that you pass to `define` is exposed as a property `.TAG`
 on the return value. It is possible to import your web components in Node,
 even though Node does not have browser APIs.
 
+### `.refs`
+
+All refs are defined per-component, and the ref names are exposed at `.refs`,
+so you can import your web components on the server and read the ref names
+as strings.
+
 ```ts
-import { myCounter, countBtn, copyBtn } from './index.js'
+import { MyCounter, CountBtn, CopyBtn } from './index.js'
 
 // this runs in Node
 
 export function render ():string {
-    return `
-    <div>
-        <${myCounter.TAG} start="5">
-            <div data-ref="display" role="status" class="count"></div>
+    return `<div>
+        <${MyCounter.TAG} start="${START}">
+            <div data-ref="${MyCounter.refs.display}"
+                role="status"
+                class="count"
+            >${START}</div>
 
             <div class="controls">
-                <${countBtn.TAG} data-ref="dec" label="-" aria-label="Decrement">
-                </${countBtn.TAG}>
-                <${copyBtn.TAG} data-ref="copy"></${copyBtn.TAG}>
-                <${countBtn.TAG} data-ref="inc" label="+" aria-label="Increment">
-                </${countBtn.TAG}>
+                <${CountBtn.TAG}
+                    class="dec"
+                    data-ref="${MyCounter.refs.dec}"
+                    aria-label="Decrement"
+                >
+                    <button>-</button>
+                </${CountBtn.TAG}>
+
+                <${CopyBtn.TAG}
+                    class="copy"
+                    data-ref="${MyCounter.refs.copy}"
+                ></${CopyBtn.TAG}>
+
+                <${CountBtn.TAG}
+                    class="inc"
+                    data-ref="${MyCounter.refs.inc}"
+                    aria-label="Increment"
+                >
+                    <button>+</button>
+                </${CountBtn.TAG}>
             </div>
-        </${myCounter.TAG}>
-    </div>
-    `
+        </${MyCounter.TAG}>
+    </div>`
 }
 ```
 
@@ -156,7 +303,7 @@ export function render ():string {
 
 ### Props
 
-Declare reactive attributes via withProps. Each prop becomes:
+Declare reactive attributes via `withProps`. Each prop becomes:
 
 * An observed HTML attribute (auto-synced via `attributeChangedCallback`)
 * A signal at `ctx.props.propName`
@@ -170,27 +317,17 @@ Declare reactive attributes via withProps. Each prop becomes:
 | `p.boolean()` | `"true"` / `""` &rarr; `true`, `"false"` &rarr; `false` | `false` |
 | `p.oneOf(opts)` | Picklist enum, throws on invalid | throws |
 
-### define
-
-```ts
-import { define } from 'microtags'
 
-define(tagName: string): ComponentBuilder
-```
-
-Returns a fluent builder. Call `.setup()` to register the custom element.
-All builder methods are chainable and fully type-inferred.
-
-### withProps
+#### `withProps`
 
 ```ts
 .withProps(p => ({
-    count:   p.number(),        // attribute -> number  (NaN when absent)
-    label:   p.string(),        // attribute -> string  ('' when absent)
-    active:  p.boolean(),       // attribute -> boolean (true if present)
-    data:    p.json<MyType>(),  // attribute -> JSON.parse or undefined
-    schema:  p.schema(zodSchema),  // Standard Schema (Zod, Valibot, ArkType …)
-    value:   p.prop(0),         // property-only, not observed as an attribute
+    count:   p.number(),           // attribute -> number  (NaN when absent)
+    label:   p.string(),           // attribute -> string  ('' when absent)
+    active:  p.boolean(),          // attribute -> boolean (true if present)
+    data:    p.json<MyType>(),     // attribute -> JSON.parse or undefined
+    schema:  p.schema(zodSchema),  // Standard Schema (Zod, Valibot, ArkType)
+    value:   p.prop(0),            // property-only, not an observed attribute
 }))
 ```
 
@@ -201,7 +338,21 @@ ctx.props.count()      // read
 ctx.props.count(42)    // write
 ```
 
-### withRefs
+
+### Refs
+
+The `data-ref` attribute is a fallback. It's used when you don't pass a
+selector to `r.one()`. If you pass explicit CSS selectors to `withRefs`,
+e.g. `{ copy: r.one('button') }`, then the HTML does not require a `data-ref`
+attribute.
+
+#### `withRefs`
+
+Call `r.one()` / `r.all()` with no argument to match `[data-ref="<key>"]`,
+where `key` is the key name you pass in, or pass a CSS selector to query by
+it instead. Queries are resolved relative to the host element, during
+[the `connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks).
+
 
 ```ts
 .withRefs(r => ({
@@ -210,9 +361,7 @@ ctx.props.count(42)    // write
 }))
 ```
 
-Call `r.one()` / `r.all()` with no argument to match `[data-ref="<key>"]`,
-or pass a CSS selector to query by it instead — resolved relative to the
-host element:
+If there are no `data-ref` attribtues in the HTML, use CSS query selectors.
 
 ```ts
 .withRefs(r => ({
@@ -221,7 +370,9 @@ host element:
 }))
 ```
 
-Refs are resolved from within the element during `connectedCallback`.
+See [#refs in serverside-rendering](#refs). Each component created with
+`micortags` exposes a `.refs` property that is an object map
+of ref names, eg `MyComponent.refs.copyButton`.
 
 #### Element types
 
@@ -255,6 +406,18 @@ Non-HTML refs (SVG / MathML) are out of scope: the type parameter is
 constrained to `HTMLElement`, so cast at the use site if you need one
 (e.g. `ctx.refs.icon as unknown as SVGSVGElement`).
 
+
+### define
+
+```ts
+import { define } from 'microtags'
+
+define(tagName: string): ComponentBuilder
+```
+
+Returns a fluent builder. Call `.setup()` to register the custom element.
+All builder methods are chainable and fully type-inferred.
+
 ### withContexts
 
 ```ts
@@ -376,5 +539,5 @@ Props declared with `withProps` are native alien-signals callable signals.
 There is no `$` prefix convention — all prop names are plain identifiers.
 
 ```
-/ed3d-plan-and-execute:execute-implementation-plan /Users/nick/code/microtags/docs/implementation-plans/2026-06-27-two-way-bind-design/ /Users/nick/code/microtags/
+/ed3d-plan-and-execute:execute-implementation-plan /Users/nick/code/_microtags/docs/implementation-plans/2026-06-28-zod-validation-example/ /Users/nick/code/_microtags/
 ```

package/dist/chunk-7QVYU63E.js

@@ -0,0 +1,7 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};
+//# sourceMappingURL=chunk-7QVYU63E.js.map

package/dist/chunk-7QVYU63E.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/chunk-CCYWRJW6.js

@@ -0,0 +1,98 @@
+import {
+  __name
+} from "./chunk-7QVYU63E.js";
+
+// src/reactivity.ts
+import {
+  signal,
+  effect,
+  effectScope,
+  setActiveSub
+} from "alien-signals";
+function untracked(fn) {
+  const prev = setActiveSub(void 0);
+  try {
+    return fn();
+  } finally {
+    setActiveSub(prev);
+  }
+}
+__name(untracked, "untracked");
+function peek(sig) {
+  return untracked(() => sig());
+}
+__name(peek, "peek");
+
+// src/context.ts
+var providerStorage = /* @__PURE__ */ new WeakMap();
+var pendingCallbacks = /* @__PURE__ */ new Map();
+function createContext() {
+  return { id: /* @__PURE__ */ Symbol("microtag-context") };
+}
+__name(createContext, "createContext");
+function provide(element, token, value) {
+  let map = providerStorage.get(element);
+  if (!map) {
+    map = /* @__PURE__ */ new Map();
+    providerStorage.set(element, map);
+  }
+  const existing = map.get(token.id);
+  if (existing) {
+    existing(value);
+  } else {
+    const sig = signal(value);
+    map.set(token.id, sig);
+  }
+  notifyPending(token.id);
+  return () => {
+    const m = providerStorage.get(element);
+    if (m) {
+      m.delete(token.id);
+      if (m.size === 0) providerStorage.delete(element);
+    }
+  };
+}
+__name(provide, "provide");
+function resolveContextSignal(element, token) {
+  let current = element.parentElement;
+  while (current) {
+    const map = providerStorage.get(current);
+    if (map && map.has(token.id)) {
+      return map.get(token.id);
+    }
+    current = current.parentElement;
+  }
+  return void 0;
+}
+__name(resolveContextSignal, "resolveContextSignal");
+function onContextAvailable(id, callback) {
+  let set = pendingCallbacks.get(id);
+  if (!set) {
+    set = /* @__PURE__ */ new Set();
+    pendingCallbacks.set(id, set);
+  }
+  set.add(callback);
+  return () => {
+    pendingCallbacks.get(id)?.delete(callback);
+  };
+}
+__name(onContextAvailable, "onContextAvailable");
+function notifyPending(id) {
+  const set = pendingCallbacks.get(id);
+  if (set) {
+    for (const cb of set) cb();
+  }
+}
+__name(notifyPending, "notifyPending");
+
+export {
+  signal,
+  effect,
+  untracked,
+  peek,
+  createContext,
+  provide,
+  resolveContextSignal,
+  onContextAvailable
+};
+//# sourceMappingURL=chunk-CCYWRJW6.js.map

package/dist/chunk-CCYWRJW6.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/reactivity.ts", "../src/context.ts"],
+  "sourcesContent": ["import {\n    signal,\n    effect,\n    effectScope,\n    setActiveSub,\n} from 'alien-signals'\nimport type { Signal } from './types.js'\n\n// Re-export alien-signals primitives under stable names for internal use.\nexport { signal, effect, effectScope }\n\n/**\n * Run fn without tracking any signals it reads.\n * Suspends the current subscriber via setActiveSub(undefined),\n * restoring it in a finally block so nested effects are unaffected.\n */\nexport function untracked<T> (fn:() => T):T {\n    const prev = setActiveSub(undefined)\n    try {\n        return fn()\n    } finally {\n        setActiveSub(prev)\n    }\n}\n\n/**\n * Read a signal's current value without subscribing.\n * Equivalent to untracked(() => sig()).\n */\nexport function peek<T> (sig:Signal<T>):T {\n    return untracked(() => sig())\n}\n", "import { signal } from './reactivity.js'\nimport type { ContextToken, Signal } from './types.js'\n\n// Provider storage: element -> (contextId -> Signal)\nconst providerStorage = new WeakMap<Element, Map<symbol, Signal<unknown>>>()\n\n// Pending consumers waiting for a context by id\nconst pendingCallbacks = new Map<symbol, Set<() => void>>()\n\n/**\n * Create a new context token.\n * Each token uniquely identifies a type of shared context.\n */\nexport function createContext<T> ():ContextToken<T> {\n    return { id: Symbol('microtag-context') }\n}\n\n/**\n * Provide a context value from an element to its descendants.\n * Returns a cleanup function that removes the provided value.\n */\nexport function provide<T> (\n    element:Element,\n    token:ContextToken<T>,\n    value:T\n):() => void {\n    let map = providerStorage.get(element)\n    if (!map) {\n        map = new Map()\n        providerStorage.set(element, map)\n    }\n\n    const existing = map.get(token.id) as Signal<T> | undefined\n    if (existing) {\n        existing(value)\n    } else {\n        const sig = signal(value) as unknown as Signal<T>\n        map.set(token.id, sig as Signal<unknown>)\n    }\n\n    notifyPending(token.id)\n\n    return () => {\n        const m = providerStorage.get(element)\n        if (m) {\n            m.delete(token.id)\n            if (m.size === 0) providerStorage.delete(element)\n        }\n    }\n}\n\n/**\n * Walk up the DOM from element to find the nearest provider signal.\n * Returns the signal (not the value) so callers can subscribe to changes.\n */\nexport function resolveContextSignal<T> (\n    element:Element,\n    token:ContextToken<T>\n):Signal<T> | undefined {\n    let current:Element | null = element.parentElement\n    while (current) {\n        const map = providerStorage.get(current)\n        if (map && map.has(token.id)) {\n            return map.get(token.id) as Signal<T>\n        }\n        current = current.parentElement\n    }\n    return undefined\n}\n\n/**\n * Register a callback to run when the given context becomes available.\n * Returns a cleanup function to unregister.\n */\nexport function onContextAvailable (\n    id:symbol,\n    callback:() => void\n):() => void {\n    let set = pendingCallbacks.get(id)\n    if (!set) {\n        set = new Set()\n        pendingCallbacks.set(id, set)\n    }\n    set.add(callback)\n    return () => { pendingCallbacks.get(id)?.delete(callback) }\n}\n\nfunction notifyPending (id:symbol):void {\n    const set = pendingCallbacks.get(id)\n    if (set) {\n        for (const cb of set) cb()\n    }\n}\n"],
+  "mappings": ";;;;;AAAA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAWA,SAAS,UAAc,IAAc;AACxC,QAAM,OAAO,aAAa,MAAS;AACnC,MAAI;AACA,WAAO,GAAG;AAAA,EACd,UAAE;AACE,iBAAa,IAAI;AAAA,EACrB;AACJ;AAPgB;AAaT,SAAS,KAAS,KAAiB;AACtC,SAAO,UAAU,MAAM,IAAI,CAAC;AAChC;AAFgB;;;ACzBhB,IAAM,kBAAkB,oBAAI,QAA+C;AAG3E,IAAM,mBAAmB,oBAAI,IAA6B;AAMnD,SAAS,gBAAoC;AAChD,SAAO,EAAE,IAAI,uBAAO,kBAAkB,EAAE;AAC5C;AAFgB;AAQT,SAAS,QACZ,SACA,OACA,OACS;AACT,MAAI,MAAM,gBAAgB,IAAI,OAAO;AACrC,MAAI,CAAC,KAAK;AACN,UAAM,oBAAI,IAAI;AACd,oBAAgB,IAAI,SAAS,GAAG;AAAA,EACpC;AAEA,QAAM,WAAW,IAAI,IAAI,MAAM,EAAE;AACjC,MAAI,UAAU;AACV,aAAS,KAAK;AAAA,EAClB,OAAO;AACH,UAAM,MAAM,OAAO,KAAK;AACxB,QAAI,IAAI,MAAM,IAAI,GAAsB;AAAA,EAC5C;AAEA,gBAAc,MAAM,EAAE;AAEtB,SAAO,MAAM;AACT,UAAM,IAAI,gBAAgB,IAAI,OAAO;AACrC,QAAI,GAAG;AACH,QAAE,OAAO,MAAM,EAAE;AACjB,UAAI,EAAE,SAAS,EAAG,iBAAgB,OAAO,OAAO;AAAA,IACpD;AAAA,EACJ;AACJ;AA5BgB;AAkCT,SAAS,qBACZ,SACA,OACoB;AACpB,MAAI,UAAyB,QAAQ;AACrC,SAAO,SAAS;AACZ,UAAM,MAAM,gBAAgB,IAAI,OAAO;AACvC,QAAI,OAAO,IAAI,IAAI,MAAM,EAAE,GAAG;AAC1B,aAAO,IAAI,IAAI,MAAM,EAAE;AAAA,IAC3B;AACA,cAAU,QAAQ;AAAA,EACtB;AACA,SAAO;AACX;AAbgB;AAmBT,SAAS,mBACZ,IACA,UACS;AACT,MAAI,MAAM,iBAAiB,IAAI,EAAE;AACjC,MAAI,CAAC,KAAK;AACN,UAAM,oBAAI,IAAI;AACd,qBAAiB,IAAI,IAAI,GAAG;AAAA,EAChC;AACA,MAAI,IAAI,QAAQ;AAChB,SAAO,MAAM;AAAE,qBAAiB,IAAI,EAAE,GAAG,OAAO,QAAQ;AAAA,EAAE;AAC9D;AAXgB;AAahB,SAAS,cAAe,IAAgB;AACpC,QAAM,MAAM,iBAAiB,IAAI,EAAE;AACnC,MAAI,KAAK;AACL,eAAW,MAAM,IAAK,IAAG;AAAA,EAC7B;AACJ;AALS;",
+  "names": []
+}

package/dist/chunk-E7ZGOHL3.js

@@ -0,0 +1,51 @@
+import {
+  __name
+} from "./chunk-7QVYU63E.js";
+
+// src/util.ts
+function coerceNumber(raw) {
+  return raw === null ? NaN : Number(raw);
+}
+__name(coerceNumber, "coerceNumber");
+function coerceString(raw) {
+  return raw ?? "";
+}
+__name(coerceString, "coerceString");
+function coerceBoolean(raw) {
+  return raw !== null;
+}
+__name(coerceBoolean, "coerceBoolean");
+function coerceJson(raw) {
+  if (raw === null) return void 0;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return void 0;
+  }
+}
+__name(coerceJson, "coerceJson");
+function runCleanups(fns) {
+  let firstError;
+  let caught = false;
+  for (const fn of fns) {
+    try {
+      fn();
+    } catch (err) {
+      if (!caught) {
+        firstError = err;
+        caught = true;
+      }
+    }
+  }
+  if (caught) throw firstError;
+}
+__name(runCleanups, "runCleanups");
+
+export {
+  coerceNumber,
+  coerceString,
+  coerceBoolean,
+  coerceJson,
+  runCleanups
+};
+//# sourceMappingURL=chunk-E7ZGOHL3.js.map

package/dist/chunk-E7ZGOHL3.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/util.ts"],
+  "sourcesContent": ["import type { Cleanup } from './types.js'\n\n/**\n * Coerce a raw attribute string to a number.\n * Returns NaN if the value cannot be parsed.\n */\nexport function coerceNumber (raw:string | null):number {\n    return raw === null ? NaN : Number(raw)\n}\n\n/**\n * Coerce a raw attribute string to a string.\n * Converts null to empty string.\n */\nexport function coerceString (raw:string | null):string {\n    return raw ?? ''\n}\n\n/**\n * Coerce a raw attribute string to a boolean.\n * Absence (null) is false; presence of any value (including '') is true.\n */\nexport function coerceBoolean (raw:string | null):boolean {\n    return raw !== null\n}\n\n/**\n * Coerce a raw attribute string to a parsed JSON value.\n * Returns undefined if the value is null or cannot be parsed.\n */\nexport function coerceJson<T = unknown> (raw:string | null):T | undefined {\n    if (raw === null) return undefined\n    try {\n        return JSON.parse(raw) as T\n    } catch {\n        return undefined\n    }\n}\n\n/**\n * Run every cleanup in the list, ensuring all run even if some throw.\n * After all have run, re-throws the first error encountered.\n */\nexport function runCleanups (fns:Cleanup[]):void {\n    let firstError:unknown\n    let caught = false\n    for (const fn of fns) {\n        try {\n            fn()\n        } catch (err) {\n            if (!caught) {\n                firstError = err\n                caught = true\n            }\n        }\n    }\n    if (caught) throw firstError\n}\n"],
+  "mappings": ";;;;;AAMO,SAAS,aAAc,KAA0B;AACpD,SAAO,QAAQ,OAAO,MAAM,OAAO,GAAG;AAC1C;AAFgB;AAQT,SAAS,aAAc,KAA0B;AACpD,SAAO,OAAO;AAClB;AAFgB;AAQT,SAAS,cAAe,KAA2B;AACtD,SAAO,QAAQ;AACnB;AAFgB;AAQT,SAAS,WAAyB,KAAiC;AACtE,MAAI,QAAQ,KAAM,QAAO;AACzB,MAAI;AACA,WAAO,KAAK,MAAM,GAAG;AAAA,EACzB,QAAQ;AACJ,WAAO;AAAA,EACX;AACJ;AAPgB;AAaT,SAAS,YAAa,KAAoB;AAC7C,MAAI;AACJ,MAAI,SAAS;AACb,aAAW,MAAM,KAAK;AAClB,QAAI;AACA,SAAG;AAAA,IACP,SAAS,KAAK;AACV,UAAI,CAAC,QAAQ;AACT,qBAAa;AACb,iBAAS;AAAA,MACb;AAAA,IACJ;AAAA,EACJ;AACA,MAAI,OAAQ,OAAM;AACtB;AAdgB;",
+  "names": []
+}

package/dist/context.cjs

@@ -17,6 +17,8 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/context.ts
 var context_exports = {};
 __export(context_exports, {
   createContext: () => createContext,
@@ -25,9 +27,13 @@ __export(context_exports, {
   resolveContextSignal: () => resolveContextSignal
 });
 module.exports = __toCommonJS(context_exports);
-var import_reactivity = require("./reactivity.js");
-const providerStorage = /* @__PURE__ */ new WeakMap();
-const pendingCallbacks = /* @__PURE__ */ new Map();
+
+// src/reactivity.ts
+var import_alien_signals = require("alien-signals");
+
+// src/context.ts
+var providerStorage = /* @__PURE__ */ new WeakMap();
+var pendingCallbacks = /* @__PURE__ */ new Map();
 function createContext() {
   return { id: /* @__PURE__ */ Symbol("microtag-context") };
 }
@@ -42,7 +48,7 @@ function provide(element, token, value) {
   if (existing) {
     existing(value);
   } else {
-    const sig = (0, import_reactivity.signal)(value);
+    const sig = (0, import_alien_signals.signal)(value);
     map.set(token.id, sig);
   }
   notifyPending(token.id);

package/dist/context.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/context.ts"],
-  "sourcesContent": ["import { signal } from './reactivity.js'\nimport type { ContextToken, Signal } from './types.js'\n\n// Provider storage: element -> (contextId -> Signal)\nconst providerStorage = new WeakMap<Element, Map<symbol, Signal<unknown>>>()\n\n// Pending consumers waiting for a context by id\nconst pendingCallbacks = new Map<symbol, Set<() => void>>()\n\n/**\n * Create a new context token.\n * Each token uniquely identifies a type of shared context.\n */\nexport function createContext<T> ():ContextToken<T> {\n    return { id: Symbol('microtag-context') }\n}\n\n/**\n * Provide a context value from an element to its descendants.\n * Returns a cleanup function that removes the provided value.\n */\nexport function provide<T> (\n    element:Element,\n    token:ContextToken<T>,\n    value:T\n):() => void {\n    let map = providerStorage.get(element)\n    if (!map) {\n        map = new Map()\n        providerStorage.set(element, map)\n    }\n\n    const existing = map.get(token.id) as Signal<T> | undefined\n    if (existing) {\n        existing(value)\n    } else {\n        const sig = signal(value) as unknown as Signal<T>\n        map.set(token.id, sig as Signal<unknown>)\n    }\n\n    notifyPending(token.id)\n\n    return () => {\n        const m = providerStorage.get(element)\n        if (m) {\n            m.delete(token.id)\n            if (m.size === 0) providerStorage.delete(element)\n        }\n    }\n}\n\n/**\n * Walk up the DOM from element to find the nearest provider signal.\n * Returns the signal (not the value) so callers can subscribe to changes.\n */\nexport function resolveContextSignal<T> (\n    element:Element,\n    token:ContextToken<T>\n):Signal<T> | undefined {\n    let current:Element | null = element.parentElement\n    while (current) {\n        const map = providerStorage.get(current)\n        if (map && map.has(token.id)) {\n            return map.get(token.id) as Signal<T>\n        }\n        current = current.parentElement\n    }\n    return undefined\n}\n\n/**\n * Register a callback to run when the given context becomes available.\n * Returns a cleanup function to unregister.\n */\nexport function onContextAvailable (\n    id:symbol,\n    callback:() => void\n):() => void {\n    let set = pendingCallbacks.get(id)\n    if (!set) {\n        set = new Set()\n        pendingCallbacks.set(id, set)\n    }\n    set.add(callback)\n    return () => { pendingCallbacks.get(id)?.delete(callback) }\n}\n\nfunction notifyPending (id:symbol):void {\n    const set = pendingCallbacks.get(id)\n    if (set) {\n        for (const cb of set) cb()\n    }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AAIvB,MAAM,kBAAkB,oBAAI,QAA+C;AAG3E,MAAM,mBAAmB,oBAAI,IAA6B;AAMnD,SAAS,gBAAoC;AAChD,SAAO,EAAE,IAAI,uBAAO,kBAAkB,EAAE;AAC5C;AAFgB;AAQT,SAAS,QACZ,SACA,OACA,OACS;AACT,MAAI,MAAM,gBAAgB,IAAI,OAAO;AACrC,MAAI,CAAC,KAAK;AACN,UAAM,oBAAI,IAAI;AACd,oBAAgB,IAAI,SAAS,GAAG;AAAA,EACpC;AAEA,QAAM,WAAW,IAAI,IAAI,MAAM,EAAE;AACjC,MAAI,UAAU;AACV,aAAS,KAAK;AAAA,EAClB,OAAO;AACH,UAAM,UAAM,0BAAO,KAAK;AACxB,QAAI,IAAI,MAAM,IAAI,GAAsB;AAAA,EAC5C;AAEA,gBAAc,MAAM,EAAE;AAEtB,SAAO,MAAM;AACT,UAAM,IAAI,gBAAgB,IAAI,OAAO;AACrC,QAAI,GAAG;AACH,QAAE,OAAO,MAAM,EAAE;AACjB,UAAI,EAAE,SAAS,EAAG,iBAAgB,OAAO,OAAO;AAAA,IACpD;AAAA,EACJ;AACJ;AA5BgB;AAkCT,SAAS,qBACZ,SACA,OACoB;AACpB,MAAI,UAAyB,QAAQ;AACrC,SAAO,SAAS;AACZ,UAAM,MAAM,gBAAgB,IAAI,OAAO;AACvC,QAAI,OAAO,IAAI,IAAI,MAAM,EAAE,GAAG;AAC1B,aAAO,IAAI,IAAI,MAAM,EAAE;AAAA,IAC3B;AACA,cAAU,QAAQ;AAAA,EACtB;AACA,SAAO;AACX;AAbgB;AAmBT,SAAS,mBACZ,IACA,UACS;AACT,MAAI,MAAM,iBAAiB,IAAI,EAAE;AACjC,MAAI,CAAC,KAAK;AACN,UAAM,oBAAI,IAAI;AACd,qBAAiB,IAAI,IAAI,GAAG;AAAA,EAChC;AACA,MAAI,IAAI,QAAQ;AAChB,SAAO,MAAM;AAAE,qBAAiB,IAAI,EAAE,GAAG,OAAO,QAAQ;AAAA,EAAE;AAC9D;AAXgB;AAahB,SAAS,cAAe,IAAgB;AACpC,QAAM,MAAM,iBAAiB,IAAI,EAAE;AACnC,MAAI,KAAK;AACL,eAAW,MAAM,IAAK,IAAG;AAAA,EAC7B;AACJ;AALS;",
+  "sources": ["../src/context.ts", "../src/reactivity.ts"],
+  "sourcesContent": ["import { signal } from './reactivity.js'\nimport type { ContextToken, Signal } from './types.js'\n\n// Provider storage: element -> (contextId -> Signal)\nconst providerStorage = new WeakMap<Element, Map<symbol, Signal<unknown>>>()\n\n// Pending consumers waiting for a context by id\nconst pendingCallbacks = new Map<symbol, Set<() => void>>()\n\n/**\n * Create a new context token.\n * Each token uniquely identifies a type of shared context.\n */\nexport function createContext<T> ():ContextToken<T> {\n    return { id: Symbol('microtag-context') }\n}\n\n/**\n * Provide a context value from an element to its descendants.\n * Returns a cleanup function that removes the provided value.\n */\nexport function provide<T> (\n    element:Element,\n    token:ContextToken<T>,\n    value:T\n):() => void {\n    let map = providerStorage.get(element)\n    if (!map) {\n        map = new Map()\n        providerStorage.set(element, map)\n    }\n\n    const existing = map.get(token.id) as Signal<T> | undefined\n    if (existing) {\n        existing(value)\n    } else {\n        const sig = signal(value) as unknown as Signal<T>\n        map.set(token.id, sig as Signal<unknown>)\n    }\n\n    notifyPending(token.id)\n\n    return () => {\n        const m = providerStorage.get(element)\n        if (m) {\n            m.delete(token.id)\n            if (m.size === 0) providerStorage.delete(element)\n        }\n    }\n}\n\n/**\n * Walk up the DOM from element to find the nearest provider signal.\n * Returns the signal (not the value) so callers can subscribe to changes.\n */\nexport function resolveContextSignal<T> (\n    element:Element,\n    token:ContextToken<T>\n):Signal<T> | undefined {\n    let current:Element | null = element.parentElement\n    while (current) {\n        const map = providerStorage.get(current)\n        if (map && map.has(token.id)) {\n            return map.get(token.id) as Signal<T>\n        }\n        current = current.parentElement\n    }\n    return undefined\n}\n\n/**\n * Register a callback to run when the given context becomes available.\n * Returns a cleanup function to unregister.\n */\nexport function onContextAvailable (\n    id:symbol,\n    callback:() => void\n):() => void {\n    let set = pendingCallbacks.get(id)\n    if (!set) {\n        set = new Set()\n        pendingCallbacks.set(id, set)\n    }\n    set.add(callback)\n    return () => { pendingCallbacks.get(id)?.delete(callback) }\n}\n\nfunction notifyPending (id:symbol):void {\n    const set = pendingCallbacks.get(id)\n    if (set) {\n        for (const cb of set) cb()\n    }\n}\n", "import {\n    signal,\n    effect,\n    effectScope,\n    setActiveSub,\n} from 'alien-signals'\nimport type { Signal } from './types.js'\n\n// Re-export alien-signals primitives under stable names for internal use.\nexport { signal, effect, effectScope }\n\n/**\n * Run fn without tracking any signals it reads.\n * Suspends the current subscriber via setActiveSub(undefined),\n * restoring it in a finally block so nested effects are unaffected.\n */\nexport function untracked<T> (fn:() => T):T {\n    const prev = setActiveSub(undefined)\n    try {\n        return fn()\n    } finally {\n        setActiveSub(prev)\n    }\n}\n\n/**\n * Read a signal's current value without subscribing.\n * Equivalent to untracked(() => sig()).\n */\nexport function peek<T> (sig:Signal<T>):T {\n    return untracked(() => sig())\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,2BAKO;;;ADDP,IAAM,kBAAkB,oBAAI,QAA+C;AAG3E,IAAM,mBAAmB,oBAAI,IAA6B;AAMnD,SAAS,gBAAoC;AAChD,SAAO,EAAE,IAAI,uBAAO,kBAAkB,EAAE;AAC5C;AAFgB;AAQT,SAAS,QACZ,SACA,OACA,OACS;AACT,MAAI,MAAM,gBAAgB,IAAI,OAAO;AACrC,MAAI,CAAC,KAAK;AACN,UAAM,oBAAI,IAAI;AACd,oBAAgB,IAAI,SAAS,GAAG;AAAA,EACpC;AAEA,QAAM,WAAW,IAAI,IAAI,MAAM,EAAE;AACjC,MAAI,UAAU;AACV,aAAS,KAAK;AAAA,EAClB,OAAO;AACH,UAAM,UAAM,6BAAO,KAAK;AACxB,QAAI,IAAI,MAAM,IAAI,GAAsB;AAAA,EAC5C;AAEA,gBAAc,MAAM,EAAE;AAEtB,SAAO,MAAM;AACT,UAAM,IAAI,gBAAgB,IAAI,OAAO;AACrC,QAAI,GAAG;AACH,QAAE,OAAO,MAAM,EAAE;AACjB,UAAI,EAAE,SAAS,EAAG,iBAAgB,OAAO,OAAO;AAAA,IACpD;AAAA,EACJ;AACJ;AA5BgB;AAkCT,SAAS,qBACZ,SACA,OACoB;AACpB,MAAI,UAAyB,QAAQ;AACrC,SAAO,SAAS;AACZ,UAAM,MAAM,gBAAgB,IAAI,OAAO;AACvC,QAAI,OAAO,IAAI,IAAI,MAAM,EAAE,GAAG;AAC1B,aAAO,IAAI,IAAI,MAAM,EAAE;AAAA,IAC3B;AACA,cAAU,QAAQ;AAAA,EACtB;AACA,SAAO;AACX;AAbgB;AAmBT,SAAS,mBACZ,IACA,UACS;AACT,MAAI,MAAM,iBAAiB,IAAI,EAAE;AACjC,MAAI,CAAC,KAAK;AACN,UAAM,oBAAI,IAAI;AACd,qBAAiB,IAAI,IAAI,GAAG;AAAA,EAChC;AACA,MAAI,IAAI,QAAQ;AAChB,SAAO,MAAM;AAAE,qBAAiB,IAAI,EAAE,GAAG,OAAO,QAAQ;AAAA,EAAE;AAC9D;AAXgB;AAahB,SAAS,cAAe,IAAgB;AACpC,QAAM,MAAM,iBAAiB,IAAI,EAAE;AACnC,MAAI,KAAK;AACL,eAAW,MAAM,IAAK,IAAG;AAAA,EAC7B;AACJ;AALS;",
   "names": []
 }