@astryxdesign/charts 0.1.4-canary.39ffd21 → 0.1.4-canary.3d64ef2

package/README.md

@@ -1,21 +1,41 @@
 # @astryxdesign/charts
 
-Astryx chart components. This package provides thin, themeable wrappers over a peer charting engine — it owns the design-system surface while leaving the rendering engine as a peer dependency the consumer manages.
+Astryx charts — a config-model data visualization library built on d3.
 
-It ships to npm **only under the `@canary` dist-tag** — there is never a stable (`latest`) release yet.
+```tsx
+import {Chart, bar, line} from '@astryxdesign/charts';
 
-## Status
+<Chart data={data} xKey="month" series={[bar('revenue'), line('trend')]} />;
+```
+
+Marks are factory functions (`bar`, `line`, `area`, `dot`, `band`, `candlestick`,
+`errorBar`, `referenceLine`, and WebGL variants) that return config objects passed
+via the `series` prop. The chart root owns **one** x/y scale that every mark, axis,
+and grid line reads, so they can never disagree. It consumes `@astryxdesign/core`
+theme tokens directly (StyleX build mirrors `@astryxdesign/lab`).
 
-**Bootstrap scaffold.** The package is set up and building but ships no components yet. Add components under `src/` and export them from `src/index.ts`. The StyleX + Astryx-token build setup mirrors `@astryxdesign/lab`, so components can consume `@astryxdesign/core` theme tokens directly.
+It ships to npm **only under the `@canary` dist-tag** — there is never a stable
+(`latest`) release yet.
+
+> Note: this package is the successor to the experimental `Chart` (formerly
+> `ChartV2`) that used to live in `@astryxdesign/lab`; that code has moved here and
+> d3 is a direct dependency. (Supersedes the original "thin wrappers over a peer
+> engine" framing of the bootstrap scaffold.)
+
+## Status
 
-> When the first component adds StyleX styles, wire up a pre-compiled stylesheet the same way `lab` does: add a `charts` target to `scripts/build-css.mjs`, restore the `build:css` script and the `./charts.css` export in `package.json`, and document the `import '@astryxdesign/charts/charts.css'` step below.
+Under active development. The config-model chart and its marks/chrome are in place;
+API and visuals are still being refined. See the repo-root `CHARTV2_*` docs for the
+plan, design research, and verification checklist.
 
 ## Usage
 
 Inside the monorepo (storybook/sandbox), imports resolve via pnpm workspaces:
 
 ```tsx
-import {} from /* ... */ '@astryxdesign/charts';
+import {Chart, bar, line, ChartGrid, ChartAxis} from '@astryxdesign/charts';
+import '@astryxdesign/core/astryx.css';
+import '@astryxdesign/charts/charts.css';
 ```
 
 ### Trying charts in your own project (canary)

package/dist/Chart.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import type { SeriesDef, YBaseline } from './types';
+import type { ChartMargin } from './types';
+import { type ChartLegendProps } from './ChartLegend';
+import { type ChartTooltipProps } from './ChartTooltip';
+export interface ChartProps {
+    data: Record<string, unknown>[];
+    xKey: string;
+    series: SeriesDef[];
+    height?: number;
+    margin?: Partial<ChartMargin>;
+    /** How the y-domain is derived when `yDomain` is not set. Default `'auto'`. */
+    yBaseline?: YBaseline;
+    /** Explicit y-domain [min, max]. Authoritative — disables baseline/headroom. */
+    yDomain?: [number, number];
+    /**
+     * Explicit x-domain [min, max] for numeric/linear x. Honored even when `data`
+     * is empty (stable streaming window). Ignored for categorical (band) scales.
+     */
+    xDomain?: [number, number];
+    grid?: ReactNode;
+    axes?: ReactNode;
+    legend?: boolean | ChartLegendProps;
+    tooltip?: boolean | Omit<ChartTooltipProps, 'series'>;
+    interactions?: ReactNode;
+    children?: ReactNode;
+    title?: string;
+    subtitle?: string;
+}
+export declare function Chart({ data, xKey, series, height, margin: marginOverride, yBaseline, yDomain, xDomain, grid, axes, legend, tooltip, interactions, children, title, subtitle, }: ChartProps): import("react").JSX.Element;
+//# sourceMappingURL=Chart.d.ts.map

package/dist/Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../src/Chart.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAClD,OAAO,KAAK,EAAe,WAAW,EAAoB,MAAM,SAAS,CAAC;AAM1E,OAAO,EAAc,KAAK,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEjE,OAAO,EAAe,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAIpE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,+EAA+E;IAC/E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gFAAgF;IAChF,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;IACtD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAkBD,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAS,EACT,OAAO,EACP,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,+BA2QZ"}

package/dist/Chart.js

@@ -0,0 +1,292 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Chart.tsx (v2)
+ * @output Root chart — coordinates layout, rendering, and events
+ * @position Top-level; delegates everything to series configs and interaction slots
+ *
+ * The chart root has ZERO knowledge of mark types. It:
+ *   1. Runs the layout engine (scales + stacking + grouping)
+ *   2. Calls each series' resolve() and render() methods
+ *   3. Provides a single event layer for interaction children
+ */
+
+'use client';
+
+import { useId, useMemo, useRef, useState, useCallback, useLayoutEffect } from 'react';
+import { computeLayout } from "./layout.js";
+import { ChartProvider } from "./ChartContext.js";
+import { Text } from '@astryxdesign/core';
+import { VStack, HStack } from '@astryxdesign/core';
+import * as stylex from '@stylexjs/stylex';
+import { ChartLegend } from "./ChartLegend.js";
+import { deriveLegendItems } from "./legend.js";
+import { ChartTooltip } from "./ChartTooltip.js";
+import { useChartColors } from "./useChartColors.js";
+import { isUtilityMarkType } from "./types.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_MARGIN = {
+  top: 24,
+  right: 24,
+  bottom: 32,
+  left: 48
+};
+export function Chart({
+  data,
+  xKey,
+  series,
+  height = 300,
+  margin: marginOverride,
+  yBaseline,
+  yDomain,
+  xDomain,
+  grid,
+  axes,
+  legend,
+  tooltip,
+  interactions,
+  children,
+  title,
+  subtitle
+}) {
+  const chartId = useId();
+  const descId = `${chartId}-desc`;
+  // useId() can contain ':' which is invalid in an SVG url(#id) reference.
+  const clipId = `plot-${chartId.replace(/:/g, '')}`;
+  const containerRef = useRef(null);
+  const svgRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const pointerHandlers = useRef(new Set());
+  useLayoutEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (entry) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+  const margin = useMemo(() => ({
+    ...DEFAULT_MARGIN,
+    ...marginOverride
+  }), [marginOverride]);
+  const innerWidth = Math.max(0, containerWidth - margin.left - margin.right);
+  const innerHeight = Math.max(0, height - margin.top - margin.bottom);
+
+  // ─── Color assignment ─────────────────────────────────────────────────
+  // Give every primary series that doesn't supply a static color (auto-colored
+  // or accessor-colored) a distinct color from the theme's categorical palette.
+  // Utility marks (band/errorBar/referenceLine) don't consume palette slots.
+  // Assigned during render (like the layout pass annotates `_uid`) so the first
+  // paint is already colored; intentionally not a `useMemo` — it mutates the
+  // caller's series defs, and useMemo is allowed to drop its cached result.
+  const chartColors = useChartColors();
+  const needsColor = series.filter(s => !isUtilityMarkType(s.type) && s.color == null);
+  const palette = chartColors.categorical(Math.max(needsColor.length, 1));
+  for (let i = 0; i < needsColor.length; i++) {
+    needsColor[i]._resolvedColor = palette[i % palette.length];
+  }
+
+  // ─── Layout pass ──────────────────────────────────────────────────────
+  const layout = useMemo(() => computeLayout({
+    data,
+    xKey,
+    series,
+    width: innerWidth,
+    height: innerHeight,
+    yBaseline,
+    yDomain,
+    xDomain
+  }), [data, xKey, series, innerWidth, innerHeight, yBaseline, yDomain, xDomain]);
+  const seriesCtx = useMemo(() => ({
+    data,
+    xKey,
+    xScale: layout.xScale,
+    yScale: layout.yScale,
+    width: innerWidth,
+    height: innerHeight
+  }), [data, xKey, layout, innerWidth, innerHeight]);
+
+  // ─── Event dispatch ───────────────────────────────────────────────────
+  const onPointer = useCallback(handler => {
+    pointerHandlers.current.add(handler);
+    return () => {
+      pointerHandlers.current.delete(handler);
+    };
+  }, []);
+  const dispatch = useCallback(e => {
+    for (const handler of pointerHandlers.current) {
+      handler(e);
+    }
+  }, []);
+  const handlePointerMove = useCallback(e => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return;
+    }
+    const point = svg.createSVGPoint();
+    point.x = e.clientX;
+    point.y = e.clientY;
+    const ctm = e.currentTarget.getScreenCTM()?.inverse();
+    if (!ctm) {
+      return;
+    }
+    const cursor = point.matrixTransform(ctm);
+
+    // Find nearest point by x-distance only (full vertical column is the hover zone)
+    let nearest = null;
+    let bestXDist = Infinity;
+    for (const [seriesKey, points] of layout.resolved) {
+      for (const p of points) {
+        const xDist = Math.abs(p.px - cursor.x);
+        if (xDist < bestXDist) {
+          bestXDist = xDist;
+          nearest = {
+            ...p,
+            seriesKey
+          };
+        }
+      }
+    }
+    dispatch({
+      x: cursor.x,
+      y: cursor.y,
+      nearest,
+      active: e.buttons > 0
+    });
+  }, [layout.resolved, dispatch]);
+  const handlePointerLeave = useCallback(() => {
+    dispatch({
+      x: -1,
+      y: -1,
+      nearest: null,
+      active: false
+    });
+  }, [dispatch]);
+
+  // ─── Context for interactions + v1 chrome ─────────────────────────────
+  const ctx = useMemo(() => ({
+    width: innerWidth,
+    height: innerHeight,
+    margin,
+    data,
+    xKey,
+    xScale: layout.xScale,
+    yScale: layout.yScale,
+    resolved: layout.resolved,
+    onPointer,
+    svgRef
+  }), [innerWidth, innerHeight, margin, data, xKey, layout, onPointer]);
+
+  // ─── Legend ────────────────────────────────────────────────────────────
+  const legendConfig = legend === true ? {} : legend || null;
+  const legendElement = legendConfig ? /*#__PURE__*/_jsx(ChartLegend, {
+    items: legendConfig.items ?? deriveLegendItems(series),
+    position: legendConfig.position,
+    alignment: legendConfig.alignment
+  }) : null;
+  const legendPosition = legendConfig?.position ?? 'bottom';
+  const isLegendHorizontal = legendPosition === 'start' || legendPosition === 'end';
+
+  // ─── Render ───────────────────────────────────────────────────────────
+  if (containerWidth === 0) {
+    return /*#__PURE__*/_jsx("div", {
+      ref: containerRef,
+      ...{
+        className: "xh8yej3"
+      },
+      style: {
+        height
+      }
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    ...{
+      className: "xh8yej3"
+    },
+    children: [(title || subtitle) && /*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x1yztbdb"
+      },
+      children: [title && /*#__PURE__*/_jsx(Text, {
+        type: "body",
+        weight: "semibold",
+        display: "block",
+        children: title
+      }), subtitle && /*#__PURE__*/_jsx(Text, {
+        type: "supporting",
+        display: "block",
+        children: subtitle
+      })]
+    }), /*#__PURE__*/_jsx(ChartProvider, {
+      value: ctx,
+      children: legendConfig == null ? renderSvg() : isLegendHorizontal ? /*#__PURE__*/_jsxs(HStack, {
+        gap: 4,
+        children: [legendPosition === 'start' && legendElement, /*#__PURE__*/_jsx("div", {
+          ...{
+            className: "x98rzlu xeuugli xb3r6kr"
+          },
+          children: renderSvg()
+        }), legendPosition === 'end' && legendElement]
+      }) : /*#__PURE__*/_jsxs(VStack, {
+        gap: 4,
+        children: [legendPosition === 'top' && legendElement, renderSvg(), legendPosition === 'bottom' && legendElement]
+      })
+    })]
+  });
+  function renderSvg() {
+    return /*#__PURE__*/_jsxs("svg", {
+      ref: svgRef,
+      width: "100%",
+      height: height,
+      "aria-label": title ?? undefined,
+      "aria-describedby": subtitle ? descId : undefined,
+      children: [title && /*#__PURE__*/_jsx("title", {
+        children: title
+      }), subtitle && /*#__PURE__*/_jsx("desc", {
+        id: descId,
+        children: subtitle
+      }), /*#__PURE__*/_jsx("defs", {
+        children: /*#__PURE__*/_jsx("clipPath", {
+          id: clipId,
+          children: /*#__PURE__*/_jsx("rect", {
+            x: 0,
+            y: 0,
+            width: innerWidth,
+            height: innerHeight
+          })
+        })
+      }), /*#__PURE__*/_jsxs("g", {
+        transform: `translate(${margin.left},${margin.top})`,
+        children: [grid, /*#__PURE__*/_jsx("g", {
+          clipPath: `url(#${clipId})`,
+          children: series.map(s => {
+            const resolved = s._uid ? layout.resolved.get(s._uid) : undefined;
+            if (!resolved) {
+              return null;
+            }
+            return /*#__PURE__*/_jsx("g", {
+              children: s.render(resolved, seriesCtx)
+            }, s._uid);
+          })
+        }), axes, /*#__PURE__*/_jsx("rect", {
+          x: 0,
+          y: 0,
+          width: innerWidth,
+          height: innerHeight,
+          fill: "transparent",
+          onPointerMove: handlePointerMove,
+          onPointerLeave: handlePointerLeave
+        }), interactions, tooltip && /*#__PURE__*/_jsx(ChartTooltip, {
+          series: series,
+          ...(tooltip === true ? {} : tooltip)
+        }), children]
+      })]
+    });
+  }
+}

package/dist/ChartAxis.d.ts

@@ -0,0 +1,36 @@
+export interface ChartAxisProps {
+    /** Which edge to render the axis on */
+    position: 'top' | 'right' | 'bottom' | 'left';
+    /** Number of ticks (approximate — d3 decides final count) */
+    tickCount?: number;
+    /** Maximum number of tick labels to show. Labels are evenly skipped when exceeded. */
+    maxTicks?: number;
+    /** Custom tick formatter */
+    tickFormat?: (value: unknown) => string;
+    /** Truncate labels to this many characters (appends "\u2026"). */
+    truncate?: number;
+    /** Enable smooth transitions for streaming (default: true) */
+    animated?: boolean;
+    /**
+     * Show the axis edge line. Defaults to `true` for `position="bottom"`,
+     * `false` otherwise. Forced to `true` when `showTicks` is enabled.
+     * Pair with `<ChartGrid vertical />` and pass `showAxisLine` on the
+     * corresponding side axis to keep the visual edge grounded.
+     */
+    showAxisLine?: boolean;
+    /** Show perpendicular tick marks at each tick label. Default: `false`. */
+    showTicks?: boolean;
+}
+/**
+ * Chart axis. Always draws tick labels; the axis edge line and tick marks
+ * are independently toggleable. Pair with `<ChartGrid>` for grid lines.
+ *
+ * @example
+ * ```
+ * <ChartAxis position="bottom" />               // edge line + labels
+ * <ChartAxis position="left" />                 // labels only (no edge line)
+ * <ChartAxis position="left" showAxisLine showTicks />
+ * ```
+ */
+export declare function ChartAxis({ position, tickCount, maxTicks, tickFormat, truncate, animated, showAxisLine, showTicks, }: ChartAxisProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartAxis.d.ts.map

package/dist/ChartAxis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartAxis.d.ts","sourceRoot":"","sources":["../src/ChartAxis.tsx"],"names":[],"mappings":"AA0BA,MAAM,WAAW,cAAc;IAC7B,uCAAuC;IACvC,QAAQ,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC;IACxC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAeD;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAa,EACb,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,QAAe,EACf,YAAoC,EACpC,SAAiB,GAClB,EAAE,cAAc,+BAsKhB"}

package/dist/ChartAxis.js

@@ -0,0 +1,198 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartAxis.tsx (v2)
+ * @output Renders an axis (top, right, bottom, left) using the chart's scales
+ * @position Child of Chart v2; reads scales from chart context
+ *
+ * The axis edge line and tick marks are independently toggleable so callers
+ * can compose: line-only, line + ticks, or line + ticks + grid (paired with
+ * `<ChartGrid>`). To stay consistent with most charts, the bottom axis
+ * draws its edge line by default and other positions don't.
+ *
+ * Labels use d3's native tick formatter for continuous scales by default (clean
+ * numbers/dates) unless a `tickFormat` is supplied, and are auto-thinned to the
+ * available width (horizontal) or height (vertical) to avoid overlap.
+ *
+ * Ticks use CSS transitions for smooth sliding during streaming updates.
+ */
+
+import { useCallback, useMemo } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import '@astryxdesign/core/theme/tokens.stylex';
+import { colorVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { useChart } from "./ChartContext.js";
+import { isBandScale } from "./utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TICK_SIZE = 6;
+
+/**
+ * Chart axis. Always draws tick labels; the axis edge line and tick marks
+ * are independently toggleable. Pair with `<ChartGrid>` for grid lines.
+ *
+ * @example
+ * ```
+ * <ChartAxis position="bottom" />               // edge line + labels
+ * <ChartAxis position="left" />                 // labels only (no edge line)
+ * <ChartAxis position="left" showAxisLine showTicks />
+ * ```
+ */
+export function ChartAxis({
+  position,
+  tickCount = 5,
+  maxTicks,
+  tickFormat,
+  truncate,
+  animated = true,
+  showAxisLine = position === 'bottom',
+  showTicks = false
+}) {
+  // Tick marks need an axis line to anchor against; force it on when ticks
+  // are enabled so the two visuals stay coherent.
+  const renderAxisLine = showAxisLine || showTicks;
+  const {
+    width,
+    height,
+    xScale,
+    yScale
+  } = useChart();
+  const isHorizontal = position === 'top' || position === 'bottom';
+  const scale = isHorizontal ? xScale : yScale;
+
+  // Default label formatter. For continuous (linear/time) scales, use d3's own
+  // tick formatter so numbers get sensible precision (no floating-point dust
+  // like "0.30000000000000004") and dates render as calendar labels instead of
+  // `String(Date)`. Band scales keep their category strings.
+  const autoFormat = useMemo(() => {
+    if (tickFormat || isBandScale(scale)) {
+      return null;
+    }
+    const continuous = scale;
+    const fmt = continuous.tickFormat(tickCount);
+    return v => fmt(v);
+  }, [tickFormat, scale, tickCount]);
+  const format = useCallback(value => {
+    const str = (tickFormat ?? autoFormat ?? String)(value);
+    return truncate && str.length > truncate ? str.slice(0, truncate) + '\u2026' : str;
+  }, [tickFormat, autoFormat, truncate]);
+  const ticks = useMemo(() => {
+    let allTicks;
+    if (isBandScale(scale)) {
+      allTicks = scale.domain().map(d => ({
+        value: d,
+        offset: (scale(d) ?? 0) + scale.bandwidth() / 2
+      }));
+    } else {
+      const linearScale = scale;
+      allTicks = linearScale.ticks(tickCount).map(d => ({
+        value: d,
+        offset: linearScale(d)
+      }));
+    }
+
+    // Cap label count to avoid overlap. An explicit `maxTicks` always wins.
+    // Otherwise derive a cap from the available space and label size so dense
+    // axes don't smear into an unreadable blur: width ÷ widest-label for
+    // horizontal (e.g. 30 daily categories), height ÷ line-height for vertical
+    // (e.g. a categorical y-axis on a horizontal bar chart). Labels are then
+    // evenly skipped down to the cap.
+    let cap = maxTicks;
+    if (cap == null && allTicks.length > 1) {
+      if (isHorizontal && width > 0) {
+        const widestChars = allTicks.reduce((m, t) => Math.max(m, format(t.value).length), 1);
+        const approxLabelPx = widestChars * 7 + 16;
+        cap = Math.max(1, Math.floor(width / approxLabelPx));
+      } else if (!isHorizontal && height > 0) {
+        // ~12px glyph + breathing room keeps stacked labels from touching.
+        cap = Math.max(1, Math.floor(height / 18));
+      }
+    }
+    if (cap && allTicks.length > cap) {
+      const step = Math.ceil(allTicks.length / cap);
+      allTicks = allTicks.filter((_, i) => i % step === 0);
+    }
+    return allTicks;
+  }, [scale, tickCount, maxTicks, isHorizontal, width, height, format]);
+  const transform = position === 'bottom' ? `translate(0,${height})` : position === 'right' ? `translate(${width},0)` : undefined;
+
+  // For the bottom axis, draw the axis line at y=0 when the domain spans
+  // negative values (so the axis line still represents zero, not the chart edge).
+  const axisLineY = (() => {
+    if (position !== 'bottom') {
+      return 0;
+    }
+    const domain = yScale.domain();
+    if (domain[0] < 0 && domain[1] > 0) {
+      return yScale(0) - height;
+    }
+    return 0;
+  })();
+  const tickTransition = animated ? 'transform 150ms linear, opacity 150ms ease' : undefined;
+  return /*#__PURE__*/_jsxs("g", {
+    transform: transform,
+    role: "group",
+    "aria-label": `${position} axis`,
+    children: [renderAxisLine && /*#__PURE__*/_jsx("line", {
+      x1: 0,
+      x2: isHorizontal ? width : 0,
+      y1: isHorizontal ? axisLineY : 0,
+      y2: isHorizontal ? axisLineY : height,
+      ...{
+        className: "x1lo1t26 xnpr05h"
+      }
+    }), ticks.map(({
+      value,
+      offset
+    }) => {
+      const label = format(value);
+      // Key off the raw tick value, not the formatted label: distinct ticks
+      // can format (or truncate) to the same string and would collide as keys.
+      const key = String(value);
+      const isVisible = isHorizontal ? offset >= -10 && offset <= width + 10 : offset >= -10 && offset <= height + 10;
+      if (isHorizontal) {
+        const y = position === 'bottom' ? TICK_SIZE : -TICK_SIZE;
+        return /*#__PURE__*/_jsxs("g", {
+          style: {
+            transform: `translateX(${offset}px)`,
+            transition: tickTransition,
+            opacity: isVisible ? 1 : 0
+          },
+          children: [showTicks && /*#__PURE__*/_jsx("line", {
+            y2: y,
+            ...{
+              className: "x1lo1t26 xnpr05h"
+            }
+          }), /*#__PURE__*/_jsx("text", {
+            y: position === 'bottom' ? TICK_SIZE + 12 : -(TICK_SIZE + 4),
+            textAnchor: "middle",
+            fill: "var(--color-text-secondary)",
+            fontSize: 12,
+            children: label
+          })]
+        }, key);
+      }
+      // Vertical axis
+      const x = position === 'left' ? -TICK_SIZE : TICK_SIZE;
+      return /*#__PURE__*/_jsxs("g", {
+        style: {
+          transform: `translateY(${offset}px)`,
+          transition: tickTransition,
+          opacity: isVisible ? 1 : 0
+        },
+        children: [showTicks && /*#__PURE__*/_jsx("line", {
+          x2: x,
+          ...{
+            className: "x1lo1t26 xnpr05h"
+          }
+        }), /*#__PURE__*/_jsx("text", {
+          x: position === 'left' ? -(TICK_SIZE + 4) : TICK_SIZE + 4,
+          dy: "0.32em",
+          textAnchor: position === 'left' ? 'end' : 'start',
+          fill: "var(--color-text-secondary)",
+          fontSize: 12,
+          children: label
+        })]
+      }, key);
+    })]
+  });
+}

package/dist/ChartContext.d.ts

@@ -0,0 +1,4 @@
+import type { ChartContext } from './types';
+export declare const ChartProvider: import("react").Provider<ChartContext | null>;
+export declare function useChart(): ChartContext;
+//# sourceMappingURL=ChartContext.d.ts.map

package/dist/ChartContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartContext.d.ts","sourceRoot":"","sources":["../src/ChartContext.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,aAAa,+CAAe,CAAC;AAE1C,wBAAgB,QAAQ,IAAI,YAAY,CAMvC"}

package/dist/ChartContext.js

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import { createContext, useContext } from 'react';
+const Ctx = /*#__PURE__*/createContext(null);
+Ctx.displayName = 'ChartContext';
+export const ChartProvider = Ctx.Provider;
+export function useChart() {
+  const ctx = useContext(Ctx);
+  if (!ctx) {
+    throw new Error('Must be used inside <Chart>');
+  }
+  return ctx;
+}

package/dist/ChartGrid.d.ts

@@ -0,0 +1,26 @@
+export interface ChartGridProps {
+    /** Show horizontal grid lines. Default: `true`. */
+    horizontal?: boolean;
+    /** Show vertical grid lines. Default: `false`. */
+    vertical?: boolean;
+    /**
+     * Approximate number of grid lines per axis. Match your `<ChartAxis>`
+     * `tickCount` so grid lines and tick labels land on the same values.
+     * Default: `5`.
+     */
+    tickCount?: number;
+}
+/**
+ * Grid lines behind chart marks.
+ *
+ * Pair with `<ChartAxis>` so users always see an axis line beside the
+ * grid — the components are designed to be used together.
+ *
+ * @example
+ * ```
+ * <ChartGrid />                 // horizontal grid lines (default)
+ * <ChartGrid horizontal vertical />
+ * ```
+ */
+export declare function ChartGrid({ horizontal, vertical, tickCount, }: ChartGridProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartGrid.d.ts.map

package/dist/ChartGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartGrid.d.ts","sourceRoot":"","sources":["../src/ChartGrid.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,cAAc;IAC7B,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EACxB,UAAiB,EACjB,QAAgB,EAChB,SAAa,GACd,EAAE,cAAc,+BAyDhB"}