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

package/dist/base/Blockquote.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';
 /** 未声明的属性落到 blockquote 上 */

package/dist/base/Blockquote.js

@@ -1,7 +1,7 @@
 import { mergeAttrs } from "../utils/props.js";
 import { createVNode } from "vue";
 import { _component, childrenProp, 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/base/Blockquote.tsx
 /** 未声明的属性落到 blockquote 上 */
 /** Blockquote 的样式 */

package/dist/base/Blockquote.js.map

@@ -1 +1 @@
-{"version":3,"file":"Blockquote.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/Blockquote.tsx"],"sourcesContent":["/**\n * 引用（blockquote）：起始边一条竖线，次要文字色。提示、警告用 Alert，不用引用。\n *\n *   <Blockquote cite=\"https://…\">…</Blockquote>\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';\n\n/** 未声明的属性落到 blockquote 上 */\nexport interface BlockquoteProps extends PartProps<'blockquote'> {\n  children?: VNodeChild;\n}\n\n/** Blockquote 的样式 */\nexport const blockquoteStyles = css.create({\n  root: {\n    margin: 0,\n    paddingBlock: '_xs',\n    paddingInlineStart: '_lg',\n    borderInlineStartWidth: '_md',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderStrong',\n    color: '_textMuted',\n  },\n});\n\n/** 引用（blockquote） */\nexport const Blockquote = _component(({ children, ...rest }: BlockquoteProps) => () => (\n  <blockquote {...mergeAttrs<'blockquote'>({ sx: blockquoteStyles.root }, rest)}>\n    {children}\n  </blockquote>\n));\n"],"mappings":";;;;;;;AAgBA,IAAa,mBAAmB,IAAI,OAAO,EACzC,MAAM;CACJ,QAAQ;CACR,cAAc;CACd,oBAAoB;CACpB,wBAAwB;CACxB,wBAAwB;CACxB,wBAAwB;CACxB,OAAO;AACT,EACF,CAAC;;AAGD,IAAa,aAAa,0BAAW,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAAwBC,YAAA,cAC/D,WAAyB,EAAE,IAAI,iBAAiB,KAAK,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AAG9E,GAAA,EAAA,MAAA,aAAA,CAAA"}
+{"version":3,"file":"Blockquote.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/Blockquote.tsx"],"sourcesContent":["/**\n * 引用（blockquote）：起始边一条竖线，次要文字色。提示、警告用 Alert，不用引用。\n *\n *   <Blockquote cite=\"https://…\">…</Blockquote>\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';\n\n/** 未声明的属性落到 blockquote 上 */\nexport interface BlockquoteProps extends PartProps<'blockquote'> {\n  children?: VNodeChild;\n}\n\n/** Blockquote 的样式 */\nexport const blockquoteStyles = css.create({\n  root: {\n    margin: 0,\n    paddingBlock: '_xs',\n    paddingInlineStart: '_lg',\n    borderInlineStartWidth: '_md',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderStrong',\n    color: '_textMuted',\n  },\n});\n\n/** 引用（blockquote） */\nexport const Blockquote = _component(({ children, ...rest }: BlockquoteProps) => () => (\n  <blockquote {...mergeAttrs<'blockquote'>({ sx: blockquoteStyles.root }, rest)}>\n    {children}\n  </blockquote>\n));\n"],"mappings":";;;;;;;AAgBA,IAAa,mBAAmB,IAAI,OAAO,EACzC,MAAM;CACJ,QAAQ;CACR,cAAc;CACd,oBAAoB;CACpB,wBAAwB;CACxB,wBAAwB;CACxB,wBAAwB;CACxB,OAAO;AACT,EACF,CAAC;;AAGD,IAAa,aAAa,0BAAW,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAAwBC,YAAA,cAC/D,WAAyB,EAAE,IAAI,iBAAiB,KAAK,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AAG9E,GAAA,EAAA,MAAA,aAAA,CAAA"}

package/dist/base/ButtonGroup.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 AttachedOrientations } from '../utils/style/attached';

package/dist/base/ButtonGroup.js

@@ -3,7 +3,7 @@ import { AttachedContext } from "../utils/style/attached.js";
 import { ButtonGroupContext } from "./button-core.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/base/ButtonGroup.tsx
 /** 角色由组件管理 */
 /** 未声明的属性落到 div 上；aria-label 是这组操作的名称 */

package/dist/base/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/ButtonGroup.tsx"],"sourcesContent":["/**\n * 按钮组（div，role=\"group\"）：几个相关的按钮连成一条，共用外观。分段操作、拆分按钮、翻页、对齐方式这类工具栏。\n *\n *   <ButtonGroup variant=\"outline\" tone=\"neutral\" aria-label=\"文字对齐\">\n *     <IconButton icon={AlignLeft} aria-label=\"左对齐\" />\n *     <IconButton icon={AlignCenter} aria-label=\"居中\" />\n *   </ButtonGroup>\n *\n * 组里的按钮家族（Button、LinkButton、IconButton…）经 AttachedContext 得知自己在组里：去掉相邻一侧的圆角、边框叠在一起；\n * 组上写的 variant、tone、size、radius 是组里按钮的默认值，按钮自己写的优先。\n * 实底（solid）的相邻按钮之间没有分隔，连成一条时用 outline、surface 更清楚。\n * 只是排一排、不相连的按钮用 Flex。选中其中一项（单选、多选）用 ToggleGroup。\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 { AttachedContext, type AttachedOrientations } from '../utils/style/attached';\nimport { ButtonGroupContext, type ButtonOptions } from './button-core';\n\n/** 角色由组件管理 */\nexport type ButtonGroupManaged = 'role';\n\n/** 未声明的属性落到 div 上；aria-label 是这组操作的名称 */\nexport interface ButtonGroupProps\n  extends\n    PartProps<'div', ButtonGroupManaged>,\n    Pick<ButtonOptions, 'variant' | 'tone' | 'size' | 'radius'> {\n  /**\n   * 排列方向\n   * @default 'horizontal'\n   */\n  orientation?: keyof AttachedOrientations;\n  /** 按钮 */\n  children?: VNodeChild;\n}\n\n/** ButtonGroup 的样式：root、vertical */\nexport const buttonGroupStyles = css.create({\n  root: { display: 'inline-flex', alignItems: 'stretch' },\n  vertical: { flexDirection: 'column' },\n});\n\n/** 按钮组：相连的一排（或一列）按钮，共用外观 */\nexport const ButtonGroup = _component(\n  ({\n    variant,\n    tone,\n    size,\n    radius,\n    orientation = 'horizontal',\n    children,\n    ...rest\n  }: ButtonGroupProps) => {\n    ButtonGroupContext.provide({\n      get appearance() {\n        return { variant, tone, size, radius };\n      },\n    });\n    AttachedContext.provide({\n      get orientation() {\n        return orientation;\n      },\n    });\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [buttonGroupStyles.root, orientation === 'vertical' && buttonGroupStyles.vertical],\n          },\n          rest,\n          { role: 'group' },\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAsCA,IAAa,oBAAoB,IAAI,OAAO;CAC1C,MAAM;EAAE,SAAS;EAAe,YAAY;CAAU;CACtD,UAAU,EAAE,eAAe,SAAS;AACtC,CAAC;;AAGD,IAAa,cAAc,0BACzB,QAAA,SAQwB;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,eAHR,YAAY;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAEvB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,mBAAmB,QAAQ,EACzB,IAAI,aAAa;EACf,OAAO;GAAE,SAAO,QAAA;GAAE,MAAI,KAAA;GAAE,MAAI,KAAA;GAAE,QAAM,OAAA;EAAC;CACvC,EACF,CAAC;CACD,gBAAgB,QAAQ,EACtB,IAAI,cAAc;EAChB,OAAA,YAAA;CACF,EACF,CAAC;CACD,aAAOC,YAAA,OAEC,WACF,EACE,IAAI,CAAC,kBAAkB,MAAM,YAAA,UAAgB,cAAc,kBAAkB,QAAQ,EACvF,GACA,MACA,EAAE,MAAM,QAAQ,CAClB,GAAC,CAAA,SAAA,KAAA,CAAA;AAKP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"ButtonGroup.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/ButtonGroup.tsx"],"sourcesContent":["/**\n * 按钮组（div，role=\"group\"）：几个相关的按钮连成一条，共用外观。分段操作、拆分按钮、翻页、对齐方式这类工具栏。\n *\n *   <ButtonGroup variant=\"outline\" tone=\"neutral\" aria-label=\"文字对齐\">\n *     <IconButton icon={AlignLeft} aria-label=\"左对齐\" />\n *     <IconButton icon={AlignCenter} aria-label=\"居中\" />\n *   </ButtonGroup>\n *\n * 组里的按钮家族（Button、LinkButton、IconButton…）经 AttachedContext 得知自己在组里：去掉相邻一侧的圆角、边框叠在一起；\n * 组上写的 variant、tone、size、radius 是组里按钮的默认值，按钮自己写的优先。\n * 实底（solid）的相邻按钮之间没有分隔，连成一条时用 outline、surface 更清楚。\n * 只是排一排、不相连的按钮用 Flex。选中其中一项（单选、多选）用 ToggleGroup。\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 { AttachedContext, type AttachedOrientations } from '../utils/style/attached';\nimport { ButtonGroupContext, type ButtonOptions } from './button-core';\n\n/** 角色由组件管理 */\nexport type ButtonGroupManaged = 'role';\n\n/** 未声明的属性落到 div 上；aria-label 是这组操作的名称 */\nexport interface ButtonGroupProps\n  extends\n    PartProps<'div', ButtonGroupManaged>,\n    Pick<ButtonOptions, 'variant' | 'tone' | 'size' | 'radius'> {\n  /**\n   * 排列方向\n   * @default 'horizontal'\n   */\n  orientation?: keyof AttachedOrientations;\n  /** 按钮 */\n  children?: VNodeChild;\n}\n\n/** ButtonGroup 的样式：root、vertical */\nexport const buttonGroupStyles = css.create({\n  root: { display: 'inline-flex', alignItems: 'stretch' },\n  vertical: { flexDirection: 'column' },\n});\n\n/** 按钮组：相连的一排（或一列）按钮，共用外观 */\nexport const ButtonGroup = _component(\n  ({\n    variant,\n    tone,\n    size,\n    radius,\n    orientation = 'horizontal',\n    children,\n    ...rest\n  }: ButtonGroupProps) => {\n    ButtonGroupContext.provide({\n      get appearance() {\n        return { variant, tone, size, radius };\n      },\n    });\n    AttachedContext.provide({\n      get orientation() {\n        return orientation;\n      },\n    });\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [buttonGroupStyles.root, orientation === 'vertical' && buttonGroupStyles.vertical],\n          },\n          rest,\n          { role: 'group' },\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAsCA,IAAa,oBAAoB,IAAI,OAAO;CAC1C,MAAM;EAAE,SAAS;EAAe,YAAY;CAAU;CACtD,UAAU,EAAE,eAAe,SAAS;AACtC,CAAC;;AAGD,IAAa,cAAc,0BACzB,QAAA,SAQwB;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,eAHR,YAAY;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAEvB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,mBAAmB,QAAQ,EACzB,IAAI,aAAa;EACf,OAAO;GAAE,SAAO,QAAA;GAAE,MAAI,KAAA;GAAE,MAAI,KAAA;GAAE,QAAM,OAAA;EAAC;CACvC,EACF,CAAC;CACD,gBAAgB,QAAQ,EACtB,IAAI,cAAc;EAChB,OAAA,YAAA;CACF,EACF,CAAC;CACD,aAAOC,YAAA,OAEC,WACF,EACE,IAAI,CAAC,kBAAkB,MAAM,YAAA,UAAgB,cAAc,kBAAkB,QAAQ,EACvF,GACA,MACA,EAAE,MAAM,QAAQ,CAClB,GAAC,CAAA,SAAA,KAAA,CAAA;AAKP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/base/Code.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';
 /** 未声明的属性落到 code 上 */

package/dist/base/Code.js

@@ -1,7 +1,7 @@
 import { mergeAttrs } from "../utils/props.js";
 import { createVNode } from "vue";
 import { _component, childrenProp, 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/base/Code.tsx
 /** 未声明的属性落到 code 上 */
 /** Code 的样式：root */

package/dist/base/Code.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/Code.tsx"],"sourcesContent":["/**\n * 行内代码：等宽字体、浅底。多行代码用 CodeBlock。\n *\n *   运行 <Code>pnpm install</Code> 安装依赖\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';\n\n/** 未声明的属性落到 code 上 */\nexport interface CodeProps extends PartProps<'code'> {\n  children?: VNodeChild;\n}\n\n/** Code 的样式：root */\nexport const codeStyles = css.create({\n  root: {\n    paddingInline: '_xs',\n    borderRadius: '_sm',\n    backgroundColor: '_fill',\n    color: '_text',\n    fontFamily: '_mono',\n    // 代码字体的连字（=> 显示成 ⇒）会让照着抄的人看错，一律关掉\n    fontVariantLigatures: 'none',\n    // 相对周围文字略小：等宽字体的字面显得大；是比例不是字号档位\n    fontSize: '0.9em',\n    // 长命令、长路径可以在任意位置换行，不撑破容器\n    overflowWrap: 'anywhere',\n  },\n});\n\n/** 行内代码（code）：命令、文件名、标识符；等宽字体，长内容可在任意位置换行 */\nexport const Code = _component(({ children, ...rest }: CodeProps) => () => (\n  <code {...mergeAttrs<'code'>({ sx: codeStyles.root }, rest)}>{children}</code>\n));\n"],"mappings":";;;;;;;AAgBA,IAAa,aAAa,IAAI,OAAO,EACnC,MAAM;CACJ,eAAe;CACf,cAAc;CACd,iBAAiB;CACjB,OAAO;CACP,YAAY;CAEZ,sBAAsB;CAEtB,UAAU;CAEV,cAAc;AAChB,EACF,CAAC;;AAGD,IAAa,OAAO,0BAAW,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAAkBC,YAAA,QACzD,WAAmB,EAAE,IAAI,WAAW,KAAK,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AAC5D,GAAA,EAAA,MAAA,OAAA,CAAA"}
+{"version":3,"file":"Code.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/Code.tsx"],"sourcesContent":["/**\n * 行内代码：等宽字体、浅底。多行代码用 CodeBlock。\n *\n *   运行 <Code>pnpm install</Code> 安装依赖\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';\n\n/** 未声明的属性落到 code 上 */\nexport interface CodeProps extends PartProps<'code'> {\n  children?: VNodeChild;\n}\n\n/** Code 的样式：root */\nexport const codeStyles = css.create({\n  root: {\n    paddingInline: '_xs',\n    borderRadius: '_sm',\n    backgroundColor: '_fill',\n    color: '_text',\n    fontFamily: '_mono',\n    // 代码字体的连字（=> 显示成 ⇒）会让照着抄的人看错，一律关掉\n    fontVariantLigatures: 'none',\n    // 相对周围文字略小：等宽字体的字面显得大；是比例不是字号档位\n    fontSize: '0.9em',\n    // 长命令、长路径可以在任意位置换行，不撑破容器\n    overflowWrap: 'anywhere',\n  },\n});\n\n/** 行内代码（code）：命令、文件名、标识符；等宽字体，长内容可在任意位置换行 */\nexport const Code = _component(({ children, ...rest }: CodeProps) => () => (\n  <code {...mergeAttrs<'code'>({ sx: codeStyles.root }, rest)}>{children}</code>\n));\n"],"mappings":";;;;;;;AAgBA,IAAa,aAAa,IAAI,OAAO,EACnC,MAAM;CACJ,eAAe;CACf,cAAc;CACd,iBAAiB;CACjB,OAAO;CACP,YAAY;CAEZ,sBAAsB;CAEtB,UAAU;CAEV,cAAc;AAChB,EACF,CAAC;;AAGD,IAAa,OAAO,0BAAW,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAAkBC,YAAA,QACzD,WAAmB,EAAE,IAAI,WAAW,KAAK,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AAC5D,GAAA,EAAA,MAAA,OAAA,CAAA"}

package/dist/base/CodeBlock.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 ScrollAreaProps } from '../layout/ScrollArea';

package/dist/base/CodeBlock.js

@@ -8,7 +8,7 @@ import { ScrollArea } from "../layout/ScrollArea.js";
 import { CopyButton } from "./CopyButton.js";
 import { computed, createVNode, ref, shallowRef } from "vue";
 import { _component, effect, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ChevronDown } from "@lucide/icons";
 //#region src/base/CodeBlock.tsx
 /**

package/dist/base/CodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/base/CodeBlock.tsx"],"sourcesContent":["/**\n * 代码块（pre > code）。高亮器经配置注入（createUi / Provider 的 highlighter，见 config/context.ts），\n * 本组件不依赖 Shiki：没有高亮器、或没给语言时显示纯文本。\n *\n *   <CodeBlock code={source} lang=\"ts\" />\n *   <CodeBlock code={source} lang=\"ts\" title=\"main.ts\" lineNumbers highlightLines=\"2,4-5\" maxLines={20} />\n *\n * - 高亮是异步的：先显示纯文本，结果到了再替换；等宽字体下两者排版相同，布局不跳动。\n * - 长行在 ScrollArea 里横向滚动：浮层滚动条不占高度；滚动区域可聚焦（带焦点环），键盘也能滚动。\n * - 复制按钮（CopyButton）在右上角，有标题时放在标题栏里；复制成功后经 aria-live 播报“已复制”。\n * - 行号、行高亮、新增与删除的行：按行渲染（高亮结果按 <br> 拆行；代码里的 < 都已转义，拆分是安全的）；\n *   都不用时整段写进 innerHTML，不为每行建节点。行号不可选中，复制的是 code 本身。\n * - 长代码：maxLines 之外折叠，底部的按钮展开或收起。\n */\nimport { ChevronDown } from '@lucide/icons';\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 { useConfig, useLang } from '../config/context';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { disclosureStyles } from '../utils/style/transitions';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport { ButtonBase, type ButtonBaseProps } from './ButtonBase';\nimport { CopyButton, type CopyButtonProps } from './CopyButton';\nimport { Icon, type IconProps } from './Icon';\nimport { t } from '../config/theme/tokens';\n\n/** 行号的写法：`'1,3-5'` 或 `[1, 3, 4, 5]`（从 1 开始） */\nexport type LineSpec = string | readonly number[];\n\n/** 未声明的属性落到 pre 上；原生的 title 属性（悬停提示）让给标题栏 */\nexport interface CodeBlockProps extends PartProps<'pre', 'title'> {\n  /** 代码文本 */\n  code: string;\n  /** 语言（如 ts、vue、bash），交给高亮器；不写时不高亮，高亮器不认识的语言也按纯文本显示 */\n  lang?: string;\n  /**\n   * 高亮：false 时先按纯文本显示，改成 true 时才交给高亮器。看不见的代码（收起的示例源码）可以等要显示时再高亮，\n   * 页面打开时不必一次高亮全部\n   * @default true\n   */\n  highlight?: boolean;\n  /** 标题栏：通常是文件名；有标题时复制按钮放在标题栏里 */\n  title?: VNodeChild;\n  /** 长行自动换行，而不是横向滚动 */\n  wrap?: boolean;\n  /** 显示复制按钮，默认 true */\n  copyable?: boolean;\n  /** 显示行号 */\n  lineNumbers?: boolean;\n  /** 强调的行：`'2,4-5'` */\n  highlightLines?: LineSpec;\n  /** 新增的行（diff）：绿色底 */\n  addedLines?: LineSpec;\n  /** 删除的行（diff）：红色底 */\n  removedLines?: LineSpec;\n  /** 超过这么多行时折叠，底部的按钮展开；不写时不折叠 */\n  maxLines?: number;\n  /** 内层 code 元素的部件属性 */\n  propsCode?: PartProps<'code'>;\n  /** 外层（包着标题栏、pre 与复制按钮的 div）的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 标题栏的部件属性 */\n  propsHeader?: PartProps<'div'>;\n  /** 标题栏里标题文字的部件属性 */\n  propsTitle?: PartProps<'span'>;\n  /** 代码区（包着滚动区域与右上角复制按钮的 div）的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 按行渲染时每一行的部件属性 */\n  propsLine?: PartProps<'span'>;\n  /** 每行行号的部件属性 */\n  propsLineNumber?: PartProps<'span', 'aria-hidden'>;\n  /** 复制按钮的部件属性 */\n  propsCopy?: Partial<CopyButtonProps>;\n  /** 横向滚动区域（ScrollArea）的部件属性 */\n  propsScroll?: Partial<ScrollAreaProps>;\n  /** 展开、收起长代码的按钮的部件属性 */\n  propsExpand?: Partial<ButtonBaseProps>;\n  /** 展开按钮里箭头图标的部件属性；展开后的翻转由组件管理 */\n  propsExpandIcon?: Partial<IconProps>;\n}\n\n/** `'1,3-5'` → Set{1, 3, 4, 5}；数组原样收进集合 */\nexport function parseLineSpec(spec: LineSpec | undefined): Set<number> {\n  if (spec == null) return new Set();\n  if (typeof spec !== 'string') return new Set(spec);\n  const lines = new Set<number>();\n  for (const part of spec.split(',')) {\n    const [from, to = from] = part.split('-').map((text) => Number(text.trim()));\n    if (!Number.isInteger(from) || !Number.isInteger(to)) continue;\n    for (let line = from!; line <= to!; line++) lines.add(line);\n  }\n  return lines;\n}\n\n/** CodeBlock 的样式 */\nexport const codeBlockStyles = css.create({\n  // minWidth: 0：放在 grid / flex 里时外层不被最长的一行代码撑宽（滚动的是里面的 pre）\n  wrapper: {\n    minWidth: 0,\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    overflow: 'hidden',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    paddingInlineStart: '_lg',\n    paddingInlineEnd: '_xs',\n    borderBottomWidth: '_xs',\n    borderBottomStyle: 'solid',\n    borderBottomColor: '_borderMuted',\n    backgroundColor: '_surfaceMuted',\n    color: '_textMuted',\n    fontFamily: '_mono',\n    fontSize: '0.85em',\n  },\n  title: {\n    flexGrow: 1,\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  body: { position: 'relative' },\n  // 给复制按钮留出位置，第一行的末尾不被盖住\n  withCopy: {\n    paddingInlineEnd: `calc(${t.space.md} + max(${t.sizes.control}, ${t.sizes.minTarget}))`,\n  },\n  copy: { position: 'absolute', top: '_space.xs', insetInlineEnd: '_space.xs' },\n  root: {\n    boxSizing: 'border-box',\n    margin: 0,\n    paddingBlock: '_md',\n    paddingInline: '_lg',\n    color: '_text',\n    fontFamily: '_mono',\n    // 代码总是从左到右排：从右到左的页面里也不跟着镜像\n    direction: 'ltr',\n    // 代码字体的连字（=> 显示成 ⇒）会让照着抄的人看错，一律关掉\n    fontVariantLigatures: 'none',\n    // 相对周围文字略小：等宽字体的字面显得大；是比例不是字号档位\n    fontSize: '0.9em',\n    lineHeight: '_normal',\n    tabSize: 2,\n  },\n  collapsed: { overflowY: 'hidden' },\n  wrap: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' },\n  // 继承 pre 的字体：浏览器默认给 code 设了 monospace 字号缩放\n  code: { fontFamily: 'inherit', fontSize: 'inherit' },\n  // 按行渲染时：code 至少与 pre 一样宽，行的底色铺满横向滚动的整行\n  lines: { display: 'inline-block', minWidth: '100%' },\n  line: {\n    display: 'block',\n    minHeight: '1lh',\n    marginInline: `calc(-1 * ${t.space.lg})`,\n    paddingInline: '_lg',\n  },\n  highlighted: { backgroundColor: '_fill' },\n  added: { backgroundColor: '_codeInserted' },\n  removed: { backgroundColor: '_codeDeleted' },\n  lineNumber: {\n    display: 'inline-block',\n    minWidth: '2ch',\n    marginInlineEnd: '_lg',\n    color: '_codeComment',\n    textAlign: 'end',\n    userSelect: 'none',\n  },\n  expand: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_xs',\n    width: '_full',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    borderTopWidth: '_xs',\n    borderTopStyle: 'solid',\n    borderTopColor: '_borderMuted',\n    backgroundColor: { default: '_surfaceMuted', ':hover': '_fill' },\n    color: '_textMuted',\n    fontSize: '_sm',\n  },\n  expandOpen: { rotate: '180deg' },\n});\n\n/** 按行拆开；结尾的换行不算新的一行（文件末尾通常有一个），不然行号会多出一行空的 */\nfunction splitLines(text: string, separator: string): string[] {\n  const lines = text.split(separator);\n  if (lines.length > 1 && lines.at(-1) === '') lines.pop();\n  return lines;\n}\n\n// 折叠后的高度按行数算，是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** CodeBlock 的动态样式：折叠后的最大高度 */\nexport const codeBlockDynamicStyles = css.create({\n  maxLines: (lines: number) => ({ maxHeight: `calc(${lines} * 1lh + 2 * 0.75em)` }),\n});\n\n/** 代码块：高亮、复制、标题栏、行号、行高亮、diff、长代码折叠 */\nexport const CodeBlock = _component(\n  ({\n    code,\n    lang,\n    highlight = true,\n    title,\n    wrap = false,\n    copyable = true,\n    lineNumbers = false,\n    highlightLines,\n    addedLines,\n    removedLines,\n    maxLines,\n    propsCode,\n    propsRoot,\n    propsHeader,\n    propsTitle,\n    propsBody,\n    propsLine,\n    propsLineNumber,\n    propsCopy,\n    propsScroll,\n    propsExpand,\n    propsExpandIcon,\n    ...rest\n  }: CodeBlockProps) => {\n    const config = useConfig();\n    const labels = useLang();\n    // 当前代码的高亮结果；代码或语言变了先清空，回到纯文本\n    let html = _state.raw<string | null>(null);\n    let expanded = _state(false);\n\n    _effect(() => {\n      const highlighter = config.highlighter;\n      html = null;\n      if (!highlighter || !lang || !highlight) return;\n      let stale = false;\n      highlighter(code, lang).then(\n        (result) => {\n          if (!stale) html = result;\n        },\n        (error: unknown) => console.error(`CodeBlock 高亮 ${lang} 代码失败，显示纯文本`, error),\n      );\n      return () => (stale = true);\n    });\n\n    const marks = _derived.by(() => ({\n      highlighted: parseLineSpec(highlightLines),\n      added: parseLineSpec(addedLines),\n      removed: parseLineSpec(removedLines),\n    }));\n    const lineCount = _derived(splitLines(code, '\\n').length);\n    const byLine = _derived(\n      lineNumbers || marks.highlighted.size + marks.added.size + marks.removed.size > 0,\n    );\n\n    /** 按行渲染：高亮结果按 <br> 拆，纯文本按换行拆 */\n    function renderLines() {\n      const lines = html == null ? splitLines(code, '\\n') : splitLines(html, '<br>');\n      return lines.map((line, index) => {\n        const number = index + 1;\n        return (\n          <span\n            key={number}\n            {...mergeAttrs<'span'>(\n              {\n                sx: [\n                  codeBlockStyles.line,\n                  marks.highlighted.has(number) && codeBlockStyles.highlighted,\n                  marks.added.has(number) && codeBlockStyles.added,\n                  marks.removed.has(number) && codeBlockStyles.removed,\n                ],\n              },\n              propsLine,\n            )}\n            data-diff={\n              marks.added.has(number) ? 'added' : marks.removed.has(number) ? 'removed' : undefined\n            }\n          >\n            {lineNumbers && (\n              <span\n                {...mergeAttrs<'span'>({ sx: codeBlockStyles.lineNumber }, propsLineNumber, {\n                  'aria-hidden': 'true',\n                })}\n              >\n                {number}\n              </span>\n            )}\n            {html == null ? line : <span innerHTML={line} />}\n          </span>\n        );\n      });\n    }\n\n    return () => {\n      const collapsible = maxLines != null && lineCount > maxLines;\n      const collapsed = collapsible && !expanded;\n      const codeProps = mergeAttrs<'code'>(\n        { sx: [codeBlockStyles.code, byLine && codeBlockStyles.lines] },\n        propsCode,\n      );\n      const copyButton = (inHeader: boolean) => (\n        <CopyButton\n          {...mergePartProps<CopyButtonProps>(\n            { sx: !inHeader && codeBlockStyles.copy, size: 'sm', tone: 'neutral', value: code },\n            propsCopy,\n          )}\n        />\n      );\n      return (\n        <div {...mergeAttrs<'div'>({ sx: codeBlockStyles.wrapper }, propsRoot)}>\n          {hasContent(title) && (\n            <div {...mergeAttrs<'div'>({ sx: codeBlockStyles.header }, propsHeader)}>\n              <span {...mergeAttrs<'span'>({ sx: codeBlockStyles.title }, propsTitle)}>\n                {title}\n              </span>\n              {copyable && copyButton(true)}\n            </div>\n          )}\n          <div {...mergeAttrs<'div'>({ sx: codeBlockStyles.body }, propsBody)}>\n            <ScrollArea axis=\"x\" {...mergePartProps<ScrollAreaProps>({}, propsScroll)}>\n              <pre\n                {...mergeAttrs<'pre'>(\n                  {\n                    sx: [\n                      codeBlockStyles.root,\n                      copyable && title == null && codeBlockStyles.withCopy,\n                    ],\n                  },\n                  rest,\n                  {\n                    sx: [\n                      wrap && codeBlockStyles.wrap,\n                      collapsed && [\n                        codeBlockStyles.collapsed,\n                        codeBlockDynamicStyles.maxLines(maxLines!),\n                      ],\n                    ],\n                  },\n                )}\n                data-lang={lang}\n              >\n                {byLine ? (\n                  <code {...codeProps}>{renderLines()}</code>\n                ) : html == null ? (\n                  <code {...codeProps}>{code}</code>\n                ) : (\n                  <code {...codeProps} innerHTML={html} />\n                )}\n              </pre>\n            </ScrollArea>\n            {copyable && title == null && copyButton(false)}\n          </div>\n          {collapsible && (\n            <ButtonBase\n              {...mergePartProps<ButtonBaseProps>({ sx: codeBlockStyles.expand }, propsExpand, {\n                'aria-expanded': expanded,\n                onClick: () => (expanded = !expanded),\n              })}\n            >\n              {expanded ? labels.codeCollapse : labels.codeExpand}\n              <Icon\n                {...mergePartProps<IconProps>(\n                  { icon: ChevronDown, sx: disclosureStyles.icon },\n                  propsExpandIcon,\n                  { sx: expanded && codeBlockStyles.expandOpen },\n                )}\n              />\n            </ButtonBase>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"CodeBlock.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/base/CodeBlock.tsx"],"sourcesContent":["/**\n * 代码块（pre > code）。高亮器经配置注入（createUi / Provider 的 highlighter，见 config/context.ts），\n * 本组件不依赖 Shiki：没有高亮器、或没给语言时显示纯文本。\n *\n *   <CodeBlock code={source} lang=\"ts\" />\n *   <CodeBlock code={source} lang=\"ts\" title=\"main.ts\" lineNumbers highlightLines=\"2,4-5\" maxLines={20} />\n *\n * - 高亮是异步的：先显示纯文本，结果到了再替换；等宽字体下两者排版相同，布局不跳动。\n * - 长行在 ScrollArea 里横向滚动：浮层滚动条不占高度；滚动区域可聚焦（带焦点环），键盘也能滚动。\n * - 复制按钮（CopyButton）在右上角，有标题时放在标题栏里；复制成功后经 aria-live 播报“已复制”。\n * - 行号、行高亮、新增与删除的行：按行渲染（高亮结果按 <br> 拆行；代码里的 < 都已转义，拆分是安全的）；\n *   都不用时整段写进 innerHTML，不为每行建节点。行号不可选中，复制的是 code 本身。\n * - 长代码：maxLines 之外折叠，底部的按钮展开或收起。\n */\nimport { ChevronDown } from '@lucide/icons';\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 { useConfig, useLang } from '../config/context';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { disclosureStyles } from '../utils/style/transitions';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport { ButtonBase, type ButtonBaseProps } from './ButtonBase';\nimport { CopyButton, type CopyButtonProps } from './CopyButton';\nimport { Icon, type IconProps } from './Icon';\nimport { t } from '../config/theme/tokens';\n\n/** 行号的写法：`'1,3-5'` 或 `[1, 3, 4, 5]`（从 1 开始） */\nexport type LineSpec = string | readonly number[];\n\n/** 未声明的属性落到 pre 上；原生的 title 属性（悬停提示）让给标题栏 */\nexport interface CodeBlockProps extends PartProps<'pre', 'title'> {\n  /** 代码文本 */\n  code: string;\n  /** 语言（如 ts、vue、bash），交给高亮器；不写时不高亮，高亮器不认识的语言也按纯文本显示 */\n  lang?: string;\n  /**\n   * 高亮：false 时先按纯文本显示，改成 true 时才交给高亮器。看不见的代码（收起的示例源码）可以等要显示时再高亮，\n   * 页面打开时不必一次高亮全部\n   * @default true\n   */\n  highlight?: boolean;\n  /** 标题栏：通常是文件名；有标题时复制按钮放在标题栏里 */\n  title?: VNodeChild;\n  /** 长行自动换行，而不是横向滚动 */\n  wrap?: boolean;\n  /** 显示复制按钮，默认 true */\n  copyable?: boolean;\n  /** 显示行号 */\n  lineNumbers?: boolean;\n  /** 强调的行：`'2,4-5'` */\n  highlightLines?: LineSpec;\n  /** 新增的行（diff）：绿色底 */\n  addedLines?: LineSpec;\n  /** 删除的行（diff）：红色底 */\n  removedLines?: LineSpec;\n  /** 超过这么多行时折叠，底部的按钮展开；不写时不折叠 */\n  maxLines?: number;\n  /** 内层 code 元素的部件属性 */\n  propsCode?: PartProps<'code'>;\n  /** 外层（包着标题栏、pre 与复制按钮的 div）的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 标题栏的部件属性 */\n  propsHeader?: PartProps<'div'>;\n  /** 标题栏里标题文字的部件属性 */\n  propsTitle?: PartProps<'span'>;\n  /** 代码区（包着滚动区域与右上角复制按钮的 div）的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 按行渲染时每一行的部件属性 */\n  propsLine?: PartProps<'span'>;\n  /** 每行行号的部件属性 */\n  propsLineNumber?: PartProps<'span', 'aria-hidden'>;\n  /** 复制按钮的部件属性 */\n  propsCopy?: Partial<CopyButtonProps>;\n  /** 横向滚动区域（ScrollArea）的部件属性 */\n  propsScroll?: Partial<ScrollAreaProps>;\n  /** 展开、收起长代码的按钮的部件属性 */\n  propsExpand?: Partial<ButtonBaseProps>;\n  /** 展开按钮里箭头图标的部件属性；展开后的翻转由组件管理 */\n  propsExpandIcon?: Partial<IconProps>;\n}\n\n/** `'1,3-5'` → Set{1, 3, 4, 5}；数组原样收进集合 */\nexport function parseLineSpec(spec: LineSpec | undefined): Set<number> {\n  if (spec == null) return new Set();\n  if (typeof spec !== 'string') return new Set(spec);\n  const lines = new Set<number>();\n  for (const part of spec.split(',')) {\n    const [from, to = from] = part.split('-').map((text) => Number(text.trim()));\n    if (!Number.isInteger(from) || !Number.isInteger(to)) continue;\n    for (let line = from!; line <= to!; line++) lines.add(line);\n  }\n  return lines;\n}\n\n/** CodeBlock 的样式 */\nexport const codeBlockStyles = css.create({\n  // minWidth: 0：放在 grid / flex 里时外层不被最长的一行代码撑宽（滚动的是里面的 pre）\n  wrapper: {\n    minWidth: 0,\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    overflow: 'hidden',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    paddingInlineStart: '_lg',\n    paddingInlineEnd: '_xs',\n    borderBottomWidth: '_xs',\n    borderBottomStyle: 'solid',\n    borderBottomColor: '_borderMuted',\n    backgroundColor: '_surfaceMuted',\n    color: '_textMuted',\n    fontFamily: '_mono',\n    fontSize: '0.85em',\n  },\n  title: {\n    flexGrow: 1,\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  body: { position: 'relative' },\n  // 给复制按钮留出位置，第一行的末尾不被盖住\n  withCopy: {\n    paddingInlineEnd: `calc(${t.space.md} + max(${t.sizes.control}, ${t.sizes.minTarget}))`,\n  },\n  copy: { position: 'absolute', top: '_space.xs', insetInlineEnd: '_space.xs' },\n  root: {\n    boxSizing: 'border-box',\n    margin: 0,\n    paddingBlock: '_md',\n    paddingInline: '_lg',\n    color: '_text',\n    fontFamily: '_mono',\n    // 代码总是从左到右排：从右到左的页面里也不跟着镜像\n    direction: 'ltr',\n    // 代码字体的连字（=> 显示成 ⇒）会让照着抄的人看错，一律关掉\n    fontVariantLigatures: 'none',\n    // 相对周围文字略小：等宽字体的字面显得大；是比例不是字号档位\n    fontSize: '0.9em',\n    lineHeight: '_normal',\n    tabSize: 2,\n  },\n  collapsed: { overflowY: 'hidden' },\n  wrap: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' },\n  // 继承 pre 的字体：浏览器默认给 code 设了 monospace 字号缩放\n  code: { fontFamily: 'inherit', fontSize: 'inherit' },\n  // 按行渲染时：code 至少与 pre 一样宽，行的底色铺满横向滚动的整行\n  lines: { display: 'inline-block', minWidth: '100%' },\n  line: {\n    display: 'block',\n    minHeight: '1lh',\n    marginInline: `calc(-1 * ${t.space.lg})`,\n    paddingInline: '_lg',\n  },\n  highlighted: { backgroundColor: '_fill' },\n  added: { backgroundColor: '_codeInserted' },\n  removed: { backgroundColor: '_codeDeleted' },\n  lineNumber: {\n    display: 'inline-block',\n    minWidth: '2ch',\n    marginInlineEnd: '_lg',\n    color: '_codeComment',\n    textAlign: 'end',\n    userSelect: 'none',\n  },\n  expand: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_xs',\n    width: '_full',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    borderTopWidth: '_xs',\n    borderTopStyle: 'solid',\n    borderTopColor: '_borderMuted',\n    backgroundColor: { default: '_surfaceMuted', ':hover': '_fill' },\n    color: '_textMuted',\n    fontSize: '_sm',\n  },\n  expandOpen: { rotate: '180deg' },\n});\n\n/** 按行拆开；结尾的换行不算新的一行（文件末尾通常有一个），不然行号会多出一行空的 */\nfunction splitLines(text: string, separator: string): string[] {\n  const lines = text.split(separator);\n  if (lines.length > 1 && lines.at(-1) === '') lines.pop();\n  return lines;\n}\n\n// 折叠后的高度按行数算，是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** CodeBlock 的动态样式：折叠后的最大高度 */\nexport const codeBlockDynamicStyles = css.create({\n  maxLines: (lines: number) => ({ maxHeight: `calc(${lines} * 1lh + 2 * 0.75em)` }),\n});\n\n/** 代码块：高亮、复制、标题栏、行号、行高亮、diff、长代码折叠 */\nexport const CodeBlock = _component(\n  ({\n    code,\n    lang,\n    highlight = true,\n    title,\n    wrap = false,\n    copyable = true,\n    lineNumbers = false,\n    highlightLines,\n    addedLines,\n    removedLines,\n    maxLines,\n    propsCode,\n    propsRoot,\n    propsHeader,\n    propsTitle,\n    propsBody,\n    propsLine,\n    propsLineNumber,\n    propsCopy,\n    propsScroll,\n    propsExpand,\n    propsExpandIcon,\n    ...rest\n  }: CodeBlockProps) => {\n    const config = useConfig();\n    const labels = useLang();\n    // 当前代码的高亮结果；代码或语言变了先清空，回到纯文本\n    let html = _state.raw<string | null>(null);\n    let expanded = _state(false);\n\n    _effect(() => {\n      const highlighter = config.highlighter;\n      html = null;\n      if (!highlighter || !lang || !highlight) return;\n      let stale = false;\n      highlighter(code, lang).then(\n        (result) => {\n          if (!stale) html = result;\n        },\n        (error: unknown) => console.error(`CodeBlock 高亮 ${lang} 代码失败，显示纯文本`, error),\n      );\n      return () => (stale = true);\n    });\n\n    const marks = _derived.by(() => ({\n      highlighted: parseLineSpec(highlightLines),\n      added: parseLineSpec(addedLines),\n      removed: parseLineSpec(removedLines),\n    }));\n    const lineCount = _derived(splitLines(code, '\\n').length);\n    const byLine = _derived(\n      lineNumbers || marks.highlighted.size + marks.added.size + marks.removed.size > 0,\n    );\n\n    /** 按行渲染：高亮结果按 <br> 拆，纯文本按换行拆 */\n    function renderLines() {\n      const lines = html == null ? splitLines(code, '\\n') : splitLines(html, '<br>');\n      return lines.map((line, index) => {\n        const number = index + 1;\n        return (\n          <span\n            key={number}\n            {...mergeAttrs<'span'>(\n              {\n                sx: [\n                  codeBlockStyles.line,\n                  marks.highlighted.has(number) && codeBlockStyles.highlighted,\n                  marks.added.has(number) && codeBlockStyles.added,\n                  marks.removed.has(number) && codeBlockStyles.removed,\n                ],\n              },\n              propsLine,\n            )}\n            data-diff={\n              marks.added.has(number) ? 'added' : marks.removed.has(number) ? 'removed' : undefined\n            }\n          >\n            {lineNumbers && (\n              <span\n                {...mergeAttrs<'span'>({ sx: codeBlockStyles.lineNumber }, propsLineNumber, {\n                  'aria-hidden': 'true',\n                })}\n              >\n                {number}\n              </span>\n            )}\n            {html == null ? line : <span innerHTML={line} />}\n          </span>\n        );\n      });\n    }\n\n    return () => {\n      const collapsible = maxLines != null && lineCount > maxLines;\n      const collapsed = collapsible && !expanded;\n      const codeProps = mergeAttrs<'code'>(\n        { sx: [codeBlockStyles.code, byLine && codeBlockStyles.lines] },\n        propsCode,\n      );\n      const copyButton = (inHeader: boolean) => (\n        <CopyButton\n          {...mergePartProps<CopyButtonProps>(\n            { sx: !inHeader && codeBlockStyles.copy, size: 'sm', tone: 'neutral', value: code },\n            propsCopy,\n          )}\n        />\n      );\n      return (\n        <div {...mergeAttrs<'div'>({ sx: codeBlockStyles.wrapper }, propsRoot)}>\n          {hasContent(title) && (\n            <div {...mergeAttrs<'div'>({ sx: codeBlockStyles.header }, propsHeader)}>\n              <span {...mergeAttrs<'span'>({ sx: codeBlockStyles.title }, propsTitle)}>\n                {title}\n              </span>\n              {copyable && copyButton(true)}\n            </div>\n          )}\n          <div {...mergeAttrs<'div'>({ sx: codeBlockStyles.body }, propsBody)}>\n            <ScrollArea axis=\"x\" {...mergePartProps<ScrollAreaProps>({}, propsScroll)}>\n              <pre\n                {...mergeAttrs<'pre'>(\n                  {\n                    sx: [\n                      codeBlockStyles.root,\n                      copyable && title == null && codeBlockStyles.withCopy,\n                    ],\n                  },\n                  rest,\n                  {\n                    sx: [\n                      wrap && codeBlockStyles.wrap,\n                      collapsed && [\n                        codeBlockStyles.collapsed,\n                        codeBlockDynamicStyles.maxLines(maxLines!),\n                      ],\n                    ],\n                  },\n                )}\n                data-lang={lang}\n              >\n                {byLine ? (\n                  <code {...codeProps}>{renderLines()}</code>\n                ) : html == null ? (\n                  <code {...codeProps}>{code}</code>\n                ) : (\n                  <code {...codeProps} innerHTML={html} />\n                )}\n              </pre>\n            </ScrollArea>\n            {copyable && title == null && copyButton(false)}\n          </div>\n          {collapsible && (\n            <ButtonBase\n              {...mergePartProps<ButtonBaseProps>({ sx: codeBlockStyles.expand }, propsExpand, {\n                'aria-expanded': expanded,\n                onClick: () => (expanded = !expanded),\n              })}\n            >\n              {expanded ? labels.codeCollapse : labels.codeExpand}\n              <Icon\n                {...mergePartProps<IconProps>(\n                  { icon: ChevronDown, sx: disclosureStyles.icon },\n                  propsExpandIcon,\n                  { sx: expanded && codeBlockStyles.expandOpen },\n                )}\n              />\n            </ButtonBase>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/base/CopyButton.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 ButtonOptions } from './button-core';
 import type { IconProps } from './Icon';

package/dist/base/CopyButton.js

@@ -5,7 +5,7 @@ import { announce } from "../utils/dom/announcer.js";
 import { useClipboard } from "../utils/dom/clipboard.js";
 import { createVNode, ref } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps, untrack } 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 { Check, Copy } from "@lucide/icons";
 //#region src/base/CopyButton.tsx
 /**

package/dist/base/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.js","names":["_vtp_readonlyProp","_vtp_restProps","_vtp_untrack","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/base/CopyButton.tsx"],"sourcesContent":["/**\n * 复制按钮（button）：点击把 value 复制到剪贴板，图标换成对勾（缩放弹出），读屏播报“已复制”，几秒后复原。\n * 外观同 IconButton（button-core.ts），默认 ghost 样式。\n *\n *   <CopyButton value={apiKey} />\n *   <CopyButton value={() => editor.getText()} aria-label=\"复制全文\" />\n *   <CopyButton value={() => fetchSnippet(id)} />   点击时才取（返回 Promise）\n */\nimport { Check, Copy } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useLang } from '../config/context';\nimport { announce } from '../utils/dom/announcer';\nimport { useClipboard } from '../utils/dom/clipboard';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  buttonContent,\n  buttonPart,\n  buttonSx,\n  useButtonAppearance,\n  useButtonBehavior,\n  type ButtonOptions,\n} from './button-core';\nimport type { IconProps } from './Icon';\n\n/** 不可用、忙碌由组件管理；value 是要复制的文字（不是原生 value） */\nexport type CopyButtonManaged = 'disabled' | 'aria-disabled' | 'aria-busy' | 'value' | 'type';\n\n/** 未声明的属性落到 button 上 */\nexport interface CopyButtonProps\n  extends PartProps<'button', CopyButtonManaged>, Omit<ButtonOptions, 'loading' | 'propsSpinner'> {\n  /**\n   * 要复制的文字；给函数时点击时才取值，可以返回 Promise（内容按需加载，等待时按钮转圈）。\n   * 返回字符串时同步写入剪贴板；Safari 只认点击当下的写入，异步内容最好提前加载好\n   */\n  value: string | (() => string | Promise<string>);\n  /** 按钮的无障碍名称，默认取语言包（复制） */\n  'aria-label'?: string;\n  /** 对勾保持多久（毫秒）后复原，默认 2000 */\n  timeout?: number;\n  /**\n   * 样式：默认不带底色\n   * @default 'ghost'\n   */\n  variant?: ButtonOptions['variant'];\n  /**\n   * 色调：默认中性色\n   * @default 'neutral'\n   */\n  tone?: ButtonOptions['tone'];\n  /** 不可用 */\n  disabled?: boolean;\n  /** 复制完成后调用：是否成功，失败时还有原因（不安全的上下文、用户拒绝权限、取值出错） */\n  onCopied?: (success: boolean, error?: unknown) => void;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n}\n\nconst pop = css.keyframes({ from: { transform: 'scale(0.5)', opacity: 0 } });\n\n/** CopyButton 的样式：copied（对勾弹出；减少动态效果时时长为 0） */\nexport const copyButtonStyles = css.create({\n  copied: {\n    animationName: pop,\n    animationDuration: '_durations.md',\n    animationTimingFunction: '_easings.enter',\n  },\n});\n\n/** 复制按钮：复制后显示对勾并播报 */\nexport const CopyButton = _component(\n  ({\n    value,\n    'aria-label': label,\n    timeout,\n    variant,\n    tone,\n    size,\n    radius,\n    ripple,\n    disabled = false,\n    onCopied,\n    propsIcon,\n    ...rest\n  }: CopyButtonProps) => {\n    const lang = useLang();\n    const clipboard = useClipboard({ timeout: _untrack(timeout) });\n    // 异步取值时转圈、忽略重复点击\n    let pending = _state(false);\n    const appearance = useButtonAppearance(\n      () => ({ variant, tone, size, radius }),\n      'ghost',\n      // 只有图标的按钮多是工具栏、卡片角上的次要操作：默认中性色，一排图标不会满屏品牌色\n      'neutral',\n    );\n    const behavior = useButtonBehavior(\n      () => ({ disabled, loading: pending, ripple }),\n      () => () => void copy(),\n    );\n\n    // 点击处理里不等它：取值出错也在这里收住，经 onCopied 告诉使用方，不留下没人处理的 rejection\n    async function copy() {\n      let success = false;\n      let error: unknown;\n      try {\n        const text = typeof value === 'function' ? value() : value;\n        pending = typeof text !== 'string';\n        // 字符串在点击当下就写入（不先 await），Safari 才认\n        success = await clipboard.copy(typeof text === 'string' ? text : await text);\n        error = clipboard.error;\n      } catch (reason) {\n        error = reason;\n      } finally {\n        pending = false;\n      }\n      if (success) {\n        // 经共用的播报区念“已复制”：按钮里的 aria-live 区域各家读屏念不念不一定\n        announce(lang.copied);\n        onCopied?.(true);\n      } else onCopied?.(false, error);\n    }\n\n    return () => (\n      <button\n        {...mergeAttrs<'button'>(\n          {\n            ...buttonPart,\n            sx: buttonSx(appearance(), { disabled, square: true }),\n            'aria-label': label ?? lang.copy,\n          },\n          rest,\n          { ...behavior(), type: 'button' },\n        )}\n        data-state={clipboard.copied ? 'copied' : 'idle'}\n      >\n        {buttonContent(\n          {\n            icon: clipboard.copied ? Check : Copy,\n            // 换图标时换一个元素，弹出动画才会重播\n            propsIcon: mergePartProps<Partial<IconProps>>(propsIcon ?? {}, {\n              key: clipboard.copied ? 'copied' : 'copy',\n              sx: clipboard.copied && copyButtonStyles.copied,\n            }),\n          },\n          { loading: pending },\n        )}\n      </button>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0DA,IAAM,MAAM,IAAI,UAAU,EAAE,MAAM;CAAE,WAAW;CAAc,SAAS;AAAE,EAAE,CAAC;;AAG3E,IAAa,mBAAmB,IAAI,OAAO,EACzC,QAAQ;CACN,eAAe;CACf,mBAAmB;CACnB,yBAAyB;AAC3B,EACF,CAAC;;AAGD,IAAa,aAAa,0BACxB,QAAA,SAauB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAJV,KAAK;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAGb,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,aAAa,EAAE,SAAOC,cAAA,QAAA,KAAA,EAAoB,CAAC;CAE7D,IAAI,UAAOC,IAAU,KAAK;CAC1B,MAAM,aAAa,2BACV;EAAE,SAAO,QAAA;EAAE,MAAI,KAAA;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;CAAC,IACrC,SAEA,SACF;CACA,MAAM,WAAW,yBACR;EAAE,UAAQ,SAAA;EAAE,SAAO,QAAA;EAAW,QAAM,OAAA;CAAC,gBAChC,KAAK,KAAK,CACxB;CAGA,eAAe,OAAO;EACpB,IAAI,UAAU;EACd,IAAI;EACJ,IAAI;GACF,MAAM,OAAO,OAAA,MAAA,UAAiB,aAAa,MAAA,MAAM,IAAC,MAAA;GAClD,QAAA,QAAU,OAAO,SAAS;GAE1B,UAAU,MAAM,UAAU,KAAK,OAAO,SAAS,WAAW,OAAO,MAAM,IAAI;GAC3E,QAAQ,UAAU;EACpB,SAAS,QAAQ;GACf,QAAQ;EACV,UAAU;GACR,QAAA,QAAU;EACZ;EACA,IAAI,SAAS;GAEX,SAAS,KAAK,MAAM;GACpB,SAAA,QAAW,IAAI;EACjB,OAAO,SAAA,QAAW,OAAO,KAAK;CAChC;CAEA,aAAOC,YAAA,UAAAC,cAEC,WACF;EACE,GAAG;EACH,IAAI,SAAS,WAAW,GAAG;GAAE,UAAQ,SAAA;GAAE,QAAQ;EAAK,CAAC;EACrD,cAAc,MAAA,SAAS,KAAK;CAC9B,GACA,MACA;EAAE,GAAG,SAAS;EAAG,MAAM;CAAS,CAClC,GAAC,EAAA,cACW,UAAU,SAAS,WAAW,OAAM,CAAA,GAAA,CAE/C,cACC;EACE,MAAM,UAAU,SAAS,QAAQ;EAEjC,WAAW,eAAmC,UAAA,SAAa,CAAC,GAAG;GAC7D,KAAK,UAAU,SAAS,WAAW;GACnC,IAAI,UAAU,UAAU,iBAAiB;EAC3C,CAAC;CACH,GACA,EAAE,SAAO,QAAA,MAAU,CACrB,CAAC,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"CopyButton.js","names":["_vtp_readonlyProp","_vtp_restProps","_vtp_untrack","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/base/CopyButton.tsx"],"sourcesContent":["/**\n * 复制按钮（button）：点击把 value 复制到剪贴板，图标换成对勾（缩放弹出），读屏播报“已复制”，几秒后复原。\n * 外观同 IconButton（button-core.ts），默认 ghost 样式。\n *\n *   <CopyButton value={apiKey} />\n *   <CopyButton value={() => editor.getText()} aria-label=\"复制全文\" />\n *   <CopyButton value={() => fetchSnippet(id)} />   点击时才取（返回 Promise）\n */\nimport { Check, Copy } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useLang } from '../config/context';\nimport { announce } from '../utils/dom/announcer';\nimport { useClipboard } from '../utils/dom/clipboard';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  buttonContent,\n  buttonPart,\n  buttonSx,\n  useButtonAppearance,\n  useButtonBehavior,\n  type ButtonOptions,\n} from './button-core';\nimport type { IconProps } from './Icon';\n\n/** 不可用、忙碌由组件管理；value 是要复制的文字（不是原生 value） */\nexport type CopyButtonManaged = 'disabled' | 'aria-disabled' | 'aria-busy' | 'value' | 'type';\n\n/** 未声明的属性落到 button 上 */\nexport interface CopyButtonProps\n  extends PartProps<'button', CopyButtonManaged>, Omit<ButtonOptions, 'loading' | 'propsSpinner'> {\n  /**\n   * 要复制的文字；给函数时点击时才取值，可以返回 Promise（内容按需加载，等待时按钮转圈）。\n   * 返回字符串时同步写入剪贴板；Safari 只认点击当下的写入，异步内容最好提前加载好\n   */\n  value: string | (() => string | Promise<string>);\n  /** 按钮的无障碍名称，默认取语言包（复制） */\n  'aria-label'?: string;\n  /** 对勾保持多久（毫秒）后复原，默认 2000 */\n  timeout?: number;\n  /**\n   * 样式：默认不带底色\n   * @default 'ghost'\n   */\n  variant?: ButtonOptions['variant'];\n  /**\n   * 色调：默认中性色\n   * @default 'neutral'\n   */\n  tone?: ButtonOptions['tone'];\n  /** 不可用 */\n  disabled?: boolean;\n  /** 复制完成后调用：是否成功，失败时还有原因（不安全的上下文、用户拒绝权限、取值出错） */\n  onCopied?: (success: boolean, error?: unknown) => void;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n}\n\nconst pop = css.keyframes({ from: { transform: 'scale(0.5)', opacity: 0 } });\n\n/** CopyButton 的样式：copied（对勾弹出；减少动态效果时时长为 0） */\nexport const copyButtonStyles = css.create({\n  copied: {\n    animationName: pop,\n    animationDuration: '_durations.md',\n    animationTimingFunction: '_easings.enter',\n  },\n});\n\n/** 复制按钮：复制后显示对勾并播报 */\nexport const CopyButton = _component(\n  ({\n    value,\n    'aria-label': label,\n    timeout,\n    variant,\n    tone,\n    size,\n    radius,\n    ripple,\n    disabled = false,\n    onCopied,\n    propsIcon,\n    ...rest\n  }: CopyButtonProps) => {\n    const lang = useLang();\n    const clipboard = useClipboard({ timeout: _untrack(timeout) });\n    // 异步取值时转圈、忽略重复点击\n    let pending = _state(false);\n    const appearance = useButtonAppearance(\n      () => ({ variant, tone, size, radius }),\n      'ghost',\n      // 只有图标的按钮多是工具栏、卡片角上的次要操作：默认中性色，一排图标不会满屏品牌色\n      'neutral',\n    );\n    const behavior = useButtonBehavior(\n      () => ({ disabled, loading: pending, ripple }),\n      () => () => void copy(),\n    );\n\n    // 点击处理里不等它：取值出错也在这里收住，经 onCopied 告诉使用方，不留下没人处理的 rejection\n    async function copy() {\n      let success = false;\n      let error: unknown;\n      try {\n        const text = typeof value === 'function' ? value() : value;\n        pending = typeof text !== 'string';\n        // 字符串在点击当下就写入（不先 await），Safari 才认\n        success = await clipboard.copy(typeof text === 'string' ? text : await text);\n        error = clipboard.error;\n      } catch (reason) {\n        error = reason;\n      } finally {\n        pending = false;\n      }\n      if (success) {\n        // 经共用的播报区念“已复制”：按钮里的 aria-live 区域各家读屏念不念不一定\n        announce(lang.copied);\n        onCopied?.(true);\n      } else onCopied?.(false, error);\n    }\n\n    return () => (\n      <button\n        {...mergeAttrs<'button'>(\n          {\n            ...buttonPart,\n            sx: buttonSx(appearance(), { disabled, square: true }),\n            'aria-label': label ?? lang.copy,\n          },\n          rest,\n          { ...behavior(), type: 'button' },\n        )}\n        data-state={clipboard.copied ? 'copied' : 'idle'}\n      >\n        {buttonContent(\n          {\n            icon: clipboard.copied ? Check : Copy,\n            // 换图标时换一个元素，弹出动画才会重播\n            propsIcon: mergePartProps<Partial<IconProps>>(propsIcon ?? {}, {\n              key: clipboard.copied ? 'copied' : 'copy',\n              sx: clipboard.copied && copyButtonStyles.copied,\n            }),\n          },\n          { loading: pending },\n        )}\n      </button>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0DA,IAAM,MAAM,IAAI,UAAU,EAAE,MAAM;CAAE,WAAW;CAAc,SAAS;AAAE,EAAE,CAAC;;AAG3E,IAAa,mBAAmB,IAAI,OAAO,EACzC,QAAQ;CACN,eAAe;CACf,mBAAmB;CACnB,yBAAyB;AAC3B,EACF,CAAC;;AAGD,IAAa,aAAa,0BACxB,QAAA,SAauB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAJV,KAAK;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAGb,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,aAAa,EAAE,SAAOC,cAAA,QAAA,KAAA,EAAoB,CAAC;CAE7D,IAAI,UAAOC,IAAU,KAAK;CAC1B,MAAM,aAAa,2BACV;EAAE,SAAO,QAAA;EAAE,MAAI,KAAA;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;CAAC,IACrC,SAEA,SACF;CACA,MAAM,WAAW,yBACR;EAAE,UAAQ,SAAA;EAAE,SAAO,QAAA;EAAW,QAAM,OAAA;CAAC,gBAChC,KAAK,KAAK,CACxB;CAGA,eAAe,OAAO;EACpB,IAAI,UAAU;EACd,IAAI;EACJ,IAAI;GACF,MAAM,OAAO,OAAA,MAAA,UAAiB,aAAa,MAAA,MAAM,IAAC,MAAA;GAClD,QAAA,QAAU,OAAO,SAAS;GAE1B,UAAU,MAAM,UAAU,KAAK,OAAO,SAAS,WAAW,OAAO,MAAM,IAAI;GAC3E,QAAQ,UAAU;EACpB,SAAS,QAAQ;GACf,QAAQ;EACV,UAAU;GACR,QAAA,QAAU;EACZ;EACA,IAAI,SAAS;GAEX,SAAS,KAAK,MAAM;GACpB,SAAA,QAAW,IAAI;EACjB,OAAO,SAAA,QAAW,OAAO,KAAK;CAChC;CAEA,aAAOC,YAAA,UAAAC,cAEC,WACF;EACE,GAAG;EACH,IAAI,SAAS,WAAW,GAAG;GAAE,UAAQ,SAAA;GAAE,QAAQ;EAAK,CAAC;EACrD,cAAc,MAAA,SAAS,KAAK;CAC9B,GACA,MACA;EAAE,GAAG,SAAS;EAAG,MAAM;CAAS,CAClC,GAAC,EAAA,cACW,UAAU,SAAS,WAAW,OAAM,CAAA,GAAA,CAE/C,cACC;EACE,MAAM,UAAU,SAAS,QAAQ;EAEjC,WAAW,eAAmC,UAAA,SAAa,CAAC,GAAG;GAC7D,KAAK,UAAU,SAAS,WAAW;GACnC,IAAI,UAAU,UAAU,iBAAiB;EAC3C,CAAC;CACH,GACA,EAAE,SAAO,QAAA,MAAU,CACrB,CAAC,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/base/Heading.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 FontSize, type FontWeight, type TextAlign, type TextWrap, type Tone } from '../utils/style/typography';

package/dist/base/Heading.js

@@ -8,7 +8,7 @@ import { headingMarker } from "../utils/style/markers.js";
 import { layoutVars } from "../utils/style/vars.js";
 import { createVNode, unref } 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";
 import { Hash } from "@lucide/icons";
 //#region src/base/Heading.tsx
 /**

package/dist/base/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_vue_unref"],"sources":["../../src/base/Heading.tsx"],"sourcesContent":["/**\n * 标题：H1–H6 各是一个组件（语义不同的元素分成不同组件，不靠 prop 切换标签），默认字号各不相同，\n * 样式与逻辑由同一个工厂生成。size 可以单独改：视觉层级与文档结构分开。\n * 紧凑行高、text-wrap: balance（各行长度均衡），大字号略收紧字间距；去掉浏览器默认的外边距，间距交给布局。\n *\n *   <H1>订单详情</H1>\n *   <H2 size=\"lg\">收货地址</H2>\n *   <H2 id=\"install\" anchor>安装</H2>   末尾带指向本节的锚点链接（悬停或聚焦时显示）\n *\n * 级别要连续，不要为了字号跳级（字号用 size 改）。\n */\nimport { Hash } from '@lucide/icons';\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 { useLang } from '../config/context';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { space, t } from '../config/theme/tokens';\nimport { headingMarker } from '../utils/style/markers';\nimport { layoutVars } from '../utils/style/vars';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { Icon } from './Icon';\nimport {\n  fontSizeStyles,\n  fontWeightStyles,\n  lineClampStyles,\n  textAlignStyles,\n  textStyles,\n  textWrapStyles,\n  toneStyles,\n  type FontSize,\n  type FontWeight,\n  type TextAlign,\n  type TextWrap,\n  type Tone,\n} from '../utils/style/typography';\n\n/** 标题组件可用的标签 */\nexport type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n/** 未声明的属性落到 h1–h6 元素上 */\nexport interface HeadingProps extends PartProps<HeadingTag> {\n  /** 字号档位，不写时按级别：H1 xxxl、H2 xxl、H3 xl、H4 lg、H5–H6 md */\n  size?: FontSize;\n  /** 字重，默认 semibold */\n  weight?: FontWeight;\n  /** 色调，不写时继承 */\n  tone?: Tone;\n  /** 水平对齐，不写时继承 */\n  align?: TextAlign;\n  /** 单行省略 */\n  truncate?: boolean;\n  /** 最多显示几行，超出的省略（同 Text） */\n  lineClamp?: number;\n  /** 换行方式，默认 balance（各行长度均衡）；同 Text 的 wrap */\n  wrap?: TextWrap;\n  /** 有 id 时在末尾放一个指向本节的锚点链接（#），悬停或聚焦时显示：文档里方便复制本节的链接 */\n  anchor?: boolean;\n  /** 锚点链接的部件属性 */\n  propsAnchor?: PartProps<'a'>;\n  children?: VNodeChild;\n}\n\n/** H1–H6 的样式：root、xxl、xxxl */\nexport const headingStyles = css.create({\n  // 字体取 fonts.heading：默认同正文，纸张主题换成衬线\n  root: {\n    margin: 0,\n    fontFamily: '_heading',\n    lineHeight: '_tight',\n    textWrap: 'balance',\n    // 锚点跳转（#install）后让开粘性顶栏，再留一点空\n    scrollMarginBlockStart: `calc(${layoutVars.stickyOffset} + ${space.lg})`,\n  },\n  // 大字号的字形间距显得松，略收紧\n  xxl: { letterSpacing: '_tight' },\n  xxxl: { letterSpacing: '_tighter' },\n  anchor: {\n    display: 'inline-flex',\n    verticalAlign: 'middle',\n    marginInlineStart: '_xs',\n    borderRadius: '_xs',\n    color: { default: '_textMuted', ':hover': '_accentText' },\n    fontSize: '0.75em',\n    textDecoration: 'none',\n    opacity: {\n      default: 0,\n      ':focus-visible': 1,\n      [css.when.ancestor(':hover', headingMarker)]: 1,\n    },\n    transition: `opacity ${t.durations.sm} ${t.easings.standard}`,\n  },\n});\n\n/** 生成标题组件：标签与默认字号（H1–H6 由它生成） */\nexport function createHeading(tag: HeadingTag, defaultSize: FontSize) {\n  return _component(\n    ({\n      size = defaultSize,\n      weight = 'semibold',\n      tone,\n      align,\n      truncate = false,\n      lineClamp,\n      wrap,\n      anchor = false,\n      propsAnchor,\n      children,\n      ...rest\n    }: HeadingProps) => {\n      const lang = useLang();\n      return () => {\n        const Tag = tag;\n        const sx = [\n          headingStyles.root,\n          fontSizeStyles[size],\n          (size === 'xxl' || size === 'xxxl') && headingStyles[size],\n          fontWeightStyles[weight],\n          tone && toneStyles[tone],\n          align && textAlignStyles[align],\n          truncate && textStyles.truncate,\n          lineClamp != null && [textStyles.clamp, lineClampStyles.lines(lineClamp)],\n          wrap && textWrapStyles[wrap],\n          anchor && headingMarker,\n        ];\n        const id = rest.id;\n        return (\n          <Tag {...mergeAttrs<HeadingTag>({ sx }, rest)}>\n            {children}\n            {anchor && id && (\n              <a\n                {...mergeAttrs<'a'>(\n                  { sx: [headingStyles.anchor, focusRingStyles.visible] },\n                  propsAnchor,\n                  { href: `#${id}`, 'aria-label': lang.headingAnchor },\n                )}\n              >\n                <Icon icon={Hash} />\n              </a>\n            )}\n          </Tag>\n        );\n      };\n    },\n    { name: tag.toUpperCase() },\n  );\n}\n\n/** 页面主标题，每页一个；默认字号 xxxl（30px） */\nexport const H1 = createHeading('h1', 'xxxl');\n/** 页面里的一级分区；默认字号 xxl（24px） */\nexport const H2 = createHeading('h2', 'xxl');\n/** 分区里的小节；默认字号 xl（18px） */\nexport const H3 = createHeading('h3', 'xl');\n/** 四级标题；默认字号 lg（16px） */\nexport const H4 = createHeading('h4', 'lg');\n/** 五级标题；默认字号 md（14px） */\nexport const H5 = createHeading('h5', 'md');\n/** 六级标题；默认字号 md（14px） */\nexport const H6 = createHeading('h6', 'md');\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAa,gBAAgB,IAAI,OAAO;CAEtC,MAAM;EACJ,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,UAAU;EAEV,wBAAwB,QAAQ,WAAW,aAAY,KAAM,MAAM,GAAE;CACvE;CAEA,KAAK,EAAE,eAAe,SAAS;CAC/B,MAAM,EAAE,eAAe,WAAW;CAClC,QAAQ;EACN,SAAS;EACT,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,OAAO;GAAE,SAAS;GAAc,UAAU;EAAc;EACxD,UAAU;EACV,gBAAgB;EAChB,SAAS;GACP,SAAS;GACT,kBAAkB;IACjB,IAAI,KAAK,SAAS,UAAU,aAAa,IAAI;EAChD;EACA,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACrD;AACF,CAAC;;AAGD,SAAgB,cAAc,KAAiB,aAAuB;CACpE,OAAO,0BACL,QAAA,SAYoB;EAAA,MAAA,OAAAA,aAAA,QAAA,cAXX,WAAW;EAAA,MAAA,SAAAA,aAAA,QAAA,UACT,UAAU;EAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;EAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;EAAA,MAAA,WAAAA,aAAA,QAAA,YAGR,KAAK;EAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;EAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;EAAA,MAAA,SAAAA,aAAA,QAAA,UAGP,KAAK;EAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;EAAA,MAAA,WAAAC,aAAA,MAAA;EAAA,MAGX,OAAIC,UAAA,QAAA,MAAA,KAAA;EAEP,MAAM,OAAO,QAAQ;EACrB,aAAa;GACX,MAAM,MAAM;GACZ,MAAM,KAAK;IACT,cAAc;IACd,eAAc,KAAA;KACb,KAAA,UAAS,SAAS,KAAA,UAAS,WAAW,cAAa,KAAA;IACpD,iBAAgB,OAAA;IAChB,KAAA,SAAQ,WAAU,KAAA;IAClB,MAAA,SAAS,gBAAe,MAAA;IACxB,SAAA,SAAY,WAAW;IACvB,UAAA,SAAa,QAAQ,CAAC,WAAW,OAAO,gBAAgB,MAAK,UAAA,KAAU,CAAC;IACxE,KAAA,SAAQ,eAAc,KAAA;IACtB,OAAA,SAAU;GAAa;GAEzB,MAAM,KAAK,KAAK;GAChB,OAAAC,YAAA,KACW,WAAuB,EAAE,GAAG,GAAG,IAAI,GAAC,EAAA,eAAA,CAAAC,MAAA,QAAA,GAE1C,OAAA,SAAU,MAAED,YAAA,KAEL,WACF,EAAE,IAAI,CAAC,cAAc,QAAQ,gBAAgB,OAAO,EAAE,GAAC,YAAA,OAEvD;IAAE,MAAM,IAAI;IAAM,cAAc,KAAK;GAAc,CACrD,GAAC,CAAAA,YAAA,MAAA,EAAA,QAEW,KAAI,GAAA,IAAA,CAAA,CAAA,CAEnB,EAAA,CAAA;EAGP;CACF,GACA;EAAA,OAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;EAAA;EAAE,MAAM,IAAI,YAAY;CAAE,CAC5B;AACF;;AAGA,IAAa,KAAK,cAAc,MAAM,MAAM;;AAE5C,IAAa,KAAK,cAAc,MAAM,KAAK;;AAE3C,IAAa,KAAK,cAAc,MAAM,IAAI;;AAE1C,IAAa,KAAK,cAAc,MAAM,IAAI;;AAE1C,IAAa,KAAK,cAAc,MAAM,IAAI;;AAE1C,IAAa,KAAK,cAAc,MAAM,IAAI"}
+{"version":3,"file":"Heading.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_vue_unref"],"sources":["../../src/base/Heading.tsx"],"sourcesContent":["/**\n * 标题：H1–H6 各是一个组件（语义不同的元素分成不同组件，不靠 prop 切换标签），默认字号各不相同，\n * 样式与逻辑由同一个工厂生成。size 可以单独改：视觉层级与文档结构分开。\n * 紧凑行高、text-wrap: balance（各行长度均衡），大字号略收紧字间距；去掉浏览器默认的外边距，间距交给布局。\n *\n *   <H1>订单详情</H1>\n *   <H2 size=\"lg\">收货地址</H2>\n *   <H2 id=\"install\" anchor>安装</H2>   末尾带指向本节的锚点链接（悬停或聚焦时显示）\n *\n * 级别要连续，不要为了字号跳级（字号用 size 改）。\n */\nimport { Hash } from '@lucide/icons';\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 { useLang } from '../config/context';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { space, t } from '../config/theme/tokens';\nimport { headingMarker } from '../utils/style/markers';\nimport { layoutVars } from '../utils/style/vars';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { Icon } from './Icon';\nimport {\n  fontSizeStyles,\n  fontWeightStyles,\n  lineClampStyles,\n  textAlignStyles,\n  textStyles,\n  textWrapStyles,\n  toneStyles,\n  type FontSize,\n  type FontWeight,\n  type TextAlign,\n  type TextWrap,\n  type Tone,\n} from '../utils/style/typography';\n\n/** 标题组件可用的标签 */\nexport type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n/** 未声明的属性落到 h1–h6 元素上 */\nexport interface HeadingProps extends PartProps<HeadingTag> {\n  /** 字号档位，不写时按级别：H1 xxxl、H2 xxl、H3 xl、H4 lg、H5–H6 md */\n  size?: FontSize;\n  /** 字重，默认 semibold */\n  weight?: FontWeight;\n  /** 色调，不写时继承 */\n  tone?: Tone;\n  /** 水平对齐，不写时继承 */\n  align?: TextAlign;\n  /** 单行省略 */\n  truncate?: boolean;\n  /** 最多显示几行，超出的省略（同 Text） */\n  lineClamp?: number;\n  /** 换行方式，默认 balance（各行长度均衡）；同 Text 的 wrap */\n  wrap?: TextWrap;\n  /** 有 id 时在末尾放一个指向本节的锚点链接（#），悬停或聚焦时显示：文档里方便复制本节的链接 */\n  anchor?: boolean;\n  /** 锚点链接的部件属性 */\n  propsAnchor?: PartProps<'a'>;\n  children?: VNodeChild;\n}\n\n/** H1–H6 的样式：root、xxl、xxxl */\nexport const headingStyles = css.create({\n  // 字体取 fonts.heading：默认同正文，纸张主题换成衬线\n  root: {\n    margin: 0,\n    fontFamily: '_heading',\n    lineHeight: '_tight',\n    textWrap: 'balance',\n    // 锚点跳转（#install）后让开粘性顶栏，再留一点空\n    scrollMarginBlockStart: `calc(${layoutVars.stickyOffset} + ${space.lg})`,\n  },\n  // 大字号的字形间距显得松，略收紧\n  xxl: { letterSpacing: '_tight' },\n  xxxl: { letterSpacing: '_tighter' },\n  anchor: {\n    display: 'inline-flex',\n    verticalAlign: 'middle',\n    marginInlineStart: '_xs',\n    borderRadius: '_xs',\n    color: { default: '_textMuted', ':hover': '_accentText' },\n    fontSize: '0.75em',\n    textDecoration: 'none',\n    opacity: {\n      default: 0,\n      ':focus-visible': 1,\n      [css.when.ancestor(':hover', headingMarker)]: 1,\n    },\n    transition: `opacity ${t.durations.sm} ${t.easings.standard}`,\n  },\n});\n\n/** 生成标题组件：标签与默认字号（H1–H6 由它生成） */\nexport function createHeading(tag: HeadingTag, defaultSize: FontSize) {\n  return _component(\n    ({\n      size = defaultSize,\n      weight = 'semibold',\n      tone,\n      align,\n      truncate = false,\n      lineClamp,\n      wrap,\n      anchor = false,\n      propsAnchor,\n      children,\n      ...rest\n    }: HeadingProps) => {\n      const lang = useLang();\n      return () => {\n        const Tag = tag;\n        const sx = [\n          headingStyles.root,\n          fontSizeStyles[size],\n          (size === 'xxl' || size === 'xxxl') && headingStyles[size],\n          fontWeightStyles[weight],\n          tone && toneStyles[tone],\n          align && textAlignStyles[align],\n          truncate && textStyles.truncate,\n          lineClamp != null && [textStyles.clamp, lineClampStyles.lines(lineClamp)],\n          wrap && textWrapStyles[wrap],\n          anchor && headingMarker,\n        ];\n        const id = rest.id;\n        return (\n          <Tag {...mergeAttrs<HeadingTag>({ sx }, rest)}>\n            {children}\n            {anchor && id && (\n              <a\n                {...mergeAttrs<'a'>(\n                  { sx: [headingStyles.anchor, focusRingStyles.visible] },\n                  propsAnchor,\n                  { href: `#${id}`, 'aria-label': lang.headingAnchor },\n                )}\n              >\n                <Icon icon={Hash} />\n              </a>\n            )}\n          </Tag>\n        );\n      };\n    },\n    { name: tag.toUpperCase() },\n  );\n}\n\n/** 页面主标题，每页一个；默认字号 xxxl（30px） */\nexport const H1 = createHeading('h1', 'xxxl');\n/** 页面里的一级分区；默认字号 xxl（24px） */\nexport const H2 = createHeading('h2', 'xxl');\n/** 分区里的小节；默认字号 xl（18px） */\nexport const H3 = createHeading('h3', 'xl');\n/** 四级标题；默认字号 lg（16px） */\nexport const H4 = createHeading('h4', 'lg');\n/** 五级标题；默认字号 md（14px） */\nexport const H5 = createHeading('h5', 'md');\n/** 六级标题；默认字号 md（14px） */\nexport const H6 = createHeading('h6', 'md');\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAa,gBAAgB,IAAI,OAAO;CAEtC,MAAM;EACJ,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,UAAU;EAEV,wBAAwB,QAAQ,WAAW,aAAY,KAAM,MAAM,GAAE;CACvE;CAEA,KAAK,EAAE,eAAe,SAAS;CAC/B,MAAM,EAAE,eAAe,WAAW;CAClC,QAAQ;EACN,SAAS;EACT,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,OAAO;GAAE,SAAS;GAAc,UAAU;EAAc;EACxD,UAAU;EACV,gBAAgB;EAChB,SAAS;GACP,SAAS;GACT,kBAAkB;IACjB,IAAI,KAAK,SAAS,UAAU,aAAa,IAAI;EAChD;EACA,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACrD;AACF,CAAC;;AAGD,SAAgB,cAAc,KAAiB,aAAuB;CACpE,OAAO,0BACL,QAAA,SAYoB;EAAA,MAAA,OAAAA,aAAA,QAAA,cAXX,WAAW;EAAA,MAAA,SAAAA,aAAA,QAAA,UACT,UAAU;EAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;EAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;EAAA,MAAA,WAAAA,aAAA,QAAA,YAGR,KAAK;EAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;EAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;EAAA,MAAA,SAAAA,aAAA,QAAA,UAGP,KAAK;EAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;EAAA,MAAA,WAAAC,aAAA,MAAA;EAAA,MAGX,OAAIC,UAAA,QAAA,MAAA,KAAA;EAEP,MAAM,OAAO,QAAQ;EACrB,aAAa;GACX,MAAM,MAAM;GACZ,MAAM,KAAK;IACT,cAAc;IACd,eAAc,KAAA;KACb,KAAA,UAAS,SAAS,KAAA,UAAS,WAAW,cAAa,KAAA;IACpD,iBAAgB,OAAA;IAChB,KAAA,SAAQ,WAAU,KAAA;IAClB,MAAA,SAAS,gBAAe,MAAA;IACxB,SAAA,SAAY,WAAW;IACvB,UAAA,SAAa,QAAQ,CAAC,WAAW,OAAO,gBAAgB,MAAK,UAAA,KAAU,CAAC;IACxE,KAAA,SAAQ,eAAc,KAAA;IACtB,OAAA,SAAU;GAAa;GAEzB,MAAM,KAAK,KAAK;GAChB,OAAAC,YAAA,KACW,WAAuB,EAAE,GAAG,GAAG,IAAI,GAAC,EAAA,eAAA,CAAAC,MAAA,QAAA,GAE1C,OAAA,SAAU,MAAED,YAAA,KAEL,WACF,EAAE,IAAI,CAAC,cAAc,QAAQ,gBAAgB,OAAO,EAAE,GAAC,YAAA,OAEvD;IAAE,MAAM,IAAI;IAAM,cAAc,KAAK;GAAc,CACrD,GAAC,CAAAA,YAAA,MAAA,EAAA,QAEW,KAAI,GAAA,IAAA,CAAA,CAAA,CAEnB,EAAA,CAAA;EAGP;CACF,GACA;EAAA,OAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;EAAA;EAAE,MAAM,IAAI,YAAY;CAAE,CAC5B;AACF;;AAGA,IAAa,KAAK,cAAc,MAAM,MAAM;;AAE5C,IAAa,KAAK,cAAc,MAAM,KAAK;;AAE3C,IAAa,KAAK,cAAc,MAAM,IAAI;;AAE1C,IAAa,KAAK,cAAc,MAAM,IAAI;;AAE1C,IAAa,KAAK,cAAc,MAAM,IAAI;;AAE1C,IAAa,KAAK,cAAc,MAAM,IAAI"}

package/dist/base/Icon.d.ts

@@ -7,7 +7,7 @@
  * 自定义图标按同一格式写 `{ size?, node: [[标签, 属性, 子节点?], …] }` 即可。
  */
 import type { LucideIconData } from '@lucide/icons';
-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 TextSize, type Tone } from '../utils/style/typography';
 /** 图标数据：Lucide 的标准格式 */

package/dist/base/Icon.js

@@ -3,7 +3,7 @@ import { fontSizeStyles, toneStyles } from "../utils/style/typography.js";
 import { useAnimate } from "../utils/motion/animation.js";
 import { createVNode, onMounted, shallowRef, watch } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps, untrack } 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 { createDrawable, utils } from "animejs";
 //#region src/base/Icon.tsx
 /** 图标数据：Lucide 的标准格式 */

package/dist/base/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vtp_untrack","_createVNode","_mergeProps"],"sources":["../../src/base/Icon.tsx"],"sourcesContent":["/**\n * 图标：渲染 Lucide 格式的图标数据。使用方安装 @lucide/icons 后按名导入（可摇树）：\n *\n *   <Icon icon={Search} />                  装饰性：对读屏隐藏\n *   <Icon icon={Trash} aria-label=\"删除\" />  有名称：role=\"img\"\n *\n * 自定义图标按同一格式写 `{ size?, node: [[标签, 属性, 子节点?], …] }` 即可。\n */\nimport type { LucideIconData } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { createDrawable, utils } from 'animejs';\nimport { onMounted, watch } from 'vue';\nimport { useAnimate } from '../utils/motion/animation';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { fontSizeStyles, toneStyles, type TextSize, type Tone } from '../utils/style/typography';\n\n/** 图标数据：Lucide 的标准格式 */\nexport type IconData = LucideIconData;\n\n/** 绘制与无障碍相关的属性由组件管理 */\nexport type IconManaged =\n  | 'viewBox'\n  | 'fill'\n  | 'stroke'\n  | 'stroke-width'\n  | 'stroke-linecap'\n  | 'stroke-linejoin'\n  | 'role'\n  | 'aria-hidden';\n\n/** 未声明的属性落到 svg 上；传了 aria-label 或 aria-labelledby 才对读屏可见 */\nexport interface IconProps extends PartProps<'svg', IconManaged> {\n  /** 图标数据：`import { Search } from '@lucide/icons'` */\n  icon: IconData;\n  /** 不写时为 1em，跟随所在文字；档位对应主题字号，数字为像素 */\n  size?: TextSize | number;\n  /** 色调（状态图标：成功、警告…）；不写时跟随文字颜色 */\n  tone?: Tone;\n  /** 线宽（24 格画布上的单位），默认取主题的 strokeWidths.md */\n  strokeWidth?: number;\n  /** 从右到左排版时水平翻转：箭头、chevron 这类有方向的图标 */\n  flipInRtl?: boolean;\n  /**\n   * 描线动画（一笔画出）：挂载时为 true 就在挂载时播，之后每次由 false 变为 true 再播（Anime.js 的 createDrawable，\n   * 时长取主题，减少动态效果时直接画好）。要在挂载时就给出（true / false），不给的图标不建动画\n   */\n  draw?: boolean;\n}\n\n/** Icon 的样式：icon、flip */\nexport const iconStyles = css.create({\n  icon: {\n    width: '1em',\n    height: '1em',\n    flexShrink: 0,\n    // 与文字基线对齐\n    verticalAlign: '-0.125em',\n    // 写成 CSS 而不是 stroke-width 属性：主题能统一调整，子元素照常继承\n    strokeWidth: '_md',\n  },\n  flip: { transform: { default: null, ':dir(rtl)': 'scaleX(-1)' } },\n});\n\n/** 图标（svg）：渲染 Lucide 格式的图标数据；不传 aria-label 时是装饰性的，对读屏隐藏 */\nexport const Icon = _component(\n  ({ icon, size, tone, strokeWidth, flipInRtl = false, draw, ...rest }: IconProps) => {\n    let svg = _state.raw<SVGSVGElement | null>(null);\n    // 大多数图标不描线：不给 draw 时不建监听与动画\n    if (_untrack(draw) !== undefined)\n      useDraw(\n        () => svg,\n        () => draw === true,\n      );\n    return () => {\n      const labelled = rest['aria-label'] != null || rest['aria-labelledby'] != null;\n      return (\n        <svg\n          {...mergeAttrs<'svg'>(\n            {\n              sx: [\n                iconStyles.icon,\n                typeof size === 'string' && fontSizeStyles[size],\n                tone && toneStyles[tone],\n                flipInRtl && iconStyles.flip,\n              ],\n            },\n            rest,\n            {\n              style: {\n                fontSize: typeof size === 'number' ? `${size}px` : undefined,\n                strokeWidth,\n              },\n              viewBox: viewBox(icon),\n              fill: 'none',\n              stroke: 'currentColor',\n              'stroke-linecap': 'round',\n              'stroke-linejoin': 'round',\n              role: labelled ? 'img' : undefined,\n              'aria-hidden': labelled ? undefined : 'true',\n              ref: _toRef(svg),\n            },\n          )}\n          innerHTML={iconMarkup(icon)}\n        />\n      );\n    };\n  },\n);\n\n/** 描线：draw 变为 true（含挂载时）就从无到有画出每一笔 */\nfunction useDraw(element: () => SVGSVGElement | null, draw: () => boolean) {\n  const animate = useAnimate();\n  const play = () => {\n    const svg = element();\n    if (!svg || !draw()) return;\n    const strokes = createDrawable([...svg.children] as SVGGeometryElement[]);\n    // 先擦掉再画：挂载时在浏览器绘制前就擦掉，不会先闪一下完整的图标\n    void utils.set(strokes, { draw: '0 0' });\n    void animate(strokes, { draw: '0 1' }, { duration: 'xl', ease: 'enter', scope: svg });\n  };\n  onMounted(play);\n  watch(draw, play, { flush: 'post' });\n}\n\n/** Lucide 图标默认画在 24×24 的画布上；自定义图标可以给出自己的 size 或 width / height */\nfunction viewBox(icon: IconData) {\n  const width = icon.width ?? icon.size ?? 24;\n  const height = icon.height ?? icon.size ?? 24;\n  return `0 0 ${width} ${height}`;\n}\n\n/** Lucide 图标数据里的一个节点：[标签, 属性, 子节点] */\nexport type IconNode = IconData['node'][number];\n\nconst markupCache = new WeakMap<IconData, string>();\n\n/**\n * 图标的子元素（path、circle…）拼成的 SVG 标记，按图标数据缓存，作为 svg 的 innerHTML。\n * 不为每条路径建虚拟节点：一千个图标挂载 39ms → 19ms，按钮、菜单项、勾选框里都有图标\n */\nexport function iconMarkup(icon: IconData): string {\n  let markup = markupCache.get(icon);\n  if (markup === undefined) markupCache.set(icon, (markup = icon.node.map(nodeMarkup).join('')));\n  return markup;\n}\n\nfunction nodeMarkup([tag, attrs, children]: IconNode): string {\n  if (!/^[a-z][a-z0-9-]*$/i.test(tag)) throw new Error(`图标数据里的标签名不合法：${tag}`);\n  // 节点里的 key 是给虚拟节点用的，不是 SVG 属性\n  const attributes = Object.entries(attrs)\n    .filter(([name]) => name !== 'key')\n    .map(([name, value]) => ` ${name}=\"${escapeAttribute(String(value))}\"`)\n    .join('');\n  return `<${tag}${attributes}>${children?.map(nodeMarkup).join('') ?? ''}</${tag}>`;\n}\n\nconst escapeAttribute = (value: string) =>\n  value.replaceAll('&', '&amp;').replaceAll('\"', '&quot;').replaceAll('<', '&lt;');\n"],"mappings":"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"}
+{"version":3,"file":"Icon.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vtp_untrack","_createVNode","_mergeProps"],"sources":["../../src/base/Icon.tsx"],"sourcesContent":["/**\n * 图标：渲染 Lucide 格式的图标数据。使用方安装 @lucide/icons 后按名导入（可摇树）：\n *\n *   <Icon icon={Search} />                  装饰性：对读屏隐藏\n *   <Icon icon={Trash} aria-label=\"删除\" />  有名称：role=\"img\"\n *\n * 自定义图标按同一格式写 `{ size?, node: [[标签, 属性, 子节点?], …] }` 即可。\n */\nimport type { LucideIconData } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { createDrawable, utils } from 'animejs';\nimport { onMounted, watch } from 'vue';\nimport { useAnimate } from '../utils/motion/animation';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { fontSizeStyles, toneStyles, type TextSize, type Tone } from '../utils/style/typography';\n\n/** 图标数据：Lucide 的标准格式 */\nexport type IconData = LucideIconData;\n\n/** 绘制与无障碍相关的属性由组件管理 */\nexport type IconManaged =\n  | 'viewBox'\n  | 'fill'\n  | 'stroke'\n  | 'stroke-width'\n  | 'stroke-linecap'\n  | 'stroke-linejoin'\n  | 'role'\n  | 'aria-hidden';\n\n/** 未声明的属性落到 svg 上；传了 aria-label 或 aria-labelledby 才对读屏可见 */\nexport interface IconProps extends PartProps<'svg', IconManaged> {\n  /** 图标数据：`import { Search } from '@lucide/icons'` */\n  icon: IconData;\n  /** 不写时为 1em，跟随所在文字；档位对应主题字号，数字为像素 */\n  size?: TextSize | number;\n  /** 色调（状态图标：成功、警告…）；不写时跟随文字颜色 */\n  tone?: Tone;\n  /** 线宽（24 格画布上的单位），默认取主题的 strokeWidths.md */\n  strokeWidth?: number;\n  /** 从右到左排版时水平翻转：箭头、chevron 这类有方向的图标 */\n  flipInRtl?: boolean;\n  /**\n   * 描线动画（一笔画出）：挂载时为 true 就在挂载时播，之后每次由 false 变为 true 再播（Anime.js 的 createDrawable，\n   * 时长取主题，减少动态效果时直接画好）。要在挂载时就给出（true / false），不给的图标不建动画\n   */\n  draw?: boolean;\n}\n\n/** Icon 的样式：icon、flip */\nexport const iconStyles = css.create({\n  icon: {\n    width: '1em',\n    height: '1em',\n    flexShrink: 0,\n    // 与文字基线对齐\n    verticalAlign: '-0.125em',\n    // 写成 CSS 而不是 stroke-width 属性：主题能统一调整，子元素照常继承\n    strokeWidth: '_md',\n  },\n  flip: { transform: { default: null, ':dir(rtl)': 'scaleX(-1)' } },\n});\n\n/** 图标（svg）：渲染 Lucide 格式的图标数据；不传 aria-label 时是装饰性的，对读屏隐藏 */\nexport const Icon = _component(\n  ({ icon, size, tone, strokeWidth, flipInRtl = false, draw, ...rest }: IconProps) => {\n    let svg = _state.raw<SVGSVGElement | null>(null);\n    // 大多数图标不描线：不给 draw 时不建监听与动画\n    if (_untrack(draw) !== undefined)\n      useDraw(\n        () => svg,\n        () => draw === true,\n      );\n    return () => {\n      const labelled = rest['aria-label'] != null || rest['aria-labelledby'] != null;\n      return (\n        <svg\n          {...mergeAttrs<'svg'>(\n            {\n              sx: [\n                iconStyles.icon,\n                typeof size === 'string' && fontSizeStyles[size],\n                tone && toneStyles[tone],\n                flipInRtl && iconStyles.flip,\n              ],\n            },\n            rest,\n            {\n              style: {\n                fontSize: typeof size === 'number' ? `${size}px` : undefined,\n                strokeWidth,\n              },\n              viewBox: viewBox(icon),\n              fill: 'none',\n              stroke: 'currentColor',\n              'stroke-linecap': 'round',\n              'stroke-linejoin': 'round',\n              role: labelled ? 'img' : undefined,\n              'aria-hidden': labelled ? undefined : 'true',\n              ref: _toRef(svg),\n            },\n          )}\n          innerHTML={iconMarkup(icon)}\n        />\n      );\n    };\n  },\n);\n\n/** 描线：draw 变为 true（含挂载时）就从无到有画出每一笔 */\nfunction useDraw(element: () => SVGSVGElement | null, draw: () => boolean) {\n  const animate = useAnimate();\n  const play = () => {\n    const svg = element();\n    if (!svg || !draw()) return;\n    const strokes = createDrawable([...svg.children] as SVGGeometryElement[]);\n    // 先擦掉再画：挂载时在浏览器绘制前就擦掉，不会先闪一下完整的图标\n    void utils.set(strokes, { draw: '0 0' });\n    void animate(strokes, { draw: '0 1' }, { duration: 'xl', ease: 'enter', scope: svg });\n  };\n  onMounted(play);\n  watch(draw, play, { flush: 'post' });\n}\n\n/** Lucide 图标默认画在 24×24 的画布上；自定义图标可以给出自己的 size 或 width / height */\nfunction viewBox(icon: IconData) {\n  const width = icon.width ?? icon.size ?? 24;\n  const height = icon.height ?? icon.size ?? 24;\n  return `0 0 ${width} ${height}`;\n}\n\n/** Lucide 图标数据里的一个节点：[标签, 属性, 子节点] */\nexport type IconNode = IconData['node'][number];\n\nconst markupCache = new WeakMap<IconData, string>();\n\n/**\n * 图标的子元素（path、circle…）拼成的 SVG 标记，按图标数据缓存，作为 svg 的 innerHTML。\n * 不为每条路径建虚拟节点：一千个图标挂载 39ms → 19ms，按钮、菜单项、勾选框里都有图标\n */\nexport function iconMarkup(icon: IconData): string {\n  let markup = markupCache.get(icon);\n  if (markup === undefined) markupCache.set(icon, (markup = icon.node.map(nodeMarkup).join('')));\n  return markup;\n}\n\nfunction nodeMarkup([tag, attrs, children]: IconNode): string {\n  if (!/^[a-z][a-z0-9-]*$/i.test(tag)) throw new Error(`图标数据里的标签名不合法：${tag}`);\n  // 节点里的 key 是给虚拟节点用的，不是 SVG 属性\n  const attributes = Object.entries(attrs)\n    .filter(([name]) => name !== 'key')\n    .map(([name, value]) => ` ${name}=\"${escapeAttribute(String(value))}\"`)\n    .join('');\n  return `<${tag}${attributes}>${children?.map(nodeMarkup).join('') ?? ''}</${tag}>`;\n}\n\nconst escapeAttribute = (value: string) =>\n  value.replaceAll('&', '&amp;').replaceAll('\"', '&quot;').replaceAll('<', '&lt;');\n"],"mappings":"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"}

package/dist/base/Indicator.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 StatusTone } from '../utils/style/tone-styles';

package/dist/base/Indicator.js

@@ -7,7 +7,7 @@ import { VisuallyHidden } from "./VisuallyHidden.js";
 import { statusToneSx } from "../utils/style/tone-styles.js";
 import { createVNode } 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/base/Indicator.tsx
 /** 角标在被标记元素的哪个角（按书写方向） */
 /** 被标记元素的形状：决定角标往里收多少 */

package/dist/base/Indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/base/Indicator.tsx"],"sourcesContent":["/**\n * 角标（span）：叠在头像、图标按钮右上角的计数或小圆点（未读消息、在线状态）。\n * 包住要标记的元素，角标绝对定位在它的角上；计数超过 max 显示“99+”。\n *\n *   <Indicator count={unread}><IconButton icon={Bell} aria-label=\"通知\" /></Indicator>\n *   <Indicator dot tone=\"success\" placement=\"bottom-end\" overlap=\"circular\" label=\"在线\"><Avatar name=\"张三\" /></Indicator>\n *\n * 读屏：角标里的数字对读屏隐藏，另有一句完整的说明（label，默认取语言包的“N 条新消息”“有新消息”），念在被标记的元素之后。\n * count 为 0（且没有 showZero）、也没有 dot 时不显示角标。部件：Root（外层 span）、Badge（角标）、Count（计数文字）。\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 { useLang } from '../config/context';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { statusToneSx, type StatusTone } from '../utils/style/tone-styles';\nimport { VisuallyHidden } from './VisuallyHidden';\nimport { t } from '../config/theme/tokens';\n\n/** 角标在被标记元素的哪个角（按书写方向） */\nexport interface IndicatorPlacements {\n  /** 右上（默认；从右到左排版时左上） */\n  'top-end': unknown;\n  /** 右下：头像的在线状态 */\n  'bottom-end': unknown;\n  /** 左上 */\n  'top-start': unknown;\n  /** 左下 */\n  'bottom-start': unknown;\n}\n\n/** 被标记元素的形状：决定角标往里收多少 */\nexport interface IndicatorOverlaps {\n  /** 方形（默认）：角标中心在角上 */\n  rectangular: unknown;\n  /** 圆形（圆形头像）：角标收到圆的边上 */\n  circular: unknown;\n}\n\n/** Indicator 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface IndicatorOptions {\n  /** 色调，默认 danger */\n  tone?: StatusTone;\n}\n\n/** 未声明的属性落到外层 span 上 */\nexport interface IndicatorProps extends PartProps<'span'>, IndicatorOptions {\n  /** 计数；超过 max 显示“max+” */\n  count?: number;\n  /** 计数的上限，默认 99 */\n  max?: number;\n  /** 只显示小圆点（不显示数字） */\n  dot?: boolean;\n  /** count 为 0 时也显示 */\n  showZero?: boolean;\n  /** 位置，默认 top-end */\n  placement?: keyof IndicatorPlacements;\n  /** 被标记元素的形状，默认 rectangular */\n  overlap?: keyof IndicatorOverlaps;\n  /** 给读屏的说明；默认取语言包（“N 条新消息”“有新消息”） */\n  label?: string;\n  /** 角标的部件属性 */\n  propsBadge?: PartProps<'span'>;\n  /** 角标里计数文字的部件属性（读屏念的是 label，计数文字对读屏隐藏） */\n  propsCount?: PartProps<'span', 'aria-hidden'>;\n  /** 被标记的元素 */\n  children?: VNodeChild;\n}\n\n/**\n * 角标的配方：部件 root（外层）、badge（角标）、count（计数文字）；位置、形状、圆点是档位。\n * 角标的实底色调来自共用的 statusToneSx，排在配方之前，createUi / Provider 的 styles.Indicator 能盖过它\n */\nexport const indicatorRecipe = css.recipe({\n  name: 'Indicator',\n  parts: ['root', 'badge', 'count'],\n  base: {\n    root: { position: 'relative', display: 'inline-flex', verticalAlign: 'middle', flexShrink: 0 },\n    badge: {\n      position: 'absolute',\n      zIndex: 1,\n      boxSizing: 'border-box',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: '_full',\n      // 一圈页面底色，和被标记的元素分开\n      boxShadow: `0 0 0 ${t.borderWidths.sm} ${t.colors.background}`,\n      fontWeight: '_semibold',\n      lineHeight: 1,\n      fontVariantNumeric: 'tabular-nums',\n      whiteSpace: 'nowrap',\n      pointerEvents: 'none',\n      // 圆点只靠颜色表示“有新消息”：Windows 高对比下保留色调，不被系统改成背景色\n      forcedColorAdjust: 'none',\n    },\n  },\n  variants: {\n    // 圆点或计数：角标的尺寸\n    dot: {\n      true: { badge: { width: '0.625em', height: '0.625em' } },\n      false: {\n        badge: { minWidth: '1.6em', height: '1.6em', paddingInline: '0.4em', fontSize: '0.75em' },\n      },\n    },\n    // 角标的中心对准角：按书写方向的位移\n    placement: {\n      'top-end': {\n        badge: {\n          top: 0,\n          insetInlineEnd: 0,\n          translate: { default: '50% -50%', ':dir(rtl)': '-50% -50%' },\n        },\n      },\n      'bottom-end': {\n        badge: {\n          bottom: 0,\n          insetInlineEnd: 0,\n          translate: { default: '50% 50%', ':dir(rtl)': '-50% 50%' },\n        },\n      },\n      'top-start': {\n        badge: {\n          top: 0,\n          insetInlineStart: 0,\n          translate: { default: '-50% -50%', ':dir(rtl)': '50% -50%' },\n        },\n      },\n      'bottom-start': {\n        badge: {\n          bottom: 0,\n          insetInlineStart: 0,\n          translate: { default: '-50% 50%', ':dir(rtl)': '50% 50%' },\n        },\n      },\n    },\n    overlap: {\n      rectangular: {},\n      // 圆形：角落到圆边的距离约是边长的 14.6%（1 - 1/√2 的一半），角标收进去这么多\n      circular: { badge: { margin: '14.6%' } },\n    },\n  },\n});\n\n/** 角标的部件（createUi / Provider 的 styles.Indicator 按它定制） */\nexport type IndicatorPart = (typeof indicatorRecipe.parts)[number];\n\n/** 角标：叠在被标记元素角上的计数或小圆点 */\nexport const Indicator = _component(\n  ({\n    count,\n    max = 99,\n    dot = false,\n    showZero = false,\n    tone,\n    placement = 'top-end',\n    overlap = 'rectangular',\n    label,\n    propsBadge,\n    propsCount,\n    children,\n    ...rest\n  }: IndicatorProps) => {\n    const lang = useLang();\n    const appearance = useDefaults('Indicator', () => ({ tone }), { tone: 'danger' });\n    const recipe = useRecipe(indicatorRecipe);\n    return () => {\n      const visible = dot || (count != null && (count > 0 || showZero));\n      const text = count == null ? '' : count > max ? `${max}+` : String(count);\n      const shownTone = appearance().tone;\n      const s = recipe({ dot, placement, overlap, tone: shownTone });\n      return (\n        <span {...mergeAttrs<'span'>(s.root, rest)}>\n          {children}\n          {visible && (\n            <span\n              {...mergeAttrs<'span'>(\n                { ...s.badge, sx: [statusToneSx('solid', shownTone), s.badge.sx] },\n                propsBadge,\n              )}\n              data-placement={placement}\n            >\n              {!dot && (\n                <span {...mergeAttrs<'span'>(s.count, propsCount, { 'aria-hidden': true })}>\n                  {text}\n                </span>\n              )}\n              <VisuallyHidden>\n                {label ?? (dot ? lang.indicatorDot : lang.indicatorCount(count ?? 0))}\n              </VisuallyHidden>\n            </span>\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Indicator.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/base/Indicator.tsx"],"sourcesContent":["/**\n * 角标（span）：叠在头像、图标按钮右上角的计数或小圆点（未读消息、在线状态）。\n * 包住要标记的元素，角标绝对定位在它的角上；计数超过 max 显示“99+”。\n *\n *   <Indicator count={unread}><IconButton icon={Bell} aria-label=\"通知\" /></Indicator>\n *   <Indicator dot tone=\"success\" placement=\"bottom-end\" overlap=\"circular\" label=\"在线\"><Avatar name=\"张三\" /></Indicator>\n *\n * 读屏：角标里的数字对读屏隐藏，另有一句完整的说明（label，默认取语言包的“N 条新消息”“有新消息”），念在被标记的元素之后。\n * count 为 0（且没有 showZero）、也没有 dot 时不显示角标。部件：Root（外层 span）、Badge（角标）、Count（计数文字）。\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 { useLang } from '../config/context';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { statusToneSx, type StatusTone } from '../utils/style/tone-styles';\nimport { VisuallyHidden } from './VisuallyHidden';\nimport { t } from '../config/theme/tokens';\n\n/** 角标在被标记元素的哪个角（按书写方向） */\nexport interface IndicatorPlacements {\n  /** 右上（默认；从右到左排版时左上） */\n  'top-end': unknown;\n  /** 右下：头像的在线状态 */\n  'bottom-end': unknown;\n  /** 左上 */\n  'top-start': unknown;\n  /** 左下 */\n  'bottom-start': unknown;\n}\n\n/** 被标记元素的形状：决定角标往里收多少 */\nexport interface IndicatorOverlaps {\n  /** 方形（默认）：角标中心在角上 */\n  rectangular: unknown;\n  /** 圆形（圆形头像）：角标收到圆的边上 */\n  circular: unknown;\n}\n\n/** Indicator 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface IndicatorOptions {\n  /** 色调，默认 danger */\n  tone?: StatusTone;\n}\n\n/** 未声明的属性落到外层 span 上 */\nexport interface IndicatorProps extends PartProps<'span'>, IndicatorOptions {\n  /** 计数；超过 max 显示“max+” */\n  count?: number;\n  /** 计数的上限，默认 99 */\n  max?: number;\n  /** 只显示小圆点（不显示数字） */\n  dot?: boolean;\n  /** count 为 0 时也显示 */\n  showZero?: boolean;\n  /** 位置，默认 top-end */\n  placement?: keyof IndicatorPlacements;\n  /** 被标记元素的形状，默认 rectangular */\n  overlap?: keyof IndicatorOverlaps;\n  /** 给读屏的说明；默认取语言包（“N 条新消息”“有新消息”） */\n  label?: string;\n  /** 角标的部件属性 */\n  propsBadge?: PartProps<'span'>;\n  /** 角标里计数文字的部件属性（读屏念的是 label，计数文字对读屏隐藏） */\n  propsCount?: PartProps<'span', 'aria-hidden'>;\n  /** 被标记的元素 */\n  children?: VNodeChild;\n}\n\n/**\n * 角标的配方：部件 root（外层）、badge（角标）、count（计数文字）；位置、形状、圆点是档位。\n * 角标的实底色调来自共用的 statusToneSx，排在配方之前，createUi / Provider 的 styles.Indicator 能盖过它\n */\nexport const indicatorRecipe = css.recipe({\n  name: 'Indicator',\n  parts: ['root', 'badge', 'count'],\n  base: {\n    root: { position: 'relative', display: 'inline-flex', verticalAlign: 'middle', flexShrink: 0 },\n    badge: {\n      position: 'absolute',\n      zIndex: 1,\n      boxSizing: 'border-box',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: '_full',\n      // 一圈页面底色，和被标记的元素分开\n      boxShadow: `0 0 0 ${t.borderWidths.sm} ${t.colors.background}`,\n      fontWeight: '_semibold',\n      lineHeight: 1,\n      fontVariantNumeric: 'tabular-nums',\n      whiteSpace: 'nowrap',\n      pointerEvents: 'none',\n      // 圆点只靠颜色表示“有新消息”：Windows 高对比下保留色调，不被系统改成背景色\n      forcedColorAdjust: 'none',\n    },\n  },\n  variants: {\n    // 圆点或计数：角标的尺寸\n    dot: {\n      true: { badge: { width: '0.625em', height: '0.625em' } },\n      false: {\n        badge: { minWidth: '1.6em', height: '1.6em', paddingInline: '0.4em', fontSize: '0.75em' },\n      },\n    },\n    // 角标的中心对准角：按书写方向的位移\n    placement: {\n      'top-end': {\n        badge: {\n          top: 0,\n          insetInlineEnd: 0,\n          translate: { default: '50% -50%', ':dir(rtl)': '-50% -50%' },\n        },\n      },\n      'bottom-end': {\n        badge: {\n          bottom: 0,\n          insetInlineEnd: 0,\n          translate: { default: '50% 50%', ':dir(rtl)': '-50% 50%' },\n        },\n      },\n      'top-start': {\n        badge: {\n          top: 0,\n          insetInlineStart: 0,\n          translate: { default: '-50% -50%', ':dir(rtl)': '50% -50%' },\n        },\n      },\n      'bottom-start': {\n        badge: {\n          bottom: 0,\n          insetInlineStart: 0,\n          translate: { default: '-50% 50%', ':dir(rtl)': '50% 50%' },\n        },\n      },\n    },\n    overlap: {\n      rectangular: {},\n      // 圆形：角落到圆边的距离约是边长的 14.6%（1 - 1/√2 的一半），角标收进去这么多\n      circular: { badge: { margin: '14.6%' } },\n    },\n  },\n});\n\n/** 角标的部件（createUi / Provider 的 styles.Indicator 按它定制） */\nexport type IndicatorPart = (typeof indicatorRecipe.parts)[number];\n\n/** 角标：叠在被标记元素角上的计数或小圆点 */\nexport const Indicator = _component(\n  ({\n    count,\n    max = 99,\n    dot = false,\n    showZero = false,\n    tone,\n    placement = 'top-end',\n    overlap = 'rectangular',\n    label,\n    propsBadge,\n    propsCount,\n    children,\n    ...rest\n  }: IndicatorProps) => {\n    const lang = useLang();\n    const appearance = useDefaults('Indicator', () => ({ tone }), { tone: 'danger' });\n    const recipe = useRecipe(indicatorRecipe);\n    return () => {\n      const visible = dot || (count != null && (count > 0 || showZero));\n      const text = count == null ? '' : count > max ? `${max}+` : String(count);\n      const shownTone = appearance().tone;\n      const s = recipe({ dot, placement, overlap, tone: shownTone });\n      return (\n        <span {...mergeAttrs<'span'>(s.root, rest)}>\n          {children}\n          {visible && (\n            <span\n              {...mergeAttrs<'span'>(\n                { ...s.badge, sx: [statusToneSx('solid', shownTone), s.badge.sx] },\n                propsBadge,\n              )}\n              data-placement={placement}\n            >\n              {!dot && (\n                <span {...mergeAttrs<'span'>(s.count, propsCount, { 'aria-hidden': true })}>\n                  {text}\n                </span>\n              )}\n              <VisuallyHidden>\n                {label ?? (dot ? lang.indicatorDot : lang.indicatorCount(count ?? 0))}\n              </VisuallyHidden>\n            </span>\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/base/Kbd.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';
 /** 未声明的属性落到 kbd 上 */

package/dist/base/Kbd.js

@@ -1,7 +1,7 @@
 import { mergeAttrs } from "../utils/props.js";
 import { createVNode } from "vue";
 import { _component, childrenProp, 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/base/Kbd.tsx
 /** 未声明的属性落到 kbd 上 */
 /** Kbd 的样式：root */

package/dist/base/Kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/Kbd.tsx"],"sourcesContent":["/**\n * 按键：键盘快捷键的说明。组合键写成几个 Kbd：\n *\n *   <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>\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';\n\n/** 未声明的属性落到 kbd 上 */\nexport interface KbdProps extends PartProps<'kbd'> {\n  children?: VNodeChild;\n}\n\n/** Kbd 的样式：root */\nexport const kbdStyles = css.create({\n  root: {\n    display: 'inline-block',\n    // 单个字母的键也接近方形\n    minWidth: '1.6em',\n    paddingInline: '_xs',\n    borderWidth: '_xs',\n    borderBottomWidth: '_sm',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_sm',\n    backgroundColor: '_surface',\n    color: '_text',\n    fontFamily: '_mono',\n    // 相对周围文字略小：是比例不是字号档位\n    fontSize: '0.85em',\n    lineHeight: '_snug',\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n  },\n});\n\n/** 按键（kbd）：快捷键说明，组合键写成几个 Kbd */\nexport const Kbd = _component(({ children, ...rest }: KbdProps) => () => (\n  <kbd {...mergeAttrs<'kbd'>({ sx: kbdStyles.root }, rest)}>{children}</kbd>\n));\n"],"mappings":";;;;;;;AAgBA,IAAa,YAAY,IAAI,OAAO,EAClC,MAAM;CACJ,SAAS;CAET,UAAU;CACV,eAAe;CACf,aAAa;CACb,mBAAmB;CACnB,aAAa;CACb,aAAa;CACb,cAAc;CACd,iBAAiB;CACjB,OAAO;CACP,YAAY;CAEZ,UAAU;CACV,YAAY;CACZ,WAAW;CACX,YAAY;AACd,EACF,CAAC;;AAGD,IAAa,MAAM,0BAAW,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAAiBC,YAAA,OACxD,WAAkB,EAAE,IAAI,UAAU,KAAK,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AACzD,GAAA,EAAA,MAAA,MAAA,CAAA"}
+{"version":3,"file":"Kbd.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/Kbd.tsx"],"sourcesContent":["/**\n * 按键：键盘快捷键的说明。组合键写成几个 Kbd：\n *\n *   <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>\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';\n\n/** 未声明的属性落到 kbd 上 */\nexport interface KbdProps extends PartProps<'kbd'> {\n  children?: VNodeChild;\n}\n\n/** Kbd 的样式：root */\nexport const kbdStyles = css.create({\n  root: {\n    display: 'inline-block',\n    // 单个字母的键也接近方形\n    minWidth: '1.6em',\n    paddingInline: '_xs',\n    borderWidth: '_xs',\n    borderBottomWidth: '_sm',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_sm',\n    backgroundColor: '_surface',\n    color: '_text',\n    fontFamily: '_mono',\n    // 相对周围文字略小：是比例不是字号档位\n    fontSize: '0.85em',\n    lineHeight: '_snug',\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n  },\n});\n\n/** 按键（kbd）：快捷键说明，组合键写成几个 Kbd */\nexport const Kbd = _component(({ children, ...rest }: KbdProps) => () => (\n  <kbd {...mergeAttrs<'kbd'>({ sx: kbdStyles.root }, rest)}>{children}</kbd>\n));\n"],"mappings":";;;;;;;AAgBA,IAAa,YAAY,IAAI,OAAO,EAClC,MAAM;CACJ,SAAS;CAET,UAAU;CACV,eAAe;CACf,aAAa;CACb,mBAAmB;CACnB,aAAa;CACb,aAAa;CACb,cAAc;CACd,iBAAiB;CACjB,OAAO;CACP,YAAY;CAEZ,UAAU;CACV,YAAY;CACZ,WAAW;CACX,YAAY;AACd,EACF,CAAC;;AAGD,IAAa,MAAM,0BAAW,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAAiBC,YAAA,OACxD,WAAkB,EAAE,IAAI,UAAU,KAAK,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AACzD,GAAA,EAAA,MAAA,MAAA,CAAA"}

package/dist/base/Link.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 Tone } from '../utils/style/typography';

package/dist/base/Link.js

@@ -9,7 +9,7 @@ import { VisuallyHidden } from "./VisuallyHidden.js";
 import { externalLinkAttrs, useRouterLink } from "../utils/dom/link.js";
 import { Fragment, 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";
 import { ArrowUpRight } from "@lucide/icons";
 //#region src/base/Link.tsx
 /**

package/dist/base/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_Fragment"],"sources":["../../src/base/Link.tsx"],"sourcesContent":["/**\n * 文字链接。默认带下划线：正文里的链接不能只靠颜色区分（WCAG 1.4.1）。\n *\n *   <Link href=\"/orders\">查看订单</Link>\n *   <Link href=\"https://example.com\" external>帮助文档</Link>   新窗口打开，带图标与读屏提示\n *\n * 按钮样式的链接用 LinkButton。站内链接经 createUi 的 router 不刷新页面地跳转（utils/dom/link.ts）。\n */\nimport { ArrowUpRight } from '@lucide/icons';\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 { useLang } from '../config/context';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { externalLinkAttrs, useRouterLink } from '../utils/dom/link';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { toneStyles, type Tone } from '../utils/style/typography';\nimport { Icon, type IconProps } from './Icon';\nimport { VisuallyHidden } from './VisuallyHidden';\n\n/** 链接的下划线 */\nexport interface LinkUnderlines {\n  /** 一直显示：正文里的链接，不能只靠颜色区分（WCAG 1.4.1） */\n  always: unknown;\n  /** 悬停时才显示：列表、卡片里一眼能看出是链接的地方 */\n  hover: unknown;\n  /** 不显示：导航菜单等上下文已表明是链接的地方 */\n  none: unknown;\n}\n\n/** Link 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface LinkOptions {\n  /** 色调，默认 accent（品牌色文字） */\n  tone?: Tone;\n  /** 下划线，默认 always */\n  underline?: keyof LinkUnderlines;\n}\n\n/** 未声明的属性落到 <a> 上 */\nexport interface LinkProps extends PartProps<'a', 'href'>, LinkOptions {\n  /** 链接地址；必填：没有地址的“链接”应该用按钮 */\n  href: string;\n  /** 外部链接：新窗口打开，加 rel=\"noopener noreferrer\"、外链图标与读屏提示 */\n  external?: boolean;\n  /** 外链图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  children?: VNodeChild;\n}\n\n/**\n * 链接的配方：部件 root（a）、icon（外链图标），下划线是档位。色调的文字色来自共用的 toneStyles，\n * 排在配方之前，createUi / Provider 的 styles.Link 能盖过它\n */\nexport const linkRecipe = css.recipe({\n  name: 'Link',\n  parts: ['root', 'icon'],\n  base: {\n    root: {\n      borderRadius: '_xs',\n      textDecorationThickness: '_xs',\n      textUnderlineOffset: '0.2em',\n      cursor: 'pointer',\n    },\n    // 图标跟随文字：不换行到下一行开头\n    icon: { marginInlineStart: '0.1em', verticalAlign: '-0.1em' },\n  },\n  variants: {\n    underline: {\n      always: { root: { textDecorationLine: 'underline' } },\n      hover: { root: { textDecorationLine: { default: 'none', ':hover': 'underline' } } },\n      none: { root: { textDecorationLine: 'none' } },\n    },\n  },\n});\n\n/** 链接的部件（createUi / Provider 的 styles.Link 按它定制） */\nexport type LinkPart = (typeof linkRecipe.parts)[number];\n\n/** 文字链接（a）：品牌色、下划线与焦点环；external 时新窗口打开并带读屏提示 */\nexport const Link = _component(\n  ({ href, tone, underline, external = false, propsIcon, children, ...rest }: LinkProps) => {\n    const lang = useLang();\n    const router = useRouterLink();\n    const appearance = useDefaults('Link', () => ({ tone, underline }), {\n      tone: 'accent',\n      underline: 'always',\n    });\n    const recipe = useRecipe(linkRecipe);\n    return () => {\n      const { tone: shownTone, underline: shownUnderline } = appearance();\n      const s = recipe({ underline: shownUnderline, tone: shownTone });\n      return (\n        <a\n          {...mergeAttrs<'a'>(\n            { ...s.root, sx: [toneStyles[shownTone], s.root.sx, focusRingStyles.visible] },\n            rest,\n            external\n              ? { href, ...externalLinkAttrs }\n              : // 使用方的 onClick 先执行，preventDefault 可以拦下路由跳转（mergeProps 的规则）\n                {\n                  href: router.href(href),\n                  onClick: (event: MouseEvent) => router.onClick(event, href),\n                },\n          )}\n        >\n          {children}\n          {external && (\n            <>\n              <Icon {...mergePartProps<IconProps>({ ...s.icon, icon: ArrowUpRight }, propsIcon)} />\n              <VisuallyHidden>{lang.linkNewWindow}</VisuallyHidden>\n            </>\n          )}\n        </a>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,IAAa,aAAa,IAAI,OAAO;CACnC,MAAM;CACN,OAAO,CAAC,QAAQ,MAAM;CACtB,MAAM;EACJ,MAAM;GACJ,cAAc;GACd,yBAAyB;GACzB,qBAAqB;GACrB,QAAQ;EACV;EAEA,MAAM;GAAE,mBAAmB;GAAS,eAAe;EAAS;CAC9D;CACA,UAAU,EACR,WAAW;EACT,QAAQ,EAAE,MAAM,EAAE,oBAAoB,YAAY,EAAE;EACpD,OAAO,EAAE,MAAM,EAAE,oBAAoB;GAAE,SAAS;GAAQ,UAAU;EAAY,EAAE,EAAE;EAClF,MAAM,EAAE,MAAM,EAAE,oBAAoB,OAAO,EAAE;CAC/C,EACF;AACF,CAAC;;;AAMD,IAAa,OAAO,0BAClB,QAAA,SAA0F;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAArD,KAAK;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAA0B,OAAIC,UAAA,QAAA,MAAA,KAAA;CACtE,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,cAAc;CAC7B,MAAM,aAAa,YAAY,eAAe;EAAE,MAAI,KAAA;EAAE,WAAS,UAAA;CAAC,IAAI;EAClE,MAAM;EACN,WAAW;CACb,CAAC;CACD,MAAM,SAAS,UAAU,UAAU;CACnC,aAAa;EACX,MAAM,EAAE,MAAM,WAAW,WAAW,mBAAmB,WAAW;EAClE,MAAM,IAAI,OAAO;GAAE,WAAW;GAAgB,MAAM;EAAU,CAAC;EAC/D,OAAAC,YAAA,KAEQ,WACF;GAAE,GAAG,EAAE;GAAM,IAAI;IAAC,WAAW;IAAY,EAAE,KAAK;IAAI,gBAAgB;GAAO;EAAE,GAC7E,MACA,SAAA,QACI;GAAE,MAAI,KAAA;GAAE,GAAG;EAAkB,IAE7B;GACE,MAAM,OAAO,KAAI,KAAA,KAAK;GACtB,UAAU,UAAsB,OAAO,QAAQ,OAAK,KAAA,KAAM;EAC5D,CACN,GAAC,CAAA,SAAA,OAGA,SAAA,SAAAA,YAAAC,UAAA,MAAA,CAAAD,YAAA,MAEa,eAA0B;GAAE,GAAG,EAAE;GAAM,MAAM;EAAa,GAAC,UAAA,KAAW,GAAC,IAAA,GAAAA,YAAA,gBAAA,EAAA,OAAA,UAAA,GAAA;GAAA,eAAA,CAChE,KAAK,aAAa;GAAA,SAAA;EAAA,CAAA,CAAA,CAAA,CAEtC,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"Link.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_Fragment"],"sources":["../../src/base/Link.tsx"],"sourcesContent":["/**\n * 文字链接。默认带下划线：正文里的链接不能只靠颜色区分（WCAG 1.4.1）。\n *\n *   <Link href=\"/orders\">查看订单</Link>\n *   <Link href=\"https://example.com\" external>帮助文档</Link>   新窗口打开，带图标与读屏提示\n *\n * 按钮样式的链接用 LinkButton。站内链接经 createUi 的 router 不刷新页面地跳转（utils/dom/link.ts）。\n */\nimport { ArrowUpRight } from '@lucide/icons';\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 { useLang } from '../config/context';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { externalLinkAttrs, useRouterLink } from '../utils/dom/link';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { toneStyles, type Tone } from '../utils/style/typography';\nimport { Icon, type IconProps } from './Icon';\nimport { VisuallyHidden } from './VisuallyHidden';\n\n/** 链接的下划线 */\nexport interface LinkUnderlines {\n  /** 一直显示：正文里的链接，不能只靠颜色区分（WCAG 1.4.1） */\n  always: unknown;\n  /** 悬停时才显示：列表、卡片里一眼能看出是链接的地方 */\n  hover: unknown;\n  /** 不显示：导航菜单等上下文已表明是链接的地方 */\n  none: unknown;\n}\n\n/** Link 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface LinkOptions {\n  /** 色调，默认 accent（品牌色文字） */\n  tone?: Tone;\n  /** 下划线，默认 always */\n  underline?: keyof LinkUnderlines;\n}\n\n/** 未声明的属性落到 <a> 上 */\nexport interface LinkProps extends PartProps<'a', 'href'>, LinkOptions {\n  /** 链接地址；必填：没有地址的“链接”应该用按钮 */\n  href: string;\n  /** 外部链接：新窗口打开，加 rel=\"noopener noreferrer\"、外链图标与读屏提示 */\n  external?: boolean;\n  /** 外链图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  children?: VNodeChild;\n}\n\n/**\n * 链接的配方：部件 root（a）、icon（外链图标），下划线是档位。色调的文字色来自共用的 toneStyles，\n * 排在配方之前，createUi / Provider 的 styles.Link 能盖过它\n */\nexport const linkRecipe = css.recipe({\n  name: 'Link',\n  parts: ['root', 'icon'],\n  base: {\n    root: {\n      borderRadius: '_xs',\n      textDecorationThickness: '_xs',\n      textUnderlineOffset: '0.2em',\n      cursor: 'pointer',\n    },\n    // 图标跟随文字：不换行到下一行开头\n    icon: { marginInlineStart: '0.1em', verticalAlign: '-0.1em' },\n  },\n  variants: {\n    underline: {\n      always: { root: { textDecorationLine: 'underline' } },\n      hover: { root: { textDecorationLine: { default: 'none', ':hover': 'underline' } } },\n      none: { root: { textDecorationLine: 'none' } },\n    },\n  },\n});\n\n/** 链接的部件（createUi / Provider 的 styles.Link 按它定制） */\nexport type LinkPart = (typeof linkRecipe.parts)[number];\n\n/** 文字链接（a）：品牌色、下划线与焦点环；external 时新窗口打开并带读屏提示 */\nexport const Link = _component(\n  ({ href, tone, underline, external = false, propsIcon, children, ...rest }: LinkProps) => {\n    const lang = useLang();\n    const router = useRouterLink();\n    const appearance = useDefaults('Link', () => ({ tone, underline }), {\n      tone: 'accent',\n      underline: 'always',\n    });\n    const recipe = useRecipe(linkRecipe);\n    return () => {\n      const { tone: shownTone, underline: shownUnderline } = appearance();\n      const s = recipe({ underline: shownUnderline, tone: shownTone });\n      return (\n        <a\n          {...mergeAttrs<'a'>(\n            { ...s.root, sx: [toneStyles[shownTone], s.root.sx, focusRingStyles.visible] },\n            rest,\n            external\n              ? { href, ...externalLinkAttrs }\n              : // 使用方的 onClick 先执行，preventDefault 可以拦下路由跳转（mergeProps 的规则）\n                {\n                  href: router.href(href),\n                  onClick: (event: MouseEvent) => router.onClick(event, href),\n                },\n          )}\n        >\n          {children}\n          {external && (\n            <>\n              <Icon {...mergePartProps<IconProps>({ ...s.icon, icon: ArrowUpRight }, propsIcon)} />\n              <VisuallyHidden>{lang.linkNewWindow}</VisuallyHidden>\n            </>\n          )}\n        </a>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,IAAa,aAAa,IAAI,OAAO;CACnC,MAAM;CACN,OAAO,CAAC,QAAQ,MAAM;CACtB,MAAM;EACJ,MAAM;GACJ,cAAc;GACd,yBAAyB;GACzB,qBAAqB;GACrB,QAAQ;EACV;EAEA,MAAM;GAAE,mBAAmB;GAAS,eAAe;EAAS;CAC9D;CACA,UAAU,EACR,WAAW;EACT,QAAQ,EAAE,MAAM,EAAE,oBAAoB,YAAY,EAAE;EACpD,OAAO,EAAE,MAAM,EAAE,oBAAoB;GAAE,SAAS;GAAQ,UAAU;EAAY,EAAE,EAAE;EAClF,MAAM,EAAE,MAAM,EAAE,oBAAoB,OAAO,EAAE;CAC/C,EACF;AACF,CAAC;;;AAMD,IAAa,OAAO,0BAClB,QAAA,SAA0F;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAArD,KAAK;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAA0B,OAAIC,UAAA,QAAA,MAAA,KAAA;CACtE,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,cAAc;CAC7B,MAAM,aAAa,YAAY,eAAe;EAAE,MAAI,KAAA;EAAE,WAAS,UAAA;CAAC,IAAI;EAClE,MAAM;EACN,WAAW;CACb,CAAC;CACD,MAAM,SAAS,UAAU,UAAU;CACnC,aAAa;EACX,MAAM,EAAE,MAAM,WAAW,WAAW,mBAAmB,WAAW;EAClE,MAAM,IAAI,OAAO;GAAE,WAAW;GAAgB,MAAM;EAAU,CAAC;EAC/D,OAAAC,YAAA,KAEQ,WACF;GAAE,GAAG,EAAE;GAAM,IAAI;IAAC,WAAW;IAAY,EAAE,KAAK;IAAI,gBAAgB;GAAO;EAAE,GAC7E,MACA,SAAA,QACI;GAAE,MAAI,KAAA;GAAE,GAAG;EAAkB,IAE7B;GACE,MAAM,OAAO,KAAI,KAAA,KAAK;GACtB,UAAU,UAAsB,OAAO,QAAQ,OAAK,KAAA,KAAM;EAC5D,CACN,GAAC,CAAA,SAAA,OAGA,SAAA,SAAAA,YAAAC,UAAA,MAAA,CAAAD,YAAA,MAEa,eAA0B;GAAE,GAAG,EAAE;GAAM,MAAM;EAAa,GAAC,UAAA,KAAW,GAAC,IAAA,GAAAA,YAAA,gBAAA,EAAA,OAAA,UAAA,GAAA;GAAA,eAAA,CAChE,KAAK,aAAa;GAAA,SAAA;EAAA,CAAA,CAAA,CAAA,CAEtC,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/base/List.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';