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

package/dist/utils/dom/floating.js.map

@@ -1 +1 @@
-{"version":3,"file":"floating.js","names":["arrow","arrowMiddleware"],"sources":["../../../src/utils/dom/floating.ts"],"sourcesContent":["/**\n * 锚定浮层：Popover、Tooltip、Menu、Select 的弹出层贴着触发器显示。位置由 floating-ui 计算，\n * 显示、隐藏、Esc、点击外部仍交给原生 popover；createAnchoredLayer 把两者串成打开、关闭的流程。\n *\n *   const anchored = anchorFloating(trigger, panel, { placement: 'bottom-start' });\n *   await anchored.ready;   // 第一次定位完成、已经可见：这时才能把焦点移进去\n *   anchored.stop();        // 关闭时停止跟随\n *   sx: [floatingStyles.anchored, …]   // 浮层自己的样式：去掉原生 popover 默认的居中与外边距\n *\n * - 第一次算好位置之前浮层是 visibility: hidden，不会在默认位置闪一下；\n * - 空间不够时翻到另一侧（flip）、贴着视口边缘挪回来（shift），滚动、缩放、锚点变化时自动重新定位（autoUpdate）；\n * - start / end 对齐是逻辑方向，从右到左排版下自动镜像（floating-ui 读浮层的 direction）；\n * - 最终方向写到 data-side / data-align，缩放原点（transform-origin）朝向锚点，进出场的 scale 过渡从锚点那侧展开。\n */\nimport {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  computePosition,\n  flip,\n  offset,\n  shift,\n  size,\n  type Middleware,\n  type Placement,\n  type VirtualElement,\n} from '@floating-ui/dom';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onScopeDispose, watchPostEffect } from 'vue';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { transitions } from '../style/transitions';\nimport { fontSizeStyles, type TextSize } from '../style/typography';\nimport { returnFocus } from './focus';\n\n/** 弹出位置：主方向 + 对齐方式（start 对齐锚点的起始边，end 对齐结束边）；空间不够时自动翻转 */\nexport interface FloatingPlacements {\n  /** 上方居中 */\n  top: unknown;\n  /** 上方，与锚点起始边对齐 */\n  'top-start': unknown;\n  /** 上方，与锚点结束边对齐 */\n  'top-end': unknown;\n  /** 下方居中 */\n  bottom: unknown;\n  /** 下方，与锚点起始边对齐 */\n  'bottom-start': unknown;\n  /** 下方，与锚点结束边对齐 */\n  'bottom-end': unknown;\n  /** 左侧居中 */\n  left: unknown;\n  /** 左侧，与锚点顶边对齐 */\n  'left-start': unknown;\n  /** 左侧，与锚点底边对齐 */\n  'left-end': unknown;\n  /** 右侧居中 */\n  right: unknown;\n  /** 右侧，与锚点顶边对齐 */\n  'right-start': unknown;\n  /** 右侧，与锚点底边对齐 */\n  'right-end': unknown;\n}\n\n/** 弹出位置 */\nexport type FloatingPlacement = keyof FloatingPlacements & Placement;\n\n/**\n * 锚点：元素，或只有位置的虚拟锚点（右键菜单从指针的位置弹出：`pointAnchor(x, y)`）。\n * 虚拟锚点没有元素可以还焦点，关闭后焦点由组件自己安排\n */\nexport type FloatingAnchor = HTMLElement | VirtualElement;\n\n/** 视口里一个点（clientX / clientY）做锚点 */\nexport function pointAnchor(x: number, y: number): VirtualElement {\n  return { getBoundingClientRect: () => new DOMRect(x, y, 0, 0) };\n}\n\n/** anchorFloating 的选项 */\nexport interface FloatingOptions {\n  /** 弹出位置，默认 bottom-start */\n  placement?: FloatingPlacement;\n  /** 与锚点的距离（px），默认 6 */\n  offset?: number;\n  /** 至少与锚点一样宽：下拉框、组合框的选项列表 */\n  matchWidth?: boolean;\n  /** 最大高度限制在视口剩余空间内（浮层自己设 overflow 滚动）：菜单、选项列表 */\n  fitHeight?: boolean;\n  /** 箭头元素（浮层里的子元素，样式用 floatingStyles.arrow）：指向锚点，随翻转换边；距离自动加上箭头露出的一半 */\n  arrow?: HTMLElement | null;\n  /** 主方向与对侧都放不下时，再试垂直的两侧（窄屏上“右侧”的大卡片改到上下）：引导卡片 */\n  crossAxisFallback?: boolean;\n}\n\n/** anchorFloating 的返回值 */\nexport interface Anchored {\n  /** 第一次定位完成、浮层已可见时完成；在这之前就 stop 时不会完成 */\n  readonly ready: Promise<void>;\n  /** 停止跟随锚点；关闭浮层时调用，重复调用无副作用 */\n  stop(): void;\n}\n\ntype Side = 'top' | 'right' | 'bottom' | 'left';\n\n/** 缩放原点朝向锚点：弹出在下方时从上边缘展开 */\nconst TRANSFORM_ORIGIN: Record<Side, string> = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n};\n\n/** 箭头贴着浮层的哪条边（与弹出方向相反） */\nconst ARROW_EDGE: Record<Side, Side> = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n};\n/** 箭头（画了右、下两条边的方块）转多少度才朝向锚点 */\nconst ARROW_ROTATION: Record<Side, number> = { top: 45, right: 135, bottom: 225, left: -45 };\n\n/**\n * 弹出面板（选项列表、树、日期面板）共用的样式：锚定定位、浮起的表面、缩放进出场；\n * 面板渲染在顶层，不是输入框外壳的后代、不继承它的字号：按控件的 size 设置。ListPopover、TreeSelect、日期选择器用它\n */\nexport function anchoredPanelSx(size?: TextSize): SxStyles {\n  return [\n    floatingStyles.anchored,\n    floatingStyles.surface,\n    size && fontSizeStyles[size],\n    transitions.scale,\n  ] as SxStyles;\n}\n\n/** 锚定浮层的基础样式：定位与表面 */\nexport const floatingStyles = css.create({\n  /** 原生 popover 默认居中显示、带外边距，改为由 anchorFloating 写入的 left / top 定位 */\n  anchored: { position: 'fixed', inset: 'auto', margin: 0 },\n  /** 浮起的表面：边框、圆角、阴影（Popover、Menu、选项列表）；内边距各自定 */\n  surface: {\n    boxSizing: 'border-box',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_lg',\n    backgroundColor: '_surfaceRaised',\n    color: '_text',\n    boxShadow: '_lg',\n  },\n  /**\n   * 箭头：一个小方块，只画右、下两条边，旋转后尖角朝向锚点；底色、边框跟随浮层（inherit）。\n   * 位置与旋转由 anchorFloating 写\n   */\n  arrow: {\n    position: 'absolute',\n    boxSizing: 'border-box',\n    width: '0.625em',\n    height: '0.625em',\n    backgroundColor: 'inherit',\n    borderStyle: 'solid',\n    borderColor: 'inherit',\n    borderWidth: 0,\n    borderRightWidth: 'inherit',\n    borderBottomWidth: 'inherit',\n    borderBottomRightRadius: '_borderWidths.sm',\n    pointerEvents: 'none',\n  },\n  /** 有箭头的浮层：原生 popover 默认 overflow: auto 会把伸出去的箭头裁掉 */\n  withArrow: { overflow: 'visible' },\n  /**\n   * 内容会滚动的浮层（选项列表、菜单）：打开时是竖向 flex、裁掉溢出，里面放 ScrollArea（scrollArea）撑满，\n   * 滚动条是浮层的；关闭时仍由浏览器隐藏（只在 :popover-open 时改 display）\n   */\n  scrollPanel: {\n    display: { default: null, ':popover-open': 'flex' },\n    flexDirection: 'column',\n    overflow: 'hidden',\n    // 去掉原生 popover 默认的 0.25em 内边距：滚动条贴着浮层边缘，内边距由里面的内容层给\n    padding: 0,\n  },\n  /** scrollPanel 里的 ScrollArea：占满剩下的高度（最大高度由 anchorFloating 的 fitHeight 写在浮层上） */\n  scrollArea: { flexGrow: 1, minHeight: 0 },\n});\n\n/** 与视口边缘至少留出的距离（px） */\nconst VIEWPORT_PADDING = 8;\n\n/** 把 floating 定位到 anchor 旁边并持续跟随；floating 需要已经显示（如 showPopover 之后） */\nexport function anchorFloating(\n  anchor: FloatingAnchor,\n  floating: HTMLElement,\n  {\n    placement = 'bottom-start',\n    offset: distance = 6,\n    matchWidth,\n    fitHeight,\n    arrow,\n    crossAxisFallback,\n  }: FloatingOptions = {},\n): Anchored {\n  // 箭头伸出浮层一半（旋转后的对角线的一半约等于边长的 0.7）：距离加上这一段，尖角才不压在锚点上\n  const arrowSize = arrow?.offsetWidth ?? 0;\n  const middleware: Middleware[] = [\n    offset(distance + arrowSize * 0.7),\n    flip({\n      padding: VIEWPORT_PADDING,\n      fallbackAxisSideDirection: crossAxisFallback ? 'end' : 'none',\n    }),\n    shift({ padding: VIEWPORT_PADDING }),\n  ];\n  // 箭头离浮层的圆角留出距离，不会画到圆角外面\n  if (arrow) middleware.push(arrowMiddleware({ element: arrow, padding: arrowSize }));\n  if (matchWidth || fitHeight) {\n    middleware.push(\n      size({\n        padding: VIEWPORT_PADDING,\n        apply({ rects, availableHeight, elements }) {\n          if (matchWidth) elements.floating.style.minWidth = `${rects.reference.width}px`;\n          if (fitHeight) elements.floating.style.maxHeight = `${Math.max(0, availableHeight)}px`;\n        },\n      }),\n    );\n  }\n\n  let stopped = false;\n  let resolveReady!: () => void;\n  const ready = new Promise<void>((resolve) => (resolveReady = resolve));\n  floating.style.visibility = 'hidden';\n\n  const update = () =>\n    void computePosition(anchor, floating, { placement, strategy: 'fixed', middleware }).then(\n      ({ x, y, placement: final, middlewareData }) => {\n        if (stopped) return;\n        const [side, align = 'center'] = final.split('-') as [Side, string?];\n        if (arrow && middlewareData.arrow) {\n          const { x: arrowX, y: arrowY } = middlewareData.arrow;\n          Object.assign(arrow.style, {\n            left: arrowX != null ? `${arrowX}px` : '',\n            top: arrowY != null ? `${arrowY}px` : '',\n            right: '',\n            bottom: '',\n            [ARROW_EDGE[side]]: `${-arrowSize / 2}px`,\n            transform: `rotate(${ARROW_ROTATION[side]}deg)`,\n          });\n        }\n        Object.assign(floating.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n          visibility: '',\n          transformOrigin: TRANSFORM_ORIGIN[side],\n        });\n        floating.dataset.side = side;\n        floating.dataset.align = align;\n        resolveReady();\n      },\n    );\n  const cleanup = autoUpdate(anchor, floating, update);\n\n  return {\n    ready,\n    stop() {\n      if (stopped) return;\n      stopped = true;\n      cleanup();\n    },\n  };\n}\n\n/** 关闭浮层时焦点还给谁：true 锚点，元素，或 false 不还 */\nexport type RestoreFocus = boolean | HTMLElement | null;\n\n/** createAnchoredLayer 的返回值：一个原生 popover 浮层的打开与关闭 */\nexport interface AnchoredLayer {\n  /** 是否显示着（show 之后、hide 之前） */\n  readonly visible: boolean;\n  /** 显示 panel（showPopover）并贴着 anchor 定位；返回第一次定位完成、可以移入焦点的 Promise。已显示时不重复 */\n  show(anchor: FloatingAnchor, panel: HTMLElement, options?: FloatingOptions): Promise<void>;\n  /**\n   * 停止定位并隐藏；焦点还在浮层里或已丢失时归还：restoreFocus 默认 true 还给锚点，给元素时还给它，false 不还。\n   * 未显示时什么也不做\n   */\n  hide(options?: { restoreFocus?: RestoreFocus }): void;\n}\n\n/**\n * 锚定浮层的生命周期（Popover、Menu、Tooltip 共用）：显示 → 定位 → 关闭时停止定位、归还焦点。\n * 原生 popover=\"auto\" 被 Esc、点击外部关闭（light dismiss）时浏览器先隐藏了它，组件在 toggle 事件里调用 hide 收尾。\n */\nexport function createAnchoredLayer(): AnchoredLayer {\n  let current: { anchor: FloatingAnchor; panel: HTMLElement; anchored: Anchored } | undefined;\n  let ready: Promise<void> = Promise.resolve();\n  return {\n    get visible() {\n      return current != null;\n    },\n    show(anchor, panel, options) {\n      if (current) return ready;\n      if (!panel.matches(':popover-open')) panel.showPopover();\n      const anchored = anchorFloating(anchor, panel, options);\n      current = { anchor, panel, anchored };\n      ready = anchored.ready;\n      return ready;\n    },\n    hide({ restoreFocus = true } = {}) {\n      if (!current) return;\n      const { anchor, panel, anchored } = current;\n      current = undefined;\n      anchored.stop();\n      if (panel.matches(':popover-open')) panel.hidePopover();\n      const target = restoreFocus === true ? anchor : restoreFocus;\n      if (target instanceof HTMLElement) returnFocus(panel, target);\n    },\n  };\n}\n\n/** useAnchoredPopover 每次渲染后读取的状态 */\nexport interface AnchoredPopoverState {\n  /** 是否打开 */\n  open: boolean;\n  /** 锚点（触发器、输入框外壳，或右键菜单的虚拟锚点） */\n  anchor: FloatingAnchor | null;\n  /** 浮层（popover 元素） */\n  panel: HTMLElement | null;\n  /** 定位选项 */\n  floating?: FloatingOptions;\n  /**\n   * 关闭时焦点还给谁：默认 true 还给锚点；锚点是输入框外壳时给打开按钮（DatePicker）；\n   * 焦点一直在锚点上的组件（Select、Combobox）设 false\n   */\n  restoreFocus?: RestoreFocus;\n}\n\n/** useAnchoredPopover 的回调 */\nexport interface AnchoredPopoverEvents {\n  /** 浏览器关掉了浮层：按了 Esc，或点了外面（别的浮层打开也算）；组件把 open 写回 false */\n  close: (reason: 'escape' | 'outside', event: Event) => void;\n  /** 浮层打开并第一次定位完成（可见）：移入焦点等 */\n  shown?: (panel: HTMLElement) => void;\n}\n\n/**\n * 原生 popover=\"auto\" 的锚定浮层接到组件的 open 上（Popover、Menu、Select、Combobox 共用）：\n * open 变化时显示或隐藏（DOM 更新之后），浏览器的 light dismiss 写回 open，卸载时收起。\n * 返回要放到浮层元素上的 onToggle。在组件 setup 里调用。\n *\n *   const { onToggle } = useAnchoredPopover(\n *     () => ({ open, anchor, panel, floating: { placement } }),\n *     { close: (reason, event) => setOpen(false, reason, event), shown: focusFirst },\n *   );\n */\nexport function useAnchoredPopover(\n  read: () => AnchoredPopoverState,\n  events: AnchoredPopoverEvents,\n): { onToggle: (event: Event) => void } {\n  const layer = createAnchoredLayer();\n  trackEscape();\n\n  watchPostEffect(() => {\n    const { open, anchor, panel, floating, restoreFocus = true } = read();\n    if (!open) {\n      layer.hide({ restoreFocus });\n      return;\n    }\n    if (!anchor || !panel) return;\n    // 已经显示着（只是定位选项变了）时不再触发 shown，焦点不会被拉回第一项\n    const opening = !layer.visible;\n    const ready = layer.show(anchor, panel, floating);\n    if (opening && events.shown) void ready.then(() => events.shown!(panel));\n  });\n  onScopeDispose(() => layer.hide({ restoreFocus: read().restoreFocus ?? true }));\n\n  return {\n    onToggle(event) {\n      if ((event as ToggleEvent).newState === 'open') return;\n      const state = read();\n      if (state.open) events.close(closedByEscape(event) ? 'escape' : 'outside', event);\n      layer.hide({ restoreFocus: state.restoreFocus ?? true });\n    },\n  };\n}\n\n// 最近一次按 Esc 的时间：light dismiss 的 toggle 事件不说原因，按时间判断是不是 Esc 关的\nlet escapeAt = -Infinity;\nlet trackingEscape = false;\n\n/** 开始记录 Esc（整页一个监听，第一个浮层组件 setup 时装上） */\nfunction trackEscape() {\n  if (trackingEscape || typeof window === 'undefined') return;\n  trackingEscape = true;\n  window.addEventListener('keydown', (key) => key.key === 'Escape' && (escapeAt = key.timeStamp), {\n    capture: true,\n  });\n}\n\n/** toggle 事件紧跟在 Esc 之后（浏览器在按键后排队派发）就是 Esc 关的 */\nconst closedByEscape = (event: Event) => event.timeStamp - escapeAt < 250;\n"],"mappings":"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"}
+{"version":3,"file":"floating.js","names":["arrow","arrowMiddleware"],"sources":["../../../src/utils/dom/floating.ts"],"sourcesContent":["/**\n * 锚定浮层：Popover、Tooltip、Menu、Select 的弹出层贴着触发器显示。位置由 floating-ui 计算，\n * 显示、隐藏、Esc、点击外部仍交给原生 popover；createAnchoredLayer 把两者串成打开、关闭的流程。\n *\n *   const anchored = anchorFloating(trigger, panel, { placement: 'bottom-start' });\n *   await anchored.ready;   // 第一次定位完成、已经可见：这时才能把焦点移进去\n *   anchored.stop();        // 关闭时停止跟随\n *   sx: [floatingStyles.anchored, …]   // 浮层自己的样式：去掉原生 popover 默认的居中与外边距\n *\n * - 第一次算好位置之前浮层是 visibility: hidden，不会在默认位置闪一下；\n * - 空间不够时翻到另一侧（flip）、贴着视口边缘挪回来（shift），滚动、缩放、锚点变化时自动重新定位（autoUpdate）；\n * - start / end 对齐是逻辑方向，从右到左排版下自动镜像（floating-ui 读浮层的 direction）；\n * - 最终方向写到 data-side / data-align，缩放原点（transform-origin）朝向锚点，进出场的 scale 过渡从锚点那侧展开。\n */\nimport {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  computePosition,\n  flip,\n  offset,\n  shift,\n  size,\n  type Middleware,\n  type Placement,\n  type VirtualElement,\n} from '@floating-ui/dom';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onScopeDispose, watchPostEffect } from 'vue';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { transitions } from '../style/transitions';\nimport { fontSizeStyles, type TextSize } from '../style/typography';\nimport { returnFocus } from './focus';\n\n/** 弹出位置：主方向 + 对齐方式（start 对齐锚点的起始边，end 对齐结束边）；空间不够时自动翻转 */\nexport interface FloatingPlacements {\n  /** 上方居中 */\n  top: unknown;\n  /** 上方，与锚点起始边对齐 */\n  'top-start': unknown;\n  /** 上方，与锚点结束边对齐 */\n  'top-end': unknown;\n  /** 下方居中 */\n  bottom: unknown;\n  /** 下方，与锚点起始边对齐 */\n  'bottom-start': unknown;\n  /** 下方，与锚点结束边对齐 */\n  'bottom-end': unknown;\n  /** 左侧居中 */\n  left: unknown;\n  /** 左侧，与锚点顶边对齐 */\n  'left-start': unknown;\n  /** 左侧，与锚点底边对齐 */\n  'left-end': unknown;\n  /** 右侧居中 */\n  right: unknown;\n  /** 右侧，与锚点顶边对齐 */\n  'right-start': unknown;\n  /** 右侧，与锚点底边对齐 */\n  'right-end': unknown;\n}\n\n/** 弹出位置 */\nexport type FloatingPlacement = keyof FloatingPlacements & Placement;\n\n/**\n * 锚点：元素，或只有位置的虚拟锚点（右键菜单从指针的位置弹出：`pointAnchor(x, y)`）。\n * 虚拟锚点没有元素可以还焦点，关闭后焦点由组件自己安排\n */\nexport type FloatingAnchor = HTMLElement | VirtualElement;\n\n/** 视口里一个点（clientX / clientY）做锚点 */\nexport function pointAnchor(x: number, y: number): VirtualElement {\n  return { getBoundingClientRect: () => new DOMRect(x, y, 0, 0) };\n}\n\n/** anchorFloating 的选项 */\nexport interface FloatingOptions {\n  /** 弹出位置，默认 bottom-start */\n  placement?: FloatingPlacement;\n  /** 与锚点的距离（px），默认 6 */\n  offset?: number;\n  /** 至少与锚点一样宽：下拉框、组合框的选项列表 */\n  matchWidth?: boolean;\n  /** 最大高度限制在视口剩余空间内（浮层自己设 overflow 滚动）：菜单、选项列表 */\n  fitHeight?: boolean;\n  /** 箭头元素（浮层里的子元素，样式用 floatingStyles.arrow）：指向锚点，随翻转换边；距离自动加上箭头露出的一半 */\n  arrow?: HTMLElement | null;\n  /** 主方向与对侧都放不下时，再试垂直的两侧（窄屏上“右侧”的大卡片改到上下）：引导卡片 */\n  crossAxisFallback?: boolean;\n}\n\n/** anchorFloating 的返回值 */\nexport interface Anchored {\n  /** 第一次定位完成、浮层已可见时完成；在这之前就 stop 时不会完成 */\n  readonly ready: Promise<void>;\n  /** 停止跟随锚点；关闭浮层时调用，重复调用无副作用 */\n  stop(): void;\n}\n\ntype Side = 'top' | 'right' | 'bottom' | 'left';\n\n/** 缩放原点朝向锚点：弹出在下方时从上边缘展开 */\nconst TRANSFORM_ORIGIN: Record<Side, string> = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n};\n\n/** 箭头贴着浮层的哪条边（与弹出方向相反） */\nconst ARROW_EDGE: Record<Side, Side> = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n};\n/** 箭头（画了右、下两条边的方块）转多少度才朝向锚点 */\nconst ARROW_ROTATION: Record<Side, number> = { top: 45, right: 135, bottom: 225, left: -45 };\n\n/**\n * 弹出面板（选项列表、树、日期面板）共用的样式：锚定定位、浮起的表面、缩放进出场；\n * 面板渲染在顶层，不是输入框外壳的后代、不继承它的字号：按控件的 size 设置。ListPopover、TreeSelect、日期选择器用它\n */\nexport function anchoredPanelSx(size?: TextSize): SxStyles {\n  return [\n    floatingStyles.anchored,\n    floatingStyles.surface,\n    size && fontSizeStyles[size],\n    transitions.scale,\n  ] as SxStyles;\n}\n\n/** 锚定浮层的基础样式：定位与表面 */\nexport const floatingStyles = css.create({\n  /** 原生 popover 默认居中显示、带外边距，改为由 anchorFloating 写入的 left / top 定位 */\n  anchored: { position: 'fixed', inset: 'auto', margin: 0 },\n  /** 浮起的表面：边框、圆角、阴影（Popover、Menu、选项列表）；内边距各自定 */\n  surface: {\n    boxSizing: 'border-box',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_lg',\n    backgroundColor: '_surfaceRaised',\n    color: '_text',\n    boxShadow: '_lg',\n  },\n  /**\n   * 箭头：一个小方块，只画右、下两条边，旋转后尖角朝向锚点；底色、边框跟随浮层（inherit）。\n   * 位置与旋转由 anchorFloating 写\n   */\n  arrow: {\n    position: 'absolute',\n    boxSizing: 'border-box',\n    width: '0.625em',\n    height: '0.625em',\n    backgroundColor: 'inherit',\n    borderStyle: 'solid',\n    borderColor: 'inherit',\n    borderWidth: 0,\n    borderRightWidth: 'inherit',\n    borderBottomWidth: 'inherit',\n    borderBottomRightRadius: '_borderWidths.sm',\n    pointerEvents: 'none',\n  },\n  /** 有箭头的浮层：原生 popover 默认 overflow: auto 会把伸出去的箭头裁掉 */\n  withArrow: { overflow: 'visible' },\n  /**\n   * 内容会滚动的浮层（选项列表、菜单）：打开时是竖向 flex、裁掉溢出，里面放 ScrollArea（scrollArea）撑满，\n   * 滚动条是浮层的；关闭时仍由浏览器隐藏（只在 :popover-open 时改 display）\n   */\n  scrollPanel: {\n    display: { default: null, ':popover-open': 'flex' },\n    flexDirection: 'column',\n    overflow: 'hidden',\n    // 去掉原生 popover 默认的 0.25em 内边距：滚动条贴着浮层边缘，内边距由里面的内容层给\n    padding: 0,\n  },\n  /** scrollPanel 里的 ScrollArea：占满剩下的高度（最大高度由 anchorFloating 的 fitHeight 写在浮层上） */\n  scrollArea: { flexGrow: 1, minHeight: 0 },\n});\n\n/** 与视口边缘至少留出的距离（px） */\nconst VIEWPORT_PADDING = 8;\n\n/** 把 floating 定位到 anchor 旁边并持续跟随；floating 需要已经显示（如 showPopover 之后） */\nexport function anchorFloating(\n  anchor: FloatingAnchor,\n  floating: HTMLElement,\n  {\n    placement = 'bottom-start',\n    offset: distance = 6,\n    matchWidth,\n    fitHeight,\n    arrow,\n    crossAxisFallback,\n  }: FloatingOptions = {},\n): Anchored {\n  // 箭头伸出浮层一半（旋转后的对角线的一半约等于边长的 0.7）：距离加上这一段，尖角才不压在锚点上\n  const arrowSize = arrow?.offsetWidth ?? 0;\n  const middleware: Middleware[] = [\n    offset(distance + arrowSize * 0.7),\n    flip({\n      padding: VIEWPORT_PADDING,\n      fallbackAxisSideDirection: crossAxisFallback ? 'end' : 'none',\n    }),\n    shift({ padding: VIEWPORT_PADDING }),\n  ];\n  // 箭头离浮层的圆角留出距离，不会画到圆角外面\n  if (arrow) middleware.push(arrowMiddleware({ element: arrow, padding: arrowSize }));\n  if (matchWidth || fitHeight) {\n    middleware.push(\n      size({\n        padding: VIEWPORT_PADDING,\n        apply({ rects, availableHeight, elements }) {\n          if (matchWidth) elements.floating.style.minWidth = `${rects.reference.width}px`;\n          if (fitHeight) elements.floating.style.maxHeight = `${Math.max(0, availableHeight)}px`;\n        },\n      }),\n    );\n  }\n\n  let stopped = false;\n  let resolveReady!: () => void;\n  const ready = new Promise<void>((resolve) => (resolveReady = resolve));\n  floating.style.visibility = 'hidden';\n\n  const update = () =>\n    void computePosition(anchor, floating, { placement, strategy: 'fixed', middleware }).then(\n      ({ x, y, placement: final, middlewareData }) => {\n        if (stopped) return;\n        const [side, align = 'center'] = final.split('-') as [Side, string?];\n        if (arrow && middlewareData.arrow) {\n          const { x: arrowX, y: arrowY } = middlewareData.arrow;\n          Object.assign(arrow.style, {\n            left: arrowX != null ? `${arrowX}px` : '',\n            top: arrowY != null ? `${arrowY}px` : '',\n            right: '',\n            bottom: '',\n            [ARROW_EDGE[side]]: `${-arrowSize / 2}px`,\n            transform: `rotate(${ARROW_ROTATION[side]}deg)`,\n          });\n        }\n        Object.assign(floating.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n          visibility: '',\n          transformOrigin: TRANSFORM_ORIGIN[side],\n        });\n        floating.dataset.side = side;\n        floating.dataset.align = align;\n        resolveReady();\n      },\n    );\n  const cleanup = autoUpdate(anchor, floating, update);\n\n  return {\n    ready,\n    stop() {\n      if (stopped) return;\n      stopped = true;\n      cleanup();\n    },\n  };\n}\n\n/** 关闭浮层时焦点还给谁：true 锚点，元素，或 false 不还 */\nexport type RestoreFocus = boolean | HTMLElement | null;\n\n/** createAnchoredLayer 的返回值：一个原生 popover 浮层的打开与关闭 */\nexport interface AnchoredLayer {\n  /** 是否显示着（show 之后、hide 之前） */\n  readonly visible: boolean;\n  /** 显示 panel（showPopover）并贴着 anchor 定位；返回第一次定位完成、可以移入焦点的 Promise。已显示时不重复 */\n  show(anchor: FloatingAnchor, panel: HTMLElement, options?: FloatingOptions): Promise<void>;\n  /**\n   * 停止定位并隐藏；焦点还在浮层里或已丢失时归还：restoreFocus 默认 true 还给锚点，给元素时还给它，false 不还。\n   * 未显示时什么也不做\n   */\n  hide(options?: { restoreFocus?: RestoreFocus }): void;\n}\n\n/**\n * 锚定浮层的生命周期（Popover、Menu、Tooltip 共用）：显示 → 定位 → 关闭时停止定位、归还焦点。\n * 原生 popover=\"auto\" 被 Esc、点击外部关闭（light dismiss）时浏览器先隐藏了它，组件在 toggle 事件里调用 hide 收尾。\n */\nexport function createAnchoredLayer(): AnchoredLayer {\n  let current: { anchor: FloatingAnchor; panel: HTMLElement; anchored: Anchored } | undefined;\n  let ready: Promise<void> = Promise.resolve();\n  return {\n    get visible() {\n      return current != null;\n    },\n    show(anchor, panel, options) {\n      if (current) return ready;\n      if (!panel.matches(':popover-open')) panel.showPopover();\n      const anchored = anchorFloating(anchor, panel, options);\n      current = { anchor, panel, anchored };\n      ready = anchored.ready;\n      return ready;\n    },\n    hide({ restoreFocus = true } = {}) {\n      if (!current) return;\n      const { anchor, panel, anchored } = current;\n      current = undefined;\n      anchored.stop();\n      if (panel.matches(':popover-open')) panel.hidePopover();\n      const target = restoreFocus === true ? anchor : restoreFocus;\n      if (target instanceof HTMLElement) returnFocus(panel, target);\n    },\n  };\n}\n\n/** useAnchoredPopover 每次渲染后读取的状态 */\nexport interface AnchoredPopoverState {\n  /** 是否打开 */\n  open: boolean;\n  /** 锚点（触发器、输入框外壳，或右键菜单的虚拟锚点） */\n  anchor: FloatingAnchor | null;\n  /** 浮层（popover 元素） */\n  panel: HTMLElement | null;\n  /** 定位选项 */\n  floating?: FloatingOptions;\n  /**\n   * 关闭时焦点还给谁：默认 true 还给锚点；锚点是输入框外壳时给打开按钮（DatePicker）；\n   * 焦点一直在锚点上的组件（Select、Combobox）设 false\n   */\n  restoreFocus?: RestoreFocus;\n}\n\n/** useAnchoredPopover 的回调 */\nexport interface AnchoredPopoverEvents {\n  /** 浏览器关掉了浮层：按了 Esc，或点了外面（别的浮层打开也算）；组件把 open 写回 false */\n  close: (reason: 'escape' | 'outside', event: Event) => void;\n  /** 浮层打开并第一次定位完成（可见）：移入焦点等 */\n  shown?: (panel: HTMLElement) => void;\n}\n\n/**\n * 原生 popover=\"auto\" 的锚定浮层接到组件的 open 上（Popover、Menu、Select、Combobox 共用）：\n * open 变化时显示或隐藏（DOM 更新之后），浏览器的 light dismiss 写回 open，卸载时收起。\n * 返回要放到浮层元素上的 onToggle。在组件 setup 里调用。\n *\n *   const { onToggle } = useAnchoredPopover(\n *     () => ({ open, anchor, panel, floating: { placement } }),\n *     { close: (reason, event) => setOpen(false, reason, event), shown: focusFirst },\n *   );\n */\nexport function useAnchoredPopover(\n  read: () => AnchoredPopoverState,\n  events: AnchoredPopoverEvents,\n): { onToggle: (event: Event) => void } {\n  const layer = createAnchoredLayer();\n  trackEscape();\n\n  watchPostEffect(() => {\n    const { open, anchor, panel, floating, restoreFocus = true } = read();\n    if (!open) {\n      layer.hide({ restoreFocus });\n      return;\n    }\n    if (!anchor || !panel) return;\n    // 已经显示着（只是定位选项变了）时不再触发 shown，焦点不会被拉回第一项\n    const opening = !layer.visible;\n    const ready = layer.show(anchor, panel, floating);\n    if (opening && events.shown) void ready.then(() => events.shown!(panel));\n  });\n  onScopeDispose(() => layer.hide({ restoreFocus: read().restoreFocus ?? true }));\n\n  return {\n    onToggle(event) {\n      if ((event as ToggleEvent).newState === 'open') return;\n      const state = read();\n      if (state.open) events.close(closedByEscape(event) ? 'escape' : 'outside', event);\n      layer.hide({ restoreFocus: state.restoreFocus ?? true });\n    },\n  };\n}\n\n// 最近一次按 Esc 的时间：light dismiss 的 toggle 事件不说原因，按时间判断是不是 Esc 关的\nlet escapeAt = -Infinity;\nlet trackingEscape = false;\n\n/** 开始记录 Esc（整页一个监听，第一个浮层组件 setup 时装上） */\nfunction trackEscape() {\n  if (trackingEscape || typeof window === 'undefined') return;\n  trackingEscape = true;\n  window.addEventListener('keydown', (key) => key.key === 'Escape' && (escapeAt = key.timeStamp), {\n    capture: true,\n  });\n}\n\n/** toggle 事件紧跟在 Esc 之后（浏览器在按键后排队派发）就是 Esc 关的 */\nconst closedByEscape = (event: Event) => event.timeStamp - escapeAt < 250;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuEA,SAAgB,YAAY,GAAW,GAA2B;CAChE,OAAO,EAAE,6BAA6B,IAAI,QAAQ,GAAG,GAAG,GAAG,CAAC,EAAE;AAChE;;AA6BA,IAAM,mBAAyC;CAC7C,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;AACR;;AAGA,IAAM,aAAiC;CACrC,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;AACR;;AAEA,IAAM,iBAAuC;CAAE,KAAK;CAAI,OAAO;CAAK,QAAQ;CAAK,MAAM;AAAI;;;;;AAM3F,SAAgB,gBAAgB,MAA2B;CACzD,OAAO;EACL,eAAe;EACf,eAAe;EACf,QAAQ,eAAe;EACvB,YAAY;CAAK;AAErB;;AAGA,IAAa,iBAAiB,IAAI,OAAO;;CAEvC,UAAU;EAAE,UAAU;EAAS,OAAO;EAAQ,QAAQ;CAAE;;CAExD,SAAS;EACP,WAAW;EACX,aAAa;EACb,aAAa;EACb,aAAa;EACb,cAAc;EACd,iBAAiB;EACjB,OAAO;EACP,WAAW;CACb;;;;;CAKA,OAAO;EACL,UAAU;EACV,WAAW;EACX,OAAO;EACP,QAAQ;EACR,iBAAiB;EACjB,aAAa;EACb,aAAa;EACb,aAAa;EACb,kBAAkB;EAClB,mBAAmB;EACnB,yBAAyB;EACzB,eAAe;CACjB;;CAEA,WAAW,EAAE,UAAU,UAAU;;;;;CAKjC,aAAa;EACX,SAAS;GAAE,SAAS;GAAM,iBAAiB;EAAO;EAClD,eAAe;EACf,UAAU;EAEV,SAAS;CACX;;CAEA,YAAY;EAAE,UAAU;EAAG,WAAW;CAAE;AAC1C,CAAC;;AAGD,IAAM,mBAAmB;;AAGzB,SAAgB,eACd,QACA,UACA,EACE,YAAY,gBACZ,QAAQ,WAAW,GACnB,YACA,WACA,OAAA,SACA,sBACmB,CAAC,GACZ;CAEV,MAAM,YAAYA,SAAO,eAAe;CACxC,MAAM,aAA2B;EAC/B,OAAO,WAAW,YAAY,EAAG;EACjC,KAAK;GACH,SAAS;GACT,2BAA2B,oBAAoB,QAAQ;EACzD,CAAC;EACD,MAAM,EAAE,SAAS,iBAAiB,CAAC;CAAC;CAGtC,IAAIA,SAAO,WAAW,KAAKC,MAAgB;EAAE,SAASD;EAAO,SAAS;CAAU,CAAC,CAAC;CAClF,IAAI,cAAc,WAChB,WAAW,KACT,KAAK;EACH,SAAS;EACT,MAAM,EAAE,OAAO,iBAAiB,YAAY;GAC1C,IAAI,YAAY,SAAS,SAAS,MAAM,WAAW,GAAG,MAAM,UAAU,MAAK;GAC3E,IAAI,WAAW,SAAS,SAAS,MAAM,YAAY,GAAG,KAAK,IAAI,GAAG,eAAe,EAAC;EACpF;CACF,CAAC,CACH;CAGF,IAAI,UAAU;CACd,IAAI;CACJ,MAAM,QAAQ,IAAI,SAAe,YAAa,eAAe,OAAQ;CACrE,SAAS,MAAM,aAAa;CAE5B,MAAM,eACJ,KAAK,gBAAgB,QAAQ,UAAU;EAAE;EAAW,UAAU;EAAS;CAAW,CAAC,CAAC,CAAC,MAClF,EAAE,GAAG,GAAG,WAAW,OAAO,qBAAqB;EAC9C,IAAI,SAAS;EACb,MAAM,CAAC,MAAM,QAAQ,YAAY,MAAM,MAAM,GAAG;EAChD,IAAIA,WAAS,eAAe,OAAO;GACjC,MAAM,EAAE,GAAG,QAAQ,GAAG,WAAW,eAAe;GAChD,OAAO,OAAOA,QAAM,OAAO;IACzB,MAAM,UAAU,OAAO,GAAG,OAAM,MAAO;IACvC,KAAK,UAAU,OAAO,GAAG,OAAM,MAAO;IACtC,OAAO;IACP,QAAQ;KACP,WAAW,QAAQ,GAAG,CAAC,YAAY,EAAC;IACrC,WAAW,UAAU,eAAe,MAAK;GAC3C,CAAC;EACH;EACA,OAAO,OAAO,SAAS,OAAO;GAC5B,MAAM,GAAG,EAAC;GACV,KAAK,GAAG,EAAC;GACT,YAAY;GACZ,iBAAiB,iBAAiB;EACpC,CAAC;EACD,SAAS,QAAQ,OAAO;EACxB,SAAS,QAAQ,QAAQ;EACzB,aAAa;CACf,CACF;CACF,MAAM,UAAU,WAAW,QAAQ,UAAU,MAAM;CAEnD,OAAO;EACL;EACA,OAAO;GACL,IAAI,SAAS;GACb,UAAU;GACV,QAAQ;EACV;CACF;AACF;;;;;AAsBA,SAAgB,sBAAqC;CACnD,IAAI;CACJ,IAAI,QAAuB,QAAQ,QAAQ;CAC3C,OAAO;EACL,IAAI,UAAU;GACZ,OAAO,WAAW;EACpB;EACA,KAAK,QAAQ,OAAO,SAAS;GAC3B,IAAI,SAAS,OAAO;GACpB,IAAI,CAAC,MAAM,QAAQ,eAAe,GAAG,MAAM,YAAY;GACvD,MAAM,WAAW,eAAe,QAAQ,OAAO,OAAO;GACtD,UAAU;IAAE;IAAQ;IAAO;GAAS;GACpC,QAAQ,SAAS;GACjB,OAAO;EACT;EACA,KAAK,EAAE,eAAe,SAAS,CAAC,GAAG;GACjC,IAAI,CAAC,SAAS;GACd,MAAM,EAAE,QAAQ,OAAO,aAAa;GACpC,UAAU,KAAA;GACV,SAAS,KAAK;GACd,IAAI,MAAM,QAAQ,eAAe,GAAG,MAAM,YAAY;GACtD,MAAM,SAAS,iBAAiB,OAAO,SAAS;GAChD,IAAI,kBAAkB,aAAa,YAAY,OAAO,MAAM;EAC9D;CACF;AACF;;;;;;;;;;;AAqCA,SAAgB,mBACd,MACA,QACsC;CACtC,MAAM,QAAQ,oBAAoB;CAClC,YAAY;CAEZ,sBAAsB;EACpB,MAAM,EAAE,MAAM,QAAQ,OAAO,UAAU,eAAe,SAAS,KAAK;EACpE,IAAI,CAAC,MAAM;GACT,MAAM,KAAK,EAAE,aAAa,CAAC;GAC3B;EACF;EACA,IAAI,CAAC,UAAU,CAAC,OAAO;EAEvB,MAAM,UAAU,CAAC,MAAM;EACvB,MAAM,QAAQ,MAAM,KAAK,QAAQ,OAAO,QAAQ;EAChD,IAAI,WAAW,OAAO,OAAO,MAAW,WAAW,OAAO,MAAO,KAAK,CAAC;CACzE,CAAC;CACD,qBAAqB,MAAM,KAAK,EAAE,cAAc,KAAK,CAAC,CAAC,gBAAgB,KAAK,CAAC,CAAC;CAE9E,OAAO,EACL,SAAS,OAAO;EACd,IAAK,MAAsB,aAAa,QAAQ;EAChD,MAAM,QAAQ,KAAK;EACnB,IAAI,MAAM,MAAM,OAAO,MAAM,eAAe,KAAK,IAAI,WAAW,WAAW,KAAK;EAChF,MAAM,KAAK,EAAE,cAAc,MAAM,gBAAgB,KAAK,CAAC;CACzD,EACF;AACF;AAGA,IAAI,WAAW;AACf,IAAI,iBAAiB;;AAGrB,SAAS,cAAc;CACrB,IAAI,kBAAkB,OAAO,WAAW,aAAa;CACrD,iBAAiB;CACjB,OAAO,iBAAiB,YAAY,QAAQ,IAAI,QAAQ,aAAa,WAAW,IAAI,YAAY,EAC9F,SAAS,KACX,CAAC;AACH;;AAGA,IAAM,kBAAkB,UAAiB,MAAM,YAAY,WAAW"}

package/dist/utils/dom/ripple.d.ts

@@ -7,7 +7,7 @@
  *   const ripple = useRipple(() => props.ripple)
  *   mergeAttrs<'button'>(默认, rest, { ...ripple })
  */
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 /** 宿主元素需要的样式：波纹相对它定位，超出圆角的部分裁掉 */
 export declare const rippleHostStyles: Readonly<{
     host: css.CompiledStyles;

package/dist/utils/dom/ripple.js

@@ -2,7 +2,7 @@ import { t } from "../../config/theme/tokens.js";
 import { useConfig } from "../../config/context.js";
 import { applyStyleAttrs } from "../props.js";
 import { afterTransitions } from "../style/transitions.js";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/utils/dom/ripple.ts
 /**
 * 波纹：按下时从指针位置扩散出一圈半透明的颜色，松开后淡出（键盘按下 Enter / 空格时从中心扩散）。

package/dist/utils/dom/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","names":[],"sources":["../../../src/utils/dom/ripple.ts"],"sourcesContent":["/**\n * 波纹：按下时从指针位置扩散出一圈半透明的颜色，松开后淡出（键盘按下 Enter / 空格时从中心扩散）。\n * 纯 CSS 动画，时长取主题的 durations：开启“减少动态效果”时没有扩散过程，只是按下时变色。\n * 按钮、导航项、菜单项等可点击的组件共用；宿主元素加 rippleHostStyles.host（定位与裁切）。\n * 默认开启，createUi / Provider 的 ripple 全局开关，组件的 ripple prop 单独覆盖（见 useRipple）。\n *\n *   const ripple = useRipple(() => props.ripple)\n *   mergeAttrs<'button'>(默认, rest, { ...ripple })\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useConfig } from '../../config/context';\nimport { applyStyleAttrs } from '../props';\nimport { afterTransitions } from '../style/transitions';\nimport { t } from '../../config/theme/tokens';\n\nconst expand = css.keyframes({\n  from: { transform: 'scale(0)' },\n  to: { transform: 'scale(1)' },\n});\n\n/** 宿主元素需要的样式：波纹相对它定位，超出圆角的部分裁掉 */\nexport const rippleHostStyles = css.create({\n  host: { position: 'relative', overflow: 'hidden' },\n});\n\n/** 波纹 的样式：ripple、fading */\nexport const rippleStyles = css.create({\n  ripple: {\n    position: 'absolute',\n    borderRadius: '_full',\n    pointerEvents: 'none',\n    // 跟随文字颜色：实底按钮上是浅色，描边按钮上是深色\n    backgroundColor: 'color-mix(in srgb, currentColor 22%, transparent)',\n    animationName: expand,\n    animationDuration: '_durations.lg',\n    animationTimingFunction: '_easings.standard',\n    animationFillMode: 'forwards',\n    transition: `opacity ${t.durations.md} ${t.easings.exit}`,\n  },\n  fading: { opacity: 0 },\n});\n\n// 位置与大小是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** 波纹 的样式：at */\nexport const ripplePlacementStyles = css.create({\n  at: (x: number, y: number, size: number) => ({ left: x, top: y, width: size, height: size }),\n});\n\n/** useRipple 的结果：展开到宿主元素上（mergeProps 的受管层） */\nexport interface RippleHandlers {\n  /** 指针按下：从按下的位置扩散 */\n  onPointerdown: (event: PointerEvent) => void;\n  /** Enter / 空格：从中心扩散 */\n  onKeydown: (event: KeyboardEvent) => void;\n}\n\n/**\n * 组件里用的波纹：按开关决定是否出波纹，返回的两个处理函数展开到宿主元素上（`...ripple`）。\n * own 读组件自己的 ripple prop（没写时为 undefined，沿用配置）；在 setup 里调用\n */\nexport function useRipple(own: () => boolean | undefined): RippleHandlers {\n  const config = useConfig();\n  const handler = (event: PointerEvent | KeyboardEvent) => {\n    if (own() ?? config.ripple) startRipple(event);\n  };\n  return { onPointerdown: handler, onKeydown: handler };\n}\n\n/** 不可用的宿主不出波纹 */\nconst isDisabled = (host: Element) => host.matches(':disabled, [aria-disabled=\"true\"]');\n\n/**\n * 在 event.currentTarget 上开始一个波纹，松开、移出、取消或失去焦点时淡出并移除。\n * 键盘事件只认 Enter 与空格（按住不放的重复事件忽略）。\n */\nexport function startRipple(event: PointerEvent | KeyboardEvent): void {\n  const host = event.currentTarget;\n  if (!(host instanceof HTMLElement) || isDisabled(host)) return;\n  const keyboard = event instanceof KeyboardEvent;\n  if (keyboard && (event.repeat || (event.key !== 'Enter' && event.key !== ' '))) return;\n  if (!keyboard && event.button !== 0) return;\n\n  const rect = host.getBoundingClientRect();\n  const x = keyboard ? rect.width / 2 : event.clientX - rect.left;\n  const y = keyboard ? rect.height / 2 : event.clientY - rect.top;\n  // 圆心到最远的角的距离：扩散完正好盖满整个元素\n  const radius = Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y));\n  const ripple = document.createElement('span');\n  ripple.setAttribute('aria-hidden', 'true');\n  applyStyleAttrs(\n    ripple,\n    css.attrs(rippleStyles.ripple, ripplePlacementStyles.at(x - radius, y - radius, radius * 2)),\n  );\n  host.append(ripple);\n\n  const release = () => {\n    for (const [type, target] of releaseEvents) target.removeEventListener(type, release);\n    ripple.classList.add(...(css.attrs(rippleStyles.fading).class ?? '').split(' '));\n    void afterTransitions(ripple).then(() => ripple.remove());\n  };\n  const releaseEvents: [string, EventTarget][] = keyboard\n    ? [\n        ['keyup', host],\n        ['blur', host],\n      ]\n    : [\n        ['pointerup', window],\n        ['pointercancel', window],\n        ['pointerleave', host],\n      ];\n  for (const [type, target] of releaseEvents) target.addEventListener(type, release);\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAM,SAAS,IAAI,UAAU;CAC3B,MAAM,EAAE,WAAW,WAAW;CAC9B,IAAI,EAAE,WAAW,WAAW;AAC9B,CAAC;;AAGD,IAAa,mBAAmB,IAAI,OAAO,EACzC,MAAM;CAAE,UAAU;CAAY,UAAU;AAAS,EACnD,CAAC;;AAGD,IAAa,eAAe,IAAI,OAAO;CACrC,QAAQ;EACN,UAAU;EACV,cAAc;EACd,eAAe;EAEf,iBAAiB;EACjB,eAAe;EACf,mBAAmB;EACnB,yBAAyB;EACzB,mBAAmB;EACnB,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACrD;CACA,QAAQ,EAAE,SAAS,EAAE;AACvB,CAAC;;AAID,IAAa,wBAAwB,IAAI,OAAO,EAC9C,KAAK,GAAW,GAAW,UAAkB;CAAE,MAAM;CAAG,KAAK;CAAG,OAAO;CAAM,QAAQ;AAAK,GAC5F,CAAC;;;;;AAcD,SAAgB,UAAU,KAAgD;CACxE,MAAM,SAAS,UAAU;CACzB,MAAM,WAAW,UAAwC;EACvD,IAAI,IAAI,KAAK,OAAO,QAAQ,YAAY,KAAK;CAC/C;CACA,OAAO;EAAE,eAAe;EAAS,WAAW;CAAQ;AACtD;;AAGA,IAAM,cAAc,SAAkB,KAAK,QAAQ,qCAAmC;;;;;AAMtF,SAAgB,YAAY,OAA2C;CACrE,MAAM,OAAO,MAAM;CACnB,IAAI,EAAE,gBAAgB,gBAAgB,WAAW,IAAI,GAAG;CACxD,MAAM,WAAW,iBAAiB;CAClC,IAAI,aAAa,MAAM,UAAW,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAO;CAChF,IAAI,CAAC,YAAY,MAAM,WAAW,GAAG;CAErC,MAAM,OAAO,KAAK,sBAAsB;CACxC,MAAM,IAAI,WAAW,KAAK,QAAQ,IAAI,MAAM,UAAU,KAAK;CAC3D,MAAM,IAAI,WAAW,KAAK,SAAS,IAAI,MAAM,UAAU,KAAK;CAE5D,MAAM,SAAS,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,QAAQ,CAAC,GAAG,KAAK,IAAI,GAAG,KAAK,SAAS,CAAC,CAAC;CACnF,MAAM,SAAS,SAAS,cAAc,MAAM;CAC5C,OAAO,aAAa,eAAe,MAAM;CACzC,gBACE,QACA,IAAI,MAAM,aAAa,QAAQ,sBAAsB,GAAG,IAAI,QAAQ,IAAI,QAAQ,SAAS,CAAC,CAAC,CAC7F;CACA,KAAK,OAAO,MAAM;CAElB,MAAM,gBAAgB;EACpB,KAAK,MAAM,CAAC,MAAM,WAAW,eAAe,OAAO,oBAAoB,MAAM,OAAO;EACpF,OAAO,UAAU,IAAI,IAAI,IAAI,MAAM,aAAa,MAAM,CAAC,CAAC,SAAS,GAAA,CAAI,MAAM,GAAG,CAAC;EAC/E,iBAAsB,MAAM,CAAC,CAAC,WAAW,OAAO,OAAO,CAAC;CAC1D;CACA,MAAM,gBAAyC,WAC3C,CACE,CAAC,SAAS,IAAI,GACd,CAAC,QAAQ,IAAI,CAAC,IAEhB;EACE,CAAC,aAAa,MAAM;EACpB,CAAC,iBAAiB,MAAM;EACxB,CAAC,gBAAgB,IAAI;CAAC;CAE5B,KAAK,MAAM,CAAC,MAAM,WAAW,eAAe,OAAO,iBAAiB,MAAM,OAAO;AACnF"}
+{"version":3,"file":"ripple.js","names":[],"sources":["../../../src/utils/dom/ripple.ts"],"sourcesContent":["/**\n * 波纹：按下时从指针位置扩散出一圈半透明的颜色，松开后淡出（键盘按下 Enter / 空格时从中心扩散）。\n * 纯 CSS 动画，时长取主题的 durations：开启“减少动态效果”时没有扩散过程，只是按下时变色。\n * 按钮、导航项、菜单项等可点击的组件共用；宿主元素加 rippleHostStyles.host（定位与裁切）。\n * 默认开启，createUi / Provider 的 ripple 全局开关，组件的 ripple prop 单独覆盖（见 useRipple）。\n *\n *   const ripple = useRipple(() => props.ripple)\n *   mergeAttrs<'button'>(默认, rest, { ...ripple })\n */\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useConfig } from '../../config/context';\nimport { applyStyleAttrs } from '../props';\nimport { afterTransitions } from '../style/transitions';\nimport { t } from '../../config/theme/tokens';\n\nconst expand = css.keyframes({\n  from: { transform: 'scale(0)' },\n  to: { transform: 'scale(1)' },\n});\n\n/** 宿主元素需要的样式：波纹相对它定位，超出圆角的部分裁掉 */\nexport const rippleHostStyles = css.create({\n  host: { position: 'relative', overflow: 'hidden' },\n});\n\n/** 波纹 的样式：ripple、fading */\nexport const rippleStyles = css.create({\n  ripple: {\n    position: 'absolute',\n    borderRadius: '_full',\n    pointerEvents: 'none',\n    // 跟随文字颜色：实底按钮上是浅色，描边按钮上是深色\n    backgroundColor: 'color-mix(in srgb, currentColor 22%, transparent)',\n    animationName: expand,\n    animationDuration: '_durations.lg',\n    animationTimingFunction: '_easings.standard',\n    animationFillMode: 'forwards',\n    transition: `opacity ${t.durations.md} ${t.easings.exit}`,\n  },\n  fading: { opacity: 0 },\n});\n\n// 位置与大小是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** 波纹 的样式：at */\nexport const ripplePlacementStyles = css.create({\n  at: (x: number, y: number, size: number) => ({ left: x, top: y, width: size, height: size }),\n});\n\n/** useRipple 的结果：展开到宿主元素上（mergeProps 的受管层） */\nexport interface RippleHandlers {\n  /** 指针按下：从按下的位置扩散 */\n  onPointerdown: (event: PointerEvent) => void;\n  /** Enter / 空格：从中心扩散 */\n  onKeydown: (event: KeyboardEvent) => void;\n}\n\n/**\n * 组件里用的波纹：按开关决定是否出波纹，返回的两个处理函数展开到宿主元素上（`...ripple`）。\n * own 读组件自己的 ripple prop（没写时为 undefined，沿用配置）；在 setup 里调用\n */\nexport function useRipple(own: () => boolean | undefined): RippleHandlers {\n  const config = useConfig();\n  const handler = (event: PointerEvent | KeyboardEvent) => {\n    if (own() ?? config.ripple) startRipple(event);\n  };\n  return { onPointerdown: handler, onKeydown: handler };\n}\n\n/** 不可用的宿主不出波纹 */\nconst isDisabled = (host: Element) => host.matches(':disabled, [aria-disabled=\"true\"]');\n\n/**\n * 在 event.currentTarget 上开始一个波纹，松开、移出、取消或失去焦点时淡出并移除。\n * 键盘事件只认 Enter 与空格（按住不放的重复事件忽略）。\n */\nexport function startRipple(event: PointerEvent | KeyboardEvent): void {\n  const host = event.currentTarget;\n  if (!(host instanceof HTMLElement) || isDisabled(host)) return;\n  const keyboard = event instanceof KeyboardEvent;\n  if (keyboard && (event.repeat || (event.key !== 'Enter' && event.key !== ' '))) return;\n  if (!keyboard && event.button !== 0) return;\n\n  const rect = host.getBoundingClientRect();\n  const x = keyboard ? rect.width / 2 : event.clientX - rect.left;\n  const y = keyboard ? rect.height / 2 : event.clientY - rect.top;\n  // 圆心到最远的角的距离：扩散完正好盖满整个元素\n  const radius = Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y));\n  const ripple = document.createElement('span');\n  ripple.setAttribute('aria-hidden', 'true');\n  applyStyleAttrs(\n    ripple,\n    css.attrs(rippleStyles.ripple, ripplePlacementStyles.at(x - radius, y - radius, radius * 2)),\n  );\n  host.append(ripple);\n\n  const release = () => {\n    for (const [type, target] of releaseEvents) target.removeEventListener(type, release);\n    ripple.classList.add(...(css.attrs(rippleStyles.fading).class ?? '').split(' '));\n    void afterTransitions(ripple).then(() => ripple.remove());\n  };\n  const releaseEvents: [string, EventTarget][] = keyboard\n    ? [\n        ['keyup', host],\n        ['blur', host],\n      ]\n    : [\n        ['pointerup', window],\n        ['pointercancel', window],\n        ['pointerleave', host],\n      ];\n  for (const [type, target] of releaseEvents) target.addEventListener(type, release);\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAM,SAAS,IAAI,UAAU;CAC3B,MAAM,EAAE,WAAW,WAAW;CAC9B,IAAI,EAAE,WAAW,WAAW;AAC9B,CAAC;;AAGD,IAAa,mBAAmB,IAAI,OAAO,EACzC,MAAM;CAAE,UAAU;CAAY,UAAU;AAAS,EACnD,CAAC;;AAGD,IAAa,eAAe,IAAI,OAAO;CACrC,QAAQ;EACN,UAAU;EACV,cAAc;EACd,eAAe;EAEf,iBAAiB;EACjB,eAAe;EACf,mBAAmB;EACnB,yBAAyB;EACzB,mBAAmB;EACnB,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACrD;CACA,QAAQ,EAAE,SAAS,EAAE;AACvB,CAAC;;AAID,IAAa,wBAAwB,IAAI,OAAO,EAC9C,KAAK,GAAW,GAAW,UAAkB;CAAE,MAAM;CAAG,KAAK;CAAG,OAAO;CAAM,QAAQ;AAAK,GAC5F,CAAC;;;;;AAcD,SAAgB,UAAU,KAAgD;CACxE,MAAM,SAAS,UAAU;CACzB,MAAM,WAAW,UAAwC;EACvD,IAAI,IAAI,KAAK,OAAO,QAAQ,YAAY,KAAK;CAC/C;CACA,OAAO;EAAE,eAAe;EAAS,WAAW;CAAQ;AACtD;;AAGA,IAAM,cAAc,SAAkB,KAAK,QAAQ,qCAAmC;;;;;AAMtF,SAAgB,YAAY,OAA2C;CACrE,MAAM,OAAO,MAAM;CACnB,IAAI,EAAE,gBAAgB,gBAAgB,WAAW,IAAI,GAAG;CACxD,MAAM,WAAW,iBAAiB;CAClC,IAAI,aAAa,MAAM,UAAW,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAO;CAChF,IAAI,CAAC,YAAY,MAAM,WAAW,GAAG;CAErC,MAAM,OAAO,KAAK,sBAAsB;CACxC,MAAM,IAAI,WAAW,KAAK,QAAQ,IAAI,MAAM,UAAU,KAAK;CAC3D,MAAM,IAAI,WAAW,KAAK,SAAS,IAAI,MAAM,UAAU,KAAK;CAE5D,MAAM,SAAS,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,QAAQ,CAAC,GAAG,KAAK,IAAI,GAAG,KAAK,SAAS,CAAC,CAAC;CACnF,MAAM,SAAS,SAAS,cAAc,MAAM;CAC5C,OAAO,aAAa,eAAe,MAAM;CACzC,gBACE,QACA,IAAI,MAAM,aAAa,QAAQ,sBAAsB,GAAG,IAAI,QAAQ,IAAI,QAAQ,SAAS,CAAC,CAAC,CAC7F;CACA,KAAK,OAAO,MAAM;CAElB,MAAM,gBAAgB;EACpB,KAAK,MAAM,CAAC,MAAM,WAAW,eAAe,OAAO,oBAAoB,MAAM,OAAO;EACpF,OAAO,UAAU,IAAI,IAAI,IAAI,MAAM,aAAa,MAAM,CAAC,CAAC,SAAS,GAAA,CAAI,MAAM,GAAG,CAAC;EAC/E,iBAAsB,MAAM,CAAC,CAAC,WAAW,OAAO,OAAO,CAAC;CAC1D;CACA,MAAM,gBAAyC,WAC3C,CACE,CAAC,SAAS,IAAI,GACd,CAAC,QAAQ,IAAI,CAAC,IAEhB;EACE,CAAC,aAAa,MAAM;EACpB,CAAC,iBAAiB,MAAM;EACxB,CAAC,gBAAgB,IAAI;CAAC;CAE5B,KAAK,MAAM,CAAC,MAAM,WAAW,eAAe,OAAO,iBAAiB,MAAM,OAAO;AACnF"}

package/dist/utils/props.js

@@ -1,6 +1,6 @@
 import "../config/theme/tokens.js";
 import { mergeRefs } 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/utils/props.ts
 /**
 * 部件 props 的类型与合并规则（COMPONENTS.md §2）。

package/dist/utils/props.js.map

@@ -1 +1 @@
-{"version":3,"file":"props.js","names":[],"sources":["../../src/utils/props.ts"],"sourcesContent":["/**\n * 部件 props 的类型与合并规则（COMPONENTS.md §2）。\n *\n * 组件给部件的属性分两层：可被使用方覆盖的默认属性（defaults），以及组件状态决定、\n * 不允许覆盖的受管属性（managed，如 role、aria-expanded）。合并规则：\n *   - sx：默认在前、使用方其次、受管最后，后者覆盖前者\n *   - class、style：依次排列成数组，交给 Vue 统一处理（它们也可能是数组或对象）\n *   - 事件 onXxx：使用方先执行，调用了 event.preventDefault() 就跳过组件自己的处理\n *   - ref：各方都拿到元素\n *   - 其他属性：受管 > 使用方 > 默认\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { IntrinsicProps, JSX } from '@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime';\n// 登记主题 tokens（样式里的 '_md' 靠它）：每个组件都经过这里合并属性，渲染之前一定登记过\nimport '../config/theme/tokens';\nimport type { StyleAttrs, SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { mergeRefs, type RefSetter } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { VNodeChild } from 'vue';\n\n/**\n * 原生元素部件的 props：该元素的属性加上 sx；去掉组件管理的属性与 children（内容走组件自己的 prop）。\n * 形如 `propsInput?: PartProps<'input', 'value' | 'aria-invalid'>`。\n */\nexport type PartProps<\n  Tag extends keyof JSX.IntrinsicElements,\n  Managed extends string = never,\n> = Omit<IntrinsicProps<Tag>, Managed | 'children'> & { sx?: SxStyles };\n\n/**\n * 展开收起类组件（Collapsible、Popover）交给触发器的属性：展开到任意可聚焦元素上，\n * 形如 `trigger={(props) => <Button {...props}>更多</Button>}`。弹层另外加上 id、ref、aria-haspopup。\n */\nexport interface TriggerProps {\n  /** 切换展开与收起 */\n  onClick: (event: MouseEvent) => void;\n  /** 当前是否展开，读屏据此播报“已展开 / 已折叠” */\n  'aria-expanded': boolean;\n  /** 被控制的内容区的 id */\n  'aria-controls': string;\n  /** 不可用：组件设了 disabled 时为 true，展开到按钮上就是原生的 disabled */\n  disabled?: boolean;\n}\n\n/**\n * data-* 属性写进对象字面量（部件属性、mergeAttrs 的各层）：元素的属性类型不收 data-* 键，\n * 用它包一层再展开。JSX 上直接写 data-* 不需要它。\n *\n *   mergeAttrs<'td'>(defaults, user, { role: 'gridcell', ...dataAttrs({ 'data-in-range': inRange || undefined }) })\n */\nexport const dataAttrs = (attrs: Record<`data-${string}`, string | number | boolean | undefined>) =>\n  attrs;\n\ntype Props = Record<string, unknown>;\ntype Handler = (...args: unknown[]) => unknown;\n\n/**\n * 一层属性：Target 是标签名（'svg'）时为该元素的属性加 sx，是 props 类型（IconProps）时就是它。\n * 标签名的联合（'h1' | 'h2'，一个工厂生成的几个组件共用实现时）取这些标签共有的属性，所以这里不按联合分配\n */\ntype PropsLayer<Target> = Partial<\n  [Target] extends [keyof JSX.IntrinsicElements] ? PartProps<Target> : Target\n>;\n\n/**\n * 合并部件的三层属性：组件默认、使用方传入、组件受管，规则见文件开头。\n * 用类型参数写明属性落到哪里，三层的对象字面量才有补全、悬停说明与类型检查：\n *   mergeProps<IconProps>({ sx: … }, propsIcon)；原生元素用 mergeAttrs<'svg'>(默认, rest, 受管)\n *\n * 渲染里每个部件每次都要合并，按最常见的情况走捷径：只有默认层时原样返回；\n * 只有两层以上都给了同名事件时才包一层回调。\n */\nexport function mergeProps<Target = Props>(\n  defaults: PropsLayer<Target>,\n  user?: PropsLayer<Target>,\n  managed?: PropsLayer<Target>,\n): PropsLayer<Target> {\n  const base = defaults as Props;\n  const own = hasKeys(user) ? (user as Props) : undefined;\n  const fixed = hasKeys(managed) ? (managed as Props) : undefined;\n  if (!own && !fixed) return defaults;\n  const merged: Props = { ...base, ...own, ...fixed };\n\n  for (const key of LISTED_KEYS) {\n    const values = present3(base[key], own?.[key], fixed?.[key]);\n    if (values) merged[key] = values;\n  }\n\n  const refs = present3(base.ref, own?.ref, fixed?.ref) as RefSetter[] | undefined;\n  if (refs && refs.length > 1) merged.ref = mergeRefs(refs);\n\n  // 同名事件：使用方的与组件的（默认层、受管层）合并；只有组件两层都有时也要合并\n  if (own) {\n    for (const key in own) {\n      if (!isHandlerKey(key)) continue;\n      if (base[key] == null && fixed?.[key] == null) {\n        // 受管层写了 onXxx: undefined（这时没有自己的处理）也不盖掉使用方的事件\n        merged[key] = own[key];\n        continue;\n      }\n      // 使用方传了 undefined（onClick={cond ? fn : undefined}）时也保留组件自己的\n      merged[key] =\n        mergeHandlers(own[key] as Handler | undefined, [base[key], fixed?.[key]]) ??\n        fixed?.[key] ??\n        base[key];\n    }\n  }\n  if (fixed) {\n    for (const key in fixed) {\n      if (!isHandlerKey(key) || base[key] == null || (own && key in own)) continue;\n      const handler = mergeHandlers(undefined, [base[key], fixed[key]]);\n      if (handler) merged[key] = handler;\n    }\n  }\n  return merged as PropsLayer<Target>;\n}\n\n/**\n * 子组件部件的合并：mergeProps 的规则，但默认层要写齐子组件的必填 props（如 Icon 的 icon），\n * 返回完整的 props 类型，展开到子组件上不必再断言：\n *   <Icon {...mergePartProps<IconProps>({ icon: X, sx: styles.icon }, propsIcon)} />\n */\nexport function mergePartProps<P extends object>(\n  defaults: P,\n  user?: Partial<P>,\n  managed?: Partial<P>,\n): P {\n  // P 是组件 props 类型，不是标签名：按对象合并，结果的类型就是 P\n  return mergeProps(\n    defaults as Props,\n    user as Props | undefined,\n    managed as Props | undefined,\n  ) as P;\n}\n\n/**\n * 原生元素部件的合并：mergeProps 的规则，再把 sx 换成 class 与 style（elementProps），结果直接展开到元素上：\n *   <svg {...mergeAttrs<'svg'>({ sx: styles.icon }, rest, { 'aria-hidden': true })} />\n */\nexport function mergeAttrs<Tag extends keyof JSX.IntrinsicElements>(\n  defaults: PropsLayer<Tag>,\n  user?: PropsLayer<Tag>,\n  managed?: PropsLayer<Tag>,\n): Omit<PropsLayer<Tag>, 'sx' | 'children'> {\n  return elementProps(mergeProps<Tag>(defaults, user, managed));\n}\n\n/**\n * 原生元素部件：把 sx 换成样式引擎生成的 class 与 style，再与已有的 class、style 合并。\n * 去掉 children：它是内容不是元素属性（组件的 ...rest 里带着它，转交给子组件时要用）。\n */\nexport function elementProps<P extends object>(props: P): Omit<P, 'sx' | 'children'> {\n  // 解构出的 rest 是新对象：之后直接往上写，不再复制一次（每个元素每次渲染都要走这里）\n  const { sx, children: _children, ...rest } = props as P & Props;\n  if (sx == null) return rest as Omit<P, 'sx' | 'children'>;\n  const compiled = compileSx(sx as SxStyles);\n  const element = rest as Props;\n  // 响应式绑定的 ref（元素挂上后改变量）与使用方的 ref 都要拿到元素\n  if (compiled.ref) {\n    element.ref =\n      element.ref != null ? mergeRefs([element.ref as RefSetter, compiled.ref]) : compiled.ref;\n  }\n  if (rest.class == null && rest.style == null) {\n    if (compiled.class != null) element.class = compiled.class;\n    if (compiled.style != null) element.style = compiled.style;\n    return rest as Omit<P, 'sx' | 'children'>;\n  }\n  element.class = present3(rest.class, compiled.class) ?? [];\n  element.style = present3(compiled.style, rest.style) ?? [];\n  return rest as Omit<P, 'sx' | 'children'>;\n}\n\n/**\n * 编译好的样式是不变的常量：单个样式（不是数组）按对象缓存 css.attrs 的结果，\n * 根元素、图标这类每次渲染都是同一个样式的部件不必重复合并\n */\nconst compiledCache = new WeakMap<object, ReturnType<typeof css.attrs>>();\nfunction compileSx(sx: SxStyles) {\n  if (Array.isArray(sx) || typeof sx !== 'object' || sx === null) return css.attrs(sx);\n  let compiled = compiledCache.get(sx);\n  if (!compiled) compiledCache.set(sx, (compiled = css.attrs(sx)));\n  return compiled;\n}\n\n/** onClick、onUpdate:_value：on 后面跟大写字母 */\nfunction isHandlerKey(key: string) {\n  const third = key.charCodeAt(2);\n  return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && third >= 65 && third <= 90;\n}\n\nfunction hasKeys(layer: object | undefined): boolean {\n  if (!layer) return false;\n  for (const _ in layer) return true;\n  return false;\n}\n\n/**\n * 使用方的回调先执行，它调用了 event.preventDefault() 就跳过组件自己的回调。\n * 只有一方提供回调时返回 undefined，保留展开合并的结果即可。\n */\nfunction mergeHandlers(user: Handler | undefined, internal: unknown[]): Handler | undefined {\n  const own = present(internal) as Handler[];\n  if (own.length + (user ? 1 : 0) < 2) return undefined;\n  return (...args) => {\n    user?.(...args);\n    const event = args[0];\n    if (event instanceof Event && event.defaultPrevented) return;\n    own.forEach((handler) => handler(...args));\n  };\n}\n\nconst present = <T>(values: readonly (T | null | undefined)[]) =>\n  values.filter((value): value is T => value != null);\n\n/** 按层排列、要合并成数组的属性 */\nconst LISTED_KEYS = ['sx', 'class', 'style'] as const;\n\n/** 最多三个值里不为空的那些，按原顺序成数组；都为空时返回 undefined。渲染路径上用，不建中间数组 */\nfunction present3(a: unknown, b: unknown, c?: unknown): unknown[] | undefined {\n  if (a == null) {\n    if (b == null) return c == null ? undefined : [c];\n    return c == null ? [b] : [b, c];\n  }\n  if (b == null) return c == null ? [a] : [a, c];\n  return c == null ? [a, b] : [a, b, c];\n}\n\n/**\n * 默认的 aria-labelledby（Field 的标签、弹层的触发器）：使用方写的 aria-labelledby 优先；使用方写了 aria-label 时\n * 不加默认的（aria-labelledby 会盖过 aria-label，使用方写的名称就白写了）\n */\nexport function defaultLabelledBy(\n  attrs: { 'aria-label'?: string; 'aria-labelledby'?: string },\n  fallback: string | undefined,\n): string | undefined {\n  return attrs['aria-labelledby'] ?? (attrs['aria-label'] == null ? fallback : undefined);\n}\n\n/**\n * 内容（插槽、标题、说明、错误这类 VNodeChild）有没有东西：null、undefined、空字符串与布尔都算没有。\n * 使用方常写 `error={cond && '…'}`、`aside={wide && <Panel />}`，条件不成立时是 false，不该渲染出空的外层\n */\nexport function hasContent(node: VNodeChild): boolean {\n  return node != null && typeof node !== 'boolean' && node !== '';\n}\n\n/**\n * 把 css.attrs 的结果写到命令式创建的元素上（波纹、量取主题的探针）：class 与行内样式，\n * 自定义属性（动态样式的变量）名字原样、用 setProperty\n */\nexport function applyStyleAttrs(element: HTMLElement, { class: className, style }: StyleAttrs) {\n  element.className = className ?? '';\n  for (const [name, value] of Object.entries(style ?? {})) {\n    const property = name.startsWith('--')\n      ? name\n      : name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);\n    element.style.setProperty(property, String(value));\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"props.js","names":[],"sources":["../../src/utils/props.ts"],"sourcesContent":["/**\n * 部件 props 的类型与合并规则（COMPONENTS.md §2）。\n *\n * 组件给部件的属性分两层：可被使用方覆盖的默认属性（defaults），以及组件状态决定、\n * 不允许覆盖的受管属性（managed，如 role、aria-expanded）。合并规则：\n *   - sx：默认在前、使用方其次、受管最后，后者覆盖前者\n *   - class、style：依次排列成数组，交给 Vue 统一处理（它们也可能是数组或对象）\n *   - 事件 onXxx：使用方先执行，调用了 event.preventDefault() 就跳过组件自己的处理\n *   - ref：各方都拿到元素\n *   - 其他属性：受管 > 使用方 > 默认\n */\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { IntrinsicProps, JSX } from '@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime';\n// 登记主题 tokens（样式里的 '_md' 靠它）：每个组件都经过这里合并属性，渲染之前一定登记过\nimport '../config/theme/tokens';\nimport type { StyleAttrs, SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { mergeRefs, type RefSetter } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { VNodeChild } from 'vue';\n\n/**\n * 原生元素部件的 props：该元素的属性加上 sx；去掉组件管理的属性与 children（内容走组件自己的 prop）。\n * 形如 `propsInput?: PartProps<'input', 'value' | 'aria-invalid'>`。\n */\nexport type PartProps<\n  Tag extends keyof JSX.IntrinsicElements,\n  Managed extends string = never,\n> = Omit<IntrinsicProps<Tag>, Managed | 'children'> & { sx?: SxStyles };\n\n/**\n * 展开收起类组件（Collapsible、Popover）交给触发器的属性：展开到任意可聚焦元素上，\n * 形如 `trigger={(props) => <Button {...props}>更多</Button>}`。弹层另外加上 id、ref、aria-haspopup。\n */\nexport interface TriggerProps {\n  /** 切换展开与收起 */\n  onClick: (event: MouseEvent) => void;\n  /** 当前是否展开，读屏据此播报“已展开 / 已折叠” */\n  'aria-expanded': boolean;\n  /** 被控制的内容区的 id */\n  'aria-controls': string;\n  /** 不可用：组件设了 disabled 时为 true，展开到按钮上就是原生的 disabled */\n  disabled?: boolean;\n}\n\n/**\n * data-* 属性写进对象字面量（部件属性、mergeAttrs 的各层）：元素的属性类型不收 data-* 键，\n * 用它包一层再展开。JSX 上直接写 data-* 不需要它。\n *\n *   mergeAttrs<'td'>(defaults, user, { role: 'gridcell', ...dataAttrs({ 'data-in-range': inRange || undefined }) })\n */\nexport const dataAttrs = (attrs: Record<`data-${string}`, string | number | boolean | undefined>) =>\n  attrs;\n\ntype Props = Record<string, unknown>;\ntype Handler = (...args: unknown[]) => unknown;\n\n/**\n * 一层属性：Target 是标签名（'svg'）时为该元素的属性加 sx，是 props 类型（IconProps）时就是它。\n * 标签名的联合（'h1' | 'h2'，一个工厂生成的几个组件共用实现时）取这些标签共有的属性，所以这里不按联合分配\n */\ntype PropsLayer<Target> = Partial<\n  [Target] extends [keyof JSX.IntrinsicElements] ? PartProps<Target> : Target\n>;\n\n/**\n * 合并部件的三层属性：组件默认、使用方传入、组件受管，规则见文件开头。\n * 用类型参数写明属性落到哪里，三层的对象字面量才有补全、悬停说明与类型检查：\n *   mergeProps<IconProps>({ sx: … }, propsIcon)；原生元素用 mergeAttrs<'svg'>(默认, rest, 受管)\n *\n * 渲染里每个部件每次都要合并，按最常见的情况走捷径：只有默认层时原样返回；\n * 只有两层以上都给了同名事件时才包一层回调。\n */\nexport function mergeProps<Target = Props>(\n  defaults: PropsLayer<Target>,\n  user?: PropsLayer<Target>,\n  managed?: PropsLayer<Target>,\n): PropsLayer<Target> {\n  const base = defaults as Props;\n  const own = hasKeys(user) ? (user as Props) : undefined;\n  const fixed = hasKeys(managed) ? (managed as Props) : undefined;\n  if (!own && !fixed) return defaults;\n  const merged: Props = { ...base, ...own, ...fixed };\n\n  for (const key of LISTED_KEYS) {\n    const values = present3(base[key], own?.[key], fixed?.[key]);\n    if (values) merged[key] = values;\n  }\n\n  const refs = present3(base.ref, own?.ref, fixed?.ref) as RefSetter[] | undefined;\n  if (refs && refs.length > 1) merged.ref = mergeRefs(refs);\n\n  // 同名事件：使用方的与组件的（默认层、受管层）合并；只有组件两层都有时也要合并\n  if (own) {\n    for (const key in own) {\n      if (!isHandlerKey(key)) continue;\n      if (base[key] == null && fixed?.[key] == null) {\n        // 受管层写了 onXxx: undefined（这时没有自己的处理）也不盖掉使用方的事件\n        merged[key] = own[key];\n        continue;\n      }\n      // 使用方传了 undefined（onClick={cond ? fn : undefined}）时也保留组件自己的\n      merged[key] =\n        mergeHandlers(own[key] as Handler | undefined, [base[key], fixed?.[key]]) ??\n        fixed?.[key] ??\n        base[key];\n    }\n  }\n  if (fixed) {\n    for (const key in fixed) {\n      if (!isHandlerKey(key) || base[key] == null || (own && key in own)) continue;\n      const handler = mergeHandlers(undefined, [base[key], fixed[key]]);\n      if (handler) merged[key] = handler;\n    }\n  }\n  return merged as PropsLayer<Target>;\n}\n\n/**\n * 子组件部件的合并：mergeProps 的规则，但默认层要写齐子组件的必填 props（如 Icon 的 icon），\n * 返回完整的 props 类型，展开到子组件上不必再断言：\n *   <Icon {...mergePartProps<IconProps>({ icon: X, sx: styles.icon }, propsIcon)} />\n */\nexport function mergePartProps<P extends object>(\n  defaults: P,\n  user?: Partial<P>,\n  managed?: Partial<P>,\n): P {\n  // P 是组件 props 类型，不是标签名：按对象合并，结果的类型就是 P\n  return mergeProps(\n    defaults as Props,\n    user as Props | undefined,\n    managed as Props | undefined,\n  ) as P;\n}\n\n/**\n * 原生元素部件的合并：mergeProps 的规则，再把 sx 换成 class 与 style（elementProps），结果直接展开到元素上：\n *   <svg {...mergeAttrs<'svg'>({ sx: styles.icon }, rest, { 'aria-hidden': true })} />\n */\nexport function mergeAttrs<Tag extends keyof JSX.IntrinsicElements>(\n  defaults: PropsLayer<Tag>,\n  user?: PropsLayer<Tag>,\n  managed?: PropsLayer<Tag>,\n): Omit<PropsLayer<Tag>, 'sx' | 'children'> {\n  return elementProps(mergeProps<Tag>(defaults, user, managed));\n}\n\n/**\n * 原生元素部件：把 sx 换成样式引擎生成的 class 与 style，再与已有的 class、style 合并。\n * 去掉 children：它是内容不是元素属性（组件的 ...rest 里带着它，转交给子组件时要用）。\n */\nexport function elementProps<P extends object>(props: P): Omit<P, 'sx' | 'children'> {\n  // 解构出的 rest 是新对象：之后直接往上写，不再复制一次（每个元素每次渲染都要走这里）\n  const { sx, children: _children, ...rest } = props as P & Props;\n  if (sx == null) return rest as Omit<P, 'sx' | 'children'>;\n  const compiled = compileSx(sx as SxStyles);\n  const element = rest as Props;\n  // 响应式绑定的 ref（元素挂上后改变量）与使用方的 ref 都要拿到元素\n  if (compiled.ref) {\n    element.ref =\n      element.ref != null ? mergeRefs([element.ref as RefSetter, compiled.ref]) : compiled.ref;\n  }\n  if (rest.class == null && rest.style == null) {\n    if (compiled.class != null) element.class = compiled.class;\n    if (compiled.style != null) element.style = compiled.style;\n    return rest as Omit<P, 'sx' | 'children'>;\n  }\n  element.class = present3(rest.class, compiled.class) ?? [];\n  element.style = present3(compiled.style, rest.style) ?? [];\n  return rest as Omit<P, 'sx' | 'children'>;\n}\n\n/**\n * 编译好的样式是不变的常量：单个样式（不是数组）按对象缓存 css.attrs 的结果，\n * 根元素、图标这类每次渲染都是同一个样式的部件不必重复合并\n */\nconst compiledCache = new WeakMap<object, ReturnType<typeof css.attrs>>();\nfunction compileSx(sx: SxStyles) {\n  if (Array.isArray(sx) || typeof sx !== 'object' || sx === null) return css.attrs(sx);\n  let compiled = compiledCache.get(sx);\n  if (!compiled) compiledCache.set(sx, (compiled = css.attrs(sx)));\n  return compiled;\n}\n\n/** onClick、onUpdate:_value：on 后面跟大写字母 */\nfunction isHandlerKey(key: string) {\n  const third = key.charCodeAt(2);\n  return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && third >= 65 && third <= 90;\n}\n\nfunction hasKeys(layer: object | undefined): boolean {\n  if (!layer) return false;\n  for (const _ in layer) return true;\n  return false;\n}\n\n/**\n * 使用方的回调先执行，它调用了 event.preventDefault() 就跳过组件自己的回调。\n * 只有一方提供回调时返回 undefined，保留展开合并的结果即可。\n */\nfunction mergeHandlers(user: Handler | undefined, internal: unknown[]): Handler | undefined {\n  const own = present(internal) as Handler[];\n  if (own.length + (user ? 1 : 0) < 2) return undefined;\n  return (...args) => {\n    user?.(...args);\n    const event = args[0];\n    if (event instanceof Event && event.defaultPrevented) return;\n    own.forEach((handler) => handler(...args));\n  };\n}\n\nconst present = <T>(values: readonly (T | null | undefined)[]) =>\n  values.filter((value): value is T => value != null);\n\n/** 按层排列、要合并成数组的属性 */\nconst LISTED_KEYS = ['sx', 'class', 'style'] as const;\n\n/** 最多三个值里不为空的那些，按原顺序成数组；都为空时返回 undefined。渲染路径上用，不建中间数组 */\nfunction present3(a: unknown, b: unknown, c?: unknown): unknown[] | undefined {\n  if (a == null) {\n    if (b == null) return c == null ? undefined : [c];\n    return c == null ? [b] : [b, c];\n  }\n  if (b == null) return c == null ? [a] : [a, c];\n  return c == null ? [a, b] : [a, b, c];\n}\n\n/**\n * 默认的 aria-labelledby（Field 的标签、弹层的触发器）：使用方写的 aria-labelledby 优先；使用方写了 aria-label 时\n * 不加默认的（aria-labelledby 会盖过 aria-label，使用方写的名称就白写了）\n */\nexport function defaultLabelledBy(\n  attrs: { 'aria-label'?: string; 'aria-labelledby'?: string },\n  fallback: string | undefined,\n): string | undefined {\n  return attrs['aria-labelledby'] ?? (attrs['aria-label'] == null ? fallback : undefined);\n}\n\n/**\n * 内容（插槽、标题、说明、错误这类 VNodeChild）有没有东西：null、undefined、空字符串与布尔都算没有。\n * 使用方常写 `error={cond && '…'}`、`aside={wide && <Panel />}`，条件不成立时是 false，不该渲染出空的外层\n */\nexport function hasContent(node: VNodeChild): boolean {\n  return node != null && typeof node !== 'boolean' && node !== '';\n}\n\n/**\n * 把 css.attrs 的结果写到命令式创建的元素上（波纹、量取主题的探针）：class 与行内样式，\n * 自定义属性（动态样式的变量）名字原样、用 setProperty\n */\nexport function applyStyleAttrs(element: HTMLElement, { class: className, style }: StyleAttrs) {\n  element.className = className ?? '';\n  for (const [name, value] of Object.entries(style ?? {})) {\n    const property = name.startsWith('--')\n      ? name\n      : name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);\n    element.style.setProperty(property, String(value));\n  }\n}\n"],"mappings":"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"}

package/dist/utils/style/attached.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';
 /** 相连的方向 */
 export interface AttachedOrientations {
     /** 横排（默认）：去掉左右相邻一侧的圆角 */

package/dist/utils/style/attached.js

@@ -1,6 +1,6 @@
 import { t } from "../../config/theme/tokens.js";
 import { createContext } 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/utils/style/attached.ts
 /**
 * 相连的一组控件：几个按钮（ButtonGroup）或输入框与按钮（ControlGroup，如“币种 + 金额 + 查询”）连成一条，

package/dist/utils/style/attached.js.map

@@ -1 +1 @@
-{"version":3,"file":"attached.js","names":[],"sources":["../../../src/utils/style/attached.ts"],"sourcesContent":["/**\n * 相连的一组控件：几个按钮（ButtonGroup）或输入框与按钮（ControlGroup，如“币种 + 金额 + 查询”）连成一条，\n * 相邻一侧不要圆角、边框叠在一起。组经 AttachedContext 告诉里面的控件排列方向，控件把 attachedStyles 加到自己的外壳上。\n * 外壳要是组的直接子元素。判断首尾时跳过不占位的兄弟（选择框的弹出面板、表单的隐藏 input），\n * 用 :nth-child(1 of …)（各浏览器 2023 年起支持）。\n */\nimport { createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../../config/theme/tokens';\n\n/** 相连的方向 */\nexport interface AttachedOrientations {\n  /** 横排（默认）：去掉左右相邻一侧的圆角 */\n  horizontal: unknown;\n  /** 竖排：去掉上下相邻一侧的圆角 */\n  vertical: unknown;\n}\n\n/** 组交给里面的控件的状态 */\nexport interface AttachedState {\n  /** 排列方向：决定去掉哪一侧的圆角 */\n  readonly orientation: keyof AttachedOrientations;\n}\n\n/** 相连的一组的上下文：按钮家族与输入框外壳据此相连 */\nexport const AttachedContext = createContext<AttachedState>('Attached');\n\n/**\n * 组里相连的控件：去掉相邻一侧的圆角，边框叠在一起（不显得加粗）；\n * 悬停、聚焦的那个浮到上面，边框与焦点环不被邻居盖住。\n * 只在“不是第一个 / 最后一个”时设值：两端不写，控件自己的圆角（radiusStyles）照常生效\n * （写成 default: 0 再在首尾设 null 时，null 只是不生成规则，0 仍然生效）\n */\nexport const attachedStyles = css.create({\n  horizontal: {\n    position: 'relative',\n    zIndex: { default: null, ':hover': 1, ':focus-visible': 2, ':focus-within': 2 },\n    marginInlineStart: {\n      default: null,\n      ':not(:nth-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': `calc(-1 * ${t.borderWidths.xs})`,\n    },\n    borderStartStartRadius: {\n      default: null,\n      ':not(:nth-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n    borderEndStartRadius: {\n      default: null,\n      ':not(:nth-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n    borderStartEndRadius: {\n      default: null,\n      ':not(:nth-last-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n    borderEndEndRadius: {\n      default: null,\n      ':not(:nth-last-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n  },\n  vertical: {\n    position: 'relative',\n    zIndex: { default: null, ':hover': 1, ':focus-visible': 2, ':focus-within': 2 },\n    marginBlockStart: {\n      default: null,\n      ':not(:nth-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': `calc(-1 * ${t.borderWidths.xs})`,\n    },\n    borderStartStartRadius: {\n      default: null,\n      ':not(:nth-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n    borderStartEndRadius: {\n      default: null,\n      ':not(:nth-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n    borderEndStartRadius: {\n      default: null,\n      ':not(:nth-last-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n    borderEndEndRadius: {\n      default: null,\n      ':not(:nth-last-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n  },\n});\n"],"mappings":";;;;;;;;;;;AAyBA,IAAa,kBAAkB,cAA6B,UAAU;;;;;;;AAQtE,IAAa,iBAAiB,IAAI,OAAO;CACvC,YAAY;EACV,UAAU;EACV,QAAQ;GAAE,SAAS;GAAM,UAAU;GAAG,kBAAkB;GAAG,iBAAiB;EAAE;EAC9E,mBAAmB;GACjB,SAAS;GACT,sFAAoF,aAAa,EAAE,aAAa,GAAE;EACpH;EACA,wBAAwB;GACtB,SAAS;GACT,sFAAoF;EACtF;EACA,sBAAsB;GACpB,SAAS;GACT,sFAAoF;EACtF;EACA,sBAAsB;GACpB,SAAS;GACT,2FAAyF;EAC3F;EACA,oBAAoB;GAClB,SAAS;GACT,2FAAyF;EAC3F;CACF;CACA,UAAU;EACR,UAAU;EACV,QAAQ;GAAE,SAAS;GAAM,UAAU;GAAG,kBAAkB;GAAG,iBAAiB;EAAE;EAC9E,kBAAkB;GAChB,SAAS;GACT,sFAAoF,aAAa,EAAE,aAAa,GAAE;EACpH;EACA,wBAAwB;GACtB,SAAS;GACT,sFAAoF;EACtF;EACA,sBAAsB;GACpB,SAAS;GACT,sFAAoF;EACtF;EACA,sBAAsB;GACpB,SAAS;GACT,2FAAyF;EAC3F;EACA,oBAAoB;GAClB,SAAS;GACT,2FAAyF;EAC3F;CACF;AACF,CAAC"}
+{"version":3,"file":"attached.js","names":[],"sources":["../../../src/utils/style/attached.ts"],"sourcesContent":["/**\n * 相连的一组控件：几个按钮（ButtonGroup）或输入框与按钮（ControlGroup，如“币种 + 金额 + 查询”）连成一条，\n * 相邻一侧不要圆角、边框叠在一起。组经 AttachedContext 告诉里面的控件排列方向，控件把 attachedStyles 加到自己的外壳上。\n * 外壳要是组的直接子元素。判断首尾时跳过不占位的兄弟（选择框的弹出面板、表单的隐藏 input），\n * 用 :nth-child(1 of …)（各浏览器 2023 年起支持）。\n */\nimport { createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../../config/theme/tokens';\n\n/** 相连的方向 */\nexport interface AttachedOrientations {\n  /** 横排（默认）：去掉左右相邻一侧的圆角 */\n  horizontal: unknown;\n  /** 竖排：去掉上下相邻一侧的圆角 */\n  vertical: unknown;\n}\n\n/** 组交给里面的控件的状态 */\nexport interface AttachedState {\n  /** 排列方向：决定去掉哪一侧的圆角 */\n  readonly orientation: keyof AttachedOrientations;\n}\n\n/** 相连的一组的上下文：按钮家族与输入框外壳据此相连 */\nexport const AttachedContext = createContext<AttachedState>('Attached');\n\n/**\n * 组里相连的控件：去掉相邻一侧的圆角，边框叠在一起（不显得加粗）；\n * 悬停、聚焦的那个浮到上面，边框与焦点环不被邻居盖住。\n * 只在“不是第一个 / 最后一个”时设值：两端不写，控件自己的圆角（radiusStyles）照常生效\n * （写成 default: 0 再在首尾设 null 时，null 只是不生成规则，0 仍然生效）\n */\nexport const attachedStyles = css.create({\n  horizontal: {\n    position: 'relative',\n    zIndex: { default: null, ':hover': 1, ':focus-visible': 2, ':focus-within': 2 },\n    marginInlineStart: {\n      default: null,\n      ':not(:nth-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': `calc(-1 * ${t.borderWidths.xs})`,\n    },\n    borderStartStartRadius: {\n      default: null,\n      ':not(:nth-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n    borderEndStartRadius: {\n      default: null,\n      ':not(:nth-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n    borderStartEndRadius: {\n      default: null,\n      ':not(:nth-last-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n    borderEndEndRadius: {\n      default: null,\n      ':not(:nth-last-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n  },\n  vertical: {\n    position: 'relative',\n    zIndex: { default: null, ':hover': 1, ':focus-visible': 2, ':focus-within': 2 },\n    marginBlockStart: {\n      default: null,\n      ':not(:nth-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': `calc(-1 * ${t.borderWidths.xs})`,\n    },\n    borderStartStartRadius: {\n      default: null,\n      ':not(:nth-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n    borderStartEndRadius: {\n      default: null,\n      ':not(:nth-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n    borderEndStartRadius: {\n      default: null,\n      ':not(:nth-last-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n    borderEndEndRadius: {\n      default: null,\n      ':not(:nth-last-child(1 of :not([popover], [hidden], input[type=\"hidden\"], template)))': 0,\n    },\n  },\n});\n"],"mappings":";;;;;;;;;;;AAyBA,IAAa,kBAAkB,cAA6B,UAAU;;;;;;;AAQtE,IAAa,iBAAiB,IAAI,OAAO;CACvC,YAAY;EACV,UAAU;EACV,QAAQ;GAAE,SAAS;GAAM,UAAU;GAAG,kBAAkB;GAAG,iBAAiB;EAAE;EAC9E,mBAAmB;GACjB,SAAS;GACT,sFAAoF,aAAa,EAAE,aAAa,GAAE;EACpH;EACA,wBAAwB;GACtB,SAAS;GACT,sFAAoF;EACtF;EACA,sBAAsB;GACpB,SAAS;GACT,sFAAoF;EACtF;EACA,sBAAsB;GACpB,SAAS;GACT,2FAAyF;EAC3F;EACA,oBAAoB;GAClB,SAAS;GACT,2FAAyF;EAC3F;CACF;CACA,UAAU;EACR,UAAU;EACV,QAAQ;GAAE,SAAS;GAAM,UAAU;GAAG,kBAAkB;GAAG,iBAAiB;EAAE;EAC9E,kBAAkB;GAChB,SAAS;GACT,sFAAoF,aAAa,EAAE,aAAa,GAAE;EACpH;EACA,wBAAwB;GACtB,SAAS;GACT,sFAAoF;EACtF;EACA,sBAAsB;GACpB,SAAS;GACT,sFAAoF;EACtF;EACA,sBAAsB;GACpB,SAAS;GACT,2FAAyF;EAC3F;EACA,oBAAoB;GAClB,SAAS;GACT,2FAAyF;EAC3F;CACF;AACF,CAAC"}

package/dist/utils/style/item-styles.d.ts

@@ -4,7 +4,7 @@
  *
  *   sx: [itemStyles.row, itemStyles.hoverable, active && itemStyles.highlighted, disabled && itemStyles.disabled]
  */
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 /** 列表行的布局与各状态的颜色 */
 export declare const itemStyles: Readonly<{
     current: css.CompiledStyles;

package/dist/utils/style/item-styles.js

@@ -1,5 +1,5 @@
 import { t } from "../../config/theme/tokens.js";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/utils/style/item-styles.ts
 /**
 * 列表行的外观：菜单项、下拉选项、侧边导航项、表格行共用的悬停、高亮、选中、当前、危险、不可用。

package/dist/utils/style/item-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-styles.js","names":[],"sources":["../../../src/utils/style/item-styles.ts"],"sourcesContent":["/**\n * 列表行的外观：菜单项、下拉选项、侧边导航项、表格行共用的悬停、高亮、选中、当前、危险、不可用。\n * 各组件只在这些之上补自己的差别（导航项的字重与内边距、菜单项的焦点环），状态的颜色只在这里定义。\n *\n *   sx: [itemStyles.row, itemStyles.hoverable, active && itemStyles.highlighted, disabled && itemStyles.disabled]\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../../config/theme/tokens';\n\n/** 列表行的布局与各状态的颜色 */\nexport const itemStyles = css.create({\n  /** 一行：图标、文字、尾部内容横排；按钮、链接、div 都能用（去掉了按钮与链接的默认外观） */\n  row: {\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    width: '_full',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    margin: 0,\n    paddingBlock: '_xs',\n    paddingInline: '_sm',\n    borderWidth: 0,\n    borderRadius: '_sm',\n    backgroundColor: 'transparent',\n    color: '_text',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: '_normal',\n    textAlign: 'start',\n    textDecoration: 'none',\n    cursor: 'pointer',\n    userSelect: 'none',\n    transition: `background-color ${t.durations.sm} ${t.easings.standard}, color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  /** 指针悬停时浅色底 */\n  hoverable: { backgroundColor: { default: 'transparent', ':hover': '_fillHover' } },\n  /** 键盘高亮（aria-activedescendant 指着的选项）：与悬停同色 */\n  highlighted: { backgroundColor: '_fillHover' },\n  /** 已选（下拉选项）：品牌色文字 */\n  selected: { color: '_accentText' },\n  /** 当前（导航的当前页、表格的选中行）：品牌色浅底 */\n  current: {\n    backgroundColor: { default: '_accentSoft', ':hover': '_accentSoftHover' },\n    color: '_accentText',\n  },\n  /** 危险操作（删除）：红色文字，悬停浅红底 */\n  danger: {\n    color: '_dangerText',\n    backgroundColor: { default: 'transparent', ':hover': '_dangerSoft' },\n  },\n  /** 不可用：不响应悬停（盖掉 hoverable、danger 的 :hover 底色；放在它们后面） */\n  disabled: { opacity: '_disabled', cursor: 'not-allowed', backgroundColor: 'transparent' },\n  /** 文字部分：占满剩余宽度，一行放不下时省略 */\n  label: {\n    flexGrow: 1,\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n});\n"],"mappings":";;;;;;;;;;AAUA,IAAa,aAAa,IAAI,OAAO;;CAEnC,KAAK;EACH,WAAW;EACX,SAAS;EACT,YAAY;EACZ,KAAK;EACL,OAAO;EACP,WAAW,OAAO,EAAE,MAAM,QAAO,IAAK,EAAE,MAAM,UAAS;EACvD,QAAQ;EACR,cAAc;EACd,eAAe;EACf,aAAa;EACb,cAAc;EACd,iBAAiB;EACjB,OAAO;EACP,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,WAAW;EACX,gBAAgB;EAChB,QAAQ;EACR,YAAY;EACZ,YAAY,oBAAoB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,SAAQ,UAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CAC7G;;CAEA,WAAW,EAAE,iBAAiB;EAAE,SAAS;EAAe,UAAU;CAAa,EAAE;;CAEjF,aAAa,EAAE,iBAAiB,aAAa;;CAE7C,UAAU,EAAE,OAAO,cAAc;;CAEjC,SAAS;EACP,iBAAiB;GAAE,SAAS;GAAe,UAAU;EAAmB;EACxE,OAAO;CACT;;CAEA,QAAQ;EACN,OAAO;EACP,iBAAiB;GAAE,SAAS;GAAe,UAAU;EAAc;CACrE;;CAEA,UAAU;EAAE,SAAS;EAAa,QAAQ;EAAe,iBAAiB;CAAc;;CAExF,OAAO;EACL,UAAU;EACV,UAAU;EACV,UAAU;EACV,cAAc;EACd,YAAY;CACd;AACF,CAAC"}
+{"version":3,"file":"item-styles.js","names":[],"sources":["../../../src/utils/style/item-styles.ts"],"sourcesContent":["/**\n * 列表行的外观：菜单项、下拉选项、侧边导航项、表格行共用的悬停、高亮、选中、当前、危险、不可用。\n * 各组件只在这些之上补自己的差别（导航项的字重与内边距、菜单项的焦点环），状态的颜色只在这里定义。\n *\n *   sx: [itemStyles.row, itemStyles.hoverable, active && itemStyles.highlighted, disabled && itemStyles.disabled]\n */\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../../config/theme/tokens';\n\n/** 列表行的布局与各状态的颜色 */\nexport const itemStyles = css.create({\n  /** 一行：图标、文字、尾部内容横排；按钮、链接、div 都能用（去掉了按钮与链接的默认外观） */\n  row: {\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    width: '_full',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    margin: 0,\n    paddingBlock: '_xs',\n    paddingInline: '_sm',\n    borderWidth: 0,\n    borderRadius: '_sm',\n    backgroundColor: 'transparent',\n    color: '_text',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: '_normal',\n    textAlign: 'start',\n    textDecoration: 'none',\n    cursor: 'pointer',\n    userSelect: 'none',\n    transition: `background-color ${t.durations.sm} ${t.easings.standard}, color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  /** 指针悬停时浅色底 */\n  hoverable: { backgroundColor: { default: 'transparent', ':hover': '_fillHover' } },\n  /** 键盘高亮（aria-activedescendant 指着的选项）：与悬停同色 */\n  highlighted: { backgroundColor: '_fillHover' },\n  /** 已选（下拉选项）：品牌色文字 */\n  selected: { color: '_accentText' },\n  /** 当前（导航的当前页、表格的选中行）：品牌色浅底 */\n  current: {\n    backgroundColor: { default: '_accentSoft', ':hover': '_accentSoftHover' },\n    color: '_accentText',\n  },\n  /** 危险操作（删除）：红色文字，悬停浅红底 */\n  danger: {\n    color: '_dangerText',\n    backgroundColor: { default: 'transparent', ':hover': '_dangerSoft' },\n  },\n  /** 不可用：不响应悬停（盖掉 hoverable、danger 的 :hover 底色；放在它们后面） */\n  disabled: { opacity: '_disabled', cursor: 'not-allowed', backgroundColor: 'transparent' },\n  /** 文字部分：占满剩余宽度，一行放不下时省略 */\n  label: {\n    flexGrow: 1,\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n});\n"],"mappings":";;;;;;;;;;AAUA,IAAa,aAAa,IAAI,OAAO;;CAEnC,KAAK;EACH,WAAW;EACX,SAAS;EACT,YAAY;EACZ,KAAK;EACL,OAAO;EACP,WAAW,OAAO,EAAE,MAAM,QAAO,IAAK,EAAE,MAAM,UAAS;EACvD,QAAQ;EACR,cAAc;EACd,eAAe;EACf,aAAa;EACb,cAAc;EACd,iBAAiB;EACjB,OAAO;EACP,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,WAAW;EACX,gBAAgB;EAChB,QAAQ;EACR,YAAY;EACZ,YAAY,oBAAoB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,SAAQ,UAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CAC7G;;CAEA,WAAW,EAAE,iBAAiB;EAAE,SAAS;EAAe,UAAU;CAAa,EAAE;;CAEjF,aAAa,EAAE,iBAAiB,aAAa;;CAE7C,UAAU,EAAE,OAAO,cAAc;;CAEjC,SAAS;EACP,iBAAiB;GAAE,SAAS;GAAe,UAAU;EAAmB;EACxE,OAAO;CACT;;CAEA,QAAQ;EACN,OAAO;EACP,iBAAiB;GAAE,SAAS;GAAe,UAAU;EAAc;CACrE;;CAEA,UAAU;EAAE,SAAS;EAAa,QAAQ;EAAe,iBAAiB;CAAc;;CAExF,OAAO;EACL,UAAU;EACV,UAAU;EACV,UAAU;EACV,cAAc;EACd,YAAY;CACd;AACF,CAAC"}

package/dist/utils/style/markers.d.ts

@@ -1,6 +1,6 @@
 /**
  * 标记（defineMarker）：挂到祖先上，子元素按它的状态取样式，如 `css.when.ancestor(':hover', headingMarker)`。
  */
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 /** 标题：悬停或内部聚焦时显示锚点链接 */
 export declare const headingMarker: css.Marker;

package/dist/utils/style/markers.js

@@ -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";
 //#region src/utils/style/markers.ts
 /**
 * 标记（defineMarker）：挂到祖先上，子元素按它的状态取样式，如 `css.when.ancestor(':hover', headingMarker)`。

package/dist/utils/style/markers.js.map

@@ -1 +1 @@
-{"version":3,"file":"markers.js","names":[],"sources":["../../../src/utils/style/markers.ts"],"sourcesContent":["/**\n * 标记（defineMarker）：挂到祖先上，子元素按它的状态取样式，如 `css.when.ancestor(':hover', headingMarker)`。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\n\n/** 标题：悬停或内部聚焦时显示锚点链接 */\nexport const headingMarker = css.defineMarker('vtp-heading');\n"],"mappings":";;;;;;AAMA,IAAa,gBAAgB,IAAI,aAAa,aAAa"}
+{"version":3,"file":"markers.js","names":[],"sources":["../../../src/utils/style/markers.ts"],"sourcesContent":["/**\n * 标记（defineMarker）：挂到祖先上，子元素按它的状态取样式，如 `css.when.ancestor(':hover', headingMarker)`。\n */\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\n\n/** 标题：悬停或内部聚焦时显示锚点链接 */\nexport const headingMarker = css.defineMarker('vtp-heading');\n"],"mappings":";;;;;;AAMA,IAAa,gBAAgB,IAAI,aAAa,aAAa"}

package/dist/utils/style/shimmer.d.ts

@@ -9,7 +9,7 @@
  *
  * 扫光只是装饰：减少动态效果时不扫（静止的占位已经说明在加载）；从右到左的语言里反向扫。
  */
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 /** 多行骨架相邻两行的扫光间隔（毫秒）：一屏七八行时整道波约一秒扫完 */
 export declare const SHIMMER_STAGGER = 120;
 /** 骨架扫光：wave、delay、reveal */

package/dist/utils/style/shimmer.js

@@ -1,5 +1,5 @@
 import { shimmerVars } from "./vars.js";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/utils/style/shimmer.ts
 /**
 * 骨架的扫光（同 Ant Design Skeleton 的 active、MUI Skeleton 的 wave）：一道光带从起始边扫到结束边，表示内容正在来。

package/dist/utils/style/shimmer.js.map

@@ -1 +1 @@
-{"version":3,"file":"shimmer.js","names":[],"sources":["../../../src/utils/style/shimmer.ts"],"sourcesContent":["/**\n * 骨架的扫光（同 Ant Design Skeleton 的 active、MUI Skeleton 的 wave）：一道光带从起始边扫到结束边，表示内容正在来。\n * 光带画在元素的 ::after 上，用 transform 平移（同 MUI）：合成器就能跑，不必每帧重绘元素；\n * 原来移动背景位置时，满屏骨架每帧都要重绘。元素因此 contain: paint。光带颜色见 shimmerVars.highlight。\n *\n *   sx: [shimmerStyles.wave, { backgroundColor: … }]\n *   sx: [shimmerStyles.wave, shimmerStyles.delay(`${index * SHIMMER_STAGGER}ms`)]   多行依次扫过，像一道波\n *   sx: loaded && shimmerStyles.reveal                                                 骨架换成内容时淡入\n *\n * 扫光只是装饰：减少动态效果时不扫（静止的占位已经说明在加载）；从右到左的语言里反向扫。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { shimmerVars } from './vars';\n\n/** 多行骨架相邻两行的扫光间隔（毫秒）：一屏七八行时整道波约一秒扫完 */\nexport const SHIMMER_STAGGER = 120;\n\n// 光带与元素一样宽：从元素外的起始侧（-100%）扫到结束侧（100%）；后 30% 的时间停在外面，两次之间有个间隔\nconst sweep = css.keyframes({\n  '0%': { transform: 'translateX(-100%)' },\n  '70%': { transform: 'translateX(100%)' },\n  '100%': { transform: 'translateX(100%)' },\n});\n\nconst fadeIn = css.keyframes({ from: { opacity: 0 } });\n\n/** 骨架扫光：wave、delay、reveal */\nexport const shimmerStyles = css.create({\n  wave: {\n    position: 'relative',\n    // 用绘制包含裁掉移出去的光带（按圆角裁）：不用 overflow，行内的骨架仍按文字基线对齐\n    // （overflow 不是 visible 时 inline-block 的基线落到底边，WebKit 里 clip 也是）\n    contain: 'paint',\n    // 从右到左的语言里整个元素镜像，光带就反向扫；骨架包着的内容本来就看不见，镜像没有影响\n    transform: { default: null, ':dir(rtl)': 'scaleX(-1)' },\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      inset: 0,\n      backgroundImage: `linear-gradient(90deg, transparent 15%, ${shimmerVars.highlight} 50%, transparent 85%)`,\n      transform: 'translateX(-100%)',\n      animationName: { default: sweep, _reducedMotion: 'none' },\n      // 循环的装饰动画不取 durations（那是一次性过渡的时长，减少动态效果时为 0）：\n      // 2 秒一轮，其中 1.4 秒扫过、0.6 秒停顿，接近 Ant Design、MUI 的节奏，不催促也不显得卡住\n      animationDuration: '2s',\n      // 先慢后快再慢：光带像被推过去，而不是匀速平移\n      animationTimingFunction: 'ease-in-out',\n      animationIterationCount: 'infinite',\n      // 延迟写在元素上（delay），这里继承\n      animationDelay: 'inherit',\n    },\n  },\n  // 每一轮都保持同样的间隔：几行骨架的光带始终一前一后\n  delay: (delay: string) => ({ animationDelay: delay }),\n  // 骨架换成内容（或内容换成骨架）时淡入，不硬切；减少动态效果时 durations 为 0\n  reveal: {\n    animationName: fadeIn,\n    animationDuration: '_durations.lg',\n    animationTimingFunction: '_easings.enter',\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAa,kBAAkB;AAG/B,IAAM,QAAQ,IAAI,UAAU;CAC1B,MAAM,EAAE,WAAW,oBAAoB;CACvC,OAAO,EAAE,WAAW,mBAAmB;CACvC,QAAQ,EAAE,WAAW,mBAAmB;AAC1C,CAAC;AAED,IAAM,SAAS,IAAI,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC;;AAGrD,IAAa,gBAAgB,IAAI,OAAO;CACtC,MAAM;EACJ,UAAU;EAGV,SAAS;EAET,WAAW;GAAE,SAAS;GAAM,aAAa;EAAa;EACtD,WAAW;GACT,SAAS;GACT,UAAU;GACV,OAAO;GACP,iBAAiB,2CAA2C,YAAY,UAAS;GACjF,WAAW;GACX,eAAe;IAAE,SAAS;IAAO,gBAAgB;GAAO;GAGxD,mBAAmB;GAEnB,yBAAyB;GACzB,yBAAyB;GAEzB,gBAAgB;EAClB;CACF;CAEA,QAAQ,WAAmB,EAAE,gBAAgB,MAAM;CAEnD,QAAQ;EACN,eAAe;EACf,mBAAmB;EACnB,yBAAyB;CAC3B;AACF,CAAC"}
+{"version":3,"file":"shimmer.js","names":[],"sources":["../../../src/utils/style/shimmer.ts"],"sourcesContent":["/**\n * 骨架的扫光（同 Ant Design Skeleton 的 active、MUI Skeleton 的 wave）：一道光带从起始边扫到结束边，表示内容正在来。\n * 光带画在元素的 ::after 上，用 transform 平移（同 MUI）：合成器就能跑，不必每帧重绘元素；\n * 原来移动背景位置时，满屏骨架每帧都要重绘。元素因此 contain: paint。光带颜色见 shimmerVars.highlight。\n *\n *   sx: [shimmerStyles.wave, { backgroundColor: … }]\n *   sx: [shimmerStyles.wave, shimmerStyles.delay(`${index * SHIMMER_STAGGER}ms`)]   多行依次扫过，像一道波\n *   sx: loaded && shimmerStyles.reveal                                                 骨架换成内容时淡入\n *\n * 扫光只是装饰：减少动态效果时不扫（静止的占位已经说明在加载）；从右到左的语言里反向扫。\n */\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { shimmerVars } from './vars';\n\n/** 多行骨架相邻两行的扫光间隔（毫秒）：一屏七八行时整道波约一秒扫完 */\nexport const SHIMMER_STAGGER = 120;\n\n// 光带与元素一样宽：从元素外的起始侧（-100%）扫到结束侧（100%）；后 30% 的时间停在外面，两次之间有个间隔\nconst sweep = css.keyframes({\n  '0%': { transform: 'translateX(-100%)' },\n  '70%': { transform: 'translateX(100%)' },\n  '100%': { transform: 'translateX(100%)' },\n});\n\nconst fadeIn = css.keyframes({ from: { opacity: 0 } });\n\n/** 骨架扫光：wave、delay、reveal */\nexport const shimmerStyles = css.create({\n  wave: {\n    position: 'relative',\n    // 用绘制包含裁掉移出去的光带（按圆角裁）：不用 overflow，行内的骨架仍按文字基线对齐\n    // （overflow 不是 visible 时 inline-block 的基线落到底边，WebKit 里 clip 也是）\n    contain: 'paint',\n    // 从右到左的语言里整个元素镜像，光带就反向扫；骨架包着的内容本来就看不见，镜像没有影响\n    transform: { default: null, ':dir(rtl)': 'scaleX(-1)' },\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      inset: 0,\n      backgroundImage: `linear-gradient(90deg, transparent 15%, ${shimmerVars.highlight} 50%, transparent 85%)`,\n      transform: 'translateX(-100%)',\n      animationName: { default: sweep, _reducedMotion: 'none' },\n      // 循环的装饰动画不取 durations（那是一次性过渡的时长，减少动态效果时为 0）：\n      // 2 秒一轮，其中 1.4 秒扫过、0.6 秒停顿，接近 Ant Design、MUI 的节奏，不催促也不显得卡住\n      animationDuration: '2s',\n      // 先慢后快再慢：光带像被推过去，而不是匀速平移\n      animationTimingFunction: 'ease-in-out',\n      animationIterationCount: 'infinite',\n      // 延迟写在元素上（delay），这里继承\n      animationDelay: 'inherit',\n    },\n  },\n  // 每一轮都保持同样的间隔：几行骨架的光带始终一前一后\n  delay: (delay: string) => ({ animationDelay: delay }),\n  // 骨架换成内容（或内容换成骨架）时淡入，不硬切；减少动态效果时 durations 为 0\n  reveal: {\n    animationName: fadeIn,\n    animationDuration: '_durations.lg',\n    animationTimingFunction: '_easings.enter',\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAa,kBAAkB;AAG/B,IAAM,QAAQ,IAAI,UAAU;CAC1B,MAAM,EAAE,WAAW,oBAAoB;CACvC,OAAO,EAAE,WAAW,mBAAmB;CACvC,QAAQ,EAAE,WAAW,mBAAmB;AAC1C,CAAC;AAED,IAAM,SAAS,IAAI,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC;;AAGrD,IAAa,gBAAgB,IAAI,OAAO;CACtC,MAAM;EACJ,UAAU;EAGV,SAAS;EAET,WAAW;GAAE,SAAS;GAAM,aAAa;EAAa;EACtD,WAAW;GACT,SAAS;GACT,UAAU;GACV,OAAO;GACP,iBAAiB,2CAA2C,YAAY,UAAS;GACjF,WAAW;GACX,eAAe;IAAE,SAAS;IAAO,gBAAgB;GAAO;GAGxD,mBAAmB;GAEnB,yBAAyB;GACzB,yBAAyB;GAEzB,gBAAgB;EAClB;CACF;CAEA,QAAQ,WAAmB,EAAE,gBAAgB,MAAM;CAEnD,QAAQ;EACN,eAAe;EACf,mBAAmB;EACnB,yBAAyB;CAC3B;AACF,CAAC"}

package/dist/utils/style/styles.d.ts

@@ -3,7 +3,7 @@
  * 组件的 size、gap 等 prop 直接用这些类型，取值一一对应到 token。
  * 样式表只放被多个组件复用的；只有一个组件用的写在组件里。
  */
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 /** 圆角档位，对应主题的 radii（em，随字号缩放），括号里是默认主题的值；各组件的 radius 都用它 */
 export interface RadiusScale {

package/dist/utils/style/styles.js

@@ -1,5 +1,5 @@
 import { t } from "../../config/theme/tokens.js";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/utils/style/styles.ts
 /**
 * 组件共用的档位类型与样式表。档位与主题 tokens 同名（COMPONENTS.md §6.2）：

package/dist/utils/style/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":[],"sources":["../../../src/utils/style/styles.ts"],"sourcesContent":["/**\n * 组件共用的档位类型与样式表。档位与主题 tokens 同名（COMPONENTS.md §6.2）：\n * 组件的 size、gap 等 prop 直接用这些类型，取值一一对应到 token。\n * 样式表只放被多个组件复用的；只有一个组件用的写在组件里。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../../config/theme/tokens';\n\n/*\n * 取值类型的写法（COMPONENTS.md §1）：写成带注释接口的 keyof，接口的每个键带注释，\n * 补全列表与悬停取值时能看到每个取值的效果（WebStorm 把字符串字面量解析到 keyof 的键上）。\n */\n\n/** 圆角档位，对应主题的 radii（em，随字号缩放），括号里是默认主题的值；各组件的 radius 都用它 */\nexport interface RadiusScale {\n  /** 直角：表格、密集列表里与直线对齐 */\n  none: unknown;\n  /** 0.15em */\n  xs: unknown;\n  /** 0.25em */\n  sm: unknown;\n  /** 0.4em：控件与按钮的默认 */\n  md: unknown;\n  /** 0.7em：卡片、面板 */\n  lg: unknown;\n  /** 1em */\n  xl: unknown;\n  /** 胶囊形（宽高相等时是圆形） */\n  full: unknown;\n}\n\n/** 圆角档位 */\nexport type Radius = keyof RadiusScale;\n\n/** 圆角档位的样式：none、xs、sm、md、lg、xl、full */\nexport const radiusStyles = css.create({\n  none: { borderRadius: 0 },\n  xs: { borderRadius: '_xs' },\n  sm: { borderRadius: '_sm' },\n  md: { borderRadius: '_md' },\n  lg: { borderRadius: '_lg' },\n  xl: { borderRadius: '_xl' },\n  full: { borderRadius: '_full' },\n});\n\n/** 间距档位，对应主题的 space（em，随字号缩放），括号里是默认主题的值 */\nexport interface SpaceScale {\n  /** 无间距（0） */\n  none: unknown;\n  /** 0.25em：图标与文字之间、紧凑的元素之间 */\n  xs: unknown;\n  /** 0.5em：控件内部、相关的元素之间 */\n  sm: unknown;\n  /** 0.75em：一组内容的元素之间 */\n  md: unknown;\n  /** 1em：表单项之间、段落之间 */\n  lg: unknown;\n  /** 1.5em：区块之间、卡片与对话框的内边距 */\n  xl: unknown;\n}\n\n/** 间距档位：五档之外可以是 none */\nexport type Space = keyof SpaceScale;\n\n/**\n * 一组按名字取的样式（如按变体分组的色调表 Record<变体, StyleTable<色调>>）。\n * css.create 的结果不用写它：create 返回具名的 CompiledStyles，类型直接推导\n */\nexport type StyleTable<Key extends string> = Readonly<Record<Key, SxStyles>>;\n\n/** 间距 gap：Flex、Grid */\nexport const gapStyles = css.create({\n  none: { gap: '_none' },\n  xs: { gap: '_xs' },\n  sm: { gap: '_sm' },\n  md: { gap: '_md' },\n  lg: { gap: '_lg' },\n  xl: { gap: '_xl' },\n});\n\n/** 两侧的内边距：列表条目与所在容器（弹出层、卡片）的内边距对齐 */\nexport const paddingInlineStyles = css.create({\n  none: { paddingInline: '_none' },\n  xs: { paddingInline: '_xs' },\n  sm: { paddingInline: '_sm' },\n  md: { paddingInline: '_md' },\n  lg: { paddingInline: '_lg' },\n  xl: { paddingInline: '_xl' },\n});\n\n/** 行间距：Grid 单独指定时 */\nexport const rowGapStyles = css.create({\n  none: { rowGap: '_none' },\n  xs: { rowGap: '_xs' },\n  sm: { rowGap: '_sm' },\n  md: { rowGap: '_md' },\n  lg: { rowGap: '_lg' },\n  xl: { rowGap: '_xl' },\n});\n\n/** 列间距：Grid 单独指定时 */\nexport const columnGapStyles = css.create({\n  none: { columnGap: '_none' },\n  xs: { columnGap: '_xs' },\n  sm: { columnGap: '_sm' },\n  md: { columnGap: '_md' },\n  lg: { columnGap: '_lg' },\n  xl: { columnGap: '_xl' },\n});\n\n/**\n * 焦点环：宽度、颜色全站一致，只有触发的伪类与偏移不同。\n * - visible：键盘聚焦本元素（Link、Button 等），环离开元素一点；\n * - tight：同上但贴着边框（勾选框、单选、开关这类小控件，环离远了显得松）；\n * - hasVisible：里面的元素键盘聚焦时画在整块上（FileDrop：原生 input 视觉上隐藏）；\n * - within：里面的元素聚焦（含鼠标）时画在外壳上，往里收压住边框（输入框外壳）\n */\nexport const focusRingStyles = css.create({\n  visible: {\n    outlineStyle: { default: 'none', ':focus-visible': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: '_sm',\n  },\n  tight: {\n    outlineStyle: { default: 'none', ':focus-visible': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: '_borderWidths.sm',\n  },\n  hasVisible: {\n    outlineStyle: { default: 'none', ':has(:focus-visible)': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: '_borderWidths.sm',\n  },\n  within: {\n    outlineStyle: { default: 'none', ':focus-within': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: `calc(-1 * ${t.borderWidths.xs})`,\n  },\n});\n\n/**\n * 列表元素（ul、ol）当布局容器时去掉默认的圆点与缩进。\n * Safari 去掉圆点后会把它当成普通容器，读屏不再报“列表”，所以组件同时补上 role=\"list\"（见 listRole）\n */\nexport const listStyles = css.create({\n  reset: { margin: 0, paddingInlineStart: 0, listStyleType: 'none' },\n});\n\n/** 布局组件的工厂（createFlex、createGrid、createContainer）可用的语义容器标签 */\nexport type LayoutTag =\n  | 'div'\n  | 'section'\n  | 'article'\n  | 'ul'\n  | 'ol'\n  | 'li'\n  | 'nav'\n  | 'header'\n  | 'footer'\n  | 'main'\n  | 'aside'\n  | 'form';\n\n/** 列表标签需要的 role（见 listStyles），其他标签不加 */\nexport const listRole = (tag: string) => (tag === 'ul' || tag === 'ol' ? 'list' : undefined);\n"],"mappings":";;;;;;;;;AAoCA,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM,EAAE,cAAc,EAAE;CACxB,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,MAAM,EAAE,cAAc,QAAQ;AAChC,CAAC;;AA4BD,IAAa,YAAY,IAAI,OAAO;CAClC,MAAM,EAAE,KAAK,QAAQ;CACrB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;AACnB,CAAC;;AAGD,IAAa,sBAAsB,IAAI,OAAO;CAC5C,MAAM,EAAE,eAAe,QAAQ;CAC/B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;AAC7B,CAAC;;AAGD,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM,EAAE,QAAQ,QAAQ;CACxB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;AACtB,CAAC;;AAGD,IAAa,kBAAkB,IAAI,OAAO;CACxC,MAAM,EAAE,WAAW,QAAQ;CAC3B,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;AACzB,CAAC;;;;;;;;AASD,IAAa,kBAAkB,IAAI,OAAO;CACxC,SAAS;EACP,cAAc;GAAE,SAAS;GAAQ,kBAAkB;EAAQ;EAC3D,cAAc;EACd,cAAc;EACd,eAAe;CACjB;CACA,OAAO;EACL,cAAc;GAAE,SAAS;GAAQ,kBAAkB;EAAQ;EAC3D,cAAc;EACd,cAAc;EACd,eAAe;CACjB;CACA,YAAY;EACV,cAAc;GAAE,SAAS;GAAQ,wBAAwB;EAAQ;EACjE,cAAc;EACd,cAAc;EACd,eAAe;CACjB;CACA,QAAQ;EACN,cAAc;GAAE,SAAS;GAAQ,iBAAiB;EAAQ;EAC1D,cAAc;EACd,cAAc;EACd,eAAe,aAAa,EAAE,aAAa,GAAE;CAC/C;AACF,CAAC;;;;;AAMD,IAAa,aAAa,IAAI,OAAO,EACnC,OAAO;CAAE,QAAQ;CAAG,oBAAoB;CAAG,eAAe;AAAO,EACnE,CAAC;;AAkBD,IAAa,YAAY,QAAiB,QAAQ,QAAQ,QAAQ,OAAO,SAAS,KAAA"}
+{"version":3,"file":"styles.js","names":[],"sources":["../../../src/utils/style/styles.ts"],"sourcesContent":["/**\n * 组件共用的档位类型与样式表。档位与主题 tokens 同名（COMPONENTS.md §6.2）：\n * 组件的 size、gap 等 prop 直接用这些类型，取值一一对应到 token。\n * 样式表只放被多个组件复用的；只有一个组件用的写在组件里。\n */\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../../config/theme/tokens';\n\n/*\n * 取值类型的写法（COMPONENTS.md §1）：写成带注释接口的 keyof，接口的每个键带注释，\n * 补全列表与悬停取值时能看到每个取值的效果（WebStorm 把字符串字面量解析到 keyof 的键上）。\n */\n\n/** 圆角档位，对应主题的 radii（em，随字号缩放），括号里是默认主题的值；各组件的 radius 都用它 */\nexport interface RadiusScale {\n  /** 直角：表格、密集列表里与直线对齐 */\n  none: unknown;\n  /** 0.15em */\n  xs: unknown;\n  /** 0.25em */\n  sm: unknown;\n  /** 0.4em：控件与按钮的默认 */\n  md: unknown;\n  /** 0.7em：卡片、面板 */\n  lg: unknown;\n  /** 1em */\n  xl: unknown;\n  /** 胶囊形（宽高相等时是圆形） */\n  full: unknown;\n}\n\n/** 圆角档位 */\nexport type Radius = keyof RadiusScale;\n\n/** 圆角档位的样式：none、xs、sm、md、lg、xl、full */\nexport const radiusStyles = css.create({\n  none: { borderRadius: 0 },\n  xs: { borderRadius: '_xs' },\n  sm: { borderRadius: '_sm' },\n  md: { borderRadius: '_md' },\n  lg: { borderRadius: '_lg' },\n  xl: { borderRadius: '_xl' },\n  full: { borderRadius: '_full' },\n});\n\n/** 间距档位，对应主题的 space（em，随字号缩放），括号里是默认主题的值 */\nexport interface SpaceScale {\n  /** 无间距（0） */\n  none: unknown;\n  /** 0.25em：图标与文字之间、紧凑的元素之间 */\n  xs: unknown;\n  /** 0.5em：控件内部、相关的元素之间 */\n  sm: unknown;\n  /** 0.75em：一组内容的元素之间 */\n  md: unknown;\n  /** 1em：表单项之间、段落之间 */\n  lg: unknown;\n  /** 1.5em：区块之间、卡片与对话框的内边距 */\n  xl: unknown;\n}\n\n/** 间距档位：五档之外可以是 none */\nexport type Space = keyof SpaceScale;\n\n/**\n * 一组按名字取的样式（如按变体分组的色调表 Record<变体, StyleTable<色调>>）。\n * css.create 的结果不用写它：create 返回具名的 CompiledStyles，类型直接推导\n */\nexport type StyleTable<Key extends string> = Readonly<Record<Key, SxStyles>>;\n\n/** 间距 gap：Flex、Grid */\nexport const gapStyles = css.create({\n  none: { gap: '_none' },\n  xs: { gap: '_xs' },\n  sm: { gap: '_sm' },\n  md: { gap: '_md' },\n  lg: { gap: '_lg' },\n  xl: { gap: '_xl' },\n});\n\n/** 两侧的内边距：列表条目与所在容器（弹出层、卡片）的内边距对齐 */\nexport const paddingInlineStyles = css.create({\n  none: { paddingInline: '_none' },\n  xs: { paddingInline: '_xs' },\n  sm: { paddingInline: '_sm' },\n  md: { paddingInline: '_md' },\n  lg: { paddingInline: '_lg' },\n  xl: { paddingInline: '_xl' },\n});\n\n/** 行间距：Grid 单独指定时 */\nexport const rowGapStyles = css.create({\n  none: { rowGap: '_none' },\n  xs: { rowGap: '_xs' },\n  sm: { rowGap: '_sm' },\n  md: { rowGap: '_md' },\n  lg: { rowGap: '_lg' },\n  xl: { rowGap: '_xl' },\n});\n\n/** 列间距：Grid 单独指定时 */\nexport const columnGapStyles = css.create({\n  none: { columnGap: '_none' },\n  xs: { columnGap: '_xs' },\n  sm: { columnGap: '_sm' },\n  md: { columnGap: '_md' },\n  lg: { columnGap: '_lg' },\n  xl: { columnGap: '_xl' },\n});\n\n/**\n * 焦点环：宽度、颜色全站一致，只有触发的伪类与偏移不同。\n * - visible：键盘聚焦本元素（Link、Button 等），环离开元素一点；\n * - tight：同上但贴着边框（勾选框、单选、开关这类小控件，环离远了显得松）；\n * - hasVisible：里面的元素键盘聚焦时画在整块上（FileDrop：原生 input 视觉上隐藏）；\n * - within：里面的元素聚焦（含鼠标）时画在外壳上，往里收压住边框（输入框外壳）\n */\nexport const focusRingStyles = css.create({\n  visible: {\n    outlineStyle: { default: 'none', ':focus-visible': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: '_sm',\n  },\n  tight: {\n    outlineStyle: { default: 'none', ':focus-visible': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: '_borderWidths.sm',\n  },\n  hasVisible: {\n    outlineStyle: { default: 'none', ':has(:focus-visible)': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: '_borderWidths.sm',\n  },\n  within: {\n    outlineStyle: { default: 'none', ':focus-within': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: `calc(-1 * ${t.borderWidths.xs})`,\n  },\n});\n\n/**\n * 列表元素（ul、ol）当布局容器时去掉默认的圆点与缩进。\n * Safari 去掉圆点后会把它当成普通容器，读屏不再报“列表”，所以组件同时补上 role=\"list\"（见 listRole）\n */\nexport const listStyles = css.create({\n  reset: { margin: 0, paddingInlineStart: 0, listStyleType: 'none' },\n});\n\n/** 布局组件的工厂（createFlex、createGrid、createContainer）可用的语义容器标签 */\nexport type LayoutTag =\n  | 'div'\n  | 'section'\n  | 'article'\n  | 'ul'\n  | 'ol'\n  | 'li'\n  | 'nav'\n  | 'header'\n  | 'footer'\n  | 'main'\n  | 'aside'\n  | 'form';\n\n/** 列表标签需要的 role（见 listStyles），其他标签不加 */\nexport const listRole = (tag: string) => (tag === 'ul' || tag === 'ol' ? 'list' : undefined);\n"],"mappings":";;;;;;;;;AAoCA,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM,EAAE,cAAc,EAAE;CACxB,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,MAAM,EAAE,cAAc,QAAQ;AAChC,CAAC;;AA4BD,IAAa,YAAY,IAAI,OAAO;CAClC,MAAM,EAAE,KAAK,QAAQ;CACrB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;AACnB,CAAC;;AAGD,IAAa,sBAAsB,IAAI,OAAO;CAC5C,MAAM,EAAE,eAAe,QAAQ;CAC/B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;AAC7B,CAAC;;AAGD,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM,EAAE,QAAQ,QAAQ;CACxB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;AACtB,CAAC;;AAGD,IAAa,kBAAkB,IAAI,OAAO;CACxC,MAAM,EAAE,WAAW,QAAQ;CAC3B,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;AACzB,CAAC;;;;;;;;AASD,IAAa,kBAAkB,IAAI,OAAO;CACxC,SAAS;EACP,cAAc;GAAE,SAAS;GAAQ,kBAAkB;EAAQ;EAC3D,cAAc;EACd,cAAc;EACd,eAAe;CACjB;CACA,OAAO;EACL,cAAc;GAAE,SAAS;GAAQ,kBAAkB;EAAQ;EAC3D,cAAc;EACd,cAAc;EACd,eAAe;CACjB;CACA,YAAY;EACV,cAAc;GAAE,SAAS;GAAQ,wBAAwB;EAAQ;EACjE,cAAc;EACd,cAAc;EACd,eAAe;CACjB;CACA,QAAQ;EACN,cAAc;GAAE,SAAS;GAAQ,iBAAiB;EAAQ;EAC1D,cAAc;EACd,cAAc;EACd,eAAe,aAAa,EAAE,aAAa,GAAE;CAC/C;AACF,CAAC;;;;;AAMD,IAAa,aAAa,IAAI,OAAO,EACnC,OAAO;CAAE,QAAQ;CAAG,oBAAoB;CAAG,eAAe;AAAO,EACnE,CAAC;;AAkBD,IAAa,YAAY,QAAiB,QAAQ,QAAQ,QAAQ,OAAO,SAAS,KAAA"}

package/dist/utils/style/swatch-styles.d.ts

@@ -2,7 +2,7 @@
  * 色块共用的样式：ColorSwatch、ColorField、ThemeCustomizer 里画一块颜色。
  * 棋盘格垫在下面，半透明的颜色看得出来；内描边按正文色的淡色画出色块边界，亮色、暗色主题里都看得见。
  */
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 /** 色块的样式：checkerboard、ring */
 export declare const swatchStyles: Readonly<{
     checkerboard: css.CompiledStyles;

package/dist/utils/style/swatch-styles.js

@@ -1,5 +1,5 @@
 import { t } from "../../config/theme/tokens.js";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/utils/style/swatch-styles.ts
 /**
 * 色块共用的样式：ColorSwatch、ColorField、ThemeCustomizer 里画一块颜色。

package/dist/utils/style/swatch-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"swatch-styles.js","names":[],"sources":["../../../src/utils/style/swatch-styles.ts"],"sourcesContent":["/**\n * 色块共用的样式：ColorSwatch、ColorField、ThemeCustomizer 里画一块颜色。\n * 棋盘格垫在下面，半透明的颜色看得出来；内描边按正文色的淡色画出色块边界，亮色、暗色主题里都看得见。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../../config/theme/tokens';\n\n/** 色块的样式：checkerboard、ring */\nexport const swatchStyles = css.create({\n  // 格子大小用 em：随色块所在的字号缩放\n  checkerboard: {\n    backgroundImage: `repeating-conic-gradient(${t.colors.fill} 0 25%, ${t.colors.surface} 0 50%)`,\n    backgroundSize: '0.5em 0.5em',\n  },\n  ring: { boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${t.colors.text} 14%, transparent)` },\n});\n"],"mappings":";;;;;;;;AAQA,IAAa,eAAe,IAAI,OAAO;CAErC,cAAc;EACZ,iBAAiB,4BAA4B,EAAE,OAAO,KAAI,UAAW,EAAE,OAAO,QAAO;EACrF,gBAAgB;CAClB;CACA,MAAM,EAAE,WAAW,uCAAuC,EAAE,OAAO,KAAI,oBAAqB;AAC9F,CAAC"}
+{"version":3,"file":"swatch-styles.js","names":[],"sources":["../../../src/utils/style/swatch-styles.ts"],"sourcesContent":["/**\n * 色块共用的样式：ColorSwatch、ColorField、ThemeCustomizer 里画一块颜色。\n * 棋盘格垫在下面，半透明的颜色看得出来；内描边按正文色的淡色画出色块边界，亮色、暗色主题里都看得见。\n */\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../../config/theme/tokens';\n\n/** 色块的样式：checkerboard、ring */\nexport const swatchStyles = css.create({\n  // 格子大小用 em：随色块所在的字号缩放\n  checkerboard: {\n    backgroundImage: `repeating-conic-gradient(${t.colors.fill} 0 25%, ${t.colors.surface} 0 50%)`,\n    backgroundSize: '0.5em 0.5em',\n  },\n  ring: { boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${t.colors.text} 14%, transparent)` },\n});\n"],"mappings":";;;;;;;;AAQA,IAAa,eAAe,IAAI,OAAO;CAErC,cAAc;EACZ,iBAAiB,4BAA4B,EAAE,OAAO,KAAI,UAAW,EAAE,OAAO,QAAO;EACrF,gBAAgB;CAClB;CACA,MAAM,EAAE,WAAW,uCAAuC,EAAE,OAAO,KAAI,oBAAqB;AAC9F,CAAC"}

package/dist/utils/style/tone-styles.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 { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { IconData } from '../../base/Icon';
 import type { StyleTable } from './styles';

package/dist/utils/style/tone-styles.js

@@ -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 { CircleAlert, CircleCheck, Info, TriangleAlert } from "@lucide/icons";
 //#region src/utils/style/tone-styles.ts
 /**

package/dist/utils/style/tone-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tone-styles.js","names":[],"sources":["../../../src/utils/style/tone-styles.ts"],"sourcesContent":["/**\n * 状态色调的样式表与默认图标：Badge、Tag、Alert、Toast 等“带颜色的标记与提示”共用；按钮家族、Progress 等也用这一套色调。\n * 外观 = variant（实底 / 浅色底 / 浅色底加描边 / 描边）× tone（六种色调）。\n * 实底用各色调的实色与其上的字色（accent / accentContrast、success / successContrast…），主题检查保证 4.5:1。\n */\nimport { CircleAlert, CircleCheck, Info, TriangleAlert } from '@lucide/icons';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { IconData } from '../../base/Icon';\nimport type { StyleTable } from './styles';\n\n/** 状态色调 */\nexport interface StatusTones {\n  /** 中性：普通的标签、计数，不需要强调的操作（如“取消”） */\n  neutral: unknown;\n  /** 品牌色：新功能、选中、主要操作 */\n  accent: unknown;\n  /** 信息：提示、说明 */\n  info: unknown;\n  /** 成功：已完成、正常 */\n  success: unknown;\n  /** 警告：需要注意、即将过期 */\n  warning: unknown;\n  /** 危险：错误、失败、删除等破坏性操作 */\n  danger: unknown;\n}\n\n/** 标记与提示的样式 */\nexport interface StatusVariants {\n  /** 实底：最醒目，计数、状态点 */\n  solid: unknown;\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 浅色底加描边 */\n  surface: unknown;\n  /** 只有描边 */\n  outline: unknown;\n}\n\n/** 状态色调 */\nexport type StatusTone = keyof StatusTones;\n/** 标记与提示的样式 */\nexport type StatusVariant = keyof StatusVariants;\n\nconst solid = css.create({\n  neutral: { color: '_inverseText', backgroundColor: '_inverseSurface' },\n  accent: { color: '_accentContrast', backgroundColor: '_accent' },\n  info: { color: '_infoContrast', backgroundColor: '_info' },\n  success: { color: '_successContrast', backgroundColor: '_success' },\n  warning: { color: '_warningContrast', backgroundColor: '_warning' },\n  danger: { color: '_dangerContrast', backgroundColor: '_danger' },\n});\n\nconst soft = css.create({\n  neutral: { color: '_text', backgroundColor: '_fill' },\n  accent: { color: '_accentText', backgroundColor: '_accentSoft' },\n  info: { color: '_infoText', backgroundColor: '_infoSoft' },\n  success: { color: '_successText', backgroundColor: '_successSoft' },\n  warning: { color: '_warningText', backgroundColor: '_warningSoft' },\n  danger: { color: '_dangerText', backgroundColor: '_dangerSoft' },\n});\n\nconst surface = css.create({\n  neutral: { color: '_text', backgroundColor: '_surface', borderColor: '_border' },\n  accent: { color: '_accentText', backgroundColor: '_accentSoft', borderColor: '_accentBorder' },\n  info: { color: '_infoText', backgroundColor: '_infoSoft', borderColor: '_infoBorder' },\n  success: {\n    color: '_successText',\n    backgroundColor: '_successSoft',\n    borderColor: '_successBorder',\n  },\n  warning: {\n    color: '_warningText',\n    backgroundColor: '_warningSoft',\n    borderColor: '_warningBorder',\n  },\n  danger: { color: '_dangerText', backgroundColor: '_dangerSoft', borderColor: '_dangerBorder' },\n});\n\nconst outline = css.create({\n  neutral: { color: '_text', borderColor: '_border' },\n  accent: { color: '_accentText', borderColor: '_accentBorder' },\n  info: { color: '_infoText', borderColor: '_infoBorder' },\n  success: { color: '_successText', borderColor: '_successBorder' },\n  warning: { color: '_warningText', borderColor: '_warningBorder' },\n  danger: { color: '_dangerText', borderColor: '_dangerBorder' },\n});\n\n/** 状态色调 的样式：bordered */\nexport const statusToneBorderStyles = css.create({\n  // 每种样式都留出边框的位置（实底、浅色底时透明），切换样式时尺寸不变\n  bordered: { borderWidth: '_xs', borderStyle: 'solid', borderColor: 'transparent' },\n});\n\n/** 样式 × 状态色调 → 样式表：statusToneStyles[variant][tone]（一般用 statusToneSx） */\nexport const statusToneStyles: Readonly<Record<StatusVariant, StyleTable<StatusTone>>> = {\n  solid,\n  soft,\n  surface,\n  outline,\n};\n\n/** 每种状态色调默认的图标（Lucide）：提示条、通知、确认对话框按色调自动选图标 */\nexport const statusIcons: Readonly<Record<StatusTone, IconData>> = {\n  neutral: Info,\n  accent: Info,\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  danger: CircleAlert,\n};\n\n/** 样式 × 色调 → 颜色、底色与边框 */\nexport function statusToneSx(variant: StatusVariant, tone: StatusTone): SxStyles {\n  return [statusToneBorderStyles.bordered, statusToneStyles[variant][tone]] as SxStyles;\n}\n\n/**\n * 实底色调的颜色变量：选中的勾选框、单选框、开关与滑块的已选部分用 `var(--tone-fill)` 作底色、\n * `var(--tone-on-fill)` 作其上的对勾、圆点、滑块色。组件根元素加 toneFillStyles[tone]，各部件引用变量：\n * 部件的选中样式不随色调再分六份。\n * 状态色用文字色而不是实色：黄、绿的实色在表面上不到 3:1，图形要的是与周围的对比；danger 同理（暗色主题里在轨道上不到 3:1）\n */\nexport const toneFillStyles = css.create({\n  neutral: { '--tone-fill': '_colors.inverseSurface', '--tone-on-fill': '_colors.inverseText' },\n  accent: { '--tone-fill': '_colors.accent', '--tone-on-fill': '_colors.accentContrast' },\n  info: { '--tone-fill': '_colors.infoText', '--tone-on-fill': '_colors.background' },\n  success: { '--tone-fill': '_colors.successText', '--tone-on-fill': '_colors.background' },\n  warning: { '--tone-fill': '_colors.warningText', '--tone-on-fill': '_colors.background' },\n  danger: { '--tone-fill': '_colors.dangerText', '--tone-on-fill': '_colors.background' },\n});\n"],"mappings":";;;;;;;;AA4CA,IAAM,QAAQ,IAAI,OAAO;CACvB,SAAS;EAAE,OAAO;EAAgB,iBAAiB;CAAkB;CACrE,QAAQ;EAAE,OAAO;EAAmB,iBAAiB;CAAU;CAC/D,MAAM;EAAE,OAAO;EAAiB,iBAAiB;CAAQ;CACzD,SAAS;EAAE,OAAO;EAAoB,iBAAiB;CAAW;CAClE,SAAS;EAAE,OAAO;EAAoB,iBAAiB;CAAW;CAClE,QAAQ;EAAE,OAAO;EAAmB,iBAAiB;CAAU;AACjE,CAAC;AAED,IAAM,OAAO,IAAI,OAAO;CACtB,SAAS;EAAE,OAAO;EAAS,iBAAiB;CAAQ;CACpD,QAAQ;EAAE,OAAO;EAAe,iBAAiB;CAAc;CAC/D,MAAM;EAAE,OAAO;EAAa,iBAAiB;CAAY;CACzD,SAAS;EAAE,OAAO;EAAgB,iBAAiB;CAAe;CAClE,SAAS;EAAE,OAAO;EAAgB,iBAAiB;CAAe;CAClE,QAAQ;EAAE,OAAO;EAAe,iBAAiB;CAAc;AACjE,CAAC;AAED,IAAM,UAAU,IAAI,OAAO;CACzB,SAAS;EAAE,OAAO;EAAS,iBAAiB;EAAY,aAAa;CAAU;CAC/E,QAAQ;EAAE,OAAO;EAAe,iBAAiB;EAAe,aAAa;CAAgB;CAC7F,MAAM;EAAE,OAAO;EAAa,iBAAiB;EAAa,aAAa;CAAc;CACrF,SAAS;EACP,OAAO;EACP,iBAAiB;EACjB,aAAa;CACf;CACA,SAAS;EACP,OAAO;EACP,iBAAiB;EACjB,aAAa;CACf;CACA,QAAQ;EAAE,OAAO;EAAe,iBAAiB;EAAe,aAAa;CAAgB;AAC/F,CAAC;AAED,IAAM,UAAU,IAAI,OAAO;CACzB,SAAS;EAAE,OAAO;EAAS,aAAa;CAAU;CAClD,QAAQ;EAAE,OAAO;EAAe,aAAa;CAAgB;CAC7D,MAAM;EAAE,OAAO;EAAa,aAAa;CAAc;CACvD,SAAS;EAAE,OAAO;EAAgB,aAAa;CAAiB;CAChE,SAAS;EAAE,OAAO;EAAgB,aAAa;CAAiB;CAChE,QAAQ;EAAE,OAAO;EAAe,aAAa;CAAgB;AAC/D,CAAC;;AAGD,IAAa,yBAAyB,IAAI,OAAO,EAE/C,UAAU;CAAE,aAAa;CAAO,aAAa;CAAS,aAAa;AAAc,EACnF,CAAC;;AAGD,IAAa,mBAA4E;CACvF;CACA;CACA;CACA;AACF;;AAGA,IAAa,cAAsD;CACjE,SAAS;CACT,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;AACV;;AAGA,SAAgB,aAAa,SAAwB,MAA4B;CAC/E,OAAO,CAAC,uBAAuB,UAAU,iBAAiB,QAAQ,CAAC,KAAK;AAC1E;;;;;;;AAQA,IAAa,iBAAiB,IAAI,OAAO;CACvC,SAAS;EAAE,eAAe;EAA0B,kBAAkB;CAAsB;CAC5F,QAAQ;EAAE,eAAe;EAAkB,kBAAkB;CAAyB;CACtF,MAAM;EAAE,eAAe;EAAoB,kBAAkB;CAAqB;CAClF,SAAS;EAAE,eAAe;EAAuB,kBAAkB;CAAqB;CACxF,SAAS;EAAE,eAAe;EAAuB,kBAAkB;CAAqB;CACxF,QAAQ;EAAE,eAAe;EAAsB,kBAAkB;CAAqB;AACxF,CAAC"}
+{"version":3,"file":"tone-styles.js","names":[],"sources":["../../../src/utils/style/tone-styles.ts"],"sourcesContent":["/**\n * 状态色调的样式表与默认图标：Badge、Tag、Alert、Toast 等“带颜色的标记与提示”共用；按钮家族、Progress 等也用这一套色调。\n * 外观 = variant（实底 / 浅色底 / 浅色底加描边 / 描边）× tone（六种色调）。\n * 实底用各色调的实色与其上的字色（accent / accentContrast、success / successContrast…），主题检查保证 4.5:1。\n */\nimport { CircleAlert, CircleCheck, Info, TriangleAlert } from '@lucide/icons';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { IconData } from '../../base/Icon';\nimport type { StyleTable } from './styles';\n\n/** 状态色调 */\nexport interface StatusTones {\n  /** 中性：普通的标签、计数，不需要强调的操作（如“取消”） */\n  neutral: unknown;\n  /** 品牌色：新功能、选中、主要操作 */\n  accent: unknown;\n  /** 信息：提示、说明 */\n  info: unknown;\n  /** 成功：已完成、正常 */\n  success: unknown;\n  /** 警告：需要注意、即将过期 */\n  warning: unknown;\n  /** 危险：错误、失败、删除等破坏性操作 */\n  danger: unknown;\n}\n\n/** 标记与提示的样式 */\nexport interface StatusVariants {\n  /** 实底：最醒目，计数、状态点 */\n  solid: unknown;\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 浅色底加描边 */\n  surface: unknown;\n  /** 只有描边 */\n  outline: unknown;\n}\n\n/** 状态色调 */\nexport type StatusTone = keyof StatusTones;\n/** 标记与提示的样式 */\nexport type StatusVariant = keyof StatusVariants;\n\nconst solid = css.create({\n  neutral: { color: '_inverseText', backgroundColor: '_inverseSurface' },\n  accent: { color: '_accentContrast', backgroundColor: '_accent' },\n  info: { color: '_infoContrast', backgroundColor: '_info' },\n  success: { color: '_successContrast', backgroundColor: '_success' },\n  warning: { color: '_warningContrast', backgroundColor: '_warning' },\n  danger: { color: '_dangerContrast', backgroundColor: '_danger' },\n});\n\nconst soft = css.create({\n  neutral: { color: '_text', backgroundColor: '_fill' },\n  accent: { color: '_accentText', backgroundColor: '_accentSoft' },\n  info: { color: '_infoText', backgroundColor: '_infoSoft' },\n  success: { color: '_successText', backgroundColor: '_successSoft' },\n  warning: { color: '_warningText', backgroundColor: '_warningSoft' },\n  danger: { color: '_dangerText', backgroundColor: '_dangerSoft' },\n});\n\nconst surface = css.create({\n  neutral: { color: '_text', backgroundColor: '_surface', borderColor: '_border' },\n  accent: { color: '_accentText', backgroundColor: '_accentSoft', borderColor: '_accentBorder' },\n  info: { color: '_infoText', backgroundColor: '_infoSoft', borderColor: '_infoBorder' },\n  success: {\n    color: '_successText',\n    backgroundColor: '_successSoft',\n    borderColor: '_successBorder',\n  },\n  warning: {\n    color: '_warningText',\n    backgroundColor: '_warningSoft',\n    borderColor: '_warningBorder',\n  },\n  danger: { color: '_dangerText', backgroundColor: '_dangerSoft', borderColor: '_dangerBorder' },\n});\n\nconst outline = css.create({\n  neutral: { color: '_text', borderColor: '_border' },\n  accent: { color: '_accentText', borderColor: '_accentBorder' },\n  info: { color: '_infoText', borderColor: '_infoBorder' },\n  success: { color: '_successText', borderColor: '_successBorder' },\n  warning: { color: '_warningText', borderColor: '_warningBorder' },\n  danger: { color: '_dangerText', borderColor: '_dangerBorder' },\n});\n\n/** 状态色调 的样式：bordered */\nexport const statusToneBorderStyles = css.create({\n  // 每种样式都留出边框的位置（实底、浅色底时透明），切换样式时尺寸不变\n  bordered: { borderWidth: '_xs', borderStyle: 'solid', borderColor: 'transparent' },\n});\n\n/** 样式 × 状态色调 → 样式表：statusToneStyles[variant][tone]（一般用 statusToneSx） */\nexport const statusToneStyles: Readonly<Record<StatusVariant, StyleTable<StatusTone>>> = {\n  solid,\n  soft,\n  surface,\n  outline,\n};\n\n/** 每种状态色调默认的图标（Lucide）：提示条、通知、确认对话框按色调自动选图标 */\nexport const statusIcons: Readonly<Record<StatusTone, IconData>> = {\n  neutral: Info,\n  accent: Info,\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  danger: CircleAlert,\n};\n\n/** 样式 × 色调 → 颜色、底色与边框 */\nexport function statusToneSx(variant: StatusVariant, tone: StatusTone): SxStyles {\n  return [statusToneBorderStyles.bordered, statusToneStyles[variant][tone]] as SxStyles;\n}\n\n/**\n * 实底色调的颜色变量：选中的勾选框、单选框、开关与滑块的已选部分用 `var(--tone-fill)` 作底色、\n * `var(--tone-on-fill)` 作其上的对勾、圆点、滑块色。组件根元素加 toneFillStyles[tone]，各部件引用变量：\n * 部件的选中样式不随色调再分六份。\n * 状态色用文字色而不是实色：黄、绿的实色在表面上不到 3:1，图形要的是与周围的对比；danger 同理（暗色主题里在轨道上不到 3:1）\n */\nexport const toneFillStyles = css.create({\n  neutral: { '--tone-fill': '_colors.inverseSurface', '--tone-on-fill': '_colors.inverseText' },\n  accent: { '--tone-fill': '_colors.accent', '--tone-on-fill': '_colors.accentContrast' },\n  info: { '--tone-fill': '_colors.infoText', '--tone-on-fill': '_colors.background' },\n  success: { '--tone-fill': '_colors.successText', '--tone-on-fill': '_colors.background' },\n  warning: { '--tone-fill': '_colors.warningText', '--tone-on-fill': '_colors.background' },\n  danger: { '--tone-fill': '_colors.dangerText', '--tone-on-fill': '_colors.background' },\n});\n"],"mappings":";;;;;;;;AA4CA,IAAM,QAAQ,IAAI,OAAO;CACvB,SAAS;EAAE,OAAO;EAAgB,iBAAiB;CAAkB;CACrE,QAAQ;EAAE,OAAO;EAAmB,iBAAiB;CAAU;CAC/D,MAAM;EAAE,OAAO;EAAiB,iBAAiB;CAAQ;CACzD,SAAS;EAAE,OAAO;EAAoB,iBAAiB;CAAW;CAClE,SAAS;EAAE,OAAO;EAAoB,iBAAiB;CAAW;CAClE,QAAQ;EAAE,OAAO;EAAmB,iBAAiB;CAAU;AACjE,CAAC;AAED,IAAM,OAAO,IAAI,OAAO;CACtB,SAAS;EAAE,OAAO;EAAS,iBAAiB;CAAQ;CACpD,QAAQ;EAAE,OAAO;EAAe,iBAAiB;CAAc;CAC/D,MAAM;EAAE,OAAO;EAAa,iBAAiB;CAAY;CACzD,SAAS;EAAE,OAAO;EAAgB,iBAAiB;CAAe;CAClE,SAAS;EAAE,OAAO;EAAgB,iBAAiB;CAAe;CAClE,QAAQ;EAAE,OAAO;EAAe,iBAAiB;CAAc;AACjE,CAAC;AAED,IAAM,UAAU,IAAI,OAAO;CACzB,SAAS;EAAE,OAAO;EAAS,iBAAiB;EAAY,aAAa;CAAU;CAC/E,QAAQ;EAAE,OAAO;EAAe,iBAAiB;EAAe,aAAa;CAAgB;CAC7F,MAAM;EAAE,OAAO;EAAa,iBAAiB;EAAa,aAAa;CAAc;CACrF,SAAS;EACP,OAAO;EACP,iBAAiB;EACjB,aAAa;CACf;CACA,SAAS;EACP,OAAO;EACP,iBAAiB;EACjB,aAAa;CACf;CACA,QAAQ;EAAE,OAAO;EAAe,iBAAiB;EAAe,aAAa;CAAgB;AAC/F,CAAC;AAED,IAAM,UAAU,IAAI,OAAO;CACzB,SAAS;EAAE,OAAO;EAAS,aAAa;CAAU;CAClD,QAAQ;EAAE,OAAO;EAAe,aAAa;CAAgB;CAC7D,MAAM;EAAE,OAAO;EAAa,aAAa;CAAc;CACvD,SAAS;EAAE,OAAO;EAAgB,aAAa;CAAiB;CAChE,SAAS;EAAE,OAAO;EAAgB,aAAa;CAAiB;CAChE,QAAQ;EAAE,OAAO;EAAe,aAAa;CAAgB;AAC/D,CAAC;;AAGD,IAAa,yBAAyB,IAAI,OAAO,EAE/C,UAAU;CAAE,aAAa;CAAO,aAAa;CAAS,aAAa;AAAc,EACnF,CAAC;;AAGD,IAAa,mBAA4E;CACvF;CACA;CACA;CACA;AACF;;AAGA,IAAa,cAAsD;CACjE,SAAS;CACT,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;AACV;;AAGA,SAAgB,aAAa,SAAwB,MAA4B;CAC/E,OAAO,CAAC,uBAAuB,UAAU,iBAAiB,QAAQ,CAAC,KAAK;AAC1E;;;;;;;AAQA,IAAa,iBAAiB,IAAI,OAAO;CACvC,SAAS;EAAE,eAAe;EAA0B,kBAAkB;CAAsB;CAC5F,QAAQ;EAAE,eAAe;EAAkB,kBAAkB;CAAyB;CACtF,MAAM;EAAE,eAAe;EAAoB,kBAAkB;CAAqB;CAClF,SAAS;EAAE,eAAe;EAAuB,kBAAkB;CAAqB;CACxF,SAAS;EAAE,eAAe;EAAuB,kBAAkB;CAAqB;CACxF,QAAQ;EAAE,eAAe;EAAsB,kBAAkB;CAAqB;AACxF,CAAC"}

package/dist/utils/style/transitions.d.ts

@@ -8,7 +8,7 @@
  * 离场过渡依赖 CSS 的 overlay，目前只有 Chromium 支持；Firefox、Safari 关闭后立即隐藏（三大浏览器实测），
  * 进场过渡各浏览器都有。属于渐进增强：不支持时少了离场动画，状态不受影响。
  */
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 /** 顶层元素的进出场过渡：fade 淡入淡出、scale 缩放加淡入、backdrop 模态遮罩的淡入 */
 export declare const transitions: Readonly<{
     backdrop: css.CompiledStyles;

package/dist/utils/style/transitions.js

@@ -1,5 +1,5 @@
 import { t } from "../../config/theme/tokens.js";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/utils/style/transitions.ts
 /**
 * 顶层元素（原生 popover、模态 dialog）的进出场过渡，纯 CSS：