@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/step-href.ts"],"sourcesContent":["import type { OnboardingStep } from '@withpotter/lib/api/types';\n\n/**\n * Where a step is actually done.\n *\n * THE ROWS WERE DEAD, and this is why. The row renders a link when the step has\n * one — but the progress endpoint has never sent `link`. It sends\n * `dashboardPath`, and it sends the OLD editor's addresses in it:\n * `/content/packages`, `/settings/branding`, `/settings/payments`. Not one of\n * those is a route in this app. So every line of the checklist fell through to\n * the inert branch, on the home and in the rail both, and \"Set up payments\" was\n * a sentence rather than a way to set up payments.\n *\n * Keyed on `stepKey`, like `relabelStep` above and for the same reason: the\n * path is the API's to change, the key is the contract. The path is read only\n * as a fallback, for a step key this map has not met yet.\n *\n * A few destinations need the slug because the editor is addressed by tenant.\n * Those fall back to the legacy route, which redirects to the same place once\n * auth resolves — a link that works a beat later beats no link.\n */\nconst NEW_ITEM = '/dashboard/catalog/new';\n\ntype StepRoute = (slug?: string, create?: string) => string;\n\nconst STEP_ROUTES: Record<string, StepRoute> = {\n  // What you sell. Every archetype spells this key differently; they all land\n  // on the one list.\n  // The form that makes one, not the list that holds them. `create` is Home's\n  // own named link (home-add-item-links.ts), so the first product lands in\n  // Inventory on a business with several archetypes.\n  add_product: (_slug, create) => create ?? NEW_ITEM,\n  content_main: (_slug, create) => create ?? NEW_ITEM,\n  content_products: (_slug, create) => create ?? NEW_ITEM,\n  content_services: (_slug, create) => create ?? NEW_ITEM,\n  content_menu: (_slug, create) => create ?? NEW_ITEM,\n  content_packages: (_slug, create) => create ?? NEW_ITEM,\n\n  /**\n   * Brand, logo and colour: the Preferences page (John, 2026-09-10: *\"the set\n   * up branding shoudl take them to the preference page\"*).\n   *\n   * These pointed at the editor's Brand mode, which opens the whole site\n   * builder to change a logo and two colours — a canvas, a section tree and a\n   * preview, for three fields. Preferences is where the business's own details\n   * live, it is a page rather than an application, and it is where a merchant\n   * sent to \"set up your branding\" expects to land.\n   */\n  branding: () => '/dashboard/settings/branding',\n  customize_theme: () => '/dashboard/settings/branding',\n  add_logo: () => '/dashboard/settings/branding',\n  go_live: (slug) =>\n    slug ? `/dashboard/editor/${slug}` : '/dashboard/business/pages',\n\n  // Money. `/settings/payments` does not exist and never did in this app: the\n  // account that money lands in is the Payments hub's own screen.\n  payments: () => '/dashboard/payments/payouts',\n\n  // The availability view of Appointments, where the hours are set.\n  availability: () => '/dashboard/bookings?view=availability',\n  schedule: () => '/dashboard/bookings?view=availability',\n  shipping: () => '/dashboard/business/shipping',\n  social_sharing: () => '/dashboard/settings/social',\n  connect_domain: () => '/dashboard/business/domains',\n};\n\n/** Last resort: the API's own path, for a key that arrived after this map. */\nconst PATH_ROUTES: Record<string, string> = {\n  '/content/packages': '/dashboard/catalog',\n  '/content/products': '/dashboard/catalog',\n  '/settings/payments': '/dashboard/payments/payouts',\n  '/settings/shipping': '/dashboard/settings/shipping',\n  '/settings/social': '/dashboard/settings/social',\n  '/settings/domains': '/dashboard/business/domains',\n  '/resources': '/dashboard/resources',\n};\n\nexport function stepHref(\n  step: OnboardingStep,\n  slug?: string,\n  /** Where a new item is made: Home's named link, when the caller has one. */\n  create?: string,\n): string | null {\n  const byKey = STEP_ROUTES[step.stepKey];\n  if (byKey) return byKey(slug, create);\n  if (step.link) return step.link;\n  const path = step.dashboardPath;\n  if (!path) return null;\n  return PATH_ROUTES[path] ?? null;\n}\n"],"mappings":"AAqBA,MAAM,WAAW;AAIjB,MAAM,cAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM7C,aAAa,CAAC,OAAO,WAAW,UAAU;AAAA,EAC1C,cAAc,CAAC,OAAO,WAAW,UAAU;AAAA,EAC3C,kBAAkB,CAAC,OAAO,WAAW,UAAU;AAAA,EAC/C,kBAAkB,CAAC,OAAO,WAAW,UAAU;AAAA,EAC/C,cAAc,CAAC,OAAO,WAAW,UAAU;AAAA,EAC3C,kBAAkB,CAAC,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY/C,UAAU,MAAM;AAAA,EAChB,iBAAiB,MAAM;AAAA,EACvB,UAAU,MAAM;AAAA,EAChB,SAAS,CAAC,SACR,OAAO,qBAAqB,IAAI,KAAK;AAAA;AAAA;AAAA,EAIvC,UAAU,MAAM;AAAA;AAAA,EAGhB,cAAc,MAAM;AAAA,EACpB,UAAU,MAAM;AAAA,EAChB,UAAU,MAAM;AAAA,EAChB,gBAAgB,MAAM;AAAA,EACtB,gBAAgB,MAAM;AACxB;AAGA,MAAM,cAAsC;AAAA,EAC1C,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,qBAAqB;AAAA,EACrB,cAAc;AAChB;AAEO,SAAS,SACd,MACA,MAEA,QACe;AACf,QAAM,QAAQ,YAAY,KAAK,OAAO;AACtC,MAAI,MAAO,QAAO,MAAM,MAAM,MAAM;AACpC,MAAI,KAAK,KAAM,QAAO,KAAK;AAC3B,QAAM,OAAO,KAAK;AAClB,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO,YAAY,IAAI,KAAK;AAC9B;","names":[]}

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

@@ -0,0 +1,6 @@
+/**
+ * Checklist rows whose server wording did not say what to do. "Set your
+ * availability" read as a profile setting; it means the hours bookings can be
+ * taken. Keyed on `stepKey`, like the routes beside it.
+ */
+export declare const STEP_LABELS: Record<string, string>;

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

@@ -0,0 +1,8 @@
+const STEP_LABELS = {
+  availability: "Set the hours you take bookings",
+  schedule: "Set the hours you take bookings"
+};
+export {
+  STEP_LABELS
+};
+//# sourceMappingURL=step-labels.js.map

package/dist/dashboard/home/widgets/step-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/step-labels.ts"],"sourcesContent":["/**\n * Checklist rows whose server wording did not say what to do. \"Set your\n * availability\" read as a profile setting; it means the hours bookings can be\n * taken. Keyed on `stepKey`, like the routes beside it.\n */\nexport const STEP_LABELS: Record<string, string> = {\n  availability: 'Set the hours you take bookings',\n  schedule: 'Set the hours you take bookings',\n};\n"],"mappings":"AAKO,MAAM,cAAsC;AAAA,EACjD,cAAc;AAAA,EACd,UAAU;AACZ;","names":[]}

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

@@ -0,0 +1 @@
+export declare function TeamWidget(): import("react").JSX.Element;

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

@@ -0,0 +1,117 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { useWorkspaceInvite } from "@withpotter/lib/use-workspace-invite";
+import { generatedAvatarUri } from "@withpotter/ui-kit/generated-avatar";
+import { InviteMemberDialog } from "@withpotter/pages-core/dashboard/settings/team/_components/invite-member-dialog";
+import { PersonActivity } from "../person-activity";
+import { Panel, PanelEmpty } from "../panel";
+import { useWorkspaceMembers } from "@withpotter/hooks/use-workspace-members";
+import { TEAM_PAGE } from "@withpotter/lib/team-page";
+import { memberLabel } from "./member-label";
+const ROW_LIMIT = 4;
+function TeamWidget() {
+  const invite = useWorkspaceInvite();
+  const [inviteOpen, setInviteOpen] = useState(false);
+  const [openMember, setOpenMember] = useState(null);
+  const { members, isError, refetch } = useWorkspaceMembers();
+  const active = members.filter((m) => m.status !== "removed");
+  const shown = active.slice(0, ROW_LIMIT);
+  const overflow = active.length - shown.length;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Panel,
+      {
+        title: "Team",
+        action: { label: "Manage", href: TEAM_PAGE },
+        className: "h-full",
+        bodyClassName: "flex flex-col",
+        children: [
+          isError && active.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-[132px] flex-col items-center justify-center gap-2 px-4 py-6 text-center", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Couldn\u2019t load your team" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => void refetch(),
+                className: "text-sm font-medium text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]",
+                children: "Retry"
+              }
+            )
+          ] }) : active.length === 0 ? /* @__PURE__ */ jsx(
+            PanelEmpty,
+            {
+              title: "Just you so far",
+              description: "Add someone and they can take orders without seeing your takings."
+            }
+          ) : /* @__PURE__ */ jsxs("ul", { className: "space-y-1", children: [
+            shown.map((m) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setOpenMember(m.id),
+                className: "-mx-2 flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors hover:bg-[var(--interactive-hover)]",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: generatedAvatarUri(m.email || m.id),
+                      alt: "",
+                      className: "h-6 w-6 shrink-0 rounded-full object-cover"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-[var(--text-primary)]", children: memberLabel(m) }),
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm capitalize text-[var(--text-muted)]", children: m.status === "invited" ? "Invited" : m.roleName ?? m.role })
+                ]
+              }
+            ) }, m.id)),
+            overflow > 0 && /* @__PURE__ */ jsxs("li", { className: "px-0 pt-1 text-sm text-[var(--text-muted)]", children: [
+              "and ",
+              overflow,
+              " more"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-auto pt-3", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setInviteOpen(true),
+              className: "inline-flex items-center gap-2 text-sm font-medium text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]",
+              children: [
+                /* @__PURE__ */ jsx(Plus, {}),
+                "Invite someone"
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    openMember && /* @__PURE__ */ jsx(
+      PersonActivity,
+      {
+        member: active.find((m) => m.id === openMember),
+        onClose: () => setOpenMember(null)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InviteMemberDialog,
+      {
+        open: inviteOpen,
+        onOpenChange: setInviteOpen,
+        workspaceRoles: invite.roles,
+        wsInviteEmail: invite.email,
+        setWsInviteEmail: invite.setEmail,
+        wsInvitePhone: invite.phone,
+        setWsInvitePhone: invite.setPhone,
+        setWsInviteRole: invite.setRole,
+        handleWsInvite: invite.invite,
+        wsInviting: invite.inviting
+      }
+    )
+  ] });
+}
+export {
+  TeamWidget
+};
+//# sourceMappingURL=team-widget.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/team-widget.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Plus } from 'lucide-react';\nimport { useWorkspaceInvite } from '@withpotter/lib/use-workspace-invite';\nimport { generatedAvatarUri } from '@withpotter/ui-kit/generated-avatar';\nimport { InviteMemberDialog } from '@withpotter/pages-core/dashboard/settings/team/_components/invite-member-dialog';\nimport { PersonActivity } from '../person-activity';\nimport { Panel, PanelEmpty } from '../panel';\nimport { useWorkspaceMembers } from '@withpotter/hooks/use-workspace-members';\nimport { TEAM_PAGE } from '@withpotter/lib/team-page';\nimport { memberLabel } from './member-label';\n\n/**\n * Who is in the business, on the board rather than in the header.\n *\n * IT SWAPPED PLACES WITH \"Add widget\". The header held a stack of faces and the\n * board's last slot held a dashed \"Add widget\" tile, and both were in the wrong\n * place: the faces are CONTENT — a thing you look at and click into — which is\n * what a card is for, and adding a widget is a CONTROL, which is what a header\n * is for. A control sitting in the grid it edits was always slightly odd.\n *\n * A ROSTER IS NOT A LIST OF NAMES. Each row carries what that person can do,\n * because \"who is in here\" and \"what are they allowed to touch\" are the same\n * question for an owner — and the answer is invisible everywhere else without\n * opening team settings.\n *\n * CLICKING SOMEONE OPENS WHAT THEY HAVE DONE, from the attributed team log.\n * See `PersonActivity` for why that is a different feed from the home's own\n * Activity card and could never have been a filter on it.\n */\n\n/** Rows before the rest becomes a count. Past this the card stops fitting. */\nconst ROW_LIMIT = 4;\n\nexport function TeamWidget() {\n  const invite = useWorkspaceInvite();\n  const [inviteOpen, setInviteOpen] = useState(false);\n  const [openMember, setOpenMember] = useState<string | null>(null);\n\n  const { members, isError, refetch } = useWorkspaceMembers();\n  const active = members.filter((m) => m.status !== 'removed');\n  const shown = active.slice(0, ROW_LIMIT);\n  const overflow = active.length - shown.length;\n\n  return (\n    <>\n      <Panel\n        title=\"Team\"\n        action={{ label: 'Manage', href: TEAM_PAGE }}\n        className=\"h-full\"\n        bodyClassName=\"flex flex-col\"\n      >\n        {isError && active.length === 0 ? (\n          <div className=\"flex min-h-[132px] flex-col items-center justify-center gap-2 px-4 py-6 text-center\">\n            <p className=\"text-sm font-medium text-[var(--text-secondary)]\">\n              Couldn’t load your team\n            </p>\n            <button\n              type=\"button\"\n              onClick={() => void refetch()}\n              className=\"text-sm font-medium text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]\"\n            >\n              Retry\n            </button>\n          </div>\n        ) : active.length === 0 ? (\n          <PanelEmpty\n            title=\"Just you so far\"\n            description=\"Add someone and they can take orders without seeing your takings.\"\n          />\n        ) : (\n          <ul className=\"space-y-1\">\n            {shown.map((m) => (\n              <li key={m.id}>\n                <button\n                  type=\"button\"\n                  onClick={() => setOpenMember(m.id)}\n                  className=\"-mx-2 flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors hover:bg-[var(--interactive-hover)]\"\n                >\n                  {/* eslint-disable-next-line @next/next/no-img-element */}\n                  <img\n                    src={generatedAvatarUri(m.email || m.id)}\n                    alt=\"\"\n                    className=\"h-6 w-6 shrink-0 rounded-full object-cover\"\n                  />\n                  <span className=\"min-w-0 flex-1 truncate text-sm font-medium text-[var(--text-primary)]\">\n                    {memberLabel(m)}\n                  </span>\n                  {/* Invited-but-not-joined says so. Showing a role for someone\n                      who has never arrived implies they are working. */}\n                  <span className=\"shrink-0 text-sm capitalize text-[var(--text-muted)]\">\n                    {m.status === 'invited'\n                      ? 'Invited'\n                      : (m.roleName ?? m.role)}\n                  </span>\n                </button>\n              </li>\n            ))}\n            {overflow > 0 && (\n              <li className=\"px-0 pt-1 text-sm text-[var(--text-muted)]\">\n                and {overflow} more\n              </li>\n            )}\n          </ul>\n        )}\n\n        <div className=\"mt-auto pt-3\">\n          <button\n            type=\"button\"\n            onClick={() => setInviteOpen(true)}\n            className=\"inline-flex items-center gap-2 text-sm font-medium text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]\"\n          >\n            <Plus />\n            Invite someone\n          </button>\n        </div>\n      </Panel>\n\n      {openMember && (\n        <PersonActivity\n          member={active.find((m) => m.id === openMember)!}\n          onClose={() => setOpenMember(null)}\n        />\n      )}\n\n      <InviteMemberDialog\n        open={inviteOpen}\n        onOpenChange={setInviteOpen}\n        workspaceRoles={invite.roles}\n        wsInviteEmail={invite.email}\n        setWsInviteEmail={invite.setEmail}\n        wsInvitePhone={invite.phone}\n        setWsInvitePhone={invite.setPhone}\n        setWsInviteRole={invite.setRole}\n        handleWsInvite={invite.invite}\n        wsInviting={invite.inviting}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/dashboard/home/widgets/types.d.ts

@@ -0,0 +1,192 @@
+import type { ReactNode } from 'react';
+import type { WidgetEmpty } from './widget-empty';
+import type { NextUpItem } from '../next-up-sources';
+import type { ResolvedIntentConfig } from '@withpotter/lib/intents/types';
+import type { RecentScreen } from '../use-recent-screens';
+import type { DashboardStats, OutstandingInvoices } from '@withpotter/lib/api/types';
+import type { ActivityItem } from '@withpotter/components/dashboard/activity-feed';
+import type { OnboardingStep } from '@withpotter/lib/api/types';
+/**
+ * Two card widths, because Shopify has two, and this board is theirs.
+ *
+ * Measured off `admin.shopify.com` rather than eyeballed. Their home is a
+ * SIX-COLUMN grid with a 20px gap inside a 976px column:
+ *
+ *   row 1   two cards spanning 3 columns each   478px wide
+ *   row 2   three cards spanning 2 columns each 312px wide
+ *   every card                                  320px tall
+ *
+ *   (976 - 5x20) / 6 = 146 per column
+ *   span 3 -> 3x146 + 2x20 = 478   span 2 -> 2x146 + 20 = 312
+ *
+ * So a widget does not pick a pixel width, it picks how many of the six
+ * columns it takes, and only two answers are allowed. That is the whole
+ * discipline: with two widths and one height, a board cannot be arranged into
+ * something that looks broken, and any card can sit in either row.
+ *
+ * `wide` is the 2-up row, `narrow` is the 3-up row.
+ */
+export type WidgetSize = 'wide' | 'narrow';
+/** Columns out of six. */
+export declare const WIDGET_SPAN: Record<WidgetSize, number>;
+/**
+ * One height for every card, as Shopify has. A single height is what makes the
+ * rows line up no matter which widget a merchant puts where, and it is why
+ * theirs reads as a designed page rather than as an arrangement.
+ */
+export declare const WIDGET_HEIGHT = 280;
+/** The widgets this package draws. */
+export type BuiltInWidgetId = 'website' | 'revenue' | 'regulars' | 'team' | 'hardware' | 'setup' | 'owed' | 'bill' | 'credits' | 'referral' | 'activity';
+/**
+ * Any widget on a board: one of the above, or one a host registered with `registerHostWidget`
+ * (Olive's Wallet). A saved board only ever holds the id, so a host widget needs no change here.
+ */
+export type WidgetId = BuiltInWidgetId | (string & {});
+/** Everything the page has already resolved, handed to every widget. */
+export interface WidgetContext {
+    today: NextUpItem[];
+    nextUpHref: string;
+    /** This business's word for its queue: Orders, Bookings, Stays. */
+    workLabel: string;
+    multiStream: boolean;
+    lowStockCount: number;
+    /** QuickLinks resolves the archetype's own actions; it takes the config. */
+    intentConfig: ResolvedIntentConfig;
+    /** The header's primary action, so the launcher never repeats it. */
+    primaryActionHref: string;
+    /**
+     * The archetype's word for a catalogue item, so the "Add …" tile is not
+     * headed "Add product" for a club whose sidebar says Services.
+     */
+    itemLabel: string;
+    /**
+     * Take payment, which used to be a button in the page header.
+     *
+     * It is a callback rather than an href because it opens a flow in place —
+     * `QuickPaymentLinkModal` writes a one-line invoice and hands back a link to
+     * paste into WhatsApp, which is how most of these actually get collected.
+     * Undefined when the viewer cannot manage finance: it creates a payable.
+     */
+    onTakePayment?: () => void;
+    recents: RecentScreen[];
+    /** What already happened, newest first. Drives the Activity widget. */
+    activity: ActivityItem[];
+    /**
+     * The business's own image, for the Website card's preview.
+     *
+     * `tenant.businessLogo`, not a per-page `seo.ogImage`: the OG image lives on
+     * `PageResponse` and would cost a second request to fetch a thumbnail with,
+     * and a business that has set one has almost always set the other. If a true
+     * per-page social image is wanted here, it is a pages fetch away.
+     */
+    siteImage?: string | null;
+    /** Shown as the link preview's title, the way a share card names a site. */
+    businessName?: string;
+    /**
+     * The backend onboarding checklist. Empty once everything is done, which is
+     * also how the Setup widget knows to take itself off the board.
+     */
+    setupSteps: OnboardingStep[];
+    /**
+     * Whether there is anything to sell. Drives Activity's empty state.
+     *
+     * False only when the catalogue is KNOWN to be empty. A count that has not
+     * arrived, or could not be read, is not zero: see where the home builds it.
+     */
+    hasSellable: boolean;
+    /**
+     * Whether any repeat customer has stopped ordering. Gates the Gone quiet
+     * card. Filled in by the board itself, from the list that card reads, so the
+     * page does not have to ask for it; undefined until that list has answered.
+     */
+    hasQuietRegulars?: boolean;
+    /** The storefront, for the Website widget. */
+    storefrontUrl?: string | null;
+    hasCustomDomain: boolean;
+    /**
+     * Whether the storefront is reachable at all.
+     *
+     * Ahead of "designed" and "has a domain" in the website card's order,
+     * because a shut site cannot be reached however well it is designed or
+     * addressed. It used to be nowhere in this context, and the only control
+     * that opened a site was a one-time modal — dismiss it and the dashboard
+     * offered no route to publishing at all.
+     */
+    isSiteOpen: boolean;
+    hasDesignedSite: boolean;
+    /** Money widgets are absent, not empty, for a member without the grant. */
+    canSeeEarnings: boolean;
+    /**
+     * Whether a payout account is connected. Drives Revenue's empty state: a
+     * business that cannot be paid has no revenue to report and no chart can
+     * say so, but a card can.
+     */
+    hasPayments: boolean;
+    /** A payout account exists but its owner is not yet verified. */
+    needsIdentity?: boolean;
+    /** Whether this viewer may see the roster. Gates the Team widget. */
+    canManageTeam: boolean;
+    /**
+     * Does this business own any machines?
+     *
+     * Gates the Hardware card. A card that spends its life saying "no devices"
+     * teaches people to skip the card, and Hardware's own empty state is where
+     * somebody finds out they can have a till in the first place.
+     */
+    hasHardware: boolean;
+    demo?: {
+        data: DashboardStats;
+        prior: DashboardStats;
+        outstanding: OutstandingInvoices;
+    };
+}
+export interface WidgetDef {
+    id: WidgetId;
+    /** Its name in the gallery. A noun, the way the nav names things. */
+    name: string;
+    /** One line, in the gallery only. Never rendered on the board. */
+    description: string;
+    /** Which classes this widget has actually been drawn for. */
+    sizes: WidgetSize[];
+    defaultSize: WidgetSize;
+    /**
+     * Whether this widget can say anything for this business right now. A
+     * widget with nothing to show is kept OUT of the gallery rather than offered
+     * and then rendering an apology.
+     */
+    available: (ctx: WidgetContext) => boolean;
+    render: (ctx: WidgetContext, size: WidgetSize) => ReactNode;
+    /**
+     * What this widget shows before it has anything, or null when it has
+     * something. Returning an `action` here is how setup reaches the board:
+     * the chore lives in the box that will hold its result. See widget-empty.tsx
+     * for why the two kinds must not be confused.
+     */
+    /**
+     * Destinations this widget already puts on the board, so nothing else has to
+     * say them again.
+     *
+     * THIS EXISTS BECAUSE THE HOME KEPT SAYING THINGS TWICE. "Set up payouts"
+     * was a blocker pinned above Activity AND the Revenue card's whole empty
+     * state; "3 products low on stock" was a blocker AND the Low stock widget.
+     * Both were the same chore, drawn twice, in two different visual languages,
+     * on one screen.
+     *
+     * Deduping by DESTINATION rather than by title is what makes it general: two
+     * surfaces describing one chore will word it differently, but they cannot
+     * point somewhere different and still be the same chore.
+     */
+    covers?: (ctx: WidgetContext) => string[];
+    empty?: (ctx: WidgetContext) => WidgetEmpty | null;
+    /**
+     * A host's widget that joins a business's board without being asked for: it is added after the
+     * built-in defaults, and only while the board has room (`MAX_WIDGETS`) and `available` is true.
+     * A board a merchant has already arranged is left alone; they find it in the gallery.
+     */
+    byDefault?: boolean;
+}
+/** One placed widget. The saved layout is an ordered list of these. */
+export interface PlacedWidget {
+    id: WidgetId;
+    size: WidgetSize;
+}

package/dist/dashboard/home/widgets/types.js

@@ -0,0 +1,10 @@
+const WIDGET_SPAN = {
+  wide: 3,
+  narrow: 2
+};
+const WIDGET_HEIGHT = 280;
+export {
+  WIDGET_HEIGHT,
+  WIDGET_SPAN
+};
+//# sourceMappingURL=types.js.map

package/dist/dashboard/home/widgets/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/types.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { WidgetEmpty } from './widget-empty';\nimport type { NextUpItem } from '../next-up-sources';\nimport type { ResolvedIntentConfig } from '@withpotter/lib/intents/types';\nimport type { RecentScreen } from '../use-recent-screens';\nimport type { DashboardStats, OutstandingInvoices } from '@withpotter/lib/api/types';\nimport type { ActivityItem } from '@withpotter/components/dashboard/activity-feed';\nimport type { OnboardingStep } from '@withpotter/lib/api/types';\n\n/**\n * Two card widths, because Shopify has two, and this board is theirs.\n *\n * Measured off `admin.shopify.com` rather than eyeballed. Their home is a\n * SIX-COLUMN grid with a 20px gap inside a 976px column:\n *\n *   row 1   two cards spanning 3 columns each   478px wide\n *   row 2   three cards spanning 2 columns each 312px wide\n *   every card                                  320px tall\n *\n *   (976 - 5x20) / 6 = 146 per column\n *   span 3 -> 3x146 + 2x20 = 478   span 2 -> 2x146 + 20 = 312\n *\n * So a widget does not pick a pixel width, it picks how many of the six\n * columns it takes, and only two answers are allowed. That is the whole\n * discipline: with two widths and one height, a board cannot be arranged into\n * something that looks broken, and any card can sit in either row.\n *\n * `wide` is the 2-up row, `narrow` is the 3-up row.\n */\nexport type WidgetSize = 'wide' | 'narrow';\n\n/** Columns out of six. */\nexport const WIDGET_SPAN: Record<WidgetSize, number> = {\n  wide: 3,\n  narrow: 2,\n};\n\n/**\n * One height for every card, as Shopify has. A single height is what makes the\n * rows line up no matter which widget a merchant puts where, and it is why\n * theirs reads as a designed page rather than as an arrangement.\n */\nexport const WIDGET_HEIGHT = 280;\n\n/** The widgets this package draws. */\nexport type BuiltInWidgetId =\n  | 'website'\n  | 'revenue'\n  | 'regulars'\n  | 'team'\n  | 'hardware'\n  | 'setup'\n  | 'owed'\n  | 'bill'\n  | 'credits'\n  | 'referral'\n  | 'activity';\n\n/**\n * Any widget on a board: one of the above, or one a host registered with `registerHostWidget`\n * (Olive's Wallet). A saved board only ever holds the id, so a host widget needs no change here.\n */\nexport type WidgetId = BuiltInWidgetId | (string & {});\n\n/** Everything the page has already resolved, handed to every widget. */\nexport interface WidgetContext {\n  today: NextUpItem[];\n  nextUpHref: string;\n  /** This business's word for its queue: Orders, Bookings, Stays. */\n  workLabel: string;\n  multiStream: boolean;\n  lowStockCount: number;\n  /** QuickLinks resolves the archetype's own actions; it takes the config. */\n  intentConfig: ResolvedIntentConfig;\n  /** The header's primary action, so the launcher never repeats it. */\n  primaryActionHref: string;\n  /**\n   * The archetype's word for a catalogue item, so the \"Add …\" tile is not\n   * headed \"Add product\" for a club whose sidebar says Services.\n   */\n  itemLabel: string;\n  /**\n   * Take payment, which used to be a button in the page header.\n   *\n   * It is a callback rather than an href because it opens a flow in place —\n   * `QuickPaymentLinkModal` writes a one-line invoice and hands back a link to\n   * paste into WhatsApp, which is how most of these actually get collected.\n   * Undefined when the viewer cannot manage finance: it creates a payable.\n   */\n  onTakePayment?: () => void;\n  recents: RecentScreen[];\n  /** What already happened, newest first. Drives the Activity widget. */\n  activity: ActivityItem[];\n  /**\n   * The business's own image, for the Website card's preview.\n   *\n   * `tenant.businessLogo`, not a per-page `seo.ogImage`: the OG image lives on\n   * `PageResponse` and would cost a second request to fetch a thumbnail with,\n   * and a business that has set one has almost always set the other. If a true\n   * per-page social image is wanted here, it is a pages fetch away.\n   */\n  siteImage?: string | null;\n  /** Shown as the link preview's title, the way a share card names a site. */\n  businessName?: string;\n  /**\n   * The backend onboarding checklist. Empty once everything is done, which is\n   * also how the Setup widget knows to take itself off the board.\n   */\n  setupSteps: OnboardingStep[];\n  /**\n   * Whether there is anything to sell. Drives Activity's empty state.\n   *\n   * False only when the catalogue is KNOWN to be empty. A count that has not\n   * arrived, or could not be read, is not zero: see where the home builds it.\n   */\n  hasSellable: boolean;\n  /**\n   * Whether any repeat customer has stopped ordering. Gates the Gone quiet\n   * card. Filled in by the board itself, from the list that card reads, so the\n   * page does not have to ask for it; undefined until that list has answered.\n   */\n  hasQuietRegulars?: boolean;\n  /** The storefront, for the Website widget. */\n  storefrontUrl?: string | null;\n  hasCustomDomain: boolean;\n  /**\n   * Whether the storefront is reachable at all.\n   *\n   * Ahead of \"designed\" and \"has a domain\" in the website card's order,\n   * because a shut site cannot be reached however well it is designed or\n   * addressed. It used to be nowhere in this context, and the only control\n   * that opened a site was a one-time modal — dismiss it and the dashboard\n   * offered no route to publishing at all.\n   */\n  isSiteOpen: boolean;\n  hasDesignedSite: boolean;\n  /** Money widgets are absent, not empty, for a member without the grant. */\n  canSeeEarnings: boolean;\n  /**\n   * Whether a payout account is connected. Drives Revenue's empty state: a\n   * business that cannot be paid has no revenue to report and no chart can\n   * say so, but a card can.\n   */\n  hasPayments: boolean;\n  /** A payout account exists but its owner is not yet verified. */\n  needsIdentity?: boolean;\n  /** Whether this viewer may see the roster. Gates the Team widget. */\n  canManageTeam: boolean;\n  /**\n   * Does this business own any machines?\n   *\n   * Gates the Hardware card. A card that spends its life saying \"no devices\"\n   * teaches people to skip the card, and Hardware's own empty state is where\n   * somebody finds out they can have a till in the first place.\n   */\n  hasHardware: boolean;\n  demo?: {\n    data: DashboardStats;\n    prior: DashboardStats;\n    outstanding: OutstandingInvoices;\n  };\n}\n\nexport interface WidgetDef {\n  id: WidgetId;\n  /** Its name in the gallery. A noun, the way the nav names things. */\n  name: string;\n  /** One line, in the gallery only. Never rendered on the board. */\n  description: string;\n  /** Which classes this widget has actually been drawn for. */\n  sizes: WidgetSize[];\n  defaultSize: WidgetSize;\n  /**\n   * Whether this widget can say anything for this business right now. A\n   * widget with nothing to show is kept OUT of the gallery rather than offered\n   * and then rendering an apology.\n   */\n  available: (ctx: WidgetContext) => boolean;\n  render: (ctx: WidgetContext, size: WidgetSize) => ReactNode;\n  /**\n   * What this widget shows before it has anything, or null when it has\n   * something. Returning an `action` here is how setup reaches the board:\n   * the chore lives in the box that will hold its result. See widget-empty.tsx\n   * for why the two kinds must not be confused.\n   */\n  /**\n   * Destinations this widget already puts on the board, so nothing else has to\n   * say them again.\n   *\n   * THIS EXISTS BECAUSE THE HOME KEPT SAYING THINGS TWICE. \"Set up payouts\"\n   * was a blocker pinned above Activity AND the Revenue card's whole empty\n   * state; \"3 products low on stock\" was a blocker AND the Low stock widget.\n   * Both were the same chore, drawn twice, in two different visual languages,\n   * on one screen.\n   *\n   * Deduping by DESTINATION rather than by title is what makes it general: two\n   * surfaces describing one chore will word it differently, but they cannot\n   * point somewhere different and still be the same chore.\n   */\n  covers?: (ctx: WidgetContext) => string[];\n  empty?: (ctx: WidgetContext) => WidgetEmpty | null;\n  /**\n   * A host's widget that joins a business's board without being asked for: it is added after the\n   * built-in defaults, and only while the board has room (`MAX_WIDGETS`) and `available` is true.\n   * A board a merchant has already arranged is left alone; they find it in the gallery.\n   */\n  byDefault?: boolean;\n}\n\n/** One placed widget. The saved layout is an ordered list of these. */\nexport interface PlacedWidget {\n  id: WidgetId;\n  size: WidgetSize;\n}\n"],"mappings":"AAgCO,MAAM,cAA0C;AAAA,EACrD,MAAM;AAAA,EACN,QAAQ;AACV;AAOO,MAAM,gBAAgB;","names":[]}

package/dist/dashboard/home/widgets/use-home-layout.d.ts

@@ -0,0 +1,45 @@
+import type { PlacedWidget, WidgetId, WidgetSize, WidgetContext } from './types';
+/**
+ * FIVE. Two wide over three narrow, and the cap is real rather than implied.
+ *
+ * It used to be implied, and the implication broke twice over: a multi-model
+ * business takes the UNION of its archetypes' defaults, which can run past
+ * five on its own, and Website was then appended on top of whatever that came
+ * to. A shop that also takes bookings opened on six or seven cards — a fourth
+ * card orphaned on the second row, which reads as a layout bug rather than as
+ * a board.
+ *
+ * So the union is taken, then sliced. Order matters because the slice is what
+ * enforces the shape: each archetype's list is already written most-important
+ * first, so the widgets that survive are the ones that businesses running that
+ * combination need most.
+ */
+/**
+ * FIVE widgets, and the add tile lives in whatever cell is still free.
+ *
+ * The board is two wide over three narrow. Defaults fill four of those five, so
+ * the last narrow cell is the entry to the widget library — put a fifth widget
+ * there and the tile steps aside, because at that point the board is what the
+ * merchant asked for and an empty invitation beside it is clutter.
+ *
+ * This is a CAP, not a target: `defaultLayout` slices to it, and the gallery
+ * stops offering once five are placed. See `home-widgets.tsx`.
+ */
+export declare const MAX_WIDGETS = 5;
+/** Two wide, then narrow. The grid's shape, as a rule. */
+export declare function sizeForIndex(index: number): WidgetSize;
+export declare function defaultLayout(ctx: WidgetContext): PlacedWidget[];
+export declare function useHomeLayout(accountId: string | undefined, tenantSlug: string | undefined, ctx: WidgetContext): {
+    widgets: {
+        size: WidgetSize;
+        id: WidgetId;
+    }[];
+    placed: Set<WidgetId>;
+    add: (id: WidgetId, size: WidgetSize) => void;
+    remove: (id: WidgetId) => void;
+    resize: (id: WidgetId, size: WidgetSize) => void;
+    move: (id: WidgetId, toIndex: number) => void;
+    reset: () => void;
+    /** True once this merchant has arranged their own board. */
+    customised: boolean;
+};