@withpotter/components 0.13.0-next.101

package/dist/connect/command-detail.js

@@ -0,0 +1,93 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Fact,
+  FactList
+} from "@withpotter/ui-kit";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+function moment(iso) {
+  return new Date(iso).toLocaleString(void 0, {
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    month: "short",
+    second: "2-digit"
+  });
+}
+function gap(from, to) {
+  const seconds = Math.round(
+    (new Date(to).getTime() - new Date(from).getTime()) / 1e3
+  );
+  if (seconds < 60) return `${seconds}s later`;
+  return `${Math.round(seconds / 60)} min later`;
+}
+function CommandDetail({
+  command,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx(Dialog, { open: command !== null, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsx(DialogContent, { className: "max-w-lg", children: command && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: command.summary }),
+        /* @__PURE__ */ jsxs(DialogDescription, { className: "mt-1", children: [
+          "Accepted ",
+          moment(command.acceptedAt)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(StatusBadge, { scope: "connect", status: command.status })
+    ] }) }),
+    command.question && /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm leading-relaxed text-[var(--text-secondary)]", children: command.question }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 rounded-lg border border-[var(--border-subtle)] p-3", children: /* @__PURE__ */ jsxs(FactList, { columns: 1, children: [
+      /* @__PURE__ */ jsx(Fact, { label: "Box's reference", value: command.id, mono: true }),
+      /* @__PURE__ */ jsx(
+        Fact,
+        {
+          label: "The provider's reference",
+          value: command.externalRef ?? "Never accepted",
+          mono: Boolean(command.externalRef)
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("p", { className: "mt-4 text-xs font-medium text-[var(--text-primary)]", children: "Every attempt" }),
+    /* @__PURE__ */ jsx("ol", { className: "mt-2 space-y-2", children: command.attempts.map((attempt, index) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "rounded-lg border border-[var(--border-subtle)] p-3",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-[var(--text-primary)]", children: [
+              "Attempt ",
+              attempt.number
+            ] }),
+            /* @__PURE__ */ jsx(
+              StatusBadge,
+              {
+                scope: "connect",
+                status: attempt.status,
+                size: "sm"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-[var(--text-tertiary)]", children: [
+            moment(attempt.at),
+            index === 0 ? ` \xB7 ${gap(command.acceptedAt, attempt.at)}` : ` \xB7 ${gap(command.attempts[index - 1].at, attempt.at)}`
+          ] }),
+          attempt.reason && /* The provider's own words. A normalized status tells the
+             system what to do next; only the raw reason tells a
+             person what actually went wrong. */
+          /* @__PURE__ */ jsx("p", { className: "mt-2 font-mono text-xs leading-relaxed text-[var(--text-secondary)]", children: attempt.reason })
+        ]
+      },
+      attempt.number
+    )) })
+  ] }) }) });
+}
+export {
+  CommandDetail
+};
+//# sourceMappingURL=command-detail.js.map

package/dist/connect/command-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/command-detail.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  Fact,\n  FactList,\n} from '@withpotter/ui-kit';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport type { CommandRecord } from '@withpotter/lib/connect';\n\n/**\n * One piece of work, opened.\n *\n * The log could say a command was tried three times and never why the first\n * two failed, which is the only part that helps anybody. Stripe's request view\n * is the reference: every attempt, when it happened, and the provider's own\n * answer, kept in the provider's words rather than paraphrased into something\n * reassuring.\n *\n * Both references are here because they answer different questions. Box's\n * is what support asks for; the provider's is what proves the external effect\n * exists, and a merchant checking their books needs that one.\n *\n * There is no payload on this screen. What was sent is the merchant's own data\n * and putting it in a support view is how it ends up in a screenshot in a\n * ticket.\n */\nfunction moment(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    second: '2-digit',\n  });\n}\n\nfunction gap(from: string, to: string): string {\n  const seconds = Math.round(\n    (new Date(to).getTime() - new Date(from).getTime()) / 1000,\n  );\n\n  if (seconds < 60) return `${seconds}s later`;\n\n  return `${Math.round(seconds / 60)} min later`;\n}\n\nexport function CommandDetail({\n  command,\n  onClose,\n}: {\n  command: CommandRecord | null;\n  onClose: () => void;\n}) {\n  return (\n    <Dialog open={command !== null} onOpenChange={(open) => !open && onClose()}>\n      <DialogContent className=\"max-w-lg\">\n        {command && (\n          <>\n            <DialogHeader>\n              <div className=\"flex items-start justify-between gap-3\">\n                <div className=\"min-w-0\">\n                  <DialogTitle>{command.summary}</DialogTitle>\n                  <DialogDescription className=\"mt-1\">\n                    Accepted {moment(command.acceptedAt)}\n                  </DialogDescription>\n                </div>\n                <StatusBadge scope=\"connect\" status={command.status} />\n              </div>\n            </DialogHeader>\n\n            {command.question && (\n              <p className=\"mt-4 text-sm leading-relaxed text-[var(--text-secondary)]\">\n                {command.question}\n              </p>\n            )}\n\n            <div className=\"mt-4 rounded-lg border border-[var(--border-subtle)] p-3\">\n              <FactList columns={1}>\n                <Fact label=\"Box's reference\" value={command.id} mono />\n                <Fact\n                  label=\"The provider's reference\"\n                  value={command.externalRef ?? 'Never accepted'}\n                  mono={Boolean(command.externalRef)}\n                />\n              </FactList>\n            </div>\n\n            <p className=\"mt-4 text-xs font-medium text-[var(--text-primary)]\">\n              Every attempt\n            </p>\n            <ol className=\"mt-2 space-y-2\">\n              {command.attempts.map((attempt, index) => (\n                <li\n                  key={attempt.number}\n                  className=\"rounded-lg border border-[var(--border-subtle)] p-3\"\n                >\n                  <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                    <span className=\"text-xs font-medium text-[var(--text-primary)]\">\n                      Attempt {attempt.number}\n                    </span>\n                    <StatusBadge\n                      scope=\"connect\"\n                      status={attempt.status}\n                      size=\"sm\"\n                    />\n                  </div>\n                  <p className=\"mt-1 text-xs text-[var(--text-tertiary)]\">\n                    {moment(attempt.at)}\n                    {index === 0\n                      ? ` · ${gap(command.acceptedAt, attempt.at)}`\n                      : ` · ${gap(command.attempts[index - 1]!.at, attempt.at)}`}\n                  </p>\n                  {attempt.reason && (\n                    /* The provider's own words. A normalized status tells the\n                       system what to do next; only the raw reason tells a\n                       person what actually went wrong. */\n                    <p className=\"mt-2 font-mono text-xs leading-relaxed text-[var(--text-secondary)]\">\n                      {attempt.reason}\n                    </p>\n                  )}\n                </li>\n              ))}\n            </ol>\n          </>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AA8DU,mBAIQ,KACA,YALR;AA5DV;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAoB5B,SAAS,OAAO,KAAqB;AACnC,SAAO,IAAI,KAAK,GAAG,EAAE,eAAe,QAAW;AAAA,IAC7C,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACV,CAAC;AACH;AAEA,SAAS,IAAI,MAAc,IAAoB;AAC7C,QAAM,UAAU,KAAK;AAAA,KAClB,IAAI,KAAK,EAAE,EAAE,QAAQ,IAAI,IAAI,KAAK,IAAI,EAAE,QAAQ,KAAK;AAAA,EACxD;AAEA,MAAI,UAAU,GAAI,QAAO,GAAG,OAAO;AAEnC,SAAO,GAAG,KAAK,MAAM,UAAU,EAAE,CAAC;AACpC;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AACF,GAGG;AACD,SACE,oBAAC,UAAO,MAAM,YAAY,MAAM,cAAc,CAAC,SAAS,CAAC,QAAQ,QAAQ,GACvE,8BAAC,iBAAc,WAAU,YACtB,qBACC,iCACE;AAAA,wBAAC,gBACC,+BAAC,SAAI,WAAU,0CACb;AAAA,2BAAC,SAAI,WAAU,WACb;AAAA,4BAAC,eAAa,kBAAQ,SAAQ;AAAA,QAC9B,qBAAC,qBAAkB,WAAU,QAAO;AAAA;AAAA,UACxB,OAAO,QAAQ,UAAU;AAAA,WACrC;AAAA,SACF;AAAA,MACA,oBAAC,eAAY,OAAM,WAAU,QAAQ,QAAQ,QAAQ;AAAA,OACvD,GACF;AAAA,IAEC,QAAQ,YACP,oBAAC,OAAE,WAAU,6DACV,kBAAQ,UACX;AAAA,IAGF,oBAAC,SAAI,WAAU,4DACb,+BAAC,YAAS,SAAS,GACjB;AAAA,0BAAC,QAAK,OAAM,mBAAkB,OAAO,QAAQ,IAAI,MAAI,MAAC;AAAA,MACtD;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAO,QAAQ,eAAe;AAAA,UAC9B,MAAM,QAAQ,QAAQ,WAAW;AAAA;AAAA,MACnC;AAAA,OACF,GACF;AAAA,IAEA,oBAAC,OAAE,WAAU,uDAAsD,2BAEnE;AAAA,IACA,oBAAC,QAAG,WAAU,kBACX,kBAAQ,SAAS,IAAI,CAAC,SAAS,UAC9B;AAAA,MAAC;AAAA;AAAA,QAEC,WAAU;AAAA,QAEV;AAAA,+BAAC,SAAI,WAAU,qDACb;AAAA,iCAAC,UAAK,WAAU,kDAAiD;AAAA;AAAA,cACtD,QAAQ;AAAA,eACnB;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,QAAQ,QAAQ;AAAA,gBAChB,MAAK;AAAA;AAAA,YACP;AAAA,aACF;AAAA,UACA,qBAAC,OAAE,WAAU,4CACV;AAAA,mBAAO,QAAQ,EAAE;AAAA,YACjB,UAAU,IACP,SAAM,IAAI,QAAQ,YAAY,QAAQ,EAAE,CAAC,KACzC,SAAM,IAAI,QAAQ,SAAS,QAAQ,CAAC,EAAG,IAAI,QAAQ,EAAE,CAAC;AAAA,aAC5D;AAAA,UACC,QAAQ;AAAA;AAAA;AAAA,UAIP,oBAAC,OAAE,WAAU,uEACV,kBAAQ,QACX;AAAA;AAAA;AAAA,MAzBG,QAAQ;AAAA,IA2Bf,CACD,GACH;AAAA,KACF,GAEJ,GACF;AAEJ;","names":[]}

package/dist/connect/command-log.d.ts

@@ -0,0 +1,5 @@
+import type { CommandRecord } from '@withpotter/lib/connect';
+export declare function CommandLog({ commands, showConnection, }: {
+    commands: readonly CommandRecord[];
+    showConnection?: boolean;
+}): import("react").JSX.Element;

package/dist/connect/command-log.js

@@ -0,0 +1,106 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { History } from "lucide-react";
+import { useMemo, useState } from "react";
+import {
+  FilterChip,
+  StackedCell,
+  TableEmptyState,
+  TableRow,
+  TableShell,
+  Th
+} from "@withpotter/ui-kit";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { CommandDetail } from "./command-detail";
+import { SETTLED, productById, useConnections } from "@withpotter/lib/connect";
+const LENSES = [
+  { value: "flight", label: "Still in flight" },
+  { value: "attention", label: "Needs you" },
+  { value: "settled", label: "Finished" }
+];
+function when(iso) {
+  return new Date(iso).toLocaleString(void 0, {
+    day: "numeric",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function CommandLog({
+  commands,
+  showConnection = true
+}) {
+  const connections = useConnections();
+  const [lens, setLens] = useState("");
+  const [opened, setOpened] = useState(null);
+  const rows = useMemo(() => {
+    if (lens === "flight") {
+      return commands.filter(
+        (c) => !SETTLED.includes(c.status) && c.status !== "reconciling"
+      );
+    }
+    if (lens === "attention") {
+      return commands.filter(
+        (c) => c.status === "reconciling" || c.status === "failed"
+      );
+    }
+    if (lens === "settled")
+      return commands.filter((c) => SETTLED.includes(c.status));
+    return commands;
+  }, [commands, lens]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TableShell,
+      {
+        bare: true,
+        toolbar: /* @__PURE__ */ jsx(
+          FilterChip,
+          {
+            label: "Outcome",
+            options: LENSES,
+            value: lens,
+            onChange: setLens
+          }
+        ),
+        head: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx(Th, { children: "What was asked for" }),
+          showConnection && /* @__PURE__ */ jsx(Th, { children: "Connection" }),
+          /* @__PURE__ */ jsx(Th, { children: "Outcome" }),
+          /* @__PURE__ */ jsx(Th, { children: "Provider reference" }),
+          /* @__PURE__ */ jsx(Th, { children: "When" })
+        ] }),
+        children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: showConnection ? 5 : 4, children: /* @__PURE__ */ jsx(
+          TableEmptyState,
+          {
+            icon: History,
+            title: lens ? "Nothing here right now" : "Nothing has run yet",
+            description: lens ? "No work is in that state. Clear the filter to see the rest of the log." : "When Box acts on this connection, every attempt and the provider's own reference land here."
+          }
+        ) }) }) : rows.map((command) => {
+          const connection = connections.find(
+            (c) => c.id === command.connectionId
+          );
+          const product = connection ? productById(connection.productId) : void 0;
+          return /* @__PURE__ */ jsxs(TableRow, { onClick: () => setOpened(command), children: [
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(
+              StackedCell,
+              {
+                value: command.summary,
+                sub: command.attempts.length > 1 ? `${command.attempts.length} attempts \xB7 ${command.id}` : command.id
+              }
+            ) }),
+            showConnection && /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm text-[var(--text-secondary)]", children: product?.name ?? "\u2014" }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(StatusBadge, { scope: "connect", status: command.status }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 font-mono text-xs text-[var(--text-tertiary)]", children: command.externalRef ?? "Not accepted" }),
+            /* @__PURE__ */ jsx("td", { className: "whitespace-nowrap px-4 py-3 text-sm text-[var(--text-secondary)]", children: when(command.occurredAt) })
+          ] }, command.id);
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(CommandDetail, { command: opened, onClose: () => setOpened(null) })
+  ] });
+}
+export {
+  CommandLog
+};
+//# sourceMappingURL=command-log.js.map

package/dist/connect/command-log.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/command-log.tsx"],"sourcesContent":["'use client';\n\nimport { History } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport {\n  FilterChip,\n  StackedCell,\n  TableEmptyState,\n  TableRow,\n  TableShell,\n  Th,\n} from '@withpotter/ui-kit';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport { CommandDetail } from './command-detail';\nimport { SETTLED, productById, useConnections } from '@withpotter/lib/connect';\nimport type { CommandRecord } from '@withpotter/lib/connect';\n\n/**\n * Everything Connect has been asked to do, and what came of it.\n *\n * \"Operational evidence is a feature\" is a product principle rather than a\n * slogan, and this is where it has to be true: a merchant who cannot see the\n * provider's own reference for a write has to take Box's word that it\n * happened. So the external reference is a column, not a detail-page footnote.\n *\n * Attempts are shown only when there was more than one. A column of \"1\" tells\n * nobody anything and makes the two rows that retried four times invisible.\n *\n * Every row carries Box's own reference for the work as well as the\n * provider's. The provider's reference proves the external effect; Box's is\n * what support asks for, and a merchant who cannot quote it has to describe\n * their problem in prose instead.\n */\n\n/**\n * The three questions asked of a log, as an exclusive narrowing.\n *\n * A chip rather than a tab strip: this is filtering rows, not changing what\n * the screen is, and it lives in the table's own toolbar because it acts on\n * the rows beneath it and nothing else.\n */\nconst LENSES = [\n  { value: 'flight', label: 'Still in flight' },\n  { value: 'attention', label: 'Needs you' },\n  { value: 'settled', label: 'Finished' },\n];\nfunction when(iso: string): string {\n  return new Date(iso).toLocaleString(undefined, {\n    day: 'numeric',\n    month: 'short',\n    hour: '2-digit',\n    minute: '2-digit',\n  });\n}\n\nexport function CommandLog({\n  commands,\n  showConnection = true,\n}: {\n  commands: readonly CommandRecord[];\n  showConnection?: boolean;\n}) {\n  const connections = useConnections();\n  const [lens, setLens] = useState('');\n  const [opened, setOpened] = useState<CommandRecord | null>(null);\n\n  const rows = useMemo(() => {\n    if (lens === 'flight') {\n      return commands.filter(\n        (c) => !SETTLED.includes(c.status) && c.status !== 'reconciling',\n      );\n    }\n    if (lens === 'attention') {\n      return commands.filter(\n        (c) => c.status === 'reconciling' || c.status === 'failed',\n      );\n    }\n    if (lens === 'settled')\n      return commands.filter((c) => SETTLED.includes(c.status));\n    return commands;\n  }, [commands, lens]);\n\n  return (\n    <>\n      <TableShell\n        bare\n        toolbar={\n          <FilterChip\n            label=\"Outcome\"\n            options={LENSES}\n            value={lens}\n            onChange={setLens}\n          />\n        }\n        head={\n          <tr>\n            <Th>What was asked for</Th>\n            {showConnection && <Th>Connection</Th>}\n            <Th>Outcome</Th>\n            <Th>Provider reference</Th>\n            <Th>When</Th>\n          </tr>\n        }\n      >\n        {rows.length === 0 ? (\n          <tr>\n            <td colSpan={showConnection ? 5 : 4}>\n              <TableEmptyState\n                icon={History}\n                title={lens ? 'Nothing here right now' : 'Nothing has run yet'}\n                description={\n                  lens\n                    ? 'No work is in that state. Clear the filter to see the rest of the log.'\n                    : \"When Box acts on this connection, every attempt and the provider's own reference land here.\"\n                }\n              />\n            </td>\n          </tr>\n        ) : (\n          rows.map((command) => {\n            const connection = connections.find(\n              (c) => c.id === command.connectionId,\n            );\n            const product = connection\n              ? productById(connection.productId)\n              : undefined;\n\n            return (\n              <TableRow key={command.id} onClick={() => setOpened(command)}>\n                <td className=\"px-4 py-3\">\n                  <StackedCell\n                    value={command.summary}\n                    sub={\n                      command.attempts.length > 1\n                        ? `${command.attempts.length} attempts · ${command.id}`\n                        : command.id\n                    }\n                  />\n                </td>\n                {showConnection && (\n                  <td className=\"px-4 py-3 text-sm text-[var(--text-secondary)]\">\n                    {product?.name ?? '—'}\n                  </td>\n                )}\n                <td className=\"px-4 py-3\">\n                  <StatusBadge scope=\"connect\" status={command.status} />\n                </td>\n                <td className=\"px-4 py-3 font-mono text-xs text-[var(--text-tertiary)]\">\n                  {/* No reference means the provider never accepted it. That is\n                    information, so the cell says it rather than sitting blank\n                    and reading as a rendering fault. */}\n                  {command.externalRef ?? 'Not accepted'}\n                </td>\n                <td className=\"whitespace-nowrap px-4 py-3 text-sm text-[var(--text-secondary)]\">\n                  {when(command.occurredAt)}\n                </td>\n              </TableRow>\n            );\n          })\n        )}\n      </TableShell>\n      <CommandDetail command={opened} onClose={() => setOpened(null)} />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/connect/connection-headline.d.ts

@@ -0,0 +1,23 @@
+import { type Connection } from '@withpotter/lib/connect';
+/**
+ * The connection, stated back to the merchant.
+ *
+ * Without this the page opens as a stack of bordered panels holding label,
+ * description and a switch, which is the default shape of every admin screen
+ * ever built and has no answer to "what am I looking at". A count of
+ * capabilities is not the answer either: four grants is not good news if the
+ * thing stopped working on Friday.
+ *
+ * So it is a judgement, assembled from the connection's own state and ranked
+ * by what the merchant can do something about. Same treatment as the business
+ * statement on Business model, because it is the same job.
+ */
+export declare function connectionJudgement(connection: Connection): {
+    detail: string;
+    sentence: string;
+};
+export declare function ConnectionHeadline({ action, connection, }: {
+    /** The way out of whatever the sentence says. */
+    action?: React.ReactNode;
+    connection: Connection;
+}): import("react").JSX.Element;

package/dist/connect/connection-headline.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { springs } from "@withpotter/lib/motion";
+import { reachesNothing } from "@withpotter/lib/connect";
+function connectionJudgement(connection) {
+  if (connection.health === "attention_required") {
+    return {
+      detail: connection.attention ?? "Reconnect it and the work it is holding will be offered again.",
+      sentence: "This stopped working."
+    };
+  }
+  if (connection.health === "disconnected") {
+    return {
+      detail: "Nothing is reaching it, and nothing will until it is connected again.",
+      sentence: "This is disconnected."
+    };
+  }
+  if (reachesNothing(connection)) {
+    return {
+      detail: `The credential is fine. Choose at least one ${connection.resourceNoun} or nothing will move.`,
+      sentence: "Working, and pointed at nothing."
+    };
+  }
+  const running = connection.syncs.filter((sync) => sync.status !== "paused");
+  if (running.length > 0) {
+    const names = running.map((sync) => sync.label).join(" and ");
+    return {
+      detail: "Nothing here needs you.",
+      sentence: `Keeping ${names} in step.`
+    };
+  }
+  return {
+    detail: "Nothing here needs you.",
+    sentence: "This is working."
+  };
+}
+function ConnectionHeadline({
+  action,
+  connection
+}) {
+  const reduce = useReducedMotion();
+  const { detail, sentence } = connectionJudgement(connection);
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-xl", children: [
+    /* @__PURE__ */ jsx(
+      motion.p,
+      {
+        initial: reduce ? false : { opacity: 0, y: 6 },
+        animate: { opacity: 1, y: 0 },
+        transition: springs.gentle,
+        className: "text-4xl font-semibold leading-[1.25] tracking-[-0.02em] text-[var(--text-primary)]",
+        children: sentence
+      },
+      sentence
+    ),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed text-[var(--text-secondary)]", children: detail }),
+    action && /* @__PURE__ */ jsx("div", { className: "mt-4", children: action })
+  ] });
+}
+export {
+  ConnectionHeadline,
+  connectionJudgement
+};
+//# sourceMappingURL=connection-headline.js.map

package/dist/connect/connection-headline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/connection-headline.tsx"],"sourcesContent":["'use client';\n\nimport { motion, useReducedMotion } from 'motion/react';\nimport { springs } from '@withpotter/lib/motion';\nimport { reachesNothing, type Connection } from '@withpotter/lib/connect';\n\n/**\n * The connection, stated back to the merchant.\n *\n * Without this the page opens as a stack of bordered panels holding label,\n * description and a switch, which is the default shape of every admin screen\n * ever built and has no answer to \"what am I looking at\". A count of\n * capabilities is not the answer either: four grants is not good news if the\n * thing stopped working on Friday.\n *\n * So it is a judgement, assembled from the connection's own state and ranked\n * by what the merchant can do something about. Same treatment as the business\n * statement on Business model, because it is the same job.\n */\nexport function connectionJudgement(connection: Connection): {\n  detail: string;\n  sentence: string;\n} {\n  if (connection.health === 'attention_required') {\n    return {\n      detail:\n        connection.attention ??\n        'Reconnect it and the work it is holding will be offered again.',\n      sentence: 'This stopped working.',\n    };\n  }\n\n  if (connection.health === 'disconnected') {\n    return {\n      detail:\n        'Nothing is reaching it, and nothing will until it is connected again.',\n      sentence: 'This is disconnected.',\n    };\n  }\n\n  if (reachesNothing(connection)) {\n    return {\n      detail: `The credential is fine. Choose at least one ${connection.resourceNoun} or nothing will move.`,\n      sentence: 'Working, and pointed at nothing.',\n    };\n  }\n\n  const running = connection.syncs.filter((sync) => sync.status !== 'paused');\n\n  if (running.length > 0) {\n    const names = running.map((sync) => sync.label).join(' and ');\n\n    return {\n      detail: 'Nothing here needs you.',\n      sentence: `Keeping ${names} in step.`,\n    };\n  }\n\n  return {\n    detail: 'Nothing here needs you.',\n    sentence: 'This is working.',\n  };\n}\n\nexport function ConnectionHeadline({\n  action,\n  connection,\n}: {\n  /** The way out of whatever the sentence says. */\n  action?: React.ReactNode;\n  connection: Connection;\n}) {\n  const reduce = useReducedMotion();\n  const { detail, sentence } = connectionJudgement(connection);\n\n  return (\n    <div className=\"max-w-xl\">\n      <motion.p\n        key={sentence}\n        initial={reduce ? false : { opacity: 0, y: 6 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={springs.gentle}\n        className=\"text-4xl font-semibold leading-[1.25] tracking-[-0.02em] text-[var(--text-primary)]\"\n      >\n        {sentence}\n      </motion.p>\n      <p className=\"mt-2 text-sm leading-relaxed text-[var(--text-secondary)]\">\n        {detail}\n      </p>\n      {action && <div className=\"mt-4\">{action}</div>}\n    </div>\n  );\n}\n"],"mappings":";AA4EI,SACE,KADF;AA1EJ,SAAS,QAAQ,wBAAwB;AACzC,SAAS,eAAe;AACxB,SAAS,sBAAuC;AAezC,SAAS,oBAAoB,YAGlC;AACA,MAAI,WAAW,WAAW,sBAAsB;AAC9C,WAAO;AAAA,MACL,QACE,WAAW,aACX;AAAA,MACF,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,MAAI,WAAW,WAAW,gBAAgB;AACxC,WAAO;AAAA,MACL,QACE;AAAA,MACF,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,MAAI,eAAe,UAAU,GAAG;AAC9B,WAAO;AAAA,MACL,QAAQ,+CAA+C,WAAW,YAAY;AAAA,MAC9E,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,QAAM,UAAU,WAAW,MAAM,OAAO,CAAC,SAAS,KAAK,WAAW,QAAQ;AAE1E,MAAI,QAAQ,SAAS,GAAG;AACtB,UAAM,QAAQ,QAAQ,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,OAAO;AAE5D,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,UAAU,WAAW,KAAK;AAAA,IAC5B;AAAA,EACF;AAEA,SAAO;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AACF;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAIG;AACD,QAAM,SAAS,iBAAiB;AAChC,QAAM,EAAE,QAAQ,SAAS,IAAI,oBAAoB,UAAU;AAE3D,SACE,qBAAC,SAAI,WAAU,YACb;AAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QAEC,SAAS,SAAS,QAAQ,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,QAC7C,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,QAC5B,YAAY,QAAQ;AAAA,QACpB,WAAU;AAAA,QAET;AAAA;AAAA,MANI;AAAA,IAOP;AAAA,IACA,oBAAC,OAAE,WAAU,6DACV,kBACH;AAAA,IACC,UAAU,oBAAC,SAAI,WAAU,QAAQ,kBAAO;AAAA,KAC3C;AAEJ;","names":[]}

package/dist/connect/connection-history.d.ts

@@ -0,0 +1,4 @@
+import type { ConnectionEvent } from '@withpotter/lib/connect';
+export declare function ConnectionHistory({ events, }: {
+    events: readonly ConnectionEvent[];
+}): import("react").JSX.Element | null;

package/dist/connect/connection-history.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { Card } from "@withpotter/ui-kit";
+import { CONNECTION_EVENT_VERB } from "@withpotter/lib/connect";
+import { columnItemVariants, columnVariants } from "@withpotter/lib/motion";
+function when(iso) {
+  return new Date(iso).toLocaleString(void 0, {
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    month: "short",
+    year: "numeric"
+  });
+}
+const CONSEQUENTIAL = ["scope_changed", "grant_changed"];
+function ConnectionHistory({
+  events
+}) {
+  const reduce = useReducedMotion();
+  if (events.length === 0) return null;
+  const ordered = [...events].sort((a, b) => b.at.localeCompare(a.at));
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-medium text-[var(--text-primary)]", children: "Who changed this connection" }),
+    /* @__PURE__ */ jsx(Card, { padding: "none", children: /* @__PURE__ */ jsx(
+      motion.ol,
+      {
+        className: "divide-y divide-[var(--border-subtle)]",
+        variants: reduce ? void 0 : columnVariants,
+        initial: "hidden",
+        animate: "shown",
+        children: ordered.map((event) => /* @__PURE__ */ jsxs(
+          motion.li,
+          {
+            className: "px-4 py-3",
+            variants: reduce ? void 0 : columnItemVariants,
+            children: [
+              /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--text-primary)]", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: event.actor }),
+                " ",
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: CONSEQUENTIAL.includes(event.kind) ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)]",
+                    children: CONNECTION_EVENT_VERB[event.kind]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-xs text-[var(--text-tertiary)]", children: [
+                when(event.at),
+                event.detail ? ` \xB7 ${event.detail}` : ""
+              ] })
+            ]
+          },
+          event.id
+        ))
+      }
+    ) })
+  ] });
+}
+export {
+  ConnectionHistory
+};
+//# sourceMappingURL=connection-history.js.map

package/dist/connect/connection-history.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/connection-history.tsx"],"sourcesContent":["'use client';\n\nimport { motion, useReducedMotion } from 'motion/react';\nimport { Card } from '@withpotter/ui-kit';\nimport { CONNECTION_EVENT_VERB } from '@withpotter/lib/connect';\nimport type { ConnectionEvent } from '@withpotter/lib/connect';\nimport { columnItemVariants, columnVariants } from '@withpotter/lib/motion';\n\n/**\n * What was done TO this connection, and by whom.\n *\n * Not what it did — the command log answers that, and the two are different\n * questions that a single feed would blur. This is the human half: somebody\n * granted this access, somebody narrowed it, somebody reconnected it at two in\n * the morning. On a shared workspace none of those people is necessarily the\n * one looking at the screen, and \"who gave Box access to our books\" is a\n * question that currently has no answer anywhere in the product.\n *\n * Newest first, and every row names a person. An entry that cannot say who is\n * not an audit entry, it is a timestamp — which is why `actor` is required on\n * the type rather than optional with a fallback to \"system\".\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    year: 'numeric',\n  });\n}\n\n/**\n * The two that change what Box is allowed to do read differently from the\n * rest, because they are the ones a person would dispute later.\n */\nconst CONSEQUENTIAL: readonly string[] = ['scope_changed', 'grant_changed'];\n\nexport function ConnectionHistory({\n  events,\n}: {\n  events: readonly ConnectionEvent[];\n}) {\n  const reduce = useReducedMotion();\n\n  if (events.length === 0) return null;\n\n  const ordered = [...events].sort((a, b) => b.at.localeCompare(a.at));\n\n  return (\n    <div>\n      <p className=\"mb-2 text-sm font-medium text-[var(--text-primary)]\">\n        Who changed this connection\n      </p>\n\n      <Card padding=\"none\">\n        <motion.ol\n          className=\"divide-y divide-[var(--border-subtle)]\"\n          variants={reduce ? undefined : columnVariants}\n          initial=\"hidden\"\n          animate=\"shown\"\n        >\n          {ordered.map((event) => (\n            <motion.li\n              key={event.id}\n              className=\"px-4 py-3\"\n              variants={reduce ? undefined : columnItemVariants}\n            >\n              <p className=\"text-sm text-[var(--text-primary)]\">\n                <span className=\"font-medium\">{event.actor}</span>{' '}\n                <span\n                  className={\n                    CONSEQUENTIAL.includes(event.kind)\n                      ? 'text-[var(--text-primary)]'\n                      : 'text-[var(--text-secondary)]'\n                  }\n                >\n                  {CONNECTION_EVENT_VERB[event.kind]}\n                </span>\n              </p>\n\n              <p className=\"mt-0.5 text-xs text-[var(--text-tertiary)]\">\n                {when(event.at)}\n                {event.detail ? ` · ${event.detail}` : ''}\n              </p>\n            </motion.li>\n          ))}\n        </motion.ol>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";AAmDM,cAiBQ,YAjBR;AAjDN,SAAS,QAAQ,wBAAwB;AACzC,SAAS,YAAY;AACrB,SAAS,6BAA6B;AAEtC,SAAS,oBAAoB,sBAAsB;AAgBnD,SAAS,KAAK,KAAqB;AACjC,SAAO,IAAI,KAAK,GAAG,EAAE,eAAe,QAAW;AAAA,IAC7C,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AACH;AAMA,MAAM,gBAAmC,CAAC,iBAAiB,eAAe;AAEnE,SAAS,kBAAkB;AAAA,EAChC;AACF,GAEG;AACD,QAAM,SAAS,iBAAiB;AAEhC,MAAI,OAAO,WAAW,EAAG,QAAO;AAEhC,QAAM,UAAU,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,GAAG,MAAM,EAAE,GAAG,cAAc,EAAE,EAAE,CAAC;AAEnE,SACE,qBAAC,SACC;AAAA,wBAAC,OAAE,WAAU,uDAAsD,yCAEnE;AAAA,IAEA,oBAAC,QAAK,SAAQ,QACZ;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAU;AAAA,QACV,UAAU,SAAS,SAAY;AAAA,QAC/B,SAAQ;AAAA,QACR,SAAQ;AAAA,QAEP,kBAAQ,IAAI,CAAC,UACZ;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YAEC,WAAU;AAAA,YACV,UAAU,SAAS,SAAY;AAAA,YAE/B;AAAA,mCAAC,OAAE,WAAU,sCACX;AAAA,oCAAC,UAAK,WAAU,eAAe,gBAAM,OAAM;AAAA,gBAAQ;AAAA,gBACnD;AAAA,kBAAC;AAAA;AAAA,oBACC,WACE,cAAc,SAAS,MAAM,IAAI,IAC7B,+BACA;AAAA,oBAGL,gCAAsB,MAAM,IAAI;AAAA;AAAA,gBACnC;AAAA,iBACF;AAAA,cAEA,qBAAC,OAAE,WAAU,8CACV;AAAA,qBAAK,MAAM,EAAE;AAAA,gBACb,MAAM,SAAS,SAAM,MAAM,MAAM,KAAK;AAAA,iBACzC;AAAA;AAAA;AAAA,UApBK,MAAM;AAAA,QAqBb,CACD;AAAA;AAAA,IACH,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/connect/connection-resources.d.ts

@@ -0,0 +1,4 @@
+import type { Connection } from '@withpotter/lib/connect';
+export declare function ConnectionResources({ connection, }: {
+    connection: Connection;
+}): import("react").JSX.Element | null;

package/dist/connect/connection-resources.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Card, Checkbox, OptionButton, useToast } from "@withpotter/ui-kit";
+import { springs } from "@withpotter/lib/motion";
+function plural(noun, count) {
+  return count === 1 ? noun : `${noun}s`;
+}
+function ConnectionResources({
+  connection
+}) {
+  const { toast } = useToast();
+  const reduce = useReducedMotion();
+  const [scope, setScope] = useState(connection.resourceScope);
+  const [chosen, setChosen] = useState(
+    Object.fromEntries(connection.resources.map((r) => [r.id, r.selected]))
+  );
+  if (connection.resources.length === 0) return null;
+  const selectedCount = connection.resources.filter((r) => chosen[r.id]).length;
+  const toggle = (resource, next) => {
+    setChosen((prev) => ({ ...prev, [resource.id]: next }));
+    toast({
+      title: next ? `Box can use ${resource.name}` : `Box will leave ${resource.name} alone`
+    });
+  };
+  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs(Card, { padding: "none", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-[var(--border-subtle)] p-4", children: [
+      /* @__PURE__ */ jsx(
+        OptionButton,
+        {
+          selected: scope === "all",
+          onClick: () => {
+            setScope("all");
+            toast({
+              title: `Box can use every ${connection.resourceNoun} in this account`
+            });
+          },
+          children: "Everything in this account"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        OptionButton,
+        {
+          selected: scope === "selected",
+          onClick: () => setScope("selected"),
+          children: "Only what I choose"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: scope === "selected" && /* @__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: connection.resources.map((resource, index) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: `flex cursor-pointer items-start gap-3 p-4 hover:bg-[var(--bg-subtle)] ${index > 0 ? "border-t border-[var(--border-subtle)]" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  bare: true,
+                  checked: chosen[resource.id] ?? false,
+                  onChange: (event) => toggle(resource, event.target.checked),
+                  "aria-label": resource.name
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium text-[var(--text-primary)]", children: resource.name }),
+                resource.detail && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-[var(--text-tertiary)]", children: resource.detail })
+              ] })
+            ]
+          },
+          resource.id
+        ))
+      }
+    ) }),
+    /* @__PURE__ */ jsx("p", { className: "border-t border-[var(--border-subtle)] p-4 text-xs text-[var(--text-tertiary)]", children: scope === "all" ? `Every ${connection.resourceNoun} in this account, including ones added later.` : `${selectedCount} of ${connection.resources.length} ${plural(
+      connection.resourceNoun,
+      connection.resources.length
+    )}. Anything not chosen stays invisible to Box.` })
+  ] }) });
+}
+export {
+  ConnectionResources
+};
+//# sourceMappingURL=connection-resources.js.map

package/dist/connect/connection-resources.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/connection-resources.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { Card, Checkbox, OptionButton, useToast } from '@withpotter/ui-kit';\nimport { springs } from '@withpotter/lib/motion';\nimport type {\n  Connection,\n  ConnectionResource,\n  ResourceScope,\n} from '@withpotter/lib/connect';\n\n/**\n * What inside the account Box may touch.\n *\n * Authorising an account is not choosing what inside it is in scope, and the\n * platforms that handle this well keep the two apart: GitHub asks for all\n * repositories or only selected ones, Slack makes you pick the channel, Plaid\n * makes you pick the accounts. Box asked for neither, so a merchant granted\n * everything and was never told they had.\n *\n * The scope is an explicit choice rather than a count of ticks, because\n * \"everything\" and \"nothing chosen yet\" look identical in a list of empty\n * boxes and mean opposite things.\n *\n * The \"pointed at nothing\" case is NOT announced here. The page headline\n * already says it, in bigger type and with the way out attached, and a warning\n * repeating the sentence directly above it is the page telling somebody twice\n * that they cannot read.\n */\nfunction plural(noun: string, count: number): string {\n  return count === 1 ? noun : `${noun}s`;\n}\n\nexport function ConnectionResources({\n  connection,\n}: {\n  connection: Connection;\n}) {\n  const { toast } = useToast();\n  const reduce = useReducedMotion();\n  const [scope, setScope] = useState<ResourceScope>(connection.resourceScope);\n  const [chosen, setChosen] = useState<Record<string, boolean>>(\n    Object.fromEntries(connection.resources.map((r) => [r.id, r.selected])),\n  );\n\n  if (connection.resources.length === 0) return null;\n\n  const selectedCount = connection.resources.filter((r) => chosen[r.id]).length;\n\n  const toggle = (resource: ConnectionResource, next: boolean) => {\n    setChosen((prev) => ({ ...prev, [resource.id]: next }));\n    toast({\n      title: next\n        ? `Box can use ${resource.name}`\n        : `Box will leave ${resource.name} alone`,\n    });\n  };\n\n  return (\n    <div className=\"space-y-3\">\n      <Card padding=\"none\">\n        <div className=\"flex flex-wrap items-center gap-2 border-b border-[var(--border-subtle)] p-4\">\n          <OptionButton\n            selected={scope === 'all'}\n            onClick={() => {\n              setScope('all');\n              toast({\n                title: `Box can use every ${connection.resourceNoun} in this account`,\n              });\n            }}\n          >\n            Everything in this account\n          </OptionButton>\n          <OptionButton\n            selected={scope === 'selected'}\n            onClick={() => setScope('selected')}\n          >\n            Only what I choose\n          </OptionButton>\n        </div>\n\n        <AnimatePresence initial={false}>\n          {scope === 'selected' && (\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              {connection.resources.map((resource, index) => (\n                <label\n                  key={resource.id}\n                  className={`flex cursor-pointer items-start gap-3 p-4 hover:bg-[var(--bg-subtle)] ${\n                    index > 0 ? 'border-t border-[var(--border-subtle)]' : ''\n                  }`}\n                >\n                  <Checkbox\n                    bare\n                    checked={chosen[resource.id] ?? false}\n                    onChange={(event) => toggle(resource, event.target.checked)}\n                    aria-label={resource.name}\n                  />\n                  <span className=\"min-w-0 flex-1\">\n                    <span className=\"block text-sm font-medium text-[var(--text-primary)]\">\n                      {resource.name}\n                    </span>\n                    {resource.detail && (\n                      <span className=\"mt-0.5 block text-xs text-[var(--text-tertiary)]\">\n                        {resource.detail}\n                      </span>\n                    )}\n                  </span>\n                </label>\n              ))}\n            </motion.div>\n          )}\n        </AnimatePresence>\n\n        <p className=\"border-t border-[var(--border-subtle)] p-4 text-xs text-[var(--text-tertiary)]\">\n          {scope === 'all'\n            ? `Every ${connection.resourceNoun} in this account, including ones added later.`\n            : `${selectedCount} of ${connection.resources.length} ${plural(\n                connection.resourceNoun,\n                connection.resources.length,\n              )}. Anything not chosen stays invisible to Box.`}\n        </p>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/connect/connection-users.d.ts

@@ -0,0 +1,5 @@
+import { type CapabilityGrant, type ConnectionUser } from '@withpotter/lib/connect';
+export declare function ConnectionUsers({ grants, users, }: {
+    grants: readonly CapabilityGrant[];
+    users: readonly ConnectionUser[];
+}): import("react").JSX.Element | null;

package/dist/connect/connection-users.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Bot, User, Workflow, Zap } from "lucide-react";
+import { Card, useConfirm, useToast } from "@withpotter/ui-kit";
+import { springs } from "@withpotter/lib/motion";
+import {
+  USER_KIND_LABEL
+} from "@withpotter/lib/connect";
+const MARK = {
+  agent: Bot,
+  automation: Workflow,
+  developer: Zap,
+  potter: User
+};
+function summarise(user, grants) {
+  if (user.allowed === null) return "Everything this connection allows";
+  if (user.allowed.length === 0) return "Nothing";
+  return user.allowed.map((id) => grants.find((grant) => grant.id === id)?.label ?? id).join(" \xB7 ");
+}
+function when(iso) {
+  if (!iso) return "Never used it";
+  return `Last used ${new Date(iso).toLocaleDateString(void 0, {
+    day: "numeric",
+    month: "short"
+  })}`;
+}
+function ConnectionUsers({
+  grants,
+  users
+}) {
+  const confirm = useConfirm();
+  const { toast } = useToast();
+  const reduce = useReducedMotion();
+  if (users.length === 0) return null;
+  const revoke = async (user) => {
+    const ok = await confirm({
+      title: `Stop ${user.name} using this connection?`,
+      // What breaks, rather than "are you sure". Revoking an automation's
+      // access does not pause the automation, and a merchant who assumes it
+      // does will not understand why it keeps failing.
+      description: "It keeps running and will fail the moment it tries to use this connection. Nothing already done is undone.",
+      confirmLabel: "Stop it",
+      tone: "danger"
+    });
+    if (ok) toast({ title: `${user.name} can no longer use this connection` });
+  };
+  return /* @__PURE__ */ jsx(Card, { padding: "none", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: users.map((user, index) => {
+    const Mark = MARK[user.kind];
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        layout: true,
+        initial: reduce ? false : { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: springs.gentle,
+        className: `flex items-start gap-3 p-4 ${index > 0 ? "border-t border-[var(--border-subtle)]" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx(Mark, { className: "mt-1 size-4 shrink-0 text-[var(--text-muted)]" }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: user.name }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs leading-relaxed text-[var(--text-secondary)]", children: summarise(user, grants) }),
+            /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-[var(--text-tertiary)]", children: [
+              USER_KIND_LABEL[user.kind],
+              " \xB7 ",
+              when(user.lastUsedAt)
+            ] })
+          ] }),
+          user.kind !== "potter" && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => void revoke(user),
+              className: "shrink-0 rounded-lg px-2 py-1 text-xs font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] hover:text-[var(--error)]",
+              children: "Stop"
+            }
+          )
+        ]
+      },
+      user.id
+    );
+  }) }) });
+}
+export {
+  ConnectionUsers
+};
+//# sourceMappingURL=connection-users.js.map