kerfjs 0.10.0 → 0.11.1

package/CHANGELOG.md

@@ -7,9 +7,29 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 ## Unreleased
 
 
-- `kerfjs` npm package now bundles the drop-in AI-assistant configs at `ai/skill.md`, `ai/cursorrules`, and `ai/manifest.json` — so `npm install kerfjs` lands them directly on disk instead of asking consumers to find them on GitHub. The repo-root `kerf.claude-skill.md` / `kerf.cursorrules` remain the source of truth; `ai/` is regenerated by `scripts/sync-ai-bundle.mjs` and kept honest by the new `npm run check:ai-bundle-in-sync` gate (wired into `npm run check`). Each bundled file carries a `kerf-skill-version` line + a `KERF-APP-CANONICAL-END` marker so the new ESLint rule can detect drift and auto-fix only the kerf-maintained section while preserving consumer customisations below the marker. See `docs/12-ai-assistant-configs.md`.
+- KF-230 — `eslint-plugin-kerfjs` adds `kerfjs/prefer-attr-selector` (`warn` in recommended; plugin bumped to v0.11.0) — flags `delegate(_, _, '[name="value"]', _)` literal selectors and recommends `attr('name', 'value').selector`. Routing JSX `{...spec.attrs}` and the delegate target through one typed source means a rename can't desync the two. Conservative AST match: compound selectors (`[a="x"][b="y"]`), tag-qualified (`button[data-action="x"]`), bare-presence (`[data-new]`), and class / id selectors are left alone — those aren't 1:1 swaps for `attr()`. Severity `warn` because the literal form still works at runtime.
+- KF-230 — `scripts/check-docs-examples.mjs` gains Check 3 (example doc/source import mirroring). For every paired `site/src/content/docs/examples/complete/<name>.md` ↔ `site/src/examples/complete/<name>/main.tsx`, every named kerfjs import the source pulls in must also appear in at least one kerf-import statement in the doc page. Catches "release adds a new public API (`attr()`, …) and updates the example source, but the rendered doc excerpt still uses the pre-release pattern" — the v0.11.0 release shipped exactly this drift across TodoMVC + chat doc pages, 12 migration pages, 7 reactivity-demo sections, and `docs/ai/usage-guide.md`, all corrected in the same ticket.
+- `attr()` now ships two overloads and a richer return type. **Static** `attr(name, value)` returns `AttrSpec<N, V>` — a frozen descriptor with `.name`, `.value`, `.selector`, and `.attrs` (a `{ readonly [name]: value }` object ready to spread into JSX, keeping the attribute name out of every call site so renames propagate automatically). **Dynamic** `attr<N, V extends string = string>(name)` pre-validates the attribute name and returns a per-render factory `(value: V) => { readonly [name]: V }` for per-row data attributes like `data-id`. `V` defaults to `string`; specify both generics explicitly (e.g. `attr<'data-sort', 'asc'|'desc'>('data-sort')`) to constrain the value set the factory accepts. `AttrSpec` gains two type parameters (`N extends string`, `V extends string`) for tighter `satisfies` constraints. `satisfies Record<string, AttrSpec<'data-action'>>` now catches a mismatched attribute name at compile time.
+- `delegate<T extends Element = Element>()` and `delegateCapture<T>()` now accept an optional element-type generic that narrows the matched element in the handler — `delegate<HTMLButtonElement>(...)` avoids the `as HTMLButtonElement` cast, zero runtime change.
+- `get()` inside `defineStore` actions is now typed `() => Readonly<TState>` — the compile-time counterpart to the existing dev-mode `Object.freeze` on the snapshot. Actions that try to mutate `get().prop = ...` now fail `tsc --noEmit` without a cast, before even reaching the runtime `TypeError`.
+- Two new opt-in dev warnings in `src/dev-each-warn.ts`: `KERF_DEV_WARN_DUPLICATE_EACH_KEYS=1` (fires when two items in the same `each()` list produce the same `cacheKey` value — indicates a non-unique cache-key function) and `KERF_DEV_WARN_EACH_IN_MORPH_SKIP=1` (fires when an `each()` list is nested inside a `data-morph-skip` subtree — flags the asymmetric-freeze pattern where static JSX in the same ancestor is frozen while the list still updates). Both are one-shot per `each()` callsite.
+- `eslint-plugin-kerfjs` adds `kerfjs/no-raw-with-dynamic-arg` (`warn` in recommended) — flags any `raw()` call whose argument is not a static string literal or an expression-free template literal. Creates a searchable audit trail for every dynamic HTML injection point; suppress with `eslint-disable-next-line` to acknowledge the sanitizer.
+- `mount()` same-element double-mount error now names the element in the message (`<div#app> is already mounted`) instead of a generic description, so the duplicate mount site is immediately locatable in DevTools or a test failure log.
+- `kerfjs` npm package now bundles the drop-in AI-assistant configs at `ai/skill.md`, `ai/cursorrules`, and `ai/manifest.json` — so `npm install kerfjs` lands them directly on disk instead of asking consumers to find them on GitHub. The repo-root `kerf.claude-skill.md` / `kerf.cursorrules` remain the source of truth; `ai/` is regenerated by `scripts/sync-ai-bundle.mjs` and kept honest by the new `npm run check:ai-bundle-in-sync` gate (wired into `npm run check`). Each bundled file carries a `kerf-skill-version` line + a `KERF-APP-CANONICAL-END` marker so the new ESLint rule can detect drift and auto-fix only the kerf-maintained section while preserving consumer customizations below the marker. See `docs/12-ai-assistant-configs.md`.
 - `eslint-plugin-kerfjs` v0.9.0 adds `kerfjs/ai-assistant-configs` (`warn` in recommended config) — once per lint pass, checks the consumer's `.claude/skills/kerf-app/SKILL.md` and `.cursorrules` against the bundled `kerfjs/ai/manifest.json`. Reports `missing` / `stale` / `forked` states; `eslint --fix` writes the bundled canonical above the `KERF-APP-CANONICAL-END` marker and preserves the consumer's append zone below it (the "versioned-section preservation" strategy). Granular disable via `['warn', { claude: false, cursor: true }]`.
 
+## [0.11.1] - 2026-05-21
+
+
+- `attr()` redesign: typed `AttrSpec<N, V>` exposes `.attrs` with dual overloads for cleaner attribute handling
+
+## [0.11.0] - 2026-05-21
+
+
+- `attr()` redesigned with `AttrSpec<N,V>` shape, `.attrs` accessor, and dual overloads
+- Hardened defensive programming across the runtime for safer edge-case handling
+- Refreshed published performance numbers from a fresh cross-framework benchmark run
+
 ## [0.10.0] - 2026-05-20
 
 

package/README.md

@@ -11,7 +11,7 @@
 > Introducing Kerf.
 > The smallest cut.
 >
-> 6.1 KB. No virtual DOM. No compiler. No magic.
+> ~11 KB. No virtual DOM. No compiler. No magic.
 > Reactive UI that touches only the bytes that changed.
 
 ```ts
@@ -31,7 +31,7 @@ That's it. Your JSX renders to HTML strings, kerf's native diff applies the mini
 
 ## Why Kerf
 
-1. **Small bundle.** 6.1 KB gzipped including signals (6.5 KB with `arraySignal`). One runtime dependency (`@preact/signals-core`). No virtual DOM, no scheduler, no concurrent-mode machinery. On the [krausest js-framework-benchmark](./bench/results.md) kerf is in the same cluster as Vue, vanjs, and Lit on most operations; Solid wins the compiler-driven `select row` and `partial update` benchmarks.
+1. **Small bundle.** ~11 KB minified + gzipped including `@preact/signals-core` (~12 KB with `arraySignal`). One runtime dependency. No virtual DOM, no scheduler, no concurrent-mode machinery. On the [krausest js-framework-benchmark](./bench/results.md) kerf is in the same cluster as Vue, vanjs, and Lit on most operations; Solid wins the compiler-driven `select row` and `partial update` benchmarks.
 
 2. **No virtual DOM, no compiler.** JSX → HTML strings → native diff. DevTools shows the real DOM because it *is* the DOM.
 
@@ -56,7 +56,7 @@ That's it. Your JSX renders to HTML strings, kerf's native diff applies the mini
 - Building a deeply componentised design-system app → **React / Solid / Svelte**.
 - Need React Native / cross-platform mobile → **React** (Kerf + Tauri/Electron also covers many of these cases).
 - Building a static site → **Astro** (we use it for *this* project's site).
-- Already invested in a framework where switching cost outweighs the ~6 KB win.
+- Already invested in a framework where switching cost outweighs the bundle size gain.
 
 ## Quick tour
 
@@ -158,7 +158,7 @@ npm install kerfjs
 
 ### Optional: `eslint-plugin-kerfjs`
 
-A companion ESLint plugin enforces four of kerf's hard rules at edit time — inline JSX event handlers, missing `data-key` in `each()`, nested `mount()`, and global `JSX.IntrinsicElements` augmentation. The plugin is AST-only (no parser-services dependency), so it works with any TypeScript-ESLint setup.
+A companion ESLint plugin enforces kerf's hard rules at edit time. Four AST rules catch hard-rule violations — inline JSX event handlers, missing `data-key` in `each()`, nested `mount()`, and global `JSX.IntrinsicElements` augmentation. Two additional rules cover `raw()` XSS audit trails and AI-assistant config hygiene. The plugin is AST-only (no parser-services dependency), so it works with any TypeScript-ESLint setup.
 
 ```bash
 npm install --save-dev eslint-plugin-kerfjs
@@ -170,7 +170,7 @@ import kerfjs from 'eslint-plugin-kerfjs';
 export default [kerfjs.configs.recommended];
 ```
 
-Full docs at [brianwestphal.github.io/kerf/docs/eslint-plugin/](https://brianwestphal.github.io/kerf/docs/eslint-plugin/) — legacy `.eslintrc` config, per-rule examples, and the "why only four rules" framing.
+Full docs at [brianwestphal.github.io/kerf/docs/eslint-plugin/](https://brianwestphal.github.io/kerf/docs/eslint-plugin/) — legacy `.eslintrc` config, per-rule examples, and the rationale for which violations get lint rules vs. dev-warns vs. strict TS.
 
 ## Links
 
@@ -178,7 +178,7 @@ Full docs at [brianwestphal.github.io/kerf/docs/eslint-plugin/](https://brianwes
 - **Docs:** [`docs/`](./docs/) — overview · reactivity · stores · render · events · jsx · svg · [API reference](./docs/8-api-reference.md)
 - **Migrating:** [coming from another framework?](https://brianwestphal.github.io/kerf/migrating/) — side-by-side TodoMVC translations + per-framework gotchas
 - **AI guide:** [`docs/ai/usage-guide.md`](./docs/ai/usage-guide.md) — reference for AI tools fetching kerf docs (linked from `llms.txt`)
-- **ESLint plugin:** [brianwestphal.github.io/kerf/docs/eslint-plugin/](https://brianwestphal.github.io/kerf/docs/eslint-plugin/) — `eslint-plugin-kerfjs`; four AST-only rules enforcing kerf hard rules at edit time (source: [`eslint-plugin/`](./eslint-plugin/))
+- **ESLint plugin:** [brianwestphal.github.io/kerf/docs/eslint-plugin/](https://brianwestphal.github.io/kerf/docs/eslint-plugin/) — `eslint-plugin-kerfjs`; six rules (four hard-rule errors + `no-raw-with-dynamic-arg` warn + `ai-assistant-configs` warn) at edit time (source: [`eslint-plugin/`](./eslint-plugin/))
 - **Demo:** [live demo](https://brianwestphal.github.io/kerf/demo/) — eight sections exercising every primitive (counter, store-backed cart, focus survival, keyed list, morph-skip, SVG render, Tier-2 capture, `arraySignal` patches)
 - **Repo:** [github.com/brianwestphal/kerf](https://github.com/brianwestphal/kerf)
 

package/ai/cursorrules

@@ -1,4 +1,4 @@
-<!-- kerf-skill-version: 1.0.0 -->
+<!-- kerf-skill-version: 1.1.0 -->
 # kerf.cursorrules — rules for building apps with kerf
 #
 # Drop this file into your project as `.cursorrules` (Cursor will pick it
@@ -43,6 +43,8 @@ import { arraySignal } from 'kerfjs/array-signal';
 | `each(items, render, cacheKey?)` | keyed list iteration; per-row memoization on object identity (+ optional cacheKey — a passive comparator for external state). Distinct from `data-key` on the rendered element |
 | `delegate(root, type, sel, h)` | one listener at the root, walks `closest(selector)` from target |
 | `delegateCapture(root, type, sel, h)` | capture-phase escape hatch, strict `target.matches()` |
+| `attr(name, value)` | pre-computed `AttrSpec<N,V>` — `.selector` for `delegate()`, `.attrs` to spread into JSX (rename-safe) |
+| `attr(name)` | dynamic factory — `attr<N,V=string>(name)` returns `(value: V) => { readonly [name]: V }`; both generics off → N inferred, V defaults to string; specify both to constrain values |
 | `toElement(jsx)` | parse JSX into one DOM node (SVG-aware) |
 | `raw(html)` | inject pre-escaped HTML |
 | `arraySignal(initial?)` | granular keyed-list signal at `kerfjs/array-signal` subpath; `each()` reconciles in O(patches) |
@@ -92,13 +94,15 @@ When deciding which primitive to reach for, work down the axes:
 ```tsx
 // Signal + mount
 const count = signal(0);
+const ACTIONS = { inc: attr('data-action', 'inc') } as const satisfies Record<string, AttrSpec<'data-action'>>;
+
 mount(document.getElementById('app')!, () => (
   <div>
-    <button data-action="inc">+</button>
+    <button {...ACTIONS.inc.attrs}>+</button>
     <span>{count.value}</span>
   </div>
 ));
-delegate(rootEl, 'click', '[data-action="inc"]', () => { count.value += 1; });
+delegate(rootEl, 'click', ACTIONS.inc.selector, () => { count.value += 1; });
 
 // Keyed list with per-item memoization
 mount(listEl, () => (
@@ -124,7 +128,7 @@ morph(liveCard, '<article class="card">…</article>');
 
 - `JSX: DOM elements cannot be passed as children` → you passed a `toElement()` result inside JSX. Build the whole tree in JSX; get refs via `querySelector` after rendering.
 - Focus / cursor lost on every keystroke → list items lack `data-key`. Add it.
-- Click handler stops firing after re-render → `el.addEventListener` was used. Replace with `delegate(rootEl, 'click', '[data-action="..."]', ...)`.
+- Click handler stops firing after re-render → `el.addEventListener` was used. Replace with `delegate(rootEl, 'click', ACTIONS.foo.selector, ...)` (or a string literal `'[data-action="foo"]'` for ad-hoc cases).
 - Render fn never re-runs → signal was read outside the render fn. Move the `signal.value` read inside.
 - SVG renders as broken / namespaceless markup → use `mount` (HTML path) or `toElement` (SVG-aware), not `innerHTML`.
 - Library widget destroyed on every render → wrap host in `data-morph-skip`; mount the library imperatively after first render.

package/ai/manifest.json

@@ -1,21 +1,21 @@
 {
-  "kerfjsVersion": "0.10.0",
+  "kerfjsVersion": "0.11.1",
   "files": [
     {
       "name": "skill",
       "source": "kerf.claude-skill.md",
       "bundle": "ai/skill.md",
       "dest": ".claude/skills/kerf-app/SKILL.md",
-      "version": "1.0.0",
-      "sha256": "bef982cb743fd4c73e666ee5cf774112e57c93ebb13b24bbacbf08577db0930a"
+      "version": "1.1.0",
+      "sha256": "f2aadb21e33dd389028951ae1ecbd9f8ba68648b3c5beba43fb4dfa2ab29f195"
     },
     {
       "name": "cursorrules",
       "source": "kerf.cursorrules",
       "bundle": "ai/cursorrules",
       "dest": ".cursorrules",
-      "version": "1.0.0",
-      "sha256": "98f7faff2b7585ef9cc511add42ea5d9bf0cbae8307b066af090e9281136d2ab"
+      "version": "1.1.0",
+      "sha256": "a2ec8c221dc694c98b81009cd2d99f9159a45fda94585de2f54471b227099eda"
     }
   ]
 }

package/ai/skill.md

@@ -1,7 +1,7 @@
 ---
 name: kerf-app
 description: Build UIs in the kerf reactive framework (https://github.com/brianwestphal/kerf). Use this skill whenever the user is writing or modifying code that imports `kerfjs`, asks to add a feature to a kerf app, or asks "how do I do X in kerf?". Use it proactively the moment you spot a kerf import in the file you're editing.
-kerf-skill-version: 1.0.0
+kerf-skill-version: 1.1.0
 ---
 
 # Building apps with kerf
@@ -10,7 +10,7 @@ kerf-skill-version: 1.0.0
 > project's `.claude/skills/kerf-app/SKILL.md`) so Claude Code activates
 > it whenever you work on a kerf app.
 
-kerf is a ~6.1 KB reactive UI framework (6.5 KB with `arraySignal`): signals + DOM morphing + JSX → HTML strings. No virtual DOM, no compiler, no scheduler. The whole public surface fits in 15 exports.
+kerf is a ~11 KB reactive UI framework (~12 KB with `arraySignal`): signals + DOM morphing + JSX → HTML strings. No virtual DOM, no compiler, no scheduler. The whole public surface fits in 15 exports.
 
 ## Setup
 
@@ -48,6 +48,8 @@ import { arraySignal } from 'kerfjs/array-signal';
 | `each(items, render, cacheKey?)` | keyed list iteration; per-row memoization on identity (+ optional cacheKey — a passive comparator for external state). Distinct from `data-key` on the rendered element |
 | `delegate(root, type, sel, h)` | one listener at the root; `closest(selector)` walk from target |
 | `delegateCapture(root, type, sel, h)` | capture-phase escape hatch; `target.matches()` strict match |
+| `attr(name, value)` | pre-computed `AttrSpec<N,V>` — `.selector` for `delegate()`, `.attrs` to spread into JSX (rename-safe) |
+| `attr(name)` | dynamic factory — `attr<N,V=string>(name)` returns `(value: V) => { readonly [name]: V }`; both generics off → N inferred, V defaults to string; specify both to constrain values |
 | `toElement(jsx)` | parse JSX into one DOM node (SVG-aware) |
 | `raw(html)` | inject pre-escaped HTML |
 | `arraySignal(initial?)` | granular keyed-list signal (subpath `kerfjs/array-signal`); `each()` reconciles in O(patches) |
@@ -100,13 +102,15 @@ When deciding which primitive to reach for, work down the axes:
 ```tsx
 // Pattern 1: signal + mount + delegate
 const count = signal(0);
+const ACTIONS = { inc: attr('data-action', 'inc') } as const satisfies Record<string, AttrSpec<'data-action'>>;
+
 mount(document.getElementById('app')!, () => (
   <div>
-    <button data-action="inc">+</button>
+    <button {...ACTIONS.inc.attrs}>+</button>
     <span>{count.value}</span>
   </div>
 ));
-delegate(rootEl, 'click', '[data-action="inc"]', () => { count.value += 1; });
+delegate(rootEl, 'click', ACTIONS.inc.selector, () => { count.value += 1; });
 
 // Pattern 2: keyed list with per-row memoization
 mount(listEl, () => (
@@ -135,7 +139,7 @@ morph(liveCard, '<article class="card">…</article>');
 | --- | --- | --- |
 | `JSX: DOM elements cannot be passed as children` | passed a `toElement()` result inside JSX | Build the whole tree in JSX; refs via `querySelector` after rendering |
 | Focus / cursor lost on every keystroke | list items lack `data-key` | Add `data-key` (or `id`) to each list item |
-| Click handler stops firing after re-render | `el.addEventListener` was used | Replace with `delegate(rootEl, 'click', '[data-action="..."]', ...)` |
+| Click handler stops firing after re-render | `el.addEventListener` was used | Replace with `delegate(rootEl, 'click', ACTIONS.foo.selector, ...)` (or a string literal for ad-hoc cases) |
 | Render fn never re-runs | signal was read outside the render fn | Move `signal.value` read inside the render fn |
 | SVG renders as broken / namespaceless markup | `innerHTML` used directly | Use `mount` or `toElement` (SVG-aware) |
 | Library widget destroyed on every render | host reachable by the morph | Wrap host in `data-morph-skip`; mount the library imperatively after first render |

package/dist/{chunk-WUFUTNA7.js → chunk-IBVKW6WU.js}

@@ -66,5 +66,5 @@ function clearStoreRegistry() {
 }
 
 export { clearStoreRegistry, defineStore, resetAllStores };
-//# sourceMappingURL=chunk-WUFUTNA7.js.map
-//# sourceMappingURL=chunk-WUFUTNA7.js.map
+//# sourceMappingURL=chunk-IBVKW6WU.js.map
+//# sourceMappingURL=chunk-IBVKW6WU.js.map

package/dist/chunk-IBVKW6WU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dev-store-warn.ts","../src/store.ts"],"names":[],"mappings":"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","file":"chunk-IBVKW6WU.js","sourcesContent":["/**\n * Dev-mode warning for partial-set violations of Hard Rule 8 (KF-212). When\n * the opt-in env var `KERF_DEV_WARN_NARROW_SET=1` is set in a non-production\n * build, `defineStore`'s `set()` calls `maybeWarnNarrowSet(prev, next, ctx)`\n * before assigning. If `next` is a plain object whose own-keys are a strict\n * subset of `prev`'s own-keys, a one-shot `console.warn` fires naming the\n * missing keys and pointing at the canonical `set({ ...get(), ...next })`\n * merge fix.\n *\n * Why opt-in: narrow-set IS legal — sometimes you want to replace state with\n * a smaller shape (a reset() that drops keys, a feature-flag-driven schema\n * change). The warn is the right shape for the canonical bug (\"I wrote\n * `set({filter})` against a replace-semantics store and wiped items+editingId\")\n * but produces false positives for intentional shape changes. Opt-in keeps\n * the warning available to dev/CI environments that want the diagnostic\n * without surprising existing projects.\n *\n * Trigger condition: ANY key in `prev` missing from `next` — strictly broader\n * than \"fewer keys total.\" A `set({a, c})` against `cur = {a, b}` (same count,\n * different keys) also wipes `b`, so it warns. The original partial-set bug\n * shape was always \"at least one key from current is missing in next\"; the\n * key-count check in the original ticket sketch was an early-exit\n * optimization, not the semantic gate.\n *\n * Skips: non-object cur/next (booleans, numbers, strings — no \"keys\" to\n * miss), null/undefined either side, and arrays either side (shrinking-array\n * replacement is normal, not a partial set).\n *\n * Per-store one-shot dedup: each store warns at most once across its\n * lifetime — matches the KF-174 / KF-176 pattern of \"tell the developer\n * about the rule violation once, then trust them to fix it.\" The dedup\n * scope is the store, not the module, so a second store can still warn\n * if it independently hits the same bug.\n *\n * Production behavior is unchanged for zero runtime cost (the env-var read\n * short-circuits before any per-set work runs).\n */\n\nexport interface NarrowSetWarnContext {\n  /** Set once per store; the warner reads/writes this to enforce the per-store one-shot dedup. */\n  warned: boolean;\n}\n\nconst WARNING_PREFIX\n  = 'kerf: defineStore.set() called with keys missing from the current state — ';\nconst WARNING_SUFFIX\n  = '. set() REPLACES state; the missing keys will be undefined after this call. '\n  + 'Use `set({ ...get(), ...next })` to merge instead, or update each call site to pass the full state. '\n  + 'Set KERF_DEV_WARN_NARROW_SET=0 (or unset it) to silence this warning.';\n\nexport function isOptedIn(): boolean {\n  const proc = (globalThis as { process?: { env?: Record<string, string | undefined> } }).process;\n  if (proc?.env?.NODE_ENV === 'production') return false;\n  return proc?.env?.KERF_DEV_WARN_NARROW_SET === '1';\n}\n\nfunction isPlainObjectState(v: unknown): v is Record<string, unknown> {\n  if (v === null || typeof v !== 'object') return false;\n  if (Array.isArray(v)) return false;\n  return true;\n}\n\nexport function maybeWarnNarrowSet(\n  prev: unknown,\n  next: unknown,\n  ctx: NarrowSetWarnContext,\n): void {\n  if (ctx.warned) return;\n  if (!isOptedIn()) return;\n  if (!isPlainObjectState(prev) || !isPlainObjectState(next)) return;\n\n  const missing: string[] = [];\n  for (const k of Object.keys(prev)) {\n    if (!(k in next)) missing.push(k);\n  }\n  if (missing.length === 0) return;\n\n  ctx.warned = true;\n  const keysList = missing.map((k) => `\\`${k}\\``).join(', ');\n  console.warn(`${WARNING_PREFIX}${keysList}${WARNING_SUFFIX}`);\n}\n\n/**\n * Test helper — resets the per-store `warned` flag on a context so a\n * subsequent test in the same module can re-exercise the first-warning\n * path. Not exported from the public barrel; the unit-test file imports it\n * directly via the relative path.\n */\nexport function _resetWarnContext(ctx: NarrowSetWarnContext): void {\n  ctx.warned = false;\n}\n","/**\n * `defineStore({ initial, actions })` — composable testable stores layered on\n * top of `reactive.ts`'s signals.\n *\n * Three rules:\n * 1. `state` is read-only. Consumers read via `state.value` or subscribe via\n *    `effect()`. They cannot write directly.\n * 2. `actions` is the only mutation surface. All writes go through named\n *    action functions. This is what makes stores testable — assert against\n *    actions, not against arbitrary writes.\n * 3. `reset()` resets to `initial()`. Always defined; tests use it for\n *    setup, lifecycle hooks (route change, sign-out, etc.) use it for\n *    tear-down.\n *\n * A module-level registry tracks every store created via `defineStore()`;\n * `resetAllStores()` walks the registry and calls each `reset()`. Useful for\n * tests + project-switch / logout / route-reset scenarios where every piece\n * of client state should return to its initial shape.\n */\n\nimport { maybeWarnNarrowSet, type NarrowSetWarnContext } from './dev-store-warn.js';\nimport type { ReadonlySignal, Signal } from './reactive.js';\nimport { signal } from './reactive.js';\n\nexport interface Store<TState, TActions> {\n  /** Read-only reactive view. Consumers read `state.value` or subscribe via `effect()`. */\n  readonly state: ReadonlySignal<TState>;\n  /** Named mutators — the only way to change state. */\n  readonly actions: TActions;\n  /** Reset state to `initial()`. Used by tests and lifecycle hooks. */\n  reset(): void;\n}\n\ninterface DefineStoreSpec<TState, TActions> {\n  initial: () => TState;\n  actions: (set: (next: TState) => void, get: () => Readonly<TState>) => TActions;\n}\n\nconst REGISTRY: Array<{ reset: () => void }> = [];\n\nconst IS_DEV: boolean = (() => {\n  const proc = (globalThis as { process?: { env?: { NODE_ENV?: string } } }).process;\n  return proc?.env?.NODE_ENV !== 'production';\n})();\n\nexport function defineStore<TState, TActions>(\n  spec: DefineStoreSpec<TState, TActions>,\n): Store<TState, TActions> {\n  const internal: Signal<TState> = signal(spec.initial());\n  // KF-212: per-store one-shot dedup for the opt-in narrow-set warning.\n  // Default off; consumers opt in via `KERF_DEV_WARN_NARROW_SET=1` in dev.\n  // Production behavior is unchanged — `maybeWarnNarrowSet` short-circuits\n  // on the env-var read before any per-set work runs.\n  const warnCtx: NarrowSetWarnContext = { warned: false };\n\n  const set = (next: TState): void => {\n    maybeWarnNarrowSet(internal.value, next, warnCtx);\n    internal.value = next;\n  };\n  // In dev, freeze the snapshot returned to actions so that\n  // `get().count = 42`-style mutations (a documented Rule 8 violation) throw\n  // a native `TypeError: Cannot assign to read only property` instead of\n  // silently landing on the underlying state without notifying subscribers.\n  // Production keeps the bare reference for zero overhead. Read NODE_ENV via\n  // globalThis so the source works untouched in browsers (no bare `process`).\n  const get = (): Readonly<TState> => {\n    const v = internal.value;\n    if (IS_DEV && v !== null && typeof v === 'object') {\n      Object.freeze(v);\n    }\n    return v;\n  };\n\n  const actions = spec.actions(set, get);\n\n  const store: Store<TState, TActions> = {\n    state: internal,\n    actions,\n    reset() {\n      internal.value = spec.initial();\n    },\n  };\n\n  REGISTRY.push(store);\n  return store;\n}\n\n/**\n * Reset every store registered via `defineStore()` to its `initial()` value.\n * Used by tests and by application lifecycle hooks (project switch, logout,\n * route reset).\n */\nexport function resetAllStores(): void {\n  for (const s of REGISTRY) s.reset();\n}\n\n/**\n * Test helper — clears the registry. Exposed via the `kerfjs/testing` subpath,\n * not the main `kerfjs` entry. Unit tests use it to isolate stores between cases.\n */\nexport function clearStoreRegistry(): void {\n  REGISTRY.length = 0;\n}\n"]}

package/dist/index.d.ts

@@ -3,7 +3,83 @@ import { SafeHtml } from './jsx-runtime.js';
 export { Fragment, isSafeHtml, raw } from './jsx-runtime.js';
 import { Signal } from '@preact/signals-core';
 export { ReadonlySignal, Signal, batch, computed, effect } from '@preact/signals-core';
-export { S as Store, d as defineStore, r as resetAllStores } from './testing-CdMgVVoI.js';
+export { S as Store, d as defineStore, r as resetAllStores } from './testing-DNEY7wi3.js';
+
+/**
+ * `attr(name, value)` — create a pre-computed attribute descriptor (static form).
+ * `attr(name)` — create a per-render factory for dynamic attribute values (dynamic form).
+ *
+ * **Static form** — best for fixed action names, filter keys, role values, etc.
+ * Escapes once at module-load time; produces a full {@link AttrSpec} with
+ * `.name`, `.value`, `.selector`, and `.attrs`.
+ *
+ *   const ACTIONS = {
+ *     toggle: attr('data-action', 'toggle'),
+ *     remove: attr('data-action', 'remove'),
+ *   } as const satisfies Record<string, AttrSpec<'data-action'>>;
+ *
+ *   // In JSX — spread .attrs (rename-safe; no hardcoded attribute name):
+ *   <button {...ACTIONS.toggle.attrs}>Toggle</button>
+ *
+ *   // In delegate — use the pre-computed selector:
+ *   delegate(root, 'click', ACTIONS.toggle.selector, handler);
+ *
+ * **Dynamic form** — best for per-row data like `data-id`, where the value
+ * changes per item but the attribute name is constant.
+ * The name is validated and pre-escaped at definition time; calling the
+ * returned factory is cheap (just escape the value and freeze the object).
+ *
+ *   const ITEM = { id: attr('data-id') } as const;
+ *
+ *   // In JSX — call the factory inline:
+ *   <li {...ITEM.id(String(item.id))}>…</li>
+ *
+ * For ad-hoc compound selectors, concatenate `.selector` strings:
+ *
+ *   delegate(root, 'click',
+ *     ACTIONS.toggle.selector + attr('data-id', id).selector,
+ *     handler);
+ *
+ * Escaping:
+ * - Attribute name: escaped as a CSS identifier via `cssEscapeIdent`, which is
+ *   an SSR-safe (no `CSS.escape`) adaptation of the Mathias Bynens polyfill
+ *   (https://github.com/nicktindall/cyclon.p2p-common, MIT licensed). Handles
+ *   control chars, leading digits, non-ASCII, and CSS metacharacters.
+ * - Attribute value: embedded in double quotes as a CSS string. Backslashes and
+ *   double-quote characters are backslash-escaped; control characters are
+ *   hex-escaped per CSS Syntax Level 3 §3.4.
+ *
+ * Throws on an empty attribute name (not a valid CSS identifier).
+ */
+/** Descriptor created by the static {@link attr} overload. */
+interface AttrSpec<N extends string = string, V extends string = string> {
+    /** The raw attribute name passed to `attr()`. */
+    readonly name: N;
+    /** The raw attribute value passed to `attr()`. */
+    readonly value: V;
+    /** Pre-computed `[name="value"]` CSS selector string, safe to pass to `delegate()`. */
+    readonly selector: string;
+    /** Spreadable JSX object — `{ [name]: value }` — keeps the attribute name out of JSX literals. */
+    readonly attrs: {
+        readonly [K in N]: V;
+    };
+}
+/**
+ * Static overload — pre-computes the full descriptor at definition time.
+ * Returns an {@link AttrSpec} with `.name`, `.value`, `.selector`, and `.attrs`.
+ */
+declare function attr<N extends string, V extends string>(name: N, value: V): AttrSpec<N, V>;
+/**
+ * Dynamic overload — pre-validates and pre-escapes the attribute name, returns a
+ * factory that accepts a per-render value and produces a frozen spreadable object.
+ * Use for per-row attributes like `data-id` where the value changes per item.
+ * The optional `V` generic constrains which values the factory accepts:
+ * `attr<'data-id', 'a'|'b'>('data-id')` → `(value: 'a'|'b') => { 'data-id': 'a'|'b' }`.
+ * Leaving both generics off infers `N` from the argument and defaults `V` to `string`.
+ */
+declare function attr<N extends string, V extends string = string>(name: N): (value: V) => {
+    readonly [K in N]: V;
+};
 
 /**
  * Tiny event-delegation helpers. Replace per-element `addEventListener` calls
@@ -34,7 +110,6 @@ export { S as Store, d as defineStore, r as resetAllStores } from './testing-CdM
  *     host element with `data-morph-skip` and manage the library's
  *     lifecycle directly. No delegation helper applies.
  */
-type Handler = (event: Event, target: Element) => void;
 /**
  * Delegation that "just works" for both bubbling and the common non-bubbling
  * events. Installs ONE listener on `rootEl`; for known non-bubblers (see
@@ -43,22 +118,29 @@ type Handler = (event: Event, target: Element) => void;
  * matching walks up from `event.target` via `closest(selector)` and fires
  * `handler(event, matched)` if the match is inside `rootEl`.
  *
+ * The generic `T` narrows the second handler argument to the expected element
+ * type — `delegate<HTMLButtonElement>(root, 'click', 'button', (e, btn) => btn.value)`
+ * — so consumers can avoid casts. Defaults to `Element` for untyped calls.
+ *
  * Returns a disposer that removes the listener.
  *
  * Usage (pseudo-code — see examples for live ones):
  *   delegate(rootEl, 'click', '[data-action="add"]', handlerFn);
  *   delegate(rootEl, 'focus', 'input',                handlerFn); // auto-capture
  */
-declare function delegate(rootEl: HTMLElement, type: string, selector: string, handler: Handler): () => void;
+declare function delegate<T extends Element = Element>(rootEl: HTMLElement, type: string, selector: string, handler: (event: Event, target: T) => void): () => void;
 /**
  * Capture-phase delegation — for non-bubbling events (`focus`, `blur`,
  * `scroll`, `load`, `error`). Reaches descendants of `rootEl` that match
  * `selector` regardless of how many times the diff has rebuilt them.
  *
+ * The generic `T` narrows the second handler argument to the expected element
+ * type, mirroring `delegate<T>()`. Defaults to `Element` for untyped calls.
+ *
  * Usage (pseudo-code — see examples for live ones):
  *   delegateCapture(rootEl, 'focus', 'input, textarea', handlerFn);
  */
-declare function delegateCapture(rootEl: HTMLElement, type: string, selector: string, handler: Handler): () => void;
+declare function delegateCapture<T extends Element = Element>(rootEl: HTMLElement, type: string, selector: string, handler: (event: Event, target: T) => void): () => void;
 
 /**
  * `each(items, render, cacheKey?)` — keyed list iteration with per-item memoization.
@@ -243,4 +325,4 @@ declare function signal<T>(value?: T): Signal<T>;
 
 declare function toElement(jsx: SafeHtml | string): Element;
 
-export { type MountResult, SafeHtml, delegate, delegateCapture, each, morph, mount, signal, toElement };
+export { type AttrSpec, type MountResult, SafeHtml, attr, delegate, delegateCapture, each, morph, mount, signal, toElement };

package/dist/index.js

@@ -1,9 +1,80 @@
 import { isSafeHtml, listSafeHtml, flattenWithoutListItems, collectLists, flatten, granularListSafeHtml } from './chunk-4VT4YZOO.js';
 export { Fragment, SafeHtml, isSafeHtml, raw } from './chunk-4VT4YZOO.js';
-export { defineStore, resetAllStores } from './chunk-WUFUTNA7.js';
+export { defineStore, resetAllStores } from './chunk-IBVKW6WU.js';
 import { effect } from './chunk-UU2YJEJY.js';
 export { batch, computed, effect, signal } from './chunk-UU2YJEJY.js';
 
+// src/attrSelector.ts
+function cssEscapeIdent(value) {
+  if (value === "") {
+    throw new Error("attr: attribute name must not be empty");
+  }
+  const str = String(value);
+  let result = "";
+  for (let i = 0; i < str.length; i++) {
+    const cp = str.charCodeAt(i);
+    const ch = str.charAt(i);
+    if (cp === 0) {
+      result += "\uFFFD";
+      continue;
+    }
+    if (cp >= 1 && cp <= 31 || cp === 127) {
+      result += "\\" + cp.toString(16) + " ";
+      continue;
+    }
+    if (i === 0 && cp >= 48 && cp <= 57) {
+      result += "\\" + cp.toString(16) + " ";
+      continue;
+    }
+    if (i === 1 && cp >= 48 && cp <= 57 && str.charCodeAt(0) === 45) {
+      result += "\\" + cp.toString(16) + " ";
+      continue;
+    }
+    if (cp >= 128 || cp === 45 || // `-`
+    cp === 95 || // `_`
+    cp >= 48 && cp <= 57 || // 0-9
+    cp >= 65 && cp <= 90 || // A-Z
+    cp >= 97 && cp <= 122) {
+      result += ch;
+      continue;
+    }
+    result += "\\" + ch;
+  }
+  return result;
+}
+function escapeCSSString(value) {
+  let result = "";
+  for (let i = 0; i < value.length; i++) {
+    const cp = value.charCodeAt(i);
+    const ch = value.charAt(i);
+    if (cp === 0) {
+      result += "\uFFFD";
+    } else if (cp >= 1 && cp <= 31 || cp === 127) {
+      result += "\\" + cp.toString(16) + " ";
+    } else if (cp === 92) {
+      result += "\\\\";
+    } else if (cp === 34) {
+      result += '\\"';
+    } else {
+      result += ch;
+    }
+  }
+  return result;
+}
+function attr(name, value) {
+  const escapedName = cssEscapeIdent(name);
+  if (value !== void 0) {
+    const selector = `[${escapedName}="${escapeCSSString(value)}"]`;
+    return Object.freeze({
+      name,
+      value,
+      selector,
+      attrs: Object.freeze({ [name]: value })
+    });
+  }
+  return (v) => Object.freeze({ [name]: v });
+}
+
 // src/delegate.ts
 var NON_BUBBLING = /* @__PURE__ */ new Set([
   "focus",
@@ -54,6 +125,52 @@ function delegateCapture(rootEl, type, selector, handler) {
   };
 }
 
+// src/dev-each-warn.ts
+var warnedIds = /* @__PURE__ */ new Set();
+function isOptedIn() {
+  const proc = globalThis.process;
+  if (proc?.env?.NODE_ENV === "production") return false;
+  return proc?.env?.KERF_DEV_WARN_EACH_IN_MORPH_SKIP === "1";
+}
+function hasMorphSkipAncestor(el, root) {
+  let ancestor = el.parentElement;
+  while (ancestor !== null && ancestor !== root) {
+    if (ancestor.dataset.morphSkip !== void 0) return true;
+    ancestor = ancestor.parentElement;
+  }
+  return false;
+}
+function maybeWarnEachInMorphSkip(id, liveParent, rootEl) {
+  if (!isOptedIn()) return;
+  if (warnedIds.has(id)) return;
+  if (!hasMorphSkipAncestor(liveParent, rootEl)) return;
+  warnedIds.add(id);
+  console.warn(
+    `kerf: each() list '${id}' is inside a data-morph-skip subtree. The keyed reconciler still updates the list rows, but any static signal-reactive JSX inside the same skipped ancestor (e.g. <p>{count.value}</p>) is frozen \u2014 the morph never visits it. Remove data-morph-skip from any element that contains reactive JSX content and reserve it for truly library-owned hosts. Set KERF_DEV_WARN_EACH_IN_MORPH_SKIP=0 (or unset it) to silence this warning.`
+  );
+}
+var warnedDupIds = /* @__PURE__ */ new Set();
+function isOptedInDupKeys() {
+  const proc = globalThis.process;
+  if (proc?.env?.NODE_ENV === "production") return false;
+  return proc?.env?.KERF_DEV_WARN_DUPLICATE_EACH_KEYS === "1";
+}
+function maybeWarnDuplicateCacheKeys(id, segItems) {
+  if (!isOptedInDupKeys()) return;
+  if (warnedDupIds.has(id)) return;
+  const seen = /* @__PURE__ */ new Set();
+  for (const si of segItems) {
+    if (seen.has(si.cacheKey)) {
+      warnedDupIds.add(id);
+      console.warn(
+        `kerf: each() list '${id}' has duplicate cacheKey values (duplicate: ${String(si.cacheKey)}). The cacheKey function should return a unique value per row so kerf can tell apart items for memoization \u2014 duplicate values cause some rows to return stale cached HTML when external state that affects their render changes. Set KERF_DEV_WARN_DUPLICATE_EACH_KEYS=0 (or unset it) to silence this warning.`
+      );
+      return;
+    }
+    seen.add(si.cacheKey);
+  }
+}
+
 // src/each.ts
 var ARRAY_SIGNAL_BRAND = /* @__PURE__ */ Symbol.for("kerfjs.ArraySignal");
 function isArraySignal(value) {
@@ -161,6 +278,9 @@ function eachSnapshotById(items, render, cacheKey, id) {
     }
     segItems[i] = { ref: item, cacheKey: k, html };
   }
+  if (cacheKey !== void 0) {
+    maybeWarnDuplicateCacheKeys(id, segItems);
+  }
   return listSafeHtml(id, segItems);
 }
 
@@ -282,13 +402,13 @@ function isUserAgentOwnedAttr(tagName, name) {
 function morphAttributes(fromEl, toEl) {
   const toAttrs = toEl.attributes;
   for (let i = 0; i < toAttrs.length; i++) {
-    const attr = toAttrs[i];
-    const ns = attr.namespaceURI;
-    const name = attr.localName;
-    const value = attr.value;
+    const attr2 = toAttrs[i];
+    const ns = attr2.namespaceURI;
+    const name = attr2.localName;
+    const value = attr2.value;
     if (ns !== null) {
       if (fromEl.getAttributeNS(ns, name) !== value) {
-        fromEl.setAttributeNS(ns, attr.name, value);
+        fromEl.setAttributeNS(ns, attr2.name, value);
       }
     } else if (fromEl.getAttribute(name) !== value) {
       fromEl.setAttribute(name, value);
@@ -297,9 +417,9 @@ function morphAttributes(fromEl, toEl) {
   const fromAttrs = fromEl.attributes;
   const fromTag = fromEl.tagName;
   for (let i = fromAttrs.length - 1; i >= 0; i--) {
-    const attr = fromAttrs[i];
-    const ns = attr.namespaceURI;
-    const name = attr.localName;
+    const attr2 = fromAttrs[i];
+    const ns = attr2.namespaceURI;
+    const name = attr2.localName;
     if (ns !== null) {
       if (!toEl.hasAttributeNS(ns, name)) fromEl.removeAttributeNS(ns, name);
     } else if (!toEl.hasAttribute(name) && !isUserAgentOwnedAttr(fromTag, name)) {
@@ -331,7 +451,7 @@ function preserveTextEntryState(fromEl, toEl) {
 var LISTENER_MARKER = /* @__PURE__ */ Symbol.for("kerfjs.devListener");
 var patched = false;
 var warned = false;
-function isOptedIn() {
+function isOptedIn2() {
   const proc = globalThis.process;
   if (proc?.env?.NODE_ENV === "production") return false;
   return proc?.env?.KERF_DEV_WARN_REBUILT_LISTENERS === "1";
@@ -375,7 +495,7 @@ function emitWarning() {
   );
 }
 function installListenerRebuildWarn(rootEl) {
-  if (!isOptedIn()) return null;
+  if (!isOptedIn2()) return null;
   patchAddEventListenerOnce();
   const observer = new MutationObserver((mutations) => {
     if (warned) return;
@@ -970,10 +1090,15 @@ function reconcileList(binding, listSeg) {
 // src/mount.ts
 var LIST_MARKER_PREFIX = "kf-list:";
 var MOUNTED_MARKER = /* @__PURE__ */ Symbol.for("kerfjs.mounted");
+function describeEl(el) {
+  const tag = el.tagName.toLowerCase();
+  const id = el.id ? `#${el.id}` : "";
+  return `<${tag}${id}>`;
+}
 function assertNotInsideMountedTree(rootEl) {
   if (rootEl[MOUNTED_MARKER] === true) {
     throw new Error(
-      "mount: rootEl is already inside (or contains) a mounted tree. kerf supports one mount per tree \u2014 compose with plain functions that return JSX instead of nesting mounts."
+      `mount: ${describeEl(rootEl)} is already mounted. Call the disposer returned by the first mount() before mounting again. kerf supports one mount per element \u2014 compose with plain functions that return JSX instead of nesting mounts.`
     );
   }
   let ancestor = rootEl.parentElement;
@@ -1092,6 +1217,7 @@ function bindListsFromMarkers(rootEl, segment, bindings, inlinedItems) {
     if (items.length > 0) {
       maybeWarnMissingRowKey(items[0].node, 0, items[0].html, binding);
     }
+    maybeWarnEachInMorphSkip(id, liveParent, rootEl);
     bindings.set(id, binding);
   }
 }
@@ -1199,6 +1325,6 @@ function toElement(jsx) {
   return child;
 }
 
-export { delegate, delegateCapture, each, morph, mount, toElement };
+export { attr, delegate, delegateCapture, each, morph, mount, toElement };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map