@withpotter/components 0.13.0-next.101

package/dist/feedback/voice-response-recorder.d.ts

@@ -0,0 +1,11 @@
+export interface VoiceResponse {
+    file: File;
+    previewUrl: string;
+    seconds: number;
+}
+interface VoiceResponseRecorderProps {
+    disabled?: boolean;
+    onChange: (response: VoiceResponse | null) => void;
+}
+export declare function VoiceResponseRecorder({ disabled, onChange, }: VoiceResponseRecorderProps): import("react").JSX.Element | null;
+export {};

package/dist/feedback/voice-response-recorder.js

@@ -0,0 +1,176 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Mic, Square, Trash2 } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+const MAX_SECONDS = 120;
+const MAX_BYTES = 10 * 1024 * 1024;
+const MIME_TYPES = [
+  "audio/webm;codecs=opus",
+  "audio/mp4",
+  "audio/ogg;codecs=opus"
+];
+function VoiceResponseRecorder({
+  disabled,
+  onChange
+}) {
+  const recorderRef = useRef(null);
+  const streamRef = useRef(null);
+  const previewUrlRef = useRef(null);
+  const startedAtRef = useRef(0);
+  const [recording, setRecording] = useState(false);
+  const [seconds, setSeconds] = useState(0);
+  const [preview, setPreview] = useState(null);
+  const [error, setError] = useState(null);
+  const releaseStream = () => {
+    streamRef.current?.getTracks().forEach((track) => track.stop());
+    streamRef.current = null;
+  };
+  const clearPreview = () => {
+    if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
+    previewUrlRef.current = null;
+    setPreview(null);
+    onChange(null);
+  };
+  const stopRecording = () => {
+    if (recorderRef.current?.state === "recording") recorderRef.current.stop();
+  };
+  useEffect(() => {
+    return () => {
+      const recorder = recorderRef.current;
+      recorderRef.current = null;
+      if (recorder) {
+        recorder.ondataavailable = null;
+        recorder.onstop = null;
+        recorder.onerror = null;
+        if (recorder.state === "recording") recorder.stop();
+      }
+      releaseStream();
+      if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    if (!recording) return;
+    const timer = window.setInterval(() => {
+      const elapsed = Math.min(
+        MAX_SECONDS,
+        Math.max(1, Math.ceil((Date.now() - startedAtRef.current) / 1e3))
+      );
+      setSeconds(elapsed);
+      if (elapsed >= MAX_SECONDS) stopRecording();
+    }, 250);
+    return () => window.clearInterval(timer);
+  }, [recording]);
+  const start = async () => {
+    setError(null);
+    clearPreview();
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      const mimeType = MIME_TYPES.find(
+        (type) => MediaRecorder.isTypeSupported(type)
+      );
+      const recorder = new MediaRecorder(
+        stream,
+        mimeType ? { mimeType } : void 0
+      );
+      const chunks = [];
+      recorder.ondataavailable = (event) => {
+        if (event.data.size) chunks.push(event.data);
+      };
+      recorder.onstop = () => {
+        const elapsed = Math.min(
+          MAX_SECONDS,
+          Math.max(1, Math.ceil((Date.now() - startedAtRef.current) / 1e3))
+        );
+        const blob = new Blob(chunks, { type: recorder.mimeType });
+        releaseStream();
+        setRecording(false);
+        setSeconds(elapsed);
+        if (!blob.size || blob.size > MAX_BYTES) {
+          setError(
+            blob.size > MAX_BYTES ? "Recording is larger than 10 MB. Please record a shorter response." : "No audio was captured. Please try again."
+          );
+          return;
+        }
+        const extension = recorder.mimeType.includes("mp4") ? "m4a" : "webm";
+        const file = new File([blob], `feedback-voice.${extension}`, {
+          type: recorder.mimeType
+        });
+        const previewUrl = URL.createObjectURL(blob);
+        previewUrlRef.current = previewUrl;
+        const response = { file, previewUrl, seconds: elapsed };
+        setPreview(response);
+        onChange(response);
+      };
+      recorder.onerror = () => {
+        releaseStream();
+        setRecording(false);
+        setError("Recording stopped unexpectedly. Please try again.");
+      };
+      recorderRef.current = recorder;
+      startedAtRef.current = Date.now();
+      setSeconds(0);
+      setRecording(true);
+      recorder.start(1e3);
+    } catch {
+      releaseStream();
+      setError(
+        "Microphone access is unavailable. You can still leave a written response."
+      );
+    }
+  };
+  if (typeof MediaRecorder === "undefined" || !navigator.mediaDevices?.getUserMedia) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-[4px] border border-[var(--border-default)] p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: "Voice response" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", "aria-live": "polite", children: recording ? `${formatTime(seconds)} of 2:00` : "Up to 2 minutes" })
+      ] }),
+      recording ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          size: "sm",
+          icon: /* @__PURE__ */ jsx(Square, { className: "size-4" }),
+          onClick: stopRecording,
+          children: "Stop"
+        }
+      ) : preview ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          icon: /* @__PURE__ */ jsx(Trash2, { className: "size-4" }),
+          disabled,
+          onClick: clearPreview,
+          children: "Discard"
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          size: "sm",
+          icon: /* @__PURE__ */ jsx(Mic, { className: "size-4" }),
+          disabled,
+          onClick: () => void start(),
+          children: "Record"
+        }
+      )
+    ] }),
+    preview ? /* @__PURE__ */ jsx("audio", { className: "h-10 w-full", controls: true, src: preview.previewUrl, children: "Your browser does not support audio playback." }) : null,
+    error ? /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--status-error)]", role: "alert", children: error }) : null
+  ] });
+}
+function formatTime(seconds) {
+  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
+}
+export {
+  VoiceResponseRecorder
+};
+//# sourceMappingURL=voice-response-recorder.js.map

package/dist/feedback/voice-response-recorder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/voice-response-recorder.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { Mic, Square, Trash2 } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\n\nexport interface VoiceResponse {\n  file: File;\n  previewUrl: string;\n  seconds: number;\n}\n\ninterface VoiceResponseRecorderProps {\n  disabled?: boolean;\n  onChange: (response: VoiceResponse | null) => void;\n}\n\nconst MAX_SECONDS = 120;\nconst MAX_BYTES = 10 * 1024 * 1024;\nconst MIME_TYPES = [\n  'audio/webm;codecs=opus',\n  'audio/mp4',\n  'audio/ogg;codecs=opus',\n];\n\nexport function VoiceResponseRecorder({\n  disabled,\n  onChange,\n}: VoiceResponseRecorderProps) {\n  const recorderRef = useRef<MediaRecorder | null>(null);\n  const streamRef = useRef<MediaStream | null>(null);\n  const previewUrlRef = useRef<string | null>(null);\n  const startedAtRef = useRef(0);\n  const [recording, setRecording] = useState(false);\n  const [seconds, setSeconds] = useState(0);\n  const [preview, setPreview] = useState<VoiceResponse | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  const releaseStream = () => {\n    streamRef.current?.getTracks().forEach((track) => track.stop());\n    streamRef.current = null;\n  };\n\n  const clearPreview = () => {\n    if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);\n    previewUrlRef.current = null;\n    setPreview(null);\n    onChange(null);\n  };\n\n  const stopRecording = () => {\n    if (recorderRef.current?.state === 'recording') recorderRef.current.stop();\n  };\n\n  useEffect(() => {\n    return () => {\n      const recorder = recorderRef.current;\n      recorderRef.current = null;\n      if (recorder) {\n        recorder.ondataavailable = null;\n        recorder.onstop = null;\n        recorder.onerror = null;\n        if (recorder.state === 'recording') recorder.stop();\n      }\n      releaseStream();\n      if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!recording) return;\n    const timer = window.setInterval(() => {\n      const elapsed = Math.min(\n        MAX_SECONDS,\n        Math.max(1, Math.ceil((Date.now() - startedAtRef.current) / 1000)),\n      );\n      setSeconds(elapsed);\n      if (elapsed >= MAX_SECONDS) stopRecording();\n    }, 250);\n    return () => window.clearInterval(timer);\n  }, [recording]);\n\n  const start = async () => {\n    setError(null);\n    clearPreview();\n    try {\n      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n      streamRef.current = stream;\n      const mimeType = MIME_TYPES.find((type) =>\n        MediaRecorder.isTypeSupported(type),\n      );\n      const recorder = new MediaRecorder(\n        stream,\n        mimeType ? { mimeType } : undefined,\n      );\n      const chunks: Blob[] = [];\n      recorder.ondataavailable = (event) => {\n        if (event.data.size) chunks.push(event.data);\n      };\n      recorder.onstop = () => {\n        const elapsed = Math.min(\n          MAX_SECONDS,\n          Math.max(1, Math.ceil((Date.now() - startedAtRef.current) / 1000)),\n        );\n        const blob = new Blob(chunks, { type: recorder.mimeType });\n        releaseStream();\n        setRecording(false);\n        setSeconds(elapsed);\n        if (!blob.size || blob.size > MAX_BYTES) {\n          setError(\n            blob.size > MAX_BYTES\n              ? 'Recording is larger than 10 MB. Please record a shorter response.'\n              : 'No audio was captured. Please try again.',\n          );\n          return;\n        }\n        const extension = recorder.mimeType.includes('mp4') ? 'm4a' : 'webm';\n        const file = new File([blob], `feedback-voice.${extension}`, {\n          type: recorder.mimeType,\n        });\n        const previewUrl = URL.createObjectURL(blob);\n        previewUrlRef.current = previewUrl;\n        const response = { file, previewUrl, seconds: elapsed };\n        setPreview(response);\n        onChange(response);\n      };\n      recorder.onerror = () => {\n        releaseStream();\n        setRecording(false);\n        setError('Recording stopped unexpectedly. Please try again.');\n      };\n      recorderRef.current = recorder;\n      startedAtRef.current = Date.now();\n      setSeconds(0);\n      setRecording(true);\n      recorder.start(1000);\n    } catch {\n      releaseStream();\n      setError(\n        'Microphone access is unavailable. You can still leave a written response.',\n      );\n    }\n  };\n\n  if (\n    typeof MediaRecorder === 'undefined' ||\n    !navigator.mediaDevices?.getUserMedia\n  ) {\n    return null;\n  }\n\n  return (\n    <div className=\"space-y-2 rounded-[4px] border border-[var(--border-default)] p-3\">\n      <div className=\"flex items-center justify-between gap-3\">\n        <div>\n          <p className=\"text-sm font-medium text-[var(--text-primary)]\">\n            Voice response\n          </p>\n          <p className=\"text-xs text-[var(--text-muted)]\" aria-live=\"polite\">\n            {recording ? `${formatTime(seconds)} of 2:00` : 'Up to 2 minutes'}\n          </p>\n        </div>\n        {recording ? (\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"sm\"\n            icon={<Square className=\"size-4\" />}\n            onClick={stopRecording}\n          >\n            Stop\n          </Button>\n        ) : preview ? (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            icon={<Trash2 className=\"size-4\" />}\n            disabled={disabled}\n            onClick={clearPreview}\n          >\n            Discard\n          </Button>\n        ) : (\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"sm\"\n            icon={<Mic className=\"size-4\" />}\n            disabled={disabled}\n            onClick={() => void start()}\n          >\n            Record\n          </Button>\n        )}\n      </div>\n      {preview ? (\n        <audio className=\"h-10 w-full\" controls src={preview.previewUrl}>\n          Your browser does not support audio playback.\n        </audio>\n      ) : null}\n      {error ? (\n        <p className=\"text-xs text-[var(--status-error)]\" role=\"alert\">\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\nfunction formatTime(seconds: number) {\n  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;\n}\n"],"mappings":"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","names":[]}

package/dist/feedback-widget.d.ts

@@ -0,0 +1,29 @@
+type FeedbackCategory = 'bug' | 'suggestion' | 'question';
+/** What a surface may hand the widget when it opens it. */
+export interface OpenFeedbackDetail {
+    category?: FeedbackCategory;
+    /** Pre-fills the box, so nothing the merchant already typed is retyped. */
+    description?: string;
+}
+/**
+ * Open the feedback sheet from anywhere. Prefer this over dispatching the
+ * event by hand: the detail shape is the contract, and hand-rolled
+ * `new Event('potter:open-feedback')` calls silently carry no detail at all.
+ */
+export declare function openFeedback(detail?: OpenFeedbackDetail): void;
+export declare function FeedbackWidget({ floating, }?: {
+    /**
+     * Whether to draw the corner button.
+     *
+     * A surface that owns its own bottom-right corner turns this off and calls
+     * `openFeedback()` from its own controls instead — the widget still mounts
+     * and still listens, so nothing is lost by hiding the button. The editor
+     * does this: it put a 39px brand-filled tool in the corner and this drew a
+     * 26px accent-filled one 8px away from it, so the two overlapped by 21px in
+     * both directions and read as one smudged blue blob. Two floating buttons in
+     * one corner is not a spacing problem to be nudged apart; it is two owners
+     * for one piece of screen.
+     */
+    floating?: boolean;
+}): import("react").JSX.Element | null;
+export {};

package/dist/feedback-widget.js

@@ -0,0 +1,215 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { MessageSquarePlus } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter
+} from "@withpotter/ui-kit/dialog";
+import { IOSSheet } from "@withpotter/components/mobile/ios-sheet";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import posthog from "posthog-js";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { apiFetch } from "@withpotter/lib/api/core";
+import { useIsMobile } from "@withpotter/hooks/use-mobile";
+import { useScreenTitle } from "@withpotter/lib/intents/use-screen-title";
+import { Button } from "@withpotter/ui-kit/button";
+import {
+  CaseComposer,
+  useCaseComposer
+} from "@withpotter/components/support/case-composer";
+import { FeedbackVote } from "@withpotter/components/feedback/feedback-vote";
+function openFeedback(detail) {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(
+    new CustomEvent("potter:open-feedback", {
+      detail
+    })
+  );
+}
+const DEFAULT_CATEGORY = "question";
+const placeholders = {
+  bug: "What happened? What did you expect?",
+  suggestion: "What would make Box better for you?",
+  question: "What do you need help with?"
+};
+function maskedRoute() {
+  if (typeof window === "undefined") return void 0;
+  return window.location.pathname.split("/").map(
+    (seg) => /^[0-9a-f]{8}-[0-9a-f]{4}/i.test(seg) || /^\d+$/.test(seg) ? "[id]" : seg
+  ).join("/").slice(0, 120);
+}
+function FeedbackWidget({
+  floating = true
+} = {}) {
+  const { user, tenant } = useAuth();
+  const { toast } = useToast();
+  const isMobile = useIsMobile();
+  const [open, setOpen] = useState(false);
+  const [category, setCategory] = useState(DEFAULT_CATEGORY);
+  const [description, setDescription] = useState("");
+  const [rating, setRating] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const composer = useCaseComposer();
+  const area = useScreenTitle();
+  useEffect(() => {
+    const handler = (event) => {
+      const detail = event.detail;
+      setCategory(detail?.category ?? DEFAULT_CATEGORY);
+      if (detail?.description) setDescription(detail.description);
+      setOpen(true);
+    };
+    window.addEventListener("potter:open-feedback", handler);
+    return () => window.removeEventListener("potter:open-feedback", handler);
+  }, []);
+  if (!user) return null;
+  const resetForm = () => {
+    setCategory(DEFAULT_CATEGORY);
+    setDescription("");
+    setRating(null);
+    composer.reset();
+  };
+  const handleClose = () => {
+    setOpen(false);
+    resetForm();
+  };
+  const handleSubmit = async () => {
+    const text = description.trim();
+    if (!composer.hasAttachment && text.length < 10) {
+      toast({
+        title: "Tell us what happened in at least 10 characters",
+        description: "Or record a voice note instead.",
+        variant: "destructive"
+      });
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const attachments = await composer.collect();
+      if (attachments === null) return;
+      const audio = attachments.find((a) => a.mimeType.startsWith("audio"));
+      const image = attachments.find((a) => a.mimeType.startsWith("image"));
+      await apiFetch("/feedback", {
+        method: "POST",
+        tenantSlug: tenant?.slug,
+        body: JSON.stringify({
+          category,
+          description: text || void 0,
+          rating: rating ?? void 0,
+          // The part of the product, and the route with its ids masked. The
+          // admin console groups by these; a raw URL groups by nothing.
+          area,
+          route: maskedRoute(),
+          audioUrl: audio?.url,
+          audioSeconds: composer.voice?.seconds,
+          pageUrl: window.location.href,
+          posthogSessionId: posthog.get_session_id?.() || void 0,
+          browserInfo: {
+            userAgent: navigator.userAgent,
+            language: navigator.language,
+            platform: navigator.platform,
+            screenWidth: window.screen.width,
+            screenHeight: window.screen.height,
+            viewportWidth: window.innerWidth,
+            viewportHeight: window.innerHeight
+          },
+          screenshotUrl: image?.url
+        })
+      });
+      toast({
+        title: composer.voice ? "Voice note sent" : "Thanks, that reached us",
+        description: "We read every one of these and reply by email."
+      });
+      resetForm();
+      setOpen(false);
+    } catch {
+      toast({ title: "That did not send", variant: "destructive" });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const ratingControl = (
+    // One child, so no `justify-between` pretending there are two.
+    /* @__PURE__ */ jsx("div", { className: "px-1", children: /* @__PURE__ */ jsx(
+      FeedbackVote,
+      {
+        promptKey: "app.rating.star",
+        kind: "star",
+        subject: { type: "app", id: "potter" },
+        label: "How are we doing?",
+        savedLabel: "Rating saved. Press Send to add your message.",
+        askWhy: false,
+        onScoreChange: setRating
+      }
+    ) })
+  );
+  const box = /* @__PURE__ */ jsx(
+    CaseComposer,
+    {
+      composer,
+      value: description,
+      onValueChange: setDescription,
+      placeholder: placeholders[category],
+      busy: submitting,
+      minRows: 4,
+      onSend: isMobile ? handleSubmit : void 0
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    floating && /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "icon",
+        className: "fixed bottom-[calc(84px+env(safe-area-inset-bottom))] right-4 z-[90] hover:scale-105 lg:bottom-6 lg:right-6 lg:bg-[var(--accent-primary)] lg:text-white lg:border-transparent lg:hover:bg-[var(--accent-hover)]",
+        onClick: () => setOpen(true),
+        "aria-label": "Send feedback",
+        children: /* @__PURE__ */ jsx(MessageSquarePlus, { className: "size-5" })
+      }
+    ),
+    isMobile ? /* @__PURE__ */ jsx(IOSSheet, { open, onClose: handleClose, title: "Help & feedback", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 px-4 pb-2", children: [
+      box,
+      ratingControl
+    ] }) }) : /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open,
+        onOpenChange: (v) => {
+          setOpen(v);
+          if (!v) resetForm();
+        },
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", "aria-describedby": void 0, children: [
+          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Help & feedback" }) }),
+          box,
+          ratingControl,
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                onClick: handleClose,
+                disabled: submitting,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: handleSubmit,
+                disabled: submitting || !description.trim() && !composer.hasAttachment,
+                children: submitting ? "Sending\u2026" : "Send"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  FeedbackWidget,
+  openFeedback
+};
+//# sourceMappingURL=feedback-widget.js.map

package/dist/feedback-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/feedback-widget.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { MessageSquarePlus } from 'lucide-react';\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogFooter,\n} from '@withpotter/ui-kit/dialog';\nimport { IOSSheet } from '@withpotter/components/mobile/ios-sheet';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport posthog from 'posthog-js';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { apiFetch } from '@withpotter/lib/api/core';\nimport { useIsMobile } from '@withpotter/hooks/use-mobile';\nimport { useScreenTitle } from '@withpotter/lib/intents/use-screen-title';\nimport { Button } from '@withpotter/ui-kit/button';\n// Concrete modules, not the `@withpotter/ui-kit` barrel. `feedback/feedback-vote`\n// imports `openFeedback` from this file, and `ui/report-page` imports that\n// package for the vote at the foot of every report — so the barrel closes a\n// cycle: ui/index -> report-page -> feedback -> feedback-widget -> ui/index.\n// Whichever module loses the race initialises as undefined, and the symptom is\n// a component rendering as nothing at runtime on whichever screen happens to\n// import first.\nimport {\n  CaseComposer,\n  useCaseComposer,\n} from '@withpotter/components/support/case-composer';\nimport { FeedbackVote } from '@withpotter/components/feedback/feedback-vote';\n\ntype FeedbackCategory = 'bug' | 'suggestion' | 'question';\n\n/** What a surface may hand the widget when it opens it. */\nexport interface OpenFeedbackDetail {\n  category?: FeedbackCategory;\n  /** Pre-fills the box, so nothing the merchant already typed is retyped. */\n  description?: string;\n}\n\n/**\n * Open the feedback sheet from anywhere. Prefer this over dispatching the\n * event by hand: the detail shape is the contract, and hand-rolled\n * `new Event('potter:open-feedback')` calls silently carry no detail at all.\n */\nexport function openFeedback(detail?: OpenFeedbackDetail) {\n  if (typeof window === 'undefined') return;\n  window.dispatchEvent(\n    new CustomEvent<OpenFeedbackDetail | undefined>('potter:open-feedback', {\n      detail,\n    }),\n  );\n}\n\n/**\n * NO CATEGORY PICKER. It is one message.\n *\n * Three bordered, icon-carrying pills sat above the box — Bug Report,\n * Suggestion, Question — and they asked the merchant to file the ticket before\n * writing it, at the moment something has just gone wrong. A person reads the\n * sentence to triage it either way, so the classification was ours to do and\n * we were charging for it in taps. The value still travels: whatever opened\n * this sheet says what it is (Help sends `question`, Box's \"Report a bug\"\n * sends `bug`), and nothing that opens it cold has to guess.\n */\nconst DEFAULT_CATEGORY: FeedbackCategory = 'question';\n\nconst placeholders: Record<FeedbackCategory, string> = {\n  bug: 'What happened? What did you expect?',\n  suggestion: 'What would make Box better for you?',\n  question: 'What do you need help with?',\n};\n\n/** `/dashboard/orders/8f2…` → `/dashboard/orders/[id]`, so four hundred\n *  complaints about the order screen group as one. */\nfunction maskedRoute(): string | undefined {\n  if (typeof window === 'undefined') return undefined;\n  return window.location.pathname\n    .split('/')\n    .map((seg) =>\n      /^[0-9a-f]{8}-[0-9a-f]{4}/i.test(seg) || /^\\d+$/.test(seg) ? '[id]' : seg,\n    )\n    .join('/')\n    .slice(0, 120);\n}\n\nexport function FeedbackWidget({\n  floating = true,\n}: {\n  /**\n   * Whether to draw the corner button.\n   *\n   * A surface that owns its own bottom-right corner turns this off and calls\n   * `openFeedback()` from its own controls instead — the widget still mounts\n   * and still listens, so nothing is lost by hiding the button. The editor\n   * does this: it put a 39px brand-filled tool in the corner and this drew a\n   * 26px accent-filled one 8px away from it, so the two overlapped by 21px in\n   * both directions and read as one smudged blue blob. Two floating buttons in\n   * one corner is not a spacing problem to be nudged apart; it is two owners\n   * for one piece of screen.\n   */\n  floating?: boolean;\n} = {}) {\n  const { user, tenant } = useAuth();\n  const { toast } = useToast();\n  const isMobile = useIsMobile();\n\n  const [open, setOpen] = useState(false);\n  const [category, setCategory] = useState<FeedbackCategory>(DEFAULT_CATEGORY);\n  const [description, setDescription] = useState('');\n  const [rating, setRating] = useState<number | null>(null);\n  const [submitting, setSubmitting] = useState(false);\n  /**\n   * The message box, the paperclip and the microphone, in the shape the\n   * prompt box uses — the same one \"Start a case\" writes into. This sheet used\n   * to stack a field, a bordered \"Record a voice note\" card and an \"Add\n   * screenshot\" pill: three objects for one message.\n   */\n  const composer = useCaseComposer();\n  /**\n   * WHERE THEY ARE, in the word their own navigation uses.\n   *\n   * John: *\"so if we are on products the feedback would be product related, if\n   * we are on orders, orders related\"*. This is the whole mechanism — the same\n   * resolver the page frames use, so the sheet cannot call a screen something\n   * the rail does not.\n   */\n  const area = useScreenTitle();\n\n  // Allow other surfaces (e.g. mobile \"Contact support\" row) to open the\n  // feedback sheet by dispatching a global event, instead of navigating to a\n  // dedicated screen that hasn't been built yet.\n  //\n  // The event carries what the caller already knows. Help dispatches\n  // `{ category: 'question', description: <what they typed> }`, so nothing the\n  // merchant already said is retyped. Callers that pass nothing land on the\n  // neutral category and are filed from the sentence.\n  useEffect(() => {\n    const handler = (event: Event) => {\n      const detail = (event as CustomEvent<OpenFeedbackDetail | undefined>)\n        .detail;\n      setCategory(detail?.category ?? DEFAULT_CATEGORY);\n      if (detail?.description) setDescription(detail.description);\n      setOpen(true);\n    };\n    window.addEventListener('potter:open-feedback', handler);\n    return () => window.removeEventListener('potter:open-feedback', handler);\n  }, []);\n\n  if (!user) return null;\n\n  const resetForm = () => {\n    setCategory(DEFAULT_CATEGORY);\n    setDescription('');\n    setRating(null);\n    composer.reset();\n  };\n\n  const handleClose = () => {\n    setOpen(false);\n    resetForm();\n  };\n\n  const handleSubmit = async () => {\n    const text = description.trim();\n    // A voice note or a screenshot IS the message, so text stops being\n    // required once one exists. Mirrors the rule the API enforces, so the two\n    // can't disagree.\n    if (!composer.hasAttachment && text.length < 10) {\n      toast({\n        title: 'Tell us what happened in at least 10 characters',\n        description: 'Or record a voice note instead.',\n        variant: 'destructive',\n      });\n      return;\n    }\n\n    setSubmitting(true);\n    try {\n      // Null means an upload failed and said so. Filing text-only would drop\n      // the thing the merchant chose to record, silently.\n      const attachments = await composer.collect();\n      if (attachments === null) return;\n      const audio = attachments.find((a) => a.mimeType.startsWith('audio'));\n      const image = attachments.find((a) => a.mimeType.startsWith('image'));\n\n      await apiFetch('/feedback', {\n        method: 'POST',\n        tenantSlug: tenant?.slug,\n        body: JSON.stringify({\n          category,\n          description: text || undefined,\n          rating: rating ?? undefined,\n          // The part of the product, and the route with its ids masked. The\n          // admin console groups by these; a raw URL groups by nothing.\n          area,\n          route: maskedRoute(),\n          audioUrl: audio?.url,\n          audioSeconds: composer.voice?.seconds,\n          pageUrl: window.location.href,\n          posthogSessionId: posthog.get_session_id?.() || undefined,\n          browserInfo: {\n            userAgent: navigator.userAgent,\n            language: navigator.language,\n            platform: navigator.platform,\n            screenWidth: window.screen.width,\n            screenHeight: window.screen.height,\n            viewportWidth: window.innerWidth,\n            viewportHeight: window.innerHeight,\n          },\n          screenshotUrl: image?.url,\n        }),\n      });\n\n      // The OliveBox host rewrites the widget's strings by exact match at\n      // build time (demo-box console/scripts/apply-copy-customizations.mjs).\n      // Change the anchors there before changing the wording here.\n      toast({\n        title: composer.voice ? 'Voice note sent' : 'Thanks, that reached us',\n        description: 'We read every one of these and reply by email.',\n      });\n      resetForm();\n      setOpen(false);\n    } catch {\n      toast({ title: 'That did not send', variant: 'destructive' });\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  /**\n   * NO \"ASK POTTER\" ROW HERE ANY MORE, and its removal is the point of the\n   * merge rather than a tidy-up.\n   *\n   * This sheet used to lead with one: a card at the top routing to\n   * /dashboard/agency, above a divider reading \"Or send feedback to our team\".\n   * That made a bug-report form the dashboard's second door to the assistant,\n   * in the opposite corner from the first, and it is most of why neither was\n   * findable — you reached Box by pressing something labelled feedback.\n   *\n   * The relationship is inverted now. Box owns the corner and offers\n   * \"Report a bug\" and \"Message the team\" inside its intro, both of which call\n   * `openFeedback()` and land here with the category already chosen. So this\n   * screen is one thing again: reaching a person. It does not need to advertise\n   * the machine that sent you.\n   */\n\n  /**\n   * `onSend` on the phone only, and it is the same rule the composer states:\n   * the arrow appears where the surface does not otherwise commit. The sheet\n   * has no footer, so the arrow in the box is the send — the shape every\n   * messaging app on that phone already uses. The desktop dialog is committed\n   * from its footer, and a second live send control two hundred pixels away\n   * would leave nothing to say which one Cancel belongs to.\n   */\n  /**\n   * The stars sit UNDER the message, and they are a vote rather than a prompt.\n   *\n   * John: *\"add the ratings here too\"*. It records the moment a star is\n   * pressed and takes no live slot, so it neither waits for Send nor competes\n   * with the docked questions — somebody who opens this sheet to report a bug\n   * can rate us on the way past without their rating depending on whether they\n   * finish the message. Two stars or fewer is already a complaint being typed\n   * above it, so there is no second sheet to open: this one is open.\n   */\n  const ratingControl = (\n    // One child, so no `justify-between` pretending there are two.\n    <div className=\"px-1\">\n      <FeedbackVote\n        promptKey=\"app.rating.star\"\n        kind=\"star\"\n        // The product is the subject, and a constant id is what keeps the\n        // question open. A vote with no subject is treated as a one-per-account\n        // prompt and closes after the first answer — right for \"was this help\n        // article any good\", wrong for a standing rating a merchant's opinion\n        // of us is allowed to change.\n        subject={{ type: 'app', id: 'potter' }}\n        label=\"How are we doing?\"\n        // NOT \"thanks\", because the message above has not gone anywhere. The\n        // stars record on the press and the message waits for Send, and the\n        // only thing standing between those two facts and a merchant who\n        // thinks they have sent their bug report is this sentence.\n        savedLabel=\"Rating saved. Press Send to add your message.\"\n        // The box above IS the \"anything to add\" step. See `askWhy`.\n        askWhy={false}\n        onScoreChange={setRating}\n      />\n    </div>\n  );\n\n  const box = (\n    <CaseComposer\n      composer={composer}\n      value={description}\n      onValueChange={setDescription}\n      placeholder={placeholders[category]}\n      busy={submitting}\n      minRows={4}\n      onSend={isMobile ? handleSubmit : undefined}\n    />\n  );\n\n  return (\n    <>\n      {floating && (\n        <Button\n          size=\"icon\"\n          className=\"fixed bottom-[calc(84px+env(safe-area-inset-bottom))] right-4 z-[90] hover:scale-105 lg:bottom-6 lg:right-6 lg:bg-[var(--accent-primary)] lg:text-white lg:border-transparent lg:hover:bg-[var(--accent-hover)]\"\n          onClick={() => setOpen(true)}\n          aria-label=\"Send feedback\"\n        >\n          <MessageSquarePlus className=\"size-5\" />\n        </Button>\n      )}\n\n      {isMobile ? (\n        <IOSSheet open={open} onClose={handleClose} title=\"Help & feedback\">\n          <div className=\"space-y-3 px-4 pb-2\">\n            {box}\n            {ratingControl}\n          </div>\n        </IOSSheet>\n      ) : (\n        <Dialog\n          // Stays open while recording: the stop button is inside the composer,\n          // so a panel that hid itself mid-recording left the clip running with\n          // no way to end it.\n          open={open}\n          onOpenChange={(v) => {\n            setOpen(v);\n            if (!v) resetForm();\n          }}\n        >\n          {/* `aria-describedby={undefined}` because the sheet has no\n              description any more. The title said \"Help & feedback\" and the\n              line under it said \"Tell us what happened\", which the box's own\n              placeholder already asks. Radix warns unless the absence is\n              stated. */}\n          <DialogContent className=\"sm:max-w-md\" aria-describedby={undefined}>\n            <DialogHeader>\n              <DialogTitle>Help &amp; feedback</DialogTitle>\n            </DialogHeader>\n\n            {box}\n            {ratingControl}\n\n            <DialogFooter>\n              <Button\n                variant=\"secondary\"\n                onClick={handleClose}\n                disabled={submitting}\n              >\n                Cancel\n              </Button>\n              <Button\n                onClick={handleSubmit}\n                disabled={\n                  submitting || (!description.trim() && !composer.hasAttachment)\n                }\n              >\n                {submitting ? 'Sending…' : 'Send'}\n              </Button>\n            </DialogFooter>\n          </DialogContent>\n        </Dialog>\n      )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/feedback.d.ts

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

package/dist/feedback.js

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

package/dist/help/area-art.d.ts

@@ -0,0 +1,33 @@
+import type { HelpGroup } from '@withpotter/lib/help-topics';
+/**
+ * The seven objects help is navigated by, each on its own colour field.
+ *
+ * Why these are drawn rather than pulled from `empty-art`: that registry
+ * resolves `Money` to a Visa logo and `Selling` to a Shopify shopping bag.
+ * Those are third-party comps committed as honest placeholders for empty
+ * states, and they were fine at 28px beside a heading. Promoted to the face of
+ * a page they stop being placeholders and start being other companies' brand
+ * marks presented as Box's, which is a different kind of wrong from "art we
+ * have not commissioned yet".
+ *
+ * The field is opaque, and that is load-bearing rather than decorative: the art
+ * never touches the page canvas, so one drawing is legible in light and dark
+ * without a single theme branch. It is also where Box's colour lives. The
+ * page around these stays monochrome on purpose, so the surface is imagery-rich
+ * without the chrome turning into a rainbow.
+ *
+ * Fields are ordered to sit apart in the grid rather than by hue family, so no
+ * two neighbours read as a pair. `area-palette` covers how the objects
+ * themselves are built.
+ */
+export declare const AREA_FIELD: Record<HelpGroup, string>;
+/**
+ * One area's object on its field.
+ *
+ * Everything inside scales with the viewBox, so this is the 244px gallery tile
+ * and the 26px strip mark without a second set of numbers anywhere.
+ */
+export declare function AreaArt({ group, className, }: {
+    group: HelpGroup;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/help/area-art.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { ART_FIELD } from "@withpotter/ui-kit/empty-art/registry";
+import { AREA_OBJECTS } from "./area-objects";
+const AREA_FIELD = {
+  Money: ART_FIELD.money,
+  Selling: ART_FIELD.selling,
+  Bookings: ART_FIELD.bookings,
+  Invoicing: ART_FIELD.invoicing,
+  "Your site": ART_FIELD.site,
+  "Your team": ART_FIELD.team,
+  "Your account": ART_FIELD.account
+};
+function AreaArt({
+  group,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 120 120",
+      "aria-hidden": "true",
+      className,
+      style: { backgroundColor: AREA_FIELD[group] },
+      children: AREA_OBJECTS[group]
+    }
+  );
+}
+export {
+  AREA_FIELD,
+  AreaArt
+};
+//# sourceMappingURL=area-art.js.map

package/dist/help/area-art.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/help/area-art.tsx"],"sourcesContent":["import type { HelpGroup } from '@withpotter/lib/help-topics';\nimport { ART_FIELD } from '@withpotter/ui-kit/empty-art/registry';\nimport { AREA_OBJECTS } from './area-objects';\n\n/**\n * The seven objects help is navigated by, each on its own colour field.\n *\n * Why these are drawn rather than pulled from `empty-art`: that registry\n * resolves `Money` to a Visa logo and `Selling` to a Shopify shopping bag.\n * Those are third-party comps committed as honest placeholders for empty\n * states, and they were fine at 28px beside a heading. Promoted to the face of\n * a page they stop being placeholders and start being other companies' brand\n * marks presented as Box's, which is a different kind of wrong from \"art we\n * have not commissioned yet\".\n *\n * The field is opaque, and that is load-bearing rather than decorative: the art\n * never touches the page canvas, so one drawing is legible in light and dark\n * without a single theme branch. It is also where Box's colour lives. The\n * page around these stays monochrome on purpose, so the surface is imagery-rich\n * without the chrome turning into a rainbow.\n *\n * Fields are ordered to sit apart in the grid rather than by hue family, so no\n * two neighbours read as a pair. `area-palette` covers how the objects\n * themselves are built.\n */\n\nexport const AREA_FIELD: Record<HelpGroup, string> = {\n  Money: ART_FIELD.money,\n  Selling: ART_FIELD.selling,\n  Bookings: ART_FIELD.bookings,\n  Invoicing: ART_FIELD.invoicing,\n  'Your site': ART_FIELD.site,\n  'Your team': ART_FIELD.team,\n  'Your account': ART_FIELD.account,\n};\n\n/**\n * One area's object on its field.\n *\n * Everything inside scales with the viewBox, so this is the 244px gallery tile\n * and the 26px strip mark without a second set of numbers anywhere.\n */\nexport function AreaArt({\n  group,\n  className,\n}: {\n  group: HelpGroup;\n  className?: string;\n}) {\n  return (\n    <svg\n      viewBox=\"0 0 120 120\"\n      aria-hidden=\"true\"\n      className={className}\n      style={{ backgroundColor: AREA_FIELD[group] }}\n    >\n      {AREA_OBJECTS[group]}\n    </svg>\n  );\n}\n"],"mappings":"AAkDI;AAjDJ,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAwBtB,MAAM,aAAwC;AAAA,EACnD,OAAO,UAAU;AAAA,EACjB,SAAS,UAAU;AAAA,EACnB,UAAU,UAAU;AAAA,EACpB,WAAW,UAAU;AAAA,EACrB,aAAa,UAAU;AAAA,EACvB,aAAa,UAAU;AAAA,EACvB,gBAAgB,UAAU;AAC5B;AAQO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AACF,GAGG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,eAAY;AAAA,MACZ;AAAA,MACA,OAAO,EAAE,iBAAiB,WAAW,KAAK,EAAE;AAAA,MAE3C,uBAAa,KAAK;AAAA;AAAA,EACrB;AAEJ;","names":[]}

package/dist/help/area-objects.d.ts

@@ -0,0 +1,31 @@
+import type { HelpGroup } from '@withpotter/lib/help-topics';
+/**
+ * The seven objects, drawn in the language `area-palette` describes.
+ *
+ * Each is a 120×120 box and each is built the same way, in this order: the
+ * shaded faces, then the lit face, then the accent that says what it is.
+ * Keeping the order fixed is why they look like a set drawn by one hand rather
+ * than seven icons that happen to share a stroke width.
+ *
+ * No object draws its own ground shadow. See `AREA_GROUND_RX`.
+ *
+ * They are objects, not scenes. Cash App's set puts a joke in every frame (a
+ * banana peeling open to cash, a calculator in a cowboy hat) and that is a
+ * bigger art direction call than a navigation tile needs to make. What is
+ * borrowed is the construction: solids with a side face, floating above a
+ * ground shadow, in a four-value palette.
+ */
+/**
+ * How wide each object's ground shadow is.
+ *
+ * The shadow is NOT drawn in here with the object, and that is the whole point:
+ * hovering lifts the object and the ground has to stay put, which it cannot do
+ * if it is a sibling inside the same transformed group. `HelpAreaTile` renders
+ * it as its own static layer underneath.
+ *
+ * The radius is per object because a shadow is cast by a footprint. A key
+ * standing on its bow throws a narrower one than a fanned stack of notes, and
+ * one shared value made the small objects look like they were floating.
+ */
+export declare const AREA_GROUND_RX: Record<HelpGroup, number>;
+export declare const AREA_OBJECTS: Record<HelpGroup, React.ReactNode>;