cortena-ui 1.3.0 → 1.4.0

package/src/components/chart/chart.tsx

@@ -4,12 +4,15 @@ import * as React from "react";
 import { cn } from "@/lib/cn";
 import { ChartContainer, ChartEmpty, ChartError, ChartLoading, type ChartContainerProps } from "./container";
 import { configFor, isEmptyData, isMatrix, isSeriesArray, toRows, toSlices } from "./data";
-import { NivoChart, type NivoType } from "./nivo-charts";
-import { RechartsChart, type RechartsType } from "./recharts-charts";
+import type { NivoType } from "./nivo-charts";
+import { NivoChartLazy, resetNivoChunks } from "./nivo-lazy";
+import type { RechartsType } from "./recharts-charts";
+import { RechartsChartLazy, resetRechartsChunks } from "./recharts-lazy";
 import {
   chartEngine,
   type ChartConfig,
   type ChartDataFor,
+  type ChartLabels,
   type ChartMatrix,
   type ChartRenderer,
   type ChartRow,
@@ -44,6 +47,12 @@ export interface ChartProps<T extends ChartType = ChartType>
   grid?: boolean;
   /** Show a tooltip on hover. Default true. */
   tooltip?: boolean;
+  /**
+   * Per-arc labels for `pie` and `donut`; ignored by every other type. Default
+   * `percent`, which is what the reader almost always wants and what cortenaweb's
+   * donuts showed before this package existed. See {@link ChartLabels}.
+   */
+  labels?: ChartLabels;
   /** Format values in axes, tooltips and labels. */
   valueFormatter?: (value: number) => string;
   /** Calendar range (ISO dates); defaults to the data's extent. */
@@ -82,25 +91,59 @@ function seriesKeys(type: ChartType, data: unknown, indexBy?: string, keys?: str
   }
 }
 
-class ChunkBoundary extends React.Component<
-  { children: React.ReactNode; fallback: React.ReactNode },
-  { failed: boolean }
-> {
-  state = { failed: false };
+interface ChunkBoundaryProps {
+  children: React.ReactNode;
+  /** Changing it clears a previous failure and renders the children again. */
+  resetKey: string;
+  fallback: (retry: () => void) => React.ReactNode;
+}
+
+/**
+ * Catches a Nivo chunk that failed to load. Recovering takes two things,
+ * because `React.lazy` memoises a rejection for the life of the page: fresh
+ * lazy components ({@link resetNivoChunks}) and a boundary that leaves its
+ * failed state. `resetKey` does the second on its own when the chart changes,
+ * and the fallback gets a `retry` that does both.
+ */
+class ChunkBoundary extends React.Component<ChunkBoundaryProps, { failed: boolean; key: string }> {
+  state = { failed: false, key: this.props.resetKey };
   static getDerivedStateFromError() {
     return { failed: true };
   }
+  static getDerivedStateFromProps(props: ChunkBoundaryProps, state: { failed: boolean; key: string }) {
+    return props.resetKey === state.key ? null : { failed: false, key: props.resetKey };
+  }
+  retry = () => {
+    resetNivoChunks();
+    resetRechartsChunks();
+    this.setState({ failed: false });
+  };
   render() {
-    return this.state.failed ? this.props.fallback : this.props.children;
+    return this.state.failed ? this.props.fallback(this.retry) : this.props.children;
   }
 }
 
+/** Shown when an engine chunk could not be fetched, with a way back. */
+function chunkFallback(retry: () => void): React.ReactNode {
+  return (
+    <ChartError>
+      Chart could not be loaded.{" "}
+      <button type="button" data-slot="chart-retry" onClick={retry} className="underline underline-offset-2">
+        Retry
+      </button>
+    </ChartError>
+  );
+}
+
 /**
  * Chart — one component for every chart type the fleet draws.
  *
- * `type` picks the engine: Recharts (bundled) for bar, line, area, pie, donut,
- * scatter, radar and funnel; Nivo, lazy-loaded per package, for heatmap,
- * calendar, treemap and sunburst, with `renderer="canvas"` for large series.
+ * `type` picks the engine: Recharts for bar, line, area, pie, donut, scatter,
+ * radar and funnel; Nivo for heatmap, calendar, treemap and sunburst, with
+ * `renderer="canvas"` for large series. Both are loaded on the first render of
+ * a chart that needs them — Recharts as one chunk, each `@nivo/*` package as
+ * its own — so importing `Chart` costs nothing until a chart is drawn, and a
+ * screen that draws a bar chart never fetches Nivo.
  * Colours, fonts, axes, grid, tooltip, legend and the empty, loading and
  * error states all come from cortena-design tokens; a consumer passes data
  * and, optionally, a `config` of labels.
@@ -125,6 +168,7 @@ function Chart<T extends ChartType>({
   legend,
   grid = true,
   tooltip = true,
+  labels = "percent",
   valueFormatter,
   from,
   to,
@@ -151,9 +195,9 @@ function Chart<T extends ChartType>({
   else if (empty) body = <ChartEmpty>{emptyMessage}</ChartEmpty>;
   else if (engine === "nivo") {
     body = (
-      <ChunkBoundary fallback={<ChartError>Chart could not be loaded</ChartError>}>
+      <ChunkBoundary resetKey={`${type}|${renderer}`} fallback={chunkFallback}>
         <React.Suspense fallback={<ChartLoading />}>
-          <NivoChart
+          <NivoChartLazy
             type={type as NivoType}
             data={data}
             config={fullConfig}
@@ -170,18 +214,21 @@ function Chart<T extends ChartType>({
   } else {
     responsive = true;
     body = (
-      <RechartsChart
-        type={type as RechartsType}
-        data={data}
-        config={fullConfig}
-        indexBy={indexBy}
-        keys={keys}
-        stacked={stacked}
-        legend={showLegend}
-        grid={grid}
-        tooltip={tooltip}
-        valueFormatter={valueFormatter}
-      />
+      <ChunkBoundary resetKey={type} fallback={chunkFallback}>
+        <RechartsChartLazy
+          type={type as RechartsType}
+          data={data}
+          config={fullConfig}
+          indexBy={indexBy}
+          keys={keys}
+          stacked={stacked}
+          legend={showLegend}
+          grid={grid}
+          tooltip={tooltip}
+          labels={labels}
+          valueFormatter={valueFormatter}
+        />
+      </ChunkBoundary>
     );
   }
 

package/src/components/chart/container.tsx

@@ -1,15 +1,11 @@
 "use client";
 
 import * as React from "react";
-import {
-  Legend as RechartsLegend,
-  ResponsiveContainer,
-  Tooltip as RechartsTooltip,
-  type LegendPayload,
-  type LegendProps,
-  type TooltipContentProps,
-  type TooltipProps,
-} from "recharts";
+// Types only. The two Recharts *values* this file used to reach for — `Tooltip`
+// and `Legend` — are in `recharts-parts.tsx`, so that nothing on the eager path
+// imports the engine; see the note there.
+import type { LegendPayload, TooltipContentProps } from "recharts";
+import { RechartsResponsive } from "./recharts-lazy";
 import { cn } from "@/lib/cn";
 import { Skeleton } from "@/components/skeleton";
 import { vizVar } from "./tokens";
@@ -23,7 +19,7 @@ interface ChartContextValue {
   element: HTMLDivElement | null;
 }
 
-const ChartContext = React.createContext<ChartContextValue | null>(null);
+const ChartContext = /* @__PURE__ */ React.createContext<ChartContextValue | null>(null);
 
 /** The nearest ChartContainer's config and element; null outside one. */
 export function useChart(): ChartContextValue | null {
@@ -143,14 +139,23 @@ function ChartContainer({
         {...props}
       >
         {responsive ? (
-          <ResponsiveContainer
-            width="100%"
-            height="100%"
-            minWidth={testMode ? TEST_WIDTH : undefined}
-            minHeight={testMode ? TEST_HEIGHT : undefined}
-          >
-            {children as React.ReactElement}
-          </ResponsiveContainer>
+          // Recharts' ResponsiveContainer arrives with the engine chunk, so
+          // this suspends on the first chart drawn on the page — and so does
+          // whatever it wraps, which is why the skeleton lives here rather than
+          // in `Chart`: this is the innermost boundary, so it is the one that
+          // catches. A `ChartContainer` used directly, to compose a one-off
+          // Recharts chart, gets the same treatment and needs no boundary of
+          // its own.
+          <React.Suspense fallback={<ChartLoading />}>
+            <RechartsResponsive
+              width="100%"
+              height="100%"
+              minWidth={testMode ? TEST_WIDTH : undefined}
+              minHeight={testMode ? TEST_HEIGHT : undefined}
+            >
+              {children as React.ReactElement}
+            </RechartsResponsive>
+          </React.Suspense>
         ) : (
           children
         )}
@@ -286,11 +291,6 @@ function ChartTooltipContent({
   );
 }
 
-/** Recharts' Tooltip with the token-styled content and a subtle cursor. */
-function ChartTooltip(props: TooltipProps) {
-  return <RechartsTooltip content={<ChartTooltipContent />} {...props} />;
-}
-
 /* ── legend ──────────────────────────────────────────────────────────────── */
 
 export interface ChartLegendContentProps {
@@ -337,19 +337,4 @@ function ChartLegendContent({ payload, verticalAlign = "bottom", className, hide
   );
 }
 
-/** Recharts' Legend with the token-styled content. */
-function ChartLegend(props: LegendProps) {
-  return <RechartsLegend content={<ChartLegendContent />} {...props} />;
-}
-
-export {
-  ChartContainer,
-  ChartContext,
-  ChartEmpty,
-  ChartError,
-  ChartLoading,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-};
+export { ChartContainer, ChartContext, ChartEmpty, ChartError, ChartLoading, ChartTooltipContent, ChartLegendContent };

package/src/components/chart/index.tsx

@@ -14,14 +14,15 @@ export {
   ChartContainer,
   ChartEmpty,
   ChartError,
-  ChartLegend,
   ChartLegendContent,
   ChartLoading,
-  ChartTooltip,
   ChartTooltipContent,
   seriesColor,
   useChart,
 } from "./container";
+// Recharts elements, so importing either is what makes an app pay for the
+// engine; see the note in recharts-parts.tsx.
+export { ChartLegend, ChartTooltip } from "./recharts-parts";
 export type { ChartContainerProps, ChartLegendContentProps, ChartTooltipContentProps } from "./container";
 export { nivoTheme, useNivoTheme } from "./nivo-theme";
 export type { NivoTheme } from "./nivo-theme";
@@ -41,6 +42,7 @@ export type {
   ChartDataFor,
   ChartDay,
   ChartEngine,
+  ChartLabels,
   ChartMatrix,
   ChartPoint,
   ChartRenderer,

package/src/components/chart/nivo-charts.tsx

@@ -18,16 +18,42 @@ export type NivoType = Extract<ChartType, "heatmap" | "calendar" | "treemap" | "
  */
 type AnyComponent = React.ComponentType<Record<string, unknown>>;
 
-const lazy = (load: () => Promise<AnyComponent>) =>
-  React.lazy(async () => ({ default: await load() }));
+const loaders = {
+  "heatmap-svg": async () => (await import("@nivo/heatmap")).ResponsiveHeatMap as AnyComponent,
+  "heatmap-canvas": async () => (await import("@nivo/heatmap")).ResponsiveHeatMapCanvas as AnyComponent,
+  "calendar-svg": async () => (await import("@nivo/calendar")).ResponsiveCalendar as unknown as AnyComponent,
+  "calendar-canvas": async () =>
+    (await import("@nivo/calendar")).ResponsiveCalendarCanvas as unknown as AnyComponent,
+  "treemap-svg": async () => (await import("@nivo/treemap")).ResponsiveTreeMap as AnyComponent,
+  "treemap-canvas": async () => (await import("@nivo/treemap")).ResponsiveTreeMapCanvas as AnyComponent,
+  "sunburst-svg": async () => (await import("@nivo/sunburst")).ResponsiveSunburst as AnyComponent,
+} satisfies Record<string, () => Promise<AnyComponent>>;
 
-const HeatMapSvg = lazy(async () => (await import("@nivo/heatmap")).ResponsiveHeatMap as AnyComponent);
-const HeatMapCanvas = lazy(async () => (await import("@nivo/heatmap")).ResponsiveHeatMapCanvas as AnyComponent);
-const CalendarSvg = lazy(async () => (await import("@nivo/calendar")).ResponsiveCalendar as unknown as AnyComponent);
-const CalendarCanvas = lazy(async () => (await import("@nivo/calendar")).ResponsiveCalendarCanvas as unknown as AnyComponent);
-const TreeMapSvg = lazy(async () => (await import("@nivo/treemap")).ResponsiveTreeMap as AnyComponent);
-const TreeMapCanvas = lazy(async () => (await import("@nivo/treemap")).ResponsiveTreeMapCanvas as AnyComponent);
-const SunburstSvg = lazy(async () => (await import("@nivo/sunburst")).ResponsiveSunburst as AnyComponent);
+type ChunkName = keyof typeof loaders;
+
+/*
+ * `React.lazy` memoises the outcome of its loader, a rejection included: a
+ * chunk that fails once — an offline moment, a deploy that moved the file —
+ * throws the same error for the life of the page, and no re-render retries it.
+ * The lazy components are therefore cached here rather than frozen at module
+ * scope, and `resetNivoChunks` drops the cache so the next render builds fresh
+ * ones and asks for the chunk again. `Chart`'s ChunkBoundary calls it.
+ */
+let chunks = new Map<ChunkName, AnyComponent>();
+
+function chunk(name: ChunkName): AnyComponent {
+  let component = chunks.get(name);
+  if (!component) {
+    component = React.lazy(async () => ({ default: await loaders[name]() })) as unknown as AnyComponent;
+    chunks.set(name, component);
+  }
+  return component;
+}
+
+/** Forget every loaded-or-failed Nivo chunk, so the next render loads it again. */
+export function resetNivoChunks(): void {
+  chunks = new Map();
+}
 
 export interface NivoRenderProps {
   type: NivoType;
@@ -93,7 +119,7 @@ export function NivoChart({ type, data, config, renderer, scale, legend, valueFo
 
   switch (type) {
     case "heatmap": {
-      const Component = canvas ? HeatMapCanvas : HeatMapSvg;
+      const Component = chunk(canvas ? "heatmap-canvas" : "heatmap-svg");
       // Either shape lands on Nivo's `[{ id, data: [{ x, y }] }]`.
       const rows = isMatrix(data) ? matrixToSeries(data as ChartMatrix) : (data as ChartSeries[]);
       // Labels only when cells are big enough to carry them.
@@ -139,7 +165,7 @@ export function NivoChart({ type, data, config, renderer, scale, legend, valueFo
     }
 
     case "calendar": {
-      const Component = canvas ? CalendarCanvas : CalendarSvg;
+      const Component = chunk(canvas ? "calendar-canvas" : "calendar-svg");
       const days = data as ChartDay[];
       const range = calendarRange(days, from, to);
       return (
@@ -177,7 +203,7 @@ export function NivoChart({ type, data, config, renderer, scale, legend, valueFo
     }
 
     case "treemap": {
-      const Component = canvas ? TreeMapCanvas : TreeMapSvg;
+      const Component = chunk(canvas ? "treemap-canvas" : "treemap-svg");
       const tree = data as ChartTree;
       return (
         <Component
@@ -202,9 +228,11 @@ export function NivoChart({ type, data, config, renderer, scale, legend, valueFo
     }
 
     case "sunburst": {
+      // Sunburst has no canvas renderer; SVG either way.
+      const Component = chunk("sunburst-svg");
       const tree = data as ChartTree;
       return (
-        <SunburstSvg
+        <Component
           data={tree}
           id={treeIdentity(tree)}
           value="value"

package/src/components/chart/nivo-lazy.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+/**
+ * Nivo, loaded on first render of a Nivo chart type.
+ *
+ * `nivo-charts.tsx` already loads each `@nivo/*` engine dynamically, but it was
+ * itself a static import, and it pulls in `nivo-theme.ts` — which reads
+ * `@nivo/core`, `@nivo/legends`, `@nivo/theming` and friends for real, about
+ * 63 kB of them. So a bundle that could reach `Chart` shipped Nivo's theming
+ * layer whether or not it ever drew a Nivo chart. One more dynamic boundary
+ * here puts the theme on the same footing as the engines it themes.
+ *
+ * Two levels of laziness, deliberately: this chunk, then the per-package
+ * loaders inside it, so a screen that draws a heatmap fetches the heatmap
+ * package and not the calendar, treemap and sunburst ones as well.
+ */
+
+import * as React from "react";
+import type { NivoRenderProps } from "./nivo-charts";
+
+type AnyComponent = React.ComponentType<Record<string, unknown>>;
+
+/**
+ * The loaded module, kept so {@link resetNivoChunks} can reach the inner
+ * per-package cache. Before the chunk loads there is nothing inside it to
+ * reset, and resetting the outer lazy component is enough to make the next
+ * render ask for it again.
+ */
+let loaded: typeof import("./nivo-charts") | null = null;
+let outer: AnyComponent | null = null;
+
+function chunk(): AnyComponent {
+  outer ??= React.lazy(async () => {
+    const module = await import("./nivo-charts");
+    loaded = module;
+    return { default: module.NivoChart as unknown as React.ComponentType };
+  }) as unknown as AnyComponent;
+  return outer;
+}
+
+/** Forget every loaded-or-failed Nivo chunk, outer and per-package, so the next render loads it again. */
+export function resetNivoChunks(): void {
+  outer = null;
+  loaded?.resetNivoChunks();
+  loaded = null;
+}
+
+/** `NivoChart` behind its chunk. Suspends on first render of a Nivo type. */
+export function NivoChartLazy(props: NivoRenderProps): React.ReactElement {
+  const Component = chunk();
+  return <Component {...(props as unknown as Record<string, unknown>)} />;
+}

package/src/components/chart/recharts-charts.tsx

@@ -24,9 +24,11 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
-import { ChartLegend, ChartTooltip, seriesColor } from "./container";
+import { seriesColor, useChart } from "./container";
+import { ChartLegend, ChartTooltip } from "./recharts-parts";
 import { toRows, toSlices } from "./data";
-import type { ChartConfig, ChartRow, ChartSeries, ChartSlice, ChartType } from "./types";
+import { contrastLabel, useThemeVersion } from "./tokens";
+import type { ChartConfig, ChartLabels, ChartRow, ChartSeries, ChartSlice, ChartType } from "./types";
 
 export type RechartsType = Extract<
   ChartType,
@@ -43,11 +45,91 @@ export interface RechartsRenderProps {
   legend: boolean;
   grid: boolean;
   tooltip: boolean;
+  /** Per-arc labels for pie and donut. Ignored by every other type. */
+  labels: ChartLabels;
   valueFormatter?: (value: number) => string;
 }
 
 const MARGIN = { top: 8, right: 8, bottom: 0, left: 0 };
 
+/**
+ * Where an arc label sits, as a fraction of the way from the inner radius to
+ * the outer one. Just inside the middle of the band: the arc is widest towards
+ * its outer edge, so a label pushed slightly out has more room than a centred
+ * one, without ever touching the rim.
+ */
+const ARC_LABEL_RADIUS = 0.58;
+
+/**
+ * Arcs smaller than this share of the whole are left unlabelled.
+ *
+ * Below roughly a twentieth the arc is narrower than the text it would carry,
+ * so the label either overflows into its neighbours or has to be dragged
+ * outside on a leader line. Leader lines on a small chart are worse than no
+ * label — they collide with each other and with the legend, and the reader
+ * still has to trace them. The tooltip covers the slices that fall out.
+ */
+const ARC_LABEL_MIN_FRACTION = 0.05;
+
+/**
+ * What Recharts hands a `<Pie label={…}>` renderer. Every geometry field is
+ * optional on its side — the same callback types the label of a chart that has
+ * not measured itself yet — so each is checked before it is used rather than
+ * asserted away.
+ */
+interface ArcLabelProps {
+  cx?: number;
+  cy?: number;
+  midAngle?: number;
+  innerRadius?: number;
+  outerRadius?: number;
+  percent?: number;
+  value?: number;
+  index?: number;
+}
+
+/**
+ * A per-arc label, drawn inside the arc it belongs to.
+ *
+ * Inside rather than outside so there is nothing to collide: each label is
+ * bounded by its own sector, and a sector too thin to hold one simply does not
+ * get one. The text colour comes from `contrastLabel`, the same measured
+ * ink-or-white choice the Nivo charts make, so a label stays legible on a pale
+ * series colour and on a dark one, in either theme.
+ */
+function arcLabel(
+  labels: Exclude<ChartLabels, "none">,
+  colourOn: (fill: string) => string,
+  fillOf: (index: number) => string,
+  valueFormatter?: (value: number) => string,
+) {
+  return function ArcLabel({ cx, cy, midAngle, innerRadius, outerRadius, percent, value, index }: ArcLabelProps) {
+    if (cx == null || cy == null || midAngle == null || innerRadius == null || outerRadius == null) return null;
+    if (!(percent != null && percent >= ARC_LABEL_MIN_FRACTION)) return null;
+    const radius = innerRadius + (outerRadius - innerRadius) * ARC_LABEL_RADIUS;
+    // Recharts measures angles anticlockwise from the positive x-axis, SVG's y
+    // grows downward, so the sine is negated to land on the drawn arc.
+    const radians = (-midAngle * Math.PI) / 180;
+    const text =
+      labels === "percent"
+        ? `${Math.round(percent * 100)}%`
+        : (valueFormatter?.(Number(value)) ?? String(value ?? ""));
+    return (
+      <text
+        data-slot="chart-arc-label"
+        x={cx + radius * Math.cos(radians)}
+        y={cy + radius * Math.sin(radians)}
+        fill={colourOn(fillOf(index ?? 0))}
+        textAnchor="middle"
+        dominantBaseline="central"
+        className="pointer-events-none text-[length:var(--ds-text-caption)] font-medium tabular-nums"
+      >
+        {text}
+      </text>
+    );
+  };
+}
+
 /**
  * The Recharts side of `Chart`. Returns a chart element for the
  * ResponsiveContainer inside ChartContainer; colours come from `seriesColor`
@@ -64,8 +146,17 @@ export function RechartsChart({
   legend,
   grid,
   tooltip,
+  labels,
   valueFormatter,
 }: RechartsRenderProps): React.ReactElement {
+  // Arc labels sit on top of a series colour, so their ink depends on which
+  // colour and on the theme. `useThemeVersion` is the cache key for that DOM
+  // read; `element` scopes it to a nested theme rather than the document.
+  const themeVersion = useThemeVersion();
+  const element = useChart()?.element ?? null;
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- themeVersion is the cache key for the DOM read
+  const colourOn = React.useMemo(() => contrastLabel(element), [element, themeVersion]);
+
   const tip = tooltip ? (
     <ChartTooltip
       formatter={valueFormatter ? (value: unknown) => valueFormatter(Number(value)) : undefined}
@@ -152,6 +243,7 @@ export function RechartsChart({
     case "pie":
     case "donut": {
       const slices = toSlices(data as ChartSlice[]);
+      const fillOf = (i: number) => seriesColor(config, slices[i]?.id ?? String(i), i);
       return (
         <PieChart margin={MARGIN}>
           {tip}
@@ -164,9 +256,12 @@ export function RechartsChart({
             outerRadius="80%"
             paddingAngle={type === "donut" ? 2 : 0}
             strokeWidth={1}
+            label={labels === "none" ? undefined : arcLabel(labels, colourOn, fillOf, valueFormatter)}
+            // The labels are inside their arcs, so there is nothing to lead to.
+            labelLine={false}
           >
             {slices.map((slice, i) => (
-              <Cell key={slice.id} fill={seriesColor(config, slice.id, i)} />
+              <Cell key={slice.id} fill={fillOf(i)} />
             ))}
           </Pie>
         </PieChart>

package/src/components/chart/recharts-lazy.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+/**
+ * Recharts, loaded on first render of a chart.
+ *
+ * Recharts is 774 kB of the package's dependency weight — more than everything
+ * else in `cortena-ui` combined — and until this existed it was in the static
+ * graph of anything that could reach `Chart`, the A2UI catalogue included. An
+ * app that imported the catalogue to render a text card paid for a charting
+ * engine it never drew with.
+ *
+ * Both engines are now on the same footing: `@nivo/*` in `nivo-charts.tsx` and
+ * Recharts here are dynamic imports, so a chart type costs its engine when it
+ * is first drawn and nothing before. `ChartContainer`'s responsive wrapper is
+ * here for the same reason — it is Recharts' `ResponsiveContainer`, and
+ * `ChartContainer` is on the eager path because `Chart` renders it before it
+ * knows which engine will draw.
+ *
+ * The chunk cache repeats the shape in `nivo-charts.tsx` for the same reason:
+ * `React.lazy` memoises a rejection for the life of the page, so the lazy
+ * components are cached here rather than frozen at module scope and
+ * {@link resetRechartsChunks} drops them, letting `Chart`'s ChunkBoundary
+ * retry a chunk that failed once.
+ */
+
+import * as React from "react";
+import type { RechartsRenderProps } from "./recharts-charts";
+
+type AnyComponent = React.ComponentType<Record<string, unknown>>;
+
+const loaders = {
+  chart: async () => (await import("./recharts-charts")).RechartsChart as unknown as AnyComponent,
+  responsive: async () => (await import("recharts")).ResponsiveContainer as unknown as AnyComponent,
+} satisfies Record<string, () => Promise<AnyComponent>>;
+
+type ChunkName = keyof typeof loaders;
+
+let chunks = new Map<ChunkName, AnyComponent>();
+
+function chunk(name: ChunkName): AnyComponent {
+  let component = chunks.get(name);
+  if (!component) {
+    component = React.lazy(async () => ({ default: await loaders[name]() })) as unknown as AnyComponent;
+    chunks.set(name, component);
+  }
+  return component;
+}
+
+/** Forget every loaded-or-failed Recharts chunk, so the next render loads it again. */
+export function resetRechartsChunks(): void {
+  chunks = new Map();
+}
+
+/** `RechartsChart` behind its chunk. Suspends on first render of a Recharts type. */
+export function RechartsChartLazy(props: RechartsRenderProps): React.ReactElement {
+  const Component = chunk("chart");
+  return <Component {...(props as unknown as Record<string, unknown>)} />;
+}
+
+export interface RechartsResponsiveProps {
+  width: string | number;
+  height: string | number;
+  minWidth?: number;
+  minHeight?: number;
+  children: React.ReactElement;
+}
+
+/** Recharts' `ResponsiveContainer` behind its chunk. */
+export function RechartsResponsive(props: RechartsResponsiveProps): React.ReactElement {
+  const Component = chunk("responsive");
+  return <Component {...(props as unknown as Record<string, unknown>)} />;
+}

package/src/components/chart/recharts-parts.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+/**
+ * The two parts of the chart surface that are Recharts elements rather than
+ * plain markup: its `Tooltip` and its `Legend`, each given the token-styled
+ * content from `container.tsx`.
+ *
+ * They live here and not in `container.tsx` for one reason. `container.tsx` is
+ * on the eager path — `Chart` renders `ChartContainer` before it knows which
+ * engine will draw — and `recharts-charts.tsx`, the lazy engine chunk, needs
+ * both of these. A binding the lazy chunk imports from an eager module is
+ * pulled into the eager chunk, and these two carry `recharts` with them: with
+ * them in `container.tsx`, importing `Chart` shipped all 774 kB of Recharts up
+ * front however lazy the rest of the chunking was.
+ *
+ * With them here, the only static importer is the lazy chunk, so they travel
+ * with it. `index.tsx` still re-exports them, so a consumer composing a one-off
+ * chart imports them from `cortena-ui/chart` exactly as before — and pays for
+ * Recharts, which is the point of asking for them.
+ */
+
+import * as React from "react";
+import { Legend as RechartsLegend, Tooltip as RechartsTooltip, type LegendProps, type TooltipProps } from "recharts";
+import { ChartLegendContent, ChartTooltipContent } from "./container";
+
+/** Recharts' Tooltip with the token-styled content and a subtle cursor. */
+export function ChartTooltip(props: TooltipProps): React.ReactElement {
+  return <RechartsTooltip content={<ChartTooltipContent />} {...props} />;
+}
+
+/** Recharts' Legend with the token-styled content. */
+export function ChartLegend(props: LegendProps): React.ReactElement {
+  return <RechartsLegend content={<ChartLegendContent />} {...props} />;
+}