@keyfunc/keybricks-ds 2.5.1 → 2.7.0

package/components/feedback/_internal/MessageView.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { computed, h, isVNode, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import Toast from '../Toast.vue'
+import Icon from '../../icons/Icon.vue'
+import { contentNode } from './service-utils.js'
+
+const props = defineProps({ options: { type: Object, required: true } })
+const emit = defineEmits(['close', 'height'])
+const root = ref(null)
+const tone = computed(() => props.options.type === 'error' ? 'danger' : props.options.type)
+const Content = () => contentNode(props.options.message, props.options.dangerouslyUseHTMLString)
+const CustomIcon = () => typeof props.options.icon === 'string'
+  ? h(Icon, { name: props.options.icon, size: 16 })
+  : isVNode(props.options.icon) ? props.options.icon : h(props.options.icon)
+let timer
+let observer
+let paused = false
+function stop() { clearTimeout(timer) }
+function start() {
+  stop()
+  if (!paused && props.options.duration > 0) timer = setTimeout(() => emit('close'), props.options.duration)
+}
+function onEscape(event) {
+  if (event.key === 'Escape') emit('close')
+}
+watch(() => [props.options.restart, props.options.duration], start)
+onMounted(() => {
+  start()
+  const measure = () => emit('height', root.value.getBoundingClientRect().height)
+  measure()
+  if (typeof ResizeObserver !== 'undefined') {
+    observer = new ResizeObserver(measure)
+    observer.observe(root.value)
+  }
+  document.addEventListener('keydown', onEscape)
+})
+onBeforeUnmount(() => {
+  stop()
+  observer?.disconnect()
+  document.removeEventListener('keydown', onEscape)
+})
+</script>
+
+<template>
+  <div
+    :id="options.id"
+    ref="root"
+    :class="['kb-message', options.customClass, { 'kb-message--center': options.center, 'kb-message--plain': options.plain }]"
+    :role="options.type === 'error' || options.type === 'warning' ? 'alert' : 'status'"
+    :style="{ position: 'fixed', top: `${options.top}px`, left: '50%', transform: 'translateX(-50%)', zIndex: options.zIndex ?? 'var(--z-toast)', maxWidth: '92vw' }"
+    @mouseenter="paused = true; stop()"
+    @mouseleave="paused = false; start()"
+    @focusin="paused = true; stop()"
+    @focusout="paused = false; start()"
+  >
+    <Toast
+      :tone="tone"
+      :dismissible="options.showClose"
+      :close-label="options.closeLabel"
+      :style="{ minWidth: 'min(280px, 92vw)', maxWidth: '100%', boxSizing: 'border-box', ...(options.plain ? { boxShadow: 'none' } : {}) }"
+      @close="emit('close')"
+    >
+      <template v-if="options.icon" #icon><CustomIcon /></template>
+      <Content />
+      <span v-if="options.repeatNum > 1" class="kb-message__count"> × {{ options.repeatNum }}</span>
+    </Toast>
+  </div>
+</template>
+
+<style scoped>
+.kb-message--center { text-align: center; }
+.kb-message__count { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
+</style>

package/components/feedback/_internal/service-utils.js

@@ -0,0 +1,46 @@
+import { h, isVNode, render } from 'vue'
+
+// 默认按文本渲染，只有调用方显式开启时才渲染可信 HTML。
+export function contentNode(message, html = false) {
+  const value = typeof message === 'function' ? message() : message
+  if (isVNode(value) || Array.isArray(value)) return value
+  return html ? h('span', { innerHTML: String(value ?? '') }) : String(value ?? '')
+}
+
+export function resolveTarget(options = {}) {
+  const target = typeof options.appendTo === 'string'
+    ? document.querySelector(options.appendTo) : options.appendTo || document.body
+  if (!target) throw new Error('Keybricks: appendTo 未找到挂载目标')
+  return target
+}
+
+export function mountService(component, props, options = {}, appContext) {
+  const target = resolveTarget(options)
+  const container = document.createElement('div')
+  const vnode = h(component, props)
+  vnode.appContext = appContext || null
+  target.appendChild(container)
+  try {
+    render(vnode, container)
+  } catch (error) {
+    render(null, container)
+    container.remove()
+    throw error
+  }
+  return () => {
+    render(null, container)
+    container.remove()
+  }
+}
+
+let locks = 0
+let previousOverflow
+export function lockBody() {
+  if (locks++ === 0) {
+    previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+  }
+  return () => {
+    if (--locks === 0) document.body.style.overflow = previousOverflow
+  }
+}

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/feedback/message-box.d.ts

@@ -0,0 +1,69 @@
+import type { AppContext, Component, VNode } from 'vue';
+import type { MessageContent, MessageType } from './message.js';
+
+export type MessageBoxAction = 'confirm' | 'cancel' | 'close';
+export interface MessageBoxInputResult { value: string; action: MessageBoxAction; }
+export type MessageBoxResult = MessageBoxAction | MessageBoxInputResult;
+export interface MessageBoxOptions {
+  title?: MessageContent;
+  message?: MessageContent;
+  type?: MessageType | '';
+  icon?: string | Component | VNode;
+  width?: string | number;
+  size?: 'sm' | 'md' | 'lg';
+  customClass?: string;
+  modalClass?: string;
+  zIndex?: number;
+  appendTo?: string | HTMLElement;
+  modal?: boolean;
+  lockScroll?: boolean;
+  autofocus?: boolean;
+  center?: boolean;
+  roundButton?: boolean;
+  showClose?: boolean;
+  closeLabel?: string;
+  closeOnClickModal?: boolean;
+  closeOnPressEscape?: boolean;
+  distinguishCancelAndClose?: boolean;
+  dangerouslyUseHTMLString?: boolean;
+  showConfirmButton?: boolean;
+  showCancelButton?: boolean;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  confirmButtonClass?: string;
+  cancelButtonClass?: string;
+  confirmButtonLoading?: boolean;
+  cancelButtonLoading?: boolean;
+  confirmButtonDisabled?: boolean;
+  cancelButtonDisabled?: boolean;
+  showInput?: boolean;
+  inputValue?: string;
+  inputType?: string;
+  inputPlaceholder?: string;
+  inputPattern?: RegExp;
+  inputErrorMessage?: string;
+  inputValidator?: (value: string) => boolean | string | Promise<boolean | string>;
+  beforeClose?: (action: MessageBoxAction, instance: MessageBoxState, done: () => void) => void;
+  callback?: (result: MessageBoxResult, instance: MessageBoxState) => void;
+}
+export interface MessageBoxState extends MessageBoxOptions {
+  inputValue: string;
+  confirmButtonLoading: boolean;
+  cancelButtonLoading: boolean;
+  action?: MessageBoxAction;
+}
+export interface MessageBoxShortcut<Result = MessageBoxResult> {
+  (message: MessageContent, title?: MessageContent, options?: MessageBoxOptions, appContext?: AppContext | null): Promise<Result>;
+  (message: MessageContent, options?: MessageBoxOptions, appContext?: AppContext | null): Promise<Result>;
+}
+export interface MessageBoxService {
+  (options?: MessageBoxOptions | MessageContent, appContext?: AppContext | null): Promise<MessageBoxResult>;
+  alert: MessageBoxShortcut;
+  confirm: MessageBoxShortcut;
+  prompt: MessageBoxShortcut<MessageBoxInputResult>;
+  /** 清空队列，不结算已有 Promise，与 ElMessageBox.close 相同。 */
+  close(): void;
+  defaults: Partial<MessageBoxOptions>;
+}
+export declare const MessageBox: MessageBoxService;
+export default MessageBox;

package/components/feedback/message-box.js

@@ -0,0 +1,92 @@
+import { getCurrentInstance, isVNode, reactive } from 'vue'
+import MessageBoxView from './_internal/MessageBoxView.vue'
+import { mountService } from './_internal/service-utils.js'
+
+const queue = []
+let active
+let seed = 0
+
+function next() {
+  if (active || !queue.length) return
+  const entry = active = queue.shift()
+  try {
+    entry.dispose = mountService(MessageBoxView, {
+      options: entry.state,
+      onAction: action => requestAction(entry, action),
+    }, entry.state, entry.context)
+  } catch (error) {
+    active = undefined
+    entry.reject(error)
+    next()
+  }
+}
+
+function finish(entry, action) {
+  if (active !== entry || entry.closed) return
+  entry.closed = true
+  entry.dispose?.()
+  active = undefined
+  const result = entry.state.showInput ? { value: entry.state.inputValue, action } : action
+  try {
+    if (entry.state.callback) entry.state.callback(result, entry.state)
+    else if (action === 'confirm') entry.resolve(result)
+    else entry.reject(action === 'close' && !entry.state.distinguishCancelAndClose ? 'cancel' : action)
+  } finally {
+    next()
+  }
+}
+
+function requestAction(entry, action) {
+  if (entry.closed || active !== entry) return
+  entry.state.action = action
+  const done = () => finish(entry, action)
+  if (entry.state.beforeClose) entry.state.beforeClose(action, entry.state, done)
+  else done()
+}
+
+/** Vue 弹窗服务；队列内同一时刻只显示一个确认框。 */
+export function MessageBox(value = {}, appContext) {
+  if (typeof document === 'undefined') return Promise.reject(new Error('Keybricks MessageBox 需要浏览器环境'))
+  const options = typeof value === 'string' || typeof value === 'function' || isVNode(value) ? { message: value } : value
+  const state = reactive({
+    id: `kb-message-box-${++seed}`, title: '', message: '', type: '',
+    showClose: true, showConfirmButton: true, showCancelButton: false,
+    closeOnClickModal: true, closeOnPressEscape: true, lockScroll: true,
+    autofocus: true, inputValue: '', inputType: 'text', inputErrorMessage: '',
+    confirmButtonLoading: false, cancelButtonLoading: false,
+    confirmButtonDisabled: false, cancelButtonDisabled: false,
+    ...MessageBox.defaults, ...options,
+  })
+  return new Promise((resolve, reject) => {
+    queue.push({ state, resolve, reject, context: appContext || getCurrentInstance()?.appContext })
+    next()
+  })
+}
+
+for (const kind of ['alert', 'confirm', 'prompt']) {
+  MessageBox[kind] = (message, title, options, appContext) => {
+    if (title && typeof title === 'object' && !isVNode(title)) {
+      appContext = options
+      options = title
+      title = undefined
+    }
+    return MessageBox({
+      boxType: kind, showCancelButton: kind !== 'alert', showInput: kind === 'prompt',
+      closeOnClickModal: kind !== 'alert', closeOnPressEscape: kind !== 'alert',
+      ...options, message, ...(title === undefined ? {} : { title }),
+    }, appContext)
+  }
+}
+
+// 与 ElMessageBox.close 一致：清空所有弹窗，不触发用户操作回调或结算 Promise。
+MessageBox.close = () => {
+  queue.length = 0
+  if (active) {
+    const entry = active
+    active = undefined
+    entry.closed = true
+    entry.dispose?.()
+  }
+}
+export default MessageBox
+MessageBox.defaults = {}

package/components/feedback/message.d.ts

@@ -0,0 +1,37 @@
+import type { AppContext, Component, VNode } from 'vue';
+
+export type MessageType = 'success' | 'info' | 'warning' | 'error';
+export type MessageContent = string | VNode | (() => VNode);
+export interface MessageHandle { close(): void; }
+export interface MessageOptions {
+  message?: MessageContent;
+  type?: MessageType;
+  icon?: string | Component | VNode;
+  /** 毫秒；0 表示不自动关闭，默认 3000。 */
+  duration?: number;
+  showClose?: boolean;
+  closeLabel?: string;
+  offset?: number;
+  zIndex?: number;
+  customClass?: string;
+  center?: boolean;
+  plain?: boolean;
+  grouping?: boolean;
+  /** 仅允许可信且已由应用净化的 HTML。 */
+  dangerouslyUseHTMLString?: boolean;
+  appendTo?: string | HTMLElement;
+  onClose?: (handle: MessageHandle) => void;
+}
+export type MessageParams = MessageContent | MessageOptions;
+export interface MessageService {
+  (options?: MessageParams, appContext?: AppContext | null): MessageHandle;
+  success(options: MessageParams, appContext?: AppContext | null): MessageHandle;
+  info(options: MessageParams, appContext?: AppContext | null): MessageHandle;
+  warning(options: MessageParams, appContext?: AppContext | null): MessageHandle;
+  error(options: MessageParams, appContext?: AppContext | null): MessageHandle;
+  closeAll(type?: MessageType): void;
+  /** 在调用时读取；可随应用语言切换更新。 */
+  defaults: Partial<MessageOptions>;
+}
+export declare const Message: MessageService;
+export default Message;

package/components/feedback/message.js

@@ -0,0 +1,68 @@
+import { getCurrentInstance, isVNode, reactive } from 'vue'
+import MessageView from './_internal/MessageView.vue'
+import { mountService, resolveTarget } from './_internal/service-utils.js'
+
+const instances = []
+let seed = 0
+const normalize = value => typeof value === 'string' || typeof value === 'function' || isVNode(value)
+  ? { message: value } : { ...value }
+
+/** Vue 消息服务；样式由 Toast 提供，业务错误脱敏仍由应用处理。 */
+export function Message(value = {}, appContext) {
+  if (typeof document === 'undefined') return { close() {} }
+  const options = { type: 'info', duration: 3000, offset: 16, ...Message.defaults, ...normalize(value) }
+  const target = resolveTarget(options)
+  if (options.grouping) {
+    const existing = instances.find(item => item.target === target && item.options.message === options.message)
+    if (existing) {
+      existing.options.repeatNum++
+      existing.options.type = options.type
+      existing.options.restart++
+      return existing.handle
+    }
+  }
+  const state = reactive({ ...options, id: `kb-message-${++seed}`, repeatNum: 1, restart: 0, height: 0, top: options.offset })
+  let dispose
+  let closed = false
+  const handle = { close() {
+    if (closed) return
+    closed = true
+    instances.splice(instances.indexOf(entry), 1)
+    dispose?.()
+    reflow()
+    options.onClose?.(handle)
+  } }
+  const entry = { options: state, handle, target }
+  function reflow() {
+    const tops = new Map()
+    for (const item of instances) {
+      const target = item.target
+      item.options.top = Math.max(Number(item.options.offset) || 0, tops.get(target) || 0)
+      tops.set(target, item.options.top + item.options.height + 16)
+    }
+  }
+  instances.push(entry)
+  try {
+    dispose = mountService(MessageView, {
+      options: state, onClose: handle.close,
+      onHeight: height => { state.height = height; reflow() },
+    }, options, appContext || getCurrentInstance()?.appContext)
+  } catch (error) {
+    instances.splice(instances.indexOf(entry), 1)
+    reflow()
+    throw error
+  }
+  reflow()
+  return handle
+}
+
+for (const type of ['success', 'info', 'warning', 'error']) {
+  Message[type] = (value, appContext) => Message({ ...normalize(value), type }, appContext)
+}
+Message.closeAll = type => {
+  for (const entry of [...instances]) {
+    if (!type || entry.options.type === type) entry.handle.close()
+  }
+}
+export default Message
+Message.defaults = {}

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