@withpotter/components 0.13.0-next.101

package/dist/business-setup/use-business-setup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/business-setup/use-business-setup.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useState } from 'react';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { currencyForCountry } from '@withpotter/lib/countries';\nimport {\n  ONBOARDING_DRAFT_KEY,\n  clearOnboardingDraft,\n  markBusinessJustCreated,\n} from '@withpotter/lib/onboarding-draft';\nimport { EMPTY_DRAFT, type BusinessDraft } from './types';\nimport { resolveProvisionableTemplate } from './provisionable-template';\nimport { suggestBusinessCategory } from '@withpotter/lib/business-categories';\nimport type { StepDirection } from '@withpotter/lib/motion';\n\n/**\n * `brief` is the new first step and the only open question in the flow: one\n * sentence, from which the archetype, template and category are read. `shape`\n * survives as a correction surface rather than an interrogation — it is reached\n * by tapping the chip on the name screen, not by walking through it.\n */\n/** Identity, what the business does, where it sells, and what it looks like.\n *  Template is last because the shelf can only be ordered sensibly once the\n *  archetype is known. */\nimport { blockReasonAt, canContinueAt, type SetupStep } from './step-gate';\n// The step union and the gate that reads it live in `step-gate`, which the\n// footer button needs and the draft does not. Re-exported so nothing that\n// already imports `SetupStep` from here has to move.\nexport type { SetupStep };\n\ninterface Options {\n  /**\n   * Keep an in-progress draft across a reload. First-run onboarding wants this\n   * (losing a half-filled form after a refresh is the whole reason it exists);\n   * the in-app modal does not, because closing it is a deliberate cancel and a\n   * restored draft would reappear the next time it opened.\n   */\n  persist?: boolean;\n  /** Handed the created business, so the caller can take the merchant to it\n   *  rather than guessing the slug from the draft (provisioning may adjust it\n   *  to keep addresses unique).\n   *\n   *  The draft comes with it because the answers decide where the merchant\n   *  goes next, and the caller cannot read them any other way: this fires from\n   *  inside `provision`, so a caller reaching for its own `setup.draft` would\n   *  be reading the value captured when the callback was constructed. */\n  onCreated: (slug: string, draft: BusinessDraft) => void;\n  /**\n   * Ask how they want to start paying, as the last screen before the business\n   * is created.\n   *\n   * Off by default, and deliberately its own flag rather than a read of\n   * `persist`. The two callers differ in more than one way, and an owner\n   * adding their SECOND workspace already has a plan — asking them to choose\n   * one again would be asking a question whose answer is already on file.\n   */\n  askPlan?: boolean;\n  /** Ask new-business onboarding for an explicit category. */\n  askCategory?: boolean;\n}\n\n/**\n * Establishing a business: the state, the questions and the provision call.\n *\n * There is one flow and two shells. Full-screen `/onboarding` is first-run,\n * where there is no app to stay inside; the modal is every other time, because\n * a merchant who is already in the dashboard should not be thrown out of it to\n * add a second business.\n *\n * They used to be two implementations. The modal asked a thinner set of\n * questions, skipped the slug check and the country, and carried its own\n * intent→template map that had drifted onto five template ids which no longer\n * existed — so every business created from the switcher failed provisioning\n * with `Unknown template`, exactly the way onboarding did. Two forms for one\n * job is how that happens twice.\n */\n\nexport function useBusinessSetup({\n  persist = false,\n  onCreated,\n  askPlan = false,\n  askCategory = false,\n}: Options) {\n  const { createWorkspace } = useAuth();\n  const { toast } = useToast();\n\n  const [draft, setDraft] = useState<BusinessDraft>(EMPTY_DRAFT);\n  const [step, setStep] = useState<SetupStep>('identity');\n  /**\n   * Which way the merchant is travelling, owned here because this is what owns\n   * the step. Forward and back must not look the same: without it, pressing\n   * Back played the identical arrival animation as Continue, so the one control\n   * whose whole job is \"undo that\" gave the feedback of \"done, next\".\n   */\n  const [direction, setDirection] = useState<StepDirection>('forward');\n  const [identityValid, setIdentityValid] = useState(false);\n  const [categoryValid, setCategoryValid] = useState(false);\n  const [intentsValid, setIntentsValid] = useState(false);\n\n  /** What the footer button reads to decide whether it may move on. */\n  const validity = {\n    identity: identityValid,\n    category: categoryValid,\n    intents: intentsValid,\n  };\n  /**\n   * The logo, held OUTSIDE the draft.\n   *\n   * The draft is persisted to localStorage so a merchant can close the tab and\n   * come back; a `File` does not survive JSON. Keeping it here means a reload\n   * loses the pick and nothing else, which is the right trade — re-choosing a\n   * file is one tap, and a draft that throws on parse would lose the business.\n   */\n  const [logoFile, setLogoFile] = useState<File | null>(null);\n  const [provisioning, setProvisioning] = useState(false);\n  const [created, setCreated] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  // Nothing renders until this has run: the steps seed their own local state\n  // from the draft on first render, so restoring a beat later would leave a\n  // recovered name in the draft and an empty field on screen.\n  const [hydrated, setHydrated] = useState(!persist);\n  useEffect(() => {\n    if (!persist) return;\n    try {\n      const raw = sessionStorage.getItem(ONBOARDING_DRAFT_KEY);\n      if (raw)\n        setDraft((d) => ({\n          ...d,\n          ...(JSON.parse(raw) as Partial<BusinessDraft>),\n        }));\n    } catch {\n      // A corrupt draft is not worth failing setup over.\n    }\n    setHydrated(true);\n  }, [persist]);\n\n  useEffect(() => {\n    if (!persist || !hydrated) return;\n    if (created) return clearOnboardingDraft();\n    try {\n      sessionStorage.setItem(ONBOARDING_DRAFT_KEY, JSON.stringify(draft));\n    } catch {\n      // Storage can be full or blocked; losing the draft is the old behaviour.\n    }\n  }, [draft, created, hydrated, persist]);\n\n  // Every reporter is identity-stable and bails when nothing changed: an\n  // unconditional setDraft would spin, since a new object triggers a render\n  // which triggers a fresh report.\n  const onIdentityChange = useCallback(\n    (p: {\n      businessName: string;\n      slug: string;\n      country: string;\n      phone: string;\n      category: string;\n      valid: boolean;\n    }) => {\n      const { valid, category, ...fields } = p;\n      setIdentityValid(valid);\n      setDraft((d) => {\n        const same =\n          d.businessName === fields.businessName &&\n          d.slug === fields.slug &&\n          d.country === fields.country &&\n          d.phone === fields.phone &&\n          d.category === (askCategory ? d.category : category);\n        if (same) return d;\n        const next = askCategory ? d.category : category;\n        // A new category means the picks on the next screen were made for a\n        // different business. They were carried over and beat the category's\n        // own default, so \"Take food orders\" stayed ticked after switching to\n        // something that sells no food. Cleared, the shape step derives the\n        // default for the category now chosen. Not cleared on first report\n        // (draft category is '' and the picks are too) or on name edits.\n        const categoryChanged = d.category !== '' && d.category !== next;\n        return {\n          ...d,\n          ...fields,\n          category: next,\n          ...(categoryChanged ? { intents: [], offerIds: [] } : {}),\n        };\n      });\n    },\n    [askCategory],\n  );\n\n  const onIntentsChange = useCallback(\n    (p: {\n      intents: string[];\n      offerIds?: string[];\n      offerNote?: string;\n      valid: boolean;\n    }) => {\n      const offerIds = p.offerIds ?? [];\n      const offerNote = p.offerNote ?? '';\n      setIntentsValid(p.valid);\n      setDraft((d) => {\n        if (\n          d.intents.length === p.intents.length &&\n          d.intents.every((v, i) => v === p.intents[i]) &&\n          d.offerIds.length === offerIds.length &&\n          d.offerIds.every((v, i) => v === offerIds[i]) &&\n          d.offerNote === offerNote\n        ) {\n          return d;\n        }\n        /**\n         * THE CATEGORY FOLLOWS THE INTENTS, which is why the screen before this\n         * stopped asking for it.\n         *\n         * `INTENT_CATEGORY` in `business-categories` already maps every intent\n         * to a trade — sell-products is retail, food-orders is food,\n         * rent-property is realestate — so the answer given here produces the\n         * `industryKey` that names things across the whole dashboard. A second\n         * question for it one screen earlier was asking for something the\n         * merchant was about to tell us anyway.\n         *\n         * Only when they have not set one themselves. A category chosen by hand\n         * in Settings, or carried in on an existing draft, is an answer and this\n         * must not overwrite it.\n         */\n        const category =\n          d.category ||\n          (askCategory\n            ? ''\n            : suggestBusinessCategory({\n                businessName: d.businessName,\n                intents: p.intents,\n              }));\n        return { ...d, intents: p.intents, offerIds, offerNote, category };\n      });\n    },\n    [askCategory],\n  );\n\n  const onCategoryChange = useCallback(\n    (p: { category: string; valid: boolean }) => {\n      setCategoryValid(p.valid);\n      setDraft((d) =>\n        d.category === p.category ? d : { ...d, category: p.category },\n      );\n    },\n    [],\n  );\n\n  /**\n   * Create the business. This is the last screen's Continue, so the merchant\n   * waits on the button they pressed. There is no screen in between to report\n   * on it.\n   */\n  const provision = useCallback(\n    async (d: BusinessDraft) => {\n      setProvisioning(true);\n      setError(null);\n      try {\n        const tenant = await createWorkspace({\n          businessName: d.businessName.trim(),\n          slug: d.slug || undefined,\n          // 'default' is not a template. Provisioning validates against the\n          // API's templates table, so an id nobody knows blocks creation\n          // outright — which is what shipped when the template step was cut.\n          templateId: await resolveProvisionableTemplate(d),\n          // Omitted when the country is unknown, rather than guessed. The API\n          // answers a missing currency with NGN in one place; sending a\n          // fabricated USD was the dashboard overriding that with something\n          // worse for every merchant who had not reached the country step.\n          ...(currencyForCountry(d.country)\n            ? { currency: currencyForCountry(d.country)! }\n            : {}),\n          country: d.country || undefined,\n          phone: d.phone.trim() || undefined,\n          intents: d.intents.length ? d.intents : undefined,\n          category: d.category || undefined,\n          // Uploaded post-provision by `createWorkspace`, which has done this\n          // since it was written — nothing had ever passed it a file.\n          logoFile,\n        });\n        // The dashboard reads this once on arrival and clears it.\n        markBusinessJustCreated(tenant.slug);\n        setCreated(true);\n        onCreated(tenant.slug, d);\n      } catch (err) {\n        const message =\n          err instanceof Error\n            ? err.message\n            : \"We couldn't finish setting up your business. Try again in a moment.\";\n        setError(message);\n\n        /**\n         * A FAILURE THAT REPEATS NEEDS A DIFFERENT DOOR, not a louder button.\n         *\n         * \"Try again\" is the right offer for a dropped connection and the wrong\n         * one for the two failures that actually happen here, because pressing\n         * it again produces the same refusal forever:\n         *\n         *   the address was taken between choosing it and creating — somebody\n         *   else took `ada-hair` in the minutes since the check said it was\n         *   free, and no amount of retrying frees it\n         *\n         *   the template cannot be provisioned on this server — a registry id\n         *   the API's templates table does not carry, which is a deploy skew\n         *   and not something the merchant can wait out\n         *\n         * Both are recoverable and neither is by the same button. So the flow\n         * is sent back to the screen that owns the answer, with the reason:\n         * a taken address returns to the name step, an impossible template to\n         * the shelf. The merchant lands on a field they can change rather than\n         * a button that cannot work.\n         */\n        const text = message.toLowerCase();\n        if (text.includes('slug') || text.includes('unavailable')) {\n          setStep('identity');\n          setDirection('back');\n        }\n        // The failure announces itself in the bottom-right, where every other\n        // error in the product lands, and not as a block between the form and\n        // the button that caused it. Inline, it appeared at the instant of the\n        // click and pushed Continue down and out from under the cursor — the\n        // one moment a primary action must not move. The button still says\n        // \"Try again\", so the state is legible after the toast has gone.\n        //\n        // 10s rather than the 5s default: \"contact support to increase your\n        // limit\" is an instruction to act on, not a receipt to glance at.\n        toast({\n          variant: 'destructive',\n          title: message,\n          description: 'Nothing you entered is lost.',\n          duration: 10000,\n        });\n      } finally {\n        setProvisioning(false);\n      }\n    },\n    [createWorkspace, onCreated, toast, logoFile],\n  );\n\n  /**\n   * The shell's one forward action: advance, or create.\n   *\n   * Sales channel is its own step rather than a block stacked under the picks.\n   * Stacked, the second screen ran past the fold the moment anyone chose two\n   * archetypes — four families, a bio option, three channel buttons and the\n   * tools list all at once. Asked in turn, each screen holds one question.\n   */\n\n  const onBillingIntentChange = useCallback(\n    (billingIntent: 'free' | 'paid') =>\n      setDraft((d) =>\n        d.billingIntent === billingIntent ? d : { ...d, billingIntent },\n      ),\n    [],\n  );\n\n  const next = useCallback(() => {\n    setDirection('forward');\n    if (step === 'identity') return setStep(askCategory ? 'category' : 'shape');\n    if (step === 'category') return setStep('shape');\n    if (step === 'shape')\n      return askPlan ? setStep('plan') : void provision(draft);\n    void provision(draft);\n  }, [step, draft, provision, askPlan, askCategory]);\n\n  /**\n   * The exact inverse of `next`, which is the only way it stays correct.\n   *\n   * Back used to be spelled out at the call site as \"channel goes to shape,\n   * everything else goes to identity\". That was already wrong the moment the\n   * template step existed — pressing Back from the last screen threw the\n   * merchant to the first, past two answers they had given. And it could not be\n   * right in principle: `next` skips the channel question for archetypes it does\n   * not apply to, so only something that reads the same `channelApplies` can\n   * know which screen was actually behind you.\n   */\n  const back = useCallback(() => {\n    setDirection('back');\n    if (step === 'plan') return setStep('shape');\n    if (step === 'category') return setStep('identity');\n    if (step === 'shape') return setStep('identity');\n  }, [step]);\n\n  /**\n   * Only the final visible question creates the business. Category and offer\n   * selection must remain labelled \"Continue\", even when the flow skips the\n   * channel question for a digital-only business.\n   */\n  const isLastStep = askPlan ? step === 'plan' : step === 'shape';\n\n  const reset = useCallback(() => {\n    setDraft(EMPTY_DRAFT);\n    setStep('identity');\n    setDirection('forward');\n    setIdentityValid(false);\n    setCategoryValid(false);\n    setIntentsValid(false);\n    setProvisioning(false);\n    setCreated(false);\n    setError(null);\n  }, []);\n\n  return {\n    draft,\n    step,\n    direction,\n    hydrated,\n    provisioning,\n    created,\n    error,\n    // Busy covers `created` because the caller's navigation is still in flight\n    // when provisioning clears; without it a second click makes a second\n    // business.\n    busy: provisioning || created,\n    logoFile,\n    onLogoChange: setLogoFile,\n    onIdentityChange,\n    onCategoryChange,\n    onIntentsChange,\n    onBillingIntentChange,\n    canContinue: canContinueAt(step, validity),\n    blockReason: blockReasonAt(step, validity),\n    isLastStep,\n    next,\n    back,\n    canGoBack: step !== 'identity',\n    /** Any step by name, for the progress rail. The four helpers below predate\n     *  it and stay because their call sites read better. */\n    goTo: useCallback((s: SetupStep) => setStep(s), []),\n    goToIdentity: useCallback(() => setStep('identity'), []),\n    goToCategory: useCallback(() => setStep('category'), []),\n    goToShape: useCallback(() => setStep('shape'), []),\n    reset,\n  };\n}\n"],"mappings":"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","names":["next"]}

package/dist/business-setup.d.ts

@@ -0,0 +1 @@
+export * from './business-setup/index';

package/dist/business-setup.js

@@ -0,0 +1 @@
+export * from './business-setup/index.js';

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

@@ -0,0 +1,33 @@
+import './charts.css';
+export type ChartPoint = {
+    label: string;
+    value: number;
+};
+/**
+ * Interactive area chart — bespoke SVG on d3 scales + d3 smooth curves
+ * (curveCatmullRom), animated with motion.dev. Left-to-right spring reveal on
+ * mount; hover shows a crosshair, a spring dot on the nearest point, and a
+ * tooltip. Themed from the shell tokens (light/dark) — no charting library.
+ */
+/**
+ * NO `gradient` MEMBER, and that is the point of writing the type out.
+ *
+ * It had one, plus the `<linearGradient>` under it, and nothing in the app ever
+ * asked for it — `fill` defaults to `solid` and no call site overrides it. So
+ * it shipped nothing and sat here as an affordance for the next person to
+ * reach for, which is precisely how a banned thing gets into a build: gradients
+ * are out by house rule, and the last time one appeared it was because a
+ * primitive made it available rather than because anybody argued for it.
+ *
+ * A dead option is not harmless. `fill="gradient"` would have passed review as
+ * "using the primitive as intended".
+ */
+export type AreaFill = 'solid' | 'none';
+export declare function AreaChart({ data, height, format, accent, label, fill, }: {
+    data: ChartPoint[];
+    height?: number;
+    format?: (n: number) => string;
+    accent?: string;
+    label?: string;
+    fill?: AreaFill;
+}): import("react").JSX.Element;

package/dist/charts/area-chart.js

@@ -0,0 +1,180 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { motion } from "motion/react";
+import { scaleLinear } from "d3-scale";
+import { area as d3area, line as d3line, curveCatmullRom } from "d3-shape";
+import { springs } from "@withpotter/lib/motion";
+import "./charts.css";
+function AreaChart({
+  data,
+  height = 240,
+  format = (n) => n.toLocaleString(),
+  accent = "var(--brand-500)",
+  label = "Value",
+  fill = "solid"
+}) {
+  const wrapRef = useRef(null);
+  const [w, setW] = useState(0);
+  const [hover, setHover] = useState(null);
+  useEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(
+      (entries) => setW(entries[0].contentRect.width)
+    );
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const pad = { top: 16, right: 14, bottom: 26, left: 40 };
+  const innerW = Math.max(0, w - pad.left - pad.right);
+  const innerH = height - pad.top - pad.bottom;
+  const g = useMemo(() => {
+    const n = data.length;
+    const max = Math.max(1, ...data.map((d) => d.value));
+    const x = scaleLinear().domain([0, Math.max(1, n - 1)]).range([pad.left, pad.left + innerW]);
+    const y = scaleLinear().domain([0, max]).nice().range([pad.top + innerH, pad.top]);
+    const curve = curveCatmullRom.alpha(0.5);
+    const linePath = d3line().x((_, i) => x(i)).y((d) => y(d.value)).curve(curve)(data) ?? "";
+    const areaPath = d3area().x((_, i) => x(i)).y0(y(0)).y1((d) => y(d.value)).curve(curve)(data) ?? "";
+    const pts = data.map((d, i) => ({ x: x(i), y: y(d.value), d }));
+    const ticks = y.ticks(3).map((t) => ({ y: y(t), v: t }));
+    return { linePath, areaPath, pts, ticks };
+  }, [data, innerW, innerH, pad.left, pad.top]);
+  const onMove = (e) => {
+    if (!wrapRef.current || data.length === 0) return;
+    const rect = wrapRef.current.getBoundingClientRect();
+    const ratio = (e.clientX - rect.left - pad.left) / (innerW || 1);
+    const idx = Math.max(
+      0,
+      Math.min(data.length - 1, Math.round(ratio * (data.length - 1)))
+    );
+    setHover(idx);
+  };
+  const active = hover != null ? g.pts[hover] : null;
+  const uid = useId().replace(/:/g, "");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapRef,
+      className: "pv-chart",
+      style: { position: "relative", width: "100%", height },
+      onMouseMove: onMove,
+      onMouseLeave: () => setHover(null),
+      children: [
+        w > 0 && /* @__PURE__ */ jsxs("svg", { width: w, height, role: "img", "aria-label": label, children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: `${uid}-clip`, children: /* @__PURE__ */ jsx(
+            motion.rect,
+            {
+              x: pad.left,
+              y: 0,
+              height,
+              initial: { width: 0 },
+              animate: { width: innerW },
+              transition: springs.soft
+            }
+          ) }) }),
+          g.ticks.map((t, i) => /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: pad.left,
+                x2: pad.left + innerW,
+                y1: t.y,
+                y2: t.y,
+                stroke: "var(--border-subtle)",
+                strokeWidth: 1,
+                strokeDasharray: t.v === 0 ? "0" : "3 4"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: pad.left - 8,
+                y: t.y + 3,
+                textAnchor: "end",
+                fontSize: 10.5,
+                fill: "var(--text-muted)",
+                children: format(t.v)
+              }
+            )
+          ] }, i)),
+          /* @__PURE__ */ jsxs("g", { clipPath: `url(#${uid}-clip)`, children: [
+            fill !== "none" && /* @__PURE__ */ jsx("path", { d: g.areaPath, fill: accent, fillOpacity: 0.08 }),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: g.linePath,
+                fill: "none",
+                stroke: accent,
+                strokeWidth: 2,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ] }),
+          [0, Math.floor((data.length - 1) / 2), data.length - 1].filter((v, i, a) => a.indexOf(v) === i && v >= 0).map((i) => /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: g.pts[i]?.x,
+              y: height - 8,
+              textAnchor: i === 0 ? "start" : i === data.length - 1 ? "end" : "middle",
+              fontSize: 11,
+              fill: "var(--text-muted)",
+              children: data[i]?.label
+            },
+            i
+          )),
+          active && /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: active.x,
+                x2: active.x,
+                y1: pad.top,
+                y2: pad.top + innerH,
+                stroke: "var(--border-strong)",
+                strokeWidth: 1
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.circle,
+              {
+                r: 5,
+                fill: "var(--bg-base)",
+                stroke: accent,
+                strokeWidth: 2.5,
+                initial: false,
+                animate: { cx: active.x, cy: active.y },
+                transition: springs.snappy
+              }
+            )
+          ] })
+        ] }),
+        active && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: "pv-chart-tip",
+            initial: false,
+            animate: { left: active.x },
+            transition: springs.snappy,
+            style: {
+              position: "absolute",
+              top: Math.max(0, active.y - 52),
+              transform: "translateX(-50%)",
+              pointerEvents: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "pv-chart-tip-v", children: format(active.d.value) }),
+              /* @__PURE__ */ jsx("div", { className: "pv-chart-tip-l", children: active.d.label })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AreaChart
+};
+//# sourceMappingURL=area-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/area-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useId, useMemo, useRef, useState } from 'react';\nimport { motion } from 'motion/react';\nimport { scaleLinear } from 'd3-scale';\nimport { area as d3area, line as d3line, curveCatmullRom } from 'd3-shape';\nimport { springs } from '@withpotter/lib/motion';\nimport './charts.css';\n\nexport type ChartPoint = { label: string; value: number };\n\n/**\n * Interactive area chart — bespoke SVG on d3 scales + d3 smooth curves\n * (curveCatmullRom), animated with motion.dev. Left-to-right spring reveal on\n * mount; hover shows a crosshair, a spring dot on the nearest point, and a\n * tooltip. Themed from the shell tokens (light/dark) — no charting library.\n */\n/**\n * NO `gradient` MEMBER, and that is the point of writing the type out.\n *\n * It had one, plus the `<linearGradient>` under it, and nothing in the app ever\n * asked for it — `fill` defaults to `solid` and no call site overrides it. So\n * it shipped nothing and sat here as an affordance for the next person to\n * reach for, which is precisely how a banned thing gets into a build: gradients\n * are out by house rule, and the last time one appeared it was because a\n * primitive made it available rather than because anybody argued for it.\n *\n * A dead option is not harmless. `fill=\"gradient\"` would have passed review as\n * \"using the primitive as intended\".\n */\nexport type AreaFill = 'solid' | 'none';\n\nexport function AreaChart({\n  data,\n  height = 240,\n  format = (n) => n.toLocaleString(),\n  accent = 'var(--brand-500)',\n  label = 'Value',\n  fill = 'solid',\n}: {\n  data: ChartPoint[];\n  height?: number;\n  format?: (n: number) => string;\n  accent?: string;\n  label?: string;\n  fill?: AreaFill;\n}) {\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const [w, setW] = useState(0);\n  const [hover, setHover] = useState<number | null>(null);\n\n  useEffect(() => {\n    const el = wrapRef.current;\n    if (!el) return;\n    const ro = new ResizeObserver((entries) =>\n      setW(entries[0].contentRect.width),\n    );\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const pad = { top: 16, right: 14, bottom: 26, left: 40 };\n  const innerW = Math.max(0, w - pad.left - pad.right);\n  const innerH = height - pad.top - pad.bottom;\n\n  const g = useMemo(() => {\n    const n = data.length;\n    const max = Math.max(1, ...data.map((d) => d.value));\n    const x = scaleLinear()\n      .domain([0, Math.max(1, n - 1)])\n      .range([pad.left, pad.left + innerW]);\n    const y = scaleLinear()\n      .domain([0, max])\n      .nice()\n      .range([pad.top + innerH, pad.top]);\n\n    const curve = curveCatmullRom.alpha(0.5);\n    const linePath =\n      d3line<ChartPoint>()\n        .x((_, i) => x(i))\n        .y((d) => y(d.value))\n        .curve(curve)(data) ?? '';\n    const areaPath =\n      d3area<ChartPoint>()\n        .x((_, i) => x(i))\n        .y0(y(0))\n        .y1((d) => y(d.value))\n        .curve(curve)(data) ?? '';\n\n    const pts = data.map((d, i) => ({ x: x(i), y: y(d.value), d }));\n    const ticks = y.ticks(3).map((t) => ({ y: y(t), v: t }));\n    return { linePath, areaPath, pts, ticks };\n  }, [data, innerW, innerH, pad.left, pad.top]);\n\n  const onMove = (e: React.MouseEvent) => {\n    if (!wrapRef.current || data.length === 0) return;\n    const rect = wrapRef.current.getBoundingClientRect();\n    const ratio = (e.clientX - rect.left - pad.left) / (innerW || 1);\n    const idx = Math.max(\n      0,\n      Math.min(data.length - 1, Math.round(ratio * (data.length - 1))),\n    );\n    setHover(idx);\n  };\n\n  const active = hover != null ? g.pts[hover] : null;\n  const uid = useId().replace(/:/g, '');\n\n  return (\n    <div\n      ref={wrapRef}\n      className=\"pv-chart\"\n      style={{ position: 'relative', width: '100%', height }}\n      onMouseMove={onMove}\n      onMouseLeave={() => setHover(null)}\n    >\n      {w > 0 && (\n        <svg width={w} height={height} role=\"img\" aria-label={label}>\n          <defs>\n            <clipPath id={`${uid}-clip`}>\n              <motion.rect\n                x={pad.left}\n                y={0}\n                height={height}\n                initial={{ width: 0 }}\n                animate={{ width: innerW }}\n                transition={springs.soft}\n              />\n            </clipPath>\n          </defs>\n\n          {/* y gridlines + tick labels */}\n          {g.ticks.map((t, i) => (\n            <g key={i}>\n              <line\n                x1={pad.left}\n                x2={pad.left + innerW}\n                y1={t.y}\n                y2={t.y}\n                stroke=\"var(--border-subtle)\"\n                strokeWidth={1}\n                strokeDasharray={t.v === 0 ? '0' : '3 4'}\n              />\n              <text\n                x={pad.left - 8}\n                y={t.y + 3}\n                textAnchor=\"end\"\n                fontSize={10.5}\n                fill=\"var(--text-muted)\"\n              >\n                {format(t.v)}\n              </text>\n            </g>\n          ))}\n\n          <g clipPath={`url(#${uid}-clip)`}>\n            {fill !== 'none' && (\n              <path d={g.areaPath} fill={accent} fillOpacity={0.08} />\n            )}\n            <path\n              d={g.linePath}\n              fill=\"none\"\n              stroke={accent}\n              strokeWidth={2}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </g>\n\n          {/* x labels: first, middle, last */}\n          {[0, Math.floor((data.length - 1) / 2), data.length - 1]\n            .filter((v, i, a) => a.indexOf(v) === i && v >= 0)\n            .map((i) => (\n              <text\n                key={i}\n                x={g.pts[i]?.x}\n                y={height - 8}\n                textAnchor={\n                  i === 0 ? 'start' : i === data.length - 1 ? 'end' : 'middle'\n                }\n                fontSize={11}\n                fill=\"var(--text-muted)\"\n              >\n                {data[i]?.label}\n              </text>\n            ))}\n\n          {/* hover crosshair + dot */}\n          {active && (\n            <g>\n              <line\n                x1={active.x}\n                x2={active.x}\n                y1={pad.top}\n                y2={pad.top + innerH}\n                stroke=\"var(--border-strong)\"\n                strokeWidth={1}\n              />\n              <motion.circle\n                r={5}\n                fill=\"var(--bg-base)\"\n                stroke={accent}\n                strokeWidth={2.5}\n                initial={false}\n                animate={{ cx: active.x, cy: active.y }}\n                transition={springs.snappy}\n              />\n            </g>\n          )}\n        </svg>\n      )}\n\n      {/* tooltip */}\n      {active && (\n        <motion.div\n          className=\"pv-chart-tip\"\n          initial={false}\n          animate={{ left: active.x }}\n          transition={springs.snappy}\n          style={{\n            position: 'absolute',\n            top: Math.max(0, active.y - 52),\n            transform: 'translateX(-50%)',\n            pointerEvents: 'none',\n          }}\n        >\n          <div className=\"pv-chart-tip-v\">{format(active.d.value)}</div>\n          <div className=\"pv-chart-tip-l\">{active.d.label}</div>\n        </motion.div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/charts/area-metric-card.d.ts

@@ -0,0 +1,25 @@
+import { type ChartPoint } from './area-chart';
+export type MetricRange = {
+    id: string;
+    label: string;
+};
+/**
+ * The Origin-bar metric card: a big morphing number + period delta, a range
+ * toggle, and the area chart below. A reusable data-viz organism — drop it on
+ * the dashboard, analytics, or billing. Solid tint fill, app-brand accent; no
+ * gradient.
+ */
+export declare function AreaMetricCard({ label, value, delta, ranges, activeRange, onRangeChange, data, format, height, className, }: {
+    label: string;
+    /** Pre-formatted headline value (e.g. "₦1,240,500"). */
+    value: string;
+    /** Period-over-period change, %. */
+    delta?: number | null;
+    ranges?: MetricRange[];
+    activeRange?: string;
+    onRangeChange?: (id: string) => void;
+    data: ChartPoint[];
+    format?: (n: number) => string;
+    height?: number;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/charts/area-metric-card.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpRight, ArrowDownRight } from "lucide-react";
+import { TextMorph } from "@withpotter/ui-kit/text-morph";
+import { AreaChart } from "./area-chart";
+function AreaMetricCard({
+  label,
+  value,
+  delta,
+  ranges,
+  activeRange,
+  onRangeChange,
+  data,
+  format,
+  height = 200,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `surface p-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--text-tertiary)]", children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-baseline gap-2", children: [
+          /* @__PURE__ */ jsx(
+            TextMorph,
+            {
+              as: "p",
+              className: "text-4xl font-semibold tracking-[-0.02em] text-[var(--text-primary)]",
+              children: value
+            }
+          ),
+          delta != null && delta !== 0 && /* @__PURE__ */ jsx(DeltaPill, { delta })
+        ] })
+      ] }),
+      ranges && ranges.length > 0 && /* @__PURE__ */ jsx(
+        RangeToggle,
+        {
+          ranges,
+          active: activeRange,
+          onChange: onRangeChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(
+      AreaChart,
+      {
+        data,
+        height,
+        format,
+        label,
+        fill: "solid"
+      }
+    ) })
+  ] });
+}
+function DeltaPill({ delta }) {
+  const up = delta > 0;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `inline-flex items-center gap-0.5 text-sm font-medium ${up ? "text-[var(--success)]" : "text-[var(--error)]"}`,
+      children: [
+        up ? /* @__PURE__ */ jsx(ArrowUpRight, {}) : /* @__PURE__ */ jsx(ArrowDownRight, {}),
+        Math.abs(delta).toFixed(1),
+        "%"
+      ]
+    }
+  );
+}
+function RangeToggle({
+  ranges,
+  active,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "inline-flex shrink-0 gap-0.5 rounded-lg bg-[var(--bg-subtle)] p-0.5", children: ranges.map((r) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onChange?.(r.id),
+      className: `rounded-md px-3 py-1 text-xs font-medium transition-colors ${active === r.id ? "bg-[var(--bg-base)] text-[var(--text-primary)] shadow-sm" : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"}`,
+      children: r.label
+    },
+    r.id
+  )) });
+}
+export {
+  AreaMetricCard
+};
+//# sourceMappingURL=area-metric-card.js.map

package/dist/charts/area-metric-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/area-metric-card.tsx"],"sourcesContent":["'use client';\n\nimport { ArrowUpRight, ArrowDownRight } from 'lucide-react';\nimport { TextMorph } from '@withpotter/ui-kit/text-morph';\nimport { AreaChart, type ChartPoint } from './area-chart';\n\nexport type MetricRange = { id: string; label: string };\n\n/**\n * The Origin-bar metric card: a big morphing number + period delta, a range\n * toggle, and the area chart below. A reusable data-viz organism — drop it on\n * the dashboard, analytics, or billing. Solid tint fill, app-brand accent; no\n * gradient.\n */\nexport function AreaMetricCard({\n  label,\n  value,\n  delta,\n  ranges,\n  activeRange,\n  onRangeChange,\n  data,\n  format,\n  height = 200,\n  className = '',\n}: {\n  label: string;\n  /** Pre-formatted headline value (e.g. \"₦1,240,500\"). */\n  value: string;\n  /** Period-over-period change, %. */\n  delta?: number | null;\n  ranges?: MetricRange[];\n  activeRange?: string;\n  onRangeChange?: (id: string) => void;\n  data: ChartPoint[];\n  format?: (n: number) => string;\n  height?: number;\n  className?: string;\n}) {\n  return (\n    <div className={`surface p-4 ${className}`}>\n      <div className=\"flex items-start justify-between gap-4\">\n        <div className=\"min-w-0\">\n          <p className=\"text-xs font-medium text-[var(--text-tertiary)]\">\n            {label}\n          </p>\n          <div className=\"mt-1 flex items-baseline gap-2\">\n            <TextMorph\n              as=\"p\"\n              className=\"text-4xl font-semibold tracking-[-0.02em] text-[var(--text-primary)]\"\n            >\n              {value}\n            </TextMorph>\n            {delta != null && delta !== 0 && <DeltaPill delta={delta} />}\n          </div>\n        </div>\n        {ranges && ranges.length > 0 && (\n          <RangeToggle\n            ranges={ranges}\n            active={activeRange}\n            onChange={onRangeChange}\n          />\n        )}\n      </div>\n\n      <div className=\"mt-4\">\n        <AreaChart\n          data={data}\n          height={height}\n          format={format}\n          label={label}\n          fill=\"solid\"\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction DeltaPill({ delta }: { delta: number }) {\n  const up = delta > 0;\n  return (\n    <span\n      className={`inline-flex items-center gap-0.5 text-sm font-medium ${\n        up ? 'text-[var(--success)]' : 'text-[var(--error)]'\n      }`}\n    >\n      {up ? <ArrowUpRight /> : <ArrowDownRight />}\n      {Math.abs(delta).toFixed(1)}%\n    </span>\n  );\n}\n\nfunction RangeToggle({\n  ranges,\n  active,\n  onChange,\n}: {\n  ranges: MetricRange[];\n  active?: string;\n  onChange?: (id: string) => void;\n}) {\n  return (\n    <div className=\"inline-flex shrink-0 gap-0.5 rounded-lg bg-[var(--bg-subtle)] p-0.5\">\n      {ranges.map((r) => (\n        <button\n          key={r.id}\n          type=\"button\"\n          onClick={() => onChange?.(r.id)}\n          className={`rounded-md px-3 py-1 text-xs font-medium transition-colors ${\n            active === r.id\n              ? 'bg-[var(--bg-base)] text-[var(--text-primary)] shadow-sm'\n              : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'\n          }`}\n        >\n          {r.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AA2CU,cAGA,YAHA;AAzCV,SAAS,cAAc,sBAAsB;AAC7C,SAAS,iBAAiB;AAC1B,SAAS,iBAAkC;AAUpC,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AACd,GAaG;AACD,SACE,qBAAC,SAAI,WAAW,eAAe,SAAS,IACtC;AAAA,yBAAC,SAAI,WAAU,0CACb;AAAA,2BAAC,SAAI,WAAU,WACb;AAAA,4BAAC,OAAE,WAAU,mDACV,iBACH;AAAA,QACA,qBAAC,SAAI,WAAU,kCACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,UACC,SAAS,QAAQ,UAAU,KAAK,oBAAC,aAAU,OAAc;AAAA,WAC5D;AAAA,SACF;AAAA,MACC,UAAU,OAAO,SAAS,KACzB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,QAAQ;AAAA,UACR,UAAU;AAAA;AAAA,MACZ;AAAA,OAEJ;AAAA,IAEA,oBAAC,SAAI,WAAU,QACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAK;AAAA;AAAA,IACP,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU,EAAE,MAAM,GAAsB;AAC/C,QAAM,KAAK,QAAQ;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,wDACT,KAAK,0BAA0B,qBACjC;AAAA,MAEC;AAAA,aAAK,oBAAC,gBAAa,IAAK,oBAAC,kBAAe;AAAA,QACxC,KAAK,IAAI,KAAK,EAAE,QAAQ,CAAC;AAAA,QAAE;AAAA;AAAA;AAAA,EAC9B;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,oBAAC,SAAI,WAAU,uEACZ,iBAAO,IAAI,CAAC,MACX;AAAA,IAAC;AAAA;AAAA,MAEC,MAAK;AAAA,MACL,SAAS,MAAM,WAAW,EAAE,EAAE;AAAA,MAC9B,WAAW,8DACT,WAAW,EAAE,KACT,6DACA,+DACN;AAAA,MAEC,YAAE;AAAA;AAAA,IATE,EAAE;AAAA,EAUT,CACD,GACH;AAEJ;","names":[]}

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

@@ -0,0 +1,17 @@
+import './charts.css';
+export type BarSeries = {
+    name: string;
+    color?: string;
+    values: number[];
+};
+/**
+ * Bar chart (single or grouped) — d3 band/linear scales, motion.dev bars that
+ * grow from the baseline with a slight stagger. Hovering a group highlights it
+ * and shows a tooltip listing every series' value. Themed from shell tokens.
+ */
+export declare function BarChart({ labels, series, height, format, }: {
+    labels: string[];
+    series: BarSeries[];
+    height?: number;
+    format?: (n: number) => string;
+}): import("react").JSX.Element;

package/dist/charts/bar-chart.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { motion } from "motion/react";
+import { scaleBand, scaleLinear } from "d3-scale";
+import { springs } from "@withpotter/lib/motion";
+import { CHART_BRAND_QUIET } from "./chart-theme";
+import "./charts.css";
+function BarChart({
+  labels,
+  series,
+  height = 240,
+  format = (n) => n.toLocaleString()
+}) {
+  const wrapRef = useRef(null);
+  const [w, setW] = useState(0);
+  const [hover, setHover] = useState(null);
+  useEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    setW(el.getBoundingClientRect().width);
+    const ro = new ResizeObserver(
+      (entries) => setW(entries[0].contentRect.width)
+    );
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const compact = w > 0 && w < 420;
+  const pad = compact ? { top: 10, right: 8, bottom: 24, left: 30 } : { top: 14, right: 14, bottom: 26, left: 40 };
+  const innerW = Math.max(0, w - pad.left - pad.right);
+  const innerH = height - pad.top - pad.bottom;
+  const baseline = pad.top + innerH;
+  const palette = ["var(--brand-500)", CHART_BRAND_QUIET];
+  const max = Math.max(1, ...series.flatMap((s) => s.values));
+  const x0 = scaleBand().domain(labels.map((_, i) => i)).range([pad.left, pad.left + innerW]).padding(0.28);
+  const x1 = scaleBand().domain(series.map((_, i) => i)).range([0, x0.bandwidth()]).padding(0.15);
+  const y = scaleLinear().domain([0, max]).nice().range([baseline, pad.top]);
+  const ticks = y.ticks(3);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapRef,
+      className: "pv-chart",
+      style: { position: "relative", width: "100%", height, cursor: "default" },
+      onMouseLeave: () => setHover(null),
+      children: [
+        w > 0 && /* @__PURE__ */ jsxs("svg", { width: w, height, role: "img", "aria-label": "Bar chart", children: [
+          ticks.map((t, i) => /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: pad.left,
+                x2: pad.left + innerW,
+                y1: y(t),
+                y2: y(t),
+                stroke: "var(--border-subtle)",
+                strokeWidth: 1,
+                strokeDasharray: t === 0 ? "0" : "3 4"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: pad.left - 8,
+                y: y(t) + 3,
+                textAnchor: "end",
+                fontSize: 10.5,
+                fill: "var(--text-muted)",
+                children: format(t)
+              }
+            )
+          ] }, i)),
+          labels.map((lab, gi) => {
+            const gx = x0(gi) ?? 0;
+            const on = hover === gi;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: gx - x0.step() * x0.padding() * 0.5,
+                  y: pad.top,
+                  width: x0.step(),
+                  height: innerH,
+                  fill: on ? "var(--interactive-hover)" : "transparent",
+                  onMouseEnter: () => setHover(gi)
+                }
+              ),
+              series.map((s, si) => {
+                const v = s.values[gi] ?? 0;
+                const bx = gx + (x1(si) ?? 0);
+                const bw = x1.bandwidth();
+                return /* @__PURE__ */ jsx(
+                  motion.rect,
+                  {
+                    x: bx,
+                    width: bw,
+                    rx: Math.min(4, bw / 2),
+                    fill: s.color ?? palette[si % palette.length],
+                    initial: { y: baseline, height: 0 },
+                    animate: {
+                      y: y(v),
+                      height: Math.max(0, baseline - y(v))
+                    },
+                    transition: { ...springs.soft, delay: 0.02 * gi },
+                    style: { opacity: hover == null || on ? 1 : 0.5 }
+                  },
+                  si
+                );
+              }),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: gx + x0.bandwidth() / 2,
+                  y: height - 8,
+                  textAnchor: "middle",
+                  fontSize: 11,
+                  fill: "var(--text-muted)",
+                  children: lab
+                }
+              )
+            ] }, gi);
+          })
+        ] }),
+        hover != null && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: "pv-chart-tip",
+            initial: false,
+            animate: { left: (x0(hover) ?? 0) + x0.bandwidth() / 2 },
+            transition: springs.snappy,
+            style: {
+              position: "absolute",
+              top: 4,
+              transform: "translateX(-50%)",
+              pointerEvents: "none",
+              textAlign: "left"
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "pv-chart-tip-l", style: { marginBottom: 3 }, children: labels[hover] }),
+              series.map((s, si) => /* @__PURE__ */ jsxs("div", { className: "pv-chart-tip-row", children: [
+                /* @__PURE__ */ jsx(
+                  "i",
+                  {
+                    style: { background: s.color ?? palette[si % palette.length] }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: s.name }),
+                /* @__PURE__ */ jsx("b", { children: format(s.values[hover] ?? 0) })
+              ] }, si))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  BarChart
+};
+//# sourceMappingURL=bar-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { motion } from 'motion/react';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { springs } from '@withpotter/lib/motion';\nimport { CHART_BRAND_QUIET } from './chart-theme';\nimport './charts.css';\n\nexport type BarSeries = { name: string; color?: string; values: number[] };\n\n/**\n * Bar chart (single or grouped) — d3 band/linear scales, motion.dev bars that\n * grow from the baseline with a slight stagger. Hovering a group highlights it\n * and shows a tooltip listing every series' value. Themed from shell tokens.\n */\nexport function BarChart({\n  labels,\n  series,\n  height = 240,\n  format = (n) => n.toLocaleString(),\n}: {\n  labels: string[];\n  series: BarSeries[];\n  height?: number;\n  format?: (n: number) => string;\n}) {\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const [w, setW] = useState(0);\n  const [hover, setHover] = useState<number | null>(null);\n\n  useEffect(() => {\n    const el = wrapRef.current;\n    if (!el) return;\n    setW(el.getBoundingClientRect().width);\n    const ro = new ResizeObserver((entries) =>\n      setW(entries[0].contentRect.width),\n    );\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const compact = w > 0 && w < 420;\n  const pad = compact\n    ? { top: 10, right: 8, bottom: 24, left: 30 }\n    : { top: 14, right: 14, bottom: 26, left: 40 };\n  const innerW = Math.max(0, w - pad.left - pad.right);\n  const innerH = height - pad.top - pad.bottom;\n  const baseline = pad.top + innerH;\n\n  // A second series is a comparison, so it is the brand receded, not a second\n  // hue: green beside the brand read as \"good\" against nothing in particular.\n  const palette = ['var(--brand-500)', CHART_BRAND_QUIET];\n  const max = Math.max(1, ...series.flatMap((s) => s.values));\n\n  const x0 = scaleBand<number>()\n    .domain(labels.map((_, i) => i))\n    .range([pad.left, pad.left + innerW])\n    .padding(0.28);\n  const x1 = scaleBand<number>()\n    .domain(series.map((_, i) => i))\n    .range([0, x0.bandwidth()])\n    .padding(0.15);\n  const y = scaleLinear().domain([0, max]).nice().range([baseline, pad.top]);\n  const ticks = y.ticks(3);\n\n  return (\n    <div\n      ref={wrapRef}\n      className=\"pv-chart\"\n      style={{ position: 'relative', width: '100%', height, cursor: 'default' }}\n      onMouseLeave={() => setHover(null)}\n    >\n      {w > 0 && (\n        <svg width={w} height={height} role=\"img\" aria-label=\"Bar chart\">\n          {/* gridlines + y ticks */}\n          {ticks.map((t, i) => (\n            <g key={i}>\n              <line\n                x1={pad.left}\n                x2={pad.left + innerW}\n                y1={y(t)}\n                y2={y(t)}\n                stroke=\"var(--border-subtle)\"\n                strokeWidth={1}\n                strokeDasharray={t === 0 ? '0' : '3 4'}\n              />\n              <text\n                x={pad.left - 8}\n                y={y(t) + 3}\n                textAnchor=\"end\"\n                fontSize={10.5}\n                fill=\"var(--text-muted)\"\n              >\n                {format(t)}\n              </text>\n            </g>\n          ))}\n\n          {labels.map((lab, gi) => {\n            const gx = x0(gi) ?? 0;\n            const on = hover === gi;\n            return (\n              <g key={gi}>\n                {/* hover hit-area + highlight */}\n                <rect\n                  x={gx - x0.step() * x0.padding() * 0.5}\n                  y={pad.top}\n                  width={x0.step()}\n                  height={innerH}\n                  fill={on ? 'var(--interactive-hover)' : 'transparent'}\n                  onMouseEnter={() => setHover(gi)}\n                />\n                {series.map((s, si) => {\n                  const v = s.values[gi] ?? 0;\n                  const bx = gx + (x1(si) ?? 0);\n                  const bw = x1.bandwidth();\n                  return (\n                    <motion.rect\n                      key={si}\n                      x={bx}\n                      width={bw}\n                      rx={Math.min(4, bw / 2)}\n                      fill={s.color ?? palette[si % palette.length]}\n                      initial={{ y: baseline, height: 0 }}\n                      animate={{\n                        y: y(v),\n                        height: Math.max(0, baseline - y(v)),\n                      }}\n                      transition={{ ...springs.soft, delay: 0.02 * gi }}\n                      style={{ opacity: hover == null || on ? 1 : 0.5 }}\n                    />\n                  );\n                })}\n                <text\n                  x={gx + x0.bandwidth() / 2}\n                  y={height - 8}\n                  textAnchor=\"middle\"\n                  fontSize={11}\n                  fill=\"var(--text-muted)\"\n                >\n                  {lab}\n                </text>\n              </g>\n            );\n          })}\n        </svg>\n      )}\n\n      {/* tooltip */}\n      {hover != null && (\n        <motion.div\n          className=\"pv-chart-tip\"\n          initial={false}\n          animate={{ left: (x0(hover) ?? 0) + x0.bandwidth() / 2 }}\n          transition={springs.snappy}\n          style={{\n            position: 'absolute',\n            top: 4,\n            transform: 'translateX(-50%)',\n            pointerEvents: 'none',\n            textAlign: 'left',\n          }}\n        >\n          <div className=\"pv-chart-tip-l\" style={{ marginBottom: 3 }}>\n            {labels[hover]}\n          </div>\n          {series.map((s, si) => (\n            <div key={si} className=\"pv-chart-tip-row\">\n              <i\n                style={{ background: s.color ?? palette[si % palette.length] }}\n              />\n              <span>{s.name}</span>\n              <b>{format(s.values[hover] ?? 0)}</b>\n            </div>\n          ))}\n        </motion.div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA6EY,SACE,KADF;AA3EZ,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,cAAc;AACvB,SAAS,WAAW,mBAAmB;AACvC,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAClC,OAAO;AASA,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,SAAS,CAAC,MAAM,EAAE,eAAe;AACnC,GAKG;AACD,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,CAAC,GAAG,IAAI,IAAI,SAAS,CAAC;AAC5B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AAEtD,YAAU,MAAM;AACd,UAAM,KAAK,QAAQ;AACnB,QAAI,CAAC,GAAI;AACT,SAAK,GAAG,sBAAsB,EAAE,KAAK;AACrC,UAAM,KAAK,IAAI;AAAA,MAAe,CAAC,YAC7B,KAAK,QAAQ,CAAC,EAAE,YAAY,KAAK;AAAA,IACnC;AACA,OAAG,QAAQ,EAAE;AACb,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,IAAI,KAAK,IAAI;AAC7B,QAAM,MAAM,UACR,EAAE,KAAK,IAAI,OAAO,GAAG,QAAQ,IAAI,MAAM,GAAG,IAC1C,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAG;AAC/C,QAAM,SAAS,KAAK,IAAI,GAAG,IAAI,IAAI,OAAO,IAAI,KAAK;AACnD,QAAM,SAAS,SAAS,IAAI,MAAM,IAAI;AACtC,QAAM,WAAW,IAAI,MAAM;AAI3B,QAAM,UAAU,CAAC,oBAAoB,iBAAiB;AACtD,QAAM,MAAM,KAAK,IAAI,GAAG,GAAG,OAAO,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;AAE1D,QAAM,KAAK,UAAkB,EAC1B,OAAO,OAAO,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC,EAC9B,MAAM,CAAC,IAAI,MAAM,IAAI,OAAO,MAAM,CAAC,EACnC,QAAQ,IAAI;AACf,QAAM,KAAK,UAAkB,EAC1B,OAAO,OAAO,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC,EAC9B,MAAM,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC,EACzB,QAAQ,IAAI;AACf,QAAM,IAAI,YAAY,EAAE,OAAO,CAAC,GAAG,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG,CAAC;AACzE,QAAM,QAAQ,EAAE,MAAM,CAAC;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAO,EAAE,UAAU,YAAY,OAAO,QAAQ,QAAQ,QAAQ,UAAU;AAAA,MACxE,cAAc,MAAM,SAAS,IAAI;AAAA,MAEhC;AAAA,YAAI,KACH,qBAAC,SAAI,OAAO,GAAG,QAAgB,MAAK,OAAM,cAAW,aAElD;AAAA,gBAAM,IAAI,CAAC,GAAG,MACb,qBAAC,OACC;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAI,IAAI;AAAA,gBACR,IAAI,IAAI,OAAO;AAAA,gBACf,IAAI,EAAE,CAAC;AAAA,gBACP,IAAI,EAAE,CAAC;AAAA,gBACP,QAAO;AAAA,gBACP,aAAa;AAAA,gBACb,iBAAiB,MAAM,IAAI,MAAM;AAAA;AAAA,YACnC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,GAAG,IAAI,OAAO;AAAA,gBACd,GAAG,EAAE,CAAC,IAAI;AAAA,gBACV,YAAW;AAAA,gBACX,UAAU;AAAA,gBACV,MAAK;AAAA,gBAEJ,iBAAO,CAAC;AAAA;AAAA,YACX;AAAA,eAlBM,CAmBR,CACD;AAAA,UAEA,OAAO,IAAI,CAAC,KAAK,OAAO;AACvB,kBAAM,KAAK,GAAG,EAAE,KAAK;AACrB,kBAAM,KAAK,UAAU;AACrB,mBACE,qBAAC,OAEC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,GAAG,KAAK,GAAG,KAAK,IAAI,GAAG,QAAQ,IAAI;AAAA,kBACnC,GAAG,IAAI;AAAA,kBACP,OAAO,GAAG,KAAK;AAAA,kBACf,QAAQ;AAAA,kBACR,MAAM,KAAK,6BAA6B;AAAA,kBACxC,cAAc,MAAM,SAAS,EAAE;AAAA;AAAA,cACjC;AAAA,cACC,OAAO,IAAI,CAAC,GAAG,OAAO;AACrB,sBAAM,IAAI,EAAE,OAAO,EAAE,KAAK;AAC1B,sBAAM,KAAK,MAAM,GAAG,EAAE,KAAK;AAC3B,sBAAM,KAAK,GAAG,UAAU;AACxB,uBACE;AAAA,kBAAC,OAAO;AAAA,kBAAP;AAAA,oBAEC,GAAG;AAAA,oBACH,OAAO;AAAA,oBACP,IAAI,KAAK,IAAI,GAAG,KAAK,CAAC;AAAA,oBACtB,MAAM,EAAE,SAAS,QAAQ,KAAK,QAAQ,MAAM;AAAA,oBAC5C,SAAS,EAAE,GAAG,UAAU,QAAQ,EAAE;AAAA,oBAClC,SAAS;AAAA,sBACP,GAAG,EAAE,CAAC;AAAA,sBACN,QAAQ,KAAK,IAAI,GAAG,WAAW,EAAE,CAAC,CAAC;AAAA,oBACrC;AAAA,oBACA,YAAY,EAAE,GAAG,QAAQ,MAAM,OAAO,OAAO,GAAG;AAAA,oBAChD,OAAO,EAAE,SAAS,SAAS,QAAQ,KAAK,IAAI,IAAI;AAAA;AAAA,kBAX3C;AAAA,gBAYP;AAAA,cAEJ,CAAC;AAAA,cACD;AAAA,gBAAC;AAAA;AAAA,kBACC,GAAG,KAAK,GAAG,UAAU,IAAI;AAAA,kBACzB,GAAG,SAAS;AAAA,kBACZ,YAAW;AAAA,kBACX,UAAU;AAAA,kBACV,MAAK;AAAA,kBAEJ;AAAA;AAAA,cACH;AAAA,iBAvCM,EAwCR;AAAA,UAEJ,CAAC;AAAA,WACH;AAAA,QAID,SAAS,QACR;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,SAAS,EAAE,OAAO,GAAG,KAAK,KAAK,KAAK,GAAG,UAAU,IAAI,EAAE;AAAA,YACvD,YAAY,QAAQ;AAAA,YACpB,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK;AAAA,cACL,WAAW;AAAA,cACX,eAAe;AAAA,cACf,WAAW;AAAA,YACb;AAAA,YAEA;AAAA,kCAAC,SAAI,WAAU,kBAAiB,OAAO,EAAE,cAAc,EAAE,GACtD,iBAAO,KAAK,GACf;AAAA,cACC,OAAO,IAAI,CAAC,GAAG,OACd,qBAAC,SAAa,WAAU,oBACtB;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO,EAAE,YAAY,EAAE,SAAS,QAAQ,KAAK,QAAQ,MAAM,EAAE;AAAA;AAAA,gBAC/D;AAAA,gBACA,oBAAC,UAAM,YAAE,MAAK;AAAA,gBACd,oBAAC,OAAG,iBAAO,EAAE,OAAO,KAAK,KAAK,CAAC,GAAE;AAAA,mBALzB,EAMV,CACD;AAAA;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}