npm - @keyfunc/keybricks-ds - Versions diffs - 2.6.0 → 2.7.0 - Mend

@keyfunc/keybricks-ds 2.6.0 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (155) hide show

package/DEPLOY.md +3 -3
package/DESIGN.md +13 -4
package/INTEGRATION.md +18 -3
package/_adherence.oxlintrc.json +57 -11
package/_ds_bundle.js +2137 -186
package/_scripts/build-index.mjs +1 -1
package/_src/icon-index.js +1 -1
package/assets/icons/icon-index.json +1 -1
package/changelog.js +11 -1
package/components/_cards/accordion.card.html +1 -1
package/components/_cards/action-chip.card.html +1 -1
package/components/_cards/activity.card.html +1 -1
package/components/_cards/alert.card.html +1 -1
package/components/_cards/app-chrome.card.html +1 -1
package/components/_cards/banner.card.html +1 -1
package/components/_cards/breadcrumb.card.html +1 -1
package/components/_cards/button-1-base.card.html +5 -2
package/components/_cards/button-2-states.card.html +5 -5
package/components/_cards/button-3-sizes-icons.card.html +2 -2
package/components/_cards/button-4-group.card.html +2 -2
package/components/_cards/button-5-ai.card.html +34 -0
package/components/_cards/canvas-zoom-controls.card.html +1 -1
package/components/_cards/cards-indicators.card.html +1 -1
package/components/_cards/charts-1-sparkline.card.html +1 -1
package/components/_cards/charts-10-gauge.card.html +1 -1
package/components/_cards/charts-11-funnel.card.html +1 -1
package/components/_cards/charts-12-treemap.card.html +1 -1
package/components/_cards/charts-14-radar.card.html +1 -1
package/components/_cards/charts-15-distribution.card.html +1 -1
package/components/_cards/charts-16-pareto.card.html +1 -1
package/components/_cards/charts-17-candlestick.card.html +1 -1
package/components/_cards/charts-18-sankey.card.html +1 -1
package/components/_cards/charts-19-chord.card.html +1 -1
package/components/_cards/charts-2-line.card.html +1 -1
package/components/_cards/charts-20-sunburst.card.html +1 -1
package/components/_cards/charts-21-worldmap.card.html +1 -1
package/components/_cards/charts-22-gantt.card.html +1 -1
package/components/_cards/charts-23-bar3d.card.html +1 -1
package/components/_cards/charts-24-pie3d.card.html +1 -1
package/components/_cards/charts-25-surface3d.card.html +1 -1
package/components/_cards/charts-26-scatter3d.card.html +1 -1
package/components/_cards/charts-27-ribbon3d.card.html +1 -1
package/components/_cards/charts-3-bar.card.html +1 -1
package/components/_cards/charts-4-barlist.card.html +1 -1
package/components/_cards/charts-5-donut.card.html +1 -1
package/components/_cards/charts-6-scatter.card.html +1 -1
package/components/_cards/charts-7-heatmap.card.html +1 -1
package/components/_cards/charts-8-waterfall.card.html +1 -1
package/components/_cards/charts-9-bullet.card.html +1 -1
package/components/_cards/charts-99-fullpage.card.html +1 -1
package/components/_cards/checkbox.card.html +1 -1
package/components/_cards/codeblock.card.html +1 -1
package/components/_cards/combobox.card.html +1 -1
package/components/_cards/context-menu.card.html +1 -1
package/components/_cards/date-picker.card.html +1 -1
package/components/_cards/diffvalue.card.html +1 -1
package/components/_cards/divider.card.html +1 -1
package/components/_cards/drawer.card.html +1 -1
package/components/_cards/dropdown-menu.card.html +1 -1
package/components/_cards/dropzone.card.html +1 -1
package/components/_cards/empty-state.card.html +1 -1
package/components/_cards/filter-bar.card.html +1 -1
package/components/_cards/icon-button.card.html +1 -1
package/components/_cards/icons-0-usage.card.html +2 -2
package/components/_cards/icons-1-core.card.html +1 -1
package/components/_cards/icons-2-feather.card.html +1 -1
package/components/_cards/icons-2b-lucide.card.html +1 -1
package/components/_cards/icons-3-unicons.card.html +1 -1
package/components/_cards/icons-4-datasource.card.html +1 -1
package/components/_cards/input.card.html +1 -1
package/components/_cards/kbd.card.html +5 -7
package/components/_cards/keyvalue.card.html +1 -1
package/components/_cards/listrow.card.html +1 -1
package/components/_cards/loading.card.html +1 -1
package/components/_cards/log-viewer.card.html +1 -1
package/components/_cards/multi-select.card.html +1 -1
package/components/_cards/number-stepper.card.html +1 -1
package/components/_cards/pagination.card.html +1 -1
package/components/_cards/people.card.html +1 -1
package/components/_cards/pipeline-node.card.html +1 -1
package/components/_cards/pipeline-palette.card.html +1 -1
package/components/_cards/radio.card.html +1 -1
package/components/_cards/relative-time-picker.card.html +1 -1
package/components/_cards/search-global.card.html +72 -0
package/components/_cards/search.card.html +1 -1
package/components/_cards/segmented-control.card.html +1 -1
package/components/_cards/select.card.html +1 -1
package/components/_cards/slider.card.html +1 -1
package/components/_cards/smart-table.card.html +1 -1
package/components/_cards/spreadsheet.card.html +1 -1
package/components/_cards/stepper.card.html +1 -1
package/components/_cards/table.card.html +1 -1
package/components/_cards/tabs.card.html +1 -1
package/components/_cards/tag.card.html +1 -1
package/components/_cards/textarea.card.html +1 -1
package/components/_cards/timeline.card.html +1 -1
package/components/_cards/toast.card.html +1 -1
package/components/_cards/toggles.card.html +1 -1
package/components/_cards/tooltip.card.html +1 -1
package/components/_cards/tree.card.html +1 -1
package/components/_vue/index.mjs +2 -0
package/components/buttons/Button.d.ts +14 -5
package/components/buttons/Button.jsx +45 -8
package/components/buttons/Button.vue +40 -38
package/components/buttons/Button.vue.d.ts +4 -1
package/components/buttons/ai-button.js +54 -0
package/components/buttons/buttons.prompt.md +7 -2
package/components/display/Kbd.d.ts +3 -1
package/components/display/Kbd.jsx +8 -3
package/components/display/Kbd.vue +7 -3
package/components/display/display.prompt.md +3 -1
package/components/feedback/Modal.d.ts +7 -0
package/components/feedback/Modal.jsx +9 -9
package/components/feedback/Toast.vue +6 -6
package/components/feedback/feedback.prompt.md +2 -0
package/components/forms/GlobalSearch.d.ts +83 -0
package/components/forms/GlobalSearch.jsx +172 -0
package/components/forms/GlobalSearch.vue +161 -0
package/components/forms/forms.prompt.md +7 -0
package/components/forms/global-search.js +161 -0
package/components/icons/Icon.d.ts +2 -0
package/components/icons/Icon.jsx +14 -6
package/components/icons/Icon.vue +11 -4
package/components/icons/icon-paths.js +4 -2
package/components/index.d.ts +1 -0
package/components/index.js +1 -0
package/components/navigation/TopBar.d.ts +9 -3
package/components/navigation/TopBar.jsx +5 -7
package/components/navigation/TopBar.vue +5 -6
package/covers.js +4 -2
package/gallery.html +1 -1
package/guidelines/brand-logo.html +1 -1
package/guidelines/colors-schemes.html +1 -1
package/guidelines/colors-transparency.html +1 -1
package/guidelines/foundations-borders.html +1 -1
package/guidelines/foundations-chrome.html +1 -1
package/guidelines/foundations-motion.html +1 -1
package/guidelines/foundations-size-tiers.html +1 -1
package/guidelines/foundations-spacing.html +1 -1
package/guidelines/interaction-states.html +1 -1
package/guidelines/type-extended.html +1 -1
package/guidelines/type-mono.html +1 -1
package/guidelines/type-scale.html +1 -1
package/guidelines/type-weights.html +1 -1
package/index.html +8 -8
package/package.json +2 -2
package/readme.md +4 -4
package/readme.zh-CN.md +4 -4
package/site-nav.js +1 -1
package/styles.css +1 -0
package/tokens/ai.css +17 -0
package/tokens/colors.css +1 -1
package/tokens/tokens.d.ts +28 -0
package/tokens/tokens.js +47 -5
package/tokens/tokens.json +123 -5

package/components/_cards/search-global.card.html ADDED Viewed

@@ -0,0 +1,72 @@
+<!-- @dsCard group="Components" viewport="1000x3634" name="Search · Global" subtitle="GlobalSearch — TopBar search with ⌘K / Ctrl K · scopes · grouped results · Prophet AI hand-off · Deep Search" -->
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+<script src="../_shared/view-source.js"></script>
+<script src="../_shared/card-kit.js"></script>
+<style>.gs-frame{border:1px solid var(--border-card);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-app)}.gs-note{font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary);padding:10px 24px}</style></head>
+<body><div id="root"></div>
+<script type="text/babel">
+const { GlobalSearch, TopBar, GLOBAL_SEARCH_LABELS } = window.KeybricksDesignSystem_71231a;
+const { KBSec: Sec } = window;
+const ITEMS = [
+  { kind: "feature", title: "Revenue Planning", sub: "Planning · Forecast models", keywords: ["forecast", "budget"] },
+  { kind: "feature", title: "Revenue Recognition Rules", sub: "Rules · IFRS 15" },
+  { kind: "feature", title: "Consolidation Monitor", sub: "Close · Group entities", keywords: ["revenue", "close"] },
+  { kind: "feature", title: "FX Rates", sub: "Data · Currency tables", keywords: ["currency", "revenue"] },
+  { kind: "feature", title: "Revenue Allocation", sub: "Rules · Cost centers" },
+  { kind: "document", title: "Q3 Revenue Bridge", sub: "Finance / Reports · updated 2h ago", meta: "Report", tone: "join" },
+  { kind: "document", title: "Revenue by Entity FY24", sub: "Finance / Sheets · updated yesterday", meta: "Sheet", tone: "source" },
+  { kind: "document", title: "Revenue Forecast Model", sub: "Planning / Models · updated 3d ago", meta: "Model", tone: "transform", icon: "box" },
+  { kind: "document", title: "APAC Revenue Review", sub: "Finance / Reports · updated last week", meta: "Report", tone: "join" },
+  { kind: "document", title: "Revenue Close Checklist", sub: "Close / Docs · updated last week", meta: "Doc", tone: "output" },
+  { kind: "document", title: "Deferred Revenue Schedule", sub: "Finance / Sheets · updated 2 weeks ago", meta: "Sheet", tone: "source" },
+  { kind: "member", title: "Revenue (4000)", sub: "Account · Income statement" },
+  { kind: "member", title: "Other Revenue (4900)", sub: "Account · Income statement" },
+  { kind: "member", title: "Revenue Adjustments", sub: "Scenario · Actuals" },
+  { kind: "member", title: "Net Revenue", sub: "Account · Calculated" },
+  { kind: "action", title: "Run revenue consolidation", sub: "Close · about 4 min", icon: "play" },
+  { kind: "action", title: "Create revenue forecast", sub: "Planning", icon: "plus" },
+];
+const RECENT = [ITEMS[5], ITEMS[6], ITEMS[7]];
+const PROMPTS = ["Which entity had the largest YoY revenue change in Q3?", "Explain how the FX model translates currencies", "Which workflows are waiting for my approval?"];
+const STEPS = ["Understand the question and plan the search", "Search document titles and text", "Read model and dimension data", "Cross-check sources", "Write conclusion with citations"];
+const DONE = { status: "done", elapsed: "42 s", steps: STEPS.map((label, i) => ({ label, state: "done", meta: ["2 s", "11 s", "14 s", "8 s", "7 s"][i] })), conclusion: ["APAC drove most of the Q3 revenue change: +18% YoY, led by Shanghai Ops after the July price update.", "EMEA was flat (+1%); AMER fell 4% on the delayed Northwind renewal."], sources: ["Q3 Revenue Bridge", "Revenue by Entity FY24", "APAC Revenue Review", "FX Rates", "Revenue (4000)"] };
+const slow = (term) => new Promise((r) => setTimeout(() => r(ITEMS.filter((it) => (it.title + " " + (it.keywords || []).join(" ")).toLowerCase().includes(term.toLowerCase()))), 900));
+const never = () => new Promise(() => {});
+function deepSearch(term, update) {
+  let i = 0; const steps = STEPS.map((label) => ({ label, state: "pending" }));
+  const tick = () => { steps.forEach((s, j) => { s.state = j < i ? "done" : j === i ? "running" : "pending"; }); update({ status: "running", steps: steps.map((s) => ({ ...s })) }); if (i++ < STEPS.length) t = setTimeout(tick, 1100); else update({ ...DONE }); };
+  let t = setTimeout(tick, 200); return () => clearTimeout(t);
+}
+const base = { items: ITEMS, recentSearches: ["revenue bridge", "FX rates", "approval workflows"], recent: RECENT, prompts: PROMPTS };
+function Sheet(){
+  const [asked, setAsked] = React.useState(null);
+  return <div className="kb-sheet">
+    <Sec title="Live — in the TopBar" note="Click the field or press ⌘K / Ctrl K. Type “revenue”: a 300ms pause, then a spinner and skeleton rows, then grouped results. ↑↓ select, ↵ open, ⌘↵ / Ctrl Enter asks Prophet AI, Esc closes. Choose Deep Search on a query to watch it run.">
+      <div className="gs-frame"><TopBar user={{ name: "Felix Wang", email: "felix@keyfunc.com" }} search={{ ...base, onQuery: slow, onDeepSearch: deepSearch }} onAi={(q) => setAsked(q)} />
+        <div className="gs-note">{asked == null ? "Prophet AI hand-off: nothing asked yet." : "Prophet AI panel would open with: " + (asked ? "“" + asked + "”" : "(no question)")}</div></div>
+    </Sec>
+    <Sec title="Empty — recent searches, recent and Try Asking Prophet AI" note="No scope bar and no pinned rows. Prompts are rows: ↑↓ reaches them and ↵ hands the prompt to Prophet AI. The selected prompt's tile takes the AI hover treatment.">
+      <GlobalSearch inline {...base} />
+    </Sec>
+    <Sec title="Results — scope bar, grouped results, pinned AI rows" note="Under All, groups show Features 4 · Documents 5 · Dimension Members 3 · Actions 2, with View all to switch scope. The matched text is highlighted. Ask Prophet AI and Deep Search stay pinned however many results there are.">
+      <GlobalSearch inline {...base} defaultQuery="revenue" onDeepSearch={deepSearch} style={{ maxHeight: 620 }} />
+    </Sec>
+    <Sec title="Loading" note="After a 300ms typing pause: spinner in place of the search icon, “Searching…”, skeleton rows. The pinned rows already follow the live text.">
+      <GlobalSearch inline {...base} defaultQuery="forecast" onQuery={never} onDeepSearch={deepSearch} />
+    </Sec>
+    <Sec title="Deep Search — done" note="Steps fold into one row (click to expand), then the cited conclusion. Ask Follow-up hands off to Prophet AI; Esc goes back to results.">
+      <GlobalSearch inline {...base} defaultQuery="Q3 revenue change by entity" defaultDeep={DONE} onDeepSearch={deepSearch} />
+    </Sec>
+    <Sec title="中文 — labels={GLOBAL_SEARCH_LABELS.zh}" note="Prophet AI is 方知 in Chinese, with no “AI” suffix. The other strings are drafts.">
+      <div lang="zh-CN"><GlobalSearch inline labels={GLOBAL_SEARCH_LABELS.zh} items={ITEMS} defaultQuery="revenue" onDeepSearch={deepSearch} style={{ maxHeight: 560 }} /></div>
+    </Sec>
+  </div>;
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
+if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"GlobalSearch.jsx","path":"../forms/GlobalSearch.jsx"},{"name":"global-search.js","path":"../forms/global-search.js"}]); }, 0);
+</script></body></html>

package/components/_cards/search.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x770" name="Search Input" subtitle="Bordered · bare top-bar · with value/clear · disabled" -->
+<!-- @dsCard group="Components" viewport="700x756" name="Search Input" subtitle="Bordered · bare top-bar · with value/clear · disabled" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/segmented-control.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x1880" name="Segmented Control" subtitle="Mutually exclusive views in one inset track — md/sm · counts · icons · icon-only · disabled option · full width · ViewToggle" -->
+<!-- @dsCard group="Components" viewport="700x1864" name="Segmented Control" subtitle="Mutually exclusive views in one inset track — md/sm · counts · icons · icon-only · disabled option · full width · ViewToggle" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/select.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x550" name="Select" subtitle="md / sm · placeholder · disabled · error" -->
+<!-- @dsCard group="Components" viewport="700x513" name="Select" subtitle="md / sm · placeholder · disabled · error" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/slider.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x300" name="Slider" subtitle="Filled track · ring knob · value bubble · min/max labels" -->
+<!-- @dsCard group="Components" viewport="700x267" name="Slider" subtitle="Filled track · ring knob · value bubble · min/max labels" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/smart-table.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x1470" name="Smart Table (Database Grid)" subtitle="Frozen header and row numbers · default and compact density · typed fields · hue pills · aggregates · + New" -->
+<!-- @dsCard group="Components" viewport="700x1454" name="Smart Table (Database Grid)" subtitle="Frozen header and row numbers · default and compact density · typed fields · hue pills · aggregates · + New" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/spreadsheet.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="924x600" name="Spreadsheet" subtitle="Formula bar · frozen headers · range selection · =SUM() · sheet tabs · status bar" -->
+<!-- @dsCard group="Components" viewport="924x590" name="Spreadsheet" subtitle="Formula bar · frozen headers · range selection · =SUM() · sheet tabs · status bar" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/stepper.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x630" name="Stepper" subtitle="Multi-step flow header — done · current · upcoming" -->
+<!-- @dsCard group="Components" viewport="700x618" name="Stepper" subtitle="Multi-step flow header — done · current · upcoming" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/table.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x11200" name="Table" subtitle="Anatomy · densities · cell types (display · editable · per tier) · two-line name · sorting · selection · frames · column resize · states · composition" -->
+<!-- @dsCard group="Components" viewport="700x11184" name="Table" subtitle="Anatomy · densities · cell types (display · editable · per tier) · two-line name · sorting · selection · frames · column resize · states · composition" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/tabs.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x1130" name="Tabs" subtitle="Underline tabs · panel tabs · pill filter tabs · counts on every kind" -->
+<!-- @dsCard group="Components" viewport="700x1118" name="Tabs" subtitle="Underline tabs · panel tabs · pill filter tabs · counts on every kind" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/tag.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x450" name="Tag" subtitle="Removable filter tags — distinct from Badge/ActionChip" -->
+<!-- @dsCard group="Components" viewport="700x438" name="Tag" subtitle="Removable filter tags — distinct from Badge/ActionChip" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/textarea.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="924x680" name="Textarea" subtitle="Default · character count · over the limit · disabled" -->
+<!-- @dsCard group="Components" viewport="924x674" name="Textarea" subtitle="Default · character count · over the limit · disabled" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/timeline.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x390" name="Timeline" subtitle="Vertical activity timeline — toned icon nodes on a hairline spine" -->
+<!-- @dsCard group="Components" viewport="700x373" name="Timeline" subtitle="Vertical activity timeline — toned icon nodes on a hairline spine" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/toast.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x800" name="Toast" subtitle="Tones · with/without meta · live ToastStack demo" -->
+<!-- @dsCard group="Components" viewport="700x744" name="Toast" subtitle="Tones · with/without meta · live ToastStack demo" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/toggles.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x2780" name="Toggle Switch" subtitle="Binary settings pill — sizes · semantic red→green · glyph knobs · inline text · captions · async loading" -->
+<!-- @dsCard group="Components" viewport="700x2771" name="Toggle Switch" subtitle="Binary settings pill — sizes · semantic red→green · glyph knobs · inline text · captions · async loading" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/tooltip.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x510" name="Tooltip" subtitle="Placements — top · bottom · left · right, on icon and text triggers" -->
+<!-- @dsCard group="Components" viewport="700x499" name="Tooltip" subtitle="Placements — top · bottom · left · right, on icon and text triggers" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_cards/tree.card.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x3170" name="Tree" subtitle="Cascading checkboxes · disabled nodes · lines · async load · search · drag · reorder · keyboard" -->
+<!-- @dsCard group="Components" viewport="700x3171" name="Tree" subtitle="Cascading checkboxes · disabled nodes · lines · async load · search · drag · reorder · keyboard" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

package/components/_vue/index.mjs CHANGED Viewed

@@ -94,6 +94,7 @@ export { default as Combobox } from "../forms/Combobox.vue";
 export { default as DatePicker } from "../forms/DatePicker.vue";
 export { default as Dropzone } from "../forms/Dropzone.vue";
 export { default as Field } from "../forms/Field.vue";
+export { default as GlobalSearch } from "../forms/GlobalSearch.vue";
 export { default as Input } from "../forms/Input.vue";
 export { default as MultiSelect } from "../forms/MultiSelect.vue";
 export { default as NumberStepper } from "../forms/NumberStepper.vue";
@@ -150,3 +151,4 @@ export { PIPELINE_CATALOG } from "../pipeline/pipeline-catalog.js";
 export { VUE_ICON_PATHS } from "../icons/icon-paths.js";
 export { FEATHER_PATHS } from "../icons/feather-paths.js";
 export { LUCIDE_VERSION, loadLucide, setLucideSource } from "../icons/lucide-loader.js";
+export { GLOBAL_SEARCH_LABELS, GS_ICONS, GS_KINDS } from "../forms/global-search.js";

package/components/buttons/Button.d.ts CHANGED Viewed

@@ -3,14 +3,16 @@ import * as React from "react";
  * Keybricks button — flat, hairline. Height, text, icon and padding come from the size tier of the region it sits in.
  */
 export interface ButtonProps {
-  /** primary (blue #155dfc) | dark (#171717, e.g. "AI Assistant") | outline | ghost | primary-soft (blue tint toggle, e.g. "Data Preview") | danger (solid red, destructive) | danger-soft (red tint, e.g. "Remove") | text (no background/border ever — underlines on hover, e.g. "View all", "Cancel") */
-  variant?: "primary" | "dark" | "outline" | "ghost" | "primary-soft" | "danger" | "danger-soft" | "text";
+  /** primary (blue #155dfc) | dark (#171717, e.g. "Publish" — never for AI; use ai) | outline | ghost | primary-soft (blue tint toggle, e.g. "Data Preview") | danger (solid red, destructive) | danger-soft (red tint, e.g. "Remove") | text (no background/border ever — underlines on hover, e.g. "View all", "Cancel") | ai (Prophet AI / 方知 entry points ONLY — animated 1px gradient ring, gradient tint + glow on hover; icon defaults to "prophet-sparkle"; at most one per region) */
+  variant?: "primary" | "dark" | "outline" | "ghost" | "primary-soft" | "danger" | "danger-soft" | "text" | "ai";
   /** Size tier: sm 28px/12px text (13px in CJK) · md 32px/14px · lg 40px/14px. Omit to inherit the tier of the enclosing region
    *  (toolbar, form, table, dialog — or the app root), which is the default and the normal case: controls that share
    *  a row must share a tier. Set it only on a control that stands alone. */
   size?: "sm" | "md" | "lg";
-  /** Icon glyph name */
-  icon?: string;
+  /** Icon glyph name, or your own element (Vue: name, component or VNode; #icon slot). variant="ai" takes a glyph name only. */
+  icon?: string | React.ReactNode;
+  /** Separate trailing mark (e.g. "chevron-down" on a menu button); stays visible while loading. Vue: also #trailing slot. */
+  trailingIcon?: string | React.ReactNode;
   /** Overrides the tier's icon size (14 at sm, 16 at md/lg) */
   iconSize?: number;
   /** Where `icon` renders relative to the label (default "left") */
@@ -26,11 +28,18 @@ export interface ButtonProps {
   iconOnly?: boolean;
   /** aria-label, required when iconOnly */
   label?: string;
+  /** Fallback label when there are no children */
+  text?: string;
+  /** Native button type (default "button"); "submit" for legacy forms */
+  nativeType?: "button" | "submit" | "reset";
+  /** Force the hover styling — for specimens */
+  hovered?: boolean;
   /** Force the press (mouse-down) styling — for specimens and controlled toggles */
   pressed?: boolean;
   /** Force the keyboard-focus ring — for specimens */
   focused?: boolean;
-  onClick?: () => void;
+  /** Receives the native event; not called while disabled or loading */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   children?: React.ReactNode;
   style?: React.CSSProperties;
 }

package/components/buttons/Button.jsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
+import { aiStyles, aiSpinDelay, rampAiSpin } from "./ai-button.js";
 /* Every dimension comes from the size tier the button sits in (tokens/layout.css): height, text, icon and padding
    switch together when a region declares data-size="sm" | "md" | "lg". A `size` prop only stamps that attribute on
@@ -35,14 +36,50 @@ function Spinner({ size, color }) {
   return <span style={{ display: "inline-block", width: size, height: size, ...(size ? null : tierIcon), borderRadius: "var(--radius-full)", border: "2px solid currentColor", borderTopColor: "transparent", opacity: .9, color, animation: "kb-spin .7s linear infinite", flexShrink: 0 }} />;
 }
-/** Keybricks button. variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text; size: sm 28 | md 32 | lg 40 — omit it to inherit the region's tier (the default). Interaction states: hover (one step darker) · press (two steps, set via mouse-down) · keyboard focus ring · loading · disabled. */
-export function Button({ variant = "primary", size, icon, iconSize, iconPosition = "left", medium, disabled, loading, fullWidth, iconOnly, label, pressed, focused, children, style, onClick, ...rest }) {
+/** variant="ai" — Prophet AI (方知) entry points only. Same box as any Button at the tier; see ai-button.js. */
+function AiButton({ size, icon, trailing, nativeType, iconSize, medium, fullWidth, iconOnly, label, busy, loading, hovered, isPressed, isFocused, setHover, setPress, setFocus, children, style, onClick, rest }) {
+  if (typeof icon !== "string" || !icon) icon = "prophet-sparkle";
+  const ref = React.useRef(null);
+  const delay = React.useRef(aiSpinDelay()).current;
+  const on = !busy && hovered;
+  React.useEffect(() => rampAiSpin(ref.current, on), [on]);
+  const a = aiStyles({ on, press: !busy && isPressed, busy, focused: isFocused, medium, fullWidth, iconOnly, delay, style });
+  const sz = iconSize || 16, tier = iconSize ? null : tierIcon;
+  return (
+    <button ref={ref} type={nativeType} data-press="own" data-size={size} style={a.outer} disabled={busy} aria-busy={loading || undefined} aria-label={iconOnly ? label : undefined} onClick={onClick}
+      onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setPress(false); }}
+      onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)}
+      onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") setPress(true); }} onKeyUp={() => setPress(false)}
+      onFocus={(e) => { try { setFocus(e.target.matches(":focus-visible")); } catch (err) { setFocus(true); } }} onBlur={() => setFocus(false)} {...rest}>
+      <span aria-hidden="true" style={a.glow} />
+      <span aria-hidden="true" style={a.ring} />
+      <span style={a.surface}>
+        <span aria-hidden="true" style={a.tint} />
+        {loading ? <span style={a.iconBox}><Spinner size={iconSize} /></span> : icon ? (
+          <span style={a.iconBox}>
+            <Icon name={icon} size={sz} style={{ ...tier, ...a.iconRest }} />
+            <Icon name={icon} size={sz} gradient style={{ ...tier, ...a.iconGrad }} />
+          </span>
+        ) : null}
+        {iconOnly ? null : <span style={a.label}>{children}</span>}
+        {trailing}
+      </span>
+    </button>
+  );
+}
+/** Keybricks button. variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text | ai; size: sm 28 | md 32 | lg 40 — omit it to inherit the region's tier (the default). Interaction states: hover (one step darker) · press (two steps, set via mouse-down) · keyboard focus ring · loading · disabled. */
+export function Button({ variant = "primary", size, icon, trailingIcon, iconSize, iconPosition = "left", medium, disabled, loading, fullWidth, iconOnly, label, text, nativeType = "button", hovered, pressed, focused, children, style, onClick, ...rest }) {
   const [hover, setHover] = React.useState(false);
   const [press, setPress] = React.useState(false);
   const [focus, setFocus] = React.useState(false);
   const busy = disabled || loading;
   const isPressed = press || pressed;
   const isFocused = focus || focused;
+  const glyph = (g) => (typeof g === "string" ? <Icon name={g} size={iconSize || 16} style={iconSize ? null : tierIcon} /> : g || null);
+  const tail = trailingIcon ? glyph(trailingIcon) : null;
+  const label_ = children ?? text;
+  if (variant === "ai") return <AiButton size={size} icon={icon} trailing={tail} nativeType={nativeType} iconSize={iconSize} medium={medium} fullWidth={fullWidth} iconOnly={iconOnly} label={label} busy={busy} loading={loading} hovered={hover || hovered} isPressed={isPressed} isFocused={isFocused} setHover={setHover} setPress={setPress} setFocus={setFocus} style={style} onClick={onClick} rest={rest}>{label_}</AiButton>;
   const s = {
     ...btnBase, ...variants[variant],
     ...(medium ? { fontWeight: "var(--weight-medium)" } : null),
@@ -57,23 +94,23 @@ export function Button({ variant = "primary", size, icon, iconSize, iconPosition
       if (isPressed) s.opacity = .7;
     } else if (isPressed) {
       s.background = presses[variant];
-    } else if (hover) {
+    } else if (hover || hovered) {
       s.background = hovers[variant];
     }
     if (isFocused) s.boxShadow = "var(--ring-focus)";
   }
-  const iconStyle = iconSize ? null : tierIcon;
-  const leading = loading ? <Spinner size={iconSize} color={s.color} /> : (icon && iconPosition === "left" ? <Icon name={icon} size={iconSize || 16} style={iconStyle} /> : null);
-  const trailing = !loading && icon && iconPosition === "right" ? <Icon name={icon} size={iconSize || 16} style={iconStyle} /> : null;
+  const leading = loading ? <Spinner size={iconSize} color={s.color} /> : (icon && iconPosition === "left" ? glyph(icon) : null);
+  const trailing = !loading && icon && iconPosition === "right" ? glyph(icon) : null;
   return (
-    <button type="button" data-press="own" data-size={size} style={s} disabled={busy} aria-label={iconOnly ? label : undefined} onClick={onClick}
+    <button type={nativeType} data-press="own" data-size={size} style={s} disabled={busy} aria-busy={loading || undefined} aria-label={iconOnly ? label : undefined} onClick={onClick}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setPress(false); }}
       onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)}
       onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") setPress(true); }} onKeyUp={() => setPress(false)}
       onFocus={(e) => { try { setFocus(e.target.matches(":focus-visible")); } catch (err) { setFocus(true); } }} onBlur={() => setFocus(false)} {...rest}>
       {leading}
-      {iconOnly ? null : children}
+      {iconOnly ? null : label_}
       {trailing}
+      {tail}
     </button>
   );
 }

package/components/buttons/Button.vue CHANGED Viewed

@@ -1,7 +1,8 @@
 <script setup>
 import { px } from '../px.js'
-import { cloneVNode, computed, h, isVNode, ref } from 'vue'
+import { cloneVNode, computed, h, isVNode, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import Icon from '../icons/Icon.vue'
+import { aiStyles, aiSpinDelay, rampAiSpin } from './ai-button.js'
 // Every dimension comes from the size tier the button sits in (tokens/layout.css): height, text, icon and padding
 // switch together when a region declares data-size="sm" | "md" | "lg". The `size` prop only stamps that attribute on
@@ -22,13 +23,13 @@ const hovers = { primary: 'var(--action-primary-hover)', dark: 'var(--action-dar
 const presses = { primary: 'var(--action-primary-active)', dark: 'var(--action-dark-active)', outline: 'var(--bg-press)', ghost: 'var(--bg-press)', 'primary-soft': 'var(--soft-active)', danger: 'var(--danger-active)', 'danger-soft': 'var(--danger-soft-active)' }
 const colorHoverVariants = { text: 'var(--text-heading)' }
-// Button — variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text; size: sm 28 | md 32 | lg 40 — omit it to inherit the region's tier (the default).
+// Button — variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text | ai (Prophet AI entry points only); size: sm 28 | md 32 | lg 40 — omit it to inherit the region's tier (the default).
 const props = defineProps({
   variant: { type: String, default: 'primary' }, size: String,
   icon: [String, Object, Function], trailingIcon: [String, Object, Function],
   iconSize: Number, iconPosition: { type: String, default: 'left' },
   medium: Boolean, disabled: Boolean, loading: Boolean, fullWidth: Boolean, iconOnly: Boolean,
-  label: String, text: String, pressed: Boolean, focused: Boolean, style: Object,
+  label: String, text: String, hovered: Boolean, pressed: Boolean, focused: Boolean, style: Object,
   nativeType: { type: String, default: 'button', validator: value => ['button', 'submit', 'reset'].includes(value) },
 })
 const emit = defineEmits(['click'])
@@ -47,7 +48,7 @@ const s = computed(() => {
       if (hover.value || isPressed.value) { base.color = colorHoverVariants[props.variant]; base.textDecoration = 'underline' }
       if (isPressed.value) base.opacity = .7
     } else if (isPressed.value) base.background = presses[props.variant]
-    else if (hover.value) base.background = hovers[props.variant]
+    else if (hover.value || props.hovered) base.background = hovers[props.variant]
     if (isFocused.value) base.boxShadow = 'var(--ring-focus)'
   }
   return base
@@ -72,42 +73,43 @@ function onClick(event) {
   if (busy.value) return
   emit('click', event)
 }
+// variant="ai" — see ai-button.js
+const aiEl = ref(null), aiDelay = aiSpinDelay()
+const aiOn = computed(() => !busy.value && (hover.value || props.hovered))
+const ai = computed(() => aiStyles({ on: aiOn.value, press: !busy.value && isPressed.value, busy: busy.value, focused: isFocused.value, medium: props.medium, fullWidth: props.fullWidth, iconOnly: props.iconOnly, delay: aiDelay, style: props.style }))
+const aiIcon = computed(() => (typeof props.icon === 'string' && props.icon) || 'prophet-sparkle')
+let stopRamp = () => {}
+const ramp = (on) => { stopRamp(); stopRamp = rampAiSpin(aiEl.value, on) }
+watch(aiOn, ramp)
+onMounted(() => { if (aiOn.value) ramp(true) })
+onBeforeUnmount(() => stopRamp())
 </script>
 <template>
-  <button
-    :type="nativeType"
-    data-press="own"
-    :data-size="size"
-    :style="s"
-    :disabled="busy"
-    :aria-busy="loading"
-    :aria-label="iconOnly ? label : undefined"
-    @click="onClick"
-    @mouseenter="hover = true"
-    @mouseleave="hover = false; press = false"
-    @mousedown="press = true"
-    @mouseup="press = false"
-    @keydown.enter="press = true"
-    @keydown.space="press = true"
-    @keyup="press = false"
-    @focus="focus = $event.target.matches(':focus-visible')"
-    @blur="focus = false"
-  >
-    <slot v-if="loading" name="loading" :size="iSize" :style="iconStyle">
-      <span
-        aria-hidden="true"
-        :style="{ display: 'inline-block', width: px(iSize), height: px(iSize), ...iconStyle, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', opacity: .9, animation: 'kb-spin .7s linear infinite', flexShrink: 0 }"
-      />
-    </slot>
-    <slot v-else-if="iconPosition === 'left'" name="icon" :size="iSize" :style="iconStyle">
-      <LeadingIcon v-if="icon" />
-    </slot>
+  <button v-if="variant === 'ai'" ref="aiEl" :type="nativeType" data-press="own" :data-size="size" :style="ai.outer" :disabled="busy" :aria-busy="loading" :aria-label="iconOnly ? label : undefined"
+    @click="onClick" @mouseenter="hover = true" @mouseleave="hover = false; press = false"
+    @mousedown="press = true" @mouseup="press = false" @keydown.enter="press = true" @keydown.space="press = true" @keyup="press = false"
+    @focus="focus = $event.target.matches(':focus-visible')" @blur="focus = false">
+    <span aria-hidden="true" :style="ai.glow" />
+    <span aria-hidden="true" :style="ai.ring" />
+    <span :style="ai.surface">
+      <span aria-hidden="true" :style="ai.tint" />
+      <span v-if="loading" :style="ai.iconBox"><slot name="loading" :size="iSize" :style="iconStyle"><span aria-hidden="true" :style="{ display: 'inline-block', width: px(iSize), height: px(iSize), ...iconStyle, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', opacity: .9, animation: 'kb-spin .7s linear infinite', flexShrink: 0 }" /></slot></span>
+      <span v-else :style="ai.iconBox">
+        <Icon :name="aiIcon" :size="iSize" :style="{ ...iconStyle, ...ai.iconRest }" />
+        <Icon :name="aiIcon" :size="iSize" gradient :style="{ ...iconStyle, ...ai.iconGrad }" />
+      </span>
+      <span v-if="!iconOnly" :style="ai.label"><slot>{{ text }}</slot></span>
+      <slot name="trailing" :size="iSize" :style="iconStyle" :loading="loading"><TrailingIcon v-if="trailingIcon" /></slot>
+    </span>
+  </button>
+  <button v-else :type="nativeType" data-press="own" :data-size="size" :style="s" :disabled="busy" :aria-busy="loading" :aria-label="iconOnly ? label : undefined"
+    @click="onClick" @mouseenter="hover = true" @mouseleave="hover = false; press = false"
+    @mousedown="press = true" @mouseup="press = false" @keydown.enter="press = true" @keydown.space="press = true" @keyup="press = false"
+    @focus="focus = $event.target.matches(':focus-visible')" @blur="focus = false">
+    <slot v-if="loading" name="loading" :size="iSize" :style="iconStyle"><span aria-hidden="true" :style="{ display: 'inline-block', width: px(iSize), height: px(iSize), ...iconStyle, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', opacity: .9, animation: 'kb-spin .7s linear infinite', flexShrink: 0 }" /></slot>
+    <slot v-else-if="iconPosition === 'left'" name="icon" :size="iSize" :style="iconStyle"><LeadingIcon v-if="icon" /></slot>
     <slot v-if="!iconOnly">{{ text }}</slot>
-    <slot v-if="!loading && iconPosition === 'right'" name="icon" :size="iSize" :style="iconStyle">
-      <LeadingIcon v-if="icon" />
-    </slot>
-    <slot name="trailing" :size="iSize" :style="iconStyle" :loading="loading">
-      <TrailingIcon v-if="trailingIcon" />
-    </slot>
+    <slot v-if="!loading && iconPosition === 'right'" name="icon" :size="iSize" :style="iconStyle"><LeadingIcon v-if="icon" /></slot>
+    <slot name="trailing" :size="iSize" :style="iconStyle" :loading="loading"><TrailingIcon v-if="trailingIcon" /></slot>
   </button>
 </template>

package/components/buttons/Button.vue.d.ts CHANGED Viewed

@@ -2,7 +2,8 @@ import type { Component, ComponentOptionsMixin, CSSProperties, DefineComponent,
 /** Vue 专用声明；同目录 Button.d.ts 继续描述 React 接口。 */
 export interface VueButtonProps {
-  variant?: 'primary' | 'dark' | 'outline' | 'ghost' | 'primary-soft' | 'danger' | 'danger-soft' | 'text';
+  /** ai：仅用于 Prophet AI（方知）入口；它的 icon 只接受 DS 图标名，默认 prophet-sparkle。 */
+  variant?: 'primary' | 'dark' | 'outline' | 'ghost' | 'primary-soft' | 'danger' | 'danger-soft' | 'text' | 'ai';
   size?: 'sm' | 'md' | 'lg';
   icon?: string | Component | VNode;
   /** 不随 loading 隐藏，适用于下拉箭头等独立的尾部标记。 */
@@ -17,6 +18,8 @@ export interface VueButtonProps {
   label?: string;
   /** 默认插槽的后备文本。 */
   text?: string;
+  /** 强制悬停样式，用于规范展示。 */
+  hovered?: boolean;
   pressed?: boolean;
   focused?: boolean;
   style?: CSSProperties;

package/components/buttons/ai-button.js ADDED Viewed

@@ -0,0 +1,54 @@
+/* Button variant="ai" — the Prophet AI (方知) entry treatment, shared by Button.jsx and Button.vue.
+   Same outer box as every Button at the tier (height, radius, padding); the 1px border is replaced by a 1px ring:
+   at rest a gradient comet travels round a neutral track; on hover the full ring, an 8% gradient tint, a soft glow and a
+   gradient icon fade in and the ring speeds up. Tokens: tokens/ai.css. One CSS animation (kb-ai-spin) drives the angle;
+   hover speed is ramped with Animation.playbackRate, so the angle never jumps. */
+/* The animated angle needs a registered <angle> property and a keyframe on it — injected once, so the token files stay plain. */
+if (typeof document !== "undefined" && !document.querySelector("style[data-kb-ai]")) {
+  const el = document.createElement("style");
+  el.setAttribute("data-kb-ai", "");
+  el.textContent = "@property --kb-ai-angle{syntax:'<angle>';inherits:true;initial-value:0deg}@keyframes kb-ai-spin{to{--kb-ai-angle:360deg}}";
+  document.head.appendChild(el);
+}
+const FADE = "opacity 300ms var(--ease-out)";
+const FULL = "conic-gradient(from var(--kb-ai-angle), var(--ai-gradient-stops))";
+const COMET = "conic-gradient(from var(--kb-ai-angle), var(--ai-ring-rest-track) 0 50%, var(--ai-gradient-start) 78%, var(--ai-gradient-end) 100%)";
+const layer = { position: "absolute", inset: "0", borderRadius: "inherit", pointerEvents: "none", transition: FADE };
+/** A random phase per instance, so neighbouring rings never move in lockstep. */
+export const aiSpinDelay = () => "-" + (Math.random() * 5).toFixed(2) + "s";
+/** on = hovered (and not busy). Lengths are strings so the same objects work in React and Vue. */
+export function aiStyles({ on, press, busy, focused, medium, fullWidth, iconOnly, delay, style }) {
+  const tint = press ? "var(--ai-tint-press)" : "var(--ai-tint)";
+  return {
+    outer: { position: "relative", isolation: "isolate", display: fullWidth ? "flex" : "inline-flex", alignItems: "stretch", width: fullWidth ? "100%" : iconOnly ? "var(--control-h)" : undefined, height: "var(--control-h)", padding: "var(--ai-ring-width)", border: "none", borderRadius: "var(--radius-md)", boxSizing: "border-box", background: COMET, animation: "kb-ai-spin var(--ai-spin-rest) linear " + delay + " infinite", cursor: busy ? "default" : "pointer", opacity: busy ? .55 : undefined, boxShadow: focused && !busy ? "var(--ring-focus)" : undefined, fontFamily: "var(--font-sans)", fontWeight: medium ? "var(--weight-medium)" : "var(--weight-regular)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: "var(--text-body)", whiteSpace: "nowrap", verticalAlign: "middle", ...style },
+    glow: { ...layer, zIndex: "-1", background: FULL, filter: "blur(var(--ai-glow-blur))", opacity: on ? "var(--ai-glow-opacity)" : "0" },
+    ring: { ...layer, background: FULL, opacity: on ? "1" : "0" },
+    surface: { position: "relative", flex: "1 1 auto", display: "flex", alignItems: "center", justifyContent: "center", gap: iconOnly ? "0" : "6px", padding: iconOnly ? "0" : "0 calc(var(--control-px) - var(--ai-ring-width))", borderRadius: "calc(var(--radius-md) - var(--ai-ring-width))", background: "var(--bg-surface)", overflow: "hidden" },
+    tint: { ...layer, background: "linear-gradient(90deg, color-mix(in srgb, var(--ai-gradient-start) " + tint + ", transparent), color-mix(in srgb, var(--ai-gradient-end) " + tint + ", transparent))", opacity: on || press ? "1" : "0" },
+    iconBox: { position: "relative", display: "inline-flex", flexShrink: "0" },
+    iconRest: { transition: FADE, opacity: on ? "0" : "1" },
+    iconGrad: { position: "absolute", inset: "0", transition: FADE, opacity: on ? "1" : "0" },
+    label: { position: "relative" },
+  };
+}
+const secs = (v, d) => { v = (v || "").trim(); const n = parseFloat(v); return isNaN(n) ? d : /ms$/.test(v) ? n / 1000 : n; };
+/** Ease the ring's speed toward rest (fast=false) or hover (fast=true). Returns a cancel function. */
+export function rampAiSpin(el, fast) {
+  if (!el || !el.getAnimations || (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches)) return () => {};
+  const anim = el.getAnimations().find((a) => a.animationName === "kb-ai-spin");
+  if (!anim) return () => {};
+  const cs = getComputedStyle(el);
+  const target = fast ? secs(cs.getPropertyValue("--ai-spin-rest"), 5) / secs(cs.getPropertyValue("--ai-spin-hover"), 1.2) : 1;
+  let raf = 0, last = performance.now();
+  const step = (t) => {
+    const dt = Math.min(0.05, (t - last) / 1000); last = t;
+    const r = anim.playbackRate + (target - anim.playbackRate) * Math.min(1, dt * 5);
+    if (Math.abs(target - r) < 0.01) { anim.playbackRate = target; return; }
+    anim.playbackRate = r; raf = requestAnimationFrame(step);
+  };
+  raf = requestAnimationFrame(step);
+  return () => cancelAnimationFrame(raf);
+}

package/components/buttons/buttons.prompt.md CHANGED Viewed

@@ -2,7 +2,8 @@ Buttons: `Button` (primary/dark/outline/ghost/primary-soft), `IconButton` (squar
 ```jsx
 <Button icon="send">Submit</Button>
-<Button variant="dark" icon="ai-sparkles">AI Assistant</Button>
+<Button variant="dark" icon="upload-cloud">Publish</Button>
+<Button variant="ai">Ask Prophet AI</Button>   // 中文：问方知 — icon defaults to prophet-sparkle
 <Button variant="ghost" icon="play">Run Test</Button>
 <Button variant="text">Cancel</Button>
 <Button variant="primary-soft" icon="eye">Data Preview</Button>
@@ -17,4 +18,8 @@ Buttons: `Button` (primary/dark/outline/ghost/primary-soft), `IconButton` (squar
 <ActionChip tone="success">Mark as New</ActionChip>
 ```
-Primary = the single blue CTA per view. Dark = brand-level actions (AI Assistant, Show). Ghost = no box at rest, grey wash on hover — the default for actions in card and section headers, table toolbars and panel chrome ("Export", "Filter", "Run Test", "Back"); same height as outline so it lines up. `text` = bare label, underline on hover — links that happen to be buttons ("View all", "Clear filters"), never beside a boxed button and never a toolbar action. Emphasis is always the variant, never the size: a quieter action gets `ghost` or `text`, not `size="sm"`. Danger/danger-soft = destructive actions. lg (36px) comes from an lg region — dialogs and wizard footers; `Modal` sets it for you. A `size` prop on a single button is only for a control that stands alone, never to adjust one button inside a bar. `loading` swaps the icon for a spinner and disables the button without changing its size; `iconOnly` needs a `label` for accessibility; `ButtonGroup` fuses adjacent buttons into one segmented control or a split button (main action + attached icon-only).
+Primary = the single blue CTA per view. Dark = brand-level actions that should outweigh the page but not compete with the blue CTA (Publish, Show). Never for AI — Prophet AI entries use `ai`. Ghost = no box at rest, grey wash on hover — the default for actions in card and section headers, table toolbars and panel chrome ("Export", "Filter", "Run Test", "Back"); same height as outline so it lines up. `text` = bare label, underline on hover — links that happen to be buttons ("View all", "Clear filters"), never beside a boxed button and never a toolbar action. Emphasis is always the variant, never the size: a quieter action gets `ghost` or `text`, not `size="sm"`. Danger/danger-soft = destructive actions. lg (36px) comes from an lg region — dialogs and wizard footers; `Modal` sets it for you. A `size` prop on a single button is only for a control that stands alone, never to adjust one button inside a bar. `loading` swaps the icon for a spinner and disables the button without changing its size; `iconOnly` needs a `label` for accessibility; `ButtonGroup` fuses adjacent buttons into one segmented control or a split button (main action + attached icon-only).
+`ai` = Prophet AI (方知) entry points only — never a generic primary action, at most one per region. Same box, tiers and generic states (focus, disabled, loading) as every Button; only the surface differs: a 1px travelling gradient ring at rest, and on hover the full ring, an 8% gradient tint, a soft glow and a gradient icon, with the ring speeding up. It only triggers (opens the Prophet AI panel); it never shows AI content in place. Tokens live in `tokens/ai.css` (`--ai-*`); `<Icon gradient/>` renders the gradient glyph.
+Legacy adapters (both frameworks): `trailingIcon` (e.g. "chevron-down" on a menu button, stays visible while loading), `nativeType` ("submit" for old forms), `text` (fallback label), element / component icons, `aria-busy`. Vue adds `#icon` / `#loading` / `#trailing` slots and has its own types in `Button.vue.d.ts`. Migrating the old actnplanBtn: `BUTTON_MIGRATION.md`.