@misoto22/design 0.5.0 → 0.6.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,134 @@
+"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.
+        !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",
+        // Recharts draws its own focus ring; the system draws one focus ring,
+        // in one place, and this is how the duplicate is removed.
+        "[&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx(ResponsiveContainer, { className: "min-h-0 w-full flex-1", 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          !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          // Recharts draws its own focus ring; the system draws one focus ring,\n          // in one place, and this is how the duplicate is removed.\n          '[&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden',\n          className,\n        )}\n        {...rest}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <ResponsiveContainer className=\"min-h-0 w-full flex-1\" initialDimension={initialDimension}>\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,13 @@
+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 /* @__PURE__ */ jsx("div", { className: "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    <div className=\"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":"AAoCM;AAnCN,SAAS,kBAAkB;AA4BpB,SAAS,WAAW;AAAA,EACzB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd;AACF,GAAoB;AAClB,SACE,oBAAC,SAAI,WAAU,oFACb,8BAAC,cAAW,OAAc,aAA0B,QAAgB,WAAU,QAAO,GACvF;AAEJ;","names":[]}

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

@@ -0,0 +1,103 @@
+import { ChartColumn } from './figure.js';
+import 'react';
+
+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.
+ *
+ * ## The problem this function exists to solve
+ *
+ * Serialising the `<svg>` and handing it to an `<img>` puts it in a document
+ * of its own. That document has none of the page's stylesheets, so every
+ * `var(--color-desktop-0)`, `var(--chart-fill)` and `var(--ink)` in the markup
+ * resolves to nothing — and a paint that resolves to nothing is not a fallback
+ * colour, it is an invisible mark. Serialise a chart naively and you get an
+ * empty rectangle with axes on it.
+ *
+ * ## The solution
+ *
+ * Walk the live tree and the clone in step, and on every node write
+ * `getComputedStyle`'s answer for the painted properties into an inline
+ * `style`. Computed values have already had `var()` substituted by the engine,
+ * so `fill: var(--color-desktop-0)` arrives as `fill: rgb(16, 16, 16)` — and,
+ * because the walk reads the LIVE element, it reads it under whichever theme
+ * is currently applied. Light and dark come out right for free, with no theme
+ * argument anywhere in this file.
+ *
+ * `<stop>` elements are walked too, which is the half that is easy to miss: a
+ * series is painted `fill="url(#…-colors-desktop)"`, the url survives
+ * serialisation because the gradient is inside the same `<svg>`, and it is the
+ * gradient's STOPS that carry the custom properties.
+ *
+ * ## 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.** The isolated document cannot fetch the page's `@font-face`
+ *   sources, so text is rasterised in whatever the resolved family stack finds
+ *   locally. Type metrics will differ from the screen.
+ * - **Cross-origin images.** A chart with an external `<image>` in it taints
+ *   the canvas and `toBlob` throws; there is no way around it from script.
+ * - **The exact rendering.** This is the browser's SVG rasteriser re-drawing
+ *   the markup, not a screenshot. Antialiasing, `backdrop-filter` and any
+ *   effect a page stylesheet applied from outside the `<svg>` are not in it.
+ *
+ * @example
+ * const blob = await chartToPng(plotRef.current, { title: 'Visitors per month' })
+ * downloadBlob(blob, '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;
+/**
+ * Hands a blob to the browser as a download.
+ *
+ * Throws rather than no-oping without a `document`: a download is something a
+ * person just asked for, and a silent return would look to them like a click
+ * that did nothing.
+ */
+declare function downloadBlob(blob: Blob, filename: string): void;
+/**
+ * A figure's title as a filename.
+ *
+ * Lowercase, ASCII-safe and hyphenated, because a downloaded file crosses into
+ * shells, zip archives and Windows paths where a title's spaces and slashes
+ * are someone else's problem.
+ */
+declare function exportFilename(title: string, extension: string): string;
+
+export { type ChartPngOptions, chartToCsv, chartToPng, downloadBlob, exportFilename };