@keyfunc/keybricks-ds 2.6.0 → 2.8.0

package/components/feedback/Modal.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 import { IconButton } from "../buttons/IconButton.jsx";
+import { modalOpen } from "./modal-behavior.js";
 
 /** Hover tooltip — 11px, inverted surface, 6px offset. Wraps its children. */
 export function Tooltip({ label, placement = "top", children, style }) {
@@ -21,20 +22,29 @@ export function Tooltip({ label, placement = "top", children, style }) {
   );
 }
 
-/** Centered modal dialog with scrim. width defaults to 440. */
-/** Modal dialog. A size region that defaults to lg (40px controls) whatever the page behind it uses — a dialog does not compete for space; pass `size` to override. 24px padding, footer buttons 8px apart. */
-export function Modal({ open, title, subtitle, onClose, footer, width = 440, size = "lg", children, style }) {
+/** Modal dialog. A size region that defaults to lg (40px controls) whatever the page behind it uses — a dialog does not compete for space; pass `size` to override. 24px padding, footer buttons 8px apart.
+ *  Keyboard and focus (always): focus moves into the dialog ([data-autofocus] first) and Tab stays inside it; on close focus returns to where it was.
+ *  Options (defaults keep the usual dialog): closeOnEsc · closeOnScrim · showClose · lockScroll · scrim · alert (role="alertdialog" for confirmations) · zIndex.
+ *  onClose(reason): "close" (×) | "esc" | "scrim". */
+export function Modal({ open, title, subtitle, onClose, footer, width = 440, size = "lg", alert, closeOnEsc = true, closeOnScrim = true, showClose = true, lockScroll = true, scrim = true, autoFocus = true, zIndex, closeLabel = "Close", children, style }) {
+  const panel = React.useRef(null);
+  const uid = React.useId();
+  const opts = React.useRef({});
+  opts.current.closeOnEsc = closeOnEsc;
+  opts.current.onEsc = () => onClose && onClose("esc");
+  React.useEffect(() => { if (!open) return undefined; return modalOpen(panel.current, Object.assign(opts.current, { lockScroll, autoFocus })); }, [open]);
   if (!open) return null;
+  const close = (reason) => onClose && onClose(reason);
   return (
-    <div style={{ position: "fixed", inset: 0, zIndex: "var(--z-modal)", background: "var(--bg-scrim)", display: "flex", alignItems: "center", justifyContent: "center", animation: "kb-fade-in var(--dur-fast) var(--ease-out)" }} onClick={onClose}>
-      <div role="dialog" aria-modal="true" data-size={size} onClick={(e) => e.stopPropagation()}
-        style={{ width, maxWidth: "92vw", background: "var(--bg-raised)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-card)", boxShadow: "var(--shadow-modal)", animation: "kb-rise var(--dur) var(--ease-out)", ...style }}>
+    <div style={{ position: "fixed", inset: 0, zIndex: zIndex ?? "var(--z-modal)", background: scrim ? "var(--bg-scrim)" : "transparent", display: "flex", alignItems: "center", justifyContent: "center", animation: "kb-fade-in var(--dur-fast) var(--ease-out)" }} onClick={closeOnScrim ? () => close("scrim") : undefined}>
+      <div ref={panel} role={alert ? "alertdialog" : "dialog"} aria-modal="true" aria-labelledby={uid + "-t"} tabIndex={-1} data-size={size} onClick={(e) => e.stopPropagation()}
+        style={{ width, maxWidth: "92vw", maxHeight: "92vh", overflow: "auto", boxSizing: "border-box", outline: "none", background: "var(--bg-raised)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-card)", boxShadow: "var(--shadow-modal)", animation: "kb-rise var(--dur) var(--ease-out)", ...style }}>
         <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, padding: "24px 24px 0" }}>
-          <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
-            <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-md)", lineHeight: "var(--leading-md)", letterSpacing: "var(--tracking-md)", color: "var(--text-heading)" }}>{title}</span>
+          <div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
+            <span id={uid + "-t"} style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-md)", lineHeight: "var(--leading-md)", letterSpacing: "var(--tracking-md)", color: "var(--text-heading)", overflowWrap: "anywhere" }}>{title}</span>
             {subtitle ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-secondary)" }}>{subtitle}</span> : null}
           </div>
-          <IconButton icon="x" onClick={onClose} label="Close" style={{ margin: "calc((var(--leading-md) - var(--control-h)) / 2) -6px 0 0" }} />
+          {showClose ? <IconButton icon="x" onClick={() => close("close")} label={closeLabel} style={{ margin: "calc((var(--leading-md) - var(--control-h)) / 2) -6px 0 0" }} /> : null}
         </div>
         {children ? <div style={{ padding: "20px 24px 0" }}>{children}</div> : null}
         <div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--control-gap)", padding: 24 }}>{footer}</div>
@@ -43,28 +53,48 @@ export function Modal({ open, title, subtitle, onClose, footer, width = 440, siz
   );
 }
 
-const toastTones = { success: { icon: "circle-check", color: "var(--success-strong)" }, danger: { icon: "triangle-alert", color: "var(--danger)" }, warning: { icon: "triangle-alert", color: "var(--warning)" }, info: { icon: "info", color: "var(--action-primary)" } };
+const toastTones = { success: { icon: "circle-check", bg: "var(--success-bg)", border: "var(--success)", fg: "var(--success-text)" }, danger: { icon: "triangle-alert", bg: "var(--danger-bg)", border: "var(--danger)", fg: "var(--danger-text)" }, warning: { icon: "triangle-alert", bg: "var(--warning-bg)", border: "var(--warning)", fg: "var(--warning-text)" }, info: { icon: "info", bg: "var(--info-bg)", border: "var(--focus-border)", fg: "var(--info-fg)" } };
 
-/** Single toast row. */
-export function Toast({ tone = "success", title, meta, onClose, style }) {
-  const t = toastTones[tone];
+/** Single toast row — tinted: tone wash over --bg-raised, solid tone border, tone-coloured icon, title and dismiss. */
+export function Toast({ tone = "success", title, meta, icon, count, closeLabel = "Dismiss", onClose, children, style }) {
+  const t = toastTones[tone] || toastTones.info;
   return (
-    <div style={{ display: "flex", alignItems: "flex-start", gap: 10, minWidth: 280, maxWidth: 380, background: "var(--bg-raised)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-menu)", padding: "12px 12px 12px 14px", animation: "kb-toast-in var(--dur) var(--ease-out)", ...style }}>
-      <span style={{ color: t.color, display: "inline-flex", alignItems: "center", flexShrink: 0, height: "var(--leading-base)" }}><Icon name={t.icon} size={16} /></span>
+    <div role={tone === "danger" || tone === "warning" ? "alert" : "status"} style={{ display: "flex", alignItems: "flex-start", gap: 10, minWidth: 280, maxWidth: 380, backgroundColor: "var(--bg-raised)", backgroundImage: `linear-gradient(${t.bg}, ${t.bg})`, border: `1px solid ${t.border}`, borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-menu)", padding: "12px 12px 12px 14px", animation: "kb-toast-in var(--dur) var(--ease-out)", ...style }}>
+      <span style={{ color: t.fg, display: "inline-flex", alignItems: "center", flexShrink: 0, height: "var(--leading-base)" }}>{icon || <Icon name={t.icon} size={16} />}</span>
       <div style={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }}>
-        <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{title}</span>
-        {meta ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-secondary)" }}>{meta}</span> : null}
+        <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: t.fg, overflowWrap: "anywhere" }}>{children ?? title}{count > 1 ? <span style={{ color: "var(--text-secondary)", fontWeight: "var(--weight-regular)", fontVariantNumeric: "tabular-nums" }}> × {count}</span> : null}</span>
+        {meta ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-body)" }}>{meta}</span> : null}
       </div>
-      {onClose ? <IconButton icon="x" size="sm" muted onClick={onClose} label="Dismiss" style={{ margin: "-2px 0" }} /> : null}
+      {onClose ? <IconButton icon="x" size="sm" muted onClick={onClose} label={closeLabel} style={{ margin: "-2px 0", color: t.fg }} /> : null}
     </div>
   );
 }
 
-/** Fixed bottom-right stack of toasts. */
-export function ToastStack({ toasts = [], onDismiss, style }) {
+const STACK_PLACE = {
+  "top-center": (o) => ({ top: o, left: "50%", transform: "translateX(-50%)", alignItems: "center" }),
+  "top-right": (o) => ({ top: o, right: o, alignItems: "flex-end" }),
+  "bottom-right": (o) => ({ bottom: o, right: o, alignItems: "flex-end" }),
+  "bottom-center": (o) => ({ bottom: o, left: "50%", transform: "translateX(-50%)", alignItems: "center" }),
+};
+function StackItem({ t, duration, onDismiss }) {
+  const [paused, setPaused] = React.useState(false);
+  const ms = t.duration ?? duration;
+  React.useEffect(() => { if (paused || !(ms > 0)) return undefined; const h = setTimeout(() => onDismiss && onDismiss(t.id, "timeout"), ms); return () => clearTimeout(h); }, [paused, ms, t.count, t.id]);
+  const icon = typeof t.icon === "string" ? <Icon name={t.icon} size={16} /> : t.icon;
   return (
-    <div style={{ position: "fixed", right: 24, bottom: 24, zIndex: "var(--z-toast)", display: "flex", flexDirection: "column", gap: 8, ...style }}>
-      {toasts.map((t) => <Toast key={t.id} tone={t.tone} title={t.title} meta={t.meta} onClose={() => onDismiss && onDismiss(t.id)} />)}
+    <div className={t.className} style={{ maxWidth: "92vw" }} onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)} onFocus={() => setPaused(true)} onBlur={() => setPaused(false)}>
+      <Toast tone={t.tone} title={t.title} meta={t.meta} icon={icon} count={t.count} closeLabel={t.closeLabel} style={t.style} onClose={t.dismissible === false ? undefined : () => onDismiss && onDismiss(t.id, "close")}>{t.content}</Toast>
+    </div>
+  );
+}
+
+/** Fixed stack of toasts. placement: "bottom-right" (default) | "top-center" | "top-right" | "bottom-center"; offset from the edges (default 24).
+ *  duration (ms, default 0 = stay) auto-dismisses — paused while the pointer or focus is on a toast, restarted when its count changes.
+ *  Items: { id, tone, title, meta, content, icon, count, duration, dismissible, closeLabel, className, style }. onDismiss(id, "close" | "timeout"). */
+export function ToastStack({ toasts = [], onDismiss, placement = "bottom-right", offset = 24, duration = 0, zIndex, style }) {
+  return (
+    <div style={{ position: "fixed", zIndex: zIndex ?? "var(--z-toast)", display: "flex", flexDirection: "column", gap: 8, ...(STACK_PLACE[placement] || STACK_PLACE["bottom-right"])(offset), ...style }}>
+      {toasts.map((t) => <StackItem key={t.id} t={t} duration={duration} onDismiss={onDismiss} />)}
     </div>
   );
 }

package/components/feedback/Modal.vue

@@ -1,19 +1,37 @@
 <script setup>
 import { px } from '../px.js'
+import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
 import IconButton from '../buttons/IconButton.vue'
+import { modalOpen } from './modal-behavior.js'
 // Modal dialog. A size region that defaults to lg (40px controls) whatever the page behind it uses — a dialog does not compete for space; pass `size` to override. 24px padding, footer buttons 8px apart.
-defineProps({ open: Boolean, title: String, subtitle: String, width: { type: [Number, String], default: 440 }, size: { type: String, default: 'lg' }, style: Object })
+// Keyboard and focus (always): focus moves into the dialog ([data-autofocus] first) and Tab stays inside it; on close focus returns to where it was.
+// Options (defaults keep the usual dialog): closeOnEsc · closeOnScrim · showClose · lockScroll · scrim · alert (role="alertdialog") · zIndex. Emits close(reason): 'close' (×) | 'esc' | 'scrim'.
+// Slots: default (body), #footer, #title (instead of the title prop).
+const props = defineProps({ open: Boolean, title: String, subtitle: String, width: { type: [Number, String], default: 440 }, size: { type: String, default: 'lg' }, alert: Boolean, closeOnEsc: { type: Boolean, default: true }, closeOnScrim: { type: Boolean, default: true }, showClose: { type: Boolean, default: true }, lockScroll: { type: Boolean, default: true }, scrim: { type: Boolean, default: true }, autoFocus: { type: Boolean, default: true }, zIndex: [Number, String], closeLabel: { type: String, default: 'Close' }, style: Object })
 const emit = defineEmits(['close'])
+let seed = 0
+const uid = 'kb-modal-' + Math.random().toString(36).slice(2, 8) + (++seed)
+const panel = ref(null)
+const opts = { onEsc: () => emit('close', 'esc') }
+let cleanup = null
+watch(() => props.closeOnEsc, (v) => { opts.closeOnEsc = v }, { immediate: true })
+watch(() => props.open, async (v) => {
+  if (cleanup) { cleanup(); cleanup = null }
+  if (!v) return
+  await nextTick()
+  if (props.open && panel.value) cleanup = modalOpen(panel.value, Object.assign(opts, { lockScroll: props.lockScroll, autoFocus: props.autoFocus }))
+}, { immediate: true })
+onBeforeUnmount(() => { if (cleanup) cleanup() })
 </script>
 <template>
-  <div v-if="open" style="position:fixed;inset:0;z-index:var(--z-modal);background:var(--bg-scrim);display:flex;align-items:center;justify-content:center;animation:kb-fade-in var(--dur-fast) var(--ease-out)" @click="emit('close')">
-    <div role="dialog" aria-modal="true" :data-size="size" @click.stop :style="{ width: px(width), maxWidth: '92vw', background: 'var(--bg-raised)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxShadow: 'var(--shadow-modal)', animation: 'kb-rise var(--dur) var(--ease-out)', ...style }">
+  <div v-if="open" :style="{ position: 'fixed', inset: 0, zIndex: zIndex ?? 'var(--z-modal)', background: scrim ? 'var(--bg-scrim)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', animation: 'kb-fade-in var(--dur-fast) var(--ease-out)' }" @click="closeOnScrim && emit('close', 'scrim')">
+    <div ref="panel" :role="alert ? 'alertdialog' : 'dialog'" aria-modal="true" :aria-labelledby="uid + '-t'" tabindex="-1" :data-size="size" @click.stop :style="{ width: px(width), maxWidth: '92vw', maxHeight: '92vh', overflow: 'auto', boxSizing: 'border-box', outline: 'none', background: 'var(--bg-raised)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxShadow: 'var(--shadow-modal)', animation: 'kb-rise var(--dur) var(--ease-out)', ...style }">
       <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 24px 0">
-        <div style="display:flex;flex-direction:column;gap:2px">
-          <span style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-md);line-height:var(--leading-md);letter-spacing:var(--tracking-md);color:var(--text-heading)">{{ title }}</span>
+        <div style="display:flex;flex-direction:column;gap:2px;min-width:0">
+          <span :id="uid + '-t'" style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-md);line-height:var(--leading-md);letter-spacing:var(--tracking-md);color:var(--text-heading);overflow-wrap:anywhere"><slot name="title">{{ title }}</slot></span>
           <span v-if="subtitle" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary)">{{ subtitle }}</span>
         </div>
-        <IconButton icon="x" label="Close" :style="{ margin: 'calc((var(--leading-md) - var(--control-h)) / 2) -6px 0 0' }" @click="emit('close')" />
+        <IconButton v-if="showClose" icon="x" :label="closeLabel" :style="{ margin: 'calc((var(--leading-md) - var(--control-h)) / 2) -6px 0 0' }" @click="emit('close', 'close')" />
       </div>
       <div v-if="$slots.default" style="padding:20px 24px 0"><slot /></div>
       <div style="display:flex;justify-content:flex-end;gap:var(--control-gap);padding:24px"><slot name="footer" /></div>

package/components/feedback/Toast.vue

@@ -2,18 +2,18 @@
 import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
 import IconButton from '../buttons/IconButton.vue'
-const toastTones = { success: { icon: 'circle-check', color: 'var(--success-strong)' }, danger: { icon: 'triangle-alert', color: 'var(--danger)' }, warning: { icon: 'triangle-alert', color: 'var(--warning)' }, info: { icon: 'info', color: 'var(--action-primary)' } }
-const props = defineProps({ tone: { type: String, default: 'success' }, title: String, meta: String, dismissible: Boolean, closeLabel: { type: String, default: 'Dismiss' }, style: Object })
+const toastTones = { success: { icon: 'circle-check', bg: 'var(--success-bg)', border: 'var(--success)', fg: 'var(--success-text)' }, danger: { icon: 'triangle-alert', bg: 'var(--danger-bg)', border: 'var(--danger)', fg: 'var(--danger-text)' }, warning: { icon: 'triangle-alert', bg: 'var(--warning-bg)', border: 'var(--warning)', fg: 'var(--warning-text)' }, info: { icon: 'info', bg: 'var(--info-bg)', border: 'var(--focus-border)', fg: 'var(--info-fg)' } }
+const props = defineProps({ tone: { type: String, default: 'success' }, title: String, meta: String, dismissible: Boolean, count: Number, closeLabel: { type: String, default: 'Dismiss' }, style: Object })
 const emit = defineEmits(['close'])
 const t = computed(() => toastTones[props.tone] || toastTones.info)
 </script>
 <template>
-  <div :style="{ display: 'flex', alignItems: 'flex-start', gap: '10px', minWidth: '280px', maxWidth: '380px', background: 'var(--bg-raised)', border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-menu)', padding: '12px 12px 12px 14px', animation: 'kb-toast-in var(--dur) var(--ease-out)', ...style }">
-    <span :style="{ color: t.color, display: 'inline-flex', alignItems: 'center', flexShrink: 0, height: 'var(--leading-base)' }"><slot name="icon"><Icon :name="t.icon" :size="16" /></slot></span>
+  <div :role="tone === 'danger' || tone === 'warning' ? 'alert' : 'status'" :style="{ display: 'flex', alignItems: 'flex-start', gap: '10px', minWidth: '280px', maxWidth: '380px', backgroundColor: 'var(--bg-raised)', backgroundImage: `linear-gradient(${t.bg}, ${t.bg})`, border: `1px solid ${t.border}`, borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-menu)', padding: '12px 12px 12px 14px', animation: 'kb-toast-in var(--dur) var(--ease-out)', ...style }">
+    <span :style="{ color: t.fg, display: 'inline-flex', alignItems: 'center', flexShrink: 0, height: 'var(--leading-base)' }"><slot name="icon"><Icon :name="t.icon" :size="16" /></slot></span>
     <div style="display:flex;flex-direction:column;flex:1;min-width:0">
-      <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading);overflow-wrap:anywhere"><slot>{{ title }}</slot></span>
-      <span v-if="meta" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary)">{{ meta }}</span>
+      <span :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', color: t.fg, overflowWrap: 'anywhere' }"><slot>{{ title }}</slot><span v-if="count > 1" style="color:var(--text-secondary);font-weight:var(--weight-regular);font-variant-numeric:tabular-nums"> × {{ count }}</span></span>
+      <span v-if="meta" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-body)">{{ meta }}</span>
     </div>
-    <IconButton v-if="dismissible" icon="x" size="sm" muted :label="closeLabel" :style="{ margin: '-2px 0' }" @click="emit('close')" />
+    <IconButton v-if="dismissible" icon="x" size="sm" muted :label="closeLabel" :style="{ margin: '-2px 0', color: t.fg }" @click="emit('close')" />
   </div>
 </template>

package/components/feedback/ToastStack.vue

@@ -1,11 +1,44 @@
 <script setup>
+import { computed, h, watch, onBeforeUnmount } from 'vue'
 import Toast from './Toast.vue'
-// Fixed bottom-right stack of toasts. toasts: [{ id, tone, title, meta }]. Emits dismiss(id).
-defineProps({ toasts: { type: Array, default: () => [] }, style: Object })
+import Icon from '../icons/Icon.vue'
+// Fixed stack of toasts. placement: 'bottom-right' (default) | 'top-center' | 'top-right' | 'bottom-center'; offset from the edges (default 24).
+// duration (ms, default 0 = stay) auto-dismisses — paused while the pointer or focus is on a toast, restarted when its count changes.
+// toasts: [{ id, tone, title, meta, content (string | VNode | () => VNode), icon (name | VNode), count, duration, dismissible, closeLabel, class, style }]. Emits dismiss(id, 'close' | 'timeout').
+const props = defineProps({ toasts: { type: Array, default: () => [] }, placement: { type: String, default: 'bottom-right' }, offset: { type: Number, default: 24 }, duration: { type: Number, default: 0 }, zIndex: [Number, String], style: Object })
 const emit = defineEmits(['dismiss'])
+const PLACE = {
+  'top-center': (o) => ({ top: o + 'px', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }),
+  'top-right': (o) => ({ top: o + 'px', right: o + 'px', alignItems: 'flex-end' }),
+  'bottom-right': (o) => ({ bottom: o + 'px', right: o + 'px', alignItems: 'flex-end' }),
+  'bottom-center': (o) => ({ bottom: o + 'px', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }),
+}
+const box = computed(() => ({ position: 'fixed', zIndex: props.zIndex ?? 'var(--z-toast)', display: 'flex', flexDirection: 'column', gap: '8px', ...(PLACE[props.placement] || PLACE['bottom-right'])(props.offset), ...props.style }))
+const timers = new Map(), seen = new Map(), paused = new Set()
+const ms = (t) => t.duration ?? props.duration
+function arm(t) {
+  clearTimeout(timers.get(t.id)); timers.delete(t.id)
+  if (paused.has(t.id) || !(ms(t) > 0)) return
+  timers.set(t.id, setTimeout(() => emit('dismiss', t.id, 'timeout'), ms(t)))
+}
+watch(() => props.toasts.map((t) => t.id + ':' + (t.count || 1) + ':' + ms(t)).join('|'), () => {
+  const ids = new Set()
+  for (const t of props.toasts) { ids.add(t.id); const sig = (t.count || 1) + ':' + ms(t); if (seen.get(t.id) !== sig) { seen.set(t.id, sig); arm(t) } }
+  for (const id of [...seen.keys()]) if (!ids.has(id)) { clearTimeout(timers.get(id)); timers.delete(id); seen.delete(id); paused.delete(id) }
+}, { immediate: true })
+const pause = (t) => { paused.add(t.id); clearTimeout(timers.get(t.id)); timers.delete(t.id) }
+const resume = (t) => { paused.delete(t.id); arm(t) }
+onBeforeUnmount(() => timers.forEach((x) => clearTimeout(x)))
+const Node = (p) => (typeof p.c === 'function' ? p.c() : p.c)
+const IconNode = (p) => (typeof p.c === 'string' ? h(Icon, { name: p.c, size: 16 }) : Node(p))
 </script>
 <template>
-  <div :style="{ position: 'fixed', right: '24px', bottom: '24px', zIndex: 'var(--z-toast)', display: 'flex', flexDirection: 'column', gap: '8px', ...style }">
-    <Toast v-for="t in toasts" :key="t.id" :tone="t.tone" :title="t.title" :meta="t.meta" dismissible @close="emit('dismiss', t.id)" />
+  <div :style="box">
+    <div v-for="t in toasts" :key="t.id" :class="t.class" style="max-width:92vw" @mouseenter="pause(t)" @mouseleave="resume(t)" @focusin="pause(t)" @focusout="resume(t)">
+      <Toast :tone="t.tone" :title="t.title" :meta="t.meta" :count="t.count" :dismissible="t.dismissible !== false" :close-label="t.closeLabel || 'Dismiss'" :style="t.style" @close="emit('dismiss', t.id, 'close')">
+        <template v-if="t.icon" #icon><IconNode :c="t.icon" /></template>
+        <template v-if="t.content != null" #default><Node :c="t.content" /></template>
+      </Toast>
+    </div>
   </div>
 </template>

package/components/feedback/feedback.prompt.md

@@ -33,3 +33,9 @@ Additions (not in the source file): `Tooltip`, `Modal`, `Toast`/`ToastStack`, `A
   Failed tasks retry up to 3 times with exponential backoff.
 </Accordion>
 ```
+
+**Rule:** notices = `Toast` / `ToastStack`, dialogs = `Modal`. Do not build another notice or dialog; please check with Felix before building a new component.
+
+`Modal` options: `closeOnEsc`, `closeOnScrim`, `showClose`, `lockScroll`, `scrim`, `autoFocus` (default true), `alert` for must-answer dialogs; `onClose(reason)`. Put `data-autofocus` on the control that should take focus. `ToastStack`: `placement`, `duration`, items with `count`.
+
+Vue only: imperative `Message` (`@keyfunc/keybricks-ds/vue/message`) and `MessageBox` (`@keyfunc/keybricks-ds/vue/message-box`) services, drop-in for most `ElMessage` / `ElMessageBox` calls. Message renders the Keybricks `Toast`; MessageBox renders a DS dialog with DS Buttons. Source lives outside `components/` in `_vue-services/` (Vue-only, so the React docs preview never loads it). Limits and Element Plus mapping: `_vue-services/MESSAGE_SERVICES.md`.

package/components/feedback/modal-behavior.js

@@ -0,0 +1,50 @@
+/* Modal keyboard + focus behaviour, shared by Modal.jsx and Modal.vue (framework-neutral).
+   While a dialog is open: focus moves into it ([data-autofocus] first, else the panel), Tab / Shift+Tab cycle inside it,
+   Esc closes only the topmost dialog, the page behind stops scrolling (counted, so stacked dialogs unlock once),
+   and on close focus returns to the element that had it. */
+const stack = [];
+let locks = 0, prevOverflow = "";
+const FOCUSABLE = 'button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';
+
+/** Call when the panel is in the DOM. Returns the cleanup to call on close / unmount. opts: { closeOnEsc, lockScroll, autoFocus, onEsc } */
+export function modalOpen(panel, opts) {
+  if (!panel || typeof document === "undefined") return () => {};
+  const entry = { panel, opts };
+  stack.push(entry);
+  const top = () => stack[stack.length - 1] === entry;
+  const prev = document.activeElement;
+  if (opts.lockScroll !== false && locks++ === 0) { prevOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; }
+  const onKey = (e) => {
+    if (!top()) return;
+    if (e.key === "Escape") {
+      if (e.isComposing) return;
+      e.preventDefault(); e.stopImmediatePropagation();
+      if (entry.opts.closeOnEsc !== false && entry.opts.onEsc) entry.opts.onEsc(e);
+      return;
+    }
+    if (e.key !== "Tab") return;
+    const list = [...panel.querySelectorAll(FOCUSABLE)].filter((n) => n.getClientRects().length);
+    if (!list.length) { e.preventDefault(); panel.focus(); return; }
+    const first = list[0], last = list[list.length - 1], at = document.activeElement;
+    if (e.shiftKey && (at === first || !panel.contains(at))) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && (at === last || !panel.contains(at))) { e.preventDefault(); first.focus(); }
+  };
+  const onFocusIn = (e) => { if (top() && !panel.contains(e.target)) panel.focus(); };
+  document.addEventListener("keydown", onKey, true);
+  document.addEventListener("focusin", onFocusIn);
+  if (opts.autoFocus !== false) {
+    const a = panel.querySelector("[data-autofocus]");
+    const t = (a && (a.matches(FOCUSABLE) ? a : a.querySelector(FOCUSABLE))) || panel;
+    try { t.focus({ preventScroll: true }); } catch (err) { t.focus(); }
+    if (t.select && t.tagName !== "BUTTON") t.select();
+  }
+  let done = false;
+  return () => {
+    if (done) return; done = true;
+    document.removeEventListener("keydown", onKey, true);
+    document.removeEventListener("focusin", onFocusIn);
+    const i = stack.indexOf(entry); if (i >= 0) stack.splice(i, 1);
+    if (opts.lockScroll !== false && --locks === 0) document.body.style.overflow = prevOverflow;
+    if (prev && prev.isConnected && prev.focus) prev.focus();
+  };
+}

package/components/forms/GlobalSearch.d.ts

@@ -0,0 +1,83 @@
+import * as React from "react";
+/** One searchable thing. kind groups it (Features 4 · Documents 5 · Dimension Members 3 · Actions 2 under All). */
+export interface GlobalSearchItem {
+  kind?: "feature" | "document" | "member" | "action";
+  title: string;
+  /** Second line, e.g. "Finance / Reports · updated 2h ago" */
+  sub?: string;
+  /** Right-hand meta, e.g. the document type */
+  meta?: string;
+  /** Glyph; defaults by kind (layout-grid · file-text · database · zap) */
+  icon?: string;
+  /** Documents only: category hue of the tile (--cat-<tone>-bg / --cat-<tone>) */
+  tone?: "source" | "join" | "transform" | "merge" | "output";
+  /** Matched after the title (path, kind, owner …), not highlighted */
+  keywords?: string[];
+  onSelect?: () => void;
+}
+export interface GlobalSearchStep { label: string; meta?: string; state: "done" | "running" | "pending" }
+/** Deep Search progress, pushed through the update callback of onDeepSearch. */
+export interface GlobalSearchDeepState {
+  status?: "running" | "done";
+  steps?: GlobalSearchStep[];
+  /** e.g. "42 s" */
+  elapsed?: string;
+  /** Paragraphs of the cited conclusion */
+  conclusion?: string | string[];
+  /** Source chip labels; their count is the citation count */
+  sources?: string[];
+  onOpenReport?: () => void;
+}
+/** Every string in the card. GLOBAL_SEARCH_LABELS.en is the default; .zh is the drafted Chinese (Prophet AI = 方知). {n} {q} {t} {i} are filled in. */
+export interface GlobalSearchLabels {
+  field?: string; input?: string; ask?: string; clear?: string;
+  /** All · Features · Documents · Data · Actions — in that order */
+  scopes?: string[];
+  groups?: { feature?: string; document?: string; member?: string; action?: string };
+  recentSearches?: string; recent?: string; prompts?: string; viewAll?: string;
+  results?: string; searching?: string; noResults?: string;
+  askRow?: string; askSub?: string; deepRow?: string; deepSub?: string;
+  deepTitle?: string; running?: string; doneStatus?: string; stepsDone?: string; stepOf?: string;
+  conclusion?: string; openReport?: string; followUp?: string;
+  select?: string; close?: string; privacy?: string;
+}
+/**
+ * Global Search — the TopBar instance of Search. Collapsed: a field styled like SearchInput (min 400px, grows to fit its placeholder, never truncated)
+ * with a ⌘K / Ctrl K hint. Exception to SearchInput: placeholder --text-secondary (≥4.5:1) and hover fills --bg-inset as well as darkening the border. Click or ⌘K / Ctrl K opens a 720px card over the top bar with a scrim. Keys: ↑↓ select (wraps) · ↵ open ·
+ * ⌘↵ / Ctrl Enter ask Prophet AI · Esc back (Deep Search) / close. It never renders AI answers: every AI entry closes the card and
+ * calls onAsk(question) so the separate Prophet AI panel can open.
+ */
+export interface GlobalSearchProps {
+  /** Collapsed field text (default labels.field) */
+  placeholder?: string;
+  /** Input placeholder inside the open card (default labels.input) */
+  inputPlaceholder?: string;
+  /** Local data, matched case-insensitively on title, then keywords */
+  items?: GlobalSearchItem[];
+  /** Remote search instead of items: runs after a 300ms typing pause; the card shows a spinner and skeleton rows until it resolves */
+  onQuery?: (term: string) => GlobalSearchItem[] | Promise<GlobalSearchItem[]>;
+  /** Chips in the empty state; clicking one searches immediately */
+  recentSearches?: string[];
+  /** Recently opened items in the empty state (3) */
+  recent?: GlobalSearchItem[];
+  /** "Try Asking Prophet AI" prompts in the empty state (3) */
+  prompts?: string[];
+  /** A result or recent item was chosen (the card closes) */
+  onSelect?: (item: GlobalSearchItem) => void;
+  /** Hand-off to the Prophet AI panel with the question ("" for an empty query). The card has already closed. */
+  onAsk?: (question: string) => void;
+  /** Shows the pinned Deep Search row. Called when it's chosen; push progress through update; return a cancel function (called on Esc / typing / close). */
+  onDeepSearch?: (term: string, update: (state: GlobalSearchDeepState) => void) => void | (() => void);
+  /** Receives the query as the user types */
+  onInput?: (value: string) => void;
+  labels?: GlobalSearchLabels;
+  /** Renders the open card in place (no field, no scrim) — for docs and specimens */
+  inline?: boolean;
+  defaultOpen?: boolean;
+  defaultQuery?: string;
+  /** Start in Deep Search mode with this state (specimens) */
+  defaultDeep?: GlobalSearchDeepState;
+  style?: React.CSSProperties;
+}
+export declare function GlobalSearch(props: GlobalSearchProps): JSX.Element;
+export declare const GLOBAL_SEARCH_LABELS: { en: Required<GlobalSearchLabels>; zh: Required<GlobalSearchLabels> };

package/components/forms/GlobalSearch.jsx

@@ -0,0 +1,172 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+import { IconButton } from "../buttons/IconButton.jsx";
+import { Button } from "../buttons/Button.jsx";
+import { Kbd } from "../display/Kbd.jsx";
+import { SegmentedControl } from "../tabs/SegmentedControl.jsx";
+import { Spinner, Skeleton } from "../feedback/Alert.jsx";
+import { GS_ICONS, gsLabels, gsFill, gsIsMac, gsMod, gsFilter, gsSplit, gsRows, gsPos, gsReveal, gsStyles as S, gsAiTile } from "./global-search.js";
+
+/** Default copy: .en (default) and .zh (drafted; Prophet AI = 方知). Pass one, or your own, as labels. */
+export { GLOBAL_SEARCH_LABELS } from "./global-search.js";
+
+function AiTile({ on }) {
+  const t = gsAiTile(on);
+  return <span style={t.outer}><span style={t.inner}><span style={t.tint} /><Icon name="prophet-sparkle" size={16} gradient={on} style={t.icon} /></span></span>;
+}
+
+/** Global Search (TopBar instance of Search). Collapsed: a quiet field with a ⌘K / Ctrl K hint. Open (click, ⌘K / Ctrl K): a 720px card over the
+ *  top bar with a scrim — input row, scope bar, grouped results, pinned Ask Prophet AI / Deep Search rows, keyboard footer.
+ *  It never shows AI answers: every AI entry closes the card and calls onAsk(question) so the Prophet AI panel can open.
+ *  items: local data matched by title / keywords; or onQuery(term) → items | Promise<items> (debounced 300ms).
+ *  onDeepSearch(term, update) runs Deep Search: push { status, steps, elapsed, conclusion, sources, onOpenReport } through update; return a cancel fn. */
+export function GlobalSearch({ placeholder, inputPlaceholder, items = [], onQuery, recentSearches = [], recent = [], prompts = [], onSelect, onAsk, onDeepSearch, onInput, labels, inline, defaultOpen, defaultQuery = "", defaultDeep, style }) {
+  const L = gsLabels(labels);
+  const [open, setOpen] = React.useState(!!(inline || defaultOpen));
+  const [q, setQ] = React.useState(defaultQuery);
+  const [scope, setScope] = React.useState(0);
+  const [found, setFound] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const [sel, setSel] = React.useState(0);
+  const [deep, setDeep] = React.useState(defaultDeep ? { query: defaultQuery, ...defaultDeep } : null);
+  const [stepsOpen, setStepsOpen] = React.useState(false);
+  const [hover, setHover] = React.useState(false);
+  const [pos, setPos] = React.useState({ left: 8, width: 720, maxH: 640 });
+  const fieldRef = React.useRef(null), inputRef = React.useRef(null), bodyRef = React.useRef(null);
+  const cancelDeep = React.useRef(null), now = React.useRef(!!defaultQuery);
+  const mac = React.useMemo(gsIsMac, []);
+  const term = q.trim();
+
+  const stopDeep = () => { if (cancelDeep.current) cancelDeep.current(); cancelDeep.current = null; };
+  const openCard = () => { if (inline) return; setPos(gsPos(fieldRef.current)); setOpen(true); };
+  const close = () => { if (inline) return; stopDeep(); setDeep(null); setOpen(false); if (fieldRef.current) fieldRef.current.focus(); };
+  const ask = (text) => { close(); if (onAsk) onAsk(text || ""); };
+  const startDeep = () => {
+    stopDeep(); setStepsOpen(false);
+    setDeep({ query: term, status: "running", steps: [] });
+    const c = onDeepSearch && onDeepSearch(term, (s) => setDeep((d) => (d ? { ...d, ...s } : d)));
+    cancelDeep.current = typeof c === "function" ? c : null;
+  };
+  const exitDeep = () => { stopDeep(); setDeep(null); };
+
+  React.useEffect(() => {
+    if (defaultOpen && !inline) setPos(gsPos(fieldRef.current));
+    if (inline) return;
+    const h = (e) => { if (gsMod(e, mac) && e.key && e.key.toLowerCase() === "k") { e.preventDefault(); setPos(gsPos(fieldRef.current)); setOpen(true); } };
+    document.addEventListener("keydown", h);
+    return () => { document.removeEventListener("keydown", h); stopDeep(); };
+  }, [inline, mac]);
+  React.useEffect(() => { if (open && !inline && inputRef.current) inputRef.current.focus(); }, [open]);
+  React.useEffect(() => {
+    if (!term) { setFound(null); setLoading(false); return; }
+    let live = true;
+    const run = () => {
+      setLoading(true);
+      Promise.resolve(onQuery ? onQuery(term) : gsFilter(items, term)).then((r) => { if (live) { setFound(r || []); setLoading(false); } }, () => { if (live) { setFound([]); setLoading(false); } });
+    };
+    let t = null;
+    if (now.current) { now.current = false; run(); } else t = setTimeout(run, 300);
+    return () => { live = false; if (t) clearTimeout(t); };
+  }, [term]);
+  React.useEffect(() => { setSel(0); }, [found, scope]);
+
+  const { rows, total } = gsRows({ term, found, loading, scope, recent, prompts, deep, hasDeep: !!onDeepSearch, L });
+  const cur = Math.max(0, Math.min(sel, rows.length - 1));
+  React.useEffect(() => { gsReveal(bodyRef.current, cur); }, [cur]);
+
+  const activate = (r) => {
+    if (!r) return;
+    if (r.kind === "result" || r.kind === "recent") { close(); if (onSelect) onSelect(r.item); if (r.item.onSelect) r.item.onSelect(); }
+    else if (r.kind === "prompt") ask(r.text);
+    else if (r.kind === "ask") ask(term);
+    else if (r.kind === "deep") startDeep();
+  };
+  const change = (v) => { if (deep) exitDeep(); setQ(v); setSel(0); if (onInput) onInput(v); };
+  const pickChip = (v) => { now.current = true; change(v); };
+  const key = (e) => {
+    if (e.nativeEvent && e.nativeEvent.isComposing) return;
+    const n = rows.length;
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") { if (!n) return; e.preventDefault(); setSel((cur + (e.key === "ArrowDown" ? 1 : -1) + n) % n); }
+    else if (e.key === "Enter") { e.preventDefault(); if (gsMod(e, mac)) ask(term); else activate(rows[cur]); }
+    else if (e.key === "Escape") { e.preventDefault(); if (deep) exitDeep(); else close(); }
+  };
+
+  const rowProps = (r) => ({ key: r.i, "data-gs-row": r.i, role: "option", "aria-selected": r.i === cur, style: S.row(r.i === cur), onMouseEnter: () => setSel(r.i), onMouseDown: (e) => e.preventDefault(), onClick: () => activate(r) });
+  const head = (r) => r.head ? <div key={"h" + r.i} style={S.head}><span>{r.head.label}</span>{r.head.more ? <button type="button" style={S.more} onMouseDown={(e) => e.preventDefault()} onClick={() => setScope(r.head.more.scope)}>{gsFill(L.viewAll, { n: r.head.more.n })}</button> : null}</div> : null;
+  const enter = (r) => (r.i === cur ? <Kbd keys={["enter"]} /> : null);
+  const itemRow = (r, mark) => {
+    const it = r.item, k = it.kind || "feature", parts = mark ? gsSplit(it.title, term) : [it.title, "", ""];
+    return <React.Fragment key={r.i}>{head(r)}<div {...rowProps(r)}>
+      <span style={S.tile(k === "document" ? it.tone : null)}><Icon name={it.icon || GS_ICONS[k]} size={16} /></span>
+      <span style={S.text}><span style={S.title}>{parts[0]}{parts[1] ? <span style={S.mark}>{parts[1]}</span> : null}{parts[2]}</span>{it.sub ? <span style={S.sub}>{it.sub}</span> : null}</span>
+      {it.meta ? <span style={S.meta}>{it.meta}</span> : null}{enter(r)}
+    </div></React.Fragment>;
+  };
+
+  let body;
+  if (deep) {
+    const steps = deep.steps || [], n = steps.length, ri = steps.findIndex((s) => s.state === "running"), run = steps[ri];
+    body = <div style={{ ...S.body, padding: 0 }}><div style={S.deep}>
+      <div style={S.deepHead}><span style={S.tile()}><Icon name="text-search" size={16} /></span><span style={S.text}><span style={S.deepTitle}>{gsFill(L.deepTitle, { q: deep.query })}</span><span style={S.sub}>{deep.status === "done" ? gsFill(L.doneStatus, { t: deep.elapsed || "", n: (deep.sources || []).length }) : L.running}</span></span></div>
+      {n ? <div style={S.steps}>
+        <button type="button" data-wash="" aria-expanded={stepsOpen} style={S.toggle} onClick={() => setStepsOpen(!stepsOpen)}>
+          {deep.status === "done" || !run
+            ? <><span style={{ ...S.stepIcon, color: "var(--success)" }}><Icon name="circle-check" size={14} /></span><span>{gsFill(L.stepsDone, { n })}</span><span style={S.muted}>{deep.elapsed}</span></>
+            : <><span style={S.stepIcon}><Spinner size={12} color="var(--text-secondary)" /></span><span>{run.label}…</span><span style={S.muted}>{gsFill(L.stepOf, { i: ri + 1, n })}</span></>}
+          <span style={S.grow} /><span style={{ ...S.stepIcon, color: "var(--text-muted)", transform: stepsOpen ? "rotate(180deg)" : "none" }}><Icon name="chevron-down" size={14} /></span>
+        </button>
+        {stepsOpen ? steps.map((s, i) => <div key={i} style={S.stepLine}>
+          <span style={{ ...S.stepIcon, color: "var(--success)" }}>{s.state === "done" ? <Icon name="circle-check" size={14} /> : s.state === "running" ? <Spinner size={12} color="var(--text-secondary)" /> : <span style={S.pending} />}</span>
+          <span style={{ color: s.state === "pending" ? "var(--text-muted)" : "var(--text-body)" }}>{s.label}</span>{s.meta ? <span style={S.muted}>{s.meta}</span> : null}
+        </div>) : null}
+      </div> : null}
+      {deep.conclusion ? <div style={S.conclusion}>
+        <span style={S.concLabel}>{L.conclusion}</span>
+        <div style={S.concText}>{[].concat(deep.conclusion).map((p, i) => <span key={i}>{p}</span>)}</div>
+        {deep.sources && deep.sources.length ? <div style={S.sources}>{deep.sources.map((s, i) => <span key={i} style={S.source}><Icon name="file-text" size={12} />{s}</span>)}</div> : null}
+        <div data-size="sm" style={S.actions}><Button variant="primary-soft" icon="file-text" onClick={deep.onOpenReport}>{L.openReport}</Button><Button variant="ghost" icon="prophet-sparkle" onClick={() => ask(deep.query)}>{L.followUp}</Button></div>
+      </div> : null}
+    </div></div>;
+  } else if (!term) {
+    body = <div ref={bodyRef} role="listbox" style={S.body}>
+      {recentSearches.length ? <><div style={S.head}><span>{L.recentSearches}</span></div><div style={S.chips}>{recentSearches.map((s) => <button key={s} type="button" style={S.chip} onMouseDown={(e) => e.preventDefault()} onClick={() => pickChip(s)}><span style={S.chipIcon}><Icon name="history" size={12} /></span>{s}</button>)}</div></> : null}
+      {rows.map((r) => r.kind === "recent" ? itemRow(r, false) : <React.Fragment key={r.i}>{head(r)}<div {...rowProps(r)}><AiTile on={r.i === cur} /><span style={S.text}><span style={S.title}>{r.text}</span></span>{enter(r)}</div></React.Fragment>)}
+    </div>;
+  } else {
+    const res = rows.filter((r) => r.kind === "result");
+    body = <div ref={bodyRef} role="listbox" style={S.body}>
+      {loading ? <><div style={S.head}><Skeleton width={64} height={10} /></div>{[0, 1, 2, 3].map((i) => <div key={i} style={S.skelRow}><Skeleton width={32} height={32} radius="var(--radius-md)" /><span style={S.skelText}><Skeleton width="46%" height={12} /><Skeleton width="28%" height={10} /></span></div>)}</>
+        : found && !res.length ? <div style={S.empty}>{L.noResults}</div> : res.map((r) => itemRow(r, true))}
+    </div>;
+  }
+
+  const pinned = !deep && term ? <div style={S.pinned}>{rows.filter((r) => r.kind === "ask" || r.kind === "deep").map((r) => r.kind === "ask"
+    ? <div {...rowProps(r)}><AiTile on={r.i === cur} /><span style={S.text}><span style={S.title}>{gsFill(L.askRow, { q: term })}</span><span style={S.sub}>{L.askSub}</span></span><Kbd keys={["mod", "enter"]} /></div>
+    : <div {...rowProps(r)}><span style={S.tile()}><Icon name="text-search" size={16} /></span><span style={S.text}><span style={S.title}>{gsFill(L.deepRow, { q: term })}</span><span style={S.sub}>{L.deepSub}</span></span>{enter(r)}</div>)}</div> : null;
+
+  const card = (
+    <div role="dialog" aria-modal={inline ? undefined : "true"} aria-label={L.input} data-size="md" onKeyDown={key} style={{ ...S.card, ...(inline ? null : S.cardFixed(pos)), ...(inline ? style : null) }}>
+      <div style={S.inputRow}>
+        <span style={S.lead}>{loading ? <Spinner size={14} color="var(--text-secondary)" /> : <Icon name={deep ? "text-search" : "search"} size={16} />}</span>
+        <input ref={inputRef} value={q} onChange={(e) => change(e.target.value)} placeholder={inputPlaceholder || L.input} aria-label={inputPlaceholder || L.input} style={S.input} />
+        <span style={S.trail}>{q ? <IconButton icon="x" muted label={L.clear} title={L.clear} onClick={() => { change(""); if (inputRef.current) inputRef.current.focus(); }} /> : null}<Button variant="ai" onClick={() => ask(term)}>{L.ask}</Button></span>
+      </div>
+      {term && !deep ? <div style={S.scope}><SegmentedControl size="sm" options={L.scopes} value={L.scopes[scope]} onChange={(v) => setScope(Math.max(0, L.scopes.indexOf(v)))} /><span style={S.count}>{loading ? L.searching : found ? gsFill(L.results, { n: total }) : ""}</span></div> : null}
+      {body}
+      {pinned}
+      <div style={S.footer}>
+        <span style={S.hints}><span style={S.hint}><Kbd keys={["↑", "↓"]} />{L.select}</span><span style={S.hint}><Kbd keys={["mod", "enter"]} />{L.ask}</span><span style={S.hint}><Kbd keys={["esc"]} />{L.close}</span></span>
+        <span style={S.hint}><Icon name="lock" size={12} />{L.privacy}</span>
+      </div>
+    </div>
+  );
+  if (inline) return card;
+  return (
+    <>
+      <button ref={fieldRef} type="button" data-field="" aria-haspopup="dialog" aria-expanded={open} onClick={openCard} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ ...S.field(hover), ...style }}>
+        <span style={S.fieldIcon}><Icon name="search" size={16} /></span><span style={S.fieldLabel}>{placeholder || L.field}</span><Kbd keys={["mod", "K"]} />
+      </button>
+      {open ? <><div style={S.scrim} onMouseDown={close} />{card}</> : null}
+    </>
+  );
+}