@zerodep-dev/vue-tsx-pro-ui 0.3.3 → 0.4.1

package/dist/charts/GraphChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/GraphChart.tsx"],"sourcesContent":["/**\n * 网络图：节点与连线，看谁和谁有关系、关系有多强（案例与触发事件的匹配、团队与供应商的协作、依赖关系）。\n *\n *   <GraphChart aria-label=\"协作关系\" nodes={nodes} links={links} layout=\"dagre\" groups={teams} />\n *\n * 节点是 { id, label?, sublabel?, group?, color?, shape?, size? }，连线是 { source, target, value?, label?, dashed? }。\n * 布局交给 Unovis 的 Graph：force（默认，力导向）、dagre（分层，direction 定方向）、circular、concentric、parallel\n * （按 group 分列）、elk（分层且支持分组框，较大，用到时才加载）。布局异步算好再画，第一帧是空的。\n * 写了 groups 时同组的节点框在一起（dagre、elk、parallel 布局；力导向、环形布局里组只决定颜色，框会互相盖住）；\n * 节点的颜色默认按组取色板，没有组时都是 chart1。\n * 连线写了 value 时按大小加粗（1–6px），悬停看“起点 → 终点”与数值。点节点选中它（selected 双向绑定），\n * 与它不相连的节点、连线变淡；点空白处取消。能缩放、拖动画布（zoom={false} 关掉），双击回到全图。\n * 给读屏的数据表每条连线一行；单位、加载与空状态同其他图表（见 ChartFrame）。\n */\nimport {\n  Graph,\n  GraphLayoutType,\n  GraphLinkArrowStyle,\n  GraphLinkStyle,\n  GraphNodeSelectionHighlightMode,\n  GraphNodeShape,\n} from '@unovis/ts';\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 { colors, fontSizes, opacities } from '../config/theme/tokens';\nimport { Skeleton } from '../feedback/Skeleton';\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport type { PartProps } from '../utils/props';\nimport { ChartFrame, chartTooltip, useChartValueText, type ChartFrameParts } from './frame';\nimport { resolveColor, type ChartColor } from './series';\nimport { useSingleChart, type SingleChart } from './single';\n\n/** 节点的形状 */\nexport interface GraphChartShapes {\n  /** 圆（默认） */\n  circle: unknown;\n  /** 方块 */\n  square: unknown;\n  /** 六边形 */\n  hexagon: unknown;\n  /** 三角 */\n  triangle: unknown;\n}\n\n/** 布局 */\nexport interface GraphChartLayouts {\n  /** 力导向（默认）：相连的靠近、不相连的推开，适合看关系疏密 */\n  force: unknown;\n  /** 分层：沿 direction 一层层排开，适合有先后、上下游的关系 */\n  dagre: unknown;\n  /** 排成一圈 */\n  circular: unknown;\n  /** 同心圆：连得多的在中间 */\n  concentric: unknown;\n  /** 按 group 分列，组内按连接排 */\n  parallel: unknown;\n  /** 分层，分组框更规整（elkjs，约 1.6 MB，用到时才加载） */\n  elk: unknown;\n}\n\n/** 一个节点 */\nexport interface GraphChartNode {\n  /** id：连线里用它指节点 */\n  id: string;\n  /** 名称，写在节点下面；不写时用 id */\n  label?: string;\n  /** 名称下面的小字 */\n  sublabel?: string;\n  /** 所在的组（groups 里的 id）：同组的框在一起、颜色相同 */\n  group?: string;\n  /** 颜色；不写时按组取色板，没有组时是 chart1 */\n  color?: ChartColor;\n  /** 形状，默认 circle */\n  shape?: keyof GraphChartShapes;\n  /** 大小（px），默认 28 */\n  size?: number;\n}\n\n/** 一条连线 */\nexport interface GraphChartLink {\n  /** 起点节点的 id */\n  source: string;\n  /** 终点节点的 id */\n  target: string;\n  /** 强度：写了时按大小加粗；提示框、数据表里显示 */\n  value?: NumericValue;\n  /** 线上的短标签（几个字以内） */\n  label?: string;\n  /** 虚线：弱关系、待定的关系 */\n  dashed?: boolean;\n  /** 颜色；默认是边框色 */\n  color?: ChartColor;\n}\n\n/** 一组节点 */\nexport interface GraphChartGroup {\n  /** 组的 id：节点的 group 指它 */\n  id: string;\n  /** 组名：写在框上 */\n  label: string;\n  /** 颜色；不写时按组的顺序取色板 */\n  color?: ChartColor;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface GraphChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 节点 */\n  nodes: readonly GraphChartNode[];\n  /** 连线 */\n  links: readonly GraphChartLink[];\n  /** 分组：同组的节点框在一起（dagre、elk、parallel 布局），颜色相同 */\n  groups?: readonly GraphChartGroup[];\n  /**\n   * 布局\n   * @default 'force'\n   */\n  layout?: keyof GraphChartLayouts;\n  /**\n   * 分层布局（dagre、elk）的方向：LR 从左到右，TB 从上到下\n   * @default 'LR'\n   */\n  direction?: 'LR' | 'TB';\n  /** 连线带箭头；默认分层布局（dagre、elk）带，其余不带 */\n  arrows?: boolean;\n  /** 连线数值的格式：提示框、数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 连线数值的单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 绘图区的高度；数字按 px\n   * @default 360\n   */\n  height?: number | string;\n  /**\n   * 能缩放、拖动画布\n   * @default true\n   */\n  zoom?: boolean;\n  /**\n   * 悬停时的提示框\n   * @default true\n   */\n  tooltip?: boolean;\n  /** 选中的节点 id：点节点时写回，父级写 _selected={x}；点空白处变回 null */\n  _selected?: string | null;\n  /**\n   * 加载中：绘图区显示骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n  /**\n   * 点了一个节点（下钻）：参数是这个节点与它的位置；写了它时节点的指针是手形。\n   * 点图是鼠标的捷径：同样的去处在页面上还要有链接或按钮\n   */\n  onItemClick?: (node: GraphChartNode, index: number) => void;\n}\n\n/** GraphChart 的样式：root（--vis-graph-* 主题变量）、skeleton */\nexport const graphChartStyles = css.create({\n  root: {\n    '--vis-graph-node-stroke-color': colors.surface,\n    '--vis-graph-node-label-text-color': colors.text,\n    '--vis-graph-node-label-font-size': fontSizes.xs,\n    '--vis-graph-node-label-background': colors.surface,\n    '--vis-graph-node-sublabel-text-color': colors.textMuted,\n    '--vis-graph-node-sublabel-font-size': fontSizes.xs,\n    '--vis-graph-node-selection-color': colors.accent,\n    '--vis-graph-node-greyout-color': colors.surfaceMuted,\n    '--vis-graph-node-greyout-opacity': opacities.disabled,\n    '--vis-graph-link-stroke-color': colors.borderStrong,\n    '--vis-graph-link-greyout-opacity': '0.25',\n    '--vis-graph-link-label-background': colors.fill,\n    '--vis-graph-link-label-text-color-dark': colors.text,\n    '--vis-graph-link-label-font-size': fontSizes.xs,\n    '--vis-graph-panel-fill-color': colors.surfaceMuted,\n    '--vis-graph-panel-border-color': colors.borderMuted,\n    '--vis-graph-panel-label-color': colors.textMuted,\n    '--vis-graph-panel-label-background': colors.surface,\n    '--vis-graph-panel-label-font-size': fontSizes.xs,\n    '--vis-graph-panel-label-font-weight': '500',\n  },\n  skeleton: { display: 'block', width: '100%', height: '100%' },\n});\n\nconst LAYOUTS: Record<keyof GraphChartLayouts, GraphLayoutType> = {\n  force: GraphLayoutType.Force,\n  dagre: GraphLayoutType.Dagre,\n  circular: GraphLayoutType.Circular,\n  concentric: GraphLayoutType.Concentric,\n  parallel: GraphLayoutType.Parallel,\n  elk: GraphLayoutType.Elk,\n};\n\nconst SHAPES: Record<keyof GraphChartShapes, GraphNodeShape> = {\n  circle: GraphNodeShape.Circle,\n  square: GraphNodeShape.Square,\n  hexagon: GraphNodeShape.Hexagon,\n  triangle: GraphNodeShape.Triangle,\n};\n\n/** 交给 Unovis 的节点：带上名称与颜色；Unovis 会往上写布局用的字段，每次都复制一份 */\ninterface Node extends GraphChartNode {\n  label: string;\n  fill: string;\n  index: number;\n}\n/** 交给 Unovis 的连线：数值转成 number 算粗细 */\ninterface Link extends GraphChartLink {\n  amount: number | undefined;\n}\n/** Unovis 布局后：连线的起点、终点换成了节点对象 */\ntype LaidOutLink = Omit<Link, 'source' | 'target'> & { source: Node; target: Node };\n\n/** 网络图 */\nexport const GraphChart = _component(\n  ({\n    nodes,\n    links,\n    groups,\n    layout = 'force',\n    direction = 'LR',\n    arrows,\n    valueFormat,\n    unit,\n    height = 360,\n    zoom = true,\n    tooltip = true,\n    _selected: selected = _bindable<string | null>(null),\n    loading = false,\n    empty,\n    onItemClick,\n    sx,\n    ...rest\n  }: GraphChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const valueText = useChartValueText(() => ({ valueFormat, unit }));\n\n    const groupColors = _derived(\n      new Map(\n        (groups ?? []).map((group, position) => [group.id, resolveColor(group.color, position)]),\n      ),\n    );\n    const resolved = _derived(\n      nodes.map((node, index): Node => ({\n        ...node,\n        label: node.label ?? node.id,\n        fill: node.color\n          ? resolveColor(node.color, 0)\n          : ((node.group && groupColors.get(node.group)) ?? resolveColor('chart1', 0)),\n        index,\n      })),\n    );\n    const byId = _derived(new Map(resolved.map((node) => [node.id, node])));\n    const labelOf = (id: string) => byId.get(id)?.label ?? id;\n    // 只留两端都在的连线；最大值用来把粗细缩放到 1–6px\n    const shownLinks = _derived(\n      links\n        .filter((link) => byId.has(link.source) && byId.has(link.target))\n        .map((link): Link => ({\n          ...link,\n          amount: link.value === undefined ? undefined : toNumber(link.value),\n        })),\n    );\n    const maxAmount = _derived(Math.max(0, ...shownLinks.map((link) => link.amount ?? 0)));\n    const degree = _derived.by(() => {\n      const counts = new Map<string, number>();\n      for (const link of shownLinks) {\n        counts.set(link.source, (counts.get(link.source) ?? 0) + 1);\n        counts.set(link.target, (counts.get(link.target) ?? 0) + 1);\n      }\n      return counts;\n    });\n\n    let plot = _state.raw<HTMLElement | null>(null);\n    const chart: SingleChart = useSingleChart<{ nodes: Node[]; links?: Link[] }>(() => ({\n      element: plot,\n      ready: !loading && nodes.length > 0,\n      tooltip,\n      build: (instance) => {\n        const graph = instance('graph', () => new Graph<Node, Link>({}));\n        const layered = layout === 'dagre' || layout === 'elk';\n        // 分组框只在按层、按列排的布局里画：其余布局不按组排，框会互相盖住\n        const framed = layered || layout === 'parallel';\n        graph.setConfig({\n          layoutType: LAYOUTS[layout],\n          layoutNodeGroup: (node) => node.group ?? '',\n          layoutGroupOrder: groups?.map((group) => group.id),\n          // 分组框比节点宽出一圈：层与层之间留够，框不相互压住\n          dagreLayoutSettings: {\n            rankdir: direction,\n            nodesep: groups?.length ? 48 : 36,\n            ranksep: groups?.length ? 150 : 96,\n          },\n          layoutElkSettings: {\n            'elk.direction': direction === 'LR' ? 'RIGHT' : 'DOWN',\n            'elk.spacing.nodeNode': '36',\n            'elk.layered.spacing.nodeNodeBetweenLayers': '96',\n          },\n          layoutElkNodeGroups: groups?.length ? [(node) => node.group ?? ''] : undefined,\n          forceLayoutSettings: { linkDistance: 90, charge: -600 },\n          nodeSize: (node) => node.size ?? 28,\n          nodeShape: (node) => SHAPES[node.shape ?? 'circle'],\n          nodeFill: (node) => node.fill,\n          nodeStrokeWidth: 2,\n          nodeLabel: (node) => node.label,\n          nodeSubLabel: (node) => node.sublabel ?? '',\n          nodeLabelTrimLength: 16,\n          // 不用图标字体：节点只是色块\n          nodeIcon: () => '',\n          linkWidth: (link) =>\n            link.amount === undefined || maxAmount === 0 ? 1.5 : 1 + (5 * link.amount) / maxAmount,\n          linkStroke: (link) => (link.color ? resolveColor(link.color, 0) : undefined),\n          linkStyle: (link) => (link.dashed ? GraphLinkStyle.Dashed : GraphLinkStyle.Solid),\n          linkArrow: (arrows ?? layered) ? GraphLinkArrowStyle.Single : undefined,\n          linkLabel: (link) => (link.label ? { text: link.label } : undefined),\n          linkCurvature: layered ? 0 : 0.2,\n          panels: (framed ? (groups ?? []) : [])\n            .filter((group) => resolved.some((node) => node.group === group.id))\n            .map((group) => ({\n              nodes: resolved.filter((node) => node.group === group.id).map((node) => node.id),\n              label: group.label,\n              padding: 16,\n              borderColor: groupColors.get(group.id),\n            })),\n          selectedNodeId: selected ?? undefined,\n          nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected,\n          disableZoom: !zoom,\n          disableDrag: !zoom,\n          disableBrush: true,\n          // 上方多留一些：分组框的组名写在框顶外面\n          fitViewPadding: { top: 48, right: 32, bottom: 32, left: 32 },\n          events: {\n            [Graph.selectors.node]: {\n              click: (node: Node) => {\n                selected = node.id;\n                onItemClick?.(nodes[node.index]!, node.index);\n              },\n            },\n            [Graph.selectors.background]: {\n              click: () => (selected = null),\n              // 双击空白回到全图\n              dblclick: () => graph.fitView(),\n            },\n          },\n        });\n        return {\n          component: graph,\n          data: {\n            nodes: resolved.map((node) => ({ ...node })),\n            links: shownLinks.map((link) => ({ ...link })),\n          },\n          triggers: {\n            [Graph.selectors.node]: (node: Node) =>\n              chart.tooltip(\n                chartTooltip(node.label, [\n                  ...(node.sublabel\n                    ? [{ label: node.sublabel, color: 'transparent', value: '' }]\n                    : []),\n                  {\n                    label: lang.chartDegree(degree.get(node.id) ?? 0),\n                    color: node.fill,\n                    value: '',\n                  },\n                ]),\n              ),\n            [Graph.selectors.link]: (link: LaidOutLink) =>\n              chart.tooltip(\n                chartTooltip(lang.chartFlowLabel(link.source.label, link.target.label), [\n                  ...(link.value === undefined\n                    ? []\n                    : [\n                        {\n                          label: lang.chartValue,\n                          color: link.source.fill,\n                          value: valueText(link.value),\n                        },\n                      ]),\n                  ...(link.label ? [{ label: link.label, color: 'transparent', value: '' }] : []),\n                ]),\n              ),\n          },\n        };\n      },\n    }));\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        sx={[graphChartStyles.root, sx]}\n        unit={unit}\n        height={height}\n        legend={[]}\n        hiddenKeys={[]}\n        onLegendToggle={() => {}}\n        loading={loading}\n        skeleton={<Skeleton sx={graphChartStyles.skeleton} />}\n        isEmpty={nodes.length === 0}\n        empty={empty}\n        clickable={onItemClick != null}\n        table={{\n          columns: [lang.chartLink, unit ? `${lang.chartValue}（${unit}）` : lang.chartValue],\n          rows: shownLinks.map((link) => ({\n            header: lang.chartFlowLabel(labelOf(link.source), labelOf(link.target)),\n            cells: [\n              [\n                link.value === undefined ? '' : format.number(link.value, valueFormat),\n                link.label ?? '',\n              ]\n                .filter(Boolean)\n                .join(' · ') || lang.emptyValue,\n            ],\n          })),\n        }}\n        plotRef={(element) => (plot = element)}\n      />\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"GraphChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_shallowRef","_vue_ref","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/GraphChart.tsx"],"sourcesContent":["/**\n * 网络图：节点与连线，看谁和谁有关系、关系有多强（案例与触发事件的匹配、团队与供应商的协作、依赖关系）。\n *\n *   <GraphChart aria-label=\"协作关系\" nodes={nodes} links={links} layout=\"layered\" groups={teams} />\n *\n * 节点是 { id, label?, sublabel?, group?, color?, shape?, size? }，连线是 { source, target, value?, label?, dashed? }。\n * 布局（见 graphLayout）：force（默认，力导向）、layered（分层，direction 定方向）、circular、concentric、parallel\n * （按 group 分列），在画之前同步算好，结果每次相同。\n * 写了 groups 时同组的节点框在一起（layered、parallel 布局；力导向、环形布局里组只决定颜色，框会互相盖住）；\n * 节点的颜色默认按组取色板，没有组时都是 chart1。\n * 连线写了 value 时按大小加粗（1–6px），悬停看“起点 → 终点”与数值。点节点选中它（selected 双向绑定），\n * 与它不相连的节点、连线变淡；点空白处取消。能拖动画布、按住 Ctrl 滚轮缩放（zoom={false} 关掉；直接滚轮照常滚动页面），\n * 双击放大一档、已放大时回到全图。给读屏的数据表每条连线一行；单位、加载与空状态同其他图表（见 ChartFrame）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { shallowRef, type VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport { colors, t } from '../config/theme/tokens';\nimport { Skeleton } from '../feedback/Skeleton';\nimport { svgNumber } from '../utils/data/number';\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport { usePanZoom } from '../utils/dom/pan-zoom';\nimport type { PartProps } from '../utils/props';\nimport { ChartFrame, chartTooltip, useChartValueText, type ChartFrameParts } from './frame';\nimport { graphLayout } from './layout/graph';\nimport { ChartTooltipBox, chartSvgStyles, pointerIn, usePlotArea, type ChartTip } from './plot';\nimport { resolveColor, type ChartColor } from './series';\nimport { estimateTextWidth, truncateText } from './text-size';\n\n/** 节点的形状 */\nexport interface GraphChartShapes {\n  /** 圆（默认） */\n  circle: unknown;\n  /** 方块 */\n  square: unknown;\n  /** 六边形 */\n  hexagon: unknown;\n  /** 三角 */\n  triangle: unknown;\n}\n\n/** 布局 */\nexport interface GraphChartLayouts {\n  /** 力导向（默认）：相连的靠近、不相连的推开，适合看关系疏密 */\n  force: unknown;\n  /** 分层：沿 direction 一层层排开，适合有先后、上下游的关系 */\n  layered: unknown;\n  /** 排成一圈 */\n  circular: unknown;\n  /** 同心圆：连得多的在中间 */\n  concentric: unknown;\n  /** 按 group 分列，组内按连接排 */\n  parallel: unknown;\n}\n\n/** 一个节点 */\nexport interface GraphChartNode {\n  /** id：连线里用它指节点 */\n  id: string;\n  /** 名称，写在节点下面；不写时用 id */\n  label?: string;\n  /** 名称下面的小字 */\n  sublabel?: string;\n  /** 所在的组（groups 里的 id）：同组的框在一起、颜色相同 */\n  group?: string;\n  /** 颜色；不写时按组取色板，没有组时是 chart1 */\n  color?: ChartColor;\n  /** 形状，默认 circle */\n  shape?: keyof GraphChartShapes;\n  /** 大小（px），默认 28 */\n  size?: number;\n}\n\n/** 一条连线 */\nexport interface GraphChartLink {\n  /** 起点节点的 id */\n  source: string;\n  /** 终点节点的 id */\n  target: string;\n  /** 强度：写了时按大小加粗；提示框、数据表里显示 */\n  value?: NumericValue;\n  /** 线上的短标签（几个字以内） */\n  label?: string;\n  /** 虚线：弱关系、待定的关系 */\n  dashed?: boolean;\n  /** 颜色；默认是边框色 */\n  color?: ChartColor;\n}\n\n/** 一组节点 */\nexport interface GraphChartGroup {\n  /** 组的 id：节点的 group 指它 */\n  id: string;\n  /** 组名：写在框上 */\n  label: string;\n  /** 颜色；不写时按组的顺序取色板 */\n  color?: ChartColor;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface GraphChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 节点 */\n  nodes: readonly GraphChartNode[];\n  /** 连线 */\n  links: readonly GraphChartLink[];\n  /** 分组：同组的节点框在一起（layered、parallel 布局），颜色相同 */\n  groups?: readonly GraphChartGroup[];\n  /**\n   * 布局\n   * @default 'force'\n   */\n  layout?: keyof GraphChartLayouts;\n  /**\n   * 分层、分列布局的方向：LR 从左到右，TB 从上到下\n   * @default 'LR'\n   */\n  direction?: 'LR' | 'TB';\n  /** 连线带箭头；默认分层布局带，其余不带 */\n  arrows?: boolean;\n  /** 连线数值的格式：提示框、数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 连线数值的单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 绘图区的高度；数字按 px\n   * @default 360\n   */\n  height?: number | string;\n  /**\n   * 能拖动画布、按住 Ctrl 滚轮缩放\n   * @default true\n   */\n  zoom?: boolean;\n  /**\n   * 悬停时的提示框\n   * @default true\n   */\n  tooltip?: boolean;\n  /** 选中的节点 id：点节点时写回，父级写 _selected={x}；点空白处变回 null */\n  _selected?: string | null;\n  /**\n   * 加载中：绘图区显示骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n  /**\n   * 点了一个节点（下钻）：参数是这个节点与它的位置；写了它时节点的指针是手形。\n   * 点图是鼠标的捷径：同样的去处在页面上还要有链接或按钮\n   */\n  onItemClick?: (node: GraphChartNode, index: number) => void;\n}\n\n/** GraphChart 的样式 */\nexport const graphChartStyles = css.create({\n  skeleton: { display: 'block', width: '100%', height: '100%' },\n  viewport: { position: 'absolute', inset: 0 },\n  background: { fill: 'transparent' },\n  panel: { fill: '_surfaceMuted', strokeWidth: 1 },\n  panelLabel: { fill: '_textMuted', fontSize: '_xs', fontWeight: '_medium' },\n  link: { fill: 'none', transition: `opacity ${t.durations.sm} ${t.easings.standard}` },\n  linkDashed: { strokeDasharray: '5 4' },\n  linkLabelBox: { fill: '_fill' },\n  linkLabel: { fill: '_text', fontSize: '_xs' },\n  node: { transition: `opacity ${t.durations.sm} ${t.easings.standard}` },\n  nodeShape: { stroke: '_surface', strokeWidth: 2 },\n  // 选中的节点：外面一圈强调色\n  nodeSelected: { stroke: '_accent', strokeWidth: 3 },\n  nodeLabel: { fill: '_text', fontSize: '_xs', fontWeight: '_medium' },\n  nodeSublabel: { fill: '_textMuted', fontSize: '_xs' },\n  clickable: { cursor: 'pointer' },\n  wheelHint: {\n    position: 'absolute',\n    top: '_sm',\n    insetInlineEnd: '_sm',\n    paddingBlock: '_xs',\n    paddingInline: '_sm',\n    borderRadius: '_md',\n    backgroundColor: '_surfaceRaised',\n    boxShadow: '_sm',\n    color: '_textMuted',\n    fontSize: '_xs',\n    pointerEvents: 'none',\n  },\n});\n\n/** 节点的默认大小、名字的行高、名字最多几个字宽（px） */\nconst NODE_SIZE = 28;\nconst LINE = 16;\nconst LABEL_MAX = 120;\n/** 分组框四周、顶上（写组名）留的空 */\nconst PANEL_PAD = 16;\nconst PANEL_TITLE = 22;\n/** 箭头的长与宽 */\nconst ARROW = 8;\n\n/** 节点的形状：中心在原点、外接圆直径 size 的 SVG 路径 */\nfunction shapePath(shape: keyof GraphChartShapes, size: number): string {\n  const r = size / 2;\n  const polygon = (count: number, rotate: number, radius: number) =>\n    `${Array.from({ length: count }, (_, i) => {\n      const angle = rotate + (i / count) * Math.PI * 2;\n      return `${i ? 'L' : 'M'}${svgNumber(radius * Math.cos(angle))},${svgNumber(radius * Math.sin(angle))}`;\n    }).join('')}Z`;\n  if (shape === 'square') {\n    const half = r * 0.86;\n    return `M${-half},${-half}H${half}V${half}H${-half}Z`;\n  }\n  if (shape === 'hexagon') return polygon(6, 0, r);\n  if (shape === 'triangle') return polygon(3, -Math.PI / 2, r * 1.1);\n  return `M${-r},0A${r},${r},0,1,1,${r},0A${r},${r},0,1,1,${-r},0Z`;\n}\n\n/** 画图用的节点：带上名称、颜色与位置 */\ninterface PlacedNode extends GraphChartNode {\n  label: string;\n  fill: string;\n  index: number;\n  size: number;\n  x: number;\n  y: number;\n}\n\n/** 悬停的节点或连线 */\ninterface GraphHover {\n  kind: 'node' | 'link';\n  index: number;\n  x: number;\n  y: number;\n}\n\n/** 网络图 */\nexport const GraphChart = _component(\n  ({\n    nodes,\n    links,\n    groups,\n    layout = 'force',\n    direction = 'LR',\n    arrows,\n    valueFormat,\n    unit,\n    height = 360,\n    zoom = true,\n    tooltip = true,\n    _selected: selected = _bindable<string | null>(null),\n    loading = false,\n    empty,\n    onItemClick,\n    ...rest\n  }: GraphChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const valueText = useChartValueText(() => ({ valueFormat, unit }));\n    const area = usePlotArea();\n    const viewport = shallowRef<HTMLElement | null>(null);\n    let hovered = _state.raw<GraphHover | null>(null);\n    let wheelHint = _state(false);\n    let hintTimer: ReturnType<typeof setTimeout> | undefined;\n    _effect(() => () => clearTimeout(hintTimer));\n\n    // 滚轮默认滚动页面，按住 Ctrl（或 ⌘、触控板捏合）才缩放；按在节点上的拖动不平移（点选节点）\n    const view = usePanZoom({\n      viewport: () => viewport.value,\n      min: 0.3,\n      max: 4,\n      disabled: () => !zoom,\n      filter: (event) => {\n        if (event instanceof WheelEvent && !event.ctrlKey && !event.metaKey) {\n          wheelHint = true;\n          clearTimeout(hintTimer);\n          hintTimer = setTimeout(() => (wheelHint = false), 1500);\n          return false;\n        }\n        return !(event.type === 'dblclick' && (event.target as Element).closest?.('[data-node]'));\n      },\n    });\n\n    const groupColors = _derived(\n      new Map(\n        (groups ?? []).map((group, position) => [group.id, resolveColor(group.color, position)]),\n      ),\n    );\n    const byId = _derived(new Map(nodes.map((node) => [node.id, node])));\n    const labelOf = (id: string) => byId.get(id)?.label ?? id;\n    // 只留两端都在的连线；最大值用来把粗细缩放到 1–6px\n    const shownLinks = _derived(\n      links.filter((link) => byId.has(link.source) && byId.has(link.target)),\n    );\n    const amounts = _derived(\n      shownLinks.map((link) => (link.value === undefined ? undefined : toNumber(link.value))),\n    );\n    const maxAmount = _derived(Math.max(0, ...amounts.map((amount) => amount ?? 0)));\n    const degree = _derived.by(() => {\n      const counts = new Map<string, number>();\n      for (const link of shownLinks) {\n        counts.set(link.source, (counts.get(link.source) ?? 0) + 1);\n        counts.set(link.target, (counts.get(link.target) ?? 0) + 1);\n      }\n      return counts;\n    });\n    const layered = () => layout === 'layered';\n    // 分组框只在按层、按列排的布局里画：其余布局不按组排，框会互相盖住\n    const framed = () => layered() || layout === 'parallel';\n\n    /** 布局：节点的位置（未缩放，单位 px） */\n    const positions = _derived.by(() => {\n      const inputs = nodes.map((node) => {\n        const size = node.size ?? NODE_SIZE;\n        const label = node.label ?? node.id;\n        const textWidth = Math.min(\n          LABEL_MAX,\n          Math.max(estimateTextWidth(label), estimateTextWidth(node.sublabel ?? '')),\n        );\n        return {\n          id: node.id,\n          group: node.group,\n          width: Math.max(size, textWidth) + 8,\n          height: size + 6 + LINE * (node.sublabel ? 2 : 1),\n        };\n      });\n      return graphLayout(inputs, shownLinks, {\n        layout,\n        direction,\n        groups: groups?.map((group) => group.id),\n      });\n    });\n\n    /** 放进绘图区：位置按绘图区缩放、居中（节点与文字不缩放），最多放大到 1.2 倍 */\n    const placed = _derived.by((): PlacedNode[] => {\n      const items = nodes.map((node, index) => {\n        const position = positions.get(node.id) ?? { x: 0, y: 0 };\n        return {\n          ...node,\n          label: node.label ?? node.id,\n          fill: node.color\n            ? resolveColor(node.color, 0)\n            : ((node.group && groupColors.get(node.group)) ?? resolveColor('chart1', 0)),\n          index,\n          size: node.size ?? NODE_SIZE,\n          x: position.x,\n          y: position.y,\n        };\n      });\n      if (!items.length) return items;\n      const xs = items.map((item) => item.x);\n      const ys = items.map((item) => item.y);\n      const [minX, maxX, minY, maxY] = [\n        Math.min(...xs),\n        Math.max(...xs),\n        Math.min(...ys),\n        Math.max(...ys),\n      ];\n      const frame = framed() && groups?.length ? PANEL_PAD : 0;\n      // 四周留出节点、名字与分组框\n      const room = {\n        x: LABEL_MAX / 2 + frame + 8,\n        top: NODE_SIZE / 2 + frame + (frame ? PANEL_TITLE : 0) + 8,\n        bottom: NODE_SIZE / 2 + LINE * 2 + frame + 8,\n      };\n      const width = area.width - room.x * 2;\n      const height = area.height - room.top - room.bottom;\n      const scale = Math.min(\n        1.2,\n        maxX > minX ? width / (maxX - minX) : 1.2,\n        maxY > minY ? height / (maxY - minY) : 1.2,\n      );\n      const offsetX = room.x + (width - (maxX - minX) * scale) / 2 - minX * scale;\n      const offsetY = room.top + (height - (maxY - minY) * scale) / 2 - minY * scale;\n      return items.map((item) => ({\n        ...item,\n        x: item.x * scale + offsetX,\n        y: item.y * scale + offsetY,\n      }));\n    });\n    const placedById = _derived(new Map(placed.map((node) => [node.id, node])));\n\n    /** 选中节点时它与相连的节点、连线保持原样，其余变淡 */\n    const connected = _derived.by(() => {\n      if (selected === null) return null;\n      const ids = new Set([selected]);\n      for (const link of shownLinks) {\n        if (link.source === selected) ids.add(link.target);\n        if (link.target === selected) ids.add(link.source);\n      }\n      return ids;\n    });\n\n    /** 一条连线的路径、终点处的方向（画箭头）与中点（写标签） */\n    function linkGeometry(source: PlacedNode, target: PlacedNode, arrow: boolean) {\n      const tail = arrow ? ARROW : 0;\n      if (layered()) {\n        // 分层：沿方向的 S 形曲线，两端从节点的边上出发\n        const horizontal = direction === 'LR';\n        const [sx, sy] = horizontal\n          ? [source.x + source.size / 2, source.y]\n          : [source.x, source.y + source.size / 2];\n        const [tx, ty] = horizontal\n          ? [target.x - target.size / 2 - tail, target.y]\n          : [target.x, target.y - target.size / 2 - tail];\n        const d = horizontal\n          ? `M${svgNumber(sx)},${svgNumber(sy)}C${svgNumber((sx + tx) / 2)},${svgNumber(sy)},${svgNumber((sx + tx) / 2)},${svgNumber(ty)},${svgNumber(tx)},${svgNumber(ty)}`\n          : `M${svgNumber(sx)},${svgNumber(sy)}C${svgNumber(sx)},${svgNumber((sy + ty) / 2)},${svgNumber(tx)},${svgNumber((sy + ty) / 2)},${svgNumber(tx)},${svgNumber(ty)}`;\n        return {\n          d,\n          end: [tx, ty] as const,\n          angle: horizontal ? 0 : Math.PI / 2,\n          middle: [(sx + tx) / 2, (sy + ty) / 2] as const,\n        };\n      }\n      // 其余：微微弯曲的二次曲线（相向的两条不重叠），两端退到节点的边上\n      const dx = target.x - source.x;\n      const dy = target.y - source.y;\n      const length = Math.hypot(dx, dy) || 1;\n      const control = [\n        (source.x + target.x) / 2 - (dy / length) * length * 0.12,\n        (source.y + target.y) / 2 + (dx / length) * length * 0.12,\n      ] as const;\n      const toward = (\n        from: readonly [number, number],\n        to: readonly [number, number],\n        distance: number,\n      ) => {\n        const ux = to[0] - from[0];\n        const uy = to[1] - from[1];\n        const norm = Math.hypot(ux, uy) || 1;\n        return [from[0] + (ux / norm) * distance, from[1] + (uy / norm) * distance] as const;\n      };\n      const start = toward([source.x, source.y], control, source.size / 2);\n      const end = toward([target.x, target.y], control, target.size / 2 + tail);\n      const d = `M${svgNumber(start[0])},${svgNumber(start[1])}Q${svgNumber(control[0])},${svgNumber(control[1])},${svgNumber(end[0])},${svgNumber(end[1])}`;\n      return {\n        d,\n        end,\n        angle: Math.atan2(target.y - control[1], target.x - control[0]),\n        middle: [\n          (start[0] + 2 * control[0] + end[0]) / 4,\n          (start[1] + 2 * control[1] + end[1]) / 4,\n        ] as const,\n      };\n    }\n\n    function onPointermove(event: PointerEvent) {\n      const target = (event.target as Element).closest?.('[data-node],[data-link]');\n      if (!target) {\n        hovered = null;\n        return;\n      }\n      const { x, y } = pointerIn(event, viewport.value ?? (event.currentTarget as Element));\n      const node = target.getAttribute('data-node');\n      hovered =\n        node === null\n          ? { kind: 'link', index: Number(target.getAttribute('data-link')), x, y }\n          : { kind: 'node', index: Number(node), x, y };\n    }\n\n    function onClick(event: MouseEvent) {\n      const target = (event.target as Element).closest?.('[data-node]');\n      if (!target) {\n        selected = null;\n        return;\n      }\n      const node = placed[Number(target.getAttribute('data-node'))];\n      if (!node) return;\n      selected = node.id;\n      onItemClick?.(nodes[node.index]!, node.index);\n    }\n\n    function renderPanels() {\n      if (!framed()) return null;\n      return (groups ?? []).map((group) => {\n        const members = placed.filter((node) => node.group === group.id);\n        if (!members.length) return null;\n        const half = (node: PlacedNode) =>\n          Math.max(node.size / 2, Math.min(LABEL_MAX, estimateTextWidth(node.label)) / 2);\n        const x0 = Math.min(...members.map((node) => node.x - half(node))) - PANEL_PAD;\n        const x1 = Math.max(...members.map((node) => node.x + half(node))) + PANEL_PAD;\n        const y0 =\n          Math.min(...members.map((node) => node.y - node.size / 2)) - PANEL_PAD - PANEL_TITLE;\n        const y1 =\n          Math.max(\n            ...members.map((node) => node.y + node.size / 2 + LINE * (node.sublabel ? 2 : 1) + 4),\n          ) + PANEL_PAD;\n        return (\n          <g key={group.id} data-part=\"panel\">\n            <rect\n              x={svgNumber(x0)}\n              y={svgNumber(y0)}\n              width={svgNumber(x1 - x0)}\n              height={svgNumber(y1 - y0)}\n              rx={8}\n              {...css.attrs(\n                graphChartStyles.panel,\n                chartSvgStyles.stroke(groupColors.get(group.id) ?? colors.borderMuted),\n              )}\n            />\n            <text\n              x={svgNumber(x0 + 10)}\n              y={svgNumber(y0 + PANEL_TITLE / 2 + 2)}\n              dominant-baseline=\"central\"\n              {...css.attrs(graphChartStyles.panelLabel)}\n            >\n              {truncateText(group.label, x1 - x0 - 20)}\n            </text>\n          </g>\n        );\n      });\n    }\n\n    function renderLinks() {\n      const withArrows = arrows ?? layered();\n      return shownLinks.map((link, index) => {\n        const source = placedById.get(link.source)!;\n        const target = placedById.get(link.target)!;\n        if (source === target) return null;\n        const amount = amounts[index];\n        const width = amount === undefined || maxAmount === 0 ? 1.5 : 1 + (5 * amount) / maxAmount;\n        const color = link.color ? resolveColor(link.color, 0) : colors.borderStrong;\n        const { d, end, angle, middle } = linkGeometry(source, target, withArrows);\n        const faded = connected !== null && link.source !== selected && link.target !== selected;\n        const arrowSize = ARROW + width;\n        const arrowPath = () => {\n          const [ex, ey] = end;\n          const tipX = ex + Math.cos(angle) * arrowSize;\n          const tipY = ey + Math.sin(angle) * arrowSize;\n          const side = arrowSize * 0.55;\n          const nx = -Math.sin(angle) * side;\n          const ny = Math.cos(angle) * side;\n          return `M${svgNumber(tipX)},${svgNumber(tipY)}L${svgNumber(ex + nx)},${svgNumber(ey + ny)}L${svgNumber(ex - nx)},${svgNumber(ey - ny)}Z`;\n        };\n        return (\n          <g\n            key={`${link.source}->${link.target}:${index}`}\n            {...css.attrs(graphChartStyles.node, faded && chartSvgStyles.dimmed)}\n          >\n            <path\n              data-part=\"link\"\n              data-link={index}\n              d={d}\n              stroke-width={svgNumber(width)}\n              {...css.attrs(\n                graphChartStyles.link,\n                chartSvgStyles.stroke(color),\n                link.dashed && graphChartStyles.linkDashed,\n              )}\n            />\n            {withArrows && <path d={arrowPath()} {...css.attrs(chartSvgStyles.fill(color))} />}\n            {link.label && (\n              <g\n                transform={`translate(${svgNumber(middle[0])},${svgNumber(middle[1])})`}\n                {...css.attrs(chartSvgStyles.noPointer)}\n              >\n                <rect\n                  x={-estimateTextWidth(link.label) / 2 - 4}\n                  y={-9}\n                  width={estimateTextWidth(link.label) + 8}\n                  height={18}\n                  rx={4}\n                  {...css.attrs(graphChartStyles.linkLabelBox)}\n                />\n                <text\n                  text-anchor=\"middle\"\n                  dominant-baseline=\"central\"\n                  {...css.attrs(graphChartStyles.linkLabel)}\n                >\n                  {link.label}\n                </text>\n              </g>\n            )}\n          </g>\n        );\n      });\n    }\n\n    function renderNodes() {\n      return placed.map((node, index) => {\n        const faded = connected !== null && !connected.has(node.id);\n        const shape = node.shape ?? 'circle';\n        return (\n          <g\n            key={node.id}\n            data-part=\"node\"\n            data-node={index}\n            transform={`translate(${svgNumber(node.x)},${svgNumber(node.y)})`}\n            {...css.attrs(\n              graphChartStyles.node,\n              onItemClick && graphChartStyles.clickable,\n              faded && chartSvgStyles.dimmed,\n            )}\n          >\n            <path\n              d={shapePath(shape, node.size)}\n              {...css.attrs(\n                graphChartStyles.nodeShape,\n                chartSvgStyles.fill(node.fill),\n                selected === node.id && graphChartStyles.nodeSelected,\n              )}\n            />\n            <text\n              y={node.size / 2 + 4}\n              text-anchor=\"middle\"\n              dominant-baseline=\"hanging\"\n              {...css.attrs(graphChartStyles.nodeLabel, chartSvgStyles.halo)}\n            >\n              {truncateText(node.label, LABEL_MAX)}\n            </text>\n            {node.sublabel && (\n              <text\n                y={node.size / 2 + 4 + LINE}\n                text-anchor=\"middle\"\n                dominant-baseline=\"hanging\"\n                {...css.attrs(graphChartStyles.nodeSublabel, chartSvgStyles.halo)}\n              >\n                {truncateText(node.sublabel, LABEL_MAX)}\n              </text>\n            )}\n          </g>\n        );\n      });\n    }\n\n    const tip = (): ChartTip | null => {\n      const current = hovered;\n      if (!tooltip || !current) return null;\n      if (current.kind === 'node') {\n        const node = placed[current.index];\n        if (!node) return null;\n        return {\n          x: current.x,\n          y: current.y,\n          content: chartTooltip(node.label, [\n            ...(node.sublabel ? [{ label: node.sublabel, color: 'transparent', value: '' }] : []),\n            { label: lang.chartDegree(degree.get(node.id) ?? 0), color: node.fill, value: '' },\n          ]),\n        };\n      }\n      const link = shownLinks[current.index];\n      if (!link) return null;\n      const source = placedById.get(link.source)!;\n      return {\n        x: current.x,\n        y: current.y,\n        content: chartTooltip(\n          lang.chartFlowLabel(source.label, placedById.get(link.target)!.label),\n          [\n            ...(link.value === undefined\n              ? []\n              : [{ label: lang.chartValue, color: source.fill, value: valueText(link.value) }]),\n            ...(link.label ? [{ label: link.label, color: 'transparent', value: '' }] : []),\n          ],\n        ),\n      };\n    };\n\n    function renderPlot() {\n      return (\n        <div\n          {...css.attrs(graphChartStyles.viewport)}\n          {...(zoom ? view.viewportProps : {})}\n          ref={(element) => (viewport.value = element as HTMLElement | null)}\n          onPointermove={(event: PointerEvent) => {\n            // 平移缩放也要指针移动（两指捏合）：两个都调\n            if (zoom) (view.viewportProps.onPointermove as (event: PointerEvent) => void)(event);\n            onPointermove(event);\n          }}\n          onPointerleave={() => (hovered = null)}\n        >\n          <svg\n            width={area.width}\n            height={area.height}\n            {...css.attrs(chartSvgStyles.svg)}\n            onClick={onClick}\n          >\n            <rect\n              data-part=\"background\"\n              width={area.width}\n              height={area.height}\n              {...css.attrs(graphChartStyles.background)}\n            />\n            <g\n              transform={`translate(${svgNumber(view.x)} ${svgNumber(view.y)}) scale(${svgNumber(view.scale)})`}\n            >\n              <g {...css.attrs(chartSvgStyles.fadeIn)}>\n                {renderPanels()}\n                {renderLinks()}\n                {renderNodes()}\n              </g>\n            </g>\n          </svg>\n          <ChartTooltipBox tip={tip()} width={area.width} />\n          {/* 只给指针用户的提示（读屏不用滚轮缩放）：浮在绘图区右上角，不挤动布局 */}\n          {wheelHint && (\n            <span {...css.attrs(graphChartStyles.wheelHint)}>{lang.chartZoomWheelHint}</span>\n          )}\n        </div>\n      );\n    }\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        unit={unit}\n        height={height}\n        legend={[]}\n        hiddenKeys={[]}\n        onLegendToggle={() => {}}\n        loading={loading}\n        skeleton={<Skeleton sx={graphChartStyles.skeleton} />}\n        isEmpty={nodes.length === 0}\n        empty={empty}\n        clickable={onItemClick != null}\n        table={{\n          columns: [lang.chartLink, unit ? `${lang.chartValue}（${unit}）` : lang.chartValue],\n          rows: shownLinks.map((link) => ({\n            header: lang.chartFlowLabel(labelOf(link.source), labelOf(link.target)),\n            cells: [\n              [\n                link.value === undefined ? '' : format.number(link.value, valueFormat),\n                link.label ?? '',\n              ]\n                .filter(Boolean)\n                .join(' · ') || lang.emptyValue,\n            ],\n          })),\n        }}\n        plotRef={area.ref}\n        plot={area.ready ? renderPlot() : null}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6JA,IAAa,mBAAmB,IAAI,OAAO;CACzC,UAAU;EAAE,SAAS;EAAS,OAAO;EAAQ,QAAQ;CAAO;CAC5D,UAAU;EAAE,UAAU;EAAY,OAAO;CAAE;CAC3C,YAAY,EAAE,MAAM,cAAc;CAClC,OAAO;EAAE,MAAM;EAAiB,aAAa;CAAE;CAC/C,YAAY;EAAE,MAAM;EAAc,UAAU;EAAO,YAAY;CAAU;CACzE,MAAM;EAAE,MAAM;EAAQ,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CAAW;CACpF,YAAY,EAAE,iBAAiB,MAAM;CACrC,cAAc,EAAE,MAAM,QAAQ;CAC9B,WAAW;EAAE,MAAM;EAAS,UAAU;CAAM;CAC5C,MAAM,EAAE,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,WAAW;CACtE,WAAW;EAAE,QAAQ;EAAY,aAAa;CAAE;CAEhD,cAAc;EAAE,QAAQ;EAAW,aAAa;CAAE;CAClD,WAAW;EAAE,MAAM;EAAS,UAAU;EAAO,YAAY;CAAU;CACnE,cAAc;EAAE,MAAM;EAAc,UAAU;CAAM;CACpD,WAAW,EAAE,QAAQ,UAAU;CAC/B,WAAW;EACT,UAAU;EACV,KAAK;EACL,gBAAgB;EAChB,cAAc;EACd,eAAe;EACf,cAAc;EACd,iBAAiB;EACjB,WAAW;EACX,OAAO;EACP,UAAU;EACV,eAAe;CACjB;AACF,CAAC;;AAGD,IAAM,YAAY;AAClB,IAAM,OAAO;AACb,IAAM,YAAY;;AAElB,IAAM,YAAY;AAClB,IAAM,cAAc;;AAEpB,IAAM,QAAQ;;AAGd,SAAS,UAAU,OAA+B,MAAsB;CACtE,MAAM,IAAI,OAAO;CACjB,MAAM,WAAW,OAAe,QAAgB,WAC9C,GAAG,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,MAAM;EACzC,MAAM,QAAQ,SAAU,IAAI,QAAS,KAAK,KAAK;EAC/C,OAAO,GAAG,IAAI,MAAM,MAAM,UAAU,SAAS,KAAK,IAAI,KAAK,CAAC,EAAC,GAAI,UAAU,SAAS,KAAK,IAAI,KAAK,CAAC;CACrG,CAAC,CAAC,CAAC,KAAK,EAAE,EAAC;CACb,IAAI,UAAU,UAAU;EACtB,MAAM,OAAO,IAAI;EACjB,OAAO,IAAI,CAAC,KAAI,GAAI,CAAC,KAAI,GAAI,KAAI,GAAI,KAAI,GAAI,CAAC,KAAI;CACpD;CACA,IAAI,UAAU,WAAW,OAAO,QAAQ,GAAG,GAAG,CAAC;CAC/C,IAAI,UAAU,YAAY,OAAO,QAAQ,GAAG,CAAC,KAAK,KAAK,GAAG,IAAI,GAAG;CACjE,OAAO,IAAI,CAAC,EAAC,KAAM,EAAC,GAAI,EAAC,SAAU,EAAC,KAAM,EAAC,GAAI,EAAC,SAAU,CAAC,EAAC;AAC9D;;;;AAqBA,IAAa,aAAa,0BACxB,QAAA,SAiBuB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,UAbZ,OAAO;CAAA,MAAA,YAAAA,aAAA,QAAA,aACJ,IAAI;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,UAIP,GAAG;CAAA,MAAA,OAAAA,aAAA,QAAA,QACL,IAAI;CAAA,MAAA,UAAAA,aAAA,QAAA,WACD,IAAI;CAAA,MAAA,WAAAC,SAAA,QAAA,mBACiC,MAAI,KAAA,IAAA;CAAA,MAAA,UAAAD,aAAA,QAAA,WACzC,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAGZ,OAAIE,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,UAAU;CACzB,MAAM,YAAY,yBAAyB;EAAE,aAAW,YAAA;EAAE,MAAI,KAAA;CAAC,EAAE;CACjE,MAAM,OAAO,YAAY;CACzB,MAAM,WAAW,WAA+B,IAAI;CACpD,IAAI,UAAOC,WAAiC,IAAI;CAChD,IAAI,YAASC,IAAU,KAAK;CAC5B,IAAI;CACJ,mBAAoB,aAAa,SAAS,CAAC;CAG3C,MAAM,OAAO,WAAW;EACtB,gBAAgB,SAAS;EACzB,KAAK;EACL,KAAK;EACL,gBAAgB,CAAA,KAAA;EAChB,SAAS,UAAU;GACjB,IAAI,iBAAiB,cAAc,CAAC,MAAM,WAAW,CAAC,MAAM,SAAS;IACnE,UAAA,QAAY;IACZ,aAAa,SAAS;IACtB,YAAY,iBAAkB,UAAA,QAAY,OAAQ,IAAI;IACtD,OAAO;GACT;GACA,OAAO,EAAE,MAAM,SAAS,cAAe,MAAM,OAAmB,UAAU,aAAa;EACzF;CACF,CAAC;CAED,MAAM,cAAWC,eACf,IAAI,KACD,OAAA,SAAU,CAAA,EAAA,CAAI,KAAK,OAAO,aAAa,CAAC,MAAM,IAAI,aAAa,MAAM,OAAO,QAAQ,CAAC,CAAC,CACzF,CAAC;CAEH,MAAM,OAAIA,eAAY,IAAI,IAAI,MAAA,MAAM,KAAK,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC;CACnE,MAAM,WAAW,OAAe,KAAA,MAAK,IAAI,EAAE,CAAC,EAAE,SAAS;CAEvD,MAAM,aAAUA,eACd,MAAA,MAAM,QAAQ,SAAS,KAAA,MAAK,IAAI,KAAK,MAAM,KAAK,KAAA,MAAK,IAAI,KAAK,MAAM,CAAC,CAAC;CAExE,MAAM,UAAOA,eACX,WAAA,MAAW,KAAK,SAAU,KAAK,UAAU,KAAA,IAAY,KAAA,IAAY,SAAS,KAAK,KAAK,CAAE,CAAC;CAEzF,MAAM,YAASA,eAAY,KAAK,IAAI,GAAG,GAAG,QAAA,MAAQ,KAAK,WAAW,UAAU,CAAC,CAAC,CAAC;CAC/E,MAAM,SAAMA,eAAqB;EAC/B,MAAM,yBAAS,IAAI,IAAoB;EACvC,KAAK,MAAM,QAAI,WAAA,OAAgB;GAC7B,OAAO,IAAI,KAAK,SAAS,OAAO,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC;GAC1D,OAAO,IAAI,KAAK,SAAS,OAAO,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC;EAC5D;EACA,OAAO;CACT,CAAC;CACD,MAAM,gBAAgB,OAAA,UAAW;CAEjC,MAAM,eAAe,QAAQ,KAAK,OAAA,UAAW;;CAG7C,MAAM,YAASA,eAAqB;EAClC,MAAM,SAAS,MAAA,MAAM,KAAK,SAAS;GACjC,MAAM,OAAO,KAAK,QAAQ;GAC1B,MAAM,QAAQ,KAAK,SAAS,KAAK;GACjC,MAAM,YAAY,KAAK,IACrB,WACA,KAAK,IAAI,kBAAkB,KAAK,GAAG,kBAAkB,KAAK,YAAY,EAAE,CAAC,CAC3E;GACA,OAAO;IACL,IAAI,KAAK;IACT,OAAO,KAAK;IACZ,OAAO,KAAK,IAAI,MAAM,SAAS,IAAI;IACnC,QAAQ,OAAO,IAAI,QAAQ,KAAK,WAAW,IAAI;GACjD;EACF,CAAC;EACD,OAAO,YAAY,QAAM,WAAA,OAAc;GACrC,QAAM,OAAA;GACN,WAAS,UAAA;GACT,QAAQ,OAAA,OAAQ,KAAK,UAAU,MAAM,EAAE;EACzC,CAAC;CACH,CAAC;;CAGD,MAAM,SAAMA,eAAmC;EAC7C,MAAM,QAAQ,MAAA,MAAM,KAAK,MAAM,UAAU;GACvC,MAAM,WAAW,UAAA,MAAU,IAAI,KAAK,EAAE,KAAK;IAAE,GAAG;IAAG,GAAG;GAAE;GACxD,OAAO;IACL,GAAG;IACH,OAAO,KAAK,SAAS,KAAK;IAC1B,MAAM,KAAK,QACP,aAAa,KAAK,OAAO,CAAC,KACxB,KAAK,SAAS,YAAA,MAAY,IAAI,KAAK,KAAK,MAAM,aAAa,UAAU,CAAC;IAC5E;IACA,MAAM,KAAK,QAAQ;IACnB,GAAG,SAAS;IACZ,GAAG,SAAS;GACd;EACF,CAAC;EACD,IAAI,CAAC,MAAM,QAAQ,OAAO;EAC1B,MAAM,KAAK,MAAM,KAAK,SAAS,KAAK,CAAC;EACrC,MAAM,KAAK,MAAM,KAAK,SAAS,KAAK,CAAC;EACrC,MAAM,CAAC,MAAM,MAAM,MAAM,QAAQ;GAC/B,KAAK,IAAI,GAAG,EAAE;GACd,KAAK,IAAI,GAAG,EAAE;GACd,KAAK,IAAI,GAAG,EAAE;GACd,KAAK,IAAI,GAAG,EAAE;EAAC;EAEjB,MAAM,QAAQ,OAAO,KAAK,OAAA,OAAQ,SAAS,YAAY;EAEvD,MAAM,OAAO;GACX,GAAG,YAAY,IAAI,QAAQ;GAC3B,KAAK,YAAY,IAAI,SAAS,QAAQ,cAAc,KAAK;GACzD,QAAQ,KAA2B,QAAQ;EAC7C;EACA,MAAM,QAAQ,KAAK,QAAQ,KAAK,IAAI;EACpC,MAAM,SAAS,KAAK,SAAS,KAAK,MAAM,KAAK;EAC7C,MAAM,QAAQ,KAAK,IACjB,KACA,OAAO,OAAO,SAAS,OAAO,QAAQ,KACtC,OAAO,OAAO,UAAU,OAAO,QAAQ,GACzC;EACA,MAAM,UAAU,KAAK,KAAK,SAAS,OAAO,QAAQ,SAAS,IAAI,OAAO;EACtE,MAAM,UAAU,KAAK,OAAO,UAAU,OAAO,QAAQ,SAAS,IAAI,OAAO;EACzE,OAAO,MAAM,KAAK,UAAU;GAC1B,GAAG;GACH,GAAG,KAAK,IAAI,QAAQ;GACpB,GAAG,KAAK,IAAI,QAAQ;EACtB,EAAE;CACJ,CAAC;CACD,MAAM,aAAUA,eAAY,IAAI,IAAI,OAAA,MAAO,KAAK,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC;;CAG1E,MAAM,YAASA,eAAqB;EAClC,IAAI,SAAA,UAAa,MAAM,OAAO;EAC9B,MAAM,sBAAM,IAAI,IAAI,CAAA,SAAA,KAAA,CAAU;EAC9B,KAAK,MAAM,QAAI,WAAA,OAAgB;GAC7B,IAAI,KAAK,WAAM,SAAA,OAAe,IAAI,IAAI,KAAK,MAAM;GACjD,IAAI,KAAK,WAAM,SAAA,OAAe,IAAI,IAAI,KAAK,MAAM;EACnD;EACA,OAAO;CACT,CAAC;;CAGD,SAAS,aAAa,QAAoB,QAAoB,OAAgB;EAC5E,MAAM,OAAO,QAAQ,QAAQ;EAC7B,IAAI,QAAQ,GAAG;GAEb,MAAM,aAAa,UAAA,UAAc;GACjC,MAAM,CAAC,IAAI,MAAM,aACb,CAAC,OAAO,IAAI,OAAO,OAAO,GAAG,OAAO,CAAC,IACrC,CAAC,OAAO,GAAG,OAAO,IAAI,OAAO,OAAO,CAAC;GACzC,MAAM,CAAC,IAAI,MAAM,aACb,CAAC,OAAO,IAAI,OAAO,OAAO,IAAI,MAAM,OAAO,CAAC,IAC5C,CAAC,OAAO,GAAG,OAAO,IAAI,OAAO,OAAO,IAAI,IAAI;GAIhD,OAAO;IACL,GAJQ,aACN,IAAI,UAAU,EAAE,EAAC,GAAI,UAAU,EAAE,EAAC,GAAI,WAAW,KAAK,MAAM,CAAC,EAAC,GAAI,UAAU,EAAE,EAAC,GAAI,WAAW,KAAK,MAAM,CAAC,EAAC,GAAI,UAAU,EAAE,EAAC,GAAI,UAAU,EAAE,EAAC,GAAI,UAAU,EAAE,MAC7J,IAAI,UAAU,EAAE,EAAC,GAAI,UAAU,EAAE,EAAC,GAAI,UAAU,EAAE,EAAC,GAAI,WAAW,KAAK,MAAM,CAAC,EAAC,GAAI,UAAU,EAAE,EAAC,GAAI,WAAW,KAAK,MAAM,CAAC,EAAC,GAAI,UAAU,EAAE,EAAC,GAAI,UAAU,EAAE;IAG/J,KAAK,CAAC,IAAI,EAAE;IACZ,OAAO,aAAa,IAAI,KAAK,KAAK;IAClC,QAAQ,EAAE,KAAK,MAAM,IAAI,KAAK,MAAM,CAAC;GACvC;EACF;EAEA,MAAM,KAAK,OAAO,IAAI,OAAO;EAC7B,MAAM,KAAK,OAAO,IAAI,OAAO;EAC7B,MAAM,SAAS,KAAK,MAAM,IAAI,EAAE,KAAK;EACrC,MAAM,UAAU,EACb,OAAO,IAAI,OAAO,KAAK,IAAK,KAAK,SAAU,SAAS,MACpD,OAAO,IAAI,OAAO,KAAK,IAAK,KAAK,SAAU,SAAS,GAAI;EAE3D,MAAM,UACJ,MACA,IACA,aACG;GACH,MAAM,KAAK,GAAG,KAAK,KAAK;GACxB,MAAM,KAAK,GAAG,KAAK,KAAK;GACxB,MAAM,OAAO,KAAK,MAAM,IAAI,EAAE,KAAK;GACnC,OAAO,CAAC,KAAK,KAAM,KAAK,OAAQ,UAAU,KAAK,KAAM,KAAK,OAAQ,QAAQ;EAC5E;EACA,MAAM,QAAQ,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC,GAAG,SAAS,OAAO,OAAO,CAAC;EACnE,MAAM,MAAM,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC,GAAG,SAAS,OAAO,OAAO,IAAI,IAAI;EAExE,OAAO;GACL,GAAA,IAFY,UAAU,MAAM,EAAE,EAAC,GAAI,UAAU,MAAM,EAAE,EAAC,GAAI,UAAU,QAAQ,EAAE,EAAC,GAAI,UAAU,QAAQ,EAAE,EAAC,GAAI,UAAU,IAAI,EAAE,EAAC,GAAI,UAAU,IAAI,EAAE;GAGjJ;GACA,OAAO,KAAK,MAAM,OAAO,IAAI,QAAQ,IAAI,OAAO,IAAI,QAAQ,EAAE;GAC9D,QAAQ,EACL,MAAM,KAAK,IAAI,QAAQ,KAAK,IAAI,MAAM,IACtC,MAAM,KAAK,IAAI,QAAQ,KAAK,IAAI,MAAM,CAAC;EAE5C;CACF;CAEA,SAAS,cAAc,OAAqB;EAC1C,MAAM,SAAU,MAAM,OAAmB,UAAU,yBAAyB;EAC5E,IAAI,CAAC,QAAQ;GACX,QAAA,QAAU;GACV;EACF;EACA,MAAM,EAAE,GAAG,MAAM,UAAU,OAAO,SAAS,SAAU,MAAM,aAAyB;EACpF,MAAM,OAAO,OAAO,aAAa,WAAW;EAC5C,QAAA,QACE,SAAS,OACL;GAAE,MAAM;GAAQ,OAAO,OAAO,OAAO,aAAa,WAAW,CAAC;GAAG;GAAG;EAAE,IACtE;GAAE,MAAM;GAAQ,OAAO,OAAO,IAAI;GAAG;GAAG;EAAE;CAClD;CAEA,SAAS,QAAQ,OAAmB;EAClC,MAAM,SAAU,MAAM,OAAmB,UAAU,aAAa;EAChE,IAAI,CAAC,QAAQ;GACX,SAAA,QAAW;GACX;EACF;EACA,MAAM,OAAO,OAAA,MAAO,OAAO,OAAO,aAAa,WAAW,CAAC;EAC3D,IAAI,CAAC,MAAM;EACX,SAAA,QAAW,KAAK;EAChB,YAAA,QAAc,MAAA,MAAM,KAAK,QAAS,KAAK,KAAK;CAC9C;CAEA,SAAS,eAAe;EACtB,IAAI,CAAC,OAAO,GAAG,OAAO;EACtB,QAAQ,OAAA,SAAU,CAAA,EAAA,CAAI,KAAK,UAAU;GACnC,MAAM,UAAU,OAAA,MAAO,QAAQ,SAAS,KAAK,UAAU,MAAM,EAAE;GAC/D,IAAI,CAAC,QAAQ,QAAQ,OAAO;GAC5B,MAAM,QAAQ,SACZ,KAAK,IAAI,KAAK,OAAO,GAAG,KAAK,IAAI,WAAW,kBAAkB,KAAK,KAAK,CAAC,IAAI,CAAC;GAChF,MAAM,KAAK,KAAK,IAAI,GAAG,QAAQ,KAAK,SAAS,KAAK,IAAI,KAAK,IAAI,CAAC,CAAC,IAAI;GACrE,MAAM,KAAK,KAAK,IAAI,GAAG,QAAQ,KAAK,SAAS,KAAK,IAAI,KAAK,IAAI,CAAC,CAAC,IAAI;GACrE,MAAM,KACJ,KAAK,IAAI,GAAG,QAAQ,KAAK,SAAS,KAAK,IAAI,KAAK,OAAO,CAAC,CAAC,IAAI,YAAY;GAC3E,MAAM,KACJ,KAAK,IACH,GAAG,QAAQ,KAAK,SAAS,KAAK,IAAI,KAAK,OAAO,IAAI,QAAQ,KAAK,WAAW,IAAI,KAAK,CAAC,CACtF,IAAI;GACN,OAAAC,YAAA,KAAA;IAAA,OACU,MAAM;IAAE,aAAA;GAAA,GAAA,CAAAA,YAAA,QAAAC,cAAA;IAAA,KAET,UAAU,EAAE;IAAC,KACb,UAAU,EAAE;IAAC,SACT,UAAU,KAAK,EAAE;IAAC,UACjB,UAAU,KAAK,EAAE;IAAC,MACtB;GAAC,GACD,IAAI,MACN,iBAAiB,OACjB,eAAe,OAAO,YAAA,MAAY,IAAI,MAAM,EAAE,KAAK,OAAO,WAAW,CACvE,CAAC,GAAA,IAAA,GAAAD,YAAA,QAAAC,cAAA;IAAA,KAGE,UAAU,KAAK,EAAE;IAAC,KAClB,UAAU,KAAK,cAAc,IAAI,CAAC;IAAC,qBAAA;GAAA,GAElC,IAAI,MAAM,iBAAiB,UAAU,CAAC,GAAA,CAEzC,aAAa,MAAM,OAAO,KAAK,KAAK,EAAE,CAAC,CAAA,CAAA,CAAA;EAIhD,CAAC;CACH;CAEA,SAAS,cAAc;EACrB,MAAM,aAAa,OAAA,SAAU,QAAQ;EACrC,OAAO,WAAA,MAAW,KAAK,MAAM,UAAU;GACrC,MAAM,SAAS,WAAA,MAAW,IAAI,KAAK,MAAM;GACzC,MAAM,SAAS,WAAA,MAAW,IAAI,KAAK,MAAM;GACzC,IAAI,WAAW,QAAQ,OAAO;GAC9B,MAAM,SAAS,QAAA,MAAQ;GACvB,MAAM,QAAQ,WAAW,KAAA,KAAa,UAAA,UAAc,IAAI,MAAM,IAAK,IAAI,SAAM,UAAA;GAC7E,MAAM,QAAQ,KAAK,QAAQ,aAAa,KAAK,OAAO,CAAC,IAAI,OAAO;GAChE,MAAM,EAAE,GAAG,KAAK,OAAO,WAAW,aAAa,QAAQ,QAAQ,UAAU;GACzE,MAAM,QAAQ,UAAA,UAAc,QAAQ,KAAK,WAAM,SAAA,SAAiB,KAAK,WAAM,SAAA;GAC3E,MAAM,YAAY,QAAQ;GAC1B,MAAM,kBAAkB;IACtB,MAAM,CAAC,IAAI,MAAM;IACjB,MAAM,OAAO,KAAK,KAAK,IAAI,KAAK,IAAI;IACpC,MAAM,OAAO,KAAK,KAAK,IAAI,KAAK,IAAI;IACpC,MAAM,OAAO,YAAY;IACzB,MAAM,KAAK,CAAC,KAAK,IAAI,KAAK,IAAI;IAC9B,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI;IAC7B,OAAO,IAAI,UAAU,IAAI,EAAC,GAAI,UAAU,IAAI,EAAC,GAAI,UAAU,KAAK,EAAE,EAAC,GAAI,UAAU,KAAK,EAAE,EAAC,GAAI,UAAU,KAAK,EAAE,EAAC,GAAI,UAAU,KAAK,EAAE,EAAC;GACvI;GACA,OAAAD,YAAA,KAAAC,cAAA,EAAA,OAES,GAAG,KAAK,OAAM,IAAK,KAAK,OAAM,GAAI,QAAO,GAC1C,IAAI,MAAM,iBAAiB,MAAM,SAAS,eAAe,MAAM,CAAC,GAAA;IAAAD,YAAA,QAAAC,cAAA;KAAA,aAAA;KAAA,aAIvD;KAAK,KACb;KAAC,gBACU,UAAU,KAAK;IAAC,GAC1B,IAAI,MACN,iBAAiB,MACjB,eAAe,OAAO,KAAK,GAC3B,KAAK,UAAU,iBAAiB,UAClC,CAAC,GAAA,IAAA;IAEF,cAAUD,YAAA,QAAAC,cAAA,EAAA,KAAa,UAAU,EAAC,GAAM,IAAI,MAAM,eAAe,KAAK,KAAK,CAAC,CAAC,GAAA,IAAA;IAC7E,KAAK,SAAKD,YAAA,KAAAC,cAAA,EAAA,aAEI,aAAa,UAAU,OAAO,EAAE,EAAC,GAAI,UAAU,OAAO,EAAE,EAAC,GAAG,GACnE,IAAI,MAAM,eAAe,SAAS,CAAC,GAAA,CAAAD,YAAA,QAAAC,cAAA;KAAA,KAGlC,CAAC,kBAAkB,KAAK,KAAK,IAAI,IAAI;KAAC,KACtC;KAAE,SACE,kBAAkB,KAAK,KAAK,IAAI;KAAC,UAChC;KAAE,MACN;IAAC,GACD,IAAI,MAAM,iBAAiB,YAAY,CAAC,GAAA,IAAA,GAAAD,YAAA,QAAAC,cAAA;KAAA,eAAA;KAAA,qBAAA;IAAA,GAKxC,IAAI,MAAM,iBAAiB,SAAS,CAAC,GAAA,CAExC,KAAK,KAAK,CAAA,CAAA,CAAA;GAGhB,CAAA;EAGP,CAAC;CACH;CAEA,SAAS,cAAc;EACrB,OAAO,OAAA,MAAO,KAAK,MAAM,UAAU;GACjC,MAAM,QAAQ,UAAA,UAAc,QAAQ,CAAC,UAAA,MAAU,IAAI,KAAK,EAAE;GAC1D,MAAM,QAAQ,KAAK,SAAS;GAC5B,OAAAD,YAAA,KAAAC,cAAA;IAAA,OAES,KAAK;IAAE,aAAA;IAAA,aAED;IAAK,aACL,aAAa,UAAU,KAAK,CAAC,EAAC,GAAI,UAAU,KAAK,CAAC,EAAC;GAAG,GAC7D,IAAI,MACN,iBAAiB,MACjB,YAAA,SAAe,iBAAiB,WAChC,SAAS,eAAe,MAC1B,CAAC,GAAA;IAAAD,YAAA,QAAAC,cAAA,EAAA,KAGI,UAAU,OAAO,KAAK,IAAI,EAAC,GAC1B,IAAI,MACN,iBAAiB,WACjB,eAAe,KAAK,KAAK,IAAI,GAC7B,SAAA,UAAa,KAAK,MAAM,iBAAiB,YAC3C,CAAC,GAAA,IAAA;IAAAD,YAAA,QAAAC,cAAA;KAAA,KAGE,KAAK,OAAO,IAAI;KAAC,eAAA;KAAA,qBAAA;IAAA,GAGhB,IAAI,MAAM,iBAAiB,WAAW,eAAe,IAAI,CAAC,GAAA,CAE7D,aAAa,KAAK,OAAO,SAAS,CAAC,CAAA;IAErC,KAAK,YAAQD,YAAA,QAAAC,cAAA;KAAA,KAEP,KAAK,OAAO,IAAI,IAAI;KAAI,eAAA;KAAA,qBAAA;IAAA,GAGvB,IAAI,MAAM,iBAAiB,cAAc,eAAe,IAAI,CAAC,GAAA,CAEhE,aAAa,KAAK,UAAU,SAAS,CAAC,CAAA;GAE1C,CAAA;EAGP,CAAC;CACH;CAEA,MAAM,YAA6B;EACjC,MAAM,UAAO,QAAA;EACb,IAAI,CAAA,QAAA,SAAY,CAAC,SAAS,OAAO;EACjC,IAAI,QAAQ,SAAS,QAAQ;GAC3B,MAAM,OAAO,OAAA,MAAO,QAAQ;GAC5B,IAAI,CAAC,MAAM,OAAO;GAClB,OAAO;IACL,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,SAAS,aAAa,KAAK,OAAO,CAChC,GAAI,KAAK,WAAW,CAAC;KAAE,OAAO,KAAK;KAAU,OAAO;KAAe,OAAO;IAAG,CAAC,IAAI,CAAA,GAClF;KAAE,OAAO,KAAK,YAAY,OAAA,MAAO,IAAI,KAAK,EAAE,KAAK,CAAC;KAAG,OAAO,KAAK;KAAM,OAAO;IAAG,CAAC,CACnF;GACH;EACF;EACA,MAAM,OAAO,WAAA,MAAW,QAAQ;EAChC,IAAI,CAAC,MAAM,OAAO;EAClB,MAAM,SAAS,WAAA,MAAW,IAAI,KAAK,MAAM;EACzC,OAAO;GACL,GAAG,QAAQ;GACX,GAAG,QAAQ;GACX,SAAS,aACP,KAAK,eAAe,OAAO,OAAO,WAAA,MAAW,IAAI,KAAK,MAAM,CAAC,CAAE,KAAK,GACpE,CACE,GAAI,KAAK,UAAU,KAAA,IACf,CAAA,IACA,CAAC;IAAE,OAAO,KAAK;IAAY,OAAO,OAAO;IAAM,OAAO,UAAU,KAAK,KAAK;GAAE,CAAC,GACjF,GAAI,KAAK,QAAQ,CAAC;IAAE,OAAO,KAAK;IAAO,OAAO;IAAe,OAAO;GAAG,CAAC,IAAI,CAAA,CAAG,CAEnF;EACF;CACF;CAEA,SAAS,aAAa;EACpB,OAAAD,YAAA,OAAAC,cAEQ,IAAI,MAAM,iBAAiB,QAAQ,GAClC,KAAA,QAAO,KAAK,gBAAgB,CAAC,GAAC;GAAA,OAAA,OAAA,OAAA,OAAA,MAC7B,YAAa,SAAS,QAAQ;GAA8B,iBAAA,OAAA,OAAA,OAAA,MAClD,UAAwB;IAEtC,IAAA,KAAA,OAAW,KAAK,cAAc,cAAgD,KAAK;IACnF,cAAc,KAAK;GACrB;GAAC,kBAAA,OAAA,OAAA,OAAA,WACsB,QAAA,QAAU;EAAK,CAAA,GAAA;GAAAD,YAAA,OAAAC,cAAA;IAAA,SAG7B,KAAK;IAAK,UACT,KAAK;GAAM,GACf,IAAI,MAAM,eAAe,GAAG,GAAC,EAAA,WACxB,QAAO,CAAA,GAAA,CAAAD,YAAA,QAAAC,cAAA;IAAA,aAAA;IAAA,SAIP,KAAK;IAAK,UACT,KAAK;GAAM,GACf,IAAI,MAAM,iBAAiB,UAAU,CAAC,GAAA,IAAA,GAAAD,YAAA,KAAA,EAAA,aAG/B,aAAa,UAAU,KAAK,CAAC,EAAC,GAAI,UAAU,KAAK,CAAC,EAAC,UAAW,UAAU,KAAK,KAAK,EAAC,GAAG,GAAA,CAAAA,YAAA,KAE1F,IAAI,MAAM,eAAe,MAAM,GAAC;IACpC,aAAa;IACb,YAAY;IACZ,YAAY;GAAC,CAAA,CAAA,CAAA,CAAA,CAAA;GAAAA,YAAA,iBAAA;IAAA,OAIE,IAAI;IAAC,SAAS,KAAK;GAAK,GAAA,IAAA;GAE7C,UAAA,SAAAA,YAAA,QACW,IAAI,MAAM,iBAAiB,SAAS,GAAC,CAAG,KAAK,kBAAkB,CAAA;EAC1E,CAAA;CAGP;CAEA,aAAOA,YAAA,YAAAC,cAEC,MAAI;EAAA,QAAA,KAAA;EAAA,UAAA,OAAA;EAAA,UAAA,OAAA,OAAA,OAAA,KAGA,CAAA;EAAE,cAAA,OAAA,OAAA,OAAA,KACE,CAAA;EAAE,kBAAA,OAAA,OAAA,OAAA,WACQ,CAAC;EAAC,WAAA,QAAA;EAAA,YAAAD,YAAA,UAAA,EAAA,MAEA,iBAAiB,SAAQ,GAAA,IAAA;EAAA,WACxC,MAAA,MAAM,WAAW;EAAC,SAAA,MAAA;EAAA,aAEhB,YAAA,SAAe;EAAI,SACvB;GACL,SAAS,CAAC,KAAK,WAAW,KAAA,QAAO,GAAG,KAAK,WAAU,GAAA,KAAA,MAAA,KAAc,KAAK,UAAU;GAChF,MAAM,WAAA,MAAW,KAAK,UAAU;IAC9B,QAAQ,KAAK,eAAe,QAAQ,KAAK,MAAM,GAAG,QAAQ,KAAK,MAAM,CAAC;IACtE,OAAO,CACL,CACE,KAAK,UAAU,KAAA,IAAY,KAAK,OAAO,OAAO,KAAK,OAAK,YAAA,KAAa,GACrE,KAAK,SAAS,EAAE,CACjB,CACE,OAAO,OAAO,CAAC,CACf,KAAK,KAAK,KAAK,KAAK,UAAU;GAErC,EAAE;EACJ;EAAC,WACQ,KAAK;EAAG,QACX,KAAK,QAAQ,WAAW,IAAI;CAAI,CAAA,GAAA,IAAA;AAG5C,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/charts/LineChart.d.ts

@@ -1,27 +1,5 @@
-/**
- * 折线图：每个系列一条线，类目（通常是时间）沿横轴排开；悬停时十字线在各条线上标出当前点，提示框列出各系列的值。
- *
- *   <LineChart
- *     aria-label="月度销售趋势"
- *     data={months}
- *     index="month"
- *     series={[{ key: 'planned', label: '预期销售' }, { key: 'actual', label: '实际销售' }]}
- *     dots="hollow"
- *   />
- *
- * 空值（null、undefined）处断开；颜色、坐标轴、提示框、图例、读屏的数据表见 XYChart。
- */
-import { CurveType } from '@unovis/ts';
+import type { LineCurves } from './shape';
 import { type XYChartProps } from './XYChart';
-/** 线的形状 */
-export interface LineCurves {
-    /** 折线：相邻的点直线相连（默认） */
-    linear: unknown;
-    /** 平滑曲线：不会越过数据点（单调插值），趋势更柔和 */
-    monotone: unknown;
-    /** 阶梯：值保持到下一个点才跳变，适合离散的状态、价格档位 */
-    step: unknown;
-}
 /** 数据点的样式 */
 export interface LineDots {
     /** 不画数据点（默认），只在悬停时由十字线标出 */
@@ -40,11 +18,5 @@ export interface LineChartProps<T extends object> extends XYChartProps<T> {
     /** 线宽（px），默认 2 */
     lineWidth?: number;
 }
-/** 曲线的形状 → Unovis 的 CurveType（折线图、面积图共用） */
-export declare const CURVES: {
-    linear: CurveType.Linear;
-    monotone: CurveType.MonotoneX;
-    step: CurveType.StepAfter;
-};
 /** 折线图：直线、平滑或阶梯，可带数据点 */
 export declare const LineChart: <T extends object>(props: LineChartProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/charts/LineChart.js

@@ -1,33 +1,10 @@
-import { colors } from "../config/theme/tokens.js";
+import { chartDots, chartLines } from "./marks.js";
 import { XYChart } from "./XYChart.js";
 import { computed, createVNode } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import { CurveType, Line, Scatter } from "@unovis/ts";
 //#region src/charts/LineChart.tsx
-/**
-* 折线图：每个系列一条线，类目（通常是时间）沿横轴排开；悬停时十字线在各条线上标出当前点，提示框列出各系列的值。
-*
-*   <LineChart
-*     aria-label="月度销售趋势"
-*     data={months}
-*     index="month"
-*     series={[{ key: 'planned', label: '预期销售' }, { key: 'actual', label: '实际销售' }]}
-*     dots="hollow"
-*   />
-*
-* 空值（null、undefined）处断开；颜色、坐标轴、提示框、图例、读屏的数据表见 XYChart。
-*/
-/** 线的形状 */
 /** 数据点的样式 */
 /** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
-/** 曲线的形状 → Unovis 的 CurveType（折线图、面积图共用） */
-var CURVES = {
-	linear: CurveType.Linear,
-	monotone: CurveType.MonotoneX,
-	step: CurveType.StepAfter
-};
-/** 数据点的直径（px） */
-var DOT_SIZE = 8;
 /** 折线图：直线、平滑或阶梯，可带数据点 */
 var LineChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const _cache = [];
@@ -43,35 +20,10 @@ var LineChart = /*#__PURE__*/ _component((_props, _ctx) => {
 			right: 12,
 			top: 8
 		},
-		components: ({ series, x, y, instance }) => {
-			const line = instance("line", () => new Line({
-				x,
-				y: []
-			}));
-			line.setConfig({
-				x,
-				y: series.map(y),
-				color: (_rows, position) => series[position]?.color,
-				curveType: CURVES[curve.value],
-				lineWidth: lineWidth.value
-			});
-			if (dots.value === "none") return [line];
-			return [line, ...series.map((item) => {
-				const scatter = instance(`dots:${item.key}`, () => new Scatter({
-					x,
-					y: () => 0
-				}));
-				scatter.setConfig({
-					x,
-					y: y(item),
-					size: DOT_SIZE,
-					color: dots.value === "hollow" ? colors.surface : item.color,
-					strokeColor: item.color,
-					strokeWidth: dots.value === "hollow" ? 2 : 0
-				});
-				return scatter;
-			})];
-		}
+		render: (context) => [chartLines(context, context.series, {
+			curve: curve.value,
+			width: lineWidth.value
+		}), dots.value !== "none" && chartDots(context, context.series, dots.value)]
 	}));
 	return () => createVNode(XYChart, mergeJsxProps(rest, {
 		"_hiddenSeries": hiddenSeries.value,
@@ -89,6 +41,6 @@ var LineChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	]
 });
 //#endregion
-export { CURVES, LineChart };
+export { LineChart };
 
 //# sourceMappingURL=LineChart.js.map

package/dist/charts/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/LineChart.tsx"],"sourcesContent":["/**\n * 折线图：每个系列一条线，类目（通常是时间）沿横轴排开；悬停时十字线在各条线上标出当前点，提示框列出各系列的值。\n *\n *   <LineChart\n *     aria-label=\"月度销售趋势\"\n *     data={months}\n *     index=\"month\"\n *     series={[{ key: 'planned', label: '预期销售' }, { key: 'actual', label: '实际销售' }]}\n *     dots=\"hollow\"\n *   />\n *\n * 空值（null、undefined）处断开；颜色、坐标轴、提示框、图例、读屏的数据表见 XYChart。\n */\nimport { CurveType, Line, Scatter } from '@unovis/ts';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { colors } from '../config/theme/tokens';\nimport { XYChart, type XYChartKind, type XYChartProps } from './XYChart';\n\n/** 线的形状 */\nexport interface LineCurves {\n  /** 折线：相邻的点直线相连（默认） */\n  linear: unknown;\n  /** 平滑曲线：不会越过数据点（单调插值），趋势更柔和 */\n  monotone: unknown;\n  /** 阶梯：值保持到下一个点才跳变，适合离散的状态、价格档位 */\n  step: unknown;\n}\n\n/** 数据点的样式 */\nexport interface LineDots {\n  /** 不画数据点（默认），只在悬停时由十字线标出 */\n  none: unknown;\n  /** 实心圆点 */\n  filled: unknown;\n  /** 空心圆点：描边是系列颜色，中间是背景色 */\n  hollow: unknown;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上；aria-label 是图表的名称 */\nexport interface LineChartProps<T extends object> extends XYChartProps<T> {\n  /** 线的形状，默认 linear */\n  curve?: keyof LineCurves;\n  /** 数据点，默认 none */\n  dots?: keyof LineDots;\n  /** 线宽（px），默认 2 */\n  lineWidth?: number;\n}\n\n/** 曲线的形状 → Unovis 的 CurveType（折线图、面积图共用） */\nexport const CURVES = {\n  linear: CurveType.Linear,\n  monotone: CurveType.MonotoneX,\n  step: CurveType.StepAfter,\n} satisfies Record<keyof LineCurves, CurveType>;\n\n/** 数据点的直径（px） */\nconst DOT_SIZE = 8;\n\n/** 折线图：直线、平滑或阶梯，可带数据点 */\nexport const LineChart = _component(\n  <T extends object>({\n    curve = 'linear',\n    dots = 'none',\n    lineWidth = 2,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    ...rest\n  }: LineChartProps<T>) => {\n    const kind = _derived<XYChartKind<T>>({\n      crosshairDots: true,\n      // 两端的点不贴着绘图区边缘，圆点与十字线的圆点能完整显示\n      padding: { left: 12, right: 12, top: 8 },\n      components: ({ series, x, y, instance }) => {\n        const line = instance('line', () => new Line<T>({ x, y: [] }));\n        line.setConfig({\n          x,\n          y: series.map(y),\n          color: (_rows: T[], position: number) => series[position]?.color,\n          curveType: CURVES[curve],\n          lineWidth,\n        });\n        if (dots === 'none') return [line];\n        const points = series.map((item) => {\n          const scatter = instance(`dots:${item.key}`, () => new Scatter<T>({ x, y: () => 0 }));\n          scatter.setConfig({\n            x,\n            y: y(item),\n            size: DOT_SIZE,\n            color: dots === 'hollow' ? colors.surface : item.color,\n            strokeColor: item.color,\n            strokeWidth: dots === 'hollow' ? 2 : 0,\n          });\n          return scatter;\n        });\n        return [line, ...points];\n      },\n    });\n    return () => <XYChart {...rest} _hiddenSeries={hiddenSeries} kind={kind} />;\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAa,SAAS;CACpB,QAAQ,UAAU;CAClB,UAAU,UAAU;CACpB,MAAM,UAAU;AAClB;;AAGA,IAAM,WAAW;;AAGjB,IAAa,YAAY,0BACvB,QAAA,SAMyB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SALf,QAAQ;CAAA,MAAA,OAAAA,aAAA,QAAA,QACT,MAAM;CAAA,MAAA,YAAAA,aAAA,QAAA,aACD,CAAC;CAAA,MAAA,eAAAC,SAAA,QAAA,uBACqC,CAAA,GAAE,KAAA,IAAA;CAAA,MACjD,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAIC,gBAA4B;EACpC,eAAe;EAEf,SAAS;GAAE,MAAM;GAAI,OAAO;GAAI,KAAK;EAAE;EACvC,aAAa,EAAE,QAAQ,GAAG,GAAG,eAAe;GAC1C,MAAM,OAAO,SAAS,cAAc,IAAI,KAAQ;IAAE;IAAG,GAAG,CAAA;GAAG,CAAC,CAAC;GAC7D,KAAK,UAAU;IACb;IACA,GAAG,OAAO,IAAI,CAAC;IACf,QAAQ,OAAY,aAAqB,OAAO,SAAS,EAAE;IAC3D,WAAW,OAAM,MAAA;IACjB,WAAS,UAAA;GACX,CAAC;GACD,IAAI,KAAA,UAAS,QAAQ,OAAO,CAAC,IAAI;GAajC,OAAO,CAAC,MAAM,GAZC,OAAO,KAAK,SAAS;IAClC,MAAM,UAAU,SAAS,QAAQ,KAAK,aAAa,IAAI,QAAW;KAAE;KAAG,SAAS;IAAE,CAAC,CAAC;IACpF,QAAQ,UAAU;KAChB;KACA,GAAG,EAAE,IAAI;KACT,MAAM;KACN,OAAO,KAAA,UAAS,WAAW,OAAO,UAAU,KAAK;KACjD,aAAa,KAAK;KAClB,aAAa,KAAA,UAAS,WAAW,IAAI;IACvC,CAAC;IACD,OAAO;GACT,CACiB,CAAM;EACzB;CACF,EAAC;CACD,aAAOC,YAAA,SAAAC,cAAmB,MAAI;EAAA,iBAAA,aAAA;EAAA,0BAAA,OAAA,OAAA,OAAA,MAAA,WAAA,aAAA,QAAA;EAAA,QAAA,KAAA;CAAA,CAAA,GAAA,IAAA;AAChC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"LineChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/LineChart.tsx"],"sourcesContent":["/**\n * 折线图：每个系列一条线，类目（通常是时间）沿横轴排开；悬停时十字线在各条线上标出当前点，提示框列出各系列的值。\n *\n *   <LineChart\n *     aria-label=\"月度销售趋势\"\n *     data={months}\n *     index=\"month\"\n *     series={[{ key: 'planned', label: '预期销售' }, { key: 'actual', label: '实际销售' }]}\n *     dots=\"hollow\"\n *   />\n *\n * 空值（null、undefined）处断开；颜色、坐标轴、提示框、图例、读屏的数据表见 XYChart。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { chartDots, chartLines } from './marks';\nimport type { LineCurves } from './shape';\nimport { XYChart, type XYChartKind, type XYChartProps } from './XYChart';\n\n/** 数据点的样式 */\nexport interface LineDots {\n  /** 不画数据点（默认），只在悬停时由十字线标出 */\n  none: unknown;\n  /** 实心圆点 */\n  filled: unknown;\n  /** 空心圆点：描边是系列颜色，中间是背景色 */\n  hollow: unknown;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上；aria-label 是图表的名称 */\nexport interface LineChartProps<T extends object> extends XYChartProps<T> {\n  /** 线的形状，默认 linear */\n  curve?: keyof LineCurves;\n  /** 数据点，默认 none */\n  dots?: keyof LineDots;\n  /** 线宽（px），默认 2 */\n  lineWidth?: number;\n}\n\n/** 折线图：直线、平滑或阶梯，可带数据点 */\nexport const LineChart = _component(\n  <T extends object>({\n    curve = 'linear',\n    dots = 'none',\n    lineWidth = 2,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    ...rest\n  }: LineChartProps<T>) => {\n    const kind = _derived<XYChartKind<T>>({\n      crosshairDots: true,\n      // 两端的点不贴着绘图区边缘，圆点与十字线的圆点能完整显示\n      padding: { left: 12, right: 12, top: 8 },\n      render: (context) => [\n        chartLines(context, context.series, { curve, width: lineWidth }),\n        dots !== 'none' && chartDots(context, context.series, dots),\n      ],\n    });\n    return () => <XYChart {...rest} _hiddenSeries={hiddenSeries} kind={kind} />;\n  },\n);\n"],"mappings":";;;;;;;;AAuCA,IAAa,YAAY,0BACvB,QAAA,SAMyB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SALf,QAAQ;CAAA,MAAA,OAAAA,aAAA,QAAA,QACT,MAAM;CAAA,MAAA,YAAAA,aAAA,QAAA,aACD,CAAC;CAAA,MAAA,eAAAC,SAAA,QAAA,uBACqC,CAAA,GAAE,KAAA,IAAA;CAAA,MACjD,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAIC,gBAA4B;EACpC,eAAe;EAEf,SAAS;GAAE,MAAM;GAAI,OAAO;GAAI,KAAK;EAAE;EACvC,SAAS,YAAY,CACnB,WAAW,SAAS,QAAQ,QAAQ;GAAE,OAAK,MAAA;GAAE,OAAK,UAAA;EAAY,CAAC,GAC/D,KAAA,UAAS,UAAU,UAAU,SAAS,QAAQ,QAAM,KAAA,KAAM,CAAC;CAE/D,EAAC;CACD,aAAOC,YAAA,SAAAC,cAAmB,MAAI;EAAA,iBAAA,aAAA;EAAA,0BAAA,OAAA,OAAA,OAAA,MAAA,WAAA,aAAA,QAAA;EAAA,QAAA,KAAA;CAAA,CAAA,GAAA,IAAA;AAChC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/charts/MapChart.d.ts

@@ -1,40 +1,15 @@
-/**
- * 地图：按区域着色（分省的销售额、各国的采购额），标出地点（工厂、供应商）与它们之间的流向。
- * 地理数据是 TopoJSON：Unovis 自带中国省份、世界、美国等（`@unovis/ts/maps`），也可以用自己的。
- *
- *   import { ChinaTopoJSON } from '@unovis/ts/maps';
- *   <MapChart
- *     aria-label="各省销售额"
- *     topology={ChinaTopoJSON}
- *     feature="provinces"
- *     areas={[{ id: 'CN-JS', label: '江苏', value: 623 }, …]}   // id 是地图要素的 id
- *     points={[{ id: 'sh', label: '上海组装', longitude: 121.47, latitude: 31.23, value: 860 }]}
- *     links={[{ from: 'xa', to: 'sh', value: 120 }]}
- *     bins={5}
- *     areaLabels
- *   />
- *
- * 投影：默认按地理数据的范围选——一个国家、一个地区用以它为中心的等积圆锥投影（中国地图常用的 Albers，正着、不歪），
- * 跨了大半个地球时用 Natural Earth；也可以指定 mercator、equalEarth、orthographic（地球仪）或自己的 d3 投影。
- *
- * 着色：sequential（默认）按数值深浅；diverging 以 midpoint 为界两头两种颜色（同比的涨跌）；
- * bins 分成几档（分级着色，图例是几个色块），不写时连续着色（图例是色带）；区域写了 color 时按它（分类着色）。
- * 没有数据的区域是底色。地点：value 决定大小（面积按比例），color、shape 决定颜色与形状；名字自动避让
- * （换方位、挤时往外退并画引线，数值大的先放，放不下的悬停看；压住名字、地点的区域名藏起来）；
- * links 是地点之间的流向，粗细按 value，flow 时有流动的粒子。
- * zoomable 时可以拖动、按住 Ctrl 滚轮缩放，右上角有放大、缩小、复位的按钮。悬停看名称与数值；读屏的数据表列出各区域、地点与流向。
- */
-import { type TopoJSONMapConfigInterface } from '@unovis/ts';
 import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
-import type { VNodeChild } from 'vue';
+import { type VNodeChild } from 'vue';
 import { type NumericFormat } from '../config/lang/format';
 import { type NumericValue } from '../utils/data/numeric';
 import type { PartProps } from '../utils/props';
 import { type ChartFrameParts } from './frame';
+import { type MapGeoProjection } from './geo/projection';
+import { type MapTopology } from './geo/topojson';
 import { type ChartColor } from './series';
 /** 一个区域的数据 */
 export interface MapArea {
-    /** 地图要素的 id（Unovis 的中国省份是 'CN-JS' 这样的写法） */
+    /** 地图要素的 id（中国省份是 'CN-JS' 这样的写法，世界各国是 ISO 两位代码） */
     id: string;
     /** 显示的名称：提示框、区域名、数据表 */
     label: string;
@@ -47,7 +22,7 @@ export interface MapArea {
 export interface MapPoint {
     /** 标识：流向的 from、to 指向它 */
     id: string;
-    /** 名称：写在点下方 */
+    /** 名称：写在点旁边 */
     label: string;
     /** 经度 */
     longitude: number;
@@ -81,18 +56,18 @@ export interface MapProjections {
     naturalEarth: unknown;
     /** Equal Earth：世界地图，面积准确 */
     equalEarth: unknown;
+    /** 等距圆柱：经纬度直接当横纵坐标，经纬网是方格 */
+    equirectangular: unknown;
     /** 正射（地球仪）：以数据为中心看半个地球 */
     orthographic: unknown;
 }
-/** d3 的投影（TopoJSONMap 的 projection） */
-export type MapGeoProjection = NonNullable<TopoJSONMapConfigInterface<MapArea>['projection']>;
 /** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
 export interface MapChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {
-    /** 地理数据（TopoJSON），如 `@unovis/ts/maps` 的 ChinaTopoJSON、WorldMapTopoJSON */
-    topology: NonNullable<TopoJSONMapConfigInterface<MapArea>['topojson']>;
+    /** 地理数据（TopoJSON），如 `@zerodep-dev/vue-tsx-pro-ui/maps` 的 chinaProvinces、worldCountries */
+    topology: MapTopology;
     /** 画哪一组要素（TopoJSON 的 objects 里的名字），如中国省份是 'provinces'、世界是 'countries' */
     feature: string;
-    /** 投影：预设的名字，或 d3 的投影；不写时按数据的范围选 conic 或 naturalEarth */
+    /** 投影：预设的名字，或自己的投影函数（[经度, 纬度] → [x, y]）；不写时按数据的范围选 conic 或 naturalEarth */
     projection?: keyof MapProjections | MapGeoProjection;
     /** 投影的中心 [经度, 纬度]：中央经线（世界地图写 [150, 0] 以太平洋为中心），orthographic 还用纬度；不写时取地理数据范围的中心 */
     center?: readonly [number, number];
@@ -125,7 +100,7 @@ export interface MapChartProps extends PartProps<'div', 'role' | 'aria-busy'>, C
      * @default 400
      */
     height?: number | string;
-    /** 可以拖动、滚轮缩放，右上角有放大、缩小、复位的按钮；默认关（不抢页面的滚动） */
+    /** 可以拖动、按住 Ctrl 滚轮缩放，右上角有放大、缩小、复位的按钮；默认关（不抢页面的滚动） */
     zoomable?: boolean;
     /** 加载中：绘图区显示骨架 */
     loading?: boolean;
@@ -140,9 +115,17 @@ export interface MapChartProps extends PartProps<'div', 'role' | 'aria-busy'>, C
 }
 /** MapChart 的样式 */
 export declare const mapChartStyles: Readonly<{
-    readonly root: css.CompiledStyles;
     readonly skeleton: css.CompiledStyles;
-    readonly pointLabels: css.CompiledStyles;
+    readonly viewport: css.CompiledStyles;
+    readonly feature: css.CompiledStyles;
+    readonly featureHover: css.CompiledStyles;
+    readonly sphere: css.CompiledStyles;
+    readonly link: css.CompiledStyles;
+    readonly particle: css.CompiledStyles;
+    readonly point: css.CompiledStyles;
+    readonly clickable: css.CompiledStyles;
+    readonly pointLabel: css.CompiledStyles;
+    readonly areaLabel: css.CompiledStyles;
     readonly leader: css.CompiledStyles;
     readonly zoom: css.CompiledStyles;
     readonly wheelHint: css.CompiledStyles;
@@ -153,15 +136,5 @@ export declare const mapChartStyles: Readonly<{
     readonly swatch: css.CompiledStyles;
     readonly swatchColor: (color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
 }>;
-type MapTopology = MapChartProps['topology'];
-/**
- * 简化地理数据：去掉与前后两点围成的三角形面积不到 minArea（坐标单位的平方，经纬度是平方度）的点
- * （Visvalingam，topojson-simplify）。相邻区域共用的边界一起简化，不会出现缝隙；各段弧的两端总保留。
- * minArea 按 2 的整数次幂分档缓存：绘图区大小变一点不重算。
- */
-export declare function simplifyTopology(topology: MapTopology, minArea: number): MapTopology;
-/** TopoJSON 的经纬度范围 [西, 南, 东, 北]：有 bbox 用它，否则解出各段弧的坐标（量化的弧是逐点的差值） */
-export declare function topologyBounds(topology: MapChartProps['topology']): [number, number, number, number];
 /** 地图 */
 export declare const MapChart: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<MapChartProps>;
-export {};