@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/layout/ResizeHandle.d.ts

@@ -0,0 +1,28 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+/** 分隔条的角色、可聚焦与取值由组件管理 */
+export type ResizeHandleManaged = 'role' | 'tabindex' | 'aria-orientation' | 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax';
+/** 未声明的属性落到手柄（span）上；无障碍名称写 aria-label */
+export interface ResizeHandleProps extends PartProps<'span', ResizeHandleManaged> {
+    /** 当前宽度（px）；没有时从父元素的实际宽度起算 */
+    width?: number;
+    /** 最小宽度（px），默认 64 */
+    minWidth?: number;
+    /** 最大宽度（px），默认不限 */
+    maxWidth?: number;
+    /** 双击回到的宽度（px）；不写时双击不做什么 */
+    defaultWidth?: number;
+    /** 键盘每按一次调整多少（px），默认 16 */
+    step?: number;
+    /** 手柄在父元素的哪一边，默认 end；start 时往起始方向拖是变宽（从结束边滑入的抽屉） */
+    edge?: 'start' | 'end';
+    /** 拖动或用键盘调整了宽度（已经夹在最小、最大宽度之间） */
+    onWidthChange: (width: number) => void;
+}
+/** ResizeHandle 的样式：贴着父元素结束边的细线 */
+export declare const resizeHandleStyles: Readonly<{
+    handle: css.CompiledStyles;
+    start: css.CompiledStyles;
+}>;
+/** 宽度调整手柄：拖动或用 ← / → 调整父元素的宽度 */
+export declare const ResizeHandle: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ResizeHandleProps>;

package/dist/layout/ResizeHandle.js

@@ -0,0 +1,94 @@
+import { clamp } from "../utils/data/number.js";
+import { mergeAttrs } from "../utils/props.js";
+import { startMove } from "../utils/dom/move.js";
+import { inlineArrows, isRtl } from "../utils/dom/direction.js";
+import { useResizeObserver } from "../utils/dom/resize.js";
+import { createVNode, ref, shallowRef } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/layout/ResizeHandle.tsx
+/** 分隔条的角色、可聚焦与取值由组件管理 */
+/** 未声明的属性落到手柄（span）上；无障碍名称写 aria-label */
+/** ResizeHandle 的样式：贴着父元素结束边的细线 */
+var resizeHandleStyles = css.create({
+	handle: {
+		position: "absolute",
+		top: 0,
+		bottom: 0,
+		insetInlineEnd: 0,
+		width: "_space.sm",
+		cursor: "col-resize",
+		touchAction: "none",
+		backgroundColor: {
+			default: "transparent",
+			":hover": "_borderStrong",
+			":focus-visible": "_accent"
+		},
+		outlineStyle: "none"
+	},
+	start: {
+		insetInlineEnd: "auto",
+		insetInlineStart: 0
+	}
+});
+/** 宽度调整手柄：拖动或用 ← / → 调整父元素的宽度 */
+var ResizeHandle = /*#__PURE__*/ _component((_props, _ctx) => {
+	const width = readonlyProp(_props, "width");
+	const minWidth = readonlyProp(_props, "minWidth", 64);
+	const maxWidth = readonlyProp(_props, "maxWidth", () => Number.POSITIVE_INFINITY);
+	const defaultWidth = readonlyProp(_props, "defaultWidth");
+	const step = readonlyProp(_props, "step", 16);
+	const edge = readonlyProp(_props, "edge", "end");
+	const onWidthChange = readonlyProp(_props, "onWidthChange");
+	const rest = restProps(_props, _ctx, true);
+	const parentOf = (event) => event.currentTarget.parentElement;
+	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);
+	});
+	function onPointerdown(event) {
+		const parent = parentOf(event);
+		const from = parent.getBoundingClientRect().width;
+		const sign = (isRtl(parent) ? -1 : 1) * (edge.value === "start" ? -1 : 1);
+		event.preventDefault();
+		startMove(event, { onMove: ({ deltaX }) => onWidthChange.value(fit(from + sign * deltaX)) });
+	}
+	function onKeydown(event) {
+		const parent = parentOf(event);
+		const { forward, backward } = 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));
+	}
+	return () => createVNode("span", mergeAttrs({ sx: [resizeHandleStyles.handle, edge.value === "start" && resizeHandleStyles.start] }, rest, {
+		ref: (element) => handle.value = element instanceof HTMLElement ? element : null,
+		role: "separator",
+		tabindex: 0,
+		"aria-orientation": "vertical",
+		"aria-valuenow": width.value ?? measured.value ?? minWidth.value,
+		"aria-valuemin": minWidth.value,
+		"aria-valuemax": Number.isFinite(maxWidth.value) ? maxWidth.value : void 0,
+		onPointerdown,
+		onKeydown,
+		onDblclick: defaultWidth.value == null ? void 0 : () => onWidthChange.value(fit(defaultWidth.value))
+	}), null);
+}, {
+	name: "ResizeHandle",
+	props: [
+		"width",
+		"minWidth",
+		"maxWidth",
+		"defaultWidth",
+		"step",
+		"edge",
+		"onWidthChange"
+	]
+});
+//#endregion
+export { ResizeHandle, resizeHandleStyles };
+
+//# sourceMappingURL=ResizeHandle.js.map

package/dist/layout/ResizeHandle.js.map

@@ -0,0 +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"}

package/dist/layout/ScrollArea.d.ts

@@ -0,0 +1,99 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 哪个方向可以滚动 */
+export interface ScrollAreaAxes {
+    /** 纵向（默认），横向超出的部分裁掉 */
+    y: unknown;
+    /** 横向，纵向超出的部分裁掉 */
+    x: unknown;
+    /** 两个方向 */
+    both: unknown;
+}
+/** 滚动条什么时候显示 */
+export interface ScrollbarTypes {
+    /** 指针在区域上方或正在滚动时显示（默认） */
+    hover: unknown;
+    /** 只在滚动时显示，停下后淡出 */
+    scroll: unknown;
+    /** 内容超出时一直显示 */
+    always: unknown;
+}
+/** 未声明的属性落到外层（决定尺寸的那一层）；视口的属性（aria-label 等）用 propsViewport */
+export interface ScrollAreaProps extends PartProps<'div'> {
+    /** 可以滚动的方向，默认 y */
+    axis?: keyof ScrollAreaAxes;
+    /** 滚动条什么时候显示，默认 hover */
+    type?: keyof ScrollbarTypes;
+    /** 停止滚动、指针离开后多久淡出（毫秒），默认 600 */
+    hideDelay?: number;
+    /**
+     * 内容超出时视口可以用 Tab 聚焦（键盘滚动），默认 true。视口本身另有角色并自己管焦点（列表框、菜单），
+     * 或焦点在别处、由那里控制滚动（命令面板的输入框）时关掉，tabindex 由使用方经 propsViewport 给
+     */
+    focusable?: boolean;
+    /** 视口（真正滚动的元素）的部件属性；ref 拿到它可以自己控制滚动 */
+    propsViewport?: PartProps<'div'>;
+    /** 内容层（视口里包着 children 的 div）的部件属性 */
+    propsContent?: PartProps<'div'>;
+    /** 滚动条轨道的部件属性，两个方向都用它（data-axis 区分 x、y） */
+    propsScrollbar?: PartProps<'div', 'aria-hidden'>;
+    /** 滑块的部件属性；大小与位置由组件写在行内样式上 */
+    propsThumb?: PartProps<'div'>;
+    children?: VNodeChild;
+}
+/** ScrollArea 的样式：root、viewport、y、x、both、wideContent */
+export declare const scrollAreaStyles: Readonly<{
+    both: css.CompiledStyles;
+    root: css.CompiledStyles;
+    viewport: css.CompiledStyles;
+    wideContent: css.CompiledStyles;
+    x: css.CompiledStyles;
+    y: css.CompiledStyles;
+}>;
+/** OverlayScrollbar 的样式：track、hidden、y、x、yCorner、xCorner、thumb 等 */
+export declare const scrollAreaBarStyles: Readonly<{
+    fixed: css.CompiledStyles;
+    hidden: css.CompiledStyles;
+    hiddenReveal: css.CompiledStyles;
+    thumb: css.CompiledStyles;
+    thumbX: css.CompiledStyles;
+    thumbY: css.CompiledStyles;
+    track: css.CompiledStyles;
+    x: css.CompiledStyles;
+    xCorner: css.CompiledStyles;
+    y: css.CompiledStyles;
+    yCorner: css.CompiledStyles;
+}>;
+/** OverlayScrollbar 的属性 */
+export interface OverlayScrollbarProps {
+    /** 方向 */
+    axis: 'x' | 'y';
+    /** 真正滚动的元素；整页滚动时是 document.scrollingElement（滚动事件在 window 上） */
+    viewport: HTMLElement | null;
+    /** 内容：它的尺寸变化时重新计算滑块 */
+    content: HTMLElement | null;
+    /** 指针进入它时显示滚动条（type 为 hover 时）；不给时只看指针是否在滚动条上 */
+    hoverTarget?: HTMLElement | null;
+    /** 什么时候显示，默认 hover */
+    type?: keyof ScrollbarTypes;
+    /** 停止滚动、指针离开后多久淡出（毫秒），默认 600 */
+    hideDelay?: number;
+    /** 两个方向都有滚动条：让出右下角 */
+    corner?: boolean;
+    /** 固定在视口一侧（整页的滚动条）：隐藏时仍接收指针，移到窗口边缘就显示 */
+    fixed?: boolean;
+    /** 轨道的部件属性 */
+    propsScrollbar?: PartProps<'div', 'aria-hidden'>;
+    /** 滑块的部件属性 */
+    propsThumb?: PartProps<'div'>;
+    /** 内容是否超出视口（这个方向能不能滚动）变化时调用 */
+    onOverflowChange?: (overflowing: boolean) => void;
+}
+/**
+ * 一个方向的浮层滚动条：轨道与滑块，滚动、悬停时出现，停下后淡出；拖动滑块、点击轨道翻页、滚轮转交给视口。
+ * ScrollArea 与 PageScrollbar 都用它。单独一个组件，滚动、悬停只让它自己重新渲染，不牵动内容
+ */
+export declare const OverlayScrollbar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<OverlayScrollbarProps>;
+/** 滚动区域：原生滚动 + 半透明的浮层滚动条，出现与消失都不占位 */
+export declare const ScrollArea: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ScrollAreaProps>;

package/dist/layout/ScrollArea.js

@@ -0,0 +1,344 @@
+import { t } from "../config/theme/tokens.js";
+import { mergeAttrs } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+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 * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/layout/ScrollArea.tsx
+/** 哪个方向可以滚动 */
+/** 滚动条什么时候显示 */
+/** 未声明的属性落到外层（决定尺寸的那一层）；视口的属性（aria-label 等）用 propsViewport */
+/** 滑块的最小长度（px）：内容再长也能抓得住 */
+var MIN_THUMB = 20;
+/** ScrollArea 的样式：root、viewport、y、x、both、wideContent */
+var scrollAreaStyles = css.create({
+	root: {
+		position: "relative",
+		display: "flex",
+		flexDirection: "column",
+		overflow: "hidden"
+	},
+	viewport: {
+		flexGrow: 1,
+		minHeight: 0,
+		scrollbarWidth: "none",
+		"::-webkit-scrollbar": { display: "none" },
+		outlineOffset: `calc(-1 * ${t.borderWidths.sm})`
+	},
+	y: {
+		overflowX: "hidden",
+		overflowY: "auto"
+	},
+	x: {
+		overflowX: "auto",
+		overflowY: "hidden"
+	},
+	both: { overflow: "auto" },
+	wideContent: {
+		display: "table",
+		minWidth: "_full"
+	}
+});
+/** OverlayScrollbar 的样式：track、hidden、y、x、yCorner、xCorner、thumb 等 */
+var scrollAreaBarStyles = css.create({
+	track: {
+		position: "absolute",
+		zIndex: 1,
+		boxSizing: "border-box",
+		touchAction: "none",
+		userSelect: "none",
+		transition: `opacity ${t.durations.md} ${t.easings.standard}`
+	},
+	hidden: {
+		opacity: 0,
+		pointerEvents: "none"
+	},
+	hiddenReveal: { opacity: 0 },
+	fixed: {
+		position: "fixed",
+		zIndex: 20
+	},
+	y: {
+		insetBlock: 0,
+		insetInlineEnd: 0,
+		width: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})`
+	},
+	x: {
+		insetInline: 0,
+		bottom: 0,
+		height: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})`
+	},
+	yCorner: { bottom: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})` },
+	xCorner: { insetInlineEnd: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})` },
+	thumb: {
+		position: "absolute",
+		borderRadius: "_full",
+		backgroundColor: {
+			default: `color-mix(in srgb, ${t.colors.textMuted} 50%, transparent)`,
+			":hover": `color-mix(in srgb, ${t.colors.textMuted} 75%, transparent)`
+		},
+		transition: `background-color ${t.durations.sm} ${t.easings.standard}`
+	},
+	thumbY: {
+		top: 0,
+		insetInline: "_borderWidths.sm"
+	},
+	thumbX: {
+		insetInlineStart: 0,
+		insetBlock: "_borderWidths.sm"
+	}
+});
+/** OverlayScrollbar 的属性 */
+/**
+* 一个方向的浮层滚动条：轨道与滑块，滚动、悬停时出现，停下后淡出；拖动滑块、点击轨道翻页、滚轮转交给视口。
+* ScrollArea 与 PageScrollbar 都用它。单独一个组件，滚动、悬停只让它自己重新渲染，不牵动内容
+*/
+var OverlayScrollbar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const axis = readonlyProp(_props, "axis");
+	const viewport = readonlyProp(_props, "viewport");
+	const content = readonlyProp(_props, "content");
+	const hoverTarget = readonlyProp(_props, "hoverTarget");
+	const type = readonlyProp(_props, "type", "hover");
+	const hideDelay = readonlyProp(_props, "hideDelay", 600);
+	const corner = readonlyProp(_props, "corner", false);
+	const fixed = readonlyProp(_props, "fixed", false);
+	const propsScrollbar = readonlyProp(_props, "propsScrollbar");
+	const propsThumb = readonlyProp(_props, "propsThumb");
+	const onOverflowChange = readonlyProp(_props, "onOverflowChange");
+	let track = shallowRef(null);
+	let thumb = shallowRef(null);
+	let overflowing = ref(false);
+	let active = ref(false);
+	let hovering = false;
+	let dragging = false;
+	let hideTimer;
+	/** 视口的尺寸与滚动位置；横向时滚动位置取绝对值（从右到左排版时 scrollLeft 为负） */
+	const measure = (element) => axis.value === "y" ? {
+		view: element.clientHeight,
+		size: element.scrollHeight,
+		position: element.scrollTop
+	} : {
+		view: element.clientWidth,
+		size: element.scrollWidth,
+		position: Math.abs(element.scrollLeft)
+	};
+	/** 从右到左排版时横向的方向要反过来 */
+	const sign = () => axis.value === "x" && viewport.value && isRtl(viewport.value) ? -1 : 1;
+	const thumbSize = (view, size, trackSize) => Math.max(MIN_THUMB, view / size * trackSize);
+	function read() {
+		if (!viewport.value || !track.value || !thumb.value) return;
+		if (viewport.value.checkVisibility?.() === false) return;
+		const element = thumb.value;
+		const { view, size, position } = measure(viewport.value);
+		const trackSize = axis.value === "y" ? track.value.clientHeight : track.value.clientWidth;
+		const length = thumbSize(view, size, trackSize);
+		const offset = size > view ? position / (size - view) * (trackSize - length) : 0;
+		const direction = sign();
+		return () => {
+			const next = size > view + 1;
+			if (next !== overflowing.value) {
+				overflowing.value = next;
+				onOverflowChange.value?.(next);
+			}
+			if (axis.value === "y") {
+				element.style.height = `${length}px`;
+				element.style.transform = `translateY(${offset}px)`;
+			} else {
+				element.style.width = `${length}px`;
+				element.style.transform = `translateX(${direction * offset}px)`;
+			}
+		};
+	}
+	const sync = () => read()?.();
+	const syncLater = () => batchLayout(read);
+	const revealsOnHover = () => type.value === "hover" || fixed.value;
+	function show() {
+		active.value = true;
+		scheduleHide();
+	}
+	function scheduleHide() {
+		clearTimeout(hideTimer);
+		hideTimer = setTimeout(() => {
+			if (!dragging && !(revealsOnHover() && hovering)) active.value = false;
+		}, hideDelay.value);
+	}
+	effect(() => {
+		if (!viewport.value || !content.value) return;
+		const element = viewport.value;
+		const scroller = element === document.scrollingElement ? window : element;
+		const hover = hoverTarget.value ?? track.value;
+		syncLater();
+		const onScroll = () => {
+			sync();
+			show();
+		};
+		const onEnter = () => {
+			hovering = true;
+			if (!revealsOnHover()) return;
+			sync();
+			show();
+		};
+		const onLeave = () => {
+			hovering = false;
+			scheduleHide();
+		};
+		scroller.addEventListener("scroll", onScroll, { passive: true });
+		if (scroller === window) window.addEventListener("resize", sync);
+		hover?.addEventListener("pointerenter", onEnter);
+		hover?.addEventListener("pointerleave", onLeave);
+		return () => {
+			scroller.removeEventListener("scroll", onScroll);
+			window.removeEventListener("resize", sync);
+			hover?.removeEventListener("pointerenter", onEnter);
+			hover?.removeEventListener("pointerleave", onLeave);
+			clearTimeout(hideTimer);
+		};
+	});
+	useResizeObserver(() => [viewport.value, content.value], syncLater);
+	/** 拖动滑块：位移按“可滚动距离 / 滑块可移动距离”换算成滚动距离 */
+	function dragThumb(event) {
+		if (!viewport.value || !track.value || !thumb.value) return;
+		event.stopPropagation();
+		const element = viewport.value;
+		const { view, size, position } = measure(element);
+		const trackSize = axis.value === "y" ? track.value.clientHeight : track.value.clientWidth;
+		const ratio = (size - view) / (trackSize - thumbSize(view, size, trackSize));
+		const direction = sign();
+		dragging = true;
+		startMove(event, {
+			onMove: ({ deltaX, deltaY }) => {
+				const target = position + (axis.value === "y" ? deltaY : direction * deltaX) * ratio;
+				if (axis.value === "y") element.scrollTop = target;
+				else element.scrollLeft = direction * target;
+			},
+			onEnd: () => {
+				dragging = false;
+				scheduleHide();
+			}
+		});
+	}
+	/** 点击轨道的空白处：朝那一侧翻一页 */
+	function pageTo(event) {
+		if (!viewport.value || !thumb.value || event.button !== 0) return;
+		const rect = thumb.value.getBoundingClientRect();
+		const { view } = measure(viewport.value);
+		const rtl = sign() === -1;
+		const page = ((axis.value === "y" ? event.clientY < rect.top : rtl ? event.clientX > rect.right : event.clientX < rect.left) ? -1 : 1) * view * .9;
+		viewport.value.scrollBy(axis.value === "y" ? { top: page } : { left: sign() * page });
+	}
+	/** 滚动条盖在视口上面，滚轮落在它上面时转交给视口 */
+	function forwardWheel(event) {
+		if (!viewport.value) return;
+		event.preventDefault();
+		viewport.value.scrollBy({
+			left: event.deltaX,
+			top: event.deltaY
+		});
+	}
+	return () => {
+		const visible = overflowing.value && (type.value === "always" || active.value);
+		return createVNode("div", mergeProps(mergeAttrs({ sx: [
+			scrollAreaBarStyles.track,
+			scrollAreaBarStyles[axis.value],
+			fixed.value && scrollAreaBarStyles.fixed,
+			corner.value && (axis.value === "y" ? scrollAreaBarStyles.yCorner : scrollAreaBarStyles.xCorner)
+		] }, propsScrollbar.value, {
+			sx: !visible && (fixed.value ? scrollAreaBarStyles.hiddenReveal : scrollAreaBarStyles.hidden),
+			ref: track,
+			"aria-hidden": true,
+			onPointerdown: pageTo,
+			onWheel: forwardWheel
+		}), {
+			"data-axis": axis.value,
+			"data-state": visible ? "visible" : "hidden"
+		}), [createVNode("div", mergeAttrs({ sx: [scrollAreaBarStyles.thumb, axis.value === "y" ? scrollAreaBarStyles.thumbY : scrollAreaBarStyles.thumbX] }, propsThumb.value, {
+			ref: thumb,
+			onPointerdown: dragThumb
+		}), null)]);
+	};
+}, {
+	props: [
+		"axis",
+		"viewport",
+		"content",
+		"hoverTarget",
+		"type",
+		"hideDelay",
+		"corner",
+		"fixed",
+		"propsScrollbar",
+		"propsThumb",
+		"onOverflowChange"
+	],
+	name: "OverlayScrollbar"
+});
+/** 滚动区域：原生滚动 + 半透明的浮层滚动条，出现与消失都不占位 */
+var ScrollArea = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const axis = readonlyProp(_props2, "axis", "y");
+	const type = readonlyProp(_props2, "type", "hover");
+	const hideDelay = readonlyProp(_props2, "hideDelay", 600);
+	const focusable = readonlyProp(_props2, "focusable", true);
+	const propsViewport = readonlyProp(_props2, "propsViewport");
+	const propsContent = readonlyProp(_props2, "propsContent");
+	const propsScrollbar = readonlyProp(_props2, "propsScrollbar");
+	const propsThumb = readonlyProp(_props2, "propsThumb");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	let root = shallowRef(null);
+	let viewport = shallowRef(null);
+	let content = shallowRef(null);
+	let overflowing = ref({
+		x: false,
+		y: false
+	});
+	return () => {
+		const both = axis.value === "both";
+		const bar = (barAxis) => createVNode(OverlayScrollbar, {
+			"axis": barAxis,
+			"hoverTarget": root.value,
+			"viewport": viewport.value,
+			"content": content.value,
+			"type": type.value,
+			"hideDelay": hideDelay.value,
+			"corner": both,
+			"propsScrollbar": propsScrollbar.value,
+			"propsThumb": propsThumb.value,
+			"onOverflowChange": (value) => overflowing.value = {
+				...overflowing.value,
+				[barAxis]: value
+			}
+		}, null);
+		return createVNode("div", mergeAttrs({ sx: scrollAreaStyles.root }, rest, { ref: root }), [
+			createVNode("div", mergeAttrs({ sx: [
+				focusRingStyles.visible,
+				scrollAreaStyles.viewport,
+				scrollAreaStyles[axis.value]
+			] }, propsViewport.value, {
+				ref: viewport,
+				...focusable.value && (overflowing.value.x || overflowing.value.y) && { tabindex: 0 }
+			}), [createVNode("div", mergeAttrs({ sx: axis.value !== "y" && scrollAreaStyles.wideContent }, propsContent.value, { ref: content }), [children.value])]),
+			axis.value !== "x" && bar("y"),
+			axis.value !== "y" && bar("x")
+		]);
+	};
+}, {
+	name: "ScrollArea",
+	props: [
+		"axis",
+		"type",
+		"hideDelay",
+		"focusable",
+		"propsViewport",
+		"propsContent",
+		"propsScrollbar",
+		"propsThumb"
+	]
+});
+//#endregion
+export { OverlayScrollbar, ScrollArea, scrollAreaBarStyles, scrollAreaStyles };
+
+//# sourceMappingURL=ScrollArea.js.map

package/dist/layout/ScrollArea.js.map

@@ -0,0 +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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"}