@graph8/sdk 0.362.0 → 0.373.0

package/blocks/newsletter/block.json

@@ -15,40 +15,78 @@
     "lists"
   ],
   "operations": [
-    "list_newsletters_newsletters_get",
-    "create_newsletter_newsletters_post",
-    "list_issues_newsletters__newsletter_id__issues_get",
     "activate_newsletter_newsletters__newsletter_id__activate_post",
-    "pause_newsletter_newsletters__newsletter_id__pause_post",
-    "get_issue_newsletters__newsletter_id__issues__issue_id__get",
+    "add_subscriber_newsletters__newsletter_id__subscribers_post",
+    "cancel_send_newsletters__newsletter_id__issues__issue_id__send_cancel_post",
+    "complete_newsletter_newsletters__newsletter_id__complete_post",
     "create_issue_newsletters__newsletter_id__issues_post",
-    "update_issue_newsletters__newsletter_id__issues__issue_id__put",
+    "create_newsletter_newsletters_post",
+    "create_template_from_prompt_newsletters_templates_custom_post",
+    "delete_issue_newsletters__newsletter_id__issues__issue_id__delete",
+    "delete_newsletter_template_newsletters_templates__template_id__delete",
+    "delete_subscriber_newsletters__newsletter_id__subscribers__subscriber_id__delete",
+    "disable_newsletter_list_sync_newsletters__newsletter_id__list_syncs__audience_list_id__delete",
+    "duplicate_issue_newsletters__newsletter_id__issues__issue_id__duplicate_post",
+    "enable_newsletter_list_sync_newsletters__newsletter_id__list_syncs_post",
     "generate_newsletter_issue_newsletters__newsletter_id__issues__issue_id__generate_post",
+    "get_issue_analytics_kpis_newsletters__newsletter_id__issues__issue_id__analytics_kpis_get",
     "get_issue_generation_status_newsletters__newsletter_id__issues__issue_id__generation_status_get",
-    "send_test_email_newsletters__newsletter_id__issues__issue_id__send_test_post",
-    "delete_issue_newsletters__newsletter_id__issues__issue_id__delete",
-    "list_subscribers_newsletters__newsletter_id__subscribers_get",
-    "send_issue_newsletters__newsletter_id__issues__issue_id__send_post",
+    "get_issue_newsletters__newsletter_id__issues__issue_id__get",
+    "get_newsletter_newsletters__newsletter_id__get",
+    "get_newsletter_settings_newsletters__newsletter_id__settings_get",
     "get_send_status_newsletters__newsletter_id__issues__issue_id__send_get",
-    "pause_send_newsletters__newsletter_id__issues__issue_id__send_pause_post",
-    "resume_send_newsletters__newsletter_id__issues__issue_id__send_resume_post",
-    "cancel_send_newsletters__newsletter_id__issues__issue_id__send_cancel_post",
-    "add_subscriber_newsletters__newsletter_id__subscribers_post",
-    "list_lists_lists_get",
+    "get_subscriber_timeline_newsletters__newsletter_id__issues__issue_id__analytics_subscribers__subscriber_id__timeline_get",
     "import_subscribers_from_audience_newsletters__newsletter_id__subscribers_import_audience_post",
+    "list_issues_newsletters__newsletter_id__issues_get",
+    "list_lists_lists_get",
+    "list_newsletter_issue_versions_newsletters__newsletter_id__issues__issue_id__versions_get",
+    "list_newsletter_list_syncs_newsletters__newsletter_id__list_syncs_get",
+    "list_newsletters_newsletters_get",
+    "list_subscribers_newsletters__newsletter_id__subscribers_get",
+    "list_templates_newsletters_templates_get",
+    "newsletter_domain_status_newsletters__newsletter_id__settings_domain_status_get",
+    "pause_newsletter_newsletters__newsletter_id__pause_post",
+    "pause_send_newsletters__newsletter_id__issues__issue_id__send_pause_post",
     "preview_newsletter_subscriber_verification_newsletters__newsletter_id__subscribers_verify_preview_post",
-    "verify_newsletter_subscribers_newsletters__newsletter_id__subscribers_verify_post",
+    "restore_newsletter_issue_version_newsletters__newsletter_id__issues__issue_id__versions__version_num__restore_post",
+    "resume_newsletter_newsletters__newsletter_id__resume_post",
+    "resume_send_newsletters__newsletter_id__issues__issue_id__send_resume_post",
+    "run_newsletter_list_sync_newsletters__newsletter_id__list_syncs__audience_list_id__run_post",
+    "send_issue_newsletters__newsletter_id__issues__issue_id__send_post",
+    "send_test_email_newsletters__newsletter_id__issues__issue_id__send_test_post",
+    "set_template_approval_newsletters_templates__template_id__approval_post",
+    "template_generation_status_newsletters_templates__template_id__generation_status_get",
     "unsubscribe_subscriber_newsletters__newsletter_id__subscribers__subscriber_id__unsubscribe_patch",
-    "delete_subscriber_newsletters__newsletter_id__subscribers__subscriber_id__delete",
-    "get_issue_analytics_kpis_newsletters__newsletter_id__issues__issue_id__analytics_kpis_get"
+    "update_issue_newsletters__newsletter_id__issues__issue_id__put",
+    "update_newsletter_newsletters__newsletter_id__patch",
+    "update_newsletter_settings_newsletters__newsletter_id__settings_put",
+    "update_newsletter_template_newsletters_templates__template_id__patch",
+    "use_template_newsletters_templates__template_id__use_post",
+    "verify_newsletter_domain_newsletters__newsletter_id__settings_verify_domain_post",
+    "verify_newsletter_subscribers_newsletters__newsletter_id__subscribers_verify_post"
   ],
   "components": [
     {
       "name": "NewsletterScreen",
       "file": "components/newsletter-screen.tsx",
       "purpose": "Finished newsletter workspace: pick or create a newsletter, issues list with detail (write, send, results), subscribers and performance tabs.",
-      "operations": [],
-      "tiers": []
+      "operations": [
+        "activate_newsletter_newsletters__newsletter_id__activate_post",
+        "create_newsletter_newsletters_post",
+        "delete_subscriber_newsletters__newsletter_id__subscribers__subscriber_id__delete",
+        "get_issue_analytics_kpis_newsletters__newsletter_id__issues__issue_id__analytics_kpis_get",
+        "list_issues_newsletters__newsletter_id__issues_get",
+        "list_newsletters_newsletters_get",
+        "list_subscribers_newsletters__newsletter_id__subscribers_get",
+        "pause_newsletter_newsletters__newsletter_id__pause_post",
+        "unsubscribe_subscriber_newsletters__newsletter_id__subscribers__subscriber_id__unsubscribe_patch"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "external",
+        "destructive"
+      ]
     },
     {
       "name": "NewsletterEditor",
@@ -112,14 +150,15 @@
       "file": "components/subscriber-table.tsx",
       "purpose": "Subscribers with search, status filter, add, import a list, verify addresses, unsubscribe and erase.",
       "operations": [
-        "list_subscribers_newsletters__newsletter_id__subscribers_get",
         "add_subscriber_newsletters__newsletter_id__subscribers_post",
-        "list_lists_lists_get",
+        "delete_subscriber_newsletters__newsletter_id__subscribers__subscriber_id__delete",
         "import_subscribers_from_audience_newsletters__newsletter_id__subscribers_import_audience_post",
+        "list_lists_lists_get",
+        "list_newsletters_newsletters_get",
+        "list_subscribers_newsletters__newsletter_id__subscribers_get",
         "preview_newsletter_subscriber_verification_newsletters__newsletter_id__subscribers_verify_preview_post",
-        "verify_newsletter_subscribers_newsletters__newsletter_id__subscribers_verify_post",
         "unsubscribe_subscriber_newsletters__newsletter_id__subscribers__subscriber_id__unsubscribe_patch",
-        "delete_subscriber_newsletters__newsletter_id__subscribers__subscriber_id__delete"
+        "verify_newsletter_subscribers_newsletters__newsletter_id__subscribers_verify_post"
       ],
       "tiers": [
         "read",
@@ -139,6 +178,96 @@
       "tiers": [
         "read"
       ]
+    },
+    {
+      "name": "IssueVersions",
+      "file": "components/issue-versions.tsx",
+      "purpose": "Version history of one issue with restore, and duplicate into a new draft.",
+      "operations": [
+        "list_newsletter_issue_versions_newsletters__newsletter_id__issues__issue_id__versions_get",
+        "restore_newsletter_issue_version_newsletters__newsletter_id__issues__issue_id__versions__version_num__restore_post",
+        "duplicate_issue_newsletters__newsletter_id__issues__issue_id__duplicate_post"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "external"
+      ]
+    },
+    {
+      "name": "MoreRows",
+      "file": "components/more-rows.tsx",
+      "purpose": "Footer for paged lists: how many rows are shown and a Load more button.",
+      "operations": [],
+      "tiers": []
+    },
+    {
+      "name": "NewsletterListSyncs",
+      "file": "components/newsletter-list-syncs.tsx",
+      "purpose": "Keep subscribers in step with lists: turn a sync on (consent confirmed), run it, turn it off.",
+      "operations": [
+        "list_newsletter_list_syncs_newsletters__newsletter_id__list_syncs_get",
+        "list_lists_lists_get",
+        "enable_newsletter_list_sync_newsletters__newsletter_id__list_syncs_post",
+        "run_newsletter_list_sync_newsletters__newsletter_id__list_syncs__audience_list_id__run_post",
+        "disable_newsletter_list_sync_newsletters__newsletter_id__list_syncs__audience_list_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "destructive"
+      ]
+    },
+    {
+      "name": "NewsletterSettings",
+      "file": "components/newsletter-settings.tsx",
+      "purpose": "The newsletter itself: name and goal, sender and opt-in, sending domain verification, resume and complete.",
+      "operations": [
+        "update_newsletter_newsletters__newsletter_id__patch",
+        "update_newsletter_settings_newsletters__newsletter_id__settings_put",
+        "newsletter_domain_status_newsletters__newsletter_id__settings_domain_status_get",
+        "verify_newsletter_domain_newsletters__newsletter_id__settings_verify_domain_post",
+        "complete_newsletter_newsletters__newsletter_id__complete_post",
+        "resume_newsletter_newsletters__newsletter_id__resume_post",
+        "get_newsletter_settings_newsletters__newsletter_id__settings_get",
+        "get_newsletter_newsletters__newsletter_id__get"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "external"
+      ]
+    },
+    {
+      "name": "NewsletterTemplates",
+      "file": "components/newsletter-templates.tsx",
+      "purpose": "Saved issue templates: start a draft from one, approve, rename, delete, or write one with AI.",
+      "operations": [
+        "update_newsletter_template_newsletters_templates__template_id__patch",
+        "set_template_approval_newsletters_templates__template_id__approval_post",
+        "use_template_newsletters_templates__template_id__use_post",
+        "template_generation_status_newsletters_templates__template_id__generation_status_get",
+        "delete_newsletter_template_newsletters_templates__template_id__delete",
+        "list_templates_newsletters_templates_get",
+        "create_template_from_prompt_newsletters_templates_custom_post"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "billable",
+        "destructive"
+      ]
+    },
+    {
+      "name": "SubscriberTimeline",
+      "file": "components/subscriber-timeline.tsx",
+      "purpose": "What one subscriber did with one sent issue.",
+      "operations": [
+        "get_subscriber_timeline_newsletters__newsletter_id__issues__issue_id__analytics_subscribers__subscriber_id__timeline_get"
+      ],
+      "tiers": [
+        "read"
+      ]
     }
   ],
   "hooks": [],
@@ -146,6 +275,10 @@
     {
       "file": "lib/newsletter-types.ts",
       "purpose": "Newsletter/issue/subscriber types and helpers: draft check, percentages, scheduled-time conversion, generation-in-progress guard."
+    },
+    {
+      "file": "lib/newsletter-extra.ts",
+      "purpose": "Helpers for the newsletter management components: open-dict readers, changed-fields diff, domain and DNS helpers."
     }
   ],
   "recipes": [

package/blocks/newsletter/components/issue-scheduler.tsx

@@ -25,6 +25,7 @@ import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { useJobPoll } from "@/g8/hooks/use-job-poll";
 import { generationInProgress, isDraft, issueTitle, sendIsMoving, sendIsPaused, toIsoInstant } from "../lib/newsletter-types";
 import type { Issue, SendState } from "../lib/newsletter-types";
+import { pluralWord } from "@/g8/lib/plural";
 
 export interface IssueSchedulerProps {
   newsletterId: string;
@@ -108,16 +109,16 @@ export function IssueScheduler({ newsletterId, issueId, onSent }: IssueScheduler
     <Card>
       <CardHeader><CardTitle>{issueTitle(issue.data)} <span className="text-muted-foreground text-sm font-normal">{issue.data.status}</span></CardTitle></CardHeader>
       <CardContent className="grid gap-4">
-        {partial ? <p role="alert" className="text-sm text-amber-700">This issue is still being written by AI. Wait for it to finish: sending now would mail the partial version.</p> : null}
+        {partial ? <p role="alert" className="text-sm text-warning-foreground">This issue is still being written by AI. Wait for it to finish: sending now would mail the partial version.</p> : null}
         {draft ? (
           <div className="grid gap-3">
-            <p className="text-sm">Audience: <strong>{audience.loading ? "..." : subscribers.toLocaleString()}</strong> subscribed {subscribers === 1 ? "person" : "people"}.</p>
+            <p className="text-sm">Audience: <strong>{audience.loading ? "..." : subscribers.toLocaleString()}</strong> subscribed {pluralWord(subscribers, "person", "people")}.</p>
             <div className="flex gap-2" role="group" aria-label="When to send">
               <Button size="sm" variant={when === "now" ? "secondary" : "ghost"} onClick={() => setWhen("now")}>Send now</Button>
               <Button size="sm" variant={when === "later" ? "secondary" : "ghost"} onClick={() => setWhen("later")}>Schedule</Button>
             </div>
             {when === "later" ? <div className="max-w-xs"><Label htmlFor="g8-send-at" className="mb-1">Send at</Label><Input id="g8-send-at" type="datetime-local" value={at} onChange={(e) => setAt(e.target.value)} /></div> : null}
-            {inPast ? <p role="alert" className="text-sm text-red-700">Pick a time in the future.</p> : null}
+            {inPast ? <p role="alert" className="text-sm text-error-foreground">Pick a time in the future.</p> : null}
             <div><Button disabled={blocked} onClick={() => void openSend()}>{when === "later" ? "Schedule issue" : "Send issue"}</Button></div>
             {subscribers === 0 && !audience.loading ? <p className="text-muted-foreground text-sm">Add subscribers first (SubscriberTable).</p> : null}
           </div>

package/blocks/newsletter/components/issue-versions.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+/**
+ * IssueVersions: the saved versions of one issue, newest first, with restore, and a Duplicate action that copies the
+ * issue into a new draft.
+ *
+ * SDK operations, in the order the screen uses them:
+ *   1. listNewsletterIssueVersions     GET  /newsletters/{id}/issues/{issue}/versions                    (read)
+ *   2. restoreNewsletterIssueVersion   POST /newsletters/{id}/issues/{issue}/versions/{n}/restore         (write; replaces the draft's content)
+ *   3. duplicateIssue                  POST /newsletters/{id}/issues/{issue}/duplicate                    (EXTERNAL, confirmed; creates a draft, sends nothing)
+ *
+ * Only a draft can be restored (a sent issue is a record of what people received). Restoring replaces the draft's
+ * current content, so the button says so and asks for a second click before it writes.
+ */
+import { useState } from "react";
+import { Copy } from "lucide-react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useConfirmAction } from "@/g8/components/confirmed-action";
+import { EmptyState } from "@/g8/components/empty-state";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { isDraft } from "../lib/newsletter-types";
+import type { Issue } from "../lib/newsletter-types";
+import { asRec, num, rowsOf, str, versionNumber } from "../lib/newsletter-extra";
+import type { Rec } from "../lib/newsletter-extra";
+
+export interface IssueVersionsProps {
+  newsletterId: string;
+  issue: Pick<Issue, "id" | "status" | "subject">;
+  /** Called after a version was restored, so the editor reloads the draft. */
+  onRestored?: () => void;
+  /** Called with the new draft's id after Duplicate. */
+  onDuplicated?: (issueId: number) => void;
+  className?: string;
+}
+
+const when = (v: unknown): string => {
+  const d = new Date(str(v));
+  return Number.isNaN(d.getTime()) ? "" : d.toLocaleString();
+};
+
+export function IssueVersions({ newsletterId, issue, onRestored, onDuplicated, className }: IssueVersionsProps) {
+  const base = `/newsletters/${encodeURIComponent(newsletterId)}/issues/${issue.id}`;
+  const { ask, dialog, failure } = useConfirmAction();
+  const versions = useG8Query((signal) => g8Get(`${base}/versions`, undefined, { signal }), [base]);
+  const [sure, setSure] = useState<number | null>(null);
+  const restore = useG8Mutation((n: number) => g8Post(`${base}/versions/${n}/restore`), { onSuccess: () => { setSure(null); void versions.refetch(); onRestored?.(); } });
+  const rows = rowsOf<Rec>(versions.data?.data, "versions");
+  const draft = isDraft(issue);
+
+  return (
+    <div className={className}>
+      <div className="grid gap-4">
+        <SectionCard title="Duplicate" description="Copy this issue into a new draft you can change and send separately."
+          actions={<Button size="sm" variant="outline" onClick={() => ask({
+            tier: "external", title: `Duplicate "${issue.subject || `issue ${issue.id}`}"`, confirmLabel: "Duplicate",
+            description: "Creates a new draft with the same content. Nothing is sent to anyone.",
+            run: async () => { const id = num(asRec((await g8Post(`${base}/duplicate`)).data).id); if (id !== undefined) onDuplicated?.(id); },
+          })}><Copy className="size-4" />Duplicate issue</Button>}>
+          <p className="text-muted-foreground text-sm">The copy starts as a draft in this newsletter.</p>
+        </SectionCard>
+        <SectionCard title="Version history" description={draft ? "Restoring replaces the draft's current content." : "A sent issue cannot be changed; its versions are shown for reference."}>
+          {versions.error ? <ApiError error={versions.error} title="Could not load the versions" onRetry={() => void versions.refetch()} /> : versions.loading && !versions.data ? <Skeleton className="h-20 w-full" aria-busy="true" /> : rows.length === 0 ? (
+            <EmptyState compact title="No saved versions yet" description="A version is saved each time the issue is saved or rewritten." />
+          ) : (
+            <ul className="grid gap-2">
+              {rows.map((v, i) => {
+                const n = versionNumber(v);
+                return (
+                  <li key={n ?? i} className="flex items-center justify-between gap-3 rounded-md border p-3">
+                    <div className="min-w-0 text-sm"><span className="font-medium">Version {n ?? i + 1}</span>{str(v.source) ? <span className="text-muted-foreground"> from {str(v.source).replace(/_/g, " ")}</span> : null}<span className="text-muted-foreground block text-xs">{when(v.created_at)}{str(v.subject) ? ` · ${str(v.subject)}` : ""}</span></div>
+                    {draft && n !== undefined ? (
+                      sure === n ? (
+                        <div className="flex gap-1"><Button size="sm" loading={restore.loading} onClick={() => void restore.mutate(n)}>Replace the draft</Button><Button size="sm" variant="ghost" onClick={() => setSure(null)}>Cancel</Button></div>
+                      ) : <Button size="sm" variant="outline" aria-label={`Restore version ${n}`} onClick={() => setSure(n)}>Restore</Button>
+                    ) : null}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+          {restore.error ? <ApiError error={restore.error} title="Could not restore that version" /> : null}
+        </SectionCard>
+        {failure ? <ApiError error={failure} title="That did not work" /> : null}
+      </div>
+      <ConfirmSpendDialog {...dialog} />
+    </div>
+  );
+}

package/blocks/newsletter/components/more-rows.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+/**
+ * MoreRows: the honest end of a list that the API pages. Shows how many rows are on screen and, while the API has
+ * another page, a "Load more" button. A list never ends silently: either every row is reachable or this says there are more.
+ * (Same contract as the foundation's LoadMore; kept local so the newsletter block does not wait on it.)
+ *
+ * SDK operations: none.
+ */
+import { Button } from "@graph8/sdk/ui";
+
+export interface MoreRowsProps {
+  /** Rows on screen. */
+  shown: number;
+  /** What the rows are, plural: "people". */
+  noun: string;
+  hasMore: boolean;
+  loading?: boolean;
+  onMore: () => void;
+}
+
+export function MoreRows({ shown, noun, hasMore, loading, onMore }: MoreRowsProps) {
+  if (!hasMore) return null;
+  return (
+    <div className="text-muted-foreground flex items-center justify-between gap-3 py-2 text-sm">
+      <span role="status">Showing {shown.toLocaleString()} {noun}</span>
+      <Button type="button" variant="outline" size="sm" loading={loading} onClick={onMore}>Load more</Button>
+    </div>
+  );
+}

package/blocks/newsletter/components/newsletter-editor.tsx

@@ -81,7 +81,7 @@ export function NewsletterEditor({ initialNewsletterId, onSelectIssue }: Newslet
         {!current ? <EmptyState title="Pick a newsletter" description="Choose a newsletter to see its issues, or create one." /> : (
           <>
             <div className="flex items-center justify-between">
-              <h2 className="text-lg font-semibold">{current.name} <span className="text-muted-foreground text-sm font-normal">{current.status}</span></h2>
+              <h2 className="text-lg font-medium">{current.name} <span className="text-muted-foreground text-sm font-normal">{current.status}</span></h2>
               {live ? <Button variant="outline" size="sm" loading={pause.loading} onClick={() => void pause.mutate(undefined)}>Pause newsletter</Button> : <Button size="sm" onClick={() => setPending({ kind: "activate" })}>Activate newsletter</Button>}
             </div>
             {pause.error ? <ApiError error={pause.error} title="Could not pause" /> : null}

package/blocks/newsletter/components/newsletter-list-syncs.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+/**
+ * NewsletterListSyncs: keep subscribers in step with your lists. A synced list adds its contacts as subscribers; run a
+ * sync now to pull in the latest, or turn it off.
+ *
+ * SDK operations, in the order the screen uses them:
+ *   1. listNewsletterListSyncs     GET    /newsletters/{id}/list-syncs                       (read)
+ *   2. listLists                   GET    /lists?page&limit&search (paged, "Load more")      (read; the lists you can turn on)
+ *   3. enableNewsletterListSync    POST   /newsletters/{id}/list-syncs { audience_list_id, attested_text }   (write, confirmed: people are subscribed to a newsletter)
+ *   4. runNewsletterListSync       POST   /newsletters/{id}/list-syncs/{list}/run            (write, confirmed: adds the list's people now)
+ *   5. disableNewsletterListSync   DELETE /newsletters/{id}/list-syncs/{list}                (destructive, confirmed: stops syncing; subscribers stay)
+ *
+ * Turning a sync on subscribes real people, so the person confirms the consent statement first: the exact text is shown
+ * and sent as `attested_text`. The consent claim is theirs; the dialog does not pretend otherwise.
+ */
+import { useState } from "react";
+import { Button, Input } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useConfirmAction } from "@/g8/components/confirmed-action";
+import { EmptyState } from "@/g8/components/empty-state";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { usePaginated } from "@/g8/hooks/use-paginated";
+import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
+import { asRec, num, pageOf, rowsOf, str } from "../lib/newsletter-extra";
+import type { Rec } from "../lib/newsletter-extra";
+import { MoreRows } from "./more-rows";
+
+export interface NewsletterListSyncsProps {
+  newsletterId: string;
+  /** Called after a sync changed who is subscribed. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+export const CONSENT_TEXT = "I confirm the people in this list agreed to receive this newsletter.";
+const PAGE = 50;
+
+export function NewsletterListSyncs({ newsletterId, onChanged, className }: NewsletterListSyncsProps) {
+  const base = `/newsletters/${encodeURIComponent(newsletterId)}/list-syncs`;
+  const { ask, dialog, failure } = useConfirmAction();
+  const [search, setSearch] = useState("");
+  const [note, setNote] = useState("");
+  const syncs = useG8Query((signal) => g8Get(base, undefined, { signal }), [newsletterId]);
+  const rows = rowsOf<Rec>(syncs.data?.data, "list_syncs");
+  // Disabled rows stay in the API list (so they can be turned back on): only enabled ones count as synced.
+  const synced = new Set(rows.filter((r) => r.enabled !== false).map((r) => String(r.audience_list_id)));
+  const lists = usePaginated<Rec>(async (cursor, signal) => {
+    const page = cursor ? Number(cursor) : 1;
+    const res = await g8Get("/lists", { limit: PAGE, page, search: search.trim() || undefined }, { signal });
+    const got = rowsOf<Rec>(res.data, "lists");
+    const more = (res.pagination as { has_next?: boolean } | undefined)?.has_next ?? got.length >= PAGE;
+    return pageOf(got, more && got.length > 0 ? page + 1 : null);
+  }, [search]);
+  const changed = (): void => { void syncs.refetch(); onChanged?.(); };
+
+  const enable = (l: { id?: unknown; title?: unknown; name?: unknown }): void => ask({
+    tier: "external", title: `Subscribe "${str(l.title) || str(l.name)}" to this newsletter`, confirmLabel: "Turn on sync",
+    description: <><p>People in this list become subscribers and will receive issues. You are confirming:</p><p className="mt-2 font-medium">{CONSENT_TEXT}</p></>,
+    run: () => g8Post(base, { audience_list_id: Number(l.id), attested_text: CONSENT_TEXT }), onDone: changed,
+  });
+  const run = (s: Rec): void => ask({
+    tier: "external", title: `Sync "${str(s.name)}" now`, confirmLabel: "Sync now",
+    recipients: num(s.contact_count),
+    description: "Adds the list's people who are not subscribed yet. People who unsubscribed stay unsubscribed.",
+    run: async () => { await g8Post(`${base}/${encodeURIComponent(String(s.audience_list_id))}/run`); setNote(`Synced "${str(s.name)}".`); }, onDone: changed,
+  });
+  const disable = (s: Rec): void => ask({
+    tier: "destructive", title: `Stop syncing "${str(s.name)}"`, confirmLabel: "Stop syncing",
+    description: "New contacts added to this list are no longer subscribed. People already subscribed stay subscribed.",
+    tolerateStatus: [404], run: () => g8Delete(`${base}/${encodeURIComponent(String(s.audience_list_id))}`), onDone: changed,
+  });
+
+  return (
+    <div className={className}>
+      <div className="grid gap-4">
+        <SectionCard title="Synced lists" description="Subscribers are kept in step with these lists.">
+          {syncs.error ? <ApiError error={syncs.error} title="Could not load the synced lists" onRetry={() => void syncs.refetch()} /> : rows.length === 0 ? (
+            <EmptyState compact title="No lists are synced" description="Choose a list below to subscribe its people." />
+          ) : (
+            <ul className="grid gap-2">
+              {rows.map((s) => (
+                <li key={String(s.audience_list_id)} className="flex items-center justify-between gap-3 rounded-md border p-3">
+                  <div className="min-w-0"><span className="block truncate text-sm font-medium">{str(s.name) || `List ${String(s.audience_list_id)}`}</span><span className="text-muted-foreground text-xs">{num(s.contact_count) == null ? "" : `${(s.contact_count as number).toLocaleString()} contacts`}</span></div>
+                  {s.enabled === false ? <StatusPill tone="neutral">Off</StatusPill> : <StatusPill tone="positive">On</StatusPill>}
+                  {s.enabled === false ? (
+                    <Button size="sm" variant="outline" aria-label={`Turn ${str(s.name)} back on`} onClick={() => enable({ id: s.audience_list_id, name: s.name })}>Turn on sync</Button>
+                  ) : <div className="flex gap-1"><Button size="sm" variant="outline" aria-label={`Sync ${str(s.name)} now`} onClick={() => run(s)}>Sync now</Button><Button size="sm" variant="ghost" aria-label={`Stop syncing ${str(s.name)}`} onClick={() => disable(s)}>Stop</Button></div>}
+                </li>
+              ))}
+            </ul>
+          )}
+          {note ? <p role="status" className="mt-2 text-sm">{note}</p> : null}
+        </SectionCard>
+        <SectionCard title="Add a list" description="Find the list to subscribe.">
+          <Input aria-label="Search lists" placeholder="Search lists" value={search} onChange={(e) => setSearch(e.target.value)} className="mb-3 max-w-sm" />
+          {lists.error ? <ApiError error={lists.error} title="Could not load your lists" onRetry={() => void lists.reload()} /> : lists.loading ? <p className="text-muted-foreground text-sm" aria-busy="true">Loading lists...</p> : lists.items.length === 0 ? (
+            <EmptyState compact title={search ? "No list matches" : "You have no lists"} description={search ? "Try another name." : "Create a list in Lists first."} />
+          ) : (
+            <>
+              <ul className="grid gap-2">
+                {lists.items.map((l) => (
+                  <li key={String(l.id)} className="flex items-center justify-between gap-3 rounded-md border p-3">
+                    <span className="truncate text-sm">{str(l.title)}</span>
+                    {synced.has(String(l.id)) ? <StatusPill tone="positive">Synced</StatusPill> : <Button size="sm" variant="outline" aria-label={`Sync ${str(l.title)}`} onClick={() => enable(l)}>Turn on sync</Button>}
+                  </li>
+                ))}
+              </ul>
+              <MoreRows shown={lists.items.length} noun="lists" hasMore={lists.hasMore} loading={lists.loadingMore} onMore={() => void lists.loadMore()} />
+            </>
+          )}
+        </SectionCard>
+        {failure ? <ApiError error={failure} title="That did not work" /> : null}
+      </div>
+      <ConfirmSpendDialog {...dialog} />
+    </div>
+  );
+}