@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/donut-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { useChartTheme } from './chart-theme';\nimport { motion } from 'motion/react';\nimport { springs } from '@withpotter/lib/motion';\nimport './charts.css';\n\nexport type DonutSlice = { label: string; value: number; color?: string };\n\n/**\n * Donut / ring chart — segments drawn as stroked circle arcs via motion.dev's\n * pathLength/pathOffset, so each segment springs in with rounded caps and a\n * small gap. Center shows the total, or the hovered segment. Themed from tokens.\n */\nexport function DonutChart({\n  data,\n  size = 200,\n  thickness = 18,\n  format = (n) => n.toLocaleString(),\n  centerLabel = 'Total',\n}: {\n  data: DonutSlice[];\n  size?: number;\n  thickness?: number;\n  format?: (n: number) => string;\n  centerLabel?: string;\n}) {\n  const [hover, setHover] = useState<number | null>(null);\n  /* The validated palette, not five colours picked here.\n   *\n   * Three of these were bare hexes in no scale — a magenta, an amber and a\n   * slate — so a donut's third slice was a different magenta from every other\n   * chart's third series. `chart-theme` exists to end exactly that, and its\n   * order is checked in both modes for lightness band, chroma floor and\n   * adjacent-pair CVD separation. This had none of that. */\n  const { series: palette } = useChartTheme();\n\n  const total = Math.max(\n    1,\n    data.reduce((s, d) => s + d.value, 0),\n  );\n  const c = size / 2;\n  const r = c - thickness / 2 - 2;\n  const gap = 0.008; // pathLength units between segments\n\n  let offset = 0;\n  const segs = data.map((d, i) => {\n    const frac = d.value / total;\n    const seg = {\n      d,\n      i,\n      color: d.color ?? palette[i % palette.length],\n      len: Math.max(0, frac - gap),\n      offset,\n    };\n    offset += frac;\n    return seg;\n  });\n\n  const shown = hover != null ? data[hover] : null;\n\n  return (\n    <div\n      className=\"pv-donut\"\n      style={{ position: 'relative', width: size, height: size }}\n      onMouseLeave={() => setHover(null)}\n    >\n      <svg width={size} height={size} role=\"img\" aria-label=\"Donut chart\">\n        <g transform={`rotate(-90 ${c} ${c})`}>\n          {segs.map((s) => (\n            <motion.circle\n              key={s.i}\n              cx={c}\n              cy={c}\n              r={r}\n              fill=\"none\"\n              stroke={s.color}\n              strokeWidth={hover === s.i ? thickness + 4 : thickness}\n              strokeLinecap=\"round\"\n              style={{ pathOffset: s.offset }}\n              initial={{ pathLength: 0 }}\n              animate={{\n                pathLength: s.len,\n                opacity: hover == null || hover === s.i ? 1 : 0.4,\n              }}\n              transition={{ ...springs.soft, delay: 0.05 + s.i * 0.06 }}\n              onMouseEnter={() => setHover(s.i)}\n            />\n          ))}\n        </g>\n      </svg>\n\n      {/* center readout */}\n      <div\n        style={{\n          position: 'absolute',\n          inset: 0,\n          display: 'grid',\n          placeItems: 'center',\n          pointerEvents: 'none',\n          textAlign: 'center',\n        }}\n      >\n        <div>\n          <div className=\"pv-donut-v\">\n            {format(shown ? shown.value : total)}\n          </div>\n          <div className=\"pv-donut-l\">{shown ? shown.label : centerLabel}</div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAuEY,cAiCJ,YAjCI;AArEZ,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,OAAO;AASA,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,SAAS,CAAC,MAAM,EAAE,eAAe;AAAA,EACjC,cAAc;AAChB,GAMG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AAQtD,QAAM,EAAE,QAAQ,QAAQ,IAAI,cAAc;AAE1C,QAAM,QAAQ,KAAK;AAAA,IACjB;AAAA,IACA,KAAK,OAAO,CAAC,GAAG,MAAM,IAAI,EAAE,OAAO,CAAC;AAAA,EACtC;AACA,QAAM,IAAI,OAAO;AACjB,QAAM,IAAI,IAAI,YAAY,IAAI;AAC9B,QAAM,MAAM;AAEZ,MAAI,SAAS;AACb,QAAM,OAAO,KAAK,IAAI,CAAC,GAAG,MAAM;AAC9B,UAAM,OAAO,EAAE,QAAQ;AACvB,UAAM,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA,OAAO,EAAE,SAAS,QAAQ,IAAI,QAAQ,MAAM;AAAA,MAC5C,KAAK,KAAK,IAAI,GAAG,OAAO,GAAG;AAAA,MAC3B;AAAA,IACF;AACA,cAAU;AACV,WAAO;AAAA,EACT,CAAC;AAED,QAAM,QAAQ,SAAS,OAAO,KAAK,KAAK,IAAI;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,UAAU,YAAY,OAAO,MAAM,QAAQ,KAAK;AAAA,MACzD,cAAc,MAAM,SAAS,IAAI;AAAA,MAEjC;AAAA,4BAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,MAAK,OAAM,cAAW,eACpD,8BAAC,OAAE,WAAW,cAAc,CAAC,IAAI,CAAC,KAC/B,eAAK,IAAI,CAAC,MACT;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YAEC,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ;AAAA,YACA,MAAK;AAAA,YACL,QAAQ,EAAE;AAAA,YACV,aAAa,UAAU,EAAE,IAAI,YAAY,IAAI;AAAA,YAC7C,eAAc;AAAA,YACd,OAAO,EAAE,YAAY,EAAE,OAAO;AAAA,YAC9B,SAAS,EAAE,YAAY,EAAE;AAAA,YACzB,SAAS;AAAA,cACP,YAAY,EAAE;AAAA,cACd,SAAS,SAAS,QAAQ,UAAU,EAAE,IAAI,IAAI;AAAA,YAChD;AAAA,YACA,YAAY,EAAE,GAAG,QAAQ,MAAM,OAAO,OAAO,EAAE,IAAI,KAAK;AAAA,YACxD,cAAc,MAAM,SAAS,EAAE,CAAC;AAAA;AAAA,UAf3B,EAAE;AAAA,QAgBT,CACD,GACH,GACF;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,OAAO;AAAA,cACP,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,eAAe;AAAA,cACf,WAAW;AAAA,YACb;AAAA,YAEA,+BAAC,SACC;AAAA,kCAAC,SAAI,WAAU,cACZ,iBAAO,QAAQ,MAAM,QAAQ,KAAK,GACrC;AAAA,cACA,oBAAC,SAAI,WAAU,cAAc,kBAAQ,MAAM,QAAQ,aAAY;AAAA,eACjE;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/charts/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Every chart in the app, in one importable place.
+ *
+ * This folder held four finished chart components — `AreaMetricCard`,
+ * `DonutChart`, `AreaChart`, `BarChart` — that **nothing had ever imported**,
+ * while `components/dashboard/home/` reached sideways into
+ * `app/dashboard/analytics/components/` for the one chart it needed. The
+ * shared folder was invisible; a route folder was the de facto shared one.
+ *
+ * That is the same failure the design system had: the components were fine,
+ * nobody could find them, so every new surface drew its own. A barrel is the
+ * cheapest fix for it — before writing a chart, look here.
+ *
+ * The charts that were stranded in the analytics route now live here too, with
+ * their theme, their empty state and their formatters pulled out to shared
+ * modules so nothing in this folder points back at a route.
+ */
+export { AreaChart } from './area-chart';
+export type { ChartPoint } from './area-chart';
+export { AreaMetricCard } from './area-metric-card';
+export type { MetricRange } from './area-metric-card';
+export { BarChart } from './bar-chart';
+export { DonutChart } from './donut-chart';
+export type { DonutSlice } from './donut-chart';
+export { RevenueSpineChart } from './revenue-spine-chart';
+export { TimeSeriesChart } from './time-series-chart';
+/** A measure split by a dimension: chart and breakdown as one object. */
+export { SeriesBreakdown } from './series-breakdown';
+export type { SeriesBreakdownProps, BreakdownSeries, BreakdownPoint, } from './series-breakdown';
+export { EmptyState as ChartEmptyState } from './chart-empty-state';
+export { CHART_GRID, CHART_TICK, CHART_TICK_STYLE, CHART_TOOLTIP, } from './chart-theme';

package/dist/charts/index.js

@@ -0,0 +1,29 @@
+import { AreaChart } from "./area-chart";
+import { AreaMetricCard } from "./area-metric-card";
+import { BarChart } from "./bar-chart";
+import { DonutChart } from "./donut-chart";
+import { RevenueSpineChart } from "./revenue-spine-chart";
+import { TimeSeriesChart } from "./time-series-chart";
+import { SeriesBreakdown } from "./series-breakdown";
+import { EmptyState } from "./chart-empty-state";
+import {
+  CHART_GRID,
+  CHART_TICK,
+  CHART_TICK_STYLE,
+  CHART_TOOLTIP
+} from "./chart-theme";
+export {
+  AreaChart,
+  AreaMetricCard,
+  BarChart,
+  CHART_GRID,
+  CHART_TICK,
+  CHART_TICK_STYLE,
+  CHART_TOOLTIP,
+  EmptyState as ChartEmptyState,
+  DonutChart,
+  RevenueSpineChart,
+  SeriesBreakdown,
+  TimeSeriesChart
+};
+//# sourceMappingURL=index.js.map

package/dist/charts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/index.ts"],"sourcesContent":["/**\n * Every chart in the app, in one importable place.\n *\n * This folder held four finished chart components — `AreaMetricCard`,\n * `DonutChart`, `AreaChart`, `BarChart` — that **nothing had ever imported**,\n * while `components/dashboard/home/` reached sideways into\n * `app/dashboard/analytics/components/` for the one chart it needed. The\n * shared folder was invisible; a route folder was the de facto shared one.\n *\n * That is the same failure the design system had: the components were fine,\n * nobody could find them, so every new surface drew its own. A barrel is the\n * cheapest fix for it — before writing a chart, look here.\n *\n * The charts that were stranded in the analytics route now live here too, with\n * their theme, their empty state and their formatters pulled out to shared\n * modules so nothing in this folder points back at a route.\n */\n\nexport { AreaChart } from './area-chart';\nexport type { ChartPoint } from './area-chart';\nexport { AreaMetricCard } from './area-metric-card';\nexport type { MetricRange } from './area-metric-card';\nexport { BarChart } from './bar-chart';\nexport { DonutChart } from './donut-chart';\nexport type { DonutSlice } from './donut-chart';\nexport { RevenueSpineChart } from './revenue-spine-chart';\nexport { TimeSeriesChart } from './time-series-chart';\n/** A measure split by a dimension: chart and breakdown as one object. */\nexport { SeriesBreakdown } from './series-breakdown';\nexport type {\n  SeriesBreakdownProps,\n  BreakdownSeries,\n  BreakdownPoint,\n} from './series-breakdown';\nexport { EmptyState as ChartEmptyState } from './chart-empty-state';\nexport {\n  CHART_GRID,\n  CHART_TICK,\n  CHART_TICK_STYLE,\n  CHART_TOOLTIP,\n} from './chart-theme';\n"],"mappings":"AAkBA,SAAS,iBAAiB;AAE1B,SAAS,sBAAsB;AAE/B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAE3B,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAEhC,SAAS,uBAAuB;AAMhC,SAAuB,kBAAuB;AAC9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}

package/dist/charts/labelled-bars.d.ts

@@ -0,0 +1,20 @@
+export interface LabelledBar {
+    label: string;
+    value: number;
+}
+/**
+ * Bars for a short fixed set (seven weekdays, twenty-four hours), each with its
+ * own label under it, in the same violet as the rest.
+ *
+ * The time-series bars label only their two ends because their buckets are
+ * dates; these buckets are the names a person reads, so every one is named, or
+ * every `labelEvery`th when there are too many to fit. The highest bar is the
+ * one that matters, so it is drawn solid and the rest a lighter tint.
+ */
+export declare function LabelledBars({ bars, height, labelEvery, formatValue, 'aria-label': ariaLabel, }: {
+    bars: LabelledBar[];
+    height?: number;
+    labelEvery?: number;
+    formatValue?: (n: number) => string;
+    'aria-label'?: string;
+}): import("react").JSX.Element;

package/dist/charts/labelled-bars.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useChartTheme } from "./chart-theme";
+function LabelledBars({
+  bars,
+  height = 120,
+  labelEvery = 1,
+  formatValue = (n) => n.toLocaleString(),
+  "aria-label": ariaLabel
+}) {
+  const { usage } = useChartTheme();
+  const max = Math.max(1, ...bars.map((b) => b.value));
+  const peak = bars.findIndex((b) => b.value === max);
+  return /* @__PURE__ */ jsxs("div", { role: "img", "aria-label": ariaLabel, className: "w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-end gap-1", style: { height }, children: bars.map((b, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        title: `${b.label}: ${formatValue(b.value)}`,
+        className: "flex h-full min-w-0 flex-1 items-end",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-full rounded-t-sm",
+            style: {
+              height: b.value > 0 ? `${Math.max(3, b.value / max * 100)}%` : 3,
+              background: b.value === 0 ? usage.idle : usage.bar,
+              opacity: b.value > 0 && i !== peak ? 0.55 : 1
+            }
+          }
+        )
+      },
+      b.label
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 flex gap-1 text-sm text-[var(--text-tertiary)]", children: bars.map((b, i) => /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-center", children: i % labelEvery === 0 ? b.label : "" }, b.label)) })
+  ] });
+}
+export {
+  LabelledBars
+};
+//# sourceMappingURL=labelled-bars.js.map

package/dist/charts/labelled-bars.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/labelled-bars.tsx"],"sourcesContent":["'use client';\n\nimport { useChartTheme } from './chart-theme';\n\nexport interface LabelledBar {\n  label: string;\n  value: number;\n}\n\n/**\n * Bars for a short fixed set (seven weekdays, twenty-four hours), each with its\n * own label under it, in the same violet as the rest.\n *\n * The time-series bars label only their two ends because their buckets are\n * dates; these buckets are the names a person reads, so every one is named, or\n * every `labelEvery`th when there are too many to fit. The highest bar is the\n * one that matters, so it is drawn solid and the rest a lighter tint.\n */\nexport function LabelledBars({\n  bars,\n  height = 120,\n  labelEvery = 1,\n  formatValue = (n) => n.toLocaleString(),\n  'aria-label': ariaLabel,\n}: {\n  bars: LabelledBar[];\n  height?: number;\n  labelEvery?: number;\n  formatValue?: (n: number) => string;\n  'aria-label'?: string;\n}) {\n  const { usage } = useChartTheme();\n  const max = Math.max(1, ...bars.map((b) => b.value));\n  const peak = bars.findIndex((b) => b.value === max);\n\n  return (\n    <div role=\"img\" aria-label={ariaLabel} className=\"w-full\">\n      <div className=\"flex items-end gap-1\" style={{ height }}>\n        {bars.map((b, i) => (\n          <div\n            key={b.label}\n            title={`${b.label}: ${formatValue(b.value)}`}\n            className=\"flex h-full min-w-0 flex-1 items-end\"\n          >\n            <div\n              className=\"w-full rounded-t-sm\"\n              style={{\n                height:\n                  b.value > 0 ? `${Math.max(3, (b.value / max) * 100)}%` : 3,\n                background: b.value === 0 ? usage.idle : usage.bar,\n                opacity: b.value > 0 && i !== peak ? 0.55 : 1,\n              }}\n            />\n          </div>\n        ))}\n      </div>\n      <div className=\"mt-2 flex gap-1 text-sm text-[var(--text-tertiary)]\">\n        {bars.map((b, i) => (\n          <span key={b.label} className=\"min-w-0 flex-1 text-center\">\n            {i % labelEvery === 0 ? b.label : ''}\n          </span>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAoCI,SAQQ,KARR;AAlCJ,SAAS,qBAAqB;AAgBvB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc,CAAC,MAAM,EAAE,eAAe;AAAA,EACtC,cAAc;AAChB,GAMG;AACD,QAAM,EAAE,MAAM,IAAI,cAAc;AAChC,QAAM,MAAM,KAAK,IAAI,GAAG,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AACnD,QAAM,OAAO,KAAK,UAAU,CAAC,MAAM,EAAE,UAAU,GAAG;AAElD,SACE,qBAAC,SAAI,MAAK,OAAM,cAAY,WAAW,WAAU,UAC/C;AAAA,wBAAC,SAAI,WAAU,wBAAuB,OAAO,EAAE,OAAO,GACnD,eAAK,IAAI,CAAC,GAAG,MACZ;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO,GAAG,EAAE,KAAK,KAAK,YAAY,EAAE,KAAK,CAAC;AAAA,QAC1C,WAAU;AAAA,QAEV;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,QACE,EAAE,QAAQ,IAAI,GAAG,KAAK,IAAI,GAAI,EAAE,QAAQ,MAAO,GAAG,CAAC,MAAM;AAAA,cAC3D,YAAY,EAAE,UAAU,IAAI,MAAM,OAAO,MAAM;AAAA,cAC/C,SAAS,EAAE,QAAQ,KAAK,MAAM,OAAO,OAAO;AAAA,YAC9C;AAAA;AAAA,QACF;AAAA;AAAA,MAZK,EAAE;AAAA,IAaT,CACD,GACH;AAAA,IACA,oBAAC,SAAI,WAAU,uDACZ,eAAK,IAAI,CAAC,GAAG,MACZ,oBAAC,UAAmB,WAAU,8BAC3B,cAAI,eAAe,IAAI,EAAE,QAAQ,MADzB,EAAE,KAEb,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/charts/rate-line.d.ts

@@ -0,0 +1,22 @@
+export interface RatePoint {
+    label: string;
+    /** 0 to 100. */
+    value: number;
+}
+/**
+ * A rate over time as a smooth line on a 0 to 100% scale, with the figures down
+ * the right-hand side, a dashed line for the overall average and a card that
+ * follows the pointer to say what the nearest point is.
+ *
+ * Both ends of the line sit a little inside the plot so the first and last dots
+ * are not cut by its edge. The top of the scale is the highest value with room
+ * above it, rounded to ten and never past 100: a rate that sits at 40% is drawn
+ * in the middle of the plot rather than in a thin band of a 0 to 100 one.
+ */
+export declare function RateLine({ points, average, averageLabel, height, 'aria-label': ariaLabel, }: {
+    points: RatePoint[];
+    average?: number | null;
+    averageLabel?: string;
+    height?: number;
+    'aria-label'?: string;
+}): import("react").JSX.Element | null;

package/dist/charts/rate-line.js

@@ -0,0 +1,166 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "@withpotter/lib/utils";
+import { useChartTheme } from "./chart-theme";
+import { curve } from "./usage-line";
+function RateLine({
+  points,
+  average,
+  averageLabel = "Your average",
+  height = 224,
+  "aria-label": ariaLabel
+}) {
+  const { usage } = useChartTheme();
+  const [hover, setHover] = useState(null);
+  if (points.length < 2) return null;
+  const peak = Math.max(...points.map((p) => p.value), average ?? 0);
+  const top = Math.min(100, Math.max(20, Math.ceil(peak * 1.4 / 10) * 10));
+  const axis = [top, top / 2, 0];
+  const x = (i) => 3 + i / (points.length - 1) * 94;
+  const y = (v) => 100 - Math.min(top, Math.max(0, v)) / top * 100;
+  const xs = points.map((_, i) => x(i));
+  const ys = points.map((p) => y(p.value));
+  const active = hover != null ? points[hover] : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "img",
+      "aria-label": ariaLabel,
+      className: "relative w-full select-none",
+      style: { height: height + 24 },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "absolute left-0 right-14 top-0",
+            style: { height },
+            onMouseLeave: () => setHover(null),
+            onMouseMove: (e) => {
+              const box = e.currentTarget.getBoundingClientRect();
+              const at = (e.clientX - box.left) / box.width * 100;
+              const nearest = xs.reduce(
+                (best, px, i) => Math.abs(px - at) < Math.abs(xs[best] - at) ? i : best,
+                0
+              );
+              setHover(nearest);
+            },
+            children: [
+              axis.map((v) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  className: "absolute inset-x-0 border-t border-[var(--border-subtle)]",
+                  style: { top: `${y(v)}%` }
+                },
+                v
+              )),
+              average != null ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  className: "absolute inset-x-0 border-t border-dashed border-[var(--text-muted)]",
+                  style: { top: `${y(average)}%` }
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 100 100",
+                  preserveAspectRatio: "none",
+                  className: "size-full overflow-visible",
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: curve(xs, ys),
+                      fill: "none",
+                      stroke: usage.bar,
+                      strokeWidth: 2,
+                      vectorEffect: "non-scaling-stroke"
+                    }
+                  )
+                }
+              ),
+              points.map((p, i) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "absolute -translate-x-1/2 -translate-y-1/2 rounded-full",
+                    hover === i ? "size-3" : "size-2"
+                  ),
+                  style: {
+                    left: `${xs[i]}%`,
+                    top: `${ys[i]}%`,
+                    background: usage.bar
+                  }
+                },
+                p.label
+              )),
+              active && hover != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": true,
+                    className: "absolute inset-y-0 w-px bg-[var(--border-default)]",
+                    style: { left: `${xs[hover]}%` }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "pointer-events-none absolute z-10 -translate-x-1/2 rounded-xl bg-[var(--bg-base)] px-3 py-2 shadow-lg",
+                    style: {
+                      left: `${Math.min(88, Math.max(12, xs[hover]))}%`,
+                      top: Math.max(0, ys[hover] / 100 * height - 84)
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: active.label }),
+                      /* @__PURE__ */ jsxs("p", { className: "text-md font-semibold tabular-nums text-[var(--text-primary)]", children: [
+                        Math.round(active.value),
+                        "%"
+                      ] })
+                    ]
+                  }
+                )
+              ] }) : null
+            ]
+          }
+        ),
+        axis.map((v) => /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "absolute right-0 w-12 -translate-y-1/2 text-sm tabular-nums text-[var(--text-tertiary)]",
+            style: { top: `${y(v) / 100 * height}px` },
+            children: [
+              Math.round(v),
+              "%"
+            ]
+          },
+          v
+        )),
+        average != null ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute left-0 -translate-y-full pb-0.5 text-xs text-[var(--text-muted)]",
+            style: { top: `${y(average) / 100 * height}px` },
+            children: averageLabel
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute bottom-0 left-0 right-14 flex justify-between text-sm text-[var(--text-tertiary)]",
+            "aria-hidden": true,
+            children: points.map((p) => /* @__PURE__ */ jsx("span", { children: p.label }, p.label))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  RateLine
+};
+//# sourceMappingURL=rate-line.js.map

package/dist/charts/rate-line.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/rate-line.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { cn } from '@withpotter/lib/utils';\nimport { useChartTheme } from './chart-theme';\nimport { curve } from './usage-line';\n\nexport interface RatePoint {\n  label: string;\n  /** 0 to 100. */\n  value: number;\n}\n\n/**\n * A rate over time as a smooth line on a 0 to 100% scale, with the figures down\n * the right-hand side, a dashed line for the overall average and a card that\n * follows the pointer to say what the nearest point is.\n *\n * Both ends of the line sit a little inside the plot so the first and last dots\n * are not cut by its edge. The top of the scale is the highest value with room\n * above it, rounded to ten and never past 100: a rate that sits at 40% is drawn\n * in the middle of the plot rather than in a thin band of a 0 to 100 one.\n */\nexport function RateLine({\n  points,\n  average,\n  averageLabel = 'Your average',\n  height = 224,\n  'aria-label': ariaLabel,\n}: {\n  points: RatePoint[];\n  average?: number | null;\n  averageLabel?: string;\n  height?: number;\n  'aria-label'?: string;\n}) {\n  const { usage } = useChartTheme();\n  const [hover, setHover] = useState<number | null>(null);\n  if (points.length < 2) return null;\n\n  const peak = Math.max(...points.map((p) => p.value), average ?? 0);\n  const top = Math.min(100, Math.max(20, Math.ceil((peak * 1.4) / 10) * 10));\n  const axis = [top, top / 2, 0];\n  const x = (i: number) => 3 + (i / (points.length - 1)) * 94;\n  const y = (v: number) => 100 - (Math.min(top, Math.max(0, v)) / top) * 100;\n  const xs = points.map((_, i) => x(i));\n  const ys = points.map((p) => y(p.value));\n  const active = hover != null ? points[hover] : null;\n\n  return (\n    <div\n      role=\"img\"\n      aria-label={ariaLabel}\n      className=\"relative w-full select-none\"\n      style={{ height: height + 24 }}\n    >\n      <div\n        className=\"absolute left-0 right-14 top-0\"\n        style={{ height }}\n        onMouseLeave={() => setHover(null)}\n        onMouseMove={(e) => {\n          const box = e.currentTarget.getBoundingClientRect();\n          const at = ((e.clientX - box.left) / box.width) * 100;\n          const nearest = xs.reduce(\n            (best, px, i) =>\n              Math.abs(px - at) < Math.abs(xs[best] - at) ? i : best,\n            0,\n          );\n          setHover(nearest);\n        }}\n      >\n        {axis.map((v) => (\n          <div\n            key={v}\n            aria-hidden\n            className=\"absolute inset-x-0 border-t border-[var(--border-subtle)]\"\n            style={{ top: `${y(v)}%` }}\n          />\n        ))}\n        {average != null ? (\n          <div\n            aria-hidden\n            className=\"absolute inset-x-0 border-t border-dashed border-[var(--text-muted)]\"\n            style={{ top: `${y(average)}%` }}\n          />\n        ) : null}\n\n        <svg\n          viewBox=\"0 0 100 100\"\n          preserveAspectRatio=\"none\"\n          className=\"size-full overflow-visible\"\n          aria-hidden\n        >\n          <path\n            d={curve(xs, ys)}\n            fill=\"none\"\n            stroke={usage.bar}\n            strokeWidth={2}\n            vectorEffect=\"non-scaling-stroke\"\n          />\n        </svg>\n\n        {points.map((p, i) => (\n          <span\n            key={p.label}\n            aria-hidden\n            className={cn(\n              'absolute -translate-x-1/2 -translate-y-1/2 rounded-full',\n              hover === i ? 'size-3' : 'size-2',\n            )}\n            style={{\n              left: `${xs[i]}%`,\n              top: `${ys[i]}%`,\n              background: usage.bar,\n            }}\n          />\n        ))}\n\n        {active && hover != null ? (\n          <>\n            <div\n              aria-hidden\n              className=\"absolute inset-y-0 w-px bg-[var(--border-default)]\"\n              style={{ left: `${xs[hover]}%` }}\n            />\n            <div\n              className=\"pointer-events-none absolute z-10 -translate-x-1/2 rounded-xl bg-[var(--bg-base)] px-3 py-2 shadow-lg\"\n              style={{\n                left: `${Math.min(88, Math.max(12, xs[hover]))}%`,\n                top: Math.max(0, (ys[hover] / 100) * height - 84),\n              }}\n            >\n              <p className=\"text-xs text-[var(--text-tertiary)]\">\n                {active.label}\n              </p>\n              <p className=\"text-md font-semibold tabular-nums text-[var(--text-primary)]\">\n                {Math.round(active.value)}%\n              </p>\n            </div>\n          </>\n        ) : null}\n      </div>\n\n      {axis.map((v) => (\n        <span\n          key={v}\n          className=\"absolute right-0 w-12 -translate-y-1/2 text-sm tabular-nums text-[var(--text-tertiary)]\"\n          style={{ top: `${(y(v) / 100) * height}px` }}\n        >\n          {Math.round(v)}%\n        </span>\n      ))}\n      {average != null ? (\n        <span\n          className=\"absolute left-0 -translate-y-full pb-0.5 text-xs text-[var(--text-muted)]\"\n          style={{ top: `${(y(average) / 100) * height}px` }}\n        >\n          {averageLabel}\n        </span>\n      ) : null}\n\n      <div\n        className=\"absolute bottom-0 left-0 right-14 flex justify-between text-sm text-[var(--text-tertiary)]\"\n        aria-hidden\n      >\n        {points.map((p) => (\n          <span key={p.label}>{p.label}</span>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/charts/revenue-spine-chart.d.ts

@@ -0,0 +1,24 @@
+import type { TimeSeriesPoint } from '@withpotter/lib/api/types';
+/**
+ * The money-spine revenue chart. Prior period as a dashed ghost line so growth
+ * is legible at a glance; flat fill, no gradient.
+ *
+ * `shape` decides how the current period is drawn, and bars are the default.
+ * A filled line says "this is one continuous quantity that was rising and
+ * falling"; revenue is not that. It is a stack of separate days, each of which
+ * either happened or did not, and a line drawn through them interpolates
+ * amounts on dates that have no such amount — the segment between Tuesday and
+ * Thursday implies a Wednesday value nobody took. Bars on a shared baseline are
+ * a ledger you scan, which is what every reporting surface we looked at uses
+ * and what a merchant is actually reading for.
+ *
+ * `area` survives for series that ARE continuous — a stock level, a balance —
+ * where the value between two samples genuinely existed.
+ */
+export declare function RevenueSpineChart({ current, prior, formatCurrency, height, shape, }: {
+    current: TimeSeriesPoint[];
+    prior?: TimeSeriesPoint[] | null;
+    formatCurrency: (n: number) => string;
+    height?: number;
+    shape?: 'bars' | 'area';
+}): import("react").JSX.Element;

package/dist/charts/revenue-spine-chart.js

@@ -0,0 +1,218 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChartNoAxesCombined } from "lucide-react";
+import {
+  ComposedChart,
+  Area,
+  Bar,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ReferenceLine,
+  ReferenceDot,
+  ResponsiveContainer
+} from "recharts";
+import { useIsMobile } from "@withpotter/hooks/use-mobile";
+import { formatShortDate, formatNumber } from "@withpotter/lib/format";
+import {
+  CHART_GRID,
+  CHART_TICK,
+  CHART_TICK_STYLE,
+  CHART_TOOLTIP
+} from "./chart-theme";
+import { EmptyState } from "./chart-empty-state";
+function RevenueSpineChart({
+  current,
+  prior,
+  formatCurrency,
+  height = 200,
+  shape = "bars"
+}) {
+  const isMobile = useIsMobile();
+  const chartHeight = isMobile ? 170 : height;
+  if (!current || current.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: ChartNoAxesCombined,
+        message: "No revenue in this period"
+      }
+    );
+  }
+  const ghostStroke = "var(--text-muted)";
+  const brand = "var(--color-brand-500)";
+  const rows = current.map((pt, i) => ({
+    date: formatShortDate(pt.date),
+    value: pt.value,
+    prior: prior && prior[i] ? prior[i].value : null
+  }));
+  const hasPrior = rows.some((r) => r.prior != null);
+  const lastIndex = rows.length - 1;
+  const peakIndex = current.reduce(
+    (best, pt, i) => pt.value > current[best].value ? i : best,
+    0
+  );
+  const peak = current[peakIndex];
+  const average = current.reduce((sum, pt) => sum + pt.value, 0) / current.length;
+  const worthMarking = false;
+  const peakLabel = new Date(peak.date).toLocaleDateString("en-US", {
+    weekday: "short"
+  });
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: chartHeight, children: /* @__PURE__ */ jsxs(
+    ComposedChart,
+    {
+      data: rows,
+      margin: { top: 18, right: 6, bottom: 0, left: isMobile ? -18 : -6 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { stroke: CHART_GRID, vertical: false }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: "date",
+            tick: CHART_TICK_STYLE,
+            axisLine: false,
+            tickLine: false,
+            minTickGap: 24
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            tick: CHART_TICK_STYLE,
+            axisLine: false,
+            tickLine: false,
+            width: 46,
+            tickFormatter: (v) => formatNumber(v)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            cursor: { stroke: ghostStroke, strokeWidth: 1 },
+            contentStyle: CHART_TOOLTIP,
+            formatter: (v, name) => {
+              const num = typeof v === "number" ? v : Number(v) || 0;
+              return [
+                formatCurrency(num),
+                name === "prior" ? "Prior" : "Revenue"
+              ];
+            }
+          }
+        ),
+        shape === "bars" ? (
+          // No explicit barSize. Recharts divides the band, so the bars widen
+          // on a 7-day window and narrow on a year without the caller having to
+          // know which period is showing. maxBarSize stops a 3-point series
+          // rendering three columns the width of a card.
+          /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: "value",
+              fill: brand,
+              name: "value",
+              maxBarSize: 44,
+              radius: [2, 2, 0, 0],
+              isAnimationActive: false
+            }
+          )
+        ) : /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: "value",
+            stroke: brand,
+            strokeWidth: 2.5,
+            fill: brand,
+            fillOpacity: 0.1,
+            name: "value",
+            dot: false,
+            activeDot: { r: 4, strokeWidth: 0 },
+            isAnimationActive: false
+          }
+        ),
+        hasPrior && /* @__PURE__ */ jsx(
+          Line,
+          {
+            type: "monotone",
+            dataKey: "prior",
+            stroke: ghostStroke,
+            strokeWidth: 2,
+            strokeDasharray: "4 4",
+            dot: false,
+            name: "prior",
+            connectNulls: true,
+            isAnimationActive: false
+          }
+        ),
+        average > 0 && /* @__PURE__ */ jsx(
+          ReferenceLine,
+          {
+            y: average,
+            stroke: CHART_TICK,
+            strokeDasharray: "2 4",
+            ifOverflow: "extendDomain",
+            label: {
+              value: `${formatCurrency(average)} a day`,
+              position: "insideTopLeft",
+              fill: CHART_TICK,
+              fontSize: 11
+            }
+          }
+        ),
+        worthMarking && /* @__PURE__ */ jsx(
+          ReferenceDot,
+          {
+            x: formatShortDate(peak.date),
+            y: peak.value,
+            r: 4,
+            fill: brand,
+            stroke: "var(--bg-base)",
+            strokeWidth: 2,
+            ifOverflow: "extendDomain",
+            label: {
+              value: `${peakLabel} ${formatCurrency(peak.value)}`,
+              position: "top",
+              fill: "var(--text-secondary)",
+              fontSize: 11
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Line,
+          {
+            type: "monotone",
+            dataKey: "value",
+            stroke: "transparent",
+            dot: (props) => {
+              const { cx, cy, index } = props;
+              if (index !== lastIndex || cx == null || cy == null) {
+                return /* @__PURE__ */ jsx("g", {}, `end-${index}`);
+              }
+              return /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r: 4,
+                  fill: brand,
+                  stroke: "var(--bg-base)",
+                  strokeWidth: 2
+                },
+                `end-${index}`
+              );
+            },
+            activeDot: false,
+            isAnimationActive: false,
+            legendType: "none"
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  RevenueSpineChart
+};
+//# sourceMappingURL=revenue-spine-chart.js.map

package/dist/charts/revenue-spine-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/revenue-spine-chart.tsx"],"sourcesContent":["'use client';\n\nimport { ChartNoAxesCombined } from 'lucide-react';\nimport {\n  ComposedChart,\n  Area,\n  Bar,\n  Line,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ReferenceLine,\n  ReferenceDot,\n  ResponsiveContainer,\n} from 'recharts';\nimport { useIsMobile } from '@withpotter/hooks/use-mobile';\nimport { formatShortDate, formatNumber } from '@withpotter/lib/format';\nimport {\n  CHART_GRID,\n  CHART_TICK,\n  CHART_TICK_STYLE,\n  CHART_TOOLTIP,\n} from './chart-theme';\nimport { EmptyState } from './chart-empty-state';\nimport type { TimeSeriesPoint } from '@withpotter/lib/api/types';\n\ninterface Row {\n  date: string;\n  value: number;\n  prior: number | null;\n}\n\n/**\n * The money-spine revenue chart. Prior period as a dashed ghost line so growth\n * is legible at a glance; flat fill, no gradient.\n *\n * `shape` decides how the current period is drawn, and bars are the default.\n * A filled line says \"this is one continuous quantity that was rising and\n * falling\"; revenue is not that. It is a stack of separate days, each of which\n * either happened or did not, and a line drawn through them interpolates\n * amounts on dates that have no such amount — the segment between Tuesday and\n * Thursday implies a Wednesday value nobody took. Bars on a shared baseline are\n * a ledger you scan, which is what every reporting surface we looked at uses\n * and what a merchant is actually reading for.\n *\n * `area` survives for series that ARE continuous — a stock level, a balance —\n * where the value between two samples genuinely existed.\n */\nexport function RevenueSpineChart({\n  current,\n  prior,\n  formatCurrency,\n  height = 200,\n  shape = 'bars',\n}: {\n  current: TimeSeriesPoint[];\n  prior?: TimeSeriesPoint[] | null;\n  formatCurrency: (n: number) => string;\n  height?: number;\n  shape?: 'bars' | 'area';\n}) {\n  const isMobile = useIsMobile();\n  const chartHeight = isMobile ? 170 : height;\n\n  if (!current || current.length === 0) {\n    return (\n      <EmptyState\n        icon={ChartNoAxesCombined}\n        message=\"No revenue in this period\"\n      />\n    );\n  }\n\n  const ghostStroke = 'var(--text-muted)';\n  const brand = 'var(--color-brand-500)';\n\n  const rows: Row[] = current.map((pt, i) => ({\n    date: formatShortDate(pt.date),\n    value: pt.value,\n    prior: prior && prior[i] ? prior[i].value : null,\n  }));\n\n  const hasPrior = rows.some((r) => r.prior != null);\n  const lastIndex = rows.length - 1;\n\n  // The best day and the daily average were printed as two more numbers under\n  // the chart, which is where a merchant read \"₦219,445 best day, Sunday\" and\n  // then had to find Sunday on the line themselves. Both are features OF this\n  // series, so they are drawn on it: the average as the level the days are\n  // being judged against, the peak marked where it actually happened.\n  const peakIndex = current.reduce(\n    (best, pt, i) => (pt.value > current[best].value ? i : best),\n    0,\n  );\n  const peak = current[peakIndex];\n  const average =\n    current.reduce((sum, pt) => sum + pt.value, 0) / current.length;\n  // A flat series has no peak worth marking, and a single point has no average\n  // to compare against.\n  // Deliberately off. The reference draws ONE annotation — a dashed average —\n  // and a chart carrying both an average rule and a labelled peak is two\n  // claims competing on the same marks. The peak is still visible as the\n  // tallest bar, which is what a bar chart is for.\n  const worthMarking = false;\n  const peakLabel = new Date(peak.date).toLocaleDateString('en-US', {\n    weekday: 'short',\n  });\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={chartHeight}>\n      <ComposedChart\n        data={rows}\n        margin={{ top: 18, right: 6, bottom: 0, left: isMobile ? -18 : -6 }}\n      >\n        {/* Solid hairlines, horizontal only. A dashed rule is four marks per\n            inch of grid, so a chart with six gridlines carried a few hundred\n            dashes competing with the series for the reader's eye; at\n            --border-default the solid line is quiet enough not to need\n            breaking up. Vertical rules stay off — the x labels already say\n            where the columns are. */}\n        <CartesianGrid stroke={CHART_GRID} vertical={false} />\n        <XAxis\n          dataKey=\"date\"\n          tick={CHART_TICK_STYLE}\n          axisLine={false}\n          tickLine={false}\n          minTickGap={24}\n        />\n        <YAxis\n          tick={CHART_TICK_STYLE}\n          axisLine={false}\n          tickLine={false}\n          width={46}\n          tickFormatter={(v: number) => formatNumber(v)}\n        />\n        <Tooltip\n          cursor={{ stroke: ghostStroke, strokeWidth: 1 }}\n          contentStyle={CHART_TOOLTIP}\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          formatter={(v: any, name: any) => {\n            const num = typeof v === 'number' ? v : Number(v) || 0;\n            return [\n              formatCurrency(num),\n              name === 'prior' ? 'Prior' : 'Revenue',\n            ];\n          }}\n        />\n        {shape === 'bars' ? (\n          // No explicit barSize. Recharts divides the band, so the bars widen\n          // on a 7-day window and narrow on a year without the caller having to\n          // know which period is showing. maxBarSize stops a 3-point series\n          // rendering three columns the width of a card.\n          <Bar\n            dataKey=\"value\"\n            fill={brand}\n            name=\"value\"\n            maxBarSize={44}\n            radius={[2, 2, 0, 0]}\n            isAnimationActive={false}\n          />\n        ) : (\n          <Area\n            type=\"monotone\"\n            dataKey=\"value\"\n            stroke={brand}\n            strokeWidth={2.5}\n            fill={brand}\n            fillOpacity={0.1}\n            name=\"value\"\n            dot={false}\n            activeDot={{ r: 4, strokeWidth: 0 }}\n            isAnimationActive={false}\n          />\n        )}\n        {hasPrior && (\n          <Line\n            type=\"monotone\"\n            dataKey=\"prior\"\n            stroke={ghostStroke}\n            strokeWidth={2}\n            strokeDasharray=\"4 4\"\n            dot={false}\n            name=\"prior\"\n            connectNulls\n            isAnimationActive={false}\n          />\n        )}\n        {average > 0 && (\n          <ReferenceLine\n            y={average}\n            stroke={CHART_TICK}\n            strokeDasharray=\"2 4\"\n            ifOverflow=\"extendDomain\"\n            label={{\n              value: `${formatCurrency(average)} a day`,\n              position: 'insideTopLeft',\n              fill: CHART_TICK,\n              fontSize: 11,\n            }}\n          />\n        )}\n        {worthMarking && (\n          <ReferenceDot\n            x={formatShortDate(peak.date)}\n            y={peak.value}\n            r={4}\n            fill={brand}\n            stroke=\"var(--bg-base)\"\n            strokeWidth={2}\n            ifOverflow=\"extendDomain\"\n            label={{\n              value: `${peakLabel} ${formatCurrency(peak.value)}`,\n              position: 'top',\n              fill: 'var(--text-secondary)',\n              fontSize: 11,\n            }}\n          />\n        )}\n        {/* Emphasized endpoint on the current line */}\n        <Line\n          type=\"monotone\"\n          dataKey=\"value\"\n          stroke=\"transparent\"\n          dot={(props: { cx?: number; cy?: number; index?: number }) => {\n            const { cx, cy, index } = props;\n            if (index !== lastIndex || cx == null || cy == null) {\n              return <g key={`end-${index}`} />;\n            }\n            return (\n              <circle\n                key={`end-${index}`}\n                cx={cx}\n                cy={cy}\n                r={4}\n                fill={brand}\n                stroke=\"var(--bg-base)\"\n                strokeWidth={2}\n              />\n            );\n          }}\n          activeDot={false}\n          isAnimationActive={false}\n          legendType=\"none\"\n        />\n      </ComposedChart>\n    </ResponsiveContainer>\n  );\n}\n"],"mappings":";AAmEM,cA4CA,YA5CA;AAjEN,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB,oBAAoB;AAC9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAyBpB,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AACV,GAMG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,cAAc,WAAW,MAAM;AAErC,MAAI,CAAC,WAAW,QAAQ,WAAW,GAAG;AACpC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAQ;AAAA;AAAA,IACV;AAAA,EAEJ;AAEA,QAAM,cAAc;AACpB,QAAM,QAAQ;AAEd,QAAM,OAAc,QAAQ,IAAI,CAAC,IAAI,OAAO;AAAA,IAC1C,MAAM,gBAAgB,GAAG,IAAI;AAAA,IAC7B,OAAO,GAAG;AAAA,IACV,OAAO,SAAS,MAAM,CAAC,IAAI,MAAM,CAAC,EAAE,QAAQ;AAAA,EAC9C,EAAE;AAEF,QAAM,WAAW,KAAK,KAAK,CAAC,MAAM,EAAE,SAAS,IAAI;AACjD,QAAM,YAAY,KAAK,SAAS;AAOhC,QAAM,YAAY,QAAQ;AAAA,IACxB,CAAC,MAAM,IAAI,MAAO,GAAG,QAAQ,QAAQ,IAAI,EAAE,QAAQ,IAAI;AAAA,IACvD;AAAA,EACF;AACA,QAAM,OAAO,QAAQ,SAAS;AAC9B,QAAM,UACJ,QAAQ,OAAO,CAAC,KAAK,OAAO,MAAM,GAAG,OAAO,CAAC,IAAI,QAAQ;AAO3D,QAAM,eAAe;AACrB,QAAM,YAAY,IAAI,KAAK,KAAK,IAAI,EAAE,mBAAmB,SAAS;AAAA,IAChE,SAAS;AAAA,EACX,CAAC;AAED,SACE,oBAAC,uBAAoB,OAAM,QAAO,QAAQ,aACxC;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,QAAQ,EAAE,KAAK,IAAI,OAAO,GAAG,QAAQ,GAAG,MAAM,WAAW,MAAM,GAAG;AAAA,MAQlE;AAAA,4BAAC,iBAAc,QAAQ,YAAY,UAAU,OAAO;AAAA,QACpD;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAM;AAAA,YACN,UAAU;AAAA,YACV,UAAU;AAAA,YACV,YAAY;AAAA;AAAA,QACd;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,UAAU;AAAA,YACV,UAAU;AAAA,YACV,OAAO;AAAA,YACP,eAAe,CAAC,MAAc,aAAa,CAAC;AAAA;AAAA,QAC9C;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,EAAE,QAAQ,aAAa,aAAa,EAAE;AAAA,YAC9C,cAAc;AAAA,YAEd,WAAW,CAAC,GAAQ,SAAc;AAChC,oBAAM,MAAM,OAAO,MAAM,WAAW,IAAI,OAAO,CAAC,KAAK;AACrD,qBAAO;AAAA,gBACL,eAAe,GAAG;AAAA,gBAClB,SAAS,UAAU,UAAU;AAAA,cAC/B;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,UAKT;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAM;AAAA,cACN,MAAK;AAAA,cACL,YAAY;AAAA,cACZ,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,cACnB,mBAAmB;AAAA;AAAA,UACrB;AAAA,YAEA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,QAAQ;AAAA,YACR,aAAa;AAAA,YACb,MAAM;AAAA,YACN,aAAa;AAAA,YACb,MAAK;AAAA,YACL,KAAK;AAAA,YACL,WAAW,EAAE,GAAG,GAAG,aAAa,EAAE;AAAA,YAClC,mBAAmB;AAAA;AAAA,QACrB;AAAA,QAED,YACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,QAAQ;AAAA,YACR,aAAa;AAAA,YACb,iBAAgB;AAAA,YAChB,KAAK;AAAA,YACL,MAAK;AAAA,YACL,cAAY;AAAA,YACZ,mBAAmB;AAAA;AAAA,QACrB;AAAA,QAED,UAAU,KACT;AAAA,UAAC;AAAA;AAAA,YACC,GAAG;AAAA,YACH,QAAQ;AAAA,YACR,iBAAgB;AAAA,YAChB,YAAW;AAAA,YACX,OAAO;AAAA,cACL,OAAO,GAAG,eAAe,OAAO,CAAC;AAAA,cACjC,UAAU;AAAA,cACV,MAAM;AAAA,cACN,UAAU;AAAA,YACZ;AAAA;AAAA,QACF;AAAA,QAED,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,GAAG,gBAAgB,KAAK,IAAI;AAAA,YAC5B,GAAG,KAAK;AAAA,YACR,GAAG;AAAA,YACH,MAAM;AAAA,YACN,QAAO;AAAA,YACP,aAAa;AAAA,YACb,YAAW;AAAA,YACX,OAAO;AAAA,cACL,OAAO,GAAG,SAAS,IAAI,eAAe,KAAK,KAAK,CAAC;AAAA,cACjD,UAAU;AAAA,cACV,MAAM;AAAA,cACN,UAAU;AAAA,YACZ;AAAA;AAAA,QACF;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,QAAO;AAAA,YACP,KAAK,CAAC,UAAwD;AAC5D,oBAAM,EAAE,IAAI,IAAI,MAAM,IAAI;AAC1B,kBAAI,UAAU,aAAa,MAAM,QAAQ,MAAM,MAAM;AACnD,uBAAO,oBAAC,SAAO,OAAO,KAAK,EAAI;AAAA,cACjC;AACA,qBACE;AAAA,gBAAC;AAAA;AAAA,kBAEC;AAAA,kBACA;AAAA,kBACA,GAAG;AAAA,kBACH,MAAM;AAAA,kBACN,QAAO;AAAA,kBACP,aAAa;AAAA;AAAA,gBANR,OAAO,KAAK;AAAA,cAOnB;AAAA,YAEJ;AAAA,YACA,WAAW;AAAA,YACX,mBAAmB;AAAA,YACnB,YAAW;AAAA;AAAA,QACb;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}