@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1,40 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Bar({ className }) {
+  return /* @__PURE__ */ jsx("span", { className: `block h-1 rounded-full ${className}` });
+}
+const ART = "relative";
+function ThemeMiniature() {
+  return /* @__PURE__ */ jsxs("div", { className: `${ART} h-[136px] w-[168px]`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "surface-pinned absolute bottom-4 right-[62px] h-[104px] w-[86px] -rotate-6 overflow-clip shadow-lg transition-transform duration-[var(--motion-slow)] ease-out group-hover/card:-translate-x-2.5 group-hover/card:-rotate-12", children: [
+      /* @__PURE__ */ jsx("span", { className: "block h-[34px] bg-emerald-500/90" }),
+      /* @__PURE__ */ jsx(Bar, { className: "mx-2 mt-2 w-3/4 bg-[var(--border-strong)]" }),
+      /* @__PURE__ */ jsx(Bar, { className: "mx-2 mt-1 w-1/2 bg-[var(--border-default)]" }),
+      /* @__PURE__ */ jsx("span", { className: "mx-2 mt-2 block h-3 w-9 rounded bg-[var(--border-default)]" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "surface-pinned absolute bottom-0 right-0 h-[116px] w-[94px] rotate-3 overflow-clip shadow-xl transition-transform duration-[var(--motion-slow)] ease-out group-hover/card:-translate-y-1.5 group-hover/card:rotate-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "block h-[38px] bg-sky-500/90" }),
+      /* @__PURE__ */ jsx(Bar, { className: "mx-2 mt-2 w-2/3 bg-[var(--border-strong)]" }),
+      /* @__PURE__ */ jsx(Bar, { className: "mx-2 mt-1 w-2/5 bg-[var(--border-default)]" }),
+      /* @__PURE__ */ jsx("span", { className: "mx-2 mt-2 block h-3 w-10 rounded bg-[var(--border-default)]" })
+    ] })
+  ] });
+}
+function Pointer({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": true, className, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M5 2.5 19.5 11.2l-6.4 1.3-2.6 6.1z",
+      fill: "var(--text-primary)",
+      stroke: "var(--bg-base)",
+      strokeWidth: "1.5",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+export {
+  Bar,
+  Pointer,
+  ThemeMiniature
+};
+//# sourceMappingURL=widget-art.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/widget-art.tsx"],"sourcesContent":["'use client';\n\n/**\n * The drawn card art, moved out of the setup rail.\n *\n * It was built for \"Finish setting up\", a panel that no longer exists: the four\n * chores it held now live as the EMPTY STATES of the widgets that will show\n * their result, so the box a merchant fixes is the box that then fills with\n * their data. The art comes with them, which is also the answer to why our\n * cards looked empty beside Shopify's — theirs carry a picture and ours carried\n * a header rule and two rows.\n *\n * Everything here is drawn from our own tokens. It replaced eleven of Shopify's\n * admin PNGs that had been shipping on staging; see the history of this file.\n *\n * NOTHING HERE CARRIES A FIGURE. Three miniatures did: a product tile with a\n * price, a payout with an amount and an account's last four digits, and a\n * regular last seen \"72d ago\". They were drawings, but on a home that reports a\n * business's money an invented amount beside a real one is a number the\n * merchant has to work out is not theirs. They are gone, and nothing added to\n * this file may show an amount, a count, a date or an account.\n */\n\n/** Text, at miniature scale. The only honest way to draw a word this small. */\nexport function Bar({ className }: { className: string }) {\n  return <span className={`block h-1 rounded-full ${className}`} />;\n}\n\n/**\n * SIZING, learned the hard way.\n *\n * The action sits bottom-LEFT and the art bottom-RIGHT, inside a 312px card\n * with 16px padding. The widest action (\"Set up payments\") ends around x=144,\n * so art wider than ~168px runs under its own button. The first pass drew these\n * at ~200px and the payout miniature sat half-hidden behind the button.\n *\n * The colour block is also deliberately SMALL. A 46px fill inside a 124px tile\n * stops reading as \"a photo goes here\" and starts reading as coloured paper.\n * The object is what carries the meaning; the colour is the field it stands on.\n *\n * NO MARGINS ANY MORE. These used to be nudged inward off the card's corner\n * with `mb-3 mr-2`, which was correct when the art sat inside the padding box.\n * It does not: `HomeCardMedia` anchors it bottom-right in a box that is LARGER\n * than the card, so the bottom-right corner of every piece runs past the edge\n * and is cropped by the card's own radius. Shopify's art is composed to\n * overflow, never to fit, and a margin here would put the fitting back.\n */\nconst ART = 'relative';\n\n/** Two pages to pick between. They spread apart under the cursor. */\nexport function ThemeMiniature() {\n  return (\n    <div className={`${ART} h-[136px] w-[168px]`}>\n      <div className=\"surface-pinned absolute bottom-4 right-[62px] h-[104px] w-[86px] -rotate-6 overflow-clip shadow-lg transition-transform duration-[var(--motion-slow)] ease-out group-hover/card:-translate-x-2.5 group-hover/card:-rotate-12\">\n        <span className=\"block h-[34px] bg-emerald-500/90\" />\n        <Bar className=\"mx-2 mt-2 w-3/4 bg-[var(--border-strong)]\" />\n        <Bar className=\"mx-2 mt-1 w-1/2 bg-[var(--border-default)]\" />\n        <span className=\"mx-2 mt-2 block h-3 w-9 rounded bg-[var(--border-default)]\" />\n      </div>\n      <div className=\"surface-pinned absolute bottom-0 right-0 h-[116px] w-[94px] rotate-3 overflow-clip shadow-xl transition-transform duration-[var(--motion-slow)] ease-out group-hover/card:-translate-y-1.5 group-hover/card:rotate-0\">\n        <span className=\"block h-[38px] bg-sky-500/90\" />\n        <Bar className=\"mx-2 mt-2 w-2/3 bg-[var(--border-strong)]\" />\n        <Bar className=\"mx-2 mt-1 w-2/5 bg-[var(--border-default)]\" />\n        <span className=\"mx-2 mt-2 block h-3 w-10 rounded bg-[var(--border-default)]\" />\n      </div>\n    </div>\n  );\n}\n\n/** A pointer, drawn. What it replaces was a photograph of one. */\nexport function Pointer({ className }: { className?: string }) {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden className={className}>\n      <path\n        d=\"M5 2.5 19.5 11.2l-6.4 1.3-2.6 6.1z\"\n        fill=\"var(--text-primary)\"\n        stroke=\"var(--bg-base)\"\n        strokeWidth=\"1.5\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\n/**\n * Whether any of the given backend onboarding steps is completed. The backend\n * is the source of truth for progress; the boolean props below (hasProduct etc.)\n * corroborate it so a card still reads done even if a step key is missing.\n */\n"],"mappings":";AAyBS,cA4BH,YA5BG;AADF,SAAS,IAAI,EAAE,UAAU,GAA0B;AACxD,SAAO,oBAAC,UAAK,WAAW,0BAA0B,SAAS,IAAI;AACjE;AAqBA,MAAM,MAAM;AAGL,SAAS,iBAAiB;AAC/B,SACE,qBAAC,SAAI,WAAW,GAAG,GAAG,wBACpB;AAAA,yBAAC,SAAI,WAAU,gOACb;AAAA,0BAAC,UAAK,WAAU,oCAAmC;AAAA,MACnD,oBAAC,OAAI,WAAU,6CAA4C;AAAA,MAC3D,oBAAC,OAAI,WAAU,8CAA6C;AAAA,MAC5D,oBAAC,UAAK,WAAU,8DAA6D;AAAA,OAC/E;AAAA,IACA,qBAAC,SAAI,WAAU,wNACb;AAAA,0BAAC,UAAK,WAAU,gCAA+B;AAAA,MAC/C,oBAAC,OAAI,WAAU,6CAA4C;AAAA,MAC3D,oBAAC,OAAI,WAAU,8CAA6C;AAAA,MAC5D,oBAAC,UAAK,WAAU,+DAA8D;AAAA,OAChF;AAAA,KACF;AAEJ;AAGO,SAAS,QAAQ,EAAE,UAAU,GAA2B;AAC7D,SACE,oBAAC,SAAI,SAAQ,aAAY,eAAW,MAAC,WACnC;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,gBAAe;AAAA;AAAA,EACjB,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+/**
+ * What a widget shows before it has anything, and there are exactly two kinds.
+ *
+ * THIS IS THE DISTINCTION THAT KEEPS THE IDEA FROM PRODUCING A SAD PAGE. Moving
+ * setup into the widgets is right — the box you fix becomes the box that fills
+ * with your data, which no separate "Finish setting up" panel can ever say. But
+ * a board of five identical grey apologies would be worse than the panel it
+ * replaced, and the reason is that not every empty box is a task.
+ *
+ *   action   something a button can fix. "Add your first product." Gets the
+ *            full treatment: a title, one sentence, a real button, and the art.
+ *            It is an INVITATION and it looks like the setup card it replaced.
+ *
+ *   waiting  nothing to show, and no button changes that. Revenue before the
+ *            first sale is this: no control on this card can make a sale
+ *            happen, so offering one would be a fake CTA. Quiet, centred, no
+ *            button, no art.
+ *
+ * Getting these two backwards is the whole risk of the pattern.
+ */
+export type WidgetEmpty = {
+    kind: 'action';
+    title: string;
+    body: string;
+    /** The verb on the button. */
+    action: string;
+    href: string;
+    /** Drawn art, laid out LARGER than the card and cropped by it. */
+    art?: ReactNode;
+} | {
+    kind: 'waiting';
+    title: string;
+    body?: string;
+};
+export declare function WidgetEmptyState({ empty }: {
+    empty: WidgetEmpty;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,46 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HomeCardAction, HomeCardMedia } from "../home-card";
+import { PanelAction } from "../panel";
+function WidgetEmptyState({ empty }) {
+  if (empty.kind === "waiting") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center px-6 text-center", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-md font-medium text-[var(--text-secondary)]", children: empty.title }),
+      empty.body && /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-[34ch] text-sm leading-relaxed text-[var(--text-tertiary)]", children: empty.body })
+    ] });
+  }
+  return (
+    /**
+     * Shopify's setup card, anatomically.
+     *
+     * Their `[data-onboarding-media]` is `position: absolute; inset: -16px` —
+     * one padding step LARGER than the card on every side — cropped by the
+     * card's own `overflow: clip`. That is the whole reason their illustrations
+     * read as photographs of objects rather than as icons: nothing is composed
+     * to fit, everything is composed to overflow, and the card decides what you
+     * see of it. An illustration drawn to sit politely inside its box always
+     * reads as a placeholder, however good the drawing is.
+     *
+     * The action is absolutely pinned rather than pushed down with `mt-auto`,
+     * which is also theirs and is worth keeping: the button's baseline must not
+     * depend on how long the description ran, so a two-line card and a
+     * four-line card put their buttons on the same line and the row reads as a
+     * row instead of as three cards that happen to be adjacent.
+     *
+     * `pb-16` on the content reserves that button's lane, so a long
+     * description cannot run underneath it.
+     */
+    /* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-col p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col gap-1 pb-16", children: [
+        /* @__PURE__ */ jsx("h3", { className: "pr-8 text-lg font-semibold text-[var(--text-primary)]", children: empty.title }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-[30ch] text-sm leading-5 text-[var(--text-tertiary)]", children: empty.body })
+      ] }),
+      empty.art && /* @__PURE__ */ jsx(HomeCardMedia, { children: empty.art }),
+      /* @__PURE__ */ jsx(HomeCardAction, { children: /* @__PURE__ */ jsx(PanelAction, { href: empty.href, children: /* @__PURE__ */ jsx("span", { className: "after:absolute after:inset-0", children: empty.action }) }) })
+    ] })
+  );
+}
+export {
+  WidgetEmptyState
+};
+//# sourceMappingURL=widget-empty.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/widget-empty.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { HomeCardAction, HomeCardMedia } from '../home-card';\nimport { PanelAction } from '../panel';\n\n/**\n * What a widget shows before it has anything, and there are exactly two kinds.\n *\n * THIS IS THE DISTINCTION THAT KEEPS THE IDEA FROM PRODUCING A SAD PAGE. Moving\n * setup into the widgets is right — the box you fix becomes the box that fills\n * with your data, which no separate \"Finish setting up\" panel can ever say. But\n * a board of five identical grey apologies would be worse than the panel it\n * replaced, and the reason is that not every empty box is a task.\n *\n *   action   something a button can fix. \"Add your first product.\" Gets the\n *            full treatment: a title, one sentence, a real button, and the art.\n *            It is an INVITATION and it looks like the setup card it replaced.\n *\n *   waiting  nothing to show, and no button changes that. Revenue before the\n *            first sale is this: no control on this card can make a sale\n *            happen, so offering one would be a fake CTA. Quiet, centred, no\n *            button, no art.\n *\n * Getting these two backwards is the whole risk of the pattern.\n */\n\nexport type WidgetEmpty =\n  | {\n      kind: 'action';\n      title: string;\n      body: string;\n      /** The verb on the button. */\n      action: string;\n      href: string;\n      /** Drawn art, laid out LARGER than the card and cropped by it. */\n      art?: ReactNode;\n    }\n  | { kind: 'waiting'; title: string; body?: string };\n\nexport function WidgetEmptyState({ empty }: { empty: WidgetEmpty }) {\n  if (empty.kind === 'waiting') {\n    return (\n      <div className=\"flex h-full flex-col items-center justify-center px-6 text-center\">\n        <p className=\"text-md font-medium text-[var(--text-secondary)]\">\n          {empty.title}\n        </p>\n        {empty.body && (\n          <p className=\"mt-1 max-w-[34ch] text-sm leading-relaxed text-[var(--text-tertiary)]\">\n            {empty.body}\n          </p>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    /**\n     * Shopify's setup card, anatomically.\n     *\n     * Their `[data-onboarding-media]` is `position: absolute; inset: -16px` —\n     * one padding step LARGER than the card on every side — cropped by the\n     * card's own `overflow: clip`. That is the whole reason their illustrations\n     * read as photographs of objects rather than as icons: nothing is composed\n     * to fit, everything is composed to overflow, and the card decides what you\n     * see of it. An illustration drawn to sit politely inside its box always\n     * reads as a placeholder, however good the drawing is.\n     *\n     * The action is absolutely pinned rather than pushed down with `mt-auto`,\n     * which is also theirs and is worth keeping: the button's baseline must not\n     * depend on how long the description ran, so a two-line card and a\n     * four-line card put their buttons on the same line and the row reads as a\n     * row instead of as three cards that happen to be adjacent.\n     *\n     * `pb-16` on the content reserves that button's lane, so a long\n     * description cannot run underneath it.\n     */\n    <div className=\"relative flex h-full flex-col p-4\">\n      {/* z-10: above the art, below the action. */}\n      <div className=\"relative z-10 flex flex-col gap-1 pb-16\">\n        {/* `pr-8` clears the dismiss control's corner, exactly as their\n            `padding-inline-end: var(--p-space-800)` does. */}\n        <h3 className=\"pr-8 text-lg font-semibold text-[var(--text-primary)]\">\n          {empty.title}\n        </h3>\n        <p className=\"max-w-[30ch] text-sm leading-5 text-[var(--text-tertiary)]\">\n          {empty.body}\n        </p>\n      </div>\n\n      {empty.art && <HomeCardMedia>{empty.art}</HomeCardMedia>}\n\n      <HomeCardAction>\n        {/* The whole card is the target, via a stretched link, so the hit area\n            is the card and there is still exactly one link and one accessible\n            name — which is how Shopify does it too: their entire card is a\n            `<button>` and the visible CTA is the `<a>` inside it. */}\n        {/* `PanelAction` is the one way a card draws its primary action; the\n            stretched pseudo-element is this card's own, because the whole card\n            is the target here and is not everywhere. */}\n        <PanelAction href={empty.href}>\n          <span className=\"after:absolute after:inset-0\">{empty.action}</span>\n        </PanelAction>\n      </HomeCardAction>\n    </div>\n  );\n}\n"],"mappings":";AA2CM,SACE,KADF;AAxCN,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,mBAAmB;AAoCrB,SAAS,iBAAiB,EAAE,MAAM,GAA2B;AAClE,MAAI,MAAM,SAAS,WAAW;AAC5B,WACE,qBAAC,SAAI,WAAU,qEACb;AAAA,0BAAC,OAAE,WAAU,oDACV,gBAAM,OACT;AAAA,MACC,MAAM,QACL,oBAAC,OAAE,WAAU,yEACV,gBAAM,MACT;AAAA,OAEJ;AAAA,EAEJ;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAqBE,qBAAC,SAAI,WAAU,qCAEb;AAAA,2BAAC,SAAI,WAAU,2CAGb;AAAA,4BAAC,QAAG,WAAU,yDACX,gBAAM,OACT;AAAA,QACA,oBAAC,OAAE,WAAU,8DACV,gBAAM,MACT;AAAA,SACF;AAAA,MAEC,MAAM,OAAO,oBAAC,iBAAe,gBAAM,KAAI;AAAA,MAExC,oBAAC,kBAQC,8BAAC,eAAY,MAAM,MAAM,MACvB,8BAAC,UAAK,WAAU,gCAAgC,gBAAM,QAAO,GAC/D,GACF;AAAA,OACF;AAAA;AAEJ;","names":[]}

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

@@ -0,0 +1,19 @@
+/**
+ * The `narrow` widget: one label, one figure, one destination.
+ *
+ * A small widget that tries to hold a figure AND a series AND a delta is a wide
+ * widget that has been squeezed, which is the failure mode every resizable
+ * dashboard produces. This one holds a number and where to go about it, and
+ * that is the whole contract of the size class.
+ *
+ * Composes `Panel`, which is the home's one card chrome. This hand-rolled
+ * `surface` and its own padding and heading before, which is how a page ends up
+ * with four container idioms that no two of agree.
+ */
+export declare function WidgetFigure({ label, value, href, tone, }: {
+    label: string;
+    value: string;
+    href?: string;
+    /** `warn` is for a figure you are meant to act on, not merely read. */
+    tone?: 'plain' | 'warn';
+}): import("react").JSX.Element;

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

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Panel } from "../panel";
+function WidgetFigure({
+  label,
+  value,
+  href,
+  tone = "plain"
+}) {
+  return /* @__PURE__ */ jsx(
+    Panel,
+    {
+      title: label,
+      action: href ? { label: "Open", href } : void 0,
+      className: "h-full",
+      bodyClassName: "flex flex-col justify-end",
+      children: /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: `text-3xl font-semibold leading-none tracking-[-0.02em] tabular-nums ${tone === "warn" ? "text-[var(--warning)]" : "text-[var(--text-primary)]"}`,
+          children: value
+        }
+      )
+    }
+  );
+}
+export {
+  WidgetFigure
+};
+//# sourceMappingURL=widget-figure.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/widget-figure.tsx"],"sourcesContent":["'use client';\n\nimport { Panel } from '../panel';\n\n/**\n * The `narrow` widget: one label, one figure, one destination.\n *\n * A small widget that tries to hold a figure AND a series AND a delta is a wide\n * widget that has been squeezed, which is the failure mode every resizable\n * dashboard produces. This one holds a number and where to go about it, and\n * that is the whole contract of the size class.\n *\n * Composes `Panel`, which is the home's one card chrome. This hand-rolled\n * `surface` and its own padding and heading before, which is how a page ends up\n * with four container idioms that no two of agree.\n */\nexport function WidgetFigure({\n  label,\n  value,\n  href,\n  tone = 'plain',\n}: {\n  label: string;\n  value: string;\n  href?: string;\n  /** `warn` is for a figure you are meant to act on, not merely read. */\n  tone?: 'plain' | 'warn';\n}) {\n  return (\n    <Panel\n      title={label}\n      action={href ? { label: 'Open', href } : undefined}\n      className=\"h-full\"\n      bodyClassName=\"flex flex-col justify-end\"\n    >\n      <p\n        className={`text-3xl font-semibold leading-none tracking-[-0.02em] tabular-nums ${\n          tone === 'warn'\n            ? 'text-[var(--warning)]'\n            : 'text-[var(--text-primary)]'\n        }`}\n      >\n        {value}\n      </p>\n    </Panel>\n  );\n}\n"],"mappings":";AAmCM;AAjCN,SAAS,aAAa;AAcf,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,QAAQ,OAAO,EAAE,OAAO,QAAQ,KAAK,IAAI;AAAA,MACzC,WAAU;AAAA,MACV,eAAc;AAAA,MAEd;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,uEACT,SAAS,SACL,0BACA,4BACN;AAAA,UAEC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react';
+/**
+ * A placed widget: the card, and the control that moves it.
+ *
+ * THE CARD IS `HomeCard` AND IS DRAWN ONCE, HERE. Every widget used to bring
+ * its own `surface`, which meant the board's look was a property of six leaf
+ * components agreeing with each other. Now the leaves render content and this
+ * renders the card, so changing how the board looks is one file.
+ *
+ * THE AFFORDANCE IS INVISIBLE AT REST, and the numbers are Shopify's: their
+ * dismiss control is 32px square, `opacity: 0`, fading in over
+ * `100ms cubic-bezier(0.25, 0.1, 0.25, 1)` on card hover, with `background` and
+ * `box-shadow` moving on a slower 150ms. Two speeds on one control is not an
+ * oversight — the thing appearing should beat the thing it does, or the hover
+ * feedback lands before you can see what you are hovering.
+ *
+ * A board covered in edit chrome reads as a settings screen, and the home is
+ * not one. Ours also reveals on `focus-within`, so the controls exist for a
+ * keyboard, and the reveal is unconditional there because a keyboard has no
+ * pointer to hover with.
+ *
+ * IT FLOATS ON THE OUTER CORNER rather than sitting inside the card, and this
+ * is our one deliberate departure from their anatomy. Shopify's cards carry no
+ * top-right link, so their dismiss can live inside the card at inset 10px.
+ * Ours do — a list widget's "View all" is exactly there — and a control that
+ * lands on top of a link is worse than one that sits a few pixels outside the
+ * corner. It also borrows iOS's minus badge, which sits in the same place for
+ * the same reason.
+ *
+ * NO EDIT MODE, AND NO REMOVE. Shopify has no mode, and a mode is a thing to
+ * discover, enter and leave before anything can happen. A card can be moved
+ * and nothing else: John, 2026-10-11, *"we shouldn't have that option"* — the
+ * home is the one place every business looks first, and a card you dismissed
+ * by accident was a card you could not find again.
+ *
+ * EVERY CARD IS 320px, as on Shopify, and the height is set inline as theirs
+ * is. That is not decoration: you cannot transition to or from `auto`, so a
+ * board that animates its cards has to measure and pin them.
+ */
+export declare function WidgetFrame({ children, onMove, name, }: {
+    children: ReactNode;
+    /**
+     * Reorder by one place. A board that only answers to a pointer is a board
+     * half the team cannot arrange — and drag is the one interaction with no
+     * keyboard equivalent unless it is given one deliberately.
+     */
+    onMove: (delta: -1 | 1) => void;
+    /** Names the control for assistive tech: "Move Performance". */
+    name: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,38 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GripVertical } from "lucide-react";
+import { HomeCard } from "../home-card";
+import { WIDGET_HEIGHT } from "./types";
+function WidgetFrame({
+  children,
+  onMove,
+  name
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "group/widget relative", style: { height: WIDGET_HEIGHT }, children: [
+    /* @__PURE__ */ jsx(HomeCard, { children }),
+    /* @__PURE__ */ jsx("div", { className: "surface-pinned absolute -right-2 -top-2 z-30 flex items-center gap-0.5 p-0.5 opacity-0 transition-opacity duration-[var(--motion-instant)] ease-[cubic-bezier(0.25,0.1,0.25,1)] focus-within:opacity-100 group-hover/widget:opacity-100", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-card-control": true,
+        "aria-label": `Move ${name}. Use the left and right arrow keys.`,
+        onKeyDown: (e) => {
+          if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+            e.preventDefault();
+            onMove(-1);
+          }
+          if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+            e.preventDefault();
+            onMove(1);
+          }
+        },
+        className: "grid h-6 w-6 cursor-grab place-items-center rounded-md text-[var(--text-tertiary)] transition-[background-color,color] duration-[var(--motion-fast)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)] active:cursor-grabbing",
+        children: /* @__PURE__ */ jsx(GripVertical, {})
+      }
+    ) })
+  ] });
+}
+export {
+  WidgetFrame
+};
+//# sourceMappingURL=widget-frame.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/widget-frame.tsx"],"sourcesContent":["'use client';\n\nimport { GripVertical } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { HomeCard } from '../home-card';\nimport { WIDGET_HEIGHT } from './types';\n\n/**\n * A placed widget: the card, and the control that moves it.\n *\n * THE CARD IS `HomeCard` AND IS DRAWN ONCE, HERE. Every widget used to bring\n * its own `surface`, which meant the board's look was a property of six leaf\n * components agreeing with each other. Now the leaves render content and this\n * renders the card, so changing how the board looks is one file.\n *\n * THE AFFORDANCE IS INVISIBLE AT REST, and the numbers are Shopify's: their\n * dismiss control is 32px square, `opacity: 0`, fading in over\n * `100ms cubic-bezier(0.25, 0.1, 0.25, 1)` on card hover, with `background` and\n * `box-shadow` moving on a slower 150ms. Two speeds on one control is not an\n * oversight — the thing appearing should beat the thing it does, or the hover\n * feedback lands before you can see what you are hovering.\n *\n * A board covered in edit chrome reads as a settings screen, and the home is\n * not one. Ours also reveals on `focus-within`, so the controls exist for a\n * keyboard, and the reveal is unconditional there because a keyboard has no\n * pointer to hover with.\n *\n * IT FLOATS ON THE OUTER CORNER rather than sitting inside the card, and this\n * is our one deliberate departure from their anatomy. Shopify's cards carry no\n * top-right link, so their dismiss can live inside the card at inset 10px.\n * Ours do — a list widget's \"View all\" is exactly there — and a control that\n * lands on top of a link is worse than one that sits a few pixels outside the\n * corner. It also borrows iOS's minus badge, which sits in the same place for\n * the same reason.\n *\n * NO EDIT MODE, AND NO REMOVE. Shopify has no mode, and a mode is a thing to\n * discover, enter and leave before anything can happen. A card can be moved\n * and nothing else: John, 2026-10-11, *\"we shouldn't have that option\"* — the\n * home is the one place every business looks first, and a card you dismissed\n * by accident was a card you could not find again.\n *\n * EVERY CARD IS 320px, as on Shopify, and the height is set inline as theirs\n * is. That is not decoration: you cannot transition to or from `auto`, so a\n * board that animates its cards has to measure and pin them.\n */\nexport function WidgetFrame({\n  children,\n  onMove,\n  name,\n}: {\n  children: ReactNode;\n  /**\n   * Reorder by one place. A board that only answers to a pointer is a board\n   * half the team cannot arrange — and drag is the one interaction with no\n   * keyboard equivalent unless it is given one deliberately.\n   */\n  onMove: (delta: -1 | 1) => void;\n  /** Names the control for assistive tech: \"Move Performance\". */\n  name: string;\n}) {\n  return (\n    <div className=\"group/widget relative\" style={{ height: WIDGET_HEIGHT }}>\n      <HomeCard>{children}</HomeCard>\n\n      {/* `z-30` clears the card's own lifted `z-20`, so the controls stay in\n          front of the card they act on while it is raised. */}\n      <div className=\"surface-pinned absolute -right-2 -top-2 z-30 flex items-center gap-0.5 p-0.5 opacity-0 transition-opacity duration-[var(--motion-instant)] ease-[cubic-bezier(0.25,0.1,0.25,1)] focus-within:opacity-100 group-hover/widget:opacity-100\">\n        {/* THE HANDLE IS THE KEYBOARD'S DRAG. The whole card is draggable with\n            a pointer, which a keyboard cannot express at all — so the grip is\n            focusable and the arrow keys move the card one place either way.\n            It is also the only visible sign that a card can be moved, which a\n            pointer-only affordance never advertises. */}\n        <button\n          type=\"button\"\n          data-card-control\n          aria-label={`Move ${name}. Use the left and right arrow keys.`}\n          onKeyDown={(e) => {\n            if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n              e.preventDefault();\n              onMove(-1);\n            }\n            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n              e.preventDefault();\n              onMove(1);\n            }\n          }}\n          className=\"grid h-6 w-6 cursor-grab place-items-center rounded-md text-[var(--text-tertiary)] transition-[background-color,color] duration-[var(--motion-fast)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)] active:cursor-grabbing\"\n        >\n          <GripVertical />\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA6DI,SACE,KADF;AA3DJ,SAAS,oBAAoB;AAE7B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAwCvB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAUG;AACD,SACE,qBAAC,SAAI,WAAU,yBAAwB,OAAO,EAAE,QAAQ,cAAc,GACpE;AAAA,wBAAC,YAAU,UAAS;AAAA,IAIpB,oBAAC,SAAI,WAAU,2OAMb;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,qBAAiB;AAAA,QACjB,cAAY,QAAQ,IAAI;AAAA,QACxB,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AAChD,cAAE,eAAe;AACjB,mBAAO,EAAE;AAAA,UACX;AACA,cAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa;AACnD,cAAE,eAAe;AACjB,mBAAO,CAAC;AAAA,UACV;AAAA,QACF;AAAA,QACA,WAAU;AAAA,QAEV,8BAAC,gBAAa;AAAA;AAAA,IAChB,GACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,45 @@
+import type { WidgetContext, WidgetDef, WidgetSize } from './types';
+/**
+ * The gallery, in iOS's shape rather than Cloudflare's.
+ *
+ * Cloudflare's `+` opens a list of names. iOS opens a gallery that renders the
+ * REAL WIDGET WITH YOUR REAL DATA at each size it offers, and that difference is
+ * most of why one feels considered and the other feels like a config screen. A
+ * merchant deciding whether "Performance" is worth the space cannot answer that
+ * from the word "Performance"; they can answer it instantly from seeing their
+ * own revenue in the box.
+ *
+ * So every card here calls the widget's own `render` with the live context. It
+ * is the same code path the board uses, scaled down and made inert, which also
+ * means a preview can never drift from the thing it previews.
+ *
+ * Widgets whose `available` is false never reach this list. Offering something
+ * that would render an apology is worse than not offering it.
+ *
+ * IT IS A GRID OF CARDS, NOT A LIST OF SECTIONS. It was the latter: each entry
+ * a full-height 280px preview stacked vertically with a bare heading above it,
+ * so the dialog scrolled for a page and a half and nothing in it looked like a
+ * card you were choosing. The preview was the only visual, and it was
+ * unframed — a widget's content floating on the dialog's own ground, which is
+ * why it read as dark and unfinished rather than as a catalogue.
+ *
+ * So each entry now wears `HomeCard`: the same surface, radius, shadow and
+ * hover lift the board itself uses. Picking from the gallery should look like
+ * picking up the thing that lands on the board, and the cheapest way to
+ * guarantee that is to use the same chrome rather than a second one drawn to
+ * resemble it.
+ *
+ * THE PREVIEW IS SCALED, NOT CROPPED. A 280px widget shown at 280px in a
+ * two-up grid makes the dialog enormous; showing its top third instead would
+ * cut every card off mid-sentence. `transform: scale` keeps the whole widget
+ * visible and in proportion — you are looking at a small version of the real
+ * thing, which is what a thumbnail is supposed to be.
+ */
+export declare function WidgetGallery({ open, onOpenChange, candidates, ctx, onAdd, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Available, and not already on the board. */
+    candidates: WidgetDef[];
+    ctx: WidgetContext;
+    onAdd: (def: WidgetDef, size: WidgetSize) => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,108 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Plus, Check } from "lucide-react";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription
+} from "@withpotter/ui-kit";
+import { WidgetEmptyState } from "./widget-empty";
+import { WIDGET_HEIGHT } from "./types";
+import { HomeCard } from "../home-card";
+const PREVIEW_WIDTH = 300;
+const SIZE_LABEL = {
+  wide: "Wide",
+  narrow: "Narrow"
+};
+function WidgetGallery({
+  open,
+  onOpenChange,
+  candidates,
+  ctx,
+  onAdd
+}) {
+  const [sizes, setSizes] = useState({});
+  const [added, setAdded] = useState([]);
+  const sizeFor = (d) => sizes[d.id] ?? d.defaultSize;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[min(84vh,720px)] max-w-3xl overflow-y-auto", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Add to home" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Shown with this business\u2019s own figures." })
+    ] }),
+    candidates.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-10 text-center text-sm text-[var(--text-tertiary)]", children: "Everything available is already on your home." }) : /* @__PURE__ */ jsx("div", { className: "mt-2 grid grid-cols-1 gap-4 sm:grid-cols-2", children: candidates.map((d) => {
+      const size = sizeFor(d);
+      const isAdded = added.includes(d.id);
+      const natural = size === "wide" ? 478 : 312;
+      const scale = PREVIEW_WIDTH / natural;
+      return /* @__PURE__ */ jsx(HomeCard, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative shrink-0 overflow-hidden border-b border-[var(--border-subtle)]",
+            style: { height: WIDGET_HEIGHT * scale },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                inert: "",
+                "aria-hidden": true,
+                className: "pointer-events-none origin-top-left",
+                style: {
+                  width: natural,
+                  height: WIDGET_HEIGHT,
+                  transform: `scale(${scale})`
+                },
+                children: /* @__PURE__ */ jsx("div", { className: "h-full [&>*]:h-full", children: d.empty?.(ctx) ? /* @__PURE__ */ jsx(WidgetEmptyState, { empty: d.empty(ctx) }) : d.render(ctx, size) })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3 p-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-md font-medium text-[var(--text-primary)]", children: d.name }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: d.description })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between gap-2", children: [
+            d.sizes.length > 1 ? /* @__PURE__ */ jsx("div", { className: "surface-pinned flex items-center gap-0.5 p-0.5", children: d.sizes.map((sz) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setSizes((m) => ({ ...m, [d.id]: sz })),
+                "aria-pressed": sz === size,
+                className: `rounded-md px-2 py-1 text-2xs font-medium transition-colors ${sz === size ? "bg-[var(--interactive-hover)] text-[var(--text-primary)]" : "text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"}`,
+                children: SIZE_LABEL[sz]
+              },
+              sz
+            )) }) : /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: isAdded ? "secondary" : "primary",
+                disabled: isAdded,
+                onClick: () => {
+                  onAdd(d, size);
+                  setAdded((a) => [...a, d.id]);
+                },
+                children: isAdded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Check, {}),
+                  "Added"
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Plus, {}),
+                  "Add"
+                ] })
+              }
+            )
+          ] })
+        ] })
+      ] }) }, d.id);
+    }) })
+  ] }) });
+}
+export {
+  WidgetGallery
+};
+//# sourceMappingURL=widget-gallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/widget-gallery.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Plus, Check } from 'lucide-react';\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n} from '@withpotter/ui-kit';\nimport type { WidgetContext, WidgetDef, WidgetSize } from './types';\nimport { WidgetEmptyState } from './widget-empty';\nimport { WIDGET_HEIGHT } from './types';\nimport { HomeCard } from '../home-card';\n\n/** How wide a preview window is in the two-up grid, in CSS px. */\nconst PREVIEW_WIDTH = 300;\n\nconst SIZE_LABEL: Record<WidgetSize, string> = {\n  wide: 'Wide',\n  narrow: 'Narrow',\n};\n\n/**\n * The gallery, in iOS's shape rather than Cloudflare's.\n *\n * Cloudflare's `+` opens a list of names. iOS opens a gallery that renders the\n * REAL WIDGET WITH YOUR REAL DATA at each size it offers, and that difference is\n * most of why one feels considered and the other feels like a config screen. A\n * merchant deciding whether \"Performance\" is worth the space cannot answer that\n * from the word \"Performance\"; they can answer it instantly from seeing their\n * own revenue in the box.\n *\n * So every card here calls the widget's own `render` with the live context. It\n * is the same code path the board uses, scaled down and made inert, which also\n * means a preview can never drift from the thing it previews.\n *\n * Widgets whose `available` is false never reach this list. Offering something\n * that would render an apology is worse than not offering it.\n *\n * IT IS A GRID OF CARDS, NOT A LIST OF SECTIONS. It was the latter: each entry\n * a full-height 280px preview stacked vertically with a bare heading above it,\n * so the dialog scrolled for a page and a half and nothing in it looked like a\n * card you were choosing. The preview was the only visual, and it was\n * unframed — a widget's content floating on the dialog's own ground, which is\n * why it read as dark and unfinished rather than as a catalogue.\n *\n * So each entry now wears `HomeCard`: the same surface, radius, shadow and\n * hover lift the board itself uses. Picking from the gallery should look like\n * picking up the thing that lands on the board, and the cheapest way to\n * guarantee that is to use the same chrome rather than a second one drawn to\n * resemble it.\n *\n * THE PREVIEW IS SCALED, NOT CROPPED. A 280px widget shown at 280px in a\n * two-up grid makes the dialog enormous; showing its top third instead would\n * cut every card off mid-sentence. `transform: scale` keeps the whole widget\n * visible and in proportion — you are looking at a small version of the real\n * thing, which is what a thumbnail is supposed to be.\n */\nexport function WidgetGallery({\n  open,\n  onOpenChange,\n  candidates,\n  ctx,\n  onAdd,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Available, and not already on the board. */\n  candidates: WidgetDef[];\n  ctx: WidgetContext;\n  onAdd: (def: WidgetDef, size: WidgetSize) => void;\n}) {\n  // Which size each card is previewing. Defaults to the widget's own.\n  const [sizes, setSizes] = useState<Record<string, WidgetSize>>({});\n  const [added, setAdded] = useState<string[]>([]);\n\n  const sizeFor = (d: WidgetDef) => sizes[d.id] ?? d.defaultSize;\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-h-[min(84vh,720px)] max-w-3xl overflow-y-auto\">\n        <DialogHeader>\n          <DialogTitle>Add to home</DialogTitle>\n          <DialogDescription>\n            Shown with this business’s own figures.\n          </DialogDescription>\n        </DialogHeader>\n\n        {candidates.length === 0 ? (\n          <p className=\"py-10 text-center text-sm text-[var(--text-tertiary)]\">\n            Everything available is already on your home.\n          </p>\n        ) : (\n          <div className=\"mt-2 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            {candidates.map((d) => {\n              const size = sizeFor(d);\n              const isAdded = added.includes(d.id);\n              // The widget's natural width at this class, and the factor that\n              // fits it into the card's preview window. Derived rather than\n              // hardcoded so a size added to the system scales itself.\n              const natural = size === 'wide' ? 478 : 312;\n              const scale = PREVIEW_WIDTH / natural;\n\n              return (\n                <HomeCard key={d.id}>\n                  <div className=\"flex h-full flex-col\">\n                    {/* The real widget, at the chosen class, made inert.\n                        `pointer-events-none` and `inert` so a preview cannot be\n                        clicked into: this is a picture of a destination, not\n                        the destination. */}\n                    <div\n                      className=\"relative shrink-0 overflow-hidden border-b border-[var(--border-subtle)]\"\n                      style={{ height: WIDGET_HEIGHT * scale }}\n                    >\n                      <div\n                        // @ts-expect-error — `inert` lands in React's types later\n                        inert=\"\"\n                        aria-hidden\n                        className=\"pointer-events-none origin-top-left\"\n                        style={{\n                          width: natural,\n                          height: WIDGET_HEIGHT,\n                          transform: `scale(${scale})`,\n                        }}\n                      >\n                        <div className=\"h-full [&>*]:h-full\">\n                          {d.empty?.(ctx) ? (\n                            <WidgetEmptyState empty={d.empty(ctx)!} />\n                          ) : (\n                            d.render(ctx, size)\n                          )}\n                        </div>\n                      </div>\n                    </div>\n\n                    <div className=\"flex flex-1 flex-col gap-3 p-4\">\n                      <div className=\"min-w-0\">\n                        <h3 className=\"text-md font-medium text-[var(--text-primary)]\">\n                          {d.name}\n                        </h3>\n                        <p className=\"text-sm text-[var(--text-tertiary)]\">\n                          {d.description}\n                        </p>\n                      </div>\n\n                      <div className=\"mt-auto flex items-center justify-between gap-2\">\n                        {d.sizes.length > 1 ? (\n                          <div className=\"surface-pinned flex items-center gap-0.5 p-0.5\">\n                            {d.sizes.map((sz) => (\n                              <button\n                                key={sz}\n                                type=\"button\"\n                                onClick={() =>\n                                  setSizes((m) => ({ ...m, [d.id]: sz }))\n                                }\n                                aria-pressed={sz === size}\n                                className={`rounded-md px-2 py-1 text-2xs font-medium transition-colors ${\n                                  sz === size\n                                    ? 'bg-[var(--interactive-hover)] text-[var(--text-primary)]'\n                                    : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'\n                                }`}\n                              >\n                                {SIZE_LABEL[sz]}\n                              </button>\n                            ))}\n                          </div>\n                        ) : (\n                          <span />\n                        )}\n                        <Button\n                          size=\"sm\"\n                          variant={isAdded ? 'secondary' : 'primary'}\n                          disabled={isAdded}\n                          onClick={() => {\n                            onAdd(d, size);\n                            setAdded((a) => [...a, d.id]);\n                          }}\n                        >\n                          {isAdded ? (\n                            <>\n                              <Check />\n                              Added\n                            </>\n                          ) : (\n                            <>\n                              <Plus />\n                              Add\n                            </>\n                          )}\n                        </Button>\n                      </div>\n                    </div>\n                  </div>\n                </HomeCard>\n              );\n            })}\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AAoFQ,SAkGoB,UAjGlB,KADF;AAlFR,SAAS,gBAAgB;AACzB,SAAS,MAAM,aAAa;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AAGzB,MAAM,gBAAgB;AAEtB,MAAM,aAAyC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AACV;AAsCO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AAED,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAqC,CAAC,CAAC;AACjE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAmB,CAAC,CAAC;AAE/C,QAAM,UAAU,CAAC,MAAiB,MAAM,EAAE,EAAE,KAAK,EAAE;AAEnD,SACE,oBAAC,UAAO,MAAY,cAClB,+BAAC,iBAAc,WAAU,qDACvB;AAAA,yBAAC,gBACC;AAAA,0BAAC,eAAY,yBAAW;AAAA,MACxB,oBAAC,qBAAkB,0DAEnB;AAAA,OACF;AAAA,IAEC,WAAW,WAAW,IACrB,oBAAC,OAAE,WAAU,yDAAwD,2DAErE,IAEA,oBAAC,SAAI,WAAU,8CACZ,qBAAW,IAAI,CAAC,MAAM;AACrB,YAAM,OAAO,QAAQ,CAAC;AACtB,YAAM,UAAU,MAAM,SAAS,EAAE,EAAE;AAInC,YAAM,UAAU,SAAS,SAAS,MAAM;AACxC,YAAM,QAAQ,gBAAgB;AAE9B,aACE,oBAAC,YACC,+BAAC,SAAI,WAAU,wBAKb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,QAAQ,gBAAgB,MAAM;AAAA,YAEvC;AAAA,cAAC;AAAA;AAAA,gBAEC,OAAM;AAAA,gBACN,eAAW;AAAA,gBACX,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,WAAW,SAAS,KAAK;AAAA,gBAC3B;AAAA,gBAEA,8BAAC,SAAI,WAAU,uBACZ,YAAE,QAAQ,GAAG,IACZ,oBAAC,oBAAiB,OAAO,EAAE,MAAM,GAAG,GAAI,IAExC,EAAE,OAAO,KAAK,IAAI,GAEtB;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QAEA,qBAAC,SAAI,WAAU,kCACb;AAAA,+BAAC,SAAI,WAAU,WACb;AAAA,gCAAC,QAAG,WAAU,kDACX,YAAE,MACL;AAAA,YACA,oBAAC,OAAE,WAAU,uCACV,YAAE,aACL;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,mDACZ;AAAA,cAAE,MAAM,SAAS,IAChB,oBAAC,SAAI,WAAU,kDACZ,YAAE,MAAM,IAAI,CAAC,OACZ;AAAA,cAAC;AAAA;AAAA,gBAEC,MAAK;AAAA,gBACL,SAAS,MACP,SAAS,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,EAAE,EAAE,GAAG,GAAG,EAAE;AAAA,gBAExC,gBAAc,OAAO;AAAA,gBACrB,WAAW,+DACT,OAAO,OACH,6DACA,8DACN;AAAA,gBAEC,qBAAW,EAAE;AAAA;AAAA,cAZT;AAAA,YAaP,CACD,GACH,IAEA,oBAAC,UAAK;AAAA,YAER;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,UAAU,cAAc;AAAA,gBACjC,UAAU;AAAA,gBACV,SAAS,MAAM;AACb,wBAAM,GAAG,IAAI;AACb,2BAAS,CAAC,MAAM,CAAC,GAAG,GAAG,EAAE,EAAE,CAAC;AAAA,gBAC9B;AAAA,gBAEC,oBACC,iCACE;AAAA,sCAAC,SAAM;AAAA,kBAAE;AAAA,mBAEX,IAEA,iCACE;AAAA,sCAAC,QAAK;AAAA,kBAAE;AAAA,mBAEV;AAAA;AAAA,YAEJ;AAAA,aACF;AAAA,WACF;AAAA,SACF,KAxFa,EAAE,EAyFjB;AAAA,IAEJ,CAAC,GACH;AAAA,KAEJ,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,14 @@
+import type { RecentScreen } from '../use-recent-screens';
+/**
+ * Recents, as an opt-in widget rather than a third of the page.
+ *
+ * It was a permanent column and it did not deserve one: Cloudflare can afford a
+ * history column because a developer owns dozens of objects, while a merchant
+ * has about ten screens and a sidebar naming every one of them, so ours
+ * rendered a list of settings pages you had already walked through. As
+ * something a particular merchant chooses to place, it is fine. That is the
+ * distinction a widget board buys: available is a lower bar than default.
+ */
+export declare function WidgetRecents({ items }: {
+    items: RecentScreen[];
+}): import("react").JSX.Element;

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

@@ -0,0 +1,23 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { History, ChevronRight } from "lucide-react";
+import { Panel } from "../panel";
+function WidgetRecents({ items }) {
+  return /* @__PURE__ */ jsx(Panel, { title: "Recents", bodyClassName: "p-0", children: /* @__PURE__ */ jsx("ul", { children: items.map((r) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href: r.href,
+      className: "group/row flex items-center gap-3 border-b border-[var(--border-subtle)] px-4 py-3 transition-colors last:border-b-0 hover:bg-[var(--interactive-hover)]",
+      children: [
+        /* @__PURE__ */ jsx(History, { className: "size-4 shrink-0 text-[var(--text-muted)]" }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-md text-[var(--text-primary)]", children: r.label }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 text-[var(--text-muted)] transition-transform duration-[var(--motion-fast)] group-hover/row:translate-x-0.5" })
+      ]
+    }
+  ) }, r.href)) }) });
+}
+export {
+  WidgetRecents
+};
+//# sourceMappingURL=widget-recents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/widget-recents.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { History, ChevronRight } from 'lucide-react';\nimport type { RecentScreen } from '../use-recent-screens';\nimport { Panel } from '../panel';\n\n/**\n * Recents, as an opt-in widget rather than a third of the page.\n *\n * It was a permanent column and it did not deserve one: Cloudflare can afford a\n * history column because a developer owns dozens of objects, while a merchant\n * has about ten screens and a sidebar naming every one of them, so ours\n * rendered a list of settings pages you had already walked through. As\n * something a particular merchant chooses to place, it is fine. That is the\n * distinction a widget board buys: available is a lower bar than default.\n */\nexport function WidgetRecents({ items }: { items: RecentScreen[] }) {\n  return (\n    <Panel title=\"Recents\" bodyClassName=\"p-0\">\n      <ul>\n        {items.map((r) => (\n          <li key={r.href}>\n            <Link\n              href={r.href}\n              className=\"group/row flex items-center gap-3 border-b border-[var(--border-subtle)] px-4 py-3 transition-colors last:border-b-0 hover:bg-[var(--interactive-hover)]\"\n            >\n              <History className=\"size-4 shrink-0 text-[var(--text-muted)]\" />\n              <span className=\"min-w-0 flex-1 truncate text-md text-[var(--text-primary)]\">\n                {r.label}\n              </span>\n              <ChevronRight className=\"size-4 shrink-0 text-[var(--text-muted)] transition-transform duration-[var(--motion-fast)] group-hover/row:translate-x-0.5\" />\n            </Link>\n          </li>\n        ))}\n      </ul>\n    </Panel>\n  );\n}\n"],"mappings":";AAuBY,SAIE,KAJF;AArBZ,OAAO,UAAU;AACjB,SAAS,SAAS,oBAAoB;AAEtC,SAAS,aAAa;AAYf,SAAS,cAAc,EAAE,MAAM,GAA8B;AAClE,SACE,oBAAC,SAAM,OAAM,WAAU,eAAc,OACnC,8BAAC,QACE,gBAAM,IAAI,CAAC,MACV,oBAAC,QACC;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,EAAE;AAAA,MACR,WAAU;AAAA,MAEV;AAAA,4BAAC,WAAQ,WAAU,4CAA2C;AAAA,QAC9D,oBAAC,UAAK,WAAU,8DACb,YAAE,OACL;AAAA,QACA,oBAAC,gBAAa,WAAU,+HAA8H;AAAA;AAAA;AAAA,EACxJ,KAVO,EAAE,IAWX,CACD,GACH,GACF;AAEJ;","names":[]}

package/dist/dashboard/index.d.ts

@@ -0,0 +1,5 @@
+export { TemplateCategoryPicker } from './template-category-picker';
+export { TemplateStatusCard } from './template-status-card';
+export { buildActivityItems } from './activity-feed';
+export type { ActivityItem } from './activity-feed';
+export { GettingStartedCta } from './getting-started-cta';

package/dist/dashboard/index.js

@@ -0,0 +1,11 @@
+import { TemplateCategoryPicker } from "./template-category-picker";
+import { TemplateStatusCard } from "./template-status-card";
+import { buildActivityItems } from "./activity-feed";
+import { GettingStartedCta } from "./getting-started-cta";
+export {
+  GettingStartedCta,
+  TemplateCategoryPicker,
+  TemplateStatusCard,
+  buildActivityItems
+};
+//# sourceMappingURL=index.js.map

package/dist/dashboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/dashboard/index.ts"],"sourcesContent":["export { TemplateCategoryPicker } from './template-category-picker';\nexport { TemplateStatusCard } from './template-status-card';\nexport { buildActivityItems } from './activity-feed';\nexport type { ActivityItem } from './activity-feed';\nexport { GettingStartedCta } from './getting-started-cta';\n"],"mappings":"AAAA,SAAS,8BAA8B;AACvC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AAEnC,SAAS,yBAAyB;","names":[]}

package/dist/dashboard/page-intro-dialog.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The first time you open a screen, the screen says what it is.
+ *
+ * ONE MOUNT, IN THE SHELL. It reads the path, looks the screen up in
+ * `PAGE_INTROS`, and shows nothing at all when there is no entry — so "every
+ * page gets an introduction" is a promise kept by writing copy, not by wiring
+ * a component into eighty files and remembering to do it in the eighty-first.
+ *
+ * IT NEVER INTERRUPTS TWICE. The check runs once per path, on arrival, and
+ * marking it seen happens on the way out rather than on the way in: a merchant
+ * who navigates straight past a screen has not read anything, and the next
+ * visit is still their first real one.
+ *
+ * IT YIELDS ON ARRIVAL DAY. CLAUDE.md: *a pop-up is never on top of a pop-up,
+ * not stacked and not queued either* — so on the visit where `FirstRunWelcome`
+ * greets a brand-new business, no introduction fires behind it. The registry
+ * has no entry for `/dashboard` either, which makes the two unable to collide
+ * on one screen; this is the belt to that's braces, for the merchant who lands
+ * straight on a deeper screen.
+ *
+ * IT WAITS FOR THE WORKSPACE. "Seen" is remembered per workspace, so opening
+ * before the tenant resolves would either mark the wrong one or re-show the
+ * intro in every business the merchant runs.
+ */
+export declare function PageIntroDialog(): import("react").JSX.Element | null;