@keyfunc/keybricks-ds 2.6.0 → 2.7.0

package/DEPLOY.md

@@ -55,11 +55,11 @@ deploys the documentation site. Watch it under *Build → Pipelines*.
 **5. Cut the first release.**
 
 ```bash
-git tag v2.6.0 && git push --tags
+git tag v2.7.0 && git push --tags
 ```
 
 That tag runs `generated:check` → `version:check` → `npm publish`. Confirm under *Deploy →
-Package Registry*: `@keyfunc/keybricks-ds` 2.6.0.
+Package Registry*: `@keyfunc/keybricks-ds` 2.7.0.
 
 **6. Hand developers two things:** the Pages URL, and the `.npmrc` snippet in §4 below.
 
@@ -187,7 +187,7 @@ GitLab injects `CI_JOB_TOKEN` — use that instead and no secret is stored anywh
 **Install — straight from git** (no registry, no publish; works today)
 
 ```json
-"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.6.0"
+"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.7.0"
 ```
 
 Because the package has no build step, a git dependency needs no `prepare` script — npm

package/DESIGN.md

@@ -68,7 +68,7 @@ order (`app` → `surface` → `raised`) and depth reads correctly in both theme
 | `--action-primary-hover` | `#1447e6` | Hover |
 | `--action-primary-active` | `#1039c4` | Press |
 | `--soft-bg` | `#eff6ff` | Tinted button surface |
-| `--action-dark` | `#171717` | Dark pill (AI actions) |
+| `--action-dark` | `#171717` | Dark pill (brand-level actions) — Prophet AI entries use `Button variant="ai"` |
 
 ### Feedback — always a trio (solid / tint / text-on-tint)
 | Meaning | Solid | Tint bg | Text on tint |
@@ -160,10 +160,17 @@ collapsed), with a 56px brand head without a rule, a 2px-gap list of 36px items
 it at 240px, in the **same tone**. Tones: `recessed` (default — grey rail, the active item is a white tile
 with a hairline ring), `flush` (white rail), `contrast` (rail scoped to the dark theme) and `custom`
 (dark scope on one of ten `SIDEBAR_COLORS`). Pick one tone per product and pass it to both
-`Sidebar` and `SidePanel`. The top bar holds the bare search on the left and, on the right, the dark
-AI Assistant button, notifications, help and the user trigger, which opens `UserMenu` (identity,
+`Sidebar` and `SidePanel`. The top bar holds `GlobalSearch` on the left (⌘K / Ctrl K opens a 720px card over the bar; its AI rows and
+`Button variant="ai"` hand the question to the Prophet AI panel) and, on the right, notifications, help and the user trigger, which opens `UserMenu` (identity,
 appearance switch, rows).
 
+### Global Search field — a sanctioned exception
+
+The collapsed `GlobalSearch` field uses `SearchInput`'s box at rest (`--bg-surface`, 1px `--border-control`, `--radius-md`, muted
+search glyph, standard `Kbd`), with two differences that apply to `GlobalSearch` only: the placeholder is `--text-secondary`
+(not `--text-muted`), because it is the whole platform's entry prompt and must read at 4.5:1; and hover fills `--bg-inset` as
+well as darkening the border to `--border-strong`. A plain `SearchInput` keeps its muted placeholder and border-only hover.
+
 ### Menus: action vs single choice
 
 `ContextMenu` and `Menu` serve two kinds of list, and the row spacing says which one it is.
@@ -395,6 +402,8 @@ transition: var(--t-hover);   /* background, border-color, color */
 Nothing bounces. Nothing slides more than a few pixels. Keyframes available:
 `kb-fade-in`, `kb-rise`, `kb-toast-in`, `kb-spin`, `kb-pulse`, `kb-slide-in`.
 
+`kb-ai-spin` is reserved for Prophet AI entry points: the second continuous animation after `kb-spin`, and the only one that changes speed (5s per turn at rest, 1.2s on hover, eased through `playbackRate` so the angle never jumps). Use it only through `Button variant="ai"`.
+
 ---
 
 ## Interaction states — you get these for free
@@ -457,7 +466,7 @@ The list that prevents the most rework. These are absolute.
   `lineHeight`, where a bare number is a multiplier.)
 - **Do not reference a palette step** (`--neutral-500`, `--blue-600`) in component code.
 - **Do not use any font other than Inter and Menlo.** No Roboto, no Arial, no system-ui stack.
-- **Do not use gradients.** The only exception in the entire system is the chart area fill.
+- **Do not use gradients.** Two exceptions only: the chart area fill, and Prophet AI (方知) entry points — `Button variant="ai"` and AI suggestion tiles, through the `--ai-*` tokens. Never build an AI gradient by hand.
 - **Do not add drop shadows to content cards.** Cards use a 1px `--border-card` hairline.
 - **Do not round the odd numbers.** `--card-pad` 21px and `--card-pad-sm` 17px are from the source
   file; the 11px of `--text-2xs` is deliberate.

package/INTEGRATION.md

@@ -31,7 +31,7 @@ Not using a registry yet? A git dependency works with no publishing at all — t
 has no build step, so npm can use the checkout as-is:
 
 ```json
-"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.6.0"
+"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.7.0"
 ```
 
 **Source-only package.** `.jsx` and `.vue` files are published as authored, so your
@@ -163,7 +163,7 @@ Text, weight and tracking follow the tier through `--control-text` / `--control-
 weight becomes 600 and all tracking is 0 — nothing to configure. `DESIGN.md` has the full token
 table and the rules behind it.
 
-## Component index (121 components)
+## Component index (122 components)
 Import path is `@keyfunc/keybricks-ds/components/<group>/<Name>.jsx` (React) or `.vue` (Vue 3).
 Every component has a sibling `.d.ts` with its full props contract, and each group has a
 `.prompt.md` with usage notes.
@@ -214,6 +214,7 @@ import Textarea from '@keyfunc/keybricks-ds/components/forms/Textarea.vue'
 | `Combobox` | Type-to-filter single select, with keyboard nav and a no-results row. |
 | `MultiSelect` | Checkbox dropdown; picks render as removable tags with `+n` overflow. |
 | `SearchInput` | Search field with a leading glyph and a clear button. |
+| `GlobalSearch` | The TopBar search: a quiet field with a ⌘K / Ctrl K hint that opens a 720px card — scopes, grouped results, Deep Search, and pinned rows that hand the question to the Prophet AI panel (`onAsk`). `GLOBAL_SEARCH_LABELS.en` / `.zh` hold the copy. |
 | `Checkbox` | A 14 / 16 / 16px box by tier, plus an indeterminate state for parent rows. |
 | `Radio` / `RadioGroup` | Single choice from 2–5 visible options (past five, use `Select`). `description` adds a muted second line; `row` lays out horizontally; `variant="cards"` renders bordered selectable cards for choices a user must weigh. Arrow keys move the selection. Vue: `v-model`. |
 | `Switch` | Immediate on/off setting (no Save button). Track 28×16 at sm, 32×18 at md and lg — a switch has two sizes. A knob glyph (`knobIcon` / `knobText`, one character) needs md; the sm knob is too small. `insideOn`/`insideOff` for text in the pill, `labelOn`/`labelOff` for captions beside it (or `label` for a single settings caption). `tone="semantic"` is danger-off → success-on — reserve it for states with real consequence. `beforeChange(next)` returns a promise; the knob spins until it settles. Vue: `v-model:checked`. |
@@ -522,7 +523,20 @@ Pin a minor range and update deliberately:
 - **Tokens outside CSS.** `tokens.json` / `tokens.js` / `tokens.d.ts` gained the tier tokens
   (`--control-*`, `--bar-h`, `--group-gap`, …) — 352 light tokens in all (2.0.2 adds `--danger-soft-hover`).
 
-### 2.6.0（未发布）
+### 2.7.0
+
+No API removed. Vue merges the 2.6.0 Button / Toast work above; React gets the same props.
+
+- **`Button variant="ai"`** — for Prophet AI (方知) entry points only: 1px animated gradient ring, gradient tint and glow on hover; icon defaults to the new `prophet-sparkle` glyph. Tokens in `tokens/ai.css` (`--ai-gradient-*`, `--ai-tint*`, `--ai-spin-*`). `variant="dark"` stays for non-AI emphasis.
+- **`GlobalSearch`** (new, forms/) — the TopBar search: a field with a ⌘K / Ctrl K hint that opens a 720px card (scopes, grouped results, Deep Search, pinned Ask Prophet AI row). It never shows AI answers; AI entries call `onAsk(question)`. Copy in `GLOBAL_SEARCH_LABELS.en` / `.zh`. Its collapsed field is a documented exception to `SearchInput` (`--text-secondary` placeholder, hover fill).
+- **`TopBar`** renders `GlobalSearch` and no longer shows the black "AI Assistant" pill. `onAi` now receives the question; new `search` prop passes props to `GlobalSearch`. Old props keep working.
+- **`Kbd`** — `"mod"`, `"alt"`, `"shift"`, `"enter"` follow the user's OS: ⌘ ⌥ ⇧ ↵ on macOS, Ctrl Alt Shift Enter elsewhere.
+- **`Toast`** — tinted by tone (tone wash, solid tone border, tone-coloured text) so it reads against any page. React `Toast` gains `icon`, `children` and `closeLabel` (the Vue slots / prop from 2.6.0).
+- **React `Button`** gains the 2.6.0 Vue props: `trailingIcon`, `nativeType`, `text`, element icons, `aria-busy`; `onClick` receives the event.
+- **Icons:** new `prophet-sparkle`; the AI sparkle glyphs are redrawn.
+- Docs site: every example card is sized to its content, so the page no longer jumps while cards load.
+
+### 2.6.0
 
 - Vue Button 支持原生点击事件、组件 / VNode 图标、图标及加载插槽、独立尾部图标、后备文本和原生按钮类型；旧 actnplanBtn 的适配方式见 [按钮适配说明](components/buttons/BUTTON_MIGRATION.md)。Vue 专用声明位于 `Button.vue.d.ts`，React 接口保持原样。
 - Vue 新增 `@keyfunc/keybricks-ds/vue/message` 和 `@keyfunc/keybricks-ds/vue/message-box` 命令式服务入口；提供消息堆叠与分组，以及 alert / confirm / prompt、输入校验、关闭拦截、应用上下文和可配置默认文案。
@@ -530,6 +544,7 @@ Pin a minor range and update deliberately:
 - 与 Element Plus 的 API 对照、接入示例和兼容边界见 [消息服务迁移说明](components/feedback/MESSAGE_SERVICES.md)。不承诺所有 Element Plus 功能及样式完全兼容。
 - 本次仅修改源码及发布元数据；未执行测试、类型检查、构建、生成脚本或浏览器验证，发布前需同步生成产物中的版本元数据。
 
+
 ### 2.5.1
 
 Fixes only — no API removed.

package/_adherence.oxlintrc.json

@@ -24,6 +24,7 @@
               "components/data/**",
               "components/display/**",
               "components/feedback/**",
+              "components/feedback/_internal/**",
               "components/forms/**",
               "components/icons/**",
               "components/navigation/**",
@@ -125,12 +126,12 @@
         "message": "<BulletRow> doesn't accept that prop. Declared props: label, value, target, max, ranges."
       },
       {
-        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute > JSXIdentifier[name!=/^(?:variant|size|icon|iconSize|iconPosition|medium|disabled|loading|fullWidth|iconOnly|label|pressed|focused|onClick|children|style|key|ref|className|style|children)$/]",
-        "message": "<Button> doesn't accept that prop. Declared props: variant, size, icon, iconSize, iconPosition, medium, disabled, loading, fullWidth, iconOnly, label, pressed, focused, onClick, children, style."
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute > JSXIdentifier[name!=/^(?:variant|size|icon|trailingIcon|iconSize|iconPosition|medium|disabled|loading|fullWidth|iconOnly|label|text|nativeType|hovered|pressed|focused|onClick|children|style|key|ref|className|style|children)$/]",
+        "message": "<Button> doesn't accept that prop. Declared props: variant, size, icon, trailingIcon, iconSize, iconPosition, medium, disabled, loading, fullWidth, iconOnly, label, text, nativeType, hovered, pressed, focused, onClick, children, style."
       },
       {
-        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:primary|dark|outline|ghost|primary-soft|danger|danger-soft|text)$/]",
-        "message": "<Button> variant must be one of 'primary' | 'dark' | 'outline' | 'ghost' | 'primary-soft' | 'danger' | 'danger-soft' | 'text'."
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:primary|dark|outline|ghost|primary-soft|danger|danger-soft|text|ai)$/]",
+        "message": "<Button> variant must be one of 'primary' | 'dark' | 'outline' | 'ghost' | 'primary-soft' | 'danger' | 'danger-soft' | 'text' | 'ai'."
       },
       {
         "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
@@ -140,6 +141,10 @@
         "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='iconPosition'] > Literal[value!=/^(?:left|right)$/]",
         "message": "<Button> iconPosition must be one of 'left' | 'right'."
       },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='nativeType'] > Literal[value!=/^(?:button|submit|reset)$/]",
+        "message": "<Button> nativeType must be one of 'button' | 'submit' | 'reset'."
+      },
       {
         "selector": "JSXOpeningElement[name.name='Candle'] > JSXAttribute > JSXIdentifier[name!=/^(?:t|o|h|l|c|v|key|ref|className|style|children)$/]",
         "message": "<Candle> doesn't accept that prop. Declared props: t, o, h, l, c, v."
@@ -276,6 +281,18 @@
         "selector": "JSXOpeningElement[name.name='GaugeBand'] > JSXAttribute > JSXIdentifier[name!=/^(?:upTo|color|key|ref|className|style|children)$/]",
         "message": "<GaugeBand> doesn't accept that prop. Declared props: upTo, color."
       },
+      {
+        "selector": "JSXOpeningElement[name.name='GlobalSearchItem'] > JSXAttribute > JSXIdentifier[name!=/^(?:kind|title|sub|meta|icon|tone|keywords|onSelect|key|ref|className|style|children)$/]",
+        "message": "<GlobalSearchItem> doesn't accept that prop. Declared props: kind, title, sub, meta, icon, tone, keywords, onSelect."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='GlobalSearchItem'] > JSXAttribute[name.name='kind'] > Literal[value!=/^(?:feature|document|member|action)$/]",
+        "message": "<GlobalSearchItem> kind must be one of 'feature' | 'document' | 'member' | 'action'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='GlobalSearchItem'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:source|join|transform|merge|output)$/]",
+        "message": "<GlobalSearchItem> tone must be one of 'source' | 'join' | 'transform' | 'merge' | 'output'."
+      },
       {
         "selector": "JSXOpeningElement[name.name='HeatmapChart'] > JSXAttribute > JSXIdentifier[name!=/^(?:xLabels|yLabels|values|width|cellHeight|gap|scale|showValues|valueFormat|interactive|style|key|ref|className|style|children)$/]",
         "message": "<HeatmapChart> doesn't accept that prop. Declared props: xLabels, yLabels, values, width, cellHeight, gap, scale, showValues, valueFormat, interactive, style."
@@ -289,8 +306,8 @@
         "message": "<HistogramBucket> doesn't accept that prop. Declared props: from, to, n."
       },
       {
-        "selector": "JSXOpeningElement[name.name='Icon'] > JSXAttribute > JSXIdentifier[name!=/^(?:name|size|strokeWidth|color|style|className|key|ref|className|style|children)$/]",
-        "message": "<Icon> doesn't accept that prop. Declared props: name, size, strokeWidth, color, style, className."
+        "selector": "JSXOpeningElement[name.name='Icon'] > JSXAttribute > JSXIdentifier[name!=/^(?:name|size|strokeWidth|color|gradient|style|className|key|ref|className|style|children)$/]",
+        "message": "<Icon> doesn't accept that prop. Declared props: name, size, strokeWidth, color, gradient, style, className."
       },
       {
         "selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute > JSXIdentifier[name!=/^(?:icon|size|active|muted|danger|disabled|loading|label|pressed|focused|onClick|style|key|ref|className|style|children)$/]",
@@ -309,8 +326,12 @@
         "message": "<Input> size must be one of 'sm' | 'md' | 'lg'."
       },
       {
-        "selector": "JSXOpeningElement[name.name='Kbd'] > JSXAttribute > JSXIdentifier[name!=/^(?:keys|style|key|ref|className|style|children)$/]",
-        "message": "<Kbd> doesn't accept that prop. Declared props: keys, style."
+        "selector": "JSXOpeningElement[name.name='Kbd'] > JSXAttribute > JSXIdentifier[name!=/^(?:keys|platform|style|key|ref|className|style|children)$/]",
+        "message": "<Kbd> doesn't accept that prop. Declared props: keys, platform, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Kbd'] > JSXAttribute[name.name='platform'] > Literal[value!=/^(?:auto|mac|win)$/]",
+        "message": "<Kbd> platform must be one of 'auto' | 'mac' | 'win'."
       },
       {
         "selector": "JSXOpeningElement[name.name='KeyValue'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|value|mono|style|key|ref|className|style|children)$/]",
@@ -565,8 +586,8 @@
         "message": "<TimelineItem> tone must be one of 'success' | 'danger' | 'warning' | 'info' | 'neutral'."
       },
       {
-        "selector": "JSXOpeningElement[name.name='TopBar'] > JSXAttribute > JSXIdentifier[name!=/^(?:placeholder|onSearch|actions|aiLabel|onAi|onNotifications|onHelp|notificationsLabel|helpLabel|user|userMenu|style|key|ref|className|style|children)$/]",
-        "message": "<TopBar> doesn't accept that prop. Declared props: placeholder, onSearch, actions, aiLabel, onAi, onNotifications, onHelp, notificationsLabel, helpLabel, user, userMenu, style."
+        "selector": "JSXOpeningElement[name.name='TopBar'] > JSXAttribute > JSXIdentifier[name!=/^(?:placeholder|onSearch|search|actions|aiLabel|onAi|onNotifications|onHelp|notificationsLabel|helpLabel|user|userMenu|style|key|ref|className|style|children)$/]",
+        "message": "<TopBar> doesn't accept that prop. Declared props: placeholder, onSearch, search, actions, aiLabel, onAi, onNotifications, onHelp, notificationsLabel, helpLabel, user, userMenu, style."
       },
       {
         "selector": "JSXOpeningElement[name.name='TreeItem'] > JSXAttribute > JSXIdentifier[name!=/^(?:key|title|label|icon|hue|count|tag|children|disabled|disableCheckbox|selectable|checkable|isLeaf|key|ref|className|style|children)$/]",
@@ -734,6 +755,9 @@
       "GaugeBand": {
         "replaces": []
       },
+      "GlobalSearchItem": {
+        "replaces": []
+      },
       "HeatmapChart": {
         "replaces": []
       },
@@ -902,6 +926,17 @@
       "--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",
@@ -1630,7 +1665,18 @@
       "--chart-heat-5": "color",
       "--chart-heat-ink": "color",
       "--press-filter": "other",
-      "--press-filter-strong": "other"
+      "--press-filter-strong": "other",
+      "--ai-gradient-start": "color",
+      "--ai-gradient-end": "color",
+      "--ai-gradient-stops": "color",
+      "--ai-ring-rest-track": "color",
+      "--ai-ring-width": "spacing",
+      "--ai-tint": "other",
+      "--ai-tint-press": "other",
+      "--ai-glow-blur": "spacing",
+      "--ai-glow-opacity": "other",
+      "--ai-spin-rest": "other",
+      "--ai-spin-hover": "other"
     },
     "fontFamilies": [
       "Inter"