@withpotter/pages-admin 0.13.0-next.101

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/image-picker.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\nimport { Button, FileInput } from '@withpotter/ui-kit';\nimport { adminNewslettersApi } from '@withpotter/lib/admin-newsletters-api';\nimport {\n  IMAGE_ACCEPT,\n  imageFileError,\n  uploadErrorMessage,\n} from './image-upload';\n\n/**\n * One image upload: check the file, send it, hand back its address. Shared\n * by every field that takes an image, so they refuse the same files in the\n * same words.\n */\nexport function useImageUpload(onUploaded: (url: string) => void) {\n  const [uploading, setUploading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  return {\n    uploading,\n    error,\n    clearError: () => setError(null),\n    async pick(file: File) {\n      const refused = imageFileError(file);\n\n      setError(refused);\n\n      if (refused) return;\n\n      setUploading(true);\n\n      try {\n        const { url } = await adminNewslettersApi.uploadImage(file);\n\n        onUploaded(url);\n      } catch (failure) {\n        setError(uploadErrorMessage(failure));\n      } finally {\n        setUploading(false);\n      }\n    },\n  };\n}\n\nexport type ImageUpload = ReturnType<typeof useImageUpload>;\n\n/** The button that opens the file picker, busy while the upload is out. */\nexport function UploadImageButton({ upload }: { upload: ImageUpload }) {\n  const picker = useRef<HTMLInputElement>(null);\n\n  return (\n    <div>\n      <FileInput\n        ref={picker}\n        accept={IMAGE_ACCEPT}\n        tabIndex={-1}\n        aria-label=\"Upload image\"\n        onFiles={([file]) => void upload.pick(file)}\n      />\n      <Button\n        variant=\"secondary\"\n        loading={upload.uploading}\n        onClick={() => picker.current?.click()}\n      >\n        Upload image\n      </Button>\n    </div>\n  );\n}\n\n/** A chosen image in a fixed box, whatever its own shape. */\nexport function ImageThumb({\n  src,\n  shape = 'square',\n}: {\n  src: string;\n  shape?: 'square' | 'small' | 'wide';\n}) {\n  const box =\n    shape === 'wide'\n      ? 'h-16 w-full max-w-xs'\n      : shape === 'small'\n        ? 'size-8'\n        : 'size-16';\n\n  return (\n    // A remote address the admin typed or uploaded: nothing for next/image\n    // to optimise, and its host is not known in advance.\n    // eslint-disable-next-line @next/next/no-img-element\n    <img\n      src={src}\n      alt=\"\"\n      className={`${box} shrink-0 rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-subtle)] object-contain`}\n    />\n  );\n}\n\n/** Why the last upload did not happen, under the field. */\nexport function ImageError({ upload }: { upload: ImageUpload }) {\n  return upload.error ? (\n    <p role=\"alert\" className=\"text-sm text-[var(--error)]\">\n      {upload.error}\n    </p>\n  ) : null;\n}\n"],"mappings":";AAqDI,SACE,KADF;AAnDJ,SAAS,QAAQ,gBAAgB;AACjC,SAAS,QAAQ,iBAAiB;AAClC,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAOA,SAAS,eAAe,YAAmC;AAChE,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AAEtD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,YAAY,MAAM,SAAS,IAAI;AAAA,IAC/B,MAAM,KAAK,MAAY;AACrB,YAAM,UAAU,eAAe,IAAI;AAEnC,eAAS,OAAO;AAEhB,UAAI,QAAS;AAEb,mBAAa,IAAI;AAEjB,UAAI;AACF,cAAM,EAAE,IAAI,IAAI,MAAM,oBAAoB,YAAY,IAAI;AAE1D,mBAAW,GAAG;AAAA,MAChB,SAAS,SAAS;AAChB,iBAAS,mBAAmB,OAAO,CAAC;AAAA,MACtC,UAAE;AACA,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF;AACF;AAKO,SAAS,kBAAkB,EAAE,OAAO,GAA4B;AACrE,QAAM,SAAS,OAAyB,IAAI;AAE5C,SACE,qBAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,cAAW;AAAA,QACX,SAAS,CAAC,CAAC,IAAI,MAAM,KAAK,OAAO,KAAK,IAAI;AAAA;AAAA,IAC5C;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,OAAO;AAAA,QAChB,SAAS,MAAM,OAAO,SAAS,MAAM;AAAA,QACtC;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;AAGO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,QAAQ;AACV,GAGG;AACD,QAAM,MACJ,UAAU,SACN,yBACA,UAAU,UACR,WACA;AAER;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAI;AAAA,QACJ,WAAW,GAAG,GAAG;AAAA;AAAA,IACnB;AAAA;AAEJ;AAGO,SAAS,WAAW,EAAE,OAAO,GAA4B;AAC9D,SAAO,OAAO,QACZ,oBAAC,OAAE,MAAK,SAAQ,WAAU,+BACvB,iBAAO,OACV,IACE;AACN;","names":[]}

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

@@ -0,0 +1,37 @@
+const IMAGE_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/gif",
+  "image/webp"
+];
+const IMAGE_ACCEPT = IMAGE_TYPES.join(",");
+const IMAGE_MAX_BYTES = 5 * 1024 * 1024;
+const WRONG_TYPE = "Upload a PNG, JPG, GIF or WebP image.";
+const TOO_LARGE = "Images can be up to 5 MB.";
+const UPLOAD_FAILED = "The image was not uploaded.";
+const EXTENSION = /\.(png|jpe?g|gif|webp)$/i;
+function imageFileError(file) {
+  const allowed = file.type ? IMAGE_TYPES.includes(file.type.toLowerCase()) : EXTENSION.test(file.name);
+  if (!allowed) return WRONG_TYPE;
+  return file.size > IMAGE_MAX_BYTES ? TOO_LARGE : null;
+}
+const uploadErrorMessage = (error) => error?.message?.trim() || UPLOAD_FAILED;
+function isWebAddress(value) {
+  try {
+    return ["http:", "https:"].includes(new URL(value.trim()).protocol);
+  } catch {
+    return false;
+  }
+}
+export {
+  IMAGE_ACCEPT,
+  IMAGE_MAX_BYTES,
+  IMAGE_TYPES,
+  TOO_LARGE,
+  UPLOAD_FAILED,
+  WRONG_TYPE,
+  imageFileError,
+  isWebAddress,
+  uploadErrorMessage
+};
+//# sourceMappingURL=image-upload.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/image-upload.ts"],"sourcesContent":["/** What the server accepts for a newsletter image, checked before sending. */\nexport const IMAGE_TYPES = [\n  'image/png',\n  'image/jpeg',\n  'image/gif',\n  'image/webp',\n];\nexport const IMAGE_ACCEPT = IMAGE_TYPES.join(',');\nexport const IMAGE_MAX_BYTES = 5 * 1024 * 1024;\n\nexport const WRONG_TYPE = 'Upload a PNG, JPG, GIF or WebP image.';\nexport const TOO_LARGE = 'Images can be up to 5 MB.';\nexport const UPLOAD_FAILED = 'The image was not uploaded.';\n\nconst EXTENSION = /\\.(png|jpe?g|gif|webp)$/i;\n\n/**\n * Why a chosen file cannot be uploaded, in the server's own words, or null\n * when it can. A file the browser gives no type for is judged by its name.\n */\nexport function imageFileError(file: {\n  type: string;\n  size: number;\n  name: string;\n}): string | null {\n  const allowed = file.type\n    ? IMAGE_TYPES.includes(file.type.toLowerCase())\n    : EXTENSION.test(file.name);\n\n  if (!allowed) return WRONG_TYPE;\n\n  return file.size > IMAGE_MAX_BYTES ? TOO_LARGE : null;\n}\n\n/** The message to show for a refused upload: the server's, when it has one. */\nexport const uploadErrorMessage = (error: unknown) =>\n  (error as { message?: string } | null)?.message?.trim() || UPLOAD_FAILED;\n\n/** True for an http(s) address, which is all an email can load an image from. */\nexport function isWebAddress(value: string) {\n  try {\n    return ['http:', 'https:'].includes(new URL(value.trim()).protocol);\n  } catch {\n    return false;\n  }\n}\n"],"mappings":"AACO,MAAM,cAAc;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACO,MAAM,eAAe,YAAY,KAAK,GAAG;AACzC,MAAM,kBAAkB,IAAI,OAAO;AAEnC,MAAM,aAAa;AACnB,MAAM,YAAY;AAClB,MAAM,gBAAgB;AAE7B,MAAM,YAAY;AAMX,SAAS,eAAe,MAIb;AAChB,QAAM,UAAU,KAAK,OACjB,YAAY,SAAS,KAAK,KAAK,YAAY,CAAC,IAC5C,UAAU,KAAK,KAAK,IAAI;AAE5B,MAAI,CAAC,QAAS,QAAO;AAErB,SAAO,KAAK,OAAO,kBAAkB,YAAY;AACnD;AAGO,MAAM,qBAAqB,CAAC,UAChC,OAAuC,SAAS,KAAK,KAAK;AAGtD,SAAS,aAAa,OAAe;AAC1C,MAAI;AACF,WAAO,CAAC,SAAS,QAAQ,EAAE,SAAS,IAAI,IAAI,MAAM,KAAK,CAAC,EAAE,QAAQ;AAAA,EACpE,QAAQ;AACN,WAAO;AAAA,EACT;AACF;","names":[]}

package/dist/admin/newsletters/labels.js

@@ -0,0 +1,32 @@
+const LAYOUT_LABEL = {
+  plain: "Plain message",
+  announcement: "Announcement",
+  digest: "Digest"
+};
+const LAYOUT_LINE = {
+  plain: "A short note or service notice",
+  announcement: "One piece of news with one action",
+  digest: "Several items in one email"
+};
+const LAYOUTS = ["plain", "announcement", "digest"];
+const STATUS = {
+  draft: { key: "draft", label: "Draft", quiet: true },
+  sending: { key: "in_progress", label: "Sending", quiet: true },
+  sent: { key: "sent", label: "Sent", quiet: true },
+  failed: { key: "failed", label: "Failed", quiet: false },
+  cancelled: { key: "cancelled", label: "Cancelled", quiet: true }
+};
+const titleOf = (n) => n.subject?.trim() || "Untitled newsletter";
+const count = (n) => new Intl.NumberFormat("en").format(n);
+const recipientsOf = (n) => n.status === "draft" ? "\u2013" : count(n.counts?.total ?? 0);
+const hrefOf = (id) => `/admin/newsletters/${id}`;
+export {
+  LAYOUTS,
+  LAYOUT_LABEL,
+  LAYOUT_LINE,
+  STATUS,
+  hrefOf,
+  recipientsOf,
+  titleOf
+};
+//# sourceMappingURL=labels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/labels.ts"],"sourcesContent":["import type {\n  Newsletter,\n  NewsletterLayout,\n  NewsletterStatus,\n} from '@withpotter/lib/admin-newsletters-api';\n\nexport const LAYOUT_LABEL: Record<NewsletterLayout, string> = {\n  plain: 'Plain message',\n  announcement: 'Announcement',\n  digest: 'Digest',\n};\n\nexport const LAYOUT_LINE: Record<NewsletterLayout, string> = {\n  plain: 'A short note or service notice',\n  announcement: 'One piece of news with one action',\n  digest: 'Several items in one email',\n};\n\nexport const LAYOUTS: NewsletterLayout[] = ['plain', 'announcement', 'digest'];\n\n/**\n * How each status reads in `StatusBadge`: `key` picks the colour from the\n * shared map, `label` the word. Only a failed send asks for someone, so it is\n * the one status that keeps its colour; the rest are stated quietly.\n */\nexport const STATUS: Record<\n  NewsletterStatus,\n  { key: string; label: string; quiet: boolean }\n> = {\n  draft: { key: 'draft', label: 'Draft', quiet: true },\n  sending: { key: 'in_progress', label: 'Sending', quiet: true },\n  sent: { key: 'sent', label: 'Sent', quiet: true },\n  failed: { key: 'failed', label: 'Failed', quiet: false },\n  cancelled: { key: 'cancelled', label: 'Cancelled', quiet: true },\n};\n\nexport const titleOf = (n: Pick<Newsletter, 'subject'>) =>\n  n.subject?.trim() || 'Untitled newsletter';\n\nconst count = (n: number) => new Intl.NumberFormat('en').format(n);\n\n/** The Recipients cell: an en dash for a draft, the send's total after. */\nexport const recipientsOf = (n: Newsletter) =>\n  n.status === 'draft' ? '–' : count(n.counts?.total ?? 0);\n\nexport const hrefOf = (id: string) => `/admin/newsletters/${id}`;\n"],"mappings":"AAMO,MAAM,eAAiD;AAAA,EAC5D,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AACV;AAEO,MAAM,cAAgD;AAAA,EAC3D,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AACV;AAEO,MAAM,UAA8B,CAAC,SAAS,gBAAgB,QAAQ;AAOtE,MAAM,SAGT;AAAA,EACF,OAAO,EAAE,KAAK,SAAS,OAAO,SAAS,OAAO,KAAK;AAAA,EACnD,SAAS,EAAE,KAAK,eAAe,OAAO,WAAW,OAAO,KAAK;AAAA,EAC7D,MAAM,EAAE,KAAK,QAAQ,OAAO,QAAQ,OAAO,KAAK;AAAA,EAChD,QAAQ,EAAE,KAAK,UAAU,OAAO,UAAU,OAAO,MAAM;AAAA,EACvD,WAAW,EAAE,KAAK,aAAa,OAAO,aAAa,OAAO,KAAK;AACjE;AAEO,MAAM,UAAU,CAAC,MACtB,EAAE,SAAS,KAAK,KAAK;AAEvB,MAAM,QAAQ,CAAC,MAAc,IAAI,KAAK,aAAa,IAAI,EAAE,OAAO,CAAC;AAG1D,MAAM,eAAe,CAAC,MAC3B,EAAE,WAAW,UAAU,WAAM,MAAM,EAAE,QAAQ,SAAS,CAAC;AAElD,MAAM,SAAS,CAAC,OAAe,sBAAsB,EAAE;","names":[]}

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

@@ -0,0 +1,58 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, FormDialog, OptionButton } from "@withpotter/ui-kit";
+import { LAYOUTS, LAYOUT_LABEL, LAYOUT_LINE } from "./labels";
+import { LayoutSchematic } from "./layout-schematic";
+function LayoutPicker({
+  open,
+  creating,
+  onClose,
+  onPick
+}) {
+  return /* @__PURE__ */ jsx(
+    FormDialog,
+    {
+      open,
+      title: "New newsletter",
+      description: "Choose a layout. You can change it later.",
+      size: "lg",
+      onClose,
+      footer: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onClose, children: "Cancel" }),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "group",
+          "aria-label": "Layout",
+          className: "grid gap-3 sm:grid-cols-3",
+          children: LAYOUTS.map((layout) => /* @__PURE__ */ jsxs(
+            OptionButton,
+            {
+              shape: "card",
+              selected: creating === layout,
+              disabled: creating !== null && creating !== layout,
+              className: "flex-col items-start gap-3 text-left",
+              onClick: () => {
+                if (creating) return;
+                void onPick(layout).then((made) => {
+                  if (made) onClose();
+                });
+              },
+              children: [
+                /* @__PURE__ */ jsx(LayoutSchematic, { layout }),
+                /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: LAYOUT_LABEL[layout] }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-[var(--text-tertiary)]", children: LAYOUT_LINE[layout] })
+                ] })
+              ]
+            },
+            layout
+          ))
+        }
+      )
+    }
+  );
+}
+export {
+  LayoutPicker
+};
+//# sourceMappingURL=layout-picker.js.map

package/dist/admin/newsletters/layout-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/layout-picker.tsx"],"sourcesContent":["'use client';\n\nimport { Button, FormDialog, OptionButton } from '@withpotter/ui-kit';\nimport type { NewsletterLayout } from '@withpotter/lib/admin-newsletters-api';\nimport { LAYOUTS, LAYOUT_LABEL, LAYOUT_LINE } from './labels';\nimport { LayoutSchematic } from './layout-schematic';\n\n/**\n * The first step of a new newsletter: which frame it is written into.\n * Choosing one creates the draft and opens it.\n */\nexport function LayoutPicker({\n  open,\n  creating,\n  onClose,\n  onPick,\n}: {\n  open: boolean;\n  /** The layout whose draft is being created, if any. */\n  creating: NewsletterLayout | null;\n  onClose: () => void;\n  onPick: (layout: NewsletterLayout) => Promise<boolean>;\n}) {\n  return (\n    <FormDialog\n      open={open}\n      title=\"New newsletter\"\n      description=\"Choose a layout. You can change it later.\"\n      size=\"lg\"\n      onClose={onClose}\n      footer={\n        <Button variant=\"secondary\" onClick={onClose}>\n          Cancel\n        </Button>\n      }\n    >\n      <div\n        role=\"group\"\n        aria-label=\"Layout\"\n        className=\"grid gap-3 sm:grid-cols-3\"\n      >\n        {LAYOUTS.map((layout) => (\n          <OptionButton\n            key={layout}\n            shape=\"card\"\n            selected={creating === layout}\n            disabled={creating !== null && creating !== layout}\n            className=\"flex-col items-start gap-3 text-left\"\n            onClick={() => {\n              if (creating) return;\n\n              void onPick(layout).then((made) => {\n                if (made) onClose();\n              });\n            }}\n          >\n            <LayoutSchematic layout={layout} />\n            <span className=\"flex flex-col gap-1\">\n              <span className=\"text-sm font-medium text-[var(--text-primary)]\">\n                {LAYOUT_LABEL[layout]}\n              </span>\n              <span className=\"text-xs font-normal text-[var(--text-tertiary)]\">\n                {LAYOUT_LINE[layout]}\n              </span>\n            </span>\n          </OptionButton>\n        ))}\n      </div>\n    </FormDialog>\n  );\n}\n"],"mappings":";AA+BQ,cA0BI,YA1BJ;AA7BR,SAAS,QAAQ,YAAY,oBAAoB;AAEjD,SAAS,SAAS,cAAc,mBAAmB;AACnD,SAAS,uBAAuB;AAMzB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAM;AAAA,MACN,aAAY;AAAA,MACZ,MAAK;AAAA,MACL;AAAA,MACA,QACE,oBAAC,UAAO,SAAQ,aAAY,SAAS,SAAS,oBAE9C;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAU;AAAA,UAET,kBAAQ,IAAI,CAAC,WACZ;AAAA,YAAC;AAAA;AAAA,cAEC,OAAM;AAAA,cACN,UAAU,aAAa;AAAA,cACvB,UAAU,aAAa,QAAQ,aAAa;AAAA,cAC5C,WAAU;AAAA,cACV,SAAS,MAAM;AACb,oBAAI,SAAU;AAEd,qBAAK,OAAO,MAAM,EAAE,KAAK,CAAC,SAAS;AACjC,sBAAI,KAAM,SAAQ;AAAA,gBACpB,CAAC;AAAA,cACH;AAAA,cAEA;AAAA,oCAAC,mBAAgB,QAAgB;AAAA,gBACjC,qBAAC,UAAK,WAAU,uBACd;AAAA,sCAAC,UAAK,WAAU,kDACb,uBAAa,MAAM,GACtB;AAAA,kBACA,oBAAC,UAAK,WAAU,mDACb,sBAAY,MAAM,GACrB;AAAA,mBACF;AAAA;AAAA;AAAA,YArBK;AAAA,UAsBP,CACD;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/admin/newsletters/layout-schematic.js

@@ -0,0 +1,46 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const line = "h-1 rounded-full bg-[var(--border-default)]";
+const strong = "h-2 rounded-full bg-[var(--text-tertiary)]";
+function LayoutSchematic({ layout }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      className: "flex h-28 w-full flex-col gap-2 rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-subtle)] p-3",
+      children: [
+        layout === "plain" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: `${strong} w-1/2` }),
+          /* @__PURE__ */ jsx("div", { className: `${line} w-full` }),
+          /* @__PURE__ */ jsx("div", { className: `${line} w-full` }),
+          /* @__PURE__ */ jsx("div", { className: `${line} w-5/6` }),
+          /* @__PURE__ */ jsx("div", { className: `${line} w-2/3` })
+        ] }),
+        layout === "announcement" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "h-8 w-full rounded-lg bg-[var(--border-default)]" }),
+          /* @__PURE__ */ jsx("div", { className: `${strong} w-2/3` }),
+          /* @__PURE__ */ jsx("div", { className: `${line} w-full` }),
+          /* @__PURE__ */ jsx("div", { className: `${line} w-4/5` }),
+          /* @__PURE__ */ jsx("div", { className: "mt-auto h-3 w-1/3 rounded-full bg-[var(--text-tertiary)]" })
+        ] }),
+        layout === "digest" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: `${line} w-3/4` }),
+          [0, 1, 2].map((row) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex flex-col gap-1 border-t border-[var(--border-subtle)] pt-2",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: `${strong} w-2/5` }),
+                /* @__PURE__ */ jsx("div", { className: `${line} w-full` })
+              ]
+            },
+            row
+          ))
+        ] })
+      ]
+    }
+  );
+}
+export {
+  LayoutSchematic
+};
+//# sourceMappingURL=layout-schematic.js.map

package/dist/admin/newsletters/layout-schematic.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/layout-schematic.tsx"],"sourcesContent":["import type { NewsletterLayout } from '@withpotter/lib/admin-newsletters-api';\n\nconst line = 'h-1 rounded-full bg-[var(--border-default)]';\nconst strong = 'h-2 rounded-full bg-[var(--text-tertiary)]';\n\n/** A flat sketch of where each layout puts things. Lines and blocks only. */\nexport function LayoutSchematic({ layout }: { layout: NewsletterLayout }) {\n  return (\n    <div\n      aria-hidden\n      className=\"flex h-28 w-full flex-col gap-2 rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-subtle)] p-3\"\n    >\n      {layout === 'plain' && (\n        <>\n          <div className={`${strong} w-1/2`} />\n          <div className={`${line} w-full`} />\n          <div className={`${line} w-full`} />\n          <div className={`${line} w-5/6`} />\n          <div className={`${line} w-2/3`} />\n        </>\n      )}\n      {layout === 'announcement' && (\n        <>\n          <div className=\"h-8 w-full rounded-lg bg-[var(--border-default)]\" />\n          <div className={`${strong} w-2/3`} />\n          <div className={`${line} w-full`} />\n          <div className={`${line} w-4/5`} />\n          <div className=\"mt-auto h-3 w-1/3 rounded-full bg-[var(--text-tertiary)]\" />\n        </>\n      )}\n      {layout === 'digest' && (\n        <>\n          <div className={`${line} w-3/4`} />\n          {[0, 1, 2].map((row) => (\n            <div\n              key={row}\n              className=\"flex flex-col gap-1 border-t border-[var(--border-subtle)] pt-2\"\n            >\n              <div className={`${strong} w-2/5`} />\n              <div className={`${line} w-full`} />\n            </div>\n          ))}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AAaQ,mBACE,KADF;AAXR,MAAM,OAAO;AACb,MAAM,SAAS;AAGR,SAAS,gBAAgB,EAAE,OAAO,GAAiC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAU;AAAA,MAET;AAAA,mBAAW,WACV,iCACE;AAAA,8BAAC,SAAI,WAAW,GAAG,MAAM,UAAU;AAAA,UACnC,oBAAC,SAAI,WAAW,GAAG,IAAI,WAAW;AAAA,UAClC,oBAAC,SAAI,WAAW,GAAG,IAAI,WAAW;AAAA,UAClC,oBAAC,SAAI,WAAW,GAAG,IAAI,UAAU;AAAA,UACjC,oBAAC,SAAI,WAAW,GAAG,IAAI,UAAU;AAAA,WACnC;AAAA,QAED,WAAW,kBACV,iCACE;AAAA,8BAAC,SAAI,WAAU,oDAAmD;AAAA,UAClE,oBAAC,SAAI,WAAW,GAAG,MAAM,UAAU;AAAA,UACnC,oBAAC,SAAI,WAAW,GAAG,IAAI,WAAW;AAAA,UAClC,oBAAC,SAAI,WAAW,GAAG,IAAI,UAAU;AAAA,UACjC,oBAAC,SAAI,WAAU,4DAA2D;AAAA,WAC5E;AAAA,QAED,WAAW,YACV,iCACE;AAAA,8BAAC,SAAI,WAAW,GAAG,IAAI,UAAU;AAAA,UAChC,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,QACd;AAAA,YAAC;AAAA;AAAA,cAEC,WAAU;AAAA,cAEV;AAAA,oCAAC,SAAI,WAAW,GAAG,MAAM,UAAU;AAAA,gBACnC,oBAAC,SAAI,WAAW,GAAG,IAAI,WAAW;AAAA;AAAA;AAAA,YAJ7B;AAAA,UAKP,CACD;AAAA,WACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

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

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef } from "react";
+import { Bold, Heading2, Italic, Link2, List } from "lucide-react";
+import {
+  AutoGrowTextarea,
+  Button,
+  DropdownMenu,
+  Field,
+  Tooltip,
+  inputBase
+} from "@withpotter/ui-kit";
+import {
+  applyMarkdown,
+  insertAt
+} from "./markdown-insert";
+const TOOLS = [
+  { action: "heading", label: "Heading", icon: Heading2 },
+  { action: "bold", label: "Bold", icon: Bold },
+  { action: "italic", label: "Italic", icon: Italic },
+  { action: "link", label: "Link", icon: Link2 },
+  { action: "bullet", label: "Bullet", icon: List }
+];
+const MERGE_FIELDS = ["{{firstName}}", "{{businessName}}"];
+function MarkdownField({
+  label,
+  value,
+  disabled,
+  onChange
+}) {
+  const id = useId();
+  const ref = useRef(null);
+  const edit = (apply) => {
+    const el = ref.current;
+    if (!el) return;
+    const next = apply({
+      value,
+      start: el.selectionStart ?? value.length,
+      end: el.selectionEnd ?? value.length
+    });
+    onChange(next.value);
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(next.start, next.end);
+    });
+  };
+  return /* @__PURE__ */ jsxs(Field, { label, htmlFor: id, children: [
+    !disabled && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "toolbar",
+        "aria-label": `${label} formatting`,
+        className: "mb-2 flex flex-wrap items-center gap-1",
+        children: [
+          TOOLS.map(({ action, label: name, icon: Icon }) => /* @__PURE__ */ jsx(Tooltip, { label: name, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "icon",
+              variant: "ghost",
+              "aria-label": name,
+              onClick: () => edit((sel) => applyMarkdown(sel, action)),
+              children: /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": true })
+            }
+          ) }, action)),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto", children: /* @__PURE__ */ jsx(
+            DropdownMenu,
+            {
+              label: "Insert",
+              items: MERGE_FIELDS,
+              onSelect: (field) => edit((sel) => insertAt(sel, field))
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${inputBase} focus-within:border-brand-500 focus-within:ring-1 focus-within:ring-brand-500`,
+        children: /* @__PURE__ */ jsx(
+          AutoGrowTextarea,
+          {
+            id,
+            ref,
+            value,
+            disabled,
+            onChange: (e) => onChange(e.target.value),
+            className: "block min-h-20 w-full bg-transparent outline-none disabled:opacity-60"
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  MarkdownField
+};
+//# sourceMappingURL=markdown-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/markdown-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useRef } from 'react';\nimport { Bold, Heading2, Italic, Link2, List } from 'lucide-react';\nimport {\n  AutoGrowTextarea,\n  Button,\n  DropdownMenu,\n  Field,\n  Tooltip,\n  inputBase,\n} from '@withpotter/ui-kit';\nimport {\n  applyMarkdown,\n  insertAt,\n  type MarkdownAction,\n  type Selection,\n} from './markdown-insert';\n\nconst TOOLS: Array<{\n  action: MarkdownAction;\n  label: string;\n  icon: typeof Bold;\n}> = [\n  { action: 'heading', label: 'Heading', icon: Heading2 },\n  { action: 'bold', label: 'Bold', icon: Bold },\n  { action: 'italic', label: 'Italic', icon: Italic },\n  { action: 'link', label: 'Link', icon: Link2 },\n  { action: 'bullet', label: 'Bullet', icon: List },\n];\n\n/** The merge fields the server fills in for each recipient. */\nconst MERGE_FIELDS = ['{{firstName}}', '{{businessName}}'];\n\n/**\n * A plain textarea that grows with its text. The toolbar writes the markdown\n * the server understands at the cursor; nothing is rendered here.\n */\nexport function MarkdownField({\n  label,\n  value,\n  disabled,\n  onChange,\n}: {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  onChange: (value: string) => void;\n}) {\n  const id = useId();\n  const ref = useRef<HTMLTextAreaElement | null>(null);\n  const edit = (apply: (selection: Selection) => Selection) => {\n    const el = ref.current;\n\n    if (!el) return;\n\n    const next = apply({\n      value,\n      start: el.selectionStart ?? value.length,\n      end: el.selectionEnd ?? value.length,\n    });\n\n    onChange(next.value);\n    // After React has written the new value, put the selection back.\n    requestAnimationFrame(() => {\n      el.focus();\n      el.setSelectionRange(next.start, next.end);\n    });\n  };\n\n  return (\n    <Field label={label} htmlFor={id}>\n      {!disabled && (\n        <div\n          role=\"toolbar\"\n          aria-label={`${label} formatting`}\n          className=\"mb-2 flex flex-wrap items-center gap-1\"\n        >\n          {TOOLS.map(({ action, label: name, icon: Icon }) => (\n            <Tooltip key={action} label={name}>\n              <Button\n                size=\"icon\"\n                variant=\"ghost\"\n                aria-label={name}\n                onClick={() => edit((sel) => applyMarkdown(sel, action))}\n              >\n                <Icon className=\"size-4\" aria-hidden />\n              </Button>\n            </Tooltip>\n          ))}\n          <span className=\"ml-auto\">\n            <DropdownMenu\n              label=\"Insert\"\n              items={MERGE_FIELDS}\n              onSelect={(field) => edit((sel) => insertAt(sel, field))}\n            />\n          </span>\n        </div>\n      )}\n      {/* The frame carries the field's edge, so the textarea inside can be\n          exactly as tall as its text. */}\n      <div\n        className={`${inputBase} focus-within:border-brand-500 focus-within:ring-1 focus-within:ring-brand-500`}\n      >\n        <AutoGrowTextarea\n          id={id}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          onChange={(e) => onChange(e.target.value)}\n          className=\"block min-h-20 w-full bg-transparent outline-none disabled:opacity-60\"\n        />\n      </div>\n    </Field>\n  );\n}\n"],"mappings":";AAyEQ,SAaQ,KAbR;AAvER,SAAS,OAAO,cAAc;AAC9B,SAAS,MAAM,UAAU,QAAQ,OAAO,YAAY;AACpD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,MAAM,QAID;AAAA,EACH,EAAE,QAAQ,WAAW,OAAO,WAAW,MAAM,SAAS;AAAA,EACtD,EAAE,QAAQ,QAAQ,OAAO,QAAQ,MAAM,KAAK;AAAA,EAC5C,EAAE,QAAQ,UAAU,OAAO,UAAU,MAAM,OAAO;AAAA,EAClD,EAAE,QAAQ,QAAQ,OAAO,QAAQ,MAAM,MAAM;AAAA,EAC7C,EAAE,QAAQ,UAAU,OAAO,UAAU,MAAM,KAAK;AAClD;AAGA,MAAM,eAAe,CAAC,iBAAiB,kBAAkB;AAMlD,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,KAAK,MAAM;AACjB,QAAM,MAAM,OAAmC,IAAI;AACnD,QAAM,OAAO,CAAC,UAA+C;AAC3D,UAAM,KAAK,IAAI;AAEf,QAAI,CAAC,GAAI;AAET,UAAM,OAAO,MAAM;AAAA,MACjB;AAAA,MACA,OAAO,GAAG,kBAAkB,MAAM;AAAA,MAClC,KAAK,GAAG,gBAAgB,MAAM;AAAA,IAChC,CAAC;AAED,aAAS,KAAK,KAAK;AAEnB,0BAAsB,MAAM;AAC1B,SAAG,MAAM;AACT,SAAG,kBAAkB,KAAK,OAAO,KAAK,GAAG;AAAA,IAC3C,CAAC;AAAA,EACH;AAEA,SACE,qBAAC,SAAM,OAAc,SAAS,IAC3B;AAAA,KAAC,YACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY,GAAG,KAAK;AAAA,QACpB,WAAU;AAAA,QAET;AAAA,gBAAM,IAAI,CAAC,EAAE,QAAQ,OAAO,MAAM,MAAM,KAAK,MAC5C,oBAAC,WAAqB,OAAO,MAC3B;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,cAAY;AAAA,cACZ,SAAS,MAAM,KAAK,CAAC,QAAQ,cAAc,KAAK,MAAM,CAAC;AAAA,cAEvD,8BAAC,QAAK,WAAU,UAAS,eAAW,MAAC;AAAA;AAAA,UACvC,KARY,MASd,CACD;AAAA,UACD,oBAAC,UAAK,WAAU,WACd;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU,CAAC,UAAU,KAAK,CAAC,QAAQ,SAAS,KAAK,KAAK,CAAC;AAAA;AAAA,UACzD,GACF;AAAA;AAAA;AAAA,IACF;AAAA,IAIF;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,SAAS;AAAA,QAEvB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,YACxC,WAAU;AAAA;AAAA,QACZ;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/newsletters/markdown-insert.js

@@ -0,0 +1,45 @@
+const wrap = ({ value, start, end }, before, after, placeholder) => {
+  const chosen = value.slice(start, end) || placeholder;
+  const next = `${value.slice(0, start)}${before}${chosen}${after}${value.slice(end)}`;
+  return {
+    value: next,
+    start: start + before.length,
+    end: start + before.length + chosen.length
+  };
+};
+const prefixLine = (sel, prefix) => {
+  const lineStart = sel.value.lastIndexOf("\n", sel.start - 1) + 1;
+  const next = `${sel.value.slice(0, lineStart)}${prefix}${sel.value.slice(lineStart)}`;
+  return {
+    value: next,
+    start: sel.start + prefix.length,
+    end: sel.end + prefix.length
+  };
+};
+function applyMarkdown(sel, action) {
+  switch (action) {
+    case "heading":
+      return prefixLine(sel, "## ");
+    case "bullet":
+      return prefixLine(sel, "- ");
+    case "bold":
+      return wrap(sel, "**", "**", "bold text");
+    case "italic":
+      return wrap(sel, "*", "*", "italic text");
+    case "link":
+      return wrap(sel, "[", "](https://)", "link text");
+  }
+}
+function insertAt(sel, text) {
+  const at = sel.start + text.length;
+  return {
+    value: `${sel.value.slice(0, sel.start)}${text}${sel.value.slice(sel.end)}`,
+    start: at,
+    end: at
+  };
+}
+export {
+  applyMarkdown,
+  insertAt
+};
+//# sourceMappingURL=markdown-insert.js.map

package/dist/admin/newsletters/markdown-insert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/markdown-insert.ts"],"sourcesContent":["/** A textarea's value and where its selection sits. */\nexport interface Selection {\n  value: string;\n  start: number;\n  end: number;\n}\n\nexport type MarkdownAction = 'heading' | 'bold' | 'italic' | 'link' | 'bullet';\n\nconst wrap = (\n  { value, start, end }: Selection,\n  before: string,\n  after: string,\n  placeholder: string,\n): Selection => {\n  const chosen = value.slice(start, end) || placeholder;\n  const next = `${value.slice(0, start)}${before}${chosen}${after}${value.slice(end)}`;\n\n  return {\n    value: next,\n    start: start + before.length,\n    end: start + before.length + chosen.length,\n  };\n};\n\n/** Prefix the line the selection starts on, e.g. with `## ` or `- `. */\nconst prefixLine = (sel: Selection, prefix: string): Selection => {\n  const lineStart = sel.value.lastIndexOf('\\n', sel.start - 1) + 1;\n  const next = `${sel.value.slice(0, lineStart)}${prefix}${sel.value.slice(lineStart)}`;\n\n  return {\n    value: next,\n    start: sel.start + prefix.length,\n    end: sel.end + prefix.length,\n  };\n};\n\n/** Apply one toolbar button to the text, returning the new selection too. */\nexport function applyMarkdown(sel: Selection, action: MarkdownAction) {\n  switch (action) {\n    case 'heading':\n      return prefixLine(sel, '## ');\n    case 'bullet':\n      return prefixLine(sel, '- ');\n    case 'bold':\n      return wrap(sel, '**', '**', 'bold text');\n    case 'italic':\n      return wrap(sel, '*', '*', 'italic text');\n    case 'link':\n      return wrap(sel, '[', '](https://)', 'link text');\n  }\n}\n\n/** Put a merge field (or any text) where the cursor is. */\nexport function insertAt(sel: Selection, text: string): Selection {\n  const at = sel.start + text.length;\n\n  return {\n    value: `${sel.value.slice(0, sel.start)}${text}${sel.value.slice(sel.end)}`,\n    start: at,\n    end: at,\n  };\n}\n"],"mappings":"AASA,MAAM,OAAO,CACX,EAAE,OAAO,OAAO,IAAI,GACpB,QACA,OACA,gBACc;AACd,QAAM,SAAS,MAAM,MAAM,OAAO,GAAG,KAAK;AAC1C,QAAM,OAAO,GAAG,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,MAAM,GAAG,CAAC;AAElF,SAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO,QAAQ,OAAO;AAAA,IACtB,KAAK,QAAQ,OAAO,SAAS,OAAO;AAAA,EACtC;AACF;AAGA,MAAM,aAAa,CAAC,KAAgB,WAA8B;AAChE,QAAM,YAAY,IAAI,MAAM,YAAY,MAAM,IAAI,QAAQ,CAAC,IAAI;AAC/D,QAAM,OAAO,GAAG,IAAI,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,MAAM,GAAG,IAAI,MAAM,MAAM,SAAS,CAAC;AAEnF,SAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO,IAAI,QAAQ,OAAO;AAAA,IAC1B,KAAK,IAAI,MAAM,OAAO;AAAA,EACxB;AACF;AAGO,SAAS,cAAc,KAAgB,QAAwB;AACpE,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,aAAO,WAAW,KAAK,KAAK;AAAA,IAC9B,KAAK;AACH,aAAO,WAAW,KAAK,IAAI;AAAA,IAC7B,KAAK;AACH,aAAO,KAAK,KAAK,MAAM,MAAM,WAAW;AAAA,IAC1C,KAAK;AACH,aAAO,KAAK,KAAK,KAAK,KAAK,aAAa;AAAA,IAC1C,KAAK;AACH,aAAO,KAAK,KAAK,KAAK,eAAe,WAAW;AAAA,EACpD;AACF;AAGO,SAAS,SAAS,KAAgB,MAAyB;AAChE,QAAM,KAAK,IAAI,QAAQ,KAAK;AAE5B,SAAO;AAAA,IACL,OAAO,GAAG,IAAI,MAAM,MAAM,GAAG,IAAI,KAAK,CAAC,GAAG,IAAI,GAAG,IAAI,MAAM,MAAM,IAAI,GAAG,CAAC;AAAA,IACzE,OAAO;AAAA,IACP,KAAK;AAAA,EACP;AACF;","names":[]}

package/dist/admin/newsletters/newsletter-row.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { OverflowItem, OverflowMenu, TableRow } from "@withpotter/ui-kit";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import list from "../_ui/list-card.module.css";
+import rows from "../accounts/rows.module.css";
+import { When } from "../audit/when";
+import { LAYOUT_LABEL, STATUS, hrefOf, recipientsOf, titleOf } from "./labels";
+function NewsletterRow({
+  newsletter,
+  canManage,
+  actions
+}) {
+  const router = useRouter();
+  const href = hrefOf(newsletter.id);
+  const title = titleOf(newsletter);
+  const status = STATUS[newsletter.status];
+  const isDraft = newsletter.status === "draft";
+  const open = () => router.push(href);
+  return /* @__PURE__ */ jsxs(TableRow, { onClick: open, children: [
+    /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: rows.identityText, children: /* @__PURE__ */ jsx(
+      Link,
+      {
+        href,
+        className: rows.primary,
+        onClick: (e) => e.stopPropagation(),
+        children: title
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx("td", { className: `${list.nowrap} ${list.muted}`, children: LAYOUT_LABEL[newsletter.layout] }),
+    /* @__PURE__ */ jsx("td", { className: isDraft ? `${list.num} ${list.dash}` : list.num, children: recipientsOf(newsletter) }),
+    /* @__PURE__ */ jsx("td", { className: list.nowrap, children: /* @__PURE__ */ jsx(
+      StatusBadge,
+      {
+        status: status.key,
+        label: status.label,
+        neutral: status.quiet
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("td", { className: `${list.nowrap} ${list.muted}`, children: [
+      /* @__PURE__ */ jsx(When, { iso: newsletter.updatedAt }),
+      newsletter.updatedBy && ` by ${newsletter.updatedBy.name}`
+    ] }),
+    /* @__PURE__ */ jsx("td", { className: rows.menuCell, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(OverflowMenu, { label: `Actions for ${title}`, children: [
+      /* @__PURE__ */ jsx(OverflowItem, { onClick: open, children: isDraft && canManage ? "Edit" : "View" }),
+      canManage && /* @__PURE__ */ jsx(
+        OverflowItem,
+        {
+          onClick: () => void actions.duplicateAsDraft(newsletter.id),
+          children: isDraft ? "Duplicate" : "Duplicate as draft"
+        }
+      ),
+      canManage && isDraft && /* @__PURE__ */ jsx(
+        OverflowItem,
+        {
+          destructive: true,
+          onClick: () => void actions.deleteDraft(newsletter),
+          children: "Delete"
+        }
+      )
+    ] }) })
+  ] });
+}
+export {
+  NewsletterRow
+};
+//# sourceMappingURL=newsletter-row.js.map

package/dist/admin/newsletters/newsletter-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/newsletter-row.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { useRouter } from 'next/navigation';\nimport { OverflowItem, OverflowMenu, TableRow } from '@withpotter/ui-kit';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport type { Newsletter } from '@withpotter/lib/admin-newsletters-api';\nimport list from '../_ui/list-card.module.css';\nimport rows from '../accounts/rows.module.css';\nimport { When } from '../audit/when';\nimport { LAYOUT_LABEL, STATUS, hrefOf, recipientsOf, titleOf } from './labels';\nimport type { NewsletterActions } from './use-newsletter-actions';\n\n/** One newsletter in the list. A draft opens to edit; anything else to view. */\nexport function NewsletterRow({\n  newsletter,\n  canManage,\n  actions,\n}: {\n  newsletter: Newsletter;\n  canManage: boolean;\n  actions: NewsletterActions;\n}) {\n  const router = useRouter();\n  const href = hrefOf(newsletter.id);\n  const title = titleOf(newsletter);\n  const status = STATUS[newsletter.status];\n  const isDraft = newsletter.status === 'draft';\n  const open = () => router.push(href);\n\n  return (\n    <TableRow onClick={open}>\n      <td>\n        <span className={rows.identityText}>\n          <Link\n            href={href}\n            className={rows.primary}\n            onClick={(e) => e.stopPropagation()}\n          >\n            {title}\n          </Link>\n        </span>\n      </td>\n      <td className={`${list.nowrap} ${list.muted}`}>\n        {LAYOUT_LABEL[newsletter.layout]}\n      </td>\n      <td className={isDraft ? `${list.num} ${list.dash}` : list.num}>\n        {recipientsOf(newsletter)}\n      </td>\n      <td className={list.nowrap}>\n        <StatusBadge\n          status={status.key}\n          label={status.label}\n          neutral={status.quiet}\n        />\n      </td>\n      <td className={`${list.nowrap} ${list.muted}`}>\n        <When iso={newsletter.updatedAt} />\n        {newsletter.updatedBy && ` by ${newsletter.updatedBy.name}`}\n      </td>\n      <td className={rows.menuCell} onClick={(e) => e.stopPropagation()}>\n        <OverflowMenu label={`Actions for ${title}`}>\n          <OverflowItem onClick={open}>\n            {isDraft && canManage ? 'Edit' : 'View'}\n          </OverflowItem>\n          {canManage && (\n            <OverflowItem\n              onClick={() => void actions.duplicateAsDraft(newsletter.id)}\n            >\n              {isDraft ? 'Duplicate' : 'Duplicate as draft'}\n            </OverflowItem>\n          )}\n          {canManage && isDraft && (\n            <OverflowItem\n              destructive\n              onClick={() => void actions.deleteDraft(newsletter)}\n            >\n              Delete\n            </OverflowItem>\n          )}\n        </OverflowMenu>\n      </td>\n    </TableRow>\n  );\n}\n"],"mappings":";AAkCU,cAsBJ,YAtBI;AAhCV,OAAO,UAAU;AACjB,SAAS,iBAAiB;AAC1B,SAAS,cAAc,cAAc,gBAAgB;AACrD,SAAS,mBAAmB;AAE5B,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,SAAS,YAAY;AACrB,SAAS,cAAc,QAAQ,QAAQ,cAAc,eAAe;AAI7D,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,SAAS,UAAU;AACzB,QAAM,OAAO,OAAO,WAAW,EAAE;AACjC,QAAM,QAAQ,QAAQ,UAAU;AAChC,QAAM,SAAS,OAAO,WAAW,MAAM;AACvC,QAAM,UAAU,WAAW,WAAW;AACtC,QAAM,OAAO,MAAM,OAAO,KAAK,IAAI;AAEnC,SACE,qBAAC,YAAS,SAAS,MACjB;AAAA,wBAAC,QACC,8BAAC,UAAK,WAAW,KAAK,cACpB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK;AAAA,QAChB,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAEjC;AAAA;AAAA,IACH,GACF,GACF;AAAA,IACA,oBAAC,QAAG,WAAW,GAAG,KAAK,MAAM,IAAI,KAAK,KAAK,IACxC,uBAAa,WAAW,MAAM,GACjC;AAAA,IACA,oBAAC,QAAG,WAAW,UAAU,GAAG,KAAK,GAAG,IAAI,KAAK,IAAI,KAAK,KAAK,KACxD,uBAAa,UAAU,GAC1B;AAAA,IACA,oBAAC,QAAG,WAAW,KAAK,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,OAAO;AAAA,QACf,OAAO,OAAO;AAAA,QACd,SAAS,OAAO;AAAA;AAAA,IAClB,GACF;AAAA,IACA,qBAAC,QAAG,WAAW,GAAG,KAAK,MAAM,IAAI,KAAK,KAAK,IACzC;AAAA,0BAAC,QAAK,KAAK,WAAW,WAAW;AAAA,MAChC,WAAW,aAAa,OAAO,WAAW,UAAU,IAAI;AAAA,OAC3D;AAAA,IACA,oBAAC,QAAG,WAAW,KAAK,UAAU,SAAS,CAAC,MAAM,EAAE,gBAAgB,GAC9D,+BAAC,gBAAa,OAAO,eAAe,KAAK,IACvC;AAAA,0BAAC,gBAAa,SAAS,MACpB,qBAAW,YAAY,SAAS,QACnC;AAAA,MACC,aACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,MAAM,KAAK,QAAQ,iBAAiB,WAAW,EAAE;AAAA,UAEzD,oBAAU,cAAc;AAAA;AAAA,MAC3B;AAAA,MAED,aAAa,WACZ;AAAA,QAAC;AAAA;AAAA,UACC,aAAW;AAAA,UACX,SAAS,MAAM,KAAK,QAAQ,YAAY,UAAU;AAAA,UACnD;AAAA;AAAA,MAED;AAAA,OAEJ,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/newsletters/newsletter-screen.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { AdmLoading } from "../_ui";
+import { LoadFailed } from "../audit/load-failed";
+import { Composer } from "./composer";
+import { SentView } from "./sent-view";
+import { useNewsletter } from "./use-newsletters";
+function NewsletterScreen({ id }) {
+  const { data, isLoading, isError, refetch } = useNewsletter(id);
+  if (isError && !data) {
+    return /* @__PURE__ */ jsx(
+      LoadFailed,
+      {
+        message: "This newsletter could not be loaded.",
+        onRetry: () => void refetch()
+      }
+    );
+  }
+  if (isLoading || !data) return /* @__PURE__ */ jsx(AdmLoading, { label: "Loading newsletter\u2026" });
+  return data.status === "draft" ? /* @__PURE__ */ jsx(Composer, { newsletter: data }) : /* @__PURE__ */ jsx(SentView, { newsletter: data });
+}
+export {
+  NewsletterScreen
+};
+//# sourceMappingURL=newsletter-screen.js.map

package/dist/admin/newsletters/newsletter-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/newsletter-screen.tsx"],"sourcesContent":["'use client';\n\nimport { AdmLoading } from '../_ui';\nimport { LoadFailed } from '../audit/load-failed';\nimport { Composer } from './composer';\nimport { SentView } from './sent-view';\nimport { useNewsletter } from './use-newsletters';\n\n/** One newsletter: the composer while it is a draft, the sent view after. */\nexport function NewsletterScreen({ id }: { id: string }) {\n  const { data, isLoading, isError, refetch } = useNewsletter(id);\n\n  if (isError && !data) {\n    return (\n      <LoadFailed\n        message=\"This newsletter could not be loaded.\"\n        onRetry={() => void refetch()}\n      />\n    );\n  }\n\n  if (isLoading || !data) return <AdmLoading label=\"Loading newsletter…\" />;\n\n  return data.status === 'draft' ? (\n    <Composer newsletter={data} />\n  ) : (\n    <SentView newsletter={data} />\n  );\n}\n"],"mappings":";AAcM;AAZN,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAGvB,SAAS,iBAAiB,EAAE,GAAG,GAAmB;AACvD,QAAM,EAAE,MAAM,WAAW,SAAS,QAAQ,IAAI,cAAc,EAAE;AAE9D,MAAI,WAAW,CAAC,MAAM;AACpB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM,KAAK,QAAQ;AAAA;AAAA,IAC9B;AAAA,EAEJ;AAEA,MAAI,aAAa,CAAC,KAAM,QAAO,oBAAC,cAAW,OAAM,4BAAsB;AAEvE,SAAO,KAAK,WAAW,UACrB,oBAAC,YAAS,YAAY,MAAM,IAE5B,oBAAC,YAAS,YAAY,MAAM;AAEhC;","names":[]}

package/dist/admin/newsletters/newsletters-list.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Button, FilterChip, Th } from "@withpotter/ui-kit";
+import { EmptyState, PageHeader } from "../_ui";
+import { ListCard, ListPager } from "../_ui/list-card";
+import { LayoutPicker } from "./layout-picker";
+import { NewsletterRow } from "./newsletter-row";
+import { NewsletterTabs } from "./section-tabs";
+import { useNewsletterActions } from "./use-newsletter-actions";
+import {
+  PAGE_SIZE,
+  useNewsletterAccess,
+  useNewsletterList
+} from "./use-newsletters";
+const FILTERS = [
+  { value: "", label: "All", title: "All newsletters" },
+  { value: "draft", label: "Drafts", title: "Drafts" },
+  { value: "sent", label: "Sent", title: "Sent" }
+];
+const COLUMNS = 6;
+function NewslettersList() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const search = useSearchParams();
+  const filter = FILTERS.find((f) => f.value === search.get("status")) ?? FILTERS[0];
+  const [page, setPage] = useState(1);
+  const [picking, setPicking] = useState(false);
+  const { canManage } = useNewsletterAccess();
+  const actions = useNewsletterActions();
+  const { data, isLoading, isError, refetch } = useNewsletterList(
+    filter.value || void 0,
+    page
+  );
+  const setFilter = (value) => {
+    setPage(1);
+    router.replace(value ? `${pathname}?status=${value}` : pathname, {
+      scroll: false
+    });
+  };
+  const items = data?.items ?? [];
+  const total = data?.total ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  const create = () => setPicking(true);
+  const empty = /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: COLUMNS, className: "!p-0", children: filter.value ? /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      title: "Nothing matches",
+      action: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "secondary",
+          onClick: () => setFilter(""),
+          children: "Clear filter"
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      title: "No newsletters yet",
+      action: canManage && /* @__PURE__ */ jsx(Button, { size: "sm", onClick: create, children: "New newsletter" })
+    }
+  ) }) });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: "Newsletters",
+        actions: canManage && /* @__PURE__ */ jsx(Button, { onClick: create, children: "New newsletter" })
+      }
+    ),
+    /* @__PURE__ */ jsx(NewsletterTabs, { active: "campaigns" }),
+    /* @__PURE__ */ jsx(
+      ListCard,
+      {
+        title: filter.title,
+        count: data ? total : void 0,
+        columns: COLUMNS,
+        minWidth: 820,
+        isLoading,
+        isError,
+        onRetry: () => void refetch(),
+        errorTitle: "Failed to load newsletters.",
+        emptyTitle: "No newsletters yet",
+        controls: /* @__PURE__ */ jsx(
+          FilterChip,
+          {
+            label: "Status",
+            value: filter.value,
+            onChange: setFilter,
+            options: FILTERS.map(({ value, label }) => ({ value, label }))
+          }
+        ),
+        footer: totalPages > 1 && /* @__PURE__ */ jsx(
+          ListPager,
+          {
+            page,
+            totalPages,
+            total,
+            noun: "newsletters",
+            onPage: setPage
+          }
+        ),
+        head: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx(Th, { children: "Subject" }),
+          /* @__PURE__ */ jsx(Th, { children: "Layout" }),
+          /* @__PURE__ */ jsx(Th, { align: "right", children: "Recipients" }),
+          /* @__PURE__ */ jsx(Th, { children: "Status" }),
+          /* @__PURE__ */ jsx(Th, { children: "Last edited" }),
+          /* @__PURE__ */ jsx(Th, { align: "right", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) })
+        ] }),
+        children: items.length === 0 ? empty : items.map((newsletter) => /* @__PURE__ */ jsx(
+          NewsletterRow,
+          {
+            newsletter,
+            canManage,
+            actions
+          },
+          newsletter.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LayoutPicker,
+      {
+        open: picking,
+        creating: actions.creating,
+        onClose: () => setPicking(false),
+        onPick: actions.createDraft
+      }
+    )
+  ] });
+}
+export {
+  NewslettersList
+};
+//# sourceMappingURL=newsletters-list.js.map