kerfjs 5.0.0-beta.52 → 5.0.0-beta.53

package/dist/{chunk-E5R5GNKE.js → chunk-X6OQ2HTR.js}

@@ -1,4 +1,4 @@
-import { devHooks } from './chunk-CEQMZYLR.js';
+import { devHooks } from './chunk-3C6F6NM4.js';
 
 // src/delegate.ts
 var NON_BUBBLING = /* @__PURE__ */ new Set([
@@ -61,4 +61,4 @@ function delegateCapture(rootEl, type, selector, handler, options) {
 
 export { delegate, delegateCapture };
 
-//# sourceMappingURL=chunk-E5R5GNKE.js.map
+//# sourceMappingURL=chunk-X6OQ2HTR.js.map

package/dist/{chunk-E5R5GNKE.js.map → chunk-X6OQ2HTR.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/delegate.ts"],"names":[],"mappings":";;;AA+CA,IAAM,YAAA,uBAAmB,GAAA,CAAY;AAAA,EACnC,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAC,CAAA;AAqBD,SAAS,mBAAA,CAAoB,UAAkB,EAAA,EAAkB;AAC/D,EAAA,IAAI;AACF,IAAA,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA,CAAE,OAAA,CAAQ,QAAQ,CAAA;AAAA,EAChD,CAAA,CAAA,MAAQ;AACN,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAA,EAAG,EAAE,CAAA,oBAAA,EAAuB,QAAQ,CAAA,2EAAA;AAAA,KAEtC;AAAA,EACF;AACF;AAQA,SAAS,YAAA,CACP,MAAA,EACA,QAAA,EACA,OAAA,EACA,KAAA,EACwB;AACxB,EAAA,OAAO,CAAC,KAAA,KAAuB;AAC7B,IAAA,MAAM,SAAS,KAAA,CAAM,MAAA;AACrB,IAAA,IAAI,EAAE,kBAAkB,OAAA,CAAA,EAAU;AAClC,IAAA,MAAM,OAAA,GACJ,KAAA,KAAU,QAAA,GACN,MAAA,CAAO,OAAA,CAAQ,QAAQ,CAAA,GACrB,MAAA,GACA,IAAA,GACF,MAAA,CAAO,OAAA,CAAQ,QAAQ,CAAA;AAC7B,IAAA,IAAI,OAAA,KAAY,IAAA,IAAQ,MAAA,CAAO,QAAA,CAAS,OAAO,CAAA,EAAG;AAChD,MAAA,OAAA,CAAQ,OAAO,OAAY,CAAA;AAAA,IAC7B;AAAA,EACF,CAAA;AACF;AAuBO,SAAS,QAAA,CACd,MAAA,EACA,IAAA,EACA,QAAA,EACA,SACA,OAAA,EACY;AACZ,EAAA,mBAAA,CAAoB,UAAU,UAAU,CAAA;AACxC,EAAA,QAAA,CAAS,mBAAmB,UAAU,CAAA;AACtC,EAAA,MAAM,QAAA,GAAW,YAAA;AAAA,IACf,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAS,KAAA,IAAS;AAAA,GACpB;AACA,EAAA,MAAM,OAAA,GAAU,YAAA,CAAa,GAAA,CAAI,IAAI,CAAA;AACrC,EAAA,MAAA,CAAO,gBAAA,CAAiB,IAAA,EAAM,QAAA,EAAU,OAAO,CAAA;AAC/C,EAAA,OAAO,MAAM;AACX,IAAA,MAAA,CAAO,mBAAA,CAAoB,IAAA,EAAM,QAAA,EAAU,OAAO,CAAA;AAAA,EACpD,CAAA;AACF;AAuBO,SAAS,eAAA,CACd,MAAA,EACA,IAAA,EACA,QAAA,EACA,SACA,OAAA,EACY;AACZ,EAAA,mBAAA,CAAoB,UAAU,iBAAiB,CAAA;AAC/C,EAAA,QAAA,CAAS,mBAAmB,iBAAiB,CAAA;AAC7C,EAAA,MAAM,QAAA,GAAW,YAAA;AAAA,IACf,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAS,KAAA,IAAS;AAAA,GACpB;AACA,EAAA,MAAA,CAAO,gBAAA,CAAiB,IAAA,EAAM,QAAA,EAAU,IAAI,CAAA;AAC5C,EAAA,OAAO,MAAM;AACX,IAAA,MAAA,CAAO,mBAAA,CAAoB,IAAA,EAAM,QAAA,EAAU,IAAI,CAAA;AAAA,EACjD,CAAA;AACF","file":"chunk-E5R5GNKE.js","sourcesContent":["/**\n * Tiny event-delegation helpers. Replace per-element `addEventListener` calls\n * (which don't survive morph re-renders for nodes the diff creates) with one\n * listener at the morph-root that dispatches via `closest()`.\n *\n * Three-tier listener model:\n *\n *   - Tier 1 (bubbling events) — use `delegate()`.\n *     click, input, change, submit, mousedown/up, keydown/up, pointerdown/up/move,\n *     drag*, drop, contextmenu, wheel, copy/paste/cut, focusin/focusout.\n *\n *     `delegate()` also auto-promotes the well-known non-bubbling event\n *     types (`focus`, `blur`, `scroll`, `load`, `error`, `mouseenter`,\n *     `mouseleave`) to the capture phase under the hood, so the call site\n *     looks identical for \"interactive thing happens on a descendant\"\n *     regardless of whether that event bubbles. Selector matching stays\n *     `closest()`-style — the same as for bubbling events — so a wrapper\n *     selector like `'.field-row'` still matches when the event fires on\n *     a descendant `<input>`.\n *\n *   - Tier 2 (explicit capture) — use `delegateCapture()`.\n *     The escape hatch for cases the auto-promotion list doesn't cover\n *     (custom non-bubbling events) or when you want capture-phase\n *     interception. Selector matching is `closest()`-style by default —\n *     the same walk-up as `delegate()`, and it passes the matched ancestor\n *     (not the raw target) to the handler — so a click on any descendant of\n *     the selected element climbs to it. Pass `{ match: 'direct' }` to opt\n *     into strict `matches()`-style matching (fire only when the event lands\n *     on the exact element the selector identifies).\n *\n *   - Tier 3 (per-element instances / library-owned subtrees) — mark the\n *     host element with `data-morph-skip` and manage the library's\n *     lifecycle directly. No delegation helper applies.\n */\n\nimport { devHooks } from './dev-hooks.js';\n\n/**\n * Event types that don't bubble and so wouldn't reach a root-level\n * bubble-phase listener. `delegate()` flips to capture for these; the\n * caller doesn't need to know or care.\n *\n * Membership is conservative — it covers the cases that \"should obviously\n * work\" with delegate() but otherwise don't. For exotic non-bubbling events\n * (custom events, less-common DOM events) the explicit `delegateCapture()`\n * remains the escape hatch.\n */\nconst NON_BUBBLING = new Set<string>([\n  'focus',\n  'blur',\n  'scroll',\n  'load',\n  'error',\n  'mouseenter',\n  'mouseleave',\n]);\n\n/**\n * How the selector is matched against the event's target:\n *\n *   - `'closest'` (the default for both helpers) — walk UP from `event.target`\n *     via `closest(selector)`, firing for the nearest matching ancestor inside\n *     `rootEl`. This is the delegation behavior you almost always want: a click\n *     on an icon inside a button fires the button's handler.\n *   - `'direct'` — strict `matches()` match: fire only when `event.target`\n *     itself matches the selector, with no walk-up.\n */\nexport interface DelegateOptions {\n  match?: 'closest' | 'direct';\n}\n\n/**\n * Validate a CSS selector at registration time, so a typo throws immediately\n * with the bad selector quoted instead of producing a cryptic DOMException\n * the first time a matching event fires.\n */\nfunction assertValidSelector(selector: string, fn: string): void {\n  try {\n    document.createElement('div').matches(selector);\n  } catch {\n    throw new Error(\n      `${fn}: invalid selector \"${selector}\". ` +\n        \"Pass a valid CSS selector (e.g. '[data-action=\\\"add\\\"]', '.btn', 'input').\",\n    );\n  }\n}\n\n/**\n * Build the shared root-level listener used by both helpers. Resolves the\n * event's target to a matched element (walk-up `closest()` or strict\n * `matches()`, per `match`), requires the match to be inside `rootEl`, then\n * fires `handler(event, matched)`.\n */\nfunction makeListener<T extends Element>(\n  rootEl: HTMLElement,\n  selector: string,\n  handler: (event: Event, target: T) => void,\n  match: 'closest' | 'direct',\n): (event: Event) => void {\n  return (event: Event): void => {\n    const target = event.target;\n    if (!(target instanceof Element)) return;\n    const matched =\n      match === 'direct'\n        ? target.matches(selector)\n          ? target\n          : null\n        : target.closest(selector);\n    if (matched !== null && rootEl.contains(matched)) {\n      handler(event, matched as T);\n    }\n  };\n}\n\n/**\n * Delegation that \"just works\" for both bubbling and the common non-bubbling\n * events. Installs ONE listener on `rootEl`; for known non-bubblers (see\n * `NON_BUBBLING` above) the listener is registered on the capture phase so\n * it actually reaches the target, otherwise on the bubble phase. Either way,\n * matching walks up from `event.target` via `closest(selector)` and fires\n * `handler(event, matched)` if the match is inside `rootEl`.\n *\n * Pass `{ match: 'direct' }` to fire only when `event.target` itself matches\n * the selector (no walk-up); the default is `'closest'`.\n *\n * The generic `T` narrows the second handler argument to the expected element\n * type — `delegate<HTMLButtonElement>(root, 'click', 'button', (e, btn) => btn.value)`\n * — so consumers can avoid casts. Defaults to `Element` for untyped calls.\n *\n * Returns a disposer that removes the listener.\n *\n * Usage (pseudo-code — see examples for live ones):\n *   delegate(rootEl, 'click', '[data-action=\"add\"]', handlerFn);\n *   delegate(rootEl, 'focus', 'input',                handlerFn); // auto-capture\n */\nexport function delegate<T extends Element = Element>(\n  rootEl: HTMLElement,\n  type: string,\n  selector: string,\n  handler: (event: Event, target: T) => void,\n  options?: DelegateOptions,\n): () => void {\n  assertValidSelector(selector, 'delegate');\n  devHooks.delegateInEffect?.('delegate');\n  const listener = makeListener(\n    rootEl,\n    selector,\n    handler,\n    options?.match ?? 'closest',\n  );\n  const capture = NON_BUBBLING.has(type);\n  rootEl.addEventListener(type, listener, capture);\n  return () => {\n    rootEl.removeEventListener(type, listener, capture);\n  };\n}\n\n/**\n * Capture-phase delegation — the escape hatch for custom non-bubbling events\n * (ones `delegate()`'s auto-promotion list doesn't know about) and for\n * capture-phase interception (run before any descendant's bubble-phase\n * handler). Reaches descendants of `rootEl` that match `selector` regardless\n * of how many times the diff has rebuilt them.\n *\n * Selector matching is `closest()`-style by default — the same walk-up as\n * `delegate()`, and it passes the matched ancestor (not the raw target) to\n * the handler — so a click on any descendant of the selected element climbs\n * to it. Pass `{ match: 'direct' }` to opt into strict `matches()`-style\n * matching (fire only when the event lands on the exact element the selector\n * identifies, with no walk-up).\n *\n * The generic `T` narrows the second handler argument to the expected element\n * type, mirroring `delegate<T>()`. Defaults to `Element` for untyped calls.\n *\n * Usage (pseudo-code — see examples for live ones):\n *   delegateCapture(rootEl, 'focus', 'input, textarea', handlerFn);\n *   delegateCapture(rootEl, 'click', '.exact', handlerFn, { match: 'direct' });\n */\nexport function delegateCapture<T extends Element = Element>(\n  rootEl: HTMLElement,\n  type: string,\n  selector: string,\n  handler: (event: Event, target: T) => void,\n  options?: DelegateOptions,\n): () => void {\n  assertValidSelector(selector, 'delegateCapture');\n  devHooks.delegateInEffect?.('delegateCapture');\n  const listener = makeListener(\n    rootEl,\n    selector,\n    handler,\n    options?.match ?? 'closest',\n  );\n  rootEl.addEventListener(type, listener, true);\n  return () => {\n    rootEl.removeEventListener(type, listener, true);\n  };\n}\n"]}
+{"version":3,"sources":["../src/delegate.ts"],"names":[],"mappings":";;;AA+CA,IAAM,YAAA,uBAAmB,GAAA,CAAY;AAAA,EACnC,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAC,CAAA;AAqBD,SAAS,mBAAA,CAAoB,UAAkB,EAAA,EAAkB;AAC/D,EAAA,IAAI;AACF,IAAA,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA,CAAE,OAAA,CAAQ,QAAQ,CAAA;AAAA,EAChD,CAAA,CAAA,MAAQ;AACN,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAA,EAAG,EAAE,CAAA,oBAAA,EAAuB,QAAQ,CAAA,2EAAA;AAAA,KAEtC;AAAA,EACF;AACF;AAQA,SAAS,YAAA,CACP,MAAA,EACA,QAAA,EACA,OAAA,EACA,KAAA,EACwB;AACxB,EAAA,OAAO,CAAC,KAAA,KAAuB;AAC7B,IAAA,MAAM,SAAS,KAAA,CAAM,MAAA;AACrB,IAAA,IAAI,EAAE,kBAAkB,OAAA,CAAA,EAAU;AAClC,IAAA,MAAM,OAAA,GACJ,KAAA,KAAU,QAAA,GACN,MAAA,CAAO,OAAA,CAAQ,QAAQ,CAAA,GACrB,MAAA,GACA,IAAA,GACF,MAAA,CAAO,OAAA,CAAQ,QAAQ,CAAA;AAC7B,IAAA,IAAI,OAAA,KAAY,IAAA,IAAQ,MAAA,CAAO,QAAA,CAAS,OAAO,CAAA,EAAG;AAChD,MAAA,OAAA,CAAQ,OAAO,OAAY,CAAA;AAAA,IAC7B;AAAA,EACF,CAAA;AACF;AAuBO,SAAS,QAAA,CACd,MAAA,EACA,IAAA,EACA,QAAA,EACA,SACA,OAAA,EACY;AACZ,EAAA,mBAAA,CAAoB,UAAU,UAAU,CAAA;AACxC,EAAA,QAAA,CAAS,mBAAmB,UAAU,CAAA;AACtC,EAAA,MAAM,QAAA,GAAW,YAAA;AAAA,IACf,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAS,KAAA,IAAS;AAAA,GACpB;AACA,EAAA,MAAM,OAAA,GAAU,YAAA,CAAa,GAAA,CAAI,IAAI,CAAA;AACrC,EAAA,MAAA,CAAO,gBAAA,CAAiB,IAAA,EAAM,QAAA,EAAU,OAAO,CAAA;AAC/C,EAAA,OAAO,MAAM;AACX,IAAA,MAAA,CAAO,mBAAA,CAAoB,IAAA,EAAM,QAAA,EAAU,OAAO,CAAA;AAAA,EACpD,CAAA;AACF;AAuBO,SAAS,eAAA,CACd,MAAA,EACA,IAAA,EACA,QAAA,EACA,SACA,OAAA,EACY;AACZ,EAAA,mBAAA,CAAoB,UAAU,iBAAiB,CAAA;AAC/C,EAAA,QAAA,CAAS,mBAAmB,iBAAiB,CAAA;AAC7C,EAAA,MAAM,QAAA,GAAW,YAAA;AAAA,IACf,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAS,KAAA,IAAS;AAAA,GACpB;AACA,EAAA,MAAA,CAAO,gBAAA,CAAiB,IAAA,EAAM,QAAA,EAAU,IAAI,CAAA;AAC5C,EAAA,OAAO,MAAM;AACX,IAAA,MAAA,CAAO,mBAAA,CAAoB,IAAA,EAAM,QAAA,EAAU,IAAI,CAAA;AAAA,EACjD,CAAA;AACF","file":"chunk-X6OQ2HTR.js","sourcesContent":["/**\n * Tiny event-delegation helpers. Replace per-element `addEventListener` calls\n * (which don't survive morph re-renders for nodes the diff creates) with one\n * listener at the morph-root that dispatches via `closest()`.\n *\n * Three-tier listener model:\n *\n *   - Tier 1 (bubbling events) — use `delegate()`.\n *     click, input, change, submit, mousedown/up, keydown/up, pointerdown/up/move,\n *     drag*, drop, contextmenu, wheel, copy/paste/cut, focusin/focusout.\n *\n *     `delegate()` also auto-promotes the well-known non-bubbling event\n *     types (`focus`, `blur`, `scroll`, `load`, `error`, `mouseenter`,\n *     `mouseleave`) to the capture phase under the hood, so the call site\n *     looks identical for \"interactive thing happens on a descendant\"\n *     regardless of whether that event bubbles. Selector matching stays\n *     `closest()`-style — the same as for bubbling events — so a wrapper\n *     selector like `'.field-row'` still matches when the event fires on\n *     a descendant `<input>`.\n *\n *   - Tier 2 (explicit capture) — use `delegateCapture()`.\n *     The escape hatch for cases the auto-promotion list doesn't cover\n *     (custom non-bubbling events) or when you want capture-phase\n *     interception. Selector matching is `closest()`-style by default —\n *     the same walk-up as `delegate()`, and it passes the matched ancestor\n *     (not the raw target) to the handler — so a click on any descendant of\n *     the selected element climbs to it. Pass `{ match: 'direct' }` to opt\n *     into strict `matches()`-style matching (fire only when the event lands\n *     on the exact element the selector identifies).\n *\n *   - Tier 3 (per-element instances / library-owned subtrees) — mark the\n *     host element with `data-morph-skip` and manage the library's\n *     lifecycle directly. No delegation helper applies.\n */\n\nimport { devHooks } from './dev-hooks.js';\n\n/**\n * Event types that don't bubble and so wouldn't reach a root-level\n * bubble-phase listener. `delegate()` flips to capture for these; the\n * caller doesn't need to know or care.\n *\n * Membership is conservative — it covers the cases that \"should obviously\n * work\" with delegate() but otherwise don't. For exotic non-bubbling events\n * (custom events, less-common DOM events) the explicit `delegateCapture()`\n * remains the escape hatch.\n */\nconst NON_BUBBLING = new Set<string>([\n  'focus',\n  'blur',\n  'scroll',\n  'load',\n  'error',\n  'mouseenter',\n  'mouseleave',\n]);\n\n/**\n * How the selector is matched against the event's target:\n *\n *   - `'closest'` (the default for both helpers) — walk UP from `event.target`\n *     via `closest(selector)`, firing for the nearest matching ancestor inside\n *     `rootEl`. This is the delegation behavior you almost always want: a click\n *     on an icon inside a button fires the button's handler.\n *   - `'direct'` — strict `matches()` match: fire only when `event.target`\n *     itself matches the selector, with no walk-up.\n */\nexport interface DelegateOptions {\n  match?: 'closest' | 'direct';\n}\n\n/**\n * Validate a CSS selector at registration time, so a typo throws immediately\n * with the bad selector quoted instead of producing a cryptic DOMException\n * the first time a matching event fires.\n */\nfunction assertValidSelector(selector: string, fn: string): void {\n  try {\n    document.createElement('div').matches(selector);\n  } catch {\n    throw new Error(\n      `${fn}: invalid selector \"${selector}\". ` +\n        \"Pass a valid CSS selector (e.g. '[data-action=\\\"add\\\"]', '.btn', 'input').\",\n    );\n  }\n}\n\n/**\n * Build the shared root-level listener used by both helpers. Resolves the\n * event's target to a matched element (walk-up `closest()` or strict\n * `matches()`, per `match`), requires the match to be inside `rootEl`, then\n * fires `handler(event, matched)`.\n */\nfunction makeListener<T extends Element>(\n  rootEl: HTMLElement,\n  selector: string,\n  handler: (event: Event, target: T) => void,\n  match: 'closest' | 'direct',\n): (event: Event) => void {\n  return (event: Event): void => {\n    const target = event.target;\n    if (!(target instanceof Element)) return;\n    const matched =\n      match === 'direct'\n        ? target.matches(selector)\n          ? target\n          : null\n        : target.closest(selector);\n    if (matched !== null && rootEl.contains(matched)) {\n      handler(event, matched as T);\n    }\n  };\n}\n\n/**\n * Delegation that \"just works\" for both bubbling and the common non-bubbling\n * events. Installs ONE listener on `rootEl`; for known non-bubblers (see\n * `NON_BUBBLING` above) the listener is registered on the capture phase so\n * it actually reaches the target, otherwise on the bubble phase. Either way,\n * matching walks up from `event.target` via `closest(selector)` and fires\n * `handler(event, matched)` if the match is inside `rootEl`.\n *\n * Pass `{ match: 'direct' }` to fire only when `event.target` itself matches\n * the selector (no walk-up); the default is `'closest'`.\n *\n * The generic `T` narrows the second handler argument to the expected element\n * type — `delegate<HTMLButtonElement>(root, 'click', 'button', (e, btn) => btn.value)`\n * — so consumers can avoid casts. Defaults to `Element` for untyped calls.\n *\n * Returns a disposer that removes the listener.\n *\n * Usage (pseudo-code — see examples for live ones):\n *   delegate(rootEl, 'click', '[data-action=\"add\"]', handlerFn);\n *   delegate(rootEl, 'focus', 'input',                handlerFn); // auto-capture\n */\nexport function delegate<T extends Element = Element>(\n  rootEl: HTMLElement,\n  type: string,\n  selector: string,\n  handler: (event: Event, target: T) => void,\n  options?: DelegateOptions,\n): () => void {\n  assertValidSelector(selector, 'delegate');\n  devHooks.delegateInEffect?.('delegate');\n  const listener = makeListener(\n    rootEl,\n    selector,\n    handler,\n    options?.match ?? 'closest',\n  );\n  const capture = NON_BUBBLING.has(type);\n  rootEl.addEventListener(type, listener, capture);\n  return () => {\n    rootEl.removeEventListener(type, listener, capture);\n  };\n}\n\n/**\n * Capture-phase delegation — the escape hatch for custom non-bubbling events\n * (ones `delegate()`'s auto-promotion list doesn't know about) and for\n * capture-phase interception (run before any descendant's bubble-phase\n * handler). Reaches descendants of `rootEl` that match `selector` regardless\n * of how many times the diff has rebuilt them.\n *\n * Selector matching is `closest()`-style by default — the same walk-up as\n * `delegate()`, and it passes the matched ancestor (not the raw target) to\n * the handler — so a click on any descendant of the selected element climbs\n * to it. Pass `{ match: 'direct' }` to opt into strict `matches()`-style\n * matching (fire only when the event lands on the exact element the selector\n * identifies, with no walk-up).\n *\n * The generic `T` narrows the second handler argument to the expected element\n * type, mirroring `delegate<T>()`. Defaults to `Element` for untyped calls.\n *\n * Usage (pseudo-code — see examples for live ones):\n *   delegateCapture(rootEl, 'focus', 'input, textarea', handlerFn);\n *   delegateCapture(rootEl, 'click', '.exact', handlerFn, { match: 'direct' });\n */\nexport function delegateCapture<T extends Element = Element>(\n  rootEl: HTMLElement,\n  type: string,\n  selector: string,\n  handler: (event: Event, target: T) => void,\n  options?: DelegateOptions,\n): () => void {\n  assertValidSelector(selector, 'delegateCapture');\n  devHooks.delegateInEffect?.('delegateCapture');\n  const listener = makeListener(\n    rootEl,\n    selector,\n    handler,\n    options?.match ?? 'closest',\n  );\n  rootEl.addEventListener(type, listener, true);\n  return () => {\n    rootEl.removeEventListener(type, listener, true);\n  };\n}\n"]}

package/dist/dev.d.ts

@@ -137,7 +137,9 @@ interface DevHooks {
     signalFactory?: <T>(value: T) => Signal<T>;
     /**
      * Wraps an `effect()` body so `delegate()` can detect that it is running
-     * inside one. Returns the body to actually run.
+     * inside one. Returns the body to actually run. Resolved at effect-CREATION
+     * time (the delegate-in-effect switch too), so an effect created before the
+     * install or the opt-in is never wrapped.
      */
     wrapEffect?: (fn: () => void | (() => void)) => () => void | (() => void);
     delegateInEffect?: (fn: 'delegate' | 'delegateCapture') => void;
@@ -146,6 +148,12 @@ interface DevHooks {
     storeReadonly?: <T extends object>(state: T) => T;
     /** Unwraps a proxy handed back through `set({ ...get() })`. */
     storeToRaw?: <T>(next: T) => T;
+    /**
+     * Attaches the rebuilt-listeners observer to a mount root. Called once per
+     * `mount()`, at creation — and it returns `null` when the warning is switched
+     * off then — so a mount created before the install or the opt-in is never
+     * observed.
+     */
     listenerRebuild?: (rootEl: Element) => MutationObserver | null;
     listIdShift?: (id: string) => void;
     parserRepair?: (html: string) => void;
@@ -164,6 +172,8 @@ interface DevHooks {
     duplicateCacheKeys?: (id: string, segItems: readonly {
         cacheKey: unknown;
     }[]) => void;
+    /** A surface opened over a modal `<dialog>` could not be made fully usable. */
+    overlayBlockedByModal?: (reason: 'hidden' | 'inert') => void;
     /**
      * When installed, a screened URL throws instead of warning-and-dropping.
      * A slot rather than a boolean so the check stays uniform with the rest.
@@ -282,17 +292,23 @@ interface DevWarningOptions {
  *
  * ## Install ordering
  *
- * Every hook except one is read at CALL time (render, reconcile, `set()`,
- * `delegate()`), so installing any time before your first `mount()` is enough.
+ * Most hooks are read at CALL time (render, reconcile, `set()`, `delegate()`).
+ * Three are decided once, when their host is CREATED, so both installation and
+ * the warning's switch must precede it:
+ *
+ *  - `signalFactory` — `signal()` picks its constructor (untracked signals).
+ *  - `wrapEffect` — `effect()` decides whether to wrap its body with the
+ *    effect-depth counter (delegate-in-effect).
+ *  - `listenerRebuild` — `mount()` decides whether to attach its
+ *    rebuilt-listeners `MutationObserver`.
  *
- * The exception is `signalFactory`: `signal()` picks its constructor when the
- * signal is CREATED. Static imports are hoisted above a top-level
- * `await import()`, so module-scope signals in imported modules are created
- * before this module runs and the untracked-signal warning will not see them.
- * To cover those, make `import 'kerfjs/dev'` the FIRST STATIC import of a
- * dev-only entry file, then load the rest of your app.
+ * Static imports are hoisted above a top-level `await import()`, so
+ * module-scope signals and effects in imported modules are created before this
+ * module runs. To cover those, make `import 'kerfjs/dev'` the FIRST STATIC
+ * import of a dev-only entry file (calling `enableWarnings()` there), then load
+ * the rest of your app.
  *
- * Opting into that warning prints this boundary once, so the gap is loud
+ * Opting into the untracked-signal warning prints its boundary once, so the gap is loud
  * rather than silent. It cannot be closed by retro-fitting existing signals:
  * `Signal.prototype`'s `value` accessor is non-configurable, and reaching live
  * instances would require a per-signal registry that production would pay for.
@@ -326,9 +342,11 @@ interface DevWarningOptions {
  * goes through `globalThis.process` into a local binding), so the environment
  * variables are unreachable there.
  *
- * Call it as early as you can. Every diagnostic reads its switch at call time
- * except the untracked-signal warning, which is chosen when a signal is
- * CREATED — enabling that one prints its coverage boundary once.
+ * Call it as early as you can. Most diagnostics read their switch at call
+ * time, but three are decided when their host is CREATED: `untrackedSignals`
+ * per `signal()`, `delegateInEffect` per `effect()`, and `rebuiltListeners` per
+ * `mount()`. A signal, effect, or mount created before this call stays
+ * uncovered. Enabling `untrackedSignals` prints its coverage boundary once.
  */
 declare function enableWarnings(options: DevWarningOptions): void;
 /**

package/dist/dev.js

@@ -1,7 +1,7 @@
 import { truncateRowHtml } from './chunk-WKIPLNVO.js';
 import { LIST_MARKER_PREFIX } from './chunk-BDX3R4OM.js';
-import { installDevHooks } from './chunk-CEQMZYLR.js';
-export { clearDevHooks, devHooks, installDevHooks } from './chunk-CEQMZYLR.js';
+import { installDevHooks } from './chunk-3C6F6NM4.js';
+export { clearDevHooks, devHooks, installDevHooks } from './chunk-3C6F6NM4.js';
 import { signal, Signal } from '@preact/signals-core';
 
 // src/dev-warn-config.ts
@@ -36,6 +36,9 @@ function devFlag(envName) {
   const proc = globalThis.process;
   return proc?.env?.[envName];
 }
+function silenceHint(key) {
+  return `Silence it with enableWarnings({ ${key}: false }) from kerfjs/dev, or set ${ENV_NAME[key]}=0 (or unset it) under Node.`;
+}
 
 // src/dev-binding-warn.ts
 var warnedHoles = /* @__PURE__ */ new Set();
@@ -54,7 +57,7 @@ function maybeWarnStaleBinding(prevWired, current) {
     if (warnedHoles.has(cur.id)) continue;
     warnedHoles.add(cur.id);
     console.warn(
-      `kerf: fine-grained binding ${describeHole(cur)} switched to a different signal instance on a render whose static-surrounds HTML was byte-for-byte unchanged. On that fast path kerf keeps the original binding effect and does NOT re-bind, so this hole is now stale \u2014 it still tracks the FIRST signal instance and will not reflect the new one. Bind one computed that switches internally (e.g. class={computed(() => cond.value ? sigA.value : sigB.value)}) instead of switching which signal instance you bind (see docs/2-reactivity \xA72.9). Set KERF_DEV_WARN_STALE_BINDING=0 (or unset it) to silence this warning.`
+      `kerf: fine-grained binding ${describeHole(cur)} switched to a different signal instance on a render whose static-surrounds HTML was byte-for-byte unchanged. On that fast path kerf keeps the original binding effect and does NOT re-bind, so this hole is now stale \u2014 it still tracks the FIRST signal instance and will not reflect the new one. Bind one computed that switches internally (e.g. class={computed(() => cond.value ? sigA.value : sigB.value)}) instead of switching which signal instance you bind (see docs/2-reactivity \xA72.9). ` + silenceHint("staleBinding")
     );
   }
 }
@@ -80,7 +83,7 @@ function warnIfInsideEffect(fn) {
   if (warned) return;
   warned = true;
   console.warn(
-    `kerf: ${fn}() was called inside an effect() body. Every effect re-run installs a fresh root listener; the effect disposer cleans up the reactive subscription but not the listeners, so listener count grows linearly with signal churn and each listener pins its handler closure. Register the delegate once at module or setup scope and gate behavior on the signal *inside the handler* where the read is free. See docs/5-event-delegation.md \xA75.3 "When capturing the disposer still isn't enough". Set KERF_DEV_WARN_DELEGATE_IN_EFFECT=0 (or unset it) to silence this warning.`
+    `kerf: ${fn}() was called inside an effect() body. Every effect re-run installs a fresh root listener; the effect disposer cleans up the reactive subscription but not the listeners, so listener count grows linearly with signal churn and each listener pins its handler closure. Register the delegate once at module or setup scope and gate behavior on the signal *inside the handler* where the read is free. See docs/5-event-delegation.md \xA75.3 "When capturing the disposer still isn't enough". ` + silenceHint("delegateInEffect")
   );
 }
 
@@ -103,7 +106,7 @@ function maybeWarnEachInMorphSkip(id, liveParent, rootEl) {
   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.`
+    `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. ` + silenceHint("eachInMorphSkip")
   );
 }
 var warnedDupIds = /* @__PURE__ */ new Set();
@@ -118,7 +121,7 @@ function maybeWarnDuplicateCacheKeys(id, 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.`
+        `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. ` + silenceHint("duplicateEachKeys")
       );
       return;
     }
@@ -269,7 +272,7 @@ function maybeWarnStaleIndex(id) {
   if (warnedIds2.has(id)) return;
   warnedIds2.add(id);
   console.warn(
-    `kerf: each() list '${id}' reused a memoized row at a new index this render, but its render function takes an \`index\` argument. Rows are memoized by object identity, not by position, so a reorder or an insert/remove ahead of a surviving row serves that row's cached HTML \u2014 computed at its OLD index. A numbered list, zebra striping, or an "N of M" label will silently show the wrong value. If the row output depends on the index, fold it into the memo key: each(items, render, { cacheKey: (_, i) => i }) (combine with your own key if you have one). If the index is not used in the output, ignore this. Set KERF_DEV_WARN_STALE_INDEX=0 (or unset it) to silence this warning.`
+    `kerf: each() list '${id}' reused a memoized row at a new index this render, but its render function takes an \`index\` argument. Rows are memoized by object identity, not by position, so a reorder or an insert/remove ahead of a surviving row serves that row's cached HTML \u2014 computed at its OLD index. A numbered list, zebra striping, or an "N of M" label will silently show the wrong value. If the row output depends on the index, fold it into the memo key: each(items, render, { cacheKey: (_, i) => i }) (combine with your own key if you have one). If the index is not used in the output, ignore this. ` + silenceHint("staleIndex")
   );
 }
 
@@ -290,14 +293,13 @@ function maybeWarnListRebind(id, liveParent) {
   if (warnedIds3.has(id)) return;
   warnedIds3.add(id);
   console.warn(
-    `kerf: each() list '${id}' had its container (<${liveParent.tagName.toLowerCase()}>) rebuilt by the morph this render \u2014 an ancestor's tag changed so the subtree was replaced, or a same-tag sibling positionally took the container's place. The list re-binds and repopulates automatically, but its rows were re-created from scratch: focus, scroll positions, in-progress IME composition, and any imperative listeners on the old row nodes are lost. If the rows should survive, give the LIST'S OWN container a stable id/data-key (keying the conditional sibling instead only helps when it is removed, not when it reappears) and keep the tags of the list's ancestors stable across renders. Set KERF_DEV_WARN_LIST_REBIND=0 (or unset it) to silence this warning.`
+    `kerf: each() list '${id}' had its container (<${liveParent.tagName.toLowerCase()}>) rebuilt by the morph this render \u2014 an ancestor's tag changed so the subtree was replaced, or a same-tag sibling positionally took the container's place. The list re-binds and repopulates automatically, but its rows were re-created from scratch: focus, scroll positions, in-progress IME composition, and any imperative listeners on the old row nodes are lost. If the rows should survive, give the LIST'S OWN container a stable id/data-key (keying the conditional sibling instead only helps when it is removed, not when it reappears) and keep the tags of the list's ancestors stable across renders. ` + silenceHint("listRebind")
   );
 }
 
 // src/dev-listener-warn.ts
 var LISTENER_MARKER = /* @__PURE__ */ Symbol.for("kerfjs.devListener");
 var patched = false;
-var warned2 = false;
 function isOptedIn5() {
   return devFlag("KERF_DEV_WARN_REBUILT_LISTENERS") === "1";
 }
@@ -335,22 +337,22 @@ function hasMarkedListener(el) {
   return false;
 }
 function emitWarning() {
-  if (warned2) return;
-  warned2 = true;
   console.warn(
-    "kerf: a node inside a mount()-managed tree was removed/rebuilt while carrying an imperative addEventListener listener. The listener is gone with the old node. Use `delegate(rootEl, 'click', '[data-action=\"...\"]', handler)` so the listener lives on a stable ancestor and survives re-renders, or wrap the host in `data-morph-skip` if the subtree is library-owned (Monaco, xterm, D3 charts). Set KERF_DEV_WARN_REBUILT_LISTENERS=0 (or unset it) to silence this warning."
+    "kerf: a node inside a mount()-managed tree was removed/rebuilt while carrying an imperative addEventListener listener. The listener is gone with the old node. Use `delegate(rootEl, 'click', '[data-action=\"...\"]', handler)` so the listener lives on a stable ancestor and survives re-renders, or wrap the host in `data-morph-skip` if the subtree is library-owned (Monaco, xterm, D3 charts). " + silenceHint("rebuiltListeners")
   );
 }
 function installListenerRebuildWarn(rootEl) {
   if (!isOptedIn5()) return null;
   patchAddEventListenerOnce();
+  let warned3 = false;
   const observer = new MutationObserver((mutations) => {
-    if (warned2) return;
+    if (warned3) return;
     for (const m of mutations) {
       for (let i = 0; i < m.removedNodes.length; i++) {
         const removed = m.removedNodes[i];
         if (!(removed instanceof Element)) continue;
         if (hasMarkedListener(removed)) {
+          warned3 = true;
           emitWarning();
           return;
         }
@@ -361,6 +363,18 @@ function installListenerRebuildWarn(rootEl) {
   return observer;
 }
 
+// src/dev-overlay-warn.ts
+var warned2 = /* @__PURE__ */ new Set();
+var MESSAGES = {
+  hidden: "kerf overlay(): a surface was opened while a modal <dialog> is open, and this engine lacks the <dialog>.showModal() / Popover API needed to lift it into the top layer. It renders beneath the dialog and is inert, so the user can neither see nor use it. Render the content inside the dialog's own markup, or open the dialog without `native: true`.",
+  inert: "kerf overlay(): a non-modal surface opened while a modal <dialog> is open was lifted into the top layer so it is visible, but browsers keep everything outside a modal dialog inert \u2014 its focusable controls cannot be focused or clicked. Render interactive content inside the dialog's own markup (for example a <details> menu), or open the dialog without `native: true`."
+};
+function maybeWarnOverlayBlockedByModal(reason) {
+  if (warned2.has(reason)) return;
+  warned2.add(reason);
+  console.warn(MESSAGES[reason]);
+}
+
 // src/dev-parser-repair-warn.ts
 var BLOCK_TAGS = [
   "address",
@@ -425,7 +439,7 @@ function maybeWarnParserRepair(html) {
   if (warnedPairs.has(pair)) return;
   warnedPairs.add(pair);
   console.warn(
-    `kerf: a <${tag}> inside a <p> will not survive parsing. <p> may contain only phrasing content, so the HTML parser closes it before a block-level child \u2014 your <p> ends up EMPTY and the <${tag}> (plus everything after it) becomes its sibling instead of its child. kerf then reconciles that repaired tree correctly, so updates still work; what you lose is the structure you wrote, along with any CSS or querySelector that assumed it. Use a <div> (or a phrasing element like <span>) in place of the <p>, or move the block content outside it. Set KERF_DEV_WARN_PARSER_REPAIR=0 (or unset it) to silence this warning.`
+    `kerf: a <${tag}> inside a <p> will not survive parsing. <p> may contain only phrasing content, so the HTML parser closes it before a block-level child \u2014 your <p> ends up EMPTY and the <${tag}> (plus everything after it) becomes its sibling instead of its child. kerf then reconciles that repaired tree correctly, so updates still work; what you lose is the structure you wrote, along with any CSS or querySelector that assumed it. Use a <div> (or a phrasing element like <span>) in place of the <p>, or move the block content outside it. ` + silenceHint("parserRepair")
   );
 }
 
@@ -464,7 +478,7 @@ function maybeWarnValueOnlyRerender(prevHtml, nextHtml, ctx) {
   if (!_isValueOnlyDiff(a.content, b.content)) return;
   ctx.warned = true;
   console.warn(
-    "kerf: this re-render changed only text content and attribute values \u2014 no structural change \u2014 so every changed hole could be a fine-grained binding instead. Values bind, structure re-renders: pass the signal/computed itself ({count}, class={sig}) rather than reading .value in the hole, and each change updates just that node with no render re-run (a mount whose render reads no .value never re-renders at all). See docs/2-reactivity \xA72.9. Set KERF_DEV_WARN_VALUE_ONLY_RERENDER=0 (or unset it) to silence this warning."
+    "kerf: this re-render changed only text content and attribute values \u2014 no structural change \u2014 so every changed hole could be a fine-grained binding instead. Values bind, structure re-renders: pass the signal/computed itself ({count}, class={sig}) rather than reading .value in the hole, and each change updates just that node with no render re-run (a mount whose render reads no .value never re-renders at all). See docs/2-reactivity \xA72.9. " + silenceHint("valueOnlyRerender")
   );
 }
 
@@ -477,7 +491,7 @@ function maybeWarnMissingRowKey(rowEl, rowHtml, binding) {
     `kerf each(): the first row has no \`id\` or \`data-key\` attribute. Without one, rows match positionally \u2014 an insert/remove at the head shifts every row's identity, so focused inputs jump to the wrong row, mid-edit textareas swap content with their neighbor, and any per-row state silently follows the wrong item. Add \`data-key={item.id}\` (or set \`id\`) to the top-level element returned by the row render. Row HTML: ${JSON.stringify(truncateRowHtml(rowHtml))}`
   );
 }
-var WARNING_MESSAGE = "kerf: signal was written but has no subscribers. Did you read `.value` outside of a render fn / effect()? Hoisted reads do not subscribe, so subsequent writes will not re-render. Move the read inside mount()'s render fn or effect() callback. Set KERF_DEV_WARN_UNTRACKED_SIGNALS=0 (or unset it) to silence this warning.";
+var WARNING_MESSAGE = "kerf: signal was written but has no subscribers. Did you read `.value` outside of a render fn / effect()? Hoisted reads do not subscribe, so subsequent writes will not re-render. Move the read inside mount()'s render fn or effect() callback. " + silenceHint("untrackedSignals");
 var DevSignal = class extends Signal {
   __hasSubscriber = false;
   __warned = false;
@@ -509,13 +523,13 @@ function noteUntrackedCoverage() {
   if (coverageNoticeShown) return;
   coverageNoticeShown = true;
   console.warn(
-    "kerf: KERF_DEV_WARN_UNTRACKED_SIGNALS only covers signals created AFTER kerfjs/dev is installed. Static imports are hoisted above `await import('kerfjs/dev')`, so module-scope signals in the modules you import are created first and this warning cannot see them \u2014 you may get no warnings even where the bug exists. To cover them, make `import 'kerfjs/dev'` the FIRST STATIC import of a dev-only entry file (static imports evaluate in order), then load the rest of your app. Set KERF_DEV_WARN_UNTRACKED_SIGNALS=0 (or unset it) to silence this warning."
+    "kerf: KERF_DEV_WARN_UNTRACKED_SIGNALS only covers signals created AFTER kerfjs/dev is installed. Static imports are hoisted above `await import('kerfjs/dev')`, so module-scope signals in the modules you import are created first and this warning cannot see them \u2014 you may get no warnings even where the bug exists. To cover them, make `import 'kerfjs/dev'` the FIRST STATIC import of a dev-only entry file (static imports evaluate in order), then load the rest of your app. " + silenceHint("untrackedSignals")
   );
 }
 
 // src/dev-store-warn.ts
 var WARNING_PREFIX = "kerf: defineStore.set() called with keys missing from the current state \u2014 ";
-var WARNING_SUFFIX = ". set() REPLACES state; the missing keys will be undefined after this call. Use `set({ ...get(), ...next })` to merge instead, or update each call site to pass the full state. Set KERF_DEV_WARN_NARROW_SET=0 (or unset it) to silence this warning.";
+var WARNING_SUFFIX = ". set() REPLACES state; the missing keys will be undefined after this call. Use `set({ ...get(), ...next })` to merge instead, or update each call site to pass the full state. " + silenceHint("narrowSet");
 function isOptedIn8() {
   return devFlag("KERF_DEV_WARN_NARROW_SET") === "1";
 }
@@ -641,6 +655,8 @@ var DEV_HOOKS = {
   staleIndexEnabled: isOptedInStaleIndex,
   staleIndex: maybeWarnStaleIndex,
   duplicateCacheKeys: maybeWarnDuplicateCacheKeys,
+  // --- overlay ----------------------------------------------------------
+  overlayBlockedByModal: maybeWarnOverlayBlockedByModal,
   // --- urlScreen --------------------------------------------------------
   urlScreenThrow: (message) => {
     throw new Error(message);