dsh-plugin-core 0.35.9 → 0.35.10

package/dist/ui/display/Card.d.ts

@@ -25,6 +25,14 @@ export interface CardSharedProps {
     expanded?: boolean;
     /** 传了才显示右侧折叠箭头（全站唯一的 Chevron）；由调用方管展开状态。 */
     onToggle?: () => void;
+    /**
+     * 整卡点击回调：传了才让卡片可点，`Card` 与 `StripCard` 同享。
+     * 命中范围跟 `hoverScope` 走：'head'（默认）只有头部区 `__body`（含内距圈）可点，
+     * 'card' 才含展开区。点击层拿 role="button" / tabIndex / Enter·Space，
+     * 与 `ListRow` 同一套契约；刻意不渲染成 `<button>`（调用方要在里面放按钮）。
+     * `action` 与折叠箭头不会连带触发。不传则外观与行为完全不变。
+     */
+    onClick?: () => void;
     /** 右上角操作区（如「跳过」「查看会话」）。 */
     action?: ReactNode;
     /** 主内容：想写几行、左边右边随你。 */
@@ -34,12 +42,12 @@ export interface CardSharedProps {
     className?: string;
     style?: CSSProperties;
     translate?: Translate;
-    /** 悬停变色开关：统一走 --dshpc-card-hover。默认 false，纯新增、不改现有外观。 */
+    /** 悬停变色开关：统一走 --dshpc-card-hover。默认跟随 `onClick`（可点即开），可显式关。 */
     hoverable?: boolean;
     /**
-     * 悬停作用域（仅 hoverable 为 true 时生效）：
-     *  - 'head'（默认）：只有头部区这一整块边到边变色并带手势，展开区 `panel` 完全不受影响；
-     *  - 'card'：整卡含展开区一起变色，由消费端显式选。
+     * 交互作用域：'head'（默认）只有头部区变色并可点，展开区 `panel` 完全不受影响；
+     * 'card' 整卡含展开区一起变色、一起可点，由消费端显式选。
+     * 变色只在 hover 开时生效；点击层始终按它选。
      * 展开内容必须放进 `panel`（`children` 归头部区），否则核心无从区分两块区域。
      */
     hoverScope?: 'head' | 'card';

package/dist/ui/display/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/ui/display/Card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,CAAC,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE9E,OAAO,EAAK,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAMvD,wDAAwD;AACxD,eAAO,MAAM,YAAY,yIAGf,CAAA;AACV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,6CAA6C;AAC7C,MAAM,WAAW,cAAc;IAC7B,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC1C,oBAAoB;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC5B,oBAAoB;IACpB,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAqID;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,eAAe,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAEjE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,eAAe,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAEtE"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/ui/display/Card.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,IAAI,CAAC,EAClB,KAAK,aAAa,EAA4D,KAAK,SAAS,EAC7F,MAAM,OAAO,CAAA;AAEd,OAAO,EAAK,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAMvD,wDAAwD;AACxD,eAAO,MAAM,YAAY,yIAGf,CAAA;AACV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,6CAA6C;AAC7C,MAAM,WAAW,cAAc;IAC7B,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC1C,oBAAoB;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC5B,oBAAoB;IACpB,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAoKD;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,eAAe,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAEjE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,eAAe,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAEtE"}

package/dist/ui/display/Card.js

@@ -1,4 +1,4 @@
-import { createElement as h } from 'react';
+import { createElement as h, } from 'react';
 import { Chevron } from '../infra/chevron.js';
 import { t } from '../../utils/i18n.js';
 import { ensureComponentStyles } from '../infra/css.js';
@@ -63,6 +63,10 @@ function CardShell(kind, props) {
     const accent = props.accent ?? 'business';
     const isPreset = CARD_ACCENTS.includes(accent);
     const bar = props.bar ?? {};
+    const interactive = props.onClick !== undefined;
+    const hover = props.hoverable ?? interactive;
+    const scope = props.hoverScope ?? 'head';
+    const onCardScope = scope === 'card';
     // StripCard 固定贴左；Card 默认左侧，可换任意一边。
     const side = kind === 'strip' ? 'left' : bar.side ?? 'left';
     const classes = [
@@ -72,8 +76,8 @@ function CardShell(kind, props) {
         kind === 'strip' ? 'dshpc-card--strip' : 'dshpc-card--bordered',
         `dshpc-card--bar-${side}`,
         isPreset ? `dshpc-card--${accent}` : '',
-        props.hoverable === true ? 'dshpc-card--hoverable' : '',
-        props.hoverable === true ? `dshpc-card--hover-${props.hoverScope ?? 'head'}` : '',
+        hover ? 'dshpc-card--hoverable' : '',
+        hover ? `dshpc-card--hover-${scope}` : '',
         props.filled === false ? 'dshpc-card--no-fill' : '',
         props.expanded === true ? 'dshpc-card--expanded' : '',
         props.className ?? '',
@@ -104,11 +108,39 @@ function CardShell(kind, props) {
         vars['--card-pad-l'] = l;
     }
     const style = { ...restStyle, ...vars };
-    return h('div', { className: classes, style }, h('div', { className: 'dshpc-card__body' }, 
+    // 点击层与 hover 同层：head = __body（内距圈就在这一层），card = 根节点。
+    // __panel 是 __body 的兄弟节点，只绑 __body 时天然点不到展开区，不必靠私有类名排除。
+    const onKeyDown = (event) => {
+        // 槽里按钮 / 折叠箭头的 Enter·Space 会冒泡；只认点击层自己为事件源。
+        if (event.target !== event.currentTarget)
+            return;
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        props.onClick?.();
+    };
+    const hit = interactive
+        ? { role: 'button', tabIndex: 0, onClick: props.onClick, onKeyDown }
+        : {};
+    return h('div', {
+        className: onCardScope && interactive ? `${classes} dshpc-card__hit` : classes,
+        style,
+        ...(onCardScope ? hit : {}),
+    }, h('div', {
+        className: !onCardScope && interactive ? 'dshpc-card__body dshpc-card__hit' : 'dshpc-card__body',
+        ...(onCardScope ? {} : hit),
+    }, 
     // 色条是 body 的第一个子元素：DOM 顺序恒定，左/上 = 天然在前，右/下靠 order 排到头部之后。
     h('span', { className: 'dshpc-card__bar', 'aria-hidden': true }), h('div', { className: 'dshpc-card__head' }, h('div', { className: 'dshpc-card__main' }, props.children ?? null), props.action === undefined && props.onToggle === undefined
         ? null
-        : h('div', { className: 'dshpc-card__side' }, props.action ?? null, props.onToggle === undefined
+        : h('div', {
+            className: 'dshpc-card__side',
+            // action 与折叠箭头同槽：一层挡住冒泡，点右上角不连带触发整卡。
+            // 只在可点时才挡，避免改变不传 onClick 时的冒泡行为。
+            onClick: interactive
+                ? (event) => { event.stopPropagation(); }
+                : undefined,
+        }, props.action ?? null, props.onToggle === undefined
             ? null
             : h('button', {
                 type: 'button',

package/dist/ui/display/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/ui/display/Card.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/ui/display/Card.ts"],"names":[],"mappings":"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"}

package/dist/ui/display/card-css.generated.d.ts

@@ -1,2 +1,2 @@
-export declare const CARD_CSS = "\n/* \u2500\u2500 Card / StripCard\uFF1ASurface \u5916\u6846 + \u5934\u90E8\u5951\u7EA6 + \u8272\u6761 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   \u5916\u6846\uFF08\u5E95 / \u8FB9\u6846 / \u5706\u89D2\uFF09\u6765\u81EA .dshpc-surface\uFF08src/ui/surface.css\uFF09\uFF1A\n   \u672C\u6587\u4EF6**\u4E0D\u518D\u5199 border / border-radius**\uFF0C\u5706\u89D2\u5951\u7EA6\u56E0\u6B64\u53EA\u6709\u4E00\u4E2A\u5B9A\u4E49\u70B9\uFF08\u5BB9\u5668\u6863 = 12\uFF09\u3002\n   \u5185\u8DDD\u4E0D\u5728\u6839\u8282\u70B9\uFF1A\u6839\u8282\u70B9 padding:0\uFF0C__body\uFF08\u5934\u90E8\u533A\uFF09\u4E0E __panel\uFF08\u5C55\u5F00\u533A\uFF09\u5404\u81EA\u627F\u62C5 \u2014\u2014\n   \u4E24\u5757\u533A\u57DF\u56E0\u6B64\u5F7C\u6B64\u72EC\u7ACB\uFF0Chover \u53EA\u53EF\u80FD\u843D\u5728\u5934\u90E8\u533A\uFF0C\u5C55\u5F00\u533A\u4E0D\u4F1A\u88AB\u6CE2\u53CA\u3002\n   \u8FD9\u91CC\u53EA\u7BA1\u4E09\u4EF6 Surface \u4E0D\u8BE5\u77E5\u9053\u7684\u4E8B\uFF1A\u8272\u6761\u51E0\u4F55\u3001\u5934\u90E8\u5E03\u5C40\u3001\u4E24\u5757\u533A\u57DF\u7684\u5185\u8DDD\u3002\n\n   \u8272\u6761\u51E0\u4F55\u9ED8\u8BA4\u503C\u90FD\u53EF\u88AB props \u8986\u76D6\uFF08Card.ts \u5199\u5BF9\u5E94\u7684 CSS \u53D8\u91CF\uFF09\uFF1A\n     --card-bar-size   \u6761\u5B50\u7C97\u7EC6\n     --card-bar-inset  \u6761\u5B50\u8DDD\u5361\u7247\u8FB9\u7F18\u7684\u8DDD\u79BB\uFF08= \u8D34\u8FB9\u90A3\u4E00\u4FA7\u7684\u5185\u8DDD\uFF09\n     --card-bar-gap    \u6761\u5B50\u8DDD\u5185\u5BB9\u7684\u8DDD\u79BB\uFF08= body \u7684 gap\uFF09\n     --card-bar-length \u4E0A\u4E0B\u65B9\u4F4D\u65F6\u7684\u6761\u957F\uFF08100% = \u8DDF\u5185\u5BB9\u540C\u5BBD\uFF09\n   \u8FD9\u4E9B\u53D8\u91CF\u53EA\u5728\u672C\u6587\u4EF6\u6D88\u8D39\uFF083 \u4EFD\u6587\u4EF6\u4E00\u8D77\u5F15\u65F6\uFF0C\u8DE8\u6587\u4EF6\u5F15\u7528\u522B\u5904\u7684\u53D8\u91CF\u4F1A\u9759\u9ED8\u5931\u6548\uFF09\uFF0C\n   \u6240\u4EE5\u9ED8\u8BA4\u503C\u5FC5\u987B\u5199\u5728\u8FD9\u91CC\uFF0C\u800C\u4E0D\u662F\u4EE4\u724C\u6216\u522B\u7684\u76AE\u80A4\u91CC\u3002 */\n.dshpc-card{\n  --card-accent:var(--dshpc-business);\n  --card-accent-soft:var(--dshpc-business-soft);\n  --card-bar-size:6px;\n  --card-bar-inset:12px;\n  --card-bar-gap:12px;\n  --card-bar-length:100%;\n  /* \u5185\u8DDD\u56DB\u6839\u8F74\u662F\u552F\u4E00\u771F\u6E90\uFF1A\u6839\u8282\u70B9\u81EA\u5DF1\u4E0D\u7559 padding\uFF0C__body \u4E0E __panel \u90FD\u53EA\u8BFB\u8FD9\u56DB\u6839\u8F74\u3002\n     \u8FD9\u6837 __body \u5C31\u662F\u300C\u4E0A\u9762\u90A3\u4E00\u6574\u5757\u300D\uFF0Chover \u94FA\u8272\u8FB9\u5230\u8FB9\uFF0C\u8FDE\u539F\u672C\u90A3\u5708\u5916\u5708\u4E00\u8D77\u53D8\u3002\n     --card-pad-all \u53EA\u662F\u56DB\u8F74\u7684\u7EC4\u5408\u503C\uFF0C\u6D88\u8D39\u7AEF style.padding \u7531 Card.ts \u644A\u6210\u56DB\u6839\u8F74\u540E\u81EA\u52A8\u6D3E\u751F\u3002 */\n  --card-pad-t:14px;--card-pad-r:14px;--card-pad-b:14px;--card-pad-l:14px;\n  --card-pad-all:var(--card-pad-t) var(--card-pad-r) var(--card-pad-b) var(--card-pad-l);\n  padding:0;\n  /* \u5934\u90E8\u533A\u80CC\u666F\u94FA\u6EE1\u6839\u8282\u70B9\u5185\u5BB9\u76D2\uFF0C\u7531\u6839\u8282\u70B9\u7EDF\u4E00\u88C1\u6210\u5916\u6846\u5706\u89D2\uFF1B__body \u81EA\u5DF1\u4E0D\u5199\u5706\u89D2\u88F8\u503C\u3002 */\n  overflow:hidden;\n}\n/* \u6863\u4F4D \u2192 token\uFF08\u7167 records-timeline \u7684 tone \u6A21\u5F0F\uFF1A\u4E00\u4E2A\u53D8\u91CF\u5207\u6863\uFF0C\u4E0D\u5199 5 \u5957\u89C4\u5219\uFF1B\u6D45\u5E95\u4E0E\u8272\u6761\u540C\u6E90\uFF09\u3002 */\n.dshpc-card--success{--card-accent:var(--dshpc-success);--card-accent-soft:var(--dshpc-success-soft)}\n.dshpc-card--warning{--card-accent:var(--dshpc-warning);--card-accent-soft:var(--dshpc-warning-soft)}\n.dshpc-card--danger{--card-accent:var(--dshpc-danger);--card-accent-soft:var(--dshpc-danger-soft)}\n/* neutral \u6D45\u5E95\u501F chip \u5E95\uFF08\u5144\u5F1F\u9879\u76EE mute \u6863\u540C\u6B3E\uFF1A\u660E\u6697\u90FD\u6210\u7ACB\uFF09\u3002 */\n.dshpc-card--neutral{--card-accent:var(--dshpc-fg-4);--card-accent-soft:var(--dshpc-chip-bg)}\n/* \u6269\u5C55\u516B\u8272\uFF082026-10-29\uFF09\uFF1A\u8272\u6761 + \u6D45\u5E95\u540C\u6E90\uFF0C\u8F6F\u5E95\u8D70\u5404\u81EA -soft\u3002 */\n.dshpc-card--purple{--card-accent:var(--dshpc-purple);--card-accent-soft:var(--dshpc-purple-soft)}\n.dshpc-card--pink{--card-accent:var(--dshpc-pink);--card-accent-soft:var(--dshpc-pink-soft)}\n.dshpc-card--cyan{--card-accent:var(--dshpc-cyan);--card-accent-soft:var(--dshpc-cyan-soft)}\n.dshpc-card--teal{--card-accent:var(--dshpc-teal);--card-accent-soft:var(--dshpc-teal-soft)}\n.dshpc-card--orange{--card-accent:var(--dshpc-orange);--card-accent-soft:var(--dshpc-orange-soft)}\n.dshpc-card--indigo{--card-accent:var(--dshpc-indigo);--card-accent-soft:var(--dshpc-indigo-soft)}\n.dshpc-card--rose{--card-accent:var(--dshpc-rose);--card-accent-soft:var(--dshpc-rose-soft)}\n.dshpc-card--slate{--card-accent:var(--dshpc-slate);--card-accent-soft:var(--dshpc-slate-soft)}\n\n/* body = \u8272\u6761 + \u5934\u90E8\uFF0C\u4E5F\u662F\u300C\u4E0A\u9762\u90A3\u4E00\u6574\u5757\u300D\uFF1A\u5B83\u81EA\u5DF1\u627F\u62C5\u5185\u8DDD\u5E76\u94FA\u6EE1\u6839\u8282\u70B9\u5185\u5BB9\u76D2\uFF0C\n   \u662F head \u4F5C\u7528\u57DF\u4E0B\u552F\u4E00\u7684 hover \u76EE\u6807\u3002\u5706\u89D2\u7531\u6839\u8282\u70B9 overflow \u88C1\u5207 \u21D2 hover \u8272\u4E0D\u9732\u65B9\u89D2\u3002\n   --card-pad-all \u7531\u56DB\u6839\u8F74\u6D3E\u751F\uFF1B\u6D88\u8D39\u7AEF style.padding \u8986\u76D6\u56DB\u8F74\u540E\uFF0C\u5934\u90E8\u533A\u4E0E\u5C55\u5F00\u533A\u540C\u6B65\u5BF9\u9F50\u3002\n   \u65B9\u5411\u8DDF\u7740\u6761\u5B50\u8D34\u7684\u8FB9\u5207 \u21D2 \u56DB\u4E2A\u65B9\u4F4D\u53EA\u662F\u300C\u6362\u4E00\u4E2A\u65B9\u5411\u7684 flex \u9879\u300D\uFF0C\u4E0D\u7528\u5404\u5199\u4E00\u5957\u5B9A\u4F4D\u3002 */\n.dshpc-card__body{\n  display:flex;gap:var(--card-bar-gap);min-width:0;\n  padding:var(--card-pad-all);\n  background:transparent;\n}\n.dshpc-card--bar-top .dshpc-card__body,\n.dshpc-card--bar-bottom .dshpc-card__body{flex-direction:column}\n/* \u5C55\u5F00\u6001\u4E0D\u7279\u6B8A\u5904\u7406\u5185\u8DDD\uFF1A\u5934\u90E8\u533A\u4E0A\u4E0B\u7559\u767D\u59CB\u7EC8\u5BF9\u79F0\uFF0C\u8272\u6761\u4E0A\u4E0B\u624D\u4E0D\u4F1A\u4E00\u957F\u4E00\u77ED\u3002\n   \u4E24\u5757\u4E4B\u95F4\u7684\u95F4\u9694\u5C31\u662F __body \u7684 padding-bottom\uFF0C\u5C5E\u4E8E\u5934\u90E8\u533A\u3001\u8DDF\u7740\u4E00\u8D77\u53D8\u8272\uFF1B\n   __panel \u7D27\u63A5\u5176\u540E\uFF0C\u4E0D\u5728\u4E2D\u95F4\u7559\u4E00\u6761\u4E0D\u53D8\u8272\u7684\u5E26\u5B50\uFF0C\u4E5F\u4E0D\u753B\u5206\u9694\u7EBF\u3002 */\n\n/* \u5934\u90E8\u4E00\u884C = \u4E3B\u5185\u5BB9 + \u53F3\u4FA7\u69FD\uFF0C**\u6574\u4F53\u5782\u76F4\u5C45\u4E2D**\uFF1A\u8C03\u7528\u65B9\u5728 action \u91CC\u88F8\u653E\u4E00\u4E2A\u5143\u7D20\n   \uFF08\u6309\u94AE / \u6587\u5B57 / \u56FE\u6807\uFF09\u4E0D\u7528\u81EA\u5DF1\u5957\u5BB9\u5668\u5C45\u4E2D\uFF1B\u4E00\u884C\u4E24\u884C\u3001\u53F3\u8FB9\u600E\u4E48\u653E\u7531\u8C03\u7528\u65B9\u5728\u6846\u5185\u81EA\u5B9A\u3002 */\n.dshpc-card__head{display:flex;align-items:center;gap:8px;min-width:0}\n.dshpc-card--bar-left .dshpc-card__head,\n.dshpc-card--bar-right .dshpc-card__head{flex:1 1 auto}\n.dshpc-card__main{flex:1;min-width:0}\n.dshpc-card__side{display:flex;align-items:center;gap:6px;flex:none}\n\n/* \u8272\u6761\uFF1A\u5DE6/\u53F3 = \u7AD6\u5411\u6761\uFF08\u9AD8\u5EA6\u8DDF\u5185\u5BB9\uFF0C\u6700\u5C0F\u4E00\u884C\uFF09\uFF1B\u4E0A/\u4E0B = \u6A2A\u5411\u6761\uFF08\u957F\u5EA6\u9ED8\u8BA4\u8DDF\u5185\u5BB9\u540C\u5BBD\uFF09\u3002\n   \u53F3/\u4E0B\u65B9\u4F4D\u9760 order \u6392\u5230\u5934\u90E8\u4E4B\u540E\uFF0CDOM \u987A\u5E8F\u59CB\u7EC8\u4E0D\u53D8\u3002 */\n.dshpc-card__bar{flex:none;background:var(--card-accent);border-radius:var(--dshpc-radius-xs)}\n.dshpc-card--bar-left .dshpc-card__bar,\n.dshpc-card--bar-right .dshpc-card__bar{width:var(--card-bar-size);align-self:stretch;min-height:var(--dshpc-line-md)}\n.dshpc-card--bar-top .dshpc-card__bar,\n.dshpc-card--bar-bottom .dshpc-card__bar{width:var(--card-bar-length);height:var(--card-bar-size);align-self:flex-start}\n.dshpc-card--bar-right .dshpc-card__bar,\n.dshpc-card--bar-bottom .dshpc-card__bar{order:1}\n\n/* \u2500\u2500 \u5916\u89C2\u4E00 \u00B7 StripCard\uFF1A\u540C\u8272\u7CFB\u6D45\u5E95 + 1px \u4E0D\u53EF\u89C1\u5360\u4F4D\u8FB9\u6846 + \u65B9\u89D2 + 4px \u901A\u9AD8\u65B9\u89D2\u8272\u6761\u8D34\u5DE6\u7F18 \u2500\u2500\n   \u5E95\u8272 / \u65B9\u89D2 / \u5360\u4F4D\u8FB9\u6846\u7531 Surface \u7684\u4E09\u6761\u4FEE\u9970\u7C7B\u63D0\u4F9B\uFF08Card.ts \u6309 kind \u4F20\uFF09\uFF0C\u6B64\u5904\u53EA\u7BA1\u5185\u8DDD\u4E0E\u6761\u5B50\u3002 */\n.dshpc-card.dshpc-card--strip{\n  --card-bar-size:4px;--card-bar-inset:0;\n  --card-pad-t:12px;--card-pad-r:12px;--card-pad-b:12px;--card-pad-l:20px;\n  /* \u5E95\u8272\u6539\u8D70 Surface \u7684 --surface-bg \u53D8\u91CF\uFF08surface.css:7-8 \u5951\u7EA6\uFF09\uFF1A\u4E0D\u80FD\u5199 background \u5C5E\u6027\uFF0C\n     \u5426\u5219\u900F\u660E\u6863\u8981\u8986\u76D6\u65F6\u4F1A\u88AB\u5C5E\u6027\u5C42\u6253\u67B6\uFF08\u5144\u5F1F\u9879\u76EE\u66FE\u7528 background-image \u6E10\u53D8\u7ED5\u8FC7\uFF09\u3002 */\n  --surface-bg:var(--card-accent-soft,transparent);\n}\n/* \u5DE6\u5185\u8FB9\u8DDD 20px = 16 \u7559\u767D + 4 \u6761\u5BBD \u21D2 \u5185\u5BB9\u4ECE\u8272\u6761\u53F3\u7F18\u8D77\u7B97\uFF1B\u8272\u6761\u7EDD\u5BF9\u5B9A\u4F4D\u901A\u9AD8\uFF0C\u8DDF\u7740\u5185\u5BB9\u9AD8\u5EA6\u81EA\u9002\u5E94\u3002\n   \u5B9A\u4F4D\u57FA\u51C6\u662F\u6839\u8282\u70B9\u7684 position:relative\uFF08Surface \u63D0\u4F9B\uFF09\uFF0Ctop:0 / bottom:0 \u56E0\u6B64\u662F\u6574\u5361\u901A\u9AD8\uFF1A\n   \u5C55\u5F00\u540E\u8272\u6761\u4ECD\u4E00\u8DEF\u8D2F\u7A7F\u5230\u5C55\u5F00\u533A\u5E95\u90E8\uFF0C\u4E0D\u968F head \u5206\u533A\u88AB\u88C1\u77ED\uFF082026-11-08 \u62CD\u677F\uFF09\u3002\n   \u7279\u5F02\u6027 0,3,0\uFF1A\u538B\u8FC7\u4E0A\u9762 .dshpc-card--bar-left .dshpc-card__bar \u7684\u5BBD\u5EA6\u89C4\u5219\uFF0C\u4E0E\u6CE8\u5165\u987A\u5E8F\u65E0\u5173\u3002 */\n.dshpc-card.dshpc-card--strip .dshpc-card__bar{position:absolute;left:0;top:0;bottom:0;width:4px;align-self:auto}\n\n/* \u2500\u2500 \u5916\u89C2\u4E8C \u00B7 Card\uFF1A\u8272\u6761\u8D34\u8FB9\u90A3\u4E00\u4FA7\u7684\u5185\u8DDD = \u6761\u5B50\u8DDD\u8FB9\u7F18\u7684\u8DDD\u79BB \u2500\u2500\n   \u56DB\u65B9\u4F4D\u53EA\u6539\u5BF9\u5E94\u90A3\u6839 --card-pad-* \u53D8\u91CF\uFF0C__body \u4E0E __panel \u540C\u65F6\u8DDF\u7740\u5BF9\u9F50\u3002 */\n.dshpc-card--bar-left{--card-pad-l:var(--card-bar-inset)}\n.dshpc-card--bar-right{--card-pad-r:var(--card-bar-inset)}\n.dshpc-card--bar-top{--card-pad-t:var(--card-bar-inset)}\n.dshpc-card--bar-bottom{--card-pad-b:var(--card-bar-inset)}\n\n/* \u2500\u2500 \u5916\u89C2\u8F74\uFF082026-11-07\uFF09\uFF1A\u5E95\u8272\u5F00\u5173 + hover \u4F5C\u7528\u57DF \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   \u4E24\u5757\u533A\u57DF\u5404\u81EA\u72EC\u7ACB\uFF1A\u6839\u8282\u70B9\u53EA\u94FA\u4E00\u5C42\u5E38\u6001\u5E95\uFF08--surface-bg\uFF09\uFF1B__body \u662F\u300C\u4E0A\u9762\u90A3\u4E00\u6574\u5757\u300D\uFF0C\n   __panel \u662F\u5B83\u7684\u5144\u5F1F\u8282\u70B9\uFF0C\u4E0D\u94FA\u4EFB\u4F55\u80CC\u666F\u3001\u4E0D\u53C2\u4E0E hover\u3002\n   hoverScope\uFF08\u9ED8\u8BA4 head\uFF09\uFF1A\n     head \u2014\u2014 \u53EA\u6709 __body \u94FA --dshpc-card-hover\uFF0C\u8FB9\u5230\u8FB9\uFF08\u5185\u8DDD\u5708 + \u5706\u89D2\u90FD\u5728\u8FD9\u4E00\u5757\u4E0A\uFF09\uFF1B\n             \u5C55\u5F00\u6001\u4E5F\u4E0D\u6539\u5185\u8DDD\uFF0C\u4E0A\u4E0B\u4E24\u5708\u7559\u767D\u540C\u5C5E\u8FD9\u4E00\u5757\u3001\u4E00\u8D77\u53D8\u8272\uFF0C\u8272\u6761\u4E0A\u4E0B\u624D\u5BF9\u79F0\uFF1B\n             \u9F20\u6807\u843D\u5728 __panel \u65F6 :hover \u6839\u672C\u4E0D\u6210\u7ACB \u21D2 \u6574\u5361\u4E0D\u89E6\u53D1\uFF0C\u4E0B\u9762\u6C38\u8FDC\u662F\u5E38\u6001\u3002\n     card \u2014\u2014 \u6839\u8282\u70B9\u6539 --surface-bg\uFF0C\u6574\u5361\u542B\u5C55\u5F00\u533A\u4E00\u8D77\u53D8\u8272\uFF0C\u7531\u6D88\u8D39\u7AEF\u663E\u5F0F\u9009\u3002\n   \u26A0\uFE0F \u7EDD\u4E0D\u7528\u300C\u7ED9\u5C55\u5F00\u533A\u94FA\u4E00\u5C42\u5E95\u8272\u53BB\u76D6\u4F4F\u6839\u8282\u70B9\u300D\uFF1A\u534A\u900F\u660E token \u53E0\u4E24\u5C42\u4F1A\u66F4\u6DF1\uFF08\u771F\u8E29\u8FC7\uFF09\u3002 */\n.dshpc-card.dshpc-card--no-fill{--surface-bg:transparent}\n/* \u5F00\u5173\u6253\u5F00\u5373\u58F0\u660E\u300C\u4E0A\u9762\u90A3\u4E00\u5757\u53EF\u4EA4\u4E92\u300D\uFF1A\u624B\u52BF\u8DDF\u7740\u53D8\uFF0C\u5C55\u5F00\u533A\u8FD8\u539F\u6210\u9ED8\u8BA4\u5149\u6807\u3002 */\n.dshpc-card.dshpc-card--hoverable{cursor:pointer}\n.dshpc-card.dshpc-card--hover-head .dshpc-card__panel{cursor:auto}\n/* \u987A\u5E8F\u5373\u4F18\u5148\u7EA7\uFF1Astrip \u6D45\u5E95 / no-fill \u900F\u660E(0,2,0) \u2192 card:hover(0,3,0\uFF0C\u6700\u9AD8)\u3002 */\n.dshpc-card.dshpc-card--hover-head .dshpc-card__body:hover{background:var(--dshpc-card-hover)}\n.dshpc-card.dshpc-card--hover-card:hover{--surface-bg:var(--dshpc-card-hover)}\n\n.dshpc-card__toggle{\n  display:inline-flex;align-items:center;justify-content:center;\n  width:24px;height:24px;padding:0;background:none;border:none;border-radius:var(--dshpc-radius-sm);\n  color:var(--dshpc-fg-3);cursor:pointer;\n}\n.dshpc-card__toggle:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n/* \u7BAD\u5934\u662F svg\uFF08Chevron\uFF09\uFF0C\u4E0D\u662F\u5B57\u5F62 \u21D2 \u4E0D\u8981 font-size\uFF1Binline-flex \u514D\u6389 svg \u7684\u57FA\u7EBF\u7559\u767D\u3002 */\n.dshpc-card__caret{display:inline-flex;transition:transform .15s ease}\n.dshpc-card__caret.is-open{transform:rotate(180deg)}\n/* \u5C55\u5F00\u533A\u53EA\u8D1F\u8D23\u300C\u628A\u5C55\u5F00\u5185\u5BB9\u653E\u5728\u5934\u90E8\u533A\u4E0B\u9762\u300D\uFF1A\u81EA\u5DF1\u627F\u62C5\u5DE6\u53F3 / \u5E95\u90E8\u5185\u8DDD\uFF0C\u8865\u4E0A\u5361\u7247\u5E95\u90E8\u7559\u767D\u3002\n   margin-top \u4E0E padding-top \u53CC\u53CC\u5F52 0 \u21D2 \u4E24\u5757\u4E4B\u95F4\u7684\u95F4\u9694\u53EA\u6709 __body \u7684 padding-bottom\uFF0C\n   \u5C5E\u4E8E\u5934\u90E8\u533A\u3001\u8DDF\u7740 hover \u4E00\u8D77\u53D8\u8272\uFF1B\u6D88\u8D39\u7AEF\u81EA\u7ED8\u7684\u7EBF\u56E0\u6B64\u80FD\u8D34\u4F4F\u8FD9\u5757\u8272\u7684\u4E0B\u6CBF\uFF0C\u4E2D\u95F4\u4E0D\u5939\u4E0D\u53D8\u8272\u7684\u5E26\u5B50\u3002\n   \u5DE6\u53F3 / \u5E95\u90E8\u5185\u8DDD\u8BFB\u540C\u4E00\u7EC4\u56DB\u8F74\u53D8\u91CF \u21D2 \u4E0E\u5934\u90E8\u533A\u540C\u6E90\uFF0C\u4E0D\u4F1A\u5DE6\u8D34\u8FB9\u3001\u53F3\u7559\u767D\u3002\n   \u6838\u5FC3\u4E0D\u753B\u4EFB\u4F55\u5206\u9694\u7EBF\uFF1A\u9700\u8981\u7EBF\u7531\u6D88\u8D39\u7AEF\u5728 panel \u5185\u5BB9\u91CC\u81EA\u7ED8\uFF08\u6709\u65F6\u8981\u3001\u6709\u65F6\u4E0D\u8981\uFF0C\u6D88\u8D39\u7AEF\u81EA\u5DF1\u51B3\u5B9A\uFF09\u3002 */\n.dshpc-card__panel{\n  margin:0 var(--card-pad-r) 0 var(--card-pad-l);\n  padding:0 0 var(--card-pad-b);\n}\n";
+export declare const CARD_CSS = "\n/* \u2500\u2500 Card / StripCard\uFF1ASurface \u5916\u6846 + \u5934\u90E8\u5951\u7EA6 + \u8272\u6761 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   \u5916\u6846\uFF08\u5E95 / \u8FB9\u6846 / \u5706\u89D2\uFF09\u6765\u81EA .dshpc-surface\uFF08src/ui/surface.css\uFF09\uFF1A\n   \u672C\u6587\u4EF6**\u4E0D\u518D\u5199 border / border-radius**\uFF0C\u5706\u89D2\u5951\u7EA6\u56E0\u6B64\u53EA\u6709\u4E00\u4E2A\u5B9A\u4E49\u70B9\uFF08\u5BB9\u5668\u6863 = 12\uFF09\u3002\n   \u5185\u8DDD\u4E0D\u5728\u6839\u8282\u70B9\uFF1A\u6839\u8282\u70B9 padding:0\uFF0C__body\uFF08\u5934\u90E8\u533A\uFF09\u4E0E __panel\uFF08\u5C55\u5F00\u533A\uFF09\u5404\u81EA\u627F\u62C5 \u2014\u2014\n   \u4E24\u5757\u533A\u57DF\u56E0\u6B64\u5F7C\u6B64\u72EC\u7ACB\uFF0Chover \u53EA\u53EF\u80FD\u843D\u5728\u5934\u90E8\u533A\uFF0C\u5C55\u5F00\u533A\u4E0D\u4F1A\u88AB\u6CE2\u53CA\u3002\n   \u8FD9\u91CC\u53EA\u7BA1\u4E09\u4EF6 Surface \u4E0D\u8BE5\u77E5\u9053\u7684\u4E8B\uFF1A\u8272\u6761\u51E0\u4F55\u3001\u5934\u90E8\u5E03\u5C40\u3001\u4E24\u5757\u533A\u57DF\u7684\u5185\u8DDD\u3002\n\n   \u8272\u6761\u51E0\u4F55\u9ED8\u8BA4\u503C\u90FD\u53EF\u88AB props \u8986\u76D6\uFF08Card.ts \u5199\u5BF9\u5E94\u7684 CSS \u53D8\u91CF\uFF09\uFF1A\n     --card-bar-size   \u6761\u5B50\u7C97\u7EC6\n     --card-bar-inset  \u6761\u5B50\u8DDD\u5361\u7247\u8FB9\u7F18\u7684\u8DDD\u79BB\uFF08= \u8D34\u8FB9\u90A3\u4E00\u4FA7\u7684\u5185\u8DDD\uFF09\n     --card-bar-gap    \u6761\u5B50\u8DDD\u5185\u5BB9\u7684\u8DDD\u79BB\uFF08= body \u7684 gap\uFF09\n     --card-bar-length \u4E0A\u4E0B\u65B9\u4F4D\u65F6\u7684\u6761\u957F\uFF08100% = \u8DDF\u5185\u5BB9\u540C\u5BBD\uFF09\n   \u8FD9\u4E9B\u53D8\u91CF\u53EA\u5728\u672C\u6587\u4EF6\u6D88\u8D39\uFF083 \u4EFD\u6587\u4EF6\u4E00\u8D77\u5F15\u65F6\uFF0C\u8DE8\u6587\u4EF6\u5F15\u7528\u522B\u5904\u7684\u53D8\u91CF\u4F1A\u9759\u9ED8\u5931\u6548\uFF09\uFF0C\n   \u6240\u4EE5\u9ED8\u8BA4\u503C\u5FC5\u987B\u5199\u5728\u8FD9\u91CC\uFF0C\u800C\u4E0D\u662F\u4EE4\u724C\u6216\u522B\u7684\u76AE\u80A4\u91CC\u3002 */\n.dshpc-card{\n  --card-accent:var(--dshpc-business);\n  --card-accent-soft:var(--dshpc-business-soft);\n  --card-bar-size:6px;\n  --card-bar-inset:12px;\n  --card-bar-gap:12px;\n  --card-bar-length:100%;\n  /* \u5185\u8DDD\u56DB\u6839\u8F74\u662F\u552F\u4E00\u771F\u6E90\uFF1A\u6839\u8282\u70B9\u81EA\u5DF1\u4E0D\u7559 padding\uFF0C__body \u4E0E __panel \u90FD\u53EA\u8BFB\u8FD9\u56DB\u6839\u8F74\u3002\n     \u8FD9\u6837 __body \u5C31\u662F\u300C\u4E0A\u9762\u90A3\u4E00\u6574\u5757\u300D\uFF0Chover \u94FA\u8272\u8FB9\u5230\u8FB9\uFF0C\u8FDE\u539F\u672C\u90A3\u5708\u5916\u5708\u4E00\u8D77\u53D8\u3002\n     --card-pad-all \u53EA\u662F\u56DB\u8F74\u7684\u7EC4\u5408\u503C\uFF0C\u6D88\u8D39\u7AEF style.padding \u7531 Card.ts \u644A\u6210\u56DB\u6839\u8F74\u540E\u81EA\u52A8\u6D3E\u751F\u3002 */\n  --card-pad-t:14px;--card-pad-r:14px;--card-pad-b:14px;--card-pad-l:14px;\n  --card-pad-all:var(--card-pad-t) var(--card-pad-r) var(--card-pad-b) var(--card-pad-l);\n  padding:0;\n  /* \u5934\u90E8\u533A\u80CC\u666F\u94FA\u6EE1\u6839\u8282\u70B9\u5185\u5BB9\u76D2\uFF0C\u7531\u6839\u8282\u70B9\u7EDF\u4E00\u88C1\u6210\u5916\u6846\u5706\u89D2\uFF1B__body \u81EA\u5DF1\u4E0D\u5199\u5706\u89D2\u88F8\u503C\u3002 */\n  overflow:hidden;\n}\n/* \u6863\u4F4D \u2192 token\uFF08\u7167 records-timeline \u7684 tone \u6A21\u5F0F\uFF1A\u4E00\u4E2A\u53D8\u91CF\u5207\u6863\uFF0C\u4E0D\u5199 5 \u5957\u89C4\u5219\uFF1B\u6D45\u5E95\u4E0E\u8272\u6761\u540C\u6E90\uFF09\u3002 */\n.dshpc-card--success{--card-accent:var(--dshpc-success);--card-accent-soft:var(--dshpc-success-soft)}\n.dshpc-card--warning{--card-accent:var(--dshpc-warning);--card-accent-soft:var(--dshpc-warning-soft)}\n.dshpc-card--danger{--card-accent:var(--dshpc-danger);--card-accent-soft:var(--dshpc-danger-soft)}\n/* neutral \u6D45\u5E95\u501F chip \u5E95\uFF08\u5144\u5F1F\u9879\u76EE mute \u6863\u540C\u6B3E\uFF1A\u660E\u6697\u90FD\u6210\u7ACB\uFF09\u3002 */\n.dshpc-card--neutral{--card-accent:var(--dshpc-fg-4);--card-accent-soft:var(--dshpc-chip-bg)}\n/* \u6269\u5C55\u516B\u8272\uFF082026-10-29\uFF09\uFF1A\u8272\u6761 + \u6D45\u5E95\u540C\u6E90\uFF0C\u8F6F\u5E95\u8D70\u5404\u81EA -soft\u3002 */\n.dshpc-card--purple{--card-accent:var(--dshpc-purple);--card-accent-soft:var(--dshpc-purple-soft)}\n.dshpc-card--pink{--card-accent:var(--dshpc-pink);--card-accent-soft:var(--dshpc-pink-soft)}\n.dshpc-card--cyan{--card-accent:var(--dshpc-cyan);--card-accent-soft:var(--dshpc-cyan-soft)}\n.dshpc-card--teal{--card-accent:var(--dshpc-teal);--card-accent-soft:var(--dshpc-teal-soft)}\n.dshpc-card--orange{--card-accent:var(--dshpc-orange);--card-accent-soft:var(--dshpc-orange-soft)}\n.dshpc-card--indigo{--card-accent:var(--dshpc-indigo);--card-accent-soft:var(--dshpc-indigo-soft)}\n.dshpc-card--rose{--card-accent:var(--dshpc-rose);--card-accent-soft:var(--dshpc-rose-soft)}\n.dshpc-card--slate{--card-accent:var(--dshpc-slate);--card-accent-soft:var(--dshpc-slate-soft)}\n\n/* body = \u8272\u6761 + \u5934\u90E8\uFF0C\u4E5F\u662F\u300C\u4E0A\u9762\u90A3\u4E00\u6574\u5757\u300D\uFF1A\u5B83\u81EA\u5DF1\u627F\u62C5\u5185\u8DDD\u5E76\u94FA\u6EE1\u6839\u8282\u70B9\u5185\u5BB9\u76D2\uFF0C\n   \u662F head \u4F5C\u7528\u57DF\u4E0B\u552F\u4E00\u7684 hover \u76EE\u6807\u3002\u5706\u89D2\u7531\u6839\u8282\u70B9 overflow \u88C1\u5207 \u21D2 hover \u8272\u4E0D\u9732\u65B9\u89D2\u3002\n   --card-pad-all \u7531\u56DB\u6839\u8F74\u6D3E\u751F\uFF1B\u6D88\u8D39\u7AEF style.padding \u8986\u76D6\u56DB\u8F74\u540E\uFF0C\u5934\u90E8\u533A\u4E0E\u5C55\u5F00\u533A\u540C\u6B65\u5BF9\u9F50\u3002\n   \u65B9\u5411\u8DDF\u7740\u6761\u5B50\u8D34\u7684\u8FB9\u5207 \u21D2 \u56DB\u4E2A\u65B9\u4F4D\u53EA\u662F\u300C\u6362\u4E00\u4E2A\u65B9\u5411\u7684 flex \u9879\u300D\uFF0C\u4E0D\u7528\u5404\u5199\u4E00\u5957\u5B9A\u4F4D\u3002 */\n.dshpc-card__body{\n  display:flex;gap:var(--card-bar-gap);min-width:0;\n  padding:var(--card-pad-all);\n  background:transparent;\n}\n.dshpc-card--bar-top .dshpc-card__body,\n.dshpc-card--bar-bottom .dshpc-card__body{flex-direction:column}\n/* \u5C55\u5F00\u6001\u4E0D\u7279\u6B8A\u5904\u7406\u5185\u8DDD\uFF1A\u5934\u90E8\u533A\u4E0A\u4E0B\u7559\u767D\u59CB\u7EC8\u5BF9\u79F0\uFF0C\u8272\u6761\u4E0A\u4E0B\u624D\u4E0D\u4F1A\u4E00\u957F\u4E00\u77ED\u3002\n   \u4E24\u5757\u4E4B\u95F4\u7684\u95F4\u9694\u5C31\u662F __body \u7684 padding-bottom\uFF0C\u5C5E\u4E8E\u5934\u90E8\u533A\u3001\u8DDF\u7740\u4E00\u8D77\u53D8\u8272\uFF1B\n   __panel \u7D27\u63A5\u5176\u540E\uFF0C\u4E0D\u5728\u4E2D\u95F4\u7559\u4E00\u6761\u4E0D\u53D8\u8272\u7684\u5E26\u5B50\uFF0C\u4E5F\u4E0D\u753B\u5206\u9694\u7EBF\u3002 */\n\n/* \u5934\u90E8\u4E00\u884C = \u4E3B\u5185\u5BB9 + \u53F3\u4FA7\u69FD\uFF0C**\u6574\u4F53\u5782\u76F4\u5C45\u4E2D**\uFF1A\u8C03\u7528\u65B9\u5728 action \u91CC\u88F8\u653E\u4E00\u4E2A\u5143\u7D20\n   \uFF08\u6309\u94AE / \u6587\u5B57 / \u56FE\u6807\uFF09\u4E0D\u7528\u81EA\u5DF1\u5957\u5BB9\u5668\u5C45\u4E2D\uFF1B\u4E00\u884C\u4E24\u884C\u3001\u53F3\u8FB9\u600E\u4E48\u653E\u7531\u8C03\u7528\u65B9\u5728\u6846\u5185\u81EA\u5B9A\u3002 */\n.dshpc-card__head{display:flex;align-items:center;gap:8px;min-width:0}\n.dshpc-card--bar-left .dshpc-card__head,\n.dshpc-card--bar-right .dshpc-card__head{flex:1 1 auto}\n.dshpc-card__main{flex:1;min-width:0}\n.dshpc-card__side{display:flex;align-items:center;gap:6px;flex:none}\n\n/* \u8272\u6761\uFF1A\u5DE6/\u53F3 = \u7AD6\u5411\u6761\uFF08\u9AD8\u5EA6\u8DDF\u5185\u5BB9\uFF0C\u6700\u5C0F\u4E00\u884C\uFF09\uFF1B\u4E0A/\u4E0B = \u6A2A\u5411\u6761\uFF08\u957F\u5EA6\u9ED8\u8BA4\u8DDF\u5185\u5BB9\u540C\u5BBD\uFF09\u3002\n   \u53F3/\u4E0B\u65B9\u4F4D\u9760 order \u6392\u5230\u5934\u90E8\u4E4B\u540E\uFF0CDOM \u987A\u5E8F\u59CB\u7EC8\u4E0D\u53D8\u3002 */\n.dshpc-card__bar{flex:none;background:var(--card-accent);border-radius:var(--dshpc-radius-xs)}\n.dshpc-card--bar-left .dshpc-card__bar,\n.dshpc-card--bar-right .dshpc-card__bar{width:var(--card-bar-size);align-self:stretch;min-height:var(--dshpc-line-md)}\n.dshpc-card--bar-top .dshpc-card__bar,\n.dshpc-card--bar-bottom .dshpc-card__bar{width:var(--card-bar-length);height:var(--card-bar-size);align-self:flex-start}\n.dshpc-card--bar-right .dshpc-card__bar,\n.dshpc-card--bar-bottom .dshpc-card__bar{order:1}\n\n/* \u2500\u2500 \u5916\u89C2\u4E00 \u00B7 StripCard\uFF1A\u540C\u8272\u7CFB\u6D45\u5E95 + 1px \u4E0D\u53EF\u89C1\u5360\u4F4D\u8FB9\u6846 + \u65B9\u89D2 + 4px \u901A\u9AD8\u65B9\u89D2\u8272\u6761\u8D34\u5DE6\u7F18 \u2500\u2500\n   \u5E95\u8272 / \u65B9\u89D2 / \u5360\u4F4D\u8FB9\u6846\u7531 Surface \u7684\u4E09\u6761\u4FEE\u9970\u7C7B\u63D0\u4F9B\uFF08Card.ts \u6309 kind \u4F20\uFF09\uFF0C\u6B64\u5904\u53EA\u7BA1\u5185\u8DDD\u4E0E\u6761\u5B50\u3002 */\n.dshpc-card.dshpc-card--strip{\n  --card-bar-size:4px;--card-bar-inset:0;\n  --card-pad-t:12px;--card-pad-r:12px;--card-pad-b:12px;--card-pad-l:20px;\n  /* \u5E95\u8272\u6539\u8D70 Surface \u7684 --surface-bg \u53D8\u91CF\uFF08surface.css:7-8 \u5951\u7EA6\uFF09\uFF1A\u4E0D\u80FD\u5199 background \u5C5E\u6027\uFF0C\n     \u5426\u5219\u900F\u660E\u6863\u8981\u8986\u76D6\u65F6\u4F1A\u88AB\u5C5E\u6027\u5C42\u6253\u67B6\uFF08\u5144\u5F1F\u9879\u76EE\u66FE\u7528 background-image \u6E10\u53D8\u7ED5\u8FC7\uFF09\u3002 */\n  --surface-bg:var(--card-accent-soft,transparent);\n}\n/* \u5DE6\u5185\u8FB9\u8DDD 20px = 16 \u7559\u767D + 4 \u6761\u5BBD \u21D2 \u5185\u5BB9\u4ECE\u8272\u6761\u53F3\u7F18\u8D77\u7B97\uFF1B\u8272\u6761\u7EDD\u5BF9\u5B9A\u4F4D\u901A\u9AD8\uFF0C\u8DDF\u7740\u5185\u5BB9\u9AD8\u5EA6\u81EA\u9002\u5E94\u3002\n   \u5B9A\u4F4D\u57FA\u51C6\u662F\u6839\u8282\u70B9\u7684 position:relative\uFF08Surface \u63D0\u4F9B\uFF09\uFF0Ctop:0 / bottom:0 \u56E0\u6B64\u662F\u6574\u5361\u901A\u9AD8\uFF1A\n   \u5C55\u5F00\u540E\u8272\u6761\u4ECD\u4E00\u8DEF\u8D2F\u7A7F\u5230\u5C55\u5F00\u533A\u5E95\u90E8\uFF0C\u4E0D\u968F head \u5206\u533A\u88AB\u88C1\u77ED\uFF082026-11-08 \u62CD\u677F\uFF09\u3002\n   \u7279\u5F02\u6027 0,3,0\uFF1A\u538B\u8FC7\u4E0A\u9762 .dshpc-card--bar-left .dshpc-card__bar \u7684\u5BBD\u5EA6\u89C4\u5219\uFF0C\u4E0E\u6CE8\u5165\u987A\u5E8F\u65E0\u5173\u3002 */\n.dshpc-card.dshpc-card--strip .dshpc-card__bar{position:absolute;left:0;top:0;bottom:0;width:4px;align-self:auto}\n\n/* \u2500\u2500 \u5916\u89C2\u4E8C \u00B7 Card\uFF1A\u8272\u6761\u8D34\u8FB9\u90A3\u4E00\u4FA7\u7684\u5185\u8DDD = \u6761\u5B50\u8DDD\u8FB9\u7F18\u7684\u8DDD\u79BB \u2500\u2500\n   \u56DB\u65B9\u4F4D\u53EA\u6539\u5BF9\u5E94\u90A3\u6839 --card-pad-* \u53D8\u91CF\uFF0C__body \u4E0E __panel \u540C\u65F6\u8DDF\u7740\u5BF9\u9F50\u3002 */\n.dshpc-card--bar-left{--card-pad-l:var(--card-bar-inset)}\n.dshpc-card--bar-right{--card-pad-r:var(--card-bar-inset)}\n.dshpc-card--bar-top{--card-pad-t:var(--card-bar-inset)}\n.dshpc-card--bar-bottom{--card-pad-b:var(--card-bar-inset)}\n\n/* \u2500\u2500 \u5916\u89C2\u8F74\uFF082026-11-07\uFF09\uFF1A\u5E95\u8272\u5F00\u5173 + hover \u4F5C\u7528\u57DF \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   \u4E24\u5757\u533A\u57DF\u5404\u81EA\u72EC\u7ACB\uFF1A\u6839\u8282\u70B9\u53EA\u94FA\u4E00\u5C42\u5E38\u6001\u5E95\uFF08--surface-bg\uFF09\uFF1B__body \u662F\u300C\u4E0A\u9762\u90A3\u4E00\u6574\u5757\u300D\uFF0C\n   __panel \u662F\u5B83\u7684\u5144\u5F1F\u8282\u70B9\uFF0C\u4E0D\u94FA\u4EFB\u4F55\u80CC\u666F\u3001\u4E0D\u53C2\u4E0E hover\u3002\n   hoverScope\uFF08\u9ED8\u8BA4 head\uFF09\uFF1A\n     head \u2014\u2014 \u53EA\u6709 __body \u94FA --dshpc-card-hover\uFF0C\u8FB9\u5230\u8FB9\uFF08\u5185\u8DDD\u5708 + \u5706\u89D2\u90FD\u5728\u8FD9\u4E00\u5757\u4E0A\uFF09\uFF1B\n             \u5C55\u5F00\u6001\u4E5F\u4E0D\u6539\u5185\u8DDD\uFF0C\u4E0A\u4E0B\u4E24\u5708\u7559\u767D\u540C\u5C5E\u8FD9\u4E00\u5757\u3001\u4E00\u8D77\u53D8\u8272\uFF0C\u8272\u6761\u4E0A\u4E0B\u624D\u5BF9\u79F0\uFF1B\n             \u9F20\u6807\u843D\u5728 __panel \u65F6 :hover \u6839\u672C\u4E0D\u6210\u7ACB \u21D2 \u6574\u5361\u4E0D\u89E6\u53D1\uFF0C\u4E0B\u9762\u6C38\u8FDC\u662F\u5E38\u6001\u3002\n     card \u2014\u2014 \u6839\u8282\u70B9\u6539 --surface-bg\uFF0C\u6574\u5361\u542B\u5C55\u5F00\u533A\u4E00\u8D77\u53D8\u8272\uFF0C\u7531\u6D88\u8D39\u7AEF\u663E\u5F0F\u9009\u3002\n   \u26A0\uFE0F \u7EDD\u4E0D\u7528\u300C\u7ED9\u5C55\u5F00\u533A\u94FA\u4E00\u5C42\u5E95\u8272\u53BB\u76D6\u4F4F\u6839\u8282\u70B9\u300D\uFF1A\u534A\u900F\u660E token \u53E0\u4E24\u5C42\u4F1A\u66F4\u6DF1\uFF08\u771F\u8E29\u8FC7\uFF09\u3002 */\n.dshpc-card.dshpc-card--no-fill{--surface-bg:transparent}\n/* \u5F00\u5173\u6253\u5F00\u5373\u58F0\u660E\u300C\u4E0A\u9762\u90A3\u4E00\u5757\u53EF\u4EA4\u4E92\u300D\uFF1A\u624B\u52BF\u8DDF\u7740\u53D8\uFF0C\u5C55\u5F00\u533A\u8FD8\u539F\u6210\u9ED8\u8BA4\u5149\u6807\u3002 */\n.dshpc-card.dshpc-card--hoverable{cursor:pointer}\n.dshpc-card.dshpc-card--hover-head .dshpc-card__panel{cursor:auto}\n/* \u53EF\u70B9\u5361\u7247\u7684\u952E\u76D8\u7126\u70B9\u73AF\uFF1A\u70B9\u51FB\u5C42 head = __body\u3001card = \u6839\u8282\u70B9\uFF0C\u4E24\u8005\u5171\u7528\u8FD9\u4E00\u6761\u3002\n   outline \u753B\u5728\u76D2\u5185\uFF08offset \u8D1F\u503C\uFF09\uFF1A\u6839\u8282\u70B9 overflow:hidden \u4F1A\u88C1\u6389 __body \u5916\u4FA7\u90A3\u4E00\u5708\u3002 */\n.dshpc-card__hit:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-2px}\n/* \u987A\u5E8F\u5373\u4F18\u5148\u7EA7\uFF1Astrip \u6D45\u5E95 / no-fill \u900F\u660E(0,2,0) \u2192 card:hover(0,3,0\uFF0C\u6700\u9AD8)\u3002 */\n.dshpc-card.dshpc-card--hover-head .dshpc-card__body:hover{background:var(--dshpc-card-hover)}\n.dshpc-card.dshpc-card--hover-card:hover{--surface-bg:var(--dshpc-card-hover)}\n\n.dshpc-card__toggle{\n  display:inline-flex;align-items:center;justify-content:center;\n  width:24px;height:24px;padding:0;background:none;border:none;border-radius:var(--dshpc-radius-sm);\n  color:var(--dshpc-fg-3);cursor:pointer;\n}\n.dshpc-card__toggle:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n/* \u7BAD\u5934\u662F svg\uFF08Chevron\uFF09\uFF0C\u4E0D\u662F\u5B57\u5F62 \u21D2 \u4E0D\u8981 font-size\uFF1Binline-flex \u514D\u6389 svg \u7684\u57FA\u7EBF\u7559\u767D\u3002 */\n.dshpc-card__caret{display:inline-flex;transition:transform .15s ease}\n.dshpc-card__caret.is-open{transform:rotate(180deg)}\n/* \u5C55\u5F00\u533A\u53EA\u8D1F\u8D23\u300C\u628A\u5C55\u5F00\u5185\u5BB9\u653E\u5728\u5934\u90E8\u533A\u4E0B\u9762\u300D\uFF1A\u81EA\u5DF1\u627F\u62C5\u5DE6\u53F3 / \u5E95\u90E8\u5185\u8DDD\uFF0C\u8865\u4E0A\u5361\u7247\u5E95\u90E8\u7559\u767D\u3002\n   margin-top \u4E0E padding-top \u53CC\u53CC\u5F52 0 \u21D2 \u4E24\u5757\u4E4B\u95F4\u7684\u95F4\u9694\u53EA\u6709 __body \u7684 padding-bottom\uFF0C\n   \u5C5E\u4E8E\u5934\u90E8\u533A\u3001\u8DDF\u7740 hover \u4E00\u8D77\u53D8\u8272\uFF1B\u6D88\u8D39\u7AEF\u81EA\u7ED8\u7684\u7EBF\u56E0\u6B64\u80FD\u8D34\u4F4F\u8FD9\u5757\u8272\u7684\u4E0B\u6CBF\uFF0C\u4E2D\u95F4\u4E0D\u5939\u4E0D\u53D8\u8272\u7684\u5E26\u5B50\u3002\n   \u5DE6\u53F3 / \u5E95\u90E8\u5185\u8DDD\u8BFB\u540C\u4E00\u7EC4\u56DB\u8F74\u53D8\u91CF \u21D2 \u4E0E\u5934\u90E8\u533A\u540C\u6E90\uFF0C\u4E0D\u4F1A\u5DE6\u8D34\u8FB9\u3001\u53F3\u7559\u767D\u3002\n   \u6838\u5FC3\u4E0D\u753B\u4EFB\u4F55\u5206\u9694\u7EBF\uFF1A\u9700\u8981\u7EBF\u7531\u6D88\u8D39\u7AEF\u5728 panel \u5185\u5BB9\u91CC\u81EA\u7ED8\uFF08\u6709\u65F6\u8981\u3001\u6709\u65F6\u4E0D\u8981\uFF0C\u6D88\u8D39\u7AEF\u81EA\u5DF1\u51B3\u5B9A\uFF09\u3002 */\n.dshpc-card__panel{\n  margin:0 var(--card-pad-r) 0 var(--card-pad-l);\n  padding:0 0 var(--card-pad-b);\n}\n";
 //# sourceMappingURL=card-css.generated.d.ts.map

package/dist/ui/display/card-css.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card-css.generated.d.ts","sourceRoot":"","sources":["../../../src/ui/display/card-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,6wdAA+kO,CAAA"}
+{"version":3,"file":"card-css.generated.d.ts","sourceRoot":"","sources":["../../../src/ui/display/card-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,iteAAmyO,CAAA"}

package/dist/ui/display/card-css.generated.js

@@ -1,4 +1,4 @@
 // ⚠️ 生成物，勿手改。真源 = src/ui/display/card.css
 // 由 scripts/gen-css.mjs 生成（`pnpm run gen:css`）：改样式请改那个 .css 文件后重新生成。
-export const CARD_CSS = "\n/* ── Card / StripCard：Surface 外框 + 头部契约 + 色条 ─────────────────────\n   外框（底 / 边框 / 圆角）来自 .dshpc-surface（src/ui/surface.css）：\n   本文件**不再写 border / border-radius**，圆角契约因此只有一个定义点（容器档 = 12）。\n   内距不在根节点：根节点 padding:0，__body（头部区）与 __panel（展开区）各自承担 ——\n   两块区域因此彼此独立，hover 只可能落在头部区，展开区不会被波及。\n   这里只管三件 Surface 不该知道的事：色条几何、头部布局、两块区域的内距。\n\n   色条几何默认值都可被 props 覆盖（Card.ts 写对应的 CSS 变量）：\n     --card-bar-size   条子粗细\n     --card-bar-inset  条子距卡片边缘的距离（= 贴边那一侧的内距）\n     --card-bar-gap    条子距内容的距离（= body 的 gap）\n     --card-bar-length 上下方位时的条长（100% = 跟内容同宽）\n   这些变量只在本文件消费（3 份文件一起引时，跨文件引用别处的变量会静默失效），\n   所以默认值必须写在这里，而不是令牌或别的皮肤里。 */\n.dshpc-card{\n  --card-accent:var(--dshpc-business);\n  --card-accent-soft:var(--dshpc-business-soft);\n  --card-bar-size:6px;\n  --card-bar-inset:12px;\n  --card-bar-gap:12px;\n  --card-bar-length:100%;\n  /* 内距四根轴是唯一真源：根节点自己不留 padding，__body 与 __panel 都只读这四根轴。\n     这样 __body 就是「上面那一整块」，hover 铺色边到边，连原本那圈外圈一起变。\n     --card-pad-all 只是四轴的组合值，消费端 style.padding 由 Card.ts 摊成四根轴后自动派生。 */\n  --card-pad-t:14px;--card-pad-r:14px;--card-pad-b:14px;--card-pad-l:14px;\n  --card-pad-all:var(--card-pad-t) var(--card-pad-r) var(--card-pad-b) var(--card-pad-l);\n  padding:0;\n  /* 头部区背景铺满根节点内容盒，由根节点统一裁成外框圆角；__body 自己不写圆角裸值。 */\n  overflow:hidden;\n}\n/* 档位 → token（照 records-timeline 的 tone 模式：一个变量切档，不写 5 套规则；浅底与色条同源）。 */\n.dshpc-card--success{--card-accent:var(--dshpc-success);--card-accent-soft:var(--dshpc-success-soft)}\n.dshpc-card--warning{--card-accent:var(--dshpc-warning);--card-accent-soft:var(--dshpc-warning-soft)}\n.dshpc-card--danger{--card-accent:var(--dshpc-danger);--card-accent-soft:var(--dshpc-danger-soft)}\n/* neutral 浅底借 chip 底（兄弟项目 mute 档同款：明暗都成立）。 */\n.dshpc-card--neutral{--card-accent:var(--dshpc-fg-4);--card-accent-soft:var(--dshpc-chip-bg)}\n/* 扩展八色（2026-10-29）：色条 + 浅底同源，软底走各自 -soft。 */\n.dshpc-card--purple{--card-accent:var(--dshpc-purple);--card-accent-soft:var(--dshpc-purple-soft)}\n.dshpc-card--pink{--card-accent:var(--dshpc-pink);--card-accent-soft:var(--dshpc-pink-soft)}\n.dshpc-card--cyan{--card-accent:var(--dshpc-cyan);--card-accent-soft:var(--dshpc-cyan-soft)}\n.dshpc-card--teal{--card-accent:var(--dshpc-teal);--card-accent-soft:var(--dshpc-teal-soft)}\n.dshpc-card--orange{--card-accent:var(--dshpc-orange);--card-accent-soft:var(--dshpc-orange-soft)}\n.dshpc-card--indigo{--card-accent:var(--dshpc-indigo);--card-accent-soft:var(--dshpc-indigo-soft)}\n.dshpc-card--rose{--card-accent:var(--dshpc-rose);--card-accent-soft:var(--dshpc-rose-soft)}\n.dshpc-card--slate{--card-accent:var(--dshpc-slate);--card-accent-soft:var(--dshpc-slate-soft)}\n\n/* body = 色条 + 头部，也是「上面那一整块」：它自己承担内距并铺满根节点内容盒，\n   是 head 作用域下唯一的 hover 目标。圆角由根节点 overflow 裁切 ⇒ hover 色不露方角。\n   --card-pad-all 由四根轴派生；消费端 style.padding 覆盖四轴后，头部区与展开区同步对齐。\n   方向跟着条子贴的边切 ⇒ 四个方位只是「换一个方向的 flex 项」，不用各写一套定位。 */\n.dshpc-card__body{\n  display:flex;gap:var(--card-bar-gap);min-width:0;\n  padding:var(--card-pad-all);\n  background:transparent;\n}\n.dshpc-card--bar-top .dshpc-card__body,\n.dshpc-card--bar-bottom .dshpc-card__body{flex-direction:column}\n/* 展开态不特殊处理内距：头部区上下留白始终对称，色条上下才不会一长一短。\n   两块之间的间隔就是 __body 的 padding-bottom，属于头部区、跟着一起变色；\n   __panel 紧接其后，不在中间留一条不变色的带子，也不画分隔线。 */\n\n/* 头部一行 = 主内容 + 右侧槽，**整体垂直居中**：调用方在 action 里裸放一个元素\n   （按钮 / 文字 / 图标）不用自己套容器居中；一行两行、右边怎么放由调用方在框内自定。 */\n.dshpc-card__head{display:flex;align-items:center;gap:8px;min-width:0}\n.dshpc-card--bar-left .dshpc-card__head,\n.dshpc-card--bar-right .dshpc-card__head{flex:1 1 auto}\n.dshpc-card__main{flex:1;min-width:0}\n.dshpc-card__side{display:flex;align-items:center;gap:6px;flex:none}\n\n/* 色条：左/右 = 竖向条（高度跟内容，最小一行）；上/下 = 横向条（长度默认跟内容同宽）。\n   右/下方位靠 order 排到头部之后，DOM 顺序始终不变。 */\n.dshpc-card__bar{flex:none;background:var(--card-accent);border-radius:var(--dshpc-radius-xs)}\n.dshpc-card--bar-left .dshpc-card__bar,\n.dshpc-card--bar-right .dshpc-card__bar{width:var(--card-bar-size);align-self:stretch;min-height:var(--dshpc-line-md)}\n.dshpc-card--bar-top .dshpc-card__bar,\n.dshpc-card--bar-bottom .dshpc-card__bar{width:var(--card-bar-length);height:var(--card-bar-size);align-self:flex-start}\n.dshpc-card--bar-right .dshpc-card__bar,\n.dshpc-card--bar-bottom .dshpc-card__bar{order:1}\n\n/* ── 外观一 · StripCard：同色系浅底 + 1px 不可见占位边框 + 方角 + 4px 通高方角色条贴左缘 ──\n   底色 / 方角 / 占位边框由 Surface 的三条修饰类提供（Card.ts 按 kind 传），此处只管内距与条子。 */\n.dshpc-card.dshpc-card--strip{\n  --card-bar-size:4px;--card-bar-inset:0;\n  --card-pad-t:12px;--card-pad-r:12px;--card-pad-b:12px;--card-pad-l:20px;\n  /* 底色改走 Surface 的 --surface-bg 变量（surface.css:7-8 契约）：不能写 background 属性，\n     否则透明档要覆盖时会被属性层打架（兄弟项目曾用 background-image 渐变绕过）。 */\n  --surface-bg:var(--card-accent-soft,transparent);\n}\n/* 左内边距 20px = 16 留白 + 4 条宽 ⇒ 内容从色条右缘起算；色条绝对定位通高，跟着内容高度自适应。\n   定位基准是根节点的 position:relative（Surface 提供），top:0 / bottom:0 因此是整卡通高：\n   展开后色条仍一路贯穿到展开区底部，不随 head 分区被裁短（2026-11-08 拍板）。\n   特异性 0,3,0：压过上面 .dshpc-card--bar-left .dshpc-card__bar 的宽度规则，与注入顺序无关。 */\n.dshpc-card.dshpc-card--strip .dshpc-card__bar{position:absolute;left:0;top:0;bottom:0;width:4px;align-self:auto}\n\n/* ── 外观二 · Card：色条贴边那一侧的内距 = 条子距边缘的距离 ──\n   四方位只改对应那根 --card-pad-* 变量，__body 与 __panel 同时跟着对齐。 */\n.dshpc-card--bar-left{--card-pad-l:var(--card-bar-inset)}\n.dshpc-card--bar-right{--card-pad-r:var(--card-bar-inset)}\n.dshpc-card--bar-top{--card-pad-t:var(--card-bar-inset)}\n.dshpc-card--bar-bottom{--card-pad-b:var(--card-bar-inset)}\n\n/* ── 外观轴（2026-11-07）：底色开关 + hover 作用域 ───────────────────────────\n   两块区域各自独立：根节点只铺一层常态底（--surface-bg）；__body 是「上面那一整块」，\n   __panel 是它的兄弟节点，不铺任何背景、不参与 hover。\n   hoverScope（默认 head）：\n     head —— 只有 __body 铺 --dshpc-card-hover，边到边（内距圈 + 圆角都在这一块上）；\n             展开态也不改内距，上下两圈留白同属这一块、一起变色，色条上下才对称；\n             鼠标落在 __panel 时 :hover 根本不成立 ⇒ 整卡不触发，下面永远是常态。\n     card —— 根节点改 --surface-bg，整卡含展开区一起变色，由消费端显式选。\n   ⚠️ 绝不用「给展开区铺一层底色去盖住根节点」：半透明 token 叠两层会更深（真踩过）。 */\n.dshpc-card.dshpc-card--no-fill{--surface-bg:transparent}\n/* 开关打开即声明「上面那一块可交互」：手势跟着变，展开区还原成默认光标。 */\n.dshpc-card.dshpc-card--hoverable{cursor:pointer}\n.dshpc-card.dshpc-card--hover-head .dshpc-card__panel{cursor:auto}\n/* 顺序即优先级：strip 浅底 / no-fill 透明(0,2,0) → card:hover(0,3,0，最高)。 */\n.dshpc-card.dshpc-card--hover-head .dshpc-card__body:hover{background:var(--dshpc-card-hover)}\n.dshpc-card.dshpc-card--hover-card:hover{--surface-bg:var(--dshpc-card-hover)}\n\n.dshpc-card__toggle{\n  display:inline-flex;align-items:center;justify-content:center;\n  width:24px;height:24px;padding:0;background:none;border:none;border-radius:var(--dshpc-radius-sm);\n  color:var(--dshpc-fg-3);cursor:pointer;\n}\n.dshpc-card__toggle:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n/* 箭头是 svg（Chevron），不是字形 ⇒ 不要 font-size；inline-flex 免掉 svg 的基线留白。 */\n.dshpc-card__caret{display:inline-flex;transition:transform .15s ease}\n.dshpc-card__caret.is-open{transform:rotate(180deg)}\n/* 展开区只负责「把展开内容放在头部区下面」：自己承担左右 / 底部内距，补上卡片底部留白。\n   margin-top 与 padding-top 双双归 0 ⇒ 两块之间的间隔只有 __body 的 padding-bottom，\n   属于头部区、跟着 hover 一起变色；消费端自绘的线因此能贴住这块色的下沿，中间不夹不变色的带子。\n   左右 / 底部内距读同一组四轴变量 ⇒ 与头部区同源，不会左贴边、右留白。\n   核心不画任何分隔线：需要线由消费端在 panel 内容里自绘（有时要、有时不要，消费端自己决定）。 */\n.dshpc-card__panel{\n  margin:0 var(--card-pad-r) 0 var(--card-pad-l);\n  padding:0 0 var(--card-pad-b);\n}\n";
+export const CARD_CSS = "\n/* ── Card / StripCard：Surface 外框 + 头部契约 + 色条 ─────────────────────\n   外框（底 / 边框 / 圆角）来自 .dshpc-surface（src/ui/surface.css）：\n   本文件**不再写 border / border-radius**，圆角契约因此只有一个定义点（容器档 = 12）。\n   内距不在根节点：根节点 padding:0，__body（头部区）与 __panel（展开区）各自承担 ——\n   两块区域因此彼此独立，hover 只可能落在头部区，展开区不会被波及。\n   这里只管三件 Surface 不该知道的事：色条几何、头部布局、两块区域的内距。\n\n   色条几何默认值都可被 props 覆盖（Card.ts 写对应的 CSS 变量）：\n     --card-bar-size   条子粗细\n     --card-bar-inset  条子距卡片边缘的距离（= 贴边那一侧的内距）\n     --card-bar-gap    条子距内容的距离（= body 的 gap）\n     --card-bar-length 上下方位时的条长（100% = 跟内容同宽）\n   这些变量只在本文件消费（3 份文件一起引时，跨文件引用别处的变量会静默失效），\n   所以默认值必须写在这里，而不是令牌或别的皮肤里。 */\n.dshpc-card{\n  --card-accent:var(--dshpc-business);\n  --card-accent-soft:var(--dshpc-business-soft);\n  --card-bar-size:6px;\n  --card-bar-inset:12px;\n  --card-bar-gap:12px;\n  --card-bar-length:100%;\n  /* 内距四根轴是唯一真源：根节点自己不留 padding，__body 与 __panel 都只读这四根轴。\n     这样 __body 就是「上面那一整块」，hover 铺色边到边，连原本那圈外圈一起变。\n     --card-pad-all 只是四轴的组合值，消费端 style.padding 由 Card.ts 摊成四根轴后自动派生。 */\n  --card-pad-t:14px;--card-pad-r:14px;--card-pad-b:14px;--card-pad-l:14px;\n  --card-pad-all:var(--card-pad-t) var(--card-pad-r) var(--card-pad-b) var(--card-pad-l);\n  padding:0;\n  /* 头部区背景铺满根节点内容盒，由根节点统一裁成外框圆角；__body 自己不写圆角裸值。 */\n  overflow:hidden;\n}\n/* 档位 → token（照 records-timeline 的 tone 模式：一个变量切档，不写 5 套规则；浅底与色条同源）。 */\n.dshpc-card--success{--card-accent:var(--dshpc-success);--card-accent-soft:var(--dshpc-success-soft)}\n.dshpc-card--warning{--card-accent:var(--dshpc-warning);--card-accent-soft:var(--dshpc-warning-soft)}\n.dshpc-card--danger{--card-accent:var(--dshpc-danger);--card-accent-soft:var(--dshpc-danger-soft)}\n/* neutral 浅底借 chip 底（兄弟项目 mute 档同款：明暗都成立）。 */\n.dshpc-card--neutral{--card-accent:var(--dshpc-fg-4);--card-accent-soft:var(--dshpc-chip-bg)}\n/* 扩展八色（2026-10-29）：色条 + 浅底同源，软底走各自 -soft。 */\n.dshpc-card--purple{--card-accent:var(--dshpc-purple);--card-accent-soft:var(--dshpc-purple-soft)}\n.dshpc-card--pink{--card-accent:var(--dshpc-pink);--card-accent-soft:var(--dshpc-pink-soft)}\n.dshpc-card--cyan{--card-accent:var(--dshpc-cyan);--card-accent-soft:var(--dshpc-cyan-soft)}\n.dshpc-card--teal{--card-accent:var(--dshpc-teal);--card-accent-soft:var(--dshpc-teal-soft)}\n.dshpc-card--orange{--card-accent:var(--dshpc-orange);--card-accent-soft:var(--dshpc-orange-soft)}\n.dshpc-card--indigo{--card-accent:var(--dshpc-indigo);--card-accent-soft:var(--dshpc-indigo-soft)}\n.dshpc-card--rose{--card-accent:var(--dshpc-rose);--card-accent-soft:var(--dshpc-rose-soft)}\n.dshpc-card--slate{--card-accent:var(--dshpc-slate);--card-accent-soft:var(--dshpc-slate-soft)}\n\n/* body = 色条 + 头部，也是「上面那一整块」：它自己承担内距并铺满根节点内容盒，\n   是 head 作用域下唯一的 hover 目标。圆角由根节点 overflow 裁切 ⇒ hover 色不露方角。\n   --card-pad-all 由四根轴派生；消费端 style.padding 覆盖四轴后，头部区与展开区同步对齐。\n   方向跟着条子贴的边切 ⇒ 四个方位只是「换一个方向的 flex 项」，不用各写一套定位。 */\n.dshpc-card__body{\n  display:flex;gap:var(--card-bar-gap);min-width:0;\n  padding:var(--card-pad-all);\n  background:transparent;\n}\n.dshpc-card--bar-top .dshpc-card__body,\n.dshpc-card--bar-bottom .dshpc-card__body{flex-direction:column}\n/* 展开态不特殊处理内距：头部区上下留白始终对称，色条上下才不会一长一短。\n   两块之间的间隔就是 __body 的 padding-bottom，属于头部区、跟着一起变色；\n   __panel 紧接其后，不在中间留一条不变色的带子，也不画分隔线。 */\n\n/* 头部一行 = 主内容 + 右侧槽，**整体垂直居中**：调用方在 action 里裸放一个元素\n   （按钮 / 文字 / 图标）不用自己套容器居中；一行两行、右边怎么放由调用方在框内自定。 */\n.dshpc-card__head{display:flex;align-items:center;gap:8px;min-width:0}\n.dshpc-card--bar-left .dshpc-card__head,\n.dshpc-card--bar-right .dshpc-card__head{flex:1 1 auto}\n.dshpc-card__main{flex:1;min-width:0}\n.dshpc-card__side{display:flex;align-items:center;gap:6px;flex:none}\n\n/* 色条：左/右 = 竖向条（高度跟内容，最小一行）；上/下 = 横向条（长度默认跟内容同宽）。\n   右/下方位靠 order 排到头部之后，DOM 顺序始终不变。 */\n.dshpc-card__bar{flex:none;background:var(--card-accent);border-radius:var(--dshpc-radius-xs)}\n.dshpc-card--bar-left .dshpc-card__bar,\n.dshpc-card--bar-right .dshpc-card__bar{width:var(--card-bar-size);align-self:stretch;min-height:var(--dshpc-line-md)}\n.dshpc-card--bar-top .dshpc-card__bar,\n.dshpc-card--bar-bottom .dshpc-card__bar{width:var(--card-bar-length);height:var(--card-bar-size);align-self:flex-start}\n.dshpc-card--bar-right .dshpc-card__bar,\n.dshpc-card--bar-bottom .dshpc-card__bar{order:1}\n\n/* ── 外观一 · StripCard：同色系浅底 + 1px 不可见占位边框 + 方角 + 4px 通高方角色条贴左缘 ──\n   底色 / 方角 / 占位边框由 Surface 的三条修饰类提供（Card.ts 按 kind 传），此处只管内距与条子。 */\n.dshpc-card.dshpc-card--strip{\n  --card-bar-size:4px;--card-bar-inset:0;\n  --card-pad-t:12px;--card-pad-r:12px;--card-pad-b:12px;--card-pad-l:20px;\n  /* 底色改走 Surface 的 --surface-bg 变量（surface.css:7-8 契约）：不能写 background 属性，\n     否则透明档要覆盖时会被属性层打架（兄弟项目曾用 background-image 渐变绕过）。 */\n  --surface-bg:var(--card-accent-soft,transparent);\n}\n/* 左内边距 20px = 16 留白 + 4 条宽 ⇒ 内容从色条右缘起算；色条绝对定位通高，跟着内容高度自适应。\n   定位基准是根节点的 position:relative（Surface 提供），top:0 / bottom:0 因此是整卡通高：\n   展开后色条仍一路贯穿到展开区底部，不随 head 分区被裁短（2026-11-08 拍板）。\n   特异性 0,3,0：压过上面 .dshpc-card--bar-left .dshpc-card__bar 的宽度规则，与注入顺序无关。 */\n.dshpc-card.dshpc-card--strip .dshpc-card__bar{position:absolute;left:0;top:0;bottom:0;width:4px;align-self:auto}\n\n/* ── 外观二 · Card：色条贴边那一侧的内距 = 条子距边缘的距离 ──\n   四方位只改对应那根 --card-pad-* 变量，__body 与 __panel 同时跟着对齐。 */\n.dshpc-card--bar-left{--card-pad-l:var(--card-bar-inset)}\n.dshpc-card--bar-right{--card-pad-r:var(--card-bar-inset)}\n.dshpc-card--bar-top{--card-pad-t:var(--card-bar-inset)}\n.dshpc-card--bar-bottom{--card-pad-b:var(--card-bar-inset)}\n\n/* ── 外观轴（2026-11-07）：底色开关 + hover 作用域 ───────────────────────────\n   两块区域各自独立：根节点只铺一层常态底（--surface-bg）；__body 是「上面那一整块」，\n   __panel 是它的兄弟节点，不铺任何背景、不参与 hover。\n   hoverScope（默认 head）：\n     head —— 只有 __body 铺 --dshpc-card-hover，边到边（内距圈 + 圆角都在这一块上）；\n             展开态也不改内距，上下两圈留白同属这一块、一起变色，色条上下才对称；\n             鼠标落在 __panel 时 :hover 根本不成立 ⇒ 整卡不触发，下面永远是常态。\n     card —— 根节点改 --surface-bg，整卡含展开区一起变色，由消费端显式选。\n   ⚠️ 绝不用「给展开区铺一层底色去盖住根节点」：半透明 token 叠两层会更深（真踩过）。 */\n.dshpc-card.dshpc-card--no-fill{--surface-bg:transparent}\n/* 开关打开即声明「上面那一块可交互」：手势跟着变，展开区还原成默认光标。 */\n.dshpc-card.dshpc-card--hoverable{cursor:pointer}\n.dshpc-card.dshpc-card--hover-head .dshpc-card__panel{cursor:auto}\n/* 可点卡片的键盘焦点环：点击层 head = __body、card = 根节点，两者共用这一条。\n   outline 画在盒内（offset 负值）：根节点 overflow:hidden 会裁掉 __body 外侧那一圈。 */\n.dshpc-card__hit:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-2px}\n/* 顺序即优先级：strip 浅底 / no-fill 透明(0,2,0) → card:hover(0,3,0，最高)。 */\n.dshpc-card.dshpc-card--hover-head .dshpc-card__body:hover{background:var(--dshpc-card-hover)}\n.dshpc-card.dshpc-card--hover-card:hover{--surface-bg:var(--dshpc-card-hover)}\n\n.dshpc-card__toggle{\n  display:inline-flex;align-items:center;justify-content:center;\n  width:24px;height:24px;padding:0;background:none;border:none;border-radius:var(--dshpc-radius-sm);\n  color:var(--dshpc-fg-3);cursor:pointer;\n}\n.dshpc-card__toggle:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n/* 箭头是 svg（Chevron），不是字形 ⇒ 不要 font-size；inline-flex 免掉 svg 的基线留白。 */\n.dshpc-card__caret{display:inline-flex;transition:transform .15s ease}\n.dshpc-card__caret.is-open{transform:rotate(180deg)}\n/* 展开区只负责「把展开内容放在头部区下面」：自己承担左右 / 底部内距，补上卡片底部留白。\n   margin-top 与 padding-top 双双归 0 ⇒ 两块之间的间隔只有 __body 的 padding-bottom，\n   属于头部区、跟着 hover 一起变色；消费端自绘的线因此能贴住这块色的下沿，中间不夹不变色的带子。\n   左右 / 底部内距读同一组四轴变量 ⇒ 与头部区同源，不会左贴边、右留白。\n   核心不画任何分隔线：需要线由消费端在 panel 内容里自绘（有时要、有时不要，消费端自己决定）。 */\n.dshpc-card__panel{\n  margin:0 var(--card-pad-r) 0 var(--card-pad-l);\n  padding:0 0 var(--card-pad-b);\n}\n";
 //# sourceMappingURL=card-css.generated.js.map

package/dist/ui/display/card-css.generated.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-css.generated.js","sourceRoot":"","sources":["../../../src/ui/display/card-css.generated.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,qEAAqE;AACrE,MAAM,CAAC,MAAM,QAAQ,GAAG,4kOAA4kO,CAAA"}
+{"version":3,"file":"card-css.generated.js","sourceRoot":"","sources":["../../../src/ui/display/card-css.generated.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,qEAAqE;AACrE,MAAM,CAAC,MAAM,QAAQ,GAAG,gyOAAgyO,CAAA"}

package/docs/help/ui.doc.ts

@@ -28,7 +28,8 @@ const cardExample = `import { Card, Chip, StripCard } from 'dsh-plugin-core/ui'
 h(Card, {
   accent: 'warning',
   bar: { side: 'left', inset: 12, gap: 12 },   // 色条可放 left / right / top / bottom
-  hoverable: true,                             // 头部区整块悬停变色（默认关）
+  // 传 onClick 才让卡片可点；hover 默认跟着它开，不用再手写光标与 :hover
+  onClick: () => openTask(id),
   action: h(Button, { size: 'sm', variant: 'ghost' }, '跳过'),
 },
   h('div', null, '标题'),
@@ -639,12 +640,16 @@ const doc: DocTopic = {
           en: 'The header centers vertically as a whole; drop a bare element into `action` and it centers. Colors come from tokens, so light/dark follows the host.',
         },
         {
-          zh: '`hoverable` 开启后悬停变色、同时把光标改成 `pointer`，统一吃 `--dshpc-card-hover`（亮 7% 蓝 / 暗 13% 蓝），默认关；`filled` 切底色，默认有底（Card = surface-1，StripCard = accent 浅底），`false` 时底透明但边框仍在。两根轴都只改 `--surface-bg`，插件不用再自己写 `:hover` 规则。',
-          en: '`hoverable` (default off) changes the fill on hover and switches the cursor to `pointer`, using `--dshpc-card-hover` (7% blue light / 13% blue dark). `filled` (default on) controls the background — Card uses surface-1, StripCard the accent tint; `false` makes it transparent but keeps the border. Both axes only rewrite `--surface-bg`, so plugins no longer need their own `:hover` rules.',
+          zh: '`hoverable` 开启后悬停变色、同时把光标改成 `pointer`，统一吃 `--dshpc-card-hover`（亮 7% 蓝 / 暗 13% 蓝）；默认跟随 `onClick`（给了点击回调即自动开），可显式传 `false` 关掉；`filled` 切底色，默认有底（Card = surface-1，StripCard = accent 浅底），`false` 时底透明但边框仍在。两根轴都只改 `--surface-bg`，插件不用再自己写 `:hover` 规则。',
+          en: "`hoverable` changes the fill on hover and switches the cursor to `pointer`, using `--dshpc-card-hover` (7% blue light / 13% blue dark). It defaults to on when `onClick` is provided, and can be turned off explicitly. `filled` (default on) controls the background — Card uses surface-1, StripCard the accent tint; `false` makes it transparent but keeps the border. Both axes only rewrite `--surface-bg`, so plugins no longer need their own `:hover` rules.",
         },
         {
-          zh: '展开的卡片用 `hoverScope` 选作用域，默认 `\'head\'`：根节点零内距并统一裁圆角，`__body` 作为「上面那一整块」独立承担内距、边到边变色；展开态不改内距，上下两圈留白对称，两块之间的间隔也属于头部区、跟着一起变色；`__panel` 是它的兄弟节点，不铺背景、不画分隔线、不参与 hover，鼠标在展开区里操作时整卡都不触发；需要分隔线时由调用方在 `panel` 内容里自绘。展开区的 `margin-top` 与 `padding-top` 都是 0，自绘线紧贴头部区下沿、中间不夹不变色的带子；四根 `--card-pad-t/r/b/l` 是内距唯一真源，`style.padding` 会摊成这四根轴，头部区与展开区左右始终对称。StripCard 的通高色条相对根节点定位，展开后仍贯穿整卡（包括展开区）。想要整卡含展开区一起变色，才显式传 `\'card\'`。**展开内容必须放进 `panel`**（`children` 属于头部区），核心才有分区信号。',
-          en: 'For expandable cards, `hoverScope` selects the scope. The default `\'head\'` gives the root zero padding and clips the radius, while `__body` — the header block owning all padding — changes color edge to edge; expanding keeps its top and bottom padding symmetric, so the gap between the two blocks changes color too. `__panel` is a sibling with no background, no divider and no hover, so operating inside the expanded area triggers nothing; draw a divider inside `panel` content yourself when you need one. Both `margin-top` and `padding-top` on the expanded area are 0, so a caller-drawn line sits flush against the header with no uncoloured strip between them. The four `--card-pad-t/r/b/l` axes are the single source of padding truth: `style.padding` expands into them, keeping the header and expanded area symmetric. The StripCard rail is positioned against the root and stays full-height across the expanded area. Pass `\'card\'` explicitly to include it. **Expandable content must go into `panel`**; `children` belongs to the header block.',
+          zh: '展开的卡片用 `hoverScope` 选作用域，默认 `\'head\'`：根节点零内距并统一裁圆角，`__body` 作为「上面那一整块」独立承担内距、边到边变色；展开态不改内距，上下两圈留白对称，两块之间的间隔也属于头部区、跟着一起变色；`__panel` 是它的兄弟节点，不铺背景、不画分隔线、不参与 hover；默认作用域下鼠标在展开区里操作既不变色也不触发点击（点击契约见下段）；需要分隔线时由调用方在 `panel` 内容里自绘。展开区的 `margin-top` 与 `padding-top` 都是 0，自绘线紧贴头部区下沿、中间不夹不变色的带子；四根 `--card-pad-t/r/b/l` 是内距唯一真源，`style.padding` 会摊成这四根轴，头部区与展开区左右始终对称。StripCard 的通高色条相对根节点定位，展开后仍贯穿整卡（包括展开区）。想要整卡含展开区一起变色，才显式传 `\'card\'`。**展开内容必须放进 `panel`**（`children` 属于头部区），核心才有分区信号。',
+          en: 'For expandable cards, `hoverScope` selects the scope. The default `\'head\'` gives the root zero padding and clips the radius, while `__body` — the header block owning all padding — changes color edge to edge; expanding keeps its top and bottom padding symmetric, so the gap between the two blocks changes color too. `__panel` is a sibling with no background, no divider and no hover, so in the default scope operating inside the expanded area neither changes color nor triggers a click (see the click contract below); draw a divider inside `panel` content yourself when you need one. Both `margin-top` and `padding-top` on the expanded area are 0, so a caller-drawn line sits flush against the header with no uncoloured strip between them. The four `--card-pad-t/r/b/l` axes are the single source of padding truth: `style.padding` expands into them, keeping the header and expanded area symmetric. The StripCard rail is positioned against the root and stays full-height across the expanded area. Pass `\'card\'` explicitly to include it. **Expandable content must go into `panel`**; `children` belongs to the header block.',
+        },
+        {
+          zh: '`onClick` 让整块卡片可点，命中范围与 `hoverScope` 完全一致：默认 `head` 时点击层是 `__body`（内距圈四边都在里面），展开区 `__panel` 是它的兄弟节点、不绑任何事件，里面拖选复制也不受影响；显式 `card` 时点击层上提到根节点，整卡含展开区都响应。点击层拿 `role="button"`、`tabIndex=0` 与 Enter / Space，并有键盘焦点环；刻意不渲染成 `<button>`，因为调用方要在里面放按钮。`action` 与 `onToggle` 折叠箭头同在右侧槽，一层挡住冒泡，不会连带触发。不传 `onClick` 时外观与行为完全不变。',
+          en: '`onClick` makes the whole card clickable over exactly the same area as `hoverScope`: with the default `head`, the hit layer is `__body` (all four padding edges included), while `__panel` is its sibling with no handlers at all, so text selection inside the expanded area is untouched. With explicit `card`, the hit layer moves up to the root and the expanded area responds too. The hit layer gets `role="button"`, `tabIndex=0`, Enter / Space and a keyboard focus ring. It is deliberately not a `<button>`, because callers put buttons inside. `action` and the `onToggle` arrow share the right-hand slot, which stops propagation so they never trigger the card. Without `onClick`, appearance and behaviour are unchanged.',
         },
       ],
       api: [
@@ -658,8 +663,9 @@ const doc: DocTopic = {
             { name: 'action', type: 'ReactNode', def: '—', desc: { zh: '右上角操作区', en: 'Top-right action area' } },
             { name: 'children', type: 'ReactNode', def: '—', desc: { zh: '主内容，排版随你', en: 'Main content, layout is yours' } },
             { name: 'panel', type: 'ReactNode', def: '—', desc: { zh: '展开后才显示的额外内容；必须放这里，核心才能把展开区与头部区分开', en: 'Extra content shown only when expanded; must live here so the core can separate it from the header' } },
-            { name: 'hoverable', type: 'boolean', def: "'false'", desc: { zh: '悬停变色 + 光标变 pointer，统一 --dshpc-card-hover；默认关', en: 'Hover color plus a pointer cursor, using --dshpc-card-hover; default off' } },
-            { name: 'hoverScope', type: "'head' | 'card'", def: "'head'", desc: { zh: "'head'（默认）只让上面头部区整块边到边变色、展开区不受影响；'card' 整卡含展开区一起变色。仅 hoverable 为 true 时生效", en: "'head' (default) changes only the header block and leaves the expanded area untouched; 'card' includes it. Applies only when hoverable is true" } },
+            { name: 'onClick', type: '() => void', def: '—', desc: { zh: '传了才让卡片可点：命中范围同 hoverScope，点击层挂 role=button / tabIndex / Enter·Space；action 与折叠箭头不连带触发；hover 默认跟着开', en: 'Makes the card clickable. Hit area follows hoverScope; the hit layer gets role=button, tabIndex and Enter/Space; action and the collapse arrow never bubble into it; hover turns on by default' } },
+            { name: 'hoverable', type: 'boolean', def: '跟随 onClick', desc: { zh: '悬停变色 + 光标变 pointer，统一 --dshpc-card-hover；可显式传 false 关掉', en: 'Hover color plus a pointer cursor, using --dshpc-card-hover; defaults to on when onClick is set, pass false to disable' } },
+            { name: 'hoverScope', type: "'head' | 'card'", def: "'head'", desc: { zh: "'head'（默认）只有头部区变色并可点、展开区完全不受影响；'card' 整卡含展开区一起变色、一起可点。变色只在 hover 开时生效", en: "'head' (default) limits both color and clicks to the header block, leaving the expanded area untouched; 'card' includes it in both. Color applies only when hover is on" } },
             { name: 'filled', type: 'boolean', def: "'true'", desc: { zh: '是否带底色；false 时底透明、边框仍在。默认有底（Card = surface-1 / StripCard = accent 浅底）', en: 'Background fill; false makes it transparent while keeping the border. Default on (Card = surface-1 / StripCard = accent tint)' } },
             { name: 'className / style', type: '—', def: '—', desc: { zh: '追加类 / 样式；`style.padding` 摊成四根内距轴，同步头部区与展开区', en: 'Append class / style; `style.padding` expands into the four padding axes so the header and expanded area stay aligned' } },
           ],

package/docs/help/ui.md

@@ -369,13 +369,17 @@ h(Surface, { tone: 'sunken', border: 'dashed', padding: 'lg' }, '还没做的东
 
 > EN: The header centers vertically as a whole; drop a bare element into `action` and it centers. Colors come from tokens, so light/dark follows the host.
 
-`hoverable` 开启后悬停变色、同时把光标改成 `pointer`，统一吃 `--dshpc-card-hover`（亮 7% 蓝 / 暗 13% 蓝），默认关；`filled` 切底色，默认有底（Card = surface-1，StripCard = accent 浅底），`false` 时底透明但边框仍在。两根轴都只改 `--surface-bg`，插件不用再自己写 `:hover` 规则。
+`hoverable` 开启后悬停变色、同时把光标改成 `pointer`，统一吃 `--dshpc-card-hover`（亮 7% 蓝 / 暗 13% 蓝）；默认跟随 `onClick`（给了点击回调即自动开），可显式传 `false` 关掉；`filled` 切底色，默认有底（Card = surface-1，StripCard = accent 浅底），`false` 时底透明但边框仍在。两根轴都只改 `--surface-bg`，插件不用再自己写 `:hover` 规则。
 
-> EN: `hoverable` (default off) changes the fill on hover and switches the cursor to `pointer`, using `--dshpc-card-hover` (7% blue light / 13% blue dark). `filled` (default on) controls the background — Card uses surface-1, StripCard the accent tint; `false` makes it transparent but keeps the border. Both axes only rewrite `--surface-bg`, so plugins no longer need their own `:hover` rules.
+> EN: `hoverable` changes the fill on hover and switches the cursor to `pointer`, using `--dshpc-card-hover` (7% blue light / 13% blue dark). It defaults to on when `onClick` is provided, and can be turned off explicitly. `filled` (default on) controls the background — Card uses surface-1, StripCard the accent tint; `false` makes it transparent but keeps the border. Both axes only rewrite `--surface-bg`, so plugins no longer need their own `:hover` rules.
 
-展开的卡片用 `hoverScope` 选作用域，默认 `'head'`：根节点零内距并统一裁圆角，`__body` 作为「上面那一整块」独立承担内距、边到边变色；展开态不改内距，上下两圈留白对称，两块之间的间隔也属于头部区、跟着一起变色；`__panel` 是它的兄弟节点，不铺背景、不画分隔线、不参与 hover，鼠标在展开区里操作时整卡都不触发；需要分隔线时由调用方在 `panel` 内容里自绘。展开区的 `margin-top` 与 `padding-top` 都是 0，自绘线紧贴头部区下沿、中间不夹不变色的带子；四根 `--card-pad-t/r/b/l` 是内距唯一真源，`style.padding` 会摊成这四根轴，头部区与展开区左右始终对称。StripCard 的通高色条相对根节点定位，展开后仍贯穿整卡（包括展开区）。想要整卡含展开区一起变色，才显式传 `'card'`。**展开内容必须放进 `panel`**（`children` 属于头部区），核心才有分区信号。
+展开的卡片用 `hoverScope` 选作用域，默认 `'head'`：根节点零内距并统一裁圆角，`__body` 作为「上面那一整块」独立承担内距、边到边变色；展开态不改内距，上下两圈留白对称，两块之间的间隔也属于头部区、跟着一起变色；`__panel` 是它的兄弟节点，不铺背景、不画分隔线、不参与 hover；默认作用域下鼠标在展开区里操作既不变色也不触发点击（点击契约见下段）；需要分隔线时由调用方在 `panel` 内容里自绘。展开区的 `margin-top` 与 `padding-top` 都是 0，自绘线紧贴头部区下沿、中间不夹不变色的带子；四根 `--card-pad-t/r/b/l` 是内距唯一真源，`style.padding` 会摊成这四根轴，头部区与展开区左右始终对称。StripCard 的通高色条相对根节点定位，展开后仍贯穿整卡（包括展开区）。想要整卡含展开区一起变色，才显式传 `'card'`。**展开内容必须放进 `panel`**（`children` 属于头部区），核心才有分区信号。
 
-> EN: For expandable cards, `hoverScope` selects the scope. The default `'head'` gives the root zero padding and clips the radius, while `__body` — the header block owning all padding — changes color edge to edge; expanding keeps its top and bottom padding symmetric, so the gap between the two blocks changes color too. `__panel` is a sibling with no background, no divider and no hover, so operating inside the expanded area triggers nothing; draw a divider inside `panel` content yourself when you need one. Both `margin-top` and `padding-top` on the expanded area are 0, so a caller-drawn line sits flush against the header with no uncoloured strip between them. The four `--card-pad-t/r/b/l` axes are the single source of padding truth: `style.padding` expands into them, keeping the header and expanded area symmetric. The StripCard rail is positioned against the root and stays full-height across the expanded area. Pass `'card'` explicitly to include it. **Expandable content must go into `panel`**; `children` belongs to the header block.
+> EN: For expandable cards, `hoverScope` selects the scope. The default `'head'` gives the root zero padding and clips the radius, while `__body` — the header block owning all padding — changes color edge to edge; expanding keeps its top and bottom padding symmetric, so the gap between the two blocks changes color too. `__panel` is a sibling with no background, no divider and no hover, so in the default scope operating inside the expanded area neither changes color nor triggers a click (see the click contract below); draw a divider inside `panel` content yourself when you need one. Both `margin-top` and `padding-top` on the expanded area are 0, so a caller-drawn line sits flush against the header with no uncoloured strip between them. The four `--card-pad-t/r/b/l` axes are the single source of padding truth: `style.padding` expands into them, keeping the header and expanded area symmetric. The StripCard rail is positioned against the root and stays full-height across the expanded area. Pass `'card'` explicitly to include it. **Expandable content must go into `panel`**; `children` belongs to the header block.
+
+`onClick` 让整块卡片可点，命中范围与 `hoverScope` 完全一致：默认 `head` 时点击层是 `__body`（内距圈四边都在里面），展开区 `__panel` 是它的兄弟节点、不绑任何事件，里面拖选复制也不受影响；显式 `card` 时点击层上提到根节点，整卡含展开区都响应。点击层拿 `role="button"`、`tabIndex=0` 与 Enter / Space，并有键盘焦点环；刻意不渲染成 `<button>`，因为调用方要在里面放按钮。`action` 与 `onToggle` 折叠箭头同在右侧槽，一层挡住冒泡，不会连带触发。不传 `onClick` 时外观与行为完全不变。
+
+> EN: `onClick` makes the whole card clickable over exactly the same area as `hoverScope`: with the default `head`, the hit layer is `__body` (all four padding edges included), while `__panel` is its sibling with no handlers at all, so text selection inside the expanded area is untouched. With explicit `card`, the hit layer moves up to the root and the expanded area responds too. The hit layer gets `role="button"`, `tabIndex=0`, Enter / Space and a keyboard focus ring. It is deliberately not a `<button>`, because callers put buttons inside. `action` and the `onToggle` arrow share the right-hand slot, which stops propagation so they never trigger the card. Without `onClick`, appearance and behaviour are unchanged.
 
 | 参数 | 类型 | 默认 | 说明(zh) | 说明(en) |
 |---|---|---|---|---|
@@ -386,8 +390,9 @@ h(Surface, { tone: 'sunken', border: 'dashed', padding: 'lg' }, '还没做的东
 | `action` | `ReactNode` | — | 右上角操作区 | Top-right action area |
 | `children` | `ReactNode` | — | 主内容，排版随你 | Main content, layout is yours |
 | `panel` | `ReactNode` | — | 展开后才显示的额外内容；必须放这里，核心才能把展开区与头部区分开 | Extra content shown only when expanded; must live here so the core can separate it from the header |
-| `hoverable` | `boolean` | 'false' | 悬停变色 + 光标变 pointer，统一 --dshpc-card-hover；默认关 | Hover color plus a pointer cursor, using --dshpc-card-hover; default off |
-| `hoverScope` | `'head' \| 'card'` | 'head' | 'head'（默认）只让上面头部区整块边到边变色、展开区不受影响；'card' 整卡含展开区一起变色。仅 hoverable 为 true 时生效 | 'head' (default) changes only the header block and leaves the expanded area untouched; 'card' includes it. Applies only when hoverable is true |
+| `onClick` | `() => void` | — | 传了才让卡片可点：命中范围同 hoverScope，点击层挂 role=button / tabIndex / Enter·Space；action 与折叠箭头不连带触发；hover 默认跟着开 | Makes the card clickable. Hit area follows hoverScope; the hit layer gets role=button, tabIndex and Enter/Space; action and the collapse arrow never bubble into it; hover turns on by default |
+| `hoverable` | `boolean` | 跟随 onClick | 悬停变色 + 光标变 pointer，统一 --dshpc-card-hover；可显式传 false 关掉 | Hover color plus a pointer cursor, using --dshpc-card-hover; defaults to on when onClick is set, pass false to disable |
+| `hoverScope` | `'head' \| 'card'` | 'head' | 'head'（默认）只有头部区变色并可点、展开区完全不受影响；'card' 整卡含展开区一起变色、一起可点。变色只在 hover 开时生效 | 'head' (default) limits both color and clicks to the header block, leaving the expanded area untouched; 'card' includes it in both. Color applies only when hover is on |
 | `filled` | `boolean` | 'true' | 是否带底色；false 时底透明、边框仍在。默认有底（Card = surface-1 / StripCard = accent 浅底） | Background fill; false makes it transparent while keeping the border. Default on (Card = surface-1 / StripCard = accent tint) |
 | `className / style` | `—` | — | 追加类 / 样式；`style.padding` 摊成四根内距轴，同步头部区与展开区 | Append class / style; `style.padding` expands into the four padding axes so the header and expanded area stay aligned |
 
@@ -397,7 +402,8 @@ import { Card, Chip, StripCard } from 'dsh-plugin-core/ui'
 h(Card, {
   accent: 'warning',
   bar: { side: 'left', inset: 12, gap: 12 },   // 色条可放 left / right / top / bottom
-  hoverable: true,                             // 头部区整块悬停变色（默认关）
+  // 传 onClick 才让卡片可点；hover 默认跟着它开，不用再手写光标与 :hover
+  onClick: () => openTask(id),
   action: h(Button, { size: 'sm', variant: 'ghost' }, '跳过'),
 },
   h('div', null, '标题'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-plugin-core",
-  "version": "0.35.9",
+  "version": "0.35.10",
   "packageManager": "pnpm@12.3.4",
   "description": "Shared base for DSH plugins: design tokens, UI controls, utils, workspace explorer, session preview",
   "keywords": [