kerfjs 4.1.1 → 4.2.0-beta.2

package/dist/overlay.js

@@ -0,0 +1,406 @@
+import { mount } from './chunk-4MY2656S.js';
+import { delegate } from './chunk-KEZTD6H4.js';
+import './chunk-QIP723L4.js';
+import './chunk-YHH7OUFA.js';
+import { jsx } from './chunk-FSAQR6IU.js';
+import './chunk-3APBEVHF.js';
+import './chunk-GY4XV2UV.js';
+import './chunk-VVDJLWMP.js';
+
+// src/overlay.ts
+var FOCUSABLE = 'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),iframe,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
+function focusable(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE)).filter(
+    (el) => !el.hasAttribute("hidden")
+  );
+}
+function overlay(content, options = {}) {
+  const {
+    container = document.body,
+    className = "kerf-overlay",
+    dismiss = ["escape", "backdrop"],
+    initialFocus = true,
+    trap = true,
+    role = "dialog",
+    onDismiss,
+    outsideIgnore
+  } = options;
+  const triggers = dismiss === false ? [] : Array.isArray(dismiss) ? dismiss : [dismiss];
+  const restoreTo = document.activeElement;
+  const wrapper = document.createElement("div");
+  wrapper.className = className;
+  if (trap) {
+    wrapper.setAttribute("role", role);
+    wrapper.setAttribute("aria-modal", "true");
+  }
+  container.appendChild(wrapper);
+  const disposeMount = mount(wrapper, typeof content === "function" ? content : () => content);
+  const removers = [];
+  const resultBox = {};
+  const result = new Promise((resolve) => {
+    resultBox.resolve = resolve;
+  });
+  const state = { closed: false };
+  function close(value) {
+    if (state.closed) return;
+    state.closed = true;
+    for (const remove of removers) remove();
+    disposeMount();
+    wrapper.remove();
+    if (restoreTo instanceof HTMLElement && restoreTo.isConnected) restoreTo.focus();
+    resultBox.resolve?.(value);
+  }
+  function userDismiss() {
+    onDismiss?.();
+    close();
+  }
+  const wantEscape = triggers.includes("escape");
+  if (wantEscape || trap) {
+    const onKeydown = (event) => {
+      if (wantEscape && event.key === "Escape") {
+        event.stopPropagation();
+        userDismiss();
+        return;
+      }
+      if (trap && event.key === "Tab") {
+        const items = focusable(wrapper);
+        if (items.length === 0) {
+          event.preventDefault();
+          return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = document.activeElement;
+        const outside = !wrapper.contains(active);
+        if (event.shiftKey && (active === first || outside)) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && (active === last || outside)) {
+          event.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", onKeydown, true);
+    removers.push(() => document.removeEventListener("keydown", onKeydown, true));
+  }
+  if (triggers.includes("backdrop")) {
+    const onClick = (event) => {
+      if (event.target === wrapper) userDismiss();
+    };
+    wrapper.addEventListener("click", onClick);
+    removers.push(() => wrapper.removeEventListener("click", onClick));
+  }
+  if (triggers.includes("outside")) {
+    const ignore = outsideIgnore === void 0 ? [] : Array.isArray(outsideIgnore) ? outsideIgnore : [outsideIgnore];
+    const onDocClick = (event) => {
+      const target = event.target;
+      if (target === null) return;
+      if (wrapper.contains(target)) return;
+      if (ignore.some((el) => el === target || el.contains(target))) return;
+      userDismiss();
+    };
+    document.addEventListener("click", onDocClick, true);
+    removers.push(() => document.removeEventListener("click", onDocClick, true));
+  }
+  if (initialFocus !== false) {
+    if (typeof initialFocus === "string") {
+      wrapper.querySelector(initialFocus)?.focus();
+    } else {
+      const first = focusable(wrapper)[0];
+      if (first !== void 0) {
+        first.focus();
+      } else {
+        wrapper.tabIndex = -1;
+        wrapper.focus();
+      }
+    }
+  }
+  return { el: wrapper, close, result };
+}
+function confirm(message, options = {}) {
+  const {
+    container,
+    className = "kerf-overlay",
+    title,
+    okText = "OK",
+    cancelText = "Cancel",
+    danger = false
+  } = options;
+  const body = jsx("div", {
+    class: "kerf-confirm",
+    children: [
+      title !== void 0 ? jsx("h2", { class: "kerf-confirm__title", children: title }) : "",
+      jsx("p", { class: "kerf-confirm__message", children: message }),
+      jsx("div", {
+        class: "kerf-confirm__actions",
+        children: [
+          jsx("button", { type: "button", "data-confirm": "cancel", children: cancelText }),
+          jsx("button", {
+            type: "button",
+            "data-confirm": "ok",
+            class: "kerf-confirm__ok",
+            children: okText
+          })
+        ]
+      })
+    ]
+  });
+  const handle = overlay(body, {
+    container,
+    className: danger ? `${className} kerf-confirm--danger` : className,
+    dismiss: ["escape", "backdrop"],
+    initialFocus: ".kerf-confirm__ok",
+    trap: true
+  });
+  delegate(handle.el, "click", "[data-confirm]", (_event, el) => {
+    handle.close(el.getAttribute("data-confirm") === "ok");
+  });
+  return handle.result.then((value) => value === true);
+}
+function prompt(message, options = {}) {
+  const {
+    container,
+    className = "kerf-overlay",
+    title,
+    defaultValue = "",
+    placeholder,
+    inputType = "text",
+    okText = "OK",
+    cancelText = "Cancel",
+    validate
+  } = options;
+  const body = jsx("div", {
+    class: "kerf-prompt",
+    children: [
+      title !== void 0 ? jsx("h2", { class: "kerf-prompt__title", children: title }) : "",
+      jsx("label", { class: "kerf-prompt__message", children: message }),
+      jsx("input", {
+        class: "kerf-prompt__input",
+        type: inputType,
+        value: defaultValue,
+        ...placeholder !== void 0 ? { placeholder } : {},
+        "data-prompt-input": ""
+      }),
+      jsx("p", { class: "kerf-prompt__error", "data-prompt-error": "", children: "" }),
+      jsx("div", {
+        class: "kerf-prompt__actions",
+        children: [
+          jsx("button", { type: "button", "data-prompt": "cancel", children: cancelText }),
+          jsx("button", {
+            type: "button",
+            "data-prompt": "ok",
+            class: "kerf-prompt__ok",
+            children: okText
+          })
+        ]
+      })
+    ]
+  });
+  const handle = overlay(body, {
+    container,
+    className,
+    dismiss: ["escape", "backdrop"],
+    initialFocus: ".kerf-prompt__input",
+    trap: true
+  });
+  const input = handle.el.querySelector("[data-prompt-input]");
+  const errorEl = handle.el.querySelector("[data-prompt-error]");
+  errorEl.hidden = true;
+  function attemptOk() {
+    const value = input.value;
+    const error = validate?.(value);
+    if (typeof error === "string" && error.length > 0) {
+      errorEl.textContent = error;
+      errorEl.hidden = false;
+      input.focus();
+      return;
+    }
+    handle.close(value);
+  }
+  delegate(handle.el, "click", "[data-prompt]", (_event, el) => {
+    if (el.getAttribute("data-prompt") === "ok") attemptOk();
+    else handle.close(null);
+  });
+  handle.el.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && event.target === input) {
+      event.preventDefault();
+      attemptOk();
+    }
+  });
+  return handle.result.then((value) => typeof value === "string" ? value : null);
+}
+function form(fields, options = {}) {
+  const { container, className = "kerf-overlay", title, okText = "OK", cancelText = "Cancel" } = options;
+  const body = jsx("div", {
+    class: "kerf-form",
+    children: [
+      title !== void 0 ? jsx("h2", { class: "kerf-form__title", children: title }) : "",
+      ...fields.map(
+        (field) => jsx("div", {
+          class: "kerf-form__field",
+          children: [
+            jsx("label", { class: "kerf-form__label", children: field.label ?? field.name }),
+            jsx("input", {
+              class: "kerf-form__input",
+              type: field.type ?? "text",
+              name: field.name,
+              value: field.defaultValue ?? "",
+              ...field.placeholder !== void 0 ? { placeholder: field.placeholder } : {},
+              "data-field": field.name
+            }),
+            jsx("p", {
+              class: "kerf-form__error",
+              "data-field-error": field.name,
+              children: ""
+            })
+          ]
+        })
+      ),
+      jsx("div", {
+        class: "kerf-form__actions",
+        children: [
+          jsx("button", { type: "button", "data-form": "cancel", children: cancelText }),
+          jsx("button", {
+            type: "button",
+            "data-form": "ok",
+            class: "kerf-form__ok",
+            children: okText
+          })
+        ]
+      })
+    ]
+  });
+  const handle = overlay(body, {
+    container,
+    className,
+    dismiss: ["escape", "backdrop"],
+    initialFocus: ".kerf-form__input",
+    trap: true
+  });
+  const byAttr = (attr, name) => Array.from(handle.el.querySelectorAll(`[${attr}]`)).find(
+    (el) => el.getAttribute(attr) === name
+  );
+  for (const field of fields) {
+    byAttr("data-field-error", field.name).hidden = true;
+  }
+  function attemptOk() {
+    const record = {};
+    let firstInvalid = null;
+    for (const field of fields) {
+      const el = byAttr("data-field", field.name);
+      const value = el.value;
+      record[field.name] = value;
+      const error = field.validate?.(value);
+      const errorEl = byAttr("data-field-error", field.name);
+      if (typeof error === "string" && error.length > 0) {
+        errorEl.textContent = error;
+        errorEl.hidden = false;
+        if (firstInvalid === null) firstInvalid = el;
+      } else {
+        errorEl.hidden = true;
+      }
+    }
+    if (firstInvalid !== null) {
+      firstInvalid.focus();
+      return;
+    }
+    handle.close(record);
+  }
+  delegate(handle.el, "click", "[data-form]", (_event, el) => {
+    if (el.getAttribute("data-form") === "ok") attemptOk();
+    else handle.close(null);
+  });
+  handle.el.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && event.target?.matches("[data-field]")) {
+      event.preventDefault();
+      attemptOk();
+    }
+  });
+  return handle.result.then(
+    (value) => value !== null && typeof value === "object" ? value : null
+  );
+}
+function popover(anchor, content, options = {}) {
+  const {
+    container,
+    className = "kerf-popover",
+    placement = "bottom",
+    align = "start",
+    gap = 4,
+    dismiss = ["outside"],
+    initialFocus = false,
+    outsideIgnore,
+    onDismiss
+  } = options;
+  const extraIgnore = outsideIgnore === void 0 ? [] : Array.isArray(outsideIgnore) ? [...outsideIgnore] : [outsideIgnore];
+  const handle = overlay(content, {
+    container,
+    className,
+    dismiss,
+    trap: false,
+    initialFocus,
+    onDismiss,
+    outsideIgnore: [anchor, ...extraIgnore]
+  });
+  handle.el.style.position = "fixed";
+  handle.el.style.margin = "0";
+  const reposition = () => {
+    const a = anchor.getBoundingClientRect();
+    const p = handle.el.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const belowTop = a.bottom + gap;
+    const aboveTop = a.top - gap - p.height;
+    let below = placement !== "top";
+    if (below && belowTop + p.height > vh && aboveTop >= 0) below = false;
+    else if (!below && aboveTop < 0 && belowTop + p.height <= vh) below = true;
+    let left = align === "end" ? a.right - p.width : a.left;
+    left = Math.max(0, Math.min(left, vw - p.width));
+    handle.el.style.left = `${left}px`;
+    handle.el.style.top = `${below ? belowTop : aboveTop}px`;
+  };
+  reposition();
+  window.addEventListener("scroll", reposition, true);
+  window.addEventListener("resize", reposition);
+  void handle.result.then(() => {
+    window.removeEventListener("scroll", reposition, true);
+    window.removeEventListener("resize", reposition);
+  });
+  return handle;
+}
+function toastRegion(container) {
+  if (container !== void 0) return container;
+  const existing = document.querySelector(".kerf-toasts");
+  if (existing !== null) return existing;
+  const region = document.createElement("div");
+  region.className = "kerf-toasts";
+  region.setAttribute("aria-live", "polite");
+  document.body.appendChild(region);
+  return region;
+}
+function toast(content, options = {}) {
+  const { container, className = "kerf-toast", duration = 4e3, role = "status" } = options;
+  const el = document.createElement("div");
+  el.className = className;
+  el.setAttribute("role", role);
+  toastRegion(container).appendChild(el);
+  const disposeMount = mount(el, typeof content === "function" ? content : () => content);
+  const state = {
+    dismissed: false,
+    timer: void 0
+  };
+  function dismiss() {
+    if (state.dismissed) return;
+    state.dismissed = true;
+    if (state.timer !== void 0) clearTimeout(state.timer);
+    disposeMount();
+    el.remove();
+  }
+  if (duration > 0) state.timer = setTimeout(dismiss, duration);
+  return dismiss;
+}
+
+export { confirm, form, overlay, popover, prompt, toast };
+//# sourceMappingURL=overlay.js.map
+//# sourceMappingURL=overlay.js.map

package/dist/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/overlay.ts"],"names":[],"mappings":"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","file":"overlay.js","sourcesContent":["/**\n * `kerfjs/overlay` — the modal / overlay + dismiss manager.\n *\n * Every real kerf app hand-rolls this: `toElement → body.appendChild → mount →\n * wire dismissal → remove`, plus the fiddly parts (Escape, backdrop / outside\n * click, focus trap, restoring focus on close). `window.confirm` is a no-op in\n * Tauri WKWebViews, so a hand-built overlay is mandatory there. This subpath\n * blesses the pattern as three functions over `mount()` — `overlay()`, and the\n * `confirm()` / `toast()` conveniences built on it. No per-instance framework\n * state: each call owns its DOM + listeners in a closure and returns a handle.\n *\n *   import { overlay, confirm, toast } from 'kerfjs/overlay';\n *\n *   const ok = await confirm('Delete this file?', { danger: true });\n *   toast('Saved');\n *   const dialog = overlay(<Settings />, { dismiss: ['escape', 'backdrop'] });\n *   // …later: dialog.close();  or  await dialog.result;\n *\n * Structural only — kerf ships no CSS. The wrapper gets your `className`; style\n * the backdrop / centering / animation yourself.\n */\nimport { delegate } from './delegate.js';\nimport { jsx, type SafeHtml } from './jsx-runtime.js';\nimport { mount, type MountResult } from './mount.js';\n\n/** A user-initiated dismissal trigger. */\nexport type DismissTrigger = 'escape' | 'backdrop' | 'outside';\n\n/** Content for an overlay: static `SafeHtml`, or a render function `mount()` drives reactively. */\nexport type OverlayContent = SafeHtml | (() => MountResult);\n\n/** Options for {@link overlay}. */\nexport interface OverlayOptions {\n  /** Where to append the overlay wrapper. Default `document.body`. */\n  container?: Element;\n  /** Class on the wrapper element (you style it — kerf ships no CSS). Default `'kerf-overlay'`. */\n  className?: string;\n  /**\n   * Which user actions dismiss the overlay. Default `['escape', 'backdrop']`.\n   * `'backdrop'` = a click on the wrapper itself (not its content); `'outside'`\n   * = a click anywhere outside the wrapper (for anchored popovers). `false`\n   * disables user dismissal (close it programmatically).\n   */\n  dismiss?: DismissTrigger | DismissTrigger[] | false;\n  /**\n   * Where focus lands on open: a selector, `true` (first focusable element, or\n   * the wrapper if none), or `false` (leave focus alone). Default `true`.\n   */\n  initialFocus?: string | boolean;\n  /**\n   * Trap Tab / Shift+Tab within the overlay while open and mark it\n   * `role=\"dialog\"` / `aria-modal=\"true\"`. Default `true`. Set `false` for a\n   * non-modal popover.\n   */\n  trap?: boolean;\n  /** ARIA role for the wrapper when `trap` is on. Default `'dialog'`. */\n  role?: string;\n  /** Called on any user-initiated dismissal (before `close()` runs). */\n  onDismiss?: () => void;\n  /** For `'outside'` dismissal: clicks on these elements do NOT count as outside (e.g. the trigger button). */\n  outsideIgnore?: Element | readonly Element[];\n}\n\n/** Handle returned by {@link overlay}. Holds no framework state — it's a closure. */\nexport interface OverlayHandle {\n  /** The wrapper element (mounted into, appended to `container`). */\n  el: HTMLElement;\n  /** Tear down: dispose the mount, remove listeners + the node, restore focus, resolve `result`. Idempotent. */\n  close(result?: unknown): void;\n  /** Resolves with the value passed to `close()` (or `undefined` on user dismissal). */\n  result: Promise<unknown>;\n}\n\nconst FOCUSABLE =\n  'a[href],area[href],button:not([disabled]),input:not([disabled]),'\n  + 'select:not([disabled]),textarea:not([disabled]),iframe,'\n  + '[tabindex]:not([tabindex=\"-1\"]),[contenteditable=\"true\"]';\n\nfunction focusable(root: Element): HTMLElement[] {\n  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n    (el) => !el.hasAttribute('hidden'),\n  );\n}\n\n/**\n * Open an overlay: append a wrapper to `container`, `mount()` `content` inside\n * it, wire the requested dismissals + (optionally) a focus trap, and return a\n * handle. See {@link OverlayOptions}.\n */\nexport function overlay(content: OverlayContent, options: OverlayOptions = {}): OverlayHandle {\n  const {\n    container = document.body,\n    className = 'kerf-overlay',\n    dismiss = ['escape', 'backdrop'],\n    initialFocus = true,\n    trap = true,\n    role = 'dialog',\n    onDismiss,\n    outsideIgnore,\n  } = options;\n\n  const triggers: readonly DismissTrigger[] =\n    dismiss === false ? [] : Array.isArray(dismiss) ? dismiss : [dismiss];\n  const restoreTo = document.activeElement;\n\n  const wrapper = document.createElement('div');\n  wrapper.className = className;\n  if (trap) {\n    wrapper.setAttribute('role', role);\n    wrapper.setAttribute('aria-modal', 'true');\n  }\n  container.appendChild(wrapper);\n\n  const disposeMount = mount(wrapper, typeof content === 'function' ? content : () => content);\n\n  const removers: Array<() => void> = [];\n  const resultBox: { resolve?: (value: unknown) => void } = {};\n  const result = new Promise<unknown>((resolve) => {\n    resultBox.resolve = resolve;\n  });\n  const state = { closed: false };\n\n  function close(value?: unknown): void {\n    if (state.closed) return;\n    state.closed = true;\n    for (const remove of removers) remove();\n    disposeMount();\n    wrapper.remove();\n    if (restoreTo instanceof HTMLElement && restoreTo.isConnected) restoreTo.focus();\n    resultBox.resolve?.(value);\n  }\n\n  function userDismiss(): void {\n    onDismiss?.();\n    close();\n  }\n\n  const wantEscape = triggers.includes('escape');\n  if (wantEscape || trap) {\n    const onKeydown = (event: KeyboardEvent): void => {\n      if (wantEscape && event.key === 'Escape') {\n        event.stopPropagation();\n        userDismiss();\n        return;\n      }\n      if (trap && event.key === 'Tab') {\n        const items = focusable(wrapper);\n        if (items.length === 0) {\n          event.preventDefault();\n          return;\n        }\n        const first = items[0];\n        const last = items[items.length - 1];\n        const active = document.activeElement;\n        const outside = !wrapper.contains(active);\n        if (event.shiftKey && (active === first || outside)) {\n          event.preventDefault();\n          last.focus();\n        } else if (!event.shiftKey && (active === last || outside)) {\n          event.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener('keydown', onKeydown, true);\n    removers.push(() => document.removeEventListener('keydown', onKeydown, true));\n  }\n\n  if (triggers.includes('backdrop')) {\n    const onClick = (event: Event): void => {\n      if (event.target === wrapper) userDismiss();\n    };\n    wrapper.addEventListener('click', onClick);\n    removers.push(() => wrapper.removeEventListener('click', onClick));\n  }\n\n  if (triggers.includes('outside')) {\n    const ignore = outsideIgnore === undefined\n      ? []\n      : Array.isArray(outsideIgnore) ? outsideIgnore : [outsideIgnore];\n    // Capture phase: the click that opened this overlay already passed\n    // document's capture phase, so this never fires for that opening click.\n    const onDocClick = (event: Event): void => {\n      const target = event.target as Node | null;\n      if (target === null) return;\n      if (wrapper.contains(target)) return;\n      if (ignore.some((el) => el === target || el.contains(target))) return;\n      userDismiss();\n    };\n    document.addEventListener('click', onDocClick, true);\n    removers.push(() => document.removeEventListener('click', onDocClick, true));\n  }\n\n  if (initialFocus !== false) {\n    if (typeof initialFocus === 'string') {\n      wrapper.querySelector<HTMLElement>(initialFocus)?.focus();\n    } else {\n      const first = focusable(wrapper)[0];\n      if (first !== undefined) {\n        first.focus();\n      } else {\n        wrapper.tabIndex = -1;\n        wrapper.focus();\n      }\n    }\n  }\n\n  return { el: wrapper, close, result };\n}\n\n/** Options for {@link confirm}. */\nexport interface ConfirmOptions {\n  /** Where to append the overlay. Default `document.body`. */\n  container?: Element;\n  /** Wrapper class. Default `'kerf-overlay'`. */\n  className?: string;\n  /** Optional heading above the message. */\n  title?: string;\n  /** Confirm button label. Default `'OK'`. */\n  okText?: string;\n  /** Cancel button label. Default `'Cancel'`. */\n  cancelText?: string;\n  /** Add a `kerf-confirm--danger` class to the wrapper for destructive actions. */\n  danger?: boolean;\n}\n\n/**\n * A promise-based `window.confirm` replacement (that global is a no-op in Tauri\n * webviews). Renders a two-button dialog and resolves `true` for OK, `false`\n * for Cancel or any dismissal (Escape / backdrop). Message + labels are\n * auto-escaped (rendered through the JSX runtime).\n */\nexport function confirm(message: string, options: ConfirmOptions = {}): Promise<boolean> {\n  const {\n    container,\n    className = 'kerf-overlay',\n    title,\n    okText = 'OK',\n    cancelText = 'Cancel',\n    danger = false,\n  } = options;\n\n  const body: SafeHtml = jsx('div', {\n    class: 'kerf-confirm',\n    children: [\n      title !== undefined ? jsx('h2', { class: 'kerf-confirm__title', children: title }) : '',\n      jsx('p', { class: 'kerf-confirm__message', children: message }),\n      jsx('div', {\n        class: 'kerf-confirm__actions',\n        children: [\n          jsx('button', { type: 'button', 'data-confirm': 'cancel', children: cancelText }),\n          jsx('button', {\n            type: 'button',\n            'data-confirm': 'ok',\n            class: 'kerf-confirm__ok',\n            children: okText,\n          }),\n        ],\n      }),\n    ],\n  });\n\n  const handle = overlay(body, {\n    container,\n    className: danger ? `${className} kerf-confirm--danger` : className,\n    dismiss: ['escape', 'backdrop'],\n    initialFocus: '.kerf-confirm__ok',\n    trap: true,\n  });\n\n  delegate(handle.el, 'click', '[data-confirm]', (_event, el) => {\n    handle.close(el.getAttribute('data-confirm') === 'ok');\n  });\n\n  return handle.result.then((value) => value === true);\n}\n\n/**\n * Validate a single field's value. Return a non-empty error string to BLOCK\n * submission (shown inline next to the field); return `undefined`/`null`/`''` to\n * allow it.\n */\nexport type FieldValidator = (value: string) => string | null | undefined | void;\n\n/** Options for {@link prompt}. */\nexport interface PromptOptions {\n  /** Where to append the overlay. Default `document.body`. */\n  container?: Element;\n  /** Wrapper class. Default `'kerf-overlay'`. */\n  className?: string;\n  /** Optional heading above the message. */\n  title?: string;\n  /** Pre-filled input value. Default `''`. */\n  defaultValue?: string;\n  /** Input placeholder. */\n  placeholder?: string;\n  /** `type` attribute of the input (`'text'`, `'email'`, `'password'`, …). Default `'text'`. */\n  inputType?: string;\n  /** Confirm button label. Default `'OK'`. */\n  okText?: string;\n  /** Cancel button label. Default `'Cancel'`. */\n  cancelText?: string;\n  /** Block OK while this returns an error string; the message shows inline. */\n  validate?: FieldValidator;\n}\n\n/**\n * A promise-based `window.prompt` replacement (that global is a no-op in Tauri\n * webviews). Renders a one-field dialog and resolves the entered **string** on OK\n * (an empty string is a valid result) or `null` on Cancel / dismissal. Enter in\n * the input submits. `message`, the default value, and labels are auto-escaped\n * (rendered through the JSX runtime). Optional `validate` blocks OK inline.\n */\nexport function prompt(message: string, options: PromptOptions = {}): Promise<string | null> {\n  const {\n    container,\n    className = 'kerf-overlay',\n    title,\n    defaultValue = '',\n    placeholder,\n    inputType = 'text',\n    okText = 'OK',\n    cancelText = 'Cancel',\n    validate,\n  } = options;\n\n  const body: SafeHtml = jsx('div', {\n    class: 'kerf-prompt',\n    children: [\n      title !== undefined ? jsx('h2', { class: 'kerf-prompt__title', children: title }) : '',\n      jsx('label', { class: 'kerf-prompt__message', children: message }),\n      jsx('input', {\n        class: 'kerf-prompt__input',\n        type: inputType,\n        value: defaultValue,\n        ...(placeholder !== undefined ? { placeholder } : {}),\n        'data-prompt-input': '',\n      }),\n      jsx('p', { class: 'kerf-prompt__error', 'data-prompt-error': '', children: '' }),\n      jsx('div', {\n        class: 'kerf-prompt__actions',\n        children: [\n          jsx('button', { type: 'button', 'data-prompt': 'cancel', children: cancelText }),\n          jsx('button', {\n            type: 'button',\n            'data-prompt': 'ok',\n            class: 'kerf-prompt__ok',\n            children: okText,\n          }),\n        ],\n      }),\n    ],\n  });\n\n  const handle = overlay(body, {\n    container,\n    className,\n    dismiss: ['escape', 'backdrop'],\n    initialFocus: '.kerf-prompt__input',\n    trap: true,\n  });\n\n  // Both elements are rendered unconditionally into this call's own wrapper, so\n  // the queries cannot miss (asserted non-null rather than guarded).\n  const input = handle.el.querySelector<HTMLInputElement>('[data-prompt-input]')!;\n  const errorEl = handle.el.querySelector<HTMLElement>('[data-prompt-error]')!;\n  errorEl.hidden = true;\n\n  function attemptOk(): void {\n    const value = input.value;\n    const error = validate?.(value);\n    if (typeof error === 'string' && error.length > 0) {\n      errorEl.textContent = error;\n      errorEl.hidden = false;\n      input.focus();\n      return;\n    }\n    handle.close(value);\n  }\n\n  delegate(handle.el, 'click', '[data-prompt]', (_event, el) => {\n    if (el.getAttribute('data-prompt') === 'ok') attemptOk();\n    else handle.close(null);\n  });\n\n  // Enter in the field submits, like the native prompt.\n  handle.el.addEventListener('keydown', (event: KeyboardEvent) => {\n    if (event.key === 'Enter' && event.target === input) {\n      event.preventDefault();\n      attemptOk();\n    }\n  });\n\n  return handle.result.then((value) => (typeof value === 'string' ? value : null));\n}\n\n/** A single field in a {@link form}. */\nexport interface FormField {\n  /** Field name — the key in the resolved record (and the input's `name`). */\n  name: string;\n  /** Label shown above the input. Defaults to `name`. */\n  label?: string;\n  /** Pre-filled value. Default `''`. */\n  defaultValue?: string;\n  /** Input placeholder. */\n  placeholder?: string;\n  /** `type` attribute of the input. Default `'text'`. */\n  type?: string;\n  /** Block OK while this returns an error string; the message shows inline for this field. */\n  validate?: FieldValidator;\n}\n\n/** Options for {@link form}. */\nexport interface FormOptions {\n  /** Where to append the overlay. Default `document.body`. */\n  container?: Element;\n  /** Wrapper class. Default `'kerf-overlay'`. */\n  className?: string;\n  /** Optional heading above the fields. */\n  title?: string;\n  /** Confirm button label. Default `'OK'`. */\n  okText?: string;\n  /** Cancel button label. Default `'Cancel'`. */\n  cancelText?: string;\n}\n\n/**\n * A promise-based multi-field dialog — the two-or-three-input sibling of\n * {@link prompt}. Renders one labeled input per {@link FormField} and resolves a\n * `Record<name, value>` on OK (after every field's `validate` passes) or `null`\n * on Cancel / dismissal. Enter in any field submits. All labels, defaults, and\n * the title are auto-escaped through the JSX runtime.\n */\nexport function form(\n  fields: readonly FormField[],\n  options: FormOptions = {},\n): Promise<Record<string, string> | null> {\n  const { container, className = 'kerf-overlay', title, okText = 'OK', cancelText = 'Cancel' } = options;\n\n  const body: SafeHtml = jsx('div', {\n    class: 'kerf-form',\n    children: [\n      title !== undefined ? jsx('h2', { class: 'kerf-form__title', children: title }) : '',\n      ...fields.map((field) =>\n        jsx('div', {\n          class: 'kerf-form__field',\n          children: [\n            jsx('label', { class: 'kerf-form__label', children: field.label ?? field.name }),\n            jsx('input', {\n              class: 'kerf-form__input',\n              type: field.type ?? 'text',\n              name: field.name,\n              value: field.defaultValue ?? '',\n              ...(field.placeholder !== undefined ? { placeholder: field.placeholder } : {}),\n              'data-field': field.name,\n            }),\n            jsx('p', {\n              class: 'kerf-form__error',\n              'data-field-error': field.name,\n              children: '',\n            }),\n          ],\n        }),\n      ),\n      jsx('div', {\n        class: 'kerf-form__actions',\n        children: [\n          jsx('button', { type: 'button', 'data-form': 'cancel', children: cancelText }),\n          jsx('button', {\n            type: 'button',\n            'data-form': 'ok',\n            class: 'kerf-form__ok',\n            children: okText,\n          }),\n        ],\n      }),\n    ],\n  });\n\n  const handle = overlay(body, {\n    container,\n    className,\n    dismiss: ['escape', 'backdrop'],\n    initialFocus: '.kerf-form__input',\n    trap: true,\n  });\n\n  // Look up a field's input / error node by attribute value (no selector\n  // escaping needed — field names are developer-supplied identifiers). Every\n  // field renders both nodes into this wrapper, so the lookup cannot miss.\n  const byAttr = <E extends HTMLElement>(attr: string, name: string): E =>\n    Array.from(handle.el.querySelectorAll<E>(`[${attr}]`)).find(\n      (el) => el.getAttribute(attr) === name,\n    )!;\n\n  // Start with every field's error hidden.\n  for (const field of fields) {\n    byAttr<HTMLElement>('data-field-error', field.name).hidden = true;\n  }\n\n  function attemptOk(): void {\n    const record: Record<string, string> = {};\n    let firstInvalid: HTMLInputElement | null = null;\n    for (const field of fields) {\n      const el = byAttr<HTMLInputElement>('data-field', field.name);\n      const value = el.value;\n      record[field.name] = value;\n      const error = field.validate?.(value);\n      const errorEl = byAttr<HTMLElement>('data-field-error', field.name);\n      if (typeof error === 'string' && error.length > 0) {\n        errorEl.textContent = error;\n        errorEl.hidden = false;\n        if (firstInvalid === null) firstInvalid = el;\n      } else {\n        errorEl.hidden = true;\n      }\n    }\n    if (firstInvalid !== null) {\n      firstInvalid.focus();\n      return;\n    }\n    handle.close(record);\n  }\n\n  delegate(handle.el, 'click', '[data-form]', (_event, el) => {\n    if (el.getAttribute('data-form') === 'ok') attemptOk();\n    else handle.close(null);\n  });\n\n  handle.el.addEventListener('keydown', (event: KeyboardEvent) => {\n    if (event.key === 'Enter' && (event.target as Element | null)?.matches('[data-field]')) {\n      event.preventDefault();\n      attemptOk();\n    }\n  });\n\n  return handle.result.then((value) =>\n    value !== null && typeof value === 'object' ? (value as Record<string, string>) : null,\n  );\n}\n\n/** Vertical placement of a {@link popover} relative to its anchor. */\nexport type PopoverPlacement = 'bottom' | 'top';\n\n/** Options for {@link popover}. */\nexport interface PopoverOptions {\n  /** Where to append the popover wrapper. Default `document.body`. */\n  container?: Element;\n  /** Class on the wrapper. Default `'kerf-popover'`. */\n  className?: string;\n  /** Preferred side of the anchor. Flips to the other side if it would overflow the viewport. Default `'bottom'`. */\n  placement?: PopoverPlacement;\n  /** Horizontal edge to line up with the anchor: `'start'` (left edges) or `'end'` (right edges). Default `'start'`. */\n  align?: 'start' | 'end';\n  /** Gap in px between the anchor and the popover. Default `4`. */\n  gap?: number;\n  /**\n   * Which user actions dismiss the popover. Default `['outside']` (a click\n   * outside the popover, the anchor exempt). Pass `false` to close only via `close()`.\n   */\n  dismiss?: DismissTrigger | DismissTrigger[] | false;\n  /** Focus behavior on open. Default `false` (non-modal — leave focus alone). */\n  initialFocus?: string | boolean;\n  /** Extra elements (besides the anchor) whose clicks do NOT count as outside. */\n  outsideIgnore?: Element | readonly Element[];\n  /** Called on any user-initiated dismissal. */\n  onDismiss?: () => void;\n}\n\n/**\n * Anchored, non-modal overlay: positions `content` relative to `anchor` (below by\n * default, flipping above if it would overflow, and clamped horizontally to the\n * viewport) and repositions on scroll / resize while open. A thin wrapper over\n * {@link overlay} with non-modal defaults — `trap: false`, `dismiss: ['outside']`,\n * and the anchor added to `outsideIgnore` so the trigger click doesn't self-close.\n * Returns the same {@link OverlayHandle}; `close()` also drops the reposition\n * listeners. `position: fixed` is set inline (you style everything else).\n */\nexport function popover(\n  anchor: Element,\n  content: OverlayContent,\n  options: PopoverOptions = {},\n): OverlayHandle {\n  const {\n    container,\n    className = 'kerf-popover',\n    placement = 'bottom',\n    align = 'start',\n    gap = 4,\n    dismiss = ['outside'],\n    initialFocus = false,\n    outsideIgnore,\n    onDismiss,\n  } = options;\n\n  const extraIgnore = outsideIgnore === undefined\n    ? []\n    : Array.isArray(outsideIgnore) ? [...outsideIgnore] : [outsideIgnore];\n\n  const handle = overlay(content, {\n    container,\n    className,\n    dismiss,\n    trap: false,\n    initialFocus,\n    onDismiss,\n    outsideIgnore: [anchor, ...extraIgnore],\n  });\n\n  handle.el.style.position = 'fixed';\n  handle.el.style.margin = '0';\n\n  const reposition = (): void => {\n    const a = anchor.getBoundingClientRect();\n    const p = handle.el.getBoundingClientRect();\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n\n    // Vertical: preferred side, flipped only if it overflows and the other side fits.\n    const belowTop = a.bottom + gap;\n    const aboveTop = a.top - gap - p.height;\n    let below = placement !== 'top';\n    if (below && belowTop + p.height > vh && aboveTop >= 0) below = false;\n    else if (!below && aboveTop < 0 && belowTop + p.height <= vh) below = true;\n\n    // Horizontal: align to an anchor edge, then clamp into the viewport.\n    let left = align === 'end' ? a.right - p.width : a.left;\n    left = Math.max(0, Math.min(left, vw - p.width));\n\n    handle.el.style.left = `${left}px`;\n    handle.el.style.top = `${below ? belowTop : aboveTop}px`;\n  };\n\n  reposition();\n  window.addEventListener('scroll', reposition, true); // capture: catch scrolls in any container\n  window.addEventListener('resize', reposition);\n  void handle.result.then(() => {\n    window.removeEventListener('scroll', reposition, true);\n    window.removeEventListener('resize', reposition);\n  });\n\n  return handle;\n}\n\n/** Content for a {@link toast}: text, `SafeHtml`, or a render function. */\nexport type ToastContent = string | SafeHtml | (() => MountResult);\n\n/** Options for {@link toast}. */\nexport interface ToastOptions {\n  /** Where toasts stack. Default: a lazily-created `<div class=\"kerf-toasts\">` on `document.body`. */\n  container?: Element;\n  /** Class on the toast element. Default `'kerf-toast'`. */\n  className?: string;\n  /** Auto-dismiss after this many ms. `0` keeps it until dismissed by hand. Default `4000`. */\n  duration?: number;\n  /** ARIA role. Default `'status'`. */\n  role?: string;\n}\n\n/** The singleton toast region lives in the DOM (queried, not held in a module variable). */\nfunction toastRegion(container?: Element): Element {\n  if (container !== undefined) return container;\n  const existing = document.querySelector('.kerf-toasts');\n  if (existing !== null) return existing;\n  const region = document.createElement('div');\n  region.className = 'kerf-toasts';\n  region.setAttribute('aria-live', 'polite');\n  document.body.appendChild(region);\n  return region;\n}\n\n/**\n * Show a non-modal, auto-dismissing notification. Stacks in a shared body-level\n * region (or your `container`). Returns a `() => void` that dismisses it early.\n */\nexport function toast(content: ToastContent, options: ToastOptions = {}): () => void {\n  const { container, className = 'kerf-toast', duration = 4000, role = 'status' } = options;\n\n  const el = document.createElement('div');\n  el.className = className;\n  el.setAttribute('role', role);\n  toastRegion(container).appendChild(el);\n\n  const disposeMount = mount(el, typeof content === 'function' ? content : () => content);\n  const state: { dismissed: boolean; timer: ReturnType<typeof setTimeout> | undefined } = {\n    dismissed: false,\n    timer: undefined,\n  };\n\n  function dismiss(): void {\n    if (state.dismissed) return;\n    state.dismissed = true;\n    if (state.timer !== undefined) clearTimeout(state.timer);\n    disposeMount();\n    el.remove();\n  }\n\n  if (duration > 0) state.timer = setTimeout(dismiss, duration);\n  return dismiss;\n}\n"]}

package/dist/remount.d.ts

@@ -0,0 +1,52 @@
+import { M as MountResult } from './mount-Bo2qOx25.js';
+import { ReadonlySignal } from '@preact/signals-core';
+import './jsx-runtime.js';
+import './bindings-CYwoJpQb.js';
+
+/**
+ * `kerfjs/remount` — force a subtree to be REPLACED, not morphed, when a key changes.
+ *
+ * kerf morphs by default, which is almost always right. The exception is a
+ * library-owned subtree (a highlighted diff, a chart, an editor) that must be
+ * torn down and rebuilt on fresh DOM when its identity changes — so the library
+ * re-initializes instead of the morph patching stale internals underneath it.
+ * The folk pattern is a monotonic counter spent as `data-key={`gen-${n}`}` on a
+ * `data-morph-skip` div; `remountOn` names that pattern.
+ *
+ *   import { remountOn } from 'kerfjs/remount';
+ *
+ *   // Replace the diff pane whenever the file (or diff mode) changes:
+ *   const stop = remountOn(paneEl, () => fileId.value, () => <DiffView id={fileId.value} />);
+ *   // same key  -> the subtree is left entirely alone
+ *   // key change -> old subtree + its mounts disposed, a fresh one mounted
+ *
+ * `remountOn` owns `parent`'s children (like `mount()` / `bindList`). It returns
+ * a disposer that tears down the current subtree and stops watching the key.
+ * Pairs with `kerfjs/imperative`: put the widget's setup/teardown on the fresh
+ * node, and `remountOn` drives its re-creation.
+ */
+
+/** The key that drives a {@link remountOn}: a signal, or a thunk that reads signals. */
+type RemountKey<K> = ReadonlySignal<K> | (() => K);
+/** Options for {@link remountOn}. */
+interface RemountOptions {
+    /**
+     * Called after each (re)mount with `parent` — the live, freshly-rendered
+     * subtree. This is where you bind a widget to the new DOM (e.g.
+     * `imperative(parent.querySelector('.host'), setup)` from `kerfjs/imperative`),
+     * because `render` returns a string and has no live node yet. May return a
+     * cleanup `() => void` that runs before the NEXT remount and on dispose — return
+     * the disposer from `imperative()` here for synchronous teardown.
+     */
+    onMount?: (root: HTMLElement) => (() => void) | void;
+}
+/**
+ * Watch `key` and, whenever it changes (by `Object.is`), dispose the current
+ * subtree + its mounts and render a fresh one into `parent` via `mount(render)`.
+ * An unchanged key leaves the subtree untouched. `options.onMount(parent)` runs
+ * after each (re)mount to bind widgets to the fresh DOM. Returns a disposer that
+ * tears down the current subtree and stops watching.
+ */
+declare function remountOn<K>(parent: HTMLElement, key: RemountKey<K>, render: () => MountResult, options?: RemountOptions): () => void;
+
+export { type RemountKey, type RemountOptions, remountOn };

package/dist/remount.js

@@ -0,0 +1,45 @@
+import { mount } from './chunk-4MY2656S.js';
+import './chunk-QIP723L4.js';
+import './chunk-YHH7OUFA.js';
+import './chunk-FSAQR6IU.js';
+import { effect } from './chunk-3APBEVHF.js';
+import './chunk-GY4XV2UV.js';
+import './chunk-VVDJLWMP.js';
+
+// src/remount.ts
+var UNSET = /* @__PURE__ */ Symbol("kerf.remount.unset");
+function remountOn(parent, key, render, options = {}) {
+  const { onMount } = options;
+  const readKey = typeof key === "function" ? key : () => key.value;
+  let currentKey = UNSET;
+  let disposeMount;
+  let onMountCleanup;
+  function tearDown() {
+    if (onMountCleanup !== void 0) {
+      onMountCleanup();
+      onMountCleanup = void 0;
+    }
+    if (disposeMount !== void 0) {
+      disposeMount();
+      disposeMount = void 0;
+    }
+    parent.replaceChildren();
+  }
+  const stopWatch = effect(() => {
+    const next = readKey();
+    if (!Object.is(next, currentKey)) {
+      currentKey = next;
+      tearDown();
+      disposeMount = mount(parent, render);
+      onMountCleanup = onMount?.(parent) ?? void 0;
+    }
+  });
+  return () => {
+    stopWatch();
+    tearDown();
+  };
+}
+
+export { remountOn };
+//# sourceMappingURL=remount.js.map
+//# sourceMappingURL=remount.js.map

package/dist/remount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/remount.ts"],"names":[],"mappings":";;;;;;;;;AA0CA,IAAM,KAAA,0BAAe,oBAAoB,CAAA;AASlC,SAAS,UACd,MAAA,EACA,GAAA,EACA,MAAA,EACA,OAAA,GAA0B,EAAC,EACf;AACZ,EAAA,MAAM,EAAE,SAAQ,GAAI,OAAA;AACpB,EAAA,MAAM,UAAU,OAAO,GAAA,KAAQ,UAAA,GAAa,GAAA,GAAM,MAAS,GAAA,CAAI,KAAA;AAC/D,EAAA,IAAI,UAAA,GAA+B,KAAA;AACnC,EAAA,IAAI,YAAA;AACJ,EAAA,IAAI,cAAA;AAEJ,EAAA,SAAS,QAAA,GAAiB;AAIxB,IAAA,IAAI,mBAAmB,MAAA,EAAW;AAChC,MAAA,cAAA,EAAe;AACf,MAAA,cAAA,GAAiB,MAAA;AAAA,IACnB;AACA,IAAA,IAAI,iBAAiB,MAAA,EAAW;AAC9B,MAAA,YAAA,EAAa;AACb,MAAA,YAAA,GAAe,MAAA;AAAA,IACjB;AAGA,IAAA,MAAA,CAAO,eAAA,EAAgB;AAAA,EACzB;AAKA,EAAA,MAAM,SAAA,GAAY,OAAO,MAAM;AAC7B,IAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,IAAA,IAAI,CAAC,MAAA,CAAO,EAAA,CAAG,IAAA,EAAM,UAAU,CAAA,EAAG;AAChC,MAAA,UAAA,GAAa,IAAA;AACb,MAAA,QAAA,EAAS;AACT,MAAA,YAAA,GAAe,KAAA,CAAM,QAAQ,MAAM,CAAA;AACnC,MAAA,cAAA,GAAiB,OAAA,GAAU,MAAM,CAAA,IAAK,MAAA;AAAA,IACxC;AAAA,EACF,CAAC,CAAA;AAED,EAAA,OAAO,MAAM;AACX,IAAA,SAAA,EAAU;AACV,IAAA,QAAA,EAAS;AAAA,EACX,CAAA;AACF","file":"remount.js","sourcesContent":["/**\n * `kerfjs/remount` — force a subtree to be REPLACED, not morphed, when a key changes.\n *\n * kerf morphs by default, which is almost always right. The exception is a\n * library-owned subtree (a highlighted diff, a chart, an editor) that must be\n * torn down and rebuilt on fresh DOM when its identity changes — so the library\n * re-initializes instead of the morph patching stale internals underneath it.\n * The folk pattern is a monotonic counter spent as `data-key={`gen-${n}`}` on a\n * `data-morph-skip` div; `remountOn` names that pattern.\n *\n *   import { remountOn } from 'kerfjs/remount';\n *\n *   // Replace the diff pane whenever the file (or diff mode) changes:\n *   const stop = remountOn(paneEl, () => fileId.value, () => <DiffView id={fileId.value} />);\n *   // same key  -> the subtree is left entirely alone\n *   // key change -> old subtree + its mounts disposed, a fresh one mounted\n *\n * `remountOn` owns `parent`'s children (like `mount()` / `bindList`). It returns\n * a disposer that tears down the current subtree and stops watching the key.\n * Pairs with `kerfjs/imperative`: put the widget's setup/teardown on the fresh\n * node, and `remountOn` drives its re-creation.\n */\nimport { mount, type MountResult } from './mount.js';\nimport { effect, type ReadonlySignal } from './reactive.js';\n\n/** The key that drives a {@link remountOn}: a signal, or a thunk that reads signals. */\nexport type RemountKey<K> = ReadonlySignal<K> | (() => K);\n\n/** Options for {@link remountOn}. */\nexport interface RemountOptions {\n  /**\n   * Called after each (re)mount with `parent` — the live, freshly-rendered\n   * subtree. This is where you bind a widget to the new DOM (e.g.\n   * `imperative(parent.querySelector('.host'), setup)` from `kerfjs/imperative`),\n   * because `render` returns a string and has no live node yet. May return a\n   * cleanup `() => void` that runs before the NEXT remount and on dispose — return\n   * the disposer from `imperative()` here for synchronous teardown.\n   */\n  onMount?: (root: HTMLElement) => (() => void) | void;\n}\n\n/** Distinguishes \"no key seen yet\" from any real key (including `undefined`). */\nconst UNSET = Symbol('kerf.remount.unset');\n\n/**\n * Watch `key` and, whenever it changes (by `Object.is`), dispose the current\n * subtree + its mounts and render a fresh one into `parent` via `mount(render)`.\n * An unchanged key leaves the subtree untouched. `options.onMount(parent)` runs\n * after each (re)mount to bind widgets to the fresh DOM. Returns a disposer that\n * tears down the current subtree and stops watching.\n */\nexport function remountOn<K>(\n  parent: HTMLElement,\n  key: RemountKey<K>,\n  render: () => MountResult,\n  options: RemountOptions = {},\n): () => void {\n  const { onMount } = options;\n  const readKey = typeof key === 'function' ? key : (): K => key.value;\n  let currentKey: K | typeof UNSET = UNSET;\n  let disposeMount: (() => void) | undefined;\n  let onMountCleanup: (() => void) | undefined;\n\n  function tearDown(): void {\n    // Run the onMount cleanup BEFORE tearing down the DOM, so a synchronous\n    // teardown (e.g. an imperative() disposer returned from onMount) fires while\n    // its node is still attached.\n    if (onMountCleanup !== undefined) {\n      onMountCleanup();\n      onMountCleanup = undefined;\n    }\n    if (disposeMount !== undefined) {\n      disposeMount();\n      disposeMount = undefined;\n    }\n    // Owning parent's children: clear whatever the old mount left so widgets\n    // under it see a real removal (their MutationObserver teardown fires).\n    parent.replaceChildren();\n  }\n\n  // The outer effect tracks ONLY the key. `mount()` starts its own independent\n  // effect for `render`, so render's signal reads attach there, not here — the\n  // key is the sole dependency that triggers a remount.\n  const stopWatch = effect(() => {\n    const next = readKey();\n    if (!Object.is(next, currentKey)) {\n      currentKey = next;\n      tearDown();\n      disposeMount = mount(parent, render);\n      onMountCleanup = onMount?.(parent) ?? undefined;\n    }\n  });\n\n  return () => {\n    stopWatch();\n    tearDown();\n  };\n}\n"]}