@withpotter/components 0.13.0-next.101

package/dist/dashboard/home/search-tips.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { springs } from "@withpotter/lib/motion";
+import { useEntityLabel } from "@withpotter/lib/intents/use-entity-label";
+import { HomeCard } from "./home-card";
+import { WidgetEmptyState } from "./widgets/widget-empty";
+import { WIDGET_HEIGHT } from "./widgets/types";
+import { ThemeMiniature } from "./widgets/widget-art";
+import { WALLET_SETTLEMENT } from "@withpotter/lib/wallet-settlement";
+const SPEED = 75;
+const CARD_WIDTH = 400;
+const GAP = 16;
+const STEP = CARD_WIDTH + GAP;
+function SearchTips() {
+  const item = useEntityLabel("item");
+  const reduceMotion = useReducedMotion() ?? false;
+  const rail = useRef(null);
+  const track = useRef(null);
+  const target = useRef(1);
+  const [bleed, setBleed] = useState(
+    null
+  );
+  useLayoutEffect(() => {
+    const el = rail.current;
+    const parent = el?.parentElement;
+    if (!el || !parent) return;
+    let scroller = parent;
+    while (scroller) {
+      const o = getComputedStyle(scroller).overflowY;
+      if (o === "auto" || o === "scroll") break;
+      scroller = scroller.parentElement;
+    }
+    if (!scroller) return;
+    const area = scroller;
+    const measure = () => {
+      const a = area.getBoundingClientRect();
+      const p = parent.getBoundingClientRect();
+      setBleed({
+        left: a.left + area.clientLeft - p.left,
+        width: area.clientWidth
+      });
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(area);
+    ro.observe(parent);
+    return () => ro.disconnect();
+  }, []);
+  const cards = [
+    {
+      id: "item",
+      title: `Add to your ${item.plural.toLowerCase()}`,
+      body: "Give it a photo and a price, and it can be sold today.",
+      action: `Add ${item.singular.toLowerCase()}`,
+      href: "/dashboard/catalog/new"
+    },
+    // Not on a box that settles into its own wallet: there is no bank account
+    // for a payout to go to, so there is nothing here to review.
+    ...WALLET_SETTLEMENT ? [] : [
+      {
+        id: "payouts",
+        title: "Check where your money lands",
+        body: "Make sure payouts go to the right bank account.",
+        action: "Review payouts",
+        href: "/dashboard/settings/payouts"
+      }
+    ],
+    {
+      id: "look",
+      title: "Give your store a new look",
+      body: "Browse templates and see one on your own products.",
+      action: "Browse templates",
+      href: "/dashboard/templates",
+      art: /* @__PURE__ */ jsx(Bigger, { children: /* @__PURE__ */ jsx(ThemeMiniature, {}) })
+    },
+    {
+      id: "regulars",
+      title: "Know who keeps coming back",
+      body: "See your best customers and when they last ordered.",
+      action: "View customers",
+      href: "/dashboard/customers"
+    }
+  ];
+  const setWidth = cards.length * STEP;
+  useEffect(() => {
+    const el = track.current;
+    if (!el || reduceMotion) return;
+    let raf = 0;
+    let last = performance.now();
+    let pos = 0;
+    let speed = 1;
+    const tick = (now) => {
+      const dt = Math.min(0.05, (now - last) / 1e3);
+      last = now;
+      speed += (target.current - speed) * Math.min(1, dt * 7);
+      if (Math.abs(target.current - speed) < 2e-3) speed = target.current;
+      pos += SPEED * speed * dt;
+      if (pos >= setWidth) pos -= setWidth;
+      el.style.transform = `translate3d(${-pos}px,0,0)`;
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [reduceMotion, setWidth]);
+  const hold = () => {
+    target.current = 0;
+  };
+  const release = () => {
+    target.current = 1;
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rail,
+      onPointerEnter: hold,
+      onPointerLeave: release,
+      onFocus: hold,
+      onBlur: release,
+      style: bleed ? { marginLeft: bleed.left, width: bleed.width } : void 0,
+      className: "flex gap-4 overflow-hidden py-2",
+      children: /* @__PURE__ */ jsx("div", { ref: track, className: "flex gap-4 will-change-transform", children: [0, 1].map((copy) => (
+        /* The second set is the loop's seam and is not content: hidden from
+         assistive tech and inert, so it cannot be tabbed into. */
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex shrink-0 gap-4",
+            "aria-hidden": copy === 1 || void 0,
+            ...copy === 1 ? { inert: "" } : {},
+            children: cards.map((c, i) => (
+              /* They arrive one after another, rising into place, so opening
+               the search feels like something being dealt rather than
+               switched on. */
+              /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  className: "shrink-0",
+                  style: { width: CARD_WIDTH, height: WIDGET_HEIGHT },
+                  initial: reduceMotion || copy === 1 ? false : { opacity: 0, y: 22, scale: 0.96 },
+                  animate: { opacity: 1, y: 0, scale: 1 },
+                  transition: { ...springs.gentle, delay: i * 0.04 },
+                  children: /* @__PURE__ */ jsx(HomeCard, { children: /* @__PURE__ */ jsx(
+                    WidgetEmptyState,
+                    {
+                      empty: {
+                        kind: "action",
+                        title: c.title,
+                        body: c.body,
+                        action: c.action,
+                        href: c.href,
+                        art: c.art
+                      }
+                    }
+                  ) })
+                },
+                c.id
+              )
+            ))
+          },
+          copy
+        )
+      )) })
+    }
+  );
+}
+function Bigger({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "origin-bottom-right scale-[1.3]", children });
+}
+export {
+  SearchTips
+};
+//# sourceMappingURL=search-tips.js.map

package/dist/dashboard/home/search-tips.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/dashboard/home/search-tips.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { springs } from '@withpotter/lib/motion';\nimport { useEntityLabel } from '@withpotter/lib/intents/use-entity-label';\nimport { HomeCard } from './home-card';\nimport { WidgetEmptyState } from './widgets/widget-empty';\nimport { WIDGET_HEIGHT } from './widgets/types';\nimport { ThemeMiniature } from './widgets/widget-art';\nimport { WALLET_SETTLEMENT } from '@withpotter/lib/wallet-settlement';\n\n/**\n * What the search offers before anything is typed: a rail of suggestions that\n * drifts on its own.\n *\n * THE CARD IS THE HOME BOARD'S CARD, not a lookalike. Each one is a\n * `HomeCard` around `WidgetEmptyState`'s \"action\" layout: title, one sentence,\n * the pill pinned bottom-left, and drawn art bleeding off the bottom-right\n * where a card has any. A suggestion here and a setup card on the board are the\n * same object. Three of the four have no art: what they carried showed a price,\n * a payout amount and a \"72d ago\" that belonged to nobody (see `widget-art`).\n *\n * IT DRIFTS, IT DOES NOT HOP. A constant slow glide is the smoothest motion a\n * rail can make: there is no start, no stop and no easing to notice. It is\n * driven by the frame clock (distance = speed x time since the last frame), so\n * it runs at the same pace on a 60Hz and a 120Hz screen. It moves by a\n * transform on a layer of its own, which costs the page no layout and no\n * repaint, and its position is kept as a float so a drift of under a pixel a\n * frame does not stall.\n *\n * IT RUNS EDGE TO EDGE of the page's content area rather than stopping at the\n * search column, so many cards are in view and the next is already coming in.\n * The column is 640px, so the rail measures the scroll container it sits in and\n * widens itself to that; it is not a viewport unit because the sidebar means\n * the content does not start at the left of the window. Cards start flush at\n * its left edge on purpose: any padding there would show as a blank on every\n * loop, because the wrap puts the second set exactly where the first began.\n *\n * IT DOES NOT SCROLL THE PAGE. How far it sits below the search box is set by\n * `HomeAsk`, which shrinks that gap on a short window so the whole rail, its\n * buttons included, is on screen without anyone scrolling to it.\n *\n * IT NEVER REWINDS. The cards are rendered twice, and once the rail has moved a\n * full set it is put back one set, which is invisible because the two sets are\n * identical.\n *\n * IT EASES TO A STOP under the pointer or keyboard focus and eases back up when\n * they leave, rather than freezing, because a card that slides away while you\n * are reaching for its button is worse than a rail that never moves. It does\n * not move for someone who has asked for reduced motion; they can scroll it.\n */\nconst SPEED = 75; // px per second\nconst CARD_WIDTH = 400;\nconst GAP = 16;\nconst STEP = CARD_WIDTH + GAP;\n\nexport function SearchTips() {\n  const item = useEntityLabel('item');\n  const reduceMotion = useReducedMotion() ?? false;\n  const rail = useRef<HTMLDivElement>(null);\n  const track = useRef<HTMLDivElement>(null);\n  /* 1 is full speed and 0 is stopped; it is eased toward `target`. */\n  const target = useRef(1);\n  const [bleed, setBleed] = useState<{ left: number; width: number } | null>(\n    null,\n  );\n\n  /* Widen to the scroll container, whatever that turns out to be. */\n  useLayoutEffect(() => {\n    const el = rail.current;\n    const parent = el?.parentElement;\n    if (!el || !parent) return;\n    let scroller: HTMLElement | null = parent;\n    while (scroller) {\n      const o = getComputedStyle(scroller).overflowY;\n      if (o === 'auto' || o === 'scroll') break;\n      scroller = scroller.parentElement;\n    }\n    if (!scroller) return;\n    const area = scroller;\n    const measure = () => {\n      const a = area.getBoundingClientRect();\n      const p = parent.getBoundingClientRect();\n      setBleed({\n        left: a.left + area.clientLeft - p.left,\n        width: area.clientWidth,\n      });\n    };\n    measure();\n    const ro = new ResizeObserver(measure);\n    ro.observe(area);\n    ro.observe(parent);\n    return () => ro.disconnect();\n  }, []);\n\n  const cards = [\n    {\n      id: 'item',\n      title: `Add to your ${item.plural.toLowerCase()}`,\n      body: 'Give it a photo and a price, and it can be sold today.',\n      action: `Add ${item.singular.toLowerCase()}`,\n      href: '/dashboard/catalog/new',\n    },\n    // Not on a box that settles into its own wallet: there is no bank account\n    // for a payout to go to, so there is nothing here to review.\n    ...(WALLET_SETTLEMENT\n      ? []\n      : [\n          {\n            id: 'payouts',\n            title: 'Check where your money lands',\n            body: 'Make sure payouts go to the right bank account.',\n            action: 'Review payouts',\n            href: '/dashboard/settings/payouts',\n          },\n        ]),\n    {\n      id: 'look',\n      title: 'Give your store a new look',\n      body: 'Browse templates and see one on your own products.',\n      action: 'Browse templates',\n      href: '/dashboard/templates',\n      art: (\n        <Bigger>\n          <ThemeMiniature />\n        </Bigger>\n      ),\n    },\n    {\n      id: 'regulars',\n      title: 'Know who keeps coming back',\n      body: 'See your best customers and when they last ordered.',\n      action: 'View customers',\n      href: '/dashboard/customers',\n    },\n  ];\n  const setWidth = cards.length * STEP;\n\n  useEffect(() => {\n    const el = track.current;\n    if (!el || reduceMotion) return;\n    let raf = 0;\n    let last = performance.now();\n    let pos = 0;\n    let speed = 1;\n\n    const tick = (now: number) => {\n      const dt = Math.min(0.05, (now - last) / 1000);\n      last = now;\n      /* Ease the speed toward its target: about a third of a second to stop\n         or to get going again. */\n      speed += (target.current - speed) * Math.min(1, dt * 7);\n      if (Math.abs(target.current - speed) < 0.002) speed = target.current;\n\n      pos += SPEED * speed * dt;\n      if (pos >= setWidth) pos -= setWidth;\n      /* A transform, not `scrollLeft`: moving a layer is done by the GPU and\n         repaints nothing, where scrolling a 1250px strip of shadowed cards\n         repaints all of it on every frame. */\n      el.style.transform = `translate3d(${-pos}px,0,0)`;\n      raf = requestAnimationFrame(tick);\n    };\n    raf = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(raf);\n  }, [reduceMotion, setWidth]);\n\n  const hold = () => {\n    target.current = 0;\n  };\n  const release = () => {\n    target.current = 1;\n  };\n\n  return (\n    <div\n      ref={rail}\n      onPointerEnter={hold}\n      onPointerLeave={release}\n      onFocus={hold}\n      onBlur={release}\n      style={bleed ? { marginLeft: bleed.left, width: bleed.width } : undefined}\n      className=\"flex gap-4 overflow-hidden py-2\"\n    >\n      <div ref={track} className=\"flex gap-4 will-change-transform\">\n        {[0, 1].map((copy) => (\n          /* The second set is the loop's seam and is not content: hidden from\n           assistive tech and inert, so it cannot be tabbed into. */\n          <div\n            key={copy}\n            className=\"flex shrink-0 gap-4\"\n            aria-hidden={copy === 1 || undefined}\n            {...(copy === 1 ? ({ inert: '' } as object) : {})}\n          >\n            {cards.map((c, i) => (\n              /* They arrive one after another, rising into place, so opening\n               the search feels like something being dealt rather than\n               switched on. */\n              <motion.div\n                key={c.id}\n                className=\"shrink-0\"\n                style={{ width: CARD_WIDTH, height: WIDGET_HEIGHT }}\n                initial={\n                  reduceMotion || copy === 1\n                    ? false\n                    : { opacity: 0, y: 22, scale: 0.96 }\n                }\n                animate={{ opacity: 1, y: 0, scale: 1 }}\n                transition={{ ...springs.gentle, delay: i * 0.04 }}\n              >\n                <HomeCard>\n                  <WidgetEmptyState\n                    empty={{\n                      kind: 'action',\n                      title: c.title,\n                      body: c.body,\n                      action: c.action,\n                      href: c.href,\n                      art: c.art,\n                    }}\n                  />\n                </HomeCard>\n              </motion.div>\n            ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/* The drawn art was made for a 312px card. On these wider ones it is scaled up\n   from its bottom-right corner, which is where it is anchored, so it grows into\n   the empty space rather than away from the edge it bleeds off. */\nfunction Bigger({ children }: { children: React.ReactNode }) {\n  return <div className=\"origin-bottom-right scale-[1.3]\">{children}</div>;\n}\n"],"mappings":";AA6HU;AA3HV,SAAS,WAAW,iBAAiB,QAAQ,gBAAgB;AAC7D,SAAS,QAAQ,wBAAwB;AACzC,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AA0ClC,MAAM,QAAQ;AACd,MAAM,aAAa;AACnB,MAAM,MAAM;AACZ,MAAM,OAAO,aAAa;AAEnB,SAAS,aAAa;AAC3B,QAAM,OAAO,eAAe,MAAM;AAClC,QAAM,eAAe,iBAAiB,KAAK;AAC3C,QAAM,OAAO,OAAuB,IAAI;AACxC,QAAM,QAAQ,OAAuB,IAAI;AAEzC,QAAM,SAAS,OAAO,CAAC;AACvB,QAAM,CAAC,OAAO,QAAQ,IAAI;AAAA,IACxB;AAAA,EACF;AAGA,kBAAgB,MAAM;AACpB,UAAM,KAAK,KAAK;AAChB,UAAM,SAAS,IAAI;AACnB,QAAI,CAAC,MAAM,CAAC,OAAQ;AACpB,QAAI,WAA+B;AACnC,WAAO,UAAU;AACf,YAAM,IAAI,iBAAiB,QAAQ,EAAE;AACrC,UAAI,MAAM,UAAU,MAAM,SAAU;AACpC,iBAAW,SAAS;AAAA,IACtB;AACA,QAAI,CAAC,SAAU;AACf,UAAM,OAAO;AACb,UAAM,UAAU,MAAM;AACpB,YAAM,IAAI,KAAK,sBAAsB;AACrC,YAAM,IAAI,OAAO,sBAAsB;AACvC,eAAS;AAAA,QACP,MAAM,EAAE,OAAO,KAAK,aAAa,EAAE;AAAA,QACnC,OAAO,KAAK;AAAA,MACd,CAAC;AAAA,IACH;AACA,YAAQ;AACR,UAAM,KAAK,IAAI,eAAe,OAAO;AACrC,OAAG,QAAQ,IAAI;AACf,OAAG,QAAQ,MAAM;AACjB,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ;AAAA,MACE,IAAI;AAAA,MACJ,OAAO,eAAe,KAAK,OAAO,YAAY,CAAC;AAAA,MAC/C,MAAM;AAAA,MACN,QAAQ,OAAO,KAAK,SAAS,YAAY,CAAC;AAAA,MAC1C,MAAM;AAAA,IACR;AAAA;AAAA;AAAA,IAGA,GAAI,oBACA,CAAC,IACD;AAAA,MACE;AAAA,QACE,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACJ;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,KACE,oBAAC,UACC,8BAAC,kBAAe,GAClB;AAAA,IAEJ;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EACF;AACA,QAAM,WAAW,MAAM,SAAS;AAEhC,YAAU,MAAM;AACd,UAAM,KAAK,MAAM;AACjB,QAAI,CAAC,MAAM,aAAc;AACzB,QAAI,MAAM;AACV,QAAI,OAAO,YAAY,IAAI;AAC3B,QAAI,MAAM;AACV,QAAI,QAAQ;AAEZ,UAAM,OAAO,CAAC,QAAgB;AAC5B,YAAM,KAAK,KAAK,IAAI,OAAO,MAAM,QAAQ,GAAI;AAC7C,aAAO;AAGP,gBAAU,OAAO,UAAU,SAAS,KAAK,IAAI,GAAG,KAAK,CAAC;AACtD,UAAI,KAAK,IAAI,OAAO,UAAU,KAAK,IAAI,KAAO,SAAQ,OAAO;AAE7D,aAAO,QAAQ,QAAQ;AACvB,UAAI,OAAO,SAAU,QAAO;AAI5B,SAAG,MAAM,YAAY,eAAe,CAAC,GAAG;AACxC,YAAM,sBAAsB,IAAI;AAAA,IAClC;AACA,UAAM,sBAAsB,IAAI;AAChC,WAAO,MAAM,qBAAqB,GAAG;AAAA,EACvC,GAAG,CAAC,cAAc,QAAQ,CAAC;AAE3B,QAAM,OAAO,MAAM;AACjB,WAAO,UAAU;AAAA,EACnB;AACA,QAAM,UAAU,MAAM;AACpB,WAAO,UAAU;AAAA,EACnB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,OAAO,QAAQ,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM,MAAM,IAAI;AAAA,MAChE,WAAU;AAAA,MAEV,8BAAC,SAAI,KAAK,OAAO,WAAU,oCACxB,WAAC,GAAG,CAAC,EAAE,IAAI,CAAC;AAAA;AAAA;AAAA,QAGX;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YACV,eAAa,SAAS,KAAK;AAAA,YAC1B,GAAI,SAAS,IAAK,EAAE,OAAO,GAAG,IAAe,CAAC;AAAA,YAE9C,gBAAM,IAAI,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA,cAIb;AAAA,gBAAC,OAAO;AAAA,gBAAP;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO,EAAE,OAAO,YAAY,QAAQ,cAAc;AAAA,kBAClD,SACE,gBAAgB,SAAS,IACrB,QACA,EAAE,SAAS,GAAG,GAAG,IAAI,OAAO,KAAK;AAAA,kBAEvC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG,OAAO,EAAE;AAAA,kBACtC,YAAY,EAAE,GAAG,QAAQ,QAAQ,OAAO,IAAI,KAAK;AAAA,kBAEjD,8BAAC,YACC;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAO;AAAA,wBACL,MAAM;AAAA,wBACN,OAAO,EAAE;AAAA,wBACT,MAAM,EAAE;AAAA,wBACR,QAAQ,EAAE;AAAA,wBACV,MAAM,EAAE;AAAA,wBACR,KAAK,EAAE;AAAA,sBACT;AAAA;AAAA,kBACF,GACF;AAAA;AAAA,gBAtBK,EAAE;AAAA,cAuBT;AAAA,aACD;AAAA;AAAA,UAlCI;AAAA,QAmCP;AAAA,OACD,GACH;AAAA;AAAA,EACF;AAEJ;AAKA,SAAS,OAAO,EAAE,SAAS,GAAkC;AAC3D,SAAO,oBAAC,SAAI,WAAU,mCAAmC,UAAS;AACpE;","names":[]}

package/dist/dashboard/home/use-ask-support.d.ts

@@ -0,0 +1,60 @@
+import type { TranscriptSegment } from '@withpotter/ui-kit/transcript-player';
+/**
+ * Everything the home box needs to send what is in it to support.
+ *
+ * IT IS THE SUPPORT SCREEN'S OWN COMPOSER, not a second one. `useCaseComposer`
+ * already records a clip, uploads a picture and collects both on submit, and
+ * the create-case dialog already knows how a case is opened; this puts the
+ * same three behind the home box so a voice note or a screenshot sent from
+ * here arrives exactly as one sent from the Support page does.
+ *
+ * THE VOICE NOTE IS THE MESSAGE. Two things run on one press: the recorder,
+ * whose audio is what gets delivered, and the browser's recogniser, which types
+ * what it heard into the box. A bad transcript therefore never destroys the
+ * message, because the message is the recording. That is why a voice note can
+ * be sent with the box empty.
+ *
+ * A PICTURE IS NOT. It always needs words under it: a screenshot with no
+ * sentence is a question support would have to ask straight back, and the
+ * first case a merchant files should not begin with one. So `needsCaption`
+ * holds the send until there is text.
+ */
+export declare function useAskSupport(value: string, setValue: (v: string) => void, 
+/** The confirmation has run its course; the box can go back to searching. */
+onSentEnd?: () => void): {
+    composer: {
+        recorder: {
+            state: import("@withpotter/hooks/use-voice-recorder").RecorderState;
+            seconds: number;
+            livePeaksRef: import("react").RefObject<number[]>;
+            recording: import("@withpotter/hooks/use-voice-recorder").VoiceRecording | null;
+            start: () => Promise<void>;
+            stop: () => void;
+            discard: () => void;
+            reset: () => void;
+            maxSeconds: number;
+            isBusy: boolean;
+        };
+        voice: import("@withpotter/hooks/use-voice-recorder").VoiceRecording | null;
+        recordingNow: boolean;
+        image: import("@withpotter/lib/service-operations-api").ServiceCaseAttachment | null;
+        setImage: import("react").Dispatch<import("react").SetStateAction<import("@withpotter/lib/service-operations-api").ServiceCaseAttachment | null>>;
+        uploading: boolean;
+        pickImage: ([file]: File[]) => Promise<void>;
+        collect: () => Promise<import("@withpotter/lib/service-operations-api").ServiceCaseAttachment[] | null>;
+        reset: () => void;
+        hasAttachment: boolean;
+    };
+    segments: TranscriptSegment[];
+    sending: boolean;
+    sent: boolean;
+    canSend: boolean;
+    needsCaption: boolean;
+    startVoice: () => void;
+    stopVoice: () => void;
+    discardVoice: () => void;
+    send: () => Promise<void>;
+    /** Something support-shaped is on the card, so the box is not a search. */
+    engaged: boolean;
+    voiceSupported: boolean;
+};

package/dist/dashboard/home/use-ask-support.js

@@ -0,0 +1,105 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCaseComposer } from "@withpotter/components/support/case-composer";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { useDictation } from "@withpotter/hooks/use-dictation";
+import { playSound } from "@withpotter/lib/sound";
+import { serviceOperationsApi } from "@withpotter/lib/service-operations-api";
+import { subjectFrom } from "@withpotter/lib/support-case-subject";
+function useAskSupport(value, setValue, onSentEnd) {
+  const { tenant } = useAuth();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const composer = useCaseComposer();
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const sentTimer = useRef(null);
+  useEffect(
+    () => () => {
+      if (sentTimer.current) clearTimeout(sentTimer.current);
+    },
+    []
+  );
+  const draftBefore = useRef("");
+  const [segments, setSegments] = useState([]);
+  const dictation = useDictation({
+    onTranscript: (text) => {
+      const heard = text.trim();
+      if (!heard) return;
+      const base = draftBefore.current;
+      setValue(base ? `${base.trimEnd()} ${heard}` : heard);
+    },
+    onSegment: ({ text, at }) => setSegments((prev) => [...prev, { text: text.trim(), at: at / 1e3 }])
+  });
+  const startVoice = () => {
+    draftBefore.current = value;
+    setSegments([]);
+    void composer.recorder.start();
+    if (dictation.supported) dictation.start();
+  };
+  const stopVoice = () => {
+    composer.recorder.stop();
+    if (dictation.supported) dictation.stop();
+  };
+  const discardVoice = () => {
+    composer.recorder.discard();
+    setSegments([]);
+  };
+  const hasText = value.trim().length > 0;
+  const needsCaption = Boolean(composer.image) && !hasText;
+  const subject = subjectFrom(value, composer.hasAttachment);
+  const canSend = !sending && !composer.uploading && !composer.recordingNow && !needsCaption && subject.length >= 3 && (hasText || Boolean(composer.voice));
+  const send = async () => {
+    if (!canSend || !tenant?.slug) return;
+    setSending(true);
+    playSound("send");
+    try {
+      const attachments = await composer.collect();
+      if (attachments === null) return;
+      await serviceOperationsApi.create(tenant.slug, {
+        subject,
+        message: value.trim() || "Voice note.",
+        attachments
+      });
+      await queryClient.invalidateQueries({ queryKey: ["support-cases"] });
+      toast({
+        title: "Sent to support",
+        description: "We reply in Support and by email."
+      });
+      setValue("");
+      composer.reset();
+      setSegments([]);
+      setSent(true);
+      if (sentTimer.current) clearTimeout(sentTimer.current);
+      sentTimer.current = setTimeout(() => {
+        setSent(false);
+        onSentEnd?.();
+      }, 2400);
+    } catch {
+      toast({ title: "That did not send", variant: "destructive" });
+    } finally {
+      setSending(false);
+    }
+  };
+  return {
+    composer,
+    segments,
+    sending,
+    sent,
+    canSend,
+    needsCaption,
+    startVoice,
+    stopVoice,
+    discardVoice,
+    send,
+    /** Something support-shaped is on the card, so the box is not a search. */
+    engaged: composer.hasAttachment || composer.recordingNow,
+    voiceSupported: composer.recorder.state !== "unsupported"
+  };
+}
+export {
+  useAskSupport
+};
+//# sourceMappingURL=use-ask-support.js.map

package/dist/dashboard/home/use-ask-support.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/dashboard/home/use-ask-support.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { useCaseComposer } from '@withpotter/components/support/case-composer';\nimport type { TranscriptSegment } from '@withpotter/ui-kit/transcript-player';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { useDictation } from '@withpotter/hooks/use-dictation';\nimport { playSound } from '@withpotter/lib/sound';\nimport { serviceOperationsApi } from '@withpotter/lib/service-operations-api';\nimport { subjectFrom } from '@withpotter/lib/support-case-subject';\n\n/**\n * Everything the home box needs to send what is in it to support.\n *\n * IT IS THE SUPPORT SCREEN'S OWN COMPOSER, not a second one. `useCaseComposer`\n * already records a clip, uploads a picture and collects both on submit, and\n * the create-case dialog already knows how a case is opened; this puts the\n * same three behind the home box so a voice note or a screenshot sent from\n * here arrives exactly as one sent from the Support page does.\n *\n * THE VOICE NOTE IS THE MESSAGE. Two things run on one press: the recorder,\n * whose audio is what gets delivered, and the browser's recogniser, which types\n * what it heard into the box. A bad transcript therefore never destroys the\n * message, because the message is the recording. That is why a voice note can\n * be sent with the box empty.\n *\n * A PICTURE IS NOT. It always needs words under it: a screenshot with no\n * sentence is a question support would have to ask straight back, and the\n * first case a merchant files should not begin with one. So `needsCaption`\n * holds the send until there is text.\n */\nexport function useAskSupport(\n  value: string,\n  setValue: (v: string) => void,\n  /** The confirmation has run its course; the box can go back to searching. */\n  onSentEnd?: () => void,\n) {\n  const { tenant } = useAuth();\n  const { toast } = useToast();\n  const queryClient = useQueryClient();\n  const composer = useCaseComposer();\n  const [sending, setSending] = useState(false);\n  /* True for a moment after a case goes, so the button can say so. */\n  const [sent, setSent] = useState(false);\n  const sentTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(\n    () => () => {\n      if (sentTimer.current) clearTimeout(sentTimer.current);\n    },\n    [],\n  );\n\n  /* Remembered before either engine starts, so the transcript extends what was\n     already typed instead of eating it. */\n  const draftBefore = useRef('');\n  const [segments, setSegments] = useState<TranscriptSegment[]>([]);\n  const dictation = useDictation({\n    onTranscript: (text) => {\n      const heard = text.trim();\n      if (!heard) return;\n      const base = draftBefore.current;\n      setValue(base ? `${base.trimEnd()} ${heard}` : heard);\n    },\n    onSegment: ({ text, at }) =>\n      setSegments((prev) => [...prev, { text: text.trim(), at: at / 1000 }]),\n  });\n\n  const startVoice = () => {\n    draftBefore.current = value;\n    setSegments([]);\n    void composer.recorder.start();\n    if (dictation.supported) dictation.start();\n  };\n  const stopVoice = () => {\n    composer.recorder.stop();\n    if (dictation.supported) dictation.stop();\n  };\n  const discardVoice = () => {\n    composer.recorder.discard();\n    setSegments([]);\n  };\n\n  const hasText = value.trim().length > 0;\n  /** A picture is on the card and nothing is written under it. */\n  const needsCaption = Boolean(composer.image) && !hasText;\n  const subject = subjectFrom(value, composer.hasAttachment);\n  const canSend =\n    !sending &&\n    !composer.uploading &&\n    !composer.recordingNow &&\n    !needsCaption &&\n    subject.length >= 3 &&\n    (hasText || Boolean(composer.voice));\n\n  const send = async () => {\n    if (!canSend || !tenant?.slug) return;\n    setSending(true);\n    playSound('send');\n    try {\n      const attachments = await composer.collect();\n      // Null means an upload failed and said so; filing the case anyway would\n      // drop the thing they chose to record.\n      if (attachments === null) return;\n      await serviceOperationsApi.create(tenant.slug, {\n        subject,\n        message: value.trim() || 'Voice note.',\n        attachments,\n      });\n      await queryClient.invalidateQueries({ queryKey: ['support-cases'] });\n      toast({\n        title: 'Sent to support',\n        description: 'We reply in Support and by email.',\n      });\n      setValue('');\n      composer.reset();\n      setSegments([]);\n      setSent(true);\n      if (sentTimer.current) clearTimeout(sentTimer.current);\n      sentTimer.current = setTimeout(() => {\n        setSent(false);\n        onSentEnd?.();\n      }, 2400);\n    } catch {\n      toast({ title: 'That did not send', variant: 'destructive' });\n    } finally {\n      setSending(false);\n    }\n  };\n\n  return {\n    composer,\n    segments,\n    sending,\n    sent,\n    canSend,\n    needsCaption,\n    startVoice,\n    stopVoice,\n    discardVoice,\n    send,\n    /** Something support-shaped is on the card, so the box is not a search. */\n    engaged: composer.hasAttachment || composer.recordingNow,\n    voiceSupported: composer.recorder.state !== 'unsupported',\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/dashboard/home/use-business-arrival.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The other half of the handoff between creating a business and arriving in it.
+ *
+ * `markBusinessJustCreated` has been written on every successful provision for
+ * a while; nothing read it. The flag, the peek-don't-consume semantics and the
+ * welcome modal were all built and never connected, so the payoff of the whole
+ * setup flow stayed a page transition.
+ *
+ * Four things this owns, all of them edge cases:
+ *
+ * 1. IT MATCHES THE SLUG. The flag names the business that was just made. The
+ *    dashboard can be showing a different workspace by the time it mounts —
+ *    switch workspaces, or land on a stale tenant while the real one loads —
+ *    and a welcome for a business you are not looking at is worse than none.
+ *
+ * 2. IT WAITS FOR A TENANT. `slug` is undefined on the first renders while the
+ *    workspace loads, so `arriving` is simply false until there is something to
+ *    compare against. Nothing is consumed in the meantime.
+ *
+ * 3. IT CLEARS ON ACKNOWLEDGEMENT, NOT ON READ. The dashboard renders once
+ *    while its data loads and again once it has it; a read-and-clear let the
+ *    first pass eat the flag before anything could be shown. Dismissal clears
+ *    it, which also means a refresh before dismissing still shows the arrival —
+ *    correct, since nothing has been acknowledged yet.
+ *
+ * 4. IT READS STORAGE ONCE, DURING RENDER, NOT IN AN EFFECT. A lazy initialiser
+ *    rather than `useEffect` + `setState`: the value cannot change under us
+ *    (only `acknowledge` writes it), and setting state from an effect to mirror
+ *    a synchronous read is the pattern the compiler lint rejects. It is
+ *    hydration-safe because `slug` is always undefined on the first client
+ *    render, so `arriving` is false there whatever storage says.
+ */
+export declare function useBusinessArrival(slug: string | undefined): {
+    arriving: boolean;
+};

package/dist/dashboard/home/use-business-arrival.js

@@ -0,0 +1,32 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useReducedMotion } from "motion/react";
+import {
+  clearJustCreatedBusiness,
+  peekJustCreatedBusiness
+} from "@withpotter/lib/onboarding-draft";
+const NAV_ARRIVAL_MS = 900;
+function useBusinessArrival(slug) {
+  const reduce = useReducedMotion();
+  const [flagged] = useState(
+    () => typeof window === "undefined" ? null : peekJustCreatedBusiness()
+  );
+  const [acknowledged, setAcknowledged] = useState(false);
+  const arriving = !!slug && flagged === slug && !acknowledged;
+  useEffect(() => {
+    if (!arriving) return;
+    const t = setTimeout(
+      () => {
+        clearJustCreatedBusiness();
+        setAcknowledged(true);
+      },
+      reduce ? 0 : NAV_ARRIVAL_MS
+    );
+    return () => clearTimeout(t);
+  }, [arriving, reduce]);
+  return { arriving };
+}
+export {
+  useBusinessArrival
+};
+//# sourceMappingURL=use-business-arrival.js.map

package/dist/dashboard/home/use-business-arrival.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/dashboard/home/use-business-arrival.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { useReducedMotion } from 'motion/react';\nimport {\n  clearJustCreatedBusiness,\n  peekJustCreatedBusiness,\n} from '@withpotter/lib/onboarding-draft';\n\n/**\n * How long the nav takes to finish landing, in step with the CSS that runs it\n * (`.pb-arriving .navitem` in shell.css). Kept here as the one number the\n * welcome waits on; the animation itself stays in CSS because it decorates\n * elements this file does not own.\n */\nconst NAV_ARRIVAL_MS = 900;\n\n/**\n * The other half of the handoff between creating a business and arriving in it.\n *\n * `markBusinessJustCreated` has been written on every successful provision for\n * a while; nothing read it. The flag, the peek-don't-consume semantics and the\n * welcome modal were all built and never connected, so the payoff of the whole\n * setup flow stayed a page transition.\n *\n * Four things this owns, all of them edge cases:\n *\n * 1. IT MATCHES THE SLUG. The flag names the business that was just made. The\n *    dashboard can be showing a different workspace by the time it mounts —\n *    switch workspaces, or land on a stale tenant while the real one loads —\n *    and a welcome for a business you are not looking at is worse than none.\n *\n * 2. IT WAITS FOR A TENANT. `slug` is undefined on the first renders while the\n *    workspace loads, so `arriving` is simply false until there is something to\n *    compare against. Nothing is consumed in the meantime.\n *\n * 3. IT CLEARS ON ACKNOWLEDGEMENT, NOT ON READ. The dashboard renders once\n *    while its data loads and again once it has it; a read-and-clear let the\n *    first pass eat the flag before anything could be shown. Dismissal clears\n *    it, which also means a refresh before dismissing still shows the arrival —\n *    correct, since nothing has been acknowledged yet.\n *\n * 4. IT READS STORAGE ONCE, DURING RENDER, NOT IN AN EFFECT. A lazy initialiser\n *    rather than `useEffect` + `setState`: the value cannot change under us\n *    (only `acknowledge` writes it), and setting state from an effect to mirror\n *    a synchronous read is the pattern the compiler lint rejects. It is\n *    hydration-safe because `slug` is always undefined on the first client\n *    render, so `arriving` is false there whatever storage says.\n */\nexport function useBusinessArrival(slug: string | undefined) {\n  const reduce = useReducedMotion();\n  const [flagged] = useState<string | null>(() =>\n    typeof window === 'undefined' ? null : peekJustCreatedBusiness(),\n  );\n  const [acknowledged, setAcknowledged] = useState(false);\n\n  const arriving = !!slug && flagged === slug && !acknowledged;\n\n  /**\n   * The arrival ends itself once the nav has landed.\n   *\n   * It used to end when the merchant dismissed the welcome modal. That modal\n   * is gone — Shopify's own onboarding guidance is dismissible cards rather\n   * than a dialog, and its one action now lives on the website card — so\n   * nothing was left to acknowledge, and `arriving` would have stayed true for\n   * the whole session: the assembly class never coming off, the session flag\n   * never cleared.\n   *\n   * The assembly IS the arrival, so when it finishes, the arrival is over.\n   * Under reduced motion there is no assembly to wait for.\n   */\n  useEffect(() => {\n    if (!arriving) return;\n    const t = setTimeout(\n      () => {\n        clearJustCreatedBusiness();\n        setAcknowledged(true);\n      },\n      reduce ? 0 : NAV_ARRIVAL_MS,\n    );\n    return () => clearTimeout(t);\n  }, [arriving, reduce]);\n\n  /** Drives the nav assembly. True from arrival until it has played. */\n  return { arriving };\n}\n"],"mappings":";AAEA,SAAS,WAAW,gBAAgB;AACpC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAQP,MAAM,iBAAiB;AAkChB,SAAS,mBAAmB,MAA0B;AAC3D,QAAM,SAAS,iBAAiB;AAChC,QAAM,CAAC,OAAO,IAAI;AAAA,IAAwB,MACxC,OAAO,WAAW,cAAc,OAAO,wBAAwB;AAAA,EACjE;AACA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,QAAM,WAAW,CAAC,CAAC,QAAQ,YAAY,QAAQ,CAAC;AAehD,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AACf,UAAM,IAAI;AAAA,MACR,MAAM;AACJ,iCAAyB;AACzB,wBAAgB,IAAI;AAAA,MACtB;AAAA,MACA,SAAS,IAAI;AAAA,IACf;AACA,WAAO,MAAM,aAAa,CAAC;AAAA,EAC7B,GAAG,CAAC,UAAU,MAAM,CAAC;AAGrB,SAAO,EAAE,SAAS;AACpB;","names":[]}

package/dist/dashboard/home/use-days-since-last-seen.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Whole days since this person last opened the home.
+ *
+ * Exists so the greeting's "welcome back" layer is REAL rather than a prop
+ * nobody passes. Deliberately client-only and best-effort: it drives one line
+ * of copy, so it isn't worth a column, a request, or a cross-device sync.
+ *
+ * `undefined` for a first-ever visit, which the greeting treats as "say
+ * nothing" — better to skip the line than to welcome a brand-new merchant back.
+ *
+ * Written with useSyncExternalStore rather than useState + useEffect: setting
+ * state synchronously inside an effect triggers a cascading render, and a lazy
+ * useState initialiser reading localStorage would desync SSR from hydration and
+ * make the title flicker.
+ */
+export declare function useDaysSinceLastSeen(): number | undefined;

package/dist/dashboard/home/use-days-since-last-seen.js

@@ -0,0 +1,46 @@
+"use client";
+import { useEffect, useSyncExternalStore } from "react";
+const KEY = "potter:home:lastSeen";
+function daysApart(fromMs, toMs) {
+  const midnight = (t) => {
+    const d = new Date(t);
+    d.setHours(0, 0, 0, 0);
+    return d.getTime();
+  };
+  return Math.round((midnight(toMs) - midnight(fromMs)) / 864e5);
+}
+let cached;
+let hasRead = false;
+function getSnapshot() {
+  if (hasRead) return cached;
+  hasRead = true;
+  try {
+    const previous = window.localStorage.getItem(KEY);
+    if (previous) {
+      const then = new Date(previous).getTime();
+      if (!Number.isNaN(then)) {
+        const diff = daysApart(then, Date.now());
+        if (diff >= 0) cached = diff;
+      }
+    }
+  } catch {
+  }
+  return cached;
+}
+const subscribe = () => () => {
+};
+const getServerSnapshot = () => void 0;
+function useDaysSinceLastSeen() {
+  const days = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(KEY, (/* @__PURE__ */ new Date()).toISOString());
+    } catch {
+    }
+  }, []);
+  return days;
+}
+export {
+  useDaysSinceLastSeen
+};
+//# sourceMappingURL=use-days-since-last-seen.js.map

package/dist/dashboard/home/use-days-since-last-seen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/dashboard/home/use-days-since-last-seen.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useSyncExternalStore } from 'react';\n\nconst KEY = 'potter:home:lastSeen';\n\n/** Calendar days between two instants — not elapsed 24h blocks. Someone who\n *  left at 6pm and returns at 9am has been away one day, not zero. */\nfunction daysApart(fromMs: number, toMs: number): number {\n  const midnight = (t: number) => {\n    const d = new Date(t);\n    d.setHours(0, 0, 0, 0);\n    return d.getTime();\n  };\n  return Math.round((midnight(toMs) - midnight(fromMs)) / 86_400_000);\n}\n\n/**\n * Read once, then cached for the life of the tab.\n *\n * `useSyncExternalStore` requires getSnapshot to return a STABLE value — if it\n * recomputed per call it would loop forever. It's also read before the visit is\n * stamped, so the answer describes the PREVIOUS visit rather than this one.\n */\nlet cached: number | undefined;\nlet hasRead = false;\n\nfunction getSnapshot(): number | undefined {\n  if (hasRead) return cached;\n  hasRead = true;\n  try {\n    const previous = window.localStorage.getItem(KEY);\n    if (previous) {\n      const then = new Date(previous).getTime();\n      if (!Number.isNaN(then)) {\n        const diff = daysApart(then, Date.now());\n        if (diff >= 0) cached = diff;\n      }\n    }\n  } catch {\n    // Private mode / storage disabled: the greeting just skips this layer.\n  }\n  return cached;\n}\n\n/** Never changes within a session, so there is nothing to subscribe to. */\nconst subscribe = () => () => {};\n\n/** Undefined on the server, so SSR and the first client paint agree. */\nconst getServerSnapshot = (): number | undefined => undefined;\n\n/**\n * Whole days since this person last opened the home.\n *\n * Exists so the greeting's \"welcome back\" layer is REAL rather than a prop\n * nobody passes. Deliberately client-only and best-effort: it drives one line\n * of copy, so it isn't worth a column, a request, or a cross-device sync.\n *\n * `undefined` for a first-ever visit, which the greeting treats as \"say\n * nothing\" — better to skip the line than to welcome a brand-new merchant back.\n *\n * Written with useSyncExternalStore rather than useState + useEffect: setting\n * state synchronously inside an effect triggers a cascading render, and a lazy\n * useState initialiser reading localStorage would desync SSR from hydration and\n * make the title flicker.\n */\nexport function useDaysSinceLastSeen(): number | undefined {\n  const days = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n\n  // Stamp this visit. A pure side effect, no state, so no cascade.\n  useEffect(() => {\n    try {\n      window.localStorage.setItem(KEY, new Date().toISOString());\n    } catch {\n      // Same as above: non-fatal.\n    }\n  }, []);\n\n  return days;\n}\n"],"mappings":";AAEA,SAAS,WAAW,4BAA4B;AAEhD,MAAM,MAAM;AAIZ,SAAS,UAAU,QAAgB,MAAsB;AACvD,QAAM,WAAW,CAAC,MAAc;AAC9B,UAAM,IAAI,IAAI,KAAK,CAAC;AACpB,MAAE,SAAS,GAAG,GAAG,GAAG,CAAC;AACrB,WAAO,EAAE,QAAQ;AAAA,EACnB;AACA,SAAO,KAAK,OAAO,SAAS,IAAI,IAAI,SAAS,MAAM,KAAK,KAAU;AACpE;AASA,IAAI;AACJ,IAAI,UAAU;AAEd,SAAS,cAAkC;AACzC,MAAI,QAAS,QAAO;AACpB,YAAU;AACV,MAAI;AACF,UAAM,WAAW,OAAO,aAAa,QAAQ,GAAG;AAChD,QAAI,UAAU;AACZ,YAAM,OAAO,IAAI,KAAK,QAAQ,EAAE,QAAQ;AACxC,UAAI,CAAC,OAAO,MAAM,IAAI,GAAG;AACvB,cAAM,OAAO,UAAU,MAAM,KAAK,IAAI,CAAC;AACvC,YAAI,QAAQ,EAAG,UAAS;AAAA,MAC1B;AAAA,IACF;AAAA,EACF,QAAQ;AAAA,EAER;AACA,SAAO;AACT;AAGA,MAAM,YAAY,MAAM,MAAM;AAAC;AAG/B,MAAM,oBAAoB,MAA0B;AAiB7C,SAAS,uBAA2C;AACzD,QAAM,OAAO,qBAAqB,WAAW,aAAa,iBAAiB;AAG3E,YAAU,MAAM;AACd,QAAI;AACF,aAAO,aAAa,QAAQ,MAAK,oBAAI,KAAK,GAAE,YAAY,CAAC;AAAA,IAC3D,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;","names":[]}

package/dist/dashboard/home/use-home-shape.d.ts

@@ -0,0 +1,61 @@
+/**
+ * The home's organizing decision: the page's SHAPE is a function of business
+ * state, not a fixed stack of panels.
+ *
+ * Before this existed the home rendered every section unconditionally, so a
+ * brand-new business met four stacked empty states (goal, revenue chart,
+ * activity, customers) and read as broken on day one, while an operating
+ * business still had onboarding cards competing with its money.
+ *
+ * Three stages, each with a different job:
+ *
+ *   setup      Nothing sellable exists yet. Setup cards carry the page, and
+ *              the money band and board still render, because a real zero is
+ *              information. Empty PANELS (feed, people) are withheld.
+ *   launched   Something is sellable but nothing has happened yet. Same shape;
+ *              the job is the first sale.
+ *   operating  Real money or real activity exists. Every panel shows.
+ *
+ * The distinction that matters: suppress empty PANELS, never suppress real
+ * FIGURES. An earlier pass hid the money band before the first sale and turned
+ * a too-empty page into a genuinely empty one.
+ *
+ * Stage is derived from signals that are true for EVERY archetype — a padel
+ * club records bookings, a shop records orders, an invoicing business records
+ * paid invoices. `hasActivity` is what keeps a cash-heavy or booking-first
+ * business from being stuck in `launched` just because online revenue is zero.
+ */
+export type HomeStage = 'setup' | 'launched' | 'operating';
+export interface HomeShapeInput {
+    /** A sellable thing exists (product, service, package, room, event). */
+    hasSellable: boolean;
+    /** Lifetime/period revenue from paid orders and invoices. */
+    revenue: number;
+    /** Orders in the current period. */
+    orders: number;
+    /** Bookings starting today (bookings-first archetypes). */
+    todaysBookings: number;
+    /** Upcoming bookings on the books. */
+    upcomingBookingsCount: number;
+    /** Tabs open right now (dine-in). */
+    openTabsCount: number;
+    /** Timeline entries that represent real commerce, not setup noise. */
+    activityCount: number;
+}
+export interface HomeShape {
+    stage: HomeStage;
+    /** Setup cards carry the page. */
+    showSetup: boolean;
+    /**
+     * The money band. Always true: a real £0 is information, and hiding it left
+     * a brand-new business staring at a blank page.
+     */
+    showMoney: boolean;
+    /**
+     * Individual PANELS that would render an empty state are dropped instead, so
+     * absence never stacks up into the page's dominant texture. Deliberately
+     * scoped to panels: figures (money) are always shown.
+     */
+    hideEmptyPanels: boolean;
+}
+export declare function resolveHomeShape(input: HomeShapeInput): HomeShape;

package/dist/dashboard/home/use-home-shape.js

@@ -0,0 +1,41 @@
+"use client";
+function resolveHomeShape(input) {
+  const {
+    hasSellable,
+    revenue,
+    orders,
+    todaysBookings,
+    upcomingBookingsCount,
+    openTabsCount,
+    activityCount
+  } = input;
+  const isOperating = revenue > 0 || orders > 0 || todaysBookings > 0 || upcomingBookingsCount > 0 || openTabsCount > 0 || activityCount > 0;
+  const stage = !hasSellable ? "setup" : isOperating ? "operating" : "launched";
+  return {
+    stage,
+    // ALWAYS offered; `SetupCards` renders null once every step is done.
+    //
+    // This used to be `stage !== 'operating'`, which conflated two unrelated
+    // things: whether a business is trading, and whether it has finished
+    // setting up. A club taking bookings daily that still has no domain and no
+    // payout account was shown neither card. Setup disappears when setup is
+    // COMPLETE — and since it now sits below the money band, it isn't competing
+    // with anything for the top of the page.
+    showSetup: true,
+    // ALWAYS. £0 is a fact about the business, not an absence — the money band
+    // is the spine of this page and belongs there from day one. An earlier pass
+    // hid it before the first sale, which turned a too-empty page into a
+    // genuinely empty one. What we do NOT want is empty panels stacking up;
+    // that is what `hideEmptyPanels` is for, below.
+    showMoney: true,
+    // Drops individual panels that have nothing in them — the feed, the people
+    // panel, and any empty board widget — until the business is operating. This
+    // is the narrow version of the rule: suppress empty PANELS, never suppress
+    // real figures.
+    hideEmptyPanels: stage !== "operating"
+  };
+}
+export {
+  resolveHomeShape
+};
+//# sourceMappingURL=use-home-shape.js.map