kerfjs 4.2.0-beta.1 → 4.2.0-beta.3

package/dist/overlay.d.ts

@@ -53,6 +53,19 @@ interface OverlayHandle {
  * handle. See {@link OverlayOptions}.
  */
 declare function overlay(content: OverlayContent, options?: OverlayOptions): OverlayHandle;
+/**
+ * Wiring slots passed to a {@link ConfirmOptions.render} — spread `ok` / `cancel`
+ * onto your own clickable elements so `confirm()` still resolves them (they are
+ * `data-confirm` attribute bags). `message` is the raw message (escape it by
+ * interpolating through JSX).
+ */
+interface ConfirmRenderSlots {
+    message: string;
+    /** Spread onto the confirm control. */
+    ok: Record<string, string>;
+    /** Spread onto the cancel control. */
+    cancel: Record<string, string>;
+}
 /** Options for {@link confirm}. */
 interface ConfirmOptions {
     /** Where to append the overlay. Default `document.body`. */
@@ -67,16 +80,227 @@ interface ConfirmOptions {
     cancelText?: string;
     /** Add a `kerf-confirm--danger` class to the wrapper for destructive actions. */
     danger?: boolean;
+    /**
+     * Bring your own markup (design-system dialogs): return the full dialog body,
+     * spreading the provided `ok`/`cancel` wiring onto your buttons. Overrides the
+     * default two-button markup; `confirm()` keeps owning dismiss / focus-trap /
+     * focus-restore and still resolves `true`/`false` for OK/Cancel/dismissal.
+     */
+    render?: (slots: ConfirmRenderSlots) => OverlayContent;
 }
 /**
  * A promise-based `window.confirm` replacement (that global is a no-op in Tauri
  * webviews). Renders a two-button dialog and resolves `true` for OK, `false`
  * for Cancel or any dismissal (Escape / backdrop). Message + labels are
- * auto-escaped (rendered through the JSX runtime).
+ * auto-escaped (rendered through the JSX runtime). Pass `render` for your own markup.
  */
 declare function confirm(message: string, options?: ConfirmOptions): Promise<boolean>;
+/**
+ * Validate a single field's value. Return a non-empty error string to BLOCK
+ * submission (shown inline next to the field); return `undefined`/`null`/`''` to
+ * allow it.
+ */
+type FieldValidator = (value: string) => string | null | undefined | void;
+/** Options for {@link prompt}. */
+interface PromptOptions {
+    /** Where to append the overlay. Default `document.body`. */
+    container?: Element;
+    /** Wrapper class. Default `'kerf-overlay'`. */
+    className?: string;
+    /** Optional heading above the message. */
+    title?: string;
+    /** Pre-filled input value. Default `''`. */
+    defaultValue?: string;
+    /** Input placeholder. */
+    placeholder?: string;
+    /** `type` attribute of the input (`'text'`, `'email'`, `'password'`, …). Default `'text'`. */
+    inputType?: string;
+    /** Confirm button label. Default `'OK'`. */
+    okText?: string;
+    /** Cancel button label. Default `'Cancel'`. */
+    cancelText?: string;
+    /** Block OK while this returns an error string; the message shows inline. */
+    validate?: FieldValidator;
+    /**
+     * Bring your own markup: return the full dialog body, spreading the provided
+     * `input` (the text field), `ok`/`cancel` (buttons), and optional `error` (the
+     * inline-error slot) wiring. `prompt()` still reads the input, runs `validate`,
+     * submits on Enter, and owns dismiss / focus. If you omit the `error` slot,
+     * `validate` simply re-focuses the input without an inline message.
+     */
+    render?: (slots: PromptRenderSlots) => OverlayContent;
+}
+/** Wiring slots for a {@link PromptOptions.render} — spread each onto your own markup. */
+interface PromptRenderSlots {
+    message: string;
+    /** Spread onto your `<input>` — carries the marker, `type`, `value`, and `placeholder`. */
+    input: Record<string, string>;
+    /** Spread onto your inline-error element (optional). */
+    error: Record<string, string>;
+    /** Spread onto the confirm control. */
+    ok: Record<string, string>;
+    /** Spread onto the cancel control. */
+    cancel: Record<string, string>;
+}
+/**
+ * A promise-based `window.prompt` replacement (that global is a no-op in Tauri
+ * webviews). Renders a one-field dialog and resolves the entered **string** on OK
+ * (an empty string is a valid result) or `null` on Cancel / dismissal. Enter in
+ * the input submits. `message`, the default value, and labels are auto-escaped
+ * (rendered through the JSX runtime). Optional `validate` blocks OK inline. Pass
+ * `render` for your own markup.
+ */
+declare function prompt(message: string, options?: PromptOptions): Promise<string | null>;
+/** A single field in a {@link form}. */
+interface FormField {
+    /** Field name — the key in the resolved record (and the input's `name`). */
+    name: string;
+    /** Label shown above the input. Defaults to `name`. */
+    label?: string;
+    /** Pre-filled value. Default `''`. */
+    defaultValue?: string;
+    /** Input placeholder. */
+    placeholder?: string;
+    /** `type` attribute of the input. Default `'text'`. */
+    type?: string;
+    /** Block OK while this returns an error string; the message shows inline for this field. */
+    validate?: FieldValidator;
+}
+/** One field's wiring in a {@link FormRenderSlots} — spread `input`/`error` onto your markup. */
+interface FormRenderField {
+    name: string;
+    label: string;
+    /** Spread onto your `<input>` — carries the marker, `name`, `type`, `value`, `placeholder`. */
+    input: Record<string, string>;
+    /** Spread onto your inline-error element (optional). */
+    error: Record<string, string>;
+}
+/** Wiring slots for a {@link FormOptions.render}. */
+interface FormRenderSlots {
+    fields: FormRenderField[];
+    /** Spread onto the confirm control. */
+    ok: Record<string, string>;
+    /** Spread onto the cancel control. */
+    cancel: Record<string, string>;
+}
+/** Options for {@link form}. */
+interface FormOptions {
+    /** Where to append the overlay. Default `document.body`. */
+    container?: Element;
+    /** Wrapper class. Default `'kerf-overlay'`. */
+    className?: string;
+    /** Optional heading above the fields. */
+    title?: string;
+    /** Confirm button label. Default `'OK'`. */
+    okText?: string;
+    /** Cancel button label. Default `'Cancel'`. */
+    cancelText?: string;
+    /**
+     * Bring your own markup: return the full form body, laying out `slots.fields`
+     * (each with `input`/`error` wiring to spread) and the `ok`/`cancel` buttons.
+     * `form()` still reads each input, runs per-field `validate`, focuses the first
+     * invalid field, submits on Enter, and owns dismiss / focus. Omit a field's
+     * `error` slot to skip its inline message.
+     */
+    render?: (slots: FormRenderSlots) => OverlayContent;
+}
+/**
+ * A promise-based multi-field dialog — the two-or-three-input sibling of
+ * {@link prompt}. Renders one labeled input per {@link FormField} and resolves a
+ * `Record<name, value>` on OK (after every field's `validate` passes) or `null`
+ * on Cancel / dismissal. Enter in any field submits. All labels, defaults, and
+ * the title are auto-escaped through the JSX runtime.
+ */
+declare function form(fields: readonly FormField[], options?: FormOptions): Promise<Record<string, string> | null>;
+/** Vertical placement relative to an anchor (used by {@link popover}, {@link positionAnchored}, {@link tooltip}). */
+type PopoverPlacement = 'bottom' | 'top';
+/** Placement options for {@link positionAnchored} / {@link autoReposition}. */
+interface AnchorPositionOptions {
+    /** Preferred side of the anchor; flips to the other side if it would overflow the viewport. Default `'bottom'`. */
+    placement?: PopoverPlacement;
+    /** Horizontal edge to line up with the anchor: `'start'` (left edges) or `'end'` (right edges). Default `'start'`. */
+    align?: 'start' | 'end';
+    /** Gap in px between the anchor and the element. Default `4`. */
+    gap?: number;
+}
+/**
+ * One-shot: position `el` relative to `anchor` — below by default, flipping above
+ * if it would overflow the viewport, aligned to a horizontal edge and clamped into
+ * view. Sets `el.style` `position: fixed`, `margin: 0`, `left`, and `top` (fixed so
+ * `left`/`top` are viewport coordinates, matching `getBoundingClientRect`). This is
+ * `popover()`'s placement core, usable on any element (an inline hint, a tooltip) —
+ * no overlay lifecycle. Pair with {@link autoReposition} to keep it glued while open.
+ */
+declare function positionAnchored(el: HTMLElement, anchor: Element, options?: AnchorPositionOptions): void;
+/**
+ * Keep `el` positioned against `anchor` (via {@link positionAnchored}) as the page
+ * scrolls or resizes. Positions once immediately, then re-runs on `scroll`
+ * (capture phase — catches scrolls in any inner container, not just `window`) and
+ * `resize`. Returns a disposer that removes the listeners.
+ */
+declare function autoReposition(el: HTMLElement, anchor: Element, options?: AnchorPositionOptions): () => void;
+/** Options for {@link popover}. */
+interface PopoverOptions {
+    /** Where to append the popover wrapper. Default `document.body`. */
+    container?: Element;
+    /** Class on the wrapper. Default `'kerf-popover'`. */
+    className?: string;
+    /** Preferred side of the anchor. Flips to the other side if it would overflow the viewport. Default `'bottom'`. */
+    placement?: PopoverPlacement;
+    /** Horizontal edge to line up with the anchor: `'start'` (left edges) or `'end'` (right edges). Default `'start'`. */
+    align?: 'start' | 'end';
+    /** Gap in px between the anchor and the popover. Default `4`. */
+    gap?: number;
+    /**
+     * Which user actions dismiss the popover. Default `['outside']` (a click
+     * outside the popover, the anchor exempt). Pass `false` to close only via `close()`.
+     */
+    dismiss?: DismissTrigger | DismissTrigger[] | false;
+    /** Focus behavior on open. Default `false` (non-modal — leave focus alone). */
+    initialFocus?: string | boolean;
+    /** Extra elements (besides the anchor) whose clicks do NOT count as outside. */
+    outsideIgnore?: Element | readonly Element[];
+    /** Called on any user-initiated dismissal. */
+    onDismiss?: () => void;
+}
+/**
+ * Anchored, non-modal overlay: positions `content` relative to `anchor` (below by
+ * default, flipping above if it would overflow, and clamped horizontally to the
+ * viewport) and repositions on scroll / resize while open. A thin wrapper over
+ * {@link overlay} with non-modal defaults — `trap: false`, `dismiss: ['outside']`,
+ * and the anchor added to `outsideIgnore` so the trigger click doesn't self-close.
+ * Returns the same {@link OverlayHandle}; `close()` also drops the reposition
+ * listeners. `position: fixed` is set inline (you style everything else).
+ */
+declare function popover(anchor: Element, content: OverlayContent, options?: PopoverOptions): OverlayHandle;
+/** Content for a {@link tooltip}: text (auto-escaped), `SafeHtml`, or a render function. */
+type TooltipContent = string | SafeHtml | (() => MountResult);
+/** Options for {@link tooltip}. */
+interface TooltipOptions extends AnchorPositionOptions {
+    /** Where to append the tooltip wrapper. Default `document.body`. */
+    container?: Element;
+    /** Class on the wrapper. Default `'kerf-tooltip'`. */
+    className?: string;
+    /** Delay in ms before showing after hover/focus enters. Default `400`. */
+    delay?: number;
+    /** Delay in ms before hiding after hover/focus leaves. Default `100`. */
+    hideDelay?: number;
+    /** ARIA role on the wrapper. Default `'tooltip'`. */
+    role?: string;
+}
+/**
+ * A hover/focus-triggered, non-modal, auto-hiding tooltip anchored to `anchor`.
+ * Shows after `delay` on `pointerenter`/`focus`, hides after `hideDelay` on
+ * `pointerleave`/`blur`, and positions itself with {@link autoReposition} (above
+ * the anchor by default). Unlike {@link popover} there is no click-dismiss model —
+ * it follows the pointer/focus. Returns a disposer that removes the anchor
+ * listeners and hides any shown tooltip. Structural only (kerf ships no CSS).
+ */
+declare function tooltip(anchor: Element, content: TooltipContent, options?: TooltipOptions): () => void;
 /** Content for a {@link toast}: text, `SafeHtml`, or a render function. */
 type ToastContent = string | SafeHtml | (() => MountResult);
+/** Accent variant for a {@link toast} — mapped to a `${className}--${variant}` class. */
+type ToastVariant = 'info' | 'success' | 'warning';
 /** Options for {@link toast}. */
 interface ToastOptions {
     /** Where toasts stack. Default: a lazily-created `<div class="kerf-toasts">` on `document.body`. */
@@ -87,11 +311,34 @@ interface ToastOptions {
     duration?: number;
     /** ARIA role. Default `'status'`. */
     role?: string;
+    /**
+     * `'stack'` (default) shows toasts stacked in the region; `'replace'` dismisses
+     * the region's current toast(s) first (collapse-to-latest for a rapid sequence).
+     */
+    mode?: 'stack' | 'replace';
+    /** Accent variant — adds a `${className}--${variant}` class (kerf ships no CSS; you style it). */
+    variant?: ToastVariant;
+    /** Class added on the next animation frame after mount, so a CSS **entrance** transition can run. */
+    enterClass?: string;
+    /** Class added when dismissing, so CSS owns the **exit** — the node is removed `exitDuration` ms later. */
+    exitClass?: string;
+    /** ms to wait after `exitClass` is added before removing the node. Default `0`. */
+    exitDuration?: number;
+}
+/** Handle returned by {@link toast}. */
+interface ToastHandle {
+    /** The toast element — inspect it, or run your own entrance/exit transitions. */
+    el: HTMLElement;
+    /** Dismiss it early (running the `exitClass` transition if set). Idempotent. */
+    dismiss(): void;
 }
 /**
  * Show a non-modal, auto-dismissing notification. Stacks in a shared body-level
- * region (or your `container`). Returns a `() => void` that dismisses it early.
+ * region (or your `container`). Returns a {@link ToastHandle} (`{ el, dismiss }`)
+ * so you can run entrance/exit transitions, wire an action button, or inspect the
+ * node. `mode: 'replace'` collapses a rapid sequence to the latest; `variant`
+ * adds an accent class; `enterClass`/`exitClass` let CSS own the animation.
  */
-declare function toast(content: ToastContent, options?: ToastOptions): () => void;
+declare function toast(content: ToastContent, options?: ToastOptions): ToastHandle;
 
-export { type ConfirmOptions, type DismissTrigger, type OverlayContent, type OverlayHandle, type OverlayOptions, type ToastContent, type ToastOptions, confirm, overlay, toast };
+export { type AnchorPositionOptions, type ConfirmOptions, type ConfirmRenderSlots, type DismissTrigger, type FieldValidator, type FormField, type FormOptions, type FormRenderField, type FormRenderSlots, type OverlayContent, type OverlayHandle, type OverlayOptions, type PopoverOptions, type PopoverPlacement, type PromptOptions, type PromptRenderSlots, type ToastContent, type ToastHandle, type ToastOptions, type ToastVariant, type TooltipContent, type TooltipOptions, autoReposition, confirm, form, overlay, popover, positionAnchored, prompt, toast, tooltip };

package/dist/overlay.js

@@ -1,5 +1,5 @@
-import { delegate } from './chunk-KEZTD6H4.js';
 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';
@@ -125,9 +125,10 @@ function confirm(message, options = {}) {
     title,
     okText = "OK",
     cancelText = "Cancel",
-    danger = false
+    danger = false,
+    render
   } = options;
-  const body = 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 }) : "",
@@ -150,7 +151,7 @@ function confirm(message, options = {}) {
     container,
     className: danger ? `${className} kerf-confirm--danger` : className,
     dismiss: ["escape", "backdrop"],
-    initialFocus: ".kerf-confirm__ok",
+    initialFocus: '[data-confirm="ok"]',
     trap: true
   });
   delegate(handle.el, "click", "[data-confirm]", (_event, el) => {
@@ -158,6 +159,295 @@ function confirm(message, options = {}) {
   });
   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,
+    render
+  } = options;
+  const inputAttrs = {
+    "data-prompt-input": "",
+    type: inputType,
+    value: defaultValue,
+    ...placeholder !== void 0 ? { placeholder } : {}
+  };
+  const body = render !== void 0 ? render({
+    message,
+    input: inputAttrs,
+    error: { "data-prompt-error": "" },
+    ok: { "data-prompt": "ok" },
+    cancel: { "data-prompt": "cancel" }
+  }) : 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", ...inputAttrs }),
+      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: "[data-prompt-input]",
+    trap: true
+  });
+  const input = handle.el.querySelector("[data-prompt-input]");
+  const errorEl = handle.el.querySelector("[data-prompt-error]");
+  if (errorEl !== null) errorEl.hidden = true;
+  function attemptOk() {
+    const value = input.value;
+    const error = validate?.(value);
+    if (typeof error === "string" && error.length > 0) {
+      if (errorEl !== null) {
+        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", 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 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" }
+  }) : 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", ...fieldAttrs(field) }),
+            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: "[data-field]",
+    trap: true
+  });
+  const byAttr = (attr, name) => Array.from(handle.el.querySelectorAll(`[${attr}]`)).find(
+    (el) => el.getAttribute(attr) === name
+  );
+  const errorFor = (name) => Array.from(handle.el.querySelectorAll("[data-field-error]")).find(
+    (el) => el.getAttribute("data-field-error") === name
+  ) ?? null;
+  for (const field of fields) {
+    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 = byAttr("data-field", 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;
+        }
+        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
+  );
+}
+function positionAnchored(el, anchor, options = {}) {
+  const { placement = "bottom", align = "start", gap = 4 } = options;
+  const a = anchor.getBoundingClientRect();
+  const p = 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));
+  el.style.position = "fixed";
+  el.style.margin = "0";
+  el.style.left = `${left}px`;
+  el.style.top = `${below ? belowTop : aboveTop}px`;
+}
+function autoReposition(el, anchor, options = {}) {
+  const reposition = () => positionAnchored(el, anchor, options);
+  reposition();
+  window.addEventListener("scroll", reposition, true);
+  window.addEventListener("resize", reposition);
+  return () => {
+    window.removeEventListener("scroll", reposition, true);
+    window.removeEventListener("resize", reposition);
+  };
+}
+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]
+  });
+  const stopReposition = autoReposition(handle.el, anchor, { placement, align, gap });
+  void handle.result.then(stopReposition);
+  return handle;
+}
+function tooltip(anchor, content, options = {}) {
+  const {
+    container,
+    className = "kerf-tooltip",
+    delay = 400,
+    hideDelay = 100,
+    role = "tooltip",
+    placement = "top",
+    align = "start",
+    gap = 4
+  } = options;
+  const body = typeof content === "function" ? content : typeof content === "string" ? jsx("span", { class: `${className}__text`, children: content }) : content;
+  const timers = {};
+  let current;
+  function show() {
+    const handle = overlay(body, { container, className, dismiss: false, trap: false, initialFocus: false });
+    handle.el.setAttribute("role", role);
+    const stop = autoReposition(handle.el, anchor, { placement, align, gap });
+    current = { handle, stop };
+  }
+  function hide() {
+    if (current === void 0) return;
+    current.stop();
+    current.handle.close();
+    current = void 0;
+  }
+  const onEnter = () => {
+    if (timers.hide !== void 0) clearTimeout(timers.hide);
+    if (current !== void 0) return;
+    if (timers.show !== void 0) clearTimeout(timers.show);
+    timers.show = setTimeout(show, delay);
+  };
+  const onLeave = () => {
+    if (timers.show !== void 0) clearTimeout(timers.show);
+    if (current === void 0) return;
+    timers.hide = setTimeout(hide, hideDelay);
+  };
+  anchor.addEventListener("pointerenter", onEnter);
+  anchor.addEventListener("pointerleave", onLeave);
+  anchor.addEventListener("focus", onEnter);
+  anchor.addEventListener("blur", onLeave);
+  return () => {
+    anchor.removeEventListener("pointerenter", onEnter);
+    anchor.removeEventListener("pointerleave", onLeave);
+    anchor.removeEventListener("focus", onEnter);
+    anchor.removeEventListener("blur", onLeave);
+    if (timers.show !== void 0) clearTimeout(timers.show);
+    if (timers.hide !== void 0) clearTimeout(timers.hide);
+    hide();
+  };
+}
+var TOAST_SET = /* @__PURE__ */ Symbol("kerf.toasts");
 function toastRegion(container) {
   if (container !== void 0) return container;
   const existing = document.querySelector(".kerf-toasts");
@@ -169,27 +459,53 @@ function toastRegion(container) {
   return region;
 }
 function toast(content, options = {}) {
-  const { container, className = "kerf-toast", duration = 4e3, role = "status" } = options;
+  const {
+    container,
+    className = "kerf-toast",
+    duration = 4e3,
+    role = "status",
+    mode = "stack",
+    variant,
+    enterClass,
+    exitClass,
+    exitDuration = 0
+  } = options;
+  const region = toastRegion(container);
+  const active = region[TOAST_SET] ??= /* @__PURE__ */ new Set();
+  if (mode === "replace") for (const d of [...active]) d();
   const el = document.createElement("div");
   el.className = className;
+  if (variant !== void 0) el.classList.add(`${className}--${variant}`);
   el.setAttribute("role", role);
-  toastRegion(container).appendChild(el);
+  region.appendChild(el);
   const disposeMount = mount(el, typeof content === "function" ? content : () => content);
-  const state = {
-    dismissed: false,
-    timer: void 0
+  const state = { dismissed: false, timer: void 0 };
+  if (enterClass !== void 0) {
+    globalThis.requestAnimationFrame(() => {
+      if (!state.dismissed) el.classList.add(enterClass);
+    });
+  }
+  const remove = () => {
+    disposeMount();
+    el.remove();
+    active.delete(dismiss);
   };
   function dismiss() {
     if (state.dismissed) return;
     state.dismissed = true;
     if (state.timer !== void 0) clearTimeout(state.timer);
-    disposeMount();
-    el.remove();
+    if (exitClass !== void 0) {
+      el.classList.add(exitClass);
+      setTimeout(remove, exitDuration);
+    } else {
+      remove();
+    }
   }
+  active.add(dismiss);
   if (duration > 0) state.timer = setTimeout(dismiss, duration);
-  return dismiss;
+  return { el, dismiss };
 }
 
-export { confirm, overlay, toast };
+export { autoReposition, confirm, form, overlay, popover, positionAnchored, prompt, toast, tooltip };
 //# sourceMappingURL=overlay.js.map
 //# sourceMappingURL=overlay.js.map