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

package/dist/feedback/Empty.js.map

@@ -1 +1 @@
-{"version":3,"file":"Empty.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","Text","_mergeProps","_vue_unref"],"sources":["../../src/feedback/Empty.tsx"],"sourcesContent":["/**\n * 空状态：列表、表格、搜索结果、下拉选项没有内容时的说明。图标 + 标题 + 说明 + 操作，居中排列。\n *\n *   <Empty title=\"还没有订单\" description=\"下单后会显示在这里。\" action={<Button>去逛逛</Button>} />\n *   <Empty icon={SearchX} title=\"没有找到“{keyword}”\" size=\"sm\" />\n *\n * 只是展示，不带角色；搜索后才出现的空结果，由所在的列表或区域决定要不要用 aria-live 播报。\n * 部件：Root（div）、Icon、Title（Text）、Description（Paragraph）、Action（div）。\n */\nimport { Inbox } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { Paragraph, Text, type TextProps } from '../base/Text';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** Empty 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface EmptyOptions {\n  /** 字号档位，内部尺寸随之缩放；放在下拉框、小卡片里用 sm。不写时继承上下文字号 */\n  size?: TextSize;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */\nexport interface EmptyProps extends PartProps<'div', 'title'>, EmptyOptions {\n  /** 图标，默认 Lucide 的 Inbox；false 不显示 */\n  icon?: IconData | false;\n  /** 标题 */\n  title?: VNodeChild;\n  /** 说明 */\n  description?: VNodeChild;\n  /** 操作（如“新建”按钮） */\n  action?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 标题的部件属性 */\n  propsTitle?: Partial<TextProps>;\n  /** 说明的部件属性 */\n  propsDescription?: Partial<TextProps>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 标题与说明之外的内容 */\n  children?: VNodeChild;\n}\n\n/** 空状态的配方：各部件的布局与颜色；字号档位用共用的 fontSizeStyles 另外叠加 */\nexport const emptyRecipe = css.recipe({\n  name: 'Empty',\n  parts: ['root', 'icon', 'title', 'description', 'action'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      gap: '_sm',\n      paddingBlock: '_xl',\n      paddingInline: '_lg',\n      textAlign: 'center',\n      color: '_text',\n    },\n    icon: { width: '2.5em', height: '2.5em', color: '_textMuted', strokeWidth: '_sm' },\n    title: { fontWeight: '_semibold' },\n    description: { maxWidth: '32em', color: '_textMuted' },\n    action: { marginBlockStart: '_sm' },\n  },\n});\n\n/** 空状态的部件（createUi / Provider 的 styles.Empty 按它定制） */\nexport type EmptyPart = (typeof emptyRecipe.parts)[number];\n\n/** 空状态：图标、标题、说明、操作，居中排列 */\nexport const Empty = _component(\n  ({\n    icon,\n    title,\n    description,\n    action,\n    size,\n    propsIcon,\n    propsTitle,\n    propsDescription,\n    propsAction,\n    children,\n    ...rest\n  }: EmptyProps) => {\n    const appearance = useDefaults('Empty', () => ({ size }));\n    const recipe = useRecipe(emptyRecipe);\n    return () => {\n      const textSize = appearance().size;\n      const s = recipe();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { ...s.root, sx: [s.root.sx, textSize && fontSizeStyles[textSize]] },\n            rest,\n          )}\n        >\n          {icon !== false && (\n            <Icon {...mergePartProps<IconProps>({ ...s.icon, icon: icon ?? Inbox }, propsIcon)} />\n          )}\n          {hasContent(title) && (\n            <Text {...mergePartProps<TextProps>(s.title, propsTitle)}>{title}</Text>\n          )}\n          {hasContent(description) && (\n            <Paragraph {...mergePartProps<TextProps>(s.description, propsDescription)}>\n              {description}\n            </Paragraph>\n          )}\n          {children}\n          {hasContent(action) && <div {...mergeAttrs<'div'>(s.action, propsAction)}>{action}</div>}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;CACN,OAAO;EAAC;EAAQ;EAAQ;EAAS;EAAe;CAAQ;CACxD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,YAAY;GACZ,KAAK;GACL,cAAc;GACd,eAAe;GACf,WAAW;GACX,OAAO;EACT;EACA,MAAM;GAAE,OAAO;GAAS,QAAQ;GAAS,OAAO;GAAc,aAAa;EAAM;EACjF,OAAO,EAAE,YAAY,YAAY;EACjC,aAAa;GAAE,UAAU;GAAQ,OAAO;EAAa;EACrD,QAAQ,EAAE,kBAAkB,MAAM;CACpC;AACF,CAAC;;;AAMD,IAAa,QAAQ,0BACnB,QAAA,SAYkB;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,mBAAAA,aAAA,QAAA,kBAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MADb,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,aAAa,YAAY,gBAAgB,EAAE,MAAI,KAAA,MAAC,EAAE;CACxD,MAAM,SAAS,UAAU,WAAW;CACpC,aAAa;EACX,MAAM,WAAW,WAAW,CAAC,CAAC;EAC9B,MAAM,IAAI,OAAO;EACjB,OAAAC,YAAA,OAEQ,WACF;GAAE,GAAG,EAAE;GAAM,IAAI,CAAC,EAAE,KAAK,IAAI,YAAY,eAAe,SAAS;EAAE,GACnE,IACF,GAAC;GAEA,KAAA,UAAS,SAAKA,YAAA,MACH,eAA0B;IAAE,GAAG,EAAE;IAAM,MAAM,KAAA,SAAQ;GAAM,GAAC,UAAA,KAAW,GAAC,IAAA;GAEnF,WAAU,MAAA,KAAM,KAACA,YAAAC,QAAAC,cACN,eAA0B,EAAE,OAAK,WAAA,KAAY,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAAAC,MAAA,KAAA,CAAA;IAAA,SAAA;GAAA,CAAA;GAEzD,WAAU,YAAA,KAAY,KAACH,YAAA,WAAAE,cACP,eAA0B,EAAE,aAAW,iBAAA,KAAkB,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAAAC,MAAA,WAAA,CAAA;IAAA,SAAA;GAAA,CAAA;GAG1E,SAAA;GAEA,WAAU,OAAA,KAAO,KAACH,YAAA,OAAa,WAAkB,EAAE,QAAM,YAAA,KAAa,GAAC,CAAA,OAAA,KAAA,CAAA;EAAgB,CAAA;CAG9F;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"Empty.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","Text","_mergeProps","_vue_unref"],"sources":["../../src/feedback/Empty.tsx"],"sourcesContent":["/**\n * 空状态：列表、表格、搜索结果、下拉选项没有内容时的说明。图标 + 标题 + 说明 + 操作，居中排列。\n *\n *   <Empty title=\"还没有订单\" description=\"下单后会显示在这里。\" action={<Button>去逛逛</Button>} />\n *   <Empty icon={SearchX} title=\"没有找到“{keyword}”\" size=\"sm\" />\n *\n * 只是展示，不带角色；搜索后才出现的空结果，由所在的列表或区域决定要不要用 aria-live 播报。\n * 部件：Root（div）、Icon、Title（Text）、Description（Paragraph）、Action（div）。\n */\nimport { Inbox } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { Paragraph, Text, type TextProps } from '../base/Text';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** Empty 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface EmptyOptions {\n  /** 字号档位，内部尺寸随之缩放；放在下拉框、小卡片里用 sm。不写时继承上下文字号 */\n  size?: TextSize;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */\nexport interface EmptyProps extends PartProps<'div', 'title'>, EmptyOptions {\n  /** 图标，默认 Lucide 的 Inbox；false 不显示 */\n  icon?: IconData | false;\n  /** 标题 */\n  title?: VNodeChild;\n  /** 说明 */\n  description?: VNodeChild;\n  /** 操作（如“新建”按钮） */\n  action?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 标题的部件属性 */\n  propsTitle?: Partial<TextProps>;\n  /** 说明的部件属性 */\n  propsDescription?: Partial<TextProps>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 标题与说明之外的内容 */\n  children?: VNodeChild;\n}\n\n/** 空状态的配方：各部件的布局与颜色；字号档位用共用的 fontSizeStyles 另外叠加 */\nexport const emptyRecipe = css.recipe({\n  name: 'Empty',\n  parts: ['root', 'icon', 'title', 'description', 'action'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      gap: '_sm',\n      paddingBlock: '_xl',\n      paddingInline: '_lg',\n      textAlign: 'center',\n      color: '_text',\n    },\n    icon: { width: '2.5em', height: '2.5em', color: '_textMuted', strokeWidth: '_sm' },\n    title: { fontWeight: '_semibold' },\n    description: { maxWidth: '32em', color: '_textMuted' },\n    action: { marginBlockStart: '_sm' },\n  },\n});\n\n/** 空状态的部件（createUi / Provider 的 styles.Empty 按它定制） */\nexport type EmptyPart = (typeof emptyRecipe.parts)[number];\n\n/** 空状态：图标、标题、说明、操作，居中排列 */\nexport const Empty = _component(\n  ({\n    icon,\n    title,\n    description,\n    action,\n    size,\n    propsIcon,\n    propsTitle,\n    propsDescription,\n    propsAction,\n    children,\n    ...rest\n  }: EmptyProps) => {\n    const appearance = useDefaults('Empty', () => ({ size }));\n    const recipe = useRecipe(emptyRecipe);\n    return () => {\n      const textSize = appearance().size;\n      const s = recipe();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { ...s.root, sx: [s.root.sx, textSize && fontSizeStyles[textSize]] },\n            rest,\n          )}\n        >\n          {icon !== false && (\n            <Icon {...mergePartProps<IconProps>({ ...s.icon, icon: icon ?? Inbox }, propsIcon)} />\n          )}\n          {hasContent(title) && (\n            <Text {...mergePartProps<TextProps>(s.title, propsTitle)}>{title}</Text>\n          )}\n          {hasContent(description) && (\n            <Paragraph {...mergePartProps<TextProps>(s.description, propsDescription)}>\n              {description}\n            </Paragraph>\n          )}\n          {children}\n          {hasContent(action) && <div {...mergeAttrs<'div'>(s.action, propsAction)}>{action}</div>}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;CACN,OAAO;EAAC;EAAQ;EAAQ;EAAS;EAAe;CAAQ;CACxD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,YAAY;GACZ,KAAK;GACL,cAAc;GACd,eAAe;GACf,WAAW;GACX,OAAO;EACT;EACA,MAAM;GAAE,OAAO;GAAS,QAAQ;GAAS,OAAO;GAAc,aAAa;EAAM;EACjF,OAAO,EAAE,YAAY,YAAY;EACjC,aAAa;GAAE,UAAU;GAAQ,OAAO;EAAa;EACrD,QAAQ,EAAE,kBAAkB,MAAM;CACpC;AACF,CAAC;;;AAMD,IAAa,QAAQ,0BACnB,QAAA,SAYkB;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,mBAAAA,aAAA,QAAA,kBAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MADb,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,aAAa,YAAY,gBAAgB,EAAE,MAAI,KAAA,MAAC,EAAE;CACxD,MAAM,SAAS,UAAU,WAAW;CACpC,aAAa;EACX,MAAM,WAAW,WAAW,CAAC,CAAC;EAC9B,MAAM,IAAI,OAAO;EACjB,OAAAC,YAAA,OAEQ,WACF;GAAE,GAAG,EAAE;GAAM,IAAI,CAAC,EAAE,KAAK,IAAI,YAAY,eAAe,SAAS;EAAE,GACnE,IACF,GAAC;GAEA,KAAA,UAAS,SAAKA,YAAA,MACH,eAA0B;IAAE,GAAG,EAAE;IAAM,MAAM,KAAA,SAAQ;GAAM,GAAC,UAAA,KAAW,GAAC,IAAA;GAEnF,WAAU,MAAA,KAAM,KAACA,YAAAC,QAAAC,cACN,eAA0B,EAAE,OAAK,WAAA,KAAY,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAAAC,MAAA,KAAA,CAAA;IAAA,SAAA;GAAA,CAAA;GAEzD,WAAU,YAAA,KAAY,KAACH,YAAA,WAAAE,cACP,eAA0B,EAAE,aAAW,iBAAA,KAAkB,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAAAC,MAAA,WAAA,CAAA;IAAA,SAAA;GAAA,CAAA;GAG1E,SAAA;GAEA,WAAU,OAAA,KAAO,KAACH,YAAA,OAAa,WAAkB,EAAE,QAAM,YAAA,KAAa,GAAC,CAAA,OAAA,KAAA,CAAA;EAAgB,CAAA;CAG9F;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/feedback/LoadingBar.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type PartProps } from '../utils/props';
 /** 加载条的状态 */
 export interface LoadingBarState {

package/dist/feedback/LoadingBar.js

@@ -4,7 +4,7 @@ import { mergeAttrs } from "../utils/props.js";
 import { useMounted } from "../utils/dom/mounted.js";
 import { createVNode, shallowReactive } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/feedback/LoadingBar.tsx
 /** 加载条的状态 */
 /** 加载条的控制器 */

package/dist/feedback/LoadingBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingBar.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/LoadingBar.tsx"],"sourcesContent":["/**\n * 页面顶部的加载条：路由切换、整页刷新数据时，窗口最上方一条细线从左往右走（同 NProgress、GitHub 的顶部进度）。\n * 控制器 + 显示（同 Toast），组件内外都能用：\n *\n *   export const loadingBar = createLoadingBar();       // 应用里创建一次\n *   <LoadingBar controller={loadingBar} />               // App 里放一个\n *   loadingBar.start(); await load(); loadingBar.finish();   // 或 useRouteLoadingBar(router, loadingBar)\n *\n * 不知道真实进度：start 后先快后慢地涨，停在 90% 前等 finish；finish 走满后淡出，error 变成危险色走满后淡出。\n * 很快完成的（200ms 内）不显示，免得每次切换都闪一下。加载条只是视觉提示：对读屏是 role=\"progressbar\"\n * 加 aria-busy，真正的“加载中”应当由页面内容区域（aria-busy、骨架）告诉读屏。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { shallowReactive } from 'vue';\nimport { useLang } from '../config/context';\nimport { useMounted } from '../utils/dom/mounted';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 加载条的状态 */\nexport interface LoadingBarState {\n  /** 进度，0–100 */\n  readonly progress: number;\n  /** 是否显示（开始一会儿之后、结束淡出之前） */\n  readonly visible: boolean;\n  /** 出错了：危险色 */\n  readonly failed: boolean;\n}\n\n/** 加载条的控制器 */\nexport interface LoadingBarController extends LoadingBarState {\n  /** 开始（已经在走时重新开始计时） */\n  start(): void;\n  /** 完成：走满后淡出 */\n  finish(): void;\n  /** 出错：变成危险色、走满后淡出 */\n  error(): void;\n}\n\n/** createLoadingBar 的选项 */\nexport interface LoadingBarOptions {\n  /** 多久之后才显示（毫秒），默认 200：很快完成的不显示 */\n  delay?: number;\n}\n\n/** 每次涨多少：离 90% 越近涨得越慢 */\nconst trickle = (progress: number) => (90 - progress) * 0.12 + 0.5;\n\n/** 创建加载条的控制器 */\nexport function createLoadingBar({ delay = 200 }: LoadingBarOptions = {}): LoadingBarController {\n  const state = shallowReactive({ progress: 0, visible: false, failed: false });\n  let timer: ReturnType<typeof setInterval> | undefined;\n  let showTimer: ReturnType<typeof setTimeout> | undefined;\n  let hideTimer: ReturnType<typeof setTimeout> | undefined;\n\n  function stop() {\n    clearInterval(timer);\n    clearTimeout(showTimer);\n    clearTimeout(hideTimer);\n  }\n\n  function end(failed: boolean) {\n    stop();\n    if (!state.visible) {\n      state.progress = 0;\n      return;\n    }\n    state.failed = failed;\n    state.progress = 100;\n    // 走满的过渡结束后淡出，淡出后归零\n    hideTimer = setTimeout(() => {\n      state.visible = false;\n      hideTimer = setTimeout(() => (state.progress = 0), 300);\n    }, 300);\n  }\n\n  return {\n    get progress() {\n      return state.progress;\n    },\n    get visible() {\n      return state.visible;\n    },\n    get failed() {\n      return state.failed;\n    },\n    start() {\n      stop();\n      state.failed = false;\n      state.progress = state.visible ? state.progress : 0;\n      showTimer = setTimeout(() => {\n        state.visible = true;\n        state.progress = Math.max(state.progress, 8);\n      }, delay);\n      timer = setInterval(() => {\n        if (state.visible) state.progress = Math.min(state.progress + trickle(state.progress), 90);\n      }, 300);\n    },\n    finish: () => end(false),\n    error: () => end(true),\n  };\n}\n\n/** 未声明的属性落到加载条的 div 上 */\nexport interface LoadingBarProps extends PartProps<'div', 'role'> {\n  /** createLoadingBar 的控制器 */\n  controller: LoadingBarController;\n}\n\n/** LoadingBar 的样式：root、visible、bar、failed */\nexport const loadingBarStyles = css.create({\n  root: {\n    position: 'fixed',\n    insetInline: 0,\n    insetBlockStart: 0,\n    zIndex: 2000,\n    height: '_borderWidths.md',\n    pointerEvents: 'none',\n    opacity: 0,\n    transition: `opacity ${t.durations.md} ${t.easings.standard}`,\n  },\n  visible: { opacity: 1 },\n  bar: {\n    height: '100%',\n    backgroundColor: { default: '_accent', _forcedColors: 'Highlight' },\n    boxShadow: `0 0 8px ${t.colors.accent}`,\n    transformOrigin: { default: 'left center', ':dir(rtl)': 'right center' },\n    transition: `transform ${t.durations.md} ${t.easings.standard}`,\n  },\n  failed: { backgroundColor: '_danger', boxShadow: 'none' },\n});\n\n/** 进度对应的缩放 */\nexport const loadingBarScaleStyles = css.create({\n  at: (progress: number) => ({ transform: `scaleX(${progress / 100})` }),\n});\n\n/** 加载条：显示控制器的进度 */\nexport const LoadingBar = _component(({ controller, ...rest }: LoadingBarProps) => {\n  const lang = useLang();\n  // 控制器是整个应用共用的：服务端渲染时它没在加载，浏览器里水合时可能正在加载第一页。挂载前按没在加载渲染，两边一致\n  const mounted = useMounted();\n  return () => {\n    const visible = mounted.value && controller.visible;\n    const progress = mounted.value ? controller.progress : 0;\n    const failed = mounted.value && controller.failed;\n    return (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [loadingBarStyles.root, visible && loadingBarStyles.visible],\n            'aria-label': lang.loading,\n          },\n          rest,\n          {\n            role: 'progressbar',\n            'aria-valuemin': 0,\n            'aria-valuemax': 100,\n            'aria-valuenow': Math.round(progress),\n            'aria-busy': visible && progress < 100,\n            'aria-hidden': visible ? undefined : true,\n          },\n        )}\n        data-state={failed ? 'error' : visible ? 'loading' : 'idle'}\n      >\n        <div\n          {...css.attrs(\n            loadingBarStyles.bar,\n            failed && loadingBarStyles.failed,\n            loadingBarScaleStyles.at(progress),\n          )}\n        />\n      </div>\n    );\n  };\n});\n"],"mappings":";;;;;;;;;;;;AA+CA,IAAM,WAAW,cAAsB,KAAK,YAAY,MAAO;;AAG/D,SAAgB,iBAAiB,EAAE,QAAQ,QAA2B,CAAC,GAAyB;CAC9F,MAAM,QAAQ,gBAAgB;EAAE,UAAU;EAAG,SAAS;EAAO,QAAQ;CAAM,CAAC;CAC5E,IAAI;CACJ,IAAI;CACJ,IAAI;CAEJ,SAAS,OAAO;EACd,cAAc,KAAK;EACnB,aAAa,SAAS;EACtB,aAAa,SAAS;CACxB;CAEA,SAAS,IAAI,QAAiB;EAC5B,KAAK;EACL,IAAI,CAAC,MAAM,SAAS;GAClB,MAAM,WAAW;GACjB;EACF;EACA,MAAM,SAAS;EACf,MAAM,WAAW;EAEjB,YAAY,iBAAiB;GAC3B,MAAM,UAAU;GAChB,YAAY,iBAAkB,MAAM,WAAW,GAAI,GAAG;EACxD,GAAG,GAAG;CACR;CAEA,OAAO;EACL,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,IAAI,UAAU;GACZ,OAAO,MAAM;EACf;EACA,IAAI,SAAS;GACX,OAAO,MAAM;EACf;EACA,QAAQ;GACN,KAAK;GACL,MAAM,SAAS;GACf,MAAM,WAAW,MAAM,UAAU,MAAM,WAAW;GAClD,YAAY,iBAAiB;IAC3B,MAAM,UAAU;IAChB,MAAM,WAAW,KAAK,IAAI,MAAM,UAAU,CAAC;GAC7C,GAAG,KAAK;GACR,QAAQ,kBAAkB;IACxB,IAAI,MAAM,SAAS,MAAM,WAAW,KAAK,IAAI,MAAM,WAAW,QAAQ,MAAM,QAAQ,GAAG,EAAE;GAC3F,GAAG,GAAG;EACR;EACA,cAAc,IAAI,KAAK;EACvB,aAAa,IAAI,IAAI;CACvB;AACF;;;AASA,IAAa,mBAAmB,IAAI,OAAO;CACzC,MAAM;EACJ,UAAU;EACV,aAAa;EACb,iBAAiB;EACjB,QAAQ;EACR,QAAQ;EACR,eAAe;EACf,SAAS;EACT,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACrD;CACA,SAAS,EAAE,SAAS,EAAE;CACtB,KAAK;EACH,QAAQ;EACR,iBAAiB;GAAE,SAAS;GAAW,eAAe;EAAY;EAClE,WAAW,WAAW,EAAE,OAAO;EAC/B,iBAAiB;GAAE,SAAS;GAAe,aAAa;EAAe;EACvE,YAAY,aAAa,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACvD;CACA,QAAQ;EAAE,iBAAiB;EAAW,WAAW;CAAO;AAC1D,CAAC;;AAGD,IAAa,wBAAwB,IAAI,OAAO,EAC9C,KAAK,cAAsB,EAAE,WAAW,UAAU,WAAW,IAAG,GAAI,GACtE,CAAC;;AAGD,IAAa,aAAa,0BAAW,QAAA,SAA8C;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAA5B,OAAIC,UAAA,QAAA,MAAA,IAAA;CACzD,MAAM,OAAO,QAAQ;CAErB,MAAM,UAAU,WAAW;CAC3B,aAAa;EACX,MAAM,UAAU,QAAQ,SAAS,WAAA,MAAW;EAC5C,MAAM,WAAW,QAAQ,QAAQ,WAAA,MAAW,WAAW;EACvD,MAAM,SAAS,QAAQ,SAAS,WAAA,MAAW;EAC3C,OAAAC,YAAA,OAAAC,cAEQ,WACF;GACE,IAAI,CAAC,iBAAiB,MAAM,WAAW,iBAAiB,OAAO;GAC/D,cAAc,KAAK;EACrB,GACA,MACA;GACE,MAAM;GACN,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB,KAAK,MAAM,QAAQ;GACpC,aAAa,WAAW,WAAW;GACnC,eAAe,UAAU,KAAA,IAAY;EACvC,CACF,GAAC,EAAA,cACW,SAAS,UAAU,UAAU,YAAY,OAAM,CAAA,GAAA,CAAAD,YAAA,OAGrD,IAAI,MACN,iBAAiB,KACjB,UAAU,iBAAiB,QAAM,IAAA,KACjC,sBAAsB,UAAE,CAAC,QAAQ,CAAA,CACnC,GAAC,IAAA,CAAA,CAAA;CAIT;AACF,GAAC;CAAA,MAAA;CAAA,OAAA,CAAA,YAAA;AAAA,CAAA"}
+{"version":3,"file":"LoadingBar.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/LoadingBar.tsx"],"sourcesContent":["/**\n * 页面顶部的加载条：路由切换、整页刷新数据时，窗口最上方一条细线从左往右走（同 NProgress、GitHub 的顶部进度）。\n * 控制器 + 显示（同 Toast），组件内外都能用：\n *\n *   export const loadingBar = createLoadingBar();       // 应用里创建一次\n *   <LoadingBar controller={loadingBar} />               // App 里放一个\n *   loadingBar.start(); await load(); loadingBar.finish();   // 或 useRouteLoadingBar(router, loadingBar)\n *\n * 不知道真实进度：start 后先快后慢地涨，停在 90% 前等 finish；finish 走满后淡出，error 变成危险色走满后淡出。\n * 很快完成的（200ms 内）不显示，免得每次切换都闪一下。加载条只是视觉提示：对读屏是 role=\"progressbar\"\n * 加 aria-busy，真正的“加载中”应当由页面内容区域（aria-busy、骨架）告诉读屏。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { shallowReactive } from 'vue';\nimport { useLang } from '../config/context';\nimport { useMounted } from '../utils/dom/mounted';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 加载条的状态 */\nexport interface LoadingBarState {\n  /** 进度，0–100 */\n  readonly progress: number;\n  /** 是否显示（开始一会儿之后、结束淡出之前） */\n  readonly visible: boolean;\n  /** 出错了：危险色 */\n  readonly failed: boolean;\n}\n\n/** 加载条的控制器 */\nexport interface LoadingBarController extends LoadingBarState {\n  /** 开始（已经在走时重新开始计时） */\n  start(): void;\n  /** 完成：走满后淡出 */\n  finish(): void;\n  /** 出错：变成危险色、走满后淡出 */\n  error(): void;\n}\n\n/** createLoadingBar 的选项 */\nexport interface LoadingBarOptions {\n  /** 多久之后才显示（毫秒），默认 200：很快完成的不显示 */\n  delay?: number;\n}\n\n/** 每次涨多少：离 90% 越近涨得越慢 */\nconst trickle = (progress: number) => (90 - progress) * 0.12 + 0.5;\n\n/** 创建加载条的控制器 */\nexport function createLoadingBar({ delay = 200 }: LoadingBarOptions = {}): LoadingBarController {\n  const state = shallowReactive({ progress: 0, visible: false, failed: false });\n  let timer: ReturnType<typeof setInterval> | undefined;\n  let showTimer: ReturnType<typeof setTimeout> | undefined;\n  let hideTimer: ReturnType<typeof setTimeout> | undefined;\n\n  function stop() {\n    clearInterval(timer);\n    clearTimeout(showTimer);\n    clearTimeout(hideTimer);\n  }\n\n  function end(failed: boolean) {\n    stop();\n    if (!state.visible) {\n      state.progress = 0;\n      return;\n    }\n    state.failed = failed;\n    state.progress = 100;\n    // 走满的过渡结束后淡出，淡出后归零\n    hideTimer = setTimeout(() => {\n      state.visible = false;\n      hideTimer = setTimeout(() => (state.progress = 0), 300);\n    }, 300);\n  }\n\n  return {\n    get progress() {\n      return state.progress;\n    },\n    get visible() {\n      return state.visible;\n    },\n    get failed() {\n      return state.failed;\n    },\n    start() {\n      stop();\n      state.failed = false;\n      state.progress = state.visible ? state.progress : 0;\n      showTimer = setTimeout(() => {\n        state.visible = true;\n        state.progress = Math.max(state.progress, 8);\n      }, delay);\n      timer = setInterval(() => {\n        if (state.visible) state.progress = Math.min(state.progress + trickle(state.progress), 90);\n      }, 300);\n    },\n    finish: () => end(false),\n    error: () => end(true),\n  };\n}\n\n/** 未声明的属性落到加载条的 div 上 */\nexport interface LoadingBarProps extends PartProps<'div', 'role'> {\n  /** createLoadingBar 的控制器 */\n  controller: LoadingBarController;\n}\n\n/** LoadingBar 的样式：root、visible、bar、failed */\nexport const loadingBarStyles = css.create({\n  root: {\n    position: 'fixed',\n    insetInline: 0,\n    insetBlockStart: 0,\n    zIndex: 2000,\n    height: '_borderWidths.md',\n    pointerEvents: 'none',\n    opacity: 0,\n    transition: `opacity ${t.durations.md} ${t.easings.standard}`,\n  },\n  visible: { opacity: 1 },\n  bar: {\n    height: '100%',\n    backgroundColor: { default: '_accent', _forcedColors: 'Highlight' },\n    boxShadow: `0 0 8px ${t.colors.accent}`,\n    transformOrigin: { default: 'left center', ':dir(rtl)': 'right center' },\n    transition: `transform ${t.durations.md} ${t.easings.standard}`,\n  },\n  failed: { backgroundColor: '_danger', boxShadow: 'none' },\n});\n\n/** 进度对应的缩放 */\nexport const loadingBarScaleStyles = css.create({\n  at: (progress: number) => ({ transform: `scaleX(${progress / 100})` }),\n});\n\n/** 加载条：显示控制器的进度 */\nexport const LoadingBar = _component(({ controller, ...rest }: LoadingBarProps) => {\n  const lang = useLang();\n  // 控制器是整个应用共用的：服务端渲染时它没在加载，浏览器里水合时可能正在加载第一页。挂载前按没在加载渲染，两边一致\n  const mounted = useMounted();\n  return () => {\n    const visible = mounted.value && controller.visible;\n    const progress = mounted.value ? controller.progress : 0;\n    const failed = mounted.value && controller.failed;\n    return (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [loadingBarStyles.root, visible && loadingBarStyles.visible],\n            'aria-label': lang.loading,\n          },\n          rest,\n          {\n            role: 'progressbar',\n            'aria-valuemin': 0,\n            'aria-valuemax': 100,\n            'aria-valuenow': Math.round(progress),\n            'aria-busy': visible && progress < 100,\n            'aria-hidden': visible ? undefined : true,\n          },\n        )}\n        data-state={failed ? 'error' : visible ? 'loading' : 'idle'}\n      >\n        <div\n          {...css.attrs(\n            loadingBarStyles.bar,\n            failed && loadingBarStyles.failed,\n            loadingBarScaleStyles.at(progress),\n          )}\n        />\n      </div>\n    );\n  };\n});\n"],"mappings":"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"}

package/dist/feedback/LoadingOverlay.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type SpinnerProps } from '../base/Spinner';
 import { type PartProps } from '../utils/props';

package/dist/feedback/LoadingOverlay.js

@@ -7,7 +7,7 @@ import { presenceStyles } from "../utils/style/transitions.js";
 import { usePresence } from "../utils/motion/presence.js";
 import { createVNode } from "vue";
 import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/feedback/LoadingOverlay.tsx
 /** 忙碌由组件按 loading 管理 */
 /** 未声明的属性落到外层 div 上 */

package/dist/feedback/LoadingOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingOverlay.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/LoadingOverlay.tsx"],"sourcesContent":["/**\n * 加载遮罩（div）：盖住一块区域（卡片、表单、图表），内容保留在下面，中间显示加载指示。\n *\n *   <LoadingOverlay loading={saving}>\n *     <Form controller={form}>…</Form>\n *   </LoadingOverlay>\n *\n * 外层带 aria-busy；遮罩防闪烁（useDelayedLoading：很快完成时不出现，出现后至少显示一会儿），淡入淡出（usePresence）。\n * 遮罩挡住指针操作；键盘仍可操作下面的内容，需要禁止时由内容自己处理（如表单的 disabled）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Spinner, type SpinnerProps } from '../base/Spinner';\nimport { useLang } from '../config/context';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { usePresence } from '../utils/motion/presence';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { presenceStyles } from '../utils/style/transitions';\nimport { t } from '../config/theme/tokens';\n\n/** 忙碌由组件按 loading 管理 */\nexport type LoadingOverlayManaged = 'aria-busy';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface LoadingOverlayProps extends PartProps<'div', LoadingOverlayManaged> {\n  /** 加载中：盖上遮罩 */\n  loading?: boolean;\n  /** 读屏念的说明，默认取语言包（加载中） */\n  label?: string;\n  /** 遮罩下的内容模糊 */\n  blur?: boolean;\n  /** 遮罩的部件属性 */\n  propsOverlay?: PartProps<'div'>;\n  /** 加载指示的部件属性 */\n  propsSpinner?: Partial<SpinnerProps>;\n  children?: VNodeChild;\n}\n\n/** LoadingOverlay 的样式：root、overlay、blur、spinner */\nexport const loadingOverlayStyles = css.create({\n  // 遮罩按外层定位\n  root: { position: 'relative' },\n  overlay: {\n    position: 'absolute',\n    inset: 0,\n    zIndex: 1,\n    display: 'grid',\n    placeItems: 'center',\n    borderRadius: 'inherit',\n    backgroundColor: `color-mix(in srgb, ${t.colors.surface} 70%, transparent)`,\n    opacity: { default: 1, '@starting-style': 0 },\n    transition: `opacity ${t.durations.md} ${t.easings.enter}`,\n  },\n  blur: { backdropFilter: 'blur(2px)' },\n  spinner: { fontSize: '_xl', color: '_accent' },\n});\n\n/** 加载遮罩：盖住内容，显示加载指示 */\nexport const LoadingOverlay = _component(\n  ({\n    loading = false,\n    label,\n    blur = false,\n    propsOverlay,\n    propsSpinner,\n    children,\n    ...rest\n  }: LoadingOverlayProps) => {\n    const lang = useLang();\n    const shown = useDelayedLoading(() => loading);\n    const presence = usePresence(() => shown.value);\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({ sx: loadingOverlayStyles.root }, rest, {\n          'aria-busy': loading || undefined,\n        })}\n      >\n        {children}\n        {presence.mounted && (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  loadingOverlayStyles.overlay,\n                  blur && loadingOverlayStyles.blur,\n                  presence.state === 'closed' && presenceStyles.leaving,\n                ],\n              },\n              propsOverlay,\n              { ref: presence.ref },\n            )}\n            data-state={presence.state}\n          >\n            <Spinner\n              {...mergePartProps<SpinnerProps>(\n                { sx: loadingOverlayStyles.spinner, label: label ?? lang.loading },\n                propsSpinner,\n              )}\n            />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AAwCA,IAAa,uBAAuB,IAAI,OAAO;CAE7C,MAAM,EAAE,UAAU,WAAW;CAC7B,SAAS;EACP,UAAU;EACV,OAAO;EACP,QAAQ;EACR,SAAS;EACT,YAAY;EACZ,cAAc;EACd,iBAAiB,sBAAsB,EAAE,OAAO,QAAO;EACvD,SAAS;GAAE,SAAS;GAAG,mBAAmB;EAAE;EAC5C,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACrD;CACA,MAAM,EAAE,gBAAgB,YAAY;CACpC,SAAS;EAAE,UAAU;EAAO,OAAO;CAAU;AAC/C,CAAC;;AAGD,IAAa,iBAAiB,0BAC5B,QAAA,SAQ2B;CAAA,MAAA,UAAAA,aAAA,QAAA,WAPf,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAER,KAAK;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAIT,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,wBAAkB,QAAA,KAAa;CAC7C,MAAM,WAAW,kBAAkB,MAAM,KAAK;CAE9C,aAAOC,YAAA,OAEC,WAAkB,EAAE,IAAI,qBAAqB,KAAK,GAAG,MAAM,EAC7D,aAAa,QAAA,SAAW,KAAA,EAC1B,CAAC,GAAC,CAAA,SAAA,OAGD,SAAS,WAAOA,YAAA,OAAAC,cAET,WACF,EACE,IAAI;EACF,qBAAqB;EACrB,KAAA,SAAQ,qBAAqB;EAC7B,SAAS,UAAU,YAAY,eAAe;CAAO,EAEzD,GAAC,aAAA,OAED,EAAE,KAAK,SAAS,IAAI,CACtB,GAAC,EAAA,cACW,SAAS,MAAK,CAAA,GAAA,CAAAD,YAAA,SAGpB,eACF;EAAE,IAAI,qBAAqB;EAAS,OAAO,MAAA,SAAS,KAAK;CAAQ,GAAC,aAAA,KAEpE,GAAC,IAAA,CAAA,CAAA,CAGN,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"LoadingOverlay.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/LoadingOverlay.tsx"],"sourcesContent":["/**\n * 加载遮罩（div）：盖住一块区域（卡片、表单、图表），内容保留在下面，中间显示加载指示。\n *\n *   <LoadingOverlay loading={saving}>\n *     <Form controller={form}>…</Form>\n *   </LoadingOverlay>\n *\n * 外层带 aria-busy；遮罩防闪烁（useDelayedLoading：很快完成时不出现，出现后至少显示一会儿），淡入淡出（usePresence）。\n * 遮罩挡住指针操作；键盘仍可操作下面的内容，需要禁止时由内容自己处理（如表单的 disabled）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Spinner, type SpinnerProps } from '../base/Spinner';\nimport { useLang } from '../config/context';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { usePresence } from '../utils/motion/presence';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { presenceStyles } from '../utils/style/transitions';\nimport { t } from '../config/theme/tokens';\n\n/** 忙碌由组件按 loading 管理 */\nexport type LoadingOverlayManaged = 'aria-busy';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface LoadingOverlayProps extends PartProps<'div', LoadingOverlayManaged> {\n  /** 加载中：盖上遮罩 */\n  loading?: boolean;\n  /** 读屏念的说明，默认取语言包（加载中） */\n  label?: string;\n  /** 遮罩下的内容模糊 */\n  blur?: boolean;\n  /** 遮罩的部件属性 */\n  propsOverlay?: PartProps<'div'>;\n  /** 加载指示的部件属性 */\n  propsSpinner?: Partial<SpinnerProps>;\n  children?: VNodeChild;\n}\n\n/** LoadingOverlay 的样式：root、overlay、blur、spinner */\nexport const loadingOverlayStyles = css.create({\n  // 遮罩按外层定位\n  root: { position: 'relative' },\n  overlay: {\n    position: 'absolute',\n    inset: 0,\n    zIndex: 1,\n    display: 'grid',\n    placeItems: 'center',\n    borderRadius: 'inherit',\n    backgroundColor: `color-mix(in srgb, ${t.colors.surface} 70%, transparent)`,\n    opacity: { default: 1, '@starting-style': 0 },\n    transition: `opacity ${t.durations.md} ${t.easings.enter}`,\n  },\n  blur: { backdropFilter: 'blur(2px)' },\n  spinner: { fontSize: '_xl', color: '_accent' },\n});\n\n/** 加载遮罩：盖住内容，显示加载指示 */\nexport const LoadingOverlay = _component(\n  ({\n    loading = false,\n    label,\n    blur = false,\n    propsOverlay,\n    propsSpinner,\n    children,\n    ...rest\n  }: LoadingOverlayProps) => {\n    const lang = useLang();\n    const shown = useDelayedLoading(() => loading);\n    const presence = usePresence(() => shown.value);\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({ sx: loadingOverlayStyles.root }, rest, {\n          'aria-busy': loading || undefined,\n        })}\n      >\n        {children}\n        {presence.mounted && (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  loadingOverlayStyles.overlay,\n                  blur && loadingOverlayStyles.blur,\n                  presence.state === 'closed' && presenceStyles.leaving,\n                ],\n              },\n              propsOverlay,\n              { ref: presence.ref },\n            )}\n            data-state={presence.state}\n          >\n            <Spinner\n              {...mergePartProps<SpinnerProps>(\n                { sx: loadingOverlayStyles.spinner, label: label ?? lang.loading },\n                propsSpinner,\n              )}\n            />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AAwCA,IAAa,uBAAuB,IAAI,OAAO;CAE7C,MAAM,EAAE,UAAU,WAAW;CAC7B,SAAS;EACP,UAAU;EACV,OAAO;EACP,QAAQ;EACR,SAAS;EACT,YAAY;EACZ,cAAc;EACd,iBAAiB,sBAAsB,EAAE,OAAO,QAAO;EACvD,SAAS;GAAE,SAAS;GAAG,mBAAmB;EAAE;EAC5C,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACrD;CACA,MAAM,EAAE,gBAAgB,YAAY;CACpC,SAAS;EAAE,UAAU;EAAO,OAAO;CAAU;AAC/C,CAAC;;AAGD,IAAa,iBAAiB,0BAC5B,QAAA,SAQ2B;CAAA,MAAA,UAAAA,aAAA,QAAA,WAPf,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAER,KAAK;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAIT,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,wBAAkB,QAAA,KAAa;CAC7C,MAAM,WAAW,kBAAkB,MAAM,KAAK;CAE9C,aAAOC,YAAA,OAEC,WAAkB,EAAE,IAAI,qBAAqB,KAAK,GAAG,MAAM,EAC7D,aAAa,QAAA,SAAW,KAAA,EAC1B,CAAC,GAAC,CAAA,SAAA,OAGD,SAAS,WAAOA,YAAA,OAAAC,cAET,WACF,EACE,IAAI;EACF,qBAAqB;EACrB,KAAA,SAAQ,qBAAqB;EAC7B,SAAS,UAAU,YAAY,eAAe;CAAO,EAEzD,GAAC,aAAA,OAED,EAAE,KAAK,SAAS,IAAI,CACtB,GAAC,EAAA,cACW,SAAS,MAAK,CAAA,GAAA,CAAAD,YAAA,SAGpB,eACF;EAAE,IAAI,qBAAqB;EAAS,OAAO,MAAA,SAAS,KAAK;CAAQ,GAAC,aAAA,KAEpE,GAAC,IAAA,CAAA,CAAA,CAGN,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/feedback/Progress.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type VNodeChild } from 'vue';
 import { type TextProps } from '../base/Text';
 import { type PartProps } from '../utils/props';

package/dist/feedback/Progress.js

@@ -11,7 +11,7 @@ import { Text as Text$1 } from "../base/Text.js";
 import { useFormat } from "../config/lang/format.js";
 import { createVNode, isVNode, unref, useId } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/feedback/Progress.tsx
 /** 角色与取值由组件管理 */
 /** 进度的形状 */

package/dist/feedback/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","Text","_vue_unref"],"sources":["../../src/feedback/Progress.tsx"],"sourcesContent":["/**\n * 进度（role=\"progressbar\"）：条形（默认）或环形。有 value 时显示完成比例；没有 value（null / undefined）时是不确定进度，循环动画。\n * 名称写 label（条形显示在上方、环形显示在下方）或 aria-label / aria-labelledby（读屏要知道是什么的进度）。\n * 条形有 label 时右侧默认显示数值，环形中间显示数值（按语言格式化的百分比，valueLabel 可以换成自己的文字），参考 React Spectrum ProgressBar。\n * target 是目标值：条上画一条竖线、环上画一道刻度，读屏念成“60%，目标 80%”。\n *\n *   <Progress value={uploaded} max={total} label=\"上传\" valueLabel={`${uploaded} / ${total}`} />\n *   <Progress value={60} aria-label=\"上传进度\" />  只有进度条\n *   <Progress aria-label=\"正在加载\" />               不确定进度\n *   <Progress shape=\"circle\" value={72} target={80} label=\"本月销售完成率\" />\n *\n * 部件：有标签行时外层是 Root（propsRoot），里面是 Label、ValueLabel 与进度条；没有时进度条就是根元素。\n * 环形：根元素是 progressbar，里面是 SVG（轨道、进度、目标刻度）与中间的 ValueLabel；有 label 时外层是 Root，标签在下方。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { Text, type TextProps } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { useFormat } from '../config/lang/format';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { clamp, svgNumber } from '../utils/data/number';\nimport { compareNumeric, toNumber, type NumericValue } from '../utils/data/numeric';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { fontSizeStyles, relativeFontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { radiusStyles, type Radius } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 角色与取值由组件管理 */\nexport type ProgressManaged =\n  'role' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuenow' | 'aria-valuetext';\n\n/** 进度的形状 */\nexport interface ProgressShapes {\n  /** 条形（默认）：占满一行 */\n  bar: unknown;\n  /** 环形：中间显示数值，适合仪表盘、卡片里的完成率；直径随字号缩放 */\n  circle: unknown;\n}\n\n/** Progress 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface ProgressOptions {\n  /** 色调（与 Badge、Alert 等同一套），默认 accent */\n  tone?: StatusTone;\n  /** 字号档位：进度条的粗细随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 圆角，默认 full */\n  radius?: Radius;\n}\n\n/** 未声明的属性落到轨道（role=\"progressbar\" 的主元素）上 */\nexport interface ProgressProps extends PartProps<'div', ProgressManaged>, ProgressOptions {\n  /** 当前值：number、bigint 或 Decimal；不写（或 null）时为不确定进度 */\n  value?: NumericValue | null;\n  /** 最大值，默认 100 */\n  max?: NumericValue;\n  /** 形状，默认 bar */\n  shape?: keyof ProgressShapes;\n  /** 目标值（与 value 同一单位）：条上画竖线、环上画刻度，读屏念在进度后面 */\n  target?: NumericValue;\n  /** 读屏念的取值文字，如 `(value, max) => \\`已上传 ${value} / ${max} 个文件\\``；默认是百分比 */\n  valueText?: (value: NumericValue, max: NumericValue) => string;\n  /** 进度条上方的标签：同时是进度条的名称（aria-labelledby），不用再写 aria-label */\n  label?: VNodeChild;\n  /** 在标签行右侧显示数值；有 label 或 valueLabel 时默认显示，不确定进度时不显示 */\n  showValueLabel?: boolean;\n  /** 数值文字，替换默认的百分比：`'38.6 / 50 GB'`（只是显示，读屏念的是 valueText） */\n  valueLabel?: VNodeChild;\n  /** 条形的进度（着色部分）的部件属性 */\n  propsIndicator?: PartProps<'div'>;\n  /** 外层（标签行与进度条）的部件属性；只在有标签行时渲染 */\n  propsRoot?: PartProps<'div'>;\n  /** 标签行（标签与数值文字）的部件属性 */\n  propsHeader?: PartProps<'div'>;\n  /** 标签的部件属性 */\n  propsLabel?: Partial<TextProps>;\n  /** 数值文字的部件属性 */\n  propsValueLabel?: Partial<TextProps>;\n}\n\nconst slide = css.keyframes({\n  from: { transform: 'translateX(-100%)' },\n  to: { transform: 'translateX(250%)' },\n});\n\n// 从右到左排版：色块在起始边（右边），从右往左扫\nconst slideRtl = css.keyframes({\n  from: { transform: 'translateX(100%)' },\n  to: { transform: 'translateX(-250%)' },\n});\n\nconst spin = css.keyframes({ to: { rotate: '1turn' } });\n\n/**\n * 进度的配方。条形的部件：root（有标签行时的外层）、header（标签行）、label、valueLabel、\n * track（轨道，即 progressbar）、indicator（进度）、target（目标线）；环形的部件：root（有标签时的外层）、\n * circle（progressbar）、circleSvg、circleTrack、circleIndicator、circleTarget、valueLabel（中间的数值）、label。\n * 档位：shape、tone、indeterminate（不确定进度）。字号、圆角用共用的表另外叠加；\n * 条形的进度宽度与目标线的位置是任意值，用下面的动态样式\n */\nexport const progressRecipe = css.recipe({\n  name: 'Progress',\n  parts: [\n    'root',\n    'header',\n    'label',\n    'valueLabel',\n    'track',\n    'indicator',\n    'target',\n    'circle',\n    'circleSvg',\n    'circleTrack',\n    'circleIndicator',\n    'circleTarget',\n  ],\n  base: {\n    header: {\n      display: 'flex',\n      alignItems: 'baseline',\n      justifyContent: 'space-between',\n      gap: '_sm',\n    },\n    track: {\n      position: 'relative',\n      overflow: 'hidden',\n      width: '_full',\n      height: `calc(${t.space.xs} * 1.5)`,\n      backgroundColor: '_fill',\n      // Windows 高对比下系统把背景色改掉：轨道画一圈系统的文字色，进度用系统的高亮色（见档位 tone）\n      outlineStyle: { default: null, _forcedColors: 'solid' },\n      outlineWidth: { default: null, _forcedColors: '_borderWidths.xs' },\n      outlineColor: { default: null, _forcedColors: 'CanvasText' },\n    },\n    indicator: {\n      height: '_full',\n      borderRadius: 'inherit',\n      forcedColorAdjust: { default: null, _forcedColors: 'none' },\n      transition: `width ${t.durations.md} ${t.easings.standard}`,\n    },\n    // 竖线压在轨道上：正文色，与进度、轨道都有对比；位置按书写方向\n    target: {\n      position: 'absolute',\n      insetBlock: 0,\n      width: '_borderWidths.sm',\n      marginInlineStart: `calc(-0.5 * ${t.borderWidths.sm})`,\n      backgroundColor: { default: '_text', _forcedColors: 'CanvasText' },\n    },\n    // 直径随字号缩放：5em 在默认字号下约 70px\n    circle: {\n      position: 'relative',\n      display: 'inline-grid',\n      placeItems: 'center',\n      width: '5em',\n      height: '5em',\n      flexShrink: 0,\n    },\n    circleSvg: { position: 'absolute', inset: 0, width: '100%', height: '100%', rotate: '-90deg' },\n    circleTrack: {\n      fill: 'none',\n      stroke: { default: '_fill', _forcedColors: 'CanvasText' },\n    },\n    circleIndicator: {\n      fill: 'none',\n      forcedColorAdjust: { default: null, _forcedColors: 'none' },\n      transition: `stroke-dashoffset ${t.durations.md} ${t.easings.standard}`,\n    },\n    circleTarget: { stroke: '_text', strokeLinecap: 'round' },\n  },\n  variants: {\n    shape: {\n      bar: {\n        // 有标签行时的外层：标签行在上、进度条在下\n        root: { display: 'grid', gap: '_xs', minWidth: 0 },\n        // 数值宽度不跳：等宽数字，不被标签挤压\n        valueLabel: { flexShrink: 0, fontVariantNumeric: 'tabular-nums' },\n      },\n      circle: {\n        // 有标签时：环在上、标签在下，居中\n        root: { display: 'inline-grid', justifyItems: 'center', gap: '_xs', textAlign: 'center' },\n        // 中间的数值：比上下文字号小一档，等宽数字\n        valueLabel: { fontVariantNumeric: 'tabular-nums', fontWeight: '_semibold', lineHeight: 1 },\n      },\n    },\n    // 和轨道（fill）之间要有 3:1：中性色用次要文字色，accent 以外的状态色用各自的文字色；条形用背景色，环形用 stroke\n    tone: {\n      neutral: {\n        indicator: {\n          backgroundColor: { default: '_textMuted', _forcedColors: 'Highlight' },\n        },\n        circleIndicator: {\n          stroke: { default: '_textMuted', _forcedColors: 'Highlight' },\n        },\n      },\n      accent: {\n        indicator: {\n          backgroundColor: { default: '_accent', _forcedColors: 'Highlight' },\n        },\n        circleIndicator: {\n          stroke: { default: '_accent', _forcedColors: 'Highlight' },\n        },\n      },\n      info: {\n        indicator: {\n          backgroundColor: { default: '_infoText', _forcedColors: 'Highlight' },\n        },\n        circleIndicator: {\n          stroke: { default: '_infoText', _forcedColors: 'Highlight' },\n        },\n      },\n      success: {\n        indicator: {\n          backgroundColor: {\n            default: '_successText',\n            _forcedColors: 'Highlight',\n          },\n        },\n        circleIndicator: {\n          stroke: { default: '_successText', _forcedColors: 'Highlight' },\n        },\n      },\n      warning: {\n        indicator: {\n          backgroundColor: {\n            default: '_warningText',\n            _forcedColors: 'Highlight',\n          },\n        },\n        circleIndicator: {\n          stroke: { default: '_warningText', _forcedColors: 'Highlight' },\n        },\n      },\n      danger: {\n        indicator: {\n          backgroundColor: {\n            default: '_dangerText',\n            _forcedColors: 'Highlight',\n          },\n        },\n        circleIndicator: {\n          stroke: { default: '_dangerText', _forcedColors: 'Highlight' },\n        },\n      },\n    },\n    indeterminate: {\n      true: {\n        // 条形：一段 40% 宽的色块从起始边到结束边循环；它本身就是信息，不随 durations 变为 0，减少动态效果时变慢\n        indicator: {\n          width: '40%',\n          animationName: { default: slide, ':dir(rtl)': slideRtl },\n          animationDuration: { default: '1.4s', _reducedMotion: '3s' },\n          animationTimingFunction: '_easings.standard',\n          animationIterationCount: 'infinite',\n        },\n        // 环形：四分之一圈的弧一直转；减少动态效果时变慢\n        circleIndicator: {\n          transformOrigin: 'center',\n          animationName: spin,\n          animationDuration: { default: '1s', _reducedMotion: '3s' },\n          animationTimingFunction: 'linear',\n          animationIterationCount: 'infinite',\n        },\n      },\n    },\n  },\n});\n\n/** 进度的部件（createUi / Provider 的 styles.Progress 按它定制） */\nexport type ProgressPart = (typeof progressRecipe.parts)[number];\n\n/** 条形进度目标线的位置 */\nexport const progressTargetPositionStyles = css.create({\n  at: (percent: string) => ({ insetInlineStart: percent }),\n});\n\n// 宽度是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Progress 的样式：percent */\nexport const progressWidthStyles = css.create({\n  percent: (percent: string) => ({ width: percent }),\n});\n\n/** 环形的几何：viewBox 100 × 100，线宽 10 */\nconst RING = { stroke: 10, radius: 45, circumference: 2 * Math.PI * 45 };\n\n/** 值在 0–max 的比例（0–100）；超出范围的夹到两端 */\nfunction percentOf(value: NumericValue, max: NumericValue): number {\n  const total = toNumber(max);\n  if (total <= 0) return 0;\n  const clamped = compareNumeric(value, 0) < 0 ? 0 : compareNumeric(value, max) > 0 ? max : value;\n  return clamp((toNumber(clamped) / total) * 100, 0, 100);\n}\n\n/** 进度：有 value 时为完成比例，没有时为不确定进度；条形有 label 时上方是标签与数值，环形中间是数值 */\nexport const Progress = _component(\n  ({\n    value,\n    max = 100,\n    shape = 'bar',\n    target,\n    tone,\n    size,\n    radius,\n    valueText,\n    label,\n    showValueLabel,\n    valueLabel,\n    propsIndicator,\n    propsRoot,\n    propsHeader,\n    propsLabel,\n    propsValueLabel,\n    ...rest\n  }: ProgressProps) => {\n    const labelId = `${useId()}-label`;\n    const format = useFormat();\n    const lang = useLang();\n    const appearance = useDefaults('Progress', () => ({ tone, size, radius }), {\n      tone: 'accent',\n      radius: 'full',\n    });\n    const recipe = useRecipe(progressRecipe);\n    const percentText = (percent: number) =>\n      format.number(percent / 100, { style: 'percent', maximumFractionDigits: 0 });\n\n    return () => {\n      const look = appearance();\n      const determinate = value != null;\n      const s = recipe({ shape, tone: look.tone, indeterminate: !determinate });\n      // 夹在 0–max 之间、按原值比较；比例与读屏的 aria-valuenow 用浮点数就够\n      const clamped: NumericValue = !determinate\n        ? 0\n        : compareNumeric(value, 0) < 0\n          ? 0\n          : compareNumeric(value, max) > 0\n            ? max\n            : value;\n      const percent = percentOf(clamped, max);\n      const targetPercent = target == null ? undefined : percentOf(target, max);\n      const shownValue = valueLabel ?? percentText(percent);\n      const spoken = determinate ? (valueText?.(clamped, max) ?? percentText(percent)) : undefined;\n      const circle = shape === 'circle';\n      const header =\n        !circle && (label != null || (determinate && (showValueLabel ?? valueLabel != null)));\n      const wrapped = header || (circle && hasContent(label));\n\n      const progressbar = {\n        role: 'progressbar',\n        'aria-valuemin': 0,\n        'aria-valuemax': toNumber(max),\n        'aria-valuenow': determinate ? toNumber(clamped) : undefined,\n        'aria-valuetext':\n          spoken && targetPercent !== undefined\n            ? `${spoken}，${lang.progressTarget(percentText(targetPercent))}`\n            : spoken,\n      } as const;\n      const state = !determinate\n        ? 'indeterminate'\n        : compareNumeric(clamped, max) >= 0\n          ? 'complete'\n          : 'loading';\n\n      const ring = () => {\n        const { stroke, radius: r, circumference } = RING;\n        // 目标刻度：从轨道外缘到内缘的一道线，按比例转到对应角度（SVG 整体转了 -90°，0 在正上方）\n        const angle = ((targetPercent ?? 0) / 100) * 2 * Math.PI;\n        const tick = (distance: number) => ({\n          x: svgNumber(50 + distance * Math.cos(angle)),\n          y: svgNumber(50 + distance * Math.sin(angle)),\n        });\n        const outer = tick(r + stroke / 2 + 2);\n        const inner = tick(r - stroke / 2 - 2);\n        return (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                ...s.circle,\n                sx: [s.circle.sx, !wrapped && look.size && fontSizeStyles[look.size]],\n                'aria-labelledby': hasContent(label) ? labelId : undefined,\n              },\n              rest,\n              progressbar,\n            )}\n            data-state={state}\n          >\n            <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\" {...mergeAttrs<'svg'>(s.circleSvg)}>\n              <circle\n                cx=\"50\"\n                cy=\"50\"\n                r={r}\n                stroke-width={stroke}\n                {...mergeAttrs<'circle'>(s.circleTrack)}\n              />\n              <circle\n                cx=\"50\"\n                cy=\"50\"\n                r={r}\n                stroke-width={stroke}\n                stroke-linecap={look.radius === 'none' ? 'butt' : 'round'}\n                stroke-dasharray={circumference}\n                stroke-dashoffset={\n                  determinate ? circumference * (1 - percent / 100) : circumference * 0.75\n                }\n                {...mergeAttrs<'circle'>(s.circleIndicator)}\n              />\n              {targetPercent !== undefined && (\n                <line\n                  x1={outer.x}\n                  y1={outer.y}\n                  x2={inner.x}\n                  y2={inner.y}\n                  stroke-width={2.5}\n                  {...mergeAttrs<'line'>(s.circleTarget)}\n                />\n              )}\n            </svg>\n            {determinate && (showValueLabel ?? true) && (\n              <Text\n                {...mergePartProps<TextProps>(\n                  { ...s.valueLabel, sx: [s.valueLabel.sx, relativeFontSizeStyles.sm] },\n                  propsValueLabel,\n                  // 读屏从 aria-valuetext 得知数值，这里不重复念\n                  { 'aria-hidden': true },\n                )}\n              >\n                {shownValue}\n              </Text>\n            )}\n          </div>\n        );\n      };\n\n      const bar = () => (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              ...s.track,\n              sx: [\n                s.track.sx,\n                radiusStyles[look.radius],\n                // 有外层时字号档位放在外层，标签行一起缩放\n                !header && look.size && fontSizeStyles[look.size],\n              ],\n              'aria-labelledby': hasContent(label) ? labelId : undefined,\n            },\n            rest,\n            progressbar,\n          )}\n          data-state={state}\n        >\n          <div\n            {...mergeAttrs<'div'>(s.indicator, propsIndicator, {\n              sx: determinate ? progressWidthStyles.percent(`${percent}%`) : undefined,\n            })}\n          />\n          {targetPercent !== undefined && (\n            <div\n              aria-hidden=\"true\"\n              {...mergeAttrs<'div'>({\n                ...s.target,\n                sx: [s.target.sx, progressTargetPositionStyles.at(`${targetPercent}%`)],\n              })}\n            />\n          )}\n        </div>\n      );\n\n      if (circle) {\n        if (!wrapped) return ring();\n        return (\n          <div\n            {...mergeAttrs<'div'>(\n              { ...s.root, sx: [s.root.sx, look.size && fontSizeStyles[look.size]] },\n              propsRoot,\n            )}\n          >\n            {ring()}\n            <Text\n              {...mergePartProps<TextProps>(\n                { ...s.label, tone: 'muted', sx: [s.label.sx, relativeFontSizeStyles.sm] },\n                propsLabel,\n                { id: labelId },\n              )}\n            >\n              {label}\n            </Text>\n          </div>\n        );\n      }\n      if (!header) return bar();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { ...s.root, sx: [s.root.sx, look.size && fontSizeStyles[look.size]] },\n            propsRoot,\n          )}\n        >\n          <div\n            {...mergeAttrs<'div'>(\n              { ...s.header, sx: [s.header.sx, relativeFontSizeStyles.sm] },\n              propsHeader,\n            )}\n          >\n            {hasContent(label) && (\n              <Text {...mergePartProps<TextProps>(s.label, propsLabel, { id: labelId })}>\n                {label}\n              </Text>\n            )}\n            {determinate && (showValueLabel ?? true) && (\n              <Text\n                {...mergePartProps<TextProps>(\n                  { ...s.valueLabel, tone: 'muted' },\n                  propsValueLabel,\n                  // 读屏从进度条的 aria-valuetext 得知数值，这里不重复念\n                  { 'aria-hidden': true },\n                )}\n              >\n                {shownValue}\n              </Text>\n            )}\n          </div>\n          {bar()}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Progress.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","Text","_vue_unref"],"sources":["../../src/feedback/Progress.tsx"],"sourcesContent":["/**\n * 进度（role=\"progressbar\"）：条形（默认）或环形。有 value 时显示完成比例；没有 value（null / undefined）时是不确定进度，循环动画。\n * 名称写 label（条形显示在上方、环形显示在下方）或 aria-label / aria-labelledby（读屏要知道是什么的进度）。\n * 条形有 label 时右侧默认显示数值，环形中间显示数值（按语言格式化的百分比，valueLabel 可以换成自己的文字），参考 React Spectrum ProgressBar。\n * target 是目标值：条上画一条竖线、环上画一道刻度，读屏念成“60%，目标 80%”。\n *\n *   <Progress value={uploaded} max={total} label=\"上传\" valueLabel={`${uploaded} / ${total}`} />\n *   <Progress value={60} aria-label=\"上传进度\" />  只有进度条\n *   <Progress aria-label=\"正在加载\" />               不确定进度\n *   <Progress shape=\"circle\" value={72} target={80} label=\"本月销售完成率\" />\n *\n * 部件：有标签行时外层是 Root（propsRoot），里面是 Label、ValueLabel 与进度条；没有时进度条就是根元素。\n * 环形：根元素是 progressbar，里面是 SVG（轨道、进度、目标刻度）与中间的 ValueLabel；有 label 时外层是 Root，标签在下方。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { Text, type TextProps } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { useFormat } from '../config/lang/format';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { clamp, svgNumber } from '../utils/data/number';\nimport { compareNumeric, toNumber, type NumericValue } from '../utils/data/numeric';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { fontSizeStyles, relativeFontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { radiusStyles, type Radius } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 角色与取值由组件管理 */\nexport type ProgressManaged =\n  'role' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuenow' | 'aria-valuetext';\n\n/** 进度的形状 */\nexport interface ProgressShapes {\n  /** 条形（默认）：占满一行 */\n  bar: unknown;\n  /** 环形：中间显示数值，适合仪表盘、卡片里的完成率；直径随字号缩放 */\n  circle: unknown;\n}\n\n/** Progress 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface ProgressOptions {\n  /** 色调（与 Badge、Alert 等同一套），默认 accent */\n  tone?: StatusTone;\n  /** 字号档位：进度条的粗细随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 圆角，默认 full */\n  radius?: Radius;\n}\n\n/** 未声明的属性落到轨道（role=\"progressbar\" 的主元素）上 */\nexport interface ProgressProps extends PartProps<'div', ProgressManaged>, ProgressOptions {\n  /** 当前值：number、bigint 或 Decimal；不写（或 null）时为不确定进度 */\n  value?: NumericValue | null;\n  /** 最大值，默认 100 */\n  max?: NumericValue;\n  /** 形状，默认 bar */\n  shape?: keyof ProgressShapes;\n  /** 目标值（与 value 同一单位）：条上画竖线、环上画刻度，读屏念在进度后面 */\n  target?: NumericValue;\n  /** 读屏念的取值文字，如 `(value, max) => \\`已上传 ${value} / ${max} 个文件\\``；默认是百分比 */\n  valueText?: (value: NumericValue, max: NumericValue) => string;\n  /** 进度条上方的标签：同时是进度条的名称（aria-labelledby），不用再写 aria-label */\n  label?: VNodeChild;\n  /** 在标签行右侧显示数值；有 label 或 valueLabel 时默认显示，不确定进度时不显示 */\n  showValueLabel?: boolean;\n  /** 数值文字，替换默认的百分比：`'38.6 / 50 GB'`（只是显示，读屏念的是 valueText） */\n  valueLabel?: VNodeChild;\n  /** 条形的进度（着色部分）的部件属性 */\n  propsIndicator?: PartProps<'div'>;\n  /** 外层（标签行与进度条）的部件属性；只在有标签行时渲染 */\n  propsRoot?: PartProps<'div'>;\n  /** 标签行（标签与数值文字）的部件属性 */\n  propsHeader?: PartProps<'div'>;\n  /** 标签的部件属性 */\n  propsLabel?: Partial<TextProps>;\n  /** 数值文字的部件属性 */\n  propsValueLabel?: Partial<TextProps>;\n}\n\nconst slide = css.keyframes({\n  from: { transform: 'translateX(-100%)' },\n  to: { transform: 'translateX(250%)' },\n});\n\n// 从右到左排版：色块在起始边（右边），从右往左扫\nconst slideRtl = css.keyframes({\n  from: { transform: 'translateX(100%)' },\n  to: { transform: 'translateX(-250%)' },\n});\n\nconst spin = css.keyframes({ to: { rotate: '1turn' } });\n\n/**\n * 进度的配方。条形的部件：root（有标签行时的外层）、header（标签行）、label、valueLabel、\n * track（轨道，即 progressbar）、indicator（进度）、target（目标线）；环形的部件：root（有标签时的外层）、\n * circle（progressbar）、circleSvg、circleTrack、circleIndicator、circleTarget、valueLabel（中间的数值）、label。\n * 档位：shape、tone、indeterminate（不确定进度）。字号、圆角用共用的表另外叠加；\n * 条形的进度宽度与目标线的位置是任意值，用下面的动态样式\n */\nexport const progressRecipe = css.recipe({\n  name: 'Progress',\n  parts: [\n    'root',\n    'header',\n    'label',\n    'valueLabel',\n    'track',\n    'indicator',\n    'target',\n    'circle',\n    'circleSvg',\n    'circleTrack',\n    'circleIndicator',\n    'circleTarget',\n  ],\n  base: {\n    header: {\n      display: 'flex',\n      alignItems: 'baseline',\n      justifyContent: 'space-between',\n      gap: '_sm',\n    },\n    track: {\n      position: 'relative',\n      overflow: 'hidden',\n      width: '_full',\n      height: `calc(${t.space.xs} * 1.5)`,\n      backgroundColor: '_fill',\n      // Windows 高对比下系统把背景色改掉：轨道画一圈系统的文字色，进度用系统的高亮色（见档位 tone）\n      outlineStyle: { default: null, _forcedColors: 'solid' },\n      outlineWidth: { default: null, _forcedColors: '_borderWidths.xs' },\n      outlineColor: { default: null, _forcedColors: 'CanvasText' },\n    },\n    indicator: {\n      height: '_full',\n      borderRadius: 'inherit',\n      forcedColorAdjust: { default: null, _forcedColors: 'none' },\n      transition: `width ${t.durations.md} ${t.easings.standard}`,\n    },\n    // 竖线压在轨道上：正文色，与进度、轨道都有对比；位置按书写方向\n    target: {\n      position: 'absolute',\n      insetBlock: 0,\n      width: '_borderWidths.sm',\n      marginInlineStart: `calc(-0.5 * ${t.borderWidths.sm})`,\n      backgroundColor: { default: '_text', _forcedColors: 'CanvasText' },\n    },\n    // 直径随字号缩放：5em 在默认字号下约 70px\n    circle: {\n      position: 'relative',\n      display: 'inline-grid',\n      placeItems: 'center',\n      width: '5em',\n      height: '5em',\n      flexShrink: 0,\n    },\n    circleSvg: { position: 'absolute', inset: 0, width: '100%', height: '100%', rotate: '-90deg' },\n    circleTrack: {\n      fill: 'none',\n      stroke: { default: '_fill', _forcedColors: 'CanvasText' },\n    },\n    circleIndicator: {\n      fill: 'none',\n      forcedColorAdjust: { default: null, _forcedColors: 'none' },\n      transition: `stroke-dashoffset ${t.durations.md} ${t.easings.standard}`,\n    },\n    circleTarget: { stroke: '_text', strokeLinecap: 'round' },\n  },\n  variants: {\n    shape: {\n      bar: {\n        // 有标签行时的外层：标签行在上、进度条在下\n        root: { display: 'grid', gap: '_xs', minWidth: 0 },\n        // 数值宽度不跳：等宽数字，不被标签挤压\n        valueLabel: { flexShrink: 0, fontVariantNumeric: 'tabular-nums' },\n      },\n      circle: {\n        // 有标签时：环在上、标签在下，居中\n        root: { display: 'inline-grid', justifyItems: 'center', gap: '_xs', textAlign: 'center' },\n        // 中间的数值：比上下文字号小一档，等宽数字\n        valueLabel: { fontVariantNumeric: 'tabular-nums', fontWeight: '_semibold', lineHeight: 1 },\n      },\n    },\n    // 和轨道（fill）之间要有 3:1：中性色用次要文字色，accent 以外的状态色用各自的文字色；条形用背景色，环形用 stroke\n    tone: {\n      neutral: {\n        indicator: {\n          backgroundColor: { default: '_textMuted', _forcedColors: 'Highlight' },\n        },\n        circleIndicator: {\n          stroke: { default: '_textMuted', _forcedColors: 'Highlight' },\n        },\n      },\n      accent: {\n        indicator: {\n          backgroundColor: { default: '_accent', _forcedColors: 'Highlight' },\n        },\n        circleIndicator: {\n          stroke: { default: '_accent', _forcedColors: 'Highlight' },\n        },\n      },\n      info: {\n        indicator: {\n          backgroundColor: { default: '_infoText', _forcedColors: 'Highlight' },\n        },\n        circleIndicator: {\n          stroke: { default: '_infoText', _forcedColors: 'Highlight' },\n        },\n      },\n      success: {\n        indicator: {\n          backgroundColor: {\n            default: '_successText',\n            _forcedColors: 'Highlight',\n          },\n        },\n        circleIndicator: {\n          stroke: { default: '_successText', _forcedColors: 'Highlight' },\n        },\n      },\n      warning: {\n        indicator: {\n          backgroundColor: {\n            default: '_warningText',\n            _forcedColors: 'Highlight',\n          },\n        },\n        circleIndicator: {\n          stroke: { default: '_warningText', _forcedColors: 'Highlight' },\n        },\n      },\n      danger: {\n        indicator: {\n          backgroundColor: {\n            default: '_dangerText',\n            _forcedColors: 'Highlight',\n          },\n        },\n        circleIndicator: {\n          stroke: { default: '_dangerText', _forcedColors: 'Highlight' },\n        },\n      },\n    },\n    indeterminate: {\n      true: {\n        // 条形：一段 40% 宽的色块从起始边到结束边循环；它本身就是信息，不随 durations 变为 0，减少动态效果时变慢\n        indicator: {\n          width: '40%',\n          animationName: { default: slide, ':dir(rtl)': slideRtl },\n          animationDuration: { default: '1.4s', _reducedMotion: '3s' },\n          animationTimingFunction: '_easings.standard',\n          animationIterationCount: 'infinite',\n        },\n        // 环形：四分之一圈的弧一直转；减少动态效果时变慢\n        circleIndicator: {\n          transformOrigin: 'center',\n          animationName: spin,\n          animationDuration: { default: '1s', _reducedMotion: '3s' },\n          animationTimingFunction: 'linear',\n          animationIterationCount: 'infinite',\n        },\n      },\n    },\n  },\n});\n\n/** 进度的部件（createUi / Provider 的 styles.Progress 按它定制） */\nexport type ProgressPart = (typeof progressRecipe.parts)[number];\n\n/** 条形进度目标线的位置 */\nexport const progressTargetPositionStyles = css.create({\n  at: (percent: string) => ({ insetInlineStart: percent }),\n});\n\n// 宽度是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Progress 的样式：percent */\nexport const progressWidthStyles = css.create({\n  percent: (percent: string) => ({ width: percent }),\n});\n\n/** 环形的几何：viewBox 100 × 100，线宽 10 */\nconst RING = { stroke: 10, radius: 45, circumference: 2 * Math.PI * 45 };\n\n/** 值在 0–max 的比例（0–100）；超出范围的夹到两端 */\nfunction percentOf(value: NumericValue, max: NumericValue): number {\n  const total = toNumber(max);\n  if (total <= 0) return 0;\n  const clamped = compareNumeric(value, 0) < 0 ? 0 : compareNumeric(value, max) > 0 ? max : value;\n  return clamp((toNumber(clamped) / total) * 100, 0, 100);\n}\n\n/** 进度：有 value 时为完成比例，没有时为不确定进度；条形有 label 时上方是标签与数值，环形中间是数值 */\nexport const Progress = _component(\n  ({\n    value,\n    max = 100,\n    shape = 'bar',\n    target,\n    tone,\n    size,\n    radius,\n    valueText,\n    label,\n    showValueLabel,\n    valueLabel,\n    propsIndicator,\n    propsRoot,\n    propsHeader,\n    propsLabel,\n    propsValueLabel,\n    ...rest\n  }: ProgressProps) => {\n    const labelId = `${useId()}-label`;\n    const format = useFormat();\n    const lang = useLang();\n    const appearance = useDefaults('Progress', () => ({ tone, size, radius }), {\n      tone: 'accent',\n      radius: 'full',\n    });\n    const recipe = useRecipe(progressRecipe);\n    const percentText = (percent: number) =>\n      format.number(percent / 100, { style: 'percent', maximumFractionDigits: 0 });\n\n    return () => {\n      const look = appearance();\n      const determinate = value != null;\n      const s = recipe({ shape, tone: look.tone, indeterminate: !determinate });\n      // 夹在 0–max 之间、按原值比较；比例与读屏的 aria-valuenow 用浮点数就够\n      const clamped: NumericValue = !determinate\n        ? 0\n        : compareNumeric(value, 0) < 0\n          ? 0\n          : compareNumeric(value, max) > 0\n            ? max\n            : value;\n      const percent = percentOf(clamped, max);\n      const targetPercent = target == null ? undefined : percentOf(target, max);\n      const shownValue = valueLabel ?? percentText(percent);\n      const spoken = determinate ? (valueText?.(clamped, max) ?? percentText(percent)) : undefined;\n      const circle = shape === 'circle';\n      const header =\n        !circle && (label != null || (determinate && (showValueLabel ?? valueLabel != null)));\n      const wrapped = header || (circle && hasContent(label));\n\n      const progressbar = {\n        role: 'progressbar',\n        'aria-valuemin': 0,\n        'aria-valuemax': toNumber(max),\n        'aria-valuenow': determinate ? toNumber(clamped) : undefined,\n        'aria-valuetext':\n          spoken && targetPercent !== undefined\n            ? `${spoken}，${lang.progressTarget(percentText(targetPercent))}`\n            : spoken,\n      } as const;\n      const state = !determinate\n        ? 'indeterminate'\n        : compareNumeric(clamped, max) >= 0\n          ? 'complete'\n          : 'loading';\n\n      const ring = () => {\n        const { stroke, radius: r, circumference } = RING;\n        // 目标刻度：从轨道外缘到内缘的一道线，按比例转到对应角度（SVG 整体转了 -90°，0 在正上方）\n        const angle = ((targetPercent ?? 0) / 100) * 2 * Math.PI;\n        const tick = (distance: number) => ({\n          x: svgNumber(50 + distance * Math.cos(angle)),\n          y: svgNumber(50 + distance * Math.sin(angle)),\n        });\n        const outer = tick(r + stroke / 2 + 2);\n        const inner = tick(r - stroke / 2 - 2);\n        return (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                ...s.circle,\n                sx: [s.circle.sx, !wrapped && look.size && fontSizeStyles[look.size]],\n                'aria-labelledby': hasContent(label) ? labelId : undefined,\n              },\n              rest,\n              progressbar,\n            )}\n            data-state={state}\n          >\n            <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\" {...mergeAttrs<'svg'>(s.circleSvg)}>\n              <circle\n                cx=\"50\"\n                cy=\"50\"\n                r={r}\n                stroke-width={stroke}\n                {...mergeAttrs<'circle'>(s.circleTrack)}\n              />\n              <circle\n                cx=\"50\"\n                cy=\"50\"\n                r={r}\n                stroke-width={stroke}\n                stroke-linecap={look.radius === 'none' ? 'butt' : 'round'}\n                stroke-dasharray={circumference}\n                stroke-dashoffset={\n                  determinate ? circumference * (1 - percent / 100) : circumference * 0.75\n                }\n                {...mergeAttrs<'circle'>(s.circleIndicator)}\n              />\n              {targetPercent !== undefined && (\n                <line\n                  x1={outer.x}\n                  y1={outer.y}\n                  x2={inner.x}\n                  y2={inner.y}\n                  stroke-width={2.5}\n                  {...mergeAttrs<'line'>(s.circleTarget)}\n                />\n              )}\n            </svg>\n            {determinate && (showValueLabel ?? true) && (\n              <Text\n                {...mergePartProps<TextProps>(\n                  { ...s.valueLabel, sx: [s.valueLabel.sx, relativeFontSizeStyles.sm] },\n                  propsValueLabel,\n                  // 读屏从 aria-valuetext 得知数值，这里不重复念\n                  { 'aria-hidden': true },\n                )}\n              >\n                {shownValue}\n              </Text>\n            )}\n          </div>\n        );\n      };\n\n      const bar = () => (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              ...s.track,\n              sx: [\n                s.track.sx,\n                radiusStyles[look.radius],\n                // 有外层时字号档位放在外层，标签行一起缩放\n                !header && look.size && fontSizeStyles[look.size],\n              ],\n              'aria-labelledby': hasContent(label) ? labelId : undefined,\n            },\n            rest,\n            progressbar,\n          )}\n          data-state={state}\n        >\n          <div\n            {...mergeAttrs<'div'>(s.indicator, propsIndicator, {\n              sx: determinate ? progressWidthStyles.percent(`${percent}%`) : undefined,\n            })}\n          />\n          {targetPercent !== undefined && (\n            <div\n              aria-hidden=\"true\"\n              {...mergeAttrs<'div'>({\n                ...s.target,\n                sx: [s.target.sx, progressTargetPositionStyles.at(`${targetPercent}%`)],\n              })}\n            />\n          )}\n        </div>\n      );\n\n      if (circle) {\n        if (!wrapped) return ring();\n        return (\n          <div\n            {...mergeAttrs<'div'>(\n              { ...s.root, sx: [s.root.sx, look.size && fontSizeStyles[look.size]] },\n              propsRoot,\n            )}\n          >\n            {ring()}\n            <Text\n              {...mergePartProps<TextProps>(\n                { ...s.label, tone: 'muted', sx: [s.label.sx, relativeFontSizeStyles.sm] },\n                propsLabel,\n                { id: labelId },\n              )}\n            >\n              {label}\n            </Text>\n          </div>\n        );\n      }\n      if (!header) return bar();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { ...s.root, sx: [s.root.sx, look.size && fontSizeStyles[look.size]] },\n            propsRoot,\n          )}\n        >\n          <div\n            {...mergeAttrs<'div'>(\n              { ...s.header, sx: [s.header.sx, relativeFontSizeStyles.sm] },\n              propsHeader,\n            )}\n          >\n            {hasContent(label) && (\n              <Text {...mergePartProps<TextProps>(s.label, propsLabel, { id: labelId })}>\n                {label}\n              </Text>\n            )}\n            {determinate && (showValueLabel ?? true) && (\n              <Text\n                {...mergePartProps<TextProps>(\n                  { ...s.valueLabel, tone: 'muted' },\n                  propsValueLabel,\n                  // 读屏从进度条的 aria-valuetext 得知数值，这里不重复念\n                  { 'aria-hidden': true },\n                )}\n              >\n                {shownValue}\n              </Text>\n            )}\n          </div>\n          {bar()}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/feedback/Result.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type IconData, type IconProps } from '../base/Icon';
 import { type TextProps } from '../base/Text';

package/dist/feedback/Result.js

@@ -8,7 +8,7 @@ import { statusIcons } from "../utils/style/tone-styles.js";
 import { Paragraph, Text as Text$1 } from "../base/Text.js";
 import { createVNode, isVNode, unref } from "vue";
 import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { FileQuestionMark, ServerCrash, ShieldX } from "@lucide/icons";
 //#region src/feedback/Result.tsx
 /** 结果的色调：决定图标与颜色（与 Alert、Toast 的色调同名） */

package/dist/feedback/Result.js.map

@@ -1 +1 @@
-{"version":3,"file":"Result.js","names":["_isVNode","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","Text","_vue_unref"],"sources":["../../src/feedback/Result.tsx"],"sourcesContent":["/**\n * 结果页：操作完成后的整块反馈（提交成功、支付失败、权限不足）。大图标（挂载时一笔画出）+ 标题 + 说明 + 操作，居中排列。\n *\n *   <Result tone=\"success\" title=\"提交成功\" description=\"审核结果会通过邮件通知你。\" action={<Button>返回列表</Button>} />\n *   <Result tone=\"danger\" title=\"支付失败\" action={<Button onClick={retry}>重试</Button>}>{details}</Result>\n *   <Result status=\"404\" action={<LinkButton href=\"/\">回到首页</LinkButton>} />   常见状态：图标、色调、标题与说明都有默认值\n *\n * 只是展示，不带角色；操作后才出现、需要读屏播报时，由所在区域用 aria-live 或把焦点移到标题上。\n * 部件：Root（div）、Icon、Code（状态码，status 时）、Title（Text）、Description（Paragraph）、Action（div）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { FileQuestionMark, ServerCrash, ShieldX } from '@lucide/icons';\nimport type { VNodeChild } from 'vue';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { Paragraph, Text, type TextProps } from '../base/Text';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { statusIcons } from '../utils/style/tone-styles';\nimport {\n  fontSizeStyles,\n  relativeFontSizeStyles,\n  toneStyles,\n  type TextSize,\n} from '../utils/style/typography';\n\n/** 结果的色调：决定图标与颜色（与 Alert、Toast 的色调同名） */\nexport interface ResultTones {\n  /** 成功（默认）：对勾 */\n  success: unknown;\n  /** 失败：感叹号 */\n  danger: unknown;\n  /** 警告：三角感叹号 */\n  warning: unknown;\n  /** 信息：i */\n  info: unknown;\n}\n\n/** 常见的出错状态：图标、色调、标题与说明都有默认值（标题与说明取语言包） */\nexport interface ResultStatuses {\n  /** 没有权限 */\n  403: unknown;\n  /** 找不到页面 */\n  404: unknown;\n  /** 服务出错 */\n  500: unknown;\n}\n\n/** 各状态的图标与色调 */\nconst STATUS_LOOKS: Record<keyof ResultStatuses, { icon: IconData; tone: keyof ResultTones }> = {\n  403: { icon: ShieldX, tone: 'warning' },\n  404: { icon: FileQuestionMark, tone: 'info' },\n  500: { icon: ServerCrash, tone: 'danger' },\n};\n\n/** Result 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface ResultOptions {\n  /** 字号档位，内部尺寸随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */\nexport interface ResultProps extends PartProps<'div', 'title'>, ResultOptions {\n  /** 常见状态（403、404、500）：给出图标、色调、状态码与默认的标题、说明，显式写的优先 */\n  status?: `${keyof ResultStatuses}`;\n  /** 色调，默认 success（写了 status 时按状态） */\n  tone?: keyof ResultTones;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 挂载时描线画出图标，默认 true；减少动态效果时直接画好 */\n  draw?: boolean;\n  /** 标题 */\n  title?: VNodeChild;\n  /** 说明 */\n  description?: VNodeChild;\n  /** 操作（如“返回”“重试”按钮） */\n  action?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 状态码的部件属性 */\n  propsCode?: Partial<TextProps>;\n  /** 标题的部件属性 */\n  propsTitle?: Partial<TextProps>;\n  /** 说明的部件属性 */\n  propsDescription?: Partial<TextProps>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 说明之后的内容（如错误详情） */\n  children?: VNodeChild;\n}\n\n/**\n * 结果页的配方：各部件的布局与颜色。图标的色调用共用的 toneStyles，排在配方之前，\n * createUi / Provider 的 styles.Result 能盖过它；字号档位用共用的 fontSizeStyles 另外叠加\n */\nexport const resultRecipe = css.recipe({\n  name: 'Result',\n  parts: ['root', 'icon', 'code', 'title', 'description', 'action'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      gap: '_sm',\n      paddingBlock: '_xl',\n      paddingInline: '_lg',\n      textAlign: 'center',\n      color: '_text',\n    },\n    icon: { width: '4em', height: '4em', marginBlockEnd: '_sm', strokeWidth: '_sm' },\n    // 状态码：大号（随字号缩放）、次要颜色、等宽数字，压在标题上方\n    code: {\n      fontSize: '2.5em',\n      fontWeight: '_bold',\n      lineHeight: 1,\n      color: '_textMuted',\n      fontVariantNumeric: 'tabular-nums',\n      letterSpacing: '_tight',\n    },\n    title: { fontWeight: '_semibold', lineHeight: '_tight' },\n    description: { maxWidth: '36em', color: '_textMuted' },\n    action: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      justifyContent: 'center',\n      gap: '_sm',\n      marginBlockStart: '_md',\n    },\n  },\n});\n\n/** 结果页的部件（createUi / Provider 的 styles.Result 按它定制） */\nexport type ResultPart = (typeof resultRecipe.parts)[number];\n\n/** 结果页：状态图标、标题、说明、操作，居中排列 */\nexport const Result = _component(\n  ({\n    status,\n    tone,\n    icon,\n    draw = true,\n    title,\n    description,\n    action,\n    size,\n    propsIcon,\n    propsCode,\n    propsTitle,\n    propsDescription,\n    propsAction,\n    children,\n    ...rest\n  }: ResultProps) => {\n    const lang = useLang();\n    const appearance = useDefaults('Result', () => ({ size }));\n    const recipe = useRecipe(resultRecipe);\n    return () => {\n      const textSize = appearance().size;\n      const preset = status && STATUS_LOOKS[Number(status) as keyof ResultStatuses];\n      const text = status && lang.resultStatus[status];\n      const shownTone = tone ?? preset?.tone ?? 'success';\n      const shownTitle = title ?? text?.title;\n      const shownDescription = description ?? text?.description;\n      const s = recipe({ tone: shownTone });\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { ...s.root, sx: [s.root.sx, textSize && fontSizeStyles[textSize]] },\n            rest,\n          )}\n          data-tone={shownTone}\n        >\n          {icon !== false && (\n            <Icon\n              {...mergePartProps<IconProps>(\n                {\n                  ...s.icon,\n                  icon: icon ?? preset?.icon ?? statusIcons[shownTone],\n                  draw,\n                  sx: [toneStyles[shownTone], s.icon.sx],\n                },\n                propsIcon,\n              )}\n            />\n          )}\n          {status && (\n            <Text\n              {...mergePartProps<TextProps>(\n                s.code,\n                propsCode,\n                // 标题已经说明了状态，状态码对读屏是重复的\n                { 'aria-hidden': true },\n              )}\n            >\n              {status}\n            </Text>\n          )}\n          {hasContent(shownTitle) && (\n            <Text\n              {...mergePartProps<TextProps>(\n                { ...s.title, sx: [s.title.sx, relativeFontSizeStyles.xl] },\n                propsTitle,\n              )}\n            >\n              {shownTitle}\n            </Text>\n          )}\n          {hasContent(shownDescription) && (\n            <Paragraph {...mergePartProps<TextProps>(s.description, propsDescription)}>\n              {shownDescription}\n            </Paragraph>\n          )}\n          {children}\n          {hasContent(action) && <div {...mergeAttrs<'div'>(s.action, propsAction)}>{action}</div>}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Result.js","names":["_isVNode","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","Text","_vue_unref"],"sources":["../../src/feedback/Result.tsx"],"sourcesContent":["/**\n * 结果页：操作完成后的整块反馈（提交成功、支付失败、权限不足）。大图标（挂载时一笔画出）+ 标题 + 说明 + 操作，居中排列。\n *\n *   <Result tone=\"success\" title=\"提交成功\" description=\"审核结果会通过邮件通知你。\" action={<Button>返回列表</Button>} />\n *   <Result tone=\"danger\" title=\"支付失败\" action={<Button onClick={retry}>重试</Button>}>{details}</Result>\n *   <Result status=\"404\" action={<LinkButton href=\"/\">回到首页</LinkButton>} />   常见状态：图标、色调、标题与说明都有默认值\n *\n * 只是展示，不带角色；操作后才出现、需要读屏播报时，由所在区域用 aria-live 或把焦点移到标题上。\n * 部件：Root（div）、Icon、Code（状态码，status 时）、Title（Text）、Description（Paragraph）、Action（div）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { FileQuestionMark, ServerCrash, ShieldX } from '@lucide/icons';\nimport type { VNodeChild } from 'vue';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { Paragraph, Text, type TextProps } from '../base/Text';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { statusIcons } from '../utils/style/tone-styles';\nimport {\n  fontSizeStyles,\n  relativeFontSizeStyles,\n  toneStyles,\n  type TextSize,\n} from '../utils/style/typography';\n\n/** 结果的色调：决定图标与颜色（与 Alert、Toast 的色调同名） */\nexport interface ResultTones {\n  /** 成功（默认）：对勾 */\n  success: unknown;\n  /** 失败：感叹号 */\n  danger: unknown;\n  /** 警告：三角感叹号 */\n  warning: unknown;\n  /** 信息：i */\n  info: unknown;\n}\n\n/** 常见的出错状态：图标、色调、标题与说明都有默认值（标题与说明取语言包） */\nexport interface ResultStatuses {\n  /** 没有权限 */\n  403: unknown;\n  /** 找不到页面 */\n  404: unknown;\n  /** 服务出错 */\n  500: unknown;\n}\n\n/** 各状态的图标与色调 */\nconst STATUS_LOOKS: Record<keyof ResultStatuses, { icon: IconData; tone: keyof ResultTones }> = {\n  403: { icon: ShieldX, tone: 'warning' },\n  404: { icon: FileQuestionMark, tone: 'info' },\n  500: { icon: ServerCrash, tone: 'danger' },\n};\n\n/** Result 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface ResultOptions {\n  /** 字号档位，内部尺寸随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */\nexport interface ResultProps extends PartProps<'div', 'title'>, ResultOptions {\n  /** 常见状态（403、404、500）：给出图标、色调、状态码与默认的标题、说明，显式写的优先 */\n  status?: `${keyof ResultStatuses}`;\n  /** 色调，默认 success（写了 status 时按状态） */\n  tone?: keyof ResultTones;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 挂载时描线画出图标，默认 true；减少动态效果时直接画好 */\n  draw?: boolean;\n  /** 标题 */\n  title?: VNodeChild;\n  /** 说明 */\n  description?: VNodeChild;\n  /** 操作（如“返回”“重试”按钮） */\n  action?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 状态码的部件属性 */\n  propsCode?: Partial<TextProps>;\n  /** 标题的部件属性 */\n  propsTitle?: Partial<TextProps>;\n  /** 说明的部件属性 */\n  propsDescription?: Partial<TextProps>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 说明之后的内容（如错误详情） */\n  children?: VNodeChild;\n}\n\n/**\n * 结果页的配方：各部件的布局与颜色。图标的色调用共用的 toneStyles，排在配方之前，\n * createUi / Provider 的 styles.Result 能盖过它；字号档位用共用的 fontSizeStyles 另外叠加\n */\nexport const resultRecipe = css.recipe({\n  name: 'Result',\n  parts: ['root', 'icon', 'code', 'title', 'description', 'action'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      gap: '_sm',\n      paddingBlock: '_xl',\n      paddingInline: '_lg',\n      textAlign: 'center',\n      color: '_text',\n    },\n    icon: { width: '4em', height: '4em', marginBlockEnd: '_sm', strokeWidth: '_sm' },\n    // 状态码：大号（随字号缩放）、次要颜色、等宽数字，压在标题上方\n    code: {\n      fontSize: '2.5em',\n      fontWeight: '_bold',\n      lineHeight: 1,\n      color: '_textMuted',\n      fontVariantNumeric: 'tabular-nums',\n      letterSpacing: '_tight',\n    },\n    title: { fontWeight: '_semibold', lineHeight: '_tight' },\n    description: { maxWidth: '36em', color: '_textMuted' },\n    action: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      justifyContent: 'center',\n      gap: '_sm',\n      marginBlockStart: '_md',\n    },\n  },\n});\n\n/** 结果页的部件（createUi / Provider 的 styles.Result 按它定制） */\nexport type ResultPart = (typeof resultRecipe.parts)[number];\n\n/** 结果页：状态图标、标题、说明、操作，居中排列 */\nexport const Result = _component(\n  ({\n    status,\n    tone,\n    icon,\n    draw = true,\n    title,\n    description,\n    action,\n    size,\n    propsIcon,\n    propsCode,\n    propsTitle,\n    propsDescription,\n    propsAction,\n    children,\n    ...rest\n  }: ResultProps) => {\n    const lang = useLang();\n    const appearance = useDefaults('Result', () => ({ size }));\n    const recipe = useRecipe(resultRecipe);\n    return () => {\n      const textSize = appearance().size;\n      const preset = status && STATUS_LOOKS[Number(status) as keyof ResultStatuses];\n      const text = status && lang.resultStatus[status];\n      const shownTone = tone ?? preset?.tone ?? 'success';\n      const shownTitle = title ?? text?.title;\n      const shownDescription = description ?? text?.description;\n      const s = recipe({ tone: shownTone });\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { ...s.root, sx: [s.root.sx, textSize && fontSizeStyles[textSize]] },\n            rest,\n          )}\n          data-tone={shownTone}\n        >\n          {icon !== false && (\n            <Icon\n              {...mergePartProps<IconProps>(\n                {\n                  ...s.icon,\n                  icon: icon ?? preset?.icon ?? statusIcons[shownTone],\n                  draw,\n                  sx: [toneStyles[shownTone], s.icon.sx],\n                },\n                propsIcon,\n              )}\n            />\n          )}\n          {status && (\n            <Text\n              {...mergePartProps<TextProps>(\n                s.code,\n                propsCode,\n                // 标题已经说明了状态，状态码对读屏是重复的\n                { 'aria-hidden': true },\n              )}\n            >\n              {status}\n            </Text>\n          )}\n          {hasContent(shownTitle) && (\n            <Text\n              {...mergePartProps<TextProps>(\n                { ...s.title, sx: [s.title.sx, relativeFontSizeStyles.xl] },\n                propsTitle,\n              )}\n            >\n              {shownTitle}\n            </Text>\n          )}\n          {hasContent(shownDescription) && (\n            <Paragraph {...mergePartProps<TextProps>(s.description, propsDescription)}>\n              {shownDescription}\n            </Paragraph>\n          )}\n          {children}\n          {hasContent(action) && <div {...mergeAttrs<'div'>(s.action, propsAction)}>{action}</div>}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/feedback/Skeleton.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 /** 骨架的常用形状 */

package/dist/feedback/Skeleton.js

@@ -4,7 +4,7 @@ import { shimmerVars } from "../utils/style/vars.js";
 import { shimmerStyles } from "../utils/style/shimmer.js";
 import { createVNode } from "vue";
 import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/feedback/Skeleton.tsx
 /** 骨架的常用形状 */
 /** 未声明的属性落到占位的 span 上（加载完成后不渲染它，只渲染内容） */

package/dist/feedback/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/feedback/Skeleton.tsx"],"sourcesContent":["/**\n * 骨架屏（span）：内容加载时的占位，一道光带从起始边扫过（shimmer.ts）。包着真实内容时，内容照常排版但不可见、\n * 不可交互，占位正好是内容的大小，加载完换成内容时布局不跳（同 Radix Themes 的 Skeleton）；\n * 不包内容时用 variant 选常用形状，或者由 sx 给大小。多行文字用 SkeletonText。\n *\n *   <Skeleton loading={loading}><Text>{user.name}</Text></Skeleton>\n *   <Skeleton variant=\"circle\" />\n *   <Skeleton variant=\"heading\" delay={SHIMMER_STAGGER} />      几块骨架依次扫过\n *   <Skeleton sx={styles.cover} />\n *\n * 占位对读屏隐藏；整块区域在加载时在外层加 aria-busy。减少动态效果时不扫光。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { shimmerStyles } from '../utils/style/shimmer';\nimport { shimmerVars } from '../utils/style/vars';\nimport { t } from '../config/theme/tokens';\n\n/** 骨架的常用形状 */\nexport interface SkeletonVariants {\n  /** 一行文字：高 1em，占满宽度 */\n  text: unknown;\n  /** 标题：高 1.5em，四成宽度 */\n  heading: unknown;\n  /** 圆：头像，边长 2.5em（与同字号的 Avatar 一样大） */\n  circle: unknown;\n  /** 按钮：控件高度，宽 6em */\n  button: unknown;\n  /** 图片：占满宽度，16:9 */\n  image: unknown;\n}\n\n/** 未声明的属性落到占位的 span 上（加载完成后不渲染它，只渲染内容） */\nexport interface SkeletonProps extends PartProps<'span', 'aria-hidden' | 'inert'> {\n  /**\n   * 是否在加载；false 时直接渲染内容\n   * @default true\n   */\n  loading?: boolean;\n  /** 形状；不写时大小由包着的内容或 sx 决定 */\n  variant?: keyof SkeletonVariants;\n  /** 扫光的延迟（毫秒）：几块骨架依次扫过、连成一道波时用（SkeletonText 的各行就是这样错开的） */\n  delay?: number;\n  /** 包着内容的那一层（不可见、只用来撑出大小）的部件属性 */\n  propsContent?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** 不包内容的骨架（SkeletonText 的各行、列表与表格的骨架行）的部件属性：加载与内容由组件管 */\nexport type SkeletonShapeProps = Omit<\n  Partial<SkeletonProps>,\n  'loading' | 'children' | 'propsContent'\n>;\n\n/** Skeleton 的样式：root、surface、wrapping、hidden */\nexport const skeletonStyles = css.create({\n  root: {\n    display: 'inline-block',\n    borderRadius: '_sm',\n    // 底色与光带都是半透明的正文色：叠在任何表面（页面、卡片、浮层）上都比表面深一档（暗色主题里浅一档），\n    // 十二套主题不必各调一遍；光带叠在底色上，再深一档\n    [shimmerVars.highlight]: `color-mix(in oklab, ${t.colors.text} 9%, transparent)`,\n    pointerEvents: 'none',\n    userSelect: 'none',\n  },\n  // 底色单独一项（root 里有 CSS 变量的键，条件取值放在一起时类型推不出来）。\n  // Windows 高对比下系统把背景色改掉，占位块就看不见了：用系统的灰色文字色\n  surface: {\n    backgroundColor: {\n      default: `color-mix(in oklab, ${t.colors.text} 9%, transparent)`,\n      _forcedColors: 'GrayText',\n    },\n    forcedColorAdjust: { default: null, _forcedColors: 'none' },\n  },\n  // 包着内容时：内容决定大小但看不见\n  wrapping: { color: 'transparent' },\n  hidden: { visibility: 'hidden' },\n});\n\n/** Skeleton 的样式：text、heading、circle、button、image */\nexport const skeletonVariantStyles = css.create({\n  text: { display: 'block', width: '_full', height: '1em' },\n  heading: { display: 'block', width: '40%', height: '1.5em' },\n  circle: { width: '2.5em', height: '2.5em', flexShrink: 0, borderRadius: '_full' },\n  button: {\n    width: '6em',\n    height: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    flexShrink: 0,\n    borderRadius: '_md',\n  },\n  image: { display: 'block', width: '_full', aspectRatio: '16 / 9', borderRadius: '_md' },\n});\n\n/** 骨架屏：加载时占位并扫光，包着内容时与内容一样大 */\nexport const Skeleton = _component(\n  ({ loading = true, variant, delay, propsContent, children, ...rest }: SkeletonProps) =>\n    () => {\n      if (!loading) return children;\n      const wrapping = children != null;\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            {\n              sx: [\n                skeletonStyles.root,\n                skeletonStyles.surface,\n                shimmerStyles.wave,\n                variant && skeletonVariantStyles[variant],\n                !!delay && shimmerStyles.delay(`${delay}ms`),\n                wrapping && skeletonStyles.wrapping,\n              ],\n            },\n            rest,\n            {\n              'aria-hidden': true,\n              // 包着的内容（链接、按钮）不能被 Tab 聚焦\n              inert: wrapping || undefined,\n            },\n          )}\n        >\n          {wrapping && (\n            <span {...mergeAttrs<'span'>({ sx: skeletonStyles.hidden }, propsContent)}>\n              {children}\n            </span>\n          )}\n        </span>\n      );\n    },\n);\n"],"mappings":";;;;;;;;;;;;AAyDA,IAAa,iBAAiB,IAAI,OAAO;CACvC,MAAM;EACJ,SAAS;EACT,cAAc;GAGb,YAAY,YAAY,uBAAuB,EAAE,OAAO,KAAI;EAC7D,eAAe;EACf,YAAY;CACd;CAGA,SAAS;EACP,iBAAiB;GACf,SAAS,uBAAuB,EAAE,OAAO,KAAI;GAC7C,eAAe;EACjB;EACA,mBAAmB;GAAE,SAAS;GAAM,eAAe;EAAO;CAC5D;CAEA,UAAU,EAAE,OAAO,cAAc;CACjC,QAAQ,EAAE,YAAY,SAAS;AACjC,CAAC;;AAGD,IAAa,wBAAwB,IAAI,OAAO;CAC9C,MAAM;EAAE,SAAS;EAAS,OAAO;EAAS,QAAQ;CAAM;CACxD,SAAS;EAAE,SAAS;EAAS,OAAO;EAAO,QAAQ;CAAQ;CAC3D,QAAQ;EAAE,OAAO;EAAS,QAAQ;EAAS,YAAY;EAAG,cAAc;CAAQ;CAChF,QAAQ;EACN,OAAO;EACP,QAAQ,OAAO,EAAE,MAAM,QAAO,IAAK,EAAE,MAAM,UAAS;EACpD,YAAY;EACZ,cAAc;CAChB;CACA,OAAO;EAAE,SAAS;EAAS,OAAO;EAAS,aAAa;EAAU,cAAc;CAAM;AACxF,CAAC;;AAGD,IAAa,WAAW,0BACtB,QAAA,SAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,WAAa,IAAI;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAA6C,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAC1D;EACJ,IAAI,CAAA,QAAA,OAAU,OAAA,SAAA;EACd,MAAM,WAAW,SAAA,SAAY;EAC7B,OAAAC,YAAA,QAEQ,WACF,EACE,IAAI;GACF,eAAe;GACf,eAAe;GACf,cAAc;GACd,QAAA,SAAW,sBAAqB,QAAA;GAChC,CAAC,CAAA,MAAA,SAAU,cAAc,MAAM,GAAA,MAAA,MAAA,GAAY;GAC3C,YAAY,eAAe;EAAQ,EAEvC,GACA,MACA;GACE,eAAe;GAEf,OAAO,YAAY,KAAA;EACrB,CACF,GAAC,CAEA,YAAQA,YAAA,QACG,WAAmB,EAAE,IAAI,eAAe,OAAO,GAAC,aAAA,KAAc,GAAC,CAAA,SAAA,KAAA,CAAA,CAG1E,CAAA;CAGP;AAAC,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}
+{"version":3,"file":"Skeleton.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/feedback/Skeleton.tsx"],"sourcesContent":["/**\n * 骨架屏（span）：内容加载时的占位，一道光带从起始边扫过（shimmer.ts）。包着真实内容时，内容照常排版但不可见、\n * 不可交互，占位正好是内容的大小，加载完换成内容时布局不跳（同 Radix Themes 的 Skeleton）；\n * 不包内容时用 variant 选常用形状，或者由 sx 给大小。多行文字用 SkeletonText。\n *\n *   <Skeleton loading={loading}><Text>{user.name}</Text></Skeleton>\n *   <Skeleton variant=\"circle\" />\n *   <Skeleton variant=\"heading\" delay={SHIMMER_STAGGER} />      几块骨架依次扫过\n *   <Skeleton sx={styles.cover} />\n *\n * 占位对读屏隐藏；整块区域在加载时在外层加 aria-busy。减少动态效果时不扫光。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { shimmerStyles } from '../utils/style/shimmer';\nimport { shimmerVars } from '../utils/style/vars';\nimport { t } from '../config/theme/tokens';\n\n/** 骨架的常用形状 */\nexport interface SkeletonVariants {\n  /** 一行文字：高 1em，占满宽度 */\n  text: unknown;\n  /** 标题：高 1.5em，四成宽度 */\n  heading: unknown;\n  /** 圆：头像，边长 2.5em（与同字号的 Avatar 一样大） */\n  circle: unknown;\n  /** 按钮：控件高度，宽 6em */\n  button: unknown;\n  /** 图片：占满宽度，16:9 */\n  image: unknown;\n}\n\n/** 未声明的属性落到占位的 span 上（加载完成后不渲染它，只渲染内容） */\nexport interface SkeletonProps extends PartProps<'span', 'aria-hidden' | 'inert'> {\n  /**\n   * 是否在加载；false 时直接渲染内容\n   * @default true\n   */\n  loading?: boolean;\n  /** 形状；不写时大小由包着的内容或 sx 决定 */\n  variant?: keyof SkeletonVariants;\n  /** 扫光的延迟（毫秒）：几块骨架依次扫过、连成一道波时用（SkeletonText 的各行就是这样错开的） */\n  delay?: number;\n  /** 包着内容的那一层（不可见、只用来撑出大小）的部件属性 */\n  propsContent?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** 不包内容的骨架（SkeletonText 的各行、列表与表格的骨架行）的部件属性：加载与内容由组件管 */\nexport type SkeletonShapeProps = Omit<\n  Partial<SkeletonProps>,\n  'loading' | 'children' | 'propsContent'\n>;\n\n/** Skeleton 的样式：root、surface、wrapping、hidden */\nexport const skeletonStyles = css.create({\n  root: {\n    display: 'inline-block',\n    borderRadius: '_sm',\n    // 底色与光带都是半透明的正文色：叠在任何表面（页面、卡片、浮层）上都比表面深一档（暗色主题里浅一档），\n    // 十二套主题不必各调一遍；光带叠在底色上，再深一档\n    [shimmerVars.highlight]: `color-mix(in oklab, ${t.colors.text} 9%, transparent)`,\n    pointerEvents: 'none',\n    userSelect: 'none',\n  },\n  // 底色单独一项（root 里有 CSS 变量的键，条件取值放在一起时类型推不出来）。\n  // Windows 高对比下系统把背景色改掉，占位块就看不见了：用系统的灰色文字色\n  surface: {\n    backgroundColor: {\n      default: `color-mix(in oklab, ${t.colors.text} 9%, transparent)`,\n      _forcedColors: 'GrayText',\n    },\n    forcedColorAdjust: { default: null, _forcedColors: 'none' },\n  },\n  // 包着内容时：内容决定大小但看不见\n  wrapping: { color: 'transparent' },\n  hidden: { visibility: 'hidden' },\n});\n\n/** Skeleton 的样式：text、heading、circle、button、image */\nexport const skeletonVariantStyles = css.create({\n  text: { display: 'block', width: '_full', height: '1em' },\n  heading: { display: 'block', width: '40%', height: '1.5em' },\n  circle: { width: '2.5em', height: '2.5em', flexShrink: 0, borderRadius: '_full' },\n  button: {\n    width: '6em',\n    height: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    flexShrink: 0,\n    borderRadius: '_md',\n  },\n  image: { display: 'block', width: '_full', aspectRatio: '16 / 9', borderRadius: '_md' },\n});\n\n/** 骨架屏：加载时占位并扫光，包着内容时与内容一样大 */\nexport const Skeleton = _component(\n  ({ loading = true, variant, delay, propsContent, children, ...rest }: SkeletonProps) =>\n    () => {\n      if (!loading) return children;\n      const wrapping = children != null;\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            {\n              sx: [\n                skeletonStyles.root,\n                skeletonStyles.surface,\n                shimmerStyles.wave,\n                variant && skeletonVariantStyles[variant],\n                !!delay && shimmerStyles.delay(`${delay}ms`),\n                wrapping && skeletonStyles.wrapping,\n              ],\n            },\n            rest,\n            {\n              'aria-hidden': true,\n              // 包着的内容（链接、按钮）不能被 Tab 聚焦\n              inert: wrapping || undefined,\n            },\n          )}\n        >\n          {wrapping && (\n            <span {...mergeAttrs<'span'>({ sx: skeletonStyles.hidden }, propsContent)}>\n              {children}\n            </span>\n          )}\n        </span>\n      );\n    },\n);\n"],"mappings":";;;;;;;;;;;;AAyDA,IAAa,iBAAiB,IAAI,OAAO;CACvC,MAAM;EACJ,SAAS;EACT,cAAc;GAGb,YAAY,YAAY,uBAAuB,EAAE,OAAO,KAAI;EAC7D,eAAe;EACf,YAAY;CACd;CAGA,SAAS;EACP,iBAAiB;GACf,SAAS,uBAAuB,EAAE,OAAO,KAAI;GAC7C,eAAe;EACjB;EACA,mBAAmB;GAAE,SAAS;GAAM,eAAe;EAAO;CAC5D;CAEA,UAAU,EAAE,OAAO,cAAc;CACjC,QAAQ,EAAE,YAAY,SAAS;AACjC,CAAC;;AAGD,IAAa,wBAAwB,IAAI,OAAO;CAC9C,MAAM;EAAE,SAAS;EAAS,OAAO;EAAS,QAAQ;CAAM;CACxD,SAAS;EAAE,SAAS;EAAS,OAAO;EAAO,QAAQ;CAAQ;CAC3D,QAAQ;EAAE,OAAO;EAAS,QAAQ;EAAS,YAAY;EAAG,cAAc;CAAQ;CAChF,QAAQ;EACN,OAAO;EACP,QAAQ,OAAO,EAAE,MAAM,QAAO,IAAK,EAAE,MAAM,UAAS;EACpD,YAAY;EACZ,cAAc;CAChB;CACA,OAAO;EAAE,SAAS;EAAS,OAAO;EAAS,aAAa;EAAU,cAAc;CAAM;AACxF,CAAC;;AAGD,IAAa,WAAW,0BACtB,QAAA,SAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,WAAa,IAAI;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAA6C,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAC1D;EACJ,IAAI,CAAA,QAAA,OAAU,OAAA,SAAA;EACd,MAAM,WAAW,SAAA,SAAY;EAC7B,OAAAC,YAAA,QAEQ,WACF,EACE,IAAI;GACF,eAAe;GACf,eAAe;GACf,cAAc;GACd,QAAA,SAAW,sBAAqB,QAAA;GAChC,CAAC,CAAA,MAAA,SAAU,cAAc,MAAM,GAAA,MAAA,MAAA,GAAY;GAC3C,YAAY,eAAe;EAAQ,EAEvC,GACA,MACA;GACE,eAAe;GAEf,OAAO,YAAY,KAAA;EACrB,CACF,GAAC,CAEA,YAAQA,YAAA,QACG,WAAmB,EAAE,IAAI,eAAe,OAAO,GAAC,aAAA,KAAc,GAAC,CAAA,SAAA,KAAA,CAAA,CAG1E,CAAA;CAGP;AAAC,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}

package/dist/feedback/SkeletonText.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type PartProps } from '../utils/props';
 import { type SkeletonShapeProps } from './Skeleton';
 /** 未声明的属性落到外层 div 上 */

package/dist/feedback/SkeletonText.js

@@ -3,7 +3,7 @@ import "../utils/style/shimmer.js";
 import { Skeleton } from "./Skeleton.js";
 import { createVNode } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/feedback/SkeletonText.tsx
 /** 未声明的属性落到外层 div 上 */
 /** SkeletonText 的样式：root、last */

package/dist/feedback/SkeletonText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/SkeletonText.tsx"],"sourcesContent":["/**\n * 多行文字的骨架（div）：一段正文加载时的占位，几行 Skeleton，最后一行短一些（同 Ant Design 的 paragraph、\n * Chakra 的 SkeletonText）。行距与正文相近，换成内容时高度大致不变。各行的扫光依次错开，像一道波从上往下扫过。\n *\n *   <SkeletonText />\n *   <SkeletonText lines={5} />\n *   <SkeletonText delay={240} />      接在前面的骨架（标题、头像）后面扫\n *\n * 整块对读屏隐藏；在外层加 aria-busy。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { SHIMMER_STAGGER } from '../utils/style/shimmer';\nimport { Skeleton, type SkeletonProps, type SkeletonShapeProps } from './Skeleton';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface SkeletonTextProps extends PartProps<'div', 'aria-hidden'> {\n  /**\n   * 行数\n   * @default 3\n   */\n  lines?: number;\n  /**\n   * 第一行扫光的延迟（毫秒），之后每行再晚一点\n   * @default 0\n   */\n  delay?: number;\n  /** 每一行（Skeleton）的部件属性 */\n  propsLine?: SkeletonShapeProps;\n}\n\n/** SkeletonText 的样式：root、last */\nexport const skeletonTextStyles = css.create({\n  // 1em 高的行加 0.5em 间隔，接近正文 1.5 的行高\n  root: { display: 'flex', flexDirection: 'column', gap: '_sm' },\n  last: { width: '60%' },\n});\n\n/** 多行文字的骨架：最后一行短一些 */\nexport const SkeletonText = _component(\n  ({ lines = 3, delay = 0, propsLine, ...rest }: SkeletonTextProps) =>\n    () => (\n      <div {...mergeAttrs<'div'>({ sx: skeletonTextStyles.root }, rest, { 'aria-hidden': true })}>\n        {Array.from({ length: lines }, (_, index) => (\n          <Skeleton\n            key={index}\n            {...mergePartProps<SkeletonProps>(\n              {\n                variant: 'text',\n                delay: delay + index * SHIMMER_STAGGER,\n                sx: lines > 1 && index === lines - 1 && skeletonTextStyles.last,\n              },\n              propsLine,\n            )}\n          />\n        ))}\n      </div>\n    ),\n);\n"],"mappings":";;;;;;;;;AAiCA,IAAa,qBAAqB,IAAI,OAAO;CAE3C,MAAM;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;CAAM;CAC7D,MAAM,EAAE,OAAO,MAAM;AACvB,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SAAW,CAAC;CAAA,MAAA,QAAAA,aAAA,QAAA,SAAU,CAAC;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,IAAA;CAAA,aACzCC,YAAA,OACW,WAAkB,EAAE,IAAI,mBAAmB,KAAK,GAAG,MAAM,EAAE,eAAe,KAAK,CAAC,GAAC,CACvF,MAAM,KAAK,EAAE,QAAM,MAAA,MAAQ,IAAI,GAAG,UAAKA,YAAA,UAAAC,cAAA,EAAA,OAE/B,MAAK,GACN,eACF;EACE,SAAS;EACT,OAAO,MAAA,QAAQ,QAAA;EACf,IAAI,MAAA,QAAQ,KAAK,UAAU,MAAA,QAAQ,KAAK,mBAAmB;CAC7D,GAAC,UAAA,KAEH,CAAC,GAAA,IAAA,CAEJ,CAAC,CAAA;AAEL,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}
+{"version":3,"file":"SkeletonText.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/SkeletonText.tsx"],"sourcesContent":["/**\n * 多行文字的骨架（div）：一段正文加载时的占位，几行 Skeleton，最后一行短一些（同 Ant Design 的 paragraph、\n * Chakra 的 SkeletonText）。行距与正文相近，换成内容时高度大致不变。各行的扫光依次错开，像一道波从上往下扫过。\n *\n *   <SkeletonText />\n *   <SkeletonText lines={5} />\n *   <SkeletonText delay={240} />      接在前面的骨架（标题、头像）后面扫\n *\n * 整块对读屏隐藏；在外层加 aria-busy。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { SHIMMER_STAGGER } from '../utils/style/shimmer';\nimport { Skeleton, type SkeletonProps, type SkeletonShapeProps } from './Skeleton';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface SkeletonTextProps extends PartProps<'div', 'aria-hidden'> {\n  /**\n   * 行数\n   * @default 3\n   */\n  lines?: number;\n  /**\n   * 第一行扫光的延迟（毫秒），之后每行再晚一点\n   * @default 0\n   */\n  delay?: number;\n  /** 每一行（Skeleton）的部件属性 */\n  propsLine?: SkeletonShapeProps;\n}\n\n/** SkeletonText 的样式：root、last */\nexport const skeletonTextStyles = css.create({\n  // 1em 高的行加 0.5em 间隔，接近正文 1.5 的行高\n  root: { display: 'flex', flexDirection: 'column', gap: '_sm' },\n  last: { width: '60%' },\n});\n\n/** 多行文字的骨架：最后一行短一些 */\nexport const SkeletonText = _component(\n  ({ lines = 3, delay = 0, propsLine, ...rest }: SkeletonTextProps) =>\n    () => (\n      <div {...mergeAttrs<'div'>({ sx: skeletonTextStyles.root }, rest, { 'aria-hidden': true })}>\n        {Array.from({ length: lines }, (_, index) => (\n          <Skeleton\n            key={index}\n            {...mergePartProps<SkeletonProps>(\n              {\n                variant: 'text',\n                delay: delay + index * SHIMMER_STAGGER,\n                sx: lines > 1 && index === lines - 1 && skeletonTextStyles.last,\n              },\n              propsLine,\n            )}\n          />\n        ))}\n      </div>\n    ),\n);\n"],"mappings":";;;;;;;;;AAiCA,IAAa,qBAAqB,IAAI,OAAO;CAE3C,MAAM;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;CAAM;CAC7D,MAAM,EAAE,OAAO,MAAM;AACvB,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SAAW,CAAC;CAAA,MAAA,QAAAA,aAAA,QAAA,SAAU,CAAC;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,IAAA;CAAA,aACzCC,YAAA,OACW,WAAkB,EAAE,IAAI,mBAAmB,KAAK,GAAG,MAAM,EAAE,eAAe,KAAK,CAAC,GAAC,CACvF,MAAM,KAAK,EAAE,QAAM,MAAA,MAAQ,IAAI,GAAG,UAAKA,YAAA,UAAAC,cAAA,EAAA,OAE/B,MAAK,GACN,eACF;EACE,SAAS;EACT,OAAO,MAAA,QAAQ,QAAA;EACf,IAAI,MAAA,QAAQ,KAAK,UAAU,MAAA,QAAQ,KAAK,mBAAmB;CAC7D,GAAC,UAAA,KAEH,CAAC,GAAA,IAAA,CAEJ,CAAC,CAAA;AAEL,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}

package/dist/feedback/Toast.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type VNodeChild } from 'vue';
 import type { IconData } from '../base/Icon';
 import { type CollapseProps } from '../display/Collapse';

package/dist/feedback/Toast.js

@@ -16,7 +16,7 @@ import { ConfigScope } from "../config/Provider.js";
 import { usePageVisible } from "../utils/dom/page-visibility.js";
 import { Teleport, createVNode, isVNode, nextTick, onBeforeUnmount, onMounted, ref, shallowReactive, shallowRef, watch } from "vue";
 import { _component, effect, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { utils } from "animejs";
 //#region src/feedback/Toast.tsx
 /**