@keyfunc/keybricks-ds 2.6.0 → 2.7.0

package/components/forms/global-search.js

@@ -0,0 +1,161 @@
+/* GlobalSearch — shared by GlobalSearch.jsx and GlobalSearch.vue: copy, matching, grouping, row model and styles.
+   Lengths are strings so the same style objects work in React and Vue. */
+import "../buttons/ai-button.js"; // registers --kb-ai-angle + kb-ai-spin for the Prophet AI tile
+
+export const GLOBAL_SEARCH_LABELS = {
+  en: {
+    field: "Search features, documents, or ask Prophet AI", input: "Search features, documents, data, or ask a question", ask: "Ask Prophet AI", clear: "Clear",
+    scopes: ["All", "Features", "Documents", "Data", "Actions"],
+    groups: { feature: "Features", document: "Documents", member: "Dimension Members", action: "Actions" },
+    recentSearches: "Recent Searches", recent: "Recent", prompts: "Try Asking Prophet AI", viewAll: "View all {n}",
+    results: "{n} results", searching: "Searching…", noResults: "No matches. Ask Prophet AI or try Deep Search.",
+    askRow: "Ask Prophet AI: “{q}”", askSub: "Answers from documents, models and data you can access",
+    deepRow: "Deep Search “{q}”", deepSub: "Multi-step search across document text, model data and logs you can access · about 1 min",
+    deepTitle: "Deep Search: {q}", running: "Running · about 1 min", doneStatus: "Done · {t} · {n} citations",
+    stepsDone: "Completed {n} steps", stepOf: "Step {i} of {n}", conclusion: "Conclusion", openReport: "Open Full Report", followUp: "Ask Follow-up",
+    select: "Select", close: "Close / Back", privacy: "Reads only content you can access",
+  },
+  zh: {
+    field: "搜索功能、文档，或问方知", input: "搜索功能、文档、数据，或直接提问", ask: "问方知", clear: "清除",
+    scopes: ["全部", "功能", "文档", "数据", "操作"],
+    groups: { feature: "功能", document: "文档", member: "维度成员", action: "操作" },
+    recentSearches: "最近搜索", recent: "最近访问", prompts: "试试问方知", viewAll: "查看全部 {n}",
+    results: "{n} 个结果", searching: "正在搜索…", noResults: "没有匹配的结果，可以问方知或使用深度搜索。",
+    askRow: "问方知：“{q}”", askSub: "基于你有权限的文档、模型和数据作答",
+    deepRow: "深度搜索“{q}”", deepSub: "在你有权限的文档正文、模型数据和日志中多步检索 · 约 1 分钟",
+    deepTitle: "深度搜索：{q}", running: "进行中 · 约 1 分钟", doneStatus: "已完成 · {t} · {n} 条引用",
+    stepsDone: "已完成 {n} 个步骤", stepOf: "第 {i} / {n} 步", conclusion: "结论", openReport: "打开完整报告", followUp: "就此追问",
+    select: "选择", close: "关闭 / 返回", privacy: "仅读取你有权限的内容",
+  },
+};
+
+export const GS_KINDS = ["feature", "document", "member", "action"];
+const LIMITS = { feature: 4, document: 5, member: 3, action: 2 };
+export const GS_ICONS = { feature: "layout-grid", document: "file-text", member: "database", action: "zap" };
+
+export const gsLabels = (labels) => ({ ...GLOBAL_SEARCH_LABELS.en, ...labels, groups: { ...GLOBAL_SEARCH_LABELS.en.groups, ...(labels && labels.groups) } });
+export const gsFill = (s, vars) => String(s).replace(/\{(\w+)\}/g, (_, k) => (vars[k] != null ? vars[k] : ""));
+export const gsIsMac = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test((navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || navigator.userAgent || "");
+/** The OS's command modifier: ⌘ on macOS, Ctrl elsewhere. */
+export const gsMod = (e, mac) => (mac ? e.metaKey : e.ctrlKey) && !e.altKey;
+
+/** Case-insensitive substring on the title, falling back to keywords (path, kind, owner …). */
+export function gsFilter(items, term) {
+  const n = term.trim().toLowerCase();
+  if (!n) return [];
+  return items.filter((it) => String(it.title).toLowerCase().includes(n) || (it.keywords || []).some((k) => String(k).toLowerCase().includes(n)));
+}
+/** [before, match, after] for highlighting the matched substring of a title. */
+export function gsSplit(title, term) {
+  const t = String(title), n = (term || "").trim().toLowerCase(), i = n ? t.toLowerCase().indexOf(n) : -1;
+  return i < 0 ? [t, "", ""] : [t.slice(0, i), t.slice(i, i + n.length), t.slice(i + n.length)];
+}
+
+/** Every selectable row in visual order (↑↓ walks this list), with group headers attached to the first row of each group. */
+export function gsRows({ term, found, loading, scope, recent, prompts, deep, hasDeep, L }) {
+  const rows = [];
+  let total = 0;
+  if (deep) return { rows, total };
+  if (!term) {
+    recent.forEach((item, j) => rows.push({ kind: "recent", item, head: j === 0 ? { label: L.recent } : null }));
+    prompts.forEach((text, j) => rows.push({ kind: "prompt", text, head: j === 0 ? { label: L.prompts } : null }));
+  } else {
+    if (found && !loading) {
+      const kinds = scope ? [GS_KINDS[scope - 1]] : GS_KINDS;
+      kinds.forEach((k) => {
+        const all = found.filter((it) => (it.kind || "feature") === k);
+        total += all.length;
+        const shown = scope ? all : all.slice(0, LIMITS[k]);
+        shown.forEach((item, j) => rows.push({ kind: "result", item, head: j === 0 ? { label: L.groups[k], more: !scope && all.length > shown.length ? { n: all.length, scope: GS_KINDS.indexOf(k) + 1 } : null } : null }));
+      });
+    }
+    rows.push({ kind: "ask" });
+    if (hasDeep) rows.push({ kind: "deep" });
+  }
+  rows.forEach((r, i) => { r.i = i; });
+  return { rows, total };
+}
+
+/** Where the open card goes: 8px left of the collapsed field, 8px from the top, over the TopBar. */
+export function gsPos(el) {
+  const vw = window.innerWidth, vh = window.innerHeight, r = el ? el.getBoundingClientRect() : { left: 16 };
+  const width = Math.min(720, vw - 16);
+  return { left: Math.max(8, Math.min(r.left - 8, vw - width - 8)), width, maxH: vh - 16 };
+}
+/** Keep the selected row visible inside the scrolling body (no scrollIntoView). */
+export function gsReveal(body, i) {
+  if (!body) return;
+  const el = body.querySelector('[data-gs-row="' + i + '"]');
+  if (!el) return;
+  const top = el.offsetTop - body.offsetTop, bottom = top + el.offsetHeight;
+  if (top < body.scrollTop) body.scrollTop = top - 6;
+  else if (bottom > body.scrollTop + body.clientHeight) body.scrollTop = bottom - body.clientHeight + 6;
+}
+
+const T = (s) => ({ fontFamily: "var(--font-sans)", fontSize: "var(--text-" + s + ")", lineHeight: "var(--leading-" + s + ")", letterSpacing: "var(--tracking-" + s + ")" });
+const ONE = { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" };
+const FADE = "opacity 300ms var(--ease-out)";
+const tileBase = { width: "32px", height: "32px", flexShrink: "0", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--radius-md)", border: "1px solid var(--border-card)", background: "var(--bg-surface)", color: "var(--text-secondary)", boxSizing: "border-box" };
+
+export const gsStyles = {
+  /* Collapsed field: SearchInput's box (surface fill, --border-control hairline, r8). GlobalSearch exception: the placeholder is
+     --text-secondary (≥4.5:1, it is the platform's main entry prompt) and hover also fills --bg-inset; border darkens via [data-field]. */
+  field: (hover) => ({ display: "inline-flex", alignItems: "center", gap: "8px", minWidth: "400px", width: "max-content", maxWidth: "100%", height: "32px", padding: "0 6px 0 10px", boxSizing: "border-box", borderRadius: "var(--radius-md)", background: hover ? "var(--bg-inset)" : "var(--bg-surface)", border: "1px solid var(--field-border, var(--border-control))", cursor: "pointer", transition: "var(--t-hover)", ...T("base"), color: "var(--text-secondary)", textAlign: "left", flexShrink: "1" }),
+  fieldIcon: { display: "inline-flex", color: "var(--text-muted)", flexShrink: "0" },
+  fieldLabel: { flex: "1 0 auto", paddingRight: "8px", whiteSpace: "nowrap" },
+  scrim: { position: "fixed", inset: "0", background: "var(--bg-scrim)", zIndex: "var(--z-modal)", animation: "kb-fade-in var(--dur) var(--ease-out)" },
+  card: { display: "flex", flexDirection: "column", width: "720px", maxWidth: "100%", background: "var(--bg-raised)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-modal)", overflow: "hidden", boxSizing: "border-box", color: "var(--text-body)", textAlign: "left" },
+  cardFixed: (p) => ({ position: "fixed", top: "8px", left: p.left + "px", width: p.width + "px", maxHeight: p.maxH + "px", zIndex: "var(--z-modal)", animation: "kb-rise var(--dur-slow) var(--ease-out)" }),
+  inputRow: { display: "flex", alignItems: "center", gap: "10px", height: "56px", padding: "0 16px", borderBottom: "1px solid var(--border-subtle)", flexShrink: "0", boxSizing: "border-box" },
+  lead: { display: "inline-flex", width: "16px", height: "16px", alignItems: "center", justifyContent: "center", color: "var(--text-secondary)", flexShrink: "0" },
+  input: { flex: "1 1 auto", minWidth: "0", border: "none", outline: "none", background: "transparent", padding: "0", ...T("md"), color: "var(--text-heading)" },
+  trail: { display: "flex", alignItems: "center", gap: "8px", flexShrink: "0" },
+  scope: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px", padding: "10px 16px", borderBottom: "1px solid var(--border-subtle)", flexShrink: "0" },
+  count: { ...T("xs"), color: "var(--text-muted)", whiteSpace: "nowrap" },
+  body: { flex: "1 1 auto", minHeight: "0", overflowY: "auto", padding: "6px", position: "relative" },
+  head: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px", padding: "8px 10px 4px", ...T("xs"), fontWeight: "var(--weight-medium)", color: "var(--text-muted)" },
+  more: { border: "none", background: "transparent", padding: "0", cursor: "pointer", ...T("xs"), color: "var(--link)" },
+  row: (on) => ({ display: "flex", alignItems: "center", gap: "10px", minHeight: "44px", padding: "6px 10px", boxSizing: "border-box", borderRadius: "var(--radius-md)", background: on ? "var(--bg-hover)" : "transparent", cursor: "pointer" }),
+  tile: (tone) => ({ ...tileBase, ...(tone ? { background: "var(--cat-" + tone + "-bg)", color: "var(--cat-" + tone + ")" } : null) }),
+  text: { display: "flex", flexDirection: "column", minWidth: "0", flex: "1 1 auto" },
+  title: { ...T("base"), ...ONE, color: "var(--text-heading)" },
+  mark: { color: "var(--action-primary)", fontWeight: "var(--weight-medium)" },
+  sub: { ...T("xs"), ...ONE, color: "var(--text-secondary)" },
+  meta: { ...T("xs"), color: "var(--text-muted)", whiteSpace: "nowrap", flexShrink: "0" },
+  chips: { display: "flex", flexWrap: "wrap", gap: "8px", padding: "4px 10px 8px" },
+  chip: { display: "inline-flex", alignItems: "center", gap: "6px", height: "28px", padding: "0 10px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-control)", background: "var(--bg-surface)", cursor: "pointer", ...T("xs"), color: "var(--text-body)", boxSizing: "border-box" },
+  chipIcon: { display: "inline-flex", color: "var(--text-muted)" },
+  empty: { padding: "12px 10px", ...T("base"), color: "var(--text-secondary)" },
+  skelRow: { display: "flex", alignItems: "center", gap: "10px", minHeight: "44px", padding: "6px 10px", boxSizing: "border-box" },
+  skelText: { display: "flex", flexDirection: "column", gap: "6px", flex: "1 1 auto" },
+  pinned: { borderTop: "1px solid var(--border-subtle)", padding: "6px", flexShrink: "0" },
+  footer: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "16px", height: "36px", padding: "0 16px", borderTop: "1px solid var(--border-subtle)", background: "var(--bg-surface)", flexShrink: "0", boxSizing: "border-box", ...T("xs"), color: "var(--text-secondary)", whiteSpace: "nowrap" },
+  hints: { display: "flex", alignItems: "center", gap: "16px" },
+  hint: { display: "inline-flex", alignItems: "center", gap: "6px" },
+  deep: { display: "flex", flexDirection: "column", gap: "12px", padding: "12px 16px" },
+  deepHead: { display: "flex", alignItems: "center", gap: "10px" },
+  deepTitle: { ...T("base"), ...ONE, fontWeight: "var(--weight-medium)", color: "var(--text-heading)" },
+  steps: { display: "flex", flexDirection: "column", gap: "2px" },
+  toggle: { display: "flex", alignItems: "center", gap: "8px", width: "100%", minHeight: "28px", padding: "0 6px", borderRadius: "var(--radius-md)", border: "none", background: "var(--wash, transparent)", cursor: "pointer", ...T("xs"), color: "var(--text-body)", textAlign: "left", boxSizing: "border-box" },
+  stepLine: { display: "flex", alignItems: "center", gap: "8px", minHeight: "24px", padding: "0 6px", ...T("xs") },
+  stepIcon: { width: "14px", height: "14px", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: "0" },
+  pending: { width: "8px", height: "8px", borderRadius: "var(--radius-full)", border: "1.5px solid var(--border-strong)", boxSizing: "border-box" },
+  muted: { color: "var(--text-muted)" },
+  grow: { flex: "1 1 auto" },
+  conclusion: { display: "flex", flexDirection: "column", gap: "6px", padding: "12px 14px", borderRadius: "var(--radius-lg)", background: "var(--bg-inset)", border: "1px solid var(--border-card)" },
+  concLabel: { ...T("xs"), fontWeight: "var(--weight-medium)", color: "var(--text-secondary)" },
+  concText: { display: "flex", flexDirection: "column", gap: "4px", ...T("base"), color: "var(--text-body)", textWrap: "pretty" },
+  sources: { display: "flex", flexWrap: "wrap", gap: "6px" },
+  source: { display: "inline-flex", alignItems: "center", gap: "4px", height: "24px", padding: "0 8px", borderRadius: "var(--radius-sm)", border: "1px solid var(--border-control)", background: "var(--bg-surface)", ...T("xs"), color: "var(--text-body)", boxSizing: "border-box", whiteSpace: "nowrap" },
+  actions: { display: "flex", gap: "8px", marginTop: "6px" },
+};
+
+/** The 32px Prophet AI tile: hairline tile at rest; selected, it takes the AI hover language (tint, gradient ring at hover speed, gradient glyph), never a glow. */
+export function gsAiTile(on) {
+  return {
+    outer: { width: "32px", height: "32px", flexShrink: "0", display: "flex", padding: "1px", boxSizing: "border-box", borderRadius: "var(--radius-md)", background: on ? "conic-gradient(from var(--kb-ai-angle), var(--ai-gradient-stops))" : "var(--border-card)", animation: on ? "kb-ai-spin var(--ai-spin-hover) linear infinite" : "none" },
+    inner: { position: "relative", flex: "1 1 auto", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "calc(var(--radius-md) - 1px)", background: "var(--bg-surface)", overflow: "hidden", color: "var(--text-secondary)" },
+    tint: { position: "absolute", inset: "0", pointerEvents: "none", background: "linear-gradient(90deg, color-mix(in srgb, var(--ai-gradient-start) var(--ai-tint), transparent), color-mix(in srgb, var(--ai-gradient-end) var(--ai-tint), transparent))", opacity: on ? "1" : "0", transition: FADE },
+    icon: { position: "relative" },
+  };
+}

package/components/icons/Icon.d.ts

@@ -11,6 +11,8 @@ export interface IconProps {
   strokeWidth?: number;
   /** Overrides currentColor */
   color?: string;
+  /** Strokes the glyph with the AI gradient (--ai-gradient-start → --ai-gradient-end). Prophet AI entry points only; pass [from, to] to override. */
+  gradient?: boolean | [string, string];
   style?: React.CSSProperties;
   className?: string;
 }

package/components/icons/Icon.jsx

@@ -88,8 +88,8 @@ export const ICON_PATHS = {
   "time-future": '<path d="M20 6A10 10 0 1 0 22 12"/><path d="M12 7v5h5"/><path d="M21 2v5h-5"/>',
   "time-restatement": '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/>',
   // AI glyphs (2.3.0) — traced from the two reference glyphs, redrawn to core rules (stroke 2, no fill, integer endpoints, >=4 between separate elements)
-  ai: '<path d="M9 4H6a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-3"/><path d="M16 2c1.2 3 3 4.8 6 6c-3 1.2-4.8 3-6 6c-1.2-3-3-4.8-6-6c3-1.2 4.8-3 6-6Z"/><path d="M9 12c.6 1.5 1.5 2.4 3 3c-1.5.6-2.4 1.5-3 3c-.6-1.5-1.5-2.4-3-3c1.5-.6 2.4-1.5 3-3Z"/>',
-  "ai-sparkles": '<path d="M9 2c1.4 3.5 3.5 5.6 7 7c-3.5 1.4-5.6 3.5-7 7c-1.4-3.5-3.5-5.6-7-7c3.5-1.4 5.6-3.5 7-7Z"/><path d="M17 13c.8 2 2 3.2 4 4c-2 .8-3.2 2-4 4c-.8-2-2-3.2-4-4c2-.8 3.2-2 4-4Z"/>',
+  ai: '<path d="M9 3H7a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-2"/><path d="M16 2c.72 3.6 2.4 5.28 6 6c-3.6.72-5.28 2.4-6 6c-.72-3.6-2.4-5.28-6-6c3.6-.72 5.28-2.4 6-6Z"/><path d="M9 12c.6 1.5 1.5 2.4 3 3c-1.5.6-2.4 1.5-3 3c-.6-1.5-1.5-2.4-3-3c1.5-.6 2.4-1.5 3-3Z"/>',
+  "ai-sparkles": '<path d="M9 2c.84 4.2 2.8 6.16 7 7c-4.2.84-6.16 2.8-7 7c-.84-4.2-2.8-6.16-7-7c4.2-.84 6.16-2.8 7-7Z"/><path d="M17 13c.8 2 2 3.2 4 4c-2 .8-3.2 2-4 4c-.8-2-2-3.2-4-4c2-.8 3.2-2 4-4Z"/>',
   // Keybricks business glyphs (2.4.6) — dimensions, modules, rules-*, task-*; drawn to core rules or taken from Lucide
   "dimension-account": '<path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M5 8h3"/><path d="M5 11h3"/><path d="M5 14h3"/><path d="M17 6.5v1"/><path d="M17 12.5v1"/><path d="M18.5 7.5h-2a1.25 1.25 0 0 0 0 2.5h1a1.25 1.25 0 0 1 0 2.5h-2"/>',
   "dimension-audit": '<path d="M11.1 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.589 3.588A2.4 2.4 0 0 1 20 8v3.25"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="m21 22-2.88-2.88"/><circle cx="16" cy="17" r="3"/>',
@@ -167,16 +167,24 @@ export const ICON_PATHS = {
   "task-shared": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><g transform="translate(-.5 4)"><circle cx="15.3" cy="6.8" r=".75"/><circle cx="9.7" cy="10" r=".75"/><circle cx="15.3" cy="13.2" r=".75"/><path d="m11.35 9.06 2.3-1.32"/><path d="m11.35 10.94 2.3 1.32"/></g>',
   "task-intercompany": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><g transform="translate(-.5 4)"><path d="M8.5 14V6.5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1V14"/><path d="M13.5 9.5H16a1 1 0 0 1 1 1V14"/><path d="M7.5 14h10"/><path d="M11 8.5h.01"/><path d="M11 11h.01"/></g>',
   ownership: '<path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"/><path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 16 6 6"/><circle cx="9" cy="5" r="3"/><path d="M12 5h9"/><path d="M18 5v2.5"/><path d="M21 5v2"/>',
+  prophet: '<path d="M5.66 13.5A7.5 7.5 0 1 1 18.34 13.5"/><path d="M8.5 10a3.5 3.5 0 0 1 7 0v1.5c0 3.2-1.5 5.6-3.5 7.5c-2-1.9-3.5-4.3-3.5-7.5Z"/><path d="M8.71 13.5c1.05.95 2.15 1.4 3.29 1.4s2.24-.45 3.29-1.4"/><path d="M3.5 22a5.5 5.5 0 0 1 4-5.3"/><path d="M20.5 22a5.5 5.5 0 0 0-4-5.3"/>',
+  "prophet-sparkle": '<path d="M5.66 13.5A7.5 7.5 0 0 1 13.24 2.1"/><path d="M19 2c.36 1.8 1.2 2.64 3 3c-1.8.36-2.64 1.2-3 3c-.36-1.8-1.2-2.64-3-3c1.8-.36 2.64-1.2 3-3Z"/><path d="M8.5 10a3.5 3.5 0 0 1 7 0v1.5c0 3.2-1.5 5.6-3.5 7.5c-2-1.9-3.5-4.3-3.5-7.5Z"/><path d="M8.71 13.5c1.05.95 2.15 1.4 3.29 1.4s2.24-.45 3.29-1.4"/><path d="M3.5 22a5.5 5.5 0 0 1 4-5.3"/><path d="M20.5 22a5.5 5.5 0 0 0-4-5.3"/>',
 };
 
 import { FEATHER_PATHS } from "./feather-paths.js";
 
-/** Lucide-style stroke icon. name: key of ICON_PATHS (core set) or any Feather icon name (feather-paths.js fallback); size in px; strokeWidth defaults to 2 (24-grid). Browse both sets with keywords in the Icon Gallery card. */
-export function Icon({ name, size = 16, strokeWidth = 2, color, style, className }) {
-  const body = ICON_PATHS[name] || FEATHER_PATHS[name] || "";
+/** Stroke gradient for the AI glyph treatment — bottom-left start to top-right end, in glyph space so every path shares it. */
+export const iconGradientDefs = (id, from = "var(--ai-gradient-start)", to = "var(--ai-gradient-end)") =>
+  '<defs><linearGradient id="' + id + '" gradientUnits="userSpaceOnUse" x1="2" y1="22" x2="22" y2="2"><stop offset="0" style="stop-color:' + from + '"/><stop offset="1" style="stop-color:' + to + '"/></linearGradient></defs>';
+
+/** Lucide-style stroke icon. name: key of ICON_PATHS (core set) or any Feather icon name (feather-paths.js fallback); size in px; strokeWidth defaults to 2 (24-grid). gradient: true strokes it with the AI gradient (Prophet AI entry points only), or pass [from, to]. Browse both sets with keywords in the Icon Gallery card. */
+export function Icon({ name, size = 16, strokeWidth = 2, color, gradient, style, className }) {
+  const gid = "kb-ig" + React.useId().replace(/[^a-zA-Z0-9]/g, "");
+  let body = ICON_PATHS[name] || FEATHER_PATHS[name] || "";
+  if (gradient) body = (Array.isArray(gradient) ? iconGradientDefs(gid, gradient[0], gradient[1]) : iconGradientDefs(gid)) + body;
   return (
     <svg
-      width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={gradient ? "url(#" + gid + ")" : "currentColor"}
       strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
       className={className}
       style={{ display: "block", flexShrink: 0, color, ...style }}

package/components/icons/Icon.vue

@@ -1,12 +1,19 @@
+<script>
+let kbIconSeq = 0
+</script>
 <script setup>
 // Keybricks icon set — Lucide stroke glyphs (24-grid, stroke 2, round caps/joins, currentColor), rendered at 14/16px.
 // Full path dictionary mirrors icons/Icon.jsx's ICON_PATHS (81 entries) — see that file for the complete list.
+// gradient: true strokes the glyph with the AI gradient (Prophet AI entry points only), or pass [from, to].
+import { computed } from 'vue'
 import { VUE_ICON_PATHS } from './icon-paths.js'
 import { FEATHER_PATHS } from './feather-paths.js'
-const props = defineProps({ name: String, size: { type: Number, default: 16 }, strokeWidth: { type: Number, default: 2 }, color: String, style: Object })
-const body = (n) => VUE_ICON_PATHS[n] || FEATHER_PATHS[n] || ''
+const props = defineProps({ name: String, size: { type: Number, default: 16 }, strokeWidth: { type: Number, default: 2 }, color: String, gradient: [Boolean, Array], style: Object })
+const gid = 'kb-ig-v' + (++kbIconSeq)
+const defs = (from = 'var(--ai-gradient-start)', to = 'var(--ai-gradient-end)') => '<defs><linearGradient id="' + gid + '" gradientUnits="userSpaceOnUse" x1="2" y1="22" x2="22" y2="2"><stop offset="0" style="stop-color:' + from + '"/><stop offset="1" style="stop-color:' + to + '"/></linearGradient></defs>'
+const body = computed(() => { const b = VUE_ICON_PATHS[props.name] || FEATHER_PATHS[props.name] || ''; return props.gradient ? (Array.isArray(props.gradient) ? defs(props.gradient[0], props.gradient[1]) : defs()) + b : b })
 </script>
 <template>
-  <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" stroke="currentColor" :stroke-width="strokeWidth" stroke-linecap="round" stroke-linejoin="round"
-    :style="{ display: 'block', flexShrink: 0, color, ...style }" v-html="body(name)" />
+  <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" :stroke="gradient ? 'url(#' + gid + ')' : 'currentColor'" :stroke-width="strokeWidth" stroke-linecap="round" stroke-linejoin="round"
+    :style="{ display: 'block', flexShrink: 0, color, ...style }" v-html="body" />
 </template>

package/components/icons/icon-paths.js

@@ -83,8 +83,8 @@ export const VUE_ICON_PATHS = {
   "time-future": '<path d="M20 6A10 10 0 1 0 22 12"/><path d="M12 7v5h5"/><path d="M21 2v5h-5"/>',
   "time-restatement": '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/>',
   // AI glyphs (2.3.0) — traced from the two reference glyphs, redrawn to core rules (stroke 2, no fill, integer endpoints, >=4 between separate elements)
-  ai: '<path d="M9 4H6a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-3"/><path d="M16 2c1.2 3 3 4.8 6 6c-3 1.2-4.8 3-6 6c-1.2-3-3-4.8-6-6c3-1.2 4.8-3 6-6Z"/><path d="M9 12c.6 1.5 1.5 2.4 3 3c-1.5.6-2.4 1.5-3 3c-.6-1.5-1.5-2.4-3-3c1.5-.6 2.4-1.5 3-3Z"/>',
-  "ai-sparkles": '<path d="M9 2c1.4 3.5 3.5 5.6 7 7c-3.5 1.4-5.6 3.5-7 7c-1.4-3.5-3.5-5.6-7-7c3.5-1.4 5.6-3.5 7-7Z"/><path d="M17 13c.8 2 2 3.2 4 4c-2 .8-3.2 2-4 4c-.8-2-2-3.2-4-4c2-.8 3.2-2 4-4Z"/>',
+  ai: '<path d="M9 3H7a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-2"/><path d="M16 2c.72 3.6 2.4 5.28 6 6c-3.6.72-5.28 2.4-6 6c-.72-3.6-2.4-5.28-6-6c3.6-.72 5.28-2.4 6-6Z"/><path d="M9 12c.6 1.5 1.5 2.4 3 3c-1.5.6-2.4 1.5-3 3c-.6-1.5-1.5-2.4-3-3c1.5-.6 2.4-1.5 3-3Z"/>',
+  "ai-sparkles": '<path d="M9 2c.84 4.2 2.8 6.16 7 7c-4.2.84-6.16 2.8-7 7c-.84-4.2-2.8-6.16-7-7c4.2-.84 6.16-2.8 7-7Z"/><path d="M17 13c.8 2 2 3.2 4 4c-2 .8-3.2 2-4 4c-.8-2-2-3.2-4-4c2-.8 3.2-2 4-4Z"/>',
   // Keybricks business glyphs (2.4.6) — dimensions, modules, rules-*, task-*; drawn to core rules or taken from Lucide
   "dimension-account": '<path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M5 8h3"/><path d="M5 11h3"/><path d="M5 14h3"/><path d="M17 6.5v1"/><path d="M17 12.5v1"/><path d="M18.5 7.5h-2a1.25 1.25 0 0 0 0 2.5h1a1.25 1.25 0 0 1 0 2.5h-2"/>',
   "dimension-audit": '<path d="M11.1 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.589 3.588A2.4 2.4 0 0 1 20 8v3.25"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="m21 22-2.88-2.88"/><circle cx="16" cy="17" r="3"/>',
@@ -162,4 +162,6 @@ export const VUE_ICON_PATHS = {
   "task-shared": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><g transform="translate(-.5 4)"><circle cx="15.3" cy="6.8" r=".75"/><circle cx="9.7" cy="10" r=".75"/><circle cx="15.3" cy="13.2" r=".75"/><path d="m11.35 9.06 2.3-1.32"/><path d="m11.35 10.94 2.3 1.32"/></g>',
   "task-intercompany": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><g transform="translate(-.5 4)"><path d="M8.5 14V6.5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1V14"/><path d="M13.5 9.5H16a1 1 0 0 1 1 1V14"/><path d="M7.5 14h10"/><path d="M11 8.5h.01"/><path d="M11 11h.01"/></g>',
   ownership: '<path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"/><path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 16 6 6"/><circle cx="9" cy="5" r="3"/><path d="M12 5h9"/><path d="M18 5v2.5"/><path d="M21 5v2"/>',
+  prophet: '<path d="M5.66 13.5A7.5 7.5 0 1 1 18.34 13.5"/><path d="M8.5 10a3.5 3.5 0 0 1 7 0v1.5c0 3.2-1.5 5.6-3.5 7.5c-2-1.9-3.5-4.3-3.5-7.5Z"/><path d="M8.71 13.5c1.05.95 2.15 1.4 3.29 1.4s2.24-.45 3.29-1.4"/><path d="M3.5 22a5.5 5.5 0 0 1 4-5.3"/><path d="M20.5 22a5.5 5.5 0 0 0-4-5.3"/>',
+  "prophet-sparkle": '<path d="M5.66 13.5A7.5 7.5 0 0 1 13.24 2.1"/><path d="M19 2c.36 1.8 1.2 2.64 3 3c-1.8.36-2.64 1.2-3 3c-.36-1.8-1.2-2.64-3-3c1.8-.36 2.64-1.2 3-3Z"/><path d="M8.5 10a3.5 3.5 0 0 1 7 0v1.5c0 3.2-1.5 5.6-3.5 7.5c-2-1.9-3.5-4.3-3.5-7.5Z"/><path d="M8.71 13.5c1.05.95 2.15 1.4 3.29 1.4s2.24-.45 3.29-1.4"/><path d="M3.5 22a5.5 5.5 0 0 1 4-5.3"/><path d="M20.5 22a5.5 5.5 0 0 0-4-5.3"/>',
 };

package/components/index.d.ts

@@ -61,6 +61,7 @@ export * from "./forms/Combobox";
 export * from "./forms/DatePicker";
 export * from "./forms/Dropzone";
 export * from "./forms/Field";
+export * from "./forms/GlobalSearch";
 export * from "./forms/Input";
 export * from "./forms/MultiSelect";
 export * from "./forms/NumberStepper";

package/components/index.js

@@ -76,6 +76,7 @@ export { Combobox } from "./forms/Combobox.jsx";
 export { DatePicker } from "./forms/DatePicker.jsx";
 export { Dropzone } from "./forms/Dropzone.jsx";
 export { Field } from "./forms/Field.jsx";
+export { GLOBAL_SEARCH_LABELS, GlobalSearch } from "./forms/GlobalSearch.jsx";
 export { Input, Textarea } from "./forms/Input.jsx";
 export { MultiSelect } from "./forms/MultiSelect.jsx";
 export { NumberStepper } from "./forms/NumberStepper.jsx";

package/components/navigation/TopBar.d.ts

@@ -1,13 +1,19 @@
 import * as React from "react";
-/** 56px top bar: bare search left; dark AI Assistant, notifications, help and the user trigger right. The trigger opens a UserMenu. */
+import type { GlobalSearchProps } from "../forms/GlobalSearch";
+/** 56px top bar: GlobalSearch left (⌘K / Ctrl K); notifications, help and the user trigger right. The trigger opens a UserMenu. Prophet AI is reached through the search card (Button variant="ai"), not a separate pill. */
 export interface TopBarProps {
+  /** Collapsed search field text (default GlobalSearch labels.field) */
   placeholder?: string;
-  /** Receives the new search string */
+  /** Receives the query as the user types */
   onSearch?: (value: string) => void;
+  /** Props for the GlobalSearch (items / onQuery, recent, prompts, onSelect, onDeepSearch, labels …) */
+  search?: GlobalSearchProps;
   /** Replaces the whole right-hand group */
   actions?: React.ReactNode;
+  /** Overrides the "Ask Prophet AI" label (same as search.labels.ask) */
   aiLabel?: string;
-  onAi?: () => void;
+  /** Prophet AI hand-off: called with the question when any AI entry in the search card is used */
+  onAi?: (question: string) => void;
   onNotifications?: () => void;
   onHelp?: () => void;
   notificationsLabel?: string;

package/components/navigation/TopBar.jsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 import { IconButton } from "../buttons/IconButton.jsx";
-import { Button } from "../buttons/Button.jsx";
-import { SearchInput } from "../forms/SearchInput.jsx";
+import { GlobalSearch } from "../forms/GlobalSearch.jsx";
 import { Avatar } from "../display/Avatar.jsx";
 import { SegmentedControl } from "../tabs/SegmentedControl.jsx";
 import { ContextMenu } from "../feedback/ContextMenu.jsx";
@@ -33,9 +32,9 @@ export function UserMenu({ name, email, theme, onThemeChange, themeOptions = THE
   );
 }
 
-/** 56px top bar: bare search on the left; AI Assistant (dark), notifications, help and the user trigger on the right.
- *  The user trigger opens a UserMenu below it (closes on outside click). actions replaces the right-hand group entirely. */
-export function TopBar({ placeholder = "Search documents, workflows, data...", onSearch, actions, aiLabel = "AI Assistant", onAi, onNotifications, onHelp, notificationsLabel = "Notifications", helpLabel = "Help", user, userMenu, style }) {
+/** 56px top bar: GlobalSearch on the left (⌘K / Ctrl K, Prophet AI hand-off via onAi); notifications, help and the user trigger on the right.
+ *  The user trigger opens a UserMenu below it (closes on outside click). actions replaces the right-hand group entirely. search passes props to GlobalSearch. */
+export function TopBar({ placeholder, onSearch, search, actions, aiLabel, onAi, onNotifications, onHelp, notificationsLabel = "Notifications", helpLabel = "Help", user, userMenu, style }) {
   const [open, setOpen] = React.useState(false);
   const ref = React.useRef(null);
   React.useEffect(() => {
@@ -48,10 +47,9 @@ export function TopBar({ placeholder = "Search documents, workflows, data...", o
   const [hover, setHover] = React.useState(false);
   return (
     <header style={{ height: "var(--topbar-h)", background: "var(--bg-surface)", borderBottom: "1px solid var(--border-card)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "0 24px", boxSizing: "border-box", flexShrink: 0, minWidth: 0, position: "relative", ...style }}>
-      <SearchInput bare placeholder={placeholder} onChange={onSearch} style={{ flex: "0 1 576px", minWidth: 0 }} />
+      <GlobalSearch placeholder={placeholder} onInput={onSearch} onAsk={onAi} {...search} labels={aiLabel ? { ...(search && search.labels), ask: aiLabel } : search && search.labels} />
       <div ref={ref} style={{ display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }}>
         {actions || (<>
-          <Button variant="dark" icon="ai" onClick={onAi}>{aiLabel}</Button>
           <IconButton icon="bell" label={notificationsLabel} title={notificationsLabel} onClick={onNotifications} />
           <IconButton icon="circle-help" label={helpLabel} title={helpLabel} onClick={onHelp} />
           {user ? <div role="button" tabIndex={0} aria-haspopup="menu" aria-expanded={open} onClick={() => setOpen(!open)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpen(!open); } }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}

package/components/navigation/TopBar.vue

@@ -2,13 +2,13 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import Icon from '../icons/Icon.vue'
 import IconButton from '../buttons/IconButton.vue'
-import Button from '../buttons/Button.vue'
-import SearchInput from '../forms/SearchInput.vue'
+import GlobalSearch from '../forms/GlobalSearch.vue'
 import UserMenu from './UserMenu.vue'
-// 56px top bar: bare search on the left; AI Assistant (dark), notifications, help and the user trigger on the right.
+// 56px top bar: GlobalSearch on the left (⌘K / Ctrl K; its ask event is re-emitted as ai(question)); notifications, help and the user trigger on the right.
+// search passes props to GlobalSearch (items, query, recent, prompts, deepSearch, labels …).
 // The user trigger opens a UserMenu below it (closes on outside click / Escape); #user-menu slot replaces its content.
 // #actions slot replaces the whole right-hand group.
-const props = defineProps({ placeholder: { type: String, default: 'Search documents, workflows, data...' }, aiLabel: { type: String, default: 'AI Assistant' }, notificationsLabel: { type: String, default: 'Notifications' }, helpLabel: { type: String, default: 'Help' }, user: Object, style: Object })
+const props = defineProps({ placeholder: String, search: Object, aiLabel: String, notificationsLabel: { type: String, default: 'Notifications' }, helpLabel: { type: String, default: 'Help' }, user: Object, style: Object })
 const emit = defineEmits(['search', 'ai', 'notifications', 'help'])
 const open = ref(false), hover = ref(false), root = ref(null)
 const off = (e) => { if (open.value && root.value && !root.value.contains(e.target)) open.value = false }
@@ -19,10 +19,9 @@ function key(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault();
 </script>
 <template>
   <header :style="{ height: 'var(--topbar-h)', background: 'var(--bg-surface)', borderBottom: '1px solid var(--border-card)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', padding: '0 24px', boxSizing: 'border-box', flexShrink: 0, minWidth: 0, position: 'relative', ...style }">
-    <SearchInput bare :placeholder="placeholder" @update:modelValue="v => emit('search', v)" style="flex:0 1 576px;min-width:0" />
+    <GlobalSearch :placeholder="placeholder" v-bind="search" :labels="aiLabel ? { ...(search && search.labels), ask: aiLabel } : search && search.labels" @input="v => emit('search', v)" @ask="q => emit('ai', q)" />
     <div ref="root" style="display:flex;align-items:center;gap:8px;flex-shrink:0">
       <slot name="actions">
-        <Button variant="dark" icon="ai" @click="emit('ai')">{{ aiLabel }}</Button>
         <IconButton icon="bell" :label="notificationsLabel" :title="notificationsLabel" @click="emit('notifications')" />
         <IconButton icon="circle-help" :label="helpLabel" :title="helpLabel" @click="emit('help')" />
         <div v-if="user" role="button" tabindex="0" aria-haspopup="menu" :aria-expanded="open" @click="open = !open" @keydown="key" @mouseenter="hover = true" @mouseleave="hover = false"

package/covers.js

@@ -12,10 +12,11 @@ window.KB_COVERS = (function () {
     "action-chip": [1, (h, K) => row(h, 8, [h(K.ActionChip, { tone: "info" }, "Mark as New"), h(K.ActionChip, null, "Skip")])],
     "activity": [.85, (h, K) => h("div", { style: { width: 250 } }, h(K.ActivityItem, { icon: "upload", title: "Import finished", meta: "2 min ago" }), h(K.ActivityItem, { icon: "check", title: "Run completed", meta: "1 h ago" }))],
     "alert": [.8, (h, K) => h("div", { style: { width: 280 } }, h(K.Alert, { tone: "info", title: "Mapping saved" }, "3 fields were updated."))],
-    "app-chrome": [.5, (h, K) => h("div", { style: { display: "flex", height: 260, width: 480, border: "1px solid var(--border-card)", borderRadius: "var(--radius-md)", overflow: "hidden" } }, h(K.Sidebar, { logo: "assets/keybricks-logo.png", active: "Home", items: [{ icon: "house", label: "Home" }, { icon: "file-text", label: "Documents", trailing: true }, { icon: "database", label: "Data Integration" }], footerItems: [{ icon: "settings", label: "Management", trailing: true }], style: { width: 180 } }), h("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", background: "var(--bg-app)" } }, h("div", { style: { height: 56, background: "var(--bg-surface)", borderBottom: "1px solid var(--border-card)", display: "flex", alignItems: "center", justifyContent: "flex-end", padding: "0 16px" } }, h(K.Button, { variant: "dark", icon: "ai" }, "AI Assistant"))))],
+    "app-chrome": [.5, (h, K) => h("div", { style: { display: "flex", height: 260, width: 480, border: "1px solid var(--border-card)", borderRadius: "var(--radius-md)", overflow: "hidden" } }, h(K.Sidebar, { logo: "assets/keybricks-logo.png", active: "Home", items: [{ icon: "house", label: "Home" }, { icon: "file-text", label: "Documents", trailing: true }, { icon: "database", label: "Data Integration" }], footerItems: [{ icon: "settings", label: "Management", trailing: true }], style: { width: 180 } }), h("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", background: "var(--bg-app)" } }, h("div", { style: { height: 56, background: "var(--bg-surface)", borderBottom: "1px solid var(--border-card)", display: "flex", alignItems: "center", padding: "0 16px" } }, h("div", { style: { display: "flex", alignItems: "center", gap: 8, height: 32, padding: "0 6px 0 10px", borderRadius: "var(--radius-md)", background: "var(--bg-inset)", color: "var(--text-muted)", fontFamily: "var(--font-sans)", fontSize: "var(--text-base)" } }, h(K.Icon, { name: "search", size: 16 }), h("span", { style: { paddingRight: 24 } }, "Search"), h(K.Kbd, { keys: ["mod", "K"] })))))],
     "banner": [.7, (h, K) => h("div", { style: { width: 340 } }, h(K.Banner, { tone: "warning", title: "Scheduled maintenance tonight", action: "Details" }))],
     "breadcrumb": [1, (h, K) => h(K.Breadcrumb, { items: ["Home", "Pipelines", "Import"] })],
     "button-1-base": [1, (h, K) => row(h, 8, [h(K.Button, { variant: "primary" }, "Save"), h(K.Button, { variant: "outline" }, "Cancel")])],
+    "button-5-ai": [1, (h, K) => h(K.Button, { variant: "ai" }, "Ask Prophet AI")],
     "button-4-group": [1, (h, K) => h(K.ButtonGroup, null, h(K.Button, { variant: "outline" }, "Day"), h(K.Button, { variant: "outline" }, "Week"), h(K.Button, { variant: "outline" }, "Month"))],
     "button-2-states": [1, (h, K) => row(h, 8, [h(K.Button, { variant: "primary", pressed: true }, "Pressed"), h(K.Button, { variant: "primary", disabled: true }, "Disabled")])],
     "button-3-sizes-icons": [1, (h, K) => row(h, 8, [h("div", { "data-size": "sm" }, h(K.Button, { variant: "outline", icon: "plus" }, "Add")), h(K.Button, { variant: "outline", icon: "plus" }, "Add"), h("div", { "data-size": "lg" }, h(K.Button, { variant: "outline", icon: "plus" }, "Add"))])],
@@ -36,7 +37,7 @@ window.KB_COVERS = (function () {
     "icon-button": [1.2, (h, K) => row(h, 4, [h(K.IconButton, { icon: "pencil-line", label: "Edit" }), h(K.IconButton, { icon: "copy", label: "Copy" }), h(K.IconButton, { icon: "ellipsis", label: "More" })])],
     "input": [1, (h, K) => h("div", { style: { width: 220 } }, h(K.Input, { value: "FIN_CURRENCY_DEFAULT", onChange: () => {} }))],
     "keyvalue": [.9, (h, K) => h("div", { style: { width: 240 } }, h(K.KeyValueList, { rows: [{ label: "Source", value: "Oracle EBS" }, { label: "Rows", value: "12,480" }, { label: "Status", value: "Ready" }] }))],
-    "kbd": [1.3, (h, K) => h(K.Kbd, { keys: ["⌘", "K"] })],
+    "kbd": [1.3, (h, K) => h(K.Kbd, { keys: ["mod", "K"] })],
     "listrow": [.8, (h, K) => h("div", { style: { width: 280 } }, h(K.ListRow, { icon: "database", title: "Oracle EBS", meta: "Last sync 2 min ago" }))],
     "loading": [1, (h, K) => row(h, 16, [h(K.Spinner), h("div", { style: { display: "flex", flexDirection: "column", gap: 8 } }, h(K.Skeleton, { width: 140, height: 12 }), h(K.Skeleton, { width: 100, height: 12 }))])],
     "log-viewer": [.7, (h, K) => h("div", { style: { width: 320 } }, h(K.LogViewer, { lines: ["[14:30] Task started: Import", "[14:30] Reading ledger.csv", "[14:31] 12,480 rows written"], height: 90 }))],
@@ -49,6 +50,7 @@ window.KB_COVERS = (function () {
     "pipeline-palette": [.5, (h, K) => h(K.IconTile, { icon: "database", hue: "source" })],
     "radio": [1, (h, K) => col(h, 10, [h(K.Radio, { checked: true, label: "Overwrite" }), h(K.Radio, { checked: false, label: "Append" })])],
     "search": [1, (h, K) => h("div", { style: { width: 220 } }, h(K.SearchInput, { placeholder: "Search pipelines" }))],
+    "search-global": [.42, (h, K) => h(K.GlobalSearch, { inline: true, prompts: ["Which entity had the largest YoY revenue change in Q3?", "Explain how the FX model translates currencies"], recentSearches: ["revenue bridge", "FX rates"] })],
     "segmented-control": [1, (h, K) => h(K.SegmentedControl, { options: ["Grid", "List", "Board"], value: "Grid" })],
     "relative-time-picker": [1, (h, K) => h("div", { style: { width: 220 } }, h(K.RelativeTimePicker, { value: { amount: 24, unit: "Hour" } }))],
     "select": [1, (h, K) => h("div", { style: { width: 200 } }, h(K.Select, { options: ["Monthly", "Quarterly"], value: "Monthly" }))],

package/gallery.html

@@ -32,7 +32,7 @@ h2:first-child{margin-top:0}
 <body>
 <header>
   <h1>Keybricks Design System</h1>
-  <p class="sub">121 components in React and Vue 3, on one token layer. Every card below is the real component, not a screenshot.</p>
+  <p class="sub">122 components in React and Vue 3, on one token layer. Every card below is the real component, not a screenshot.</p>
   <div class="bar">
     <input type="search" id="q" placeholder="Filter components…" autocomplete="off">
     <span class="count" id="count"></span>

package/guidelines/brand-logo.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Brand" viewport="700x170" name="Logo & Wordmark" subtitle="Blue cube bitmap + Inter 600 wordmark, −0.609px tracking" -->
+<!-- @dsCard group="Brand" viewport="700x162" name="Logo & Wordmark" subtitle="Blue cube bitmap + Inter 600 wordmark, −0.609px tracking" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
 <style>body{margin:0;padding:16px;font-family:var(--font-sans);background:var(--bg-surface);display:flex;gap:12px;box-sizing:border-box}.p{flex:1;border:1px solid var(--border-card);border-radius:10px;display:flex;align-items:center;justify-content:center;gap:10px;height:128px}.p.dark{background:var(--neutral-950)}.wm{font-weight:600;font-size:15px;letter-spacing:-.609px;color:var(--text-primary)}.dark .wm{color:#fff}.cap{position:absolute;font-size:var(--text-xs)}</style></head>

package/guidelines/colors-schemes.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Colors" viewport="700x800" name="Schemes" subtitle="Sets that work together — surface, text, border, accent" -->
+<!-- @dsCard group="Colors" viewport="700x783" name="Schemes" subtitle="Sets that work together — surface, text, border, accent" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
 <script src="_color-lab.js"></script>

package/guidelines/colors-transparency.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Colors" viewport="700x490" name="Transparency" subtitle="Alpha scale — the number is the opacity" -->
+<!-- @dsCard group="Colors" viewport="700x478" name="Transparency" subtitle="Alpha scale — the number is the opacity" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
 <script src="_color-lab.js"></script>

package/guidelines/foundations-borders.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Foundations" viewport="700x190" name="Borders & Shadows" subtitle="Hairlines carry the UI; shadows only on canvas nodes" -->
+<!-- @dsCard group="Foundations" viewport="700x176" name="Borders & Shadows" subtitle="Hairlines carry the UI; shadows only on canvas nodes" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
 <style>body{margin:0;padding:16px;font-family:var(--font-sans);background:var(--bg-app);display:grid;grid-template-columns:repeat(4,1fr);gap:10px;box-sizing:border-box}.c{background:var(--bg-surface);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;justify-content:space-between}.n{font-size:var(--text-xs);font-weight:500;color:var(--text-heading)}.u{font-size:var(--text-xs);font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text-muted)}.sw{height:56px;border-radius:10px;background:var(--bg-inset)}</style></head>

package/guidelines/foundations-chrome.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Foundations" viewport="700x180" name="App Chrome Dimensions" subtitle="Fixed panel widths & bar heights" -->
+<!-- @dsCard group="Foundations" viewport="700x164" name="App Chrome Dimensions" subtitle="Fixed panel widths & bar heights" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
 <style>body{margin:0;padding:16px;font-family:var(--font-sans);background:var(--bg-app);box-sizing:border-box}.wrap{border:1px solid var(--border-card);border-radius:10px;overflow:hidden;display:flex;height:130px;font-size:var(--text-xs);font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text-muted)}.cell{display:flex;align-items:center;justify-content:center;box-sizing:border-box}.col{display:flex;flex-direction:column;flex:1}</style></head>

package/guidelines/foundations-motion.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Foundations" viewport="700x170" name="Motion" subtitle="120/160/240ms · ease-out — hover, rise, pulse, spin" -->
+<!-- @dsCard group="Foundations" viewport="700x152" name="Motion" subtitle="120/160/240ms · ease-out — hover, rise, pulse, spin" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
 <style>body{margin:0;padding:16px;font-family:var(--font-sans);background:var(--bg-surface);display:grid;grid-template-columns:repeat(4,1fr);gap:10px;box-sizing:border-box}

package/guidelines/foundations-size-tiers.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Foundations" viewport="700x1340" name="Size Tiers" subtitle="sm 28 · md 32 · lg 40 — one tier per region, never mixed in a row; CJK one step larger at sm" -->
+<!-- @dsCard group="Foundations" viewport="700x1335" name="Size Tiers" subtitle="sm 28 · md 32 · lg 40 — one tier per region, never mixed in a row; CJK one step larger at sm" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/guidelines/foundations-spacing.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Foundations" viewport="700x170" name="Spacing" subtitle="4px family · page 24×32 · card 21 · section gap 24 · gaps 8 inside a group, 12/16/24 between groups" -->
+<!-- @dsCard group="Foundations" viewport="700x138" name="Spacing" subtitle="4px family · page 24×32 · card 21 · section gap 24 · gaps 8 inside a group, 12/16/24 between groups" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
 <style>body{margin:0;padding:16px;font-family:var(--font-sans);background:var(--bg-app);box-sizing:border-box}.bars{display:flex;gap:14px;align-items:flex-end}.b{display:flex;flex-direction:column;gap:5px;align-items:center}.b i{display:block;background:var(--soft-bg);border:1px solid var(--soft-border);border-radius:3px}.b span{font-size:var(--text-xs);font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text-muted)}.note{margin-top:12px;font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted)}.note b{color:var(--text-heading);font-weight:500}</style></head>

package/guidelines/interaction-states.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Foundations" viewport="700x570" name="Interaction States" subtitle="The five states every control carries — and where each one is defined" -->
+<!-- @dsCard group="Foundations" viewport="700x552" name="Interaction States" subtitle="The five states every control carries — and where each one is defined" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
 <style>

package/guidelines/type-extended.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Type" viewport="700x440" name="Display Scale" subtitle="Display sizes 24–60 — tracking follows the same size→tracking curve" -->
+<!-- @dsCard group="Type" viewport="700x388" name="Display Scale" subtitle="Display sizes 24–60 — tracking follows the same size→tracking curve" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
 <style>body{margin:0;padding:14px 16px;font-family:var(--font-sans);background:var(--bg-surface);box-sizing:border-box}.r{display:grid;grid-template-columns:150px 1fr 200px;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--border-subtle)}.m{font-size:var(--text-xs);font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text-muted)}.u{font-size:var(--text-xs);color:var(--text-secondary);text-align:right}</style></head>

package/guidelines/type-mono.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Type" viewport="700x170" name="Mono / Code Only" subtitle="Menlo for code blocks, logs, inline code and config-code chips — IDs and amounts stay in Inter with tabular figures" -->
+<!-- @dsCard group="Type" viewport="700x187" name="Mono / Code Only" subtitle="Menlo for code blocks, logs, inline code and config-code chips — IDs and amounts stay in Inter with tabular figures" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
 <style>body{margin:0;padding:16px;font-family:var(--font-sans);background:var(--bg-app);display:flex;gap:12px;box-sizing:border-box}.p{flex:1;min-width:0;border:1px solid var(--border-card);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}.cap{font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted)}.codeblk{background:var(--bg-inset);border-radius:8px;padding:8px 10px;font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-primary);white-space:pre}.log{background:var(--bg-inset);border-radius:8px;padding:8px 10px;font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary);display:flex;flex-direction:column}.ui{font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-primary);font-variant-numeric:tabular-nums;display:flex;flex-direction:column}</style></head>

package/guidelines/type-scale.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Type" viewport="700x450" name="Type Scale" subtitle="Inter — the 14px scale: 12 captions · 14 body and controls · 16 section titles · 20 page titles; CJK one step larger below 14" -->
+<!-- @dsCard group="Type" viewport="700x408" name="Type Scale" subtitle="Inter — the 14px scale: 12 captions · 14 body and controls · 16 section titles · 20 page titles; CJK one step larger below 14" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
 <style>body{margin:0;padding:14px 16px;font-family:var(--font-sans);background:var(--bg-surface);box-sizing:border-box}.r{display:grid;grid-template-columns:150px 1fr 190px;gap:12px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--border-subtle)}.m{font-size:var(--text-xs);font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text-muted)}.u{font-size:var(--text-xs);color:var(--text-secondary);text-align:right}</style></head>

package/guidelines/type-weights.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Type" viewport="700x280" name="Inter Weights" subtitle="300 numerals · 400 body · 500 UI-medium · 600 titles — 500 becomes 600 in Chinese, Japanese and Korean" -->
+<!-- @dsCard group="Type" viewport="700x264" name="Inter Weights" subtitle="300 numerals · 400 body · 500 UI-medium · 600 titles — 500 becomes 600 in Chinese, Japanese and Korean" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
 <style>body{margin:0;padding:16px;font-family:var(--font-sans);background:var(--bg-surface);display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-content:start;box-sizing:border-box}.w{border:1px solid var(--border-card);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:2px}.w b{font-size:var(--text-xl);line-height:var(--leading-xl);letter-spacing:var(--tracking-xl);color:var(--text-primary)}.w span{font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary)}</style></head>