@keyfunc/keybricks-ds 2.6.0 → 2.7.0

package/index.html

@@ -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.7.0","设计系统 · v2.7.0","デザインシステム · v2.7.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)";
@@ -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.7.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": [

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` 会让流水线失败。

package/site-nav.js

@@ -1 +1 @@
-window.KB_CARDS = [{"path":"components/_cards/accordion.card.html","group":"Components","name":"Accordion","viewport":"700x320","subtitle":"Generic collapsible section — settings/FAQ style","zh":"手风琴折叠","ja":"アコーディオン","subtitleZh":"通用可折叠区块 — 设置/FAQ 风格","subtitleJa":"汎用の折りたたみセクション — 設定/FAQ スタイル"},{"path":"components/_cards/action-chip.card.html","group":"Components","name":"Action Chip","viewport":"700x370","subtitle":"Tinted bulk-action chips · five tones · size tiers, Latin and CJK","zh":"操作胶囊","ja":"アクションチップ","subtitleZh":"浅色批量操作标签 · 五种色调 · 尺寸层级，西文与 CJK","subtitleJa":"淡色の一括操作チップ · 5 トーン · サイズ階層、欧文と CJK"},{"path":"components/_cards/activity.card.html","group":"Components","name":"Activity","viewport":"700x300","subtitle":"ActivityItem rows · DotActivity feed","zh":"动态记录","ja":"アクティビティ","subtitleZh":"ActivityItem 动态行 · DotActivity 圆点信息流","subtitleJa":"ActivityItem の行 · DotActivity のフィード"},{"path":"components/_cards/alert.card.html","group":"Components","name":"Alert","viewport":"700x350","subtitle":"In-card message — 4 tones, with and without body","zh":"提醒条","ja":"アラート","subtitleZh":"卡片内提示信息 — 4 种色调，含/不含正文","subtitleJa":"カード内メッセージ — 4トーン、本文の有無"},{"path":"components/_cards/app-chrome.card.html","group":"Components","name":"App Chrome","viewport":"700x1490","subtitle":"Sidebar tones · SidePanel · TopBar · UserMenu · PageToolbar","zh":"应用外壳","ja":"アプリの外枠","subtitleZh":"侧边栏色调 · 侧面板 · 顶栏 · 用户菜单 · 页面工具栏","subtitleJa":"サイドバーのトーン · サイドパネル · トップバー · ユーザーメニュー · ページツールバー"},{"path":"components/_cards/banner.card.html","group":"Components","name":"Banner","viewport":"700x300","subtitle":"Page-level notification — 4 tones · action link · dismissible","zh":"横幅通知","ja":"バナー","subtitleZh":"页面级通知条 — 4 种色调 · 操作链接 · 可关闭","subtitleJa":"ページレベルの通知 — 4トーン · アクションリンク · 閉じるボタン付き"},{"path":"components/_cards/breadcrumb.card.html","group":"Components","name":"Breadcrumb","viewport":"700x468","subtitle":"Path trail — hover darkens · long trails collapse to an ellipsis dropdown","zh":"面包屑导航","ja":"パンくずリスト","subtitleZh":"路径导航 — 悬停加深 · 过长路径折叠为省略号下拉","subtitleJa":"パス表示 — ホバーで濃くなる · 長いパスは省略記号のドロップダウンに折りたたみ"},{"path":"components/_cards/button-1-base.card.html","group":"Components","name":"Button","viewport":"700x690","subtitle":"Solid · soft/outline · ghost · text-only · disabled · loading","zh":"按钮","ja":"ボタン","subtitleZh":"实心 · 浅色/描边 · 幽灵 · 纯文字 · 禁用 · 加载中","subtitleJa":"塗りつぶし · ソフト/アウトライン · ゴースト · テキストのみ · 無効 · 読み込み中"},{"path":"components/_cards/button-4-group.card.html","group":"Components","name":"Button Group","viewport":"700x490","subtitle":"Segmented group · split button · shortcut hint · badge","zh":"按钮组","ja":"ボタングループ","subtitleZh":"分段按钮组 · 拆分按钮 · 快捷键提示 · 角标","subtitleJa":"セグメント化グループ · スプリットボタン · ショートカットヒント · バッジ"},{"path":"components/_cards/button-2-states.card.html","group":"Components","name":"Button Interaction States","viewport":"1000x810","subtitle":"Rest · hover · press · focus · loading · disabled — every variant, live and forced","zh":"按钮交互状态","ja":"ボタンのインタラクション状態","subtitleZh":"静默 · 悬停 · 按下 · 聚焦 · 加载中 · 禁用 — 全部变体，实时与强制态并列","subtitleJa":"静止 · ホバー · 押下 · フォーカス · 読み込み中 · 無効 — 全バリアント、実動と強制表示"},{"path":"components/_cards/button-3-sizes-icons.card.html","group":"Components","name":"Button Sizes & Icons","viewport":"700x720","subtitle":"sm 28 · md 32 · lg 40, Latin and CJK · icon placement · full width","zh":"按钮尺寸与图标","ja":"ボタンのサイズとアイコン","subtitleZh":"sm 28 · md 32 · lg 40，西文与 CJK · 图标位置 · 全宽","subtitleJa":"sm 28 · md 32 · lg 40、欧文と CJK · アイコン位置 · 全幅"},{"path":"components/_cards/canvas-zoom-controls.card.html","group":"Components","name":"Canvas Zoom Controls","viewport":"700x180","subtitle":"Pipeline canvas − / % / + / fit-to-view","zh":"画布缩放控件","ja":"キャンバスズームコントロール","subtitleZh":"流程画布 − / % / + / 适应视图","subtitleJa":"パイプラインキャンバスの − / % / + / 全体表示"},{"path":"components/_cards/cards-indicators.card.html","group":"Components","name":"Cards & Indicators","viewport":"700x450","subtitle":"Work in progress · Card · StatCard · Badge · IconTile · charts","zh":"卡片与指示器","ja":"カードとインジケーター","subtitleZh":"开发中 · Card 卡片 · StatCard 统计卡 · Badge 徽标 · IconTile 图标块 · 图表","subtitleJa":"作業中 · Card · StatCard · Badge · IconTile · チャート"},{"path":"components/_cards/checkbox.card.html","group":"Components","name":"Checkbox","viewport":"700x370","subtitle":"Checked · unchecked · indeterminate · disabled · sizes","zh":"复选框","ja":"チェックボックス","subtitleZh":"选中 · 未选中 · 半选 · 禁用 · 多尺寸","subtitleJa":"選択済み · 未選択 · 中間状態 · 無効 · サイズ違い"},{"path":"components/_cards/codeblock.card.html","group":"Components","name":"Code Block","viewport":"700x260","subtitle":"SQL Preview / JSON export — mono with copy button","zh":"代码块","ja":"コードブロック","subtitleZh":"SQL 预览 / JSON 导出 — 带复制按钮的等宽代码块","subtitleJa":"SQL プレビュー／JSON エクスポート — コピー機能付き等幅コードブロック"},{"path":"components/_cards/combobox.card.html","group":"Components","name":"Combobox","viewport":"700x430","subtitle":"Typeahead single-select — type to filter · keyboard nav · no-results","zh":"输入筛选下拉","ja":"コンボボックス","subtitleZh":"输入即筛选的单选下拉 — 键盘导航 · 无结果状态","subtitleJa":"入力して絞り込む単一選択 — キーボード操作 · 該当なし状態"},{"path":"components/_cards/context-menu.card.html","group":"Components","name":"Context Menu","viewport":"700x920","subtitle":"Icons · plain text · danger item · long list","zh":"右键菜单","ja":"右クリックメニュー","subtitleZh":"带图标 · 纯文字 · 危险项 · 长列表","subtitleJa":"アイコン付き · テキストのみ · 危険操作項目 · 長いリスト"},{"path":"components/_cards/date-picker.card.html","group":"Components","name":"Date Picker","viewport":"700x520","subtitle":"Input + month-grid popover — today outlined · selected filled","zh":"日期选择器","ja":"日付ピッカー","subtitleZh":"输入框 + 月历弹层 — 今天描边 · 选中填充","subtitleJa":"入力欄 + 月グリッドのポップオーバー — 本日は枠線 · 選択日は塗りつぶし"},{"path":"components/_cards/diffvalue.card.html","group":"Components","name":"Diff Value","viewport":"700x220","subtitle":"Before → after change display (config migration)","zh":"差异值","ja":"差分値","subtitleZh":"变更前 → 变更后 数值展示（配置迁移场景）","subtitleJa":"変更前 → 変更後 の値表示（設定移行シナリオ）"},{"path":"components/_cards/divider.card.html","group":"Components","name":"Divider","viewport":"700x220","subtitle":"Plain · labeled · vertical","zh":"分隔线","ja":"区切り線","subtitleZh":"普通 · 带标签 · 垂直","subtitleJa":"通常 · ラベル付き · 縦向き"},{"path":"components/_cards/drawer.card.html","group":"Components","name":"Drawer","viewport":"700x540","subtitle":"Slide-out detail panel — header · scrollable body · footer actions","zh":"抽屉面板","ja":"ドロワー","subtitleZh":"滑出式详情面板 — 标题栏 · 可滚动主体 · 底部操作区","subtitleJa":"スライドアウト式の詳細パネル — ヘッダー · スクロール本文 · フッター操作"},{"path":"components/_cards/dropdown-menu.card.html","group":"Components","name":"Dropdown Menu","viewport":"700x420","subtitle":"Button · icon-only · ghost text · avatar triggers — icon items & plain-text items","zh":"下拉菜单","ja":"ドロップダウンメニュー","subtitleZh":"按钮 · 纯图标 · 幽灵文字 · 头像触发 — 带图标与纯文字菜单项","subtitleJa":"ボタン · アイコンのみ · ゴーストテキスト · アバタートリガー — アイコン付き/テキストのみの項目"},{"path":"components/_cards/dropzone.card.html","group":"Components","name":"Dropzone","viewport":"924x588","subtitle":"Empty · drag-over · uploaded · error · disabled","zh":"拖放上传区","ja":"ドロップゾーン","subtitleZh":"空状态 · 拖拽悬停 · 已上传 · 错误 · 禁用","subtitleJa":"空 · ドラッグオーバー · アップロード済み · エラー · 無効"},{"path":"components/_cards/empty-state.card.html","group":"Components","name":"Empty State","viewport":"924x580","subtitle":"First-run · no results · error — with and without action","zh":"空状态","ja":"空状態","subtitleZh":"首次使用 · 无结果 · 错误 — 含/不含操作按钮","subtitleJa":"初回利用 · 該当なし · エラー — アクションの有無"},{"path":"components/_cards/filter-bar.card.html","group":"Components","name":"Filter Bar (List Report)","viewport":"1000x620","subtitle":"Fiori-style filter bar composed with a table — Adapt Filters · Go","zh":"筛选栏（列表报表）","ja":"フィルターバー（リストレポート）","subtitleZh":"Fiori 风格筛选栏与表格组合 — Adapt Filters · Go","subtitleJa":"テーブルと組み合わせたFiori形式のフィルターバー — Adapt Filters · Go"},{"path":"components/_cards/icon-button.card.html","group":"Components","name":"Icon Button","viewport":"700x400","subtitle":"Square ghost icon button · sm 28 · md 32 · lg 40 · active / muted / danger / loading / disabled","zh":"图标按钮","ja":"アイコンボタン","subtitleZh":"方形幽灵图标按钮 · sm 28 · md 32 · lg 40 · 激活 / 弱化 / 危险 / 加载 / 禁用","subtitleJa":"正方形ゴーストアイコンボタン · sm 28 · md 32 · lg 40 · アクティブ / ミュート / 危険 / 読み込み / 無効"},{"path":"components/_cards/input.card.html","group":"Components","name":"Input","viewport":"700x720","subtitle":"Default · filled · required · readOnly · disabled · error · hint · focus","zh":"输入框","ja":"入力欄","subtitleZh":"默认 · 已填写 · 必填 · 只读 · 禁用 · 错误 · 提示文字 · 聚焦","subtitleJa":"既定 · 入力済み · 必須 · 読み取り専用 · 無効 · エラー · ヒント · フォーカス"},{"path":"components/_cards/keyvalue.card.html","group":"Components","name":"Key/Value Rows","viewport":"700x250","subtitle":"Config summary and confirmation-step rows","zh":"键值行","ja":"キー/バリュー行","subtitleZh":"配置摘要与确认步骤中的行展示","subtitleJa":"設定サマリーと確認ステップの行表示"},{"path":"components/_cards/kbd.card.html","group":"Components","name":"Keyboard Shortcuts","viewport":"700x180","subtitle":"Kbd — keycap hints for a power-user tool","zh":"键盘快捷键","ja":"キーボードショートカット","subtitleZh":"Kbd — 面向高级用户工具的按键提示","subtitleJa":"Kbd — パワーユーザー向けツールのキー入力ヒント"},{"path":"components/_cards/listrow.card.html","group":"Components","name":"List Row","viewport":"700x420","subtitle":"Expandable workflow rows — collapsed, expanded, with trailing count","zh":"列表行","ja":"リスト行","subtitleZh":"可展开的工作流行 — 折叠、展开、带末尾计数","subtitleJa":"展開可能なワークフロー行 — 折りたたみ、展開、末尾カウント付き"},{"path":"components/_cards/loading.card.html","group":"Components","name":"Loading","viewport":"700x310","subtitle":"Spinner sizes · Skeleton text, blocks and table rows","zh":"加载状态","ja":"読み込み状態","subtitleZh":"Spinner 多尺寸 · Skeleton 文字、色块与表格行","subtitleJa":"Spinner のサイズ違い · Skeleton のテキスト・ブロック・テーブル行"},{"path":"components/_cards/log-viewer.card.html","group":"Components","name":"Log Viewer","viewport":"700x370","subtitle":"Mono run log — info · warn · error lines","zh":"日志查看器","ja":"ログビューア","subtitleZh":"等宽运行日志 — info · warn · error 行","subtitleJa":"等幅の実行ログ — info · warn · error の行"},{"path":"components/_cards/modal.card.html","group":"Components","name":"Modal","viewport":"700x520","subtitle":"Default · destructive footer · with form content · no subtitle","zh":"弹窗","ja":"モーダル","subtitleZh":"默认 · 危险操作底栏 · 含表单内容 · 无副标题","subtitleJa":"既定 · 破壊的操作のフッター · フォーム付き · 副題なし"},{"path":"components/_cards/multi-select.card.html","group":"Components","name":"Multi Select","viewport":"700x400","subtitle":"Checkbox dropdown — removable tags · +n overflow · clear all","zh":"多选下拉","ja":"マルチセレクト","subtitleZh":"复选框下拉 — 可移除标签 · +n 溢出 · 一键清空","subtitleJa":"チェックボックス式ドロップダウン — 削除可能タグ · +n オーバーフロー · 全クリア"},{"path":"components/_cards/number-stepper.card.html","group":"Components","name":"Number Stepper","viewport":"700x240","subtitle":"Default · at min · at max · disabled","zh":"数字步进器","ja":"数値ステッパー","subtitleZh":"默认 · 最小值 · 最大值 · 禁用","subtitleJa":"既定 · 最小値 · 最大値 · 無効"},{"path":"components/_cards/pagination.card.html","group":"Components","name":"Pagination","viewport":"700x520","subtitle":"Row-range label · small set · first/last page states","zh":"分页","ja":"ページネーション","subtitleZh":"行范围标签 · 少页场景 · 首页/末页状态","subtitleJa":"行範囲ラベル · 少ページ時 · 先頭/末尾ページの状態"},{"path":"components/_cards/people.card.html","group":"Components","name":"People","viewport":"700x300","subtitle":"Avatar · AvatarGroup — initials, sizes, real images","zh":"人物","ja":"ユーザー","subtitleZh":"Avatar 头像 · AvatarGroup 头像组 — 首字母、尺寸、真实图片","subtitleJa":"Avatar（アバター）· AvatarGroup（アバターグループ）— イニシャル、サイズ、実画像"},{"path":"components/_cards/pipeline-node.card.html","group":"Components","name":"Pipeline Node Card","viewport":"700x1620","subtitle":"220×90 node — category hues · status badges · ports with hover, drag-to-connect and drop states","zh":"流程节点卡","ja":"パイプラインノードカード","subtitleZh":"220×90 节点 — 分类色 · 状态角标 · 端口的悬停、拖拽连线与落点状态","subtitleJa":"220×90ノード — カテゴリ色 · ステータスバッジ · ポートのホバー・ドラッグ接続・ドロップ状態"},{"path":"components/_cards/pipeline-palette.card.html","group":"Components","name":"Pipeline Palette","viewport":"700x690","subtitle":"240px component drawer — grid/list toggle · collapsible hued categories","zh":"组件面板","ja":"コンポーネントパレット","subtitleZh":"240px 组件抽屉 — 网格/列表切换 · 可折叠的分类色分组","subtitleJa":"240pxコンポーネントドロワー — グリッド/リスト切替 · 折りたたみ可能なカテゴリ"},{"path":"components/_cards/radio.card.html","group":"Components","name":"Radio Button","zh":"单选按钮","ja":"ラジオボタン","viewport":"700x1120","subtitle":"Single choice from a small set — md/sm · description · disabled · row · card variant · arrow-key navigation","subtitleZh":"小集合中的单选 — md/sm · 描述文字 · 禁用 · 横排 · 卡片式 · 方向键切换","subtitleJa":"少数の選択肢から1つ — md/sm · 説明文 · 無効 · 横並び · カード型 · 矢印キー操作"},{"path":"components/_cards/search.card.html","group":"Components","name":"Search Input","viewport":"700x520","subtitle":"Bordered · bare top-bar · with value/clear · disabled","zh":"搜索框","ja":"検索欄","subtitleZh":"带边框 · 顶栏无边框 · 带内容/清除 · 禁用","subtitleJa":"ボーダー付き · トップバー用（枠なし）· 入力値/クリア付き · 無効"},{"path":"components/_cards/segmented-control.card.html","group":"Components","name":"Segmented Control","zh":"分段控件","ja":"セグメントコントロール","viewport":"700x1260","subtitle":"Mutually exclusive views in one inset track — md/sm · counts · icons · icon-only · disabled option · full width · ViewToggle","subtitleZh":"同一轨道内的互斥视图切换 — md/sm · 计数 · 图标 · 纯图标 · 禁用项 · 撑满宽度 · ViewToggle","subtitleJa":"1つのトラック内で排他的にビューを切替 — md/sm · カウント · アイコン · アイコンのみ · 無効項目 · 全幅 · ViewToggle"},{"path":"components/_cards/select.card.html","group":"Components","name":"Select","viewport":"700x430","subtitle":"md / sm · placeholder · disabled · error","zh":"下拉选择","ja":"セレクト","subtitleZh":"中/小尺寸 · 占位符 · 禁用 · 错误","subtitleJa":"md/sm サイズ · プレースホルダー · 無効 · エラー"},{"path":"components/_cards/relative-time-picker.card.html","group":"Components","name":"Relative Time Picker","viewport":"700x720","subtitle":"Filter by how long ago · md / sm / lg · unlimited · disabled · localised labels","zh":"相对时间选择器","ja":"相対時間ピッカー","subtitleZh":"按\"多久以前\"筛选 · md / sm / lg · 不限时间 · 禁用 · 本地化文案","subtitleJa":"「どれくらい前」で絞り込み · md / sm / lg · 無制限 · 無効 · ローカライズ"},{"path":"components/_cards/slider.card.html","group":"Components","name":"Slider","viewport":"700x300","subtitle":"Filled track · ring knob · value bubble · min/max labels","zh":"滑杆","ja":"スライダー","subtitleZh":"填充轨道 · 环形滑块 · 数值气泡 · 最值标签","subtitleJa":"塗りつぶしトラック · リング状ノブ · 値バブル · 最小/最大ラベル"},{"path":"components/_cards/smart-table.card.html","group":"Components","name":"Smart Table (Database Grid)","viewport":"700x1040","subtitle":"Frozen header and row numbers · default and compact density · typed fields · hue pills · aggregates · + New","zh":"智能表格（数据网格）","ja":"スマートテーブル（データベースグリッド）","subtitleZh":"冻结表头与行号 · 默认与紧凑两种行密度 · Notion/Airtable 风格网格 — 类型化字段 · 色相胶囊 · 聚合统计 · + New","subtitleJa":"固定ヘッダーと行番号 · デフォルトとコンパクトの行密度 · Notion/Airtable形式のグリッド — 型付きフィールド · 色相ピル · 集計 · + New"},{"path":"components/_cards/spreadsheet.card.html","group":"Components","name":"Spreadsheet","viewport":"924x560","subtitle":"Formula bar · frozen headers · range selection · =SUM() · sheet tabs · status bar","zh":"电子表格","ja":"スプレッドシート","subtitleZh":"公式栏 · 冻结表头 · 范围选择 · =SUM() · 工作表标签 · 状态栏","subtitleJa":"数式バー · 固定ヘッダー · 範囲選択 · =SUM() · シートタブ · ステータスバー"},{"path":"components/_cards/stepper.card.html","group":"Components","name":"Stepper","viewport":"700x450","subtitle":"Multi-step flow header — done · current · upcoming","zh":"步骤条","ja":"ステッパー","subtitleZh":"多步骤流程头部 — 已完成 · 当前 · 待进行","subtitleJa":"多段階フローのヘッダー — 完了 · 現在 · 未着手"},{"path":"components/_cards/table.card.html","group":"Components","name":"Table","viewport":"700x6150","subtitle":"Anatomy · densities · column types · two-line name · sorting · selection · frames · column resize · states · composition","zh":"表格","ja":"テーブル","subtitleZh":"结构 · 密度 · 列类型 · 两行名称 · 排序 · 选择 · 边框方式 · 列宽拖拽 · 状态 · 组合用法","subtitleJa":"構造 · 密度 · 列タイプ · 2行の名前 · 並べ替え · 選択 · フレーム · 列幅ドラッグ · 状態 · 組み合わせ"},{"path":"components/_cards/tabs.card.html","group":"Components","name":"Tabs","viewport":"700x810","subtitle":"Underline tabs · panel tabs · pill filter tabs · counts","zh":"标签页","ja":"タブ","subtitleZh":"下划线标签页 · 面板标签页 · 胶囊筛选标签 · 计数","subtitleJa":"アンダーラインタブ · パネルタブ · ピル型フィルタータブ · カウント"},{"path":"components/_cards/tag.card.html","group":"Components","name":"Tag","viewport":"700x300","subtitle":"Removable filter tags — distinct from Badge/ActionChip","zh":"标签","ja":"タグ","subtitleZh":"可移除的筛选标签 — 区别于 Badge/ActionChip","subtitleJa":"削除可能なフィルタータグ — Badge/ActionChip とは区別"},{"path":"components/_cards/textarea.card.html","group":"Components","name":"Textarea","viewport":"924x520","subtitle":"Default · character count · over the limit · disabled","zh":"文本域","ja":"テキストエリア","subtitleZh":"默认 · 字数统计 · 超出限制 · 禁用","subtitleJa":"既定 · 文字数カウント · 上限超過 · 無効"},{"path":"components/_cards/timeline.card.html","group":"Components","name":"Timeline","viewport":"700x350","subtitle":"Vertical activity timeline — toned icon nodes on a hairline spine","zh":"时间线","ja":"タイムライン","subtitleZh":"垂直活动时间线 — 细线主轴上的着色图标节点","subtitleJa":"縦型の活動タイムライン — 極細の軸上に色付きアイコンノード"},{"path":"components/_cards/toast.card.html","group":"Components","name":"Toast","viewport":"700x450","subtitle":"Tones · with/without meta · live ToastStack demo","zh":"轻提示","ja":"トースト通知","subtitleZh":"多种色调 · 含/不含附加信息 · 实时 ToastStack 演示","subtitleJa":"トーン違い · メタ情報の有無 · ToastStack のライブデモ"},{"path":"components/_cards/toggles.card.html","group":"Components","name":"Toggle Switch","viewport":"700x1670","subtitle":"Binary settings pill — sizes · semantic red→green · glyph knobs · inline text · captions · async loading","zh":"开关","ja":"スイッチ","subtitleZh":"二元设置开关 — 尺寸 · 红关绿开语义配色 · 滑块内图标/单字 · 胶囊内文字 · 两侧标注 · 异步加载","subtitleJa":"バイナリ設定ピル — サイズ · 赤オフ→緑オン · ノブ内グリフ · ピル内テキスト · 両側ラベル · 非同期ローディング"},{"path":"components/_cards/tooltip.card.html","group":"Components","name":"Tooltip","viewport":"700x360","subtitle":"Placements — top · bottom · left · right, on icon and text triggers","zh":"文字提示","ja":"ツールチップ","subtitleZh":"多种定位 — 上/下/左/右，可用于图标或文字触发","subtitleJa":"配置位置 — 上/下/左/右、アイコンおよびテキストトリガーで使用可能"},{"path":"components/_cards/tree.card.html","group":"Components","name":"Tree","viewport":"700x2820","subtitle":"Cascading checkboxes · disabled nodes · lines · async load · search · drag · reorder · keyboard","zh":"树形视图","ja":"ツリービュー","subtitleZh":"级联勾选 · 禁用节点 · 连接线 · 异步加载 · 搜索 · 拖拽 · 排序 · 键盘操作","subtitleJa":"カスケードチェック · 無効ノード · 接続線 · 非同期読み込み · 検索 · ドラッグ · 並べ替え · キーボード操作"},{"path":"components/_cards/icons-0-usage.card.html","group":"Icons","name":"Icon Usage","viewport":"700x2250","subtitle":"Monochrome glyphs · category tiles · document hues · status · marks · icons inside components — when an icon gets colour","zh":"图标用法","ja":"アイコンの使い方","subtitleZh":"单色图标 · 分类色块 · 文档色 · 状态 · 标记 · 组件内图标——图标什么时候用颜色","subtitleJa":"単色グリフ · カテゴリタイル · ドキュメント色 · ステータス · マーク · コンポーネント内のアイコン — いつ色を付けるか"},{"path":"components/_cards/icons-1-core.card.html","group":"Icons","name":"Core Set","viewport":"700x1900","subtitle":"The 157 stroke glyphs the product itself uses — keyword search · click to download the SVG","zh":"核心图标集","ja":"コアセット","subtitleZh":"产品自身使用的 157 个线性图标 — 关键词搜索 · 点击下载 SVG","subtitleJa":"プロダクト自身が使用する157個のストロークアイコン — キーワード検索 · クリックで SVG をダウンロード"},{"path":"components/_cards/icons-2-feather.card.html","group":"Icons","name":"Feather Library","viewport":"700x4400","subtitle":"404 stroke icons (core + all of Feather) · keyword search · click to download the SVG","zh":"Feather 图标库","ja":"Featherライブラリ","subtitleZh":"404 个线性图标（核心集 + 完整 Feather）· 关键词搜索 · 点击下载 SVG","subtitleJa":"404個のストロークアイコン（コア + Feather全量）· キーワード検索 · クリックで SVG をダウンロード"},{"path":"components/_cards/icons-2b-lucide.card.html","group":"Icons","name":"Lucide Library","viewport":"700x1370","subtitle":"Full Lucide set (1,700+ stroke glyphs, core style) via pinned CDN · keyword search · click to download the SVG","zh":"Lucide 图标库","ja":"Lucideライブラリ","subtitleZh":"完整 Lucide 图标集（1,700+ 线性图标，与核心风格一致，固定版本 CDN）· 关键词搜索 · 点击下载 SVG","subtitleJa":"Lucide 全セット（1,700+ のストロークアイコン、コアと同一スタイル、固定版 CDN）· キーワード検索 · クリックで SVG をダウンロード"},{"path":"components/_cards/icons-3-unicons.card.html","group":"Icons","name":"Unicons Library","viewport":"700x1370","subtitle":"1,206 Unicons line glyphs via CDN webfont · keyword search · click to download the SVG","zh":"Unicons 图标库","ja":"Uniconsライブラリ","subtitleZh":"1,206 个 Unicons 线性图标（CDN 字体）· 关键词搜索 · 点击下载 SVG","subtitleJa":"CDNウェブフォント経由の1,206個のUniconsラインアイコン · キーワード検索 · クリックで SVG をダウンロード"},{"path":"components/_cards/icons-4-datasource.card.html","group":"Icons","name":"Data Source Logos","viewport":"700x660","subtitle":"17 data-source logo images in assets/logos/datasource/","zh":"数据源图标","ja":"データソースロゴ","subtitleZh":"17 张数据源图标图片，位于 assets/logos/datasource/","subtitleJa":"assets/logos/datasource/ の 17 枚のデータソースロゴ画像"},{"path":"guidelines/brand-logo.html","group":"Brand","name":"Logo & Wordmark","viewport":"700x170","subtitle":"Blue cube bitmap + Inter 600 wordmark, −0.609px tracking","zh":"标志与字标","ja":"ロゴとワードマーク","subtitleZh":"蓝色立方体图标 + Inter 600 字标，字距 −0.609px","subtitleJa":"青い立方体のビットマップ + Inter 600 のワードマーク、字間 −0.609px"},{"path":"guidelines/colors-list.html","group":"Colors","name":"Color List","viewport":"700x2740","subtitle":"Every color in the system, with name and hex","zh":"色值清单","ja":"カラー一覧","subtitleZh":"系统中的全部色值，含名称与十六进制码","subtitleJa":"システム内の全カラー、名称とHEX値付き"},{"path":"guidelines/colors-palette.html","group":"Colors","name":"Palette","viewport":"700x880","subtitle":"Grouped by role — hover a dot for its token and hex","zh":"调色板","ja":"パレット","subtitleZh":"按角色分组 — 悬停色点可查看 token 与色值","subtitleJa":"役割別のグループ — ドットにホバーでトークンとHEXを表示"},{"path":"guidelines/colors-schemes.html","group":"Colors","name":"Schemes","viewport":"700x800","subtitle":"Sets that work together — surface, text, border, accent","zh":"配色方案","ja":"配色スキーム","subtitleZh":"可直接套用的配色组合 — 表面、文字、边框、强调色","subtitleJa":"組み合わせて機能するセット — 面・文字・境界・アクセント"},{"path":"guidelines/colors-transparency.html","group":"Colors","name":"Transparency","viewport":"700x490","subtitle":"Alpha scale — the number is the opacity","zh":"透明度","ja":"透明度","subtitleZh":"透明度阶梯 — 数字即不透明度","subtitleJa":"アルファ階調 — 数字がそのまま不透明度"},{"path":"guidelines/foundations-borders.html","group":"Foundations","name":"Borders & Shadows","viewport":"700x190","subtitle":"Hairlines carry the UI; shadows only on canvas nodes","zh":"边框与阴影","ja":"ボーダーとシャドウ","subtitleZh":"发丝边框承载整个界面；阴影仅用于画布节点","subtitleJa":"極細ボーダーがUI全体を支え、シャドウはキャンバスノードのみに使用"},{"path":"guidelines/foundations-chrome.html","group":"Foundations","name":"App Chrome Dimensions","viewport":"700x180","subtitle":"Fixed panel widths & bar heights","zh":"应用外壳尺寸","ja":"アプリ外枠のサイズ","subtitleZh":"固定的面板宽度与工具栏高度","subtitleJa":"固定されたパネル幅とバーの高さ"},{"path":"guidelines/foundations-motion.html","group":"Foundations","name":"Motion","viewport":"700x170","subtitle":"120/160/240ms · ease-out — hover, rise, pulse, spin","zh":"动效","ja":"モーション","subtitleZh":"120/160/240ms · ease-out 缓动 — 悬停、升起、脉冲、旋转","subtitleJa":"120/160/240ms · ease-out — ホバー、出現、パルス、回転"},{"path":"guidelines/foundations-radii.html","group":"Foundations","name":"Corner Radii","viewport":"700x200","subtitle":"4 controls · 8 buttons · 10 cards · 14/16 tiles & nodes · full circles","zh":"圆角","ja":"角丸","subtitleZh":"4px 控件 · 8px 按钮 · 10px 卡片 · 14/16px 瓦片与节点 · 全圆","subtitleJa":"4pxコントロール · 8pxボタン · 10pxカード · 14/16pxタイル・ノード · 完全円形"},{"path":"guidelines/foundations-size-tiers.html","group":"Foundations","name":"Size Tiers","viewport":"700x1340","subtitle":"sm 28 · md 32 · lg 40 — one tier per region, never mixed in a row; CJK one step larger at sm","zh":"尺寸层级","ja":"サイズ階層","subtitleZh":"sm 28 · md 32 · lg 40——每个区域一档，同一行不混用；CJK 在 sm 下大一号","subtitleJa":"sm 28 · md 32 · lg 40 — 領域ごとに 1 段階、同じ行で混在させない。CJK は sm で 1 段階大きい"},{"path":"guidelines/foundations-spacing.html","group":"Foundations","name":"Spacing","viewport":"700x170","subtitle":"4px family · page 24×32 · card 21 · section gap 24 · gaps 8 inside a group, 12/16/24 between groups","zh":"间距","ja":"余白","subtitleZh":"4px 间距体系 · 页面留白 24×32 · 卡片内边距 21 · 区块间距 24 · 组内间距 8，组间 12/16/24","subtitleJa":"4px単位の体系 · ページ余白24×32 · カード内余白21 · セクション間隔24 · グループ内8、グループ間12/16/24"},{"path":"guidelines/interaction-states.html","group":"Foundations","name":"Interaction States","viewport":"700x570","subtitle":"The five states every control carries — and where each one is defined","zh":"交互状态","ja":"インタラクション状態","subtitleZh":"每个控件都具备的五种状态 — 以及各自的定义位置","subtitleJa":"すべてのコントロールが持つ5つの状態 — と各々の定義場所"},{"path":"guidelines/type-extended.html","group":"Type","name":"Display Scale","viewport":"700x440","subtitle":"Display sizes 24–60 — tracking follows the same size→tracking curve","zh":"展示级字号","ja":"ディスプレイスケール","subtitleZh":"展示级字号 24–60 — 字距沿用同一条字号→字距曲线","subtitleJa":"ディスプレイサイズ24–60 — 字間は同じサイズ→字間カーブに従う"},{"path":"guidelines/type-mono.html","group":"Type","name":"Mono / Code Only","viewport":"700x170","subtitle":"Menlo for code blocks, logs, inline code and config-code chips — IDs and amounts stay in Inter with tabular figures","zh":"等宽字体 / 仅用于代码","ja":"等幅フォント／コード専用","subtitleZh":"Menlo 只用于代码块、日志、行内代码和配置代码标签——编号与金额仍用 Inter 等宽数字","subtitleJa":"Menlo はコードブロック・ログ・インラインコード・設定コードのチップ専用 — ID と金額は Inter の等幅数字"},{"path":"guidelines/type-scale.html","group":"Type","name":"Type Scale","viewport":"700x450","subtitle":"Inter — the 14px scale: 12 captions · 14 body and controls · 16 section titles · 20 page titles; CJK one step larger below 14","zh":"字号阶梯","ja":"フォントサイズ体系","subtitleZh":"Inter——14px 字号阶梯：12 说明文字 · 14 正文与控件 · 16 区块标题 · 20 页面标题；CJK 在 14 以下大一号","subtitleJa":"Inter — 14px スケール：12 キャプション · 14 本文とコントロール · 16 セクション見出し · 20 ページ見出し。CJK は 14 未満で 1 段階大きい"},{"path":"guidelines/type-weights.html","group":"Type","name":"Inter Weights","viewport":"700x280","subtitle":"300 numerals · 400 body · 500 UI-medium · 600 titles — 500 becomes 600 in Chinese, Japanese and Korean","zh":"Inter 字重","ja":"Inter のウェイト","subtitleZh":"300 数字 · 400 正文 · 500 界面中等 · 600 标题 — 中文、日文、韩文中 500 改为 600","subtitleJa":"300：数字 · 400：本文 · 500：UI中間 · 600：見出し — 中国語・日本語・韓国語では500が600になる"},{"path":"components/_cards/charts-1-sparkline.card.html","group":"Charts","name":"Sparkline","viewport":"700x830","subtitle":"Micro trends for stat tiles, table cells, list rows — line · area · bars · curve","zh":"迷你趋势图","ja":"スパークライン","subtitleZh":"微型趋势 — 统计卡、表格单元格、列表行 · 线 / 面积 / 柱 / 曲线","subtitleJa":"ミニトレンド — 統計タイル・表セル・リスト行 · ライン / エリア / バー / カーブ"},{"path":"components/_cards/charts-2-line.card.html","group":"Charts","name":"Line & Area","viewport":"700x1370","subtitle":"Trends over time — straight, smooth or stepped · stacked area · hover + legend mute","zh":"折线与面积图","ja":"ライン & エリア","subtitleZh":"时间趋势 — 直线、平滑曲线或阶梯 · 堆叠面积 · 悬停与图例开关","subtitleJa":"時系列トレンド — 直線・スムーズ曲線・ステップ · 積み上げエリア · ホバーと凡例ミュート"},{"path":"components/_cards/charts-3-bar.card.html","group":"Charts","name":"Bar Chart","viewport":"700x2040","subtitle":"Vertical & horizontal — grouped · stacked · 100% stacked · diverging · combo line","zh":"柱状图","ja":"バーチャート","subtitleZh":"纵向与横向 — 分组 · 堆叠 · 百分比堆叠 · 正负差异 · 折线组合","subtitleJa":"縦・横 — グループ · 積み上げ · 100%積み上げ · プラスマイナス差異 · ラインコンボ"},{"path":"components/_cards/charts-4-barlist.card.html","group":"Charts","name":"Bar List","viewport":"700x540","subtitle":"Horizontal labeled bars — top-N rankings, budget consumption","zh":"横向条形列表","ja":"バーリスト","subtitleZh":"横向带标签条形 — Top-N 排名、预算消耗","subtitleJa":"横向きラベル付きバー — Top-Nランキング・予算消化"},{"path":"components/_cards/charts-5-donut.card.html","group":"Charts","name":"Donut & Pie","viewport":"700x570","subtitle":"Composition with a KPI center — hover lifts a segment","zh":"环形与饼图","ja":"ドーナツ & パイ","subtitleZh":"带 KPI 中心的构成占比 — 悬停抬升扇区","subtitleJa":"KPIセンター付き構成比 — ホバーでセグメントが浮き上がる"},{"path":"components/_cards/charts-6-scatter.card.html","group":"Charts","name":"Scatter & Bubble","viewport":"700x480","subtitle":"x/y correlation, bubble = third dimension — nearest-point tooltip","zh":"散点气泡图","ja":"散布図 & バブル","subtitleZh":"x/y 相关性，气泡为第三维 — 就近吸附提示","subtitleJa":"x/y相関、バブルが第3の次元 — 最近点スナップのツールチップ"},{"path":"components/_cards/charts-7-heatmap.card.html","group":"Charts","name":"Heatmap","viewport":"700x480","subtitle":"Matrix density — sequential blue ramp · diverging red/green variance","zh":"热力图","ja":"ヒートマップ","subtitleZh":"矩阵密度 — 顺序蓝色阶 · 正负发散色阶","subtitleJa":"マトリクス密度 — シーケンシャル / ダイバージング"},{"path":"components/_cards/charts-8-waterfall.card.html","group":"Charts","name":"Waterfall","viewport":"700x470","subtitle":"Finance bridge — signed deltas, re-baselining totals, running-sum connectors","zh":"瀑布图","ja":"ウォーターフォール","subtitleZh":"财务桥 — 有符号增减、小计重定基线、运行和连接线","subtitleJa":"財務ブリッジ — 符号付き増減・小計の再ベースライン・累計コネクタ"},{"path":"components/_cards/charts-9-bullet.card.html","group":"Charts","name":"Bullet","viewport":"700x470","subtitle":"Actual vs. target rows with a target tick — misses in red","zh":"子弹图","ja":"ブレットチャート","subtitleZh":"实际对目标 — 目标刻度线，未达标红色","subtitleJa":"実績対目標 — ターゲットティック、未達は赤"},{"path":"components/_cards/charts-10-gauge.card.html","group":"Charts","name":"Gauge","viewport":"700x310","subtitle":"Semi-circular KPI — flat arc, threshold bands, no needle","zh":"仪表盘","ja":"ゲージ","subtitleZh":"半圆 KPI — 平面圆弧、阈值分段、无指针","subtitleJa":"半円KPI — フラットアーク・しきい値バンド・針なし"},{"path":"components/_cards/charts-11-funnel.card.html","group":"Charts","name":"Funnel","viewport":"700x620","subtitle":"Stage counts with step-to-step conversion — sub-50% steps flagged","zh":"漏斗图","ja":"ファネル","subtitleZh":"阶段计数与逐级转化率 — 低于 50% 标红","subtitleJa":"ステージ数と段階間コンバージョン — 50%未満は赤"},{"path":"components/_cards/charts-12-treemap.card.html","group":"Charts","name":"Treemap","viewport":"700x450","subtitle":"Squarified composition — readable at 15+ items, hover for share","zh":"矩形树图","ja":"ツリーマップ","subtitleZh":"平铺方块构成 — 15+ 项仍可读，悬停看占比","subtitleJa":"スクエアリファイド構成 — 15+項目でも読める、ホバーでシェア"},{"path":"components/_cards/charts-14-radar.card.html","group":"Charts","name":"Radar","viewport":"700x490","subtitle":"Spider chart — a few entities across the same 3–10 measures","zh":"雷达图","ja":"レーダーチャート","subtitleZh":"蜘蛛网图 — 多个对象在同一组 3–10 项指标上的对比","subtitleJa":"スパイダーチャート — 同じ3〜10指標での対象比較"},{"path":"components/_cards/charts-15-distribution.card.html","group":"Charts","name":"Histogram & Box Plot","viewport":"700x760","subtitle":"Distribution of one measure · spread and outliers per group","zh":"直方图与箱线图","ja":"ヒストグラム & 箱ひげ図","subtitleZh":"单一指标的分布 · 各分组的离散度与离群值","subtitleJa":"単一指標の分布 · グループごとのばらつきと外れ値"},{"path":"components/_cards/charts-16-pareto.card.html","group":"Charts","name":"Pareto","viewport":"700x460","subtitle":"Sorted bars + cumulative % line — the vital few vs. the trivial many","zh":"帕累托图","ja":"パレート図","subtitleZh":"降序柱 + 累计百分比线 — 区分关键少数与次要多数","subtitleJa":"降順バー + 累積%ライン — 重要な少数と些末な多数"},{"path":"components/_cards/charts-17-candlestick.card.html","group":"Charts","name":"Candlestick","viewport":"700x730","subtitle":"OHLC K-line — volume band, moving average, hollow-body convention","zh":"K 线图","ja":"ローソク足","subtitleZh":"OHLC K 线 — 成交量带、移动平均、空心实体惯例","subtitleJa":"OHLCローソク足 — 出来高バンド・移動平均・中空ボディ"},{"path":"components/_cards/charts-18-sankey.card.html","group":"Charts","name":"Sankey","viewport":"700x550","subtitle":"Flow diagram — columns derived from the graph, never positioned by hand","zh":"桑基图","ja":"サンキー図","subtitleZh":"流向图 — 列位置由图结构推导，无需手工摆放","subtitleJa":"フロー図 — 列位置はグラフ構造から導出、手作業の配置なし"},{"path":"components/_cards/charts-19-chord.card.html","group":"Charts","name":"Chord","viewport":"700x910","subtitle":"Circular Sankey — many-to-many, cyclical flows on one ring","zh":"和弦图","ja":"コード図","subtitleZh":"环形桑基 — 多对多、可回流的流向都在一个圆环上","subtitleJa":"円形サンキー — 多対多で循環するフローを一つの環に"},{"path":"components/_cards/charts-20-sunburst.card.html","group":"Charts","name":"Sunburst","viewport":"700x540","subtitle":"Hierarchy as concentric rings — click a ring to zoom, center to go back","zh":"旭日图","ja":"サンバースト","subtitleZh":"层级的同心环 — 点击环层下钻，点击圆心返回","subtitleJa":"階層を同心円で — リングをクリックでドリルダウン、中心で戻る"},{"path":"components/_cards/charts-21-worldmap.card.html","group":"Charts","name":"World Map","viewport":"700x870","subtitle":"Choropleth on real Natural Earth geometry — hover, select, diverging scale","zh":"世界地图","ja":"世界地図","subtitleZh":"基于真实 Natural Earth 地理数据的分级填色图 — 悬停、选中、发散色阶","subtitleJa":"実際のNatural Earth地理データによるコロプレス — ホバー・選択・ダイバージング"},{"path":"components/_cards/charts-22-gantt.card.html","group":"Charts","name":"Gantt","viewport":"700x590","subtitle":"Timeline of tasks — weekend tinting, progress fill, today marker, milestones","zh":"甘特图","ja":"ガントチャート","subtitleZh":"任务时间线 — 周末底纹、进度填充、今日标记、里程碑","subtitleJa":"タスクのタイムライン — 週末の網掛け・進捗・今日マーカー・マイルストーン"},{"path":"components/_cards/charts-23-bar3d.card.html","group":"Charts","name":"3D Bars","viewport":"700x790","subtitle":"Cuboid bars, grouped depth rows or stacked — drag to orbit, hover to read","zh":"立体柱状图","ja":"3Dバー","subtitleZh":"立方体柱 — 分组纵深排列或堆叠 · 拖拽旋转 · 悬停读数","subtitleJa":"直方体バー — 奥行きグループ / 積み上げ · ドラッグ回転 · ホバー読み取り"},{"path":"components/_cards/charts-24-pie3d.card.html","group":"Charts","name":"3D Pie & Donut","viewport":"700x1270","subtitle":"Extruded and stepped-stairs slices — drag spins in place, hover lifts a slice","zh":"立体饼图与环形","ja":"3Dパイ & ドーナツ","subtitleZh":"立体与阶梯高度扇区 — 拖拽原地旋转 · 悬停抬升扇区","subtitleJa":"押し出し & 階段状スライス — ドラッグでその場回転 · ホバーでリフト"},{"path":"components/_cards/charts-25-surface3d.card.html","group":"Charts","name":"3D Surface","viewport":"700x480","subtitle":"z = f(x,y) heat-shaded grid — drag to orbit, hover reads a cell","zh":"立体曲面图","ja":"3Dサーフェス","subtitleZh":"z = f(x,y) 热力着色网格 — 拖拽旋转 · 悬停读取单元格","subtitleJa":"z = f(x,y) ヒート着色グリッド — ドラッグ回転 · ホバーでセル読み取り"},{"path":"components/_cards/charts-26-scatter3d.card.html","group":"Charts","name":"3D Scatter","viewport":"700x520","subtitle":"Points in an orientation cube — drag to orbit, hover pins x·y·z","zh":"立体散点图","ja":"3D散布図","subtitleZh":"方向立方体内的散点 — 拖拽旋转 · 悬停显示 x·y·z","subtitleJa":"方向キューブ内の散布点 — ドラッグ回転 · ホバーで x·y·z 表示"},{"path":"components/_cards/charts-27-ribbon3d.card.html","group":"Charts","name":"3D Ribbon","viewport":"700x510","subtitle":"Series as extruded depth bands — the classic 3D area · drag to orbit","zh":"立体层带图","ja":"3Dリボン","subtitleZh":"序列各占一条纵深层带 — 经典 3D 面积呈现 · 拖拽旋转","subtitleJa":"系列ごとの奥行きバンド — クラシックな3Dエリア表現 · ドラッグ回転"},{"path":"components/_cards/charts-99-fullpage.card.html","group":"Charts","name":"Full-Page Analytics","viewport":"1512x2210","subtitle":"Reference layout only — every chart type composed into one screen","zh":"全屏分析页","ja":"フルページ分析","subtitleZh":"仅作参考布局 — 22 种图表全部编排进同一个屏幕","subtitleJa":"参考レイアウトのみ — 22種類すべてのチャートを1画面に構成"}];
+window.KB_CARDS = [{"path":"components/_cards/accordion.card.html","group":"Components","name":"Accordion","viewport":"700x332","subtitle":"Generic collapsible section — settings/FAQ style","zh":"手风琴折叠","ja":"アコーディオン","subtitleZh":"通用可折叠区块 — 设置/FAQ 风格","subtitleJa":"汎用の折りたたみセクション — 設定/FAQ スタイル"},{"path":"components/_cards/action-chip.card.html","group":"Components","name":"Action Chip","viewport":"700x462","subtitle":"Tinted bulk-action chips · five tones · size tiers, Latin and CJK","zh":"操作胶囊","ja":"アクションチップ","subtitleZh":"浅色批量操作标签 · 五种色调 · 尺寸层级，西文与 CJK","subtitleJa":"淡色の一括操作チップ · 5 トーン · サイズ階層、欧文と CJK"},{"path":"components/_cards/activity.card.html","group":"Components","name":"Activity","viewport":"700x368","subtitle":"ActivityItem rows · DotActivity feed","zh":"动态记录","ja":"アクティビティ","subtitleZh":"ActivityItem 动态行 · DotActivity 圆点信息流","subtitleJa":"ActivityItem の行 · DotActivity のフィード"},{"path":"components/_cards/alert.card.html","group":"Components","name":"Alert","viewport":"700x496","subtitle":"In-card message — 4 tones, with and without body","zh":"提醒条","ja":"アラート","subtitleZh":"卡片内提示信息 — 4 种色调，含/不含正文","subtitleJa":"カード内メッセージ — 4トーン、本文の有無"},{"path":"components/_cards/app-chrome.card.html","group":"Components","name":"App Chrome","viewport":"700x1566","subtitle":"Sidebar tones · SidePanel · TopBar · UserMenu · PageToolbar","zh":"应用外壳","ja":"アプリの外枠","subtitleZh":"侧边栏色调 · 侧面板 · 顶栏 · 用户菜单 · 页面工具栏","subtitleJa":"サイドバーのトーン · サイドパネル · トップバー · ユーザーメニュー · ページツールバー"},{"path":"components/_cards/banner.card.html","group":"Components","name":"Banner","viewport":"700x486","subtitle":"Page-level notification — 4 tones · action link · dismissible","zh":"横幅通知","ja":"バナー","subtitleZh":"页面级通知条 — 4 种色调 · 操作链接 · 可关闭","subtitleJa":"ページレベルの通知 — 4トーン · アクションリンク · 閉じるボタン付き"},{"path":"components/_cards/breadcrumb.card.html","group":"Components","name":"Breadcrumb","viewport":"700x738","subtitle":"Path trail — hover darkens · long trails collapse to an ellipsis dropdown","zh":"面包屑导航","ja":"パンくずリスト","subtitleZh":"路径导航 — 悬停加深 · 过长路径折叠为省略号下拉","subtitleJa":"パス表示 — ホバーで濃くなる · 長いパスは省略記号のドロップダウンに折りたたみ"},{"path":"components/_cards/button-1-base.card.html","group":"Components","name":"Button","viewport":"700x1059","subtitle":"Solid · soft/outline · ghost · text-only · disabled · loading","zh":"按钮","ja":"ボタン","subtitleZh":"实心 · 浅色/描边 · 幽灵 · 纯文字 · 禁用 · 加载中","subtitleJa":"塗りつぶし · ソフト/アウトライン · ゴースト · テキストのみ · 無効 · 読み込み中"},{"path":"components/_cards/button-4-group.card.html","group":"Components","name":"Button Group","viewport":"700x582","subtitle":"Segmented group · split button · shortcut hint · badge","zh":"按钮组","ja":"ボタングループ","subtitleZh":"分段按钮组 · 拆分按钮 · 快捷键提示 · 角标","subtitleJa":"セグメント化グループ · スプリットボタン · ショートカットヒント · バッジ"},{"path":"components/_cards/button-2-states.card.html","group":"Components","name":"Button Interaction States","viewport":"1120x965","subtitle":"Rest · hover · press · focus · loading · disabled — every variant, live and forced","zh":"按钮交互状态","ja":"ボタンのインタラクション状態","subtitleZh":"静默 · 悬停 · 按下 · 聚焦 · 加载中 · 禁用 — 全部变体，实时与强制态并列","subtitleJa":"静止 · ホバー · 押下 · フォーカス · 読み込み中 · 無効 — 全バリアント、実動と強制表示"},{"path":"components/_cards/button-3-sizes-icons.card.html","group":"Components","name":"Button Sizes & Icons","viewport":"700x908","subtitle":"sm 28 · md 32 · lg 40, Latin and CJK · icon placement · full width","zh":"按钮尺寸与图标","ja":"ボタンのサイズとアイコン","subtitleZh":"sm 28 · md 32 · lg 40，西文与 CJK · 图标位置 · 全宽","subtitleJa":"sm 28 · md 32 · lg 40、欧文と CJK · アイコン位置 · 全幅"},{"path":"components/_cards/button-5-ai.card.html","group":"Components","name":"Button · AI","viewport":"700x937","subtitle":"variant=\"ai\" — Prophet AI entry points only · travelling gradient ring · hover speeds up","zh":"AI 按钮","ja":"AI ボタン","subtitleZh":"variant=\"ai\" — 仅用于方知入口 · 流动的渐变描边 · 悬停时加速","subtitleJa":"variant=\"ai\" — Prophet AI の入口専用 · 流れるグラデーションの枠線 · ホバーで加速"},{"path":"components/_cards/canvas-zoom-controls.card.html","group":"Components","name":"Canvas Zoom Controls","viewport":"700x110","subtitle":"Pipeline canvas − / % / + / fit-to-view","zh":"画布缩放控件","ja":"キャンバスズームコントロール","subtitleZh":"流程画布 − / % / + / 适应视图","subtitleJa":"パイプラインキャンバスの − / % / + / 全体表示"},{"path":"components/_cards/cards-indicators.card.html","group":"Components","name":"Cards & Indicators","viewport":"700x528","subtitle":"Work in progress · Card · StatCard · Badge · IconTile · charts","zh":"卡片与指示器","ja":"カードとインジケーター","subtitleZh":"开发中 · Card 卡片 · StatCard 统计卡 · Badge 徽标 · IconTile 图标块 · 图表","subtitleJa":"作業中 · Card · StatCard · Badge · IconTile · チャート"},{"path":"components/_cards/checkbox.card.html","group":"Components","name":"Checkbox","viewport":"700x606","subtitle":"Checked · unchecked · indeterminate · disabled · sizes","zh":"复选框","ja":"チェックボックス","subtitleZh":"选中 · 未选中 · 半选 · 禁用 · 多尺寸","subtitleJa":"選択済み · 未選択 · 中間状態 · 無効 · サイズ違い"},{"path":"components/_cards/codeblock.card.html","group":"Components","name":"Code Block","viewport":"700x286","subtitle":"SQL Preview / JSON export — mono with copy button","zh":"代码块","ja":"コードブロック","subtitleZh":"SQL 预览 / JSON 导出 — 带复制按钮的等宽代码块","subtitleJa":"SQL プレビュー／JSON エクスポート — コピー機能付き等幅コードブロック"},{"path":"components/_cards/combobox.card.html","group":"Components","name":"Combobox","viewport":"700x558","subtitle":"Typeahead single-select — type to filter · keyboard nav · no-results","zh":"输入筛选下拉","ja":"コンボボックス","subtitleZh":"输入即筛选的单选下拉 — 键盘导航 · 无结果状态","subtitleJa":"入力して絞り込む単一選択 — キーボード操作 · 該当なし状態"},{"path":"components/_cards/context-menu.card.html","group":"Components","name":"Context Menu","viewport":"700x1310","subtitle":"Icons · plain text · danger item · long list","zh":"右键菜单","ja":"右クリックメニュー","subtitleZh":"带图标 · 纯文字 · 危险项 · 长列表","subtitleJa":"アイコン付き · テキストのみ · 危険操作項目 · 長いリスト"},{"path":"components/_cards/date-picker.card.html","group":"Components","name":"Date Picker","viewport":"700x649","subtitle":"Input + month-grid popover — today outlined · selected filled","zh":"日期选择器","ja":"日付ピッカー","subtitleZh":"输入框 + 月历弹层 — 今天描边 · 选中填充","subtitleJa":"入力欄 + 月グリッドのポップオーバー — 本日は枠線 · 選択日は塗りつぶし"},{"path":"components/_cards/diffvalue.card.html","group":"Components","name":"Diff Value","viewport":"700x387","subtitle":"Before → after change display (config migration)","zh":"差异值","ja":"差分値","subtitleZh":"变更前 → 变更后 数值展示（配置迁移场景）","subtitleJa":"変更前 → 変更後 の値表示（設定移行シナリオ）"},{"path":"components/_cards/divider.card.html","group":"Components","name":"Divider","viewport":"700x338","subtitle":"Plain · labeled · vertical","zh":"分隔线","ja":"区切り線","subtitleZh":"普通 · 带标签 · 垂直","subtitleJa":"通常 · ラベル付き · 縦向き"},{"path":"components/_cards/drawer.card.html","group":"Components","name":"Drawer","viewport":"700x558","subtitle":"Slide-out detail panel — header · scrollable body · footer actions","zh":"抽屉面板","ja":"ドロワー","subtitleZh":"滑出式详情面板 — 标题栏 · 可滚动主体 · 底部操作区","subtitleJa":"スライドアウト式の詳細パネル — ヘッダー · スクロール本文 · フッター操作"},{"path":"components/_cards/dropdown-menu.card.html","group":"Components","name":"Dropdown Menu","viewport":"700x1152","subtitle":"Button · icon-only · ghost text · avatar triggers — icon items & plain-text items","zh":"下拉菜单","ja":"ドロップダウンメニュー","subtitleZh":"按钮 · 纯图标 · 幽灵文字 · 头像触发 — 带图标与纯文字菜单项","subtitleJa":"ボタン · アイコンのみ · ゴーストテキスト · アバタートリガー — アイコン付き/テキストのみの項目"},{"path":"components/_cards/dropzone.card.html","group":"Components","name":"Dropzone","viewport":"924x718","subtitle":"Empty · drag-over · uploaded · error · disabled","zh":"拖放上传区","ja":"ドロップゾーン","subtitleZh":"空状态 · 拖拽悬停 · 已上传 · 错误 · 禁用","subtitleJa":"空 · ドラッグオーバー · アップロード済み · エラー · 無効"},{"path":"components/_cards/empty-state.card.html","group":"Components","name":"Empty State","viewport":"924x644","subtitle":"First-run · no results · error — with and without action","zh":"空状态","ja":"空状態","subtitleZh":"首次使用 · 无结果 · 错误 — 含/不含操作按钮","subtitleJa":"初回利用 · 該当なし · エラー — アクションの有無"},{"path":"components/_cards/filter-bar.card.html","group":"Components","name":"Filter Bar (List Report)","viewport":"1000x566","subtitle":"Fiori-style filter bar composed with a table — Adapt Filters · Go","zh":"筛选栏（列表报表）","ja":"フィルターバー（リストレポート）","subtitleZh":"Fiori 风格筛选栏与表格组合 — Adapt Filters · Go","subtitleJa":"テーブルと組み合わせたFiori形式のフィルターバー — Adapt Filters · Go"},{"path":"components/_cards/icon-button.card.html","group":"Components","name":"Icon Button","viewport":"700x498","subtitle":"Square ghost icon button · sm 28 · md 32 · lg 40 · active / muted / danger / loading / disabled","zh":"图标按钮","ja":"アイコンボタン","subtitleZh":"方形幽灵图标按钮 · sm 28 · md 32 · lg 40 · 激活 / 弱化 / 危险 / 加载 / 禁用","subtitleJa":"正方形ゴーストアイコンボタン · sm 28 · md 32 · lg 40 · アクティブ / ミュート / 危険 / 読み込み / 無効"},{"path":"components/_cards/input.card.html","group":"Components","name":"Input","viewport":"700x797","subtitle":"Default · filled · required · readOnly · disabled · error · hint · focus","zh":"输入框","ja":"入力欄","subtitleZh":"默认 · 已填写 · 必填 · 只读 · 禁用 · 错误 · 提示文字 · 聚焦","subtitleJa":"既定 · 入力済み · 必須 · 読み取り専用 · 無効 · エラー · ヒント · フォーカス"},{"path":"components/_cards/keyvalue.card.html","group":"Components","name":"Key/Value Rows","viewport":"700x261","subtitle":"Config summary and confirmation-step rows","zh":"键值行","ja":"キー/バリュー行","subtitleZh":"配置摘要与确认步骤中的行展示","subtitleJa":"設定サマリーと確認ステップの行表示"},{"path":"components/_cards/kbd.card.html","group":"Components","name":"Keyboard Shortcuts","viewport":"700x267","subtitle":"Kbd — keycap hints for a power-user tool","zh":"键盘快捷键","ja":"キーボードショートカット","subtitleZh":"Kbd — 面向高级用户工具的按键提示","subtitleJa":"Kbd — パワーユーザー向けツールのキー入力ヒント"},{"path":"components/_cards/listrow.card.html","group":"Components","name":"List Row","viewport":"700x433","subtitle":"Expandable workflow rows — collapsed, expanded, with trailing count","zh":"列表行","ja":"リスト行","subtitleZh":"可展开的工作流行 — 折叠、展开、带末尾计数","subtitleJa":"展開可能なワークフロー行 — 折りたたみ、展開、末尾カウント付き"},{"path":"components/_cards/loading.card.html","group":"Components","name":"Loading","viewport":"700x459","subtitle":"Spinner sizes · Skeleton text, blocks and table rows","zh":"加载状态","ja":"読み込み状態","subtitleZh":"Spinner 多尺寸 · Skeleton 文字、色块与表格行","subtitleJa":"Spinner のサイズ違い · Skeleton のテキスト・ブロック・テーブル行"},{"path":"components/_cards/log-viewer.card.html","group":"Components","name":"Log Viewer","viewport":"700x436","subtitle":"Mono run log — info · warn · error lines","zh":"日志查看器","ja":"ログビューア","subtitleZh":"等宽运行日志 — info · warn · error 行","subtitleJa":"等幅の実行ログ — info · warn · error の行"},{"path":"components/_cards/modal.card.html","group":"Components","name":"Modal","viewport":"700x520","subtitle":"Default · destructive footer · with form content · no subtitle","zh":"弹窗","ja":"モーダル","subtitleZh":"默认 · 危险操作底栏 · 含表单内容 · 无副标题","subtitleJa":"既定 · 破壊的操作のフッター · フォーム付き · 副題なし"},{"path":"components/_cards/multi-select.card.html","group":"Components","name":"Multi Select","viewport":"700x530","subtitle":"Checkbox dropdown — removable tags · +n overflow · clear all","zh":"多选下拉","ja":"マルチセレクト","subtitleZh":"复选框下拉 — 可移除标签 · +n 溢出 · 一键清空","subtitleJa":"チェックボックス式ドロップダウン — 削除可能タグ · +n オーバーフロー · 全クリア"},{"path":"components/_cards/number-stepper.card.html","group":"Components","name":"Number Stepper","viewport":"700x344","subtitle":"Default · at min · at max · disabled","zh":"数字步进器","ja":"数値ステッパー","subtitleZh":"默认 · 最小值 · 最大值 · 禁用","subtitleJa":"既定 · 最小値 · 最大値 · 無効"},{"path":"components/_cards/pagination.card.html","group":"Components","name":"Pagination","viewport":"700x758","subtitle":"Row-range label · small set · first/last page states","zh":"分页","ja":"ページネーション","subtitleZh":"行范围标签 · 少页场景 · 首页/末页状态","subtitleJa":"行範囲ラベル · 少ページ時 · 先頭/末尾ページの状態"},{"path":"components/_cards/people.card.html","group":"Components","name":"People","viewport":"700x326","subtitle":"Avatar · AvatarGroup — initials, sizes, real images","zh":"人物","ja":"ユーザー","subtitleZh":"Avatar 头像 · AvatarGroup 头像组 — 首字母、尺寸、真实图片","subtitleJa":"Avatar（アバター）· AvatarGroup（アバターグループ）— イニシャル、サイズ、実画像"},{"path":"components/_cards/pipeline-node.card.html","group":"Components","name":"Pipeline Node Card","viewport":"700x1781","subtitle":"220×90 node — category hues · status badges · ports with hover, drag-to-connect and drop states","zh":"流程节点卡","ja":"パイプラインノードカード","subtitleZh":"220×90 节点 — 分类色 · 状态角标 · 端口的悬停、拖拽连线与落点状态","subtitleJa":"220×90ノード — カテゴリ色 · ステータスバッジ · ポートのホバー・ドラッグ接続・ドロップ状態"},{"path":"components/_cards/pipeline-palette.card.html","group":"Components","name":"Pipeline Palette","viewport":"700x771","subtitle":"240px component drawer — grid/list toggle · collapsible hued categories","zh":"组件面板","ja":"コンポーネントパレット","subtitleZh":"240px 组件抽屉 — 网格/列表切换 · 可折叠的分类色分组","subtitleJa":"240pxコンポーネントドロワー — グリッド/リスト切替 · 折りたたみ可能なカテゴリ"},{"path":"components/_cards/radio.card.html","group":"Components","name":"Radio Button","zh":"单选按钮","ja":"ラジオボタン","viewport":"700x1741","subtitle":"Single choice from a small set — md/sm · description · disabled · row · card variant · arrow-key navigation","subtitleZh":"小集合中的单选 — md/sm · 描述文字 · 禁用 · 横排 · 卡片式 · 方向键切换","subtitleJa":"少数の選択肢から1つ — md/sm · 説明文 · 無効 · 横並び · カード型 · 矢印キー操作"},{"path":"components/_cards/search.card.html","group":"Components","name":"Search Input","viewport":"700x756","subtitle":"Bordered · bare top-bar · with value/clear · disabled","zh":"搜索框","ja":"検索欄","subtitleZh":"带边框 · 顶栏无边框 · 带内容/清除 · 禁用","subtitleJa":"ボーダー付き · トップバー用（枠なし）· 入力値/クリア付き · 無効"},{"path":"components/_cards/search-global.card.html","group":"Components","name":"Search · Global","viewport":"1000x3634","subtitle":"GlobalSearch — TopBar search with ⌘K / Ctrl K · scopes · grouped results · Prophet AI hand-off · Deep Search","zh":"搜索 · 全局","ja":"検索 · グローバル","subtitleZh":"GlobalSearch — 顶栏搜索，⌘K / Ctrl K 唤起 · 范围切换 · 分组结果 · 转交方知 · 深度搜索","subtitleJa":"GlobalSearch — トップバー検索、⌘K / Ctrl K で起動 · スコープ切替 · グループ化された結果 · Prophet AI への引き継ぎ · ディープサーチ"},{"path":"components/_cards/segmented-control.card.html","group":"Components","name":"Segmented Control","zh":"分段控件","ja":"セグメントコントロール","viewport":"700x1864","subtitle":"Mutually exclusive views in one inset track — md/sm · counts · icons · icon-only · disabled option · full width · ViewToggle","subtitleZh":"同一轨道内的互斥视图切换 — md/sm · 计数 · 图标 · 纯图标 · 禁用项 · 撑满宽度 · ViewToggle","subtitleJa":"1つのトラック内で排他的にビューを切替 — md/sm · カウント · アイコン · アイコンのみ · 無効項目 · 全幅 · ViewToggle"},{"path":"components/_cards/select.card.html","group":"Components","name":"Select","viewport":"700x513","subtitle":"md / sm · placeholder · disabled · error","zh":"下拉选择","ja":"セレクト","subtitleZh":"中/小尺寸 · 占位符 · 禁用 · 错误","subtitleJa":"md/sm サイズ · プレースホルダー · 無効 · エラー"},{"path":"components/_cards/relative-time-picker.card.html","group":"Components","name":"Relative Time Picker","viewport":"700x871","subtitle":"Filter by how long ago · md / sm / lg · unlimited · disabled · localised labels","zh":"相对时间选择器","ja":"相対時間ピッカー","subtitleZh":"按\"多久以前\"筛选 · md / sm / lg · 不限时间 · 禁用 · 本地化文案","subtitleJa":"「どれくらい前」で絞り込み · md / sm / lg · 無制限 · 無効 · ローカライズ"},{"path":"components/_cards/slider.card.html","group":"Components","name":"Slider","viewport":"700x267","subtitle":"Filled track · ring knob · value bubble · min/max labels","zh":"滑杆","ja":"スライダー","subtitleZh":"填充轨道 · 环形滑块 · 数值气泡 · 最值标签","subtitleJa":"塗りつぶしトラック · リング状ノブ · 値バブル · 最小/最大ラベル"},{"path":"components/_cards/smart-table.card.html","group":"Components","name":"Smart Table (Database Grid)","viewport":"700x1454","subtitle":"Frozen header and row numbers · default and compact density · typed fields · hue pills · aggregates · + New","zh":"智能表格（数据网格）","ja":"スマートテーブル（データベースグリッド）","subtitleZh":"冻结表头与行号 · 默认与紧凑两种行密度 · Notion/Airtable 风格网格 — 类型化字段 · 色相胶囊 · 聚合统计 · + New","subtitleJa":"固定ヘッダーと行番号 · デフォルトとコンパクトの行密度 · Notion/Airtable形式のグリッド — 型付きフィールド · 色相ピル · 集計 · + New"},{"path":"components/_cards/spreadsheet.card.html","group":"Components","name":"Spreadsheet","viewport":"924x590","subtitle":"Formula bar · frozen headers · range selection · =SUM() · sheet tabs · status bar","zh":"电子表格","ja":"スプレッドシート","subtitleZh":"公式栏 · 冻结表头 · 范围选择 · =SUM() · 工作表标签 · 状态栏","subtitleJa":"数式バー · 固定ヘッダー · 範囲選択 · =SUM() · シートタブ · ステータスバー"},{"path":"components/_cards/stepper.card.html","group":"Components","name":"Stepper","viewport":"700x618","subtitle":"Multi-step flow header — done · current · upcoming","zh":"步骤条","ja":"ステッパー","subtitleZh":"多步骤流程头部 — 已完成 · 当前 · 待进行","subtitleJa":"多段階フローのヘッダー — 完了 · 現在 · 未着手"},{"path":"components/_cards/table.card.html","group":"Components","name":"Table","viewport":"700x11184","subtitle":"Anatomy · densities · column types · two-line name · sorting · selection · frames · column resize · states · composition","zh":"表格","ja":"テーブル","subtitleZh":"结构 · 密度 · 列类型 · 两行名称 · 排序 · 选择 · 边框方式 · 列宽拖拽 · 状态 · 组合用法","subtitleJa":"構造 · 密度 · 列タイプ · 2行の名前 · 並べ替え · 選択 · フレーム · 列幅ドラッグ · 状態 · 組み合わせ"},{"path":"components/_cards/tabs.card.html","group":"Components","name":"Tabs","viewport":"700x1118","subtitle":"Underline tabs · panel tabs · pill filter tabs · counts","zh":"标签页","ja":"タブ","subtitleZh":"下划线标签页 · 面板标签页 · 胶囊筛选标签 · 计数","subtitleJa":"アンダーラインタブ · パネルタブ · ピル型フィルタータブ · カウント"},{"path":"components/_cards/tag.card.html","group":"Components","name":"Tag","viewport":"700x438","subtitle":"Removable filter tags — distinct from Badge/ActionChip","zh":"标签","ja":"タグ","subtitleZh":"可移除的筛选标签 — 区别于 Badge/ActionChip","subtitleJa":"削除可能なフィルタータグ — Badge/ActionChip とは区別"},{"path":"components/_cards/textarea.card.html","group":"Components","name":"Textarea","viewport":"924x674","subtitle":"Default · character count · over the limit · disabled","zh":"文本域","ja":"テキストエリア","subtitleZh":"默认 · 字数统计 · 超出限制 · 禁用","subtitleJa":"既定 · 文字数カウント · 上限超過 · 無効"},{"path":"components/_cards/timeline.card.html","group":"Components","name":"Timeline","viewport":"700x373","subtitle":"Vertical activity timeline — toned icon nodes on a hairline spine","zh":"时间线","ja":"タイムライン","subtitleZh":"垂直活动时间线 — 细线主轴上的着色图标节点","subtitleJa":"縦型の活動タイムライン — 極細の軸上に色付きアイコンノード"},{"path":"components/_cards/toast.card.html","group":"Components","name":"Toast","viewport":"700x744","subtitle":"Tones · with/without meta · live ToastStack demo","zh":"轻提示","ja":"トースト通知","subtitleZh":"多种色调 · 含/不含附加信息 · 实时 ToastStack 演示","subtitleJa":"トーン違い · メタ情報の有無 · ToastStack のライブデモ"},{"path":"components/_cards/toggles.card.html","group":"Components","name":"Toggle Switch","viewport":"700x2771","subtitle":"Binary settings pill — sizes · semantic red→green · glyph knobs · inline text · captions · async loading","zh":"开关","ja":"スイッチ","subtitleZh":"二元设置开关 — 尺寸 · 红关绿开语义配色 · 滑块内图标/单字 · 胶囊内文字 · 两侧标注 · 异步加载","subtitleJa":"バイナリ設定ピル — サイズ · 赤オフ→緑オン · ノブ内グリフ · ピル内テキスト · 両側ラベル · 非同期ローディング"},{"path":"components/_cards/tooltip.card.html","group":"Components","name":"Tooltip","viewport":"700x499","subtitle":"Placements — top · bottom · left · right, on icon and text triggers","zh":"文字提示","ja":"ツールチップ","subtitleZh":"多种定位 — 上/下/左/右，可用于图标或文字触发","subtitleJa":"配置位置 — 上/下/左/右、アイコンおよびテキストトリガーで使用可能"},{"path":"components/_cards/tree.card.html","group":"Components","name":"Tree","viewport":"700x3171","subtitle":"Cascading checkboxes · disabled nodes · lines · async load · search · drag · reorder · keyboard","zh":"树形视图","ja":"ツリービュー","subtitleZh":"级联勾选 · 禁用节点 · 连接线 · 异步加载 · 搜索 · 拖拽 · 排序 · 键盘操作","subtitleJa":"カスケードチェック · 無効ノード · 接続線 · 非同期読み込み · 検索 · ドラッグ · 並べ替え · キーボード操作"},{"path":"components/_cards/icons-0-usage.card.html","group":"Icons","name":"Icon Usage","viewport":"700x2221","subtitle":"Monochrome glyphs · category tiles · document hues · status · marks · icons inside components — when an icon gets colour","zh":"图标用法","ja":"アイコンの使い方","subtitleZh":"单色图标 · 分类色块 · 文档色 · 状态 · 标记 · 组件内图标——图标什么时候用颜色","subtitleJa":"単色グリフ · カテゴリタイル · ドキュメント色 · ステータス · マーク · コンポーネント内のアイコン — いつ色を付けるか"},{"path":"components/_cards/icons-1-core.card.html","group":"Icons","name":"Core Set","viewport":"700x1764","subtitle":"The 157 stroke glyphs the product itself uses — keyword search · click to download the SVG","zh":"核心图标集","ja":"コアセット","subtitleZh":"产品自身使用的 157 个线性图标 — 关键词搜索 · 点击下载 SVG","subtitleJa":"プロダクト自身が使用する157個のストロークアイコン — キーワード検索 · クリックで SVG をダウンロード"},{"path":"components/_cards/icons-2-feather.card.html","group":"Icons","name":"Feather Library","viewport":"700x4551","subtitle":"404 stroke icons (core + all of Feather) · keyword search · click to download the SVG","zh":"Feather 图标库","ja":"Featherライブラリ","subtitleZh":"404 个线性图标（核心集 + 完整 Feather）· 关键词搜索 · 点击下载 SVG","subtitleJa":"404個のストロークアイコン（コア + Feather全量）· キーワード検索 · クリックで SVG をダウンロード"},{"path":"components/_cards/icons-2b-lucide.card.html","group":"Icons","name":"Lucide Library","viewport":"700x1396","subtitle":"Full Lucide set (1,700+ stroke glyphs, core style) via pinned CDN · keyword search · click to download the SVG","zh":"Lucide 图标库","ja":"Lucideライブラリ","subtitleZh":"完整 Lucide 图标集（1,700+ 线性图标，与核心风格一致，固定版本 CDN）· 关键词搜索 · 点击下载 SVG","subtitleJa":"Lucide 全セット（1,700+ のストロークアイコン、コアと同一スタイル、固定版 CDN）· キーワード検索 · クリックで SVG をダウンロード"},{"path":"components/_cards/icons-3-unicons.card.html","group":"Icons","name":"Unicons Library","viewport":"700x1348","subtitle":"1,206 Unicons line glyphs via CDN webfont · keyword search · click to download the SVG","zh":"Unicons 图标库","ja":"Uniconsライブラリ","subtitleZh":"1,206 个 Unicons 线性图标（CDN 字体）· 关键词搜索 · 点击下载 SVG","subtitleJa":"CDNウェブフォント経由の1,206個のUniconsラインアイコン · キーワード検索 · クリックで SVG をダウンロード"},{"path":"components/_cards/icons-4-datasource.card.html","group":"Icons","name":"Data Source Logos","viewport":"700x636","subtitle":"17 data-source logo images in assets/logos/datasource/","zh":"数据源图标","ja":"データソースロゴ","subtitleZh":"17 张数据源图标图片，位于 assets/logos/datasource/","subtitleJa":"assets/logos/datasource/ の 17 枚のデータソースロゴ画像"},{"path":"guidelines/brand-logo.html","group":"Brand","name":"Logo & Wordmark","viewport":"700x162","subtitle":"Blue cube bitmap + Inter 600 wordmark, −0.609px tracking","zh":"标志与字标","ja":"ロゴとワードマーク","subtitleZh":"蓝色立方体图标 + Inter 600 字标，字距 −0.609px","subtitleJa":"青い立方体のビットマップ + Inter 600 のワードマーク、字間 −0.609px"},{"path":"guidelines/colors-list.html","group":"Colors","name":"Color List","viewport":"700x2740","subtitle":"Every color in the system, with name and hex","zh":"色值清单","ja":"カラー一覧","subtitleZh":"系统中的全部色值，含名称与十六进制码","subtitleJa":"システム内の全カラー、名称とHEX値付き"},{"path":"guidelines/colors-palette.html","group":"Colors","name":"Palette","viewport":"700x880","subtitle":"Grouped by role — hover a dot for its token and hex","zh":"调色板","ja":"パレット","subtitleZh":"按角色分组 — 悬停色点可查看 token 与色值","subtitleJa":"役割別のグループ — ドットにホバーでトークンとHEXを表示"},{"path":"guidelines/colors-schemes.html","group":"Colors","name":"Schemes","viewport":"700x783","subtitle":"Sets that work together — surface, text, border, accent","zh":"配色方案","ja":"配色スキーム","subtitleZh":"可直接套用的配色组合 — 表面、文字、边框、强调色","subtitleJa":"組み合わせて機能するセット — 面・文字・境界・アクセント"},{"path":"guidelines/colors-transparency.html","group":"Colors","name":"Transparency","viewport":"700x478","subtitle":"Alpha scale — the number is the opacity","zh":"透明度","ja":"透明度","subtitleZh":"透明度阶梯 — 数字即不透明度","subtitleJa":"アルファ階調 — 数字がそのまま不透明度"},{"path":"guidelines/foundations-borders.html","group":"Foundations","name":"Borders & Shadows","viewport":"700x176","subtitle":"Hairlines carry the UI; shadows only on canvas nodes","zh":"边框与阴影","ja":"ボーダーとシャドウ","subtitleZh":"发丝边框承载整个界面；阴影仅用于画布节点","subtitleJa":"極細ボーダーがUI全体を支え、シャドウはキャンバスノードのみに使用"},{"path":"guidelines/foundations-chrome.html","group":"Foundations","name":"App Chrome Dimensions","viewport":"700x164","subtitle":"Fixed panel widths & bar heights","zh":"应用外壳尺寸","ja":"アプリ外枠のサイズ","subtitleZh":"固定的面板宽度与工具栏高度","subtitleJa":"固定されたパネル幅とバーの高さ"},{"path":"guidelines/foundations-motion.html","group":"Foundations","name":"Motion","viewport":"700x152","subtitle":"120/160/240ms · ease-out — hover, rise, pulse, spin","zh":"动效","ja":"モーション","subtitleZh":"120/160/240ms · ease-out 缓动 — 悬停、升起、脉冲、旋转","subtitleJa":"120/160/240ms · ease-out — ホバー、出現、パルス、回転"},{"path":"guidelines/foundations-radii.html","group":"Foundations","name":"Corner Radii","viewport":"700x200","subtitle":"4 controls · 8 buttons · 10 cards · 14/16 tiles & nodes · full circles","zh":"圆角","ja":"角丸","subtitleZh":"4px 控件 · 8px 按钮 · 10px 卡片 · 14/16px 瓦片与节点 · 全圆","subtitleJa":"4pxコントロール · 8pxボタン · 10pxカード · 14/16pxタイル・ノード · 完全円形"},{"path":"guidelines/foundations-size-tiers.html","group":"Foundations","name":"Size Tiers","viewport":"700x1335","subtitle":"sm 28 · md 32 · lg 40 — one tier per region, never mixed in a row; CJK one step larger at sm","zh":"尺寸层级","ja":"サイズ階層","subtitleZh":"sm 28 · md 32 · lg 40——每个区域一档，同一行不混用；CJK 在 sm 下大一号","subtitleJa":"sm 28 · md 32 · lg 40 — 領域ごとに 1 段階、同じ行で混在させない。CJK は sm で 1 段階大きい"},{"path":"guidelines/foundations-spacing.html","group":"Foundations","name":"Spacing","viewport":"700x138","subtitle":"4px family · page 24×32 · card 21 · section gap 24 · gaps 8 inside a group, 12/16/24 between groups","zh":"间距","ja":"余白","subtitleZh":"4px 间距体系 · 页面留白 24×32 · 卡片内边距 21 · 区块间距 24 · 组内间距 8，组间 12/16/24","subtitleJa":"4px単位の体系 · ページ余白24×32 · カード内余白21 · セクション間隔24 · グループ内8、グループ間12/16/24"},{"path":"guidelines/interaction-states.html","group":"Foundations","name":"Interaction States","viewport":"700x552","subtitle":"The five states every control carries — and where each one is defined","zh":"交互状态","ja":"インタラクション状態","subtitleZh":"每个控件都具备的五种状态 — 以及各自的定义位置","subtitleJa":"すべてのコントロールが持つ5つの状態 — と各々の定義場所"},{"path":"guidelines/type-extended.html","group":"Type","name":"Display Scale","viewport":"700x388","subtitle":"Display sizes 24–60 — tracking follows the same size→tracking curve","zh":"展示级字号","ja":"ディスプレイスケール","subtitleZh":"展示级字号 24–60 — 字距沿用同一条字号→字距曲线","subtitleJa":"ディスプレイサイズ24–60 — 字間は同じサイズ→字間カーブに従う"},{"path":"guidelines/type-mono.html","group":"Type","name":"Mono / Code Only","viewport":"700x187","subtitle":"Menlo for code blocks, logs, inline code and config-code chips — IDs and amounts stay in Inter with tabular figures","zh":"等宽字体 / 仅用于代码","ja":"等幅フォント／コード専用","subtitleZh":"Menlo 只用于代码块、日志、行内代码和配置代码标签——编号与金额仍用 Inter 等宽数字","subtitleJa":"Menlo はコードブロック・ログ・インラインコード・設定コードのチップ専用 — ID と金額は Inter の等幅数字"},{"path":"guidelines/type-scale.html","group":"Type","name":"Type Scale","viewport":"700x408","subtitle":"Inter — the 14px scale: 12 captions · 14 body and controls · 16 section titles · 20 page titles; CJK one step larger below 14","zh":"字号阶梯","ja":"フォントサイズ体系","subtitleZh":"Inter——14px 字号阶梯：12 说明文字 · 14 正文与控件 · 16 区块标题 · 20 页面标题；CJK 在 14 以下大一号","subtitleJa":"Inter — 14px スケール：12 キャプション · 14 本文とコントロール · 16 セクション見出し · 20 ページ見出し。CJK は 14 未満で 1 段階大きい"},{"path":"guidelines/type-weights.html","group":"Type","name":"Inter Weights","viewport":"700x264","subtitle":"300 numerals · 400 body · 500 UI-medium · 600 titles — 500 becomes 600 in Chinese, Japanese and Korean","zh":"Inter 字重","ja":"Inter のウェイト","subtitleZh":"300 数字 · 400 正文 · 500 界面中等 · 600 标题 — 中文、日文、韩文中 500 改为 600","subtitleJa":"300：数字 · 400：本文 · 500：UI中間 · 600：見出し — 中国語・日本語・韓国語では500が600になる"},{"path":"components/_cards/charts-1-sparkline.card.html","group":"Charts","name":"Sparkline","viewport":"700x945","subtitle":"Micro trends for stat tiles, table cells, list rows — line · area · bars · curve","zh":"迷你趋势图","ja":"スパークライン","subtitleZh":"微型趋势 — 统计卡、表格单元格、列表行 · 线 / 面积 / 柱 / 曲线","subtitleJa":"ミニトレンド — 統計タイル・表セル・リスト行 · ライン / エリア / バー / カーブ"},{"path":"components/_cards/charts-2-line.card.html","group":"Charts","name":"Line & Area","viewport":"700x1538","subtitle":"Trends over time — straight, smooth or stepped · stacked area · hover + legend mute","zh":"折线与面积图","ja":"ライン & エリア","subtitleZh":"时间趋势 — 直线、平滑曲线或阶梯 · 堆叠面积 · 悬停与图例开关","subtitleJa":"時系列トレンド — 直線・スムーズ曲線・ステップ · 積み上げエリア · ホバーと凡例ミュート"},{"path":"components/_cards/charts-3-bar.card.html","group":"Charts","name":"Bar Chart","viewport":"700x2203","subtitle":"Vertical & horizontal — grouped · stacked · 100% stacked · diverging · combo line","zh":"柱状图","ja":"バーチャート","subtitleZh":"纵向与横向 — 分组 · 堆叠 · 百分比堆叠 · 正负差异 · 折线组合","subtitleJa":"縦・横 — グループ · 積み上げ · 100%積み上げ · プラスマイナス差異 · ラインコンボ"},{"path":"components/_cards/charts-4-barlist.card.html","group":"Charts","name":"Bar List","viewport":"700x545","subtitle":"Horizontal labeled bars — top-N rankings, budget consumption","zh":"横向条形列表","ja":"バーリスト","subtitleZh":"横向带标签条形 — Top-N 排名、预算消耗","subtitleJa":"横向きラベル付きバー — Top-Nランキング・予算消化"},{"path":"components/_cards/charts-5-donut.card.html","group":"Charts","name":"Donut & Pie","viewport":"700x583","subtitle":"Composition with a KPI center — hover lifts a segment","zh":"环形与饼图","ja":"ドーナツ & パイ","subtitleZh":"带 KPI 中心的构成占比 — 悬停抬升扇区","subtitleJa":"KPIセンター付き構成比 — ホバーでセグメントが浮き上がる"},{"path":"components/_cards/charts-6-scatter.card.html","group":"Charts","name":"Scatter & Bubble","viewport":"700x496","subtitle":"x/y correlation, bubble = third dimension — nearest-point tooltip","zh":"散点气泡图","ja":"散布図 & バブル","subtitleZh":"x/y 相关性，气泡为第三维 — 就近吸附提示","subtitleJa":"x/y相関、バブルが第3の次元 — 最近点スナップのツールチップ"},{"path":"components/_cards/charts-7-heatmap.card.html","group":"Charts","name":"Heatmap","viewport":"700x537","subtitle":"Matrix density — sequential blue ramp · diverging red/green variance","zh":"热力图","ja":"ヒートマップ","subtitleZh":"矩阵密度 — 顺序蓝色阶 · 正负发散色阶","subtitleJa":"マトリクス密度 — シーケンシャル / ダイバージング"},{"path":"components/_cards/charts-8-waterfall.card.html","group":"Charts","name":"Waterfall","viewport":"700x483","subtitle":"Finance bridge — signed deltas, re-baselining totals, running-sum connectors","zh":"瀑布图","ja":"ウォーターフォール","subtitleZh":"财务桥 — 有符号增减、小计重定基线、运行和连接线","subtitleJa":"財務ブリッジ — 符号付き増減・小計の再ベースライン・累計コネクタ"},{"path":"components/_cards/charts-9-bullet.card.html","group":"Charts","name":"Bullet","viewport":"700x500","subtitle":"Actual vs. target rows with a target tick — misses in red","zh":"子弹图","ja":"ブレットチャート","subtitleZh":"实际对目标 — 目标刻度线，未达标红色","subtitleJa":"実績対目標 — ターゲットティック、未達は赤"},{"path":"components/_cards/charts-10-gauge.card.html","group":"Charts","name":"Gauge","viewport":"700x320","subtitle":"Semi-circular KPI — flat arc, threshold bands, no needle","zh":"仪表盘","ja":"ゲージ","subtitleZh":"半圆 KPI — 平面圆弧、阈值分段、无指针","subtitleJa":"半円KPI — フラットアーク・しきい値バンド・針なし"},{"path":"components/_cards/charts-11-funnel.card.html","group":"Charts","name":"Funnel","viewport":"700x631","subtitle":"Stage counts with step-to-step conversion — sub-50% steps flagged","zh":"漏斗图","ja":"ファネル","subtitleZh":"阶段计数与逐级转化率 — 低于 50% 标红","subtitleJa":"ステージ数と段階間コンバージョン — 50%未満は赤"},{"path":"components/_cards/charts-12-treemap.card.html","group":"Charts","name":"Treemap","viewport":"700x463","subtitle":"Squarified composition — readable at 15+ items, hover for share","zh":"矩形树图","ja":"ツリーマップ","subtitleZh":"平铺方块构成 — 15+ 项仍可读，悬停看占比","subtitleJa":"スクエアリファイド構成 — 15+項目でも読める、ホバーでシェア"},{"path":"components/_cards/charts-14-radar.card.html","group":"Charts","name":"Radar","viewport":"700x514","subtitle":"Spider chart — a few entities across the same 3–10 measures","zh":"雷达图","ja":"レーダーチャート","subtitleZh":"蜘蛛网图 — 多个对象在同一组 3–10 项指标上的对比","subtitleJa":"スパイダーチャート — 同じ3〜10指標での対象比較"},{"path":"components/_cards/charts-15-distribution.card.html","group":"Charts","name":"Histogram & Box Plot","viewport":"700x809","subtitle":"Distribution of one measure · spread and outliers per group","zh":"直方图与箱线图","ja":"ヒストグラム & 箱ひげ図","subtitleZh":"单一指标的分布 · 各分组的离散度与离群值","subtitleJa":"単一指標の分布 · グループごとのばらつきと外れ値"},{"path":"components/_cards/charts-16-pareto.card.html","group":"Charts","name":"Pareto","viewport":"700x473","subtitle":"Sorted bars + cumulative % line — the vital few vs. the trivial many","zh":"帕累托图","ja":"パレート図","subtitleZh":"降序柱 + 累计百分比线 — 区分关键少数与次要多数","subtitleJa":"降順バー + 累積%ライン — 重要な少数と些末な多数"},{"path":"components/_cards/charts-17-candlestick.card.html","group":"Charts","name":"Candlestick","viewport":"700x789","subtitle":"OHLC K-line — volume band, moving average, hollow-body convention","zh":"K 线图","ja":"ローソク足","subtitleZh":"OHLC K 线 — 成交量带、移动平均、空心实体惯例","subtitleJa":"OHLCローソク足 — 出来高バンド・移動平均・中空ボディ"},{"path":"components/_cards/charts-18-sankey.card.html","group":"Charts","name":"Sankey","viewport":"700x561","subtitle":"Flow diagram — columns derived from the graph, never positioned by hand","zh":"桑基图","ja":"サンキー図","subtitleZh":"流向图 — 列位置由图结构推导，无需手工摆放","subtitleJa":"フロー図 — 列位置はグラフ構造から導出、手作業の配置なし"},{"path":"components/_cards/charts-19-chord.card.html","group":"Charts","name":"Chord","viewport":"700x924","subtitle":"Circular Sankey — many-to-many, cyclical flows on one ring","zh":"和弦图","ja":"コード図","subtitleZh":"环形桑基 — 多对多、可回流的流向都在一个圆环上","subtitleJa":"円形サンキー — 多対多で循環するフローを一つの環に"},{"path":"components/_cards/charts-20-sunburst.card.html","group":"Charts","name":"Sunburst","viewport":"700x551","subtitle":"Hierarchy as concentric rings — click a ring to zoom, center to go back","zh":"旭日图","ja":"サンバースト","subtitleZh":"层级的同心环 — 点击环层下钻，点击圆心返回","subtitleJa":"階層を同心円で — リングをクリックでドリルダウン、中心で戻る"},{"path":"components/_cards/charts-21-worldmap.card.html","group":"Charts","name":"World Map","viewport":"700x924","subtitle":"Choropleth on real Natural Earth geometry — hover, select, diverging scale","zh":"世界地图","ja":"世界地図","subtitleZh":"基于真实 Natural Earth 地理数据的分级填色图 — 悬停、选中、发散色阶","subtitleJa":"実際のNatural Earth地理データによるコロプレス — ホバー・選択・ダイバージング"},{"path":"components/_cards/charts-22-gantt.card.html","group":"Charts","name":"Gantt","viewport":"700x648","subtitle":"Timeline of tasks — weekend tinting, progress fill, today marker, milestones","zh":"甘特图","ja":"ガントチャート","subtitleZh":"任务时间线 — 周末底纹、进度填充、今日标记、里程碑","subtitleJa":"タスクのタイムライン — 週末の網掛け・進捗・今日マーカー・マイルストーン"},{"path":"components/_cards/charts-23-bar3d.card.html","group":"Charts","name":"3D Bars","viewport":"700x802","subtitle":"Cuboid bars, grouped depth rows or stacked — drag to orbit, hover to read","zh":"立体柱状图","ja":"3Dバー","subtitleZh":"立方体柱 — 分组纵深排列或堆叠 · 拖拽旋转 · 悬停读数","subtitleJa":"直方体バー — 奥行きグループ / 積み上げ · ドラッグ回転 · ホバー読み取り"},{"path":"components/_cards/charts-24-pie3d.card.html","group":"Charts","name":"3D Pie & Donut","viewport":"700x1336","subtitle":"Extruded and stepped-stairs slices — drag spins in place, hover lifts a slice","zh":"立体饼图与环形","ja":"3Dパイ & ドーナツ","subtitleZh":"立体与阶梯高度扇区 — 拖拽原地旋转 · 悬停抬升扇区","subtitleJa":"押し出し & 階段状スライス — ドラッグでその場回転 · ホバーでリフト"},{"path":"components/_cards/charts-25-surface3d.card.html","group":"Charts","name":"3D Surface","viewport":"700x493","subtitle":"z = f(x,y) heat-shaded grid — drag to orbit, hover reads a cell","zh":"立体曲面图","ja":"3Dサーフェス","subtitleZh":"z = f(x,y) 热力着色网格 — 拖拽旋转 · 悬停读取单元格","subtitleJa":"z = f(x,y) ヒート着色グリッド — ドラッグ回転 · ホバーでセル読み取り"},{"path":"components/_cards/charts-26-scatter3d.card.html","group":"Charts","name":"3D Scatter","viewport":"700x534","subtitle":"Points in an orientation cube — drag to orbit, hover pins x·y·z","zh":"立体散点图","ja":"3D散布図","subtitleZh":"方向立方体内的散点 — 拖拽旋转 · 悬停显示 x·y·z","subtitleJa":"方向キューブ内の散布点 — ドラッグ回転 · ホバーで x·y·z 表示"},{"path":"components/_cards/charts-27-ribbon3d.card.html","group":"Charts","name":"3D Ribbon","viewport":"700x524","subtitle":"Series as extruded depth bands — the classic 3D area · drag to orbit","zh":"立体层带图","ja":"3Dリボン","subtitleZh":"序列各占一条纵深层带 — 经典 3D 面积呈现 · 拖拽旋转","subtitleJa":"系列ごとの奥行きバンド — クラシックな3Dエリア表現 · ドラッグ回転"},{"path":"components/_cards/charts-99-fullpage.card.html","group":"Charts","name":"Full-Page Analytics","viewport":"1512x2200","subtitle":"Reference layout only — every chart type composed into one screen","zh":"全屏分析页","ja":"フルページ分析","subtitleZh":"仅作参考布局 — 22 种图表全部编排进同一个屏幕","subtitleJa":"参考レイアウトのみ — 22種類すべてのチャートを1画面に構成"}];

package/styles.css

@@ -7,4 +7,5 @@
 @import './tokens/motion.css';
 @import './tokens/charts.css';
 @import './tokens/interaction.css';
+@import './tokens/ai.css';
 @import './tokens/dark.css';

package/tokens/ai.css

@@ -0,0 +1,17 @@
+/* Prophet AI (方知) entry points — component tier. Used ONLY by Button variant="ai" and AI suggestion tiles.
+   The one sanctioned gradient outside charts, and the one animation whose speed changes (hover). */
+:root{
+--ai-gradient-start:var(--blue-500);
+--ai-gradient-end:var(--pink-500);
+--ai-gradient-stops:var(--ai-gradient-start),var(--ai-gradient-end),var(--ai-gradient-start);
+--ai-ring-rest-track:var(--border-control);
+--ai-ring-width:1px;
+--ai-tint:8%; /* @kind other */
+--ai-tint-press:14%; /* @kind other */
+--ai-glow-blur:6px;
+--ai-glow-opacity:.4; /* @kind other */
+--ai-spin-rest:5s; /* @kind other */
+--ai-spin-hover:1.2s; /* @kind other */
+}
+[data-theme="dark"]{--ai-ring-rest-track:var(--border-control);--ai-glow-opacity:.3 /* @kind other */}
+/* @property --kb-ai-angle and @keyframes kb-ai-spin are injected by components/buttons/ai-button.js */

package/tokens/colors.css

@@ -23,7 +23,7 @@
 --text-primary:var(--neutral-950);--text-heading:var(--neutral-900);--text-strong:var(--neutral-700);--text-body:var(--neutral-600);--text-secondary:var(--neutral-500);--text-muted:var(--neutral-400);--text-inverse:#ffffff;
 /* Foreground ON a saturated fill — always light, in BOTH themes */
 --on-accent:#ffffff;
-/* Foreground on the neutral "dark pill" (AI Assistant), which inverts in dark */
+/* Foreground on the neutral "dark pill" (Button variant="dark"), which inverts in dark */
 --action-dark-fg:#ffffff;
 --border-card:rgba(229,229,229,.6);--border-control:var(--neutral-200);--border-split:var(--neutral-300);--border-subtle:var(--neutral-100);--border-strong:var(--neutral-300);
 --action-primary:var(--blue-600);--action-primary-hover:var(--blue-700);--action-primary-active:#1039c4;--action-dark:var(--neutral-900);--action-dark-hover:var(--neutral-800);--action-dark-active:var(--neutral-950);

package/tokens/tokens.d.ts

@@ -7,6 +7,17 @@ export type TokenName =
   | "--action-primary"
   | "--action-primary-active"
   | "--action-primary-hover"
+  | "--ai-glow-blur"
+  | "--ai-glow-opacity"
+  | "--ai-gradient-end"
+  | "--ai-gradient-start"
+  | "--ai-gradient-stops"
+  | "--ai-ring-rest-track"
+  | "--ai-ring-width"
+  | "--ai-spin-hover"
+  | "--ai-spin-rest"
+  | "--ai-tint"
+  | "--ai-tint-press"
   | "--amber-100"
   | "--amber-200"
   | "--amber-300"
@@ -277,10 +288,13 @@ export type TokenName =
   | "--series-7"
   | "--series-8"
   | "--series-9"
+  | "--shadow-drawer"
   | "--shadow-menu"
   | "--shadow-modal"
   | "--shadow-node"
+  | "--shadow-raised"
   | "--shadow-selected"
+  | "--shadow-thumb"
   | "--sidebar-w"
   | "--skeleton"
   | "--soft-active"
@@ -372,6 +386,17 @@ export type TokenKey =
   | "actionPrimary"
   | "actionPrimaryActive"
   | "actionPrimaryHover"
+  | "aiGlowBlur"
+  | "aiGlowOpacity"
+  | "aiGradientEnd"
+  | "aiGradientStart"
+  | "aiGradientStops"
+  | "aiRingRestTrack"
+  | "aiRingWidth"
+  | "aiSpinHover"
+  | "aiSpinRest"
+  | "aiTint"
+  | "aiTintPress"
   | "amber100"
   | "amber200"
   | "amber300"
@@ -642,10 +667,13 @@ export type TokenKey =
   | "series7"
   | "series8"
   | "series9"
+  | "shadowDrawer"
   | "shadowMenu"
   | "shadowModal"
   | "shadowNode"
+  | "shadowRaised"
   | "shadowSelected"
+  | "shadowThumb"
   | "sidebarW"
   | "skeleton"
   | "softActive"