@keyfunc/keybricks-ds 2.5.1 → 2.7.0

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

@@ -0,0 +1,47 @@
+import type { Component, ComponentOptionsMixin, CSSProperties, DefineComponent, PublicProps, SlotsType, VNode } from 'vue';
+
+/** Vue 专用声明；同目录 Button.d.ts 继续描述 React 接口。 */
+export interface VueButtonProps {
+  /** ai：仅用于 Prophet AI（方知）入口；它的 icon 只接受 DS 图标名，默认 prophet-sparkle。 */
+  variant?: 'primary' | 'dark' | 'outline' | 'ghost' | 'primary-soft' | 'danger' | 'danger-soft' | 'text' | 'ai';
+  size?: 'sm' | 'md' | 'lg';
+  icon?: string | Component | VNode;
+  /** 不随 loading 隐藏，适用于下拉箭头等独立的尾部标记。 */
+  trailingIcon?: string | Component | VNode;
+  iconSize?: number;
+  iconPosition?: 'left' | 'right';
+  medium?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  iconOnly?: boolean;
+  label?: string;
+  /** 默认插槽的后备文本。 */
+  text?: string;
+  /** 强制悬停样式，用于规范展示。 */
+  hovered?: boolean;
+  pressed?: boolean;
+  focused?: boolean;
+  style?: CSSProperties;
+  /** 原生按钮类型，默认 button；旧表单适配时可明确传入 submit。 */
+  nativeType?: 'button' | 'submit' | 'reset';
+  onClick?: (event: MouseEvent) => void;
+}
+
+export interface VueButtonIconSlotProps {
+  size: number;
+  style: CSSProperties | null;
+}
+export interface VueButtonSlots {
+  default?: () => VNode[];
+  icon?: (props: VueButtonIconSlotProps) => VNode[];
+  loading?: (props: VueButtonIconSlotProps) => VNode[];
+  trailing?: (props: VueButtonIconSlotProps & { loading: boolean }) => VNode[];
+}
+
+declare const Button: DefineComponent<
+  VueButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin,
+  { click: (event: MouseEvent) => void }, string, PublicProps,
+  Readonly<VueButtonProps>, {}, SlotsType<VueButtonSlots>
+>;
+export default Button;

package/components/buttons/ai-button.js

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

package/components/buttons/buttons.prompt.md

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

package/components/display/Kbd.d.ts

@@ -1,7 +1,9 @@
 import * as React from "react";
-/** Keyboard shortcut keycap row (20px). Addition — for a power-user data tool's shortcut hints. */
+/** Keyboard shortcut keycap row (20px). Semantic keys adapt to the OS: "mod" → ⌘ on macOS / Ctrl elsewhere; also "alt"/"opt", "shift", "enter", "backspace", "ctrl", "esc". Any other string renders as-is. */
 export interface KbdProps {
   keys?: string[];
+  /** "auto" detects from the browser (default); force "mac" or "win" for docs/screenshots. */
+  platform?: "auto" | "mac" | "win";
   style?: React.CSSProperties;
 }
 export declare function Kbd(props: KbdProps): JSX.Element;

package/components/display/Kbd.jsx

@@ -1,11 +1,16 @@
 import React from "react";
 
-/** Keyboard shortcut hint, e.g. <Kbd keys={["⌘","K"]}/>. */
-export function Kbd({ keys = [], style }) {
+const KBD_MAP = { mod: ["⌘", "Ctrl"], cmd: ["⌘", "Ctrl"], ctrl: ["⌃", "Ctrl"], alt: ["⌥", "Alt"], opt: ["⌥", "Alt"], shift: ["⇧", "Shift"], enter: ["⏎", "Enter"], backspace: ["⌫", "Backspace"], esc: ["Esc", "Esc"] };
+const isMacPlatform = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test((navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || navigator.userAgent || "");
+const resolveKbd = (k, mac) => { const m = KBD_MAP[String(k).toLowerCase()]; return m ? m[mac ? 0 : 1] : k; };
+
+/** Keyboard shortcut hint. Use semantic keys so it adapts per OS: <Kbd keys={["mod","K"]}/> → ⌘ K on macOS, Ctrl K on Windows/Linux. Literal labels ("⌘", "F5") pass through unchanged. platform: "auto" (default) | "mac" | "win". */
+export function Kbd({ keys = [], platform = "auto", style }) {
+  const mac = platform === "auto" ? isMacPlatform() : platform === "mac";
   return (
     <span style={{ display: "inline-flex", gap: 3, ...style }}>
       {keys.map((k, i) => (
-        <span key={i} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 20, height: 20, padding: "0 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", border: "1px solid var(--border-control)", boxSizing: "border-box", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{k}</span>
+        <span key={i} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 20, height: 20, padding: "0 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", border: "1px solid var(--border-control)", boxSizing: "border-box", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{resolveKbd(k, mac)}</span>
       ))}
     </span>
   );

package/components/display/Kbd.vue

@@ -1,9 +1,13 @@
 <script setup>
-// Keyboard shortcut hint, e.g. <Kbd :keys="['⌘','K']"/>.
-defineProps({ keys: { type: Array, default: () => [] }, style: Object })
+// Keyboard shortcut hint. Semantic keys adapt per OS: <Kbd :keys="['mod','K']"/> → ⌘ K on macOS, Ctrl K on Windows/Linux. Literal labels pass through. platform: 'auto' | 'mac' | 'win'.
+import { computed } from 'vue'
+const props = defineProps({ keys: { type: Array, default: () => [] }, platform: { type: String, default: 'auto' }, style: Object })
+const KBD_MAP = { mod: ['⌘', 'Ctrl'], cmd: ['⌘', 'Ctrl'], ctrl: ['⌃', 'Ctrl'], alt: ['⌥', 'Alt'], opt: ['⌥', 'Alt'], shift: ['⇧', 'Shift'], enter: ['⏎', 'Enter'], backspace: ['⌫', 'Backspace'], esc: ['Esc', 'Esc'] }
+const isMac = () => typeof navigator !== 'undefined' && /mac|iphone|ipad|ipod/i.test((navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || navigator.userAgent || '')
+const labels = computed(() => { const mac = props.platform === 'auto' ? isMac() : props.platform === 'mac'; return props.keys.map(k => { const m = KBD_MAP[String(k).toLowerCase()]; return m ? m[mac ? 0 : 1] : k }) })
 </script>
 <template>
   <span :style="{ display: 'inline-flex', gap: '3px', ...style }">
-    <span v-for="(k, i) in keys" :key="i" style="display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-sm);background:var(--bg-inset);border:1px solid var(--border-control);box-sizing:border-box;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-secondary)">{{ k }}</span>
+    <span v-for="(k, i) in labels" :key="i" style="display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-sm);background:var(--bg-inset);border:1px solid var(--border-control);box-sizing:border-box;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-secondary)">{{ k }}</span>
   </span>
 </template>

package/components/display/display.prompt.md

@@ -26,5 +26,7 @@ Cards are flat (no shadow). IconTile hues: source green, join blue, transform or
 ```jsx
 <Tag onRemove={remove}>Financial Settings</Tag>
 <Divider label="OR"/>  <Divider vertical/>
-<Kbd keys={["⌘","K"]}/>
+<Kbd keys={["mod","K"]}/>   // ⌘ K on macOS, Ctrl K on Windows/Linux
 ```
+
+Kbd: write modifiers semantically — `mod` (⌘/Ctrl), `alt`/`opt` (⌥/Alt), `shift` (⇧/Shift), `enter` (⏎/Enter), `backspace`, `ctrl`, `esc`. Don't hard-code "⌘": Windows users have no Command key. `platform="mac"|"win"` forces one side for docs.

package/components/feedback/MESSAGE_SERVICES.md

@@ -0,0 +1,71 @@
+# Vue 消息服务与 Element Plus 迁移
+
+2.6.0 新增源码入口，适用于 Vue 3，复用 Keybricks Toast、Button、IconButton 和 Icon。
+本次仅补齐源码，未执行测试、类型检查、构建或浏览器验证，也尚未发布。
+
+```js
+import Message from '@keyfunc/keybricks-ds/vue/message'
+import MessageBox from '@keyfunc/keybricks-ds/vue/message-box'
+import '@keyfunc/keybricks-ds/styles.css'
+
+const notice = Message({ message: '保存成功', type: 'success', showClose: true })
+notice.close()
+Message.warning({ message: '请检查输入', duration: 6000 })
+Message.closeAll()
+
+await MessageBox.confirm('确认删除？', '删除', {
+  confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning',
+})
+const { value } = await MessageBox.prompt('请输入名称', '新建', {
+  inputValidator: value => value.trim() ? true : '名称不能为空',
+})
+```
+
+## 已提供的能力
+
+| 原接口 | 新服务 |
+| --- | --- |
+| `ElMessage(options / string / VNode)` | `Message(...)`，返回 `{ close() }` |
+| `success / info / warning / error` | 同名快捷方法 |
+| `duration / showClose / offset / zIndex / customClass / center` | 支持；默认 3000 毫秒，0 不自动关闭 |
+| 消息堆叠与 `grouping` | 同一挂载目标按真实高度向下堆叠；分组显示重复次数并重置计时 |
+| 悬停与焦点暂停计时 | 支持，离开后重新计时 |
+| `onClose / closeAll(type?)` | 支持，手动及自动关闭均清理实例 |
+| `MessageBox(options)` | 返回 Promise，弹窗按调用顺序排队 |
+| `alert / confirm / prompt` | 支持 `(message, title?, options?, appContext?)` 和 `(message, options?, appContext?)` |
+| 确认、取消、关闭 | 确认 resolve；取消 reject `'cancel'`；关闭默认 reject `'cancel'`，开启 `distinguishCancelAndClose` 后 reject `'close'` |
+| 输入结果 | `showInput` 开启时确认返回 `{ value, action: 'confirm' }`，包括 confirm 配合 `showInput` 的场景 |
+| `inputValue / inputType / inputPlaceholder` | 支持，`textarea` 支持换行 |
+| `inputPattern / inputValidator / inputErrorMessage` | 支持；额外支持异步校验，输入变更或关闭后忽略过期结果 |
+| `beforeClose(action, instance, done)` | 调用 done 才关闭；instance 提供可写的输入值、按钮文案、loading、disabled 等状态 |
+| `callback` | 有 callback 时按原服务方式回调，不结算返回的 Promise；开启输入时回调第一个参数为 `{ value, action }` |
+| `MessageBox.close()` | 清空队列，不调用操作回调，不结算已有 Promise |
+| 按钮显示、文案、class、loading、disabled | 支持；`el-button--danger` 显式映射为 DS danger 按钮 |
+| `closeOnClickModal / closeOnPressEscape / showClose` | 分别控制遮罩、Esc、关闭按钮；alert 默认禁用遮罩和 Esc 关闭 |
+| 键盘及滚动 | 焦点圈定、初始聚焦、关闭还原焦点、引用计数锁定 body 滚动 |
+| 内容及图标 | 消息支持字符串、VNode、返回 VNode 的函数；icon 支持 DS 图标名、Vue 组件或 VNode |
+| `appendTo / appContext` | 支持挂载目标和应用上下文，后者作为第二参数或快捷方法最后一个参数传入 |
+
+## 兼容边界
+
+这不是 Element Plus 的完整同构实现，不能宣称任意项目可完美替换。
+
+- 默认采用 DS 外观和 class；原来的 `.el-message`、`.el-message-box` 等选择器及依赖其 DOM 的逻辑需要调整。`customClass` 会保留，应用需检查类名对应的具体规则。
+- 不读取 Element Plus 的 ConfigProvider、locale、全局 zIndex 或应用插件配置。可通过 `Message.defaults` 和 `MessageBox.defaults` 设置文案、层级、挂载目标；切换语言时更新 defaults。默认按钮文案为英文。
+- 默认层级采用 `--z-toast / --z-modal`。与 Element Plus 弹层混用时，应用应根据现有弹层层级设置 defaults.zIndex。
+- 不提供 `draggable / overflow / buttonSize / closeIcon / loadingIcon / showHeader`、消息 `placement` 等完整扩展接口；`plain` 当前仅移除消息阴影。实例不是 Element Plus 的组件内部实例，仅提供文档约定的状态。
+- `appendTo` 只改变挂载节点，定位仍为 fixed；自定义目标的 transform、主题、语言继承以及与其他弹层的焦点管理需要应用确认。
+- 默认字符串按文本渲染。`dangerouslyUseHTMLString` 显式开启后按 HTML 渲染；DS 不做 HTML 净化，应用必须保留自己的安全处理。
+- 本服务仅支持 Vue；React 原有 Toast、Modal 接口不受影响。服务使用独立子路径导出，不依赖生成的 Vue barrel。
+
+## emp2 的接入边界
+
+`vue3/ts/message.ts` 中的业务行为应保留：HTML 净化、错误脱敏、SAP 字符处理、国际化、错误详情开关、默认持续时间、基于 id 的去重和 `closeMessage`。
+DS 发布并更新应用安装版本后，再把文件里的 `ElMessage / ElMessageBox` 导入改为上述两个服务；业务封装继续调用相同方法。
+接入时还需配置当前语言的默认按钮文案、与现有弹层兼容的 zIndex，并检查 `limited-height-message` 和其他依赖 Element DOM 的自定义样式。
+本轮未修改业务封装，也未修改应用依赖或 lock 文件。
+
+## 发布说明
+
+源码版本已更新为 2.6.0，changelog 标记为 unreleased。发布前需要由维护者执行仓库正常的生成及检查流程，使包含包版本的 token 元数据同步到新版本。
+按本次任务约束，未运行这些命令，未查看或修改生成的 barrel、token 产物、文档 bundle 或 dist，也未执行 Git 操作。

package/components/feedback/Modal.d.ts

@@ -27,6 +27,13 @@ export interface ToastProps {
   tone?: "success" | "danger" | "warning" | "info";
   title?: string;
   meta?: string;
+  /** Replaces the tone glyph (Vue: #icon slot) */
+  icon?: React.ReactNode;
+  /** Content in place of title (Vue: default slot) */
+  children?: React.ReactNode;
+  /** aria-label of the dismiss button (default "Dismiss") */
+  closeLabel?: string;
+  /** Shows the dismiss button */
   onClose?: () => void;
   style?: React.CSSProperties;
 }

package/components/feedback/Modal.jsx

@@ -43,19 +43,19 @@ export function Modal({ open, title, subtitle, onClose, footer, width = 440, siz
   );
 }
 
-const toastTones = { success: { icon: "circle-check", color: "var(--success-strong)" }, danger: { icon: "triangle-alert", color: "var(--danger)" }, warning: { icon: "triangle-alert", color: "var(--warning)" }, info: { icon: "info", color: "var(--action-primary)" } };
+const toastTones = { success: { icon: "circle-check", bg: "var(--success-bg)", border: "var(--success)", fg: "var(--success-text)" }, danger: { icon: "triangle-alert", bg: "var(--danger-bg)", border: "var(--danger)", fg: "var(--danger-text)" }, warning: { icon: "triangle-alert", bg: "var(--warning-bg)", border: "var(--warning)", fg: "var(--warning-text)" }, info: { icon: "info", bg: "var(--info-bg)", border: "var(--focus-border)", fg: "var(--info-fg)" } };
 
-/** Single toast row. */
-export function Toast({ tone = "success", title, meta, onClose, style }) {
-  const t = toastTones[tone];
+/** Single toast row — tinted: tone wash over --bg-raised, solid tone border, tone-coloured icon, title and dismiss. */
+export function Toast({ tone = "success", title, meta, icon, closeLabel = "Dismiss", onClose, children, style }) {
+  const t = toastTones[tone] || toastTones.info;
   return (
-    <div style={{ display: "flex", alignItems: "flex-start", gap: 10, minWidth: 280, maxWidth: 380, background: "var(--bg-raised)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-menu)", padding: "12px 12px 12px 14px", animation: "kb-toast-in var(--dur) var(--ease-out)", ...style }}>
-      <span style={{ color: t.color, display: "inline-flex", alignItems: "center", flexShrink: 0, height: "var(--leading-base)" }}><Icon name={t.icon} size={16} /></span>
+    <div style={{ display: "flex", alignItems: "flex-start", gap: 10, minWidth: 280, maxWidth: 380, backgroundColor: "var(--bg-raised)", backgroundImage: `linear-gradient(${t.bg}, ${t.bg})`, border: `1px solid ${t.border}`, borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-menu)", padding: "12px 12px 12px 14px", animation: "kb-toast-in var(--dur) var(--ease-out)", ...style }}>
+      <span style={{ color: t.fg, display: "inline-flex", alignItems: "center", flexShrink: 0, height: "var(--leading-base)" }}>{icon || <Icon name={t.icon} size={16} />}</span>
       <div style={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }}>
-        <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{title}</span>
-        {meta ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-secondary)" }}>{meta}</span> : null}
+        <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: t.fg, overflowWrap: "anywhere" }}>{children ?? title}</span>
+        {meta ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-body)" }}>{meta}</span> : null}
       </div>
-      {onClose ? <IconButton icon="x" size="sm" muted onClick={onClose} label="Dismiss" style={{ margin: "-2px 0" }} /> : null}
+      {onClose ? <IconButton icon="x" size="sm" muted onClick={onClose} label={closeLabel} style={{ margin: "-2px 0", color: t.fg }} /> : null}
     </div>
   );
 }

package/components/feedback/Toast.vue

@@ -2,18 +2,18 @@
 import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
 import IconButton from '../buttons/IconButton.vue'
-const toastTones = { success: { icon: 'circle-check', color: 'var(--success-strong)' }, danger: { icon: 'triangle-alert', color: 'var(--danger)' }, warning: { icon: 'triangle-alert', color: 'var(--warning)' }, info: { icon: 'info', color: 'var(--action-primary)' } }
-const props = defineProps({ tone: { type: String, default: 'success' }, title: String, meta: String, dismissible: Boolean, style: Object })
+const toastTones = { success: { icon: 'circle-check', bg: 'var(--success-bg)', border: 'var(--success)', fg: 'var(--success-text)' }, danger: { icon: 'triangle-alert', bg: 'var(--danger-bg)', border: 'var(--danger)', fg: 'var(--danger-text)' }, warning: { icon: 'triangle-alert', bg: 'var(--warning-bg)', border: 'var(--warning)', fg: 'var(--warning-text)' }, info: { icon: 'info', bg: 'var(--info-bg)', border: 'var(--focus-border)', fg: 'var(--info-fg)' } }
+const props = defineProps({ tone: { type: String, default: 'success' }, title: String, meta: String, dismissible: Boolean, closeLabel: { type: String, default: 'Dismiss' }, style: Object })
 const emit = defineEmits(['close'])
-const t = computed(() => toastTones[props.tone])
+const t = computed(() => toastTones[props.tone] || toastTones.info)
 </script>
 <template>
-  <div :style="{ display: 'flex', alignItems: 'flex-start', gap: '10px', minWidth: '280px', maxWidth: '380px', background: 'var(--bg-raised)', border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-menu)', padding: '12px 12px 12px 14px', animation: 'kb-toast-in var(--dur) var(--ease-out)', ...style }">
-    <span :style="{ color: t.color, display: 'inline-flex', alignItems: 'center', flexShrink: 0, height: 'var(--leading-base)' }"><Icon :name="t.icon" :size="16" /></span>
+  <div :style="{ display: 'flex', alignItems: 'flex-start', gap: '10px', minWidth: '280px', maxWidth: '380px', backgroundColor: 'var(--bg-raised)', backgroundImage: `linear-gradient(${t.bg}, ${t.bg})`, border: `1px solid ${t.border}`, borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-menu)', padding: '12px 12px 12px 14px', animation: 'kb-toast-in var(--dur) var(--ease-out)', ...style }">
+    <span :style="{ color: t.fg, display: 'inline-flex', alignItems: 'center', flexShrink: 0, height: 'var(--leading-base)' }"><slot name="icon"><Icon :name="t.icon" :size="16" /></slot></span>
     <div style="display:flex;flex-direction:column;flex:1;min-width:0">
-      <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>
-      <span v-if="meta" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary)">{{ meta }}</span>
+      <span :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', color: t.fg, overflowWrap: 'anywhere' }"><slot>{{ title }}</slot></span>
+      <span v-if="meta" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-body)">{{ meta }}</span>
     </div>
-    <IconButton v-if="dismissible" icon="x" size="sm" muted label="Dismiss" :style="{ margin: '-2px 0' }" @click="emit('close')" />
+    <IconButton v-if="dismissible" icon="x" size="sm" muted :label="closeLabel" :style="{ margin: '-2px 0', color: t.fg }" @click="emit('close')" />
   </div>
 </template>

package/components/feedback/_internal/MessageBoxView.vue

@@ -0,0 +1,237 @@
+<script setup>
+import { computed, h, isVNode, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import Button from '../../buttons/Button.vue'
+import IconButton from '../../buttons/IconButton.vue'
+import Icon from '../../icons/Icon.vue'
+import { contentNode, lockBody } from './service-utils.js'
+
+const props = defineProps({ options: { type: Object, required: true } })
+const emit = defineEmits(['action'])
+const panel = ref(null)
+const input = ref(null)
+const error = ref('')
+const validating = ref(false)
+const Content = () => contentNode(props.options.message, props.options.dangerouslyUseHTMLString)
+const Title = () => contentNode(props.options.title)
+const icons = { success: 'circle-check', warning: 'triangle-alert', error: 'triangle-alert', info: 'info' }
+const colors = { success: 'var(--success-strong)', warning: 'var(--warning)', error: 'var(--danger)', info: 'var(--action-primary)' }
+const icon = computed(() => props.options.icon || icons[props.options.type])
+const CustomIcon = () => isVNode(icon.value) ? icon.value : h(icon.value)
+const confirmVariant = computed(() => props.options.confirmButtonClass?.includes('el-button--danger') ? 'danger' : 'primary')
+let unlock
+let previousFocus
+let disposed = false
+let validationRevision = 0
+
+async function confirm() {
+  const options = props.options
+  if (validating.value || options.confirmButtonDisabled || options.confirmButtonLoading) return
+  if (options.showInput) {
+    const revision = ++validationRevision
+    const value = options.inputValue ?? ''
+    validating.value = true
+    let message = ''
+    try {
+      if (options.inputPattern) {
+        // 避免全局正则的 lastIndex 导致同一输入校验结果交替。
+        const pattern = new RegExp(options.inputPattern.source, options.inputPattern.flags)
+        if (!pattern.test(value)) message = options.inputErrorMessage || 'Invalid input'
+      }
+      if (!message && options.inputValidator) {
+        const result = await options.inputValidator(value)
+        if (result === false || typeof result === 'string') message = result || options.inputErrorMessage || 'Invalid input'
+      }
+    } catch (reason) {
+      message = options.inputErrorMessage || reason?.message || 'Invalid input'
+    } finally {
+      validating.value = false
+    }
+    if (disposed || revision !== validationRevision) return
+    error.value = message
+    if (message) { input.value?.focus(); return }
+  }
+  emit('action', 'confirm')
+}
+
+function close() { emit('action', 'close') }
+function onKeydown(event) {
+  if (event.key === 'Escape' && props.options.closeOnPressEscape) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    close()
+  }
+  if (event.key !== 'Tab') return
+  const focusable = [...panel.value.querySelectorAll('button:not(:disabled), input:not(:disabled), textarea:not(:disabled), select:not(:disabled), a[href], [tabindex]:not([tabindex="-1"])')]
+    .filter(node => node.getClientRects().length)
+  const first = focusable[0], last = focusable[focusable.length - 1]
+  if (!first) { event.preventDefault(); panel.value.focus(); return }
+  if (event.shiftKey && (document.activeElement === first || !panel.value.contains(document.activeElement))) {
+    event.preventDefault(); last.focus()
+  } else if (!event.shiftKey && (document.activeElement === last || !panel.value.contains(document.activeElement))) {
+    event.preventDefault(); first.focus()
+  }
+}
+function keepFocus(event) {
+  if (!panel.value.contains(event.target)) panel.value.focus()
+}
+function changeInput(event) {
+  validationRevision++
+  props.options.inputValue = event.target.value
+  error.value = ''
+}
+onMounted(async () => {
+  previousFocus = document.activeElement
+  if (props.options.lockScroll) unlock = lockBody()
+  document.addEventListener('keydown', onKeydown, true)
+  document.addEventListener('focusin', keepFocus)
+  await nextTick()
+  if (disposed || !props.options.autofocus) return
+  const target = input.value || panel.value.querySelector('[data-confirm] button') || panel.value
+  target.focus()
+  if (input.value) input.value.select()
+})
+onBeforeUnmount(() => {
+  disposed = true
+  unlock?.()
+  document.removeEventListener('keydown', onKeydown, true)
+  document.removeEventListener('focusin', keepFocus)
+  if (previousFocus?.isConnected) previousFocus.focus()
+})
+</script>
+
+<template>
+  <div
+    :class="['kb-message-box-overlay', options.modalClass]"
+    :style="{ zIndex: options.zIndex ?? 'var(--z-modal)', background: options.modal === false ? 'transparent' : undefined }"
+    @click.self="options.closeOnClickModal && close()"
+  >
+    <section
+      ref="panel"
+      :class="['kb-message-box', options.customClass, { 'kb-message-box--center': options.center, 'kb-message-box--round': options.roundButton }]"
+      :style="{ width: typeof options.width === 'number' ? `${options.width}px` : options.width }"
+      :data-size="options.size || 'lg'"
+      :aria-labelledby="`${options.id}-title`"
+      :aria-describedby="`${options.id}-content`"
+      role="alertdialog"
+      aria-modal="true"
+      tabindex="-1"
+    >
+      <header class="kb-message-box__header">
+        <span :id="`${options.id}-title`"><Title /></span>
+        <IconButton v-if="options.showClose" icon="x" :label="options.closeLabel || 'Close'" @click="close" />
+      </header>
+      <div :id="`${options.id}-content`" class="kb-message-box__body">
+        <div class="kb-message-box__message">
+          <span v-if="icon" :style="{ color: colors[options.type], display: 'inline-flex' }">
+            <Icon v-if="typeof icon === 'string'" :name="icon" :size="20" />
+            <CustomIcon v-else />
+          </span>
+          <div><Content /></div>
+        </div>
+        <div v-if="options.showInput" class="kb-message-box__input-wrap">
+          <component
+            :is="options.inputType === 'textarea' ? 'textarea' : 'input'"
+            ref="input"
+            class="kb-message-box__input"
+            :type="options.inputType === 'textarea' ? undefined : options.inputType"
+            :value="options.inputValue"
+            :placeholder="options.inputPlaceholder"
+            :aria-label="options.inputPlaceholder || options.title || 'Input'"
+            :aria-invalid="!!error"
+            :aria-describedby="error ? `${options.id}-error` : undefined"
+            @input="changeInput"
+            @keydown.enter="!$event.isComposing && options.inputType !== 'textarea' && confirm()"
+          />
+          <div v-if="error" :id="`${options.id}-error`" class="kb-message-box__error" role="alert">{{ error }}</div>
+        </div>
+      </div>
+      <footer class="kb-message-box__footer">
+        <Button
+          v-if="options.showCancelButton"
+          variant="outline"
+          :class="options.cancelButtonClass"
+          :disabled="options.cancelButtonDisabled"
+          :loading="options.cancelButtonLoading"
+          @click="emit('action', 'cancel')"
+        >
+          {{ options.cancelButtonText ?? 'Cancel' }}
+        </Button>
+        <span v-if="options.showConfirmButton" data-confirm>
+          <Button
+            :variant="confirmVariant"
+            :class="options.confirmButtonClass"
+            :disabled="options.confirmButtonDisabled"
+            :loading="options.confirmButtonLoading || validating"
+            @click="confirm"
+          >
+            {{ options.confirmButtonText ?? 'OK' }}
+          </Button>
+        </span>
+      </footer>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.kb-message-box-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-scrim);
+  animation: kb-fade-in var(--dur-fast) var(--ease-out);
+}
+.kb-message-box {
+  width: 440px;
+  max-width: 92vw;
+  max-height: 92vh;
+  overflow: auto;
+  box-sizing: border-box;
+  background: var(--bg-raised);
+  border: 1px solid var(--border-card);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-modal);
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-base);
+  letter-spacing: var(--tracking-base);
+  color: var(--text-body);
+  animation: kb-rise var(--dur) var(--ease-out);
+}
+.kb-message-box__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--group-gap);
+  padding: var(--section-gap) var(--section-gap) 0;
+  font-weight: var(--weight-semibold);
+  font-size: var(--text-md);
+  line-height: var(--leading-md);
+  letter-spacing: var(--tracking-md);
+  color: var(--text-heading);
+}
+.kb-message-box__header > span { min-width: 0; overflow-wrap: anywhere; }
+.kb-message-box__body { padding: 20px var(--section-gap) 0; }
+.kb-message-box__message { display: flex; align-items: flex-start; gap: var(--control-px); }
+.kb-message-box__message > div { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
+.kb-message-box__input-wrap { margin-top: var(--group-gap); }
+.kb-message-box__input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--control-h);
+  padding: 0 var(--control-px);
+  font: inherit;
+  color: var(--text-heading);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-control);
+  border-radius: var(--radius-md);
+}
+.kb-message-box__input:focus { outline: none; border-color: var(--focus-border); box-shadow: var(--ring-focus); }
+.kb-message-box__input[aria-invalid="true"] { border-color: var(--danger); }
+.kb-message-box__error { margin-top: var(--control-gap); color: var(--danger-text); }
+.kb-message-box__footer { display: flex; justify-content: flex-end; gap: var(--control-gap); padding: var(--section-gap); }
+.kb-message-box--center .kb-message-box__message { justify-content: center; text-align: center; }
+.kb-message-box--center .kb-message-box__footer { justify-content: center; }
+.kb-message-box--round :deep(.kb-message-box__footer button) { border-radius: var(--radius-full) !important; }
+</style>