@antv/gpt-vis 1.0.0 → 1.0.1

package/README.md

@@ -24,7 +24,7 @@ AI-native visualization library for the LLM era. Framework-agnostic, ready to us
 </div>
 
 <div align="center">
-  <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*k21VQY6NgAwAAAAAWAAAAAgAemJ7AQ/fmt.avif" width="100%" />
+  <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*yNtZT47dH1kAAAAAgBAAAAgAemJ7AQ/fmt.webp" width="100%" alt="GPT-Vis Hero Image" />
 </div>
 
 <br/>
@@ -391,6 +391,71 @@ document.getElementById('content').innerHTML = marked.parse(markdown);
 
 </details>
 
+## 🧩 Shadcn/ui
+
+Copy GPT-Vis React components directly into your project via shadcn CLI — full source control, fully customizable.
+
+### Base Component
+
+The universal `GPTVis` component accepts vis syntax strings or config objects for all 26 chart types:
+
+```bash
+npx shadcn@latest add @gpt-vis/gpt-vis
+```
+
+```tsx
+import { GPTVis } from '@/components/ui/gpt-vis';
+
+<GPTVis
+  content="vis line
+data
+  - time 2020
+    value 100
+  - time 2021
+    value 120
+  - time 2022
+    value 150
+title Sales Trend"
+  theme="academy"
+/>;
+```
+
+### Typed Chart Components
+
+Each chart type has its own component with a typed `config` prop — JSON only, chart-specific TypeScript validation:
+
+```bash
+npx shadcn@latest add @gpt-vis/line
+```
+
+```tsx
+import { Line } from '@/components/ui/line';
+
+<Line
+  config={{
+    data: [
+      { time: '2020', value: 100 },
+      { time: '2021', value: 120 },
+      { time: '2022', value: 150 },
+    ],
+    title: 'Sales Trend',
+    axisXTitle: 'Year',
+  }}
+  height={400}
+/>;
+```
+
+All 26 chart types are available. Install any by name:
+
+```bash
+npx shadcn@latest add @gpt-vis/pie
+npx shadcn@latest add @gpt-vis/bar
+npx shadcn@latest add @gpt-vis/mindmap
+# ...and more
+```
+
+Each typed component automatically bundles the base `GPTVis` component as a dependency. Props like `width`, `height`, `theme`, `wrapper`, `locale`, `className`, and `containerStyle` are the same across all components.
+
 ## 🤖 AI Ecosystem
 
 GPT-Vis provides a complete AI integration solution:

package/README.zh-CN.md

@@ -24,7 +24,7 @@
 </div>
 
 <div align="center">
-  <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*k21VQY6NgAwAAAAAWAAAAAgAemJ7AQ/fmt.avif" width="100%" />
+  <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*yNtZT47dH1kAAAAAgBAAAAgAemJ7AQ/fmt.webp" width="100%" alt="GPT-Vis Hero Image" />
 </div>
 
 <br/>
@@ -391,6 +391,71 @@ document.getElementById('content').innerHTML = marked.parse(markdown);
 
 </details>
 
+## 🧩 Shadcn/ui
+
+通过 shadcn CLI 将 GPT-Vis React 组件直接复制到你的项目中 — 完全源代码控制，高度可定制。
+
+### 基础组件
+
+通用的 `GPTVis` 组件，支持全部 26 种图表类型的 vis 语法字符串或 JSON 配置对象：
+
+```bash
+npx shadcn@latest add @gpt-vis/gpt-vis
+```
+
+```tsx
+import { GPTVis } from '@/components/ui/gpt-vis';
+
+<GPTVis
+  content="vis line
+data
+  - time 2020
+    value 100
+  - time 2021
+    value 120
+  - time 2022
+    value 150
+title 销售趋势"
+  theme="academy"
+/>;
+```
+
+### 类型化图表组件
+
+每种图表类型都有独立的组件，提供类型安全的 `config` 属性 — 仅支持 JSON，带 TypeScript 类型校验：
+
+```bash
+npx shadcn@latest add @gpt-vis/line
+```
+
+```tsx
+import { Line } from '@/components/ui/line';
+
+<Line
+  config={{
+    data: [
+      { time: '2020', value: 100 },
+      { time: '2021', value: 120 },
+      { time: '2022', value: 150 },
+    ],
+    title: '销售趋势',
+    axisXTitle: '年份',
+  }}
+  height={400}
+/>;
+```
+
+全部 26 种图表类型均可用，按名称安装即可：
+
+```bash
+npx shadcn@latest add @gpt-vis/pie
+npx shadcn@latest add @gpt-vis/bar
+npx shadcn@latest add @gpt-vis/mindmap
+# ...等等
+```
+
+每个类型化组件自动将基础 `GPTVis` 组件作为依赖安装。`width`、`height`、`theme`、`wrapper`、`locale`、`className`、`containerStyle` 等属性在所有组件中保持一致。
+
 ## 🤖 AI 生态
 
 GPT-Vis 提供完整的 AI 集成方案：

package/dist/cjs/types/index.d.ts

@@ -2,11 +2,12 @@
  * Common visualization options for all chart components.
  * Defines the container and dimensions for rendering visualizations.
  */
+export type VisualizationTheme = 'default' | 'light' | 'dark' | 'academy';
 export interface VisualizationOptions {
     container: string | HTMLElement;
     width?: number;
     height?: number;
-    theme?: 'default' | 'light' | 'dark' | 'academy';
+    theme?: VisualizationTheme;
     wrapper?: boolean;
     locale?: string;
 }

package/dist/cjs/util/animation.d.ts

@@ -0,0 +1,2 @@
+export type ChartEnterAnimation = 'fadeIn' | 'pathIn' | 'growInX' | 'growInY' | 'waveIn';
+export declare const getChartAnimation: (hasRendered: boolean, enterType?: ChartEnterAnimation) => false | Record<string, unknown>;

package/dist/cjs/util/animation.js

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/util/animation.ts
+var animation_exports = {};
+__export(animation_exports, {
+  getChartAnimation: () => getChartAnimation
+});
+module.exports = __toCommonJS(animation_exports);
+var prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+var getChartAnimation = (hasRendered, enterType) => {
+  if (hasRendered || prefersReducedMotion())
+    return false;
+  return {
+    enter: enterType ? { type: enterType } : {},
+    update: { type: null },
+    exit: { type: null }
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getChartAnimation
+});

package/dist/cjs/util/components.d.ts

@@ -0,0 +1,15 @@
+export type ChartLocale = 'en-US' | 'zh-CN';
+export type CartesianXAxisOptions = {
+    xLabels?: unknown[];
+    chartWidth?: number;
+};
+export type CartesianAxisOptions = CartesianXAxisOptions & {
+    axisXTitle?: string | false;
+    axisYTitle?: string | false;
+};
+export declare const resolveChartLocale: (locale?: string) => ChartLocale;
+export declare const getCartesianLayout: ({ xLabels, chartWidth, }: CartesianXAxisOptions) => Record<string, number>;
+export declare const getCartesianAxis: ({ axisXTitle, axisYTitle, xLabels, chartWidth, }: CartesianAxisOptions) => Record<'x' | 'y', Record<string, unknown>>;
+export declare const getColorLegend: (visible: boolean) => false | {
+    color: Record<string, never>;
+};

package/dist/cjs/util/components.js

@@ -0,0 +1,94 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/util/components.ts
+var components_exports = {};
+__export(components_exports, {
+  getCartesianAxis: () => getCartesianAxis,
+  getCartesianLayout: () => getCartesianLayout,
+  getColorLegend: () => getColorLegend,
+  resolveChartLocale: () => resolveChartLocale
+});
+module.exports = __toCommonJS(components_exports);
+var DEFAULT_CHART_WIDTH = 640;
+var AXIS_HORIZONTAL_PADDING = 96;
+var ANGLED_LABEL_MARGIN_RIGHT_MIN = 32;
+var ANGLED_LABEL_MARGIN_RIGHT_MAX = 64;
+var ANGLED_LABEL_EDGE_GAP = 8;
+var estimateLabelWidth = (value) => Array.from(String(value ?? "")).reduce(
+  (width, character) => width + ((character.codePointAt(0) ?? 0) > 255 ? 12 : 7),
+  0
+);
+var shouldUseAngledXAxisLabels = (labels, chartWidth = DEFAULT_CHART_WIDTH) => {
+  if (!(labels == null ? void 0 : labels.length))
+    return false;
+  const uniqueLabels = Array.from(new Set(labels.map((label) => String(label ?? ""))));
+  if (uniqueLabels.length <= 1)
+    return false;
+  const availableWidth = Math.max(chartWidth - AXIS_HORIZONTAL_PADDING, 240);
+  const estimatedWidth = uniqueLabels.reduce(
+    (total, label) => total + Math.max(28, estimateLabelWidth(label) + 16),
+    0
+  );
+  return estimatedWidth > availableWidth;
+};
+var resolveChartLocale = (locale) => (locale == null ? void 0 : locale.toLowerCase().startsWith("zh")) ? "zh-CN" : "en-US";
+var getCartesianLayout = ({
+  xLabels,
+  chartWidth
+}) => {
+  if (!shouldUseAngledXAxisLabels(xLabels, chartWidth))
+    return {};
+  const tailLabel = xLabels == null ? void 0 : xLabels[xLabels.length - 1];
+  const labelWidth = estimateLabelWidth(tailLabel);
+  const projectedHalfWidth = (labelWidth + 12) * Math.SQRT1_2 / 2;
+  return {
+    marginRight: Math.min(
+      ANGLED_LABEL_MARGIN_RIGHT_MAX,
+      Math.max(
+        ANGLED_LABEL_MARGIN_RIGHT_MIN,
+        Math.ceil(projectedHalfWidth + ANGLED_LABEL_EDGE_GAP)
+      )
+    )
+  };
+};
+var getCartesianAxis = ({
+  axisXTitle,
+  axisYTitle,
+  xLabels,
+  chartWidth
+}) => {
+  const useAngledXAxisLabels = shouldUseAngledXAxisLabels(xLabels, chartWidth);
+  return {
+    x: {
+      title: axisXTitle || false,
+      ...useAngledXAxisLabels ? { labelTransform: "rotate(45)", labelAutoRotate: false } : {}
+    },
+    y: {
+      title: axisYTitle || false
+    }
+  };
+};
+var getColorLegend = (visible) => visible ? { color: {} } : false;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getCartesianAxis,
+  getCartesianLayout,
+  getColorLegend,
+  resolveChartLocale
+});

package/dist/cjs/util/crosshair-axis-labels.d.ts

@@ -0,0 +1,9 @@
+import { type Chart } from '@antv/g2';
+import type { VisualizationTheme } from '../types';
+/**
+ * Bridges G2 tooltip crosshairs to axis value tags.
+ *
+ * G2 does not currently expose axis tags for tooltip crosshairs, so this adapter
+ * reads the rule geometry created by G2 5.4 and renders labels with LineCrosshair.
+ */
+export declare const bindCrosshairAxisLabels: (chart: Chart, theme: VisualizationTheme) => (() => void);

package/dist/cjs/util/crosshair-axis-labels.js

@@ -0,0 +1,304 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/util/crosshair-axis-labels.ts
+var crosshair_axis_labels_exports = {};
+__export(crosshair_axis_labels_exports, {
+  bindCrosshairAxisLabels: () => bindCrosshairAxisLabels
+});
+module.exports = __toCommonJS(crosshair_axis_labels_exports);
+var import_component = require("@antv/component");
+var import_g2 = require("@antv/g2");
+var import_tokens = require("./tokens");
+var formatCrosshairAxisValue = (value, formatter, precision) => {
+  if (value === void 0 || value === null || value === "")
+    return "";
+  try {
+    const formatted = formatter == null ? void 0 : formatter(value);
+    if (formatted !== void 0 && formatted !== null)
+      return String(formatted);
+  } catch {
+  }
+  if (value instanceof Date)
+    return value.toLocaleString();
+  if (typeof value === "number" && Number.isFinite(value) && precision !== void 0) {
+    return value.toFixed(precision);
+  }
+  return String(value);
+};
+var getNumberPrecision = (value) => {
+  var _a;
+  if (!Number.isFinite(value) || value === 0)
+    return 0;
+  const [coefficient, exponentText = "0"] = Math.abs(value).toExponential().split("e");
+  const coefficientPrecision = ((_a = coefficient.split(".")[1]) == null ? void 0 : _a.length) || 0;
+  return Math.max(0, coefficientPrecision - Number(exponentText));
+};
+var getCrosshairScalePrecision = (scale) => {
+  var _a;
+  const ticks = (_a = scale == null ? void 0 : scale.getTicks) == null ? void 0 : _a.call(scale);
+  if (!Array.isArray(ticks) || ticks.length < 2)
+    return void 0;
+  let interval = Number.POSITIVE_INFINITY;
+  for (let index = 1; index < ticks.length; index += 1) {
+    const current = Number(ticks[index]);
+    const previous = Number(ticks[index - 1]);
+    const difference = Math.abs(current - previous);
+    if (Number.isFinite(difference) && difference > 0)
+      interval = Math.min(interval, difference);
+  }
+  if (!Number.isFinite(interval))
+    return void 0;
+  return Math.min(getNumberPrecision(interval) + 2, 20);
+};
+var getCrosshairTagStyle = (theme, tokens) => ({
+  lineLineWidth: 0,
+  lineStrokeOpacity: 0,
+  linePointerEvents: "none",
+  tagPadding: [4, 7],
+  tagRadius: 6,
+  tagBackgroundFill: tokens.textPrimary,
+  tagBackgroundStroke: "transparent",
+  tagBackgroundLineWidth: 0,
+  tagBackgroundShadowColor: theme === "dark" ? "rgba(0, 0, 0, 0.38)" : "rgba(15, 23, 42, 0.18)",
+  tagBackgroundShadowBlur: 8,
+  tagBackgroundShadowOffsetY: 2,
+  tagLabelFill: tokens.background,
+  tagLabelFillOpacity: 1,
+  tagLabelFontFamily: import_tokens.CHART_FONT_FAMILY,
+  tagLabelFontSize: 11,
+  tagLabelFontWeight: 500,
+  tagLabelLineWidth: 0,
+  tagPointerEvents: "none"
+});
+var clamp = (value, min, max) => Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max));
+var invertCrosshairValue = (scale, value) => {
+  var _a, _b, _c;
+  if (!scale || typeof scale.invert !== "function" || value === void 0)
+    return void 0;
+  if (typeof scale.getBandWidth === "function") {
+    const domain = (_b = (_a = scale.getOptions) == null ? void 0 : _a.call(scale)) == null ? void 0 : _b.domain;
+    if (!Array.isArray(domain) || domain.length === 0 || !Number.isFinite(Number(value))) {
+      return void 0;
+    }
+    let nearestValue = domain[0];
+    let nearestDistance = Number.POSITIVE_INFINITY;
+    for (const domainValue of domain) {
+      const start = Number((_c = scale.map) == null ? void 0 : _c.call(scale, domainValue));
+      const bandWidth = Number(scale.getBandWidth(domainValue)) || 0;
+      const distance = Math.abs(start + bandWidth / 2 - Number(value));
+      if (Number.isFinite(distance) && distance < nearestDistance) {
+        nearestValue = domainValue;
+        nearestDistance = distance;
+      }
+    }
+    return nearestValue;
+  }
+  try {
+    return scale.invert(value);
+  } catch {
+    return void 0;
+  }
+};
+var getTooltipPlot = (context) => {
+  var _a;
+  const root = (_a = context.canvas) == null ? void 0 : _a.getRoot();
+  if (!root)
+    return void 0;
+  return (0, import_g2.selectPlotArea)(root);
+};
+var getCartesianView = (context) => {
+  var _a;
+  return (_a = context.views) == null ? void 0 : _a.find(
+    ({ coordinate, scale }) => Boolean((scale == null ? void 0 : scale.x) && (scale == null ? void 0 : scale.y)) && typeof (coordinate == null ? void 0 : coordinate.invert) === "function"
+  );
+};
+var getRuleLine = (rule) => {
+  var _a, _b, _c, _d;
+  const x1 = Number((_a = rule == null ? void 0 : rule.style) == null ? void 0 : _a.x1);
+  const x2 = Number((_b = rule == null ? void 0 : rule.style) == null ? void 0 : _b.x2);
+  const y1 = Number((_c = rule == null ? void 0 : rule.style) == null ? void 0 : _c.y1);
+  const y2 = Number((_d = rule == null ? void 0 : rule.style) == null ? void 0 : _d.y2);
+  if (![x1, x2, y1, y2].every(Number.isFinite))
+    return void 0;
+  return { x1, x2, y1, y2 };
+};
+var getPlotOffset = (plot) => {
+  var _a;
+  const [x = 0, y = 0] = ((_a = plot.getLocalPosition) == null ? void 0 : _a.call(plot)) || [];
+  return [Number.isFinite(Number(x)) ? Number(x) : 0, Number.isFinite(Number(y)) ? Number(y) : 0];
+};
+var invertCoordinate = (view, point) => {
+  try {
+    const inverted = view.coordinate.invert(point);
+    if (!Array.isArray(inverted) || inverted.length < 2)
+      return void 0;
+    const x = Number(inverted[0]);
+    const y = Number(inverted[1]);
+    return Number.isFinite(x) && Number.isFinite(y) ? [x, y] : void 0;
+  } catch {
+    return void 0;
+  }
+};
+var bindCrosshairAxisLabels = (chart, theme) => {
+  if (!chart || typeof chart.on !== "function")
+    return () => void 0;
+  const tagStyle = getCrosshairTagStyle(theme, (0, import_tokens.getChartVisualTokens)(theme));
+  let boundPlot = null;
+  let xCrosshair = null;
+  let yCrosshair = null;
+  let latestPointerY = null;
+  let latestXValue;
+  const destroyCrosshairs = () => {
+    xCrosshair == null ? void 0 : xCrosshair.destroy();
+    yCrosshair == null ? void 0 : yCrosshair.destroy();
+    xCrosshair = null;
+    yCrosshair = null;
+    boundPlot = null;
+  };
+  const hideCrosshairs = () => {
+    for (const crosshair of [xCrosshair, yCrosshair]) {
+      if (crosshair)
+        crosshair.style.visibility = "hidden";
+    }
+  };
+  const resetCrosshairs = () => {
+    latestPointerY = null;
+    latestXValue = void 0;
+    hideCrosshairs();
+  };
+  const ensureCrosshairs = (plot, xLine, yLine, xText, yText) => {
+    if (boundPlot !== plot)
+      destroyCrosshairs();
+    if (xCrosshair && yCrosshair)
+      return;
+    const layer = plot.parentNode || plot;
+    const [plotX, plotY] = getPlotOffset(plot);
+    const xStart = [xLine.x1 + plotX, xLine.y1 + plotY];
+    const xEnd = [xLine.x2 + plotX, xLine.y2 + plotY];
+    const yStart = [yLine.x1 + plotX, yLine.y1 + plotY];
+    const yEnd = [yLine.x2 + plotX, yLine.y2 + plotY];
+    if (!xCrosshair) {
+      xCrosshair = new import_component.LineCrosshair({
+        style: { ...tagStyle, startPos: xStart, endPos: xEnd, tagText: xText, tagPosition: "end" }
+      });
+      xCrosshair.style.zIndex = 7;
+      xCrosshair.style.pointerEvents = "none";
+      layer.appendChild(xCrosshair);
+    }
+    if (!yCrosshair) {
+      yCrosshair = new import_component.LineCrosshair({
+        style: {
+          ...tagStyle,
+          startPos: yStart,
+          endPos: yEnd,
+          tagText: yText,
+          tagPosition: "start"
+        }
+      });
+      yCrosshair.style.zIndex = 7;
+      yCrosshair.style.pointerEvents = "none";
+      layer.appendChild(yCrosshair);
+    }
+    boundPlot = plot;
+  };
+  const updateCrosshairs = (event) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const context = chart.getContext();
+    const plot = getTooltipPlot(context);
+    const view = getCartesianView(context);
+    if (!plot || !view) {
+      hideCrosshairs();
+      return;
+    }
+    const verticalRule = getRuleLine(plot.ruleY);
+    const horizontalRule = getRuleLine(plot.ruleX);
+    if (!verticalRule || !horizontalRule) {
+      hideCrosshairs();
+      return;
+    }
+    const [plotX, plotY] = getPlotOffset(plot);
+    const eventY = Number(event.offsetY ?? event.canvasY);
+    const globalY = Number.isFinite(eventY) ? eventY : latestPointerY;
+    const pointerY = Number.isFinite(globalY) ? Number(globalY) - plotY : horizontalRule.y1;
+    const x = clamp(verticalRule.x1, horizontalRule.x1, horizontalRule.x2);
+    const y = clamp(pointerY, verticalRule.y1, verticalRule.y2);
+    const invertedPosition = invertCoordinate(view, [x, y]);
+    const xValue = latestXValue ?? invertCrosshairValue(view.scale.x, invertedPosition == null ? void 0 : invertedPosition[0]);
+    const yValue = invertCrosshairValue(view.scale.y, invertedPosition == null ? void 0 : invertedPosition[1]) ?? ((_c = (_b = (_a = event.data) == null ? void 0 : _a.items) == null ? void 0 : _b[0]) == null ? void 0 : _c.value);
+    const xText = formatCrosshairAxisValue(xValue, (_e = (_d = view.scale.x).getFormatter) == null ? void 0 : _e.call(_d));
+    const yText = formatCrosshairAxisValue(
+      yValue,
+      (_g = (_f = view.scale.y).getFormatter) == null ? void 0 : _g.call(_f),
+      getCrosshairScalePrecision(view.scale.y)
+    );
+    if (!xText || !yText) {
+      hideCrosshairs();
+      return;
+    }
+    if ((_h = plot.ruleY) == null ? void 0 : _h.style) {
+      plot.ruleY.style.x1 = x;
+      plot.ruleY.style.x2 = x;
+    }
+    if ((_i = plot.ruleX) == null ? void 0 : _i.style) {
+      plot.ruleX.style.y1 = y;
+      plot.ruleX.style.y2 = y;
+    }
+    const displayVerticalRule = { ...verticalRule, x1: x, x2: x };
+    const displayHorizontalRule = { ...horizontalRule, y1: y, y2: y };
+    ensureCrosshairs(plot, displayVerticalRule, displayHorizontalRule, xText, yText);
+    if (!xCrosshair || !yCrosshair)
+      return;
+    xCrosshair.setText(xText);
+    xCrosshair.setPointer([x + plotX, verticalRule.y2 + plotY]);
+    xCrosshair.style.visibility = "visible";
+    yCrosshair.setText(yText);
+    yCrosshair.setPointer([horizontalRule.x1 + plotX, y + plotY]);
+    yCrosshair.style.visibility = "visible";
+  };
+  const onPointerMove = (event) => {
+    const y = Number(event.offsetY ?? event.canvasY);
+    if (Number.isFinite(y))
+      latestPointerY = y;
+    updateCrosshairs(event);
+  };
+  const onTooltipShow = (event) => {
+    var _a, _b;
+    if (!event.nativeEvent)
+      return;
+    if (((_b = (_a = event.data) == null ? void 0 : _a.data) == null ? void 0 : _b.x) !== void 0)
+      latestXValue = event.data.data.x;
+    updateCrosshairs(event);
+  };
+  chart.on("tooltip:show", onTooltipShow);
+  chart.on("tooltip:hide", resetCrosshairs);
+  chart.on("plot:pointermove", onPointerMove);
+  chart.on("plot:pointerleave", resetCrosshairs);
+  return () => {
+    var _a, _b, _c, _d;
+    (_a = chart.off) == null ? void 0 : _a.call(chart, "tooltip:show", onTooltipShow);
+    (_b = chart.off) == null ? void 0 : _b.call(chart, "tooltip:hide", resetCrosshairs);
+    (_c = chart.off) == null ? void 0 : _c.call(chart, "plot:pointermove", onPointerMove);
+    (_d = chart.off) == null ? void 0 : _d.call(chart, "plot:pointerleave", resetCrosshairs);
+    destroyCrosshairs();
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  bindCrosshairAxisLabels
+});

package/dist/cjs/util/index.d.ts

@@ -0,0 +1,6 @@
+export * from './animation';
+export * from './components';
+export * from './crosshair-axis-labels';
+export * from './interaction';
+export * from './theme';
+export * from './tokens';

package/dist/cjs/util/index.js

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/util/index.ts
+var util_exports = {};
+module.exports = __toCommonJS(util_exports);
+__reExport(util_exports, require("./animation"), module.exports);
+__reExport(util_exports, require("./components"), module.exports);
+__reExport(util_exports, require("./crosshair-axis-labels"), module.exports);
+__reExport(util_exports, require("./interaction"), module.exports);
+__reExport(util_exports, require("./theme"), module.exports);
+__reExport(util_exports, require("./tokens"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./animation"),
+  ...require("./components"),
+  ...require("./crosshair-axis-labels"),
+  ...require("./interaction"),
+  ...require("./theme"),
+  ...require("./tokens")
+});