@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/tokens.ts

@@ -1,56 +1,56 @@
-// The CSS custom properties a kit piece may read.
-//
-// Most pieces also run on the ComfyUI canvas, whose colour sheet is the
-// extension's own (components/shared/theme.css), not src/theme/. Those pieces
-// read only SHARED_TOKENS, which every host defines, so a piece wears
-// whichever side's colours it sits on. The pieces in PAGE_PIECES only run on
-// pages that load src/theme/tokens.css (the manager, the community site, the
-// kit site), so they may read any name that sheet defines.
-// tokens.test.ts holds both rules.
-//
-// Add a shared name only once every host defines it (docs/tokens.md).
-
-export const SHARED_TOKENS = [
-  // Surfaces and text
-  "--wp-bg", "--wp-bg-1", "--wp-bg-2", "--wp-bg-3", "--wp-bg-4",
-  "--wp-text", "--wp-text-muted", "--wp-text-dim",
-  "--wp-border", "--wp-border-strong", "--wp-border-soft", "--wp-border-focus",
-  "--wp-overlay-bg", "--wp-row-hover", "--wp-input-shade", "--wp-scrollbar-thumb",
-  // Accent and states
-  "--wp-accent", "--wp-accent-glow", "--wp-accent-text", "--wp-accent-text-strong",
-  "--wp-accent-300", "--wp-accent-400", "--wp-accent-500", "--wp-accent-600", "--wp-accent-700", "--wp-accent-800",
-  "--wp-focus-ring", "--wp-on-accent", "--wp-on-media", "--wp-scrim",
-  "--wp-success", "--wp-warn", "--wp-danger", "--wp-info", "--wp-danger-text",
-  "--wp-error-border", "--wp-error-text",
-  "--wp-red", "--wp-red-bg", "--wp-green", "--wp-green-bg", "--wp-amber", "--wp-amber-bg",
-  "--wp-teal", "--wp-teal-bg", "--wp-violet", "--wp-violet-bg", "--wp-rose", "--wp-rose-bg",
-  // Kinds and variables
-  "--wp-kind-wildcard", "--wp-kind-fixed", "--wp-kind-combine", "--wp-kind-derivation", "--wp-kind-constraint",
-  "--wp-var-1", "--wp-var-2", "--wp-var-3", "--wp-var-4", "--wp-var-5", "--wp-var-6", "--wp-var-7", "--wp-var-8",
-  // Shape, depth and type
-  "--wp-radius-sm", "--wp-radius", "--wp-radius-md", "--wp-radius-lg", "--wp-radius-xl", "--wp-radius-cap",
-  "--wp-shadow-sm", "--wp-shadow", "--wp-shadow-md", "--wp-shadow-lg", "--wp-shadow-xl",
-  "--wp-font-sans", "--wp-font-mono",
-  "--wp-text-xs", "--wp-text-sm", "--wp-text-base", "--wp-text-md", "--wp-text-lg", "--wp-text-xl",
-  "--wp-space-0", "--wp-space-1", "--wp-space-2", "--wp-space-3", "--wp-space-4",
-  "--wp-space-5", "--wp-space-6", "--wp-space-7", "--wp-space-8",
-  "--wp-control-h-sm", "--wp-control-h-md", "--wp-control-h-lg",
-  // Motion
-  "--wp-motion-quick", "--wp-motion-hover", "--wp-motion-shimmer", "--wp-motion-fade", "--wp-motion-swap", "--wp-motion-flip",
-  "--wp-motion-curve-collapse", "--wp-motion-curve-flip", "--wp-motion-curve-linear",
-] as const;
-
-/** Read with a fallback (`var(--wp-bg-deep, var(--wp-bg))`) or kept for older
- *  hosts; a host may leave these out. */
-export const OPTIONAL_TOKENS = ["--wp-bg-deep", "--wp-bg2"] as const;
-
-/** Set by the piece itself, on its own root, not by the host. */
-export const LOCAL_TOKENS = ["--wp-hsv-hue", "--wp-lm-t", "--wp-select-line-h", "--wp-list-row-depth", "--wp-list-row-icon"] as const;
-
-/** Pieces that need a page with src/theme/ loaded (not the canvas). */
-export const PAGE_PIECES = [
-  "axis-color.ts", "matrix-axis.ts", "BundleMeta.vue", "ConstraintMatrixPreview.vue", "KindChip.vue", "PostCard.vue", "RatingBadge.vue", "TokenizedValue.vue",
-  "Button.vue", "Card.vue", "Checkbox.vue", "Chip.vue", "ChoiceCards.vue", "ColorPicker.vue", "ConfirmModal.vue",
-  "DataTable.vue", "Drawer.vue", "EmptyState.vue", "Field.vue", "Icon.vue", "IconPicker.vue", "Input.vue",
-  "ListFilter.vue", "Modal.vue", "RelativeDate.vue", "Select.vue", "Textarea.vue", "ToastHost.vue", "Toggle.vue",
-] as const;
+// The CSS custom properties a kit piece may read.
+//
+// Most pieces also run on the ComfyUI canvas, whose colour sheet is the
+// extension's own (components/shared/theme.css), not src/theme/. Those pieces
+// read only SHARED_TOKENS, which every host defines, so a piece wears
+// whichever side's colours it sits on. The pieces in PAGE_PIECES only run on
+// pages that load src/theme/tokens.css (the manager, the community site, the
+// kit site), so they may read any name that sheet defines.
+// tokens.test.ts holds both rules.
+//
+// Add a shared name only once every host defines it (docs/tokens.md).
+
+export const SHARED_TOKENS = [
+  // Surfaces and text
+  "--wp-bg", "--wp-bg-1", "--wp-bg-2", "--wp-bg-3", "--wp-bg-4",
+  "--wp-text", "--wp-text-muted", "--wp-text-dim",
+  "--wp-border", "--wp-border-strong", "--wp-border-soft", "--wp-border-focus",
+  "--wp-overlay-bg", "--wp-row-hover", "--wp-input-shade", "--wp-scrollbar-thumb",
+  // Accent and states
+  "--wp-accent", "--wp-accent-glow", "--wp-accent-text", "--wp-accent-text-strong",
+  "--wp-accent-300", "--wp-accent-400", "--wp-accent-500", "--wp-accent-600", "--wp-accent-700", "--wp-accent-800",
+  "--wp-focus-ring", "--wp-on-accent", "--wp-on-media", "--wp-scrim",
+  "--wp-success", "--wp-warn", "--wp-danger", "--wp-info", "--wp-danger-text",
+  "--wp-error-border", "--wp-error-text",
+  "--wp-red", "--wp-red-bg", "--wp-green", "--wp-green-bg", "--wp-amber", "--wp-amber-bg",
+  "--wp-teal", "--wp-teal-bg", "--wp-violet", "--wp-violet-bg", "--wp-rose", "--wp-rose-bg",
+  // Kinds and variables
+  "--wp-kind-wildcard", "--wp-kind-fixed", "--wp-kind-combine", "--wp-kind-derivation", "--wp-kind-constraint",
+  "--wp-var-1", "--wp-var-2", "--wp-var-3", "--wp-var-4", "--wp-var-5", "--wp-var-6", "--wp-var-7", "--wp-var-8",
+  // Shape, depth and type
+  "--wp-radius-sm", "--wp-radius", "--wp-radius-md", "--wp-radius-lg", "--wp-radius-xl", "--wp-radius-cap",
+  "--wp-shadow-sm", "--wp-shadow", "--wp-shadow-md", "--wp-shadow-lg", "--wp-shadow-xl",
+  "--wp-font-sans", "--wp-font-mono",
+  "--wp-text-xs", "--wp-text-sm", "--wp-text-base", "--wp-text-md", "--wp-text-lg", "--wp-text-xl",
+  "--wp-space-0", "--wp-space-1", "--wp-space-2", "--wp-space-3", "--wp-space-4",
+  "--wp-space-5", "--wp-space-6", "--wp-space-7", "--wp-space-8",
+  "--wp-control-h-sm", "--wp-control-h-md", "--wp-control-h-lg",
+  // Motion
+  "--wp-motion-quick", "--wp-motion-hover", "--wp-motion-shimmer", "--wp-motion-fade", "--wp-motion-swap", "--wp-motion-flip",
+  "--wp-motion-curve-collapse", "--wp-motion-curve-flip", "--wp-motion-curve-linear",
+] as const;
+
+/** Read with a fallback (`var(--wp-bg-deep, var(--wp-bg))`) or kept for older
+ *  hosts; a host may leave these out. */
+export const OPTIONAL_TOKENS = ["--wp-bg-deep", "--wp-bg2"] as const;
+
+/** Set by the piece itself, on its own root, not by the host. */
+export const LOCAL_TOKENS = ["--wp-hsv-hue", "--wp-lm-o", "--wp-select-line-h", "--wp-list-row-depth", "--wp-list-row-icon", "--wp-chip-c", "--wp-field-h"] as const;
+
+/** Pieces that need a page with src/theme/ loaded (not the canvas). */
+export const PAGE_PIECES = [
+  "axis-color.ts", "kind-colour.ts", "matrix-axis.ts", "BundleMeta.vue", "ConstraintMatrixPreview.vue", "PostCard.vue", "TokenizedValue.vue",
+  "Button.vue", "Card.vue", "Checkbox.vue", "Chip.vue", "ChoiceCards.vue", "ColorPicker.vue", "ConfirmModal.vue",
+  "DataTable.vue", "Drawer.vue", "EmptyState.vue", "Field.vue", "Icon.vue", "IconPicker.vue", "Input.vue",
+  "ListFilter.vue", "Modal.vue", "RelativeDate.vue", "Select.vue", "Textarea.vue", "ToastHost.vue", "Toggle.vue",
+] as const;

package/src/tooltip.css

@@ -1,43 +1,43 @@
-/* The one shared tooltip element (tooltip.ts). Colours come from tokens both
- * the canvas and the manager define, so it matches whichever side it is on. */
-@layer wp-extension {
-  .wp-tooltip {
-    position: fixed;
-    z-index: 10001;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    max-width: 280px;
-    padding: 6px 10px;
-    border: 1px solid var(--wp-border-strong);
-    border-radius: var(--wp-radius);
-    background: var(--wp-bg-3);
-    color: var(--wp-text);
-    box-shadow: var(--wp-shadow-md);
-    font: 500 12px/1.4 var(--wp-font-sans);
-    pointer-events: none;
-    white-space: normal;
-    overflow-wrap: break-word;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 90ms ease-out, visibility 0s linear 90ms;
-  }
-  .wp-tooltip[data-open] {
-    opacity: 1;
-    visibility: visible;
-    transition: opacity 90ms ease-out;
-  }
-  .wp-tooltip__kbd {
-    flex-shrink: 0;
-    padding: 1px 6px;
-    border: 1px solid var(--wp-border-strong);
-    border-radius: var(--wp-radius-sm);
-    background: var(--wp-bg-1);
-    color: var(--wp-text-muted);
-    font: 500 11px/16px var(--wp-font-mono);
-    white-space: nowrap;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .wp-tooltip, .wp-tooltip[data-open] { transition: none; }
-  }
-}
+/* The one shared tooltip element (tooltip.ts). Colours come from tokens both
+ * the canvas and the manager define, so it matches whichever side it is on. */
+@layer wp-extension {
+  .wp-tooltip {
+    position: fixed;
+    z-index: 10001;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    max-width: 280px;
+    padding: 6px 10px;
+    border: 1px solid var(--wp-border-strong);
+    border-radius: var(--wp-radius);
+    background: var(--wp-bg-3);
+    color: var(--wp-text);
+    box-shadow: var(--wp-shadow-md);
+    font: 500 12px/1.4 var(--wp-font-sans);
+    pointer-events: none;
+    white-space: normal;
+    overflow-wrap: break-word;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 90ms ease-out, visibility 0s linear 90ms;
+  }
+  .wp-tooltip[data-open] {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 90ms ease-out;
+  }
+  .wp-tooltip__kbd {
+    flex-shrink: 0;
+    padding: 1px 6px;
+    border: 1px solid var(--wp-border-strong);
+    border-radius: var(--wp-radius-sm);
+    background: var(--wp-bg-1);
+    color: var(--wp-text-muted);
+    font: 500 11px/16px var(--wp-font-mono);
+    white-space: nowrap;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .wp-tooltip, .wp-tooltip[data-open] { transition: none; }
+  }
+}

package/src/tooltip.ts

@@ -1,146 +1,146 @@
-/**
- * `v-tooltip`: a short hint shown on hover (after a short wait) and on
- * keyboard focus, hidden on leave, blur or Escape. Use it instead of
- * `title=`, which is slow, unstyled, never shows from the keyboard and is
- * cut off on the canvas.
- *
- *   <Button v-tooltip="'Copy the prompt'" icon="pi-copy" aria-label="Copy" />
- *   <span v-tooltip="{ text: 'Runs first', placement: 'right' }">…</span>
- *   <Button v-tooltip="{ text: 'Copy to clipboard', kbd: 'Ctrl C' }" … />
- *
- * One tooltip element is shared by the whole page, so a thousand hints
- * cost one node. State per element lives in a WeakMap (no expando keys).
- */
-import type { Directive } from "vue";
-import { placeFloating, viewportSize, type Placement } from "./floating";
-import "./tooltip.css";
-
-export type TooltipValue =
-  | string
-  | null
-  | undefined
-  | {
-    text: string | null | undefined;
-    placement?: Placement | undefined;
-    /** A shortcut shown after the text, e.g. "Ctrl C". */
-    kbd?: string | undefined;
-  };
-
-interface State {
-  text: string;
-  kbd: string;
-  placement: Placement;
-  timer: number | undefined;
-  off: () => void;
-}
-
-const SHOW_DELAY = 450;
-/** Moving from one hint to the next within this window shows it at once. */
-const WARM_MS = 600;
-
-const states = new WeakMap<HTMLElement, State>();
-let tipEl: HTMLDivElement | null = null;
-let owner: HTMLElement | null = null;
-let lastHidden = 0;
-let uid = 0;
-
-function read(v: TooltipValue): { text: string; kbd: string; placement: Placement } {
-  if (v && typeof v === "object") return { text: v.text ?? "", kbd: v.kbd ?? "", placement: v.placement ?? "top" };
-  return { text: v ?? "", kbd: "", placement: "top" };
-}
-
-function tip(): HTMLDivElement {
-  if (tipEl && tipEl.isConnected) return tipEl;
-  tipEl = document.createElement("div");
-  tipEl.className = "wp-tooltip";
-  tipEl.id = `wp-tooltip-${++uid}`;
-  tipEl.setAttribute("role", "tooltip");
-  document.body.appendChild(tipEl);
-  return tipEl;
-}
-
-function show(el: HTMLElement): void {
-  const s = states.get(el);
-  if (!s || !s.text || !el.isConnected) return;
-  const t = tip();
-  t.textContent = s.text;
-  if (s.kbd) {
-    const k = document.createElement("kbd");
-    k.className = "wp-tooltip__kbd";
-    k.textContent = s.kbd;
-    t.append(" ", k);
-  }
-  t.dataset.open = "true";
-  owner = el;
-  const ids = (el.getAttribute("aria-describedby") ?? "").split(" ").filter(Boolean);
-  if (!ids.includes(t.id)) el.setAttribute("aria-describedby", [...ids, t.id].join(" "));
-  const at = placeFloating(el.getBoundingClientRect(), { width: t.offsetWidth, height: t.offsetHeight }, viewportSize(), {
-    placement: s.placement,
-  });
-  t.style.left = `${at.x}px`;
-  t.style.top = `${at.y}px`;
-  t.dataset.side = at.side;
-}
-
-function hide(el: HTMLElement): void {
-  const s = states.get(el);
-  if (s?.timer !== undefined) { window.clearTimeout(s.timer); s.timer = undefined; }
-  if (owner !== el) return;
-  owner = null;
-  lastHidden = Date.now();
-  if (tipEl) {
-    delete tipEl.dataset.open;
-    const ids = (el.getAttribute("aria-describedby") ?? "").split(" ").filter((i) => i && i !== tipEl?.id);
-    if (ids.length) el.setAttribute("aria-describedby", ids.join(" "));
-    else el.removeAttribute("aria-describedby");
-  }
-}
-
-function schedule(el: HTMLElement): void {
-  const s = states.get(el);
-  if (!s) return;
-  if (s.timer !== undefined) window.clearTimeout(s.timer);
-  const warm = owner !== null || Date.now() - lastHidden < WARM_MS;
-  if (warm) { show(el); return; }
-  s.timer = window.setTimeout(() => { s.timer = undefined; show(el); }, SHOW_DELAY);
-}
-
-export const vTooltip: Directive<HTMLElement, TooltipValue> = {
-  mounted(el, binding) {
-    const enter = (): void => schedule(el);
-    const leave = (): void => hide(el);
-    const focus = (): void => { if (el.matches(":focus-visible")) show(el); };
-    const key = (ev: KeyboardEvent): void => { if (ev.key === "Escape" && owner === el) hide(el); };
-    el.addEventListener("pointerenter", enter);
-    el.addEventListener("pointerleave", leave);
-    el.addEventListener("pointerdown", leave);
-    el.addEventListener("focusin", focus);
-    el.addEventListener("focusout", leave);
-    el.addEventListener("keydown", key);
-    states.set(el, {
-      ...read(binding.value),
-      timer: undefined,
-      off: () => {
-        el.removeEventListener("pointerenter", enter);
-        el.removeEventListener("pointerleave", leave);
-        el.removeEventListener("pointerdown", leave);
-        el.removeEventListener("focusin", focus);
-        el.removeEventListener("focusout", leave);
-        el.removeEventListener("keydown", key);
-      },
-    });
-  },
-  updated(el, binding) {
-    const s = states.get(el);
-    if (!s) return;
-    Object.assign(s, read(binding.value));
-    if (owner === el) { if (s.text) show(el); else hide(el); }
-  },
-  beforeUnmount(el) {
-    hide(el);
-    states.get(el)?.off();
-    states.delete(el);
-  },
-};
-
-export default vTooltip;
+/**
+ * `v-tooltip`: a short hint shown on hover (after a short wait) and on
+ * keyboard focus, hidden on leave, blur or Escape. Use it instead of
+ * `title=`, which is slow, unstyled, never shows from the keyboard and is
+ * cut off on the canvas.
+ *
+ *   <Button v-tooltip="'Copy the prompt'" icon="pi-copy" aria-label="Copy" />
+ *   <span v-tooltip="{ text: 'Runs first', placement: 'right' }">…</span>
+ *   <Button v-tooltip="{ text: 'Copy to clipboard', kbd: 'Ctrl C' }" … />
+ *
+ * One tooltip element is shared by the whole page, so a thousand hints
+ * cost one node. State per element lives in a WeakMap (no expando keys).
+ */
+import type { Directive } from "vue";
+import { placeFloating, viewportSize, type Placement } from "./floating";
+import "./tooltip.css";
+
+export type TooltipValue =
+  | string
+  | null
+  | undefined
+  | {
+    text: string | null | undefined;
+    placement?: Placement | undefined;
+    /** A shortcut shown after the text, e.g. "Ctrl C". */
+    kbd?: string | undefined;
+  };
+
+interface State {
+  text: string;
+  kbd: string;
+  placement: Placement;
+  timer: number | undefined;
+  off: () => void;
+}
+
+const SHOW_DELAY = 450;
+/** Moving from one hint to the next within this window shows it at once. */
+const WARM_MS = 600;
+
+const states = new WeakMap<HTMLElement, State>();
+let tipEl: HTMLDivElement | null = null;
+let owner: HTMLElement | null = null;
+let lastHidden = 0;
+let uid = 0;
+
+function read(v: TooltipValue): { text: string; kbd: string; placement: Placement } {
+  if (v && typeof v === "object") return { text: v.text ?? "", kbd: v.kbd ?? "", placement: v.placement ?? "top" };
+  return { text: v ?? "", kbd: "", placement: "top" };
+}
+
+function tip(): HTMLDivElement {
+  if (tipEl && tipEl.isConnected) return tipEl;
+  tipEl = document.createElement("div");
+  tipEl.className = "wp-tooltip";
+  tipEl.id = `wp-tooltip-${++uid}`;
+  tipEl.setAttribute("role", "tooltip");
+  document.body.appendChild(tipEl);
+  return tipEl;
+}
+
+function show(el: HTMLElement): void {
+  const s = states.get(el);
+  if (!s || !s.text || !el.isConnected) return;
+  const t = tip();
+  t.textContent = s.text;
+  if (s.kbd) {
+    const k = document.createElement("kbd");
+    k.className = "wp-tooltip__kbd";
+    k.textContent = s.kbd;
+    t.append(" ", k);
+  }
+  t.dataset.open = "true";
+  owner = el;
+  const ids = (el.getAttribute("aria-describedby") ?? "").split(" ").filter(Boolean);
+  if (!ids.includes(t.id)) el.setAttribute("aria-describedby", [...ids, t.id].join(" "));
+  const at = placeFloating(el.getBoundingClientRect(), { width: t.offsetWidth, height: t.offsetHeight }, viewportSize(), {
+    placement: s.placement,
+  });
+  t.style.left = `${at.x}px`;
+  t.style.top = `${at.y}px`;
+  t.dataset.side = at.side;
+}
+
+function hide(el: HTMLElement): void {
+  const s = states.get(el);
+  if (s?.timer !== undefined) { window.clearTimeout(s.timer); s.timer = undefined; }
+  if (owner !== el) return;
+  owner = null;
+  lastHidden = Date.now();
+  if (tipEl) {
+    delete tipEl.dataset.open;
+    const ids = (el.getAttribute("aria-describedby") ?? "").split(" ").filter((i) => i && i !== tipEl?.id);
+    if (ids.length) el.setAttribute("aria-describedby", ids.join(" "));
+    else el.removeAttribute("aria-describedby");
+  }
+}
+
+function schedule(el: HTMLElement): void {
+  const s = states.get(el);
+  if (!s) return;
+  if (s.timer !== undefined) window.clearTimeout(s.timer);
+  const warm = owner !== null || Date.now() - lastHidden < WARM_MS;
+  if (warm) { show(el); return; }
+  s.timer = window.setTimeout(() => { s.timer = undefined; show(el); }, SHOW_DELAY);
+}
+
+export const vTooltip: Directive<HTMLElement, TooltipValue> = {
+  mounted(el, binding) {
+    const enter = (): void => schedule(el);
+    const leave = (): void => hide(el);
+    const focus = (): void => { if (el.matches(":focus-visible")) show(el); };
+    const key = (ev: KeyboardEvent): void => { if (ev.key === "Escape" && owner === el) hide(el); };
+    el.addEventListener("pointerenter", enter);
+    el.addEventListener("pointerleave", leave);
+    el.addEventListener("pointerdown", leave);
+    el.addEventListener("focusin", focus);
+    el.addEventListener("focusout", leave);
+    el.addEventListener("keydown", key);
+    states.set(el, {
+      ...read(binding.value),
+      timer: undefined,
+      off: () => {
+        el.removeEventListener("pointerenter", enter);
+        el.removeEventListener("pointerleave", leave);
+        el.removeEventListener("pointerdown", leave);
+        el.removeEventListener("focusin", focus);
+        el.removeEventListener("focusout", leave);
+        el.removeEventListener("keydown", key);
+      },
+    });
+  },
+  updated(el, binding) {
+    const s = states.get(el);
+    if (!s) return;
+    Object.assign(s, read(binding.value));
+    if (owner === el) { if (s.text) show(el); else hide(el); }
+  },
+  beforeUnmount(el) {
+    hide(el);
+    states.get(el)?.off();
+    states.delete(el);
+  },
+};
+
+export default vTooltip;

package/src/useDialogFocus.ts

@@ -1,73 +1,73 @@
-/**
- * Focus handling every dialog-like panel needs (Modal, Drawer): while open,
- * Escape calls `onEscape` and Tab stays inside the panel; on open, focus
- * moves in (`initial`, else the first control, else the panel itself); on
- * close, it goes back to where it was.
- */
-import { nextTick, onBeforeUnmount, watch, type Ref } from "vue";
-
-export const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), '
-  + 'textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
-
-export function focusablesIn(root: HTMLElement | null): HTMLElement[] {
-  return Array.from(root?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [])
-    .filter((el) => !el.closest("[hidden], [inert]"));
-}
-
-export interface DialogFocusOptions {
-  onEscape: () => void;
-  /** Where focus goes on open; defaults to the first control. */
-  initial?: (root: HTMLElement, controls: HTMLElement[]) => HTMLElement | null | undefined;
-  /** Keep Tab inside the panel (default). Off for a panel beside the page. */
-  trap?: () => boolean;
-}
-
-export function useDialogFocus(panel: Ref<HTMLElement | null>, isOpen: () => boolean, opts: DialogFocusOptions): void {
-  let returnTo: HTMLElement | null = null;
-
-  function onKeydown(e: KeyboardEvent): void {
-    if (e.key === "Escape") { opts.onEscape(); return; }
-    const root = panel.value;
-    if (e.key !== "Tab" || !root || opts.trap?.() === false) return;
-    const els = focusablesIn(root);
-    if (!els.length) { e.preventDefault(); root.focus(); return; }
-    const first = els[0];
-    const last = els[els.length - 1];
-    const at = document.activeElement;
-    const inside = at instanceof Node && root.contains(at);
-    if (e.shiftKey && (at === first || !inside)) { e.preventDefault(); last?.focus(); }
-    else if (!e.shiftKey && (at === last || !inside)) { e.preventDefault(); first?.focus(); }
-  }
-
-  async function opened(): Promise<void> {
-    returnTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    await nextTick();
-    const root = panel.value;
-    if (!root || root.contains(document.activeElement)) return;
-    const els = focusablesIn(root);
-    ((opts.initial ? opts.initial(root, els) : els[0]) ?? root).focus();
-  }
-
-  function closed(): void {
-    const el = returnTo;
-    returnTo = null;
-    if (el?.isConnected) el.focus();
-  }
-
-  watch(isOpen, (v, was) => {
-    if (typeof window === "undefined") return;
-    if (v) {
-      window.addEventListener("keydown", onKeydown);
-      void opened();
-    } else {
-      window.removeEventListener("keydown", onKeydown);
-      if (was) closed();
-    }
-  }, { immediate: true });
-
-  onBeforeUnmount(() => {
-    if (typeof window === "undefined") return;
-    window.removeEventListener("keydown", onKeydown);
-    if (isOpen()) closed();
-  });
-}
+/**
+ * Focus handling every dialog-like panel needs (Modal, Drawer): while open,
+ * Escape calls `onEscape` and Tab stays inside the panel; on open, focus
+ * moves in (`initial`, else the first control, else the panel itself); on
+ * close, it goes back to where it was.
+ */
+import { nextTick, onBeforeUnmount, watch, type Ref } from "vue";
+
+export const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), '
+  + 'textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+
+export function focusablesIn(root: HTMLElement | null): HTMLElement[] {
+  return Array.from(root?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [])
+    .filter((el) => !el.closest("[hidden], [inert]"));
+}
+
+export interface DialogFocusOptions {
+  onEscape: () => void;
+  /** Where focus goes on open; defaults to the first control. */
+  initial?: (root: HTMLElement, controls: HTMLElement[]) => HTMLElement | null | undefined;
+  /** Keep Tab inside the panel (default). Off for a panel beside the page. */
+  trap?: () => boolean;
+}
+
+export function useDialogFocus(panel: Ref<HTMLElement | null>, isOpen: () => boolean, opts: DialogFocusOptions): void {
+  let returnTo: HTMLElement | null = null;
+
+  function onKeydown(e: KeyboardEvent): void {
+    if (e.key === "Escape") { opts.onEscape(); return; }
+    const root = panel.value;
+    if (e.key !== "Tab" || !root || opts.trap?.() === false) return;
+    const els = focusablesIn(root);
+    if (!els.length) { e.preventDefault(); root.focus(); return; }
+    const first = els[0];
+    const last = els[els.length - 1];
+    const at = document.activeElement;
+    const inside = at instanceof Node && root.contains(at);
+    if (e.shiftKey && (at === first || !inside)) { e.preventDefault(); last?.focus(); }
+    else if (!e.shiftKey && (at === last || !inside)) { e.preventDefault(); first?.focus(); }
+  }
+
+  async function opened(): Promise<void> {
+    returnTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    await nextTick();
+    const root = panel.value;
+    if (!root || root.contains(document.activeElement)) return;
+    const els = focusablesIn(root);
+    ((opts.initial ? opts.initial(root, els) : els[0]) ?? root).focus();
+  }
+
+  function closed(): void {
+    const el = returnTo;
+    returnTo = null;
+    if (el?.isConnected) el.focus();
+  }
+
+  watch(isOpen, (v, was) => {
+    if (typeof window === "undefined") return;
+    if (v) {
+      window.addEventListener("keydown", onKeydown);
+      void opened();
+    } else {
+      window.removeEventListener("keydown", onKeydown);
+      if (was) closed();
+    }
+  }, { immediate: true });
+
+  onBeforeUnmount(() => {
+    if (typeof window === "undefined") return;
+    window.removeEventListener("keydown", onKeydown);
+    if (isOpen()) closed();
+  });
+}