@pharos-ds/charts 0.0.0-stage → 1.0.10

package/CHANGELOG.md

@@ -0,0 +1,73 @@
+# @pharos-ds/charts
+
+# 1.0.10
+
+#### New Features
+
+- `@pharos-ds/charts` passa a ser publicado no npm junto com o core (mesma versão, peer exato `@pharos-ds/core`, CSS pronto em `@pharos-ds/charts/charts.css`). O `Chart` fica acessível por padrão: SVG com `role="img"` e nome (`aria-label` → `title` → séries), `description` no `aria-describedby` e tabela de dados escondida visualmente (`dataTable`, desligável). Novo `orientation="horizontal"` para barras horizontais, com eixos e grade acompanhando.
+
+#### Contributors
+
+Thanks to everyone who contributed to this release:
+
+- @Caio-Silvestre
+
+---
+
+# 1.0.8
+
+---
+
+# 1.0.7
+
+---
+
+# 1.0.6
+
+---
+
+# 1.0.5
+
+---
+
+# 1.0.4
+
+---
+
+# 1.0.3
+
+---
+
+# 1.0.2
+
+---
+
+# 1.0.1
+
+---
+
+# 1.0.0
+
+---
+
+# 0.1.9
+
+---
+
+# 0.1.8
+
+---
+
+# 0.1.7
+
+---
+
+# 0.1.6
+
+---
+
+# 0.1.5
+
+---
+
+# 0.1.4

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2026 Caio Silvestre
+
+Copyright (c) 2026 Meta Platforms, Inc.
+(portions derived from Astryx — https://github.com/facebook/astryx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,118 @@
-# Temporary Holding Version
+# @pharos-ds/charts
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Pharos charts — a config-model data visualization library built on d3, themed by
+Pharos tokens and accessible by default.
+
+```tsx
+import {Chart, ChartAxis, ChartGrid, bar, line} from '@pharos-ds/charts';
+
+<Chart
+  title="Leads por mês"
+  description="Março teve o maior volume do trimestre."
+  data={data}
+  xKey="mes"
+  series={[bar('leads', {label: 'Leads'}), line('meta', {label: 'Meta'})]}
+  grid={<ChartGrid />}
+  axes={
+    <>
+      <ChartAxis position="bottom" />
+      <ChartAxis position="left" />
+    </>
+  }
+  legend
+  tooltip
+/>;
+```
+
+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.
+
+## Install
+
+`@pharos-ds/charts` is versioned together with `@pharos-ds/core` (same version
+number, exact peer). Install matching versions:
+
+```bash
+npm install @pharos-ds/charts@1.0.x @pharos-ds/core@1.0.x @stylexjs/stylex
+```
+
+Peers: `@pharos-ds/core` (exact version), `@stylexjs/stylex` (runtime only — no
+compiler needed), `react` and `react-dom` ≥ 19.
+
+## Styles
+
+The package ships prebuilt CSS, the same way core does. Import it once, after
+core's stylesheet — no StyleX compiler is needed in your app:
+
+```css
+@import '@pharos-ds/core/pharos.css';
+@import '@pharos-ds/theme-pharos/theme.css';
+@import '@pharos-ds/charts/charts.css';
+```
+
+Render charts inside core's `<Theme>` (e.g. with `pharosTheme`). Series without
+an explicit `color` take the theme's categorical palette in order — for Pharos:
+azul, roxo, laranja, amarelo, chumbo — resolved for the active light/dark mode.
+
+`Chart` is a client component (`'use client'`): it measures its container, so the
+plot draws after hydration. The hidden data table is part of the server HTML.
+
+## Horizontal bars
+
+```tsx
+<Chart
+  title="Leads por canal"
+  orientation="horizontal"
+  data={porCanal}
+  xKey="canal"
+  series={[bar('leads', {label: 'Leads'})]}
+  margin={{left: 96}}
+  grid={<ChartGrid />}
+  axes={
+    <>
+      <ChartAxis position="left" />
+      <ChartAxis position="bottom" />
+    </>
+  }
+  tooltip
+/>
+```
+
+Categories go on the y-axis and values grow to the right. The grid follows the
+value axis by default. Use the `tooltip` prop (not a `ChartTooltip` child) in
+horizontal charts.
+
+## Accessibility
+
+Every chart is exposed as one image with a text alternative (WCAG 1.1.1):
+
+- The SVG has `role="img"` and an accessible name: `aria-label` → `title` → the
+  data series labels.
+- `subtitle` and `description` become the image description (`aria-describedby`).
+  Use `description` for the takeaway.
+- A visually hidden `<table>` is generated from `data`: caption = accessible name,
+  header row = x label + series labels, one row per x value. Utility marks
+  (`band`, `errorBar`, `referenceLine`) get no column. Customize with
+  `dataTable={{xLabel, formatX, formatValue, maxRows}}`, or opt out with
+  `dataTable={false}` when the same data is already on the page as a table. Charts
+  with more than `maxRows` rows (default 1000) skip the table.
+- Grid, marks and axes are `aria-hidden`.
+- The tooltip is pointer-only: it is never focusable and never traps focus.
+  There is no keyboard tooltip; keyboard and screen-reader users get the values
+  from the data table.
+
+## Development
+
+Inside the monorepo (storybook/sandbox), imports resolve via pnpm workspaces.
+Stories live in `apps/storybook/stories/charts/`. Run the tests with:
+
+```bash
+corepack pnpm exec vitest run packages/charts
+```
+
+> Note: this package is the successor to the experimental `Chart` (formerly
+> `ChartV2`) that used to live in `@pharos-ds/lab`; that code has moved here and
+> d3 is a direct dependency. See the repo-root `docs/CHARTV2_*` docs for the
+> original plan and verification checklist.

package/dist/Chart.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from 'react';
+import type { SeriesDef, YBaseline, ChartOrientation } from './types';
+import type { ChartMargin } from './types';
+import { type ChartDataTableOptions } from './dataTable';
+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;
+    /**
+     * Visible heading above the chart. Also the chart's accessible name and the
+     * hidden data table's caption, unless `aria-label` is given.
+     */
+    title?: string;
+    /** Visible supporting line under the title; exposed as the SVG description. */
+    subtitle?: string;
+    /**
+     * Accessible name for the chart (`role="img"`). Defaults to `title`, then to
+     * the data series labels. Use it when the visible title lives outside the
+     * chart (e.g. a Card header).
+     */
+    'aria-label'?: string;
+    /**
+     * Text alternative summarizing what the chart shows (trend, highlights). Not
+     * rendered visibly; exposed via `aria-describedby` alongside `subtitle`.
+     */
+    description?: string;
+    /**
+     * Visually hidden `<table>` with the chart's data, for screen readers
+     * (caption = accessible name, header row = x label + series labels, one row
+     * per x value). Default `true`. Pass `false` to opt out (e.g. when the same
+     * data is already on the page as a table) or an object to customize labels
+     * and formatting.
+     */
+    dataTable?: boolean | ChartDataTableOptions;
+    /**
+     * `'vertical'` (default) or `'horizontal'` — categories on the y-axis and
+     * values growing right (horizontal bars). Axes and grid follow automatically;
+     * for the tooltip use the `tooltip` prop (not a `ChartTooltip` child).
+     */
+    orientation?: ChartOrientation;
+}
+export declare function Chart({ data, xKey, series, height, margin: marginOverride, yBaseline, yDomain, xDomain, grid, axes, legend, tooltip, interactions, children, title, subtitle, 'aria-label': ariaLabel, description, dataTable, orientation, }: 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":"AA0BA,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAC,MAAM,SAAS,CAAC;AACpE,OAAO,KAAK,EAAe,WAAW,EAAoB,MAAM,SAAS,CAAC;AAQ1E,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,aAAa,CAAC;AAErB,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;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,qBAAqB,CAAC;IAC5C;;;;OAIG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC;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,EACR,YAAY,EAAE,SAAS,EACvB,WAAW,EACX,SAAgB,EAChB,WAAwB,GACzB,EAAE,UAAU,+BAkYZ"}

package/dist/Chart.js

@@ -0,0 +1,401 @@
+// 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
+ *   4. Exposes the text alternative (WCAG 1.1.1): the SVG is `role="img"` with
+ *      an accessible name (`aria-label` → `title` → series labels), optional
+ *      `<desc>` from `subtitle`/`description`, and a visually hidden data table
+ *      built from `data` (opt out with `dataTable={false}`). Plot internals are
+ *      `aria-hidden`.
+ *   5. Transposes the plot for `orientation="horizontal"`: marks resolve in the
+ *      vertical plot space and are drawn through a 90° transform, while axes
+ *      and grid read display-space scales from context.
+ *
+ * SYNC: When modified, update /packages/charts/src/Chart.doc.mjs and
+ *   /packages/charts/README.md
+ */
+
+'use client';
+
+import { useId, useMemo, useRef, useState, useCallback, useLayoutEffect } from 'react';
+import { computeLayout } from "./layout.js";
+import { ChartProvider } from "./ChartContext.js";
+import { Text } from '@pharos-ds/core';
+import { VStack, HStack } from '@pharos-ds/core';
+import { VisuallyHidden } from '@pharos-ds/core';
+import * as stylex from '@stylexjs/stylex';
+import { scaleLinear } from 'd3-scale';
+import { buildDataTable, fallbackChartLabel } from "./dataTable.js";
+import { isBandScale } from "./utils.js";
+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,
+  'aria-label': ariaLabel,
+  description,
+  dataTable = true,
+  orientation = 'vertical'
+}) {
+  const chartId = useId();
+  const descId = `${chartId}-desc`;
+  const isHorizontal = orientation === 'horizontal';
+  // 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]);
+  // Clamp plot dimensions to finite, non-negative values. layout.ts hardens
+  // against NaN in the *data*, but a non-finite `height` prop or margin override
+  // would still collapse every scale range — and the clipPath/event-rect
+  // geometry — into NaN. `containerWidth` is always finite (from ResizeObserver).
+  const safeHeight = Number.isFinite(height) ? Math.max(0, height) : 0;
+  const rawInnerWidth = containerWidth - margin.left - margin.right;
+  const rawInnerHeight = safeHeight - margin.top - margin.bottom;
+  const innerWidth = Number.isFinite(rawInnerWidth) ? Math.max(0, rawInnerWidth) : 0;
+  const innerHeight = Number.isFinite(rawInnerHeight) ? Math.max(0, rawInnerHeight) : 0;
+  // Plot space: marks always resolve as if the chart were vertical. For a
+  // horizontal chart the category axis runs along the display height and the
+  // value axis along the display width, so the plot box is transposed.
+  const plotWidth = isHorizontal ? innerHeight : innerWidth;
+  const plotHeight = isHorizontal ? innerWidth : innerHeight;
+
+  // ─── 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: plotWidth,
+    height: plotHeight,
+    yBaseline,
+    yDomain,
+    xDomain
+  }), [data, xKey, series, plotWidth, plotHeight, yBaseline, yDomain, xDomain]);
+  const seriesCtx = useMemo(() => ({
+    data,
+    xKey,
+    xScale: layout.xScale,
+    yScale: layout.yScale,
+    yBandScale: layout.yBandScale,
+    width: plotWidth,
+    height: plotHeight
+  }), [data, xKey, layout, plotWidth, plotHeight]);
+
+  // ─── 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 category distance only (the full column — or
+    // row, when horizontal — is the hover zone). Resolved points live in
+    // plot space, where the category position is always `px`.
+    const cursorCategory = isHorizontal ? cursor.y : cursor.x;
+    let nearest = null;
+    let bestXDist = Infinity;
+    for (const [seriesKey, points] of layout.resolved) {
+      for (const p of points) {
+        const xDist = Math.abs(p.px - cursorCategory);
+        if (xDist < bestXDist) {
+          bestXDist = xDist;
+          nearest = {
+            ...p,
+            seriesKey
+          };
+        }
+      }
+    }
+    dispatch({
+      x: cursor.x,
+      y: cursor.y,
+      nearest,
+      active: e.buttons > 0
+    });
+  }, [layout.resolved, dispatch, isHorizontal]);
+  const handlePointerLeave = useCallback(() => {
+    dispatch({
+      x: -1,
+      y: -1,
+      nearest: null,
+      active: false
+    });
+  }, [dispatch]);
+
+  // ─── Context for interactions + v1 chrome ─────────────────────────────
+  // `plotCtx` is the vertical plot space marks resolve in (it is also the
+  // display space for vertical charts). For horizontal charts, chrome gets a
+  // display-space view: the value scale runs along x (left → right) and the
+  // category scale along y (top → bottom).
+  const plotCtx = useMemo(() => ({
+    orientation,
+    width: plotWidth,
+    height: plotHeight,
+    margin,
+    data,
+    xKey,
+    xScale: layout.xScale,
+    yScale: layout.yScale,
+    yBandScale: layout.yBandScale,
+    resolved: layout.resolved,
+    onPointer,
+    svgRef
+  }), [orientation, plotWidth, plotHeight, margin, data, xKey, layout, onPointer]);
+  const ctx = useMemo(() => {
+    if (!isHorizontal) {
+      return plotCtx;
+    }
+    const valueScale = layout.yScale.copy().range([0, innerWidth]);
+    const plotX = layout.xScale;
+    return {
+      ...plotCtx,
+      width: innerWidth,
+      height: innerHeight,
+      xScale: valueScale,
+      ...(isBandScale(plotX) ? {
+        yBandScale: plotX.copy().range([0, innerHeight]),
+        // Unused for a categorical y; kept so `yScale` stays a valid scale.
+        yScale: scaleLinear().range([innerHeight, 0])
+      } : {
+        yBandScale: undefined,
+        yScale: plotX.copy().range([0, innerHeight])
+      })
+    };
+  }, [plotCtx, isHorizontal, layout, innerWidth, innerHeight]);
+
+  // ─── Accessibility ────────────────────────────────────────────────────
+  const accessibleName = ariaLabel || title || fallbackChartLabel(series) || undefined;
+  const descriptionText = [subtitle, description].filter(Boolean).join('. ');
+  const tableModel = useMemo(() => dataTable === false ? null : buildDataTable(data, xKey, series, dataTable === true ? {} : dataTable), [data, xKey, series, dataTable]);
+  const tableElement = tableModel ? /*#__PURE__*/_jsx(VisuallyHidden, {
+    as: "div",
+    children: /*#__PURE__*/_jsxs("table", {
+      children: [accessibleName && /*#__PURE__*/_jsx("caption", {
+        children: accessibleName
+      }), /*#__PURE__*/_jsx("thead", {
+        children: /*#__PURE__*/_jsx("tr", {
+          children: tableModel.headers.map((h, i) => /*#__PURE__*/_jsx("th", {
+            scope: "col",
+            children: h
+          }, i))
+        })
+      }), /*#__PURE__*/_jsx("tbody", {
+        children: tableModel.rows.map(row => /*#__PURE__*/_jsxs("tr", {
+          children: [/*#__PURE__*/_jsx("th", {
+            scope: "row",
+            children: row.header
+          }), row.cells.map((cell, i) => /*#__PURE__*/_jsx("td", {
+            children: cell
+          }, i))]
+        }, row.key))
+      })]
+    })
+  }) : null;
+
+  // ─── 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 ───────────────────────────────────────────────────────────
+  // Before the first measurement (and during SSR) only the sized placeholder
+  // renders — plus the hidden data table, which doesn't depend on width, so
+  // the text alternative is in the server HTML too.
+  if (containerWidth === 0) {
+    return /*#__PURE__*/_jsx("div", {
+      ref: containerRef,
+      ...{
+        className: "xh8yej3"
+      },
+      style: {
+        height: safeHeight
+      },
+      children: tableElement
+    });
+  }
+  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]
+      })
+    }), tableElement]
+  });
+  function renderSvg() {
+    const plotTransform = isHorizontal ? `matrix(0,1,-1,0,${innerWidth},0)` : undefined;
+    return /*#__PURE__*/_jsxs("svg", {
+      ref: svgRef,
+      width: "100%",
+      height: safeHeight,
+      role: "img",
+      "aria-label": accessibleName,
+      "aria-describedby": descriptionText ? descId : undefined,
+      children: [descriptionText && /*#__PURE__*/_jsx("desc", {
+        id: descId,
+        children: descriptionText
+      }), /*#__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: [/*#__PURE__*/_jsxs("g", {
+          "aria-hidden": "true",
+          children: [grid, /*#__PURE__*/_jsx("g", {
+            clipPath: `url(#${clipId})`,
+            children: /*#__PURE__*/_jsx("g", {
+              transform: plotTransform,
+              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("g", {
+          "aria-hidden": "true",
+          transform: plotTransform,
+          children: /*#__PURE__*/_jsx(ChartProvider, {
+            value: plotCtx,
+            children: /*#__PURE__*/_jsx(ChartTooltip, {
+              series: series,
+              ...(tooltip === true ? {} : tooltip)
+            })
+          })
+        }), children]
+      })]
+    });
+  }
+}