@withpotter/components 0.13.0-next.101

package/dist/potter/potter-conversation.js

@@ -0,0 +1,237 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { History, Plus, Trash2, X } from "lucide-react";
+import * as Popover from "@radix-ui/react-popover";
+import { Button } from "@withpotter/ui-kit/button";
+import { ActionRailItem, MessageInput } from "@withpotter/ui-kit";
+import { BoxMark } from "@withpotter/ui-kit/box-mark";
+import { cardClass } from "@withpotter/ui-kit/card";
+import { cn } from "@withpotter/lib/utils";
+import { usePotter } from "./potter-context";
+import { usePotterAsk } from "./use-potter-ask";
+import { whenLabel } from "./potter-history";
+import { PotterThread } from "./potter-thread";
+function PotterConversation({
+  maxHeight = "60vh",
+  fill = false,
+  onClose
+}) {
+  const { messages, newThread } = usePotter();
+  const busy = messages.some((m) => m.pending);
+  const ask = usePotterAsk();
+  const [value, setValue] = useState("");
+  const inputRef = useRef(null);
+  const submit = () => {
+    const q = value.trim();
+    if (!q) return;
+    if (busy) return;
+    void ask(q);
+    setValue("");
+    inputRef.current?.focus();
+  };
+  return (
+    /* `surface`, the app's own card. Written as `border border-line
+       bg-surface` first, which is the exact bug CLAUDE.md documents: there is
+       no `--bg-surface` property, so the panel rendered transparent and the
+       page showed through the conversation. */
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          cardClass,
+          "flex flex-col overflow-hidden !p-0",
+          fill && "h-full"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[var(--border-subtle)] px-3 py-2", children: [
+            /* @__PURE__ */ jsx(
+              BoxMark,
+              {
+                glyph: "mark",
+                height: 13,
+                className: "shrink-0 text-[var(--text-primary)]"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: "Box" }),
+            /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(PotterHistoryMenu, {}),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  "aria-label": "New conversation",
+                  onClick: () => {
+                    newThread();
+                    setValue("");
+                    inputRef.current?.focus();
+                  },
+                  children: /* @__PURE__ */ jsx(Plus, {})
+                }
+              ),
+              onClose && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  "aria-label": "Close",
+                  onClick: onClose,
+                  children: /* @__PURE__ */ jsx(X, {})
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "overflow-y-auto px-3 py-3",
+                // `min-h-0` or the flex child refuses to shrink and the composer is
+                // pushed off the bottom of the drawer — the default `min-height:auto`
+                // on a flex item is the single most common cause of that.
+                fill && "min-h-0 flex-1"
+              ),
+              style: fill ? void 0 : { maxHeight },
+              children: /* @__PURE__ */ jsx(PotterThread, { messages })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] p-2", children: /* @__PURE__ */ jsx(
+            MessageInput,
+            {
+              value,
+              onChange: setValue,
+              onSubmit: submit,
+              inputRef,
+              disabled: busy,
+              placeholder: busy ? "Box is looking\u2026" : "Reply to Box"
+            }
+          ) })
+        ]
+      }
+    )
+  );
+}
+function PotterHistoryMenu({
+  /**
+   * Draw the trigger as a rail item rather than a ghost icon button.
+   *
+   * The ask screen puts this beside "New conversation" in an `ActionRail`,
+   * where the two share one travelling chip and say their names on approach.
+   * The corner launcher's header has a single control in a crowded strip and
+   * keeps the plain glyph — a rail of one is a chip with nowhere to travel.
+   *
+   * `active` rather than hover is what holds the chip here: while this popover
+   * is up, the panel belongs to this glyph, and letting the chip go when the
+   * pointer moves away would leave the open list attached to nothing.
+   */
+  rail = false,
+  /**
+   * Drawn as a round 28px control, to stand in the home bar's own row beside
+   * the paperclip, the mic and Send. Three shapes for one menu because it now
+   * appears in three frames — a ghost icon in the launcher's crowded header, a
+   * rail item on the ask screen, and this — and a control that does not match
+   * the row it sits in reads as something that was dropped there.
+   */
+  bar = false,
+  mobile = false,
+  /**
+   * Run after a conversation is chosen, once the thread is loaded.
+   *
+   * The home needs it: `openThread` puts the thread on the context and nothing
+   * else, which is the whole job on a surface that is already showing the
+   * conversation. On the home it would load a thread onto a page with nowhere
+   * to draw it, so the home passes a navigation.
+   */
+  onOpened
+} = {}) {
+  const { threads, openThread, deleteThread } = usePotter();
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: rail ? /* @__PURE__ */ jsx(ActionRailItem, { icon: History, label: "History", active: open }) : bar ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        "aria-label": "Past conversations",
+        title: "Past conversations",
+        className: cn(
+          "grid shrink-0 place-items-center transition-[background-color,color] duration-[var(--motion-fast)]",
+          mobile ? "size-9 rounded-full" : "size-8 rounded-lg",
+          mobile ? "text-[var(--mb-app-ground-text,var(--mb-text))]" : "border border-[var(--border-default)] bg-[var(--bg-muted)] text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]"
+        ),
+        children: /* @__PURE__ */ jsx(History, { className: mobile ? "size-5" : "size-4" })
+      }
+    ) : /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": "History", children: /* @__PURE__ */ jsx(History, {}) }) }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        align: "end",
+        sideOffset: 6,
+        className: cn("surface-pinned", "z-[100] w-72 !p-1"),
+        children: /* @__PURE__ */ jsx(
+          HistoryList,
+          {
+            threads,
+            onOpen: (id) => {
+              openThread(id);
+              setOpen(false);
+              onOpened?.();
+            },
+            onDelete: deleteThread
+          }
+        )
+      }
+    ) })
+  ] });
+}
+function HistoryList({
+  threads,
+  onOpen,
+  onDelete
+}) {
+  if (threads.length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-sm text-[var(--text-tertiary)]", children: "Conversations you have with Box show up here." });
+  }
+  return /* @__PURE__ */ jsx("ul", { className: "max-h-72 overflow-y-auto", children: threads.map((t) => /* @__PURE__ */ jsxs("li", { className: "group flex items-center gap-1", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onOpen(t.id),
+        className: "flex min-w-0 flex-1 items-start gap-3 rounded-lg px-2 py-2 text-left hover:bg-[var(--interactive-hover)]",
+        children: [
+          /* @__PURE__ */ jsx(
+            BoxMark,
+            {
+              glyph: "mark",
+              height: 13,
+              "aria-hidden": true,
+              className: "mt-0.5 shrink-0 text-[var(--text-tertiary)]"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-sm text-[var(--text-primary)]", children: t.title }),
+            /* @__PURE__ */ jsx("span", { className: "block text-2xs text-[var(--text-tertiary)]", children: whenLabel(t.updatedAt) })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        "aria-label": `Delete ${t.title}`,
+        className: "opacity-0 transition-[background-color,color,opacity] duration-[var(--motion-fast)] hover:bg-[var(--error-bg)] hover:text-[var(--error)] group-hover:opacity-100 focus-visible:opacity-100",
+        onClick: () => onDelete(t.id),
+        children: /* @__PURE__ */ jsx(Trash2, {})
+      }
+    )
+  ] }, t.id)) });
+}
+export {
+  PotterConversation,
+  PotterHistoryMenu
+};
+//# sourceMappingURL=potter-conversation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-conversation.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\nimport { History, Plus, Trash2, X } from 'lucide-react';\nimport * as Popover from '@radix-ui/react-popover';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { ActionRailItem, MessageInput } from '@withpotter/ui-kit';\nimport { BoxMark } from '@withpotter/ui-kit/box-mark';\nimport { cardClass } from '@withpotter/ui-kit/card';\nimport { cn } from '@withpotter/lib/utils';\nimport { usePotter } from './potter-context';\nimport { usePotterAsk } from './use-potter-ask';\nimport { whenLabel } from './potter-history';\nimport { PotterThread } from './potter-thread';\n\n/**\n * The conversation, as a conversation.\n *\n * WHAT WAS WRONG. Box had a thread renderer and no chat. You typed into a\n * bar at the TOP of the page and the answers stacked downwards under it, so\n * the composer was above the conversation and the newest turn was furthest\n * from it — the inverse of every product a merchant has used, which is what\n * John meant by *\"theur no chat ui or what not like how claude does it or\n * chatgpt or grok\"*. There was no header, no way to start a second\n * conversation, and no history at all: `clear()` deleted the thread and Close\n * called `clear()`.\n *\n * WHAT THIS IS. The three parts every chat surface has and this one did not:\n * a header that says whose conversation it is and lets you leave or start\n * another, a scrolling transcript, and a composer pinned to the bottom of it.\n * The transcript itself is still `PotterThread` — the reply bodies under\n * Box's sentences are the substance of this product and none of that\n * changes.\n *\n * IT OWNS NO WIDTH AND NO POSITION, like `PotterSurface` before it. The home\n * renders it in the column where its ask bar was; the launcher renders it in\n * an anchored panel. `maxHeight` is the one thing a caller must say, because\n * only the caller knows how much room there is.\n */\nexport function PotterConversation({\n  maxHeight = '60vh',\n  fill = false,\n  onClose,\n}: {\n  /** How tall the transcript may grow before it scrolls. Ignored when `fill`. */\n  maxHeight?: string;\n  /**\n   * Take the whole height the parent gives, rather than growing to fit.\n   *\n   * The dock is a full-height drawer, so its transcript should reach the\n   * composer at the bottom of the screen whether the conversation is two turns\n   * or forty. Left off, the panel is as tall as it needs to be — which is what\n   * the launcher's bottom sheet wants.\n   */\n  fill?: boolean;\n  /** Omitted where the surrounding panel already has its own dismiss. */\n  onClose?: () => void;\n}) {\n  const { messages, newThread } = usePotter();\n  /** A turn has been asked and not yet answered. */\n  const busy = messages.some((m) => m.pending);\n  const ask = usePotterAsk();\n  const [value, setValue] = useState('');\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  const submit = () => {\n    const q = value.trim();\n    if (!q) return;\n    /* One question at a time. `ask` is a round trip now, so holding Enter — or\n       a double tap on a phone — pushed two questions and left two pending\n       turns racing to resolve. The composer is disabled while one is open. */\n    if (busy) return;\n    void ask(q);\n    setValue('');\n    // Focus stays: the next question goes in the same field, and a composer\n    // that dismisses its own keyboard after every message is a form, not a\n    // conversation.\n    inputRef.current?.focus();\n  };\n\n  return (\n    /* `surface`, the app's own card. Written as `border border-line\n       bg-surface` first, which is the exact bug CLAUDE.md documents: there is\n       no `--bg-surface` property, so the panel rendered transparent and the\n       page showed through the conversation. */\n    <div\n      className={cn(\n        cardClass,\n        'flex flex-col overflow-hidden !p-0',\n        fill && 'h-full',\n      )}\n    >\n      {/* Header. It names the surface and carries the three things you can do\n          to a conversation rather than inside one. */}\n      <div className=\"flex items-center gap-2 border-b border-[var(--border-subtle)] px-3 py-2\">\n        <BoxMark\n          glyph=\"mark\"\n          height={13}\n          className=\"shrink-0 text-[var(--text-primary)]\"\n        />\n        <span className=\"text-sm font-medium text-[var(--text-primary)]\">\n          Box\n        </span>\n\n        <div className=\"ml-auto flex items-center gap-1\">\n          <PotterHistoryMenu />\n\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            aria-label=\"New conversation\"\n            onClick={() => {\n              newThread();\n              setValue('');\n              inputRef.current?.focus();\n            }}\n          >\n            <Plus />\n          </Button>\n\n          {onClose && (\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              aria-label=\"Close\"\n              onClick={onClose}\n            >\n              <X />\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* The transcript. It scrolls; the header and composer do not. */}\n      <div\n        className={cn(\n          'overflow-y-auto px-3 py-3',\n          // `min-h-0` or the flex child refuses to shrink and the composer is\n          // pushed off the bottom of the drawer — the default `min-height:auto`\n          // on a flex item is the single most common cause of that.\n          fill && 'min-h-0 flex-1',\n        )}\n        style={fill ? undefined : { maxHeight }}\n      >\n        <PotterThread messages={messages} />\n      </div>\n\n      {/* The composer, at the BOTTOM of what it is composing into. */}\n      <div className=\"border-t border-[var(--border-subtle)] p-2\">\n        <MessageInput\n          value={value}\n          onChange={setValue}\n          onSubmit={submit}\n          inputRef={inputRef}\n          disabled={busy}\n          placeholder={busy ? 'Box is looking…' : 'Reply to Box'}\n        />\n      </div>\n    </div>\n  );\n}\n\n/**\n * Past conversations, behind one control.\n *\n * Exported because the corner launcher has its own header and must not grow a\n * second history list that can disagree with this one.\n */\nexport function PotterHistoryMenu({\n  /**\n   * Draw the trigger as a rail item rather than a ghost icon button.\n   *\n   * The ask screen puts this beside \"New conversation\" in an `ActionRail`,\n   * where the two share one travelling chip and say their names on approach.\n   * The corner launcher's header has a single control in a crowded strip and\n   * keeps the plain glyph — a rail of one is a chip with nowhere to travel.\n   *\n   * `active` rather than hover is what holds the chip here: while this popover\n   * is up, the panel belongs to this glyph, and letting the chip go when the\n   * pointer moves away would leave the open list attached to nothing.\n   */\n  rail = false,\n  /**\n   * Drawn as a round 28px control, to stand in the home bar's own row beside\n   * the paperclip, the mic and Send. Three shapes for one menu because it now\n   * appears in three frames — a ghost icon in the launcher's crowded header, a\n   * rail item on the ask screen, and this — and a control that does not match\n   * the row it sits in reads as something that was dropped there.\n   */\n  bar = false,\n  mobile = false,\n  /**\n   * Run after a conversation is chosen, once the thread is loaded.\n   *\n   * The home needs it: `openThread` puts the thread on the context and nothing\n   * else, which is the whole job on a surface that is already showing the\n   * conversation. On the home it would load a thread onto a page with nowhere\n   * to draw it, so the home passes a navigation.\n   */\n  onOpened,\n}: {\n  rail?: boolean;\n  bar?: boolean;\n  mobile?: boolean;\n  onOpened?: () => void;\n} = {}) {\n  const { threads, openThread, deleteThread } = usePotter();\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Popover.Root open={open} onOpenChange={setOpen}>\n      <Popover.Trigger asChild>\n        {rail ? (\n          <ActionRailItem icon={History} label=\"History\" active={open} />\n        ) : bar ? (\n          <button\n            type=\"button\"\n            onMouseDown={(e) => e.preventDefault()}\n            aria-label=\"Past conversations\"\n            title=\"Past conversations\"\n            className={cn(\n              'grid shrink-0 place-items-center transition-[background-color,color] duration-[var(--motion-fast)]',\n              mobile ? 'size-9 rounded-full' : 'size-8 rounded-lg',\n              mobile\n                ? 'text-[var(--mb-app-ground-text,var(--mb-text))]'\n                : 'border border-[var(--border-default)] bg-[var(--bg-muted)] text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]',\n            )}\n          >\n            <History className={mobile ? 'size-5' : 'size-4'} />\n          </button>\n        ) : (\n          <Button variant=\"ghost\" size=\"icon\" aria-label=\"History\">\n            <History />\n          </Button>\n        )}\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          align=\"end\"\n          sideOffset={6}\n          /* `surface-pinned`, not `surface`: this floats OVER a card of the\n              same grey, and two identical fills at different depths read as\n              one shape with a shadow drawn on it. */\n          className={cn('surface-pinned', 'z-[100] w-72 !p-1')}\n        >\n          <HistoryList\n            threads={threads}\n            onOpen={(id) => {\n              openThread(id);\n              setOpen(false);\n              onOpened?.();\n            }}\n            onDelete={deleteThread}\n          />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n\n/**\n * The list itself.\n *\n * Titled by the merchant's own first sentence, which is the thing they will\n * recognise — a generated summary would be a second thing to be wrong about.\n */\nfunction HistoryList({\n  threads,\n  onOpen,\n  onDelete,\n}: {\n  threads: ReturnType<typeof usePotter>['threads'];\n  onOpen: (id: string) => void;\n  onDelete: (id: string) => void;\n}) {\n  if (threads.length === 0) {\n    return (\n      <p className=\"px-3 py-6 text-center text-sm text-[var(--text-tertiary)]\">\n        Conversations you have with Box show up here.\n      </p>\n    );\n  }\n\n  return (\n    <ul className=\"max-h-72 overflow-y-auto\">\n      {threads.map((t) => (\n        <li key={t.id} className=\"group flex items-center gap-1\">\n          {/* A pressable row, not a Button: it is a list item with two lines of\n              content, which is the shape the raw-button note in CLAUDE.md\n              describes as correct. */}\n          <button\n            type=\"button\"\n            onClick={() => onOpen(t.id)}\n            className=\"flex min-w-0 flex-1 items-start gap-3 rounded-lg px-2 py-2 text-left hover:bg-[var(--interactive-hover)]\"\n          >\n            {/* EVERY ROW CARRIES THE MARK. John: *\"each hostroy should have an\n                icon\"*. Rows of bare text at two sizes read as a settings list;\n                a leading glyph is what says each line is an OBJECT you can open\n                rather than a label.\n\n                It is Box's own mark rather than a speech bubble, for the\n                reason the launcher's docblock gives at length: a bubble is\n                borrowed from messaging and these are not messages, they are\n                conversations with this assistant. `MessageCircle` is also the\n                one glyph this codebase reserves — rule 1 makes it WhatsApp's —\n                so reaching for it here would be wrong twice.\n\n                `mt-0.5` optically centres 13px against the first line rather\n                than the two-line block, which is where the eye expects it. */}\n            <BoxMark\n              glyph=\"mark\"\n              height={13}\n              aria-hidden\n              className=\"mt-0.5 shrink-0 text-[var(--text-tertiary)]\"\n            />\n            <span className=\"min-w-0 flex-1\">\n              <span className=\"block truncate text-sm text-[var(--text-primary)]\">\n                {t.title}\n              </span>\n              <span className=\"block text-2xs text-[var(--text-tertiary)]\">\n                {whenLabel(t.updatedAt)}\n              </span>\n            </span>\n          </button>\n          {/* RED ON HOVER, like every other control in this product that undoes\n              something — the ask bar's close already answers a hover with\n              `--error-bg` and `--error`. A hover state is where a control says\n              what it is about to do, and a neutral wash on the one control in\n              the row that DESTROYS a conversation was declining to say it. */}\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            aria-label={`Delete ${t.title}`}\n            className=\"opacity-0 transition-[background-color,color,opacity] duration-[var(--motion-fast)] hover:bg-[var(--error-bg)] hover:text-[var(--error)] group-hover:opacity-100 focus-visible:opacity-100\"\n            onClick={() => onDelete(t.id)}\n          >\n            <Trash2 />\n          </Button>\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,62 @@
+/**
+ * Which questions Box can look up, and which it must not guess at.
+ *
+ * PRECISION, NOT COVERAGE, and that is the whole design of this file. It sits
+ * in front of `routeQuestion` and only claims a sentence it is certain about;
+ * everything else falls through to the help corpus and the record search
+ * exactly as before. A matcher that grabbed anything containing "orders" is the
+ * bug that already exists one branch down — `find` takes the whole sentence as
+ * a name and searches for it, which is how "which products are running low"
+ * came back with nothing.
+ *
+ * The set is small on purpose: it is the four questions `potter-intro` OFFERS,
+ * the two `askPlaceholders` had to withdraw for being lies, and the one John
+ * used to prove the point ("how many appointments today"). A placeholder is a
+ * promise; this is the list of promises, and nothing else belongs in it until
+ * something else is offered.
+ *
+ * WHEN THE MODEL LANDS this file is what it replaces — the model picks a tool
+ * instead of a regex picking one. The tools and the blocks do not change, which
+ * is why they live in their own files rather than in here.
+ */
+export type DataIntent = {
+    tool: 'bookings_today';
+} | {
+    tool: 'low_stock';
+} | {
+    tool: 'money_owed';
+} | {
+    tool: 'sales_compare';
+    windowDays: number;
+};
+/**
+ * The composite one, and it is deliberately NOT a tool.
+ *
+ * "What needs my attention today?" is the intro's first suggestion and it is a
+ * question about three different things at once — the day's book, what is
+ * owed, what is running out. Answering it with one of them and calling it the
+ * answer would be worse than not answering: the merchant would read a complete
+ * reply and act on a third of the facts.
+ *
+ * So it fans out to every tool the tenant is allowed, and the reply is the
+ * joined sentence. Kept here rather than in `potter-tools` because it is a
+ * question about the product, not a read of one table.
+ */
+export declare const ATTENTION: RegExp;
+export declare function matchDataIntent(question: string): DataIntent | 'attention' | null;
+/**
+ * Which of these a given business is even allowed to be asked.
+ *
+ * The same gate `usePotterAsk` already puts on the help corpus, for the same
+ * reason: a shop that takes no bookings must not be handed a bookings answer,
+ * and a role that cannot see earnings must not be handed a number. The money
+ * gate is separate and it exists because a Front desk hire opened the home and
+ * saw the month's takings — see `use-money-visibility`.
+ */
+export declare function intentAllowed(intent: DataIntent, opts: {
+    behaviors: Set<string>;
+    /** Invoice and order amounts — what is owed right now. */
+    canSeeAmounts: boolean;
+    /** Revenue and payouts — the state of the business's money. */
+    canSeeEarnings: boolean;
+}): boolean;

package/dist/potter/potter-data.js

@@ -0,0 +1,63 @@
+const PATTERNS = [
+  {
+    // "how many appointments today", "what's on today", "today's bookings"
+    re: /\b(how many|how much|what('s| is| are)?)\b[^?]*\b(booking|bookings|appointment|appointments|class|classes|session|sessions)\b[^?]*\b(today|on today|so far)\b/i,
+    intent: { tool: "bookings_today" }
+  },
+  {
+    re: /\b(today'?s?)\s+(booking|bookings|appointment|appointments)\b/i,
+    intent: { tool: "bookings_today" }
+  },
+  {
+    // "which items are running low", "which products are running low",
+    // "what's low on stock", "what needs restocking"
+    re: /\b(running low|low on stock|low stock|need(s)? restocking|restock)\b/i,
+    intent: { tool: "low_stock" }
+  },
+  {
+    // "who still owes me money", "who owes me", "what's unpaid", "outstanding"
+    re: /\b(who (still )?owes|owes me|unpaid|outstanding|not paid( me)?( yet)?)\b/i,
+    intent: { tool: "money_owed" }
+  },
+  {
+    // "how did this week compare to last", "how did last week compare"
+    re: /\b(compare|comparison|vs\.? last|against last|better than last|worse than last)\b[^?]*\b(week|last)\b|\bhow did (this|last) week\b/i,
+    intent: { tool: "sales_compare", windowDays: 7 }
+  },
+  {
+    re: /\bhow (did|are|is) (sales|revenue|takings|business)\b/i,
+    intent: { tool: "sales_compare", windowDays: 7 }
+  }
+];
+const ATTENTION = /\b(what|anything)\b[^?]*\b(needs?|wants?|requires?)\b[^?]*\b(my )?attention\b|\bwhat should i (do|look at)\b|\banything (urgent|waiting|i should know)\b/i;
+function matchDataIntent(question) {
+  const q = question.trim();
+  if (!q) return null;
+  if (ATTENTION.test(q)) return "attention";
+  for (const { re, intent } of PATTERNS) {
+    if (re.test(q)) return intent;
+  }
+  return null;
+}
+function intentAllowed(intent, opts) {
+  switch (intent.tool) {
+    case "bookings_today":
+      return opts.behaviors.has("bookable");
+    case "low_stock":
+      return opts.behaviors.has("purchasable");
+    // The two money permissions are not one permission. `canSeeAmounts` is
+    // what a bill says; `canSeeEarnings` is how the business is doing. A desk
+    // hire chasing an unpaid invoice needs the first and must not get the
+    // second — see `money-visibility`.
+    case "money_owed":
+      return opts.canSeeAmounts;
+    case "sales_compare":
+      return opts.canSeeEarnings;
+  }
+}
+export {
+  ATTENTION,
+  intentAllowed,
+  matchDataIntent
+};
+//# sourceMappingURL=potter-data.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-data.ts"],"sourcesContent":["/**\n * Which questions Box can look up, and which it must not guess at.\n *\n * PRECISION, NOT COVERAGE, and that is the whole design of this file. It sits\n * in front of `routeQuestion` and only claims a sentence it is certain about;\n * everything else falls through to the help corpus and the record search\n * exactly as before. A matcher that grabbed anything containing \"orders\" is the\n * bug that already exists one branch down — `find` takes the whole sentence as\n * a name and searches for it, which is how \"which products are running low\"\n * came back with nothing.\n *\n * The set is small on purpose: it is the four questions `potter-intro` OFFERS,\n * the two `askPlaceholders` had to withdraw for being lies, and the one John\n * used to prove the point (\"how many appointments today\"). A placeholder is a\n * promise; this is the list of promises, and nothing else belongs in it until\n * something else is offered.\n *\n * WHEN THE MODEL LANDS this file is what it replaces — the model picks a tool\n * instead of a regex picking one. The tools and the blocks do not change, which\n * is why they live in their own files rather than in here.\n */\n\nexport type DataIntent =\n  | { tool: 'bookings_today' }\n  | { tool: 'low_stock' }\n  | { tool: 'money_owed' }\n  | { tool: 'sales_compare'; windowDays: number };\n\n/**\n * Anchored on the VERB AND THE OBJECT together.\n *\n * \"how many bookings\" is a count of bookings; \"how do bookings work\" is a help\n * topic that also contains the word. Matching the noun alone cannot tell them\n * apart, so each pattern carries the shape of the question as well as its\n * subject.\n */\nconst PATTERNS: { re: RegExp; intent: DataIntent }[] = [\n  {\n    // \"how many appointments today\", \"what's on today\", \"today's bookings\"\n    re: /\\b(how many|how much|what('s| is| are)?)\\b[^?]*\\b(booking|bookings|appointment|appointments|class|classes|session|sessions)\\b[^?]*\\b(today|on today|so far)\\b/i,\n    intent: { tool: 'bookings_today' },\n  },\n  {\n    re: /\\b(today'?s?)\\s+(booking|bookings|appointment|appointments)\\b/i,\n    intent: { tool: 'bookings_today' },\n  },\n  {\n    // \"which items are running low\", \"which products are running low\",\n    // \"what's low on stock\", \"what needs restocking\"\n    re: /\\b(running low|low on stock|low stock|need(s)? restocking|restock)\\b/i,\n    intent: { tool: 'low_stock' },\n  },\n  {\n    // \"who still owes me money\", \"who owes me\", \"what's unpaid\", \"outstanding\"\n    re: /\\b(who (still )?owes|owes me|unpaid|outstanding|not paid( me)?( yet)?)\\b/i,\n    intent: { tool: 'money_owed' },\n  },\n  {\n    // \"how did this week compare to last\", \"how did last week compare\"\n    re: /\\b(compare|comparison|vs\\.? last|against last|better than last|worse than last)\\b[^?]*\\b(week|last)\\b|\\bhow did (this|last) week\\b/i,\n    intent: { tool: 'sales_compare', windowDays: 7 },\n  },\n  {\n    re: /\\bhow (did|are|is) (sales|revenue|takings|business)\\b/i,\n    intent: { tool: 'sales_compare', windowDays: 7 },\n  },\n];\n\n/**\n * The composite one, and it is deliberately NOT a tool.\n *\n * \"What needs my attention today?\" is the intro's first suggestion and it is a\n * question about three different things at once — the day's book, what is\n * owed, what is running out. Answering it with one of them and calling it the\n * answer would be worse than not answering: the merchant would read a complete\n * reply and act on a third of the facts.\n *\n * So it fans out to every tool the tenant is allowed, and the reply is the\n * joined sentence. Kept here rather than in `potter-tools` because it is a\n * question about the product, not a read of one table.\n */\nexport const ATTENTION =\n  /\\b(what|anything)\\b[^?]*\\b(needs?|wants?|requires?)\\b[^?]*\\b(my )?attention\\b|\\bwhat should i (do|look at)\\b|\\banything (urgent|waiting|i should know)\\b/i;\n\nexport function matchDataIntent(\n  question: string,\n): DataIntent | 'attention' | null {\n  const q = question.trim();\n  if (!q) return null;\n  if (ATTENTION.test(q)) return 'attention';\n  for (const { re, intent } of PATTERNS) {\n    if (re.test(q)) return intent;\n  }\n  return null;\n}\n\n/**\n * Which of these a given business is even allowed to be asked.\n *\n * The same gate `usePotterAsk` already puts on the help corpus, for the same\n * reason: a shop that takes no bookings must not be handed a bookings answer,\n * and a role that cannot see earnings must not be handed a number. The money\n * gate is separate and it exists because a Front desk hire opened the home and\n * saw the month's takings — see `use-money-visibility`.\n */\nexport function intentAllowed(\n  intent: DataIntent,\n  opts: {\n    behaviors: Set<string>;\n    /** Invoice and order amounts — what is owed right now. */\n    canSeeAmounts: boolean;\n    /** Revenue and payouts — the state of the business's money. */\n    canSeeEarnings: boolean;\n  },\n): boolean {\n  switch (intent.tool) {\n    case 'bookings_today':\n      return opts.behaviors.has('bookable');\n    case 'low_stock':\n      return opts.behaviors.has('purchasable');\n    // The two money permissions are not one permission. `canSeeAmounts` is\n    // what a bill says; `canSeeEarnings` is how the business is doing. A desk\n    // hire chasing an unpaid invoice needs the first and must not get the\n    // second — see `money-visibility`.\n    case 'money_owed':\n      return opts.canSeeAmounts;\n    case 'sales_compare':\n      return opts.canSeeEarnings;\n  }\n}\n"],"mappings":"AAoCA,MAAM,WAAiD;AAAA,EACrD;AAAA;AAAA,IAEE,IAAI;AAAA,IACJ,QAAQ,EAAE,MAAM,iBAAiB;AAAA,EACnC;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,QAAQ,EAAE,MAAM,iBAAiB;AAAA,EACnC;AAAA,EACA;AAAA;AAAA;AAAA,IAGE,IAAI;AAAA,IACJ,QAAQ,EAAE,MAAM,YAAY;AAAA,EAC9B;AAAA,EACA;AAAA;AAAA,IAEE,IAAI;AAAA,IACJ,QAAQ,EAAE,MAAM,aAAa;AAAA,EAC/B;AAAA,EACA;AAAA;AAAA,IAEE,IAAI;AAAA,IACJ,QAAQ,EAAE,MAAM,iBAAiB,YAAY,EAAE;AAAA,EACjD;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,QAAQ,EAAE,MAAM,iBAAiB,YAAY,EAAE;AAAA,EACjD;AACF;AAeO,MAAM,YACX;AAEK,SAAS,gBACd,UACiC;AACjC,QAAM,IAAI,SAAS,KAAK;AACxB,MAAI,CAAC,EAAG,QAAO;AACf,MAAI,UAAU,KAAK,CAAC,EAAG,QAAO;AAC9B,aAAW,EAAE,IAAI,OAAO,KAAK,UAAU;AACrC,QAAI,GAAG,KAAK,CAAC,EAAG,QAAO;AAAA,EACzB;AACA,SAAO;AACT;AAWO,SAAS,cACd,QACA,MAOS;AACT,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO,KAAK,UAAU,IAAI,UAAU;AAAA,IACtC,KAAK;AACH,aAAO,KAAK,UAAU,IAAI,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,IAKzC,KAAK;AACH,aAAO,KAAK;AAAA,IACd,KAAK;AACH,aAAO,KAAK;AAAA,EAChB;AACF;","names":[]}

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

@@ -0,0 +1,51 @@
+import type { PotterMessage } from './potter-context';
+export interface PotterThreadRecord {
+    id: string;
+    /** First thing the merchant said, trimmed. What the history list shows. */
+    title: string;
+    messages: PotterMessage[];
+    /** Epoch ms. Sorted on this, newest first. */
+    updatedAt: number;
+}
+/**
+ * Every accessor is wrapped.
+ *
+ * Private mode throws on `localStorage` access in some browsers rather than
+ * returning null, and a merchant in a private window should still be able to
+ * ask a question — they simply will not keep it.
+ */
+export declare function listThreads(tenantSlug: string | undefined): PotterThreadRecord[];
+/**
+ * Write one thread, newest first, capped.
+ *
+ * An empty thread is not saved: opening the panel and closing it again should
+ * not leave a row in the history reading "Untitled".
+ */
+export declare function saveThread(tenantSlug: string | undefined, thread: PotterThreadRecord): void;
+export declare function deleteThread(tenantSlug: string | undefined, id: string): void;
+/**
+ * The name a conversation gets in the list.
+ *
+ * The merchant's first sentence, not Box's reply and not a summary: it is
+ * the thing they will recognise, and it is already written. Cut on a word
+ * boundary so the list never ends mid-syllable.
+ */
+export declare function titleFor(messages: PotterMessage[]): string;
+/** Relative, and short — a history list is scanned, not read. */
+export declare function whenLabel(updatedAt: number): string;
+/**
+ * The stamp above a conversation — `Today 08:01`, the way Linear's thread does.
+ *
+ * NOT `whenLabel`, and the difference is the job each does. That one is
+ * relative — "3h ago", "Yesterday" — which is right in a LIST you are scanning
+ * to find the conversation you want. This one sits above the conversation you
+ * are already reading, where relative time answers a question nobody asked and
+ * the actual clock time is what you would quote to a colleague.
+ *
+ * The day is dropped when it is today's, because a line that reads "Today" and
+ * a line that reads "Today 08:01" carry the same information and one of them is
+ * shorter.
+ */
+export declare function dayStamp(at: number): string;
+export declare function readActiveThreadId(tenantSlug: string | undefined): string | null;
+export declare function writeActiveThreadId(tenantSlug: string | undefined, id: string | null): void;

package/dist/potter/potter-history.js

@@ -0,0 +1,98 @@
+"use client";
+const CAP = 20;
+const key = (tenantSlug) => `pb_potter_threads_${tenantSlug}`;
+function listThreads(tenantSlug) {
+  if (!tenantSlug) return [];
+  try {
+    const raw = localStorage.getItem(key(tenantSlug));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((t) => t && typeof t.id === "string" && Array.isArray(t.messages)).sort((a, b) => (b.updatedAt ?? 0) - (a.updatedAt ?? 0));
+  } catch {
+    return [];
+  }
+}
+function saveThread(tenantSlug, thread) {
+  if (!tenantSlug || thread.messages.length === 0) return;
+  try {
+    const rest = listThreads(tenantSlug).filter((t) => t.id !== thread.id);
+    const next = [thread, ...rest].slice(0, CAP);
+    localStorage.setItem(key(tenantSlug), JSON.stringify(next));
+  } catch {
+  }
+}
+function deleteThread(tenantSlug, id) {
+  if (!tenantSlug) return;
+  try {
+    const next = listThreads(tenantSlug).filter((t) => t.id !== id);
+    localStorage.setItem(key(tenantSlug), JSON.stringify(next));
+  } catch {
+  }
+}
+function titleFor(messages) {
+  const first = messages.find((m) => m.role === "you")?.text.trim();
+  if (!first) return "New conversation";
+  if (first.length <= 48) return first;
+  const cut = first.slice(0, 48);
+  const lastSpace = cut.lastIndexOf(" ");
+  return `${lastSpace > 24 ? cut.slice(0, lastSpace) : cut}\u2026`;
+}
+function whenLabel(updatedAt) {
+  const mins = Math.floor((Date.now() - updatedAt) / 6e4);
+  if (mins < 1) return "Just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days === 1) return "Yesterday";
+  if (days < 7) return `${days}d ago`;
+  return new Date(updatedAt).toLocaleDateString(void 0, {
+    day: "numeric",
+    month: "short"
+  });
+}
+function dayStamp(at) {
+  const then = new Date(at);
+  const time = then.toLocaleTimeString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+  const midnight = /* @__PURE__ */ new Date();
+  midnight.setHours(0, 0, 0, 0);
+  const days = Math.floor((midnight.getTime() - then.getTime()) / 864e5) + 1;
+  if (days <= 0) return `Today ${time}`;
+  if (days === 1) return `Yesterday ${time}`;
+  return `${then.toLocaleDateString(void 0, {
+    day: "numeric",
+    month: "short"
+  })} ${time}`;
+}
+const ACTIVE = (tenantSlug) => `pb_potter_active_${tenantSlug}`;
+function readActiveThreadId(tenantSlug) {
+  if (!tenantSlug) return null;
+  try {
+    return sessionStorage.getItem(ACTIVE(tenantSlug));
+  } catch {
+    return null;
+  }
+}
+function writeActiveThreadId(tenantSlug, id) {
+  if (!tenantSlug) return;
+  try {
+    if (id) sessionStorage.setItem(ACTIVE(tenantSlug), id);
+    else sessionStorage.removeItem(ACTIVE(tenantSlug));
+  } catch {
+  }
+}
+export {
+  dayStamp,
+  deleteThread,
+  listThreads,
+  readActiveThreadId,
+  saveThread,
+  titleFor,
+  whenLabel,
+  writeActiveThreadId
+};
+//# sourceMappingURL=potter-history.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-history.ts"],"sourcesContent":["'use client';\n\nimport type { PotterMessage } from './potter-context';\n\n/**\n * Conversations, kept.\n *\n * There was no history. `messages` lived in a `useState` inside the provider,\n * so a reload, a hard navigation, or pressing Close — which calls `clear()` —\n * took the conversation with it. Asking Box something twice meant asking it\n * from nothing twice, and \"what did it tell me yesterday\" had no answer.\n *\n * LOCAL, NOT SERVER, and deliberately. There is no conversations endpoint, and\n * inventing a client-side id scheme that a future one has to honour is worse\n * than storing this where it plainly belongs to one browser. When the endpoint\n * lands, this module is the seam: same four functions, a different body.\n *\n * PER TENANT. A person with four workspaces asking about each one's takings\n * must not see the answers mixed, and a shared key would also leak a client\n * name from one business into another's list.\n */\n\nconst CAP = 20;\n\nexport interface PotterThreadRecord {\n  id: string;\n  /** First thing the merchant said, trimmed. What the history list shows. */\n  title: string;\n  messages: PotterMessage[];\n  /** Epoch ms. Sorted on this, newest first. */\n  updatedAt: number;\n}\n\nconst key = (tenantSlug: string) => `pb_potter_threads_${tenantSlug}`;\n\n/**\n * Every accessor is wrapped.\n *\n * Private mode throws on `localStorage` access in some browsers rather than\n * returning null, and a merchant in a private window should still be able to\n * ask a question — they simply will not keep it.\n */\nexport function listThreads(\n  tenantSlug: string | undefined,\n): PotterThreadRecord[] {\n  if (!tenantSlug) return [];\n  try {\n    const raw = localStorage.getItem(key(tenantSlug));\n    if (!raw) return [];\n    const parsed = JSON.parse(raw) as unknown;\n    if (!Array.isArray(parsed)) return [];\n    return (parsed as PotterThreadRecord[])\n      .filter((t) => t && typeof t.id === 'string' && Array.isArray(t.messages))\n      .sort((a, b) => (b.updatedAt ?? 0) - (a.updatedAt ?? 0));\n  } catch {\n    return [];\n  }\n}\n\n/**\n * Write one thread, newest first, capped.\n *\n * An empty thread is not saved: opening the panel and closing it again should\n * not leave a row in the history reading \"Untitled\".\n */\nexport function saveThread(\n  tenantSlug: string | undefined,\n  thread: PotterThreadRecord,\n): void {\n  if (!tenantSlug || thread.messages.length === 0) return;\n  try {\n    const rest = listThreads(tenantSlug).filter((t) => t.id !== thread.id);\n    const next = [thread, ...rest].slice(0, CAP);\n    localStorage.setItem(key(tenantSlug), JSON.stringify(next));\n  } catch {\n    // Full, or blocked. The conversation on screen is unaffected.\n  }\n}\n\nexport function deleteThread(tenantSlug: string | undefined, id: string): void {\n  if (!tenantSlug) return;\n  try {\n    const next = listThreads(tenantSlug).filter((t) => t.id !== id);\n    localStorage.setItem(key(tenantSlug), JSON.stringify(next));\n  } catch {\n    // Nothing to do; the caller re-reads the list either way.\n  }\n}\n\n/**\n * The name a conversation gets in the list.\n *\n * The merchant's first sentence, not Box's reply and not a summary: it is\n * the thing they will recognise, and it is already written. Cut on a word\n * boundary so the list never ends mid-syllable.\n */\nexport function titleFor(messages: PotterMessage[]): string {\n  const first = messages.find((m) => m.role === 'you')?.text.trim();\n  if (!first) return 'New conversation';\n  if (first.length <= 48) return first;\n  const cut = first.slice(0, 48);\n  const lastSpace = cut.lastIndexOf(' ');\n  return `${lastSpace > 24 ? cut.slice(0, lastSpace) : cut}…`;\n}\n\n/** Relative, and short — a history list is scanned, not read. */\nexport function whenLabel(updatedAt: number): string {\n  const mins = Math.floor((Date.now() - updatedAt) / 60000);\n  if (mins < 1) return 'Just now';\n  if (mins < 60) return `${mins}m ago`;\n  const hours = Math.floor(mins / 60);\n  if (hours < 24) return `${hours}h ago`;\n  const days = Math.floor(hours / 24);\n  if (days === 1) return 'Yesterday';\n  if (days < 7) return `${days}d ago`;\n  return new Date(updatedAt).toLocaleDateString(undefined, {\n    day: 'numeric',\n    month: 'short',\n  });\n}\n\n/**\n * The stamp above a conversation — `Today 08:01`, the way Linear's thread does.\n *\n * NOT `whenLabel`, and the difference is the job each does. That one is\n * relative — \"3h ago\", \"Yesterday\" — which is right in a LIST you are scanning\n * to find the conversation you want. This one sits above the conversation you\n * are already reading, where relative time answers a question nobody asked and\n * the actual clock time is what you would quote to a colleague.\n *\n * The day is dropped when it is today's, because a line that reads \"Today\" and\n * a line that reads \"Today 08:01\" carry the same information and one of them is\n * shorter.\n */\nexport function dayStamp(at: number): string {\n  const then = new Date(at);\n  const time = then.toLocaleTimeString(undefined, {\n    hour: '2-digit',\n    minute: '2-digit',\n  });\n  const midnight = new Date();\n  midnight.setHours(0, 0, 0, 0);\n  const days = Math.floor((midnight.getTime() - then.getTime()) / 86400000) + 1;\n  if (days <= 0) return `Today ${time}`;\n  if (days === 1) return `Yesterday ${time}`;\n  return `${then.toLocaleDateString(undefined, {\n    day: 'numeric',\n    month: 'short',\n  })} ${time}`;\n}\n\n/**\n * Which conversation was open, so a reload does not start a new one.\n *\n * The transcript itself is already in `listThreads`; this is only the pointer\n * at it. `sessionStorage`, not `localStorage`: reopening the browser tomorrow\n * should land on a fresh Box, while a refresh — or following a link out to\n * a record and coming back — should not lose the thread you were in the middle\n * of. That is the same reasoning the storefront's tab session uses.\n */\nconst ACTIVE = (tenantSlug: string) => `pb_potter_active_${tenantSlug}`;\n\nexport function readActiveThreadId(\n  tenantSlug: string | undefined,\n): string | null {\n  if (!tenantSlug) return null;\n  try {\n    return sessionStorage.getItem(ACTIVE(tenantSlug));\n  } catch {\n    return null;\n  }\n}\n\nexport function writeActiveThreadId(\n  tenantSlug: string | undefined,\n  id: string | null,\n): void {\n  if (!tenantSlug) return;\n  try {\n    if (id) sessionStorage.setItem(ACTIVE(tenantSlug), id);\n    else sessionStorage.removeItem(ACTIVE(tenantSlug));\n  } catch {\n    // Private mode. The conversation still works; it just will not come back.\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/potter/potter-image-grid.d.ts

@@ -0,0 +1,41 @@
+import type { PotterAttachment } from './potter-attach';
+/**
+ * Pictures waiting in the composer, as pictures.
+ *
+ * WHAT THIS REPLACED, and John's words for it: a chip carrying
+ * `_designerbabe_1718527507_3391577010625190628_15287514660.jpg`, then
+ * `1440 × 1800 · Box cannot read pictures yet` — *"theres no need to add
+ * this … just the image"*. He is right on all three counts:
+ *
+ *   the filename    is not a name. That string identifies the picture to
+ *                   Instagram's CDN and to nobody else, and it wrapped over two
+ *                   lines of a composer that is meant to be a place to type.
+ *   the dimensions  answer a question nobody asked. `1440 × 1800` cannot change
+ *                   what you do next; the thumbnail already tells you whether
+ *                   you picked the right photograph, which is the only thing
+ *                   being decided here.
+ *   the admission   is still made — in the turn, after sending, where a limit
+ *                   belongs. Repeated once per picture in the composer it was
+ *                   five copies of the same sentence stacked above the box.
+ *
+ * So: the picture, cropped square, and nothing else. A row of them, because
+ * five squares read as a set you can check at a glance where five stacked rows
+ * read as a list you have to work through.
+ *
+ * SQUARE AND CROPPED rather than fitted. A grid of mixed aspect ratios is a
+ * ragged edge, and the crop is the same one the media library shows — so what
+ * you see here is what the picture will look like where it lands.
+ *
+ * NOTHING SNAPS, which was the other half of the note: *"when we add images it
+ * expands there needs to be animation then when we roemove it shodlnt snap it
+ * should be fluid sping physics"*. Each square arrives and leaves on a spring,
+ * `layout` slides its neighbours along to close the gap, and the composer's own
+ * well grows and shrinks around them on the same spring rather than jumping to
+ * its new height.
+ */
+export declare function PotterImageGrid({ images, onRemove, }: {
+    images: Extract<PotterAttachment, {
+        kind: 'image';
+    }>[];
+    onRemove: (file: File) => void;
+}): import("react").JSX.Element;