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

package/dist/layout/Separator.d.ts

@@ -0,0 +1,47 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 角色与朝向由组件管理 */
+export type SeparatorManaged = 'role' | 'aria-orientation' | 'aria-hidden';
+/** 分隔线方向 */
+export interface SeparatorOrientations {
+    /** 横线：上下两部分之间，占满容器宽度（默认） */
+    horizontal: unknown;
+    /** 竖线：左右两部分之间，在 flex 容器里随行高拉伸 */
+    vertical: unknown;
+}
+/** 文字在横线上的位置 */
+export interface SeparatorLabelAligns {
+    /** 起始边：文字在前、线在后，像一节的小标题 */
+    start: unknown;
+    /** 居中（默认）：两边各一段线，如“或者” */
+    center: unknown;
+    /** 结束边 */
+    end: unknown;
+}
+/** 未声明的属性落到 div 上 */
+export interface SeparatorProps extends PartProps<'div', SeparatorManaged> {
+    /** 方向，默认 horizontal */
+    orientation?: keyof SeparatorOrientations;
+    /** 是否只是视觉装饰，默认 true：对读屏隐藏（带文字时文字仍给读屏） */
+    decorative?: boolean;
+    /** 带文字时文字的位置，默认 center */
+    labelAlign?: keyof SeparatorLabelAligns;
+    /** 文字的部件属性 */
+    propsLabel?: PartProps<'span'>;
+    /** 两段线的部件属性 */
+    propsLine?: PartProps<'span', 'aria-hidden'>;
+    /** 线上的文字（只用于横线） */
+    children?: VNodeChild;
+}
+/** Separator 的样式：root、horizontal、vertical、labelled、label、line */
+export declare const separatorStyles: Readonly<{
+    horizontal: css.CompiledStyles;
+    label: css.CompiledStyles;
+    labelled: css.CompiledStyles;
+    line: css.CompiledStyles;
+    root: css.CompiledStyles;
+    vertical: css.CompiledStyles;
+}>;
+/** 分隔线（div）：默认装饰性、对读屏隐藏；decorative={false} 时为 role="separator"；可以带文字 */
+export declare const Separator: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SeparatorProps>;

package/dist/layout/Separator.js

@@ -0,0 +1,96 @@
+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 * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/layout/Separator.tsx
+/** 角色与朝向由组件管理 */
+/** 分隔线方向 */
+/** 文字在横线上的位置 */
+/** 未声明的属性落到 div 上 */
+/** Separator 的样式：root、horizontal、vertical、labelled、label、line */
+var separatorStyles = css.create({
+	root: {
+		flexShrink: 0,
+		backgroundColor: {
+			default: "_borderMuted",
+			_forcedColors: "CanvasText"
+		},
+		forcedColorAdjust: {
+			default: null,
+			_forcedColors: "none"
+		}
+	},
+	horizontal: {
+		height: "_borderWidths.xs",
+		width: "_full"
+	},
+	vertical: {
+		width: "_borderWidths.xs",
+		alignSelf: "stretch"
+	},
+	labelled: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_md",
+		width: "_full",
+		color: "_textMuted",
+		fontSize: "0.93em",
+		lineHeight: "_tight"
+	},
+	label: {
+		flexShrink: 0,
+		whiteSpace: "nowrap"
+	},
+	line: {
+		flexGrow: 1,
+		height: "_borderWidths.xs",
+		backgroundColor: {
+			default: "_borderMuted",
+			_forcedColors: "CanvasText"
+		},
+		forcedColorAdjust: {
+			default: null,
+			_forcedColors: "none"
+		}
+	}
+});
+/** 分隔线（div）：默认装饰性、对读屏隐藏；decorative={false} 时为 role="separator"；可以带文字 */
+var Separator = /*#__PURE__*/ _component((_props, _ctx) => {
+	const orientation = readonlyProp(_props, "orientation", "horizontal");
+	const decorative = readonlyProp(_props, "decorative", true);
+	const labelAlign = readonlyProp(_props, "labelAlign", "center");
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const propsLine = readonlyProp(_props, "propsLine");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const labelId = useId();
+	return () => {
+		if (children.value == null || orientation.value === "vertical") return createVNode("div", mergeAttrs({ sx: [separatorStyles.root, separatorStyles[orientation.value]] }, rest, {
+			role: decorative.value ? "none" : "separator",
+			"aria-orientation": !decorative.value && orientation.value === "vertical" ? "vertical" : void 0,
+			"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, {
+			role: decorative.value ? "none" : "separator",
+			"aria-labelledby": decorative.value ? void 0 : labelId
+		}), { "data-label-align": labelAlign.value }), [
+			labelAlign.value !== "start" && line(),
+			createVNode("span", mergeAttrs({ sx: separatorStyles.label }, propsLabel.value, { id: labelId }), [children.value]),
+			labelAlign.value !== "end" && line()
+		]);
+	};
+}, {
+	name: "Separator",
+	props: [
+		"orientation",
+		"decorative",
+		"labelAlign",
+		"propsLabel",
+		"propsLine"
+	]
+});
+//#endregion
+export { Separator, separatorStyles };
+
+//# sourceMappingURL=Separator.js.map

package/dist/layout/Separator.js.map

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

package/dist/layout/Splitter.d.ts

@@ -0,0 +1,75 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type IconButtonProps } from '../base/IconButton';
+import { type PartProps } from '../utils/props';
+/** 两栏的排法 */
+export interface SplitterOrientations {
+    /** 左右并排（默认） */
+    horizontal: unknown;
+    /** 上下排列 */
+    vertical: unknown;
+}
+/** 未声明的属性落到外层 div 上 */
+export interface SplitterProps extends PartProps<'div'> {
+    /** 起始一栏（左或上）的内容 */
+    start: VNodeChild;
+    /** 结束一栏（右或下）的内容 */
+    end: VNodeChild;
+    /**
+     * 两栏的排法
+     * @default 'horizontal'
+     */
+    orientation?: keyof SplitterOrientations;
+    /**
+     * 起始一栏占的百分比：父级写 _size={x} 记住拖动后的比例
+     * @default 50
+     */
+    _size?: number;
+    /**
+     * 起始一栏最少占多少（百分比）
+     * @default 20
+     */
+    minSize?: number;
+    /**
+     * 起始一栏最多占多少（百分比）
+     * @default 80
+     */
+    maxSize?: number;
+    /** 哪一侧可以收起；不写时不能收起 */
+    collapsible?: 'start' | 'end';
+    /** 可收起的那一侧收着：父级写 _collapsed={x} */
+    _collapsed?: boolean;
+    /** 分隔条的名称（读屏），默认取语言包（调整分栏） */
+    label?: string;
+    /** 外面一圈边框、圆角与表面色：独立成块（收件箱的列表与预览） */
+    bordered?: boolean;
+    /** 起始一栏（div）的部件属性 */
+    propsStart?: PartProps<'div'>;
+    /** 结束一栏（div）的部件属性 */
+    propsEnd?: PartProps<'div'>;
+    /** 分隔条（div，role="separator"）的部件属性 */
+    propsHandle?: PartProps<'div'>;
+    /** 收起、展开按钮的部件属性 */
+    propsToggle?: Partial<IconButtonProps>;
+}
+/** Splitter 的样式：root、pane、handle、line、toggle… */
+export declare const splitterStyles: Readonly<{
+    bordered: css.CompiledStyles;
+    handle: css.CompiledStyles;
+    handleHorizontal: css.CompiledStyles;
+    handleVertical: css.CompiledStyles;
+    line: css.CompiledStyles;
+    lineHorizontal: css.CompiledStyles;
+    lineVertical: css.CompiledStyles;
+    pane: css.CompiledStyles;
+    root: css.CompiledStyles;
+    toggle: css.CompiledStyles;
+    track: css.CompiledStyles;
+}>;
+/** Splitter 的动态样式：两栏与分隔条的轨道 */
+export declare const splitterDynamicStyles: Readonly<{
+    readonly columns: (template: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly rows: (template: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 分栏 */
+export declare const Splitter: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SplitterProps>;

package/dist/layout/Splitter.js

@@ -0,0 +1,236 @@
+import { clamp } from "../utils/data/number.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+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 * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "@lucide/icons";
+//#region src/layout/Splitter.tsx
+/**
+* 分栏：两栏并排（或上下），中间的分隔条可以拖动调整比例，一侧可以收起。收件箱（左列表、右预览）、
+* 主从视图、编辑器与预览这类“两块都要看、比例因人而异”的布局。
+*
+*   <Splitter _size={listSize} collapsible="end" _collapsed={previewHidden}
+*     start={<List />} end={<Preview />} />
+*
+* size 是起始一栏占的百分比（父级写 _bind 记住），拖动时夹在 minSize–maxSize 之间；双击分隔条回到初始比例。
+* 分隔条按 WAI-ARIA 的 Window Splitter 模式：role="separator"、可聚焦，←/→（上下排列时 ↑/↓）每次调 5%，
+* Home / End 到最小 / 最大，Enter 收起或展开可收起的那一侧；从右到左排版下左右键自动镜像。
+* 写了 collapsible 时分隔条中间有收起、展开的小按钮；收起的一栏不显示（hidden），另一栏占满。
+* 两栏各自滚动：内容放在里面自己的滚动容器里（或直接用 ScrollArea）。
+*/
+/** 两栏的排法 */
+/** 未声明的属性落到外层 div 上 */
+/** 键盘每按一次调多少（百分比） */
+var STEP = 5;
+/** Splitter 的样式：root、pane、handle、line、toggle… */
+var splitterStyles = css.create({
+	root: {
+		display: "grid",
+		minWidth: 0,
+		minHeight: 0,
+		height: "100%"
+	},
+	bordered: {
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_border",
+		borderRadius: "_lg",
+		backgroundColor: "_surface",
+		overflow: "hidden"
+	},
+	pane: {
+		minWidth: 0,
+		minHeight: 0,
+		overflow: "auto"
+	},
+	track: {
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	handle: {
+		position: "absolute",
+		inset: 0,
+		touchAction: "none",
+		outlineStyle: "none",
+		color: {
+			default: "_borderMuted",
+			":hover": "_borderStrong",
+			":focus-visible": "_accent"
+		}
+	},
+	handleHorizontal: {
+		width: "_space.md",
+		cursor: "col-resize"
+	},
+	handleVertical: {
+		height: "_space.md",
+		cursor: "row-resize"
+	},
+	line: {
+		position: "absolute",
+		backgroundColor: "currentColor",
+		pointerEvents: "none"
+	},
+	lineHorizontal: {
+		insetBlock: 0,
+		insetInlineStart: "calc(50% - 0.5px)",
+		width: "1px"
+	},
+	lineVertical: {
+		insetInline: 0,
+		top: "calc(50% - 0.5px)",
+		height: "1px"
+	},
+	toggle: {
+		position: "relative",
+		zIndex: 1,
+		backgroundColor: "_surface",
+		cursor: "pointer"
+	}
+});
+/** Splitter 的动态样式：两栏与分隔条的轨道 */
+var splitterDynamicStyles = css.create({
+	columns: (template) => ({ gridTemplateColumns: template }),
+	rows: (template) => ({ gridTemplateRows: template })
+});
+/** 分栏 */
+var Splitter = /*#__PURE__*/ _component((_props, _ctx) => {
+	const start = readonlyProp(_props, "start");
+	const end = readonlyProp(_props, "end");
+	const orientation = readonlyProp(_props, "orientation", "horizontal");
+	const size = bindable(_props, "_size", () => 50, _ctx.emit);
+	const minSize = readonlyProp(_props, "minSize", 20);
+	const maxSize = readonlyProp(_props, "maxSize", 80);
+	const collapsible = readonlyProp(_props, "collapsible");
+	const collapsed = bindable(_props, "_collapsed", () => false, _ctx.emit);
+	const label = readonlyProp(_props, "label");
+	const bordered = readonlyProp(_props, "bordered", false);
+	const propsStart = readonlyProp(_props, "propsStart");
+	const propsEnd = readonlyProp(_props, "propsEnd");
+	const propsHandle = readonlyProp(_props, "propsHandle");
+	const propsToggle = readonlyProp(_props, "propsToggle");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const id = useId();
+	const initialSize = untrack(() => size.value);
+	let root = shallowRef(null);
+	const horizontal = () => orientation.value === "horizontal";
+	const fit = (value) => Math.round(clamp(value, minSize.value, maxSize.value) * 10) / 10;
+	function onPointerdown(event) {
+		if (!root.value || event.target.closest("button")) return;
+		const rect = root.value.getBoundingClientRect();
+		const total = horizontal() ? rect.width : rect.height;
+		const from = size.value;
+		const sign = horizontal() && isRtl(root.value) ? -1 : 1;
+		event.preventDefault();
+		startMove(event, { onMove: ({ deltaX, deltaY }) => {
+			const delta = (horizontal() ? deltaX * sign : deltaY) / total;
+			size.value = fit(from + delta * 100);
+			if (collapsed.value) collapsed.value = false;
+		} });
+	}
+	function onKeydown(event) {
+		if (event.key === "Enter" && collapsible.value) {
+			event.preventDefault();
+			collapsed.value = !collapsed.value;
+			return;
+		}
+		const { forward, backward } = horizontal() ? inlineArrows(root.value ? isRtl(root.value) : false) : {
+			forward: "ArrowDown",
+			backward: "ArrowUp"
+		};
+		const next = event.key === forward ? size.value + STEP : event.key === backward ? size.value - STEP : event.key === "Home" ? minSize.value : event.key === "End" ? maxSize.value : null;
+		if (next == null) return;
+		event.preventDefault();
+		size.value = fit(next);
+		if (collapsed.value) collapsed.value = false;
+	}
+	/** 收起、展开按钮的箭头：指向收起的方向 */
+	const toggleIcon = () => {
+		const towardStart = collapsible.value === "start" !== collapsed.value;
+		if (horizontal()) return towardStart ? ChevronLeft : ChevronRight;
+		return towardStart ? ChevronUp : ChevronDown;
+	};
+	return () => {
+		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: [
+			splitterStyles.root,
+			bordered.value && splitterStyles.bordered,
+			horizontal() ? css.bind(splitterDynamicStyles.columns, () => [template]) : css.bind(splitterDynamicStyles.rows, () => [template])
+		] }, rest, { ref: (element) => root.value = element }), {
+			"data-orientation": orientation.value,
+			"data-collapsed": collapsed.value ? collapsible.value : void 0
+		}), [
+			createVNode("div", mergeAttrs({ sx: splitterStyles.pane }, propsStart.value, {
+				id: `${id}-start`,
+				hidden: hideStart || void 0
+			}), [start.value]),
+			createVNode("div", css.attrs(splitterStyles.track, horizontal() ? splitterStyles.handleHorizontal : splitterStyles.handleVertical), [createVNode("div", mergeAttrs({ sx: [
+				splitterStyles.handle,
+				horizontal() ? splitterStyles.handleHorizontal : splitterStyles.handleVertical,
+				focusRingStyles.visible
+			] }, propsHandle.value, {
+				role: "separator",
+				tabindex: 0,
+				"aria-label": label.value ?? lang.splitterResize,
+				"aria-orientation": horizontal() ? "vertical" : "horizontal",
+				"aria-controls": `${id}-start`,
+				"aria-valuenow": hideStart ? 0 : hideEnd ? 100 : size.value,
+				"aria-valuemin": minSize.value,
+				"aria-valuemax": maxSize.value,
+				onPointerdown,
+				onKeydown,
+				onDblclick: () => size.value = fit(initialSize)
+			}), [createVNode("span", css.attrs(splitterStyles.line, horizontal() ? splitterStyles.lineHorizontal : splitterStyles.lineVertical), null)]), collapsible.value && createVNode(IconButton, mergePartProps({
+				icon: toggleIcon(),
+				size: "xs",
+				variant: "outline",
+				tone: "neutral",
+				sx: splitterStyles.toggle,
+				"aria-label": collapsed.value ? lang.splitterExpand : lang.splitterCollapse
+			}, propsToggle.value, {
+				"aria-expanded": !collapsed.value,
+				"aria-controls": collapsible.value === "start" ? `${id}-start` : `${id}-end`,
+				tabindex: -1,
+				onClick: () => collapsed.value = !collapsed.value
+			}), null)]),
+			createVNode("div", mergeAttrs({ sx: splitterStyles.pane }, propsEnd.value, {
+				id: `${id}-end`,
+				hidden: hideEnd || void 0
+			}), [end.value])
+		]);
+	};
+}, {
+	name: "Splitter",
+	props: [
+		"start",
+		"end",
+		"orientation",
+		"_size",
+		"onUpdate:_size",
+		"minSize",
+		"maxSize",
+		"collapsible",
+		"_collapsed",
+		"onUpdate:_collapsed",
+		"label",
+		"bordered",
+		"propsStart",
+		"propsEnd",
+		"propsHandle",
+		"propsToggle"
+	]
+});
+//#endregion
+export { Splitter, splitterDynamicStyles, splitterStyles };
+
+//# sourceMappingURL=Splitter.js.map

package/dist/layout/Splitter.js.map

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

package/dist/layout/ViewportFill.d.ts

@@ -0,0 +1,26 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type FlexProps } from './Flex';
+import type { Space } from '../utils/style/styles';
+/** 未声明的属性落到 Flex（div）上 */
+export interface ViewportFillProps extends Omit<FlexProps, 'direction'> {
+    /**
+     * 离视口底边留多少（与外壳正文的内边距一致，分页不贴死在窗口边上）
+     * @default 'md'
+     */
+    bottom?: Space;
+    /**
+     * 最小高度：窗口太矮时整页滚动
+     * @default '24rem'
+     */
+    minHeight?: string;
+}
+/** ViewportFill 的样式：root */
+export declare const viewportFillStyles: Readonly<{
+    root: css.CompiledStyles;
+}>;
+/** ViewportFill 的动态样式：高度 */
+export declare const viewportFillDynamicStyles: Readonly<{
+    readonly size: (top: number, bottom: string, min: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 占满到窗口底边 */
+export declare const ViewportFill: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ViewportFillProps>;

package/dist/layout/ViewportFill.js

@@ -0,0 +1,59 @@
+import { space } from "../config/theme/tokens.js";
+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 * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/layout/ViewportFill.tsx
+/** 未声明的属性落到 Flex（div）上 */
+/** ViewportFill 的样式：root */
+var viewportFillStyles = css.create({ root: { minWidth: 0 } });
+/** ViewportFill 的动态样式：高度 */
+var viewportFillDynamicStyles = css.create({ size: (top, bottom, min) => ({
+	height: `calc(100dvh - ${top}px - ${bottom})`,
+	minHeight: min
+}) });
+/** 占满到窗口底边 */
+var ViewportFill = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const bottom = readonlyProp(_props, "bottom", "md");
+	const minHeight = readonlyProp(_props, "minHeight", "24rem");
+	const sx = readonlyProp(_props, "sx");
+	const rest = restProps(_props, _ctx, true);
+	let element = shallowRef(null);
+	let top = ref(0);
+	const measure = () => {
+		if (!element.value) return;
+		const next = Math.round(element.value.getBoundingClientRect().top + window.scrollY);
+		if (next !== top.value) top.value = next;
+	};
+	onMounted(measure);
+	useEventListener(() => window, "resize", measure);
+	useResizeObserver(() => element.value ? document.body : null, measure);
+	return () => createVNode(Flex, mergeProps(rest, {
+		"direction": "column",
+		"ref": _cache[0] || (_cache[0] = (value) => element.value = toElement(value)),
+		"sx": [
+			viewportFillStyles.root,
+			css.bind(viewportFillDynamicStyles.size, () => [
+				top.value,
+				space[bottom.value],
+				minHeight.value
+			], true),
+			sx.value
+		]
+	}), null);
+}, {
+	name: "ViewportFill",
+	props: [
+		"bottom",
+		"minHeight",
+		"sx"
+	]
+});
+//#endregion
+export { ViewportFill, viewportFillDynamicStyles, viewportFillStyles };
+
+//# sourceMappingURL=ViewportFill.js.map

package/dist/layout/ViewportFill.js.map

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