@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-queue.tsx"],"sourcesContent":["'use client';\n\nimport { AnimatePresence, motion } from 'motion/react';\nimport { Pencil, X } from 'lucide-react';\nimport { PRESS_SCALE_LARGE, springs } from '@withpotter/lib/motion';\nimport { PotterAttachmentChip } from './potter-attachment-chip';\nimport type { PotterAttachment } from './potter-attach';\n\nexport interface QueuedMessage {\n  id: string;\n  text: string;\n  /** Everything that was in the composer when this was queued. */\n  attachments?: PotterAttachment[];\n}\n\n/** One card's height, and the gap between them when the pile is open. */\nconst CARD_H = 36;\nconst GAP = 6;\n/** How many cards peek out of a closed pile. Past this they are stacked flat. */\nconst PEEK = 2;\n\n/**\n * Messages waiting their turn, piled above the composer.\n *\n * WHY A QUEUE AT ALL. Box takes a beat — a model call plus a lookup — and\n * the honest thing to do with a merchant who has a second question in mind is\n * take it, not grey out the box. Every chat product that disables its composer\n * while answering is telling you to hold the thought, and people do not: they\n * type it anyway, into a dead field, and lose it.\n *\n * THE PILE IS A PILE, not a list. Closed, it is a fixed 60px of chrome no\n * matter how many are waiting — the front card readable, two more peeking\n * behind it at diminishing scale, the rest flat underneath. That is the whole\n * point of the Sonner shape John sent: a queue must not be able to eat the\n * conversation it is queued against. Open it on hover and it fans into rows\n * you can actually act on.\n *\n * THE FRONT CARD IS NEXT. Ordering is FIFO and visible: `queue[0]` sits on top\n * and is what leaves when Box finishes. A queue whose order you cannot see\n * is a queue you cannot trust with the question you care about.\n *\n * EVERY CARD IS EDITABLE AND REMOVABLE, because a queued message is a thought\n * you had before you saw the answer to the last one — and half of them stop\n * being worth asking. Double-click (or the pencil) puts it back in the composer\n * where it can be rewritten; the × drops it.\n */\nexport function PotterQueue({\n  queue,\n  open,\n  onOpenChange,\n  onEdit,\n  onRemove,\n}: {\n  queue: QueuedMessage[];\n  /** Hovered — the pile is fanned out. */\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Back into the composer, and out of the queue. */\n  onEdit: (item: QueuedMessage) => void;\n  onRemove: (id: string) => void;\n}) {\n  if (queue.length === 0) return null;\n\n  const height = open\n    ? queue.length * (CARD_H + GAP)\n    : CARD_H + Math.min(queue.length - 1, PEEK) * 10;\n\n  return (\n    <motion.div\n      onHoverStart={() => onOpenChange(true)}\n      onHoverEnd={() => onOpenChange(false)}\n      animate={{ height }}\n      transition={springs.gentle}\n      className=\"relative mb-2\"\n      aria-label={`${queue.length} message${queue.length === 1 ? '' : 's'} waiting`}\n    >\n      <AnimatePresence initial={false}>\n        {queue.map((item, i) => {\n          const peek = Math.min(i, PEEK);\n          return (\n            <motion.div\n              key={item.id}\n              initial={{ opacity: 0, y: 8 }}\n              animate={\n                open\n                  ? { y: -i * (CARD_H + GAP), scale: 1, opacity: 1 }\n                  : {\n                      y: -peek * 10,\n                      scale: 1 - peek * 0.04,\n                      // Past the peek the cards are still there and still\n                      // counted; they are simply not drawn, because four\n                      // stacked edges is texture rather than information.\n                      opacity: i <= PEEK ? 1 : 0,\n                    }\n              }\n              exit={{ opacity: 0, scale: 0.96 }}\n              transition={springs.snappy}\n              style={{\n                height: CARD_H,\n                transformOrigin: 'bottom center',\n                zIndex: queue.length - i,\n              }}\n              onDoubleClick={() => onEdit(item)}\n              className=\"surface-pinned absolute inset-x-0 bottom-0 flex items-center gap-2 rounded-[var(--radius-card)] px-3\"\n            >\n              {item.attachments?.map((a) => (\n                <PotterAttachmentChip\n                  key={a.kind === 'image' ? a.url : a.file.name}\n                  attachment={a}\n                  compact\n                />\n              ))}\n\n              <span className=\"min-w-0 flex-1 truncate text-sm text-[var(--text-secondary)]\">\n                {item.text}\n              </span>\n\n              {/* Only on the open pile: on a closed one they would be three\n                  targets stacked on top of each other. */}\n              {open && (\n                <span className=\"flex shrink-0 items-center gap-1\">\n                  <motion.button\n                    type=\"button\"\n                    onClick={() => onEdit(item)}\n                    aria-label={`Edit \"${item.text.slice(0, 40)}\"`}\n                    whileTap={{ scale: PRESS_SCALE_LARGE }}\n                    transition={springs.snappy}\n                    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)]\"\n                  >\n                    <Pencil className=\"size-[13px]\" />\n                  </motion.button>\n                  <motion.button\n                    type=\"button\"\n                    onClick={() => onRemove(item.id)}\n                    aria-label={`Remove \"${item.text.slice(0, 40)}\"`}\n                    whileTap={{ scale: PRESS_SCALE_LARGE }}\n                    transition={springs.snappy}\n                    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)]\"\n                  >\n                    <X className=\"size-[13px]\" />\n                  </motion.button>\n                </span>\n              )}\n            </motion.div>\n          );\n        })}\n      </AnimatePresence>\n    </motion.div>\n  );\n}\n"],"mappings":";AA0GgB,cAcA,YAdA;AAxGhB,SAAS,iBAAiB,cAAc;AACxC,SAAS,QAAQ,SAAS;AAC1B,SAAS,mBAAmB,eAAe;AAC3C,SAAS,4BAA4B;AAWrC,MAAM,SAAS;AACf,MAAM,MAAM;AAEZ,MAAM,OAAO;AA2BN,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QAAM,SAAS,OACX,MAAM,UAAU,SAAS,OACzB,SAAS,KAAK,IAAI,MAAM,SAAS,GAAG,IAAI,IAAI;AAEhD,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,YAAY,MAAM,aAAa,KAAK;AAAA,MACpC,SAAS,EAAE,OAAO;AAAA,MAClB,YAAY,QAAQ;AAAA,MACpB,WAAU;AAAA,MACV,cAAY,GAAG,MAAM,MAAM,WAAW,MAAM,WAAW,IAAI,KAAK,GAAG;AAAA,MAEnE,8BAAC,mBAAgB,SAAS,OACvB,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,cAAM,OAAO,KAAK,IAAI,GAAG,IAAI;AAC7B,eACE;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YAEC,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,YAC5B,SACE,OACI,EAAE,GAAG,CAAC,KAAK,SAAS,MAAM,OAAO,GAAG,SAAS,EAAE,IAC/C;AAAA,cACE,GAAG,CAAC,OAAO;AAAA,cACX,OAAO,IAAI,OAAO;AAAA;AAAA;AAAA;AAAA,cAIlB,SAAS,KAAK,OAAO,IAAI;AAAA,YAC3B;AAAA,YAEN,MAAM,EAAE,SAAS,GAAG,OAAO,KAAK;AAAA,YAChC,YAAY,QAAQ;AAAA,YACpB,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,QAAQ,MAAM,SAAS;AAAA,YACzB;AAAA,YACA,eAAe,MAAM,OAAO,IAAI;AAAA,YAChC,WAAU;AAAA,YAET;AAAA,mBAAK,aAAa,IAAI,CAAC,MACtB;AAAA,gBAAC;AAAA;AAAA,kBAEC,YAAY;AAAA,kBACZ,SAAO;AAAA;AAAA,gBAFF,EAAE,SAAS,UAAU,EAAE,MAAM,EAAE,KAAK;AAAA,cAG3C,CACD;AAAA,cAED,oBAAC,UAAK,WAAU,gEACb,eAAK,MACR;AAAA,cAIC,QACC,qBAAC,UAAK,WAAU,oCACd;AAAA;AAAA,kBAAC,OAAO;AAAA,kBAAP;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS,MAAM,OAAO,IAAI;AAAA,oBAC1B,cAAY,SAAS,KAAK,KAAK,MAAM,GAAG,EAAE,CAAC;AAAA,oBAC3C,UAAU,EAAE,OAAO,kBAAkB;AAAA,oBACrC,YAAY,QAAQ;AAAA,oBACpB,WAAU;AAAA,oBAEV,8BAAC,UAAO,WAAU,eAAc;AAAA;AAAA,gBAClC;AAAA,gBACA;AAAA,kBAAC,OAAO;AAAA,kBAAP;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS,MAAM,SAAS,KAAK,EAAE;AAAA,oBAC/B,cAAY,WAAW,KAAK,KAAK,MAAM,GAAG,EAAE,CAAC;AAAA,oBAC7C,UAAU,EAAE,OAAO,kBAAkB;AAAA,oBACrC,YAAY,QAAQ;AAAA,oBACpB,WAAU;AAAA,oBAEV,8BAAC,KAAE,WAAU,eAAc;AAAA;AAAA,gBAC7B;AAAA,iBACF;AAAA;AAAA;AAAA,UA5DG,KAAK;AAAA,QA8DZ;AAAA,MAEJ,CAAC,GACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1 @@
+export declare function PotterScreen(): import("react").JSX.Element;

package/dist/potter/potter-screen.js

@@ -0,0 +1,194 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { motion, useReducedMotion } from "motion/react";
+import { ArrowLeft, SquarePen } from "lucide-react";
+import { useDocumentTitle } from "@withpotter/lib/document-title";
+import { usePotter } from "./potter-context";
+import { usePotterTurn } from "./use-potter-turn";
+import { PotterSurface } from "./potter-surface";
+import { PotterHistoryMenu } from "./potter-conversation";
+import { PotterComposer } from "./potter-composer";
+import { PotterFallible } from "./potter-chrome";
+import { titleFor } from "./potter-history";
+import { PotterQueue } from "./potter-queue";
+import { ActionRail, ActionRailItem } from "@withpotter/ui-kit";
+import { PRESS_SCALE_LARGE, durations, eases, springs } from "@withpotter/lib/motion";
+function PotterTitle() {
+  return /* @__PURE__ */ jsx(
+    motion.h2,
+    {
+      initial: { opacity: 0, y: 6 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: durations.normal, ease: eases.out },
+      className: "text-center text-2xl text-[var(--text-primary)]",
+      children: "What do you need to know?"
+    }
+  );
+}
+function PotterScreen() {
+  const router = useRouter();
+  const { messages, newThread } = usePotter();
+  const {
+    draft,
+    setDraft,
+    attachments,
+    attach,
+    removeAttachment,
+    queue,
+    setQueue,
+    queueOpen,
+    setQueueOpen,
+    editQueued,
+    submit,
+    stop,
+    busy
+  } = usePotterTurn();
+  const reduce = useReducedMotion();
+  const title = useMemo(
+    () => messages.length ? titleFor(messages) : "New conversation",
+    [messages]
+  );
+  useDocumentTitle(title);
+  const startNew = () => {
+    newThread();
+  };
+  useEffect(() => {
+    router.prefetch("/dashboard");
+  }, [router]);
+  const empty = messages.length === 0;
+  const composer = /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 12 },
+      animate: { opacity: 1, y: 0 },
+      transition: { ...springs.gentle, delay: 0.06 },
+      className: "relative",
+      children: [
+        /* @__PURE__ */ jsx(
+          PotterQueue,
+          {
+            queue,
+            open: queueOpen,
+            onOpenChange: setQueueOpen,
+            onEdit: editQueued,
+            onRemove: (id) => setQueue((q) => q.filter((x) => x.id !== id))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PotterComposer,
+          {
+            value: draft,
+            onValueChange: setDraft,
+            onSubmit: submit,
+            onAttach: (file) => {
+              void attach(file);
+            },
+            attachments,
+            onRemoveAttachment: removeAttachment,
+            busy,
+            onStop: stop,
+            minRows: empty ? 2 : 3,
+            placeholder: empty ? "Ask Box" : void 0,
+            history: messages.filter((m) => m.role === "you" && m.text).map((m) => m.text)
+          }
+        ),
+        /* @__PURE__ */ jsx(PotterFallible, {})
+      ]
+    }
+  );
+  return (
+    /* A flex COLUMN that fills the shell, so the composer is pinned by layout
+           rather than by `position: fixed` — a fixed composer would sit over the
+           dashboard shell's own furniture on every viewport that disagreed with the
+           guess.
+    
+           `h-full` did nothing at first and the reason is worth writing down: the
+           wrapper between this and the shell's content container is `display:
+           block` with `height: auto`, so a percentage height had nothing to resolve
+           against and collapsed to the content — the composer landed under the last
+           answer with 300px of empty page below it. `flex-1` was no better, because
+           a block parent does not lay its children out as flex items.
+    
+           The fix is upstream. `ownsHeight` in `dashboard/layout.tsx` now puts this
+           route on the same branch the editor uses, which makes that wrapper a flex
+           item with a definite used height — and a definite parent height is
+           exactly what `h-full` needs. */
+    /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+      /* @__PURE__ */ jsxs(
+        motion.header,
+        {
+          initial: { opacity: 0, y: -6 },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: 0.32, ease: eases.settle },
+          className: "flex items-center gap-2 px-4 py-3",
+          children: [
+            /* @__PURE__ */ jsx(
+              motion.button,
+              {
+                type: "button",
+                onClick: () => router.push("/dashboard"),
+                "aria-label": "Back to home",
+                whileTap: { scale: PRESS_SCALE_LARGE },
+                transition: springs.snappy,
+                className: "-ml-1 grid size-7 shrink-0 place-items-center rounded-[var(--radius-card)] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]",
+                children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.h1,
+              {
+                initial: { opacity: 0, y: 4 },
+                animate: { opacity: 1, y: 0 },
+                transition: { duration: 0.24, ease: eases.out },
+                className: "truncate text-sm font-medium text-[var(--text-primary)]",
+                children: title
+              },
+              title
+            ),
+            /* @__PURE__ */ jsxs(ActionRail, { "aria-label": "Conversation", className: "ml-auto shrink-0", children: [
+              /* @__PURE__ */ jsx(PotterHistoryMenu, { rail: true }),
+              /* @__PURE__ */ jsx(
+                ActionRailItem,
+                {
+                  icon: SquarePen,
+                  label: "New conversation",
+                  onClick: startNew
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      empty && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex-1" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: empty ? "shrink-0 px-4" : "min-h-0 flex-1 overflow-y-auto px-4",
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: empty ? "mx-auto w-full max-w-[560px]" : "mx-auto w-full max-w-[820px] py-4",
+              children: /* @__PURE__ */ jsx(PotterSurface, { emptyState: /* @__PURE__ */ jsx(PotterTitle, {}), consumeSeed: false })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          layout: !reduce,
+          transition: reduce ? { duration: 0 } : springs.gentle,
+          className: empty ? "mx-auto w-full max-w-[560px] shrink-0 px-4 pt-4" : "mx-auto w-full max-w-[820px] shrink-0 px-4 pb-4 pt-2",
+          children: composer
+        }
+      ),
+      empty && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex-1" })
+    ] })
+  );
+}
+export {
+  PotterScreen
+};
+//# sourceMappingURL=potter-screen.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-screen.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo } from 'react';\nimport { useRouter } from 'next/navigation';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { ArrowLeft, SquarePen } from 'lucide-react';\nimport { useDocumentTitle } from '@withpotter/lib/document-title';\nimport { usePotter } from './potter-context';\nimport { usePotterTurn } from './use-potter-turn';\nimport { PotterSurface } from './potter-surface';\nimport { PotterHistoryMenu } from './potter-conversation';\nimport { PotterComposer } from './potter-composer';\nimport { PotterFallible } from './potter-chrome';\nimport { titleFor } from './potter-history';\nimport { PotterQueue } from './potter-queue';\nimport { ActionRail, ActionRailItem } from '@withpotter/ui-kit';\nimport { PRESS_SCALE_LARGE, durations, eases, springs } from '@withpotter/lib/motion';\n\n/**\n * The conversation, as a SCREEN.\n *\n * John, pointing at Linear's agent view: *\"i just wanted a screen like this\"*,\n * and then, on where it comes from: *\"when you start a conversation and you\n * click on send it opens this screen\"*. So the home's bar is where you begin\n * and this is where it lands — send, and the thread takes the page.\n *\n * IT IS NOT THE DOCK COMING BACK. That was a 400px drawer fixed to the right\n * edge of every screen with a vertical tab clinging to the edge when it was\n * shut, and it went on John's call — *\"you added an ai chat modal thingy i dont\n * like it remove\"*. The objection was to furniture that is on screen whether or\n * not you are using it. This is the opposite: a place you go, that is only the\n * conversation, and that you leave by going somewhere else.\n *\n * THE SHAPE, measured off theirs rather than eyeballed:\n *\n *   column     821px, and the SAME width from the divider down to the composer.\n *              Nothing on this screen is a different width from anything else.\n *   turns      15px / 24px, weight 450, -0.1px tracking — and BOTH speakers get\n *              the same type. Their agent's answer is not larger; it simply has\n *              no chip behind it. `PotterThread` already draws exactly this,\n *              which is why none of it is re-implemented here.\n *   composer   pinned at the foot, three lines tall, `Reply…`.\n *\n * THE TRANSCRIPT SCROLLS, THE COMPOSER DOES NOT. `min-h-0` on the scroller is\n * the load-bearing class and it looks like noise: a flex child's default\n * `min-height: auto` refuses to shrink below its content, so without it the\n * column grows to the height of the whole conversation and pushes the composer\n * off the bottom of the window. The bug reads as \"the composer disappears once\n * you have asked four things\", which sounds like a z-index problem and is not.\n */\n/**\n * What an empty conversation says, in one line.\n *\n * It replaced a sentence of voice — *\"Ask about your business, or tell Box\n * what you sell.\"* — and three example questions, on John's call: *\"also remove\n * this … replace with a title text\"*.\n *\n * THE EXAMPLES WERE DOING REAL WORK and it is worth being honest about what\n * goes with them. They were the only thing on the screen that said what Box\n * can actually answer, in words you could press, and the intro's own docblock\n * argued at length that they carried a load a paragraph could not. What they\n * cost was the screen: four rows of grey text above the box, so the first thing\n * you met was a menu rather than a place to type. The door on the home still\n * rotates real questions as its placeholder, which is where a merchant meets\n * them now — before they have decided to come here, rather than after.\n *\n * A QUESTION, not a label. \"Ask Box\" is what the door says and repeating it\n * here would be the surface introducing itself to someone already inside it;\n * an eyebrow like \"Box\" would be a category. It ships alone.\n *\n * 20px, NOT the app's 18px page title, and that is a deliberate exception John\n * made after seeing 18 / 22 / 26 / 30 rendered against the real box. The 18px\n * law is about a title NAMING a list or a record from the top-left, with the\n * data under it doing the work. Here there is no page frame and no data: the\n * line is centred on an empty screen above a single box, so it is not labelling\n * the content, it IS the content — and at 18 it read as a caption that had lost\n * its paragraph. `--text-2xl`, which is a step the scale already has, rather\n * than a hand-typed pixel.\n */\nfunction PotterTitle() {\n  return (\n    <motion.h2\n      initial={{ opacity: 0, y: 6 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: durations.normal, ease: eases.out }}\n      className=\"text-center text-2xl text-[var(--text-primary)]\"\n    >\n      What do you need to know?\n    </motion.h2>\n  );\n}\n\nexport function PotterScreen() {\n  const router = useRouter();\n  const { messages, newThread } = usePotter();\n  const {\n    draft,\n    setDraft,\n    attachments,\n    attach,\n    removeAttachment,\n    queue,\n    setQueue,\n    queueOpen,\n    setQueueOpen,\n    editQueued,\n    submit,\n    stop,\n    busy,\n  } = usePotterTurn();\n  const reduce = useReducedMotion();\n\n  const title = useMemo(\n    () => (messages.length ? titleFor(messages) : 'New conversation'),\n    [messages],\n  );\n\n  /**\n   * THE TAB IS NAMED AFTER THE CONVERSATION, not after the route.\n   *\n   * Every other screen takes its tab name from a page frame or from the sidebar\n   * row that owns it, and this one has neither — it is not a list, not a record,\n   * and deliberately not in the nav. What it has is a better name than either:\n   * `titleFor` derives one from the first thing the merchant said, which is what\n   * the history list shows and what somebody scanning three tabs needs to read.\n   */\n  useDocumentTitle(title);\n\n  /**\n   * A new conversation stays HERE rather than going back to the home. Theirs\n   * does the same: the composer empties and the thread clears without leaving\n   * the section. Bouncing to the home would make \"start another one\" cost a\n   * navigation each way, and the home's bar is a door, not the room.\n   */\n  const startNew = () => {\n    newThread();\n  };\n\n  /**\n   * THE WAY HOME IS FETCHED BEFORE IT IS ASKED FOR.\n   *\n   * John: *\"when i clcik on the back button it takes so mch time to go back\n   * home fix this\"*. It was a bare `router.push`, which starts from nothing:\n   * the click is the first moment Next hears about `/dashboard`, so the RSC\n   * payload for the busiest page in the app is requested, waited for, and only\n   * then rendered — with the merchant looking at the old screen throughout.\n   *\n   * `prefetch` on mount asks for it while they are still reading the answer, so\n   * the press has the payload already. It is what `<Link>` does on hover, done\n   * on arrival instead: there is exactly one destination from this screen and\n   * it is known the moment the screen opens, so waiting for a pointer to\n   * approach the arrow buys nothing.\n   *\n   * It does NOT make a cold dev compile instant — nothing does, the route is\n   * built on first request. This is the production path.\n   */\n  useEffect(() => {\n    router.prefetch('/dashboard');\n  }, [router]);\n\n  /** Empty means no transcript to sit above — see the layout note below. */\n  const empty = messages.length === 0;\n\n  /* THE COMPOSER RISES INTO PLACE, from below, which is where it lives. The\n     screen skips `PageTransition` — it has to, a transition wrapper is one more\n     auto-height box between it and the shell — so without this it would arrive\n     on a frame, and John's rule is that nothing snaps. Coming up from its own\n     edge also says where it is anchored, which a fade would not. */\n  const composer = (\n    <motion.div\n      initial={{ opacity: 0, y: 12 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ ...springs.gentle, delay: 0.06 }}\n      /* `relative` so the pile can sit against this box rather than against\n         whichever ancestor happened to be positioned. */\n      className=\"relative\"\n    >\n      <PotterQueue\n        queue={queue}\n        open={queueOpen}\n        onOpenChange={setQueueOpen}\n        onEdit={editQueued}\n        onRemove={(id) => setQueue((q) => q.filter((x) => x.id !== id))}\n      />\n      <PotterComposer\n        value={draft}\n        onValueChange={setDraft}\n        onSubmit={submit}\n        onAttach={(file) => {\n          void attach(file);\n        }}\n        attachments={attachments}\n        onRemoveAttachment={removeAttachment}\n        busy={busy}\n        onStop={stop}\n        /* Smaller while it is the only object on the screen, its own size once\n           it is the floor of a conversation. Both are floors — it still grows\n           to whatever you type. */\n        minRows={empty ? 2 : 3}\n        placeholder={empty ? 'Ask Box' : undefined}\n        history={messages\n          .filter((m) => m.role === 'you' && m.text)\n          .map((m) => m.text)}\n      />\n      <PotterFallible />\n    </motion.div>\n  );\n\n  return (\n    /* A flex COLUMN that fills the shell, so the composer is pinned by layout\n       rather than by `position: fixed` — a fixed composer would sit over the\n       dashboard shell's own furniture on every viewport that disagreed with the\n       guess.\n\n       `h-full` did nothing at first and the reason is worth writing down: the\n       wrapper between this and the shell's content container is `display:\n       block` with `height: auto`, so a percentage height had nothing to resolve\n       against and collapsed to the content — the composer landed under the last\n       answer with 300px of empty page below it. `flex-1` was no better, because\n       a block parent does not lay its children out as flex items.\n\n       The fix is upstream. `ownsHeight` in `dashboard/layout.tsx` now puts this\n       route on the same branch the editor uses, which makes that wrapper a flex\n       item with a definite used height — and a definite parent height is\n       exactly what `h-full` needs. */\n    <div className=\"flex h-full min-h-0 flex-col\">\n      {/* The header row. Theirs carries the thread's name, a star and an\n          overflow; ours carries the name, the archive and a way to start\n          another — the three that do something here. The title is 18px like\n          every other page title in the app, and it ships alone. */}\n      <motion.header\n        initial={{ opacity: 0, y: -6 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.32, ease: eases.settle }}\n        className=\"flex items-center gap-2 px-4 py-3\"\n      >\n        {/* THE WAY OUT, and it had to be drawn.\n\n            The first version had none, on the reasoning that the sidebar is\n            still there and a second exit would make the page read as a modal.\n            That reasoning assumed a sidebar. John, from a screen with the rail\n            collapsed: *\"how can i go back to the hompage from here\"* — and the\n            answer was that you could not, which is the one thing a screen may\n            never be.\n\n            It goes HOME rather than calling `router.back()`. Back is wherever\n            you happened to come from, which for a deep link or a reload is\n            outside the app entirely; home is the one destination that is always\n            correct and always exists. */}\n        <motion.button\n          type=\"button\"\n          onClick={() => router.push('/dashboard')}\n          aria-label=\"Back to home\"\n          whileTap={{ scale: PRESS_SCALE_LARGE }}\n          transition={springs.snappy}\n          className=\"-ml-1 grid size-7 shrink-0 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          <ArrowLeft className=\"size-4\" />\n        </motion.button>\n\n        {/* THE TITLE CHANGES AS THE CONVERSATION DOES — it is derived from the\n            first thing you said, so it is \"New conversation\" until you say\n            something and then it is your question. Keyed on the text so it\n            crossfades rather than swapping mid-sentence: this is one of the few\n            places where the two states are genuinely different content rather\n            than one control changing, which is what earns the swap. */}\n        {/* 13px, NOT the app's 18px page title. John: *\"this is too big\"*.\n\n            The 18px rule is about page titles — the name of a list or a record,\n            which is the largest thing on those screens because it names what\n            you came for. Here the largest thing must be the conversation. This\n            line is chrome: it names which thread you are in, the way the\n            launcher panel's own header does at exactly this size, and the two\n            now agree rather than describing the same object two ways. */}\n        <motion.h1\n          key={title}\n          initial={{ opacity: 0, y: 4 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.24, ease: eases.out }}\n          className=\"truncate text-sm font-medium text-[var(--text-primary)]\"\n        >\n          {title}\n        </motion.h1>\n        {/* THE TWO THINGS YOU DO TO A CONVERSATION rather than inside one,\n            in a rail that says their names when you reach for them.\n\n            John, holding up a subtle-tabs reference against the bare glyphs\n            that were here: *\"lets do it like this instead just look at it and\n            lets create ours\"*. Ours is `ActionRail`, and the docblock there is\n            where the reasoning lives — the short version is that one chip\n            travels between them and the word grows out of the icon under the\n            pointer, but nothing is ever SELECTED, because these are actions.\n            A tab treatment would have claimed one of the two is the state you\n            are in, and neither is. */}\n        <ActionRail aria-label=\"Conversation\" className=\"ml-auto shrink-0\">\n          <PotterHistoryMenu rail />\n          <ActionRailItem\n            icon={SquarePen}\n            label=\"New conversation\"\n            onClick={startNew}\n          />\n        </ActionRail>\n      </motion.header>\n\n      {/* AN EMPTY SCREEN CENTRES; A CONVERSATION PINS. John, on the first\n          version: *\"this is a terrible placement\"* — and it was. The intro sat\n          jammed against the top-left of a full-height screen, the composer was\n          welded to the bottom edge, and between them was a void the height of\n          the window. Two things at opposite ends of nothing.\n\n          Linear's empty chat puts the box in the MIDDLE of the page and their\n          thread pins it to the foot, which is not an inconsistency: an empty\n          screen has no content to sit above, so the composer stops being a\n          footer and becomes the only object on it. The moment there is a\n          transcript, the composer has something to be the bottom OF.\n\n          So the layout follows the state rather than staying still, and the\n          composer itself is written once and placed twice. */}\n      {/* THE COMPOSER IS MOUNTED ONCE AND MOVES, which is the whole point.\n\n          John: *\"when you type in the chatbx and click on send the chat box\n          epands to its normally state while it goes below where its meant to\n          be\"*. That is a `layout` animation and it only works on ONE element —\n          the earlier shape wrote the composer once and PLACED it twice, in two\n          arms of a ternary, so sending unmounted it from the middle of the page\n          and mounted a new one at the foot. Same markup, different position in\n          the tree: React tears it down, the box you were typing in loses focus,\n          and the move you asked for cannot happen because there is nothing that\n          travelled.\n\n          So the column is one tree in both states and only the wrapper's\n          constraints change: 560 → 820 wide, two lines → three, and a pair of\n          flex spacers that hold it in the middle of an empty screen and are not\n          there once a transcript needs the room. `layout` interpolates the\n          difference, so it widens as it drops. */}\n      {/* THE POINTER WEARS THE MARK while there is nothing to read.\n\n          On only while the screen is empty. A conversation is text you are\n          reading, and a brand object orbiting your cursor over a paragraph\n          about who owes you money is decoration standing in front of the\n          answer. Empty, it is the only thing on the page that moves.\n\n          THE COLLAGE DESK THAT USED TO COME WITH IT IS GONE — twelve draggable\n          objects that lived behind the home's ask bar, unreachable the moment\n          that bar became a door. Moved here they landed ON the composer and on\n          the line under it: a pressed flower through \"Box can get things\n          wrong\", which is the one sentence on this screen that has to stay\n          legible. It is in the history if a surface is ever built for it. */}\n\n      {empty && <div aria-hidden className=\"flex-1\" />}\n\n      <div\n        className={\n          empty ? 'shrink-0 px-4' : 'min-h-0 flex-1 overflow-y-auto px-4'\n        }\n      >\n        {/* `PotterSurface` stays mounted in BOTH states rather than being\n            swapped for the title, because it is also what consumes a seeded\n            question on its next effect. Rendering the title in its place would\n            have moved a layout decision into a component that owns a piece of\n            the ask lifecycle, and the seed would have been dropped on exactly\n            the screen that exists to answer it. */}\n        <div\n          className={\n            empty\n              ? 'mx-auto w-full max-w-[560px]'\n              : 'mx-auto w-full max-w-[820px] py-4'\n          }\n        >\n          <PotterSurface emptyState={<PotterTitle />} consumeSeed={false} />\n        </div>\n      </div>\n\n      <motion.div\n        layout={!reduce}\n        transition={reduce ? { duration: 0 } : springs.gentle}\n        className={\n          empty\n            ? 'mx-auto w-full max-w-[560px] shrink-0 px-4 pt-4'\n            : 'mx-auto w-full max-w-[820px] shrink-0 px-4 pb-4 pt-2'\n        }\n      >\n        {composer}\n      </motion.div>\n\n      {empty && <div aria-hidden className=\"flex-1\" />}\n\n      {/* No back link, deliberately. The sidebar is still there and still says\n          where everything is; a second way out drawn on the screen would be\n          this page claiming to be a modal. */}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/potter/potter-sheet-chip.d.ts

@@ -0,0 +1,30 @@
+import type { AttachedSheet } from './potter-attach';
+/**
+ * An attached spreadsheet, sitting in the composer until it is sent.
+ *
+ * WHY THIS IS NOT A THUMBNAIL, which is what every other composer would draw
+ * here. A thumbnail answers "which image did I pick" — a real question about a
+ * picture, and the only one you can answer about a picture without opening it.
+ * A spreadsheet has no picture, and the two things usually offered instead are
+ * both useless: a generic file glyph says nothing at all, and the filename says
+ * almost nothing, because the file a merchant is about to send is called
+ * `export (3).csv`.
+ *
+ * The two questions somebody actually has before pressing send are "is this the
+ * right file" and "will it work". Both are answerable, for free, before the
+ * model is involved: `readSheet` has already counted the rows and run the
+ * catalogue's own `guessMapping` over the headers. So the chip shows the row
+ * count and the columns we RECOGNISED — which is the part that decides whether
+ * the import works — and says so in the merchant's words rather than the file's.
+ *
+ * A FILE WE CANNOT USE SAYS SO HERE, not after sending. `readSheet` already
+ * produces the sentence; showing it in the composer means the merchant fixes
+ * the file instead of spending a turn to be told about it.
+ */
+export declare function PotterSheetChip({ sheet, onRemove, 
+/** Compact: inside a queued card, where there is one line to spend. */
+compact, }: {
+    sheet: AttachedSheet;
+    onRemove?: () => void;
+    compact?: boolean;
+}): import("react").JSX.Element;

package/dist/potter/potter-sheet-chip.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { AlertTriangle, X } from "lucide-react";
+import { IMPORT_FIELDS } from "@withpotter/pages-commerce/dashboard/(commerce)/catalog/_hooks/use-csv-import";
+import { PRESS_SCALE_LARGE, springs } from "@withpotter/lib/motion";
+function PotterSheetChip({
+  sheet,
+  onRemove,
+  /** Compact: inside a queued card, where there is one line to spend. */
+  compact = false
+}) {
+  const bad = Boolean(sheet.problem) || !sheet.recognised.includes("title");
+  const columns = IMPORT_FIELDS.filter((f) => sheet.recognised.includes(f.key)).map((f) => f.label).slice(0, 4);
+  if (compact) {
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex min-w-0 shrink-0 items-center gap-1 rounded-[var(--radius-card)] bg-[var(--bg-base)] px-2 py-1 text-2xs text-[var(--text-tertiary)]", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: sheet.name }),
+      !bad && /* @__PURE__ */ jsxs("span", { className: "shrink-0", children: [
+        "\xB7 ",
+        sheet.rows
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 4, scale: 0.98 },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      exit: { opacity: 0, y: 4, scale: 0.98 },
+      transition: springs.snappy,
+      className: "surface-inset flex items-start gap-3 rounded-[var(--radius-card)] p-3",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: sheet.name }),
+          bad ? /* @__PURE__ */ jsxs("p", { className: "flex items-start gap-1 text-2xs text-[var(--warning,var(--text-tertiary))]", children: [
+            /* @__PURE__ */ jsx(AlertTriangle, { "aria-hidden": true, className: "mt-px size-[13px] shrink-0" }),
+            /* @__PURE__ */ jsx("span", { children: sheet.problem ?? "No name column, so these cannot become catalogue items." })
+          ] }) : /* @__PURE__ */ jsxs("p", { className: "text-2xs text-[var(--text-tertiary)]", children: [
+            sheet.rows,
+            " rows \xB7 ",
+            columns.join(", ")
+          ] })
+        ] }),
+        onRemove && /* @__PURE__ */ jsx(
+          motion.button,
+          {
+            type: "button",
+            onClick: onRemove,
+            "aria-label": `Remove ${sheet.name}`,
+            whileTap: { scale: PRESS_SCALE_LARGE },
+            transition: springs.snappy,
+            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(--error-bg)] hover:text-[var(--error)]",
+            children: /* @__PURE__ */ jsx(X, { className: "size-[13px]" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PotterSheetChip
+};
+//# sourceMappingURL=potter-sheet-chip.js.map

package/dist/potter/potter-sheet-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-sheet-chip.tsx"],"sourcesContent":["'use client';\n\nimport { motion } from 'motion/react';\nimport { AlertTriangle, X } from 'lucide-react';\nimport { IMPORT_FIELDS } from '@withpotter/pages-commerce/dashboard/(commerce)/catalog/_hooks/use-csv-import';\nimport { PRESS_SCALE_LARGE, springs } from '@withpotter/lib/motion';\nimport type { AttachedSheet } from './potter-attach';\n\n/**\n * An attached spreadsheet, sitting in the composer until it is sent.\n *\n * WHY THIS IS NOT A THUMBNAIL, which is what every other composer would draw\n * here. A thumbnail answers \"which image did I pick\" — a real question about a\n * picture, and the only one you can answer about a picture without opening it.\n * A spreadsheet has no picture, and the two things usually offered instead are\n * both useless: a generic file glyph says nothing at all, and the filename says\n * almost nothing, because the file a merchant is about to send is called\n * `export (3).csv`.\n *\n * The two questions somebody actually has before pressing send are \"is this the\n * right file\" and \"will it work\". Both are answerable, for free, before the\n * model is involved: `readSheet` has already counted the rows and run the\n * catalogue's own `guessMapping` over the headers. So the chip shows the row\n * count and the columns we RECOGNISED — which is the part that decides whether\n * the import works — and says so in the merchant's words rather than the file's.\n *\n * A FILE WE CANNOT USE SAYS SO HERE, not after sending. `readSheet` already\n * produces the sentence; showing it in the composer means the merchant fixes\n * the file instead of spending a turn to be told about it.\n */\nexport function PotterSheetChip({\n  sheet,\n  onRemove,\n  /** Compact: inside a queued card, where there is one line to spend. */\n  compact = false,\n}: {\n  sheet: AttachedSheet;\n  onRemove?: () => void;\n  compact?: boolean;\n}) {\n  const bad = Boolean(sheet.problem) || !sheet.recognised.includes('title');\n\n  const columns = IMPORT_FIELDS.filter((f) => sheet.recognised.includes(f.key))\n    .map((f) => f.label)\n    .slice(0, 4);\n\n  if (compact) {\n    return (\n      <span className=\"inline-flex min-w-0 shrink-0 items-center gap-1 rounded-[var(--radius-card)] bg-[var(--bg-base)] px-2 py-1 text-2xs text-[var(--text-tertiary)]\">\n        <span className=\"truncate\">{sheet.name}</span>\n        {!bad && <span className=\"shrink-0\">· {sheet.rows}</span>}\n      </span>\n    );\n  }\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 4, scale: 0.98 }}\n      animate={{ opacity: 1, y: 0, scale: 1 }}\n      exit={{ opacity: 0, y: 4, scale: 0.98 }}\n      transition={springs.snappy}\n      className=\"surface-inset flex items-start gap-3 rounded-[var(--radius-card)] p-3\"\n    >\n      <div className=\"min-w-0 flex-1 space-y-1\">\n        <p className=\"truncate text-sm font-medium text-[var(--text-primary)]\">\n          {sheet.name}\n        </p>\n\n        {bad ? (\n          <p className=\"flex items-start gap-1 text-2xs text-[var(--warning,var(--text-tertiary))]\">\n            <AlertTriangle aria-hidden className=\"mt-px size-[13px] shrink-0\" />\n            <span>\n              {sheet.problem ??\n                'No name column, so these cannot become catalogue items.'}\n            </span>\n          </p>\n        ) : (\n          <p className=\"text-2xs text-[var(--text-tertiary)]\">\n            {sheet.rows} rows · {columns.join(', ')}\n          </p>\n        )}\n      </div>\n\n      {onRemove && (\n        <motion.button\n          type=\"button\"\n          onClick={onRemove}\n          aria-label={`Remove ${sheet.name}`}\n          whileTap={{ scale: PRESS_SCALE_LARGE }}\n          transition={springs.snappy}\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(--error-bg)] hover:text-[var(--error)]\"\n        >\n          <X className=\"size-[13px]\" />\n        </motion.button>\n      )}\n    </motion.div>\n  );\n}\n"],"mappings":";AAiDQ,cACS,YADT;AA/CR,SAAS,cAAc;AACvB,SAAS,eAAe,SAAS;AACjC,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB,eAAe;AAyBpC,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA;AAAA,EAEA,UAAU;AACZ,GAIG;AACD,QAAM,MAAM,QAAQ,MAAM,OAAO,KAAK,CAAC,MAAM,WAAW,SAAS,OAAO;AAExE,QAAM,UAAU,cAAc,OAAO,CAAC,MAAM,MAAM,WAAW,SAAS,EAAE,GAAG,CAAC,EACzE,IAAI,CAAC,MAAM,EAAE,KAAK,EAClB,MAAM,GAAG,CAAC;AAEb,MAAI,SAAS;AACX,WACE,qBAAC,UAAK,WAAU,mJACd;AAAA,0BAAC,UAAK,WAAU,YAAY,gBAAM,MAAK;AAAA,MACtC,CAAC,OAAO,qBAAC,UAAK,WAAU,YAAW;AAAA;AAAA,QAAG,MAAM;AAAA,SAAK;AAAA,OACpD;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG,OAAO,KAAK;AAAA,MACzC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG,OAAO,EAAE;AAAA,MACtC,MAAM,EAAE,SAAS,GAAG,GAAG,GAAG,OAAO,KAAK;AAAA,MACtC,YAAY,QAAQ;AAAA,MACpB,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,4BACb;AAAA,8BAAC,OAAE,WAAU,2DACV,gBAAM,MACT;AAAA,UAEC,MACC,qBAAC,OAAE,WAAU,8EACX;AAAA,gCAAC,iBAAc,eAAW,MAAC,WAAU,8BAA6B;AAAA,YAClE,oBAAC,UACE,gBAAM,WACL,2DACJ;AAAA,aACF,IAEA,qBAAC,OAAE,WAAU,wCACV;AAAA,kBAAM;AAAA,YAAK;AAAA,YAAS,QAAQ,KAAK,IAAI;AAAA,aACxC;AAAA,WAEJ;AAAA,QAEC,YACC;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,cAAY,UAAU,MAAM,IAAI;AAAA,YAChC,UAAU,EAAE,OAAO,kBAAkB;AAAA,YACrC,YAAY,QAAQ;AAAA,YACpB,WAAU;AAAA,YAEV,8BAAC,KAAE,WAAU,eAAc;AAAA;AAAA,QAC7B;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

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

@@ -0,0 +1,3 @@
+export declare function PotterSteps({ tools }: {
+    tools: string[];
+}): import("react").JSX.Element | null;

package/dist/potter/potter-steps.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  CalendarDays,
+  ChevronRight,
+  Package,
+  ReceiptText,
+  Search,
+  TrendingUp
+} from "lucide-react";
+import { useEntityLabel } from "@withpotter/lib/intents/use-entity-label";
+import { PRESS_SCALE_LARGE, springs } from "@withpotter/lib/motion";
+function useStepLabels() {
+  const item = useEntityLabel("item");
+  const booking = useEntityLabel("booking");
+  return {
+    money_owed: { label: "Read unpaid invoices", icon: ReceiptText },
+    low_stock: {
+      label: `Read your ${item.plural.toLowerCase()}`,
+      icon: Package
+    },
+    bookings_today: {
+      label: `Read today's ${booking.plural.toLowerCase()}`,
+      icon: CalendarDays
+    },
+    sales_compare: { label: "Compared two periods", icon: TrendingUp },
+    business_summary: { label: "Read your sales", icon: TrendingUp },
+    todays_bookings: {
+      label: `Read today's ${booking.plural.toLowerCase()}`,
+      icon: CalendarDays
+    }
+  };
+}
+function PotterSteps({ tools }) {
+  const [open, setOpen] = useState(false);
+  const labels = useStepLabels();
+  if (tools.length === 0) return null;
+  const summary = tools.length === 1 ? labels[tools[0]]?.label ?? "Read your rows" : `Read ${tools.length} things`;
+  return /* @__PURE__ */ jsxs("div", { className: "pt-1", children: [
+    /* @__PURE__ */ jsxs(
+      motion.button,
+      {
+        type: "button",
+        onClick: () => setOpen((o) => !o),
+        "aria-expanded": open,
+        whileTap: { scale: PRESS_SCALE_LARGE },
+        transition: springs.snappy,
+        className: "flex items-center gap-1 rounded-[var(--radius-card)] py-1 text-2xs text-[var(--text-tertiary)] transition-colors duration-[var(--motion-fast)] hover:text-[var(--text-secondary)]",
+        children: [
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              animate: { rotate: open ? 90 : 0 },
+              transition: springs.snappy,
+              className: "grid place-items-center",
+              children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-[13px]" })
+            }
+          ),
+          summary
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx(
+      motion.ul,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: springs.gentle,
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ jsx("div", { className: "ml-2 space-y-2 border-l border-[var(--border-subtle)] py-2 pl-3", children: tools.map((tool, i) => {
+          const step = labels[tool];
+          const Icon = step?.icon ?? Search;
+          return /* @__PURE__ */ jsxs(
+            motion.li,
+            {
+              initial: { opacity: 0, x: -4 },
+              animate: { opacity: 1, x: 0 },
+              transition: { ...springs.snappy, delay: i * 0.04 },
+              className: "flex items-center gap-2 text-2xs text-[var(--text-tertiary)]",
+              children: [
+                /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "size-[13px] shrink-0" }),
+                step?.label ?? tool
+              ]
+            },
+            `${tool}-${i}`
+          );
+        }) })
+      }
+    ) })
+  ] });
+}
+export {
+  PotterSteps
+};
+//# sourceMappingURL=potter-steps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-steps.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport {\n  CalendarDays,\n  ChevronRight,\n  Package,\n  ReceiptText,\n  Search,\n  TrendingUp,\n  type LucideIcon,\n} from 'lucide-react';\nimport { useEntityLabel } from '@withpotter/lib/intents/use-entity-label';\nimport { PRESS_SCALE_LARGE, springs } from '@withpotter/lib/motion';\n\n/**\n * Where the answer came from — a real trail, not a performance.\n *\n * John sent Fluid Functionalism's `ThinkingSteps`, which reveals a sequence of\n * steps on timers while an agent works. It is a lovely component and copying it\n * here would have been a lie in two directions at once.\n *\n * FIRST: OUR ANSWER ARRIVES WHOLE. There is no stream yet — one request, one\n * reply — so steps appearing one per second would be a timeline invented in the\n * browser after the work was already finished. That is the definition of\n * theatre: motion that describes something that did not happen.\n *\n * SECOND, AND THE MORE USEFUL POINT: the question a merchant has about an\n * answer is not \"what order did you do things in\", it is \"where did that number\n * come from\". They are about to chase someone for ₦412,000 on the strength of a\n * sentence. A trace they watch scroll past answers nothing afterwards; a list\n * they can open answers it whenever they doubt it.\n *\n * So this is the same idea pointed at the real question: what ran, named in the\n * merchant's own nouns, collapsed to one quiet line and opened on demand. It is\n * rung 5 of the ladder — an answer that carries its working — and it is honest\n * TODAY, because `toolsUsed` comes from the lookups that genuinely ran, both\n * from the local tools and from the answering route.\n *\n * A TURN THAT READ NOTHING DRAWS NOTHING. The help corpus reads no rows, so\n * there is no trail under it — an empty \"Checked 0 things\" would be the\n * decoration this component exists to avoid.\n */\n\n/**\n * What each lookup did, in words a merchant would use.\n *\n * The nouns resolve per business — a clinic reads appointments and a shop reads\n * stock, and a trail that says \"bookings\" to a clinic is the same bug as a page\n * title that does.\n */\nfunction useStepLabels(): Record<string, { label: string; icon: LucideIcon }> {\n  const item = useEntityLabel('item');\n  const booking = useEntityLabel('booking');\n\n  return {\n    money_owed: { label: 'Read unpaid invoices', icon: ReceiptText },\n    low_stock: {\n      label: `Read your ${item.plural.toLowerCase()}`,\n      icon: Package,\n    },\n    bookings_today: {\n      label: `Read today's ${booking.plural.toLowerCase()}`,\n      icon: CalendarDays,\n    },\n    sales_compare: { label: 'Compared two periods', icon: TrendingUp },\n    business_summary: { label: 'Read your sales', icon: TrendingUp },\n    todays_bookings: {\n      label: `Read today's ${booking.plural.toLowerCase()}`,\n      icon: CalendarDays,\n    },\n  };\n}\n\nexport function PotterSteps({ tools }: { tools: string[] }) {\n  const [open, setOpen] = useState(false);\n  const labels = useStepLabels();\n\n  if (tools.length === 0) return null;\n\n  /* Named by what it read, so the closed line is worth reading on its own. One\n     lookup gets its own sentence; several get a count, because three labels on\n     one line is a paragraph pretending to be a summary. */\n  const summary =\n    tools.length === 1\n      ? (labels[tools[0]]?.label ?? 'Read your rows')\n      : `Read ${tools.length} things`;\n\n  return (\n    <div className=\"pt-1\">\n      <motion.button\n        type=\"button\"\n        onClick={() => setOpen((o) => !o)}\n        aria-expanded={open}\n        whileTap={{ scale: PRESS_SCALE_LARGE }}\n        transition={springs.snappy}\n        className=\"flex items-center gap-1 rounded-[var(--radius-card)] py-1 text-2xs text-[var(--text-tertiary)] transition-colors duration-[var(--motion-fast)] hover:text-[var(--text-secondary)]\"\n      >\n        {/* The chevron TURNS rather than being swapped for a second glyph —\n            one element that changes, which is the rule this codebase's motion\n            doctrine keeps returning to. */}\n        <motion.span\n          animate={{ rotate: open ? 90 : 0 }}\n          transition={springs.snappy}\n          className=\"grid place-items-center\"\n        >\n          <ChevronRight aria-hidden className=\"size-[13px]\" />\n        </motion.span>\n        {summary}\n      </motion.button>\n\n      <AnimatePresence initial={false}>\n        {open && (\n          <motion.ul\n            initial={{ height: 0, opacity: 0 }}\n            animate={{ height: 'auto', opacity: 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={springs.gentle}\n            className=\"overflow-hidden\"\n          >\n            {/* The rail is one border on the list rather than a line per row:\n                a connector drawn per step leaves a gap at every joint, which\n                reads as a dotted line nobody asked for. */}\n            <div className=\"ml-2 space-y-2 border-l border-[var(--border-subtle)] py-2 pl-3\">\n              {tools.map((tool, i) => {\n                const step = labels[tool];\n                const Icon = step?.icon ?? Search;\n                return (\n                  <motion.li\n                    key={`${tool}-${i}`}\n                    initial={{ opacity: 0, x: -4 }}\n                    animate={{ opacity: 1, x: 0 }}\n                    transition={{ ...springs.snappy, delay: i * 0.04 }}\n                    className=\"flex items-center gap-2 text-2xs text-[var(--text-tertiary)]\"\n                  >\n                    <Icon aria-hidden className=\"size-[13px] shrink-0\" />\n                    {step?.label ?? tool}\n                  </motion.li>\n                );\n              })}\n            </div>\n          </motion.ul>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"mappings":";AA2FM,SAgBI,KAhBJ;AAzFN,SAAS,gBAAgB;AACzB,SAAS,iBAAiB,cAAc;AACxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB,eAAe;AAsC3C,SAAS,gBAAqE;AAC5E,QAAM,OAAO,eAAe,MAAM;AAClC,QAAM,UAAU,eAAe,SAAS;AAExC,SAAO;AAAA,IACL,YAAY,EAAE,OAAO,wBAAwB,MAAM,YAAY;AAAA,IAC/D,WAAW;AAAA,MACT,OAAO,aAAa,KAAK,OAAO,YAAY,CAAC;AAAA,MAC7C,MAAM;AAAA,IACR;AAAA,IACA,gBAAgB;AAAA,MACd,OAAO,gBAAgB,QAAQ,OAAO,YAAY,CAAC;AAAA,MACnD,MAAM;AAAA,IACR;AAAA,IACA,eAAe,EAAE,OAAO,wBAAwB,MAAM,WAAW;AAAA,IACjE,kBAAkB,EAAE,OAAO,mBAAmB,MAAM,WAAW;AAAA,IAC/D,iBAAiB;AAAA,MACf,OAAO,gBAAgB,QAAQ,OAAO,YAAY,CAAC;AAAA,MACnD,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,SAAS,YAAY,EAAE,MAAM,GAAwB;AAC1D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,SAAS,cAAc;AAE7B,MAAI,MAAM,WAAW,EAAG,QAAO;AAK/B,QAAM,UACJ,MAAM,WAAW,IACZ,OAAO,MAAM,CAAC,CAAC,GAAG,SAAS,mBAC5B,QAAQ,MAAM,MAAM;AAE1B,SACE,qBAAC,SAAI,WAAU,QACb;AAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,QAChC,iBAAe;AAAA,QACf,UAAU,EAAE,OAAO,kBAAkB;AAAA,QACrC,YAAY,QAAQ;AAAA,QACpB,WAAU;AAAA,QAKV;AAAA;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACC,SAAS,EAAE,QAAQ,OAAO,KAAK,EAAE;AAAA,cACjC,YAAY,QAAQ;AAAA,cACpB,WAAU;AAAA,cAEV,8BAAC,gBAAa,eAAW,MAAC,WAAU,eAAc;AAAA;AAAA,UACpD;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,IAEA,oBAAC,mBAAgB,SAAS,OACvB,kBACC;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,SAAS,EAAE,QAAQ,GAAG,SAAS,EAAE;AAAA,QACjC,SAAS,EAAE,QAAQ,QAAQ,SAAS,EAAE;AAAA,QACtC,MAAM,EAAE,QAAQ,GAAG,SAAS,EAAE;AAAA,QAC9B,YAAY,QAAQ;AAAA,QACpB,WAAU;AAAA,QAKV,8BAAC,SAAI,WAAU,mEACZ,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,gBAAM,OAAO,OAAO,IAAI;AACxB,gBAAM,OAAO,MAAM,QAAQ;AAC3B,iBACE;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cAEC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,cAC7B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,cAC5B,YAAY,EAAE,GAAG,QAAQ,QAAQ,OAAO,IAAI,KAAK;AAAA,cACjD,WAAU;AAAA,cAEV;AAAA,oCAAC,QAAK,eAAW,MAAC,WAAU,wBAAuB;AAAA,gBAClD,MAAM,SAAS;AAAA;AAAA;AAAA,YAPX,GAAG,IAAI,IAAI,CAAC;AAAA,UAQnB;AAAA,QAEJ,CAAC,GACH;AAAA;AAAA,IACF,GAEJ;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,77 @@
+import type { ReactNode } from 'react';
+/**
+ * Boot, then intro, then the thread. Nothing else.
+ *
+ * Deliberately owns no chrome, no width and no position — the home renders it
+ * in the page under its ask bar, the launcher renders it inside an anchored
+ * panel, and the two must not be able to drift into different assistants. This
+ * is the merge, in one component: whatever the door looks like, this is what is
+ * behind it.
+ *
+ * THE BOOT PLAYS ON AN EMPTY THREAD, not once per session. Square shows its
+ * intro every time you open onto a fresh conversation, and that is the right
+ * rule: the animation is not a first-run tutorial to be got past, it is how
+ * this surface says it is starting from nothing. Say something and it is gone
+ * for the rest of the conversation; clear the thread and it is how you come
+ * back to the beginning.
+ *
+ * A seeded open SKIPS IT. Typing a question and pressing Enter is not an
+ * arrival, it is an answer being waited for, and a second of mark assembly in
+ * front of it would be a loader for work that has already finished.
+ *
+ * COMPACT SKIPS THE BOOT TOO. Inline under the home's ask bar, this surface
+ * appears the moment the field takes focus — and a one-second mark assembly
+ * every time someone clicks a search box is an animation punishing you for
+ * using the thing. The bar has its own arrival there: six glow rings that bloom
+ * and rotate on focus. Box does not need to stage a second one on top.
+ *
+ * REDUCED MOTION IS GATED HERE rather than inside the boot, and that is not a
+ * style preference. A component that decides it should not exist has to say so
+ * by calling back into its parent, which means a setState in an effect on the
+ * first frame — a cascading render, and the lint rule that bans it is right.
+ * The parent already owns the branch; it can simply not render the thing.
+ */
+export declare function PotterSurface({ compact, 
+/**
+ * What pressing one of the intro's suggested questions does.
+ *
+ * Defaults to asking it right here, which is correct in the launcher's panel
+ * and was WRONG on the home the day send started opening `/dashboard/ask`:
+ * typing a question went to the screen and pressing one of the four
+ * suggestions underneath it answered in place, so the same act had two
+ * different destinations depending on whether you typed it or clicked it.
+ * The home passes its own handler; nothing else needs to.
+ */
+onAsk, 
+/**
+ * What stands in for the intro while the thread is empty.
+ *
+ * The ask screen passes a title. John, looking at the intro line and the
+ * three suggestions on it: *"also remove this … replace with a title text"* —
+ * on a screen whose only object is the composer, a sentence of voice and a
+ * list of examples are two more things to read before typing.
+ *
+ * It replaces the BOOT as well. The mark assembly is how this surface says it
+ * is starting from nothing, and a title on a centred composer says the same
+ * thing in one line and without the second of animation.
+ *
+ * Given rather than hardcoded because the launcher's panel still wants the
+ * intro: there the suggestions ARE the affordance, in a 380px box with no
+ * room to explain itself any other way.
+ */
+emptyState, 
+/**
+ * Whether THIS surface is the one that asks a handed-over question.
+ *
+ * The launcher's panel is: it has no other machinery, so consuming the seed
+ * on its next effect is the whole handoff. The ask screen is NOT — files can
+ * ride along with a seed now, and only `usePotterTurn` knows how to read one
+ * and put it in a turn. Two consumers would ask the same question twice, so
+ * the screen turns this off and takes the job itself.
+ */
+consumeSeed, }: {
+    compact?: boolean;
+    onAsk?: (question: string) => void;
+    emptyState?: ReactNode;
+    consumeSeed?: boolean;
+}): import("react").JSX.Element;