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

package/dist/display/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_ref","_vtp_untrack","_createVNode","_Fragment","_mergeProps","_vtp_childrenProp","_vue_shallowRef"],"sources":["../../src/display/Image.tsx"],"sourcesContent":["/**\n * 图片：懒加载，加载时是扫光的占位，加载失败显示占位与原因；写了 preview 时点击（或 Enter）看大图（Lightbox）。\n * 同一个 ImageGroup 里的图片共用一个 Lightbox，大图里可以左右切换（相册、工单附件、验收照片）。\n *\n *   <Image src=\"/photos/1-thumb.jpg\" alt=\"支架正面\" width={160} height={120} preview={{ src: '/photos/1.jpg' }} />\n *   <ImageGroup>\n *     {photos.map((photo) => <Image src={photo.thumb} alt={photo.title} preview={{ src: photo.url }} />)}\n *   </ImageGroup>\n *\n * 可以预览的图片是按钮：名称“查看大图：alt”，键盘能到。尺寸写 width、height（数字是 px），object-fit 用 fit。\n * 部件：Root（span，可以预览时是 button）、Image（img）、Fallback（span）。\n */\nimport { ImageOff } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch, type VNodeChild } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { Lightbox, type LightboxItem, type LightboxProps } from '../overlay/Lightbox';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { shimmerStyles } from '../utils/style/shimmer';\nimport { focusRingStyles, radiusStyles, type Radius } from '../utils/style/styles';\n\n/** object-fit 的取值 */\nexport interface ImageFits {\n  /** 铺满、裁掉多余（默认）：缩略图、头像 */\n  cover: unknown;\n  /** 整张放进去、留白：商品图、图纸 */\n  contain: unknown;\n  /** 拉伸铺满 */\n  fill: unknown;\n  /** 原大，超出的裁掉 */\n  none: unknown;\n  /** 比框大时同 contain，否则原大 */\n  'scale-down': unknown;\n}\n\n/** 预览的选项 */\nexport interface ImagePreviewOptions {\n  /** 大图的地址；不写时用 src */\n  src?: string;\n  /** 大图下方的说明 */\n  caption?: VNodeChild;\n  /** 下载的文件名；false 不显示下载按钮 */\n  download?: string | false;\n}\n\n/** 未声明的属性落到 img 上；外层用 propsRoot */\nexport interface ImageProps extends PartProps<'img', 'src' | 'alt' | 'width' | 'height'> {\n  /** 图片地址 */\n  src: string;\n  /** 图片的说明：读屏念它，加载失败时也显示 */\n  alt: string;\n  /** 宽度：数字是 px，也可以写 CSS 长度；不写时按图片 */\n  width?: number | string;\n  /** 高度：数字是 px，也可以写 CSS 长度 */\n  height?: number | string;\n  /** 图片在框里怎么放，默认 cover */\n  fit?: keyof ImageFits;\n  /** 圆角档位，默认 md */\n  radius?: Radius;\n  /** 点击看大图：true 或预览的选项（大图地址、说明、下载） */\n  preview?: boolean | ImagePreviewOptions;\n  /** 加载失败时显示的内容；默认是图标与 alt */\n  fallback?: VNodeChild;\n  /** 外层（span，可以预览时是 button）的部件属性 */\n  propsRoot?: PartProps<'span'>;\n  /** 加载失败的占位的部件属性 */\n  propsFallback?: PartProps<'span'>;\n}\n\n/** Image 的样式：root、button、image、hidden、fallback */\nexport const imageStyles = css.create({\n  root: {\n    position: 'relative',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    verticalAlign: 'middle',\n    backgroundColor: '_fill',\n    color: '_textMuted',\n  },\n  // 可以预览：去掉按钮外观，指针变成放大镜\n  button: {\n    padding: 0,\n    borderWidth: 0,\n    font: 'inherit',\n    cursor: 'zoom-in',\n  },\n  image: { display: 'block', width: '100%', height: '100%' },\n  // 加载完之前不显示（占位在扫光）；没写尺寸时仍占位，量得出图片大小\n  hidden: { opacity: 0 },\n  fallback: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_xs',\n    padding: '_sm',\n    fontSize: '_xs',\n    textAlign: 'center',\n  },\n});\n\n/** Image 的 object-fit：cover、contain、fill、none、scale-down */\nexport const imageFitStyles = css.create({\n  cover: { objectFit: 'cover' },\n  contain: { objectFit: 'contain' },\n  fill: { objectFit: 'fill' },\n  none: { objectFit: 'none' },\n  'scale-down': { objectFit: 'scale-down' },\n});\n\n/** Image 的动态样式：尺寸 */\nexport const imageDynamicStyles = css.create({\n  size: (width: string, height: string) => ({ width, height }),\n});\n\n/** ImageGroup 交给里面的 Image 的：登记自己、打开预览 */\ninterface ImageGroupState {\n  /** 登记一张可以预览的图，返回读它当前序号的函数与注销函数 */\n  register(item: () => LightboxItem): { index: () => number; release: () => void };\n  /** 从第 index 张打开预览 */\n  open(index: number): void;\n}\n\nconst ImageGroupContext = createContext<ImageGroupState>('ImageGroup');\n\nconst toLength = (value: number | string | undefined) =>\n  value == null ? 'auto' : typeof value === 'number' ? `${value}px` : value;\n\n/** 图片：懒加载、加载中占位、失败占位，可以点开看大图 */\nexport const Image = _component(\n  ({\n    src,\n    alt,\n    width,\n    height,\n    fit = 'cover',\n    radius = 'md',\n    preview = false,\n    fallback,\n    propsRoot,\n    propsFallback,\n    ...rest\n  }: ImageProps) => {\n    const lang = useLang();\n    const group = ImageGroupContext.inject(null);\n    let status = _state<'loading' | 'loaded' | 'error'>('loading');\n    let viewing = _state(false);\n    const options = () => (typeof preview === 'object' ? preview : {});\n    const item = (): LightboxItem => ({\n      src: options().src ?? src,\n      alt,\n      caption: options().caption,\n      download: options().download,\n    });\n    // 在 ImageGroup 里：登记自己，预览交给组\n    const membership = _untrack(preview) && group ? group.register(item) : undefined;\n    if (membership) _effect(() => membership.release);\n\n    // 地址换了：重新加载（只在变化时；挂载后再置回 loading 会盖掉已经到了的 load，缓存里的图就一直不显示）\n    watch(\n      () => src,\n      () => (status = 'loading'),\n    );\n\n    function open() {\n      if (membership) group!.open(membership.index());\n      else viewing = true;\n    }\n\n    return () => {\n      const sx = [\n        imageStyles.root,\n        radiusStyles[radius],\n        imageDynamicStyles.size(toLength(width), toLength(height)),\n        status === 'loading' && shimmerStyles.wave,\n      ];\n      const content = (\n        <>\n          {status !== 'error' && (\n            <img\n              {...mergeAttrs<'img'>(\n                {\n                  sx: [\n                    imageStyles.image,\n                    imageFitStyles[fit],\n                    status === 'loading' && imageStyles.hidden,\n                    status === 'loaded' && shimmerStyles.reveal,\n                  ],\n                  loading: 'lazy',\n                  decoding: 'async',\n                },\n                rest,\n                {\n                  src,\n                  alt,\n                  onLoad: () => (status = 'loaded'),\n                  onError: () => (status = 'error'),\n                },\n              )}\n            />\n          )}\n          {status === 'error' && (\n            <span\n              {...mergeAttrs<'span'>({ sx: imageStyles.fallback }, propsFallback, {\n                role: 'img',\n                'aria-label': alt,\n              })}\n              aria-description={lang.imageError}\n            >\n              {fallback ?? (\n                <>\n                  <Icon icon={ImageOff} />\n                  <span aria-hidden=\"true\">{alt}</span>\n                </>\n              )}\n            </span>\n          )}\n        </>\n      );\n      if (!preview || status === 'error')\n        return <span {...mergeAttrs<'span'>({ sx }, propsRoot)}>{content}</span>;\n      return (\n        <>\n          <button\n            {...mergeAttrs<'button'>(\n              { sx: [...sx, imageStyles.button, focusRingStyles.visible] },\n              propsRoot as PartProps<'button'>,\n              { type: 'button', 'aria-label': lang.imagePreview(alt), onClick: open },\n            )}\n          >\n            {content}\n          </button>\n          {!membership && <Lightbox items={[item()]} _open={viewing} />}\n        </>\n      );\n    };\n  },\n);\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ImageGroupProps extends PartProps<'div'> {\n  /** 到头之后从另一头继续，默认 false */\n  loop?: boolean;\n  /** 预览（Lightbox）的部件属性 */\n  propsLightbox?: Partial<LightboxProps>;\n  /** 里面的 Image（也可以夹着别的内容） */\n  children?: VNodeChild;\n}\n\n/** ImageGroup 的样式：root */\nexport const imageGroupStyles = css.create({\n  root: { display: 'flex', flexWrap: 'wrap', gap: '_sm' },\n});\n\n/** 一组图片：共用一个预览，大图里左右切换 */\nexport const ImageGroup = _component(\n  ({ loop = false, propsLightbox, children, ...rest }: ImageGroupProps) => {\n    // 登记的图片：按登记（渲染）的顺序。不是响应式的：组的渲染不能读它们的属性——\n    // 渲染里生成的子节点会给它们新的属性，读了就又触发组的渲染，无限循环\n    let entries: { read: () => LightboxItem }[] = [];\n    // 打开预览时取的一份\n    let items = _state.raw<LightboxItem[]>([]);\n    let open = _state(false);\n    let index = _state(0);\n\n    ImageGroupContext.provide({\n      register(read) {\n        const entry = { read };\n        entries = [...entries, entry];\n        return {\n          index: () => entries.indexOf(entry),\n          release: () => (entries = entries.filter((item) => item !== entry)),\n        };\n      },\n      open(at) {\n        items = entries.map((entry) => entry.read());\n        index = at;\n        open = true;\n      },\n    });\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: imageGroupStyles.root }, rest)}>\n        {children}\n        <Lightbox\n          {...mergePartProps<Partial<LightboxProps>>({ loop }, propsLightbox)}\n          items={items}\n          _open={open}\n          _index={index}\n        />\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Image.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_ref","_vtp_untrack","_createVNode","_Fragment","_mergeProps","_vtp_childrenProp","_vue_shallowRef"],"sources":["../../src/display/Image.tsx"],"sourcesContent":["/**\n * 图片：懒加载，加载时是扫光的占位，加载失败显示占位与原因；写了 preview 时点击（或 Enter）看大图（Lightbox）。\n * 同一个 ImageGroup 里的图片共用一个 Lightbox，大图里可以左右切换（相册、工单附件、验收照片）。\n *\n *   <Image src=\"/photos/1-thumb.jpg\" alt=\"支架正面\" width={160} height={120} preview={{ src: '/photos/1.jpg' }} />\n *   <ImageGroup>\n *     {photos.map((photo) => <Image src={photo.thumb} alt={photo.title} preview={{ src: photo.url }} />)}\n *   </ImageGroup>\n *\n * 可以预览的图片是按钮：名称“查看大图：alt”，键盘能到。尺寸写 width、height（数字是 px），object-fit 用 fit。\n * 部件：Root（span，可以预览时是 button）、Image（img）、Fallback（span）。\n */\nimport { ImageOff } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch, type VNodeChild } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { Lightbox, type LightboxItem, type LightboxProps } from '../overlay/Lightbox';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { shimmerStyles } from '../utils/style/shimmer';\nimport { focusRingStyles, radiusStyles, type Radius } from '../utils/style/styles';\n\n/** object-fit 的取值 */\nexport interface ImageFits {\n  /** 铺满、裁掉多余（默认）：缩略图、头像 */\n  cover: unknown;\n  /** 整张放进去、留白：商品图、图纸 */\n  contain: unknown;\n  /** 拉伸铺满 */\n  fill: unknown;\n  /** 原大，超出的裁掉 */\n  none: unknown;\n  /** 比框大时同 contain，否则原大 */\n  'scale-down': unknown;\n}\n\n/** 预览的选项 */\nexport interface ImagePreviewOptions {\n  /** 大图的地址；不写时用 src */\n  src?: string;\n  /** 大图下方的说明 */\n  caption?: VNodeChild;\n  /** 下载的文件名；false 不显示下载按钮 */\n  download?: string | false;\n}\n\n/** 未声明的属性落到 img 上；外层用 propsRoot */\nexport interface ImageProps extends PartProps<'img', 'src' | 'alt' | 'width' | 'height'> {\n  /** 图片地址 */\n  src: string;\n  /** 图片的说明：读屏念它，加载失败时也显示 */\n  alt: string;\n  /** 宽度：数字是 px，也可以写 CSS 长度；不写时按图片 */\n  width?: number | string;\n  /** 高度：数字是 px，也可以写 CSS 长度 */\n  height?: number | string;\n  /** 图片在框里怎么放，默认 cover */\n  fit?: keyof ImageFits;\n  /** 圆角档位，默认 md */\n  radius?: Radius;\n  /** 点击看大图：true 或预览的选项（大图地址、说明、下载） */\n  preview?: boolean | ImagePreviewOptions;\n  /** 加载失败时显示的内容；默认是图标与 alt */\n  fallback?: VNodeChild;\n  /** 外层（span，可以预览时是 button）的部件属性 */\n  propsRoot?: PartProps<'span'>;\n  /** 加载失败的占位的部件属性 */\n  propsFallback?: PartProps<'span'>;\n}\n\n/** Image 的样式：root、button、image、hidden、fallback */\nexport const imageStyles = css.create({\n  root: {\n    position: 'relative',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    verticalAlign: 'middle',\n    backgroundColor: '_fill',\n    color: '_textMuted',\n  },\n  // 可以预览：去掉按钮外观，指针变成放大镜\n  button: {\n    padding: 0,\n    borderWidth: 0,\n    font: 'inherit',\n    cursor: 'zoom-in',\n  },\n  image: { display: 'block', width: '100%', height: '100%' },\n  // 加载完之前不显示（占位在扫光）；没写尺寸时仍占位，量得出图片大小\n  hidden: { opacity: 0 },\n  fallback: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_xs',\n    padding: '_sm',\n    fontSize: '_xs',\n    textAlign: 'center',\n  },\n});\n\n/** Image 的 object-fit：cover、contain、fill、none、scale-down */\nexport const imageFitStyles = css.create({\n  cover: { objectFit: 'cover' },\n  contain: { objectFit: 'contain' },\n  fill: { objectFit: 'fill' },\n  none: { objectFit: 'none' },\n  'scale-down': { objectFit: 'scale-down' },\n});\n\n/** Image 的动态样式：尺寸 */\nexport const imageDynamicStyles = css.create({\n  size: (width: string, height: string) => ({ width, height }),\n});\n\n/** ImageGroup 交给里面的 Image 的：登记自己、打开预览 */\ninterface ImageGroupState {\n  /** 登记一张可以预览的图，返回读它当前序号的函数与注销函数 */\n  register(item: () => LightboxItem): { index: () => number; release: () => void };\n  /** 从第 index 张打开预览 */\n  open(index: number): void;\n}\n\nconst ImageGroupContext = createContext<ImageGroupState>('ImageGroup');\n\nconst toLength = (value: number | string | undefined) =>\n  value == null ? 'auto' : typeof value === 'number' ? `${value}px` : value;\n\n/** 图片：懒加载、加载中占位、失败占位，可以点开看大图 */\nexport const Image = _component(\n  ({\n    src,\n    alt,\n    width,\n    height,\n    fit = 'cover',\n    radius = 'md',\n    preview = false,\n    fallback,\n    propsRoot,\n    propsFallback,\n    ...rest\n  }: ImageProps) => {\n    const lang = useLang();\n    const group = ImageGroupContext.inject(null);\n    let status = _state<'loading' | 'loaded' | 'error'>('loading');\n    let viewing = _state(false);\n    const options = () => (typeof preview === 'object' ? preview : {});\n    const item = (): LightboxItem => ({\n      src: options().src ?? src,\n      alt,\n      caption: options().caption,\n      download: options().download,\n    });\n    // 在 ImageGroup 里：登记自己，预览交给组\n    const membership = _untrack(preview) && group ? group.register(item) : undefined;\n    if (membership) _effect(() => membership.release);\n\n    // 地址换了：重新加载（只在变化时；挂载后再置回 loading 会盖掉已经到了的 load，缓存里的图就一直不显示）\n    watch(\n      () => src,\n      () => (status = 'loading'),\n    );\n\n    function open() {\n      if (membership) group!.open(membership.index());\n      else viewing = true;\n    }\n\n    return () => {\n      const sx = [\n        imageStyles.root,\n        radiusStyles[radius],\n        imageDynamicStyles.size(toLength(width), toLength(height)),\n        status === 'loading' && shimmerStyles.wave,\n      ];\n      const content = (\n        <>\n          {status !== 'error' && (\n            <img\n              {...mergeAttrs<'img'>(\n                {\n                  sx: [\n                    imageStyles.image,\n                    imageFitStyles[fit],\n                    status === 'loading' && imageStyles.hidden,\n                    status === 'loaded' && shimmerStyles.reveal,\n                  ],\n                  loading: 'lazy',\n                  decoding: 'async',\n                },\n                rest,\n                {\n                  src,\n                  alt,\n                  onLoad: () => (status = 'loaded'),\n                  onError: () => (status = 'error'),\n                },\n              )}\n            />\n          )}\n          {status === 'error' && (\n            <span\n              {...mergeAttrs<'span'>({ sx: imageStyles.fallback }, propsFallback, {\n                role: 'img',\n                'aria-label': alt,\n              })}\n              aria-description={lang.imageError}\n            >\n              {fallback ?? (\n                <>\n                  <Icon icon={ImageOff} />\n                  <span aria-hidden=\"true\">{alt}</span>\n                </>\n              )}\n            </span>\n          )}\n        </>\n      );\n      if (!preview || status === 'error')\n        return <span {...mergeAttrs<'span'>({ sx }, propsRoot)}>{content}</span>;\n      return (\n        <>\n          <button\n            {...mergeAttrs<'button'>(\n              { sx: [...sx, imageStyles.button, focusRingStyles.visible] },\n              propsRoot as PartProps<'button'>,\n              { type: 'button', 'aria-label': lang.imagePreview(alt), onClick: open },\n            )}\n          >\n            {content}\n          </button>\n          {!membership && <Lightbox items={[item()]} _open={viewing} />}\n        </>\n      );\n    };\n  },\n);\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ImageGroupProps extends PartProps<'div'> {\n  /** 到头之后从另一头继续，默认 false */\n  loop?: boolean;\n  /** 预览（Lightbox）的部件属性 */\n  propsLightbox?: Partial<LightboxProps>;\n  /** 里面的 Image（也可以夹着别的内容） */\n  children?: VNodeChild;\n}\n\n/** ImageGroup 的样式：root */\nexport const imageGroupStyles = css.create({\n  root: { display: 'flex', flexWrap: 'wrap', gap: '_sm' },\n});\n\n/** 一组图片：共用一个预览，大图里左右切换 */\nexport const ImageGroup = _component(\n  ({ loop = false, propsLightbox, children, ...rest }: ImageGroupProps) => {\n    // 登记的图片：按登记（渲染）的顺序。不是响应式的：组的渲染不能读它们的属性——\n    // 渲染里生成的子节点会给它们新的属性，读了就又触发组的渲染，无限循环\n    let entries: { read: () => LightboxItem }[] = [];\n    // 打开预览时取的一份\n    let items = _state.raw<LightboxItem[]>([]);\n    let open = _state(false);\n    let index = _state(0);\n\n    ImageGroupContext.provide({\n      register(read) {\n        const entry = { read };\n        entries = [...entries, entry];\n        return {\n          index: () => entries.indexOf(entry),\n          release: () => (entries = entries.filter((item) => item !== entry)),\n        };\n      },\n      open(at) {\n        items = entries.map((entry) => entry.read());\n        index = at;\n        open = true;\n      },\n    });\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: imageGroupStyles.root }, rest)}>\n        {children}\n        <Lightbox\n          {...mergePartProps<Partial<LightboxProps>>({ loop }, propsLightbox)}\n          items={items}\n          _open={open}\n          _index={index}\n        />\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACV,eAAe;EACf,iBAAiB;EACjB,OAAO;CACT;CAEA,QAAQ;EACN,SAAS;EACT,aAAa;EACb,MAAM;EACN,QAAQ;CACV;CACA,OAAO;EAAE,SAAS;EAAS,OAAO;EAAQ,QAAQ;CAAO;CAEzD,QAAQ,EAAE,SAAS,EAAE;CACrB,UAAU;EACR,SAAS;EACT,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,KAAK;EACL,SAAS;EACT,UAAU;EACV,WAAW;CACb;AACF,CAAC;;AAGD,IAAa,iBAAiB,IAAI,OAAO;CACvC,OAAO,EAAE,WAAW,QAAQ;CAC5B,SAAS,EAAE,WAAW,UAAU;CAChC,MAAM,EAAE,WAAW,OAAO;CAC1B,MAAM,EAAE,WAAW,OAAO;CAC1B,cAAc,EAAE,WAAW,aAAa;AAC1C,CAAC;;AAGD,IAAa,qBAAqB,IAAI,OAAO,EAC3C,OAAO,OAAe,YAAoB;CAAE;CAAO;AAAO,GAC5D,CAAC;;AAUD,IAAM,oBAAoB,cAA+B,YAAY;AAErE,IAAM,YAAY,UAChB,SAAS,OAAO,SAAS,OAAO,UAAU,WAAW,GAAG,MAAK,MAAO;;AAGtE,IAAa,QAAQ,0BACnB,QAAA,SAYkB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,OAPV,OAAO;CAAA,MAAA,SAAAA,aAAA,QAAA,UACJ,IAAI;CAAA,MAAA,UAAAA,aAAA,QAAA,WACH,KAAK;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAIZ,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,kBAAkB,OAAO,IAAI;CAC3C,IAAI,SAAMC,IAA0C,SAAS;CAC7D,IAAI,UAAOA,IAAU,KAAK;CAC1B,MAAM,gBAAiB,OAAA,QAAA,UAAmB,WAAQ,QAAA,QAAa,CAAC;CAChE,MAAM,cAA4B;EAChC,KAAK,QAAQ,CAAC,CAAC,OAAG,IAAA;EAClB,KAAG,IAAA;EACH,SAAS,QAAQ,CAAC,CAAC;EACnB,UAAU,QAAQ,CAAC,CAAC;CACtB;CAEA,MAAM,aAAaC,cAAA,QAAA,KAAA,KAAqB,QAAQ,MAAM,SAAS,IAAI,IAAI,KAAA;CACvE,IAAI,YAAY,aAAc,WAAW,OAAO;CAGhD,YACE,IAAA,aACO,OAAA,QAAS,SAClB;CAEA,SAAS,OAAO;EACd,IAAI,YAAY,MAAO,KAAK,WAAW,MAAM,CAAC;OACzC,QAAA,QAAU;CACjB;CAEA,aAAa;EACX,MAAM,KAAK;GACT,YAAY;GACZ,aAAY,OAAA;GACZ,mBAAmB,KAAK,SAAQ,MAAA,KAAM,GAAG,SAAQ,OAAA,KAAO,CAAC;GACzD,OAAA,UAAW,aAAa,cAAc;EAAI;EAE5C,MAAM,UAAOC,YAAAC,UAAA,MAAA,CAER,OAAA,UAAW,WAAOD,YAAA,OAEX,WACF;GACE,IAAI;IACF,YAAY;IACZ,eAAc,IAAA;IACd,OAAA,UAAW,aAAa,YAAY;IACpC,OAAA,UAAW,YAAY,cAAc;GAAM;GAE7C,SAAS;GACT,UAAU;EACZ,GACA,MACA;GACE,KAAG,IAAA;GACH,KAAG,IAAA;GACH,cAAe,OAAA,QAAS;GACxB,eAAgB,OAAA,QAAS;EAC3B,CACF,GAAC,IAAA,GAGJ,OAAA,UAAW,WAAOA,YAAA,QAAAE,cAEX,WAAmB,EAAE,IAAI,YAAY,SAAS,GAAC,cAAA,OAAiB;GAClE,MAAM;GACN,cAAY,IAAA;EACd,CAAC,GAAC,EAAA,oBACgB,KAAK,WAAU,CAAA,GAAA,CAEhC,SAAA,SAAAF,YAAAC,UAAA,MAAA,CAAAD,YAAA,MAAA,EAAA,QAEe,SAAQ,GAAA,IAAA,GAAAA,YAAA,QAAA,EAAA,eAAA,OAAA,GAAA,CAAA,IAAA,KAAA,CAAA,CAAA,CAAA,CAGvB,CAAA,CAEJ,CAAA;EAGL,IAAI,CAAA,QAAA,SAAY,OAAA,UAAW,SACzB,OAAAA,YAAA,QAAiB,WAAmB,EAAE,GAAG,GAAC,UAAA,KAAW,GAAC,CAAG,OAAO,CAAA;EAClE,OAAAA,YAAAC,UAAA,MAAA,CAAAD,YAAA,UAGU,WACF,EAAE,IAAI;GAAC,GAAG;GAAI,YAAY;GAAQ,gBAAgB;EAAO,EAAE,GAAC,UAAA,OAE5D;GAAE,MAAM;GAAU,cAAc,KAAK,aAAY,IAAA,KAAI;GAAG,SAAS;EAAK,CACxE,GAAC,CAEA,OAAO,CAAA,GAET,CAAC,cAAUA,YAAA,UAAA;GAAA,SAAqB,CAAC,KAAK,CAAC;GAAC,SAAA,QAAA;GAAA,kBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,QAAA,QAAA;EAAA,GAAA,IAAA,CAAoB,CAAA;CAGnE;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;AAaA,IAAa,mBAAmB,IAAI,OAAO,EACzC,MAAM;CAAE,SAAS;CAAQ,UAAU;CAAQ,KAAK;AAAM,EACxD,CAAC;;AAGD,IAAa,aAAa,0BACxB,SAAA,UAAyE;CAAA,MAAA,UAAA,CAAA;CAAA,MAAA,OAAAJ,aAAA,SAAA,QAA/D,KAAK;CAAA,MAAA,gBAAAA,aAAA,SAAA,eAAA;CAAA,MAAA,WAAAO,aAAA,OAAA;CAAA,MAA8B,OAAIN,UAAA,SAAA,OAAA,KAAA;CAG/C,IAAI,UAA0C,CAAA;CAE9C,IAAI,QAAKO,WAA8B,CAAA,CAAE;CACzC,IAAI,OAAIN,IAAU,KAAK;CACvB,IAAI,QAAKA,IAAU,CAAC;CAEpB,kBAAkB,QAAQ;EACxB,SAAS,MAAM;GACb,MAAM,QAAQ,EAAE,KAAK;GACrB,UAAU,CAAC,GAAG,SAAS,KAAK;GAC5B,OAAO;IACL,aAAa,QAAQ,QAAQ,KAAK;IAClC,eAAgB,UAAU,QAAQ,QAAQ,SAAS,SAAS,KAAK;GACnE;EACF;EACA,KAAK,IAAI;GACP,MAAA,QAAQ,QAAQ,KAAK,UAAU,MAAM,KAAK,CAAC;GAC3C,MAAA,QAAQ;GACR,KAAA,QAAO;EACT;CACF,CAAC;CAED,aAAOE,YAAA,OACI,WAAkB,EAAE,IAAI,iBAAiB,KAAK,GAAG,IAAI,GAAC,CAAA,SAAA,OAAAA,YAAA,UAAAE,cAGvD,eAAuC,EAAE,MAAI,KAAA,MAAC,GAAC,cAAA,KAAe,GAAC;EAAA,SAAA,MAAA;EAAA,SAAA,KAAA;EAAA,kBAAA,QAAA,OAAA,QAAA,MAAA,WAAA,KAAA,QAAA;EAAA,UAAA,MAAA;EAAA,mBAAA,QAAA,OAAA,QAAA,MAAA,WAAA,MAAA,QAAA;CAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAO3E,GAAC;CAAA,MAAA;CAAA,OAAA,CAAA,QAAA,eAAA;AAAA,CACH"}

package/dist/display/Marquee.js

@@ -2,8 +2,8 @@ import { mergeAttrs } from "../utils/props.js";
 import { focusRingStyles, gapStyles } from "../utils/style/styles.js";
 import { useResizeObserver } from "../utils/dom/resize.js";
 import { useReducedMotion } from "../utils/dom/media-query.js";
-import { createVNode, mergeProps, ref, shallowRef } from "vue";
-import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, ref, shallowRef } from "vue";
+import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/display/Marquee.tsx
 /** 滚动方向 */
@@ -116,7 +116,7 @@ var Marquee = /*#__PURE__*/ _component((_props, _ctx) => {
 		"aria-hidden": true,
 		inert: true
 	} : { ref: group }), [children.value]);
-	return () => createVNode("div", mergeProps(mergeAttrs({
+	return () => createVNode("div", mergeJsxProps(mergeAttrs({
 		sx: [
 			marqueeStyles.root,
 			css.select(() => vertical() && marqueeStyles.vertical, true),

package/dist/display/Marquee.js.map

@@ -1 +1 @@
-{"version":3,"file":"Marquee.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/display/Marquee.tsx"],"sourcesContent":["/**\n * 跑马灯（div）：内容循环滚动（合作伙伴 logo、公告、标签墙）。纯 CSS 动画：内容复制一份接在后面，\n * 平移到正好一份的长度时与开头重合，无缝循环。\n *\n *   <Marquee speed={40} pauseOnHover aria-label=\"合作伙伴\">\n *     {partners.map((partner) => <img src={partner.logo} alt={partner.name} />)}\n *   </Marquee>\n *\n * - 方向 left / right / up / down；speed 是每秒多少 px（按一份内容的长度换算成动画时长，内容变化时重新量）；\n * - 指针悬停、焦点在里面时暂停（pauseOnHover）；paused 由外部控制（WCAG 2.2.2：给用户一个暂停按钮）；\n * - 减少动态效果时不滚动，内容可以手动滚动查看（容器可以聚焦，键盘也能滚）；\n * - role=\"marquee\"（ARIA 的跑马灯角色，用 aria-label 命名）；复制的那份对读屏隐藏且不可聚焦（inert），读屏只念一遍。\n *\n * 部件：Root（div）、Track（div，做动画的那一层）、Group（div，一份内容）。\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 { useReducedMotion } from '../utils/dom/media-query';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles, gapStyles, type Space, type StyleTable } from '../utils/style/styles';\n\n/** 滚动方向 */\nexport interface MarqueeDirections {\n  /** 向左（默认） */\n  left: unknown;\n  /** 向右 */\n  right: unknown;\n  /** 向上 */\n  up: unknown;\n  /** 向下 */\n  down: unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface MarqueeProps extends PartProps<'div'> {\n  /** 滚动方向，默认 left */\n  direction?: keyof MarqueeDirections;\n  /** 速度：每秒多少 px，默认 40 */\n  speed?: number;\n  /** 指针悬停、焦点在里面时暂停，默认 true */\n  pauseOnHover?: boolean;\n  /** 暂停 */\n  paused?: boolean;\n  /** 两端渐隐 */\n  fade?: boolean;\n  /** 项之间（以及两份之间）的间距，默认 lg */\n  gap?: Space;\n  /** 动画层的部件属性 */\n  propsTrack?: PartProps<'div'>;\n  /** 每一份内容的部件属性 */\n  propsGroup?: PartProps<'div'>;\n  /** 内容 */\n  children?: VNodeChild;\n}\n\nconst scrollX = css.keyframes({\n  from: { transform: 'none' },\n  to: { transform: 'translateX(-50%)' },\n});\nconst scrollY = css.keyframes({\n  from: { transform: 'none' },\n  to: { transform: 'translateY(-50%)' },\n});\n\n/** Marquee 的样式：root、vertical、fade、track、trackVertical、reverse、pausable、paused、group */\nexport const marqueeStyles = css.create({\n  root: {\n    display: 'flex',\n    overflow: { default: 'hidden', _reducedMotion: 'auto' },\n  },\n  vertical: { flexDirection: 'column' },\n  fade: {\n    maskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)',\n  },\n  fadeVertical: {\n    maskImage: 'linear-gradient(to bottom, transparent, black 10%, black 90%, transparent)',\n  },\n  // 两份内容并排；平移 -50% 正好是一份（含它后面的间距）\n  track: {\n    display: 'flex',\n    flexShrink: 0,\n    width: 'max-content',\n    animationName: { default: scrollX, _reducedMotion: 'none' },\n    animationTimingFunction: 'linear',\n    animationIterationCount: 'infinite',\n  },\n  trackVertical: {\n    flexDirection: 'column',\n    width: 'auto',\n    height: 'max-content',\n    animationName: { default: scrollY, _reducedMotion: 'none' },\n  },\n  reverse: { animationDirection: 'reverse' },\n  pausable: {\n    animationPlayState: { default: 'running', ':hover': 'paused', ':focus-within': 'paused' },\n  },\n  paused: { animationPlayState: 'paused' },\n  group: { display: 'flex', flexShrink: 0, alignItems: 'center' },\n  groupVertical: { flexDirection: 'column' },\n  // 不滚动时用不着复制的那份\n  copy: { display: { default: null, _reducedMotion: 'none' } },\n});\n\n/** Marquee 的样式：每份内容后面的间距（横排时在行尾、竖排时在下方），与项之间的 gap 一样宽 */\nexport const marqueeTrailStyles: Readonly<Record<'inline' | 'block', StyleTable<Space>>> = {\n  inline: css.create({\n    none: { paddingInlineEnd: '_none' },\n    xs: { paddingInlineEnd: '_xs' },\n    sm: { paddingInlineEnd: '_sm' },\n    md: { paddingInlineEnd: '_md' },\n    lg: { paddingInlineEnd: '_lg' },\n    xl: { paddingInlineEnd: '_xl' },\n  }),\n  block: css.create({\n    none: { paddingBlockEnd: '_none' },\n    xs: { paddingBlockEnd: '_xs' },\n    sm: { paddingBlockEnd: '_sm' },\n    md: { paddingBlockEnd: '_md' },\n    lg: { paddingBlockEnd: '_lg' },\n    xl: { paddingBlockEnd: '_xl' },\n  }),\n};\n\n// 时长是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Marquee 的样式：duration（一圈的时长） */\nexport const marqueeDynamicStyles = css.create({\n  duration: (seconds: number) => ({ animationDuration: `${seconds}s` }),\n});\n\n/** 跑马灯：内容复制一份，纯 CSS 无缝循环滚动 */\nexport const Marquee = _component(\n  ({\n    direction = 'left',\n    speed = 40,\n    pauseOnHover = true,\n    paused = false,\n    fade = false,\n    gap = 'lg',\n    propsTrack,\n    propsGroup,\n    children,\n    ...rest\n  }: MarqueeProps) => {\n    let group = _state.raw<HTMLElement | null>(null);\n    // 一份内容（含间距）的长度：换算动画时长\n    let length = _state(0);\n    // 减少动态效果时变成手动滚动的区域：键盘要能聚焦它才能滚动\n    const reducedMotion = useReducedMotion();\n    const vertical = () => direction === 'up' || direction === 'down';\n\n    useResizeObserver(\n      () => group,\n      () => {\n        if (group) length = vertical() ? group.offsetHeight : group.offsetWidth;\n      },\n    );\n\n    const renderGroup = (copy: boolean) => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              marqueeStyles.group,\n              vertical() && marqueeStyles.groupVertical,\n              gapStyles[gap],\n              // 每份后面留一个间距：两份之间与项之间一样宽\n              marqueeTrailStyles[vertical() ? 'block' : 'inline'][gap],\n              copy && marqueeStyles.copy,\n            ],\n          },\n          propsGroup,\n          copy ? { 'aria-hidden': true, inert: true } : { ref: _toRef(group) },\n        )}\n      >\n        {children}\n      </div>\n    );\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              marqueeStyles.root,\n              vertical() && marqueeStyles.vertical,\n              fade && (vertical() ? marqueeStyles.fadeVertical : marqueeStyles.fade),\n              reducedMotion.value && focusRingStyles.visible,\n            ],\n            role: 'marquee',\n            tabindex: reducedMotion.value ? 0 : undefined,\n          },\n          rest,\n        )}\n        data-direction={direction}\n        data-paused={paused || undefined}\n      >\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                marqueeStyles.track,\n                vertical() && marqueeStyles.trackVertical,\n                (direction === 'right' || direction === 'down') && marqueeStyles.reverse,\n                pauseOnHover && marqueeStyles.pausable,\n                paused && marqueeStyles.paused,\n                marqueeDynamicStyles.duration(Math.max(length, 1) / Math.max(speed, 1)),\n              ],\n            },\n            propsTrack,\n          )}\n        >\n          {renderGroup(false)}\n          {renderGroup(true)}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAyDA,IAAM,UAAU,IAAI,UAAU;CAC5B,MAAM,EAAE,WAAW,OAAO;CAC1B,IAAI,EAAE,WAAW,mBAAmB;AACtC,CAAC;AACD,IAAM,UAAU,IAAI,UAAU;CAC5B,MAAM,EAAE,WAAW,OAAO;CAC1B,IAAI,EAAE,WAAW,mBAAmB;AACtC,CAAC;;AAGD,IAAa,gBAAgB,IAAI,OAAO;CACtC,MAAM;EACJ,SAAS;EACT,UAAU;GAAE,SAAS;GAAU,gBAAgB;EAAO;CACxD;CACA,UAAU,EAAE,eAAe,SAAS;CACpC,MAAM,EACJ,WAAW,4EACb;CACA,cAAc,EACZ,WAAW,6EACb;CAEA,OAAO;EACL,SAAS;EACT,YAAY;EACZ,OAAO;EACP,eAAe;GAAE,SAAS;GAAS,gBAAgB;EAAO;EAC1D,yBAAyB;EACzB,yBAAyB;CAC3B;CACA,eAAe;EACb,eAAe;EACf,OAAO;EACP,QAAQ;EACR,eAAe;GAAE,SAAS;GAAS,gBAAgB;EAAO;CAC5D;CACA,SAAS,EAAE,oBAAoB,UAAU;CACzC,UAAU,EACR,oBAAoB;EAAE,SAAS;EAAW,UAAU;EAAU,iBAAiB;CAAS,EAC1F;CACA,QAAQ,EAAE,oBAAoB,SAAS;CACvC,OAAO;EAAE,SAAS;EAAQ,YAAY;EAAG,YAAY;CAAS;CAC9D,eAAe,EAAE,eAAe,SAAS;CAEzC,MAAM,EAAE,SAAS;EAAE,SAAS;EAAM,gBAAgB;CAAO,EAAE;AAC7D,CAAC;;AAGD,IAAa,qBAA8E;CACzF,QAAQ,IAAI,OAAO;EACjB,MAAM,EAAE,kBAAkB,QAAQ;EAClC,IAAI,EAAE,kBAAkB,MAAM;EAC9B,IAAI,EAAE,kBAAkB,MAAM;EAC9B,IAAI,EAAE,kBAAkB,MAAM;EAC9B,IAAI,EAAE,kBAAkB,MAAM;EAC9B,IAAI,EAAE,kBAAkB,MAAM;CAChC,CAAC;CACD,OAAO,IAAI,OAAO;EAChB,MAAM,EAAE,iBAAiB,QAAQ;EACjC,IAAI,EAAE,iBAAiB,MAAM;EAC7B,IAAI,EAAE,iBAAiB,MAAM;EAC7B,IAAI,EAAE,iBAAiB,MAAM;EAC7B,IAAI,EAAE,iBAAiB,MAAM;EAC7B,IAAI,EAAE,iBAAiB,MAAM;CAC/B,CAAC;AACH;;AAIA,IAAa,uBAAuB,IAAI,OAAO,EAC7C,WAAW,aAAqB,EAAE,mBAAmB,GAAG,QAAO,GAAI,GACrE,CAAC;;AAGD,IAAa,UAAU,0BACrB,QAAA,SAWoB;CAAA,MAAA,YAAAA,aAAA,QAAA,aAVN,MAAM;CAAA,MAAA,QAAAA,aAAA,QAAA,SACV,EAAE;CAAA,MAAA,eAAAA,aAAA,QAAA,gBACK,IAAI;CAAA,MAAA,SAAAA,aAAA,QAAA,UACV,KAAK;CAAA,MAAA,OAAAA,aAAA,QAAA,QACP,KAAK;CAAA,MAAA,MAAAA,aAAA,QAAA,OACN,IAAI;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAIP,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,IAAI,QAAKC,WAAkC,IAAI;CAE/C,IAAI,SAAMC,IAAU,CAAC;CAErB,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,iBAAiB,UAAA,UAAc,QAAQ,UAAA,UAAc;CAE3D,wBACE,MAAA,aACM;EACJ,IAAA,MAAA,OAAW,OAAA,QAAS,SAAS,IAAI,MAAA,MAAM,eAAe,MAAA,MAAM;CAC9D,CACF;CAEA,MAAM,eAAe,SAAaC,YAAA,OAE1B,WACF,EACE,IAAI;EACF,cAAc;EACd,SAAS,KAAK,cAAc;EAC5B,UAAS,IAAA;EAET,mBAAmB,SAAS,IAAI,UAAU,SAAS,CAAA,IAAA;EACnD,QAAQ,cAAc;CAAI,EAE9B,GAAC,WAAA,OAED,OAAO;EAAE,eAAe;EAAM,OAAO;CAAK,IAAI,EAAE,KAAG,MAAgB,CACrE,GAAC,CAAA,SAAA,KAAA,CAAA;CAML,aAAOA,YAAA,OAAAC,WAEC,WACF;EACE,IAAI;GACF,cAAc;GAAI,IAAA,aAClB,SAAS,KAAK,cAAc,UAAQ,IAAA;GACpC,KAAA,UAAS,SAAS,IAAI,cAAc,eAAe,cAAc;GACjE,cAAc,SAAS,gBAAgB;EAAO;EAEhD,MAAM;EACN,UAAU,cAAc,QAAQ,IAAI,KAAA;CACtC,GACA,IACF,GAAC;EAAA,kBAAA,UAAA;EAAA,eAEY,OAAA,SAAU,KAAA;CAAS,CAAA,GAAA,CAAAD,YAAA,OAG1B,WACF,EACE,IAAI;EACF,cAAc;EAAK,IAAA,aACnB,SAAS,KAAK,cAAc,eAAa,IAAA;GACxC,UAAA,UAAc,WAAW,UAAA,UAAc,WAAW,cAAc;EACjE,aAAA,SAAgB,cAAc;EAC9B,OAAA,SAAU,cAAc;EAAM,IAAA,KAC9B,qBAAqB,gBAAQ,CAAC,KAAK,IAAG,OAAA,OAAS,CAAC,IAAI,KAAK,IAAG,MAAA,OAAQ,CAAC,CAAC,GAAA,IAAA;CAAA,EAE1E,GAAC,WAAA,KAEH,GAAC,CAEA,YAAY,KAAK,GACjB,YAAY,IAAI,CAAC,CAAA,CAAA,CAAA;AAI1B,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"Marquee.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/display/Marquee.tsx"],"sourcesContent":["/**\n * 跑马灯（div）：内容循环滚动（合作伙伴 logo、公告、标签墙）。纯 CSS 动画：内容复制一份接在后面，\n * 平移到正好一份的长度时与开头重合，无缝循环。\n *\n *   <Marquee speed={40} pauseOnHover aria-label=\"合作伙伴\">\n *     {partners.map((partner) => <img src={partner.logo} alt={partner.name} />)}\n *   </Marquee>\n *\n * - 方向 left / right / up / down；speed 是每秒多少 px（按一份内容的长度换算成动画时长，内容变化时重新量）；\n * - 指针悬停、焦点在里面时暂停（pauseOnHover）；paused 由外部控制（WCAG 2.2.2：给用户一个暂停按钮）；\n * - 减少动态效果时不滚动，内容可以手动滚动查看（容器可以聚焦，键盘也能滚）；\n * - role=\"marquee\"（ARIA 的跑马灯角色，用 aria-label 命名）；复制的那份对读屏隐藏且不可聚焦（inert），读屏只念一遍。\n *\n * 部件：Root（div）、Track（div，做动画的那一层）、Group（div，一份内容）。\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 { useReducedMotion } from '../utils/dom/media-query';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles, gapStyles, type Space, type StyleTable } from '../utils/style/styles';\n\n/** 滚动方向 */\nexport interface MarqueeDirections {\n  /** 向左（默认） */\n  left: unknown;\n  /** 向右 */\n  right: unknown;\n  /** 向上 */\n  up: unknown;\n  /** 向下 */\n  down: unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface MarqueeProps extends PartProps<'div'> {\n  /** 滚动方向，默认 left */\n  direction?: keyof MarqueeDirections;\n  /** 速度：每秒多少 px，默认 40 */\n  speed?: number;\n  /** 指针悬停、焦点在里面时暂停，默认 true */\n  pauseOnHover?: boolean;\n  /** 暂停 */\n  paused?: boolean;\n  /** 两端渐隐 */\n  fade?: boolean;\n  /** 项之间（以及两份之间）的间距，默认 lg */\n  gap?: Space;\n  /** 动画层的部件属性 */\n  propsTrack?: PartProps<'div'>;\n  /** 每一份内容的部件属性 */\n  propsGroup?: PartProps<'div'>;\n  /** 内容 */\n  children?: VNodeChild;\n}\n\nconst scrollX = css.keyframes({\n  from: { transform: 'none' },\n  to: { transform: 'translateX(-50%)' },\n});\nconst scrollY = css.keyframes({\n  from: { transform: 'none' },\n  to: { transform: 'translateY(-50%)' },\n});\n\n/** Marquee 的样式：root、vertical、fade、track、trackVertical、reverse、pausable、paused、group */\nexport const marqueeStyles = css.create({\n  root: {\n    display: 'flex',\n    overflow: { default: 'hidden', _reducedMotion: 'auto' },\n  },\n  vertical: { flexDirection: 'column' },\n  fade: {\n    maskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)',\n  },\n  fadeVertical: {\n    maskImage: 'linear-gradient(to bottom, transparent, black 10%, black 90%, transparent)',\n  },\n  // 两份内容并排；平移 -50% 正好是一份（含它后面的间距）\n  track: {\n    display: 'flex',\n    flexShrink: 0,\n    width: 'max-content',\n    animationName: { default: scrollX, _reducedMotion: 'none' },\n    animationTimingFunction: 'linear',\n    animationIterationCount: 'infinite',\n  },\n  trackVertical: {\n    flexDirection: 'column',\n    width: 'auto',\n    height: 'max-content',\n    animationName: { default: scrollY, _reducedMotion: 'none' },\n  },\n  reverse: { animationDirection: 'reverse' },\n  pausable: {\n    animationPlayState: { default: 'running', ':hover': 'paused', ':focus-within': 'paused' },\n  },\n  paused: { animationPlayState: 'paused' },\n  group: { display: 'flex', flexShrink: 0, alignItems: 'center' },\n  groupVertical: { flexDirection: 'column' },\n  // 不滚动时用不着复制的那份\n  copy: { display: { default: null, _reducedMotion: 'none' } },\n});\n\n/** Marquee 的样式：每份内容后面的间距（横排时在行尾、竖排时在下方），与项之间的 gap 一样宽 */\nexport const marqueeTrailStyles: Readonly<Record<'inline' | 'block', StyleTable<Space>>> = {\n  inline: css.create({\n    none: { paddingInlineEnd: '_none' },\n    xs: { paddingInlineEnd: '_xs' },\n    sm: { paddingInlineEnd: '_sm' },\n    md: { paddingInlineEnd: '_md' },\n    lg: { paddingInlineEnd: '_lg' },\n    xl: { paddingInlineEnd: '_xl' },\n  }),\n  block: css.create({\n    none: { paddingBlockEnd: '_none' },\n    xs: { paddingBlockEnd: '_xs' },\n    sm: { paddingBlockEnd: '_sm' },\n    md: { paddingBlockEnd: '_md' },\n    lg: { paddingBlockEnd: '_lg' },\n    xl: { paddingBlockEnd: '_xl' },\n  }),\n};\n\n// 时长是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Marquee 的样式：duration（一圈的时长） */\nexport const marqueeDynamicStyles = css.create({\n  duration: (seconds: number) => ({ animationDuration: `${seconds}s` }),\n});\n\n/** 跑马灯：内容复制一份，纯 CSS 无缝循环滚动 */\nexport const Marquee = _component(\n  ({\n    direction = 'left',\n    speed = 40,\n    pauseOnHover = true,\n    paused = false,\n    fade = false,\n    gap = 'lg',\n    propsTrack,\n    propsGroup,\n    children,\n    ...rest\n  }: MarqueeProps) => {\n    let group = _state.raw<HTMLElement | null>(null);\n    // 一份内容（含间距）的长度：换算动画时长\n    let length = _state(0);\n    // 减少动态效果时变成手动滚动的区域：键盘要能聚焦它才能滚动\n    const reducedMotion = useReducedMotion();\n    const vertical = () => direction === 'up' || direction === 'down';\n\n    useResizeObserver(\n      () => group,\n      () => {\n        if (group) length = vertical() ? group.offsetHeight : group.offsetWidth;\n      },\n    );\n\n    const renderGroup = (copy: boolean) => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              marqueeStyles.group,\n              vertical() && marqueeStyles.groupVertical,\n              gapStyles[gap],\n              // 每份后面留一个间距：两份之间与项之间一样宽\n              marqueeTrailStyles[vertical() ? 'block' : 'inline'][gap],\n              copy && marqueeStyles.copy,\n            ],\n          },\n          propsGroup,\n          copy ? { 'aria-hidden': true, inert: true } : { ref: _toRef(group) },\n        )}\n      >\n        {children}\n      </div>\n    );\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              marqueeStyles.root,\n              vertical() && marqueeStyles.vertical,\n              fade && (vertical() ? marqueeStyles.fadeVertical : marqueeStyles.fade),\n              reducedMotion.value && focusRingStyles.visible,\n            ],\n            role: 'marquee',\n            tabindex: reducedMotion.value ? 0 : undefined,\n          },\n          rest,\n        )}\n        data-direction={direction}\n        data-paused={paused || undefined}\n      >\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                marqueeStyles.track,\n                vertical() && marqueeStyles.trackVertical,\n                (direction === 'right' || direction === 'down') && marqueeStyles.reverse,\n                pauseOnHover && marqueeStyles.pausable,\n                paused && marqueeStyles.paused,\n                marqueeDynamicStyles.duration(Math.max(length, 1) / Math.max(speed, 1)),\n              ],\n            },\n            propsTrack,\n          )}\n        >\n          {renderGroup(false)}\n          {renderGroup(true)}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/display/ProportionBar.js

@@ -1,7 +1,7 @@
 import { mergeAttrs } from "../utils/props.js";
 import { StatusDot, statusDotToneStyles } from "../base/StatusDot.js";
-import { createVNode, mergeProps } from "vue";
-import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+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";
 //#region src/display/ProportionBar.tsx
 /** 比例条的一段 */
@@ -69,10 +69,10 @@ var ProportionBar = /*#__PURE__*/ _component((_props, _ctx) => {
 	const label = readonlyProp(_props, "ariaLabel");
 	const rest = restProps(_props, _ctx, true);
 	const toneOf = (segment, index) => segment.tone ?? ORDER[index % ORDER.length];
-	return () => createVNode("div", mergeAttrs({ sx: proportionBarStyles.root }, rest), [createVNode("div", mergeProps({
+	return () => createVNode("div", mergeAttrs({ sx: proportionBarStyles.root }, rest), [createVNode("div", mergeJsxProps({
 		"role": "img",
 		"aria-label": `${label.value}：${segments.value.map((segment) => `${segment.label} ${segment.value}`).join("，")}`
-	}, css.attrs(proportionBarStyles.bar, proportionBarStyles[size.value])), [segments.value.map((segment, index) => segment.value > 0 && createVNode("span", mergeProps({ "key": segment.key }, css.attrs(css.bind(proportionBarDynamicStyles.share, () => [segment.value]), segment.color ? css.bind(proportionBarDynamicStyles.color, () => [segment.color]) : statusDotToneStyles[toneOf(segment, index)])), null))]), legend.value && createVNode("ul", css.attrs(proportionBarStyles.legend), [segments.value.map((segment, index) => createVNode("li", mergeProps({ "key": segment.key }, css.attrs(proportionBarStyles.legendItem)), [
+	}, css.attrs(proportionBarStyles.bar, proportionBarStyles[size.value])), [segments.value.map((segment, index) => segment.value > 0 && createVNode("span", mergeJsxProps({ "key": segment.key }, css.attrs(css.bind(proportionBarDynamicStyles.share, () => [segment.value]), segment.color ? css.bind(proportionBarDynamicStyles.color, () => [segment.color]) : statusDotToneStyles[toneOf(segment, index)])), null))]), legend.value && createVNode("ul", css.attrs(proportionBarStyles.legend), [segments.value.map((segment, index) => createVNode("li", mergeJsxProps({ "key": segment.key }, css.attrs(proportionBarStyles.legendItem)), [
 		createVNode(StatusDot, {
 			"size": "md",
 			"tone": toneOf(segment, index),

package/dist/display/ProportionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProportionBar.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/ProportionBar.tsx"],"sourcesContent":["/**\n * 比例条：一根横条按各部分的数量分段，下面是图例（色点、名称、数量），看一个总数由哪几块构成\n * （工单的三种状态、各状态的占比、存储空间）。部分之间互斥、加起来是总数时用它；要比较趋势用图表。\n *\n *   <ProportionBar\n *     aria-label=\"工单构成\"\n *     segments={[\n *       { key: 'done', label: '已完成', value: 25, tone: 'success' },\n *       { key: 'blocked', label: '受阻', value: 4, tone: 'warning' },\n *       { key: 'open', label: '进行中', value: 35, tone: 'info' },\n *     ]}\n *     valueText={(segment) => `${segment.value} 项`}\n *   />\n *\n * 横条对读屏是一张图（role=\"img\"），名称后面自动带上各段的数量；图例是普通文字。\n * 数量为 0 的段不画但留在图例里。颜色用 tone（状态色）或 color（任意 CSS 颜色，如图表色板）。\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 type { StatusTone } from '../utils/style/tone-styles';\nimport { StatusDot, statusDotToneStyles } from '../base/StatusDot';\n\n/** 比例条的一段 */\nexport interface ProportionSegment {\n  /** 标识 */\n  key: string;\n  /** 名称 */\n  label: string;\n  /** 数量 */\n  value: number;\n  /** 色调；不写时按顺序取 accent、info、success、warning、danger、neutral */\n  tone?: StatusTone;\n  /** 任意 CSS 颜色；写了时不看 tone */\n  color?: string;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ProportionBarProps extends PartProps<'div'> {\n  /** 各段：按顺序从起始边排 */\n  segments: readonly ProportionSegment[];\n  /** 横条的名称（读屏）：后面自动带上各段的数量 */\n  'aria-label': string;\n  /** 图例里数量的写法，默认是数字 */\n  valueText?: (segment: ProportionSegment) => VNodeChild;\n  /**\n   * 下面的图例\n   * @default true\n   */\n  legend?: boolean;\n  /**\n   * 横条的粗细\n   * @default 'md'\n   */\n  size?: 'sm' | 'md';\n  /** 图例每一项后面的补充（“待定价”） */\n  legendExtra?: (segment: ProportionSegment) => VNodeChild;\n}\n\nconst ORDER: readonly StatusTone[] = ['accent', 'info', 'success', 'warning', 'danger', 'neutral'];\n\n/** ProportionBar 的样式：root、bar、sm、md、legend、legendItem、value */\nexport const proportionBarStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_sm', minWidth: 0 },\n  bar: { display: 'flex', gap: '2px', borderRadius: '_full', overflow: 'hidden' },\n  sm: { height: '0.5rem' },\n  md: { height: '0.75rem' },\n  legend: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'space-between',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n    fontSize: '_sm',\n  },\n  legendItem: { display: 'inline-flex', alignItems: 'center', gap: '_sm' },\n  value: { fontWeight: '_semibold', fontVariantNumeric: 'tabular-nums' },\n});\n\n/** ProportionBar 的动态样式：段的份额、任意颜色 */\nexport const proportionBarDynamicStyles = css.create({\n  share: (value: number) => ({ flexGrow: value, flexBasis: 0 }),\n  color: (color: string) => ({ backgroundColor: color }),\n});\n\n/** 比例条 */\nexport const ProportionBar = _component(\n  ({\n    segments,\n    valueText = (segment) => String(segment.value),\n    legend = true,\n    size = 'md',\n    legendExtra,\n    'aria-label': label,\n    ...rest\n  }: ProportionBarProps) => {\n    const toneOf = (segment: ProportionSegment, index: number) =>\n      segment.tone ?? ORDER[index % ORDER.length]!;\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: proportionBarStyles.root }, rest)}>\n        <div\n          role=\"img\"\n          aria-label={`${label}：${segments\n            .map((segment) => `${segment.label} ${segment.value}`)\n            .join('，')}`}\n          {...css.attrs(proportionBarStyles.bar, proportionBarStyles[size])}\n        >\n          {segments.map(\n            (segment, index) =>\n              segment.value > 0 && (\n                <span\n                  key={segment.key}\n                  {...css.attrs(\n                    proportionBarDynamicStyles.share(segment.value),\n                    segment.color\n                      ? proportionBarDynamicStyles.color(segment.color)\n                      : statusDotToneStyles[toneOf(segment, index)],\n                  )}\n                />\n              ),\n          )}\n        </div>\n        {legend && (\n          <ul {...css.attrs(proportionBarStyles.legend)}>\n            {segments.map((segment, index) => (\n              <li key={segment.key} {...css.attrs(proportionBarStyles.legendItem)}>\n                <StatusDot size=\"md\" tone={toneOf(segment, index)} color={segment.color} />\n                <span>{segment.label}</span>\n                <span {...css.attrs(proportionBarStyles.value)}>{valueText(segment)}</span>\n                {legendExtra?.(segment)}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;AA4DA,IAAM,QAA+B;CAAC;CAAU;CAAQ;CAAW;CAAW;CAAU;AAAS;;AAGjG,IAAa,sBAAsB,IAAI,OAAO;CAC5C,MAAM;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;EAAO,UAAU;CAAE;CAC1E,KAAK;EAAE,SAAS;EAAQ,KAAK;EAAO,cAAc;EAAS,UAAU;CAAS;CAC9E,IAAI,EAAE,QAAQ,SAAS;CACvB,IAAI,EAAE,QAAQ,UAAU;CACxB,QAAQ;EACN,SAAS;EACT,UAAU;EACV,gBAAgB;EAChB,WAAW;EACX,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,WAAW;EACX,UAAU;CACZ;CACA,YAAY;EAAE,SAAS;EAAe,YAAY;EAAU,KAAK;CAAM;CACvE,OAAO;EAAE,YAAY;EAAa,oBAAoB;CAAe;AACvE,CAAC;;AAGD,IAAa,6BAA6B,IAAI,OAAO;CACnD,QAAQ,WAAmB;EAAE,UAAU;EAAO,WAAW;CAAE;CAC3D,QAAQ,WAAmB,EAAE,iBAAiB,MAAM;AACtD,CAAC;;AAGD,IAAa,gBAAgB,0BAC3B,QAAA,SAQ0B;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,oBANX,YAAY,OAAO,QAAQ,KAAK,CAAC;CAAA,MAAA,SAAAA,aAAA,QAAA,UACrC,IAAI;CAAA,MAAA,OAAAA,aAAA,QAAA,QACN,IAAI;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,WAAA;CAAA,MAGR,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,UAAU,SAA4B,UAC1C,QAAQ,QAAQ,MAAM,QAAQ,MAAM;CACtC,aAAOC,YAAA,OACI,WAAkB,EAAE,IAAI,oBAAoB,KAAK,GAAG,IAAI,GAAC,CAAAA,YAAA,OAAAC,WAAA;EAAA,QAAA;EAAA,cAGlD,GAAA,MAAA,MAAA,GAAY,SAAA,MACrB,KAAK,YAAY,GAAG,QAAQ,MAAK,GAAI,QAAQ,OAAO,CAAC,CACrD,KAAK,GAAG;CAAG,GACV,IAAI,MAAM,oBAAoB,KAAK,oBAAmB,KAAA,MAAM,CAAC,GAAA,CAEhE,SAAA,MAAS,KACP,SAAS,UACR,QAAQ,QAAQ,KAACD,YAAA,QAAAC,WAAA,EAAA,OAER,QAAQ,IAAG,GACZ,IAAI,MAAK,IAAA,KACX,2BAA2B,aAAK,CAAC,QAAQ,KAAK,CAAA,GAC9C,QAAQ,QAAK,IAAA,KACT,2BAA2B,aAAK,CAAC,QAAQ,KAAK,CAAA,IAC9C,oBAAoB,OAAO,SAAS,KAAK,EAC/C,CAAC,GAAA,IAAA,CAGT,CAAC,CAAA,GAEF,OAAA,SAAAD,YAAA,MACS,IAAI,MAAM,oBAAoB,MAAM,GAAC,CAC1C,SAAA,MAAS,KAAK,SAAS,UAAKA,YAAA,MAAAC,WAAA,EAAA,OAClB,QAAQ,IAAG,GAAM,IAAI,MAAM,oBAAoB,UAAU,CAAC,GAAA;EAAAD,YAAA,WAAA;GAAA,QAAA;GAAA,QACtC,OAAO,SAAS,KAAK;GAAC,SAAS,QAAQ;EAAK,GAAA,IAAA;EAAAA,YAAA,QAAA,MAAA,CAChE,QAAQ,KAAK,CAAA;EAAAA,YAAA,QACV,IAAI,MAAM,oBAAoB,KAAK,GAAC,CAAG,UAAA,MAAU,OAAO,CAAC,CAAA;EAClE,YAAA,QAAc,OAAO;CAAC,CAAA,CAE1B,CAAC,CAAA,CAEL,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"ProportionBar.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/ProportionBar.tsx"],"sourcesContent":["/**\n * 比例条：一根横条按各部分的数量分段，下面是图例（色点、名称、数量），看一个总数由哪几块构成\n * （工单的三种状态、各状态的占比、存储空间）。部分之间互斥、加起来是总数时用它；要比较趋势用图表。\n *\n *   <ProportionBar\n *     aria-label=\"工单构成\"\n *     segments={[\n *       { key: 'done', label: '已完成', value: 25, tone: 'success' },\n *       { key: 'blocked', label: '受阻', value: 4, tone: 'warning' },\n *       { key: 'open', label: '进行中', value: 35, tone: 'info' },\n *     ]}\n *     valueText={(segment) => `${segment.value} 项`}\n *   />\n *\n * 横条对读屏是一张图（role=\"img\"），名称后面自动带上各段的数量；图例是普通文字。\n * 数量为 0 的段不画但留在图例里。颜色用 tone（状态色）或 color（任意 CSS 颜色，如图表色板）。\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 type { StatusTone } from '../utils/style/tone-styles';\nimport { StatusDot, statusDotToneStyles } from '../base/StatusDot';\n\n/** 比例条的一段 */\nexport interface ProportionSegment {\n  /** 标识 */\n  key: string;\n  /** 名称 */\n  label: string;\n  /** 数量 */\n  value: number;\n  /** 色调；不写时按顺序取 accent、info、success、warning、danger、neutral */\n  tone?: StatusTone;\n  /** 任意 CSS 颜色；写了时不看 tone */\n  color?: string;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ProportionBarProps extends PartProps<'div'> {\n  /** 各段：按顺序从起始边排 */\n  segments: readonly ProportionSegment[];\n  /** 横条的名称（读屏）：后面自动带上各段的数量 */\n  'aria-label': string;\n  /** 图例里数量的写法，默认是数字 */\n  valueText?: (segment: ProportionSegment) => VNodeChild;\n  /**\n   * 下面的图例\n   * @default true\n   */\n  legend?: boolean;\n  /**\n   * 横条的粗细\n   * @default 'md'\n   */\n  size?: 'sm' | 'md';\n  /** 图例每一项后面的补充（“待定价”） */\n  legendExtra?: (segment: ProportionSegment) => VNodeChild;\n}\n\nconst ORDER: readonly StatusTone[] = ['accent', 'info', 'success', 'warning', 'danger', 'neutral'];\n\n/** ProportionBar 的样式：root、bar、sm、md、legend、legendItem、value */\nexport const proportionBarStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_sm', minWidth: 0 },\n  bar: { display: 'flex', gap: '2px', borderRadius: '_full', overflow: 'hidden' },\n  sm: { height: '0.5rem' },\n  md: { height: '0.75rem' },\n  legend: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'space-between',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n    fontSize: '_sm',\n  },\n  legendItem: { display: 'inline-flex', alignItems: 'center', gap: '_sm' },\n  value: { fontWeight: '_semibold', fontVariantNumeric: 'tabular-nums' },\n});\n\n/** ProportionBar 的动态样式：段的份额、任意颜色 */\nexport const proportionBarDynamicStyles = css.create({\n  share: (value: number) => ({ flexGrow: value, flexBasis: 0 }),\n  color: (color: string) => ({ backgroundColor: color }),\n});\n\n/** 比例条 */\nexport const ProportionBar = _component(\n  ({\n    segments,\n    valueText = (segment) => String(segment.value),\n    legend = true,\n    size = 'md',\n    legendExtra,\n    'aria-label': label,\n    ...rest\n  }: ProportionBarProps) => {\n    const toneOf = (segment: ProportionSegment, index: number) =>\n      segment.tone ?? ORDER[index % ORDER.length]!;\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: proportionBarStyles.root }, rest)}>\n        <div\n          role=\"img\"\n          aria-label={`${label}：${segments\n            .map((segment) => `${segment.label} ${segment.value}`)\n            .join('，')}`}\n          {...css.attrs(proportionBarStyles.bar, proportionBarStyles[size])}\n        >\n          {segments.map(\n            (segment, index) =>\n              segment.value > 0 && (\n                <span\n                  key={segment.key}\n                  {...css.attrs(\n                    proportionBarDynamicStyles.share(segment.value),\n                    segment.color\n                      ? proportionBarDynamicStyles.color(segment.color)\n                      : statusDotToneStyles[toneOf(segment, index)],\n                  )}\n                />\n              ),\n          )}\n        </div>\n        {legend && (\n          <ul {...css.attrs(proportionBarStyles.legend)}>\n            {segments.map((segment, index) => (\n              <li key={segment.key} {...css.attrs(proportionBarStyles.legendItem)}>\n                <StatusDot size=\"md\" tone={toneOf(segment, index)} color={segment.color} />\n                <span>{segment.label}</span>\n                <span {...css.attrs(proportionBarStyles.value)}>{valueText(segment)}</span>\n                {legendExtra?.(segment)}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;AA4DA,IAAM,QAA+B;CAAC;CAAU;CAAQ;CAAW;CAAW;CAAU;AAAS;;AAGjG,IAAa,sBAAsB,IAAI,OAAO;CAC5C,MAAM;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;EAAO,UAAU;CAAE;CAC1E,KAAK;EAAE,SAAS;EAAQ,KAAK;EAAO,cAAc;EAAS,UAAU;CAAS;CAC9E,IAAI,EAAE,QAAQ,SAAS;CACvB,IAAI,EAAE,QAAQ,UAAU;CACxB,QAAQ;EACN,SAAS;EACT,UAAU;EACV,gBAAgB;EAChB,WAAW;EACX,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,WAAW;EACX,UAAU;CACZ;CACA,YAAY;EAAE,SAAS;EAAe,YAAY;EAAU,KAAK;CAAM;CACvE,OAAO;EAAE,YAAY;EAAa,oBAAoB;CAAe;AACvE,CAAC;;AAGD,IAAa,6BAA6B,IAAI,OAAO;CACnD,QAAQ,WAAmB;EAAE,UAAU;EAAO,WAAW;CAAE;CAC3D,QAAQ,WAAmB,EAAE,iBAAiB,MAAM;AACtD,CAAC;;AAGD,IAAa,gBAAgB,0BAC3B,QAAA,SAQ0B;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,oBANX,YAAY,OAAO,QAAQ,KAAK,CAAC;CAAA,MAAA,SAAAA,aAAA,QAAA,UACrC,IAAI;CAAA,MAAA,OAAAA,aAAA,QAAA,QACN,IAAI;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,WAAA;CAAA,MAGR,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,UAAU,SAA4B,UAC1C,QAAQ,QAAQ,MAAM,QAAQ,MAAM;CACtC,aAAOC,YAAA,OACI,WAAkB,EAAE,IAAI,oBAAoB,KAAK,GAAG,IAAI,GAAC,CAAAA,YAAA,OAAAC,cAAA;EAAA,QAAA;EAAA,cAGlD,GAAA,MAAA,MAAA,GAAY,SAAA,MACrB,KAAK,YAAY,GAAG,QAAQ,MAAK,GAAI,QAAQ,OAAO,CAAC,CACrD,KAAK,GAAG;CAAG,GACV,IAAI,MAAM,oBAAoB,KAAK,oBAAmB,KAAA,MAAM,CAAC,GAAA,CAEhE,SAAA,MAAS,KACP,SAAS,UACR,QAAQ,QAAQ,KAACD,YAAA,QAAAC,cAAA,EAAA,OAER,QAAQ,IAAG,GACZ,IAAI,MAAK,IAAA,KACX,2BAA2B,aAAK,CAAC,QAAQ,KAAK,CAAA,GAC9C,QAAQ,QAAK,IAAA,KACT,2BAA2B,aAAK,CAAC,QAAQ,KAAK,CAAA,IAC9C,oBAAoB,OAAO,SAAS,KAAK,EAC/C,CAAC,GAAA,IAAA,CAGT,CAAC,CAAA,GAEF,OAAA,SAAAD,YAAA,MACS,IAAI,MAAM,oBAAoB,MAAM,GAAC,CAC1C,SAAA,MAAS,KAAK,SAAS,UAAKA,YAAA,MAAAC,cAAA,EAAA,OAClB,QAAQ,IAAG,GAAM,IAAI,MAAM,oBAAoB,UAAU,CAAC,GAAA;EAAAD,YAAA,WAAA;GAAA,QAAA;GAAA,QACtC,OAAO,SAAS,KAAK;GAAC,SAAS,QAAQ;EAAK,GAAA,IAAA;EAAAA,YAAA,QAAA,MAAA,CAChE,QAAQ,KAAK,CAAA;EAAAA,YAAA,QACV,IAAI,MAAM,oBAAoB,KAAK,GAAC,CAAG,UAAA,MAAU,OAAO,CAAC,CAAA;EAClE,YAAA,QAAc,OAAO;CAAC,CAAA,CAE1B,CAAC,CAAA,CAEL,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/display/Sortable.js

@@ -7,8 +7,8 @@ import { ButtonBase } from "../base/ButtonBase.js";
 import { toElement } from "../utils/dom/element.js";
 import { FlexList } from "../layout/Flex.js";
 import { useSortable } from "../utils/dom/sortable.js";
-import { Fragment, createVNode, mergeProps, shallowRef } from "vue";
-import { _component, bindable, childrenProp, childrenStable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Fragment, createVNode, shallowRef } from "vue";
+import { _component, bindable, childrenProp, childrenStable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { GripVertical } from "@lucide/icons";
 //#region src/display/Sortable.tsx
@@ -96,7 +96,7 @@ var Sortable = /*#__PURE__*/ _component((_props, _ctx) => {
 		disabled: () => disabled.value
 	});
 	return () => createVNode(Fragment, null, [
-		createVNode(FlexList, mergeProps(mergePartProps({
+		createVNode(FlexList, mergeJsxProps(mergePartProps({
 			direction: orientation.value === "horizontal" ? "row" : "column",
 			gap: "xs"
 		}, rest, { ref: (value) => root.value = toElement(value) }), {
@@ -110,7 +110,7 @@ var Sortable = /*#__PURE__*/ _component((_props, _ctx) => {
 					active: sortable.active === key
 				};
 				const own = typeof propsItem.value === "function" ? propsItem.value(item, state) : propsItem.value;
-				return createVNode("li", mergeProps({ "key": key }, mergeAttrs({ sx: [
+				return createVNode("li", mergeJsxProps({ "key": key }, mergeAttrs({ sx: [
 					sortableStyles.item,
 					orientation.value === "horizontal" && sortableStyles.itemHorizontal,
 					state.active && sortableStyles.active

package/dist/display/Sortable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sortable.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_Fragment","_mergeProps","_vtp_childrenStable"],"sources":["../../src/display/Sortable.tsx"],"sourcesContent":["/**\n * 可拖动排序的列表（ul）：每项前有一个把手，拖动或用键盘改变顺序，数据双向绑定。\n *\n *   <Sortable _items={tasks} getKey={(task) => task.id} getLabel={(task) => task.title} aria-label=\"待办\">\n *     {(task) => <Text>{task.title}</Text>}\n *   </Sortable>\n *\n * 拖动、键盘、读屏播报、自动滚动、布局动画见 useSortable（utils/dom/sortable.ts）。\n * 列表自己不滚动：项多时在外面包 ScrollArea（横排写 axis=\"x\"），拖到边缘时自动滚动会找到它的视口，滚动条与整站一致。\n * 把手是按钮：名称“移动 项名”，操作说明经 aria-describedby 关联，拿起时 aria-pressed。\n * 部件：Root（ul）、Item（li）、Handle（button）、Content（div）。\n */\nimport { GripVertical } 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 { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Icon } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useSortable, type SortableOrientations } from '../utils/dom/sortable';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { FlexList, type FlexProps } from '../layout/Flex';\nimport { toElement } from '../utils/dom/element';\nimport { t } from '../config/theme/tokens';\n\n/** 项的渲染状态 */\nexport interface SortableItemState {\n  /** 当前位置，从 0 开始 */\n  index: number;\n  /** 正在被拖动或被键盘拿起 */\n  active: boolean;\n}\n\n/** 未声明的属性落到 ul 上；aria-label 或 aria-labelledby 是列表的名称 */\nexport interface SortableProps<T> extends PartProps<'ul'> {\n  /** 各项：父级写 _items={list}，顺序变了写回新的数组 */\n  _items?: T[];\n  /** 项的 key，同一列表里唯一 */\n  getKey: (item: T) => string;\n  /** 项的名称：把手的名称与读屏播报用它；默认是 key */\n  getLabel?: (item: T) => string;\n  /** 排列方向，默认 vertical */\n  orientation?: keyof SortableOrientations;\n  /** 不可用：不能拖动 */\n  disabled?: boolean;\n  /** 每项的内容 */\n  children?: (item: T, state: SortableItemState) => VNodeChild;\n  /** 每一项（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: T, state: SortableItemState) => PartProps<'li'>);\n  /** 把手的部件属性 */\n  propsHandle?: Partial<ButtonBaseProps>;\n  /** 内容的部件属性 */\n  propsContent?: PartProps<'div'>;\n}\n\n/** Sortable 的样式：item、active、handle、content */\nexport const sortableStyles = css.create({\n  // 方向、间距、去掉圆点由 FlexList 给\n  item: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_xs',\n    // 起始边是把手（自带留白），结束边多留一点，文字不贴着边框\n    paddingInlineStart: '_xs',\n    paddingInlineEnd: '_sm',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    color: '_text',\n  },\n  // 横排时项不收缩：放不下就溢出（外面包 ScrollArea 横向滚动），不把文字挤成一字一行\n  itemHorizontal: { flexShrink: 0 },\n  // 拿起时浮起来：阴影与品牌色边框，盖在其他项上面\n  active: { zIndex: 1, borderColor: '_accent', boxShadow: '_md' },\n  // 去掉按钮默认外观、焦点环由 ButtonBase 给出\n  handle: {\n    display: 'grid',\n    placeItems: 'center',\n    flexShrink: 0,\n    width: `max(1.75em, ${t.sizes.minTarget})`,\n    height: `max(1.75em, ${t.sizes.minTarget})`,\n    borderRadius: '_sm',\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n    color: '_textMuted',\n    cursor: { default: 'grab', ':active': 'grabbing' },\n    // 触摸拖动时不滚动页面\n    touchAction: 'none',\n  },\n  content: { flexGrow: 1, minWidth: 0 },\n});\n\n/** 可拖动排序的列表：把手拖动或键盘移动 */\nexport const Sortable = _component(\n  <T,>({\n    _items: items = _bindable<T[]>([]),\n    getKey,\n    getLabel,\n    orientation = 'vertical',\n    disabled = false,\n    children,\n    propsItem,\n    propsHandle,\n    propsContent,\n    ...rest\n  }: SortableProps<T>) => {\n    const lang = useLang();\n    let root = _state.raw<HTMLElement | null>(null);\n    const sortable = useSortable<T>({\n      items: () => items,\n      getKey: (item) => getKey(item),\n      getLabel: (item) => getLabel?.(item) ?? getKey(item),\n      onChange: (next) => (items = next),\n      container: () => root,\n      orientation: () => orientation,\n      disabled: () => disabled,\n    });\n\n    return () => (\n      <>\n        <FlexList\n          {...mergePartProps<FlexProps<'ul'>>(\n            {\n              direction: orientation === 'horizontal' ? 'row' : 'column',\n              gap: 'xs',\n            },\n            rest,\n            { ref: (value: unknown) => (root = toElement(value)) },\n          )}\n          data-orientation={orientation}\n        >\n          {items.map((item, index) => {\n            const key = getKey(item);\n            const state: SortableItemState = { index, active: sortable.active === key };\n            const own = typeof propsItem === 'function' ? propsItem(item, state) : propsItem;\n            return (\n              <li\n                key={key}\n                {...mergeAttrs<'li'>(\n                  {\n                    sx: [\n                      sortableStyles.item,\n                      orientation === 'horizontal' && sortableStyles.itemHorizontal,\n                      state.active && sortableStyles.active,\n                    ],\n                  },\n                  own,\n                  sortable.itemProps(key),\n                )}\n              >\n                <ButtonBase\n                  {...mergePartProps<ButtonBaseProps>(\n                    // 拖动的把手不出波纹\n                    { sx: sortableStyles.handle, ripple: false },\n                    propsHandle,\n                    {\n                      disabled,\n                      'aria-label': lang.sortableHandle(getLabel?.(item) ?? key),\n                      ...sortable.handleProps(key),\n                    },\n                  )}\n                >\n                  <Icon icon={GripVertical} />\n                </ButtonBase>\n                <div {...mergeAttrs<'div'>({ sx: sortableStyles.content }, propsContent)}>\n                  {children?.(item, state)}\n                </div>\n              </li>\n            );\n          })}\n        </FlexList>\n        <VisuallyHidden id={sortable.instructionsId}>{lang.sortableInstructions}</VisuallyHidden>\n        <VisuallyHidden aria-live=\"assertive\">{sortable.announcement}</VisuallyHidden>\n      </>\n    );\n  },\n  { name: 'Sortable' },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Sortable.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_Fragment","_mergeProps","_vtp_childrenStable"],"sources":["../../src/display/Sortable.tsx"],"sourcesContent":["/**\n * 可拖动排序的列表（ul）：每项前有一个把手，拖动或用键盘改变顺序，数据双向绑定。\n *\n *   <Sortable _items={tasks} getKey={(task) => task.id} getLabel={(task) => task.title} aria-label=\"待办\">\n *     {(task) => <Text>{task.title}</Text>}\n *   </Sortable>\n *\n * 拖动、键盘、读屏播报、自动滚动、布局动画见 useSortable（utils/dom/sortable.ts）。\n * 列表自己不滚动：项多时在外面包 ScrollArea（横排写 axis=\"x\"），拖到边缘时自动滚动会找到它的视口，滚动条与整站一致。\n * 把手是按钮：名称“移动 项名”，操作说明经 aria-describedby 关联，拿起时 aria-pressed。\n * 部件：Root（ul）、Item（li）、Handle（button）、Content（div）。\n */\nimport { GripVertical } 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 { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Icon } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useSortable, type SortableOrientations } from '../utils/dom/sortable';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { FlexList, type FlexProps } from '../layout/Flex';\nimport { toElement } from '../utils/dom/element';\nimport { t } from '../config/theme/tokens';\n\n/** 项的渲染状态 */\nexport interface SortableItemState {\n  /** 当前位置，从 0 开始 */\n  index: number;\n  /** 正在被拖动或被键盘拿起 */\n  active: boolean;\n}\n\n/** 未声明的属性落到 ul 上；aria-label 或 aria-labelledby 是列表的名称 */\nexport interface SortableProps<T> extends PartProps<'ul'> {\n  /** 各项：父级写 _items={list}，顺序变了写回新的数组 */\n  _items?: T[];\n  /** 项的 key，同一列表里唯一 */\n  getKey: (item: T) => string;\n  /** 项的名称：把手的名称与读屏播报用它；默认是 key */\n  getLabel?: (item: T) => string;\n  /** 排列方向，默认 vertical */\n  orientation?: keyof SortableOrientations;\n  /** 不可用：不能拖动 */\n  disabled?: boolean;\n  /** 每项的内容 */\n  children?: (item: T, state: SortableItemState) => VNodeChild;\n  /** 每一项（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: T, state: SortableItemState) => PartProps<'li'>);\n  /** 把手的部件属性 */\n  propsHandle?: Partial<ButtonBaseProps>;\n  /** 内容的部件属性 */\n  propsContent?: PartProps<'div'>;\n}\n\n/** Sortable 的样式：item、active、handle、content */\nexport const sortableStyles = css.create({\n  // 方向、间距、去掉圆点由 FlexList 给\n  item: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_xs',\n    // 起始边是把手（自带留白），结束边多留一点，文字不贴着边框\n    paddingInlineStart: '_xs',\n    paddingInlineEnd: '_sm',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    color: '_text',\n  },\n  // 横排时项不收缩：放不下就溢出（外面包 ScrollArea 横向滚动），不把文字挤成一字一行\n  itemHorizontal: { flexShrink: 0 },\n  // 拿起时浮起来：阴影与品牌色边框，盖在其他项上面\n  active: { zIndex: 1, borderColor: '_accent', boxShadow: '_md' },\n  // 去掉按钮默认外观、焦点环由 ButtonBase 给出\n  handle: {\n    display: 'grid',\n    placeItems: 'center',\n    flexShrink: 0,\n    width: `max(1.75em, ${t.sizes.minTarget})`,\n    height: `max(1.75em, ${t.sizes.minTarget})`,\n    borderRadius: '_sm',\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n    color: '_textMuted',\n    cursor: { default: 'grab', ':active': 'grabbing' },\n    // 触摸拖动时不滚动页面\n    touchAction: 'none',\n  },\n  content: { flexGrow: 1, minWidth: 0 },\n});\n\n/** 可拖动排序的列表：把手拖动或键盘移动 */\nexport const Sortable = _component(\n  <T,>({\n    _items: items = _bindable<T[]>([]),\n    getKey,\n    getLabel,\n    orientation = 'vertical',\n    disabled = false,\n    children,\n    propsItem,\n    propsHandle,\n    propsContent,\n    ...rest\n  }: SortableProps<T>) => {\n    const lang = useLang();\n    let root = _state.raw<HTMLElement | null>(null);\n    const sortable = useSortable<T>({\n      items: () => items,\n      getKey: (item) => getKey(item),\n      getLabel: (item) => getLabel?.(item) ?? getKey(item),\n      onChange: (next) => (items = next),\n      container: () => root,\n      orientation: () => orientation,\n      disabled: () => disabled,\n    });\n\n    return () => (\n      <>\n        <FlexList\n          {...mergePartProps<FlexProps<'ul'>>(\n            {\n              direction: orientation === 'horizontal' ? 'row' : 'column',\n              gap: 'xs',\n            },\n            rest,\n            { ref: (value: unknown) => (root = toElement(value)) },\n          )}\n          data-orientation={orientation}\n        >\n          {items.map((item, index) => {\n            const key = getKey(item);\n            const state: SortableItemState = { index, active: sortable.active === key };\n            const own = typeof propsItem === 'function' ? propsItem(item, state) : propsItem;\n            return (\n              <li\n                key={key}\n                {...mergeAttrs<'li'>(\n                  {\n                    sx: [\n                      sortableStyles.item,\n                      orientation === 'horizontal' && sortableStyles.itemHorizontal,\n                      state.active && sortableStyles.active,\n                    ],\n                  },\n                  own,\n                  sortable.itemProps(key),\n                )}\n              >\n                <ButtonBase\n                  {...mergePartProps<ButtonBaseProps>(\n                    // 拖动的把手不出波纹\n                    { sx: sortableStyles.handle, ripple: false },\n                    propsHandle,\n                    {\n                      disabled,\n                      'aria-label': lang.sortableHandle(getLabel?.(item) ?? key),\n                      ...sortable.handleProps(key),\n                    },\n                  )}\n                >\n                  <Icon icon={GripVertical} />\n                </ButtonBase>\n                <div {...mergeAttrs<'div'>({ sx: sortableStyles.content }, propsContent)}>\n                  {children?.(item, state)}\n                </div>\n              </li>\n            );\n          })}\n        </FlexList>\n        <VisuallyHidden id={sortable.instructionsId}>{lang.sortableInstructions}</VisuallyHidden>\n        <VisuallyHidden aria-live=\"assertive\">{sortable.announcement}</VisuallyHidden>\n      </>\n    );\n  },\n  { name: 'Sortable' },\n);\n"],"mappings":"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"}

package/dist/display/Sparkline.js

@@ -4,8 +4,8 @@ import { useLang } from "../config/context.js";
 import { mergeAttrs } from "../utils/props.js";
 import { toneFillStyles } from "../utils/style/tone-styles.js";
 import { useFormat } from "../config/lang/format.js";
-import { createVNode, mergeProps } from "vue";
-import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+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";
 //#region src/display/Sparkline.tsx
 /** 迷你图的画法 */
@@ -96,20 +96,20 @@ var Sparkline = /*#__PURE__*/ _component((_props, _ctx) => {
 		] }, rest, {
 			role: "img",
 			"aria-label": label.value ? `${label.value}：${summary}` : summary
-		}), [createVNode("svg", mergeProps(css.attrs(sparklineStyles.svg), {
+		}), [createVNode("svg", mergeJsxProps(css.attrs(sparklineStyles.svg), {
 			"viewBox": `0 0 ${width} 100`,
 			"preserveAspectRatio": "none",
 			"aria-hidden": "true"
-		}), [bars ? values.map((value, position) => value === void 0 ? null : createVNode("rect", mergeProps({
+		}), [bars ? values.map((value, position) => value === void 0 ? null : createVNode("rect", mergeJsxProps({
 			"key": position,
 			"x": position + .15,
 			"width": .7,
 			"y": Math.min(yOf(value), yOf(Math.max(low, 0))),
 			"height": Math.abs(yOf(value) - yOf(Math.max(low, 0)))
-		}, css.attrs(sparklineStyles.bar)), null)) : segments.map((points, position) => createVNode("g", { "key": position }, [variant.value === "area" && points.length > 1 && createVNode("path", mergeProps({ "d": `${path(points)} L${points.at(-1)[0]} 100 L${points[0][0]} 100 Z` }, css.attrs(sparklineStyles.area)), null), createVNode("path", mergeProps({
+		}, css.attrs(sparklineStyles.bar)), null)) : segments.map((points, position) => createVNode("g", { "key": position }, [variant.value === "area" && points.length > 1 && createVNode("path", mergeJsxProps({ "d": `${path(points)} L${points.at(-1)[0]} 100 L${points[0][0]} 100 Z` }, css.attrs(sparklineStyles.area)), null), createVNode("path", mergeJsxProps({
 			"d": path(points),
 			"vector-effect": "non-scaling-stroke"
-		}, css.attrs(sparklineStyles.line)), null)]))]), showLast.value && !bars && lastIndex >= 0 && createVNode("span", mergeProps({ "aria-hidden": "true" }, css.attrs(sparklineStyles.last, css.bind(sparklineStyles.position, () => [`${lastIndex / width * 100}%`, `${yOf(values[lastIndex])}%`]))), null)]);
+		}, css.attrs(sparklineStyles.line)), null)]))]), showLast.value && !bars && lastIndex >= 0 && createVNode("span", mergeJsxProps({ "aria-hidden": "true" }, css.attrs(sparklineStyles.last, css.bind(sparklineStyles.position, () => [`${lastIndex / width * 100}%`, `${yOf(values[lastIndex])}%`]))), null)]);
 	};
 }, {
 	name: "Sparkline",

package/dist/display/Sparkline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sparkline.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/Sparkline.tsx"],"sourcesContent":["/**\n * 迷你图：没有坐标轴的小折线、面积或柱，嵌在指标卡（Stat 的 children）、表格的格子、列表的一行里看走势。\n * 纯 SVG，不依赖图表库；宽度占满容器，高度默认 2em（随字号缩放）。\n *\n *   <Stat label=\"实际销售\" value={910.36} unit=\"万元\">\n *     <Sparkline data={monthly} variant=\"area\" label=\"近 12 个月\" />\n *   </Stat>\n *   <Sparkline data={[3, 5, null, 4, 8]} variant=\"bar\" tone=\"success\" />\n *\n * 空值（null、undefined）处断开（柱是空位）；默认标出最后一个点。读屏念成一句话：几个值、从哪到哪、最低最高\n * （按 valueFormat 与当前语言格式化），label 写在前面。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useLang } from '../config/context';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { toneFillStyles, type StatusTone } from '../utils/style/tone-styles';\nimport { t } from '../config/theme/tokens';\n\n/** 迷你图的画法 */\nexport interface SparklineVariants {\n  /** 折线（默认） */\n  line: unknown;\n  /** 折线下面填一层浅色 */\n  area: unknown;\n  /** 柱：每个值一根，从 0 起 */\n  bar: unknown;\n}\n\n/** 角色与名称由组件给出（role=\"img\"，名称是 label 加上数据的概括） */\nexport type SparklineManaged = 'role' | 'aria-label';\n\n/** 未声明的属性落到外层 span 上 */\nexport interface SparklineProps extends PartProps<'span', SparklineManaged> {\n  /** 各个值，按时间先后；空值处断开 */\n  data: readonly (NumericValue | null | undefined)[];\n  /** 画法，默认 line */\n  variant?: keyof SparklineVariants;\n  /** 色调，默认 accent */\n  tone?: StatusTone;\n  /** 高度（CSS 长度），默认 2em */\n  height?: string;\n  /** 标出最后一个点（折线、面积），默认 true */\n  showLast?: boolean;\n  /** 纵向范围 [最小, 最大]；不写的一端按数据取（柱从 0 起） */\n  domain?: readonly [number | undefined, number | undefined];\n  /** 读屏念的数值格式 */\n  valueFormat?: NumericFormat;\n  /** 名称：读屏先念它（“近 12 个月实际销售”） */\n  label?: string;\n}\n\n/** Sparkline 的样式 */\nexport const sparklineStyles = css.create({\n  root: { position: 'relative', display: 'block', width: '100%' },\n  svg: { display: 'block', width: '100%', height: '100%', overflow: 'visible' },\n  line: {\n    fill: 'none',\n    stroke: 'var(--tone-fill)',\n    strokeWidth: 1.5,\n    strokeLinejoin: 'round',\n    strokeLinecap: 'round',\n  },\n  area: { fill: 'var(--tone-fill)', fillOpacity: 0.15, stroke: 'none' },\n  bar: { fill: 'var(--tone-fill)', fillOpacity: 0.85 },\n  // 最后一个点：HTML 圆点按百分比定位（SVG 拉伸时圆不变形）\n  last: {\n    position: 'absolute',\n    width: '6px',\n    height: '6px',\n    borderRadius: '_full',\n    backgroundColor: 'var(--tone-fill)',\n    // 一圈表面色把点与线分开\n    boxShadow: `0 0 0 2px ${t.colors.surface}`,\n    transform: 'translate(-50%, -50%)',\n    pointerEvents: 'none',\n  },\n  height: (height: string) => ({ height }),\n  position: (left: string, top: string) => ({ left, top }),\n});\n\n/** 迷你图：小折线、面积或柱 */\nexport const Sparkline = _component(\n  ({\n    data,\n    variant = 'line',\n    tone = 'accent',\n    height = '2em',\n    showLast = true,\n    domain,\n    valueFormat,\n    label,\n    ...rest\n  }: SparklineProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    return () => {\n      const values = data.map((value) => (value == null ? undefined : toNumber(value)));\n      const present = values.filter((value): value is number => value !== undefined);\n      const bars = variant === 'bar';\n      const low = domain?.[0] ?? Math.min(...present, ...(bars ? [0] : []));\n      const high = domain?.[1] ?? Math.max(...present, ...(bars ? [0] : []));\n      const span = high - low || 1;\n      // 纵坐标 0（上）–100（下）；横坐标按位置，柱每个占 1 格\n      const yOf = (value: number) => 100 - ((value - low) / span) * 100;\n      const width = bars ? values.length : Math.max(values.length - 1, 1);\n\n      // 连续的段：空值处断开\n      const segments: [number, number][][] = [];\n      let current: [number, number][] = [];\n      values.forEach((value, position) => {\n        if (value === undefined) {\n          if (current.length) segments.push(current);\n          current = [];\n        } else current.push([position, yOf(value)]);\n      });\n      if (current.length) segments.push(current);\n      const path = (points: [number, number][]) =>\n        points.map(([x, y], i) => `${i ? 'L' : 'M'}${x} ${y}`).join(' ');\n\n      const lastIndex = values.findLastIndex((value) => value !== undefined);\n      const summary =\n        present.length === 0\n          ? lang.emptyValue\n          : lang.sparklineSummary(\n              present.length,\n              format.number(data[values.findIndex((value) => value !== undefined)]!, valueFormat),\n              format.number(data[lastIndex]!, valueFormat),\n              format.number(Math.min(...present), valueFormat),\n              format.number(Math.max(...present), valueFormat),\n            );\n\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [sparklineStyles.root, sparklineStyles.height(height), toneFillStyles[tone]] },\n            rest,\n            { role: 'img', 'aria-label': label ? `${label}：${summary}` : summary },\n          )}\n        >\n          <svg\n            {...css.attrs(sparklineStyles.svg)}\n            viewBox={`0 0 ${width} 100`}\n            preserveAspectRatio=\"none\"\n            aria-hidden=\"true\"\n          >\n            {bars\n              ? values.map((value, position) =>\n                  value === undefined ? null : (\n                    <rect\n                      key={position}\n                      x={position + 0.15}\n                      width={0.7}\n                      y={Math.min(yOf(value), yOf(Math.max(low, 0)))}\n                      height={Math.abs(yOf(value) - yOf(Math.max(low, 0)))}\n                      {...css.attrs(sparklineStyles.bar)}\n                    />\n                  ),\n                )\n              : segments.map((points, position) => (\n                  <g key={position}>\n                    {variant === 'area' && points.length > 1 && (\n                      <path\n                        d={`${path(points)} L${points.at(-1)![0]} 100 L${points[0]![0]} 100 Z`}\n                        {...css.attrs(sparklineStyles.area)}\n                      />\n                    )}\n                    <path\n                      d={path(points)}\n                      vector-effect=\"non-scaling-stroke\"\n                      {...css.attrs(sparklineStyles.line)}\n                    />\n                  </g>\n                ))}\n          </svg>\n          {showLast && !bars && lastIndex >= 0 && (\n            <span\n              aria-hidden=\"true\"\n              {...css.attrs(\n                sparklineStyles.last,\n                sparklineStyles.position(\n                  `${(lastIndex / width) * 100}%`,\n                  `${yOf(values[lastIndex]!)}%`,\n                ),\n              )}\n            />\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Sparkline.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/Sparkline.tsx"],"sourcesContent":["/**\n * 迷你图：没有坐标轴的小折线、面积或柱，嵌在指标卡（Stat 的 children）、表格的格子、列表的一行里看走势。\n * 纯 SVG，不依赖图表库；宽度占满容器，高度默认 2em（随字号缩放）。\n *\n *   <Stat label=\"实际销售\" value={910.36} unit=\"万元\">\n *     <Sparkline data={monthly} variant=\"area\" label=\"近 12 个月\" />\n *   </Stat>\n *   <Sparkline data={[3, 5, null, 4, 8]} variant=\"bar\" tone=\"success\" />\n *\n * 空值（null、undefined）处断开（柱是空位）；默认标出最后一个点。读屏念成一句话：几个值、从哪到哪、最低最高\n * （按 valueFormat 与当前语言格式化），label 写在前面。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useLang } from '../config/context';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { toneFillStyles, type StatusTone } from '../utils/style/tone-styles';\nimport { t } from '../config/theme/tokens';\n\n/** 迷你图的画法 */\nexport interface SparklineVariants {\n  /** 折线（默认） */\n  line: unknown;\n  /** 折线下面填一层浅色 */\n  area: unknown;\n  /** 柱：每个值一根，从 0 起 */\n  bar: unknown;\n}\n\n/** 角色与名称由组件给出（role=\"img\"，名称是 label 加上数据的概括） */\nexport type SparklineManaged = 'role' | 'aria-label';\n\n/** 未声明的属性落到外层 span 上 */\nexport interface SparklineProps extends PartProps<'span', SparklineManaged> {\n  /** 各个值，按时间先后；空值处断开 */\n  data: readonly (NumericValue | null | undefined)[];\n  /** 画法，默认 line */\n  variant?: keyof SparklineVariants;\n  /** 色调，默认 accent */\n  tone?: StatusTone;\n  /** 高度（CSS 长度），默认 2em */\n  height?: string;\n  /** 标出最后一个点（折线、面积），默认 true */\n  showLast?: boolean;\n  /** 纵向范围 [最小, 最大]；不写的一端按数据取（柱从 0 起） */\n  domain?: readonly [number | undefined, number | undefined];\n  /** 读屏念的数值格式 */\n  valueFormat?: NumericFormat;\n  /** 名称：读屏先念它（“近 12 个月实际销售”） */\n  label?: string;\n}\n\n/** Sparkline 的样式 */\nexport const sparklineStyles = css.create({\n  root: { position: 'relative', display: 'block', width: '100%' },\n  svg: { display: 'block', width: '100%', height: '100%', overflow: 'visible' },\n  line: {\n    fill: 'none',\n    stroke: 'var(--tone-fill)',\n    strokeWidth: 1.5,\n    strokeLinejoin: 'round',\n    strokeLinecap: 'round',\n  },\n  area: { fill: 'var(--tone-fill)', fillOpacity: 0.15, stroke: 'none' },\n  bar: { fill: 'var(--tone-fill)', fillOpacity: 0.85 },\n  // 最后一个点：HTML 圆点按百分比定位（SVG 拉伸时圆不变形）\n  last: {\n    position: 'absolute',\n    width: '6px',\n    height: '6px',\n    borderRadius: '_full',\n    backgroundColor: 'var(--tone-fill)',\n    // 一圈表面色把点与线分开\n    boxShadow: `0 0 0 2px ${t.colors.surface}`,\n    transform: 'translate(-50%, -50%)',\n    pointerEvents: 'none',\n  },\n  height: (height: string) => ({ height }),\n  position: (left: string, top: string) => ({ left, top }),\n});\n\n/** 迷你图：小折线、面积或柱 */\nexport const Sparkline = _component(\n  ({\n    data,\n    variant = 'line',\n    tone = 'accent',\n    height = '2em',\n    showLast = true,\n    domain,\n    valueFormat,\n    label,\n    ...rest\n  }: SparklineProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    return () => {\n      const values = data.map((value) => (value == null ? undefined : toNumber(value)));\n      const present = values.filter((value): value is number => value !== undefined);\n      const bars = variant === 'bar';\n      const low = domain?.[0] ?? Math.min(...present, ...(bars ? [0] : []));\n      const high = domain?.[1] ?? Math.max(...present, ...(bars ? [0] : []));\n      const span = high - low || 1;\n      // 纵坐标 0（上）–100（下）；横坐标按位置，柱每个占 1 格\n      const yOf = (value: number) => 100 - ((value - low) / span) * 100;\n      const width = bars ? values.length : Math.max(values.length - 1, 1);\n\n      // 连续的段：空值处断开\n      const segments: [number, number][][] = [];\n      let current: [number, number][] = [];\n      values.forEach((value, position) => {\n        if (value === undefined) {\n          if (current.length) segments.push(current);\n          current = [];\n        } else current.push([position, yOf(value)]);\n      });\n      if (current.length) segments.push(current);\n      const path = (points: [number, number][]) =>\n        points.map(([x, y], i) => `${i ? 'L' : 'M'}${x} ${y}`).join(' ');\n\n      const lastIndex = values.findLastIndex((value) => value !== undefined);\n      const summary =\n        present.length === 0\n          ? lang.emptyValue\n          : lang.sparklineSummary(\n              present.length,\n              format.number(data[values.findIndex((value) => value !== undefined)]!, valueFormat),\n              format.number(data[lastIndex]!, valueFormat),\n              format.number(Math.min(...present), valueFormat),\n              format.number(Math.max(...present), valueFormat),\n            );\n\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [sparklineStyles.root, sparklineStyles.height(height), toneFillStyles[tone]] },\n            rest,\n            { role: 'img', 'aria-label': label ? `${label}：${summary}` : summary },\n          )}\n        >\n          <svg\n            {...css.attrs(sparklineStyles.svg)}\n            viewBox={`0 0 ${width} 100`}\n            preserveAspectRatio=\"none\"\n            aria-hidden=\"true\"\n          >\n            {bars\n              ? values.map((value, position) =>\n                  value === undefined ? null : (\n                    <rect\n                      key={position}\n                      x={position + 0.15}\n                      width={0.7}\n                      y={Math.min(yOf(value), yOf(Math.max(low, 0)))}\n                      height={Math.abs(yOf(value) - yOf(Math.max(low, 0)))}\n                      {...css.attrs(sparklineStyles.bar)}\n                    />\n                  ),\n                )\n              : segments.map((points, position) => (\n                  <g key={position}>\n                    {variant === 'area' && points.length > 1 && (\n                      <path\n                        d={`${path(points)} L${points.at(-1)![0]} 100 L${points[0]![0]} 100 Z`}\n                        {...css.attrs(sparklineStyles.area)}\n                      />\n                    )}\n                    <path\n                      d={path(points)}\n                      vector-effect=\"non-scaling-stroke\"\n                      {...css.attrs(sparklineStyles.line)}\n                    />\n                  </g>\n                ))}\n          </svg>\n          {showLast && !bars && lastIndex >= 0 && (\n            <span\n              aria-hidden=\"true\"\n              {...css.attrs(\n                sparklineStyles.last,\n                sparklineStyles.position(\n                  `${(lastIndex / width) * 100}%`,\n                  `${yOf(values[lastIndex]!)}%`,\n                ),\n              )}\n            />\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Stat.js

@@ -6,8 +6,8 @@ import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
 import { AnimatedNumber } from "./AnimatedNumber.js";
 import { shimmerStyles } from "../utils/style/shimmer.js";
 import { Skeleton } from "../feedback/Skeleton.js";
-import { Fragment, createVNode, mergeProps } from "vue";
-import { _component, childrenProp, createContext, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Fragment, createVNode } from "vue";
+import { _component, childrenProp, createContext, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { TrendingDown, TrendingUp } from "@lucide/icons";
 //#region src/display/Stat.tsx
@@ -189,7 +189,7 @@ var Stat = /*#__PURE__*/ _component((_props, _ctx) => {
 				value: value.value,
 				format: format.value
 			}), null) : createVNode("span", mergeAttrs({ sx: [statStyles.number, tone.value && toneStyles[tone.value]] }, propsNumber.value), [value.value]), unit.value != null && !skeleton.value && createVNode("span", mergeAttrs({ sx: statStyles.unit }, propsUnit.value), [unit.value])]),
-			change.value !== void 0 && createVNode("dd", mergeProps(mergeAttrs({ sx: [statStyles.change, reveal] }, propsChange.value), { "data-trend": skeleton.value ? void 0 : direction }), [skeleton.value ? createVNode(Skeleton, { "sx": statStyles.changeSkeleton }, null) : createVNode(Fragment, null, [createVNode("span", css.attrs(toneStyles[changeTone]), [
+			change.value !== void 0 && createVNode("dd", mergeJsxProps(mergeAttrs({ sx: [statStyles.change, reveal] }, propsChange.value), { "data-trend": skeleton.value ? void 0 : direction }), [skeleton.value ? createVNode(Skeleton, { "sx": statStyles.changeSkeleton }, null) : createVNode(Fragment, null, [createVNode("span", css.attrs(toneStyles[changeTone]), [
 				direction !== "flat" && createVNode(Icon, {
 					"icon": direction === "up" ? TrendingUp : TrendingDown,
 					"aria-hidden": "true"

package/dist/display/Stat.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stat.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","_Fragment"],"sources":["../../src/display/Stat.tsx"],"sourcesContent":["/**\n * 统计数值（dl）：指标名、数值与单位、可选的图标与环比变化。仪表盘顶部的一排卡片、详情页的关键指标。\n * 外观只是内容，放进 Card、Grid 里组合：\n *\n *   <Card><Stat label=\"实际销售额\" value={910.36} unit=\"万元\" icon={Wallet} change={0.123} changeLabel=\"较上月\" /></Card>\n *   <Stat label=\"测算销售\" value={a} format={wan} unit=\"万元\" footer={<><span>年度目标 2,000 万元</span><span>完成 81%</span></>}>\n *     <Progress value={81} size=\"xs\" aria-label=\"年度目标完成度\" />\n *   </Stat>\n *\n * 排版（参考 Ant Design Pro 的 ChartCard）：第一行是图标与指标名、结束边是变化量；第二行是数值；\n * children 是数值下面占满整宽的补充内容（进度条、迷你图）；footer 是底栏，上方一条分隔线，放两项时分别靠两端。\n * 卡片再宽，内容也铺满整行，不在中间留一大块空白。\n *\n * 一排几个指标用 StatGroup：按宽度换行，指标之间一条竖线（同一行里）：\n *\n *   <StatGroup><Stat label=\"超时\" value={10} tone=\"danger\" /><Stat label=\"待验收\" value={5} /></StatGroup>\n *\n * 数值变化时滚动过渡（AnimatedNumber），读屏只读终值；变化量按正负着色并带箭头，\n * 成本、耗时这类“越低越好”的指标写 invertChange。加载中（loading）数值与变化量换成扫光的骨架，指标名照常显示。\n */\nimport { TrendingDown, TrendingUp } from '@lucide/icons';\nimport { createContext, _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 } from '../base/Icon';\nimport type { NumericFormat } from '../config/lang/format';\nimport { Skeleton } from '../feedback/Skeleton';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { shimmerStyles } from '../utils/style/shimmer';\nimport { toneStyles, type Tone } from '../utils/style/typography';\nimport type { NumericValue } from '../utils/data/numeric';\nimport { AnimatedNumber, type AnimatedNumberProps } from './AnimatedNumber';\nimport { t } from '../config/theme/tokens';\n\n/** 忙碌由组件按 loading 管理 */\nexport type StatManaged = 'aria-busy';\n\n/** 未声明的属性落到外层 dl 上 */\nexport interface StatProps extends PartProps<'dl', StatManaged> {\n  /** 指标名 */\n  label: VNodeChild;\n  /** 数值：number、bigint、Decimal 按当前语言格式化并在变化时滚动；字符串原样显示（如“—”、“98.5%”） */\n  value: NumericValue | string;\n  /**\n   * 数值的格式，如两位小数 `{ minimumFractionDigits: 2 }`、百分比 `{ style: 'percent' }`；\n   * 值以元给出、按万元显示时写 `{ scale: 10_000, maximumFractionDigits: 2 }` 并配 `unit=\"万元\"`\n   */\n  format?: NumericFormat;\n  /** 单位，跟在数值后面、字号小一档 */\n  unit?: VNodeChild;\n  /** 数值的色调：超时、缺漏这类要引起注意的数用 danger、warning；不写时是正文色 */\n  tone?: Tone;\n  /** 指标名前面的图标（装饰，对读屏隐藏） */\n  icon?: IconData;\n  /** 变化量（环比、同比）：正数向上、负数向下；默认按百分比显示（0.12 → +12%） */\n  change?: number;\n  /** 变化量的格式，默认 `{ style: 'percent', maximumFractionDigits: 1, signDisplay: 'exceptZero' }` */\n  changeFormat?: NumericFormat;\n  /** 变化量后面的说明，如“较上月” */\n  changeLabel?: VNodeChild;\n  /** 下降是好事（成本、耗时、故障数）：下降显示成功色、上升显示危险色 */\n  invertChange?: boolean;\n  /** 数值下面的补充说明（一行小字） */\n  description?: VNodeChild;\n  /** 底栏：上方一条分隔线；放两项时分别靠两端，如“年度目标 2,000 万元”与“完成 81%” */\n  footer?: VNodeChild;\n  /** 数值下面占满整宽的补充内容：进度条、迷你图 */\n  children?: VNodeChild;\n  /**\n   * 加载中：数值与变化量换成扫光的骨架，带 aria-busy；很快完成时不闪\n   * @default false\n   */\n  loading?: boolean;\n  /** 指标名（dt）的部件属性 */\n  propsLabel?: PartProps<'dt'>;\n  /** 数值（dd）的部件属性 */\n  propsValue?: PartProps<'dd'>;\n  /** 图标外层的部件属性 */\n  propsIcon?: PartProps<'span', 'aria-hidden'>;\n  /** 数字本身（AnimatedNumber 或字符串值的 span）的部件属性 */\n  propsNumber?: PartProps<'span', 'prefix'>;\n  /** 单位的部件属性 */\n  propsUnit?: PartProps<'span'>;\n  /** 变化（dd）的部件属性 */\n  propsChange?: PartProps<'dd'>;\n  /** 变化后面的说明的部件属性 */\n  propsChangeLabel?: PartProps<'span'>;\n  /** 补充说明（dd）的部件属性 */\n  propsDescription?: PartProps<'dd'>;\n  /** 补充内容（dd，children 的外层）的部件属性 */\n  propsBody?: PartProps<'dd'>;\n  /** 底栏（dd）的部件属性 */\n  propsFooter?: PartProps<'dd'>;\n}\n\nconst CHANGE_FORMAT: NumericFormat = {\n  style: 'percent',\n  maximumFractionDigits: 1,\n  signDisplay: 'exceptZero',\n};\n\n/** 在 StatGroup 里：指标之间画竖线 */\nconst StatGroupContext = createContext<boolean>('StatGroup');\n\n/** Stat 的样式：root、label、icon、value、number、unit、change、description、body、footer、skeleton… */\nexport const statStyles = css.create({\n  // 第一行是指标名与变化量（结束边），其余各占一整行。可换行的弹性布局而不是两列网格：\n  // 卡片窄时变化量换到下一行，指标名不被挤成一字一行；DOM 顺序不变（读屏仍是名称、数值、变化量）\n  root: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: '_sm',\n    rowGap: '_xs',\n    margin: 0,\n    minWidth: 0,\n  },\n  // dt 里放图标与指标名：dl 的子元素只能是 dt、dd\n  label: {\n    order: 0,\n    flexGrow: 1,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    minWidth: 0,\n    margin: 0,\n    color: '_textMuted',\n    fontSize: '_sm',\n  },\n  icon: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    width: '1.75em',\n    height: '1.75em',\n    borderRadius: '_md',\n    backgroundColor: '_accentSoft',\n    color: '_accentText',\n  },\n  value: {\n    order: 2,\n    flexBasis: '100%',\n    display: 'flex',\n    alignItems: 'baseline',\n    flexWrap: 'wrap',\n    gap: '_xs',\n    margin: 0,\n  },\n  number: {\n    fontSize: '_xxl',\n    fontWeight: '_bold',\n    lineHeight: '_tight',\n    color: '_text',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  unit: { color: '_textMuted', fontSize: '_xs' },\n  // 变化量在指标名那一行的结束边\n  change: {\n    order: 1,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_xs',\n    fontSize: '_xs',\n    margin: 0,\n    whiteSpace: 'nowrap',\n  },\n  changeLabel: { color: '_textMuted' },\n  description: { order: 3, flexBasis: '100%', color: '_textMuted', fontSize: '_xs', margin: 0 },\n  body: { order: 3, flexBasis: '100%', margin: 0, minWidth: 0 },\n  // 底栏：两项时分别靠两端，多了换行\n  footer: {\n    order: 3,\n    flexBasis: '100%',\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'baseline',\n    justifyContent: 'space-between',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n    marginBlockStart: '_xs',\n    paddingBlockStart: '_sm',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n    color: '_textMuted',\n    fontSize: '_xs',\n  },\n  // 骨架与数值、变化量同高：加载完换成内容时不跳\n  numberSkeleton: { fontSize: '_xxl', width: '4em', height: '1.25em' },\n  changeSkeleton: { width: '6em', height: '1.5em' },\n});\n\n/** 统计数值：指标名、数值与单位、图标、变化量 */\nexport const Stat = _component(\n  ({\n    label,\n    value,\n    format,\n    unit,\n    tone,\n    icon,\n    change,\n    changeFormat = CHANGE_FORMAT,\n    changeLabel,\n    invertChange = false,\n    description,\n    footer,\n    children,\n    loading = false,\n    propsLabel,\n    propsValue,\n    propsIcon,\n    propsNumber,\n    propsUnit,\n    propsChange,\n    propsChangeLabel,\n    propsDescription,\n    propsBody,\n    propsFooter,\n    ...rest\n  }: StatProps) => {\n    const grouped = StatGroupContext.inject(false);\n    // 骨架防闪烁；aria-busy 按真实的 loading\n    const skeleton = useDelayedLoading(() => loading);\n    // 出现过骨架之后，换回数值时淡入（样式在切换的那一刻加上，动画才会播）\n    let revealing = false;\n    return () => {\n      if (skeleton.value) revealing = true;\n      const reveal = revealing && !skeleton.value && shimmerStyles.reveal;\n      const direction = change === undefined || change === 0 ? 'flat' : change > 0 ? 'up' : 'down';\n      const improved = invertChange ? direction === 'down' : direction === 'up';\n      const changeTone = direction === 'flat' ? 'muted' : improved ? 'success' : 'danger';\n      return (\n        <dl\n          {...mergeAttrs<'dl'>({ sx: [statStyles.root, grouped && statGroupStyles.item] }, rest, {\n            'aria-busy': loading || undefined,\n          })}\n        >\n          <dt {...mergeAttrs<'dt'>({ sx: statStyles.label }, propsLabel)}>\n            {icon && (\n              <span\n                {...mergeAttrs<'span'>({ sx: statStyles.icon }, propsIcon, { 'aria-hidden': true })}\n              >\n                <Icon icon={icon} />\n              </span>\n            )}\n            <span>{label}</span>\n          </dt>\n          <dd {...mergeAttrs<'dd'>({ sx: [statStyles.value, reveal] }, propsValue)}>\n            {skeleton.value ? (\n              <Skeleton sx={statStyles.numberSkeleton} />\n            ) : typeof value !== 'string' ? (\n              <AnimatedNumber\n                {...mergePartProps<AnimatedNumberProps>(\n                  { sx: [statStyles.number, tone && toneStyles[tone]], value },\n                  propsNumber,\n                  {\n                    value,\n                    format,\n                  },\n                )}\n              />\n            ) : (\n              <span\n                {...mergeAttrs<'span'>(\n                  { sx: [statStyles.number, tone && toneStyles[tone]] },\n                  propsNumber,\n                )}\n              >\n                {value}\n              </span>\n            )}\n            {unit != null && !skeleton.value && (\n              <span {...mergeAttrs<'span'>({ sx: statStyles.unit }, propsUnit)}>{unit}</span>\n            )}\n          </dd>\n          {change !== undefined && (\n            <dd\n              {...mergeAttrs<'dd'>({ sx: [statStyles.change, reveal] }, propsChange)}\n              data-trend={skeleton.value ? undefined : direction}\n            >\n              {skeleton.value ? (\n                <Skeleton sx={statStyles.changeSkeleton} />\n              ) : (\n                <>\n                  <span {...css.attrs(toneStyles[changeTone])}>\n                    {direction !== 'flat' && (\n                      <Icon\n                        icon={direction === 'up' ? TrendingUp : TrendingDown}\n                        aria-hidden=\"true\"\n                      />\n                    )}{' '}\n                    <AnimatedNumber value={change} format={changeFormat} />\n                  </span>\n                  {changeLabel != null && (\n                    <span {...mergeAttrs<'span'>({ sx: statStyles.changeLabel }, propsChangeLabel)}>\n                      {changeLabel}\n                    </span>\n                  )}\n                </>\n              )}\n            </dd>\n          )}\n          {hasContent(description) && (\n            <dd {...mergeAttrs<'dd'>({ sx: statStyles.description }, propsDescription)}>\n              {description}\n            </dd>\n          )}\n          {hasContent(children) && (\n            <dd {...mergeAttrs<'dd'>({ sx: statStyles.body }, propsBody)}>{children}</dd>\n          )}\n          {hasContent(footer) && (\n            <dd {...mergeAttrs<'dd'>({ sx: statStyles.footer }, propsFooter)}>{footer}</dd>\n          )}\n        </dl>\n      );\n    };\n  },\n);\n\n/** 未声明的属性落到外层 div 上 */\nexport interface StatGroupProps extends PartProps<'div'> {\n  /**\n   * 每个指标最窄多宽（CSS 长度）：放不下就换行\n   * @default '9rem'\n   */\n  minItemWidth?: string;\n  /** Stat */\n  children?: VNodeChild;\n}\n\n/** StatGroup 的样式：root、item */\nexport const statGroupStyles = css.create({\n  // 每个指标的起始边一条竖线；整组往起始方向挪一条线的位置，每行第一个的竖线藏到外面（overflow 裁掉）\n  root: { display: 'grid', rowGap: '_md', overflow: 'hidden' },\n  item: {\n    paddingInline: '_md',\n    marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderMuted',\n  },\n});\n\n/** StatGroup 的动态样式：列宽 */\nexport const statGroupDynamicStyles = css.create({\n  columns: (min: string) => ({\n    gridTemplateColumns: `repeat(auto-fit, minmax(min(${min}, 100%), 1fr))`,\n  }),\n});\n\n/** 一排指标：按宽度换行，同一行里指标之间一条竖线 */\nexport const StatGroup = _component(\n  ({ minItemWidth = '9rem', children, ...rest }: StatGroupProps) => {\n    StatGroupContext.provide(true);\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          { sx: [statGroupStyles.root, statGroupDynamicStyles.columns(minItemWidth)] },\n          rest,\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Stat.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","_Fragment"],"sources":["../../src/display/Stat.tsx"],"sourcesContent":["/**\n * 统计数值（dl）：指标名、数值与单位、可选的图标与环比变化。仪表盘顶部的一排卡片、详情页的关键指标。\n * 外观只是内容，放进 Card、Grid 里组合：\n *\n *   <Card><Stat label=\"实际销售额\" value={910.36} unit=\"万元\" icon={Wallet} change={0.123} changeLabel=\"较上月\" /></Card>\n *   <Stat label=\"测算销售\" value={a} format={wan} unit=\"万元\" footer={<><span>年度目标 2,000 万元</span><span>完成 81%</span></>}>\n *     <Progress value={81} size=\"xs\" aria-label=\"年度目标完成度\" />\n *   </Stat>\n *\n * 排版（参考 Ant Design Pro 的 ChartCard）：第一行是图标与指标名、结束边是变化量；第二行是数值；\n * children 是数值下面占满整宽的补充内容（进度条、迷你图）；footer 是底栏，上方一条分隔线，放两项时分别靠两端。\n * 卡片再宽，内容也铺满整行，不在中间留一大块空白。\n *\n * 一排几个指标用 StatGroup：按宽度换行，指标之间一条竖线（同一行里）：\n *\n *   <StatGroup><Stat label=\"超时\" value={10} tone=\"danger\" /><Stat label=\"待验收\" value={5} /></StatGroup>\n *\n * 数值变化时滚动过渡（AnimatedNumber），读屏只读终值；变化量按正负着色并带箭头，\n * 成本、耗时这类“越低越好”的指标写 invertChange。加载中（loading）数值与变化量换成扫光的骨架，指标名照常显示。\n */\nimport { TrendingDown, TrendingUp } from '@lucide/icons';\nimport { createContext, _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 } from '../base/Icon';\nimport type { NumericFormat } from '../config/lang/format';\nimport { Skeleton } from '../feedback/Skeleton';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { shimmerStyles } from '../utils/style/shimmer';\nimport { toneStyles, type Tone } from '../utils/style/typography';\nimport type { NumericValue } from '../utils/data/numeric';\nimport { AnimatedNumber, type AnimatedNumberProps } from './AnimatedNumber';\nimport { t } from '../config/theme/tokens';\n\n/** 忙碌由组件按 loading 管理 */\nexport type StatManaged = 'aria-busy';\n\n/** 未声明的属性落到外层 dl 上 */\nexport interface StatProps extends PartProps<'dl', StatManaged> {\n  /** 指标名 */\n  label: VNodeChild;\n  /** 数值：number、bigint、Decimal 按当前语言格式化并在变化时滚动；字符串原样显示（如“—”、“98.5%”） */\n  value: NumericValue | string;\n  /**\n   * 数值的格式，如两位小数 `{ minimumFractionDigits: 2 }`、百分比 `{ style: 'percent' }`；\n   * 值以元给出、按万元显示时写 `{ scale: 10_000, maximumFractionDigits: 2 }` 并配 `unit=\"万元\"`\n   */\n  format?: NumericFormat;\n  /** 单位，跟在数值后面、字号小一档 */\n  unit?: VNodeChild;\n  /** 数值的色调：超时、缺漏这类要引起注意的数用 danger、warning；不写时是正文色 */\n  tone?: Tone;\n  /** 指标名前面的图标（装饰，对读屏隐藏） */\n  icon?: IconData;\n  /** 变化量（环比、同比）：正数向上、负数向下；默认按百分比显示（0.12 → +12%） */\n  change?: number;\n  /** 变化量的格式，默认 `{ style: 'percent', maximumFractionDigits: 1, signDisplay: 'exceptZero' }` */\n  changeFormat?: NumericFormat;\n  /** 变化量后面的说明，如“较上月” */\n  changeLabel?: VNodeChild;\n  /** 下降是好事（成本、耗时、故障数）：下降显示成功色、上升显示危险色 */\n  invertChange?: boolean;\n  /** 数值下面的补充说明（一行小字） */\n  description?: VNodeChild;\n  /** 底栏：上方一条分隔线；放两项时分别靠两端，如“年度目标 2,000 万元”与“完成 81%” */\n  footer?: VNodeChild;\n  /** 数值下面占满整宽的补充内容：进度条、迷你图 */\n  children?: VNodeChild;\n  /**\n   * 加载中：数值与变化量换成扫光的骨架，带 aria-busy；很快完成时不闪\n   * @default false\n   */\n  loading?: boolean;\n  /** 指标名（dt）的部件属性 */\n  propsLabel?: PartProps<'dt'>;\n  /** 数值（dd）的部件属性 */\n  propsValue?: PartProps<'dd'>;\n  /** 图标外层的部件属性 */\n  propsIcon?: PartProps<'span', 'aria-hidden'>;\n  /** 数字本身（AnimatedNumber 或字符串值的 span）的部件属性 */\n  propsNumber?: PartProps<'span', 'prefix'>;\n  /** 单位的部件属性 */\n  propsUnit?: PartProps<'span'>;\n  /** 变化（dd）的部件属性 */\n  propsChange?: PartProps<'dd'>;\n  /** 变化后面的说明的部件属性 */\n  propsChangeLabel?: PartProps<'span'>;\n  /** 补充说明（dd）的部件属性 */\n  propsDescription?: PartProps<'dd'>;\n  /** 补充内容（dd，children 的外层）的部件属性 */\n  propsBody?: PartProps<'dd'>;\n  /** 底栏（dd）的部件属性 */\n  propsFooter?: PartProps<'dd'>;\n}\n\nconst CHANGE_FORMAT: NumericFormat = {\n  style: 'percent',\n  maximumFractionDigits: 1,\n  signDisplay: 'exceptZero',\n};\n\n/** 在 StatGroup 里：指标之间画竖线 */\nconst StatGroupContext = createContext<boolean>('StatGroup');\n\n/** Stat 的样式：root、label、icon、value、number、unit、change、description、body、footer、skeleton… */\nexport const statStyles = css.create({\n  // 第一行是指标名与变化量（结束边），其余各占一整行。可换行的弹性布局而不是两列网格：\n  // 卡片窄时变化量换到下一行，指标名不被挤成一字一行；DOM 顺序不变（读屏仍是名称、数值、变化量）\n  root: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: '_sm',\n    rowGap: '_xs',\n    margin: 0,\n    minWidth: 0,\n  },\n  // dt 里放图标与指标名：dl 的子元素只能是 dt、dd\n  label: {\n    order: 0,\n    flexGrow: 1,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    minWidth: 0,\n    margin: 0,\n    color: '_textMuted',\n    fontSize: '_sm',\n  },\n  icon: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    width: '1.75em',\n    height: '1.75em',\n    borderRadius: '_md',\n    backgroundColor: '_accentSoft',\n    color: '_accentText',\n  },\n  value: {\n    order: 2,\n    flexBasis: '100%',\n    display: 'flex',\n    alignItems: 'baseline',\n    flexWrap: 'wrap',\n    gap: '_xs',\n    margin: 0,\n  },\n  number: {\n    fontSize: '_xxl',\n    fontWeight: '_bold',\n    lineHeight: '_tight',\n    color: '_text',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  unit: { color: '_textMuted', fontSize: '_xs' },\n  // 变化量在指标名那一行的结束边\n  change: {\n    order: 1,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_xs',\n    fontSize: '_xs',\n    margin: 0,\n    whiteSpace: 'nowrap',\n  },\n  changeLabel: { color: '_textMuted' },\n  description: { order: 3, flexBasis: '100%', color: '_textMuted', fontSize: '_xs', margin: 0 },\n  body: { order: 3, flexBasis: '100%', margin: 0, minWidth: 0 },\n  // 底栏：两项时分别靠两端，多了换行\n  footer: {\n    order: 3,\n    flexBasis: '100%',\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'baseline',\n    justifyContent: 'space-between',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n    marginBlockStart: '_xs',\n    paddingBlockStart: '_sm',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n    color: '_textMuted',\n    fontSize: '_xs',\n  },\n  // 骨架与数值、变化量同高：加载完换成内容时不跳\n  numberSkeleton: { fontSize: '_xxl', width: '4em', height: '1.25em' },\n  changeSkeleton: { width: '6em', height: '1.5em' },\n});\n\n/** 统计数值：指标名、数值与单位、图标、变化量 */\nexport const Stat = _component(\n  ({\n    label,\n    value,\n    format,\n    unit,\n    tone,\n    icon,\n    change,\n    changeFormat = CHANGE_FORMAT,\n    changeLabel,\n    invertChange = false,\n    description,\n    footer,\n    children,\n    loading = false,\n    propsLabel,\n    propsValue,\n    propsIcon,\n    propsNumber,\n    propsUnit,\n    propsChange,\n    propsChangeLabel,\n    propsDescription,\n    propsBody,\n    propsFooter,\n    ...rest\n  }: StatProps) => {\n    const grouped = StatGroupContext.inject(false);\n    // 骨架防闪烁；aria-busy 按真实的 loading\n    const skeleton = useDelayedLoading(() => loading);\n    // 出现过骨架之后，换回数值时淡入（样式在切换的那一刻加上，动画才会播）\n    let revealing = false;\n    return () => {\n      if (skeleton.value) revealing = true;\n      const reveal = revealing && !skeleton.value && shimmerStyles.reveal;\n      const direction = change === undefined || change === 0 ? 'flat' : change > 0 ? 'up' : 'down';\n      const improved = invertChange ? direction === 'down' : direction === 'up';\n      const changeTone = direction === 'flat' ? 'muted' : improved ? 'success' : 'danger';\n      return (\n        <dl\n          {...mergeAttrs<'dl'>({ sx: [statStyles.root, grouped && statGroupStyles.item] }, rest, {\n            'aria-busy': loading || undefined,\n          })}\n        >\n          <dt {...mergeAttrs<'dt'>({ sx: statStyles.label }, propsLabel)}>\n            {icon && (\n              <span\n                {...mergeAttrs<'span'>({ sx: statStyles.icon }, propsIcon, { 'aria-hidden': true })}\n              >\n                <Icon icon={icon} />\n              </span>\n            )}\n            <span>{label}</span>\n          </dt>\n          <dd {...mergeAttrs<'dd'>({ sx: [statStyles.value, reveal] }, propsValue)}>\n            {skeleton.value ? (\n              <Skeleton sx={statStyles.numberSkeleton} />\n            ) : typeof value !== 'string' ? (\n              <AnimatedNumber\n                {...mergePartProps<AnimatedNumberProps>(\n                  { sx: [statStyles.number, tone && toneStyles[tone]], value },\n                  propsNumber,\n                  {\n                    value,\n                    format,\n                  },\n                )}\n              />\n            ) : (\n              <span\n                {...mergeAttrs<'span'>(\n                  { sx: [statStyles.number, tone && toneStyles[tone]] },\n                  propsNumber,\n                )}\n              >\n                {value}\n              </span>\n            )}\n            {unit != null && !skeleton.value && (\n              <span {...mergeAttrs<'span'>({ sx: statStyles.unit }, propsUnit)}>{unit}</span>\n            )}\n          </dd>\n          {change !== undefined && (\n            <dd\n              {...mergeAttrs<'dd'>({ sx: [statStyles.change, reveal] }, propsChange)}\n              data-trend={skeleton.value ? undefined : direction}\n            >\n              {skeleton.value ? (\n                <Skeleton sx={statStyles.changeSkeleton} />\n              ) : (\n                <>\n                  <span {...css.attrs(toneStyles[changeTone])}>\n                    {direction !== 'flat' && (\n                      <Icon\n                        icon={direction === 'up' ? TrendingUp : TrendingDown}\n                        aria-hidden=\"true\"\n                      />\n                    )}{' '}\n                    <AnimatedNumber value={change} format={changeFormat} />\n                  </span>\n                  {changeLabel != null && (\n                    <span {...mergeAttrs<'span'>({ sx: statStyles.changeLabel }, propsChangeLabel)}>\n                      {changeLabel}\n                    </span>\n                  )}\n                </>\n              )}\n            </dd>\n          )}\n          {hasContent(description) && (\n            <dd {...mergeAttrs<'dd'>({ sx: statStyles.description }, propsDescription)}>\n              {description}\n            </dd>\n          )}\n          {hasContent(children) && (\n            <dd {...mergeAttrs<'dd'>({ sx: statStyles.body }, propsBody)}>{children}</dd>\n          )}\n          {hasContent(footer) && (\n            <dd {...mergeAttrs<'dd'>({ sx: statStyles.footer }, propsFooter)}>{footer}</dd>\n          )}\n        </dl>\n      );\n    };\n  },\n);\n\n/** 未声明的属性落到外层 div 上 */\nexport interface StatGroupProps extends PartProps<'div'> {\n  /**\n   * 每个指标最窄多宽（CSS 长度）：放不下就换行\n   * @default '9rem'\n   */\n  minItemWidth?: string;\n  /** Stat */\n  children?: VNodeChild;\n}\n\n/** StatGroup 的样式：root、item */\nexport const statGroupStyles = css.create({\n  // 每个指标的起始边一条竖线；整组往起始方向挪一条线的位置，每行第一个的竖线藏到外面（overflow 裁掉）\n  root: { display: 'grid', rowGap: '_md', overflow: 'hidden' },\n  item: {\n    paddingInline: '_md',\n    marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderMuted',\n  },\n});\n\n/** StatGroup 的动态样式：列宽 */\nexport const statGroupDynamicStyles = css.create({\n  columns: (min: string) => ({\n    gridTemplateColumns: `repeat(auto-fit, minmax(min(${min}, 100%), 1fr))`,\n  }),\n});\n\n/** 一排指标：按宽度换行，同一行里指标之间一条竖线 */\nexport const StatGroup = _component(\n  ({ minItemWidth = '9rem', children, ...rest }: StatGroupProps) => {\n    StatGroupContext.provide(true);\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          { sx: [statGroupStyles.root, statGroupDynamicStyles.columns(minItemWidth)] },\n          rest,\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/display/Timeline.js

@@ -7,8 +7,8 @@ import { Button } from "../base/Button.js";
 import { FlexOrderedList } from "../layout/Flex.js";
 import { Avatar, initials } from "./Avatar.js";
 import { Collapsible } from "./Collapsible.js";
-import { createVNode, mergeProps } from "vue";
-import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ChevronDown, ChevronUp } from "@lucide/icons";
 //#region src/display/Timeline.tsx
@@ -158,7 +158,7 @@ var Timeline = /*#__PURE__*/ _component((_props, _ctx) => {
 	const rest = restProps(_props, _ctx, true);
 	const lang = useLang();
 	/** 收起的那几项所在的位置：节点列一段虚线，内容是展开、收起的按钮 */
-	const toggle = (hidden) => createVNode("li", mergeProps({ "key": "toggle" }, css.attrs(timelineStyles.item)), [createVNode("div", mergeAttrs({ sx: timelineStyles.rail }, propsRail.value), [createVNode("span", mergeProps(css.attrs(timelineStyles.toggleLine), { "aria-hidden": "true" }), null)]), createVNode("div", css.attrs(timelineStyles.toggleContent), [createVNode(Button, mergePartProps({
+	const toggle = (hidden) => createVNode("li", mergeJsxProps({ "key": "toggle" }, css.attrs(timelineStyles.item)), [createVNode("div", mergeAttrs({ sx: timelineStyles.rail }, propsRail.value), [createVNode("span", mergeJsxProps(css.attrs(timelineStyles.toggleLine), { "aria-hidden": "true" }), null)]), createVNode("div", css.attrs(timelineStyles.toggleContent), [createVNode(Button, mergePartProps({
 		variant: "link",
 		size: "sm",
 		iconEnd: expanded.value ? ChevronUp : ChevronDown
@@ -175,7 +175,7 @@ var Timeline = /*#__PURE__*/ _component((_props, _ctx) => {
 		}] : []];
 		const all = reverse.value ? chronological.toReversed() : chronological;
 		const toggleAtEnd = hidden > 0 && reverse.value;
-		return createVNode(FlexOrderedList, mergeProps(mergePartProps({
+		return createVNode(FlexOrderedList, mergeJsxProps(mergePartProps({
 			direction: "column",
 			sx: [timelineStyles.root, size.value && fontSizeStyles[size.value]]
 		}, rest), {
@@ -194,7 +194,7 @@ var Timeline = /*#__PURE__*/ _component((_props, _ctx) => {
 					item.icon && timelineStyles.markerIcon,
 					css.select(() => timelineToneStyles[item.tone ?? "neutral"])
 				] }, propsMarker.value, { "aria-hidden": true }), [item.icon && createVNode(Icon, { "icon": item.icon }, null)]);
-				return createVNode("li", mergeProps({ "key": item.key ?? index }, mergeAttrs({ sx: [timelineStyles.item, alternate.value && timelineStyles.itemAlternate] }, own), {
+				return createVNode("li", mergeJsxProps({ "key": item.key ?? index }, mergeAttrs({ sx: [timelineStyles.item, alternate.value && timelineStyles.itemAlternate] }, own), {
 					"data-state": item.pending ? "pending" : void 0,
 					"aria-busy": item.pending || void 0
 				}), [
@@ -208,10 +208,10 @@ var Timeline = /*#__PURE__*/ _component((_props, _ctx) => {
 							"sx": timelineStyles.avatar
 						}, null), item.actor]), inlineTime]) : inlineTime,
 						hasContent(item.description) && createVNode("div", mergeAttrs({ sx: timelineStyles.description }, propsDescription.value), [item.description]),
-						hasContent(item.details) && createVNode(Collapsible, mergeProps(mergePartProps({
+						hasContent(item.details) && createVNode(Collapsible, mergeJsxProps(mergePartProps({
 							lazy: true,
 							propsContent: { sx: timelineStyles.detailsContent }
-						}, propsDetails.value), { "trigger": _cache[1] || (_cache[1] = (props) => createVNode(Button, mergeProps({
+						}, propsDetails.value), { "trigger": _cache[1] || (_cache[1] = (props) => createVNode(Button, mergeJsxProps({
 							"variant": "link",
 							"size": "sm",
 							"iconEnd": props["aria-expanded"] ? ChevronUp : ChevronDown,