@keyfunc/keybricks-ds 2.6.0 → 2.7.0

package/components/display/Kbd.d.ts

@@ -1,7 +1,9 @@
 import * as React from "react";
-/** Keyboard shortcut keycap row (20px). Addition — for a power-user data tool's shortcut hints. */
+/** Keyboard shortcut keycap row (20px). Semantic keys adapt to the OS: "mod" → ⌘ on macOS / Ctrl elsewhere; also "alt"/"opt", "shift", "enter", "backspace", "ctrl", "esc". Any other string renders as-is. */
 export interface KbdProps {
   keys?: string[];
+  /** "auto" detects from the browser (default); force "mac" or "win" for docs/screenshots. */
+  platform?: "auto" | "mac" | "win";
   style?: React.CSSProperties;
 }
 export declare function Kbd(props: KbdProps): JSX.Element;

package/components/display/Kbd.jsx

@@ -1,11 +1,16 @@
 import React from "react";
 
-/** Keyboard shortcut hint, e.g. <Kbd keys={["⌘","K"]}/>. */
-export function Kbd({ keys = [], style }) {
+const KBD_MAP = { mod: ["⌘", "Ctrl"], cmd: ["⌘", "Ctrl"], ctrl: ["⌃", "Ctrl"], alt: ["⌥", "Alt"], opt: ["⌥", "Alt"], shift: ["⇧", "Shift"], enter: ["⏎", "Enter"], backspace: ["⌫", "Backspace"], esc: ["Esc", "Esc"] };
+const isMacPlatform = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test((navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || navigator.userAgent || "");
+const resolveKbd = (k, mac) => { const m = KBD_MAP[String(k).toLowerCase()]; return m ? m[mac ? 0 : 1] : k; };
+
+/** Keyboard shortcut hint. Use semantic keys so it adapts per OS: <Kbd keys={["mod","K"]}/> → ⌘ K on macOS, Ctrl K on Windows/Linux. Literal labels ("⌘", "F5") pass through unchanged. platform: "auto" (default) | "mac" | "win". */
+export function Kbd({ keys = [], platform = "auto", style }) {
+  const mac = platform === "auto" ? isMacPlatform() : platform === "mac";
   return (
     <span style={{ display: "inline-flex", gap: 3, ...style }}>
       {keys.map((k, i) => (
-        <span key={i} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 20, height: 20, padding: "0 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", border: "1px solid var(--border-control)", boxSizing: "border-box", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{k}</span>
+        <span key={i} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 20, height: 20, padding: "0 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", border: "1px solid var(--border-control)", boxSizing: "border-box", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{resolveKbd(k, mac)}</span>
       ))}
     </span>
   );

package/components/display/Kbd.vue

@@ -1,9 +1,13 @@
 <script setup>
-// Keyboard shortcut hint, e.g. <Kbd :keys="['⌘','K']"/>.
-defineProps({ keys: { type: Array, default: () => [] }, style: Object })
+// Keyboard shortcut hint. Semantic keys adapt per OS: <Kbd :keys="['mod','K']"/> → ⌘ K on macOS, Ctrl K on Windows/Linux. Literal labels pass through. platform: 'auto' | 'mac' | 'win'.
+import { computed } from 'vue'
+const props = defineProps({ keys: { type: Array, default: () => [] }, platform: { type: String, default: 'auto' }, style: Object })
+const KBD_MAP = { mod: ['⌘', 'Ctrl'], cmd: ['⌘', 'Ctrl'], ctrl: ['⌃', 'Ctrl'], alt: ['⌥', 'Alt'], opt: ['⌥', 'Alt'], shift: ['⇧', 'Shift'], enter: ['⏎', 'Enter'], backspace: ['⌫', 'Backspace'], esc: ['Esc', 'Esc'] }
+const isMac = () => typeof navigator !== 'undefined' && /mac|iphone|ipad|ipod/i.test((navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || navigator.userAgent || '')
+const labels = computed(() => { const mac = props.platform === 'auto' ? isMac() : props.platform === 'mac'; return props.keys.map(k => { const m = KBD_MAP[String(k).toLowerCase()]; return m ? m[mac ? 0 : 1] : k }) })
 </script>
 <template>
   <span :style="{ display: 'inline-flex', gap: '3px', ...style }">
-    <span v-for="(k, i) in keys" :key="i" style="display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-sm);background:var(--bg-inset);border:1px solid var(--border-control);box-sizing:border-box;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-secondary)">{{ k }}</span>
+    <span v-for="(k, i) in labels" :key="i" style="display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-sm);background:var(--bg-inset);border:1px solid var(--border-control);box-sizing:border-box;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-secondary)">{{ k }}</span>
   </span>
 </template>

package/components/display/display.prompt.md

@@ -26,5 +26,7 @@ Cards are flat (no shadow). IconTile hues: source green, join blue, transform or
 ```jsx
 <Tag onRemove={remove}>Financial Settings</Tag>
 <Divider label="OR"/>  <Divider vertical/>
-<Kbd keys={["⌘","K"]}/>
+<Kbd keys={["mod","K"]}/>   // ⌘ K on macOS, Ctrl K on Windows/Linux
 ```
+
+Kbd: write modifiers semantically — `mod` (⌘/Ctrl), `alt`/`opt` (⌥/Alt), `shift` (⇧/Shift), `enter` (⏎/Enter), `backspace`, `ctrl`, `esc`. Don't hard-code "⌘": Windows users have no Command key. `platform="mac"|"win"` forces one side for docs.

package/components/feedback/Modal.d.ts

@@ -27,6 +27,13 @@ export interface ToastProps {
   tone?: "success" | "danger" | "warning" | "info";
   title?: string;
   meta?: string;
+  /** Replaces the tone glyph (Vue: #icon slot) */
+  icon?: React.ReactNode;
+  /** Content in place of title (Vue: default slot) */
+  children?: React.ReactNode;
+  /** aria-label of the dismiss button (default "Dismiss") */
+  closeLabel?: string;
+  /** Shows the dismiss button */
   onClose?: () => void;
   style?: React.CSSProperties;
 }

package/components/feedback/Modal.jsx

@@ -43,19 +43,19 @@ 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, 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 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}</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>
   );
 }

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 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, 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 :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>
+      <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/feedback.prompt.md

@@ -33,3 +33,5 @@ Additions (not in the source file): `Tooltip`, `Modal`, `Toast`/`ToastStack`, `A
   Failed tasks retry up to 3 times with exponential backoff.
 </Accordion>
 ```
+
+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. Limits and Element Plus mapping: `MESSAGE_SERVICES.md`.

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}
+    </>
+  );
+}

package/components/forms/GlobalSearch.vue

@@ -0,0 +1,161 @@
+<script setup>
+// Global Search (TopBar instance of Search) — same props and behaviour as GlobalSearch.jsx; shared logic in ./global-search.js.
+// Collapsed: a quiet field with a ⌘K / Ctrl K hint. Open: a 720px card over the top bar with a scrim. Keys: ↑↓ select · ↵ open ·
+// ⌘↵ / Ctrl Enter ask Prophet AI · Esc back / close. It never shows AI answers: AI entries close the card and emit ask(question).
+// items (local, matched on title / keywords) or query(term) → items | Promise (300ms debounce). deepSearch(term, update) → cancel fn.
+// Events: select(item) · ask(question) · input(value).
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import Icon from '../icons/Icon.vue'
+import IconButton from '../buttons/IconButton.vue'
+import Button from '../buttons/Button.vue'
+import Kbd from '../display/Kbd.vue'
+import SegmentedControl from '../tabs/SegmentedControl.vue'
+import Spinner from '../feedback/Spinner.vue'
+import Skeleton from '../feedback/Skeleton.vue'
+import { GS_ICONS, gsLabels, gsFill, gsIsMac, gsMod, gsFilter, gsSplit, gsRows, gsPos, gsReveal, gsStyles as S, gsAiTile } from './global-search.js'
+
+const props = defineProps({
+  placeholder: String, inputPlaceholder: String, items: { type: Array, default: () => [] }, query: Function,
+  recentSearches: { type: Array, default: () => [] }, recent: { type: Array, default: () => [] }, prompts: { type: Array, default: () => [] },
+  deepSearch: Function, labels: Object, inline: Boolean, defaultOpen: Boolean, defaultQuery: { type: String, default: '' }, defaultDeep: Object, style: Object,
+})
+const emit = defineEmits(['select', 'ask', 'input'])
+const L = computed(() => gsLabels(props.labels))
+const open = ref(!!(props.inline || props.defaultOpen)), q = ref(props.defaultQuery), scope = ref(0)
+const found = ref(null), loading = ref(false), sel = ref(0), hover = ref(false), stepsOpen = ref(false)
+const deep = ref(props.defaultDeep ? { query: props.defaultQuery, ...props.defaultDeep } : null)
+const pos = ref({ left: 8, width: 720, maxH: 640 })
+const fieldEl = ref(null), inputEl = ref(null), bodyEl = ref(null)
+const mac = gsIsMac()
+let cancelDeep = null, now = !!props.defaultQuery, timer = null, token = 0
+const term = computed(() => q.value.trim())
+
+const stopDeep = () => { if (cancelDeep) cancelDeep(); cancelDeep = null }
+const openCard = () => { if (props.inline) return; pos.value = gsPos(fieldEl.value); open.value = true }
+const close = () => { if (props.inline) return; stopDeep(); deep.value = null; open.value = false; if (fieldEl.value) fieldEl.value.focus() }
+const ask = (text) => { close(); emit('ask', text || '') }
+const startDeep = () => {
+  stopDeep(); stepsOpen.value = false
+  deep.value = { query: term.value, status: 'running', steps: [] }
+  const c = props.deepSearch && props.deepSearch(term.value, (s) => { if (deep.value) deep.value = { ...deep.value, ...s } })
+  cancelDeep = typeof c === 'function' ? c : null
+}
+const exitDeep = () => { stopDeep(); deep.value = null }
+
+const onKeyK = (e) => { if (gsMod(e, mac) && e.key && e.key.toLowerCase() === 'k') { e.preventDefault(); openCard() } }
+onMounted(() => { if (!props.inline) { document.addEventListener('keydown', onKeyK); if (props.defaultOpen) pos.value = gsPos(fieldEl.value) } })
+onBeforeUnmount(() => { document.removeEventListener('keydown', onKeyK); stopDeep(); clearTimeout(timer) })
+watch(open, (v) => { if (v && !props.inline) nextTick(() => inputEl.value && inputEl.value.focus()) })
+
+const search = () => {
+  clearTimeout(timer); const t = term.value, my = ++token
+  if (!t) { found.value = null; loading.value = false; return }
+  const run = () => {
+    loading.value = true
+    Promise.resolve(props.query ? props.query(t) : gsFilter(props.items, t)).then((r) => { if (my === token) { found.value = r || []; loading.value = false } }, () => { if (my === token) { found.value = []; loading.value = false } })
+  }
+  if (now) { now = false; run() } else timer = setTimeout(run, 300)
+}
+watch(term, search, { immediate: true })
+watch([found, scope], () => { sel.value = 0 })
+
+const model = computed(() => gsRows({ term: term.value, found: found.value, loading: loading.value, scope: scope.value, recent: props.recent, prompts: props.prompts, deep: deep.value, hasDeep: !!props.deepSearch, L: L.value }))
+const rows = computed(() => model.value.rows)
+const cur = computed(() => Math.max(0, Math.min(sel.value, rows.value.length - 1)))
+const bodyRows = computed(() => rows.value.filter((r) => r.kind !== 'ask' && r.kind !== 'deep'))
+const pinRows = computed(() => rows.value.filter((r) => r.kind === 'ask' || r.kind === 'deep'))
+watch(cur, (i) => nextTick(() => gsReveal(bodyEl.value, i)))
+
+const activate = (r) => {
+  if (!r) return
+  if (r.kind === 'result' || r.kind === 'recent') { close(); emit('select', r.item); if (r.item.onSelect) r.item.onSelect() }
+  else if (r.kind === 'prompt') ask(r.text)
+  else if (r.kind === 'ask') ask(term.value)
+  else if (r.kind === 'deep') startDeep()
+}
+const change = (v) => { if (deep.value) exitDeep(); q.value = v; sel.value = 0; emit('input', v) }
+const pickChip = (v) => { now = true; change(v) }
+const clear = () => { change(''); if (inputEl.value) inputEl.value.focus() }
+const key = (e) => {
+  if (e.isComposing) return
+  const n = rows.value.length
+  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { if (!n) return; e.preventDefault(); sel.value = (cur.value + (e.key === 'ArrowDown' ? 1 : -1) + n) % n }
+  else if (e.key === 'Enter') { e.preventDefault(); if (gsMod(e, mac)) ask(term.value); else activate(rows.value[cur.value]) }
+  else if (e.key === 'Escape') { e.preventDefault(); if (deep.value) exitDeep(); else close() }
+}
+
+const parts = (r, mark) => (mark ? gsSplit(r.item.title, term.value) : [r.item.title, '', ''])
+const kindOf = (it) => it.kind || 'feature'
+const steps = computed(() => (deep.value && deep.value.steps) || [])
+const runIdx = computed(() => steps.value.findIndex((s) => s.state === 'running'))
+const deepDone = computed(() => !!deep.value && (deep.value.status === 'done' || runIdx.value < 0))
+const concl = computed(() => (deep.value && deep.value.conclusion ? [].concat(deep.value.conclusion) : null))
+const cardStyle = computed(() => ({ ...S.card, ...(props.inline ? props.style : S.cardFixed(pos.value)) }))
+const fieldStyle = computed(() => ({ ...S.field(hover.value), ...props.style }))
+const ai = (on) => gsAiTile(on)
+const scopeLabel = computed({ get: () => L.value.scopes[scope.value], set: (v) => { scope.value = Math.max(0, L.value.scopes.indexOf(v)) } })
+</script>
+<template>
+  <button v-if="!inline" ref="fieldEl" type="button" data-field="" aria-haspopup="dialog" :aria-expanded="open" @click="openCard" @mouseenter="hover = true" @mouseleave="hover = false" :style="fieldStyle">
+    <span :style="S.fieldIcon"><Icon name="search" :size="16" /></span><span :style="S.fieldLabel">{{ placeholder || L.field }}</span><Kbd :keys="['mod', 'K']" />
+  </button>
+  <div v-if="open && !inline" :style="S.scrim" @mousedown="close" />
+  <div v-if="open" role="dialog" :aria-modal="inline ? undefined : 'true'" :aria-label="L.input" data-size="md" @keydown="key" :style="cardStyle">
+    <div :style="S.inputRow">
+      <span :style="S.lead"><Spinner v-if="loading" :size="14" color="var(--text-secondary)" /><Icon v-else :name="deep ? 'text-search' : 'search'" :size="16" /></span>
+      <input ref="inputEl" :value="q" @input="change($event.target.value)" :placeholder="inputPlaceholder || L.input" :aria-label="inputPlaceholder || L.input" :style="S.input" />
+      <span :style="S.trail"><IconButton v-if="q" icon="x" muted :label="L.clear" :title="L.clear" @click="clear" /><Button variant="ai" @click="ask(term)">{{ L.ask }}</Button></span>
+    </div>
+    <div v-if="term && !deep" :style="S.scope"><SegmentedControl size="sm" :options="L.scopes" v-model="scopeLabel" /><span :style="S.count">{{ loading ? L.searching : found ? gsFill(L.results, { n: model.total }) : '' }}</span></div>
+
+    <div v-if="deep" :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>
+      <div v-if="steps.length" :style="S.steps">
+        <button type="button" data-wash="" :aria-expanded="stepsOpen" :style="S.toggle" @click="stepsOpen = !stepsOpen">
+          <template v-if="deepDone"><span :style="{ ...S.stepIcon, color: 'var(--success)' }"><Icon name="circle-check" :size="14" /></span><span>{{ gsFill(L.stepsDone, { n: steps.length }) }}</span><span :style="S.muted">{{ deep.elapsed }}</span></template>
+          <template v-else><span :style="S.stepIcon"><Spinner :size="12" color="var(--text-secondary)" /></span><span>{{ steps[runIdx].label }}…</span><span :style="S.muted">{{ gsFill(L.stepOf, { i: runIdx + 1, n: steps.length }) }}</span></template>
+          <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>
+        <template v-if="stepsOpen"><div v-for="(s, i) in steps" :key="i" :style="S.stepLine">
+          <span :style="{ ...S.stepIcon, color: 'var(--success)' }"><Icon v-if="s.state === 'done'" name="circle-check" :size="14" /><Spinner v-else-if="s.state === 'running'" :size="12" color="var(--text-secondary)" /><span v-else :style="S.pending" /></span>
+          <span :style="{ color: s.state === 'pending' ? 'var(--text-muted)' : 'var(--text-body)' }">{{ s.label }}</span><span v-if="s.meta" :style="S.muted">{{ s.meta }}</span>
+        </div></template>
+      </div>
+      <div v-if="concl" :style="S.conclusion">
+        <span :style="S.concLabel">{{ L.conclusion }}</span>
+        <div :style="S.concText"><span v-for="(p, i) in concl" :key="i">{{ p }}</span></div>
+        <div v-if="deep.sources && deep.sources.length" :style="S.sources"><span v-for="(s, i) in deep.sources" :key="i" :style="S.source"><Icon name="file-text" :size="12" />{{ s }}</span></div>
+        <div data-size="sm" :style="S.actions"><Button variant="primary-soft" icon="file-text" @click="deep.onOpenReport && deep.onOpenReport()">{{ L.openReport }}</Button><Button variant="ghost" icon="prophet-sparkle" @click="ask(deep.query)">{{ L.followUp }}</Button></div>
+      </div>
+    </div></div>
+
+    <div v-else ref="bodyEl" role="listbox" :style="S.body">
+      <template v-if="!term && recentSearches.length"><div :style="S.head"><span>{{ L.recentSearches }}</span></div><div :style="S.chips"><button v-for="s in recentSearches" :key="s" type="button" :style="S.chip" @mousedown.prevent @click="pickChip(s)"><span :style="S.chipIcon"><Icon name="history" :size="12" /></span>{{ s }}</button></div></template>
+      <template v-if="term && loading"><div :style="S.head"><Skeleton :width="'64px'" :height="'10px'" /></div><div v-for="i in 4" :key="i" :style="S.skelRow"><Skeleton :width="'32px'" :height="'32px'" radius="var(--radius-md)" /><span :style="S.skelText"><Skeleton width="46%" :height="'12px'" /><Skeleton width="28%" :height="'10px'" /></span></div></template>
+      <div v-else-if="term && found && !bodyRows.length" :style="S.empty">{{ L.noResults }}</div>
+      <template v-else><template v-for="r in bodyRows" :key="r.i">
+        <div v-if="r.head" :style="S.head"><span>{{ r.head.label }}</span><button v-if="r.head.more" type="button" :style="S.more" @mousedown.prevent @click="scope = r.head.more.scope">{{ gsFill(L.viewAll, { n: r.head.more.n }) }}</button></div>
+        <div :data-gs-row="r.i" role="option" :aria-selected="r.i === cur" :style="S.row(r.i === cur)" @mouseenter="sel = r.i" @mousedown.prevent @click="activate(r)">
+          <template v-if="r.kind === 'prompt'"><span :style="ai(r.i === cur).outer"><span :style="ai(r.i === cur).inner"><span :style="ai(r.i === cur).tint" /><Icon name="prophet-sparkle" :size="16" :gradient="r.i === cur" :style="ai(r.i === cur).icon" /></span></span><span :style="S.text"><span :style="S.title">{{ r.text }}</span></span></template>
+          <template v-else>
+            <span :style="S.tile(kindOf(r.item) === 'document' ? r.item.tone : null)"><Icon :name="r.item.icon || GS_ICONS[kindOf(r.item)]" :size="16" /></span>
+            <span :style="S.text"><span :style="S.title">{{ parts(r, r.kind === 'result')[0] }}<span v-if="parts(r, r.kind === 'result')[1]" :style="S.mark">{{ parts(r, r.kind === 'result')[1] }}</span>{{ parts(r, r.kind === 'result')[2] }}</span><span v-if="r.item.sub" :style="S.sub">{{ r.item.sub }}</span></span>
+            <span v-if="r.item.meta" :style="S.meta">{{ r.item.meta }}</span>
+          </template>
+          <Kbd v-if="r.i === cur" :keys="['enter']" />
+        </div>
+      </template></template>
+    </div>
+
+    <div v-if="!deep && term" :style="S.pinned">
+      <div v-for="r in pinRows" :key="r.i" :data-gs-row="r.i" role="option" :aria-selected="r.i === cur" :style="S.row(r.i === cur)" @mouseenter="sel = r.i" @mousedown.prevent @click="activate(r)">
+        <template v-if="r.kind === 'ask'"><span :style="ai(r.i === cur).outer"><span :style="ai(r.i === cur).inner"><span :style="ai(r.i === cur).tint" /><Icon name="prophet-sparkle" :size="16" :gradient="r.i === cur" :style="ai(r.i === cur).icon" /></span></span><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']" /></template>
+        <template v-else><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><Kbd v-if="r.i === cur" :keys="['enter']" /></template>
+      </div>
+    </div>
+    <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>
+</template>

package/components/forms/forms.prompt.md

@@ -27,3 +27,10 @@ Everything is 12px text in 36px controls; readOnly inputs go #fafafa; disabled =
 
 ## RelativeTimePicker
 Filter by "how long ago" (logs, monitoring, inbox): `<RelativeTimePicker value={{amount:1,unit:"Hour"}} onChange={(v, date) => …}/>` — a field-shaped trigger at the tier height; the dialog has an amount input and a unit select (`allowUnlimited` adds "Any time", which resolves to `null`). `labels` localises every string (unit labels: one string, or `{ one, other }` for plural languages); `formatValue` / `formatDate` override the summary and the preview. Vue: `v-model` + `@change(value, date)`.
+
+`GlobalSearch` — the TopBar search (TopBar renders it; pass props through `search`). Collapsed it's a field styled like SearchInput (surface fill, `--border-control` hairline, r8) with a ⌘K / Ctrl K hint — **GlobalSearch exception:** its placeholder is `--text-secondary` (≥4.5:1, the platform's main entry prompt) and hover fills `--bg-inset` as well as darkening the border to `--border-strong`. Plain `SearchInput` keeps its muted placeholder and border-only hover; open it's a 720px card: input row with `Button variant="ai"`, scope bar, grouped results (Features 4 · Documents 5 · Dimension Members 3 · Actions 2 under All), pinned "Ask Prophet AI" and "Deep Search" rows, keyboard footer. Keys: ↑↓ · ↵ open · ⌘↵ / Ctrl Enter ask Prophet AI · Esc back / close (Tab keeps normal focus order). It never shows AI answers — every AI entry closes the card and calls `onAsk(question)`.
+
+```jsx
+<GlobalSearch items={items} recent={recent} prompts={prompts} onSelect={open} onAsk={openProphetPanel}/>
+<GlobalSearch onQuery={(term) => api.search(term)} onDeepSearch={(term, update) => runDeep(term, update)} labels={GLOBAL_SEARCH_LABELS.zh}/>
+```