@withpotter/components 0.13.0-next.101

package/dist/connect/resend-order-confirmation-button.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Mail } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { ordersApi } from "@withpotter/lib/api/orders";
+import { useState } from "react";
+function ResendOrderConfirmationButton({ order }) {
+  const { tenant } = useAuth();
+  const { toast } = useToast();
+  const [sending, setSending] = useState(false);
+  if (order.paymentStatus !== "paid" && order.status !== "completed") {
+    return null;
+  }
+  const resend = async () => {
+    if (!tenant?.slug) return;
+    setSending(true);
+    try {
+      await ordersApi.resendConfirmation(tenant.slug, order.id);
+      toast({
+        title: "Confirmation sent",
+        description: "The customer confirmation was sent again."
+      });
+    } catch (error) {
+      toast({
+        title: "Could not resend confirmation",
+        description: error instanceof Error ? error.message : "Try again in a moment.",
+        variant: "destructive"
+      });
+    } finally {
+      setSending(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "secondary",
+      icon: /* @__PURE__ */ jsx(Mail, { className: "size-[13px]" }),
+      onClick: resend,
+      loading: sending,
+      disabled: sending,
+      children: "Resend confirmation"
+    }
+  );
+}
+export {
+  ResendOrderConfirmationButton
+};
+//# sourceMappingURL=resend-order-confirmation-button.js.map

package/dist/connect/resend-order-confirmation-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/resend-order-confirmation-button.tsx"],"sourcesContent":["'use client';\n\nimport { Mail } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { ordersApi } from '@withpotter/lib/api/orders';\nimport type { Order } from '@withpotter/lib/api/types';\nimport { useState } from 'react';\n\nexport function ResendOrderConfirmationButton({ order }: { order: Order }) {\n  const { tenant } = useAuth();\n  const { toast } = useToast();\n  const [sending, setSending] = useState(false);\n\n  if (order.paymentStatus !== 'paid' && order.status !== 'completed') {\n    return null;\n  }\n\n  const resend = async () => {\n    if (!tenant?.slug) return;\n    setSending(true);\n    try {\n      await ordersApi.resendConfirmation(tenant.slug, order.id);\n      toast({\n        title: 'Confirmation sent',\n        description: 'The customer confirmation was sent again.',\n      });\n    } catch (error) {\n      toast({\n        title: 'Could not resend confirmation',\n        description:\n          error instanceof Error ? error.message : 'Try again in a moment.',\n        variant: 'destructive',\n      });\n    } finally {\n      setSending(false);\n    }\n  };\n\n  return (\n    <Button\n      variant=\"secondary\"\n      icon={<Mail className=\"size-[13px]\" />}\n      onClick={resend}\n      loading={sending}\n      disabled={sending}\n    >\n      Resend confirmation\n    </Button>\n  );\n}\n"],"mappings":";AA2CY;AAzCZ,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAE1B,SAAS,gBAAgB;AAElB,SAAS,8BAA8B,EAAE,MAAM,GAAqB;AACzE,QAAM,EAAE,OAAO,IAAI,QAAQ;AAC3B,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,MAAI,MAAM,kBAAkB,UAAU,MAAM,WAAW,aAAa;AAClE,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,YAAY;AACzB,QAAI,CAAC,QAAQ,KAAM;AACnB,eAAW,IAAI;AACf,QAAI;AACF,YAAM,UAAU,mBAAmB,OAAO,MAAM,MAAM,EAAE;AACxD,YAAM;AAAA,QACJ,OAAO;AAAA,QACP,aAAa;AAAA,MACf,CAAC;AAAA,IACH,SAAS,OAAO;AACd,YAAM;AAAA,QACJ,OAAO;AAAA,QACP,aACE,iBAAiB,QAAQ,MAAM,UAAU;AAAA,QAC3C,SAAS;AAAA,MACX,CAAC;AAAA,IACH,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAM,oBAAC,QAAK,WAAU,eAAc;AAAA,MACpC,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACX;AAAA;AAAA,EAED;AAEJ;","names":[]}

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

@@ -0,0 +1,22 @@
+import type { ConnectionRoute } from '@withpotter/lib/connect';
+/**
+ * Which path carries this connection's work, and whether it is well.
+ *
+ * Route health and version pinning were both enforced and neither was ever
+ * visible. So a merchant whose messages had slowed saw only their own work
+ * failing, with no way to learn that the route carrying it was degraded — and
+ * every such person opens a support ticket about their own account.
+ *
+ * The provider is NAMED here, which is the one place in this product where
+ * that is right. Everywhere else Box speaks in outcomes and keeps vendors
+ * behind the contract; but portability is a promise made TO the merchant, and
+ * a promise that the thing carrying your messages can be changed is empty if
+ * you were never told what it currently is.
+ *
+ * Quiet when healthy. A green panel repeating "working normally" on every
+ * connection is furniture, and it trains people to stop reading the one that
+ * eventually says something else.
+ */
+export declare function RouteHealthPanel({ route }: {
+    route?: ConnectionRoute;
+}): import("react").JSX.Element | null;

package/dist/connect/route-health.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { Card } from "@withpotter/ui-kit";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { ROUTE_HEALTH_MEANING } from "@withpotter/lib/connect";
+import { springs } from "@withpotter/lib/motion";
+function RouteHealthPanel({ route }) {
+  const reduce = useReducedMotion();
+  if (!route || route.health === "healthy") return null;
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: reduce ? false : { opacity: 0, y: -4 },
+      animate: { opacity: 1, y: 0 },
+      transition: springs.gentle,
+      children: /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: [
+              "The route carrying this is ",
+              route.health
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--text-secondary)]", children: ROUTE_HEALTH_MEANING[route.health] }),
+            /* @__PURE__ */ jsxs("p", { className: "mt-2 text-xs text-[var(--text-tertiary)]", children: [
+              route.provider,
+              " \xB7 ",
+              route.region,
+              " \xB7 version ",
+              route.version
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(StatusBadge, { scope: "connect", status: route.health })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 border-t border-[var(--border-subtle)] pt-3 text-xs text-[var(--text-tertiary)]", children: "Nothing is sent twice while a route is unwell. Work already accepted stays on the version that took it, and anything uncertain is checked with the provider before it is tried again." })
+      ] })
+    }
+  );
+}
+export {
+  RouteHealthPanel
+};
+//# sourceMappingURL=route-health.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/route-health.tsx"],"sourcesContent":["'use client';\n\nimport { motion, useReducedMotion } from 'motion/react';\nimport { Card } from '@withpotter/ui-kit';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport { ROUTE_HEALTH_MEANING } from '@withpotter/lib/connect';\nimport type { ConnectionRoute } from '@withpotter/lib/connect';\nimport { springs } from '@withpotter/lib/motion';\n\n/**\n * Which path carries this connection's work, and whether it is well.\n *\n * Route health and version pinning were both enforced and neither was ever\n * visible. So a merchant whose messages had slowed saw only their own work\n * failing, with no way to learn that the route carrying it was degraded — and\n * every such person opens a support ticket about their own account.\n *\n * The provider is NAMED here, which is the one place in this product where\n * that is right. Everywhere else Box speaks in outcomes and keeps vendors\n * behind the contract; but portability is a promise made TO the merchant, and\n * a promise that the thing carrying your messages can be changed is empty if\n * you were never told what it currently is.\n *\n * Quiet when healthy. A green panel repeating \"working normally\" on every\n * connection is furniture, and it trains people to stop reading the one that\n * eventually says something else.\n */\nexport function RouteHealthPanel({ route }: { route?: ConnectionRoute }) {\n  const reduce = useReducedMotion();\n\n  if (!route || route.health === 'healthy') return null;\n\n  return (\n    <motion.div\n      initial={reduce ? false : { opacity: 0, y: -4 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={springs.gentle}\n    >\n      <Card>\n        <div className=\"flex flex-wrap items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <p className=\"text-sm font-medium text-[var(--text-primary)]\">\n              The route carrying this is {route.health}\n            </p>\n            <p className=\"mt-1 text-sm text-[var(--text-secondary)]\">\n              {ROUTE_HEALTH_MEANING[route.health]}\n            </p>\n            <p className=\"mt-2 text-xs text-[var(--text-tertiary)]\">\n              {route.provider} · {route.region} · version {route.version}\n            </p>\n          </div>\n          <StatusBadge scope=\"connect\" status={route.health} />\n        </div>\n\n        {/* Said because it is the thing a person is actually worried about\n            when they read \"degraded\": whether they are about to be billed\n            twice for the same work. */}\n        <p className=\"mt-3 border-t border-[var(--border-subtle)] pt-3 text-xs text-[var(--text-tertiary)]\">\n          Nothing is sent twice while a route is unwell. Work already accepted\n          stays on the version that took it, and anything uncertain is checked\n          with the provider before it is tried again.\n        </p>\n      </Card>\n    </motion.div>\n  );\n}\n"],"mappings":";AAyCY,SAGA,KAHA;AAvCZ,SAAS,QAAQ,wBAAwB;AACzC,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AAErC,SAAS,eAAe;AAoBjB,SAAS,iBAAiB,EAAE,MAAM,GAAgC;AACvE,QAAM,SAAS,iBAAiB;AAEhC,MAAI,CAAC,SAAS,MAAM,WAAW,UAAW,QAAO;AAEjD,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,SAAS,SAAS,QAAQ,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,MAC9C,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,MAC5B,YAAY,QAAQ;AAAA,MAEpB,+BAAC,QACC;AAAA,6BAAC,SAAI,WAAU,oDACb;AAAA,+BAAC,SAAI,WAAU,WACb;AAAA,iCAAC,OAAE,WAAU,kDAAiD;AAAA;AAAA,cAChC,MAAM;AAAA,eACpC;AAAA,YACA,oBAAC,OAAE,WAAU,6CACV,+BAAqB,MAAM,MAAM,GACpC;AAAA,YACA,qBAAC,OAAE,WAAU,4CACV;AAAA,oBAAM;AAAA,cAAS;AAAA,cAAI,MAAM;AAAA,cAAO;AAAA,cAAY,MAAM;AAAA,eACrD;AAAA,aACF;AAAA,UACA,oBAAC,eAAY,OAAM,WAAU,QAAQ,MAAM,QAAQ;AAAA,WACrD;AAAA,QAKA,oBAAC,OAAE,WAAU,wFAAuF,mMAIpG;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

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

package/dist/connect/sync-panel.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import {
+  Button,
+  Card,
+  OptionButton,
+  useConfirm,
+  useToast
+} from "@withpotter/ui-kit";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { springs } from "@withpotter/lib/motion";
+import { DIRECTION_LABEL } from "@withpotter/lib/connect";
+function when(iso) {
+  if (!iso) return "Never run";
+  return new Date(iso).toLocaleString(void 0, {
+    day: "numeric",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function SyncFields({
+  fields,
+  onToggle
+}) {
+  const staying = fields.filter((field) => !field.included && field.leaves);
+  return /* @__PURE__ */ jsxs("div", { className: "mt-4 border-t border-[var(--border-subtle)] pt-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: fields.map((field) => /* @__PURE__ */ jsx(
+      OptionButton,
+      {
+        selected: field.included,
+        disabled: field.required,
+        onClick: () => onToggle(field, !field.included),
+        children: field.label
+      },
+      field.id
+    )) }),
+    /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs leading-relaxed text-[var(--text-tertiary)]", children: staying.length === 0 ? "Everything above crosses to the provider." : `${staying.map((field) => field.label.toLowerCase()).join(", ")} never leave Box.` })
+  ] });
+}
+function SyncPanel({ syncs }) {
+  const confirm = useConfirm();
+  const { toast } = useToast();
+  const reduce = useReducedMotion();
+  const [paused, setPaused] = useState({});
+  const [dropped, setDropped] = useState({});
+  if (syncs.length === 0) return null;
+  const fullReread = async (sync) => {
+    const ok = await confirm({
+      title: `Re-read everything in ${sync.label}?`,
+      // Name the cost. A full resync is the button people press when they are
+      // already frustrated, and the two things they need to know are that it
+      // is slow and that it will not duplicate anything.
+      description: "Box reads the whole history again from the start rather than continuing from where it stopped. It can take a while on a busy calendar. Nothing is duplicated: records Box already knows are matched, not created again.",
+      confirmLabel: "Re-read everything"
+    });
+    if (ok) toast({ title: `Re-reading ${sync.label}` });
+  };
+  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: syncs.map((sync) => {
+    const isPaused = paused[sync.id] ?? sync.status === "paused";
+    return /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: sync.label }),
+          /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-xs text-[var(--text-tertiary)]", children: [
+            DIRECTION_LABEL[sync.direction],
+            " \xB7 Last run",
+            " ",
+            when(sync.lastRunAt)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          StatusBadge,
+          {
+            scope: "connect",
+            status: isPaused ? "paused" : sync.status
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: sync.problem && !isPaused && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: reduce ? false : { opacity: 0, height: 0 },
+          animate: { opacity: 1, height: "auto" },
+          exit: reduce ? { opacity: 0 } : { opacity: 0, height: 0 },
+          transition: springs.gentle,
+          className: "overflow-hidden",
+          children: /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm leading-relaxed text-[var(--text-secondary)]", children: sync.problem })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-3 text-xs leading-relaxed text-[var(--text-tertiary)]", children: [
+        /* @__PURE__ */ jsxs("span", { className: "font-medium text-[var(--text-secondary)]", children: [
+          "When both sides changed:",
+          " "
+        ] }),
+        sync.conflictPolicy
+      ] }),
+      /* @__PURE__ */ jsx(
+        SyncFields,
+        {
+          fields: sync.fields.map((field) => ({
+            ...field,
+            included: dropped[field.id] ? false : field.included
+          })),
+          onToggle: (field, next) => {
+            setDropped((prev) => ({ ...prev, [field.id]: !next }));
+            toast({
+              title: next ? `${field.label} will cross to the provider` : `${field.label} stays in Box`
+            });
+          }
+        }
+      ),
+      sync.conflicts > 0 && /* @__PURE__ */ jsxs("p", { className: "mt-2 text-xs leading-relaxed text-[var(--text-tertiary)]", children: [
+        /* @__PURE__ */ jsxs("span", { className: "font-medium text-[var(--text-secondary)]", children: [
+          sync.conflicts,
+          " the rule could not settle:",
+          " "
+        ] }),
+        "the same record was changed on both sides in a way that has no obvious winner. They are held rather than guessed at."
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap gap-2", children: [
+        sync.status === "needs_repair" && !isPaused && /* @__PURE__ */ jsx(Button, { onClick: () => void fullReread(sync), children: "Repair" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => {
+              setPaused((prev) => ({ ...prev, [sync.id]: !isPaused }));
+              toast({
+                title: isPaused ? `${sync.label} is running again` : `${sync.label} is paused. Nothing will move until you resume it.`
+              });
+            },
+            children: isPaused ? "Resume" : "Pause"
+          }
+        ),
+        sync.status !== "needs_repair" && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => void fullReread(sync),
+            children: "Re-read everything"
+          }
+        )
+      ] })
+    ] }, sync.id);
+  }) });
+}
+export {
+  SyncPanel
+};
+//# sourceMappingURL=sync-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/sync-panel.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport {\n  Button,\n  Card,\n  OptionButton,\n  useConfirm,\n  useToast,\n} from '@withpotter/ui-kit';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport { springs } from '@withpotter/lib/motion';\nimport { DIRECTION_LABEL, type SyncField, type SyncState } from '@withpotter/lib/connect';\n\n/**\n * What is being kept in step, which way, and by what rule.\n *\n * Every sync UI in this category shows a spinner and a last-run time, which\n * answers \"is it on\" and nothing else. The two questions a merchant actually\n * has when something looks wrong are which system wins when both sides\n * changed, and what to do when it has lost its place. Both are on the panel:\n * the conflict policy is stated as a sentence, because a merchant who does not\n * know the rule cannot tell a bug from a rule and will assume the worst the\n * first time an edit disappears.\n *\n * Direction is words. An arrow between two logos looks like it says which way\n * records travel and does not say which one wins.\n */\nfunction when(iso?: string): string {\n  if (!iso) return 'Never run';\n  return new Date(iso).toLocaleString(undefined, {\n    day: 'numeric',\n    month: 'short',\n    hour: '2-digit',\n    minute: '2-digit',\n  });\n}\n\n/**\n * What crosses the boundary, as things you can point at.\n *\n * Seven fields as seven rows of label, hint and switch is the shape every\n * admin screen in the world already has, and it buries the only question a\n * merchant is asking: what leaves my business. As chips it is one glance —\n * lit is going, unlit is staying — and the sentence underneath names what\n * stays rather than leaving it to be counted.\n */\nfunction SyncFields({\n  fields,\n  onToggle,\n}: {\n  fields: readonly SyncField[];\n  onToggle: (field: SyncField, next: boolean) => void;\n}) {\n  const staying = fields.filter((field) => !field.included && field.leaves);\n\n  return (\n    <div className=\"mt-4 border-t border-[var(--border-subtle)] pt-3\">\n      <div className=\"flex flex-wrap gap-2\">\n        {fields.map((field) => (\n          <OptionButton\n            key={field.id}\n            selected={field.included}\n            // An invoice without a total is not an invoice, so removing it is\n            // not offered rather than offered and refused.\n            disabled={field.required}\n            onClick={() => onToggle(field, !field.included)}\n          >\n            {field.label}\n          </OptionButton>\n        ))}\n      </div>\n      <p className=\"mt-3 text-xs leading-relaxed text-[var(--text-tertiary)]\">\n        {staying.length === 0\n          ? 'Everything above crosses to the provider.'\n          : `${staying.map((field) => field.label.toLowerCase()).join(', ')} never leave Box.`}\n      </p>\n    </div>\n  );\n}\n\nexport function SyncPanel({ syncs }: { syncs: readonly SyncState[] }) {\n  const confirm = useConfirm();\n  const { toast } = useToast();\n  const reduce = useReducedMotion();\n  const [paused, setPaused] = useState<Record<string, boolean>>({});\n  const [dropped, setDropped] = useState<Record<string, boolean>>({});\n\n  if (syncs.length === 0) return null;\n\n  const fullReread = async (sync: SyncState) => {\n    const ok = await confirm({\n      title: `Re-read everything in ${sync.label}?`,\n      // Name the cost. A full resync is the button people press when they are\n      // already frustrated, and the two things they need to know are that it\n      // is slow and that it will not duplicate anything.\n      description:\n        'Box reads the whole history again from the start rather than continuing from where it stopped. It can take a while on a busy calendar. Nothing is duplicated: records Box already knows are matched, not created again.',\n      confirmLabel: 'Re-read everything',\n    });\n    if (ok) toast({ title: `Re-reading ${sync.label}` });\n  };\n\n  return (\n    <div className=\"space-y-3\">\n      {syncs.map((sync) => {\n        const isPaused = paused[sync.id] ?? sync.status === 'paused';\n\n        return (\n          <Card key={sync.id}>\n            <div className=\"flex flex-wrap items-start justify-between gap-3\">\n              <div className=\"min-w-0\">\n                <p className=\"text-sm font-medium text-[var(--text-primary)]\">\n                  {sync.label}\n                </p>\n                <p className=\"mt-0.5 text-xs text-[var(--text-tertiary)]\">\n                  {DIRECTION_LABEL[sync.direction]} · Last run{' '}\n                  {when(sync.lastRunAt)}\n                </p>\n              </div>\n              <StatusBadge\n                scope=\"connect\"\n                status={isPaused ? 'paused' : sync.status}\n              />\n            </div>\n\n            <AnimatePresence initial={false}>\n              {sync.problem && !isPaused && (\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                  <p className=\"mt-3 text-sm leading-relaxed text-[var(--text-secondary)]\">\n                    {sync.problem}\n                  </p>\n                </motion.div>\n              )}\n            </AnimatePresence>\n\n            {/* The rule, always visible rather than discoverable by being\n                surprised. */}\n            <p className=\"mt-3 text-xs leading-relaxed text-[var(--text-tertiary)]\">\n              <span className=\"font-medium text-[var(--text-secondary)]\">\n                When both sides changed:{' '}\n              </span>\n              {sync.conflictPolicy}\n            </p>\n\n            <SyncFields\n              fields={sync.fields.map((field) => ({\n                ...field,\n                included: dropped[field.id] ? false : field.included,\n              }))}\n              onToggle={(field, next) => {\n                setDropped((prev) => ({ ...prev, [field.id]: !next }));\n                toast({\n                  title: next\n                    ? `${field.label} will cross to the provider`\n                    : `${field.label} stays in Box`,\n                });\n              }}\n            />\n\n            {sync.conflicts > 0 && (\n              <p className=\"mt-2 text-xs leading-relaxed text-[var(--text-tertiary)]\">\n                <span className=\"font-medium text-[var(--text-secondary)]\">\n                  {sync.conflicts} the rule could not settle:{' '}\n                </span>\n                the same record was changed on both sides in a way that has no\n                obvious winner. They are held rather than guessed at.\n              </p>\n            )}\n\n            <div className=\"mt-4 flex flex-wrap gap-2\">\n              {sync.status === 'needs_repair' && !isPaused && (\n                <Button onClick={() => void fullReread(sync)}>Repair</Button>\n              )}\n              <Button\n                variant=\"secondary\"\n                onClick={() => {\n                  setPaused((prev) => ({ ...prev, [sync.id]: !isPaused }));\n                  toast({\n                    title: isPaused\n                      ? `${sync.label} is running again`\n                      : `${sync.label} is paused. Nothing will move until you resume it.`,\n                  });\n                }}\n              >\n                {isPaused ? 'Resume' : 'Pause'}\n              </Button>\n              {sync.status !== 'needs_repair' && (\n                <Button\n                  variant=\"secondary\"\n                  onClick={() => void fullReread(sync)}\n                >\n                  Re-read everything\n                </Button>\n              )}\n            </div>\n          </Card>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,10 @@
+/**
+ * What the connections cost, on the bill rather than on a screen of their own.
+ *
+ * Usage is a billing question, and a merchant checking what they are paying
+ * for should not have to know which Box service produced the line. It draws
+ * nothing at all when there is no usage: an empty card headed "Connections"
+ * on the bill of a business that has none is furniture explaining a product
+ * they have not bought.
+ */
+export declare function ConnectUsagePanel(): import("react").JSX.Element | null;

package/dist/connect/usage-panel.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AllowanceMeter, Card } from "@withpotter/ui-kit";
+import { useUsage } from "@withpotter/lib/connect";
+function ConnectUsagePanel() {
+  const usage = useUsage();
+  if (usage.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-medium text-[var(--text-primary)]", children: "Connections" }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: usage.map((meter) => /* @__PURE__ */ jsx(
+      AllowanceMeter,
+      {
+        label: meter.label,
+        used: meter.used,
+        limit: meter.included,
+        overageNote: "Further work in this period is charged per use."
+      },
+      meter.id
+    )) }) })
+  ] });
+}
+export {
+  ConnectUsagePanel
+};
+//# sourceMappingURL=usage-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/usage-panel.tsx"],"sourcesContent":["'use client';\n\nimport { AllowanceMeter, Card } from '@withpotter/ui-kit';\nimport { useUsage } from '@withpotter/lib/connect';\n\n/**\n * What the connections cost, on the bill rather than on a screen of their own.\n *\n * Usage is a billing question, and a merchant checking what they are paying\n * for should not have to know which Box service produced the line. It draws\n * nothing at all when there is no usage: an empty card headed \"Connections\"\n * on the bill of a business that has none is furniture explaining a product\n * they have not bought.\n */\nexport function ConnectUsagePanel() {\n  const usage = useUsage();\n\n  if (usage.length === 0) return null;\n\n  return (\n    <div>\n      <p className=\"mb-2 text-sm font-medium text-[var(--text-primary)]\">\n        Connections\n      </p>\n      <Card>\n        <div className=\"space-y-4\">\n          {usage.map((meter) => (\n            <AllowanceMeter\n              key={meter.id}\n              label={meter.label}\n              used={meter.used}\n              limit={meter.included}\n              overageNote=\"Further work in this period is charged per use.\"\n            />\n          ))}\n        </div>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";AAoBI,SACE,KADF;AAlBJ,SAAS,gBAAgB,YAAY;AACrC,SAAS,gBAAgB;AAWlB,SAAS,oBAAoB;AAClC,QAAM,QAAQ,SAAS;AAEvB,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,SACE,qBAAC,SACC;AAAA,wBAAC,OAAE,WAAU,uDAAsD,yBAEnE;AAAA,IACA,oBAAC,QACC,8BAAC,SAAI,WAAU,aACZ,gBAAM,IAAI,CAAC,UACV;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO,MAAM;AAAA,QACb,MAAM,MAAM;AAAA,QACZ,OAAO,MAAM;AAAA,QACb,aAAY;AAAA;AAAA,MAJP,MAAM;AAAA,IAKb,CACD,GACH,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/contact-customer.d.ts

@@ -0,0 +1,31 @@
+interface ContactCustomerProps {
+    name?: string;
+    phone?: string;
+    email?: string;
+    /**
+     * Pre-written first line. A merchant confirming an order wants to say so, and
+     * the whole reason this flow got abandoned was having to retype the order
+     * number into another app.
+     */
+    message?: string;
+}
+/**
+ * Reach the customer from the record you are looking at.
+ *
+ * The gap this closes: a merchant confirming a booking almost always wants to
+ * tell the customer, and there was no way to do it from the record — so the
+ * flow left for WhatsApp, the merchant retyped the order number from memory,
+ * and never came back to mark anything.
+ *
+ * WhatsApp first, deliberately. It is where these conversations already happen,
+ * and a `wa.me` link opens the real app with the message already written, which
+ * is the part that was actually costing time. Call is second because the fallback
+ * when a message goes unanswered is to ring. Email last: it exists, it is rarely
+ * the fastest thing, and it should not lead.
+ *
+ * Every affordance is absent rather than disabled when its detail is missing —
+ * a customer with no phone number shows no WhatsApp button, instead of a dead
+ * one that raises a question the merchant cannot answer.
+ */
+export declare function ContactCustomer({ name, phone, email, message, }: ContactCustomerProps): import("react").JSX.Element | null;
+export {};

package/dist/contact-customer.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Phone, Mail, Check } from "lucide-react";
+import { WhatsAppIcon } from "@withpotter/ui-kit/whatsapp-icon";
+import { BOX_HIDE_WHATSAPP } from "@withpotter/lib/box-channels";
+import { Button } from "@withpotter/ui-kit";
+function waNumber(phone) {
+  return phone.replace(/[^\d]/g, "");
+}
+function ContactCustomer({
+  name,
+  phone,
+  email,
+  message
+}) {
+  const [copied, setCopied] = useState(false);
+  if (!phone && !email) return null;
+  const text = message ?? "";
+  const waHref = phone && !BOX_HIDE_WHATSAPP ? `https://wa.me/${waNumber(phone)}${text ? `?text=${encodeURIComponent(text)}` : ""}` : null;
+  const mailHref = email ? `mailto:${email}${text ? `?body=${encodeURIComponent(text)}` : ""}` : null;
+  const copyMessage = async () => {
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+    waHref && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        onClick: () => window.open(waHref, "_blank", "noopener"),
+        icon: /* @__PURE__ */ jsx(WhatsAppIcon, {}),
+        children: "WhatsApp"
+      }
+    ),
+    phone && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        onClick: () => {
+          window.location.href = `tel:${phone}`;
+        },
+        icon: /* @__PURE__ */ jsx(Phone, {}),
+        "aria-label": name ? `Call ${name}` : "Call",
+        children: "Call"
+      }
+    ),
+    mailHref && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        onClick: () => {
+          window.location.href = mailHref;
+        },
+        icon: /* @__PURE__ */ jsx(Mail, {}),
+        children: "Email"
+      }
+    ),
+    text && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        onClick: copyMessage,
+        icon: copied ? /* @__PURE__ */ jsx(Check, {}) : void 0,
+        children: copied ? "Copied" : "Copy message"
+      }
+    )
+  ] });
+}
+export {
+  ContactCustomer
+};
+//# sourceMappingURL=contact-customer.js.map

package/dist/contact-customer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contact-customer.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Phone, Mail, Check } from 'lucide-react';\n// WhatsApp's own mark, not lucide's generic bubble. See whatsapp-icon.tsx.\nimport { WhatsAppIcon } from '@withpotter/ui-kit/whatsapp-icon';\nimport { BOX_HIDE_WHATSAPP } from '@withpotter/lib/box-channels';\nimport { Button } from '@withpotter/ui-kit';\n\ninterface ContactCustomerProps {\n  name?: string;\n  phone?: string;\n  email?: string;\n  /**\n   * Pre-written first line. A merchant confirming an order wants to say so, and\n   * the whole reason this flow got abandoned was having to retype the order\n   * number into another app.\n   */\n  message?: string;\n}\n\n/** E.164-ish. wa.me rejects spaces, brackets and a leading +. */\nfunction waNumber(phone: string): string {\n  return phone.replace(/[^\\d]/g, '');\n}\n\n/**\n * Reach the customer from the record you are looking at.\n *\n * The gap this closes: a merchant confirming a booking almost always wants to\n * tell the customer, and there was no way to do it from the record — so the\n * flow left for WhatsApp, the merchant retyped the order number from memory,\n * and never came back to mark anything.\n *\n * WhatsApp first, deliberately. It is where these conversations already happen,\n * and a `wa.me` link opens the real app with the message already written, which\n * is the part that was actually costing time. Call is second because the fallback\n * when a message goes unanswered is to ring. Email last: it exists, it is rarely\n * the fastest thing, and it should not lead.\n *\n * Every affordance is absent rather than disabled when its detail is missing —\n * a customer with no phone number shows no WhatsApp button, instead of a dead\n * one that raises a question the merchant cannot answer.\n */\nexport function ContactCustomer({\n  name,\n  phone,\n  email,\n  message,\n}: ContactCustomerProps) {\n  const [copied, setCopied] = useState(false);\n\n  if (!phone && !email) return null;\n\n  const text = message ?? '';\n  // A box without WhatsApp offers Call and Email only.\n  const waHref =\n    phone && !BOX_HIDE_WHATSAPP\n      ? `https://wa.me/${waNumber(phone)}${text ? `?text=${encodeURIComponent(text)}` : ''}`\n      : null;\n\n  const mailHref = email\n    ? `mailto:${email}${text ? `?body=${encodeURIComponent(text)}` : ''}`\n    : null;\n\n  const copyMessage = async () => {\n    if (!text) return;\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      window.setTimeout(() => setCopied(false), 2000);\n    } catch {\n      /* clipboard blocked — the deep links still carry the text */\n    }\n  };\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      {waHref && (\n        <Button\n          variant=\"secondary\"\n          onClick={() => window.open(waHref, '_blank', 'noopener')}\n          icon={<WhatsAppIcon />}\n        >\n          WhatsApp\n        </Button>\n      )}\n      {phone && (\n        <Button\n          variant=\"secondary\"\n          onClick={() => {\n            window.location.href = `tel:${phone}`;\n          }}\n          icon={<Phone />}\n          aria-label={name ? `Call ${name}` : 'Call'}\n        >\n          Call\n        </Button>\n      )}\n      {mailHref && (\n        <Button\n          variant=\"secondary\"\n          onClick={() => {\n            window.location.href = mailHref;\n          }}\n          icon={<Mail />}\n        >\n          Email\n        </Button>\n      )}\n      {text && (\n        <Button\n          variant=\"ghost\"\n          onClick={copyMessage}\n          icon={copied ? <Check /> : undefined}\n        >\n          {copied ? 'Copied' : 'Copy message'}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA6EI,SAKY,KALZ;AA3EJ,SAAS,gBAAgB;AACzB,SAAS,OAAO,MAAM,aAAa;AAEnC,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,cAAc;AAevB,SAAS,SAAS,OAAuB;AACvC,SAAO,MAAM,QAAQ,UAAU,EAAE;AACnC;AAoBO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,MAAI,CAAC,SAAS,CAAC,MAAO,QAAO;AAE7B,QAAM,OAAO,WAAW;AAExB,QAAM,SACJ,SAAS,CAAC,oBACN,iBAAiB,SAAS,KAAK,CAAC,GAAG,OAAO,SAAS,mBAAmB,IAAI,CAAC,KAAK,EAAE,KAClF;AAEN,QAAM,WAAW,QACb,UAAU,KAAK,GAAG,OAAO,SAAS,mBAAmB,IAAI,CAAC,KAAK,EAAE,KACjE;AAEJ,QAAM,cAAc,YAAY;AAC9B,QAAI,CAAC,KAAM;AACX,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,IAAI;AACxC,gBAAU,IAAI;AACd,aAAO,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,IAChD,QAAQ;AAAA,IAER;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,WAAU,qCACZ;AAAA,cACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM,OAAO,KAAK,QAAQ,UAAU,UAAU;AAAA,QACvD,MAAM,oBAAC,gBAAa;AAAA,QACrB;AAAA;AAAA,IAED;AAAA,IAED,SACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM;AACb,iBAAO,SAAS,OAAO,OAAO,KAAK;AAAA,QACrC;AAAA,QACA,MAAM,oBAAC,SAAM;AAAA,QACb,cAAY,OAAO,QAAQ,IAAI,KAAK;AAAA,QACrC;AAAA;AAAA,IAED;AAAA,IAED,YACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM;AACb,iBAAO,SAAS,OAAO;AAAA,QACzB;AAAA,QACA,MAAM,oBAAC,QAAK;AAAA,QACb;AAAA;AAAA,IAED;AAAA,IAED,QACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,MAAM,SAAS,oBAAC,SAAM,IAAK;AAAA,QAE1B,mBAAS,WAAW;AAAA;AAAA,IACvB;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/content-type-page/configured-content-list.d.ts

@@ -0,0 +1,25 @@
+import type { LucideIcon } from 'lucide-react';
+import type { ContentItem } from '@withpotter/lib/api/types';
+import type { ContentTypeConfig } from '@withpotter/lib/template-context';
+import type { ListFilterConfig, ListViewConfig } from '@withpotter/lib/template-types';
+import type { DataItem } from '@withpotter/ui-kit/data-table';
+import type { BookingAction } from '@withpotter/components/behaviors';
+interface ConfiguredContentListProps {
+    contentType: ContentTypeConfig;
+    ContentTypeIcon: LucideIcon;
+    listView: ListViewConfig;
+    items: ContentItem[];
+    dataItems: DataItem[];
+    loading: boolean;
+    error: string | null;
+    enrichedFilters?: ListFilterConfig[];
+    fetchContent: () => void | Promise<void>;
+    openEditor: (item?: ContentItem) => void;
+    handleDelete: (id: string) => void | Promise<void>;
+    formatCurrency: (value: number) => string;
+    isBookings: boolean;
+    bookingActionsLoading: boolean;
+    handleBookingAction: (action: BookingAction, item: ContentItem) => void | Promise<void>;
+}
+export declare function ConfiguredContentList({ contentType, ContentTypeIcon, listView, items, dataItems, loading, error, enrichedFilters, fetchContent, openEditor, handleDelete, formatCurrency, isBookings, bookingActionsLoading, handleBookingAction, }: ConfiguredContentListProps): import("react").JSX.Element;
+export {};

package/dist/content-type-page/configured-content-list.js

@@ -0,0 +1,114 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, Plus, RefreshCw } from "lucide-react";
+import { BookingActionMenu } from "@withpotter/components/behaviors";
+import { DataTable } from "@withpotter/ui-kit/data-table";
+import { MobilePageHeader } from "@withpotter/components/mobile/mobile-page-header";
+import { Button } from "@withpotter/ui-kit/button";
+function ConfiguredContentList({
+  contentType,
+  ContentTypeIcon,
+  listView,
+  items,
+  dataItems,
+  loading,
+  error,
+  enrichedFilters,
+  fetchContent,
+  openEditor,
+  handleDelete,
+  formatCurrency,
+  isBookings,
+  bookingActionsLoading,
+  handleBookingAction
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      MobilePageHeader,
+      {
+        title: contentType.name,
+        action: {
+          label: listView.createLabel || `Add ${contentType.singularName.toLowerCase()}`,
+          onClick: () => openEditor()
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex items-center justify-between mb-8", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-[var(--text-primary)]", children: contentType.name }),
+        contentType.description && /* @__PURE__ */ jsx("p", { className: "text-[var(--text-tertiary)] mt-1", children: contentType.description })
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { onClick: () => openEditor(), children: [
+        /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+        listView.createLabel || `Add ${contentType.singularName.toLowerCase()}`
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsxs("div", { className: "bg-[var(--error-bg)] border border-[var(--error)]/20 rounded-md p-4 flex items-center gap-3 mb-6", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "size-5 text-[var(--error)] flex-shrink-0" }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("p", { className: "text-[var(--error)]", children: error }) }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          className: "text-[var(--error)]",
+          onClick: fetchContent,
+          children: [
+            /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" }),
+            "Retry"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        items: dataItems,
+        loading,
+        columns: listView.columns,
+        stats: listView.stats,
+        filters: enrichedFilters,
+        title: "",
+        description: "",
+        singularName: contentType.singularName,
+        pluralName: contentType.name,
+        createLabel: listView.createLabel || `Add ${contentType.singularName.toLowerCase()}`,
+        emptyTitle: listView.emptyTitle || `No ${contentType.name.toLowerCase()} yet`,
+        emptyDescription: listView.emptyDescription || `Create your first ${contentType.singularName.toLowerCase()} to get started.`,
+        icon: ContentTypeIcon,
+        statusConfig: listView.statusConfig,
+        formatCurrency,
+        onView: (item) => {
+          const original = items.find((candidate) => candidate.id === item.id);
+          if (original) openEditor(original);
+        },
+        onEdit: (item) => {
+          const original = items.find((candidate) => candidate.id === item.id);
+          if (original) openEditor(original);
+        },
+        onDelete: (item) => handleDelete(item.id),
+        onCreate: () => openEditor(),
+        renderCustomActions: isBookings ? (dataItem, closeMenu) => {
+          const contentItem = items.find(
+            (item) => item.id === dataItem.id
+          );
+          if (!contentItem) return null;
+          return /* @__PURE__ */ jsx(
+            BookingActionMenu,
+            {
+              item: contentItem,
+              onAction: (action, item) => {
+                handleBookingAction(action, item);
+                closeMenu();
+              },
+              loading: bookingActionsLoading
+            }
+          );
+        } : void 0
+      }
+    )
+  ] });
+}
+export {
+  ConfiguredContentList
+};
+//# sourceMappingURL=configured-content-list.js.map