dsh-plugin-core 0.31.0 → 0.33.0

package/dist/ui/display/FlipText.js

@@ -0,0 +1,59 @@
+/**
+ * 翻牌文本 —— 一行文字，换字时旧的上移出、新的从下进（机场翻牌那种）。
+ *
+ * 与 `MarqueeText` 的分工：跑马灯（三点省略 + hover 滚）由它负责，本组件只管「换字动效 + 裁剪」，
+ * 所以两层叠放的每一层就是一个 `MarqueeText`，不重复实现测宽。
+ *
+ * 宽度三档与 `Button` / `Chip` 同一口径：`width` 优先，`width` 未设时 `minWidth` / `maxWidth` 生效。
+ * 全不传 = 随父容器（flex 子项自然伸缩），这也是弹窗 footer 里的用法。
+ *
+ * 空串 = 没有文案：不渲染、不占位。所以「同一块地方复用」时传 `''` 就把上一句清干净了，
+ * 之后第一次给值是从无到有，直接出现（没有上一句可翻）。
+ */
+import { createElement as h, useEffect, useState } from 'react';
+import { ensureComponentStyles } from '../infra/css.js';
+import { FLIP_CSS } from './flip-css.js';
+import { MarqueeText } from './MarqueeText.js';
+/** 与 flip.css 的 --dshpc-flip-dur（260ms）对齐，留一点余量给慢帧。 */
+const FLIP_MS = 300;
+/**
+ * 换字推导：文本没变原样返回（同一句重复设置不重播）；变了把当前帧降为上一帧、seq+1。
+ * 上一帧是空串 ⇒ 不设 prev：第一句直接出现，不从下方翻上来。
+ */
+export function nextFlipSlot(slot, text) {
+    if (slot.curr === text)
+        return slot;
+    return { curr: text, prev: slot.curr === '' ? null : slot.curr, seq: slot.seq + 1 };
+}
+export function FlipText(props) {
+    ensureComponentStyles('flip', FLIP_CSS);
+    const [slot, setSlot] = useState({ curr: props.text, prev: null, seq: 0 });
+    // 换字在 render 期调整（React 官方推荐的「props 变了就调 state」写法）：
+    // 同一次渲染就带上新值，不会先按旧帧画一屏再动画。
+    const next = nextFlipSlot(slot, props.text);
+    if (next !== slot)
+        setSlot(next);
+    // 旧帧到点就摘。用定时器而不是 animationend：reduced-motion 下动画被关掉，
+    // 事件永远不会来，旧帧会一直压在新帧上（同格叠放，两层都可见）。
+    useEffect(() => {
+        if (slot.prev === null)
+            return undefined;
+        const id = window.setTimeout(() => setSlot((s) => (s.prev === null ? s : { ...s, prev: null })), FLIP_MS);
+        return () => window.clearTimeout(id);
+    }, [slot.seq, slot.prev]);
+    if (props.text === '')
+        return null;
+    const style = props.width !== undefined
+        ? { width: props.width }
+        : { minWidth: props.minWidth, maxWidth: props.maxWidth };
+    const item = 'dshpc-flip__item';
+    const root = `dshpc-flip${props.sweep === true ? ' dshpc-flip--sweep' : ''}${props.className === undefined ? '' : ` ${props.className}`}`;
+    return h('span', { className: root, style }, 
+    // 旧帧：只在换字后存在，到点摘掉
+    slot.prev === null
+        ? null
+        : h('span', { key: `p${String(slot.seq)}`, className: `${item} dshpc-flip__out` }, h(MarqueeText, { text: slot.prev })), 
+    // 新帧：没有上一帧（首帧 / 从无到有）不放动画
+    h('span', { key: `c${String(slot.seq)}`, className: slot.prev === null ? item : `${item} dshpc-flip__in` }, h(MarqueeText, { text: slot.curr })));
+}
+//# sourceMappingURL=FlipText.js.map

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

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

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

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+/**
+ * 每秒自刷新的一小块：只有它自己重渲染（`render` 永远取最新闭包，ref 转发）。
+ * 2026-09-30（决策 54）：`render` 由「只能返回字符串」放宽为**可返回节点** —— 「到点未派发」
+ * 时要在这里就地换成三个方块的活动指示（文案换不出来，只能给节点）。
+ */
+export declare function LiveText(props: {
+    render: (nowMs: number) => ReactNode;
+    style?: Record<string, string | number>;
+}): import("react").DetailedReactHTMLElement<{
+    style: Record<string, string | number> | undefined;
+}, HTMLElement>;
+//# sourceMappingURL=LiveText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LiveText.d.ts","sourceRoot":"","sources":["../../../src/ui/display/LiveText.ts"],"names":[],"mappings":"AAIA,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGvF;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;CAAE;;gBAMhH"}

package/dist/ui/display/LiveText.js

@@ -0,0 +1,19 @@
+// LiveText.tsx — 每秒自刷新的一小块内容（全局心跳的渲染壳）；心跳本体见 `./ticker`。
+//
+// 从 `task-info.tsx` 归位到 `ui/`（design/client-refresh-disposition.md §三 A2）：它是**基础层组件**，
+// 不该住在某个面板文件里被别的页面反向 import。
+import { createElement as h, useEffect, useRef, useState } from 'react';
+import { subscribeTicker } from '../infra/ticker.js';
+/**
+ * 每秒自刷新的一小块：只有它自己重渲染（`render` 永远取最新闭包，ref 转发）。
+ * 2026-09-30（决策 54）：`render` 由「只能返回字符串」放宽为**可返回节点** —— 「到点未派发」
+ * 时要在这里就地换成三个方块的活动指示（文案换不出来，只能给节点）。
+ */
+export function LiveText(props) {
+    const [, force] = useState(0);
+    const renderRef = useRef(props.render);
+    renderRef.current = props.render;
+    useEffect(() => subscribeTicker(() => force(v => v + 1)), []);
+    return h('span', { style: props.style }, renderRef.current(Date.now()));
+}
+//# sourceMappingURL=LiveText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LiveText.js","sourceRoot":"","sources":["../../../src/ui/display/LiveText.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,EAAE;AACF,uFAAuF;AACvF,6BAA6B;AAC7B,OAAO,EAAE,aAAa,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAwF;IAC/G,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC7B,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IACtC,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAA;IAChC,SAAS,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;IAC7D,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;AACzE,CAAC"}

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

@@ -0,0 +1,22 @@
+/**
+ * 跑马灯文本 —— **全站唯一实现**（L2，P6 从 editor-fields 迁入 ui）
+ *
+ * 默认超长省略号；hover 且确实放不下时，来回滚动展示全名。自实现原因：官方 primitives 无跑马灯组件。
+ * 测宽用 ResizeObserver + 文本变化重测；滚动距离 0 时不启用 hover 动画（`.dshpc-mq-run` 才有动画）。
+ *
+ * **双层结构**：外层 `.dshpc-mq` 只负责裁剪（overflow:hidden），内层 `.dshpc-mq-in` 才做
+ * transform 滚动——文字永远在自己那一块里跑，不会压到相邻文字。皮肤在 `controls-css.ts`。
+ */
+import { type CSSProperties, type ReactElement } from 'react';
+/** 跑马灯文本。 */
+export declare function MarqueeText(props: {
+    text: string;
+    style?: CSSProperties;
+    title?: string;
+    /**
+     * 追加在外层上的类名（**在 `.dshpc-mq` 之后**，用于调用方自带字体 / 字号 / 字色等皮肤）。
+     * 皮肤写在调用方自己的样式域里，本组件只管滚动；字体类挂外层即可（内层继承）。
+     */
+    className?: string;
+}): ReactElement;
+//# sourceMappingURL=MarqueeText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarqueeText.d.ts","sourceRoot":"","sources":["../../../src/ui/display/MarqueeText.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAiF,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAA;AAI5I,aAAa;AACb,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,YAAY,CAqCf"}

package/dist/ui/display/MarqueeText.js

@@ -0,0 +1,52 @@
+/**
+ * 跑马灯文本 —— **全站唯一实现**（L2，P6 从 editor-fields 迁入 ui）
+ *
+ * 默认超长省略号；hover 且确实放不下时，来回滚动展示全名。自实现原因：官方 primitives 无跑马灯组件。
+ * 测宽用 ResizeObserver + 文本变化重测；滚动距离 0 时不启用 hover 动画（`.dshpc-mq-run` 才有动画）。
+ *
+ * **双层结构**：外层 `.dshpc-mq` 只负责裁剪（overflow:hidden），内层 `.dshpc-mq-in` 才做
+ * transform 滚动——文字永远在自己那一块里跑，不会压到相邻文字。皮肤在 `controls-css.ts`。
+ */
+import { createElement as h, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { ensureComponentStyles } from '../infra/css.js';
+import { MARQUEE_CSS } from './marquee-css.js';
+/** 跑马灯文本。 */
+export function MarqueeText(props) {
+    ensureComponentStyles('marquee', MARQUEE_CSS);
+    const outerRef = useRef(null);
+    const innerRef = useRef(null);
+    const [dist, setDist] = useState(0);
+    const measure = useCallback(() => {
+        const outer = outerRef.current;
+        const inner = innerRef.current;
+        if (outer === null || inner === null)
+            return;
+        setDist(Math.max(0, Math.ceil(inner.scrollWidth - outer.clientWidth)));
+    }, []);
+    useLayoutEffect(() => {
+        const outer = outerRef.current;
+        const inner = innerRef.current;
+        if (outer === null || inner === null)
+            return;
+        measure();
+        const ro = new ResizeObserver(measure); // 抽屉拖宽变窄 / 字体就绪都会改 clientWidth ⇒ 重测
+        ro.observe(outer);
+        ro.observe(inner); // webfont 就绪只改 inner.scrollWidth 不改 outer.clientWidth，不观察就漏测（官方 PathLabel 同款双观察）
+        return () => { ro.disconnect(); };
+    }, [measure]);
+    useEffect(() => { measure(); }, [props.text, measure]);
+    const run = dist > 0;
+    return h('span', {
+        ref: outerRef,
+        className: (run ? 'dshpc-mq dshpc-mq-run' : 'dshpc-mq') + (props.className === undefined ? '' : ` ${props.className}`),
+        title: props.title,
+        style: props.style,
+    }, h('span', {
+        ref: innerRef,
+        className: 'dshpc-mq-in',
+        style: {
+            ...(run ? { '--dshpc-mq-dist': `${-dist}px`, '--dshpc-mq-dur': `${Math.max(3, Math.round(dist / 30))}s` } : null),
+        },
+    }, props.text));
+}
+//# sourceMappingURL=MarqueeText.js.map

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

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

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

@@ -0,0 +1,35 @@
+/**
+ * 模块标题行（UI 基础层）：**标签（可选，画出来的短竖线）/ icon（可选）+ 标题 + 右侧控件**。
+ *
+ * 2026-10-08 设置页重构时定型：每块 = 标题行 + 一块内容，标题行左侧 icon、右侧留给该块的控件
+ * （日志块的自动刷新 / 刷新钮，表查询块的表切换）。此前三个块各写一个 `h3`，形态不统一。
+ * 2026-10-30 增加 `accent`：标题前画一条固定样式的短竖线（4px 圆头），颜色可换、可关；
+ * 通栏表格标题也复用这一份标题样式（不再在 Table 里另画）。
+ *
+ * 排版规则：字号 / 行高 / 字色走 `--dshpc-*` token；`right` 用 `flex:1` + `justifyContent:flex-end`
+ * 靠右（比 `marginLeft:auto` 稳：内容再宽也始终贴右，不会塌成靠左）；标题 `flex:none` 不被压缩。
+ */
+import { createElement as h, type CSSProperties, type ReactNode } from 'react';
+/**
+ * 标题前固定标签（画出来的短竖线）的颜色：内置语义色名映射到 `--dshpc-*` token、随主题自动成立；
+ * 也可直接给任意 CSS 色值（如 `#7c3aed`）；`'default'` = 主题默认（浅色深灰 / 深色浅灰）。
+ */
+export type SectionHeadAccent = 'default' | 'business' | 'success' | 'warning' | 'danger' | 'purple' | 'pink' | 'cyan' | 'teal' | 'orange' | 'indigo' | 'rose' | 'slate' | (string & {});
+export interface SectionHeadProps {
+    /** 左侧图标（可选；要固定标签请用 `accent`）。 */
+    icon?: ReactNode;
+    title: ReactNode;
+    /** 右侧控件区（靠右，内容可压缩）。 */
+    right?: ReactNode;
+    /**
+     * 标题前的固定标签：`'default'` / 内置语义色名 / 任意 CSS 色值；不传 = 不画，`false` 也 = 不画。
+     */
+    accent?: SectionHeadAccent | false;
+    /** 去掉底边距（嵌进表格通栏等自带间距的容器时用）。 */
+    flush?: boolean;
+    /** 追加 class（只允许补布局，不许覆盖皮肤）。 */
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function SectionHead(props: SectionHeadProps): ReturnType<typeof h>;
+//# sourceMappingURL=SectionHead.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHead.d.ts","sourceRoot":"","sources":["../../../src/ui/display/SectionHead.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,aAAa,IAAI,CAAC,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAI9E;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAC7C,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAC5E,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;AAEjB,MAAM,WAAW,gBAAgB;IAC/B,iCAAiC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,SAAS,CAAA;IAChB,uBAAuB;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AAaD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CA0BzE"}

package/dist/ui/display/SectionHead.js

@@ -0,0 +1,45 @@
+/**
+ * 模块标题行（UI 基础层）：**标签（可选，画出来的短竖线）/ icon（可选）+ 标题 + 右侧控件**。
+ *
+ * 2026-10-08 设置页重构时定型：每块 = 标题行 + 一块内容，标题行左侧 icon、右侧留给该块的控件
+ * （日志块的自动刷新 / 刷新钮，表查询块的表切换）。此前三个块各写一个 `h3`，形态不统一。
+ * 2026-10-30 增加 `accent`：标题前画一条固定样式的短竖线（4px 圆头），颜色可换、可关；
+ * 通栏表格标题也复用这一份标题样式（不再在 Table 里另画）。
+ *
+ * 排版规则：字号 / 行高 / 字色走 `--dshpc-*` token；`right` 用 `flex:1` + `justifyContent:flex-end`
+ * 靠右（比 `marginLeft:auto` 稳：内容再宽也始终贴右，不会塌成靠左）；标题 `flex:none` 不被压缩。
+ */
+import { createElement as h } from 'react';
+import { ensureComponentStyles } from '../infra/css.js';
+import { SECTION_HEAD_CSS } from '../infra/controls-css.js';
+/** 内置色名与 token 一一同名；其余值一律按 CSS 色值原样落地。 */
+const ACCENT_TONES = [
+    'business', 'success', 'warning', 'danger',
+    'purple', 'pink', 'cyan', 'teal', 'orange', 'indigo', 'rose', 'slate',
+];
+function barStyleOf(accent) {
+    if (accent === 'default')
+        return undefined;
+    return { background: ACCENT_TONES.includes(accent) ? `var(--dshpc-${accent})` : accent };
+}
+export function SectionHead(props) {
+    ensureComponentStyles('section-head', SECTION_HEAD_CSS);
+    const accent = props.accent;
+    const className = [
+        'dshpc-section-head',
+        props.flush === true ? 'dshpc-section-head--flush' : '',
+        props.className ?? '',
+    ]
+        .filter((s) => s !== '')
+        .join(' ');
+    return h('div', { className, style: props.style }, accent === false || accent === undefined
+        ? null
+        : h('span', {
+            className: 'dshpc-section-head__bar',
+            'aria-hidden': 'true',
+            style: accent === 'default' ? undefined : barStyleOf(accent),
+        }), props.icon === undefined ? null : h('span', { className: 'dshpc-section-head__icon' }, props.icon), h('span', { className: 'dshpc-section-head__title' }, props.title), props.right === undefined
+        ? null
+        : h('div', { className: 'dshpc-section-head__right' }, props.right));
+}
+//# sourceMappingURL=SectionHead.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHead.js","sourceRoot":"","sources":["../../../src/ui/display/SectionHead.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,aAAa,IAAI,CAAC,EAAsC,MAAM,OAAO,CAAA;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AA6B3D,0CAA0C;AAC1C,MAAM,YAAY,GAAsB;IACtC,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ;IAC1C,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO;CACtE,CAAA;AAED,SAAS,UAAU,CAAC,MAAyB;IAC3C,IAAI,MAAM,KAAK,SAAS;QAAE,OAAO,SAAS,CAAA;IAC1C,OAAO,EAAE,UAAU,EAAE,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,eAAe,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,CAAA;AAC1F,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,qBAAqB,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAA;IACvD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;IAC3B,MAAM,SAAS,GAAG;QAChB,oBAAoB;QACpB,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;QACvD,KAAK,CAAC,SAAS,IAAI,EAAE;KACtB;SACE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;SACvB,IAAI,CAAC,GAAG,CAAC,CAAA;IACZ,OAAO,CAAC,CACN,KAAK,EACL,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,EACjC,MAAM,KAAK,KAAK,IAAI,MAAM,KAAK,SAAS;QACtC,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE;YACR,SAAS,EAAE,yBAAyB;YACpC,aAAa,EAAE,MAAM;YACrB,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC;SAC7D,CAAC,EACN,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,0BAA0B,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,EAClG,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,2BAA2B,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,EAClE,KAAK,CAAC,KAAK,KAAK,SAAS;QACvB,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,2BAA2B,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CACtE,CAAA;AACH,CAAC"}

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

@@ -0,0 +1,43 @@
+import { createElement as h, type CSSProperties, type ReactNode } from 'react';
+/** 底色档（映射到 design 的 surface token）。 */
+export type SurfaceTone = 'plain' | 'raised' | 'sunken' | 'subtle';
+/** 边框档：默认 1px 实线；`faint` 更淡；`none` 透明（保留 1px 占位，不跳高）；`dashed` 虚线（占位框）。 */
+export type SurfaceBorder = true | 'faint' | 'none' | 'dashed';
+/** 圆角档：默认 `md`(12)，与 Button / Input 同档。 */
+export type SurfaceRadius = 'sm' | 'md' | 'lg' | 'none';
+/** 内距档（四拍）：`sm`=8 / `md`=12 / `lg`=16。 */
+export type SurfacePadding = 'none' | 'sm' | 'md' | 'lg';
+export interface SurfaceProps {
+    tone?: SurfaceTone;
+    border?: SurfaceBorder;
+    radius?: SurfaceRadius;
+    /** `null` = 不带内距：给「四边内距要自己算」的容器（Card 的色条贴边）用。 */
+    padding?: SurfacePadding | null;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+interface SurfaceClassOptions {
+    tone?: SurfaceTone;
+    border?: SurfaceBorder;
+    radius?: SurfaceRadius;
+    /** `null` = 不带内距：给「四边内距要自己算」的容器（Card 的色条贴边）用。 */
+    padding?: SurfacePadding | null;
+}
+/**
+ * 拼 Surface 的类名。独立导出是给组合类容器（Card）用的：
+ * 容器要把 Surface 当外框、又不想吃它的内距时，传 `padding: null` 即可。
+ */
+export declare function surfaceClass(options?: SurfaceClassOptions): string;
+/**
+ * 纯框容器：底 / 边框 / 圆角 / 内距四根轴，零业务语义。
+ * 它是**圆角契约的唯一真源**（容器档 12，与控件同档），下游要用「一块一块的面」时用它，
+ * 不要再自己写 border + border-radius。
+ *
+ * ```tsx
+ * h(Surface, { tone: 'sunken', padding: 'md' }, h('div', null, '任意内容'))
+ * ```
+ */
+export declare function Surface(props: SurfaceProps): ReturnType<typeof h>;
+export {};
+//# sourceMappingURL=Surface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../../src/ui/display/Surface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,CAAC,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAI9E,uCAAuC;AACvC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAClE,0EAA0E;AAC1E,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAC9D,2CAA2C;AAC3C,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;AACvD,0CAA0C;AAC1C,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAExD,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,iDAAiD;IACjD,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,UAAU,mBAAmB;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,iDAAiD;IACjD,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;CAChC;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,mBAAwB,GAAG,MAAM,CActE;AAED;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAUjE"}

package/dist/ui/display/Surface.js

@@ -0,0 +1,39 @@
+import { createElement as h } from 'react';
+import { ensureComponentStyles } from '../infra/css.js';
+import { SURFACE_CSS } from './surface-css.js';
+/**
+ * 拼 Surface 的类名。独立导出是给组合类容器（Card）用的：
+ * 容器要把 Surface 当外框、又不想吃它的内距时，传 `padding: null` 即可。
+ */
+export function surfaceClass(options = {}) {
+    const tone = options.tone ?? 'plain';
+    const border = options.border ?? true;
+    const radius = options.radius ?? 'md';
+    const padding = options.padding === undefined ? 'md' : options.padding;
+    return [
+        'dshpc-surface',
+        tone === 'plain' ? '' : `dshpc-surface--tone-${tone}`,
+        border === true ? '' : `dshpc-surface--border-${border}`,
+        radius === 'md' ? '' : `dshpc-surface--radius-${radius}`,
+        padding === null ? '' : `dshpc-surface--pad-${padding}`,
+    ]
+        .filter((name) => name !== '')
+        .join(' ');
+}
+/**
+ * 纯框容器：底 / 边框 / 圆角 / 内距四根轴，零业务语义。
+ * 它是**圆角契约的唯一真源**（容器档 12，与控件同档），下游要用「一块一块的面」时用它，
+ * 不要再自己写 border + border-radius。
+ *
+ * ```tsx
+ * h(Surface, { tone: 'sunken', padding: 'md' }, h('div', null, '任意内容'))
+ * ```
+ */
+export function Surface(props) {
+    ensureComponentStyles('surface', SURFACE_CSS);
+    return h('div', {
+        className: [surfaceClass(props), props.className ?? ''].filter((s) => s !== '').join(' '),
+        style: props.style,
+    }, props.children ?? null);
+}
+//# sourceMappingURL=Surface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.js","sourceRoot":"","sources":["../../../src/ui/display/Surface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,CAAC,EAAsC,MAAM,OAAO,CAAA;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AA8B9C;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,UAA+B,EAAE;IAC5D,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,OAAO,CAAA;IACpC,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,IAAI,CAAA;IACrC,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,IAAI,CAAA;IACrC,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAA;IACtE,OAAO;QACL,eAAe;QACf,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB,IAAI,EAAE;QACrD,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB,MAAM,EAAE;QACxD,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB,MAAM,EAAE;QACxD,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,sBAAsB,OAAO,EAAE;KACxD;SACE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC;SAC7B,IAAI,CAAC,GAAG,CAAC,CAAA;AACd,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,qBAAqB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAA;IAC7C,OAAO,CAAC,CACN,KAAK,EACL;QACE,SAAS,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACzF,KAAK,EAAE,KAAK,CAAC,KAAK;KACnB,EACD,KAAK,CAAC,QAAQ,IAAI,IAAI,CACvB,CAAA;AACH,CAAC"}

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

@@ -0,0 +1,30 @@
+import { createElement as h } from 'react';
+import { type TableSharedProps } from './table-shared.js';
+/** `Table` 对外 props（外观由组件本身决定，没有 variant 轴）。 */
+export type TableProps = TableSharedProps;
+/**
+ * 表格 · 第一档外观（Plain）：白卡片上的无线框表格。
+ *
+ * 特征：双行分组表头（columns 嵌套 `children` 自动算 colSpan / rowSpan）、竖向浅分隔线、
+ * **无横向行线**、行悬浮淡蓝、选中行淡蓝底 + 左侧蓝竖条。
+ *
+ * 只 import 自己这份皮肤 CSS（`TABLE_PLAIN_CSS`）：消费方引 `Table` 就只打包这一份。
+ * 将来的 `TableGrid` / `TableZebra` 是同族独立组件、各自一份 CSS —— **不做 variant**，
+ * 否则两份皮肤会同时进包。
+ *
+ * ```tsx
+ * h(Table, {
+ *   columns: [
+ *     { key: 'id', title: 'ID', width: 120 },
+ *     { key: 'study', title: 'Study', children: [
+ *       { key: 'date', title: 'Date', width: 130 },
+ *       { key: 'modality', title: 'Modality', width: 110 },
+ *     ]},
+ *   ],
+ *   rows: [{ key: 'S-1', cells: { id: 'S-1', date: '2026-10-24', modality: 'CT' } }],
+ *   onRowClick: (row) => select(row.key),
+ * })
+ * ```
+ */
+export declare function Table(props: TableProps): ReturnType<typeof h>;
+//# sourceMappingURL=Table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/ui/display/Table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,CAAC,EAAqB,MAAM,OAAO,CAAA;AAK7D,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAErE,gDAAgD;AAChD,MAAM,MAAM,UAAU,GAAG,gBAAgB,CAAA;AA8CzC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAsC7D"}

package/dist/ui/display/Table.js

@@ -0,0 +1,96 @@
+import { createElement as h, useEffect, useRef } from 'react';
+import { ensureComponentStyles } from '../infra/css.js';
+import { TABLE_PLAIN_CSS } from '../infra/controls-css.js';
+import { Pagination } from '../navigation/Pagination.js';
+import { clampPage, pageCountOf } from '../navigation/pagination-logic.js';
+import { tableShell } from './table-shared.js';
+/**
+ * 底部哨兵的滚动监听：哨兵进入视口（提前 200px）就调一次 `onLoadMore`。
+ * `enabled` 由调用方决定（分页 / 分组模式下关掉）；正在加载或已到底时 `blockedRef` 挡住重复触发。
+ */
+function useLoadMoreSentinel(props, enabled) {
+    const nodeRef = useRef(null);
+    const onLoadMoreRef = useRef(props.onLoadMore);
+    const blockedRef = useRef(true);
+    // 无 deps：每次渲染后同步最新回调与闸门，观察器只用 ref 读现值。
+    useEffect(() => {
+        onLoadMoreRef.current = props.onLoadMore;
+        blockedRef.current =
+            !enabled ||
+                props.onLoadMore === undefined ||
+                props.loading === true ||
+                props.loadingMore === true ||
+                props.hasMore === false;
+    });
+    const refCallback = useRef((node) => {
+        nodeRef.current = node;
+    }).current;
+    useEffect(() => {
+        if (!enabled || typeof IntersectionObserver === 'undefined')
+            return;
+        const node = nodeRef.current;
+        if (node === null)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting) && !blockedRef.current) {
+                onLoadMoreRef.current?.();
+            }
+        }, { rootMargin: '0px 0px 200px 0px' });
+        observer.observe(node);
+        return () => {
+            observer.disconnect();
+        };
+    }, [enabled]);
+    return refCallback;
+}
+/**
+ * 表格 · 第一档外观（Plain）：白卡片上的无线框表格。
+ *
+ * 特征：双行分组表头（columns 嵌套 `children` 自动算 colSpan / rowSpan）、竖向浅分隔线、
+ * **无横向行线**、行悬浮淡蓝、选中行淡蓝底 + 左侧蓝竖条。
+ *
+ * 只 import 自己这份皮肤 CSS（`TABLE_PLAIN_CSS`）：消费方引 `Table` 就只打包这一份。
+ * 将来的 `TableGrid` / `TableZebra` 是同族独立组件、各自一份 CSS —— **不做 variant**，
+ * 否则两份皮肤会同时进包。
+ *
+ * ```tsx
+ * h(Table, {
+ *   columns: [
+ *     { key: 'id', title: 'ID', width: 120 },
+ *     { key: 'study', title: 'Study', children: [
+ *       { key: 'date', title: 'Date', width: 130 },
+ *       { key: 'modality', title: 'Modality', width: 110 },
+ *     ]},
+ *   ],
+ *   rows: [{ key: 'S-1', cells: { id: 'S-1', date: '2026-10-24', modality: 'CT' } }],
+ *   onRowClick: (row) => select(row.key),
+ * })
+ * ```
+ */
+export function Table(props) {
+    ensureComponentStyles('table-plain', TABLE_PLAIN_CSS);
+    const pager = props.pagination;
+    // 通栏分组与分页互斥：一个表里多个板块时，页码该属于哪个板块说不清，直接不分页。
+    const grouped = (props.groups?.length ?? 0) > 0;
+    // 滚动加载与分页仍互斥（同表两套翻页）；分组不挡滚动加载 —— 底部状态行排在最后一组之后。
+    const infinite = pager === undefined;
+    const sentinelRef = useLoadMoreSentinel(props, infinite);
+    if (pager === undefined || grouped) {
+        return tableShell('dshpc-table--plain', 
+        // 分页模式下摘掉加载相关 props，避免同表两套翻页。
+        pager === undefined
+            ? props
+            : { ...props, onLoadMore: undefined, loadingMore: undefined, hasMore: undefined, noMoreText: undefined }, { sentinelRef: infinite ? sentinelRef : undefined });
+    }
+    const pageSize = Math.max(1, Math.floor(pager.pageSize ?? 10));
+    const allRows = props.rows ?? [];
+    // total 不给 = 本地分页（全量 rows 自己切）；给了 = 服务端分页（rows 已是当前页，不再切）。
+    const local = pager.total === undefined;
+    const total = local ? allRows.length : Math.max(0, Math.floor(pager.total ?? 0));
+    const page = clampPage(pager.page, pageCountOf(total, pageSize));
+    const rows = local ? allRows.slice((page - 1) * pageSize, page * pageSize) : allRows;
+    return h('div', { className: 'dshpc-table-frame' }, 
+    // 分页与滚动加载二选一：分页模式下把底部加载相关 props 摘掉，避免同表两套翻页。
+    tableShell('dshpc-table--plain', { ...props, rows, onLoadMore: undefined, loadingMore: undefined, hasMore: undefined, noMoreText: undefined }, {}), h(Pagination, { ...pager, page, total, align: pager.align ?? 'right' }));
+}
+//# sourceMappingURL=Table.js.map

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

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

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

@@ -0,0 +1,2 @@
+export { CARD_CSS } from './card-css.generated.js';
+//# sourceMappingURL=card-css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-css.d.ts","sourceRoot":"","sources":["../../../src/ui/display/card-css.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA"}

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

@@ -0,0 +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 / \u5185\u8DDD\uFF09\u5168\u90E8\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   \u8FD9\u91CC\u53EA\u7BA1\u4E24\u4EF6 Surface \u4E0D\u8BE5\u77E5\u9053\u7684\u4E8B\uFF1A\u8272\u6761\u51E0\u4F55\u3001\u5934\u90E8\u5E03\u5C40\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}\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\u3002\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\n   \u4E0D\u7528\u4E3A\u6BCF\u4E2A\u65B9\u4F4D\u5404\u5199\u4E00\u5957\u5B9A\u4F4D\u3002 */\n.dshpc-card__body{display:flex;gap:var(--card-bar-gap);min-width:0}\n.dshpc-card--bar-top .dshpc-card__body,\n.dshpc-card--bar-bottom .dshpc-card__body{flex-direction:column}\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  padding:12px 12px 12px 20px;\n  background: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   \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\uFF1ASurface \u5916\u6846\uFF08\u5E95 + 1px \u5B9E\u8272\u8FB9\u6846 + \u5706\u89D2 12\uFF09+ \u8272\u6761\u8D34\u8FB9\u90A3\u4E00\u4FA7\u7684\u5185\u8DDD \u2500\u2500\n   \u5185\u8DDD\u7528 0,2,0 / 0,3,0 \u7684\u957F\u5199\u6CD5\uFF1A\u9AD8\u8FC7 .dshpc-surface \u7684 padding \u7B80\u5199\uFF0C\u4E0E\u4E24\u4EFD CSS \u7684\u6CE8\u5165\u987A\u5E8F\u65E0\u5173\u3002 */\n.dshpc-card.dshpc-card--bordered{padding:14px}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-left{padding-left:var(--card-bar-inset)}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-right{padding-right:var(--card-bar-inset)}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-top{padding-top:var(--card-bar-inset)}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-bottom{padding-bottom:var(--card-bar-inset)}\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.dshpc-card__panel{margin-top:8px;padding-top:8px;border-top:1px solid var(--dshpc-border-faint)}\n";
+//# sourceMappingURL=card-css.generated.d.ts.map

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

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

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

@@ -0,0 +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   这里只管两件 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}\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 = 色条 + 头部。方向跟着条子贴的边切 ⇒ 四个方位只是「换一个方向的 flex 项」，\n   不用为每个方位各写一套定位。 */\n.dshpc-card__body{display:flex;gap:var(--card-bar-gap);min-width:0}\n.dshpc-card--bar-top .dshpc-card__body,\n.dshpc-card--bar-bottom .dshpc-card__body{flex-direction:column}\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  padding:12px 12px 12px 20px;\n  background:var(--card-accent-soft,transparent);\n}\n/* 左内边距 20px = 16 留白 + 4 条宽 ⇒ 内容从色条右缘起算；色条绝对定位通高，跟着内容高度自适应。\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：Surface 外框（底 + 1px 实色边框 + 圆角 12）+ 色条贴边那一侧的内距 ──\n   内距用 0,2,0 / 0,3,0 的长写法：高过 .dshpc-surface 的 padding 简写，与两份 CSS 的注入顺序无关。 */\n.dshpc-card.dshpc-card--bordered{padding:14px}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-left{padding-left:var(--card-bar-inset)}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-right{padding-right:var(--card-bar-inset)}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-top{padding-top:var(--card-bar-inset)}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-bottom{padding-bottom:var(--card-bar-inset)}\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.dshpc-card__panel{margin-top:8px;padding-top:8px;border-top:1px solid var(--dshpc-border-faint)}\n";
+//# sourceMappingURL=card-css.generated.js.map

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

@@ -0,0 +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,s8JAAs8J,CAAA"}

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

@@ -0,0 +1,5 @@
+// Card / StripCard 样式（Chip 已独立到 chip-css.ts，勿再往这里加 chip 规则）。
+// 类名固定 dshpc-card*；
+// 颜色一律吃 token，深色由 design 的 token 深色段自动生效（不写死颜色值）。
+export { CARD_CSS } from './card-css.generated.js';
+//# sourceMappingURL=card-css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-css.js","sourceRoot":"","sources":["../../../src/ui/display/card-css.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,oBAAoB;AACpB,kDAAkD;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/ui/display/chip-css.d.ts

@@ -0,0 +1,2 @@
+export { CHIP_CSS } from './chip-css.generated.js';
+//# sourceMappingURL=chip-css.d.ts.map

package/dist/ui/display/chip-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-css.d.ts","sourceRoot":"","sources":["../../../src/ui/display/chip-css.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA"}

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

@@ -0,0 +1,2 @@
+export declare const CHIP_CSS = "\n/* \u4E09\u6761\u5C40\u90E8\u53D8\u91CF\u627F\u8F7D\u914D\u8272\uFF1Aneutral \u8D70\u65E7\u7070\u9762\uFF1B\u8BED\u4E49\u6863\u6362\u5E95\u5B57\u914D\u5BF9\uFF082026-10-20 \u7528\u6237\u8981\u591A\u8272\u591A\u5C3A\u5BF8\u6807\u7B7E\uFF09\u3002 */\n.dshpc-chip{--chip-bg:var(--dshpc-chip-bg);--chip-fg:var(--dshpc-fg);--chip-bg-hover:var(--dshpc-chip-bg-hover);\n  display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:1px 8px;\n  box-sizing:border-box;border-radius:var(--dshpc-radius-pill,999px);border:none;\n  background:var(--chip-bg);color:var(--chip-fg);\n  font-family:inherit;font-size:11px;line-height:18px;margin:0;\n  /* 2026-10-18\uFF1Achip \u662F flex \u884C\u91CC\u7684\u5E38\u7528\u9879\uFF0C\u7981\u6B62\u88AB\u538B\u7F29\u6362\u884C\uFF08\u9884\u89C8\u7AD9\u51FA\u73B0\u8FC7\u6587\u5B57\u7AD6\u6392\u3001\u4E92\u76F8\u53E0\u538B\u7684\u6324\u538B\uFF09\u3002 */\n  white-space:nowrap;flex:none;\n  appearance:none;-webkit-appearance:none;\n}\n/* md \u6863\uFF1A\u5361\u7247\u5143\u4FE1\u606F\u884C\u7B49\u7A0D\u5927\u573A\u666F\uFF1Bsm \u5373\u65E7\u7248\u9ED8\u8BA4\uFF0C\u9010\u50CF\u7D20\u4E0D\u52A8\u3002 */\n.dshpc-chip--md{padding:2px 10px;font-size:12px;line-height:20px;}\n/* xs \u6863\uFF1A\u6807\u9898\u540E\u7F00\u7B49\u6781\u7D27\u51D1\u573A\u666F\uFF082026-10-20 \u7528\u6237\u8981\u66F4\u5C0F\u6807\u7B7E\uFF09\uFF1B16px \u9AD8\u3001font 10\u3002 */\n.dshpc-chip--xs{padding:0 6px;font-size:10px;line-height:16px;}\n/* \u8BED\u4E49\u8272\u5B9E\u5FC3\u6863\uFF1A\u5E95 / \u5B57 / hover \u914D\u5BF9\u4E0E Button \u540C\u6E90\uFF08\u9EC4\u5E95\u4E2D\u9AD8\u660E\u5EA6 \u21D2 \u5B57\u7528 --dshpc-on-warning\uFF09\u3002 */\n.dshpc-chip--business{--chip-bg:var(--dshpc-business);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-business-hover);}\n.dshpc-chip--success{--chip-bg:var(--dshpc-success);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-success-hover);}\n.dshpc-chip--warning{--chip-bg:var(--dshpc-warning);--chip-fg:var(--dshpc-on-warning);--chip-bg-hover:var(--dshpc-warning-hover);}\n.dshpc-chip--danger{--chip-bg:var(--dshpc-danger);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-danger-hover);}\n/* \u6269\u5C55\u516B\u8272\uFF082026-10-29\uFF09\uFF1A\u5B9E\u5FC3\u9762\u5B57\u8272\u7EDF\u4E00\u767D\uFF08on-signal\uFF09\uFF0C\u660E\u5EA6\u5747\u4F4E\u4E8E\u9EC4 / \u9752\u67E0\uFF0C\u767D\u5B57\u4E24\u4E3B\u9898\u53EF\u8BFB\u3002 */\n.dshpc-chip--purple{--chip-bg:var(--dshpc-purple);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-purple-hover);}\n.dshpc-chip--pink{--chip-bg:var(--dshpc-pink);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-pink-hover);}\n.dshpc-chip--cyan{--chip-bg:var(--dshpc-cyan);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-cyan-hover);}\n.dshpc-chip--teal{--chip-bg:var(--dshpc-teal);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-teal-hover);}\n.dshpc-chip--orange{--chip-bg:var(--dshpc-orange);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-orange-hover);}\n.dshpc-chip--indigo{--chip-bg:var(--dshpc-indigo);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-indigo-hover);}\n.dshpc-chip--rose{--chip-bg:var(--dshpc-rose);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-rose-hover);}\n.dshpc-chip--slate{--chip-bg:var(--dshpc-slate);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-slate-hover);}\n/* \u53EF\u70B9\u6001\uFF1Abutton \u6E32\u67D3\uFF08\u89C1 Chip.ts\uFF09\uFF0C\u5149\u6807 + hover \u52A0\u6DF1\u3002 */\n.dshpc-chip--clickable{cursor:pointer;transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-chip--clickable:hover:not(:disabled){background:var(--chip-bg-hover)}\n.dshpc-chip:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px}\n/* \u7981\u7528\u6001\u5B57\u8272\u4ECE --chip-fg \u6D3E\u751F\uFF0845% \u2248 \u65E7 fg-3 \u7684\u5F31\u5316\u89C2\u611F\uFF09\uFF0C\u4E0D\u8BB8\u76F4\u63A5\u7528 --dshpc-fg-3\uFF1A\n   \u5B83\u8DDF\u4E3B\u9898\u8D70\uFF0C\u6697\u8272\u4E0B\u662F\u6DF1\u7070 \u21D2 \u8BED\u4E49\u8272\u5B9E\u5FC3\u6807\u7B7E\uFF08\u84DD / \u7EA2\u5E95\uFF09\u4E0A\u51E0\u4E4E\u770B\u4E0D\u89C1\uFF08\u4E0E Segmented \u8BA1\u6570 2026-10-29 \u540C\u7C7B\uFF09\u3002 */\n.dshpc-chip:disabled{cursor:default;color:color-mix(in srgb,var(--chip-fg) 45%,transparent)}\n/* maxWidth \u5305 MarqueeText \u65F6\uFF1A\u6807\u7B7E\u4F5C\u4E3A flex \u5B50\u9879\u5FC5\u987B\u80FD\u6536\u7F29\u5230\u5185\u5BB9\u4EE5\u4E0B\uFF0C\u5426\u5219\u7701\u7565\u53F7 / \u8DD1\u9A6C\u706F\u6D4B\u4E0D\u51C6 */\n.dshpc-chip .dshpc-chip__label{min-width:0;}\n@media (prefers-reduced-motion: reduce){.dshpc-chip{transition:none}}\n";
+//# sourceMappingURL=chip-css.generated.d.ts.map