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

package/dist/display/VirtualList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.js","names":["_isVNode","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/display/VirtualList.tsx"],"sourcesContent":["/**\n * 虚拟列表：只渲染可见范围内的项，上万条数据也流畅。行高可以不固定，渲染后自动测量（COMPONENTS.md §10.7）。\n *\n *   <VirtualList items={users} getKey={(user) => user.id} estimateSize={48} sx={styles.list}>\n *     {(user) => <UserRow user={user} />}\n *   </VirtualList>\n *\n * 默认组件自己是滚动容器，高度由使用方给（sx、class 或 style）；scroll=\"window\" 时随页面滚动。\n * 读屏：role=\"list\"，每项带 aria-setsize / aria-posinset，未渲染的项也算在总数里；没有数据时是 role=\"group\"（空状态、骨架不是列表项）。\n * loading：没有数据时显示骨架行（按 estimateSize 的高度），已有数据（刷新、加载更多）时顶部显示进度条；带 aria-busy。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch, type VNodeChild } from 'vue';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { useLang } from '../config/context';\nimport { Progress } from '../feedback/Progress';\nimport { Skeleton, type SkeletonProps, type SkeletonShapeProps } from '../feedback/Skeleton';\nimport { SHIMMER_STAGGER } from '../utils/style/shimmer';\nimport {\n  elementProps,\n  mergeAttrs,\n  mergePartProps,\n  mergeProps,\n  type PartProps,\n} from '../utils/props';\nimport { ScrollArea } from '../layout/ScrollArea';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { useVirtualizer } from '../utils/virtual/use-virtualizer';\nimport type { VirtualScrollOptions, VisibleRange } from '../utils/virtual/virtualizer';\n\n/** 跟着谁滚动 */\nexport interface VirtualListScrolls {\n  /** 组件自己是滚动容器（默认）：要给它高度（横向时给宽度） */\n  container: unknown;\n  /** 随页面（window）滚动：列表按总高度撑开，放在页面的普通流里 */\n  window: unknown;\n}\n\n/** handle 拿到的方法 */\nexport interface VirtualListHandle {\n  /** 滚动到第 index 项；align 默认 auto（已经完整可见就不动） */\n  scrollToIndex: (index: number, options?: VirtualScrollOptions) => void;\n  /** 滚动到相对列表开头的位置（px） */\n  scrollToOffset: (offset: number, options?: VirtualScrollOptions) => void;\n}\n\n/** 受管属性：角色与可聚焦由组件决定 */\nexport type VirtualListManaged = 'role' | 'tabindex';\n\n/** 未声明的属性落到外层元素（滚动容器）上；aria-label 写在这里就是列表的名称 */\nexport interface VirtualListProps<T> extends PartProps<'div', VirtualListManaged> {\n  /** 数据 */\n  items: readonly T[];\n  /** 渲染一项：`{(item, index) => …}` */\n  children: (item: T, index: number) => VNodeChild;\n  /** 每项的 key，默认用序号；数据会重排、增删时一定要给，测量结果与组件状态才对得上 */\n  getKey?: (item: T, index: number) => PropertyKey;\n  /** 每项的估计大小（px），数字或按项计算；渲染后以实际大小为准，默认 40 */\n  estimateSize?: number | ((item: T, index: number) => number);\n  /** 可见范围前后各多渲染几项，默认 4 */\n  overscan?: number;\n  /** 跟着谁滚动，默认 container */\n  scroll?: keyof VirtualListScrolls;\n  /** 横向排列与滚动 */\n  horizontal?: boolean;\n  /** 没有数据时显示的内容 */\n  empty?: VNodeChild;\n  /** 加载中：没有数据时显示骨架行，已有数据时顶部显示进度条 */\n  loading?: boolean;\n  /** 加载中占位行的部件属性 */\n  propsSkeleton?: SkeletonShapeProps;\n  /** 拿到滚动方法：`handle={(list) => (listHandle = list)}` */\n  handle?: (handle: VirtualListHandle) => void;\n  /** 可见范围变化（不含 overscan）：接近末尾时加载更多 */\n  onRangeChange?: (range: VisibleRange) => void;\n  /** 列表层（撑开总高度、role=\"list\" 的项都在它里面）的部件属性 */\n  propsList?: PartProps<'div', 'role'>;\n  /**\n   * 每一项外层（role=\"listitem\"）的部件属性；可以按项计算：`(item, index) => ({ class: … })`。\n   * 位置、序号与无障碍属性由组件管理\n   */\n  propsItem?: ItemProps | ((item: T, index: number) => ItemProps);\n}\n\n/** 项外层可以定制的属性 */\ntype ItemProps = PartProps<'div', 'role' | 'aria-setsize' | 'aria-posinset'>;\n\n/** 加载中显示几行骨架 */\nconst SKELETON_ROWS = 5;\n\n/** VirtualList 的样式：root、container、list、item、itemVertical、itemHorizontal 等 */\nexport const virtualListStyles = css.create({\n  // 自己调整滚动位置（见 virtualizer.ts），不要浏览器再按锚点调整一次\n  root: { overflowAnchor: 'none' },\n  // 容器模式：列表元素是 ScrollArea 的视口（浮层滚动条）\n  container: { overscrollBehavior: 'contain' },\n  list: { position: 'relative', overflowAnchor: 'none' },\n  item: { position: 'absolute', top: 0, left: 0, overflowAnchor: 'none' },\n  itemVertical: { width: '_full' },\n  itemHorizontal: { height: '_full' },\n  // 刷新中的进度条贴在可见区域顶部\n  progress: { position: 'sticky', top: 0, zIndex: 1, height: 0 },\n  skeletonRow: { paddingBlock: '_xs' },\n  skeleton: { display: 'block', width: '_full' },\n});\n\n// 总大小与位置是任意值，用动态样式（编译为 CSS 变量）；单独一个 create，见 COMPONENTS.md §4\n/** VirtualList 的样式：height、width、y、x、skeleton */\nexport const virtualListSizeStyles = css.create({\n  height: (px: number) => ({ height: px }),\n  width: (px: number) => ({ width: px, height: '_full' }),\n  y: (px: number) => ({ transform: `translateY(${px}px)` }),\n  x: (px: number) => ({ transform: `translateX(${px}px)` }),\n  // 骨架行比一项略矮：上下留出间隔\n  skeleton: (px: number) => ({ height: Math.max(8, px - 8) }),\n});\n\n/** 虚拟列表：只渲染可见范围内的项，行高渲染后自动测量 */\nexport const VirtualList = _component(\n  <T,>({\n    items,\n    children,\n    getKey,\n    estimateSize = 40,\n    overscan = 4,\n    scroll = 'container',\n    horizontal = false,\n    empty,\n    loading = false,\n    propsSkeleton,\n    handle,\n    onRangeChange,\n    propsList,\n    propsItem,\n    ...rest\n  }: VirtualListProps<T>) => {\n    const lang = useLang();\n    // 骨架、进度条防闪烁；aria-busy 按真实的 loading\n    const indicator = useDelayedLoading(() => loading);\n    let root = _state.raw<HTMLElement | null>(null);\n    let list = _state.raw<HTMLElement | null>(null);\n    const virtual = useVirtualizer(() => {\n      const data = items;\n      const estimate = estimateSize;\n      const keyOf = getKey;\n      return {\n        count: data.length,\n        overscan,\n        horizontal,\n        scrollElement: scroll === 'window' ? window : root,\n        list,\n        estimateSize: (index: number) =>\n          typeof estimate === 'number' ? estimate : estimate(data[index]!, index),\n        getItemKey: keyOf ? (index: number) => keyOf(data[index]!, index) : undefined,\n        onRangeChange,\n      };\n    });\n\n    // 挂载之后才交出 handle：使用方在回调里立即滚动（恢复上次的位置）也能生效。\n    // handle 不放进监听源：父级写的箭头函数每次渲染都是新的，不该因此重新交出\n    const api: VirtualListHandle = {\n      scrollToIndex: virtual.scrollToIndex,\n      scrollToOffset: virtual.scrollToOffset,\n    };\n    watch(\n      () => root,\n      (element) => {\n        if (element) handle?.(api);\n      },\n      { flush: 'post' },\n    );\n\n    return () => {\n      const isContainer = scroll === 'container';\n      const hasItems = items.length > 0;\n      const props = mergeProps<'div'>(\n        {\n          sx: [\n            virtualListStyles.root,\n            isContainer && [virtualListStyles.container, focusRingStyles.visible],\n          ],\n        },\n        rest,\n        {\n          ref: _toRef(root),\n          // 没有数据（空状态、首次加载的骨架）时不是列表；仍给 group 角色，写在外层的 aria-label 才有效\n          role: hasItems ? 'list' : 'group',\n          'aria-busy': loading || undefined,\n          // 容器模式下可以用键盘滚动\n          tabindex: isContainer ? 0 : undefined,\n        },\n      );\n      const content = (\n        <>\n          {indicator.value && hasItems && (\n            <div aria-hidden=\"true\" {...css.attrs(virtualListStyles.progress)}>\n              <Progress size=\"xs\" aria-label={lang.loading} />\n            </div>\n          )}\n          {hasItems ? (\n            <div\n              {...mergeAttrs<'div'>({ sx: virtualListStyles.list }, propsList, {\n                sx: horizontal\n                  ? virtualListSizeStyles.width(virtual.total)\n                  : virtualListSizeStyles.height(virtual.total),\n                ref: _toRef(list),\n                role: 'presentation',\n              })}\n            >\n              {virtual.items.map((item) => {\n                const data = items[item.index]!;\n                const own =\n                  typeof propsItem === 'function' ? propsItem(data, item.index) : propsItem;\n                return (\n                  <div\n                    key={item.key}\n                    {...mergeAttrs<'div'>(\n                      {\n                        sx: [\n                          virtualListStyles.item,\n                          horizontal\n                            ? virtualListStyles.itemHorizontal\n                            : virtualListStyles.itemVertical,\n                        ],\n                      },\n                      own,\n                      {\n                        sx: horizontal\n                          ? virtualListSizeStyles.x(item.start)\n                          : virtualListSizeStyles.y(item.start),\n                        ref: virtual.measure,\n                        role: 'listitem',\n                        'aria-setsize': items.length,\n                        'aria-posinset': item.index + 1,\n                      },\n                    )}\n                    data-index={item.index}\n                  >\n                    {children(data, item.index)}\n                  </div>\n                );\n              })}\n            </div>\n          ) : loading ? (\n            indicator.value &&\n            Array.from({ length: SKELETON_ROWS }, (_, index) => (\n              <div key={index} aria-hidden=\"true\" {...css.attrs(virtualListStyles.skeletonRow)}>\n                <Skeleton\n                  {...mergePartProps<SkeletonProps>(\n                    {\n                      sx: [\n                        virtualListStyles.skeleton,\n                        virtualListSizeStyles.skeleton(\n                          typeof estimateSize === 'number' ? estimateSize : 40,\n                        ),\n                      ],\n                      delay: index * SHIMMER_STAGGER,\n                    },\n                    propsSkeleton,\n                  )}\n                />\n              </div>\n            ))\n          ) : (\n            empty\n          )}\n        </>\n      );\n      // 容器模式：列表元素就是 ScrollArea 的视口，滚动条是浮层的；跟着页面滚动时就是普通的 div\n      return isContainer ? (\n        <ScrollArea\n          axis={horizontal ? 'x' : 'y'}\n          focusable={false}\n          propsViewport={props as PartProps<'div'>}\n        >\n          {content}\n        </ScrollArea>\n      ) : (\n        <div {...elementProps(props)}>{content}</div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"VirtualList.js","names":["_isVNode","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/display/VirtualList.tsx"],"sourcesContent":["/**\n * 虚拟列表：只渲染可见范围内的项，上万条数据也流畅。行高可以不固定，渲染后自动测量（COMPONENTS.md §10.7）。\n *\n *   <VirtualList items={users} getKey={(user) => user.id} estimateSize={48} sx={styles.list}>\n *     {(user) => <UserRow user={user} />}\n *   </VirtualList>\n *\n * 默认组件自己是滚动容器，高度由使用方给（sx、class 或 style）；scroll=\"window\" 时随页面滚动。\n * 读屏：role=\"list\"，每项带 aria-setsize / aria-posinset，未渲染的项也算在总数里；没有数据时是 role=\"group\"（空状态、骨架不是列表项）。\n * loading：没有数据时显示骨架行（按 estimateSize 的高度），已有数据（刷新、加载更多）时顶部显示进度条；带 aria-busy。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch, type VNodeChild } from 'vue';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { useLang } from '../config/context';\nimport { Progress } from '../feedback/Progress';\nimport { Skeleton, type SkeletonProps, type SkeletonShapeProps } from '../feedback/Skeleton';\nimport { SHIMMER_STAGGER } from '../utils/style/shimmer';\nimport {\n  elementProps,\n  mergeAttrs,\n  mergePartProps,\n  mergeProps,\n  type PartProps,\n} from '../utils/props';\nimport { ScrollArea } from '../layout/ScrollArea';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { useVirtualizer } from '../utils/virtual/use-virtualizer';\nimport type { VirtualScrollOptions, VisibleRange } from '../utils/virtual/virtualizer';\n\n/** 跟着谁滚动 */\nexport interface VirtualListScrolls {\n  /** 组件自己是滚动容器（默认）：要给它高度（横向时给宽度） */\n  container: unknown;\n  /** 随页面（window）滚动：列表按总高度撑开，放在页面的普通流里 */\n  window: unknown;\n}\n\n/** handle 拿到的方法 */\nexport interface VirtualListHandle {\n  /** 滚动到第 index 项；align 默认 auto（已经完整可见就不动） */\n  scrollToIndex: (index: number, options?: VirtualScrollOptions) => void;\n  /** 滚动到相对列表开头的位置（px） */\n  scrollToOffset: (offset: number, options?: VirtualScrollOptions) => void;\n}\n\n/** 受管属性：角色与可聚焦由组件决定 */\nexport type VirtualListManaged = 'role' | 'tabindex';\n\n/** 未声明的属性落到外层元素（滚动容器）上；aria-label 写在这里就是列表的名称 */\nexport interface VirtualListProps<T> extends PartProps<'div', VirtualListManaged> {\n  /** 数据 */\n  items: readonly T[];\n  /** 渲染一项：`{(item, index) => …}` */\n  children: (item: T, index: number) => VNodeChild;\n  /** 每项的 key，默认用序号；数据会重排、增删时一定要给，测量结果与组件状态才对得上 */\n  getKey?: (item: T, index: number) => PropertyKey;\n  /** 每项的估计大小（px），数字或按项计算；渲染后以实际大小为准，默认 40 */\n  estimateSize?: number | ((item: T, index: number) => number);\n  /** 可见范围前后各多渲染几项，默认 4 */\n  overscan?: number;\n  /** 跟着谁滚动，默认 container */\n  scroll?: keyof VirtualListScrolls;\n  /** 横向排列与滚动 */\n  horizontal?: boolean;\n  /** 没有数据时显示的内容 */\n  empty?: VNodeChild;\n  /** 加载中：没有数据时显示骨架行，已有数据时顶部显示进度条 */\n  loading?: boolean;\n  /** 加载中占位行的部件属性 */\n  propsSkeleton?: SkeletonShapeProps;\n  /** 拿到滚动方法：`handle={(list) => (listHandle = list)}` */\n  handle?: (handle: VirtualListHandle) => void;\n  /** 可见范围变化（不含 overscan）：接近末尾时加载更多 */\n  onRangeChange?: (range: VisibleRange) => void;\n  /** 列表层（撑开总高度、role=\"list\" 的项都在它里面）的部件属性 */\n  propsList?: PartProps<'div', 'role'>;\n  /**\n   * 每一项外层（role=\"listitem\"）的部件属性；可以按项计算：`(item, index) => ({ class: … })`。\n   * 位置、序号与无障碍属性由组件管理\n   */\n  propsItem?: ItemProps | ((item: T, index: number) => ItemProps);\n}\n\n/** 项外层可以定制的属性 */\ntype ItemProps = PartProps<'div', 'role' | 'aria-setsize' | 'aria-posinset'>;\n\n/** 加载中显示几行骨架 */\nconst SKELETON_ROWS = 5;\n\n/** VirtualList 的样式：root、container、list、item、itemVertical、itemHorizontal 等 */\nexport const virtualListStyles = css.create({\n  // 自己调整滚动位置（见 virtualizer.ts），不要浏览器再按锚点调整一次\n  root: { overflowAnchor: 'none' },\n  // 容器模式：列表元素是 ScrollArea 的视口（浮层滚动条）\n  container: { overscrollBehavior: 'contain' },\n  list: { position: 'relative', overflowAnchor: 'none' },\n  item: { position: 'absolute', top: 0, left: 0, overflowAnchor: 'none' },\n  itemVertical: { width: '_full' },\n  itemHorizontal: { height: '_full' },\n  // 刷新中的进度条贴在可见区域顶部\n  progress: { position: 'sticky', top: 0, zIndex: 1, height: 0 },\n  skeletonRow: { paddingBlock: '_xs' },\n  skeleton: { display: 'block', width: '_full' },\n});\n\n// 总大小与位置是任意值，用动态样式（编译为 CSS 变量）；单独一个 create，见 COMPONENTS.md §4\n/** VirtualList 的样式：height、width、y、x、skeleton */\nexport const virtualListSizeStyles = css.create({\n  height: (px: number) => ({ height: px }),\n  width: (px: number) => ({ width: px, height: '_full' }),\n  y: (px: number) => ({ transform: `translateY(${px}px)` }),\n  x: (px: number) => ({ transform: `translateX(${px}px)` }),\n  // 骨架行比一项略矮：上下留出间隔\n  skeleton: (px: number) => ({ height: Math.max(8, px - 8) }),\n});\n\n/** 虚拟列表：只渲染可见范围内的项，行高渲染后自动测量 */\nexport const VirtualList = _component(\n  <T,>({\n    items,\n    children,\n    getKey,\n    estimateSize = 40,\n    overscan = 4,\n    scroll = 'container',\n    horizontal = false,\n    empty,\n    loading = false,\n    propsSkeleton,\n    handle,\n    onRangeChange,\n    propsList,\n    propsItem,\n    ...rest\n  }: VirtualListProps<T>) => {\n    const lang = useLang();\n    // 骨架、进度条防闪烁；aria-busy 按真实的 loading\n    const indicator = useDelayedLoading(() => loading);\n    let root = _state.raw<HTMLElement | null>(null);\n    let list = _state.raw<HTMLElement | null>(null);\n    const virtual = useVirtualizer(() => {\n      const data = items;\n      const estimate = estimateSize;\n      const keyOf = getKey;\n      return {\n        count: data.length,\n        overscan,\n        horizontal,\n        scrollElement: scroll === 'window' ? window : root,\n        list,\n        estimateSize: (index: number) =>\n          typeof estimate === 'number' ? estimate : estimate(data[index]!, index),\n        getItemKey: keyOf ? (index: number) => keyOf(data[index]!, index) : undefined,\n        onRangeChange,\n      };\n    });\n\n    // 挂载之后才交出 handle：使用方在回调里立即滚动（恢复上次的位置）也能生效。\n    // handle 不放进监听源：父级写的箭头函数每次渲染都是新的，不该因此重新交出\n    const api: VirtualListHandle = {\n      scrollToIndex: virtual.scrollToIndex,\n      scrollToOffset: virtual.scrollToOffset,\n    };\n    watch(\n      () => root,\n      (element) => {\n        if (element) handle?.(api);\n      },\n      { flush: 'post' },\n    );\n\n    return () => {\n      const isContainer = scroll === 'container';\n      const hasItems = items.length > 0;\n      const props = mergeProps<'div'>(\n        {\n          sx: [\n            virtualListStyles.root,\n            isContainer && [virtualListStyles.container, focusRingStyles.visible],\n          ],\n        },\n        rest,\n        {\n          ref: _toRef(root),\n          // 没有数据（空状态、首次加载的骨架）时不是列表；仍给 group 角色，写在外层的 aria-label 才有效\n          role: hasItems ? 'list' : 'group',\n          'aria-busy': loading || undefined,\n          // 容器模式下可以用键盘滚动\n          tabindex: isContainer ? 0 : undefined,\n        },\n      );\n      const content = (\n        <>\n          {indicator.value && hasItems && (\n            <div aria-hidden=\"true\" {...css.attrs(virtualListStyles.progress)}>\n              <Progress size=\"xs\" aria-label={lang.loading} />\n            </div>\n          )}\n          {hasItems ? (\n            <div\n              {...mergeAttrs<'div'>({ sx: virtualListStyles.list }, propsList, {\n                sx: horizontal\n                  ? virtualListSizeStyles.width(virtual.total)\n                  : virtualListSizeStyles.height(virtual.total),\n                ref: _toRef(list),\n                role: 'presentation',\n              })}\n            >\n              {virtual.items.map((item) => {\n                const data = items[item.index]!;\n                const own =\n                  typeof propsItem === 'function' ? propsItem(data, item.index) : propsItem;\n                return (\n                  <div\n                    key={item.key}\n                    {...mergeAttrs<'div'>(\n                      {\n                        sx: [\n                          virtualListStyles.item,\n                          horizontal\n                            ? virtualListStyles.itemHorizontal\n                            : virtualListStyles.itemVertical,\n                        ],\n                      },\n                      own,\n                      {\n                        sx: horizontal\n                          ? virtualListSizeStyles.x(item.start)\n                          : virtualListSizeStyles.y(item.start),\n                        ref: virtual.measure,\n                        role: 'listitem',\n                        'aria-setsize': items.length,\n                        'aria-posinset': item.index + 1,\n                      },\n                    )}\n                    data-index={item.index}\n                  >\n                    {children(data, item.index)}\n                  </div>\n                );\n              })}\n            </div>\n          ) : loading ? (\n            indicator.value &&\n            Array.from({ length: SKELETON_ROWS }, (_, index) => (\n              <div key={index} aria-hidden=\"true\" {...css.attrs(virtualListStyles.skeletonRow)}>\n                <Skeleton\n                  {...mergePartProps<SkeletonProps>(\n                    {\n                      sx: [\n                        virtualListStyles.skeleton,\n                        virtualListSizeStyles.skeleton(\n                          typeof estimateSize === 'number' ? estimateSize : 40,\n                        ),\n                      ],\n                      delay: index * SHIMMER_STAGGER,\n                    },\n                    propsSkeleton,\n                  )}\n                />\n              </div>\n            ))\n          ) : (\n            empty\n          )}\n        </>\n      );\n      // 容器模式：列表元素就是 ScrollArea 的视口，滚动条是浮层的；跟着页面滚动时就是普通的 div\n      return isContainer ? (\n        <ScrollArea\n          axis={horizontal ? 'x' : 'y'}\n          focusable={false}\n          propsViewport={props as PartProps<'div'>}\n        >\n          {content}\n        </ScrollArea>\n      ) : (\n        <div {...elementProps(props)}>{content}</div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Watermark.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';
 /** 未声明的属性落到外层 div 上 */

package/dist/display/Watermark.js

@@ -1,7 +1,7 @@
 import { mergeAttrs } from "../utils/props.js";
 import { createVNode, onMounted, ref, watch } 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/display/Watermark.tsx
 /** 未声明的属性落到外层 div 上 */
 /** Watermark 的样式：root、layer、fullscreen */

package/dist/display/Watermark.js.map

@@ -1 +1 @@
-{"version":3,"file":"Watermark.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/display/Watermark.tsx"],"sourcesContent":["/**\n * 水印：在内容上（或整页）铺满斜着的文字或图片，截图、拍屏时能看出来源（查看人、时间、密级）。\n *\n *   <Watermark content={['林小满', '2026-10-24']}>{report}</Watermark>\n *   <Watermark content=\"内部资料\" fullscreen />                       整页\n *   <Watermark image=\"/logo.svg\" width={120} height={40}>…</Watermark>\n *\n * 用 canvas 画一格（按设备像素比放大，高分屏不糊），作为一层盖在内容上的背景平铺：pointer-events: none，\n * 不挡点击与选择；aria-hidden，读屏不念。默认颜色是半透明的灰，亮色、暗色主题上都看得见、不抢内容。\n * 只是提示性的：前端的水印删得掉，真正的保密要靠服务端（导出时打水印、权限）。\n * 部件：Root（div：包着内容，position: relative）、Layer（div：水印那一层）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onMounted, watch, type VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface WatermarkProps extends PartProps<'div'> {\n  /** 文字：一行写字符串，多行写数组（姓名、日期） */\n  content?: string | readonly string[];\n  /** 图片地址：给了就画图片（同源或允许跨域的图片），不画文字 */\n  image?: string;\n  /** 图片的宽（px），默认 120 */\n  width?: number;\n  /** 图片的高（px），默认 40 */\n  height?: number;\n  /** 旋转角度（度），默认 -22 */\n  rotate?: number;\n  /** 每格之间的空隙 [横, 竖]（px），默认 [120, 100] */\n  gap?: readonly [number, number];\n  /** 字号（px），默认 14 */\n  fontSize?: number;\n  /** 颜色，默认半透明的灰 */\n  color?: string;\n  /** 盖住整页（position: fixed），而不只是包着的内容 */\n  fullscreen?: boolean;\n  /** 水印那一层的部件属性 */\n  propsLayer?: PartProps<'div'>;\n  children?: VNodeChild;\n}\n\n/** Watermark 的样式：root、layer、fullscreen */\nexport const watermarkStyles = css.create({\n  root: { position: 'relative' },\n  layer: {\n    position: 'absolute',\n    inset: 0,\n    zIndex: 9,\n    pointerEvents: 'none',\n    backgroundRepeat: 'repeat',\n    // Windows 高对比下系统会去掉背景图：水印本来就是装饰，不需要\n    forcedColorAdjust: 'auto',\n  },\n  fullscreen: { position: 'fixed', zIndex: 1000 },\n});\n\n/** 水印那一层的背景（data URL 与一格的大小） */\nexport const watermarkTileStyles = css.create({\n  tile: (url: string, size: string) => ({ backgroundImage: url, backgroundSize: size }),\n});\n\nconst DEFAULT_COLOR = 'rgba(128, 128, 128, 0.16)';\n\n/** 水印：一层不挡操作的平铺文字或图片 */\nexport const Watermark = _component(\n  ({\n    content,\n    image,\n    width = 120,\n    height = 40,\n    rotate = -22,\n    gap = [120, 100],\n    fontSize = 14,\n    color = DEFAULT_COLOR,\n    fullscreen = false,\n    propsLayer,\n    children,\n    ...rest\n  }: WatermarkProps) => {\n    // 一格的图（data URL）与它在页面上的大小（CSS px）\n    let tile = _state<{ url: string; width: number; height: number } | null>(null);\n\n    let drawing = 0;\n\n    /**\n     * 画一块平铺单元：两行两列的格子里斜对角各画一份（同 antd），平铺后相邻两行错开半格，铺得匀；\n     * 每份居中、旋转，四周留出 gap 的一半\n     */\n    async function draw() {\n      if (typeof document === 'undefined') return;\n      const current = ++drawing;\n      const ratio = window.devicePixelRatio || 1;\n      const lines = typeof content === 'string' ? [content] : [...(content ?? [])];\n      const canvas = document.createElement('canvas');\n      const context = canvas.getContext('2d');\n      if (!context) return;\n      const font = `${fontSize}px sans-serif`;\n      context.font = font;\n      const lineHeight = fontSize * 1.4;\n      const [contentWidth, contentHeight] = image\n        ? [width, height]\n        : [\n            Math.max(1, ...lines.map((line) => context.measureText(line).width)),\n            lines.length * lineHeight,\n          ];\n      const cellWidth = contentWidth + gap[0];\n      const cellHeight = contentHeight + gap[1];\n      let picture: HTMLImageElement | undefined;\n      if (image) {\n        picture = new Image();\n        picture.crossOrigin = 'anonymous';\n        picture.src = image;\n        await picture.decode().catch(() => undefined);\n        // 等图片时参数又变了：交给后一次\n        if (current !== drawing) return;\n      }\n      canvas.width = cellWidth * 2 * ratio;\n      canvas.height = cellHeight * 2 * ratio;\n      context.scale(ratio, ratio);\n      // canvas 的尺寸改过之后要重新设字体\n      context.font = font;\n      context.fillStyle = color;\n      context.textAlign = 'center';\n      context.textBaseline = 'middle';\n      for (const [x, y] of [\n        [cellWidth / 2, cellHeight / 2],\n        [cellWidth * 1.5, cellHeight * 1.5],\n      ] as const) {\n        context.save();\n        context.translate(x, y);\n        context.rotate((rotate * Math.PI) / 180);\n        if (picture?.naturalWidth)\n          context.drawImage(picture, -width / 2, -height / 2, width, height);\n        else if (!image)\n          lines.forEach((line, index) =>\n            context.fillText(line, 0, (index - (lines.length - 1) / 2) * lineHeight),\n          );\n        context.restore();\n      }\n      tile = { url: canvas.toDataURL(), width: cellWidth * 2, height: cellHeight * 2 };\n    }\n\n    onMounted(() => void draw());\n    watch(\n      () => [content, image, width, height, rotate, gap, fontSize, color],\n      () => void draw(),\n      {\n        deep: true,\n      },\n    );\n\n    return () => {\n      const layer = (\n        <div\n          aria-hidden=\"true\"\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                watermarkStyles.layer,\n                fullscreen && watermarkStyles.fullscreen,\n                tile &&\n                  watermarkTileStyles.tile(`url(${tile.url})`, `${tile.width}px ${tile.height}px`),\n              ],\n            },\n            propsLayer,\n          )}\n          data-watermark=\"\"\n        />\n      );\n      // 整页且没有包着内容：只渲染那一层\n      if (fullscreen && children == null) return layer;\n      return (\n        <div {...mergeAttrs<'div'>({ sx: watermarkStyles.root }, rest)}>\n          {children}\n          {layer}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Watermark.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/display/Watermark.tsx"],"sourcesContent":["/**\n * 水印：在内容上（或整页）铺满斜着的文字或图片，截图、拍屏时能看出来源（查看人、时间、密级）。\n *\n *   <Watermark content={['林小满', '2026-10-24']}>{report}</Watermark>\n *   <Watermark content=\"内部资料\" fullscreen />                       整页\n *   <Watermark image=\"/logo.svg\" width={120} height={40}>…</Watermark>\n *\n * 用 canvas 画一格（按设备像素比放大，高分屏不糊），作为一层盖在内容上的背景平铺：pointer-events: none，\n * 不挡点击与选择；aria-hidden，读屏不念。默认颜色是半透明的灰，亮色、暗色主题上都看得见、不抢内容。\n * 只是提示性的：前端的水印删得掉，真正的保密要靠服务端（导出时打水印、权限）。\n * 部件：Root（div：包着内容，position: relative）、Layer（div：水印那一层）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onMounted, watch, type VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface WatermarkProps extends PartProps<'div'> {\n  /** 文字：一行写字符串，多行写数组（姓名、日期） */\n  content?: string | readonly string[];\n  /** 图片地址：给了就画图片（同源或允许跨域的图片），不画文字 */\n  image?: string;\n  /** 图片的宽（px），默认 120 */\n  width?: number;\n  /** 图片的高（px），默认 40 */\n  height?: number;\n  /** 旋转角度（度），默认 -22 */\n  rotate?: number;\n  /** 每格之间的空隙 [横, 竖]（px），默认 [120, 100] */\n  gap?: readonly [number, number];\n  /** 字号（px），默认 14 */\n  fontSize?: number;\n  /** 颜色，默认半透明的灰 */\n  color?: string;\n  /** 盖住整页（position: fixed），而不只是包着的内容 */\n  fullscreen?: boolean;\n  /** 水印那一层的部件属性 */\n  propsLayer?: PartProps<'div'>;\n  children?: VNodeChild;\n}\n\n/** Watermark 的样式：root、layer、fullscreen */\nexport const watermarkStyles = css.create({\n  root: { position: 'relative' },\n  layer: {\n    position: 'absolute',\n    inset: 0,\n    zIndex: 9,\n    pointerEvents: 'none',\n    backgroundRepeat: 'repeat',\n    // Windows 高对比下系统会去掉背景图：水印本来就是装饰，不需要\n    forcedColorAdjust: 'auto',\n  },\n  fullscreen: { position: 'fixed', zIndex: 1000 },\n});\n\n/** 水印那一层的背景（data URL 与一格的大小） */\nexport const watermarkTileStyles = css.create({\n  tile: (url: string, size: string) => ({ backgroundImage: url, backgroundSize: size }),\n});\n\nconst DEFAULT_COLOR = 'rgba(128, 128, 128, 0.16)';\n\n/** 水印：一层不挡操作的平铺文字或图片 */\nexport const Watermark = _component(\n  ({\n    content,\n    image,\n    width = 120,\n    height = 40,\n    rotate = -22,\n    gap = [120, 100],\n    fontSize = 14,\n    color = DEFAULT_COLOR,\n    fullscreen = false,\n    propsLayer,\n    children,\n    ...rest\n  }: WatermarkProps) => {\n    // 一格的图（data URL）与它在页面上的大小（CSS px）\n    let tile = _state<{ url: string; width: number; height: number } | null>(null);\n\n    let drawing = 0;\n\n    /**\n     * 画一块平铺单元：两行两列的格子里斜对角各画一份（同 antd），平铺后相邻两行错开半格，铺得匀；\n     * 每份居中、旋转，四周留出 gap 的一半\n     */\n    async function draw() {\n      if (typeof document === 'undefined') return;\n      const current = ++drawing;\n      const ratio = window.devicePixelRatio || 1;\n      const lines = typeof content === 'string' ? [content] : [...(content ?? [])];\n      const canvas = document.createElement('canvas');\n      const context = canvas.getContext('2d');\n      if (!context) return;\n      const font = `${fontSize}px sans-serif`;\n      context.font = font;\n      const lineHeight = fontSize * 1.4;\n      const [contentWidth, contentHeight] = image\n        ? [width, height]\n        : [\n            Math.max(1, ...lines.map((line) => context.measureText(line).width)),\n            lines.length * lineHeight,\n          ];\n      const cellWidth = contentWidth + gap[0];\n      const cellHeight = contentHeight + gap[1];\n      let picture: HTMLImageElement | undefined;\n      if (image) {\n        picture = new Image();\n        picture.crossOrigin = 'anonymous';\n        picture.src = image;\n        await picture.decode().catch(() => undefined);\n        // 等图片时参数又变了：交给后一次\n        if (current !== drawing) return;\n      }\n      canvas.width = cellWidth * 2 * ratio;\n      canvas.height = cellHeight * 2 * ratio;\n      context.scale(ratio, ratio);\n      // canvas 的尺寸改过之后要重新设字体\n      context.font = font;\n      context.fillStyle = color;\n      context.textAlign = 'center';\n      context.textBaseline = 'middle';\n      for (const [x, y] of [\n        [cellWidth / 2, cellHeight / 2],\n        [cellWidth * 1.5, cellHeight * 1.5],\n      ] as const) {\n        context.save();\n        context.translate(x, y);\n        context.rotate((rotate * Math.PI) / 180);\n        if (picture?.naturalWidth)\n          context.drawImage(picture, -width / 2, -height / 2, width, height);\n        else if (!image)\n          lines.forEach((line, index) =>\n            context.fillText(line, 0, (index - (lines.length - 1) / 2) * lineHeight),\n          );\n        context.restore();\n      }\n      tile = { url: canvas.toDataURL(), width: cellWidth * 2, height: cellHeight * 2 };\n    }\n\n    onMounted(() => void draw());\n    watch(\n      () => [content, image, width, height, rotate, gap, fontSize, color],\n      () => void draw(),\n      {\n        deep: true,\n      },\n    );\n\n    return () => {\n      const layer = (\n        <div\n          aria-hidden=\"true\"\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                watermarkStyles.layer,\n                fullscreen && watermarkStyles.fullscreen,\n                tile &&\n                  watermarkTileStyles.tile(`url(${tile.url})`, `${tile.width}px ${tile.height}px`),\n              ],\n            },\n            propsLayer,\n          )}\n          data-watermark=\"\"\n        />\n      );\n      // 整页且没有包着内容：只渲染那一层\n      if (fullscreen && children == null) return layer;\n      return (\n        <div {...mergeAttrs<'div'>({ sx: watermarkStyles.root }, rest)}>\n          {children}\n          {layer}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/docs-kit/CodeGroup.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 CodeBlockProps } from '../base/CodeBlock';
 import { type TabListProps } from '../navigation/Tabs';
 import { type PartProps } from '../utils/props';

package/dist/docs-kit/CodeGroup.js

@@ -4,7 +4,7 @@ import { CodeBlock } from "../base/CodeBlock.js";
 import { Tab, TabList, TabPanel, Tabs } from "../navigation/Tabs.js";
 import { createVNode } from "vue";
 import { _component, bindable, 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/docs-kit/CodeGroup.tsx
 /** 一组代码里的一段 */
 /** 未声明的属性落到外层的 div 上 */

package/dist/docs-kit/CodeGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeGroup.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/docs-kit/CodeGroup.tsx"],"sourcesContent":["/**\n * 一组代码，用标签页切换：安装命令（pnpm / npm / yarn）、同一段逻辑的几个文件。由 Tabs 与 CodeBlock 组合，\n * 标签栏就是代码块的标题栏。\n *\n *   <CodeGroup items={[\n *     { label: 'pnpm', code: 'pnpm add @zerodep-dev/vue-tsx-pro-ui', lang: 'bash' },\n *     { label: 'npm', code: 'npm i @zerodep-dev/vue-tsx-pro-ui', lang: 'bash' },\n *   ]} />\n *\n * 选中哪一个可以双向绑定（_value={manager}），几组代码绑同一个变量就一起切换。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { CodeBlock, type CodeBlockProps } from '../base/CodeBlock';\nimport { Tab, TabList, TabPanel, Tabs, type TabListProps } from '../navigation/Tabs';\nimport { mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 一组代码里的一段 */\nexport interface CodeGroupItem extends Omit<CodeBlockProps, 'title'> {\n  /** 标签上的文字；也是这一段的值（没给 value 时） */\n  label: string;\n  /** 这一段的值，默认等于 label */\n  value?: string;\n}\n\n/** 未声明的属性落到外层的 div 上 */\nexport interface CodeGroupProps extends PartProps<'div'> {\n  /** 各段代码 */\n  items: readonly CodeGroupItem[];\n  /** 选中的那一段的值：父级可以写 _value={x}；默认第一段 */\n  _value?: string;\n  /** 标签栏的部件属性；名称（aria-label）默认是各段标签连起来 */\n  propsList?: Partial<TabListProps>;\n}\n\n/** CodeGroup 的样式：外框与标签栏；代码块去掉自己的外框 */\nexport const codeGroupStyles = css.create({\n  root: {\n    minWidth: 0,\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    overflow: 'hidden',\n  },\n  list: { paddingInline: '_sm', backgroundColor: '_surfaceMuted', fontSize: '_sm' },\n  panel: { outlineOffset: `calc(-1 * ${t.borderWidths.sm})` },\n  block: { borderWidth: 0, borderRadius: 0 },\n});\n\nconst keyOf = (item: CodeGroupItem) => item.value ?? item.label;\n\n/** 一组代码，标签页切换 */\nexport const CodeGroup = _component(\n  ({\n    items,\n    _value: value = _bindable<string | undefined>(undefined),\n    propsList,\n    ...rest\n  }: CodeGroupProps) =>\n    () => {\n      const selected = value ?? (items[0] && keyOf(items[0]));\n      return (\n        <div {...mergeAttrs<'div'>({ sx: codeGroupStyles.root }, rest)}>\n          <Tabs\n            _value={selected}\n            // 默认选第一段时 value 是 undefined，不能直接 _bind：选中时写回\n            onUpdate:_value={(next: string) => (value = next)}\n            size=\"sm\"\n          >\n            <TabList\n              {...mergePartProps<TabListProps>(\n                {\n                  sx: codeGroupStyles.list,\n                  'aria-label': items.map((item) => item.label).join(' / '),\n                },\n                propsList,\n              )}\n            >\n              {items.map((item) => (\n                <Tab key={keyOf(item)} value={keyOf(item)}>\n                  {item.label}\n                </Tab>\n              ))}\n            </TabList>\n            {items.map((item) => {\n              const { label: _label, value: _value, propsRoot, ...block } = item;\n              return (\n                <TabPanel key={keyOf(item)} value={keyOf(item)} sx={codeGroupStyles.panel}>\n                  <CodeBlock\n                    {...block}\n                    propsRoot={mergeProps<'div'>({ sx: codeGroupStyles.block }, propsRoot)}\n                  />\n                </TabPanel>\n              );\n            })}\n          </Tabs>\n        </div>\n      );\n    },\n);\n"],"mappings":";;;;;;;;;;;AAqCA,IAAa,kBAAkB,IAAI,OAAO;CACxC,MAAM;EACJ,UAAU;EACV,aAAa;EACb,aAAa;EACb,aAAa;EACb,cAAc;EACd,iBAAiB;EACjB,UAAU;CACZ;CACA,MAAM;EAAE,eAAe;EAAO,iBAAiB;EAAiB,UAAU;CAAM;CAChF,OAAO,EAAE,eAAe,aAAa,EAAE,aAAa,GAAE,GAAI;CAC1D,OAAO;EAAE,aAAa;EAAG,cAAc;CAAE;AAC3C,CAAC;AAED,IAAM,SAAS,SAAwB,KAAK,SAAS,KAAK;;AAG1D,IAAa,YAAY,0BACvB,QAAA,SAAA;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAC,SAAA,QAAA,gBAEgD,KAAA,GAAS,KAAA,IAAA;CAAA,MAAA,YAAAD,aAAA,QAAA,WAAA;CAAA,MAEpD,OAAIE,UAAA,QAAA,MAAA,IAAA;CAAA,aAED;EACJ,MAAM,WAAW,MAAA,UAAU,MAAA,MAAM,MAAM,MAAM,MAAA,MAAM,EAAE;EACrD,OAAAC,YAAA,OACW,WAAkB,EAAE,IAAI,gBAAgB,KAAK,GAAG,IAAI,GAAC,CAAAA,YAAA,MAAA;GAAA,UAElD;GAAQ,mBAAA,OAAA,OAAA,OAAA,MAEE,SAAkB,MAAA,QAAQ;GAAK,QAAA;GAAA,OAAA;EAAA,GAAA;GAAA,eAAA,CAAAA,YAAA,SAAAC,cAI3C,eACF;IACE,IAAI,gBAAgB;IACpB,cAAc,MAAA,MAAM,KAAK,SAAS,KAAK,KAAK,CAAC,CAAC,KAAK,KAAK;GAC1D,GAAC,UAAA,KAEH,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAEA,MAAA,MAAM,KAAK,SAAID,YAAA,KAAA;KAAA,OACJ,MAAM,IAAI;KAAC,SAAS,MAAM,IAAI;IAAC,GAAA,EAAA,eAAA,CACtC,KAAK,KAAK,EAAA,CAAA,CAEd,CAAC;IAAA,SAAA;GAAA,CAAA,GAEH,MAAA,MAAM,KAAK,SAAS;IACnB,MAAM,EAAE,OAAO,QAAQ,OAAO,QAAQ,WAAW,GAAG,UAAU;IAC9D,OAAAA,YAAA,UAAA;KAAA,OACiB,MAAM,IAAI;KAAC,SAAS,MAAM,IAAI;KAAC,MAAM,gBAAgB;IAAK,GAAA,EAAA,eAAA,CAAAA,YAAA,WAAAC,cAEjE,OAAK,EAAA,aACE,WAAkB,EAAE,IAAI,gBAAgB,MAAM,GAAG,SAAS,EAAC,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA;GAI9E,CAAC,CAAC;GAAA,SAAA;EAAA,CAAA,CAAA,CAAA;CAIV;AAAC,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}
+{"version":3,"file":"CodeGroup.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/docs-kit/CodeGroup.tsx"],"sourcesContent":["/**\n * 一组代码，用标签页切换：安装命令（pnpm / npm / yarn）、同一段逻辑的几个文件。由 Tabs 与 CodeBlock 组合，\n * 标签栏就是代码块的标题栏。\n *\n *   <CodeGroup items={[\n *     { label: 'pnpm', code: 'pnpm add @zerodep-dev/vue-tsx-pro-ui', lang: 'bash' },\n *     { label: 'npm', code: 'npm i @zerodep-dev/vue-tsx-pro-ui', lang: 'bash' },\n *   ]} />\n *\n * 选中哪一个可以双向绑定（_value={manager}），几组代码绑同一个变量就一起切换。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { CodeBlock, type CodeBlockProps } from '../base/CodeBlock';\nimport { Tab, TabList, TabPanel, Tabs, type TabListProps } from '../navigation/Tabs';\nimport { mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 一组代码里的一段 */\nexport interface CodeGroupItem extends Omit<CodeBlockProps, 'title'> {\n  /** 标签上的文字；也是这一段的值（没给 value 时） */\n  label: string;\n  /** 这一段的值，默认等于 label */\n  value?: string;\n}\n\n/** 未声明的属性落到外层的 div 上 */\nexport interface CodeGroupProps extends PartProps<'div'> {\n  /** 各段代码 */\n  items: readonly CodeGroupItem[];\n  /** 选中的那一段的值：父级可以写 _value={x}；默认第一段 */\n  _value?: string;\n  /** 标签栏的部件属性；名称（aria-label）默认是各段标签连起来 */\n  propsList?: Partial<TabListProps>;\n}\n\n/** CodeGroup 的样式：外框与标签栏；代码块去掉自己的外框 */\nexport const codeGroupStyles = css.create({\n  root: {\n    minWidth: 0,\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    overflow: 'hidden',\n  },\n  list: { paddingInline: '_sm', backgroundColor: '_surfaceMuted', fontSize: '_sm' },\n  panel: { outlineOffset: `calc(-1 * ${t.borderWidths.sm})` },\n  block: { borderWidth: 0, borderRadius: 0 },\n});\n\nconst keyOf = (item: CodeGroupItem) => item.value ?? item.label;\n\n/** 一组代码，标签页切换 */\nexport const CodeGroup = _component(\n  ({\n    items,\n    _value: value = _bindable<string | undefined>(undefined),\n    propsList,\n    ...rest\n  }: CodeGroupProps) =>\n    () => {\n      const selected = value ?? (items[0] && keyOf(items[0]));\n      return (\n        <div {...mergeAttrs<'div'>({ sx: codeGroupStyles.root }, rest)}>\n          <Tabs\n            _value={selected}\n            // 默认选第一段时 value 是 undefined，不能直接 _bind：选中时写回\n            onUpdate:_value={(next: string) => (value = next)}\n            size=\"sm\"\n          >\n            <TabList\n              {...mergePartProps<TabListProps>(\n                {\n                  sx: codeGroupStyles.list,\n                  'aria-label': items.map((item) => item.label).join(' / '),\n                },\n                propsList,\n              )}\n            >\n              {items.map((item) => (\n                <Tab key={keyOf(item)} value={keyOf(item)}>\n                  {item.label}\n                </Tab>\n              ))}\n            </TabList>\n            {items.map((item) => {\n              const { label: _label, value: _value, propsRoot, ...block } = item;\n              return (\n                <TabPanel key={keyOf(item)} value={keyOf(item)} sx={codeGroupStyles.panel}>\n                  <CodeBlock\n                    {...block}\n                    propsRoot={mergeProps<'div'>({ sx: codeGroupStyles.block }, propsRoot)}\n                  />\n                </TabPanel>\n              );\n            })}\n          </Tabs>\n        </div>\n      );\n    },\n);\n"],"mappings":";;;;;;;;;;;AAqCA,IAAa,kBAAkB,IAAI,OAAO;CACxC,MAAM;EACJ,UAAU;EACV,aAAa;EACb,aAAa;EACb,aAAa;EACb,cAAc;EACd,iBAAiB;EACjB,UAAU;CACZ;CACA,MAAM;EAAE,eAAe;EAAO,iBAAiB;EAAiB,UAAU;CAAM;CAChF,OAAO,EAAE,eAAe,aAAa,EAAE,aAAa,GAAE,GAAI;CAC1D,OAAO;EAAE,aAAa;EAAG,cAAc;CAAE;AAC3C,CAAC;AAED,IAAM,SAAS,SAAwB,KAAK,SAAS,KAAK;;AAG1D,IAAa,YAAY,0BACvB,QAAA,SAAA;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAC,SAAA,QAAA,gBAEgD,KAAA,GAAS,KAAA,IAAA;CAAA,MAAA,YAAAD,aAAA,QAAA,WAAA;CAAA,MAEpD,OAAIE,UAAA,QAAA,MAAA,IAAA;CAAA,aAED;EACJ,MAAM,WAAW,MAAA,UAAU,MAAA,MAAM,MAAM,MAAM,MAAA,MAAM,EAAE;EACrD,OAAAC,YAAA,OACW,WAAkB,EAAE,IAAI,gBAAgB,KAAK,GAAG,IAAI,GAAC,CAAAA,YAAA,MAAA;GAAA,UAElD;GAAQ,mBAAA,OAAA,OAAA,OAAA,MAEE,SAAkB,MAAA,QAAQ;GAAK,QAAA;GAAA,OAAA;EAAA,GAAA;GAAA,eAAA,CAAAA,YAAA,SAAAC,cAI3C,eACF;IACE,IAAI,gBAAgB;IACpB,cAAc,MAAA,MAAM,KAAK,SAAS,KAAK,KAAK,CAAC,CAAC,KAAK,KAAK;GAC1D,GAAC,UAAA,KAEH,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAEA,MAAA,MAAM,KAAK,SAAID,YAAA,KAAA;KAAA,OACJ,MAAM,IAAI;KAAC,SAAS,MAAM,IAAI;IAAC,GAAA,EAAA,eAAA,CACtC,KAAK,KAAK,EAAA,CAAA,CAEd,CAAC;IAAA,SAAA;GAAA,CAAA,GAEH,MAAA,MAAM,KAAK,SAAS;IACnB,MAAM,EAAE,OAAO,QAAQ,OAAO,QAAQ,WAAW,GAAG,UAAU;IAC9D,OAAAA,YAAA,UAAA;KAAA,OACiB,MAAM,IAAI;KAAC,SAAS,MAAM,IAAI;KAAC,MAAM,gBAAgB;IAAK,GAAA,EAAA,eAAA,CAAAA,YAAA,WAAAC,cAEjE,OAAK,EAAA,aACE,WAAkB,EAAE,IAAI,gBAAgB,MAAM,GAAG,SAAS,EAAC,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA;GAI9E,CAAC,CAAC;GAAA,SAAA;EAAA,CAAA,CAAA,CAAA;CAIV;AAAC,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}

package/dist/docs-kit/CodePreview.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 ButtonProps } from '../base/Button';
 import { type CodeBlockProps } from '../base/CodeBlock';

package/dist/docs-kit/CodePreview.js

@@ -9,7 +9,7 @@ import { useMessages } from "../config/lang/messages.js";
 import { docsKitMessages } from "./messages.js";
 import { Fragment, createVNode, ref, useId, watch } from "vue";
 import { _component, bindable, childrenProp, childrenStable, 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 { Code } from "@lucide/icons";
 //#region src/docs-kit/CodePreview.tsx
 /**

package/dist/docs-kit/CodePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodePreview.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps","_Fragment","CodeIcon","_vtp_childrenStable"],"sources":["../../src/docs-kit/CodePreview.tsx"],"sourcesContent":["/**\n * 代码示例卡片：上面是运行中的效果，下面是它的源码（可以收起、复制）。文档站的每个示例都是一张。\n *\n *   import source from './Basic.tsx?raw';\n *   <CodePreview code={source}>\n *     <Basic />\n *   </CodePreview>\n *\n * 效果与源码由使用方各自给出（组件本身不执行代码）：示例组件照常 import，源码用 Vite 的 ?raw 导入同一个文件，\n * 两者永远一致。源码默认收起，“显示代码”按钮带 aria-expanded / aria-controls；复制按钮一直在工具栏上。\n * 示例多的页面可以按需加载源码：`code={() => import('./Basic.tsx?raw').then((m) => m.default)}`，\n * 指针移到、焦点进入工具栏或展开时才取，源码不进页面的块。\n * actions 往工具栏最前面加按钮，例如文档站的“在演练场里编辑”。\n * 外框是 Card（outline），源码是 CodeBlock，收起展开用 Collapse（高度过渡，收起后页内搜索仍能找到）。\n */\nimport { Code as CodeIcon } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, watch, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { CodeBlock, type CodeBlockProps } from '../base/CodeBlock';\nimport { CopyButton, type CopyButtonProps } from '../base/CopyButton';\nimport { useMessages } from '../config/lang/messages';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport { Card, type CardProps } from '../display/Card';\nimport { Collapse, type CollapseProps } from '../display/Collapse';\nimport { docsKitMessages } from './messages';\n\n/** 效果区的排列 */\nexport interface CodePreviewAligns {\n  /** 从起始边排起、占满宽度（默认）：表单、卡片、长内容 */\n  start: unknown;\n  /** 居中：单个按钮、图标这类小东西 */\n  center: unknown;\n}\n\n/** 未声明的属性落到外框（Card 的 div）上 */\nexport interface CodePreviewProps extends PartProps<'div'> {\n  /** 源码；或按需加载的函数：指针移到、焦点进入工具栏、展开或复制时才调用（只调用一次） */\n  code: string | (() => Promise<string>);\n  /** 源码的语言，默认 tsx */\n  lang?: string;\n  /** 是否显示源码：父级可以写 _showCode={x}；默认收起 */\n  _showCode?: boolean;\n  /** 效果区的排列，默认 start */\n  align?: keyof CodePreviewAligns;\n  /** 源码超过这么多行时折叠（见 CodeBlock 的 maxLines）；不写时不折叠 */\n  maxLines?: number;\n  /** 工具栏上额外的操作，排在“显示代码”前面 */\n  actions?: VNodeChild;\n  /** 运行中的效果 */\n  children?: VNodeChild;\n  /** 外框（Card）的部件属性 */\n  propsCard?: Partial<CardProps>;\n  /** 效果区的部件属性（外层，背景、最小高度写在这里） */\n  propsPreview?: PartProps<'div'>;\n  /** 效果区里横向滚动的 ScrollArea 的部件属性 */\n  propsPreviewScroll?: Partial<ScrollAreaProps>;\n  /** 工具栏的部件属性 */\n  propsToolbar?: PartProps<'div'>;\n  /** “显示代码”按钮的部件属性 */\n  propsToggle?: Partial<ButtonProps>;\n  /** 复制按钮的部件属性 */\n  propsCopy?: Partial<CopyButtonProps>;\n  /** 源码收起展开的部件属性 */\n  propsCollapse?: Partial<CollapseProps>;\n  /** 源码（CodeBlock）的部件属性 */\n  propsCode?: Partial<CodeBlockProps>;\n}\n\n/** CodePreview 的样式：preview、center、footer、toolbar、code */\nexport const codePreviewStyles = css.create({\n  // 效果区：给了最小高度时，效果在里面上下居中\n  preview: { display: 'flex', flexDirection: 'column', justifyContent: 'center' },\n  // 效果的排布：靠起始边时示例占满宽度（里面的网格、卡片按整块宽度排），居中时按内容宽度居中；\n  // 宽内容（表格）在外面的 ScrollArea 里横向滚动，不撑宽卡片\n  layout: {\n    display: 'grid',\n    alignItems: 'center',\n    gap: '_md',\n    padding: '_xl',\n  },\n  center: { justifyItems: 'center' },\n  // Card 的页脚默认是一行靠右的按钮：这里是工具栏加源码，上下排\n  footer: { display: 'block', padding: 0 },\n  toolbar: { display: 'flex', justifyContent: 'flex-end', gap: '_xs', padding: '_xs' },\n  // 源码贴着卡片：去掉 CodeBlock 自己的边框与圆角，只留与工具栏之间的分隔线\n  code: {\n    borderWidth: 0,\n    borderTopWidth: '_xs',\n    borderRadius: 0,\n  },\n});\n\n/** 代码示例卡片：效果 + 可收起的源码 + 复制 */\nexport const CodePreview = _component(\n  ({\n    code,\n    lang = 'tsx',\n    _showCode: showCode = _bindable(false),\n    align = 'start',\n    maxLines,\n    actions,\n    children,\n    propsCard,\n    propsPreview,\n    propsPreviewScroll,\n    propsToolbar,\n    propsToggle,\n    propsCopy,\n    propsCollapse,\n    propsCode,\n    ...rest\n  }: CodePreviewProps) => {\n    const messages = useMessages('docsKit', docsKitMessages);\n    const codeId = useId();\n    // 收起的源码先按纯文本渲染（页内搜索照样找得到）：要显示时才高亮。指针移到、焦点落到“显示代码”上就开始，\n    // 点下去时多半已经高亮好了。一页十来个示例，打开页面时不必一次高亮全部\n    let wanted = _state(false);\n    // 按需加载的源码：同一个加载函数只取一次；换了加载函数（示例热更新）就重新取\n    let loaded = _state<string | null>(null);\n    let loadedFrom: unknown;\n    let pending: Promise<string> | undefined;\n    const source = () => (typeof code === 'string' ? code : loadedFrom === code ? loaded : null);\n    function load(): string | Promise<string> {\n      if (typeof code === 'string') return code;\n      if (loadedFrom === code) return loaded ?? pending!;\n      const from = code;\n      loadedFrom = from;\n      loaded = null;\n      pending = from().then((text) => {\n        if (loadedFrom === from) loaded = text;\n        return text;\n      });\n      return pending;\n    }\n    const prepare = () => {\n      wanted = true;\n      void load();\n    };\n    watch(\n      () => showCode,\n      (shown) => shown && void load(),\n      { immediate: true },\n    );\n    return () => (\n      <Card\n        {...mergePartProps<CardProps>(\n          { variant: 'outline', padding: 'none', propsFooter: { sx: codePreviewStyles.footer } },\n          propsCard,\n          rest as Partial<CardProps>,\n        )}\n        footer={\n          <>\n            <div\n              {...mergeAttrs<'div'>({ sx: codePreviewStyles.toolbar }, propsToolbar, {\n                // 工具栏上的意图（要看、要复制、要编辑）：开始加载与高亮，点下去时多半已经好了\n                onPointerenter: prepare,\n                onFocusin: prepare,\n              })}\n            >\n              {actions}\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { variant: 'ghost', tone: 'neutral', size: 'sm', icon: CodeIcon },\n                  propsToggle,\n                  {\n                    'aria-expanded': showCode,\n                    'aria-controls': codeId,\n                    onClick: () => (showCode = !showCode),\n                  },\n                )}\n              >\n                {showCode ? messages.hideCode : messages.showCode}\n              </Button>\n              <CopyButton\n                {...mergePartProps<CopyButtonProps>(\n                  {\n                    variant: 'ghost',\n                    tone: 'neutral',\n                    size: 'sm',\n                    value: () => source() ?? load(),\n                  },\n                  propsCopy,\n                )}\n              />\n            </div>\n            <Collapse\n              {...mergePartProps<CollapseProps>({}, propsCollapse, { id: codeId })}\n              _open={showCode}\n            >\n              <CodeBlock\n                {...mergePartProps<CodeBlockProps>(\n                  {\n                    code: source() ?? '',\n                    lang,\n                    highlight: showCode || wanted,\n                    maxLines,\n                    copyable: false,\n                    propsRoot: { sx: codePreviewStyles.code },\n                  },\n                  propsCode,\n                )}\n              />\n            </Collapse>\n          </>\n        }\n      >\n        <div\n          {...mergeAttrs<'div'>({ sx: codePreviewStyles.preview }, propsPreview, {\n            role: 'group',\n            'aria-label': messages.preview,\n          })}\n        >\n          <ScrollArea {...mergePartProps<ScrollAreaProps>({ axis: 'x' }, propsPreviewScroll)}>\n            <div\n              {...mergeAttrs<'div'>({\n                sx: [codePreviewStyles.layout, align === 'center' && codePreviewStyles.center],\n              })}\n            >\n              {children}\n            </div>\n          </ScrollArea>\n        </div>\n      </Card>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"CodePreview.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps","_Fragment","CodeIcon","_vtp_childrenStable"],"sources":["../../src/docs-kit/CodePreview.tsx"],"sourcesContent":["/**\n * 代码示例卡片：上面是运行中的效果，下面是它的源码（可以收起、复制）。文档站的每个示例都是一张。\n *\n *   import source from './Basic.tsx?raw';\n *   <CodePreview code={source}>\n *     <Basic />\n *   </CodePreview>\n *\n * 效果与源码由使用方各自给出（组件本身不执行代码）：示例组件照常 import，源码用 Vite 的 ?raw 导入同一个文件，\n * 两者永远一致。源码默认收起，“显示代码”按钮带 aria-expanded / aria-controls；复制按钮一直在工具栏上。\n * 示例多的页面可以按需加载源码：`code={() => import('./Basic.tsx?raw').then((m) => m.default)}`，\n * 指针移到、焦点进入工具栏或展开时才取，源码不进页面的块。\n * actions 往工具栏最前面加按钮，例如文档站的“在演练场里编辑”。\n * 外框是 Card（outline），源码是 CodeBlock，收起展开用 Collapse（高度过渡，收起后页内搜索仍能找到）。\n */\nimport { Code as CodeIcon } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, watch, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { CodeBlock, type CodeBlockProps } from '../base/CodeBlock';\nimport { CopyButton, type CopyButtonProps } from '../base/CopyButton';\nimport { useMessages } from '../config/lang/messages';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport { Card, type CardProps } from '../display/Card';\nimport { Collapse, type CollapseProps } from '../display/Collapse';\nimport { docsKitMessages } from './messages';\n\n/** 效果区的排列 */\nexport interface CodePreviewAligns {\n  /** 从起始边排起、占满宽度（默认）：表单、卡片、长内容 */\n  start: unknown;\n  /** 居中：单个按钮、图标这类小东西 */\n  center: unknown;\n}\n\n/** 未声明的属性落到外框（Card 的 div）上 */\nexport interface CodePreviewProps extends PartProps<'div'> {\n  /** 源码；或按需加载的函数：指针移到、焦点进入工具栏、展开或复制时才调用（只调用一次） */\n  code: string | (() => Promise<string>);\n  /** 源码的语言，默认 tsx */\n  lang?: string;\n  /** 是否显示源码：父级可以写 _showCode={x}；默认收起 */\n  _showCode?: boolean;\n  /** 效果区的排列，默认 start */\n  align?: keyof CodePreviewAligns;\n  /** 源码超过这么多行时折叠（见 CodeBlock 的 maxLines）；不写时不折叠 */\n  maxLines?: number;\n  /** 工具栏上额外的操作，排在“显示代码”前面 */\n  actions?: VNodeChild;\n  /** 运行中的效果 */\n  children?: VNodeChild;\n  /** 外框（Card）的部件属性 */\n  propsCard?: Partial<CardProps>;\n  /** 效果区的部件属性（外层，背景、最小高度写在这里） */\n  propsPreview?: PartProps<'div'>;\n  /** 效果区里横向滚动的 ScrollArea 的部件属性 */\n  propsPreviewScroll?: Partial<ScrollAreaProps>;\n  /** 工具栏的部件属性 */\n  propsToolbar?: PartProps<'div'>;\n  /** “显示代码”按钮的部件属性 */\n  propsToggle?: Partial<ButtonProps>;\n  /** 复制按钮的部件属性 */\n  propsCopy?: Partial<CopyButtonProps>;\n  /** 源码收起展开的部件属性 */\n  propsCollapse?: Partial<CollapseProps>;\n  /** 源码（CodeBlock）的部件属性 */\n  propsCode?: Partial<CodeBlockProps>;\n}\n\n/** CodePreview 的样式：preview、center、footer、toolbar、code */\nexport const codePreviewStyles = css.create({\n  // 效果区：给了最小高度时，效果在里面上下居中\n  preview: { display: 'flex', flexDirection: 'column', justifyContent: 'center' },\n  // 效果的排布：靠起始边时示例占满宽度（里面的网格、卡片按整块宽度排），居中时按内容宽度居中；\n  // 宽内容（表格）在外面的 ScrollArea 里横向滚动，不撑宽卡片\n  layout: {\n    display: 'grid',\n    alignItems: 'center',\n    gap: '_md',\n    padding: '_xl',\n  },\n  center: { justifyItems: 'center' },\n  // Card 的页脚默认是一行靠右的按钮：这里是工具栏加源码，上下排\n  footer: { display: 'block', padding: 0 },\n  toolbar: { display: 'flex', justifyContent: 'flex-end', gap: '_xs', padding: '_xs' },\n  // 源码贴着卡片：去掉 CodeBlock 自己的边框与圆角，只留与工具栏之间的分隔线\n  code: {\n    borderWidth: 0,\n    borderTopWidth: '_xs',\n    borderRadius: 0,\n  },\n});\n\n/** 代码示例卡片：效果 + 可收起的源码 + 复制 */\nexport const CodePreview = _component(\n  ({\n    code,\n    lang = 'tsx',\n    _showCode: showCode = _bindable(false),\n    align = 'start',\n    maxLines,\n    actions,\n    children,\n    propsCard,\n    propsPreview,\n    propsPreviewScroll,\n    propsToolbar,\n    propsToggle,\n    propsCopy,\n    propsCollapse,\n    propsCode,\n    ...rest\n  }: CodePreviewProps) => {\n    const messages = useMessages('docsKit', docsKitMessages);\n    const codeId = useId();\n    // 收起的源码先按纯文本渲染（页内搜索照样找得到）：要显示时才高亮。指针移到、焦点落到“显示代码”上就开始，\n    // 点下去时多半已经高亮好了。一页十来个示例，打开页面时不必一次高亮全部\n    let wanted = _state(false);\n    // 按需加载的源码：同一个加载函数只取一次；换了加载函数（示例热更新）就重新取\n    let loaded = _state<string | null>(null);\n    let loadedFrom: unknown;\n    let pending: Promise<string> | undefined;\n    const source = () => (typeof code === 'string' ? code : loadedFrom === code ? loaded : null);\n    function load(): string | Promise<string> {\n      if (typeof code === 'string') return code;\n      if (loadedFrom === code) return loaded ?? pending!;\n      const from = code;\n      loadedFrom = from;\n      loaded = null;\n      pending = from().then((text) => {\n        if (loadedFrom === from) loaded = text;\n        return text;\n      });\n      return pending;\n    }\n    const prepare = () => {\n      wanted = true;\n      void load();\n    };\n    watch(\n      () => showCode,\n      (shown) => shown && void load(),\n      { immediate: true },\n    );\n    return () => (\n      <Card\n        {...mergePartProps<CardProps>(\n          { variant: 'outline', padding: 'none', propsFooter: { sx: codePreviewStyles.footer } },\n          propsCard,\n          rest as Partial<CardProps>,\n        )}\n        footer={\n          <>\n            <div\n              {...mergeAttrs<'div'>({ sx: codePreviewStyles.toolbar }, propsToolbar, {\n                // 工具栏上的意图（要看、要复制、要编辑）：开始加载与高亮，点下去时多半已经好了\n                onPointerenter: prepare,\n                onFocusin: prepare,\n              })}\n            >\n              {actions}\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { variant: 'ghost', tone: 'neutral', size: 'sm', icon: CodeIcon },\n                  propsToggle,\n                  {\n                    'aria-expanded': showCode,\n                    'aria-controls': codeId,\n                    onClick: () => (showCode = !showCode),\n                  },\n                )}\n              >\n                {showCode ? messages.hideCode : messages.showCode}\n              </Button>\n              <CopyButton\n                {...mergePartProps<CopyButtonProps>(\n                  {\n                    variant: 'ghost',\n                    tone: 'neutral',\n                    size: 'sm',\n                    value: () => source() ?? load(),\n                  },\n                  propsCopy,\n                )}\n              />\n            </div>\n            <Collapse\n              {...mergePartProps<CollapseProps>({}, propsCollapse, { id: codeId })}\n              _open={showCode}\n            >\n              <CodeBlock\n                {...mergePartProps<CodeBlockProps>(\n                  {\n                    code: source() ?? '',\n                    lang,\n                    highlight: showCode || wanted,\n                    maxLines,\n                    copyable: false,\n                    propsRoot: { sx: codePreviewStyles.code },\n                  },\n                  propsCode,\n                )}\n              />\n            </Collapse>\n          </>\n        }\n      >\n        <div\n          {...mergeAttrs<'div'>({ sx: codePreviewStyles.preview }, propsPreview, {\n            role: 'group',\n            'aria-label': messages.preview,\n          })}\n        >\n          <ScrollArea {...mergePartProps<ScrollAreaProps>({ axis: 'x' }, propsPreviewScroll)}>\n            <div\n              {...mergeAttrs<'div'>({\n                sx: [codePreviewStyles.layout, align === 'center' && codePreviewStyles.center],\n              })}\n            >\n              {children}\n            </div>\n          </ScrollArea>\n        </div>\n      </Card>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/docs-kit/ColorSwatch.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';
 /** 未声明的属性落到外层 div 上 */

package/dist/docs-kit/ColorSwatch.js

@@ -4,7 +4,7 @@ import { readToken } from "../config/theme/theme.js";
 import { swatchStyles } from "../utils/style/swatch-styles.js";
 import { createVNode, onMounted, ref, shallowRef, watch } from "vue";
 import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/docs-kit/ColorSwatch.tsx
 /** 未声明的属性落到外层 div 上 */
 /** ColorSwatch 的样式：root、swatch、fill、label、value */

package/dist/docs-kit/ColorSwatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatch.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode"],"sources":["../../src/docs-kit/ColorSwatch.tsx"],"sourcesContent":["/**\n * 色块：一块颜色加它的名称与取值。主题文档里列调色板、设计 token 用。\n *\n *   <ColorSwatch color=\"#3e63dd\" label=\"品牌色\" />\n *   <ColorSwatch color={colors.accent} label=\"accent\" />   主题 token：取值按当前主题自动读出，换主题时跟着变\n *\n * 半透明的颜色（如 surfaceTranslucent）下面垫棋盘格，看得出透明度。色块是装饰，名称与取值是文字，读屏都能读到。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onMounted, watch, type VNodeChild } from 'vue';\nimport { useConfig } from '../config/context';\nimport { readToken } from '../config/theme/theme';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { swatchStyles } from '../utils/style/swatch-styles';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ColorSwatchProps extends PartProps<'div'> {\n  /** 颜色：任意 CSS 颜色，或主题 token（colors.accent） */\n  color: string;\n  /** 名称 */\n  label?: VNodeChild;\n  /** 显示的取值；不写时：普通颜色显示它本身，token 显示当前主题下的值；false 不显示 */\n  value?: VNodeChild | false;\n  /** 色块的部件属性 */\n  propsSwatch?: PartProps<'div'>;\n}\n\n/** ColorSwatch 的样式：root、swatch、fill、label、value */\nexport const colorSwatchStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_xs', minWidth: 0 },\n  // 棋盘格垫底、内描边画出边界（swatchStyles）；大色块的格子放大一倍\n  swatch: {\n    position: 'relative',\n    height: '3rem',\n    borderRadius: '_md',\n    overflow: 'hidden',\n    backgroundSize: '1rem 1rem',\n  },\n  fill: { position: 'absolute', inset: 0 },\n  label: { color: '_text', fontSize: '_sm', fontWeight: '_medium' },\n  value: { color: '_textMuted', fontFamily: '_mono', fontSize: '_xs' },\n});\n\n// 颜色是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** ColorSwatch 的动态样式：色块的颜色 */\nexport const colorSwatchDynamicStyles = css.create({\n  fill: (color: string) => ({ backgroundColor: color }),\n});\n\n/** 色块（div）：颜色、名称与取值 */\nexport const ColorSwatch = _component(\n  ({ color, label, value, propsSwatch, ...rest }: ColorSwatchProps) => {\n    const config = useConfig();\n    let swatch = _state.raw<HTMLElement | null>(null);\n    let resolved = _state('');\n\n    // token 在运行时是 var(--…)\n    const isToken = () => color.startsWith('var(');\n    // token 的值随主题变：挂载后、换主题后从色块上读\n    function resolve() {\n      if (swatch && isToken()) resolved = readToken(swatch, color);\n    }\n    onMounted(resolve);\n    watch(() => [config.theme, color], resolve, { flush: 'post' });\n\n    return () => {\n      const shown = value ?? (isToken() ? resolved : color);\n      return (\n        <div {...mergeAttrs<'div'>({ sx: colorSwatchStyles.root }, rest)}>\n          <div\n            {...mergeAttrs<'div'>(\n              { sx: [swatchStyles.checkerboard, colorSwatchStyles.swatch] },\n              propsSwatch,\n              {\n                ref: _toRef(swatch),\n                'aria-hidden': true,\n              },\n            )}\n          >\n            <div\n              {...mergeAttrs<'div'>({\n                sx: [\n                  colorSwatchStyles.fill,\n                  swatchStyles.ring,\n                  colorSwatchDynamicStyles.fill(String(color)),\n                ],\n              })}\n            />\n          </div>\n          {hasContent(label) && (\n            <span {...mergeAttrs<'span'>({ sx: colorSwatchStyles.label })}>{label}</span>\n          )}\n          {shown !== false && shown !== '' && (\n            <span {...mergeAttrs<'span'>({ sx: colorSwatchStyles.value })}>{shown}</span>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;AA6BA,IAAa,oBAAoB,IAAI,OAAO;CAC1C,MAAM;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;EAAO,UAAU;CAAE;CAE1E,QAAQ;EACN,UAAU;EACV,QAAQ;EACR,cAAc;EACd,UAAU;EACV,gBAAgB;CAClB;CACA,MAAM;EAAE,UAAU;EAAY,OAAO;CAAE;CACvC,OAAO;EAAE,OAAO;EAAS,UAAU;EAAO,YAAY;CAAU;CAChE,OAAO;EAAE,OAAO;EAAc,YAAY;EAAS,UAAU;CAAM;AACrE,CAAC;;AAID,IAAa,2BAA2B,IAAI,OAAO,EACjD,OAAO,WAAmB,EAAE,iBAAiB,MAAM,GACrD,CAAC;;AAGD,IAAa,cAAc,0BACzB,QAAA,SAAqE;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAA7B,OAAIC,UAAA,QAAA,MAAA,IAAA;CAC1C,MAAM,SAAS,UAAU;CACzB,IAAI,SAAMC,WAAkC,IAAI;CAChD,IAAI,WAAQC,IAAU,EAAE;CAGxB,MAAM,gBAAgB,MAAA,MAAM,WAAW,MAAM;CAE7C,SAAS,UAAU;EACjB,IAAI,OAAA,SAAU,QAAQ,GAAG,SAAA,QAAW,UAAS,OAAA,OAAA,MAAA,KAAc;CAC7D;CACA,UAAU,OAAO;CACjB,YAAY,CAAC,OAAO,OAAK,MAAA,KAAA,GAAU,SAAS,EAAE,OAAO,OAAO,CAAC;CAE7D,aAAa;EACX,MAAM,QAAQ,MAAA,UAAU,QAAQ,IAAC,SAAA,QAAA,MAAA;EACjC,OAAAC,YAAA,OACW,WAAkB,EAAE,IAAI,kBAAkB,KAAK,GAAG,IAAI,GAAC;GAAAA,YAAA,OAExD,WACF,EAAE,IAAI,CAAC,aAAa,cAAc,kBAAkB,MAAM,EAAE,GAAC,YAAA,OAE7D;IACE,KAAG;IACH,eAAe;GACjB,CACF,GAAC,CAAAA,YAAA,OAGK,WAAkB,EACpB,IAAI;IACF,kBAAkB;IAClB,aAAa;IAAI,IAAA,KACjB,yBAAyB,YAAI,CAAC,OAAM,MAAA,KAAM,CAAC,GAAA,IAAA;GAAA,EAE/C,CAAC,GAAC,IAAA,CAAA,CAAA;GAGL,WAAU,MAAA,KAAM,KAACA,YAAA,QACN,WAAmB,EAAE,IAAI,kBAAkB,MAAM,CAAC,GAAC,CAAA,MAAA,KAAA,CAAA;GAE9D,UAAU,SAAS,UAAU,MAAEA,YAAA,QACpB,WAAmB,EAAE,IAAI,kBAAkB,MAAM,CAAC,GAAC,CAAG,KAAK,CAAA;EACtE,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"ColorSwatch.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode"],"sources":["../../src/docs-kit/ColorSwatch.tsx"],"sourcesContent":["/**\n * 色块：一块颜色加它的名称与取值。主题文档里列调色板、设计 token 用。\n *\n *   <ColorSwatch color=\"#3e63dd\" label=\"品牌色\" />\n *   <ColorSwatch color={colors.accent} label=\"accent\" />   主题 token：取值按当前主题自动读出，换主题时跟着变\n *\n * 半透明的颜色（如 surfaceTranslucent）下面垫棋盘格，看得出透明度。色块是装饰，名称与取值是文字，读屏都能读到。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onMounted, watch, type VNodeChild } from 'vue';\nimport { useConfig } from '../config/context';\nimport { readToken } from '../config/theme/theme';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { swatchStyles } from '../utils/style/swatch-styles';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ColorSwatchProps extends PartProps<'div'> {\n  /** 颜色：任意 CSS 颜色，或主题 token（colors.accent） */\n  color: string;\n  /** 名称 */\n  label?: VNodeChild;\n  /** 显示的取值；不写时：普通颜色显示它本身，token 显示当前主题下的值；false 不显示 */\n  value?: VNodeChild | false;\n  /** 色块的部件属性 */\n  propsSwatch?: PartProps<'div'>;\n}\n\n/** ColorSwatch 的样式：root、swatch、fill、label、value */\nexport const colorSwatchStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_xs', minWidth: 0 },\n  // 棋盘格垫底、内描边画出边界（swatchStyles）；大色块的格子放大一倍\n  swatch: {\n    position: 'relative',\n    height: '3rem',\n    borderRadius: '_md',\n    overflow: 'hidden',\n    backgroundSize: '1rem 1rem',\n  },\n  fill: { position: 'absolute', inset: 0 },\n  label: { color: '_text', fontSize: '_sm', fontWeight: '_medium' },\n  value: { color: '_textMuted', fontFamily: '_mono', fontSize: '_xs' },\n});\n\n// 颜色是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** ColorSwatch 的动态样式：色块的颜色 */\nexport const colorSwatchDynamicStyles = css.create({\n  fill: (color: string) => ({ backgroundColor: color }),\n});\n\n/** 色块（div）：颜色、名称与取值 */\nexport const ColorSwatch = _component(\n  ({ color, label, value, propsSwatch, ...rest }: ColorSwatchProps) => {\n    const config = useConfig();\n    let swatch = _state.raw<HTMLElement | null>(null);\n    let resolved = _state('');\n\n    // token 在运行时是 var(--…)\n    const isToken = () => color.startsWith('var(');\n    // token 的值随主题变：挂载后、换主题后从色块上读\n    function resolve() {\n      if (swatch && isToken()) resolved = readToken(swatch, color);\n    }\n    onMounted(resolve);\n    watch(() => [config.theme, color], resolve, { flush: 'post' });\n\n    return () => {\n      const shown = value ?? (isToken() ? resolved : color);\n      return (\n        <div {...mergeAttrs<'div'>({ sx: colorSwatchStyles.root }, rest)}>\n          <div\n            {...mergeAttrs<'div'>(\n              { sx: [swatchStyles.checkerboard, colorSwatchStyles.swatch] },\n              propsSwatch,\n              {\n                ref: _toRef(swatch),\n                'aria-hidden': true,\n              },\n            )}\n          >\n            <div\n              {...mergeAttrs<'div'>({\n                sx: [\n                  colorSwatchStyles.fill,\n                  swatchStyles.ring,\n                  colorSwatchDynamicStyles.fill(String(color)),\n                ],\n              })}\n            />\n          </div>\n          {hasContent(label) && (\n            <span {...mergeAttrs<'span'>({ sx: colorSwatchStyles.label })}>{label}</span>\n          )}\n          {shown !== false && shown !== '' && (\n            <span {...mergeAttrs<'span'>({ sx: colorSwatchStyles.value })}>{shown}</span>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;AA6BA,IAAa,oBAAoB,IAAI,OAAO;CAC1C,MAAM;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;EAAO,UAAU;CAAE;CAE1E,QAAQ;EACN,UAAU;EACV,QAAQ;EACR,cAAc;EACd,UAAU;EACV,gBAAgB;CAClB;CACA,MAAM;EAAE,UAAU;EAAY,OAAO;CAAE;CACvC,OAAO;EAAE,OAAO;EAAS,UAAU;EAAO,YAAY;CAAU;CAChE,OAAO;EAAE,OAAO;EAAc,YAAY;EAAS,UAAU;CAAM;AACrE,CAAC;;AAID,IAAa,2BAA2B,IAAI,OAAO,EACjD,OAAO,WAAmB,EAAE,iBAAiB,MAAM,GACrD,CAAC;;AAGD,IAAa,cAAc,0BACzB,QAAA,SAAqE;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAA7B,OAAIC,UAAA,QAAA,MAAA,IAAA;CAC1C,MAAM,SAAS,UAAU;CACzB,IAAI,SAAMC,WAAkC,IAAI;CAChD,IAAI,WAAQC,IAAU,EAAE;CAGxB,MAAM,gBAAgB,MAAA,MAAM,WAAW,MAAM;CAE7C,SAAS,UAAU;EACjB,IAAI,OAAA,SAAU,QAAQ,GAAG,SAAA,QAAW,UAAS,OAAA,OAAA,MAAA,KAAc;CAC7D;CACA,UAAU,OAAO;CACjB,YAAY,CAAC,OAAO,OAAK,MAAA,KAAA,GAAU,SAAS,EAAE,OAAO,OAAO,CAAC;CAE7D,aAAa;EACX,MAAM,QAAQ,MAAA,UAAU,QAAQ,IAAC,SAAA,QAAA,MAAA;EACjC,OAAAC,YAAA,OACW,WAAkB,EAAE,IAAI,kBAAkB,KAAK,GAAG,IAAI,GAAC;GAAAA,YAAA,OAExD,WACF,EAAE,IAAI,CAAC,aAAa,cAAc,kBAAkB,MAAM,EAAE,GAAC,YAAA,OAE7D;IACE,KAAG;IACH,eAAe;GACjB,CACF,GAAC,CAAAA,YAAA,OAGK,WAAkB,EACpB,IAAI;IACF,kBAAkB;IAClB,aAAa;IAAI,IAAA,KACjB,yBAAyB,YAAI,CAAC,OAAM,MAAA,KAAM,CAAC,GAAA,IAAA;GAAA,EAE/C,CAAC,GAAC,IAAA,CAAA,CAAA;GAGL,WAAU,MAAA,KAAM,KAACA,YAAA,QACN,WAAmB,EAAE,IAAI,kBAAkB,MAAM,CAAC,GAAC,CAAA,MAAA,KAAA,CAAA;GAE9D,UAAU,SAAS,UAAU,MAAEA,YAAA,QACpB,WAAmB,EAAE,IAAI,kBAAkB,MAAM,CAAC,GAAC,CAAG,KAAK,CAAA;EACtE,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/docs-kit/PropsTable.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 TableProps } from '../table/Table';
 /** prop 的种类：文档里分开列出 */

package/dist/docs-kit/PropsTable.js

@@ -6,7 +6,7 @@ import { useMessages } from "../config/lang/messages.js";
 import { docsKitMessages } from "./messages.js";
 import { createTextVNode, createVNode, unref } from "vue";
 import { _component, 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/docs-kit/PropsTable.tsx
 /** prop 的种类：文档里分开列出 */
 /** 档位类 prop 的一个可选值 */

package/dist/docs-kit/PropsTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropsTable.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","_vue_unref","_createTextVNode"],"sources":["../../src/docs-kit/PropsTable.tsx"],"sourcesContent":["/**\n * 组件 API 的表格：一行一个 prop，列出名称、类型、默认值与说明；档位类的 prop 在说明下列出每个可选值的含义。\n * 文档站用它展示从类型与 JSDoc 生成的数据（ComponentApi），也可以手写数据给自己的组件做文档。\n *\n *   <PropsTable props={api.props.filter((prop) => prop.kind === 'prop')} />\n *\n * 必填的 prop 名称旁标“必填”，能 `_bind` 双向绑定的标“可绑定”（文案见 messages.ts）。外层是静态表格 Table，窄屏时横向滚动。\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 { Badge } from '../base/Badge';\nimport { Code } from '../base/Code';\nimport { useMessages } from '../config/lang/messages';\nimport { hasContent, mergeAttrs, mergePartProps } from '../utils/props';\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeaderCell,\n  TableRow,\n  type TableProps,\n} from '../table/Table';\nimport { docsKitMessages } from './messages';\n\n/** prop 的种类：文档里分开列出 */\nexport interface ApiPropKinds {\n  /** 普通属性：外观、状态、数据 */\n  prop: unknown;\n  /** 部件属性（propsXxx）：透传给内部的某个部件 */\n  part: unknown;\n  /** 事件（onXxx） */\n  event: unknown;\n  /** 内容：children 与渲染函数（renderXxx） */\n  content: unknown;\n}\n\n/** 档位类 prop 的一个可选值 */\nexport interface ApiValue {\n  /** 取值 */\n  value: string;\n  /** 这个值的含义；没有注释时为空 */\n  description: string;\n}\n\n/** 一个 prop 的文档数据 */\nexport interface ApiProp {\n  /** 名称 */\n  name: string;\n  /** 种类 */\n  kind: keyof ApiPropKinds;\n  /** 类型（源码里写的样子，如 `keyof ButtonVariants`） */\n  type: string;\n  /** 必填 */\n  required: boolean;\n  /** 默认值（源码表达式，如 `'button'`、`false`）；没有时不显示 */\n  default?: string;\n  /** 能用 `_bind` 双向绑定 */\n  bindable?: boolean;\n  /** 说明 */\n  description: string;\n  /** 档位类的可选值与各自的含义 */\n  values?: ApiValue[];\n}\n\n/** 一个组件的 API 文档数据 */\nexport interface ComponentApi {\n  /** Props 接口的名字 */\n  name: string;\n  /** 组件名：ButtonProps → Button；泛型组件的 SelectBaseProps → Select */\n  component: string;\n  /** 接口的说明（如“未声明的属性落到 button 上”） */\n  description: string;\n  /** 各个 prop */\n  props: ApiProp[];\n}\n\n/** 未声明的属性落到 table 上 */\nexport interface PropsTableProps extends TableProps {\n  /** 要列出的 prop */\n  props: readonly ApiProp[];\n  /** 表格标题（caption），同时是表格的名称 */\n  caption?: VNodeChild;\n}\n\n/** PropsTable 的样式：name、nameCode、head、descriptionCell、type、muted、description、values、valueTerm、valueText */\nexport const propsTableStyles = css.create({\n  name: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '_xs' },\n  // 属性名不断开：Code 默认可以在任意位置换行，表格会按它把名称列压到最窄\n  nameCode: { whiteSpace: 'nowrap' },\n  // 表头都很短，中文会在任意字间断开（“默认 / 值”）\n  head: { whiteSpace: 'nowrap' },\n  // 说明是最长的一列：至少留出一段可读的宽度，类型再长也不挤掉它\n  descriptionCell: { minWidth: '18rem' },\n  type: { color: '_codeType' },\n  muted: { color: '_textMuted' },\n  description: { margin: 0 },\n  values: {\n    display: 'grid',\n    gridTemplateColumns: 'max-content 1fr',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n    marginBlockStart: '_sm',\n    fontSize: '_sm',\n  },\n  valueTerm: { margin: 0 },\n  valueText: { margin: 0, color: '_textMuted' },\n});\n\n/** 组件 API 的表格：名称、类型、默认值、说明与可选值 */\nexport const PropsTable = _component(({ props, caption, ...rest }: PropsTableProps) => {\n  const messages = useMessages('docsKit', docsKitMessages);\n  return () => (\n    <Table {...mergePartProps<TableProps>({ density: 'compact' }, rest)}>\n      {hasContent(caption) && <TableCaption>{caption}</TableCaption>}\n      <TableHead>\n        <TableRow>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.name}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.type}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.defaultValue}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.description}</TableHeaderCell>\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {props.map((prop) => (\n          <TableRow key={prop.name}>\n            <TableCell>\n              <span {...mergeAttrs<'span'>({ sx: propsTableStyles.name })}>\n                <Code sx={propsTableStyles.nameCode}>{prop.name}</Code>\n                {prop.required && <Badge tone=\"warning\">{messages.required}</Badge>}\n                {prop.bindable && <Badge tone=\"accent\">{messages.bindable}</Badge>}\n              </span>\n            </TableCell>\n            <TableCell>\n              <Code sx={propsTableStyles.type}>{prop.type}</Code>\n            </TableCell>\n            <TableCell nowrap>\n              {prop.default != null ? (\n                <Code>{prop.default}</Code>\n              ) : (\n                <span {...mergeAttrs<'span'>({ sx: propsTableStyles.muted })}>—</span>\n              )}\n            </TableCell>\n            <TableCell sx={propsTableStyles.descriptionCell}>\n              <p {...mergeAttrs<'p'>({ sx: propsTableStyles.description })}>{prop.description}</p>\n              {prop.values && prop.values.some((value) => value.description) && (\n                <dl {...mergeAttrs<'dl'>({ sx: propsTableStyles.values })}>\n                  {prop.values.map((value) => [\n                    <dt\n                      key={`${value.value}-term`}\n                      {...mergeAttrs<'dt'>({ sx: propsTableStyles.valueTerm })}\n                    >\n                      <Code>{value.value}</Code>\n                    </dt>,\n                    <dd\n                      key={`${value.value}-text`}\n                      {...mergeAttrs<'dd'>({ sx: propsTableStyles.valueText })}\n                    >\n                      {value.description}\n                    </dd>,\n                  ])}\n                </dl>\n              )}\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"PropsTable.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","_vue_unref","_createTextVNode"],"sources":["../../src/docs-kit/PropsTable.tsx"],"sourcesContent":["/**\n * 组件 API 的表格：一行一个 prop，列出名称、类型、默认值与说明；档位类的 prop 在说明下列出每个可选值的含义。\n * 文档站用它展示从类型与 JSDoc 生成的数据（ComponentApi），也可以手写数据给自己的组件做文档。\n *\n *   <PropsTable props={api.props.filter((prop) => prop.kind === 'prop')} />\n *\n * 必填的 prop 名称旁标“必填”，能 `_bind` 双向绑定的标“可绑定”（文案见 messages.ts）。外层是静态表格 Table，窄屏时横向滚动。\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 { Badge } from '../base/Badge';\nimport { Code } from '../base/Code';\nimport { useMessages } from '../config/lang/messages';\nimport { hasContent, mergeAttrs, mergePartProps } from '../utils/props';\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeaderCell,\n  TableRow,\n  type TableProps,\n} from '../table/Table';\nimport { docsKitMessages } from './messages';\n\n/** prop 的种类：文档里分开列出 */\nexport interface ApiPropKinds {\n  /** 普通属性：外观、状态、数据 */\n  prop: unknown;\n  /** 部件属性（propsXxx）：透传给内部的某个部件 */\n  part: unknown;\n  /** 事件（onXxx） */\n  event: unknown;\n  /** 内容：children 与渲染函数（renderXxx） */\n  content: unknown;\n}\n\n/** 档位类 prop 的一个可选值 */\nexport interface ApiValue {\n  /** 取值 */\n  value: string;\n  /** 这个值的含义；没有注释时为空 */\n  description: string;\n}\n\n/** 一个 prop 的文档数据 */\nexport interface ApiProp {\n  /** 名称 */\n  name: string;\n  /** 种类 */\n  kind: keyof ApiPropKinds;\n  /** 类型（源码里写的样子，如 `keyof ButtonVariants`） */\n  type: string;\n  /** 必填 */\n  required: boolean;\n  /** 默认值（源码表达式，如 `'button'`、`false`）；没有时不显示 */\n  default?: string;\n  /** 能用 `_bind` 双向绑定 */\n  bindable?: boolean;\n  /** 说明 */\n  description: string;\n  /** 档位类的可选值与各自的含义 */\n  values?: ApiValue[];\n}\n\n/** 一个组件的 API 文档数据 */\nexport interface ComponentApi {\n  /** Props 接口的名字 */\n  name: string;\n  /** 组件名：ButtonProps → Button；泛型组件的 SelectBaseProps → Select */\n  component: string;\n  /** 接口的说明（如“未声明的属性落到 button 上”） */\n  description: string;\n  /** 各个 prop */\n  props: ApiProp[];\n}\n\n/** 未声明的属性落到 table 上 */\nexport interface PropsTableProps extends TableProps {\n  /** 要列出的 prop */\n  props: readonly ApiProp[];\n  /** 表格标题（caption），同时是表格的名称 */\n  caption?: VNodeChild;\n}\n\n/** PropsTable 的样式：name、nameCode、head、descriptionCell、type、muted、description、values、valueTerm、valueText */\nexport const propsTableStyles = css.create({\n  name: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '_xs' },\n  // 属性名不断开：Code 默认可以在任意位置换行，表格会按它把名称列压到最窄\n  nameCode: { whiteSpace: 'nowrap' },\n  // 表头都很短，中文会在任意字间断开（“默认 / 值”）\n  head: { whiteSpace: 'nowrap' },\n  // 说明是最长的一列：至少留出一段可读的宽度，类型再长也不挤掉它\n  descriptionCell: { minWidth: '18rem' },\n  type: { color: '_codeType' },\n  muted: { color: '_textMuted' },\n  description: { margin: 0 },\n  values: {\n    display: 'grid',\n    gridTemplateColumns: 'max-content 1fr',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n    marginBlockStart: '_sm',\n    fontSize: '_sm',\n  },\n  valueTerm: { margin: 0 },\n  valueText: { margin: 0, color: '_textMuted' },\n});\n\n/** 组件 API 的表格：名称、类型、默认值、说明与可选值 */\nexport const PropsTable = _component(({ props, caption, ...rest }: PropsTableProps) => {\n  const messages = useMessages('docsKit', docsKitMessages);\n  return () => (\n    <Table {...mergePartProps<TableProps>({ density: 'compact' }, rest)}>\n      {hasContent(caption) && <TableCaption>{caption}</TableCaption>}\n      <TableHead>\n        <TableRow>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.name}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.type}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.defaultValue}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.description}</TableHeaderCell>\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {props.map((prop) => (\n          <TableRow key={prop.name}>\n            <TableCell>\n              <span {...mergeAttrs<'span'>({ sx: propsTableStyles.name })}>\n                <Code sx={propsTableStyles.nameCode}>{prop.name}</Code>\n                {prop.required && <Badge tone=\"warning\">{messages.required}</Badge>}\n                {prop.bindable && <Badge tone=\"accent\">{messages.bindable}</Badge>}\n              </span>\n            </TableCell>\n            <TableCell>\n              <Code sx={propsTableStyles.type}>{prop.type}</Code>\n            </TableCell>\n            <TableCell nowrap>\n              {prop.default != null ? (\n                <Code>{prop.default}</Code>\n              ) : (\n                <span {...mergeAttrs<'span'>({ sx: propsTableStyles.muted })}>—</span>\n              )}\n            </TableCell>\n            <TableCell sx={propsTableStyles.descriptionCell}>\n              <p {...mergeAttrs<'p'>({ sx: propsTableStyles.description })}>{prop.description}</p>\n              {prop.values && prop.values.some((value) => value.description) && (\n                <dl {...mergeAttrs<'dl'>({ sx: propsTableStyles.values })}>\n                  {prop.values.map((value) => [\n                    <dt\n                      key={`${value.value}-term`}\n                      {...mergeAttrs<'dt'>({ sx: propsTableStyles.valueTerm })}\n                    >\n                      <Code>{value.value}</Code>\n                    </dt>,\n                    <dd\n                      key={`${value.value}-text`}\n                      {...mergeAttrs<'dd'>({ sx: propsTableStyles.valueText })}\n                    >\n                      {value.description}\n                    </dd>,\n                  ])}\n                </dl>\n              )}\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n});\n"],"mappings":"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"}

package/dist/feedback/Alert.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 PresetIconButtonProps } from '../base/CloseButton';
 import { type IconData, type IconProps } from '../base/Icon';

package/dist/feedback/Alert.js

@@ -12,7 +12,7 @@ import { statusIcons, statusToneSx } from "../utils/style/tone-styles.js";
 import { useDismissible } from "../utils/motion/presence.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/feedback/Alert.tsx
 /** 提示条的样式（实底不用于大块文字，不提供） */
 /** 读屏怎样播报出现的提示 */

package/dist/feedback/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/Alert.tsx"],"sourcesContent":["/**\n * 提示条（div）：页面或区块里的说明、成功、警告、错误信息。图标按色调自动选（Lucide），可以换或去掉；可以关闭。\n *\n *   <Alert tone=\"warning\" title=\"即将过期\">你的订阅将在 3 天后到期。</Alert>\n *   <Alert tone=\"danger\" live=\"assertive\" onClose={dismiss}>保存失败，请重试</Alert>\n *   <Alert tone=\"info\" title=\"导入完成\" description=\"成功 120 条，失败 3 条。\"><Link href=\"#log\">查看失败原因</Link></Alert>\n *\n * 说明写在 description 或 children 上（同 Empty、Result 的 description）；两个都给时 children 是说明下面的额外内容。\n *\n * 页面加载时就在的提示不需要读屏打断；操作后才出现的用 live 让读屏播报。\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 { CloseButton, type PresetIconButtonProps } from '../base/CloseButton';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { Spinner, type SpinnerProps } from '../base/Spinner';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { useDismissible } from '../utils/motion/presence';\nimport { hasContent, mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { statusIcons, statusToneSx, type StatusTone } from '../utils/style/tone-styles';\nimport { presenceStyles } from '../utils/style/transitions';\nimport { fontSizeStyles, relativeFontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { radiusStyles, type Radius } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 提示条的样式（实底不用于大块文字，不提供） */\nexport interface AlertVariants {\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 浅色底加描边 */\n  surface: unknown;\n  /** 只有描边 */\n  outline: unknown;\n}\n\n/** 读屏怎样播报出现的提示 */\nexport interface AlertLives {\n  /** 不主动播报（默认）：页面加载时就在的提示 */\n  off: unknown;\n  /** 礼貌播报（role=\"status\"）：等读屏念完当前内容再念，如“已保存” */\n  polite: unknown;\n  /** 立即播报（role=\"alert\"）：打断当前朗读，只用于错误等紧急信息 */\n  assertive: unknown;\n}\n\n/** 提示条的外观选项；可以用 createUi / Provider 的 defaults.Alert 统一改默认值 */\nexport interface AlertOptions {\n  /** 样式，默认 soft */\n  variant?: keyof AlertVariants;\n  /** 圆角，默认 md；贴着页面顶部的通栏写 none */\n  radius?: Radius;\n}\n\n/** 角色由 live 决定，忙碌由 loading 决定；原生的 title 属性（悬停提示）让给标题 */\nexport type AlertManaged = 'role' | 'title' | 'aria-busy';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface AlertProps extends PartProps<'div', AlertManaged>, AlertOptions {\n  /** 色调，默认 info */\n  tone?: StatusTone;\n  /** 字号档位：图标、内边距随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 标题（加粗的第一行） */\n  title?: VNodeChild;\n  /** 说明（标题下面的正文）；不写时 children 就是说明 */\n  description?: VNodeChild;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 进行中（如“正在上传”）：图标换成加载指示，带 aria-busy */\n  loading?: boolean;\n  /** 读屏播报方式，默认 off */\n  live?: keyof AlertLives;\n  /** 右侧的操作（如“重试”按钮） */\n  action?: VNodeChild;\n  /** 给了就显示关闭按钮：点击后提示条先淡出，离场结束再调用；提示条随后被移除时，焦点交给相邻的可聚焦元素；没被移除就重新显示 */\n  onClose?: () => void;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 加载指示（loading 时代替图标）的部件属性 */\n  propsSpinner?: Partial<SpinnerProps>;\n  /** 文字区（标题与正文的容器）的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 说明（标题下面的正文）的部件属性 */\n  propsDescription?: PartProps<'div'>;\n  /** 额外内容（同时给了 description 与 children 时的 children）的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 关闭按钮的部件属性 */\n  propsClose?: Partial<PresetIconButtonProps>;\n  children?: VNodeChild;\n}\n\n/**\n * 提示条的配方：各部件的布局。样式 × 色调的颜色来自共用的 statusToneStyles（直接写主题 token 的表），\n * 排在配方之前，createUi / Provider 的 styles.Alert 能盖过它\n */\nexport const alertRecipe = css.recipe({\n  name: 'Alert',\n  parts: ['root', 'icon', 'body', 'title', 'description', 'content', 'action', 'close'],\n  base: {\n    // 进场与离场的淡入淡出用 presenceStyles\n    root: {\n      boxSizing: 'border-box',\n      display: 'flex',\n      alignItems: 'flex-start',\n      gap: '_sm',\n      padding: '_md',\n      lineHeight: '_normal',\n    },\n    // 图标与第一行文字对齐：行高 1.5em 里居中 1em 的图标\n    icon: { flexShrink: 0, marginBlock: '0.25em' },\n    body: { flexGrow: 1, minWidth: 0, display: 'grid', gap: '_xs' },\n    title: { fontWeight: '_semibold' },\n    description: { color: '_text' },\n    content: { minWidth: 0 },\n    action: { flexShrink: 0, alignSelf: 'center' },\n    close: { flexShrink: 0, marginBlock: `calc(-1 * ${t.space.xs})`, color: 'inherit' },\n  },\n});\n\n/** 提示条的部件（createUi / Provider 的 styles.Alert 按它定制） */\nexport type AlertPart = (typeof alertRecipe.parts)[number];\n\nconst ROLES = { off: undefined, polite: 'status', assertive: 'alert' } as const;\n\n/** 提示条：图标 + 标题 + 正文 + 操作 + 关闭 */\nexport const Alert = _component(\n  ({\n    variant,\n    radius,\n    tone = 'info',\n    size,\n    title,\n    description,\n    icon,\n    loading = false,\n    live = 'off',\n    action,\n    onClose,\n    propsIcon,\n    propsSpinner,\n    propsBody,\n    propsTitle,\n    propsDescription,\n    propsContent,\n    propsAction,\n    propsClose,\n    children,\n    ...rest\n  }: AlertProps) => {\n    const appearance = useDefaults('Alert', () => ({ variant, radius }), {\n      variant: 'soft',\n      radius: 'md',\n    });\n    const recipe = useRecipe(alertRecipe);\n    // 离场结束才交给使用方移除；使用方没移除时提示条重新出现\n    const dismissible = useDismissible(() => onClose?.());\n    return () => {\n      const { variant: shownVariant, radius: shownRadius } = appearance();\n      const s = recipe({ variant: shownVariant, tone });\n      const shownIcon = icon === false ? undefined : (icon ?? statusIcons[tone]);\n      // 说明取 description，没有时取 children；两个都有时 children 放在说明下面\n      const extra = hasContent(description) && hasContent(children);\n      const text = hasContent(description) ? description : children;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              ...s.root,\n              sx: [\n                statusToneSx(shownVariant, tone),\n                s.root.sx,\n                presenceStyles.fade,\n                radiusStyles[shownRadius],\n                size && fontSizeStyles[size],\n                dismissible.dismissing && presenceStyles.leaving,\n              ],\n            },\n            rest,\n            { ref: dismissible.ref, role: ROLES[live], 'aria-busy': loading || undefined },\n          )}\n          data-tone={tone}\n          data-state={dismissible.state}\n        >\n          {loading ? (\n            <Spinner {...mergePartProps<SpinnerProps>(s.icon, propsSpinner)} />\n          ) : (\n            shownIcon && (\n              <Icon {...mergePartProps<IconProps>({ ...s.icon, icon: shownIcon }, propsIcon)} />\n            )\n          )}\n          <div {...mergeAttrs<'div'>(s.body, propsBody)}>\n            {hasContent(title) && <div {...mergeAttrs<'div'>(s.title, propsTitle)}>{title}</div>}\n            {hasContent(text) && (\n              <div {...mergeAttrs<'div'>(s.description, propsDescription)}>{text}</div>\n            )}\n            {extra && <div {...mergeAttrs<'div'>(s.content, propsContent)}>{children}</div>}\n          </div>\n          {hasContent(action) && <div {...mergeAttrs<'div'>(s.action, propsAction)}>{action}</div>}\n          {onClose && (\n            <CloseButton\n              {...mergeProps<PresetIconButtonProps>(\n                { ...s.close, sx: [s.close.sx, relativeFontSizeStyles.sm] },\n                propsClose,\n                { onClick: dismissible.dismiss },\n              )}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Alert.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/Alert.tsx"],"sourcesContent":["/**\n * 提示条（div）：页面或区块里的说明、成功、警告、错误信息。图标按色调自动选（Lucide），可以换或去掉；可以关闭。\n *\n *   <Alert tone=\"warning\" title=\"即将过期\">你的订阅将在 3 天后到期。</Alert>\n *   <Alert tone=\"danger\" live=\"assertive\" onClose={dismiss}>保存失败，请重试</Alert>\n *   <Alert tone=\"info\" title=\"导入完成\" description=\"成功 120 条，失败 3 条。\"><Link href=\"#log\">查看失败原因</Link></Alert>\n *\n * 说明写在 description 或 children 上（同 Empty、Result 的 description）；两个都给时 children 是说明下面的额外内容。\n *\n * 页面加载时就在的提示不需要读屏打断；操作后才出现的用 live 让读屏播报。\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 { CloseButton, type PresetIconButtonProps } from '../base/CloseButton';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { Spinner, type SpinnerProps } from '../base/Spinner';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { useDismissible } from '../utils/motion/presence';\nimport { hasContent, mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { statusIcons, statusToneSx, type StatusTone } from '../utils/style/tone-styles';\nimport { presenceStyles } from '../utils/style/transitions';\nimport { fontSizeStyles, relativeFontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { radiusStyles, type Radius } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 提示条的样式（实底不用于大块文字，不提供） */\nexport interface AlertVariants {\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 浅色底加描边 */\n  surface: unknown;\n  /** 只有描边 */\n  outline: unknown;\n}\n\n/** 读屏怎样播报出现的提示 */\nexport interface AlertLives {\n  /** 不主动播报（默认）：页面加载时就在的提示 */\n  off: unknown;\n  /** 礼貌播报（role=\"status\"）：等读屏念完当前内容再念，如“已保存” */\n  polite: unknown;\n  /** 立即播报（role=\"alert\"）：打断当前朗读，只用于错误等紧急信息 */\n  assertive: unknown;\n}\n\n/** 提示条的外观选项；可以用 createUi / Provider 的 defaults.Alert 统一改默认值 */\nexport interface AlertOptions {\n  /** 样式，默认 soft */\n  variant?: keyof AlertVariants;\n  /** 圆角，默认 md；贴着页面顶部的通栏写 none */\n  radius?: Radius;\n}\n\n/** 角色由 live 决定，忙碌由 loading 决定；原生的 title 属性（悬停提示）让给标题 */\nexport type AlertManaged = 'role' | 'title' | 'aria-busy';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface AlertProps extends PartProps<'div', AlertManaged>, AlertOptions {\n  /** 色调，默认 info */\n  tone?: StatusTone;\n  /** 字号档位：图标、内边距随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 标题（加粗的第一行） */\n  title?: VNodeChild;\n  /** 说明（标题下面的正文）；不写时 children 就是说明 */\n  description?: VNodeChild;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 进行中（如“正在上传”）：图标换成加载指示，带 aria-busy */\n  loading?: boolean;\n  /** 读屏播报方式，默认 off */\n  live?: keyof AlertLives;\n  /** 右侧的操作（如“重试”按钮） */\n  action?: VNodeChild;\n  /** 给了就显示关闭按钮：点击后提示条先淡出，离场结束再调用；提示条随后被移除时，焦点交给相邻的可聚焦元素；没被移除就重新显示 */\n  onClose?: () => void;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 加载指示（loading 时代替图标）的部件属性 */\n  propsSpinner?: Partial<SpinnerProps>;\n  /** 文字区（标题与正文的容器）的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 说明（标题下面的正文）的部件属性 */\n  propsDescription?: PartProps<'div'>;\n  /** 额外内容（同时给了 description 与 children 时的 children）的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 关闭按钮的部件属性 */\n  propsClose?: Partial<PresetIconButtonProps>;\n  children?: VNodeChild;\n}\n\n/**\n * 提示条的配方：各部件的布局。样式 × 色调的颜色来自共用的 statusToneStyles（直接写主题 token 的表），\n * 排在配方之前，createUi / Provider 的 styles.Alert 能盖过它\n */\nexport const alertRecipe = css.recipe({\n  name: 'Alert',\n  parts: ['root', 'icon', 'body', 'title', 'description', 'content', 'action', 'close'],\n  base: {\n    // 进场与离场的淡入淡出用 presenceStyles\n    root: {\n      boxSizing: 'border-box',\n      display: 'flex',\n      alignItems: 'flex-start',\n      gap: '_sm',\n      padding: '_md',\n      lineHeight: '_normal',\n    },\n    // 图标与第一行文字对齐：行高 1.5em 里居中 1em 的图标\n    icon: { flexShrink: 0, marginBlock: '0.25em' },\n    body: { flexGrow: 1, minWidth: 0, display: 'grid', gap: '_xs' },\n    title: { fontWeight: '_semibold' },\n    description: { color: '_text' },\n    content: { minWidth: 0 },\n    action: { flexShrink: 0, alignSelf: 'center' },\n    close: { flexShrink: 0, marginBlock: `calc(-1 * ${t.space.xs})`, color: 'inherit' },\n  },\n});\n\n/** 提示条的部件（createUi / Provider 的 styles.Alert 按它定制） */\nexport type AlertPart = (typeof alertRecipe.parts)[number];\n\nconst ROLES = { off: undefined, polite: 'status', assertive: 'alert' } as const;\n\n/** 提示条：图标 + 标题 + 正文 + 操作 + 关闭 */\nexport const Alert = _component(\n  ({\n    variant,\n    radius,\n    tone = 'info',\n    size,\n    title,\n    description,\n    icon,\n    loading = false,\n    live = 'off',\n    action,\n    onClose,\n    propsIcon,\n    propsSpinner,\n    propsBody,\n    propsTitle,\n    propsDescription,\n    propsContent,\n    propsAction,\n    propsClose,\n    children,\n    ...rest\n  }: AlertProps) => {\n    const appearance = useDefaults('Alert', () => ({ variant, radius }), {\n      variant: 'soft',\n      radius: 'md',\n    });\n    const recipe = useRecipe(alertRecipe);\n    // 离场结束才交给使用方移除；使用方没移除时提示条重新出现\n    const dismissible = useDismissible(() => onClose?.());\n    return () => {\n      const { variant: shownVariant, radius: shownRadius } = appearance();\n      const s = recipe({ variant: shownVariant, tone });\n      const shownIcon = icon === false ? undefined : (icon ?? statusIcons[tone]);\n      // 说明取 description，没有时取 children；两个都有时 children 放在说明下面\n      const extra = hasContent(description) && hasContent(children);\n      const text = hasContent(description) ? description : children;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              ...s.root,\n              sx: [\n                statusToneSx(shownVariant, tone),\n                s.root.sx,\n                presenceStyles.fade,\n                radiusStyles[shownRadius],\n                size && fontSizeStyles[size],\n                dismissible.dismissing && presenceStyles.leaving,\n              ],\n            },\n            rest,\n            { ref: dismissible.ref, role: ROLES[live], 'aria-busy': loading || undefined },\n          )}\n          data-tone={tone}\n          data-state={dismissible.state}\n        >\n          {loading ? (\n            <Spinner {...mergePartProps<SpinnerProps>(s.icon, propsSpinner)} />\n          ) : (\n            shownIcon && (\n              <Icon {...mergePartProps<IconProps>({ ...s.icon, icon: shownIcon }, propsIcon)} />\n            )\n          )}\n          <div {...mergeAttrs<'div'>(s.body, propsBody)}>\n            {hasContent(title) && <div {...mergeAttrs<'div'>(s.title, propsTitle)}>{title}</div>}\n            {hasContent(text) && (\n              <div {...mergeAttrs<'div'>(s.description, propsDescription)}>{text}</div>\n            )}\n            {extra && <div {...mergeAttrs<'div'>(s.content, propsContent)}>{children}</div>}\n          </div>\n          {hasContent(action) && <div {...mergeAttrs<'div'>(s.action, propsAction)}>{action}</div>}\n          {onClose && (\n            <CloseButton\n              {...mergeProps<PresetIconButtonProps>(\n                { ...s.close, sx: [s.close.sx, relativeFontSizeStyles.sm] },\n                propsClose,\n                { onClick: dismissible.dismiss },\n              )}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/feedback/Banner.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 PresetIconButtonProps } from '../base/CloseButton';
 import { type IconData, type IconProps } from '../base/Icon';

package/dist/feedback/Banner.js

@@ -8,7 +8,7 @@ import { statusIcons, statusToneSx } from "../utils/style/tone-styles.js";
 import { useDismissible } from "../utils/motion/presence.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/feedback/Banner.tsx
 /** 横幅的样式 */
 /** 角色由 live 决定；原生的 title 属性（悬停提示）让给标题 */

package/dist/feedback/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/Banner.tsx"],"sourcesContent":["/**\n * 横幅：贴着页面（或区域）顶部的一行通栏通知，系统维护、试用到期、新功能上线、只读模式这类整页都相关的消息。\n *\n *   <Banner tone=\"warning\" title=\"系统维护\" action={<Link href=\"/notice\">查看详情</Link>} onClose={hide}>\n *     今晚 22:00–23:00 暂停服务\n *   </Banner>\n *\n * 和 Alert 的分工：Alert 放在内容里、说明某一块的状态，可以有多行正文；Banner 占满宽度、一行说完，内容居中，\n * 没有圆角，放在页面最上方（AppShell 的顶栏之上或之下）。实底（solid）最醒目，用于必须先看到的消息。\n * 关闭时先离场再报告 onClose（useDismissible），使用方移除并记住“已关闭”；没移除就重新出现。\n * 页面加载时就在的横幅不播报；运行中才出现的用 live（同 Alert）。\n * 部件：Root（div）、Icon、Content（div：标题与正文）、Title（strong）、Action、Close。\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 { CloseButton, type PresetIconButtonProps } from '../base/CloseButton';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { hasContent, mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { useDismissible } from '../utils/motion/presence';\nimport { statusIcons, statusToneSx, type StatusTone } from '../utils/style/tone-styles';\nimport { presenceStyles } from '../utils/style/transitions';\nimport { fontSizeStyles, relativeFontSizeStyles, type TextSize } from '../utils/style/typography';\nimport type { AlertLives } from './Alert';\nimport { t } from '../config/theme/tokens';\n\n/** 横幅的样式 */\nexport interface BannerVariants {\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 实底：最醒目，必须先看到的消息 */\n  solid: unknown;\n}\n\n/** 角色由 live 决定；原生的 title 属性（悬停提示）让给标题 */\nexport type BannerManaged = 'role' | 'title';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface BannerProps extends PartProps<'div', BannerManaged> {\n  /** 色调，默认 info */\n  tone?: StatusTone;\n  /** 样式，默认 soft */\n  variant?: keyof BannerVariants;\n  /** 字号档位，默认继承上下文字号 */\n  size?: TextSize;\n  /** 加粗的开头（“系统维护”），与正文在同一行 */\n  title?: VNodeChild;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 正文后的操作（链接或小按钮） */\n  action?: VNodeChild;\n  /** 读屏播报方式，默认 off（同 Alert） */\n  live?: keyof AlertLives;\n  /** 给了就显示关闭按钮：先离场，离场结束再调用；使用方没移除时重新出现 */\n  onClose?: () => void;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 文字区的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'strong'>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 关闭按钮的部件属性 */\n  propsClose?: Partial<PresetIconButtonProps>;\n  /** 正文 */\n  children?: VNodeChild;\n}\n\n/** Banner 的样式：root、icon、content、title、action、close */\nexport const bannerStyles = css.create({\n  // 内容居中、一行说完；窄屏时换行。关闭按钮贴在结束边，不参与居中\n  root: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexWrap: 'wrap',\n    columnGap: '_sm',\n    rowGap: '_xs',\n    width: '100%',\n    paddingBlock: '_sm',\n    paddingInlineStart: '_lg',\n    paddingInlineEnd: `calc(${t.space.lg} + 2em)`,\n    lineHeight: '_normal',\n    textAlign: 'center',\n  },\n  // 没有关闭按钮时两边留白一样\n  balanced: { paddingInlineEnd: '_lg' },\n  icon: { flexShrink: 0 },\n  content: { minWidth: 0 },\n  title: { fontWeight: '_semibold', marginInlineEnd: '_sm' },\n  action: { flexShrink: 0, fontWeight: '_medium' },\n  close: {\n    position: 'absolute',\n    insetInlineEnd: '_sm',\n    insetBlockStart: '50%',\n    translate: '0 -50%',\n    color: 'inherit',\n  },\n});\n\nconst ROLES = { off: undefined, polite: 'status', assertive: 'alert' } as const;\n\n/** 横幅：一行通栏通知，内容居中，可以关闭 */\nexport const Banner = _component(\n  ({\n    tone = 'info',\n    variant = 'soft',\n    size,\n    title,\n    icon,\n    action,\n    live = 'off',\n    onClose,\n    propsIcon,\n    propsContent,\n    propsTitle,\n    propsAction,\n    propsClose,\n    children,\n    ...rest\n  }: BannerProps) => {\n    // 离场结束才交给使用方移除；使用方没移除时横幅重新出现\n    const dismissible = useDismissible(() => onClose?.());\n    return () => {\n      const shownIcon = icon === false ? undefined : (icon ?? statusIcons[tone]);\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                bannerStyles.root,\n                !onClose && bannerStyles.balanced,\n                presenceStyles.fade,\n                statusToneSx(variant, tone),\n                size && fontSizeStyles[size],\n                dismissible.dismissing && presenceStyles.leaving,\n              ],\n            },\n            rest,\n            { ref: dismissible.ref, role: ROLES[live] },\n          )}\n          data-tone={tone}\n          data-state={dismissible.state}\n        >\n          {shownIcon && (\n            <Icon\n              {...mergePartProps<IconProps>({ icon: shownIcon, sx: bannerStyles.icon }, propsIcon)}\n            />\n          )}\n          <div {...mergeAttrs<'div'>({ sx: bannerStyles.content }, propsContent)}>\n            {hasContent(title) && (\n              <strong {...mergeAttrs<'strong'>({ sx: bannerStyles.title }, propsTitle)}>\n                {title}\n              </strong>\n            )}\n            {children}\n          </div>\n          {hasContent(action) && (\n            <div {...mergeAttrs<'div'>({ sx: bannerStyles.action }, propsAction)}>{action}</div>\n          )}\n          {onClose && (\n            <CloseButton\n              {...mergeProps<PresetIconButtonProps>(\n                { sx: [bannerStyles.close, relativeFontSizeStyles.sm] },\n                propsClose,\n                { onClick: dismissible.dismiss },\n              )}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Banner.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/Banner.tsx"],"sourcesContent":["/**\n * 横幅：贴着页面（或区域）顶部的一行通栏通知，系统维护、试用到期、新功能上线、只读模式这类整页都相关的消息。\n *\n *   <Banner tone=\"warning\" title=\"系统维护\" action={<Link href=\"/notice\">查看详情</Link>} onClose={hide}>\n *     今晚 22:00–23:00 暂停服务\n *   </Banner>\n *\n * 和 Alert 的分工：Alert 放在内容里、说明某一块的状态，可以有多行正文；Banner 占满宽度、一行说完，内容居中，\n * 没有圆角，放在页面最上方（AppShell 的顶栏之上或之下）。实底（solid）最醒目，用于必须先看到的消息。\n * 关闭时先离场再报告 onClose（useDismissible），使用方移除并记住“已关闭”；没移除就重新出现。\n * 页面加载时就在的横幅不播报；运行中才出现的用 live（同 Alert）。\n * 部件：Root（div）、Icon、Content（div：标题与正文）、Title（strong）、Action、Close。\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 { CloseButton, type PresetIconButtonProps } from '../base/CloseButton';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { hasContent, mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { useDismissible } from '../utils/motion/presence';\nimport { statusIcons, statusToneSx, type StatusTone } from '../utils/style/tone-styles';\nimport { presenceStyles } from '../utils/style/transitions';\nimport { fontSizeStyles, relativeFontSizeStyles, type TextSize } from '../utils/style/typography';\nimport type { AlertLives } from './Alert';\nimport { t } from '../config/theme/tokens';\n\n/** 横幅的样式 */\nexport interface BannerVariants {\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 实底：最醒目，必须先看到的消息 */\n  solid: unknown;\n}\n\n/** 角色由 live 决定；原生的 title 属性（悬停提示）让给标题 */\nexport type BannerManaged = 'role' | 'title';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface BannerProps extends PartProps<'div', BannerManaged> {\n  /** 色调，默认 info */\n  tone?: StatusTone;\n  /** 样式，默认 soft */\n  variant?: keyof BannerVariants;\n  /** 字号档位，默认继承上下文字号 */\n  size?: TextSize;\n  /** 加粗的开头（“系统维护”），与正文在同一行 */\n  title?: VNodeChild;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 正文后的操作（链接或小按钮） */\n  action?: VNodeChild;\n  /** 读屏播报方式，默认 off（同 Alert） */\n  live?: keyof AlertLives;\n  /** 给了就显示关闭按钮：先离场，离场结束再调用；使用方没移除时重新出现 */\n  onClose?: () => void;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 文字区的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'strong'>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 关闭按钮的部件属性 */\n  propsClose?: Partial<PresetIconButtonProps>;\n  /** 正文 */\n  children?: VNodeChild;\n}\n\n/** Banner 的样式：root、icon、content、title、action、close */\nexport const bannerStyles = css.create({\n  // 内容居中、一行说完；窄屏时换行。关闭按钮贴在结束边，不参与居中\n  root: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexWrap: 'wrap',\n    columnGap: '_sm',\n    rowGap: '_xs',\n    width: '100%',\n    paddingBlock: '_sm',\n    paddingInlineStart: '_lg',\n    paddingInlineEnd: `calc(${t.space.lg} + 2em)`,\n    lineHeight: '_normal',\n    textAlign: 'center',\n  },\n  // 没有关闭按钮时两边留白一样\n  balanced: { paddingInlineEnd: '_lg' },\n  icon: { flexShrink: 0 },\n  content: { minWidth: 0 },\n  title: { fontWeight: '_semibold', marginInlineEnd: '_sm' },\n  action: { flexShrink: 0, fontWeight: '_medium' },\n  close: {\n    position: 'absolute',\n    insetInlineEnd: '_sm',\n    insetBlockStart: '50%',\n    translate: '0 -50%',\n    color: 'inherit',\n  },\n});\n\nconst ROLES = { off: undefined, polite: 'status', assertive: 'alert' } as const;\n\n/** 横幅：一行通栏通知，内容居中，可以关闭 */\nexport const Banner = _component(\n  ({\n    tone = 'info',\n    variant = 'soft',\n    size,\n    title,\n    icon,\n    action,\n    live = 'off',\n    onClose,\n    propsIcon,\n    propsContent,\n    propsTitle,\n    propsAction,\n    propsClose,\n    children,\n    ...rest\n  }: BannerProps) => {\n    // 离场结束才交给使用方移除；使用方没移除时横幅重新出现\n    const dismissible = useDismissible(() => onClose?.());\n    return () => {\n      const shownIcon = icon === false ? undefined : (icon ?? statusIcons[tone]);\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                bannerStyles.root,\n                !onClose && bannerStyles.balanced,\n                presenceStyles.fade,\n                statusToneSx(variant, tone),\n                size && fontSizeStyles[size],\n                dismissible.dismissing && presenceStyles.leaving,\n              ],\n            },\n            rest,\n            { ref: dismissible.ref, role: ROLES[live] },\n          )}\n          data-tone={tone}\n          data-state={dismissible.state}\n        >\n          {shownIcon && (\n            <Icon\n              {...mergePartProps<IconProps>({ icon: shownIcon, sx: bannerStyles.icon }, propsIcon)}\n            />\n          )}\n          <div {...mergeAttrs<'div'>({ sx: bannerStyles.content }, propsContent)}>\n            {hasContent(title) && (\n              <strong {...mergeAttrs<'strong'>({ sx: bannerStyles.title }, propsTitle)}>\n                {title}\n              </strong>\n            )}\n            {children}\n          </div>\n          {hasContent(action) && (\n            <div {...mergeAttrs<'div'>({ sx: bannerStyles.action }, propsAction)}>{action}</div>\n          )}\n          {onClose && (\n            <CloseButton\n              {...mergeProps<PresetIconButtonProps>(\n                { sx: [bannerStyles.close, relativeFontSizeStyles.sm] },\n                propsClose,\n                { onClick: dismissible.dismiss },\n              )}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;AAsEA,IAAa,eAAe,IAAI,OAAO;CAErC,MAAM;EACJ,WAAW;EACX,UAAU;EACV,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACV,WAAW;EACX,QAAQ;EACR,OAAO;EACP,cAAc;EACd,oBAAoB;EACpB,kBAAkB,QAAQ,EAAE,MAAM,GAAE;EACpC,YAAY;EACZ,WAAW;CACb;CAEA,UAAU,EAAE,kBAAkB,MAAM;CACpC,MAAM,EAAE,YAAY,EAAE;CACtB,SAAS,EAAE,UAAU,EAAE;CACvB,OAAO;EAAE,YAAY;EAAa,iBAAiB;CAAM;CACzD,QAAQ;EAAE,YAAY;EAAG,YAAY;CAAU;CAC/C,OAAO;EACL,UAAU;EACV,gBAAgB;EAChB,iBAAiB;EACjB,WAAW;EACX,OAAO;CACT;AACF,CAAC;AAED,IAAM,QAAQ;CAAE,KAAK,KAAA;CAAW,QAAQ;CAAU,WAAW;AAAQ;;AAGrE,IAAa,SAAS,0BACpB,QAAA,SAgBmB;CAAA,MAAA,OAAAA,aAAA,QAAA,QAfV,MAAM;CAAA,MAAA,UAAAA,aAAA,QAAA,WACH,MAAM;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAKT,KAAK;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAQT,OAAIC,UAAA,QAAA,MAAA,KAAA;CAGP,MAAM,cAAc,qBAAqB,QAAA,QAAU,CAAC;CACpD,aAAa;EACX,MAAM,YAAY,KAAA,UAAS,QAAQ,KAAA,IAAa,KAAA,SAAQ,YAAW,KAAA;EACnE,OAAAC,YAAA,OAAAC,cAEQ,WACF,EACE,IAAI;GACF,aAAa;GACb,CAAA,QAAA,SAAY,aAAa;GACzB,eAAe;GACf,aAAY,QAAA,OAAA,KAAA,KAAc;GAC1B,KAAA,SAAQ,eAAc,KAAA;GACtB,YAAY,cAAc,eAAe;EAAO,EAEpD,GACA,MACA;GAAE,KAAK,YAAY;GAAK,MAAM,MAAK,KAAA;EAAO,CAC5C,GAAC;GAAA,aAAA,KAAA;GAAA,cAEW,YAAY;EAAK,CAAA,GAAA;GAE5B,aAASD,YAAA,MAEF,eAA0B;IAAE,MAAM;IAAW,IAAI,aAAa;GAAK,GAAC,UAAA,KAAW,GAAC,IAAA;GAEvFA,YAAA,OACQ,WAAkB,EAAE,IAAI,aAAa,QAAQ,GAAC,aAAA,KAAc,GAAC,CACnE,WAAU,MAAA,KAAM,KAACA,YAAA,UACJ,WAAqB,EAAE,IAAI,aAAa,MAAM,GAAC,WAAA,KAAY,GAAC,CAAA,MAAA,KAAA,CAAA,GAGzE,SAAA,KAAA,CAAA;GAGF,WAAU,OAAA,KAAO,KAACA,YAAA,OACR,WAAkB,EAAE,IAAI,aAAa,OAAO,GAAC,YAAA,KAAa,GAAC,CAAA,OAAA,KAAA,CAAA;GAErE,QAAA,SAAAA,YAAA,aAEO,WACF,EAAE,IAAI,CAAC,aAAa,OAAO,uBAAuB,EAAE,EAAE,GAAC,WAAA,OAEvD,EAAE,SAAS,YAAY,QAAQ,CACjC,GAAC,IAAA;EAEJ,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/feedback/Empty.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 IconData, type IconProps } from '../base/Icon';
 import { type TextProps } from '../base/Text';

package/dist/feedback/Empty.js

@@ -6,7 +6,7 @@ import { Icon } from "../base/Icon.js";
 import { Paragraph, Text as Text$1 } from "../base/Text.js";
 import { createVNode, unref } 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";
 import { Inbox } from "@lucide/icons";
 //#region src/feedback/Empty.tsx
 /**