@zerodep-dev/vue-tsx-pro-ui 0.3.1 → 0.3.3

package/dist/input/choice-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"choice-styles.js","names":[],"sources":["../../src/input/choice-styles.ts"],"sourcesContent":["/**\n * 勾选类控件（Checkbox、Radio、Switch）共用的样式与结构：\n *\n *   label（Root，整块可点）> span（Control，叠放层）> input（原生，appearance: none 画成方框 / 圆 / 轨道）\n *                                               + 标记（图标或滑块，叠在 input 上，不接收指针）\n *                        > span（Label，文字）\n *\n * 用原生 input：键盘（空格切换、单选组的方向键）、表单提交与重置、label 点击、读屏语义都是浏览器的；\n * 组件只画外观。勾选状态的样式由组件按自己的状态加（样式里不写兄弟选择器）。尺寸用 em。\n * 部件与样式见 choiceRecipe（createUi / Provider 的 styles.Choice 按它定制）。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick } from 'vue';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe, type PartLayer } from '../config/styles';\nimport { toneFillStyles, type StatusTone } from '../utils/style/tone-styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 勾选类控件的外观选项；可以用 createUi / Provider 的 defaults.Choice 统一改默认值 */\nexport interface ChoiceOptions {\n  /** 字号档位（方框、圆、开关随之缩放）；不写时继承上下文字号 */\n  size?: TextSize;\n  /**\n   * 选中时的色调（与 Button、Badge 等同一套）\n   * @default 'accent'\n   */\n  tone?: StatusTone;\n}\n\n/**\n * 勾选类控件的配方：部件 root（外层 label，整块可点）、control（叠放层）、input（原生 input）、\n * indicator（标记：对勾、圆点、开关滑块）、label（文字）、description（文字下方的说明）、group（复选组、单选组）。\n * 档位是外层的只读、不可用与组的排列方向；勾选、出错见 choiceInputStyles\n */\nexport const choiceRecipe = css.recipe({\n  name: 'Choice',\n  parts: ['root', 'control', 'input', 'indicator', 'label', 'description', 'group'],\n  base: {\n    // 控件与文字一行，整块可点；点击区域不小于 24px（WCAG 2.5.8）\n    root: {\n      display: 'inline-flex',\n      alignItems: 'flex-start',\n      gap: '_sm',\n      minHeight: '_sizes.minTarget',\n      lineHeight: '_normal',\n      color: '_text',\n      cursor: 'pointer',\n      userSelect: 'none',\n    },\n    // input 与标记放在同一个网格格子里；与第一行文字垂直居中（行高 1.5em）\n    control: {\n      display: 'inline-grid',\n      placeItems: 'center',\n      flexShrink: 0,\n      minHeight: '1.5em',\n    },\n    // 去掉浏览器外观，由各组件给出形状；焦点环用 focusRingStyles.tight（排在它后面）\n    input: {\n      gridArea: '1 / 1',\n      appearance: 'none',\n      boxSizing: 'border-box',\n      margin: 0,\n      borderWidth: '_sm',\n      borderStyle: 'solid',\n      borderColor: '_borderStrong',\n      backgroundColor: '_surface',\n      cursor: 'inherit',\n      transition: `background-color ${t.durations.sm} ${t.easings.standard}, border-color ${t.durations.sm} ${t.easings.standard}`,\n    },\n    // 叠在 input 上，点击穿透到 input\n    indicator: { gridArea: '1 / 1', pointerEvents: 'none' },\n    // 有说明时文字在上、说明在下\n    label: { minWidth: 0, display: 'grid' },\n    // 次要颜色、小一号\n    description: { color: '_textMuted', fontSize: '0.875em' },\n  },\n  variants: {\n    // 只读：外观照常（看得清选了什么），只是不像能点\n    readonly: { true: { root: { cursor: 'default' } } },\n    disabled: { true: { root: { opacity: '_disabled', cursor: 'not-allowed' } } },\n    orientation: {\n      vertical: { group: { display: 'flex', flexDirection: 'column', gap: '_xs' } },\n      horizontal: {\n        group: { display: 'flex', flexWrap: 'wrap', columnGap: '_lg', rowGap: '_xs' },\n      },\n    },\n  },\n});\n\n/** 勾选类控件的部件（createUi / Provider 的 styles.Choice 按它定制） */\nexport type ChoicePart = (typeof choiceRecipe.parts)[number];\n\n/**\n * 原生 input 的勾选、出错样式：排在各组件的形状（方框、圆、轨道）之后，所以不放进配方——\n * 开关的轨道把描边设成透明，出错的红色描边要盖过它\n */\nexport const choiceInputStyles = css.create({\n  /** 已勾选（或部分勾选）：色调的实底色，见 choiceParts */\n  checked: { borderColor: 'var(--tone-fill)', backgroundColor: 'var(--tone-fill)' },\n  invalid: { borderColor: '_danger', outlineColor: '_danger' },\n});\n\n/** 合并后的外观：tone 总有值，size 不写时继承字号 */\nexport type ChoiceAppearance = Pick<ChoiceOptions, 'size'> &\n  Required<Pick<ChoiceOptions, 'tone'>> & {\n    /** 勾选类控件的配方，带上 createUi / Provider 里 styles.Choice 的定制 */\n    recipe: ReturnType<typeof useRecipe<ChoicePart, unknown>>;\n  };\n\n/** 勾选类控件的外观：显式写的 > defaults.Choice > 默认。在 setup 里调用，返回的函数在渲染时调用 */\nexport function useChoiceAppearance(read: () => ChoiceOptions): () => ChoiceAppearance {\n  const recipe = useRecipe(choiceRecipe);\n  const appearance = useDefaults('Choice', read, { tone: 'accent' });\n  return () => ({ ...appearance(), recipe });\n}\n\n/** 各部件交给 mergeAttrs / mergeProps 的默认层：样式与部件标记（data-scope=\"choice\"） */\nexport type ChoiceParts = {\n  readonly [Part in ChoicePart]: Omit<PartLayer, 'sx'> & { readonly sx: SxStyles };\n};\n\n/**\n * 外观与状态 → 各部件的默认层。外层 label 在配方之后叠上色调（经 toneFillStyles 的变量传给方框、圆点、轨道）\n * 与字号\n */\nexport function choiceParts(\n  { size, tone, recipe }: ChoiceAppearance,\n  { disabled, readonly }: { disabled: boolean; readonly: boolean },\n): ChoiceParts {\n  const parts = recipe({ readonly, disabled });\n  return {\n    ...parts,\n    root: {\n      ...parts.root,\n      sx: [parts.root.sx, toneFillStyles[tone], size && fontSizeStyles[size]],\n    },\n  };\n}\n\nconst ARROW_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']);\n\n/**\n * 只读的原生勾选框要拦住的事件：点击（空格键也是点击）不改勾选，单选组的方向键不换选中项。\n * 原生 checkbox 没有 readonly 属性；这样焦点照常能到，读屏经 aria-readonly 念“只读”，值也照常随表单提交\n */\nexport const readonlyChoiceHandlers = {\n  onClick: (event: Event) => event.preventDefault(),\n  onKeydown: (event: KeyboardEvent) => {\n    if (ARROW_KEYS.has(event.key)) event.preventDefault();\n  },\n};\n\n/**\n * 受控的勾选：改值之后，父级没接受（或改成了别的值）时把原生 input 的 checked 改回去。\n * 浏览器在点击时已经改了 checked（单选还取消了同组原来选中的那个），而 Vue 比较的是 prop：\n * 父级的值没变就不会去动 DOM，界面和值就对不上了（切换要等接口的开关、只能选几项的复选框）\n */\nexport function syncChecked(\n  inputs: readonly HTMLInputElement[],\n  isChecked: (input: HTMLInputElement) => boolean,\n): void {\n  void nextTick(() => {\n    for (const input of inputs) {\n      const checked = isChecked(input);\n      if (input.checked !== checked) input.checked = checked;\n    }\n  });\n}\n\n/** 复选组、单选组的排列方向 */\nexport interface ChoiceOrientations {\n  /** 竖排（默认） */\n  vertical: unknown;\n  /** 横排，放不下时换行 */\n  horizontal: unknown;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoCA,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM;CACN,OAAO;EAAC;EAAQ;EAAW;EAAS;EAAa;EAAS;EAAe;CAAO;CAChF,MAAM;EAEJ,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,KAAK;GACL,WAAW;GACX,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,YAAY;EACd;EAEA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,YAAY;GACZ,WAAW;EACb;EAEA,OAAO;GACL,UAAU;GACV,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,aAAa;GACb,aAAa;GACb,aAAa;GACb,iBAAiB;GACjB,QAAQ;GACR,YAAY,oBAAoB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,SAAQ,iBAAkB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;EACpH;EAEA,WAAW;GAAE,UAAU;GAAS,eAAe;EAAO;EAEtD,OAAO;GAAE,UAAU;GAAG,SAAS;EAAO;EAEtC,aAAa;GAAE,OAAO;GAAc,UAAU;EAAU;CAC1D;CACA,UAAU;EAER,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,UAAU,EAAE,EAAE;EAClD,UAAU,EAAE,MAAM,EAAE,MAAM;GAAE,SAAS;GAAa,QAAQ;EAAc,EAAE,EAAE;EAC5E,aAAa;GACX,UAAU,EAAE,OAAO;IAAE,SAAS;IAAQ,eAAe;IAAU,KAAK;GAAM,EAAE;GAC5E,YAAY,EACV,OAAO;IAAE,SAAS;IAAQ,UAAU;IAAQ,WAAW;IAAO,QAAQ;GAAM,EAC9E;EACF;CACF;AACF,CAAC;;;;;AASD,IAAa,oBAAoB,IAAI,OAAO;;CAE1C,SAAS;EAAE,aAAa;EAAoB,iBAAiB;CAAmB;CAChF,SAAS;EAAE,aAAa;EAAW,cAAc;CAAU;AAC7D,CAAC;;AAUD,SAAgB,oBAAoB,MAAmD;CACrF,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,aAAa,YAAY,UAAU,MAAM,EAAE,MAAM,SAAS,CAAC;CACjE,cAAc;EAAE,GAAG,WAAW;EAAG;CAAO;AAC1C;;;;;AAWA,SAAgB,YACd,EAAE,MAAM,MAAM,UACd,EAAE,UAAU,YACC;CACb,MAAM,QAAQ,OAAO;EAAE;EAAU;CAAS,CAAC;CAC3C,OAAO;EACL,GAAG;EACH,MAAM;GACJ,GAAG,MAAM;GACT,IAAI;IAAC,MAAM,KAAK;IAAI,eAAe;IAAO,QAAQ,eAAe;GAAK;EACxE;CACF;AACF;AAEA,IAAM,6BAAa,IAAI,IAAI;CAAC;CAAW;CAAa;CAAa;AAAY,CAAC;;;;;AAM9E,IAAa,yBAAyB;CACpC,UAAU,UAAiB,MAAM,eAAe;CAChD,YAAY,UAAyB;EACnC,IAAI,WAAW,IAAI,MAAM,GAAG,GAAG,MAAM,eAAe;CACtD;AACF;;;;;;AAOA,SAAgB,YACd,QACA,WACM;CACN,eAAoB;EAClB,KAAK,MAAM,SAAS,QAAQ;GAC1B,MAAM,UAAU,UAAU,KAAK;GAC/B,IAAI,MAAM,YAAY,SAAS,MAAM,UAAU;EACjD;CACF,CAAC;AACH"}
+{"version":3,"file":"choice-styles.js","names":[],"sources":["../../src/input/choice-styles.ts"],"sourcesContent":["/**\n * 勾选类控件（Checkbox、Radio、Switch）共用的样式与结构：\n *\n *   label（Root，整块可点）> span（Control，叠放层）> input（原生，appearance: none 画成方框 / 圆 / 轨道）\n *                                               + 标记（图标或滑块，叠在 input 上，不接收指针）\n *                        > span（Label，文字）\n *\n * 用原生 input：键盘（空格切换、单选组的方向键）、表单提交与重置、label 点击、读屏语义都是浏览器的；\n * 组件只画外观。勾选状态的样式由组件按自己的状态加（样式里不写兄弟选择器）。尺寸用 em。\n * 部件与样式见 choiceRecipe（createUi / Provider 的 styles.Choice 按它定制）。\n */\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick } from 'vue';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe, type PartLayer } from '../config/styles';\nimport { toneFillStyles, type StatusTone } from '../utils/style/tone-styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 勾选类控件的外观选项；可以用 createUi / Provider 的 defaults.Choice 统一改默认值 */\nexport interface ChoiceOptions {\n  /** 字号档位（方框、圆、开关随之缩放）；不写时继承上下文字号 */\n  size?: TextSize;\n  /**\n   * 选中时的色调（与 Button、Badge 等同一套）\n   * @default 'accent'\n   */\n  tone?: StatusTone;\n}\n\n/**\n * 勾选类控件的配方：部件 root（外层 label，整块可点）、control（叠放层）、input（原生 input）、\n * indicator（标记：对勾、圆点、开关滑块）、label（文字）、description（文字下方的说明）、group（复选组、单选组）。\n * 档位是外层的只读、不可用与组的排列方向；勾选、出错见 choiceInputStyles\n */\nexport const choiceRecipe = css.recipe({\n  name: 'Choice',\n  parts: ['root', 'control', 'input', 'indicator', 'label', 'description', 'group'],\n  base: {\n    // 控件与文字一行，整块可点；点击区域不小于 24px（WCAG 2.5.8）\n    root: {\n      display: 'inline-flex',\n      alignItems: 'flex-start',\n      gap: '_sm',\n      minHeight: '_sizes.minTarget',\n      lineHeight: '_normal',\n      color: '_text',\n      cursor: 'pointer',\n      userSelect: 'none',\n    },\n    // input 与标记放在同一个网格格子里；与第一行文字垂直居中（行高 1.5em）\n    control: {\n      display: 'inline-grid',\n      placeItems: 'center',\n      flexShrink: 0,\n      minHeight: '1.5em',\n    },\n    // 去掉浏览器外观，由各组件给出形状；焦点环用 focusRingStyles.tight（排在它后面）\n    input: {\n      gridArea: '1 / 1',\n      appearance: 'none',\n      boxSizing: 'border-box',\n      margin: 0,\n      borderWidth: '_sm',\n      borderStyle: 'solid',\n      borderColor: '_borderStrong',\n      backgroundColor: '_surface',\n      cursor: 'inherit',\n      transition: `background-color ${t.durations.sm} ${t.easings.standard}, border-color ${t.durations.sm} ${t.easings.standard}`,\n    },\n    // 叠在 input 上，点击穿透到 input\n    indicator: { gridArea: '1 / 1', pointerEvents: 'none' },\n    // 有说明时文字在上、说明在下\n    label: { minWidth: 0, display: 'grid' },\n    // 次要颜色、小一号\n    description: { color: '_textMuted', fontSize: '0.875em' },\n  },\n  variants: {\n    // 只读：外观照常（看得清选了什么），只是不像能点\n    readonly: { true: { root: { cursor: 'default' } } },\n    disabled: { true: { root: { opacity: '_disabled', cursor: 'not-allowed' } } },\n    orientation: {\n      vertical: { group: { display: 'flex', flexDirection: 'column', gap: '_xs' } },\n      horizontal: {\n        group: { display: 'flex', flexWrap: 'wrap', columnGap: '_lg', rowGap: '_xs' },\n      },\n    },\n  },\n});\n\n/** 勾选类控件的部件（createUi / Provider 的 styles.Choice 按它定制） */\nexport type ChoicePart = (typeof choiceRecipe.parts)[number];\n\n/**\n * 原生 input 的勾选、出错样式：排在各组件的形状（方框、圆、轨道）之后，所以不放进配方——\n * 开关的轨道把描边设成透明，出错的红色描边要盖过它\n */\nexport const choiceInputStyles = css.create({\n  /** 已勾选（或部分勾选）：色调的实底色，见 choiceParts */\n  checked: { borderColor: 'var(--tone-fill)', backgroundColor: 'var(--tone-fill)' },\n  invalid: { borderColor: '_danger', outlineColor: '_danger' },\n});\n\n/** 合并后的外观：tone 总有值，size 不写时继承字号 */\nexport type ChoiceAppearance = Pick<ChoiceOptions, 'size'> &\n  Required<Pick<ChoiceOptions, 'tone'>> & {\n    /** 勾选类控件的配方，带上 createUi / Provider 里 styles.Choice 的定制 */\n    recipe: ReturnType<typeof useRecipe<ChoicePart, unknown>>;\n  };\n\n/** 勾选类控件的外观：显式写的 > defaults.Choice > 默认。在 setup 里调用，返回的函数在渲染时调用 */\nexport function useChoiceAppearance(read: () => ChoiceOptions): () => ChoiceAppearance {\n  const recipe = useRecipe(choiceRecipe);\n  const appearance = useDefaults('Choice', read, { tone: 'accent' });\n  return () => ({ ...appearance(), recipe });\n}\n\n/** 各部件交给 mergeAttrs / mergeProps 的默认层：样式与部件标记（data-scope=\"choice\"） */\nexport type ChoiceParts = {\n  readonly [Part in ChoicePart]: Omit<PartLayer, 'sx'> & { readonly sx: SxStyles };\n};\n\n/**\n * 外观与状态 → 各部件的默认层。外层 label 在配方之后叠上色调（经 toneFillStyles 的变量传给方框、圆点、轨道）\n * 与字号\n */\nexport function choiceParts(\n  { size, tone, recipe }: ChoiceAppearance,\n  { disabled, readonly }: { disabled: boolean; readonly: boolean },\n): ChoiceParts {\n  const parts = recipe({ readonly, disabled });\n  return {\n    ...parts,\n    root: {\n      ...parts.root,\n      sx: [parts.root.sx, toneFillStyles[tone], size && fontSizeStyles[size]],\n    },\n  };\n}\n\nconst ARROW_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']);\n\n/**\n * 只读的原生勾选框要拦住的事件：点击（空格键也是点击）不改勾选，单选组的方向键不换选中项。\n * 原生 checkbox 没有 readonly 属性；这样焦点照常能到，读屏经 aria-readonly 念“只读”，值也照常随表单提交\n */\nexport const readonlyChoiceHandlers = {\n  onClick: (event: Event) => event.preventDefault(),\n  onKeydown: (event: KeyboardEvent) => {\n    if (ARROW_KEYS.has(event.key)) event.preventDefault();\n  },\n};\n\n/**\n * 受控的勾选：改值之后，父级没接受（或改成了别的值）时把原生 input 的 checked 改回去。\n * 浏览器在点击时已经改了 checked（单选还取消了同组原来选中的那个），而 Vue 比较的是 prop：\n * 父级的值没变就不会去动 DOM，界面和值就对不上了（切换要等接口的开关、只能选几项的复选框）\n */\nexport function syncChecked(\n  inputs: readonly HTMLInputElement[],\n  isChecked: (input: HTMLInputElement) => boolean,\n): void {\n  void nextTick(() => {\n    for (const input of inputs) {\n      const checked = isChecked(input);\n      if (input.checked !== checked) input.checked = checked;\n    }\n  });\n}\n\n/** 复选组、单选组的排列方向 */\nexport interface ChoiceOrientations {\n  /** 竖排（默认） */\n  vertical: unknown;\n  /** 横排，放不下时换行 */\n  horizontal: unknown;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoCA,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM;CACN,OAAO;EAAC;EAAQ;EAAW;EAAS;EAAa;EAAS;EAAe;CAAO;CAChF,MAAM;EAEJ,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,KAAK;GACL,WAAW;GACX,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,YAAY;EACd;EAEA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,YAAY;GACZ,WAAW;EACb;EAEA,OAAO;GACL,UAAU;GACV,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,aAAa;GACb,aAAa;GACb,aAAa;GACb,iBAAiB;GACjB,QAAQ;GACR,YAAY,oBAAoB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,SAAQ,iBAAkB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;EACpH;EAEA,WAAW;GAAE,UAAU;GAAS,eAAe;EAAO;EAEtD,OAAO;GAAE,UAAU;GAAG,SAAS;EAAO;EAEtC,aAAa;GAAE,OAAO;GAAc,UAAU;EAAU;CAC1D;CACA,UAAU;EAER,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,UAAU,EAAE,EAAE;EAClD,UAAU,EAAE,MAAM,EAAE,MAAM;GAAE,SAAS;GAAa,QAAQ;EAAc,EAAE,EAAE;EAC5E,aAAa;GACX,UAAU,EAAE,OAAO;IAAE,SAAS;IAAQ,eAAe;IAAU,KAAK;GAAM,EAAE;GAC5E,YAAY,EACV,OAAO;IAAE,SAAS;IAAQ,UAAU;IAAQ,WAAW;IAAO,QAAQ;GAAM,EAC9E;EACF;CACF;AACF,CAAC;;;;;AASD,IAAa,oBAAoB,IAAI,OAAO;;CAE1C,SAAS;EAAE,aAAa;EAAoB,iBAAiB;CAAmB;CAChF,SAAS;EAAE,aAAa;EAAW,cAAc;CAAU;AAC7D,CAAC;;AAUD,SAAgB,oBAAoB,MAAmD;CACrF,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,aAAa,YAAY,UAAU,MAAM,EAAE,MAAM,SAAS,CAAC;CACjE,cAAc;EAAE,GAAG,WAAW;EAAG;CAAO;AAC1C;;;;;AAWA,SAAgB,YACd,EAAE,MAAM,MAAM,UACd,EAAE,UAAU,YACC;CACb,MAAM,QAAQ,OAAO;EAAE;EAAU;CAAS,CAAC;CAC3C,OAAO;EACL,GAAG;EACH,MAAM;GACJ,GAAG,MAAM;GACT,IAAI;IAAC,MAAM,KAAK;IAAI,eAAe;IAAO,QAAQ,eAAe;GAAK;EACxE;CACF;AACF;AAEA,IAAM,6BAAa,IAAI,IAAI;CAAC;CAAW;CAAa;CAAa;AAAY,CAAC;;;;;AAM9E,IAAa,yBAAyB;CACpC,UAAU,UAAiB,MAAM,eAAe;CAChD,YAAY,UAAyB;EACnC,IAAI,WAAW,IAAI,MAAM,GAAG,GAAG,MAAM,eAAe;CACtD;AACF;;;;;;AAOA,SAAgB,YACd,QACA,WACM;CACN,eAAoB;EAClB,KAAK,MAAM,SAAS,QAAQ;GAC1B,MAAM,UAAU,UAAU,KAAK;GAC/B,IAAI,MAAM,YAAY,SAAS,MAAM,UAAU;EACjD;CACF,CAAC;AACH"}

package/dist/input/control.d.ts

@@ -4,7 +4,7 @@
  * 外壳是包着原生 input 的 div：边框、悬停、焦点环（:focus-within）、出错、不可用、只读都画在外壳上，
  * input 本身透明无边框，所以图标、清除按钮、步进按钮可以放进框里。尺寸用 em，随 size 缩放（COMPONENTS.md §3）。
  */
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type PresetIconButtonProps } from '../base/CloseButton';

package/dist/input/control.js

@@ -8,7 +8,7 @@ import { Icon } from "../base/Icon.js";
 import { AttachedContext, attachedStyles } from "../utils/style/attached.js";
 import { ClearButton } from "../base/CloseButton.js";
 import { createVNode } from "vue";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/input/control.tsx
 /**
 * 输入框外壳：配方、外观选项、前置图标与交互小工具。TextField、Textarea、NumberField、Select、Combobox、

package/dist/input/control.js.map

@@ -1 +1 @@
-{"version":3,"file":"control.js","names":["_createVNode"],"sources":["../../src/input/control.tsx"],"sourcesContent":["/**\n * 输入框外壳：配方、外观选项、前置图标与交互小工具。TextField、Textarea、NumberField、Select、Combobox、\n * TagsInput 与日期输入框共用。\n * 外壳是包着原生 input 的 div：边框、悬停、焦点环（:focus-within）、出错、不可用、只读都画在外壳上，\n * input 本身透明无边框，所以图标、清除按钮、步进按钮可以放进框里。尺寸用 em，随 size 缩放（COMPONENTS.md §3）。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { ClearButton, type PresetIconButtonProps } from '../base/CloseButton';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe, type PartLayer } from '../config/styles';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  AttachedContext,\n  attachedStyles,\n  type AttachedOrientations,\n} from '../utils/style/attached';\nimport { focusRingStyles, radiusStyles, type Radius } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 输入框的样式 */\nexport interface ControlVariants {\n  /** 表面色加描边（默认） */\n  surface: unknown;\n  /** 浅色底，没有描边：表单很密、或放在有底色的区域里 */\n  soft: unknown;\n}\n\n/** 输入框的外观选项；可以用 createUi / Provider 的 defaults.Input 统一改默认值 */\nexport interface ControlOptions {\n  /** 样式，默认 surface */\n  variant?: keyof ControlVariants;\n  /** 字号档位，内部尺寸随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 圆角，与按钮同一套档位，默认 md；搜索框常用 full（胶囊形） */\n  radius?: Radius;\n}\n\n/** 框里最前面的图标（搜索、日历、地球……）：各种输入框共有 */\nexport interface ControlIconOptions {\n  /** 前置图标 */\n  icon?: IconData;\n  /** 前置图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n}\n\n/** 外壳的状态：出错、不可用、只读 */\nexport interface ControlState {\n  /** 校验未通过：红色描边与焦点环 */\n  invalid?: boolean;\n  /** 不可用：变淡 */\n  disabled?: boolean;\n  /** 只读：底色变浅，不显示悬停 */\n  readonly?: boolean;\n}\n\n/**\n * 输入框外壳的配方：部件 root（外壳 div）、input（原生 input / textarea）、icon（前后的图标）、\n * affix（前后缀文字）、button（框里的小按钮：清除、显示密码、步进）。\n * 档位是样式（variant）、在 ControlGroup 里的方向（attached）与外壳的状态；圆角、相连、字号用共用的样式表，\n * 由 controlParts 叠在配方之后\n */\nexport const inputRecipe = css.recipe({\n  name: 'Input',\n  parts: ['root', 'input', 'icon', 'affix', 'button'],\n  base: {\n    root: {\n      boxSizing: 'border-box',\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '_sm',\n      minWidth: 0,\n      minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n      paddingInline: '_md',\n      borderWidth: '_xs',\n      borderStyle: 'solid',\n      borderColor: { default: '_border', ':hover': '_borderStrong' },\n      borderRadius: '_md',\n      backgroundColor: '_surface',\n      color: '_text',\n      lineHeight: '_normal',\n      cursor: 'text',\n      transition: `border-color ${t.durations.sm} ${t.easings.standard}`,\n    },\n    // 原生 input / textarea：透明、无边框，占满剩余宽度，字体继承外壳。\n    // 参与基线对齐、高度撑满外壳：外壳（flex）的基线取输入框文字的基线，而不是排在前面的图标的底边，\n    // 左标签（按基线对齐）才与输入的文字在同一条线上；原生输入框自己把文字竖直居中\n    input: {\n      alignSelf: 'baseline',\n      boxSizing: 'border-box',\n      flexGrow: 1,\n      minWidth: 0,\n      minHeight: `calc(max(${t.sizes.control}, ${t.sizes.minTarget}) - 2 * ${t.borderWidths.xs})`,\n      margin: 0,\n      paddingBlock: '_xs',\n      paddingInline: 0,\n      borderWidth: 0,\n      outlineStyle: 'none',\n      backgroundColor: 'transparent',\n      color: 'inherit',\n      font: 'inherit',\n      cursor: 'inherit',\n      '::placeholder': { color: '_textPlaceholder', opacity: 1 },\n    },\n    // 前后的图标：次要颜色\n    icon: { flexShrink: 0, color: '_textMuted' },\n    // 前后缀文字（如 https://、元）：次要颜色，不换行\n    affix: { flexShrink: 0, color: '_textMuted', whiteSpace: 'nowrap' },\n    // 框里的小按钮：比独立的图标按钮紧凑，仍不小于 24px 的点击区域\n    button: {\n      flexShrink: 0,\n      width: `max(1.5em, ${t.sizes.minTarget})`,\n      minHeight: `max(1.5em, ${t.sizes.minTarget})`,\n      marginInline: `calc(-1 * ${t.space.xs})`,\n      color: '_textMuted',\n    },\n  },\n  // 档位的先后就是覆盖的先后：只读、出错依次盖过样式的描边与底色\n  variants: {\n    variant: {\n      surface: {},\n      soft: {\n        root: {\n          borderColor: { default: 'transparent', ':hover': 'transparent' },\n          backgroundColor: '_fill',\n        },\n      },\n    },\n    // 在横排的 ControlGroup 里：输入框分掉剩余宽度（选择框按内容宽，见 selectStyles.root）\n    attached: { horizontal: { root: { flexGrow: 1 } }, vertical: {} },\n    readonly: {\n      true: {\n        root: {\n          borderColor: { default: '_borderMuted', ':hover': '_borderMuted' },\n          backgroundColor: '_fill',\n        },\n      },\n    },\n    invalid: {\n      true: {\n        root: {\n          borderColor: { default: '_danger', ':hover': '_danger' },\n          outlineColor: '_danger',\n        },\n      },\n    },\n    disabled: { true: { root: { opacity: '_disabled', cursor: 'not-allowed' } } },\n    // 多行（Textarea）：内容从顶部开始，上下也留内边距\n    multiline: { true: { root: { alignItems: 'stretch', paddingBlock: '_xs' } } },\n  },\n});\n\n/** 输入框外壳的部件（createUi / Provider 的 styles.Input 按它定制） */\nexport type InputPart = (typeof inputRecipe.parts)[number];\n\n/**\n * 外壳各部件交给 mergeAttrs / mergeProps 的默认层：样式与部件标记（data-scope=\"input\"）。\n * 要加样式时写 `{ ...s.root, sx: [s.root.sx, 别的] }`\n */\nexport type ControlParts = {\n  readonly [Part in InputPart]: Omit<PartLayer, 'sx'> & { readonly sx: SxStyles };\n};\n\n/** 外壳里的图标（前置、后置）：次要颜色、不被挤压；没有图标时不渲染 */\nexport function controlIcon(\n  parts: ControlParts,\n  icon: IconData | undefined,\n  props?: Partial<IconProps>,\n): VNodeChild {\n  return icon ? <Icon {...mergePartProps<IconProps>({ ...parts.icon, icon }, props)} /> : null;\n}\n\n/** 外壳里的清空按钮：圆形、名称取语言包（清空）；有值、可编辑时才渲染由调用方决定 */\nexport function controlClear(\n  parts: ControlParts,\n  props: Partial<PresetIconButtonProps> | undefined,\n  onClick: () => void,\n): VNodeChild {\n  return (\n    <ClearButton\n      {...mergePartProps<PresetIconButtonProps>({ ...parts.button, radius: 'full' }, props, {\n        onClick,\n      })}\n    />\n  );\n}\n\n/**\n * 外壳里的前缀、后缀文字（币种、单位）：用指向输入框的 label，读屏把单位念进名称（“年度预算 万元”），\n * 不可用时也算作不可用控件的文字（不要求对比度）；没有内容时不渲染\n */\nexport function controlAffix(\n  parts: ControlParts,\n  content: VNodeChild,\n  inputId: string,\n  props?: PartProps<'label'>,\n): VNodeChild {\n  return content == null ? null : (\n    <label {...mergeAttrs<'label'>(parts.affix, props, { for: inputId })}>{content}</label>\n  );\n}\n\n/** 合并后的外观（默认值已填上）；在 ControlGroup 里时带上相连的方向 */\nexport type ControlAppearance = Required<Pick<ControlOptions, 'variant' | 'radius'>> &\n  Pick<ControlOptions, 'size'> & {\n    attached?: keyof AttachedOrientations;\n    /** 外壳的配方，带上 createUi / Provider 里 styles.Input 的定制 */\n    recipe: ReturnType<typeof useRecipe<InputPart, unknown>>;\n  };\n\n/**\n * 输入框的外观：显式写的 prop > createUi / Provider 的 defaults.Input > 默认（surface）。\n * 在 setup 里调用，返回的函数在渲染时调用\n */\nexport function useControlAppearance(read: () => ControlOptions): () => ControlAppearance {\n  const group = AttachedContext.inject(null);\n  const recipe = useRecipe(inputRecipe);\n  const appearance = useDefaults('Input', read, { variant: 'surface', radius: 'md' });\n  return () => ({ ...appearance(), attached: group?.orientation, recipe });\n}\n\n/**\n * 外观与状态 → 外壳各部件的默认层；multiline 给 Textarea。\n * 外壳在配方之后叠上圆角、相连、字号；焦点环排在配方之前，出错档位的红色焦点环才盖得过它\n */\nexport function controlParts(\n  { variant, size, radius, attached, recipe }: ControlAppearance,\n  { invalid, disabled, readonly }: ControlState,\n  multiline = false,\n): ControlParts {\n  const parts = recipe({ variant, attached, readonly, invalid, disabled, multiline });\n  return {\n    ...parts,\n    root: {\n      ...parts.root,\n      sx: [\n        focusRingStyles.within,\n        parts.root.sx,\n        radiusStyles[radius],\n        attached && attachedStyles[attached],\n        size && fontSizeStyles[size],\n      ],\n    },\n  };\n}\n\n/** 点在外壳的空白处（内边距、图标、标签上）：不是主元素本身，也不是框里的按钮 */\nfunction isShellBlank(target: Element, element: HTMLElement): boolean {\n  return target !== element && !element.contains(target) && !target.closest('button');\n}\n\n/**\n * 外壳的 onPointerdown：点在外壳的空白处时把焦点交给主元素（input、触发按钮），不让浏览器把焦点放到别处；\n * 点在主元素或框里的按钮上时照常\n */\nexport function focusOnShell(main: () => HTMLElement | null): (event: PointerEvent) => void {\n  return (event) => {\n    const element = main();\n    if (!element || !isShellBlank(event.target as Element, element)) return;\n    event.preventDefault();\n    element.focus();\n  };\n}\n\n/**\n * 外壳的 onClick：点在外壳的空白处时调用 action（Select、TreeSelect 据此切换打开，与点触发按钮一样）。\n * 不在 pointerdown 里打开：原生 popover=\"auto\" 在 pointerup 时把“按下时还没打开”的浮层当作点在外面关掉\n */\nexport function clickOnShell(\n  main: () => HTMLElement | null,\n  action: (event: MouseEvent) => void,\n): (event: MouseEvent) => void {\n  return (event) => {\n    const element = main();\n    if (element && isShellBlank(event.target as Element, element)) action(event);\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"control.js","names":["_createVNode"],"sources":["../../src/input/control.tsx"],"sourcesContent":["/**\n * 输入框外壳：配方、外观选项、前置图标与交互小工具。TextField、Textarea、NumberField、Select、Combobox、\n * TagsInput 与日期输入框共用。\n * 外壳是包着原生 input 的 div：边框、悬停、焦点环（:focus-within）、出错、不可用、只读都画在外壳上，\n * input 本身透明无边框，所以图标、清除按钮、步进按钮可以放进框里。尺寸用 em，随 size 缩放（COMPONENTS.md §3）。\n */\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { ClearButton, type PresetIconButtonProps } from '../base/CloseButton';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe, type PartLayer } from '../config/styles';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  AttachedContext,\n  attachedStyles,\n  type AttachedOrientations,\n} from '../utils/style/attached';\nimport { focusRingStyles, radiusStyles, type Radius } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 输入框的样式 */\nexport interface ControlVariants {\n  /** 表面色加描边（默认） */\n  surface: unknown;\n  /** 浅色底，没有描边：表单很密、或放在有底色的区域里 */\n  soft: unknown;\n}\n\n/** 输入框的外观选项；可以用 createUi / Provider 的 defaults.Input 统一改默认值 */\nexport interface ControlOptions {\n  /** 样式，默认 surface */\n  variant?: keyof ControlVariants;\n  /** 字号档位，内部尺寸随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 圆角，与按钮同一套档位，默认 md；搜索框常用 full（胶囊形） */\n  radius?: Radius;\n}\n\n/** 框里最前面的图标（搜索、日历、地球……）：各种输入框共有 */\nexport interface ControlIconOptions {\n  /** 前置图标 */\n  icon?: IconData;\n  /** 前置图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n}\n\n/** 外壳的状态：出错、不可用、只读 */\nexport interface ControlState {\n  /** 校验未通过：红色描边与焦点环 */\n  invalid?: boolean;\n  /** 不可用：变淡 */\n  disabled?: boolean;\n  /** 只读：底色变浅，不显示悬停 */\n  readonly?: boolean;\n}\n\n/**\n * 输入框外壳的配方：部件 root（外壳 div）、input（原生 input / textarea）、icon（前后的图标）、\n * affix（前后缀文字）、button（框里的小按钮：清除、显示密码、步进）。\n * 档位是样式（variant）、在 ControlGroup 里的方向（attached）与外壳的状态；圆角、相连、字号用共用的样式表，\n * 由 controlParts 叠在配方之后\n */\nexport const inputRecipe = css.recipe({\n  name: 'Input',\n  parts: ['root', 'input', 'icon', 'affix', 'button'],\n  base: {\n    root: {\n      boxSizing: 'border-box',\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '_sm',\n      minWidth: 0,\n      minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n      paddingInline: '_md',\n      borderWidth: '_xs',\n      borderStyle: 'solid',\n      borderColor: { default: '_border', ':hover': '_borderStrong' },\n      borderRadius: '_md',\n      backgroundColor: '_surface',\n      color: '_text',\n      lineHeight: '_normal',\n      cursor: 'text',\n      transition: `border-color ${t.durations.sm} ${t.easings.standard}`,\n    },\n    // 原生 input / textarea：透明、无边框，占满剩余宽度，字体继承外壳。\n    // 参与基线对齐、高度撑满外壳：外壳（flex）的基线取输入框文字的基线，而不是排在前面的图标的底边，\n    // 左标签（按基线对齐）才与输入的文字在同一条线上；原生输入框自己把文字竖直居中\n    input: {\n      alignSelf: 'baseline',\n      boxSizing: 'border-box',\n      flexGrow: 1,\n      minWidth: 0,\n      minHeight: `calc(max(${t.sizes.control}, ${t.sizes.minTarget}) - 2 * ${t.borderWidths.xs})`,\n      margin: 0,\n      paddingBlock: '_xs',\n      paddingInline: 0,\n      borderWidth: 0,\n      outlineStyle: 'none',\n      backgroundColor: 'transparent',\n      color: 'inherit',\n      font: 'inherit',\n      cursor: 'inherit',\n      '::placeholder': { color: '_textPlaceholder', opacity: 1 },\n    },\n    // 前后的图标：次要颜色\n    icon: { flexShrink: 0, color: '_textMuted' },\n    // 前后缀文字（如 https://、元）：次要颜色，不换行\n    affix: { flexShrink: 0, color: '_textMuted', whiteSpace: 'nowrap' },\n    // 框里的小按钮：比独立的图标按钮紧凑，仍不小于 24px 的点击区域\n    button: {\n      flexShrink: 0,\n      width: `max(1.5em, ${t.sizes.minTarget})`,\n      minHeight: `max(1.5em, ${t.sizes.minTarget})`,\n      marginInline: `calc(-1 * ${t.space.xs})`,\n      color: '_textMuted',\n    },\n  },\n  // 档位的先后就是覆盖的先后：只读、出错依次盖过样式的描边与底色\n  variants: {\n    variant: {\n      surface: {},\n      soft: {\n        root: {\n          borderColor: { default: 'transparent', ':hover': 'transparent' },\n          backgroundColor: '_fill',\n        },\n      },\n    },\n    // 在横排的 ControlGroup 里：输入框分掉剩余宽度（选择框按内容宽，见 selectStyles.root）\n    attached: { horizontal: { root: { flexGrow: 1 } }, vertical: {} },\n    readonly: {\n      true: {\n        root: {\n          borderColor: { default: '_borderMuted', ':hover': '_borderMuted' },\n          backgroundColor: '_fill',\n        },\n      },\n    },\n    invalid: {\n      true: {\n        root: {\n          borderColor: { default: '_danger', ':hover': '_danger' },\n          outlineColor: '_danger',\n        },\n      },\n    },\n    disabled: { true: { root: { opacity: '_disabled', cursor: 'not-allowed' } } },\n    // 多行（Textarea）：内容从顶部开始，上下也留内边距\n    multiline: { true: { root: { alignItems: 'stretch', paddingBlock: '_xs' } } },\n  },\n});\n\n/** 输入框外壳的部件（createUi / Provider 的 styles.Input 按它定制） */\nexport type InputPart = (typeof inputRecipe.parts)[number];\n\n/**\n * 外壳各部件交给 mergeAttrs / mergeProps 的默认层：样式与部件标记（data-scope=\"input\"）。\n * 要加样式时写 `{ ...s.root, sx: [s.root.sx, 别的] }`\n */\nexport type ControlParts = {\n  readonly [Part in InputPart]: Omit<PartLayer, 'sx'> & { readonly sx: SxStyles };\n};\n\n/** 外壳里的图标（前置、后置）：次要颜色、不被挤压；没有图标时不渲染 */\nexport function controlIcon(\n  parts: ControlParts,\n  icon: IconData | undefined,\n  props?: Partial<IconProps>,\n): VNodeChild {\n  return icon ? <Icon {...mergePartProps<IconProps>({ ...parts.icon, icon }, props)} /> : null;\n}\n\n/** 外壳里的清空按钮：圆形、名称取语言包（清空）；有值、可编辑时才渲染由调用方决定 */\nexport function controlClear(\n  parts: ControlParts,\n  props: Partial<PresetIconButtonProps> | undefined,\n  onClick: () => void,\n): VNodeChild {\n  return (\n    <ClearButton\n      {...mergePartProps<PresetIconButtonProps>({ ...parts.button, radius: 'full' }, props, {\n        onClick,\n      })}\n    />\n  );\n}\n\n/**\n * 外壳里的前缀、后缀文字（币种、单位）：用指向输入框的 label，读屏把单位念进名称（“年度预算 万元”），\n * 不可用时也算作不可用控件的文字（不要求对比度）；没有内容时不渲染\n */\nexport function controlAffix(\n  parts: ControlParts,\n  content: VNodeChild,\n  inputId: string,\n  props?: PartProps<'label'>,\n): VNodeChild {\n  return content == null ? null : (\n    <label {...mergeAttrs<'label'>(parts.affix, props, { for: inputId })}>{content}</label>\n  );\n}\n\n/** 合并后的外观（默认值已填上）；在 ControlGroup 里时带上相连的方向 */\nexport type ControlAppearance = Required<Pick<ControlOptions, 'variant' | 'radius'>> &\n  Pick<ControlOptions, 'size'> & {\n    attached?: keyof AttachedOrientations;\n    /** 外壳的配方，带上 createUi / Provider 里 styles.Input 的定制 */\n    recipe: ReturnType<typeof useRecipe<InputPart, unknown>>;\n  };\n\n/**\n * 输入框的外观：显式写的 prop > createUi / Provider 的 defaults.Input > 默认（surface）。\n * 在 setup 里调用，返回的函数在渲染时调用\n */\nexport function useControlAppearance(read: () => ControlOptions): () => ControlAppearance {\n  const group = AttachedContext.inject(null);\n  const recipe = useRecipe(inputRecipe);\n  const appearance = useDefaults('Input', read, { variant: 'surface', radius: 'md' });\n  return () => ({ ...appearance(), attached: group?.orientation, recipe });\n}\n\n/**\n * 外观与状态 → 外壳各部件的默认层；multiline 给 Textarea。\n * 外壳在配方之后叠上圆角、相连、字号；焦点环排在配方之前，出错档位的红色焦点环才盖得过它\n */\nexport function controlParts(\n  { variant, size, radius, attached, recipe }: ControlAppearance,\n  { invalid, disabled, readonly }: ControlState,\n  multiline = false,\n): ControlParts {\n  const parts = recipe({ variant, attached, readonly, invalid, disabled, multiline });\n  return {\n    ...parts,\n    root: {\n      ...parts.root,\n      sx: [\n        focusRingStyles.within,\n        parts.root.sx,\n        radiusStyles[radius],\n        attached && attachedStyles[attached],\n        size && fontSizeStyles[size],\n      ],\n    },\n  };\n}\n\n/** 点在外壳的空白处（内边距、图标、标签上）：不是主元素本身，也不是框里的按钮 */\nfunction isShellBlank(target: Element, element: HTMLElement): boolean {\n  return target !== element && !element.contains(target) && !target.closest('button');\n}\n\n/**\n * 外壳的 onPointerdown：点在外壳的空白处时把焦点交给主元素（input、触发按钮），不让浏览器把焦点放到别处；\n * 点在主元素或框里的按钮上时照常\n */\nexport function focusOnShell(main: () => HTMLElement | null): (event: PointerEvent) => void {\n  return (event) => {\n    const element = main();\n    if (!element || !isShellBlank(event.target as Element, element)) return;\n    event.preventDefault();\n    element.focus();\n  };\n}\n\n/**\n * 外壳的 onClick：点在外壳的空白处时调用 action（Select、TreeSelect 据此切换打开，与点触发按钮一样）。\n * 不在 pointerdown 里打开：原生 popover=\"auto\" 在 pointerup 时把“按下时还没打开”的浮层当作点在外面关掉\n */\nexport function clickOnShell(\n  main: () => HTMLElement | null,\n  action: (event: MouseEvent) => void,\n): (event: MouseEvent) => void {\n  return (event) => {\n    const element = main();\n    if (element && isShellBlank(event.target as Element, element)) action(event);\n  };\n}\n"],"mappings":"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"}

package/dist/layout/Affix.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';
 /** onChange 换成报告是否贴住 */

package/dist/layout/Affix.js

@@ -3,7 +3,7 @@ import { mergeAttrs } from "../utils/props.js";
 import { useIntersectionObserver } from "../utils/dom/intersection.js";
 import { Fragment, createVNode, ref, shallowRef } from "vue";
 import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/layout/Affix.tsx
 /** onChange 换成报告是否贴住 */
 /** 未声明的属性落到 sticky 的 div 上 */

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 的样式 */