@graph8/sdk 0.361.0 → 0.370.0

package/blocks/objects/components/object-schema-editor.tsx

@@ -27,6 +27,7 @@ import { useObjectSchema } from "../hooks/use-object-schema";
 import { OBJECT_ICONS, isObjectsApiMissing, isValidSlug, slugify } from "../lib/object-types";
 import type { ObjectAttribute, ObjectDefinition } from "../lib/object-types";
 import { AttributeFormDialog } from "./attribute-form-dialog";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface ObjectSchemaEditorProps {
   /** Object to open first. */
@@ -93,6 +94,7 @@ function ObjectDetailsForm({ object, attributes, onSaved }: { object: ObjectDefi
 }
 
 export function ObjectSchemaEditor({ initialObjectSlug, onSelectObject }: ObjectSchemaEditorProps) {
+  const brand = useBrand();
   const [selected, setSelected] = useState<string | undefined>(initialObjectSlug);
   const [editing, setEditing] = useState<ObjectAttribute | "new" | null>(null);
   const [pending, setPending] = useState<Pending | null>(null);
@@ -113,7 +115,7 @@ export function ObjectSchemaEditor({ initialObjectSlug, onSelectObject }: Object
 
   if (objects.loading && !objects.data) return <div className="grid gap-2" aria-busy="true"><Skeleton className="h-8 w-48" /><Skeleton className="h-40 w-full" /></div>;
   if (isObjectsApiMissing(objects.error)) {
-    return <EmptyState title="Custom objects are unavailable" description="The graph8 API at this base URL does not serve custom objects. Check G8_API_URL and that it points at a current graph8 backend, then reload." />;
+    return <EmptyState title="Custom objects are unavailable" description={`The ${brand.linkLabel} API at this base URL does not serve custom objects. Check G8_API_URL and that it points at a current ${brand.linkLabel} backend, then reload.`} />;
   }
   if (objects.error) return <ApiError error={objects.error} title="Could not load objects" onRetry={() => void objects.refetch()} />;
 

package/blocks/objects/components/object-table.tsx

@@ -13,6 +13,7 @@
  */
 
 import { useEffect, useState } from "react";
+import type { ReactNode } from "react";
 import { Button, Input, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
@@ -20,6 +21,8 @@ import { EmptyState } from "@/g8/components/empty-state";
 import { g8Delete, g8Get } from "@/g8/lib/g8-client";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { usePaginated } from "@/g8/hooks/use-paginated";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { RecordLink } from "@/g8/components/screen/record-link";
 import { useObjectSchema } from "../hooks/use-object-schema";
 import { formatValue, isObjectsApiMissing, recordTitle } from "../lib/object-types";
 import { ObjectNotFound } from "./object-not-found";
@@ -27,6 +30,8 @@ import type { ObjectRecord } from "../lib/object-types";
 import { RecordFormDialog } from "./record-form-dialog";
 
 export interface ObjectTableProps {
+  /** URL param the host screen reads for this record type. With it the name is a real link (Cmd-click opens it in a new tab); without it a plain button. */
+  linkParam?: string;
   objectSlug: string;
   /** Rows per request, 1-200. Default 50. */
   pageSize?: number;
@@ -36,7 +41,7 @@ export interface ObjectTableProps {
   maxColumns?: number;
 }
 
-export function ObjectTable({ objectSlug, pageSize = 50, onSelectRecord, maxColumns = 6 }: ObjectTableProps) {
+export function ObjectTable({ linkParam, objectSlug, pageSize = 50, onSelectRecord, maxColumns = 6 }: ObjectTableProps) {
   const schema = useObjectSchema(objectSlug);
   const slug = encodeURIComponent(objectSlug);
   const records = usePaginated<ObjectRecord>(
@@ -68,6 +73,11 @@ export function ObjectTable({ objectSlug, pageSize = 50, onSelectRecord, maxColu
     return <ApiError error={schema.error ?? records.error} title="Could not load records" onRetry={() => { void schema.refetch(); void records.reload(); }} />;
   }
 
+  const cellText = (c: (typeof columns)[number], i: number, record: ObjectRecord): ReactNode => {
+    const text = formatValue(c, record.values?.[c.slug]) || (i === 0 ? recordTitle(schema.definition, schema.attributes, record) : "");
+    return i === 0 && onSelectRecord && text ? <RecordLink param={linkParam} id={record.id} onOpen={() => onSelectRecord(record)}>{text}</RecordLink> : text;
+  };
+
   return (
     <div className="grid gap-3">
       <div className="flex items-center justify-between gap-2">
@@ -92,9 +102,9 @@ export function ObjectTable({ objectSlug, pageSize = 50, onSelectRecord, maxColu
           </TableHeader>
           <TableBody>
             {rows.map((record) => (
-              <TableRow key={record.id} className={onSelectRecord ? "cursor-pointer" : undefined} onClick={() => onSelectRecord?.(record)}>
+              <TableRow key={record.id} className={onSelectRecord ? "cursor-pointer" : undefined} {...(onSelectRecord ? rowActivationProps(() => onSelectRecord(record)) : {})}>
                 {columns.map((c, i) => (
-                  <TableCell key={c.slug}>{formatValue(c, record.values?.[c.slug]) || (i === 0 ? recordTitle(schema.definition, schema.attributes, record) : "")}</TableCell>
+                  <TableCell key={c.slug}>{cellText(c, i, record)}</TableCell>
                 ))}
                 <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
                   <Button variant="ghost" size="sm" onClick={() => setForm({ record })}>Edit</Button>

package/blocks/objects/components/objects-screen.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+/**
+ * ObjectsScreen: the finished custom-objects workspace (HubSpot custom objects / Salesforce objects). Pick an object, work its
+ * records, open one for its values, owners, relationships and history, and define new objects and fields. No props are required.
+ *
+ * Composes: ScreenLayout, StatStrip, SplitView, FormSheet (screen kit) with ObjectTable, ObjectRecordDetail and
+ * ObjectSchemaEditor (this block). Standard objects (contacts, companies, deals) appear next to your own.
+ *
+ * Flows: switch between objects (deep link ?object=) - search the loaded rows, load more - create, edit and archive a record
+ * - open a record (deep link ?id=, full page with &view=full) to see values, owners, relationships and changes, edit, archive or restore it - define a
+ * new object, add, edit and archive fields, rename an object ("Define objects", needs an Admin key with objects:manage).
+ *
+ * SDK operations: none of its own. listObjects (picker, stats) is `read`; everything else runs inside the parts it composes,
+ * and every archive (record, field, object) goes through ConfirmSpendDialog. A 404 on the list call means the backend does not
+ * serve custom objects; the screen says so instead of showing an empty picker.
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { Box, Maximize2, Minimize2, Settings2 } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Get } from "@/g8/lib/g8-client";
+import { useObjectSchema } from "../hooks/use-object-schema";
+import { isObjectsApiMissing } from "../lib/object-types";
+import type { ObjectDefinition } from "../lib/object-types";
+import { ObjectNotFound } from "./object-not-found";
+import { ObjectRecordDetail } from "./object-record-detail";
+import { ObjectSchemaEditor } from "./object-schema-editor";
+import { ObjectTable } from "./object-table";
+
+export interface ObjectsScreenProps {
+  /** Object to open when the URL names none. Default: the first non-standard object, else the first one. */
+  initialObjectSlug?: string;
+  /** Show "Define objects" (the schema editor). Default true; it needs an Admin key behind the proxy. */
+  allowSchemaEditing?: boolean;
+  /** Extra buttons in the page header. */
+  toolbarActions?: ReactNode;
+  className?: string;
+}
+
+export function ObjectsScreen({ initialObjectSlug, allowSchemaEditing = true, toolbarActions, className }: ObjectsScreenProps) {
+  const [objectParam, setObjectParam] = useUrlState("object");
+  const [recordId, setRecordIdRaw] = useUrlState("id");
+  const [view, setView] = useUrlState("view");
+  const full = view === "full" && Boolean(recordId);
+  const setRecordId = (v: string | null): void => { if (v == null) setView(null); setRecordIdRaw(v); };
+  const [schemaOpen, setSchemaOpen] = useState(false);
+  const [tableKey, setTableKey] = useState(0);
+  const objects = useG8Query((signal) => g8Get<ObjectDefinition[]>("/objects", {}, { signal }).then((r) => r.data ?? []), []);
+  const all = (objects.data ?? []).filter((o) => !o.is_archived);
+  const slug = objectParam || initialObjectSlug || (all.find((o) => !o.is_system) ?? all[0])?.slug || "";
+  const current = all.find((o) => o.slug === slug);
+  const schema = useObjectSchema(slug || undefined);
+
+  const closeSchema = (open: boolean): void => {
+    setSchemaOpen(open);
+    if (open) return;
+    void objects.refetch();
+    void schema.refetch();
+    setTableKey((k) => k + 1);
+  };
+  const pick = (next: string) => { setObjectParam(next); setRecordId(null); };
+
+  if (isObjectsApiMissing(objects.error)) return <ObjectNotFound what="object" error={objects.error} />;
+
+  return (
+    <ScreenLayout
+      className={className}
+      title={current?.plural_noun ?? "Objects"}
+      description="Records of any type you define, next to your standard contacts, companies and deals."
+      icon={<Box className="size-5" aria-hidden />}
+      actions={
+        <>
+          {toolbarActions}
+          {allowSchemaEditing ? <Button variant="outline" size="sm" onClick={() => setSchemaOpen(true)}><Settings2 className="size-4" aria-hidden />Define objects</Button> : null}
+        </>
+      }
+      stats={[
+        { label: "Objects", value: objects.loading && !objects.data ? "-" : all.length, hint: `${all.filter((o) => !o.is_system).length} custom` },
+        { label: "Fields on this object", value: slug && !schema.loading ? schema.attributes.length : "-" },
+      ]}
+    >
+      {objects.error ? <ApiError error={objects.error} title="Could not load objects" onRetry={() => void objects.refetch()} /> : null}
+      {objects.loading && !objects.data ? <Skeleton className="h-9 w-full" /> : null}
+
+      {all.length > 0 ? (
+        <div className="mb-3 flex flex-wrap gap-2" role="group" aria-label="Objects">
+          {all.map((o) => (
+            <Button key={o.slug} variant={o.slug === slug ? "default" : "outline"} size="sm" aria-pressed={o.slug === slug} onClick={() => pick(o.slug)}>
+              {o.plural_noun}{o.is_system ? <span className="ml-1 text-xs opacity-70">standard</span> : null}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+
+      {!objects.loading && !objects.error && all.length === 0 ? (
+        <EmptyState
+          title="No objects yet"
+          description="Define an object such as an invoice or a shipment, give it fields, then add records."
+          action={allowSchemaEditing ? <Button onClick={() => setSchemaOpen(true)}>Define your first object</Button> : undefined}
+        />
+      ) : null}
+
+      {slug ? (
+        <SplitView
+          detailOpen={Boolean(recordId)}
+          expanded={full}
+          onExpandedChange={(e) => setView(e ? "full" : null)}
+          onCloseDetail={() => setRecordId(null)}
+          detailWidth="lg"
+          list={<ObjectTable linkParam="id" key={`${slug}:${tableKey}`} objectSlug={slug} onSelectRecord={(r) => setRecordId(r.id)} />}
+          detail={recordId ? (
+            <div className="flex flex-col gap-2">
+              <div className="flex justify-end">
+                <Button variant="ghost" size="sm" onClick={() => setView(full ? null : "full")}>
+                  {full ? <Minimize2 className="size-4" aria-hidden /> : <Maximize2 className="size-4" aria-hidden />}{full ? "Back to split view" : "Open full page"}
+                </Button>
+              </div>
+            <ObjectRecordDetail
+              key={`${slug}:${recordId}`}
+              objectSlug={slug}
+              recordId={recordId}
+              onBack={() => setRecordId(null)}
+              onArchived={() => { setRecordId(null); setTableKey((k) => k + 1); }}
+            />
+            </div>
+          ) : null}
+        />
+      ) : null}
+
+      <FormSheet open={schemaOpen} onOpenChange={closeSchema} title="Define objects" description="Create objects, add fields, rename or archive them. Needs an Admin key.">
+        <ObjectSchemaEditor
+          initialObjectSlug={slug || undefined}
+          onSelectObject={pick}
+        />
+      </FormSheet>
+    </ScreenLayout>
+  );
+}

package/blocks/objects/lib/object-types.ts

@@ -8,7 +8,7 @@
  * an attribute definition into the right input, display text and API value.
  */
 
-import { G8Error } from "@graph8/sdk";
+import { G8Error } from "@graph8/sdk/errors";
 
 export type AttributeType =
   | "text" | "number" | "currency" | "date" | "timestamp" | "checkbox" | "select" | "status"

package/blocks/pages/README.md

@@ -3,8 +3,20 @@
 Editable React screens for the marketing-site side of a product: landing pages (list, section editor, publish),
 a content library, the brand kit and SEO audits. Install with `npx @graph8/sdk add pages`.
 
+## Screens
+
+`PagesScreen` (`components/pages-screen.tsx`) is the finished page: landing pages with the editor beside the list, plus content, brand kit and SEO tabs.
+
+```tsx
+import { PagesScreen } from "@/g8/pages/components/pages-screen";
+export default function Page() { return <PagesScreen />; }
+```
+
+Flows: list and filter landing pages, create blank (free) or with AI (confirmed spend), open one (deep link `?id=`) to edit sections, preview, restore a version, publish or unpublish (confirmed) and delete (confirmed); manage the content library; re-scan the brand kit; run SEO audits. Needs the proxy prefixes listed under Prerequisites. Optional props: `defaultDomain`, `renderDetailActions`, `extraDetailTabs`, `toolbarActions`.
+
 | Component | What it is |
 |---|---|
+| `PagesScreen` | The finished page: landing pages with the editor beside them, content, brand kit and SEO tabs. |
 | `PageList` | Landing pages with a status filter; create blank or with AI; publish, unpublish, delete. |
 | `PageEditor` | Lite editor: page details, one card per section (its text fields), preview, version restore, publish. Not a WYSIWYG canvas. |
 | `ContentLibrary` | Content inventory (blogs, website pages): filters, add by URL, edit sheet, SEO enrichment, delete. |

package/blocks/pages/block.json

@@ -14,37 +14,49 @@
     "foundation"
   ],
   "operations": [
-    "list_landing_pages_landing_pages_get",
+    "create_content_page_content_pages_post",
     "create_landing_page_landing_pages_post",
-    "publish_landing_page_landing_pages__landing_page_id__publish_post",
-    "unpublish_landing_page_landing_pages__landing_page_id__unpublish_post",
-    "delete_landing_page_landing_pages__landing_page_id__delete",
-    "get_landing_page_landing_pages__landing_page_id__get",
-    "update_landing_page_landing_pages__landing_page_id__patch",
-    "update_landing_page_section_landing_pages__landing_page_id__sections__section_idx__patch",
     "create_landing_page_preview_link_landing_pages__landing_page_id__preview_get",
-    "list_landing_page_versions_landing_pages__landing_page_id__versions_get",
-    "restore_landing_page_version_landing_pages__landing_page_id__versions__version_num__restore_post",
-    "list_content_pages_content_pages_get",
-    "create_content_page_content_pages_post",
-    "get_content_page_content_pages__page_id__get",
-    "update_content_page_content_pages__page_id__patch",
-    "enrich_content_page_content_pages__page_id__enrich_seo_post",
     "delete_content_page_content_pages__page_id__delete",
+    "delete_landing_page_landing_pages__landing_page_id__delete",
+    "enrich_content_page_content_pages__page_id__enrich_seo_post",
     "get_brand_kit_overview_brand_kit_get",
-    "trigger_brand_extraction_brand_kit_extract_post",
-    "list_archetypes_brand_kit_archetypes_get",
+    "get_content_page_content_pages__page_id__get",
+    "get_landing_page_landing_pages__landing_page_id__get",
     "get_layout_selections_brand_kit_layout_selections_get",
-    "save_layout_selections_brand_kit_layout_selections_put",
-    "list_seo_audits_seo_audits_get",
-    "start_seo_audit_seo_audits_post",
-    "get_seo_audit_seo_audits__audit_id__get",
     "get_seo_audit_issues_seo_audits__audit_id__issues_get",
+    "get_seo_audit_seo_audits__audit_id__get",
+    "list_archetypes_brand_kit_archetypes_get",
+    "list_content_pages_content_pages_get",
+    "list_landing_page_versions_landing_pages__landing_page_id__versions_get",
+    "list_landing_pages_landing_pages_get",
+    "list_seo_audits_seo_audits_get",
     "list_seo_tracked_keywords_seo_rank_tracking_get",
+    "publish_landing_page_landing_pages__landing_page_id__publish_post",
+    "remove_seo_tracked_keywords_seo_rank_tracking_keywords_remove_post",
+    "restore_landing_page_version_landing_pages__landing_page_id__versions__version_num__restore_post",
+    "save_layout_selections_brand_kit_layout_selections_put",
     "save_seo_tracked_keywords_seo_rank_tracking_keywords_post",
-    "remove_seo_tracked_keywords_seo_rank_tracking_keywords_remove_post"
+    "start_seo_audit_seo_audits_post",
+    "trigger_brand_extraction_brand_kit_extract_post",
+    "unpublish_landing_page_landing_pages__landing_page_id__unpublish_post",
+    "update_content_page_content_pages__page_id__patch",
+    "update_landing_page_landing_pages__landing_page_id__patch",
+    "update_landing_page_section_landing_pages__landing_page_id__sections__section_idx__patch"
   ],
   "components": [
+    {
+      "name": "PagesScreen",
+      "file": "components/pages-screen.tsx",
+      "purpose": "Finished marketing-site workspace: landing pages with beside-the-list editor, content library, brand kit and SEO tabs.",
+      "operations": [
+        "get_landing_page_landing_pages__landing_page_id__get",
+        "list_landing_pages_landing_pages_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
     {
       "name": "PageList",
       "file": "components/page-list.tsx",
@@ -218,6 +230,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400.0"
   }
 }

package/blocks/pages/components/brand-kit-editor.tsx

@@ -99,7 +99,9 @@ function Layouts() {
   const picked = edit ?? saved;
   const save = useG8Mutation(() => g8Put("/brand-kit/layout-selections", { archetype_ids: picked }), { onSuccess: () => { setEdit(null); void selections.refetch(); } });
   const rows = rowsOf<Rec>(archetypes.data?.data);
-  const dirty = edit !== null && JSON.stringify([...picked].sort()) !== JSON.stringify([...saved].sort());
+  // The saved selection must be known before anything is ticked or saved: ticking first would replace it with just that box.
+  const savedKnown = selections.data !== undefined && !selections.error;
+  const dirty = savedKnown && edit !== null && JSON.stringify([...picked].sort()) !== JSON.stringify([...saved].sort());
   const toggle = (id: string) => setEdit(picked.includes(id) ? picked.filter((p) => p !== id) : [...picked, id]);
   return (
     <Card>
@@ -107,13 +109,14 @@ function Layouts() {
       <CardContent className="space-y-3">
         <p className="text-muted-foreground text-sm">New landing pages are built from the layouts you tick.</p>
         {archetypes.error ? <ApiError error={archetypes.error} onRetry={() => void archetypes.refetch()} /> : null}
+        {selections.error ? <ApiError error={selections.error} title="Could not load your saved layouts" onRetry={() => void selections.refetch()} /> : null}
         {archetypes.loading && !archetypes.data ? <Skeleton className="h-24 w-full" /> : null}
         <div className="grid gap-2 sm:grid-cols-2">
           {rows.map((a) => {
             const id = text(a.id);
             return (
               <label key={id} className="flex cursor-pointer items-start gap-2 rounded-md border p-3 text-sm">
-                <input type="checkbox" checked={picked.includes(id)} onChange={() => toggle(id)} aria-label={text(a.name)} />
+                <input type="checkbox" checked={picked.includes(id)} disabled={!savedKnown} onChange={() => toggle(id)} aria-label={text(a.name)} />
                 <span><span className="font-medium">{text(a.name)}</span><br /><span className="text-muted-foreground">{text(a.description)}</span></span>
               </label>
             );

package/blocks/pages/components/content-library.tsx

@@ -23,12 +23,16 @@ import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { ApiError } from "@/g8/components/api-error";
 import { EmptyState } from "@/g8/components/empty-state";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
-import { asRec, num, rowsOf, text } from "../lib/studio";
-import type { ContentPageRow } from "../lib/studio";
+import { asRec, num, rowsOf, shortDate, text } from "../lib/studio";
+import type { ContentPageRow, Rec } from "../lib/studio";
+import { plural } from "@/g8/lib/plural";
 
 export interface ContentLibraryProps {
   pageSize?: number;
   className?: string;
+  /** Controlled: the content item whose full record is open (for a `?id=` deep link). */
+  selectedId?: string | null;
+  onSelectedChange?: (id: string | null) => void;
 }
 
 const TYPES = ["", "website", "blog", "linkedin", "newsletter"];
@@ -45,14 +49,32 @@ function Select({ id, value, options, onChange }: { id: string; value: string; o
   );
 }
 
-function EditSheet({ pageId, onClose, onSaved }: { pageId: string; onClose: () => void; onSaved: () => void }) {
+/** Every read-only field the content record carries (labels and keys come from the Studio content response). */
+function contentFacts(d: Rec): Array<[string, string]> {
+  const n = (k: string): string => (d[k] == null ? "" : text(d[k]));
+  const yes = (k: string): string => (d[k] == null ? "" : d[k] ? "Yes" : "No");
+  return [
+    ["Type", label(text(d.content_type, "website"))], ["Source", n("source")], ["Domain", n("domain")], ["Owned", yes("is_owned")],
+    ["H1", n("h1")], ["Meta description", n("meta_description")], ["Words", n("word_count")], ["Crawl status", n("crawl_status")],
+    ["SEO score", n("seo_score")], ["AEO score", n("aeo_score")], ["Freshness", n("freshness_score")], ["Priority", n("priority_score")],
+    ["Authority", n("authority_score")], ["Backlinks", n("backlinks_total")], ["Referring domains", n("referring_domains_count")], ["Organic keywords", n("organic_keywords_count")],
+    ["Keyword position", n("primary_keyword_position")], ["Keyword volume", n("primary_keyword_volume")], ["LLM grade", n("llm_grade")], ["Cited by LLMs", yes("llm_cited")],
+    ["AI overview", yes("ai_overview_present")], ["Clicks", n("gsc_clicks")], ["Impressions", n("gsc_impressions")], ["CTR", n("gsc_ctr")], ["Search position", n("gsc_position")],
+    ["Published", shortDate(d.published_at)], ["Last crawled", shortDate(d.last_crawled_at)], ["Created", shortDate(d.created_at)], ["Last synced", shortDate(d.semrush_last_synced)],
+  ];
+}
+
+function EditSheet({ pageId, onClose, onSaved, onAction }: { pageId: string; onClose: () => void; onSaved: () => void; onAction: (kind: "enrich" | "delete", page: ContentPageRow) => void }) {
   const detail = useG8Query((signal) => g8Get(`/content/pages/${encodeURIComponent(pageId)}`, undefined, { signal }), [pageId]);
   const [form, setForm] = useState({ title: "", primary_keyword: "", content_status: "idea", body_content: "" });
   const d = asRec(detail.data?.data);
   useEffect(() => {
     setForm({ title: text(d.title), primary_keyword: text(d.primary_keyword), content_status: text(d.content_status, "idea"), body_content: text(d.body_content) });
   }, [detail.data]);
-  const save = useG8Mutation(() => g8Patch(`/content/pages/${encodeURIComponent(pageId)}`, form), { onSuccess: () => { onSaved(); onClose(); } });
+  // Only the fields the person changed are sent, so nothing they did not touch can be blanked.
+  const original = { title: text(d.title), primary_keyword: text(d.primary_keyword), content_status: text(d.content_status, "idea"), body_content: text(d.body_content) };
+  const changed = Object.fromEntries(Object.entries(form).filter(([k, v]) => v !== original[k as keyof typeof original]));
+  const save = useG8Mutation(() => g8Patch(`/content/pages/${encodeURIComponent(pageId)}`, changed), { onSuccess: () => { onSaved(); onClose(); } });
   return (
     <Sheet open onOpenChange={(open) => { if (!open) onClose(); }}>
       <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
@@ -62,14 +84,24 @@ function EditSheet({ pageId, onClose, onSaved }: { pageId: string; onClose: () =
         </SheetHeader>
         <div className="space-y-3 px-4 pb-4">
           {detail.error ? <ApiError error={detail.error} onRetry={() => void detail.refetch()} /> : null}
-          {detail.loading && !detail.data ? <Skeleton className="h-32 w-full" /> : (
+          {/* The form (and Save) exist only once the page has loaded: after a failed load there is nothing to edit over. */}
+          {!detail.data ? (detail.error ? null : <Skeleton className="h-32 w-full" />) : (
             <>
+              <dl className="grid grid-cols-2 gap-2 text-sm">
+                {contentFacts(d).map(([k, v]) => (
+                  <div key={k}><dt className="text-muted-foreground text-xs">{k}</dt><dd className="truncate" title={v}>{v || "Not set"}</dd></div>
+                ))}
+              </dl>
+              <div className="flex gap-2">
+                <Button size="sm" variant="outline" onClick={() => onAction("enrich", { id: pageId, url: text(d.url), title: text(d.title) })}>Enrich SEO</Button>
+                <Button size="sm" variant="ghost" onClick={() => onAction("delete", { id: pageId, url: text(d.url), title: text(d.title) })}>Delete page</Button>
+              </div>
               <div className="space-y-1"><Label htmlFor="cl-title">Title</Label><Input id="cl-title" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} /></div>
               <div className="space-y-1"><Label htmlFor="cl-kw">Primary keyword</Label><Input id="cl-kw" value={form.primary_keyword} onChange={(e) => setForm({ ...form, primary_keyword: e.target.value })} /></div>
               <div className="space-y-1"><Label htmlFor="cl-status">Status</Label><Select id="cl-status" value={form.content_status} options={STATUSES.slice(1)} onChange={(v) => setForm({ ...form, content_status: v })} /></div>
               <div className="space-y-1"><Label htmlFor="cl-body">Body</Label><Textarea id="cl-body" rows={10} value={form.body_content} onChange={(e) => setForm({ ...form, body_content: e.target.value })} /></div>
               {save.error ? <ApiError error={save.error} title="Could not save" /> : null}
-              <Button loading={save.loading} onClick={() => void save.mutate(undefined)}>Save</Button>
+              <Button loading={save.loading} disabled={Object.keys(changed).length === 0} onClick={() => void save.mutate(undefined)}>Save</Button>
             </>
           )}
         </div>
@@ -78,12 +110,15 @@ function EditSheet({ pageId, onClose, onSaved }: { pageId: string; onClose: () =
   );
 }
 
-export function ContentLibrary({ pageSize = 25, className }: ContentLibraryProps) {
+export function ContentLibrary({ pageSize = 25, className, selectedId, onSelectedChange }: ContentLibraryProps) {
   const [type, setType] = useState("");
   const [status, setStatus] = useState("");
   const [offset, setOffset] = useState(0);
   const [url, setUrl] = useState("");
-  const [editing, setEditing] = useState<string | null>(null);
+  const [localEditing, setLocalEditing] = useState<string | null>(null);
+  const controlled = onSelectedChange !== undefined;
+  const editing = controlled ? (selectedId ?? null) : localEditing;
+  const setEditing = (id: string | null): void => (controlled ? onSelectedChange?.(id) : setLocalEditing(id));
   const [action, setAction] = useState<Action | null>(null);
 
   const list = useG8Query(
@@ -93,7 +128,7 @@ export function ContentLibrary({ pageSize = 25, className }: ContentLibraryProps
   const add = useG8Mutation((u: string) => g8Post("/content/pages", { url: u, content_type: type || "website" }), { onSuccess: () => { setUrl(""); void list.refetch(); } });
   const run = useG8Mutation(
     (a: Action) => (a.kind === "enrich" ? g8Post(`/content/pages/${encodeURIComponent(a.page.id)}/enrich-seo`) : g8Delete(`/content/pages/${encodeURIComponent(a.page.id)}`)),
-    { onSuccess: () => { setAction(null); void list.refetch(); } },
+    { onSuccess: (_r, a) => { setAction(null); if (a.kind === "delete" && a.page.id === editing) setEditing(null); void list.refetch(); } },
   );
 
   const data = asRec(list.data?.data);
@@ -143,14 +178,14 @@ export function ContentLibrary({ pageSize = 25, className }: ContentLibraryProps
         </Table>
       )}
       <div className="mt-3 flex items-center justify-between text-sm">
-        <span className="text-muted-foreground">{total} {total === 1 ? "item" : "items"}</span>
+        <span className="text-muted-foreground">{plural(total, "item")}</span>
         <div className="flex gap-2">
           <Button size="sm" variant="outline" disabled={offset === 0} onClick={() => setOffset(Math.max(0, offset - pageSize))}>Previous</Button>
           <Button size="sm" variant="outline" disabled={offset + pageSize >= total} onClick={() => setOffset(offset + pageSize)}>Next</Button>
         </div>
       </div>
 
-      {editing ? <EditSheet pageId={editing} onClose={() => setEditing(null)} onSaved={() => void list.refetch()} /> : null}
+      {editing ? <EditSheet pageId={editing} onClose={() => setEditing(null)} onSaved={() => void list.refetch()} onAction={(kind, page) => setAction({ kind, page })} /> : null}
       {action ? (
         <ConfirmSpendDialog open tier={action.kind === "enrich" ? "billable" : "destructive"}
           title={action.kind === "enrich" ? `Enrich SEO for "${name(action.page)}"` : `Delete "${name(action.page)}"`}

package/blocks/pages/components/page-list.tsx

@@ -25,10 +25,13 @@ import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import type { ConfirmTier } from "@/g8/components/confirm-spend-dialog";
 import { asRec, num, rowsOf, shortDate, text } from "../lib/studio";
 import type { LandingPageRow } from "../lib/studio";
+import { plural } from "@/g8/lib/plural";
 
 export interface PageListProps {
   /** Called with the page id when a row is opened. Wire it to your PageEditor route. */
   onOpen?: (pageId: string) => void;
+  /** Called with the page id after a page is deleted (for example to close it if it is open beside the list). */
+  onDeleted?: (pageId: string) => void;
   pageSize?: number;
   className?: string;
 }
@@ -56,7 +59,7 @@ function confirmCopy(p: Pending): { tier: ConfirmTier; title: string; descriptio
   return { tier: "destructive", title: `Delete "${p.page.name}"`, description: "The page and its version history are removed.", label: "Delete", affected: 1 };
 }
 
-export function PageList({ onOpen, pageSize = 25, className }: PageListProps) {
+export function PageList({ onOpen, onDeleted, pageSize = 25, className }: PageListProps) {
   const [status, setStatus] = useState("");
   const [offset, setOffset] = useState(0);
   const [name, setName] = useState("");
@@ -72,7 +75,7 @@ export function PageList({ onOpen, pageSize = 25, className }: PageListProps) {
     if (p.kind === "publish") return g8Post(`${base}/publish`);
     if (p.kind === "unpublish") return g8Post(`${base}/unpublish`);
     return g8Delete(base);
-  }, { onSuccess: () => { setPending(null); void list.refetch(); } });
+  }, { onSuccess: (_res, p) => { setPending(null); void list.refetch(); if (p.kind === "delete") onDeleted?.(p.page.id); } });
   const blank = useG8Mutation((title: string) => g8Post("/landing-pages", { name: title || undefined, generate: false }), {
     onSuccess: (res) => {
       setName("");
@@ -143,7 +146,7 @@ export function PageList({ onOpen, pageSize = 25, className }: PageListProps) {
       )}
 
       <div className="mt-3 flex items-center justify-between text-sm">
-        <span className="text-muted-foreground">{total} {total === 1 ? "page" : "pages"}</span>
+        <span className="text-muted-foreground">{plural(total, "page")}</span>
         <div className="flex gap-2">
           <Button size="sm" variant="outline" disabled={offset === 0} onClick={() => setOffset(Math.max(0, offset - pageSize))}>Previous</Button>
           <Button size="sm" variant="outline" disabled={offset + pageSize >= total} onClick={() => setOffset(offset + pageSize)}>Next</Button>