@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1,134 @@
+"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 PotterAttachmentChip({
+  attachment,
+  onRemove,
+  /** Compact: inside a queued card, where there is one line to spend. */
+  compact = false
+}) {
+  const name = attachment.file.name;
+  if (compact) {
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex min-w-0 shrink-0 items-center gap-2 rounded-[var(--radius-card)] bg-[var(--bg-base)] py-1 pl-1 pr-2 text-2xs text-[var(--text-tertiary)]", children: [
+      /* @__PURE__ */ jsx(Thumb, { attachment, size: 20 }),
+      /* @__PURE__ */ jsx("span", { className: "max-w-32 truncate", children: name })
+    ] });
+  }
+  const bad = attachment.kind === "sheet" && (Boolean(attachment.sheet.problem) || !attachment.sheet.recognised.includes("title"));
+  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-center gap-3 rounded-[var(--radius-card)] p-2",
+      children: [
+        /* @__PURE__ */ jsx(Thumb, { attachment, size: 40 }),
+        /* @__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: name }),
+          /* @__PURE__ */ jsx(Detail, { attachment, bad })
+        ] }),
+        onRemove && /* @__PURE__ */ jsx(
+          motion.button,
+          {
+            type: "button",
+            onClick: onRemove,
+            "aria-label": `Remove ${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]" })
+          }
+        )
+      ]
+    }
+  );
+}
+function Thumb({
+  attachment,
+  size
+}) {
+  if (attachment.kind === "image") {
+    return (
+      /* A plain `img`, not `next/image`: this is an object URL for a file the
+         merchant chose a moment ago, so there is nothing to optimise, no
+         remote host to configure, and a loader in front of it would be a round
+         trip to nowhere. */
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: attachment.url,
+          alt: "",
+          width: size,
+          height: size,
+          style: { width: size, height: size },
+          className: "shrink-0 rounded-[var(--radius-card)] object-cover"
+        }
+      )
+    );
+  }
+  const { headers, preview } = sheetGlimpse(attachment.sheet);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      style: { width: size, height: size },
+      className: "grid shrink-0 content-start gap-px overflow-hidden rounded-[var(--radius-card)] bg-[var(--bg-base)] p-1",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex gap-px", children: headers.map((h, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "h-1 flex-1 rounded-px bg-[var(--text-tertiary)]",
+            title: h
+          },
+          i
+        )) }),
+        preview.map((row, i) => /* @__PURE__ */ jsx("span", { className: "flex gap-px", children: row.map((_, j) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "h-1 flex-1 rounded-px bg-[var(--border-default)]"
+          },
+          j
+        )) }, i))
+      ]
+    }
+  );
+}
+function sheetGlimpse(sheet) {
+  const headers = sheet.headers.slice(0, 2);
+  const depth = Math.min(sheet.rows, 3);
+  return {
+    headers: headers.length ? headers : ["", ""],
+    preview: Array.from({ length: depth }, () => headers.map(() => ""))
+  };
+}
+function Detail({
+  attachment,
+  bad
+}) {
+  if (attachment.kind === "image") {
+    return /* @__PURE__ */ jsx("p", { className: "truncate text-2xs text-[var(--text-tertiary)]", children: attachment.width && attachment.height ? `${attachment.width} \xD7 ${attachment.height} \xB7 Box cannot read pictures yet` : "Box cannot read pictures yet" });
+  }
+  const sheet = attachment.sheet;
+  if (bad) {
+    return /* @__PURE__ */ jsxs("p", { className: "flex items-start gap-1 text-2xs text-[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." })
+    ] });
+  }
+  const columns = IMPORT_FIELDS.filter((f) => sheet.recognised.includes(f.key)).map((f) => f.label).slice(0, 4);
+  return /* @__PURE__ */ jsxs("p", { className: "truncate text-2xs text-[var(--text-tertiary)]", children: [
+    sheet.rows,
+    " rows \xB7 ",
+    columns.join(", ")
+  ] });
+}
+export {
+  PotterAttachmentChip
+};
+//# sourceMappingURL=potter-attachment-chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-attachment-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 { PotterAttachment } from './potter-attach';\n\n/**\n * An attachment waiting in the composer, with something to look at.\n *\n * JOHN: *\"there shudl be an imagery for every attachment\"*. He is right, and\n * the first version had none — a filename and a line of text, which is what a\n * settings row looks like. A thing you picked and can still remove should look\n * like a thing.\n *\n * BUT NOT THE SAME IMAGERY, because the two kinds do not have the same answer\n * to \"is this the right file\".\n *\n *   A PHOTOGRAPH IS ITS OWN THUMBNAIL. Nothing else identifies it — the\n *   filename is `IMG_4821.jpg` — so the picture is the only useful thing that\n *   can go in that square, cropped rather than letterboxed so it fills it.\n *\n *   A SPREADSHEET HAS NO PICTURE, and the two usual substitutes are both\n *   useless: a generic file glyph says nothing at all, and a filename says\n *   almost nothing, because the file is called `export (3).csv`. What it HAS\n *   is contents, and we have already parsed them. So its thumbnail is a few\n *   real cells from the file — the same trick a file manager plays, and the\n *   only version of \"imagery\" that answers the question a merchant is actually\n *   asking before they press send.\n *\n * The line underneath is what decides whether it will work: for a sheet, the\n * columns we RECOGNISED; for a picture, the plain admission that Box cannot\n * read it. Both are said HERE, before sending, rather than after a wasted turn.\n */\nexport function PotterAttachmentChip({\n  attachment,\n  onRemove,\n  /** Compact: inside a queued card, where there is one line to spend. */\n  compact = false,\n}: {\n  attachment: PotterAttachment;\n  onRemove?: () => void;\n  compact?: boolean;\n}) {\n  const name = attachment.file.name;\n\n  if (compact) {\n    return (\n      <span className=\"inline-flex min-w-0 shrink-0 items-center gap-2 rounded-[var(--radius-card)] bg-[var(--bg-base)] py-1 pl-1 pr-2 text-2xs text-[var(--text-tertiary)]\">\n        <Thumb attachment={attachment} size={20} />\n        <span className=\"max-w-32 truncate\">{name}</span>\n      </span>\n    );\n  }\n\n  const bad =\n    attachment.kind === 'sheet' &&\n    (Boolean(attachment.sheet.problem) ||\n      !attachment.sheet.recognised.includes('title'));\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-center gap-3 rounded-[var(--radius-card)] p-2\"\n    >\n      <Thumb attachment={attachment} size={40} />\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          {name}\n        </p>\n        <Detail attachment={attachment} bad={bad} />\n      </div>\n\n      {onRemove && (\n        <motion.button\n          type=\"button\"\n          onClick={onRemove}\n          aria-label={`Remove ${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\n/** The square. A picture of the picture, or a picture of the data. */\nfunction Thumb({\n  attachment,\n  size,\n}: {\n  attachment: PotterAttachment;\n  size: number;\n}) {\n  if (attachment.kind === 'image') {\n    return (\n      /* A plain `img`, not `next/image`: this is an object URL for a file the\n         merchant chose a moment ago, so there is nothing to optimise, no\n         remote host to configure, and a loader in front of it would be a round\n         trip to nowhere. */\n      // eslint-disable-next-line @next/next/no-img-element\n      <img\n        src={attachment.url}\n        alt=\"\"\n        width={size}\n        height={size}\n        style={{ width: size, height: size }}\n        className=\"shrink-0 rounded-[var(--radius-card)] object-cover\"\n      />\n    );\n  }\n\n  const { headers, preview } = sheetGlimpse(attachment.sheet);\n\n  return (\n    <span\n      aria-hidden\n      style={{ width: size, height: size }}\n      className=\"grid shrink-0 content-start gap-px overflow-hidden rounded-[var(--radius-card)] bg-[var(--bg-base)] p-1\"\n    >\n      {/* The header row reads as a header — one shade brighter, the way it\n          would in the sheet itself. Two columns, because at 40px a third is a\n          smudge rather than information. */}\n      <span className=\"flex gap-px\">\n        {headers.map((h, i) => (\n          <span\n            key={i}\n            className=\"h-1 flex-1 rounded-px bg-[var(--text-tertiary)]\"\n            title={h}\n          />\n        ))}\n      </span>\n      {preview.map((row, i) => (\n        <span key={i} className=\"flex gap-px\">\n          {row.map((_, j) => (\n            <span\n              key={j}\n              className=\"h-1 flex-1 rounded-px bg-[var(--border-default)]\"\n            />\n          ))}\n        </span>\n      ))}\n    </span>\n  );\n}\n\n/** Two columns and three rows of it — enough to read as a table at 40px. */\nfunction sheetGlimpse(sheet: { headers: string[]; rows: number }) {\n  const headers = sheet.headers.slice(0, 2);\n  const depth = Math.min(sheet.rows, 3);\n  return {\n    headers: headers.length ? headers : ['', ''],\n    preview: Array.from({ length: depth }, () => headers.map(() => '')),\n  };\n}\n\nfunction Detail({\n  attachment,\n  bad,\n}: {\n  attachment: PotterAttachment;\n  bad: boolean;\n}) {\n  if (attachment.kind === 'image') {\n    return (\n      <p className=\"truncate text-2xs text-[var(--text-tertiary)]\">\n        {attachment.width && attachment.height\n          ? `${attachment.width} × ${attachment.height} · Box cannot read pictures yet`\n          : 'Box cannot read pictures yet'}\n      </p>\n    );\n  }\n\n  const sheet = attachment.sheet;\n\n  if (bad) {\n    return (\n      <p className=\"flex items-start gap-1 text-2xs text-[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  }\n\n  const columns = IMPORT_FIELDS.filter((f) => sheet.recognised.includes(f.key))\n    .map((f) => f.label)\n    .slice(0, 4);\n\n  return (\n    <p className=\"truncate text-2xs text-[var(--text-tertiary)]\">\n      {sheet.rows} rows · {columns.join(', ')}\n    </p>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/potter/potter-block-breakdown.d.ts

@@ -0,0 +1,34 @@
+import type { PotterBlock } from './potter-blocks';
+/**
+ * Why a number moved, as the parts that moved it.
+ *
+ * THE BLOCK THE READ-ONLY BRAIN DOES NOT HAVE. `metric` answers "how much" and
+ * `list` answers "which ones"; neither answers "why", which is the question
+ * `docs/POTTER_BRAIN_SPEC.md` leaves open and the one a merchant actually asks
+ * when a number is down. Asked "why" today, a model holding only a revenue
+ * delta will reach for a cause it cannot see, and a confident invented cause is
+ * the single failure this whole surface is written against.
+ *
+ * SO THE TOOL DECOMPOSES AND THE MODEL NARRATES. The rows are the answer; the
+ * sentence above them is a reading of the rows. Nothing here is inferred by the
+ * model — `cause` is a fact the query established ("out of stock"), not a
+ * guess it made.
+ *
+ * THE ROWS MUST SUM TO THE TOTAL, and the bar is how that is enforced in the
+ * open rather than in a docblock nobody re-reads. Each `share` is that row's
+ * fraction of the total move, the segments are drawn end to end, and shares
+ * that do not add up leave visible track at the right. An explanation with a
+ * hole in it LOOKS like an explanation with a hole in it, instead of reading as
+ * complete because the prose was fluent. That residue is the honest outcome:
+ * "most of it is this, and some of it we cannot see".
+ *
+ * ONLY THE TOTAL IS COLOURED. Six red numbers stacked under a red number is a
+ * wall with no ranking in it. The bar carries the ranking, in one hue at
+ * descending strength, and the amounts stay in the reading ink so they can be
+ * compared as numbers rather than as alarms.
+ */
+export declare function BreakdownBlock({ block, }: {
+    block: Extract<PotterBlock, {
+        kind: 'breakdown';
+    }>;
+}): import("react").JSX.Element;

package/dist/potter/potter-block-breakdown.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TrendingDown, TrendingUp } from "lucide-react";
+import { Go, BlockRow } from "./potter-block-door";
+function BreakdownBlock({
+  block
+}) {
+  const up = (block.delta ?? 0) >= 0;
+  const tone = up ? "var(--success)" : "var(--error)";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "surface-inset rounded-[var(--radius-card)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "p-3 pb-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--text-tertiary)]", children: block.label }),
+          /* @__PURE__ */ jsxs(
+            "p",
+            {
+              className: "flex items-center gap-1 text-sm font-semibold tabular-nums",
+              style: { color: tone },
+              children: [
+                up ? /* @__PURE__ */ jsx(TrendingUp, {}) : /* @__PURE__ */ jsx(TrendingDown, {}),
+                block.total
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Bar, { rows: block.rows, tone })
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "divide-y divide-[var(--border-subtle)] border-t border-[var(--border-subtle)]", children: block.rows.map((r) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(BlockRow, { href: r.href, children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-baseline gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-[var(--text-primary)]", children: r.title }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-2xs text-[var(--text-tertiary)]", children: r.cause })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm tabular-nums text-[var(--text-primary)]", children: r.amount })
+      ] }) }) }, r.id)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsx(Go, { href: block.href, label: block.cta }),
+      block.action && /* @__PURE__ */ jsx(Go, { href: block.action.href, label: block.action.label })
+    ] })
+  ] });
+}
+function Bar({
+  rows,
+  tone
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "mt-2 flex h-1 gap-0.5 overflow-hidden rounded-full bg-[var(--border-subtle)]", children: rows.map((r, i) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "h-full first:rounded-l-full last:rounded-r-full",
+      style: {
+        width: `${Math.max(0, Math.min(1, r.share)) * 100}%`,
+        background: tone,
+        /* Ranked by strength, floored so the tail is still visible against
+           the track rather than fading into it. */
+        opacity: Math.max(0.35, 1 - i * 0.18)
+      }
+    },
+    r.id
+  )) });
+}
+export {
+  BreakdownBlock
+};
+//# sourceMappingURL=potter-block-breakdown.js.map

package/dist/potter/potter-block-breakdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-block-breakdown.tsx"],"sourcesContent":["'use client';\n\nimport { TrendingDown, TrendingUp } from 'lucide-react';\nimport { Go, BlockRow } from './potter-block-door';\nimport type { PotterBlock } from './potter-blocks';\n\n/**\n * Why a number moved, as the parts that moved it.\n *\n * THE BLOCK THE READ-ONLY BRAIN DOES NOT HAVE. `metric` answers \"how much\" and\n * `list` answers \"which ones\"; neither answers \"why\", which is the question\n * `docs/POTTER_BRAIN_SPEC.md` leaves open and the one a merchant actually asks\n * when a number is down. Asked \"why\" today, a model holding only a revenue\n * delta will reach for a cause it cannot see, and a confident invented cause is\n * the single failure this whole surface is written against.\n *\n * SO THE TOOL DECOMPOSES AND THE MODEL NARRATES. The rows are the answer; the\n * sentence above them is a reading of the rows. Nothing here is inferred by the\n * model — `cause` is a fact the query established (\"out of stock\"), not a\n * guess it made.\n *\n * THE ROWS MUST SUM TO THE TOTAL, and the bar is how that is enforced in the\n * open rather than in a docblock nobody re-reads. Each `share` is that row's\n * fraction of the total move, the segments are drawn end to end, and shares\n * that do not add up leave visible track at the right. An explanation with a\n * hole in it LOOKS like an explanation with a hole in it, instead of reading as\n * complete because the prose was fluent. That residue is the honest outcome:\n * \"most of it is this, and some of it we cannot see\".\n *\n * ONLY THE TOTAL IS COLOURED. Six red numbers stacked under a red number is a\n * wall with no ranking in it. The bar carries the ranking, in one hue at\n * descending strength, and the amounts stay in the reading ink so they can be\n * compared as numbers rather than as alarms.\n */\nexport function BreakdownBlock({\n  block,\n}: {\n  block: Extract<PotterBlock, { kind: 'breakdown' }>;\n}) {\n  const up = (block.delta ?? 0) >= 0;\n  const tone = up ? 'var(--success)' : 'var(--error)';\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"surface-inset rounded-[var(--radius-card)]\">\n        <div className=\"p-3 pb-2\">\n          <div className=\"flex items-baseline justify-between gap-3\">\n            <p className=\"text-2xs text-[var(--text-tertiary)]\">\n              {block.label}\n            </p>\n            {/* The arrow carries the sign so the colour is not doing it alone,\n                the same reason `MetricBlock` draws one: a red number is\n                unreadable to the people red is hardest for. */}\n            <p\n              className=\"flex items-center gap-1 text-sm font-semibold tabular-nums\"\n              style={{ color: tone }}\n            >\n              {up ? <TrendingUp /> : <TrendingDown />}\n              {block.total}\n            </p>\n          </div>\n\n          <Bar rows={block.rows} tone={tone} />\n        </div>\n\n        <ul className=\"divide-y divide-[var(--border-subtle)] border-t border-[var(--border-subtle)]\">\n          {block.rows.map((r) => (\n            <li key={r.id}>\n              <BlockRow href={r.href}>\n                <div className=\"flex items-baseline justify-between gap-3\">\n                  <span className=\"flex min-w-0 items-baseline gap-2\">\n                    <span className=\"truncate text-sm text-[var(--text-primary)]\">\n                      {r.title}\n                    </span>\n                    <span className=\"shrink-0 text-2xs text-[var(--text-tertiary)]\">\n                      {r.cause}\n                    </span>\n                  </span>\n                  <span className=\"shrink-0 text-sm tabular-nums text-[var(--text-primary)]\">\n                    {r.amount}\n                  </span>\n                </div>\n              </BlockRow>\n            </li>\n          ))}\n        </ul>\n      </div>\n\n      <div className=\"flex flex-wrap gap-2\">\n        <Go href={block.href} label={block.cta} />\n        {/* The second door is the one that DOES something about the answer, and\n            it is the seam where reading turns into acting. It is an href today\n            because nothing in this surface may write yet; when layer B lands it\n            becomes a `draft` block in the same turn and this prop goes away. */}\n        {block.action && (\n          <Go href={block.action.href} label={block.action.label} />\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * The contributions, end to end, at descending strength.\n *\n * `share` is clamped rather than normalised. Normalising would make ANY set of\n * shares fill the bar exactly, which is precisely the lie this is here to\n * prevent — a decomposition that does not add up must not be able to draw\n * itself as one that does.\n */\nfunction Bar({\n  rows,\n  tone,\n}: {\n  rows: Extract<PotterBlock, { kind: 'breakdown' }>['rows'];\n  tone: string;\n}) {\n  return (\n    <div className=\"mt-2 flex h-1 gap-0.5 overflow-hidden rounded-full bg-[var(--border-subtle)]\">\n      {rows.map((r, i) => (\n        <span\n          key={r.id}\n          className=\"h-full first:rounded-l-full last:rounded-r-full\"\n          style={{\n            width: `${Math.max(0, Math.min(1, r.share)) * 100}%`,\n            background: tone,\n            /* Ranked by strength, floored so the tail is still visible against\n               the track rather than fading into it. */\n            opacity: Math.max(0.35, 1 - i * 0.18),\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AA+CY,cAMA,YANA;AA7CZ,SAAS,cAAc,kBAAkB;AACzC,SAAS,IAAI,gBAAgB;AA+BtB,SAAS,eAAe;AAAA,EAC7B;AACF,GAEG;AACD,QAAM,MAAM,MAAM,SAAS,MAAM;AACjC,QAAM,OAAO,KAAK,mBAAmB;AAErC,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,8CACb;AAAA,2BAAC,SAAI,WAAU,YACb;AAAA,6BAAC,SAAI,WAAU,6CACb;AAAA,8BAAC,OAAE,WAAU,wCACV,gBAAM,OACT;AAAA,UAIA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,KAAK;AAAA,cAEpB;AAAA,qBAAK,oBAAC,cAAW,IAAK,oBAAC,gBAAa;AAAA,gBACpC,MAAM;AAAA;AAAA;AAAA,UACT;AAAA,WACF;AAAA,QAEA,oBAAC,OAAI,MAAM,MAAM,MAAM,MAAY;AAAA,SACrC;AAAA,MAEA,oBAAC,QAAG,WAAU,iFACX,gBAAM,KAAK,IAAI,CAAC,MACf,oBAAC,QACC,8BAAC,YAAS,MAAM,EAAE,MAChB,+BAAC,SAAI,WAAU,6CACb;AAAA,6BAAC,UAAK,WAAU,qCACd;AAAA,8BAAC,UAAK,WAAU,+CACb,YAAE,OACL;AAAA,UACA,oBAAC,UAAK,WAAU,iDACb,YAAE,OACL;AAAA,WACF;AAAA,QACA,oBAAC,UAAK,WAAU,4DACb,YAAE,QACL;AAAA,SACF,GACF,KAfO,EAAE,EAgBX,CACD,GACH;AAAA,OACF;AAAA,IAEA,qBAAC,SAAI,WAAU,wBACb;AAAA,0BAAC,MAAG,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA,MAKvC,MAAM,UACL,oBAAC,MAAG,MAAM,MAAM,OAAO,MAAM,OAAO,MAAM,OAAO,OAAO;AAAA,OAE5D;AAAA,KACF;AAEJ;AAUA,SAAS,IAAI;AAAA,EACX;AAAA,EACA;AACF,GAGG;AACD,SACE,oBAAC,SAAI,WAAU,gFACZ,eAAK,IAAI,CAAC,GAAG,MACZ;AAAA,IAAC;AAAA;AAAA,MAEC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,OAAO,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,EAAE,KAAK,CAAC,IAAI,GAAG;AAAA,QACjD,YAAY;AAAA;AAAA;AAAA,QAGZ,SAAS,KAAK,IAAI,MAAM,IAAI,IAAI,IAAI;AAAA,MACtC;AAAA;AAAA,IARK,EAAE;AAAA,EAST,CACD,GACH;AAEJ;","names":[]}

package/dist/potter/potter-block-door.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The door under a block, and the pressable row inside one.
+ *
+ * BOTH LIVED IN `potter-blocks.tsx` and both are now needed by blocks that
+ * cannot live in that file without pushing it past the 500-line rule. Pulling
+ * them out here rather than importing them back out of `potter-blocks` also
+ * breaks what would otherwise be a runtime import cycle: the union's dispatcher
+ * imports the block components, so a block component importing a VALUE back
+ * from the dispatcher's file closes the loop. The type it imports is erased, so
+ * `import type { PotterBlock }` is fine in both directions; a function is not.
+ *
+ * THE RULE THEY BOTH ENCODE: following an answer means going to look at the
+ * thing, so Box closes before the push. A drawer left open over the record
+ * you just asked to see is covering the answer.
+ */
+/** The one button under a block: go and look at what was just described. */
+export declare function Go({ href, label }: {
+    href: string;
+    label: string;
+}): import("react").JSX.Element;
+/**
+ * A row inside a block that goes somewhere.
+ *
+ * A raw `<button>` on purpose, and the raw-button note in `CLAUDE.md` names
+ * this exact shape as correct: a list item wrapping content is a pressable
+ * SURFACE, not a button. It carries `type="button"` because the trap that note
+ * describes — a typeless button submitting the form it sits inside — is one
+ * this thread could walk into the moment a block renders next to the composer.
+ */
+export declare function BlockRow({ href, children, }: {
+    href?: string;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The door out of a question Box could not answer.
+ *
+ * A CASE, NOT A ONE-WAY MESSAGE, WHEREVER CASES EXIST — which is the rule the
+ * help page already applies in its own words, and the one this branch was
+ * missing. `openFeedback` POSTs to `/feedback`: it has no thread, no deadline
+ * and no way back to the person who asked, so a merchant whose question Box
+ * fluffed got their sentence filed somewhere they cannot see and no reply. A
+ * case carries an SLA, an admin queue, and every answer lands in the inbox at
+ * `/dashboard/support` and in their email.
+ *
+ * The subject travels on the URL rather than through context, because that is
+ * the contract `SupportInbox` already reads (`?new=1&subject=`) and the one
+ * help hands over on. Nobody describes the same problem twice in two minutes.
+ *
+ * Feedback stays the fallback rather than being deleted: `SERVICE_OPERATIONS`
+ * can be turned off, and the branch that runs then must still reach a human.
+ */
+export declare function AskTheTeam(): null;

package/dist/potter/potter-block-door.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRouter } from "next/navigation";
+import { ArrowRight } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { usePotter } from "./potter-context";
+function Go({ href, label }) {
+  const router = useRouter();
+  const { closePotter } = usePotter();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "secondary",
+      size: "sm",
+      onClick: () => {
+        closePotter();
+        router.push(href);
+      },
+      children: [
+        label,
+        /* @__PURE__ */ jsx(ArrowRight, {})
+      ]
+    }
+  );
+}
+function BlockRow({
+  href,
+  children
+}) {
+  const router = useRouter();
+  const { closePotter } = usePotter();
+  if (!href) {
+    return /* @__PURE__ */ jsx("div", { className: "px-3 py-2", children });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        closePotter();
+        router.push(href);
+      },
+      className: "block w-full px-3 py-2 text-left hover:bg-[var(--interactive-hover)]",
+      children
+    }
+  );
+}
+function AskTheTeam() {
+  return null;
+}
+export {
+  AskTheTeam,
+  BlockRow,
+  Go
+};
+//# sourceMappingURL=potter-block-door.js.map

package/dist/potter/potter-block-door.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-block-door.tsx"],"sourcesContent":["'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { ArrowRight } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { usePotter } from './potter-context';\n\n/**\n * The door under a block, and the pressable row inside one.\n *\n * BOTH LIVED IN `potter-blocks.tsx` and both are now needed by blocks that\n * cannot live in that file without pushing it past the 500-line rule. Pulling\n * them out here rather than importing them back out of `potter-blocks` also\n * breaks what would otherwise be a runtime import cycle: the union's dispatcher\n * imports the block components, so a block component importing a VALUE back\n * from the dispatcher's file closes the loop. The type it imports is erased, so\n * `import type { PotterBlock }` is fine in both directions; a function is not.\n *\n * THE RULE THEY BOTH ENCODE: following an answer means going to look at the\n * thing, so Box closes before the push. A drawer left open over the record\n * you just asked to see is covering the answer.\n */\n\n/** The one button under a block: go and look at what was just described. */\nexport function Go({ href, label }: { href: string; label: string }) {\n  const router = useRouter();\n  const { closePotter } = usePotter();\n  return (\n    <Button\n      variant=\"secondary\"\n      size=\"sm\"\n      onClick={() => {\n        closePotter();\n        router.push(href);\n      }}\n    >\n      {label}\n      <ArrowRight />\n    </Button>\n  );\n}\n\n/**\n * A row inside a block that goes somewhere.\n *\n * A raw `<button>` on purpose, and the raw-button note in `CLAUDE.md` names\n * this exact shape as correct: a list item wrapping content is a pressable\n * SURFACE, not a button. It carries `type=\"button\"` because the trap that note\n * describes — a typeless button submitting the form it sits inside — is one\n * this thread could walk into the moment a block renders next to the composer.\n */\nexport function BlockRow({\n  href,\n  children,\n}: {\n  href?: string;\n  children: React.ReactNode;\n}) {\n  const router = useRouter();\n  const { closePotter } = usePotter();\n\n  /* No href is not a broken row, it is a row with nowhere to go: a contributor\n     Box can name but not link (`Everything else`) still has to render, and\n     rendering it as a dead button would advertise a door that is not there. */\n  if (!href) {\n    return <div className=\"px-3 py-2\">{children}</div>;\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => {\n        closePotter();\n        router.push(href);\n      }}\n      className=\"block w-full px-3 py-2 text-left hover:bg-[var(--interactive-hover)]\"\n    >\n      {children}\n    </button>\n  );\n}\n\n/**\n * The door out of a question Box could not answer.\n *\n * A CASE, NOT A ONE-WAY MESSAGE, WHEREVER CASES EXIST — which is the rule the\n * help page already applies in its own words, and the one this branch was\n * missing. `openFeedback` POSTs to `/feedback`: it has no thread, no deadline\n * and no way back to the person who asked, so a merchant whose question Box\n * fluffed got their sentence filed somewhere they cannot see and no reply. A\n * case carries an SLA, an admin queue, and every answer lands in the inbox at\n * `/dashboard/support` and in their email.\n *\n * The subject travels on the URL rather than through context, because that is\n * the contract `SupportInbox` already reads (`?new=1&subject=`) and the one\n * help hands over on. Nobody describes the same problem twice in two minutes.\n *\n * Feedback stays the fallback rather than being deleted: `SERVICE_OPERATIONS`\n * can be turned off, and the branch that runs then must still reach a human.\n */\nexport function AskTheTeam() {\n  return null;\n}\n"],"mappings":";AA4BI,SASE,KATF;AA1BJ,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAmBnB,SAAS,GAAG,EAAE,MAAM,MAAM,GAAoC;AACnE,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,YAAY,IAAI,UAAU;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,SAAS,MAAM;AACb,oBAAY;AACZ,eAAO,KAAK,IAAI;AAAA,MAClB;AAAA,MAEC;AAAA;AAAA,QACD,oBAAC,cAAW;AAAA;AAAA;AAAA,EACd;AAEJ;AAWO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AACF,GAGG;AACD,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,YAAY,IAAI,UAAU;AAKlC,MAAI,CAAC,MAAM;AACT,WAAO,oBAAC,SAAI,WAAU,aAAa,UAAS;AAAA,EAC9C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAM;AACb,oBAAY;AACZ,eAAO,KAAK,IAAI;AAAA,MAClB;AAAA,MACA,WAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;AAoBO,SAAS,aAAa;AAC3B,SAAO;AACT;","names":[]}

package/dist/potter/potter-block-draft.d.ts

@@ -0,0 +1,61 @@
+import type { PotterBlock, DraftPart } from './potter-blocks';
+/**
+ * A thing Box has made that does not exist yet.
+ *
+ * THE BLOCK THAT BREAKS THE OLD CONTRACT, ON PURPOSE. Every other block ends in
+ * `Go` — a door onto a record that is already in the database, which is what
+ * makes the union honest: an answer that cannot be assembled out of real rows
+ * cannot be expressed. A generated listing has no `href`, because there is
+ * nothing at the other end of it. So a draft cannot borrow any shape that
+ * ships, and pretending otherwise would mean linking to a record that is not
+ * there.
+ *
+ * What replaces the door is a DECISION. The draft is the whole of layer B's
+ * proposal object with a preview attached: the merchant sees the thing, edits
+ * it, and either commits it or throws it away. Nothing is written until they
+ * press the verb.
+ *
+ * GENERATE AND ACT ARE THE SAME COMPONENT, and that is the point rather than a
+ * saving. "Write me a listing" and "create a discount for customers who have
+ * not bought in 60 days" both end in an object that does not exist, a preview
+ * of it, and one button that brings it into being. They differ only in what
+ * `onCommit` calls. Building them as two primitives would have produced two
+ * confirmation models, and the second one would have been the one holding a
+ * refund.
+ *
+ * IT IS EDITABLE IN PLACE because the first thing anybody does with generated
+ * copy is change one word. A draft you must open the product editor to fix has
+ * not saved the merchant the typing, it has moved it — and moved it somewhere
+ * the draft's own context is gone.
+ *
+ * THE VERB IS THE REAL VERB. `commit` says "Create product", never "Accept" or
+ * "Apply". Same reasoning as the export rule in `CLAUDE.md`: the label is the
+ * action, and a merchant about to write to their own business is owed the word
+ * for what happens.
+ */
+/** What a commit did, so the turn can offer a door onto the real record. */
+export interface DraftDone {
+    href: string;
+    cta: string;
+}
+export interface DraftHandlers {
+    /**
+     * Bring the draft into being. Receives the EDITED parts, not the generated
+     * ones — what the merchant approved is what is on screen, which is not
+     * necessarily what the model wrote.
+     */
+    onCommit: (parts: DraftPart[]) => Promise<DraftDone | void> | DraftDone | void;
+    /**
+     * Make this one part again. Per part, never whole-draft: in a campaign of
+     * five the headline is usually fine and the caption is not, and rerolling
+     * all five to fix one is how a merchant loses the version they liked.
+     */
+    onRewrite?: (part: DraftPart) => Promise<DraftPart | void> | DraftPart | void;
+    onDiscard?: () => void;
+}
+export declare function DraftBlock({ block, handlers, }: {
+    block: Extract<PotterBlock, {
+        kind: 'draft';
+    }>;
+    handlers?: DraftHandlers;
+}): import("react").JSX.Element;