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

package/dist/layout/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/layout/Separator.tsx"],"sourcesContent":["/**\n * 分隔线。默认是装饰性的（对读屏隐藏）；分隔的是两组不同的内容、需要读屏感知时设 decorative={false}，\n * 渲染为 role=\"separator\"（竖向时带 aria-orientation）。\n *\n *   <Separator />\n *   <Flex align=\"center\" gap=\"sm\">A<Separator orientation=\"vertical\" />B</Flex>\n *   <Separator>或者</Separator>                       横线中间带文字\n *   <Separator labelAlign=\"start\">更改后</Separator>  文字靠起始边，线在后面\n *\n * 带文字（只用于横线）时：文字照常给读屏，两段线对读屏隐藏；decorative={false} 时整条是 role=\"separator\"、以文字为名称。\n *\n * 部件：Root（div）；带文字时还有 Label（span）与 Line（两段线，span）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 角色与朝向由组件管理 */\nexport type SeparatorManaged = 'role' | 'aria-orientation' | 'aria-hidden';\n\n/** 分隔线方向 */\nexport interface SeparatorOrientations {\n  /** 横线：上下两部分之间，占满容器宽度（默认） */\n  horizontal: unknown;\n  /** 竖线：左右两部分之间，在 flex 容器里随行高拉伸 */\n  vertical: unknown;\n}\n\n/** 文字在横线上的位置 */\nexport interface SeparatorLabelAligns {\n  /** 起始边：文字在前、线在后，像一节的小标题 */\n  start: unknown;\n  /** 居中（默认）：两边各一段线，如“或者” */\n  center: unknown;\n  /** 结束边 */\n  end: unknown;\n}\n\n/** 未声明的属性落到 div 上 */\nexport interface SeparatorProps extends PartProps<'div', SeparatorManaged> {\n  /** 方向，默认 horizontal */\n  orientation?: keyof SeparatorOrientations;\n  /** 是否只是视觉装饰，默认 true：对读屏隐藏（带文字时文字仍给读屏） */\n  decorative?: boolean;\n  /** 带文字时文字的位置，默认 center */\n  labelAlign?: keyof SeparatorLabelAligns;\n  /** 文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 两段线的部件属性 */\n  propsLine?: PartProps<'span', 'aria-hidden'>;\n  /** 线上的文字（只用于横线） */\n  children?: VNodeChild;\n}\n\n/** Separator 的样式：root、horizontal、vertical、labelled、label、line */\nexport const separatorStyles = css.create({\n  // Windows 高对比（forced-colors）下系统会把背景色改掉，线就看不见了：改用系统的文字色并保留它\n  root: {\n    flexShrink: 0,\n    backgroundColor: { default: '_borderMuted', _forcedColors: 'CanvasText' },\n    forcedColorAdjust: { default: null, _forcedColors: 'none' },\n  },\n  horizontal: { height: '_borderWidths.xs', width: '_full' },\n  // 在 flex 容器里随行高拉伸\n  vertical: { width: '_borderWidths.xs', alignSelf: 'stretch' },\n  // 带文字：外层不画线，两段线各自伸展\n  labelled: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_md',\n    width: '_full',\n    color: '_textMuted',\n    // 比所在文字小一档（0.93em ≈ 默认字号下的 sm）\n    fontSize: '0.93em',\n    lineHeight: '_tight',\n  },\n  label: { flexShrink: 0, whiteSpace: 'nowrap' },\n  line: {\n    flexGrow: 1,\n    height: '_borderWidths.xs',\n    backgroundColor: { default: '_borderMuted', _forcedColors: 'CanvasText' },\n    forcedColorAdjust: { default: null, _forcedColors: 'none' },\n  },\n});\n\n/** 分隔线（div）：默认装饰性、对读屏隐藏；decorative={false} 时为 role=\"separator\"；可以带文字 */\nexport const Separator = _component(\n  ({\n    orientation = 'horizontal',\n    decorative = true,\n    labelAlign = 'center',\n    propsLabel,\n    propsLine,\n    children,\n    ...rest\n  }: SeparatorProps) => {\n    const labelId = useId();\n    return () => {\n      if (children == null || orientation === 'vertical') {\n        return (\n          <div\n            {...mergeAttrs<'div'>(\n              { sx: [separatorStyles.root, separatorStyles[orientation]] },\n              rest,\n              {\n                role: decorative ? 'none' : 'separator',\n                'aria-orientation':\n                  !decorative && orientation === 'vertical' ? 'vertical' : undefined,\n                'aria-hidden': decorative ? 'true' : undefined,\n              },\n            )}\n          />\n        );\n      }\n      const line = () => (\n        <span\n          {...mergeAttrs<'span'>({ sx: separatorStyles.line }, propsLine, { 'aria-hidden': true })}\n        />\n      );\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: separatorStyles.labelled }, rest, {\n            role: decorative ? 'none' : 'separator',\n            'aria-labelledby': decorative ? undefined : labelId,\n          })}\n          data-label-align={labelAlign}\n        >\n          {labelAlign !== 'start' && line()}\n          <span {...mergeAttrs<'span'>({ sx: separatorStyles.label }, propsLabel, { id: labelId })}>\n            {children}\n          </span>\n          {labelAlign !== 'end' && line()}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;AAwDA,IAAa,kBAAkB,IAAI,OAAO;CAExC,MAAM;EACJ,YAAY;EACZ,iBAAiB;GAAE,SAAS;GAAgB,eAAe;EAAa;EACxE,mBAAmB;GAAE,SAAS;GAAM,eAAe;EAAO;CAC5D;CACA,YAAY;EAAE,QAAQ;EAAoB,OAAO;CAAQ;CAEzD,UAAU;EAAE,OAAO;EAAoB,WAAW;CAAU;CAE5D,UAAU;EACR,SAAS;EACT,YAAY;EACZ,KAAK;EACL,OAAO;EACP,OAAO;EAEP,UAAU;EACV,YAAY;CACd;CACA,OAAO;EAAE,YAAY;EAAG,YAAY;CAAS;CAC7C,MAAM;EACJ,UAAU;EACV,QAAQ;EACR,iBAAiB;GAAE,SAAS;GAAgB,eAAe;EAAa;EACxE,mBAAmB;GAAE,SAAS;GAAM,eAAe;EAAO;CAC5D;AACF,CAAC;;AAGD,IAAa,YAAY,0BACvB,QAAA,SAQsB;CAAA,MAAA,cAAAA,aAAA,QAAA,eAPN,YAAY;CAAA,MAAA,aAAAA,aAAA,QAAA,cACb,IAAI;CAAA,MAAA,aAAAA,aAAA,QAAA,cACJ,QAAQ;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAIlB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,UAAU,MAAM;CACtB,aAAa;EACX,IAAI,SAAA,SAAY,QAAQ,YAAA,UAAgB,YACtC,OAAAC,YAAA,OAEQ,WACF,EAAE,IAAI,CAAC,gBAAgB,MAAM,gBAAe,YAAA,MAAa,EAAE,GAC3D,MACA;GACE,MAAM,WAAA,QAAa,SAAS;GAC5B,oBACE,CAAA,WAAA,SAAe,YAAA,UAAgB,aAAa,aAAa,KAAA;GAC3D,eAAe,WAAA,QAAa,SAAS,KAAA;EACvC,CACF,GAAC,IAAA;EAIP,MAAM,aAAOA,YAAA,QAEL,WAAmB,EAAE,IAAI,gBAAgB,KAAK,GAAC,UAAA,OAAa,EAAE,eAAe,KAAK,CAAC,GAAC,IAAA;EAG5F,OAAAA,YAAA,OAAAC,WAEQ,WAAkB,EAAE,IAAI,gBAAgB,SAAS,GAAG,MAAM;GAC5D,MAAM,WAAA,QAAa,SAAS;GAC5B,mBAAmB,WAAA,QAAa,KAAA,IAAY;EAC9C,CAAC,GAAC,EAAA,oBAAA,WAAA,MAAA,CAAA,GAAA;GAGD,WAAA,UAAe,WAAW,KAAK;GAACD,YAAA,QACvB,WAAmB,EAAE,IAAI,gBAAgB,MAAM,GAAC,WAAA,OAAc,EAAE,IAAI,QAAQ,CAAC,GAAC,CAAA,SAAA,KAAA,CAAA;GAGvF,WAAA,UAAe,SAAS,KAAK;EAAC,CAAA;CAGrC;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"Separator.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/layout/Separator.tsx"],"sourcesContent":["/**\n * 分隔线。默认是装饰性的（对读屏隐藏）；分隔的是两组不同的内容、需要读屏感知时设 decorative={false}，\n * 渲染为 role=\"separator\"（竖向时带 aria-orientation）。\n *\n *   <Separator />\n *   <Flex align=\"center\" gap=\"sm\">A<Separator orientation=\"vertical\" />B</Flex>\n *   <Separator>或者</Separator>                       横线中间带文字\n *   <Separator labelAlign=\"start\">更改后</Separator>  文字靠起始边，线在后面\n *\n * 带文字（只用于横线）时：文字照常给读屏，两段线对读屏隐藏；decorative={false} 时整条是 role=\"separator\"、以文字为名称。\n *\n * 部件：Root（div）；带文字时还有 Label（span）与 Line（两段线，span）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 角色与朝向由组件管理 */\nexport type SeparatorManaged = 'role' | 'aria-orientation' | 'aria-hidden';\n\n/** 分隔线方向 */\nexport interface SeparatorOrientations {\n  /** 横线：上下两部分之间，占满容器宽度（默认） */\n  horizontal: unknown;\n  /** 竖线：左右两部分之间，在 flex 容器里随行高拉伸 */\n  vertical: unknown;\n}\n\n/** 文字在横线上的位置 */\nexport interface SeparatorLabelAligns {\n  /** 起始边：文字在前、线在后，像一节的小标题 */\n  start: unknown;\n  /** 居中（默认）：两边各一段线，如“或者” */\n  center: unknown;\n  /** 结束边 */\n  end: unknown;\n}\n\n/** 未声明的属性落到 div 上 */\nexport interface SeparatorProps extends PartProps<'div', SeparatorManaged> {\n  /** 方向，默认 horizontal */\n  orientation?: keyof SeparatorOrientations;\n  /** 是否只是视觉装饰，默认 true：对读屏隐藏（带文字时文字仍给读屏） */\n  decorative?: boolean;\n  /** 带文字时文字的位置，默认 center */\n  labelAlign?: keyof SeparatorLabelAligns;\n  /** 文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 两段线的部件属性 */\n  propsLine?: PartProps<'span', 'aria-hidden'>;\n  /** 线上的文字（只用于横线） */\n  children?: VNodeChild;\n}\n\n/** Separator 的样式：root、horizontal、vertical、labelled、label、line */\nexport const separatorStyles = css.create({\n  // Windows 高对比（forced-colors）下系统会把背景色改掉，线就看不见了：改用系统的文字色并保留它\n  root: {\n    flexShrink: 0,\n    backgroundColor: { default: '_borderMuted', _forcedColors: 'CanvasText' },\n    forcedColorAdjust: { default: null, _forcedColors: 'none' },\n  },\n  horizontal: { height: '_borderWidths.xs', width: '_full' },\n  // 在 flex 容器里随行高拉伸\n  vertical: { width: '_borderWidths.xs', alignSelf: 'stretch' },\n  // 带文字：外层不画线，两段线各自伸展\n  labelled: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_md',\n    width: '_full',\n    color: '_textMuted',\n    // 比所在文字小一档（0.93em ≈ 默认字号下的 sm）\n    fontSize: '0.93em',\n    lineHeight: '_tight',\n  },\n  label: { flexShrink: 0, whiteSpace: 'nowrap' },\n  line: {\n    flexGrow: 1,\n    height: '_borderWidths.xs',\n    backgroundColor: { default: '_borderMuted', _forcedColors: 'CanvasText' },\n    forcedColorAdjust: { default: null, _forcedColors: 'none' },\n  },\n});\n\n/** 分隔线（div）：默认装饰性、对读屏隐藏；decorative={false} 时为 role=\"separator\"；可以带文字 */\nexport const Separator = _component(\n  ({\n    orientation = 'horizontal',\n    decorative = true,\n    labelAlign = 'center',\n    propsLabel,\n    propsLine,\n    children,\n    ...rest\n  }: SeparatorProps) => {\n    const labelId = useId();\n    return () => {\n      if (children == null || orientation === 'vertical') {\n        return (\n          <div\n            {...mergeAttrs<'div'>(\n              { sx: [separatorStyles.root, separatorStyles[orientation]] },\n              rest,\n              {\n                role: decorative ? 'none' : 'separator',\n                'aria-orientation':\n                  !decorative && orientation === 'vertical' ? 'vertical' : undefined,\n                'aria-hidden': decorative ? 'true' : undefined,\n              },\n            )}\n          />\n        );\n      }\n      const line = () => (\n        <span\n          {...mergeAttrs<'span'>({ sx: separatorStyles.line }, propsLine, { 'aria-hidden': true })}\n        />\n      );\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: separatorStyles.labelled }, rest, {\n            role: decorative ? 'none' : 'separator',\n            'aria-labelledby': decorative ? undefined : labelId,\n          })}\n          data-label-align={labelAlign}\n        >\n          {labelAlign !== 'start' && line()}\n          <span {...mergeAttrs<'span'>({ sx: separatorStyles.label }, propsLabel, { id: labelId })}>\n            {children}\n          </span>\n          {labelAlign !== 'end' && line()}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;AAwDA,IAAa,kBAAkB,IAAI,OAAO;CAExC,MAAM;EACJ,YAAY;EACZ,iBAAiB;GAAE,SAAS;GAAgB,eAAe;EAAa;EACxE,mBAAmB;GAAE,SAAS;GAAM,eAAe;EAAO;CAC5D;CACA,YAAY;EAAE,QAAQ;EAAoB,OAAO;CAAQ;CAEzD,UAAU;EAAE,OAAO;EAAoB,WAAW;CAAU;CAE5D,UAAU;EACR,SAAS;EACT,YAAY;EACZ,KAAK;EACL,OAAO;EACP,OAAO;EAEP,UAAU;EACV,YAAY;CACd;CACA,OAAO;EAAE,YAAY;EAAG,YAAY;CAAS;CAC7C,MAAM;EACJ,UAAU;EACV,QAAQ;EACR,iBAAiB;GAAE,SAAS;GAAgB,eAAe;EAAa;EACxE,mBAAmB;GAAE,SAAS;GAAM,eAAe;EAAO;CAC5D;AACF,CAAC;;AAGD,IAAa,YAAY,0BACvB,QAAA,SAQsB;CAAA,MAAA,cAAAA,aAAA,QAAA,eAPN,YAAY;CAAA,MAAA,aAAAA,aAAA,QAAA,cACb,IAAI;CAAA,MAAA,aAAAA,aAAA,QAAA,cACJ,QAAQ;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAIlB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,UAAU,MAAM;CACtB,aAAa;EACX,IAAI,SAAA,SAAY,QAAQ,YAAA,UAAgB,YACtC,OAAAC,YAAA,OAEQ,WACF,EAAE,IAAI,CAAC,gBAAgB,MAAM,gBAAe,YAAA,MAAa,EAAE,GAC3D,MACA;GACE,MAAM,WAAA,QAAa,SAAS;GAC5B,oBACE,CAAA,WAAA,SAAe,YAAA,UAAgB,aAAa,aAAa,KAAA;GAC3D,eAAe,WAAA,QAAa,SAAS,KAAA;EACvC,CACF,GAAC,IAAA;EAIP,MAAM,aAAOA,YAAA,QAEL,WAAmB,EAAE,IAAI,gBAAgB,KAAK,GAAC,UAAA,OAAa,EAAE,eAAe,KAAK,CAAC,GAAC,IAAA;EAG5F,OAAAA,YAAA,OAAAC,cAEQ,WAAkB,EAAE,IAAI,gBAAgB,SAAS,GAAG,MAAM;GAC5D,MAAM,WAAA,QAAa,SAAS;GAC5B,mBAAmB,WAAA,QAAa,KAAA,IAAY;EAC9C,CAAC,GAAC,EAAA,oBAAA,WAAA,MAAA,CAAA,GAAA;GAGD,WAAA,UAAe,WAAW,KAAK;GAACD,YAAA,QACvB,WAAmB,EAAE,IAAI,gBAAgB,MAAM,GAAC,WAAA,OAAc,EAAE,IAAI,QAAQ,CAAC,GAAC,CAAA,SAAA,KAAA,CAAA;GAGvF,WAAA,UAAe,SAAS,KAAK;EAAC,CAAA;CAGrC;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/layout/Splitter.js

@@ -5,8 +5,8 @@ import { focusRingStyles } from "../utils/style/styles.js";
 import { IconButton } from "../base/IconButton.js";
 import { startMove } from "../utils/dom/move.js";
 import { inlineArrows, isRtl } from "../utils/dom/direction.js";
-import { createVNode, mergeProps, shallowRef, useId } from "vue";
-import { _component, bindable, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, shallowRef, useId } 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 { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "@lucide/icons";
 //#region src/layout/Splitter.tsx
@@ -162,7 +162,7 @@ var Splitter = /*#__PURE__*/ _component((_props, _ctx) => {
 		const hideStart = collapsed.value && collapsible.value === "start";
 		const hideEnd = collapsed.value && collapsible.value === "end";
 		const template = hideStart ? "0 auto minmax(0, 1fr)" : hideEnd ? "minmax(0, 1fr) auto 0" : `minmax(0, ${size.value}fr) auto minmax(0, ${100 - size.value}fr)`;
-		return createVNode("div", mergeProps(mergeAttrs({ sx: [
+		return createVNode("div", mergeJsxProps(mergeAttrs({ sx: [
 			splitterStyles.root,
 			bordered.value && splitterStyles.bordered,
 			horizontal() ? css.bind(splitterDynamicStyles.columns, () => [template]) : css.bind(splitterDynamicStyles.rows, () => [template])

package/dist/layout/Splitter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Splitter.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vtp_untrack","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/layout/Splitter.tsx"],"sourcesContent":["/**\n * 分栏：两栏并排（或上下），中间的分隔条可以拖动调整比例，一侧可以收起。收件箱（左列表、右预览）、\n * 主从视图、编辑器与预览这类“两块都要看、比例因人而异”的布局。\n *\n *   <Splitter _size={listSize} collapsible=\"end\" _collapsed={previewHidden}\n *     start={<List />} end={<Preview />} />\n *\n * size 是起始一栏占的百分比（父级写 _bind 记住），拖动时夹在 minSize–maxSize 之间；双击分隔条回到初始比例。\n * 分隔条按 WAI-ARIA 的 Window Splitter 模式：role=\"separator\"、可聚焦，←/→（上下排列时 ↑/↓）每次调 5%，\n * Home / End 到最小 / 最大，Enter 收起或展开可收起的那一侧；从右到左排版下左右键自动镜像。\n * 写了 collapsible 时分隔条中间有收起、展开的小按钮；收起的一栏不显示（hidden），另一栏占满。\n * 两栏各自滚动：内容放在里面自己的滚动容器里（或直接用 ScrollArea）。\n */\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang } from '../config/context';\nimport { clamp } from '../utils/data/number';\nimport { inlineArrows, isRtl } from '../utils/dom/direction';\nimport { startMove } from '../utils/dom/move';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\n\n/** 两栏的排法 */\nexport interface SplitterOrientations {\n  /** 左右并排（默认） */\n  horizontal: unknown;\n  /** 上下排列 */\n  vertical: unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface SplitterProps extends PartProps<'div'> {\n  /** 起始一栏（左或上）的内容 */\n  start: VNodeChild;\n  /** 结束一栏（右或下）的内容 */\n  end: VNodeChild;\n  /**\n   * 两栏的排法\n   * @default 'horizontal'\n   */\n  orientation?: keyof SplitterOrientations;\n  /**\n   * 起始一栏占的百分比：父级写 _size={x} 记住拖动后的比例\n   * @default 50\n   */\n  _size?: number;\n  /**\n   * 起始一栏最少占多少（百分比）\n   * @default 20\n   */\n  minSize?: number;\n  /**\n   * 起始一栏最多占多少（百分比）\n   * @default 80\n   */\n  maxSize?: number;\n  /** 哪一侧可以收起；不写时不能收起 */\n  collapsible?: 'start' | 'end';\n  /** 可收起的那一侧收着：父级写 _collapsed={x} */\n  _collapsed?: boolean;\n  /** 分隔条的名称（读屏），默认取语言包（调整分栏） */\n  label?: string;\n  /** 外面一圈边框、圆角与表面色：独立成块（收件箱的列表与预览） */\n  bordered?: boolean;\n  /** 起始一栏（div）的部件属性 */\n  propsStart?: PartProps<'div'>;\n  /** 结束一栏（div）的部件属性 */\n  propsEnd?: PartProps<'div'>;\n  /** 分隔条（div，role=\"separator\"）的部件属性 */\n  propsHandle?: PartProps<'div'>;\n  /** 收起、展开按钮的部件属性 */\n  propsToggle?: Partial<IconButtonProps>;\n}\n\n/** 键盘每按一次调多少（百分比） */\nconst STEP = 5;\n\n/** Splitter 的样式：root、pane、handle、line、toggle… */\nexport const splitterStyles = css.create({\n  root: { display: 'grid', minWidth: 0, minHeight: 0, height: '100%' },\n  bordered: {\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_lg',\n    backgroundColor: '_surface',\n    overflow: 'hidden',\n  },\n  pane: { minWidth: 0, minHeight: 0, overflow: 'auto' },\n  // 分隔条：看得见的是中间一条细线，能拖的范围更宽；悬停、拖动时变成强调色\n  // 分隔条所在的格：分隔条铺满它，收起按钮叠在中间（不放进可聚焦的分隔条里：交互元素不能嵌套）\n  track: { position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' },\n  handle: {\n    position: 'absolute',\n    inset: 0,\n    touchAction: 'none',\n    outlineStyle: 'none',\n    color: { default: '_borderMuted', ':hover': '_borderStrong', ':focus-visible': '_accent' },\n  },\n  handleHorizontal: { width: '_space.md', cursor: 'col-resize' },\n  handleVertical: { height: '_space.md', cursor: 'row-resize' },\n  line: { position: 'absolute', backgroundColor: 'currentColor', pointerEvents: 'none' },\n  lineHorizontal: { insetBlock: 0, insetInlineStart: 'calc(50% - 0.5px)', width: '1px' },\n  lineVertical: { insetInline: 0, top: 'calc(50% - 0.5px)', height: '1px' },\n  // 收起、展开的小按钮压在线上：背景盖住线\n  toggle: { position: 'relative', zIndex: 1, backgroundColor: '_surface', cursor: 'pointer' },\n});\n\n/** Splitter 的动态样式：两栏与分隔条的轨道 */\nexport const splitterDynamicStyles = css.create({\n  columns: (template: string) => ({ gridTemplateColumns: template }),\n  rows: (template: string) => ({ gridTemplateRows: template }),\n});\n\n/** 分栏 */\nexport const Splitter = _component(\n  ({\n    start,\n    end,\n    orientation = 'horizontal',\n    _size: size = _bindable(50),\n    minSize = 20,\n    maxSize = 80,\n    collapsible,\n    _collapsed: collapsed = _bindable(false),\n    label,\n    bordered = false,\n    propsStart,\n    propsEnd,\n    propsHandle,\n    propsToggle,\n    ...rest\n  }: SplitterProps) => {\n    const lang = useLang();\n    const id = useId();\n    const initialSize = _untrack(size);\n    let root = _state.raw<HTMLElement | null>(null);\n    const horizontal = () => orientation === 'horizontal';\n    const fit = (value: number) => Math.round(clamp(value, minSize, maxSize) * 10) / 10;\n\n    function onPointerdown(event: PointerEvent) {\n      if (!root || (event.target as Element).closest('button')) return;\n      const rect = root.getBoundingClientRect();\n      const total = horizontal() ? rect.width : rect.height;\n      const from = size;\n      const sign = horizontal() && isRtl(root) ? -1 : 1;\n      event.preventDefault();\n      startMove(event, {\n        onMove: ({ deltaX, deltaY }) => {\n          const delta = (horizontal() ? deltaX * sign : deltaY) / total;\n          size = fit(from + delta * 100);\n          // 拖动即展开：收着的一侧被拖出来\n          if (collapsed) collapsed = false;\n        },\n      });\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      if (event.key === 'Enter' && collapsible) {\n        event.preventDefault();\n        collapsed = !collapsed;\n        return;\n      }\n      const { forward, backward } = horizontal()\n        ? inlineArrows(root ? isRtl(root) : false)\n        : { forward: 'ArrowDown', backward: 'ArrowUp' };\n      const next =\n        event.key === forward\n          ? size + STEP\n          : event.key === backward\n            ? size - STEP\n            : event.key === 'Home'\n              ? minSize\n              : event.key === 'End'\n                ? maxSize\n                : null;\n      if (next == null) return;\n      event.preventDefault();\n      size = fit(next);\n      if (collapsed) collapsed = false;\n    }\n\n    /** 收起、展开按钮的箭头：指向收起的方向 */\n    const toggleIcon = () => {\n      const towardStart = (collapsible === 'start') !== collapsed;\n      if (horizontal()) return towardStart ? ChevronLeft : ChevronRight;\n      return towardStart ? ChevronUp : ChevronDown;\n    };\n\n    return () => {\n      const hideStart = collapsed && collapsible === 'start';\n      const hideEnd = collapsed && collapsible === 'end';\n      const template = hideStart\n        ? '0 auto minmax(0, 1fr)'\n        : hideEnd\n          ? 'minmax(0, 1fr) auto 0'\n          : `minmax(0, ${size}fr) auto minmax(0, ${100 - size}fr)`;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                splitterStyles.root,\n                bordered && splitterStyles.bordered,\n                horizontal()\n                  ? splitterDynamicStyles.columns(template)\n                  : splitterDynamicStyles.rows(template),\n              ],\n            },\n            rest,\n            { ref: (element: unknown) => (root = element as HTMLElement | null) },\n          )}\n          data-orientation={orientation}\n          data-collapsed={collapsed ? collapsible : undefined}\n        >\n          <div\n            {...mergeAttrs<'div'>({ sx: splitterStyles.pane }, propsStart, {\n              id: `${id}-start`,\n              hidden: hideStart || undefined,\n            })}\n          >\n            {start}\n          </div>\n          <div\n            {...css.attrs(\n              splitterStyles.track,\n              horizontal() ? splitterStyles.handleHorizontal : splitterStyles.handleVertical,\n            )}\n          >\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    splitterStyles.handle,\n                    horizontal() ? splitterStyles.handleHorizontal : splitterStyles.handleVertical,\n                    focusRingStyles.visible,\n                  ],\n                },\n                propsHandle,\n                {\n                  role: 'separator',\n                  tabindex: 0,\n                  'aria-label': label ?? lang.splitterResize,\n                  'aria-orientation': horizontal() ? 'vertical' : 'horizontal',\n                  'aria-controls': `${id}-start`,\n                  'aria-valuenow': hideStart ? 0 : hideEnd ? 100 : size,\n                  'aria-valuemin': minSize,\n                  'aria-valuemax': maxSize,\n                  onPointerdown,\n                  onKeydown,\n                  onDblclick: () => (size = fit(initialSize)),\n                },\n              )}\n            >\n              <span\n                {...css.attrs(\n                  splitterStyles.line,\n                  horizontal() ? splitterStyles.lineHorizontal : splitterStyles.lineVertical,\n                )}\n              />\n            </div>\n            {collapsible && (\n              <IconButton\n                {...mergePartProps<IconButtonProps>(\n                  {\n                    icon: toggleIcon(),\n                    size: 'xs',\n                    variant: 'outline',\n                    tone: 'neutral',\n                    sx: splitterStyles.toggle,\n                    'aria-label': collapsed ? lang.splitterExpand : lang.splitterCollapse,\n                  },\n                  propsToggle,\n                  {\n                    'aria-expanded': !collapsed,\n                    'aria-controls': collapsible === 'start' ? `${id}-start` : `${id}-end`,\n                    // 键盘用户在分隔条上按 Enter：按钮不进 Tab 顺序，免得多停一次\n                    tabindex: -1,\n                    onClick: () => (collapsed = !collapsed),\n                  },\n                )}\n              />\n            )}\n          </div>\n          <div\n            {...mergeAttrs<'div'>({ sx: splitterStyles.pane }, propsEnd, {\n              id: `${id}-end`,\n              hidden: hideEnd || undefined,\n            })}\n          >\n            {end}\n          </div>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Splitter.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vtp_untrack","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/layout/Splitter.tsx"],"sourcesContent":["/**\n * 分栏：两栏并排（或上下），中间的分隔条可以拖动调整比例，一侧可以收起。收件箱（左列表、右预览）、\n * 主从视图、编辑器与预览这类“两块都要看、比例因人而异”的布局。\n *\n *   <Splitter _size={listSize} collapsible=\"end\" _collapsed={previewHidden}\n *     start={<List />} end={<Preview />} />\n *\n * size 是起始一栏占的百分比（父级写 _bind 记住），拖动时夹在 minSize–maxSize 之间；双击分隔条回到初始比例。\n * 分隔条按 WAI-ARIA 的 Window Splitter 模式：role=\"separator\"、可聚焦，←/→（上下排列时 ↑/↓）每次调 5%，\n * Home / End 到最小 / 最大，Enter 收起或展开可收起的那一侧；从右到左排版下左右键自动镜像。\n * 写了 collapsible 时分隔条中间有收起、展开的小按钮；收起的一栏不显示（hidden），另一栏占满。\n * 两栏各自滚动：内容放在里面自己的滚动容器里（或直接用 ScrollArea）。\n */\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang } from '../config/context';\nimport { clamp } from '../utils/data/number';\nimport { inlineArrows, isRtl } from '../utils/dom/direction';\nimport { startMove } from '../utils/dom/move';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\n\n/** 两栏的排法 */\nexport interface SplitterOrientations {\n  /** 左右并排（默认） */\n  horizontal: unknown;\n  /** 上下排列 */\n  vertical: unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface SplitterProps extends PartProps<'div'> {\n  /** 起始一栏（左或上）的内容 */\n  start: VNodeChild;\n  /** 结束一栏（右或下）的内容 */\n  end: VNodeChild;\n  /**\n   * 两栏的排法\n   * @default 'horizontal'\n   */\n  orientation?: keyof SplitterOrientations;\n  /**\n   * 起始一栏占的百分比：父级写 _size={x} 记住拖动后的比例\n   * @default 50\n   */\n  _size?: number;\n  /**\n   * 起始一栏最少占多少（百分比）\n   * @default 20\n   */\n  minSize?: number;\n  /**\n   * 起始一栏最多占多少（百分比）\n   * @default 80\n   */\n  maxSize?: number;\n  /** 哪一侧可以收起；不写时不能收起 */\n  collapsible?: 'start' | 'end';\n  /** 可收起的那一侧收着：父级写 _collapsed={x} */\n  _collapsed?: boolean;\n  /** 分隔条的名称（读屏），默认取语言包（调整分栏） */\n  label?: string;\n  /** 外面一圈边框、圆角与表面色：独立成块（收件箱的列表与预览） */\n  bordered?: boolean;\n  /** 起始一栏（div）的部件属性 */\n  propsStart?: PartProps<'div'>;\n  /** 结束一栏（div）的部件属性 */\n  propsEnd?: PartProps<'div'>;\n  /** 分隔条（div，role=\"separator\"）的部件属性 */\n  propsHandle?: PartProps<'div'>;\n  /** 收起、展开按钮的部件属性 */\n  propsToggle?: Partial<IconButtonProps>;\n}\n\n/** 键盘每按一次调多少（百分比） */\nconst STEP = 5;\n\n/** Splitter 的样式：root、pane、handle、line、toggle… */\nexport const splitterStyles = css.create({\n  root: { display: 'grid', minWidth: 0, minHeight: 0, height: '100%' },\n  bordered: {\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_lg',\n    backgroundColor: '_surface',\n    overflow: 'hidden',\n  },\n  pane: { minWidth: 0, minHeight: 0, overflow: 'auto' },\n  // 分隔条：看得见的是中间一条细线，能拖的范围更宽；悬停、拖动时变成强调色\n  // 分隔条所在的格：分隔条铺满它，收起按钮叠在中间（不放进可聚焦的分隔条里：交互元素不能嵌套）\n  track: { position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' },\n  handle: {\n    position: 'absolute',\n    inset: 0,\n    touchAction: 'none',\n    outlineStyle: 'none',\n    color: { default: '_borderMuted', ':hover': '_borderStrong', ':focus-visible': '_accent' },\n  },\n  handleHorizontal: { width: '_space.md', cursor: 'col-resize' },\n  handleVertical: { height: '_space.md', cursor: 'row-resize' },\n  line: { position: 'absolute', backgroundColor: 'currentColor', pointerEvents: 'none' },\n  lineHorizontal: { insetBlock: 0, insetInlineStart: 'calc(50% - 0.5px)', width: '1px' },\n  lineVertical: { insetInline: 0, top: 'calc(50% - 0.5px)', height: '1px' },\n  // 收起、展开的小按钮压在线上：背景盖住线\n  toggle: { position: 'relative', zIndex: 1, backgroundColor: '_surface', cursor: 'pointer' },\n});\n\n/** Splitter 的动态样式：两栏与分隔条的轨道 */\nexport const splitterDynamicStyles = css.create({\n  columns: (template: string) => ({ gridTemplateColumns: template }),\n  rows: (template: string) => ({ gridTemplateRows: template }),\n});\n\n/** 分栏 */\nexport const Splitter = _component(\n  ({\n    start,\n    end,\n    orientation = 'horizontal',\n    _size: size = _bindable(50),\n    minSize = 20,\n    maxSize = 80,\n    collapsible,\n    _collapsed: collapsed = _bindable(false),\n    label,\n    bordered = false,\n    propsStart,\n    propsEnd,\n    propsHandle,\n    propsToggle,\n    ...rest\n  }: SplitterProps) => {\n    const lang = useLang();\n    const id = useId();\n    const initialSize = _untrack(size);\n    let root = _state.raw<HTMLElement | null>(null);\n    const horizontal = () => orientation === 'horizontal';\n    const fit = (value: number) => Math.round(clamp(value, minSize, maxSize) * 10) / 10;\n\n    function onPointerdown(event: PointerEvent) {\n      if (!root || (event.target as Element).closest('button')) return;\n      const rect = root.getBoundingClientRect();\n      const total = horizontal() ? rect.width : rect.height;\n      const from = size;\n      const sign = horizontal() && isRtl(root) ? -1 : 1;\n      event.preventDefault();\n      startMove(event, {\n        onMove: ({ deltaX, deltaY }) => {\n          const delta = (horizontal() ? deltaX * sign : deltaY) / total;\n          size = fit(from + delta * 100);\n          // 拖动即展开：收着的一侧被拖出来\n          if (collapsed) collapsed = false;\n        },\n      });\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      if (event.key === 'Enter' && collapsible) {\n        event.preventDefault();\n        collapsed = !collapsed;\n        return;\n      }\n      const { forward, backward } = horizontal()\n        ? inlineArrows(root ? isRtl(root) : false)\n        : { forward: 'ArrowDown', backward: 'ArrowUp' };\n      const next =\n        event.key === forward\n          ? size + STEP\n          : event.key === backward\n            ? size - STEP\n            : event.key === 'Home'\n              ? minSize\n              : event.key === 'End'\n                ? maxSize\n                : null;\n      if (next == null) return;\n      event.preventDefault();\n      size = fit(next);\n      if (collapsed) collapsed = false;\n    }\n\n    /** 收起、展开按钮的箭头：指向收起的方向 */\n    const toggleIcon = () => {\n      const towardStart = (collapsible === 'start') !== collapsed;\n      if (horizontal()) return towardStart ? ChevronLeft : ChevronRight;\n      return towardStart ? ChevronUp : ChevronDown;\n    };\n\n    return () => {\n      const hideStart = collapsed && collapsible === 'start';\n      const hideEnd = collapsed && collapsible === 'end';\n      const template = hideStart\n        ? '0 auto minmax(0, 1fr)'\n        : hideEnd\n          ? 'minmax(0, 1fr) auto 0'\n          : `minmax(0, ${size}fr) auto minmax(0, ${100 - size}fr)`;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                splitterStyles.root,\n                bordered && splitterStyles.bordered,\n                horizontal()\n                  ? splitterDynamicStyles.columns(template)\n                  : splitterDynamicStyles.rows(template),\n              ],\n            },\n            rest,\n            { ref: (element: unknown) => (root = element as HTMLElement | null) },\n          )}\n          data-orientation={orientation}\n          data-collapsed={collapsed ? collapsible : undefined}\n        >\n          <div\n            {...mergeAttrs<'div'>({ sx: splitterStyles.pane }, propsStart, {\n              id: `${id}-start`,\n              hidden: hideStart || undefined,\n            })}\n          >\n            {start}\n          </div>\n          <div\n            {...css.attrs(\n              splitterStyles.track,\n              horizontal() ? splitterStyles.handleHorizontal : splitterStyles.handleVertical,\n            )}\n          >\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    splitterStyles.handle,\n                    horizontal() ? splitterStyles.handleHorizontal : splitterStyles.handleVertical,\n                    focusRingStyles.visible,\n                  ],\n                },\n                propsHandle,\n                {\n                  role: 'separator',\n                  tabindex: 0,\n                  'aria-label': label ?? lang.splitterResize,\n                  'aria-orientation': horizontal() ? 'vertical' : 'horizontal',\n                  'aria-controls': `${id}-start`,\n                  'aria-valuenow': hideStart ? 0 : hideEnd ? 100 : size,\n                  'aria-valuemin': minSize,\n                  'aria-valuemax': maxSize,\n                  onPointerdown,\n                  onKeydown,\n                  onDblclick: () => (size = fit(initialSize)),\n                },\n              )}\n            >\n              <span\n                {...css.attrs(\n                  splitterStyles.line,\n                  horizontal() ? splitterStyles.lineHorizontal : splitterStyles.lineVertical,\n                )}\n              />\n            </div>\n            {collapsible && (\n              <IconButton\n                {...mergePartProps<IconButtonProps>(\n                  {\n                    icon: toggleIcon(),\n                    size: 'xs',\n                    variant: 'outline',\n                    tone: 'neutral',\n                    sx: splitterStyles.toggle,\n                    'aria-label': collapsed ? lang.splitterExpand : lang.splitterCollapse,\n                  },\n                  propsToggle,\n                  {\n                    'aria-expanded': !collapsed,\n                    'aria-controls': collapsible === 'start' ? `${id}-start` : `${id}-end`,\n                    // 键盘用户在分隔条上按 Enter：按钮不进 Tab 顺序，免得多停一次\n                    tabindex: -1,\n                    onClick: () => (collapsed = !collapsed),\n                  },\n                )}\n              />\n            )}\n          </div>\n          <div\n            {...mergeAttrs<'div'>({ sx: splitterStyles.pane }, propsEnd, {\n              id: `${id}-end`,\n              hidden: hideEnd || undefined,\n            })}\n          >\n            {end}\n          </div>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/layout/ViewportFill.d.ts

@@ -4,8 +4,8 @@ import type { Space } from '../utils/style/styles';
 /** 未声明的属性落到 Flex（div）上 */
 export interface ViewportFillProps extends Omit<FlexProps, 'direction'> {
     /**
-     * 离视口底边留多少（与外壳正文的内边距一致，分页不贴死在窗口边上）
-     * @default 'md'
+     * 离视口底边留多少（与外壳正文 AppShell main 的内边距一致：留得比它少，整页会多出一截滚动）
+     * @default 'xl'
      */
     bottom?: Space;
     /**

package/dist/layout/ViewportFill.js

@@ -3,8 +3,8 @@ import { useResizeObserver } from "../utils/dom/resize.js";
 import { toElement } from "../utils/dom/element.js";
 import { useEventListener } from "../utils/dom/event-listener.js";
 import { Flex } from "./Flex.js";
-import { createVNode, mergeProps, onMounted, ref, shallowRef } from "vue";
-import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, onMounted, ref, shallowRef } 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";
 //#region src/layout/ViewportFill.tsx
 /** 未声明的属性落到 Flex（div）上 */
@@ -18,7 +18,7 @@ var viewportFillDynamicStyles = css.create({ size: (top, bottom, min) => ({
 /** 占满到窗口底边 */
 var ViewportFill = /*#__PURE__*/ _component((_props, _ctx) => {
 	const _cache = [];
-	const bottom = readonlyProp(_props, "bottom", "md");
+	const bottom = readonlyProp(_props, "bottom", "xl");
 	const minHeight = readonlyProp(_props, "minHeight", "24rem");
 	const sx = readonlyProp(_props, "sx");
 	const rest = restProps(_props, _ctx, true);
@@ -32,7 +32,7 @@ var ViewportFill = /*#__PURE__*/ _component((_props, _ctx) => {
 	onMounted(measure);
 	useEventListener(() => window, "resize", measure);
 	useResizeObserver(() => element.value ? document.body : null, measure);
-	return () => createVNode(Flex, mergeProps(rest, {
+	return () => createVNode(Flex, mergeJsxProps(rest, {
 		"direction": "column",
 		"ref": _cache[0] || (_cache[0] = (value) => element.value = toElement(value)),
 		"sx": [

package/dist/layout/ViewportFill.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewportFill.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/layout/ViewportFill.tsx"],"sourcesContent":["/**\n * 占满到窗口底边：从自己的顶边一直到视口底边（留出 bottom 的间距），里面竖排。列表页让表格正好占满一屏、\n * 在表格里滚动，分页贴着窗口底边；收件箱的左右分栏占满剩下的高度。\n *\n *   <ViewportFill gap=\"md\">\n *     <Toolbar />\n *     <DataTable propsRoot={{ sx: fillStyles.grow }} />     表格 flexGrow 撑满剩下的\n *     <Pagination />\n *   </ViewportFill>\n *\n * 顶边的位置量出来（上面的页头、页签、查询栏换行变高都跟着变），不用手算“视口高度减顶栏减内边距”。\n * 窗口太矮时不小于 minHeight，整页滚动。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onMounted } from 'vue';\nimport { space } from '../config/theme/tokens';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { toElement } from '../utils/dom/element';\nimport { useEventListener } from '../utils/dom/event-listener';\nimport { Flex, type FlexProps } from './Flex';\nimport type { Space } from '../utils/style/styles';\n\n/** 未声明的属性落到 Flex（div）上 */\nexport interface ViewportFillProps extends Omit<FlexProps, 'direction'> {\n  /**\n   * 离视口底边留多少（与外壳正文的内边距一致，分页不贴死在窗口边上）\n   * @default 'md'\n   */\n  bottom?: Space;\n  /**\n   * 最小高度：窗口太矮时整页滚动\n   * @default '24rem'\n   */\n  minHeight?: string;\n}\n\n/** ViewportFill 的样式：root */\nexport const viewportFillStyles = css.create({\n  root: { minWidth: 0 },\n});\n\n/** ViewportFill 的动态样式：高度 */\nexport const viewportFillDynamicStyles = css.create({\n  size: (top: number, bottom: string, min: string) => ({\n    height: `calc(100dvh - ${top}px - ${bottom})`,\n    minHeight: min,\n  }),\n});\n\n/** 占满到窗口底边 */\nexport const ViewportFill = _component(\n  ({ bottom = 'md', minHeight = '24rem', sx, ...rest }: ViewportFillProps) => {\n    let element = _state.raw<HTMLElement | null>(null);\n    // 顶边在文档里的位置（不随滚动变）\n    let top = _state(0);\n    const measure = () => {\n      if (!element) return;\n      const next = Math.round(element.getBoundingClientRect().top + window.scrollY);\n      if (next !== top) top = next;\n    };\n    onMounted(measure);\n    useEventListener(() => window, 'resize', measure);\n    // 上面的内容变高（查询栏换行、提示出现）时文档的尺寸跟着变\n    useResizeObserver(() => (element ? document.body : null), measure);\n    return () => (\n      <Flex\n        {...rest}\n        direction=\"column\"\n        ref={(value: unknown) => (element = toElement(value))}\n        sx={[\n          viewportFillStyles.root,\n          viewportFillDynamicStyles.size(top, space[bottom], minHeight),\n          sx,\n        ]}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AAsCA,IAAa,qBAAqB,IAAI,OAAO,EAC3C,MAAM,EAAE,UAAU,EAAE,EACtB,CAAC;;AAGD,IAAa,4BAA4B,IAAI,OAAO,EAClD,OAAO,KAAa,QAAgB,SAAiB;CACnD,QAAQ,iBAAiB,IAAG,OAAQ,OAAM;CAC1C,WAAW;AACb,GACF,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SAA4E;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,UAAhE,IAAI;CAAA,MAAA,YAAAA,aAAA,QAAA,aAAc,OAAO;CAAA,MAAA,KAAAA,aAAA,QAAA,IAAA;CAAA,MAAS,OAAIC,UAAA,QAAA,MAAA,IAAA;CAChD,IAAI,UAAOC,WAAkC,IAAI;CAEjD,IAAI,MAAGC,IAAU,CAAC;CAClB,MAAM,gBAAgB;EACpB,IAAI,CAAA,QAAA,OAAU;EACd,MAAM,OAAO,KAAK,MAAM,QAAA,MAAQ,sBAAsB,CAAC,CAAC,MAAM,OAAO,OAAO;EAC5E,IAAI,SAAI,IAAA,OAAU,IAAA,QAAM;CAC1B;CACA,UAAU,OAAO;CACjB,uBAAuB,QAAQ,UAAU,OAAO;CAEhD,wBAAyB,QAAA,QAAU,SAAS,OAAO,MAAO,OAAO;CACjE,aAAOC,YAAA,MAAAC,WAEC,MAAI;EAAA,aAAA;EAAA,OAAA,OAAA,OAAA,OAAA,MAEF,UAAoB,QAAA,QAAU,UAAU,KAAK;EAAE,MACjD;GACF,mBAAmB;GAAI,IAAA,KACvB,0BAA0B,YAAI;IAAA,IAAA;IAAM,MAAK,OAAA;IAAQ,UAAA;GAAA,GAAA,IAAA;GAAA,GAAA;EAAA;CAElD,CAAA,GAAA,IAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"ViewportFill.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/layout/ViewportFill.tsx"],"sourcesContent":["/**\n * 占满到窗口底边：从自己的顶边一直到视口底边（留出 bottom 的间距），里面竖排。列表页让表格正好占满一屏、\n * 在表格里滚动，分页贴着窗口底边；收件箱的左右分栏占满剩下的高度。\n *\n *   <ViewportFill gap=\"md\">\n *     <Toolbar />\n *     <DataTable propsRoot={{ sx: fillStyles.grow }} />     表格 flexGrow 撑满剩下的\n *     <Pagination />\n *   </ViewportFill>\n *\n * 顶边的位置量出来（上面的页头、页签、查询栏换行变高都跟着变），不用手算“视口高度减顶栏减内边距”。\n * 窗口太矮时不小于 minHeight，整页滚动。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onMounted } from 'vue';\nimport { space } from '../config/theme/tokens';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { toElement } from '../utils/dom/element';\nimport { useEventListener } from '../utils/dom/event-listener';\nimport { Flex, type FlexProps } from './Flex';\nimport type { Space } from '../utils/style/styles';\n\n/** 未声明的属性落到 Flex（div）上 */\nexport interface ViewportFillProps extends Omit<FlexProps, 'direction'> {\n  /**\n   * 离视口底边留多少（与外壳正文 AppShell main 的内边距一致：留得比它少，整页会多出一截滚动）\n   * @default 'xl'\n   */\n  bottom?: Space;\n  /**\n   * 最小高度：窗口太矮时整页滚动\n   * @default '24rem'\n   */\n  minHeight?: string;\n}\n\n/** ViewportFill 的样式：root */\nexport const viewportFillStyles = css.create({\n  root: { minWidth: 0 },\n});\n\n/** ViewportFill 的动态样式：高度 */\nexport const viewportFillDynamicStyles = css.create({\n  size: (top: number, bottom: string, min: string) => ({\n    height: `calc(100dvh - ${top}px - ${bottom})`,\n    minHeight: min,\n  }),\n});\n\n/** 占满到窗口底边 */\nexport const ViewportFill = _component(\n  ({ bottom = 'xl', minHeight = '24rem', sx, ...rest }: ViewportFillProps) => {\n    let element = _state.raw<HTMLElement | null>(null);\n    // 顶边在文档里的位置（不随滚动变）\n    let top = _state(0);\n    const measure = () => {\n      if (!element) return;\n      const next = Math.round(element.getBoundingClientRect().top + window.scrollY);\n      if (next !== top) top = next;\n    };\n    onMounted(measure);\n    useEventListener(() => window, 'resize', measure);\n    // 上面的内容变高（查询栏换行、提示出现）时文档的尺寸跟着变\n    useResizeObserver(() => (element ? document.body : null), measure);\n    return () => (\n      <Flex\n        {...rest}\n        direction=\"column\"\n        ref={(value: unknown) => (element = toElement(value))}\n        sx={[\n          viewportFillStyles.root,\n          viewportFillDynamicStyles.size(top, space[bottom], minHeight),\n          sx,\n        ]}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AAsCA,IAAa,qBAAqB,IAAI,OAAO,EAC3C,MAAM,EAAE,UAAU,EAAE,EACtB,CAAC;;AAGD,IAAa,4BAA4B,IAAI,OAAO,EAClD,OAAO,KAAa,QAAgB,SAAiB;CACnD,QAAQ,iBAAiB,IAAG,OAAQ,OAAM;CAC1C,WAAW;AACb,GACF,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SAA4E;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,UAAhE,IAAI;CAAA,MAAA,YAAAA,aAAA,QAAA,aAAc,OAAO;CAAA,MAAA,KAAAA,aAAA,QAAA,IAAA;CAAA,MAAS,OAAIC,UAAA,QAAA,MAAA,IAAA;CAChD,IAAI,UAAOC,WAAkC,IAAI;CAEjD,IAAI,MAAGC,IAAU,CAAC;CAClB,MAAM,gBAAgB;EACpB,IAAI,CAAA,QAAA,OAAU;EACd,MAAM,OAAO,KAAK,MAAM,QAAA,MAAQ,sBAAsB,CAAC,CAAC,MAAM,OAAO,OAAO;EAC5E,IAAI,SAAI,IAAA,OAAU,IAAA,QAAM;CAC1B;CACA,UAAU,OAAO;CACjB,uBAAuB,QAAQ,UAAU,OAAO;CAEhD,wBAAyB,QAAA,QAAU,SAAS,OAAO,MAAO,OAAO;CACjE,aAAOC,YAAA,MAAAC,cAEC,MAAI;EAAA,aAAA;EAAA,OAAA,OAAA,OAAA,OAAA,MAEF,UAAoB,QAAA,QAAU,UAAU,KAAK;EAAE,MACjD;GACF,mBAAmB;GAAI,IAAA,KACvB,0BAA0B,YAAI;IAAA,IAAA;IAAM,MAAK,OAAA;IAAQ,UAAA;GAAA,GAAA,IAAA;GAAA,GAAA;EAAA;CAElD,CAAA,GAAA,IAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/navigation/Breadcrumbs.js

@@ -6,8 +6,8 @@ import { IconButton } from "../base/IconButton.js";
 import { Link } from "../base/Link.js";
 import { FlexOrderedList } from "../layout/Flex.js";
 import { Menu as Menu$1, MenuItem, MenuLinkItem } from "../overlay/Menu.js";
-import { createVNode, isVNode, mergeProps } from "vue";
-import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, isVNode } 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 { ChevronRight, Ellipsis } from "@lucide/icons";
 //#region src/navigation/Breadcrumbs.tsx
@@ -92,7 +92,7 @@ var Breadcrumbs = /*#__PURE__*/ _component((_props, _ctx) => {
 			gap: "xs",
 			sx: breadcrumbsStyles.list
 		}, propsList.value), _isSlot(_slot = shown.map((entry, position) => {
-			if (entry === "collapsed") return createVNode("li", mergeProps({ "key": "collapsed" }, mergeAttrs({ sx: breadcrumbsStyles.item }, propsCollapsedItem.value)), [createVNode(Menu$1, mergePartProps({
+			if (entry === "collapsed") return createVNode("li", mergeJsxProps({ "key": "collapsed" }, mergeAttrs({ sx: breadcrumbsStyles.item }, propsCollapsedItem.value)), [createVNode(Menu$1, mergePartProps({
 				lazy: false,
 				trigger: (props) => createVNode(IconButton, mergePartProps({
 					sx: breadcrumbsStyles.expand,
@@ -116,7 +116,7 @@ var Breadcrumbs = /*#__PURE__*/ _component((_props, _ctx) => {
 			const index = items.value.indexOf(entry);
 			const own = typeof propsItem.value === "function" ? propsItem.value(entry, index) : propsItem.value;
 			const label = createVNode("span", mergeAttrs({ sx: breadcrumbsStyles.label }, propsLabel.value), [entry.icon && createVNode(Icon, { "icon": entry.icon }, null), entry.label]);
-			return createVNode("li", mergeProps({ "key": entry.key ?? entry.href ?? index }, mergeAttrs({ sx: breadcrumbsStyles.item }, own)), [index === last ? createVNode("span", mergeAttrs({ sx: breadcrumbsStyles.current }, propsCurrent.value, { "aria-current": onNavigate.value ? "location" : "page" }), [label]) : entry.href != null ? createVNode(Link, mergePartProps({
+			return createVNode("li", mergeJsxProps({ "key": entry.key ?? entry.href ?? index }, mergeAttrs({ sx: breadcrumbsStyles.item }, own)), [index === last ? createVNode("span", mergeAttrs({ sx: breadcrumbsStyles.current }, propsCurrent.value, { "aria-current": onNavigate.value ? "location" : "page" }), [label]) : entry.href != null ? createVNode(Link, mergePartProps({
 				tone: "muted",
 				underline: "hover",
 				href: entry.href

package/dist/navigation/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","Menu"],"sources":["../../src/navigation/Breadcrumbs.tsx"],"sourcesContent":["/**\n * 面包屑（nav > ol）：当前页在站点层级里的位置。最后一项是当前页（aria-current=\"page\"，不是链接）。\n * 链接用 Link（站内链接经路由适配跳转），分隔符默认是 Lucide 的 ChevronRight，从右到左排版时翻转。\n *\n *   <Breadcrumbs items={[{ label: '首页', href: '/' }, { label: '订单', href: '/orders' }, { label: '#1024' }]} />\n *\n * 路径太长时用 maxItems 折叠中间部分：折叠处是一个菜单按钮，被折叠的各级在菜单里（链接菜单项），\n * 同 Radix Themes / shadcn 的做法；展开整条路径会把布局撑乱，菜单不会。\n *\n * 应用内的层级（文件夹、组织架构的下钻）没有地址：给 onNavigate 时没有 href 的各级是链接样式的按钮，\n * 点了交给它；当前一级标 aria-current=\"location\"（是“在哪一级”，不是“哪一页”）。\n *\n *   <Breadcrumbs items={path.map((dept) => ({ key: dept.id, label: dept.name }))} onNavigate={(_, index) => (path = path.slice(0, index + 1))} />\n */\nimport { ChevronRight, Ellipsis } 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 { VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { Icon, type IconData } from '../base/Icon';\nimport { Link, type LinkProps } from '../base/Link';\nimport { useLang } from '../config/context';\nimport { Menu, MenuItem, MenuLinkItem, type MenuProps } from '../overlay/Menu';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { FlexOrderedList, type FlexProps } from '../layout/Flex';\n\n/** 一级路径 */\nexport interface BreadcrumbItem {\n  /** 唯一的 key；不写时用 href，再没有时用位置 */\n  key?: string;\n  /** 显示的文字 */\n  label: VNodeChild;\n  /** 地址；最后一项（当前页）不需要 */\n  href?: string;\n  /** 文字前的图标 */\n  icon?: IconData;\n}\n\n/** 未声明的属性落到 nav 上；aria-label 默认取语言包（面包屑） */\nexport interface BreadcrumbsProps extends PartProps<'nav'> {\n  /** 路径，从根到当前页；最后一项是当前页 */\n  items: readonly BreadcrumbItem[];\n  /** 分隔符，默认是右向的 chevron 图标 */\n  separator?: VNodeChild;\n  /** 超过这么多项时折叠中间部分（保留第一项与最后两项），被折叠的各级放进菜单 */\n  maxItems?: number;\n  /** 列表（ol）的部件属性 */\n  propsList?: Partial<FlexProps<'ol'>>;\n  /** 每一项（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: BreadcrumbItem, index: number) => PartProps<'li'>);\n  /** 折叠处那一项（li，里面是折叠按钮与菜单）的部件属性 */\n  propsCollapsedItem?: PartProps<'li'>;\n  /** 链接的部件属性 */\n  propsLink?: Partial<LinkProps>;\n  /** 每一项文字（图标加文字）的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 当前页（最后一项）的部件属性 */\n  propsCurrent?: PartProps<'span'>;\n  /** 分隔符的部件属性 */\n  propsSeparator?: PartProps<'span'>;\n  /** 折叠按钮（菜单的触发器）的部件属性 */\n  propsExpand?: Partial<IconButtonProps>;\n  /** 被折叠各级的菜单的部件属性 */\n  propsMenu?: Partial<MenuProps>;\n  /** 应用内的层级导航：给了时没有 href 的各级是按钮，点了调用它（index 是在 items 里的位置） */\n  onNavigate?: (item: BreadcrumbItem, index: number) => void;\n}\n\n/** Breadcrumbs 的样式：list、item、current、separator、label、expand */\nexport const breadcrumbsStyles = css.create({\n  // 横排、换行、间距由 FlexOrderedList 给\n  list: { fontSize: '_sm' },\n  item: { display: 'inline-flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n  current: { color: '_text', fontWeight: '_medium' },\n  separator: { display: 'inline-flex', color: '_textMuted' },\n  label: { display: 'inline-flex', alignItems: 'center', gap: '_xs' },\n  expand: { width: '1.75em', minHeight: '1.75em' },\n});\n\n/** 面包屑：链接 + 分隔符，最后一项是当前页 */\nexport const Breadcrumbs = _component(\n  ({\n    items,\n    separator,\n    maxItems,\n    propsList,\n    propsItem,\n    propsCollapsedItem,\n    propsLink,\n    propsLabel,\n    propsCurrent,\n    propsSeparator,\n    propsExpand,\n    propsMenu,\n    onNavigate,\n    ...rest\n  }: BreadcrumbsProps) => {\n    const lang = useLang();\n\n    return () => {\n      const collapse = maxItems != null && items.length > maxItems;\n      // 折叠时保留第一项与最后两项，中间换成展开按钮\n      const shown: (BreadcrumbItem | 'collapsed')[] = collapse\n        ? [items[0]!, 'collapsed', ...items.slice(-2)]\n        : [...items];\n      const last = items.length - 1;\n      // 每处各生成一个节点：同一个 VNode 不能放在多个位置\n      const sep = () => (\n        <span\n          {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.separator }, propsSeparator, {\n            'aria-hidden': true,\n          })}\n        >\n          {separator ?? <Icon icon={ChevronRight} flipInRtl />}\n        </span>\n      );\n\n      return (\n        <nav {...mergeAttrs<'nav'>({ 'aria-label': lang.breadcrumbs }, rest)}>\n          <FlexOrderedList\n            {...mergePartProps<FlexProps<'ol'>>(\n              { wrap: true, align: 'center', gap: 'xs', sx: breadcrumbsStyles.list },\n              propsList,\n            )}\n          >\n            {shown.map((entry, position) => {\n              if (entry === 'collapsed') {\n                return (\n                  <li\n                    key=\"collapsed\"\n                    {...mergeAttrs<'li'>({ sx: breadcrumbsStyles.item }, propsCollapsedItem)}\n                  >\n                    <Menu\n                      {...mergePartProps<MenuProps>(\n                        {\n                          // 被折叠的各级链接一直在 DOM 里：页内搜索、爬虫找得到；一页只有一个，不必延迟\n                          lazy: false,\n                          trigger: (props) => (\n                            <IconButton\n                              {...mergePartProps<IconButtonProps>(\n                                {\n                                  sx: breadcrumbsStyles.expand,\n                                  size: 'sm',\n                                  icon: Ellipsis,\n                                  'aria-label': lang.breadcrumbsExpand,\n                                },\n                                propsExpand,\n                                props,\n                              )}\n                            />\n                          ),\n                        },\n                        propsMenu,\n                      )}\n                    >\n                      {items.slice(1, -2).map((hidden, offset) =>\n                        hidden.href != null ? (\n                          <MenuLinkItem key={offset} href={hidden.href} icon={hidden.icon}>\n                            {hidden.label}\n                          </MenuLinkItem>\n                        ) : (\n                          <MenuItem\n                            key={offset}\n                            icon={hidden.icon}\n                            disabled={!onNavigate}\n                            onAction={() => onNavigate?.(hidden, offset + 1)}\n                          >\n                            {hidden.label}\n                          </MenuItem>\n                        ),\n                      )}\n                    </Menu>\n                    {sep()}\n                  </li>\n                );\n              }\n              const index = items.indexOf(entry);\n              const own = typeof propsItem === 'function' ? propsItem(entry, index) : propsItem;\n              const label = (\n                <span {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.label }, propsLabel)}>\n                  {entry.icon && <Icon icon={entry.icon} />}\n                  {entry.label}\n                </span>\n              );\n              return (\n                <li\n                  key={entry.key ?? entry.href ?? index}\n                  {...mergeAttrs<'li'>({ sx: breadcrumbsStyles.item }, own)}\n                >\n                  {index === last ? (\n                    <span\n                      {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.current }, propsCurrent, {\n                        'aria-current': onNavigate ? 'location' : 'page',\n                      })}\n                    >\n                      {label}\n                    </span>\n                  ) : entry.href != null ? (\n                    <Link\n                      {...mergePartProps<LinkProps>(\n                        { tone: 'muted', underline: 'hover', href: entry.href },\n                        propsLink,\n                      )}\n                    >\n                      {label}\n                    </Link>\n                  ) : onNavigate ? (\n                    <Button variant=\"link\" onClick={() => onNavigate(entry, index)}>\n                      {label}\n                    </Button>\n                  ) : (\n                    label\n                  )}\n                  {position < shown.length - 1 && sep()}\n                </li>\n              );\n            })}\n          </FlexOrderedList>\n        </nav>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","Menu"],"sources":["../../src/navigation/Breadcrumbs.tsx"],"sourcesContent":["/**\n * 面包屑（nav > ol）：当前页在站点层级里的位置。最后一项是当前页（aria-current=\"page\"，不是链接）。\n * 链接用 Link（站内链接经路由适配跳转），分隔符默认是 Lucide 的 ChevronRight，从右到左排版时翻转。\n *\n *   <Breadcrumbs items={[{ label: '首页', href: '/' }, { label: '订单', href: '/orders' }, { label: '#1024' }]} />\n *\n * 路径太长时用 maxItems 折叠中间部分：折叠处是一个菜单按钮，被折叠的各级在菜单里（链接菜单项），\n * 同 Radix Themes / shadcn 的做法；展开整条路径会把布局撑乱，菜单不会。\n *\n * 应用内的层级（文件夹、组织架构的下钻）没有地址：给 onNavigate 时没有 href 的各级是链接样式的按钮，\n * 点了交给它；当前一级标 aria-current=\"location\"（是“在哪一级”，不是“哪一页”）。\n *\n *   <Breadcrumbs items={path.map((dept) => ({ key: dept.id, label: dept.name }))} onNavigate={(_, index) => (path = path.slice(0, index + 1))} />\n */\nimport { ChevronRight, Ellipsis } 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 { VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { Icon, type IconData } from '../base/Icon';\nimport { Link, type LinkProps } from '../base/Link';\nimport { useLang } from '../config/context';\nimport { Menu, MenuItem, MenuLinkItem, type MenuProps } from '../overlay/Menu';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { FlexOrderedList, type FlexProps } from '../layout/Flex';\n\n/** 一级路径 */\nexport interface BreadcrumbItem {\n  /** 唯一的 key；不写时用 href，再没有时用位置 */\n  key?: string;\n  /** 显示的文字 */\n  label: VNodeChild;\n  /** 地址；最后一项（当前页）不需要 */\n  href?: string;\n  /** 文字前的图标 */\n  icon?: IconData;\n}\n\n/** 未声明的属性落到 nav 上；aria-label 默认取语言包（面包屑） */\nexport interface BreadcrumbsProps extends PartProps<'nav'> {\n  /** 路径，从根到当前页；最后一项是当前页 */\n  items: readonly BreadcrumbItem[];\n  /** 分隔符，默认是右向的 chevron 图标 */\n  separator?: VNodeChild;\n  /** 超过这么多项时折叠中间部分（保留第一项与最后两项），被折叠的各级放进菜单 */\n  maxItems?: number;\n  /** 列表（ol）的部件属性 */\n  propsList?: Partial<FlexProps<'ol'>>;\n  /** 每一项（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: BreadcrumbItem, index: number) => PartProps<'li'>);\n  /** 折叠处那一项（li，里面是折叠按钮与菜单）的部件属性 */\n  propsCollapsedItem?: PartProps<'li'>;\n  /** 链接的部件属性 */\n  propsLink?: Partial<LinkProps>;\n  /** 每一项文字（图标加文字）的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 当前页（最后一项）的部件属性 */\n  propsCurrent?: PartProps<'span'>;\n  /** 分隔符的部件属性 */\n  propsSeparator?: PartProps<'span'>;\n  /** 折叠按钮（菜单的触发器）的部件属性 */\n  propsExpand?: Partial<IconButtonProps>;\n  /** 被折叠各级的菜单的部件属性 */\n  propsMenu?: Partial<MenuProps>;\n  /** 应用内的层级导航：给了时没有 href 的各级是按钮，点了调用它（index 是在 items 里的位置） */\n  onNavigate?: (item: BreadcrumbItem, index: number) => void;\n}\n\n/** Breadcrumbs 的样式：list、item、current、separator、label、expand */\nexport const breadcrumbsStyles = css.create({\n  // 横排、换行、间距由 FlexOrderedList 给\n  list: { fontSize: '_sm' },\n  item: { display: 'inline-flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n  current: { color: '_text', fontWeight: '_medium' },\n  separator: { display: 'inline-flex', color: '_textMuted' },\n  label: { display: 'inline-flex', alignItems: 'center', gap: '_xs' },\n  expand: { width: '1.75em', minHeight: '1.75em' },\n});\n\n/** 面包屑：链接 + 分隔符，最后一项是当前页 */\nexport const Breadcrumbs = _component(\n  ({\n    items,\n    separator,\n    maxItems,\n    propsList,\n    propsItem,\n    propsCollapsedItem,\n    propsLink,\n    propsLabel,\n    propsCurrent,\n    propsSeparator,\n    propsExpand,\n    propsMenu,\n    onNavigate,\n    ...rest\n  }: BreadcrumbsProps) => {\n    const lang = useLang();\n\n    return () => {\n      const collapse = maxItems != null && items.length > maxItems;\n      // 折叠时保留第一项与最后两项，中间换成展开按钮\n      const shown: (BreadcrumbItem | 'collapsed')[] = collapse\n        ? [items[0]!, 'collapsed', ...items.slice(-2)]\n        : [...items];\n      const last = items.length - 1;\n      // 每处各生成一个节点：同一个 VNode 不能放在多个位置\n      const sep = () => (\n        <span\n          {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.separator }, propsSeparator, {\n            'aria-hidden': true,\n          })}\n        >\n          {separator ?? <Icon icon={ChevronRight} flipInRtl />}\n        </span>\n      );\n\n      return (\n        <nav {...mergeAttrs<'nav'>({ 'aria-label': lang.breadcrumbs }, rest)}>\n          <FlexOrderedList\n            {...mergePartProps<FlexProps<'ol'>>(\n              { wrap: true, align: 'center', gap: 'xs', sx: breadcrumbsStyles.list },\n              propsList,\n            )}\n          >\n            {shown.map((entry, position) => {\n              if (entry === 'collapsed') {\n                return (\n                  <li\n                    key=\"collapsed\"\n                    {...mergeAttrs<'li'>({ sx: breadcrumbsStyles.item }, propsCollapsedItem)}\n                  >\n                    <Menu\n                      {...mergePartProps<MenuProps>(\n                        {\n                          // 被折叠的各级链接一直在 DOM 里：页内搜索、爬虫找得到；一页只有一个，不必延迟\n                          lazy: false,\n                          trigger: (props) => (\n                            <IconButton\n                              {...mergePartProps<IconButtonProps>(\n                                {\n                                  sx: breadcrumbsStyles.expand,\n                                  size: 'sm',\n                                  icon: Ellipsis,\n                                  'aria-label': lang.breadcrumbsExpand,\n                                },\n                                propsExpand,\n                                props,\n                              )}\n                            />\n                          ),\n                        },\n                        propsMenu,\n                      )}\n                    >\n                      {items.slice(1, -2).map((hidden, offset) =>\n                        hidden.href != null ? (\n                          <MenuLinkItem key={offset} href={hidden.href} icon={hidden.icon}>\n                            {hidden.label}\n                          </MenuLinkItem>\n                        ) : (\n                          <MenuItem\n                            key={offset}\n                            icon={hidden.icon}\n                            disabled={!onNavigate}\n                            onAction={() => onNavigate?.(hidden, offset + 1)}\n                          >\n                            {hidden.label}\n                          </MenuItem>\n                        ),\n                      )}\n                    </Menu>\n                    {sep()}\n                  </li>\n                );\n              }\n              const index = items.indexOf(entry);\n              const own = typeof propsItem === 'function' ? propsItem(entry, index) : propsItem;\n              const label = (\n                <span {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.label }, propsLabel)}>\n                  {entry.icon && <Icon icon={entry.icon} />}\n                  {entry.label}\n                </span>\n              );\n              return (\n                <li\n                  key={entry.key ?? entry.href ?? index}\n                  {...mergeAttrs<'li'>({ sx: breadcrumbsStyles.item }, own)}\n                >\n                  {index === last ? (\n                    <span\n                      {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.current }, propsCurrent, {\n                        'aria-current': onNavigate ? 'location' : 'page',\n                      })}\n                    >\n                      {label}\n                    </span>\n                  ) : entry.href != null ? (\n                    <Link\n                      {...mergePartProps<LinkProps>(\n                        { tone: 'muted', underline: 'hover', href: entry.href },\n                        propsLink,\n                      )}\n                    >\n                      {label}\n                    </Link>\n                  ) : onNavigate ? (\n                    <Button variant=\"link\" onClick={() => onNavigate(entry, index)}>\n                      {label}\n                    </Button>\n                  ) : (\n                    label\n                  )}\n                  {position < shown.length - 1 && sep()}\n                </li>\n              );\n            })}\n          </FlexOrderedList>\n        </nav>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/navigation/NavBar.js

@@ -8,8 +8,8 @@ import { ButtonBase } from "../base/ButtonBase.js";
 import { useRouterLink } from "../utils/dom/link.js";
 import { Menu as Menu$1, MenuGroup, MenuLinkItem } from "../overlay/Menu.js";
 import { useOverflowItems } from "../utils/dom/overflow.js";
-import { createVNode, isVNode, mergeProps, shallowRef } from "vue";
-import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, isVNode, shallowRef } 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 { ChevronDown, Ellipsis } from "@lucide/icons";
 //#region src/navigation/NavBar.tsx
@@ -131,13 +131,13 @@ var NavBar = /*#__PURE__*/ _component((_props, _ctx) => {
 		];
 		if (item.children?.length) {
 			let _slot;
-			return createVNode(Menu$1, { "trigger": (props) => createVNode(ButtonBase, mergeProps(props, {
+			return createVNode(Menu$1, { "trigger": (props) => createVNode(ButtonBase, mergeJsxProps(props, {
 				"sx": sx,
 				"disabled": item.disabled,
 				"data-state": current ? "active" : "inactive"
 			}), { default: () => [content, createVNode(Icon, { "icon": ChevronDown }, null)] }) }, _isSlot(_slot = menuLinks(item.children)) ? _slot : { default: () => [_slot] });
 		}
-		return createVNode("a", mergeProps(css.attrs(...sx), {
+		return createVNode("a", mergeJsxProps(css.attrs(...sx), {
 			"href": item.disabled || item.href == null ? void 0 : router.href(item.href),
 			"aria-current": current ? "page" : void 0,
 			"aria-disabled": item.disabled || void 0,
@@ -152,7 +152,7 @@ var NavBar = /*#__PURE__*/ _component((_props, _ctx) => {
 		const current = hidden.some((item) => hasActive(item, router.isActive));
 		return createVNode(Menu$1, {
 			"placement": "bottom-end",
-			"trigger": (props) => createVNode(ButtonBase, mergeProps(props, {
+			"trigger": (props) => createVNode(ButtonBase, mergeJsxProps(props, {
 				"sx": [
 					navBarStyles.link,
 					focusRingStyles.visible,
@@ -171,7 +171,7 @@ var NavBar = /*#__PURE__*/ _component((_props, _ctx) => {
 			}, _isSlot(_slot2 = menuLinks(item.children)) ? _slot2 : { default: () => [_slot2] }) : menuLinks([item]);
 		})) ? _slot3 : { default: () => [_slot3] });
 	}
-	return () => createVNode("nav", mergeAttrs({}, rest), [createVNode("ul", mergeAttrs({ sx: navBarStyles.list }, propsList.value, { ref: list }), [items.value.map((item, index) => createVNode("li", mergeProps({ "key": item.href ?? item.label }, css.attrs(navBarStyles.item), overflow.itemProps(index)), [renderItem(item)])), createVNode("li", mergeProps(css.attrs(navBarStyles.item), overflow.restProps()), [renderMore()])])]);
+	return () => createVNode("nav", mergeAttrs({}, rest), [createVNode("ul", mergeAttrs({ sx: navBarStyles.list }, propsList.value, { ref: list }), [items.value.map((item, index) => createVNode("li", mergeJsxProps({ "key": item.href ?? item.label }, css.attrs(navBarStyles.item), overflow.itemProps(index)), [renderItem(item)])), createVNode("li", mergeJsxProps(css.attrs(navBarStyles.item), overflow.restProps()), [renderMore()])])]);
 }, {
 	name: "NavBar",
 	props: ["items", "propsList"]

package/dist/navigation/NavBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","Menu","_mergeProps"],"sources":["../../src/navigation/NavBar.tsx"],"sourcesContent":["/**\n * 横向导航（顶部菜单）：一行链接，有子项的是下拉菜单；放不下时后面的收进“更多”菜单。后台的顶栏、门户的主导航。\n * 参考 Ant Design Menu 的 horizontal 模式（溢出收进“…”）。侧边的多级导航用 NavList。\n *\n *   <NavBar\n *     items={[\n *       { label: '工作台', href: '/' },\n *       { label: '采购', children: [{ label: '采购单', href: '/po' }, { label: '供应商', href: '/suppliers' }] },\n *       { label: '报表', href: '/reports', badge: 3 },\n *     ]}\n *     aria-label=\"主导航\"\n *   />\n *\n * - 当前页按路由适配的 isActive 判断（同 NavList），链接带 aria-current=\"page\" 与下划线；子项是当前页时它的菜单按钮也高亮。\n * - 下拉菜单是 Menu（↑↓ 移动、Esc 关闭回到按钮），菜单项是链接（MenuLinkItem）。\n * - 放不下：useOverflowItems 量出前几项，其余收进“更多”（菜单里有子项的项按分组列出）；藏起来的项不占位、读屏与 Tab 跳过。\n *\n * 部件：Root（nav）、List（ul）、Item（li）、Link（a）、Trigger（有子项时的按钮）、More（“更多”按钮）。\n */\nimport { ChevronDown, Ellipsis } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Badge } from '../base/Badge';\nimport { ButtonBase } from '../base/ButtonBase';\nimport { Icon, type IconData } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { Menu, MenuGroup, MenuLinkItem } from '../overlay/Menu';\nimport { useRouterLink } from '../utils/dom/link';\nimport { useOverflowItems } from '../utils/dom/overflow';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 横向导航的一项：有 href 是链接，有 children 是下拉菜单（一层） */\nexport interface NavBarItem {\n  /** 文字 */\n  label: string;\n  /** 链接地址 */\n  href?: string;\n  /** 文字前的图标 */\n  icon?: IconData;\n  /** 下拉菜单里的子项 */\n  children?: readonly NavBarItem[];\n  /** 计数角标（待办、未读），0 不显示 */\n  badge?: number;\n  /** 不可用 */\n  disabled?: boolean;\n}\n\n/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */\nexport interface NavBarProps extends PartProps<'nav'> {\n  /** 各项 */\n  items: readonly NavBarItem[];\n  /** 列表（ul）的部件属性 */\n  propsList?: PartProps<'ul'>;\n}\n\n/** NavBar 的样式：list、item、link、current、badge、more */\nexport const navBarStyles = css.create({\n  // 一行：放不下的项由 useOverflowItems 移出排版（容器要 position: relative，间距用 column-gap）\n  list: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'stretch',\n    columnGap: '_xs',\n    minWidth: 0,\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  item: { display: 'flex', flexShrink: 0 },\n  link: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_xs',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    paddingInline: '_md',\n    borderRadius: '_md',\n    color: { default: '_textMuted', ':hover': '_text' },\n    fontWeight: '_medium',\n    whiteSpace: 'nowrap',\n    textDecoration: 'none',\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n    // 当前页的下划线画在底边（与 Tabs 的下划线同色）\n    boxShadow: 'none',\n    transition: `color ${t.durations.sm} ${t.easings.standard}, background-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  current: {\n    color: { default: '_accentText', ':hover': '_accentText' },\n    boxShadow: `inset 0 calc(-1 * ${t.borderWidths.sm}) 0 ${t.colors.accent}`,\n    borderEndStartRadius: 0,\n    borderEndEndRadius: 0,\n  },\n  disabled: { opacity: '_disabled', pointerEvents: 'none' },\n});\n\n/** 子项里有没有当前页 */\nconst hasActive = (item: NavBarItem, isActive: (href: string) => boolean): boolean =>\n  (item.href != null && isActive(item.href)) ||\n  (item.children ?? []).some((child) => hasActive(child, isActive));\n\n/** 横向导航：一行链接与下拉菜单，放不下的收进“更多” */\nexport const NavBar = _component(({ items, propsList, ...rest }: NavBarProps) => {\n  const lang = useLang();\n  const router = useRouterLink();\n  let list = _state.raw<HTMLElement | null>(null);\n  const overflow = useOverflowItems({ container: () => list, count: () => items.length });\n\n  const badge = (count = 0) =>\n    count > 0 && (\n      <Badge size=\"xs\" variant=\"solid\" tone=\"danger\" radius=\"full\">\n        {count > 99 ? '99+' : count}\n      </Badge>\n    );\n\n  /** 菜单里的链接（下拉菜单、“更多”菜单共用） */\n  const menuLinks = (children: readonly NavBarItem[]) =>\n    children.map((child) => (\n      <MenuLinkItem\n        key={child.href ?? child.label}\n        href={child.href ?? ''}\n        icon={child.icon}\n        disabled={child.disabled}\n        aria-current={child.href && router.isActive(child.href) ? 'page' : undefined}\n      >\n        {child.label}\n      </MenuLinkItem>\n    ));\n\n  function renderItem(item: NavBarItem) {\n    const current = hasActive(item, router.isActive);\n    const sx = [\n      navBarStyles.link,\n      focusRingStyles.visible,\n      current && navBarStyles.current,\n      item.disabled && navBarStyles.disabled,\n    ];\n    const content = [item.icon && <Icon icon={item.icon} />, item.label, badge(item.badge)];\n    if (item.children?.length) {\n      return (\n        <Menu\n          trigger={(props) => (\n            <ButtonBase\n              {...props}\n              sx={sx}\n              disabled={item.disabled}\n              data-state={current ? 'active' : 'inactive'}\n            >\n              {content}\n              <Icon icon={ChevronDown} />\n            </ButtonBase>\n          )}\n        >\n          {menuLinks(item.children)}\n        </Menu>\n      );\n    }\n    return (\n      <a\n        {...css.attrs(...sx)}\n        href={item.disabled || item.href == null ? undefined : router.href(item.href)}\n        aria-current={current ? 'page' : undefined}\n        aria-disabled={item.disabled || undefined}\n        data-state={current ? 'active' : 'inactive'}\n        onClick={(event: MouseEvent) => item.href && router.onClick(event, item.href)}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  /** “更多”菜单：收起来的各项，有子项的按分组列出 */\n  function renderMore() {\n    const hidden = items.slice(overflow.visible);\n    const current = hidden.some((item) => hasActive(item, router.isActive));\n    return (\n      <Menu\n        placement=\"bottom-end\"\n        trigger={(props) => (\n          <ButtonBase\n            {...props}\n            sx={[navBarStyles.link, focusRingStyles.visible, current && navBarStyles.current]}\n            aria-label={lang.navBarMore}\n          >\n            <Icon icon={Ellipsis} />\n          </ButtonBase>\n        )}\n      >\n        {hidden.map((item) =>\n          item.children?.length ? (\n            <MenuGroup key={item.label} label={item.label}>\n              {menuLinks(item.children)}\n            </MenuGroup>\n          ) : (\n            menuLinks([item])\n          ),\n        )}\n      </Menu>\n    );\n  }\n\n  return () => (\n    <nav {...mergeAttrs<'nav'>({}, rest)}>\n      <ul {...mergeAttrs<'ul'>({ sx: navBarStyles.list }, propsList, { ref: _toRef(list) })}>\n        {items.map((item, index) => (\n          <li\n            key={item.href ?? item.label}\n            {...css.attrs(navBarStyles.item)}\n            {...overflow.itemProps(index)}\n          >\n            {renderItem(item)}\n          </li>\n        ))}\n        <li {...css.attrs(navBarStyles.item)} {...overflow.restProps()}>\n          {renderMore()}\n        </li>\n      </ul>\n    </nav>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"NavBar.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","Menu","_mergeProps"],"sources":["../../src/navigation/NavBar.tsx"],"sourcesContent":["/**\n * 横向导航（顶部菜单）：一行链接，有子项的是下拉菜单；放不下时后面的收进“更多”菜单。后台的顶栏、门户的主导航。\n * 参考 Ant Design Menu 的 horizontal 模式（溢出收进“…”）。侧边的多级导航用 NavList。\n *\n *   <NavBar\n *     items={[\n *       { label: '工作台', href: '/' },\n *       { label: '采购', children: [{ label: '采购单', href: '/po' }, { label: '供应商', href: '/suppliers' }] },\n *       { label: '报表', href: '/reports', badge: 3 },\n *     ]}\n *     aria-label=\"主导航\"\n *   />\n *\n * - 当前页按路由适配的 isActive 判断（同 NavList），链接带 aria-current=\"page\" 与下划线；子项是当前页时它的菜单按钮也高亮。\n * - 下拉菜单是 Menu（↑↓ 移动、Esc 关闭回到按钮），菜单项是链接（MenuLinkItem）。\n * - 放不下：useOverflowItems 量出前几项，其余收进“更多”（菜单里有子项的项按分组列出）；藏起来的项不占位、读屏与 Tab 跳过。\n *\n * 部件：Root（nav）、List（ul）、Item（li）、Link（a）、Trigger（有子项时的按钮）、More（“更多”按钮）。\n */\nimport { ChevronDown, Ellipsis } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Badge } from '../base/Badge';\nimport { ButtonBase } from '../base/ButtonBase';\nimport { Icon, type IconData } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { Menu, MenuGroup, MenuLinkItem } from '../overlay/Menu';\nimport { useRouterLink } from '../utils/dom/link';\nimport { useOverflowItems } from '../utils/dom/overflow';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 横向导航的一项：有 href 是链接，有 children 是下拉菜单（一层） */\nexport interface NavBarItem {\n  /** 文字 */\n  label: string;\n  /** 链接地址 */\n  href?: string;\n  /** 文字前的图标 */\n  icon?: IconData;\n  /** 下拉菜单里的子项 */\n  children?: readonly NavBarItem[];\n  /** 计数角标（待办、未读），0 不显示 */\n  badge?: number;\n  /** 不可用 */\n  disabled?: boolean;\n}\n\n/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */\nexport interface NavBarProps extends PartProps<'nav'> {\n  /** 各项 */\n  items: readonly NavBarItem[];\n  /** 列表（ul）的部件属性 */\n  propsList?: PartProps<'ul'>;\n}\n\n/** NavBar 的样式：list、item、link、current、badge、more */\nexport const navBarStyles = css.create({\n  // 一行：放不下的项由 useOverflowItems 移出排版（容器要 position: relative，间距用 column-gap）\n  list: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'stretch',\n    columnGap: '_xs',\n    minWidth: 0,\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  item: { display: 'flex', flexShrink: 0 },\n  link: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_xs',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    paddingInline: '_md',\n    borderRadius: '_md',\n    color: { default: '_textMuted', ':hover': '_text' },\n    fontWeight: '_medium',\n    whiteSpace: 'nowrap',\n    textDecoration: 'none',\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n    // 当前页的下划线画在底边（与 Tabs 的下划线同色）\n    boxShadow: 'none',\n    transition: `color ${t.durations.sm} ${t.easings.standard}, background-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  current: {\n    color: { default: '_accentText', ':hover': '_accentText' },\n    boxShadow: `inset 0 calc(-1 * ${t.borderWidths.sm}) 0 ${t.colors.accent}`,\n    borderEndStartRadius: 0,\n    borderEndEndRadius: 0,\n  },\n  disabled: { opacity: '_disabled', pointerEvents: 'none' },\n});\n\n/** 子项里有没有当前页 */\nconst hasActive = (item: NavBarItem, isActive: (href: string) => boolean): boolean =>\n  (item.href != null && isActive(item.href)) ||\n  (item.children ?? []).some((child) => hasActive(child, isActive));\n\n/** 横向导航：一行链接与下拉菜单，放不下的收进“更多” */\nexport const NavBar = _component(({ items, propsList, ...rest }: NavBarProps) => {\n  const lang = useLang();\n  const router = useRouterLink();\n  let list = _state.raw<HTMLElement | null>(null);\n  const overflow = useOverflowItems({ container: () => list, count: () => items.length });\n\n  const badge = (count = 0) =>\n    count > 0 && (\n      <Badge size=\"xs\" variant=\"solid\" tone=\"danger\" radius=\"full\">\n        {count > 99 ? '99+' : count}\n      </Badge>\n    );\n\n  /** 菜单里的链接（下拉菜单、“更多”菜单共用） */\n  const menuLinks = (children: readonly NavBarItem[]) =>\n    children.map((child) => (\n      <MenuLinkItem\n        key={child.href ?? child.label}\n        href={child.href ?? ''}\n        icon={child.icon}\n        disabled={child.disabled}\n        aria-current={child.href && router.isActive(child.href) ? 'page' : undefined}\n      >\n        {child.label}\n      </MenuLinkItem>\n    ));\n\n  function renderItem(item: NavBarItem) {\n    const current = hasActive(item, router.isActive);\n    const sx = [\n      navBarStyles.link,\n      focusRingStyles.visible,\n      current && navBarStyles.current,\n      item.disabled && navBarStyles.disabled,\n    ];\n    const content = [item.icon && <Icon icon={item.icon} />, item.label, badge(item.badge)];\n    if (item.children?.length) {\n      return (\n        <Menu\n          trigger={(props) => (\n            <ButtonBase\n              {...props}\n              sx={sx}\n              disabled={item.disabled}\n              data-state={current ? 'active' : 'inactive'}\n            >\n              {content}\n              <Icon icon={ChevronDown} />\n            </ButtonBase>\n          )}\n        >\n          {menuLinks(item.children)}\n        </Menu>\n      );\n    }\n    return (\n      <a\n        {...css.attrs(...sx)}\n        href={item.disabled || item.href == null ? undefined : router.href(item.href)}\n        aria-current={current ? 'page' : undefined}\n        aria-disabled={item.disabled || undefined}\n        data-state={current ? 'active' : 'inactive'}\n        onClick={(event: MouseEvent) => item.href && router.onClick(event, item.href)}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  /** “更多”菜单：收起来的各项，有子项的按分组列出 */\n  function renderMore() {\n    const hidden = items.slice(overflow.visible);\n    const current = hidden.some((item) => hasActive(item, router.isActive));\n    return (\n      <Menu\n        placement=\"bottom-end\"\n        trigger={(props) => (\n          <ButtonBase\n            {...props}\n            sx={[navBarStyles.link, focusRingStyles.visible, current && navBarStyles.current]}\n            aria-label={lang.navBarMore}\n          >\n            <Icon icon={Ellipsis} />\n          </ButtonBase>\n        )}\n      >\n        {hidden.map((item) =>\n          item.children?.length ? (\n            <MenuGroup key={item.label} label={item.label}>\n              {menuLinks(item.children)}\n            </MenuGroup>\n          ) : (\n            menuLinks([item])\n          ),\n        )}\n      </Menu>\n    );\n  }\n\n  return () => (\n    <nav {...mergeAttrs<'nav'>({}, rest)}>\n      <ul {...mergeAttrs<'ul'>({ sx: navBarStyles.list }, propsList, { ref: _toRef(list) })}>\n        {items.map((item, index) => (\n          <li\n            key={item.href ?? item.label}\n            {...css.attrs(navBarStyles.item)}\n            {...overflow.itemProps(index)}\n          >\n            {renderItem(item)}\n          </li>\n        ))}\n        <li {...css.attrs(navBarStyles.item)} {...overflow.restProps()}>\n          {renderMore()}\n        </li>\n      </ul>\n    </nav>\n  );\n});\n"],"mappings":"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"}

package/dist/navigation/NavList.d.ts

@@ -30,6 +30,7 @@ export declare const navListStyles: Readonly<{
     section: css.CompiledStyles;
     sectionIcon: css.CompiledStyles;
     sectionLabel: css.CompiledStyles;
+    sectionText: css.CompiledStyles;
 }>;
 /** 未声明的属性落到 nav 上；aria-label 是导航的名称 */
 export interface NavListProps extends PartProps<'nav'> {

package/dist/navigation/NavList.js

@@ -14,8 +14,8 @@ import { Collapsible } from "../display/Collapsible.js";
 import { Tooltip } from "../overlay/Tooltip.js";
 import { itemStyles } from "../utils/style/item-styles.js";
 import { HoverCard } from "../overlay/HoverCard.js";
-import { Fragment, computed, createVNode, isVNode, mergeProps, onBeforeUnmount, ref, useId, watch } from "vue";
-import { _component, bindable, childrenProp, childrenStable, createContext, forwardChildren, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Fragment, computed, createVNode, isVNode, onBeforeUnmount, ref, useId, watch } from "vue";
+import { _component, bindable, childrenProp, childrenStable, createContext, forwardChildren, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ChevronRight } from "@lucide/icons";
 //#region src/navigation/NavList.tsx
@@ -72,17 +72,25 @@ var navListStyles = css.create({
 	disabled: { pointerEvents: "none" },
 	chevron: { transition: `transform ${t.durations.md} ${t.easings.standard}` },
 	chevronOpen: { transform: "rotate(90deg)" },
-	section: { marginBlockStart: {
-		default: "_lg",
-		":first-child": 0
-	} },
+	section: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_xs",
+		marginBlockStart: {
+			default: "_lg",
+			":first-child": 0
+		},
+		breakInside: "avoid"
+	},
 	sectionLabel: {
 		display: "flex",
 		alignItems: "center",
 		gap: "_sm",
 		paddingBlock: "_xs",
 		paddingInline: "_md",
-		color: "_text",
+		color: "_text"
+	},
+	sectionText: {
 		fontSize: "_sm",
 		fontWeight: "_semibold",
 		letterSpacing: "_wide"
@@ -121,7 +129,7 @@ var NavList = /*#__PURE__*/ _component((_props, _ctx) => {
 	NavCompactContext.provide(isCompact);
 	return () => {
 		let _slot;
-		return createVNode("nav", mergeProps(mergeAttrs({}, rest), { "data-compact": isCompact() || void 0 }), [createVNode(FlexList, mergePartProps({
+		return createVNode("nav", mergeJsxProps(mergeAttrs({}, rest), { "data-compact": isCompact() || void 0 }), [createVNode(FlexList, mergePartProps({
 			direction: "column",
 			gap: "xs"
 		}, propsList.value), _isSlot(_slot = forwardChildren(_props)) ? _slot : { default: () => [_slot] })]);
@@ -159,7 +167,7 @@ var NavItem = /*#__PURE__*/ _component((_props2, _ctx2) => {
 		onBeforeUnmount(() => group.report(id, false));
 	}
 	const iconOnly = () => compact() && icon.value != null;
-	const link = (tooltip) => createVNode("a", mergeProps(mergeAttrs({
+	const link = (tooltip) => createVNode("a", mergeJsxProps(mergeAttrs({
 		...tooltip,
 		sx: [
 			itemStyles.row,
@@ -253,7 +261,7 @@ var NavGroup = /*#__PURE__*/ _component((_props3, _ctx3) => {
 			"delay": 150,
 			"lazy": false,
 			"sx": navListStyles.flyout,
-			"trigger": _cache[0] || (_cache[0] = (props) => createVNode(ButtonBase, mergeProps(mergePartProps({ sx: [
+			"trigger": _cache[0] || (_cache[0] = (props) => createVNode(ButtonBase, mergeJsxProps(mergePartProps({ sx: [
 				itemStyles.row,
 				itemStyles.hoverable,
 				navListStyles.row,
@@ -274,7 +282,7 @@ var NavGroup = /*#__PURE__*/ _component((_props3, _ctx3) => {
 			$stable: childrenStable()
 		})]);
 	}
-	return () => iconOnly() ? renderFlyout() : createVNode("li", mergeAttrs({}, rest), [createVNode(Collapsible, mergeProps(mergePartProps({ trigger: (props) => createVNode(ButtonBase, mergePartProps({ sx: [
+	return () => iconOnly() ? renderFlyout() : createVNode("li", mergeAttrs({}, rest), [createVNode(Collapsible, mergeJsxProps(mergePartProps({ trigger: (props) => createVNode(ButtonBase, mergePartProps({ sx: [
 		itemStyles.row,
 		itemStyles.hoverable,
 		navListStyles.row,
@@ -354,7 +362,7 @@ var NavSection = /*#__PURE__*/ _component((_props5, _ctx5) => {
 		return createVNode("li", mergeAttrs({ sx: navListStyles.section }, rest), [createVNode("span", mergeAttrs({ sx: [navListStyles.sectionLabel, css.select(() => iconOnly() && navListStyles.compactSection, true)] }, propsLabel.value), [icon.value && createVNode(Icon, mergePartProps({
 			icon: icon.value,
 			sx: navListStyles.sectionIcon
-		}, propsIcon.value), null), createVNode("span", mergeProps({ "id": labelId }, css.attrs(iconOnly() && visuallyHiddenStyles.hidden)), [label.value])]), createVNode(FlexList, mergePartProps({
+		}, propsIcon.value), null), createVNode("span", mergeJsxProps({ "id": labelId }, css.attrs(navListStyles.sectionText, iconOnly() && visuallyHiddenStyles.hidden)), [label.value])]), createVNode(FlexList, mergePartProps({
 			direction: "column",
 			gap: "xs"
 		}, propsList.value, { "aria-labelledby": labelId }), _isSlot(_slot6 = forwardChildren(_props5)) ? _slot6 : { default: () => [_slot6] })]);