@withpotter/components 0.13.0-next.101

package/dist/connect/identity-card.js

@@ -0,0 +1,161 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Check, Copy } from "lucide-react";
+import { Badge, Button, Card } from "@withpotter/ui-kit";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import {
+  PRESS_SCALE,
+  columnItemVariants,
+  columnVariants,
+  springs
+} from "@withpotter/lib/motion";
+import {
+  IDENTITY_KIND_LABEL,
+  IDENTITY_STATUS_MEANING,
+  identityBlocked
+} from "@withpotter/lib/connect";
+function CopyValue({ value }) {
+  const [copied, setCopied] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      type: "button",
+      onClick: () => {
+        void navigator.clipboard.writeText(value);
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1600);
+      },
+      whileTap: { scale: PRESS_SCALE },
+      transition: springs.snappy,
+      className: "flex w-full items-center gap-2 rounded-lg surface-inset px-3 py-2 text-left hover:bg-[var(--bg-muted)]",
+      "aria-label": `Copy ${value}`,
+      children: [
+        /* @__PURE__ */ jsx("code", { className: "min-w-0 flex-1 truncate font-mono text-xs text-[var(--text-secondary)]", children: value }),
+        /* @__PURE__ */ jsx("span", { className: "relative size-4 shrink-0", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: copied ? /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            initial: { opacity: 0, scale: 0.4 },
+            animate: { opacity: 1, scale: 1 },
+            exit: { opacity: 0, scale: 0.4 },
+            transition: springs.bouncy,
+            className: "absolute inset-0 grid place-items-center",
+            children: /* @__PURE__ */ jsx(Check, { className: "text-[var(--success)]" })
+          },
+          "done"
+        ) : /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: springs.snappy,
+            className: "absolute inset-0 grid place-items-center",
+            children: /* @__PURE__ */ jsx(Copy, { className: "text-[var(--text-tertiary)]" })
+          },
+          "copy"
+        ) }) })
+      ]
+    }
+  );
+}
+function Requirement({ requirement }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-primary)]", children: requirement.label }),
+      requirement.recordType && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: requirement.recordType }),
+      requirement.done && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--success)]", children: "Found" })
+    ] }),
+    /* @__PURE__ */ jsx(CopyValue, { value: requirement.value })
+  ] });
+}
+function renews(iso) {
+  if (!iso) return void 0;
+  return new Date(iso).toLocaleDateString(void 0, {
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  });
+}
+function IdentityCard({ identity }) {
+  const reduce = useReducedMotion();
+  const outstanding = identity.requirements.filter((r) => !r.done);
+  const [open, setOpen] = useState(outstanding.length > 0);
+  const renewal = renews(identity.renewsAt);
+  return /* @__PURE__ */ jsxs(Card, { padding: "none", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3 p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-mono text-sm text-[var(--text-primary)]", children: identity.value }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-[var(--text-tertiary)]", children: [
+          IDENTITY_KIND_LABEL[identity.kind],
+          " \xB7",
+          " ",
+          identity.channels.join(", "),
+          renewal ? ` \xB7 renews ${renewal}` : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(StatusBadge, { scope: "connect", status: identity.status })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative border-t border-[var(--border-subtle)]", children: [
+      identity.status === "verifying" && !reduce && /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-x-0 bottom-0 h-px overflow-hidden",
+          children: /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              className: "block h-px w-1/3 bg-[var(--accent-primary)]",
+              animate: { x: ["-100%", "300%"] },
+              transition: {
+                duration: 1.8,
+                ease: "easeInOut",
+                repeat: Number.POSITIVE_INFINITY
+              }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "relative px-4 py-3 text-xs text-[var(--text-tertiary)]", children: identity.problem ?? IDENTITY_STATUS_MEANING[identity.status] })
+    ] }),
+    identity.requirements.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-4 py-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-tertiary)]", children: outstanding.length === 0 ? `${identity.requirements.length} records in place` : `${outstanding.length} of ${identity.requirements.length} still to add` }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => setOpen((v) => !v), children: open ? "Hide records" : "Show records" })
+      ] }),
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: reduce ? false : { opacity: 0, height: 0 },
+          animate: { opacity: 1, height: "auto" },
+          exit: reduce ? { opacity: 0 } : { opacity: 0, height: 0 },
+          transition: springs.gentle,
+          className: "overflow-hidden",
+          children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: "space-y-4 px-4 pb-4",
+              variants: reduce ? void 0 : columnVariants,
+              initial: "hidden",
+              animate: "shown",
+              children: identity.requirements.map((requirement) => /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  variants: reduce ? void 0 : columnItemVariants,
+                  children: /* @__PURE__ */ jsx(Requirement, { requirement })
+                },
+                requirement.id
+              ))
+            }
+          )
+        }
+      ) })
+    ] }),
+    identityBlocked(identity) && /* @__PURE__ */ jsx("p", { className: "border-t border-[var(--border-subtle)] px-4 py-3 text-xs text-[var(--text-tertiary)]", children: "Nothing sends from this until it is sorted. Messages fall back to Box\u2019s shared sender, which customers do not recognise." })
+  ] });
+}
+export {
+  IdentityCard
+};
+//# sourceMappingURL=identity-card.js.map

package/dist/connect/identity-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/identity-card.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { Check, Copy } from 'lucide-react';\nimport { Badge, Button, Card } from '@withpotter/ui-kit';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport {\n  PRESS_SCALE,\n  columnItemVariants,\n  columnVariants,\n  springs,\n} from '@withpotter/lib/motion';\nimport {\n  IDENTITY_KIND_LABEL,\n  IDENTITY_STATUS_MEANING,\n  identityBlocked,\n} from '@withpotter/lib/connect';\nimport type { IdentityRequirement, ManagedIdentity } from '@withpotter/lib/connect';\n\n/**\n * One thing a business sends from, and whether it can.\n *\n * §7.4 of the product guide asks for \"visible lifecycle and ownership\", and\n * the business plan bills for it — a managed identity is a line item, so the\n * merchant paying for a sending domain has to be able to look at it.\n *\n * The lifecycle IS the product here. An identity is not a setting that is on\n * or off: it is claimed, proven to belong to whoever claimed it, and then kept\n * proven, because DNS gets edited, numbers get released and sender IDs get\n * revoked by a regulator. Every one of those stops delivery on a screen that\n * still lists the identity, which is why the row leads with the state rather\n * than the name.\n *\n * The unfinished requirements are open by default and the finished ones are\n * not. The single most common failure in this category is a domain that has\n * sat unverified for weeks because one record was never added, and the way a\n * screen causes that is by folding the one outstanding step in with two\n * completed ones behind a disclosure.\n */\nfunction CopyValue({ value }: { value: string }) {\n  const [copied, setCopied] = useState(false);\n\n  return (\n    <motion.button\n      type=\"button\"\n      onClick={() => {\n        void navigator.clipboard.writeText(value);\n        setCopied(true);\n        window.setTimeout(() => setCopied(false), 1600);\n      }}\n      whileTap={{ scale: PRESS_SCALE }}\n      transition={springs.snappy}\n      className=\"flex w-full items-center gap-2 rounded-lg surface-inset px-3 py-2 text-left hover:bg-[var(--bg-muted)]\"\n      aria-label={`Copy ${value}`}\n    >\n      <code className=\"min-w-0 flex-1 truncate font-mono text-xs text-[var(--text-secondary)]\">\n        {value}\n      </code>\n      {/* The tick lands with a bounce, which is the one place on this screen\n          delight is earned: it is the only moment where something the person\n          did worked immediately and completely. */}\n      <span className=\"relative size-4 shrink-0\">\n        <AnimatePresence initial={false} mode=\"wait\">\n          {copied ? (\n            <motion.span\n              key=\"done\"\n              initial={{ opacity: 0, scale: 0.4 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.4 }}\n              transition={springs.bouncy}\n              className=\"absolute inset-0 grid place-items-center\"\n            >\n              <Check className=\"text-[var(--success)]\" />\n            </motion.span>\n          ) : (\n            <motion.span\n              key=\"copy\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={springs.snappy}\n              className=\"absolute inset-0 grid place-items-center\"\n            >\n              <Copy className=\"text-[var(--text-tertiary)]\" />\n            </motion.span>\n          )}\n        </AnimatePresence>\n      </span>\n    </motion.button>\n  );\n}\n\nfunction Requirement({ requirement }: { requirement: IdentityRequirement }) {\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"flex items-center gap-2\">\n        <span className=\"text-xs font-medium text-[var(--text-primary)]\">\n          {requirement.label}\n        </span>\n        {requirement.recordType && (\n          <Badge variant=\"secondary\">{requirement.recordType}</Badge>\n        )}\n        {requirement.done && (\n          <span className=\"text-xs text-[var(--success)]\">Found</span>\n        )}\n      </div>\n      <CopyValue value={requirement.value} />\n    </div>\n  );\n}\n\nfunction renews(iso?: string): string | undefined {\n  if (!iso) return undefined;\n\n  return new Date(iso).toLocaleDateString(undefined, {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  });\n}\n\nexport function IdentityCard({ identity }: { identity: ManagedIdentity }) {\n  const reduce = useReducedMotion();\n  const outstanding = identity.requirements.filter((r) => !r.done);\n  const [open, setOpen] = useState(outstanding.length > 0);\n  const renewal = renews(identity.renewsAt);\n\n  return (\n    <Card padding=\"none\">\n      <div className=\"flex flex-wrap items-start justify-between gap-3 p-4\">\n        <div className=\"min-w-0\">\n          <p className=\"font-mono text-sm text-[var(--text-primary)]\">\n            {identity.value}\n          </p>\n          <p className=\"mt-1 text-xs text-[var(--text-tertiary)]\">\n            {IDENTITY_KIND_LABEL[identity.kind]} ·{' '}\n            {identity.channels.join(', ')}\n            {renewal ? ` · renews ${renewal}` : ''}\n          </p>\n        </div>\n        <StatusBadge scope=\"connect\" status={identity.status} />\n      </div>\n\n      {/* The state in words, always. A pill is a colour and a word, and\n          \"action required\" without the action is the failure this whole\n          surface exists to end. */}\n      <div className=\"relative border-t border-[var(--border-subtle)]\">\n        {/* Waiting on a provider is the one state here with nothing for a\n            person to do, and a still screen during it is indistinguishable\n            from a stuck one. So the row shows the work as an indeterminate\n            bar on its own edge — not a spinner, which sitting beside a\n            sentence claims the sentence is what is loading. */}\n        {identity.status === 'verifying' && !reduce && (\n          <motion.span\n            aria-hidden\n            className=\"pointer-events-none absolute inset-x-0 bottom-0 h-px overflow-hidden\"\n          >\n            <motion.span\n              className=\"block h-px w-1/3 bg-[var(--accent-primary)]\"\n              animate={{ x: ['-100%', '300%'] }}\n              transition={{\n                duration: 1.8,\n                ease: 'easeInOut',\n                repeat: Number.POSITIVE_INFINITY,\n              }}\n            />\n          </motion.span>\n        )}\n        <p className=\"relative px-4 py-3 text-xs text-[var(--text-tertiary)]\">\n          {identity.problem ?? IDENTITY_STATUS_MEANING[identity.status]}\n        </p>\n      </div>\n\n      {identity.requirements.length > 0 && (\n        <div className=\"border-t border-[var(--border-subtle)]\">\n          <div className=\"flex items-center justify-between gap-3 px-4 py-3\">\n            <span className=\"text-xs text-[var(--text-tertiary)]\">\n              {outstanding.length === 0\n                ? `${identity.requirements.length} records in place`\n                : `${outstanding.length} of ${identity.requirements.length} still to add`}\n            </span>\n            <Button variant=\"ghost\" onClick={() => setOpen((v) => !v)}>\n              {open ? 'Hide records' : 'Show records'}\n            </Button>\n          </div>\n\n          <AnimatePresence initial={false}>\n            {open && (\n              <motion.div\n                initial={reduce ? false : { opacity: 0, height: 0 }}\n                animate={{ opacity: 1, height: 'auto' }}\n                exit={reduce ? { opacity: 0 } : { opacity: 0, height: 0 }}\n                transition={springs.gentle}\n                className=\"overflow-hidden\"\n              >\n                <motion.div\n                  className=\"space-y-4 px-4 pb-4\"\n                  variants={reduce ? undefined : columnVariants}\n                  initial=\"hidden\"\n                  animate=\"shown\"\n                >\n                  {identity.requirements.map((requirement) => (\n                    <motion.div\n                      key={requirement.id}\n                      variants={reduce ? undefined : columnItemVariants}\n                    >\n                      <Requirement requirement={requirement} />\n                    </motion.div>\n                  ))}\n                </motion.div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </div>\n      )}\n\n      {identityBlocked(identity) && (\n        <p className=\"border-t border-[var(--border-subtle)] px-4 py-3 text-xs text-[var(--text-tertiary)]\">\n          Nothing sends from this until it is sorted. Messages fall back to\n          Box&rsquo;s shared sender, which customers do not recognise.\n        </p>\n      )}\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/connect/needs-you.d.ts

@@ -0,0 +1,23 @@
+import type { CommandRecord } from '@withpotter/lib/connect';
+/**
+ * The commands a person has to settle, lifted out of the log.
+ *
+ * Reconciliation is the one thing in Connect that cannot be automated away.
+ * The provider accepted the work and then said nothing: the invoice may exist,
+ * the message may have gone. Retrying risks billing a customer twice, and
+ * failing it risks a book that is quietly wrong. Only someone who can look at
+ * the other system knows.
+ *
+ * So it is not a row in a table with an amber pill. A decision that a person
+ * owns gets the two decisions as actual buttons, worded as what happened
+ * rather than as what the database will store — nobody has ever wanted to
+ * press "Mark succeeded".
+ *
+ * These leave the list when they are settled, which is why the whole group is
+ * inside AnimatePresence: an item removed from React state vanishes on a frame
+ * unless something is holding it, and a decision that disappears instantly
+ * reads as a misclick.
+ */
+export declare function NeedsYou({ commands }: {
+    commands: readonly CommandRecord[];
+}): import("react").JSX.Element | null;

package/dist/connect/needs-you.js

@@ -0,0 +1,79 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Button, Card, useToast } from "@withpotter/ui-kit";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { springs } from "@withpotter/lib/motion";
+function NeedsYou({ commands }) {
+  const { toast } = useToast();
+  const reduce = useReducedMotion();
+  const waiting = commands.filter(
+    (c) => c.status === "reconciling" || c.status === "failed"
+  );
+  if (waiting.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: waiting.map((command) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      layout: true,
+      initial: reduce ? false : { opacity: 0, y: 8 },
+      animate: { opacity: 1, y: 0 },
+      exit: reduce ? { opacity: 0 } : { opacity: 0, y: -8 },
+      transition: springs.gentle,
+      children: /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: command.summary }),
+            command.question && /* @__PURE__ */ jsx("p", { className: "mt-2 max-w-xl text-sm leading-relaxed text-[var(--text-secondary)]", children: command.question }),
+            /* @__PURE__ */ jsxs("p", { className: "mt-2 text-xs text-[var(--text-tertiary)]", children: [
+              command.attempts.length,
+              command.attempts.length === 1 ? " attempt" : " attempts",
+              " \xB7",
+              " ",
+              new Date(command.occurredAt).toLocaleString(void 0, {
+                day: "numeric",
+                month: "short",
+                hour: "2-digit",
+                minute: "2-digit"
+              })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(StatusBadge, { scope: "connect", status: command.status })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: command.status === "reconciling" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "success",
+              onClick: () => toast({
+                title: "Marked as landed. Box will not send it again."
+              }),
+              children: "It landed"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => toast({
+                title: "Queued again. Box will send it once."
+              }),
+              children: "It never arrived, send it again"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => toast({ title: "Queued again." }),
+            children: "Try again"
+          }
+        ) })
+      ] })
+    },
+    command.id
+  )) }) });
+}
+export {
+  NeedsYou
+};
+//# sourceMappingURL=needs-you.js.map

package/dist/connect/needs-you.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/needs-you.tsx"],"sourcesContent":["'use client';\n\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { Button, Card, useToast } from '@withpotter/ui-kit';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport { springs } from '@withpotter/lib/motion';\nimport type { CommandRecord } from '@withpotter/lib/connect';\n\n/**\n * The commands a person has to settle, lifted out of the log.\n *\n * Reconciliation is the one thing in Connect that cannot be automated away.\n * The provider accepted the work and then said nothing: the invoice may exist,\n * the message may have gone. Retrying risks billing a customer twice, and\n * failing it risks a book that is quietly wrong. Only someone who can look at\n * the other system knows.\n *\n * So it is not a row in a table with an amber pill. A decision that a person\n * owns gets the two decisions as actual buttons, worded as what happened\n * rather than as what the database will store — nobody has ever wanted to\n * press \"Mark succeeded\".\n *\n * These leave the list when they are settled, which is why the whole group is\n * inside AnimatePresence: an item removed from React state vanishes on a frame\n * unless something is holding it, and a decision that disappears instantly\n * reads as a misclick.\n */\nexport function NeedsYou({ commands }: { commands: readonly CommandRecord[] }) {\n  const { toast } = useToast();\n  const reduce = useReducedMotion();\n\n  const waiting = commands.filter(\n    (c) => c.status === 'reconciling' || c.status === 'failed',\n  );\n\n  if (waiting.length === 0) return null;\n\n  return (\n    <div className=\"space-y-3\">\n      <AnimatePresence initial={false}>\n        {waiting.map((command) => (\n          <motion.div\n            key={command.id}\n            layout\n            initial={reduce ? false : { opacity: 0, y: 8 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={reduce ? { opacity: 0 } : { opacity: 0, y: -8 }}\n            transition={springs.gentle}\n          >\n            <Card>\n              <div className=\"flex flex-wrap items-start justify-between gap-3\">\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"text-sm font-medium text-[var(--text-primary)]\">\n                    {command.summary}\n                  </p>\n                  {command.question && (\n                    <p className=\"mt-2 max-w-xl text-sm leading-relaxed text-[var(--text-secondary)]\">\n                      {command.question}\n                    </p>\n                  )}\n                  <p className=\"mt-2 text-xs text-[var(--text-tertiary)]\">\n                    {command.attempts.length}\n                    {command.attempts.length === 1\n                      ? ' attempt'\n                      : ' attempts'} ·{' '}\n                    {new Date(command.occurredAt).toLocaleString(undefined, {\n                      day: 'numeric',\n                      month: 'short',\n                      hour: '2-digit',\n                      minute: '2-digit',\n                    })}\n                  </p>\n                </div>\n                <StatusBadge scope=\"connect\" status={command.status} />\n              </div>\n\n              <div className=\"mt-4 flex flex-wrap gap-2\">\n                {command.status === 'reconciling' ? (\n                  <>\n                    <Button\n                      variant=\"success\"\n                      onClick={() =>\n                        toast({\n                          title:\n                            'Marked as landed. Box will not send it again.',\n                        })\n                      }\n                    >\n                      It landed\n                    </Button>\n                    <Button\n                      variant=\"secondary\"\n                      onClick={() =>\n                        toast({\n                          title: 'Queued again. Box will send it once.',\n                        })\n                      }\n                    >\n                      It never arrived, send it again\n                    </Button>\n                  </>\n                ) : (\n                  <Button\n                    variant=\"secondary\"\n                    onClick={() => toast({ title: 'Queued again.' })}\n                  >\n                    Try again\n                  </Button>\n                )}\n              </div>\n            </Card>\n          </motion.div>\n        ))}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"mappings":";AAoDkB,SA0BA,UA1BA,KAQA,YARA;AAlDlB,SAAS,iBAAiB,QAAQ,wBAAwB;AAC1D,SAAS,QAAQ,MAAM,gBAAgB;AACvC,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAsBjB,SAAS,SAAS,EAAE,SAAS,GAA2C;AAC7E,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,SAAS,iBAAiB;AAEhC,QAAM,UAAU,SAAS;AAAA,IACvB,CAAC,MAAM,EAAE,WAAW,iBAAiB,EAAE,WAAW;AAAA,EACpD;AAEA,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,SACE,oBAAC,SAAI,WAAU,aACb,8BAAC,mBAAgB,SAAS,OACvB,kBAAQ,IAAI,CAAC,YACZ;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MAEC,QAAM;AAAA,MACN,SAAS,SAAS,QAAQ,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,MAC7C,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,MAC5B,MAAM,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,MACpD,YAAY,QAAQ;AAAA,MAEpB,+BAAC,QACC;AAAA,6BAAC,SAAI,WAAU,oDACb;AAAA,+BAAC,SAAI,WAAU,kBACb;AAAA,gCAAC,OAAE,WAAU,kDACV,kBAAQ,SACX;AAAA,YACC,QAAQ,YACP,oBAAC,OAAE,WAAU,sEACV,kBAAQ,UACX;AAAA,YAEF,qBAAC,OAAE,WAAU,4CACV;AAAA,sBAAQ,SAAS;AAAA,cACjB,QAAQ,SAAS,WAAW,IACzB,aACA;AAAA,cAAY;AAAA,cAAG;AAAA,cAClB,IAAI,KAAK,QAAQ,UAAU,EAAE,eAAe,QAAW;AAAA,gBACtD,KAAK;AAAA,gBACL,OAAO;AAAA,gBACP,MAAM;AAAA,gBACN,QAAQ;AAAA,cACV,CAAC;AAAA,eACH;AAAA,aACF;AAAA,UACA,oBAAC,eAAY,OAAM,WAAU,QAAQ,QAAQ,QAAQ;AAAA,WACvD;AAAA,QAEA,oBAAC,SAAI,WAAU,6BACZ,kBAAQ,WAAW,gBAClB,iCACE;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS,MACP,MAAM;AAAA,gBACJ,OACE;AAAA,cACJ,CAAC;AAAA,cAEJ;AAAA;AAAA,UAED;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS,MACP,MAAM;AAAA,gBACJ,OAAO;AAAA,cACT,CAAC;AAAA,cAEJ;AAAA;AAAA,UAED;AAAA,WACF,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,MAAM,MAAM,EAAE,OAAO,gBAAgB,CAAC;AAAA,YAChD;AAAA;AAAA,QAED,GAEJ;AAAA,SACF;AAAA;AAAA,IApEK,QAAQ;AAAA,EAqEf,CACD,GACH,GACF;AAEJ;","names":[]}

package/dist/connect/record-source.d.ts

@@ -0,0 +1,42 @@
+import { type OdooRecordLink } from '@withpotter/lib/api/odoo';
+/**
+ * Which system owns this record, so a screen can stop pretending Box does.
+ *
+ * THE BUG THIS EXISTS TO PREVENT.
+ *
+ * The moment an ERP is connected, Box's product screens are showing numbers
+ * they did not calculate and cannot change. A stock field that still accepts a
+ * value is not merely useless — it is a trap. The merchant types 40, the
+ * screen says 40, and the next sync quietly puts it back to what the ERP
+ * always said. Nothing errors. They find out when the storefront oversells.
+ *
+ * So ownership is a fact a screen can read, and `direction` is the whole
+ * answer: `in` means the other system wrote it and Box must not offer to
+ * edit it. It is recorded per record rather than per workspace because a
+ * catalogue is routinely half synced and half local, and greying out every
+ * product because one came from Odoo would be its own lie.
+ *
+ * IT ANSWERS QUIETLY OR NOT AT ALL.
+ *
+ * Most workspaces have no ERP, and this hook is mounted on screens all of them
+ * open. It asks once per record, caches, never retries a null into an error
+ * state, and renders nothing when there is nothing to say — the same rule
+ * `RecordTrace` follows next door, and for the same reason: a line reading
+ * "not synced" on every product in the business is a dozen screens made longer
+ * for no reader.
+ */
+export declare function useRecordSource(kind: 'product' | 'customer' | 'order' | 'invoice' | 'payment', id: string | undefined): OdooRecordLink | null;
+/**
+ * The line that explains why a number cannot be typed into.
+ *
+ * Said as a fact about where the number comes from rather than as a refusal.
+ * "Managed elsewhere" and a disabled field tell a merchant they are locked
+ * out of their own stock; naming Odoo tells them where to go and change it,
+ * which is the thing they actually want to do next.
+ */
+export declare function RecordSourceNote({ source, children, className, }: {
+    source: OdooRecordLink | null;
+    /** The sentence. Written by the caller, because only it knows the noun. */
+    children: React.ReactNode;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/connect/record-source.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowUpRight } from "lucide-react";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { odooApi } from "@withpotter/lib/api/odoo";
+function useRecordSource(kind, id) {
+  const { tenant } = useAuth();
+  const { data } = useQuery({
+    queryKey: ["odoo-record-source", tenant?.slug, kind, id],
+    queryFn: () => odooApi.linkFor(tenant.slug, kind, id),
+    enabled: !!tenant?.slug && !!id,
+    // A record's owner does not change while somebody is looking at it, and
+    // this rides along on screens that already fetch plenty.
+    staleTime: 5 * 60 * 1e3,
+    retry: false
+  });
+  return data?.data ?? null;
+}
+function RecordSourceNote({
+  source,
+  children,
+  className = ""
+}) {
+  if (!source) return null;
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      className: `flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-[var(--text-tertiary)] ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { children }),
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: source.url,
+            target: "_blank",
+            rel: "noreferrer",
+            className: "inline-flex items-center gap-1 font-medium text-[var(--text-link)] hover:text-[var(--text-link-hover)]",
+            children: [
+              "Open in Odoo",
+              /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-4" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  RecordSourceNote,
+  useRecordSource
+};
+//# sourceMappingURL=record-source.js.map

package/dist/connect/record-source.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/record-source.tsx"],"sourcesContent":["'use client';\n\nimport { useQuery } from '@tanstack/react-query';\nimport { ArrowUpRight } from 'lucide-react';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { odooApi, type OdooRecordLink } from '@withpotter/lib/api/odoo';\n\n/**\n * Which system owns this record, so a screen can stop pretending Box does.\n *\n * THE BUG THIS EXISTS TO PREVENT.\n *\n * The moment an ERP is connected, Box's product screens are showing numbers\n * they did not calculate and cannot change. A stock field that still accepts a\n * value is not merely useless — it is a trap. The merchant types 40, the\n * screen says 40, and the next sync quietly puts it back to what the ERP\n * always said. Nothing errors. They find out when the storefront oversells.\n *\n * So ownership is a fact a screen can read, and `direction` is the whole\n * answer: `in` means the other system wrote it and Box must not offer to\n * edit it. It is recorded per record rather than per workspace because a\n * catalogue is routinely half synced and half local, and greying out every\n * product because one came from Odoo would be its own lie.\n *\n * IT ANSWERS QUIETLY OR NOT AT ALL.\n *\n * Most workspaces have no ERP, and this hook is mounted on screens all of them\n * open. It asks once per record, caches, never retries a null into an error\n * state, and renders nothing when there is nothing to say — the same rule\n * `RecordTrace` follows next door, and for the same reason: a line reading\n * \"not synced\" on every product in the business is a dozen screens made longer\n * for no reader.\n */\nexport function useRecordSource(\n  kind: 'product' | 'customer' | 'order' | 'invoice' | 'payment',\n  id: string | undefined,\n): OdooRecordLink | null {\n  const { tenant } = useAuth();\n\n  const { data } = useQuery({\n    queryKey: ['odoo-record-source', tenant?.slug, kind, id],\n    queryFn: () => odooApi.linkFor(tenant!.slug, kind, id!),\n    enabled: !!tenant?.slug && !!id,\n    // A record's owner does not change while somebody is looking at it, and\n    // this rides along on screens that already fetch plenty.\n    staleTime: 5 * 60 * 1000,\n    retry: false,\n  });\n\n  return data?.data ?? null;\n}\n\n/**\n * The line that explains why a number cannot be typed into.\n *\n * Said as a fact about where the number comes from rather than as a refusal.\n * \"Managed elsewhere\" and a disabled field tell a merchant they are locked\n * out of their own stock; naming Odoo tells them where to go and change it,\n * which is the thing they actually want to do next.\n */\nexport function RecordSourceNote({\n  source,\n  children,\n  className = '',\n}: {\n  source: OdooRecordLink | null;\n  /** The sentence. Written by the caller, because only it knows the noun. */\n  children: React.ReactNode;\n  className?: string;\n}) {\n  if (!source) return null;\n\n  return (\n    <p\n      className={`flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-[var(--text-tertiary)] ${className}`}\n    >\n      <span>{children}</span>\n      <a\n        href={source.url}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        className=\"inline-flex items-center gap-1 font-medium text-[var(--text-link)] hover:text-[var(--text-link-hover)]\"\n      >\n        Open in Odoo\n        <ArrowUpRight className=\"size-4\" />\n      </a>\n    </p>\n  );\n}\n"],"mappings":";AA4EM,cACA,YADA;AA1EN,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,eAAoC;AA4BtC,SAAS,gBACd,MACA,IACuB;AACvB,QAAM,EAAE,OAAO,IAAI,QAAQ;AAE3B,QAAM,EAAE,KAAK,IAAI,SAAS;AAAA,IACxB,UAAU,CAAC,sBAAsB,QAAQ,MAAM,MAAM,EAAE;AAAA,IACvD,SAAS,MAAM,QAAQ,QAAQ,OAAQ,MAAM,MAAM,EAAG;AAAA,IACtD,SAAS,CAAC,CAAC,QAAQ,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA,IAG7B,WAAW,IAAI,KAAK;AAAA,IACpB,OAAO;AAAA,EACT,CAAC;AAED,SAAO,MAAM,QAAQ;AACvB;AAUO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAKG;AACD,MAAI,CAAC,OAAQ,QAAO;AAEpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,mFAAmF,SAAS;AAAA,MAEvG;AAAA,4BAAC,UAAM,UAAS;AAAA,QAChB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,OAAO;AAAA,YACb,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,WAAU;AAAA,YACX;AAAA;AAAA,cAEC,oBAAC,gBAAa,WAAU,UAAS;AAAA;AAAA;AAAA,QACnC;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/connect/record-trace.d.ts

@@ -0,0 +1,24 @@
+import type { SubjectKind } from '@withpotter/lib/connect';
+export declare function RecordTrace({ kind, id, recipient, className, bare, }: {
+    kind: SubjectKind;
+    /** The record's own id, as the owning product knows it. */
+    id?: string;
+    /**
+     * For a person rather than a record: the address to ask about.
+     *
+     * A customer has no reference of their own — a message is about an order or
+     * a booking, and the person is who it reached.
+     */
+    recipient?: string;
+    className?: string;
+    /**
+     * Rendered inside a frame that already exists — the customer record's
+     * activity strip, where this is a tab rather than a section.
+     *
+     * Drops its own `Card`. A card inside a card is two lifted surfaces at the
+     * same depth, which is the one thing `surface` / `surface-inset` /
+     * `surface-sunken` exist to tell apart; the host supplies the frame and the
+     * padding, and the rows keep their dividers.
+     */
+    bare?: boolean;
+}): import("react").JSX.Element | null;

package/dist/connect/record-trace.js

@@ -0,0 +1,144 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Mail, MessageSquare } from "lucide-react";
+import { BrandMark, Card, WhatsAppIcon } from "@withpotter/ui-kit";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import {
+  PRESS_SCALE,
+  columnItemVariants,
+  columnVariants,
+  springs
+} from "@withpotter/lib/motion";
+import {
+  SETTLED,
+  productById,
+  useConnections,
+  useRecordTrace
+} from "@withpotter/lib/connect";
+import { CommandDetail } from "./command-detail";
+const COLLAPSED = process.env.NEXT_PUBLIC_BOX_TRACE_COLLAPSED === "true";
+const COLLAPSED_ROWS = 3;
+const HEADING = {
+  booking: "Sent and synced",
+  campaign: "Sent and synced",
+  customer: "Kept in step elsewhere",
+  invoice: "Sent and recorded",
+  order: "Sent and shared",
+  payout: "Sent and recorded",
+  product: "Published elsewhere"
+};
+function when(iso) {
+  return new Date(iso).toLocaleString(void 0, {
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    month: "short"
+  });
+}
+function ChannelMark({ channel }) {
+  if (channel === "whatsapp") {
+    return /* @__PURE__ */ jsx(WhatsAppIcon, { className: "size-5 shrink-0" });
+  }
+  if (channel === "sms") {
+    return /* @__PURE__ */ jsx(MessageSquare, { className: "size-5 shrink-0 text-[var(--text-tertiary)]" });
+  }
+  return /* @__PURE__ */ jsx(Mail, { className: "size-5 shrink-0 text-[var(--text-tertiary)]" });
+}
+function TraceRow({
+  command,
+  onOpen
+}) {
+  const connections = useConnections();
+  const connection = connections.find((c) => c.id === command.connectionId);
+  const product = connection ? productById(connection.productId) : void 0;
+  const unsettled = !SETTLED.includes(command.status);
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      type: "button",
+      onClick: onOpen,
+      whileTap: { scale: PRESS_SCALE },
+      transition: springs.snappy,
+      className: "flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-[var(--bg-subtle)]",
+      children: [
+        product?.brand ? /* @__PURE__ */ jsx(BrandMark, { name: product.brand, size: 20 }) : command.channel ? /* @__PURE__ */ jsx(ChannelMark, { channel: command.channel }) : /* @__PURE__ */ jsx("span", { className: "size-5 shrink-0" }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block truncate text-sm text-[var(--text-primary)]", children: command.summary }),
+          /* @__PURE__ */ jsxs("span", { className: "mt-0.5 block text-xs text-[var(--text-tertiary)]", children: [
+            when(command.occurredAt),
+            command.externalRef ? ` \xB7 ${command.externalRef}` : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(StatusBadge, { scope: "connect", status: command.status }),
+        unsettled && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            "aria-hidden": true,
+            className: "size-2 shrink-0 rounded-full bg-[var(--accent-primary)]",
+            animate: { opacity: [1, 0.3, 1], scale: [1, 0.75, 1] },
+            transition: {
+              duration: 2.4,
+              ease: "easeInOut",
+              repeat: Number.POSITIVE_INFINITY
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function RecordTrace({
+  kind,
+  id,
+  recipient,
+  className,
+  bare
+}) {
+  const commands = useRecordTrace(kind, id, recipient);
+  const [opened, setOpened] = useState(null);
+  const reduce = useReducedMotion();
+  const [showAll, setShowAll] = useState(false);
+  if (commands.length === 0) return null;
+  const shown = COLLAPSED && !showAll ? commands.slice(0, COLLAPSED_ROWS) : commands;
+  const hidden = commands.length - shown.length;
+  const rows = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "divide-y divide-[var(--border-subtle)]",
+      variants: reduce ? void 0 : columnVariants,
+      initial: "hidden",
+      animate: "shown",
+      children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: shown.map((command) => /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          variants: reduce ? void 0 : columnItemVariants,
+          exit: reduce ? { opacity: 0 } : { opacity: 0, height: 0 },
+          transition: springs.gentle,
+          children: /* @__PURE__ */ jsx(TraceRow, { command, onOpen: () => setOpened(command) })
+        },
+        command.id
+      )) })
+    }
+  ) });
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-medium text-[var(--text-primary)]", children: HEADING[kind] }),
+    bare ? rows : /* @__PURE__ */ jsx(Card, { padding: "none", children: rows }),
+    COLLAPSED && commands.length > COLLAPSED_ROWS && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setShowAll((open) => !open),
+        "aria-expanded": showAll,
+        className: "mt-2 text-sm font-medium text-[var(--text-secondary)] underline-offset-2 hover:text-[var(--text-primary)] hover:underline",
+        children: showAll ? "Show fewer" : `Show ${hidden} more`
+      }
+    ),
+    /* @__PURE__ */ jsx(CommandDetail, { command: opened, onClose: () => setOpened(null) })
+  ] });
+}
+export {
+  RecordTrace
+};
+//# sourceMappingURL=record-trace.js.map

package/dist/connect/record-trace.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/record-trace.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { Mail, MessageSquare } from 'lucide-react';\nimport { BrandMark, Card, WhatsAppIcon } from '@withpotter/ui-kit';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport {\n  PRESS_SCALE,\n  columnItemVariants,\n  columnVariants,\n  springs,\n} from '@withpotter/lib/motion';\nimport {\n  SETTLED,\n  productById,\n  useConnections,\n  useRecordTrace,\n} from '@withpotter/lib/connect';\nimport type { CommandRecord, SubjectKind } from '@withpotter/lib/connect';\nimport { CommandDetail } from './command-detail';\n\n/**\n * What Box did outside Box on behalf of this record.\n *\n * Connect is not a place a merchant goes. §4.4 of the product guide draws the\n * line — the product owns the customer experience and the business record,\n * Connect owns the external boundary — and the only way to honour both is for\n * the record to be able to answer for what happened beyond it. Nobody opens a\n * command log wondering about an order. They open the order.\n *\n * The failure this replaces is silence. An order confirmation that never left,\n * an invoice that never reached the books, a booking that never made it to the\n * diary: today every one of those looks identical to success, because the\n * screen that owns the record has no idea anything external was attempted.\n *\n * Renders NOTHING when there is nothing to say. A panel reading \"no external\n * activity\" on every order in the business is a dozen screens made longer for\n * no reader — and this drops into a dozen screens, so an empty state here is\n * multiplied by all of them.\n */\n/** A box can show the newest few and keep the rest behind \"Show more\". */\nconst COLLAPSED = process.env.NEXT_PUBLIC_BOX_TRACE_COLLAPSED === 'true';\nconst COLLAPSED_ROWS = 3;\n\nconst HEADING: Record<SubjectKind, string> = {\n  booking: 'Sent and synced',\n  campaign: 'Sent and synced',\n  customer: 'Kept in step elsewhere',\n  invoice: 'Sent and recorded',\n  order: 'Sent and shared',\n  payout: 'Sent and recorded',\n  product: 'Published elsewhere',\n};\n\nfunction when(iso: string): string {\n  return new Date(iso).toLocaleString(undefined, {\n    day: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n    month: 'short',\n  });\n}\n\n/**\n * One line about one external effect.\n *\n * The provider's mark leads because it is what a merchant recognises before\n * they read anything, and it is the part of the sentence they are checking:\n * did the WhatsApp one go, did the QuickBooks one go.\n */\n/**\n * Who carried it.\n *\n * A Connect row identifies its provider through the connection it ran on. A\n * message Box sent itself has no connection — the channel IS the identity,\n * and without this every such row draws the same blank square.\n *\n * WhatsApp wears `WhatsAppIcon` rather than a lucide glyph. That is an\n * enforced rule and it exists because every WhatsApp affordance in this app\n * used to draw `MessageCircle`, which is not the mark anybody recognises.\n */\nfunction ChannelMark({ channel }: { channel: string }) {\n  if (channel === 'whatsapp') {\n    return <WhatsAppIcon className=\"size-5 shrink-0\" />;\n  }\n\n  if (channel === 'sms') {\n    return (\n      <MessageSquare className=\"size-5 shrink-0 text-[var(--text-tertiary)]\" />\n    );\n  }\n\n  return <Mail className=\"size-5 shrink-0 text-[var(--text-tertiary)]\" />;\n}\n\nfunction TraceRow({\n  command,\n  onOpen,\n}: {\n  command: CommandRecord;\n  onOpen: () => void;\n}) {\n  const connections = useConnections();\n  const connection = connections.find((c) => c.id === command.connectionId);\n  const product = connection ? productById(connection.productId) : undefined;\n  const unsettled = !SETTLED.includes(command.status);\n\n  return (\n    <motion.button\n      type=\"button\"\n      onClick={onOpen}\n      whileTap={{ scale: PRESS_SCALE }}\n      transition={springs.snappy}\n      className=\"flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-[var(--bg-subtle)]\"\n    >\n      {product?.brand ? (\n        <BrandMark name={product.brand} size={20} />\n      ) : command.channel ? (\n        <ChannelMark channel={command.channel} />\n      ) : (\n        <span className=\"size-5 shrink-0\" />\n      )}\n\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block truncate text-sm text-[var(--text-primary)]\">\n          {command.summary}\n        </span>\n        <span className=\"mt-0.5 block text-xs text-[var(--text-tertiary)]\">\n          {when(command.occurredAt)}\n          {command.externalRef ? ` · ${command.externalRef}` : ''}\n        </span>\n      </span>\n\n      <StatusBadge scope=\"connect\" status={command.status} />\n\n      {/* An unfinished command is the only thing on this panel that will\n          change without anybody touching it, so it is the only thing that\n          moves. A pulse on every row would say nothing.\n\n          It breathes rather than blinks: a blink is an alert and this is not\n          one — nothing is wrong, the work is simply still going. */}\n      {unsettled && (\n        <motion.span\n          aria-hidden\n          className=\"size-2 shrink-0 rounded-full bg-[var(--accent-primary)]\"\n          animate={{ opacity: [1, 0.3, 1], scale: [1, 0.75, 1] }}\n          transition={{\n            duration: 2.4,\n            ease: 'easeInOut',\n            repeat: Number.POSITIVE_INFINITY,\n          }}\n        />\n      )}\n    </motion.button>\n  );\n}\n\nexport function RecordTrace({\n  kind,\n  id,\n  recipient,\n  className,\n  bare,\n}: {\n  kind: SubjectKind;\n  /** The record's own id, as the owning product knows it. */\n  id?: string;\n  /**\n   * For a person rather than a record: the address to ask about.\n   *\n   * A customer has no reference of their own — a message is about an order or\n   * a booking, and the person is who it reached.\n   */\n  recipient?: string;\n  className?: string;\n  /**\n   * Rendered inside a frame that already exists — the customer record's\n   * activity strip, where this is a tab rather than a section.\n   *\n   * Drops its own `Card`. A card inside a card is two lifted surfaces at the\n   * same depth, which is the one thing `surface` / `surface-inset` /\n   * `surface-sunken` exist to tell apart; the host supplies the frame and the\n   * padding, and the rows keep their dividers.\n   */\n  bare?: boolean;\n}) {\n  const commands = useRecordTrace(kind, id, recipient);\n  const [opened, setOpened] = useState<CommandRecord | null>(null);\n  const reduce = useReducedMotion();\n\n  // A box can keep the list short until it is asked for: the newest few, and\n  // the rest behind one press. Closed again on every visit.\n  const [showAll, setShowAll] = useState(false);\n\n  if (commands.length === 0) return null;\n\n  const shown =\n    COLLAPSED && !showAll ? commands.slice(0, COLLAPSED_ROWS) : commands;\n  const hidden = commands.length - shown.length;\n\n  const rows = (\n    <>\n      {/* Reading order, once. The panel is a short list of things that\n            happened in sequence, and arriving in that sequence is the cheapest\n            way to say so — all at once reads as a table, which it is not. */}\n      <motion.div\n        className=\"divide-y divide-[var(--border-subtle)]\"\n        variants={reduce ? undefined : columnVariants}\n        initial=\"hidden\"\n        animate=\"shown\"\n      >\n        <AnimatePresence initial={false}>\n          {shown.map((command) => (\n            <motion.div\n              key={command.id}\n              variants={reduce ? undefined : columnItemVariants}\n              exit={reduce ? { opacity: 0 } : { opacity: 0, height: 0 }}\n              transition={springs.gentle}\n            >\n              <TraceRow command={command} onOpen={() => setOpened(command)} />\n            </motion.div>\n          ))}\n        </AnimatePresence>\n      </motion.div>\n    </>\n  );\n\n  return (\n    <div className={className}>\n      <p className=\"mb-2 text-sm font-medium text-[var(--text-primary)]\">\n        {HEADING[kind]}\n      </p>\n\n      {bare ? rows : <Card padding=\"none\">{rows}</Card>}\n\n      {COLLAPSED && commands.length > COLLAPSED_ROWS && (\n        <button\n          type=\"button\"\n          onClick={() => setShowAll((open) => !open)}\n          aria-expanded={showAll}\n          className=\"mt-2 text-sm font-medium text-[var(--text-secondary)] underline-offset-2 hover:text-[var(--text-primary)] hover:underline\"\n        >\n          {showAll ? 'Show fewer' : `Show ${hidden} more`}\n        </button>\n      )}\n\n      <CommandDetail command={opened} onClose={() => setOpened(null)} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/connect/resend-order-confirmation-button.d.ts

@@ -0,0 +1,4 @@
+import type { Order } from '@withpotter/lib/api/types';
+export declare function ResendOrderConfirmationButton({ order }: {
+    order: Order;
+}): import("react").JSX.Element | null;