@withpotter/components 0.13.0-next.101

package/dist/styles/mobile/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/styles/mobile/theme.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport interface MobileTheme {\n  canvas: string;\n  surface: string;\n  card: string;\n  elevated: string;\n  border: string;\n  borderStrong: string;\n  text: string;\n  textSecondary: string;\n  textTertiary: string;\n  textMuted: string;\n  accent: string;\n  accentFg: string;\n  good: string;\n  warn: string;\n  bad: string;\n}\n\nconst charcoal: MobileTheme = {\n  canvas: '#000000', // true black page background\n  surface: '#000000', // chrome (matches canvas)\n  card: '#161616', // first elevation — readable contrast against pure black\n  elevated: '#1F1F1F', // raised elements (sheets, pressed states)\n  border: '#2A2A2A',\n  borderStrong: '#3A3A3A',\n  text: '#F3F4F6',\n  textSecondary: '#D1D5DB',\n  textTertiary: '#9CA3AF',\n  textMuted: '#6B7280',\n  accent: '#116DFF',\n  accentFg: '#FFFFFF',\n  good: '#4ADE80',\n  warn: '#F4B740',\n  bad: '#F87171',\n};\n\nconst paper: MobileTheme = {\n  canvas: '#FFFFFF',\n  surface: '#FFFFFF',\n  card: '#F7F6F3',\n  elevated: '#F0EEE8',\n  border: '#EAE6DC',\n  borderStrong: '#D6CFBF',\n  text: '#1A1916',\n  textSecondary: '#4A4842',\n  textTertiary: '#7A786E',\n  textMuted: '#A39F92',\n  accent: '#116DFF',\n  accentFg: '#FFFFFF',\n  good: '#16A34A',\n  warn: '#D97706',\n  bad: '#DC2626',\n};\n\nconst apple: MobileTheme = {\n  canvas: '#F2F2F7',\n  surface: '#FFFFFF',\n  card: '#FFFFFF',\n  elevated: '#E5E5EA',\n  border: '#D1D1D6',\n  borderStrong: '#C6C6C8',\n  text: '#1C1C1E',\n  textSecondary: '#3C3C43',\n  textTertiary: '#8E8E93',\n  textMuted: '#AEAEB2',\n  accent: '#116DFF',\n  accentFg: '#FFFFFF',\n  good: '#34C759',\n  warn: '#FF9500',\n  bad: '#FF3B30',\n};\n\nconst obsidian: MobileTheme = {\n  ...charcoal,\n  canvas: '#000000',\n  surface: '#0B0E14',\n  card: '#11151E',\n  elevated: '#1A2030',\n  border: '#2A3142',\n  borderStrong: '#3A4358',\n};\n\nconst cool: MobileTheme = {\n  ...paper,\n  canvas: '#F6F8FB',\n  elevated: '#EEF1F6',\n  border: '#E2E6EE',\n  borderStrong: '#CCD2DD',\n};\n\nexport const mobileThemes = {\n  charcoal,\n  paper,\n  apple,\n  obsidian,\n  cool,\n} satisfies Record<string, MobileTheme>;\n\nexport type MobileThemeName = keyof typeof mobileThemes;\n\nexport const ACTIVE_DARK: MobileThemeName = 'charcoal';\nexport const ACTIVE_LIGHT: MobileThemeName = 'paper';\n\nexport const tokens: MobileTheme = mobileThemes[ACTIVE_DARK];\nexport const lightTokens: MobileTheme = mobileThemes[ACTIVE_LIGHT];\n\nexport function cssVarsFromTheme(theme: MobileTheme): CSSProperties {\n  return {\n    '--mb-canvas': theme.canvas,\n    '--mb-surface': theme.surface,\n    '--mb-card': theme.card,\n    '--mb-elevated': theme.elevated,\n    '--mb-border': theme.border,\n    '--mb-border-strong': theme.borderStrong,\n    '--mb-text': theme.text,\n    '--mb-text-secondary': theme.textSecondary,\n    '--mb-text-tertiary': theme.textTertiary,\n    '--mb-text-muted': theme.textMuted,\n    // Follow the box brand accent when set (via `box brand`); otherwise fall\n    // back to the palette's own accent so unbranded boxes are unaffected.\n    '--mb-accent': `var(--accent-primary, ${theme.accent})`,\n    '--mb-accent-fg': theme.accentFg,\n    '--mb-good': theme.good,\n    '--mb-warn': theme.warn,\n    '--mb-bad': theme.bad,\n  } as CSSProperties;\n}\n"],"mappings":"AAoBA,MAAM,WAAwB;AAAA,EAC5B,QAAQ;AAAA;AAAA,EACR,SAAS;AAAA;AAAA,EACT,MAAM;AAAA;AAAA,EACN,UAAU;AAAA;AAAA,EACV,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,MAAM;AAAA,EACN,eAAe;AAAA,EACf,cAAc;AAAA,EACd,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AACP;AAEA,MAAM,QAAqB;AAAA,EACzB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,MAAM;AAAA,EACN,eAAe;AAAA,EACf,cAAc;AAAA,EACd,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AACP;AAEA,MAAM,QAAqB;AAAA,EACzB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,MAAM;AAAA,EACN,eAAe;AAAA,EACf,cAAc;AAAA,EACd,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AACP;AAEA,MAAM,WAAwB;AAAA,EAC5B,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,cAAc;AAChB;AAEA,MAAM,OAAoB;AAAA,EACxB,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,cAAc;AAChB;AAEO,MAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIO,MAAM,cAA+B;AACrC,MAAM,eAAgC;AAEtC,MAAM,SAAsB,aAAa,WAAW;AACpD,MAAM,cAA2B,aAAa,YAAY;AAE1D,SAAS,iBAAiB,OAAmC;AAClE,SAAO;AAAA,IACL,eAAe,MAAM;AAAA,IACrB,gBAAgB,MAAM;AAAA,IACtB,aAAa,MAAM;AAAA,IACnB,iBAAiB,MAAM;AAAA,IACvB,eAAe,MAAM;AAAA,IACrB,sBAAsB,MAAM;AAAA,IAC5B,aAAa,MAAM;AAAA,IACnB,uBAAuB,MAAM;AAAA,IAC7B,sBAAsB,MAAM;AAAA,IAC5B,mBAAmB,MAAM;AAAA;AAAA;AAAA,IAGzB,eAAe,yBAAyB,MAAM,MAAM;AAAA,IACpD,kBAAkB,MAAM;AAAA,IACxB,aAAa,MAAM;AAAA,IACnB,aAAa,MAAM;AAAA,IACnB,YAAY,MAAM;AAAA,EACpB;AACF;","names":[]}

package/dist/styles/reader-mode.module.css

@@ -0,0 +1,174 @@
+/* @source: withpotter/web-render web/src/platform-pages/blog/_components/reader-mode.module.css */
+
+.readerSurface {
+  --reading-bg: var(--bg-base);
+  --reading-panel: color-mix(in oklab, var(--bg-base) 88%, var(--bg-muted));
+  --reading-border: color-mix(in oklab, var(--border-default) 84%, transparent);
+  --reading-heading: var(--text-primary);
+  --reading-text: var(--text-primary);
+  --reading-muted: var(--text-secondary);
+  --reading-link: var(--accent-primary, var(--text-link));
+  --reading-blockquote-border: color-mix(
+    in oklab,
+    var(--accent-primary, var(--text-link)) 22%,
+    var(--border-default)
+  );
+  --reading-blockquote-text: var(--text-secondary);
+  --reading-code-bg: color-mix(in oklab, var(--bg-muted) 80%, var(--bg-base));
+  --reading-line-height: 1.58;
+  --reading-paragraph-spacing: 1.75em;
+  --reading-measure: 680px;
+  border: 1px solid var(--reading-border);
+  border-radius: 24px;
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklab, var(--reading-panel) 92%, var(--bg-base)) 0%,
+    var(--reading-bg) 100%
+  );
+  box-shadow:
+    0 1px 2px color-mix(in oklab, var(--text-primary) 5%, transparent),
+    0 20px 48px color-mix(in oklab, var(--text-primary) 4%, transparent);
+  padding: clamp(24px, 5vw, 56px);
+}
+
+.original {
+  --reading-link: var(--accent-primary, var(--text-link));
+}
+
+.quiet {
+  --reading-bg: color-mix(in oklab, var(--bg-base) 70%, var(--bg-muted));
+  --reading-panel: color-mix(in oklab, var(--bg-base) 60%, var(--bg-muted));
+  --reading-heading: var(--text-primary);
+  --reading-text: color-mix(
+    in oklab,
+    var(--text-primary) 92%,
+    var(--text-secondary)
+  );
+  --reading-muted: color-mix(
+    in oklab,
+    var(--text-secondary) 85%,
+    var(--text-muted)
+  );
+  --reading-link: var(--text-primary);
+  --reading-blockquote-border: var(--border-default);
+  --reading-blockquote-text: var(--text-secondary);
+}
+
+.readerMeasure {
+  width: min(100%, var(--reading-measure));
+  margin: 0 auto;
+}
+
+.readerMeasure :global(.blog-tiptap) {
+  min-height: 60vh;
+  color: var(--reading-text);
+  font-size: clamp(1rem, 0.96rem + 0.16vw, 1.08rem);
+  line-height: var(--reading-line-height);
+  font-family: var(--font-body), system-ui, sans-serif;
+}
+
+.readerMeasure :global(.blog-tiptap > * + *) {
+  margin-top: var(--reading-paragraph-spacing);
+}
+
+.readerMeasure :global(.blog-tiptap p) {
+  margin: 0;
+  color: var(--reading-text);
+}
+
+.readerMeasure :global(.blog-tiptap h1) {
+  margin: 0;
+  color: var(--reading-heading);
+  font-size: clamp(2.35rem, 2.1rem + 0.7vw, 3rem);
+  line-height: 1.08;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+
+.readerMeasure :global(.blog-tiptap h2) {
+  margin: 0;
+  color: var(--reading-heading);
+  font-size: clamp(1.7rem, 1.5rem + 0.45vw, 2.1rem);
+  line-height: 1.18;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+.readerMeasure :global(.blog-tiptap h3) {
+  margin: 0;
+  color: var(--reading-heading);
+  font-size: clamp(1.28rem, 1.16rem + 0.24vw, 1.48rem);
+  line-height: 1.24;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+}
+
+.readerMeasure :global(.blog-tiptap blockquote) {
+  margin: 0;
+  padding-left: 1.2rem;
+  border-left: 3px solid var(--reading-blockquote-border);
+  color: var(--reading-blockquote-text);
+  font-style: italic;
+}
+
+.readerMeasure :global(.blog-tiptap ul),
+.readerMeasure :global(.blog-tiptap ol) {
+  margin: 0;
+  padding-left: 1.4rem;
+  color: var(--reading-text);
+}
+
+.readerMeasure :global(.blog-tiptap ul) {
+  list-style: disc;
+}
+
+.readerMeasure :global(.blog-tiptap ol) {
+  list-style: decimal;
+}
+
+.readerMeasure :global(.blog-tiptap li + li) {
+  margin-top: 0.45em;
+}
+
+.readerMeasure :global(.blog-tiptap a) {
+  color: var(--reading-link);
+  text-decoration: underline;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.14em;
+}
+
+.readerMeasure :global(.blog-tiptap code) {
+  background: var(--reading-code-bg);
+  border-radius: 6px;
+  padding: 0.16rem 0.38rem;
+  font-size: 0.92em;
+  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
+}
+
+.readerMeasure :global(.blog-tiptap pre) {
+  margin: 0;
+  background: var(--reading-code-bg);
+  border: 1px solid color-mix(in oklab, var(--reading-border) 85%, transparent);
+  border-radius: 16px;
+  padding: 1rem 1.1rem;
+  overflow-x: auto;
+}
+
+.readerMeasure :global(.blog-tiptap pre code) {
+  background: transparent;
+  padding: 0;
+}
+
+.readerMeasure :global(.blog-tiptap img) {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+  border-radius: 18px;
+}
+
+.readerMeasure :global(.blog-tiptap hr) {
+  border: 0;
+  border-top: 1px solid var(--reading-border);
+  margin: 0;
+}

package/dist/support/case-composer.d.ts

@@ -0,0 +1,80 @@
+import type { ServiceCaseAttachment } from '@withpotter/lib/service-operations-api';
+/**
+ * Saying it out loud, and showing what you are looking at.
+ *
+ * OWNED IN ONE PLACE BECAUSE BOTH ENDS OF A CASE NEED IT. Opening a case and
+ * replying to one are the same act performed twice, and the first version of
+ * this screen let a merchant attach nothing at either end — while the message
+ * model already carried attachments and the thread already rendered them, so
+ * an admin could send a screenshot to someone who could not send one back.
+ *
+ * The clip is held raw and uploaded on submit, not on stop: uploading when the
+ * recording ends burns an upload every time somebody re-records, and most
+ * people re-record.
+ */
+export declare function useCaseComposer(): {
+    recorder: {
+        state: import("@withpotter/hooks/use-voice-recorder").RecorderState;
+        seconds: number;
+        livePeaksRef: import("react").RefObject<number[]>;
+        recording: import("@withpotter/hooks/use-voice-recorder").VoiceRecording | null;
+        start: () => Promise<void>;
+        stop: () => void;
+        discard: () => void;
+        reset: () => void;
+        maxSeconds: number;
+        isBusy: boolean;
+    };
+    voice: import("@withpotter/hooks/use-voice-recorder").VoiceRecording | null;
+    recordingNow: boolean;
+    image: ServiceCaseAttachment | null;
+    setImage: import("react").Dispatch<import("react").SetStateAction<ServiceCaseAttachment | null>>;
+    uploading: boolean;
+    pickImage: ([file]: File[]) => Promise<void>;
+    collect: () => Promise<ServiceCaseAttachment[] | null>;
+    reset: () => void;
+    /** True when there is something to send even with an empty message box. */
+    hasAttachment: boolean;
+};
+export type CaseComposer = ReturnType<typeof useCaseComposer>;
+/**
+ * The box you write a case into, and the box you reply in.
+ *
+ * IT IS THE PROMPT BOX'S SHAPE, and that is the point rather than a
+ * resemblance. It used to be a plain field with a bordered "Record a voice
+ * note" card under it and an "Add screenshot" pill under that: three stacked
+ * objects for one message, in a product whose other writing surface is a
+ * single well with its controls on a row inside it. John, looking at the two
+ * side by side: *"the record or upload shouldnt they be buttons just like how
+ * the prompt box has it"*. So it is the same `composer-well`, the same 28px
+ * round controls, the same arrow that goes brand when there is something to
+ * send.
+ *
+ * THE MICROPHONE IS NOT THE SAME MICROPHONE, and this is the one thing that
+ * could not be borrowed. Box's mic is voice MODE — the browser recognises
+ * speech and streams words into the field, and no audio is ever sent. This one
+ * RECORDS, and the clip is attached and delivered as itself, because browser
+ * recognition is Chrome-only and does badly with Nigerian-accented English,
+ * which excludes precisely the merchants a voice note exists for. Reusing
+ * `PotterComposer` wholesale would have quietly swapped "say what happened"
+ * for "have your accent guessed at", and a bad transcript would have become
+ * their support message.
+ */
+export declare function CaseComposer({ composer, value, onValueChange, onSend, placeholder, disabled, busy, minRows, }: {
+    composer: CaseComposer;
+    value: string;
+    onValueChange: (value: string) => void;
+    /**
+     * Omit it where the surface already commits.
+     *
+     * The create dialog has a footer, and a dialog is committed from its footer.
+     * With an arrow in the box as well there were two send controls two hundred
+     * pixels apart, both live, and nothing to tell you which one the Cancel
+     * beside it belonged to.
+     */
+    onSend?: () => void;
+    placeholder: string;
+    disabled?: boolean;
+    busy?: boolean;
+    minRows?: number;
+}): import("react").JSX.Element;

package/dist/support/case-composer.js

@@ -0,0 +1,255 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { ArrowUp, Mic, Paperclip, Square, X } from "lucide-react";
+import { AutoGrowTextarea } from "@withpotter/ui-kit/auto-grow-textarea";
+import { ComposerButton } from "@withpotter/ui-kit/composer-button";
+import { FileInput } from "@withpotter/ui-kit/file-input";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { useVoiceRecorder } from "@withpotter/hooks/use-voice-recorder";
+import { useDictation } from "@withpotter/hooks/use-dictation";
+import {
+  TranscriptPlayer
+} from "@withpotter/ui-kit/transcript-player";
+import { Waveform } from "@withpotter/components/voice/waveform";
+const LIVE_SLOTS = 28;
+import { playSound } from "@withpotter/lib/sound";
+import {
+  uploadAudio,
+  uploadImage,
+  voiceUploadProblem
+} from "@withpotter/lib/media-service";
+const MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+function clock(seconds) {
+  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
+}
+function useCaseComposer() {
+  const { toast } = useToast();
+  const recorder = useVoiceRecorder();
+  const [image, setImage] = useState(null);
+  const [uploading, setUploading] = useState(false);
+  const voice = recorder.recording;
+  const recordingNow = recorder.state === "recording" || recorder.state === "stopping";
+  const pickImage = async ([file]) => {
+    if (!file?.type.startsWith("image/")) return;
+    if (file.size > MAX_IMAGE_BYTES) {
+      toast({
+        title: "Image too large",
+        description: "Max 5MB",
+        variant: "destructive"
+      });
+      return;
+    }
+    setUploading(true);
+    try {
+      const { url } = await uploadImage(file);
+      setImage({ url, name: file.name, mimeType: file.type, size: file.size });
+    } catch {
+      toast({ title: "Upload failed", variant: "destructive" });
+    } finally {
+      setUploading(false);
+    }
+  };
+  const collect = async () => {
+    const attachments = [];
+    if (voice) {
+      try {
+        const { url } = await uploadAudio(voice.blob, voice.mimeType);
+        attachments.push({
+          url,
+          name: `Voice note (${voice.seconds}s)`,
+          mimeType: voice.mimeType,
+          size: voice.blob.size
+        });
+      } catch (error) {
+        console.error("Voice note upload failed", error);
+        toast({
+          title: "Your voice note didn\u2019t upload",
+          description: voiceUploadProblem(error),
+          variant: "destructive"
+        });
+        return null;
+      }
+    }
+    if (image) attachments.push(image);
+    return attachments;
+  };
+  const reset = () => {
+    setImage(null);
+    recorder.discard();
+  };
+  return {
+    recorder,
+    voice,
+    recordingNow,
+    image,
+    setImage,
+    uploading,
+    pickImage,
+    collect,
+    reset,
+    /** True when there is something to send even with an empty message box. */
+    hasAttachment: Boolean(voice || image)
+  };
+}
+function CaseComposer({
+  composer,
+  value,
+  onValueChange,
+  onSend,
+  placeholder,
+  disabled,
+  busy,
+  minRows = 3
+}) {
+  const { recorder, voice, recordingNow, image } = composer;
+  const canSend = !disabled && !busy && (value.trim() || composer.hasAttachment);
+  const picker = useRef(null);
+  const draftBefore = useRef("");
+  const [segments, setSegments] = useState([]);
+  const dictation = useDictation({
+    onTranscript: (text) => {
+      const base = draftBefore.current;
+      const heard = text.trim();
+      if (!heard) return;
+      onValueChange(base ? `${base.trimEnd()} ${heard}` : heard);
+    },
+    onSegment: ({ text, at }) => setSegments((prev) => [...prev, { text: text.trim(), at: at / 1e3 }])
+  });
+  const startVoice = () => {
+    draftBefore.current = value;
+    setSegments([]);
+    void recorder.start();
+    if (dictation.supported) dictation.start();
+  };
+  const stopVoice = () => {
+    recorder.stop();
+    if (dictation.supported) dictation.stop();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "composer-well p-3", children: [
+    (voice || image) && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
+      voice && /* @__PURE__ */ jsx("div", { className: "flex items-start gap-2 rounded-lg bg-[var(--bg-muted)] px-2 py-2", children: /* @__PURE__ */ jsx(
+        TranscriptPlayer,
+        {
+          url: voice.url,
+          seconds: voice.seconds,
+          peaks: voice.peaks,
+          segments: segments.length ? segments : void 0,
+          onDiscard: () => {
+            recorder.discard();
+            setSegments([]);
+          },
+          className: "min-w-0 flex-1"
+        }
+      ) }),
+      image && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: image.url,
+            alt: image.name,
+            className: "h-12 rounded-lg border border-line"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => composer.setImage(null),
+            "aria-label": "Remove screenshot",
+            className: "absolute -right-2 -top-2 grid size-5 place-items-center rounded-full bg-[var(--bg-base)] text-[var(--text-tertiary)] shadow-sm transition-colors hover:text-ink",
+            children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      AutoGrowTextarea,
+      {
+        value,
+        onChange: (event) => onValueChange(event.target.value),
+        placeholder: recordingNow ? dictation.supported ? "Listening. What you say appears here\u2026" : "Listening\u2026" : placeholder,
+        rows: minRows,
+        disabled,
+        "aria-label": placeholder,
+        className: "w-full resize-none bg-transparent px-1 text-sm text-ink outline-none placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          FileInput,
+          {
+            ref: picker,
+            accept: "image/*",
+            onFiles: composer.pickImage,
+            disabled: composer.uploading || disabled,
+            "aria-label": "Add a screenshot"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ComposerButton,
+          {
+            icon: Paperclip,
+            label: "Add a screenshot",
+            disabled: composer.uploading || disabled || Boolean(image),
+            title: image ? "One screenshot at a time" : "Add a screenshot",
+            onClick: () => picker.current?.click()
+          }
+        ),
+        recorder.state !== "unsupported" && /* @__PURE__ */ jsx(
+          ComposerButton,
+          {
+            icon: recordingNow ? Square : Mic,
+            label: recordingNow ? "Stop recording" : "Record a voice note",
+            tone: recordingNow ? "recording" : "quiet",
+            disabled: disabled || recorder.isBusy || Boolean(voice),
+            title: voice ? "Remove the clip to record another" : "Say it instead of typing it",
+            onClick: () => {
+              if (recordingNow) stopVoice();
+              else startVoice();
+            }
+          }
+        ),
+        recordingNow && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "size-2 shrink-0 rounded-full bg-[var(--error)] motion-safe:animate-pulse",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Waveform,
+            {
+              peaks: recorder.livePeaksRef,
+              slots: LIVE_SLOTS,
+              color: "var(--error)",
+              height: 22,
+              className: "min-w-0 max-w-[180px] flex-1"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-[var(--error)]", children: clock(recorder.seconds ?? 0) })
+        ] })
+      ] }),
+      onSend && /* @__PURE__ */ jsx(
+        ComposerButton,
+        {
+          icon: ArrowUp,
+          label: "Send",
+          tone: "send",
+          disabled: !canSend,
+          onClick: () => {
+            playSound("send");
+            onSend();
+          }
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  CaseComposer,
+  useCaseComposer
+};
+//# sourceMappingURL=case-composer.js.map

package/dist/support/case-composer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/support/case-composer.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\nimport { ArrowUp, Mic, Paperclip, Square, X } from 'lucide-react';\n// Concrete modules, not the `@withpotter/ui-kit` barrel: `feedback-widget`\n// imports this composer, and the barrel would close the cycle its own comment\n// documents (ui/index -> report-page -> feedback -> feedback-widget -> here).\nimport { AutoGrowTextarea } from '@withpotter/ui-kit/auto-grow-textarea';\nimport { ComposerButton } from '@withpotter/ui-kit/composer-button';\nimport { FileInput } from '@withpotter/ui-kit/file-input';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { useVoiceRecorder } from '@withpotter/hooks/use-voice-recorder';\nimport { useDictation } from '@withpotter/hooks/use-dictation';\nimport {\n  TranscriptPlayer,\n  type TranscriptSegment,\n} from '@withpotter/ui-kit/transcript-player';\nimport { Waveform } from '@withpotter/components/voice/waveform';\n\n/** Bars in the live strip. Narrow enough to sit in a composer's control row. */\nconst LIVE_SLOTS = 28;\nimport { playSound } from '@withpotter/lib/sound';\nimport {\n  uploadAudio,\n  uploadImage,\n  voiceUploadProblem,\n} from '@withpotter/lib/media-service';\nimport type { ServiceCaseAttachment } from '@withpotter/lib/service-operations-api';\n\nconst MAX_IMAGE_BYTES = 5 * 1024 * 1024;\n\n/** mm:ss, because a clip's length is the one thing you judge it by. */\nfunction clock(seconds: number) {\n  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;\n}\n\n/**\n * Saying it out loud, and showing what you are looking at.\n *\n * OWNED IN ONE PLACE BECAUSE BOTH ENDS OF A CASE NEED IT. Opening a case and\n * replying to one are the same act performed twice, and the first version of\n * this screen let a merchant attach nothing at either end — while the message\n * model already carried attachments and the thread already rendered them, so\n * an admin could send a screenshot to someone who could not send one back.\n *\n * The clip is held raw and uploaded on submit, not on stop: uploading when the\n * recording ends burns an upload every time somebody re-records, and most\n * people re-record.\n */\nexport function useCaseComposer() {\n  const { toast } = useToast();\n  const recorder = useVoiceRecorder();\n  const [image, setImage] = useState<ServiceCaseAttachment | null>(null);\n  const [uploading, setUploading] = useState(false);\n\n  const voice = recorder.recording;\n  const recordingNow =\n    recorder.state === 'recording' || recorder.state === 'stopping';\n\n  const pickImage = async ([file]: File[]) => {\n    if (!file?.type.startsWith('image/')) return;\n    if (file.size > MAX_IMAGE_BYTES) {\n      toast({\n        title: 'Image too large',\n        description: 'Max 5MB',\n        variant: 'destructive',\n      });\n      return;\n    }\n    setUploading(true);\n    try {\n      const { url } = await uploadImage(file);\n      setImage({ url, name: file.name, mimeType: file.type, size: file.size });\n    } catch {\n      toast({ title: 'Upload failed', variant: 'destructive' });\n    } finally {\n      setUploading(false);\n    }\n  };\n\n  /**\n   * Everything attached, uploaded. Returns `null` — never a partial list — when\n   * the clip fails to upload: filing the case without it would drop the thing\n   * the merchant chose to say out loud, silently, and they would never know.\n   */\n  const collect = async (): Promise<ServiceCaseAttachment[] | null> => {\n    const attachments: ServiceCaseAttachment[] = [];\n    if (voice) {\n      try {\n        const { url } = await uploadAudio(voice.blob, voice.mimeType);\n        attachments.push({\n          url,\n          name: `Voice note (${voice.seconds}s)`,\n          mimeType: voice.mimeType,\n          size: voice.blob.size,\n        });\n      } catch (error) {\n        console.error('Voice note upload failed', error);\n        toast({\n          title: 'Your voice note didn’t upload',\n          description: voiceUploadProblem(error),\n          variant: 'destructive',\n        });\n        return null;\n      }\n    }\n    if (image) attachments.push(image);\n    return attachments;\n  };\n\n  const reset = () => {\n    setImage(null);\n    recorder.discard();\n  };\n\n  return {\n    recorder,\n    voice,\n    recordingNow,\n    image,\n    setImage,\n    uploading,\n    pickImage,\n    collect,\n    reset,\n    /** True when there is something to send even with an empty message box. */\n    hasAttachment: Boolean(voice || image),\n  };\n}\n\nexport type CaseComposer = ReturnType<typeof useCaseComposer>;\n\n/**\n * The box you write a case into, and the box you reply in.\n *\n * IT IS THE PROMPT BOX'S SHAPE, and that is the point rather than a\n * resemblance. It used to be a plain field with a bordered \"Record a voice\n * note\" card under it and an \"Add screenshot\" pill under that: three stacked\n * objects for one message, in a product whose other writing surface is a\n * single well with its controls on a row inside it. John, looking at the two\n * side by side: *\"the record or upload shouldnt they be buttons just like how\n * the prompt box has it\"*. So it is the same `composer-well`, the same 28px\n * round controls, the same arrow that goes brand when there is something to\n * send.\n *\n * THE MICROPHONE IS NOT THE SAME MICROPHONE, and this is the one thing that\n * could not be borrowed. Box's mic is voice MODE — the browser recognises\n * speech and streams words into the field, and no audio is ever sent. This one\n * RECORDS, and the clip is attached and delivered as itself, because browser\n * recognition is Chrome-only and does badly with Nigerian-accented English,\n * which excludes precisely the merchants a voice note exists for. Reusing\n * `PotterComposer` wholesale would have quietly swapped \"say what happened\"\n * for \"have your accent guessed at\", and a bad transcript would have become\n * their support message.\n */\nexport function CaseComposer({\n  composer,\n  value,\n  onValueChange,\n  onSend,\n  placeholder,\n  disabled,\n  busy,\n  minRows = 3,\n}: {\n  composer: CaseComposer;\n  value: string;\n  onValueChange: (value: string) => void;\n  /**\n   * Omit it where the surface already commits.\n   *\n   * The create dialog has a footer, and a dialog is committed from its footer.\n   * With an arrow in the box as well there were two send controls two hundred\n   * pixels apart, both live, and nothing to tell you which one the Cancel\n   * beside it belonged to.\n   */\n  onSend?: () => void;\n  placeholder: string;\n  disabled?: boolean;\n  busy?: boolean;\n  minRows?: number;\n}) {\n  const { recorder, voice, recordingNow, image } = composer;\n  const canSend =\n    !disabled && !busy && (value.trim() || composer.hasAttachment);\n  const picker = useRef<HTMLInputElement>(null);\n\n  /**\n   * THE WORDS ARRIVE WHILE YOU TALK, and the clip is still what gets sent.\n   *\n   * Two things run on one press: `MediaRecorder`, which captures the audio\n   * that is actually delivered, and the browser's recogniser, which writes\n   * what it heard into the box. That pairing is the whole design. Browser\n   * recognition is Chrome-only and does badly with Nigerian-accented English —\n   * which is precisely why we have never transcribed instead of recording, and\n   * why we still do not: a bad transcript can never destroy the message,\n   * because the message is the recording. The text is a draft you can read,\n   * fix, or ignore.\n   *\n   * Where the recogniser does not exist the clip records exactly as before and\n   * nothing else changes.\n   *\n   * WHAT THIS IS NOT YET: the transcript does not highlight as the clip plays.\n   * That needs word-level timings, which `SpeechRecognition` does not give at\n   * all — it needs a server transcription (Whisper and its like), which is a\n   * provider decision rather than a component one.\n   */\n  const draftBefore = useRef('');\n  /**\n   * The phrases, with roughly when each was said.\n   *\n   * Kept beside the clip rather than merged into the text, because they answer\n   * a different question: the text is what to read, these are where to look\n   * while it plays. Cleared at the start of every recording so a re-record\n   * cannot inherit the last one's timings.\n   */\n  const [segments, setSegments] = useState<TranscriptSegment[]>([]);\n  const dictation = useDictation({\n    onTranscript: (text) => {\n      const base = draftBefore.current;\n      const heard = text.trim();\n      if (!heard) return;\n      onValueChange(base ? `${base.trimEnd()} ${heard}` : heard);\n    },\n    onSegment: ({ text, at }) =>\n      setSegments((prev) => [...prev, { text: text.trim(), at: at / 1000 }]),\n  });\n\n  const startVoice = () => {\n    // Remembered before either engine starts, so the transcript extends what\n    // was already typed instead of eating it.\n    draftBefore.current = value;\n    setSegments([]);\n    void recorder.start();\n    if (dictation.supported) dictation.start();\n  };\n\n  const stopVoice = () => {\n    recorder.stop();\n    if (dictation.supported) dictation.stop();\n  };\n\n  return (\n    <div className=\"composer-well p-3\">\n      {/* What is already attached, above the words rather than below them: it\n          was chosen first and it is what the message is about. */}\n      {(voice || image) && (\n        <div className=\"mb-2 flex flex-wrap items-center gap-2\">\n          {voice && (\n            <div className=\"flex items-start gap-2 rounded-lg bg-[var(--bg-muted)] px-2 py-2\">\n              {/* Read it, listen to it, or press a line to jump there. The\n                  transcript is the same text that went into the box, kept in\n                  phrases so the player can follow along — see\n                  `TranscriptPlayer`. Without one (Safari, Firefox) it is a\n                  plain named player, which is what it was before. */}\n              <TranscriptPlayer\n                url={voice.url}\n                seconds={voice.seconds}\n                peaks={voice.peaks}\n                segments={segments.length ? segments : undefined}\n                onDiscard={() => {\n                  recorder.discard();\n                  setSegments([]);\n                }}\n                className=\"min-w-0 flex-1\"\n              />\n            </div>\n          )}\n          {image && (\n            <div className=\"relative\">\n              {/* eslint-disable-next-line @next/next/no-img-element */}\n              <img\n                src={image.url}\n                alt={image.name}\n                className=\"h-12 rounded-lg border border-line\"\n              />\n              <button\n                type=\"button\"\n                onClick={() => composer.setImage(null)}\n                aria-label=\"Remove screenshot\"\n                className=\"absolute -right-2 -top-2 grid size-5 place-items-center rounded-full bg-[var(--bg-base)] text-[var(--text-tertiary)] shadow-sm transition-colors hover:text-ink\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            </div>\n          )}\n        </div>\n      )}\n\n      <AutoGrowTextarea\n        value={value}\n        onChange={(event) => onValueChange(event.target.value)}\n        placeholder={\n          recordingNow\n            ? dictation.supported\n              ? 'Listening. What you say appears here…'\n              : 'Listening…'\n            : placeholder\n        }\n        rows={minRows}\n        disabled={disabled}\n        aria-label={placeholder}\n        className=\"w-full resize-none bg-transparent px-1 text-sm text-ink outline-none placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed\"\n      />\n\n      <div className=\"mt-2 flex items-center justify-between gap-2\">\n        <div className=\"flex items-center gap-2\">\n          {/* Held by a ref rather than found by a selector: two of these are\n              mounted at once whenever the inbox has its dialog open, and a\n              `document.querySelector` would pick whichever the DOM offered\n              first. */}\n          <FileInput\n            ref={picker}\n            accept=\"image/*\"\n            onFiles={composer.pickImage}\n            disabled={composer.uploading || disabled}\n            aria-label=\"Add a screenshot\"\n          />\n          <ComposerButton\n            icon={Paperclip}\n            label=\"Add a screenshot\"\n            disabled={composer.uploading || disabled || Boolean(image)}\n            title={image ? 'One screenshot at a time' : 'Add a screenshot'}\n            onClick={() => picker.current?.click()}\n          />\n          {recorder.state !== 'unsupported' && (\n            <ComposerButton\n              icon={recordingNow ? Square : Mic}\n              label={recordingNow ? 'Stop recording' : 'Record a voice note'}\n              tone={recordingNow ? 'recording' : 'quiet'}\n              disabled={disabled || recorder.isBusy || Boolean(voice)}\n              title={\n                voice\n                  ? 'Remove the clip to record another'\n                  : 'Say it instead of typing it'\n              }\n              onClick={() => {\n                if (recordingNow) stopVoice();\n                else startVoice();\n              }}\n            />\n          )}\n          {recordingNow && (\n            <>\n              {/* THE VOICE MAKES A SHAPE AGAIN.\n                  When the help sheet moved onto this composer it lost the live\n                  strip that used to sit in `VoiceComposer` — recording became a\n                  red number beside a square, which is the least physical thing\n                  in a product whose whole sound design is about mass. The\n                  canvas costs one paint a frame and zero React renders: the\n                  recorder mutates the peaks in place and only this reads them.\n                  The dot pulses because a still red dot and a stopped\n                  recording look identical. */}\n              <span\n                className=\"size-2 shrink-0 rounded-full bg-[var(--error)] motion-safe:animate-pulse\"\n                aria-hidden=\"true\"\n              />\n              <Waveform\n                peaks={recorder.livePeaksRef}\n                slots={LIVE_SLOTS}\n                color=\"var(--error)\"\n                height={22}\n                className=\"min-w-0 max-w-[180px] flex-1\"\n              />\n              <span className=\"shrink-0 text-xs tabular-nums text-[var(--error)]\">\n                {clock(recorder.seconds ?? 0)}\n              </span>\n            </>\n          )}\n        </div>\n\n        {onSend && (\n          <ComposerButton\n            icon={ArrowUp}\n            label=\"Send\"\n            tone=\"send\"\n            disabled={!canSend}\n            onClick={() => {\n              // The release: a light knock and a tone falling away with\n              // nothing under it. Played on the press rather than on the\n              // response, because the sound belongs to the gesture — the\n              // network is not what the merchant just did.\n              playSound('send');\n              onSend();\n            }}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/support/support-case-ui.d.ts

@@ -0,0 +1,18 @@
+import type { ServiceCaseStatus } from '@withpotter/lib/service-operations-api';
+export declare function SupportStatus({ status, size, }: {
+    status: ServiceCaseStatus;
+    size?: 'sm' | 'md';
+}): import("react").JSX.Element;
+/** The status filter's options, in the order a merchant scans them. */
+export declare const STATUS_FILTER_OPTIONS: {
+    value: string;
+    label: string;
+}[];
+export declare function formatSupportDate(value: string): string;
+/**
+ * "3 minutes ago" for anything today, the date after that.
+ *
+ * A support list is read for recency — whether the thing you sent this morning
+ * has moved — and a timestamp makes you do that arithmetic yourself.
+ */
+export declare function formatSupportAge(value: string): string;

package/dist/support/support-case-ui.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { SUPPORT_NAME } from "@withpotter/lib/support";
+const STATUS_LABELS = {
+  open: "Open",
+  waiting_on_potter: `With ${SUPPORT_NAME}`,
+  waiting_on_tenant: "Needs your reply",
+  waiting_on_customer: "Waiting on customer",
+  resolved: "Resolved",
+  closed: "Closed"
+};
+function SupportStatus({
+  status,
+  size = "sm"
+}) {
+  return /* @__PURE__ */ jsx(StatusBadge, { status, label: STATUS_LABELS[status], size });
+}
+const STATUS_FILTER_OPTIONS = [
+  { value: "", label: "All cases" },
+  { value: "waiting_on_tenant", label: STATUS_LABELS.waiting_on_tenant },
+  { value: "waiting_on_potter", label: STATUS_LABELS.waiting_on_potter },
+  { value: "open", label: STATUS_LABELS.open },
+  { value: "resolved", label: STATUS_LABELS.resolved },
+  { value: "closed", label: STATUS_LABELS.closed }
+];
+function formatSupportDate(value) {
+  return new Intl.DateTimeFormat(void 0, {
+    dateStyle: "medium",
+    timeStyle: "short"
+  }).format(new Date(value));
+}
+function formatSupportAge(value) {
+  const then = new Date(value).getTime();
+  const minutes = Math.round((Date.now() - then) / 6e4);
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.round(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(
+    new Date(value)
+  );
+}
+export {
+  STATUS_FILTER_OPTIONS,
+  SupportStatus,
+  formatSupportAge,
+  formatSupportDate
+};
+//# sourceMappingURL=support-case-ui.js.map

package/dist/support/support-case-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/support/support-case-ui.tsx"],"sourcesContent":["import { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport type { ServiceCaseStatus } from '@withpotter/lib/service-operations-api';\nimport { SUPPORT_NAME } from '@withpotter/lib/support';\n\n/**\n * The merchant's words for a case's state, not the engine's.\n *\n * `waiting_on_potter` is a column value; \"With Box\" is what a person needs\n * to read to know whether the ball is theirs. The COLOUR is not decided here —\n * it lives in the shared status map with every other status in the app, which\n * is where a private copy of \"amber means attention\" goes to drift. This file\n * only supplies the wording, through `StatusBadge`'s own `label`.\n */\nconst STATUS_LABELS: Record<ServiceCaseStatus, string> = {\n  open: 'Open',\n  waiting_on_potter: `With ${SUPPORT_NAME}`,\n  waiting_on_tenant: 'Needs your reply',\n  waiting_on_customer: 'Waiting on customer',\n  resolved: 'Resolved',\n  closed: 'Closed',\n};\n\nexport function SupportStatus({\n  status,\n  size = 'sm',\n}: {\n  status: ServiceCaseStatus;\n  size?: 'sm' | 'md';\n}) {\n  return (\n    <StatusBadge status={status} label={STATUS_LABELS[status]} size={size} />\n  );\n}\n\n/** The status filter's options, in the order a merchant scans them. */\nexport const STATUS_FILTER_OPTIONS = [\n  { value: '', label: 'All cases' },\n  { value: 'waiting_on_tenant', label: STATUS_LABELS.waiting_on_tenant },\n  { value: 'waiting_on_potter', label: STATUS_LABELS.waiting_on_potter },\n  { value: 'open', label: STATUS_LABELS.open },\n  { value: 'resolved', label: STATUS_LABELS.resolved },\n  { value: 'closed', label: STATUS_LABELS.closed },\n];\n\nexport function formatSupportDate(value: string) {\n  return new Intl.DateTimeFormat(undefined, {\n    dateStyle: 'medium',\n    timeStyle: 'short',\n  }).format(new Date(value));\n}\n\n/**\n * \"3 minutes ago\" for anything today, the date after that.\n *\n * A support list is read for recency — whether the thing you sent this morning\n * has moved — and a timestamp makes you do that arithmetic yourself.\n */\nexport function formatSupportAge(value: string) {\n  const then = new Date(value).getTime();\n  const minutes = Math.round((Date.now() - then) / 60000);\n  if (minutes < 1) return 'just now';\n  if (minutes < 60) return `${minutes}m ago`;\n  const hours = Math.round(minutes / 60);\n  if (hours < 24) return `${hours}h ago`;\n  const days = Math.round(hours / 24);\n  if (days < 7) return `${days}d ago`;\n  return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(\n    new Date(value),\n  );\n}\n"],"mappings":"AA8BI;AA9BJ,SAAS,mBAAmB;AAE5B,SAAS,oBAAoB;AAW7B,MAAM,gBAAmD;AAAA,EACvD,MAAM;AAAA,EACN,mBAAmB,QAAQ,YAAY;AAAA,EACvC,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,QAAQ;AACV;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,OAAO;AACT,GAGG;AACD,SACE,oBAAC,eAAY,QAAgB,OAAO,cAAc,MAAM,GAAG,MAAY;AAE3E;AAGO,MAAM,wBAAwB;AAAA,EACnC,EAAE,OAAO,IAAI,OAAO,YAAY;AAAA,EAChC,EAAE,OAAO,qBAAqB,OAAO,cAAc,kBAAkB;AAAA,EACrE,EAAE,OAAO,qBAAqB,OAAO,cAAc,kBAAkB;AAAA,EACrE,EAAE,OAAO,QAAQ,OAAO,cAAc,KAAK;AAAA,EAC3C,EAAE,OAAO,YAAY,OAAO,cAAc,SAAS;AAAA,EACnD,EAAE,OAAO,UAAU,OAAO,cAAc,OAAO;AACjD;AAEO,SAAS,kBAAkB,OAAe;AAC/C,SAAO,IAAI,KAAK,eAAe,QAAW;AAAA,IACxC,WAAW;AAAA,IACX,WAAW;AAAA,EACb,CAAC,EAAE,OAAO,IAAI,KAAK,KAAK,CAAC;AAC3B;AAQO,SAAS,iBAAiB,OAAe;AAC9C,QAAM,OAAO,IAAI,KAAK,KAAK,EAAE,QAAQ;AACrC,QAAM,UAAU,KAAK,OAAO,KAAK,IAAI,IAAI,QAAQ,GAAK;AACtD,MAAI,UAAU,EAAG,QAAO;AACxB,MAAI,UAAU,GAAI,QAAO,GAAG,OAAO;AACnC,QAAM,QAAQ,KAAK,MAAM,UAAU,EAAE;AACrC,MAAI,QAAQ,GAAI,QAAO,GAAG,KAAK;AAC/B,QAAM,OAAO,KAAK,MAAM,QAAQ,EAAE;AAClC,MAAI,OAAO,EAAG,QAAO,GAAG,IAAI;AAC5B,SAAO,IAAI,KAAK,eAAe,QAAW,EAAE,WAAW,SAAS,CAAC,EAAE;AAAA,IACjE,IAAI,KAAK,KAAK;AAAA,EAChB;AACF;","names":[]}

package/dist/take-payment.d.ts

@@ -0,0 +1,21 @@
+interface TakePaymentProps {
+    orderId: string;
+    orderNumber?: string;
+    amountLabel: string;
+    /** Refresh the record once the money is recorded. */
+    onRecorded?: () => void;
+}
+/**
+ * Take the money, at the counter, at the moment it changes hands.
+ *
+ * A record could be settled from a desk afterwards, but not from the phone in
+ * the merchant's hand while the customer is standing there — so cash sales were
+ * reconciled from memory at the end of the day, if at all.
+ *
+ * Confirmed before it writes, because this is the one action here that moves
+ * money and cannot be undone from this screen. The API refuses a second
+ * successful payment on the same order, so a mis-tap cannot double the day's
+ * takings, but a merchant should still be asked.
+ */
+export declare function TakePayment({ orderId, orderNumber, amountLabel, onRecorded, }: TakePaymentProps): import("react").JSX.Element;
+export {};