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

package/dist/input/text-format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-format.js","names":[],"sources":["../../src/input/text-format.ts"],"sourcesContent":["/**\n * 输入时自动分组显示的格式：值是去掉分隔的原文（13800001111），输入框里显示分好组的文字（138 0000 1111），\n * 交给 TextField 的 format。手机号、身份证号、银行卡号有现成的，别的用 createGroupedFormat 写。\n *\n *   <TextField _value={phone} format={phoneFormat} />          // phone === '13800001111'\n *   <TextField _value={card} format={createGroupedFormat({ groups: [4, 4, 4, 4, 3] })} />\n *\n * 只按位置分组、过滤字符，不校验内容（号段、校验位）：校验写在表单的 schema 里（phoneSchema、idCardSchema）。\n */\n\n/** TextField 的显示格式 */\nexport interface TextFormat {\n  /** 原文 → 显示的文字 */\n  format: (raw: string) => string;\n  /** 输入框里的文字 → 原文（去掉分隔、过滤掉不接受的字符、截到最长） */\n  parse: (text: string) => string;\n  /** 手机上弹出的键盘 */\n  inputmode?: 'numeric' | 'text' | 'tel';\n}\n\n/** createGroupedFormat 的选项 */\nexport interface GroupedFormatOptions {\n  /** 各组的长度：[3, 4, 4] 是 3-4-4；最后一组之后的字符再按最后一组的长度接着分 */\n  groups: readonly number[];\n  /** 接受的字符，默认数字 */\n  accept?: RegExp;\n  /** 原文最长几位；默认是各组加起来 */\n  maxLength?: number;\n  /** 组之间的分隔，默认一个空格 */\n  separator?: string;\n  /** 字母转成大写（身份证的 X） */\n  uppercase?: boolean;\n  /** 手机上弹出的键盘，默认 numeric */\n  inputmode?: TextFormat['inputmode'];\n}\n\n/** 按位置分组的格式 */\nexport function createGroupedFormat({\n  groups,\n  accept = /\\d/,\n  maxLength = groups.reduce((sum, size) => sum + size, 0),\n  separator = ' ',\n  uppercase = false,\n  inputmode = 'numeric',\n}: GroupedFormatOptions): TextFormat {\n  const one = new RegExp(accept.source, accept.flags.replace('g', ''));\n  return {\n    inputmode,\n    parse: (text) => {\n      const kept = Array.from(uppercase ? text.toUpperCase() : text).filter((char) =>\n        one.test(char),\n      );\n      return kept.slice(0, maxLength).join('');\n    },\n    format: (raw) => {\n      const parts: string[] = [];\n      let rest = raw;\n      for (let index = 0; rest; index++) {\n        const size = groups[Math.min(index, groups.length - 1)]!;\n        parts.push(rest.slice(0, size));\n        rest = rest.slice(size);\n      }\n      return parts.join(separator);\n    },\n  };\n}\n\n/** 中国大陆手机号：3-4-4，11 位数字 */\nexport const phoneFormat: TextFormat = {\n  ...createGroupedFormat({ groups: [3, 4, 4] }),\n  inputmode: 'tel',\n};\n\n/** 居民身份证号：6-8-4（地区、出生日期、顺序码与校验位），最后一位可以是 X */\nexport const idCardFormat: TextFormat = createGroupedFormat({\n  groups: [6, 8, 4],\n  accept: /[\\dXx]/,\n  uppercase: true,\n  inputmode: 'text',\n});\n\n/** 银行卡号：每 4 位一组，最长 19 位 */\nexport const bankCardFormat: TextFormat = createGroupedFormat({ groups: [4], maxLength: 19 });\n\n/**\n * 原文里第 count 个字符之后，对应显示文字里的位置：重新格式化之后把光标放回原来那个字符的后面\n * （在 1380|0001111 打一个字，光标停在新字符后面，而不是跳到最后）\n */\nexport function displayPosition(format: TextFormat, raw: string, count: number): number {\n  if (count <= 0) return 0;\n  const shown = format.format(raw);\n  let seen = 0;\n  for (let index = 0; index < shown.length; index++) {\n    if (format.parse(shown[index]!) !== '') seen++;\n    if (seen === count) return index + 1;\n  }\n  return shown.length;\n}\n"],"mappings":";;AAqCA,SAAgB,oBAAoB,EAClC,QACA,SAAS,MACT,YAAY,OAAO,QAAQ,KAAK,SAAS,MAAM,MAAM,CAAC,GACtD,YAAY,KACZ,YAAY,OACZ,YAAY,aACuB;CACnC,MAAM,MAAM,IAAI,OAAO,OAAO,QAAQ,OAAO,MAAM,QAAQ,KAAK,EAAE,CAAC;CACnE,OAAO;EACL;EACA,QAAQ,SAAS;GAIf,OAHa,MAAM,KAAK,YAAY,KAAK,YAAY,IAAI,IAAI,CAAC,CAAC,QAAQ,SACrE,IAAI,KAAK,IAAI,CAER,CAAA,CAAK,MAAM,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE;EACzC;EACA,SAAS,QAAQ;GACf,MAAM,QAAkB,CAAA;GACxB,IAAI,OAAO;GACX,KAAK,IAAI,QAAQ,GAAG,MAAM,SAAS;IACjC,MAAM,OAAO,OAAO,KAAK,IAAI,OAAO,OAAO,SAAS,CAAC;IACrD,MAAM,KAAK,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,KAAK,MAAM,IAAI;GACxB;GACA,OAAO,MAAM,KAAK,SAAS;EAC7B;CACF;AACF;;AAGA,IAAa,cAA0B;CACrC,GAAG,oBAAoB,EAAE,QAAQ;EAAC;EAAG;EAAG;CAAC,EAAE,CAAC;CAC5C,WAAW;AACb;;AAGA,IAAa,eAA2B,oBAAoB;CAC1D,QAAQ;EAAC;EAAG;EAAG;CAAC;CAChB,QAAQ;CACR,WAAW;CACX,WAAW;AACb,CAAC;;AAGD,IAAa,iBAA6B,oBAAoB;CAAE,QAAQ,CAAC,CAAC;CAAG,WAAW;AAAG,CAAC;;;;;AAM5F,SAAgB,gBAAgB,QAAoB,KAAa,OAAuB;CACtF,IAAI,SAAS,GAAG,OAAO;CACvB,MAAM,QAAQ,OAAO,OAAO,GAAG;CAC/B,IAAI,OAAO;CACX,KAAK,IAAI,QAAQ,GAAG,QAAQ,MAAM,QAAQ,SAAS;EACjD,IAAI,OAAO,MAAM,MAAM,MAAO,MAAM,IAAI;EACxC,IAAI,SAAS,OAAO,OAAO,QAAQ;CACrC;CACA,OAAO,MAAM;AACf"}

package/dist/layout/Affix.d.ts

@@ -0,0 +1,32 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** onChange 换成报告是否贴住 */
+export type AffixManaged = 'onChange';
+/** 未声明的属性落到 sticky 的 div 上 */
+export interface AffixProps extends PartProps<'div', AffixManaged> {
+    /** 贴住时离顶部多远（px），默认 0；与 offsetBottom 二选一 */
+    offsetTop?: number;
+    /** 贴住时离底部多远（px）：贴在底部 */
+    offsetBottom?: number;
+    /** 滚动的容器（sticky 相对的那个祖先）；不写时是视口 */
+    target?: () => HTMLElement | null | undefined;
+    /** 贴住时加阴影，默认 true */
+    shadow?: boolean;
+    /** 贴住、离开时调用 */
+    onChange?: (stuck: boolean) => void;
+    children?: VNodeChild;
+}
+/** Affix 的样式：root、stuck、sentinel */
+export declare const affixStyles: Readonly<{
+    root: css.CompiledStyles;
+    sentinel: css.CompiledStyles;
+    stuck: css.CompiledStyles;
+}>;
+/** 贴住的位置 */
+export declare const affixPositionStyles: Readonly<{
+    readonly top: (offset: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly bottom: (offset: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 固钉：sticky + 是否贴住的检测 */
+export declare const Affix: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<AffixProps>;

package/dist/layout/Affix.js

@@ -0,0 +1,81 @@
+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 * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/layout/Affix.tsx
+/** onChange 换成报告是否贴住 */
+/** 未声明的属性落到 sticky 的 div 上 */
+/** Affix 的样式：root、stuck、sentinel */
+var affixStyles = css.create({
+	root: {
+		position: "sticky",
+		zIndex: 5,
+		transition: `box-shadow ${t.durations.sm} ${t.easings.standard}`
+	},
+	stuck: { boxShadow: "_md" },
+	sentinel: {
+		height: 0,
+		pointerEvents: "none",
+		visibility: "hidden"
+	}
+});
+/** 贴住的位置 */
+var affixPositionStyles = css.create({
+	top: (offset) => ({ top: offset }),
+	bottom: (offset) => ({ bottom: offset })
+});
+/** 固钉：sticky + 是否贴住的检测 */
+var Affix = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const offsetTop = readonlyProp(_props, "offsetTop");
+	const offsetBottom = readonlyProp(_props, "offsetBottom");
+	const target = readonlyProp(_props, "target");
+	const shadow = readonlyProp(_props, "shadow", true);
+	const onChange = readonlyProp(_props, "onChange");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	let sentinel = shallowRef(null);
+	let stuck = ref(false);
+	const atBottom = () => offsetBottom.value != null && offsetTop.value == null;
+	useIntersectionObserver(() => sentinel.value, ([entry]) => {
+		const next = !entry.isIntersecting && (atBottom() ? entry.boundingClientRect.top > (entry.rootBounds?.bottom ?? 0) : entry.boundingClientRect.bottom < (entry.rootBounds?.top ?? 0));
+		if (next === stuck.value) return;
+		stuck.value = next;
+		onChange.value?.(next);
+	}, () => ({
+		root: target.value?.() ?? null,
+		rootMargin: atBottom() ? `0px 0px ${-(offsetBottom.value ?? 0)}px 0px` : `${-(offsetTop.value ?? 0)}px 0px 0px 0px`,
+		threshold: [0, 1]
+	}));
+	return () => {
+		const bottom = atBottom();
+		const marker = createVNode("div", mergeProps({
+			"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: [
+				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
+			] }, rest), { "data-stuck": stuck.value || void 0 }), [children.value]),
+			bottom && marker
+		]);
+	};
+}, {
+	name: "Affix",
+	props: [
+		"offsetTop",
+		"offsetBottom",
+		"target",
+		"shadow",
+		"onChange"
+	]
+});
+//#endregion
+export { Affix, affixPositionStyles, affixStyles };
+
+//# sourceMappingURL=Affix.js.map

package/dist/layout/Affix.js.map

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

package/dist/layout/AsideLayout.d.ts

@@ -0,0 +1,45 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type Space } from '../utils/style/styles';
+/** 未声明的属性落到外层 div 上 */
+export interface AsideLayoutProps extends PartProps<'div'> {
+    /** 侧栏的内容 */
+    aside: VNodeChild;
+    /** 侧栏的名称（aside 的 aria-label） */
+    asideLabel?: string;
+    /**
+     * 侧栏的宽度（CSS 长度）
+     * @default '26rem'
+     */
+    asideWidth?: string;
+    /**
+     * 侧栏粘在顶栏下面
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * 两栏之间、栏里各块之间的间距
+     * @default 'md'
+     */
+    gap?: Space;
+    /** 主栏（div）的部件属性 */
+    propsMain?: PartProps<'div'>;
+    /** 侧栏（aside）的部件属性 */
+    propsAside?: PartProps<'aside'>;
+    /** 主栏的内容 */
+    children?: VNodeChild;
+}
+/** AsideLayout 的样式：root、grid、column、sticky */
+export declare const asideLayoutStyles: Readonly<{
+    column: css.CompiledStyles;
+    grid: css.CompiledStyles;
+    root: css.CompiledStyles;
+    sticky: css.CompiledStyles;
+}>;
+/** AsideLayout 的动态样式：侧栏的宽度 */
+export declare const asideLayoutDynamicStyles: Readonly<{
+    readonly columns: (asideWidth: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 主栏 + 侧栏 */
+export declare const AsideLayout: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<AsideLayoutProps>;

package/dist/layout/AsideLayout.js

@@ -0,0 +1,69 @@
+import { space } from "../config/theme/tokens.js";
+import { mergeAttrs } from "../utils/props.js";
+import { gapStyles } from "../utils/style/styles.js";
+import { layoutVars } from "../utils/style/vars.js";
+import { createVNode } 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/AsideLayout.tsx
+/** 未声明的属性落到外层 div 上 */
+/** AsideLayout 的样式：root、grid、column、sticky */
+var asideLayoutStyles = css.create({
+	root: {
+		containerType: "inline-size",
+		minWidth: 0
+	},
+	grid: {
+		display: "grid",
+		alignItems: "start"
+	},
+	column: {
+		display: "flex",
+		flexDirection: "column",
+		minWidth: 0
+	},
+	sticky: {
+		position: {
+			default: null,
+			"@container (min-width: 56rem)": "sticky"
+		},
+		top: `calc(${layoutVars.stickyOffset} + ${space.md})`
+	}
+});
+/** AsideLayout 的动态样式：侧栏的宽度 */
+var asideLayoutDynamicStyles = css.create({ columns: (asideWidth) => ({ gridTemplateColumns: {
+	default: "minmax(0, 1fr)",
+	"@container (min-width: 56rem)": `minmax(0, 1fr) ${asideWidth}`
+} }) });
+/** 主栏 + 侧栏 */
+var AsideLayout = /*#__PURE__*/ _component((_props, _ctx) => {
+	const aside = readonlyProp(_props, "aside");
+	const asideLabel = readonlyProp(_props, "asideLabel");
+	const asideWidth = readonlyProp(_props, "asideWidth", "26rem");
+	const sticky = readonlyProp(_props, "sticky", true);
+	const gap = readonlyProp(_props, "gap", "md");
+	const propsMain = readonlyProp(_props, "propsMain");
+	const propsAside = readonlyProp(_props, "propsAside");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	return () => createVNode("div", mergeAttrs({ sx: asideLayoutStyles.root }, rest), [createVNode("div", css.attrs(asideLayoutStyles.grid, gapStyles[gap.value], css.bind(asideLayoutDynamicStyles.columns, () => [asideWidth.value], true)), [createVNode("div", mergeAttrs({ sx: [asideLayoutStyles.column, gapStyles[gap.value]] }, propsMain.value), [children.value]), createVNode("aside", mergeAttrs({ sx: [
+		asideLayoutStyles.column,
+		gapStyles[gap.value],
+		sticky.value && asideLayoutStyles.sticky
+	] }, propsAside.value, { "aria-label": asideLabel.value }), [aside.value])])]);
+}, {
+	name: "AsideLayout",
+	props: [
+		"aside",
+		"asideLabel",
+		"asideWidth",
+		"sticky",
+		"gap",
+		"propsMain",
+		"propsAside"
+	]
+});
+//#endregion
+export { AsideLayout, asideLayoutDynamicStyles, asideLayoutStyles };
+
+//# sourceMappingURL=AsideLayout.js.map

package/dist/layout/AsideLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsideLayout.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/layout/AsideLayout.tsx"],"sourcesContent":["/**\n * 主栏 + 侧栏：详情页常用的两栏，主栏放长内容（概览、明细、流程），侧栏放要一直看得见的（金额、状态、清单）。\n * 宽的时候侧栏定宽、粘在顶栏下面（AppShell 的 stickyOffset），滚动主栏时它不动；窄了（容器不到 56rem）叠成一列，侧栏在后。\n *\n *   <AsideLayout aside={<><BenefitCard /><ClosingCard /></>} asideLabel=\"收益与关闭\">\n *     <OverviewCard />\n *     <PartsCard />\n *   </AsideLayout>\n *\n * 按容器宽度而不是窗口宽度决定叠不叠：放在抽屉、分栏里也对。两栏里的块按 gap 竖排。\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 { mergeAttrs, type PartProps } from '../utils/props';\nimport { gapStyles, type Space } from '../utils/style/styles';\nimport { space } from '../config/theme/tokens';\nimport { layoutVars } from '../utils/style/vars';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface AsideLayoutProps extends PartProps<'div'> {\n  /** 侧栏的内容 */\n  aside: VNodeChild;\n  /** 侧栏的名称（aside 的 aria-label） */\n  asideLabel?: string;\n  /**\n   * 侧栏的宽度（CSS 长度）\n   * @default '26rem'\n   */\n  asideWidth?: string;\n  /**\n   * 侧栏粘在顶栏下面\n   * @default true\n   */\n  sticky?: boolean;\n  /**\n   * 两栏之间、栏里各块之间的间距\n   * @default 'md'\n   */\n  gap?: Space;\n  /** 主栏（div）的部件属性 */\n  propsMain?: PartProps<'div'>;\n  /** 侧栏（aside）的部件属性 */\n  propsAside?: PartProps<'aside'>;\n  /** 主栏的内容 */\n  children?: VNodeChild;\n}\n\n/** AsideLayout 的样式：root、grid、column、sticky */\nexport const asideLayoutStyles = css.create({\n  // 容器查询的容器：按自己的宽度决定叠不叠\n  root: { containerType: 'inline-size', minWidth: 0 },\n  grid: { display: 'grid', alignItems: 'start' },\n  column: { display: 'flex', flexDirection: 'column', minWidth: 0 },\n  sticky: {\n    position: { default: null, '@container (min-width: 56rem)': 'sticky' },\n    top: `calc(${layoutVars.stickyOffset} + ${space.md})`,\n  },\n});\n\n/** AsideLayout 的动态样式：侧栏的宽度 */\nexport const asideLayoutDynamicStyles = css.create({\n  columns: (asideWidth: string) => ({\n    gridTemplateColumns: {\n      default: 'minmax(0, 1fr)',\n      '@container (min-width: 56rem)': `minmax(0, 1fr) ${asideWidth}`,\n    },\n  }),\n});\n\n/** 主栏 + 侧栏 */\nexport const AsideLayout = _component(\n  ({\n    aside,\n    asideLabel,\n    asideWidth = '26rem',\n    sticky = true,\n    gap = 'md',\n    propsMain,\n    propsAside,\n    children,\n    ...rest\n  }: AsideLayoutProps) =>\n    () => (\n      <div {...mergeAttrs<'div'>({ sx: asideLayoutStyles.root }, rest)}>\n        <div\n          {...css.attrs(\n            asideLayoutStyles.grid,\n            gapStyles[gap],\n            asideLayoutDynamicStyles.columns(asideWidth),\n          )}\n        >\n          <div\n            {...mergeAttrs<'div'>({ sx: [asideLayoutStyles.column, gapStyles[gap]] }, propsMain)}\n          >\n            {children}\n          </div>\n          <aside\n            {...mergeAttrs<'aside'>(\n              {\n                sx: [asideLayoutStyles.column, gapStyles[gap], sticky && asideLayoutStyles.sticky],\n              },\n              propsAside,\n              { 'aria-label': asideLabel },\n            )}\n          >\n            {aside}\n          </aside>\n        </div>\n      </div>\n    ),\n);\n"],"mappings":";;;;;;;;;;AAiDA,IAAa,oBAAoB,IAAI,OAAO;CAE1C,MAAM;EAAE,eAAe;EAAe,UAAU;CAAE;CAClD,MAAM;EAAE,SAAS;EAAQ,YAAY;CAAQ;CAC7C,QAAQ;EAAE,SAAS;EAAQ,eAAe;EAAU,UAAU;CAAE;CAChE,QAAQ;EACN,UAAU;GAAE,SAAS;GAAM,iCAAiC;EAAS;EACrE,KAAK,QAAQ,WAAW,aAAY,KAAM,MAAM,GAAE;CACpD;AACF,CAAC;;AAGD,IAAa,2BAA2B,IAAI,OAAO,EACjD,UAAU,gBAAwB,EAChC,qBAAqB;CACnB,SAAS;CACT,iCAAiC,kBAAkB;AACrD,EACF,GACF,CAAC;;AAGD,IAAa,cAAc,0BACzB,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,cAGe,OAAO;CAAA,MAAA,SAAAA,aAAA,QAAA,UACX,IAAI;CAAA,MAAA,MAAAA,aAAA,QAAA,OACP,IAAI;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAIP,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAEPC,YAAA,OACW,WAAkB,EAAE,IAAI,kBAAkB,KAAK,GAAG,IAAI,GAAC,CAAAA,YAAA,OAExD,IAAI,MACN,kBAAkB,MAClB,UAAS,IAAA,QAAK,IAAA,KACd,yBAAyB,eAAO,CAAA,WAAA,KAAA,GAAA,IAAA,CAClC,GAAC,CAAAA,YAAA,OAGK,WAAkB,EAAE,IAAI,CAAC,kBAAkB,QAAQ,UAAS,IAAA,MAAK,EAAE,GAAC,UAAA,KAAW,GAAC,CAAA,SAAA,KAAA,CAAA,GAAAA,YAAA,SAKhF,WACF,EACE,IAAI;EAAC,kBAAkB;EAAQ,UAAS,IAAA;EAAO,OAAA,SAAU,kBAAkB;CAAM,EACnF,GAAC,WAAA,OAED,EAAE,cAAY,WAAA,MAAa,CAC7B,GAAC,CAAA,MAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAMR,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}

package/dist/layout/BackTop.d.ts

@@ -0,0 +1,16 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type IconButtonProps } from '../base/IconButton';
+/** 未声明的属性落到按钮（IconButton）上 */
+export interface BackTopProps extends Partial<Omit<IconButtonProps, 'icon' | 'onClick'>> {
+    /** 滚动的容器；不写时是整页 */
+    target?: () => HTMLElement | null | undefined;
+    /** 滚过多少 px 后出现，默认 400 */
+    threshold?: number;
+}
+/** BackTop 的样式：root、hidden */
+export declare const backTopStyles: Readonly<{
+    hidden: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 回到顶部：滚下去才出现的浮动按钮 */
+export declare const BackTop: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<BackTopProps>;

package/dist/layout/BackTop.js

@@ -0,0 +1,83 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { mergePartProps } from "../utils/props.js";
+import { IconButton } from "../base/IconButton.js";
+import { useEventListener } from "../utils/dom/event-listener.js";
+import { useReducedMotion } from "../utils/dom/media-query.js";
+import { createVNode, onMounted, ref } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ArrowUp } from "@lucide/icons";
+//#region src/layout/BackTop.tsx
+/**
+* 回到顶部：长页面滚下去之后，右下角出现一个按钮，点了平滑滚回顶部（减少动态效果时直接跳回）。
+*
+*   <BackTop />                                   整页
+*   <BackTop target={() => scroller} threshold={200} />   某个滚动容器
+*
+* 按钮固定在视口的结束边与底部（insetInlineEnd，从右到左排版时在左下），滚过 threshold 才淡入；
+* 滚回去之后焦点移到页面（或容器）开头，键盘用户不用再从按钮的位置往回 Tab。名称取语言包（回到顶部）。
+* 部件：Root（IconButton）。
+*/
+/** 未声明的属性落到按钮（IconButton）上 */
+/** BackTop 的样式：root、hidden */
+var backTopStyles = css.create({
+	root: {
+		position: "fixed",
+		insetInlineEnd: "_lg",
+		insetBlockEnd: "_lg",
+		zIndex: 20,
+		boxShadow: "_md",
+		transition: `opacity ${t.durations.md} ${t.easings.standard}, translate ${t.durations.md} ${t.easings.standard}`
+	},
+	hidden: {
+		opacity: 0,
+		translate: "0 0.5em",
+		pointerEvents: "none",
+		visibility: "hidden"
+	}
+});
+/** 回到顶部：滚下去才出现的浮动按钮 */
+var BackTop = /*#__PURE__*/ _component((_props, _ctx) => {
+	const target = readonlyProp(_props, "target");
+	const threshold = readonlyProp(_props, "threshold", 400);
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const reduced = useReducedMotion();
+	let shown = ref(false);
+	/** 滚动的元素：容器，或整页（document.scrollingElement） */
+	const scroller = () => target.value?.() ?? (typeof document === "undefined" ? null : document.scrollingElement);
+	const update = () => shown.value = (scroller()?.scrollTop ?? 0) > threshold.value;
+	useEventListener(() => target.value ? target.value() : window, "scroll", update, { passive: true });
+	onMounted(update);
+	function backToTop() {
+		const element = scroller();
+		if (!element) return;
+		element.scrollTo({
+			top: 0,
+			behavior: reduced.value ? "instant" : "smooth"
+		});
+		const focusTarget = target.value ? element : document.body;
+		if (!focusTarget.hasAttribute("tabindex")) focusTarget.setAttribute("tabindex", "-1");
+		focusTarget.focus({ preventScroll: true });
+	}
+	return () => createVNode(IconButton, mergePartProps({
+		icon: ArrowUp,
+		variant: "surface",
+		tone: "neutral",
+		radius: "full",
+		size: "lg",
+		"aria-label": lang.backToTop,
+		sx: [backTopStyles.root, !shown.value && backTopStyles.hidden]
+	}, rest, {
+		onClick: backToTop,
+		"aria-hidden": shown.value ? void 0 : true
+	}), null);
+}, {
+	name: "BackTop",
+	props: ["target", "threshold"]
+});
+//#endregion
+export { BackTop, backTopStyles };
+
+//# sourceMappingURL=BackTop.js.map

package/dist/layout/BackTop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackTop.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode"],"sources":["../../src/layout/BackTop.tsx"],"sourcesContent":["/**\n * 回到顶部：长页面滚下去之后，右下角出现一个按钮，点了平滑滚回顶部（减少动态效果时直接跳回）。\n *\n *   <BackTop />                                   整页\n *   <BackTop target={() => scroller} threshold={200} />   某个滚动容器\n *\n * 按钮固定在视口的结束边与底部（insetInlineEnd，从右到左排版时在左下），滚过 threshold 才淡入；\n * 滚回去之后焦点移到页面（或容器）开头，键盘用户不用再从按钮的位置往回 Tab。名称取语言包（回到顶部）。\n * 部件：Root（IconButton）。\n */\nimport { ArrowUp } from '@lucide/icons';\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 { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang } from '../config/context';\nimport { useEventListener } from '../utils/dom/event-listener';\nimport { useReducedMotion } from '../utils/dom/media-query';\nimport { mergePartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到按钮（IconButton）上 */\nexport interface BackTopProps extends Partial<Omit<IconButtonProps, 'icon' | 'onClick'>> {\n  /** 滚动的容器；不写时是整页 */\n  target?: () => HTMLElement | null | undefined;\n  /** 滚过多少 px 后出现，默认 400 */\n  threshold?: number;\n}\n\n/** BackTop 的样式：root、hidden */\nexport const backTopStyles = css.create({\n  root: {\n    position: 'fixed',\n    insetInlineEnd: '_lg',\n    insetBlockEnd: '_lg',\n    zIndex: 20,\n    boxShadow: '_md',\n    transition: `opacity ${t.durations.md} ${t.easings.standard}, translate ${t.durations.md} ${t.easings.standard}`,\n  },\n  hidden: { opacity: 0, translate: '0 0.5em', pointerEvents: 'none', visibility: 'hidden' },\n});\n\n/** 回到顶部：滚下去才出现的浮动按钮 */\nexport const BackTop = _component(({ target, threshold = 400, ...rest }: BackTopProps) => {\n  const lang = useLang();\n  const reduced = useReducedMotion();\n  let shown = _state(false);\n\n  /** 滚动的元素：容器，或整页（document.scrollingElement） */\n  const scroller = () =>\n    target?.() ??\n    (typeof document === 'undefined' ? null : (document.scrollingElement as HTMLElement));\n  const update = () => (shown = (scroller()?.scrollTop ?? 0) > threshold);\n\n  // 整页的滚动事件在 window 上，容器的在容器自己上\n  useEventListener(() => (target ? target() : window), 'scroll', update, { passive: true });\n  onMounted(update);\n\n  function backToTop() {\n    const element = scroller();\n    if (!element) return;\n    element.scrollTo({ top: 0, behavior: reduced.value ? 'instant' : 'smooth' });\n    // 焦点回到开头：整页时是 body 的第一个可聚焦位置，容器时是容器本身\n    const focusTarget = target ? element : document.body;\n    if (!focusTarget.hasAttribute('tabindex')) focusTarget.setAttribute('tabindex', '-1');\n    focusTarget.focus({ preventScroll: true });\n  }\n\n  return () => (\n    <IconButton\n      {...mergePartProps<IconButtonProps>(\n        {\n          icon: ArrowUp,\n          variant: 'surface',\n          tone: 'neutral',\n          radius: 'full',\n          size: 'lg',\n          'aria-label': lang.backToTop,\n          sx: [backTopStyles.root, !shown && backTopStyles.hidden],\n        },\n        rest,\n        { onClick: backToTop, 'aria-hidden': shown ? undefined : true },\n      )}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAa,gBAAgB,IAAI,OAAO;CACtC,MAAM;EACJ,UAAU;EACV,gBAAgB;EAChB,eAAe;EACf,QAAQ;EACR,WAAW;EACX,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,SAAQ,cAAe,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACxG;CACA,QAAQ;EAAE,SAAS;EAAG,WAAW;EAAW,eAAe;EAAQ,YAAY;CAAS;AAC1F,CAAC;;AAGD,IAAa,UAAU,0BAAW,QAAA,SAAwD;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aAAjC,GAAG;CAAA,MAAK,OAAIC,UAAA,QAAA,MAAA,IAAA;CACnE,MAAM,OAAO,QAAQ;CACrB,MAAM,UAAU,iBAAiB;CACjC,IAAI,QAAKC,IAAU,KAAK;;CAGxB,MAAM,iBACJ,OAAA,QAAS,MACR,OAAO,aAAa,cAAc,OAAQ,SAAS;CACtD,MAAM,eAAgB,MAAA,SAAS,SAAS,CAAC,EAAE,aAAa,KAAC,UAAA;CAGzD,uBAAwB,OAAA,QAAS,OAAA,MAAO,IAAI,QAAS,UAAU,QAAQ,EAAE,SAAS,KAAK,CAAC;CACxF,UAAU,MAAM;CAEhB,SAAS,YAAY;EACnB,MAAM,UAAU,SAAS;EACzB,IAAI,CAAC,SAAS;EACd,QAAQ,SAAS;GAAE,KAAK;GAAG,UAAU,QAAQ,QAAQ,YAAY;EAAS,CAAC;EAE3E,MAAM,cAAc,OAAA,QAAS,UAAU,SAAS;EAChD,IAAI,CAAC,YAAY,aAAa,UAAU,GAAG,YAAY,aAAa,YAAY,IAAI;EACpF,YAAY,MAAM,EAAE,eAAe,KAAK,CAAC;CAC3C;CAEA,aAAOC,YAAA,YAEC,eACF;EACE,MAAM;EACN,SAAS;EACT,MAAM;EACN,QAAQ;EACR,MAAM;EACN,cAAc,KAAK;EACnB,IAAI,CAAC,cAAc,MAAM,CAAA,MAAA,SAAU,cAAc,MAAM;CACzD,GACA,MACA;EAAE,SAAS;EAAW,eAAe,MAAA,QAAQ,KAAA,IAAY;CAAK,CAChE,GAAC,IAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA,CAAA,UAAA,WAAA;AAAA,CAAA"}

package/dist/layout/Container.d.ts

@@ -0,0 +1,60 @@
+/**
+ * 限制内容最大宽度并水平居中：页面主体、表单页、文章。
+ * 一个元素一个组件（COMPONENTS.md §1）：Container 是 div；main、article 等语义容器用 createContainer 生成。
+ *
+ *   <Container size="md">…</Container>
+ *   const Page = createContainer('main', 'Page');
+ */
+import { type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import type { LayoutTag, Space } from '../utils/style/styles';
+/** 容器最大宽度档位，对应主题 sizes 的容器宽度（rem，跟随浏览器字号），括号里是默认主题的值 */
+export interface ContainerSizes {
+    /** 30rem（480px）：窄内容，如登录表单 */
+    xs: unknown;
+    /** 40rem（640px）：表单页、设置页 */
+    sm: unknown;
+    /** 48rem（768px）：文章、详情页 */
+    md: unknown;
+    /** 64rem（1024px）：常规页面（默认） */
+    lg: unknown;
+    /** 80rem（1280px）：宽表格、仪表盘 */
+    xl: unknown;
+}
+/** 容器的选项，Container 与 createContainer 生成的组件共用 */
+export interface ContainerOptions {
+    /** 最大宽度档位，对应主题 sizes 的容器宽度（30/40/48/64/80rem），默认 lg */
+    size?: keyof ContainerSizes;
+    /** 左右内边距档位，对应主题的 space，默认 lg；窄屏时内容不会贴边 */
+    padding?: Space;
+    children?: VNodeChild;
+}
+/** 未声明的属性落到元素上：Container 为 div，createContainer 生成的为给定的标签 */
+export type ContainerProps<Tag extends LayoutTag = 'div'> = PartProps<Tag> & ContainerOptions;
+/** Container 的样式：root */
+export declare const containerStyles: Readonly<{
+    root: css.CompiledStyles;
+}>;
+/** Container 的样式：xs、sm、md、lg、xl */
+export declare const containerSizeStyles: Readonly<{
+    lg: css.CompiledStyles;
+    md: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    xl: css.CompiledStyles;
+    xs: css.CompiledStyles;
+}>;
+/** Container 的样式：none、xs、sm、md、lg、xl */
+export declare const containerPaddingStyles: Readonly<{
+    lg: css.CompiledStyles;
+    md: css.CompiledStyles;
+    none: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    xl: css.CompiledStyles;
+    xs: css.CompiledStyles;
+}>;
+/** 生成渲染为指定语义标签（main、section、article…）的容器组件；name 是 DevTools 里显示的组件名 */
+export declare function createContainer<Tag extends LayoutTag>(tag: Tag, name: string): TsxComponent<ContainerProps<Tag>>;
+/** 限宽居中的容器（div） */
+export declare const Container: TsxComponent<ContainerProps<"div">>;

package/dist/layout/Container.js

@@ -0,0 +1,62 @@
+import { mergeAttrs } from "../utils/props.js";
+import { createVNode, isVNode } from "vue";
+import { _component, childrenProp, forwardChildren, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/layout/Container.tsx
+/** 容器最大宽度档位，对应主题 sizes 的容器宽度（rem，跟随浏览器字号），括号里是默认主题的值 */
+/** 容器的选项，Container 与 createContainer 生成的组件共用 */
+/** 未声明的属性落到元素上：Container 为 div，createContainer 生成的为给定的标签 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Container 的样式：root */
+var containerStyles = css.create({ root: {
+	boxSizing: "border-box",
+	width: "_full",
+	marginInline: "auto"
+} });
+/** Container 的样式：xs、sm、md、lg、xl */
+var containerSizeStyles = css.create({
+	xs: { maxWidth: "_xs" },
+	sm: { maxWidth: "_sm" },
+	md: { maxWidth: "_md" },
+	lg: { maxWidth: "_lg" },
+	xl: { maxWidth: "_xl" }
+});
+/** Container 的样式：none、xs、sm、md、lg、xl */
+var containerPaddingStyles = css.create({
+	none: { paddingInline: "_none" },
+	xs: { paddingInline: "_xs" },
+	sm: { paddingInline: "_sm" },
+	md: { paddingInline: "_md" },
+	lg: { paddingInline: "_lg" },
+	xl: { paddingInline: "_xl" }
+});
+/** 生成渲染为指定语义标签（main、section、article…）的容器组件；name 是 DevTools 里显示的组件名 */
+function createContainer(tag, name) {
+	return /*#__PURE__*/ _component((_props, _ctx) => {
+		const size = readonlyProp(_props, "size", "lg");
+		const padding = readonlyProp(_props, "padding", "lg");
+		childrenProp(_props);
+		const rest = restProps(_props, _ctx, false);
+		return () => {
+			let _slot;
+			const Tag = tag;
+			const sx = [
+				containerStyles.root,
+				containerSizeStyles[size.value],
+				containerPaddingStyles[padding.value]
+			];
+			return createVNode(Tag, mergeAttrs({ sx }, rest), _isSlot(_slot = forwardChildren(_props)) ? _slot : { default: () => [_slot] });
+		};
+	}, {
+		props: ["size", "padding"],
+		name
+	});
+}
+/** 限宽居中的容器（div） */
+var Container = createContainer("div", "Container");
+//#endregion
+export { Container, containerPaddingStyles, containerSizeStyles, containerStyles, createContainer };
+
+//# sourceMappingURL=Container.js.map

package/dist/layout/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_vtp_forwardChildren"],"sources":["../../src/layout/Container.tsx"],"sourcesContent":["/**\n * 限制内容最大宽度并水平居中：页面主体、表单页、文章。\n * 一个元素一个组件（COMPONENTS.md §1）：Container 是 div；main、article 等语义容器用 createContainer 生成。\n *\n *   <Container size=\"md\">…</Container>\n *   const Page = createContainer('main', 'Page');\n */\nimport { _component, type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport type { LayoutTag, Space } from '../utils/style/styles';\n\n/** 容器最大宽度档位，对应主题 sizes 的容器宽度（rem，跟随浏览器字号），括号里是默认主题的值 */\nexport interface ContainerSizes {\n  /** 30rem（480px）：窄内容，如登录表单 */\n  xs: unknown;\n  /** 40rem（640px）：表单页、设置页 */\n  sm: unknown;\n  /** 48rem（768px）：文章、详情页 */\n  md: unknown;\n  /** 64rem（1024px）：常规页面（默认） */\n  lg: unknown;\n  /** 80rem（1280px）：宽表格、仪表盘 */\n  xl: unknown;\n}\n\n/** 容器的选项，Container 与 createContainer 生成的组件共用 */\nexport interface ContainerOptions {\n  /** 最大宽度档位，对应主题 sizes 的容器宽度（30/40/48/64/80rem），默认 lg */\n  size?: keyof ContainerSizes;\n  /** 左右内边距档位，对应主题的 space，默认 lg；窄屏时内容不会贴边 */\n  padding?: Space;\n  children?: VNodeChild;\n}\n\n/** 未声明的属性落到元素上：Container 为 div，createContainer 生成的为给定的标签 */\nexport type ContainerProps<Tag extends LayoutTag = 'div'> = PartProps<Tag> & ContainerOptions;\n\n/** Container 的样式：root */\nexport const containerStyles = css.create({\n  root: { boxSizing: 'border-box', width: '_full', marginInline: 'auto' },\n});\n\n/** Container 的样式：xs、sm、md、lg、xl */\nexport const containerSizeStyles = css.create({\n  xs: { maxWidth: '_xs' },\n  sm: { maxWidth: '_sm' },\n  md: { maxWidth: '_md' },\n  lg: { maxWidth: '_lg' },\n  xl: { maxWidth: '_xl' },\n});\n\n/** Container 的样式：none、xs、sm、md、lg、xl */\nexport const containerPaddingStyles = css.create({\n  none: { paddingInline: '_none' },\n  xs: { paddingInline: '_xs' },\n  sm: { paddingInline: '_sm' },\n  md: { paddingInline: '_md' },\n  lg: { paddingInline: '_lg' },\n  xl: { paddingInline: '_xl' },\n});\n\n/** 生成渲染为指定语义标签（main、section、article…）的容器组件；name 是 DevTools 里显示的组件名 */\nexport function createContainer<Tag extends LayoutTag>(\n  tag: Tag,\n  name: string,\n): TsxComponent<ContainerProps<Tag>> {\n  // 实现按布局标签共有的属性写，对外每个组件只接受自己元素的属性\n  return _component(\n    ({ size = 'lg', padding = 'lg', children, ...rest }: ContainerProps<LayoutTag>) =>\n      () => {\n        const Tag = tag as LayoutTag;\n        const sx = [\n          containerStyles.root,\n          containerSizeStyles[size],\n          containerPaddingStyles[padding],\n        ];\n        return <Tag {...mergeAttrs<LayoutTag>({ sx }, rest)}>{children}</Tag>;\n      },\n    { name },\n  ) as unknown as TsxComponent<ContainerProps<Tag>>;\n}\n\n/** 限宽居中的容器（div） */\nexport const Container = createContainer('div', 'Container');\n"],"mappings":";;;;;;;;AAoCA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AAIA,IAAa,kBAAkB,IAAI,OAAO,EACxC,MAAM;CAAE,WAAW;CAAc,OAAO;CAAS,cAAc;AAAO,EACxE,CAAC;;AAGD,IAAa,sBAAsB,IAAI,OAAO;CAC5C,IAAI,EAAE,UAAU,MAAM;CACtB,IAAI,EAAE,UAAU,MAAM;CACtB,IAAI,EAAE,UAAU,MAAM;CACtB,IAAI,EAAE,UAAU,MAAM;CACtB,IAAI,EAAE,UAAU,MAAM;AACxB,CAAC;;AAGD,IAAa,yBAAyB,IAAI,OAAO;CAC/C,MAAM,EAAE,eAAe,QAAQ;CAC/B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;AAC7B,CAAC;;AAGD,SAAgB,gBACd,KACA,MACmC;CAEnC,OAAO,0BACL,QAAA,SAAA;EAAA,MAAA,OAAAC,aAAA,QAAA,QAAU,IAAI;EAAA,MAAA,UAAAA,aAAA,QAAA,WAAY,IAAI;EAAA,aAAA,MAAA;EAAA,MAAe,OAAIC,UAAA,QAAA,MAAA,KAAA;EAAA,aACzC;GAAA,IAAA;GACJ,MAAM,MAAM;GACZ,MAAM,KAAK;IACT,gBAAgB;IAChB,oBAAmB,KAAA;IACnB,uBAAsB,QAAA;GAAS;GAEjC,OAAAC,YAAA,KAAgB,WAAsB,EAAE,GAAG,GAAG,IAAI,GAAC,QAAA,QAA5CC,gBAAA,MAA6D,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA;EACvE;CAAC,GACH;EAAA,OAAA,CAAA,QAAA,SAAA;EAAE;CAAK,CACT;AACF;;AAGA,IAAa,YAAY,gBAAgB,OAAO,WAAW"}

package/dist/layout/Flex.d.ts

@@ -0,0 +1,116 @@
+/**
+ * 一维布局（flex）。不拆 Stack / Group：竖排写 direction="column"。
+ * 一个元素一个组件（COMPONENTS.md §1）：Flex 是 div，FlexList 是 ul；
+ * 其他语义容器用 createFlex 生成，如 `const Toolbar = createFlex('nav', 'Toolbar')`。
+ *
+ *   <Flex gap="sm" align="center">…</Flex>
+ *   <FlexList direction="column" gap="xs">…</FlexList>   列表：去掉圆点并保留列表语义（有序的用 FlexOrderedList）
+ */
+import { type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type LayoutTag, type Space } from '../utils/style/styles';
+/** 主轴方向（flex-direction） */
+export interface FlexDirections {
+    /** 横排：子元素从起始边排到结束边 */
+    row: unknown;
+    /** 竖排：子元素从上到下 */
+    column: unknown;
+    /** 横排，顺序反过来 */
+    'row-reverse': unknown;
+    /** 竖排，顺序反过来 */
+    'column-reverse': unknown;
+}
+/** 交叉轴对齐（align-items）：横排时是竖直方向，竖排时是水平方向 */
+export interface FlexAligns {
+    /** 贴着交叉轴的起点（横排时顶部对齐） */
+    start: unknown;
+    /** 居中 */
+    center: unknown;
+    /** 贴着交叉轴的终点（横排时底部对齐） */
+    end: unknown;
+    /** 拉伸填满交叉轴（默认） */
+    stretch: unknown;
+    /** 按文字基线对齐：字号不同的文字、图标与文字混排 */
+    baseline: unknown;
+}
+/** 主轴分布（justify-content） */
+export interface FlexJustifies {
+    /** 靠主轴起点（默认） */
+    start: unknown;
+    /** 居中 */
+    center: unknown;
+    /** 靠主轴终点 */
+    end: unknown;
+    /** 两端对齐，中间等距：首尾贴边 */
+    between: unknown;
+    /** 每项两侧留白相等：首尾留白是中间的一半 */
+    around: unknown;
+    /** 所有空隙相等，包括首尾 */
+    evenly: unknown;
+}
+/** flex 布局的选项，Flex、FlexList 与 createFlex 生成的组件共用 */
+export interface FlexOptions {
+    /** 主轴方向，默认 row */
+    direction?: keyof FlexDirections;
+    /** 交叉轴对齐（align-items），默认 stretch */
+    align?: keyof FlexAligns;
+    /** 主轴分布（justify-content），默认 start */
+    justify?: keyof FlexJustifies;
+    /** 换行；'reverse' 为反向换行 */
+    wrap?: boolean | 'reverse';
+    /** 间距档位，对应主题的 space */
+    gap?: Space;
+    /** 换行时行与行之间的间距，盖过 gap（同 Grid） */
+    rowGap?: Space;
+    /** 同一行里项与项之间的间距，盖过 gap（同 Grid） */
+    columnGap?: Space;
+    /** 行内 flex（inline-flex） */
+    inline?: boolean;
+    /** 在父级的 flex 布局里占满剩余空间，并允许收缩到比内容窄（里面的文字才能截断）：头像旁边的正文、图标旁边的说明 */
+    grow?: boolean;
+    children?: VNodeChild;
+}
+/** Flex 的样式：root、inline、row、column、row-reverse、column-reverse、wrap、grow 等 */
+export declare const flexStyles: Readonly<{
+    column: css.CompiledStyles;
+    "column-reverse": css.CompiledStyles;
+    grow: css.CompiledStyles;
+    inline: css.CompiledStyles;
+    root: css.CompiledStyles;
+    row: css.CompiledStyles;
+    "row-reverse": css.CompiledStyles;
+    wrap: css.CompiledStyles;
+    wrapReverse: css.CompiledStyles;
+}>;
+/** Flex 的样式：start、center、end、stretch、baseline */
+export declare const flexAlignStyles: Readonly<{
+    baseline: css.CompiledStyles;
+    center: css.CompiledStyles;
+    end: css.CompiledStyles;
+    start: css.CompiledStyles;
+    stretch: css.CompiledStyles;
+}>;
+/** Flex 的样式：start、center、end、between、around、evenly */
+export declare const flexJustifyStyles: Readonly<{
+    around: css.CompiledStyles;
+    between: css.CompiledStyles;
+    center: css.CompiledStyles;
+    end: css.CompiledStyles;
+    evenly: css.CompiledStyles;
+    start: css.CompiledStyles;
+}>;
+/** 未声明的属性落到元素上：Flex 为 div，FlexList 为 ul，createFlex 生成的为给定的标签 */
+export type FlexProps<Tag extends LayoutTag = 'div'> = PartProps<Tag> & FlexOptions;
+/**
+ * 生成渲染为指定语义标签的 flex 布局组件；列表标签（ul、ol）自动去掉圆点并补上 role="list"。
+ * name 是 DevTools 与警告信息里显示的组件名。
+ */
+export declare function createFlex<Tag extends LayoutTag>(tag: Tag, name: string): TsxComponent<FlexProps<Tag>>;
+/** flex 布局（div） */
+export declare const Flex: TsxComponent<FlexProps<"div">>;
+/** flex 布局的列表（ul）：去掉圆点与缩进，保留列表语义；子元素用 li */
+export declare const FlexList: TsxComponent<FlexProps<"ul">>;
+/** 有序列表（ol）的 flex 布局：顺序有意义的一组（面包屑、步骤、时间线、通知），去掉编号并保留列表语义 */
+export declare const FlexOrderedList: TsxComponent<FlexProps<"ol">>;