@keyfunc/keybricks-ds 2.6.0 → 2.8.0

package/components/navigation/Tree.d.ts

@@ -6,7 +6,8 @@ export interface TreeItem {
   /** Row text; `label` is accepted as an alias */
   title?: string;
   label?: string;
-  icon?: string;
+  /** Glyph name; false = no glyph on this row and no space kept for one — the text follows the expand arrow (e.g. a "Documents" root). Works with showIcon on. */
+  icon?: string | false;
   /** Leaf glyph hue: orange | green | purple | blue | teal | gray */
   hue?: string;
   /** Right-aligned count */
@@ -37,6 +38,8 @@ export interface TreeDropInfo {
  * Nested tree view: expand/collapse, single or multiple selection, cascading checkboxes with
  * indeterminate parents, disabled nodes, connector lines, async loading, search highlight,
  * drag to move, keyboard navigation.
+ * Follows the size tier of its region (data-size): row height --control-h (sm 28 · md 32 · lg 40), text --control-text / --control-leading /
+ * --control-tracking (sm 12px, 13px in CJK · md 14px), glyph --control-icon − 1px (sm 13 · md 15). md looks exactly as before.
  */
 export interface TreeProps {
   items?: TreeItem[];
@@ -63,6 +66,7 @@ export interface TreeProps {
   multiple?: boolean;
   /** false = rows only expand, never select */
   selectable?: boolean;
+  /** Glyph before each title (default true); a node with icon: false skips it either way */
   showIcon?: boolean;
   /** Draw connector lines instead of plain indentation */
   showLine?: boolean;

package/components/navigation/Tree.jsx

@@ -154,7 +154,7 @@ function Row({ item, state, cfg, api }) {
         onKeyDown={(e) => api.keyDown(e, item)}
         onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
         style={{
-          position: "relative", minHeight: "var(--h-tree-item)", borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", gap: 6,
+          position: "relative", minHeight: "var(--control-h)", borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", gap: 6,
           padding: cfg.showLine ? "0 8px 0 2px" : "5px 8px", paddingLeft: cfg.showLine ? 2 : 8 + depth * INDENT, boxSizing: "border-box",
           cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.45 : 1,
           background: dropAt === "inside" ? "var(--soft-bg)" : selected ? "var(--bg-active)" : hover && !disabled ? "var(--bg-hover)" : "transparent",
@@ -169,12 +169,12 @@ function Row({ item, state, cfg, api }) {
             <Checkbox checked={checked} indeterminate={half} disabled={disabled || node.disableCheckbox} tabIndex={-1} onChange={() => api.check(key)} />
           </span>
         ) : null}
-        {cfg.showIcon ? (
+        {cfg.showIcon && node.icon !== false ? (
           <span style={{ color: branch ? "var(--text-muted)" : docHues[node.hue || "gray"], display: "inline-flex", flexShrink: 0 }}>
-            <Icon name={node.icon || (branch ? (open ? "folder-open" : "folder") : "file-text")} size={15} />
+            <Icon name={node.icon || (branch ? (open ? "folder-open" : "folder") : "file-text")} size={15} style={{ width: "calc(var(--control-icon) - 1px)", height: "calc(var(--control-icon) - 1px)" }} />
           </span>
         ) : null}
-        <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", fontWeight: selected ? "var(--weight-medium)" : "var(--weight-regular)", color: disabled ? "var(--text-muted)" : "var(--text-heading)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+        <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", fontWeight: selected ? "var(--weight-medium)" : "var(--weight-regular)", color: disabled ? "var(--text-muted)" : "var(--text-heading)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
           <Highlight text={titleOf(node)} query={cfg.searchValue} />
         </span>
         {node.tag ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: 1, padding: "2px 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", color: "var(--text-secondary)", flexShrink: 0 }}>{node.tag}</span> : null}
@@ -182,7 +182,7 @@ function Row({ item, state, cfg, api }) {
         {cfg.rowActions && !disabled ? <span style={{ marginLeft: node.count != null ? 6 : "auto", display: "flex", gap: 2, opacity: hover ? 1 : 0, transition: "var(--t-hover)" }} onClick={(e) => e.stopPropagation()}>{cfg.rowActions(node)}</span> : null}
       </div>
       {open && loading && !kids.length ? (
-        <div style={{ paddingLeft: 8 + (depth + 1) * INDENT + 14, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-muted)", height: "var(--h-tree-item)", display: "flex", alignItems: "center" }}>Loading…</div>
+        <div style={{ paddingLeft: 8 + (depth + 1) * INDENT + 14, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-muted)", height: "var(--control-h)", display: "flex", alignItems: "center" }}>Loading…</div>
       ) : null}
     </>
   );
@@ -193,7 +193,9 @@ function Row({ item, state, cfg, api }) {
  * (with indeterminate parents and `checkStrictly` opt-out), disabled nodes and disabled
  * checkboxes, connector lines, async child loading, search highlighting, drag to move,
  * and full keyboard navigation. Node shape: { key, title, icon, hue, count, tag, children,
- * disabled, disableCheckbox, selectable, checkable, isLeaf }.
+ * disabled, disableCheckbox, selectable, checkable, isLeaf }. icon: false drops that row's glyph (no gap kept), e.g. a root.
+ * Follows the size tier of its region: row --control-h (sm 28 · md 32 · lg 40), text --control-text / -leading / -tracking,
+ * glyph --control-icon − 1px (md 15, as before).
  */
 export function Tree({
   items = [], treeData,
@@ -356,7 +358,7 @@ export function Tree({
     <div role="tree" aria-multiselectable={multiple || undefined} style={{ display: "flex", flexDirection: "column", gap: showLine ? 0 : 1, minWidth: 0, ...style }}>
       <style>{"@keyframes kb-tree-spin{to{transform:rotate(360deg)}}"}</style>
       {rows.length === 0 ? (
-        <div style={{ padding: "10px 8px", fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", color: "var(--text-muted)" }}>No matching items</div>
+        <div style={{ padding: "10px 8px", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", color: "var(--text-muted)" }}>No matching items</div>
       ) : rows.map((r) => <Row key={r.key} item={r} state={state} cfg={cfg} api={api} />)}
     </div>
   );

package/components/navigation/Tree.vue

@@ -4,7 +4,8 @@ import Icon from '../icons/Icon.vue'
 import Checkbox from '../forms/Checkbox.vue'
 // Nested tree view: expand/collapse, single or multiple selection, cascading checkboxes with
 // indeterminate parents (checkStrictly opts out), disabled nodes, connector lines, async
-// loadData, search highlight, drag to move, keyboard navigation.
+// loadData, search highlight, drag to move, keyboard navigation. A node with icon: false has no glyph and keeps no gap for one.
+// Follows the size tier of its region: row --control-h (sm 28 · md 32 · lg 40), text --control-text / -leading / -tracking, glyph --control-icon − 1px (md 15).
 const docHues = { orange: 'var(--cat-transform)', green: 'var(--cat-source)', purple: 'var(--cat-merge)', blue: 'var(--info-fg)', teal: 'var(--cat-output)', gray: 'var(--text-muted)' }
 const INDENT = 18
 // Insert marker (reorder before / after): a 2px --action-primary line with a 6px dot at its left end, drawn between rows.
@@ -235,7 +236,7 @@ const dropAt = k => (drop.value && drop.value.key === k ? drop.value.pos : null)
       @click="rowClick(row.n)" @contextmenu="onCtx($event, row.key)" @keydown="keyDown($event, row)"
       :class="{ 'is-disabled': row.n.disabled }"
       :style="{
-        position: 'relative', minHeight: 'var(--h-tree-item)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', gap: '6px',
+        position: 'relative', minHeight: 'var(--control-h)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', gap: '6px',
         padding: showLine ? '0 8px 0 2px' : '5px 8px', paddingLeft: showLine ? '2px' : (8 + row.depth * INDENT) + 'px', boxSizing: 'border-box',
         cursor: row.n.disabled ? 'not-allowed' : 'pointer', opacity: row.n.disabled ? 0.45 : 1,
         background: dropAt(row.key) === 'inside' ? 'var(--soft-bg)' : selected.includes(row.key) ? 'var(--bg-active)' : 'transparent',
@@ -260,10 +261,10 @@ const dropAt = k => (drop.value && drop.value.key === k ? drop.value.pos : null)
         <Checkbox :checked="view.full.has(row.key)" :indeterminate="view.half.has(row.key)"
           :disabled="row.n.disabled || row.n.disableCheckbox" :tabindex="-1" @change="check(row.key)" />
       </span>
-      <span v-if="showIcon" :style="{ color: isBranch(row.n) ? 'var(--text-muted)' : docHues[row.n.hue || 'gray'], display: 'inline-flex', flexShrink: 0 }">
-        <Icon :name="row.n.icon || (isBranch(row.n) ? (openKeys.includes(row.key) ? 'folder-open' : 'folder') : 'file-text')" :size="15" />
+      <span v-if="showIcon && row.n.icon !== false" :style="{ color: isBranch(row.n) ? 'var(--text-muted)' : docHues[row.n.hue || 'gray'], display: 'inline-flex', flexShrink: 0 }">
+        <Icon :name="row.n.icon || (isBranch(row.n) ? (openKeys.includes(row.key) ? 'folder-open' : 'folder') : 'file-text')" :size="15" :style="{ width: 'calc(var(--control-icon) - 1px)', height: 'calc(var(--control-icon) - 1px)' }" />
       </span>
-      <span :style="{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', fontWeight: selected.includes(row.key) ? 'var(--weight-medium)' : 'var(--weight-regular)', color: row.n.disabled ? 'var(--text-muted)' : 'var(--text-heading)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }">
+      <span :style="{ fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', fontWeight: selected.includes(row.key) ? 'var(--weight-medium)' : 'var(--weight-regular)', color: row.n.disabled ? 'var(--text-muted)' : 'var(--text-heading)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }">
         <template v-for="(p, i) in parts(titleOf(row.n))" :key="i"><mark v-if="p.hit" style="background:var(--soft-bg);color:var(--info-fg);font-weight:var(--weight-medium);padding:0;border-radius:2px">{{ p.t }}</mark><template v-else>{{ p.t }}</template></template>
       </span>
       <span v-if="row.n.tag" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:1;padding:2px 5px;border-radius:var(--radius-sm);background:var(--bg-inset);color:var(--text-secondary);flex-shrink:0">{{ row.n.tag }}</span>
@@ -271,7 +272,7 @@ const dropAt = k => (drop.value && drop.value.key === k ? drop.value.pos : null)
       <!-- row actions: #row-actions="{ node }" slot, or rowActions(node) returning a VNode; shown on hover / focus -->
       <span v-if="(rowActions || $slots['row-actions']) && !row.n.disabled" class="kb-tree-actions" @click.stop :style="{ marginLeft: row.n.count != null ? '6px' : 'auto', display: 'flex', gap: '2px', flexShrink: 0 }"><slot name="row-actions" :node="row.n"><Cell v-if="rowActions" :v="rowActions(row.n)" /></slot></span>
     </div>
-    <div v-if="!rows.length" style="padding:10px 8px;font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-muted)">No matching items</div>
+    <div v-if="!rows.length" style="padding:10px 8px;font-family:var(--font-sans);font-size:var(--control-text);line-height:var(--control-leading);color:var(--text-muted)">No matching items</div>
   </div>
 </template>
 <style scoped>

package/components/navigation/navigation.prompt.md

@@ -22,3 +22,5 @@ applyStoredTheme();                   // call once at app start
 ```
 
 App chrome: `<Sidebar tone="recessed" version="Version 2.4.0" onSelect={…}/>` (items default to `KEYBRICKS_NAV`, footer to `KEYBRICKS_NAV_FOOTER`; `trailing: true` items open a `<SidePanel title="Documents" onClose={…}>` docked beside the rail — same `tone`) and `<TopBar user={{ name, email }} userMenu={<UserMenu … theme={t} onThemeChange={setT}/>}/>`.
+
+`Tree` follows the size tier of its region (`data-size`): sm 28px rows / 12px text (13px CJK), md 32px / 14px, lg 40px. A node with `icon: false` draws no glyph and keeps no gap for one — use it for a root such as "Documents".

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>

package/index.html

@@ -113,7 +113,7 @@ section{margin-bottom:52px;scroll-margin-top:78px}
 .cl-new{background:var(--info-bg);color:var(--info-fg)}
 .cl-improved{background:var(--bg-hover);color:var(--text-body)}
 .cl-fixed{background:var(--success-bg);color:var(--success-text)}
-.cl-breaking{background:var(--danger-bg);color:var(--danger-text)}
+.cl-breaking{background:var(--danger-bg);color:var(--danger-text)}.cl-rule{background:var(--warning-bg);color:var(--warning-text)}
 .cl-removed{background:var(--bg-hover);color:var(--text-secondary)}
 @media (max-width:720px){.cl-rel{grid-template-columns:minmax(0,1fr);gap:10px}.cl-head{flex-direction:row;align-items:baseline;gap:10px}}
 
@@ -176,7 +176,7 @@ section{margin-bottom:52px;scroll-margin-top:78px}
 const GROUPS=[["Brand","品牌","ブランド"],["Colors","颜色","カラー"],["Type","字体排印","タイポグラフィ"],["Foundations","基础规范","基盤仕様"],["Components","组件","コンポーネント"],["Charts","图表","チャート"],["Icons","图标库","アイコン"]];
 
 const S={
-brandsub:["Design System · v2.5.1","设计系统 · v2.5.1","デザインシステム · v2.5.1"],
+brandsub:["Design System · v2.8.0","设计系统 · v2.8.0","デザインシステム · v2.8.0"],
 doc_readme:["Readme","说明文档","ドキュメント"],
 doc_design:["DESIGN.md","下载 DESIGN.md","DESIGN.md"],
 doc_integration:["Integration","接入指南","導入ガイド"],
@@ -196,9 +196,9 @@ filter_ph:["Filter…","筛选…","絞り込み…"],
 ov_eyebrow:["Overview","总览","概要"],
 ov_title:["Keybricks Design System","Keybricks 设计系统","Keybricks デザインシステム"],
 ov_lede:[
-"The design language of the Keybricks EPM platform: a near-monochrome, high-density enterprise UI built on one token layer, one action blue, and 121 components shipped for React and Vue 3. Every card on this page is the live component, rendered from the same source the product imports.",
-"Keybricks 企业绩效管理平台的设计语言：近乎单色、高密度的企业级界面，构建在同一套 token 之上，只有一个强调蓝，121 个组件同时提供 React 与 Vue 3 版本。本页每张卡片都是实时渲染的真实组件，与产品引用的是同一份源码。",
-"Keybricks EPM プラットフォームのデザイン言語：ほぼモノクロで高密度なエンタープライズ UI を、単一のトークン層と 1 色のアクションブルーで構築。121 個のコンポーネントを React と Vue 3 で提供します。本ページのカードはすべて、製品と同じソースから描画された実物のコンポーネントです。"],
+"The design language of the Keybricks EPM platform: a near-monochrome, high-density enterprise UI built on one token layer, one action blue, and 122 components shipped for React and Vue 3. Every card on this page is the live component, rendered from the same source the product imports.",
+"Keybricks 企业绩效管理平台的设计语言：近乎单色、高密度的企业级界面，构建在同一套 token 之上，只有一个强调蓝，122 个组件同时提供 React 与 Vue 3 版本。本页每张卡片都是实时渲染的真实组件，与产品引用的是同一份源码。",
+"Keybricks EPM プラットフォームのデザイン言語：ほぼモノクロで高密度なエンタープライズ UI を、単一のトークン層と 1 色のアクションブルーで構築。122 個のコンポーネントを React と Vue 3 で提供します。本ページのカードはすべて、製品と同じソースから描画された実物のコンポーネントです。"],
 st_components:["Components","组件","コンポーネント"],
 st_icons:["Icons","图标","アイコン"],
 st_charts:["Chart types","图表类型","チャート種類"],
@@ -209,7 +209,7 @@ d_readme_x:["What the system is, in full — content voice, visual foundations,
 d_design:["DESIGN.md","DESIGN.md","DESIGN.md"],
 d_design_x:["The rules file for AI coding agents: absolute values, interaction states, an explicit do-not list.","给 AI 编程代理读的规则文件：绝对数值、交互状态、明确的禁止事项。","AI コーディングエージェント向けのルールファイル：絶対値、インタラクション状態、禁止事項。"],
 d_integration:["INTEGRATION.md","INTEGRATION.md","INTEGRATION.md"],
-d_integration_x:["Three steps to first paint, size tiers, import paths for all 121 components, token reference, versioning.","三步跑通首屏，尺寸层级，121 个组件的引入路径、token 速查、版本策略。","初回描画までの 3 ステップ、サイズ階層、全 121 コンポーネントの import パス、トークン早見表、バージョン方針。"],
+d_integration_x:["Three steps to first paint, size tiers, import paths for all 122 components, token reference, versioning.","三步跑通首屏，尺寸层级，122 个组件的引入路径、token 速查、版本策略。","初回描画までの 3 ステップ、サイズ階層、全 122 コンポーネントの import パス、トークン早見表、バージョン方針。"],
 d_gallery:["gallery.html","gallery.html","gallery.html"],
 d_gallery_x:["Every card as a filterable thumbnail grid — the fastest way to find a component.","全部卡片的可筛选缩略图网格 — 找组件最快的入口。","全カードをフィルター可能なサムネイル一覧で — コンポーネントを最速で探せます。"],
 open_full:["open full size","查看原尺寸","原寸で開く"],
@@ -254,7 +254,7 @@ function renderOverview(){
   hero.appendChild(make("p","lede",S.ov_lede));
   s.appendChild(hero);
   const stats=document.createElement("div");stats.className="stats";
-  [["121",S.st_components],["1,610",S.st_icons],["27",S.st_charts],["10",S.st_tokens],["React · Vue 3",S.st_fw]].forEach(([n,k])=>{
+  [["122",S.st_components],["1,610",S.st_icons],["27",S.st_charts],["10",S.st_tokens],["React · Vue 3",S.st_fw]].forEach(([n,k])=>{
     const d=document.createElement("div");d.className="stat";
     const nn=document.createElement("div");nn.className="n";nn.textContent=n;
     if(/[A-Za-z]/.test(n))nn.style.fontSize="var(--text-md)",nn.style.lineHeight="var(--leading-num)",nn.style.fontWeight="var(--weight-medium)";
@@ -347,7 +347,7 @@ function settleOn(target){
 }
 
 /* ---------- changelog (data: changelog.js) ---------- */
-const CL_TAGS={new:["New","新增","新規"],improved:["Improved","改进","改善"],fixed:["Fixed","修复","修正"],breaking:["Breaking","不兼容变更","互換性のない変更"],removed:["Removed","移除","削除"]};
+const CL_TAGS={new:["New","新增","新規"],improved:["Improved","改进","改善"],fixed:["Fixed","修复","修正"],breaking:["Breaking","不兼容变更","互換性のない変更"],rule:["Team rule","团队规则","チームルール"],removed:["Removed","移除","削除"]};
 function renderChangelog(){
   const s=document.createElement("section");s.id="changelog";
   s.appendChild(make("h2","cl-title",S.nav_changelog));
@@ -472,7 +472,7 @@ function fit(f){
   const scale=avail<f.__w?avail/f.__w:1;
   const w=scale<1?f.__w:avail;
   let h=f.__h;
-  try{const d=f.contentDocument;if(d&&d.documentElement)h=Math.max(h,d.documentElement.scrollHeight);}catch(e){}
+  try{const d=f.contentDocument,b=d&&d.body;if(b){const cs=d.defaultView.getComputedStyle(b);h=Math.max(h,Math.ceil(b.getBoundingClientRect().height+parseFloat(cs.marginTop)+parseFloat(cs.marginBottom)));}}catch(e){}
   f.style.width=w+"px";f.style.height=h+"px";
   f.style.transform=scale<1?"scale("+scale+")":"none";
   wrap.style.height=Math.round(h*scale)+"px";
@@ -488,7 +488,7 @@ function loadFrame(f){
     if(f.__ph)f.__ph.remove();
     pushTheme(f);fit(f);
     [120,400,1000,2000].forEach(d=>setTimeout(()=>{pushTheme(f);fit(f);},d));
-    try{new f.contentWindow.ResizeObserver(()=>fit(f)).observe(f.contentDocument.documentElement);}catch(err){}
+    try{new f.contentWindow.ResizeObserver(()=>fit(f)).observe(f.contentDocument.body);}catch(err){}
   });
   f.src=f.dataset.src;f.removeAttribute("data-src");
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.6.0",
-  "description": "Keybricks design system — design tokens, three size tiers and 121 UI components in React and Vue 3, source-only.",
+  "version": "2.8.0",
+  "description": "Keybricks design system — design tokens, three size tiers and 122 UI components in React and Vue 3, source-only.",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [
@@ -14,12 +14,12 @@
     },
     "./vue": "./components/_vue/index.mjs",
     "./vue/message": {
-      "types": "./components/feedback/message.d.ts",
-      "default": "./components/feedback/message.js"
+      "types": "./_vue-services/message.d.ts",
+      "default": "./_vue-services/message.js"
     },
     "./vue/message-box": {
-      "types": "./components/feedback/message-box.d.ts",
-      "default": "./components/feedback/message-box.js"
+      "types": "./_vue-services/message-box.d.ts",
+      "default": "./_vue-services/message-box.js"
     },
     "./styles.css": "./keybricks.css",
     "./keybricks.css": "./keybricks.css",
@@ -39,6 +39,7 @@
     "tokens",
     "assets",
     "_scripts",
+    "_vue-services",
     "styles.css",
     "keybricks.css",
     "readme.md",

package/readme.md

@@ -34,7 +34,7 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 - **Backgrounds & imagery**: no photography, no illustration. The pipeline canvas is #fafafa with a subtle dot/curve grid; chart areas use soft blue gradient fills. Only bitmap: the cube logo.
 - **States**: every interactive element carries five states beyond rest. **Hover** moves the fill one step (`--bg-hover` wash on ghost items, `--action-primary-hover` on solid buttons, `--soft-hover` on tinted ones); controls whose colours are inline get it from the hover hooks in `tokens/hover.css`. **Press** moves it a second step: Button and IconButton use explicit tokens (`--action-primary-active`, `--action-dark-active`, `--bg-press`, `--soft-active`, `--danger-active`, `--danger-soft-active`) and opt out of the global layer with `data-press="own"`; every other control — nav rows, tree items, menu items, chips, tabs, list rows, option rows, palette tiles — gets press from the one global rule in `tokens/interaction.css` (`filter: var(--press-filter)` on `:active`, which multiplies whatever wash hover is already showing, and brightens rather than darkens in dark mode). No scale transforms, no shadow shifts; text-only buttons drop to 70% opacity instead. **Keyboard focus** is also global: a 2px `--focus-border` outline at 2px offset on `:focus-visible` only, so a mouse click never draws it. **Selected/active** is persistent, not transient: active nav = `--bg-active` pill + heading-weight text; selected node = blue border + ring. **Disabled** is 55% opacity (50% on icon buttons) with the default cursor.
 - **Motion**: kept minimal by design (see Motion below) — 120–160ms ease-out on hover/selection, nothing bouncy or far-traveling.
-- **Layout chrome**: left sidebar 240px (collapsible to a 64px icon rail), 56px top bar (search left; black "AI Assistant" pill, bell, help and the user menu right), sidebar tones recessed (grey, default) · flush · contrast · custom, optional 240px secondary panel (Documents tree, pipeline palette), 400px right config panel, 250px bottom data-preview drawer.
+- **Layout chrome**: left sidebar 240px (collapsible to a 64px icon rail), 56px top bar (GlobalSearch left — ⌘K / Ctrl K, Prophet AI hand-off; bell, help and the user menu right), sidebar tones recessed (grey, default) · flush · contrast · custom, optional 240px secondary panel (Documents tree, pipeline palette), 400px right config panel, 250px bottom data-preview drawer.
 - **Cards**: white, radius 10, hairline border, 21px padding, 14px/500 title — never elevated.
 - **Density**: high; table rows 32 (sm) · 40 (md) · 44 (lg); header cells the same size as body cells in weight 600, sentence case; amount cells at the row's size with tabular figures; config codes as 12px code chips.
 
@@ -56,8 +56,8 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 ## Dark mode
 - Apply with `<html data-theme="dark">`; every component reads semantic aliases only, so nothing else changes. Toggle it live in the UI kit from the top bar or the sidebar's **Dark Mode** item (persisted to `localStorage("kb-theme")`). `applyStoredTheme()` restores it at app start.
 - **Primary blue in dark**: on the #0a0a0a canvas the light-theme blue reads murky, and a brighter #2b7fff cannot carry white 14px type (3.8:1, below AA). Dark mode therefore uses **`#1f6feb`** — 4.3:1 against the canvas, 4.6:1 for its white label, both passing AA, in the same hue family (~214°) one step lower in luminance. The light theme keeps `#155dfc`.
-- **Other shifts**: four surface steps (#0a0a0a app / #161616 surface / #1d1d1d raised / #1f1f1f inset); borders `rgba(255,255,255,.09)`; the dark "AI Assistant" pill inverts to light-on-dark (`--action-dark-fg`); category and status tints become low-alpha washes of the same hues; tooltips invert; shadows deepen rather than glow.
-- **Foreground on filled surfaces**: text and icons sitting on a saturated fill use `--on-accent`, which stays white in both themes; the neutral "AI Assistant" pill uses `--action-dark-fg`, which inverts with the theme. Never use `--text-inverse` for this — it is the inverse of body text and flips to near-black on dark backgrounds.
+- **Other shifts**: four surface steps (#0a0a0a app / #161616 surface / #1d1d1d raised / #1f1f1f inset); borders `rgba(255,255,255,.09)`; the dark pill (`Button variant="dark"`) inverts to light-on-dark (`--action-dark-fg`); category and status tints become low-alpha washes of the same hues; tooltips invert; shadows deepen rather than glow.
+- **Foreground on filled surfaces**: text and icons sitting on a saturated fill use `--on-accent`, which stays white in both themes; the neutral dark pill uses `--action-dark-fg`, which inverts with the theme. Never use `--text-inverse` for this — it is the inverse of body text and flips to near-black on dark backgrounds.
 - **Status**: the dark palette is an original derivation of the light one, validated for contrast rather than copied from a dark-theme design. Confirm it against your intended dark spec before production use.
 - **Authoring rule**: never reference `--neutral-*` / `--blue-*` directly in a component. Use the semantic layer (`--bg-surface`, `--bg-raised`, `--text-body`, `--border-card`, `--track`, `--soft-bg`, `--info-bg`, `--on-accent`, `--port-border`, `--dropzone-border`, `--ring-surface`, `--tooltip-bg`, …) so both themes work for free.
 
@@ -69,7 +69,7 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 
 **For developers integrating this system**
 - `DESIGN.md` — the rules file for AI coding agents: absolute token values, interaction states, an explicit "do not" list, and voice. Point Claude Code / Cursor / Copilot at this before they generate UI.
-- `INTEGRATION.md` — the integration guide: three steps to first paint, the full 121-component index with import paths, token reference, dark mode, interaction states, versioning.
+- `INTEGRATION.md` — the integration guide: three steps to first paint, the full 122-component index with import paths, token reference, dark mode, interaction states, versioning.
 - `DEPLOY.md` — running the system on GitLab: what ships in the package and what stays on Pages, the entry points, the release flow, and the bundler config each consumer needs.
 - `index.html` · `gallery.html` — the documentation site: the browsable system and the filterable thumbnail grid, both deployed to GitLab Pages by CI.
 - `package.json` · `.gitlab-ci.yml` · `_scripts/` — makes the system an installable package: a version tag publishes to the GitLab Package Registry, the default branch redeploys the docs site, and `npm run check` fails the pipeline if the generated tokens or barrels drift from source.

package/readme.zh-CN.md

@@ -36,7 +36,7 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 - **背景与图像**：不用摄影图，不用插画。管道画布为 #fafafa 底配淡淡的点状 / 曲线网格；图表区域用柔和的蓝色渐变填充。唯一的位图是立方体 Logo。
 - **交互状态**：每个可交互元素在静默态之外都有五种状态。**悬停**让填充加深一档（幽灵按钮类元素用 `--bg-hover`，实心按钮用 `--action-primary-hover`，浅色底按钮用 `--soft-hover`）；颜色写在内联样式里的控件，悬停效果来自 `tokens/hover.css` 中的悬停钩子。**按下**再加深一档：Button 与 IconButton 使用专门的 token（`--action-primary-active`、`--action-dark-active`、`--bg-press`、`--soft-active`、`--danger-active`、`--danger-soft-active`），并通过 `data-press="own"` 退出全局层；其余所有控件——导航行、树节点、菜单项、标签、标签页、列表行、选项行、面板磁贴——由 `tokens/interaction.css` 中的一条全局规则提供按下态（`:active` 时加上 `filter: var(--press-filter)`，在悬停底色之上再叠加一档，深色模式下方向为提亮）。不做缩放，不改阴影；纯文字按钮改为降到 70% 不透明度。**键盘聚焦**同样是全局的：仅在 `:focus-visible` 时绘制 2px `--focus-border` 描边（偏移 2px），鼠标点击不会出现。**选中 / 激活**是持续态而非瞬时态：激活的导航项 = `--bg-active` 胶囊 + 标题字重；选中的节点 = 蓝色边框 + 光环。**禁用**为 55% 不透明度（图标按钮 50%），使用默认光标。
 - **动效**：刻意克制（见下方"动效"一节）——悬停 / 选中 120–160ms 缓出，不弹跳，不大幅位移。
-- **布局框架**：左侧边栏 240px（可收起为 64px 图标栏）；顶栏 56px（左侧搜索，右侧铃铛 + 黑色 "AI Assistant" 胶囊）；可选的 240px 二级面板（文档树、管道组件面板）；右侧配置面板 400px；底部数据预览抽屉 250px。
+- **布局框架**：左侧边栏 240px（可收起为 64px 图标栏）；顶栏 56px（左侧全局搜索 GlobalSearch，⌘K / Ctrl K 唤起、可转交方知；右侧铃铛、帮助和用户菜单）；可选的 240px 二级面板（文档树、管道组件面板）；右侧配置面板 400px；底部数据预览抽屉 250px。
 - **卡片**：白底、10px 圆角、细边框、21px 内边距、14px / 500 字重标题——从不使用投影抬高。
 - **密度**：高密度；表格行高 32（sm）· 40（md）· 44（lg）；表头与单元格同字号、字重 600、句首大写；金额单元格与所在行同字号、同字体，只加等宽数字（tabular figures）；配置代码用 12px 代码标签。等宽字体只用于代码。
 
@@ -58,8 +58,8 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 ## 深色模式
 - 在 `<html>` 上加 `data-theme="dark"` 即可；所有组件只读取语义别名，其他什么都不用改。可在 UI kit 的顶栏或侧边栏 **Dark Mode** 项实时切换（持久化到 `localStorage("kb-theme")`）。应用启动时调用 `applyStoredTheme()` 恢复。
 - **深色模式主色**：在 #0a0a0a 画布上，浅色主题的蓝色显得浑浊，而更亮的 #2b7fff 又无法承载 14px 白色文字（3.8:1，未达 AA）。因此深色模式使用 **`#1f6feb`**——与画布对比 4.3:1，白色文字对比 4.6:1，均达 AA，与浅色主题同属约 214° 色相，亮度低一档。浅色主题保持 `#155dfc`。
-- **其他差异**：四级表面层次（#0a0a0a 应用层 / #161616 表面层 / #1d1d1d 浮起层 / #1f1f1f 内嵌层）；边框 `rgba(255,255,255,.09)`；深色 "AI Assistant" 胶囊反转为浅底深字（`--action-dark-fg`）；分类色与状态色变为同色相的低透明度色块；提示气泡反色；阴影加深而不是发光。
-- **填充色上的前景色**：位于饱和色填充之上的文字与图标使用 `--on-accent`，两套主题下都是白色；中性色的 "AI Assistant" 胶囊使用 `--action-dark-fg`，随主题反转。这里绝不能用 `--text-inverse`——它是正文颜色的反色，在深色背景上会变成近黑色。
+- **其他差异**：四级表面层次（#0a0a0a 应用层 / #161616 表面层 / #1d1d1d 浮起层 / #1f1f1f 内嵌层）；边框 `rgba(255,255,255,.09)`；深色胶囊按钮（`Button variant="dark"`）反转为浅底深字（`--action-dark-fg`）；分类色与状态色变为同色相的低透明度色块；提示气泡反色；阴影加深而不是发光。
+- **填充色上的前景色**：位于饱和色填充之上的文字与图标使用 `--on-accent`，两套主题下都是白色；中性色的深色胶囊按钮使用 `--action-dark-fg`，随主题反转。这里绝不能用 `--text-inverse`——它是正文颜色的反色，在深色背景上会变成近黑色。
 - **成熟度**：深色调色板是从浅色体系独立推导而来的，做过对比度验证，但并非照搬现成的深色设计稿。正式上线前，请与团队预期的深色规范核对。
 - **开发规范**：组件中绝不直接引用 `--neutral-*` / `--blue-*`。一律使用语义层（`--bg-surface`、`--bg-raised`、`--text-body`、`--border-card`、`--track`、`--soft-bg`、`--info-bg`、`--on-accent`、`--port-border`、`--dropzone-border`、`--ring-surface`、`--tooltip-bg` 等），这样两套主题自动生效。
 
@@ -71,7 +71,7 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 
 **开发团队接入入口**
 - `DESIGN.md` —— 给 AI 编程代理读的规则文件：绝对数值、交互状态、明确的"禁止"清单、文案语气。让 Claude Code / Cursor / Copilot 在生成界面前先读它。
-- `INTEGRATION.md` —— 接入指南：三步跑通首屏、全部 121 个组件的清单与引入路径、token 速查、深色模式、交互状态、版本策略。
+- `INTEGRATION.md` —— 接入指南：三步跑通首屏、全部 122 个组件的清单与引入路径、token 速查、深色模式、交互状态、版本策略。
 - `DEPLOY.md` —— 在 GitLab 上运行本系统：包里发布什么、什么留在 Pages 上、入口点、发布流程、各消费方需要的构建配置。
 - `index.html` · `gallery.html` —— 文档站：可浏览的系统主页与可筛选的缩略图网格，均由 CI 部署到 GitLab Pages。
 - `package.json` · `.gitlab-ci.yml` · `_scripts/` —— 让本系统成为可安装的包：打版本 tag 即发布到 GitLab Package Registry，默认分支更新即重新部署文档站，生成的 token 或入口文件与源码不一致时 `npm run check` 会让流水线失败。