@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/connection-users.tsx"],"sourcesContent":["'use client';\n\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { Bot, User, Workflow, Zap } from 'lucide-react';\nimport { Card, useConfirm, useToast } from '@withpotter/ui-kit';\nimport { springs } from '@withpotter/lib/motion';\nimport {\n  USER_KIND_LABEL,\n  type CapabilityGrant,\n  type ConnectionUser,\n  type UserKind,\n} from '@withpotter/lib/connect';\n\n/**\n * Who may use this connection, and for what.\n *\n * The service enforces this already: a principal is limited to the\n * capabilities it was granted, and a command for anything else is refused\n * before it exists. Enforcing it and never showing it is half a promise —\n * \"least privilege and visible control\" is one principle, not two — and the\n * half that was missing is the one a merchant can act on.\n *\n * It matters most for the things that act unattended. Box acting while\n * somebody is looking at the screen is not the case anyone worries about; an\n * automation firing at three in the morning and an agent acting on an\n * instruction nobody watched it receive are.\n */\nconst MARK: Record<UserKind, typeof Bot> = {\n  agent: Bot,\n  automation: Workflow,\n  developer: Zap,\n  potter: User,\n};\n\nfunction summarise(\n  user: ConnectionUser,\n  grants: readonly CapabilityGrant[],\n): string {\n  if (user.allowed === null) return 'Everything this connection allows';\n\n  if (user.allowed.length === 0) return 'Nothing';\n\n  return user.allowed\n    .map((id) => grants.find((grant) => grant.id === id)?.label ?? id)\n    .join(' · ');\n}\n\nfunction when(iso?: string): string {\n  if (!iso) return 'Never used it';\n\n  return `Last used ${new Date(iso).toLocaleDateString(undefined, {\n    day: 'numeric',\n    month: 'short',\n  })}`;\n}\n\nexport function ConnectionUsers({\n  grants,\n  users,\n}: {\n  grants: readonly CapabilityGrant[];\n  users: readonly ConnectionUser[];\n}) {\n  const confirm = useConfirm();\n  const { toast } = useToast();\n  const reduce = useReducedMotion();\n\n  if (users.length === 0) return null;\n\n  const revoke = async (user: ConnectionUser) => {\n    const ok = await confirm({\n      title: `Stop ${user.name} using this connection?`,\n      // What breaks, rather than \"are you sure\". Revoking an automation's\n      // access does not pause the automation, and a merchant who assumes it\n      // does will not understand why it keeps failing.\n      description:\n        'It keeps running and will fail the moment it tries to use this connection. Nothing already done is undone.',\n      confirmLabel: 'Stop it',\n      tone: 'danger',\n    });\n\n    if (ok) toast({ title: `${user.name} can no longer use this connection` });\n  };\n\n  return (\n    <Card padding=\"none\">\n      <AnimatePresence initial={false}>\n        {users.map((user, index) => {\n          const Mark = MARK[user.kind];\n\n          return (\n            <motion.div\n              key={user.id}\n              layout\n              initial={reduce ? false : { opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={springs.gentle}\n              className={`flex items-start gap-3 p-4 ${\n                index > 0 ? 'border-t border-[var(--border-subtle)]' : ''\n              }`}\n            >\n              <Mark className=\"mt-1 size-4 shrink-0 text-[var(--text-muted)]\" />\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"text-sm font-medium text-[var(--text-primary)]\">\n                  {user.name}\n                </p>\n                <p className=\"mt-1 text-xs leading-relaxed text-[var(--text-secondary)]\">\n                  {summarise(user, grants)}\n                </p>\n                <p className=\"mt-1 text-xs text-[var(--text-tertiary)]\">\n                  {USER_KIND_LABEL[user.kind]} · {when(user.lastUsedAt)}\n                </p>\n              </div>\n              {/* Box is not revocable here. Taking Box's own access away\n                  is disconnecting the connection, which is one action and it\n                  lives in the header. */}\n              {user.kind !== 'potter' && (\n                <button\n                  type=\"button\"\n                  onClick={() => void revoke(user)}\n                  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)]\"\n                >\n                  Stop\n                </button>\n              )}\n            </motion.div>\n          );\n        })}\n      </AnimatePresence>\n    </Card>\n  );\n}\n"],"mappings":";AAsGc,cAQE,YARF;AApGd,SAAS,iBAAiB,QAAQ,wBAAwB;AAC1D,SAAS,KAAK,MAAM,UAAU,WAAW;AACzC,SAAS,MAAM,YAAY,gBAAgB;AAC3C,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,OAIK;AAgBP,MAAM,OAAqC;AAAA,EACzC,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ;AACV;AAEA,SAAS,UACP,MACA,QACQ;AACR,MAAI,KAAK,YAAY,KAAM,QAAO;AAElC,MAAI,KAAK,QAAQ,WAAW,EAAG,QAAO;AAEtC,SAAO,KAAK,QACT,IAAI,CAAC,OAAO,OAAO,KAAK,CAAC,UAAU,MAAM,OAAO,EAAE,GAAG,SAAS,EAAE,EAChE,KAAK,QAAK;AACf;AAEA,SAAS,KAAK,KAAsB;AAClC,MAAI,CAAC,IAAK,QAAO;AAEjB,SAAO,aAAa,IAAI,KAAK,GAAG,EAAE,mBAAmB,QAAW;AAAA,IAC9D,KAAK;AAAA,IACL,OAAO;AAAA,EACT,CAAC,CAAC;AACJ;AAEO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AACF,GAGG;AACD,QAAM,UAAU,WAAW;AAC3B,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,SAAS,iBAAiB;AAEhC,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QAAM,SAAS,OAAO,SAAyB;AAC7C,UAAM,KAAK,MAAM,QAAQ;AAAA,MACvB,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,MAIxB,aACE;AAAA,MACF,cAAc;AAAA,MACd,MAAM;AAAA,IACR,CAAC;AAED,QAAI,GAAI,OAAM,EAAE,OAAO,GAAG,KAAK,IAAI,qCAAqC,CAAC;AAAA,EAC3E;AAEA,SACE,oBAAC,QAAK,SAAQ,QACZ,8BAAC,mBAAgB,SAAS,OACvB,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAM,OAAO,KAAK,KAAK,IAAI;AAE3B,WACE;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QAEC,QAAM;AAAA,QACN,SAAS,SAAS,QAAQ,EAAE,SAAS,EAAE;AAAA,QACvC,SAAS,EAAE,SAAS,EAAE;AAAA,QACtB,MAAM,EAAE,SAAS,EAAE;AAAA,QACnB,YAAY,QAAQ;AAAA,QACpB,WAAW,8BACT,QAAQ,IAAI,2CAA2C,EACzD;AAAA,QAEA;AAAA,8BAAC,QAAK,WAAU,iDAAgD;AAAA,UAChE,qBAAC,SAAI,WAAU,kBACb;AAAA,gCAAC,OAAE,WAAU,kDACV,eAAK,MACR;AAAA,YACA,oBAAC,OAAE,WAAU,6DACV,oBAAU,MAAM,MAAM,GACzB;AAAA,YACA,qBAAC,OAAE,WAAU,4CACV;AAAA,8BAAgB,KAAK,IAAI;AAAA,cAAE;AAAA,cAAI,KAAK,KAAK,UAAU;AAAA,eACtD;AAAA,aACF;AAAA,UAIC,KAAK,SAAS,YACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,KAAK,OAAO,IAAI;AAAA,cAC/B,WAAU;AAAA,cACX;AAAA;AAAA,UAED;AAAA;AAAA;AAAA,MAhCG,KAAK;AAAA,IAkCZ;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;","names":[]}

package/dist/connect/consent-panel.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Whether this customer has ever recorded a choice.
+ *
+ * Its own hook because the panel is now a TAB, and a tab has to be decided on
+ * before it is drawn — a component that returns null is invisible in a stack
+ * and an empty room in a strip. Same query key as the panel's, so the two
+ * share one answer rather than asking twice.
+ */
+export declare function useHasConsentRecord(customerId?: string): boolean;
+export declare function ConsentPanel({ customerId, bare, }: {
+    customerId?: 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.
+     */
+    bare?: boolean;
+}): import("react").JSX.Element | null;

package/dist/connect/consent-panel.js

@@ -0,0 +1,118 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Ban, Check, Mail, MessageSquare, Smartphone, X } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import { Card } from "@withpotter/ui-kit";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { communicationsApi } from "@withpotter/lib/api/communications";
+import { columnItemVariants, columnVariants } from "@withpotter/lib/motion";
+import { BOX_HIDE_SMS } from "@withpotter/lib/box-channels";
+const CHANNELS = [
+  { icon: Mail, key: "emailEnabled", label: "Email" },
+  { icon: MessageSquare, key: "smsEnabled", label: "SMS" },
+  { icon: Smartphone, key: "pushEnabled", label: "Push" }
+].filter((c) => !(BOX_HIDE_SMS && c.key === "smsEnabled"));
+const MARKETING = [
+  { key: "newsletter", label: "Newsletter" },
+  { key: "promotional", label: "Offers and promotions" },
+  { key: "abandonedCart", label: "Basket reminders" },
+  { key: "reviewRequest", label: "Review requests" }
+];
+function ConsentChip({
+  allowed,
+  icon: Icon,
+  label
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `inline-flex items-center gap-2 rounded-lg px-3 py-1 text-xs font-medium ${allowed ? "bg-[var(--success-bg)] text-[var(--success)]" : "bg-[var(--bg-muted)] text-[var(--text-tertiary)]"}`,
+      children: [
+        Icon ? /* @__PURE__ */ jsx(Icon, {}) : allowed ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(X, {}),
+        label,
+        Icon ? allowed ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(X, {}) : null
+      ]
+    }
+  );
+}
+function useHasConsentRecord(customerId) {
+  return Boolean(useConsentRecord(customerId).data);
+}
+function useConsentRecord(customerId) {
+  return useApiQuery(
+    ["notification-preferences", customerId ?? ""],
+    (slug) => communicationsApi.preferences(slug, customerId),
+    { enabled: Boolean(customerId) }
+  );
+}
+function ConsentPanel({
+  customerId,
+  bare
+}) {
+  const reduce = useReducedMotion();
+  const { data } = useConsentRecord(customerId);
+  if (!data) return null;
+  const silenced = CHANNELS.every((channel) => !data[channel.key]);
+  const marketingAgreed = MARKETING.filter((item) => data[item.key]);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    silenced && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start gap-3 rounded-lg bg-[var(--warning-bg)] p-3", children: [
+      /* @__PURE__ */ jsx(Ban, { className: "mt-0.5 size-4 shrink-0 text-[var(--warning)]" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-primary)]", children: "This customer has turned off every channel. Nothing Box sends will reach them, including order updates." })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "space-y-3",
+        variants: reduce ? void 0 : columnVariants,
+        initial: "hidden",
+        animate: "shown",
+        children: [
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: "flex flex-wrap gap-2",
+              variants: reduce ? void 0 : columnItemVariants,
+              children: CHANNELS.map((channel) => /* @__PURE__ */ jsx(
+                ConsentChip,
+                {
+                  allowed: data[channel.key],
+                  icon: channel.icon,
+                  label: channel.label
+                },
+                channel.key
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              className: "border-t border-[var(--border-subtle)] pt-3",
+              variants: reduce ? void 0 : columnItemVariants,
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-[var(--text-secondary)]", children: marketingAgreed.length === 0 ? "They have said no to every kind of marketing." : marketingAgreed.length === MARKETING.length ? "They are happy to hear about all of it." : `They are happy to hear about ${marketingAgreed.length} of ${MARKETING.length}.` }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: MARKETING.map((item) => /* @__PURE__ */ jsx(
+                  ConsentChip,
+                  {
+                    allowed: data[item.key],
+                    label: item.label
+                  },
+                  item.key
+                )) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "mt-3 border-t border-[var(--border-subtle)] pt-3 text-xs text-[var(--text-tertiary)]", children: "These are the customer\u2019s own choices and only they can change them. Order and booking updates are not listed because they are not marketing." })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-medium text-[var(--text-primary)]", children: "What they agreed to hear about" }),
+    bare ? content : /* @__PURE__ */ jsx(Card, { children: content })
+  ] });
+}
+export {
+  ConsentPanel,
+  useHasConsentRecord
+};
+//# sourceMappingURL=consent-panel.js.map

package/dist/connect/consent-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/consent-panel.tsx"],"sourcesContent":["'use client';\n\nimport type { LucideIcon } from 'lucide-react';\nimport { Ban, Check, Mail, MessageSquare, Smartphone, X } from 'lucide-react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { Card } from '@withpotter/ui-kit';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { communicationsApi } from '@withpotter/lib/api/communications';\nimport type { NotificationPreferences } from '@withpotter/lib/api/types/crm';\nimport { columnItemVariants, columnVariants } from '@withpotter/lib/motion';\nimport { BOX_HIDE_SMS } from '@withpotter/lib/box-channels';\n\n/**\n * What this customer has agreed to hear about.\n *\n * The consent engine has enforced these on every send since it was written and\n * no screen has ever read them back, so a customer who opted out of marketing\n * looked exactly like one who was simply never written to. A merchant chasing\n * \"why didn't they get the campaign\" had no way to find the answer, and the\n * answer was sitting in a table the send path already checks.\n *\n * TRANSACTIONAL IS NOT SHOWN AS A CHOICE. Order and booking confirmations are\n * how a business tells somebody what they bought; they are not marketing and a\n * merchant switching them off per-customer is a support ticket waiting to\n * happen. What is shown is what a customer actually decided.\n *\n * Read-only on purpose. Consent belongs to the customer — a screen that let a\n * merchant tick \"yes they do want marketing\" on someone's behalf is the\n * opposite of a consent record, and in several markets it is unlawful.\n *\n * IT WAS SEVEN ROWS OF LABEL AND VALUE, and John was right that it read badly.\n * Two eyebrow labels — \"Channels\", \"Marketing\" — set in tertiary micro-caps\n * inside a single card, and under each a stack of `Label ………… Declined` lines\n * in the shape of a form nobody can fill in. Five of the seven said the same\n * word, so the eye came away with a column of \"Declined\" and no answer to the\n * only question the panel exists for: CAN I REACH THIS PERSON, AND ABOUT WHAT.\n * A settings screen's layout on a fact you cannot set.\n *\n * So it is chips, in two rows a merchant reads in one pass: the ways they can\n * be reached, then the things they said yes to. Agreed carries the green and a\n * tick; declined recedes to the muted ground with a cross — the same\n * lit-versus-recessed pair the pill uses, so \"on\" is legible without reading a\n * single word. The eyebrows go with it: what these are is said by where they\n * sit, and by a sentence at the bottom that was already there.\n */\nconst CHANNELS = (\n  [\n    { icon: Mail, key: 'emailEnabled', label: 'Email' },\n    { icon: MessageSquare, key: 'smsEnabled', label: 'SMS' },\n    { icon: Smartphone, key: 'pushEnabled', label: 'Push' },\n  ] as const\n)\n  // A box without SMS has no SMS consent to show.\n  .filter((c) => !(BOX_HIDE_SMS && c.key === 'smsEnabled'));\n\nconst MARKETING = [\n  { key: 'newsletter', label: 'Newsletter' },\n  { key: 'promotional', label: 'Offers and promotions' },\n  { key: 'abandonedCart', label: 'Basket reminders' },\n  { key: 'reviewRequest', label: 'Review requests' },\n] as const;\n\n/**\n * One answer, lit or recessed.\n *\n * Not `StatusBadge`: that map is about the state of a RECORD moving through a\n * lifecycle, and a person's standing consent is neither a stage nor something\n * that will advance. It is also not a `Badge` with a conditional variant,\n * because the tick and the cross are what make this readable at a glance and a\n * Badge has no slot for one.\n */\nfunction ConsentChip({\n  allowed,\n  icon: Icon,\n  label,\n}: {\n  allowed: boolean;\n  icon?: LucideIcon;\n  label: string;\n}) {\n  return (\n    <span\n      className={`inline-flex items-center gap-2 rounded-lg px-3 py-1 text-xs font-medium ${\n        allowed\n          ? 'bg-[var(--success-bg)] text-[var(--success)]'\n          : 'bg-[var(--bg-muted)] text-[var(--text-tertiary)]'\n      }`}\n    >\n      {Icon ? <Icon /> : allowed ? <Check /> : <X />}\n      {label}\n      {/* The mark rides at the end when an icon already leads, so a channel\n          chip still says which way it went without losing its own glyph. */}\n      {Icon ? allowed ? <Check /> : <X /> : null}\n    </span>\n  );\n}\n\n/**\n * Whether this customer has ever recorded a choice.\n *\n * Its own hook because the panel is now a TAB, and a tab has to be decided on\n * before it is drawn — a component that returns null is invisible in a stack\n * and an empty room in a strip. Same query key as the panel's, so the two\n * share one answer rather than asking twice.\n */\nexport function useHasConsentRecord(customerId?: string): boolean {\n  return Boolean(useConsentRecord(customerId).data);\n}\n\nfunction useConsentRecord(customerId?: string) {\n  return useApiQuery<NotificationPreferences>(\n    ['notification-preferences', customerId ?? ''],\n    (slug) => communicationsApi.preferences(slug, customerId as string),\n    { enabled: Boolean(customerId) },\n  );\n}\n\nexport function ConsentPanel({\n  customerId,\n  bare,\n}: {\n  customerId?: 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.\n   */\n  bare?: boolean;\n}) {\n  const reduce = useReducedMotion();\n\n  const { data } = useConsentRecord(customerId);\n\n  // Nothing recorded means nothing was ever chosen, which is a different fact\n  // from having declined. Silence rather than a panel full of \"Declined\".\n  if (!data) return null;\n\n  const silenced = CHANNELS.every((channel) => !data[channel.key]);\n  const marketingAgreed = MARKETING.filter((item) => data[item.key]);\n\n  const content = (\n    <>\n      {/* The state a merchant most needs and would otherwise never see: this\n            person cannot be reached at all. Said once, in words, rather than\n            left to be inferred from three greyed-out rows. */}\n      {silenced && (\n        <div className=\"mb-3 flex items-start gap-3 rounded-lg bg-[var(--warning-bg)] p-3\">\n          <Ban className=\"mt-0.5 size-4 shrink-0 text-[var(--warning)]\" />\n          <p className=\"text-xs text-[var(--text-primary)]\">\n            This customer has turned off every channel. Nothing Box sends will\n            reach them, including order updates.\n          </p>\n        </div>\n      )}\n\n      <motion.div\n        className=\"space-y-3\"\n        variants={reduce ? undefined : columnVariants}\n        initial=\"hidden\"\n        animate=\"shown\"\n      >\n        <motion.div\n          className=\"flex flex-wrap gap-2\"\n          variants={reduce ? undefined : columnItemVariants}\n        >\n          {CHANNELS.map((channel) => (\n            <ConsentChip\n              key={channel.key}\n              allowed={data[channel.key]}\n              icon={channel.icon}\n              label={channel.label}\n            />\n          ))}\n        </motion.div>\n\n        <motion.div\n          className=\"border-t border-[var(--border-subtle)] pt-3\"\n          variants={reduce ? undefined : columnItemVariants}\n        >\n          {/* The sentence carries the grouping the eyebrow used to, and it\n                names the count — \"two of four\" is the fact, and it is the one\n                a row of chips cannot state on its own. */}\n          <p className=\"mb-2 text-xs text-[var(--text-secondary)]\">\n            {marketingAgreed.length === 0\n              ? 'They have said no to every kind of marketing.'\n              : marketingAgreed.length === MARKETING.length\n                ? 'They are happy to hear about all of it.'\n                : `They are happy to hear about ${marketingAgreed.length} of ${MARKETING.length}.`}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {MARKETING.map((item) => (\n              <ConsentChip\n                key={item.key}\n                allowed={data[item.key]}\n                label={item.label}\n              />\n            ))}\n          </div>\n        </motion.div>\n      </motion.div>\n\n      {/* Why there is nothing to press. */}\n      <p className=\"mt-3 border-t border-[var(--border-subtle)] pt-3 text-xs text-[var(--text-tertiary)]\">\n        These are the customer&rsquo;s own choices and only they can change\n        them. Order and booking updates are not listed because they are not\n        marketing.\n      </p>\n    </>\n  );\n\n  return (\n    <div>\n      <p className=\"mb-2 text-sm font-medium text-[var(--text-primary)]\">\n        What they agreed to hear about\n      </p>\n\n      {bare ? content : <Card>{content}</Card>}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/connect/constraint-list.d.ts

@@ -0,0 +1,19 @@
+import type { LucideIcon } from 'lucide-react';
+export interface Constraint {
+    text: string;
+    /** Overrides the inferred glyph when a line needs a specific one. */
+    icon?: LucideIcon;
+}
+export declare function ConstraintList({ items, 
+/**
+ * `denied` flips the whole list to the "will not" reading.
+ *
+ * A limitation rendered identically to a permission is the failure this
+ * component exists to end: "reads your calendar" and "never writes to your
+ * calendar" are opposite promises and used to be the same grey line.
+ */
+denied, className, }: {
+    items: readonly (string | Constraint)[];
+    denied?: boolean;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/connect/constraint-list.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Ban,
+  Bell,
+  Clock,
+  Eye,
+  Link2,
+  PenLine,
+  Send,
+  Trash2
+} from "lucide-react";
+const VERBS = [
+  [/\b(never|cannot|does not|won'?t|no )/i, Ban],
+  [/\b(delete|remove|cancel)/i, Trash2],
+  [/\b(send|message|notify|email|text)/i, Send],
+  [/\b(add|create|write|update|change|edit|book)/i, PenLine],
+  [/\b(see|read|view|access)/i, Eye],
+  [/\b(alert|remind)/i, Bell],
+  [/\b(delay|hour|minute|daily|nightly|every)/i, Clock]
+];
+function glyphFor(line) {
+  for (const [pattern, icon] of VERBS) {
+    if (pattern.test(line)) return icon;
+  }
+  return Link2;
+}
+function ConstraintList({
+  items,
+  /**
+   * `denied` flips the whole list to the "will not" reading.
+   *
+   * A limitation rendered identically to a permission is the failure this
+   * component exists to end: "reads your calendar" and "never writes to your
+   * calendar" are opposite promises and used to be the same grey line.
+   */
+  denied = false,
+  className
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("ul", { className: `space-y-2 ${className ?? ""}`, children: items.map((item) => {
+    const constraint = typeof item === "string" ? { text: item } : item;
+    const Icon = constraint.icon ?? (denied ? Ban : glyphFor(constraint.text));
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          className: `mt-0.5 size-4 shrink-0 ${denied ? "text-[var(--text-muted)]" : "text-[var(--text-tertiary)]"}`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `text-sm leading-relaxed ${denied ? "text-[var(--text-tertiary)]" : "text-[var(--text-secondary)]"}`,
+          children: constraint.text
+        }
+      )
+    ] }, constraint.text);
+  }) });
+}
+export {
+  ConstraintList
+};
+//# sourceMappingURL=constraint-list.js.map

package/dist/connect/constraint-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/constraint-list.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Ban,\n  Bell,\n  Clock,\n  Eye,\n  Link2,\n  PenLine,\n  Send,\n  Trash2,\n} from 'lucide-react';\nimport type { LucideIcon } from 'lucide-react';\n\n/**\n * What a connection will be able to do, one fact per line with its own glyph.\n *\n * §6.1 of the product guide asks every catalogue entry to state \"the actions,\n * events, and data involved; requested permissions and important limitations\",\n * and the way that has always been rendered here is a column of identical\n * bullet dots. A dot carries no information: it makes six facts look like one\n * paragraph broken up, and the one line that matters — the WRITE, or the thing\n * this will never do — reads exactly like the five that do not.\n *\n * The reference is the consent sheet in Cash App's offers, which is the best\n * version of this pattern in a consumer app: each condition gets a glyph that\n * means something, so the eye can find \"expires in 4 hours\" without reading\n * the other five. Shopify's install screen does the same job with a\n * view-versus-edit split.\n *\n * The glyph is INFERRED from the verb, and that is a deliberate trade. The\n * alternative was a second field on every catalogue entry, which would have\n * meant a data migration to improve a rendering — and a line whose verb the\n * map does not know falls back to a neutral mark rather than to a wrong one.\n * A line that needs a specific glyph can carry its own.\n */\nconst VERBS: ReadonlyArray<readonly [RegExp, LucideIcon]> = [\n  [/\\b(never|cannot|does not|won'?t|no )/i, Ban],\n  [/\\b(delete|remove|cancel)/i, Trash2],\n  [/\\b(send|message|notify|email|text)/i, Send],\n  [/\\b(add|create|write|update|change|edit|book)/i, PenLine],\n  [/\\b(see|read|view|access)/i, Eye],\n  [/\\b(alert|remind)/i, Bell],\n  [/\\b(delay|hour|minute|daily|nightly|every)/i, Clock],\n];\n\nfunction glyphFor(line: string): LucideIcon {\n  for (const [pattern, icon] of VERBS) {\n    if (pattern.test(line)) return icon;\n  }\n\n  return Link2;\n}\n\nexport interface Constraint {\n  text: string;\n  /** Overrides the inferred glyph when a line needs a specific one. */\n  icon?: LucideIcon;\n}\n\nexport function ConstraintList({\n  items,\n  /**\n   * `denied` flips the whole list to the \"will not\" reading.\n   *\n   * A limitation rendered identically to a permission is the failure this\n   * component exists to end: \"reads your calendar\" and \"never writes to your\n   * calendar\" are opposite promises and used to be the same grey line.\n   */\n  denied = false,\n  className,\n}: {\n  items: readonly (string | Constraint)[];\n  denied?: boolean;\n  className?: string;\n}) {\n  if (items.length === 0) return null;\n\n  return (\n    <ul className={`space-y-2 ${className ?? ''}`}>\n      {items.map((item) => {\n        const constraint: Constraint =\n          typeof item === 'string' ? { text: item } : item;\n\n        const Icon =\n          constraint.icon ?? (denied ? Ban : glyphFor(constraint.text));\n\n        return (\n          <li key={constraint.text} className=\"flex items-start gap-3\">\n            <Icon\n              className={`mt-0.5 size-4 shrink-0 ${\n                denied\n                  ? 'text-[var(--text-muted)]'\n                  : 'text-[var(--text-tertiary)]'\n              }`}\n            />\n            <span\n              className={`text-sm leading-relaxed ${\n                denied\n                  ? 'text-[var(--text-tertiary)]'\n                  : 'text-[var(--text-secondary)]'\n              }`}\n            >\n              {constraint.text}\n            </span>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":";AAwFU,SACE,KADF;AAtFV;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAyBP,MAAM,QAAsD;AAAA,EAC1D,CAAC,yCAAyC,GAAG;AAAA,EAC7C,CAAC,6BAA6B,MAAM;AAAA,EACpC,CAAC,uCAAuC,IAAI;AAAA,EAC5C,CAAC,iDAAiD,OAAO;AAAA,EACzD,CAAC,6BAA6B,GAAG;AAAA,EACjC,CAAC,qBAAqB,IAAI;AAAA,EAC1B,CAAC,8CAA8C,KAAK;AACtD;AAEA,SAAS,SAAS,MAA0B;AAC1C,aAAW,CAAC,SAAS,IAAI,KAAK,OAAO;AACnC,QAAI,QAAQ,KAAK,IAAI,EAAG,QAAO;AAAA,EACjC;AAEA,SAAO;AACT;AAQO,SAAS,eAAe;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,SAAS;AAAA,EACT;AACF,GAIG;AACD,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,SACE,oBAAC,QAAG,WAAW,aAAa,aAAa,EAAE,IACxC,gBAAM,IAAI,CAAC,SAAS;AACnB,UAAM,aACJ,OAAO,SAAS,WAAW,EAAE,MAAM,KAAK,IAAI;AAE9C,UAAM,OACJ,WAAW,SAAS,SAAS,MAAM,SAAS,WAAW,IAAI;AAE7D,WACE,qBAAC,QAAyB,WAAU,0BAClC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,0BACT,SACI,6BACA,6BACN;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,2BACT,SACI,gCACA,8BACN;AAAA,UAEC,qBAAW;AAAA;AAAA,MACd;AAAA,SAhBO,WAAW,IAiBpB;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/connect/customer-message-trace.d.ts

@@ -0,0 +1,5 @@
+export declare function CustomerMessageTrace({ orderId, orderReference, transactionId, }: {
+    orderId?: string;
+    orderReference?: string;
+    transactionId?: string;
+}): import("react").JSX.Element | null;

package/dist/connect/customer-message-trace.js

@@ -0,0 +1,167 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Mail, MessageSquare } from "lucide-react";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { Button } from "@withpotter/ui-kit/button";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { communicationsApi } from "@withpotter/lib/api/communications";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@withpotter/ui-kit/dialog";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+function labelFor(message) {
+  switch (message.messageType) {
+    case "order_confirmation":
+      return "Order confirmation";
+    case "transaction_receipt":
+      return "Payment receipt";
+    case "refund_notification":
+      return "Refund notification";
+    default:
+      return message.subject || "Customer message";
+  }
+}
+function channelIcon(channel) {
+  return channel === "email" ? /* @__PURE__ */ jsx(Mail, { className: "size-4 text-[var(--text-secondary)]" }) : /* @__PURE__ */ jsx(MessageSquare, { className: "size-4 text-[var(--text-secondary)]" });
+}
+function when(value) {
+  if (!value) return "Waiting for delivery";
+  return new Date(value).toLocaleString(void 0, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function CustomerMessageTrace({
+  orderId,
+  orderReference,
+  transactionId
+}) {
+  const [selected, setSelected] = useState(null);
+  const [retrying, setRetrying] = useState(false);
+  const { tenant } = useAuth();
+  const { toast } = useToast();
+  const { data, isLoading } = useApiQuery(
+    ["customer-messages", orderId, transactionId],
+    (slug) => orderReference ? communicationsApi.listLogs(slug, { reference: orderReference, limit: 100 }).then((response) => response.items) : orderId ? communicationsApi.listOrderMessages(slug, orderId) : communicationsApi.listTransactionMessages(slug, transactionId),
+    { enabled: Boolean(orderId || orderReference || transactionId) }
+  );
+  if (!isLoading && (!data || data.length === 0)) return null;
+  return /* @__PURE__ */ jsxs("section", { className: "surface overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3", children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Customer communications" }) }),
+    isLoading ? /* @__PURE__ */ jsx("div", { className: "px-4 py-4 text-sm text-[var(--text-tertiary)]", children: "Loading message history\u2026" }) : /* @__PURE__ */ jsx("ul", { className: "divide-y divide-[var(--border-subtle)]", children: data?.map((message) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setSelected(message),
+        className: "flex w-full items-start gap-3 px-4 py-3 text-left hover:bg-[var(--bg-subtle)]",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "grid size-7 shrink-0 place-items-center rounded-full bg-[var(--bg-subtle)]", children: channelIcon(message.channel) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-primary)]", children: labelFor(message) }),
+              /* @__PURE__ */ jsx(StatusBadge, { scope: "connect", status: message.status })
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-xs text-[var(--text-tertiary)]", children: [
+              message.recipientEmail || message.recipientPhone || "No recipient",
+              " \xB7 ",
+              when(
+                message.deliveredAt || message.sentAt || message.createdAt
+              )
+            ] }),
+            message.errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[var(--error)]", children: message.errorMessage })
+          ] })
+        ]
+      }
+    ) }, message.id)) }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: selected !== null,
+        onOpenChange: (open) => !open && setSelected(null),
+        children: /* @__PURE__ */ jsx(DialogContent, { className: "max-w-lg", children: selected && /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: labelFor(selected) }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: "Delivery details for this customer message." }),
+          /* @__PURE__ */ jsxs("dl", { className: "grid gap-3 pt-3 text-sm", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-xs text-[var(--text-tertiary)]", children: "Subject" }),
+              /* @__PURE__ */ jsx("dd", { className: "text-[var(--text-primary)]", children: selected.subject || "No subject" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-xs text-[var(--text-tertiary)]", children: "Destination" }),
+              /* @__PURE__ */ jsx("dd", { className: "text-[var(--text-primary)]", children: selected.recipientEmail || selected.recipientPhone || "No recipient" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("dt", { className: "text-xs text-[var(--text-tertiary)]", children: "Status" }),
+                /* @__PURE__ */ jsx("dd", { className: "pt-1", children: /* @__PURE__ */ jsx(StatusBadge, { scope: "connect", status: selected.status }) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("dt", { className: "text-xs text-[var(--text-tertiary)]", children: "Provider ID" }),
+                /* @__PURE__ */ jsx("dd", { className: "break-all text-[var(--text-primary)]", children: selected.externalId || "Not available" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-xs text-[var(--text-tertiary)]", children: "Timestamps" }),
+              /* @__PURE__ */ jsxs("dd", { className: "text-[var(--text-primary)]", children: [
+                "Created ",
+                when(selected.createdAt),
+                selected.sentAt && ` \xB7 Sent ${when(selected.sentAt)}`,
+                selected.deliveredAt && ` \xB7 Delivered ${when(selected.deliveredAt)}`
+              ] })
+            ] }),
+            selected.errorMessage && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-xs text-[var(--text-tertiary)]", children: "Failure reason" }),
+              /* @__PURE__ */ jsx("dd", { className: "text-[var(--error)]", children: selected.errorMessage })
+            ] }),
+            selected.status === "failed" && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                size: "sm",
+                className: "mt-2",
+                loading: retrying,
+                disabled: retrying,
+                onClick: async () => {
+                  if (!tenant?.slug) return;
+                  setRetrying(true);
+                  try {
+                    await communicationsApi.retryLog(
+                      tenant.slug,
+                      selected.id
+                    );
+                    toast({
+                      title: "Retry queued",
+                      description: "Potter will try sending this message again."
+                    });
+                    setSelected(null);
+                  } catch (error) {
+                    toast({
+                      title: "Could not retry message",
+                      description: error instanceof Error ? error.message : "Try again in a moment.",
+                      variant: "destructive"
+                    });
+                  } finally {
+                    setRetrying(false);
+                  }
+                },
+                children: "Retry message"
+              }
+            )
+          ] })
+        ] }) })
+      }
+    )
+  ] });
+}
+export {
+  CustomerMessageTrace
+};
+//# sourceMappingURL=customer-message-trace.js.map

package/dist/connect/customer-message-trace.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/customer-message-trace.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Mail, MessageSquare } from 'lucide-react';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { communicationsApi } from '@withpotter/lib/api/communications';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '@withpotter/ui-kit/dialog';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport type { NotificationLogItem } from '@withpotter/lib/api/types';\n\nfunction labelFor(message: NotificationLogItem): string {\n  switch (message.messageType) {\n    case 'order_confirmation':\n      return 'Order confirmation';\n    case 'transaction_receipt':\n      return 'Payment receipt';\n    case 'refund_notification':\n      return 'Refund notification';\n    default:\n      return message.subject || 'Customer message';\n  }\n}\n\nfunction channelIcon(channel: string) {\n  return channel === 'email' ? (\n    <Mail className=\"size-4 text-[var(--text-secondary)]\" />\n  ) : (\n    <MessageSquare className=\"size-4 text-[var(--text-secondary)]\" />\n  );\n}\n\nfunction when(value?: string) {\n  if (!value) return 'Waiting for delivery';\n  return new Date(value).toLocaleString(undefined, {\n    month: 'short',\n    day: 'numeric',\n    hour: 'numeric',\n    minute: '2-digit',\n  });\n}\n\nexport function CustomerMessageTrace({\n  orderId,\n  orderReference,\n  transactionId,\n}: {\n  orderId?: string;\n  orderReference?: string;\n  transactionId?: string;\n}) {\n  const [selected, setSelected] = useState<NotificationLogItem | null>(null);\n  const [retrying, setRetrying] = useState(false);\n  const { tenant } = useAuth();\n  const { toast } = useToast();\n  const { data, isLoading } = useApiQuery<NotificationLogItem[]>(\n    ['customer-messages', orderId, transactionId],\n    (slug) =>\n      orderReference\n        ? communicationsApi\n            .listLogs(slug, { reference: orderReference, limit: 100 })\n            .then((response) => response.items)\n        : orderId\n          ? communicationsApi.listOrderMessages(slug, orderId)\n          : communicationsApi.listTransactionMessages(slug, transactionId!),\n    { enabled: Boolean(orderId || orderReference || transactionId) },\n  );\n\n  if (!isLoading && (!data || data.length === 0)) return null;\n\n  return (\n    <section className=\"surface overflow-hidden\">\n      <div className=\"border-b border-[var(--border-subtle)] px-4 py-3\">\n        <h2 className=\"text-sm font-semibold text-[var(--text-primary)]\">\n          Customer communications\n        </h2>\n      </div>\n      {isLoading ? (\n        <div className=\"px-4 py-4 text-sm text-[var(--text-tertiary)]\">\n          Loading message history…\n        </div>\n      ) : (\n        <ul className=\"divide-y divide-[var(--border-subtle)]\">\n          {data?.map((message) => (\n            <li key={message.id}>\n              <button\n                type=\"button\"\n                onClick={() => setSelected(message)}\n                className=\"flex w-full items-start gap-3 px-4 py-3 text-left hover:bg-[var(--bg-subtle)]\"\n              >\n                <span className=\"grid size-7 shrink-0 place-items-center rounded-full bg-[var(--bg-subtle)]\">\n                  {channelIcon(message.channel)}\n                </span>\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    <p className=\"text-sm text-[var(--text-primary)]\">\n                      {labelFor(message)}\n                    </p>\n                    <StatusBadge scope=\"connect\" status={message.status} />\n                  </div>\n                  <p className=\"mt-0.5 text-xs text-[var(--text-tertiary)]\">\n                    {message.recipientEmail ||\n                      message.recipientPhone ||\n                      'No recipient'}\n                    {' · '}\n                    {when(\n                      message.deliveredAt ||\n                        message.sentAt ||\n                        message.createdAt,\n                    )}\n                  </p>\n                  {message.errorMessage && (\n                    <p className=\"mt-1 text-xs text-[var(--error)]\">\n                      {message.errorMessage}\n                    </p>\n                  )}\n                </div>\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n      <Dialog\n        open={selected !== null}\n        onOpenChange={(open) => !open && setSelected(null)}\n      >\n        <DialogContent className=\"max-w-lg\">\n          {selected && (\n            <DialogHeader>\n              <DialogTitle>{labelFor(selected)}</DialogTitle>\n              <DialogDescription>\n                Delivery details for this customer message.\n              </DialogDescription>\n              <dl className=\"grid gap-3 pt-3 text-sm\">\n                <div>\n                  <dt className=\"text-xs text-[var(--text-tertiary)]\">\n                    Subject\n                  </dt>\n                  <dd className=\"text-[var(--text-primary)]\">\n                    {selected.subject || 'No subject'}\n                  </dd>\n                </div>\n                <div>\n                  <dt className=\"text-xs text-[var(--text-tertiary)]\">\n                    Destination\n                  </dt>\n                  <dd className=\"text-[var(--text-primary)]\">\n                    {selected.recipientEmail ||\n                      selected.recipientPhone ||\n                      'No recipient'}\n                  </dd>\n                </div>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  <div>\n                    <dt className=\"text-xs text-[var(--text-tertiary)]\">\n                      Status\n                    </dt>\n                    <dd className=\"pt-1\">\n                      <StatusBadge scope=\"connect\" status={selected.status} />\n                    </dd>\n                  </div>\n                  <div>\n                    <dt className=\"text-xs text-[var(--text-tertiary)]\">\n                      Provider ID\n                    </dt>\n                    <dd className=\"break-all text-[var(--text-primary)]\">\n                      {selected.externalId || 'Not available'}\n                    </dd>\n                  </div>\n                </div>\n                <div>\n                  <dt className=\"text-xs text-[var(--text-tertiary)]\">\n                    Timestamps\n                  </dt>\n                  <dd className=\"text-[var(--text-primary)]\">\n                    Created {when(selected.createdAt)}\n                    {selected.sentAt && ` · Sent ${when(selected.sentAt)}`}\n                    {selected.deliveredAt &&\n                      ` · Delivered ${when(selected.deliveredAt)}`}\n                  </dd>\n                </div>\n                {selected.errorMessage && (\n                  <div>\n                    <dt className=\"text-xs text-[var(--text-tertiary)]\">\n                      Failure reason\n                    </dt>\n                    <dd className=\"text-[var(--error)]\">\n                      {selected.errorMessage}\n                    </dd>\n                  </div>\n                )}\n                {selected.status === 'failed' && (\n                  <Button\n                    variant=\"secondary\"\n                    size=\"sm\"\n                    className=\"mt-2\"\n                    loading={retrying}\n                    disabled={retrying}\n                    onClick={async () => {\n                      if (!tenant?.slug) return;\n                      setRetrying(true);\n                      try {\n                        await communicationsApi.retryLog(\n                          tenant.slug,\n                          selected.id,\n                        );\n                        toast({\n                          title: 'Retry queued',\n                          description:\n                            'Potter will try sending this message again.',\n                        });\n                        setSelected(null);\n                      } catch (error) {\n                        toast({\n                          title: 'Could not retry message',\n                          description:\n                            error instanceof Error\n                              ? error.message\n                              : 'Try again in a moment.',\n                          variant: 'destructive',\n                        });\n                      } finally {\n                        setRetrying(false);\n                      }\n                    }}\n                  >\n                    Retry message\n                  </Button>\n                )}\n              </dl>\n            </DialogHeader>\n          )}\n        </DialogContent>\n      </Dialog>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/connect/delivery-health.d.ts

@@ -0,0 +1 @@
+export declare function DeliveryHealth(): import("react").JSX.Element | null;

package/dist/connect/delivery-health.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { Card } from "@withpotter/ui-kit";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { communicationsApi } from "@withpotter/lib/api/communications";
+import { springs } from "@withpotter/lib/motion";
+function pct(rate) {
+  return `${Math.round(rate * (rate <= 1 ? 100 : 1))}%`;
+}
+function Figure({
+  label,
+  value,
+  tone
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `text-xl font-medium tabular-nums ${tone === "bad" && value > 0 ? "text-[var(--error)]" : "text-[var(--text-primary)]"}`,
+        children: value.toLocaleString()
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-tertiary)]", children: label })
+  ] });
+}
+function DeliveryHealth() {
+  const reduce = useReducedMotion();
+  const { data } = useApiQuery(
+    ["notification-stats"],
+    (slug) => communicationsApi.stats(slug)
+  );
+  if (!data || data.total === 0) return null;
+  const undelivered = data.sent - data.delivered;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-medium text-[var(--text-primary)]", children: "Messages this period" }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-6", children: [
+        /* @__PURE__ */ jsx(Figure, { label: "Delivered", value: data.delivered }),
+        undelivered > 0 && /* @__PURE__ */ jsx(Figure, { label: "Sent, not confirmed", value: undelivered }),
+        /* @__PURE__ */ jsx(Figure, { label: "Failed", value: data.failed, tone: "bad" }),
+        data.pending > 0 && /* @__PURE__ */ jsx(Figure, { label: "Still going", value: data.pending })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-lg bg-[var(--bg-muted)]", children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "h-full rounded-lg bg-[var(--success)]",
+            initial: reduce ? false : { width: 0 },
+            animate: {
+              width: `${Math.min(100, Math.max(0, data.deliveryRate <= 1 ? data.deliveryRate * 100 : data.deliveryRate))}%`
+            },
+            transition: springs.gentle
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-2 text-xs text-[var(--text-tertiary)]", children: [
+          pct(data.deliveryRate),
+          " of ",
+          data.total.toLocaleString(),
+          " confirmed delivered by the provider."
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  DeliveryHealth
+};
+//# sourceMappingURL=delivery-health.js.map

package/dist/connect/delivery-health.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/delivery-health.tsx"],"sourcesContent":["'use client';\n\nimport { motion, useReducedMotion } from 'motion/react';\nimport { Card } from '@withpotter/ui-kit';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { communicationsApi } from '@withpotter/lib/api/communications';\nimport type { NotificationStats } from '@withpotter/lib/api/types/crm';\nimport { springs } from '@withpotter/lib/motion';\n\n/**\n * How much of what Box sent on this business's behalf actually arrived.\n *\n * Every usage number a merchant has ever seen about messaging was a credit\n * balance or a fixture. `GET /communications/stats` has existed as long as the\n * log, counts the real thing, and no screen has ever called it.\n *\n * `sent` and `delivered` are shown as separate numbers on purpose. A message\n * the provider accepted and never landed is the case that costs a merchant a\n * customer, and a single \"messages sent\" total is precisely what hides it.\n *\n * Renders nothing when nothing has been sent. A delivery panel reading 0%\n * on the bill of a business that has sent nothing is a health warning about\n * an absence.\n */\nfunction pct(rate: number): string {\n  return `${Math.round(rate * (rate <= 1 ? 100 : 1))}%`;\n}\n\nfunction Figure({\n  label,\n  value,\n  tone,\n}: {\n  label: string;\n  value: number;\n  tone?: 'bad';\n}) {\n  return (\n    <div className=\"flex flex-col gap-0.5\">\n      <span\n        className={`text-xl font-medium tabular-nums ${\n          tone === 'bad' && value > 0\n            ? 'text-[var(--error)]'\n            : 'text-[var(--text-primary)]'\n        }`}\n      >\n        {value.toLocaleString()}\n      </span>\n      <span className=\"text-xs text-[var(--text-tertiary)]\">{label}</span>\n    </div>\n  );\n}\n\nexport function DeliveryHealth() {\n  const reduce = useReducedMotion();\n\n  const { data } = useApiQuery<NotificationStats>(\n    ['notification-stats'],\n    (slug) => communicationsApi.stats(slug),\n  );\n\n  if (!data || data.total === 0) return null;\n\n  const undelivered = data.sent - data.delivered;\n\n  return (\n    <div>\n      <p className=\"mb-2 text-sm font-medium text-[var(--text-primary)]\">\n        Messages this period\n      </p>\n      <Card>\n        <div className=\"flex flex-wrap items-start justify-between gap-6\">\n          <Figure label=\"Delivered\" value={data.delivered} />\n          {/* The gap between accepted and landed, named. It is the number a\n              merchant cannot get anywhere else and the reason this panel is\n              not just a total. */}\n          {undelivered > 0 && (\n            <Figure label=\"Sent, not confirmed\" value={undelivered} />\n          )}\n          <Figure label=\"Failed\" value={data.failed} tone=\"bad\" />\n          {data.pending > 0 && (\n            <Figure label=\"Still going\" value={data.pending} />\n          )}\n        </div>\n\n        <div className=\"mt-4\">\n          <div className=\"h-1.5 overflow-hidden rounded-lg bg-[var(--bg-muted)]\">\n            {/* The bar fills from nothing on arrival, because a figure that is\n                simply there reads as a label and a figure that moves reads as\n                a measurement. */}\n            <motion.div\n              className=\"h-full rounded-lg bg-[var(--success)]\"\n              initial={reduce ? false : { width: 0 }}\n              animate={{\n                width: `${Math.min(100, Math.max(0, data.deliveryRate <= 1 ? data.deliveryRate * 100 : data.deliveryRate))}%`,\n              }}\n              transition={springs.gentle}\n            />\n          </div>\n          <p className=\"mt-2 text-xs text-[var(--text-tertiary)]\">\n            {pct(data.deliveryRate)} of {data.total.toLocaleString()} confirmed\n            delivered by the provider.\n          </p>\n        </div>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";AAsCI,SACE,KADF;AApCJ,SAAS,QAAQ,wBAAwB;AACzC,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAElC,SAAS,eAAe;AAiBxB,SAAS,IAAI,MAAsB;AACjC,SAAO,GAAG,KAAK,MAAM,QAAQ,QAAQ,IAAI,MAAM,EAAE,CAAC;AACpD;AAEA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,SAAI,WAAU,yBACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,oCACT,SAAS,SAAS,QAAQ,IACtB,wBACA,4BACN;AAAA,QAEC,gBAAM,eAAe;AAAA;AAAA,IACxB;AAAA,IACA,oBAAC,UAAK,WAAU,uCAAuC,iBAAM;AAAA,KAC/D;AAEJ;AAEO,SAAS,iBAAiB;AAC/B,QAAM,SAAS,iBAAiB;AAEhC,QAAM,EAAE,KAAK,IAAI;AAAA,IACf,CAAC,oBAAoB;AAAA,IACrB,CAAC,SAAS,kBAAkB,MAAM,IAAI;AAAA,EACxC;AAEA,MAAI,CAAC,QAAQ,KAAK,UAAU,EAAG,QAAO;AAEtC,QAAM,cAAc,KAAK,OAAO,KAAK;AAErC,SACE,qBAAC,SACC;AAAA,wBAAC,OAAE,WAAU,uDAAsD,kCAEnE;AAAA,IACA,qBAAC,QACC;AAAA,2BAAC,SAAI,WAAU,oDACb;AAAA,4BAAC,UAAO,OAAM,aAAY,OAAO,KAAK,WAAW;AAAA,QAIhD,cAAc,KACb,oBAAC,UAAO,OAAM,uBAAsB,OAAO,aAAa;AAAA,QAE1D,oBAAC,UAAO,OAAM,UAAS,OAAO,KAAK,QAAQ,MAAK,OAAM;AAAA,QACrD,KAAK,UAAU,KACd,oBAAC,UAAO,OAAM,eAAc,OAAO,KAAK,SAAS;AAAA,SAErD;AAAA,MAEA,qBAAC,SAAI,WAAU,QACb;AAAA,4BAAC,SAAI,WAAU,yDAIb;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACC,WAAU;AAAA,YACV,SAAS,SAAS,QAAQ,EAAE,OAAO,EAAE;AAAA,YACrC,SAAS;AAAA,cACP,OAAO,GAAG,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,gBAAgB,IAAI,KAAK,eAAe,MAAM,KAAK,YAAY,CAAC,CAAC;AAAA,YAC5G;AAAA,YACA,YAAY,QAAQ;AAAA;AAAA,QACtB,GACF;AAAA,QACA,qBAAC,OAAE,WAAU,4CACV;AAAA,cAAI,KAAK,YAAY;AAAA,UAAE;AAAA,UAAK,KAAK,MAAM,eAAe;AAAA,UAAE;AAAA,WAE3D;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/connect/identity-card.d.ts

@@ -0,0 +1,4 @@
+import type { ManagedIdentity } from '@withpotter/lib/connect';
+export declare function IdentityCard({ identity }: {
+    identity: ManagedIdentity;
+}): import("react").JSX.Element;