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

package/dist/layout/Affix.js.map

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

package/dist/layout/AsideLayout.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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';

package/dist/layout/AsideLayout.js

@@ -4,7 +4,7 @@ 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";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/layout/AsideLayout.tsx
 /** 未声明的属性落到外层 div 上 */
 /** AsideLayout 的样式：root、grid、column、sticky */

package/dist/layout/AsideLayout.js.map

@@ -1 +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"}
+{"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 { 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

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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'>> {

package/dist/layout/BackTop.js

@@ -6,7 +6,7 @@ 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 { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ArrowUp } from "@lucide/icons";
 //#region src/layout/BackTop.tsx
 /**

package/dist/layout/BackTop.js.map

@@ -1 +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"}
+{"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 { 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

@@ -6,7 +6,7 @@
  *   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 { 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';

package/dist/layout/Container.js

@@ -1,7 +1,7 @@
 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";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/layout/Container.tsx
 /** 容器最大宽度档位，对应主题 sizes 的容器宽度（rem，跟随浏览器字号），括号里是默认主题的值 */
 /** 容器的选项，Container 与 createContainer 生成的组件共用 */

package/dist/layout/Container.js.map

@@ -1 +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"}
+{"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 { 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

@@ -7,7 +7,7 @@
  *   <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 { 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';

package/dist/layout/Flex.js

@@ -2,7 +2,7 @@ import { mergeAttrs } from "../utils/props.js";
 import { columnGapStyles, gapStyles, listRole, listStyles, rowGapStyles } from "../utils/style/styles.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";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/layout/Flex.tsx
 /** 主轴方向（flex-direction） */
 /** 交叉轴对齐（align-items）：横排时是竖直方向，竖排时是水平方向 */

package/dist/layout/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_vtp_forwardChildren"],"sources":["../../src/layout/Flex.tsx"],"sourcesContent":["/**\n * 一维布局（flex）。不拆 Stack / Group：竖排写 direction=\"column\"。\n * 一个元素一个组件（COMPONENTS.md §1）：Flex 是 div，FlexList 是 ul；\n * 其他语义容器用 createFlex 生成，如 `const Toolbar = createFlex('nav', 'Toolbar')`。\n *\n *   <Flex gap=\"sm\" align=\"center\">…</Flex>\n *   <FlexList direction=\"column\" gap=\"xs\">…</FlexList>   列表：去掉圆点并保留列表语义（有序的用 FlexOrderedList）\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 {\n  columnGapStyles,\n  gapStyles,\n  listRole,\n  listStyles,\n  rowGapStyles,\n  type LayoutTag,\n  type Space,\n} from '../utils/style/styles';\n\n/** 主轴方向（flex-direction） */\nexport interface FlexDirections {\n  /** 横排：子元素从起始边排到结束边 */\n  row: unknown;\n  /** 竖排：子元素从上到下 */\n  column: unknown;\n  /** 横排，顺序反过来 */\n  'row-reverse': unknown;\n  /** 竖排，顺序反过来 */\n  'column-reverse': unknown;\n}\n\n/** 交叉轴对齐（align-items）：横排时是竖直方向，竖排时是水平方向 */\nexport interface FlexAligns {\n  /** 贴着交叉轴的起点（横排时顶部对齐） */\n  start: unknown;\n  /** 居中 */\n  center: unknown;\n  /** 贴着交叉轴的终点（横排时底部对齐） */\n  end: unknown;\n  /** 拉伸填满交叉轴（默认） */\n  stretch: unknown;\n  /** 按文字基线对齐：字号不同的文字、图标与文字混排 */\n  baseline: unknown;\n}\n\n/** 主轴分布（justify-content） */\nexport interface FlexJustifies {\n  /** 靠主轴起点（默认） */\n  start: unknown;\n  /** 居中 */\n  center: unknown;\n  /** 靠主轴终点 */\n  end: unknown;\n  /** 两端对齐，中间等距：首尾贴边 */\n  between: unknown;\n  /** 每项两侧留白相等：首尾留白是中间的一半 */\n  around: unknown;\n  /** 所有空隙相等，包括首尾 */\n  evenly: unknown;\n}\n\n/** flex 布局的选项，Flex、FlexList 与 createFlex 生成的组件共用 */\nexport interface FlexOptions {\n  /** 主轴方向，默认 row */\n  direction?: keyof FlexDirections;\n  /** 交叉轴对齐（align-items），默认 stretch */\n  align?: keyof FlexAligns;\n  /** 主轴分布（justify-content），默认 start */\n  justify?: keyof FlexJustifies;\n  /** 换行；'reverse' 为反向换行 */\n  wrap?: boolean | 'reverse';\n  /** 间距档位，对应主题的 space */\n  gap?: Space;\n  /** 换行时行与行之间的间距，盖过 gap（同 Grid） */\n  rowGap?: Space;\n  /** 同一行里项与项之间的间距，盖过 gap（同 Grid） */\n  columnGap?: Space;\n  /** 行内 flex（inline-flex） */\n  inline?: boolean;\n  /** 在父级的 flex 布局里占满剩余空间，并允许收缩到比内容窄（里面的文字才能截断）：头像旁边的正文、图标旁边的说明 */\n  grow?: boolean;\n  children?: VNodeChild;\n}\n\n/** Flex 的样式：root、inline、row、column、row-reverse、column-reverse、wrap、grow 等 */\nexport const flexStyles = css.create({\n  root: { display: 'flex' },\n  inline: { display: 'inline-flex' },\n  row: { flexDirection: 'row' },\n  column: { flexDirection: 'column' },\n  'row-reverse': { flexDirection: 'row-reverse' },\n  'column-reverse': { flexDirection: 'column-reverse' },\n  wrap: { flexWrap: 'wrap' },\n  wrapReverse: { flexWrap: 'wrap-reverse' },\n  // 占满剩下的空间；横排、竖排都能缩小到比内容小（列表、表格在里面自己滚动）\n  grow: { flexGrow: 1, minWidth: 0, minHeight: 0 },\n});\n\n/** Flex 的样式：start、center、end、stretch、baseline */\nexport const flexAlignStyles = css.create({\n  start: { alignItems: 'flex-start' },\n  center: { alignItems: 'center' },\n  end: { alignItems: 'flex-end' },\n  stretch: { alignItems: 'stretch' },\n  baseline: { alignItems: 'baseline' },\n});\n\n/** Flex 的样式：start、center、end、between、around、evenly */\nexport const flexJustifyStyles = css.create({\n  start: { justifyContent: 'flex-start' },\n  center: { justifyContent: 'center' },\n  end: { justifyContent: 'flex-end' },\n  between: { justifyContent: 'space-between' },\n  around: { justifyContent: 'space-around' },\n  evenly: { justifyContent: 'space-evenly' },\n});\n\n/** 未声明的属性落到元素上：Flex 为 div，FlexList 为 ul，createFlex 生成的为给定的标签 */\nexport type FlexProps<Tag extends LayoutTag = 'div'> = PartProps<Tag> & FlexOptions;\n\n/**\n * 生成渲染为指定语义标签的 flex 布局组件；列表标签（ul、ol）自动去掉圆点并补上 role=\"list\"。\n * name 是 DevTools 与警告信息里显示的组件名。\n */\nexport function createFlex<Tag extends LayoutTag>(\n  tag: Tag,\n  name: string,\n): TsxComponent<FlexProps<Tag>> {\n  // 实现按布局标签共有的属性写，对外每个组件只接受自己元素的属性\n  return _component(\n    ({\n      direction = 'row',\n      align,\n      justify,\n      wrap = false,\n      gap,\n      rowGap,\n      columnGap,\n      inline = false,\n      grow = false,\n      children,\n      ...rest\n    }: FlexProps<LayoutTag>) =>\n      () => {\n        const Tag = tag as LayoutTag;\n        const sx = [\n          inline ? flexStyles.inline : flexStyles.root,\n          flexStyles[direction],\n          wrap && (wrap === 'reverse' ? flexStyles.wrapReverse : flexStyles.wrap),\n          align && flexAlignStyles[align],\n          justify && flexJustifyStyles[justify],\n          gap && gapStyles[gap],\n          rowGap && rowGapStyles[rowGap],\n          columnGap && columnGapStyles[columnGap],\n          grow && flexStyles.grow,\n          listRole(tag) && listStyles.reset,\n        ];\n        return <Tag {...mergeAttrs<LayoutTag>({ sx, role: listRole(tag) }, rest)}>{children}</Tag>;\n      },\n    { name },\n  ) as unknown as TsxComponent<FlexProps<Tag>>;\n}\n\n/** flex 布局（div） */\nexport const Flex = createFlex('div', 'Flex');\n/** flex 布局的列表（ul）：去掉圆点与缩进，保留列表语义；子元素用 li */\nexport const FlexList = createFlex('ul', 'FlexList');\n\n/** 有序列表（ol）的 flex 布局：顺序有意义的一组（面包屑、步骤、时间线、通知），去掉编号并保留列表语义 */\nexport const FlexOrderedList = createFlex('ol', 'FlexOrderedList');\n"],"mappings":";;;;;;;;;;AAgEA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AAwBA,IAAa,aAAa,IAAI,OAAO;CACnC,MAAM,EAAE,SAAS,OAAO;CACxB,QAAQ,EAAE,SAAS,cAAc;CACjC,KAAK,EAAE,eAAe,MAAM;CAC5B,QAAQ,EAAE,eAAe,SAAS;CAClC,eAAe,EAAE,eAAe,cAAc;CAC9C,kBAAkB,EAAE,eAAe,iBAAiB;CACpD,MAAM,EAAE,UAAU,OAAO;CACzB,aAAa,EAAE,UAAU,eAAe;CAExC,MAAM;EAAE,UAAU;EAAG,UAAU;EAAG,WAAW;CAAE;AACjD,CAAC;;AAGD,IAAa,kBAAkB,IAAI,OAAO;CACxC,OAAO,EAAE,YAAY,aAAa;CAClC,QAAQ,EAAE,YAAY,SAAS;CAC/B,KAAK,EAAE,YAAY,WAAW;CAC9B,SAAS,EAAE,YAAY,UAAU;CACjC,UAAU,EAAE,YAAY,WAAW;AACrC,CAAC;;AAGD,IAAa,oBAAoB,IAAI,OAAO;CAC1C,OAAO,EAAE,gBAAgB,aAAa;CACtC,QAAQ,EAAE,gBAAgB,SAAS;CACnC,KAAK,EAAE,gBAAgB,WAAW;CAClC,SAAS,EAAE,gBAAgB,gBAAgB;CAC3C,QAAQ,EAAE,gBAAgB,eAAe;CACzC,QAAQ,EAAE,gBAAgB,eAAe;AAC3C,CAAC;;;;;;AASD,SAAgB,WACd,KACA,MAC8B;CAE9B,OAAO,0BACL,QAAA,SAAA;EAAA,MAAA,YAAAC,aAAA,QAAA,aACc,KAAK;EAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;EAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;EAAA,MAAA,OAAAA,aAAA,QAAA,QAGV,KAAK;EAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;EAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;EAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;EAAA,MAAA,SAAAA,aAAA,QAAA,UAIH,KAAK;EAAA,MAAA,OAAAA,aAAA,QAAA,QACP,KAAK;EAAA,aAAA,MAAA;EAAA,MAET,OAAIC,UAAA,QAAA,MAAA,KAAA;EAAA,aAED;GAAA,IAAA;GACJ,MAAM,MAAM;GACZ,MAAM,KAAK;IACT,OAAA,QAAS,WAAW,SAAS,WAAW;IACxC,WAAU,UAAA;IACV,KAAA,UAAS,KAAA,UAAS,YAAY,WAAW,cAAc,WAAW;IAClE,MAAA,SAAS,gBAAe,MAAA;IACxB,QAAA,SAAW,kBAAiB,QAAA;IAC5B,IAAA,SAAO,UAAS,IAAA;IAChB,OAAA,SAAU,aAAY,OAAA;IACtB,UAAA,SAAa,gBAAe,UAAA;IAC5B,KAAA,SAAQ,WAAW;IACnB,SAAS,GAAG,KAAK,WAAW;GAAK;GAEnC,OAAAC,YAAA,KAAgB,WAAsB;IAAE;IAAI,MAAM,SAAS,GAAG;GAAE,GAAG,IAAI,GAAC,QAAA,QAAjEC,gBAAA,MAAkF,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA;EAC5F;CAAC,GACH;EAAA,OAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;EAAA;EAAE;CAAK,CACT;AACF;;AAGA,IAAa,OAAO,WAAW,OAAO,MAAM;;AAE5C,IAAa,WAAW,WAAW,MAAM,UAAU;;AAGnD,IAAa,kBAAkB,WAAW,MAAM,iBAAiB"}
+{"version":3,"file":"Flex.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_vtp_forwardChildren"],"sources":["../../src/layout/Flex.tsx"],"sourcesContent":["/**\n * 一维布局（flex）。不拆 Stack / Group：竖排写 direction=\"column\"。\n * 一个元素一个组件（COMPONENTS.md §1）：Flex 是 div，FlexList 是 ul；\n * 其他语义容器用 createFlex 生成，如 `const Toolbar = createFlex('nav', 'Toolbar')`。\n *\n *   <Flex gap=\"sm\" align=\"center\">…</Flex>\n *   <FlexList direction=\"column\" gap=\"xs\">…</FlexList>   列表：去掉圆点并保留列表语义（有序的用 FlexOrderedList）\n */\nimport { _component, type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport {\n  columnGapStyles,\n  gapStyles,\n  listRole,\n  listStyles,\n  rowGapStyles,\n  type LayoutTag,\n  type Space,\n} from '../utils/style/styles';\n\n/** 主轴方向（flex-direction） */\nexport interface FlexDirections {\n  /** 横排：子元素从起始边排到结束边 */\n  row: unknown;\n  /** 竖排：子元素从上到下 */\n  column: unknown;\n  /** 横排，顺序反过来 */\n  'row-reverse': unknown;\n  /** 竖排，顺序反过来 */\n  'column-reverse': unknown;\n}\n\n/** 交叉轴对齐（align-items）：横排时是竖直方向，竖排时是水平方向 */\nexport interface FlexAligns {\n  /** 贴着交叉轴的起点（横排时顶部对齐） */\n  start: unknown;\n  /** 居中 */\n  center: unknown;\n  /** 贴着交叉轴的终点（横排时底部对齐） */\n  end: unknown;\n  /** 拉伸填满交叉轴（默认） */\n  stretch: unknown;\n  /** 按文字基线对齐：字号不同的文字、图标与文字混排 */\n  baseline: unknown;\n}\n\n/** 主轴分布（justify-content） */\nexport interface FlexJustifies {\n  /** 靠主轴起点（默认） */\n  start: unknown;\n  /** 居中 */\n  center: unknown;\n  /** 靠主轴终点 */\n  end: unknown;\n  /** 两端对齐，中间等距：首尾贴边 */\n  between: unknown;\n  /** 每项两侧留白相等：首尾留白是中间的一半 */\n  around: unknown;\n  /** 所有空隙相等，包括首尾 */\n  evenly: unknown;\n}\n\n/** flex 布局的选项，Flex、FlexList 与 createFlex 生成的组件共用 */\nexport interface FlexOptions {\n  /** 主轴方向，默认 row */\n  direction?: keyof FlexDirections;\n  /** 交叉轴对齐（align-items），默认 stretch */\n  align?: keyof FlexAligns;\n  /** 主轴分布（justify-content），默认 start */\n  justify?: keyof FlexJustifies;\n  /** 换行；'reverse' 为反向换行 */\n  wrap?: boolean | 'reverse';\n  /** 间距档位，对应主题的 space */\n  gap?: Space;\n  /** 换行时行与行之间的间距，盖过 gap（同 Grid） */\n  rowGap?: Space;\n  /** 同一行里项与项之间的间距，盖过 gap（同 Grid） */\n  columnGap?: Space;\n  /** 行内 flex（inline-flex） */\n  inline?: boolean;\n  /** 在父级的 flex 布局里占满剩余空间，并允许收缩到比内容窄（里面的文字才能截断）：头像旁边的正文、图标旁边的说明 */\n  grow?: boolean;\n  children?: VNodeChild;\n}\n\n/** Flex 的样式：root、inline、row、column、row-reverse、column-reverse、wrap、grow 等 */\nexport const flexStyles = css.create({\n  root: { display: 'flex' },\n  inline: { display: 'inline-flex' },\n  row: { flexDirection: 'row' },\n  column: { flexDirection: 'column' },\n  'row-reverse': { flexDirection: 'row-reverse' },\n  'column-reverse': { flexDirection: 'column-reverse' },\n  wrap: { flexWrap: 'wrap' },\n  wrapReverse: { flexWrap: 'wrap-reverse' },\n  // 占满剩下的空间；横排、竖排都能缩小到比内容小（列表、表格在里面自己滚动）\n  grow: { flexGrow: 1, minWidth: 0, minHeight: 0 },\n});\n\n/** Flex 的样式：start、center、end、stretch、baseline */\nexport const flexAlignStyles = css.create({\n  start: { alignItems: 'flex-start' },\n  center: { alignItems: 'center' },\n  end: { alignItems: 'flex-end' },\n  stretch: { alignItems: 'stretch' },\n  baseline: { alignItems: 'baseline' },\n});\n\n/** Flex 的样式：start、center、end、between、around、evenly */\nexport const flexJustifyStyles = css.create({\n  start: { justifyContent: 'flex-start' },\n  center: { justifyContent: 'center' },\n  end: { justifyContent: 'flex-end' },\n  between: { justifyContent: 'space-between' },\n  around: { justifyContent: 'space-around' },\n  evenly: { justifyContent: 'space-evenly' },\n});\n\n/** 未声明的属性落到元素上：Flex 为 div，FlexList 为 ul，createFlex 生成的为给定的标签 */\nexport type FlexProps<Tag extends LayoutTag = 'div'> = PartProps<Tag> & FlexOptions;\n\n/**\n * 生成渲染为指定语义标签的 flex 布局组件；列表标签（ul、ol）自动去掉圆点并补上 role=\"list\"。\n * name 是 DevTools 与警告信息里显示的组件名。\n */\nexport function createFlex<Tag extends LayoutTag>(\n  tag: Tag,\n  name: string,\n): TsxComponent<FlexProps<Tag>> {\n  // 实现按布局标签共有的属性写，对外每个组件只接受自己元素的属性\n  return _component(\n    ({\n      direction = 'row',\n      align,\n      justify,\n      wrap = false,\n      gap,\n      rowGap,\n      columnGap,\n      inline = false,\n      grow = false,\n      children,\n      ...rest\n    }: FlexProps<LayoutTag>) =>\n      () => {\n        const Tag = tag as LayoutTag;\n        const sx = [\n          inline ? flexStyles.inline : flexStyles.root,\n          flexStyles[direction],\n          wrap && (wrap === 'reverse' ? flexStyles.wrapReverse : flexStyles.wrap),\n          align && flexAlignStyles[align],\n          justify && flexJustifyStyles[justify],\n          gap && gapStyles[gap],\n          rowGap && rowGapStyles[rowGap],\n          columnGap && columnGapStyles[columnGap],\n          grow && flexStyles.grow,\n          listRole(tag) && listStyles.reset,\n        ];\n        return <Tag {...mergeAttrs<LayoutTag>({ sx, role: listRole(tag) }, rest)}>{children}</Tag>;\n      },\n    { name },\n  ) as unknown as TsxComponent<FlexProps<Tag>>;\n}\n\n/** flex 布局（div） */\nexport const Flex = createFlex('div', 'Flex');\n/** flex 布局的列表（ul）：去掉圆点与缩进，保留列表语义；子元素用 li */\nexport const FlexList = createFlex('ul', 'FlexList');\n\n/** 有序列表（ol）的 flex 布局：顺序有意义的一组（面包屑、步骤、时间线、通知），去掉编号并保留列表语义 */\nexport const FlexOrderedList = createFlex('ol', 'FlexOrderedList');\n"],"mappings":";;;;;;;;;;AAgEA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AAwBA,IAAa,aAAa,IAAI,OAAO;CACnC,MAAM,EAAE,SAAS,OAAO;CACxB,QAAQ,EAAE,SAAS,cAAc;CACjC,KAAK,EAAE,eAAe,MAAM;CAC5B,QAAQ,EAAE,eAAe,SAAS;CAClC,eAAe,EAAE,eAAe,cAAc;CAC9C,kBAAkB,EAAE,eAAe,iBAAiB;CACpD,MAAM,EAAE,UAAU,OAAO;CACzB,aAAa,EAAE,UAAU,eAAe;CAExC,MAAM;EAAE,UAAU;EAAG,UAAU;EAAG,WAAW;CAAE;AACjD,CAAC;;AAGD,IAAa,kBAAkB,IAAI,OAAO;CACxC,OAAO,EAAE,YAAY,aAAa;CAClC,QAAQ,EAAE,YAAY,SAAS;CAC/B,KAAK,EAAE,YAAY,WAAW;CAC9B,SAAS,EAAE,YAAY,UAAU;CACjC,UAAU,EAAE,YAAY,WAAW;AACrC,CAAC;;AAGD,IAAa,oBAAoB,IAAI,OAAO;CAC1C,OAAO,EAAE,gBAAgB,aAAa;CACtC,QAAQ,EAAE,gBAAgB,SAAS;CACnC,KAAK,EAAE,gBAAgB,WAAW;CAClC,SAAS,EAAE,gBAAgB,gBAAgB;CAC3C,QAAQ,EAAE,gBAAgB,eAAe;CACzC,QAAQ,EAAE,gBAAgB,eAAe;AAC3C,CAAC;;;;;;AASD,SAAgB,WACd,KACA,MAC8B;CAE9B,OAAO,0BACL,QAAA,SAAA;EAAA,MAAA,YAAAC,aAAA,QAAA,aACc,KAAK;EAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;EAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;EAAA,MAAA,OAAAA,aAAA,QAAA,QAGV,KAAK;EAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;EAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;EAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;EAAA,MAAA,SAAAA,aAAA,QAAA,UAIH,KAAK;EAAA,MAAA,OAAAA,aAAA,QAAA,QACP,KAAK;EAAA,aAAA,MAAA;EAAA,MAET,OAAIC,UAAA,QAAA,MAAA,KAAA;EAAA,aAED;GAAA,IAAA;GACJ,MAAM,MAAM;GACZ,MAAM,KAAK;IACT,OAAA,QAAS,WAAW,SAAS,WAAW;IACxC,WAAU,UAAA;IACV,KAAA,UAAS,KAAA,UAAS,YAAY,WAAW,cAAc,WAAW;IAClE,MAAA,SAAS,gBAAe,MAAA;IACxB,QAAA,SAAW,kBAAiB,QAAA;IAC5B,IAAA,SAAO,UAAS,IAAA;IAChB,OAAA,SAAU,aAAY,OAAA;IACtB,UAAA,SAAa,gBAAe,UAAA;IAC5B,KAAA,SAAQ,WAAW;IACnB,SAAS,GAAG,KAAK,WAAW;GAAK;GAEnC,OAAAC,YAAA,KAAgB,WAAsB;IAAE;IAAI,MAAM,SAAS,GAAG;GAAE,GAAG,IAAI,GAAC,QAAA,QAAjEC,gBAAA,MAAkF,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA;EAC5F;CAAC,GACH;EAAA,OAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;EAAA;EAAE;CAAK,CACT;AACF;;AAGA,IAAa,OAAO,WAAW,OAAO,MAAM;;AAE5C,IAAa,WAAW,WAAW,MAAM,UAAU;;AAGnD,IAAa,kBAAkB,WAAW,MAAM,iBAAiB"}

package/dist/layout/Grid.d.ts

@@ -9,7 +9,7 @@
  * 一个元素一个组件（COMPONENTS.md §1）：Grid 是 div，GridList 是 ul；其他语义容器用 createGrid 生成。
  */
 import { type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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';

package/dist/layout/Grid.js

@@ -3,7 +3,7 @@ import { columnGapStyles, gapStyles, listRole, listStyles, rowGapStyles } from "
 import { useResizeObserver } from "../utils/dom/resize.js";
 import { createVNode, inject, isVNode, provide, ref, shallowRef } 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";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/layout/Grid.tsx
 /** 单元格内容在格子里的对齐（align-items 为块方向、justify-items 为行内方向） */
 /** 自动排布方向（grid-auto-flow） */

package/dist/layout/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","names":["_isVNode","_vue_shallowRef","_vue_ref","_vtp_readonlyProp","_vtp_restProps","_createVNode","_vtp_forwardChildren"],"sources":["../../src/layout/Grid.tsx"],"sourcesContent":["/**\n * 二维布局（grid）。\n *\n *   <Grid columns={3} gap=\"md\">…</Grid>                 固定列数，等宽\n *   <Grid minItemWidth=\"14em\" gap=\"md\">…</Grid>         按宽度自动换列：容器多宽就放几列，不需要断点\n *   <GridItem span={2}>…</GridItem>                     跨两列；span=\"full\" 占满一整行；自动换列窄到放不下时跨当前的列数\n *\n * 响应式不引入断点：minItemWidth 覆盖最常见的自动换列，其余用 sx 加容器查询。\n * 一个元素一个组件（COMPONENTS.md §1）：Grid 是 div，GridList 是 ul；其他语义容器用 createGrid 生成。\n */\nimport { _component, type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { inject, provide, type InjectionKey, type VNodeChild } from 'vue';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport {\n  columnGapStyles,\n  gapStyles,\n  listRole,\n  listStyles,\n  rowGapStyles,\n  type LayoutTag,\n  type Space,\n} from '../utils/style/styles';\n\n/** 单元格内容在格子里的对齐（align-items 为块方向、justify-items 为行内方向） */\nexport interface GridAligns {\n  /** 贴着格子的起始边 */\n  start: unknown;\n  /** 居中 */\n  center: unknown;\n  /** 贴着格子的结束边 */\n  end: unknown;\n  /** 拉伸填满格子（默认） */\n  stretch: unknown;\n}\n\n/** 自动排布方向（grid-auto-flow） */\nexport interface GridFlows {\n  /** 逐行填充（默认） */\n  row: unknown;\n  /** 逐列填充 */\n  column: unknown;\n  /** 逐行填充，并回填前面留下的空位（顺序可能变化） */\n  'row dense': unknown;\n  /** 逐列填充，并回填空位 */\n  'column dense': unknown;\n}\n\n/** grid 布局的选项，Grid、GridList 与 createGrid 生成的组件共用 */\nexport interface GridOptions {\n  /** 列数（等宽列）；与 minItemWidth 同时给时以 minItemWidth 为准 */\n  columns?: number;\n  /**\n   * 每项的最小宽度（CSS 长度，如 '14em'）：按容器宽度自动决定列数，窄于它时单列。\n   * 项目比放得下的列数少时，空列收起、各项拉宽占满（auto-fit，同 Chakra 的 minChildWidth），不在右边留空\n   */\n  minItemWidth?: string;\n  /** 间距档位，对应主题的 space */\n  gap?: Space;\n  /** 行间距，覆盖 gap */\n  rowGap?: Space;\n  /** 列间距，覆盖 gap */\n  columnGap?: Space;\n  /** 单元格在块方向的对齐（align-items），默认 stretch */\n  align?: keyof GridAligns;\n  /** 单元格在行内方向的对齐（justify-items），默认 stretch */\n  justify?: keyof GridAligns;\n  /** 自动排布方向（grid-auto-flow），dense 回填空位 */\n  flow?: keyof GridFlows;\n  children?: VNodeChild;\n}\n\n/** Grid 的样式：root */\nexport const gridStyles = css.create({\n  root: { display: 'grid' },\n});\n\n// 列数与最小宽度是任意值，用动态样式（编译为 CSS 变量）；单独一个 create，见 COMPONENTS.md §4\n/** Grid 的样式：columns、minItemWidth */\nexport const gridDynamicStyles = css.create({\n  columns: (count: number) => ({ gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` }),\n  // min(…, 100%)：容器比最小宽度还窄时不溢出\n  minItemWidth: (width: string) => ({\n    gridTemplateColumns: `repeat(auto-fit, minmax(min(${width}, 100%), 1fr))`,\n  }),\n});\n\n/** Grid 的样式：start、center、end、stretch */\nexport const gridAlignStyles = css.create({\n  start: { alignItems: 'start' },\n  center: { alignItems: 'center' },\n  end: { alignItems: 'end' },\n  stretch: { alignItems: 'stretch' },\n});\n\n/** Grid 的样式：start、center、end、stretch */\nexport const gridJustifyStyles = css.create({\n  start: { justifyItems: 'start' },\n  center: { justifyItems: 'center' },\n  end: { justifyItems: 'end' },\n  stretch: { justifyItems: 'stretch' },\n});\n\n/** Grid 的样式：row、column、row dense、column dense */\nexport const gridFlowStyles = css.create({\n  row: { gridAutoFlow: 'row' },\n  column: { gridAutoFlow: 'column' },\n  'row dense': { gridAutoFlow: 'row dense' },\n  'column dense': { gridAutoFlow: 'column dense' },\n});\n\n// 网格现在实际有几列；null 是不知道（没有固定列数，也量不出来），GridItem 照写的 span 跨\nconst gridColumnsKey: InjectionKey<() => number | null> = Symbol('GridColumns');\n\n/** CSS 长度换成 px：认 px、em（按元素的字号）、rem；别的单位（calc、%）返回 null */\nfunction lengthToPx(length: string, element: Element): number | null {\n  const match = /^(\\d*\\.?\\d+)(px|r?em)$/.exec(length.trim());\n  if (!match) return null;\n  const value = Number(match[1]);\n  if (match[2] === 'px') return value;\n  const from = match[2] === 'rem' ? document.documentElement : element;\n  return value * parseFloat(getComputedStyle(from).fontSize);\n}\n\n/**\n * 网格的列数交给里面的 GridItem（数字 span 不超过它）：按宽度自动换列（auto-fill / auto-fit）时量出来，\n * 不然窄到一列时 span={2} 会撑出一条隐式的列、内容溢出。返回给网格元素的 ref；FormSection 也用它。\n */\nexport function provideGridColumns(\n  read: () => { columns?: number; minItemWidth?: string },\n): (element: unknown) => void {\n  let element = _state.raw<HTMLElement | null>(null);\n  let measured = _state<number | null>(null);\n  useResizeObserver(\n    () => (read().minItemWidth == null ? null : element),\n    () => {\n      const { columns, minItemWidth } = read();\n      if (!element || minItemWidth == null) return;\n      const style = getComputedStyle(element);\n      const gap = parseFloat(style.columnGap) || 0;\n      const width =\n        element.clientWidth -\n        parseFloat(style.paddingInlineStart) -\n        parseFloat(style.paddingInlineEnd);\n      const min = lengthToPx(minItemWidth, element);\n      const fits =\n        min == null ? null : Math.max(1, Math.floor((width + gap) / (Math.min(min, width) + gap)));\n      measured = fits == null ? null : Math.min(fits, columns ?? fits);\n    },\n  );\n  provide(gridColumnsKey, () =>\n    read().minItemWidth == null ? (read().columns ?? null) : measured,\n  );\n  return (next) => (element = next as HTMLElement | null);\n}\n\n/** 未声明的属性落到元素上：Grid 为 div，GridList 为 ul，createGrid 生成的为给定的标签 */\nexport type GridProps<Tag extends LayoutTag = 'div'> = PartProps<Tag> & GridOptions;\n\n/**\n * 生成渲染为指定语义标签的 grid 布局组件；列表标签（ul、ol）自动去掉圆点并补上 role=\"list\"。\n * name 是 DevTools 与警告信息里显示的组件名。\n */\nexport function createGrid<Tag extends LayoutTag>(\n  tag: Tag,\n  name: string,\n): TsxComponent<GridProps<Tag>> {\n  // 实现按布局标签共有的属性写，对外每个组件只接受自己元素的属性\n  return _component(\n    ({\n      columns,\n      minItemWidth,\n      gap,\n      rowGap,\n      columnGap,\n      align,\n      justify,\n      flow,\n      children,\n      ...rest\n    }: GridProps<LayoutTag>) => {\n      const gridRef = provideGridColumns(() => ({ columns, minItemWidth }));\n      return () => {\n        const Tag = tag as LayoutTag;\n        const template =\n          minItemWidth != null\n            ? gridDynamicStyles.minItemWidth(minItemWidth)\n            : columns != null && gridDynamicStyles.columns(columns);\n        const sx = [\n          gridStyles.root,\n          template,\n          gap && gapStyles[gap],\n          rowGap && rowGapStyles[rowGap],\n          columnGap && columnGapStyles[columnGap],\n          align && gridAlignStyles[align],\n          justify && gridJustifyStyles[justify],\n          flow && gridFlowStyles[flow],\n          listRole(tag) && listStyles.reset,\n        ];\n        return (\n          <Tag {...mergeAttrs<LayoutTag>({ sx, role: listRole(tag) }, rest, { ref: gridRef })}>\n            {children}\n          </Tag>\n        );\n      };\n    },\n    { name },\n  ) as unknown as TsxComponent<GridProps<Tag>>;\n}\n\n/** grid 布局（div） */\nexport const Grid = createGrid('div', 'Grid');\n/** grid 布局的列表（ul）：卡片列表等，去掉圆点与缩进，保留列表语义；子元素用 li */\nexport const GridList = createGrid('ul', 'GridList');\n\n/** 网格里一项的跨度，GridItem、GridListItem 共用 */\nexport interface GridItemOptions {\n  /**\n   * 跨几列；`'full'` 占满一整行（从第一列到最后一列）。按宽度自动换列的网格（minItemWidth、FormSection）\n   * 窄到放不下时跨当前的列数（量的是 px、em、rem 写的最小宽度）\n   */\n  span?: number | 'full';\n  /** 跨几行 */\n  rowSpan?: number;\n  children?: VNodeChild;\n}\n\n/** 网格项的标签 */\nexport type GridItemTag = 'div' | 'li';\n\n/** 未声明的属性落到元素上：GridItem 为 div，GridListItem 为 li */\nexport type GridItemProps<Tag extends GridItemTag = 'div'> = PartProps<Tag> & GridItemOptions;\n\n/** GridItem 的样式：full */\nexport const gridItemStyles = css.create({\n  full: { gridColumn: '1 / -1' },\n});\n\n/** GridItem 的样式：span、rowSpan */\nexport const gridItemDynamicStyles = css.create({\n  span: (count: number) => ({ gridColumn: `span ${count} / span ${count}` }),\n  rowSpan: (count: number) => ({ gridRow: `span ${count} / span ${count}` }),\n});\n\n/** 生成网格项组件：跨列、跨行 */\nexport function createGridItem<Tag extends GridItemTag>(\n  tag: Tag,\n  name: string,\n): TsxComponent<GridItemProps<Tag>> {\n  return _component(\n    ({ span, rowSpan, children, ...rest }: GridItemProps<GridItemTag>) => {\n      const columns = inject(gridColumnsKey, () => null);\n      return () => {\n        const Tag = tag as GridItemTag;\n        const across = typeof span === 'number' ? Math.min(span, columns() ?? span) : span;\n        const sx = [\n          across === 'full'\n            ? gridItemStyles.full\n            : across != null && across > 1 && gridItemDynamicStyles.span(across),\n          rowSpan != null && rowSpan > 1 && gridItemDynamicStyles.rowSpan(rowSpan),\n        ];\n        return <Tag {...mergeAttrs<GridItemTag>({ sx }, rest)}>{children}</Tag>;\n      };\n    },\n    { name },\n  ) as unknown as TsxComponent<GridItemProps<Tag>>;\n}\n\n/** 网格里的一项（div）：跨列、跨行 */\nexport const GridItem = createGridItem('div', 'GridItem');\n/** GridList 里的一项（li）：跨列、跨行 */\nexport const GridListItem = createGridItem('li', 'GridListItem');\n"],"mappings":"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"}
+{"version":3,"file":"Grid.js","names":["_isVNode","_vue_shallowRef","_vue_ref","_vtp_readonlyProp","_vtp_restProps","_createVNode","_vtp_forwardChildren"],"sources":["../../src/layout/Grid.tsx"],"sourcesContent":["/**\n * 二维布局（grid）。\n *\n *   <Grid columns={3} gap=\"md\">…</Grid>                 固定列数，等宽\n *   <Grid minItemWidth=\"14em\" gap=\"md\">…</Grid>         按宽度自动换列：容器多宽就放几列，不需要断点\n *   <GridItem span={2}>…</GridItem>                     跨两列；span=\"full\" 占满一整行；自动换列窄到放不下时跨当前的列数\n *\n * 响应式不引入断点：minItemWidth 覆盖最常见的自动换列，其余用 sx 加容器查询。\n * 一个元素一个组件（COMPONENTS.md §1）：Grid 是 div，GridList 是 ul；其他语义容器用 createGrid 生成。\n */\nimport { _component, type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { inject, provide, type InjectionKey, type VNodeChild } from 'vue';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport {\n  columnGapStyles,\n  gapStyles,\n  listRole,\n  listStyles,\n  rowGapStyles,\n  type LayoutTag,\n  type Space,\n} from '../utils/style/styles';\n\n/** 单元格内容在格子里的对齐（align-items 为块方向、justify-items 为行内方向） */\nexport interface GridAligns {\n  /** 贴着格子的起始边 */\n  start: unknown;\n  /** 居中 */\n  center: unknown;\n  /** 贴着格子的结束边 */\n  end: unknown;\n  /** 拉伸填满格子（默认） */\n  stretch: unknown;\n}\n\n/** 自动排布方向（grid-auto-flow） */\nexport interface GridFlows {\n  /** 逐行填充（默认） */\n  row: unknown;\n  /** 逐列填充 */\n  column: unknown;\n  /** 逐行填充，并回填前面留下的空位（顺序可能变化） */\n  'row dense': unknown;\n  /** 逐列填充，并回填空位 */\n  'column dense': unknown;\n}\n\n/** grid 布局的选项，Grid、GridList 与 createGrid 生成的组件共用 */\nexport interface GridOptions {\n  /** 列数（等宽列）；与 minItemWidth 同时给时以 minItemWidth 为准 */\n  columns?: number;\n  /**\n   * 每项的最小宽度（CSS 长度，如 '14em'）：按容器宽度自动决定列数，窄于它时单列。\n   * 项目比放得下的列数少时，空列收起、各项拉宽占满（auto-fit，同 Chakra 的 minChildWidth），不在右边留空\n   */\n  minItemWidth?: string;\n  /** 间距档位，对应主题的 space */\n  gap?: Space;\n  /** 行间距，覆盖 gap */\n  rowGap?: Space;\n  /** 列间距，覆盖 gap */\n  columnGap?: Space;\n  /** 单元格在块方向的对齐（align-items），默认 stretch */\n  align?: keyof GridAligns;\n  /** 单元格在行内方向的对齐（justify-items），默认 stretch */\n  justify?: keyof GridAligns;\n  /** 自动排布方向（grid-auto-flow），dense 回填空位 */\n  flow?: keyof GridFlows;\n  children?: VNodeChild;\n}\n\n/** Grid 的样式：root */\nexport const gridStyles = css.create({\n  root: { display: 'grid' },\n});\n\n// 列数与最小宽度是任意值，用动态样式（编译为 CSS 变量）；单独一个 create，见 COMPONENTS.md §4\n/** Grid 的样式：columns、minItemWidth */\nexport const gridDynamicStyles = css.create({\n  columns: (count: number) => ({ gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` }),\n  // min(…, 100%)：容器比最小宽度还窄时不溢出\n  minItemWidth: (width: string) => ({\n    gridTemplateColumns: `repeat(auto-fit, minmax(min(${width}, 100%), 1fr))`,\n  }),\n});\n\n/** Grid 的样式：start、center、end、stretch */\nexport const gridAlignStyles = css.create({\n  start: { alignItems: 'start' },\n  center: { alignItems: 'center' },\n  end: { alignItems: 'end' },\n  stretch: { alignItems: 'stretch' },\n});\n\n/** Grid 的样式：start、center、end、stretch */\nexport const gridJustifyStyles = css.create({\n  start: { justifyItems: 'start' },\n  center: { justifyItems: 'center' },\n  end: { justifyItems: 'end' },\n  stretch: { justifyItems: 'stretch' },\n});\n\n/** Grid 的样式：row、column、row dense、column dense */\nexport const gridFlowStyles = css.create({\n  row: { gridAutoFlow: 'row' },\n  column: { gridAutoFlow: 'column' },\n  'row dense': { gridAutoFlow: 'row dense' },\n  'column dense': { gridAutoFlow: 'column dense' },\n});\n\n// 网格现在实际有几列；null 是不知道（没有固定列数，也量不出来），GridItem 照写的 span 跨\nconst gridColumnsKey: InjectionKey<() => number | null> = Symbol('GridColumns');\n\n/** CSS 长度换成 px：认 px、em（按元素的字号）、rem；别的单位（calc、%）返回 null */\nfunction lengthToPx(length: string, element: Element): number | null {\n  const match = /^(\\d*\\.?\\d+)(px|r?em)$/.exec(length.trim());\n  if (!match) return null;\n  const value = Number(match[1]);\n  if (match[2] === 'px') return value;\n  const from = match[2] === 'rem' ? document.documentElement : element;\n  return value * parseFloat(getComputedStyle(from).fontSize);\n}\n\n/**\n * 网格的列数交给里面的 GridItem（数字 span 不超过它）：按宽度自动换列（auto-fill / auto-fit）时量出来，\n * 不然窄到一列时 span={2} 会撑出一条隐式的列、内容溢出。返回给网格元素的 ref；FormSection 也用它。\n */\nexport function provideGridColumns(\n  read: () => { columns?: number; minItemWidth?: string },\n): (element: unknown) => void {\n  let element = _state.raw<HTMLElement | null>(null);\n  let measured = _state<number | null>(null);\n  useResizeObserver(\n    () => (read().minItemWidth == null ? null : element),\n    () => {\n      const { columns, minItemWidth } = read();\n      if (!element || minItemWidth == null) return;\n      const style = getComputedStyle(element);\n      const gap = parseFloat(style.columnGap) || 0;\n      const width =\n        element.clientWidth -\n        parseFloat(style.paddingInlineStart) -\n        parseFloat(style.paddingInlineEnd);\n      const min = lengthToPx(minItemWidth, element);\n      const fits =\n        min == null ? null : Math.max(1, Math.floor((width + gap) / (Math.min(min, width) + gap)));\n      measured = fits == null ? null : Math.min(fits, columns ?? fits);\n    },\n  );\n  provide(gridColumnsKey, () =>\n    read().minItemWidth == null ? (read().columns ?? null) : measured,\n  );\n  return (next) => (element = next as HTMLElement | null);\n}\n\n/** 未声明的属性落到元素上：Grid 为 div，GridList 为 ul，createGrid 生成的为给定的标签 */\nexport type GridProps<Tag extends LayoutTag = 'div'> = PartProps<Tag> & GridOptions;\n\n/**\n * 生成渲染为指定语义标签的 grid 布局组件；列表标签（ul、ol）自动去掉圆点并补上 role=\"list\"。\n * name 是 DevTools 与警告信息里显示的组件名。\n */\nexport function createGrid<Tag extends LayoutTag>(\n  tag: Tag,\n  name: string,\n): TsxComponent<GridProps<Tag>> {\n  // 实现按布局标签共有的属性写，对外每个组件只接受自己元素的属性\n  return _component(\n    ({\n      columns,\n      minItemWidth,\n      gap,\n      rowGap,\n      columnGap,\n      align,\n      justify,\n      flow,\n      children,\n      ...rest\n    }: GridProps<LayoutTag>) => {\n      const gridRef = provideGridColumns(() => ({ columns, minItemWidth }));\n      return () => {\n        const Tag = tag as LayoutTag;\n        const template =\n          minItemWidth != null\n            ? gridDynamicStyles.minItemWidth(minItemWidth)\n            : columns != null && gridDynamicStyles.columns(columns);\n        const sx = [\n          gridStyles.root,\n          template,\n          gap && gapStyles[gap],\n          rowGap && rowGapStyles[rowGap],\n          columnGap && columnGapStyles[columnGap],\n          align && gridAlignStyles[align],\n          justify && gridJustifyStyles[justify],\n          flow && gridFlowStyles[flow],\n          listRole(tag) && listStyles.reset,\n        ];\n        return (\n          <Tag {...mergeAttrs<LayoutTag>({ sx, role: listRole(tag) }, rest, { ref: gridRef })}>\n            {children}\n          </Tag>\n        );\n      };\n    },\n    { name },\n  ) as unknown as TsxComponent<GridProps<Tag>>;\n}\n\n/** grid 布局（div） */\nexport const Grid = createGrid('div', 'Grid');\n/** grid 布局的列表（ul）：卡片列表等，去掉圆点与缩进，保留列表语义；子元素用 li */\nexport const GridList = createGrid('ul', 'GridList');\n\n/** 网格里一项的跨度，GridItem、GridListItem 共用 */\nexport interface GridItemOptions {\n  /**\n   * 跨几列；`'full'` 占满一整行（从第一列到最后一列）。按宽度自动换列的网格（minItemWidth、FormSection）\n   * 窄到放不下时跨当前的列数（量的是 px、em、rem 写的最小宽度）\n   */\n  span?: number | 'full';\n  /** 跨几行 */\n  rowSpan?: number;\n  children?: VNodeChild;\n}\n\n/** 网格项的标签 */\nexport type GridItemTag = 'div' | 'li';\n\n/** 未声明的属性落到元素上：GridItem 为 div，GridListItem 为 li */\nexport type GridItemProps<Tag extends GridItemTag = 'div'> = PartProps<Tag> & GridItemOptions;\n\n/** GridItem 的样式：full */\nexport const gridItemStyles = css.create({\n  full: { gridColumn: '1 / -1' },\n});\n\n/** GridItem 的样式：span、rowSpan */\nexport const gridItemDynamicStyles = css.create({\n  span: (count: number) => ({ gridColumn: `span ${count} / span ${count}` }),\n  rowSpan: (count: number) => ({ gridRow: `span ${count} / span ${count}` }),\n});\n\n/** 生成网格项组件：跨列、跨行 */\nexport function createGridItem<Tag extends GridItemTag>(\n  tag: Tag,\n  name: string,\n): TsxComponent<GridItemProps<Tag>> {\n  return _component(\n    ({ span, rowSpan, children, ...rest }: GridItemProps<GridItemTag>) => {\n      const columns = inject(gridColumnsKey, () => null);\n      return () => {\n        const Tag = tag as GridItemTag;\n        const across = typeof span === 'number' ? Math.min(span, columns() ?? span) : span;\n        const sx = [\n          across === 'full'\n            ? gridItemStyles.full\n            : across != null && across > 1 && gridItemDynamicStyles.span(across),\n          rowSpan != null && rowSpan > 1 && gridItemDynamicStyles.rowSpan(rowSpan),\n        ];\n        return <Tag {...mergeAttrs<GridItemTag>({ sx }, rest)}>{children}</Tag>;\n      };\n    },\n    { name },\n  ) as unknown as TsxComponent<GridItemProps<Tag>>;\n}\n\n/** 网格里的一项（div）：跨列、跨行 */\nexport const GridItem = createGridItem('div', 'GridItem');\n/** GridList 里的一项（li）：跨列、跨行 */\nexport const GridListItem = createGridItem('li', 'GridListItem');\n"],"mappings":"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"}

package/dist/layout/PageScrollbar.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { PartProps } from '../utils/props';
 import { type ScrollbarTypes } from './ScrollArea';
 /** PageScrollbar 的属性 */

package/dist/layout/PageScrollbar.js

@@ -1,7 +1,7 @@
 import { OverlayScrollbar } from "./ScrollArea.js";
 import { createVNode, onBeforeUnmount, onMounted, shallowRef } from "vue";
 import { _component, readonlyProp } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/layout/PageScrollbar.tsx
 /** PageScrollbar 的属性 */
 /** PageScrollbar 的样式：document（写在页面根元素上，隐藏原生滚动条） */

package/dist/layout/PageScrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageScrollbar.js","names":["_vtp_readonlyProp","_vue_shallowRef","_createVNode"],"sources":["../../src/layout/PageScrollbar.tsx"],"sourcesContent":["/**\n * 整页的浮层滚动条：页面照常由窗口滚动（前进后退恢复位置、手机上收起地址栏、粘性定位、锚点跳转都不变），\n * 只隐藏页面的原生滚动条，换成固定在视口一侧、半透明的 OverlayScrollbar：滚动时出现，停下后淡出，不占宽度。\n * 指针移到窗口边缘时显示，可以拖动、点击轨道翻页。AppShell 默认带着它。\n *\n *   <PageScrollbar />            放在应用里任意位置，挂载期间生效\n *\n * 模态框打开时页面滚动被锁住（overflow: hidden），滚动条随之隐藏。从右到左排版时在左侧（插入边的逻辑属性）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onBeforeUnmount, onMounted } from 'vue';\nimport type { PartProps } from '../utils/props';\nimport { OverlayScrollbar, type ScrollbarTypes } from './ScrollArea';\n\n/** PageScrollbar 的属性 */\nexport interface PageScrollbarProps {\n  /** 什么时候显示，默认 scroll（滚动时；指针移到窗口边缘时也会显示） */\n  type?: keyof ScrollbarTypes;\n  /** 停止滚动后多久淡出（毫秒），默认 800 */\n  hideDelay?: number;\n  /** 轨道的部件属性 */\n  propsScrollbar?: PartProps<'div', 'aria-hidden'>;\n  /** 滑块的部件属性 */\n  propsThumb?: PartProps<'div'>;\n}\n\n/** PageScrollbar 的样式：document（写在页面根元素上，隐藏原生滚动条） */\nexport const pageScrollbarStyles = css.create({\n  document: { scrollbarWidth: 'none', '::-webkit-scrollbar': { display: 'none' } },\n});\n\n/** 整页的浮层滚动条：挂载期间隐藏页面的原生滚动条 */\nexport const PageScrollbar = _component(\n  ({ type = 'scroll', hideDelay = 800, propsScrollbar, propsThumb }: PageScrollbarProps) => {\n    let viewport = _state.raw<HTMLElement | null>(null);\n    let content = _state.raw<HTMLElement | null>(null);\n    const classes = (css.attrs(pageScrollbarStyles.document).class ?? '')\n      .split(' ')\n      .filter(Boolean);\n\n    onMounted(() => {\n      viewport = document.scrollingElement as HTMLElement;\n      content = document.body;\n      document.documentElement.classList.add(...classes);\n    });\n    onBeforeUnmount(() => document.documentElement.classList.remove(...classes));\n\n    return () => (\n      <OverlayScrollbar\n        axis=\"y\"\n        viewport={viewport}\n        content={content}\n        type={type}\n        hideDelay={hideDelay}\n        fixed\n        propsScrollbar={propsScrollbar}\n        propsThumb={propsThumb}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;AA4BA,IAAa,sBAAsB,IAAI,OAAO,EAC5C,UAAU;CAAE,gBAAgB;CAAQ,uBAAuB,EAAE,SAAS,OAAO;AAAE,EACjF,CAAC;;AAGD,IAAa,gBAAgB,0BAC3B,QAAA,SAA0F;CAAA,MAAA,OAAAA,aAAA,QAAA,QAAhF,QAAQ;CAAA,MAAA,YAAAA,aAAA,QAAA,aAAc,GAAG;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CACjC,IAAI,WAAQC,WAAkC,IAAI;CAClD,IAAI,UAAOA,WAAkC,IAAI;CACjD,MAAM,WAAW,IAAI,MAAM,oBAAoB,QAAQ,CAAC,CAAC,SAAS,GAAA,CAC/D,MAAM,GAAG,CAAC,CACV,OAAO,OAAO;CAEjB,gBAAgB;EACd,SAAA,QAAW,SAAS;EACpB,QAAA,QAAU,SAAS;EACnB,SAAS,gBAAgB,UAAU,IAAI,GAAG,OAAO;CACnD,CAAC;CACD,sBAAsB,SAAS,gBAAgB,UAAU,OAAO,GAAG,OAAO,CAAC;CAE3E,aAAOC,YAAA,kBAAA;EAAA,QAAA;EAAA,YAAA,SAAA;EAAA,WAAA,QAAA;EAAA,QAAA,KAAA;EAAA,aAAA,UAAA;EAAA,SAAA;EAAA,kBAAA,eAAA;EAAA,cAAA,WAAA;CAAA,GAAA,IAAA;AAYT,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"PageScrollbar.js","names":["_vtp_readonlyProp","_vue_shallowRef","_createVNode"],"sources":["../../src/layout/PageScrollbar.tsx"],"sourcesContent":["/**\n * 整页的浮层滚动条：页面照常由窗口滚动（前进后退恢复位置、手机上收起地址栏、粘性定位、锚点跳转都不变），\n * 只隐藏页面的原生滚动条，换成固定在视口一侧、半透明的 OverlayScrollbar：滚动时出现，停下后淡出，不占宽度。\n * 指针移到窗口边缘时显示，可以拖动、点击轨道翻页。AppShell 默认带着它。\n *\n *   <PageScrollbar />            放在应用里任意位置，挂载期间生效\n *\n * 模态框打开时页面滚动被锁住（overflow: hidden），滚动条随之隐藏。从右到左排版时在左侧（插入边的逻辑属性）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onBeforeUnmount, onMounted } from 'vue';\nimport type { PartProps } from '../utils/props';\nimport { OverlayScrollbar, type ScrollbarTypes } from './ScrollArea';\n\n/** PageScrollbar 的属性 */\nexport interface PageScrollbarProps {\n  /** 什么时候显示，默认 scroll（滚动时；指针移到窗口边缘时也会显示） */\n  type?: keyof ScrollbarTypes;\n  /** 停止滚动后多久淡出（毫秒），默认 800 */\n  hideDelay?: number;\n  /** 轨道的部件属性 */\n  propsScrollbar?: PartProps<'div', 'aria-hidden'>;\n  /** 滑块的部件属性 */\n  propsThumb?: PartProps<'div'>;\n}\n\n/** PageScrollbar 的样式：document（写在页面根元素上，隐藏原生滚动条） */\nexport const pageScrollbarStyles = css.create({\n  document: { scrollbarWidth: 'none', '::-webkit-scrollbar': { display: 'none' } },\n});\n\n/** 整页的浮层滚动条：挂载期间隐藏页面的原生滚动条 */\nexport const PageScrollbar = _component(\n  ({ type = 'scroll', hideDelay = 800, propsScrollbar, propsThumb }: PageScrollbarProps) => {\n    let viewport = _state.raw<HTMLElement | null>(null);\n    let content = _state.raw<HTMLElement | null>(null);\n    const classes = (css.attrs(pageScrollbarStyles.document).class ?? '')\n      .split(' ')\n      .filter(Boolean);\n\n    onMounted(() => {\n      viewport = document.scrollingElement as HTMLElement;\n      content = document.body;\n      document.documentElement.classList.add(...classes);\n    });\n    onBeforeUnmount(() => document.documentElement.classList.remove(...classes));\n\n    return () => (\n      <OverlayScrollbar\n        axis=\"y\"\n        viewport={viewport}\n        content={content}\n        type={type}\n        hideDelay={hideDelay}\n        fixed\n        propsScrollbar={propsScrollbar}\n        propsThumb={propsThumb}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;AA4BA,IAAa,sBAAsB,IAAI,OAAO,EAC5C,UAAU;CAAE,gBAAgB;CAAQ,uBAAuB,EAAE,SAAS,OAAO;AAAE,EACjF,CAAC;;AAGD,IAAa,gBAAgB,0BAC3B,QAAA,SAA0F;CAAA,MAAA,OAAAA,aAAA,QAAA,QAAhF,QAAQ;CAAA,MAAA,YAAAA,aAAA,QAAA,aAAc,GAAG;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CACjC,IAAI,WAAQC,WAAkC,IAAI;CAClD,IAAI,UAAOA,WAAkC,IAAI;CACjD,MAAM,WAAW,IAAI,MAAM,oBAAoB,QAAQ,CAAC,CAAC,SAAS,GAAA,CAC/D,MAAM,GAAG,CAAC,CACV,OAAO,OAAO;CAEjB,gBAAgB;EACd,SAAA,QAAW,SAAS;EACpB,QAAA,QAAU,SAAS;EACnB,SAAS,gBAAgB,UAAU,IAAI,GAAG,OAAO;CACnD,CAAC;CACD,sBAAsB,SAAS,gBAAgB,UAAU,OAAO,GAAG,OAAO,CAAC;CAE3E,aAAOC,YAAA,kBAAA;EAAA,QAAA;EAAA,YAAA,SAAA;EAAA,WAAA,QAAA;EAAA,QAAA,KAAA;EAAA,aAAA,UAAA;EAAA,SAAA;EAAA,kBAAA,eAAA;EAAA,cAAA,WAAA;CAAA,GAAA,IAAA;AAYT,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/layout/Prose.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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';

package/dist/layout/Prose.js

@@ -2,7 +2,7 @@ import { mergeAttrs } from "../utils/props.js";
 import { gapStyles } from "../utils/style/styles.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";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/layout/Prose.tsx
 /** 未声明的属性落到 article 上 */
 /** Prose 的样式 */

package/dist/layout/Prose.js.map

@@ -1 +1 @@
-{"version":3,"file":"Prose.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/layout/Prose.tsx"],"sourcesContent":["/**\n * 长文的容器（article）：段落、标题、列表、代码块、表格依次排下来时的间距、行长与行高。\n * 样式里不写“相邻元素之间”的选择器，间距用 flex 的 gap 统一给：子元素各自不带外边距（本库的组件都是这样）。\n *\n *   <Prose>\n *     <H1 id=\"intro\" anchor>介绍</H1>\n *     <Paragraph>…</Paragraph>\n *     <CodeBlock code={…} lang=\"ts\" />\n *   </Prose>\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';\n\n/** 未声明的属性落到 article 上 */\nexport interface ProseProps extends PartProps<'article'> {\n  /** 块之间的间距，默认 lg（1em） */\n  gap?: Space;\n  /** 限制行长（约 70 个字宽），默认 true；放在窄栏里时可以关掉 */\n  measure?: boolean;\n  children?: VNodeChild;\n}\n\n/** Prose 的样式 */\nexport const proseStyles = css.create({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 0,\n    lineHeight: '_relaxed',\n    overflowWrap: 'break-word',\n  },\n  measure: { maxWidth: '70ch' },\n});\n\n/** 长文的容器：块之间的间距、行长与宽松的行高 */\nexport const Prose = _component(\n  ({ gap = 'lg', measure = true, children, ...rest }: ProseProps) =>\n    () => (\n      <article\n        {...mergeAttrs<'article'>(\n          { sx: [proseStyles.root, gapStyles[gap], measure && proseStyles.measure] },\n          rest,\n        )}\n      >\n        {children}\n      </article>\n    ),\n);\n"],"mappings":";;;;;;;;AA0BA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;EACJ,SAAS;EACT,eAAe;EACf,UAAU;EACV,YAAY;EACZ,cAAc;CAChB;CACA,SAAS,EAAE,UAAU,OAAO;AAC9B,CAAC;;AAGD,IAAa,QAAQ,0BACnB,QAAA,SAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,OAAS,IAAI;CAAA,MAAA,UAAAA,aAAA,QAAA,WAAY,IAAI;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAe,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAC9CC,YAAA,WAEQ,WACF,EAAE,IAAI;EAAC,YAAY;EAAM,UAAS,IAAA;EAAO,QAAA,SAAW,YAAY;CAAO,EAAE,GACzE,IACF,GAAC,CAAA,SAAA,KAAA,CAAA;AAIJ,GAAA;CAAA,MAAA;CAAA,OAAA,CAAA,OAAA,SAAA;AAAA,CACL"}
+{"version":3,"file":"Prose.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/layout/Prose.tsx"],"sourcesContent":["/**\n * 长文的容器（article）：段落、标题、列表、代码块、表格依次排下来时的间距、行长与行高。\n * 样式里不写“相邻元素之间”的选择器，间距用 flex 的 gap 统一给：子元素各自不带外边距（本库的组件都是这样）。\n *\n *   <Prose>\n *     <H1 id=\"intro\" anchor>介绍</H1>\n *     <Paragraph>…</Paragraph>\n *     <CodeBlock code={…} lang=\"ts\" />\n *   </Prose>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { 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';\n\n/** 未声明的属性落到 article 上 */\nexport interface ProseProps extends PartProps<'article'> {\n  /** 块之间的间距，默认 lg（1em） */\n  gap?: Space;\n  /** 限制行长（约 70 个字宽），默认 true；放在窄栏里时可以关掉 */\n  measure?: boolean;\n  children?: VNodeChild;\n}\n\n/** Prose 的样式 */\nexport const proseStyles = css.create({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 0,\n    lineHeight: '_relaxed',\n    overflowWrap: 'break-word',\n  },\n  measure: { maxWidth: '70ch' },\n});\n\n/** 长文的容器：块之间的间距、行长与宽松的行高 */\nexport const Prose = _component(\n  ({ gap = 'lg', measure = true, children, ...rest }: ProseProps) =>\n    () => (\n      <article\n        {...mergeAttrs<'article'>(\n          { sx: [proseStyles.root, gapStyles[gap], measure && proseStyles.measure] },\n          rest,\n        )}\n      >\n        {children}\n      </article>\n    ),\n);\n"],"mappings":";;;;;;;;AA0BA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;EACJ,SAAS;EACT,eAAe;EACf,UAAU;EACV,YAAY;EACZ,cAAc;CAChB;CACA,SAAS,EAAE,UAAU,OAAO;AAC9B,CAAC;;AAGD,IAAa,QAAQ,0BACnB,QAAA,SAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,OAAS,IAAI;CAAA,MAAA,UAAAA,aAAA,QAAA,WAAY,IAAI;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAe,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAC9CC,YAAA,WAEQ,WACF,EAAE,IAAI;EAAC,YAAY;EAAM,UAAS,IAAA;EAAO,QAAA,SAAW,YAAY;CAAO,EAAE,GACzE,IACF,GAAC,CAAA,SAAA,KAAA,CAAA;AAIJ,GAAA;CAAA,MAAA;CAAA,OAAA,CAAA,OAAA,SAAA;AAAA,CACL"}

package/dist/layout/ResizeHandle.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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';

package/dist/layout/ResizeHandle.js

@@ -5,7 +5,7 @@ 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";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/layout/ResizeHandle.tsx
 /** 分隔条的角色、可聚焦与取值由组件管理 */
 /** 未声明的属性落到手柄（span）上；无障碍名称写 aria-label */

package/dist/layout/ResizeHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode"],"sources":["../../src/layout/ResizeHandle.tsx"],"sourcesContent":["/**\n * 宽度调整手柄：所在元素结束边（edge=\"start\" 时是起始边，如从右侧滑入的抽屉）的一条细线（role=\"separator\"），悬停、聚焦时显示。\n * 拖动（startMove）或聚焦后用 ← / →（WCAG 2.5.7 拖动的替代操作）调整，从右到左排版下方向自动镜像；\n * 双击回到 defaultWidth。宽度从父元素量起，所以要放在要调整的那个元素里（它需要 position: relative 或 fixed）。\n * orientation=\"horizontal\" 时是一条横线，贴着父元素的下边（edge=\"start\" 时是上边，如从底部升起的抽屉），\n * 拖动或用 ↑ / ↓ 调整的是**高度**：width、minWidth、maxWidth、defaultWidth、onWidthChange 这时都指高度。\n * AppShell 的抽屉式侧栏、DataTable 的列宽（ColumnResizer）都用它。\n *\n *   <aside style=\"position: relative; width: …\">…<ResizeHandle aria-label=\"调整侧栏宽度\" width={width} onWidthChange={(px) => (width = px)} /></aside>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { clamp } from '../utils/data/number';\nimport { inlineArrows, isRtl } from '../utils/dom/direction';\nimport { startMove } from '../utils/dom/move';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 分隔条的角色、可聚焦与取值由组件管理 */\nexport type ResizeHandleManaged =\n  'role' | 'tabindex' | 'aria-orientation' | 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax';\n\n/** 未声明的属性落到手柄（span）上；无障碍名称写 aria-label */\nexport interface ResizeHandleProps extends PartProps<'span', ResizeHandleManaged> {\n  /** 当前宽度（px）；没有时从父元素的实际宽度起算 */\n  width?: number;\n  /** 最小宽度（px），默认 64 */\n  minWidth?: number;\n  /** 最大宽度（px），默认不限 */\n  maxWidth?: number;\n  /** 双击回到的宽度（px）；不写时双击不做什么 */\n  defaultWidth?: number;\n  /** 键盘每按一次调整多少（px），默认 16 */\n  step?: number;\n  /** 手柄在父元素的哪一边，默认 end；start 时往起始方向拖是变宽（从结束边滑入的抽屉）；horizontal 时 start 是上边、end 是下边 */\n  edge?: 'start' | 'end';\n  /** vertical（默认）：竖线，调整宽度；horizontal：横线，调整高度（见文件开头） */\n  orientation?: 'vertical' | 'horizontal';\n  /** 拖动或用键盘调整了宽度（已经夹在最小、最大宽度之间） */\n  onWidthChange: (width: number) => void;\n}\n\n/** ResizeHandle 的样式：贴着父元素结束边的细线 */\nexport const resizeHandleStyles = css.create({\n  handle: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    insetInlineEnd: 0,\n    width: '_space.sm',\n    cursor: 'col-resize',\n    touchAction: 'none',\n    backgroundColor: {\n      default: 'transparent',\n      ':hover': '_borderStrong',\n      ':focus-visible': '_accent',\n    },\n    outlineStyle: 'none',\n  },\n  start: { insetInlineEnd: 'auto', insetInlineStart: 0 },\n  // 横线：贴着父元素的下边（start 时是上边），调整高度\n  horizontal: {\n    top: 'auto',\n    bottom: 0,\n    insetInlineStart: 0,\n    insetInlineEnd: 0,\n    width: 'auto',\n    height: '_space.sm',\n    cursor: 'row-resize',\n  },\n  horizontalStart: { top: 0, bottom: 'auto' },\n});\n\n/** 宽度调整手柄：拖动或用 ← / → 调整父元素的宽度；orientation=\"horizontal\" 时调整高度（↑ / ↓） */\nexport const ResizeHandle = _component(\n  ({\n    width,\n    minWidth = 64,\n    maxWidth = Number.POSITIVE_INFINITY,\n    defaultWidth,\n    step = 16,\n    edge = 'end',\n    orientation = 'vertical',\n    onWidthChange,\n    ...rest\n  }: ResizeHandleProps) => {\n    const horizontal = () => orientation === 'horizontal';\n    const parentOf = (event: Event) => (event.currentTarget as HTMLElement).parentElement!;\n    const sizeOf = (element: Element) => {\n      const rect = element.getBoundingClientRect();\n      return horizontal() ? rect.height : rect.width;\n    };\n    const fit = (px: number) => Math.round(clamp(px, minWidth, maxWidth));\n    // 没给 width 时量父元素的实际宽度：可聚焦的分隔条必须有当前值（aria-valuenow）\n    let handle = _state.raw<HTMLElement | null>(null);\n    let measured = _state<number | undefined>(undefined);\n    useResizeObserver(\n      () => (width == null ? handle?.parentElement : null),\n      () => {\n        const parent = handle?.parentElement;\n        if (parent) measured = Math.round(sizeOf(parent));\n      },\n    );\n\n    function onPointerdown(event: PointerEvent) {\n      const parent = parentOf(event);\n      const from = sizeOf(parent);\n      // 起始边的手柄往起始方向拖是变宽：方向与结束边相反；横线不受从右到左排版的影响\n      const sign = (horizontal() ? 1 : isRtl(parent) ? -1 : 1) * (edge === 'start' ? -1 : 1);\n      event.preventDefault();\n      startMove(event, {\n        onMove: ({ deltaX, deltaY }) =>\n          onWidthChange(fit(from + sign * (horizontal() ? deltaY : deltaX))),\n      });\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      const parent = parentOf(event);\n      const { forward, backward } = horizontal()\n        ? { forward: 'ArrowDown', backward: 'ArrowUp' }\n        : inlineArrows(isRtl(parent));\n      const delta =\n        (event.key === forward ? step : event.key === backward ? -step : 0) *\n        (edge === 'start' ? -1 : 1);\n      if (!delta) return;\n      event.preventDefault();\n      onWidthChange(fit((width ?? sizeOf(parent)) + delta));\n    }\n\n    return () => (\n      <span\n        {...mergeAttrs<'span'>(\n          {\n            sx: [\n              resizeHandleStyles.handle,\n              horizontal()\n                ? [\n                    resizeHandleStyles.horizontal,\n                    edge === 'start' && resizeHandleStyles.horizontalStart,\n                  ]\n                : edge === 'start' && resizeHandleStyles.start,\n            ],\n          },\n          rest,\n          {\n            ref: (element: unknown) => (handle = element instanceof HTMLElement ? element : null),\n            role: 'separator',\n            tabindex: 0,\n            'aria-orientation': orientation,\n            'aria-valuenow': width ?? measured ?? minWidth,\n            'aria-valuemin': minWidth,\n            'aria-valuemax': Number.isFinite(maxWidth) ? maxWidth : undefined,\n            onPointerdown,\n            onKeydown,\n            onDblclick: defaultWidth == null ? undefined : () => onWidthChange(fit(defaultWidth)),\n          },\n        )}\n      />\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"ResizeHandle.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode"],"sources":["../../src/layout/ResizeHandle.tsx"],"sourcesContent":["/**\n * 宽度调整手柄：所在元素结束边（edge=\"start\" 时是起始边，如从右侧滑入的抽屉）的一条细线（role=\"separator\"），悬停、聚焦时显示。\n * 拖动（startMove）或聚焦后用 ← / →（WCAG 2.5.7 拖动的替代操作）调整，从右到左排版下方向自动镜像；\n * 双击回到 defaultWidth。宽度从父元素量起，所以要放在要调整的那个元素里（它需要 position: relative 或 fixed）。\n * orientation=\"horizontal\" 时是一条横线，贴着父元素的下边（edge=\"start\" 时是上边，如从底部升起的抽屉），\n * 拖动或用 ↑ / ↓ 调整的是**高度**：width、minWidth、maxWidth、defaultWidth、onWidthChange 这时都指高度。\n * AppShell 的抽屉式侧栏、DataTable 的列宽（ColumnResizer）都用它。\n *\n *   <aside style=\"position: relative; width: …\">…<ResizeHandle aria-label=\"调整侧栏宽度\" width={width} onWidthChange={(px) => (width = px)} /></aside>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { clamp } from '../utils/data/number';\nimport { inlineArrows, isRtl } from '../utils/dom/direction';\nimport { startMove } from '../utils/dom/move';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 分隔条的角色、可聚焦与取值由组件管理 */\nexport type ResizeHandleManaged =\n  'role' | 'tabindex' | 'aria-orientation' | 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax';\n\n/** 未声明的属性落到手柄（span）上；无障碍名称写 aria-label */\nexport interface ResizeHandleProps extends PartProps<'span', ResizeHandleManaged> {\n  /** 当前宽度（px）；没有时从父元素的实际宽度起算 */\n  width?: number;\n  /** 最小宽度（px），默认 64 */\n  minWidth?: number;\n  /** 最大宽度（px），默认不限 */\n  maxWidth?: number;\n  /** 双击回到的宽度（px）；不写时双击不做什么 */\n  defaultWidth?: number;\n  /** 键盘每按一次调整多少（px），默认 16 */\n  step?: number;\n  /** 手柄在父元素的哪一边，默认 end；start 时往起始方向拖是变宽（从结束边滑入的抽屉）；horizontal 时 start 是上边、end 是下边 */\n  edge?: 'start' | 'end';\n  /** vertical（默认）：竖线，调整宽度；horizontal：横线，调整高度（见文件开头） */\n  orientation?: 'vertical' | 'horizontal';\n  /** 拖动或用键盘调整了宽度（已经夹在最小、最大宽度之间） */\n  onWidthChange: (width: number) => void;\n}\n\n/** ResizeHandle 的样式：贴着父元素结束边的细线 */\nexport const resizeHandleStyles = css.create({\n  handle: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    insetInlineEnd: 0,\n    width: '_space.sm',\n    cursor: 'col-resize',\n    touchAction: 'none',\n    backgroundColor: {\n      default: 'transparent',\n      ':hover': '_borderStrong',\n      ':focus-visible': '_accent',\n    },\n    outlineStyle: 'none',\n  },\n  start: { insetInlineEnd: 'auto', insetInlineStart: 0 },\n  // 横线：贴着父元素的下边（start 时是上边），调整高度\n  horizontal: {\n    top: 'auto',\n    bottom: 0,\n    insetInlineStart: 0,\n    insetInlineEnd: 0,\n    width: 'auto',\n    height: '_space.sm',\n    cursor: 'row-resize',\n  },\n  horizontalStart: { top: 0, bottom: 'auto' },\n});\n\n/** 宽度调整手柄：拖动或用 ← / → 调整父元素的宽度；orientation=\"horizontal\" 时调整高度（↑ / ↓） */\nexport const ResizeHandle = _component(\n  ({\n    width,\n    minWidth = 64,\n    maxWidth = Number.POSITIVE_INFINITY,\n    defaultWidth,\n    step = 16,\n    edge = 'end',\n    orientation = 'vertical',\n    onWidthChange,\n    ...rest\n  }: ResizeHandleProps) => {\n    const horizontal = () => orientation === 'horizontal';\n    const parentOf = (event: Event) => (event.currentTarget as HTMLElement).parentElement!;\n    const sizeOf = (element: Element) => {\n      const rect = element.getBoundingClientRect();\n      return horizontal() ? rect.height : rect.width;\n    };\n    const fit = (px: number) => Math.round(clamp(px, minWidth, maxWidth));\n    // 没给 width 时量父元素的实际宽度：可聚焦的分隔条必须有当前值（aria-valuenow）\n    let handle = _state.raw<HTMLElement | null>(null);\n    let measured = _state<number | undefined>(undefined);\n    useResizeObserver(\n      () => (width == null ? handle?.parentElement : null),\n      () => {\n        const parent = handle?.parentElement;\n        if (parent) measured = Math.round(sizeOf(parent));\n      },\n    );\n\n    function onPointerdown(event: PointerEvent) {\n      const parent = parentOf(event);\n      const from = sizeOf(parent);\n      // 起始边的手柄往起始方向拖是变宽：方向与结束边相反；横线不受从右到左排版的影响\n      const sign = (horizontal() ? 1 : isRtl(parent) ? -1 : 1) * (edge === 'start' ? -1 : 1);\n      event.preventDefault();\n      startMove(event, {\n        onMove: ({ deltaX, deltaY }) =>\n          onWidthChange(fit(from + sign * (horizontal() ? deltaY : deltaX))),\n      });\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      const parent = parentOf(event);\n      const { forward, backward } = horizontal()\n        ? { forward: 'ArrowDown', backward: 'ArrowUp' }\n        : inlineArrows(isRtl(parent));\n      const delta =\n        (event.key === forward ? step : event.key === backward ? -step : 0) *\n        (edge === 'start' ? -1 : 1);\n      if (!delta) return;\n      event.preventDefault();\n      onWidthChange(fit((width ?? sizeOf(parent)) + delta));\n    }\n\n    return () => (\n      <span\n        {...mergeAttrs<'span'>(\n          {\n            sx: [\n              resizeHandleStyles.handle,\n              horizontal()\n                ? [\n                    resizeHandleStyles.horizontal,\n                    edge === 'start' && resizeHandleStyles.horizontalStart,\n                  ]\n                : edge === 'start' && resizeHandleStyles.start,\n            ],\n          },\n          rest,\n          {\n            ref: (element: unknown) => (handle = element instanceof HTMLElement ? element : null),\n            role: 'separator',\n            tabindex: 0,\n            'aria-orientation': orientation,\n            'aria-valuenow': width ?? measured ?? minWidth,\n            'aria-valuemin': minWidth,\n            'aria-valuemax': Number.isFinite(maxWidth) ? maxWidth : undefined,\n            onPointerdown,\n            onKeydown,\n            onDblclick: defaultWidth == null ? undefined : () => onWidthChange(fit(defaultWidth)),\n          },\n        )}\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/layout/ScrollArea.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 /** 哪个方向可以滚动 */

package/dist/layout/ScrollArea.js

@@ -7,7 +7,7 @@ import { batchLayout } from "../utils/dom/layout-batch.js";
 import { useResizeObserver } from "../utils/dom/resize.js";
 import { createVNode, ref, shallowRef } from "vue";
 import { _component, childrenProp, effect, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/layout/ScrollArea.tsx
 /** 哪个方向可以滚动 */
 /** 滚动条什么时候显示 */