@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/newsletters/composer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/composer.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Banner, Button, Card, TabNav, useToast } from '@withpotter/ui-kit';\nimport type { Newsletter } from '@withpotter/lib/admin-newsletters-api';\nimport { EditorFields } from './editor-fields';\nimport { titleOf } from './labels';\nimport { PreviewPane } from './preview-pane';\nimport { RecordHeader } from './record-header';\nimport { ReviewDialog } from './review-dialog';\nimport { SaveIndicator } from './save-indicator';\nimport { useAutosave } from './use-autosave';\nimport { useNewsletterAccess } from './use-newsletters';\nimport { useSendActions } from './use-send-actions';\n\nconst PANES = [\n  { id: 'edit', label: 'Edit' },\n  { id: 'preview', label: 'Preview' },\n];\n\n/**\n * A draft being written: fields on the left, the email as it will arrive on\n * the right. Below `lg` the two become tabs.\n */\nexport function Composer({ newsletter }: { newsletter: Newsletter }) {\n  const { canManage, email } = useNewsletterAccess();\n  const autosave = useAutosave(newsletter, canManage);\n  const send = useSendActions(newsletter.id, email);\n  const { toast } = useToast();\n  const [pane, setPane] = useState('edit');\n  const [reviewing, setReviewing] = useState(false);\n  const { draft, status } = autosave;\n  const locked = status === 'locked';\n  /** Save what is due first, so a test or a send carries the latest words. */\n  const saved = async () => {\n    const ok = await autosave.flush();\n\n    if (!ok) {\n      toast({\n        title: 'Draft not saved',\n        description: 'Save the draft before sending it.',\n        variant: 'destructive',\n      });\n    }\n\n    return ok;\n  };\n\n  return (\n    <div>\n      <RecordHeader title={titleOf(draft)}>\n        {canManage && !locked && (\n          <>\n            <SaveIndicator status={status} onRetry={autosave.retry} />\n            <Button\n              variant=\"secondary\"\n              loading={send.testing}\n              onClick={async () => {\n                if (await saved()) await send.sendTest();\n              }}\n            >\n              Send test\n            </Button>\n            <Button\n              onClick={async () => {\n                if (await saved()) setReviewing(true);\n              }}\n            >\n              Review and send\n            </Button>\n          </>\n        )}\n      </RecordHeader>\n      <div className=\"flex flex-col gap-4\">\n        {locked && (\n          <Banner\n            tone=\"info\"\n            title=\"This newsletter was sent\"\n            action={\n              <Button size=\"sm\" variant=\"secondary\" onClick={autosave.reload}>\n                View\n              </Button>\n            }\n          >\n            It can no longer be edited.\n          </Banner>\n        )}\n        {status === 'conflict' && (\n          <Banner\n            tone=\"warning\"\n            title=\"This draft changed elsewhere\"\n            action={\n              <span className=\"flex gap-2\">\n                <Button size=\"sm\" variant=\"secondary\" onClick={autosave.reload}>\n                  Reload\n                </Button>\n                <Button\n                  size=\"sm\"\n                  variant=\"secondary\"\n                  onClick={autosave.keepMine}\n                >\n                  Keep mine\n                </Button>\n              </span>\n            }\n          >\n            Reload to take the other copy, or keep yours and replace it.\n          </Banner>\n        )}\n        {!canManage && (\n          <Banner tone=\"neutral\">\n            You can read this draft. Changing it needs the newsletters.manage\n            permission.\n          </Banner>\n        )}\n        <div className=\"lg:hidden\">\n          <TabNav tabs={PANES} activeTab={pane} onTabChange={setPane} />\n        </div>\n        <div className=\"grid items-start gap-4 lg:grid-cols-2\">\n          <div className={pane === 'edit' ? undefined : 'hidden lg:block'}>\n            <Card>\n              <EditorFields\n                draft={draft}\n                carried={newsletter.signature ?? null}\n                disabled={!canManage || locked}\n                onChange={autosave.change}\n              />\n            </Card>\n          </div>\n          <div className={pane === 'preview' ? undefined : 'hidden lg:block'}>\n            <PreviewPane id={newsletter.id} version={autosave.savedCount} />\n          </div>\n        </div>\n      </div>\n      <ReviewDialog\n        open={reviewing}\n        draft={draft}\n        carried={newsletter.signature ?? null}\n        send={send}\n        onClose={() => setReviewing(false)}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/newsletters/content.js

@@ -0,0 +1,59 @@
+const MAX_DIGEST_ITEMS = 5;
+const emptyItem = () => ({
+  heading: "",
+  text: "",
+  linkLabel: "",
+  linkUrl: ""
+});
+const text = (value) => typeof value === "string" ? value : "";
+const plainOf = (c) => ({
+  heading: text(c.heading),
+  body: text(c.body)
+});
+const announcementOf = (c) => ({
+  imageUrl: text(c.imageUrl),
+  heading: text(c.heading),
+  body: text(c.body),
+  buttonLabel: text(c.buttonLabel),
+  buttonUrl: text(c.buttonUrl)
+});
+const digestOf = (c) => ({
+  intro: text(c.intro),
+  items: (Array.isArray(c.items) ? c.items : []).slice(0, MAX_DIGEST_ITEMS).map((item) => ({
+    heading: text(item?.heading),
+    text: text(item?.text),
+    linkLabel: text(item?.linkLabel),
+    linkUrl: text(item?.linkUrl)
+  }))
+});
+function contentFor(layout, content) {
+  if (layout === "plain") return plainOf(content);
+  if (layout === "announcement") return announcementOf(content);
+  return digestOf(content);
+}
+function changeLayout(from, to, content) {
+  if (from === to) return contentFor(to, content);
+  if (to === "digest") {
+    return { intro: text(content.body), items: [] };
+  }
+  const carried = from === "digest" ? { heading: "", body: text(content.intro) } : { heading: text(content.heading), body: text(content.body) };
+  return contentFor(to, carried);
+}
+const toDraft = (n) => ({
+  subject: n.subject ?? "",
+  previewText: n.previewText ?? "",
+  layout: n.layout,
+  content: contentFor(n.layout, n.content ?? {}),
+  signatureId: n.signature?.id ?? null
+});
+export {
+  MAX_DIGEST_ITEMS,
+  announcementOf,
+  changeLayout,
+  contentFor,
+  digestOf,
+  emptyItem,
+  plainOf,
+  toDraft
+};
+//# sourceMappingURL=content.js.map

package/dist/admin/newsletters/content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/content.ts"],"sourcesContent":["import type {\n  AnnouncementContent,\n  DigestContent,\n  DigestItem,\n  Newsletter,\n  NewsletterContent,\n  NewsletterDraft,\n  NewsletterLayout,\n  PlainContent,\n} from '@withpotter/lib/admin-newsletters-api';\n\nexport const MAX_DIGEST_ITEMS = 5;\n\nexport const emptyItem = (): DigestItem => ({\n  heading: '',\n  text: '',\n  linkLabel: '',\n  linkUrl: '',\n});\n\nconst text = (value: unknown) => (typeof value === 'string' ? value : '');\n\nexport const plainOf = (c: NewsletterContent): PlainContent => ({\n  heading: text(c.heading),\n  body: text(c.body),\n});\n\nexport const announcementOf = (c: NewsletterContent): AnnouncementContent => ({\n  imageUrl: text(c.imageUrl),\n  heading: text(c.heading),\n  body: text(c.body),\n  buttonLabel: text(c.buttonLabel),\n  buttonUrl: text(c.buttonUrl),\n});\n\nexport const digestOf = (c: NewsletterContent): DigestContent => ({\n  intro: text(c.intro),\n  items: (Array.isArray(c.items) ? c.items : [])\n    .slice(0, MAX_DIGEST_ITEMS)\n    .map((item) => ({\n      heading: text(item?.heading),\n      text: text(item?.text),\n      linkLabel: text(item?.linkLabel),\n      linkUrl: text(item?.linkUrl),\n    })),\n});\n\n/** Exactly the fields the layout has, each one present. */\nexport function contentFor(\n  layout: NewsletterLayout,\n  content: NewsletterContent,\n): NewsletterContent {\n  if (layout === 'plain') return plainOf(content);\n\n  if (layout === 'announcement') return announcementOf(content);\n\n  return digestOf(content);\n}\n\n/**\n * The content after a layout change. Text that has a place in the new layout\n * moves there: heading and body carry between Plain message and Announcement,\n * and a body becomes a digest's intro (and back). Fields with no counterpart\n * are dropped, so the saved content always matches its layout.\n */\nexport function changeLayout(\n  from: NewsletterLayout,\n  to: NewsletterLayout,\n  content: NewsletterContent,\n): NewsletterContent {\n  if (from === to) return contentFor(to, content);\n\n  if (to === 'digest') {\n    return { intro: text(content.body), items: [] };\n  }\n\n  const carried =\n    from === 'digest'\n      ? { heading: '', body: text(content.intro) }\n      : { heading: text(content.heading), body: text(content.body) };\n\n  return contentFor(to, carried);\n}\n\n/** The draft as the editor holds it: the text, and which signature it has. */\nexport type EditorDraft = NewsletterDraft & { signatureId: string | null };\n\n/** The editable part of a newsletter, with its content filled in. */\nexport const toDraft = (n: Newsletter): EditorDraft => ({\n  subject: n.subject ?? '',\n  previewText: n.previewText ?? '',\n  layout: n.layout,\n  content: contentFor(n.layout, n.content ?? {}),\n  signatureId: n.signature?.id ?? null,\n});\n"],"mappings":"AAWO,MAAM,mBAAmB;AAEzB,MAAM,YAAY,OAAmB;AAAA,EAC1C,SAAS;AAAA,EACT,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AACX;AAEA,MAAM,OAAO,CAAC,UAAoB,OAAO,UAAU,WAAW,QAAQ;AAE/D,MAAM,UAAU,CAAC,OAAwC;AAAA,EAC9D,SAAS,KAAK,EAAE,OAAO;AAAA,EACvB,MAAM,KAAK,EAAE,IAAI;AACnB;AAEO,MAAM,iBAAiB,CAAC,OAA+C;AAAA,EAC5E,UAAU,KAAK,EAAE,QAAQ;AAAA,EACzB,SAAS,KAAK,EAAE,OAAO;AAAA,EACvB,MAAM,KAAK,EAAE,IAAI;AAAA,EACjB,aAAa,KAAK,EAAE,WAAW;AAAA,EAC/B,WAAW,KAAK,EAAE,SAAS;AAC7B;AAEO,MAAM,WAAW,CAAC,OAAyC;AAAA,EAChE,OAAO,KAAK,EAAE,KAAK;AAAA,EACnB,QAAQ,MAAM,QAAQ,EAAE,KAAK,IAAI,EAAE,QAAQ,CAAC,GACzC,MAAM,GAAG,gBAAgB,EACzB,IAAI,CAAC,UAAU;AAAA,IACd,SAAS,KAAK,MAAM,OAAO;AAAA,IAC3B,MAAM,KAAK,MAAM,IAAI;AAAA,IACrB,WAAW,KAAK,MAAM,SAAS;AAAA,IAC/B,SAAS,KAAK,MAAM,OAAO;AAAA,EAC7B,EAAE;AACN;AAGO,SAAS,WACd,QACA,SACmB;AACnB,MAAI,WAAW,QAAS,QAAO,QAAQ,OAAO;AAE9C,MAAI,WAAW,eAAgB,QAAO,eAAe,OAAO;AAE5D,SAAO,SAAS,OAAO;AACzB;AAQO,SAAS,aACd,MACA,IACA,SACmB;AACnB,MAAI,SAAS,GAAI,QAAO,WAAW,IAAI,OAAO;AAE9C,MAAI,OAAO,UAAU;AACnB,WAAO,EAAE,OAAO,KAAK,QAAQ,IAAI,GAAG,OAAO,CAAC,EAAE;AAAA,EAChD;AAEA,QAAM,UACJ,SAAS,WACL,EAAE,SAAS,IAAI,MAAM,KAAK,QAAQ,KAAK,EAAE,IACzC,EAAE,SAAS,KAAK,QAAQ,OAAO,GAAG,MAAM,KAAK,QAAQ,IAAI,EAAE;AAEjE,SAAO,WAAW,IAAI,OAAO;AAC/B;AAMO,MAAM,UAAU,CAAC,OAAgC;AAAA,EACtD,SAAS,EAAE,WAAW;AAAA,EACtB,aAAa,EAAE,eAAe;AAAA,EAC9B,QAAQ,EAAE;AAAA,EACV,SAAS,WAAW,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;AAAA,EAC7C,aAAa,EAAE,WAAW,MAAM;AAClC;","names":[]}

package/dist/admin/newsletters/deliveries.js

@@ -0,0 +1,111 @@
+const DELIVERY_FILTERS = [
+  { value: "sent", label: "Sent" },
+  { value: "delivered", label: "Delivered" },
+  { value: "opened", label: "Opened" },
+  { value: "bounced", label: "Bounced" },
+  { value: "complained", label: "Marked as spam" },
+  { value: "failed", label: "Failed" },
+  { value: "skipped", label: "Skipped" },
+  { value: "queued", label: "Queued" }
+];
+const DELIVERY_STATUS = {
+  queued: { key: "pending", label: "Queued", quiet: true },
+  sent: { key: "sent", label: "Sent", quiet: true },
+  failed: { key: "failed", label: "Failed", quiet: false },
+  skipped: { key: "cancelled", label: "Skipped", quiet: true }
+};
+const PROVIDER_BADGE = {
+  delivered: { key: "delivered", label: "Delivered", quiet: false },
+  opened: { key: "delivered", label: "Opened", quiet: false },
+  delayed: { key: "pending", label: "Delayed", quiet: true },
+  complained: { key: "failed", label: "Marked as spam", quiet: false }
+};
+function deliveryBadge(d) {
+  if (d.status === "failed" && d.providerStatus === "bounced") {
+    return { key: "failed", label: "Bounced", quiet: false };
+  }
+  if (d.status === "sent" && d.providerStatus) {
+    return PROVIDER_BADGE[d.providerStatus] ?? DELIVERY_STATUS.sent;
+  }
+  return DELIVERY_STATUS[d.status];
+}
+const CONFIRM_WINDOW_MS = 48 * 60 * 60 * 1e3;
+const unconfirmed = (d) => d.status === "sent" && d.providerStatus == null;
+function awaitingConfirmation(sentAt, items, now = Date.now()) {
+  if (!sentAt || !items) return false;
+  const age = now - new Date(sentAt).getTime();
+  return age >= 0 && age <= CONFIRM_WINDOW_MS && items.some(unconfirmed);
+}
+const statusOptions = (outcomes) => [
+  { value: "", label: "All" },
+  ...DELIVERY_FILTERS.map(({ value, label }) => ({
+    value,
+    label,
+    count: outcomes?.[value]
+  }))
+];
+const statusFromParam = (value) => DELIVERY_FILTERS.find((filter) => filter.value === value)?.value;
+const SKIPPED = {
+  unsubscribed: "Unsubscribed",
+  bounced: "Address bounced before",
+  unverified: "Email not verified",
+  inactive: "Account not active"
+};
+function reasonOf(d) {
+  const reason = d.reason?.trim();
+  if (d.status === "failed") return reason || "No reason given";
+  if (d.status !== "skipped") return null;
+  if (!reason) return "Left off";
+  return SKIPPED[reason] ?? reason;
+}
+const timeOf = (d) => d.sentAt ?? d.updatedAt;
+function deliveriesQuery(filter, paging) {
+  const qs = new URLSearchParams();
+  const search = filter.search?.trim();
+  if (filter.status) qs.set("status", filter.status);
+  if (search) qs.set("search", search);
+  if (paging) {
+    qs.set("page", String(paging.page));
+    qs.set("limit", String(paging.limit));
+  }
+  const text = qs.toString();
+  return text ? `?${text}` : "";
+}
+const recipientsHref = (id, status) => `/admin/newsletters/${id}?tab=recipients${status ? `&status=${status}` : ""}`;
+const countLinks = (newsletter) => {
+  const outcomes = newsletter.outcomes;
+  return [
+    {
+      label: "Sent",
+      value: outcomes?.sent ?? newsletter.counts.sent,
+      status: "sent"
+    },
+    {
+      label: "Delivered",
+      value: outcomes?.delivered ?? 0,
+      status: "delivered"
+    },
+    { label: "Opened", value: outcomes?.opened ?? 0, status: "opened" },
+    { label: "Bounced", value: outcomes?.bounced ?? 0, status: "bounced" }
+  ];
+};
+function sendModeLine(mode) {
+  if (mode === "live") return "Live: sent to merchants";
+  if (mode === "admins_only") return "Admins only: no merchants were emailed";
+  return null;
+}
+export {
+  DELIVERY_FILTERS,
+  DELIVERY_STATUS,
+  awaitingConfirmation,
+  countLinks,
+  deliveriesQuery,
+  deliveryBadge,
+  reasonOf,
+  recipientsHref,
+  sendModeLine,
+  statusFromParam,
+  statusOptions,
+  timeOf
+};
+//# sourceMappingURL=deliveries.js.map

package/dist/admin/newsletters/deliveries.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/deliveries.ts"],"sourcesContent":["import type {\n  Delivery,\n  DeliveryFilter,\n  DeliveryOutcomes,\n  DeliveryStatus,\n} from \"@withpotter/lib/admin-newsletter-deliveries-api\";\nimport type { Newsletter } from \"@withpotter/lib/admin-newsletters-api\";\n\n/** The recipients filter chip, in the order its options are listed. */\nexport const DELIVERY_FILTERS: Array<{ value: DeliveryFilter; label: string }> =\n  [\n    { value: \"sent\", label: \"Sent\" },\n    { value: \"delivered\", label: \"Delivered\" },\n    { value: \"opened\", label: \"Opened\" },\n    { value: \"bounced\", label: \"Bounced\" },\n    { value: \"complained\", label: \"Marked as spam\" },\n    { value: \"failed\", label: \"Failed\" },\n    { value: \"skipped\", label: \"Skipped\" },\n    { value: \"queued\", label: \"Queued\" },\n  ];\n\n/**\n * How each delivery status reads in `StatusBadge`, on the same terms as a\n * newsletter's own status: only a failure keeps its colour.\n */\nexport const DELIVERY_STATUS: Record<\n  DeliveryStatus,\n  { key: string; label: string; quiet: boolean }\n> = {\n  queued: { key: \"pending\", label: \"Queued\", quiet: true },\n  sent: { key: \"sent\", label: \"Sent\", quiet: true },\n  failed: { key: \"failed\", label: \"Failed\", quiet: false },\n  skipped: { key: \"cancelled\", label: \"Skipped\", quiet: true },\n};\n\ntype Reported = Pick<Delivery, \"status\" | \"providerStatus\">;\n\nexport interface DeliveryBadge {\n  key: string;\n  label: string;\n  quiet: boolean;\n}\n\n/**\n * What the provider said next, on a row the platform's mail service took.\n * The column is the table's only status, so its dot may colour: green once\n * the email reached the inbox, red for a problem, grey while in between.\n */\nconst PROVIDER_BADGE: Partial<Record<string, DeliveryBadge>> = {\n  delivered: { key: \"delivered\", label: \"Delivered\", quiet: false },\n  opened: { key: \"delivered\", label: \"Opened\", quiet: false },\n  delayed: { key: \"pending\", label: \"Delayed\", quiet: true },\n  complained: { key: \"failed\", label: \"Marked as spam\", quiet: false },\n};\n\n/**\n * The Status cell of one address. `sent` means the mail service took the\n * email; what the provider said next decides the word: Delivered, Opened,\n * Delayed or Marked as spam. A failed row the address sent back reads\n * Bounced. Everything else reads as its own status.\n */\nexport function deliveryBadge(d: Reported): DeliveryBadge {\n  if (d.status === \"failed\" && d.providerStatus === \"bounced\") {\n    return { key: \"failed\", label: \"Bounced\", quiet: false };\n  }\n\n  if (d.status === \"sent\" && d.providerStatus) {\n    return PROVIDER_BADGE[d.providerStatus] ?? DELIVERY_STATUS.sent;\n  }\n\n  return DELIVERY_STATUS[d.status];\n}\n\nconst CONFIRM_WINDOW_MS = 48 * 60 * 60 * 1000;\n\n/** Sent, and the mail service has not yet said it took it or gave up. */\nconst unconfirmed = (d: Reported) =>\n  d.status === \"sent\" && d.providerStatus == null;\n\n/**\n * Whether the rows on screen may still change on their own: the newsletter\n * went out in the last 48 hours and a visible row may still turn failed.\n */\nexport function awaitingConfirmation(\n  sentAt: string | null | undefined,\n  items: Reported[] | undefined,\n  now = Date.now()\n) {\n  if (!sentAt || !items) return false;\n\n  const age = now - new Date(sentAt).getTime();\n\n  return age >= 0 && age <= CONFIRM_WINDOW_MS && items.some(unconfirmed);\n}\n\n/**\n * The Status chip's options: All, then each filter with how many recipients\n * it holds when the server said.\n */\nexport const statusOptions = (\n  outcomes?: DeliveryOutcomes\n): Array<{ value: string; label: string; count?: number }> => [\n  { value: \"\", label: \"All\" },\n  ...DELIVERY_FILTERS.map(({ value, label }) => ({\n    value,\n    label,\n    count: outcomes?.[value],\n  })),\n];\n\n/** The `?status=` value as a filter, or none when it is missing or unknown. */\nexport const statusFromParam = (\n  value: string | null | undefined\n): DeliveryFilter | undefined =>\n  DELIVERY_FILTERS.find((filter) => filter.value === value)?.value;\n\nconst SKIPPED: Record<string, string> = {\n  unsubscribed: \"Unsubscribed\",\n  bounced: \"Address bounced before\",\n  unverified: \"Email not verified\",\n  inactive: \"Account not active\",\n};\n\n/**\n * The Reason cell. A failure gives the provider's words as the API sent\n * them; a skip gives why the address was left off. Null means say nothing.\n */\nexport function reasonOf(d: Pick<Delivery, \"status\" | \"reason\">) {\n  const reason = d.reason?.trim();\n\n  if (d.status === \"failed\") return reason || \"No reason given\";\n  if (d.status !== \"skipped\") return null;\n  if (!reason) return \"Left off\";\n\n  return SKIPPED[reason] ?? reason;\n}\n\n/** When it was sent, or when it was last tried. */\nexport const timeOf = (d: Pick<Delivery, \"sentAt\" | \"updatedAt\">) =>\n  d.sentAt ?? d.updatedAt;\n\n/** The query string of a deliveries request; empty filters are left out. */\nexport function deliveriesQuery(\n  filter: { status?: DeliveryFilter; search?: string },\n  paging?: { page: number; limit: number }\n) {\n  const qs = new URLSearchParams();\n  const search = filter.search?.trim();\n\n  if (filter.status) qs.set(\"status\", filter.status);\n  if (search) qs.set(\"search\", search);\n\n  if (paging) {\n    qs.set(\"page\", String(paging.page));\n    qs.set(\"limit\", String(paging.limit));\n  }\n\n  const text = qs.toString();\n\n  return text ? `?${text}` : \"\";\n}\n\n/** Where the Recipients tab of a newsletter is, narrowed to one status. */\nexport const recipientsHref = (id: string, status?: DeliveryFilter) =>\n  `/admin/newsletters/${id}?tab=recipients${status ? `&status=${status}` : \"\"}`;\n\n/**\n * The four counts of a send, each with the filter its link narrows to. An\n * older server sends no outcomes: Sent is then its own count, the rest 0.\n */\nexport const countLinks = (\n  newsletter: Pick<Newsletter, \"counts\" | \"outcomes\">\n): Array<{ label: string; value: number; status: DeliveryFilter }> => {\n  const outcomes = newsletter.outcomes;\n\n  return [\n    {\n      label: \"Sent\",\n      value: outcomes?.sent ?? newsletter.counts.sent,\n      status: \"sent\",\n    },\n    {\n      label: \"Delivered\",\n      value: outcomes?.delivered ?? 0,\n      status: \"delivered\",\n    },\n    { label: \"Opened\", value: outcomes?.opened ?? 0, status: \"opened\" },\n    { label: \"Bounced\", value: outcomes?.bounced ?? 0, status: \"bounced\" },\n  ];\n};\n\n/** Who a send really went to, in words. Nothing when it was not recorded. */\nexport function sendModeLine(mode: Newsletter[\"sendMode\"]) {\n  if (mode === \"live\") return \"Live: sent to merchants\";\n  if (mode === \"admins_only\") return \"Admins only: no merchants were emailed\";\n\n  return null;\n}\n"],"mappings":"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","names":[]}

package/dist/admin/newsletters/digest-items.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Card, Input } from "@withpotter/ui-kit";
+import { MAX_DIGEST_ITEMS, emptyItem } from "./content";
+import { MarkdownField } from "./markdown-field";
+function DigestItems({
+  items,
+  disabled,
+  onChange
+}) {
+  const full = items.length >= MAX_DIGEST_ITEMS;
+  const patch = (index, change) => onChange(
+    items.map((item, i) => i === index ? { ...item, ...change } : item)
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    items.map((item, index) => {
+      const name = `Item ${index + 1}`;
+      return /* @__PURE__ */ jsx(Card, { padding: "sm", children: /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": name, className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: name }),
+          !disabled && /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "ghost",
+              "aria-label": `Remove ${name.toLowerCase()}`,
+              onClick: () => onChange(items.filter((_, i) => i !== index)),
+              children: "Remove"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "Heading",
+            value: item.heading,
+            disabled,
+            onChange: (e) => patch(index, { heading: e.target.value })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MarkdownField,
+          {
+            label: "Text",
+            value: item.text,
+            disabled,
+            onChange: (text) => patch(index, { text })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              label: "Link label",
+              value: item.linkLabel,
+              disabled,
+              onChange: (e) => patch(index, { linkLabel: e.target.value })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              label: "Link address",
+              type: "url",
+              placeholder: "https://",
+              value: item.linkUrl,
+              disabled,
+              onChange: (e) => patch(index, { linkUrl: e.target.value })
+            }
+          )
+        ] })
+      ] }) }, index);
+    }),
+    !disabled && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          disabled: full,
+          onClick: () => onChange([...items, emptyItem()]),
+          children: "Add item"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-tertiary)]", children: full ? `A digest holds up to ${MAX_DIGEST_ITEMS} items.` : `${items.length} of ${MAX_DIGEST_ITEMS} items` })
+    ] })
+  ] });
+}
+export {
+  DigestItems
+};
+//# sourceMappingURL=digest-items.js.map

package/dist/admin/newsletters/digest-items.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/digest-items.tsx"],"sourcesContent":["'use client';\n\nimport { Button, Card, Input } from '@withpotter/ui-kit';\nimport type { DigestItem } from '@withpotter/lib/admin-newsletters-api';\nimport { MAX_DIGEST_ITEMS, emptyItem } from './content';\nimport { MarkdownField } from './markdown-field';\n\n/** A digest's items: up to five, each a heading, some text and one link. */\nexport function DigestItems({\n  items,\n  disabled,\n  onChange,\n}: {\n  items: DigestItem[];\n  disabled?: boolean;\n  onChange: (items: DigestItem[]) => void;\n}) {\n  const full = items.length >= MAX_DIGEST_ITEMS;\n  const patch = (index: number, change: Partial<DigestItem>) =>\n    onChange(\n      items.map((item, i) => (i === index ? { ...item, ...change } : item)),\n    );\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      {items.map((item, index) => {\n        const name = `Item ${index + 1}`;\n\n        return (\n          <Card key={index} padding=\"sm\">\n            <div role=\"group\" aria-label={name} className=\"flex flex-col gap-3\">\n              <div className=\"flex items-center justify-between gap-2\">\n                <span className=\"text-sm font-medium text-[var(--text-primary)]\">\n                  {name}\n                </span>\n                {!disabled && (\n                  <Button\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    aria-label={`Remove ${name.toLowerCase()}`}\n                    onClick={() =>\n                      onChange(items.filter((_, i) => i !== index))\n                    }\n                  >\n                    Remove\n                  </Button>\n                )}\n              </div>\n              <Input\n                label=\"Heading\"\n                value={item.heading}\n                disabled={disabled}\n                onChange={(e) => patch(index, { heading: e.target.value })}\n              />\n              <MarkdownField\n                label=\"Text\"\n                value={item.text}\n                disabled={disabled}\n                onChange={(text) => patch(index, { text })}\n              />\n              <div className=\"grid gap-3 sm:grid-cols-2\">\n                <Input\n                  label=\"Link label\"\n                  value={item.linkLabel}\n                  disabled={disabled}\n                  onChange={(e) => patch(index, { linkLabel: e.target.value })}\n                />\n                <Input\n                  label=\"Link address\"\n                  type=\"url\"\n                  placeholder=\"https://\"\n                  value={item.linkUrl}\n                  disabled={disabled}\n                  onChange={(e) => patch(index, { linkUrl: e.target.value })}\n                />\n              </div>\n            </div>\n          </Card>\n        );\n      })}\n      {!disabled && (\n        <div className=\"flex items-center gap-3\">\n          <Button\n            variant=\"secondary\"\n            disabled={full}\n            onClick={() => onChange([...items, emptyItem()])}\n          >\n            Add item\n          </Button>\n          <span className=\"text-xs text-[var(--text-tertiary)]\">\n            {full\n              ? `A digest holds up to ${MAX_DIGEST_ITEMS} items.`\n              : `${items.length} of ${MAX_DIGEST_ITEMS} items`}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA+Bc,SACE,KADF;AA7Bd,SAAS,QAAQ,MAAM,aAAa;AAEpC,SAAS,kBAAkB,iBAAiB;AAC5C,SAAS,qBAAqB;AAGvB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,OAAO,MAAM,UAAU;AAC7B,QAAM,QAAQ,CAAC,OAAe,WAC5B;AAAA,IACE,MAAM,IAAI,CAAC,MAAM,MAAO,MAAM,QAAQ,EAAE,GAAG,MAAM,GAAG,OAAO,IAAI,IAAK;AAAA,EACtE;AAEF,SACE,qBAAC,SAAI,WAAU,uBACZ;AAAA,UAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,YAAM,OAAO,QAAQ,QAAQ,CAAC;AAE9B,aACE,oBAAC,QAAiB,SAAQ,MACxB,+BAAC,SAAI,MAAK,SAAQ,cAAY,MAAM,WAAU,uBAC5C;AAAA,6BAAC,SAAI,WAAU,2CACb;AAAA,8BAAC,UAAK,WAAU,kDACb,gBACH;AAAA,UACC,CAAC,YACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,cAAY,UAAU,KAAK,YAAY,CAAC;AAAA,cACxC,SAAS,MACP,SAAS,MAAM,OAAO,CAAC,GAAG,MAAM,MAAM,KAAK,CAAC;AAAA,cAE/C;AAAA;AAAA,UAED;AAAA,WAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,OAAO,KAAK;AAAA,YACZ;AAAA,YACA,UAAU,CAAC,MAAM,MAAM,OAAO,EAAE,SAAS,EAAE,OAAO,MAAM,CAAC;AAAA;AAAA,QAC3D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,OAAO,KAAK;AAAA,YACZ;AAAA,YACA,UAAU,CAAC,SAAS,MAAM,OAAO,EAAE,KAAK,CAAC;AAAA;AAAA,QAC3C;AAAA,QACA,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO,KAAK;AAAA,cACZ;AAAA,cACA,UAAU,CAAC,MAAM,MAAM,OAAO,EAAE,WAAW,EAAE,OAAO,MAAM,CAAC;AAAA;AAAA,UAC7D;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,MAAK;AAAA,cACL,aAAY;AAAA,cACZ,OAAO,KAAK;AAAA,cACZ;AAAA,cACA,UAAU,CAAC,MAAM,MAAM,OAAO,EAAE,SAAS,EAAE,OAAO,MAAM,CAAC;AAAA;AAAA,UAC3D;AAAA,WACF;AAAA,SACF,KA/CS,KAgDX;AAAA,IAEJ,CAAC;AAAA,IACA,CAAC,YACA,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,UAAU;AAAA,UACV,SAAS,MAAM,SAAS,CAAC,GAAG,OAAO,UAAU,CAAC,CAAC;AAAA,UAChD;AAAA;AAAA,MAED;AAAA,MACA,oBAAC,UAAK,WAAU,uCACb,iBACG,wBAAwB,gBAAgB,YACxC,GAAG,MAAM,MAAM,OAAO,gBAAgB,UAC5C;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/admin/newsletters/editor-fields.js

@@ -0,0 +1,135 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Field, Input, Select } from "@withpotter/ui-kit";
+import {
+  announcementOf,
+  changeLayout,
+  digestOf,
+  plainOf
+} from "./content";
+import { DigestItems } from "./digest-items";
+import { ImageField } from "./image-field";
+import { LAYOUTS, LAYOUT_LABEL } from "./labels";
+import { MarkdownField } from "./markdown-field";
+import { SignatureField } from "./signature-field";
+const LAYOUT_OPTIONS = LAYOUTS.map((value) => ({
+  value,
+  label: LAYOUT_LABEL[value]
+}));
+function EditorFields({
+  draft,
+  carried,
+  disabled,
+  onChange
+}) {
+  const { layout, content } = draft;
+  const set = (patch) => onChange({ content: { ...content, ...patch } });
+  const text = (key, label, url = false) => /* @__PURE__ */ jsx(
+    Input,
+    {
+      label,
+      type: url ? "url" : "text",
+      placeholder: url ? "https://" : void 0,
+      value: String(content[key] ?? ""),
+      disabled,
+      onChange: (e) => set({ [key]: e.target.value })
+    }
+  );
+  const body = (value) => /* @__PURE__ */ jsx(
+    MarkdownField,
+    {
+      label: "Body",
+      value,
+      disabled,
+      onChange: (next) => set({ body: next })
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        label: "Subject",
+        value: draft.subject,
+        disabled,
+        maxLength: 200,
+        onChange: (e) => onChange({ subject: e.target.value })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        label: "Preview text",
+        hint: "Shown after the subject in the inbox.",
+        value: draft.previewText,
+        disabled,
+        maxLength: 200,
+        onChange: (e) => onChange({ previewText: e.target.value })
+      }
+    ),
+    /* @__PURE__ */ jsx(Field, { label: "Layout", children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        ariaLabel: "Layout",
+        value: layout,
+        options: LAYOUT_OPTIONS,
+        disabled,
+        onChange: (next) => onChange({
+          layout: next,
+          content: changeLayout(layout, next, content)
+        })
+      }
+    ) }),
+    layout === "plain" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      text("heading", "Heading"),
+      body(plainOf(content).body)
+    ] }),
+    layout === "announcement" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        ImageField,
+        {
+          value: announcementOf(content).imageUrl,
+          disabled,
+          onChange: (imageUrl) => set({ imageUrl })
+        }
+      ),
+      text("heading", "Heading"),
+      body(announcementOf(content).body),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+        text("buttonLabel", "Button label"),
+        text("buttonUrl", "Button link", true)
+      ] })
+    ] }),
+    layout === "digest" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        MarkdownField,
+        {
+          label: "Intro",
+          value: digestOf(content).intro,
+          disabled,
+          onChange: (intro) => set({ intro })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DigestItems,
+        {
+          items: digestOf(content).items,
+          disabled,
+          onChange: (items) => set({ items })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      SignatureField,
+      {
+        value: draft.signatureId,
+        carried,
+        disabled,
+        onChange: (signatureId) => onChange({ signatureId })
+      }
+    )
+  ] });
+}
+export {
+  EditorFields
+};
+//# sourceMappingURL=editor-fields.js.map

package/dist/admin/newsletters/editor-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/editor-fields.tsx"],"sourcesContent":["'use client';\n\nimport { Field, Input, Select } from '@withpotter/ui-kit';\nimport type {\n  NewsletterContent,\n  NewsletterLayout,\n  NewsletterSignature,\n} from '@withpotter/lib/admin-newsletters-api';\nimport {\n  announcementOf,\n  changeLayout,\n  digestOf,\n  plainOf,\n  type EditorDraft,\n} from './content';\nimport { DigestItems } from './digest-items';\nimport { ImageField } from './image-field';\nimport { LAYOUTS, LAYOUT_LABEL } from './labels';\nimport { MarkdownField } from './markdown-field';\nimport { SignatureField } from './signature-field';\n\nconst LAYOUT_OPTIONS = LAYOUTS.map((value) => ({\n  value,\n  label: LAYOUT_LABEL[value],\n}));\n\n/**\n * Everything an admin writes: the envelope, the layout, its fields, then\n * the signature that closes it.\n */\nexport function EditorFields({\n  draft,\n  carried,\n  disabled,\n  onChange,\n}: {\n  draft: EditorDraft;\n  /** The signature the saved newsletter carries. */\n  carried: NewsletterSignature | null;\n  disabled: boolean;\n  onChange: (patch: Partial<EditorDraft>) => void;\n}) {\n  const { layout, content } = draft;\n  const set = (patch: NewsletterContent) =>\n    onChange({ content: { ...content, ...patch } });\n  const text = (key: keyof NewsletterContent, label: string, url = false) => (\n    <Input\n      label={label}\n      type={url ? 'url' : 'text'}\n      placeholder={url ? 'https://' : undefined}\n      value={String(content[key] ?? '')}\n      disabled={disabled}\n      onChange={(e) => set({ [key]: e.target.value })}\n    />\n  );\n  const body = (value: string) => (\n    <MarkdownField\n      label=\"Body\"\n      value={value}\n      disabled={disabled}\n      onChange={(next) => set({ body: next })}\n    />\n  );\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Input\n        label=\"Subject\"\n        value={draft.subject}\n        disabled={disabled}\n        maxLength={200}\n        onChange={(e) => onChange({ subject: e.target.value })}\n      />\n      <Input\n        label=\"Preview text\"\n        hint=\"Shown after the subject in the inbox.\"\n        value={draft.previewText}\n        disabled={disabled}\n        maxLength={200}\n        onChange={(e) => onChange({ previewText: e.target.value })}\n      />\n      <Field label=\"Layout\">\n        <Select\n          ariaLabel=\"Layout\"\n          value={layout}\n          options={LAYOUT_OPTIONS}\n          disabled={disabled}\n          onChange={(next) =>\n            onChange({\n              layout: next as NewsletterLayout,\n              content: changeLayout(layout, next as NewsletterLayout, content),\n            })\n          }\n        />\n      </Field>\n      {layout === 'plain' && (\n        <>\n          {text('heading', 'Heading')}\n          {body(plainOf(content).body)}\n        </>\n      )}\n      {layout === 'announcement' && (\n        <>\n          <ImageField\n            value={announcementOf(content).imageUrl}\n            disabled={disabled}\n            onChange={(imageUrl) => set({ imageUrl })}\n          />\n          {text('heading', 'Heading')}\n          {body(announcementOf(content).body)}\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            {text('buttonLabel', 'Button label')}\n            {text('buttonUrl', 'Button link', true)}\n          </div>\n        </>\n      )}\n      {layout === 'digest' && (\n        <>\n          <MarkdownField\n            label=\"Intro\"\n            value={digestOf(content).intro}\n            disabled={disabled}\n            onChange={(intro) => set({ intro })}\n          />\n          <DigestItems\n            items={digestOf(content).items}\n            disabled={disabled}\n            onChange={(items) => set({ items })}\n          />\n        </>\n      )}\n      <SignatureField\n        value={draft.signatureId}\n        carried={carried}\n        disabled={disabled}\n        onChange={(signatureId) => onChange({ signatureId })}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/newsletters/format-date.js

@@ -0,0 +1,11 @@
+const formatMoment = (iso) => iso ? new Date(iso).toLocaleString("en-GB", {
+  day: "numeric",
+  month: "short",
+  year: "numeric",
+  hour: "2-digit",
+  minute: "2-digit"
+}) : null;
+export {
+  formatMoment
+};
+//# sourceMappingURL=format-date.js.map

package/dist/admin/newsletters/format-date.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/format-date.ts"],"sourcesContent":["/** \"15 Oct 2026, 14:05\", or null when there is no time to show. */\nexport const formatMoment = (iso: string | null | undefined) =>\n  iso\n    ? new Date(iso).toLocaleString('en-GB', {\n        day: 'numeric',\n        month: 'short',\n        year: 'numeric',\n        hour: '2-digit',\n        minute: '2-digit',\n      })\n    : null;\n"],"mappings":"AACO,MAAM,eAAe,CAAC,QAC3B,MACI,IAAI,KAAK,GAAG,EAAE,eAAe,SAAS;AAAA,EACpC,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AACV,CAAC,IACD;","names":[]}

package/dist/admin/newsletters/image-field.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Field, Input } from "@withpotter/ui-kit";
+import {
+  ImageError,
+  ImageThumb,
+  UploadImageButton,
+  useImageUpload
+} from "./image-picker";
+import { isWebAddress } from "./image-upload";
+function ImageField({
+  value,
+  disabled,
+  onChange
+}) {
+  const upload = useImageUpload(onChange);
+  const hasImage = value.trim() !== "";
+  return /* @__PURE__ */ jsx(Field, { label: "Image (optional)", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      isWebAddress(value) && /* @__PURE__ */ jsx(ImageThumb, { src: value.trim() }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          "aria-label": "Image address",
+          type: "url",
+          placeholder: "https://",
+          value,
+          disabled,
+          wrapperClassName: "min-w-0 flex-1",
+          onChange: (e) => {
+            upload.clearError();
+            onChange(e.target.value);
+          }
+        }
+      ),
+      hasImage && !disabled && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: () => {
+            upload.clearError();
+            onChange("");
+          },
+          children: "Remove"
+        }
+      )
+    ] }),
+    !hasImage && !disabled && /* @__PURE__ */ jsx(UploadImageButton, { upload }),
+    /* @__PURE__ */ jsx(ImageError, { upload })
+  ] }) });
+}
+export {
+  ImageField
+};
+//# sourceMappingURL=image-field.js.map

package/dist/admin/newsletters/image-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/image-field.tsx"],"sourcesContent":["'use client';\n\nimport { Button, Field, Input } from '@withpotter/ui-kit';\nimport {\n  ImageError,\n  ImageThumb,\n  UploadImageButton,\n  useImageUpload,\n} from './image-picker';\nimport { isWebAddress } from './image-upload';\n\n/**\n * The announcement's image, which it can do without. Upload a file or paste\n * a web address: both end up as the same address in the draft.\n */\nexport function ImageField({\n  value,\n  disabled,\n  onChange,\n}: {\n  value: string;\n  disabled: boolean;\n  onChange: (imageUrl: string) => void;\n}) {\n  const upload = useImageUpload(onChange);\n  const hasImage = value.trim() !== '';\n\n  return (\n    <Field label=\"Image (optional)\">\n      <div className=\"flex flex-col gap-2\">\n        <div className=\"flex items-center gap-3\">\n          {isWebAddress(value) && <ImageThumb src={value.trim()} />}\n          <Input\n            aria-label=\"Image address\"\n            type=\"url\"\n            placeholder=\"https://\"\n            value={value}\n            disabled={disabled}\n            wrapperClassName=\"min-w-0 flex-1\"\n            onChange={(e) => {\n              upload.clearError();\n              onChange(e.target.value);\n            }}\n          />\n          {hasImage && !disabled && (\n            <Button\n              variant=\"secondary\"\n              onClick={() => {\n                upload.clearError();\n                onChange('');\n              }}\n            >\n              Remove\n            </Button>\n          )}\n        </div>\n        {!hasImage && !disabled && <UploadImageButton upload={upload} />}\n        <ImageError upload={upload} />\n      </div>\n    </Field>\n  );\n}\n"],"mappings":";AA8BQ,SAC0B,KAD1B;AA5BR,SAAS,QAAQ,OAAO,aAAa;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAMtB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,SAAS,eAAe,QAAQ;AACtC,QAAM,WAAW,MAAM,KAAK,MAAM;AAElC,SACE,oBAAC,SAAM,OAAM,oBACX,+BAAC,SAAI,WAAU,uBACb;AAAA,yBAAC,SAAI,WAAU,2BACZ;AAAA,mBAAa,KAAK,KAAK,oBAAC,cAAW,KAAK,MAAM,KAAK,GAAG;AAAA,MACvD;AAAA,QAAC;AAAA;AAAA,UACC,cAAW;AAAA,UACX,MAAK;AAAA,UACL,aAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA,kBAAiB;AAAA,UACjB,UAAU,CAAC,MAAM;AACf,mBAAO,WAAW;AAClB,qBAAS,EAAE,OAAO,KAAK;AAAA,UACzB;AAAA;AAAA,MACF;AAAA,MACC,YAAY,CAAC,YACZ;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM;AACb,mBAAO,WAAW;AAClB,qBAAS,EAAE;AAAA,UACb;AAAA,UACD;AAAA;AAAA,MAED;AAAA,OAEJ;AAAA,IACC,CAAC,YAAY,CAAC,YAAY,oBAAC,qBAAkB,QAAgB;AAAA,IAC9D,oBAAC,cAAW,QAAgB;AAAA,KAC9B,GACF;AAEJ;","names":[]}

package/dist/admin/newsletters/image-picker.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Button, FileInput } from "@withpotter/ui-kit";
+import { adminNewslettersApi } from "@withpotter/lib/admin-newsletters-api";
+import {
+  IMAGE_ACCEPT,
+  imageFileError,
+  uploadErrorMessage
+} from "./image-upload";
+function useImageUpload(onUploaded) {
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState(null);
+  return {
+    uploading,
+    error,
+    clearError: () => setError(null),
+    async pick(file) {
+      const refused = imageFileError(file);
+      setError(refused);
+      if (refused) return;
+      setUploading(true);
+      try {
+        const { url } = await adminNewslettersApi.uploadImage(file);
+        onUploaded(url);
+      } catch (failure) {
+        setError(uploadErrorMessage(failure));
+      } finally {
+        setUploading(false);
+      }
+    }
+  };
+}
+function UploadImageButton({ upload }) {
+  const picker = useRef(null);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      FileInput,
+      {
+        ref: picker,
+        accept: IMAGE_ACCEPT,
+        tabIndex: -1,
+        "aria-label": "Upload image",
+        onFiles: ([file]) => void upload.pick(file)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        loading: upload.uploading,
+        onClick: () => picker.current?.click(),
+        children: "Upload image"
+      }
+    )
+  ] });
+}
+function ImageThumb({
+  src,
+  shape = "square"
+}) {
+  const box = shape === "wide" ? "h-16 w-full max-w-xs" : shape === "small" ? "size-8" : "size-16";
+  return (
+    // A remote address the admin typed or uploaded: nothing for next/image
+    // to optimise, and its host is not known in advance.
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt: "",
+        className: `${box} shrink-0 rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-subtle)] object-contain`
+      }
+    )
+  );
+}
+function ImageError({ upload }) {
+  return upload.error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-[var(--error)]", children: upload.error }) : null;
+}
+export {
+  ImageError,
+  ImageThumb,
+  UploadImageButton,
+  useImageUpload
+};
+//# sourceMappingURL=image-picker.js.map