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

package/dist/display/Gauge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gauge.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/Gauge.tsx"],"sourcesContent":["/**\n * 仪表盘（role=\"meter\"）：半圆的刻度上显示一个量落在哪个区间——完成率、利用率、风险分。外圈是分段的区间\n * （危险、提醒、良好），里面的弧是当前值（颜色取它所在区间的色调），中间是数值，下面是名称。\n *\n *   <Gauge value={0.82} max={1} valueFormat={{ style: 'percent' }} label=\"销售完成率\"\n *     bands={[{ to: 0.6, tone: 'danger' }, { to: 0.9, tone: 'warning' }, { to: 1, tone: 'success' }]} target={0.9} />\n *\n * 和 Progress 的分工：Progress 是做到哪了（上传、步骤）；Gauge 是一个量处在好坏的哪一段（有区间、有目标）。\n * 纯 SVG，大小随字号缩放（宽 10em）。读屏按 meter 念：数值（按 valueFormat 与单位格式化）与目标。\n *\n * 部件：Root（div，role=\"meter\"）、Value（中间的数值）、Label（名称）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport { clamp, svgNumber } from '../utils/data/number';\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** 外圈的一段区间：从上一段的终点（第一段从 min）到 to */\nexport interface GaugeBand {\n  /** 终点 */\n  to: number;\n  /** 色调：落在这一段时数值弧也用它 */\n  tone: StatusTone;\n}\n\n/** 角色与取值由组件管理 */\nexport type GaugeManaged =\n  'role' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuenow' | 'aria-valuetext';\n\n/** 未声明的属性落到外层 div（role=\"meter\"）上 */\nexport interface GaugeProps extends PartProps<'div', GaugeManaged> {\n  /** 当前值 */\n  value: NumericValue;\n  /** 最小值，默认 0 */\n  min?: number;\n  /** 最大值，默认 100 */\n  max?: number;\n  /** 数值的格式（百分比写 `{ style: 'percent' }`，配 max={1}） */\n  valueFormat?: NumericFormat;\n  /** 单位：数值后面带上 */\n  unit?: string;\n  /** 外圈的区间，按 to 从小到大；不写时外圈是一整段轨道色 */\n  bands?: readonly GaugeBand[];\n  /** 目标：外圈上画一道刻度，读屏念在数值后面 */\n  target?: number;\n  /** 数值弧的色调；不写时取它所在区间的色调，没有区间时 accent */\n  tone?: StatusTone;\n  /** 名称：显示在下方，也是 meter 的名称（没写 aria-label 时） */\n  label?: VNodeChild;\n  /** 中间显示的文字；不写时是格式化的数值 */\n  valueLabel?: VNodeChild;\n  /** 字号档位：仪表盘的大小随之缩放；不写时继承 */\n  size?: TextSize;\n  /** 中间数值的部件属性 */\n  propsValue?: PartProps<'span'>;\n  /** 名称的部件属性 */\n  propsLabel?: PartProps<'span'>;\n}\n\n/** Gauge 的样式 */\nexport const gaugeStyles = css.create({\n  root: {\n    display: 'inline-grid',\n    justifyItems: 'center',\n    gap: '_xs',\n    width: '10em',\n    maxWidth: '100%',\n  },\n  dial: { position: 'relative', width: '100%' },\n  svg: { display: 'block', width: '100%', height: 'auto', overflow: 'visible' },\n  track: { fill: 'none', stroke: '_fill', strokeWidth: 14 },\n  value: {\n    fill: 'none',\n    stroke: 'var(--gauge-color)',\n    strokeWidth: 14,\n    forcedColorAdjust: { default: null, _forcedColors: 'none' },\n  },\n  band: { fill: 'none', strokeWidth: 4 },\n  target: { stroke: '_text', strokeWidth: 2.5, strokeLinecap: 'round' },\n  // 中间的数值：压在半圆的底边上\n  center: {\n    position: 'absolute',\n    insetInline: 0,\n    bottom: 0,\n    textAlign: 'center',\n    fontSize: '1.5em',\n    fontWeight: '_semibold',\n    fontVariantNumeric: 'tabular-nums',\n    lineHeight: 1,\n    color: '_text',\n  },\n  ends: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    width: '100%',\n    fontSize: '0.75em',\n    color: '_textMuted',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  label: { fontSize: '_sm', color: '_textMuted', textAlign: 'center' },\n});\n\n/**\n * 色调的实色：数值弧（--gauge-color）与外圈的区间。弧与区间只是辅助，数值以文字给出（中间与读屏），\n * 所以用明亮的实色而不是够文字对比度的深色\n */\nconst gaugeToneStyles = css.create({\n  neutral: { '--gauge-color': '_colors.borderStrong' },\n  accent: { '--gauge-color': '_colors.accent' },\n  info: { '--gauge-color': '_colors.info' },\n  success: { '--gauge-color': '_colors.success' },\n  warning: { '--gauge-color': '_colors.warning' },\n  danger: { '--gauge-color': '_colors.danger' },\n});\n\n/** 外圈区间的颜色 */\nconst bandColors = css.create({\n  neutral: { stroke: '_borderStrong' },\n  accent: { stroke: '_accent' },\n  info: { stroke: '_info' },\n  success: { stroke: '_success' },\n  warning: { stroke: '_warning' },\n  danger: { stroke: '_danger' },\n});\n\n// 半圆：圆心 (100, 100)，从左（180°）经上方到右（0°）\nconst CENTER = 100;\nconst RADIUS = 80;\nconst BAND_RADIUS = 94;\n\n/** 比例 fraction（0–1）在半径 r 上的点 */\nfunction point(fraction: number, r: number) {\n  const angle = Math.PI * (1 - fraction);\n  return { x: svgNumber(CENTER + r * Math.cos(angle)), y: svgNumber(CENTER - r * Math.sin(angle)) };\n}\n\n/** 从 from 到 to（比例）的弧 */\nfunction arc(from: number, to: number, r: number) {\n  const a = point(from, r);\n  const b = point(to, r);\n  return `M${a.x} ${a.y} A${r} ${r} 0 0 1 ${b.x} ${b.y}`;\n}\n\n/** 目标刻度：从数值弧的内沿穿过外圈 */\nfunction tick(fraction: number) {\n  const inner = point(fraction, RADIUS - 10);\n  const outer = point(fraction, BAND_RADIUS + 4);\n  return { x1: inner.x, y1: inner.y, x2: outer.x, y2: outer.y };\n}\n\n/** 仪表盘：半圆刻度、分段区间、当前值与目标 */\nexport const Gauge = _component(\n  ({\n    value,\n    min = 0,\n    max = 100,\n    valueFormat,\n    unit,\n    bands,\n    target,\n    tone,\n    label,\n    valueLabel,\n    size,\n    propsValue,\n    propsLabel,\n    ...rest\n  }: GaugeProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const text = (number: NumericValue) =>\n      format.number(number, unit ? { ...valueFormat, suffix: unit } : valueFormat);\n    return () => {\n      const current = toNumber(value);\n      const fractionOf = (number: number) => clamp((number - min) / (max - min || 1), 0, 1);\n      const fraction = fractionOf(current);\n      const band = bands?.find((item) => current <= item.to) ?? bands?.at(-1);\n      const color = tone ?? band?.tone ?? 'accent';\n      const spoken = text(value);\n      const name = typeof label === 'string' ? label : undefined;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [gaugeStyles.root, size && fontSizeStyles[size], gaugeToneStyles[color]],\n              'aria-label': name,\n            },\n            rest,\n            {\n              role: 'meter',\n              'aria-valuemin': min,\n              'aria-valuemax': max,\n              'aria-valuenow': clamp(current, min, max),\n              'aria-valuetext':\n                target === undefined ? spoken : `${spoken}，${lang.progressTarget(text(target))}`,\n            },\n          )}\n        >\n          <div {...css.attrs(gaugeStyles.dial)}>\n            <svg {...css.attrs(gaugeStyles.svg)} viewBox=\"0 -4 200 108\" aria-hidden=\"true\">\n              <path d={arc(0, 1, RADIUS)} {...css.attrs(gaugeStyles.track)} />\n              {fraction > 0 && (\n                <path d={arc(0, fraction, RADIUS)} {...css.attrs(gaugeStyles.value)} />\n              )}\n              {(bands ?? []).map((item, position) => {\n                const from = fractionOf(position === 0 ? min : bands![position - 1]!.to);\n                const to = fractionOf(item.to);\n                return to > from ? (\n                  <path\n                    key={position}\n                    d={arc(from, to, BAND_RADIUS)}\n                    {...css.attrs(gaugeStyles.band, bandColors[item.tone])}\n                  />\n                ) : null;\n              })}\n              {target !== undefined && (\n                <line {...tick(fractionOf(target))} {...css.attrs(gaugeStyles.target)} />\n              )}\n            </svg>\n            <span\n              {...mergeAttrs<'span'>({ sx: gaugeStyles.center }, propsValue, {\n                'aria-hidden': true,\n              })}\n            >\n              {valueLabel ?? spoken}\n            </span>\n          </div>\n          <div {...css.attrs(gaugeStyles.ends)} aria-hidden=\"true\">\n            <span>{format.number(min, valueFormat)}</span>\n            <span>{format.number(max, valueFormat)}</span>\n          </div>\n          {hasContent(label) && (\n            <span {...mergeAttrs<'span'>({ sx: gaugeStyles.label }, propsLabel)}>{label}</span>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Gauge.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/Gauge.tsx"],"sourcesContent":["/**\n * 仪表盘（role=\"meter\"）：半圆的刻度上显示一个量落在哪个区间——完成率、利用率、风险分。外圈是分段的区间\n * （危险、提醒、良好），里面的弧是当前值（颜色取它所在区间的色调），中间是数值，下面是名称。\n *\n *   <Gauge value={0.82} max={1} valueFormat={{ style: 'percent' }} label=\"销售完成率\"\n *     bands={[{ to: 0.6, tone: 'danger' }, { to: 0.9, tone: 'warning' }, { to: 1, tone: 'success' }]} target={0.9} />\n *\n * 和 Progress 的分工：Progress 是做到哪了（上传、步骤）；Gauge 是一个量处在好坏的哪一段（有区间、有目标）。\n * 纯 SVG，大小随字号缩放（宽 10em）。读屏按 meter 念：数值（按 valueFormat 与单位格式化）与目标。\n *\n * 部件：Root（div，role=\"meter\"）、Value（中间的数值）、Label（名称）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport { clamp, svgNumber } from '../utils/data/number';\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** 外圈的一段区间：从上一段的终点（第一段从 min）到 to */\nexport interface GaugeBand {\n  /** 终点 */\n  to: number;\n  /** 色调：落在这一段时数值弧也用它 */\n  tone: StatusTone;\n}\n\n/** 角色与取值由组件管理 */\nexport type GaugeManaged =\n  'role' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuenow' | 'aria-valuetext';\n\n/** 未声明的属性落到外层 div（role=\"meter\"）上 */\nexport interface GaugeProps extends PartProps<'div', GaugeManaged> {\n  /** 当前值 */\n  value: NumericValue;\n  /** 最小值，默认 0 */\n  min?: number;\n  /** 最大值，默认 100 */\n  max?: number;\n  /** 数值的格式（百分比写 `{ style: 'percent' }`，配 max={1}） */\n  valueFormat?: NumericFormat;\n  /** 单位：数值后面带上 */\n  unit?: string;\n  /** 外圈的区间，按 to 从小到大；不写时外圈是一整段轨道色 */\n  bands?: readonly GaugeBand[];\n  /** 目标：外圈上画一道刻度，读屏念在数值后面 */\n  target?: number;\n  /** 数值弧的色调；不写时取它所在区间的色调，没有区间时 accent */\n  tone?: StatusTone;\n  /** 名称：显示在下方，也是 meter 的名称（没写 aria-label 时） */\n  label?: VNodeChild;\n  /** 中间显示的文字；不写时是格式化的数值 */\n  valueLabel?: VNodeChild;\n  /** 字号档位：仪表盘的大小随之缩放；不写时继承 */\n  size?: TextSize;\n  /** 中间数值的部件属性 */\n  propsValue?: PartProps<'span'>;\n  /** 名称的部件属性 */\n  propsLabel?: PartProps<'span'>;\n}\n\n/** Gauge 的样式 */\nexport const gaugeStyles = css.create({\n  root: {\n    display: 'inline-grid',\n    justifyItems: 'center',\n    gap: '_xs',\n    width: '10em',\n    maxWidth: '100%',\n  },\n  dial: { position: 'relative', width: '100%' },\n  svg: { display: 'block', width: '100%', height: 'auto', overflow: 'visible' },\n  track: { fill: 'none', stroke: '_fill', strokeWidth: 14 },\n  value: {\n    fill: 'none',\n    stroke: 'var(--gauge-color)',\n    strokeWidth: 14,\n    forcedColorAdjust: { default: null, _forcedColors: 'none' },\n  },\n  band: { fill: 'none', strokeWidth: 4 },\n  target: { stroke: '_text', strokeWidth: 2.5, strokeLinecap: 'round' },\n  // 中间的数值：压在半圆的底边上\n  center: {\n    position: 'absolute',\n    insetInline: 0,\n    bottom: 0,\n    textAlign: 'center',\n    fontSize: '1.5em',\n    fontWeight: '_semibold',\n    fontVariantNumeric: 'tabular-nums',\n    lineHeight: 1,\n    color: '_text',\n  },\n  ends: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    width: '100%',\n    fontSize: '0.75em',\n    color: '_textMuted',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  label: { fontSize: '_sm', color: '_textMuted', textAlign: 'center' },\n});\n\n/**\n * 色调的实色：数值弧（--gauge-color）与外圈的区间。弧与区间只是辅助，数值以文字给出（中间与读屏），\n * 所以用明亮的实色而不是够文字对比度的深色\n */\nconst gaugeToneStyles = css.create({\n  neutral: { '--gauge-color': '_colors.borderStrong' },\n  accent: { '--gauge-color': '_colors.accent' },\n  info: { '--gauge-color': '_colors.info' },\n  success: { '--gauge-color': '_colors.success' },\n  warning: { '--gauge-color': '_colors.warning' },\n  danger: { '--gauge-color': '_colors.danger' },\n});\n\n/** 外圈区间的颜色 */\nconst bandColors = css.create({\n  neutral: { stroke: '_borderStrong' },\n  accent: { stroke: '_accent' },\n  info: { stroke: '_info' },\n  success: { stroke: '_success' },\n  warning: { stroke: '_warning' },\n  danger: { stroke: '_danger' },\n});\n\n// 半圆：圆心 (100, 100)，从左（180°）经上方到右（0°）\nconst CENTER = 100;\nconst RADIUS = 80;\nconst BAND_RADIUS = 94;\n\n/** 比例 fraction（0–1）在半径 r 上的点 */\nfunction point(fraction: number, r: number) {\n  const angle = Math.PI * (1 - fraction);\n  return { x: svgNumber(CENTER + r * Math.cos(angle)), y: svgNumber(CENTER - r * Math.sin(angle)) };\n}\n\n/** 从 from 到 to（比例）的弧 */\nfunction arc(from: number, to: number, r: number) {\n  const a = point(from, r);\n  const b = point(to, r);\n  return `M${a.x} ${a.y} A${r} ${r} 0 0 1 ${b.x} ${b.y}`;\n}\n\n/** 目标刻度：从数值弧的内沿穿过外圈 */\nfunction tick(fraction: number) {\n  const inner = point(fraction, RADIUS - 10);\n  const outer = point(fraction, BAND_RADIUS + 4);\n  return { x1: inner.x, y1: inner.y, x2: outer.x, y2: outer.y };\n}\n\n/** 仪表盘：半圆刻度、分段区间、当前值与目标 */\nexport const Gauge = _component(\n  ({\n    value,\n    min = 0,\n    max = 100,\n    valueFormat,\n    unit,\n    bands,\n    target,\n    tone,\n    label,\n    valueLabel,\n    size,\n    propsValue,\n    propsLabel,\n    ...rest\n  }: GaugeProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const text = (number: NumericValue) =>\n      format.number(number, unit ? { ...valueFormat, suffix: unit } : valueFormat);\n    return () => {\n      const current = toNumber(value);\n      const fractionOf = (number: number) => clamp((number - min) / (max - min || 1), 0, 1);\n      const fraction = fractionOf(current);\n      const band = bands?.find((item) => current <= item.to) ?? bands?.at(-1);\n      const color = tone ?? band?.tone ?? 'accent';\n      const spoken = text(value);\n      const name = typeof label === 'string' ? label : undefined;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [gaugeStyles.root, size && fontSizeStyles[size], gaugeToneStyles[color]],\n              'aria-label': name,\n            },\n            rest,\n            {\n              role: 'meter',\n              'aria-valuemin': min,\n              'aria-valuemax': max,\n              'aria-valuenow': clamp(current, min, max),\n              'aria-valuetext':\n                target === undefined ? spoken : `${spoken}，${lang.progressTarget(text(target))}`,\n            },\n          )}\n        >\n          <div {...css.attrs(gaugeStyles.dial)}>\n            <svg {...css.attrs(gaugeStyles.svg)} viewBox=\"0 -4 200 108\" aria-hidden=\"true\">\n              <path d={arc(0, 1, RADIUS)} {...css.attrs(gaugeStyles.track)} />\n              {fraction > 0 && (\n                <path d={arc(0, fraction, RADIUS)} {...css.attrs(gaugeStyles.value)} />\n              )}\n              {(bands ?? []).map((item, position) => {\n                const from = fractionOf(position === 0 ? min : bands![position - 1]!.to);\n                const to = fractionOf(item.to);\n                return to > from ? (\n                  <path\n                    key={position}\n                    d={arc(from, to, BAND_RADIUS)}\n                    {...css.attrs(gaugeStyles.band, bandColors[item.tone])}\n                  />\n                ) : null;\n              })}\n              {target !== undefined && (\n                <line {...tick(fractionOf(target))} {...css.attrs(gaugeStyles.target)} />\n              )}\n            </svg>\n            <span\n              {...mergeAttrs<'span'>({ sx: gaugeStyles.center }, propsValue, {\n                'aria-hidden': true,\n              })}\n            >\n              {valueLabel ?? spoken}\n            </span>\n          </div>\n          <div {...css.attrs(gaugeStyles.ends)} aria-hidden=\"true\">\n            <span>{format.number(min, valueFormat)}</span>\n            <span>{format.number(max, valueFormat)}</span>\n          </div>\n          {hasContent(label) && (\n            <span {...mergeAttrs<'span'>({ sx: gaugeStyles.label }, propsLabel)}>{label}</span>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Image.d.ts

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

package/dist/display/Image.js

@@ -6,7 +6,7 @@ import { shimmerStyles } from "../utils/style/shimmer.js";
 import { Lightbox } from "../overlay/Lightbox.js";
 import { Fragment, createVNode, ref, shallowRef, watch } from "vue";
 import { _component, childrenProp, createContext, effect, mergeJsxProps, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ImageOff } from "@lucide/icons";
 //#region src/display/Image.tsx
 /**

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"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 { 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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"}

package/dist/display/ItemList.d.ts

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

package/dist/display/ItemList.js

@@ -2,7 +2,7 @@ import { hasContent, mergeAttrs } from "../utils/props.js";
 import { paddingInlineStyles } from "../utils/style/styles.js";
 import { createVNode } from "vue";
 import { _component, childrenProp, createContext, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/display/ItemList.tsx
 /** 条目的疏密 */
 /** ItemList 交给条目的外观 */

package/dist/display/ItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemList.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/display/ItemList.tsx"],"sourcesContent":["/**\n * 条目列表：一行一条，起始边是图标、色点或头像，中间是标题与说明，结束边是标记、数字或操作。\n * 待办、通知、我负责的任务、清单这类“界面里的列表”（正文里的列表用 List）。参考 Ant Design 的 List.Item.Meta。\n *\n *   <ItemList divided>\n *     <ItemListItem start={<StatusDot />} title={<Link href=\"/inbox\">资料审核</Link>}\n *       description=\"PO-2026-0187 · 官网改版\" end={<DeadlineBadge due=\"2026-10-23\" />} />\n *   </ItemList>\n *\n * divided 在条目之间画线；hoverable 悬停时着底色（整条可点时）；inset 是条目两侧的内边距（放在弹出层、\n * 卡片正文里时与容器的内边距对齐）。标题与说明默认单行省略不了时换行；align=\"start\" 让起始边、结束边贴着第一行。\n */\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 { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { paddingInlineStyles, type Space } from '../utils/style/styles';\n\n/** 条目的疏密 */\nexport interface ItemListDensities {\n  /** 紧凑：卡片里的短列表 */\n  compact: unknown;\n  /** 标准（默认）：弹出层、页面里的列表 */\n  standard: unknown;\n}\n\n/** ItemList 交给条目的外观 */\ninterface ItemListLook {\n  divided: boolean;\n  hoverable: boolean;\n  density: keyof ItemListDensities;\n  inset: Space | undefined;\n}\n\nconst ItemListContext = createContext<() => ItemListLook>('ItemList');\n\n/** 未声明的属性落到 ul 上 */\nexport interface ItemListProps extends PartProps<'ul'> {\n  /** 条目之间画线 */\n  divided?: boolean;\n  /** 悬停时着底色：整条可点时 */\n  hoverable?: boolean;\n  /**\n   * 疏密\n   * @default 'standard'\n   */\n  density?: keyof ItemListDensities;\n  /** 条目两侧的内边距（与弹出层、卡片的内边距对齐） */\n  inset?: Space;\n  /** ItemListItem */\n  children?: VNodeChild;\n}\n\n/** 未声明的属性落到 li 上；原生的 title 属性让给标题 */\nexport interface ItemListItemProps extends PartProps<'li', 'title'> {\n  /** 起始边：图标、色点、头像、状态 */\n  start?: VNodeChild;\n  /** 标题：一句话，常是链接 */\n  title?: VNodeChild;\n  /** 标题下的说明（次要文字） */\n  description?: VNodeChild;\n  /** 结束边：标记、数字、时间、操作 */\n  end?: VNodeChild;\n  /**\n   * 起始边、结束边与内容的对齐：center 垂直居中，start 贴着第一行（多行内容、色点对齐标题）\n   * @default 'center'\n   */\n  align?: 'center' | 'start';\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'span'>;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'span'>;\n  /** 说明下面的更多内容 */\n  children?: VNodeChild;\n}\n\n/** ItemList 的样式：list、item、divided、hoverable、compact、standard、body、title、description… */\nexport const itemListStyles = css.create({\n  list: { listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column' },\n  item: {\n    display: 'grid',\n    gridTemplateColumns: 'auto minmax(0, 1fr) auto',\n    columnGap: '_sm',\n    alignItems: 'center',\n  },\n  alignStart: { alignItems: 'start' },\n  divided: {\n    borderBlockEndWidth: { default: '_xs', ':last-child': 0 },\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_borderMuted',\n  },\n  hoverable: { backgroundColor: { default: null, ':hover': '_fillHover' } },\n  compact: { paddingBlock: '_xs' },\n  standard: { paddingBlock: '_sm' },\n  // 没有 start 时第一列宽度为 0、不留间距\n  noStart: { gridTemplateColumns: 'minmax(0, 1fr) auto' },\n  // 色点、小图标贴着第一行的中线\n  startAligned: { display: 'flex', alignItems: 'center', minHeight: '1lh' },\n  body: { display: 'flex', flexDirection: 'column', gap: '2px', minWidth: 0 },\n  title: { minWidth: 0, overflowWrap: 'anywhere' },\n  description: { color: '_textMuted', fontSize: '_xs', minWidth: 0, overflowWrap: 'anywhere' },\n  end: { display: 'flex', alignItems: 'center', gap: '_xs', justifySelf: 'end' },\n});\n\n/** 条目列表（ul） */\nexport const ItemList = _component(\n  ({\n    divided = false,\n    hoverable = false,\n    density = 'standard',\n    inset,\n    children,\n    ...rest\n  }: ItemListProps) => {\n    ItemListContext.provide(() => ({ divided, hoverable, density, inset }));\n    return () => <ul {...mergeAttrs<'ul'>({ sx: itemListStyles.list }, rest)}>{children}</ul>;\n  },\n);\n\n/** 条目列表的一条（li） */\nexport const ItemListItem = _component(\n  ({\n    start,\n    title,\n    description,\n    end,\n    align = 'center',\n    propsTitle,\n    propsDescription,\n    children,\n    ...rest\n  }: ItemListItemProps) => {\n    const look = ItemListContext.inject(() => ({\n      divided: false,\n      hoverable: false,\n      density: 'standard' as const,\n      inset: undefined,\n    }));\n    return () => {\n      const { divided, hoverable, density, inset } = look();\n      return (\n        <li\n          {...mergeAttrs<'li'>(\n            {\n              sx: [\n                itemListStyles.item,\n                itemListStyles[density],\n                start == null && itemListStyles.noStart,\n                align === 'start' && itemListStyles.alignStart,\n                divided && itemListStyles.divided,\n                hoverable && itemListStyles.hoverable,\n                inset && paddingInlineStyles[inset],\n              ],\n            },\n            rest,\n          )}\n        >\n          {hasContent(start) && (\n            <span {...css.attrs(align === 'start' && itemListStyles.startAligned)}>{start}</span>\n          )}\n          <span {...css.attrs(itemListStyles.body)}>\n            {hasContent(title) && (\n              <span {...mergeAttrs<'span'>({ sx: itemListStyles.title }, propsTitle)}>{title}</span>\n            )}\n            {hasContent(description) && (\n              <span {...mergeAttrs<'span'>({ sx: itemListStyles.description }, propsDescription)}>\n                {description}\n              </span>\n            )}\n            {children}\n          </span>\n          {end != null ? <span {...css.attrs(itemListStyles.end)}>{end}</span> : <span />}\n        </li>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"ItemList.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/display/ItemList.tsx"],"sourcesContent":["/**\n * 条目列表：一行一条，起始边是图标、色点或头像，中间是标题与说明，结束边是标记、数字或操作。\n * 待办、通知、我负责的任务、清单这类“界面里的列表”（正文里的列表用 List）。参考 Ant Design 的 List.Item.Meta。\n *\n *   <ItemList divided>\n *     <ItemListItem start={<StatusDot />} title={<Link href=\"/inbox\">资料审核</Link>}\n *       description=\"PO-2026-0187 · 官网改版\" end={<DeadlineBadge due=\"2026-10-23\" />} />\n *   </ItemList>\n *\n * divided 在条目之间画线；hoverable 悬停时着底色（整条可点时）；inset 是条目两侧的内边距（放在弹出层、\n * 卡片正文里时与容器的内边距对齐）。标题与说明默认单行省略不了时换行；align=\"start\" 让起始边、结束边贴着第一行。\n */\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { paddingInlineStyles, type Space } from '../utils/style/styles';\n\n/** 条目的疏密 */\nexport interface ItemListDensities {\n  /** 紧凑：卡片里的短列表 */\n  compact: unknown;\n  /** 标准（默认）：弹出层、页面里的列表 */\n  standard: unknown;\n}\n\n/** ItemList 交给条目的外观 */\ninterface ItemListLook {\n  divided: boolean;\n  hoverable: boolean;\n  density: keyof ItemListDensities;\n  inset: Space | undefined;\n}\n\nconst ItemListContext = createContext<() => ItemListLook>('ItemList');\n\n/** 未声明的属性落到 ul 上 */\nexport interface ItemListProps extends PartProps<'ul'> {\n  /** 条目之间画线 */\n  divided?: boolean;\n  /** 悬停时着底色：整条可点时 */\n  hoverable?: boolean;\n  /**\n   * 疏密\n   * @default 'standard'\n   */\n  density?: keyof ItemListDensities;\n  /** 条目两侧的内边距（与弹出层、卡片的内边距对齐） */\n  inset?: Space;\n  /** ItemListItem */\n  children?: VNodeChild;\n}\n\n/** 未声明的属性落到 li 上；原生的 title 属性让给标题 */\nexport interface ItemListItemProps extends PartProps<'li', 'title'> {\n  /** 起始边：图标、色点、头像、状态 */\n  start?: VNodeChild;\n  /** 标题：一句话，常是链接 */\n  title?: VNodeChild;\n  /** 标题下的说明（次要文字） */\n  description?: VNodeChild;\n  /** 结束边：标记、数字、时间、操作 */\n  end?: VNodeChild;\n  /**\n   * 起始边、结束边与内容的对齐：center 垂直居中，start 贴着第一行（多行内容、色点对齐标题）\n   * @default 'center'\n   */\n  align?: 'center' | 'start';\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'span'>;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'span'>;\n  /** 说明下面的更多内容 */\n  children?: VNodeChild;\n}\n\n/** ItemList 的样式：list、item、divided、hoverable、compact、standard、body、title、description… */\nexport const itemListStyles = css.create({\n  list: { listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column' },\n  item: {\n    display: 'grid',\n    gridTemplateColumns: 'auto minmax(0, 1fr) auto',\n    columnGap: '_sm',\n    alignItems: 'center',\n  },\n  alignStart: { alignItems: 'start' },\n  divided: {\n    borderBlockEndWidth: { default: '_xs', ':last-child': 0 },\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_borderMuted',\n  },\n  hoverable: { backgroundColor: { default: null, ':hover': '_fillHover' } },\n  compact: { paddingBlock: '_xs' },\n  standard: { paddingBlock: '_sm' },\n  // 没有 start 时第一列宽度为 0、不留间距\n  noStart: { gridTemplateColumns: 'minmax(0, 1fr) auto' },\n  // 色点、小图标贴着第一行的中线\n  startAligned: { display: 'flex', alignItems: 'center', minHeight: '1lh' },\n  body: { display: 'flex', flexDirection: 'column', gap: '2px', minWidth: 0 },\n  title: { minWidth: 0, overflowWrap: 'anywhere' },\n  description: { color: '_textMuted', fontSize: '_xs', minWidth: 0, overflowWrap: 'anywhere' },\n  end: { display: 'flex', alignItems: 'center', gap: '_xs', justifySelf: 'end' },\n});\n\n/** 条目列表（ul） */\nexport const ItemList = _component(\n  ({\n    divided = false,\n    hoverable = false,\n    density = 'standard',\n    inset,\n    children,\n    ...rest\n  }: ItemListProps) => {\n    ItemListContext.provide(() => ({ divided, hoverable, density, inset }));\n    return () => <ul {...mergeAttrs<'ul'>({ sx: itemListStyles.list }, rest)}>{children}</ul>;\n  },\n);\n\n/** 条目列表的一条（li） */\nexport const ItemListItem = _component(\n  ({\n    start,\n    title,\n    description,\n    end,\n    align = 'center',\n    propsTitle,\n    propsDescription,\n    children,\n    ...rest\n  }: ItemListItemProps) => {\n    const look = ItemListContext.inject(() => ({\n      divided: false,\n      hoverable: false,\n      density: 'standard' as const,\n      inset: undefined,\n    }));\n    return () => {\n      const { divided, hoverable, density, inset } = look();\n      return (\n        <li\n          {...mergeAttrs<'li'>(\n            {\n              sx: [\n                itemListStyles.item,\n                itemListStyles[density],\n                start == null && itemListStyles.noStart,\n                align === 'start' && itemListStyles.alignStart,\n                divided && itemListStyles.divided,\n                hoverable && itemListStyles.hoverable,\n                inset && paddingInlineStyles[inset],\n              ],\n            },\n            rest,\n          )}\n        >\n          {hasContent(start) && (\n            <span {...css.attrs(align === 'start' && itemListStyles.startAligned)}>{start}</span>\n          )}\n          <span {...css.attrs(itemListStyles.body)}>\n            {hasContent(title) && (\n              <span {...mergeAttrs<'span'>({ sx: itemListStyles.title }, propsTitle)}>{title}</span>\n            )}\n            {hasContent(description) && (\n              <span {...mergeAttrs<'span'>({ sx: itemListStyles.description }, propsDescription)}>\n                {description}\n              </span>\n            )}\n            {children}\n          </span>\n          {end != null ? <span {...css.attrs(itemListStyles.end)}>{end}</span> : <span />}\n        </li>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Marquee.d.ts

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

package/dist/display/Marquee.js

@@ -4,7 +4,7 @@ import { useResizeObserver } from "../utils/dom/resize.js";
 import { useReducedMotion } from "../utils/dom/media-query.js";
 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";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/display/Marquee.tsx
 /** 滚动方向 */
 /** 未声明的属性落到外层 div 上 */

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":"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"}
+{"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 { 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.d.ts

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

package/dist/display/ProportionBar.js

@@ -2,7 +2,7 @@ import { mergeAttrs } from "../utils/props.js";
 import { StatusDot, statusDotToneStyles } from "../base/StatusDot.js";
 import { createVNode } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/display/ProportionBar.tsx
 /** 比例条的一段 */
 /** 未声明的属性落到外层 div 上 */

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,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"}
+{"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 { 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.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type ButtonBaseProps } from '../base/ButtonBase';
 import { type SortableOrientations } from '../utils/dom/sortable';

package/dist/display/Sortable.js

@@ -9,7 +9,7 @@ import { FlexList } from "../layout/Flex.js";
 import { useSortable } from "../utils/dom/sortable.js";
 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 { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { GripVertical } from "@lucide/icons";
 //#region src/display/Sortable.tsx
 /**

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 { 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.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type NumericFormat } from '../config/lang/format';
 import { type NumericValue } from '../utils/data/numeric';
 import { type PartProps } from '../utils/props';

package/dist/display/Sparkline.js

@@ -6,7 +6,7 @@ import { toneFillStyles } from "../utils/style/tone-styles.js";
 import { useFormat } from "../config/lang/format.js";
 import { createVNode } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/display/Sparkline.tsx
 /** 迷你图的画法 */
 /** 角色与名称由组件给出（role="img"，名称是 label 加上数据的概括） */

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 { 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.d.ts

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

package/dist/display/Stat.js

@@ -8,7 +8,7 @@ import { shimmerStyles } from "../utils/style/shimmer.js";
 import { Skeleton } from "../feedback/Skeleton.js";
 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 { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { TrendingDown, TrendingUp } from "@lucide/icons";
 //#region src/display/Stat.tsx
 /**