@withpotter/components 0.13.0-next.101

package/dist/dashboard/home/widgets/regulars-widget.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { membersApi } from "@withpotter/lib/api/members";
+import { asList } from "@withpotter/lib/utils";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { Panel, PanelAction } from "../panel";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { FeedbackVote } from "@withpotter/components/feedback";
+import { RegularReach } from "./regular-reach";
+const QUIET_DAYS = 60;
+const MIN_ORDERS = 2;
+const ROWS = 3;
+function daysSince(iso) {
+  return Math.floor((Date.now() - new Date(iso).getTime()) / 864e5);
+}
+function useQuietRegulars() {
+  const {
+    data: membersRaw,
+    isLoading,
+    error
+  } = useApiQuery(
+    ["home-regulars"],
+    (slug) => membersApi.list(slug, {
+      limit: 100,
+      sortBy: "totalSpent",
+      sortOrder: "DESC"
+    })
+  );
+  const members = membersRaw ? asList(membersRaw.members) : null;
+  const quiet = members ? members.filter(
+    (m) => (m.totalOrders ?? 0) >= MIN_ORDERS && m.lastOrderAt && daysSince(m.lastOrderAt) >= QUIET_DAYS
+  ).sort((a, b) => (b.totalSpent ?? 0) - (a.totalSpent ?? 0)) : null;
+  return { quiet, isLoading, failed: Boolean(error) };
+}
+function RegularsWidget() {
+  const formatCurrency = useFormatCurrency();
+  const { quiet, isLoading, failed } = useQuietRegulars();
+  if (failed) {
+    return /* @__PURE__ */ jsx(Panel, { title: "Gone quiet", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: "Couldn\u2019t load this just now." }) });
+  }
+  if (isLoading || !quiet) {
+    return /* @__PURE__ */ jsxs(
+      Panel,
+      {
+        title: "Gone quiet",
+        className: "h-full",
+        bodyClassName: "flex flex-col",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "inline-block h-4 w-44 animate-pulse rounded bg-[var(--bg-subtle)]"
+            }
+          ),
+          /* @__PURE__ */ jsx("ul", { className: "mt-2 space-y-1", "aria-hidden": true, children: Array.from({ length: ROWS }).map((_, i) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: "flex items-center justify-between gap-2 py-0.5",
+              children: /* @__PURE__ */ jsxs("span", { className: "min-w-0 space-y-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "block h-3.5 w-28 animate-pulse rounded bg-[var(--bg-subtle)]" }),
+                /* @__PURE__ */ jsx("span", { className: "block h-3.5 w-20 animate-pulse rounded bg-[var(--bg-subtle)]" })
+              ] })
+            },
+            i
+          )) })
+        ]
+      }
+    );
+  }
+  if (quiet.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    Panel,
+    {
+      title: "Gone quiet",
+      action: { label: "Customers", href: "/dashboard/customers" },
+      className: "h-full",
+      bodyClassName: "flex flex-col",
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: quiet.length === 1 ? `1 regular hasn\u2019t ordered in ${QUIET_DAYS} days` : `${quiet.length} regulars haven\u2019t ordered in ${QUIET_DAYS} days` }),
+        /* @__PURE__ */ jsx("ul", { className: "mt-2 space-y-1", children: quiet.slice(0, ROWS).map((m) => {
+          const name = m.name || m.email || "Customer";
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "flex items-center justify-between gap-2 py-0.5",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium text-[var(--text-primary)]", children: name }),
+                  /* @__PURE__ */ jsxs("span", { className: "block truncate text-sm text-[var(--text-tertiary)]", children: [
+                    formatCurrency(Math.round(m.totalSpent ?? 0)),
+                    " \xB7",
+                    " ",
+                    m.lastOrderAt ? daysSince(m.lastOrderAt) : 0,
+                    "d ago"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(RegularReach, { member: m, name })
+              ]
+            },
+            m.id
+          );
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between gap-2 pt-3", children: [
+          /* @__PURE__ */ jsx(PanelAction, { href: "/dashboard/customers", children: "See customers" }),
+          /* @__PURE__ */ jsx(
+            FeedbackVote,
+            {
+              promptKey: "home.regulars.thumb",
+              subject: { type: "home-widget", id: "regulars" },
+              label: "Useful?",
+              downVotePrefill: `The "Gone quiet" card listed regulars who haven't ordered in ${QUIET_DAYS} days, and that isn't useful for my business.
+
+What would make it useful:`
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  RegularsWidget,
+  useQuietRegulars
+};
+//# sourceMappingURL=regulars-widget.js.map

package/dist/dashboard/home/widgets/regulars-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/regulars-widget.tsx"],"sourcesContent":["'use client';\n\nimport { membersApi } from '@withpotter/lib/api/members';\nimport type { Member } from '@withpotter/lib/api/types';\nimport { asList } from '@withpotter/lib/utils';\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\nimport { Panel, PanelAction } from '../panel';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { FeedbackVote } from '@withpotter/components/feedback';\nimport { RegularReach } from './regular-reach';\n\n/**\n * Regulars who have gone quiet.\n *\n * THE MARKETING CARD THAT SURVIVES CONTACT WITH A REAL BUSINESS. Two attempts\n * came before it. A campaign card wanted send and schedule endpoints that do\n * not exist. An attribution card rendered \"Direct · 100% · 43 orders with no\n * source\" — a non-answer dressed as a finding, because a business whose\n * customers arrive by WhatsApp has no attribution to report, and a card whose\n * best case is \"we cannot tell\" is not worth a slot.\n *\n * This one cannot degrade that way. It names PEOPLE, and every business that\n * has sold twice to anyone has some. There is no configuration to get wrong\n * and no channel to mis-attribute: either someone who used to buy has stopped,\n * or they have not.\n *\n * WHY THIS IS THE RIGHT MARKETING JOB. Winning a repeat customer back costs a\n * fraction of finding a new one, and for a business trading over WhatsApp the\n * whole campaign is one message to one person who already likes you. Every\n * other marketing surface reports what a channel DID; this hands over a list of\n * names and a reason to type.\n *\n * A REGULAR IS SOMEONE WHO CAME BACK — two orders or more. One purchase is a\n * customer; the second is the one that says they chose you again, and chasing\n * a single-order buyer who never returned is a different, colder job.\n *\n * SIXTY DAYS, and it is a judgement rather than a fact. Long enough that a\n * monthly shopper is not chased for being a week late; short enough that the\n * relationship is still warm. A business with a longer natural cycle will find\n * this early rather than wrong, which is the safer direction to be off in.\n */\n\nconst QUIET_DAYS = 60;\nconst MIN_ORDERS = 2;\nconst ROWS = 3;\n\nfunction daysSince(iso: string): number {\n  return Math.floor((Date.now() - new Date(iso).getTime()) / 86_400_000);\n}\n\n/**\n * The list, and who on it has gone quiet.\n *\n * A hook of its own because two things ask: the card, and the board deciding\n * whether there is a card at all. Same query key, so it is one request.\n */\nexport function useQuietRegulars() {\n  /**\n   * `useApiQuery`, not a hand-rolled effect.\n   *\n   * This was the last card on the board to settle and it looked like a fault —\n   * John: *\"why does the last card come in slow, the gone quiet card like its\n   * a glitch\"*. Two reasons, and this is the first: its own `useEffect` +\n   * `setState` meant the request was outside the query cache, so it started\n   * cold on every single mount and shared nothing with the rest of the page.\n   * Through the cache it is served instantly on every visit after the first,\n   * and deduped against anything else asking for members.\n   *\n   * Sorted by spend so the biggest relationships surface first: a card with\n   * room for three should not spend one of them on somebody who bought twice\n   * and cheaply.\n   */\n  const {\n    data: membersRaw,\n    isLoading,\n    error,\n  } = useApiQuery(['home-regulars'], (slug) =>\n    membersApi.list(slug, {\n      limit: 100,\n      sortBy: 'totalSpent',\n      sortOrder: 'DESC',\n    }),\n  );\n  const members = membersRaw ? asList<Member>(membersRaw.members) : null;\n  const quiet = members\n    ? members\n        .filter(\n          (m) =>\n            (m.totalOrders ?? 0) >= MIN_ORDERS &&\n            m.lastOrderAt &&\n            daysSince(m.lastOrderAt) >= QUIET_DAYS,\n        )\n        .sort((a, b) => (b.totalSpent ?? 0) - (a.totalSpent ?? 0))\n    : null;\n\n  return { quiet, isLoading, failed: Boolean(error) };\n}\n\nexport function RegularsWidget() {\n  const formatCurrency = useFormatCurrency();\n  const { quiet, isLoading, failed } = useQuietRegulars();\n\n  if (failed) {\n    return (\n      <Panel title=\"Gone quiet\">\n        <p className=\"text-sm text-[var(--text-tertiary)]\">\n          Couldn’t load this just now.\n        </p>\n      </Panel>\n    );\n  }\n\n  /**\n   * Loading and \"nobody is quiet\" are different states — a zero shown while\n   * the request is out is a lie that corrects itself. But the placeholder has\n   * to be the SHAPE of the answer, which is the second half of why this card\n   * read as a glitch: it held one 28px bar, then became a sentence and three\n   * two-line rows, so the card visibly jumped when the data landed while every\n   * other card sat still.\n   *\n   * Same rule as the page skeleton in this change: a loading state that is not\n   * a picture of the thing loading is a layout shift with extra steps.\n   */\n  if (isLoading || !quiet) {\n    return (\n      <Panel\n        title=\"Gone quiet\"\n        className=\"h-full\"\n        bodyClassName=\"flex flex-col\"\n      >\n        <span\n          aria-hidden\n          className=\"inline-block h-4 w-44 animate-pulse rounded bg-[var(--bg-subtle)]\"\n        />\n        <ul className=\"mt-2 space-y-1\" aria-hidden>\n          {Array.from({ length: ROWS }).map((_, i) => (\n            <li\n              key={i}\n              className=\"flex items-center justify-between gap-2 py-0.5\"\n            >\n              <span className=\"min-w-0 space-y-1\">\n                <span className=\"block h-3.5 w-28 animate-pulse rounded bg-[var(--bg-subtle)]\" />\n                <span className=\"block h-3.5 w-20 animate-pulse rounded bg-[var(--bg-subtle)]\" />\n              </span>\n            </li>\n          ))}\n        </ul>\n      </Panel>\n    );\n  }\n\n  /**\n   * NOBODY IS QUIET, so there is nothing to draw.\n   *\n   * This state used to carry a sentence and a drawing of a regular with \"72d\n   * ago\" under them. The board no longer places the card until somebody has\n   * gone quiet (see the registry); this is the same answer for a list that\n   * empties while the card is up.\n   */\n  if (quiet.length === 0) return null;\n\n  return (\n    <Panel\n      title=\"Gone quiet\"\n      action={{ label: 'Customers', href: '/dashboard/customers' }}\n      className=\"h-full\"\n      bodyClassName=\"flex flex-col\"\n    >\n      <p className=\"text-sm text-[var(--text-tertiary)]\">\n        {quiet.length === 1\n          ? `1 regular hasn’t ordered in ${QUIET_DAYS} days`\n          : `${quiet.length} regulars haven’t ordered in ${QUIET_DAYS} days`}\n      </p>\n\n      <ul className=\"mt-2 space-y-1\">\n        {quiet.slice(0, ROWS).map((m) => {\n          const name = m.name || m.email || 'Customer';\n          return (\n            <li\n              key={m.id}\n              className=\"flex items-center justify-between gap-2 py-0.5\"\n            >\n              <span className=\"min-w-0\">\n                <span className=\"block truncate text-sm font-medium text-[var(--text-primary)]\">\n                  {name}\n                </span>\n                <span className=\"block truncate text-sm text-[var(--text-tertiary)]\">\n                  {formatCurrency(Math.round(m.totalSpent ?? 0))} ·{' '}\n                  {m.lastOrderAt ? daysSince(m.lastOrderAt) : 0}d ago\n                </span>\n              </span>\n              {/* The whole point of the card. A message to someone who already\n                  buys from you IS the campaign for a business trading over\n                  WhatsApp — and it is only offered where a number exists,\n                  rather than shown greyed out for customers who gave an email\n                  and nothing else. */}\n              <RegularReach member={m} name={name} />\n            </li>\n          );\n        })}\n      </ul>\n\n      {/* SIXTY DAYS AND TWO ORDERS ARE A GUESS, and this is how we find out\n          whose business they are wrong for. The card's own note says a\n          longer-cycle business will find this early rather than wrong — which\n          is a claim nobody here can check and every merchant can. A thumb is\n          the whole question: is this list worth acting on. A down vote opens\n          the sheet carrying the numbers, so \"these people haven't gone\n          anywhere\" arrives with the rule that decided they had.\n\n          It is a vote and not a prompt: it takes no live slot and is never\n          suppressed, because it belongs to the list above it rather than\n          interrupting the board. */}\n      <div className=\"mt-auto flex items-center justify-between gap-2 pt-3\">\n        <PanelAction href=\"/dashboard/customers\">See customers</PanelAction>\n        <FeedbackVote\n          promptKey=\"home.regulars.thumb\"\n          subject={{ type: 'home-widget', id: 'regulars' }}\n          label=\"Useful?\"\n          downVotePrefill={`The \"Gone quiet\" card listed regulars who haven't ordered in ${QUIET_DAYS} days, and that isn't useful for my business.\\n\\nWhat would make it useful:`}\n        />\n      </div>\n    </Panel>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/dashboard/home/widgets/revenue-series.d.ts

@@ -0,0 +1,12 @@
+import type { TimeSeriesPoint } from '@withpotter/lib/api/types';
+/**
+ * One point per day for the whole window, zero where nothing sold.
+ *
+ * The API sends only the days that had a sale, and the chart draws one bar per point and stretches
+ * each to share the width, so a single day with a sale was one bar the full width of the card, a
+ * flat block that read as broken. Laid out across the window, that day is a bar on its own day.
+ *
+ * The window ends today, or on the newest point if that is later (a day ahead in another zone).
+ * Dates the chart cannot read as days are left as they came.
+ */
+export declare function spreadByDay(series: TimeSeriesPoint[], days: number, now?: Date): TimeSeriesPoint[];

package/dist/dashboard/home/widgets/revenue-series.js

@@ -0,0 +1,26 @@
+const DAY = /^\d{4}-\d{2}-\d{2}/;
+const dayKey = (time) => new Date(time).toISOString().slice(0, 10);
+function spreadByDay(series, days, now = /* @__PURE__ */ new Date()) {
+  if (!Number.isFinite(days) || days < 1) return series;
+  if (series.length === 0 || !series.every((p) => DAY.test(p.date))) {
+    return series;
+  }
+  const byDay = /* @__PURE__ */ new Map();
+  for (const point of series) {
+    const key = point.date.slice(0, 10);
+    byDay.set(key, (byDay.get(key) ?? 0) + point.value);
+  }
+  const newest = [...byDay.keys()].sort().at(-1);
+  const today = dayKey(now.getTime());
+  const end = Date.parse(`${newest > today ? newest : today}T00:00:00Z`);
+  const out = [];
+  for (let i = days - 1; i >= 0; i -= 1) {
+    const date = dayKey(end - i * 864e5);
+    out.push({ date, value: byDay.get(date) ?? 0 });
+  }
+  return out;
+}
+export {
+  spreadByDay
+};
+//# sourceMappingURL=revenue-series.js.map

package/dist/dashboard/home/widgets/revenue-series.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/revenue-series.ts"],"sourcesContent":["import type { TimeSeriesPoint } from '@withpotter/lib/api/types';\n\nconst DAY = /^\\d{4}-\\d{2}-\\d{2}/;\n\nconst dayKey = (time: number) => new Date(time).toISOString().slice(0, 10);\n\n/**\n * One point per day for the whole window, zero where nothing sold.\n *\n * The API sends only the days that had a sale, and the chart draws one bar per point and stretches\n * each to share the width, so a single day with a sale was one bar the full width of the card, a\n * flat block that read as broken. Laid out across the window, that day is a bar on its own day.\n *\n * The window ends today, or on the newest point if that is later (a day ahead in another zone).\n * Dates the chart cannot read as days are left as they came.\n */\nexport function spreadByDay(\n  series: TimeSeriesPoint[],\n  days: number,\n  now: Date = new Date(),\n): TimeSeriesPoint[] {\n  if (!Number.isFinite(days) || days < 1) return series;\n  if (series.length === 0 || !series.every((p) => DAY.test(p.date))) {\n    return series;\n  }\n\n  const byDay = new Map<string, number>();\n  for (const point of series) {\n    const key = point.date.slice(0, 10);\n    byDay.set(key, (byDay.get(key) ?? 0) + point.value);\n  }\n\n  const newest = [...byDay.keys()].sort().at(-1)!;\n  const today = dayKey(now.getTime());\n  const end = Date.parse(`${newest > today ? newest : today}T00:00:00Z`);\n\n  const out: TimeSeriesPoint[] = [];\n  for (let i = days - 1; i >= 0; i -= 1) {\n    const date = dayKey(end - i * 86_400_000);\n    out.push({ date, value: byDay.get(date) ?? 0 });\n  }\n  return out;\n}\n"],"mappings":"AAEA,MAAM,MAAM;AAEZ,MAAM,SAAS,CAAC,SAAiB,IAAI,KAAK,IAAI,EAAE,YAAY,EAAE,MAAM,GAAG,EAAE;AAYlE,SAAS,YACd,QACA,MACA,MAAY,oBAAI,KAAK,GACF;AACnB,MAAI,CAAC,OAAO,SAAS,IAAI,KAAK,OAAO,EAAG,QAAO;AAC/C,MAAI,OAAO,WAAW,KAAK,CAAC,OAAO,MAAM,CAAC,MAAM,IAAI,KAAK,EAAE,IAAI,CAAC,GAAG;AACjE,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,oBAAI,IAAoB;AACtC,aAAW,SAAS,QAAQ;AAC1B,UAAM,MAAM,MAAM,KAAK,MAAM,GAAG,EAAE;AAClC,UAAM,IAAI,MAAM,MAAM,IAAI,GAAG,KAAK,KAAK,MAAM,KAAK;AAAA,EACpD;AAEA,QAAM,SAAS,CAAC,GAAG,MAAM,KAAK,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE;AAC7C,QAAM,QAAQ,OAAO,IAAI,QAAQ,CAAC;AAClC,QAAM,MAAM,KAAK,MAAM,GAAG,SAAS,QAAQ,SAAS,KAAK,YAAY;AAErE,QAAM,MAAyB,CAAC;AAChC,WAAS,IAAI,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG;AACrC,UAAM,OAAO,OAAO,MAAM,IAAI,KAAU;AACxC,QAAI,KAAK,EAAE,MAAM,OAAO,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;AAAA,EAChD;AACA,SAAO;AACT;","names":[]}

package/dist/dashboard/home/widgets/setup-steps.d.ts

@@ -0,0 +1,86 @@
+import type { OnboardingStep } from '@withpotter/lib/api/types';
+export { stepHref } from './step-href';
+/**
+ * The checklist, as parts two surfaces share.
+ *
+ * IT IS SHARED BECAUSE IT IS NOW IN TWO PLACES. The home board carries the card
+ * and the sidebar rail carries the same list for every screen that is not the
+ * home — John, 2026-08-23: *"when you are not on the home it should come to the
+ * sidebar nav as well."* Two copies of a ring and a row is exactly the drift
+ * this repo keeps paying for: onboarding grew a second template grid, the modal
+ * grew a second setup flow, and both times the second copy was the one that
+ * fell behind. One row, one ring, one relabelling rule, two mounts.
+ */
+/**
+ * The steps in the merchant's own nouns.
+ *
+ * The checklist is authored server-side in generic retail language, so a spa
+ * with a sidebar full of Services was told to "Add your first product" — the
+ * same leak `money-language.ts` was written for. Keyed on `stepKey`, not on
+ * matching the sentence: the label is the API's to change.
+ */
+export declare function relabelStep(step: OnboardingStep, itemLabel: string): OnboardingStep;
+/** `skipped` counts as settled: someone who said "not me" is not unfinished. */
+export declare function isSettled(step: OnboardingStep): boolean;
+export declare function orderSteps(steps: OnboardingStep[]): OnboardingStep[];
+export declare function stepCounts(steps: OnboardingStep[]): {
+    done: number;
+    total: number;
+    remaining: OnboardingStep[];
+    next: OnboardingStep;
+};
+/**
+ * The score, as a ring.
+ *
+ * A progress bar in a 312px card is a 280px line that reads as a loading state;
+ * a ring reads as a score, and a score is what "3 of 6" is. `size` because the
+ * sidebar's is a glyph beside a label and the card's is the card's own figure —
+ * the geometry is derived from it rather than duplicated per caller.
+ */
+export declare function SetupRing({ done, total, size, showCount, }: {
+    done: number;
+    total: number;
+    size?: number;
+    showCount?: boolean;
+}): import("react").JSX.Element;
+/**
+ * One step, and the link around it.
+ *
+ * EVERY STEP IS A LINK. John, 2026-08-23: *"you can actually click each line on
+ * the list to take you to the locations."* The old rule was that only the next
+ * step got one, on the argument that a card offering six destinations is a menu
+ * rather than an instruction — but that argument was about ORDER, and order
+ * survives: the list is still sequenced and the next step is still called out
+ * above it. What it cost was the obvious thing, which is that a checklist whose
+ * lines are inert is a picture of a checklist.
+ *
+ * A settled step still links. Coming back to what you already did is a normal
+ * thing to want, and a line that goes dead the moment it is ticked punishes
+ * finishing it.
+ *
+ * Not a `Button`: this is a list row, which is the one shape the raw-element
+ * rule keeps for a pressable SURFACE. A step with no `link` renders the
+ * identical row without one, rather than a dead link that looks live.
+ */
+export declare function SetupStepRow({ step, onActivate, inverse, large, required, }: {
+    step: OnboardingStep;
+    /**
+     * Handle the step HERE instead of navigating to it.
+     *
+     * John, 2026-09-10: *"when you clik on that the modal opens up that allows
+     * you to set up your account… yunno how when you are creating a new business
+     * in app how each modal opens up thats whst we shoduld do"*.
+     *
+     * A step whose whole job is one short form does not need a screen: connecting
+     * a bank is a bank, an account number and a confirmation, and sending someone
+     * to the payouts page to do it costs them the list they were reading. Return
+     * `true` to say the step was handled and the row should not navigate; return
+     * nothing and it falls through to the link, so a caller can handle one step
+     * and leave the rest alone.
+     */
+    onActivate?: (step: OnboardingStep) => boolean | void;
+    inverse?: boolean;
+    large?: boolean;
+    /** A red asterisk: this one stands between the business and going live. */
+    required?: boolean;
+}): import("react").JSX.Element;

package/dist/dashboard/home/widgets/setup-steps.js

@@ -0,0 +1,175 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Check, ChevronRight } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import { durations, eases } from "@withpotter/lib/motion";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { useEntityLabel } from "@withpotter/lib/intents/use-entity-label";
+import { useIntentConfig } from "@withpotter/lib/intents/use-intent-config";
+import { WALLET_SETTLEMENT } from "@withpotter/lib/wallet-settlement";
+import { STEP_LABELS } from "./step-labels";
+import { homeAddItemIntent, homeAddItemLinks } from "../home-add-item-links";
+import { stepHref } from "./step-href";
+import { stepHref as stepHref2 } from "./step-href";
+function relabelStep(step, itemLabel) {
+  const label = STEP_LABELS[step.stepKey];
+  if (label) return { ...step, label };
+  if (step.stepKey !== "add_product") return step;
+  return { ...step, label: `Add your first ${itemLabel.toLowerCase()}` };
+}
+function isSettled(step) {
+  return step.status === "completed" || step.status === "skipped";
+}
+const FIRST = "payments";
+function orderSteps(steps) {
+  const money = WALLET_SETTLEMENT ? [] : steps.filter((s) => s.stepKey === FIRST);
+  const rest = steps.filter((s) => s.stepKey !== FIRST);
+  return [...money, ...rest];
+}
+function stepCounts(steps) {
+  const done = steps.filter(isSettled).length;
+  const remaining = steps.filter((s) => !isSettled(s));
+  return { done, total: steps.length, remaining, next: remaining[0] };
+}
+function SetupRing({
+  done,
+  total,
+  size = 64,
+  showCount = true
+}) {
+  const stroke = Math.max(2, Math.round(size * 0.078));
+  const r = size / 2 - stroke;
+  const circumference = 2 * Math.PI * r;
+  const pct = total === 0 ? 0 : done / total;
+  return /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", style: { width: size, height: size }, children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: `0 0 ${size} ${size}`,
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r,
+              fill: "none",
+              stroke: "var(--bg-muted)",
+              strokeWidth: stroke
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r,
+              fill: "none",
+              stroke: "var(--brand-500)",
+              strokeWidth: stroke,
+              strokeLinecap: "round",
+              strokeDasharray: circumference,
+              strokeDashoffset: circumference * (1 - pct),
+              transform: `rotate(-90 ${size / 2} ${size / 2})`,
+              className: "transition-[stroke-dashoffset] duration-[var(--motion-slow)] ease-overshoot motion-reduce:transition-none"
+            }
+          )
+        ]
+      }
+    ),
+    showCount && /* @__PURE__ */ jsxs("span", { className: "absolute inset-0 grid place-items-center text-sm font-semibold tabular-nums text-[var(--text-primary)]", children: [
+      done,
+      "/",
+      total
+    ] })
+  ] });
+}
+function SetupStepRow({
+  step,
+  onActivate,
+  inverse = false,
+  large = false,
+  required = false
+}) {
+  const reduce = useReducedMotion();
+  const { tenant } = useAuth();
+  const item = useEntityLabel("item");
+  const intentConfig = useIntentConfig();
+  const done = isSettled(step);
+  const { create } = homeAddItemLinks(homeAddItemIntent(intentConfig, item));
+  const href = stepHref(step, tenant?.slug, create);
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: `grid shrink-0 place-items-center rounded-full ${large ? "h-5 w-5" : "h-4 w-4"} ${done ? "bg-[var(--brand-500)] text-white" : inverse ? "border border-[color-mix(in_srgb,var(--text-inverse)_36%,transparent)]" : "border border-[var(--border-default)]"}`,
+        children: done && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            initial: reduce ? { opacity: 0 } : { scale: 0.3, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            transition: reduce ? { duration: durations.fast } : { duration: durations.normal, ease: eases.overshoot },
+            className: "grid place-items-center",
+            children: /* @__PURE__ */ jsx(Check, { strokeWidth: 3 })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: `block ${large ? "text-base font-medium" : "truncate text-sm"} ${done ? inverse ? "text-[color-mix(in_srgb,var(--text-inverse)_48%,transparent)] line-through" : "text-[var(--text-muted)] line-through" : inverse ? "text-[color-mix(in_srgb,var(--text-inverse)_88%,transparent)]" : "text-[var(--text-secondary)]"}`,
+        children: [
+          step.label,
+          required && !done && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ml-0.5 text-[var(--error)]", children: "*" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (required to go live)" })
+          ] })
+        ]
+      }
+    ) }),
+    href && /* @__PURE__ */ jsx(
+      ChevronRight,
+      {
+        "aria-hidden": true,
+        className: `shrink-0 transition-opacity ${large ? "size-5 opacity-100" : "opacity-0 group-hover/step:opacity-100"} ${inverse ? "text-[color-mix(in_srgb,var(--text-inverse)_56%,transparent)]" : "text-[var(--text-muted)]"}`
+      }
+    )
+  ] });
+  if (!href) {
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `flex items-center gap-3 ${large ? inverse ? "w-full rounded-lg border border-[color-mix(in_srgb,var(--text-inverse)_10%,transparent)] bg-[color-mix(in_srgb,var(--matte-900)_94%,var(--bg-elevated))] px-3 py-3" : "w-full rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-muted)] px-3 py-3" : "-mx-2 px-2 py-1"}`,
+        children: body
+      }
+    ) });
+  }
+  const rowClass = `group/step flex w-full items-center gap-3 text-left transition-colors ${large ? inverse ? "rounded-lg border border-[color-mix(in_srgb,var(--text-inverse)_10%,transparent)] bg-[color-mix(in_srgb,var(--matte-900)_94%,var(--bg-elevated))] px-3 py-3 hover:bg-[color-mix(in_srgb,var(--text-inverse)_6%,transparent)]" : "rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-muted)] px-3 py-3 hover:bg-[var(--interactive-hover)]" : "-mx-2 rounded-lg px-2 py-1 hover:bg-[var(--interactive-hover)]"}`;
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    Link,
+    {
+      href,
+      className: rowClass,
+      onClick: (e) => {
+        if (onActivate?.(step) === true) e.preventDefault();
+      },
+      children: body
+    }
+  ) });
+}
+export {
+  SetupRing,
+  SetupStepRow,
+  isSettled,
+  orderSteps,
+  relabelStep,
+  stepCounts,
+  stepHref2 as stepHref
+};
+//# sourceMappingURL=setup-steps.js.map

package/dist/dashboard/home/widgets/setup-steps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/setup-steps.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { Check, ChevronRight } from 'lucide-react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { durations, eases } from '@withpotter/lib/motion';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { useEntityLabel } from '@withpotter/lib/intents/use-entity-label';\nimport { useIntentConfig } from '@withpotter/lib/intents/use-intent-config';\nimport type { OnboardingStep } from '@withpotter/lib/api/types';\nimport { WALLET_SETTLEMENT } from '@withpotter/lib/wallet-settlement';\nimport { STEP_LABELS } from './step-labels';\nimport { homeAddItemIntent, homeAddItemLinks } from '../home-add-item-links';\nimport { stepHref } from './step-href';\n\nexport { stepHref } from './step-href';\n\n/**\n * The checklist, as parts two surfaces share.\n *\n * IT IS SHARED BECAUSE IT IS NOW IN TWO PLACES. The home board carries the card\n * and the sidebar rail carries the same list for every screen that is not the\n * home — John, 2026-08-23: *\"when you are not on the home it should come to the\n * sidebar nav as well.\"* Two copies of a ring and a row is exactly the drift\n * this repo keeps paying for: onboarding grew a second template grid, the modal\n * grew a second setup flow, and both times the second copy was the one that\n * fell behind. One row, one ring, one relabelling rule, two mounts.\n */\n\n/**\n * The steps in the merchant's own nouns.\n *\n * The checklist is authored server-side in generic retail language, so a spa\n * with a sidebar full of Services was told to \"Add your first product\" — the\n * same leak `money-language.ts` was written for. Keyed on `stepKey`, not on\n * matching the sentence: the label is the API's to change.\n */\nexport function relabelStep(\n  step: OnboardingStep,\n  itemLabel: string,\n): OnboardingStep {\n  const label = STEP_LABELS[step.stepKey];\n  if (label) return { ...step, label };\n  if (step.stepKey !== 'add_product') return step;\n  return { ...step, label: `Add your first ${itemLabel.toLowerCase()}` };\n}\n\n/** `skipped` counts as settled: someone who said \"not me\" is not unfinished. */\nexport function isSettled(step: OnboardingStep): boolean {\n  return step.status === 'completed' || step.status === 'skipped';\n}\n\n/**\n * The checklist, in the order a business actually becomes able to trade.\n *\n * John, 2026-09-10: *\"we dnt need setup branding, first shoudl be paymrnt they\n * shoudl connect their bank account\"*.\n *\n * The list arrives from the API in authoring order, which put branding first —\n * a look, on a business that cannot yet take a naira. What stands between a\n * provisioned business and a business that can be paid is an account for the\n * money to land in, so that goes first and the rest keep the order the API\n * sent.\n *\n * BRANDING IS BACK, AND IT WAS RIGHT TO PUT IT BACK. It was dropped outright\n * for a beat — the reasoning being that a merchant who has just chosen a\n * storefront has already answered \"what should this look like\", so asking again\n * reads as the product forgetting. What that missed is that choosing a template\n * is not the same as putting YOUR logo and YOUR colour on it, and a checklist\n * that never mentions it leaves the one thing a merchant most wants to do\n * unlisted. It is not first, which was the actual complaint; it is on the list,\n * pointed at Preferences rather than the site builder — see `STEP_ROUTES` in step-href.ts.\n *\n * NO PAYMENTS STEP ON A WALLET BOX. Where money settles into the box's own\n * wallet there is no bank account to connect, so the step can never be ticked\n * and the list could never finish. It is dropped here, in the one function\n * both mounts already pass the list through, so the card and the rail lose it\n * together and count the same total.\n */\nconst FIRST = 'payments';\n\nexport function orderSteps(steps: OnboardingStep[]): OnboardingStep[] {\n  const money = WALLET_SETTLEMENT\n    ? []\n    : steps.filter((s) => s.stepKey === FIRST);\n  const rest = steps.filter((s) => s.stepKey !== FIRST);\n  return [...money, ...rest];\n}\n\nexport function stepCounts(steps: OnboardingStep[]) {\n  const done = steps.filter(isSettled).length;\n  const remaining = steps.filter((s) => !isSettled(s));\n  return { done, total: steps.length, remaining, next: remaining[0] };\n}\n\n/**\n * The score, as a ring.\n *\n * A progress bar in a 312px card is a 280px line that reads as a loading state;\n * a ring reads as a score, and a score is what \"3 of 6\" is. `size` because the\n * sidebar's is a glyph beside a label and the card's is the card's own figure —\n * the geometry is derived from it rather than duplicated per caller.\n */\nexport function SetupRing({\n  done,\n  total,\n  size = 64,\n  showCount = true,\n}: {\n  done: number;\n  total: number;\n  size?: number;\n  showCount?: boolean;\n}) {\n  const stroke = Math.max(2, Math.round(size * 0.078));\n  const r = size / 2 - stroke;\n  const circumference = 2 * Math.PI * r;\n  const pct = total === 0 ? 0 : done / total;\n\n  return (\n    <div className=\"relative shrink-0\" style={{ width: size, height: size }}>\n      <svg\n        width={size}\n        height={size}\n        viewBox={`0 0 ${size} ${size}`}\n        aria-hidden\n      >\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={r}\n          fill=\"none\"\n          stroke=\"var(--bg-muted)\"\n          strokeWidth={stroke}\n        />\n        {/* Rotated so the arc starts at twelve o'clock rather than at three,\n            which is where a circle's zero actually is and which reads as an\n            arbitrary offset. */}\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={r}\n          fill=\"none\"\n          /* BRAND, NOT SUCCESS. Setting up is progress, and progress is the\n             product's own colour; green is the app's word for a good OUTCOME —\n             paid, settled, live — and spending it on \"three of five\" makes a\n             half-finished checklist read as a healthy state and leaves nothing\n             louder to say when something genuinely is. The ring is also the\n             most colour on an empty board, so it is the one place the brand\n             should be. */\n          stroke=\"var(--brand-500)\"\n          strokeWidth={stroke}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={circumference * (1 - pct)}\n          transform={`rotate(-90 ${size / 2} ${size / 2})`}\n          className=\"transition-[stroke-dashoffset] duration-[var(--motion-slow)] ease-overshoot motion-reduce:transition-none\"\n        />\n      </svg>\n      {showCount && (\n        <span className=\"absolute inset-0 grid place-items-center text-sm font-semibold tabular-nums text-[var(--text-primary)]\">\n          {done}/{total}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/**\n * One step, and the link around it.\n *\n * EVERY STEP IS A LINK. John, 2026-08-23: *\"you can actually click each line on\n * the list to take you to the locations.\"* The old rule was that only the next\n * step got one, on the argument that a card offering six destinations is a menu\n * rather than an instruction — but that argument was about ORDER, and order\n * survives: the list is still sequenced and the next step is still called out\n * above it. What it cost was the obvious thing, which is that a checklist whose\n * lines are inert is a picture of a checklist.\n *\n * A settled step still links. Coming back to what you already did is a normal\n * thing to want, and a line that goes dead the moment it is ticked punishes\n * finishing it.\n *\n * Not a `Button`: this is a list row, which is the one shape the raw-element\n * rule keeps for a pressable SURFACE. A step with no `link` renders the\n * identical row without one, rather than a dead link that looks live.\n */\nexport function SetupStepRow({\n  step,\n  onActivate,\n  inverse = false,\n  large = false,\n  required = false,\n}: {\n  step: OnboardingStep;\n  /**\n   * Handle the step HERE instead of navigating to it.\n   *\n   * John, 2026-09-10: *\"when you clik on that the modal opens up that allows\n   * you to set up your account… yunno how when you are creating a new business\n   * in app how each modal opens up thats whst we shoduld do\"*.\n   *\n   * A step whose whole job is one short form does not need a screen: connecting\n   * a bank is a bank, an account number and a confirmation, and sending someone\n   * to the payouts page to do it costs them the list they were reading. Return\n   * `true` to say the step was handled and the row should not navigate; return\n   * nothing and it falls through to the link, so a caller can handle one step\n   * and leave the rest alone.\n   */\n  onActivate?: (step: OnboardingStep) => boolean | void;\n  inverse?: boolean;\n  large?: boolean;\n  /** A red asterisk: this one stands between the business and going live. */\n  required?: boolean;\n}) {\n  const reduce = useReducedMotion();\n  const { tenant } = useAuth();\n  const item = useEntityLabel('item');\n  const intentConfig = useIntentConfig();\n  const done = isSettled(step);\n  const { create } = homeAddItemLinks(homeAddItemIntent(intentConfig, item));\n  const href = stepHref(step, tenant?.slug, create);\n\n  const body = (\n    <>\n      <span\n        aria-hidden\n        className={`grid shrink-0 place-items-center rounded-full ${\n          large ? 'h-5 w-5' : 'h-4 w-4'\n        } ${\n          done\n            ? 'bg-[var(--brand-500)] text-white'\n            : inverse\n              ? 'border border-[color-mix(in_srgb,var(--text-inverse)_36%,transparent)]'\n              : 'border border-[var(--border-default)]'\n        }`}\n      >\n        {/* The tick LANDS. It was a bare conditional, so a step you had just\n            finished simply had a tick in it on the next render — the one moment\n            on this list worth feeling, and the one with no motion at all. */}\n        {done && (\n          <motion.span\n            initial={reduce ? { opacity: 0 } : { scale: 0.3, opacity: 0 }}\n            animate={{ scale: 1, opacity: 1 }}\n            transition={\n              reduce\n                ? { duration: durations.fast }\n                : { duration: durations.normal, ease: eases.overshoot }\n            }\n            className=\"grid place-items-center\"\n          >\n            <Check strokeWidth={3} />\n          </motion.span>\n        )}\n      </span>\n      <span className=\"min-w-0 flex-1\">\n        <span\n          className={`block ${\n            large ? 'text-base font-medium' : 'truncate text-sm'\n          } ${\n            done\n              ? inverse\n                ? 'text-[color-mix(in_srgb,var(--text-inverse)_48%,transparent)] line-through'\n                : 'text-[var(--text-muted)] line-through'\n              : inverse\n                ? 'text-[color-mix(in_srgb,var(--text-inverse)_88%,transparent)]'\n                : 'text-[var(--text-secondary)]'\n          }`}\n        >\n          {step.label}\n          {required && !done && (\n            <>\n              <span aria-hidden className=\"ml-0.5 text-[var(--error)]\">\n                *\n              </span>\n              <span className=\"sr-only\"> (required to go live)</span>\n            </>\n          )}\n        </span>\n      </span>\n      {href && (\n        <ChevronRight\n          aria-hidden\n          className={`shrink-0 transition-opacity ${\n            large\n              ? 'size-5 opacity-100'\n              : 'opacity-0 group-hover/step:opacity-100'\n          } ${\n            inverse\n              ? 'text-[color-mix(in_srgb,var(--text-inverse)_56%,transparent)]'\n              : 'text-[var(--text-muted)]'\n          }`}\n        />\n      )}\n    </>\n  );\n\n  if (!href) {\n    return (\n      <li>\n        <span\n          className={`flex items-center gap-3 ${\n            large\n              ? inverse\n                ? 'w-full rounded-lg border border-[color-mix(in_srgb,var(--text-inverse)_10%,transparent)] bg-[color-mix(in_srgb,var(--matte-900)_94%,var(--bg-elevated))] px-3 py-3'\n                : 'w-full rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-muted)] px-3 py-3'\n              : '-mx-2 px-2 py-1'\n          }`}\n        >\n          {body}\n        </span>\n      </li>\n    );\n  }\n\n  const rowClass = `group/step flex w-full items-center gap-3 text-left transition-colors ${\n    large\n      ? inverse\n        ? 'rounded-lg border border-[color-mix(in_srgb,var(--text-inverse)_10%,transparent)] bg-[color-mix(in_srgb,var(--matte-900)_94%,var(--bg-elevated))] px-3 py-3 hover:bg-[color-mix(in_srgb,var(--text-inverse)_6%,transparent)]'\n        : 'rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-muted)] px-3 py-3 hover:bg-[var(--interactive-hover)]'\n      : '-mx-2 rounded-lg px-2 py-1 hover:bg-[var(--interactive-hover)]'\n  }`;\n\n  return (\n    <li>\n      <Link\n        href={href}\n        className={rowClass}\n        onClick={(e) => {\n          // The handler decides. Only a `true` keeps the navigation from\n          // happening, so a caller that handles nothing changes nothing.\n          if (onActivate?.(step) === true) e.preventDefault();\n        }}\n      >\n        {body}\n      </Link>\n    </li>\n  );\n}\n"],"mappings":"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","names":["stepHref"]}

package/dist/dashboard/home/widgets/setup-widget.d.ts

@@ -0,0 +1,23 @@
+import type { OnboardingStep } from '@withpotter/lib/api/types';
+/**
+ * How far through setting up, and the one step to do next.
+ *
+ * THE CARD THAT EARNS ITS PLACE BY LEAVING. Every other widget on the board is
+ * most useful once a business is running; this one is most useful when the
+ * board is emptiest, and it removes itself the moment the checklist completes —
+ * which frees its slot for the add tile. A default that disappears is the
+ * opposite of the setup RAIL this home was taken apart from: that one had to be
+ * dismissed, so it was still there for people who had finished.
+ *
+ * IT IS A RING, NOT A BAR, and the remaining steps are listed under it with the
+ * done ones struck through, because seeing what you already finished is most of
+ * why a checklist feels like progress rather than like a list of demands.
+ *
+ * THE RING AND THE ROWS ARE SHARED with the sidebar rail — see `setup-steps`.
+ * The same checklist now appears on every screen that is not the home, and two
+ * copies of it is precisely the drift this repo keeps paying for.
+ */
+export declare function SetupWidget({ steps: rawSteps, itemLabel, }: {
+    steps: OnboardingStep[];
+    itemLabel: string;
+}): import("react").JSX.Element;

package/dist/dashboard/home/widgets/setup-widget.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSetupProgress } from "@withpotter/components/sidebar/setup-progress";
+import { Panel } from "../panel";
+import {
+  SetupRing,
+  SetupStepRow,
+  orderSteps,
+  relabelStep,
+  stepCounts
+} from "./setup-steps";
+function SetupWidget({
+  steps: rawSteps,
+  itemLabel
+}) {
+  const steps = orderSteps(rawSteps).map((s) => relabelStep(s, itemLabel));
+  const { done, total, next } = stepCounts(steps);
+  const progress = useSetupProgress() ?? { done, total };
+  return /* @__PURE__ */ jsxs(Panel, { title: "Finish setting up", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx(
+        SetupRing,
+        {
+          done: progress.done,
+          total: progress.total,
+          showCount: false
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: "Next" }),
+        /* @__PURE__ */ jsx("p", { className: "truncate text-md font-medium text-[var(--text-primary)]", children: next?.label ?? "All done" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-1", children: steps.slice(0, 4).map((s) => /* @__PURE__ */ jsx(SetupStepRow, { step: s }, s.stepKey)) })
+  ] });
+}
+export {
+  SetupWidget
+};
+//# sourceMappingURL=setup-widget.js.map

package/dist/dashboard/home/widgets/setup-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/setup-widget.tsx"],"sourcesContent":["'use client';\n\nimport type { OnboardingStep } from '@withpotter/lib/api/types';\nimport { useSetupProgress } from '@withpotter/components/sidebar/setup-progress';\nimport { Panel } from '../panel';\nimport {\n  SetupRing,\n  SetupStepRow,\n  orderSteps,\n  relabelStep,\n  stepCounts,\n} from './setup-steps';\n\n/**\n * How far through setting up, and the one step to do next.\n *\n * THE CARD THAT EARNS ITS PLACE BY LEAVING. Every other widget on the board is\n * most useful once a business is running; this one is most useful when the\n * board is emptiest, and it removes itself the moment the checklist completes —\n * which frees its slot for the add tile. A default that disappears is the\n * opposite of the setup RAIL this home was taken apart from: that one had to be\n * dismissed, so it was still there for people who had finished.\n *\n * IT IS A RING, NOT A BAR, and the remaining steps are listed under it with the\n * done ones struck through, because seeing what you already finished is most of\n * why a checklist feels like progress rather than like a list of demands.\n *\n * THE RING AND THE ROWS ARE SHARED with the sidebar rail — see `setup-steps`.\n * The same checklist now appears on every screen that is not the home, and two\n * copies of it is precisely the drift this repo keeps paying for.\n */\nexport function SetupWidget({\n  steps: rawSteps,\n  itemLabel,\n}: {\n  steps: OnboardingStep[];\n  itemLabel: string;\n}) {\n  // Ordered before relabelled, so both mounts agree — see `orderSteps`.\n  const steps = orderSteps(rawSteps).map((s) => relabelStep(s, itemLabel));\n  const { done, total, next } = stepCounts(steps);\n  // The ring is the rail's own count, not a second one made here. This card\n  // lists the checklist; the rail's percentage also counts the profile rows and\n  // the go-live checks, so a ring drawn from the list alone sat at a different\n  // fraction from the number in the sidebar beside it. The list's count stands\n  // in only until that one has been worked out.\n  const progress = useSetupProgress() ?? { done, total };\n\n  return (\n    <Panel title=\"Finish setting up\">\n      <div className=\"flex items-center gap-4\">\n        <SetupRing\n          done={progress.done}\n          total={progress.total}\n          showCount={false}\n        />\n\n        <div className=\"min-w-0\">\n          <p className=\"text-sm text-[var(--text-tertiary)]\">Next</p>\n          <p className=\"truncate text-md font-medium text-[var(--text-primary)]\">\n            {next?.label ?? 'All done'}\n          </p>\n        </div>\n      </div>\n\n      <ul className=\"mt-3 space-y-1\">\n        {steps.slice(0, 4).map((s) => (\n          <SetupStepRow key={s.stepKey} step={s} />\n        ))}\n      </ul>\n\n      {/* NO REPEATED LINK AT THE FOOT. It existed because the list was inert\n          and the next step needed one reachable target; the list carries its\n          own now, so this was the same words twice, six pixels apart, going to\n          the same place. */}\n    </Panel>\n  );\n}\n"],"mappings":";AAmDQ,cAMA,YANA;AAhDR,SAAS,wBAAwB;AACjC,SAAS,aAAa;AACtB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAoBA,SAAS,YAAY;AAAA,EAC1B,OAAO;AAAA,EACP;AACF,GAGG;AAED,QAAM,QAAQ,WAAW,QAAQ,EAAE,IAAI,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC;AACvE,QAAM,EAAE,MAAM,OAAO,KAAK,IAAI,WAAW,KAAK;AAM9C,QAAM,WAAW,iBAAiB,KAAK,EAAE,MAAM,MAAM;AAErD,SACE,qBAAC,SAAM,OAAM,qBACX;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,SAAS;AAAA,UACf,OAAO,SAAS;AAAA,UAChB,WAAW;AAAA;AAAA,MACb;AAAA,MAEA,qBAAC,SAAI,WAAU,WACb;AAAA,4BAAC,OAAE,WAAU,uCAAsC,kBAAI;AAAA,QACvD,oBAAC,OAAE,WAAU,2DACV,gBAAM,SAAS,YAClB;AAAA,SACF;AAAA,OACF;AAAA,IAEA,oBAAC,QAAG,WAAU,kBACX,gBAAM,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,MACtB,oBAAC,gBAA6B,MAAM,KAAjB,EAAE,OAAkB,CACxC,GACH;AAAA,KAMF;AAEJ;","names":[]}

package/dist/dashboard/home/widgets/step-href.d.ts

@@ -0,0 +1,4 @@
+import type { OnboardingStep } from '@withpotter/lib/api/types';
+export declare function stepHref(step: OnboardingStep, slug?: string, 
+/** Where a new item is made: Home's named link, when the caller has one. */
+create?: string): string | null;

package/dist/dashboard/home/widgets/step-href.js

@@ -0,0 +1,58 @@
+const NEW_ITEM = "/dashboard/catalog/new";
+const STEP_ROUTES = {
+  // What you sell. Every archetype spells this key differently; they all land
+  // on the one list.
+  // The form that makes one, not the list that holds them. `create` is Home's
+  // own named link (home-add-item-links.ts), so the first product lands in
+  // Inventory on a business with several archetypes.
+  add_product: (_slug, create) => create ?? NEW_ITEM,
+  content_main: (_slug, create) => create ?? NEW_ITEM,
+  content_products: (_slug, create) => create ?? NEW_ITEM,
+  content_services: (_slug, create) => create ?? NEW_ITEM,
+  content_menu: (_slug, create) => create ?? NEW_ITEM,
+  content_packages: (_slug, create) => create ?? NEW_ITEM,
+  /**
+   * Brand, logo and colour: the Preferences page (John, 2026-09-10: *"the set
+   * up branding shoudl take them to the preference page"*).
+   *
+   * These pointed at the editor's Brand mode, which opens the whole site
+   * builder to change a logo and two colours — a canvas, a section tree and a
+   * preview, for three fields. Preferences is where the business's own details
+   * live, it is a page rather than an application, and it is where a merchant
+   * sent to "set up your branding" expects to land.
+   */
+  branding: () => "/dashboard/settings/branding",
+  customize_theme: () => "/dashboard/settings/branding",
+  add_logo: () => "/dashboard/settings/branding",
+  go_live: (slug) => slug ? `/dashboard/editor/${slug}` : "/dashboard/business/pages",
+  // Money. `/settings/payments` does not exist and never did in this app: the
+  // account that money lands in is the Payments hub's own screen.
+  payments: () => "/dashboard/payments/payouts",
+  // The availability view of Appointments, where the hours are set.
+  availability: () => "/dashboard/bookings?view=availability",
+  schedule: () => "/dashboard/bookings?view=availability",
+  shipping: () => "/dashboard/business/shipping",
+  social_sharing: () => "/dashboard/settings/social",
+  connect_domain: () => "/dashboard/business/domains"
+};
+const PATH_ROUTES = {
+  "/content/packages": "/dashboard/catalog",
+  "/content/products": "/dashboard/catalog",
+  "/settings/payments": "/dashboard/payments/payouts",
+  "/settings/shipping": "/dashboard/settings/shipping",
+  "/settings/social": "/dashboard/settings/social",
+  "/settings/domains": "/dashboard/business/domains",
+  "/resources": "/dashboard/resources"
+};
+function stepHref(step, slug, create) {
+  const byKey = STEP_ROUTES[step.stepKey];
+  if (byKey) return byKey(slug, create);
+  if (step.link) return step.link;
+  const path = step.dashboardPath;
+  if (!path) return null;
+  return PATH_ROUTES[path] ?? null;
+}
+export {
+  stepHref
+};
+//# sourceMappingURL=step-href.js.map