@withpotter/components 0.13.0-next.101

package/dist/shell/switcher-scrim.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { durations, eases } from "@withpotter/lib/motion";
+function SwitcherScrim() {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "pv-psw-scrim",
+      "aria-hidden": "true",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: durations.fast, ease: eases.out }
+    }
+  );
+}
+export {
+  SwitcherScrim
+};
+//# sourceMappingURL=switcher-scrim.js.map

package/dist/shell/switcher-scrim.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/switcher-scrim.tsx"],"sourcesContent":["'use client';\n\nimport { motion } from 'motion/react';\nimport { durations, eases } from '@withpotter/lib/motion';\n\n/** The dim behind the switcher menu. Styled by `.pv-psw-scrim` in shell.css. */\nexport function SwitcherScrim() {\n  return (\n    <motion.div\n      className=\"pv-psw-scrim\"\n      aria-hidden=\"true\"\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n      transition={{ duration: durations.fast, ease: eases.out }}\n    />\n  );\n}\n"],"mappings":";AAQI;AANJ,SAAS,cAAc;AACvB,SAAS,WAAW,aAAa;AAG1B,SAAS,gBAAgB;AAC9B,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,MAAM,EAAE,SAAS,EAAE;AAAA,MACnB,YAAY,EAAE,UAAU,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA,EAC1D;AAEJ;","names":[]}

package/dist/shell/switcher-workspace-list.d.ts

@@ -0,0 +1,50 @@
+import type { Workspace } from '@withpotter/lib/auth-context';
+/**
+ * The other workspaces you could switch to, the ways to reach the rest of them,
+ * and the person: their email and Log out, last.
+ *
+ * One menu for all of it, opening downward from the business name (John,
+ * 2026-10-11, after Linear). The account used to be a button at the foot of the
+ * rail with a menu of its own opening upward; two menus opening in opposite
+ * directions for one person's errands was one too many.
+ *
+ * NO HEADING, AND NO RULE ABOVE IT — John, 2026-09-03: *"theres also no need
+ * for the workspaces title and the divider before the active workspace"*.
+ *
+ * They were the two things telling a merchant that the rows above and the rows
+ * below are different KINDS of row, and in a menu whose whole job is "which
+ * business am I in" that is a distinction only we care about: every row in the
+ * run is a business, the first one happens to be the one you are in, and it
+ * already says so with a tick and a resting fill. A heading and a hairline
+ * between the workspace you have and the workspaces you have is furniture
+ * around a list that reads perfectly as one list.
+ *
+ * A file of its own because `product-switcher` sits at the 500-line house
+ * limit and this is the half that is about the portfolio rather than about
+ * this business.
+ */
+export declare function SwitcherWorkspaceList({ shown, total, describe, onSwitch, onAdd, onManage, user, onAccount, onLogout, }: {
+    /** The few listed inline — most recently used first. */
+    shown: Workspace[];
+    /** How many the merchant has in all, including the one they are in. */
+    total: number;
+    /** A row's sub-line: what the business does, and the hat you wear there. */
+    describe: (w: Workspace) => string;
+    onSwitch: (slug: string) => void;
+    onAdd: () => void;
+    onManage: () => void;
+    /** The signed-in account, shown above Log out. */
+    user?: {
+        name?: string | null;
+        email?: string;
+        avatarUrl?: string | null;
+    };
+    /** The face and name are the door to the account's settings. */
+    onAccount: () => void;
+    onLogout: () => void;
+    /**
+     * Kept for callers. A host's rows (`AccountMenuRowsProvider`, such as
+     * Upgrade) show in Settings > Account > Profile only, not in this menu.
+     */
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/shell/switcher-workspace-list.js

@@ -0,0 +1,115 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { LayoutGrid, LogOut, Plus } from "lucide-react";
+import { generatedAvatarUri } from "@withpotter/ui-kit/generated-avatar";
+import { WorkspaceMark } from "./workspace-mark";
+function SwitcherWorkspaceList({
+  shown,
+  total,
+  describe,
+  onSwitch,
+  onAdd,
+  onManage,
+  user,
+  onAccount,
+  onLogout
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    shown.length > 0 && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Other businesses", children: shown.map((w) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "pv-psw-item",
+        role: "menuitem",
+        onClick: () => onSwitch(w.tenant.slug),
+        children: [
+          /* @__PURE__ */ jsx(
+            WorkspaceMark,
+            {
+              className: "pv-psw-ic",
+              logo: w.tenant.businessLogo,
+              label: w.tenant.businessName
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "pv-psw-txt", children: [
+            /* @__PURE__ */ jsx("b", { children: w.tenant.businessName }),
+            describe(w) && /* @__PURE__ */ jsx("span", { className: "cap", children: describe(w) })
+          ] })
+        ]
+      },
+      w.tenant.slug
+    )) }),
+    /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Businesses", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "pv-psw-row",
+          role: "menuitem",
+          onClick: onAdd,
+          children: [
+            /* @__PURE__ */ jsx(Plus, { width: 15, height: 15 }),
+            "Start a business"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "pv-psw-row",
+          role: "menuitem",
+          onClick: onManage,
+          children: [
+            /* @__PURE__ */ jsx(LayoutGrid, { width: 15, height: 15 }),
+            "Manage all businesses",
+            /* @__PURE__ */ jsx("span", { className: "pv-psw-count", children: total })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "pv-psw-sep" }),
+    /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Your account", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "pv-psw-me",
+          role: "menuitem",
+          onClick: onAccount,
+          children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                className: "pv-psw-me-face",
+                src: user?.avatarUrl || generatedAvatarUri(user?.email ?? "potter"),
+                alt: ""
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "pv-psw-me-txt", children: [
+              /* @__PURE__ */ jsx("b", { children: user?.name || user?.email || "Your account" }),
+              user?.email && user?.name && /* @__PURE__ */ jsx("span", { children: user.email })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "pv-psw-row pv-psw-row-danger",
+          role: "menuitem",
+          onClick: onLogout,
+          children: [
+            /* @__PURE__ */ jsx(LogOut, { width: 15, height: 15 }),
+            "Log out"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  SwitcherWorkspaceList
+};
+//# sourceMappingURL=switcher-workspace-list.js.map

package/dist/shell/switcher-workspace-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/switcher-workspace-list.tsx"],"sourcesContent":["'use client';\n\nimport { LayoutGrid, LogOut, Plus } from 'lucide-react';\nimport type { Workspace } from '@withpotter/lib/auth-context';\nimport { generatedAvatarUri } from '@withpotter/ui-kit/generated-avatar';\nimport { WorkspaceMark } from './workspace-mark';\n\n/**\n * The other workspaces you could switch to, the ways to reach the rest of them,\n * and the person: their email and Log out, last.\n *\n * One menu for all of it, opening downward from the business name (John,\n * 2026-10-11, after Linear). The account used to be a button at the foot of the\n * rail with a menu of its own opening upward; two menus opening in opposite\n * directions for one person's errands was one too many.\n *\n * NO HEADING, AND NO RULE ABOVE IT — John, 2026-09-03: *\"theres also no need\n * for the workspaces title and the divider before the active workspace\"*.\n *\n * They were the two things telling a merchant that the rows above and the rows\n * below are different KINDS of row, and in a menu whose whole job is \"which\n * business am I in\" that is a distinction only we care about: every row in the\n * run is a business, the first one happens to be the one you are in, and it\n * already says so with a tick and a resting fill. A heading and a hairline\n * between the workspace you have and the workspaces you have is furniture\n * around a list that reads perfectly as one list.\n *\n * A file of its own because `product-switcher` sits at the 500-line house\n * limit and this is the half that is about the portfolio rather than about\n * this business.\n */\nexport function SwitcherWorkspaceList({\n  shown,\n  total,\n  describe,\n  onSwitch,\n  onAdd,\n  onManage,\n  user,\n  onAccount,\n  onLogout,\n}: {\n  /** The few listed inline — most recently used first. */\n  shown: Workspace[];\n  /** How many the merchant has in all, including the one they are in. */\n  total: number;\n  /** A row's sub-line: what the business does, and the hat you wear there. */\n  describe: (w: Workspace) => string;\n  onSwitch: (slug: string) => void;\n  onAdd: () => void;\n  onManage: () => void;\n  /** The signed-in account, shown above Log out. */\n  user?: { name?: string | null; email?: string; avatarUrl?: string | null };\n  /** The face and name are the door to the account's settings. */\n  onAccount: () => void;\n  onLogout: () => void;\n  /**\n   * Kept for callers. A host's rows (`AccountMenuRowsProvider`, such as\n   * Upgrade) show in Settings > Account > Profile only, not in this menu.\n   */\n  onClose: () => void;\n}) {\n  return (\n    <>\n      {shown.length > 0 && (\n        <div role=\"group\" aria-label=\"Other businesses\">\n          {shown.map((w: Workspace) => (\n            <button\n              type=\"button\"\n              key={w.tenant.slug}\n              className=\"pv-psw-item\"\n              role=\"menuitem\"\n              onClick={() => onSwitch(w.tenant.slug)}\n            >\n              <WorkspaceMark\n                className=\"pv-psw-ic\"\n                logo={w.tenant.businessLogo}\n                label={w.tenant.businessName}\n              />\n              <span className=\"pv-psw-txt\">\n                <b>{w.tenant.businessName}</b>\n                {/* What the business does, and — only when it's news — the hat\n                    you wear there. \"Owner\" repeated down a solo operator's\n                    list is not news. */}\n                {describe(w) && <span className=\"cap\">{describe(w)}</span>}\n              </span>\n            </button>\n          ))}\n        </div>\n      )}\n      <div role=\"group\" aria-label=\"Businesses\">\n        <button\n          type=\"button\"\n          className=\"pv-psw-row\"\n          role=\"menuitem\"\n          onClick={onAdd}\n        >\n          <Plus width={15} height={15} />\n          Start a business\n        </button>\n        <button\n          type=\"button\"\n          className=\"pv-psw-row\"\n          role=\"menuitem\"\n          onClick={onManage}\n        >\n          <LayoutGrid width={15} height={15} />\n          Manage all businesses\n          <span className=\"pv-psw-count\">{total}</span>\n        </button>\n      </div>\n      <div className=\"pv-psw-sep\" />\n      <div role=\"group\" aria-label=\"Your account\">\n        <button\n          type=\"button\"\n          className=\"pv-psw-me\"\n          role=\"menuitem\"\n          onClick={onAccount}\n        >\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img\n            className=\"pv-psw-me-face\"\n            src={user?.avatarUrl || generatedAvatarUri(user?.email ?? 'potter')}\n            alt=\"\"\n          />\n          <span className=\"pv-psw-me-txt\">\n            <b>{user?.name || user?.email || 'Your account'}</b>\n            {/* Only when it is not already the line above: someone who has\n                never set a name has their email in both slots otherwise. */}\n            {user?.email && user?.name && <span>{user.email}</span>}\n          </span>\n        </button>\n        <button\n          type=\"button\"\n          className=\"pv-psw-row pv-psw-row-danger\"\n          role=\"menuitem\"\n          onClick={onLogout}\n        >\n          <LogOut width={15} height={15} />\n          Log out\n        </button>\n      </div>\n    </>\n  );\n}\n"],"mappings":";AA+DI,mBAWU,KAKA,YAhBV;AA7DJ,SAAS,YAAY,QAAQ,YAAY;AAEzC,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AA0BvB,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAoBG;AACD,SACE,iCACG;AAAA,UAAM,SAAS,KACd,oBAAC,SAAI,MAAK,SAAQ,cAAW,oBAC1B,gBAAM,IAAI,CAAC,MACV;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QAEL,WAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAS,MAAM,SAAS,EAAE,OAAO,IAAI;AAAA,QAErC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAM,EAAE,OAAO;AAAA,cACf,OAAO,EAAE,OAAO;AAAA;AAAA,UAClB;AAAA,UACA,qBAAC,UAAK,WAAU,cACd;AAAA,gCAAC,OAAG,YAAE,OAAO,cAAa;AAAA,YAIzB,SAAS,CAAC,KAAK,oBAAC,UAAK,WAAU,OAAO,mBAAS,CAAC,GAAE;AAAA,aACrD;AAAA;AAAA;AAAA,MAhBK,EAAE,OAAO;AAAA,IAiBhB,CACD,GACH;AAAA,IAEF,qBAAC,SAAI,MAAK,SAAQ,cAAW,cAC3B;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAS;AAAA,UAET;AAAA,gCAAC,QAAK,OAAO,IAAI,QAAQ,IAAI;AAAA,YAAE;AAAA;AAAA;AAAA,MAEjC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAS;AAAA,UAET;AAAA,gCAAC,cAAW,OAAO,IAAI,QAAQ,IAAI;AAAA,YAAE;AAAA,YAErC,oBAAC,UAAK,WAAU,gBAAgB,iBAAM;AAAA;AAAA;AAAA,MACxC;AAAA,OACF;AAAA,IACA,oBAAC,SAAI,WAAU,cAAa;AAAA,IAC5B,qBAAC,SAAI,MAAK,SAAQ,cAAW,gBAC3B;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAS;AAAA,UAGT;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,KAAK,MAAM,aAAa,mBAAmB,MAAM,SAAS,QAAQ;AAAA,gBAClE,KAAI;AAAA;AAAA,YACN;AAAA,YACA,qBAAC,UAAK,WAAU,iBACd;AAAA,kCAAC,OAAG,gBAAM,QAAQ,MAAM,SAAS,gBAAe;AAAA,cAG/C,MAAM,SAAS,MAAM,QAAQ,oBAAC,UAAM,eAAK,OAAM;AAAA,eAClD;AAAA;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAS;AAAA,UAET;AAAA,gCAAC,UAAO,OAAO,IAAI,QAAQ,IAAI;AAAA,YAAE;AAAA;AAAA;AAAA,MAEnC;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/shell/take-payment-button.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Take payment, pinned to the rail on every screen.
+ *
+ * The flow and the plumbing were both already here: `QuickPaymentLinkModal`
+ * writes the one-line invoice, `TakePaymentContext` opens it, and the layout
+ * mounts it once. What was missing is the door. The context's own docblock
+ * argued for this — "a merchant who needs to charge someone is rarely on the
+ * home when they realise it" — and then the only caller ever added was the
+ * home's Actions column, which is the exact navigation it set out to remove.
+ *
+ * TWO WAYS, because there are two. You either ask for money or you record money
+ * that already came, and in this market the second is the common one: the
+ * customer transfers, the bank tells them and not us, and the invoice sits
+ * saying unpaid until a person says otherwise.
+ *
+ * There is deliberately no "charge a card". The reference console offers it
+ * because it sells the reader that makes it safe; here it would mean keying a
+ * customer's card into a dashboard, which is a fraud surface bought to serve a
+ * flow that transfers already cover.
+ *
+ * Quiet, not brand-filled. This renders on every screen for the life of the
+ * account, and a filled slab in the rail is the loudest thing in the app on
+ * every page forever — loudness that never changes stops carrying meaning. The
+ * colour is better spent where it is earned.
+ *
+ * Gated on `canManageFinance`, matching the home: both branches write money, so
+ * the gate is about what they record rather than what they show. Renders
+ * nothing while permissions resolve, for the same reason the team stack does.
+ */
+export declare function TakePaymentButton({ collapsed, }: {
+    collapsed?: boolean;
+}): import("react").JSX.Element | null;

package/dist/shell/take-payment-button.js

@@ -0,0 +1,83 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { Banknote, Link2, Landmark } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { usePermissions } from "@withpotter/lib/use-permissions";
+import { useTakePayment } from "@withpotter/components/dashboard/take-payment-context";
+import { RecordPaymentPicker } from "./record-payment-picker";
+function TakePaymentButton({
+  collapsed = false
+}) {
+  const { can, loading } = usePermissions();
+  const takePayment = useTakePayment();
+  const [menu, setMenu] = useState(false);
+  const [recording, setRecording] = useState(false);
+  if (loading || !can("canManageFinance")) return null;
+  const choose = (fn) => () => {
+    setMenu(false);
+    fn();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "side-foot-take", children: /* @__PURE__ */ jsxs(Popover.Root, { open: menu, onOpenChange: setMenu, children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: collapsed ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "inverse",
+          size: "icon",
+          "aria-label": "Take payment",
+          title: "Take payment",
+          children: /* @__PURE__ */ jsx(Banknote, {})
+        }
+      ) : /* @__PURE__ */ jsx(Button, { variant: "inverse", className: "w-full", children: "Take payment" }) }),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+        Popover.Content,
+        {
+          side: "top",
+          align: "start",
+          sideOffset: 8,
+          collisionPadding: 12,
+          className: "pv-menu-surface pv-psw-account",
+          children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "pv-psw-row",
+                onClick: choose(takePayment),
+                children: [
+                  /* @__PURE__ */ jsx(Link2, { width: 15, height: 15 }),
+                  "Send a payment link"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "pv-psw-row",
+                onClick: choose(() => setRecording(true)),
+                children: [
+                  /* @__PURE__ */ jsx(Landmark, { width: 15, height: 15 }),
+                  "Record a payment"
+                ]
+              }
+            )
+          ]
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      RecordPaymentPicker,
+      {
+        open: recording,
+        onClose: () => setRecording(false)
+      }
+    )
+  ] });
+}
+export {
+  TakePaymentButton
+};
+//# sourceMappingURL=take-payment-button.js.map

package/dist/shell/take-payment-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/take-payment-button.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport * as Popover from '@radix-ui/react-popover';\nimport { Banknote, Link2, Landmark } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { usePermissions } from '@withpotter/lib/use-permissions';\nimport { useTakePayment } from '@withpotter/components/dashboard/take-payment-context';\nimport { RecordPaymentPicker } from './record-payment-picker';\n\n/**\n * Take payment, pinned to the rail on every screen.\n *\n * The flow and the plumbing were both already here: `QuickPaymentLinkModal`\n * writes the one-line invoice, `TakePaymentContext` opens it, and the layout\n * mounts it once. What was missing is the door. The context's own docblock\n * argued for this — \"a merchant who needs to charge someone is rarely on the\n * home when they realise it\" — and then the only caller ever added was the\n * home's Actions column, which is the exact navigation it set out to remove.\n *\n * TWO WAYS, because there are two. You either ask for money or you record money\n * that already came, and in this market the second is the common one: the\n * customer transfers, the bank tells them and not us, and the invoice sits\n * saying unpaid until a person says otherwise.\n *\n * There is deliberately no \"charge a card\". The reference console offers it\n * because it sells the reader that makes it safe; here it would mean keying a\n * customer's card into a dashboard, which is a fraud surface bought to serve a\n * flow that transfers already cover.\n *\n * Quiet, not brand-filled. This renders on every screen for the life of the\n * account, and a filled slab in the rail is the loudest thing in the app on\n * every page forever — loudness that never changes stops carrying meaning. The\n * colour is better spent where it is earned.\n *\n * Gated on `canManageFinance`, matching the home: both branches write money, so\n * the gate is about what they record rather than what they show. Renders\n * nothing while permissions resolve, for the same reason the team stack does.\n */\nexport function TakePaymentButton({\n  collapsed = false,\n}: {\n  collapsed?: boolean;\n}) {\n  const { can, loading } = usePermissions();\n  const takePayment = useTakePayment();\n  const [menu, setMenu] = useState(false);\n  const [recording, setRecording] = useState(false);\n\n  if (loading || !can('canManageFinance')) return null;\n\n  const choose = (fn: () => void) => () => {\n    setMenu(false);\n    fn();\n  };\n\n  return (\n    <>\n      <div className=\"side-foot-take\">\n        <Popover.Root open={menu} onOpenChange={setMenu}>\n          <Popover.Trigger asChild>\n            {collapsed ? (\n              <Button\n                variant=\"inverse\"\n                size=\"icon\"\n                aria-label=\"Take payment\"\n                title=\"Take payment\"\n              >\n                <Banknote />\n              </Button>\n            ) : (\n              <Button variant=\"inverse\" className=\"w-full\">\n                Take payment\n              </Button>\n            )}\n          </Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              side=\"top\"\n              align=\"start\"\n              sideOffset={8}\n              collisionPadding={12}\n              className=\"pv-menu-surface pv-psw-account\"\n            >\n              <button\n                type=\"button\"\n                className=\"pv-psw-row\"\n                onClick={choose(takePayment)}\n              >\n                <Link2 width={15} height={15} />\n                Send a payment link\n              </button>\n              <button\n                type=\"button\"\n                className=\"pv-psw-row\"\n                onClick={choose(() => setRecording(true))}\n              >\n                <Landmark width={15} height={15} />\n                Record a payment\n              </button>\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover.Root>\n      </div>\n\n      <RecordPaymentPicker\n        open={recording}\n        onClose={() => setRecording(false)}\n      />\n    </>\n  );\n}\n"],"mappings":";AAyDI,mBAWY,KAgBF,YA3BV;AAvDJ,SAAS,gBAAgB;AACzB,YAAY,aAAa;AACzB,SAAS,UAAU,OAAO,gBAAgB;AAC1C,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AA+B7B,SAAS,kBAAkB;AAAA,EAChC,YAAY;AACd,GAEG;AACD,QAAM,EAAE,KAAK,QAAQ,IAAI,eAAe;AACxC,QAAM,cAAc,eAAe;AACnC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,MAAI,WAAW,CAAC,IAAI,kBAAkB,EAAG,QAAO;AAEhD,QAAM,SAAS,CAAC,OAAmB,MAAM;AACvC,YAAQ,KAAK;AACb,OAAG;AAAA,EACL;AAEA,SACE,iCACE;AAAA,wBAAC,SAAI,WAAU,kBACb,+BAAC,QAAQ,MAAR,EAAa,MAAM,MAAM,cAAc,SACtC;AAAA,0BAAC,QAAQ,SAAR,EAAgB,SAAO,MACrB,sBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,cAAW;AAAA,UACX,OAAM;AAAA,UAEN,8BAAC,YAAS;AAAA;AAAA,MACZ,IAEA,oBAAC,UAAO,SAAQ,WAAU,WAAU,UAAS,0BAE7C,GAEJ;AAAA,MACA,oBAAC,QAAQ,QAAR,EACC;AAAA,QAAC,QAAQ;AAAA,QAAR;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,YAAY;AAAA,UACZ,kBAAkB;AAAA,UAClB,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS,OAAO,WAAW;AAAA,gBAE3B;AAAA,sCAAC,SAAM,OAAO,IAAI,QAAQ,IAAI;AAAA,kBAAE;AAAA;AAAA;AAAA,YAElC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS,OAAO,MAAM,aAAa,IAAI,CAAC;AAAA,gBAExC;AAAA,sCAAC,YAAS,OAAO,IAAI,QAAQ,IAAI;AAAA,kBAAE;AAAA;AAAA;AAAA,YAErC;AAAA;AAAA;AAAA,MACF,GACF;AAAA,OACF,GACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS,MAAM,aAAa,KAAK;AAAA;AAAA,IACnC;AAAA,KACF;AAEJ;","names":[]}

package/dist/shell/unified-settings-modal.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Settings, yours and the business's, in one window.
+ *
+ * It is the account modal's shell (a rail on the left, the page on the right)
+ * with every row in one list. A search at the top matches row names and the
+ * sections inside them, so "passkeys" or "time zone" finds its row. Rows the
+ * member may not open are not drawn. Get help leaves the window, so it carries
+ * an arrow.
+ *
+ * It replaces the window that showed each page in a frame: the pages are drawn
+ * here directly, so there is no second copy of the app running behind it.
+ */
+export declare function UnifiedSettingsModal({ open, href, onClose, }: {
+    open: boolean;
+    /** A settings address to open on. A row's own page when it owns it. */
+    href?: string | null;
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/shell/unified-settings-modal.js

@@ -0,0 +1,195 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import Link from "next/link";
+import { ArrowLeft, ArrowUpRight, Search } from "lucide-react";
+import { Dialog, DialogContent, DialogTitle } from "@withpotter/ui-kit/dialog";
+import { Input } from "@withpotter/ui-kit/input";
+import { TextMorph } from "@withpotter/ui-kit/text-morph";
+import {
+  SettingsStatusSlot,
+  SettingsSurface
+} from "@withpotter/pages-core/dashboard/settings/_components/settings-ui";
+import {
+  SettingsDrillProvider
+} from "@withpotter/pages-core/dashboard/settings/_components/settings-drill";
+import { usePermissions } from "@withpotter/lib/use-permissions";
+import { SettingsPanel } from "./settings-panels";
+import {
+  HELP_HREF,
+  HELP_ICON,
+  SETTINGS_ROWS,
+  matchRows,
+  rowForHref
+} from "./settings-rows";
+const ROW_CLASS = "flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left text-sm font-medium transition-colors";
+function UnifiedSettingsModal({
+  open,
+  href,
+  onClose
+}) {
+  const { can, loading } = usePermissions();
+  const [query, setQuery] = useState("");
+  const [view, setView] = useState(null);
+  const [picked, setPicked] = useState(null);
+  const [seen, setSeen] = useState(void 0);
+  if (open && seen !== href) {
+    setSeen(href);
+    setPicked(null);
+    setQuery("");
+    setView(null);
+  }
+  const rows = useMemo(
+    () => SETTINGS_ROWS.filter(
+      (r) => !r.permission || loading || r.permission.some((p) => can(p))
+    ),
+    [can, loading]
+  );
+  const shown = matchRows(rows, query);
+  const drill = useMemo(
+    () => ({
+      view,
+      open: (key, title) => setView({ key, title }),
+      openRow: (row, key, title) => {
+        setPicked(row);
+        setView({ key, title });
+      },
+      back: () => setView(null)
+    }),
+    [view]
+  );
+  const wanted = picked ?? rowForHref(href);
+  const current = rows.find((r) => r.id === wanted) ?? rows[0];
+  const HelpIcon = HELP_ICON;
+  const [statusSlot, setStatusSlot] = useState(null);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      "aria-label": "Settings",
+      className: "flex h-[min(78vh,640px)] max-w-[860px] gap-0 overflow-hidden p-0",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "nav",
+          {
+            "aria-label": "Settings sections",
+            onKeyDown: (e) => {
+              if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+              const rowsEls = Array.from(
+                e.currentTarget.querySelectorAll("button[data-row]")
+              );
+              const at = rowsEls.indexOf(document.activeElement);
+              if (at === -1) return;
+              e.preventDefault();
+              const next = e.key === "ArrowDown" ? (at + 1) % rowsEls.length : (at - 1 + rowsEls.length) % rowsEls.length;
+              rowsEls[next].focus();
+            },
+            className: "flex w-[224px] shrink-0 flex-col gap-1 overflow-y-auto border-r border-[var(--border-subtle)] bg-[var(--bg-muted)] p-3",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2 rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-base)] px-3 text-[var(--text-tertiary)] focus-within:text-[var(--text-primary)]", children: [
+                /* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    variant: "bare",
+                    value: query,
+                    onChange: (e) => setQuery(e.target.value),
+                    placeholder: "Search",
+                    "aria-label": "Search settings",
+                    className: "min-w-0 flex-1"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 pt-1 text-xs font-medium text-[var(--text-tertiary)]", children: "Settings" }),
+              shown.length === 0 && /* @__PURE__ */ jsxs("p", { className: "px-3 py-2 text-sm text-[var(--text-tertiary)]", children: [
+                "Nothing matches \u201C",
+                query,
+                "\u201D."
+              ] }),
+              shown.map((r) => {
+                const selected = r.id === current?.id;
+                const Icon = r.icon;
+                if (r.href) {
+                  return /* @__PURE__ */ jsxs(
+                    Link,
+                    {
+                      "data-row": true,
+                      href: r.href,
+                      onClick: onClose,
+                      className: `${ROW_CLASS} text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]`,
+                      children: [
+                        /* @__PURE__ */ jsx(Icon, { className: "size-[18px] shrink-0" }),
+                        /* @__PURE__ */ jsx("span", { className: "truncate", children: r.name })
+                      ]
+                    },
+                    r.id
+                  );
+                }
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    "data-row": true,
+                    type: "button",
+                    "aria-current": selected ? "page" : void 0,
+                    onClick: () => {
+                      setPicked(r.id);
+                      setView(null);
+                    },
+                    className: `${ROW_CLASS} ${selected ? "bg-[var(--bg-base)] text-[var(--text-primary)] shadow-sm" : "text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]"}`,
+                    children: [
+                      /* @__PURE__ */ jsx(Icon, { className: "size-[18px] shrink-0" }),
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: r.name })
+                    ]
+                  },
+                  r.id
+                );
+              }),
+              /* @__PURE__ */ jsx("div", { className: "mt-auto border-t border-[var(--border-subtle)] pt-2", children: /* @__PURE__ */ jsxs(
+                Link,
+                {
+                  href: HELP_HREF,
+                  onClick: onClose,
+                  className: `${ROW_CLASS} text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]`,
+                  children: [
+                    /* @__PURE__ */ jsx(HelpIcon, { className: "size-[18px] shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Get help" }),
+                    /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-4 shrink-0 text-[var(--text-tertiary)]" })
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-[var(--border-subtle)] px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+              view && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: drill.back,
+                  "aria-label": `Back to ${current?.name ?? "Settings"}`,
+                  className: "grid size-7 shrink-0 place-items-center rounded-lg text-[var(--text-secondary)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]",
+                  children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DialogTitle,
+                {
+                  "aria-label": view?.title ?? current?.name ?? "Settings",
+                  className: "truncate text-md font-semibold text-[var(--text-primary)]",
+                  children: /* @__PURE__ */ jsx(TextMorph, { as: "span", children: view?.title ?? current?.name ?? "Settings" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mr-7 flex items-center gap-2", children: /* @__PURE__ */ jsx("div", { ref: setStatusSlot, className: "flex items-center" }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-1 py-4 outline-none", children: current && /* @__PURE__ */ jsx(SettingsDrillProvider, { value: drill, children: /* @__PURE__ */ jsx(SettingsSurface, { variant: "plain", children: /* @__PURE__ */ jsx(SettingsStatusSlot, { element: statusSlot, children: /* @__PURE__ */ jsx(SettingsPanel, { id: current.id }, current.id) }) }) }) })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  UnifiedSettingsModal
+};
+//# sourceMappingURL=unified-settings-modal.js.map

package/dist/shell/unified-settings-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/unified-settings-modal.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\nimport Link from 'next/link';\nimport { ArrowLeft, ArrowUpRight, Search } from 'lucide-react';\nimport { Dialog, DialogContent, DialogTitle } from '@withpotter/ui-kit/dialog';\nimport { Input } from '@withpotter/ui-kit/input';\nimport { TextMorph } from '@withpotter/ui-kit/text-morph';\nimport {\n  SettingsStatusSlot,\n  SettingsSurface,\n} from '@withpotter/pages-core/dashboard/settings/_components/settings-ui';\nimport {\n  SettingsDrillProvider,\n  type SettingsDrill,\n} from '@withpotter/pages-core/dashboard/settings/_components/settings-drill';\nimport { usePermissions } from '@withpotter/lib/use-permissions';\nimport { SettingsPanel } from './settings-panels';\nimport {\n  HELP_HREF,\n  HELP_ICON,\n  SETTINGS_ROWS,\n  matchRows,\n  rowForHref,\n  type SettingsRowId,\n} from './settings-rows';\n\nconst ROW_CLASS =\n  'flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left text-sm font-medium transition-colors';\n\n/**\n * Settings, yours and the business's, in one window.\n *\n * It is the account modal's shell (a rail on the left, the page on the right)\n * with every row in one list. A search at the top matches row names and the\n * sections inside them, so \"passkeys\" or \"time zone\" finds its row. Rows the\n * member may not open are not drawn. Get help leaves the window, so it carries\n * an arrow.\n *\n * It replaces the window that showed each page in a frame: the pages are drawn\n * here directly, so there is no second copy of the app running behind it.\n */\nexport function UnifiedSettingsModal({\n  open,\n  href,\n  onClose,\n}: {\n  open: boolean;\n  /** A settings address to open on. A row's own page when it owns it. */\n  href?: string | null;\n  onClose: () => void;\n}) {\n  const { can, loading } = usePermissions();\n  const [query, setQuery] = useState('');\n  // A level inside the open row (a policy's editor). Cleared when the row, or\n  // the address the window was opened on, changes.\n  const [view, setView] = useState<SettingsDrill['view']>(null);\n  // The row chosen inside the window, and the address it was opened on, so\n  // opening on a different address moves the selection (adjusted in render).\n  const [picked, setPicked] = useState<SettingsRowId | null>(null);\n  const [seen, setSeen] = useState<string | null | undefined>(undefined);\n  if (open && seen !== href) {\n    setSeen(href);\n    setPicked(null);\n    setQuery('');\n    setView(null);\n  }\n\n  const rows = useMemo(\n    () =>\n      SETTINGS_ROWS.filter(\n        (r) => !r.permission || loading || r.permission.some((p) => can(p)),\n      ),\n    [can, loading],\n  );\n  const shown = matchRows(rows, query);\n\n  const drill = useMemo<SettingsDrill>(\n    () => ({\n      view,\n      open: (key, title) => setView({ key, title }),\n      openRow: (row, key, title) => {\n        setPicked(row as SettingsRowId);\n        setView({ key, title });\n      },\n      back: () => setView(null),\n    }),\n    [view],\n  );\n\n  const wanted = picked ?? rowForHref(href);\n  // An address that names a row the member cannot see falls to their first.\n  const current = rows.find((r) => r.id === wanted) ?? rows[0];\n  const HelpIcon = HELP_ICON;\n\n  const [statusSlot, setStatusSlot] = useState<HTMLElement | null>(null);\n\n  return (\n    <Dialog open={open} onOpenChange={(next) => !next && onClose()}>\n      <DialogContent\n        aria-label=\"Settings\"\n        className=\"flex h-[min(78vh,640px)] max-w-[860px] gap-0 overflow-hidden p-0\"\n      >\n        <nav\n          aria-label=\"Settings sections\"\n          onKeyDown={(e) => {\n            // Up and Down move between the rows, like the account modal's rail.\n            if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;\n            const rowsEls = Array.from(\n              e.currentTarget.querySelectorAll<HTMLElement>('button[data-row]'),\n            );\n            const at = rowsEls.indexOf(document.activeElement as HTMLElement);\n            if (at === -1) return;\n            e.preventDefault();\n            const next =\n              e.key === 'ArrowDown'\n                ? (at + 1) % rowsEls.length\n                : (at - 1 + rowsEls.length) % rowsEls.length;\n            rowsEls[next].focus();\n          }}\n          className=\"flex w-[224px] shrink-0 flex-col gap-1 overflow-y-auto border-r border-[var(--border-subtle)] bg-[var(--bg-muted)] p-3\"\n        >\n          <div className=\"mb-2 flex items-center gap-2 rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-base)] px-3 text-[var(--text-tertiary)] focus-within:text-[var(--text-primary)]\">\n            <Search className=\"size-4 shrink-0\" />\n            <Input\n              variant=\"bare\"\n              value={query}\n              onChange={(e) => setQuery(e.target.value)}\n              placeholder=\"Search\"\n              aria-label=\"Search settings\"\n              className=\"min-w-0 flex-1\"\n            />\n          </div>\n          <p className=\"px-3 pb-1 pt-1 text-xs font-medium text-[var(--text-tertiary)]\">\n            Settings\n          </p>\n          {shown.length === 0 && (\n            <p className=\"px-3 py-2 text-sm text-[var(--text-tertiary)]\">\n              Nothing matches “{query}”.\n            </p>\n          )}\n          {shown.map((r) => {\n            const selected = r.id === current?.id;\n            const Icon = r.icon;\n            if (r.href) {\n              return (\n                <Link\n                  key={r.id}\n                  data-row\n                  href={r.href}\n                  onClick={onClose}\n                  className={`${ROW_CLASS} text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]`}\n                >\n                  <Icon className=\"size-[18px] shrink-0\" />\n                  <span className=\"truncate\">{r.name}</span>\n                </Link>\n              );\n            }\n            return (\n              <button\n                key={r.id}\n                data-row\n                type=\"button\"\n                aria-current={selected ? 'page' : undefined}\n                onClick={() => {\n                  setPicked(r.id);\n                  setView(null);\n                }}\n                className={`${ROW_CLASS} ${\n                  selected\n                    ? 'bg-[var(--bg-base)] text-[var(--text-primary)] shadow-sm'\n                    : 'text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]'\n                }`}\n              >\n                <Icon className=\"size-[18px] shrink-0\" />\n                <span className=\"truncate\">{r.name}</span>\n              </button>\n            );\n          })}\n          <div className=\"mt-auto border-t border-[var(--border-subtle)] pt-2\">\n            <Link\n              href={HELP_HREF}\n              onClick={onClose}\n              className={`${ROW_CLASS} text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]`}\n            >\n              <HelpIcon className=\"size-[18px] shrink-0\" />\n              <span className=\"flex-1\">Get help</span>\n              <ArrowUpRight className=\"size-4 shrink-0 text-[var(--text-tertiary)]\" />\n            </Link>\n          </div>\n        </nav>\n\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <div className=\"flex items-center justify-between gap-3 border-b border-[var(--border-subtle)] px-4 py-3\">\n            <div className=\"flex min-w-0 items-center gap-2\">\n              {view && (\n                <button\n                  type=\"button\"\n                  onClick={drill.back}\n                  aria-label={`Back to ${current?.name ?? 'Settings'}`}\n                  className=\"grid size-7 shrink-0 place-items-center rounded-lg text-[var(--text-secondary)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]\"\n                >\n                  <ArrowLeft className=\"size-4\" />\n                </button>\n              )}\n              <DialogTitle\n                aria-label={view?.title ?? current?.name ?? 'Settings'}\n                className=\"truncate text-md font-semibold text-[var(--text-primary)]\"\n              >\n                <TextMorph as=\"span\">\n                  {view?.title ?? current?.name ?? 'Settings'}\n                </TextMorph>\n              </DialogTitle>\n            </div>\n            <div className=\"mr-7 flex items-center gap-2\">\n              <div ref={setStatusSlot} className=\"flex items-center\" />\n            </div>\n          </div>\n          <div className=\"min-h-0 flex-1 overflow-y-auto px-1 py-4 outline-none\">\n            {current && (\n              <SettingsDrillProvider value={drill}>\n                <SettingsSurface variant=\"plain\">\n                  <SettingsStatusSlot element={statusSlot}>\n                    <SettingsPanel key={current.id} id={current.id} />\n                  </SettingsStatusSlot>\n                </SettingsSurface>\n              </SettingsDrillProvider>\n            )}\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell/use-support-unread.d.ts

@@ -0,0 +1,14 @@
+/**
+ * How many answers from support are waiting to be read.
+ *
+ * A reply used to reach the merchant by email and a notification row, and the
+ * row had nowhere to land: there is no bell any more, notifications are counted
+ * on the nav row they are about, and `/dashboard/support` has had no nav row
+ * since Help left the rail. So the API did tell the merchant, and the app
+ * dropped it on the floor.
+ *
+ * Reads the same query as `use-nav-notifications`, so it is a lookup in the
+ * cache and not a second request. Opening the case marks its row read (that hook
+ * reads anything whose link the page is under), which is what clears this.
+ */
+export declare function useSupportUnread(): number;

package/dist/shell/use-support-unread.js

@@ -0,0 +1,23 @@
+"use client";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { useDemoMode } from "@withpotter/hooks/use-demo-mode";
+import { merchantNotificationsApi } from "@withpotter/lib/api/merchant-notifications";
+const SUPPORT_TYPES = /* @__PURE__ */ new Set([
+  "merchant.support_reply",
+  "merchant.support_resolved"
+]);
+function useSupportUnread() {
+  const demo = useDemoMode();
+  const { data } = useApiQuery(
+    ["merchant-notifications"],
+    (slug) => merchantNotificationsApi.list(slug, { limit: 50 }),
+    { enabled: !demo, live: true }
+  );
+  return (data?.notifications ?? []).filter(
+    (n) => !n.readAt && SUPPORT_TYPES.has(n.type)
+  ).length;
+}
+export {
+  useSupportUnread
+};
+//# sourceMappingURL=use-support-unread.js.map

package/dist/shell/use-support-unread.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/use-support-unread.ts"],"sourcesContent":["'use client';\n\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { useDemoMode } from '@withpotter/hooks/use-demo-mode';\nimport { merchantNotificationsApi } from '@withpotter/lib/api/merchant-notifications';\nimport type { MerchantNotificationList } from '@withpotter/lib/api/types';\n\nconst SUPPORT_TYPES = new Set([\n  'merchant.support_reply',\n  'merchant.support_resolved',\n]);\n\n/**\n * How many answers from support are waiting to be read.\n *\n * A reply used to reach the merchant by email and a notification row, and the\n * row had nowhere to land: there is no bell any more, notifications are counted\n * on the nav row they are about, and `/dashboard/support` has had no nav row\n * since Help left the rail. So the API did tell the merchant, and the app\n * dropped it on the floor.\n *\n * Reads the same query as `use-nav-notifications`, so it is a lookup in the\n * cache and not a second request. Opening the case marks its row read (that hook\n * reads anything whose link the page is under), which is what clears this.\n */\nexport function useSupportUnread(): number {\n  const demo = useDemoMode();\n  const { data } = useApiQuery<MerchantNotificationList>(\n    ['merchant-notifications'],\n    (slug) => merchantNotificationsApi.list(slug, { limit: 50 }),\n    { enabled: !demo, live: true },\n  );\n  return (data?.notifications ?? []).filter(\n    (n) => !n.readAt && SUPPORT_TYPES.has(n.type),\n  ).length;\n}\n"],"mappings":";AAEA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AAGzC,MAAM,gBAAgB,oBAAI,IAAI;AAAA,EAC5B;AAAA,EACA;AACF,CAAC;AAeM,SAAS,mBAA2B;AACzC,QAAM,OAAO,YAAY;AACzB,QAAM,EAAE,KAAK,IAAI;AAAA,IACf,CAAC,wBAAwB;AAAA,IACzB,CAAC,SAAS,yBAAyB,KAAK,MAAM,EAAE,OAAO,GAAG,CAAC;AAAA,IAC3D,EAAE,SAAS,CAAC,MAAM,MAAM,KAAK;AAAA,EAC/B;AACA,UAAQ,MAAM,iBAAiB,CAAC,GAAG;AAAA,IACjC,CAAC,MAAM,CAAC,EAAE,UAAU,cAAc,IAAI,EAAE,IAAI;AAAA,EAC9C,EAAE;AACJ;","names":[]}