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

package/dist/layout/Affix.js

@@ -1,8 +1,8 @@
 import { t } from "../config/theme/tokens.js";
 import { mergeAttrs } from "../utils/props.js";
 import { useIntersectionObserver } from "../utils/dom/intersection.js";
-import { Fragment, createVNode, mergeProps, ref, shallowRef } from "vue";
-import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Fragment, createVNode, ref, shallowRef } from "vue";
+import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/layout/Affix.tsx
 /** onChange 换成报告是否贴住 */
@@ -51,13 +51,13 @@ var Affix = /*#__PURE__*/ _component((_props, _ctx) => {
 	}));
 	return () => {
 		const bottom = atBottom();
-		const marker = createVNode("div", mergeProps({
+		const marker = createVNode("div", mergeJsxProps({
 			"aria-hidden": "true",
 			"ref": _cache[0] || (_cache[0] = (element) => sentinel.value = element instanceof HTMLElement ? element : null)
 		}, css.attrs(affixStyles.sentinel)), null);
 		return createVNode(Fragment, null, [
 			!bottom && marker,
-			createVNode("div", mergeProps(mergeAttrs({ sx: [
+			createVNode("div", mergeJsxProps(mergeAttrs({ sx: [
 				affixStyles.root,
 				bottom ? css.bind(affixPositionStyles.bottom, () => [offsetBottom.value ?? 0], true) : css.bind(affixPositionStyles.top, () => [offsetTop.value ?? 0], true),
 				shadow.value && stuck.value && affixStyles.stuck

package/dist/layout/Affix.js.map

@@ -1 +1 @@
-{"version":3,"file":"Affix.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","_Fragment"],"sources":["../../src/layout/Affix.tsx"],"sourcesContent":["/**\n * 固钉：滚动到某个位置后贴住视口（或滚动容器）的顶部、底部不走，如表单的提交栏、长表格上方的筛选条、文章的目录。\n *\n *   <Affix offsetTop={64}>\n *     <FilterBar … />\n *   </Affix>\n *   <Affix offsetBottom={0} onChange={(stuck) => …}><ActionBar … /></Affix>\n *\n * 用 CSS position: sticky：在所在的滚动容器里贴住，不脱离文档流（不用占位、不用量宽度），容器滚出去时跟着走。\n * 是否已经贴住由 IntersectionObserver 看一个零高度的哨兵（useIntersectionObserver）：贴住时加阴影（浮在内容上）、\n * 写 data-stuck，并报告 onChange。sticky 只在父元素的范围里生效：Affix 要放在跟着滚动的那一层里；\n * 祖先里有 overflow 不是 visible 的元素时，sticky 相对的是它（不是视口）：这时把它作为 target 传进来。\n * 部件：Root（div，sticky 的那层）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useIntersectionObserver } from '../utils/dom/intersection';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** onChange 换成报告是否贴住 */\nexport type AffixManaged = 'onChange';\n\n/** 未声明的属性落到 sticky 的 div 上 */\nexport interface AffixProps extends PartProps<'div', AffixManaged> {\n  /** 贴住时离顶部多远（px），默认 0；与 offsetBottom 二选一 */\n  offsetTop?: number;\n  /** 贴住时离底部多远（px）：贴在底部 */\n  offsetBottom?: number;\n  /** 滚动的容器（sticky 相对的那个祖先）；不写时是视口 */\n  target?: () => HTMLElement | null | undefined;\n  /** 贴住时加阴影，默认 true */\n  shadow?: boolean;\n  /** 贴住、离开时调用 */\n  onChange?: (stuck: boolean) => void;\n  children?: VNodeChild;\n}\n\n/** Affix 的样式：root、stuck、sentinel */\nexport const affixStyles = css.create({\n  root: {\n    position: 'sticky',\n    zIndex: 5,\n    transition: `box-shadow ${t.durations.sm} ${t.easings.standard}`,\n  },\n  stuck: { boxShadow: '_md' },\n  // 哨兵：贴住的位置上一个零高度的元素，滚过它就是贴住了\n  sentinel: { height: 0, pointerEvents: 'none', visibility: 'hidden' },\n});\n\n/** 贴住的位置 */\nexport const affixPositionStyles = css.create({\n  top: (offset: number) => ({ top: offset }),\n  bottom: (offset: number) => ({ bottom: offset }),\n});\n\n/** 固钉：sticky + 是否贴住的检测 */\nexport const Affix = _component(\n  ({ offsetTop, offsetBottom, target, shadow = true, onChange, children, ...rest }: AffixProps) => {\n    let sentinel = _state.raw<HTMLElement | null>(null);\n    let stuck = _state(false);\n    const atBottom = () => offsetBottom != null && offsetTop == null;\n\n    // 贴顶：哨兵在上方，滚到它离顶部不到 offsetTop 就是贴住了；贴底：哨兵在下方，同理看底部\n    useIntersectionObserver(\n      () => sentinel,\n      ([entry]) => {\n        const next =\n          !entry!.isIntersecting &&\n          (atBottom()\n            ? entry!.boundingClientRect.top > (entry!.rootBounds?.bottom ?? 0)\n            : entry!.boundingClientRect.bottom < (entry!.rootBounds?.top ?? 0));\n        if (next === stuck) return;\n        stuck = next;\n        onChange?.(next);\n      },\n      () => ({\n        root: target?.() ?? null,\n        rootMargin: atBottom()\n          ? `0px 0px ${-(offsetBottom ?? 0)}px 0px`\n          : `${-(offsetTop ?? 0)}px 0px 0px 0px`,\n        threshold: [0, 1],\n      }),\n    );\n\n    return () => {\n      const bottom = atBottom();\n      const marker = (\n        <div\n          aria-hidden=\"true\"\n          ref={(element: unknown) => (sentinel = element instanceof HTMLElement ? element : null)}\n          {...css.attrs(affixStyles.sentinel)}\n        />\n      );\n      return (\n        <>\n          {!bottom && marker}\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  affixStyles.root,\n                  bottom\n                    ? affixPositionStyles.bottom(offsetBottom ?? 0)\n                    : affixPositionStyles.top(offsetTop ?? 0),\n                  shadow && stuck && affixStyles.stuck,\n                ],\n              },\n              rest,\n            )}\n            data-stuck={stuck || undefined}\n          >\n            {children}\n          </div>\n          {bottom && marker}\n        </>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;AAwCA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;EACJ,UAAU;EACV,QAAQ;EACR,YAAY,cAAc,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACxD;CACA,OAAO,EAAE,WAAW,MAAM;CAE1B,UAAU;EAAE,QAAQ;EAAG,eAAe;EAAQ,YAAY;CAAS;AACrE,CAAC;;AAGD,IAAa,sBAAsB,IAAI,OAAO;CAC5C,MAAM,YAAoB,EAAE,KAAK,OAAO;CACxC,SAAS,YAAoB,EAAE,QAAQ,OAAO;AAChD,CAAC;;AAGD,IAAa,QAAQ,0BACnB,QAAA,SAAiG;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,UAApD,IAAI;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAyB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAC5E,IAAI,WAAQC,WAAkC,IAAI;CAClD,IAAI,QAAKC,IAAU,KAAK;CACxB,MAAM,iBAAiB,aAAA,SAAgB,QAAQ,UAAA,SAAa;CAG5D,8BACE,SAAA,QACC,CAAC,WAAW;EACX,MAAM,OACJ,CAAC,MAAO,mBACP,SAAS,IACN,MAAO,mBAAmB,OAAO,MAAO,YAAY,UAAU,KAC9D,MAAO,mBAAmB,UAAU,MAAO,YAAY,OAAO;EACpE,IAAI,SAAI,MAAA,OAAY;EACpB,MAAA,QAAQ;EACR,SAAA,QAAW,IAAI;CACjB,UACO;EACL,MAAM,OAAA,QAAS,KAAK;EACpB,YAAY,SAAS,IACjB,WAAW,EAAE,aAAA,SAAgB,GAAE,UAC/B,GAAG,EAAE,UAAA,SAAa,GAAE;EACxB,WAAW,CAAC,GAAG,CAAC;CAClB,EACF;CAEA,aAAa;EACX,MAAM,SAAS,SAAS;EACxB,MAAM,SAAMC,YAAA,OAAAC,WAAA;GAAA,eAAA;GAAA,OAAA,OAAA,OAAA,OAAA,MAGF,YAAsB,SAAA,QAAW,mBAAmB,cAAc,UAAU;EAAK,GACnF,IAAI,MAAM,YAAY,QAAQ,CAAC,GAAA,IAAA;EAGvC,OAAAD,YAAAE,UAAA,MAAA;GAEK,CAAC,UAAU;GAAMF,YAAA,OAAAC,WAEZ,WACF,EACE,IAAI;IACF,YAAY;IACZ,SAAM,IAAA,KACF,oBAAoB,cAAM,CAAC,aAAA,SAAgB,CAAC,GAAA,IAAA,IAAA,IAAA,KAC5C,oBAAoB,WAAG,CAAC,UAAA,SAAa,CAAC,GAAA,IAAA;IAC1C,OAAA,SAAA,MAAA,SAAmB,YAAY;GAAK,EAExC,GACA,IACF,GAAC,EAAA,cACW,MAAA,SAAS,KAAA,EAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;GAI/B,UAAU;EAAM,CAAA;CAGvB;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"Affix.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","_Fragment"],"sources":["../../src/layout/Affix.tsx"],"sourcesContent":["/**\n * 固钉：滚动到某个位置后贴住视口（或滚动容器）的顶部、底部不走，如表单的提交栏、长表格上方的筛选条、文章的目录。\n *\n *   <Affix offsetTop={64}>\n *     <FilterBar … />\n *   </Affix>\n *   <Affix offsetBottom={0} onChange={(stuck) => …}><ActionBar … /></Affix>\n *\n * 用 CSS position: sticky：在所在的滚动容器里贴住，不脱离文档流（不用占位、不用量宽度），容器滚出去时跟着走。\n * 是否已经贴住由 IntersectionObserver 看一个零高度的哨兵（useIntersectionObserver）：贴住时加阴影（浮在内容上）、\n * 写 data-stuck，并报告 onChange。sticky 只在父元素的范围里生效：Affix 要放在跟着滚动的那一层里；\n * 祖先里有 overflow 不是 visible 的元素时，sticky 相对的是它（不是视口）：这时把它作为 target 传进来。\n * 部件：Root（div，sticky 的那层）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useIntersectionObserver } from '../utils/dom/intersection';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** onChange 换成报告是否贴住 */\nexport type AffixManaged = 'onChange';\n\n/** 未声明的属性落到 sticky 的 div 上 */\nexport interface AffixProps extends PartProps<'div', AffixManaged> {\n  /** 贴住时离顶部多远（px），默认 0；与 offsetBottom 二选一 */\n  offsetTop?: number;\n  /** 贴住时离底部多远（px）：贴在底部 */\n  offsetBottom?: number;\n  /** 滚动的容器（sticky 相对的那个祖先）；不写时是视口 */\n  target?: () => HTMLElement | null | undefined;\n  /** 贴住时加阴影，默认 true */\n  shadow?: boolean;\n  /** 贴住、离开时调用 */\n  onChange?: (stuck: boolean) => void;\n  children?: VNodeChild;\n}\n\n/** Affix 的样式：root、stuck、sentinel */\nexport const affixStyles = css.create({\n  root: {\n    position: 'sticky',\n    zIndex: 5,\n    transition: `box-shadow ${t.durations.sm} ${t.easings.standard}`,\n  },\n  stuck: { boxShadow: '_md' },\n  // 哨兵：贴住的位置上一个零高度的元素，滚过它就是贴住了\n  sentinel: { height: 0, pointerEvents: 'none', visibility: 'hidden' },\n});\n\n/** 贴住的位置 */\nexport const affixPositionStyles = css.create({\n  top: (offset: number) => ({ top: offset }),\n  bottom: (offset: number) => ({ bottom: offset }),\n});\n\n/** 固钉：sticky + 是否贴住的检测 */\nexport const Affix = _component(\n  ({ offsetTop, offsetBottom, target, shadow = true, onChange, children, ...rest }: AffixProps) => {\n    let sentinel = _state.raw<HTMLElement | null>(null);\n    let stuck = _state(false);\n    const atBottom = () => offsetBottom != null && offsetTop == null;\n\n    // 贴顶：哨兵在上方，滚到它离顶部不到 offsetTop 就是贴住了；贴底：哨兵在下方，同理看底部\n    useIntersectionObserver(\n      () => sentinel,\n      ([entry]) => {\n        const next =\n          !entry!.isIntersecting &&\n          (atBottom()\n            ? entry!.boundingClientRect.top > (entry!.rootBounds?.bottom ?? 0)\n            : entry!.boundingClientRect.bottom < (entry!.rootBounds?.top ?? 0));\n        if (next === stuck) return;\n        stuck = next;\n        onChange?.(next);\n      },\n      () => ({\n        root: target?.() ?? null,\n        rootMargin: atBottom()\n          ? `0px 0px ${-(offsetBottom ?? 0)}px 0px`\n          : `${-(offsetTop ?? 0)}px 0px 0px 0px`,\n        threshold: [0, 1],\n      }),\n    );\n\n    return () => {\n      const bottom = atBottom();\n      const marker = (\n        <div\n          aria-hidden=\"true\"\n          ref={(element: unknown) => (sentinel = element instanceof HTMLElement ? element : null)}\n          {...css.attrs(affixStyles.sentinel)}\n        />\n      );\n      return (\n        <>\n          {!bottom && marker}\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  affixStyles.root,\n                  bottom\n                    ? affixPositionStyles.bottom(offsetBottom ?? 0)\n                    : affixPositionStyles.top(offsetTop ?? 0),\n                  shadow && stuck && affixStyles.stuck,\n                ],\n              },\n              rest,\n            )}\n            data-stuck={stuck || undefined}\n          >\n            {children}\n          </div>\n          {bottom && marker}\n        </>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;AAwCA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;EACJ,UAAU;EACV,QAAQ;EACR,YAAY,cAAc,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACxD;CACA,OAAO,EAAE,WAAW,MAAM;CAE1B,UAAU;EAAE,QAAQ;EAAG,eAAe;EAAQ,YAAY;CAAS;AACrE,CAAC;;AAGD,IAAa,sBAAsB,IAAI,OAAO;CAC5C,MAAM,YAAoB,EAAE,KAAK,OAAO;CACxC,SAAS,YAAoB,EAAE,QAAQ,OAAO;AAChD,CAAC;;AAGD,IAAa,QAAQ,0BACnB,QAAA,SAAiG;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,UAApD,IAAI;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAyB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAC5E,IAAI,WAAQC,WAAkC,IAAI;CAClD,IAAI,QAAKC,IAAU,KAAK;CACxB,MAAM,iBAAiB,aAAA,SAAgB,QAAQ,UAAA,SAAa;CAG5D,8BACE,SAAA,QACC,CAAC,WAAW;EACX,MAAM,OACJ,CAAC,MAAO,mBACP,SAAS,IACN,MAAO,mBAAmB,OAAO,MAAO,YAAY,UAAU,KAC9D,MAAO,mBAAmB,UAAU,MAAO,YAAY,OAAO;EACpE,IAAI,SAAI,MAAA,OAAY;EACpB,MAAA,QAAQ;EACR,SAAA,QAAW,IAAI;CACjB,UACO;EACL,MAAM,OAAA,QAAS,KAAK;EACpB,YAAY,SAAS,IACjB,WAAW,EAAE,aAAA,SAAgB,GAAE,UAC/B,GAAG,EAAE,UAAA,SAAa,GAAE;EACxB,WAAW,CAAC,GAAG,CAAC;CAClB,EACF;CAEA,aAAa;EACX,MAAM,SAAS,SAAS;EACxB,MAAM,SAAMC,YAAA,OAAAC,cAAA;GAAA,eAAA;GAAA,OAAA,OAAA,OAAA,OAAA,MAGF,YAAsB,SAAA,QAAW,mBAAmB,cAAc,UAAU;EAAK,GACnF,IAAI,MAAM,YAAY,QAAQ,CAAC,GAAA,IAAA;EAGvC,OAAAD,YAAAE,UAAA,MAAA;GAEK,CAAC,UAAU;GAAMF,YAAA,OAAAC,cAEZ,WACF,EACE,IAAI;IACF,YAAY;IACZ,SAAM,IAAA,KACF,oBAAoB,cAAM,CAAC,aAAA,SAAgB,CAAC,GAAA,IAAA,IAAA,IAAA,KAC5C,oBAAoB,WAAG,CAAC,UAAA,SAAa,CAAC,GAAA,IAAA;IAC1C,OAAA,SAAA,MAAA,SAAmB,YAAY;GAAK,EAExC,GACA,IACF,GAAC,EAAA,cACW,MAAA,SAAS,KAAA,EAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;GAI/B,UAAU;EAAM,CAAA;CAGvB;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/layout/ResizeHandle.d.ts

@@ -14,15 +14,19 @@ export interface ResizeHandleProps extends PartProps<'span', ResizeHandleManaged
     defaultWidth?: number;
     /** 键盘每按一次调整多少（px），默认 16 */
     step?: number;
-    /** 手柄在父元素的哪一边，默认 end；start 时往起始方向拖是变宽（从结束边滑入的抽屉） */
+    /** 手柄在父元素的哪一边，默认 end；start 时往起始方向拖是变宽（从结束边滑入的抽屉）；horizontal 时 start 是上边、end 是下边 */
     edge?: 'start' | 'end';
+    /** vertical（默认）：竖线，调整宽度；horizontal：横线，调整高度（见文件开头） */
+    orientation?: 'vertical' | 'horizontal';
     /** 拖动或用键盘调整了宽度（已经夹在最小、最大宽度之间） */
     onWidthChange: (width: number) => void;
 }
 /** ResizeHandle 的样式：贴着父元素结束边的细线 */
 export declare const resizeHandleStyles: Readonly<{
     handle: css.CompiledStyles;
+    horizontal: css.CompiledStyles;
+    horizontalStart: css.CompiledStyles;
     start: css.CompiledStyles;
 }>;
-/** 宽度调整手柄：拖动或用 ← / → 调整父元素的宽度 */
+/** 宽度调整手柄：拖动或用 ← / → 调整父元素的宽度；orientation="horizontal" 时调整高度（↑ / ↓） */
 export declare const ResizeHandle: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ResizeHandleProps>;

package/dist/layout/ResizeHandle.js

@@ -29,9 +29,22 @@ var resizeHandleStyles = css.create({
 	start: {
 		insetInlineEnd: "auto",
 		insetInlineStart: 0
+	},
+	horizontal: {
+		top: "auto",
+		bottom: 0,
+		insetInlineStart: 0,
+		insetInlineEnd: 0,
+		width: "auto",
+		height: "_space.sm",
+		cursor: "row-resize"
+	},
+	horizontalStart: {
+		top: 0,
+		bottom: "auto"
 	}
 });
-/** 宽度调整手柄：拖动或用 ← / → 调整父元素的宽度 */
+/** 宽度调整手柄：拖动或用 ← / → 调整父元素的宽度；orientation="horizontal" 时调整高度（↑ / ↓） */
 var ResizeHandle = /*#__PURE__*/ _component((_props, _ctx) => {
 	const width = readonlyProp(_props, "width");
 	const minWidth = readonlyProp(_props, "minWidth", 64);
@@ -39,36 +52,45 @@ var ResizeHandle = /*#__PURE__*/ _component((_props, _ctx) => {
 	const defaultWidth = readonlyProp(_props, "defaultWidth");
 	const step = readonlyProp(_props, "step", 16);
 	const edge = readonlyProp(_props, "edge", "end");
+	const orientation = readonlyProp(_props, "orientation", "vertical");
 	const onWidthChange = readonlyProp(_props, "onWidthChange");
 	const rest = restProps(_props, _ctx, true);
+	const horizontal = () => orientation.value === "horizontal";
 	const parentOf = (event) => event.currentTarget.parentElement;
+	const sizeOf = (element) => {
+		const rect = element.getBoundingClientRect();
+		return horizontal() ? rect.height : rect.width;
+	};
 	const fit = (px) => Math.round(clamp(px, minWidth.value, maxWidth.value));
 	let handle = shallowRef(null);
 	let measured = ref(void 0);
 	useResizeObserver(() => width.value == null ? handle.value?.parentElement : null, () => {
 		const parent = handle.value?.parentElement;
-		if (parent) measured.value = Math.round(parent.getBoundingClientRect().width);
+		if (parent) measured.value = Math.round(sizeOf(parent));
 	});
 	function onPointerdown(event) {
 		const parent = parentOf(event);
-		const from = parent.getBoundingClientRect().width;
-		const sign = (isRtl(parent) ? -1 : 1) * (edge.value === "start" ? -1 : 1);
+		const from = sizeOf(parent);
+		const sign = (horizontal() ? 1 : isRtl(parent) ? -1 : 1) * (edge.value === "start" ? -1 : 1);
 		event.preventDefault();
-		startMove(event, { onMove: ({ deltaX }) => onWidthChange.value(fit(from + sign * deltaX)) });
+		startMove(event, { onMove: ({ deltaX, deltaY }) => onWidthChange.value(fit(from + sign * (horizontal() ? deltaY : deltaX))) });
 	}
 	function onKeydown(event) {
 		const parent = parentOf(event);
-		const { forward, backward } = inlineArrows(isRtl(parent));
+		const { forward, backward } = horizontal() ? {
+			forward: "ArrowDown",
+			backward: "ArrowUp"
+		} : inlineArrows(isRtl(parent));
 		const delta = (event.key === forward ? step.value : event.key === backward ? -step.value : 0) * (edge.value === "start" ? -1 : 1);
 		if (!delta) return;
 		event.preventDefault();
-		onWidthChange.value(fit((width.value ?? parent.getBoundingClientRect().width) + delta));
+		onWidthChange.value(fit((width.value ?? sizeOf(parent)) + delta));
 	}
-	return () => createVNode("span", mergeAttrs({ sx: [resizeHandleStyles.handle, edge.value === "start" && resizeHandleStyles.start] }, rest, {
+	return () => createVNode("span", mergeAttrs({ sx: [resizeHandleStyles.handle, horizontal() ? [resizeHandleStyles.horizontal, edge.value === "start" && resizeHandleStyles.horizontalStart] : edge.value === "start" && resizeHandleStyles.start] }, rest, {
 		ref: (element) => handle.value = element instanceof HTMLElement ? element : null,
 		role: "separator",
 		tabindex: 0,
-		"aria-orientation": "vertical",
+		"aria-orientation": orientation.value,
 		"aria-valuenow": width.value ?? measured.value ?? minWidth.value,
 		"aria-valuemin": minWidth.value,
 		"aria-valuemax": Number.isFinite(maxWidth.value) ? maxWidth.value : void 0,
@@ -85,6 +107,7 @@ var ResizeHandle = /*#__PURE__*/ _component((_props, _ctx) => {
 		"defaultWidth",
 		"step",
 		"edge",
+		"orientation",
 		"onWidthChange"
 	]
 });

package/dist/layout/ResizeHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode"],"sources":["../../src/layout/ResizeHandle.tsx"],"sourcesContent":["/**\n * 宽度调整手柄：所在元素结束边（edge=\"start\" 时是起始边，如从右侧滑入的抽屉）的一条细线（role=\"separator\"），悬停、聚焦时显示。\n * 拖动（startMove）或聚焦后用 ← / →（WCAG 2.5.7 拖动的替代操作）调整，从右到左排版下方向自动镜像；\n * 双击回到 defaultWidth。宽度从父元素量起，所以要放在要调整的那个元素里（它需要 position: relative 或 fixed）。\n * AppShell 的抽屉式侧栏、DataTable 的列宽（ColumnResizer）都用它。\n *\n *   <aside style=\"position: relative; width: …\">…<ResizeHandle aria-label=\"调整侧栏宽度\" width={width} onWidthChange={(px) => (width = px)} /></aside>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { clamp } from '../utils/data/number';\nimport { inlineArrows, isRtl } from '../utils/dom/direction';\nimport { startMove } from '../utils/dom/move';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 分隔条的角色、可聚焦与取值由组件管理 */\nexport type ResizeHandleManaged =\n  'role' | 'tabindex' | 'aria-orientation' | 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax';\n\n/** 未声明的属性落到手柄（span）上；无障碍名称写 aria-label */\nexport interface ResizeHandleProps extends PartProps<'span', ResizeHandleManaged> {\n  /** 当前宽度（px）；没有时从父元素的实际宽度起算 */\n  width?: number;\n  /** 最小宽度（px），默认 64 */\n  minWidth?: number;\n  /** 最大宽度（px），默认不限 */\n  maxWidth?: number;\n  /** 双击回到的宽度（px）；不写时双击不做什么 */\n  defaultWidth?: number;\n  /** 键盘每按一次调整多少（px），默认 16 */\n  step?: number;\n  /** 手柄在父元素的哪一边，默认 end；start 时往起始方向拖是变宽（从结束边滑入的抽屉） */\n  edge?: 'start' | 'end';\n  /** 拖动或用键盘调整了宽度（已经夹在最小、最大宽度之间） */\n  onWidthChange: (width: number) => void;\n}\n\n/** ResizeHandle 的样式：贴着父元素结束边的细线 */\nexport const resizeHandleStyles = css.create({\n  handle: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    insetInlineEnd: 0,\n    width: '_space.sm',\n    cursor: 'col-resize',\n    touchAction: 'none',\n    backgroundColor: {\n      default: 'transparent',\n      ':hover': '_borderStrong',\n      ':focus-visible': '_accent',\n    },\n    outlineStyle: 'none',\n  },\n  start: { insetInlineEnd: 'auto', insetInlineStart: 0 },\n});\n\n/** 宽度调整手柄：拖动或用 ← / → 调整父元素的宽度 */\nexport const ResizeHandle = _component(\n  ({\n    width,\n    minWidth = 64,\n    maxWidth = Number.POSITIVE_INFINITY,\n    defaultWidth,\n    step = 16,\n    edge = 'end',\n    onWidthChange,\n    ...rest\n  }: ResizeHandleProps) => {\n    const parentOf = (event: Event) => (event.currentTarget as HTMLElement).parentElement!;\n    const fit = (px: number) => Math.round(clamp(px, minWidth, maxWidth));\n    // 没给 width 时量父元素的实际宽度：可聚焦的分隔条必须有当前值（aria-valuenow）\n    let handle = _state.raw<HTMLElement | null>(null);\n    let measured = _state<number | undefined>(undefined);\n    useResizeObserver(\n      () => (width == null ? handle?.parentElement : null),\n      () => {\n        const parent = handle?.parentElement;\n        if (parent) measured = Math.round(parent.getBoundingClientRect().width);\n      },\n    );\n\n    function onPointerdown(event: PointerEvent) {\n      const parent = parentOf(event);\n      const from = parent.getBoundingClientRect().width;\n      // 起始边的手柄往起始方向拖是变宽：方向与结束边相反\n      const sign = (isRtl(parent) ? -1 : 1) * (edge === 'start' ? -1 : 1);\n      event.preventDefault();\n      startMove(event, {\n        onMove: ({ deltaX }) => onWidthChange(fit(from + sign * deltaX)),\n      });\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      const parent = parentOf(event);\n      const { forward, backward } = inlineArrows(isRtl(parent));\n      const delta =\n        (event.key === forward ? step : event.key === backward ? -step : 0) *\n        (edge === 'start' ? -1 : 1);\n      if (!delta) return;\n      event.preventDefault();\n      onWidthChange(fit((width ?? parent.getBoundingClientRect().width) + delta));\n    }\n\n    return () => (\n      <span\n        {...mergeAttrs<'span'>(\n          { sx: [resizeHandleStyles.handle, edge === 'start' && resizeHandleStyles.start] },\n          rest,\n          {\n            ref: (element: unknown) => (handle = element instanceof HTMLElement ? element : null),\n            role: 'separator',\n            tabindex: 0,\n            'aria-orientation': 'vertical',\n            'aria-valuenow': width ?? measured ?? minWidth,\n            'aria-valuemin': minWidth,\n            'aria-valuemax': Number.isFinite(maxWidth) ? maxWidth : undefined,\n            onPointerdown,\n            onKeydown,\n            onDblclick: defaultWidth == null ? undefined : () => onWidthChange(fit(defaultWidth)),\n          },\n        )}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;AAuCA,IAAa,qBAAqB,IAAI,OAAO;CAC3C,QAAQ;EACN,UAAU;EACV,KAAK;EACL,QAAQ;EACR,gBAAgB;EAChB,OAAO;EACP,QAAQ;EACR,aAAa;EACb,iBAAiB;GACf,SAAS;GACT,UAAU;GACV,kBAAkB;EACpB;EACA,cAAc;CAChB;CACA,OAAO;EAAE,gBAAgB;EAAQ,kBAAkB;CAAE;AACvD,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SASyB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAPZ,EAAE;CAAA,MAAA,WAAAA,aAAA,QAAA,kBACF,OAAO,iBAAiB;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAE5B,EAAE;CAAA,MAAA,OAAAA,aAAA,QAAA,QACF,KAAK;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAET,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,YAAY,UAAkB,MAAM,cAA8B;CACxE,MAAM,OAAO,OAAe,KAAK,MAAM,MAAM,IAAE,SAAA,OAAA,SAAA,KAAoB,CAAC;CAEpE,IAAI,SAAMC,WAAkC,IAAI;CAChD,IAAI,WAAQC,IAA8B,KAAA,CAAS;CACnD,wBACS,MAAA,SAAS,OAAO,OAAA,OAAQ,gBAAgB,YACzC;EACJ,MAAM,SAAS,OAAA,OAAQ;EACvB,IAAI,QAAQ,SAAA,QAAW,KAAK,MAAM,OAAO,sBAAsB,CAAC,CAAC,KAAK;CACxE,CACF;CAEA,SAAS,cAAc,OAAqB;EAC1C,MAAM,SAAS,SAAS,KAAK;EAC7B,MAAM,OAAO,OAAO,sBAAsB,CAAC,CAAC;EAE5C,MAAM,QAAQ,MAAM,MAAM,IAAI,KAAK,MAAM,KAAA,UAAS,UAAU,KAAK;EACjE,MAAM,eAAe;EACrB,UAAU,OAAO,EACf,SAAS,EAAE,aAAa,cAAA,MAAc,IAAI,OAAO,OAAO,MAAM,CAAC,EACjE,CAAC;CACH;CAEA,SAAS,UAAU,OAAsB;EACvC,MAAM,SAAS,SAAS,KAAK;EAC7B,MAAM,EAAE,SAAS,aAAa,aAAa,MAAM,MAAM,CAAC;EACxD,MAAM,SACH,MAAM,QAAQ,UAAO,KAAA,QAAU,MAAM,QAAQ,WAAW,CAAA,KAAA,QAAQ,MAChE,KAAA,UAAS,UAAU,KAAK;EAC3B,IAAI,CAAC,OAAO;EACZ,MAAM,eAAe;EACrB,cAAA,MAAc,KAAK,MAAA,SAAS,OAAO,sBAAsB,CAAC,CAAC,SAAS,KAAK,CAAC;CAC5E;CAEA,aAAOC,YAAA,QAEC,WACF,EAAE,IAAI,CAAC,mBAAmB,QAAQ,KAAA,UAAS,WAAW,mBAAmB,KAAK,EAAE,GAChF,MACA;EACE,MAAM,YAAsB,OAAA,QAAS,mBAAmB,cAAc,UAAU;EAChF,MAAM;EACN,UAAU;EACV,oBAAoB;EACpB,iBAAiB,MAAA,SAAA,SAAA,SAAiB,SAAA;EAClC,iBAAe,SAAA;EACf,iBAAiB,OAAO,SAAQ,SAAA,KAAS,IAAC,SAAA,QAAc,KAAA;EACxD;EACA;EACA,YAAY,aAAA,SAAgB,OAAO,KAAA,UAAkB,cAAA,MAAc,IAAG,aAAA,KAAa,CAAC;CACtF,CACF,GAAC,IAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"ResizeHandle.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode"],"sources":["../../src/layout/ResizeHandle.tsx"],"sourcesContent":["/**\n * 宽度调整手柄：所在元素结束边（edge=\"start\" 时是起始边，如从右侧滑入的抽屉）的一条细线（role=\"separator\"），悬停、聚焦时显示。\n * 拖动（startMove）或聚焦后用 ← / →（WCAG 2.5.7 拖动的替代操作）调整，从右到左排版下方向自动镜像；\n * 双击回到 defaultWidth。宽度从父元素量起，所以要放在要调整的那个元素里（它需要 position: relative 或 fixed）。\n * orientation=\"horizontal\" 时是一条横线，贴着父元素的下边（edge=\"start\" 时是上边，如从底部升起的抽屉），\n * 拖动或用 ↑ / ↓ 调整的是**高度**：width、minWidth、maxWidth、defaultWidth、onWidthChange 这时都指高度。\n * AppShell 的抽屉式侧栏、DataTable 的列宽（ColumnResizer）都用它。\n *\n *   <aside style=\"position: relative; width: …\">…<ResizeHandle aria-label=\"调整侧栏宽度\" width={width} onWidthChange={(px) => (width = px)} /></aside>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { clamp } from '../utils/data/number';\nimport { inlineArrows, isRtl } from '../utils/dom/direction';\nimport { startMove } from '../utils/dom/move';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 分隔条的角色、可聚焦与取值由组件管理 */\nexport type ResizeHandleManaged =\n  'role' | 'tabindex' | 'aria-orientation' | 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax';\n\n/** 未声明的属性落到手柄（span）上；无障碍名称写 aria-label */\nexport interface ResizeHandleProps extends PartProps<'span', ResizeHandleManaged> {\n  /** 当前宽度（px）；没有时从父元素的实际宽度起算 */\n  width?: number;\n  /** 最小宽度（px），默认 64 */\n  minWidth?: number;\n  /** 最大宽度（px），默认不限 */\n  maxWidth?: number;\n  /** 双击回到的宽度（px）；不写时双击不做什么 */\n  defaultWidth?: number;\n  /** 键盘每按一次调整多少（px），默认 16 */\n  step?: number;\n  /** 手柄在父元素的哪一边，默认 end；start 时往起始方向拖是变宽（从结束边滑入的抽屉）；horizontal 时 start 是上边、end 是下边 */\n  edge?: 'start' | 'end';\n  /** vertical（默认）：竖线，调整宽度；horizontal：横线，调整高度（见文件开头） */\n  orientation?: 'vertical' | 'horizontal';\n  /** 拖动或用键盘调整了宽度（已经夹在最小、最大宽度之间） */\n  onWidthChange: (width: number) => void;\n}\n\n/** ResizeHandle 的样式：贴着父元素结束边的细线 */\nexport const resizeHandleStyles = css.create({\n  handle: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    insetInlineEnd: 0,\n    width: '_space.sm',\n    cursor: 'col-resize',\n    touchAction: 'none',\n    backgroundColor: {\n      default: 'transparent',\n      ':hover': '_borderStrong',\n      ':focus-visible': '_accent',\n    },\n    outlineStyle: 'none',\n  },\n  start: { insetInlineEnd: 'auto', insetInlineStart: 0 },\n  // 横线：贴着父元素的下边（start 时是上边），调整高度\n  horizontal: {\n    top: 'auto',\n    bottom: 0,\n    insetInlineStart: 0,\n    insetInlineEnd: 0,\n    width: 'auto',\n    height: '_space.sm',\n    cursor: 'row-resize',\n  },\n  horizontalStart: { top: 0, bottom: 'auto' },\n});\n\n/** 宽度调整手柄：拖动或用 ← / → 调整父元素的宽度；orientation=\"horizontal\" 时调整高度（↑ / ↓） */\nexport const ResizeHandle = _component(\n  ({\n    width,\n    minWidth = 64,\n    maxWidth = Number.POSITIVE_INFINITY,\n    defaultWidth,\n    step = 16,\n    edge = 'end',\n    orientation = 'vertical',\n    onWidthChange,\n    ...rest\n  }: ResizeHandleProps) => {\n    const horizontal = () => orientation === 'horizontal';\n    const parentOf = (event: Event) => (event.currentTarget as HTMLElement).parentElement!;\n    const sizeOf = (element: Element) => {\n      const rect = element.getBoundingClientRect();\n      return horizontal() ? rect.height : rect.width;\n    };\n    const fit = (px: number) => Math.round(clamp(px, minWidth, maxWidth));\n    // 没给 width 时量父元素的实际宽度：可聚焦的分隔条必须有当前值（aria-valuenow）\n    let handle = _state.raw<HTMLElement | null>(null);\n    let measured = _state<number | undefined>(undefined);\n    useResizeObserver(\n      () => (width == null ? handle?.parentElement : null),\n      () => {\n        const parent = handle?.parentElement;\n        if (parent) measured = Math.round(sizeOf(parent));\n      },\n    );\n\n    function onPointerdown(event: PointerEvent) {\n      const parent = parentOf(event);\n      const from = sizeOf(parent);\n      // 起始边的手柄往起始方向拖是变宽：方向与结束边相反；横线不受从右到左排版的影响\n      const sign = (horizontal() ? 1 : isRtl(parent) ? -1 : 1) * (edge === 'start' ? -1 : 1);\n      event.preventDefault();\n      startMove(event, {\n        onMove: ({ deltaX, deltaY }) =>\n          onWidthChange(fit(from + sign * (horizontal() ? deltaY : deltaX))),\n      });\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      const parent = parentOf(event);\n      const { forward, backward } = horizontal()\n        ? { forward: 'ArrowDown', backward: 'ArrowUp' }\n        : inlineArrows(isRtl(parent));\n      const delta =\n        (event.key === forward ? step : event.key === backward ? -step : 0) *\n        (edge === 'start' ? -1 : 1);\n      if (!delta) return;\n      event.preventDefault();\n      onWidthChange(fit((width ?? sizeOf(parent)) + delta));\n    }\n\n    return () => (\n      <span\n        {...mergeAttrs<'span'>(\n          {\n            sx: [\n              resizeHandleStyles.handle,\n              horizontal()\n                ? [\n                    resizeHandleStyles.horizontal,\n                    edge === 'start' && resizeHandleStyles.horizontalStart,\n                  ]\n                : edge === 'start' && resizeHandleStyles.start,\n            ],\n          },\n          rest,\n          {\n            ref: (element: unknown) => (handle = element instanceof HTMLElement ? element : null),\n            role: 'separator',\n            tabindex: 0,\n            'aria-orientation': orientation,\n            'aria-valuenow': width ?? measured ?? minWidth,\n            'aria-valuemin': minWidth,\n            'aria-valuemax': Number.isFinite(maxWidth) ? maxWidth : undefined,\n            onPointerdown,\n            onKeydown,\n            onDblclick: defaultWidth == null ? undefined : () => onWidthChange(fit(defaultWidth)),\n          },\n        )}\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/layout/ScrollArea.js

@@ -5,8 +5,8 @@ import { startMove } from "../utils/dom/move.js";
 import { isRtl } from "../utils/dom/direction.js";
 import { batchLayout } from "../utils/dom/layout-batch.js";
 import { useResizeObserver } from "../utils/dom/resize.js";
-import { createVNode, mergeProps, ref, shallowRef } from "vue";
-import { _component, childrenProp, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, ref, shallowRef } from "vue";
+import { _component, childrenProp, effect, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/layout/ScrollArea.tsx
 /** 哪个方向可以滚动 */
@@ -241,7 +241,7 @@ var OverlayScrollbar = /*#__PURE__*/ _component((_props, _ctx) => {
 	}
 	return () => {
 		const visible = overflowing.value && (type.value === "always" || active.value);
-		return createVNode("div", mergeProps(mergeAttrs({ sx: [
+		return createVNode("div", mergeJsxProps(mergeAttrs({ sx: [
 			scrollAreaBarStyles.track,
 			scrollAreaBarStyles[axis.value],
 			fixed.value && scrollAreaBarStyles.fixed,

package/dist/layout/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","names":["_vtp_readonlyProp","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","_vtp_childrenProp","_vtp_restProps"],"sources":["../../src/layout/ScrollArea.tsx"],"sourcesContent":["/**\n * 滚动区域：浮层滚动条。滚动仍是浏览器原生的（触控板惯性、键盘、页内搜索、无障碍都不变），\n * 只把原生滚动条隐藏，换成半透明、绝对定位浮在内容上方的滚动条：出现、消失都不占位，不改变布局尺寸。\n * 参考 Radix ScrollArea。\n *\n *   <ScrollArea sx={styles.panel}>…</ScrollArea>            高度（或最大高度）由使用方给\n *   <ScrollArea axis=\"both\" type=\"always\">…</ScrollArea>\n *\n * 滚动条对读屏隐藏（滚动由视口本身承担）；内容超出时视口可聚焦，键盘照常滚动。\n * 滚动条本身是 OverlayScrollbar：整页的浮层滚动条（PageScrollbar）也用它。\n *\n * 要在外面拿到真正滚动的元素（虚拟滚动、自己控制滚动）时用 propsViewport 的 ref：\n *   <ScrollArea propsViewport={{ ref: (element) => (scroller = toElement(element)) }}>…</ScrollArea>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { startMove } from '../utils/dom/move';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { isRtl } from '../utils/dom/direction';\nimport { batchLayout } from '../utils/dom/layout-batch';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { t } from '../config/theme/tokens';\n\n/** 哪个方向可以滚动 */\nexport interface ScrollAreaAxes {\n  /** 纵向（默认），横向超出的部分裁掉 */\n  y: unknown;\n  /** 横向，纵向超出的部分裁掉 */\n  x: unknown;\n  /** 两个方向 */\n  both: unknown;\n}\n\n/** 滚动条什么时候显示 */\nexport interface ScrollbarTypes {\n  /** 指针在区域上方或正在滚动时显示（默认） */\n  hover: unknown;\n  /** 只在滚动时显示，停下后淡出 */\n  scroll: unknown;\n  /** 内容超出时一直显示 */\n  always: unknown;\n}\n\n/** 未声明的属性落到外层（决定尺寸的那一层）；视口的属性（aria-label 等）用 propsViewport */\nexport interface ScrollAreaProps extends PartProps<'div'> {\n  /** 可以滚动的方向，默认 y */\n  axis?: keyof ScrollAreaAxes;\n  /** 滚动条什么时候显示，默认 hover */\n  type?: keyof ScrollbarTypes;\n  /** 停止滚动、指针离开后多久淡出（毫秒），默认 600 */\n  hideDelay?: number;\n  /**\n   * 内容超出时视口可以用 Tab 聚焦（键盘滚动），默认 true。视口本身另有角色并自己管焦点（列表框、菜单），\n   * 或焦点在别处、由那里控制滚动（命令面板的输入框）时关掉，tabindex 由使用方经 propsViewport 给\n   */\n  focusable?: boolean;\n  /** 视口（真正滚动的元素）的部件属性；ref 拿到它可以自己控制滚动 */\n  propsViewport?: PartProps<'div'>;\n  /** 内容层（视口里包着 children 的 div）的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 滚动条轨道的部件属性，两个方向都用它（data-axis 区分 x、y） */\n  propsScrollbar?: PartProps<'div', 'aria-hidden'>;\n  /** 滑块的部件属性；大小与位置由组件写在行内样式上 */\n  propsThumb?: PartProps<'div'>;\n  children?: VNodeChild;\n}\n\n/** 滑块的最小长度（px）：内容再长也能抓得住 */\nconst MIN_THUMB = 20;\n\n/** ScrollArea 的样式：root、viewport、y、x、both、wideContent */\nexport const scrollAreaStyles = css.create({\n  // flex 纵向：使用方只给 max-height 时视口也能被限制住（视口 min-height: 0 可以收缩）\n  root: { position: 'relative', display: 'flex', flexDirection: 'column', overflow: 'hidden' },\n  viewport: {\n    flexGrow: 1,\n    minHeight: 0,\n    // 隐藏原生滚动条：Firefox、新版 Chromium 与 Safari 用标准属性，旧版 WebKit 用伪元素\n    scrollbarWidth: 'none',\n    '::-webkit-scrollbar': { display: 'none' },\n    // 焦点环画在里面：外层 overflow: hidden 会裁掉画在外面的\n    outlineOffset: `calc(-1 * ${t.borderWidths.sm})`,\n  },\n  y: { overflowX: 'hidden', overflowY: 'auto' },\n  x: { overflowX: 'auto', overflowY: 'hidden' },\n  both: { overflow: 'auto' },\n  // 横向滚动时内容按自己的宽度撑开，宽度变化也能被 ResizeObserver 观察到\n  wideContent: { display: 'table', minWidth: '_full' },\n});\n\n/** OverlayScrollbar 的样式：track、hidden、y、x、yCorner、xCorner、thumb 等 */\nexport const scrollAreaBarStyles = css.create({\n  track: {\n    position: 'absolute',\n    zIndex: 1,\n    boxSizing: 'border-box',\n    touchAction: 'none',\n    userSelect: 'none',\n    transition: `opacity ${t.durations.md} ${t.easings.standard}`,\n  },\n  hidden: { opacity: 0, pointerEvents: 'none' },\n  // 整页的滚动条：隐藏时仍接收指针，指针移到窗口边缘就显示出来\n  hiddenReveal: { opacity: 0 },\n  // 整页的滚动条固定在视口一侧，盖在粘性顶栏之上\n  fixed: { position: 'fixed', zIndex: 20 },\n  // 粗细：0.5em 的滑块加两侧各 2px 的留白\n  y: {\n    insetBlock: 0,\n    insetInlineEnd: 0,\n    width: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})`,\n  },\n  x: {\n    insetInline: 0,\n    bottom: 0,\n    height: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})`,\n  },\n  // 两个方向都有时让出右下角，两条滚动条不重叠\n  yCorner: { bottom: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})` },\n  xCorner: { insetInlineEnd: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})` },\n  thumb: {\n    position: 'absolute',\n    borderRadius: '_full',\n    // 半透明：浮在内容上也不完全遮住下面的文字\n    backgroundColor: {\n      default: `color-mix(in srgb, ${t.colors.textMuted} 50%, transparent)`,\n      ':hover': `color-mix(in srgb, ${t.colors.textMuted} 75%, transparent)`,\n    },\n    transition: `background-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  thumbY: { top: 0, insetInline: '_borderWidths.sm' },\n  thumbX: { insetInlineStart: 0, insetBlock: '_borderWidths.sm' },\n});\n\n/** OverlayScrollbar 的属性 */\nexport interface OverlayScrollbarProps {\n  /** 方向 */\n  axis: 'x' | 'y';\n  /** 真正滚动的元素；整页滚动时是 document.scrollingElement（滚动事件在 window 上） */\n  viewport: HTMLElement | null;\n  /** 内容：它的尺寸变化时重新计算滑块 */\n  content: HTMLElement | null;\n  /** 指针进入它时显示滚动条（type 为 hover 时）；不给时只看指针是否在滚动条上 */\n  hoverTarget?: HTMLElement | null;\n  /** 什么时候显示，默认 hover */\n  type?: keyof ScrollbarTypes;\n  /** 停止滚动、指针离开后多久淡出（毫秒），默认 600 */\n  hideDelay?: number;\n  /** 两个方向都有滚动条：让出右下角 */\n  corner?: boolean;\n  /** 固定在视口一侧（整页的滚动条）：隐藏时仍接收指针，移到窗口边缘就显示 */\n  fixed?: boolean;\n  /** 轨道的部件属性 */\n  propsScrollbar?: PartProps<'div', 'aria-hidden'>;\n  /** 滑块的部件属性 */\n  propsThumb?: PartProps<'div'>;\n  /** 内容是否超出视口（这个方向能不能滚动）变化时调用 */\n  onOverflowChange?: (overflowing: boolean) => void;\n}\n\n/**\n * 一个方向的浮层滚动条：轨道与滑块，滚动、悬停时出现，停下后淡出；拖动滑块、点击轨道翻页、滚轮转交给视口。\n * ScrollArea 与 PageScrollbar 都用它。单独一个组件，滚动、悬停只让它自己重新渲染，不牵动内容\n */\nexport const OverlayScrollbar = _component(\n  ({\n    axis,\n    viewport,\n    content,\n    hoverTarget,\n    type = 'hover',\n    hideDelay = 600,\n    corner = false,\n    fixed = false,\n    propsScrollbar,\n    propsThumb,\n    onOverflowChange,\n  }: OverlayScrollbarProps) => {\n    let track = _state.raw<HTMLElement | null>(null);\n    let thumb = _state.raw<HTMLElement | null>(null);\n    let overflowing = _state(false);\n    let active = _state(false);\n    let hovering = false;\n    let dragging = false;\n    let hideTimer: ReturnType<typeof setTimeout> | undefined;\n\n    /** 视口的尺寸与滚动位置；横向时滚动位置取绝对值（从右到左排版时 scrollLeft 为负） */\n    const measure = (element: HTMLElement) =>\n      axis === 'y'\n        ? { view: element.clientHeight, size: element.scrollHeight, position: element.scrollTop }\n        : {\n            view: element.clientWidth,\n            size: element.scrollWidth,\n            position: Math.abs(element.scrollLeft),\n          };\n    /** 从右到左排版时横向的方向要反过来 */\n    const sign = () => (axis === 'x' && viewport && isRtl(viewport) ? -1 : 1);\n    const thumbSize = (view: number, size: number, trackSize: number) =>\n      Math.max(MIN_THUMB, (view / size) * trackSize);\n\n    // 滑块的大小与位置随滚动频繁变化，直接写到元素上，不经过渲染。read 量、返回的函数写\n    function read() {\n      if (!viewport || !track || !thumb) return;\n      // 看不见的（收起的 Collapse 是 hidden=\"until-found\"，即 content-visibility: hidden）不量：\n      // 在这种子树里读尺寸，浏览器每次都要为它单独排一遍版。显示出来时 ResizeObserver 会再通知\n      if (viewport.checkVisibility?.() === false) return;\n      const element = thumb;\n      const { view, size, position } = measure(viewport);\n      const trackSize = axis === 'y' ? track.clientHeight : track.clientWidth;\n      const length = thumbSize(view, size, trackSize);\n      const offset = size > view ? (position / (size - view)) * (trackSize - length) : 0;\n      const direction = sign();\n      return () => {\n        const next = size > view + 1;\n        if (next !== overflowing) {\n          overflowing = next;\n          onOverflowChange?.(next);\n        }\n        if (axis === 'y') {\n          element.style.height = `${length}px`;\n          element.style.transform = `translateY(${offset}px)`;\n        } else {\n          element.style.width = `${length}px`;\n          element.style.transform = `translateX(${direction * offset}px)`;\n        }\n      };\n    }\n    // 滚动时立即对齐；挂载、尺寸变化时合并到这一轮的先读后写里（一页十几个滚动区域只排一次版）\n    const sync = () => read()?.();\n    const syncLater = () => batchLayout(read);\n\n    // 整页的滚动条（fixed）不论 type，指针移到它上面都显示\n    const revealsOnHover = () => type === 'hover' || fixed;\n\n    function show() {\n      active = true;\n      scheduleHide();\n    }\n    function scheduleHide() {\n      clearTimeout(hideTimer);\n      hideTimer = setTimeout(() => {\n        if (!dragging && !(revealsOnHover() && hovering)) active = false;\n      }, hideDelay);\n    }\n\n    _effect(() => {\n      if (!viewport || !content) return;\n      const element = viewport;\n      // 整页滚动时滚动事件发在 window 上；窗口高度变了（不改变内容尺寸）也要重算\n      const scroller = element === document.scrollingElement ? window : element;\n      const hover = hoverTarget ?? track;\n      syncLater();\n      const onScroll = () => {\n        sync();\n        show();\n      };\n      const onEnter = () => {\n        hovering = true;\n        if (!revealsOnHover()) return;\n        // 绝对定位的后代（图表的提示框）撑出、收回溢出时内容尺寸不变，ResizeObserver 察觉不到，显示前重新量\n        sync();\n        show();\n      };\n      const onLeave = () => {\n        hovering = false;\n        scheduleHide();\n      };\n      scroller.addEventListener('scroll', onScroll, { passive: true });\n      if (scroller === window) window.addEventListener('resize', sync);\n      hover?.addEventListener('pointerenter', onEnter);\n      hover?.addEventListener('pointerleave', onLeave);\n      return () => {\n        scroller.removeEventListener('scroll', onScroll);\n        window.removeEventListener('resize', sync);\n        hover?.removeEventListener('pointerenter', onEnter);\n        hover?.removeEventListener('pointerleave', onLeave);\n        clearTimeout(hideTimer);\n      };\n    });\n    useResizeObserver(() => [viewport, content], syncLater);\n\n    /** 拖动滑块：位移按“可滚动距离 / 滑块可移动距离”换算成滚动距离 */\n    function dragThumb(event: PointerEvent) {\n      if (!viewport || !track || !thumb) return;\n      event.stopPropagation();\n      const element = viewport;\n      const { view, size, position } = measure(element);\n      const trackSize = axis === 'y' ? track.clientHeight : track.clientWidth;\n      const ratio = (size - view) / (trackSize - thumbSize(view, size, trackSize));\n      const direction = sign();\n      dragging = true;\n      startMove(event, {\n        onMove: ({ deltaX, deltaY }) => {\n          const target = position + (axis === 'y' ? deltaY : direction * deltaX) * ratio;\n          if (axis === 'y') element.scrollTop = target;\n          else element.scrollLeft = direction * target;\n        },\n        onEnd: () => {\n          dragging = false;\n          scheduleHide();\n        },\n      });\n    }\n\n    /** 点击轨道的空白处：朝那一侧翻一页 */\n    function pageTo(event: PointerEvent) {\n      if (!viewport || !thumb || event.button !== 0) return;\n      const rect = thumb.getBoundingClientRect();\n      const { view } = measure(viewport);\n      // 点在滑块之前（上方；横向时为起始一侧）就往回翻\n      const rtl = sign() === -1;\n      const before =\n        axis === 'y'\n          ? event.clientY < rect.top\n          : rtl\n            ? event.clientX > rect.right\n            : event.clientX < rect.left;\n      const page = (before ? -1 : 1) * view * 0.9;\n      viewport.scrollBy(axis === 'y' ? { top: page } : { left: sign() * page });\n    }\n\n    /** 滚动条盖在视口上面，滚轮落在它上面时转交给视口 */\n    function forwardWheel(event: WheelEvent) {\n      if (!viewport) return;\n      event.preventDefault();\n      viewport.scrollBy({ left: event.deltaX, top: event.deltaY });\n    }\n\n    return () => {\n      const visible = overflowing && (type === 'always' || active);\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                scrollAreaBarStyles.track,\n                scrollAreaBarStyles[axis],\n                fixed && scrollAreaBarStyles.fixed,\n                corner &&\n                  (axis === 'y' ? scrollAreaBarStyles.yCorner : scrollAreaBarStyles.xCorner),\n              ],\n            },\n            propsScrollbar,\n            {\n              sx:\n                !visible && (fixed ? scrollAreaBarStyles.hiddenReveal : scrollAreaBarStyles.hidden),\n              ref: _toRef(track),\n              'aria-hidden': true,\n              onPointerdown: pageTo,\n              onWheel: forwardWheel,\n            },\n          )}\n          data-axis={axis}\n          data-state={visible ? 'visible' : 'hidden'}\n        >\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  scrollAreaBarStyles.thumb,\n                  axis === 'y' ? scrollAreaBarStyles.thumbY : scrollAreaBarStyles.thumbX,\n                ],\n              },\n              propsThumb,\n              { ref: _toRef(thumb), onPointerdown: dragThumb },\n            )}\n          />\n        </div>\n      );\n    };\n  },\n  { name: 'OverlayScrollbar' },\n);\n\n/** 滚动区域：原生滚动 + 半透明的浮层滚动条，出现与消失都不占位 */\nexport const ScrollArea = _component(\n  ({\n    axis = 'y',\n    type = 'hover',\n    hideDelay = 600,\n    focusable = true,\n    propsViewport,\n    propsContent,\n    propsScrollbar,\n    propsThumb,\n    children,\n    ...rest\n  }: ScrollAreaProps) => {\n    let root = _state.raw<HTMLElement | null>(null);\n    let viewport = _state.raw<HTMLElement | null>(null);\n    let content = _state.raw<HTMLElement | null>(null);\n    // 哪个方向的内容超出了视口：能滚动时视口才进 Tab 顺序，没超出的侧栏、代码块不多一个空的 Tab 位\n    let overflowing = _state({ x: false, y: false });\n\n    return () => {\n      const both = axis === 'both';\n      const bar = (barAxis: 'x' | 'y') => (\n        <OverlayScrollbar\n          axis={barAxis}\n          hoverTarget={root}\n          viewport={viewport}\n          content={content}\n          type={type}\n          hideDelay={hideDelay}\n          corner={both}\n          propsScrollbar={propsScrollbar}\n          propsThumb={propsThumb}\n          onOverflowChange={(value) => (overflowing = { ...overflowing, [barAxis]: value })}\n        />\n      );\n      return (\n        <div {...mergeAttrs<'div'>({ sx: scrollAreaStyles.root }, rest, { ref: _toRef(root) })}>\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [focusRingStyles.visible, scrollAreaStyles.viewport, scrollAreaStyles[axis]],\n              },\n              propsViewport,\n              {\n                ref: _toRef(viewport),\n                ...(focusable && (overflowing.x || overflowing.y) && { tabindex: 0 }),\n              },\n            )}\n          >\n            <div\n              {...mergeAttrs<'div'>(\n                { sx: axis !== 'y' && scrollAreaStyles.wideContent },\n                propsContent,\n                {\n                  ref: _toRef(content),\n                },\n              )}\n            >\n              {children}\n            </div>\n          </div>\n          {axis !== 'x' && bar('y')}\n          {axis !== 'y' && bar('x')}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"ScrollArea.js","names":["_vtp_readonlyProp","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","_vtp_childrenProp","_vtp_restProps"],"sources":["../../src/layout/ScrollArea.tsx"],"sourcesContent":["/**\n * 滚动区域：浮层滚动条。滚动仍是浏览器原生的（触控板惯性、键盘、页内搜索、无障碍都不变），\n * 只把原生滚动条隐藏，换成半透明、绝对定位浮在内容上方的滚动条：出现、消失都不占位，不改变布局尺寸。\n * 参考 Radix ScrollArea。\n *\n *   <ScrollArea sx={styles.panel}>…</ScrollArea>            高度（或最大高度）由使用方给\n *   <ScrollArea axis=\"both\" type=\"always\">…</ScrollArea>\n *\n * 滚动条对读屏隐藏（滚动由视口本身承担）；内容超出时视口可聚焦，键盘照常滚动。\n * 滚动条本身是 OverlayScrollbar：整页的浮层滚动条（PageScrollbar）也用它。\n *\n * 要在外面拿到真正滚动的元素（虚拟滚动、自己控制滚动）时用 propsViewport 的 ref：\n *   <ScrollArea propsViewport={{ ref: (element) => (scroller = toElement(element)) }}>…</ScrollArea>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { startMove } from '../utils/dom/move';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { isRtl } from '../utils/dom/direction';\nimport { batchLayout } from '../utils/dom/layout-batch';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { t } from '../config/theme/tokens';\n\n/** 哪个方向可以滚动 */\nexport interface ScrollAreaAxes {\n  /** 纵向（默认），横向超出的部分裁掉 */\n  y: unknown;\n  /** 横向，纵向超出的部分裁掉 */\n  x: unknown;\n  /** 两个方向 */\n  both: unknown;\n}\n\n/** 滚动条什么时候显示 */\nexport interface ScrollbarTypes {\n  /** 指针在区域上方或正在滚动时显示（默认） */\n  hover: unknown;\n  /** 只在滚动时显示，停下后淡出 */\n  scroll: unknown;\n  /** 内容超出时一直显示 */\n  always: unknown;\n}\n\n/** 未声明的属性落到外层（决定尺寸的那一层）；视口的属性（aria-label 等）用 propsViewport */\nexport interface ScrollAreaProps extends PartProps<'div'> {\n  /** 可以滚动的方向，默认 y */\n  axis?: keyof ScrollAreaAxes;\n  /** 滚动条什么时候显示，默认 hover */\n  type?: keyof ScrollbarTypes;\n  /** 停止滚动、指针离开后多久淡出（毫秒），默认 600 */\n  hideDelay?: number;\n  /**\n   * 内容超出时视口可以用 Tab 聚焦（键盘滚动），默认 true。视口本身另有角色并自己管焦点（列表框、菜单），\n   * 或焦点在别处、由那里控制滚动（命令面板的输入框）时关掉，tabindex 由使用方经 propsViewport 给\n   */\n  focusable?: boolean;\n  /** 视口（真正滚动的元素）的部件属性；ref 拿到它可以自己控制滚动 */\n  propsViewport?: PartProps<'div'>;\n  /** 内容层（视口里包着 children 的 div）的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 滚动条轨道的部件属性，两个方向都用它（data-axis 区分 x、y） */\n  propsScrollbar?: PartProps<'div', 'aria-hidden'>;\n  /** 滑块的部件属性；大小与位置由组件写在行内样式上 */\n  propsThumb?: PartProps<'div'>;\n  children?: VNodeChild;\n}\n\n/** 滑块的最小长度（px）：内容再长也能抓得住 */\nconst MIN_THUMB = 20;\n\n/** ScrollArea 的样式：root、viewport、y、x、both、wideContent */\nexport const scrollAreaStyles = css.create({\n  // flex 纵向：使用方只给 max-height 时视口也能被限制住（视口 min-height: 0 可以收缩）\n  root: { position: 'relative', display: 'flex', flexDirection: 'column', overflow: 'hidden' },\n  viewport: {\n    flexGrow: 1,\n    minHeight: 0,\n    // 隐藏原生滚动条：Firefox、新版 Chromium 与 Safari 用标准属性，旧版 WebKit 用伪元素\n    scrollbarWidth: 'none',\n    '::-webkit-scrollbar': { display: 'none' },\n    // 焦点环画在里面：外层 overflow: hidden 会裁掉画在外面的\n    outlineOffset: `calc(-1 * ${t.borderWidths.sm})`,\n  },\n  y: { overflowX: 'hidden', overflowY: 'auto' },\n  x: { overflowX: 'auto', overflowY: 'hidden' },\n  both: { overflow: 'auto' },\n  // 横向滚动时内容按自己的宽度撑开，宽度变化也能被 ResizeObserver 观察到\n  wideContent: { display: 'table', minWidth: '_full' },\n});\n\n/** OverlayScrollbar 的样式：track、hidden、y、x、yCorner、xCorner、thumb 等 */\nexport const scrollAreaBarStyles = css.create({\n  track: {\n    position: 'absolute',\n    zIndex: 1,\n    boxSizing: 'border-box',\n    touchAction: 'none',\n    userSelect: 'none',\n    transition: `opacity ${t.durations.md} ${t.easings.standard}`,\n  },\n  hidden: { opacity: 0, pointerEvents: 'none' },\n  // 整页的滚动条：隐藏时仍接收指针，指针移到窗口边缘就显示出来\n  hiddenReveal: { opacity: 0 },\n  // 整页的滚动条固定在视口一侧，盖在粘性顶栏之上\n  fixed: { position: 'fixed', zIndex: 20 },\n  // 粗细：0.5em 的滑块加两侧各 2px 的留白\n  y: {\n    insetBlock: 0,\n    insetInlineEnd: 0,\n    width: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})`,\n  },\n  x: {\n    insetInline: 0,\n    bottom: 0,\n    height: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})`,\n  },\n  // 两个方向都有时让出右下角，两条滚动条不重叠\n  yCorner: { bottom: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})` },\n  xCorner: { insetInlineEnd: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})` },\n  thumb: {\n    position: 'absolute',\n    borderRadius: '_full',\n    // 半透明：浮在内容上也不完全遮住下面的文字\n    backgroundColor: {\n      default: `color-mix(in srgb, ${t.colors.textMuted} 50%, transparent)`,\n      ':hover': `color-mix(in srgb, ${t.colors.textMuted} 75%, transparent)`,\n    },\n    transition: `background-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  thumbY: { top: 0, insetInline: '_borderWidths.sm' },\n  thumbX: { insetInlineStart: 0, insetBlock: '_borderWidths.sm' },\n});\n\n/** OverlayScrollbar 的属性 */\nexport interface OverlayScrollbarProps {\n  /** 方向 */\n  axis: 'x' | 'y';\n  /** 真正滚动的元素；整页滚动时是 document.scrollingElement（滚动事件在 window 上） */\n  viewport: HTMLElement | null;\n  /** 内容：它的尺寸变化时重新计算滑块 */\n  content: HTMLElement | null;\n  /** 指针进入它时显示滚动条（type 为 hover 时）；不给时只看指针是否在滚动条上 */\n  hoverTarget?: HTMLElement | null;\n  /** 什么时候显示，默认 hover */\n  type?: keyof ScrollbarTypes;\n  /** 停止滚动、指针离开后多久淡出（毫秒），默认 600 */\n  hideDelay?: number;\n  /** 两个方向都有滚动条：让出右下角 */\n  corner?: boolean;\n  /** 固定在视口一侧（整页的滚动条）：隐藏时仍接收指针，移到窗口边缘就显示 */\n  fixed?: boolean;\n  /** 轨道的部件属性 */\n  propsScrollbar?: PartProps<'div', 'aria-hidden'>;\n  /** 滑块的部件属性 */\n  propsThumb?: PartProps<'div'>;\n  /** 内容是否超出视口（这个方向能不能滚动）变化时调用 */\n  onOverflowChange?: (overflowing: boolean) => void;\n}\n\n/**\n * 一个方向的浮层滚动条：轨道与滑块，滚动、悬停时出现，停下后淡出；拖动滑块、点击轨道翻页、滚轮转交给视口。\n * ScrollArea 与 PageScrollbar 都用它。单独一个组件，滚动、悬停只让它自己重新渲染，不牵动内容\n */\nexport const OverlayScrollbar = _component(\n  ({\n    axis,\n    viewport,\n    content,\n    hoverTarget,\n    type = 'hover',\n    hideDelay = 600,\n    corner = false,\n    fixed = false,\n    propsScrollbar,\n    propsThumb,\n    onOverflowChange,\n  }: OverlayScrollbarProps) => {\n    let track = _state.raw<HTMLElement | null>(null);\n    let thumb = _state.raw<HTMLElement | null>(null);\n    let overflowing = _state(false);\n    let active = _state(false);\n    let hovering = false;\n    let dragging = false;\n    let hideTimer: ReturnType<typeof setTimeout> | undefined;\n\n    /** 视口的尺寸与滚动位置；横向时滚动位置取绝对值（从右到左排版时 scrollLeft 为负） */\n    const measure = (element: HTMLElement) =>\n      axis === 'y'\n        ? { view: element.clientHeight, size: element.scrollHeight, position: element.scrollTop }\n        : {\n            view: element.clientWidth,\n            size: element.scrollWidth,\n            position: Math.abs(element.scrollLeft),\n          };\n    /** 从右到左排版时横向的方向要反过来 */\n    const sign = () => (axis === 'x' && viewport && isRtl(viewport) ? -1 : 1);\n    const thumbSize = (view: number, size: number, trackSize: number) =>\n      Math.max(MIN_THUMB, (view / size) * trackSize);\n\n    // 滑块的大小与位置随滚动频繁变化，直接写到元素上，不经过渲染。read 量、返回的函数写\n    function read() {\n      if (!viewport || !track || !thumb) return;\n      // 看不见的（收起的 Collapse 是 hidden=\"until-found\"，即 content-visibility: hidden）不量：\n      // 在这种子树里读尺寸，浏览器每次都要为它单独排一遍版。显示出来时 ResizeObserver 会再通知\n      if (viewport.checkVisibility?.() === false) return;\n      const element = thumb;\n      const { view, size, position } = measure(viewport);\n      const trackSize = axis === 'y' ? track.clientHeight : track.clientWidth;\n      const length = thumbSize(view, size, trackSize);\n      const offset = size > view ? (position / (size - view)) * (trackSize - length) : 0;\n      const direction = sign();\n      return () => {\n        const next = size > view + 1;\n        if (next !== overflowing) {\n          overflowing = next;\n          onOverflowChange?.(next);\n        }\n        if (axis === 'y') {\n          element.style.height = `${length}px`;\n          element.style.transform = `translateY(${offset}px)`;\n        } else {\n          element.style.width = `${length}px`;\n          element.style.transform = `translateX(${direction * offset}px)`;\n        }\n      };\n    }\n    // 滚动时立即对齐；挂载、尺寸变化时合并到这一轮的先读后写里（一页十几个滚动区域只排一次版）\n    const sync = () => read()?.();\n    const syncLater = () => batchLayout(read);\n\n    // 整页的滚动条（fixed）不论 type，指针移到它上面都显示\n    const revealsOnHover = () => type === 'hover' || fixed;\n\n    function show() {\n      active = true;\n      scheduleHide();\n    }\n    function scheduleHide() {\n      clearTimeout(hideTimer);\n      hideTimer = setTimeout(() => {\n        if (!dragging && !(revealsOnHover() && hovering)) active = false;\n      }, hideDelay);\n    }\n\n    _effect(() => {\n      if (!viewport || !content) return;\n      const element = viewport;\n      // 整页滚动时滚动事件发在 window 上；窗口高度变了（不改变内容尺寸）也要重算\n      const scroller = element === document.scrollingElement ? window : element;\n      const hover = hoverTarget ?? track;\n      syncLater();\n      const onScroll = () => {\n        sync();\n        show();\n      };\n      const onEnter = () => {\n        hovering = true;\n        if (!revealsOnHover()) return;\n        // 绝对定位的后代（图表的提示框）撑出、收回溢出时内容尺寸不变，ResizeObserver 察觉不到，显示前重新量\n        sync();\n        show();\n      };\n      const onLeave = () => {\n        hovering = false;\n        scheduleHide();\n      };\n      scroller.addEventListener('scroll', onScroll, { passive: true });\n      if (scroller === window) window.addEventListener('resize', sync);\n      hover?.addEventListener('pointerenter', onEnter);\n      hover?.addEventListener('pointerleave', onLeave);\n      return () => {\n        scroller.removeEventListener('scroll', onScroll);\n        window.removeEventListener('resize', sync);\n        hover?.removeEventListener('pointerenter', onEnter);\n        hover?.removeEventListener('pointerleave', onLeave);\n        clearTimeout(hideTimer);\n      };\n    });\n    useResizeObserver(() => [viewport, content], syncLater);\n\n    /** 拖动滑块：位移按“可滚动距离 / 滑块可移动距离”换算成滚动距离 */\n    function dragThumb(event: PointerEvent) {\n      if (!viewport || !track || !thumb) return;\n      event.stopPropagation();\n      const element = viewport;\n      const { view, size, position } = measure(element);\n      const trackSize = axis === 'y' ? track.clientHeight : track.clientWidth;\n      const ratio = (size - view) / (trackSize - thumbSize(view, size, trackSize));\n      const direction = sign();\n      dragging = true;\n      startMove(event, {\n        onMove: ({ deltaX, deltaY }) => {\n          const target = position + (axis === 'y' ? deltaY : direction * deltaX) * ratio;\n          if (axis === 'y') element.scrollTop = target;\n          else element.scrollLeft = direction * target;\n        },\n        onEnd: () => {\n          dragging = false;\n          scheduleHide();\n        },\n      });\n    }\n\n    /** 点击轨道的空白处：朝那一侧翻一页 */\n    function pageTo(event: PointerEvent) {\n      if (!viewport || !thumb || event.button !== 0) return;\n      const rect = thumb.getBoundingClientRect();\n      const { view } = measure(viewport);\n      // 点在滑块之前（上方；横向时为起始一侧）就往回翻\n      const rtl = sign() === -1;\n      const before =\n        axis === 'y'\n          ? event.clientY < rect.top\n          : rtl\n            ? event.clientX > rect.right\n            : event.clientX < rect.left;\n      const page = (before ? -1 : 1) * view * 0.9;\n      viewport.scrollBy(axis === 'y' ? { top: page } : { left: sign() * page });\n    }\n\n    /** 滚动条盖在视口上面，滚轮落在它上面时转交给视口 */\n    function forwardWheel(event: WheelEvent) {\n      if (!viewport) return;\n      event.preventDefault();\n      viewport.scrollBy({ left: event.deltaX, top: event.deltaY });\n    }\n\n    return () => {\n      const visible = overflowing && (type === 'always' || active);\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                scrollAreaBarStyles.track,\n                scrollAreaBarStyles[axis],\n                fixed && scrollAreaBarStyles.fixed,\n                corner &&\n                  (axis === 'y' ? scrollAreaBarStyles.yCorner : scrollAreaBarStyles.xCorner),\n              ],\n            },\n            propsScrollbar,\n            {\n              sx:\n                !visible && (fixed ? scrollAreaBarStyles.hiddenReveal : scrollAreaBarStyles.hidden),\n              ref: _toRef(track),\n              'aria-hidden': true,\n              onPointerdown: pageTo,\n              onWheel: forwardWheel,\n            },\n          )}\n          data-axis={axis}\n          data-state={visible ? 'visible' : 'hidden'}\n        >\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  scrollAreaBarStyles.thumb,\n                  axis === 'y' ? scrollAreaBarStyles.thumbY : scrollAreaBarStyles.thumbX,\n                ],\n              },\n              propsThumb,\n              { ref: _toRef(thumb), onPointerdown: dragThumb },\n            )}\n          />\n        </div>\n      );\n    };\n  },\n  { name: 'OverlayScrollbar' },\n);\n\n/** 滚动区域：原生滚动 + 半透明的浮层滚动条，出现与消失都不占位 */\nexport const ScrollArea = _component(\n  ({\n    axis = 'y',\n    type = 'hover',\n    hideDelay = 600,\n    focusable = true,\n    propsViewport,\n    propsContent,\n    propsScrollbar,\n    propsThumb,\n    children,\n    ...rest\n  }: ScrollAreaProps) => {\n    let root = _state.raw<HTMLElement | null>(null);\n    let viewport = _state.raw<HTMLElement | null>(null);\n    let content = _state.raw<HTMLElement | null>(null);\n    // 哪个方向的内容超出了视口：能滚动时视口才进 Tab 顺序，没超出的侧栏、代码块不多一个空的 Tab 位\n    let overflowing = _state({ x: false, y: false });\n\n    return () => {\n      const both = axis === 'both';\n      const bar = (barAxis: 'x' | 'y') => (\n        <OverlayScrollbar\n          axis={barAxis}\n          hoverTarget={root}\n          viewport={viewport}\n          content={content}\n          type={type}\n          hideDelay={hideDelay}\n          corner={both}\n          propsScrollbar={propsScrollbar}\n          propsThumb={propsThumb}\n          onOverflowChange={(value) => (overflowing = { ...overflowing, [barAxis]: value })}\n        />\n      );\n      return (\n        <div {...mergeAttrs<'div'>({ sx: scrollAreaStyles.root }, rest, { ref: _toRef(root) })}>\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [focusRingStyles.visible, scrollAreaStyles.viewport, scrollAreaStyles[axis]],\n              },\n              propsViewport,\n              {\n                ref: _toRef(viewport),\n                ...(focusable && (overflowing.x || overflowing.y) && { tabindex: 0 }),\n              },\n            )}\n          >\n            <div\n              {...mergeAttrs<'div'>(\n                { sx: axis !== 'y' && scrollAreaStyles.wideContent },\n                propsContent,\n                {\n                  ref: _toRef(content),\n                },\n              )}\n            >\n              {children}\n            </div>\n          </div>\n          {axis !== 'x' && bar('y')}\n          {axis !== 'y' && bar('x')}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/layout/Separator.js

@@ -1,6 +1,6 @@
 import { mergeAttrs } from "../utils/props.js";
-import { createVNode, mergeProps, useId } from "vue";
-import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, useId } from "vue";
+import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/layout/Separator.tsx
 /** 角色与朝向由组件管理 */
@@ -71,7 +71,7 @@ var Separator = /*#__PURE__*/ _component((_props, _ctx) => {
 			"aria-hidden": decorative.value ? "true" : void 0
 		}), null);
 		const line = () => createVNode("span", mergeAttrs({ sx: separatorStyles.line }, propsLine.value, { "aria-hidden": true }), null);
-		return createVNode("div", mergeProps(mergeAttrs({ sx: separatorStyles.labelled }, rest, {
+		return createVNode("div", mergeJsxProps(mergeAttrs({ sx: separatorStyles.labelled }, rest, {
 			role: decorative.value ? "none" : "separator",
 			"aria-labelledby": decorative.value ? void 0 : labelId
 		}), { "data-label-align": labelAlign.value }), [

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