@withpotter/components 0.13.0-next.101

package/dist/potter/potter-image-grid.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { X } from "lucide-react";
+import { PRESS_SCALE_LARGE, springs } from "@withpotter/lib/motion";
+function PotterImageGrid({
+  images,
+  onRemove
+}) {
+  const reduce = useReducedMotion();
+  return (
+    /* `layout` on the row as well as on each square: removing the FIRST of five
+       moves the other four, and without it they would teleport into their new
+       places while the one leaving faded politely. */
+    /* @__PURE__ */ jsx(motion.div, { layout: !reduce, className: "flex flex-wrap gap-2", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: images.map((img) => /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        layout: !reduce,
+        initial: reduce ? { opacity: 0 } : { opacity: 0, scale: 0.8, y: 6 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: reduce ? { opacity: 0 } : { opacity: 0, scale: 0.8 },
+        transition: reduce ? { duration: 0 } : springs.snappy,
+        className: "group/img relative size-14 shrink-0",
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: img.url,
+              alt: "",
+              className: "size-full rounded-[var(--radius-card)] object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.button,
+            {
+              type: "button",
+              onClick: () => onRemove(img.file),
+              "aria-label": `Remove ${img.file.name}`,
+              whileTap: reduce ? void 0 : { scale: PRESS_SCALE_LARGE },
+              transition: springs.snappy,
+              className: "absolute -right-1 -top-1 grid size-5 place-items-center rounded-full border border-[var(--border-strong)] bg-[var(--bg-elevated)] text-[var(--text-primary)] shadow-[var(--shadow-md)] transition-colors duration-[var(--motion-fast)] hover:border-[var(--error)] hover:bg-[var(--error)] hover:text-white",
+              children: /* @__PURE__ */ jsx(X, { className: "size-[13px]" })
+            }
+          )
+        ]
+      },
+      img.url
+    )) }) })
+  );
+}
+export {
+  PotterImageGrid
+};
+//# sourceMappingURL=potter-image-grid.js.map

package/dist/potter/potter-image-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-image-grid.tsx"],"sourcesContent":["'use client';\n\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { X } from 'lucide-react';\nimport { PRESS_SCALE_LARGE, springs } from '@withpotter/lib/motion';\nimport type { PotterAttachment } from './potter-attach';\n\n/**\n * Pictures waiting in the composer, as pictures.\n *\n * WHAT THIS REPLACED, and John's words for it: a chip carrying\n * `_designerbabe_1718527507_3391577010625190628_15287514660.jpg`, then\n * `1440 × 1800 · Box cannot read pictures yet` — *\"theres no need to add\n * this … just the image\"*. He is right on all three counts:\n *\n *   the filename    is not a name. That string identifies the picture to\n *                   Instagram's CDN and to nobody else, and it wrapped over two\n *                   lines of a composer that is meant to be a place to type.\n *   the dimensions  answer a question nobody asked. `1440 × 1800` cannot change\n *                   what you do next; the thumbnail already tells you whether\n *                   you picked the right photograph, which is the only thing\n *                   being decided here.\n *   the admission   is still made — in the turn, after sending, where a limit\n *                   belongs. Repeated once per picture in the composer it was\n *                   five copies of the same sentence stacked above the box.\n *\n * So: the picture, cropped square, and nothing else. A row of them, because\n * five squares read as a set you can check at a glance where five stacked rows\n * read as a list you have to work through.\n *\n * SQUARE AND CROPPED rather than fitted. A grid of mixed aspect ratios is a\n * ragged edge, and the crop is the same one the media library shows — so what\n * you see here is what the picture will look like where it lands.\n *\n * NOTHING SNAPS, which was the other half of the note: *\"when we add images it\n * expands there needs to be animation then when we roemove it shodlnt snap it\n * should be fluid sping physics\"*. Each square arrives and leaves on a spring,\n * `layout` slides its neighbours along to close the gap, and the composer's own\n * well grows and shrinks around them on the same spring rather than jumping to\n * its new height.\n */\nexport function PotterImageGrid({\n  images,\n  onRemove,\n}: {\n  images: Extract<PotterAttachment, { kind: 'image' }>[];\n  onRemove: (file: File) => void;\n}) {\n  const reduce = useReducedMotion();\n\n  return (\n    /* `layout` on the row as well as on each square: removing the FIRST of five\n       moves the other four, and without it they would teleport into their new\n       places while the one leaving faded politely. */\n    <motion.div layout={!reduce} className=\"flex flex-wrap gap-2\">\n      <AnimatePresence initial={false} mode=\"popLayout\">\n        {images.map((img) => (\n          <motion.div\n            key={img.url}\n            layout={!reduce}\n            initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.8, y: 6 }}\n            animate={{ opacity: 1, scale: 1, y: 0 }}\n            exit={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.8 }}\n            transition={reduce ? { duration: 0 } : springs.snappy}\n            className=\"group/img relative size-14 shrink-0\"\n          >\n            {/* A plain `img`, not `next/image`: this is an object URL for a\n                file chosen a moment ago, so there is nothing to optimise, no\n                remote host to configure, and a loader in front of it would be a\n                round trip to nowhere. */}\n            {/* eslint-disable-next-line @next/next/no-img-element */}\n            <img\n              src={img.url}\n              alt=\"\"\n              className=\"size-full rounded-[var(--radius-card)] object-cover\"\n            />\n\n            {/* THE REMOVE SITS ON THE PICTURE, not under it. A row of squares\n                with a row of little × underneath is two rows doing one job, and\n                on a 56px square there is nowhere else for it to go.\n\n                It is always present rather than hover-only, because this also\n                has to work on a touch screen, where there is no hover and an\n                attachment you cannot take back is a reason not to add one.\n\n                IT NEEDS AN EDGE AND A DARKER INK THAN IT HAD. John: *\"the\n                cancel button when you add images its transparent fix this\"* —\n                and it looked transparent for a real reason rather than a\n                missing fill. `--bg-base` is the composer well's own colour, so\n                the half of the circle hanging off the corner of the thumbnail\n                was painting the well onto the well: invisible. What remained\n                was a dim `--text-tertiary` glyph apparently floating on the\n                photograph.\n\n                So: a hairline to cut it out of whatever is behind it, and the\n                glyph at `--text-primary`. The border is what does the work —\n                this control has to read on a white product shot, on a black\n                one, and on the well between two of them, and no single fill\n                can manage all three on its own.\n\n                HOVER IS A SOLID RED FILL WITH A WHITE ×, not a red tint with a\n                red glyph. John: *\"it should be a solid red not transparent the\n                the x woudl be white\"*. The tint — `--error-bg`, which is\n                `--error` at 15% — was a translucent wash sitting on top of a\n                photograph, so what it actually composited against was whatever\n                pixels happened to be under it, and a red × on a red-tinted\n                plate of spaghetti is not a control saying it will delete\n                something.\n\n                This is `Button variant=\"danger\"`'s own treatment —\n                `bg-[var(--error)] text-white` — which is what every other\n                destroying control in the app wears. `text-white` rather than\n                `--text-inverse`: that token follows the theme and goes DARK in\n                dark mode, and this ink sits on a red fill that does not\n                change, in either theme. */}\n            <motion.button\n              type=\"button\"\n              onClick={() => onRemove(img.file)}\n              aria-label={`Remove ${img.file.name}`}\n              whileTap={reduce ? undefined : { scale: PRESS_SCALE_LARGE }}\n              transition={springs.snappy}\n              className=\"absolute -right-1 -top-1 grid size-5 place-items-center rounded-full border border-[var(--border-strong)] bg-[var(--bg-elevated)] text-[var(--text-primary)] shadow-[var(--shadow-md)] transition-colors duration-[var(--motion-fast)] hover:border-[var(--error)] hover:bg-[var(--error)] hover:text-white\"\n            >\n              <X className=\"size-[13px]\" />\n            </motion.button>\n          </motion.div>\n        ))}\n      </AnimatePresence>\n    </motion.div>\n  );\n}\n"],"mappings":";AAyDU,SAcE,KAdF;AAvDV,SAAS,iBAAiB,QAAQ,wBAAwB;AAC1D,SAAS,SAAS;AAClB,SAAS,mBAAmB,eAAe;AAqCpC,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AACF,GAGG;AACD,QAAM,SAAS,iBAAiB;AAEhC;AAAA;AAAA;AAAA;AAAA,IAIE,oBAAC,OAAO,KAAP,EAAW,QAAQ,CAAC,QAAQ,WAAU,wBACrC,8BAAC,mBAAgB,SAAS,OAAO,MAAK,aACnC,iBAAO,IAAI,CAAC,QACX;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QAEC,QAAQ,CAAC;AAAA,QACT,SAAS,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,EAAE;AAAA,QAClE,SAAS,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,EAAE;AAAA,QACtC,MAAM,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,GAAG,OAAO,IAAI;AAAA,QACzD,YAAY,SAAS,EAAE,UAAU,EAAE,IAAI,QAAQ;AAAA,QAC/C,WAAU;AAAA,QAOV;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,IAAI;AAAA,cACT,KAAI;AAAA,cACJ,WAAU;AAAA;AAAA,UACZ;AAAA,UAwCA;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,SAAS,IAAI,IAAI;AAAA,cAChC,cAAY,UAAU,IAAI,KAAK,IAAI;AAAA,cACnC,UAAU,SAAS,SAAY,EAAE,OAAO,kBAAkB;AAAA,cAC1D,YAAY,QAAQ;AAAA,cACpB,WAAU;AAAA,cAEV,8BAAC,KAAE,WAAU,eAAc;AAAA;AAAA,UAC7B;AAAA;AAAA;AAAA,MAlEK,IAAI;AAAA,IAmEX,CACD,GACH,GACF;AAAA;AAEJ;","names":[]}

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

@@ -0,0 +1,51 @@
+/**
+ * The intro — what Box is, before you have said anything to it.
+ *
+ * IT SAID TOO MUCH AND THIS IS THE CUT. It opened with the mark, a line, and
+ * then three named capabilities each with a title AND a sentence under it:
+ * "Find anything — orders, invoices, customers, products, by name, number or
+ * scrap of one." Six lines of prose above the four questions, defending a
+ * design decision to a merchant who did not ask for one.
+ *
+ * The argument for that block was honesty — Box's competence is narrow and
+ * an empty box implies it will try anything. That argument was right and the
+ * block was still the wrong way to serve it, because **the suggestions already
+ * do the job better**. "Who still owes me money?" tells you more about what
+ * this thing answers than "Find anything" ever could, and it tells you in words
+ * you can press. A capability list beside a list of real examples is the same
+ * information twice, once in the abstract.
+ *
+ * So: one line of voice, four things you can actually ask, and the way out.
+ * The mark went too — the boot animation just drew it at 40px and the panel
+ * header is wearing it at 13px, so a third one here was the surface introducing
+ * itself three times before its first sentence.
+ *
+ * The two rows at the bottom are the merge. Feedback owned the bottom-right
+ * corner and offered Box as a row inside its sheet; the relationship is
+ * inverted now. A human is still one tap away, which matters more here than
+ * anywhere else in the app: someone who has just been told "I can't answer that
+ * one yet" is the exact person who must not have to go hunting.
+ */
+/**
+ * The four the home's ask bar already offered, kept verbatim.
+ *
+ * They were written against the home's own goal — what is waiting, who owes,
+ * what is running out, how did we do — and re-picking them here would give the
+ * merchant two different lists of "things you can ask" depending on the door
+ * they came through, which is the exact duplication this merge exists to end.
+ *
+ * They are also, now, the only thing on this screen that says what Box can
+ * do. That is a load they can carry and a paragraph cannot: each one is a real
+ * question, in the merchant's words, that lands on a real branch of the router.
+ */
+export declare const SUGGESTIONS: string[];
+export declare function PotterIntro({ onAsk, 
+/**
+ * The home renders this under a bar that is already the composer and already
+ * names the assistant, so the opening line would be the third thing on screen
+ * saying "Box". Compact drops it and keeps the questions.
+ */
+compact, }: {
+    onAsk: (question: string) => void;
+    compact?: boolean;
+}): import("react").JSX.Element;

package/dist/potter/potter-intro.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { ArrowRight } from "lucide-react";
+import { columnItemVariants, columnVariants } from "@withpotter/lib/motion";
+import { useCanAsk } from "./use-potter-ask";
+const SUGGESTIONS = [
+  "What needs my attention today?",
+  "Who still owes me money?",
+  "Which items are running low?",
+  "How did this week compare to last?"
+];
+function PotterIntro({
+  onAsk,
+  /**
+   * The home renders this under a bar that is already the composer and already
+   * names the assistant, so the opening line would be the third thing on screen
+   * saying "Box". Compact drops it and keeps the questions.
+   */
+  compact = false
+}) {
+  const canAsk = useCanAsk();
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      variants: columnVariants,
+      initial: "hidden",
+      animate: "shown",
+      className: "space-y-4",
+      children: [
+        !compact && /* @__PURE__ */ jsx(
+          motion.p,
+          {
+            variants: columnItemVariants,
+            className: "text-md text-[var(--text-primary)]",
+            children: "Ask about your business, or tell Box what you sell."
+          }
+        ),
+        /* @__PURE__ */ jsx(motion.ul, { variants: columnItemVariants, className: "space-y-1", children: SUGGESTIONS.filter(canAsk).map((q) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onMouseDown: (e) => {
+              e.preventDefault();
+              onAsk(q);
+            },
+            className: "group/row flex w-full items-center gap-3 rounded-[var(--radius-card)] px-3 py-2 text-left text-md text-[var(--text-secondary)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]",
+            children: [
+              /* @__PURE__ */ jsx(
+                ArrowRight,
+                {
+                  "aria-hidden": true,
+                  className: "shrink-0 text-[var(--text-tertiary)] transition-transform duration-[var(--motion-fast,120ms)] ease-out group-hover/row:translate-x-0.5"
+                }
+              ),
+              q
+            ]
+          }
+        ) }, q)) })
+      ]
+    }
+  );
+}
+export {
+  PotterIntro,
+  SUGGESTIONS
+};
+//# sourceMappingURL=potter-intro.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-intro.tsx"],"sourcesContent":["'use client';\n\nimport { motion } from 'motion/react';\nimport { ArrowRight } from 'lucide-react';\nimport { columnItemVariants, columnVariants } from '@withpotter/lib/motion';\nimport { useCanAsk } from './use-potter-ask';\n\n/**\n * The intro — what Box is, before you have said anything to it.\n *\n * IT SAID TOO MUCH AND THIS IS THE CUT. It opened with the mark, a line, and\n * then three named capabilities each with a title AND a sentence under it:\n * \"Find anything — orders, invoices, customers, products, by name, number or\n * scrap of one.\" Six lines of prose above the four questions, defending a\n * design decision to a merchant who did not ask for one.\n *\n * The argument for that block was honesty — Box's competence is narrow and\n * an empty box implies it will try anything. That argument was right and the\n * block was still the wrong way to serve it, because **the suggestions already\n * do the job better**. \"Who still owes me money?\" tells you more about what\n * this thing answers than \"Find anything\" ever could, and it tells you in words\n * you can press. A capability list beside a list of real examples is the same\n * information twice, once in the abstract.\n *\n * So: one line of voice, four things you can actually ask, and the way out.\n * The mark went too — the boot animation just drew it at 40px and the panel\n * header is wearing it at 13px, so a third one here was the surface introducing\n * itself three times before its first sentence.\n *\n * The two rows at the bottom are the merge. Feedback owned the bottom-right\n * corner and offered Box as a row inside its sheet; the relationship is\n * inverted now. A human is still one tap away, which matters more here than\n * anywhere else in the app: someone who has just been told \"I can't answer that\n * one yet\" is the exact person who must not have to go hunting.\n */\n\n/**\n * The four the home's ask bar already offered, kept verbatim.\n *\n * They were written against the home's own goal — what is waiting, who owes,\n * what is running out, how did we do — and re-picking them here would give the\n * merchant two different lists of \"things you can ask\" depending on the door\n * they came through, which is the exact duplication this merge exists to end.\n *\n * They are also, now, the only thing on this screen that says what Box can\n * do. That is a load they can carry and a paragraph cannot: each one is a real\n * question, in the merchant's words, that lands on a real branch of the router.\n */\nexport const SUGGESTIONS = [\n  'What needs my attention today?',\n  'Who still owes me money?',\n  'Which items are running low?',\n  'How did this week compare to last?',\n];\n\nexport function PotterIntro({\n  onAsk,\n  /**\n   * The home renders this under a bar that is already the composer and already\n   * names the assistant, so the opening line would be the third thing on screen\n   * saying \"Box\". Compact drops it and keeps the questions.\n   */\n  compact = false,\n}: {\n  onAsk: (question: string) => void;\n  compact?: boolean;\n}) {\n  const canAsk = useCanAsk();\n\n  return (\n    <motion.div\n      variants={columnVariants}\n      initial=\"hidden\"\n      animate=\"shown\"\n      className=\"space-y-4\"\n    >\n      {!compact && (\n        <motion.p\n          variants={columnItemVariants}\n          className=\"text-md text-[var(--text-primary)]\"\n        >\n          Ask about your business, or tell Box what you sell.\n        </motion.p>\n      )}\n\n      {/* ONLY WHAT THIS BUSINESS CAN ACTUALLY BE ASKED.\n\n          The list is written for a shop that does everything, and most do not.\n          A Health & Wellness workspace with no stock was offered \"Which items\n          are running low?\", pressed it, and got \"Nothing matched\" — the answer\n          gate refusing a question the suggestion list had just promised. Same\n          gate, one step earlier. See `useCanAsk`. */}\n      <motion.ul variants={columnItemVariants} className=\"space-y-1\">\n        {SUGGESTIONS.filter(canAsk).map((q) => (\n          <li key={q}>\n            {/* A pressable row, not a Button: this is a choice off a list, and\n                a filled or bordered control per line would make four of them\n                compete with the composer for the eye. `onMouseDown` because on\n                the home this list lives under a field whose blur unmounts it\n                before a click could land. */}\n            <button\n              type=\"button\"\n              onMouseDown={(e) => {\n                e.preventDefault();\n                onAsk(q);\n              }}\n              className=\"group/row flex w-full items-center gap-3 rounded-[var(--radius-card)] px-3 py-2 text-left text-md text-[var(--text-secondary)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]\"\n            >\n              {/* Nudges on hover. The row is already tinting, so the arrow is\n                  not carrying the state — it is answering the pointer, which is\n                  the small thing that makes a list feel handled rather than\n                  merely styled. */}\n              <ArrowRight\n                aria-hidden\n                className=\"shrink-0 text-[var(--text-tertiary)] transition-transform duration-[var(--motion-fast,120ms)] ease-out group-hover/row:translate-x-0.5\"\n              />\n              {q}\n            </button>\n          </li>\n        ))}\n      </motion.ul>\n\n      {/* NO \"REPORT A BUG\" / \"MESSAGE THE TEAM\". Removed on John's call,\n          2026-08-23, when Help & support went back into the sidebar rail.\n\n          They were the escapes for \"this is not what I came here for\", parked\n          at the bottom of a list of things to ask. Two problems with that, and\n          the rail fixes both: they were only reachable from a surface a stuck\n          person has to open on purpose, and they made three doors to one room.\n          `FeedbackWidget` still exists and `openFeedback` still works — what\n          went is this being one of the places that opens it.\n\n          Still true after Give feedback returned as a footer row on\n          2026-08-31: the rail is where both of these live now, which is the\n          arrangement this note was arguing for. Adding them back here would\n          re-make the third door. */}\n    </motion.div>\n  );\n}\n"],"mappings":";AA6EQ,cAuBI,YAvBJ;AA3ER,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB,sBAAsB;AACnD,SAAS,iBAAiB;AA2CnB,MAAM,cAAc;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AACZ,GAGG;AACD,QAAM,SAAS,UAAU;AAEzB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,UAAU;AAAA,MACV,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,WAAU;AAAA,MAET;AAAA,SAAC,WACA;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACC,UAAU;AAAA,YACV,WAAU;AAAA,YACX;AAAA;AAAA,QAED;AAAA,QAUF,oBAAC,OAAO,IAAP,EAAU,UAAU,oBAAoB,WAAU,aAChD,sBAAY,OAAO,MAAM,EAAE,IAAI,CAAC,MAC/B,oBAAC,QAMC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,aAAa,CAAC,MAAM;AAClB,gBAAE,eAAe;AACjB,oBAAM,CAAC;AAAA,YACT;AAAA,YACA,WAAU;AAAA,YAMV;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW;AAAA,kBACX,WAAU;AAAA;AAAA,cACZ;AAAA,cACC;AAAA;AAAA;AAAA,QACH,KAvBO,CAwBT,CACD,GACH;AAAA;AAAA;AAAA,EAgBF;AAEJ;","names":[]}

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

@@ -0,0 +1,20 @@
+/**
+ * The corner door, on every screen that does not own its own bottom-right.
+ *
+ * IT IS THE MARK, NOT A ROBOT AND NOT A SPEECH BUBBLE. The bubble it replaces
+ * wore `MessageSquarePlus`, which promised a message form and delivered one —
+ * correct for what it was, and exactly why nobody found the assistant. Two
+ * interlocking blocks are already Box everywhere else in the app, so the
+ * corner can say "Box" without borrowing a sparkle or a face from somebody
+ * else's product.
+ *
+ * It opens ANCHORED to itself rather than centred. A centred dialog says the
+ * page is over; an assistant is consulted mid-task and has to look like it
+ * grew out of the button you pressed, which is why the panel scales from its
+ * own bottom-right corner and lands there.
+ *
+ * The editor and the home never render this. Both own the surface themselves —
+ * the editor put a 39px tool in that corner and had two owners fighting over
+ * twenty-one overlapping pixels, and the home's ask bar IS the door.
+ */
+export declare function PotterLauncher(): import("react").JSX.Element;

package/dist/potter/potter-launcher.js

@@ -0,0 +1,147 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { ArrowUp, Plus, X } from "lucide-react";
+import { BoxMark } from "@withpotter/ui-kit/box-mark";
+import { useModalBehaviour } from "@withpotter/hooks/use-modal-behaviour";
+import { durations, eases, springs, PRESS_SCALE_LARGE } from "@withpotter/lib/motion";
+import { usePotter } from "./potter-context";
+import { usePotterAsk } from "./use-potter-ask";
+import { PotterSurface } from "./potter-surface";
+import { PotterHistoryMenu } from "./potter-conversation";
+import { PotterOpenFull, PotterFallible } from "./potter-chrome";
+import { Input } from "@withpotter/ui-kit";
+function PotterLauncher() {
+  const { open, openPotter, closePotter, messages, clear } = usePotter();
+  const panelRef = useModalBehaviour(open, closePotter);
+  const ask = usePotterAsk();
+  const [value, setValue] = useState("");
+  const send = () => {
+    if (!value.trim()) return;
+    ask(value);
+    setValue("");
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        "aria-hidden": true,
+        onClick: closePotter,
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: durations.normal, ease: eases.out },
+        className: "fixed inset-0 z-[94] bg-black/25 backdrop-blur-[3px]"
+      },
+      "scrim"
+    ) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-label": "Box",
+        layout: true,
+        initial: { opacity: 0, scale: 0.96, y: 8 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0.98, y: 4 },
+        transition: { ...springs.snappy, layout: springs.gentle },
+        style: { transformOrigin: "bottom right" },
+        className: "fixed bottom-[calc(148px+env(safe-area-inset-bottom))] right-4 z-[95] flex max-h-[min(620px,70vh)] w-[min(392px,calc(100vw-2rem))] flex-col rounded-[var(--radius-card)] border border-[var(--border-default)] bg-[var(--bg-muted)] shadow-lg lg:bottom-[88px] lg:right-6",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[var(--border-subtle)] px-4 py-3", children: [
+            /* @__PURE__ */ jsx(
+              BoxMark,
+              {
+                glyph: "mark",
+                height: 13,
+                className: "text-[var(--text-primary)]"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm font-medium text-[var(--text-primary)]", children: "Box" }),
+            /* @__PURE__ */ jsx(PotterHistoryMenu, {}),
+            /* @__PURE__ */ jsx(PotterOpenFull, { onDone: closePotter }),
+            messages.length > 0 && /* @__PURE__ */ jsx(PanelIcon, { label: "New conversation", onClick: clear, children: /* @__PURE__ */ jsx(Plus, {}) }),
+            /* @__PURE__ */ jsx(PanelIcon, { label: "Close Box", onClick: closePotter, children: /* @__PURE__ */ jsx(X, {}) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-4 py-4", children: /* @__PURE__ */ jsx(PotterSurface, {}) }),
+          /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] p-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-[var(--radius-card)] border border-[var(--border-subtle)] bg-[var(--bg-base)] pl-3 pr-2", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  variant: "bare",
+                  autoFocus: true,
+                  value,
+                  onChange: (e) => setValue(e.target.value),
+                  onKeyDown: (e) => e.key === "Enter" && send(),
+                  "aria-label": "Ask Box",
+                  placeholder: "Ask anything",
+                  className: "h-9 text-md"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: send,
+                  disabled: !value.trim(),
+                  "aria-label": "Send",
+                  className: `grid h-7 w-7 shrink-0 place-items-center rounded-full transition-[background-color,color] duration-[var(--motion-fast)] ${value.trim() ? "bg-brand-500 text-white hover:bg-brand-600" : "bg-[var(--bg-subtle)] text-[var(--text-muted)]"}`,
+                  children: /* @__PURE__ */ jsx(ArrowUp, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(PotterFallible, {})
+          ] })
+        ]
+      },
+      "panel"
+    ) }),
+    /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        type: "button",
+        onClick: () => open ? closePotter() : openPotter(),
+        "aria-label": open ? "Close Box" : "Ask Box",
+        "aria-expanded": open,
+        whileTap: { scale: PRESS_SCALE_LARGE },
+        transition: springs.snappy,
+        className: "fixed bottom-[calc(84px+env(safe-area-inset-bottom))] right-4 z-[96] grid h-11 w-11 place-items-center rounded-full border border-[var(--border-default)] bg-[var(--bg-muted)] text-[var(--text-secondary)] shadow-md transition-colors hover:border-[var(--border-strong)] hover:text-[var(--text-primary)] lg:bottom-6 lg:right-6",
+        children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            initial: { opacity: 0, rotate: open ? -90 : 90, scale: 0.7 },
+            animate: { opacity: 1, rotate: 0, scale: 1 },
+            exit: { opacity: 0, rotate: open ? 90 : -90, scale: 0.7 },
+            transition: { duration: durations.normal, ease: eases.out },
+            className: "grid place-items-center",
+            children: open ? /* @__PURE__ */ jsx(X, { className: "size-4" }) : /* @__PURE__ */ jsx(BoxMark, { glyph: "mark", height: 18 })
+          },
+          open ? "x" : "mark"
+        ) })
+      }
+    )
+  ] });
+}
+function PanelIcon({
+  label,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": label,
+      className: "grid h-6 w-6 place-items-center rounded-[var(--radius-card)] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]",
+      children
+    }
+  );
+}
+export {
+  PotterLauncher
+};
+//# sourceMappingURL=potter-launcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-launcher.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { ArrowUp, Plus, X } from 'lucide-react';\nimport { BoxMark } from '@withpotter/ui-kit/box-mark';\nimport { useModalBehaviour } from '@withpotter/hooks/use-modal-behaviour';\nimport { durations, eases, springs, PRESS_SCALE_LARGE } from '@withpotter/lib/motion';\nimport { usePotter } from './potter-context';\nimport { usePotterAsk } from './use-potter-ask';\nimport { PotterSurface } from './potter-surface';\nimport { PotterHistoryMenu } from './potter-conversation';\nimport { PotterOpenFull, PotterFallible } from './potter-chrome';\nimport { Input } from '@withpotter/ui-kit';\n\n/**\n * The corner door, on every screen that does not own its own bottom-right.\n *\n * IT IS THE MARK, NOT A ROBOT AND NOT A SPEECH BUBBLE. The bubble it replaces\n * wore `MessageSquarePlus`, which promised a message form and delivered one —\n * correct for what it was, and exactly why nobody found the assistant. Two\n * interlocking blocks are already Box everywhere else in the app, so the\n * corner can say \"Box\" without borrowing a sparkle or a face from somebody\n * else's product.\n *\n * It opens ANCHORED to itself rather than centred. A centred dialog says the\n * page is over; an assistant is consulted mid-task and has to look like it\n * grew out of the button you pressed, which is why the panel scales from its\n * own bottom-right corner and lands there.\n *\n * The editor and the home never render this. Both own the surface themselves —\n * the editor put a 39px tool in that corner and had two owners fighting over\n * twenty-one overlapping pixels, and the home's ask bar IS the door.\n */\nexport function PotterLauncher() {\n  const { open, openPotter, closePotter, messages, clear } = usePotter();\n  const panelRef = useModalBehaviour(open, closePotter);\n  const ask = usePotterAsk();\n  const [value, setValue] = useState('');\n\n  const send = () => {\n    if (!value.trim()) return;\n    ask(value);\n    setValue('');\n  };\n\n  return (\n    <>\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            key=\"scrim\"\n            aria-hidden\n            onClick={closePotter}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            // A curve, not a spring. It does not move, and a spring on pure\n            // opacity is a spring nobody can see — the app's dialog scrim makes\n            // the same call for the same reason.\n            transition={{ duration: durations.normal, ease: eases.out }}\n            /**\n             * THE BLUR IS THE PANEL'S GROUND, and it also settles an argument\n             * this thing was having with itself: it already trapped focus and\n             * locked the page (`useModalBehaviour`), so it BEHAVED modal while\n             * looking like a widget floating over live content. Now the two\n             * agree.\n             *\n             * Lighter than the app's dialog scrim on purpose — that one is\n             * black/60 because a dialog has replaced what you were doing.\n             * Box is consulted mid-task, and the page you are asking ABOUT\n             * has to stay readable behind it. Same 3px blur, a quarter of the\n             * dim: enough to give a grey panel something to sit against,\n             * not enough to say the screen is over.\n             */\n            className=\"fixed inset-0 z-[94] bg-black/25 backdrop-blur-[3px]\"\n          />\n        )}\n      </AnimatePresence>\n\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            key=\"panel\"\n            ref={panelRef}\n            role=\"dialog\"\n            aria-label=\"Box\"\n            // FLUID HEIGHT. The boot is ~150px and the intro is taller, so\n            // without this the panel snapped between the two — the one hard\n            // edge in a surface whose whole job is to feel considered. `layout`\n            // sprints the box between the sizes its content actually measures,\n            // so nothing has to hardcode a height that would then be wrong the\n            // moment the intro gains or loses a line.\n            layout\n            initial={{ opacity: 0, scale: 0.96, y: 8 }}\n            animate={{ opacity: 1, scale: 1, y: 0 }}\n            exit={{ opacity: 0, scale: 0.98, y: 4 }}\n            // Two speeds, deliberately. Opening is `snappy` because a door\n            // should answer immediately; RESIZING is `gentle`, because the box\n            // changing size under text you are reading is the thing that reads\n            // as sharp. Same spring family, different job.\n            transition={{ ...springs.snappy, layout: springs.gentle }}\n            // Grows from the corner it was opened from: the transform origin is\n            // the launcher, not the middle of the box.\n            style={{ transformOrigin: 'bottom right' }}\n            // THE PANEL IS MUTED GREY, NOT --bg-base. Base is named \"card\n            // surface\" and in dark it is #151517 — near enough to the ground\n            // that the panel read as a black rectangle with a border, the same\n            // fault the launcher disc had and for the same reason: nothing to\n            // be lighter or darker than. --bg-muted is the app's own grey step\n            // (#efefef light, #202023 dark), so the panel reads as a surface\n            // that has come forward. The composer at the bottom then goes the\n            // OTHER way, onto base, so the field looks set INTO the panel\n            // rather than painted on it — which is the whole reason to have\n            // two greys instead of one.\n            className=\"fixed bottom-[calc(148px+env(safe-area-inset-bottom))] right-4 z-[95] flex max-h-[min(620px,70vh)] w-[min(392px,calc(100vw-2rem))] flex-col rounded-[var(--radius-card)] border border-[var(--border-default)] bg-[var(--bg-muted)] shadow-lg lg:bottom-[88px] lg:right-6\"\n          >\n            <div className=\"flex items-center gap-2 border-b border-[var(--border-subtle)] px-4 py-3\">\n              <BoxMark\n                glyph=\"mark\"\n                height={13}\n                className=\"text-[var(--text-primary)]\"\n              />\n              <span className=\"flex-1 text-sm font-medium text-[var(--text-primary)]\">\n                Box\n              </span>\n              {/* History is always offered — the point of it is the\n                  conversations that are NOT on screen — while \"new\" waits for\n                  something to leave. A reset over an intro resets nothing. */}\n              <PotterHistoryMenu />\n              {/* Promote. See `potter-chrome` for why the panel and the screen\n                  are one conversation rather than two surfaces to choose\n                  between. */}\n              <PotterOpenFull onDone={closePotter} />\n              {messages.length > 0 && (\n                <PanelIcon label=\"New conversation\" onClick={clear}>\n                  <Plus />\n                </PanelIcon>\n              )}\n              <PanelIcon label=\"Close Box\" onClick={closePotter}>\n                <X />\n              </PanelIcon>\n            </div>\n\n            <div className=\"min-h-0 flex-1 overflow-y-auto px-4 py-4\">\n              <PotterSurface />\n            </div>\n\n            <div className=\"border-t border-[var(--border-subtle)] p-3\">\n              {/* Base, against the panel's muted grey — the field is set into\n                  the surface, not sitting on it. `surface-interactive` was\n                  wrong here for the same reason it is right on the home: it is\n                  a 40% mix of muted over TRANSPARENT, so on a muted panel it\n                  resolves to the panel's own colour and the composer vanished\n                  into it. */}\n              <div className=\"flex items-center gap-2 rounded-[var(--radius-card)] border border-[var(--border-subtle)] bg-[var(--bg-base)] pl-3 pr-2\">\n                <Input\n                  variant=\"bare\"\n                  autoFocus\n                  value={value}\n                  onChange={(e) => setValue(e.target.value)}\n                  onKeyDown={(e) => e.key === 'Enter' && send()}\n                  aria-label=\"Ask Box\"\n                  placeholder=\"Ask anything\"\n                  className=\"h-9 text-md\"\n                />\n                {/* Blue when there is something to send. It is the only thing\n                    on this row that commits, and colour is how a send button\n                    says it would do something if pressed. */}\n                <button\n                  type=\"button\"\n                  onClick={send}\n                  disabled={!value.trim()}\n                  aria-label=\"Send\"\n                  className={`grid h-7 w-7 shrink-0 place-items-center rounded-full transition-[background-color,color] duration-[var(--motion-fast)] ${\n                    value.trim()\n                      ? 'bg-brand-500 text-white hover:bg-brand-600'\n                      : 'bg-[var(--bg-subtle)] text-[var(--text-muted)]'\n                  }`}\n                >\n                  <ArrowUp />\n                </button>\n              </div>\n              <PotterFallible />\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      {/* A pressable surface, not a `Button`: it is a floating disc carrying a\n          mark, and the mark rotating into an X on open is the affordance.\n\n          THE DISC SITS ON --bg-muted, NOT --bg-base. Base is the page ground\n          on every dashboard screen, so a disc filled with it had nothing to be\n          lighter or darker THAN — it read as a hairline border with a black\n          mark punched through the middle, which is the \"too black\" of it: all\n          the contrast in the control was coming from the glyph alone. Muted is\n          the app's own grey, one step off the ground in both themes (#efefef\n          light, #202023 dark), so the disc separates as a SHAPE and the mark\n          no longer has to do that work by being the darkest thing on screen.\n\n          Which is why the mark then drops to --text-secondary. Full ink was\n          right when the glyph was the only thing visible; against a grey disc\n          it is a smudge, and 72% is where it reads as a mark rather than a\n          hole. Hover takes it back to full ink — the one moment the control\n          should be the darkest thing in the corner is the moment you are\n          pointing at it. */}\n      <motion.button\n        type=\"button\"\n        onClick={() => (open ? closePotter() : openPotter())}\n        aria-label={open ? 'Close Box' : 'Ask Box'}\n        aria-expanded={open}\n        whileTap={{ scale: PRESS_SCALE_LARGE }}\n        transition={springs.snappy}\n        className=\"fixed bottom-[calc(84px+env(safe-area-inset-bottom))] right-4 z-[96] grid h-11 w-11 place-items-center rounded-full border border-[var(--border-default)] bg-[var(--bg-muted)] text-[var(--text-secondary)] shadow-md transition-colors hover:border-[var(--border-strong)] hover:text-[var(--text-primary)] lg:bottom-6 lg:right-6\"\n      >\n        <AnimatePresence mode=\"wait\" initial={false}>\n          <motion.span\n            key={open ? 'x' : 'mark'}\n            initial={{ opacity: 0, rotate: open ? -90 : 90, scale: 0.7 }}\n            animate={{ opacity: 1, rotate: 0, scale: 1 }}\n            exit={{ opacity: 0, rotate: open ? 90 : -90, scale: 0.7 }}\n            transition={{ duration: durations.normal, ease: eases.out }}\n            className=\"grid place-items-center\"\n          >\n            {open ? (\n              <X className=\"size-4\" />\n            ) : (\n              <BoxMark glyph=\"mark\" height={18} />\n            )}\n          </motion.span>\n        </AnimatePresence>\n      </motion.button>\n    </>\n  );\n}\n\nfunction PanelIcon({\n  label,\n  onClick,\n  children,\n}: {\n  label: string;\n  onClick: () => void;\n  children: React.ReactNode;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={label}\n      className=\"grid h-6 w-6 place-items-center rounded-[var(--radius-card)] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]\"\n    >\n      {children}\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/potter/potter-photo-keep.d.ts

@@ -0,0 +1,19 @@
+import type { PotterReply } from './potter-answer';
+/**
+ * The one thing Box can do with a picture it cannot read.
+ *
+ * A TURN THAT ONLY ADMITS A LIMIT IS A DEAD END. "I cannot read pictures" is
+ * true and, on its own, leaves the merchant holding a file and no next step —
+ * which is how a capability that does not exist ends up feeling like a bug in
+ * one that does. `uploadImage` is real and already backs the media picker, so
+ * the picture goes where the business's other pictures go.
+ *
+ * IT SAYS WHAT HAPPENED RATHER THAN JUST STOPPING. Uploading, then kept, then
+ * a link — because a button that silently succeeds leaves you wondering
+ * whether to press it again.
+ */
+export declare function PhotoKeep({ reply, }: {
+    reply: Extract<PotterReply, {
+        kind: 'photo';
+    }>;
+}): import("react").JSX.Element | null;

package/dist/potter/potter-photo-keep.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@withpotter/ui-kit/button";
+import { uploadImage } from "@withpotter/lib/media-service";
+import { usePotter } from "./potter-context";
+function PhotoKeep({
+  reply
+}) {
+  const [state, setState] = useState(
+    "idle"
+  );
+  const router = useRouter();
+  const { pendingPhotos, handPhotos } = usePotter();
+  if (!pendingPhotos.length && state === "idle") return null;
+  if (state === "kept") {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        onClick: () => router.push("/dashboard/business/media"),
+        children: "Open your photographs"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      disabled: state === "saving",
+      onClick: async () => {
+        if (!pendingPhotos.length) return;
+        setState("saving");
+        try {
+          for (const file of pendingPhotos) await uploadImage(file);
+          handPhotos([]);
+          setState("kept");
+        } catch {
+          setState("failed");
+        }
+      },
+      children: state === "saving" ? "Keeping\u2026" : state === "failed" ? "That did not save \u2014 try again" : reply.count === 1 ? "Keep this picture" : `Keep these ${reply.count}`
+    }
+  );
+}
+export {
+  PhotoKeep
+};
+//# sourceMappingURL=potter-photo-keep.js.map

package/dist/potter/potter-photo-keep.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-photo-keep.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { useRouter } from 'next/navigation';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { uploadImage } from '@withpotter/lib/media-service';\nimport { usePotter } from './potter-context';\nimport type { PotterReply } from './potter-answer';\n\n/**\n * The one thing Box can do with a picture it cannot read.\n *\n * A TURN THAT ONLY ADMITS A LIMIT IS A DEAD END. \"I cannot read pictures\" is\n * true and, on its own, leaves the merchant holding a file and no next step —\n * which is how a capability that does not exist ends up feeling like a bug in\n * one that does. `uploadImage` is real and already backs the media picker, so\n * the picture goes where the business's other pictures go.\n *\n * IT SAYS WHAT HAPPENED RATHER THAN JUST STOPPING. Uploading, then kept, then\n * a link — because a button that silently succeeds leaves you wondering\n * whether to press it again.\n */\nexport function PhotoKeep({\n  reply,\n}: {\n  reply: Extract<PotterReply, { kind: 'photo' }>;\n}) {\n  const [state, setState] = useState<'idle' | 'saving' | 'kept' | 'failed'>(\n    'idle',\n  );\n  const router = useRouter();\n  const { pendingPhotos, handPhotos } = usePotter();\n\n  /* Photographs have their OWN slot now, not the spreadsheet's. They shared one\n     while there could only be a single attachment, which was a coincidence:\n     a CSV is on its way to the catalogue importer and these are on their way to\n     the media library. Emptied once used, so a later turn cannot re-upload. */\n  if (!pendingPhotos.length && state === 'idle') return null;\n\n  if (state === 'kept') {\n    return (\n      <Button\n        variant=\"secondary\"\n        onClick={() => router.push('/dashboard/business/media')}\n      >\n        Open your photographs\n      </Button>\n    );\n  }\n\n  return (\n    <Button\n      disabled={state === 'saving'}\n      onClick={async () => {\n        if (!pendingPhotos.length) return;\n        setState('saving');\n        try {\n          /* In sequence rather than all at once. `uploadImage` is a real\n             upload against a merchant's connection, and five in parallel on\n             Nigerian mobile data is five that each take five times as long and\n             fail together. */\n          for (const file of pendingPhotos) await uploadImage(file);\n          handPhotos([]);\n          setState('kept');\n        } catch {\n          setState('failed');\n        }\n      }}\n    >\n      {state === 'saving'\n        ? 'Keeping…'\n        : state === 'failed'\n          ? 'That did not save — try again'\n          : reply.count === 1\n            ? 'Keep this picture'\n            : `Keep these ${reply.count}`}\n    </Button>\n  );\n}\n"],"mappings":";AAyCM;AAvCN,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAgBnB,SAAS,UAAU;AAAA,EACxB;AACF,GAEG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI;AAAA,IACxB;AAAA,EACF;AACA,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,eAAe,WAAW,IAAI,UAAU;AAMhD,MAAI,CAAC,cAAc,UAAU,UAAU,OAAQ,QAAO;AAEtD,MAAI,UAAU,QAAQ;AACpB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM,OAAO,KAAK,2BAA2B;AAAA,QACvD;AAAA;AAAA,IAED;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,UAAU;AAAA,MACpB,SAAS,YAAY;AACnB,YAAI,CAAC,cAAc,OAAQ;AAC3B,iBAAS,QAAQ;AACjB,YAAI;AAKF,qBAAW,QAAQ,cAAe,OAAM,YAAY,IAAI;AACxD,qBAAW,CAAC,CAAC;AACb,mBAAS,MAAM;AAAA,QACjB,QAAQ;AACN,mBAAS,QAAQ;AAAA,QACnB;AAAA,MACF;AAAA,MAEC,oBAAU,WACP,kBACA,UAAU,WACR,uCACA,MAAM,UAAU,IACd,sBACA,cAAc,MAAM,KAAK;AAAA;AAAA,EACnC;AAEJ;","names":[]}

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

@@ -0,0 +1,41 @@
+import type { PotterAttachment } from './potter-attach';
+export interface QueuedMessage {
+    id: string;
+    text: string;
+    /** Everything that was in the composer when this was queued. */
+    attachments?: PotterAttachment[];
+}
+/**
+ * Messages waiting their turn, piled above the composer.
+ *
+ * WHY A QUEUE AT ALL. Box takes a beat — a model call plus a lookup — and
+ * the honest thing to do with a merchant who has a second question in mind is
+ * take it, not grey out the box. Every chat product that disables its composer
+ * while answering is telling you to hold the thought, and people do not: they
+ * type it anyway, into a dead field, and lose it.
+ *
+ * THE PILE IS A PILE, not a list. Closed, it is a fixed 60px of chrome no
+ * matter how many are waiting — the front card readable, two more peeking
+ * behind it at diminishing scale, the rest flat underneath. That is the whole
+ * point of the Sonner shape John sent: a queue must not be able to eat the
+ * conversation it is queued against. Open it on hover and it fans into rows
+ * you can actually act on.
+ *
+ * THE FRONT CARD IS NEXT. Ordering is FIFO and visible: `queue[0]` sits on top
+ * and is what leaves when Box finishes. A queue whose order you cannot see
+ * is a queue you cannot trust with the question you care about.
+ *
+ * EVERY CARD IS EDITABLE AND REMOVABLE, because a queued message is a thought
+ * you had before you saw the answer to the last one — and half of them stop
+ * being worth asking. Double-click (or the pencil) puts it back in the composer
+ * where it can be rewritten; the × drops it.
+ */
+export declare function PotterQueue({ queue, open, onOpenChange, onEdit, onRemove, }: {
+    queue: QueuedMessage[];
+    /** Hovered — the pile is fanned out. */
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Back into the composer, and out of the queue. */
+    onEdit: (item: QueuedMessage) => void;
+    onRemove: (id: string) => void;
+}): import("react").JSX.Element | null;

package/dist/potter/potter-queue.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+import { Pencil, X } from "lucide-react";
+import { PRESS_SCALE_LARGE, springs } from "@withpotter/lib/motion";
+import { PotterAttachmentChip } from "./potter-attachment-chip";
+const CARD_H = 36;
+const GAP = 6;
+const PEEK = 2;
+function PotterQueue({
+  queue,
+  open,
+  onOpenChange,
+  onEdit,
+  onRemove
+}) {
+  if (queue.length === 0) return null;
+  const height = open ? queue.length * (CARD_H + GAP) : CARD_H + Math.min(queue.length - 1, PEEK) * 10;
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      onHoverStart: () => onOpenChange(true),
+      onHoverEnd: () => onOpenChange(false),
+      animate: { height },
+      transition: springs.gentle,
+      className: "relative mb-2",
+      "aria-label": `${queue.length} message${queue.length === 1 ? "" : "s"} waiting`,
+      children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: queue.map((item, i) => {
+        const peek = Math.min(i, PEEK);
+        return /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { opacity: 0, y: 8 },
+            animate: open ? { y: -i * (CARD_H + GAP), scale: 1, opacity: 1 } : {
+              y: -peek * 10,
+              scale: 1 - peek * 0.04,
+              // Past the peek the cards are still there and still
+              // counted; they are simply not drawn, because four
+              // stacked edges is texture rather than information.
+              opacity: i <= PEEK ? 1 : 0
+            },
+            exit: { opacity: 0, scale: 0.96 },
+            transition: springs.snappy,
+            style: {
+              height: CARD_H,
+              transformOrigin: "bottom center",
+              zIndex: queue.length - i
+            },
+            onDoubleClick: () => onEdit(item),
+            className: "surface-pinned absolute inset-x-0 bottom-0 flex items-center gap-2 rounded-[var(--radius-card)] px-3",
+            children: [
+              item.attachments?.map((a) => /* @__PURE__ */ jsx(
+                PotterAttachmentChip,
+                {
+                  attachment: a,
+                  compact: true
+                },
+                a.kind === "image" ? a.url : a.file.name
+              )),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-[var(--text-secondary)]", children: item.text }),
+              open && /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  motion.button,
+                  {
+                    type: "button",
+                    onClick: () => onEdit(item),
+                    "aria-label": `Edit "${item.text.slice(0, 40)}"`,
+                    whileTap: { scale: PRESS_SCALE_LARGE },
+                    transition: springs.snappy,
+                    className: "grid size-6 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(Pencil, { className: "size-[13px]" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  motion.button,
+                  {
+                    type: "button",
+                    onClick: () => onRemove(item.id),
+                    "aria-label": `Remove "${item.text.slice(0, 40)}"`,
+                    whileTap: { scale: PRESS_SCALE_LARGE },
+                    transition: springs.snappy,
+                    className: "grid size-6 place-items-center rounded-[var(--radius-card)] text-[var(--text-tertiary)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--error-bg)] hover:text-[var(--error)]",
+                    children: /* @__PURE__ */ jsx(X, { className: "size-[13px]" })
+                  }
+                )
+              ] })
+            ]
+          },
+          item.id
+        );
+      }) })
+    }
+  );
+}
+export {
+  PotterQueue
+};
+//# sourceMappingURL=potter-queue.js.map