@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1,219 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { RefreshCw } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { Input, AutoGrowTextarea } from "@withpotter/ui-kit";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { springs, durations, eases } from "@withpotter/lib/motion";
+import { Go } from "./potter-block-door";
+function DraftBlock({
+  block,
+  handlers
+}) {
+  const [parts, setParts] = useState(block.parts);
+  const [state, setState] = useState("idle");
+  const [done, setDone] = useState(null);
+  const [rewriting, setRewriting] = useState(null);
+  const reduced = useReducedMotion();
+  if (state === "discarded") {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: "Discarded. Nothing was saved." });
+  }
+  function edit(id, value) {
+    setParts(
+      (prev) => prev.map(
+        (p) => p.id === id && (p.kind === "line" || p.kind === "body") ? { ...p, value } : p
+      )
+    );
+  }
+  async function rewrite(part) {
+    if (!handlers?.onRewrite) return;
+    setRewriting(part.id);
+    try {
+      const next = await handlers.onRewrite(part);
+      if (next)
+        setParts((prev) => prev.map((p) => p.id === part.id ? next : p));
+    } finally {
+      setRewriting(null);
+    }
+  }
+  async function commit() {
+    if (!handlers) return;
+    setState("saving");
+    try {
+      const result = await handlers.onCommit(parts);
+      setDone(result ?? null);
+      setState("kept");
+    } catch {
+      setState("failed");
+    }
+  }
+  const busy = state === "saving";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "surface-inset space-y-3 rounded-[var(--radius-card)] p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(StatusBadge, { status: "draft" }),
+        /* @__PURE__ */ jsx("span", { className: "text-2xs text-[var(--text-tertiary)]", children: block.noun })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: parts.map((part) => /* @__PURE__ */ jsx(
+        Part,
+        {
+          part,
+          disabled: busy || state === "kept",
+          rewriting: rewriting === part.id,
+          onEdit: (v) => edit(part.id, v),
+          onRewrite: handlers?.onRewrite ? () => rewrite(part) : void 0
+        },
+        part.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: reduced ? false : { opacity: 0, y: 4 },
+        animate: { opacity: 1, y: 0 },
+        exit: reduced ? { opacity: 0 } : { opacity: 0, y: -4 },
+        transition: reduced ? { duration: 0 } : springs.snappy,
+        children: state === "kept" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-primary)]", children: "Saved." }),
+          done && /* @__PURE__ */ jsx(Go, { href: done.href, label: done.cta })
+        ] }) : /* @__PURE__ */ jsx(
+          Decision,
+          {
+            commit: block.commit,
+            wired: Boolean(handlers),
+            busy,
+            failed: state === "failed",
+            onCommit: commit,
+            onDiscard: handlers ? () => {
+              handlers.onDiscard?.();
+              setState("discarded");
+            } : void 0
+          }
+        )
+      },
+      state === "kept" ? "kept" : "idle"
+    ) })
+  ] });
+}
+function Decision({
+  commit,
+  wired,
+  busy,
+  failed,
+  onCommit,
+  onDiscard
+}) {
+  if (!wired) {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: "This is a preview. Box cannot save it yet." });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onCommit, disabled: busy, children: busy ? "Saving\u2026" : commit }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onDiscard, disabled: busy, children: "Discard" })
+    ] }),
+    failed && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--error)]", children: "That did not save. Your edits are still here \u2014 try again." })
+  ] });
+}
+function Part({
+  part,
+  disabled,
+  rewriting,
+  onEdit,
+  onRewrite
+}) {
+  const reduced = useReducedMotion();
+  const veil = {
+    opacity: rewriting ? 0.4 : 1,
+    transition: reduced ? { duration: 0 } : { duration: durations.fast, ease: eases.settle }
+  };
+  if (part.kind === "fact") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3 border-t border-[var(--border-subtle)] pt-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-2xs text-[var(--text-tertiary)]", children: part.label }),
+      /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          animate: veil,
+          className: "min-w-0 truncate text-sm text-[var(--text-primary)]",
+          children: part.value
+        }
+      )
+    ] });
+  }
+  if (part.kind === "image") {
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        motion.img,
+        {
+          animate: veil,
+          src: part.url,
+          alt: part.alt,
+          className: "aspect-[3/2] w-full rounded-[var(--radius-card)] object-cover"
+        }
+      ),
+      onRewrite && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsx(Rewrite, { onClick: onRewrite, busy: rewriting, disabled }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    part.label && /* @__PURE__ */ jsx("p", { className: "mb-1 text-2xs text-[var(--text-tertiary)]", children: part.label }),
+    /* @__PURE__ */ jsxs(motion.div, { animate: veil, className: "flex items-start gap-1", children: [
+      part.kind === "line" ? (
+        /* `bare` because the draft's own surface is the field's surface —
+           the exception `Input` grew a variant for, so nothing here has to
+           be a raw element re-typing `w-full bg-transparent outline-none`. */
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            variant: "bare",
+            value: part.value,
+            disabled: disabled || rewriting,
+            onChange: (e) => onEdit(e.target.value),
+            className: "text-sm font-medium text-[var(--text-primary)]",
+            "aria-label": part.label ?? "Draft line"
+          }
+        )
+      ) : /* @__PURE__ */ jsx(
+        AutoGrowTextarea,
+        {
+          value: part.value,
+          disabled: disabled || rewriting,
+          onChange: (e) => onEdit(e.target.value),
+          className: "w-full bg-transparent text-sm text-[var(--text-primary)] outline-none",
+          "aria-label": part.label ?? "Draft text"
+        }
+      ),
+      onRewrite && /* @__PURE__ */ jsx(Rewrite, { onClick: onRewrite, busy: rewriting, disabled })
+    ] })
+  ] });
+}
+function Rewrite({
+  onClick,
+  busy,
+  disabled
+}) {
+  const reduced = useReducedMotion();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "icon",
+      variant: "ghost",
+      onClick,
+      disabled: disabled || busy,
+      "aria-label": "Write this again",
+      children: /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          animate: busy && !reduced ? { rotate: 360 } : { rotate: 0 },
+          transition: busy && !reduced ? { repeat: Infinity, duration: 0.9, ease: "linear" } : springs.snappy,
+          className: "flex",
+          children: /* @__PURE__ */ jsx(RefreshCw, {})
+        }
+      )
+    }
+  );
+}
+export {
+  DraftBlock
+};
+//# sourceMappingURL=potter-block-draft.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-block-draft.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { RefreshCw } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Input, AutoGrowTextarea } from '@withpotter/ui-kit';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport { springs, durations, eases } from '@withpotter/lib/motion';\nimport { Go } from './potter-block-door';\nimport type { PotterBlock, DraftPart } from './potter-blocks';\n\n/**\n * A thing Box has made that does not exist yet.\n *\n * THE BLOCK THAT BREAKS THE OLD CONTRACT, ON PURPOSE. Every other block ends in\n * `Go` — a door onto a record that is already in the database, which is what\n * makes the union honest: an answer that cannot be assembled out of real rows\n * cannot be expressed. A generated listing has no `href`, because there is\n * nothing at the other end of it. So a draft cannot borrow any shape that\n * ships, and pretending otherwise would mean linking to a record that is not\n * there.\n *\n * What replaces the door is a DECISION. The draft is the whole of layer B's\n * proposal object with a preview attached: the merchant sees the thing, edits\n * it, and either commits it or throws it away. Nothing is written until they\n * press the verb.\n *\n * GENERATE AND ACT ARE THE SAME COMPONENT, and that is the point rather than a\n * saving. \"Write me a listing\" and \"create a discount for customers who have\n * not bought in 60 days\" both end in an object that does not exist, a preview\n * of it, and one button that brings it into being. They differ only in what\n * `onCommit` calls. Building them as two primitives would have produced two\n * confirmation models, and the second one would have been the one holding a\n * refund.\n *\n * IT IS EDITABLE IN PLACE because the first thing anybody does with generated\n * copy is change one word. A draft you must open the product editor to fix has\n * not saved the merchant the typing, it has moved it — and moved it somewhere\n * the draft's own context is gone.\n *\n * THE VERB IS THE REAL VERB. `commit` says \"Create product\", never \"Accept\" or\n * \"Apply\". Same reasoning as the export rule in `CLAUDE.md`: the label is the\n * action, and a merchant about to write to their own business is owed the word\n * for what happens.\n */\n\n/** What a commit did, so the turn can offer a door onto the real record. */\nexport interface DraftDone {\n  href: string;\n  cta: string;\n}\n\nexport interface DraftHandlers {\n  /**\n   * Bring the draft into being. Receives the EDITED parts, not the generated\n   * ones — what the merchant approved is what is on screen, which is not\n   * necessarily what the model wrote.\n   */\n  onCommit: (\n    parts: DraftPart[],\n  ) => Promise<DraftDone | void> | DraftDone | void;\n  /**\n   * Make this one part again. Per part, never whole-draft: in a campaign of\n   * five the headline is usually fine and the caption is not, and rerolling\n   * all five to fix one is how a merchant loses the version they liked.\n   */\n  onRewrite?: (part: DraftPart) => Promise<DraftPart | void> | DraftPart | void;\n  onDiscard?: () => void;\n}\n\nexport function DraftBlock({\n  block,\n  handlers,\n}: {\n  block: Extract<PotterBlock, { kind: 'draft' }>;\n  handlers?: DraftHandlers;\n}) {\n  const [parts, setParts] = useState<DraftPart[]>(block.parts);\n  const [state, setState] = useState<\n    'idle' | 'saving' | 'kept' | 'failed' | 'discarded'\n  >('idle');\n  const [done, setDone] = useState<DraftDone | null>(null);\n  const [rewriting, setRewriting] = useState<string | null>(null);\n  const reduced = useReducedMotion();\n\n  /**\n   * A DISCARDED DRAFT LEAVES A LINE, it does not vanish.\n   *\n   * `PhotoKeep` settled this shape already: a control that silently succeeds\n   * leaves you wondering whether you pressed it. A turn that empties itself\n   * also rewrites the history of the conversation above the composer, which is\n   * the one thing a transcript must not do.\n   */\n  if (state === 'discarded') {\n    return (\n      <p className=\"text-sm text-[var(--text-tertiary)]\">\n        Discarded. Nothing was saved.\n      </p>\n    );\n  }\n\n  function edit(id: string, value: string) {\n    setParts((prev) =>\n      prev.map((p) =>\n        p.id === id && (p.kind === 'line' || p.kind === 'body')\n          ? { ...p, value }\n          : p,\n      ),\n    );\n  }\n\n  async function rewrite(part: DraftPart) {\n    if (!handlers?.onRewrite) return;\n    setRewriting(part.id);\n    try {\n      const next = await handlers.onRewrite(part);\n      if (next)\n        setParts((prev) => prev.map((p) => (p.id === part.id ? next : p)));\n    } finally {\n      setRewriting(null);\n    }\n  }\n\n  async function commit() {\n    if (!handlers) return;\n    setState('saving');\n    try {\n      const result = await handlers.onCommit(parts);\n      setDone(result ?? null);\n      setState('kept');\n    } catch {\n      /* Failed is a state with a way out, not a dead end: the draft stays on\n         screen with everything the merchant edited still in it, because the\n         alternative is asking them to write it again to find out whether the\n         network was the problem. */\n      setState('failed');\n    }\n  }\n\n  const busy = state === 'saving';\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"surface-inset space-y-3 rounded-[var(--radius-card)] p-3\">\n        {/* The word \"draft\" comes from the shared status map rather than a\n            private grey chip beside it — same pill the catalogue puts on an\n            unpublished item, which is the same claim about the same thing. */}\n        <div className=\"flex items-center gap-2\">\n          <StatusBadge status=\"draft\" />\n          <span className=\"text-2xs text-[var(--text-tertiary)]\">\n            {block.noun}\n          </span>\n        </div>\n\n        <div className=\"space-y-3\">\n          {parts.map((part) => (\n            <Part\n              key={part.id}\n              part={part}\n              disabled={busy || state === 'kept'}\n              rewriting={rewriting === part.id}\n              onEdit={(v) => edit(part.id, v)}\n              onRewrite={handlers?.onRewrite ? () => rewrite(part) : undefined}\n            />\n          ))}\n        </div>\n      </div>\n\n      {/* The decision, and what it turns into. `mode=\"wait\"` so the row that is\n          leaving is gone before the confirmation arrives — the two are the same\n          width and crossfading them in place reads as a flicker. */}\n      <AnimatePresence mode=\"wait\" initial={false}>\n        <motion.div\n          key={state === 'kept' ? 'kept' : 'idle'}\n          initial={reduced ? false : { opacity: 0, y: 4 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={reduced ? { opacity: 0 } : { opacity: 0, y: -4 }}\n          transition={reduced ? { duration: 0 } : springs.snappy}\n        >\n          {state === 'kept' ? (\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <p className=\"text-sm text-[var(--text-primary)]\">Saved.</p>\n              {done && <Go href={done.href} label={done.cta} />}\n            </div>\n          ) : (\n            <Decision\n              commit={block.commit}\n              wired={Boolean(handlers)}\n              busy={busy}\n              failed={state === 'failed'}\n              onCommit={commit}\n              onDiscard={\n                handlers\n                  ? () => {\n                      handlers.onDiscard?.();\n                      setState('discarded');\n                    }\n                  : undefined\n              }\n            />\n          )}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  );\n}\n\n/**\n * The buttons, and what they say when there is nothing behind them.\n *\n * `wired` is not defensive noise. Nothing in this product may write yet, so a\n * draft can reach the thread before a commit path exists — and a primary button\n * that looks live and does nothing is exactly the failure this codebase keeps\n * finding (a Refund button posting into a 404 for months). So an unwired draft\n * shows the preview and says plainly that it cannot be saved, rather than\n * offering a verb it cannot perform.\n */\nfunction Decision({\n  commit,\n  wired,\n  busy,\n  failed,\n  onCommit,\n  onDiscard,\n}: {\n  commit: string;\n  wired: boolean;\n  busy: boolean;\n  failed: boolean;\n  onCommit: () => void;\n  onDiscard?: () => void;\n}) {\n  if (!wired) {\n    return (\n      <p className=\"text-sm text-[var(--text-tertiary)]\">\n        This is a preview. Box cannot save it yet.\n      </p>\n    );\n  }\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Button size=\"sm\" onClick={onCommit} disabled={busy}>\n          {busy ? 'Saving…' : commit}\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" onClick={onDiscard} disabled={busy}>\n          Discard\n        </Button>\n      </div>\n      {failed && (\n        <p className=\"text-sm text-[var(--error)]\">\n          That did not save. Your edits are still here — try again.\n        </p>\n      )}\n    </div>\n  );\n}\n\n/**\n * One part of a draft.\n *\n * A `fact` is the odd one out and deliberately not editable: \"327 customers, no\n * order in 60 days\" is a CONSEQUENCE of the draft, not a field of it. Letting\n * the merchant type over the count would let them approve a number the segment\n * will not actually produce, which is a lie the interface would be telling on\n * their behalf. Change the rule and the count changes; the count is not the\n * rule.\n */\nfunction Part({\n  part,\n  disabled,\n  rewriting,\n  onEdit,\n  onRewrite,\n}: {\n  part: DraftPart;\n  disabled: boolean;\n  rewriting: boolean;\n  onEdit: (value: string) => void;\n  onRewrite?: () => void;\n}) {\n  const reduced = useReducedMotion();\n\n  /* Dimmed while it is being made again, so the part that is changing is the\n     part you are looking at. A spinner over the whole draft would say the whole\n     draft is in flight, and it is not. */\n  const veil = {\n    opacity: rewriting ? 0.4 : 1,\n    transition: reduced\n      ? { duration: 0 }\n      : { duration: durations.fast, ease: eases.settle },\n  };\n\n  if (part.kind === 'fact') {\n    return (\n      <div className=\"flex items-baseline justify-between gap-3 border-t border-[var(--border-subtle)] pt-3\">\n        <span className=\"text-2xs text-[var(--text-tertiary)]\">\n          {part.label}\n        </span>\n        <motion.span\n          animate={veil}\n          className=\"min-w-0 truncate text-sm text-[var(--text-primary)]\"\n        >\n          {part.value}\n        </motion.span>\n      </div>\n    );\n  }\n\n  if (part.kind === 'image') {\n    return (\n      <div className=\"relative\">\n        <motion.img\n          animate={veil}\n          src={part.url}\n          alt={part.alt}\n          className=\"aspect-[3/2] w-full rounded-[var(--radius-card)] object-cover\"\n        />\n        {onRewrite && (\n          <div className=\"absolute right-2 top-2\">\n            <Rewrite onClick={onRewrite} busy={rewriting} disabled={disabled} />\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      {part.label && (\n        <p className=\"mb-1 text-2xs text-[var(--text-tertiary)]\">\n          {part.label}\n        </p>\n      )}\n      <motion.div animate={veil} className=\"flex items-start gap-1\">\n        {part.kind === 'line' ? (\n          /* `bare` because the draft's own surface is the field's surface —\n             the exception `Input` grew a variant for, so nothing here has to\n             be a raw element re-typing `w-full bg-transparent outline-none`. */\n          <Input\n            variant=\"bare\"\n            value={part.value}\n            disabled={disabled || rewriting}\n            onChange={(e) => onEdit(e.target.value)}\n            className=\"text-sm font-medium text-[var(--text-primary)]\"\n            aria-label={part.label ?? 'Draft line'}\n          />\n        ) : (\n          <AutoGrowTextarea\n            value={part.value}\n            disabled={disabled || rewriting}\n            onChange={(e) => onEdit(e.target.value)}\n            className=\"w-full bg-transparent text-sm text-[var(--text-primary)] outline-none\"\n            aria-label={part.label ?? 'Draft text'}\n          />\n        )}\n        {onRewrite && (\n          <Rewrite onClick={onRewrite} busy={rewriting} disabled={disabled} />\n        )}\n      </motion.div>\n    </div>\n  );\n}\n\n/** Make this part again. Spins while it is being made. */\nfunction Rewrite({\n  onClick,\n  busy,\n  disabled,\n}: {\n  onClick: () => void;\n  busy: boolean;\n  disabled: boolean;\n}) {\n  const reduced = useReducedMotion();\n  return (\n    <Button\n      size=\"icon\"\n      variant=\"ghost\"\n      onClick={onClick}\n      disabled={disabled || busy}\n      aria-label=\"Write this again\"\n    >\n      <motion.span\n        animate={busy && !reduced ? { rotate: 360 } : { rotate: 0 }}\n        transition={\n          busy && !reduced\n            ? { repeat: Infinity, duration: 0.9, ease: 'linear' }\n            : springs.snappy\n        }\n        className=\"flex\"\n      >\n        <RefreshCw />\n      </motion.span>\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,139 @@
+import { type DraftHandlers } from './potter-block-draft';
+/**
+ * The only things Box is allowed to draw.
+ *
+ * A CLOSED UNION, AND THAT IS THE HONESTY RULE. `docs/POTTER_BRAIN_SPEC.md`
+ * calls for "no free-form markdown — the model chooses which real component to
+ * render and with what data; it does not get to draw", so an answer that cannot
+ * be assembled out of real rows cannot be expressed. Today the chooser is a
+ * pattern matcher rather than a model, which changes who picks and changes
+ * nothing about what is available to pick.
+ *
+ * Every block ends somewhere real. That is the same rule `potter-thread`
+ * already holds its help answers to: a reply that renders a paragraph and stops
+ * has told the merchant something without giving them anywhere to do it.
+ */
+export type PotterBlock = {
+    kind: 'metric';
+    label: string;
+    value: string;
+    /** The qualifier under the number — sample size, what it was before. */
+    sub?: string;
+    /** Percent. Positive is up. Absent when there is nothing to compare. */
+    delta?: number;
+    href: string;
+    cta: string;
+} | {
+    kind: 'list';
+    rows: {
+        id: string;
+        title: string;
+        meta?: string;
+        href: string;
+    }[];
+    href: string;
+    cta: string;
+} | {
+    /** Asked, answered, and the answer is "none". Still needs a door. */
+    kind: 'empty';
+    href: string;
+    cta: string;
+} | {
+    /**
+     * Why a number moved, as the parts that moved it.
+     *
+     * `metric` says how much and `list` says which ones; this is the only
+     * block that answers WHY, which is the question a merchant asks the
+     * moment a number is down and the one the read-only brain cannot
+     * currently take. The decomposition is the tool's work, not the model's:
+     * `cause` is a fact a query established, never a reason a model inferred.
+     */
+    kind: 'breakdown';
+    /** What the total is measured against. "Against last week". */
+    label: string;
+    /** The total move, formatted and signed, in the merchant's currency. */
+    total: string;
+    /** Percent. Positive is up. Absent when there is nothing to compare. */
+    delta?: number;
+    /**
+     * The contributors, largest first. THEY MUST SUM TO THE TOTAL — see the
+     * bar in `potter-block-breakdown`, which draws the shares end to end so
+     * a decomposition with a hole in it looks like one.
+     */
+    rows: {
+        id: string;
+        title: string;
+        /** Why this one moved. "out of stock", "fewer orders". */
+        cause: string;
+        /** This row's contribution, formatted and signed. */
+        amount: string;
+        /** This row's fraction of the total move, 0 to 1. */
+        share: number;
+        href?: string;
+    }[];
+    href: string;
+    cta: string;
+    /** A second door that acts on the answer rather than showing it again. */
+    action?: {
+        label: string;
+        href: string;
+    };
+} | {
+    /**
+     * Something Box made that does not exist yet.
+     *
+     * The one block with no `href`, because there is nothing at the other end
+     * of it until the merchant says so. See `potter-block-draft` for why
+     * generating and acting are the same shape.
+     */
+    kind: 'draft';
+    /** The merchant's own noun for the thing. "product", "campaign". */
+    noun: string;
+    parts: DraftPart[];
+    /** The real verb on the commit button. "Create product". */
+    commit: string;
+};
+/**
+ * One field of a draft.
+ *
+ * `line` and `body` are the editable ones and that is the whole point — the
+ * first thing anybody does with generated copy is change one word. `fact` is
+ * not editable because it is a CONSEQUENCE of the draft rather than a field of
+ * it: typing over "327 customers" would approve a number the segment will not
+ * produce.
+ */
+export type DraftPart = {
+    id: string;
+    kind: 'line';
+    label?: string;
+    value: string;
+} | {
+    id: string;
+    kind: 'body';
+    label?: string;
+    value: string;
+} | {
+    id: string;
+    kind: 'fact';
+    label: string;
+    value: string;
+} | {
+    id: string;
+    kind: 'image';
+    url: string;
+    alt: string;
+};
+/**
+ * `draft` is the one kind that needs something from the CALLER.
+ *
+ * Every other block is data all the way down — it renders itself and its door
+ * out of what the tool returned. A draft has to write to the business when it
+ * is approved, and what it writes is not the thread's business to know, so the
+ * commit path arrives from whoever mounted the transcript. A draft with no
+ * handlers still renders: it shows the preview and says it cannot be saved,
+ * rather than offering a verb with nothing behind it.
+ */
+export declare function PotterBlocks({ blocks, draft, }: {
+    blocks: PotterBlock[];
+    draft?: DraftHandlers;
+}): import("react").JSX.Element | null;

package/dist/potter/potter-blocks.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TrendingDown, TrendingUp } from "lucide-react";
+import { Go, BlockRow } from "./potter-block-door";
+import { BreakdownBlock } from "./potter-block-breakdown";
+import { DraftBlock } from "./potter-block-draft";
+function PotterBlocks({
+  blocks,
+  draft
+}) {
+  if (blocks.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: blocks.map((b, i) => /* @__PURE__ */ jsx(BlockBody, { block: b, draft }, i)) });
+}
+function BlockBody({
+  block,
+  draft
+}) {
+  switch (block.kind) {
+    case "metric":
+      return /* @__PURE__ */ jsx(MetricBlock, { block });
+    case "list":
+      return /* @__PURE__ */ jsx(ListBlock, { block });
+    case "empty":
+      return /* @__PURE__ */ jsx(Go, { href: block.href, label: block.cta });
+    case "breakdown":
+      return /* @__PURE__ */ jsx(BreakdownBlock, { block });
+    case "draft":
+      return /* @__PURE__ */ jsx(DraftBlock, { block, handlers: draft });
+  }
+}
+function MetricBlock({
+  block
+}) {
+  const up = (block.delta ?? 0) >= 0;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "surface-inset rounded-[var(--radius-card)] p-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--text-tertiary)]", children: block.label }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-1 flex items-center gap-2 text-lg font-semibold tabular-nums text-[var(--text-primary)]", children: [
+        block.value,
+        block.delta !== void 0 && /* The arrow carries the sign so the colour is not doing it alone —
+           a red number is unreadable to the people red is hardest for. */
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: `flex items-center gap-0.5 text-sm font-medium ${up ? "text-[var(--success)]" : "text-[var(--error)]"}`,
+            children: [
+              up ? /* @__PURE__ */ jsx(TrendingUp, {}) : /* @__PURE__ */ jsx(TrendingDown, {}),
+              Math.abs(Math.round(block.delta)),
+              "%"
+            ]
+          }
+        )
+      ] }),
+      block.sub && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-2xs text-[var(--text-tertiary)]", children: block.sub })
+    ] }),
+    /* @__PURE__ */ jsx(Go, { href: block.href, label: block.cta })
+  ] });
+}
+function ListBlock({
+  block
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("ul", { className: "surface-inset divide-y divide-[var(--border-subtle)] overflow-hidden rounded-[var(--radius-card)]", children: block.rows.map((r) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(BlockRow, { href: r.href, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-sm text-[var(--text-primary)]", children: r.title }),
+      r.meta && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-2xs tabular-nums text-[var(--text-tertiary)]", children: r.meta })
+    ] }) }) }, r.id)) }),
+    /* @__PURE__ */ jsx(Go, { href: block.href, label: block.cta })
+  ] });
+}
+export {
+  PotterBlocks
+};
+//# sourceMappingURL=potter-blocks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-blocks.tsx"],"sourcesContent":["'use client';\n\nimport { TrendingDown, TrendingUp } from 'lucide-react';\nimport { Go, BlockRow } from './potter-block-door';\nimport { BreakdownBlock } from './potter-block-breakdown';\nimport { DraftBlock, type DraftHandlers } from './potter-block-draft';\n\n/**\n * The only things Box is allowed to draw.\n *\n * A CLOSED UNION, AND THAT IS THE HONESTY RULE. `docs/POTTER_BRAIN_SPEC.md`\n * calls for \"no free-form markdown — the model chooses which real component to\n * render and with what data; it does not get to draw\", so an answer that cannot\n * be assembled out of real rows cannot be expressed. Today the chooser is a\n * pattern matcher rather than a model, which changes who picks and changes\n * nothing about what is available to pick.\n *\n * Every block ends somewhere real. That is the same rule `potter-thread`\n * already holds its help answers to: a reply that renders a paragraph and stops\n * has told the merchant something without giving them anywhere to do it.\n */\nexport type PotterBlock =\n  | {\n      kind: 'metric';\n      label: string;\n      value: string;\n      /** The qualifier under the number — sample size, what it was before. */\n      sub?: string;\n      /** Percent. Positive is up. Absent when there is nothing to compare. */\n      delta?: number;\n      href: string;\n      cta: string;\n    }\n  | {\n      kind: 'list';\n      rows: { id: string; title: string; meta?: string; href: string }[];\n      href: string;\n      cta: string;\n    }\n  | {\n      /** Asked, answered, and the answer is \"none\". Still needs a door. */\n      kind: 'empty';\n      href: string;\n      cta: string;\n    }\n  | {\n      /**\n       * Why a number moved, as the parts that moved it.\n       *\n       * `metric` says how much and `list` says which ones; this is the only\n       * block that answers WHY, which is the question a merchant asks the\n       * moment a number is down and the one the read-only brain cannot\n       * currently take. The decomposition is the tool's work, not the model's:\n       * `cause` is a fact a query established, never a reason a model inferred.\n       */\n      kind: 'breakdown';\n      /** What the total is measured against. \"Against last week\". */\n      label: string;\n      /** The total move, formatted and signed, in the merchant's currency. */\n      total: string;\n      /** Percent. Positive is up. Absent when there is nothing to compare. */\n      delta?: number;\n      /**\n       * The contributors, largest first. THEY MUST SUM TO THE TOTAL — see the\n       * bar in `potter-block-breakdown`, which draws the shares end to end so\n       * a decomposition with a hole in it looks like one.\n       */\n      rows: {\n        id: string;\n        title: string;\n        /** Why this one moved. \"out of stock\", \"fewer orders\". */\n        cause: string;\n        /** This row's contribution, formatted and signed. */\n        amount: string;\n        /** This row's fraction of the total move, 0 to 1. */\n        share: number;\n        href?: string;\n      }[];\n      href: string;\n      cta: string;\n      /** A second door that acts on the answer rather than showing it again. */\n      action?: { label: string; href: string };\n    }\n  | {\n      /**\n       * Something Box made that does not exist yet.\n       *\n       * The one block with no `href`, because there is nothing at the other end\n       * of it until the merchant says so. See `potter-block-draft` for why\n       * generating and acting are the same shape.\n       */\n      kind: 'draft';\n      /** The merchant's own noun for the thing. \"product\", \"campaign\". */\n      noun: string;\n      parts: DraftPart[];\n      /** The real verb on the commit button. \"Create product\". */\n      commit: string;\n    };\n\n/**\n * One field of a draft.\n *\n * `line` and `body` are the editable ones and that is the whole point — the\n * first thing anybody does with generated copy is change one word. `fact` is\n * not editable because it is a CONSEQUENCE of the draft rather than a field of\n * it: typing over \"327 customers\" would approve a number the segment will not\n * produce.\n */\nexport type DraftPart =\n  | { id: string; kind: 'line'; label?: string; value: string }\n  | { id: string; kind: 'body'; label?: string; value: string }\n  | { id: string; kind: 'fact'; label: string; value: string }\n  | { id: string; kind: 'image'; url: string; alt: string };\n\n/**\n * `draft` is the one kind that needs something from the CALLER.\n *\n * Every other block is data all the way down — it renders itself and its door\n * out of what the tool returned. A draft has to write to the business when it\n * is approved, and what it writes is not the thread's business to know, so the\n * commit path arrives from whoever mounted the transcript. A draft with no\n * handlers still renders: it shows the preview and says it cannot be saved,\n * rather than offering a verb with nothing behind it.\n */\nexport function PotterBlocks({\n  blocks,\n  draft,\n}: {\n  blocks: PotterBlock[];\n  draft?: DraftHandlers;\n}) {\n  if (blocks.length === 0) return null;\n  return (\n    <div className=\"space-y-3\">\n      {blocks.map((b, i) => (\n        <BlockBody key={i} block={b} draft={draft} />\n      ))}\n    </div>\n  );\n}\n\nfunction BlockBody({\n  block,\n  draft,\n}: {\n  block: PotterBlock;\n  draft?: DraftHandlers;\n}) {\n  switch (block.kind) {\n    case 'metric':\n      return <MetricBlock block={block} />;\n    case 'list':\n      return <ListBlock block={block} />;\n    case 'empty':\n      return <Go href={block.href} label={block.cta} />;\n    case 'breakdown':\n      return <BreakdownBlock block={block} />;\n    case 'draft':\n      return <DraftBlock block={block} handlers={draft} />;\n  }\n}\n\nfunction MetricBlock({\n  block,\n}: {\n  block: Extract<PotterBlock, { kind: 'metric' }>;\n}) {\n  const up = (block.delta ?? 0) >= 0;\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"surface-inset rounded-[var(--radius-card)] p-3\">\n        <p className=\"text-2xs text-[var(--text-tertiary)]\">{block.label}</p>\n        <p className=\"mt-1 flex items-center gap-2 text-lg font-semibold tabular-nums text-[var(--text-primary)]\">\n          {block.value}\n          {block.delta !== undefined && (\n            /* The arrow carries the sign so the colour is not doing it alone —\n               a red number is unreadable to the people red is hardest for. */\n            <span\n              className={`flex items-center gap-0.5 text-sm font-medium ${\n                up ? 'text-[var(--success)]' : 'text-[var(--error)]'\n              }`}\n            >\n              {up ? <TrendingUp /> : <TrendingDown />}\n              {Math.abs(Math.round(block.delta))}%\n            </span>\n          )}\n        </p>\n        {block.sub && (\n          <p className=\"mt-0.5 text-2xs text-[var(--text-tertiary)]\">\n            {block.sub}\n          </p>\n        )}\n      </div>\n      <Go href={block.href} label={block.cta} />\n    </div>\n  );\n}\n\nfunction ListBlock({\n  block,\n}: {\n  block: Extract<PotterBlock, { kind: 'list' }>;\n}) {\n  return (\n    <div className=\"space-y-2\">\n      <ul className=\"surface-inset divide-y divide-[var(--border-subtle)] overflow-hidden rounded-[var(--radius-card)]\">\n        {block.rows.map((r) => (\n          <li key={r.id}>\n            <BlockRow href={r.href}>\n              <div className=\"flex items-center justify-between gap-3\">\n                <span className=\"min-w-0 truncate text-sm text-[var(--text-primary)]\">\n                  {r.title}\n                </span>\n                {r.meta && (\n                  <span className=\"shrink-0 text-2xs tabular-nums text-[var(--text-tertiary)]\">\n                    {r.meta}\n                  </span>\n                )}\n              </div>\n            </BlockRow>\n          </li>\n        ))}\n      </ul>\n      <Go href={block.href} label={block.cta} />\n    </div>\n  );\n}\n"],"mappings":";AAuIQ,cA0CI,YA1CJ;AArIR,SAAS,cAAc,kBAAkB;AACzC,SAAS,IAAI,gBAAgB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAsC;AAuHxC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GAGG;AACD,MAAI,OAAO,WAAW,EAAG,QAAO;AAChC,SACE,oBAAC,SAAI,WAAU,aACZ,iBAAO,IAAI,CAAC,GAAG,MACd,oBAAC,aAAkB,OAAO,GAAG,SAAb,CAA2B,CAC5C,GACH;AAEJ;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AACF,GAGG;AACD,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO,oBAAC,eAAY,OAAc;AAAA,IACpC,KAAK;AACH,aAAO,oBAAC,aAAU,OAAc;AAAA,IAClC,KAAK;AACH,aAAO,oBAAC,MAAG,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA,IACjD,KAAK;AACH,aAAO,oBAAC,kBAAe,OAAc;AAAA,IACvC,KAAK;AACH,aAAO,oBAAC,cAAW,OAAc,UAAU,OAAO;AAAA,EACtD;AACF;AAEA,SAAS,YAAY;AAAA,EACnB;AACF,GAEG;AACD,QAAM,MAAM,MAAM,SAAS,MAAM;AACjC,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,kDACb;AAAA,0BAAC,OAAE,WAAU,wCAAwC,gBAAM,OAAM;AAAA,MACjE,qBAAC,OAAE,WAAU,8FACV;AAAA,cAAM;AAAA,QACN,MAAM,UAAU;AAAA;AAAA,QAGf;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,iDACT,KAAK,0BAA0B,qBACjC;AAAA,YAEC;AAAA,mBAAK,oBAAC,cAAW,IAAK,oBAAC,gBAAa;AAAA,cACpC,KAAK,IAAI,KAAK,MAAM,MAAM,KAAK,CAAC;AAAA,cAAE;AAAA;AAAA;AAAA,QACrC;AAAA,SAEJ;AAAA,MACC,MAAM,OACL,oBAAC,OAAE,WAAU,+CACV,gBAAM,KACT;AAAA,OAEJ;AAAA,IACA,oBAAC,MAAG,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA,KAC1C;AAEJ;AAEA,SAAS,UAAU;AAAA,EACjB;AACF,GAEG;AACD,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,QAAG,WAAU,qGACX,gBAAM,KAAK,IAAI,CAAC,MACf,oBAAC,QACC,8BAAC,YAAS,MAAM,EAAE,MAChB,+BAAC,SAAI,WAAU,2CACb;AAAA,0BAAC,UAAK,WAAU,uDACb,YAAE,OACL;AAAA,MACC,EAAE,QACD,oBAAC,UAAK,WAAU,8DACb,YAAE,MACL;AAAA,OAEJ,GACF,KAZO,EAAE,EAaX,CACD,GACH;AAAA,IACA,oBAAC,MAAG,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA,KAC1C;AAEJ;","names":[]}

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

@@ -0,0 +1,31 @@
+/**
+ * How Box arrives.
+ *
+ * An assistant that appears fully formed is a panel. One that ASSEMBLES is a
+ * thing that just woke up, and the difference is most of what makes Square's
+ * open feel like meeting something rather than opening a drawer. This is the
+ * beat before the intro: about a second, once per opening, and then it is out
+ * of the way for good.
+ *
+ * IT IS THE MARK BUILDING ITSELF, not a spinner. The mark is two interlocking
+ * blocks — that is what it MEANS, blocks that fit — so the one honest thing it
+ * can do while loading is come apart and fit back together. A generic spinner
+ * here would be the one moment Box has our whole attention, spent saying
+ * nothing. `PotterMark`'s `half` prop exists for exactly this: two stacked
+ * <svg>s on the same viewBox, so the instant they land they are pixel-identical
+ * to the one-element mark and there is no seam to see.
+ *
+ * THE LIGHT IS THE ASK BAR'S OWN, reused rather than re-authored. The home's
+ * field blooms six rings of a rotating conic gradient when you focus it, and
+ * that is already the app's most distinctive piece of motion; Box's two
+ * doors should be lit by the same lamp. Reusing `.ask-glow-ring` verbatim also
+ * means no second gradient enters the codebase — `.potter-boot` only flips the
+ * animation this app already paused.
+ *
+ * REDUCED MOTION SKIPS THE WHOLE THING, and the caller is what skips it — see
+ * `PotterSurface`. Not a slower version: a merchant who has asked the OS for
+ * less movement is not asking for the same movement stretched over two seconds.
+ */
+export declare function PotterBoot({ onDone }: {
+    onDone: () => void;
+}): import("react").JSX.Element;

package/dist/potter/potter-boot.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { BoxMark } from "@withpotter/ui-kit/box-mark";
+import { eases, springs } from "@withpotter/lib/motion";
+function PotterBoot({ onDone }) {
+  return /* @__PURE__ */ jsx("div", { className: "potter-boot grid place-items-center py-10", children: /* @__PURE__ */ jsxs("div", { className: "relative grid h-16 w-16 place-items-center", children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        "aria-hidden": true,
+        initial: { opacity: 0, scale: 0.35 },
+        animate: { opacity: [0, 0.55, 0], scale: [0.35, 1.35, 1.6] },
+        transition: {
+          duration: 1.05,
+          ease: eases.settle,
+          times: [0, 0.45, 1]
+        },
+        onAnimationComplete: onDone,
+        className: "pointer-events-none absolute inset-0",
+        style: { filter: "blur(14px)" },
+        children: /* @__PURE__ */ jsx("div", { className: "ask-glow-ring h-full w-full rounded-full" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MarkHalf,
+      {
+        half: "frame",
+        from: { x: -20, y: -16, rotate: -24 },
+        delay: 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MarkHalf,
+      {
+        half: "slot",
+        from: { x: 20, y: 16, rotate: 24 },
+        delay: 0.08
+      }
+    )
+  ] }) });
+}
+function MarkHalf({
+  half,
+  from,
+  delay
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      "aria-hidden": true,
+      className: "absolute grid place-items-center",
+      initial: { ...from, opacity: 0, scale: 0.72 },
+      animate: { x: 0, y: 0, rotate: 0, opacity: 1, scale: 1 },
+      transition: { ...springs.bouncy, delay },
+      children: /* @__PURE__ */ jsx(
+        BoxMark,
+        {
+          glyph: "mark",
+          height: 40,
+          half,
+          className: "text-[var(--text-primary)]"
+        }
+      )
+    }
+  );
+}
+export {
+  PotterBoot
+};
+//# sourceMappingURL=potter-boot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/potter/potter-boot.tsx"],"sourcesContent":["'use client';\n\nimport { motion } from 'motion/react';\nimport { BoxMark } from '@withpotter/ui-kit/box-mark';\nimport { eases, springs } from '@withpotter/lib/motion';\n\n/**\n * How Box arrives.\n *\n * An assistant that appears fully formed is a panel. One that ASSEMBLES is a\n * thing that just woke up, and the difference is most of what makes Square's\n * open feel like meeting something rather than opening a drawer. This is the\n * beat before the intro: about a second, once per opening, and then it is out\n * of the way for good.\n *\n * IT IS THE MARK BUILDING ITSELF, not a spinner. The mark is two interlocking\n * blocks — that is what it MEANS, blocks that fit — so the one honest thing it\n * can do while loading is come apart and fit back together. A generic spinner\n * here would be the one moment Box has our whole attention, spent saying\n * nothing. `PotterMark`'s `half` prop exists for exactly this: two stacked\n * <svg>s on the same viewBox, so the instant they land they are pixel-identical\n * to the one-element mark and there is no seam to see.\n *\n * THE LIGHT IS THE ASK BAR'S OWN, reused rather than re-authored. The home's\n * field blooms six rings of a rotating conic gradient when you focus it, and\n * that is already the app's most distinctive piece of motion; Box's two\n * doors should be lit by the same lamp. Reusing `.ask-glow-ring` verbatim also\n * means no second gradient enters the codebase — `.potter-boot` only flips the\n * animation this app already paused.\n *\n * REDUCED MOTION SKIPS THE WHOLE THING, and the caller is what skips it — see\n * `PotterSurface`. Not a slower version: a merchant who has asked the OS for\n * less movement is not asking for the same movement stretched over two seconds.\n */\nexport function PotterBoot({ onDone }: { onDone: () => void }) {\n  return (\n    <div className=\"potter-boot grid place-items-center py-10\">\n      <div className=\"relative grid h-16 w-16 place-items-center\">\n        {/* The lamp, behind. Blooms out and fades rather than holding: it is\n            lighting an arrival, and a halo that stays on is a status. */}\n        <motion.div\n          aria-hidden\n          initial={{ opacity: 0, scale: 0.35 }}\n          animate={{ opacity: [0, 0.55, 0], scale: [0.35, 1.35, 1.6] }}\n          transition={{\n            duration: 1.05,\n            ease: eases.settle,\n            times: [0, 0.45, 1],\n          }}\n          // The lamp's own end is the handover. A setTimeout beside an\n          // animation is two clocks that drift apart the moment either\n          // duration is edited; this one cannot disagree with itself.\n          onAnimationComplete={onDone}\n          className=\"pointer-events-none absolute inset-0\"\n          style={{ filter: 'blur(14px)' }}\n        >\n          <div className=\"ask-glow-ring h-full w-full rounded-full\" />\n        </motion.div>\n\n        {/* The two halves, stacked on one viewBox. They come in along the\n            diagonal the blocks already sit on, so they slide into each other\n            rather than colliding — the anti-diagonal is the seam. */}\n        <MarkHalf\n          half=\"frame\"\n          from={{ x: -20, y: -16, rotate: -24 }}\n          delay={0}\n        />\n        <MarkHalf\n          half=\"slot\"\n          from={{ x: 20, y: 16, rotate: 24 }}\n          delay={0.08}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction MarkHalf({\n  half,\n  from,\n  delay,\n}: {\n  half: 'frame' | 'slot';\n  from: { x: number; y: number; rotate: number };\n  delay: number;\n}) {\n  return (\n    <motion.span\n      aria-hidden\n      className=\"absolute grid place-items-center\"\n      initial={{ ...from, opacity: 0, scale: 0.72 }}\n      animate={{ x: 0, y: 0, rotate: 0, opacity: 1, scale: 1 }}\n      // Bouncy, and this is the one place in the app that earns it: the halves\n      // are landing INTO each other, so a little overshoot reads as them\n      // seating rather than as decoration added to a fade.\n      transition={{ ...springs.bouncy, delay }}\n    >\n      <BoxMark\n        glyph=\"mark\"\n        height={40}\n        half={half}\n        className=\"text-[var(--text-primary)]\"\n      />\n    </motion.span>\n  );\n}\n"],"mappings":";AAqCM,SAmBI,KAnBJ;AAnCN,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,OAAO,eAAe;AA8BxB,SAAS,WAAW,EAAE,OAAO,GAA2B;AAC7D,SACE,oBAAC,SAAI,WAAU,6CACb,+BAAC,SAAI,WAAU,8CAGb;AAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,eAAW;AAAA,QACX,SAAS,EAAE,SAAS,GAAG,OAAO,KAAK;AAAA,QACnC,SAAS,EAAE,SAAS,CAAC,GAAG,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,MAAM,GAAG,EAAE;AAAA,QAC3D,YAAY;AAAA,UACV,UAAU;AAAA,UACV,MAAM,MAAM;AAAA,UACZ,OAAO,CAAC,GAAG,MAAM,CAAC;AAAA,QACpB;AAAA,QAIA,qBAAqB;AAAA,QACrB,WAAU;AAAA,QACV,OAAO,EAAE,QAAQ,aAAa;AAAA,QAE9B,8BAAC,SAAI,WAAU,4CAA2C;AAAA;AAAA,IAC5D;AAAA,IAKA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAM,EAAE,GAAG,KAAK,GAAG,KAAK,QAAQ,IAAI;AAAA,QACpC,OAAO;AAAA;AAAA,IACT;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,QAAQ,GAAG;AAAA,QACjC,OAAO;AAAA;AAAA,IACT;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,eAAW;AAAA,MACX,WAAU;AAAA,MACV,SAAS,EAAE,GAAG,MAAM,SAAS,GAAG,OAAO,KAAK;AAAA,MAC5C,SAAS,EAAE,GAAG,GAAG,GAAG,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,EAAE;AAAA,MAIvD,YAAY,EAAE,GAAG,QAAQ,QAAQ,MAAM;AAAA,MAEvC;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,WAAU;AAAA;AAAA,MACZ;AAAA;AAAA,EACF;AAEJ;","names":[]}