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

package/dist/table/SelectionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionBar.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vtp_untrack","_createVNode","_mergeProps"],"sources":["../../src/table/SelectionBar.tsx"],"sourcesContent":["/**\n * 批量操作栏（div）：表格勾选了行之后出现在表格上方，“已选 N 项 · 取消选择”，结束边是批量操作。\n *\n *   <SelectionBar count={selected.length} onClear={() => (selected = [])}>\n *     <Button size=\"sm\" variant=\"outline\" tone=\"neutral\">批量导出</Button>\n *     <Button size=\"sm\" tone=\"danger\" variant=\"soft\">批量删除</Button>\n *   </SelectionBar>\n *\n * count 为 0 时不显示（淡出）；已选的数目在读屏的播报区里，勾选变化时念出来。\n * 部件：Root（div）、Count（span）、Clear（Button）、Actions（div）。数目变化经共用的播报区（announce）念出。\n */\nimport { _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 { Button, type ButtonProps } from '../base/Button';\nimport { useLang } from '../config/context';\nimport { announce } from '../utils/dom/announcer';\nimport { usePresence } from '../utils/motion/presence';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { presenceStyles } from '../utils/style/transitions';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface SelectionBarProps extends PartProps<'div'> {\n  /** 已选几项；0 时不显示 */\n  count: number;\n  /** 点“取消选择”：清空选择由使用方做 */\n  onClear?: () => void;\n  /** 已选数目的文字，默认取语言包（已选 N 项）：跨页全选时写“已选全部 1,286 项” */\n  label?: VNodeChild;\n  /** 已选数目的部件属性 */\n  propsCount?: PartProps<'span'>;\n  /** 取消选择按钮的部件属性 */\n  propsClear?: Partial<ButtonProps>;\n  /** 批量操作区的部件属性 */\n  propsActions?: PartProps<'div'>;\n  /** 批量操作的按钮 */\n  children?: VNodeChild;\n}\n\n/** SelectionBar 的样式：root、count、actions */\nexport const selectionBarStyles = css.create({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '_md',\n    minHeight: '_control',\n    paddingBlock: '_xs',\n    paddingInline: '_md',\n    borderRadius: '_md',\n    backgroundColor: '_accentSoft',\n    color: '_text',\n    fontSize: '_sm',\n  },\n  count: { fontWeight: '_semibold', color: '_accentText', fontVariantNumeric: 'tabular-nums' },\n  actions: {\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '_sm',\n    marginInlineStart: 'auto',\n  },\n});\n\n/** 批量操作栏：已选几项、取消选择、批量操作；没有选择时淡出 */\nexport const SelectionBar = _component(\n  ({\n    count,\n    onClear,\n    label,\n    propsCount,\n    propsClear,\n    propsActions,\n    children,\n    ...rest\n  }: SelectionBarProps) => {\n    const lang = useLang();\n    // 数目变了给读屏播报：栏是随第一次选择一起出现的，挂在它里面的 aria-live 区域第一句念不出来\n    // 给了文字的 label（“已选全部 1,286 项”）就念它\n    watch(\n      () => [count, label] as const,\n      ([next, text]) => announce(typeof text === 'string' ? text : lang.tableSelectedCount(next)),\n    );\n    // 数目变成 0 后等淡出结束再卸载；淡出时仍显示最后的数目，不闪成“已选 0 项”\n    const presence = usePresence(() => count > 0);\n    let shownCount = _untrack(count);\n    return () => {\n      if (count > 0) shownCount = count;\n      return (\n        presence.mounted && (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  selectionBarStyles.root,\n                  presenceStyles.fade,\n                  presence.state === 'closed' && presenceStyles.leaving,\n                ],\n              },\n              rest,\n              { ref: presence.ref },\n            )}\n            data-state={presence.state}\n          >\n            <span {...mergeAttrs<'span'>({ sx: selectionBarStyles.count }, propsCount)}>\n              {label ?? lang.tableSelectedCount(shownCount)}\n            </span>\n            <Button\n              {...mergePartProps<ButtonProps>({ variant: 'link', size: 'sm' }, propsClear, {\n                onClick: () => onClear?.(),\n              })}\n            >\n              {lang.tableClearSelection}\n            </Button>\n            <div {...mergeAttrs<'div'>({ sx: selectionBarStyles.actions }, propsActions)}>\n              {children}\n            </div>\n          </div>\n        )\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;AAwCA,IAAa,qBAAqB,IAAI,OAAO;CAC3C,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,UAAU;EACV,KAAK;EACL,WAAW;EACX,cAAc;EACd,eAAe;EACf,cAAc;EACd,iBAAiB;EACjB,OAAO;EACP,UAAU;CACZ;CACA,OAAO;EAAE,YAAY;EAAa,OAAO;EAAe,oBAAoB;CAAe;CAC3F,SAAS;EACP,SAAS;EACT,YAAY;EACZ,UAAU;EACV,KAAK;EACL,mBAAmB;CACrB;AACF,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SASyB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MADpB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CAGrB,YACQ,CAAA,MAAA,OAAA,MAAA,KAAA,IACL,CAAC,MAAM,UAAU,SAAS,OAAO,SAAS,WAAW,OAAO,KAAK,mBAAmB,IAAI,CAAC,CAC5F;CAEA,MAAM,WAAW,kBAAkB,MAAA,QAAQ,CAAC;CAC5C,IAAI,aAAUC,cAAA,MAAA,KAAA;CACd,aAAa;EACX,IAAI,MAAA,QAAQ,GAAG,aAAU,MAAA;EACzB,OACE,SAAS,WAAOC,YAAA,OAAAC,cAER,WACF,EACE,IAAI;GACF,mBAAmB;GACnB,eAAe;GACf,SAAS,UAAU,YAAY,eAAe;EAAO,EAEzD,GACA,MACA,EAAE,KAAK,SAAS,IAAI,CACtB,GAAC,EAAA,cACW,SAAS,MAAK,CAAA,GAAA;GAAAD,YAAA,QAEhB,WAAmB,EAAE,IAAI,mBAAmB,MAAM,GAAC,WAAA,KAAY,GAAC,CACvE,MAAA,SAAS,KAAK,mBAAmB,UAAU,CAAC,CAAA;GAAAA,YAAA,QAAAC,cAGzC,eAA4B;IAAE,SAAS;IAAQ,MAAM;GAAK,GAAC,WAAA,OAAc,EAC3E,eAAe,QAAA,QAAU,EAC3B,CAAC,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAED,KAAK,mBAAmB;IAAA,SAAA;GAAA,CAAA;GAAAD,YAAA,OAElB,WAAkB,EAAE,IAAI,mBAAmB,QAAQ,GAAC,aAAA,KAAc,GAAC,CAAA,SAAA,KAAA,CAAA;EAAA,CAAA;CAMpF;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"SelectionBar.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vtp_untrack","_createVNode","_mergeProps"],"sources":["../../src/table/SelectionBar.tsx"],"sourcesContent":["/**\n * 批量操作栏（div）：表格勾选了行之后出现在表格上方，“已选 N 项 · 取消选择”，结束边是批量操作。\n *\n *   <SelectionBar count={selected.length} onClear={() => (selected = [])}>\n *     <Button size=\"sm\" variant=\"outline\" tone=\"neutral\">批量导出</Button>\n *     <Button size=\"sm\" tone=\"danger\" variant=\"soft\">批量删除</Button>\n *   </SelectionBar>\n *\n * count 为 0 时不显示（淡出）；已选的数目在读屏的播报区里，勾选变化时念出来。\n * 部件：Root（div）、Count（span）、Clear（Button）、Actions（div）。数目变化经共用的播报区（announce）念出。\n */\nimport { _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 { Button, type ButtonProps } from '../base/Button';\nimport { useLang } from '../config/context';\nimport { announce } from '../utils/dom/announcer';\nimport { usePresence } from '../utils/motion/presence';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { presenceStyles } from '../utils/style/transitions';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface SelectionBarProps extends PartProps<'div'> {\n  /** 已选几项；0 时不显示 */\n  count: number;\n  /** 点“取消选择”：清空选择由使用方做 */\n  onClear?: () => void;\n  /** 已选数目的文字，默认取语言包（已选 N 项）：跨页全选时写“已选全部 1,286 项” */\n  label?: VNodeChild;\n  /** 已选数目的部件属性 */\n  propsCount?: PartProps<'span'>;\n  /** 取消选择按钮的部件属性 */\n  propsClear?: Partial<ButtonProps>;\n  /** 批量操作区的部件属性 */\n  propsActions?: PartProps<'div'>;\n  /** 批量操作的按钮 */\n  children?: VNodeChild;\n}\n\n/** SelectionBar 的样式：root、count、actions */\nexport const selectionBarStyles = css.create({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '_md',\n    minHeight: '_control',\n    paddingBlock: '_xs',\n    paddingInline: '_md',\n    borderRadius: '_md',\n    backgroundColor: '_accentSoft',\n    color: '_text',\n    fontSize: '_sm',\n  },\n  count: { fontWeight: '_semibold', color: '_accentText', fontVariantNumeric: 'tabular-nums' },\n  actions: {\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '_sm',\n    marginInlineStart: 'auto',\n  },\n});\n\n/** 批量操作栏：已选几项、取消选择、批量操作；没有选择时淡出 */\nexport const SelectionBar = _component(\n  ({\n    count,\n    onClear,\n    label,\n    propsCount,\n    propsClear,\n    propsActions,\n    children,\n    ...rest\n  }: SelectionBarProps) => {\n    const lang = useLang();\n    // 数目变了给读屏播报：栏是随第一次选择一起出现的，挂在它里面的 aria-live 区域第一句念不出来\n    // 给了文字的 label（“已选全部 1,286 项”）就念它\n    watch(\n      () => [count, label] as const,\n      ([next, text]) => announce(typeof text === 'string' ? text : lang.tableSelectedCount(next)),\n    );\n    // 数目变成 0 后等淡出结束再卸载；淡出时仍显示最后的数目，不闪成“已选 0 项”\n    const presence = usePresence(() => count > 0);\n    let shownCount = _untrack(count);\n    return () => {\n      if (count > 0) shownCount = count;\n      return (\n        presence.mounted && (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  selectionBarStyles.root,\n                  presenceStyles.fade,\n                  presence.state === 'closed' && presenceStyles.leaving,\n                ],\n              },\n              rest,\n              { ref: presence.ref },\n            )}\n            data-state={presence.state}\n          >\n            <span {...mergeAttrs<'span'>({ sx: selectionBarStyles.count }, propsCount)}>\n              {label ?? lang.tableSelectedCount(shownCount)}\n            </span>\n            <Button\n              {...mergePartProps<ButtonProps>({ variant: 'link', size: 'sm' }, propsClear, {\n                onClick: () => onClear?.(),\n              })}\n            >\n              {lang.tableClearSelection}\n            </Button>\n            <div {...mergeAttrs<'div'>({ sx: selectionBarStyles.actions }, propsActions)}>\n              {children}\n            </div>\n          </div>\n        )\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;AAwCA,IAAa,qBAAqB,IAAI,OAAO;CAC3C,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,UAAU;EACV,KAAK;EACL,WAAW;EACX,cAAc;EACd,eAAe;EACf,cAAc;EACd,iBAAiB;EACjB,OAAO;EACP,UAAU;CACZ;CACA,OAAO;EAAE,YAAY;EAAa,OAAO;EAAe,oBAAoB;CAAe;CAC3F,SAAS;EACP,SAAS;EACT,YAAY;EACZ,UAAU;EACV,KAAK;EACL,mBAAmB;CACrB;AACF,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SASyB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MADpB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CAGrB,YACQ,CAAA,MAAA,OAAA,MAAA,KAAA,IACL,CAAC,MAAM,UAAU,SAAS,OAAO,SAAS,WAAW,OAAO,KAAK,mBAAmB,IAAI,CAAC,CAC5F;CAEA,MAAM,WAAW,kBAAkB,MAAA,QAAQ,CAAC;CAC5C,IAAI,aAAUC,cAAA,MAAA,KAAA;CACd,aAAa;EACX,IAAI,MAAA,QAAQ,GAAG,aAAU,MAAA;EACzB,OACE,SAAS,WAAOC,YAAA,OAAAC,cAER,WACF,EACE,IAAI;GACF,mBAAmB;GACnB,eAAe;GACf,SAAS,UAAU,YAAY,eAAe;EAAO,EAEzD,GACA,MACA,EAAE,KAAK,SAAS,IAAI,CACtB,GAAC,EAAA,cACW,SAAS,MAAK,CAAA,GAAA;GAAAD,YAAA,QAEhB,WAAmB,EAAE,IAAI,mBAAmB,MAAM,GAAC,WAAA,KAAY,GAAC,CACvE,MAAA,SAAS,KAAK,mBAAmB,UAAU,CAAC,CAAA;GAAAA,YAAA,QAAAC,cAGzC,eAA4B;IAAE,SAAS;IAAQ,MAAM;GAAK,GAAC,WAAA,OAAc,EAC3E,eAAe,QAAA,QAAU,EAC3B,CAAC,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAED,KAAK,mBAAmB;IAAA,SAAA;GAAA,CAAA;GAAAD,YAAA,OAElB,WAAkB,EAAE,IAAI,mBAAmB,QAAQ,GAAC,aAAA,KAAc,GAAC,CAAA,SAAA,KAAA,CAAA;EAAA,CAAA;CAMpF;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/table/Table.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 ScrollAreaProps } from '../layout/ScrollArea';
 import { type PartProps } from '../utils/props';

package/dist/table/Table.js

@@ -5,7 +5,7 @@ import { ScrollArea } from "../layout/ScrollArea.js";
 import { dataTableStateStyles } from "./table-styles.js";
 import { createVNode } from "vue";
 import { _component, childrenProp, createContext, 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/table/Table.tsx
 /** Table 交给各单元格与行的外观 */
 /** Table 的上下文：行与单元格据此取外观 */

package/dist/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/table/Table.tsx"],"sourcesContent":["/**\n * 静态表格：原生 table 的各个元素各一个组件，内容直接写在 JSX 里（说明文字里的表格、props 表）。\n * 要排序、勾选、虚拟滚动、列宽调整的数据表格用 DataTable。\n *\n *   <Table aria-label=\"属性\">\n *     <TableHead>\n *       <TableRow><TableHeaderCell>名称</TableHeaderCell><TableHeaderCell>说明</TableHeaderCell></TableRow>\n *     </TableHead>\n *     <TableBody>\n *       <TableRow><TableCell><Code>size</Code></TableCell><TableCell>尺寸档位</TableCell></TableRow>\n *     </TableBody>\n *   </Table>\n *\n * 外观（密度、样式、斑马纹）与 DataTable 相同（配方 tableRecipe，对齐、换行与 DataTable 共用 dataTableStateStyles）；\n * 单元格默认可以换行，列宽按内容分配。\n * 表格比容器宽时在外层横向滚动（ScrollArea：浮层滚动条，不占高度），不撑宽页面。\n */\nimport { createContext, _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 { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  dataTableStateStyles,\n  type DataTableDensities,\n  type DataTableOptions,\n  type DataTableVariants,\n} from './table-styles';\n\n/** Table 交给各单元格与行的外观 */\nexport interface TableState {\n  /** 密度 */\n  readonly density: keyof DataTableDensities;\n  /** 样式 */\n  readonly variant: keyof DataTableVariants;\n  /** 斑马纹 */\n  readonly striped: boolean;\n}\n\n/** Table 的上下文：行与单元格据此取外观 */\nexport const TableContext = createContext<TableState>('Table');\n\n/** 单元格的对齐 */\nexport interface TableAligns {\n  /** 起始边（默认） */\n  start: unknown;\n  /** 居中 */\n  center: unknown;\n  /** 结束边：数字、金额 */\n  end: unknown;\n}\n\n/** 不在 Table 里单独用行与单元格时的外观 */\nconst standalone: TableState = { density: 'standard', variant: 'surface', striped: false };\n\n/** 未声明的属性落到 table 上；aria-label 或 TableCaption 是表格的名称 */\nexport interface TableProps extends PartProps<'table'>, DataTableOptions {\n  /** 外层（横向滚动的 ScrollArea）的部件属性 */\n  propsRoot?: Partial<ScrollAreaProps>;\n  children?: VNodeChild;\n}\n\n/**\n * 静态表格的配方：部件对应原生 table 的各个元素，密度、样式、斑马纹是档位。\n * 表体、表尾里的行标题（th）是 `[s.cell.sx, s.rowHeader.sx]`，表尾的格再叠上 `s.footCell.sx`\n */\nexport const tableRecipe = css.recipe({\n  name: 'Table',\n  parts: [\n    'root',\n    'table',\n    'caption',\n    'head',\n    'body',\n    'foot',\n    'row',\n    'headerCell',\n    'rowHeader',\n    'cell',\n    'footCell',\n  ],\n  base: {\n    // contain: inline-size：宽表格不撑宽外层的 grid / flex 容器，放不下的在这里横向滚动\n    root: { minWidth: 0, contain: 'inline-size' },\n    // 列宽按内容分配：DataTable 为虚拟滚动与列宽拖动用固定布局，静态表格不需要\n    table: {\n      width: '_full',\n      tableLayout: 'auto',\n      borderCollapse: 'separate',\n      borderSpacing: 0,\n      color: '_text',\n      lineHeight: '_normal',\n    },\n    caption: {\n      captionSide: 'top',\n      paddingBlock: '_sm',\n      paddingInline: '_md',\n      color: '_textMuted',\n      fontSize: '_sm',\n      textAlign: 'start',\n    },\n    headerCell: {\n      position: 'relative',\n      boxSizing: 'border-box',\n      paddingInline: '_md',\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_border',\n      backgroundColor: '_fill',\n      color: '_textMuted',\n      fontSize: '_sm',\n      fontWeight: '_semibold',\n      textAlign: 'start',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    },\n    // 表体、表尾里的行标题（scope=row）：和普通单元格一样的底色与字号，只是字重高一点\n    rowHeader: { fontWeight: '_medium', textAlign: 'start' },\n    // 数字等宽：金额、数量、日期上下对齐（文字不受影响）\n    cell: {\n      boxSizing: 'border-box',\n      fontVariantNumeric: 'tabular-nums',\n      paddingInline: '_md',\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_borderMuted',\n      backgroundColor: 'inherit',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      verticalAlign: 'middle',\n    },\n    // 表尾（合计行）：上面一条分隔线，文字加粗，th 与 td 一致\n    footCell: {\n      fontWeight: '_semibold',\n      borderTopWidth: '_xs',\n      borderTopStyle: 'solid',\n      borderTopColor: '_border',\n      borderBottomWidth: 0,\n    },\n  },\n  variants: {\n    // 单元格的上下内边距；紧凑时字号也小一档\n    density: {\n      compact: {\n        table: { fontSize: '_sm' },\n        headerCell: { paddingBlock: '_xs' },\n        cell: { paddingBlock: '_xs' },\n      },\n      standard: { headerCell: { paddingBlock: '_sm' }, cell: { paddingBlock: '_sm' } },\n      comfortable: { headerCell: { paddingBlock: '_md' }, cell: { paddingBlock: '_md' } },\n    },\n    variant: {\n      surface: {\n        root: {\n          borderWidth: '_xs',\n          borderStyle: 'solid',\n          borderColor: '_border',\n          borderRadius: '_lg',\n          backgroundColor: '_surface',\n        },\n        row: { backgroundColor: { default: '_surface', ':hover': '_fillHover' } },\n      },\n      ghost: {\n        root: { backgroundColor: '_background' },\n        row: { backgroundColor: { default: '_background', ':hover': '_fillHover' } },\n      },\n    },\n    striped: {\n      true: { row: { backgroundColor: { default: null, ':nth-child(even)': '_fill' } } },\n    },\n  },\n});\n\n/** 静态表格的部件（createUi / Provider 的 styles.Table 按它定制） */\nexport type TablePart = (typeof tableRecipe.parts)[number];\n\n/** 静态表格的动态样式：列宽 */\nexport const tableDynamicStyles = css.create({\n  width: (width: string) => ({ width }),\n});\n\n/** 单元格所在的区域：表头的 th 是列标题，表体与表尾的 th 是行标题 */\nexport type TableSection = 'head' | 'body' | 'foot';\n\n/** 单元格所在区域的上下文：TableHead、TableBody、TableFoot 提供 */\nexport const TableSectionContext = createContext<TableSection>('TableSection');\n\n/** 表格里的元素按所在 Table 的外观取部件层：在 setup 里调用，渲染时调用返回的函数 */\nfunction useTableParts() {\n  const table = TableContext.inject(standalone);\n  const recipe = useRecipe(tableRecipe);\n  return () => recipe(table);\n}\n\n/** 静态表格（table）：外层可横向滚动；外观经上下文交给行与单元格 */\nexport const Table = _component(\n  ({ density, variant, striped, propsRoot, children, ...rest }: TableProps) => {\n    const appearance = useDefaults('Table', () => ({ density, variant, striped }), {\n      density: 'standard',\n      variant: 'surface',\n      striped: false,\n    });\n    const recipe = useRecipe(tableRecipe);\n    TableContext.provide({\n      get density() {\n        return appearance().density;\n      },\n      get variant() {\n        return appearance().variant;\n      },\n      get striped() {\n        return appearance().striped;\n      },\n    });\n    return () => {\n      const s = recipe(appearance());\n      return (\n        <ScrollArea {...mergePartProps<ScrollAreaProps>({ ...s.root, axis: 'x' }, propsRoot)}>\n          <table {...mergeAttrs<'table'>(s.table, rest)}>{children}</table>\n        </ScrollArea>\n      );\n    };\n  },\n);\n\n/** 表格标题（caption）：同时是表格的名称；不想显示时包进 VisuallyHidden */\nexport const TableCaption = _component(\n  ({ children, ...rest }: PartProps<'caption'> & { children?: VNodeChild }) => {\n    const parts = useTableParts();\n    return () => <caption {...mergeAttrs<'caption'>(parts().caption, rest)}>{children}</caption>;\n  },\n);\n\n/** 表头（thead） */\nexport const TableHead = _component(\n  ({ children, ...rest }: PartProps<'thead'> & { children?: VNodeChild }) => {\n    TableSectionContext.provide('head');\n    const parts = useTableParts();\n    return () => <thead {...mergeAttrs<'thead'>(parts().head, rest)}>{children}</thead>;\n  },\n);\n\n/** 表体（tbody） */\nexport const TableBody = _component(\n  ({ children, ...rest }: PartProps<'tbody'> & { children?: VNodeChild }) => {\n    TableSectionContext.provide('body');\n    const parts = useTableParts();\n    return () => <tbody {...mergeAttrs<'tbody'>(parts().body, rest)}>{children}</tbody>;\n  },\n);\n\n/** 表尾（tfoot）：合计行 */\nexport const TableFoot = _component(\n  ({ children, ...rest }: PartProps<'tfoot'> & { children?: VNodeChild }) => {\n    TableSectionContext.provide('foot');\n    const parts = useTableParts();\n    return () => <tfoot {...mergeAttrs<'tfoot'>(parts().foot, rest)}>{children}</tfoot>;\n  },\n);\n\n/** 行（tr）：底色随表格的样式，斑马纹时隔行浅色底 */\nexport const TableRow = _component(\n  ({ children, ...rest }: PartProps<'tr'> & { children?: VNodeChild }) => {\n    const parts = useTableParts();\n    return () => <tr {...mergeAttrs<'tr'>(parts().row, rest)}>{children}</tr>;\n  },\n);\n\n/** TableHeaderCell、TableCell 共有的属性 */\ninterface TableCellOptions {\n  /** 对齐，默认 start；数字、金额用 end */\n  align?: keyof TableAligns;\n  /** 不换行（超出时省略号）；默认可以换行 */\n  nowrap?: boolean;\n  children?: VNodeChild;\n}\n\n/** 未声明的属性落到 th 上；原生的 align、width 属性已废弃，用同名的 prop */\nexport interface TableHeaderCellProps extends PartProps<'th', 'align' | 'width'>, TableCellOptions {\n  /** 表头单元格对应的方向，默认 col（列标题）；行标题写 row */\n  scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';\n  /** 列宽（CSS 长度，数字按 px）：日期、数字、操作这类按内容定宽的列；不写的列分剩下的 */\n  width?: number | string;\n}\n\n/** 未声明的属性落到 td 上；对齐用 align prop */\nexport interface TableCellProps extends PartProps<'td', 'align'>, TableCellOptions {}\n\n/** 表头单元格（th）：表头里是列标题，表体与表尾里是行标题 */\nexport const TableHeaderCell = _component(\n  ({\n    align = 'start',\n    nowrap = false,\n    scope = 'col',\n    width,\n    children,\n    ...rest\n  }: TableHeaderCellProps) => {\n    const parts = useTableParts();\n    const section = TableSectionContext.inject('head');\n    return () => {\n      const s = parts();\n      return (\n        <th\n          {...mergeAttrs<'th'>(\n            {\n              ...(section === 'head' ? s.headerCell : s.rowHeader),\n              sx: [\n                section === 'head' ? s.headerCell.sx : [s.cell.sx, s.rowHeader.sx],\n                section === 'foot' && s.footCell.sx,\n                dataTableStateStyles[align],\n                !nowrap && dataTableStateStyles.wrap,\n                width != null &&\n                  tableDynamicStyles.width(typeof width === 'number' ? `${width}px` : width),\n              ],\n              scope,\n            },\n            rest,\n          )}\n        >\n          {children}\n        </th>\n      );\n    };\n  },\n);\n\n/** 单元格（td） */\nexport const TableCell = _component(\n  ({ align = 'start', nowrap = false, children, ...rest }: TableCellProps) => {\n    const parts = useTableParts();\n    const section = TableSectionContext.inject('body');\n    return () => {\n      const s = parts();\n      return (\n        <td\n          {...mergeAttrs<'td'>(\n            {\n              ...(section === 'foot' ? s.footCell : s.cell),\n              sx: [\n                s.cell.sx,\n                section === 'foot' && s.footCell.sx,\n                dataTableStateStyles[align],\n                !nowrap && dataTableStateStyles.wrap,\n              ],\n            },\n            rest,\n          )}\n        >\n          {children}\n        </td>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Table.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/table/Table.tsx"],"sourcesContent":["/**\n * 静态表格：原生 table 的各个元素各一个组件，内容直接写在 JSX 里（说明文字里的表格、props 表）。\n * 要排序、勾选、虚拟滚动、列宽调整的数据表格用 DataTable。\n *\n *   <Table aria-label=\"属性\">\n *     <TableHead>\n *       <TableRow><TableHeaderCell>名称</TableHeaderCell><TableHeaderCell>说明</TableHeaderCell></TableRow>\n *     </TableHead>\n *     <TableBody>\n *       <TableRow><TableCell><Code>size</Code></TableCell><TableCell>尺寸档位</TableCell></TableRow>\n *     </TableBody>\n *   </Table>\n *\n * 外观（密度、样式、斑马纹）与 DataTable 相同（配方 tableRecipe，对齐、换行与 DataTable 共用 dataTableStateStyles）；\n * 单元格默认可以换行，列宽按内容分配。\n * 表格比容器宽时在外层横向滚动（ScrollArea：浮层滚动条，不占高度），不撑宽页面。\n */\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  dataTableStateStyles,\n  type DataTableDensities,\n  type DataTableOptions,\n  type DataTableVariants,\n} from './table-styles';\n\n/** Table 交给各单元格与行的外观 */\nexport interface TableState {\n  /** 密度 */\n  readonly density: keyof DataTableDensities;\n  /** 样式 */\n  readonly variant: keyof DataTableVariants;\n  /** 斑马纹 */\n  readonly striped: boolean;\n}\n\n/** Table 的上下文：行与单元格据此取外观 */\nexport const TableContext = createContext<TableState>('Table');\n\n/** 单元格的对齐 */\nexport interface TableAligns {\n  /** 起始边（默认） */\n  start: unknown;\n  /** 居中 */\n  center: unknown;\n  /** 结束边：数字、金额 */\n  end: unknown;\n}\n\n/** 不在 Table 里单独用行与单元格时的外观 */\nconst standalone: TableState = { density: 'standard', variant: 'surface', striped: false };\n\n/** 未声明的属性落到 table 上；aria-label 或 TableCaption 是表格的名称 */\nexport interface TableProps extends PartProps<'table'>, DataTableOptions {\n  /** 外层（横向滚动的 ScrollArea）的部件属性 */\n  propsRoot?: Partial<ScrollAreaProps>;\n  children?: VNodeChild;\n}\n\n/**\n * 静态表格的配方：部件对应原生 table 的各个元素，密度、样式、斑马纹是档位。\n * 表体、表尾里的行标题（th）是 `[s.cell.sx, s.rowHeader.sx]`，表尾的格再叠上 `s.footCell.sx`\n */\nexport const tableRecipe = css.recipe({\n  name: 'Table',\n  parts: [\n    'root',\n    'table',\n    'caption',\n    'head',\n    'body',\n    'foot',\n    'row',\n    'headerCell',\n    'rowHeader',\n    'cell',\n    'footCell',\n  ],\n  base: {\n    // contain: inline-size：宽表格不撑宽外层的 grid / flex 容器，放不下的在这里横向滚动\n    root: { minWidth: 0, contain: 'inline-size' },\n    // 列宽按内容分配：DataTable 为虚拟滚动与列宽拖动用固定布局，静态表格不需要\n    table: {\n      width: '_full',\n      tableLayout: 'auto',\n      borderCollapse: 'separate',\n      borderSpacing: 0,\n      color: '_text',\n      lineHeight: '_normal',\n    },\n    caption: {\n      captionSide: 'top',\n      paddingBlock: '_sm',\n      paddingInline: '_md',\n      color: '_textMuted',\n      fontSize: '_sm',\n      textAlign: 'start',\n    },\n    headerCell: {\n      position: 'relative',\n      boxSizing: 'border-box',\n      paddingInline: '_md',\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_border',\n      backgroundColor: '_fill',\n      color: '_textMuted',\n      fontSize: '_sm',\n      fontWeight: '_semibold',\n      textAlign: 'start',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    },\n    // 表体、表尾里的行标题（scope=row）：和普通单元格一样的底色与字号，只是字重高一点\n    rowHeader: { fontWeight: '_medium', textAlign: 'start' },\n    // 数字等宽：金额、数量、日期上下对齐（文字不受影响）\n    cell: {\n      boxSizing: 'border-box',\n      fontVariantNumeric: 'tabular-nums',\n      paddingInline: '_md',\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_borderMuted',\n      backgroundColor: 'inherit',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      verticalAlign: 'middle',\n    },\n    // 表尾（合计行）：上面一条分隔线，文字加粗，th 与 td 一致\n    footCell: {\n      fontWeight: '_semibold',\n      borderTopWidth: '_xs',\n      borderTopStyle: 'solid',\n      borderTopColor: '_border',\n      borderBottomWidth: 0,\n    },\n  },\n  variants: {\n    // 单元格的上下内边距；紧凑时字号也小一档\n    density: {\n      compact: {\n        table: { fontSize: '_sm' },\n        headerCell: { paddingBlock: '_xs' },\n        cell: { paddingBlock: '_xs' },\n      },\n      standard: { headerCell: { paddingBlock: '_sm' }, cell: { paddingBlock: '_sm' } },\n      comfortable: { headerCell: { paddingBlock: '_md' }, cell: { paddingBlock: '_md' } },\n    },\n    variant: {\n      surface: {\n        root: {\n          borderWidth: '_xs',\n          borderStyle: 'solid',\n          borderColor: '_border',\n          borderRadius: '_lg',\n          backgroundColor: '_surface',\n        },\n        row: { backgroundColor: { default: '_surface', ':hover': '_fillHover' } },\n      },\n      ghost: {\n        root: { backgroundColor: '_background' },\n        row: { backgroundColor: { default: '_background', ':hover': '_fillHover' } },\n      },\n    },\n    striped: {\n      true: { row: { backgroundColor: { default: null, ':nth-child(even)': '_fill' } } },\n    },\n  },\n});\n\n/** 静态表格的部件（createUi / Provider 的 styles.Table 按它定制） */\nexport type TablePart = (typeof tableRecipe.parts)[number];\n\n/** 静态表格的动态样式：列宽 */\nexport const tableDynamicStyles = css.create({\n  width: (width: string) => ({ width }),\n});\n\n/** 单元格所在的区域：表头的 th 是列标题，表体与表尾的 th 是行标题 */\nexport type TableSection = 'head' | 'body' | 'foot';\n\n/** 单元格所在区域的上下文：TableHead、TableBody、TableFoot 提供 */\nexport const TableSectionContext = createContext<TableSection>('TableSection');\n\n/** 表格里的元素按所在 Table 的外观取部件层：在 setup 里调用，渲染时调用返回的函数 */\nfunction useTableParts() {\n  const table = TableContext.inject(standalone);\n  const recipe = useRecipe(tableRecipe);\n  return () => recipe(table);\n}\n\n/** 静态表格（table）：外层可横向滚动；外观经上下文交给行与单元格 */\nexport const Table = _component(\n  ({ density, variant, striped, propsRoot, children, ...rest }: TableProps) => {\n    const appearance = useDefaults('Table', () => ({ density, variant, striped }), {\n      density: 'standard',\n      variant: 'surface',\n      striped: false,\n    });\n    const recipe = useRecipe(tableRecipe);\n    TableContext.provide({\n      get density() {\n        return appearance().density;\n      },\n      get variant() {\n        return appearance().variant;\n      },\n      get striped() {\n        return appearance().striped;\n      },\n    });\n    return () => {\n      const s = recipe(appearance());\n      return (\n        <ScrollArea {...mergePartProps<ScrollAreaProps>({ ...s.root, axis: 'x' }, propsRoot)}>\n          <table {...mergeAttrs<'table'>(s.table, rest)}>{children}</table>\n        </ScrollArea>\n      );\n    };\n  },\n);\n\n/** 表格标题（caption）：同时是表格的名称；不想显示时包进 VisuallyHidden */\nexport const TableCaption = _component(\n  ({ children, ...rest }: PartProps<'caption'> & { children?: VNodeChild }) => {\n    const parts = useTableParts();\n    return () => <caption {...mergeAttrs<'caption'>(parts().caption, rest)}>{children}</caption>;\n  },\n);\n\n/** 表头（thead） */\nexport const TableHead = _component(\n  ({ children, ...rest }: PartProps<'thead'> & { children?: VNodeChild }) => {\n    TableSectionContext.provide('head');\n    const parts = useTableParts();\n    return () => <thead {...mergeAttrs<'thead'>(parts().head, rest)}>{children}</thead>;\n  },\n);\n\n/** 表体（tbody） */\nexport const TableBody = _component(\n  ({ children, ...rest }: PartProps<'tbody'> & { children?: VNodeChild }) => {\n    TableSectionContext.provide('body');\n    const parts = useTableParts();\n    return () => <tbody {...mergeAttrs<'tbody'>(parts().body, rest)}>{children}</tbody>;\n  },\n);\n\n/** 表尾（tfoot）：合计行 */\nexport const TableFoot = _component(\n  ({ children, ...rest }: PartProps<'tfoot'> & { children?: VNodeChild }) => {\n    TableSectionContext.provide('foot');\n    const parts = useTableParts();\n    return () => <tfoot {...mergeAttrs<'tfoot'>(parts().foot, rest)}>{children}</tfoot>;\n  },\n);\n\n/** 行（tr）：底色随表格的样式，斑马纹时隔行浅色底 */\nexport const TableRow = _component(\n  ({ children, ...rest }: PartProps<'tr'> & { children?: VNodeChild }) => {\n    const parts = useTableParts();\n    return () => <tr {...mergeAttrs<'tr'>(parts().row, rest)}>{children}</tr>;\n  },\n);\n\n/** TableHeaderCell、TableCell 共有的属性 */\ninterface TableCellOptions {\n  /** 对齐，默认 start；数字、金额用 end */\n  align?: keyof TableAligns;\n  /** 不换行（超出时省略号）；默认可以换行 */\n  nowrap?: boolean;\n  children?: VNodeChild;\n}\n\n/** 未声明的属性落到 th 上；原生的 align、width 属性已废弃，用同名的 prop */\nexport interface TableHeaderCellProps extends PartProps<'th', 'align' | 'width'>, TableCellOptions {\n  /** 表头单元格对应的方向，默认 col（列标题）；行标题写 row */\n  scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';\n  /** 列宽（CSS 长度，数字按 px）：日期、数字、操作这类按内容定宽的列；不写的列分剩下的 */\n  width?: number | string;\n}\n\n/** 未声明的属性落到 td 上；对齐用 align prop */\nexport interface TableCellProps extends PartProps<'td', 'align'>, TableCellOptions {}\n\n/** 表头单元格（th）：表头里是列标题，表体与表尾里是行标题 */\nexport const TableHeaderCell = _component(\n  ({\n    align = 'start',\n    nowrap = false,\n    scope = 'col',\n    width,\n    children,\n    ...rest\n  }: TableHeaderCellProps) => {\n    const parts = useTableParts();\n    const section = TableSectionContext.inject('head');\n    return () => {\n      const s = parts();\n      return (\n        <th\n          {...mergeAttrs<'th'>(\n            {\n              ...(section === 'head' ? s.headerCell : s.rowHeader),\n              sx: [\n                section === 'head' ? s.headerCell.sx : [s.cell.sx, s.rowHeader.sx],\n                section === 'foot' && s.footCell.sx,\n                dataTableStateStyles[align],\n                !nowrap && dataTableStateStyles.wrap,\n                width != null &&\n                  tableDynamicStyles.width(typeof width === 'number' ? `${width}px` : width),\n              ],\n              scope,\n            },\n            rest,\n          )}\n        >\n          {children}\n        </th>\n      );\n    };\n  },\n);\n\n/** 单元格（td） */\nexport const TableCell = _component(\n  ({ align = 'start', nowrap = false, children, ...rest }: TableCellProps) => {\n    const parts = useTableParts();\n    const section = TableSectionContext.inject('body');\n    return () => {\n      const s = parts();\n      return (\n        <td\n          {...mergeAttrs<'td'>(\n            {\n              ...(section === 'foot' ? s.footCell : s.cell),\n              sx: [\n                s.cell.sx,\n                section === 'foot' && s.footCell.sx,\n                dataTableStateStyles[align],\n                !nowrap && dataTableStateStyles.wrap,\n              ],\n            },\n            rest,\n          )}\n        >\n          {children}\n        </td>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/table/TreeDataTable.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 IconButtonProps } from '../base/IconButton';
 import { type DataTableProps } from './DataTable';
 /** 未声明的属性落到 table 上；aria-label 或 aria-labelledby 是表格的名称 */

package/dist/table/TreeDataTable.js

@@ -7,7 +7,7 @@ import { checkStates, flattenTree, indexTree, toggleChecked, useTreeExpansion }
 import { DataTable } from "./DataTable.js";
 import { Fragment, computed, createVNode } from "vue";
 import { _component, bindable, 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";
 import { ChevronRight } from "@lucide/icons";
 //#region src/table/TreeDataTable.tsx
 /**

package/dist/table/TreeDataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeDataTable.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vtp_untrack","_vue_computed","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/table/TreeDataTable.tsx"],"sourcesContent":["/**\n * 树形表格：有层级的行（部门 → 小组 → 成员、文件夹 → 文件），第一列带缩进与展开按钮。\n * 建在 DataTable 上：列定义、排序、勾选、列宽、虚拟滚动、加载与空状态、外观都和 DataTable 一样；\n * 这里只做两件事：按展开状态把树展开成一列行（同级之间按 sort 排序），以及第一列前面的缩进与展开按钮。\n *\n *   <TreeDataTable\n *     rows={departments}\n *     columns={columns}\n *     getKey={(row) => row.id}\n *     getChildren={(row) => row.children}\n *     _expanded={open}\n *     aria-label=\"组织架构\"\n *   />\n *\n * - 懒加载：hasChildren 说有子项、getChildren 还没有时，展开会调用 loadChildren（加载中按钮显示加载指示），\n *   调用方把取到的子项放进数据里。\n * - 展开按钮的名称是“行名 的子项”（第一列的文字），展开与否由 aria-expanded 表示。\n *   表格仍是 table 语义（不是 treegrid：那要求逐个单元格的方向键导航），层级由缩进与按钮表达。\n *\n * 部件：DataTable 的全部部件，加上 Toggle（展开按钮，IconButton）。\n */\nimport { ChevronRight } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { IconProps } from '../base/Icon';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang } from '../config/context';\nimport {\n  checkStates,\n  flattenTree,\n  indexTree,\n  toggleChecked,\n  useTreeExpansion,\n  type TreeAccessors,\n} from '../utils/data/tree';\nimport { mergePartProps, mergeProps } from '../utils/props';\nimport { columnValue, sortRows, type SortState } from './columns';\nimport { DataTable, type DataTableProps } from './DataTable';\nimport type { DataTableRowModel } from './DataTableView';\nimport { disclosureStyles } from '../utils/style/transitions';\n\n/** 未声明的属性落到 table 上；aria-label 或 aria-labelledby 是表格的名称 */\nexport interface TreeDataTableProps<T> extends Omit<DataTableProps<T>, 'leading'> {\n  /** 第一层的行 */\n  rows: readonly T[];\n  /** 一行的子项；没有子项（叶子）或还没加载时返回 undefined / 空数组 */\n  getChildren: (row: T) => readonly T[] | undefined;\n  /** 这一行有没有子项（懒加载时子项还没取回来也要显示展开按钮）；不写时看 getChildren 是否非空 */\n  hasChildren?: (row: T) => boolean;\n  /** 展开一个还没有子项的行时调用：取回子项并放进数据里；返回 Promise 时按钮显示加载中 */\n  loadChildren?: (row: T) => Promise<unknown> | void;\n  /** 子项加载失败（loadChildren 的 Promise 被拒绝）：这一行收回去，再展开会重试；不写时在控制台报错 */\n  onLoadError?: (error: unknown, row: T) => void;\n  /** 展开的行的 key：父级写 _expanded={keys} */\n  _expanded?: string[];\n  /** 每一层缩进多少（em），默认 1.25 */\n  indent?: number;\n  /** 多选时勾选父子不联动：每一行各自勾选；默认联动（勾上父行连带子孙，子行全勾上时父行也勾上，只勾一部分时父行半选） */\n  checkStrictly?: boolean;\n  /** 展开按钮的部件属性；加载中、展开状态与点击由组件管理 */\n  propsToggle?: Omit<Partial<IconButtonProps>, 'loading' | 'aria-expanded' | 'onClick'>;\n}\n\n/** TreeDataTable 的样式：toggle、chevronOpen、placeholder */\nexport const treeDataTableStyles = css.create({\n  toggle: { flexShrink: 0, width: '1.5em', minHeight: '1.5em' },\n  chevronOpen: { rotate: '90deg' },\n  // 叶子没有按钮，用同样宽的占位让文字对齐\n  placeholder: { flexShrink: 0, width: '1.5em' },\n});\n\n// 缩进是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** TreeDataTable 的样式：depth */\nexport const treeDataTableIndentStyles = css.create({\n  depth: (em: number) => ({ width: `${em}em`, flexShrink: 0 }),\n});\n\n/** 树形表格：按展开状态展开的层级行，复用 DataTable 的一切 */\nexport const TreeDataTable = _component(\n  <T,>({\n    rows,\n    columns,\n    getKey,\n    getChildren,\n    hasChildren,\n    loadChildren,\n    onLoadError,\n    _expanded: expanded = _bindable<string[]>([]),\n    indent = 1.25,\n    checkStrictly = false,\n    propsToggle,\n    _sort: sort = _bindable<SortState | null>(null),\n    manualSort = false,\n    _selected: selected = _bindable<string[]>([]),\n    _columnWidths: columnWidths = _bindable<Record<string, number>>({}),\n    ...rest\n  }: TreeDataTableProps<T>) => {\n    const lang = useLang();\n    const accessors = (): TreeAccessors<T> => ({ getKey, getChildren, hasChildren });\n    const expansion = useTreeExpansion<T>({\n      expanded: () => expanded,\n      setExpanded: (keys) => (expanded = keys),\n      getChildren: (row) => getChildren(row),\n      loadChildren: (row) => loadChildren?.(row),\n      // 没给 onLoadError 时交给 useTreeExpansion 在控制台报错\n      onLoadError: _untrack(onLoadError) && ((error, row) => onLoadError?.(error, row)),\n    });\n\n    /** 按展开状态深度优先展开成一列；同级之间按当前排序（manualSort 时按数据里的顺序） */\n    const flat = _derived.by(() =>\n      flattenTree(rows, accessors(), new Set(expanded), {\n        order: (level) => (manualSort ? level : sortRows(level, columns, sort, lang.code)),\n      }),\n    );\n\n    // 多选联动：整棵树的索引（含折叠着的行），勾选状态按它推出；交给 DataTable 的是实际勾上的行与半选的父行\n    const index = _derived.by(() =>\n      rest.selectionMode === 'multiple' && !checkStrictly ? indexTree(rows, accessors()) : null,\n    );\n    const states = _derived.by(() => (index ? checkStates(index, selected) : null));\n    const checkedKeys = _derived.by(() =>\n      states ? [...states].flatMap(([key, state]) => (state === 'checked' ? [key] : [])) : selected,\n    );\n    const partialKeys = _derived.by(() =>\n      states\n        ? [...states].flatMap(([key, state]) => (state === 'indeterminate' ? [key] : []))\n        : undefined,\n    );\n\n    /** DataTable 写回的勾选：只变了一行时按它联动子孙与祖先；全选、取消全选原样写回 */\n    function writeSelected(next: string[]) {\n      if (!index) {\n        selected = next;\n        return;\n      }\n      const before = new Set(checkedKeys);\n      const after = new Set(next);\n      const changed = [\n        ...next.filter((key) => !before.has(key)),\n        ...checkedKeys.filter((key) => !after.has(key)),\n      ];\n      selected = changed.length === 1 ? toggleChecked(index, checkedKeys, changed[0]!) : next;\n    }\n    const byKey = _derived.by(() => new Map(flat.map((item) => [item.key, item])));\n    // 交给 DataTable 的行与取 key 的函数要保持同一个引用：每次渲染都新建的话，DataTable 会重排全部行\n    const nodes = _derived(flat.map((item) => item.node));\n    const keyOf = (_: T, index: number) => flat[index]!.key;\n\n    function leading(model: DataTableRowModel<T>) {\n      const item = byKey.get(model.key);\n      const depth = item?.depth ?? 0;\n      const first = columns[0] ? columnValue(columns[0], model.data) : undefined;\n      const label = first != null ? String(first) : model.key;\n      const open = expansion.isExpanded(model.key);\n      return (\n        <>\n          {depth > 0 && <span {...css.attrs(treeDataTableIndentStyles.depth(depth * indent))} />}\n          {item?.expandable ? (\n            <IconButton\n              {...mergePartProps<IconButtonProps>(\n                {\n                  icon: ChevronRight,\n                  size: 'sm',\n                  radius: 'full',\n                  'aria-label': lang.treeToggle(label),\n                  sx: treeDataTableStyles.toggle,\n                },\n                propsToggle,\n                {\n                  loading: expansion.isLoading(model.key),\n                  'aria-expanded': open,\n                  // 箭头的转向跟着展开状态：使用方的 propsIcon 合并进来，而不是整个替换掉\n                  propsIcon: mergeProps<IconProps>(\n                    { flipInRtl: true, sx: disclosureStyles.icon },\n                    propsToggle?.propsIcon,\n                    open ? { sx: treeDataTableStyles.chevronOpen } : undefined,\n                  ),\n                  onClick: () => void expansion.setOpen(model.data, model.key, !open),\n                },\n              )}\n            />\n          ) : (\n            <span {...css.attrs(treeDataTableStyles.placeholder)} />\n          )}\n        </>\n      );\n    }\n\n    return () => (\n      <DataTable\n        {...rest}\n        rows={nodes}\n        getKey={keyOf}\n        columns={columns}\n        manualSort\n        _sort={sort}\n        _selected={checkedKeys as string[]}\n        onUpdate:_selected={writeSelected}\n        partialKeys={partialKeys}\n        _columnWidths={columnWidths}\n        leading={leading}\n      />\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"TreeDataTable.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vtp_untrack","_vue_computed","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/table/TreeDataTable.tsx"],"sourcesContent":["/**\n * 树形表格：有层级的行（部门 → 小组 → 成员、文件夹 → 文件），第一列带缩进与展开按钮。\n * 建在 DataTable 上：列定义、排序、勾选、列宽、虚拟滚动、加载与空状态、外观都和 DataTable 一样；\n * 这里只做两件事：按展开状态把树展开成一列行（同级之间按 sort 排序），以及第一列前面的缩进与展开按钮。\n *\n *   <TreeDataTable\n *     rows={departments}\n *     columns={columns}\n *     getKey={(row) => row.id}\n *     getChildren={(row) => row.children}\n *     _expanded={open}\n *     aria-label=\"组织架构\"\n *   />\n *\n * - 懒加载：hasChildren 说有子项、getChildren 还没有时，展开会调用 loadChildren（加载中按钮显示加载指示），\n *   调用方把取到的子项放进数据里。\n * - 展开按钮的名称是“行名 的子项”（第一列的文字），展开与否由 aria-expanded 表示。\n *   表格仍是 table 语义（不是 treegrid：那要求逐个单元格的方向键导航），层级由缩进与按钮表达。\n *\n * 部件：DataTable 的全部部件，加上 Toggle（展开按钮，IconButton）。\n */\nimport { ChevronRight } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { IconProps } from '../base/Icon';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang } from '../config/context';\nimport {\n  checkStates,\n  flattenTree,\n  indexTree,\n  toggleChecked,\n  useTreeExpansion,\n  type TreeAccessors,\n} from '../utils/data/tree';\nimport { mergePartProps, mergeProps } from '../utils/props';\nimport { columnValue, sortRows, type SortState } from './columns';\nimport { DataTable, type DataTableProps } from './DataTable';\nimport type { DataTableRowModel } from './DataTableView';\nimport { disclosureStyles } from '../utils/style/transitions';\n\n/** 未声明的属性落到 table 上；aria-label 或 aria-labelledby 是表格的名称 */\nexport interface TreeDataTableProps<T> extends Omit<DataTableProps<T>, 'leading'> {\n  /** 第一层的行 */\n  rows: readonly T[];\n  /** 一行的子项；没有子项（叶子）或还没加载时返回 undefined / 空数组 */\n  getChildren: (row: T) => readonly T[] | undefined;\n  /** 这一行有没有子项（懒加载时子项还没取回来也要显示展开按钮）；不写时看 getChildren 是否非空 */\n  hasChildren?: (row: T) => boolean;\n  /** 展开一个还没有子项的行时调用：取回子项并放进数据里；返回 Promise 时按钮显示加载中 */\n  loadChildren?: (row: T) => Promise<unknown> | void;\n  /** 子项加载失败（loadChildren 的 Promise 被拒绝）：这一行收回去，再展开会重试；不写时在控制台报错 */\n  onLoadError?: (error: unknown, row: T) => void;\n  /** 展开的行的 key：父级写 _expanded={keys} */\n  _expanded?: string[];\n  /** 每一层缩进多少（em），默认 1.25 */\n  indent?: number;\n  /** 多选时勾选父子不联动：每一行各自勾选；默认联动（勾上父行连带子孙，子行全勾上时父行也勾上，只勾一部分时父行半选） */\n  checkStrictly?: boolean;\n  /** 展开按钮的部件属性；加载中、展开状态与点击由组件管理 */\n  propsToggle?: Omit<Partial<IconButtonProps>, 'loading' | 'aria-expanded' | 'onClick'>;\n}\n\n/** TreeDataTable 的样式：toggle、chevronOpen、placeholder */\nexport const treeDataTableStyles = css.create({\n  toggle: { flexShrink: 0, width: '1.5em', minHeight: '1.5em' },\n  chevronOpen: { rotate: '90deg' },\n  // 叶子没有按钮，用同样宽的占位让文字对齐\n  placeholder: { flexShrink: 0, width: '1.5em' },\n});\n\n// 缩进是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** TreeDataTable 的样式：depth */\nexport const treeDataTableIndentStyles = css.create({\n  depth: (em: number) => ({ width: `${em}em`, flexShrink: 0 }),\n});\n\n/** 树形表格：按展开状态展开的层级行，复用 DataTable 的一切 */\nexport const TreeDataTable = _component(\n  <T,>({\n    rows,\n    columns,\n    getKey,\n    getChildren,\n    hasChildren,\n    loadChildren,\n    onLoadError,\n    _expanded: expanded = _bindable<string[]>([]),\n    indent = 1.25,\n    checkStrictly = false,\n    propsToggle,\n    _sort: sort = _bindable<SortState | null>(null),\n    manualSort = false,\n    _selected: selected = _bindable<string[]>([]),\n    _columnWidths: columnWidths = _bindable<Record<string, number>>({}),\n    ...rest\n  }: TreeDataTableProps<T>) => {\n    const lang = useLang();\n    const accessors = (): TreeAccessors<T> => ({ getKey, getChildren, hasChildren });\n    const expansion = useTreeExpansion<T>({\n      expanded: () => expanded,\n      setExpanded: (keys) => (expanded = keys),\n      getChildren: (row) => getChildren(row),\n      loadChildren: (row) => loadChildren?.(row),\n      // 没给 onLoadError 时交给 useTreeExpansion 在控制台报错\n      onLoadError: _untrack(onLoadError) && ((error, row) => onLoadError?.(error, row)),\n    });\n\n    /** 按展开状态深度优先展开成一列；同级之间按当前排序（manualSort 时按数据里的顺序） */\n    const flat = _derived.by(() =>\n      flattenTree(rows, accessors(), new Set(expanded), {\n        order: (level) => (manualSort ? level : sortRows(level, columns, sort, lang.code)),\n      }),\n    );\n\n    // 多选联动：整棵树的索引（含折叠着的行），勾选状态按它推出；交给 DataTable 的是实际勾上的行与半选的父行\n    const index = _derived.by(() =>\n      rest.selectionMode === 'multiple' && !checkStrictly ? indexTree(rows, accessors()) : null,\n    );\n    const states = _derived.by(() => (index ? checkStates(index, selected) : null));\n    const checkedKeys = _derived.by(() =>\n      states ? [...states].flatMap(([key, state]) => (state === 'checked' ? [key] : [])) : selected,\n    );\n    const partialKeys = _derived.by(() =>\n      states\n        ? [...states].flatMap(([key, state]) => (state === 'indeterminate' ? [key] : []))\n        : undefined,\n    );\n\n    /** DataTable 写回的勾选：只变了一行时按它联动子孙与祖先；全选、取消全选原样写回 */\n    function writeSelected(next: string[]) {\n      if (!index) {\n        selected = next;\n        return;\n      }\n      const before = new Set(checkedKeys);\n      const after = new Set(next);\n      const changed = [\n        ...next.filter((key) => !before.has(key)),\n        ...checkedKeys.filter((key) => !after.has(key)),\n      ];\n      selected = changed.length === 1 ? toggleChecked(index, checkedKeys, changed[0]!) : next;\n    }\n    const byKey = _derived.by(() => new Map(flat.map((item) => [item.key, item])));\n    // 交给 DataTable 的行与取 key 的函数要保持同一个引用：每次渲染都新建的话，DataTable 会重排全部行\n    const nodes = _derived(flat.map((item) => item.node));\n    const keyOf = (_: T, index: number) => flat[index]!.key;\n\n    function leading(model: DataTableRowModel<T>) {\n      const item = byKey.get(model.key);\n      const depth = item?.depth ?? 0;\n      const first = columns[0] ? columnValue(columns[0], model.data) : undefined;\n      const label = first != null ? String(first) : model.key;\n      const open = expansion.isExpanded(model.key);\n      return (\n        <>\n          {depth > 0 && <span {...css.attrs(treeDataTableIndentStyles.depth(depth * indent))} />}\n          {item?.expandable ? (\n            <IconButton\n              {...mergePartProps<IconButtonProps>(\n                {\n                  icon: ChevronRight,\n                  size: 'sm',\n                  radius: 'full',\n                  'aria-label': lang.treeToggle(label),\n                  sx: treeDataTableStyles.toggle,\n                },\n                propsToggle,\n                {\n                  loading: expansion.isLoading(model.key),\n                  'aria-expanded': open,\n                  // 箭头的转向跟着展开状态：使用方的 propsIcon 合并进来，而不是整个替换掉\n                  propsIcon: mergeProps<IconProps>(\n                    { flipInRtl: true, sx: disclosureStyles.icon },\n                    propsToggle?.propsIcon,\n                    open ? { sx: treeDataTableStyles.chevronOpen } : undefined,\n                  ),\n                  onClick: () => void expansion.setOpen(model.data, model.key, !open),\n                },\n              )}\n            />\n          ) : (\n            <span {...css.attrs(treeDataTableStyles.placeholder)} />\n          )}\n        </>\n      );\n    }\n\n    return () => (\n      <DataTable\n        {...rest}\n        rows={nodes}\n        getKey={keyOf}\n        columns={columns}\n        manualSort\n        _sort={sort}\n        _selected={checkedKeys as string[]}\n        onUpdate:_selected={writeSelected}\n        partialKeys={partialKeys}\n        _columnWidths={columnWidths}\n        leading={leading}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAa,sBAAsB,IAAI,OAAO;CAC5C,QAAQ;EAAE,YAAY;EAAG,OAAO;EAAS,WAAW;CAAQ;CAC5D,aAAa,EAAE,QAAQ,QAAQ;CAE/B,aAAa;EAAE,YAAY;EAAG,OAAO;CAAQ;AAC/C,CAAC;;AAID,IAAa,4BAA4B,IAAI,OAAO,EAClD,QAAQ,QAAgB;CAAE,OAAO,GAAG,GAAE;CAAM,YAAY;AAAE,GAC5D,CAAC;;AAGD,IAAa,gBAAgB,0BAC3B,QAAA,SAiB6B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAC,SAAA,QAAA,mBATe,CAAA,GAAE,KAAA,IAAA;CAAA,MAAA,SAAAD,aAAA,QAAA,UACnC,IAAI;CAAA,MAAA,gBAAAA,aAAA,QAAA,iBACG,KAAK;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,OAAAC,SAAA,QAAA,eAEqB,MAAI,KAAA,IAAA;CAAA,MAAA,aAAAD,aAAA,QAAA,cACjC,KAAK;CAAA,MAAA,WAAAC,SAAA,QAAA,mBACwB,CAAA,GAAE,KAAA,IAAA;CAAA,MAAA,eAAAA,SAAA,QAAA,wBACoB,CAAC,IAAC,KAAA,IAAA;CAAA,MAC/D,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,mBAAqC;EAAE,QAAM,OAAA;EAAE,aAAW,YAAA;EAAE,aAAW,YAAA;CAAC;CAC9E,MAAM,YAAY,iBAAoB;EACpC,gBAAU,SAAA;EACV,cAAc,SAAU,SAAA,QAAW;EACnC,cAAc,QAAQ,YAAA,MAAY,GAAG;EACrC,eAAe,QAAQ,aAAA,QAAe,GAAG;EAEzC,aAAaC,cAAA,YAAA,KAAA,OAA2B,OAAO,QAAQ,YAAA,QAAc,OAAO,GAAG;CACjF,CAAC;;CAGD,MAAM,OAAIC,eACR,YAAW,KAAA,OAAO,UAAU,GAAG,IAAI,IAAG,SAAA,KAAS,GAAG,EAChD,QAAQ,UAAW,WAAA,QAAa,QAAQ,SAAS,OAAK,QAAA,OAAA,KAAA,OAAiB,KAAK,IAAI,EAClF,CAAC,CAAC;CAIJ,MAAM,QAAKA,eACT,KAAK,kBAAkB,cAAc,CAAA,cAAA,QAAiB,UAAS,KAAA,OAAO,UAAU,CAAC,IAAI,IAAI;CAE3F,MAAM,SAAMA,eAAsB,MAAA,QAAQ,YAAW,MAAA,OAAA,SAAA,KAAgB,IAAI,IAAK;CAC9E,MAAM,cAAWA,eACf,OAAA,QAAS,CAAC,GAAA,OAAA,KAAS,CAAC,CAAC,SAAS,CAAC,KAAK,WAAY,UAAU,YAAY,CAAC,GAAG,IAAI,CAAA,CAAG,IAAC,SAAA,KAAW;CAE/F,MAAM,cAAWA,eACf,OAAA,QACI,CAAC,GAAA,OAAA,KAAS,CAAC,CAAC,SAAS,CAAC,KAAK,WAAY,UAAU,kBAAkB,CAAC,GAAG,IAAI,CAAA,CAAG,IAC9E,KAAA,CAAS;;CAIf,SAAS,cAAc,MAAgB;EACrC,IAAI,CAAA,MAAA,OAAQ;GACV,SAAA,QAAW;GACX;EACF;EACA,MAAM,SAAS,IAAI,IAAG,YAAA,KAAY;EAClC,MAAM,QAAQ,IAAI,IAAI,IAAI;EAC1B,MAAM,UAAU,CACd,GAAG,KAAK,QAAQ,QAAQ,CAAC,OAAO,IAAI,GAAG,CAAC,GACxC,GAAG,YAAA,MAAY,QAAQ,QAAQ,CAAC,MAAM,IAAI,GAAG,CAAC,CAAC;EAEjD,SAAA,QAAW,QAAQ,WAAW,IAAI,cAAa,MAAA,OAAA,YAAA,OAAqB,QAAQ,EAAG,IAAI;CACrF;CACA,MAAM,QAAKA,eAAqB,IAAI,IAAI,KAAA,MAAK,KAAK,SAAS,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC;CAE7E,MAAM,QAAKA,eAAY,KAAA,MAAK,KAAK,SAAS,KAAK,IAAI,CAAC;CACpD,MAAM,SAAS,GAAM,UAAkB,KAAA,MAAK,MAAM,CAAE;CAEpD,SAAS,QAAQ,OAA6B;EAC5C,MAAM,OAAO,MAAA,MAAM,IAAI,MAAM,GAAG;EAChC,MAAM,QAAQ,MAAM,SAAS;EAC7B,MAAM,QAAQ,QAAA,MAAQ,KAAK,YAAY,QAAA,MAAQ,IAAI,MAAM,IAAI,IAAI,KAAA;EACjE,MAAM,QAAQ,SAAS,OAAO,OAAO,KAAK,IAAI,MAAM;EACpD,MAAM,OAAO,UAAU,WAAW,MAAM,GAAG;EAC3C,OAAAC,YAAAC,UAAA,MAAA,CAEK,QAAQ,KAACD,YAAA,QAAc,IAAI,MAAM,0BAA0B,MAAM,QAAK,OAAA,KAAS,CAAC,GAAC,IAAA,GACjF,MAAM,aAAUA,YAAA,YAET,eACF;GACE,MAAM;GACN,MAAM;GACN,QAAQ;GACR,cAAc,KAAK,WAAW,KAAK;GACnC,IAAI,oBAAoB;EAC1B,GAAC,YAAA,OAED;GACE,SAAS,UAAU,UAAU,MAAM,GAAG;GACtC,iBAAiB;GAEjB,WAAW,WACT;IAAE,WAAW;IAAM,IAAI,iBAAiB;GAAK,GAC7C,YAAA,OAAa,WACb,OAAO,EAAE,IAAI,oBAAoB,YAAY,IAAI,KAAA,CACnD;GACA,eAAe,KAAK,UAAU,QAAQ,MAAM,MAAM,MAAM,KAAK,CAAC,IAAI;EACpE,CACF,GAAC,IAAA,IAAAA,YAAA,QAGO,IAAI,MAAM,oBAAoB,WAAW,GAAC,IAAA,CACrD,CAAA;CAGP;CAEA,aAAOA,YAAA,WAAAE,cAEC,MAAI;EAAA,QAAA,MAAA;EAAA,UAEA;EAAK,WAAA,QAAA;EAAA,cAAA;EAAA,SAAA,KAAA;EAAA,kBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,KAAA,QAAA;EAAA,aAAA,YAAA;EAAA,sBAKO;EAAa,eAAA,YAAA;EAAA,iBAAA,aAAA;EAAA,0BAAA,OAAA,OAAA,OAAA,MAAA,WAAA,aAAA,QAAA;EAAA,WAGxB;CAAO,CAAA,GAAA,IAAA;AAGtB,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/table/table-styles.d.ts

@@ -3,7 +3,7 @@
  * 以及 DataTable、TreeDataTable 的配方（静态表格的配方在 Table.tsx）。
  * 单独一个模块：只用静态表格时不连带打包 DataTable 的视图（虚拟滚动、勾选、排序……）。
  */
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 /** 表格的密度（行高与字号） */
 export interface DataTableDensities {
     /** 紧凑：数据很多、要一屏看更多行（字号也小一档） */

package/dist/table/table-styles.js

@@ -1,5 +1,5 @@
 import { t } from "../config/theme/tokens.js";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/table/table-styles.ts
 /**
 * 表格的外观：静态 Table 与 DataTable、TreeDataTable 共用的选项（密度、样式、斑马纹）与按列、按状态叠加的样式，

package/dist/table/table-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-styles.js","names":[],"sources":["../../src/table/table-styles.ts"],"sourcesContent":["/**\n * 表格的外观：静态 Table 与 DataTable、TreeDataTable 共用的选项（密度、样式、斑马纹）与按列、按状态叠加的样式，\n * 以及 DataTable、TreeDataTable 的配方（静态表格的配方在 Table.tsx）。\n * 单独一个模块：只用静态表格时不连带打包 DataTable 的视图（虚拟滚动、勾选、排序……）。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 表格的密度（行高与字号） */\nexport interface DataTableDensities {\n  /** 紧凑：数据很多、要一屏看更多行（字号也小一档） */\n  compact: unknown;\n  /** 标准（默认） */\n  standard: unknown;\n  /** 宽松：行里有头像、两行文字 */\n  comfortable: unknown;\n}\n\n/** 表格的样式 */\nexport interface DataTableVariants {\n  /** 表面色、外框与圆角（默认） */\n  surface: unknown;\n  /** 没有外框，底色同页面：放在卡片、对话框里 */\n  ghost: unknown;\n}\n\n/** 表格的外观选项；可以用 createUi / Provider 的 defaults.DataTable 统一改默认值（TreeDataTable 也用它） */\nexport interface DataTableOptions {\n  /** 密度，默认 standard */\n  density?: keyof DataTableDensities;\n  /** 样式，默认 surface */\n  variant?: keyof DataTableVariants;\n  /** 斑马纹：隔行浅色底 */\n  striped?: boolean;\n}\n\n/**\n * DataTable、TreeDataTable 的配方：部件对应渲染出来的元素，密度、样式、斑马纹是档位。\n * 同类的格叠在一起用：勾选列、合计行、详情、空状态的格是 `[s.cell.sx, s.selectCell.sx]`，\n * 分组标题、表头的勾选列是 `[s.headerCell.sx, s.groupHeaderCell.sx]`；对齐、固定列、已选这些按列、按状态的\n * 样式（dataTableStateStyles）追加在部件层之后。\n * 斑马纹按行号隔行（虚拟滚动里 :nth-child 数不准）：`striped: true` 选的是浅色底的那些行\n */\nexport const dataTableRecipe = css.recipe({\n  name: 'DataTable',\n  parts: [\n    'root',\n    'table',\n    'head',\n    'headRow',\n    'headerCell',\n    'groupHeaderCell',\n    'selectHeaderCell',\n    'detailHeaderCell',\n    'headerContent',\n    'headerMain',\n    'sortButton',\n    'sortLabel',\n    'sortIcon',\n    'sortPriority',\n    'selectAll',\n    'progressCell',\n    'progress',\n    'body',\n    'row',\n    'cell',\n    'selectCell',\n    'selectCheckbox',\n    'selectRadio',\n    'detailToggleCell',\n    'detailToggle',\n    'leading',\n    'content',\n    'rowHandle',\n    'editor',\n    'editorControl',\n    'editorError',\n    'detailRow',\n    'detailCell',\n    'detailContent',\n    'skeleton',\n    'emptyCell',\n    'spacer',\n    'foot',\n    'summaryCell',\n  ],\n  base: {\n    // contain: inline-size：宽表格不会把外层的 grid / flex 容器撑宽（它们的最小宽度默认等于内容宽度），\n    // 宽度只由所在的容器决定，放不下的部分在表格里横向滚动\n    // 也是容器查询的容器：详情的内容用 100cqi 限宽到视口，横向滚动时贴着起始边\n    root: { maxHeight: '32em', minWidth: 0, containerType: 'inline-size' },\n    table: {\n      width: '_full',\n      tableLayout: 'fixed',\n      borderCollapse: 'separate',\n      borderSpacing: 0,\n      color: '_text',\n      lineHeight: '_normal',\n    },\n    head: { position: 'sticky', top: 0, zIndex: 2 },\n    headerCell: {\n      position: 'relative',\n      boxSizing: 'border-box',\n      paddingInline: '_md',\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_border',\n      backgroundColor: '_fill',\n      color: '_textMuted',\n      fontSize: '_sm',\n      fontWeight: '_semibold',\n      textAlign: 'start',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    },\n    // 分组标题居中，下边线淡一些：与下面一行的列标题仍是一个表头\n    groupHeaderCell: { textAlign: 'center', borderBottomColor: '_borderMuted' },\n    // 勾选列、详情列的格（表头与各行）：控件居中，没有左右内边距\n    selectHeaderCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    detailHeaderCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    // 有筛选、列菜单按钮的列标题：文字（或排序按钮）占满剩下的宽度，按钮在结尾\n    headerContent: { display: 'flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n    headerMain: { flexGrow: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' },\n    // 去掉按钮默认外观、焦点环、波纹、颜色过渡由 ButtonBase 给出\n    sortButton: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '_xs',\n      maxWidth: '_full',\n      color: { default: 'inherit', ':hover': '_text' },\n    },\n    sortLabel: { overflow: 'hidden', textOverflow: 'ellipsis' },\n    sortIcon: { flexShrink: 0 },\n    // 多列排序时的次序（1、2…）：小号数字跟在箭头后面\n    sortPriority: { fontSize: '0.75em', fontVariantNumeric: 'tabular-nums', color: '_accentText' },\n    // 单元格里 24px 的控件（勾选框、单选框、展开按钮）：上下的负外边距抵掉比一行文字高出的部分，\n    // 有控件的行与纯文字的行一样高，点击区域仍是 24px。操作列放文字按钮时用 variant=\"link\"\n    selectAll: { marginBlock: '-0.1875rem' },\n    progressCell: { position: 'relative', height: 0, padding: 0, borderWidth: 0 },\n    progress: { position: 'absolute', top: 0, insetInline: 0 },\n    // 数字等宽：金额、数量、日期上下对齐（文字不受影响）\n    cell: {\n      boxSizing: 'border-box',\n      fontVariantNumeric: 'tabular-nums',\n      paddingInline: '_md',\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_borderMuted',\n      backgroundColor: 'inherit',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      verticalAlign: 'middle',\n    },\n    selectCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    selectCheckbox: { marginBlock: '-0.1875rem' },\n    selectRadio: { marginBlock: '-0.1875rem' },\n    detailToggleCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    detailToggle: {\n      width: '1.5rem',\n      height: '1.5rem',\n      minHeight: '1.5rem',\n      marginBlock: '-0.1875rem',\n    },\n    leading: { display: 'flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n    content: { minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' },\n    // 行拖动的把手：在第一个数据列的最前面，按下拖动，或聚焦后用键盘\n    rowHandle: {\n      display: 'grid',\n      placeItems: 'center',\n      flexShrink: 0,\n      width: '1.5em',\n      height: '1.5em',\n      marginBlock: '-0.25em',\n      borderRadius: '_sm',\n      backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n      color: '_textMuted',\n      cursor: { default: 'grab', ':active': 'grabbing' },\n      // 触摸拖动时不滚动页面\n      touchAction: 'none',\n    },\n    // 编辑器：贴着格子；提交被拒的原因浮在下面（不撑高这一行）\n    editor: { position: 'relative', minWidth: 0 },\n    editorControl: { width: '_full' },\n    editorError: {\n      position: 'absolute',\n      insetInlineStart: 0,\n      top: 'calc(100% + 2px)',\n      zIndex: 3,\n      // 按文字宽度，不被窄列挤成一字一行；靠起始边（数字列的格是靠结束边的）\n      width: 'max-content',\n      maxWidth: '20rem',\n      textAlign: 'start',\n      paddingBlock: '_xs',\n      paddingInline: '_sm',\n      borderRadius: '_sm',\n      backgroundColor: '_danger',\n      color: '_dangerContrast',\n      fontSize: '_sm',\n      whiteSpace: 'normal',\n      boxShadow: '_md',\n    },\n    // 详情行：浅底、可以换行；内边距放在内容上，内容贴着视口起始边、宽度不超过视口\n    detailCell: {\n      paddingBlock: 0,\n      paddingInline: 0,\n      whiteSpace: 'normal',\n      backgroundColor: '_fill',\n    },\n    detailContent: {\n      position: 'sticky',\n      insetInlineStart: 0,\n      boxSizing: 'border-box',\n      maxWidth: '100cqi',\n      paddingBlock: '_md',\n      paddingInline: '_md',\n    },\n    skeleton: { display: 'block', height: '1em' },\n    // paddingBlock 盖过单元格按密度的上下内边距（padding 是简写，压不过它）\n    emptyCell: { paddingBlock: 0, padding: 0, whiteSpace: 'normal' },\n    spacer: { padding: 0, borderWidth: 0 },\n    // 合计行吸底；在表头、固定列之上\n    foot: { position: 'sticky', bottom: 0, zIndex: 2 },\n    summaryCell: {\n      borderTopWidth: '_xs',\n      borderTopStyle: 'solid',\n      borderTopColor: '_border',\n      borderBottomWidth: 0,\n      backgroundColor: '_fill',\n      fontWeight: '_semibold',\n    },\n  },\n  variants: {\n    // 单元格的上下内边距；紧凑时字号也小一档\n    density: {\n      compact: {\n        table: { fontSize: '_sm' },\n        headerCell: { paddingBlock: '_xs' },\n        cell: { paddingBlock: '_xs' },\n      },\n      standard: { headerCell: { paddingBlock: '_sm' }, cell: { paddingBlock: '_sm' } },\n      comfortable: { headerCell: { paddingBlock: '_md' }, cell: { paddingBlock: '_md' } },\n    },\n    // 行的底色：固定列的单元格继承它（backgroundColor: inherit），所以必须是不透明的颜色\n    variant: {\n      surface: {\n        root: {\n          borderWidth: '_xs',\n          borderStyle: 'solid',\n          borderColor: '_border',\n          borderRadius: '_lg',\n          backgroundColor: '_surface',\n        },\n        row: { backgroundColor: { default: '_surface', ':hover': '_fillHover' } },\n      },\n      ghost: {\n        root: { backgroundColor: '_background' },\n        row: { backgroundColor: { default: '_background', ':hover': '_fillHover' } },\n      },\n    },\n    striped: {\n      true: { row: { backgroundColor: { default: '_fill', ':hover': '_fillHover' } } },\n    },\n  },\n});\n\n/** DataTable、TreeDataTable 的部件（createUi / Provider 的 styles.DataTable 按它定制） */\nexport type DataTablePart = (typeof dataTableRecipe.parts)[number];\n\n/**\n * 表格按列、按状态叠加的样式：对齐、换行、固定列、已选、正在看、编辑中……追加在部件层之后\n * （`{ ...s.cell, sx: [s.cell.sx, dataTableStateStyles.end] }`）。静态 Table 的对齐、换行也用它\n */\nexport const dataTableStateStyles = css.create({\n  // 放在竖排的弹性容器（ViewportFill）里：按行数自己的高度，最多占到剩下的高度，再多在表格里滚动\n  flexible: { flexGrow: 0, flexShrink: 1, flexBasis: 'auto', maxHeight: 'none', minHeight: 0 },\n  // 分组与相邻的列之间一条竖线（只在表头里）：看得出哪几列属于一组\n  groupDivider: {\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderMuted',\n  },\n  wrap: { whiteSpace: 'normal', overflowWrap: 'anywhere' },\n  start: { textAlign: 'start' },\n  center: { textAlign: 'center' },\n  end: { textAlign: 'end' },\n  selected: { backgroundColor: { default: '_accentSoft', ':hover': '_accentSoftHover' } },\n  // 主从视图里正在看的一行：同已选的底色；起始边一条强调色的竖线（与勾选区分开）画在第一个单元格上，\n  // 浏览器不给 tr 画阴影\n  active: { backgroundColor: { default: '_accentSoft', ':hover': '_accentSoftHover' } },\n  activeEdge: {\n    boxShadow: {\n      default: `inset 3px 0 0 ${t.colors.accent}`,\n      ':dir(rtl)': `inset -3px 0 0 ${t.colors.accent}`,\n    },\n  },\n  // 整行能点（打开详情）：手形指针\n  clickable: { cursor: 'pointer' },\n  // 固定列在普通单元格之上，表头在固定列之上\n  sticky: { position: 'sticky', zIndex: 1 },\n  // 固定列与滚动的列之间一条竖线：横向滚动时看得出哪几列是固定的\n  stickyStartEdge: {\n    borderInlineEndWidth: '_xs',\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: '_borderMuted',\n  },\n  stickyEndEdge: {\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderMuted',\n  },\n  // 有起始边的固定列时，勾选列也固定在最前面\n  stickySelect: { position: 'sticky', zIndex: 1, insetInlineStart: 0 },\n  chevronOpen: { rotate: '90deg' },\n  sortActive: { color: '_accentText' },\n  // 靠结束边的列（数字）：文字靠结束边，按钮仍在最后\n  headerMainEnd: { textAlign: 'end' },\n  // 单元格导航：聚焦的格画一圈内描边（不占位、不被相邻格盖住）\n  gridCell: {\n    outline: 'none',\n    boxShadow: {\n      default: null,\n      ':focus-visible': `inset 0 0 0 ${t.borderWidths.sm} ${t.colors.focusRing}`,\n    },\n  },\n  // 编辑中的格：编辑器贴满格子，上下内边距收小\n  editingCell: { paddingBlock: '_none', overflow: 'visible' },\n  // 校验没过的格：红色内描边；聚焦时仍是焦点环\n  invalidCell: {\n    boxShadow: {\n      default: `inset 0 0 0 ${t.borderWidths.xs} ${t.colors.danger}`,\n      ':focus-visible': `inset 0 0 0 ${t.borderWidths.sm} ${t.colors.focusRing}`,\n    },\n  },\n  // 正在拖动的行：浮在别的行上面\n  rowDragging: { position: 'relative', zIndex: 1, boxShadow: '_md' },\n});\n"],"mappings":"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"}
+{"version":3,"file":"table-styles.js","names":[],"sources":["../../src/table/table-styles.ts"],"sourcesContent":["/**\n * 表格的外观：静态 Table 与 DataTable、TreeDataTable 共用的选项（密度、样式、斑马纹）与按列、按状态叠加的样式，\n * 以及 DataTable、TreeDataTable 的配方（静态表格的配方在 Table.tsx）。\n * 单独一个模块：只用静态表格时不连带打包 DataTable 的视图（虚拟滚动、勾选、排序……）。\n */\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 表格的密度（行高与字号） */\nexport interface DataTableDensities {\n  /** 紧凑：数据很多、要一屏看更多行（字号也小一档） */\n  compact: unknown;\n  /** 标准（默认） */\n  standard: unknown;\n  /** 宽松：行里有头像、两行文字 */\n  comfortable: unknown;\n}\n\n/** 表格的样式 */\nexport interface DataTableVariants {\n  /** 表面色、外框与圆角（默认） */\n  surface: unknown;\n  /** 没有外框，底色同页面：放在卡片、对话框里 */\n  ghost: unknown;\n}\n\n/** 表格的外观选项；可以用 createUi / Provider 的 defaults.DataTable 统一改默认值（TreeDataTable 也用它） */\nexport interface DataTableOptions {\n  /** 密度，默认 standard */\n  density?: keyof DataTableDensities;\n  /** 样式，默认 surface */\n  variant?: keyof DataTableVariants;\n  /** 斑马纹：隔行浅色底 */\n  striped?: boolean;\n}\n\n/**\n * DataTable、TreeDataTable 的配方：部件对应渲染出来的元素，密度、样式、斑马纹是档位。\n * 同类的格叠在一起用：勾选列、合计行、详情、空状态的格是 `[s.cell.sx, s.selectCell.sx]`，\n * 分组标题、表头的勾选列是 `[s.headerCell.sx, s.groupHeaderCell.sx]`；对齐、固定列、已选这些按列、按状态的\n * 样式（dataTableStateStyles）追加在部件层之后。\n * 斑马纹按行号隔行（虚拟滚动里 :nth-child 数不准）：`striped: true` 选的是浅色底的那些行\n */\nexport const dataTableRecipe = css.recipe({\n  name: 'DataTable',\n  parts: [\n    'root',\n    'table',\n    'head',\n    'headRow',\n    'headerCell',\n    'groupHeaderCell',\n    'selectHeaderCell',\n    'detailHeaderCell',\n    'headerContent',\n    'headerMain',\n    'sortButton',\n    'sortLabel',\n    'sortIcon',\n    'sortPriority',\n    'selectAll',\n    'progressCell',\n    'progress',\n    'body',\n    'row',\n    'cell',\n    'selectCell',\n    'selectCheckbox',\n    'selectRadio',\n    'detailToggleCell',\n    'detailToggle',\n    'leading',\n    'content',\n    'rowHandle',\n    'editor',\n    'editorControl',\n    'editorError',\n    'detailRow',\n    'detailCell',\n    'detailContent',\n    'skeleton',\n    'emptyCell',\n    'spacer',\n    'foot',\n    'summaryCell',\n  ],\n  base: {\n    // contain: inline-size：宽表格不会把外层的 grid / flex 容器撑宽（它们的最小宽度默认等于内容宽度），\n    // 宽度只由所在的容器决定，放不下的部分在表格里横向滚动\n    // 也是容器查询的容器：详情的内容用 100cqi 限宽到视口，横向滚动时贴着起始边\n    root: { maxHeight: '32em', minWidth: 0, containerType: 'inline-size' },\n    table: {\n      width: '_full',\n      tableLayout: 'fixed',\n      borderCollapse: 'separate',\n      borderSpacing: 0,\n      color: '_text',\n      lineHeight: '_normal',\n    },\n    head: { position: 'sticky', top: 0, zIndex: 2 },\n    headerCell: {\n      position: 'relative',\n      boxSizing: 'border-box',\n      paddingInline: '_md',\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_border',\n      backgroundColor: '_fill',\n      color: '_textMuted',\n      fontSize: '_sm',\n      fontWeight: '_semibold',\n      textAlign: 'start',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    },\n    // 分组标题居中，下边线淡一些：与下面一行的列标题仍是一个表头\n    groupHeaderCell: { textAlign: 'center', borderBottomColor: '_borderMuted' },\n    // 勾选列、详情列的格（表头与各行）：控件居中，没有左右内边距\n    selectHeaderCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    detailHeaderCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    // 有筛选、列菜单按钮的列标题：文字（或排序按钮）占满剩下的宽度，按钮在结尾\n    headerContent: { display: 'flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n    headerMain: { flexGrow: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' },\n    // 去掉按钮默认外观、焦点环、波纹、颜色过渡由 ButtonBase 给出\n    sortButton: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '_xs',\n      maxWidth: '_full',\n      color: { default: 'inherit', ':hover': '_text' },\n    },\n    sortLabel: { overflow: 'hidden', textOverflow: 'ellipsis' },\n    sortIcon: { flexShrink: 0 },\n    // 多列排序时的次序（1、2…）：小号数字跟在箭头后面\n    sortPriority: { fontSize: '0.75em', fontVariantNumeric: 'tabular-nums', color: '_accentText' },\n    // 单元格里 24px 的控件（勾选框、单选框、展开按钮）：上下的负外边距抵掉比一行文字高出的部分，\n    // 有控件的行与纯文字的行一样高，点击区域仍是 24px。操作列放文字按钮时用 variant=\"link\"\n    selectAll: { marginBlock: '-0.1875rem' },\n    progressCell: { position: 'relative', height: 0, padding: 0, borderWidth: 0 },\n    progress: { position: 'absolute', top: 0, insetInline: 0 },\n    // 数字等宽：金额、数量、日期上下对齐（文字不受影响）\n    cell: {\n      boxSizing: 'border-box',\n      fontVariantNumeric: 'tabular-nums',\n      paddingInline: '_md',\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_borderMuted',\n      backgroundColor: 'inherit',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      verticalAlign: 'middle',\n    },\n    selectCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    selectCheckbox: { marginBlock: '-0.1875rem' },\n    selectRadio: { marginBlock: '-0.1875rem' },\n    detailToggleCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    detailToggle: {\n      width: '1.5rem',\n      height: '1.5rem',\n      minHeight: '1.5rem',\n      marginBlock: '-0.1875rem',\n    },\n    leading: { display: 'flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n    content: { minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' },\n    // 行拖动的把手：在第一个数据列的最前面，按下拖动，或聚焦后用键盘\n    rowHandle: {\n      display: 'grid',\n      placeItems: 'center',\n      flexShrink: 0,\n      width: '1.5em',\n      height: '1.5em',\n      marginBlock: '-0.25em',\n      borderRadius: '_sm',\n      backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n      color: '_textMuted',\n      cursor: { default: 'grab', ':active': 'grabbing' },\n      // 触摸拖动时不滚动页面\n      touchAction: 'none',\n    },\n    // 编辑器：贴着格子；提交被拒的原因浮在下面（不撑高这一行）\n    editor: { position: 'relative', minWidth: 0 },\n    editorControl: { width: '_full' },\n    editorError: {\n      position: 'absolute',\n      insetInlineStart: 0,\n      top: 'calc(100% + 2px)',\n      zIndex: 3,\n      // 按文字宽度，不被窄列挤成一字一行；靠起始边（数字列的格是靠结束边的）\n      width: 'max-content',\n      maxWidth: '20rem',\n      textAlign: 'start',\n      paddingBlock: '_xs',\n      paddingInline: '_sm',\n      borderRadius: '_sm',\n      backgroundColor: '_danger',\n      color: '_dangerContrast',\n      fontSize: '_sm',\n      whiteSpace: 'normal',\n      boxShadow: '_md',\n    },\n    // 详情行：浅底、可以换行；内边距放在内容上，内容贴着视口起始边、宽度不超过视口\n    detailCell: {\n      paddingBlock: 0,\n      paddingInline: 0,\n      whiteSpace: 'normal',\n      backgroundColor: '_fill',\n    },\n    detailContent: {\n      position: 'sticky',\n      insetInlineStart: 0,\n      boxSizing: 'border-box',\n      maxWidth: '100cqi',\n      paddingBlock: '_md',\n      paddingInline: '_md',\n    },\n    skeleton: { display: 'block', height: '1em' },\n    // paddingBlock 盖过单元格按密度的上下内边距（padding 是简写，压不过它）\n    emptyCell: { paddingBlock: 0, padding: 0, whiteSpace: 'normal' },\n    spacer: { padding: 0, borderWidth: 0 },\n    // 合计行吸底；在表头、固定列之上\n    foot: { position: 'sticky', bottom: 0, zIndex: 2 },\n    summaryCell: {\n      borderTopWidth: '_xs',\n      borderTopStyle: 'solid',\n      borderTopColor: '_border',\n      borderBottomWidth: 0,\n      backgroundColor: '_fill',\n      fontWeight: '_semibold',\n    },\n  },\n  variants: {\n    // 单元格的上下内边距；紧凑时字号也小一档\n    density: {\n      compact: {\n        table: { fontSize: '_sm' },\n        headerCell: { paddingBlock: '_xs' },\n        cell: { paddingBlock: '_xs' },\n      },\n      standard: { headerCell: { paddingBlock: '_sm' }, cell: { paddingBlock: '_sm' } },\n      comfortable: { headerCell: { paddingBlock: '_md' }, cell: { paddingBlock: '_md' } },\n    },\n    // 行的底色：固定列的单元格继承它（backgroundColor: inherit），所以必须是不透明的颜色\n    variant: {\n      surface: {\n        root: {\n          borderWidth: '_xs',\n          borderStyle: 'solid',\n          borderColor: '_border',\n          borderRadius: '_lg',\n          backgroundColor: '_surface',\n        },\n        row: { backgroundColor: { default: '_surface', ':hover': '_fillHover' } },\n      },\n      ghost: {\n        root: { backgroundColor: '_background' },\n        row: { backgroundColor: { default: '_background', ':hover': '_fillHover' } },\n      },\n    },\n    striped: {\n      true: { row: { backgroundColor: { default: '_fill', ':hover': '_fillHover' } } },\n    },\n  },\n});\n\n/** DataTable、TreeDataTable 的部件（createUi / Provider 的 styles.DataTable 按它定制） */\nexport type DataTablePart = (typeof dataTableRecipe.parts)[number];\n\n/**\n * 表格按列、按状态叠加的样式：对齐、换行、固定列、已选、正在看、编辑中……追加在部件层之后\n * （`{ ...s.cell, sx: [s.cell.sx, dataTableStateStyles.end] }`）。静态 Table 的对齐、换行也用它\n */\nexport const dataTableStateStyles = css.create({\n  // 放在竖排的弹性容器（ViewportFill）里：按行数自己的高度，最多占到剩下的高度，再多在表格里滚动\n  flexible: { flexGrow: 0, flexShrink: 1, flexBasis: 'auto', maxHeight: 'none', minHeight: 0 },\n  // 分组与相邻的列之间一条竖线（只在表头里）：看得出哪几列属于一组\n  groupDivider: {\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderMuted',\n  },\n  wrap: { whiteSpace: 'normal', overflowWrap: 'anywhere' },\n  start: { textAlign: 'start' },\n  center: { textAlign: 'center' },\n  end: { textAlign: 'end' },\n  selected: { backgroundColor: { default: '_accentSoft', ':hover': '_accentSoftHover' } },\n  // 主从视图里正在看的一行：同已选的底色；起始边一条强调色的竖线（与勾选区分开）画在第一个单元格上，\n  // 浏览器不给 tr 画阴影\n  active: { backgroundColor: { default: '_accentSoft', ':hover': '_accentSoftHover' } },\n  activeEdge: {\n    boxShadow: {\n      default: `inset 3px 0 0 ${t.colors.accent}`,\n      ':dir(rtl)': `inset -3px 0 0 ${t.colors.accent}`,\n    },\n  },\n  // 整行能点（打开详情）：手形指针\n  clickable: { cursor: 'pointer' },\n  // 固定列在普通单元格之上，表头在固定列之上\n  sticky: { position: 'sticky', zIndex: 1 },\n  // 固定列与滚动的列之间一条竖线：横向滚动时看得出哪几列是固定的\n  stickyStartEdge: {\n    borderInlineEndWidth: '_xs',\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: '_borderMuted',\n  },\n  stickyEndEdge: {\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderMuted',\n  },\n  // 有起始边的固定列时，勾选列也固定在最前面\n  stickySelect: { position: 'sticky', zIndex: 1, insetInlineStart: 0 },\n  chevronOpen: { rotate: '90deg' },\n  sortActive: { color: '_accentText' },\n  // 靠结束边的列（数字）：文字靠结束边，按钮仍在最后\n  headerMainEnd: { textAlign: 'end' },\n  // 单元格导航：聚焦的格画一圈内描边（不占位、不被相邻格盖住）\n  gridCell: {\n    outline: 'none',\n    boxShadow: {\n      default: null,\n      ':focus-visible': `inset 0 0 0 ${t.borderWidths.sm} ${t.colors.focusRing}`,\n    },\n  },\n  // 编辑中的格：编辑器贴满格子，上下内边距收小\n  editingCell: { paddingBlock: '_none', overflow: 'visible' },\n  // 校验没过的格：红色内描边；聚焦时仍是焦点环\n  invalidCell: {\n    boxShadow: {\n      default: `inset 0 0 0 ${t.borderWidths.xs} ${t.colors.danger}`,\n      ':focus-visible': `inset 0 0 0 ${t.borderWidths.sm} ${t.colors.focusRing}`,\n    },\n  },\n  // 正在拖动的行：浮在别的行上面\n  rowDragging: { position: 'relative', zIndex: 1, boxShadow: '_md' },\n});\n"],"mappings":"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"}

package/dist/theme-customize/ThemeCustomizer.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 ButtonProps } from '../base/Button';
 import { type CodeBlockProps } from '../base/CodeBlock';
 import { type AlertProps } from '../feedback/Alert';

package/dist/theme-customize/ThemeCustomizer.js

@@ -20,7 +20,7 @@ import { ACCENT_SCALES, NEUTRAL_SCALES, scaleSwatch } from "./palette.js";
 import { themeSettingsCode } from "./customize.js";
 import { Fragment, createTextVNode, createVNode, isVNode, nextTick, shallowRef, watch } from "vue";
 import { _component, bindable, 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 { Download, FileBraces, RotateCcw } from "@lucide/icons";
 //#region src/theme-customize/ThemeCustomizer.tsx
 /**

package/dist/theme-customize/ThemeCustomizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeCustomizer.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","Text","_Fragment","_createTextVNode","_mergeProps"],"sources":["../../src/theme-customize/ThemeCustomizer.tsx"],"sourcesContent":["/**\n * 主题编辑器：几个旋钮（品牌色、中性色、圆角、缩放、字体、动效）调出自己的主题，实时检查对比度，给出可以粘贴的代码。\n * 只管设置（ThemeSettings）；把设置套到主题上由使用方做（customizeTheme），这样设置可以记在本地、和主题偏好组合：\n *\n *   let settings = _state<ThemeSettings>({});\n *   app.use(createUi({ theme: () => customizeTheme(preference.theme, settings) }));\n *   <ThemeCustomizer _settings={settings} base={preference.theme} />\n *\n * 旋钮分成颜色、形状与尺寸、字体与动效、检查与导出四组；每个选项带示意（色块与名字、圆角的角、字号、字体），\n * 当前取值写在旋钮名称旁边。对比度按 CONTRAST_PAIRS 检查，读的是 contrastTarget（默认页面根元素）上实际生效的颜色，\n * 所以改了设置、换了主题都会重新检查。\n */\nimport { Download, FileBraces, RotateCcw } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, watch, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { CodeBlock, type CodeBlockProps } from '../base/CodeBlock';\nimport { Text } from '../base/Text';\nimport { Alert, type AlertProps } from '../feedback/Alert';\nimport { ToggleGroup, ToggleItem } from '../input/ToggleGroup';\nimport { Flex } from '../layout/Flex';\nimport { downloadFile } from '../utils/dom/download';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { swatchStyles } from '../utils/style/swatch-styles';\nimport { useFormat } from '../config/lang/format';\nimport { useMessages } from '../config/lang/messages';\nimport { themeCustomizerMessages } from './messages';\nimport { builtinThemes } from '../config/theme/builtin';\nimport { CONTRAST_PAIRS, checkContrast, type ContrastIssue } from './contrast';\nimport {\n  themeSettingsCode,\n  type FontPresets,\n  type MotionPresets,\n  type RadiusPresets,\n  type ThemeSettings,\n} from './customize';\nimport { elementDesignTokens } from './design-tokens';\nimport {\n  ACCENT_SCALES,\n  NEUTRAL_SCALES,\n  scaleSwatch,\n  type AccentScale,\n  type NeutralScale,\n} from './palette';\nimport { readToken, type Theme } from '../config/theme/theme';\nimport { colors } from '../config/theme/tokens';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ThemeCustomizerProps extends PartProps<'div'> {\n  /** 设置：父级写 _settings={x} */\n  _settings?: ThemeSettings;\n  /** 设置套在哪套主题上：决定色块取亮色还是暗色色阶、导出代码里的基础主题 */\n  base: Theme;\n  /** 从哪个元素上读实际生效的颜色做对比度检查，默认页面根元素 */\n  contrastTarget?: HTMLElement | null;\n  /** 每个分组（section）的部件属性 */\n  propsGroup?: PartProps<'section'>;\n  /** 对比度检查结果（Alert）的部件属性；色调由检查结果决定 */\n  propsContrast?: Omit<Partial<AlertProps>, 'tone'>;\n  /** 导出代码（CodeBlock）的部件属性；代码与语言由组件管理 */\n  propsCode?: Omit<Partial<CodeBlockProps>, 'code' | 'lang'>;\n  /** 下载代码按钮的部件属性 */\n  propsDownload?: Omit<Partial<ButtonProps>, 'onClick'>;\n  /** 下载设计令牌（Figma 变量能导入的 JSON）按钮的部件属性 */\n  propsDownloadTokens?: Omit<Partial<ButtonProps>, 'onClick'>;\n  /** 恢复默认按钮的部件属性 */\n  propsReset?: Omit<Partial<ButtonProps>, 'onClick'>;\n}\n\n/** ThemeCustomizer 的样式：root、group、groupHeader、field、fieldHeader、options、option、optionContent 等 */\nexport const themeCustomizerStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_xl' },\n  group: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_lg',\n    // 组与组之间一条分隔线；第一组上面不画\n    paddingBlockStart: { default: '_lg', ':first-child': 0 },\n    borderBlockStartWidth: { default: '_xs', ':first-child': 0 },\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n  },\n  groupHeader: { display: 'flex', flexDirection: 'column', gap: '_xs' },\n  field: { display: 'flex', flexDirection: 'column', gap: '_sm' },\n  fieldHeader: {\n    display: 'flex',\n    alignItems: 'baseline',\n    justifyContent: 'space-between',\n    gap: '_sm',\n  },\n  // 选项排成网格，窄栏里自动换行；每项左对齐，示意在前、名字在后\n  options: {\n    display: 'grid',\n    // ToggleGroup 默认按内容宽：这里占满整栏，auto-fill 才按栏宽排出几列\n    width: 'auto',\n    gridTemplateColumns: 'repeat(auto-fill, minmax(6.5em, 1fr))',\n  },\n  option: { justifyContent: 'flex-start', minWidth: 0 },\n  // 色板：只放色块，排成紧凑的网格；名字在悬停提示与读屏文字里，选中的名字与色值写在旋钮标题旁\n  swatches: { gridTemplateColumns: 'repeat(auto-fill, minmax(2em, 1fr))' },\n  swatchOption: { justifyContent: 'center', paddingInline: 0 },\n  swatchLarge: { width: '1.25em', height: '1.25em' },\n  optionContent: { display: 'flex', alignItems: 'center', gap: '_sm', minWidth: 0 },\n  optionLabel: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },\n  swatch: { flexShrink: 0, width: '1em', height: '1em', borderRadius: '_full' },\n  // 主题默认：虚线圈，表示“不覆盖，沿用主题自己的颜色”\n  swatchDefault: {\n    boxSizing: 'border-box',\n    borderWidth: '_xs',\n    borderStyle: 'dashed',\n    borderColor: '_borderStrong',\n  },\n  // 圆角示意：一个只有上边与左边的角\n  corner: {\n    flexShrink: 0,\n    boxSizing: 'border-box',\n    width: '1em',\n    height: '1em',\n    borderBlockStartWidth: '_sm',\n    borderInlineStartWidth: '_sm',\n    borderBlockStartStyle: 'solid',\n    borderInlineStartStyle: 'solid',\n    borderColor: 'currentColor',\n  },\n  sample: { flexShrink: 0, lineHeight: 1, fontWeight: '_semibold' },\n  sans: { fontFamily: '_sans' },\n  serif: { fontFamily: '_serif' },\n});\n\n/** ThemeCustomizer 的样式：圆角示意的四档（none、small、medium、large） */\nexport const themeCustomizerCornerStyles = css.create({\n  none: { borderStartStartRadius: 0 },\n  small: { borderStartStartRadius: '0.2em' },\n  medium: { borderStartStartRadius: '0.45em' },\n  large: { borderStartStartRadius: '0.8em' },\n});\n\n// 色块颜色与示例字号是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** ThemeCustomizer 的动态样式：色块的颜色、缩放示例的字号 */\nexport const themeCustomizerDynamicStyles = css.create({\n  fill: (color: string) => ({ backgroundColor: color }),\n  scale: (factor: number) => ({ fontSize: `${factor}em` }),\n});\n\n/** 内置主题名 → 导出代码里的变量名（high-contrast → highContrastTheme）；不是内置主题时没有 */\nfunction baseVariable(name: string): string | undefined {\n  if (!(name in builtinThemes)) return undefined;\n  return `${name.replace(/-(\\w)/g, (_, letter: string) => letter.toUpperCase())}Theme`;\n}\n\nconst SCALINGS = [0.9, 0.95, 1, 1.05, 1.1];\n\n/** 一个选项：值、示意、名字、悬停提示 */\ninterface Option {\n  value: string;\n  preview?: VNodeChild;\n  label: VNodeChild;\n  title?: string;\n}\n\n/** 选项的排法：list 是示意加名字，swatches 只放色块 */\ntype OptionLayout = 'list' | 'swatches';\n\n/** 主题编辑器：分组的旋钮、对比度检查与导出代码 */\nexport const ThemeCustomizer = _component(\n  ({\n    _settings: settings = _bindable<ThemeSettings>({}),\n    base,\n    contrastTarget,\n    propsGroup,\n    propsContrast,\n    propsCode,\n    propsDownload,\n    propsDownloadTokens,\n    propsReset,\n    ...rest\n  }: ThemeCustomizerProps) => {\n    const messages = useMessages('themeCustomizer', themeCustomizerMessages);\n    const format = useFormat();\n    let issues = _state.raw<ContrastIssue[]>([]);\n\n    /** 改一个旋钮：空值表示沿用主题本来的取值 */\n    function set<Key extends keyof ThemeSettings>(key: Key, value: ThemeSettings[Key] | '') {\n      settings = { ...settings, [key]: value === '' ? undefined : value };\n    }\n\n    // 设置或主题变了：等新主题写进页面，再读实际生效的颜色检查对比度\n    watch(\n      () => [settings, base],\n      async () => {\n        // 服务端渲染时 immediate 的侦听也会执行，页面上没有主题可读\n        if (typeof document === 'undefined') return;\n        await nextTick();\n        const target = contrastTarget ?? document.documentElement;\n        try {\n          issues = checkContrast((token) =>\n            readToken(target, colors[token as keyof typeof colors] as never),\n          );\n        } catch {\n          // 主题的颜色还没写进页面（服务端渲染、没有样式的测试环境）：读不到就不检查\n          issues = [];\n        }\n      },\n      { immediate: true, deep: true, flush: 'post' },\n    );\n\n    /** 页面上实际生效的主题（已经套上这些设置）存成 Figma 变量能导入的设计令牌 */\n    function downloadTokens(customized: boolean) {\n      const name = `${base.name.replace(/-custom$/, '')}${customized ? '-custom' : ''}`;\n      const tokens = elementDesignTokens(contrastTarget ?? document.documentElement);\n      downloadFile(`${name}.tokens.json`, JSON.stringify(tokens, null, 2), 'application/json');\n    }\n\n    const group = (title: string, hint: string, children: VNodeChild) => (\n      <section {...mergeAttrs<'section'>({ sx: themeCustomizerStyles.group }, propsGroup)}>\n        <div {...css.attrs(themeCustomizerStyles.groupHeader)}>\n          <Text weight=\"semibold\">{title}</Text>\n          <Text size=\"sm\" tone=\"muted\">\n            {hint}\n          </Text>\n        </div>\n        {children}\n      </section>\n    );\n\n    /** 一个旋钮：名称与当前取值，下面是选项网格（单选、至少选一项） */\n    const field = (\n      label: string,\n      current: VNodeChild,\n      options: readonly Option[],\n      value: string,\n      onChange: (next: string) => void,\n      layout: OptionLayout = 'list',\n    ) => (\n      <div {...css.attrs(themeCustomizerStyles.field)}>\n        <div {...css.attrs(themeCustomizerStyles.fieldHeader)}>\n          <Text size=\"sm\" weight=\"medium\">\n            {label}\n          </Text>\n          <Text size=\"xs\" tone=\"muted\">\n            {current}\n          </Text>\n        </div>\n        <ToggleGroup\n          _value={value}\n          onUpdate:_value={onChange}\n          required\n          size=\"sm\"\n          aria-label={label}\n          sx={[\n            themeCustomizerStyles.options,\n            layout === 'swatches' && themeCustomizerStyles.swatches,\n          ]}\n        >\n          {options.map((option) => (\n            <ToggleItem\n              key={option.value}\n              value={option.value}\n              title={option.title}\n              sx={[\n                themeCustomizerStyles.option,\n                layout === 'swatches' && themeCustomizerStyles.swatchOption,\n              ]}\n            >\n              {layout === 'swatches' ? (\n                <>\n                  {option.preview}\n                  <VisuallyHidden>{option.label}</VisuallyHidden>\n                </>\n              ) : (\n                <span {...css.attrs(themeCustomizerStyles.optionContent)}>\n                  {option.preview}\n                  <span {...css.attrs(themeCustomizerStyles.optionLabel)}>{option.label}</span>\n                </span>\n              )}\n            </ToggleItem>\n          ))}\n        </ToggleGroup>\n      </div>\n    );\n\n    /** 色阶在当前语言下的名字与色值：“靛蓝 #3e63dd”；没选（主题默认）时是“主题默认” */\n    const scaleText = (scale: AccentScale | NeutralScale | undefined) =>\n      scale\n        ? `${messages.colorNames[scale]} ${scaleSwatch(scale as never, base.colorScheme)}`\n        : messages.themeDefault;\n\n    /** 色阶选项：第一项是“主题默认”，其余是色块；名字与色值在悬停提示与读屏文字里 */\n    const scaleOptions = (scales: readonly (AccentScale | NeutralScale)[]): Option[] => [\n      {\n        value: '',\n        preview: (\n          <span\n            {...css.attrs(\n              themeCustomizerStyles.swatch,\n              themeCustomizerStyles.swatchLarge,\n              themeCustomizerStyles.swatchDefault,\n            )}\n          />\n        ),\n        label: messages.themeDefault,\n        title: messages.themeDefault,\n      },\n      ...scales.map((scale) => {\n        const color = scaleSwatch(scale as never, base.colorScheme);\n        return {\n          value: scale,\n          title: `${messages.colorNames[scale]}（${scale}）${color}`,\n          preview: (\n            <span\n              {...css.attrs(\n                themeCustomizerStyles.swatch,\n                themeCustomizerStyles.swatchLarge,\n                swatchStyles.ring,\n                themeCustomizerDynamicStyles.fill(color),\n              )}\n            />\n          ),\n          label: messages.colorNames[scale],\n        };\n      }),\n    ];\n\n    return () => {\n      const radii: [keyof RadiusPresets, string][] = [\n        ['none', messages.radiusNone],\n        ['small', messages.radiusSmall],\n        ['medium', messages.radiusMedium],\n        ['large', messages.radiusLarge],\n      ];\n      const fonts: [keyof FontPresets, string][] = [\n        ['sans', messages.fontSans],\n        ['serifHeadings', messages.fontSerifHeadings],\n      ];\n      const motions: [keyof MotionPresets, string][] = [\n        ['none', messages.motionNone],\n        ['fast', messages.motionFast],\n        ['normal', messages.motionNormal],\n        ['slow', messages.motionSlow],\n      ];\n      const radius = settings.radius ?? 'medium';\n      const scaling = settings.scaling ?? 1;\n      const font = settings.font ?? 'sans';\n      const motion = settings.motion ?? 'normal';\n      const percent = (factor: number) => format.number(factor, { style: 'percent' });\n      const labelOf = <Key extends string>(list: [Key, string][], key: Key) =>\n        list.find(([value]) => value === key)?.[1];\n      const code = themeSettingsCode(\n        baseVariable(base.name.replace(/-custom$/, '')) ??\n          (base.colorScheme === 'dark' ? 'darkTheme' : 'lightTheme'),\n        settings,\n        base.colorScheme,\n      );\n      const customized = Object.values(settings).some((value) => value !== undefined);\n\n      return (\n        <div {...mergeAttrs<'div'>({ sx: themeCustomizerStyles.root }, rest)}>\n          {group(messages.groupColor, messages.groupColorHint, [\n            field(\n              messages.accent,\n              scaleText(settings.accent),\n              scaleOptions(ACCENT_SCALES),\n              settings.accent ?? '',\n              (next) => set('accent', next as ThemeSettings['accent'] | ''),\n              'swatches',\n            ),\n            field(\n              messages.neutral,\n              scaleText(settings.neutral),\n              scaleOptions(NEUTRAL_SCALES),\n              settings.neutral ?? '',\n              (next) => set('neutral', next as ThemeSettings['neutral'] | ''),\n              'swatches',\n            ),\n          ])}\n          {group(messages.groupShape, messages.groupShapeHint, [\n            field(\n              messages.radius,\n              labelOf(radii, radius),\n              radii.map(([value, label]) => ({\n                value,\n                label,\n                preview: (\n                  <span\n                    {...css.attrs(themeCustomizerStyles.corner, themeCustomizerCornerStyles[value])}\n                  />\n                ),\n              })),\n              radius,\n              (next) => set('radius', next as keyof RadiusPresets),\n            ),\n            field(\n              messages.scaling,\n              percent(scaling),\n              SCALINGS.map((factor) => ({\n                value: String(factor),\n                label: percent(factor),\n                preview: (\n                  <span\n                    {...css.attrs(\n                      themeCustomizerStyles.sample,\n                      themeCustomizerDynamicStyles.scale(factor),\n                    )}\n                  >\n                    Aa\n                  </span>\n                ),\n              })),\n              String(scaling),\n              (next) => set('scaling', Number(next)),\n            ),\n          ])}\n          {group(messages.groupType, messages.groupTypeHint, [\n            field(\n              messages.font,\n              labelOf(fonts, font),\n              fonts.map(([value, label]) => ({\n                value,\n                label,\n                preview: (\n                  <span\n                    {...css.attrs(\n                      themeCustomizerStyles.sample,\n                      value === 'sans' ? themeCustomizerStyles.sans : themeCustomizerStyles.serif,\n                    )}\n                  >\n                    Aa\n                  </span>\n                ),\n              })),\n              font,\n              (next) => set('font', next as keyof FontPresets),\n            ),\n            field(\n              messages.motion,\n              labelOf(motions, motion),\n              motions.map(([value, label]) => ({ value, label })),\n              motion,\n              (next) => set('motion', next as keyof MotionPresets),\n            ),\n          ])}\n          {group(messages.groupExport, messages.groupExportHint, [\n            <Alert\n              {...mergePartProps<AlertProps>({ title: messages.contrast }, propsContrast, {\n                tone: issues.length === 0 ? 'success' : 'warning',\n              })}\n            >\n              {issues.length === 0 ? (\n                messages.contrastOk(CONTRAST_PAIRS.length)\n              ) : (\n                <Flex direction=\"column\" gap=\"xs\">\n                  {issues.map((issue) => (\n                    <span key={`${issue.foreground}-${issue.background}`}>\n                      {messages.contrastIssue(\n                        `${issue.foreground} / ${issue.background}`,\n                        format.number(issue.ratio, {\n                          minimumFractionDigits: 2,\n                          maximumFractionDigits: 2,\n                        }),\n                        issue.minimum,\n                      )}\n                    </span>\n                  ))}\n                </Flex>\n              )}\n            </Alert>,\n            <CodeBlock\n              {...mergePartProps<CodeBlockProps>(\n                { title: messages.code, code, lang: 'ts' },\n                propsCode,\n              )}\n            />,\n            <Flex gap=\"sm\" wrap>\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { variant: 'soft', icon: Download },\n                  propsDownload,\n                  { onClick: () => downloadFile('theme.ts', code, 'text/typescript') },\n                )}\n              >\n                {messages.download}\n              </Button>\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { variant: 'soft', icon: FileBraces },\n                  propsDownloadTokens,\n                  { onClick: () => downloadTokens(customized) },\n                )}\n              >\n                {messages.downloadTokens}\n              </Button>\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { variant: 'soft', tone: 'neutral', icon: RotateCcw, disabled: !customized },\n                  propsReset,\n                  { onClick: () => (settings = {}) },\n                )}\n              >\n                {messages.reset}\n              </Button>\n            </Flex>,\n          ])}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"ThemeCustomizer.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","Text","_Fragment","_createTextVNode","_mergeProps"],"sources":["../../src/theme-customize/ThemeCustomizer.tsx"],"sourcesContent":["/**\n * 主题编辑器：几个旋钮（品牌色、中性色、圆角、缩放、字体、动效）调出自己的主题，实时检查对比度，给出可以粘贴的代码。\n * 只管设置（ThemeSettings）；把设置套到主题上由使用方做（customizeTheme），这样设置可以记在本地、和主题偏好组合：\n *\n *   let settings = _state<ThemeSettings>({});\n *   app.use(createUi({ theme: () => customizeTheme(preference.theme, settings) }));\n *   <ThemeCustomizer _settings={settings} base={preference.theme} />\n *\n * 旋钮分成颜色、形状与尺寸、字体与动效、检查与导出四组；每个选项带示意（色块与名字、圆角的角、字号、字体），\n * 当前取值写在旋钮名称旁边。对比度按 CONTRAST_PAIRS 检查，读的是 contrastTarget（默认页面根元素）上实际生效的颜色，\n * 所以改了设置、换了主题都会重新检查。\n */\nimport { Download, FileBraces, RotateCcw } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, watch, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { CodeBlock, type CodeBlockProps } from '../base/CodeBlock';\nimport { Text } from '../base/Text';\nimport { Alert, type AlertProps } from '../feedback/Alert';\nimport { ToggleGroup, ToggleItem } from '../input/ToggleGroup';\nimport { Flex } from '../layout/Flex';\nimport { downloadFile } from '../utils/dom/download';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { swatchStyles } from '../utils/style/swatch-styles';\nimport { useFormat } from '../config/lang/format';\nimport { useMessages } from '../config/lang/messages';\nimport { themeCustomizerMessages } from './messages';\nimport { builtinThemes } from '../config/theme/builtin';\nimport { CONTRAST_PAIRS, checkContrast, type ContrastIssue } from './contrast';\nimport {\n  themeSettingsCode,\n  type FontPresets,\n  type MotionPresets,\n  type RadiusPresets,\n  type ThemeSettings,\n} from './customize';\nimport { elementDesignTokens } from './design-tokens';\nimport {\n  ACCENT_SCALES,\n  NEUTRAL_SCALES,\n  scaleSwatch,\n  type AccentScale,\n  type NeutralScale,\n} from './palette';\nimport { readToken, type Theme } from '../config/theme/theme';\nimport { colors } from '../config/theme/tokens';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ThemeCustomizerProps extends PartProps<'div'> {\n  /** 设置：父级写 _settings={x} */\n  _settings?: ThemeSettings;\n  /** 设置套在哪套主题上：决定色块取亮色还是暗色色阶、导出代码里的基础主题 */\n  base: Theme;\n  /** 从哪个元素上读实际生效的颜色做对比度检查，默认页面根元素 */\n  contrastTarget?: HTMLElement | null;\n  /** 每个分组（section）的部件属性 */\n  propsGroup?: PartProps<'section'>;\n  /** 对比度检查结果（Alert）的部件属性；色调由检查结果决定 */\n  propsContrast?: Omit<Partial<AlertProps>, 'tone'>;\n  /** 导出代码（CodeBlock）的部件属性；代码与语言由组件管理 */\n  propsCode?: Omit<Partial<CodeBlockProps>, 'code' | 'lang'>;\n  /** 下载代码按钮的部件属性 */\n  propsDownload?: Omit<Partial<ButtonProps>, 'onClick'>;\n  /** 下载设计令牌（Figma 变量能导入的 JSON）按钮的部件属性 */\n  propsDownloadTokens?: Omit<Partial<ButtonProps>, 'onClick'>;\n  /** 恢复默认按钮的部件属性 */\n  propsReset?: Omit<Partial<ButtonProps>, 'onClick'>;\n}\n\n/** ThemeCustomizer 的样式：root、group、groupHeader、field、fieldHeader、options、option、optionContent 等 */\nexport const themeCustomizerStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_xl' },\n  group: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_lg',\n    // 组与组之间一条分隔线；第一组上面不画\n    paddingBlockStart: { default: '_lg', ':first-child': 0 },\n    borderBlockStartWidth: { default: '_xs', ':first-child': 0 },\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n  },\n  groupHeader: { display: 'flex', flexDirection: 'column', gap: '_xs' },\n  field: { display: 'flex', flexDirection: 'column', gap: '_sm' },\n  fieldHeader: {\n    display: 'flex',\n    alignItems: 'baseline',\n    justifyContent: 'space-between',\n    gap: '_sm',\n  },\n  // 选项排成网格，窄栏里自动换行；每项左对齐，示意在前、名字在后\n  options: {\n    display: 'grid',\n    // ToggleGroup 默认按内容宽：这里占满整栏，auto-fill 才按栏宽排出几列\n    width: 'auto',\n    gridTemplateColumns: 'repeat(auto-fill, minmax(6.5em, 1fr))',\n  },\n  option: { justifyContent: 'flex-start', minWidth: 0 },\n  // 色板：只放色块，排成紧凑的网格；名字在悬停提示与读屏文字里，选中的名字与色值写在旋钮标题旁\n  swatches: { gridTemplateColumns: 'repeat(auto-fill, minmax(2em, 1fr))' },\n  swatchOption: { justifyContent: 'center', paddingInline: 0 },\n  swatchLarge: { width: '1.25em', height: '1.25em' },\n  optionContent: { display: 'flex', alignItems: 'center', gap: '_sm', minWidth: 0 },\n  optionLabel: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },\n  swatch: { flexShrink: 0, width: '1em', height: '1em', borderRadius: '_full' },\n  // 主题默认：虚线圈，表示“不覆盖，沿用主题自己的颜色”\n  swatchDefault: {\n    boxSizing: 'border-box',\n    borderWidth: '_xs',\n    borderStyle: 'dashed',\n    borderColor: '_borderStrong',\n  },\n  // 圆角示意：一个只有上边与左边的角\n  corner: {\n    flexShrink: 0,\n    boxSizing: 'border-box',\n    width: '1em',\n    height: '1em',\n    borderBlockStartWidth: '_sm',\n    borderInlineStartWidth: '_sm',\n    borderBlockStartStyle: 'solid',\n    borderInlineStartStyle: 'solid',\n    borderColor: 'currentColor',\n  },\n  sample: { flexShrink: 0, lineHeight: 1, fontWeight: '_semibold' },\n  sans: { fontFamily: '_sans' },\n  serif: { fontFamily: '_serif' },\n});\n\n/** ThemeCustomizer 的样式：圆角示意的四档（none、small、medium、large） */\nexport const themeCustomizerCornerStyles = css.create({\n  none: { borderStartStartRadius: 0 },\n  small: { borderStartStartRadius: '0.2em' },\n  medium: { borderStartStartRadius: '0.45em' },\n  large: { borderStartStartRadius: '0.8em' },\n});\n\n// 色块颜色与示例字号是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** ThemeCustomizer 的动态样式：色块的颜色、缩放示例的字号 */\nexport const themeCustomizerDynamicStyles = css.create({\n  fill: (color: string) => ({ backgroundColor: color }),\n  scale: (factor: number) => ({ fontSize: `${factor}em` }),\n});\n\n/** 内置主题名 → 导出代码里的变量名（high-contrast → highContrastTheme）；不是内置主题时没有 */\nfunction baseVariable(name: string): string | undefined {\n  if (!(name in builtinThemes)) return undefined;\n  return `${name.replace(/-(\\w)/g, (_, letter: string) => letter.toUpperCase())}Theme`;\n}\n\nconst SCALINGS = [0.9, 0.95, 1, 1.05, 1.1];\n\n/** 一个选项：值、示意、名字、悬停提示 */\ninterface Option {\n  value: string;\n  preview?: VNodeChild;\n  label: VNodeChild;\n  title?: string;\n}\n\n/** 选项的排法：list 是示意加名字，swatches 只放色块 */\ntype OptionLayout = 'list' | 'swatches';\n\n/** 主题编辑器：分组的旋钮、对比度检查与导出代码 */\nexport const ThemeCustomizer = _component(\n  ({\n    _settings: settings = _bindable<ThemeSettings>({}),\n    base,\n    contrastTarget,\n    propsGroup,\n    propsContrast,\n    propsCode,\n    propsDownload,\n    propsDownloadTokens,\n    propsReset,\n    ...rest\n  }: ThemeCustomizerProps) => {\n    const messages = useMessages('themeCustomizer', themeCustomizerMessages);\n    const format = useFormat();\n    let issues = _state.raw<ContrastIssue[]>([]);\n\n    /** 改一个旋钮：空值表示沿用主题本来的取值 */\n    function set<Key extends keyof ThemeSettings>(key: Key, value: ThemeSettings[Key] | '') {\n      settings = { ...settings, [key]: value === '' ? undefined : value };\n    }\n\n    // 设置或主题变了：等新主题写进页面，再读实际生效的颜色检查对比度\n    watch(\n      () => [settings, base],\n      async () => {\n        // 服务端渲染时 immediate 的侦听也会执行，页面上没有主题可读\n        if (typeof document === 'undefined') return;\n        await nextTick();\n        const target = contrastTarget ?? document.documentElement;\n        try {\n          issues = checkContrast((token) =>\n            readToken(target, colors[token as keyof typeof colors] as never),\n          );\n        } catch {\n          // 主题的颜色还没写进页面（服务端渲染、没有样式的测试环境）：读不到就不检查\n          issues = [];\n        }\n      },\n      { immediate: true, deep: true, flush: 'post' },\n    );\n\n    /** 页面上实际生效的主题（已经套上这些设置）存成 Figma 变量能导入的设计令牌 */\n    function downloadTokens(customized: boolean) {\n      const name = `${base.name.replace(/-custom$/, '')}${customized ? '-custom' : ''}`;\n      const tokens = elementDesignTokens(contrastTarget ?? document.documentElement);\n      downloadFile(`${name}.tokens.json`, JSON.stringify(tokens, null, 2), 'application/json');\n    }\n\n    const group = (title: string, hint: string, children: VNodeChild) => (\n      <section {...mergeAttrs<'section'>({ sx: themeCustomizerStyles.group }, propsGroup)}>\n        <div {...css.attrs(themeCustomizerStyles.groupHeader)}>\n          <Text weight=\"semibold\">{title}</Text>\n          <Text size=\"sm\" tone=\"muted\">\n            {hint}\n          </Text>\n        </div>\n        {children}\n      </section>\n    );\n\n    /** 一个旋钮：名称与当前取值，下面是选项网格（单选、至少选一项） */\n    const field = (\n      label: string,\n      current: VNodeChild,\n      options: readonly Option[],\n      value: string,\n      onChange: (next: string) => void,\n      layout: OptionLayout = 'list',\n    ) => (\n      <div {...css.attrs(themeCustomizerStyles.field)}>\n        <div {...css.attrs(themeCustomizerStyles.fieldHeader)}>\n          <Text size=\"sm\" weight=\"medium\">\n            {label}\n          </Text>\n          <Text size=\"xs\" tone=\"muted\">\n            {current}\n          </Text>\n        </div>\n        <ToggleGroup\n          _value={value}\n          onUpdate:_value={onChange}\n          required\n          size=\"sm\"\n          aria-label={label}\n          sx={[\n            themeCustomizerStyles.options,\n            layout === 'swatches' && themeCustomizerStyles.swatches,\n          ]}\n        >\n          {options.map((option) => (\n            <ToggleItem\n              key={option.value}\n              value={option.value}\n              title={option.title}\n              sx={[\n                themeCustomizerStyles.option,\n                layout === 'swatches' && themeCustomizerStyles.swatchOption,\n              ]}\n            >\n              {layout === 'swatches' ? (\n                <>\n                  {option.preview}\n                  <VisuallyHidden>{option.label}</VisuallyHidden>\n                </>\n              ) : (\n                <span {...css.attrs(themeCustomizerStyles.optionContent)}>\n                  {option.preview}\n                  <span {...css.attrs(themeCustomizerStyles.optionLabel)}>{option.label}</span>\n                </span>\n              )}\n            </ToggleItem>\n          ))}\n        </ToggleGroup>\n      </div>\n    );\n\n    /** 色阶在当前语言下的名字与色值：“靛蓝 #3e63dd”；没选（主题默认）时是“主题默认” */\n    const scaleText = (scale: AccentScale | NeutralScale | undefined) =>\n      scale\n        ? `${messages.colorNames[scale]} ${scaleSwatch(scale as never, base.colorScheme)}`\n        : messages.themeDefault;\n\n    /** 色阶选项：第一项是“主题默认”，其余是色块；名字与色值在悬停提示与读屏文字里 */\n    const scaleOptions = (scales: readonly (AccentScale | NeutralScale)[]): Option[] => [\n      {\n        value: '',\n        preview: (\n          <span\n            {...css.attrs(\n              themeCustomizerStyles.swatch,\n              themeCustomizerStyles.swatchLarge,\n              themeCustomizerStyles.swatchDefault,\n            )}\n          />\n        ),\n        label: messages.themeDefault,\n        title: messages.themeDefault,\n      },\n      ...scales.map((scale) => {\n        const color = scaleSwatch(scale as never, base.colorScheme);\n        return {\n          value: scale,\n          title: `${messages.colorNames[scale]}（${scale}）${color}`,\n          preview: (\n            <span\n              {...css.attrs(\n                themeCustomizerStyles.swatch,\n                themeCustomizerStyles.swatchLarge,\n                swatchStyles.ring,\n                themeCustomizerDynamicStyles.fill(color),\n              )}\n            />\n          ),\n          label: messages.colorNames[scale],\n        };\n      }),\n    ];\n\n    return () => {\n      const radii: [keyof RadiusPresets, string][] = [\n        ['none', messages.radiusNone],\n        ['small', messages.radiusSmall],\n        ['medium', messages.radiusMedium],\n        ['large', messages.radiusLarge],\n      ];\n      const fonts: [keyof FontPresets, string][] = [\n        ['sans', messages.fontSans],\n        ['serifHeadings', messages.fontSerifHeadings],\n      ];\n      const motions: [keyof MotionPresets, string][] = [\n        ['none', messages.motionNone],\n        ['fast', messages.motionFast],\n        ['normal', messages.motionNormal],\n        ['slow', messages.motionSlow],\n      ];\n      const radius = settings.radius ?? 'medium';\n      const scaling = settings.scaling ?? 1;\n      const font = settings.font ?? 'sans';\n      const motion = settings.motion ?? 'normal';\n      const percent = (factor: number) => format.number(factor, { style: 'percent' });\n      const labelOf = <Key extends string>(list: [Key, string][], key: Key) =>\n        list.find(([value]) => value === key)?.[1];\n      const code = themeSettingsCode(\n        baseVariable(base.name.replace(/-custom$/, '')) ??\n          (base.colorScheme === 'dark' ? 'darkTheme' : 'lightTheme'),\n        settings,\n        base.colorScheme,\n      );\n      const customized = Object.values(settings).some((value) => value !== undefined);\n\n      return (\n        <div {...mergeAttrs<'div'>({ sx: themeCustomizerStyles.root }, rest)}>\n          {group(messages.groupColor, messages.groupColorHint, [\n            field(\n              messages.accent,\n              scaleText(settings.accent),\n              scaleOptions(ACCENT_SCALES),\n              settings.accent ?? '',\n              (next) => set('accent', next as ThemeSettings['accent'] | ''),\n              'swatches',\n            ),\n            field(\n              messages.neutral,\n              scaleText(settings.neutral),\n              scaleOptions(NEUTRAL_SCALES),\n              settings.neutral ?? '',\n              (next) => set('neutral', next as ThemeSettings['neutral'] | ''),\n              'swatches',\n            ),\n          ])}\n          {group(messages.groupShape, messages.groupShapeHint, [\n            field(\n              messages.radius,\n              labelOf(radii, radius),\n              radii.map(([value, label]) => ({\n                value,\n                label,\n                preview: (\n                  <span\n                    {...css.attrs(themeCustomizerStyles.corner, themeCustomizerCornerStyles[value])}\n                  />\n                ),\n              })),\n              radius,\n              (next) => set('radius', next as keyof RadiusPresets),\n            ),\n            field(\n              messages.scaling,\n              percent(scaling),\n              SCALINGS.map((factor) => ({\n                value: String(factor),\n                label: percent(factor),\n                preview: (\n                  <span\n                    {...css.attrs(\n                      themeCustomizerStyles.sample,\n                      themeCustomizerDynamicStyles.scale(factor),\n                    )}\n                  >\n                    Aa\n                  </span>\n                ),\n              })),\n              String(scaling),\n              (next) => set('scaling', Number(next)),\n            ),\n          ])}\n          {group(messages.groupType, messages.groupTypeHint, [\n            field(\n              messages.font,\n              labelOf(fonts, font),\n              fonts.map(([value, label]) => ({\n                value,\n                label,\n                preview: (\n                  <span\n                    {...css.attrs(\n                      themeCustomizerStyles.sample,\n                      value === 'sans' ? themeCustomizerStyles.sans : themeCustomizerStyles.serif,\n                    )}\n                  >\n                    Aa\n                  </span>\n                ),\n              })),\n              font,\n              (next) => set('font', next as keyof FontPresets),\n            ),\n            field(\n              messages.motion,\n              labelOf(motions, motion),\n              motions.map(([value, label]) => ({ value, label })),\n              motion,\n              (next) => set('motion', next as keyof MotionPresets),\n            ),\n          ])}\n          {group(messages.groupExport, messages.groupExportHint, [\n            <Alert\n              {...mergePartProps<AlertProps>({ title: messages.contrast }, propsContrast, {\n                tone: issues.length === 0 ? 'success' : 'warning',\n              })}\n            >\n              {issues.length === 0 ? (\n                messages.contrastOk(CONTRAST_PAIRS.length)\n              ) : (\n                <Flex direction=\"column\" gap=\"xs\">\n                  {issues.map((issue) => (\n                    <span key={`${issue.foreground}-${issue.background}`}>\n                      {messages.contrastIssue(\n                        `${issue.foreground} / ${issue.background}`,\n                        format.number(issue.ratio, {\n                          minimumFractionDigits: 2,\n                          maximumFractionDigits: 2,\n                        }),\n                        issue.minimum,\n                      )}\n                    </span>\n                  ))}\n                </Flex>\n              )}\n            </Alert>,\n            <CodeBlock\n              {...mergePartProps<CodeBlockProps>(\n                { title: messages.code, code, lang: 'ts' },\n                propsCode,\n              )}\n            />,\n            <Flex gap=\"sm\" wrap>\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { variant: 'soft', icon: Download },\n                  propsDownload,\n                  { onClick: () => downloadFile('theme.ts', code, 'text/typescript') },\n                )}\n              >\n                {messages.download}\n              </Button>\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { variant: 'soft', icon: FileBraces },\n                  propsDownloadTokens,\n                  { onClick: () => downloadTokens(customized) },\n                )}\n              >\n                {messages.downloadTokens}\n              </Button>\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { variant: 'soft', tone: 'neutral', icon: RotateCcw, disabled: !customized },\n                  propsReset,\n                  { onClick: () => (settings = {}) },\n                )}\n              >\n                {messages.reset}\n              </Button>\n            </Flex>,\n          ])}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AAuBA,IAAa,wBAAwB,IAAI,OAAO;CAC9C,MAAM;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;CAAM;CAC7D,OAAO;EACL,SAAS;EACT,eAAe;EACf,KAAK;EAEL,mBAAmB;GAAE,SAAS;GAAO,gBAAgB;EAAE;EACvD,uBAAuB;GAAE,SAAS;GAAO,gBAAgB;EAAE;EAC3D,uBAAuB;EACvB,uBAAuB;CACzB;CACA,aAAa;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;CAAM;CACpE,OAAO;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;CAAM;CAC9D,aAAa;EACX,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,KAAK;CACP;CAEA,SAAS;EACP,SAAS;EAET,OAAO;EACP,qBAAqB;CACvB;CACA,QAAQ;EAAE,gBAAgB;EAAc,UAAU;CAAE;CAEpD,UAAU,EAAE,qBAAqB,sCAAsC;CACvE,cAAc;EAAE,gBAAgB;EAAU,eAAe;CAAE;CAC3D,aAAa;EAAE,OAAO;EAAU,QAAQ;CAAS;CACjD,eAAe;EAAE,SAAS;EAAQ,YAAY;EAAU,KAAK;EAAO,UAAU;CAAE;CAChF,aAAa;EAAE,UAAU;EAAU,cAAc;EAAY,YAAY;CAAS;CAClF,QAAQ;EAAE,YAAY;EAAG,OAAO;EAAO,QAAQ;EAAO,cAAc;CAAQ;CAE5E,eAAe;EACb,WAAW;EACX,aAAa;EACb,aAAa;EACb,aAAa;CACf;CAEA,QAAQ;EACN,YAAY;EACZ,WAAW;EACX,OAAO;EACP,QAAQ;EACR,uBAAuB;EACvB,wBAAwB;EACxB,uBAAuB;EACvB,wBAAwB;EACxB,aAAa;CACf;CACA,QAAQ;EAAE,YAAY;EAAG,YAAY;EAAG,YAAY;CAAY;CAChE,MAAM,EAAE,YAAY,QAAQ;CAC5B,OAAO,EAAE,YAAY,SAAS;AAChC,CAAC;;AAGD,IAAa,8BAA8B,IAAI,OAAO;CACpD,MAAM,EAAE,wBAAwB,EAAE;CAClC,OAAO,EAAE,wBAAwB,QAAQ;CACzC,QAAQ,EAAE,wBAAwB,SAAS;CAC3C,OAAO,EAAE,wBAAwB,QAAQ;AAC3C,CAAC;;AAID,IAAa,+BAA+B,IAAI,OAAO;CACrD,OAAO,WAAmB,EAAE,iBAAiB,MAAM;CACnD,QAAQ,YAAoB,EAAE,UAAU,GAAG,OAAM,IAAK;AACxD,CAAC;;AAGD,SAAS,aAAa,MAAkC;CACtD,IAAI,EAAE,QAAQ,gBAAgB,OAAO,KAAA;CACrC,OAAO,GAAG,KAAK,QAAQ,WAAW,GAAG,WAAmB,OAAO,YAAY,CAAC,EAAC;AAC/E;AAEA,IAAM,WAAW;CAAC;CAAK;CAAM;CAAG;CAAM;AAAG;;;;AAczC,IAAa,kBAAkB,0BAC7B,QAAA,SAW4B;CAAA,MAAA,WAAAC,SAAA,QAAA,oBAVqB,CAAC,IAAC,KAAA,IAAA;CAAA,MAAA,OAAAC,aAAA,QAAA,MAAA;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,sBAAAA,aAAA,QAAA,qBAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAS9C,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,WAAW,YAAY,mBAAmB,uBAAuB;CACvE,MAAM,SAAS,UAAU;CACzB,IAAI,SAAMC,WAA+B,CAAA,CAAE;;CAG3C,SAAS,IAAqC,KAAU,OAAgC;EACtF,SAAA,QAAW;GAAE,GAAA,SAAA;IAAc,MAAM,UAAU,KAAK,KAAA,IAAY;EAAM;CACpE;CAGA,YACQ,CAAA,SAAA,OAAA,KAAA,KAAA,GACN,YAAY;EAEV,IAAI,OAAO,aAAa,aAAa;EACrC,MAAM,SAAS;EACf,MAAM,SAAS,eAAA,SAAkB,SAAS;EAC1C,IAAI;GACF,OAAA,QAAS,eAAe,UACtB,UAAU,QAAQ,OAAO,MAAsC,CACjE;EACF,QAAQ;GAEN,OAAA,QAAS,CAAA;EACX;CACF,GACA;EAAE,WAAW;EAAM,MAAM;EAAM,OAAO;CAAO,CAC/C;;CAGA,SAAS,eAAe,YAAqB;EAC3C,MAAM,OAAO,GAAG,KAAA,MAAK,KAAK,QAAQ,YAAY,EAAE,IAAI,aAAa,YAAY;EAC7E,MAAM,SAAS,oBAAoB,eAAA,SAAkB,SAAS,eAAe;EAC7E,aAAa,GAAG,KAAI,eAAgB,KAAK,UAAU,QAAQ,MAAM,CAAC,GAAG,kBAAkB;CACzF;CAEA,MAAM,SAAS,OAAe,MAAc,aAAoBC,YAAA,WACjD,WAAsB,EAAE,IAAI,sBAAsB,MAAM,GAAC,WAAA,KAAY,GAAC,CAAAA,YAAA,OACxE,IAAI,MAAM,sBAAsB,WAAW,GAAC,CAAAA,YAAAC,QAAA,EAAA,UAAA,WAAA,GAAA,QAC1B,KAAK,IAAL,QAAK,EAAA,eAAA,CAAL,KAAK,EAAA,CAAA,GAAAD,YAAAC,QAAA;EAAA,QAAA;EAAA,QAAA;CAAA,GAAA,QAE3B,IAAI,IAAJ,OAAI,EAAA,eAAA,CAAJ,IAAI,EAAA,CAAA,CAAA,CAAA,GAGR,QAAQ,CAAA;;CAKb,MAAM,SACJ,OACA,SACA,SACA,OACA,UACA,SAAuB,WAAM;EAAA,IAAA;EAAA,OAAAD,YAAA,OAEpB,IAAI,MAAM,sBAAsB,KAAK,GAAC,CAAAA,YAAA,OACpC,IAAI,MAAM,sBAAsB,WAAW,GAAC,CAAAA,YAAAC,QAAA;GAAA,QAAA;GAAA,UAAA;EAAA,GAAA,QAEhD,KAAK,IAAL,QAAK,EAAA,eAAA,CAAL,KAAK,EAAA,CAAA,GAAAD,YAAAC,QAAA;GAAA,QAAA;GAAA,QAAA;EAAA,GAAA,QAGL,OAAO,IAAP,UAAO,EAAA,eAAA,CAAP,OAAO,EAAA,CAAA,CAAA,CAAA,GAAAD,YAAA,aAAA;GAAA,UAIF;GAAK,mBACI;GAAQ,YAAA;GAAA,QAAA;GAAA,cAGb;GAAK,MACb,CACF,sBAAsB,SACtB,WAAW,cAAc,sBAAsB,QAAQ;EACxD,GAAA,QAAA,QAEA,QAAQ,KAAK,WAAMA,YAAA,YAAA;GAAA,OAEX,OAAO;GAAK,SACV,OAAO;GAAK,SACZ,OAAO;GAAK,MACf,CACF,sBAAsB,QACtB,WAAW,cAAc,sBAAsB,YAAY;EAC5D,GAAA,EAAA,eAAA,CAEA,WAAW,aAAUA,YAAAE,UAAA,MAAA,CAEjB,OAAO,SAAOF,YAAA,gBAAA,MAAA,EAAA,eAAA,CACE,OAAO,KAAK,EAAA,CAAA,CAAA,CAAA,IAAAA,YAAA,QAGrB,IAAI,MAAM,sBAAsB,aAAa,GAAC,CACrD,OAAO,SAAOA,YAAA,QACL,IAAI,MAAM,sBAAsB,WAAW,GAAC,CAAG,OAAO,KAAK,CAAA,CAAA,CAAA,CAExE,EAAA,CAAA,CAEJ,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA;CAAA;;CAMR,MAAM,aAAa,UACjB,QACI,GAAG,SAAS,WAAW,OAAM,GAAI,YAAY,OAAgB,KAAA,MAAK,WAAW,MAC7E,SAAS;;CAGf,MAAM,gBAAgB,WAA8D,CAClF;EACE,OAAO;EACP,SAAOA,YAAA,QAEC,IAAI,MACN,sBAAsB,QACtB,sBAAsB,aACtB,sBAAsB,aACxB,GAAC,IAAA;EAGL,OAAO,SAAS;EAChB,OAAO,SAAS;CAClB,GACA,GAAG,OAAO,KAAK,UAAU;EACvB,MAAM,QAAQ,YAAY,OAAgB,KAAA,MAAK,WAAW;EAC1D,OAAO;GACL,OAAO;GACP,OAAO,GAAG,SAAS,WAAW,OAAM,GAAI,MAAK,GAAI;GACjD,SAAOA,YAAA,QAEC,IAAI,MACN,sBAAsB,QACtB,sBAAsB,aACtB,aAAa,MACb,6BAA6B,KAAK,KAAK,CACzC,GAAC,IAAA;GAGL,OAAO,SAAS,WAAW;EAC7B;CACF,CAAC,CAAC;CAGJ,aAAa;EACX,MAAM,QAAyC;GAC7C,CAAC,QAAQ,SAAS,UAAU;GAC5B,CAAC,SAAS,SAAS,WAAW;GAC9B,CAAC,UAAU,SAAS,YAAY;GAChC,CAAC,SAAS,SAAS,WAAW;EAAC;EAEjC,MAAM,QAAuC,CAC3C,CAAC,QAAQ,SAAS,QAAQ,GAC1B,CAAC,iBAAiB,SAAS,iBAAiB,CAAC;EAE/C,MAAM,UAA2C;GAC/C,CAAC,QAAQ,SAAS,UAAU;GAC5B,CAAC,QAAQ,SAAS,UAAU;GAC5B,CAAC,UAAU,SAAS,YAAY;GAChC,CAAC,QAAQ,SAAS,UAAU;EAAC;EAE/B,MAAM,SAAS,SAAA,MAAS,UAAU;EAClC,MAAM,UAAU,SAAA,MAAS,WAAW;EACpC,MAAM,OAAO,SAAA,MAAS,QAAQ;EAC9B,MAAM,SAAS,SAAA,MAAS,UAAU;EAClC,MAAM,WAAW,WAAmB,OAAO,OAAO,QAAQ,EAAE,OAAO,UAAU,CAAC;EAC9E,MAAM,WAA+B,MAAuB,QAC1D,KAAK,MAAM,CAAC,WAAW,UAAU,GAAG,CAAC,GAAG;EAC1C,MAAM,OAAO,kBACX,aAAa,KAAA,MAAK,KAAK,QAAQ,YAAY,EAAE,CAAC,MAC3C,KAAA,MAAK,gBAAgB,SAAS,cAAc,eAAa,SAAA,OAE5D,KAAA,MAAK,WACP;EACA,MAAM,aAAa,OAAO,OAAM,SAAA,KAAS,CAAC,CAAC,MAAM,UAAU,UAAU,KAAA,CAAS;EAE9E,OAAAA,YAAA,OACW,WAAkB,EAAE,IAAI,sBAAsB,KAAK,GAAG,IAAI,GAAC;GACjE,MAAM,SAAS,YAAY,SAAS,gBAAgB,CACnD,MACE,SAAS,QACT,UAAU,SAAA,MAAS,MAAM,GACzB,aAAa,aAAa,GAC1B,SAAA,MAAS,UAAU,KAClB,SAAS,IAAI,UAAU,IAAoC,GAC5D,UACF,GACA,MACE,SAAS,SACT,UAAU,SAAA,MAAS,OAAO,GAC1B,aAAa,cAAc,GAC3B,SAAA,MAAS,WAAW,KACnB,SAAS,IAAI,WAAW,IAAqC,GAC9D,UACF,CAAC,CACF;GACA,MAAM,SAAS,YAAY,SAAS,gBAAgB,CACnD,MACE,SAAS,QACT,QAAQ,OAAO,MAAM,GACrB,MAAM,KAAK,CAAC,OAAO,YAAY;IAC7B;IACA;IACA,SAAOA,YAAA,QAEC,IAAI,MAAM,sBAAsB,QAAQ,4BAA4B,MAAM,GAAC,IAAA;GAGrF,EAAE,GACF,SACC,SAAS,IAAI,UAAU,IAA2B,CACrD,GACA,MACE,SAAS,SACT,QAAQ,OAAO,GACf,SAAS,KAAK,YAAY;IACxB,OAAO,OAAO,MAAM;IACpB,OAAO,QAAQ,MAAM;IACrB,SAAOA,YAAA,QAEC,IAAI,MACN,sBAAsB,QAAM,IAAA,KAC5B,6BAA6B,aAAK,CAAC,MAAM,CAAA,CAC3C,GAAC,CAAAG,gBAAA,IAAA,CAAA,CAAA;GAKP,EAAE,GACF,OAAO,OAAO,IACb,SAAS,IAAI,WAAW,OAAO,IAAI,CAAC,CACvC,CAAC,CACF;GACA,MAAM,SAAS,WAAW,SAAS,eAAe,CACjD,MACE,SAAS,MACT,QAAQ,OAAO,IAAI,GACnB,MAAM,KAAK,CAAC,OAAO,YAAY;IAC7B;IACA;IACA,SAAOH,YAAA,QAEC,IAAI,MACN,sBAAsB,QACtB,UAAU,SAAS,sBAAsB,OAAO,sBAAsB,KACxE,GAAC,CAAAG,gBAAA,IAAA,CAAA,CAAA;GAKP,EAAE,GACF,OACC,SAAS,IAAI,QAAQ,IAAyB,CACjD,GACA,MACE,SAAS,QACT,QAAQ,SAAS,MAAM,GACvB,QAAQ,KAAK,CAAC,OAAO,YAAY;IAAE;IAAO;GAAM,EAAE,GAClD,SACC,SAAS,IAAI,UAAU,IAA2B,CACrD,CAAC,CACF;GACA,MAAM,SAAS,aAAa,SAAS,iBAAiB;IAAAH,YAAA,OAAAI,cAE/C,eAA2B,EAAE,OAAO,SAAS,SAAS,GAAC,cAAA,OAAiB,EAC1E,MAAM,OAAA,MAAO,WAAW,IAAI,YAAY,UAC1C,CAAC,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;KAAA,eAAA,CAED,OAAA,MAAO,WAAW,IACjB,SAAS,WAAW,eAAe,MAAM,IAACJ,YAAA,MAAA;MAAA,aAAA;MAAA,OAAA;MAAA,OAAA;KAAA,GAAA;MAAA,eAAA,CAGvC,OAAA,MAAO,KAAK,UAAKA,YAAA,QAAA,EAAA,OACL,GAAG,MAAM,WAAU,GAAI,MAAM,aAAY,GAAA,CACjD,SAAS,cACR,GAAG,MAAM,WAAU,KAAM,MAAM,cAC/B,OAAO,OAAO,MAAM,OAAO;OACzB,uBAAuB;OACvB,uBAAuB;MACzB,CAAC,GACD,MAAM,OACR,CAAC,CAAA,CAEJ,CAAC;MAAA,SAAA;KAAA,CAAA,CAEL;KAAA,SAAA;IAAA,CAAA;IAAAA,YAAA,WAGG,eACF;KAAE,OAAO,SAAS;KAAM;KAAM,MAAM;IAAK,GAAC,UAAA,KAE5C,GAAC,IAAA;IAAAA,YAAA,MAAA;KAAA,OAAA;KAAA,QAAA;IAAA,GAAA,EAAA,eAAA;KAAAA,YAAA,QAAAI,cAIK,eACF;MAAE,SAAS;MAAQ,MAAM;KAAS,GAAC,cAAA,OAEnC,EAAE,eAAe,aAAa,YAAY,MAAM,iBAAiB,EAAE,CACrE,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;MAAA,eAAA,CAEA,SAAS,QAAQ;MAAA,SAAA;KAAA,CAAA;KAAAJ,YAAA,QAAAI,cAGd,eACF;MAAE,SAAS;MAAQ,MAAM;KAAW,GAAC,oBAAA,OAErC,EAAE,eAAe,eAAe,UAAU,EAAE,CAC9C,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;MAAA,eAAA,CAEA,SAAS,cAAc;MAAA,SAAA;KAAA,CAAA;KAAAJ,YAAA,QAAAI,cAGpB,eACF;MAAE,SAAS;MAAQ,MAAM;MAAW,MAAM;MAAW,UAAU,CAAC;KAAW,GAAC,WAAA,OAE5E,EAAE,eAAgB,SAAA,QAAW,CAAC,EAAG,CACnC,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;MAAA,eAAA,CAEA,SAAS,KAAK;MAAA,SAAA;KAAA,CAAA;IAAA,EAAA,CAAA;GAAA,CAGpB;EAAC,CAAA;CAGR;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/theme-customize/ThemeThumbnail.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';
 import { type Theme } from '../config/theme/theme';
 /** 未声明的属性落到外层 span 上 */

package/dist/theme-customize/ThemeThumbnail.js

@@ -3,7 +3,7 @@ import { themeAttrs } from "../config/theme/theme.js";
 import { swatchStyles } from "../utils/style/swatch-styles.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/theme-customize/ThemeThumbnail.tsx
 /** 未声明的属性落到外层 span 上 */
 /** ThemeThumbnail 的样式：root、card、title、line、button */

package/dist/theme-customize/ThemeThumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeThumbnail.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/theme-customize/ThemeThumbnail.tsx"],"sourcesContent":["/**\n * 主题缩略图（span）：用这套主题画一个缩小的页面：底色上一张卡片，卡片里标题、正文两行字和一个品牌色按钮。\n * 主题选择器、主题列表里代替主题名旁边的色点，一眼看出底色、表面、文字与品牌色的搭配。\n *\n *   <ThemeThumbnail theme={oceanTheme} />\n *\n * 颜色来自套在它上面的主题变量（themeAttrs），换主题不用重画；纯装饰，对读屏隐藏，名字由使用方写在旁边。\n * 尺寸用 em，随字号缩放。部件：Root（span）、Card（卡片）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { swatchStyles } from '../utils/style/swatch-styles';\nimport { themeAttrs, type Theme } from '../config/theme/theme';\n\n/** 未声明的属性落到外层 span 上 */\nexport interface ThemeThumbnailProps extends PartProps<'span', 'aria-hidden'> {\n  /** 画哪一套主题 */\n  theme: Theme;\n  /** 卡片的部件属性 */\n  propsCard?: PartProps<'span'>;\n}\n\n/** ThemeThumbnail 的样式：root、card、title、line、button */\nexport const themeThumbnailStyles = css.create({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'flex-end',\n    justifyContent: 'flex-end',\n    flexShrink: 0,\n    width: '6em',\n    height: '3.75em',\n    padding: '0.5em 0 0 0.75em',\n    overflow: 'hidden',\n    borderRadius: '_md',\n    backgroundColor: '_background',\n  },\n  // 卡片从右下角探出来：像页面的一角\n  card: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '0.3em',\n    width: '100%',\n    height: '100%',\n    padding: '0.5em',\n    borderStartStartRadius: '_sm',\n    borderTopWidth: '_xs',\n    borderInlineStartWidth: '_xs',\n    borderTopStyle: 'solid',\n    borderInlineStartStyle: 'solid',\n    borderColor: '_border',\n    backgroundColor: '_surfaceRaised',\n  },\n  title: { width: '70%', height: '0.35em', borderRadius: '_full', backgroundColor: '_text' },\n  line: { width: '90%', height: '0.25em', borderRadius: '_full', backgroundColor: '_textMuted' },\n  button: {\n    width: '45%',\n    height: '0.6em',\n    marginBlockStart: 'auto',\n    borderRadius: '_sm',\n    backgroundColor: '_accent',\n  },\n});\n\n/** 主题缩略图：缩小的页面一角，颜色取自这套主题 */\nexport const ThemeThumbnail = _component(({ theme, propsCard, ...rest }: ThemeThumbnailProps) => {\n  return () => {\n    const { class: themeClass, style, 'data-theme': name } = themeAttrs(theme);\n    return (\n      <span\n        {...mergeAttrs<'span'>(\n          { sx: [themeThumbnailStyles.root, swatchStyles.ring], class: themeClass, style },\n          rest,\n          { 'aria-hidden': true },\n        )}\n        data-theme={name}\n      >\n        <span {...mergeAttrs<'span'>({ sx: themeThumbnailStyles.card }, propsCard)}>\n          <span {...css.attrs(themeThumbnailStyles.title)} />\n          <span {...css.attrs(themeThumbnailStyles.line)} />\n          <span {...css.attrs(themeThumbnailStyles.button)} />\n        </span>\n      </span>\n    );\n  };\n});\n"],"mappings":";;;;;;;;;AAwBA,IAAa,uBAAuB,IAAI,OAAO;CAC7C,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,cAAc;EACd,iBAAiB;CACnB;CAEA,MAAM;EACJ,SAAS;EACT,eAAe;EACf,KAAK;EACL,OAAO;EACP,QAAQ;EACR,SAAS;EACT,wBAAwB;EACxB,gBAAgB;EAChB,wBAAwB;EACxB,gBAAgB;EAChB,wBAAwB;EACxB,aAAa;EACb,iBAAiB;CACnB;CACA,OAAO;EAAE,OAAO;EAAO,QAAQ;EAAU,cAAc;EAAS,iBAAiB;CAAQ;CACzF,MAAM;EAAE,OAAO;EAAO,QAAQ;EAAU,cAAc;EAAS,iBAAiB;CAAa;CAC7F,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,kBAAkB;EAClB,cAAc;EACd,iBAAiB;CACnB;AACF,CAAC;;AAGD,IAAa,iBAAiB,0BAAW,QAAA,SAAwD;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAhC,OAAIC,UAAA,QAAA,MAAA,IAAA;CACnE,aAAa;EACX,MAAM,EAAE,OAAO,YAAY,OAAO,cAAc,SAAS,WAAU,MAAA,KAAM;EACzE,OAAAC,YAAA,QAAAC,cAEQ,WACF;GAAE,IAAI,CAAC,qBAAqB,MAAM,aAAa,IAAI;GAAG,OAAO;GAAY;EAAM,GAC/E,MACA,EAAE,eAAe,KAAK,CACxB,GAAC,EAAA,cACW,KAAI,CAAA,GAAA,CAAAD,YAAA,QAEN,WAAmB,EAAE,IAAI,qBAAqB,KAAK,GAAC,UAAA,KAAW,GAAC;GAAAA,YAAA,QAC9D,IAAI,MAAM,qBAAqB,KAAK,GAAC,IAAA;GAAAA,YAAA,QACrC,IAAI,MAAM,qBAAqB,IAAI,GAAC,IAAA;GAAAA,YAAA,QACpC,IAAI,MAAM,qBAAqB,MAAM,GAAC,IAAA;EAAA,CAAA,CAAA,CAAA;CAIxD;AACF,GAAC;CAAA,MAAA;CAAA,OAAA,CAAA,SAAA,WAAA;AAAA,CAAA"}
+{"version":3,"file":"ThemeThumbnail.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/theme-customize/ThemeThumbnail.tsx"],"sourcesContent":["/**\n * 主题缩略图（span）：用这套主题画一个缩小的页面：底色上一张卡片，卡片里标题、正文两行字和一个品牌色按钮。\n * 主题选择器、主题列表里代替主题名旁边的色点，一眼看出底色、表面、文字与品牌色的搭配。\n *\n *   <ThemeThumbnail theme={oceanTheme} />\n *\n * 颜色来自套在它上面的主题变量（themeAttrs），换主题不用重画；纯装饰，对读屏隐藏，名字由使用方写在旁边。\n * 尺寸用 em，随字号缩放。部件：Root（span）、Card（卡片）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { swatchStyles } from '../utils/style/swatch-styles';\nimport { themeAttrs, type Theme } from '../config/theme/theme';\n\n/** 未声明的属性落到外层 span 上 */\nexport interface ThemeThumbnailProps extends PartProps<'span', 'aria-hidden'> {\n  /** 画哪一套主题 */\n  theme: Theme;\n  /** 卡片的部件属性 */\n  propsCard?: PartProps<'span'>;\n}\n\n/** ThemeThumbnail 的样式：root、card、title、line、button */\nexport const themeThumbnailStyles = css.create({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'flex-end',\n    justifyContent: 'flex-end',\n    flexShrink: 0,\n    width: '6em',\n    height: '3.75em',\n    padding: '0.5em 0 0 0.75em',\n    overflow: 'hidden',\n    borderRadius: '_md',\n    backgroundColor: '_background',\n  },\n  // 卡片从右下角探出来：像页面的一角\n  card: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '0.3em',\n    width: '100%',\n    height: '100%',\n    padding: '0.5em',\n    borderStartStartRadius: '_sm',\n    borderTopWidth: '_xs',\n    borderInlineStartWidth: '_xs',\n    borderTopStyle: 'solid',\n    borderInlineStartStyle: 'solid',\n    borderColor: '_border',\n    backgroundColor: '_surfaceRaised',\n  },\n  title: { width: '70%', height: '0.35em', borderRadius: '_full', backgroundColor: '_text' },\n  line: { width: '90%', height: '0.25em', borderRadius: '_full', backgroundColor: '_textMuted' },\n  button: {\n    width: '45%',\n    height: '0.6em',\n    marginBlockStart: 'auto',\n    borderRadius: '_sm',\n    backgroundColor: '_accent',\n  },\n});\n\n/** 主题缩略图：缩小的页面一角，颜色取自这套主题 */\nexport const ThemeThumbnail = _component(({ theme, propsCard, ...rest }: ThemeThumbnailProps) => {\n  return () => {\n    const { class: themeClass, style, 'data-theme': name } = themeAttrs(theme);\n    return (\n      <span\n        {...mergeAttrs<'span'>(\n          { sx: [themeThumbnailStyles.root, swatchStyles.ring], class: themeClass, style },\n          rest,\n          { 'aria-hidden': true },\n        )}\n        data-theme={name}\n      >\n        <span {...mergeAttrs<'span'>({ sx: themeThumbnailStyles.card }, propsCard)}>\n          <span {...css.attrs(themeThumbnailStyles.title)} />\n          <span {...css.attrs(themeThumbnailStyles.line)} />\n          <span {...css.attrs(themeThumbnailStyles.button)} />\n        </span>\n      </span>\n    );\n  };\n});\n"],"mappings":";;;;;;;;;AAwBA,IAAa,uBAAuB,IAAI,OAAO;CAC7C,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,cAAc;EACd,iBAAiB;CACnB;CAEA,MAAM;EACJ,SAAS;EACT,eAAe;EACf,KAAK;EACL,OAAO;EACP,QAAQ;EACR,SAAS;EACT,wBAAwB;EACxB,gBAAgB;EAChB,wBAAwB;EACxB,gBAAgB;EAChB,wBAAwB;EACxB,aAAa;EACb,iBAAiB;CACnB;CACA,OAAO;EAAE,OAAO;EAAO,QAAQ;EAAU,cAAc;EAAS,iBAAiB;CAAQ;CACzF,MAAM;EAAE,OAAO;EAAO,QAAQ;EAAU,cAAc;EAAS,iBAAiB;CAAa;CAC7F,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,kBAAkB;EAClB,cAAc;EACd,iBAAiB;CACnB;AACF,CAAC;;AAGD,IAAa,iBAAiB,0BAAW,QAAA,SAAwD;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAhC,OAAIC,UAAA,QAAA,MAAA,IAAA;CACnE,aAAa;EACX,MAAM,EAAE,OAAO,YAAY,OAAO,cAAc,SAAS,WAAU,MAAA,KAAM;EACzE,OAAAC,YAAA,QAAAC,cAEQ,WACF;GAAE,IAAI,CAAC,qBAAqB,MAAM,aAAa,IAAI;GAAG,OAAO;GAAY;EAAM,GAC/E,MACA,EAAE,eAAe,KAAK,CACxB,GAAC,EAAA,cACW,KAAI,CAAA,GAAA,CAAAD,YAAA,QAEN,WAAmB,EAAE,IAAI,qBAAqB,KAAK,GAAC,UAAA,KAAW,GAAC;GAAAA,YAAA,QAC9D,IAAI,MAAM,qBAAqB,KAAK,GAAC,IAAA;GAAAA,YAAA,QACrC,IAAI,MAAM,qBAAqB,IAAI,GAAC,IAAA;GAAAA,YAAA,QACpC,IAAI,MAAM,qBAAqB,MAAM,GAAC,IAAA;EAAA,CAAA,CAAA,CAAA;CAIxD;AACF,GAAC;CAAA,MAAA;CAAA,OAAA,CAAA,SAAA,WAAA;AAAA,CAAA"}

package/dist/theme-customize/design-tokens.js

@@ -3,7 +3,7 @@ import { applyStyleAttrs } from "../utils/props.js";
 import { readToken, themeVariables } from "../config/theme/theme.js";
 import { parseColor } from "../utils/data/color.js";
 import { tokenCatalog } from "./token-catalog.js";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { formatHex } from "culori/fn";
 //#region src/theme-customize/design-tokens.ts
 /**