@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/newsletters/signature-preview.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { canPreview } from "./signature-values";
+import { useSignaturePreview } from "./use-signature-preview";
+const quiet = "text-sm text-[var(--text-tertiary)]";
+function SignaturePreview({ form }) {
+  const { data, isError, isFetching } = useSignaturePreview(form);
+  const ready = canPreview(form);
+  return /* @__PURE__ */ jsxs("section", { "aria-label": "Preview", className: "flex min-w-0 flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Preview" }),
+    !ready ? /* @__PURE__ */ jsx("p", { className: quiet, children: "Fill in a name to see the signature." }) : data ? /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        title: "Signature preview",
+        sandbox: "",
+        srcDoc: data.html,
+        "aria-busy": isFetching || void 0,
+        className: "h-72 w-full rounded-lg border border-[var(--border-subtle)] bg-white"
+      }
+    ) : !isError && /* @__PURE__ */ jsx("p", { className: quiet, children: "Loading preview" }),
+    ready && isError && /* @__PURE__ */ jsx("p", { className: quiet, children: "Preview unavailable" })
+  ] });
+}
+export {
+  SignaturePreview
+};
+//# sourceMappingURL=signature-preview.js.map

package/dist/admin/newsletters/signature-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/signature-preview.tsx"],"sourcesContent":["'use client';\n\nimport type { SignatureFields } from '@withpotter/lib/admin-signatures-api';\nimport { canPreview } from './signature-values';\nimport { useSignaturePreview } from './use-signature-preview';\n\nconst quiet = 'text-sm text-[var(--text-tertiary)]';\n\n/**\n * The signature as it will sit at the foot of an email, drawn by the server\n * in a frame that cannot run scripts. The ground is white in both themes,\n * because that is what the email is read on.\n */\nexport function SignaturePreview({ form }: { form: SignatureFields }) {\n  const { data, isError, isFetching } = useSignaturePreview(form);\n  const ready = canPreview(form);\n\n  return (\n    <section aria-label=\"Preview\" className=\"flex min-w-0 flex-col gap-2\">\n      <h3 className=\"text-sm font-medium text-[var(--text-secondary)]\">\n        Preview\n      </h3>\n      {!ready ? (\n        <p className={quiet}>Fill in a name to see the signature.</p>\n      ) : data ? (\n        <iframe\n          title=\"Signature preview\"\n          sandbox=\"\"\n          srcDoc={data.html}\n          aria-busy={isFetching || undefined}\n          className=\"h-72 w-full rounded-lg border border-[var(--border-subtle)] bg-white\"\n        />\n      ) : (\n        !isError && <p className={quiet}>Loading preview</p>\n      )}\n      {ready && isError && <p className={quiet}>Preview unavailable</p>}\n    </section>\n  );\n}\n"],"mappings":";AAkBI,SACE,KADF;AAfJ,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AAEpC,MAAM,QAAQ;AAOP,SAAS,iBAAiB,EAAE,KAAK,GAA8B;AACpE,QAAM,EAAE,MAAM,SAAS,WAAW,IAAI,oBAAoB,IAAI;AAC9D,QAAM,QAAQ,WAAW,IAAI;AAE7B,SACE,qBAAC,aAAQ,cAAW,WAAU,WAAU,+BACtC;AAAA,wBAAC,QAAG,WAAU,oDAAmD,qBAEjE;AAAA,IACC,CAAC,QACA,oBAAC,OAAE,WAAW,OAAO,kDAAoC,IACvD,OACF;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,QAAQ,KAAK;AAAA,QACb,aAAW,cAAc;AAAA,QACzB,WAAU;AAAA;AAAA,IACZ,IAEA,CAAC,WAAW,oBAAC,OAAE,WAAW,OAAO,6BAAe;AAAA,IAEjD,SAAS,WAAW,oBAAC,OAAE,WAAW,OAAO,iCAAmB;AAAA,KAC/D;AAEJ;","names":[]}

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

@@ -0,0 +1,54 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@withpotter/ui-kit";
+import { ImageThumb } from "./image-picker";
+import { isWebAddress } from "./image-upload";
+import { DEFAULT_CLOSING, rowLines } from "./signatures";
+function SignatureRow({
+  signature,
+  confirming,
+  deleting,
+  onEdit,
+  onAskDelete,
+  onCancelDelete,
+  onDelete
+}) {
+  const { primary, secondary } = rowLines(signature);
+  const logo = signature.logoUrl ?? "";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 py-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [
+        isWebAddress(logo) && /* @__PURE__ */ jsx(ImageThumb, { src: logo, shape: "small" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 text-sm", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate font-medium text-[var(--text-primary)]", children: primary }),
+          secondary && /* @__PURE__ */ jsx("p", { className: "truncate text-[var(--text-secondary)]", children: secondary }),
+          /* @__PURE__ */ jsx("p", { className: "truncate text-[var(--text-tertiary)]", children: signature.closing || DEFAULT_CLOSING })
+        ] })
+      ] }),
+      !confirming && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 gap-1", children: [
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onEdit, children: "Edit" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onAskDelete, children: "Delete" })
+      ] })
+    ] }),
+    confirming && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-secondary)]", children: "Delete this signature? Newsletters already using it keep it." }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onCancelDelete, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "danger",
+            loading: deleting,
+            onClick: onDelete,
+            children: "Delete"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  SignatureRow
+};
+//# sourceMappingURL=signature-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/signature-row.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@withpotter/ui-kit';\nimport type { Signature } from '@withpotter/lib/admin-signatures-api';\nimport { ImageThumb } from './image-picker';\nimport { isWebAddress } from './image-upload';\nimport { DEFAULT_CLOSING, rowLines } from './signatures';\n\n/**\n * One saved signature: what it is called, who signs, and how it closes.\n * Delete asks in the row itself, so no second dialog opens over this one.\n */\nexport function SignatureRow({\n  signature,\n  confirming,\n  deleting,\n  onEdit,\n  onAskDelete,\n  onCancelDelete,\n  onDelete,\n}: {\n  signature: Signature;\n  confirming: boolean;\n  deleting: boolean;\n  onEdit: () => void;\n  onAskDelete: () => void;\n  onCancelDelete: () => void;\n  onDelete: () => void;\n}) {\n  const { primary, secondary } = rowLines(signature);\n  const logo = signature.logoUrl ?? '';\n\n  return (\n    <div className=\"flex flex-col gap-2 py-3\">\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex min-w-0 items-start gap-3\">\n          {isWebAddress(logo) && <ImageThumb src={logo} shape=\"small\" />}\n          <div className=\"min-w-0 text-sm\">\n            <p className=\"truncate font-medium text-[var(--text-primary)]\">\n              {primary}\n            </p>\n            {secondary && (\n              <p className=\"truncate text-[var(--text-secondary)]\">\n                {secondary}\n              </p>\n            )}\n            <p className=\"truncate text-[var(--text-tertiary)]\">\n              {signature.closing || DEFAULT_CLOSING}\n            </p>\n          </div>\n        </div>\n        {!confirming && (\n          <div className=\"flex shrink-0 gap-1\">\n            <Button size=\"sm\" variant=\"ghost\" onClick={onEdit}>\n              Edit\n            </Button>\n            <Button size=\"sm\" variant=\"ghost\" onClick={onAskDelete}>\n              Delete\n            </Button>\n          </div>\n        )}\n      </div>\n      {confirming && (\n        <div className=\"flex flex-wrap items-center justify-between gap-2\">\n          <p className=\"text-sm text-[var(--text-secondary)]\">\n            Delete this signature? Newsletters already using it keep it.\n          </p>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\" variant=\"secondary\" onClick={onCancelDelete}>\n              Cancel\n            </Button>\n            <Button\n              size=\"sm\"\n              variant=\"danger\"\n              loading={deleting}\n              onClick={onDelete}\n            >\n              Delete\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAoCiC,cACvB,YADuB;AAlCjC,SAAS,cAAc;AAEvB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB,gBAAgB;AAMnC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,EAAE,SAAS,UAAU,IAAI,SAAS,SAAS;AACjD,QAAM,OAAO,UAAU,WAAW;AAElC,SACE,qBAAC,SAAI,WAAU,4BACb;AAAA,yBAAC,SAAI,WAAU,0CACb;AAAA,2BAAC,SAAI,WAAU,kCACZ;AAAA,qBAAa,IAAI,KAAK,oBAAC,cAAW,KAAK,MAAM,OAAM,SAAQ;AAAA,QAC5D,qBAAC,SAAI,WAAU,mBACb;AAAA,8BAAC,OAAE,WAAU,mDACV,mBACH;AAAA,UACC,aACC,oBAAC,OAAE,WAAU,yCACV,qBACH;AAAA,UAEF,oBAAC,OAAE,WAAU,wCACV,oBAAU,WAAW,iBACxB;AAAA,WACF;AAAA,SACF;AAAA,MACC,CAAC,cACA,qBAAC,SAAI,WAAU,uBACb;AAAA,4BAAC,UAAO,MAAK,MAAK,SAAQ,SAAQ,SAAS,QAAQ,kBAEnD;AAAA,QACA,oBAAC,UAAO,MAAK,MAAK,SAAQ,SAAQ,SAAS,aAAa,oBAExD;AAAA,SACF;AAAA,OAEJ;AAAA,IACC,cACC,qBAAC,SAAI,WAAU,qDACb;AAAA,0BAAC,OAAE,WAAU,wCAAuC,0EAEpD;AAAA,MACA,qBAAC,SAAI,WAAU,cACb;AAAA,4BAAC,UAAO,MAAK,MAAK,SAAQ,aAAY,SAAS,gBAAgB,oBAE/D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,SAAS;AAAA,YACT,SAAS;AAAA,YACV;AAAA;AAAA,QAED;AAAA,SACF;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/admin/newsletters/signature-values.js

@@ -0,0 +1,75 @@
+import { isWebAddress } from "./image-upload";
+import { DEFAULT_CLOSING } from "./signatures";
+const SIGNATURE_LIMITS = {
+  label: 120,
+  name: 120,
+  title: 120,
+  closing: 120,
+  email: 200,
+  linkLabel: 60
+};
+const KEYS = [
+  "label",
+  "name",
+  "title",
+  "closing",
+  "email",
+  "linkLabel",
+  "linkUrl",
+  "logoUrl",
+  "bannerUrl"
+];
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const NOT_WEB_ADDRESS = "The address must start with http:// or https://.";
+const each = (read) => {
+  const fields = {};
+  for (const key of KEYS) fields[key] = read(key);
+  return fields;
+};
+const emptySignatureForm = () => each(() => "");
+const formOf = (s) => each((key) => s[key] ?? "");
+const trimmed = (form) => each((key) => form[key].trim());
+function signatureErrors(form) {
+  const values = trimmed(form);
+  const errors = {};
+  for (const key of KEYS) {
+    const max = SIGNATURE_LIMITS[key];
+    if (max && values[key].length > max) {
+      errors[key] = `Keep it to ${max} characters.`;
+    }
+  }
+  if (!values.name) errors.name = "Add a name.";
+  if (values.email && !errors.email && !EMAIL.test(values.email)) {
+    errors.email = "Enter a valid email address.";
+  }
+  if (values.linkUrl && !isWebAddress(values.linkUrl)) {
+    errors.linkUrl = NOT_WEB_ADDRESS;
+  }
+  return errors;
+}
+function createInput(form) {
+  const values = trimmed(form);
+  const filled = KEYS.filter((key) => values[key] !== "");
+  return {
+    name: values.name,
+    ...Object.fromEntries(filled.map((key) => [key, values[key]]))
+  };
+}
+function updateInput(form) {
+  const values = trimmed(form);
+  return { ...values, closing: values.closing || DEFAULT_CLOSING };
+}
+const previewInput = updateInput;
+const canPreview = (form) => form.name.trim() !== "";
+export {
+  NOT_WEB_ADDRESS,
+  SIGNATURE_LIMITS,
+  canPreview,
+  createInput,
+  emptySignatureForm,
+  formOf,
+  previewInput,
+  signatureErrors,
+  updateInput
+};
+//# sourceMappingURL=signature-values.js.map

package/dist/admin/newsletters/signature-values.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/signature-values.ts"],"sourcesContent":["import type {\n  Signature,\n  SignatureFields,\n  SignatureInput,\n} from '@withpotter/lib/admin-signatures-api';\nimport { isWebAddress } from './image-upload';\nimport { DEFAULT_CLOSING } from './signatures';\n\n/** The longest each field may be, as the server enforces it. */\nexport const SIGNATURE_LIMITS: Partial<Record<keyof SignatureFields, number>> =\n  {\n    label: 120,\n    name: 120,\n    title: 120,\n    closing: 120,\n    email: 200,\n    linkLabel: 60,\n  };\n\nconst KEYS: Array<keyof SignatureFields> = [\n  'label',\n  'name',\n  'title',\n  'closing',\n  'email',\n  'linkLabel',\n  'linkUrl',\n  'logoUrl',\n  'bannerUrl',\n];\n\nconst EMAIL = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\nexport const NOT_WEB_ADDRESS =\n  'The address must start with http:// or https://.';\n\nconst each = (read: (key: keyof SignatureFields) => string) => {\n  const fields = {} as SignatureFields;\n\n  for (const key of KEYS) fields[key] = read(key);\n\n  return fields;\n};\n\nexport const emptySignatureForm = (): SignatureFields => each(() => '');\n\n/** A saved signature as form values: anything missing or null is empty. */\nexport const formOf = (s: Partial<Signature>): SignatureFields =>\n  each((key) => s[key] ?? '');\n\nconst trimmed = (form: SignatureFields) => each((key) => form[key].trim());\n\n/** One message per field that stops a save; empty when the form is fine. */\nexport function signatureErrors(form: SignatureFields) {\n  const values = trimmed(form);\n  const errors: Partial<Record<keyof SignatureFields, string>> = {};\n\n  for (const key of KEYS) {\n    const max = SIGNATURE_LIMITS[key];\n\n    if (max && values[key].length > max) {\n      errors[key] = `Keep it to ${max} characters.`;\n    }\n  }\n\n  if (!values.name) errors.name = 'Add a name.';\n\n  if (values.email && !errors.email && !EMAIL.test(values.email)) {\n    errors.email = 'Enter a valid email address.';\n  }\n\n  if (values.linkUrl && !isWebAddress(values.linkUrl)) {\n    errors.linkUrl = NOT_WEB_ADDRESS;\n  }\n\n  return errors;\n}\n\n/**\n * What a new signature sends: an empty field is left out, so the server\n * applies its own defaults (the closing line among them).\n */\nexport function createInput(form: SignatureFields): SignatureInput {\n  const values = trimmed(form);\n  const filled = KEYS.filter((key) => values[key] !== '');\n\n  return {\n    name: values.name,\n    ...Object.fromEntries(filled.map((key) => [key, values[key]])),\n  };\n}\n\n/**\n * What an edit sends: every field, so clearing one clears it. A cleared\n * closing goes back to the default, as it would on a new signature.\n */\nexport function updateInput(form: SignatureFields): SignatureFields {\n  const values = trimmed(form);\n\n  return { ...values, closing: values.closing || DEFAULT_CLOSING };\n}\n\n/** What the preview is asked to draw: the signature as a save would leave it. */\nexport const previewInput = updateInput;\n\n/** Nothing is drawn until there is someone signing. */\nexport const canPreview = (form: SignatureFields) => form.name.trim() !== '';\n"],"mappings":"AAKA,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAGzB,MAAM,mBACX;AAAA,EACE,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AACb;AAEF,MAAM,OAAqC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,QAAQ;AAEP,MAAM,kBACX;AAEF,MAAM,OAAO,CAAC,SAAiD;AAC7D,QAAM,SAAS,CAAC;AAEhB,aAAW,OAAO,KAAM,QAAO,GAAG,IAAI,KAAK,GAAG;AAE9C,SAAO;AACT;AAEO,MAAM,qBAAqB,MAAuB,KAAK,MAAM,EAAE;AAG/D,MAAM,SAAS,CAAC,MACrB,KAAK,CAAC,QAAQ,EAAE,GAAG,KAAK,EAAE;AAE5B,MAAM,UAAU,CAAC,SAA0B,KAAK,CAAC,QAAQ,KAAK,GAAG,EAAE,KAAK,CAAC;AAGlE,SAAS,gBAAgB,MAAuB;AACrD,QAAM,SAAS,QAAQ,IAAI;AAC3B,QAAM,SAAyD,CAAC;AAEhE,aAAW,OAAO,MAAM;AACtB,UAAM,MAAM,iBAAiB,GAAG;AAEhC,QAAI,OAAO,OAAO,GAAG,EAAE,SAAS,KAAK;AACnC,aAAO,GAAG,IAAI,cAAc,GAAG;AAAA,IACjC;AAAA,EACF;AAEA,MAAI,CAAC,OAAO,KAAM,QAAO,OAAO;AAEhC,MAAI,OAAO,SAAS,CAAC,OAAO,SAAS,CAAC,MAAM,KAAK,OAAO,KAAK,GAAG;AAC9D,WAAO,QAAQ;AAAA,EACjB;AAEA,MAAI,OAAO,WAAW,CAAC,aAAa,OAAO,OAAO,GAAG;AACnD,WAAO,UAAU;AAAA,EACnB;AAEA,SAAO;AACT;AAMO,SAAS,YAAY,MAAuC;AACjE,QAAM,SAAS,QAAQ,IAAI;AAC3B,QAAM,SAAS,KAAK,OAAO,CAAC,QAAQ,OAAO,GAAG,MAAM,EAAE;AAEtD,SAAO;AAAA,IACL,MAAM,OAAO;AAAA,IACb,GAAG,OAAO,YAAY,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,OAAO,GAAG,CAAC,CAAC,CAAC;AAAA,EAC/D;AACF;AAMO,SAAS,YAAY,MAAwC;AAClE,QAAM,SAAS,QAAQ,IAAI;AAE3B,SAAO,EAAE,GAAG,QAAQ,SAAS,OAAO,WAAW,gBAAgB;AACjE;AAGO,MAAM,eAAe;AAGrB,MAAM,aAAa,CAAC,SAA0B,KAAK,KAAK,KAAK,MAAM;","names":[]}

package/dist/admin/newsletters/signatures-dialog.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  EmptyNote,
+  Skeleton
+} from "@withpotter/ui-kit";
+import { SignatureEditor } from "./signature-editor";
+import { SignatureRow } from "./signature-row";
+import {
+  createInput,
+  emptySignatureForm,
+  formOf,
+  updateInput
+} from "./signature-values";
+import { useSignatureActions, useSignatures } from "./use-signatures";
+const NEW = "new";
+function SignaturesDialog({
+  open,
+  onClose
+}) {
+  const list = useSignatures();
+  const actions = useSignatureActions();
+  const [editing, setEditing] = useState(null);
+  const [confirming, setConfirming] = useState(null);
+  const items = list.data ?? [];
+  const current = items.find((s) => s.id === editing);
+  const inEditor = editing === NEW || Boolean(current);
+  const toList = () => {
+    setEditing(null);
+    setConfirming(null);
+  };
+  const addButton = /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setEditing(NEW), children: "Add signature" });
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (next) return;
+        toList();
+        onClose();
+      },
+      children: /* @__PURE__ */ jsxs(DialogContent, { className: inEditor ? "max-w-2xl" : void 0, children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: !inEditor ? "Signatures" : current ? "Edit signature" : "Add signature" }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: inEditor ? "The preview shows it as the email will." : "Saved sign-offs to put at the foot of a newsletter." })
+        ] }),
+        inEditor ? /* @__PURE__ */ jsx(
+          SignatureEditor,
+          {
+            initial: current ? formOf(current) : emptySignatureForm(),
+            submitLabel: current ? "Save" : "Add signature",
+            busy: actions.saving,
+            onBack: toList,
+            onSubmit: async (values) => {
+              const done = current ? await actions.change(current.id, updateInput(values)) : await actions.add(createInput(values));
+              if (done) toList();
+            }
+          },
+          editing
+        ) : list.isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-full" }) : list.isError ? /* @__PURE__ */ jsx(
+          EmptyNote,
+          {
+            action: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => void list.refetch(), children: "Try again" }),
+            children: "Signatures could not be loaded."
+          }
+        ) : items.length === 0 ? /* @__PURE__ */ jsx(EmptyNote, { action: addButton, children: "No signatures yet" }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "divide-y divide-[var(--border-subtle)]", children: items.map((signature) => /* @__PURE__ */ jsx(
+            SignatureRow,
+            {
+              signature,
+              confirming: confirming === signature.id,
+              deleting: actions.deleting,
+              onEdit: () => setEditing(signature.id),
+              onAskDelete: () => setConfirming(signature.id),
+              onCancelDelete: () => setConfirming(null),
+              onDelete: async () => {
+                if (await actions.remove(signature.id)) toList();
+              }
+            },
+            signature.id
+          )) }),
+          /* @__PURE__ */ jsx("div", { children: addButton })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  SignaturesDialog
+};
+//# sourceMappingURL=signatures-dialog.js.map

package/dist/admin/newsletters/signatures-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/signatures-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  EmptyNote,\n  Skeleton,\n} from '@withpotter/ui-kit';\nimport { SignatureEditor } from './signature-editor';\nimport { SignatureRow } from './signature-row';\nimport {\n  createInput,\n  emptySignatureForm,\n  formOf,\n  updateInput,\n} from './signature-values';\nimport { useSignatureActions, useSignatures } from './use-signatures';\n\nconst NEW = 'new';\n\n/**\n * The saved signatures: add, change and delete them. Adding or editing swaps\n * the list for the editor inside this same dialog, so only one is ever open.\n */\nexport function SignaturesDialog({\n  open,\n  onClose,\n}: {\n  open: boolean;\n  onClose: () => void;\n}) {\n  const list = useSignatures();\n  const actions = useSignatureActions();\n  /** The id being edited, `NEW` for a new one, or nothing (the list). */\n  const [editing, setEditing] = useState<string | null>(null);\n  const [confirming, setConfirming] = useState<string | null>(null);\n  const items = list.data ?? [];\n  const current = items.find((s) => s.id === editing);\n  const inEditor = editing === NEW || Boolean(current);\n  const toList = () => {\n    setEditing(null);\n    setConfirming(null);\n  };\n  const addButton = (\n    <Button variant=\"secondary\" onClick={() => setEditing(NEW)}>\n      Add signature\n    </Button>\n  );\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(next) => {\n        if (next) return;\n\n        toList();\n        onClose();\n      }}\n    >\n      {/* Two columns while the editor is open, so the wider dialog. */}\n      <DialogContent className={inEditor ? 'max-w-2xl' : undefined}>\n        <DialogHeader>\n          <DialogTitle>\n            {!inEditor\n              ? 'Signatures'\n              : current\n                ? 'Edit signature'\n                : 'Add signature'}\n          </DialogTitle>\n          <DialogDescription>\n            {inEditor\n              ? 'The preview shows it as the email will.'\n              : 'Saved sign-offs to put at the foot of a newsletter.'}\n          </DialogDescription>\n        </DialogHeader>\n        {inEditor ? (\n          <SignatureEditor\n            key={editing}\n            initial={current ? formOf(current) : emptySignatureForm()}\n            submitLabel={current ? 'Save' : 'Add signature'}\n            busy={actions.saving}\n            onBack={toList}\n            onSubmit={async (values) => {\n              const done = current\n                ? await actions.change(current.id, updateInput(values))\n                : await actions.add(createInput(values));\n\n              if (done) toList();\n            }}\n          />\n        ) : list.isLoading ? (\n          <Skeleton className=\"h-24 w-full\" />\n        ) : list.isError ? (\n          <EmptyNote\n            action={\n              <Button variant=\"secondary\" onClick={() => void list.refetch()}>\n                Try again\n              </Button>\n            }\n          >\n            Signatures could not be loaded.\n          </EmptyNote>\n        ) : items.length === 0 ? (\n          <EmptyNote action={addButton}>No signatures yet</EmptyNote>\n        ) : (\n          <div className=\"flex flex-col gap-3\">\n            <div className=\"divide-y divide-[var(--border-subtle)]\">\n              {items.map((signature) => (\n                <SignatureRow\n                  key={signature.id}\n                  signature={signature}\n                  confirming={confirming === signature.id}\n                  deleting={actions.deleting}\n                  onEdit={() => setEditing(signature.id)}\n                  onAskDelete={() => setConfirming(signature.id)}\n                  onCancelDelete={() => setConfirming(null)}\n                  onDelete={async () => {\n                    if (await actions.remove(signature.id)) toList();\n                  }}\n                />\n              ))}\n            </div>\n            <div>{addButton}</div>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AAiDI,cAiBI,YAjBJ;AA/CJ,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,qBAAqB;AAEnD,MAAM,MAAM;AAML,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,OAAO,cAAc;AAC3B,QAAM,UAAU,oBAAoB;AAEpC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwB,IAAI;AAC1D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAwB,IAAI;AAChE,QAAM,QAAQ,KAAK,QAAQ,CAAC;AAC5B,QAAM,UAAU,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,OAAO;AAClD,QAAM,WAAW,YAAY,OAAO,QAAQ,OAAO;AACnD,QAAM,SAAS,MAAM;AACnB,eAAW,IAAI;AACf,kBAAc,IAAI;AAAA,EACpB;AACA,QAAM,YACJ,oBAAC,UAAO,SAAQ,aAAY,SAAS,MAAM,WAAW,GAAG,GAAG,2BAE5D;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAc,CAAC,SAAS;AACtB,YAAI,KAAM;AAEV,eAAO;AACP,gBAAQ;AAAA,MACV;AAAA,MAGA,+BAAC,iBAAc,WAAW,WAAW,cAAc,QACjD;AAAA,6BAAC,gBACC;AAAA,8BAAC,eACE,WAAC,WACE,eACA,UACE,mBACA,iBACR;AAAA,UACA,oBAAC,qBACE,qBACG,4CACA,uDACN;AAAA,WACF;AAAA,QACC,WACC;AAAA,UAAC;AAAA;AAAA,YAEC,SAAS,UAAU,OAAO,OAAO,IAAI,mBAAmB;AAAA,YACxD,aAAa,UAAU,SAAS;AAAA,YAChC,MAAM,QAAQ;AAAA,YACd,QAAQ;AAAA,YACR,UAAU,OAAO,WAAW;AAC1B,oBAAM,OAAO,UACT,MAAM,QAAQ,OAAO,QAAQ,IAAI,YAAY,MAAM,CAAC,IACpD,MAAM,QAAQ,IAAI,YAAY,MAAM,CAAC;AAEzC,kBAAI,KAAM,QAAO;AAAA,YACnB;AAAA;AAAA,UAXK;AAAA,QAYP,IACE,KAAK,YACP,oBAAC,YAAS,WAAU,eAAc,IAChC,KAAK,UACP;AAAA,UAAC;AAAA;AAAA,YACC,QACE,oBAAC,UAAO,SAAQ,aAAY,SAAS,MAAM,KAAK,KAAK,QAAQ,GAAG,uBAEhE;AAAA,YAEH;AAAA;AAAA,QAED,IACE,MAAM,WAAW,IACnB,oBAAC,aAAU,QAAQ,WAAW,+BAAiB,IAE/C,qBAAC,SAAI,WAAU,uBACb;AAAA,8BAAC,SAAI,WAAU,0CACZ,gBAAM,IAAI,CAAC,cACV;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,YAAY,eAAe,UAAU;AAAA,cACrC,UAAU,QAAQ;AAAA,cAClB,QAAQ,MAAM,WAAW,UAAU,EAAE;AAAA,cACrC,aAAa,MAAM,cAAc,UAAU,EAAE;AAAA,cAC7C,gBAAgB,MAAM,cAAc,IAAI;AAAA,cACxC,UAAU,YAAY;AACpB,oBAAI,MAAM,QAAQ,OAAO,UAAU,EAAE,EAAG,QAAO;AAAA,cACjD;AAAA;AAAA,YATK,UAAU;AAAA,UAUjB,CACD,GACH;AAAA,UACA,oBAAC,SAAK,qBAAU;AAAA,WAClB;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/admin/newsletters/signatures.js

@@ -0,0 +1,34 @@
+const DEFAULT_CLOSING = "Best regards,";
+const NO_SIGNATURE = "";
+const signatureLabel = (s) => [s.name, s.title].map((part) => part?.trim()).filter(Boolean).join(", ");
+const optionLabel = (s) => s.label?.trim() || signatureLabel(s);
+function rowLines(s) {
+  const label = s.label?.trim();
+  return label ? { primary: label, secondary: signatureLabel(s) } : { primary: s.name.trim(), secondary: s.title?.trim() ?? "" };
+}
+function chosenSignature(id, saved, carried) {
+  if (!id) return null;
+  return saved.find((s) => s.id === id) ?? (carried?.id === id ? carried : null);
+}
+function signatureOptions(saved, carried) {
+  const orphan = carried && !saved.some((s) => s.id === carried.id) ? [carried] : [];
+  return [
+    { value: NO_SIGNATURE, label: "No signature" },
+    ...[...saved, ...orphan].map((s) => ({
+      value: s.id,
+      label: optionLabel(s)
+    }))
+  ];
+}
+const signedLine = (signature) => signature ? `Signed: ${signatureLabel(signature)}` : "No signature";
+export {
+  DEFAULT_CLOSING,
+  NO_SIGNATURE,
+  chosenSignature,
+  optionLabel,
+  rowLines,
+  signatureLabel,
+  signatureOptions,
+  signedLine
+};
+//# sourceMappingURL=signatures.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/signatures.ts"],"sourcesContent":["import type { NewsletterSignature } from '@withpotter/lib/admin-signatures-api';\n\nexport const DEFAULT_CLOSING = 'Best regards,';\n/** The Select's value for \"No signature\"; an id is never empty. */\nexport const NO_SIGNATURE = '';\n\ntype Signed = Pick<NewsletterSignature, 'id' | 'name' | 'title' | 'label'>;\ntype Named = Pick<Signed, 'name' | 'title' | 'label'>;\n\n/** \"Name, Title\", or just the name when there is no title. */\nexport const signatureLabel = (s: Pick<Signed, 'name' | 'title'>) =>\n  [s.name, s.title]\n    .map((part) => part?.trim())\n    .filter(Boolean)\n    .join(', ');\n\n/** What a signature is called where one is picked: its own name for itself. */\nexport const optionLabel = (s: Named) => s.label?.trim() || signatureLabel(s);\n\n/**\n * The two lines of a row in the saved list. A signature with a name of its\n * own leads with it and says who signs underneath; one without leads with\n * the signer and puts the role underneath.\n */\nexport function rowLines(s: Named) {\n  const label = s.label?.trim();\n\n  return label\n    ? { primary: label, secondary: signatureLabel(s) }\n    : { primary: s.name.trim(), secondary: s.title?.trim() ?? '' };\n}\n\n/**\n * The signature a draft has chosen: the saved one with that id, or the copy\n * the newsletter already carries when the saved one has since been deleted.\n */\nexport function chosenSignature<S extends Signed>(\n  id: string | null,\n  saved: S[],\n  carried: Signed | null,\n): Signed | null {\n  if (!id) return null;\n\n  return (\n    saved.find((s) => s.id === id) ?? (carried?.id === id ? carried : null)\n  );\n}\n\n/**\n * The Signature field's options: \"No signature\", then every saved one. A\n * carried signature that is no longer saved is listed last, so the field\n * still shows what the email will be signed with.\n */\nexport function signatureOptions(saved: Signed[], carried: Signed | null) {\n  const orphan =\n    carried && !saved.some((s) => s.id === carried.id) ? [carried] : [];\n\n  return [\n    { value: NO_SIGNATURE, label: 'No signature' },\n    ...[...saved, ...orphan].map((s) => ({\n      value: s.id,\n      label: optionLabel(s),\n    })),\n  ];\n}\n\n/** The review dialog's line. */\nexport const signedLine = (signature: Signed | null) =>\n  signature ? `Signed: ${signatureLabel(signature)}` : 'No signature';\n"],"mappings":"AAEO,MAAM,kBAAkB;AAExB,MAAM,eAAe;AAMrB,MAAM,iBAAiB,CAAC,MAC7B,CAAC,EAAE,MAAM,EAAE,KAAK,EACb,IAAI,CAAC,SAAS,MAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,KAAK,IAAI;AAGP,MAAM,cAAc,CAAC,MAAa,EAAE,OAAO,KAAK,KAAK,eAAe,CAAC;AAOrE,SAAS,SAAS,GAAU;AACjC,QAAM,QAAQ,EAAE,OAAO,KAAK;AAE5B,SAAO,QACH,EAAE,SAAS,OAAO,WAAW,eAAe,CAAC,EAAE,IAC/C,EAAE,SAAS,EAAE,KAAK,KAAK,GAAG,WAAW,EAAE,OAAO,KAAK,KAAK,GAAG;AACjE;AAMO,SAAS,gBACd,IACA,OACA,SACe;AACf,MAAI,CAAC,GAAI,QAAO;AAEhB,SACE,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,SAAS,OAAO,KAAK,UAAU;AAEtE;AAOO,SAAS,iBAAiB,OAAiB,SAAwB;AACxE,QAAM,SACJ,WAAW,CAAC,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,QAAQ,EAAE,IAAI,CAAC,OAAO,IAAI,CAAC;AAEpE,SAAO;AAAA,IACL,EAAE,OAAO,cAAc,OAAO,eAAe;AAAA,IAC7C,GAAG,CAAC,GAAG,OAAO,GAAG,MAAM,EAAE,IAAI,CAAC,OAAO;AAAA,MACnC,OAAO,EAAE;AAAA,MACT,OAAO,YAAY,CAAC;AAAA,IACtB,EAAE;AAAA,EACJ;AACF;AAGO,MAAM,aAAa,CAAC,cACzB,YAAY,WAAW,eAAe,SAAS,CAAC,KAAK;","names":[]}

package/dist/admin/newsletters/use-autosave.js

@@ -0,0 +1,147 @@
+"use client";
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  adminNewslettersApi
+} from "@withpotter/lib/admin-newsletters-api";
+import {
+  canAutosave,
+  initialSave,
+  refusalOutcome,
+  savePatch,
+  saveReducer
+} from "./autosave";
+import { toDraft } from "./content";
+import { NEWSLETTERS_KEY, newsletterKey } from "./use-newsletters";
+const DEBOUNCE_MS = 1e3;
+function useAutosave(newsletter, enabled) {
+  const { id } = newsletter;
+  const queryClient = useQueryClient();
+  const [draft, setDraft] = useState(() => toDraft(newsletter));
+  const [state, dispatch] = useReducer(
+    saveReducer,
+    newsletter.updatedAt,
+    initialSave
+  );
+  const [savedCount, setSavedCount] = useState(0);
+  const [theirs, setTheirs] = useState(null);
+  const live = useRef({
+    draft,
+    updatedAt: newsletter.updatedAt,
+    /** The signature the server last took; a save sends one only if changed. */
+    signatureId: draft.signatureId,
+    status: state.status,
+    saving: null,
+    left: false
+  });
+  const timer = useRef(null);
+  const saveRef = useRef(null);
+  const run = useCallback(
+    async (force) => {
+      const l = live.current;
+      const sent = l.draft;
+      dispatch({ type: "start" });
+      l.status = "saving";
+      try {
+        const saved = await adminNewslettersApi.update(
+          id,
+          savePatch(sent, l.signatureId, force ? void 0 : l.updatedAt),
+          { keepalive: l.left }
+        );
+        l.updatedAt = saved.updatedAt;
+        l.signatureId = sent.signatureId;
+        if (l.status === "saving") l.status = "saved";
+        queryClient.setQueryData(newsletterKey(id), saved);
+        dispatch({ type: "saved", updatedAt: saved.updatedAt });
+        setTheirs(null);
+        setSavedCount((n) => n + 1);
+        void queryClient.invalidateQueries({
+          queryKey: [...NEWSLETTERS_KEY, "list"]
+        });
+        return true;
+      } catch (error) {
+        const http = error.status;
+        const server = http === 409 ? await adminNewslettersApi.get(id).catch(() => null) : null;
+        const outcome = refusalOutcome(http, server?.status);
+        setTheirs(server);
+        dispatch({ type: outcome });
+        l.status = outcome;
+        return false;
+      }
+    },
+    [id, queryClient]
+  );
+  const save = useCallback(
+    async (force = false) => {
+      const l = live.current;
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = null;
+      while (l.saving) await l.saving;
+      if (!force && !canAutosave(l.status)) return l.status === "saved";
+      l.saving = run(force).finally(() => {
+        l.saving = null;
+      });
+      return l.saving;
+    },
+    [run]
+  );
+  useEffect(() => {
+    saveRef.current = save;
+  }, [save]);
+  const change = useCallback(
+    (patch) => {
+      if (!enabled) return;
+      const l = live.current;
+      const next = { ...l.draft, ...patch };
+      l.draft = next;
+      setDraft(next);
+      dispatch({ type: "edit" });
+      if (l.status === "conflict" || l.status === "locked") return;
+      l.status = "dirty";
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => void saveRef.current?.(), DEBOUNCE_MS);
+    },
+    [enabled]
+  );
+  useEffect(() => {
+    const l = live.current;
+    const leave = () => {
+      l.left = true;
+      void saveRef.current?.();
+    };
+    l.left = false;
+    window.addEventListener("pagehide", leave);
+    return () => {
+      window.removeEventListener("pagehide", leave);
+      leave();
+    };
+  }, []);
+  const reload = useCallback(() => {
+    if (!theirs) return;
+    const l = live.current;
+    queryClient.setQueryData(newsletterKey(id), theirs);
+    l.draft = toDraft(theirs);
+    l.updatedAt = theirs.updatedAt;
+    l.signatureId = l.draft.signatureId;
+    l.status = "saved";
+    setDraft(l.draft);
+    dispatch({ type: "reloaded", updatedAt: theirs.updatedAt });
+    setTheirs(null);
+    setSavedCount((n) => n + 1);
+  }, [id, queryClient, theirs]);
+  return {
+    draft,
+    status: state.status,
+    savedCount,
+    change,
+    /** Save anything due and say whether the server now holds the draft. */
+    flush: useCallback(() => save(), [save]),
+    retry: useCallback(() => void save(), [save]),
+    keepMine: useCallback(() => void save(true), [save]),
+    reload
+  };
+}
+export {
+  useAutosave
+};
+//# sourceMappingURL=use-autosave.js.map

package/dist/admin/newsletters/use-autosave.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/use-autosave.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useReducer, useRef, useState } from 'react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport {\n  adminNewslettersApi,\n  type Newsletter,\n} from '@withpotter/lib/admin-newsletters-api';\nimport {\n  canAutosave,\n  initialSave,\n  refusalOutcome,\n  savePatch,\n  saveReducer,\n  type SaveStatus,\n} from './autosave';\nimport { toDraft, type EditorDraft } from './content';\nimport { NEWSLETTERS_KEY, newsletterKey } from './use-newsletters';\n\nconst DEBOUNCE_MS = 1000;\n\n/**\n * The draft as it is being written, saved a second after the last change.\n *\n * Each save carries the `updatedAt` of the copy it was based on, so the\n * server can refuse one made over somebody else's work (409). The draft is\n * also saved when the editor is left, so a route change loses nothing.\n */\nexport function useAutosave(newsletter: Newsletter, enabled: boolean) {\n  const { id } = newsletter;\n  const queryClient = useQueryClient();\n  const [draft, setDraft] = useState(() => toDraft(newsletter));\n  const [state, dispatch] = useReducer(\n    saveReducer,\n    newsletter.updatedAt,\n    initialSave,\n  );\n  /** Bumped on every save that lands; the preview follows it. */\n  const [savedCount, setSavedCount] = useState(0);\n  const [theirs, setTheirs] = useState<Newsletter | null>(null);\n  const live = useRef({\n    draft,\n    updatedAt: newsletter.updatedAt,\n    /** The signature the server last took; a save sends one only if changed. */\n    signatureId: draft.signatureId,\n    status: state.status as SaveStatus,\n    saving: null as Promise<boolean> | null,\n    left: false,\n  });\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const saveRef = useRef<(force?: boolean) => Promise<boolean>>(null);\n\n  const run = useCallback(\n    async (force: boolean): Promise<boolean> => {\n      const l = live.current;\n      const sent = l.draft;\n\n      dispatch({ type: 'start' });\n      l.status = 'saving';\n\n      try {\n        const saved = await adminNewslettersApi.update(\n          id,\n          savePatch(sent, l.signatureId, force ? undefined : l.updatedAt),\n          { keepalive: l.left },\n        );\n\n        l.updatedAt = saved.updatedAt;\n        l.signatureId = sent.signatureId;\n        // Edited again while this was out: still dirty, and saved once more.\n        if (l.status === 'saving') l.status = 'saved';\n        queryClient.setQueryData(newsletterKey(id), saved);\n        dispatch({ type: 'saved', updatedAt: saved.updatedAt });\n        setTheirs(null);\n        setSavedCount((n) => n + 1);\n        void queryClient.invalidateQueries({\n          queryKey: [...NEWSLETTERS_KEY, 'list'],\n        });\n\n        return true;\n      } catch (error) {\n        const http = (error as { status?: number }).status;\n        const server =\n          http === 409\n            ? await adminNewslettersApi.get(id).catch(() => null)\n            : null;\n        const outcome = refusalOutcome(http, server?.status);\n\n        setTheirs(server);\n        dispatch({ type: outcome });\n        l.status = outcome;\n\n        return false;\n      }\n    },\n    [id, queryClient],\n  );\n\n  /** Save now. Waits for a save already out, then sends what changed since. */\n  const save = useCallback(\n    async (force = false): Promise<boolean> => {\n      const l = live.current;\n\n      if (timer.current) clearTimeout(timer.current);\n      timer.current = null;\n\n      // A loop, not one await: two callers may be waiting on the same save.\n      while (l.saving) await l.saving;\n\n      if (!force && !canAutosave(l.status)) return l.status === 'saved';\n\n      l.saving = run(force).finally(() => {\n        l.saving = null;\n      });\n\n      return l.saving;\n    },\n    [run],\n  );\n\n  useEffect(() => {\n    saveRef.current = save;\n  }, [save]);\n\n  const change = useCallback(\n    (patch: Partial<EditorDraft>) => {\n      if (!enabled) return;\n\n      const l = live.current;\n      const next = { ...l.draft, ...patch };\n\n      l.draft = next;\n      setDraft(next);\n      dispatch({ type: 'edit' });\n\n      if (l.status === 'conflict' || l.status === 'locked') return;\n\n      l.status = 'dirty';\n\n      if (timer.current) clearTimeout(timer.current);\n      timer.current = setTimeout(() => void saveRef.current?.(), DEBOUNCE_MS);\n    },\n    [enabled],\n  );\n\n  // Leaving the editor, by route or by closing the tab, saves what is due.\n  useEffect(() => {\n    const l = live.current;\n    const leave = () => {\n      l.left = true;\n      void saveRef.current?.();\n    };\n\n    l.left = false;\n    window.addEventListener('pagehide', leave);\n\n    return () => {\n      window.removeEventListener('pagehide', leave);\n      leave();\n    };\n  }, []);\n\n  /** Take the server's copy and drop what was written here. */\n  const reload = useCallback(() => {\n    if (!theirs) return;\n\n    const l = live.current;\n\n    queryClient.setQueryData(newsletterKey(id), theirs);\n    l.draft = toDraft(theirs);\n    l.updatedAt = theirs.updatedAt;\n    l.signatureId = l.draft.signatureId;\n    l.status = 'saved';\n    setDraft(l.draft);\n    dispatch({ type: 'reloaded', updatedAt: theirs.updatedAt });\n    setTheirs(null);\n    setSavedCount((n) => n + 1);\n  }, [id, queryClient, theirs]);\n\n  return {\n    draft,\n    status: state.status,\n    savedCount,\n    change,\n    /** Save anything due and say whether the server now holds the draft. */\n    flush: useCallback(() => save(), [save]),\n    retry: useCallback(() => void save(), [save]),\n    keepMine: useCallback(() => void save(true), [save]),\n    reload,\n  };\n}\n\nexport type Autosave = ReturnType<typeof useAutosave>;\n"],"mappings":"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","names":[]}

package/dist/admin/newsletters/use-deliveries.js

@@ -0,0 +1,90 @@
+"use client";
+import { useState } from "react";
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient
+} from "@tanstack/react-query";
+import { useToast } from "@withpotter/ui-kit";
+import {
+  adminNewsletterDeliveriesApi
+} from "@withpotter/lib/admin-newsletter-deliveries-api";
+import { awaitingConfirmation, deliveriesQuery } from "./deliveries";
+import { isNotAvailable, retryUnlessMissing } from "./not-available";
+import { saveCsv } from "./save-file";
+import { quietly } from "./use-newsletter-actions";
+import {
+  NEWSLETTERS_KEY,
+  PAGE_SIZE,
+  useNewsletterMutation
+} from "./use-newsletters";
+const POLL_MS = 3e3;
+const CONFIRM_POLL_MS = 3e4;
+const deliveriesKey = (id) => [...NEWSLETTERS_KEY, "deliveries", id];
+const useDeliveries = (id, filter, page, live, sentAt) => useQuery({
+  queryKey: [
+    ...deliveriesKey(id),
+    filter.status ?? "all",
+    filter.search,
+    page
+  ],
+  queryFn: () => adminNewsletterDeliveriesApi.list(
+    id,
+    deliveriesQuery(filter, { page, limit: PAGE_SIZE })
+  ),
+  placeholderData: keepPreviousData,
+  retry: retryUnlessMissing,
+  refetchInterval: (query) => {
+    if (isNotAvailable(query.state.error)) return false;
+    if (live) return POLL_MS;
+    return awaitingConfirmation(sentAt, query.state.data?.items) ? CONFIRM_POLL_MS : false;
+  }
+});
+function useDeliveryActions(id) {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+  const [exporting, setExporting] = useState(false);
+  const retry = useNewsletterMutation(
+    adminNewsletterDeliveriesApi.retry,
+    "Retry not started"
+  );
+  return {
+    exporting,
+    /** The ids being retried, while the request is out. */
+    retrying: retry.isPending ? retry.variables?.[1] ?? [] : [],
+    /** Resolves true once the rows are queued again. */
+    async retryRows(ids) {
+      if (ids.length === 0) return false;
+      const done = await quietly(() => retry.mutateAsync([id, ids]));
+      if (!done) return false;
+      toast({
+        title: ids.length === 1 ? "Retry started" : `Retry started for ${ids.length}`
+      });
+      await queryClient.invalidateQueries({ queryKey: deliveriesKey(id) });
+      return true;
+    },
+    async exportCsv(status) {
+      setExporting(true);
+      try {
+        const text = await adminNewsletterDeliveriesApi.exportCsv(
+          id,
+          deliveriesQuery({ status })
+        );
+        saveCsv(text ?? "", "newsletter-recipients.csv");
+      } catch (error) {
+        toast({
+          title: "Export not made",
+          description: isNotAvailable(error) ? "The export is not available on this environment yet." : error.message,
+          variant: "destructive"
+        });
+      } finally {
+        setExporting(false);
+      }
+    }
+  };
+}
+export {
+  useDeliveries,
+  useDeliveryActions
+};
+//# sourceMappingURL=use-deliveries.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/use-deliveries.ts"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  keepPreviousData,\n  useQuery,\n  useQueryClient,\n} from \"@tanstack/react-query\";\nimport { useToast } from \"@withpotter/ui-kit\";\nimport {\n  adminNewsletterDeliveriesApi,\n  type DeliveryFilter,\n} from \"@withpotter/lib/admin-newsletter-deliveries-api\";\nimport { awaitingConfirmation, deliveriesQuery } from \"./deliveries\";\nimport { isNotAvailable, retryUnlessMissing } from \"./not-available\";\nimport { saveCsv } from \"./save-file\";\nimport { quietly } from \"./use-newsletter-actions\";\nimport {\n  NEWSLETTERS_KEY,\n  PAGE_SIZE,\n  useNewsletterMutation,\n} from \"./use-newsletters\";\n\nconst POLL_MS = 3000;\nconst CONFIRM_POLL_MS = 30_000;\nconst deliveriesKey = (id: string) =>\n  [...NEWSLETTERS_KEY, \"deliveries\", id] as const;\n\n/**\n * One page of a send's addresses. Asked for again every 3s while it sends,\n * and every 30s after, for as long as a row on screen waits on the provider.\n */\nexport const useDeliveries = (\n  id: string,\n  filter: { status?: DeliveryFilter; search?: string },\n  page: number,\n  live: boolean,\n  sentAt?: string | null\n) =>\n  useQuery({\n    queryKey: [\n      ...deliveriesKey(id),\n      filter.status ?? \"all\",\n      filter.search,\n      page,\n    ],\n    queryFn: () =>\n      adminNewsletterDeliveriesApi.list(\n        id,\n        deliveriesQuery(filter, { page, limit: PAGE_SIZE })\n      ),\n    placeholderData: keepPreviousData,\n    retry: retryUnlessMissing,\n    refetchInterval: (query) => {\n      if (isNotAvailable(query.state.error)) return false;\n      if (live) return POLL_MS;\n\n      return awaitingConfirmation(sentAt, query.state.data?.items)\n        ? CONFIRM_POLL_MS\n        : false;\n    },\n  });\n\n/** Retry for chosen rows, and the CSV of the list. */\nexport function useDeliveryActions(id: string) {\n  const queryClient = useQueryClient();\n  const { toast } = useToast();\n  const [exporting, setExporting] = useState(false);\n  const retry = useNewsletterMutation(\n    adminNewsletterDeliveriesApi.retry,\n    \"Retry not started\"\n  );\n\n  return {\n    exporting,\n    /** The ids being retried, while the request is out. */\n    retrying: retry.isPending ? retry.variables?.[1] ?? [] : [],\n    /** Resolves true once the rows are queued again. */\n    async retryRows(ids: string[]) {\n      if (ids.length === 0) return false;\n\n      const done = await quietly(() => retry.mutateAsync([id, ids]));\n\n      if (!done) return false;\n\n      toast({\n        title:\n          ids.length === 1\n            ? \"Retry started\"\n            : `Retry started for ${ids.length}`,\n      });\n      await queryClient.invalidateQueries({ queryKey: deliveriesKey(id) });\n\n      return true;\n    },\n    async exportCsv(status?: DeliveryFilter) {\n      setExporting(true);\n\n      try {\n        const text = await adminNewsletterDeliveriesApi.exportCsv(\n          id,\n          deliveriesQuery({ status })\n        );\n\n        saveCsv(text ?? \"\", \"newsletter-recipients.csv\");\n      } catch (error) {\n        toast({\n          title: \"Export not made\",\n          description: isNotAvailable(error)\n            ? \"The export is not available on this environment yet.\"\n            : (error as Error).message,\n          variant: \"destructive\",\n        });\n      } finally {\n        setExporting(false);\n      }\n    },\n  };\n}\n\nexport type DeliveryActions = ReturnType<typeof useDeliveryActions>;\n"],"mappings":";AAEA,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,OAEK;AACP,SAAS,sBAAsB,uBAAuB;AACtD,SAAS,gBAAgB,0BAA0B;AACnD,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,UAAU;AAChB,MAAM,kBAAkB;AACxB,MAAM,gBAAgB,CAAC,OACrB,CAAC,GAAG,iBAAiB,cAAc,EAAE;AAMhC,MAAM,gBAAgB,CAC3B,IACA,QACA,MACA,MACA,WAEA,SAAS;AAAA,EACP,UAAU;AAAA,IACR,GAAG,cAAc,EAAE;AAAA,IACnB,OAAO,UAAU;AAAA,IACjB,OAAO;AAAA,IACP;AAAA,EACF;AAAA,EACA,SAAS,MACP,6BAA6B;AAAA,IAC3B;AAAA,IACA,gBAAgB,QAAQ,EAAE,MAAM,OAAO,UAAU,CAAC;AAAA,EACpD;AAAA,EACF,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,iBAAiB,CAAC,UAAU;AAC1B,QAAI,eAAe,MAAM,MAAM,KAAK,EAAG,QAAO;AAC9C,QAAI,KAAM,QAAO;AAEjB,WAAO,qBAAqB,QAAQ,MAAM,MAAM,MAAM,KAAK,IACvD,kBACA;AAAA,EACN;AACF,CAAC;AAGI,SAAS,mBAAmB,IAAY;AAC7C,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,QAAQ;AAAA,IACZ,6BAA6B;AAAA,IAC7B;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA;AAAA,IAEA,UAAU,MAAM,YAAY,MAAM,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC;AAAA;AAAA,IAE1D,MAAM,UAAU,KAAe;AAC7B,UAAI,IAAI,WAAW,EAAG,QAAO;AAE7B,YAAM,OAAO,MAAM,QAAQ,MAAM,MAAM,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC;AAE7D,UAAI,CAAC,KAAM,QAAO;AAElB,YAAM;AAAA,QACJ,OACE,IAAI,WAAW,IACX,kBACA,qBAAqB,IAAI,MAAM;AAAA,MACvC,CAAC;AACD,YAAM,YAAY,kBAAkB,EAAE,UAAU,cAAc,EAAE,EAAE,CAAC;AAEnE,aAAO;AAAA,IACT;AAAA,IACA,MAAM,UAAU,QAAyB;AACvC,mBAAa,IAAI;AAEjB,UAAI;AACF,cAAM,OAAO,MAAM,6BAA6B;AAAA,UAC9C;AAAA,UACA,gBAAgB,EAAE,OAAO,CAAC;AAAA,QAC5B;AAEA,gBAAQ,QAAQ,IAAI,2BAA2B;AAAA,MACjD,SAAS,OAAO;AACd,cAAM;AAAA,UACJ,OAAO;AAAA,UACP,aAAa,eAAe,KAAK,IAC7B,yDACC,MAAgB;AAAA,UACrB,SAAS;AAAA,QACX,CAAC;AAAA,MACH,UAAE;AACA,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF;AACF;","names":[]}