@zerodep-dev/vue-tsx-pro-ui 0.3.1 → 0.3.2

package/dist/diagram/DiagramControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiagramControls.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_createTextVNode"],"sources":["../../src/diagram/DiagramControls.tsx"],"sourcesContent":["/**\n * 画布的缩放按钮：缩小、当前比例（点击回到原大）、放大、适应画布。放在 Diagram 的 overlay 里，从 DiagramContext 拿控制器：\n *\n *   <Diagram overlay={<DiagramControls />} … />\n *\n * 一组按钮是一个工具栏（Toolbar）：整组占一个 Tab 位置，组内用方向键移动。到了缩放上限、下限时对应的按钮不可用。\n * 部件：Root（Toolbar）、Button（每个图标按钮）、Level（比例按钮）。\n */\nimport { Scan, ZoomIn, ZoomOut } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useMessages } from '../config/lang/messages';\nimport { Toolbar, type ToolbarProps } from '../navigation/Toolbar';\nimport { mergePartProps } from '../utils/props';\nimport { DiagramContext } from './Diagram';\nimport { diagramMessages } from './messages';\n\n/** 缩放按钮放在画布的哪个角 */\nexport interface DiagramControlsPlacements {\n  /** 左下（从右到左时右下），默认 */\n  'bottom-start': unknown;\n  /** 右下 */\n  'bottom-end': unknown;\n  /** 左上 */\n  'top-start': unknown;\n  /** 右上 */\n  'top-end': unknown;\n}\n\n/** 未声明的属性落到工具栏（Toolbar）上 */\nexport interface DiagramControlsProps extends Partial<ToolbarProps> {\n  /** 放在画布的哪个角，默认 bottom-start */\n  placement?: keyof DiagramControlsPlacements;\n  /** 每个图标按钮的部件属性 */\n  propsButton?: Partial<IconButtonProps>;\n  /** 比例按钮的部件属性 */\n  propsLevel?: Partial<ButtonProps>;\n}\n\n/** DiagramControls 的样式 */\nexport const diagramControlsStyles = css.create({\n  root: {\n    position: 'absolute',\n    pointerEvents: 'auto',\n    gap: '2px',\n    padding: '2px',\n    backgroundColor: '_surface',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_md',\n    boxShadow: '_sm',\n  },\n  'bottom-start': { insetBlockEnd: '_space.sm', insetInlineStart: '_space.sm' },\n  'bottom-end': { insetBlockEnd: '_space.sm', insetInlineEnd: '_space.sm' },\n  'top-start': { insetBlockStart: '_space.sm', insetInlineStart: '_space.sm' },\n  'top-end': { insetBlockStart: '_space.sm', insetInlineEnd: '_space.sm' },\n  // 比例的数字等宽，缩放时按钮不跟着变宽\n  level: { minWidth: '3.5em', fontVariantNumeric: 'tabular-nums' },\n});\n\n/** 画布的缩放按钮 */\nexport const DiagramControls = _component(\n  ({ placement = 'bottom-start', propsButton, propsLevel, ...rest }: DiagramControlsProps) => {\n    const diagram = DiagramContext.inject();\n    const messages = useMessages('diagram', diagramMessages);\n    const button = (props: IconButtonProps) =>\n      mergePartProps<IconButtonProps>({ variant: 'ghost', size: 'sm', ...props }, propsButton);\n    return () => {\n      const percent = Math.round(diagram.scale * 100);\n      return (\n        <Toolbar\n          {...mergePartProps<ToolbarProps>(\n            {\n              'aria-label': messages.controls,\n              sx: [diagramControlsStyles.root, diagramControlsStyles[placement]],\n            },\n            rest,\n          )}\n        >\n          <IconButton\n            {...button({\n              icon: ZoomOut,\n              'aria-label': messages.zoomOut,\n              disabled: !diagram.canZoomOut,\n              onClick: () => diagram.zoomOut(),\n            })}\n          />\n          <Button\n            {...mergePartProps<ButtonProps>(\n              {\n                variant: 'ghost',\n                size: 'sm',\n                sx: diagramControlsStyles.level,\n                'aria-label': messages.zoomLevel(percent),\n                onClick: () => diagram.zoomTo(1),\n              },\n              propsLevel,\n            )}\n          >\n            {percent}%\n          </Button>\n          <IconButton\n            {...button({\n              icon: ZoomIn,\n              'aria-label': messages.zoomIn,\n              disabled: !diagram.canZoomIn,\n              onClick: () => diagram.zoomIn(),\n            })}\n          />\n          <IconButton\n            {...button({ icon: Scan, 'aria-label': messages.fit, onClick: () => diagram.fit() })}\n          />\n        </Toolbar>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,wBAAwB,IAAI,OAAO;CAC9C,MAAM;EACJ,UAAU;EACV,eAAe;EACf,KAAK;EACL,SAAS;EACT,iBAAiB;EACjB,aAAa;EACb,aAAa;EACb,aAAa;EACb,cAAc;EACd,WAAW;CACb;CACA,gBAAgB;EAAE,eAAe;EAAa,kBAAkB;CAAY;CAC5E,cAAc;EAAE,eAAe;EAAa,gBAAgB;CAAY;CACxE,aAAa;EAAE,iBAAiB;EAAa,kBAAkB;CAAY;CAC3E,WAAW;EAAE,iBAAiB;EAAa,gBAAgB;CAAY;CAEvE,OAAO;EAAE,UAAU;EAAS,oBAAoB;CAAe;AACjE,CAAC;;AAGD,IAAa,kBAAkB,0BAC7B,QAAA,SAA4F;CAAA,MAAA,YAAAA,aAAA,QAAA,aAA7E,cAAc;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAA8B,OAAIC,UAAA,QAAA,MAAA,IAAA;CAC7D,MAAM,UAAU,eAAe,OAAO;CACtC,MAAM,WAAW,YAAY,WAAW,eAAe;CACvD,MAAM,UAAU,UACd,eAAgC;EAAE,SAAS;EAAS,MAAM;EAAM,GAAG;CAAM,GAAC,YAAA,KAAa;CACzF,aAAa;EACX,MAAM,UAAU,KAAK,MAAM,QAAQ,QAAQ,GAAG;EAC9C,OAAAC,YAAA,SAEQ,eACF;GACE,cAAc,SAAS;GACvB,IAAI,CAAC,sBAAsB,MAAM,sBAAqB,UAAA,MAAW;EACnE,GACA,IACF,GAAC,EAAA,eAAA;GAAAA,YAAA,YAGK,OAAO;IACT,MAAM;IACN,cAAc,SAAS;IACvB,UAAU,CAAC,QAAQ;IACnB,eAAe,QAAQ,QAAQ;GACjC,CAAC,GAAC,IAAA;GAAAA,YAAA,QAGE,eACF;IACE,SAAS;IACT,MAAM;IACN,IAAI,sBAAsB;IAC1B,cAAc,SAAS,UAAU,OAAO;IACxC,eAAe,QAAQ,OAAO,CAAC;GACjC,GAAC,WAAA,KAEH,GAAC,EAAA,eAAA,CAEA,SAAOC,gBAAA,GAAA,CAAA,EAAA,CAAA;GAAAD,YAAA,YAGJ,OAAO;IACT,MAAM;IACN,cAAc,SAAS;IACvB,UAAU,CAAC,QAAQ;IACnB,eAAe,QAAQ,OAAO;GAChC,CAAC,GAAC,IAAA;GAAAA,YAAA,YAGE,OAAO;IAAE,MAAM;IAAM,cAAc,SAAS;IAAK,eAAe,QAAQ,IAAI;GAAE,CAAC,GAAC,IAAA;EAAA,EAAA,CAAA;CAI5F;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"DiagramControls.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_createTextVNode"],"sources":["../../src/diagram/DiagramControls.tsx"],"sourcesContent":["/**\n * 画布的缩放按钮：缩小、当前比例（点击回到原大）、放大、适应画布。放在 Diagram 的 overlay 里，从 DiagramContext 拿控制器：\n *\n *   <Diagram overlay={<DiagramControls />} … />\n *\n * 一组按钮是一个工具栏（Toolbar）：整组占一个 Tab 位置，组内用方向键移动。到了缩放上限、下限时对应的按钮不可用。\n * 部件：Root（Toolbar）、Button（每个图标按钮）、Level（比例按钮）。\n */\nimport { Scan, ZoomIn, ZoomOut } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useMessages } from '../config/lang/messages';\nimport { Toolbar, type ToolbarProps } from '../navigation/Toolbar';\nimport { mergePartProps } from '../utils/props';\nimport { DiagramContext } from './Diagram';\nimport { diagramMessages } from './messages';\n\n/** 缩放按钮放在画布的哪个角 */\nexport interface DiagramControlsPlacements {\n  /** 左下（从右到左时右下），默认 */\n  'bottom-start': unknown;\n  /** 右下 */\n  'bottom-end': unknown;\n  /** 左上 */\n  'top-start': unknown;\n  /** 右上 */\n  'top-end': unknown;\n}\n\n/** 未声明的属性落到工具栏（Toolbar）上 */\nexport interface DiagramControlsProps extends Partial<ToolbarProps> {\n  /** 放在画布的哪个角，默认 bottom-start */\n  placement?: keyof DiagramControlsPlacements;\n  /** 每个图标按钮的部件属性 */\n  propsButton?: Partial<IconButtonProps>;\n  /** 比例按钮的部件属性 */\n  propsLevel?: Partial<ButtonProps>;\n}\n\n/** DiagramControls 的样式 */\nexport const diagramControlsStyles = css.create({\n  root: {\n    position: 'absolute',\n    pointerEvents: 'auto',\n    gap: '2px',\n    padding: '2px',\n    backgroundColor: '_surface',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_md',\n    boxShadow: '_sm',\n  },\n  'bottom-start': { insetBlockEnd: '_space.sm', insetInlineStart: '_space.sm' },\n  'bottom-end': { insetBlockEnd: '_space.sm', insetInlineEnd: '_space.sm' },\n  'top-start': { insetBlockStart: '_space.sm', insetInlineStart: '_space.sm' },\n  'top-end': { insetBlockStart: '_space.sm', insetInlineEnd: '_space.sm' },\n  // 比例的数字等宽，缩放时按钮不跟着变宽\n  level: { minWidth: '3.5em', fontVariantNumeric: 'tabular-nums' },\n});\n\n/** 画布的缩放按钮 */\nexport const DiagramControls = _component(\n  ({ placement = 'bottom-start', propsButton, propsLevel, ...rest }: DiagramControlsProps) => {\n    const diagram = DiagramContext.inject();\n    const messages = useMessages('diagram', diagramMessages);\n    const button = (props: IconButtonProps) =>\n      mergePartProps<IconButtonProps>({ variant: 'ghost', size: 'sm', ...props }, propsButton);\n    return () => {\n      const percent = Math.round(diagram.scale * 100);\n      return (\n        <Toolbar\n          {...mergePartProps<ToolbarProps>(\n            {\n              'aria-label': messages.controls,\n              sx: [diagramControlsStyles.root, diagramControlsStyles[placement]],\n            },\n            rest,\n          )}\n        >\n          <IconButton\n            {...button({\n              icon: ZoomOut,\n              'aria-label': messages.zoomOut,\n              disabled: !diagram.canZoomOut,\n              onClick: () => diagram.zoomOut(),\n            })}\n          />\n          <Button\n            {...mergePartProps<ButtonProps>(\n              {\n                variant: 'ghost',\n                size: 'sm',\n                sx: diagramControlsStyles.level,\n                'aria-label': messages.zoomLevel(percent),\n                onClick: () => diagram.zoomTo(1),\n              },\n              propsLevel,\n            )}\n          >\n            {percent}%\n          </Button>\n          <IconButton\n            {...button({\n              icon: ZoomIn,\n              'aria-label': messages.zoomIn,\n              disabled: !diagram.canZoomIn,\n              onClick: () => diagram.zoomIn(),\n            })}\n          />\n          <IconButton\n            {...button({ icon: Scan, 'aria-label': messages.fit, onClick: () => diagram.fit() })}\n          />\n        </Toolbar>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,wBAAwB,IAAI,OAAO;CAC9C,MAAM;EACJ,UAAU;EACV,eAAe;EACf,KAAK;EACL,SAAS;EACT,iBAAiB;EACjB,aAAa;EACb,aAAa;EACb,aAAa;EACb,cAAc;EACd,WAAW;CACb;CACA,gBAAgB;EAAE,eAAe;EAAa,kBAAkB;CAAY;CAC5E,cAAc;EAAE,eAAe;EAAa,gBAAgB;CAAY;CACxE,aAAa;EAAE,iBAAiB;EAAa,kBAAkB;CAAY;CAC3E,WAAW;EAAE,iBAAiB;EAAa,gBAAgB;CAAY;CAEvE,OAAO;EAAE,UAAU;EAAS,oBAAoB;CAAe;AACjE,CAAC;;AAGD,IAAa,kBAAkB,0BAC7B,QAAA,SAA4F;CAAA,MAAA,YAAAA,aAAA,QAAA,aAA7E,cAAc;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAA8B,OAAIC,UAAA,QAAA,MAAA,IAAA;CAC7D,MAAM,UAAU,eAAe,OAAO;CACtC,MAAM,WAAW,YAAY,WAAW,eAAe;CACvD,MAAM,UAAU,UACd,eAAgC;EAAE,SAAS;EAAS,MAAM;EAAM,GAAG;CAAM,GAAC,YAAA,KAAa;CACzF,aAAa;EACX,MAAM,UAAU,KAAK,MAAM,QAAQ,QAAQ,GAAG;EAC9C,OAAAC,YAAA,SAEQ,eACF;GACE,cAAc,SAAS;GACvB,IAAI,CAAC,sBAAsB,MAAM,sBAAqB,UAAA,MAAW;EACnE,GACA,IACF,GAAC,EAAA,eAAA;GAAAA,YAAA,YAGK,OAAO;IACT,MAAM;IACN,cAAc,SAAS;IACvB,UAAU,CAAC,QAAQ;IACnB,eAAe,QAAQ,QAAQ;GACjC,CAAC,GAAC,IAAA;GAAAA,YAAA,QAGE,eACF;IACE,SAAS;IACT,MAAM;IACN,IAAI,sBAAsB;IAC1B,cAAc,SAAS,UAAU,OAAO;IACxC,eAAe,QAAQ,OAAO,CAAC;GACjC,GAAC,WAAA,KAEH,GAAC,EAAA,eAAA,CAEA,SAAOC,gBAAA,GAAA,CAAA,EAAA,CAAA;GAAAD,YAAA,YAGJ,OAAO;IACT,MAAM;IACN,cAAc,SAAS;IACvB,UAAU,CAAC,QAAQ;IACnB,eAAe,QAAQ,OAAO;GAChC,CAAC,GAAC,IAAA;GAAAA,YAAA,YAGE,OAAO;IAAE,MAAM;IAAM,cAAc,SAAS;IAAK,eAAe,QAAQ,IAAI;GAAE,CAAC,GAAC,IAAA;EAAA,EAAA,CAAA;CAI5F;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/diagram/DiagramLanes.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 import type { DiagramRect } from './geometry';

package/dist/diagram/DiagramLanes.js

@@ -1,7 +1,7 @@
 import { mergeAttrs } from "../utils/props.js";
 import { createVNode } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/diagram/DiagramLanes.tsx
 /** 一条泳道 */
 /** 泳道的排法：起点、长度与默认的高 */

package/dist/diagram/DiagramLanes.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiagramLanes.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/diagram/DiagramLanes.tsx"],"sourcesContent":["/**\n * 泳道：虚线框出的一组横向泳道，左边一栏是泳道名（岗位、部门、系统），不着底色（画布的网格透过来）。放在 Diagram 的 backdrop 里，\n * 用画布坐标、随视口平移缩放；extent 写上泳道的范围，适应画布时整个放进来：\n *\n *   const lanes = [{ name: '申请人' }, { name: '部门经理' }, { name: '财务', size: 160 }];\n *   <Diagram backdrop={<DiagramLanes lanes={lanes} width={860} />} extent={lanesExtent(lanes, { width: 860 })} … />\n *\n * 泳道从 (x, y) 开始往下排，每条的高是它的 size，没写时用 laneSize；节点的纵坐标落在哪条泳道的范围里由使用方排。\n * 部件：Root（div）、Lane（每条泳道）、Header（泳道名）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport type { DiagramRect } from './geometry';\n\n/** 一条泳道 */\nexport interface DiagramLane {\n  /** 泳道名 */\n  name: VNodeChild;\n  /** 这条泳道的高（画布坐标）；不写时用 DiagramLanes 的 laneSize */\n  size?: number;\n}\n\n/** 泳道的排法：起点、长度与默认的高 */\nexport interface DiagramLanesLayout {\n  /** 泳道的长度（含泳道名那一栏，画布坐标） */\n  width: number;\n  /** 没写 size 的泳道的高，默认 120 */\n  laneSize?: number;\n  /** 左上角的横坐标，默认 0 */\n  x?: number;\n  /** 左上角的纵坐标，默认 0 */\n  y?: number;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface DiagramLanesProps extends PartProps<'div'>, DiagramLanesLayout {\n  /** 泳道，从上往下 */\n  lanes: readonly DiagramLane[];\n  /** 泳道名那一栏的宽（画布坐标），默认 88 */\n  header?: number;\n  /** 每条泳道的部件属性 */\n  propsLane?: PartProps<'div'>;\n  /** 泳道名的部件属性 */\n  propsHeader?: PartProps<'div'>;\n}\n\n/** 泳道整体占的范围（画布坐标）：交给 Diagram 的 extent */\nexport function lanesExtent(\n  lanes: readonly DiagramLane[],\n  { width, laneSize = 120, x = 0, y = 0 }: DiagramLanesLayout,\n): DiagramRect {\n  const height = lanes.reduce((sum, lane) => sum + (lane.size ?? laneSize), 0);\n  return { x, y, width, height };\n}\n\n/** DiagramLanes 的样式：root、lane、header */\nexport const diagramLanesStyles = css.create({\n  // 虚线、不着底色：画布的点阵透过来，泳道只是分区，不像一张压在画布上的表\n  root: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    borderRadius: '_md',\n    // 外框用 outline 画：不占位置，泳道的坐标与 lanesExtent 一致\n    outlineWidth: '_xs',\n    outlineStyle: 'dashed',\n    outlineColor: '_borderStrong',\n  },\n  lane: {\n    display: 'flex',\n    boxSizing: 'border-box',\n    borderBlockEndWidth: { default: '_xs', ':last-child': 0 },\n    borderBlockEndStyle: 'dashed',\n    borderBlockEndColor: '_borderStrong',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    boxSizing: 'border-box',\n    paddingInline: '_space.xs',\n    textAlign: 'center',\n    fontWeight: '_semibold',\n    color: '_textMuted',\n    borderInlineEndWidth: '_xs',\n    borderInlineEndStyle: 'dashed',\n    borderInlineEndColor: '_borderStrong',\n  },\n});\n\n/** 随数据变的样式：位置与大小 */\nexport const diagramLanesDynamicStyles = css.create({\n  at: (x: number, y: number) => ({ transform: `translate(${x}px, ${y}px)` }),\n  width: (width: number) => ({ width }),\n  height: (height: number) => ({ height }),\n});\n\n/** 泳道 */\nexport const DiagramLanes = _component(\n  ({\n    lanes,\n    width,\n    laneSize = 120,\n    x = 0,\n    y = 0,\n    header = 88,\n    propsLane,\n    propsHeader,\n    ...rest\n  }: DiagramLanesProps) =>\n    () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              diagramLanesStyles.root,\n              diagramLanesDynamicStyles.at(x, y),\n              diagramLanesDynamicStyles.width(width),\n            ],\n          },\n          rest,\n        )}\n      >\n        {lanes.map((lane, index) => (\n          <div\n            key={index}\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  diagramLanesStyles.lane,\n                  diagramLanesDynamicStyles.height(lane.size ?? laneSize),\n                ],\n              },\n              propsLane,\n            )}\n          >\n            <div\n              {...mergeAttrs<'div'>(\n                { sx: [diagramLanesStyles.header, diagramLanesDynamicStyles.width(header)] },\n                propsHeader,\n              )}\n            >\n              {lane.name}\n            </div>\n          </div>\n        ))}\n      </div>\n    ),\n);\n"],"mappings":";;;;;;;;;AAiDA,SAAgB,YACd,OACA,EAAE,OAAO,WAAW,KAAK,IAAI,GAAG,IAAI,KACvB;CAEb,OAAO;EAAE;EAAG;EAAG;EAAO,QADP,MAAM,QAAQ,KAAK,SAAS,OAAO,KAAK,QAAQ,WAAW,CACpD;CAAO;AAC/B;;AAGA,IAAa,qBAAqB,IAAI,OAAO;CAE3C,MAAM;EACJ,UAAU;EACV,MAAM;EACN,KAAK;EACL,cAAc;EAEd,cAAc;EACd,cAAc;EACd,cAAc;CAChB;CACA,MAAM;EACJ,SAAS;EACT,WAAW;EACX,qBAAqB;GAAE,SAAS;GAAO,eAAe;EAAE;EACxD,qBAAqB;EACrB,qBAAqB;CACvB;CACA,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,WAAW;EACX,eAAe;EACf,WAAW;EACX,YAAY;EACZ,OAAO;EACP,sBAAsB;EACtB,sBAAsB;EACtB,sBAAsB;CACxB;AACF,CAAC;;AAGD,IAAa,4BAA4B,IAAI,OAAO;CAClD,KAAK,GAAW,OAAe,EAAE,WAAW,aAAa,EAAC,MAAO,EAAC,KAAM;CACxE,QAAQ,WAAmB,EAAE,MAAM;CACnC,SAAS,YAAoB,EAAE,OAAO;AACxC,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAGa,GAAG;CAAA,MAAA,IAAAA,aAAA,QAAA,KACV,CAAC;CAAA,MAAA,IAAAA,aAAA,QAAA,KACD,CAAC;CAAA,MAAA,SAAAA,aAAA,QAAA,UACI,EAAE;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAGR,OAAIC,UAAA,QAAA,MAAA,IAAA;CAAA,aAEPC,YAAA,OAEQ,WACF,EACE,IAAI;EACF,mBAAmB;EAAI,IAAA,KACvB,0BAA0B,UAAE,CAAA,EAAA,OAAA,EAAA,KAAA,GAAA,IAAA;EAAA,IAAA,KAC5B,0BAA0B,aAAK,CAAA,MAAA,KAAA,GAAA,IAAA;CAAA,EAEnC,GACA,IACF,GAAC,CAEA,MAAA,MAAM,KAAK,MAAM,UAAKA,YAAA,OAAAC,cAAA,EAAA,OAEd,MAAK,GACN,WACF,EACE,IAAI,CACF,mBAAmB,MAAI,IAAA,KACvB,0BAA0B,cAAM,CAAC,KAAK,QAAI,SAAA,KAAY,CAAA,CAAA,EAE1D,GAAC,UAAA,KAEH,CAAC,GAAA,CAAAD,YAAA,OAGK,WACF,EAAE,IAAI,CAAC,mBAAmB,QAAM,IAAA,KAAE,0BAA0B,aAAK,CAAA,OAAA,KAAA,GAAA,IAAA,CAAA,EAAU,GAAC,YAAA,KAE9E,GAAC,CAEA,KAAK,IAAI,CAAA,CAAA,CAAA,CAGf,CAAC,CAAA;AAEL,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}
+{"version":3,"file":"DiagramLanes.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/diagram/DiagramLanes.tsx"],"sourcesContent":["/**\n * 泳道：虚线框出的一组横向泳道，左边一栏是泳道名（岗位、部门、系统），不着底色（画布的网格透过来）。放在 Diagram 的 backdrop 里，\n * 用画布坐标、随视口平移缩放；extent 写上泳道的范围，适应画布时整个放进来：\n *\n *   const lanes = [{ name: '申请人' }, { name: '部门经理' }, { name: '财务', size: 160 }];\n *   <Diagram backdrop={<DiagramLanes lanes={lanes} width={860} />} extent={lanesExtent(lanes, { width: 860 })} … />\n *\n * 泳道从 (x, y) 开始往下排，每条的高是它的 size，没写时用 laneSize；节点的纵坐标落在哪条泳道的范围里由使用方排。\n * 部件：Root（div）、Lane（每条泳道）、Header（泳道名）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport type { DiagramRect } from './geometry';\n\n/** 一条泳道 */\nexport interface DiagramLane {\n  /** 泳道名 */\n  name: VNodeChild;\n  /** 这条泳道的高（画布坐标）；不写时用 DiagramLanes 的 laneSize */\n  size?: number;\n}\n\n/** 泳道的排法：起点、长度与默认的高 */\nexport interface DiagramLanesLayout {\n  /** 泳道的长度（含泳道名那一栏，画布坐标） */\n  width: number;\n  /** 没写 size 的泳道的高，默认 120 */\n  laneSize?: number;\n  /** 左上角的横坐标，默认 0 */\n  x?: number;\n  /** 左上角的纵坐标，默认 0 */\n  y?: number;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface DiagramLanesProps extends PartProps<'div'>, DiagramLanesLayout {\n  /** 泳道，从上往下 */\n  lanes: readonly DiagramLane[];\n  /** 泳道名那一栏的宽（画布坐标），默认 88 */\n  header?: number;\n  /** 每条泳道的部件属性 */\n  propsLane?: PartProps<'div'>;\n  /** 泳道名的部件属性 */\n  propsHeader?: PartProps<'div'>;\n}\n\n/** 泳道整体占的范围（画布坐标）：交给 Diagram 的 extent */\nexport function lanesExtent(\n  lanes: readonly DiagramLane[],\n  { width, laneSize = 120, x = 0, y = 0 }: DiagramLanesLayout,\n): DiagramRect {\n  const height = lanes.reduce((sum, lane) => sum + (lane.size ?? laneSize), 0);\n  return { x, y, width, height };\n}\n\n/** DiagramLanes 的样式：root、lane、header */\nexport const diagramLanesStyles = css.create({\n  // 虚线、不着底色：画布的点阵透过来，泳道只是分区，不像一张压在画布上的表\n  root: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    borderRadius: '_md',\n    // 外框用 outline 画：不占位置，泳道的坐标与 lanesExtent 一致\n    outlineWidth: '_xs',\n    outlineStyle: 'dashed',\n    outlineColor: '_borderStrong',\n  },\n  lane: {\n    display: 'flex',\n    boxSizing: 'border-box',\n    borderBlockEndWidth: { default: '_xs', ':last-child': 0 },\n    borderBlockEndStyle: 'dashed',\n    borderBlockEndColor: '_borderStrong',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    boxSizing: 'border-box',\n    paddingInline: '_space.xs',\n    textAlign: 'center',\n    fontWeight: '_semibold',\n    color: '_textMuted',\n    borderInlineEndWidth: '_xs',\n    borderInlineEndStyle: 'dashed',\n    borderInlineEndColor: '_borderStrong',\n  },\n});\n\n/** 随数据变的样式：位置与大小 */\nexport const diagramLanesDynamicStyles = css.create({\n  at: (x: number, y: number) => ({ transform: `translate(${x}px, ${y}px)` }),\n  width: (width: number) => ({ width }),\n  height: (height: number) => ({ height }),\n});\n\n/** 泳道 */\nexport const DiagramLanes = _component(\n  ({\n    lanes,\n    width,\n    laneSize = 120,\n    x = 0,\n    y = 0,\n    header = 88,\n    propsLane,\n    propsHeader,\n    ...rest\n  }: DiagramLanesProps) =>\n    () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              diagramLanesStyles.root,\n              diagramLanesDynamicStyles.at(x, y),\n              diagramLanesDynamicStyles.width(width),\n            ],\n          },\n          rest,\n        )}\n      >\n        {lanes.map((lane, index) => (\n          <div\n            key={index}\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  diagramLanesStyles.lane,\n                  diagramLanesDynamicStyles.height(lane.size ?? laneSize),\n                ],\n              },\n              propsLane,\n            )}\n          >\n            <div\n              {...mergeAttrs<'div'>(\n                { sx: [diagramLanesStyles.header, diagramLanesDynamicStyles.width(header)] },\n                propsHeader,\n              )}\n            >\n              {lane.name}\n            </div>\n          </div>\n        ))}\n      </div>\n    ),\n);\n"],"mappings":";;;;;;;;;AAiDA,SAAgB,YACd,OACA,EAAE,OAAO,WAAW,KAAK,IAAI,GAAG,IAAI,KACvB;CAEb,OAAO;EAAE;EAAG;EAAG;EAAO,QADP,MAAM,QAAQ,KAAK,SAAS,OAAO,KAAK,QAAQ,WAAW,CACpD;CAAO;AAC/B;;AAGA,IAAa,qBAAqB,IAAI,OAAO;CAE3C,MAAM;EACJ,UAAU;EACV,MAAM;EACN,KAAK;EACL,cAAc;EAEd,cAAc;EACd,cAAc;EACd,cAAc;CAChB;CACA,MAAM;EACJ,SAAS;EACT,WAAW;EACX,qBAAqB;GAAE,SAAS;GAAO,eAAe;EAAE;EACxD,qBAAqB;EACrB,qBAAqB;CACvB;CACA,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,WAAW;EACX,eAAe;EACf,WAAW;EACX,YAAY;EACZ,OAAO;EACP,sBAAsB;EACtB,sBAAsB;EACtB,sBAAsB;CACxB;AACF,CAAC;;AAGD,IAAa,4BAA4B,IAAI,OAAO;CAClD,KAAK,GAAW,OAAe,EAAE,WAAW,aAAa,EAAC,MAAO,EAAC,KAAM;CACxE,QAAQ,WAAmB,EAAE,MAAM;CACnC,SAAS,YAAoB,EAAE,OAAO;AACxC,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAGa,GAAG;CAAA,MAAA,IAAAA,aAAA,QAAA,KACV,CAAC;CAAA,MAAA,IAAAA,aAAA,QAAA,KACD,CAAC;CAAA,MAAA,SAAAA,aAAA,QAAA,UACI,EAAE;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAGR,OAAIC,UAAA,QAAA,MAAA,IAAA;CAAA,aAEPC,YAAA,OAEQ,WACF,EACE,IAAI;EACF,mBAAmB;EAAI,IAAA,KACvB,0BAA0B,UAAE,CAAA,EAAA,OAAA,EAAA,KAAA,GAAA,IAAA;EAAA,IAAA,KAC5B,0BAA0B,aAAK,CAAA,MAAA,KAAA,GAAA,IAAA;CAAA,EAEnC,GACA,IACF,GAAC,CAEA,MAAA,MAAM,KAAK,MAAM,UAAKA,YAAA,OAAAC,cAAA,EAAA,OAEd,MAAK,GACN,WACF,EACE,IAAI,CACF,mBAAmB,MAAI,IAAA,KACvB,0BAA0B,cAAM,CAAC,KAAK,QAAI,SAAA,KAAY,CAAA,CAAA,EAE1D,GAAC,UAAA,KAEH,CAAC,GAAA,CAAAD,YAAA,OAGK,WACF,EAAE,IAAI,CAAC,mBAAmB,QAAM,IAAA,KAAE,0BAA0B,aAAK,CAAA,OAAA,KAAA,GAAA,IAAA,CAAA,EAAU,GAAC,YAAA,KAE9E,GAAC,CAEA,KAAK,IAAI,CAAA,CAAA,CAAA,CAGf,CAAC,CAAA;AAEL,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}

package/dist/diagram/DiagramMinimap.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type PartProps } from '../utils/props';
 /** 小地图放在画布的哪个角 */
 export interface DiagramMinimapPlacements {

package/dist/diagram/DiagramMinimap.js

@@ -5,7 +5,7 @@ import { boundsOf } from "./geometry.js";
 import { DiagramContext } from "./Diagram.js";
 import { createVNode } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/diagram/DiagramMinimap.tsx
 /** 小地图放在画布的哪个角 */
 /** 未声明的属性落到外层 div 上 */

package/dist/diagram/DiagramMinimap.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiagramMinimap.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/diagram/DiagramMinimap.tsx"],"sourcesContent":["/**\n * 小地图：整张图的缩略（节点画成小方块）与当前视口的框，点或拖小地图把视口移过去。放在 Diagram 的 overlay 里：\n *\n *   <Diagram overlay={<><DiagramControls /><DiagramMinimap /></>} … />\n *\n * 只是指针用户的便利：键盘用户用视口的方向键平移，读屏不念它（aria-hidden）。\n * 部件：Root（div）、Node（每个节点的方块）、Viewport（视口的框）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { startMove } from '../utils/dom/move';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { diagramInternals } from './controller';\nimport { DiagramContext } from './Diagram';\nimport { boundsOf } from './geometry';\n\n/** 小地图放在画布的哪个角 */\nexport interface DiagramMinimapPlacements {\n  /** 右下（从右到左时左下），默认 */\n  'bottom-end': unknown;\n  /** 左下 */\n  'bottom-start': unknown;\n  /** 右上 */\n  'top-end': unknown;\n  /** 左上 */\n  'top-start': unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface DiagramMinimapProps extends PartProps<'div'> {\n  /** 放在画布的哪个角，默认 bottom-end */\n  placement?: keyof DiagramMinimapPlacements;\n  /** 宽（px），默认 168 */\n  width?: number;\n  /** 高（px），默认 112 */\n  height?: number;\n  /** 节点方块的部件属性 */\n  propsNode?: PartProps<'rect'>;\n  /** 视口框的部件属性 */\n  propsViewport?: PartProps<'rect'>;\n}\n\n/** DiagramMinimap 的样式 */\nexport const diagramMinimapStyles = css.create({\n  root: {\n    position: 'absolute',\n    pointerEvents: 'auto',\n    overflow: 'hidden',\n    backgroundColor: '_surface',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_md',\n    boxShadow: '_sm',\n    cursor: 'pointer',\n    touchAction: 'none',\n  },\n  'bottom-end': { insetBlockEnd: '_space.sm', insetInlineEnd: '_space.sm' },\n  'bottom-start': { insetBlockEnd: '_space.sm', insetInlineStart: '_space.sm' },\n  'top-end': { insetBlockStart: '_space.sm', insetInlineEnd: '_space.sm' },\n  'top-start': { insetBlockStart: '_space.sm', insetInlineStart: '_space.sm' },\n  svg: { display: 'block' },\n  node: { fill: '_borderStrong' },\n  viewport: {\n    fill: `color-mix(in srgb, currentColor 6%, transparent)`,\n    stroke: '_accent',\n    strokeWidth: 1.5,\n    color: '_accent',\n  },\n});\n\n/** 小地图 */\nexport const DiagramMinimap = _component(\n  ({\n    placement = 'bottom-end',\n    width = 168,\n    height = 112,\n    propsNode,\n    propsViewport,\n    ...rest\n  }: DiagramMinimapProps) => {\n    const diagram = DiagramContext.inject();\n    const internal = diagramInternals(diagram);\n    let svg: SVGSVGElement | null = null;\n\n    /** 视口在画布坐标里的范围 */\n    const visible = () => {\n      const { width: viewWidth, height: viewHeight } = internal.size.value;\n      return {\n        x: -diagram.x / diagram.scale,\n        y: -diagram.y / diagram.scale,\n        width: viewWidth / diagram.scale,\n        height: viewHeight / diagram.scale,\n      };\n    };\n\n    /** 把视口的中心移到小地图上点到的位置 */\n    function centerAt(clientX: number, clientY: number) {\n      const matrix = svg?.getScreenCTM()?.inverse();\n      if (!matrix) return;\n      const point = new DOMPoint(clientX, clientY).matrixTransform(matrix);\n      const { width: viewWidth, height: viewHeight } = internal.size.value;\n      internal.view.panTo(\n        viewWidth / 2 - point.x * diagram.scale,\n        viewHeight / 2 - point.y * diagram.scale,\n      );\n    }\n\n    function onPointerdown(event: PointerEvent) {\n      if (event.button !== 0) return;\n      event.preventDefault();\n      centerAt(event.clientX, event.clientY);\n      startMove(event, { onMove: (point) => centerAt(point.clientX, point.clientY) });\n    }\n\n    return () => {\n      const nodes = internal.nodes();\n      const view = visible();\n      // 视口也算进范围：拖到很远时框也一直看得见\n      const frame = boundsOf([...nodes, view]) ?? { x: 0, y: 0, width: 1, height: 1 };\n      const pad = Math.max(frame.width, frame.height) * 0.04;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [diagramMinimapStyles.root, diagramMinimapStyles[placement]] },\n            rest,\n            { 'aria-hidden': 'true', onPointerdown },\n          )}\n        >\n          <svg\n            ref={(element: unknown) => (svg = element as SVGSVGElement | null)}\n            {...css.attrs(diagramMinimapStyles.svg)}\n            width={width}\n            height={height}\n            viewBox={`${frame.x - pad} ${frame.y - pad} ${frame.width + pad * 2} ${frame.height + pad * 2}`}\n            preserveAspectRatio=\"xMidYMid meet\"\n          >\n            {nodes.map((node, index) => (\n              <rect\n                key={index}\n                {...mergeAttrs<'rect'>({ sx: diagramMinimapStyles.node }, propsNode, {\n                  x: node.x,\n                  y: node.y,\n                  width: node.width,\n                  height: node.height,\n                  rx: Math.min(node.width, node.height) * 0.12,\n                })}\n              />\n            ))}\n            <rect\n              {...mergeAttrs<'rect'>({ sx: diagramMinimapStyles.viewport }, propsViewport, {\n                x: view.x,\n                y: view.y,\n                width: view.width,\n                height: view.height,\n                // 小地图按比例缩得很小，描边不跟着缩\n                'vector-effect': 'non-scaling-stroke',\n              })}\n            />\n          </svg>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"DiagramMinimap.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/diagram/DiagramMinimap.tsx"],"sourcesContent":["/**\n * 小地图：整张图的缩略（节点画成小方块）与当前视口的框，点或拖小地图把视口移过去。放在 Diagram 的 overlay 里：\n *\n *   <Diagram overlay={<><DiagramControls /><DiagramMinimap /></>} … />\n *\n * 只是指针用户的便利：键盘用户用视口的方向键平移，读屏不念它（aria-hidden）。\n * 部件：Root（div）、Node（每个节点的方块）、Viewport（视口的框）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { startMove } from '../utils/dom/move';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { diagramInternals } from './controller';\nimport { DiagramContext } from './Diagram';\nimport { boundsOf } from './geometry';\n\n/** 小地图放在画布的哪个角 */\nexport interface DiagramMinimapPlacements {\n  /** 右下（从右到左时左下），默认 */\n  'bottom-end': unknown;\n  /** 左下 */\n  'bottom-start': unknown;\n  /** 右上 */\n  'top-end': unknown;\n  /** 左上 */\n  'top-start': unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface DiagramMinimapProps extends PartProps<'div'> {\n  /** 放在画布的哪个角，默认 bottom-end */\n  placement?: keyof DiagramMinimapPlacements;\n  /** 宽（px），默认 168 */\n  width?: number;\n  /** 高（px），默认 112 */\n  height?: number;\n  /** 节点方块的部件属性 */\n  propsNode?: PartProps<'rect'>;\n  /** 视口框的部件属性 */\n  propsViewport?: PartProps<'rect'>;\n}\n\n/** DiagramMinimap 的样式 */\nexport const diagramMinimapStyles = css.create({\n  root: {\n    position: 'absolute',\n    pointerEvents: 'auto',\n    overflow: 'hidden',\n    backgroundColor: '_surface',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_md',\n    boxShadow: '_sm',\n    cursor: 'pointer',\n    touchAction: 'none',\n  },\n  'bottom-end': { insetBlockEnd: '_space.sm', insetInlineEnd: '_space.sm' },\n  'bottom-start': { insetBlockEnd: '_space.sm', insetInlineStart: '_space.sm' },\n  'top-end': { insetBlockStart: '_space.sm', insetInlineEnd: '_space.sm' },\n  'top-start': { insetBlockStart: '_space.sm', insetInlineStart: '_space.sm' },\n  svg: { display: 'block' },\n  node: { fill: '_borderStrong' },\n  viewport: {\n    fill: `color-mix(in srgb, currentColor 6%, transparent)`,\n    stroke: '_accent',\n    strokeWidth: 1.5,\n    color: '_accent',\n  },\n});\n\n/** 小地图 */\nexport const DiagramMinimap = _component(\n  ({\n    placement = 'bottom-end',\n    width = 168,\n    height = 112,\n    propsNode,\n    propsViewport,\n    ...rest\n  }: DiagramMinimapProps) => {\n    const diagram = DiagramContext.inject();\n    const internal = diagramInternals(diagram);\n    let svg: SVGSVGElement | null = null;\n\n    /** 视口在画布坐标里的范围 */\n    const visible = () => {\n      const { width: viewWidth, height: viewHeight } = internal.size.value;\n      return {\n        x: -diagram.x / diagram.scale,\n        y: -diagram.y / diagram.scale,\n        width: viewWidth / diagram.scale,\n        height: viewHeight / diagram.scale,\n      };\n    };\n\n    /** 把视口的中心移到小地图上点到的位置 */\n    function centerAt(clientX: number, clientY: number) {\n      const matrix = svg?.getScreenCTM()?.inverse();\n      if (!matrix) return;\n      const point = new DOMPoint(clientX, clientY).matrixTransform(matrix);\n      const { width: viewWidth, height: viewHeight } = internal.size.value;\n      internal.view.panTo(\n        viewWidth / 2 - point.x * diagram.scale,\n        viewHeight / 2 - point.y * diagram.scale,\n      );\n    }\n\n    function onPointerdown(event: PointerEvent) {\n      if (event.button !== 0) return;\n      event.preventDefault();\n      centerAt(event.clientX, event.clientY);\n      startMove(event, { onMove: (point) => centerAt(point.clientX, point.clientY) });\n    }\n\n    return () => {\n      const nodes = internal.nodes();\n      const view = visible();\n      // 视口也算进范围：拖到很远时框也一直看得见\n      const frame = boundsOf([...nodes, view]) ?? { x: 0, y: 0, width: 1, height: 1 };\n      const pad = Math.max(frame.width, frame.height) * 0.04;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [diagramMinimapStyles.root, diagramMinimapStyles[placement]] },\n            rest,\n            { 'aria-hidden': 'true', onPointerdown },\n          )}\n        >\n          <svg\n            ref={(element: unknown) => (svg = element as SVGSVGElement | null)}\n            {...css.attrs(diagramMinimapStyles.svg)}\n            width={width}\n            height={height}\n            viewBox={`${frame.x - pad} ${frame.y - pad} ${frame.width + pad * 2} ${frame.height + pad * 2}`}\n            preserveAspectRatio=\"xMidYMid meet\"\n          >\n            {nodes.map((node, index) => (\n              <rect\n                key={index}\n                {...mergeAttrs<'rect'>({ sx: diagramMinimapStyles.node }, propsNode, {\n                  x: node.x,\n                  y: node.y,\n                  width: node.width,\n                  height: node.height,\n                  rx: Math.min(node.width, node.height) * 0.12,\n                })}\n              />\n            ))}\n            <rect\n              {...mergeAttrs<'rect'>({ sx: diagramMinimapStyles.viewport }, propsViewport, {\n                x: view.x,\n                y: view.y,\n                width: view.width,\n                height: view.height,\n                // 小地图按比例缩得很小，描边不跟着缩\n                'vector-effect': 'non-scaling-stroke',\n              })}\n            />\n          </svg>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/diagram/DiagramNode.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 import type { StatusTone } from '../utils/style/tone-styles';

package/dist/diagram/DiagramNode.js

@@ -1,7 +1,7 @@
 import { dataAttrs, hasContent, mergeAttrs } from "../utils/props.js";
 import { createVNode } from "vue";
 import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/diagram/DiagramNode.tsx
 /** 节点的形状 */
 /** 未声明的属性落到外层 div 上；原生的 title 属性让给标题 */

package/dist/diagram/DiagramNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiagramNode.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/diagram/DiagramNode.tsx"],"sourcesContent":["/**\n * 画布的标准节点：填满 Diagram 给的节点框的卡片，流程步骤、组织架构、关系图的节点不必各自写样式。\n * Diagram 没给 children 时每个节点就画成它（标题是 getNodeLabel）。\n *\n *   <Diagram nodes={steps} …>{(step) => <DiagramNode title={step.name} shape={step.end ? 'pill' : 'rect'} />}</Diagram>\n *   <DiagramNode start={<Avatar name={person.name} size=\"sm\" />} title={person.name} description={person.title} align=\"start\" />\n *   <DiagramNode start={<Icon icon={Warehouse} />} tone=\"success\" title=\"华东仓\" description=\"仓库\" align=\"start\" />\n *\n * 选中、焦点的描边由 Diagram 画在节点框外，shape=\"pill\" 时描边也是胶囊形。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { dataAttrs, hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport type { StatusTone } from '../utils/style/tone-styles';\n\n/** 节点的形状 */\nexport interface DiagramNodeShapes {\n  /** 圆角矩形，默认 */\n  rect: unknown;\n  /** 胶囊形：开始、结束 */\n  pill: unknown;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性让给标题 */\nexport interface DiagramNodeProps extends PartProps<'div', 'title'> {\n  /** 标题：节点的名字 */\n  title?: VNodeChild;\n  /** 标题下的说明（次要文字）：岗位、类型、处理人 */\n  description?: VNodeChild;\n  /** 起始边：图标、头像；图标的颜色跟着 tone */\n  start?: VNodeChild;\n  /** 结束边：标记、数字 */\n  end?: VNodeChild;\n  /**\n   * 色调：底色、边框与起始边的颜色。neutral 是普通的卡片，别的色调用来区分类型或标出状态（当前步骤、已完成、被退回）\n   * @default 'neutral'\n   */\n  tone?: StatusTone;\n  /**\n   * 形状\n   * @default 'rect'\n   */\n  shape?: keyof DiagramNodeShapes;\n  /** 虚线边框：草稿、停用、还没走到的 */\n  dashed?: boolean;\n  /**\n   * 内容的对齐：center 居中（流程步骤），start 靠起始边（名片式：头像、图标在前）\n   * @default 'center'\n   */\n  align?: 'center' | 'start';\n  /** 说明下面的更多内容 */\n  children?: VNodeChild;\n}\n\n/** DiagramNode 的样式：root、pill、dashed、alignStart、body、title、description、start、end */\nexport const diagramNodeStyles = css.create({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_space.sm',\n    minWidth: 0,\n    boxSizing: 'border-box',\n    paddingInline: '_space.sm',\n    overflow: 'hidden',\n    lineHeight: '_tight',\n    color: '_text',\n    borderWidth: '_sm',\n    borderStyle: 'solid',\n    borderRadius: '_md',\n    boxShadow: '_xs',\n  },\n  pill: { borderRadius: '_full', paddingInline: '_space.md' },\n  dashed: { borderStyle: 'dashed', boxShadow: 'none' },\n  alignStart: { justifyContent: 'flex-start' },\n  body: { display: 'flex', flexDirection: 'column', gap: '2px', minWidth: 0, textAlign: 'center' },\n  bodyStart: { textAlign: 'start' },\n  title: { fontWeight: '_medium', overflowWrap: 'anywhere' },\n  description: { fontSize: '0.85em', color: '_textMuted', overflowWrap: 'anywhere' },\n  start: { display: 'flex', flexShrink: 0 },\n  end: { display: 'flex', alignItems: 'center', flexShrink: 0, marginInlineStart: 'auto' },\n});\n\n/** 色调：节点的底色与边框 */\nexport const diagramNodeToneStyles = css.create({\n  neutral: { backgroundColor: '_surfaceRaised', borderColor: '_borderStrong' },\n  accent: { backgroundColor: '_accentSoft', borderColor: '_accentBorder' },\n  info: { backgroundColor: '_infoSoft', borderColor: '_infoBorder' },\n  success: { backgroundColor: '_successSoft', borderColor: '_successBorder' },\n  warning: { backgroundColor: '_warningSoft', borderColor: '_warningBorder' },\n  danger: { backgroundColor: '_dangerSoft', borderColor: '_dangerBorder' },\n});\n\n/** 色调：起始边（图标）的颜色 */\nconst startTones = css.create({\n  neutral: { color: '_textMuted' },\n  accent: { color: '_accentText' },\n  info: { color: '_infoText' },\n  success: { color: '_successText' },\n  warning: { color: '_warningText' },\n  danger: { color: '_dangerText' },\n});\n\n/** 画布的标准节点 */\nexport const DiagramNode = _component(\n  ({\n    title,\n    description,\n    start,\n    end,\n    tone = 'neutral',\n    shape = 'rect',\n    dashed = false,\n    align = 'center',\n    children,\n    ...rest\n  }: DiagramNodeProps) =>\n    () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              diagramNodeStyles.root,\n              diagramNodeToneStyles[tone],\n              shape === 'pill' && diagramNodeStyles.pill,\n              dashed && diagramNodeStyles.dashed,\n              align === 'start' && diagramNodeStyles.alignStart,\n            ],\n          },\n          rest,\n          // Diagram 按它把选中、焦点的描边画成同样的形状\n          dataAttrs({ 'data-diagram-shape': shape }),\n        )}\n      >\n        {hasContent(start) && (\n          <span {...css.attrs(diagramNodeStyles.start, startTones[tone])}>{start}</span>\n        )}\n        {/* 标题、说明是块级元素：读屏与无障碍检查从内容取文字时两段之间有停顿，不会连成一串 */}\n        <div\n          {...css.attrs(diagramNodeStyles.body, align === 'start' && diagramNodeStyles.bodyStart)}\n        >\n          {hasContent(title) && <div {...css.attrs(diagramNodeStyles.title)}>{title}</div>}\n          {hasContent(description) && (\n            <div {...css.attrs(diagramNodeStyles.description)}>{description}</div>\n          )}\n          {children}\n        </div>\n        {hasContent(end) && <span {...css.attrs(diagramNodeStyles.end)}>{end}</span>}\n      </div>\n    ),\n);\n"],"mappings":"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"}
+{"version":3,"file":"DiagramNode.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/diagram/DiagramNode.tsx"],"sourcesContent":["/**\n * 画布的标准节点：填满 Diagram 给的节点框的卡片，流程步骤、组织架构、关系图的节点不必各自写样式。\n * Diagram 没给 children 时每个节点就画成它（标题是 getNodeLabel）。\n *\n *   <Diagram nodes={steps} …>{(step) => <DiagramNode title={step.name} shape={step.end ? 'pill' : 'rect'} />}</Diagram>\n *   <DiagramNode start={<Avatar name={person.name} size=\"sm\" />} title={person.name} description={person.title} align=\"start\" />\n *   <DiagramNode start={<Icon icon={Warehouse} />} tone=\"success\" title=\"华东仓\" description=\"仓库\" align=\"start\" />\n *\n * 选中、焦点的描边由 Diagram 画在节点框外，shape=\"pill\" 时描边也是胶囊形。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { dataAttrs, hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport type { StatusTone } from '../utils/style/tone-styles';\n\n/** 节点的形状 */\nexport interface DiagramNodeShapes {\n  /** 圆角矩形，默认 */\n  rect: unknown;\n  /** 胶囊形：开始、结束 */\n  pill: unknown;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性让给标题 */\nexport interface DiagramNodeProps extends PartProps<'div', 'title'> {\n  /** 标题：节点的名字 */\n  title?: VNodeChild;\n  /** 标题下的说明（次要文字）：岗位、类型、处理人 */\n  description?: VNodeChild;\n  /** 起始边：图标、头像；图标的颜色跟着 tone */\n  start?: VNodeChild;\n  /** 结束边：标记、数字 */\n  end?: VNodeChild;\n  /**\n   * 色调：底色、边框与起始边的颜色。neutral 是普通的卡片，别的色调用来区分类型或标出状态（当前步骤、已完成、被退回）\n   * @default 'neutral'\n   */\n  tone?: StatusTone;\n  /**\n   * 形状\n   * @default 'rect'\n   */\n  shape?: keyof DiagramNodeShapes;\n  /** 虚线边框：草稿、停用、还没走到的 */\n  dashed?: boolean;\n  /**\n   * 内容的对齐：center 居中（流程步骤），start 靠起始边（名片式：头像、图标在前）\n   * @default 'center'\n   */\n  align?: 'center' | 'start';\n  /** 说明下面的更多内容 */\n  children?: VNodeChild;\n}\n\n/** DiagramNode 的样式：root、pill、dashed、alignStart、body、title、description、start、end */\nexport const diagramNodeStyles = css.create({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_space.sm',\n    minWidth: 0,\n    boxSizing: 'border-box',\n    paddingInline: '_space.sm',\n    overflow: 'hidden',\n    lineHeight: '_tight',\n    color: '_text',\n    borderWidth: '_sm',\n    borderStyle: 'solid',\n    borderRadius: '_md',\n    boxShadow: '_xs',\n  },\n  pill: { borderRadius: '_full', paddingInline: '_space.md' },\n  dashed: { borderStyle: 'dashed', boxShadow: 'none' },\n  alignStart: { justifyContent: 'flex-start' },\n  body: { display: 'flex', flexDirection: 'column', gap: '2px', minWidth: 0, textAlign: 'center' },\n  bodyStart: { textAlign: 'start' },\n  title: { fontWeight: '_medium', overflowWrap: 'anywhere' },\n  description: { fontSize: '0.85em', color: '_textMuted', overflowWrap: 'anywhere' },\n  start: { display: 'flex', flexShrink: 0 },\n  end: { display: 'flex', alignItems: 'center', flexShrink: 0, marginInlineStart: 'auto' },\n});\n\n/** 色调：节点的底色与边框 */\nexport const diagramNodeToneStyles = css.create({\n  neutral: { backgroundColor: '_surfaceRaised', borderColor: '_borderStrong' },\n  accent: { backgroundColor: '_accentSoft', borderColor: '_accentBorder' },\n  info: { backgroundColor: '_infoSoft', borderColor: '_infoBorder' },\n  success: { backgroundColor: '_successSoft', borderColor: '_successBorder' },\n  warning: { backgroundColor: '_warningSoft', borderColor: '_warningBorder' },\n  danger: { backgroundColor: '_dangerSoft', borderColor: '_dangerBorder' },\n});\n\n/** 色调：起始边（图标）的颜色 */\nconst startTones = css.create({\n  neutral: { color: '_textMuted' },\n  accent: { color: '_accentText' },\n  info: { color: '_infoText' },\n  success: { color: '_successText' },\n  warning: { color: '_warningText' },\n  danger: { color: '_dangerText' },\n});\n\n/** 画布的标准节点 */\nexport const DiagramNode = _component(\n  ({\n    title,\n    description,\n    start,\n    end,\n    tone = 'neutral',\n    shape = 'rect',\n    dashed = false,\n    align = 'center',\n    children,\n    ...rest\n  }: DiagramNodeProps) =>\n    () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              diagramNodeStyles.root,\n              diagramNodeToneStyles[tone],\n              shape === 'pill' && diagramNodeStyles.pill,\n              dashed && diagramNodeStyles.dashed,\n              align === 'start' && diagramNodeStyles.alignStart,\n            ],\n          },\n          rest,\n          // Diagram 按它把选中、焦点的描边画成同样的形状\n          dataAttrs({ 'data-diagram-shape': shape }),\n        )}\n      >\n        {hasContent(start) && (\n          <span {...css.attrs(diagramNodeStyles.start, startTones[tone])}>{start}</span>\n        )}\n        {/* 标题、说明是块级元素：读屏与无障碍检查从内容取文字时两段之间有停顿，不会连成一串 */}\n        <div\n          {...css.attrs(diagramNodeStyles.body, align === 'start' && diagramNodeStyles.bodyStart)}\n        >\n          {hasContent(title) && <div {...css.attrs(diagramNodeStyles.title)}>{title}</div>}\n          {hasContent(description) && (\n            <div {...css.attrs(diagramNodeStyles.description)}>{description}</div>\n          )}\n          {children}\n        </div>\n        {hasContent(end) && <span {...css.attrs(diagramNodeStyles.end)}>{end}</span>}\n      </div>\n    ),\n);\n"],"mappings":"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"}

package/dist/display/Accordion.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type VNodeChild } from 'vue';
 import { type ButtonBaseProps } from '../base/ButtonBase';
 import { type IconProps } from '../base/Icon';

package/dist/display/Accordion.js

@@ -7,7 +7,7 @@ import { selectedValues, toggleSelection } from "../utils/data/selection.js";
 import { Collapse } from "./Collapse.js";
 import { computed, createVNode, h, isVNode, shallowRef, useId } from "vue";
 import { _component, bindable, childrenProp, createContext, forwardChildren, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ChevronDown } from "@lucide/icons";
 //#region src/display/Accordion.tsx
 /**

package/dist/display/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["_isVNode","_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_computed","_createVNode","_mergeProps","_vtp_forwardChildren"],"sources":["../../src/display/Accordion.tsx"],"sourcesContent":["/**\n * 手风琴，复合组件：Accordion（div）> AccordionItem（标题按钮 + 展开收起的内容）。WAI-ARIA 的 Accordion 模式：\n * 每个标题是 heading 里的 button（aria-expanded、aria-controls），内容是 role=\"region\"、以标题为名称；\n * 标题都在 Tab 顺序里，另外 ↑ / ↓ 在标题之间移动（到头后循环），Home / End 到第一个、最后一个。参考 Radix Accordion。\n *\n *   <Accordion _value={open} aria-label=\"常见问题\">\n *     <AccordionItem value=\"ship\" title=\"多久发货？\">付款后 48 小时内。</AccordionItem>\n *     <AccordionItem value=\"refund\" title=\"怎么退款？\">…</AccordionItem>\n *   </Accordion>\n *   <Accordion selectionMode=\"multiple\" _value={openList}>…</Accordion>\n *\n * 展开收起的动画同 Collapsible（Collapse 的 CSS 过渡）。部件见 AccordionItemProps。\n */\nimport { ChevronDown } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { h, useId, type VNodeChild } from 'vue';\nimport { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { selectedValues, toggleSelection, type SelectionProps } from '../utils/data/selection';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { disclosureStyles } from '../utils/style/transitions';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { Collapse, type CollapseProps } from './Collapse';\n\n/** Accordion 交给 AccordionItem 的状态 */\nexport interface AccordionState {\n  /** 展开着的项 */\n  readonly expanded: readonly string[];\n  /** 标题的层级（h2–h6） */\n  readonly headingLevel: 2 | 3 | 4 | 5 | 6;\n  /** 整组不可用 */\n  readonly disabled: boolean;\n  /** 展开或收起一项（单开 / 多开的规则由组决定） */\n  toggle(value: string): void;\n}\n\n/** Accordion 的上下文：自定义的项可以 inject 它接入组 */\nexport const AccordionContext = createContext<AccordionState>('Accordion');\n\n/** 两种方式共有的属性；未声明的属性落到外层 div 上 */\ninterface AccordionBaseProps extends PartProps<'div'> {\n  /** 单开时允许把唯一展开的那项也收起，默认 true */\n  collapsible?: boolean;\n  /** 标题的层级，按所在页面的大纲选，默认 3 */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /** 整组不可用 */\n  disabled?: boolean;\n  /** 字号档位；不写时继承 */\n  size?: TextSize;\n  /** AccordionItem */\n  children?: VNodeChild;\n}\n\n/** 单开（selectionMode=\"single\"，value 是展开项的值）或多开（value 是数组） */\nexport type AccordionProps = AccordionBaseProps & SelectionProps;\n\n/** Accordion 的样式：root、item、heading、trigger、chevron、chevronOpen、content */\nexport const accordionStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column' },\n  item: {\n    borderBottomWidth: '_xs',\n    borderBottomStyle: 'solid',\n    borderBottomColor: '_borderMuted',\n  },\n  heading: { margin: 0, fontSize: 'inherit', fontWeight: 'inherit' },\n  // 去掉按钮默认外观、焦点环、波纹、颜色过渡由 ButtonBase 给出\n  trigger: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '_md',\n    width: '_full',\n    minHeight: '_minTarget',\n    paddingBlock: '_md',\n    paddingInline: '_sm',\n    borderRadius: '_sm',\n    backgroundColor: { default: 'transparent', ':hover': '_fill' },\n    color: '_text',\n    fontWeight: '_semibold',\n    textAlign: 'start',\n  },\n  triggerDisabled: { opacity: '_disabled' },\n  chevron: { flexShrink: 0, color: '_textMuted' },\n  chevronOpen: { rotate: '180deg' },\n  content: { paddingInline: '_sm', paddingBlockEnd: '_md', color: '_text' },\n});\n\n/** 手风琴：一组可展开收起的项，单开或多开 */\nexport const Accordion = _component(\n  ({\n    selectionMode = 'single',\n    _value: value = _bindable<string | string[] | null>(null),\n    collapsible = true,\n    headingLevel = 3,\n    disabled = false,\n    size,\n    children,\n    ...rest\n  }: AccordionProps) => {\n    let root = _state.raw<HTMLElement | null>(null);\n    const expanded = _derived(selectedValues(value));\n\n    AccordionContext.provide({\n      get expanded() {\n        return expanded;\n      },\n      get headingLevel() {\n        return headingLevel;\n      },\n      get disabled() {\n        return disabled;\n      },\n      toggle(item) {\n        const next = toggleSelection(expanded, item, {\n          mode: selectionMode,\n          required: !collapsible,\n        });\n        if (next === expanded) return;\n        value = selectionMode === 'multiple' ? [...next] : (next[0] ?? null);\n      },\n    });\n\n    // ↑ / ↓ 在标题之间移动（循环），Home / End 到两端；只在焦点在标题按钮上时处理\n    function onKeydown(event: KeyboardEvent) {\n      const target = event.target as HTMLElement;\n      if (!root || !target.matches('[data-accordion-trigger]')) return;\n      const triggers = [\n        ...root.querySelectorAll<HTMLButtonElement>('[data-accordion-trigger]:not(:disabled)'),\n      ].filter((trigger) => trigger.closest('[data-accordion]') === root);\n      const index = triggers.indexOf(target as HTMLButtonElement);\n      const next = {\n        ArrowDown: triggers[(index + 1) % triggers.length],\n        ArrowUp: triggers[(index - 1 + triggers.length) % triggers.length],\n        Home: triggers[0],\n        End: triggers.at(-1),\n      }[event.key];\n      if (!next) return;\n      event.preventDefault();\n      next.focus();\n    }\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({ sx: [accordionStyles.root, size && fontSizeStyles[size]] }, rest, {\n          ref: _toRef(root),\n          onKeydown,\n        })}\n        data-accordion=\"\"\n        data-disabled={disabled || undefined}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/** 未声明的属性落到每一项的外层 div 上 */\nexport interface AccordionItemProps extends PartProps<'div', 'title'> {\n  /** 这一项的值 */\n  value: string;\n  /** 标题 */\n  title: VNodeChild;\n  /** 不可用：标题按钮 disabled，不能展开收起 */\n  disabled?: boolean;\n  /** 标题（h2–h6）的部件属性 */\n  propsHeading?: PartProps<'h3'>;\n  /** 标题按钮的部件属性 */\n  propsTrigger?: Omit<Partial<ButtonBaseProps>, 'aria-expanded' | 'aria-controls'>;\n  /** 展开箭头的部件属性 */\n  propsChevron?: Partial<IconProps>;\n  /** 内容区（Collapse，role=\"region\"）的部件属性 */\n  propsContent?: Partial<CollapseProps>;\n  /** 内容 */\n  children?: VNodeChild;\n}\n\n/** 手风琴里的一项：标题按钮 + 展开收起的内容 */\nexport const AccordionItem = _component(\n  ({\n    value,\n    title,\n    disabled = false,\n    propsHeading,\n    propsTrigger,\n    propsChevron,\n    propsContent,\n    children,\n    ...rest\n  }: AccordionItemProps) => {\n    const accordion = AccordionContext.inject();\n    const id = useId();\n    const triggerId = `${id}-trigger`;\n    const contentId = `${id}-content`;\n    // Collapse 在页内搜索命中（beforematch）时会写回 open：经这个对象交给组切换\n    const model = {\n      get open() {\n        return accordion.expanded.includes(value);\n      },\n      set open(next: boolean) {\n        if (next !== model.open) accordion.toggle(value);\n      },\n    };\n\n    return () => {\n      const open = model.open;\n      const off = disabled || accordion.disabled;\n      const state = open ? 'open' : 'closed';\n      const trigger = (\n        <ButtonBase\n          {...mergePartProps<ButtonBaseProps>(\n            { sx: [accordionStyles.trigger, off && accordionStyles.triggerDisabled] },\n            propsTrigger,\n            {\n              id: triggerId,\n              disabled: off,\n              'aria-expanded': open,\n              'aria-controls': contentId,\n              onClick: () => accordion.toggle(value),\n            },\n          )}\n          data-accordion-trigger=\"\"\n          data-state={state}\n        >\n          <span>{title}</span>\n          <Icon\n            {...mergePartProps<IconProps>(\n              {\n                icon: ChevronDown,\n                sx: [\n                  accordionStyles.chevron,\n                  disclosureStyles.icon,\n                  open && accordionStyles.chevronOpen,\n                ],\n              },\n              propsChevron,\n            )}\n          />\n        </ButtonBase>\n      );\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: accordionStyles.item }, rest)}\n          data-state={state}\n          data-disabled={off || undefined}\n        >\n          {/* 标签名随 headingLevel，用 h() 渲染 */}\n          {h(\n            `h${accordion.headingLevel}`,\n            mergeAttrs<'h3'>({ sx: accordionStyles.heading }, propsHeading),\n            [trigger],\n          )}\n          <Collapse\n            {...mergePartProps<CollapseProps>(\n              { propsContent: { sx: accordionStyles.content } },\n              propsContent,\n              { id: contentId, role: 'region', 'aria-labelledby': triggerId },\n            )}\n            _open={model.open}\n          >\n            {children}\n          </Collapse>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","names":["_isVNode","_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_computed","_createVNode","_mergeProps","_vtp_forwardChildren"],"sources":["../../src/display/Accordion.tsx"],"sourcesContent":["/**\n * 手风琴，复合组件：Accordion（div）> AccordionItem（标题按钮 + 展开收起的内容）。WAI-ARIA 的 Accordion 模式：\n * 每个标题是 heading 里的 button（aria-expanded、aria-controls），内容是 role=\"region\"、以标题为名称；\n * 标题都在 Tab 顺序里，另外 ↑ / ↓ 在标题之间移动（到头后循环），Home / End 到第一个、最后一个。参考 Radix Accordion。\n *\n *   <Accordion _value={open} aria-label=\"常见问题\">\n *     <AccordionItem value=\"ship\" title=\"多久发货？\">付款后 48 小时内。</AccordionItem>\n *     <AccordionItem value=\"refund\" title=\"怎么退款？\">…</AccordionItem>\n *   </Accordion>\n *   <Accordion selectionMode=\"multiple\" _value={openList}>…</Accordion>\n *\n * 展开收起的动画同 Collapsible（Collapse 的 CSS 过渡）。部件见 AccordionItemProps。\n */\nimport { ChevronDown } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { h, useId, type VNodeChild } from 'vue';\nimport { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { selectedValues, toggleSelection, type SelectionProps } from '../utils/data/selection';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { disclosureStyles } from '../utils/style/transitions';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { Collapse, type CollapseProps } from './Collapse';\n\n/** Accordion 交给 AccordionItem 的状态 */\nexport interface AccordionState {\n  /** 展开着的项 */\n  readonly expanded: readonly string[];\n  /** 标题的层级（h2–h6） */\n  readonly headingLevel: 2 | 3 | 4 | 5 | 6;\n  /** 整组不可用 */\n  readonly disabled: boolean;\n  /** 展开或收起一项（单开 / 多开的规则由组决定） */\n  toggle(value: string): void;\n}\n\n/** Accordion 的上下文：自定义的项可以 inject 它接入组 */\nexport const AccordionContext = createContext<AccordionState>('Accordion');\n\n/** 两种方式共有的属性；未声明的属性落到外层 div 上 */\ninterface AccordionBaseProps extends PartProps<'div'> {\n  /** 单开时允许把唯一展开的那项也收起，默认 true */\n  collapsible?: boolean;\n  /** 标题的层级，按所在页面的大纲选，默认 3 */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /** 整组不可用 */\n  disabled?: boolean;\n  /** 字号档位；不写时继承 */\n  size?: TextSize;\n  /** AccordionItem */\n  children?: VNodeChild;\n}\n\n/** 单开（selectionMode=\"single\"，value 是展开项的值）或多开（value 是数组） */\nexport type AccordionProps = AccordionBaseProps & SelectionProps;\n\n/** Accordion 的样式：root、item、heading、trigger、chevron、chevronOpen、content */\nexport const accordionStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column' },\n  item: {\n    borderBottomWidth: '_xs',\n    borderBottomStyle: 'solid',\n    borderBottomColor: '_borderMuted',\n  },\n  heading: { margin: 0, fontSize: 'inherit', fontWeight: 'inherit' },\n  // 去掉按钮默认外观、焦点环、波纹、颜色过渡由 ButtonBase 给出\n  trigger: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '_md',\n    width: '_full',\n    minHeight: '_minTarget',\n    paddingBlock: '_md',\n    paddingInline: '_sm',\n    borderRadius: '_sm',\n    backgroundColor: { default: 'transparent', ':hover': '_fill' },\n    color: '_text',\n    fontWeight: '_semibold',\n    textAlign: 'start',\n  },\n  triggerDisabled: { opacity: '_disabled' },\n  chevron: { flexShrink: 0, color: '_textMuted' },\n  chevronOpen: { rotate: '180deg' },\n  content: { paddingInline: '_sm', paddingBlockEnd: '_md', color: '_text' },\n});\n\n/** 手风琴：一组可展开收起的项，单开或多开 */\nexport const Accordion = _component(\n  ({\n    selectionMode = 'single',\n    _value: value = _bindable<string | string[] | null>(null),\n    collapsible = true,\n    headingLevel = 3,\n    disabled = false,\n    size,\n    children,\n    ...rest\n  }: AccordionProps) => {\n    let root = _state.raw<HTMLElement | null>(null);\n    const expanded = _derived(selectedValues(value));\n\n    AccordionContext.provide({\n      get expanded() {\n        return expanded;\n      },\n      get headingLevel() {\n        return headingLevel;\n      },\n      get disabled() {\n        return disabled;\n      },\n      toggle(item) {\n        const next = toggleSelection(expanded, item, {\n          mode: selectionMode,\n          required: !collapsible,\n        });\n        if (next === expanded) return;\n        value = selectionMode === 'multiple' ? [...next] : (next[0] ?? null);\n      },\n    });\n\n    // ↑ / ↓ 在标题之间移动（循环），Home / End 到两端；只在焦点在标题按钮上时处理\n    function onKeydown(event: KeyboardEvent) {\n      const target = event.target as HTMLElement;\n      if (!root || !target.matches('[data-accordion-trigger]')) return;\n      const triggers = [\n        ...root.querySelectorAll<HTMLButtonElement>('[data-accordion-trigger]:not(:disabled)'),\n      ].filter((trigger) => trigger.closest('[data-accordion]') === root);\n      const index = triggers.indexOf(target as HTMLButtonElement);\n      const next = {\n        ArrowDown: triggers[(index + 1) % triggers.length],\n        ArrowUp: triggers[(index - 1 + triggers.length) % triggers.length],\n        Home: triggers[0],\n        End: triggers.at(-1),\n      }[event.key];\n      if (!next) return;\n      event.preventDefault();\n      next.focus();\n    }\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({ sx: [accordionStyles.root, size && fontSizeStyles[size]] }, rest, {\n          ref: _toRef(root),\n          onKeydown,\n        })}\n        data-accordion=\"\"\n        data-disabled={disabled || undefined}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/** 未声明的属性落到每一项的外层 div 上 */\nexport interface AccordionItemProps extends PartProps<'div', 'title'> {\n  /** 这一项的值 */\n  value: string;\n  /** 标题 */\n  title: VNodeChild;\n  /** 不可用：标题按钮 disabled，不能展开收起 */\n  disabled?: boolean;\n  /** 标题（h2–h6）的部件属性 */\n  propsHeading?: PartProps<'h3'>;\n  /** 标题按钮的部件属性 */\n  propsTrigger?: Omit<Partial<ButtonBaseProps>, 'aria-expanded' | 'aria-controls'>;\n  /** 展开箭头的部件属性 */\n  propsChevron?: Partial<IconProps>;\n  /** 内容区（Collapse，role=\"region\"）的部件属性 */\n  propsContent?: Partial<CollapseProps>;\n  /** 内容 */\n  children?: VNodeChild;\n}\n\n/** 手风琴里的一项：标题按钮 + 展开收起的内容 */\nexport const AccordionItem = _component(\n  ({\n    value,\n    title,\n    disabled = false,\n    propsHeading,\n    propsTrigger,\n    propsChevron,\n    propsContent,\n    children,\n    ...rest\n  }: AccordionItemProps) => {\n    const accordion = AccordionContext.inject();\n    const id = useId();\n    const triggerId = `${id}-trigger`;\n    const contentId = `${id}-content`;\n    // Collapse 在页内搜索命中（beforematch）时会写回 open：经这个对象交给组切换\n    const model = {\n      get open() {\n        return accordion.expanded.includes(value);\n      },\n      set open(next: boolean) {\n        if (next !== model.open) accordion.toggle(value);\n      },\n    };\n\n    return () => {\n      const open = model.open;\n      const off = disabled || accordion.disabled;\n      const state = open ? 'open' : 'closed';\n      const trigger = (\n        <ButtonBase\n          {...mergePartProps<ButtonBaseProps>(\n            { sx: [accordionStyles.trigger, off && accordionStyles.triggerDisabled] },\n            propsTrigger,\n            {\n              id: triggerId,\n              disabled: off,\n              'aria-expanded': open,\n              'aria-controls': contentId,\n              onClick: () => accordion.toggle(value),\n            },\n          )}\n          data-accordion-trigger=\"\"\n          data-state={state}\n        >\n          <span>{title}</span>\n          <Icon\n            {...mergePartProps<IconProps>(\n              {\n                icon: ChevronDown,\n                sx: [\n                  accordionStyles.chevron,\n                  disclosureStyles.icon,\n                  open && accordionStyles.chevronOpen,\n                ],\n              },\n              propsChevron,\n            )}\n          />\n        </ButtonBase>\n      );\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: accordionStyles.item }, rest)}\n          data-state={state}\n          data-disabled={off || undefined}\n        >\n          {/* 标签名随 headingLevel，用 h() 渲染 */}\n          {h(\n            `h${accordion.headingLevel}`,\n            mergeAttrs<'h3'>({ sx: accordionStyles.heading }, propsHeading),\n            [trigger],\n          )}\n          <Collapse\n            {...mergePartProps<CollapseProps>(\n              { propsContent: { sx: accordionStyles.content } },\n              propsContent,\n              { id: contentId, role: 'region', 'aria-labelledby': triggerId },\n            )}\n            _open={model.open}\n          >\n            {children}\n          </Collapse>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/AnimatedNumber.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type VisuallyHiddenProps } from '../base/VisuallyHidden';
 import { type NumericFormat } from '../config/lang/format';

package/dist/display/AnimatedNumber.js

@@ -6,7 +6,7 @@ import { useFormat } from "../config/lang/format.js";
 import { useTween } from "../utils/motion/tween.js";
 import { createVNode, shallowRef } from "vue";
 import { _component, effect, mergeJsxProps, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/display/AnimatedNumber.tsx
 /** 未声明的属性落到外层 span 上；原生的 prefix 属性（RDFa）让给前缀内容 */
 /** AnimatedNumber 的样式：root */

package/dist/display/AnimatedNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedNumber.js","names":["_vtp_readonlyProp","_vtp_restProps","_vtp_untrack","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/display/AnimatedNumber.tsx"],"sourcesContent":["/**\n * 会滚动的数字（span）：值变化时从旧值过渡到新值（useTween），按当前语言格式化，等宽数字不抖动。\n * 统计卡片的数值、金额、百分比、计数器。\n *\n *   <AnimatedNumber value={revenue} format={{ style: 'currency' }} />\n *   <AnimatedNumber value={0.123} format={{ style: 'percent', maximumFractionDigits: 1 }} trend prefix=\"较上周 \" />\n *\n * 读屏只读终值：滚动中的数字对读屏隐藏，旁边有一份隐藏的终值文字。需要播报变化时在外层加 aria-live。\n * 值可以是 number、bigint 或 Decimal：过渡的中间帧按浮点数算，停下时与读屏的终值按原值格式化，不丢精度。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../base/VisuallyHidden';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport { compareNumeric, numericText, toNumber, type NumericValue } from '../utils/data/numeric';\nimport { useTween, type TweenOptions } from '../utils/motion/tween';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { toneStyles, type Tone } from '../utils/style/typography';\n\n/** 未声明的属性落到外层 span 上；原生的 prefix 属性（RDFa）让给前缀内容 */\nexport interface AnimatedNumberProps extends PartProps<'span', 'prefix'> {\n  /** 数值：number、bigint 或 Decimal */\n  value: NumericValue;\n  /**\n   * 格式：金额 `{ style: 'currency' }`（币种默认取语言包）、百分比 `{ style: 'percent' }`、\n   * 以万为单位 `{ scale: 10_000, maximumFractionDigits: 2 }`\n   */\n  format?: NumericFormat;\n  /** 过渡的时长档位，默认 lg */\n  duration?: TweenOptions['duration'];\n  /** 挂载时从这个值滚到 value；不给时直接显示 value */\n  from?: NumericValue;\n  /** 按正负着色：正数成功色、负数危险色（涨跌）；data-trend 写 up / down / flat */\n  trend?: boolean;\n  /** 文字色调；给了 trend 时由正负决定 */\n  tone?: Tone;\n  /** 数字前的内容（如“¥”以外的说明文字、图标） */\n  prefix?: VNodeChild;\n  /** 数字后的内容（如单位“人”） */\n  suffix?: VNodeChild;\n  /** 前缀的部件属性 */\n  propsPrefix?: PartProps<'span'>;\n  /** 后缀的部件属性 */\n  propsSuffix?: PartProps<'span'>;\n  /** 滚动中的数字（对读屏隐藏）的部件属性 */\n  propsValue?: PartProps<'span', 'aria-hidden'>;\n  /** 给读屏的终值文字的部件属性 */\n  propsLabel?: Partial<VisuallyHiddenProps>;\n}\n\n/** AnimatedNumber 的样式：root */\nexport const animatedNumberStyles = css.create({\n  // 等宽数字：滚动时宽度不跳\n  root: { fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' },\n});\n\n/** 终值的小数位数：滚动中的值按它取整，整数不会滚出一串小数 */\nfunction decimals(value: NumericValue) {\n  return Math.min(20, numericText(value).split('.')[1]?.length ?? 0);\n}\n\n/** 会滚动的数字：值变化时过渡，读屏只读终值 */\nexport const AnimatedNumber = _component(\n  ({\n    value,\n    format,\n    duration = 'lg',\n    from,\n    trend = false,\n    tone,\n    prefix,\n    suffix,\n    propsPrefix,\n    propsSuffix,\n    propsValue,\n    propsLabel,\n    ...rest\n  }: AnimatedNumberProps) => {\n    const formatter = useFormat();\n    let root: HTMLElement | null = null;\n    // 时长按自己所在的主题范围读（子树里可能覆盖了主题）\n    const start = _untrack(from);\n    const tween = useTween(() => toNumber(value), {\n      duration: _untrack(duration),\n      from: start == null ? undefined : toNumber(start),\n      scope: () => root,\n    });\n\n    const text = (number: NumericValue) => formatter.number(number, format);\n\n    /** 过渡中当前显示的文字 */\n    const shownText = () => {\n      // 停在终值时按原值格式化：bigint、Decimal 不经过浮点数\n      if (tween.current === toNumber(value)) return text(value);\n      const places = 10 ** decimals(value);\n      return text(Math.round(tween.current * places) / places);\n    };\n    // 过渡中每帧直接改文字，不为一个数字重新渲染整个组件；渲染里只取当前值、不追踪\n    let valueElement = _state.raw<HTMLElement | null>(null);\n    _effect(() => {\n      const shown = shownText();\n      if (valueElement) valueElement.textContent = shown;\n    });\n\n    return () => {\n      const sign = compareNumeric(value, 0);\n      const direction = sign > 0 ? 'up' : sign < 0 ? 'down' : 'flat';\n      const color = trend\n        ? ({ up: 'success', down: 'danger', flat: tone } as const)[direction]\n        : tone;\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [animatedNumberStyles.root, color && toneStyles[color]] },\n            rest,\n            { ref: (element: unknown) => (root = element as HTMLElement | null) },\n          )}\n          data-trend={trend ? direction : undefined}\n        >\n          {hasContent(prefix) && <span {...mergeAttrs<'span'>({}, propsPrefix)}>{prefix}</span>}\n          <span\n            {...mergeAttrs<'span'>({}, propsValue, {\n              'aria-hidden': true,\n              ref: _toRef(valueElement),\n            })}\n          >\n            {_untrack(shownText())}\n          </span>\n          <VisuallyHidden {...mergePartProps<VisuallyHiddenProps>({}, propsLabel)}>\n            {text(value)}\n          </VisuallyHidden>\n          {hasContent(suffix) && <span {...mergeAttrs<'span'>({}, propsSuffix)}>{suffix}</span>}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"AnimatedNumber.js","names":["_vtp_readonlyProp","_vtp_restProps","_vtp_untrack","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/display/AnimatedNumber.tsx"],"sourcesContent":["/**\n * 会滚动的数字（span）：值变化时从旧值过渡到新值（useTween），按当前语言格式化，等宽数字不抖动。\n * 统计卡片的数值、金额、百分比、计数器。\n *\n *   <AnimatedNumber value={revenue} format={{ style: 'currency' }} />\n *   <AnimatedNumber value={0.123} format={{ style: 'percent', maximumFractionDigits: 1 }} trend prefix=\"较上周 \" />\n *\n * 读屏只读终值：滚动中的数字对读屏隐藏，旁边有一份隐藏的终值文字。需要播报变化时在外层加 aria-live。\n * 值可以是 number、bigint 或 Decimal：过渡的中间帧按浮点数算，停下时与读屏的终值按原值格式化，不丢精度。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../base/VisuallyHidden';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport { compareNumeric, numericText, toNumber, type NumericValue } from '../utils/data/numeric';\nimport { useTween, type TweenOptions } from '../utils/motion/tween';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { toneStyles, type Tone } from '../utils/style/typography';\n\n/** 未声明的属性落到外层 span 上；原生的 prefix 属性（RDFa）让给前缀内容 */\nexport interface AnimatedNumberProps extends PartProps<'span', 'prefix'> {\n  /** 数值：number、bigint 或 Decimal */\n  value: NumericValue;\n  /**\n   * 格式：金额 `{ style: 'currency' }`（币种默认取语言包）、百分比 `{ style: 'percent' }`、\n   * 以万为单位 `{ scale: 10_000, maximumFractionDigits: 2 }`\n   */\n  format?: NumericFormat;\n  /** 过渡的时长档位，默认 lg */\n  duration?: TweenOptions['duration'];\n  /** 挂载时从这个值滚到 value；不给时直接显示 value */\n  from?: NumericValue;\n  /** 按正负着色：正数成功色、负数危险色（涨跌）；data-trend 写 up / down / flat */\n  trend?: boolean;\n  /** 文字色调；给了 trend 时由正负决定 */\n  tone?: Tone;\n  /** 数字前的内容（如“¥”以外的说明文字、图标） */\n  prefix?: VNodeChild;\n  /** 数字后的内容（如单位“人”） */\n  suffix?: VNodeChild;\n  /** 前缀的部件属性 */\n  propsPrefix?: PartProps<'span'>;\n  /** 后缀的部件属性 */\n  propsSuffix?: PartProps<'span'>;\n  /** 滚动中的数字（对读屏隐藏）的部件属性 */\n  propsValue?: PartProps<'span', 'aria-hidden'>;\n  /** 给读屏的终值文字的部件属性 */\n  propsLabel?: Partial<VisuallyHiddenProps>;\n}\n\n/** AnimatedNumber 的样式：root */\nexport const animatedNumberStyles = css.create({\n  // 等宽数字：滚动时宽度不跳\n  root: { fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' },\n});\n\n/** 终值的小数位数：滚动中的值按它取整，整数不会滚出一串小数 */\nfunction decimals(value: NumericValue) {\n  return Math.min(20, numericText(value).split('.')[1]?.length ?? 0);\n}\n\n/** 会滚动的数字：值变化时过渡，读屏只读终值 */\nexport const AnimatedNumber = _component(\n  ({\n    value,\n    format,\n    duration = 'lg',\n    from,\n    trend = false,\n    tone,\n    prefix,\n    suffix,\n    propsPrefix,\n    propsSuffix,\n    propsValue,\n    propsLabel,\n    ...rest\n  }: AnimatedNumberProps) => {\n    const formatter = useFormat();\n    let root: HTMLElement | null = null;\n    // 时长按自己所在的主题范围读（子树里可能覆盖了主题）\n    const start = _untrack(from);\n    const tween = useTween(() => toNumber(value), {\n      duration: _untrack(duration),\n      from: start == null ? undefined : toNumber(start),\n      scope: () => root,\n    });\n\n    const text = (number: NumericValue) => formatter.number(number, format);\n\n    /** 过渡中当前显示的文字 */\n    const shownText = () => {\n      // 停在终值时按原值格式化：bigint、Decimal 不经过浮点数\n      if (tween.current === toNumber(value)) return text(value);\n      const places = 10 ** decimals(value);\n      return text(Math.round(tween.current * places) / places);\n    };\n    // 过渡中每帧直接改文字，不为一个数字重新渲染整个组件；渲染里只取当前值、不追踪\n    let valueElement = _state.raw<HTMLElement | null>(null);\n    _effect(() => {\n      const shown = shownText();\n      if (valueElement) valueElement.textContent = shown;\n    });\n\n    return () => {\n      const sign = compareNumeric(value, 0);\n      const direction = sign > 0 ? 'up' : sign < 0 ? 'down' : 'flat';\n      const color = trend\n        ? ({ up: 'success', down: 'danger', flat: tone } as const)[direction]\n        : tone;\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [animatedNumberStyles.root, color && toneStyles[color]] },\n            rest,\n            { ref: (element: unknown) => (root = element as HTMLElement | null) },\n          )}\n          data-trend={trend ? direction : undefined}\n        >\n          {hasContent(prefix) && <span {...mergeAttrs<'span'>({}, propsPrefix)}>{prefix}</span>}\n          <span\n            {...mergeAttrs<'span'>({}, propsValue, {\n              'aria-hidden': true,\n              ref: _toRef(valueElement),\n            })}\n          >\n            {_untrack(shownText())}\n          </span>\n          <VisuallyHidden {...mergePartProps<VisuallyHiddenProps>({}, propsLabel)}>\n            {text(value)}\n          </VisuallyHidden>\n          {hasContent(suffix) && <span {...mergeAttrs<'span'>({}, propsSuffix)}>{suffix}</span>}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Avatar.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 import { type StatusTone } from '../utils/style/tone-styles';

package/dist/display/Avatar.js

@@ -8,7 +8,7 @@ import { Icon } from "../base/Icon.js";
 import { statusToneStyles } from "../utils/style/tone-styles.js";
 import { createVNode, ref, watch } from "vue";
 import { _component, createContext, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { User } from "@lucide/icons";
 //#region src/display/Avatar.tsx
 /**

package/dist/display/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/display/Avatar.tsx"],"sourcesContent":["/**\n * 头像（span，role=\"img\"）：显示图片，图片还没加载好或加载失败时显示后备内容（默认是名字的首字母）。\n * 名称写在外层（aria-label），图片本身是装饰（alt=\"\"），读屏不会念两遍；没有 name 时整个头像是装饰性的（对读屏隐藏）。\n *\n *   <Avatar src={user.avatar} name={user.name} />\n *   <Avatar name=\"张三\" size=\"lg\" radius=\"md\" />\n *   <Avatar name=\"李四\" variant=\"solid\" tone=\"success\" />\n */\nimport { User } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch, type VNodeChild } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { statusToneStyles, type StatusTone } from '../utils/style/tone-styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { radiusStyles, type Radius } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 后备内容（首字母、图标）的底色样式 */\nexport interface AvatarVariants {\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 实底 */\n  solid: unknown;\n}\n\n/** 头像的外观选项；可以用 createUi / Provider 的 defaults.Avatar 统一改默认值 */\nexport interface AvatarOptions {\n  /** 字号档位，头像边长是它的 2.5 倍；不写时继承 */\n  size?: TextSize;\n  /** 圆角，默认 full（圆形）；团队、组织、应用的图标常用 md（圆角方形） */\n  radius?: Radius;\n  /** 后备内容的底色样式，默认 soft */\n  variant?: keyof AvatarVariants;\n  /** 后备内容的色调（与 Button、Badge 等同一套），默认 accent */\n  tone?: StatusTone;\n}\n\n/** 角色与读屏可见性由组件按 name 决定 */\nexport type AvatarManaged = 'role' | 'aria-hidden';\n\n/** 未声明的属性落到外层 span 上 */\nexport interface AvatarProps extends PartProps<'span', AvatarManaged>, AvatarOptions {\n  /** 图片地址；不写或加载失败时显示后备内容 */\n  src?: string;\n  /** 名字：无障碍名称，也用来生成首字母；不写时头像是装饰性的 */\n  name?: string;\n  /** 后备内容，默认是名字的首字母，没有名字时是人像图标 */\n  fallback?: VNodeChild;\n  /** 图片的部件属性 */\n  propsImage?: PartProps<'img', 'src' | 'alt'>;\n  /** 后备内容的部件属性 */\n  propsFallback?: PartProps<'span'>;\n}\n\n/** 在 AvatarGroup 里：Avatar 据此叠放（AvatarGroup 提供） */\nexport const AvatarGroupContext = createContext<{ readonly grouped: true }>('AvatarGroup');\n\n/**\n * 头像的配方：部件 root（外层）、image（图片）、fallback（后备内容）；在头像组里、图片加载中是档位。\n * 后备内容的底色来自共用的 statusToneStyles，排在配方之前，createUi / Provider 的 styles.Avatar 能盖过它\n */\nexport const avatarRecipe = css.recipe({\n  name: 'Avatar',\n  parts: ['root', 'image', 'fallback'],\n  base: {\n    root: {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      width: '2.5em',\n      height: '2.5em',\n      overflow: 'hidden',\n      verticalAlign: 'middle',\n      userSelect: 'none',\n    },\n    image: { width: '_full', height: '_full', objectFit: 'cover' },\n    fallback: { fontWeight: '_medium', lineHeight: 1, textTransform: 'uppercase' },\n  },\n  variants: {\n    // 头像组里：往前叠 0.5em，一圈页面底色的描边把相邻的分开（AvatarGroup 的“+N”也用它）\n    grouped: {\n      true: {\n        root: {\n          boxShadow: `0 0 0 ${t.borderWidths.sm} ${t.colors.background}`,\n          marginInlineStart: { default: '-0.5em', ':first-child': 0 },\n        },\n      },\n    },\n    // 图片加载完之前先藏起来（仍在 DOM 里加载），后备内容垫在下面\n    loading: { true: { image: { position: 'absolute', opacity: 0 } } },\n  },\n});\n\n/** 头像的部件（createUi / Provider 的 styles.Avatar 按它定制） */\nexport type AvatarPart = (typeof avatarRecipe.parts)[number];\n\n/** 名字的首字母：中文取最后一个字（通常是名），其他语言取前两个词的首字母 */\nexport function initials(name: string): string {\n  const trimmed = name.trim();\n  if (!trimmed) return '';\n  if (/[㐀-鿿]/.test(trimmed)) return trimmed.at(-1)!;\n  const words = trimmed.split(/\\s+/);\n  return (words[0]![0]! + (words.length > 1 ? words.at(-1)![0]! : '')).toUpperCase();\n}\n\n/** 头像：图片 + 后备内容（首字母或图标） */\nexport const Avatar = _component(\n  ({\n    src,\n    name,\n    fallback,\n    size,\n    radius,\n    variant,\n    tone,\n    propsImage,\n    propsFallback,\n    ...rest\n  }: AvatarProps) => {\n    const appearance = useDefaults('Avatar', () => ({ size, radius, variant, tone }), {\n      radius: 'full',\n      variant: 'soft',\n      tone: 'accent',\n    });\n    const recipe = useRecipe(avatarRecipe);\n    const group = AvatarGroupContext.inject(null);\n    // 图片状态：loading 加载中、loaded 已显示、error 失败（显示后备内容）\n    let status = _state<'loading' | 'loaded' | 'error'>('loading');\n    watch(\n      () => src,\n      () => (status = 'loading'),\n    );\n\n    return () => {\n      const showFallback = !src || status !== 'loaded';\n      const { size: fontSize, radius: corner, variant: fill, tone: color } = appearance();\n      const s = recipe({\n        variant: fill,\n        tone: color,\n        grouped: !!group,\n        loading: status === 'loading',\n      });\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            {\n              ...s.root,\n              sx: [\n                statusToneStyles[fill][color],\n                s.root.sx,\n                radiusStyles[corner],\n                fontSize && fontSizeStyles[fontSize],\n              ],\n            },\n            rest,\n            name ? { role: 'img', 'aria-label': name } : { 'aria-hidden': true },\n          )}\n          data-state={src ? status : 'fallback'}\n        >\n          {src && status !== 'error' && (\n            <img\n              key={src}\n              alt=\"\"\n              {...mergeAttrs<'img'>(s.image, propsImage, {\n                src,\n                onLoad: () => (status = 'loaded'),\n                onError: () => (status = 'error'),\n              })}\n            />\n          )}\n          {showFallback && (\n            <span {...mergeAttrs<'span'>(s.fallback, propsFallback, { 'aria-hidden': true })}>\n              {fallback ?? (name ? initials(name) : <Icon icon={User} />)}\n            </span>\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/display/Avatar.tsx"],"sourcesContent":["/**\n * 头像（span，role=\"img\"）：显示图片，图片还没加载好或加载失败时显示后备内容（默认是名字的首字母）。\n * 名称写在外层（aria-label），图片本身是装饰（alt=\"\"），读屏不会念两遍；没有 name 时整个头像是装饰性的（对读屏隐藏）。\n *\n *   <Avatar src={user.avatar} name={user.name} />\n *   <Avatar name=\"张三\" size=\"lg\" radius=\"md\" />\n *   <Avatar name=\"李四\" variant=\"solid\" tone=\"success\" />\n */\nimport { User } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch, type VNodeChild } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { statusToneStyles, type StatusTone } from '../utils/style/tone-styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { radiusStyles, type Radius } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 后备内容（首字母、图标）的底色样式 */\nexport interface AvatarVariants {\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 实底 */\n  solid: unknown;\n}\n\n/** 头像的外观选项；可以用 createUi / Provider 的 defaults.Avatar 统一改默认值 */\nexport interface AvatarOptions {\n  /** 字号档位，头像边长是它的 2.5 倍；不写时继承 */\n  size?: TextSize;\n  /** 圆角，默认 full（圆形）；团队、组织、应用的图标常用 md（圆角方形） */\n  radius?: Radius;\n  /** 后备内容的底色样式，默认 soft */\n  variant?: keyof AvatarVariants;\n  /** 后备内容的色调（与 Button、Badge 等同一套），默认 accent */\n  tone?: StatusTone;\n}\n\n/** 角色与读屏可见性由组件按 name 决定 */\nexport type AvatarManaged = 'role' | 'aria-hidden';\n\n/** 未声明的属性落到外层 span 上 */\nexport interface AvatarProps extends PartProps<'span', AvatarManaged>, AvatarOptions {\n  /** 图片地址；不写或加载失败时显示后备内容 */\n  src?: string;\n  /** 名字：无障碍名称，也用来生成首字母；不写时头像是装饰性的 */\n  name?: string;\n  /** 后备内容，默认是名字的首字母，没有名字时是人像图标 */\n  fallback?: VNodeChild;\n  /** 图片的部件属性 */\n  propsImage?: PartProps<'img', 'src' | 'alt'>;\n  /** 后备内容的部件属性 */\n  propsFallback?: PartProps<'span'>;\n}\n\n/** 在 AvatarGroup 里：Avatar 据此叠放（AvatarGroup 提供） */\nexport const AvatarGroupContext = createContext<{ readonly grouped: true }>('AvatarGroup');\n\n/**\n * 头像的配方：部件 root（外层）、image（图片）、fallback（后备内容）；在头像组里、图片加载中是档位。\n * 后备内容的底色来自共用的 statusToneStyles，排在配方之前，createUi / Provider 的 styles.Avatar 能盖过它\n */\nexport const avatarRecipe = css.recipe({\n  name: 'Avatar',\n  parts: ['root', 'image', 'fallback'],\n  base: {\n    root: {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      width: '2.5em',\n      height: '2.5em',\n      overflow: 'hidden',\n      verticalAlign: 'middle',\n      userSelect: 'none',\n    },\n    image: { width: '_full', height: '_full', objectFit: 'cover' },\n    fallback: { fontWeight: '_medium', lineHeight: 1, textTransform: 'uppercase' },\n  },\n  variants: {\n    // 头像组里：往前叠 0.5em，一圈页面底色的描边把相邻的分开（AvatarGroup 的“+N”也用它）\n    grouped: {\n      true: {\n        root: {\n          boxShadow: `0 0 0 ${t.borderWidths.sm} ${t.colors.background}`,\n          marginInlineStart: { default: '-0.5em', ':first-child': 0 },\n        },\n      },\n    },\n    // 图片加载完之前先藏起来（仍在 DOM 里加载），后备内容垫在下面\n    loading: { true: { image: { position: 'absolute', opacity: 0 } } },\n  },\n});\n\n/** 头像的部件（createUi / Provider 的 styles.Avatar 按它定制） */\nexport type AvatarPart = (typeof avatarRecipe.parts)[number];\n\n/** 名字的首字母：中文取最后一个字（通常是名），其他语言取前两个词的首字母 */\nexport function initials(name: string): string {\n  const trimmed = name.trim();\n  if (!trimmed) return '';\n  if (/[㐀-鿿]/.test(trimmed)) return trimmed.at(-1)!;\n  const words = trimmed.split(/\\s+/);\n  return (words[0]![0]! + (words.length > 1 ? words.at(-1)![0]! : '')).toUpperCase();\n}\n\n/** 头像：图片 + 后备内容（首字母或图标） */\nexport const Avatar = _component(\n  ({\n    src,\n    name,\n    fallback,\n    size,\n    radius,\n    variant,\n    tone,\n    propsImage,\n    propsFallback,\n    ...rest\n  }: AvatarProps) => {\n    const appearance = useDefaults('Avatar', () => ({ size, radius, variant, tone }), {\n      radius: 'full',\n      variant: 'soft',\n      tone: 'accent',\n    });\n    const recipe = useRecipe(avatarRecipe);\n    const group = AvatarGroupContext.inject(null);\n    // 图片状态：loading 加载中、loaded 已显示、error 失败（显示后备内容）\n    let status = _state<'loading' | 'loaded' | 'error'>('loading');\n    watch(\n      () => src,\n      () => (status = 'loading'),\n    );\n\n    return () => {\n      const showFallback = !src || status !== 'loaded';\n      const { size: fontSize, radius: corner, variant: fill, tone: color } = appearance();\n      const s = recipe({\n        variant: fill,\n        tone: color,\n        grouped: !!group,\n        loading: status === 'loading',\n      });\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            {\n              ...s.root,\n              sx: [\n                statusToneStyles[fill][color],\n                s.root.sx,\n                radiusStyles[corner],\n                fontSize && fontSizeStyles[fontSize],\n              ],\n            },\n            rest,\n            name ? { role: 'img', 'aria-label': name } : { 'aria-hidden': true },\n          )}\n          data-state={src ? status : 'fallback'}\n        >\n          {src && status !== 'error' && (\n            <img\n              key={src}\n              alt=\"\"\n              {...mergeAttrs<'img'>(s.image, propsImage, {\n                src,\n                onLoad: () => (status = 'loaded'),\n                onError: () => (status = 'error'),\n              })}\n            />\n          )}\n          {showFallback && (\n            <span {...mergeAttrs<'span'>(s.fallback, propsFallback, { 'aria-hidden': true })}>\n              {fallback ?? (name ? initials(name) : <Icon icon={User} />)}\n            </span>\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/AvatarGroup.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 import { type TextSize } from '../utils/style/typography';

package/dist/display/AvatarGroup.js

@@ -7,7 +7,7 @@ import { childNodes } from "../utils/data/text.js";
 import { AvatarGroupContext, avatarRecipe } from "./Avatar.js";
 import { createTextVNode, createVNode } from "vue";
 import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/display/AvatarGroup.tsx
 /** 角色由组件管理 */
 /** 未声明的属性落到 div 上；aria-label 是这组人的名称 */

package/dist/display/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_createTextVNode"],"sources":["../../src/display/AvatarGroup.tsx"],"sourcesContent":["/**\n * 头像组（div，role=\"group\"）：一排头像叠放，超过 max 的折叠成“+N”。协作者、参与人、点赞的人。\n *\n *   <AvatarGroup max={3} aria-label=\"协作者\">\n *     {members.map((member) => <Avatar key={member.id} name={member.name} src={member.avatar} />)}\n *   </AvatarGroup>\n *\n * 头像的大小随组的 size（或上下文字号）；组里的 Avatar 经 AvatarGroupContext 得知自己在组里，叠放并加一圈页面底色的描边。\n * “+N”读屏念“还有 N 人”（语言包的 avatarMore）；total 给了时按它算 N（列表只拿到了一部分时）。\n * 部件：Root（div）、More（+N）、MoreText（More 里的“+N”文字）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { useRecipe } from '../config/styles';\nimport { childNodes } from '../utils/data/text';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { radiusStyles } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { AvatarGroupContext, avatarRecipe } from './Avatar';\n\n/** 角色由组件管理 */\nexport type AvatarGroupManaged = 'role';\n\n/** 未声明的属性落到 div 上；aria-label 是这组人的名称 */\nexport interface AvatarGroupProps extends PartProps<'div', AvatarGroupManaged> {\n  /** 最多显示几个头像，其余折叠成“+N”；不写时全部显示 */\n  max?: number;\n  /** 总人数：列表只拿到前几个时给出，“+N”按它算 */\n  total?: number;\n  /** 字号档位，头像边长是它的 2.5 倍；不写时继承 */\n  size?: TextSize;\n  /** “+N”的部件属性 */\n  propsMore?: PartProps<'span', 'role'>;\n  /** “+N”文字的部件属性；读屏念的是 More 的 aria-label，这里对读屏隐藏 */\n  propsMoreText?: PartProps<'span', 'aria-hidden'>;\n  /** 头像（Avatar） */\n  children?: VNodeChild;\n}\n\n/** AvatarGroup 的样式：root、more、moreText */\nexport const avatarGroupStyles = css.create({\n  root: { display: 'inline-flex', alignItems: 'center' },\n  more: { backgroundColor: '_fill', color: '_text' },\n  // 字号缩在文字上：“+N”的圆仍和头像一样大\n  moreText: { fontSize: '0.875em', fontWeight: '_medium' },\n});\n\n/** 头像组：叠放的头像，超过 max 的折叠成“+N” */\nexport const AvatarGroup = _component(\n  ({ max, total, size, propsMore, propsMoreText, children, ...rest }: AvatarGroupProps) => {\n    const lang = useLang();\n    AvatarGroupContext.provide({ grouped: true });\n    // “+N”和组里的头像一样大、一样叠放：取头像配方（带主题定制）里组内头像的外层样式\n    const avatar = useRecipe(avatarRecipe);\n    return () => {\n      const avatars = childNodes(children);\n      const shown = max != null && avatars.length > max ? avatars.slice(0, max) : avatars;\n      const hidden = (total ?? avatars.length) - shown.length;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [avatarGroupStyles.root, size && fontSizeStyles[size]] },\n            rest,\n            { role: 'group' },\n          )}\n        >\n          {shown}\n          {hidden > 0 && (\n            <span\n              {...mergeAttrs<'span'>(\n                {\n                  sx: [\n                    avatar({ grouped: true }).root.sx,\n                    radiusStyles.full,\n                    avatarGroupStyles.more,\n                  ],\n                  'aria-label': lang.avatarMore(hidden),\n                },\n                propsMore,\n                { role: 'img' },\n              )}\n            >\n              <span\n                {...mergeAttrs<'span'>({ sx: avatarGroupStyles.moreText }, propsMoreText, {\n                  'aria-hidden': true,\n                })}\n              >\n                +{hidden}\n              </span>\n            </span>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AA0CA,IAAa,oBAAoB,IAAI,OAAO;CAC1C,MAAM;EAAE,SAAS;EAAe,YAAY;CAAS;CACrD,MAAM;EAAE,iBAAiB;EAAS,OAAO;CAAQ;CAEjD,UAAU;EAAE,UAAU;EAAW,YAAY;CAAU;AACzD,CAAC;;AAGD,IAAa,cAAc,0BACzB,QAAA,SAAyF;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAA7B,OAAIC,UAAA,QAAA,MAAA,KAAA;CAC9D,MAAM,OAAO,QAAQ;CACrB,mBAAmB,QAAQ,EAAE,SAAS,KAAK,CAAC;CAE5C,MAAM,SAAS,UAAU,YAAY;CACrC,aAAa;EACX,MAAM,UAAU,WAAU,SAAA,KAAS;EACnC,MAAM,QAAQ,IAAA,SAAO,QAAQ,QAAQ,SAAM,IAAA,QAAS,QAAQ,MAAM,GAAC,IAAA,KAAK,IAAI;EAC5E,MAAM,UAAU,MAAA,SAAS,QAAQ,UAAU,MAAM;EACjD,OAAAC,YAAA,OAEQ,WACF,EAAE,IAAI,CAAC,kBAAkB,MAAM,KAAA,SAAQ,eAAc,KAAA,MAAM,EAAE,GAC7D,MACA,EAAE,MAAM,QAAQ,CAClB,GAAC,CAEA,OACA,SAAS,KAACA,YAAA,QAEH,WACF;GACE,IAAI;IACF,OAAO,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,KAAK;IAC/B,aAAa;IACb,kBAAkB;GAAI;GAExB,cAAc,KAAK,WAAW,MAAM;EACtC,GAAC,UAAA,OAED,EAAE,MAAM,MAAM,CAChB,GAAC,CAAAA,YAAA,QAGK,WAAmB,EAAE,IAAI,kBAAkB,SAAS,GAAC,cAAA,OAAiB,EACxE,eAAe,KACjB,CAAC,GAAC,CAAAC,gBAAA,GAAA,GAEA,MAAM,CAAA,CAAA,CAAA,CAGb,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"AvatarGroup.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_createTextVNode"],"sources":["../../src/display/AvatarGroup.tsx"],"sourcesContent":["/**\n * 头像组（div，role=\"group\"）：一排头像叠放，超过 max 的折叠成“+N”。协作者、参与人、点赞的人。\n *\n *   <AvatarGroup max={3} aria-label=\"协作者\">\n *     {members.map((member) => <Avatar key={member.id} name={member.name} src={member.avatar} />)}\n *   </AvatarGroup>\n *\n * 头像的大小随组的 size（或上下文字号）；组里的 Avatar 经 AvatarGroupContext 得知自己在组里，叠放并加一圈页面底色的描边。\n * “+N”读屏念“还有 N 人”（语言包的 avatarMore）；total 给了时按它算 N（列表只拿到了一部分时）。\n * 部件：Root（div）、More（+N）、MoreText（More 里的“+N”文字）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { useRecipe } from '../config/styles';\nimport { childNodes } from '../utils/data/text';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { radiusStyles } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { AvatarGroupContext, avatarRecipe } from './Avatar';\n\n/** 角色由组件管理 */\nexport type AvatarGroupManaged = 'role';\n\n/** 未声明的属性落到 div 上；aria-label 是这组人的名称 */\nexport interface AvatarGroupProps extends PartProps<'div', AvatarGroupManaged> {\n  /** 最多显示几个头像，其余折叠成“+N”；不写时全部显示 */\n  max?: number;\n  /** 总人数：列表只拿到前几个时给出，“+N”按它算 */\n  total?: number;\n  /** 字号档位，头像边长是它的 2.5 倍；不写时继承 */\n  size?: TextSize;\n  /** “+N”的部件属性 */\n  propsMore?: PartProps<'span', 'role'>;\n  /** “+N”文字的部件属性；读屏念的是 More 的 aria-label，这里对读屏隐藏 */\n  propsMoreText?: PartProps<'span', 'aria-hidden'>;\n  /** 头像（Avatar） */\n  children?: VNodeChild;\n}\n\n/** AvatarGroup 的样式：root、more、moreText */\nexport const avatarGroupStyles = css.create({\n  root: { display: 'inline-flex', alignItems: 'center' },\n  more: { backgroundColor: '_fill', color: '_text' },\n  // 字号缩在文字上：“+N”的圆仍和头像一样大\n  moreText: { fontSize: '0.875em', fontWeight: '_medium' },\n});\n\n/** 头像组：叠放的头像，超过 max 的折叠成“+N” */\nexport const AvatarGroup = _component(\n  ({ max, total, size, propsMore, propsMoreText, children, ...rest }: AvatarGroupProps) => {\n    const lang = useLang();\n    AvatarGroupContext.provide({ grouped: true });\n    // “+N”和组里的头像一样大、一样叠放：取头像配方（带主题定制）里组内头像的外层样式\n    const avatar = useRecipe(avatarRecipe);\n    return () => {\n      const avatars = childNodes(children);\n      const shown = max != null && avatars.length > max ? avatars.slice(0, max) : avatars;\n      const hidden = (total ?? avatars.length) - shown.length;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [avatarGroupStyles.root, size && fontSizeStyles[size]] },\n            rest,\n            { role: 'group' },\n          )}\n        >\n          {shown}\n          {hidden > 0 && (\n            <span\n              {...mergeAttrs<'span'>(\n                {\n                  sx: [\n                    avatar({ grouped: true }).root.sx,\n                    radiusStyles.full,\n                    avatarGroupStyles.more,\n                  ],\n                  'aria-label': lang.avatarMore(hidden),\n                },\n                propsMore,\n                { role: 'img' },\n              )}\n            >\n              <span\n                {...mergeAttrs<'span'>({ sx: avatarGroupStyles.moreText }, propsMoreText, {\n                  'aria-hidden': true,\n                })}\n              >\n                +{hidden}\n              </span>\n            </span>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AA0CA,IAAa,oBAAoB,IAAI,OAAO;CAC1C,MAAM;EAAE,SAAS;EAAe,YAAY;CAAS;CACrD,MAAM;EAAE,iBAAiB;EAAS,OAAO;CAAQ;CAEjD,UAAU;EAAE,UAAU;EAAW,YAAY;CAAU;AACzD,CAAC;;AAGD,IAAa,cAAc,0BACzB,QAAA,SAAyF;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAA7B,OAAIC,UAAA,QAAA,MAAA,KAAA;CAC9D,MAAM,OAAO,QAAQ;CACrB,mBAAmB,QAAQ,EAAE,SAAS,KAAK,CAAC;CAE5C,MAAM,SAAS,UAAU,YAAY;CACrC,aAAa;EACX,MAAM,UAAU,WAAU,SAAA,KAAS;EACnC,MAAM,QAAQ,IAAA,SAAO,QAAQ,QAAQ,SAAM,IAAA,QAAS,QAAQ,MAAM,GAAC,IAAA,KAAK,IAAI;EAC5E,MAAM,UAAU,MAAA,SAAS,QAAQ,UAAU,MAAM;EACjD,OAAAC,YAAA,OAEQ,WACF,EAAE,IAAI,CAAC,kBAAkB,MAAM,KAAA,SAAQ,eAAc,KAAA,MAAM,EAAE,GAC7D,MACA,EAAE,MAAM,QAAQ,CAClB,GAAC,CAEA,OACA,SAAS,KAACA,YAAA,QAEH,WACF;GACE,IAAI;IACF,OAAO,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,KAAK;IAC/B,aAAa;IACb,kBAAkB;GAAI;GAExB,cAAc,KAAK,WAAW,MAAM;EACtC,GAAC,UAAA,OAED,EAAE,MAAM,MAAM,CAChB,GAAC,CAAAA,YAAA,QAGK,WAAmB,EAAE,IAAI,kBAAkB,SAAS,GAAC,cAAA,OAAiB,EACxE,eAAe,KACjB,CAAC,GAAC,CAAAC,gBAAA,GAAA,GAEA,MAAM,CAAA,CAAA,CAAA,CAGb,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/display/Card.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type SkeletonTextProps } from '../feedback/SkeletonText';
 import { type PartProps } from '../utils/props';

package/dist/display/Card.js

@@ -10,7 +10,7 @@ import { SkeletonText } from "../feedback/SkeletonText.js";
 import { usePointer } from "../utils/motion/pointer.js";
 import { createVNode, shallowRef } from "vue";
 import { _component, childrenProp, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/display/Card.tsx
 /** 卡片样式 */
 /** 卡片的装饰效果 */