@withpotter/components 0.13.0-next.101

package/dist/potter/potter-chrome.d.ts

@@ -0,0 +1,63 @@
+/**
+ * The two small pieces every Box surface needs and none of them should own.
+ *
+ * ── PROMOTE ──
+ *
+ * THE PANEL AND THE SCREEN ARE ONE CONVERSATION, and this is the seam between
+ * them. John: *"we can have best of both words"*, then *"we can innnovate
+ * around them"* — on the choice between Linear's full screen and Shopify's
+ * docked panel.
+ *
+ * They are not a choice, because they answer different questions:
+ *
+ *   A PANEL is right for a question ABOUT THE PAGE YOU ARE ON. Its whole value
+ *   is that the orders table you were reading is still there behind it. Take
+ *   that away and the answer arrives with nothing to apply it to. Shopify
+ *   understood this so well that Sidekick does not even overlay the admin — it
+ *   INSETS it, so the table stays fully readable beside the panel.
+ *
+ *   A SCREEN is right for a CONVERSATION. Four turns deep, with a chart and a
+ *   list of customers in it, a 420px box is a straw. Linear gives the thread
+ *   the page and it is obviously correct — and just as obviously wrong for
+ *   "what does this column mean".
+ *
+ * So the surface is not the decision. WHICH ONE YOU ARE IN is the decision, and
+ * it changes halfway through: you ask a quick thing about this page, the answer
+ * opens something up, and now you are having a conversation in a straw.
+ *
+ * This is the move neither of them makes. Sidekick's expand widens the panel
+ * in place — no route, no history entry, nothing to link to or come back to.
+ * Square has no full view at all. Ours promotes the thread to a REAL SCREEN at
+ * a real URL, and loses nothing doing it, because the conversation never lived
+ * in either surface: `PotterProvider` sits above both, so the panel and the
+ * screen have been reading the same `messages` array the whole time. The panel
+ * closes, the screen opens, the thread is simply still there.
+ *
+ * There is no demotion control and there should not be. Going back to the panel
+ * means going back to a page — which is what the sidebar is for, and the
+ * conversation will still be in it.
+ */
+export declare function PotterOpenFull({ 
+/** Closes whatever panel this is in, once the route has changed. */
+onDone, }: {
+    onDone?: () => void;
+}): import("react").JSX.Element;
+/**
+ * ── THE LINE THAT ADMITS IT ──
+ *
+ * Square runs *"AI can make mistakes. Please check responses."* under its
+ * composer, permanently. Neither Linear nor Shopify says anything. Square is
+ * right and the other two are getting away with it.
+ *
+ * We are in the weakest position of the three to stay quiet. Sidekick and
+ * Square have models behind them; `potter-answer.ts` is a regex over a help
+ * corpus with four branches, and when it misses, the merchant does not get a
+ * hedge — they get a confident sentence about their own money. The line costs
+ * one row and buys the right to be wrong, which is the only version of this
+ * that is honest before the answering route exists.
+ *
+ * It is NOT hedging inside the answers themselves. A reply that qualifies every
+ * number is unreadable and teaches people to ignore the qualifier; one standing
+ * line under the composer is read once, believed, and stays out of the way.
+ */
+export declare function PotterFallible(): import("react").JSX.Element;

package/dist/potter/potter-chrome.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRouter } from "next/navigation";
+import { motion } from "motion/react";
+import { Maximize2 } from "lucide-react";
+import { PRESS_SCALE_LARGE, springs } from "@withpotter/lib/motion";
+function PotterOpenFull({
+  /** Closes whatever panel this is in, once the route has changed. */
+  onDone
+}) {
+  const router = useRouter();
+  return /* @__PURE__ */ jsx(
+    motion.button,
+    {
+      type: "button",
+      "aria-label": "Open in full",
+      title: "Open in full",
+      whileTap: { scale: PRESS_SCALE_LARGE },
+      transition: springs.snappy,
+      onClick: () => {
+        router.push("/dashboard/ask");
+        onDone?.();
+      },
+      className: "grid size-6 shrink-0 place-items-center rounded-[var(--radius-card)] text-[var(--text-tertiary)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]",
+      children: /* @__PURE__ */ jsx(Maximize2, { className: "size-[13px]" })
+    }
+  );
+}
+function PotterFallible() {
+  return /* @__PURE__ */ jsx("p", { className: "pt-2 text-center text-2xs text-[var(--text-muted)]", children: "Box can get things wrong. Check anything that matters." });
+}
+export {
+  PotterFallible,
+  PotterOpenFull
+};
+//# sourceMappingURL=potter-chrome.js.map

package/dist/potter/potter-chrome.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-chrome.tsx"],"sourcesContent":["'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { motion } from 'motion/react';\nimport { Maximize2 } from 'lucide-react';\nimport { PRESS_SCALE_LARGE, springs } from '@withpotter/lib/motion';\n\n/**\n * The two small pieces every Box surface needs and none of them should own.\n *\n * ── PROMOTE ──\n *\n * THE PANEL AND THE SCREEN ARE ONE CONVERSATION, and this is the seam between\n * them. John: *\"we can have best of both words\"*, then *\"we can innnovate\n * around them\"* — on the choice between Linear's full screen and Shopify's\n * docked panel.\n *\n * They are not a choice, because they answer different questions:\n *\n *   A PANEL is right for a question ABOUT THE PAGE YOU ARE ON. Its whole value\n *   is that the orders table you were reading is still there behind it. Take\n *   that away and the answer arrives with nothing to apply it to. Shopify\n *   understood this so well that Sidekick does not even overlay the admin — it\n *   INSETS it, so the table stays fully readable beside the panel.\n *\n *   A SCREEN is right for a CONVERSATION. Four turns deep, with a chart and a\n *   list of customers in it, a 420px box is a straw. Linear gives the thread\n *   the page and it is obviously correct — and just as obviously wrong for\n *   \"what does this column mean\".\n *\n * So the surface is not the decision. WHICH ONE YOU ARE IN is the decision, and\n * it changes halfway through: you ask a quick thing about this page, the answer\n * opens something up, and now you are having a conversation in a straw.\n *\n * This is the move neither of them makes. Sidekick's expand widens the panel\n * in place — no route, no history entry, nothing to link to or come back to.\n * Square has no full view at all. Ours promotes the thread to a REAL SCREEN at\n * a real URL, and loses nothing doing it, because the conversation never lived\n * in either surface: `PotterProvider` sits above both, so the panel and the\n * screen have been reading the same `messages` array the whole time. The panel\n * closes, the screen opens, the thread is simply still there.\n *\n * There is no demotion control and there should not be. Going back to the panel\n * means going back to a page — which is what the sidebar is for, and the\n * conversation will still be in it.\n */\nexport function PotterOpenFull({\n  /** Closes whatever panel this is in, once the route has changed. */\n  onDone,\n}: {\n  onDone?: () => void;\n}) {\n  const router = useRouter();\n\n  return (\n    <motion.button\n      type=\"button\"\n      aria-label=\"Open in full\"\n      title=\"Open in full\"\n      whileTap={{ scale: PRESS_SCALE_LARGE }}\n      transition={springs.snappy}\n      onClick={() => {\n        router.push('/dashboard/ask');\n        onDone?.();\n      }}\n      className=\"grid size-6 shrink-0 place-items-center rounded-[var(--radius-card)] text-[var(--text-tertiary)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]\"\n    >\n      <Maximize2 className=\"size-[13px]\" />\n    </motion.button>\n  );\n}\n\n/**\n * ── THE LINE THAT ADMITS IT ──\n *\n * Square runs *\"AI can make mistakes. Please check responses.\"* under its\n * composer, permanently. Neither Linear nor Shopify says anything. Square is\n * right and the other two are getting away with it.\n *\n * We are in the weakest position of the three to stay quiet. Sidekick and\n * Square have models behind them; `potter-answer.ts` is a regex over a help\n * corpus with four branches, and when it misses, the merchant does not get a\n * hedge — they get a confident sentence about their own money. The line costs\n * one row and buys the right to be wrong, which is the only version of this\n * that is honest before the answering route exists.\n *\n * It is NOT hedging inside the answers themselves. A reply that qualifies every\n * number is unreadable and teaches people to ignore the qualifier; one standing\n * line under the composer is read once, believed, and stays out of the way.\n */\nexport function PotterFallible() {\n  return (\n    <p className=\"pt-2 text-center text-2xs text-[var(--text-muted)]\">\n      Box can get things wrong. Check anything that matters.\n    </p>\n  );\n}\n"],"mappings":";AAmEM;AAjEN,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB,eAAe;AAyCpC,SAAS,eAAe;AAAA;AAAA,EAE7B;AACF,GAEG;AACD,QAAM,SAAS,UAAU;AAEzB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAM;AAAA,MACN,UAAU,EAAE,OAAO,kBAAkB;AAAA,MACrC,YAAY,QAAQ;AAAA,MACpB,SAAS,MAAM;AACb,eAAO,KAAK,gBAAgB;AAC5B,iBAAS;AAAA,MACX;AAAA,MACA,WAAU;AAAA,MAEV,8BAAC,aAAU,WAAU,eAAc;AAAA;AAAA,EACrC;AAEJ;AAoBO,SAAS,iBAAiB;AAC/B,SACE,oBAAC,OAAE,WAAU,sDAAqD,oEAElE;AAEJ;","names":[]}

package/dist/potter/potter-composer.d.ts

@@ -0,0 +1,117 @@
+import { type PotterAttachment } from './potter-attach';
+/**
+ * The composer at the foot of the ask screen — Linear's, and THIS is where its
+ * height belongs.
+ *
+ * The port put a three-line box on the home first and John stopped it: *"you
+ * changed the height of the prompt box thats not what i wanted"*. He was right,
+ * and the reason is that the two boxes do different jobs. The home's bar sits
+ * across the top of a board of widgets, where 128px is height taken from the
+ * thing the page exists to show. This one sits at the bottom of a conversation
+ * that has nothing else competing for the room, and the height IS the offer:
+ * three lines say "write a sentence", a 44px slot says "type a noun".
+ *
+ * MEASURED, not guessed. Linear's is 104px on an empty chat and 128px in a
+ * thread, on a minimum of three editor lines, growing to `min(12 lines, 60vh)`;
+ * 12px of padding; the controls on their own row along the bottom INSIDE the
+ * box, capabilities at the left and attach + submit at the right; and the
+ * placeholder changes from "Ask Linear…" to "Reply…" the moment a thread
+ * exists. Ours says "Reply…" for the same reason — the screen only exists once
+ * there is something to reply to.
+ *
+ * THE SURFACE IS `composer-well`, shared with the home's bar, which is the
+ * whole point of it being a utility: the fill, the 1px spread and the 0.5px
+ * gradient edge that DIMS on focus are one recipe in `globals.css`, so the two
+ * composers cannot drift into two different objects. See that file for why the
+ * focus token is the dimmer of the pair.
+ *
+ * IT GLOWS, the same way the home's bar does. John: *"the glowy effect on the
+ * prompt box why didnt you it inside the chat area too liek the composer i
+ * think it woudol be a good add on"*. Right, and it costs nothing to be right —
+ * `AskGlow` is six stacked rings that compute to `opacity: 0` until the group
+ * around them is hovered or holds focus, and the rings only spin while they are
+ * visible. It is the same component the home's bar and the sidebar's slot use,
+ * so all three doors into Box are lit by one lamp.
+ *
+ * THE GROUP AND THE OPAQUE FILL ARE BOTH LOAD-BEARING. The rings sit at
+ * `-z-10`, so they need something solid over their middle or the tight ring and
+ * its falloff turn into one pastel blob — `composer-well` fills with
+ * `--well-bg`, which is a flat colour rather than a mix with transparent, so
+ * that is already handled. The `group relative isolate` wrapper is what the
+ * rings read for hover and focus, and what stops their blur bleeding into the
+ * thread above.
+ *
+ * THE MIC IS HERE, AND THE ARGUMENT AGAINST IT WAS BACKWARDS. This note used to
+ * say voice could not come to the screen because it "owns the whole surface it
+ * runs on" and there was "nowhere to draw" the waveform. John: *"why didnt you
+ * carry the recording feature"* — and he is right, because the premise inverts.
+ * The home's bar is 44px in a row of widgets; this is a 130px box in a column
+ * with nothing else in it. If either surface is too small for a waveform it is
+ * the one that already has it.
+ *
+ * So voice runs here on the same hook and it is the same loop: you speak, the
+ * silence when you stop is what sends it, Box reads the answer back, and the
+ * microphone opens again for the next turn. Words stream into the field as they
+ * are recognised, so the field IS the transcript and there is no second surface
+ * to come back from.
+ *
+ * HIDDEN OUTRIGHT WHERE THE BROWSER CANNOT LISTEN rather than shown greyed out.
+ * Both ends run on the browser's own engines — potter-api has no transcription
+ * route and no TTS route, and voice mode needs neither — so a browser without a
+ * recogniser has no degraded mode to offer, only an absence to be honest about.
+ */
+export declare function PotterComposer({ onSubmit, 
+/**
+ * A spreadsheet the merchant chose. Optional: the launcher's small panel has
+ * nowhere to render what comes back, so it does not offer the control rather
+ * than offering one that answers into a box too small for the answer.
+ */
+onAttach, 
+/** What is sitting in the composer, once it has been read. */
+attachments, onRemoveAttachment, 
+/** Box is still answering. The composer QUEUES rather than disabling. */
+busy, 
+/**
+ * Ends the turn in flight.
+ *
+ * Absent where nothing can be stopped — the launcher's panel does not stream,
+ * and a Stop that cannot stop is the dead control this surface keeps
+ * refusing to draw.
+ */
+onStop, 
+/** Sent turns, oldest first. ArrowUp walks back through them. */
+history, 
+/**
+ * CONTROLLED, because a queued message has to be editable back into the box.
+ *
+ * The draft was local state until the queue existed, which was right while
+ * nothing outside could put words in it. Editing a waiting message means the
+ * screen owns the text — the same shape John's reference uses
+ * (`value` / `onValueChange`), and the same reason.
+ */
+value, onValueChange, 
+/**
+ * How many lines tall the box starts.
+ *
+ * Three where it is the floor of a conversation and two where it is the only
+ * object on an empty screen — John: *"reduce the width and hieght of the chat
+ * box a bit"*. It grows to its content either way; this is only the floor.
+ */
+minRows, 
+/**
+ * What the empty box says. `Reply…` is right under a transcript and wrong on
+ * a screen with nothing above it, where there is nothing yet to reply to.
+ */
+placeholder, }: {
+    onSubmit: (question: string) => void;
+    onAttach?: (file: File) => void;
+    attachments?: PotterAttachment[];
+    onRemoveAttachment?: (file: File) => void;
+    busy?: boolean;
+    onStop?: () => void;
+    history?: string[];
+    value: string;
+    onValueChange: (next: string) => void;
+    minRows?: 2 | 3;
+    placeholder?: string;
+}): import("react").JSX.Element;

package/dist/potter/potter-composer.js

@@ -0,0 +1,252 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { ArrowUp, Mic, Paperclip, Square } from "lucide-react";
+import { AutoGrowTextarea, FileInput } from "@withpotter/ui-kit";
+import { AskGlow } from "@withpotter/components/dashboard/home/ask-glow";
+import { AskVoice } from "@withpotter/components/dashboard/home/ask-voice";
+import { PotterAttachmentChip } from "./potter-attachment-chip";
+import { PotterImageGrid } from "./potter-image-grid";
+import {
+  ATTACH_ACCEPT,
+  MAX_ATTACHMENTS
+} from "./potter-attach";
+import { useVoiceMode } from "@withpotter/hooks/use-voice-mode";
+import { PRESS_SCALE_LARGE, springs } from "@withpotter/lib/motion";
+import { cn } from "@withpotter/lib/utils";
+function PotterComposer({
+  onSubmit,
+  /**
+   * A spreadsheet the merchant chose. Optional: the launcher's small panel has
+   * nowhere to render what comes back, so it does not offer the control rather
+   * than offering one that answers into a box too small for the answer.
+   */
+  onAttach,
+  /** What is sitting in the composer, once it has been read. */
+  attachments = [],
+  onRemoveAttachment,
+  /** Box is still answering. The composer QUEUES rather than disabling. */
+  busy = false,
+  /**
+   * Ends the turn in flight.
+   *
+   * Absent where nothing can be stopped — the launcher's panel does not stream,
+   * and a Stop that cannot stop is the dead control this surface keeps
+   * refusing to draw.
+   */
+  onStop,
+  /** Sent turns, oldest first. ArrowUp walks back through them. */
+  history = [],
+  /**
+   * CONTROLLED, because a queued message has to be editable back into the box.
+   *
+   * The draft was local state until the queue existed, which was right while
+   * nothing outside could put words in it. Editing a waiting message means the
+   * screen owns the text — the same shape John's reference uses
+   * (`value` / `onValueChange`), and the same reason.
+   */
+  value,
+  onValueChange,
+  /**
+   * How many lines tall the box starts.
+   *
+   * Three where it is the floor of a conversation and two where it is the only
+   * object on an empty screen — John: *"reduce the width and hieght of the chat
+   * box a bit"*. It grows to its content either way; this is only the floor.
+   */
+  minRows = 3,
+  /**
+   * What the empty box says. `Reply…` is right under a transcript and wrong on
+   * a screen with nothing above it, where there is nothing yet to reply to.
+   */
+  placeholder
+}) {
+  const ref = useRef(null);
+  const reduce = useReducedMotion();
+  const [recall, setRecall] = useState(null);
+  const draft = useRef("");
+  const voice = useVoiceMode({ onTranscript: (text) => onValueChange(text) });
+  const picker = useRef(null);
+  const send = () => {
+    const q = value.trim();
+    if (!q && !attachments.length) return;
+    if (voice.active) voice.stop();
+    onSubmit(q);
+    onValueChange("");
+    setRecall(null);
+    draft.current = "";
+    ref.current?.focus();
+  };
+  const images = attachments.filter(
+    (a) => a.kind === "image"
+  );
+  const full = attachments.length >= MAX_ATTACHMENTS;
+  return /* @__PURE__ */ jsxs("div", { className: "group relative isolate", children: [
+    /* @__PURE__ */ jsx(AskGlow, {}),
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        layout: !reduce,
+        transition: reduce ? { duration: 0 } : springs.snappy,
+        className: "composer-well flex w-full flex-col gap-2 p-3",
+        children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: attachments.filter((a) => a.kind === "sheet").map((a) => /* @__PURE__ */ jsx(
+            PotterAttachmentChip,
+            {
+              attachment: a,
+              onRemove: () => onRemoveAttachment?.(a.file)
+            },
+            a.file.name
+          )) }),
+          images.length > 0 && /* @__PURE__ */ jsx(
+            PotterImageGrid,
+            {
+              images,
+              onRemove: (file) => onRemoveAttachment?.(file)
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "max-h-[min(calc(var(--text-md)*1.5*12),60vh)] overflow-y-auto", children: [
+            /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: voice.active && /* @__PURE__ */ jsx(
+              AskVoice,
+              {
+                state: voice.state,
+                transcript: value,
+                spoken: voice.spoken,
+                spokenChars: voice.spokenChars,
+                endpointAt: voice.endpointAt,
+                peaksRef: voice.peaksRef,
+                canSpeak: voice.canSpeak
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              AutoGrowTextarea,
+              {
+                ref,
+                value,
+                onChange: (e) => onValueChange(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    send();
+                    return;
+                  }
+                  const atStart = e.currentTarget.selectionStart === 0 && e.currentTarget.selectionEnd === 0;
+                  if (e.key === "ArrowUp" && atStart && history.length) {
+                    e.preventDefault();
+                    if (recall === null) draft.current = value;
+                    const next = recall === null ? 0 : Math.min(recall + 1, history.length - 1);
+                    setRecall(next);
+                    onValueChange(history[history.length - 1 - next]);
+                    return;
+                  }
+                  if (e.key === "ArrowDown" && recall !== null) {
+                    e.preventDefault();
+                    if (recall === 0) {
+                      setRecall(null);
+                      onValueChange(draft.current);
+                    } else {
+                      const next = recall - 1;
+                      setRecall(next);
+                      onValueChange(history[history.length - 1 - next]);
+                    }
+                  }
+                },
+                placeholder: busy ? "Ask something else \u2014 it will wait\u2026" : placeholder ?? "Reply\u2026",
+                "aria-label": "Reply to Box",
+                className: cn(
+                  minRows === 2 ? "min-h-[calc(var(--text-md)*1.5*2)]" : "min-h-[calc(var(--text-md)*1.5*3)]",
+                  "w-full bg-transparent text-md leading-[1.5] text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)]"
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1", children: [
+            onAttach && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                FileInput,
+                {
+                  ref: picker,
+                  accept: ATTACH_ACCEPT,
+                  multiple: true,
+                  tabIndex: -1,
+                  "aria-label": "Attach a file",
+                  onFiles: (files) => files.forEach(onAttach)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.button,
+                {
+                  type: "button",
+                  onClick: () => picker.current?.click(),
+                  disabled: full,
+                  "aria-label": "Attach a file",
+                  title: full ? `That is ${MAX_ATTACHMENTS} \u2014 send these first` : "Attach pictures or a product list (.csv)",
+                  whileTap: full ? void 0 : { scale: PRESS_SCALE_LARGE },
+                  transition: springs.snappy,
+                  className: "grid size-7 shrink-0 place-items-center rounded-full bg-[var(--bg-muted)] text-[var(--text-tertiary)] transition-[background-color,color] duration-[var(--motion-fast)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-[var(--bg-muted)] disabled:hover:text-[var(--text-tertiary)]",
+                  children: /* @__PURE__ */ jsx(Paperclip, { className: "size-4" })
+                }
+              )
+            ] }),
+            voice.supported && /* @__PURE__ */ jsx(
+              motion.button,
+              {
+                type: "button",
+                onClick: () => {
+                  if (voice.active) voice.stop();
+                  else {
+                    ref.current?.focus();
+                    void voice.start();
+                  }
+                },
+                "aria-label": voice.active ? "Stop voice mode" : "Talk to Box",
+                "aria-pressed": voice.active,
+                whileTap: { scale: PRESS_SCALE_LARGE },
+                transition: springs.snappy,
+                className: `grid size-7 shrink-0 place-items-center rounded-full transition-[background-color,color] duration-[var(--motion-fast)] ${voice.active ? "bg-[var(--error)] text-white" : "bg-[var(--bg-muted)] text-[var(--text-tertiary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]"}`,
+                children: voice.active ? /* @__PURE__ */ jsx(Square, { className: "size-[9px] fill-current" }) : /* @__PURE__ */ jsx(Mic, { className: "size-4" })
+              }
+            ),
+            busy && onStop && !value.trim() && !attachments.length ? /* @__PURE__ */ jsx(
+              motion.button,
+              {
+                type: "button",
+                onClick: onStop,
+                "aria-label": "Stop",
+                whileTap: { scale: PRESS_SCALE_LARGE },
+                transition: springs.snappy,
+                className: "grid size-7 shrink-0 place-items-center rounded-full bg-[var(--bg-muted)] text-[var(--text-tertiary)] transition-[background-color,color] duration-[var(--motion-fast)] hover:bg-[var(--error-bg)] hover:text-[var(--error)]",
+                children: /* @__PURE__ */ jsx(Square, { className: "size-[9px] fill-current" })
+              }
+            ) : /* @__PURE__ */ jsx(
+              motion.button,
+              {
+                type: "button",
+                onClick: send,
+                disabled: !value.trim() && !attachments.length,
+                "aria-label": "Send",
+                animate: { scale: value.trim() || attachments.length ? 1 : 0.92 },
+                whileTap: value.trim() && !busy ? { scale: PRESS_SCALE_LARGE } : void 0,
+                transition: springs.bouncy,
+                className: `grid size-7 shrink-0 place-items-center rounded-full transition-[background-color,color] duration-[var(--motion-fast)] ${value.trim() && !busy ? "bg-brand-500 text-white hover:bg-brand-600" : "bg-[var(--bg-muted)] text-[var(--text-muted)]"}`,
+                children: /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    animate: { y: value.trim() || attachments.length ? -0.5 : 0 },
+                    transition: springs.snappy,
+                    children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" })
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  PotterComposer
+};
+//# sourceMappingURL=potter-composer.js.map

package/dist/potter/potter-composer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-composer.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { ArrowUp, Mic, Paperclip, Square } from 'lucide-react';\nimport { AutoGrowTextarea, FileInput } from '@withpotter/ui-kit';\nimport { AskGlow } from '@withpotter/components/dashboard/home/ask-glow';\nimport { AskVoice } from '@withpotter/components/dashboard/home/ask-voice';\nimport { PotterAttachmentChip } from './potter-attachment-chip';\nimport { PotterImageGrid } from './potter-image-grid';\nimport {\n  ATTACH_ACCEPT,\n  MAX_ATTACHMENTS,\n  type PotterAttachment,\n} from './potter-attach';\nimport { useVoiceMode } from '@withpotter/hooks/use-voice-mode';\nimport { PRESS_SCALE_LARGE, springs } from '@withpotter/lib/motion';\nimport { cn } from '@withpotter/lib/utils';\n\n/**\n * The composer at the foot of the ask screen — Linear's, and THIS is where its\n * height belongs.\n *\n * The port put a three-line box on the home first and John stopped it: *\"you\n * changed the height of the prompt box thats not what i wanted\"*. He was right,\n * and the reason is that the two boxes do different jobs. The home's bar sits\n * across the top of a board of widgets, where 128px is height taken from the\n * thing the page exists to show. This one sits at the bottom of a conversation\n * that has nothing else competing for the room, and the height IS the offer:\n * three lines say \"write a sentence\", a 44px slot says \"type a noun\".\n *\n * MEASURED, not guessed. Linear's is 104px on an empty chat and 128px in a\n * thread, on a minimum of three editor lines, growing to `min(12 lines, 60vh)`;\n * 12px of padding; the controls on their own row along the bottom INSIDE the\n * box, capabilities at the left and attach + submit at the right; and the\n * placeholder changes from \"Ask Linear…\" to \"Reply…\" the moment a thread\n * exists. Ours says \"Reply…\" for the same reason — the screen only exists once\n * there is something to reply to.\n *\n * THE SURFACE IS `composer-well`, shared with the home's bar, which is the\n * whole point of it being a utility: the fill, the 1px spread and the 0.5px\n * gradient edge that DIMS on focus are one recipe in `globals.css`, so the two\n * composers cannot drift into two different objects. See that file for why the\n * focus token is the dimmer of the pair.\n *\n * IT GLOWS, the same way the home's bar does. John: *\"the glowy effect on the\n * prompt box why didnt you it inside the chat area too liek the composer i\n * think it woudol be a good add on\"*. Right, and it costs nothing to be right —\n * `AskGlow` is six stacked rings that compute to `opacity: 0` until the group\n * around them is hovered or holds focus, and the rings only spin while they are\n * visible. It is the same component the home's bar and the sidebar's slot use,\n * so all three doors into Box are lit by one lamp.\n *\n * THE GROUP AND THE OPAQUE FILL ARE BOTH LOAD-BEARING. The rings sit at\n * `-z-10`, so they need something solid over their middle or the tight ring and\n * its falloff turn into one pastel blob — `composer-well` fills with\n * `--well-bg`, which is a flat colour rather than a mix with transparent, so\n * that is already handled. The `group relative isolate` wrapper is what the\n * rings read for hover and focus, and what stops their blur bleeding into the\n * thread above.\n *\n * THE MIC IS HERE, AND THE ARGUMENT AGAINST IT WAS BACKWARDS. This note used to\n * say voice could not come to the screen because it \"owns the whole surface it\n * runs on\" and there was \"nowhere to draw\" the waveform. John: *\"why didnt you\n * carry the recording feature\"* — and he is right, because the premise inverts.\n * The home's bar is 44px in a row of widgets; this is a 130px box in a column\n * with nothing else in it. If either surface is too small for a waveform it is\n * the one that already has it.\n *\n * So voice runs here on the same hook and it is the same loop: you speak, the\n * silence when you stop is what sends it, Box reads the answer back, and the\n * microphone opens again for the next turn. Words stream into the field as they\n * are recognised, so the field IS the transcript and there is no second surface\n * to come back from.\n *\n * HIDDEN OUTRIGHT WHERE THE BROWSER CANNOT LISTEN rather than shown greyed out.\n * Both ends run on the browser's own engines — potter-api has no transcription\n * route and no TTS route, and voice mode needs neither — so a browser without a\n * recogniser has no degraded mode to offer, only an absence to be honest about.\n */\nexport function PotterComposer({\n  onSubmit,\n  /**\n   * A spreadsheet the merchant chose. Optional: the launcher's small panel has\n   * nowhere to render what comes back, so it does not offer the control rather\n   * than offering one that answers into a box too small for the answer.\n   */\n  onAttach,\n  /** What is sitting in the composer, once it has been read. */\n  attachments = [],\n  onRemoveAttachment,\n  /** Box is still answering. The composer QUEUES rather than disabling. */\n  busy = false,\n  /**\n   * Ends the turn in flight.\n   *\n   * Absent where nothing can be stopped — the launcher's panel does not stream,\n   * and a Stop that cannot stop is the dead control this surface keeps\n   * refusing to draw.\n   */\n  onStop,\n  /** Sent turns, oldest first. ArrowUp walks back through them. */\n  history = [],\n  /**\n   * CONTROLLED, because a queued message has to be editable back into the box.\n   *\n   * The draft was local state until the queue existed, which was right while\n   * nothing outside could put words in it. Editing a waiting message means the\n   * screen owns the text — the same shape John's reference uses\n   * (`value` / `onValueChange`), and the same reason.\n   */\n  value,\n  onValueChange,\n  /**\n   * How many lines tall the box starts.\n   *\n   * Three where it is the floor of a conversation and two where it is the only\n   * object on an empty screen — John: *\"reduce the width and hieght of the chat\n   * box a bit\"*. It grows to its content either way; this is only the floor.\n   */\n  minRows = 3,\n  /**\n   * What the empty box says. `Reply…` is right under a transcript and wrong on\n   * a screen with nothing above it, where there is nothing yet to reply to.\n   */\n  placeholder,\n}: {\n  onSubmit: (question: string) => void;\n  onAttach?: (file: File) => void;\n  attachments?: PotterAttachment[];\n  onRemoveAttachment?: (file: File) => void;\n  busy?: boolean;\n  onStop?: () => void;\n  history?: string[];\n  value: string;\n  onValueChange: (next: string) => void;\n  minRows?: 2 | 3;\n  placeholder?: string;\n}) {\n  const ref = useRef<HTMLTextAreaElement>(null);\n  const reduce = useReducedMotion();\n  /**\n   * WHERE ARROW-UP HAS WALKED BACK TO. `null` means \"in the live draft\"; 0 is\n   * the most recent sent turn. Held rather than derived because the draft has\n   * to survive the walk: step up, look at two old questions, come back down,\n   * and the half-sentence you were writing is still there.\n   */\n  const [recall, setRecall] = useState<number | null>(null);\n  const draft = useRef('');\n  /* Straight into the field: the box IS the transcript, so there is no second\n     surface to review before the words are usable. */\n  const voice = useVoiceMode({ onTranscript: (text) => onValueChange(text) });\n  const picker = useRef<HTMLInputElement>(null);\n\n  /**\n   * SENDING WHILE BUSY QUEUES; it does not fail and it does not wait.\n   *\n   * The alternative every chat product picks is to disable the composer while\n   * the assistant answers, which tells a merchant to hold the thought. They do\n   * not hold it — they type it into a dead field and lose it. `onSubmit` takes\n   * both cases and the screen decides; see `PotterQueue`.\n   */\n  const send = () => {\n    const q = value.trim();\n    if (!q && !attachments.length) return;\n    if (voice.active) voice.stop();\n    onSubmit(q);\n    onValueChange('');\n    setRecall(null);\n    draft.current = '';\n    // Focus STAYS. The answer lands directly above this box and the next\n    // question goes in the same one, so blurring would make the merchant click\n    // back into the thing they were already using.\n    ref.current?.focus();\n  };\n\n  const images = attachments.filter(\n    (a): a is Extract<PotterAttachment, { kind: 'image' }> =>\n      a.kind === 'image',\n  );\n  const full = attachments.length >= MAX_ATTACHMENTS;\n\n  return (\n    <div className=\"group relative isolate\">\n      <AskGlow />\n\n      {/* THE WELL ITSELF IS A LAYOUT ELEMENT, which is the other half of John's\n          note: *\"when we add images it expands there needs to be animation then\n          when we roemove it shodlnt snap it should be fluid sping physics\"*.\n\n          It used to change height by simply being taller on the next frame —\n          the thumbnails appeared and the box was already the new size. `layout`\n          measures both and springs between them, so the well grows around an\n          arriving picture and closes over a removed one. It covers the textarea\n          growing a line too, which was the same snap in miniature. */}\n      <motion.div\n        layout={!reduce}\n        transition={reduce ? { duration: 0 } : springs.snappy}\n        className=\"composer-well flex w-full flex-col gap-2 p-3\"\n      >\n        {/* THE ATTACHMENT SITS IN THE COMPOSER UNTIL IT IS SENT, rather than\n            becoming a turn the moment it is chosen. That is what lets a\n            question travel with it — \"here is my stock, what is low?\" is one\n            message, not two — and it is the only point at which removing it is\n            still free. */}\n        {/* Spreadsheets keep their sentence, pictures do not — see the\n            docblock on `PotterImageGrid`. The difference is not a style\n            choice: a CSV's thumbnail cannot tell you whether the import will\n            work, and \"10 rows · Title, Price\" can. A photograph's thumbnail\n            tells you everything a photograph can tell you. */}\n        <AnimatePresence initial={false}>\n          {attachments\n            .filter((a) => a.kind === 'sheet')\n            .map((a) => (\n              <PotterAttachmentChip\n                key={a.file.name}\n                attachment={a}\n                onRemove={() => onRemoveAttachment?.(a.file)}\n              />\n            ))}\n        </AnimatePresence>\n\n        {images.length > 0 && (\n          <PotterImageGrid\n            images={images}\n            onRemove={(file) => onRemoveAttachment?.(file)}\n          />\n        )}\n        {/* MAX HEIGHT LIVES HERE, not on the textarea. `AutoGrowTextarea` sets its\n          own `height` from `scrollHeight` and ships `overflow-hidden`, so a cap\n          written on the field itself would be a box clipped at twelve lines with\n          no way to reach line thirteen. The wrapper takes the cap and the\n          scroll; the field inside it stays exactly as tall as what is written. */}\n        <div className=\"max-h-[min(calc(var(--text-md)*1.5*12),60vh)] overflow-y-auto\">\n          {/* THE WAVEFORM REPLACES THE FIELD, it does not sit beside it. The\n              bars come off an AnalyserNode on the real stream, so silence looks\n              like silence — the one thing a decorative waveform can never tell\n              you, and exactly when you need telling: a muted microphone and a\n              working one animate identically.\n\n              `AnimatePresence` so it LEAVES rather than being cut. A feature\n              built entirely out of motion must not vanish on a frame. */}\n          <AnimatePresence initial={false}>\n            {voice.active && (\n              <AskVoice\n                state={voice.state}\n                transcript={value}\n                spoken={voice.spoken}\n                spokenChars={voice.spokenChars}\n                endpointAt={voice.endpointAt}\n                peaksRef={voice.peaksRef}\n                canSpeak={voice.canSpeak}\n              />\n            )}\n          </AnimatePresence>\n\n          <AutoGrowTextarea\n            ref={ref}\n            value={value}\n            onChange={(e) => onValueChange(e.target.value)}\n            onKeyDown={(e) => {\n              // ENTER SENDS, SHIFT+ENTER OPENS A LINE — the pair every composer\n              // on the web has already taught, and the pair the home's one-line\n              // bar cannot offer. Without `preventDefault` the newline lands in\n              // the box a frame after the sentence was sent.\n              if (e.key === 'Enter' && !e.shiftKey) {\n                e.preventDefault();\n                send();\n                return;\n              }\n\n              /**\n               * ARROW-UP RECALLS, but only from an empty box or mid-walk.\n               *\n               * Guarded on the caret sitting at the very start, which is the\n               * rule a terminal uses and the reason it never fights you: in a\n               * three-line composer, Up is overwhelmingly \"move the caret\", and\n               * a recall that fires while somebody is editing line two eats the\n               * paragraph they were writing.\n               */\n              const atStart =\n                e.currentTarget.selectionStart === 0 &&\n                e.currentTarget.selectionEnd === 0;\n\n              if (e.key === 'ArrowUp' && atStart && history.length) {\n                e.preventDefault();\n                if (recall === null) draft.current = value;\n                const next =\n                  recall === null\n                    ? 0\n                    : Math.min(recall + 1, history.length - 1);\n                setRecall(next);\n                onValueChange(history[history.length - 1 - next]);\n                return;\n              }\n\n              if (e.key === 'ArrowDown' && recall !== null) {\n                e.preventDefault();\n                if (recall === 0) {\n                  setRecall(null);\n                  onValueChange(draft.current);\n                } else {\n                  const next = recall - 1;\n                  setRecall(next);\n                  onValueChange(history[history.length - 1 - next]);\n                }\n              }\n            }}\n            placeholder={\n              busy\n                ? 'Ask something else — it will wait…'\n                : (placeholder ?? 'Reply…')\n            }\n            aria-label=\"Reply to Box\"\n            // `leading-[1.5]` is written out rather than inherited because the\n            // auto-grow arithmetic reads `scrollHeight`, and an inherited line\n            // height makes that measurement depend on whatever wraps it.\n            /* Both floors written out as whole class names rather than\n               interpolated: Tailwind scans source text, so a class assembled at\n               runtime is a class that was never generated. */\n            className={cn(\n              minRows === 2\n                ? 'min-h-[calc(var(--text-md)*1.5*2)]'\n                : 'min-h-[calc(var(--text-md)*1.5*3)]',\n              'w-full bg-transparent text-md leading-[1.5] text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)]',\n            )}\n          />\n        </div>\n\n        {/* THE CONTROL ROW. Linear's carries `Skills ⌄` at the left and attach +\n          submit at the right; ours carries the submit alone, because a control\n          that names a capability we do not have is the one thing this whole\n          surface has been careful never to do. `justify-end` rather than\n          `justify-between` so nothing has to hold the empty half open. */}\n        <div className=\"flex items-center justify-end gap-1\">\n          {/* BRING A SPREADSHEET OR SOME PICTURES, and note what it still does\n              not accept.\n\n              A CSV needs no intelligence to read — `parseCsv` splits it and the\n              catalogue's own `guessMapping` recognises the columns — so Box\n              can say what is in the file and hand it to the importer that\n              already exists. A photograph it cannot read at all, and it says so\n              in the turn rather than in the composer; what it can do is put it\n              with the business's other pictures, which is a real destination\n              with real code behind it.\n\n              PDFs are still refused. Rendering a first page needs pdfjs, and\n              that weight would be carried for a file Box can do nothing with\n              and that has nowhere to go — which is the difference between this\n              and a paperclip that takes anything and waits for a model. */}\n          {onAttach && (\n            <>\n              {/* `multiple`, and every one of them read — John: *\"i should be\n                  able to add more images maybe max is 5\"*. The cap is enforced\n                  where the list lives rather than here, so dragging six in\n                  keeps the first five instead of keeping none. */}\n              <FileInput\n                ref={picker}\n                accept={ATTACH_ACCEPT}\n                multiple\n                tabIndex={-1}\n                aria-label=\"Attach a file\"\n                onFiles={(files) => files.forEach(onAttach)}\n              />\n              <motion.button\n                type=\"button\"\n                onClick={() => picker.current?.click()}\n                disabled={full}\n                aria-label=\"Attach a file\"\n                title={\n                  full\n                    ? `That is ${MAX_ATTACHMENTS} — send these first`\n                    : 'Attach pictures or a product list (.csv)'\n                }\n                whileTap={full ? undefined : { scale: PRESS_SCALE_LARGE }}\n                transition={springs.snappy}\n                className=\"grid size-7 shrink-0 place-items-center rounded-full bg-[var(--bg-muted)] text-[var(--text-tertiary)] transition-[background-color,color] duration-[var(--motion-fast)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-[var(--bg-muted)] disabled:hover:text-[var(--text-tertiary)]\"\n              >\n                <Paperclip className=\"size-4\" />\n              </motion.button>\n            </>\n          )}\n\n          {/* SPEAK IT. Hidden where the browser has no recogniser rather than\n              offered and dead — the rule every control on this surface follows.\n              The glyph becomes a stop square in voice mode so the button says\n              what pressing it will do, which is a bigger claim here than it was\n              for dictation: it ends a conversation rather than closing a\n              microphone. */}\n          {voice.supported && (\n            <motion.button\n              type=\"button\"\n              onClick={() => {\n                if (voice.active) voice.stop();\n                else {\n                  ref.current?.focus();\n                  void voice.start();\n                }\n              }}\n              aria-label={voice.active ? 'Stop voice mode' : 'Talk to Box'}\n              aria-pressed={voice.active}\n              whileTap={{ scale: PRESS_SCALE_LARGE }}\n              transition={springs.snappy}\n              className={`grid size-7 shrink-0 place-items-center rounded-full transition-[background-color,color] duration-[var(--motion-fast)] ${\n                voice.active\n                  ? 'bg-[var(--error)] text-white'\n                  : 'bg-[var(--bg-muted)] text-[var(--text-tertiary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]'\n              }`}\n            >\n              {voice.active ? (\n                <Square className=\"size-[9px] fill-current\" />\n              ) : (\n                <Mic className=\"size-4\" />\n              )}\n            </motion.button>\n          )}\n\n          {/* STOP REPLACES SEND while a turn is in flight, rather than sitting\n              beside it. Two commit-shaped buttons in one corner is a choice\n              nobody wants to make mid-answer, and there is nothing to send from\n              an empty box anyway — anything typed queues, and the send button\n              comes straight back the moment there are words in it.\n\n              One element changing rather than two crossfading, and the fill\n              goes to `--error` on hover because this is the one control on the\n              row that ENDS something. */}\n          {busy && onStop && !value.trim() && !attachments.length ? (\n            <motion.button\n              type=\"button\"\n              onClick={onStop}\n              aria-label=\"Stop\"\n              whileTap={{ scale: PRESS_SCALE_LARGE }}\n              transition={springs.snappy}\n              className=\"grid size-7 shrink-0 place-items-center rounded-full bg-[var(--bg-muted)] text-[var(--text-tertiary)] transition-[background-color,color] duration-[var(--motion-fast)] hover:bg-[var(--error-bg)] hover:text-[var(--error)]\"\n            >\n              <Square className=\"size-[9px] fill-current\" />\n            </motion.button>\n          ) : (\n            <motion.button\n              type=\"button\"\n              onClick={send}\n              disabled={!value.trim() && !attachments.length}\n              aria-label=\"Send\"\n              // LIVE MEANS BLUE, the same rule the home's send button follows: the\n              // single most useful thing a send button can say is \"there is\n              // something to send now\", and colour is how it says it.\n              //\n              // AND IT WAKES UP. Colour alone changes a button nobody is looking at\n              // — the eye is in the text. A small spring as the first character\n              // lands puts the change in peripheral vision, which is the whole\n              // point of it. One element scaling, never two crossfading.\n              animate={{ scale: value.trim() || attachments.length ? 1 : 0.92 }}\n              whileTap={\n                value.trim() && !busy ? { scale: PRESS_SCALE_LARGE } : undefined\n              }\n              transition={springs.bouncy}\n              className={`grid size-7 shrink-0 place-items-center rounded-full transition-[background-color,color] duration-[var(--motion-fast)] ${\n                value.trim() && !busy\n                  ? 'bg-brand-500 text-white hover:bg-brand-600'\n                  : 'bg-[var(--bg-muted)] text-[var(--text-muted)]'\n              }`}\n            >\n              {/* The arrow leans into the send. `y` rather than `rotate`: this\n              control's whole meaning is \"upward\", and nudging it up as the\n              button comes alive says that without a second idea. */}\n              <motion.span\n                animate={{ y: value.trim() || attachments.length ? -0.5 : 0 }}\n                transition={springs.snappy}\n              >\n                <ArrowUp className=\"size-4\" />\n              </motion.span>\n            </motion.button>\n          )}\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}