@withpotter/components 0.13.0-next.101

package/dist/invoice-editor/paper-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/invoice-editor/paper-fields.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Input } from '@withpotter/ui-kit/input';\nimport { AutoGrowTextarea } from '@withpotter/ui-kit/auto-grow-textarea';\nimport { DateField } from '@withpotter/ui-kit/date-field';\n\n/**\n * Writing ON the document instead of beside it.\n *\n * The editor used to be a form on the left and a picture of the invoice on the\n * right: you typed into a box labelled \"Name\" and watched the name appear\n * somewhere else. Two renderings of one artefact, and the form was the loud\n * one — an invoice is a piece of paper a client files, and the paper was the\n * part you could not touch.\n *\n * So the sheet became the form. These are the fields it is written with, and\n * they exist as a set because the sheet has rules no app field obeys:\n *\n * - **Paper ink, not theme ink.** The sheet is white in every theme (it prints,\n *   and it is the same document the PDF renders), so `--text-primary` is the\n *   wrong colour half the time. Everything here inherits its colour from the\n *   line it sits on, exactly as printed text would.\n * - **Chrome only on approach.** A form field advertises itself with a border;\n *   a document must not, or it stops looking like the thing being made. The\n *   affordance arrives on hover and focus — a tint the width of the text and\n *   nothing more — which is the same bargain the canvas editor struck.\n * - **The primitives, still.** `Input variant=\"bare\"`, `AutoGrowTextarea` and\n *   `DateField variant=\"bare\"` underneath, so a file picker's worth of\n *   behaviour (focus, keyboard, the date popup, the textarea that shrinks as\n *   well as grows) is not re-typed here for the sake of looking like paper.\n */\n\n/** Hover and focus, drawn as a highlighter rather than a border. */\nconst paperTint =\n  'rounded-[3px] transition-colors duration-[var(--motion-fast)] ' +\n  'hover:bg-neutral-900/[0.04] focus:bg-neutral-900/[0.06] ' +\n  'focus:outline-none focus:ring-1 focus:ring-neutral-900/15';\n\n/**\n * Paper ink: the colour of the line the field is printed on.\n *\n * Measured on the rendered page, every field came back `rgb(242,242,244)` —\n * the app's dark-theme ink, near white, on white paper. `globals.css` forces\n * `input, textarea, select { color: var(--text-primary) !important }` and, in\n * WebKit, a matching `-webkit-text-fill-color`, which beats `color` whatever a\n * class says. The sheet answers that with `.paper` (see globals), where a field\n * inherits instead; this class is what asks for the inheritance.\n */\nconst paperInk = 'text-inherit placeholder:text-neutral-400';\n\n/**\n * A control standing ON the sheet.\n *\n * `Button variant=\"ghost\"` answers to the app's tokens, and the app's ink is\n * near-white in dark mode — on white paper the glyph disappeared entirely. The\n * sheet is theme-independent by design (it prints, and the PDF renders the same\n * layout), so anything drawn on it takes paper greys.\n */\nexport const paperControl =\n  'text-neutral-500 hover:text-neutral-900 hover:bg-neutral-900/[0.06]';\n\n/** One line of the document that happens to be typeable. */\nexport function PaperText({\n  value,\n  onChange,\n  placeholder,\n  className = '',\n  type = 'text',\n  align = 'left',\n  ariaLabel,\n  maxLength,\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  /** The document's own type for this line — size, weight, colour. */\n  className?: string;\n  type?: 'text' | 'email' | 'tel';\n  align?: 'left' | 'right';\n  ariaLabel: string;\n  maxLength?: number;\n}) {\n  return (\n    <Input\n      variant=\"bare\"\n      type={type}\n      value={value}\n      maxLength={maxLength}\n      aria-label={ariaLabel}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={placeholder}\n      className={`${paperInk} ${paperTint} ${align === 'right' ? 'text-right' : ''} px-1 ${className}`}\n    />\n  );\n}\n\n/** A paragraph on the sheet: notes, terms, a line's own description. */\nexport function PaperParagraph({\n  value,\n  onChange,\n  placeholder,\n  className = '',\n  ariaLabel,\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  className?: string;\n  ariaLabel: string;\n}) {\n  return (\n    <AutoGrowTextarea\n      value={value}\n      aria-label={ariaLabel}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={placeholder}\n      className={`w-full bg-transparent ${paperInk} ${paperTint} px-1 ${className}`}\n    />\n  );\n}\n\n/** A date, printed the way the document prints it, opening our own calendar. */\nexport function PaperDate({\n  value,\n  onChange,\n  min,\n  ariaLabel,\n  className = '',\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  min?: string;\n  ariaLabel: string;\n  className?: string;\n}) {\n  return (\n    <DateField\n      variant=\"bare\"\n      value={value}\n      min={min}\n      onChange={onChange}\n      aria-label={ariaLabel}\n      placeholder=\"Pick a date\"\n      className={`${paperTint} inline-block px-1 ${className}`}\n    />\n  );\n}\n\n/**\n * Money on the sheet.\n *\n * Not `CurrencyInput`: that draws a bordered field with a symbol pinned inside\n * it, which is right in a form and wrong on a document, where the amount is\n * already in a column headed by a currency. It formats on blur and hands back\n * the raw number, which is the only part worth keeping.\n */\nexport function PaperMoney({\n  value,\n  onChange,\n  ariaLabel,\n  className = '',\n  format,\n}: {\n  value: number;\n  onChange: (value: number) => void;\n  ariaLabel: string;\n  className?: string;\n  /** How the document prints a settled figure, for the unfocused state. */\n  format: (amount: number) => string;\n}) {\n  /**\n   * Typed raw, printed formatted.\n   *\n   * Everything else in this column reads `₦450,000`; a rate left as `450000`\n   * while the row beside it is formatted makes the sheet look half-finished,\n   * and formatting WHILE typing fights the caret. So the draft string lives\n   * here for as long as the field has focus, and the document takes over the\n   * moment it does not.\n   */\n  const [typing, setTyping] = useState<string | null>(null);\n\n  return (\n    <Input\n      variant=\"bare\"\n      inputMode=\"decimal\"\n      aria-label={ariaLabel}\n      value={typing ?? (value ? format(value) : '')}\n      placeholder={format(0)}\n      onFocus={() => setTyping(value ? String(value) : '')}\n      onBlur={() => setTyping(null)}\n      onChange={(e) => {\n        // Digits and one dot. A paste of \"₦12,000.00\" is a real thing a\n        // merchant does, and `Number('₦12,000')` is NaN, which is how a total\n        // reads ₦NaN on a document somebody is about to send.\n        const cleaned = e.target.value.replace(/[^0-9.]/g, '');\n        setTyping(cleaned);\n        const parsed = Number.parseFloat(cleaned);\n        onChange(Number.isFinite(parsed) ? parsed : 0);\n      }}\n      className={`${paperInk} ${paperTint} px-1 text-right tabular-nums ${className}`}\n    />\n  );\n}\n"],"mappings":";AAoFI;AAlFJ,SAAS,gBAAgB;AACzB,SAAS,aAAa;AACtB,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AA6B1B,MAAM,YACJ;AAcF,MAAM,WAAW;AAUV,MAAM,eACX;AAGK,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AACF,GAUG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC;AAAA,MACA,WAAW,GAAG,QAAQ,IAAI,SAAS,IAAI,UAAU,UAAU,eAAe,EAAE,SAAS,SAAS;AAAA;AAAA,EAChG;AAEJ;AAGO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAY;AAAA,MACZ,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC;AAAA,MACA,WAAW,yBAAyB,QAAQ,IAAI,SAAS,SAAS,SAAS;AAAA;AAAA,EAC7E;AAEJ;AAGO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ,aAAY;AAAA,MACZ,WAAW,GAAG,SAAS,sBAAsB,SAAS;AAAA;AAAA,EACxD;AAEJ;AAUO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAOG;AAUD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,IAAI;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,cAAY;AAAA,MACZ,OAAO,WAAW,QAAQ,OAAO,KAAK,IAAI;AAAA,MAC1C,aAAa,OAAO,CAAC;AAAA,MACrB,SAAS,MAAM,UAAU,QAAQ,OAAO,KAAK,IAAI,EAAE;AAAA,MACnD,QAAQ,MAAM,UAAU,IAAI;AAAA,MAC5B,UAAU,CAAC,MAAM;AAIf,cAAM,UAAU,EAAE,OAAO,MAAM,QAAQ,YAAY,EAAE;AACrD,kBAAU,OAAO;AACjB,cAAM,SAAS,OAAO,WAAW,OAAO;AACxC,iBAAS,OAAO,SAAS,MAAM,IAAI,SAAS,CAAC;AAAA,MAC/C;AAAA,MACA,WAAW,GAAG,QAAQ,IAAI,SAAS,iCAAiC,SAAS;AAAA;AAAA,EAC/E;AAEJ;","names":[]}

package/dist/invoice-editor/paper-lines.d.ts

@@ -0,0 +1,25 @@
+import type { useInvoiceFormState } from '@withpotter/hooks/use-invoice-form-state';
+type InvoiceFormState = ReturnType<typeof useInvoiceFormState>;
+/**
+ * The line items, typed into the document's own table.
+ *
+ * These rows render inside `InvoiceDocument`'s `<tbody>`, under its headings,
+ * ruled by its own borders — so what the merchant types into is the table the
+ * client will read, at the same size and in the same column. The old editor
+ * drew a second table in the form and a picture of this one beside it; the
+ * quantity you set and the quantity you saw were never the same element.
+ *
+ * A line can be a catalogue service or something typed once. Both are ordinary
+ * here: the title is always typed, and the catalogue is a glyph at the end of
+ * the row that fills the line in for you. That is the opposite of the form,
+ * where picking from the catalogue was the default and typing was a link
+ * labelled "Type it instead" — a billing business's lines are as often a
+ * sentence about this month's work as they are a named service.
+ */
+export declare function PaperLines({ state, formatCurrency, columns, }: {
+    state: InvoiceFormState;
+    formatCurrency: (amount: number) => string;
+    /** How many columns the document is ruling, so the add row spans them. */
+    columns: number;
+}): import("react").JSX.Element;
+export {};

package/dist/invoice-editor/paper-lines.js

@@ -0,0 +1,114 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Plus, X } from "lucide-react";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { Button } from "@withpotter/ui-kit/button";
+import { ProductPicker } from "@withpotter/components/features/product-picker";
+import {
+  PaperText,
+  PaperParagraph,
+  PaperMoney,
+  paperControl
+} from "./paper-fields";
+function PaperLines({
+  state,
+  formatCurrency,
+  columns
+}) {
+  const { tenant } = useAuth();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    state.items.map((item, idx) => /* @__PURE__ */ jsxs("tr", { className: "group border-b border-neutral-200", children: [
+      /* @__PURE__ */ jsx("td", { className: "py-2 pr-3 align-top", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          PaperParagraph,
+          {
+            value: item.title,
+            onChange: (value) => state.updateItem(idx, "title", value),
+            placeholder: "What this line is for",
+            ariaLabel: `Line ${idx + 1} description`,
+            className: "font-medium"
+          }
+        ),
+        tenant?.slug && /* @__PURE__ */ jsx("span", { className: "opacity-0 transition-opacity duration-[var(--motion-fast)] group-focus-within:opacity-100 group-hover:opacity-100", children: /* @__PURE__ */ jsx(
+          ProductPicker,
+          {
+            variant: "inline",
+            className: paperControl,
+            ariaLabel: "Fill this line from your catalogue",
+            value: { title: item.title, contentId: item.contentId },
+            tenantSlug: tenant.slug,
+            formatCurrency,
+            onSelect: (product) => {
+              state.updateItem(idx, "contentId", product.id);
+              state.updateItem(idx, "title", product.title);
+              state.updateItem(idx, "unitPrice", product.price);
+            }
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsx("td", { className: "py-2 align-top text-center text-neutral-600", children: /* @__PURE__ */ jsx(
+        PaperText,
+        {
+          value: item.quantity ? String(item.quantity) : "",
+          onChange: (value) => {
+            const parsed = Number.parseFloat(value.replace(/[^0-9.]/g, ""));
+            state.updateItem(
+              idx,
+              "quantity",
+              Number.isFinite(parsed) ? parsed : 0
+            );
+          },
+          placeholder: "1",
+          ariaLabel: `Line ${idx + 1} quantity`,
+          className: "text-center tabular-nums"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("td", { className: "py-2 pl-3 align-top text-right text-neutral-600", children: /* @__PURE__ */ jsx(
+        PaperMoney,
+        {
+          value: item.unitPrice,
+          onChange: (value) => state.updateItem(idx, "unitPrice", value),
+          ariaLabel: `Line ${idx + 1} unit price`,
+          format: formatCurrency
+        }
+      ) }),
+      /* @__PURE__ */ jsx("td", { className: "py-2 pl-3 align-top text-right font-medium text-neutral-900", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formatCurrency(item.quantity * item.unitPrice) }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: state.items.length > 1 ? "opacity-0 transition-opacity duration-[var(--motion-fast)] group-focus-within:opacity-100 group-hover:opacity-100" : "invisible",
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: paperControl,
+                "aria-label": `Remove line ${idx + 1}`,
+                onClick: () => state.removeItem(idx),
+                children: /* @__PURE__ */ jsx(X, {})
+              }
+            )
+          }
+        )
+      ] }) })
+    ] }, idx)),
+    /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns, className: "pt-2", children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: paperControl,
+        onClick: state.addItem,
+        children: [
+          /* @__PURE__ */ jsx(Plus, {}),
+          "Add a line"
+        ]
+      }
+    ) }) })
+  ] });
+}
+export {
+  PaperLines
+};
+//# sourceMappingURL=paper-lines.js.map

package/dist/invoice-editor/paper-lines.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/invoice-editor/paper-lines.tsx"],"sourcesContent":["'use client';\n\nimport { Plus, X } from 'lucide-react';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { ProductPicker } from '@withpotter/components/features/product-picker';\nimport type { useInvoiceFormState } from '@withpotter/hooks/use-invoice-form-state';\nimport {\n  PaperText,\n  PaperParagraph,\n  PaperMoney,\n  paperControl,\n} from './paper-fields';\n\ntype InvoiceFormState = ReturnType<typeof useInvoiceFormState>;\n\n/**\n * The line items, typed into the document's own table.\n *\n * These rows render inside `InvoiceDocument`'s `<tbody>`, under its headings,\n * ruled by its own borders — so what the merchant types into is the table the\n * client will read, at the same size and in the same column. The old editor\n * drew a second table in the form and a picture of this one beside it; the\n * quantity you set and the quantity you saw were never the same element.\n *\n * A line can be a catalogue service or something typed once. Both are ordinary\n * here: the title is always typed, and the catalogue is a glyph at the end of\n * the row that fills the line in for you. That is the opposite of the form,\n * where picking from the catalogue was the default and typing was a link\n * labelled \"Type it instead\" — a billing business's lines are as often a\n * sentence about this month's work as they are a named service.\n */\nexport function PaperLines({\n  state,\n  formatCurrency,\n  columns,\n}: {\n  state: InvoiceFormState;\n  formatCurrency: (amount: number) => string;\n  /** How many columns the document is ruling, so the add row spans them. */\n  columns: number;\n}) {\n  const { tenant } = useAuth();\n\n  return (\n    <>\n      {state.items.map((item, idx) => (\n        <tr key={idx} className=\"group border-b border-neutral-200\">\n          <td className=\"py-2 pr-3 align-top\">\n            <div className=\"flex items-center gap-1\">\n              {/* A paragraph, not a line: a description longer than the\n                  column scrolled inside an input, so the merchant could not\n                  read the sentence they were writing and the client would see\n                  a wrap the sheet never showed. */}\n              <PaperParagraph\n                value={item.title}\n                onChange={(value) => state.updateItem(idx, 'title', value)}\n                placeholder=\"What this line is for\"\n                ariaLabel={`Line ${idx + 1} description`}\n                className=\"font-medium\"\n              />\n              {/* The catalogue, as an affordance rather than a field. It only\n                  appears on approach: a document covered in glyphs is a form\n                  again. */}\n              {tenant?.slug && (\n                <span className=\"opacity-0 transition-opacity duration-[var(--motion-fast)] group-focus-within:opacity-100 group-hover:opacity-100\">\n                  <ProductPicker\n                    variant=\"inline\"\n                    className={paperControl}\n                    ariaLabel=\"Fill this line from your catalogue\"\n                    value={{ title: item.title, contentId: item.contentId }}\n                    tenantSlug={tenant.slug}\n                    formatCurrency={formatCurrency}\n                    onSelect={(product) => {\n                      state.updateItem(idx, 'contentId', product.id);\n                      state.updateItem(idx, 'title', product.title);\n                      state.updateItem(idx, 'unitPrice', product.price);\n                    }}\n                  />\n                </span>\n              )}\n            </div>\n          </td>\n          <td className=\"py-2 align-top text-center text-neutral-600\">\n            <PaperText\n              value={item.quantity ? String(item.quantity) : ''}\n              onChange={(value) => {\n                const parsed = Number.parseFloat(value.replace(/[^0-9.]/g, ''));\n                state.updateItem(\n                  idx,\n                  'quantity',\n                  Number.isFinite(parsed) ? parsed : 0,\n                );\n              }}\n              placeholder=\"1\"\n              ariaLabel={`Line ${idx + 1} quantity`}\n              className=\"text-center tabular-nums\"\n            />\n          </td>\n          <td className=\"py-2 pl-3 align-top text-right text-neutral-600\">\n            <PaperMoney\n              value={item.unitPrice}\n              onChange={(value) => state.updateItem(idx, 'unitPrice', value)}\n              ariaLabel={`Line ${idx + 1} unit price`}\n              format={formatCurrency}\n            />\n          </td>\n          <td className=\"py-2 pl-3 align-top text-right font-medium text-neutral-900\">\n            <div className=\"flex items-center justify-end gap-1\">\n              <span className=\"tabular-nums\">\n                {formatCurrency(item.quantity * item.unitPrice)}\n              </span>\n              {/* Never the last line: an invoice with no rows has nowhere to\n                  start typing again, which is the empty-state bug the form\n                  avoided by keeping one blank row alive. */}\n              <span\n                className={\n                  state.items.length > 1\n                    ? 'opacity-0 transition-opacity duration-[var(--motion-fast)] group-focus-within:opacity-100 group-hover:opacity-100'\n                    : 'invisible'\n                }\n              >\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className={paperControl}\n                  aria-label={`Remove line ${idx + 1}`}\n                  onClick={() => state.removeItem(idx)}\n                >\n                  <X />\n                </Button>\n              </span>\n            </div>\n          </td>\n        </tr>\n      ))}\n      <tr>\n        <td colSpan={columns} className=\"pt-2\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className={paperControl}\n            onClick={state.addItem}\n          >\n            <Plus />\n            Add a line\n          </Button>\n        </td>\n      </tr>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/invoice-editor.d.ts

@@ -0,0 +1 @@
+export * from './invoice-editor/index';

package/dist/invoice-editor.js

@@ -0,0 +1 @@
+export * from './invoice-editor/index.js';

package/dist/legal-modal.d.ts

@@ -0,0 +1,10 @@
+export type LegalDoc = 'terms' | 'privacy';
+/**
+ * In-context legal reader. Opening a policy from the auth/onboarding fine print
+ * shouldn't navigate anyone out of their flow — it lifts over the form and
+ * closes back to exactly where they were.
+ */
+export declare function LegalModal({ doc, onClose, }: {
+    doc: LegalDoc | null;
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/legal-modal.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle
+} from "@withpotter/ui-kit/dialog";
+const CONTENT = {
+  terms: {
+    title: "Terms of service",
+    intro: "The plain-language version of what you agree to by using Box. The full Terms of Service will replace this summary.",
+    sections: [
+      {
+        h: "Using Box",
+        p: "You can use Box to run your business: sell, take bookings, and get paid. Use it lawfully and don\u2019t abuse the platform."
+      },
+      {
+        h: "Your account",
+        p: "You\u2019re responsible for your account and everything done through it. Keep your sign-in secure."
+      },
+      {
+        h: "Your business and content",
+        p: "What you upload and sell is yours. You\u2019re responsible for it and for following the laws that apply to your business."
+      },
+      {
+        h: "Payments and fees",
+        p: "Fees, payouts, and refunds will be described here in the full terms."
+      },
+      {
+        h: "Changes and ending",
+        p: "We may update these terms and will let you know. You can close your account at any time."
+      }
+    ]
+  },
+  privacy: {
+    title: "Privacy policy",
+    intro: "The plain-language version of how Box handles your data. The full Privacy Policy will replace this summary.",
+    sections: [
+      {
+        h: "What we collect",
+        p: "Your account details, the business information you enter, and how you use Box."
+      },
+      {
+        h: "How we use it",
+        p: "To run your account, process payments, keep Box secure, and improve the product."
+      },
+      {
+        h: "Sharing",
+        p: "We don\u2019t sell your data. We share only with the providers needed to run Box (for example, payments) and where the law requires."
+      },
+      {
+        h: "Your choices",
+        p: "You can access, correct, or delete your data, and close your account."
+      }
+    ]
+  }
+};
+function LegalModal({
+  doc,
+  onClose
+}) {
+  const data = doc ? CONTENT[doc] : null;
+  return /* @__PURE__ */ jsx(Dialog, { open: !!doc, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-lg", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: data?.title }) }),
+    data && /* @__PURE__ */ jsxs("div", { className: "-mr-2 max-h-[60vh] overflow-y-auto overscroll-contain pr-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-ink-3", children: data.intro }),
+      /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-4", children: data.sections.map((s) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-ink", children: s.h }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-relaxed text-ink-3", children: s.p })
+      ] }, s.h)) }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-6 border-t border-line pt-4 text-xs text-ink-4", children: [
+        "This is a summary placeholder. The full ",
+        data.title,
+        " is coming soon."
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  LegalModal
+};
+//# sourceMappingURL=legal-modal.js.map

package/dist/legal-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/legal-modal.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n} from '@withpotter/ui-kit/dialog';\n\nexport type LegalDoc = 'terms' | 'privacy';\n\ntype Section = { h: string; p: string };\ntype Doc = { title: string; intro: string; sections: Section[] };\n\n/*\n * Plain-language SUMMARY placeholders, clearly labelled as drafts — never\n * fabricated binding legal text. Swap `sections` for the real Terms / Privacy\n * copy when Legal provides it; the modal shell stays the same.\n */\nconst CONTENT: Record<LegalDoc, Doc> = {\n  terms: {\n    title: 'Terms of service',\n    intro:\n      'The plain-language version of what you agree to by using Box. The full Terms of Service will replace this summary.',\n    sections: [\n      {\n        h: 'Using Box',\n        p: 'You can use Box to run your business: sell, take bookings, and get paid. Use it lawfully and don’t abuse the platform.',\n      },\n      {\n        h: 'Your account',\n        p: 'You’re responsible for your account and everything done through it. Keep your sign-in secure.',\n      },\n      {\n        h: 'Your business and content',\n        p: 'What you upload and sell is yours. You’re responsible for it and for following the laws that apply to your business.',\n      },\n      {\n        h: 'Payments and fees',\n        p: 'Fees, payouts, and refunds will be described here in the full terms.',\n      },\n      {\n        h: 'Changes and ending',\n        p: 'We may update these terms and will let you know. You can close your account at any time.',\n      },\n    ],\n  },\n  privacy: {\n    title: 'Privacy policy',\n    intro:\n      'The plain-language version of how Box handles your data. The full Privacy Policy will replace this summary.',\n    sections: [\n      {\n        h: 'What we collect',\n        p: 'Your account details, the business information you enter, and how you use Box.',\n      },\n      {\n        h: 'How we use it',\n        p: 'To run your account, process payments, keep Box secure, and improve the product.',\n      },\n      {\n        h: 'Sharing',\n        p: 'We don’t sell your data. We share only with the providers needed to run Box (for example, payments) and where the law requires.',\n      },\n      {\n        h: 'Your choices',\n        p: 'You can access, correct, or delete your data, and close your account.',\n      },\n    ],\n  },\n};\n\n/**\n * In-context legal reader. Opening a policy from the auth/onboarding fine print\n * shouldn't navigate anyone out of their flow — it lifts over the form and\n * closes back to exactly where they were.\n */\nexport function LegalModal({\n  doc,\n  onClose,\n}: {\n  doc: LegalDoc | null;\n  onClose: () => void;\n}) {\n  const data = doc ? CONTENT[doc] : null;\n\n  return (\n    <Dialog open={!!doc} onOpenChange={(open) => !open && onClose()}>\n      <DialogContent className=\"max-w-lg\">\n        <DialogHeader>\n          <DialogTitle>{data?.title}</DialogTitle>\n        </DialogHeader>\n\n        {data && (\n          <div className=\"-mr-2 max-h-[60vh] overflow-y-auto overscroll-contain pr-2\">\n            <p className=\"text-sm leading-relaxed text-ink-3\">{data.intro}</p>\n            <div className=\"mt-4 space-y-4\">\n              {data.sections.map((s) => (\n                <div key={s.h}>\n                  <h3 className=\"text-sm font-semibold text-ink\">{s.h}</h3>\n                  <p className=\"mt-1 text-sm leading-relaxed text-ink-3\">\n                    {s.p}\n                  </p>\n                </div>\n              ))}\n            </div>\n            <p className=\"mt-6 border-t border-line pt-4 text-xs text-ink-4\">\n              This is a summary placeholder. The full {data.title} is coming\n              soon.\n            </p>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AA0FU,cAQM,YARN;AAxFV;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAYP,MAAM,UAAiC;AAAA,EACrC,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OACE;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,OACE;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,IACF;AAAA,EACF;AACF;AAOO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,QAAM,OAAO,MAAM,QAAQ,GAAG,IAAI;AAElC,SACE,oBAAC,UAAO,MAAM,CAAC,CAAC,KAAK,cAAc,CAAC,SAAS,CAAC,QAAQ,QAAQ,GAC5D,+BAAC,iBAAc,WAAU,YACvB;AAAA,wBAAC,gBACC,8BAAC,eAAa,gBAAM,OAAM,GAC5B;AAAA,IAEC,QACC,qBAAC,SAAI,WAAU,8DACb;AAAA,0BAAC,OAAE,WAAU,sCAAsC,eAAK,OAAM;AAAA,MAC9D,oBAAC,SAAI,WAAU,kBACZ,eAAK,SAAS,IAAI,CAAC,MAClB,qBAAC,SACC;AAAA,4BAAC,QAAG,WAAU,kCAAkC,YAAE,GAAE;AAAA,QACpD,oBAAC,OAAE,WAAU,2CACV,YAAE,GACL;AAAA,WAJQ,EAAE,CAKZ,CACD,GACH;AAAA,MACA,qBAAC,OAAE,WAAU,qDAAoD;AAAA;AAAA,QACtB,KAAK;AAAA,QAAM;AAAA,SAEtD;AAAA,OACF;AAAA,KAEJ,GACF;AAEJ;","names":[]}

package/dist/live-commerce-bridge.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Keeps the orders, customers and sales numbers current without a refresh.
+ *
+ * The API sends a signal when the store takes money; this refetches the
+ * queries that show it. Nothing about the sale travels over the stream, so a
+ * missed or duplicated signal costs a refetch and never a wrong number, and
+ * the screens' own polling remains the backstop if the stream is blocked.
+ *
+ * Runs only while the tab is visible, and reconnects with backoff.
+ */
+export declare function LiveCommerceBridge(): null;

package/dist/live-commerce-bridge.js

@@ -0,0 +1,82 @@
+"use client";
+import { useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { getCsrfToken } from "@withpotter/lib/api";
+import { isCommerceQueryKey, takeFrames } from "@withpotter/lib/live-events/sse-frames";
+const MIN_BACKOFF_MS = 1e3;
+const MAX_BACKOFF_MS = 3e4;
+function LiveCommerceBridge() {
+  const queryClient = useQueryClient();
+  const { tenant } = useAuth();
+  const slug = tenant?.slug;
+  useEffect(() => {
+    if (!slug) return;
+    let controller = null;
+    let timer;
+    let backoff = MIN_BACKOFF_MS;
+    let stopped = false;
+    const isHidden = () => document.visibilityState === "hidden";
+    const refresh = () => void queryClient.invalidateQueries({
+      predicate: (query) => isCommerceQueryKey(query.queryKey)
+    });
+    const connect = async () => {
+      if (stopped || isHidden()) return;
+      controller = new AbortController();
+      try {
+        const csrfToken = getCsrfToken();
+        const response = await fetch("/api/proxy/tenant-events", {
+          headers: {
+            accept: "text/event-stream",
+            "x-tenant-slug": slug,
+            ...csrfToken ? { "x-csrf-token": csrfToken } : {}
+          },
+          credentials: "include",
+          signal: controller.signal
+        });
+        if (!response.ok || !response.body) throw new Error("no stream");
+        backoff = MIN_BACKOFF_MS;
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        while (!stopped) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const { frames, rest } = takeFrames(buffer);
+          buffer = rest;
+          if (frames.some((frame) => frame.event === "commerce.changed")) {
+            refresh();
+          }
+        }
+      } catch {
+      }
+      if (stopped || isHidden()) return;
+      timer = setTimeout(connect, backoff);
+      backoff = Math.min(backoff * 2, MAX_BACKOFF_MS);
+    };
+    const onVisibility = () => {
+      if (isHidden()) {
+        controller?.abort();
+        clearTimeout(timer);
+        return;
+      }
+      refresh();
+      clearTimeout(timer);
+      void connect();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    void connect();
+    return () => {
+      stopped = true;
+      controller?.abort();
+      clearTimeout(timer);
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [slug, queryClient]);
+  return null;
+}
+export {
+  LiveCommerceBridge
+};
+//# sourceMappingURL=live-commerce-bridge.js.map

package/dist/live-commerce-bridge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/live-commerce-bridge.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { getCsrfToken } from '@withpotter/lib/api';\nimport { isCommerceQueryKey, takeFrames } from '@withpotter/lib/live-events/sse-frames';\n\nconst MIN_BACKOFF_MS = 1_000;\nconst MAX_BACKOFF_MS = 30_000;\n\n/**\n * Keeps the orders, customers and sales numbers current without a refresh.\n *\n * The API sends a signal when the store takes money; this refetches the\n * queries that show it. Nothing about the sale travels over the stream, so a\n * missed or duplicated signal costs a refetch and never a wrong number, and\n * the screens' own polling remains the backstop if the stream is blocked.\n *\n * Runs only while the tab is visible, and reconnects with backoff.\n */\nexport function LiveCommerceBridge() {\n  const queryClient = useQueryClient();\n  const { tenant } = useAuth();\n  const slug = tenant?.slug;\n\n  useEffect(() => {\n    if (!slug) return;\n\n    let controller: AbortController | null = null;\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    let backoff = MIN_BACKOFF_MS;\n    let stopped = false;\n\n    const isHidden = () => document.visibilityState === 'hidden';\n\n    const refresh = () =>\n      void queryClient.invalidateQueries({\n        predicate: (query) => isCommerceQueryKey(query.queryKey),\n      });\n\n    const connect = async () => {\n      if (stopped || isHidden()) return;\n\n      controller = new AbortController();\n\n      try {\n        const csrfToken = getCsrfToken();\n        const response = await fetch('/api/proxy/tenant-events', {\n          headers: {\n            accept: 'text/event-stream',\n            'x-tenant-slug': slug,\n            ...(csrfToken ? { 'x-csrf-token': csrfToken } : {}),\n          },\n          credentials: 'include',\n          signal: controller.signal,\n        });\n\n        if (!response.ok || !response.body) throw new Error('no stream');\n\n        backoff = MIN_BACKOFF_MS;\n\n        const reader = response.body.getReader();\n        const decoder = new TextDecoder();\n        let buffer = '';\n\n        while (!stopped) {\n          const { done, value } = await reader.read();\n\n          if (done) break;\n\n          buffer += decoder.decode(value, { stream: true });\n\n          const { frames, rest } = takeFrames(buffer);\n\n          buffer = rest;\n\n          if (frames.some((frame) => frame.event === 'commerce.changed')) {\n            refresh();\n          }\n        }\n      } catch {\n        // Fall through to the reconnect below.\n      }\n\n      if (stopped || isHidden()) return;\n\n      timer = setTimeout(connect, backoff);\n      backoff = Math.min(backoff * 2, MAX_BACKOFF_MS);\n    };\n\n    const onVisibility = () => {\n      if (isHidden()) {\n        controller?.abort();\n        clearTimeout(timer);\n\n        return;\n      }\n\n      // Coming back to the tab: catch up on anything missed, then reconnect.\n      refresh();\n      clearTimeout(timer);\n      void connect();\n    };\n\n    document.addEventListener('visibilitychange', onVisibility);\n    void connect();\n\n    return () => {\n      stopped = true;\n      controller?.abort();\n      clearTimeout(timer);\n      document.removeEventListener('visibilitychange', onVisibility);\n    };\n  }, [slug, queryClient]);\n\n  return null;\n}\n"],"mappings":";AAEA,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB,kBAAkB;AAE/C,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AAYhB,SAAS,qBAAqB;AACnC,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,OAAO,IAAI,QAAQ;AAC3B,QAAM,OAAO,QAAQ;AAErB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AAEX,QAAI,aAAqC;AACzC,QAAI;AACJ,QAAI,UAAU;AACd,QAAI,UAAU;AAEd,UAAM,WAAW,MAAM,SAAS,oBAAoB;AAEpD,UAAM,UAAU,MACd,KAAK,YAAY,kBAAkB;AAAA,MACjC,WAAW,CAAC,UAAU,mBAAmB,MAAM,QAAQ;AAAA,IACzD,CAAC;AAEH,UAAM,UAAU,YAAY;AAC1B,UAAI,WAAW,SAAS,EAAG;AAE3B,mBAAa,IAAI,gBAAgB;AAEjC,UAAI;AACF,cAAM,YAAY,aAAa;AAC/B,cAAM,WAAW,MAAM,MAAM,4BAA4B;AAAA,UACvD,SAAS;AAAA,YACP,QAAQ;AAAA,YACR,iBAAiB;AAAA,YACjB,GAAI,YAAY,EAAE,gBAAgB,UAAU,IAAI,CAAC;AAAA,UACnD;AAAA,UACA,aAAa;AAAA,UACb,QAAQ,WAAW;AAAA,QACrB,CAAC;AAED,YAAI,CAAC,SAAS,MAAM,CAAC,SAAS,KAAM,OAAM,IAAI,MAAM,WAAW;AAE/D,kBAAU;AAEV,cAAM,SAAS,SAAS,KAAK,UAAU;AACvC,cAAM,UAAU,IAAI,YAAY;AAChC,YAAI,SAAS;AAEb,eAAO,CAAC,SAAS;AACf,gBAAM,EAAE,MAAM,MAAM,IAAI,MAAM,OAAO,KAAK;AAE1C,cAAI,KAAM;AAEV,oBAAU,QAAQ,OAAO,OAAO,EAAE,QAAQ,KAAK,CAAC;AAEhD,gBAAM,EAAE,QAAQ,KAAK,IAAI,WAAW,MAAM;AAE1C,mBAAS;AAET,cAAI,OAAO,KAAK,CAAC,UAAU,MAAM,UAAU,kBAAkB,GAAG;AAC9D,oBAAQ;AAAA,UACV;AAAA,QACF;AAAA,MACF,QAAQ;AAAA,MAER;AAEA,UAAI,WAAW,SAAS,EAAG;AAE3B,cAAQ,WAAW,SAAS,OAAO;AACnC,gBAAU,KAAK,IAAI,UAAU,GAAG,cAAc;AAAA,IAChD;AAEA,UAAM,eAAe,MAAM;AACzB,UAAI,SAAS,GAAG;AACd,oBAAY,MAAM;AAClB,qBAAa,KAAK;AAElB;AAAA,MACF;AAGA,cAAQ;AACR,mBAAa,KAAK;AAClB,WAAK,QAAQ;AAAA,IACf;AAEA,aAAS,iBAAiB,oBAAoB,YAAY;AAC1D,SAAK,QAAQ;AAEb,WAAO,MAAM;AACX,gBAAU;AACV,kBAAY,MAAM;AAClB,mBAAa,KAAK;AAClB,eAAS,oBAAoB,oBAAoB,YAAY;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,MAAM,WAAW,CAAC;AAEtB,SAAO;AACT;","names":[]}

package/dist/loyalty/redeem-points-modal.d.ts

@@ -0,0 +1,30 @@
+import type { LoyaltyBalance, LoyaltyProgram } from '@withpotter/lib/api/types';
+/**
+ * Spending points at the counter, which the merchant could not do.
+ *
+ * `POST /loyalty/redeem` computes `points × currencyPerPoint` and returns the
+ * money value, but it is guarded by `MemberAuthGuard` and `@CurrentMemberId`:
+ * it is the CUSTOMER, signed in to the storefront, spending their own points.
+ * Box's merchants take orders over WhatsApp from customers who never sign
+ * in to anything, so points earned automatically on every paid order had no
+ * way of ever being spent.
+ *
+ * The only lever the dashboard had was "Adjust points" with a negative number.
+ * That does the right thing to the ledger — a negative adjustment calls
+ * `loyaltyRepo.redeemPoints` and records type `redeem`, not a correction — but
+ * it is framed as a correction and, the part that actually blocked the till,
+ * it never says what the points are WORTH. A staff member could take 500 points
+ * off a balance and had no idea what to take off the bill.
+ *
+ * No API change was needed in the end: `currencyPerPoint` and `minRedeemPoints`
+ * are already on `LoyaltyProgram` in this client, so the same conversion the
+ * storefront does can be done here and shown before anything is committed.
+ */
+export declare function RedeemPointsModal({ balance, program, tenantSlug, customerName, onClose, onRedeemed, }: {
+    balance: LoyaltyBalance;
+    program: Pick<LoyaltyProgram, 'pointsName' | 'currencyPerPoint' | 'minRedeemPoints'>;
+    tenantSlug: string;
+    customerName?: string;
+    onClose: () => void;
+    onRedeemed: () => void;
+}): import("react").JSX.Element;

package/dist/loyalty/redeem-points-modal.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { loyaltyApi } from "@withpotter/lib/api/loyalty";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter
+} from "@withpotter/ui-kit/dialog";
+import { Button } from "@withpotter/ui-kit/button";
+import { Input } from "@withpotter/ui-kit/input";
+import { cardClass } from "@withpotter/ui-kit/card";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+function RedeemPointsModal({
+  balance,
+  program,
+  tenantSlug,
+  customerName,
+  onClose,
+  onRedeemed
+}) {
+  const formatCurrency = useFormatCurrency();
+  const [points, setPoints] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const asked = parseInt(points, 10) || 0;
+  const available = balance.currentPoints;
+  const minimum = program.minRedeemPoints ?? 0;
+  const discount = asked * Number(program.currencyPerPoint ?? 0);
+  const problem = asked <= 0 ? null : asked > available ? `Only ${available.toLocaleString()} ${program.pointsName} available` : asked < minimum ? `The minimum is ${minimum.toLocaleString()} ${program.pointsName}` : null;
+  const canRedeem = asked > 0 && !problem;
+  const submit = async () => {
+    if (!canRedeem) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await loyaltyApi.adjustPoints(tenantSlug, balance.memberId, {
+        points: -asked,
+        reason: `Redeemed ${asked.toLocaleString()} ${program.pointsName} for ${formatCurrency(discount)} off`
+      });
+      onRedeemed();
+      onClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not redeem those points"
+      );
+    } finally {
+      setSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-sm", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Redeem points" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--text-secondary)]", children: [
+        customerName ? `${customerName} has ` : "Balance: ",
+        /* @__PURE__ */ jsxs("strong", { className: "text-[var(--text-primary)]", children: [
+          available.toLocaleString(),
+          " ",
+          program.pointsName
+        ] }),
+        minimum > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[var(--text-muted)]", children: [
+          " ",
+          "\xB7 minimum ",
+          minimum.toLocaleString(),
+          " to redeem"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          label: `How many ${program.pointsName} to redeem`,
+          type: "number",
+          min: 0,
+          max: available,
+          value: points,
+          onChange: (e) => setPoints(e.target.value),
+          placeholder: "0",
+          error: problem ?? void 0,
+          autoFocus: true
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: `${cardClass} p-4`, children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Take off the bill" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xl font-semibold tabular-nums text-[var(--text-primary)]", children: formatCurrency(canRedeem ? discount : 0) }),
+        canRedeem && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-[var(--text-tertiary)]", children: [
+          "Leaves ",
+          (available - asked).toLocaleString(),
+          " ",
+          program.pointsName
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--error)]", children: error })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onClose, disabled: saving, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: submit,
+          disabled: !canRedeem || saving,
+          loading: saving,
+          children: "Redeem"
+        }
+      )
+    ] })
+  ] }) });
+}
+export {
+  RedeemPointsModal
+};
+//# sourceMappingURL=redeem-points-modal.js.map

package/dist/loyalty/redeem-points-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/loyalty/redeem-points-modal.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { loyaltyApi } from '@withpotter/lib/api/loyalty';\nimport type { LoyaltyBalance, LoyaltyProgram } from '@withpotter/lib/api/types';\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogFooter,\n} from '@withpotter/ui-kit/dialog';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Input } from '@withpotter/ui-kit/input';\nimport { cardClass } from '@withpotter/ui-kit/card';\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\n\n/**\n * Spending points at the counter, which the merchant could not do.\n *\n * `POST /loyalty/redeem` computes `points × currencyPerPoint` and returns the\n * money value, but it is guarded by `MemberAuthGuard` and `@CurrentMemberId`:\n * it is the CUSTOMER, signed in to the storefront, spending their own points.\n * Box's merchants take orders over WhatsApp from customers who never sign\n * in to anything, so points earned automatically on every paid order had no\n * way of ever being spent.\n *\n * The only lever the dashboard had was \"Adjust points\" with a negative number.\n * That does the right thing to the ledger — a negative adjustment calls\n * `loyaltyRepo.redeemPoints` and records type `redeem`, not a correction — but\n * it is framed as a correction and, the part that actually blocked the till,\n * it never says what the points are WORTH. A staff member could take 500 points\n * off a balance and had no idea what to take off the bill.\n *\n * No API change was needed in the end: `currencyPerPoint` and `minRedeemPoints`\n * are already on `LoyaltyProgram` in this client, so the same conversion the\n * storefront does can be done here and shown before anything is committed.\n */\nexport function RedeemPointsModal({\n  balance,\n  program,\n  tenantSlug,\n  customerName,\n  onClose,\n  onRedeemed,\n}: {\n  balance: LoyaltyBalance;\n  program: Pick<\n    LoyaltyProgram,\n    'pointsName' | 'currencyPerPoint' | 'minRedeemPoints'\n  >;\n  tenantSlug: string;\n  customerName?: string;\n  onClose: () => void;\n  onRedeemed: () => void;\n}) {\n  const formatCurrency = useFormatCurrency();\n  const [points, setPoints] = useState('');\n  const [saving, setSaving] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const asked = parseInt(points, 10) || 0;\n  const available = balance.currentPoints;\n  const minimum = program.minRedeemPoints ?? 0;\n  const discount = asked * Number(program.currencyPerPoint ?? 0);\n\n  // Each reason is stated separately, because \"invalid\" tells a staff member\n  // standing in front of a customer nothing about what to do next.\n  const problem =\n    asked <= 0\n      ? null\n      : asked > available\n        ? `Only ${available.toLocaleString()} ${program.pointsName} available`\n        : asked < minimum\n          ? `The minimum is ${minimum.toLocaleString()} ${program.pointsName}`\n          : null;\n\n  const canRedeem = asked > 0 && !problem;\n\n  const submit = async () => {\n    if (!canRedeem) return;\n    setSaving(true);\n    setError(null);\n    try {\n      // Negative adjustment is the redemption path: the use-case routes it to\n      // `redeemPoints`, so the ledger reads as a redemption rather than an\n      // edit. The description says the money, because that is the fact\n      // somebody will be looking for in the history later.\n      await loyaltyApi.adjustPoints(tenantSlug, balance.memberId, {\n        points: -asked,\n        reason: `Redeemed ${asked.toLocaleString()} ${program.pointsName} for ${formatCurrency(discount)} off`,\n      });\n      onRedeemed();\n      onClose();\n    } catch (err) {\n      setError(\n        err instanceof Error ? err.message : 'Could not redeem those points',\n      );\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  return (\n    <Dialog open onOpenChange={(o) => !o && onClose()}>\n      <DialogContent className=\"sm:max-w-sm\">\n        <DialogHeader>\n          <DialogTitle>Redeem points</DialogTitle>\n        </DialogHeader>\n\n        <div className=\"space-y-4\">\n          <p className=\"text-sm text-[var(--text-secondary)]\">\n            {customerName ? `${customerName} has ` : 'Balance: '}\n            <strong className=\"text-[var(--text-primary)]\">\n              {available.toLocaleString()} {program.pointsName}\n            </strong>\n            {minimum > 0 && (\n              <span className=\"text-[var(--text-muted)]\">\n                {' '}\n                · minimum {minimum.toLocaleString()} to redeem\n              </span>\n            )}\n          </p>\n\n          <Input\n            label={`How many ${program.pointsName} to redeem`}\n            type=\"number\"\n            min={0}\n            max={available}\n            value={points}\n            onChange={(e) => setPoints(e.target.value)}\n            placeholder=\"0\"\n            error={problem ?? undefined}\n            autoFocus\n          />\n\n          {/* The whole point of this dialog: what to take off the bill. */}\n          <div className={`${cardClass} p-4`}>\n            <p className=\"text-xs text-[var(--text-muted)]\">\n              Take off the bill\n            </p>\n            <p className=\"mt-1 text-xl font-semibold tabular-nums text-[var(--text-primary)]\">\n              {formatCurrency(canRedeem ? discount : 0)}\n            </p>\n            {canRedeem && (\n              <p className=\"mt-1 text-xs text-[var(--text-tertiary)]\">\n                Leaves {(available - asked).toLocaleString()}{' '}\n                {program.pointsName}\n              </p>\n            )}\n          </div>\n\n          {error && <p className=\"text-sm text-[var(--error)]\">{error}</p>}\n        </div>\n\n        <DialogFooter>\n          <Button variant=\"secondary\" onClick={onClose} disabled={saving}>\n            Cancel\n          </Button>\n          <Button\n            onClick={submit}\n            disabled={!canRedeem || saving}\n            loading={saving}\n          >\n            Redeem\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/media/media-library-picker.d.ts

@@ -0,0 +1,29 @@
+import type { GalleryItem } from '@withpotter/lib/api/types';
+import { type PickerAccept } from './media-picker-copy';
+/**
+ * The photographs a merchant already owns, offered wherever one is being
+ * chosen, and the place new ones arrive. Choosing and uploading are the same
+ * sentence ("put this picture here"), so both happen in this one panel.
+ *
+ * Layout, as in Shopify's, Mintlify's and fal's pickers: the header is only
+ * the title, a hint and the close button, and the confirm button sits bottom
+ * right, says how many it will add, and stays disabled until something is
+ * picked. Upload and a small link to the full gallery sit bottom left, away
+ * from the close button. Files can also be dropped anywhere on the panel.
+ */
+export interface MediaLibraryPickerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /**
+     * How many more pictures the target will accept. `1` turns a tap into the
+     * whole interaction: no checkbox, no confirm button, it picks and closes.
+     */
+    remaining?: number;
+    onPick: (items: GalleryItem[]) => void;
+    /** The editor knows its tenant before the auth context does on a cold route. */
+    tenantSlug?: string;
+    title?: string;
+    /** `image` and `video` keep a canvas field type-safe; `media` offers both. */
+    accept?: PickerAccept;
+}
+export declare function MediaLibraryPicker({ open, onOpenChange, remaining, onPick, tenantSlug, title, accept, }: MediaLibraryPickerProps): import("react").JSX.Element;