@zerodep-dev/vue-tsx-pro-ui 0.1.0 → 0.3.0

package/dist/diagram/layout.d.ts

@@ -0,0 +1,57 @@
+/**
+ * 分层自动排版：从根节点沿连线走，按最长步数从左往右分列，同一列从上往下排，每列在最高的那列里垂直居中。
+ * 绕回去的线（环）不算步数，否则会越排越远；不该影响排版的线（流程图的退回、提级）由调用方先去掉。
+ * 已经有位置的节点用它自己的 x、y（只给了一个时另一个照排），照样占一个格子。流程图、审批链、简单的依赖图都够用。
+ *
+ *   const placed = layoutLayers(
+ *     nodes.map((n) => ({ id: n.id, width: 140, height: 52 })),
+ *     edges.filter((e) => e.kind !== 'return'),
+ *     { roots: ['start'] },
+ *   );
+ */
+/** 要排的一个节点：大小，已有的位置 */
+export interface LayerNode {
+    /** 节点的标识，连线按它连 */
+    readonly id: string;
+    /** 宽 */
+    readonly width: number;
+    /** 高 */
+    readonly height: number;
+    /** 已有的横坐标（左上角）；没有时排出来 */
+    readonly x?: number | null;
+    /** 已有的纵坐标（左上角）；没有时排出来 */
+    readonly y?: number | null;
+}
+/** 一条连线：从哪到哪 */
+export interface LayerEdge {
+    /** 起点节点的标识 */
+    readonly from: string;
+    /** 终点节点的标识 */
+    readonly to: string;
+}
+/** 排好的一个节点（画布坐标） */
+export interface PlacedLayerNode {
+    /** 节点的标识 */
+    readonly id: string;
+    /** 横坐标（左上角） */
+    readonly x: number;
+    /** 纵坐标（左上角） */
+    readonly y: number;
+    /** 宽 */
+    readonly width: number;
+    /** 高 */
+    readonly height: number;
+}
+/** layoutLayers 的选项 */
+export interface LayerOptions {
+    /** 从这些节点开始走（流程的开始节点）；没走到的节点之后各自起头 */
+    roots?: readonly string[];
+    /** 列距（相邻两列左边的距离），默认 190 */
+    columnGap?: number;
+    /** 行距（相邻两行上边的距离），默认 96 */
+    rowGap?: number;
+    /** 画布边距，默认 32 */
+    margin?: number;
+}
+/** 排好每个节点的位置，按传入的先后返回 */
+export declare function layoutLayers(nodes: readonly LayerNode[], edges: readonly LayerEdge[], { roots, columnGap, rowGap, margin }?: LayerOptions): PlacedLayerNode[];

package/dist/diagram/layout.js

@@ -0,0 +1,50 @@
+//#region src/diagram/layout.ts
+/** 排好每个节点的位置，按传入的先后返回 */
+function layoutLayers(nodes, edges, { roots = [], columnGap = 190, rowGap = 96, margin = 32 } = {}) {
+	const ids = nodes.map((n) => n.id);
+	const forward = new Map(ids.map((id) => [id, []]));
+	for (const edge of edges) forward.get(edge.from)?.push(edge.to);
+	const back = /* @__PURE__ */ new Set();
+	const state = /* @__PURE__ */ new Map();
+	const order = [];
+	const visit = (id) => {
+		state.set(id, "visiting");
+		for (const next of forward.get(id) ?? []) if (state.get(next) === "visiting") back.add(`${id}>${next}`);
+		else if (!state.has(next)) visit(next);
+		state.set(id, "done");
+		order.unshift(id);
+	};
+	for (const id of [...roots, ...ids]) if (forward.has(id) && !state.has(id)) visit(id);
+	const column = new Map(ids.map((id) => [id, 0]));
+	for (const id of order) for (const next of forward.get(id) ?? []) {
+		if (back.has(`${id}>${next}`)) continue;
+		column.set(next, Math.max(column.get(next) ?? 0, (column.get(id) ?? 0) + 1));
+	}
+	const cellWidth = Math.max(0, ...nodes.map((n) => n.width));
+	const cellHeight = Math.max(0, ...nodes.map((n) => n.height));
+	const rows = /* @__PURE__ */ new Map();
+	for (const id of order) {
+		const c = column.get(id) ?? 0;
+		rows.set(c, [...rows.get(c) ?? [], id]);
+	}
+	const tallest = Math.max(1, ...[...rows.values()].map((r) => r.length));
+	const byId = new Map(nodes.map((n) => [n.id, n]));
+	const placed = /* @__PURE__ */ new Map();
+	for (const [c, members] of rows) members.forEach((id, i) => {
+		const node = byId.get(id);
+		const x = node.x ?? margin + c * columnGap + (cellWidth - node.width) / 2;
+		const y = node.y ?? margin + (i + (tallest - members.length) / 2) * rowGap + (cellHeight - node.height) / 2;
+		placed.set(id, {
+			id,
+			x,
+			y,
+			width: node.width,
+			height: node.height
+		});
+	});
+	return nodes.map((n) => placed.get(n.id));
+}
+//#endregion
+export { layoutLayers };
+
+//# sourceMappingURL=layout.js.map

package/dist/diagram/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","names":[],"sources":["../../src/diagram/layout.ts"],"sourcesContent":["/**\n * 分层自动排版：从根节点沿连线走，按最长步数从左往右分列，同一列从上往下排，每列在最高的那列里垂直居中。\n * 绕回去的线（环）不算步数，否则会越排越远；不该影响排版的线（流程图的退回、提级）由调用方先去掉。\n * 已经有位置的节点用它自己的 x、y（只给了一个时另一个照排），照样占一个格子。流程图、审批链、简单的依赖图都够用。\n *\n *   const placed = layoutLayers(\n *     nodes.map((n) => ({ id: n.id, width: 140, height: 52 })),\n *     edges.filter((e) => e.kind !== 'return'),\n *     { roots: ['start'] },\n *   );\n */\n\n/** 要排的一个节点：大小，已有的位置 */\nexport interface LayerNode {\n  /** 节点的标识，连线按它连 */\n  readonly id: string;\n  /** 宽 */\n  readonly width: number;\n  /** 高 */\n  readonly height: number;\n  /** 已有的横坐标（左上角）；没有时排出来 */\n  readonly x?: number | null;\n  /** 已有的纵坐标（左上角）；没有时排出来 */\n  readonly y?: number | null;\n}\n\n/** 一条连线：从哪到哪 */\nexport interface LayerEdge {\n  /** 起点节点的标识 */\n  readonly from: string;\n  /** 终点节点的标识 */\n  readonly to: string;\n}\n\n/** 排好的一个节点（画布坐标） */\nexport interface PlacedLayerNode {\n  /** 节点的标识 */\n  readonly id: string;\n  /** 横坐标（左上角） */\n  readonly x: number;\n  /** 纵坐标（左上角） */\n  readonly y: number;\n  /** 宽 */\n  readonly width: number;\n  /** 高 */\n  readonly height: number;\n}\n\n/** layoutLayers 的选项 */\nexport interface LayerOptions {\n  /** 从这些节点开始走（流程的开始节点）；没走到的节点之后各自起头 */\n  roots?: readonly string[];\n  /** 列距（相邻两列左边的距离），默认 190 */\n  columnGap?: number;\n  /** 行距（相邻两行上边的距离），默认 96 */\n  rowGap?: number;\n  /** 画布边距，默认 32 */\n  margin?: number;\n}\n\n/** 排好每个节点的位置，按传入的先后返回 */\nexport function layoutLayers(\n  nodes: readonly LayerNode[],\n  edges: readonly LayerEdge[],\n  { roots = [], columnGap = 190, rowGap = 96, margin = 32 }: LayerOptions = {},\n): PlacedLayerNode[] {\n  const ids = nodes.map((n) => n.id);\n  const forward = new Map<string, string[]>(ids.map((id) => [id, []]));\n  for (const edge of edges) forward.get(edge.from)?.push(edge.to);\n\n  // 深度优先找出绕回去的线（指向还在路上的节点），去掉它们之后是无环的\n  const back = new Set<string>();\n  const state = new Map<string, 'visiting' | 'done'>();\n  const order: string[] = [];\n  const visit = (id: string) => {\n    state.set(id, 'visiting');\n    for (const next of forward.get(id) ?? []) {\n      if (state.get(next) === 'visiting') back.add(`${id}>${next}`);\n      else if (!state.has(next)) visit(next);\n    }\n    state.set(id, 'done');\n    order.unshift(id);\n  };\n  for (const id of [...roots, ...ids]) if (forward.has(id) && !state.has(id)) visit(id);\n\n  // 按拓扑序算最长步数：列号\n  const column = new Map<string, number>(ids.map((id) => [id, 0]));\n  for (const id of order) {\n    for (const next of forward.get(id) ?? []) {\n      if (back.has(`${id}>${next}`)) continue;\n      column.set(next, Math.max(column.get(next) ?? 0, (column.get(id) ?? 0) + 1));\n    }\n  }\n\n  // 每个格子按最大的节点算，节点在格子里居中\n  const cellWidth = Math.max(0, ...nodes.map((n) => n.width));\n  const cellHeight = Math.max(0, ...nodes.map((n) => n.height));\n  const rows = new Map<number, string[]>();\n  for (const id of order) {\n    const c = column.get(id) ?? 0;\n    rows.set(c, [...(rows.get(c) ?? []), id]);\n  }\n  const tallest = Math.max(1, ...[...rows.values()].map((r) => r.length));\n  const byId = new Map(nodes.map((n) => [n.id, n]));\n  const placed = new Map<string, PlacedLayerNode>();\n  for (const [c, members] of rows) {\n    members.forEach((id, i) => {\n      const node = byId.get(id)!;\n      const x = node.x ?? margin + c * columnGap + (cellWidth - node.width) / 2;\n      const y =\n        node.y ??\n        margin + (i + (tallest - members.length) / 2) * rowGap + (cellHeight - node.height) / 2;\n      placed.set(id, { id, x, y, width: node.width, height: node.height });\n    });\n  }\n  return nodes.map((n) => placed.get(n.id)!);\n}\n"],"mappings":";;AA6DA,SAAgB,aACd,OACA,OACA,EAAE,QAAQ,CAAC,GAAG,YAAY,KAAK,SAAS,IAAI,SAAS,OAAqB,CAAC,GACxD;CACnB,MAAM,MAAM,MAAM,KAAK,MAAM,EAAE,EAAE;CACjC,MAAM,UAAU,IAAI,IAAsB,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;CACnE,KAAK,MAAM,QAAQ,OAAO,QAAQ,IAAI,KAAK,IAAI,CAAC,EAAE,KAAK,KAAK,EAAE;CAG9D,MAAM,uBAAO,IAAI,IAAY;CAC7B,MAAM,wBAAQ,IAAI,IAAiC;CACnD,MAAM,QAAkB,CAAC;CACzB,MAAM,SAAS,OAAe;EAC5B,MAAM,IAAI,IAAI,UAAU;EACxB,KAAK,MAAM,QAAQ,QAAQ,IAAI,EAAE,KAAK,CAAC,GACrC,IAAI,MAAM,IAAI,IAAI,MAAM,YAAY,KAAK,IAAI,GAAG,GAAG,GAAG,MAAM;OACvD,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG,MAAM,IAAI;EAEvC,MAAM,IAAI,IAAI,MAAM;EACpB,MAAM,QAAQ,EAAE;CAClB;CACA,KAAK,MAAM,MAAM,CAAC,GAAG,OAAO,GAAG,GAAG,GAAG,IAAI,QAAQ,IAAI,EAAE,KAAK,CAAC,MAAM,IAAI,EAAE,GAAG,MAAM,EAAE;CAGpF,MAAM,SAAS,IAAI,IAAoB,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;CAC/D,KAAK,MAAM,MAAM,OACf,KAAK,MAAM,QAAQ,QAAQ,IAAI,EAAE,KAAK,CAAC,GAAG;EACxC,IAAI,KAAK,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG;EAC/B,OAAO,IAAI,MAAM,KAAK,IAAI,OAAO,IAAI,IAAI,KAAK,IAAI,OAAO,IAAI,EAAE,KAAK,KAAK,CAAC,CAAC;CAC7E;CAIF,MAAM,YAAY,KAAK,IAAI,GAAG,GAAG,MAAM,KAAK,MAAM,EAAE,KAAK,CAAC;CAC1D,MAAM,aAAa,KAAK,IAAI,GAAG,GAAG,MAAM,KAAK,MAAM,EAAE,MAAM,CAAC;CAC5D,MAAM,uBAAO,IAAI,IAAsB;CACvC,KAAK,MAAM,MAAM,OAAO;EACtB,MAAM,IAAI,OAAO,IAAI,EAAE,KAAK;EAC5B,KAAK,IAAI,GAAG,CAAC,GAAI,KAAK,IAAI,CAAC,KAAK,CAAC,GAAI,EAAE,CAAC;CAC1C;CACA,MAAM,UAAU,KAAK,IAAI,GAAG,GAAG,CAAC,GAAG,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,MAAM,EAAE,MAAM,CAAC;CACtE,MAAM,OAAO,IAAI,IAAI,MAAM,KAAK,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;CAChD,MAAM,yBAAS,IAAI,IAA6B;CAChD,KAAK,MAAM,CAAC,GAAG,YAAY,MACzB,QAAQ,SAAS,IAAI,MAAM;EACzB,MAAM,OAAO,KAAK,IAAI,EAAE;EACxB,MAAM,IAAI,KAAK,KAAK,SAAS,IAAI,aAAa,YAAY,KAAK,SAAS;EACxE,MAAM,IACJ,KAAK,KACL,UAAU,KAAK,UAAU,QAAQ,UAAU,KAAK,UAAU,aAAa,KAAK,UAAU;EACxF,OAAO,IAAI,IAAI;GAAE;GAAI;GAAG;GAAG,OAAO,KAAK;GAAO,QAAQ,KAAK;EAAO,CAAC;CACrE,CAAC;CAEH,OAAO,MAAM,KAAK,MAAM,OAAO,IAAI,EAAE,EAAE,CAAE;AAC3C"}

package/dist/display/Accordion.js

@@ -5,8 +5,8 @@ import { disclosureStyles } from "../utils/style/transitions.js";
 import { ButtonBase } from "../base/ButtonBase.js";
 import { selectedValues, toggleSelection } from "../utils/data/selection.js";
 import { Collapse } from "./Collapse.js";
-import { computed, createVNode, h, isVNode, mergeProps, shallowRef, useId } from "vue";
-import { _component, bindable, childrenProp, createContext, forwardChildren, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+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 { ChevronDown } from "@lucide/icons";
 //#region src/display/Accordion.tsx
@@ -123,7 +123,7 @@ var Accordion = /*#__PURE__*/ _component((_props, _ctx) => {
 		event.preventDefault();
 		next.focus();
 	}
-	return () => createVNode("div", mergeProps(mergeAttrs({ sx: [accordionStyles.root, size.value && fontSizeStyles[size.value]] }, rest, {
+	return () => createVNode("div", mergeJsxProps(mergeAttrs({ sx: [accordionStyles.root, size.value && fontSizeStyles[size.value]] }, rest, {
 		ref: root,
 		onKeydown
 	}), {
@@ -172,7 +172,7 @@ var AccordionItem = /*#__PURE__*/ _component((_props2, _ctx2) => {
 		const open = model.open;
 		const off = disabled.value || accordion.disabled;
 		const state = open ? "open" : "closed";
-		const trigger = createVNode(ButtonBase, mergeProps(mergePartProps({ sx: [accordionStyles.trigger, off && accordionStyles.triggerDisabled] }, propsTrigger.value, {
+		const trigger = createVNode(ButtonBase, mergeJsxProps(mergePartProps({ sx: [accordionStyles.trigger, off && accordionStyles.triggerDisabled] }, propsTrigger.value, {
 			id: triggerId,
 			disabled: off,
 			"aria-expanded": open,
@@ -189,10 +189,10 @@ var AccordionItem = /*#__PURE__*/ _component((_props2, _ctx2) => {
 				open && accordionStyles.chevronOpen
 			]
 		}, propsChevron.value), null)] });
-		return createVNode("div", mergeProps(mergeAttrs({ sx: accordionStyles.item }, rest), {
+		return createVNode("div", mergeJsxProps(mergeAttrs({ sx: accordionStyles.item }, rest), {
 			"data-state": state,
 			"data-disabled": off || void 0
-		}), [h(`h${accordion.headingLevel}`, mergeAttrs({ sx: accordionStyles.heading }, propsHeading.value), [trigger]), createVNode(Collapse, mergeProps(mergePartProps({ propsContent: { sx: accordionStyles.content } }, propsContent.value, {
+		}), [h(`h${accordion.headingLevel}`, mergeAttrs({ sx: accordionStyles.heading }, propsHeading.value), [trigger]), createVNode(Collapse, mergeJsxProps(mergePartProps({ propsContent: { sx: accordionStyles.content } }, propsContent.value, {
 			id: contentId,
 			role: "region",
 			"aria-labelledby": triggerId

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 * 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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"}

package/dist/display/AnimatedNumber.js

@@ -4,8 +4,8 @@ import { toneStyles } from "../utils/style/typography.js";
 import { VisuallyHidden } from "../base/VisuallyHidden.js";
 import { useFormat } from "../config/lang/format.js";
 import { useTween } from "../utils/motion/tween.js";
-import { createVNode, mergeProps, shallowRef } from "vue";
-import { _component, effect, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+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";
 //#region src/display/AnimatedNumber.tsx
 /** 未声明的属性落到外层 span 上；原生的 prefix 属性（RDFa）让给前缀内容 */
@@ -61,13 +61,13 @@ var AnimatedNumber = /*#__PURE__*/ _component((_props, _ctx) => {
 			down: "danger",
 			flat: tone.value
 		}[direction] : tone.value;
-		return createVNode("span", mergeProps(mergeAttrs({ sx: [animatedNumberStyles.root, color && toneStyles[color]] }, rest, { ref: (element) => root = element }), { "data-trend": trend.value ? direction : void 0 }), [
+		return createVNode("span", mergeJsxProps(mergeAttrs({ sx: [animatedNumberStyles.root, color && toneStyles[color]] }, rest, { ref: (element) => root = element }), { "data-trend": trend.value ? direction : void 0 }), [
 			hasContent(prefix.value) && createVNode("span", mergeAttrs({}, propsPrefix.value), [prefix.value]),
 			createVNode("span", mergeAttrs({}, propsValue.value, {
 				"aria-hidden": true,
 				ref: valueElement
 			}), [untrack(() => shownText())]),
-			createVNode(VisuallyHidden, mergeProps(mergePartProps({}, propsLabel.value), { "key": "__site0" }), {
+			createVNode(VisuallyHidden, mergeJsxProps(mergePartProps({}, propsLabel.value), { "key": "__site0" }), {
 				default: () => [text(value.value)],
 				$stable: true
 			}),

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 * 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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"}

package/dist/display/Avatar.js

@@ -6,8 +6,8 @@ import { radiusStyles } from "../utils/style/styles.js";
 import { useRecipe } from "../config/styles.js";
 import { Icon } from "../base/Icon.js";
 import { statusToneStyles } from "../utils/style/tone-styles.js";
-import { createVNode, mergeProps, ref, watch } from "vue";
-import { _component, createContext, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+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 { User } from "@lucide/icons";
 //#region src/display/Avatar.tsx
@@ -118,7 +118,7 @@ var Avatar = /*#__PURE__*/ _component((_props, _ctx) => {
 			grouped: !!group,
 			loading: status.value === "loading"
 		});
-		return createVNode("span", mergeProps(mergeAttrs({
+		return createVNode("span", mergeJsxProps(mergeAttrs({
 			...s.root,
 			sx: [
 				statusToneStyles[fill][color],
@@ -129,7 +129,7 @@ var Avatar = /*#__PURE__*/ _component((_props, _ctx) => {
 		}, rest, name.value ? {
 			role: "img",
 			"aria-label": name.value
-		} : { "aria-hidden": true }), { "data-state": src.value ? status.value : "fallback" }), [src.value && status.value !== "error" && createVNode("img", mergeProps({
+		} : { "aria-hidden": true }), { "data-state": src.value ? status.value : "fallback" }), [src.value && status.value !== "error" && createVNode("img", mergeJsxProps({
 			"key": src.value,
 			"alt": ""
 		}, mergeAttrs(s.image, propsImage.value, {

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":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,IAAa,qBAAqB,cAA0C,aAAa;;;;;AAMzF,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM;CACN,OAAO;EAAC;EAAQ;EAAS;CAAU;CACnC,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,UAAU;GACV,eAAe;GACf,YAAY;EACd;EACA,OAAO;GAAE,OAAO;GAAS,QAAQ;GAAS,WAAW;EAAQ;EAC7D,UAAU;GAAE,YAAY;GAAW,YAAY;GAAG,eAAe;EAAY;CAC/E;CACA,UAAU;EAER,SAAS,EACP,MAAM,EACJ,MAAM;GACJ,WAAW,SAAS,EAAE,aAAa,GAAE,GAAI,EAAE,OAAO;GAClD,mBAAmB;IAAE,SAAS;IAAU,gBAAgB;GAAE;EAC5D,EACF,EACF;EAEA,SAAS,EAAE,MAAM,EAAE,OAAO;GAAE,UAAU;GAAY,SAAS;EAAE,EAAE,EAAE;CACnE;AACF,CAAC;;;AAMD,SAAgB,SAAS,MAAsB;CAC7C,MAAM,UAAU,KAAK,KAAK;CAC1B,IAAI,CAAC,SAAS,OAAO;CACrB,IAAI,QAAQ,KAAK,OAAO,GAAG,OAAO,QAAQ,GAAG,EAAE;CAC/C,MAAM,QAAQ,QAAQ,MAAM,KAAK;CACjC,QAAQ,MAAM,EAAE,CAAE,MAAO,MAAM,SAAS,IAAI,MAAM,GAAG,EAAE,CAAC,CAAE,KAAM,IAAA,CAAK,YAAY;AACnF;;AAGA,IAAa,SAAS,0BACpB,QAAA,SAWmB;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MADd,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,aAAa,YAAY,iBAAiB;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;EAAE,SAAO,QAAA;EAAE,MAAI,KAAA;CAAC,IAAI;EAChF,QAAQ;EACR,SAAS;EACT,MAAM;CACR,CAAC;CACD,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,QAAQ,mBAAmB,OAAO,IAAI;CAE5C,IAAI,SAAMC,IAA0C,SAAS;CAC7D,YACE,IAAA,aACO,OAAA,QAAS,SAClB;CAEA,aAAa;EACX,MAAM,eAAe,CAAA,IAAA,SAAQ,OAAA,UAAW;EACxC,MAAM,EAAE,MAAM,UAAU,QAAQ,QAAQ,SAAS,MAAM,MAAM,UAAU,WAAW;EAClF,MAAM,IAAI,OAAO;GACf,SAAS;GACT,MAAM;GACN,SAAS,CAAC,CAAC;GACX,SAAS,OAAA,UAAW;EACtB,CAAC;EACD,OAAAC,YAAA,QAAAC,WAEQ,WACF;GACE,GAAG,EAAE;GACL,IAAI;IACF,iBAAiB,KAAK,CAAC;IACvB,EAAE,KAAK;IACP,aAAa;IACb,YAAY,eAAe;GAAS;EAExC,GACA,MACA,KAAA,QAAO;GAAE,MAAM;GAAO,cAAY,KAAA;EAAO,IAAI,EAAE,eAAe,KAAK,CACrE,GAAC,EAAA,cACW,IAAA,QAAA,OAAA,QAAe,WAAU,CAAA,GAAA,CAEpC,IAAA,SAAO,OAAA,UAAW,WAAOD,YAAA,OAAAC,WAAA;GAAA,OAAA,IAAA;GAAA,OAAA;EAAA,GAIlB,WAAkB,EAAE,OAAK,WAAA,OAAc;GACzC,KAAG,IAAA;GACH,cAAe,OAAA,QAAS;GACxB,eAAgB,OAAA,QAAS;EAC3B,CAAC,CAAC,GAAA,IAAA,GAGL,gBAAYD,YAAA,QACD,WAAmB,EAAE,UAAQ,cAAA,OAAiB,EAAE,eAAe,KAAK,CAAC,GAAC,CAC7E,SAAA,UAAa,KAAA,QAAO,SAAQ,KAAA,KAAK,IAACA,YAAA,MAAA,EAAA,QAAe,KAAI,GAAA,IAAA,EAAK,CAAA,CAE9D,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,IAAa,qBAAqB,cAA0C,aAAa;;;;;AAMzF,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM;CACN,OAAO;EAAC;EAAQ;EAAS;CAAU;CACnC,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,UAAU;GACV,eAAe;GACf,YAAY;EACd;EACA,OAAO;GAAE,OAAO;GAAS,QAAQ;GAAS,WAAW;EAAQ;EAC7D,UAAU;GAAE,YAAY;GAAW,YAAY;GAAG,eAAe;EAAY;CAC/E;CACA,UAAU;EAER,SAAS,EACP,MAAM,EACJ,MAAM;GACJ,WAAW,SAAS,EAAE,aAAa,GAAE,GAAI,EAAE,OAAO;GAClD,mBAAmB;IAAE,SAAS;IAAU,gBAAgB;GAAE;EAC5D,EACF,EACF;EAEA,SAAS,EAAE,MAAM,EAAE,OAAO;GAAE,UAAU;GAAY,SAAS;EAAE,EAAE,EAAE;CACnE;AACF,CAAC;;;AAMD,SAAgB,SAAS,MAAsB;CAC7C,MAAM,UAAU,KAAK,KAAK;CAC1B,IAAI,CAAC,SAAS,OAAO;CACrB,IAAI,QAAQ,KAAK,OAAO,GAAG,OAAO,QAAQ,GAAG,EAAE;CAC/C,MAAM,QAAQ,QAAQ,MAAM,KAAK;CACjC,QAAQ,MAAM,EAAE,CAAE,MAAO,MAAM,SAAS,IAAI,MAAM,GAAG,EAAE,CAAC,CAAE,KAAM,IAAA,CAAK,YAAY;AACnF;;AAGA,IAAa,SAAS,0BACpB,QAAA,SAWmB;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MADd,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,aAAa,YAAY,iBAAiB;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;EAAE,SAAO,QAAA;EAAE,MAAI,KAAA;CAAC,IAAI;EAChF,QAAQ;EACR,SAAS;EACT,MAAM;CACR,CAAC;CACD,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,QAAQ,mBAAmB,OAAO,IAAI;CAE5C,IAAI,SAAMC,IAA0C,SAAS;CAC7D,YACE,IAAA,aACO,OAAA,QAAS,SAClB;CAEA,aAAa;EACX,MAAM,eAAe,CAAA,IAAA,SAAQ,OAAA,UAAW;EACxC,MAAM,EAAE,MAAM,UAAU,QAAQ,QAAQ,SAAS,MAAM,MAAM,UAAU,WAAW;EAClF,MAAM,IAAI,OAAO;GACf,SAAS;GACT,MAAM;GACN,SAAS,CAAC,CAAC;GACX,SAAS,OAAA,UAAW;EACtB,CAAC;EACD,OAAAC,YAAA,QAAAC,cAEQ,WACF;GACE,GAAG,EAAE;GACL,IAAI;IACF,iBAAiB,KAAK,CAAC;IACvB,EAAE,KAAK;IACP,aAAa;IACb,YAAY,eAAe;GAAS;EAExC,GACA,MACA,KAAA,QAAO;GAAE,MAAM;GAAO,cAAY,KAAA;EAAO,IAAI,EAAE,eAAe,KAAK,CACrE,GAAC,EAAA,cACW,IAAA,QAAA,OAAA,QAAe,WAAU,CAAA,GAAA,CAEpC,IAAA,SAAO,OAAA,UAAW,WAAOD,YAAA,OAAAC,cAAA;GAAA,OAAA,IAAA;GAAA,OAAA;EAAA,GAIlB,WAAkB,EAAE,OAAK,WAAA,OAAc;GACzC,KAAG,IAAA;GACH,cAAe,OAAA,QAAS;GACxB,eAAgB,OAAA,QAAS;EAC3B,CAAC,CAAC,GAAA,IAAA,GAGL,gBAAYD,YAAA,QACD,WAAmB,EAAE,UAAQ,cAAA,OAAiB,EAAE,eAAe,KAAK,CAAC,GAAC,CAC7E,SAAA,UAAa,KAAA,QAAO,SAAQ,KAAA,KAAK,IAACA,YAAA,MAAA,EAAA,QAAe,KAAI,GAAA,IAAA,EAAK,CAAA,CAE9D,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/display/Checklist.js

@@ -5,8 +5,8 @@ import { focusRingStyles } from "../utils/style/styles.js";
 import { Icon } from "../base/Icon.js";
 import { VisuallyHidden } from "../base/VisuallyHidden.js";
 import { Progress } from "../feedback/Progress.js";
-import { createVNode, mergeProps, useId } from "vue";
-import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, useId } 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 { Ban, CircleAlert, CircleCheck, CircleDashed, CircleMinus } from "@lucide/icons";
 //#region src/display/Checklist.tsx
@@ -177,7 +177,7 @@ var Checklist = /*#__PURE__*/ _component((_props, _ctx) => {
 		const state = statusOf(item);
 		if (!onCheckedChange.value) return createVNode("span", css.attrs(checklistStyles.status), [statusIcon(item), createVNode(VisuallyHidden, null, { default: () => [lang.checklistStatus[state]] })]);
 		const done = state === "done";
-		return createVNode("span", css.attrs(checklistStyles.status), [createVNode("button", mergeProps({
+		return createVNode("span", css.attrs(checklistStyles.status), [createVNode("button", mergeJsxProps({
 			"type": "button",
 			"role": "checkbox",
 			"aria-checked": done,
@@ -206,9 +206,9 @@ var Checklist = /*#__PURE__*/ _component((_props, _ctx) => {
 		}
 		if (layout.value === "inline") return createVNode("ul", mergeAttrs({ sx: [checklistStyles.inline, size.value && fontSizeStyles[size.value]] }, rest), [items.value.map((item, index) => {
 			const labelId = `${id}-${index}`;
-			return createVNode("li", mergeProps({ "key": keyOf(item, index) }, css.attrs(checklistStyles.inlineItem)), [
+			return createVNode("li", mergeJsxProps({ "key": keyOf(item, index) }, css.attrs(checklistStyles.inlineItem)), [
 				status(item, labelId),
-				createVNode("span", mergeProps({ "id": labelId }, css.attrs(labelSx(item))), [item.label]),
+				createVNode("span", mergeJsxProps({ "id": labelId }, css.attrs(labelSx(item))), [item.label]),
 				hasContent(item.date) && createVNode("span", css.attrs(checklistStyles.meta, statusOf(item) === "overdue" && checklistStyles.late), [item.date]),
 				item.evidence
 			]);
@@ -228,10 +228,10 @@ var Checklist = /*#__PURE__*/ _component((_props, _ctx) => {
 				item.date,
 				item.evidence
 			].some(hasContent);
-			return createVNode("li", mergeProps({ "key": keyOf(item, index) }, mergeAttrs({ sx: checklistStyles.item }, own), { "data-status": statusOf(item) }), [
+			return createVNode("li", mergeJsxProps({ "key": keyOf(item, index) }, mergeAttrs({ sx: checklistStyles.item }, own), { "data-status": statusOf(item) }), [
 				status(item, labelId),
 				createVNode("div", css.attrs(checklistStyles.body), [
-					createVNode("span", mergeProps({ "id": labelId }, css.attrs(labelSx(item))), [item.label]),
+					createVNode("span", mergeJsxProps({ "id": labelId }, css.attrs(labelSx(item))), [item.label]),
 					hasContent(item.description) && createVNode("span", css.attrs(checklistStyles.description), [item.description]),
 					meta && createVNode("span", css.attrs(checklistStyles.meta), [
 						hasContent(item.owner) && createVNode("span", null, [item.owner]),

package/dist/display/Checklist.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checklist.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/Checklist.tsx"],"sourcesContent":["/**\n * 完成清单：一组要做完的事，每项的状态（完成、待办、超时、不适用、受阻）与它的上下文——怎么做、谁负责、哪天、证据、去处理。\n * 里程碑与交付证据、结项材料、上线检查、新用户的引导任务。参考 Shopify Polaris 的 Setup guide、GitHub 的任务列表。\n *\n *   <Checklist\n *     title=\"结项材料\"\n *     summary\n *     items={[\n *       { label: '验收报告', status: 'done', date: '10-12', evidence: <Link href={url}>验证报告.pdf</Link> },\n *       { label: '财务复核意见', status: 'overdue', owner: '财务部', date: '计划 10-20', action: <Button>催办</Button> },\n *       { label: '合同签订记录', description: '谈定价格与生效日期，采购经理签字', owner: '采购部' },\n *     ]}\n *   />\n *   <Checklist layout=\"inline\" items={…} />                    一行排开、放不下换行（详情行、卡片的一角）\n *   <Checklist layout=\"icons\" aria-label=\"里程碑\" items={…} />  只有一排状态图标（表格的格子里），读屏念每一项\n *   <Checklist items={tasks} onCheckedChange={(item, done) => save(item.key, done)} />   可以勾选（上线检查、引导任务）\n *\n * summary 在上面显示“已完成 2 / 3”与进度条（不适用的不算）。没完成的名称是次要色，不适用的划掉；\n * 超时的日期用危险色。每项的状态写在给读屏的文字里。\n *\n * 部件：Root（div）、Summary（汇总行）、List（ul）、Item（li，可以按项计算）、Status（状态图标，可勾选时是按钮）、Label、Meta。\n */\nimport { Ban, CircleAlert, CircleCheck, CircleDashed, CircleMinus } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { Icon, type IconData } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { Progress } from '../feedback/Progress';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** 一项的状态 */\nexport interface ChecklistStatuses {\n  /** 完成 */\n  done: unknown;\n  /** 待办（默认） */\n  todo: unknown;\n  /** 超时：过了计划日期还没完成 */\n  overdue: unknown;\n  /** 受阻：等别人、缺前提 */\n  blocked: unknown;\n  /** 不适用：这一次不用做，不算进进度 */\n  skipped: unknown;\n}\n\n/** 清单的一项 */\nexport interface ChecklistItem {\n  /** 唯一的 key；不写时用 label（label 是文字时）或位置 */\n  key?: string;\n  /** 名称 */\n  label: VNodeChild;\n  /** 状态，默认 todo */\n  status?: keyof ChecklistStatuses;\n  /** 说明：怎么做、要什么材料、缺的由谁出具 */\n  description?: VNodeChild;\n  /** 负责人（谁处理、谁出具） */\n  owner?: VNodeChild;\n  /** 日期：完成的日期，或计划日期（超时时用危险色） */\n  date?: VNodeChild;\n  /** 证据：附件、报告的链接 */\n  evidence?: VNodeChild;\n  /** 操作：上传证据、去处理、催办（结束边） */\n  action?: VNodeChild;\n}\n\n/** 清单的排法 */\nexport interface ChecklistLayouts {\n  /** 一项一行（默认）：状态、名称与说明、负责人 · 日期 · 证据，操作在结束边 */\n  list: unknown;\n  /** 一行排开、放不下换行：状态、名称、日期、证据 */\n  inline: unknown;\n  /** 只有一排状态图标：表格的格子里；悬停与读屏有每一项的说明 */\n  icons: unknown;\n}\n\n/** 未声明的属性落到外层元素上（list 是 div，inline 是 ul，icons 是 span） */\nexport interface ChecklistProps extends PartProps<'div'> {\n  /** 各项 */\n  items: readonly ChecklistItem[];\n  /**\n   * 排法\n   * @default 'list'\n   */\n  layout?: keyof ChecklistLayouts;\n  /** 上面显示“已完成 2 / 3”与进度条（list 排法） */\n  summary?: boolean;\n  /** 字号档位；不写时继承 */\n  size?: TextSize;\n  /** 可以勾选：状态图标变成复选按钮，点了报告新的完成状态（不适用、受阻的不能勾） */\n  onCheckedChange?: (item: ChecklistItem, done: boolean) => void;\n  /** 每一项（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: ChecklistItem) => PartProps<'li'>);\n}\n\n/** Checklist 的样式 */\nexport const checklistStyles = css.create({\n  root: { display: 'grid', gap: '_sm' },\n  summary: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n    alignItems: 'center',\n    gap: '_md',\n    fontSize: '_sm',\n    color: '_textMuted',\n  },\n  list: { display: 'grid', margin: 0, padding: 0, listStyle: 'none' },\n  // 状态一列、内容一列、操作一列；状态贴着名称那一行\n  item: {\n    display: 'grid',\n    gridTemplateColumns: 'auto minmax(0, 1fr) auto',\n    columnGap: '_sm',\n    alignItems: 'start',\n    paddingBlock: '_xs',\n  },\n  status: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: '1lh',\n    fontSize: '1.125em',\n  },\n  // 可以勾选时的按钮：只有图标，去掉按钮的外观\n  toggle: {\n    display: 'inline-flex',\n    padding: 0,\n    margin: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'inherit',\n    font: 'inherit',\n    borderRadius: '_full',\n    cursor: { default: 'pointer', ':disabled': 'default' },\n  },\n  body: { display: 'grid', gap: '2px', minWidth: 0 },\n  label: { color: '_text', overflowWrap: 'anywhere' },\n  labelPending: { color: '_textMuted' },\n  labelSkipped: { color: '_textMuted', textDecorationLine: 'line-through' },\n  description: { fontSize: '_sm', color: '_textMuted' },\n  meta: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: '_sm',\n    rowGap: '2px',\n    fontSize: '_sm',\n    color: '_textMuted',\n  },\n  late: { color: '_dangerText' },\n  action: { display: 'flex', alignItems: 'center', gap: '_xs' },\n  inline: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    columnGap: '_lg',\n    rowGap: '_xs',\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  inlineItem: { display: 'inline-flex', alignItems: 'center', gap: '_xs', whiteSpace: 'nowrap' },\n  icons: { display: 'inline-flex', alignItems: 'center', gap: '2px' },\n});\n\n/** 各状态的图标与颜色 */\nexport const checklistStatusStyles = css.create({\n  done: { color: '_successText' },\n  todo: { color: '_textMuted' },\n  overdue: { color: '_dangerText' },\n  blocked: { color: '_warningText' },\n  skipped: { color: '_textMuted' },\n});\n\nconst statusIcons: Record<keyof ChecklistStatuses, IconData> = {\n  done: CircleCheck,\n  todo: CircleDashed,\n  overdue: CircleAlert,\n  blocked: Ban,\n  skipped: CircleMinus,\n};\n\nconst keyOf = (item: ChecklistItem, index: number) =>\n  item.key ?? (typeof item.label === 'string' ? item.label : String(index));\n\nconst statusOf = (item: ChecklistItem): keyof ChecklistStatuses => item.status ?? 'todo';\n\n/** 完成清单 */\nexport const Checklist = _component(\n  ({\n    items,\n    layout = 'list',\n    summary = false,\n    size,\n    onCheckedChange,\n    propsItem,\n    ...rest\n  }: ChecklistProps) => {\n    const lang = useLang();\n    const id = useId();\n\n    const statusIcon = (item: ChecklistItem) => {\n      const status = statusOf(item);\n      return <Icon icon={statusIcons[status]} sx={checklistStatusStyles[status]} />;\n    };\n\n    /** 状态：可以勾选时是复选按钮（名称是这一项的名称），否则是图标加给读屏的状态文字 */\n    const status = (item: ChecklistItem, labelId: string) => {\n      const state = statusOf(item);\n      if (!onCheckedChange)\n        return (\n          <span {...css.attrs(checklistStyles.status)}>\n            {statusIcon(item)}\n            <VisuallyHidden>{lang.checklistStatus[state]}</VisuallyHidden>\n          </span>\n        );\n      const done = state === 'done';\n      return (\n        <span {...css.attrs(checklistStyles.status)}>\n          <button\n            type=\"button\"\n            role=\"checkbox\"\n            aria-checked={done}\n            aria-labelledby={labelId}\n            aria-describedby={`${labelId}-status`}\n            disabled={state === 'skipped' || state === 'blocked'}\n            onClick={() => onCheckedChange(item, !done)}\n            {...css.attrs(checklistStyles.toggle, focusRingStyles.visible)}\n          >\n            {statusIcon(item)}\n          </button>\n          <VisuallyHidden id={`${labelId}-status`}>{lang.checklistStatus[state]}</VisuallyHidden>\n        </span>\n      );\n    };\n\n    const labelSx = (item: ChecklistItem) => {\n      const state = statusOf(item);\n      return [\n        checklistStyles.label,\n        state === 'skipped'\n          ? checklistStyles.labelSkipped\n          : state !== 'done' && checklistStyles.labelPending,\n      ];\n    };\n\n    /** 读屏念的整组：名称与状态（icons 排法） */\n    const iconsLabel = () =>\n      lang.checklistIconsLabel(\n        items.map((item) =>\n          lang.checklistItemState(\n            typeof item.label === 'string' ? item.label : '',\n            lang.checklistStatus[statusOf(item)],\n          ),\n        ),\n      );\n\n    const counted = () => items.filter((item) => statusOf(item) !== 'skipped');\n    const doneCount = () => counted().filter((item) => statusOf(item) === 'done').length;\n\n    return () => {\n      if (layout === 'icons') {\n        const label = iconsLabel();\n        return (\n          <span\n            {...mergeAttrs<'span'>(\n              { sx: [checklistStyles.icons, size && fontSizeStyles[size]] },\n              rest as PartProps<'span'>,\n              { role: 'img', 'aria-label': label, title: label },\n            )}\n          >\n            {items.map((item, index) => (\n              <span key={keyOf(item, index)}>{statusIcon(item)}</span>\n            ))}\n          </span>\n        );\n      }\n\n      if (layout === 'inline')\n        return (\n          <ul\n            {...mergeAttrs<'ul'>(\n              { sx: [checklistStyles.inline, size && fontSizeStyles[size]] },\n              rest as PartProps<'ul'>,\n            )}\n          >\n            {items.map((item, index) => {\n              const labelId = `${id}-${index}`;\n              return (\n                <li key={keyOf(item, index)} {...css.attrs(checklistStyles.inlineItem)}>\n                  {status(item, labelId)}\n                  <span id={labelId} {...css.attrs(labelSx(item))}>\n                    {item.label}\n                  </span>\n                  {hasContent(item.date) && (\n                    <span\n                      {...css.attrs(\n                        checklistStyles.meta,\n                        statusOf(item) === 'overdue' && checklistStyles.late,\n                      )}\n                    >\n                      {item.date}\n                    </span>\n                  )}\n                  {item.evidence}\n                </li>\n              );\n            })}\n          </ul>\n        );\n\n      const total = counted().length;\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: [checklistStyles.root, size && fontSizeStyles[size]] }, rest)}\n        >\n          {summary && total > 0 && (\n            <div {...css.attrs(checklistStyles.summary)}>\n              <span>{lang.checklistSummary(doneCount(), total)}</span>\n              <Progress\n                value={doneCount()}\n                max={total}\n                size=\"xs\"\n                tone={doneCount() === total ? 'success' : 'accent'}\n                aria-label={lang.checklistSummary(doneCount(), total)}\n              />\n            </div>\n          )}\n          <ul {...css.attrs(checklistStyles.list)}>\n            {items.map((item, index) => {\n              const own = typeof propsItem === 'function' ? propsItem(item) : propsItem;\n              const labelId = `${id}-${index}`;\n              const meta = [item.owner, item.date, item.evidence].some(hasContent);\n              return (\n                <li\n                  key={keyOf(item, index)}\n                  {...mergeAttrs<'li'>({ sx: checklistStyles.item }, own)}\n                  data-status={statusOf(item)}\n                >\n                  {status(item, labelId)}\n                  <div {...css.attrs(checklistStyles.body)}>\n                    <span id={labelId} {...css.attrs(labelSx(item))}>\n                      {item.label}\n                    </span>\n                    {hasContent(item.description) && (\n                      <span {...css.attrs(checklistStyles.description)}>{item.description}</span>\n                    )}\n                    {meta && (\n                      <span {...css.attrs(checklistStyles.meta)}>\n                        {hasContent(item.owner) && <span>{item.owner}</span>}\n                        {hasContent(item.date) && (\n                          <span\n                            {...css.attrs(statusOf(item) === 'overdue' && checklistStyles.late)}\n                          >\n                            {item.date}\n                          </span>\n                        )}\n                        {item.evidence}\n                      </span>\n                    )}\n                  </div>\n                  {hasContent(item.action) ? (\n                    <div {...css.attrs(checklistStyles.action)}>{item.action}</div>\n                  ) : (\n                    <span />\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Checklist.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/Checklist.tsx"],"sourcesContent":["/**\n * 完成清单：一组要做完的事，每项的状态（完成、待办、超时、不适用、受阻）与它的上下文——怎么做、谁负责、哪天、证据、去处理。\n * 里程碑与交付证据、结项材料、上线检查、新用户的引导任务。参考 Shopify Polaris 的 Setup guide、GitHub 的任务列表。\n *\n *   <Checklist\n *     title=\"结项材料\"\n *     summary\n *     items={[\n *       { label: '验收报告', status: 'done', date: '10-12', evidence: <Link href={url}>验证报告.pdf</Link> },\n *       { label: '财务复核意见', status: 'overdue', owner: '财务部', date: '计划 10-20', action: <Button>催办</Button> },\n *       { label: '合同签订记录', description: '谈定价格与生效日期，采购经理签字', owner: '采购部' },\n *     ]}\n *   />\n *   <Checklist layout=\"inline\" items={…} />                    一行排开、放不下换行（详情行、卡片的一角）\n *   <Checklist layout=\"icons\" aria-label=\"里程碑\" items={…} />  只有一排状态图标（表格的格子里），读屏念每一项\n *   <Checklist items={tasks} onCheckedChange={(item, done) => save(item.key, done)} />   可以勾选（上线检查、引导任务）\n *\n * summary 在上面显示“已完成 2 / 3”与进度条（不适用的不算）。没完成的名称是次要色，不适用的划掉；\n * 超时的日期用危险色。每项的状态写在给读屏的文字里。\n *\n * 部件：Root（div）、Summary（汇总行）、List（ul）、Item（li，可以按项计算）、Status（状态图标，可勾选时是按钮）、Label、Meta。\n */\nimport { Ban, CircleAlert, CircleCheck, CircleDashed, CircleMinus } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { Icon, type IconData } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { Progress } from '../feedback/Progress';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** 一项的状态 */\nexport interface ChecklistStatuses {\n  /** 完成 */\n  done: unknown;\n  /** 待办（默认） */\n  todo: unknown;\n  /** 超时：过了计划日期还没完成 */\n  overdue: unknown;\n  /** 受阻：等别人、缺前提 */\n  blocked: unknown;\n  /** 不适用：这一次不用做，不算进进度 */\n  skipped: unknown;\n}\n\n/** 清单的一项 */\nexport interface ChecklistItem {\n  /** 唯一的 key；不写时用 label（label 是文字时）或位置 */\n  key?: string;\n  /** 名称 */\n  label: VNodeChild;\n  /** 状态，默认 todo */\n  status?: keyof ChecklistStatuses;\n  /** 说明：怎么做、要什么材料、缺的由谁出具 */\n  description?: VNodeChild;\n  /** 负责人（谁处理、谁出具） */\n  owner?: VNodeChild;\n  /** 日期：完成的日期，或计划日期（超时时用危险色） */\n  date?: VNodeChild;\n  /** 证据：附件、报告的链接 */\n  evidence?: VNodeChild;\n  /** 操作：上传证据、去处理、催办（结束边） */\n  action?: VNodeChild;\n}\n\n/** 清单的排法 */\nexport interface ChecklistLayouts {\n  /** 一项一行（默认）：状态、名称与说明、负责人 · 日期 · 证据，操作在结束边 */\n  list: unknown;\n  /** 一行排开、放不下换行：状态、名称、日期、证据 */\n  inline: unknown;\n  /** 只有一排状态图标：表格的格子里；悬停与读屏有每一项的说明 */\n  icons: unknown;\n}\n\n/** 未声明的属性落到外层元素上（list 是 div，inline 是 ul，icons 是 span） */\nexport interface ChecklistProps extends PartProps<'div'> {\n  /** 各项 */\n  items: readonly ChecklistItem[];\n  /**\n   * 排法\n   * @default 'list'\n   */\n  layout?: keyof ChecklistLayouts;\n  /** 上面显示“已完成 2 / 3”与进度条（list 排法） */\n  summary?: boolean;\n  /** 字号档位；不写时继承 */\n  size?: TextSize;\n  /** 可以勾选：状态图标变成复选按钮，点了报告新的完成状态（不适用、受阻的不能勾） */\n  onCheckedChange?: (item: ChecklistItem, done: boolean) => void;\n  /** 每一项（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: ChecklistItem) => PartProps<'li'>);\n}\n\n/** Checklist 的样式 */\nexport const checklistStyles = css.create({\n  root: { display: 'grid', gap: '_sm' },\n  summary: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n    alignItems: 'center',\n    gap: '_md',\n    fontSize: '_sm',\n    color: '_textMuted',\n  },\n  list: { display: 'grid', margin: 0, padding: 0, listStyle: 'none' },\n  // 状态一列、内容一列、操作一列；状态贴着名称那一行\n  item: {\n    display: 'grid',\n    gridTemplateColumns: 'auto minmax(0, 1fr) auto',\n    columnGap: '_sm',\n    alignItems: 'start',\n    paddingBlock: '_xs',\n  },\n  status: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: '1lh',\n    fontSize: '1.125em',\n  },\n  // 可以勾选时的按钮：只有图标，去掉按钮的外观\n  toggle: {\n    display: 'inline-flex',\n    padding: 0,\n    margin: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'inherit',\n    font: 'inherit',\n    borderRadius: '_full',\n    cursor: { default: 'pointer', ':disabled': 'default' },\n  },\n  body: { display: 'grid', gap: '2px', minWidth: 0 },\n  label: { color: '_text', overflowWrap: 'anywhere' },\n  labelPending: { color: '_textMuted' },\n  labelSkipped: { color: '_textMuted', textDecorationLine: 'line-through' },\n  description: { fontSize: '_sm', color: '_textMuted' },\n  meta: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: '_sm',\n    rowGap: '2px',\n    fontSize: '_sm',\n    color: '_textMuted',\n  },\n  late: { color: '_dangerText' },\n  action: { display: 'flex', alignItems: 'center', gap: '_xs' },\n  inline: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    columnGap: '_lg',\n    rowGap: '_xs',\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  inlineItem: { display: 'inline-flex', alignItems: 'center', gap: '_xs', whiteSpace: 'nowrap' },\n  icons: { display: 'inline-flex', alignItems: 'center', gap: '2px' },\n});\n\n/** 各状态的图标与颜色 */\nexport const checklistStatusStyles = css.create({\n  done: { color: '_successText' },\n  todo: { color: '_textMuted' },\n  overdue: { color: '_dangerText' },\n  blocked: { color: '_warningText' },\n  skipped: { color: '_textMuted' },\n});\n\nconst statusIcons: Record<keyof ChecklistStatuses, IconData> = {\n  done: CircleCheck,\n  todo: CircleDashed,\n  overdue: CircleAlert,\n  blocked: Ban,\n  skipped: CircleMinus,\n};\n\nconst keyOf = (item: ChecklistItem, index: number) =>\n  item.key ?? (typeof item.label === 'string' ? item.label : String(index));\n\nconst statusOf = (item: ChecklistItem): keyof ChecklistStatuses => item.status ?? 'todo';\n\n/** 完成清单 */\nexport const Checklist = _component(\n  ({\n    items,\n    layout = 'list',\n    summary = false,\n    size,\n    onCheckedChange,\n    propsItem,\n    ...rest\n  }: ChecklistProps) => {\n    const lang = useLang();\n    const id = useId();\n\n    const statusIcon = (item: ChecklistItem) => {\n      const status = statusOf(item);\n      return <Icon icon={statusIcons[status]} sx={checklistStatusStyles[status]} />;\n    };\n\n    /** 状态：可以勾选时是复选按钮（名称是这一项的名称），否则是图标加给读屏的状态文字 */\n    const status = (item: ChecklistItem, labelId: string) => {\n      const state = statusOf(item);\n      if (!onCheckedChange)\n        return (\n          <span {...css.attrs(checklistStyles.status)}>\n            {statusIcon(item)}\n            <VisuallyHidden>{lang.checklistStatus[state]}</VisuallyHidden>\n          </span>\n        );\n      const done = state === 'done';\n      return (\n        <span {...css.attrs(checklistStyles.status)}>\n          <button\n            type=\"button\"\n            role=\"checkbox\"\n            aria-checked={done}\n            aria-labelledby={labelId}\n            aria-describedby={`${labelId}-status`}\n            disabled={state === 'skipped' || state === 'blocked'}\n            onClick={() => onCheckedChange(item, !done)}\n            {...css.attrs(checklistStyles.toggle, focusRingStyles.visible)}\n          >\n            {statusIcon(item)}\n          </button>\n          <VisuallyHidden id={`${labelId}-status`}>{lang.checklistStatus[state]}</VisuallyHidden>\n        </span>\n      );\n    };\n\n    const labelSx = (item: ChecklistItem) => {\n      const state = statusOf(item);\n      return [\n        checklistStyles.label,\n        state === 'skipped'\n          ? checklistStyles.labelSkipped\n          : state !== 'done' && checklistStyles.labelPending,\n      ];\n    };\n\n    /** 读屏念的整组：名称与状态（icons 排法） */\n    const iconsLabel = () =>\n      lang.checklistIconsLabel(\n        items.map((item) =>\n          lang.checklistItemState(\n            typeof item.label === 'string' ? item.label : '',\n            lang.checklistStatus[statusOf(item)],\n          ),\n        ),\n      );\n\n    const counted = () => items.filter((item) => statusOf(item) !== 'skipped');\n    const doneCount = () => counted().filter((item) => statusOf(item) === 'done').length;\n\n    return () => {\n      if (layout === 'icons') {\n        const label = iconsLabel();\n        return (\n          <span\n            {...mergeAttrs<'span'>(\n              { sx: [checklistStyles.icons, size && fontSizeStyles[size]] },\n              rest as PartProps<'span'>,\n              { role: 'img', 'aria-label': label, title: label },\n            )}\n          >\n            {items.map((item, index) => (\n              <span key={keyOf(item, index)}>{statusIcon(item)}</span>\n            ))}\n          </span>\n        );\n      }\n\n      if (layout === 'inline')\n        return (\n          <ul\n            {...mergeAttrs<'ul'>(\n              { sx: [checklistStyles.inline, size && fontSizeStyles[size]] },\n              rest as PartProps<'ul'>,\n            )}\n          >\n            {items.map((item, index) => {\n              const labelId = `${id}-${index}`;\n              return (\n                <li key={keyOf(item, index)} {...css.attrs(checklistStyles.inlineItem)}>\n                  {status(item, labelId)}\n                  <span id={labelId} {...css.attrs(labelSx(item))}>\n                    {item.label}\n                  </span>\n                  {hasContent(item.date) && (\n                    <span\n                      {...css.attrs(\n                        checklistStyles.meta,\n                        statusOf(item) === 'overdue' && checklistStyles.late,\n                      )}\n                    >\n                      {item.date}\n                    </span>\n                  )}\n                  {item.evidence}\n                </li>\n              );\n            })}\n          </ul>\n        );\n\n      const total = counted().length;\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: [checklistStyles.root, size && fontSizeStyles[size]] }, rest)}\n        >\n          {summary && total > 0 && (\n            <div {...css.attrs(checklistStyles.summary)}>\n              <span>{lang.checklistSummary(doneCount(), total)}</span>\n              <Progress\n                value={doneCount()}\n                max={total}\n                size=\"xs\"\n                tone={doneCount() === total ? 'success' : 'accent'}\n                aria-label={lang.checklistSummary(doneCount(), total)}\n              />\n            </div>\n          )}\n          <ul {...css.attrs(checklistStyles.list)}>\n            {items.map((item, index) => {\n              const own = typeof propsItem === 'function' ? propsItem(item) : propsItem;\n              const labelId = `${id}-${index}`;\n              const meta = [item.owner, item.date, item.evidence].some(hasContent);\n              return (\n                <li\n                  key={keyOf(item, index)}\n                  {...mergeAttrs<'li'>({ sx: checklistStyles.item }, own)}\n                  data-status={statusOf(item)}\n                >\n                  {status(item, labelId)}\n                  <div {...css.attrs(checklistStyles.body)}>\n                    <span id={labelId} {...css.attrs(labelSx(item))}>\n                      {item.label}\n                    </span>\n                    {hasContent(item.description) && (\n                      <span {...css.attrs(checklistStyles.description)}>{item.description}</span>\n                    )}\n                    {meta && (\n                      <span {...css.attrs(checklistStyles.meta)}>\n                        {hasContent(item.owner) && <span>{item.owner}</span>}\n                        {hasContent(item.date) && (\n                          <span\n                            {...css.attrs(statusOf(item) === 'overdue' && checklistStyles.late)}\n                          >\n                            {item.date}\n                          </span>\n                        )}\n                        {item.evidence}\n                      </span>\n                    )}\n                  </div>\n                  {hasContent(item.action) ? (\n                    <div {...css.attrs(checklistStyles.action)}>{item.action}</div>\n                  ) : (\n                    <span />\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Collapse.js

@@ -1,9 +1,10 @@
 import { t } from "../config/theme/tokens.js";
 import { mergeAttrs } from "../utils/props.js";
 import { afterTransitions } from "../utils/style/transitions.js";
+import { useMounted } from "../utils/dom/mounted.js";
 import { useLazyContent } from "../utils/motion/presence.js";
-import { createVNode, mergeProps, ref, shallowRef } from "vue";
-import { _component, bindable, childrenProp, effect, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, ref, shallowRef } from "vue";
+import { _component, bindable, childrenProp, effect, mergeJsxProps, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/display/Collapse.tsx
 /** 未声明的属性落到外层的 div 上；要分区语义时在外面包 section */
@@ -31,6 +32,8 @@ var Collapse = /*#__PURE__*/ _component((_props, _ctx) => {
 	let root = shallowRef(null);
 	let collapsed = ref(untrack(() => !open.value));
 	const showContent = useLazyContent(() => open.value, () => lazy.value);
+	const mounted = useMounted();
+	const untilFound = () => supportsUntilFound && mounted.value;
 	effect(() => {
 		if (open.value) {
 			collapsed.value = false;
@@ -43,11 +46,11 @@ var Collapse = /*#__PURE__*/ _component((_props, _ctx) => {
 		});
 		return () => cancelled = true;
 	});
-	return () => createVNode("div", mergeProps(mergeAttrs({ sx: collapseStyles.root }, rest, {
+	return () => createVNode("div", mergeJsxProps(mergeAttrs({ sx: collapseStyles.root }, rest, {
 		sx: open.value && collapseStyles.open,
 		ref: root,
-		hidden: collapsed.value && supportsUntilFound ? "until-found" : void 0,
-		inert: collapsed.value && !supportsUntilFound ? true : void 0,
+		hidden: collapsed.value && untilFound() ? "until-found" : void 0,
+		inert: collapsed.value && !untilFound() ? true : void 0,
 		onBeforematch: () => open.value = true
 	}), { "data-state": open.value ? "open" : "closed" }), [createVNode("div", mergeAttrs({ sx: collapseStyles.content }, propsContent.value), [showContent() && children.value])]);
 }, {