@misoto22/folio 0.0.0 → 0.16.0

package/dist/charts/lib/chart.d.ts

@@ -0,0 +1,94 @@
+import * as react from 'react';
+import { ReactNode, ComponentType, ComponentProps } from 'react';
+import { ResponsiveContainer } from 'recharts';
+
+/**
+ * How many series the system will paint before it refuses.
+ *
+ * Eight is not a rendering limit — it is the width of the validated ramp in
+ * `tokens.css`. A ninth series has no slot, and generating one would mean
+ * inventing a colour nobody checked against the eighth. The catalogued answer
+ * to "I have twelve categories" is to fold the tail into an "Other" series or
+ * to facet, and this constant is where that decision is enforced rather than
+ * left to whoever is looking at the chart.
+ */
+declare const SERIES_SLOTS = 8;
+/** Theme name → the selector its block is written under. */
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: "[data-mode='dark']";
+};
+type ThemeKey = keyof typeof THEMES;
+/** Colours for one series, per theme. At least one theme must be given. */
+type ThemeColors = {
+    [K in ThemeKey]: Required<Pick<Record<ThemeKey, string[]>, K>> & Partial<Omit<Record<ThemeKey, string[]>, K>>;
+}[ThemeKey];
+interface ChartSeries {
+    /**
+     * What the legend, the tooltip and the hidden data table call this series.
+     *
+     * Required, unlike the shape this was ported from. Colour is never the only
+     * carrier of identity in this system, and a legend entry with no label is a
+     * swatch that means nothing — least of all in the monochrome default, where
+     * two series differ by a step of grey and a texture.
+     */
+    label: ReactNode;
+    /** Drawn in place of the legend/tooltip swatch. Decorative; label still wins. */
+    icon?: ComponentType;
+    /**
+     * Explicit colours for this series, overriding its slot on the series ramp.
+     *
+     * Reach for this only when the data itself carries a colour the reader
+     * already knows — a brand, a traffic light, a map key. For "I want my chart
+     * to have colours", set `data-chart-palette="chroma"` on any ancestor: that
+     * swaps the whole ramp for a palette validated against both grounds, which a
+     * hand-picked array is not.
+     *
+     * More than one colour paints the series as a horizontal gradient across
+     * those stops. Values are plain CSS colours; anything that could break out of
+     * a declaration is rejected at the boundary rather than injected.
+     */
+    colors?: ThemeColors;
+}
+/** Series keys → how each is labelled and painted. Declaration order is slot order. */
+type ChartConfig = Record<string, ChartSeries>;
+interface ChartContextValue {
+    config: ChartConfig;
+}
+/** The chart config of the nearest chart root. Throws outside one. */
+declare function useChart(): ChartContextValue;
+/** How many gradient stops a series paints with — one means a flat fill. */
+declare function colorStops(series: ChartSeries | undefined): number;
+/**
+ * A series key, reduced to what may appear in a custom property name. Keys come
+ * from consumer data, so the same boundary argument as `isSafeColor` applies —
+ * here it is the property NAME rather than its value.
+ */
+declare function cssName(key: string): string;
+interface ChartContainerProps extends Omit<ComponentProps<'div'>, 'children'>, Pick<ComponentProps<typeof ResponsiveContainer>, 'initialDimension' | 'minHeight' | 'minWidth' | 'maxHeight' | 'height' | 'width' | 'children'> {
+    config: ChartConfig;
+    /** Rendered under the plot, inside the same measured box — the brush lives here. */
+    footer?: ReactNode;
+}
+/**
+ * The measured box every chart is drawn into, and the only place Recharts'
+ * hard-coded greys are re-pointed at system tokens.
+ *
+ * Recharts paints its axes, grid, cursor and radial track with literal `#ccc`
+ * and `#fff`. The selectors below catch each of those and hand it a token, so a
+ * chart follows light/dark and a surface theme without a consumer configuring
+ * anything — and so nothing in the package has to pass a colour down by prop.
+ */
+declare function ChartContainer({ id, config, initialDimension, className, children, footer, ...rest }: ChartContainerProps): react.JSX.Element;
+/**
+ * Reads the config entry behind a Recharts payload item.
+ *
+ * Recharts hands the same series different names in different chart types — a
+ * pie sector's key is on `payload.payload[nameKey]`, a bar's is `dataKey` — so
+ * this is the one place that disagreement is resolved.
+ */
+declare function seriesFromPayload(config: ChartConfig, payload: unknown, key: string): ChartSeries | undefined;
+/** Formats an expanded stack's axis, where 0–1 means 0–100%. */
+declare function percentTick(value: number): string;
+
+export { type ChartConfig, ChartContainer, type ChartContainerProps, type ChartSeries, SERIES_SLOTS, colorStops, cssName, percentTick, seriesFromPayload, useChart };

package/dist/charts/lib/chart.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useId,
+  useMemo
+} from "react";
+import { ResponsiveContainer } from "recharts";
+import { cn } from "../../lib/cn.js";
+const SERIES_SLOTS = 8;
+const THEMES = { light: "", dark: "[data-mode='dark']" };
+const THEME_KEYS = Object.keys(THEMES);
+const ChartContext = createContext(null);
+function useChart() {
+  const context = useContext(ChartContext);
+  if (!context) throw new Error("A chart part must be rendered inside a chart root");
+  return context;
+}
+const CSS_COLOR = /^[A-Za-z0-9#(),.%\-\s_]{1,120}$/;
+function isSafeColor(value) {
+  return typeof value === "string" && CSS_COLOR.test(value) && !value.includes("/*");
+}
+function distribute(colors, slots) {
+  if (colors.length >= slots) return colors.slice(0, slots);
+  const base = Math.floor(slots / colors.length);
+  const extra = slots % colors.length;
+  const out = [];
+  colors.forEach((color, index) => {
+    const count = base + (index >= colors.length - extra ? 1 : 0);
+    for (let n = 0; n < count; n += 1) out.push(color);
+  });
+  return out;
+}
+function colorStops(series) {
+  if (!series?.colors) return 1;
+  return Math.max(1, ...THEME_KEYS.map((theme) => series.colors?.[theme]?.length ?? 0));
+}
+function ChartStyle({ id, config }) {
+  const css = useMemo(() => {
+    const entries = Object.entries(config);
+    const rules = (theme) => entries.flatMap(([key, series], slot) => {
+      const stops = colorStops(series);
+      const slotColor = `var(--series-${slot % SERIES_SLOTS + 1})`;
+      const given = series.colors?.[theme] ?? series.colors?.light ?? series.colors?.dark;
+      const safe = given?.filter(isSafeColor) ?? [];
+      const colors = safe.length > 0 ? safe : [slotColor];
+      return distribute(colors, stops).map(
+        (color, index) => `  --color-${cssName(key)}-${index}: ${color};`
+      );
+    }).join("\n");
+    return THEME_KEYS.map((theme) => {
+      const body = rules(theme);
+      if (!body) return "";
+      return `${THEMES[theme]} [data-chart='${id}'] {
+${body}
+}`;
+    }).filter(Boolean).join("\n");
+  }, [id, config]);
+  if (!css) return null;
+  return /* @__PURE__ */ jsx("style", { children: css });
+}
+function cssName(key) {
+  return key.replace(/[^A-Za-z0-9_-]/g, "-");
+}
+function ChartContainer({
+  id,
+  config,
+  initialDimension = { width: 320, height: 200 },
+  className,
+  children,
+  footer,
+  ...rest
+}) {
+  const generated = useId().replace(/:/g, "");
+  const chartId = `chart-${id ?? generated}`;
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: cn(
+        "relative flex min-h-0 w-full flex-1 flex-col justify-center text-xs",
+        // 16:9 is right for a card and wrong for a full-width panel: at
+        // 1200px it is a 675px-tall plot with six points in it. The cap is
+        // what stops the aspect ratio running away with a wide container,
+        // and `min-h` keeps it from collapsing in a narrow one.
+        //
+        // With a footer the shape moves DOWN one element rather than being
+        // dropped — see the container below. Sizing this box 16:9 would hand
+        // the footer's height to the footer out of the plot's share, which is
+        // a plot that shrinks as its brush grows.
+        !footer && "aspect-video max-h-[26rem] min-h-[13rem]",
+        // Recharts' own defaults, re-pointed at the token layer.
+        "[&_.recharts-cartesian-axis-tick_text]:fill-(--chart-axis)",
+        "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-(--chart-grid)",
+        "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-(--chart-cursor)",
+        "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-(--chart-grid)",
+        "[&_.recharts-radial-bar-background-sector]:fill-(--chart-track)",
+        "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-(--chart-track)",
+        "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-(--chart-grid)",
+        "[&_.recharts-dot[stroke='#fff']]:stroke-transparent",
+        "[&_.recharts-sector[stroke='#fff']]:stroke-transparent",
+        // Keyboard-focusable SVGs use the same global :focus-visible rule as
+        // every other control. A utility-level outline reset here overrides
+        // that base rule and leaves a working chart with no visible focus.
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx(
+          ResponsiveContainer,
+          {
+            className: cn(
+              "w-full flex-1",
+              footer ? "aspect-video max-h-[26rem] min-h-[13rem]" : "min-h-0"
+            ),
+            initialDimension,
+            children
+          }
+        ),
+        footer
+      ]
+    }
+  ) });
+}
+function seriesFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) return void 0;
+  const nested = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let name = key;
+  const direct = payload[key];
+  if (typeof direct === "string") name = direct;
+  else if (nested && typeof nested[key] === "string") name = nested[key];
+  return name in config ? config[name] : config[key];
+}
+function percentTick(value) {
+  return `${Math.round(value * 100)}%`;
+}
+export {
+  ChartContainer,
+  SERIES_SLOTS,
+  colorStops,
+  cssName,
+  percentTick,
+  seriesFromPayload,
+  useChart
+};
+//# sourceMappingURL=chart.js.map

package/dist/charts/lib/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/chart.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useContext,\n  useId,\n  useMemo,\n  type ComponentProps,\n  type ComponentType,\n  type ReactNode,\n} from 'react'\nimport { ResponsiveContainer } from 'recharts'\nimport { cn } from '../../lib/cn'\n\n/**\n * How many series the system will paint before it refuses.\n *\n * Eight is not a rendering limit — it is the width of the validated ramp in\n * `tokens.css`. A ninth series has no slot, and generating one would mean\n * inventing a colour nobody checked against the eighth. The catalogued answer\n * to \"I have twelve categories\" is to fold the tail into an \"Other\" series or\n * to facet, and this constant is where that decision is enforced rather than\n * left to whoever is looking at the chart.\n */\nexport const SERIES_SLOTS = 8\n\n/** Theme name → the selector its block is written under. */\nconst THEMES = { light: '', dark: \"[data-mode='dark']\" } as const\n\ntype ThemeKey = keyof typeof THEMES\n\nconst THEME_KEYS = Object.keys(THEMES) as ThemeKey[]\n\n/** Colours for one series, per theme. At least one theme must be given. */\ntype ThemeColors = {\n  [K in ThemeKey]: Required<Pick<Record<ThemeKey, string[]>, K>> &\n    Partial<Omit<Record<ThemeKey, string[]>, K>>\n}[ThemeKey]\n\nexport interface ChartSeries {\n  /**\n   * What the legend, the tooltip and the hidden data table call this series.\n   *\n   * Required, unlike the shape this was ported from. Colour is never the only\n   * carrier of identity in this system, and a legend entry with no label is a\n   * swatch that means nothing — least of all in the monochrome default, where\n   * two series differ by a step of grey and a texture.\n   */\n  label: ReactNode\n  /** Drawn in place of the legend/tooltip swatch. Decorative; label still wins. */\n  icon?: ComponentType\n  /**\n   * Explicit colours for this series, overriding its slot on the series ramp.\n   *\n   * Reach for this only when the data itself carries a colour the reader\n   * already knows — a brand, a traffic light, a map key. For \"I want my chart\n   * to have colours\", set `data-chart-palette=\"chroma\"` on any ancestor: that\n   * swaps the whole ramp for a palette validated against both grounds, which a\n   * hand-picked array is not.\n   *\n   * More than one colour paints the series as a horizontal gradient across\n   * those stops. Values are plain CSS colours; anything that could break out of\n   * a declaration is rejected at the boundary rather than injected.\n   */\n  colors?: ThemeColors\n}\n\n/** Series keys → how each is labelled and painted. Declaration order is slot order. */\nexport type ChartConfig = Record<string, ChartSeries>\n\ninterface ChartContextValue {\n  config: ChartConfig\n}\n\nconst ChartContext = createContext<ChartContextValue | null>(null)\n\n/** The chart config of the nearest chart root. Throws outside one. */\nexport function useChart(): ChartContextValue {\n  const context = useContext(ChartContext)\n  if (!context) throw new Error('A chart part must be rendered inside a chart root')\n  return context\n}\n\n/**\n * A CSS colour, or something that would escape the declaration it is written\n * into.\n *\n * `ChartStyle` writes consumer-supplied values into a `<style>` element, which\n * makes this a system boundary in the security sense: without the check, a\n * `colors` array carrying `red; } html { display: none } .x {` is not a colour,\n * it is a stylesheet. The allowed set is deliberately shaped around what a\n * colour is made of — identifiers, digits, `#`, brackets, commas, percent — so\n * `var(--x)`, `oklch(…)` and `color-mix(in srgb, …)` all pass and no `;`, `{`,\n * `}`, `<`, `\\` or comment sequence does.\n */\nconst CSS_COLOR = /^[A-Za-z0-9#(),.%\\-\\s_]{1,120}$/\n\nfunction isSafeColor(value: unknown): value is string {\n  return typeof value === 'string' && CSS_COLOR.test(value) && !value.includes('/*')\n}\n\n/**\n * Distributes fewer colours than slots, giving the surplus to the last stops.\n * Two colours over four slots read as `[a, a, b, b]`; three over four as\n * `[a, b, c, c]`.\n */\nfunction distribute(colors: string[], slots: number): string[] {\n  if (colors.length >= slots) return colors.slice(0, slots)\n\n  const base = Math.floor(slots / colors.length)\n  const extra = slots % colors.length\n  const out: string[] = []\n  colors.forEach((color, index) => {\n    const count = base + (index >= colors.length - extra ? 1 : 0)\n    for (let n = 0; n < count; n += 1) out.push(color)\n  })\n  return out\n}\n\n/** How many gradient stops a series paints with — one means a flat fill. */\nexport function colorStops(series: ChartSeries | undefined): number {\n  if (!series?.colors) return 1\n  return Math.max(1, ...THEME_KEYS.map((theme) => series.colors?.[theme]?.length ?? 0))\n}\n\n/**\n * The custom properties one chart instance paints from.\n *\n * Every series resolves to `--color-<key>-<n>`, and every mark, swatch and\n * gradient stop in the package reads only those names. That indirection is what\n * lets the same chart be repainted by an ancestor attribute — a theme, a\n * palette, dark mode — without a component knowing anything about colour.\n *\n * A series with no `colors` takes its slot on the ramp, in declaration order.\n * That is the \"assign in fixed order, never cycle\" rule expressed as code: the\n * fourth series is `--series-4` whether or not the first three are on screen,\n * so hiding a series never repaints the survivors.\n */\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n  const css = useMemo(() => {\n    const entries = Object.entries(config)\n\n    const rules = (theme: ThemeKey) =>\n      entries\n        .flatMap(([key, series], slot) => {\n          const stops = colorStops(series)\n          const slotColor = `var(--series-${(slot % SERIES_SLOTS) + 1})`\n          const given = series.colors?.[theme] ?? series.colors?.light ?? series.colors?.dark\n          const safe = given?.filter(isSafeColor) ?? []\n          // A rejected colour falls back to the ramp rather than to nothing: an\n          // unpainted series is invisible, which is a worse failure than an\n          // ignored value and a harder one to notice.\n          const colors = safe.length > 0 ? safe : [slotColor]\n          return distribute(colors, stops).map(\n            (color, index) => `  --color-${cssName(key)}-${index}: ${color};`,\n          )\n        })\n        .join('\\n')\n\n    return THEME_KEYS.map((theme) => {\n      const body = rules(theme)\n      if (!body) return ''\n      return `${THEMES[theme]} [data-chart='${id}'] {\\n${body}\\n}`\n    })\n      .filter(Boolean)\n      .join('\\n')\n  }, [id, config])\n\n  if (!css) return null\n\n  return <style>{css}</style>\n}\n\n/**\n * A series key, reduced to what may appear in a custom property name. Keys come\n * from consumer data, so the same boundary argument as `isSafeColor` applies —\n * here it is the property NAME rather than its value.\n */\nexport function cssName(key: string): string {\n  return key.replace(/[^A-Za-z0-9_-]/g, '-')\n}\n\nexport interface ChartContainerProps\n  extends Omit<ComponentProps<'div'>, 'children'>,\n    Pick<\n      ComponentProps<typeof ResponsiveContainer>,\n      'initialDimension' | 'minHeight' | 'minWidth' | 'maxHeight' | 'height' | 'width' | 'children'\n    > {\n  config: ChartConfig\n  /** Rendered under the plot, inside the same measured box — the brush lives here. */\n  footer?: ReactNode\n}\n\n/**\n * The measured box every chart is drawn into, and the only place Recharts'\n * hard-coded greys are re-pointed at system tokens.\n *\n * Recharts paints its axes, grid, cursor and radial track with literal `#ccc`\n * and `#fff`. The selectors below catch each of those and hand it a token, so a\n * chart follows light/dark and a surface theme without a consumer configuring\n * anything — and so nothing in the package has to pass a colour down by prop.\n */\nexport function ChartContainer({\n  id,\n  config,\n  initialDimension = { width: 320, height: 200 },\n  className,\n  children,\n  footer,\n  ...rest\n}: ChartContainerProps) {\n  const generated = useId().replace(/:/g, '')\n  const chartId = `chart-${id ?? generated}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          'relative flex min-h-0 w-full flex-1 flex-col justify-center text-xs',\n          // 16:9 is right for a card and wrong for a full-width panel: at\n          // 1200px it is a 675px-tall plot with six points in it. The cap is\n          // what stops the aspect ratio running away with a wide container,\n          // and `min-h` keeps it from collapsing in a narrow one.\n          //\n          // With a footer the shape moves DOWN one element rather than being\n          // dropped — see the container below. Sizing this box 16:9 would hand\n          // the footer's height to the footer out of the plot's share, which is\n          // a plot that shrinks as its brush grows.\n          !footer && 'aspect-video max-h-[26rem] min-h-[13rem]',\n          // Recharts' own defaults, re-pointed at the token layer.\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-(--chart-axis)\",\n          \"[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-(--chart-grid)\",\n          '[&_.recharts-curve.recharts-tooltip-cursor]:stroke-(--chart-cursor)',\n          \"[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-(--chart-grid)\",\n          '[&_.recharts-radial-bar-background-sector]:fill-(--chart-track)',\n          '[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-(--chart-track)',\n          \"[&_.recharts-reference-line_[stroke='#ccc']]:stroke-(--chart-grid)\",\n          \"[&_.recharts-dot[stroke='#fff']]:stroke-transparent\",\n          \"[&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n          // Keyboard-focusable SVGs use the same global :focus-visible rule as\n          // every other control. A utility-level outline reset here overrides\n          // that base rule and leaves a working chart with no visible focus.\n          className,\n        )}\n        {...rest}\n      >\n        <ChartStyle id={chartId} config={config} />\n        {/* The plot carries the shape when there is a footer under it.\n            It used to carry nothing: the outer box dropped `aspect-video` AND\n            `min-h` the moment a footer existed, on the reasoning that a fixed\n            aspect plus a footer overflows — which is true of the aspect and\n            not of the floor. So a chart with a brush had a plot with no\n            intrinsic height at all, and in any container that sizes to its\n            content the plot measured zero and only the brush's own 56px\n            survived. Recharts says so out loud — \"width(-1) and height(-1) of\n            chart should be greater than 0\" — into a console nobody reads. */}\n        <ResponsiveContainer\n          className={cn(\n            'w-full flex-1',\n            footer ? 'aspect-video max-h-[26rem] min-h-[13rem]' : 'min-h-0',\n          )}\n          initialDimension={initialDimension}\n        >\n          {children}\n        </ResponsiveContainer>\n        {footer}\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\n/**\n * Reads the config entry behind a Recharts payload item.\n *\n * Recharts hands the same series different names in different chart types — a\n * pie sector's key is on `payload.payload[nameKey]`, a bar's is `dataKey` — so\n * this is the one place that disagreement is resolved.\n */\nexport function seriesFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string,\n): ChartSeries | undefined {\n  if (typeof payload !== 'object' || payload === null) return undefined\n\n  const nested =\n    'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null\n      ? (payload.payload as Record<string, unknown>)\n      : undefined\n\n  let name = key\n  const direct = (payload as Record<string, unknown>)[key]\n  if (typeof direct === 'string') name = direct\n  else if (nested && typeof nested[key] === 'string') name = nested[key] as string\n\n  return name in config ? config[name] : config[key]\n}\n\n/** Formats an expanded stack's axis, where 0–1 means 0–100%. */\nexport function percentTick(value: number): string {\n  return `${Math.round(value * 100)}%`\n}\n"],"mappings":"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","names":[]}

package/dist/charts/lib/dot.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+
+/** How a point marker is drawn on a line or an area. */
+type ChartDotVariant = 'default' | 'border' | 'colored-border';
+interface ChartDotProps {
+    cx?: number;
+    cy?: number;
+    /** The series this dot belongs to — it picks up that series' gradient. */
+    dataKey: string;
+    /** The owning mark's id, which scopes its gradient. */
+    chartId: string;
+    className?: string;
+    fillOpacity?: number;
+    variant?: ChartDotVariant;
+    /** The intro wipe's mask, so a resting dot reveals with its own line. */
+    maskId?: string;
+}
+/**
+ * A point marker painted from its series' gradient rather than from a flat
+ * colour.
+ *
+ * The trick each variant shares: a full-width rect filled with the series
+ * gradient, clipped to a circle. Filling the circle directly would restart the
+ * gradient inside the dot's own bounding box, so every dot on a line would be
+ * the same colour instead of sampling the gradient at the x it sits on.
+ */
+declare const ChartDot: react.MemoExoticComponent<({ cx, cy, dataKey, chartId, className, fillOpacity, variant, maskId, }: ChartDotProps) => react.JSX.Element | null>;
+
+export { ChartDot, type ChartDotProps, type ChartDotVariant };

package/dist/charts/lib/dot.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useId } from "react";
+import { cn } from "../../lib/cn.js";
+const ChartDot = memo(function ChartDot2({
+  cx,
+  cy,
+  dataKey,
+  chartId,
+  className,
+  fillOpacity = 1,
+  variant = "default",
+  maskId
+}) {
+  const dotId = useId().replace(/:/g, "");
+  if (cx === void 0 || cy === void 0) return null;
+  const paint = `url(#${chartId}-colors-${dataKey})`;
+  const mask = maskId ? `url(#${maskId})` : void 0;
+  if (variant === "border") {
+    const r2 = 6;
+    const inner = r2 - 2.5;
+    return /* @__PURE__ */ jsxs("g", { className: cn("text-(--chart-surface)", className), mask, children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: `dot-${dotId}`, children: /* @__PURE__ */ jsx("circle", { cx, cy, r: inner }) }) }),
+      /* @__PURE__ */ jsx("circle", { cx, cy, r: r2, fill: "currentColor" }),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "0",
+          y: cy - inner,
+          width: "100%",
+          height: inner * 2,
+          fill: paint,
+          fillOpacity,
+          clipPath: `url(#dot-${dotId})`
+        }
+      )
+    ] });
+  }
+  if (variant === "colored-border") {
+    const r2 = 3;
+    const stroke = 1;
+    return /* @__PURE__ */ jsxs("g", { className: cn("text-(--chart-surface)", className), mask, children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: `dot-${dotId}`, children: /* @__PURE__ */ jsx("circle", { cx, cy, r: r2 + stroke / 2 }) }) }),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "0",
+          y: cy - r2 - stroke / 2,
+          width: "100%",
+          height: (r2 + stroke / 2) * 2,
+          fill: paint,
+          fillOpacity,
+          clipPath: `url(#dot-${dotId})`
+        }
+      ),
+      /* @__PURE__ */ jsx("circle", { cx, cy, r: r2 - stroke / 2, fill: "currentColor" })
+    ] });
+  }
+  const r = 3;
+  return /* @__PURE__ */ jsxs("g", { className, mask, children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: `dot-${dotId}`, children: /* @__PURE__ */ jsx("circle", { cx, cy, r }) }) }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "0",
+        y: cy - r,
+        width: "100%",
+        height: r * 2,
+        fill: paint,
+        fillOpacity,
+        clipPath: `url(#dot-${dotId})`
+      }
+    )
+  ] });
+});
+export {
+  ChartDot
+};
+//# sourceMappingURL=dot.js.map

package/dist/charts/lib/dot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/dot.tsx"],"sourcesContent":["import { memo, useId } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** How a point marker is drawn on a line or an area. */\nexport type ChartDotVariant = 'default' | 'border' | 'colored-border'\n\nexport interface ChartDotProps {\n  cx?: number\n  cy?: number\n  /** The series this dot belongs to — it picks up that series' gradient. */\n  dataKey: string\n  /** The owning mark's id, which scopes its gradient. */\n  chartId: string\n  className?: string\n  fillOpacity?: number\n  variant?: ChartDotVariant\n  /** The intro wipe's mask, so a resting dot reveals with its own line. */\n  maskId?: string\n}\n\n/**\n * A point marker painted from its series' gradient rather than from a flat\n * colour.\n *\n * The trick each variant shares: a full-width rect filled with the series\n * gradient, clipped to a circle. Filling the circle directly would restart the\n * gradient inside the dot's own bounding box, so every dot on a line would be\n * the same colour instead of sampling the gradient at the x it sits on.\n */\nexport const ChartDot = memo(function ChartDot({\n  cx,\n  cy,\n  dataKey,\n  chartId,\n  className,\n  fillOpacity = 1,\n  variant = 'default',\n  maskId,\n}: ChartDotProps) {\n  const dotId = useId().replace(/:/g, '')\n\n  if (cx === undefined || cy === undefined) return null\n\n  const paint = `url(#${chartId}-colors-${dataKey})`\n  const mask = maskId ? `url(#${maskId})` : undefined\n\n  if (variant === 'border') {\n    // A wide ground ring in the page colour, so the dot reads as sitting on top\n    // of the line rather than being a bulge in it.\n    const r = 6\n    const inner = r - 2.5\n    return (\n      <g className={cn('text-(--chart-surface)', className)} mask={mask}>\n        <defs>\n          <clipPath id={`dot-${dotId}`}>\n            <circle cx={cx} cy={cy} r={inner} />\n          </clipPath>\n        </defs>\n        <circle cx={cx} cy={cy} r={r} fill=\"currentColor\" />\n        <rect\n          x=\"0\"\n          y={cy - inner}\n          width=\"100%\"\n          height={inner * 2}\n          fill={paint}\n          fillOpacity={fillOpacity}\n          clipPath={`url(#dot-${dotId})`}\n        />\n      </g>\n    )\n  }\n\n  if (variant === 'colored-border') {\n    const r = 3\n    const stroke = 1\n    return (\n      <g className={cn('text-(--chart-surface)', className)} mask={mask}>\n        <defs>\n          <clipPath id={`dot-${dotId}`}>\n            <circle cx={cx} cy={cy} r={r + stroke / 2} />\n          </clipPath>\n        </defs>\n        <rect\n          x=\"0\"\n          y={cy - r - stroke / 2}\n          width=\"100%\"\n          height={(r + stroke / 2) * 2}\n          fill={paint}\n          fillOpacity={fillOpacity}\n          clipPath={`url(#dot-${dotId})`}\n        />\n        <circle cx={cx} cy={cy} r={r - stroke / 2} fill=\"currentColor\" />\n      </g>\n    )\n  }\n\n  const r = 3\n  return (\n    <g className={className} mask={mask}>\n      <defs>\n        <clipPath id={`dot-${dotId}`}>\n          <circle cx={cx} cy={cy} r={r} />\n        </clipPath>\n      </defs>\n      <rect\n        x=\"0\"\n        y={cy - r}\n        width=\"100%\"\n        height={r * 2}\n        fill={paint}\n        fillOpacity={fillOpacity}\n        clipPath={`url(#dot-${dotId})`}\n      />\n    </g>\n  )\n})\n"],"mappings":"AAoDM,SAGM,KAHN;AApDN,SAAS,MAAM,aAAa;AAC5B,SAAS,UAAU;AA4BZ,MAAM,WAAW,KAAK,SAASA,UAAS;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AACF,GAAkB;AAChB,QAAM,QAAQ,MAAM,EAAE,QAAQ,MAAM,EAAE;AAEtC,MAAI,OAAO,UAAa,OAAO,OAAW,QAAO;AAEjD,QAAM,QAAQ,QAAQ,OAAO,WAAW,OAAO;AAC/C,QAAM,OAAO,SAAS,QAAQ,MAAM,MAAM;AAE1C,MAAI,YAAY,UAAU;AAGxB,UAAMC,KAAI;AACV,UAAM,QAAQA,KAAI;AAClB,WACE,qBAAC,OAAE,WAAW,GAAG,0BAA0B,SAAS,GAAG,MACrD;AAAA,0BAAC,UACC,8BAAC,cAAS,IAAI,OAAO,KAAK,IACxB,8BAAC,YAAO,IAAQ,IAAQ,GAAG,OAAO,GACpC,GACF;AAAA,MACA,oBAAC,YAAO,IAAQ,IAAQ,GAAGA,IAAG,MAAK,gBAAe;AAAA,MAClD;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,GAAG,KAAK;AAAA,UACR,OAAM;AAAA,UACN,QAAQ,QAAQ;AAAA,UAChB,MAAM;AAAA,UACN;AAAA,UACA,UAAU,YAAY,KAAK;AAAA;AAAA,MAC7B;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,YAAY,kBAAkB;AAChC,UAAMA,KAAI;AACV,UAAM,SAAS;AACf,WACE,qBAAC,OAAE,WAAW,GAAG,0BAA0B,SAAS,GAAG,MACrD;AAAA,0BAAC,UACC,8BAAC,cAAS,IAAI,OAAO,KAAK,IACxB,8BAAC,YAAO,IAAQ,IAAQ,GAAGA,KAAI,SAAS,GAAG,GAC7C,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,GAAG,KAAKA,KAAI,SAAS;AAAA,UACrB,OAAM;AAAA,UACN,SAASA,KAAI,SAAS,KAAK;AAAA,UAC3B,MAAM;AAAA,UACN;AAAA,UACA,UAAU,YAAY,KAAK;AAAA;AAAA,MAC7B;AAAA,MACA,oBAAC,YAAO,IAAQ,IAAQ,GAAGA,KAAI,SAAS,GAAG,MAAK,gBAAe;AAAA,OACjE;AAAA,EAEJ;AAEA,QAAM,IAAI;AACV,SACE,qBAAC,OAAE,WAAsB,MACvB;AAAA,wBAAC,UACC,8BAAC,cAAS,IAAI,OAAO,KAAK,IACxB,8BAAC,YAAO,IAAQ,IAAQ,GAAM,GAChC,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,GAAG,KAAK;AAAA,QACR,OAAM;AAAA,QACN,QAAQ,IAAI;AAAA,QACZ,MAAM;AAAA,QACN;AAAA,QACA,UAAU,YAAY,KAAK;AAAA;AAAA,IAC7B;AAAA,KACF;AAEJ,CAAC;","names":["ChartDot","r"]}

package/dist/charts/lib/empty.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ChartEmptyProps {
+    /** What is missing. Says what happened, not "no data". */
+    title?: ReactNode;
+    /** Why, or what to change — a filter to widen, a range to move. */
+    description?: ReactNode;
+    /** The one thing to do next. */
+    action?: ReactNode;
+}
+/**
+ * What a chart shows when it has nothing to draw.
+ *
+ * The state almost every chart library forgets, and the one a real dashboard
+ * hits within a week: a filter that matches nothing, a new account, a range
+ * before the data starts. Without it a chart hands the reader an empty pair of
+ * axes, which is indistinguishable from a chart that failed to load — so the
+ * reader reloads the page, and it is still empty.
+ *
+ * Distinct from the loading skeleton, which says "not yet". This says "there
+ * is nothing here", which is a different sentence and usually has an action
+ * attached to it.
+ *
+ * Reuses the system's own `EmptyState` rather than inventing a chart-shaped
+ * one: an empty chart and an empty table are the same event, and a reader
+ * should not have to learn two vocabularies for it.
+ */
+declare function ChartEmpty({ title, description, action, }: ChartEmptyProps): react.JSX.Element;
+
+export { ChartEmpty, type ChartEmptyProps };

package/dist/charts/lib/empty.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { EmptyState } from "../../components/EmptyState/EmptyState.js";
+function ChartEmpty({
+  title = "No data in this range",
+  description = "Nothing matched the current filters. Widen the range, or clear a filter.",
+  action
+}) {
+  return (
+    // `my-auto` is what keeps this where the plot was. The box sizes itself
+    // 16:9 up to 26rem, which is right for a card that grows to its content and
+    // short of a figure given a fixed height by the page around it — a
+    // dashboard tile, a panel in a grid. Without the auto margin the state pins
+    // to the top of that figure while the plot it stands in for filled the
+    // whole cell, so the same chart reads at two different heights depending on
+    // whether it has data. The margin absorbs the free space when there is any
+    // and does nothing when there is none, so the content-sized case is
+    // untouched.
+    /* @__PURE__ */ jsx("div", { className: "my-auto flex aspect-video max-h-[26rem] min-h-[13rem] w-full items-center justify-center", children: /* @__PURE__ */ jsx(EmptyState, { title, description, action, className: "py-0" }) })
+  );
+}
+export {
+  ChartEmpty
+};
+//# sourceMappingURL=empty.js.map

package/dist/charts/lib/empty.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/empty.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { EmptyState } from '../../components/EmptyState/EmptyState'\n\nexport interface ChartEmptyProps {\n  /** What is missing. Says what happened, not \"no data\". */\n  title?: ReactNode\n  /** Why, or what to change — a filter to widen, a range to move. */\n  description?: ReactNode\n  /** The one thing to do next. */\n  action?: ReactNode\n}\n\n/**\n * What a chart shows when it has nothing to draw.\n *\n * The state almost every chart library forgets, and the one a real dashboard\n * hits within a week: a filter that matches nothing, a new account, a range\n * before the data starts. Without it a chart hands the reader an empty pair of\n * axes, which is indistinguishable from a chart that failed to load — so the\n * reader reloads the page, and it is still empty.\n *\n * Distinct from the loading skeleton, which says \"not yet\". This says \"there\n * is nothing here\", which is a different sentence and usually has an action\n * attached to it.\n *\n * Reuses the system's own `EmptyState` rather than inventing a chart-shaped\n * one: an empty chart and an empty table are the same event, and a reader\n * should not have to learn two vocabularies for it.\n */\nexport function ChartEmpty({\n  title = 'No data in this range',\n  description = 'Nothing matched the current filters. Widen the range, or clear a filter.',\n  action,\n}: ChartEmptyProps) {\n  return (\n    // `my-auto` is what keeps this where the plot was. The box sizes itself\n    // 16:9 up to 26rem, which is right for a card that grows to its content and\n    // short of a figure given a fixed height by the page around it — a\n    // dashboard tile, a panel in a grid. Without the auto margin the state pins\n    // to the top of that figure while the plot it stands in for filled the\n    // whole cell, so the same chart reads at two different heights depending on\n    // whether it has data. The margin absorbs the free space when there is any\n    // and does nothing when there is none, so the content-sized case is\n    // untouched.\n    <div className=\"my-auto flex aspect-video max-h-[26rem] min-h-[13rem] w-full items-center justify-center\">\n      <EmptyState title={title} description={description} action={action} className=\"py-0\" />\n    </div>\n  )\n}\n"],"mappings":"AA6CM;AA5CN,SAAS,kBAAkB;AA4BpB,SAAS,WAAW;AAAA,EACzB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd;AACF,GAAoB;AAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUE,oBAAC,SAAI,WAAU,4FACb,8BAAC,cAAW,OAAc,aAA0B,QAAgB,WAAU,QAAO,GACvF;AAAA;AAEJ;","names":[]}

package/dist/charts/lib/export.d.ts

@@ -0,0 +1,94 @@
+import { ChartColumn } from './figure.js';
+export { downloadBlob } from '../../lib/svg-export.js';
+import 'react';
+import './empty.js';
+
+/**
+ * Taking a chart off the page: a PNG of the plot, or a CSV of its rows.
+ *
+ * The general half — walking a live tree to inline its resolved paint,
+ * serialising a standalone SVG document, rasterising one through a canvas — is
+ * not chart-shaped at all, and lives in `src/lib/svg-export.ts` shared with the
+ * diagrams entry. What is left here is what only a Recharts chart knows: which
+ * `<svg>` in the subtree is the plot, what a row of chart data looks like as a
+ * CSV record, and that the ground behind an exported plot is `--chart-surface`.
+ *
+ * Nothing here touches the DOM at module scope. Every browser API is reached
+ * for inside a function body, so this module is safe to import from a server
+ * component and only fails when a consumer actually asks for a file on a
+ * server, which is a call that cannot succeed anywhere.
+ */
+interface ChartPngOptions {
+    /**
+     * Printed above the plot in the exported image. Pass the figure's title: a
+     * PNG travels into a slide deck with none of the page's context around it,
+     * and an unnamed plot in a deck is a plot nobody can cite.
+     */
+    title?: string;
+    /** Multiplier on the on-screen size. 2 is a retina-sharp export. */
+    scale?: number;
+    /**
+     * Painted behind the plot. Defaults to the resolved `--chart-surface`, which
+     * is what makes a dark-mode export come out dark rather than transparent.
+     */
+    background?: string;
+    /** Space around the plot, in CSS pixels. */
+    padding?: number;
+}
+/**
+ * The chart's `<svg>`, rasterised to a PNG blob.
+ *
+ * Three chart-specific decisions and nothing else. `serializeSvg` does the
+ * work, and its comment carries the reason a naive `XMLSerializer` export of a
+ * themed chart comes out as an empty rectangle with axes on it.
+ *
+ * 1. WHICH `<svg>` — the plot, not the first one in the subtree. See
+ *    `findPlotSvg`.
+ * 2. WHAT GROUND — `--chart-surface`, resolved against the live element, which
+ *    is what makes a dark-mode export come out dark rather than transparent.
+ * 3. WHAT INK AND FACE for the caption — `--ink` and the element's own
+ *    resolved family, so the exported title matches the page it came from.
+ *
+ * ## What this cannot capture, honestly
+ *
+ * - **Anything drawn in HTML.** The legend, the tooltip, the brush strip and
+ *   the hidden data table are DOM, not SVG. The PNG is the plot.
+ * - **Web fonts, cross-origin images, and the exact rendering.** See
+ *   `serializeSvg` and `rasterize`.
+ *
+ * @example
+ * const blob = await chartToPng(plotRef.current, { title: 'Visitors per month' })
+ * downloadBlob(blob, exportFilename('Visitors per month', 'png'))
+ */
+declare function chartToPng(element: HTMLElement | SVGSVGElement, options?: ChartPngOptions): Promise<Blob>;
+/**
+ * The chart's rows as RFC 4180 CSV.
+ *
+ * Quotes a field only when it needs quoting — a comma, a double quote, or a
+ * line break in it — doubles any quote inside, and separates records with CRLF
+ * as the RFC requires rather than with the `\n` a Unix habit would reach for.
+ *
+ * Numbers are written unformatted on purpose. `1,234` would need quoting and
+ * would then land in the spreadsheet as text, which is the one thing a numeric
+ * export must not do; formatting belongs to the chart, not to the file.
+ *
+ * A column's `label` is a `ReactNode`, so only a string or a number can be a
+ * header. Anything else falls back to the column's key, which is a worse
+ * header than the label but a better one than an empty cell.
+ *
+ * @example
+ * const csv = chartToCsv(data, [{ key: 'desktop', label: 'Desktop' }])
+ * downloadBlob(new Blob([csv], { type: 'text/csv;charset=utf-8' }), 'visitors.csv')
+ */
+declare function chartToCsv(rows: Record<string, unknown>[], columns: ChartColumn[]): string;
+
+/**
+ * A figure's title as a filename.
+ *
+ * The shared slugger, with `chart` rather than `figure` as the fallback for a
+ * title that slugs to nothing — an export from this entry is a chart, and the
+ * name a reader finds in their downloads folder should say so.
+ */
+declare function exportFilename(title: string, extension: string): string;
+
+export { type ChartPngOptions, chartToCsv, chartToPng, exportFilename };

package/dist/charts/lib/export.js

@@ -0,0 +1,62 @@
+import {
+  downloadBlob,
+  exportFilename as figureFilename,
+  rasterize,
+  readToken,
+  serializeSvg
+} from "../../lib/svg-export.js";
+async function chartToPng(element, options = {}) {
+  const { title, scale = 2, background, padding = 16 } = options;
+  const svg = findPlotSvg(element);
+  if (!svg) throw new Error("chartToPng: found no <svg> to export inside the element it was given");
+  const markup = serializeSvg(svg, {
+    padding,
+    background: background ?? readToken(element, "--chart-surface", "#ffffff"),
+    title,
+    titleColor: readToken(element, "--ink", "#101010"),
+    titleFont: getComputedStyle(element).fontFamily || "sans-serif"
+  });
+  return rasterize(markup, "png", { scale });
+}
+function findPlotSvg(element) {
+  if (element.tagName.toLowerCase() === "svg") return element;
+  const scope = element.querySelector('[data-slot="chart"]') ?? element;
+  return scope.querySelector("svg.recharts-surface") ?? scope.querySelector("svg");
+}
+const UTF8_BOM = "\uFEFF";
+function chartToCsv(rows, columns) {
+  if (columns.length === 0) return UTF8_BOM;
+  const lines = [columns.map((column) => csvField(headerText(column))).join(",")];
+  for (const row of rows) {
+    lines.push(columns.map((column) => csvField(cellText(row[column.key]))).join(","));
+  }
+  return `${UTF8_BOM}${lines.join("\r\n")}\r
+`;
+}
+function csvField(value) {
+  if (!/[",\r\n]/.test(value)) return value;
+  return `"${value.replace(/"/g, '""')}"`;
+}
+function headerText(column) {
+  const { label } = column;
+  if (typeof label === "string") return label;
+  if (typeof label === "number") return String(label);
+  return column.key;
+}
+function cellText(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "number") return Number.isFinite(value) ? String(value) : "";
+  if (typeof value === "string" || typeof value === "boolean") return String(value);
+  if (value instanceof Date) return value.toISOString();
+  return "";
+}
+function exportFilename(title, extension) {
+  return figureFilename(title, extension, "chart");
+}
+export {
+  chartToCsv,
+  chartToPng,
+  downloadBlob,
+  exportFilename
+};
+//# sourceMappingURL=export.js.map

package/dist/charts/lib/export.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/export.ts"],"sourcesContent":["import type { ChartColumn } from './figure'\nimport {\n  downloadBlob,\n  exportFilename as figureFilename,\n  rasterize,\n  readToken,\n  serializeSvg,\n} from '../../lib/svg-export'\n\n/**\n * Taking a chart off the page: a PNG of the plot, or a CSV of its rows.\n *\n * The general half — walking a live tree to inline its resolved paint,\n * serialising a standalone SVG document, rasterising one through a canvas — is\n * not chart-shaped at all, and lives in `src/lib/svg-export.ts` shared with the\n * diagrams entry. What is left here is what only a Recharts chart knows: which\n * `<svg>` in the subtree is the plot, what a row of chart data looks like as a\n * CSV record, and that the ground behind an exported plot is `--chart-surface`.\n *\n * Nothing here touches the DOM at module scope. Every browser API is reached\n * for inside a function body, so this module is safe to import from a server\n * component and only fails when a consumer actually asks for a file on a\n * server, which is a call that cannot succeed anywhere.\n */\n\nexport interface ChartPngOptions {\n  /**\n   * Printed above the plot in the exported image. Pass the figure's title: a\n   * PNG travels into a slide deck with none of the page's context around it,\n   * and an unnamed plot in a deck is a plot nobody can cite.\n   */\n  title?: string\n  /** Multiplier on the on-screen size. 2 is a retina-sharp export. */\n  scale?: number\n  /**\n   * Painted behind the plot. Defaults to the resolved `--chart-surface`, which\n   * is what makes a dark-mode export come out dark rather than transparent.\n   */\n  background?: string\n  /** Space around the plot, in CSS pixels. */\n  padding?: number\n}\n\n/**\n * The chart's `<svg>`, rasterised to a PNG blob.\n *\n * Three chart-specific decisions and nothing else. `serializeSvg` does the\n * work, and its comment carries the reason a naive `XMLSerializer` export of a\n * themed chart comes out as an empty rectangle with axes on it.\n *\n * 1. WHICH `<svg>` — the plot, not the first one in the subtree. See\n *    `findPlotSvg`.\n * 2. WHAT GROUND — `--chart-surface`, resolved against the live element, which\n *    is what makes a dark-mode export come out dark rather than transparent.\n * 3. WHAT INK AND FACE for the caption — `--ink` and the element's own\n *    resolved family, so the exported title matches the page it came from.\n *\n * ## What this cannot capture, honestly\n *\n * - **Anything drawn in HTML.** The legend, the tooltip, the brush strip and\n *   the hidden data table are DOM, not SVG. The PNG is the plot.\n * - **Web fonts, cross-origin images, and the exact rendering.** See\n *   `serializeSvg` and `rasterize`.\n *\n * @example\n * const blob = await chartToPng(plotRef.current, { title: 'Visitors per month' })\n * downloadBlob(blob, exportFilename('Visitors per month', 'png'))\n */\nexport async function chartToPng(\n  element: HTMLElement | SVGSVGElement,\n  options: ChartPngOptions = {},\n): Promise<Blob> {\n  const { title, scale = 2, background, padding = 16 } = options\n\n  const svg = findPlotSvg(element)\n  if (!svg) throw new Error('chartToPng: found no <svg> to export inside the element it was given')\n\n  const markup = serializeSvg(svg, {\n    padding,\n    background: background ?? readToken(element, '--chart-surface', '#ffffff'),\n    title,\n    titleColor: readToken(element, '--ink', '#101010'),\n    titleFont: getComputedStyle(element).fontFamily || 'sans-serif',\n  })\n\n  return rasterize(markup, 'png', { scale })\n}\n\n/**\n * The plot's `<svg>`, not the first `<svg>` in the subtree.\n *\n * Two narrowings, and both are load-bearing. The toolbar sits outside the plot\n * wrapper and every control in it is an `<svg>`, so the scope comes first;\n * INSIDE the wrapper the legend draws its own swatches, so `.recharts-surface`\n * comes second. Either one missing exports a picture of an icon, which looks\n * like a working download until somebody opens the file.\n */\nfunction findPlotSvg(element: HTMLElement | SVGSVGElement): SVGSVGElement | null {\n  if (element.tagName.toLowerCase() === 'svg') return element as SVGSVGElement\n  const scope = element.querySelector('[data-slot=\"chart\"]') ?? element\n  return scope.querySelector<SVGSVGElement>('svg.recharts-surface') ?? scope.querySelector('svg')\n}\n\n/**\n * A UTF-8 byte order mark.\n *\n * Excel does not sniff encodings. Handed a CSV with no BOM it decodes the file\n * with the machine's legacy code page, so \"Müller\", \"東京\" and \"€\" arrive as\n * mojibake on most Windows installs — and the reader's conclusion is that the\n * export is broken, not that the encoding was guessed. The BOM is the only\n * in-band signal Excel honours, and every other tool skips it silently.\n */\nconst UTF8_BOM = '\\uFEFF'\n\n/**\n * The chart's rows as RFC 4180 CSV.\n *\n * Quotes a field only when it needs quoting — a comma, a double quote, or a\n * line break in it — doubles any quote inside, and separates records with CRLF\n * as the RFC requires rather than with the `\\n` a Unix habit would reach for.\n *\n * Numbers are written unformatted on purpose. `1,234` would need quoting and\n * would then land in the spreadsheet as text, which is the one thing a numeric\n * export must not do; formatting belongs to the chart, not to the file.\n *\n * A column's `label` is a `ReactNode`, so only a string or a number can be a\n * header. Anything else falls back to the column's key, which is a worse\n * header than the label but a better one than an empty cell.\n *\n * @example\n * const csv = chartToCsv(data, [{ key: 'desktop', label: 'Desktop' }])\n * downloadBlob(new Blob([csv], { type: 'text/csv;charset=utf-8' }), 'visitors.csv')\n */\nexport function chartToCsv(rows: Record<string, unknown>[], columns: ChartColumn[]): string {\n  if (columns.length === 0) return UTF8_BOM\n\n  const lines = [columns.map((column) => csvField(headerText(column))).join(',')]\n\n  for (const row of rows) {\n    lines.push(columns.map((column) => csvField(cellText(row[column.key]))).join(','))\n  }\n\n  // The RFC makes the last CRLF optional; writing it matches what a\n  // spreadsheet emits and keeps the file from ending mid-record in a terminal.\n  return `${UTF8_BOM}${lines.join('\\r\\n')}\\r\\n`\n}\n\n/** One field, quoted only when the RFC says it has to be. */\nfunction csvField(value: string): string {\n  if (!/[\",\\r\\n]/.test(value)) return value\n  return `\"${value.replace(/\"/g, '\"\"')}\"`\n}\n\n/** A column's header text, falling back to its key when the label is markup. */\nfunction headerText(column: ChartColumn): string {\n  const { label } = column\n  if (typeof label === 'string') return label\n  if (typeof label === 'number') return String(label)\n  return column.key\n}\n\n/** A cell value as text. Anything that is not a primitive reads as empty. */\nfunction cellText(value: unknown): string {\n  if (value === null || value === undefined) return ''\n  if (typeof value === 'number') return Number.isFinite(value) ? String(value) : ''\n  if (typeof value === 'string' || typeof value === 'boolean') return String(value)\n  if (value instanceof Date) return value.toISOString()\n  return ''\n}\n\nexport { downloadBlob }\n\n/**\n * A figure's title as a filename.\n *\n * The shared slugger, with `chart` rather than `figure` as the fallback for a\n * title that slugs to nothing — an export from this entry is a chart, and the\n * name a reader finds in their downloads folder should say so.\n */\nexport function exportFilename(title: string, extension: string): string {\n  return figureFilename(title, extension, 'chart')\n}\n"],"mappings":"AACA;AAAA,EACE;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA6DP,eAAsB,WACpB,SACA,UAA2B,CAAC,GACb;AACf,QAAM,EAAE,OAAO,QAAQ,GAAG,YAAY,UAAU,GAAG,IAAI;AAEvD,QAAM,MAAM,YAAY,OAAO;AAC/B,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,sEAAsE;AAEhG,QAAM,SAAS,aAAa,KAAK;AAAA,IAC/B;AAAA,IACA,YAAY,cAAc,UAAU,SAAS,mBAAmB,SAAS;AAAA,IACzE;AAAA,IACA,YAAY,UAAU,SAAS,SAAS,SAAS;AAAA,IACjD,WAAW,iBAAiB,OAAO,EAAE,cAAc;AAAA,EACrD,CAAC;AAED,SAAO,UAAU,QAAQ,OAAO,EAAE,MAAM,CAAC;AAC3C;AAWA,SAAS,YAAY,SAA4D;AAC/E,MAAI,QAAQ,QAAQ,YAAY,MAAM,MAAO,QAAO;AACpD,QAAM,QAAQ,QAAQ,cAAc,qBAAqB,KAAK;AAC9D,SAAO,MAAM,cAA6B,sBAAsB,KAAK,MAAM,cAAc,KAAK;AAChG;AAWA,MAAM,WAAW;AAqBV,SAAS,WAAW,MAAiC,SAAgC;AAC1F,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,QAAM,QAAQ,CAAC,QAAQ,IAAI,CAAC,WAAW,SAAS,WAAW,MAAM,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC;AAE9E,aAAW,OAAO,MAAM;AACtB,UAAM,KAAK,QAAQ,IAAI,CAAC,WAAW,SAAS,SAAS,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC;AAAA,EACnF;AAIA,SAAO,GAAG,QAAQ,GAAG,MAAM,KAAK,MAAM,CAAC;AAAA;AACzC;AAGA,SAAS,SAAS,OAAuB;AACvC,MAAI,CAAC,WAAW,KAAK,KAAK,EAAG,QAAO;AACpC,SAAO,IAAI,MAAM,QAAQ,MAAM,IAAI,CAAC;AACtC;AAGA,SAAS,WAAW,QAA6B;AAC/C,QAAM,EAAE,MAAM,IAAI;AAClB,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,MAAI,OAAO,UAAU,SAAU,QAAO,OAAO,KAAK;AAClD,SAAO,OAAO;AAChB;AAGA,SAAS,SAAS,OAAwB;AACxC,MAAI,UAAU,QAAQ,UAAU,OAAW,QAAO;AAClD,MAAI,OAAO,UAAU,SAAU,QAAO,OAAO,SAAS,KAAK,IAAI,OAAO,KAAK,IAAI;AAC/E,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAW,QAAO,OAAO,KAAK;AAChF,MAAI,iBAAiB,KAAM,QAAO,MAAM,YAAY;AACpD,SAAO;AACT;AAWO,SAAS,eAAe,OAAe,WAA2B;AACvE,SAAO,eAAe,OAAO,WAAW,OAAO;AACjD;","names":[]}