@withpotter/components 0.13.0-next.101

package/dist/charts/cash-flow-chart.d.ts

@@ -0,0 +1,31 @@
+export interface CashFlowPoint {
+    /** What the bucket is called on the axis, e.g. "Aug". */
+    label: string;
+    /** Money the business took in over the bucket. Positive. */
+    inflow: number;
+    /** Money it gave back over the bucket. Positive; drawn downward. */
+    outflow: number;
+}
+/**
+ * Money in and money out, per bucket, against a zero line.
+ *
+ * Two directions on one axis, which is the whole point: takings drawn on their
+ * own answer "how much came in" and leave "did we keep any of it" to arithmetic
+ * the reader has to do in their head. Here the column above the line is what
+ * came in, the column below is what went back out, and the distance between the
+ * dot and the line is what the business kept.
+ *
+ * The bars are one hue at two weights rather than two colours. In and out are
+ * not different subjects — they are the same money, signed — and the axis
+ * already says which side of zero a column is on, so a second hue would be
+ * encoding the one thing position already encodes.
+ *
+ * The net line is dashed and quiet on purpose. It is derived from the two bars
+ * beside it, so drawing it in the same ink as the measurements would put a
+ * third series on the chart with the same weight as the two it is made of.
+ */
+export declare function CashFlowChart({ points, formatCurrency, height, }: {
+    points: CashFlowPoint[];
+    formatCurrency: (n: number) => string;
+    height?: number;
+}): import("react").JSX.Element;

package/dist/charts/cash-flow-chart.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChartNoAxesCombined } from "lucide-react";
+import {
+  Bar,
+  CartesianGrid,
+  ComposedChart,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "recharts";
+import { EmptyState } from "./chart-empty-state";
+import {
+  CHART_BRAND_QUIET,
+  CHART_GRID,
+  CHART_TICK_STYLE
+} from "./chart-theme";
+import { useIsMobile } from "@withpotter/hooks/use-mobile";
+function CashFlowChart({
+  points,
+  formatCurrency,
+  height = 220
+}) {
+  const isMobile = useIsMobile();
+  if (!points.length) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: ChartNoAxesCombined,
+        message: "No money moved in this period"
+      }
+    );
+  }
+  const rows = points.map((p) => ({
+    ...p,
+    out: -Math.abs(p.outflow),
+    net: p.inflow - Math.abs(p.outflow)
+  }));
+  const brand = "var(--color-brand-500)";
+  const brandSoft = CHART_BRAND_QUIET;
+  const ghost = "var(--text-muted)";
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: isMobile ? 190 : height, children: /* @__PURE__ */ jsxs(
+    ComposedChart,
+    {
+      data: rows,
+      stackOffset: "sign",
+      margin: { top: 8, right: 6, bottom: 0, left: isMobile ? -14 : 0 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { stroke: CHART_GRID, vertical: false }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: "label",
+            tick: CHART_TICK_STYLE,
+            axisLine: false,
+            tickLine: false,
+            minTickGap: 16
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            tick: CHART_TICK_STYLE,
+            axisLine: false,
+            tickLine: false,
+            width: isMobile ? 52 : 64,
+            tickFormatter: (v) => formatCurrency(v)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            cursor: { fill: "var(--bg-subtle)" },
+            content: (props) => /* @__PURE__ */ jsx(FlowTooltip, { ...props, formatCurrency })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: "inflow",
+            stackId: "flow",
+            fill: brand,
+            maxBarSize: 44,
+            radius: [2, 2, 0, 0],
+            isAnimationActive: false,
+            name: "In"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: "out",
+            stackId: "flow",
+            fill: brandSoft,
+            maxBarSize: 44,
+            radius: [0, 0, 2, 2],
+            isAnimationActive: false,
+            name: "Out"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Line,
+          {
+            type: "monotone",
+            dataKey: "net",
+            stroke: ghost,
+            strokeWidth: 1.5,
+            strokeDasharray: "4 4",
+            dot: { r: 3, fill: "var(--text-secondary)", strokeWidth: 0 },
+            activeDot: { r: 4, strokeWidth: 0 },
+            isAnimationActive: false,
+            name: "Net"
+          }
+        )
+      ]
+    }
+  ) });
+}
+function FlowTooltip({
+  active,
+  payload,
+  formatCurrency
+}) {
+  const row = active ? payload?.[0]?.payload : void 0;
+  if (!row) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-[10px] border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 shadow-md", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--text-muted)]", children: row.label }),
+    /* @__PURE__ */ jsxs("dl", { className: "mt-1 space-y-0.5 text-xs", children: [
+      /* @__PURE__ */ jsx(Line2, { label: "In", value: formatCurrency(row.inflow) }),
+      /* @__PURE__ */ jsx(Line2, { label: "Out", value: formatCurrency(Math.abs(row.outflow)) }),
+      /* @__PURE__ */ jsx(Line2, { label: "Net", value: formatCurrency(row.net), strong: true })
+    ] })
+  ] });
+}
+function Line2({
+  label,
+  value,
+  strong
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-6", children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-[var(--text-muted)]", children: label }),
+    /* @__PURE__ */ jsx(
+      "dd",
+      {
+        className: `tabular-nums ${strong ? "font-semibold text-[var(--text-primary)]" : "text-[var(--text-secondary)]"}`,
+        children: value
+      }
+    )
+  ] });
+}
+export {
+  CashFlowChart
+};
+//# sourceMappingURL=cash-flow-chart.js.map

package/dist/charts/cash-flow-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/cash-flow-chart.tsx"],"sourcesContent":["'use client';\n\nimport { ChartNoAxesCombined } from 'lucide-react';\nimport {\n  Bar,\n  CartesianGrid,\n  ComposedChart,\n  Line,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport { EmptyState } from './chart-empty-state';\nimport {\n  CHART_BRAND_QUIET,\n  CHART_GRID,\n  CHART_TICK_STYLE,\n} from './chart-theme';\nimport { useIsMobile } from '@withpotter/hooks/use-mobile';\n\nexport interface CashFlowPoint {\n  /** What the bucket is called on the axis, e.g. \"Aug\". */\n  label: string;\n  /** Money the business took in over the bucket. Positive. */\n  inflow: number;\n  /** Money it gave back over the bucket. Positive; drawn downward. */\n  outflow: number;\n}\n\ninterface Row extends CashFlowPoint {\n  /** Drawn below the axis, so the column reads as money leaving. */\n  out: number;\n  net: number;\n}\n\n/**\n * Money in and money out, per bucket, against a zero line.\n *\n * Two directions on one axis, which is the whole point: takings drawn on their\n * own answer \"how much came in\" and leave \"did we keep any of it\" to arithmetic\n * the reader has to do in their head. Here the column above the line is what\n * came in, the column below is what went back out, and the distance between the\n * dot and the line is what the business kept.\n *\n * The bars are one hue at two weights rather than two colours. In and out are\n * not different subjects — they are the same money, signed — and the axis\n * already says which side of zero a column is on, so a second hue would be\n * encoding the one thing position already encodes.\n *\n * The net line is dashed and quiet on purpose. It is derived from the two bars\n * beside it, so drawing it in the same ink as the measurements would put a\n * third series on the chart with the same weight as the two it is made of.\n */\nexport function CashFlowChart({\n  points,\n  formatCurrency,\n  height = 220,\n}: {\n  points: CashFlowPoint[];\n  formatCurrency: (n: number) => string;\n  height?: number;\n}) {\n  const isMobile = useIsMobile();\n\n  if (!points.length) {\n    return (\n      <EmptyState\n        icon={ChartNoAxesCombined}\n        message=\"No money moved in this period\"\n      />\n    );\n  }\n\n  const rows: Row[] = points.map((p) => ({\n    ...p,\n    out: -Math.abs(p.outflow),\n    net: p.inflow - Math.abs(p.outflow),\n  }));\n\n  const brand = 'var(--color-brand-500)';\n  // The same hue, mixed toward the surface: one weight for each direction.\n  const brandSoft = CHART_BRAND_QUIET;\n  const ghost = 'var(--text-muted)';\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={isMobile ? 190 : height}>\n      <ComposedChart\n        data={rows}\n        // Without this the stack ACCUMULATES rather than splitting: a month that\n        // took ₦386k and refunded ₦74k drew the refund as a cap ON TOP of the\n        // takings, which reads as more money rather than less.\n        stackOffset=\"sign\"\n        margin={{ top: 8, right: 6, bottom: 0, left: isMobile ? -14 : 0 }}\n      >\n        <CartesianGrid stroke={CHART_GRID} vertical={false} />\n        <XAxis\n          dataKey=\"label\"\n          tick={CHART_TICK_STYLE}\n          axisLine={false}\n          tickLine={false}\n          minTickGap={16}\n        />\n        <YAxis\n          tick={CHART_TICK_STYLE}\n          axisLine={false}\n          tickLine={false}\n          width={isMobile ? 52 : 64}\n          tickFormatter={(v: number) => formatCurrency(v)}\n        />\n        <Tooltip\n          cursor={{ fill: 'var(--bg-subtle)' }}\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          content={(props: any) => (\n            <FlowTooltip {...props} formatCurrency={formatCurrency} />\n          )}\n        />\n        {/* One stack, so a bucket is a single column crossing the axis rather\n            than two columns standing side by side pretending to be unrelated. */}\n        <Bar\n          dataKey=\"inflow\"\n          stackId=\"flow\"\n          fill={brand}\n          maxBarSize={44}\n          radius={[2, 2, 0, 0]}\n          isAnimationActive={false}\n          name=\"In\"\n        />\n        <Bar\n          dataKey=\"out\"\n          stackId=\"flow\"\n          fill={brandSoft}\n          maxBarSize={44}\n          radius={[0, 0, 2, 2]}\n          isAnimationActive={false}\n          name=\"Out\"\n        />\n        <Line\n          type=\"monotone\"\n          dataKey=\"net\"\n          stroke={ghost}\n          strokeWidth={1.5}\n          strokeDasharray=\"4 4\"\n          dot={{ r: 3, fill: 'var(--text-secondary)', strokeWidth: 0 }}\n          activeDot={{ r: 4, strokeWidth: 0 }}\n          isAnimationActive={false}\n          name=\"Net\"\n        />\n      </ComposedChart>\n    </ResponsiveContainer>\n  );\n}\n\n/**\n * All three readings for the bucket, in the order they are made: what came in,\n * what went back, what is left.\n */\nfunction FlowTooltip({\n  active,\n  payload,\n  formatCurrency,\n}: {\n  active?: boolean;\n  payload?: { payload?: Row }[];\n  formatCurrency: (n: number) => string;\n}) {\n  const row = active ? payload?.[0]?.payload : undefined;\n  if (!row) return null;\n\n  return (\n    <div className=\"rounded-[10px] border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 shadow-md\">\n      <p className=\"text-2xs text-[var(--text-muted)]\">{row.label}</p>\n      <dl className=\"mt-1 space-y-0.5 text-xs\">\n        <Line2 label=\"In\" value={formatCurrency(row.inflow)} />\n        <Line2 label=\"Out\" value={formatCurrency(Math.abs(row.outflow))} />\n        <Line2 label=\"Net\" value={formatCurrency(row.net)} strong />\n      </dl>\n    </div>\n  );\n}\n\nfunction Line2({\n  label,\n  value,\n  strong,\n}: {\n  label: string;\n  value: string;\n  strong?: boolean;\n}) {\n  return (\n    <div className=\"flex items-baseline justify-between gap-6\">\n      <dt className=\"text-[var(--text-muted)]\">{label}</dt>\n      <dd\n        className={`tabular-nums ${\n          strong\n            ? 'font-semibold text-[var(--text-primary)]'\n            : 'text-[var(--text-secondary)]'\n        }`}\n      >\n        {value}\n      </dd>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/charts/chart-empty-state.d.ts

@@ -0,0 +1,53 @@
+import type { ComponentType } from 'react';
+/**
+ * A panel with nothing to plot, said as quietly as possible.
+ *
+ * THIS IS THE THIRD TIER, NOT THE FIRST. `docs/DESIGN_REFERENCES.md` sorts
+ * nothing-here states into first-run (one curated framed mark, a promise in the
+ * title, the action in the CTA), no-results/cleared ("the quietest tier: type
+ * and one Clear filters, no imagery, no colour — must look different from
+ * first-run"), and error. A chart with no rows for the period you picked is the
+ * middle one, and it was drawing the first: a 40px glyph over a grey sentence,
+ * centred in eight rems of padding.
+ *
+ * That is wrong twice over. It is wrong per panel, because the loudest thing in
+ * a card became the news that the card has nothing to say. And it is wrong per
+ * PAGE, which is how it actually reached John: this component has twenty call
+ * sites across Analytics — top products, payments mix, money position, sales
+ * ledger, cohorts, the retention curve, revenue split, rebooking, utilization,
+ * outstanding, promo performance, all four attribution tables, and the
+ * customers, reviews, sales and traffic tabs. A quiet month on Retention drew
+ * five of those marks down one column; Attribution drew four side by side. The
+ * verdict was that the analytics pages "are just weird" and that "the empty
+ * states are slops, they are not the ones we use across the app". Both true,
+ * and this file was most of the reason.
+ *
+ * The glyph is gone rather than shrunk. It was also off the icon scale
+ * entirely — `w-10 h-10`, where the app has 13 / 16 / 20 and asks for `size-N`
+ * — so no size on that ramp would have been right either. What is left is the
+ * sentence, which was always the only part carrying information: every call
+ * site already passes a complete one ("No payments in this period", "Nothing
+ * outstanding", "Nobody served in this period").
+ *
+ * NOT `StateView`. That is the app's real empty state and it is right for a
+ * LIST that is empty — it is what the campaigns page uses. Measured inside a
+ * card, though, it holds about 430px even with `compact`, because it is built
+ * to own a screen. A section that has nothing must not outweigh the sections
+ * that have something.
+ */
+export declare function EmptyState({ message, }: {
+    /**
+     * Accepted and deliberately not drawn.
+     *
+     * Kept on the type so that twenty call sites did not all have to change to
+     * make the panels quiet, and because the icon is still meaningful to the
+     * panel around it — several of these cards head themselves with the same
+     * glyph. Delete the prop from the call sites when one of them is next
+     * touched for another reason; there is no rush, and a mechanical sweep of
+     * twenty files to remove a no-op is a worse diff than leaving it.
+     */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    message: string;
+}): import("react").JSX.Element;

package/dist/charts/chart-empty-state.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+function EmptyState({
+  message
+}) {
+  return /* @__PURE__ */ jsx("p", { className: "px-4 py-6 text-center text-sm text-[var(--text-tertiary)]", children: message });
+}
+export {
+  EmptyState
+};
+//# sourceMappingURL=chart-empty-state.js.map

package/dist/charts/chart-empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/chart-empty-state.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\n\n/**\n * A panel with nothing to plot, said as quietly as possible.\n *\n * THIS IS THE THIRD TIER, NOT THE FIRST. `docs/DESIGN_REFERENCES.md` sorts\n * nothing-here states into first-run (one curated framed mark, a promise in the\n * title, the action in the CTA), no-results/cleared (\"the quietest tier: type\n * and one Clear filters, no imagery, no colour — must look different from\n * first-run\"), and error. A chart with no rows for the period you picked is the\n * middle one, and it was drawing the first: a 40px glyph over a grey sentence,\n * centred in eight rems of padding.\n *\n * That is wrong twice over. It is wrong per panel, because the loudest thing in\n * a card became the news that the card has nothing to say. And it is wrong per\n * PAGE, which is how it actually reached John: this component has twenty call\n * sites across Analytics — top products, payments mix, money position, sales\n * ledger, cohorts, the retention curve, revenue split, rebooking, utilization,\n * outstanding, promo performance, all four attribution tables, and the\n * customers, reviews, sales and traffic tabs. A quiet month on Retention drew\n * five of those marks down one column; Attribution drew four side by side. The\n * verdict was that the analytics pages \"are just weird\" and that \"the empty\n * states are slops, they are not the ones we use across the app\". Both true,\n * and this file was most of the reason.\n *\n * The glyph is gone rather than shrunk. It was also off the icon scale\n * entirely — `w-10 h-10`, where the app has 13 / 16 / 20 and asks for `size-N`\n * — so no size on that ramp would have been right either. What is left is the\n * sentence, which was always the only part carrying information: every call\n * site already passes a complete one (\"No payments in this period\", \"Nothing\n * outstanding\", \"Nobody served in this period\").\n *\n * NOT `StateView`. That is the app's real empty state and it is right for a\n * LIST that is empty — it is what the campaigns page uses. Measured inside a\n * card, though, it holds about 430px even with `compact`, because it is built\n * to own a screen. A section that has nothing must not outweigh the sections\n * that have something.\n */\nexport function EmptyState({\n  message,\n}: {\n  /**\n   * Accepted and deliberately not drawn.\n   *\n   * Kept on the type so that twenty call sites did not all have to change to\n   * make the panels quiet, and because the icon is still meaningful to the\n   * panel around it — several of these cards head themselves with the same\n   * glyph. Delete the prop from the call sites when one of them is next\n   * touched for another reason; there is no rush, and a mechanical sweep of\n   * twenty files to remove a no-op is a worse diff than leaving it.\n   */\n  icon?: ComponentType<{ className?: string }>;\n  message: string;\n}) {\n  return (\n    <p className=\"px-4 py-6 text-center text-sm text-[var(--text-tertiary)]\">\n      {message}\n    </p>\n  );\n}\n"],"mappings":"AAuDI;AAjBG,SAAS,WAAW;AAAA,EACzB;AACF,GAaG;AACD,SACE,oBAAC,OAAE,WAAU,6DACV,mBACH;AAEJ;","names":[]}

package/dist/charts/chart-theme.d.ts

@@ -0,0 +1,40 @@
+/**
+ * A comparison series: the brand, mixed toward the surface so it recedes behind
+ * the series it is being compared with. Same recipe the cash-flow chart uses for
+ * its second bar.
+ */
+export declare const CHART_BRAND_QUIET = "color-mix(in oklab, var(--color-brand-500) 40%, var(--bg-subtle))";
+export declare const CHART_GRID = "var(--border-default)";
+export declare const CHART_TICK = "var(--text-muted)";
+export declare const CHART_TOOLTIP: {
+    readonly borderRadius: 8;
+    readonly border: "1px solid var(--border-default)";
+    readonly backgroundColor: "var(--bg-base)";
+    readonly color: "var(--text-primary)";
+    readonly boxShadow: "var(--shadow-md)";
+    readonly fontSize: 12;
+};
+export declare const CHART_TICK_STYLE: {
+    readonly fontSize: 11;
+    readonly fill: "var(--text-muted)";
+};
+/**
+ * A step on the single-hue magnitude ramp. `fraction` is 0–1; 0 returns the bare
+ * surface so an empty cell reads as empty rather than as a small value. The
+ * lowest visible step holds at 18% so it stays separable from the surface in
+ * both themes.
+ */
+export declare function magnitudeStep(fraction: number): string;
+export interface ChartTheme {
+    /** Categorical identity, in fixed order. */
+    series: readonly string[];
+    /** Bars and the empty bucket between them; the line and the one before it. */
+    usage: {
+        bar: string;
+        idle: string;
+        now: string;
+        before: string;
+    };
+    dark: boolean;
+}
+export declare function useChartTheme(): ChartTheme;

package/dist/charts/chart-theme.js

@@ -0,0 +1,72 @@
+"use client";
+import { useTheme } from "@withpotter/lib/theme-context";
+const BRAND = "var(--color-brand-500)";
+const CHART_BRAND_QUIET = `color-mix(in oklab, ${BRAND} 40%, var(--bg-subtle))`;
+const SERIES_LIGHT = [
+  BRAND,
+  "#eb6834",
+  // orange
+  "#1baf7a",
+  // aqua
+  "#eda100",
+  // yellow
+  "#e87ba4",
+  // magenta
+  "#008300",
+  // green
+  "#4a3aa7",
+  // violet
+  "#e34948"
+  // red
+];
+const SERIES_DARK = [
+  BRAND,
+  "#d95926",
+  "#199e70",
+  "#c98500",
+  "#d55181",
+  "#008300",
+  "#9085e9",
+  "#e66767"
+];
+const CHART_GRID = "var(--border-default)";
+const CHART_TICK = "var(--text-muted)";
+const CHART_TOOLTIP = {
+  borderRadius: 8,
+  border: "1px solid var(--border-default)",
+  backgroundColor: "var(--bg-base)",
+  color: "var(--text-primary)",
+  boxShadow: "var(--shadow-md)",
+  fontSize: 12
+};
+const CHART_TICK_STYLE = { fontSize: 11, fill: CHART_TICK };
+function magnitudeStep(fraction) {
+  if (!(fraction > 0)) return "var(--bg-subtle)";
+  const pct = Math.round(18 + Math.min(1, fraction) * 82);
+  return `color-mix(in oklab, var(--color-brand-500) ${pct}%, var(--bg-subtle))`;
+}
+const USAGE = {
+  bar: BRAND,
+  idle: "var(--border-default)",
+  now: BRAND,
+  before: "var(--text-muted)"
+};
+function useChartTheme() {
+  const { resolvedTheme } = useTheme();
+  const dark = resolvedTheme === "dark";
+  return {
+    series: dark ? SERIES_DARK : SERIES_LIGHT,
+    usage: USAGE,
+    dark
+  };
+}
+export {
+  CHART_BRAND_QUIET,
+  CHART_GRID,
+  CHART_TICK,
+  CHART_TICK_STYLE,
+  CHART_TOOLTIP,
+  magnitudeStep,
+  useChartTheme
+};
+//# sourceMappingURL=chart-theme.js.map

package/dist/charts/chart-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/chart-theme.ts"],"sourcesContent":["'use client';\n\nimport { useTheme } from '@withpotter/lib/theme-context';\n\n/**\n * One chart system for the whole analytics hub.\n *\n * Every chart on this page used to carry its own hexes: a purple visitors line,\n * a green revenue line, a red bounce line, a six-colour order-status rainbow.\n * None of it meant anything — colour changed because the card changed, so a\n * reader learned nothing from it. Colour now comes from here and only here.\n *\n * - `series`     identity. Fixed order, never cycled; slot 1 is the brand\n *                variable so a single-series chart matches the money spine and\n *                the buttons beside it. A ninth series folds into \"Other\"\n *                rather than inventing a hue.\n * - `magnitude`  one hue (brand), stepped by mixing toward the surface, so the\n *                low end recedes in light and dark without a second palette.\n *\n * Chrome (grid, ticks, tooltip) reads design tokens directly, so it follows the\n * theme without a branch.\n *\n * The categorical order is validated in both modes against `--bg-base`\n * (#ffffff / #151517): lightness band, chroma floor, adjacent-pair CVD\n * separation, normal-vision separation, contrast. Slots 3, 4 and 5 fall under\n * 3:1 on the light surface, so any chart using them ships visible labels\n * alongside the mark rather than relying on colour alone.\n */\n\n/**\n * The brand, from the variable the consumer's stylesheet sets.\n *\n * Slot 1 and every single-series mark were the hex of one product's blue, so a\n * consumer that themes the rest of the dashboard still got that blue in every\n * chart. `--color-brand-500` is the same variable `magnitudeStep` and the money\n * spine already read (and what `bg-brand-500` compiles to), so the charts now\n * agree with each other and with the theme.\n */\nconst BRAND = 'var(--color-brand-500)';\n\n/**\n * A comparison series: the brand, mixed toward the surface so it recedes behind\n * the series it is being compared with. Same recipe the cash-flow chart uses for\n * its second bar.\n */\nexport const CHART_BRAND_QUIET = `color-mix(in oklab, ${BRAND} 40%, var(--bg-subtle))`;\n\nconst SERIES_LIGHT = [\n  BRAND,\n  '#eb6834', // orange\n  '#1baf7a', // aqua\n  '#eda100', // yellow\n  '#e87ba4', // magenta\n  '#008300', // green\n  '#4a3aa7', // violet\n  '#e34948', // red\n] as const;\n\nconst SERIES_DARK = [\n  BRAND,\n  '#d95926',\n  '#199e70',\n  '#c98500',\n  '#d55181',\n  '#008300',\n  '#9085e9',\n  '#e66767',\n] as const;\n\nexport const CHART_GRID = 'var(--border-default)';\nexport const CHART_TICK = 'var(--text-muted)';\n\nexport const CHART_TOOLTIP = {\n  borderRadius: 8,\n  border: '1px solid var(--border-default)',\n  backgroundColor: 'var(--bg-base)',\n  color: 'var(--text-primary)',\n  boxShadow: 'var(--shadow-md)',\n  fontSize: 12,\n} as const;\n\nexport const CHART_TICK_STYLE = { fontSize: 11, fill: CHART_TICK } as const;\n\n/**\n * A step on the single-hue magnitude ramp. `fraction` is 0–1; 0 returns the bare\n * surface so an empty cell reads as empty rather than as a small value. The\n * lowest visible step holds at 18% so it stays separable from the surface in\n * both themes.\n */\nexport function magnitudeStep(fraction: number): string {\n  if (!(fraction > 0)) return 'var(--bg-subtle)';\n  const pct = Math.round(18 + Math.min(1, fraction) * 82);\n  return `color-mix(in oklab, var(--color-brand-500) ${pct}%, var(--bg-subtle))`;\n}\n\n/**\n * The colour of a field of bars, and the grey of a bucket with nothing in it.\n *\n * The product's own brand colour: a chart here is the product's, so it wears\n * the colour its buttons and links wear, rather than a colour borrowed from a\n * reference. An empty bucket is a short neutral dash, so a quiet day still reads\n * as a day. A line against the period before is the brand over a neutral grey\n * one.\n *\n * All four are variables, so light and dark need no branch here: the consumer's\n * stylesheet already gives each a value per theme.\n */\nconst USAGE = {\n  bar: BRAND,\n  idle: 'var(--border-default)',\n  now: BRAND,\n  before: 'var(--text-muted)',\n} as const;\n\nexport interface ChartTheme {\n  /** Categorical identity, in fixed order. */\n  series: readonly string[];\n  /** Bars and the empty bucket between them; the line and the one before it. */\n  usage: { bar: string; idle: string; now: string; before: string };\n  dark: boolean;\n}\n\nexport function useChartTheme(): ChartTheme {\n  const { resolvedTheme } = useTheme();\n  const dark = resolvedTheme === 'dark';\n  return {\n    series: dark ? SERIES_DARK : SERIES_LIGHT,\n    usage: USAGE,\n    dark,\n  };\n}\n"],"mappings":";AAEA,SAAS,gBAAgB;AAoCzB,MAAM,QAAQ;AAOP,MAAM,oBAAoB,uBAAuB,KAAK;AAE7D,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AACF;AAEA,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,aAAa;AACnB,MAAM,aAAa;AAEnB,MAAM,gBAAgB;AAAA,EAC3B,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AACZ;AAEO,MAAM,mBAAmB,EAAE,UAAU,IAAI,MAAM,WAAW;AAQ1D,SAAS,cAAc,UAA0B;AACtD,MAAI,EAAE,WAAW,GAAI,QAAO;AAC5B,QAAM,MAAM,KAAK,MAAM,KAAK,KAAK,IAAI,GAAG,QAAQ,IAAI,EAAE;AACtD,SAAO,8CAA8C,GAAG;AAC1D;AAcA,MAAM,QAAQ;AAAA,EACZ,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,QAAQ;AACV;AAUO,SAAS,gBAA4B;AAC1C,QAAM,EAAE,cAAc,IAAI,SAAS;AACnC,QAAM,OAAO,kBAAkB;AAC/B,SAAO;AAAA,IACL,QAAQ,OAAO,cAAc;AAAA,IAC7B,OAAO;AAAA,IACP;AAAA,EACF;AACF;","names":[]}

package/dist/charts/charts.css

@@ -0,0 +1,27 @@
+.pv-chart {
+  cursor: crosshair;
+}
+.pv-chart-tip {
+  background: var(--bg-base);
+  border-radius: 10px;
+  box-shadow:
+    0 8px 24px rgba(16, 16, 30, 0.14),
+    0 0 0 1px var(--border-subtle);
+  padding: 7px 11px;
+  min-width: 78px;
+  text-align: center;
+  z-index: 2;
+}
+.pv-chart-tip-v {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+}
+.pv-chart-tip-l {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  margin-top: 2px;
+  white-space: nowrap;
+}

package/dist/charts/compare-tooltip.d.ts

@@ -0,0 +1,32 @@
+export interface SeriesRow {
+    t: number;
+    value: number | null;
+    projected?: number | null;
+    /** The baseline window's value at this position, if there is one. */
+    compare?: number | null;
+    /** And the date it actually fell on. */
+    compareT?: number | null;
+}
+/** A series that fits inside a day and a half is a CLOCK, not a calendar. */
+export declare function isIntraday(points: {
+    t: number;
+}[]): boolean;
+/** "6 AM" — the hour, for a series that never leaves the day. */
+export declare function clock(t: number): string;
+/**
+ * Both windows, both dated.
+ *
+ * The default tooltip names one value and heads itself with one date, which is
+ * enough while there is one series. With a baseline it is not: "3" against an
+ * unnamed ghost line leaves the reader working out which Monday they are being
+ * shown. Each column states its own date, and the current one is the one set in
+ * the heavier ink — the baseline is context, not the reading.
+ */
+export declare function CompareTooltip({ active, payload, formatValue, intraday, }: {
+    active?: boolean;
+    payload?: {
+        payload?: SeriesRow;
+    }[];
+    formatValue?: (v: number) => string;
+    intraday?: boolean;
+}): import("react").JSX.Element | null;

package/dist/charts/compare-tooltip.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function isIntraday(points) {
+  if (points.length < 2) return false;
+  const span = points[points.length - 1].t - points[0].t;
+  return span > 0 && span <= 36 * 36e5;
+}
+function clock(t) {
+  return new Date(t).toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function clockOnDay(t) {
+  const d = new Date(t);
+  return `${d.toLocaleDateString(void 0, { weekday: "short" })} ${clock(t)}`;
+}
+function stamp(t, intraday = false) {
+  if (intraday) return clock(t);
+  return new Date(t).toLocaleDateString(void 0, {
+    weekday: "short",
+    month: "short",
+    day: "numeric"
+  });
+}
+function CompareTooltip({
+  active,
+  payload,
+  formatValue,
+  intraday
+}) {
+  const row = active ? payload?.[0]?.payload : void 0;
+  if (!row) return null;
+  const acrossDays = intraday && row.compareT != null && new Date(row.t).toDateString() !== new Date(row.compareT).toDateString();
+  const label = (t) => acrossDays ? clockOnDay(t) : stamp(t, intraday);
+  const show = (v) => v == null ? "\u2014" : formatValue ? formatValue(v) : v.toLocaleString();
+  return /* @__PURE__ */ jsx("div", { className: "rounded-[10px] border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 shadow-md", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+    row.compareT != null && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--text-muted)]", children: label(row.compareT) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm tabular-nums text-[var(--text-secondary)]", children: show(row.compare) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[var(--text-secondary)]", children: label(row.t) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm font-semibold tabular-nums text-[var(--text-primary)]", children: show(row.value) })
+    ] })
+  ] }) });
+}
+export {
+  CompareTooltip,
+  clock,
+  isIntraday
+};
+//# sourceMappingURL=compare-tooltip.js.map

package/dist/charts/compare-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/compare-tooltip.tsx"],"sourcesContent":["'use client';\n\nexport interface SeriesRow {\n  t: number;\n  value: number | null;\n  projected?: number | null;\n  /** The baseline window's value at this position, if there is one. */\n  compare?: number | null;\n  /** And the date it actually fell on. */\n  compareT?: number | null;\n}\n\n/** A series that fits inside a day and a half is a CLOCK, not a calendar. */\nexport function isIntraday(points: { t: number }[]): boolean {\n  if (points.length < 2) return false;\n  const span = points[points.length - 1].t - points[0].t;\n  return span > 0 && span <= 36 * 3_600_000;\n}\n\n/** \"6 AM\" — the hour, for a series that never leaves the day. */\nexport function clock(t: number): string {\n  return new Date(t).toLocaleTimeString(undefined, {\n    hour: 'numeric',\n    minute: '2-digit',\n  });\n}\n\n/** \"Thu 5:00\" — the hour, said on a day, for two clocks read side by side. */\nfunction clockOnDay(t: number): string {\n  const d = new Date(t);\n  return `${d.toLocaleDateString(undefined, { weekday: 'short' })} ${clock(t)}`;\n}\n\n/**\n * \"Mon, Feb 16\", or the hour when the series is one day's worth.\n *\n * The formatter was a date one either way, so an hourly chart printed its own\n * date six times across the axis and told the reader nothing about when\n * anything happened.\n */\nfunction stamp(t: number, intraday = false): string {\n  if (intraday) return clock(t);\n  return new Date(t).toLocaleDateString(undefined, {\n    weekday: 'short',\n    month: 'short',\n    day: 'numeric',\n  });\n}\n\n/**\n * Both windows, both dated.\n *\n * The default tooltip names one value and heads itself with one date, which is\n * enough while there is one series. With a baseline it is not: \"3\" against an\n * unnamed ghost line leaves the reader working out which Monday they are being\n * shown. Each column states its own date, and the current one is the one set in\n * the heavier ink — the baseline is context, not the reading.\n */\nexport function CompareTooltip({\n  active,\n  payload,\n  formatValue,\n  intraday,\n}: {\n  active?: boolean;\n  payload?: { payload?: SeriesRow }[];\n  formatValue?: (v: number) => string;\n  intraday?: boolean;\n}) {\n  const row = active ? payload?.[0]?.payload : undefined;\n  if (!row) return null;\n\n  // Two columns reading \"5:00\" and \"5:00\" look like the tooltip repeating\n  // itself. On an hourly chart the two hours ARE the same hour — of different\n  // days — so the day is what tells them apart.\n  const acrossDays =\n    intraday &&\n    row.compareT != null &&\n    new Date(row.t).toDateString() !== new Date(row.compareT).toDateString();\n  const label = (t: number) =>\n    acrossDays ? clockOnDay(t) : stamp(t, intraday);\n  const show = (v: number | null | undefined) =>\n    v == null ? '—' : formatValue ? formatValue(v) : v.toLocaleString();\n\n  return (\n    <div className=\"rounded-[10px] border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 shadow-md\">\n      <div className=\"flex items-start gap-4\">\n        {row.compareT != null && (\n          <div>\n            <p className=\"text-2xs text-[var(--text-muted)]\">\n              {label(row.compareT)}\n            </p>\n            <p className=\"mt-0.5 text-sm tabular-nums text-[var(--text-secondary)]\">\n              {show(row.compare)}\n            </p>\n          </div>\n        )}\n        <div>\n          <p className=\"text-2xs font-medium text-[var(--text-secondary)]\">\n            {label(row.t)}\n          </p>\n          <p className=\"mt-0.5 text-sm font-semibold tabular-nums text-[var(--text-primary)]\">\n            {show(row.value)}\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAwFU,SACE,KADF;AA3EH,SAAS,WAAW,QAAkC;AAC3D,MAAI,OAAO,SAAS,EAAG,QAAO;AAC9B,QAAM,OAAO,OAAO,OAAO,SAAS,CAAC,EAAE,IAAI,OAAO,CAAC,EAAE;AACrD,SAAO,OAAO,KAAK,QAAQ,KAAK;AAClC;AAGO,SAAS,MAAM,GAAmB;AACvC,SAAO,IAAI,KAAK,CAAC,EAAE,mBAAmB,QAAW;AAAA,IAC/C,MAAM;AAAA,IACN,QAAQ;AAAA,EACV,CAAC;AACH;AAGA,SAAS,WAAW,GAAmB;AACrC,QAAM,IAAI,IAAI,KAAK,CAAC;AACpB,SAAO,GAAG,EAAE,mBAAmB,QAAW,EAAE,SAAS,QAAQ,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC;AAC7E;AASA,SAAS,MAAM,GAAW,WAAW,OAAe;AAClD,MAAI,SAAU,QAAO,MAAM,CAAC;AAC5B,SAAO,IAAI,KAAK,CAAC,EAAE,mBAAmB,QAAW;AAAA,IAC/C,SAAS;AAAA,IACT,OAAO;AAAA,IACP,KAAK;AAAA,EACP,CAAC;AACH;AAWO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,MAAM,SAAS,UAAU,CAAC,GAAG,UAAU;AAC7C,MAAI,CAAC,IAAK,QAAO;AAKjB,QAAM,aACJ,YACA,IAAI,YAAY,QAChB,IAAI,KAAK,IAAI,CAAC,EAAE,aAAa,MAAM,IAAI,KAAK,IAAI,QAAQ,EAAE,aAAa;AACzE,QAAM,QAAQ,CAAC,MACb,aAAa,WAAW,CAAC,IAAI,MAAM,GAAG,QAAQ;AAChD,QAAM,OAAO,CAAC,MACZ,KAAK,OAAO,WAAM,cAAc,YAAY,CAAC,IAAI,EAAE,eAAe;AAEpE,SACE,oBAAC,SAAI,WAAU,gGACb,+BAAC,SAAI,WAAU,0BACZ;AAAA,QAAI,YAAY,QACf,qBAAC,SACC;AAAA,0BAAC,OAAE,WAAU,qCACV,gBAAM,IAAI,QAAQ,GACrB;AAAA,MACA,oBAAC,OAAE,WAAU,4DACV,eAAK,IAAI,OAAO,GACnB;AAAA,OACF;AAAA,IAEF,qBAAC,SACC;AAAA,0BAAC,OAAE,WAAU,qDACV,gBAAM,IAAI,CAAC,GACd;AAAA,MACA,oBAAC,OAAE,WAAU,wEACV,eAAK,IAAI,KAAK,GACjB;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/charts/donut-chart.d.ts

@@ -0,0 +1,18 @@
+import './charts.css';
+export type DonutSlice = {
+    label: string;
+    value: number;
+    color?: string;
+};
+/**
+ * Donut / ring chart — segments drawn as stroked circle arcs via motion.dev's
+ * pathLength/pathOffset, so each segment springs in with rounded caps and a
+ * small gap. Center shows the total, or the hovered segment. Themed from tokens.
+ */
+export declare function DonutChart({ data, size, thickness, format, centerLabel, }: {
+    data: DonutSlice[];
+    size?: number;
+    thickness?: number;
+    format?: (n: number) => string;
+    centerLabel?: string;
+}): import("react").JSX.Element;

package/dist/charts/donut-chart.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useChartTheme } from "./chart-theme";
+import { motion } from "motion/react";
+import { springs } from "@withpotter/lib/motion";
+import "./charts.css";
+function DonutChart({
+  data,
+  size = 200,
+  thickness = 18,
+  format = (n) => n.toLocaleString(),
+  centerLabel = "Total"
+}) {
+  const [hover, setHover] = useState(null);
+  const { series: palette } = useChartTheme();
+  const total = Math.max(
+    1,
+    data.reduce((s, d) => s + d.value, 0)
+  );
+  const c = size / 2;
+  const r = c - thickness / 2 - 2;
+  const gap = 8e-3;
+  let offset = 0;
+  const segs = data.map((d, i) => {
+    const frac = d.value / total;
+    const seg = {
+      d,
+      i,
+      color: d.color ?? palette[i % palette.length],
+      len: Math.max(0, frac - gap),
+      offset
+    };
+    offset += frac;
+    return seg;
+  });
+  const shown = hover != null ? data[hover] : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "pv-donut",
+      style: { position: "relative", width: size, height: size },
+      onMouseLeave: () => setHover(null),
+      children: [
+        /* @__PURE__ */ jsx("svg", { width: size, height: size, role: "img", "aria-label": "Donut chart", children: /* @__PURE__ */ jsx("g", { transform: `rotate(-90 ${c} ${c})`, children: segs.map((s) => /* @__PURE__ */ jsx(
+          motion.circle,
+          {
+            cx: c,
+            cy: c,
+            r,
+            fill: "none",
+            stroke: s.color,
+            strokeWidth: hover === s.i ? thickness + 4 : thickness,
+            strokeLinecap: "round",
+            style: { pathOffset: s.offset },
+            initial: { pathLength: 0 },
+            animate: {
+              pathLength: s.len,
+              opacity: hover == null || hover === s.i ? 1 : 0.4
+            },
+            transition: { ...springs.soft, delay: 0.05 + s.i * 0.06 },
+            onMouseEnter: () => setHover(s.i)
+          },
+          s.i
+        )) }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "grid",
+              placeItems: "center",
+              pointerEvents: "none",
+              textAlign: "center"
+            },
+            children: /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "pv-donut-v", children: format(shown ? shown.value : total) }),
+              /* @__PURE__ */ jsx("div", { className: "pv-donut-l", children: shown ? shown.label : centerLabel })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DonutChart
+};
+//# sourceMappingURL=donut-chart.js.map