kerfjs 5.0.0-beta.7 → 5.0.0-beta.71

package/dist/overlay.js

@@ -1,11 +1,12 @@
-import { mount } from './chunk-SVATPF5R.js';
-import { delegate } from './chunk-KPXIOG2C.js';
-
-
-import { jsx, escapeHtml } from './chunk-ZDCJZCNO.js';
+import { attach } from './chunk-FM6N2B4N.js';
+import { mount } from './chunk-TLL3KXT6.js';
+import { delegate } from './chunk-JN7EJM3B.js';
 
 
+import { jsx, escapeHtml } from './chunk-UGNPDLNI.js';
 
+import { OVERLAY_HOST_SELECTOR } from './chunk-4TX6YJDM.js';
+import { devHooks } from './chunk-3C6F6NM4.js';
 
 // src/overlay-position.ts
 function positionAnchored(el, anchor, options = {}) {
@@ -19,12 +20,25 @@ function positionAnchored(el, anchor, options = {}) {
   const belowTop = anchorRect.bottom + gap;
   const aboveTop = anchorRect.top - gap - elementRect.height;
   let below = placement !== "top";
-  if (below && belowTop + elementRect.height > viewportHeight && aboveTop >= 0) below = false;
-  else if (!below && aboveTop < 0 && belowTop + elementRect.height <= viewportHeight) below = true;
+  if (below && belowTop + elementRect.height > viewportHeight && aboveTop >= 0)
+    below = false;
+  else if (!below && aboveTop < 0 && belowTop + elementRect.height <= viewportHeight)
+    below = true;
   let left = align === "end" ? anchorRect.right - elementRect.width : anchorRect.left;
   left = Math.max(0, Math.min(left, viewportWidth - elementRect.width));
-  el.style.left = `${left}px`;
-  el.style.top = `${below ? belowTop : aboveTop}px`;
+  const [originX, originY, scaleX, scaleY] = fixedOrigin(el);
+  el.style.left = `${(left - originX) / scaleX}px`;
+  el.style.top = `${((below ? belowTop : aboveTop) - originY) / scaleY}px`;
+}
+function fixedOrigin(el) {
+  const parent = el.parentNode;
+  if (!parent) return [0, 0, 1, 1];
+  const probe = el.ownerDocument.createElement("div");
+  probe.style.cssText = "position:fixed;left:0;top:0;width:1px;height:1px;margin:0;padding:0;border:0";
+  parent.insertBefore(probe, el);
+  const rect = probe.getBoundingClientRect();
+  probe.remove();
+  return [rect.left, rect.top, rect.width || 1, rect.height || 1];
 }
 function autoReposition(el, anchor, options = {}) {
   const reposition = () => positionAnchored(el, anchor, options);
@@ -40,9 +54,9 @@ function autoReposition(el, anchor, options = {}) {
 // src/overlay-core.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) {
-  const items = Array.from(root.querySelectorAll(FOCUSABLE)).filter(
-    (el) => !el.hasAttribute("hidden") && el.tabIndex >= 0
-  );
+  const items = Array.from(
+    root.querySelectorAll(FOCUSABLE)
+  ).filter((el) => !el.hasAttribute("hidden") && el.tabIndex >= 0);
   for (const el of items) if (!el.hasAttribute("tabindex")) el.tabIndex = 0;
   return items;
 }
@@ -52,10 +66,78 @@ function supportsDialog() {
 function supportsPopover() {
   return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype.showPopover === "function";
 }
-var FALLBACK_OVERLAY_STACK = /* @__PURE__ */ Symbol("kerf.fallbackOverlayStack");
-function fallbackOverlayStack(wrapper) {
-  const document2 = wrapper.ownerDocument;
-  return document2[FALLBACK_OVERLAY_STACK] ??= [];
+var OVERLAY_ARBITRATION = /* @__PURE__ */ Symbol("kerf.overlayArbitration");
+function overlayArbitration(doc) {
+  const arbitrated = doc;
+  return arbitrated[OVERLAY_ARBITRATION] ??= {
+    stack: [],
+    handled: /* @__PURE__ */ new WeakSet(),
+    // KF-AHY6H4: an app-owned modal `<dialog>` opened outside kerf would leave
+    // the kerf surfaces already showing inert beneath it. A dialog fires
+    // `toggle` after it opens (it does not bubble, so listen in the capture
+    // phase); re-host above it exactly as kerf does for its own dialogs, which
+    // are skipped here because `overlay()` already re-hosted synchronously.
+    onToggle: (event) => {
+      const dialog = event.target;
+      const arbitration = arbitrated[OVERLAY_ARBITRATION];
+      if (dialog.tagName === "DIALOG" && !arbitration.stack.some(({ el }) => el === dialog) && isOpenModal(dialog, arbitration))
+        rehostAbove(arbitration, dialog);
+    }
+  };
+}
+function rehostAbove(arbitration, dialog) {
+  for (const { el, liftAbove } of arbitration.stack)
+    if (el !== dialog && el.isConnected && !dialog.contains(el)) liftAbove?.();
+}
+function isOpenModal(dialog, arbitration) {
+  if (!dialog.isConnected || dialog.open !== true)
+    return false;
+  if (arbitration.stack.some(({ el, modal }) => modal && el === dialog))
+    return true;
+  try {
+    return dialog.matches(":modal");
+  } catch {
+    return false;
+  }
+}
+function modalDialogOpen(doc, arbitration) {
+  return arbitration.stack.some(({ el }) => isOpenModal(el, arbitration)) || Array.from(doc.querySelectorAll("dialog[open]")).some(
+    (dialog) => isOpenModal(dialog, arbitration)
+  );
+}
+function overlayHost(anchor) {
+  const arbitration = overlayArbitration(document);
+  const dialog = anchor.closest("dialog");
+  if (dialog === null || !isOpenModal(dialog, arbitration)) return void 0;
+  let host = Array.from(dialog.querySelectorAll(OVERLAY_HOST_SELECTOR)).find(
+    (el) => el.closest("dialog") === dialog
+  );
+  if (host === void 0 && arbitration.stack.some(({ el }) => el === dialog)) {
+    dialog.insertAdjacentHTML(
+      "beforeend",
+      '<div data-kerf-overlay-host data-morph-skip data-morph-preserve style="display:contents"></div>'
+    );
+    host = dialog.lastElementChild;
+  }
+  return host;
+}
+function ownsInput(stack, self, kind) {
+  for (let i = stack.indexOf(self) + 1; i < stack.length; i++) {
+    const above = stack[i];
+    if (above.modal || kind !== "trap" && above.triggers.includes(kind))
+      return false;
+  }
+  return true;
+}
+function assertInitialFocusSelector(selector) {
+  try {
+    document.createDocumentFragment().querySelector(selector);
+  } catch (cause) {
+    throw new Error(
+      `overlay(): invalid initialFocus selector ${JSON.stringify(selector)}`,
+      { cause }
+    );
+  }
 }
 function overlay(content, options = {}) {
   const {
@@ -69,10 +151,15 @@ function overlay(content, options = {}) {
     outsideIgnore,
     native = false
   } = options;
+  if (typeof initialFocus === "string")
+    assertInitialFocusSelector(initialFocus);
   const triggers = dismiss === false ? [] : Array.isArray(dismiss) ? dismiss : [dismiss];
-  const restoreTo = document.activeElement;
-  const useDialog = native && trap && supportsDialog();
-  const usePopover = native && !trap && supportsPopover();
+  const arbitration = overlayArbitration(document);
+  const containerDialog = container.closest("dialog");
+  const liftOverModal = !native && !(containerDialog !== null && isOpenModal(containerDialog, arbitration)) && modalDialogOpen(document, arbitration);
+  const topLayer = native || liftOverModal;
+  const useDialog = topLayer && trap && supportsDialog();
+  const usePopover = topLayer && !trap && supportsPopover();
   const wrapper = useDialog ? document.createElement("dialog") : document.createElement("div");
   wrapper.className = className;
   if (usePopover) wrapper.setAttribute("popover", "manual");
@@ -80,122 +167,224 @@ function overlay(content, options = {}) {
     wrapper.setAttribute("role", role);
     wrapper.setAttribute("aria-modal", "true");
   }
-  container.appendChild(wrapper);
-  const fallback = !useDialog && !usePopover;
-  const fallbackStack = fallback ? fallbackOverlayStack(wrapper) : void 0;
-  const isTopmostFallback = () => fallbackStack === void 0 || fallbackStack[fallbackStack.length - 1] === wrapper;
-  const disposeMount = mount(wrapper, typeof content === "function" ? content : () => content);
-  fallbackStack?.push(wrapper);
-  let nativeOpened = false;
-  if (useDialog) {
-    wrapper.showModal();
-    nativeOpened = true;
-  } else if (usePopover) {
-    wrapper.showPopover();
-    wrapper.style.inset = "auto";
-    nativeOpened = true;
-  }
+  const surface = {
+    el: wrapper,
+    triggers,
+    modal: trap,
+    restoreTo: document.activeElement
+  };
+  const owns = (kind, event) => !(event !== void 0 && arbitration.handled.has(event)) && ownsInput(arbitration.stack, surface, kind);
   const removers = [];
   const resultBox = {};
   const result = new Promise((resolve) => {
     resultBox.resolve = resolve;
   });
   const state = { closed: false };
+  let disposeMount;
+  let nativeOpened = false;
+  if (!trap)
+    surface.liftAbove = () => {
+      if (!supportsPopover()) {
+        devHooks.overlayBlockedByModal?.("hidden");
+        return;
+      }
+      const el = wrapper;
+      if (nativeOpened) el.hidePopover();
+      else {
+        wrapper.setAttribute("popover", "manual");
+        wrapper.style.inset = "auto";
+      }
+      el.showPopover();
+      nativeOpened = true;
+      if (wrapper.querySelector(FOCUSABLE) !== null)
+        devHooks.overlayBlockedByModal?.("inert");
+    };
   function close(value) {
     if (state.closed) return;
     state.closed = true;
-    if (fallbackStack !== void 0) {
-      const stackIndex = fallbackStack.indexOf(wrapper);
-      if (stackIndex !== -1) fallbackStack.splice(stackIndex, 1);
-    }
+    const { stack } = arbitration;
+    const stackIndex = stack.indexOf(surface);
+    if (stackIndex !== -1) stack.splice(stackIndex, 1);
+    if (stack.length === 0)
+      document.removeEventListener("toggle", arbitration.onToggle, true);
+    for (const other of stack)
+      if (other.restoreTo !== null && wrapper.contains(other.restoreTo))
+        other.restoreTo = surface.restoreTo;
+    const active = document.activeElement;
     for (const remove of removers) remove();
-    disposeMount();
+    disposeMount?.();
     if (nativeOpened) {
       nativeOpened = false;
       if (useDialog) wrapper.close();
       else wrapper.hidePopover();
     }
     wrapper.remove();
-    if (restoreTo instanceof HTMLElement && restoreTo.isConnected) restoreTo.focus();
+    restoreFocus(active);
     resultBox.resolve?.(value);
   }
+  function restoreFocus(active) {
+    if (active instanceof HTMLElement && active.isConnected && arbitration.stack.some((other) => other.el.contains(active))) {
+      if (document.activeElement !== active) active.focus();
+      return;
+    }
+    const { restoreTo } = surface;
+    if (restoreTo instanceof HTMLElement && restoreTo.isConnected)
+      restoreTo.focus();
+  }
   function userDismiss() {
     onDismiss?.();
     close();
   }
-  const wantEscape = triggers.includes("escape");
-  if (useDialog) {
-    const onCancel = (event) => {
-      event.preventDefault();
-      if (wantEscape) userDismiss();
-    };
-    wrapper.addEventListener("cancel", onCancel);
-    removers.push(() => wrapper.removeEventListener("cancel", onCancel));
-  } else if (wantEscape || trap) {
-    const onKeydown = (event) => {
-      if (!isTopmostFallback()) return;
-      if (wantEscape && event.key === "Escape") {
-        event.stopPropagation();
-        userDismiss();
-        return;
-      }
-      if (trap && event.key === "Tab") {
-        const items = focusable(wrapper);
-        if (items.length === 0) {
+  try {
+    container.appendChild(wrapper);
+    disposeMount = mount(
+      wrapper,
+      typeof content === "function" ? content : () => content
+    );
+    if (arbitration.stack.push(surface) === 1)
+      document.addEventListener("toggle", arbitration.onToggle, true);
+    if (useDialog) {
+      wrapper.showModal();
+      nativeOpened = true;
+      rehostAbove(arbitration, wrapper);
+    } else if (usePopover) {
+      wrapper.showPopover();
+      nativeOpened = true;
+      wrapper.style.inset = "auto";
+    }
+    installDismissal();
+    if (container.closest(OVERLAY_HOST_SELECTOR) !== null) {
+      makeTabReachable();
+      removers.push(attach(wrapper, () => close));
+    }
+    applyInitialFocus();
+  } catch (error) {
+    close();
+    throw error;
+  }
+  if (liftOverModal) {
+    if (!useDialog && !usePopover) devHooks.overlayBlockedByModal?.("hidden");
+    else if (usePopover && wrapper.querySelector(FOCUSABLE) !== null)
+      devHooks.overlayBlockedByModal?.("inert");
+  }
+  return { el: wrapper, close, result };
+  function installDismissal() {
+    const wantEscape = triggers.includes("escape");
+    if (useDialog) {
+      const onCancel = (event) => {
+        event.preventDefault();
+        if (wantEscape && owns("escape")) userDismiss();
+      };
+      wrapper.addEventListener("cancel", onCancel);
+      removers.push(() => wrapper.removeEventListener("cancel", onCancel));
+    } else if (wantEscape || trap) {
+      const onKeydown = (event) => {
+        if (wantEscape && event.key === "Escape") {
+          if (!owns("escape", event)) return;
+          event.stopPropagation();
           event.preventDefault();
+          arbitration.handled.add(event);
+          userDismiss();
           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();
+        if (trap && event.key === "Tab" && owns("trap")) {
+          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 (!isTopmostFallback()) return;
-      if (event.target === wrapper) userDismiss();
-    };
-    wrapper.addEventListener("click", onClick);
-    removers.push(() => wrapper.removeEventListener("click", onClick));
+      };
+      document.addEventListener("keydown", onKeydown, true);
+      removers.push(
+        () => document.removeEventListener("keydown", onKeydown, true)
+      );
+    }
+    if (triggers.includes("backdrop")) {
+      const onClick = (event) => {
+        if (event.target !== wrapper || !owns("backdrop", event)) return;
+        arbitration.handled.add(event);
+        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;
+        if (!owns("outside", event)) return;
+        arbitration.handled.add(event);
+        userDismiss();
+      };
+      document.addEventListener("click", onDocClick, true);
+      removers.push(
+        () => document.removeEventListener("click", onDocClick, true)
+      );
+    }
   }
-  if (triggers.includes("outside")) {
-    const ignore = outsideIgnore === void 0 ? [] : Array.isArray(outsideIgnore) ? outsideIgnore : [outsideIgnore];
-    const onDocClick = (event) => {
-      if (!isTopmostFallback()) return;
-      const target = event.target;
-      if (target === null) return;
-      if (wrapper.contains(target)) return;
-      if (ignore.some((el) => el === target || el.contains(target))) return;
-      userDismiss();
+  function makeTabReachable() {
+    focusable(wrapper);
+    const onTab = (event) => {
+      if (event.key === "Tab") focusable(wrapper);
     };
-    document.addEventListener("click", onDocClick, true);
-    removers.push(() => document.removeEventListener("click", onDocClick, true));
+    document.addEventListener("keydown", onTab, true);
+    removers.push(() => document.removeEventListener("keydown", onTab, true));
   }
-  if (initialFocus !== false) {
-    if (typeof initialFocus === "string") {
-      wrapper.querySelector(initialFocus)?.focus();
-    } else {
-      const first = focusable(wrapper)[0];
-      if (first !== void 0) {
-        first.focus();
+  function applyInitialFocus() {
+    if (initialFocus !== false) {
+      if (typeof initialFocus === "string") {
+        wrapper.querySelector(initialFocus)?.focus();
       } else {
-        wrapper.tabIndex = -1;
-        wrapper.focus();
+        const first = focusable(wrapper)[0];
+        if (first !== void 0) {
+          first.focus();
+        } else {
+          wrapper.tabIndex = -1;
+          wrapper.focus();
+        }
       }
     }
   }
-  return { el: wrapper, close, result };
+}
+function wireDialog(handle, wire, settle) {
+  const disposers = [];
+  const failure = [];
+  try {
+    wire(
+      (dispose) => void disposers.push(dispose),
+      (action) => () => {
+        try {
+          action();
+        } catch (error) {
+          failure[0] = error;
+          handle.close(failure);
+        }
+      }
+    );
+  } catch (error) {
+    disposers.forEach((dispose) => dispose());
+    handle.close();
+    throw error;
+  }
+  return handle.result.then((value) => {
+    if (value === failure) throw failure[0];
+    return settle(value);
+  });
 }
 function popover(anchor, content, options = {}) {
   const {
@@ -212,7 +401,7 @@ function popover(anchor, content, options = {}) {
   } = options;
   const extraIgnore = outsideIgnore === void 0 ? [] : Array.isArray(outsideIgnore) ? [...outsideIgnore] : [outsideIgnore];
   const handle = overlay(content, {
-    container,
+    container: container ?? overlayHost(anchor),
     className,
     dismiss,
     trap: false,
@@ -221,8 +410,19 @@ function popover(anchor, content, options = {}) {
     outsideIgnore: [anchor, ...extraIgnore],
     native
   });
-  const stopReposition = autoReposition(handle.el, anchor, { placement, align, gap });
+  let stopReposition;
+  try {
+    stopReposition = autoReposition(handle.el, anchor, {
+      placement,
+      align,
+      gap
+    });
+  } catch (error) {
+    handle.close();
+    throw error;
+  }
   void handle.result.then(stopReposition);
+  void handle.result.then(attach(anchor, () => handle.close));
   return handle;
 }
 function tooltip(anchor, content, options = {}) {
@@ -242,16 +442,40 @@ function tooltip(anchor, content, options = {}) {
   let current;
   let presence = 0;
   function show() {
-    const handle = overlay(body, { container, className, dismiss: false, trap: false, initialFocus: false, native });
+    if (!anchor.isConnected) return;
+    const handle = overlay(body, {
+      container: container ?? overlayHost(anchor),
+      className,
+      dismiss: false,
+      trap: false,
+      initialFocus: false,
+      native
+    });
     handle.el.setAttribute("role", role);
-    const stop = autoReposition(handle.el, anchor, { placement, align, gap });
-    current = { handle, stop };
+    let stop;
+    try {
+      stop = autoReposition(handle.el, anchor, { placement, align, gap });
+    } catch (error) {
+      handle.close();
+      throw error;
+    }
+    const unwatch = attach(anchor, () => () => {
+      presence = 0;
+      if (timers.hide !== void 0) clearTimeout(timers.hide);
+      hide();
+    });
+    current = { handle, stop, unwatch };
+    void handle.result.then(() => {
+      if (current?.handle === handle) hide();
+    });
   }
   function hide() {
-    if (current === void 0) return;
-    current.stop();
-    current.handle.close();
+    const shown = current;
+    if (shown === void 0) return;
     current = void 0;
+    shown.unwatch();
+    shown.stop();
+    shown.handle.close();
   }
   const onEnter = (event) => {
     presence |= event.type === "focus" ? 2 : 1;
@@ -284,7 +508,14 @@ function tooltip(anchor, content, options = {}) {
 
 // src/overlay-choice.ts
 function choice(message, actions, options = {}) {
-  const { container, className = "kerf-overlay", title, defaultValue, native = false, render } = options;
+  const {
+    container,
+    className = "kerf-overlay",
+    title,
+    defaultValue,
+    native = false,
+    render
+  } = options;
   const hasDefault = "defaultValue" in options;
   const actionAttrs = actions.map((_, i) => ({ "data-choice": String(i) }));
   const body = render !== void 0 ? render({ message, actions: actionAttrs }) : jsx("div", {
@@ -317,20 +548,28 @@ function choice(message, actions, options = {}) {
     trap: true,
     native
   });
-  delegate(handle.el, "click", "[data-choice]", (_event, el) => {
-    resolveChoice(actions[Number(el.getAttribute("data-choice"))].value);
-    handle.close();
-  });
-  if (hasDefault) {
-    handle.el.addEventListener("keydown", (event) => {
-      if (event.key === "Enter") {
-        event.preventDefault();
-        resolveChoice(defaultValue);
-        handle.close();
+  void wireDialog(
+    handle,
+    (track) => {
+      track(
+        delegate(handle.el, "click", "[data-choice]", (_event, el) => {
+          resolveChoice(actions[Number(el.getAttribute("data-choice"))].value);
+          handle.close();
+        })
+      );
+      if (hasDefault) {
+        const onKeydown = (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            resolveChoice(defaultValue);
+            handle.close();
+          }
+        };
+        handle.el.addEventListener("keydown", onKeydown);
       }
-    });
-  }
-  void handle.result.then(() => resolveChoice(null));
+    },
+    () => resolveChoice(null)
+  );
   return result;
 }
 
@@ -346,7 +585,11 @@ function confirm(message, options = {}) {
     native = false,
     render
   } = options;
-  const body = render !== void 0 ? render({ message, ok: { "data-confirm": "ok" }, cancel: { "data-confirm": "cancel" } }) : jsx("div", {
+  const body = render !== void 0 ? render({
+    message,
+    ok: { "data-confirm": "ok" },
+    cancel: { "data-confirm": "cancel" }
+  }) : jsx("div", {
     class: "kerf-confirm",
     children: [
       title !== void 0 ? jsx("h2", { class: "kerf-confirm__title", children: title }) : "",
@@ -354,7 +597,11 @@ function confirm(message, options = {}) {
       jsx("div", {
         class: "kerf-confirm__actions",
         children: [
-          jsx("button", { type: "button", "data-confirm": "cancel", children: cancelText }),
+          jsx("button", {
+            type: "button",
+            "data-confirm": "cancel",
+            children: cancelText
+          }),
           jsx("button", {
             type: "button",
             "data-confirm": "ok",
@@ -373,61 +620,75 @@ function confirm(message, options = {}) {
     trap: true,
     native
   });
-  delegate(handle.el, "click", "[data-confirm]", (_event, el) => {
-    handle.close(el.getAttribute("data-confirm") === "ok");
-  });
-  return handle.result.then((value) => value === true);
+  return wireDialog(
+    handle,
+    () => {
+      delegate(handle.el, "click", "[data-confirm]", (_event, el) => {
+        handle.close(el.getAttribute("data-confirm") === "ok");
+      });
+    },
+    (value) => value === true
+  );
 }
 
-// src/overlay-form.ts
-function form(fields, options = {}) {
+// src/overlay-prompt.ts
+function runValidator(validate, value, owner) {
+  const result = validate?.(value);
+  if (typeof result?.then === "function") {
+    result.then(void 0, () => void 0);
+    throw new TypeError(`${owner}: validate returned a promise.`);
+  }
+  return typeof result === "string" && result.length > 0 ? result : void 0;
+}
+function prompt(message, options = {}) {
   const {
     container,
     className = "kerf-overlay",
     title,
+    defaultValue = "",
+    placeholder,
+    inputType = "text",
     okText = "OK",
     cancelText = "Cancel",
+    validate,
     native = false,
     render
   } = options;
-  const fieldAttrs = (field) => ({
-    "data-field": field.name,
-    name: field.name,
-    type: field.type ?? "text",
-    value: field.defaultValue ?? "",
-    ...field.placeholder !== void 0 ? { placeholder: field.placeholder } : {}
-  });
+  const inputAttrs = {
+    "data-prompt-input": "",
+    type: inputType,
+    value: defaultValue,
+    ...placeholder !== void 0 ? { placeholder } : {}
+  };
   const body = render !== void 0 ? render({
-    fields: fields.map((field) => ({
-      name: field.name,
-      label: field.label ?? field.name,
-      input: fieldAttrs(field),
-      error: { "data-field-error": field.name }
-    })),
-    ok: { "data-form": "ok" },
-    cancel: { "data-form": "cancel" }
+    message,
+    input: inputAttrs,
+    error: { "data-prompt-error": "" },
+    ok: { "data-prompt": "ok" },
+    cancel: { "data-prompt": "cancel" }
   }) : jsx("div", {
-    class: "kerf-form",
+    class: "kerf-prompt",
     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", ...fieldAttrs(field) }),
-            jsx("p", { class: "kerf-form__error", "data-field-error": field.name, 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", ...inputAttrs }),
+      jsx("p", {
+        class: "kerf-prompt__error",
+        "data-prompt-error": "",
+        children: ""
+      }),
       jsx("div", {
-        class: "kerf-form__actions",
+        class: "kerf-prompt__actions",
         children: [
-          jsx("button", { type: "button", "data-form": "cancel", children: cancelText }),
           jsx("button", {
             type: "button",
-            "data-form": "ok",
-            class: "kerf-form__ok",
+            "data-prompt": "cancel",
+            children: cancelText
+          }),
+          jsx("button", {
+            type: "button",
+            "data-prompt": "ok",
+            class: "kerf-prompt__ok",
             children: okText
           })
         ]
@@ -438,108 +699,120 @@ function form(fields, options = {}) {
     container,
     className,
     dismiss: ["escape", "backdrop"],
-    initialFocus: "[data-field]",
+    initialFocus: "[data-prompt-input]",
     trap: true,
     native
   });
-  const errorFor = (name) => Array.from(handle.el.querySelectorAll("[data-field-error]")).find(
-    (el) => el.getAttribute("data-field-error") === name
-  ) ?? null;
-  const inputFor = (name) => {
-    const input = Array.from(handle.el.querySelectorAll("input[data-field]")).find(
-      (el) => el.getAttribute("data-field") === name
-    );
-    if (input !== void 0) return input;
-    handle.close(null);
-    throw new Error(`form(): render missing <input data-field="${name}">.`);
-  };
-  for (const field of fields) {
-    inputFor(field.name);
-    const errorEl = errorFor(field.name);
-    if (errorEl !== null) errorEl.hidden = true;
-  }
-  function attemptOk() {
-    const record = {};
-    let firstInvalid = null;
-    for (const field of fields) {
-      const el = inputFor(field.name);
-      const value = el.value;
-      record[field.name] = value;
-      const error = field.validate?.(value);
-      const errorEl = errorFor(field.name);
-      if (typeof error === "string" && error.length > 0) {
-        if (errorEl !== null) {
-          errorEl.textContent = error;
-          errorEl.hidden = false;
+  return wireDialog(
+    handle,
+    (track, guard) => {
+      const inputFor = (problem = "render missing") => {
+        const input = handle.el.querySelector(
+          "input[data-prompt-input]"
+        );
+        if (input !== null) return input;
+        throw new Error(`prompt(): ${problem} <input data-prompt-input>.`);
+      };
+      inputFor();
+      const errorEl = handle.el.querySelector(
+        "[data-prompt-error]"
+      );
+      if (errorEl !== null) errorEl.hidden = true;
+      const attemptOk = guard(() => {
+        const input = inputFor("removed after open:");
+        const value = input.value;
+        const error = runValidator(validate, value, "prompt()");
+        if (error !== void 0) {
+          if (errorEl !== null) {
+            errorEl.textContent = error;
+            errorEl.hidden = false;
+          }
+          input.focus();
+          return;
         }
-        if (firstInvalid === null) firstInvalid = el;
-      } else if (errorEl !== null) {
-        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
+        handle.close(value);
+      });
+      track(
+        delegate(handle.el, "click", "[data-prompt]", (_event, el) => {
+          if (el.getAttribute("data-prompt") === "ok") attemptOk();
+          else handle.close(null);
+        })
+      );
+      const onKeydown = (event) => {
+        if (event.key === "Enter" && event.target?.matches("input[data-prompt-input]")) {
+          event.preventDefault();
+          attemptOk();
+        }
+      };
+      handle.el.addEventListener("keydown", onKeydown);
+    },
+    (value) => typeof value === "string" ? value : null
   );
 }
 
-// src/overlay-prompt.ts
-function prompt(message, options = {}) {
+// src/overlay-form.ts
+function form(fields, options = {}) {
   const {
     container,
     className = "kerf-overlay",
     title,
-    defaultValue = "",
-    placeholder,
-    inputType = "text",
     okText = "OK",
     cancelText = "Cancel",
-    validate,
     native = false,
     render
   } = options;
-  const inputAttrs = {
-    "data-prompt-input": "",
-    type: inputType,
-    value: defaultValue,
-    ...placeholder !== void 0 ? { placeholder } : {}
-  };
+  const fieldAttrs = (field) => ({
+    "data-field": field.name,
+    name: field.name,
+    type: field.type ?? "text",
+    value: field.defaultValue ?? "",
+    ...field.placeholder !== void 0 ? { placeholder: field.placeholder } : {}
+  });
   const body = render !== void 0 ? render({
-    message,
-    input: inputAttrs,
-    error: { "data-prompt-error": "" },
-    ok: { "data-prompt": "ok" },
-    cancel: { "data-prompt": "cancel" }
+    fields: fields.map((field) => ({
+      name: field.name,
+      label: field.label ?? field.name,
+      input: fieldAttrs(field),
+      error: { "data-field-error": field.name }
+    })),
+    ok: { "data-form": "ok" },
+    cancel: { "data-form": "cancel" }
   }) : jsx("div", {
-    class: "kerf-prompt",
+    class: "kerf-form",
     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", ...inputAttrs }),
-      jsx("p", { class: "kerf-prompt__error", "data-prompt-error": "", 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",
+              ...fieldAttrs(field)
+            }),
+            jsx("p", {
+              class: "kerf-form__error",
+              "data-field-error": field.name,
+              children: ""
+            })
+          ]
+        })
+      ),
       jsx("div", {
-        class: "kerf-prompt__actions",
+        class: "kerf-form__actions",
         children: [
-          jsx("button", { type: "button", "data-prompt": "cancel", children: cancelText }),
           jsx("button", {
             type: "button",
-            "data-prompt": "ok",
-            class: "kerf-prompt__ok",
+            "data-form": "cancel",
+            children: cancelText
+          }),
+          jsx("button", {
+            type: "button",
+            "data-form": "ok",
+            class: "kerf-form__ok",
             children: okText
           })
         ]
@@ -550,42 +823,69 @@ function prompt(message, options = {}) {
     container,
     className,
     dismiss: ["escape", "backdrop"],
-    initialFocus: "[data-prompt-input]",
+    initialFocus: "[data-field]",
     trap: true,
     native
   });
-  const input = handle.el.querySelector("input[data-prompt-input]");
-  if (input === null) {
-    handle.close(null);
-    throw new Error("prompt(): render missing <input data-prompt-input>.");
-  }
-  const promptInput = input;
-  const errorEl = handle.el.querySelector("[data-prompt-error]");
-  if (errorEl !== null) errorEl.hidden = true;
-  function attemptOk() {
-    const value = promptInput.value;
-    const error = validate?.(value);
-    if (typeof error === "string" && error.length > 0) {
-      if (errorEl !== null) {
-        errorEl.textContent = error;
-        errorEl.hidden = false;
+  return wireDialog(
+    handle,
+    (track, guard) => {
+      const errorFor = (name) => Array.from(
+        handle.el.querySelectorAll("[data-field-error]")
+      ).find((el) => el.getAttribute("data-field-error") === name) ?? null;
+      const inputFor = (name, problem = "render missing") => {
+        const input = Array.from(
+          handle.el.querySelectorAll("input[data-field]")
+        ).find((el) => el.getAttribute("data-field") === name);
+        if (input !== void 0) return input;
+        throw new Error(`form(): ${problem} <input data-field="${name}">.`);
+      };
+      for (const field of fields) {
+        inputFor(field.name);
+        const errorEl = errorFor(field.name);
+        if (errorEl !== null) errorEl.hidden = true;
       }
-      promptInput.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 === promptInput) {
-      event.preventDefault();
-      attemptOk();
-    }
-  });
-  return handle.result.then((value) => typeof value === "string" ? value : null);
+      const attemptOk = guard(() => {
+        const record = {};
+        let firstInvalid = null;
+        for (const field of fields) {
+          const el = inputFor(field.name, "removed after open:");
+          const value = el.value;
+          record[field.name] = value;
+          const error = runValidator(field.validate, value, "form()");
+          const errorEl = errorFor(field.name);
+          if (error !== void 0) {
+            if (errorEl !== null) {
+              errorEl.textContent = error;
+              errorEl.hidden = false;
+            }
+            if (firstInvalid === null) firstInvalid = el;
+          } else if (errorEl !== null) {
+            errorEl.hidden = true;
+          }
+        }
+        if (firstInvalid !== null) {
+          firstInvalid.focus();
+          return;
+        }
+        handle.close(record);
+      });
+      track(
+        delegate(handle.el, "click", "[data-form]", (_event, el) => {
+          if (el.getAttribute("data-form") === "ok") attemptOk();
+          else handle.close(null);
+        })
+      );
+      const onKeydown = (event) => {
+        if (event.key === "Enter" && event.target?.matches("[data-field]")) {
+          event.preventDefault();
+          attemptOk();
+        }
+      };
+      handle.el.addEventListener("keydown", onKeydown);
+    },
+    (value) => value !== null && typeof value === "object" ? value : null
+  );
 }
 
 // src/overlay-toast.ts
@@ -628,7 +928,12 @@ function toast(content, options = {}) {
   region.appendChild(el);
   const render = typeof content === "function" ? content : () => typeof content === "string" ? escapeHtml(content) : content;
   const disposeMount = mount(el, render);
-  const state = { dismissed: false, removed: false, timer: void 0, exitTimer: void 0 };
+  const state = {
+    dismissed: false,
+    removed: false,
+    timer: void 0,
+    exitTimer: void 0
+  };
   if (enterClass !== void 0) {
     globalThis.requestAnimationFrame(() => {
       if (!state.dismissed) el.classList.add(enterClass);