@graph8/sdk 0.303.0 → 0.357.0

package/blocks/objects/recipes/upsert-records-from-your-system.ts

@@ -0,0 +1,30 @@
+/**
+ * @title Sync records from your own system into an object (idempotent upsert)
+ * @when A nightly or webhook-driven sync where the same external row can arrive twice. Upsert matches on one
+ * attribute (it must be unique), updates that record if it exists and creates it if not, so reruns never duplicate.
+ */
+import { g8, G8Error } from "@graph8/sdk";
+
+g8.init({ apiKey: process.env.G8_API_KEY! });
+
+interface ExternalInvoice {
+  number: string;
+  amount: number;
+  status: "draft" | "sent" | "paid" | "overdue";
+}
+
+export async function syncInvoices(rows: ExternalInvoice[]): Promise<{ ok: number; failed: Array<{ number: string; reason: string }> }> {
+  let ok = 0;
+  const failed: Array<{ number: string; reason: string }> = [];
+  for (const row of rows) {
+    try {
+      // `number` is the matching attribute: it must be marked unique on the object.
+      await g8.objects.upsertRecord("invoices", "number", { number: row.number, amount: row.amount, status: row.status });
+      ok += 1;
+    } catch (err) {
+      // A 422 names every bad field at once; keep going so one bad row does not block the batch.
+      failed.push({ number: row.number, reason: err instanceof G8Error ? JSON.stringify(err.detail ?? err.message) : String(err) });
+    }
+  }
+  return { ok, failed };
+}

package/blocks/pages/README.md

@@ -0,0 +1,104 @@
+# pages: landing pages & content
+
+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`.
+
+| Component | What it is |
+|---|---|
+| `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. |
+| `BrandKitEditor` | Palette, fonts and voice measured from the website, a re-scan action, and the page layouts new pages may use. |
+| `SeoReport` | Run a site audit, read score and issues, track keyword rankings. |
+
+## Flow, in order (and the ids passed between steps)
+
+1. `PageList` calls `GET /landing-pages` and shows rows. Each row's `id` is the **page id** used by every later call.
+2. Create: `POST /landing-pages` with `generate:false` (free, empty page) or `generate:true` (AI writes the page, **billable**,
+   confirmed in the UI). The response `data.id` is the new page id; the component hands it to `onOpen(pageId)`.
+3. `PageEditor pageId=...` reads `GET /landing-pages/{id}`. `data.sections` is an array (sections mode) or `null` (freeform).
+   Saving a section calls `PATCH /landing-pages/{id}/sections/{idx}` with the **whole** content object (it replaces the old one).
+4. Versions: `GET .../versions` lists snapshots; `POST .../versions/{version_num}/restore` rolls back (the current state is snapshotted first).
+5. Publish: `POST .../publish` (**external**, confirmed). A published page keeps serving its published HTML until published again.
+6. `ContentLibrary`: `GET /content/pages` -> row `id` -> `GET/PATCH /content/pages/{id}`; `POST .../enrich-seo` is **billable**; delete is **destructive**.
+7. `BrandKitEditor`: `GET /brand-kit` (status `not_extracted | generating | extracted | failed`) -> `POST /brand-kit/extract` -> poll step 1 while `generating`.
+8. `SeoReport`: `POST /seo/audits` (**billable**, reserves credits by `max_pages`) -> `data.id` = audit id -> poll `GET /seo/audits/{id}` until
+   `state.is_terminal` -> `GET /seo/audits/{id}/issues`.
+
+## Mounting
+
+```tsx
+// app/pages/page.tsx
+"use client";
+import { useRouter } from "next/navigation";
+import { PageList } from "@/components/g8/pages/components/page-list";
+export default function Pages() { const router = useRouter(); return <PageList onOpen={(id) => router.push(`/pages/${id}`)} />; }
+```
+
+`PageEditor` takes `pageId`; `ContentLibrary`, `BrandKitEditor` and `SeoReport` take no required props.
+
+## Prerequisites
+
+- `foundation` installed, the `/api/g8` proxy route mounted with `allowedPrefixes` including `landing-pages`, `content`, `brand-kit`, `seo`.
+- `@graph8/sdk/ui` peers installed (the CLI lists them).
+- `where: "api"`: a company website on the workspace profile (the brand kit measures it), or pass a URL to the re-scan.
+- `where: "app"`: a domain for published pages if the customer does not want the workspace default.
+
+## Defaults the agent should use without asking
+
+- Create from code with `generate:false`; the AI create stays behind a credits confirmation in the UI.
+- 25 rows per page; Previous/Next.
+- Mount `/pages` (list) and `/pages/[id]` (editor); put the other three screens behind tabs of a Marketing area.
+
+## Ask the person first
+
+- **Publishing** any page (it is public the moment the call returns).
+- The SEO audit **page limit** (it reserves credits; the API has no credit-balance read, so the dialog explains rather than quotes).
+- Re-scanning the brand kit with a **different URL** (replaces the stored design tokens).
+
+## Known limits
+
+- The editor changes text fields of sections-mode pages. Freeform pages (raw HTML) can be previewed, published and
+  versioned, but their HTML is edited with the HTML routes (`replaceLandingPageHtml`, `setLandingPageText`) or in the graph8 app.
+- Responses for Studio routes are open-shaped; the screens read only the fields listed in `lib/studio.ts` and ignore the rest.
+
+## Operations
+
+| SDK method (`g8.api.*`) | Route | Tier | Scope |
+|---|---|---|---|
+| `listLandingPages` | GET `/api/v1/landing-pages` | read | `campaigns:read` |
+| `createLandingPage` | POST `/api/v1/landing-pages` | billable | `campaigns:run` |
+| `publishLandingPage` | POST `/api/v1/landing-pages/{landing_page_id}/publish` | external | `campaigns:run` |
+| `unpublishLandingPage` | POST `/api/v1/landing-pages/{landing_page_id}/unpublish` | external | `campaigns:run` |
+| `deleteLandingPage` | DELETE `/api/v1/landing-pages/{landing_page_id}` | destructive | `campaigns:delete` |
+| `getLandingPage` | GET `/api/v1/landing-pages/{landing_page_id}` | read | `campaigns:read` |
+| `updateLandingPage` | PATCH `/api/v1/landing-pages/{landing_page_id}` | write | `campaigns:write` |
+| `updateLandingPageSection` | PATCH `/api/v1/landing-pages/{landing_page_id}/sections/{section_idx}` | write | `campaigns:write` |
+| `createLandingPagePreviewLink` | GET `/api/v1/landing-pages/{landing_page_id}/preview` | read | `campaigns:read` |
+| `listLandingPageVersions` | GET `/api/v1/landing-pages/{landing_page_id}/versions` | read | `campaigns:read` |
+| `restoreLandingPageVersion` | POST `/api/v1/landing-pages/{landing_page_id}/versions/{version_num}/restore` | write | `campaigns:write` |
+| `listContentPages` | GET `/api/v1/content/pages` | read | `campaigns:read` |
+| `createContentPage` | POST `/api/v1/content/pages` | write | `campaigns:write` |
+| `getContentPage` | GET `/api/v1/content/pages/{page_id}` | read | `campaigns:read` |
+| `updateContentPage` | PATCH `/api/v1/content/pages/{page_id}` | write | `campaigns:write` |
+| `enrichContentPage` | POST `/api/v1/content/pages/{page_id}/enrich-seo` | billable | `campaigns:run` |
+| `deleteContentPage` | DELETE `/api/v1/content/pages/{page_id}` | destructive | `campaigns:delete` |
+| `getBrandKitOverview` | GET `/api/v1/brand-kit` | read | `campaigns:read` |
+| `triggerBrandExtraction` | POST `/api/v1/brand-kit/extract` | write | `campaigns:write` |
+| `listArchetypes` | GET `/api/v1/brand-kit/archetypes` | read | `campaigns:read` |
+| `getLayoutSelections` | GET `/api/v1/brand-kit/layout-selections` | read | `campaigns:read` |
+| `saveLayoutSelections` | PUT `/api/v1/brand-kit/layout-selections` | write | `campaigns:write` |
+| `listSeoAudits` | GET `/api/v1/seo/audits` | read | `intent:read` |
+| `startSeoAudit` | POST `/api/v1/seo/audits` | billable | `intent:run` |
+| `getSeoAudit` | GET `/api/v1/seo/audits/{audit_id}` | read | `intent:read` |
+| `getSeoAuditIssues` | GET `/api/v1/seo/audits/{audit_id}/issues` | read | `intent:read` |
+| `listSeoTrackedKeywords` | GET `/api/v1/seo/rank-tracking` | read | `intent:read` |
+| `saveSeoTrackedKeywords` | POST `/api/v1/seo/rank-tracking/keywords` | write | `intent:write` |
+| `removeSeoTrackedKeywords` | POST `/api/v1/seo/rank-tracking/keywords/remove` | write | `intent:write` |
+
+## Recipes
+
+- `recipes/create-and-publish-page.ts`: Create a landing page, edit it, and publish it
+- `recipes/edit-page-section.ts`: Change the text of one section of a landing page
+- `recipes/audit-site-seo.ts`: Run an SEO site audit and list what to fix first
+- `recipes/refresh-brand-kit.ts`: Re-scan the brand kit from the website

package/blocks/pages/block.json

@@ -0,0 +1,223 @@
+{
+  "$schema": "../block.schema.json",
+  "id": "pages",
+  "title": "Landing pages & content",
+  "summary": "Landing pages (list, section editor, publish), content library, brand kit and SEO audits, as editable React screens.",
+  "features": [
+    "landing page list with create, publish, unpublish and delete",
+    "structured section editor with version restore",
+    "content inventory with SEO enrichment",
+    "measured brand kit with layout choices",
+    "site audits and rank tracking"
+  ],
+  "dependsOn": [
+    "foundation"
+  ],
+  "operations": [
+    "list_landing_pages_landing_pages_get",
+    "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",
+    "get_brand_kit_overview_brand_kit_get",
+    "trigger_brand_extraction_brand_kit_extract_post",
+    "list_archetypes_brand_kit_archetypes_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",
+    "list_seo_tracked_keywords_seo_rank_tracking_get",
+    "save_seo_tracked_keywords_seo_rank_tracking_keywords_post",
+    "remove_seo_tracked_keywords_seo_rank_tracking_keywords_remove_post"
+  ],
+  "components": [
+    {
+      "name": "PageList",
+      "file": "components/page-list.tsx",
+      "purpose": "Landing pages with status filter, AI or blank create, publish, unpublish and delete (each behind a confirm dialog).",
+      "operations": [
+        "list_landing_pages_landing_pages_get",
+        "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"
+      ],
+      "tiers": [
+        "read",
+        "billable",
+        "external",
+        "destructive"
+      ]
+    },
+    {
+      "name": "PageEditor",
+      "file": "components/page-editor.tsx",
+      "purpose": "Lite landing page editor: page details, one card per section with its text fields, preview, version restore, publish and unpublish.",
+      "operations": [
+        "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",
+        "publish_landing_page_landing_pages__landing_page_id__publish_post",
+        "unpublish_landing_page_landing_pages__landing_page_id__unpublish_post"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "external"
+      ]
+    },
+    {
+      "name": "ContentLibrary",
+      "file": "components/content-library.tsx",
+      "purpose": "Content inventory with type and status filters, add by URL, edit sheet, SEO enrichment and delete.",
+      "operations": [
+        "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"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "billable",
+        "destructive"
+      ]
+    },
+    {
+      "name": "BrandKitEditor",
+      "file": "components/brand-kit-editor.tsx",
+      "purpose": "Brand palette, fonts and voice measured from the website, a re-scan action, and the layout archetypes new pages may use.",
+      "operations": [
+        "get_brand_kit_overview_brand_kit_get",
+        "trigger_brand_extraction_brand_kit_extract_post",
+        "list_archetypes_brand_kit_archetypes_get",
+        "get_layout_selections_brand_kit_layout_selections_get",
+        "save_layout_selections_brand_kit_layout_selections_put"
+      ],
+      "tiers": [
+        "read",
+        "write"
+      ]
+    },
+    {
+      "name": "SeoReport",
+      "file": "components/seo-report.tsx",
+      "purpose": "Run a site audit (billable, polled), read the on-page score and issues, and track keyword rankings.",
+      "operations": [
+        "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",
+        "list_seo_tracked_keywords_seo_rank_tracking_get",
+        "save_seo_tracked_keywords_seo_rank_tracking_keywords_post",
+        "remove_seo_tracked_keywords_seo_rank_tracking_keywords_remove_post"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "billable"
+      ]
+    }
+  ],
+  "hooks": [],
+  "lib": [
+    {
+      "file": "lib/studio.ts",
+      "purpose": "Helpers for the open-shaped Studio payloads (list rows, text, dates) and the row types the screens use."
+    }
+  ],
+  "recipes": [
+    {
+      "file": "recipes/create-and-publish-page.ts",
+      "title": "Create a landing page, edit it, and publish it",
+      "when": "A new page is requested. Publish is external: confirm with the person first."
+    },
+    {
+      "file": "recipes/edit-page-section.ts",
+      "title": "Change the text of one section of a landing page",
+      "when": "A headline or label changes without re-running AI; the section content is replaced, so merge into the current one."
+    },
+    {
+      "file": "recipes/audit-site-seo.ts",
+      "title": "Run an SEO site audit and list what to fix first",
+      "when": "On-page score for a domain; billable, reserves credits by max_pages, polled until terminal."
+    },
+    {
+      "file": "recipes/refresh-brand-kit.ts",
+      "title": "Re-scan the brand kit from the website",
+      "when": "Brand data looks stale or the site changed; asynchronous, polled via the overview."
+    }
+  ],
+  "prerequisites": [
+    {
+      "id": "website-url",
+      "description": "The workspace has a company website on its profile (or you pass one to the brand re-scan), so the brand kit has something to measure.",
+      "where": "api",
+      "verify": "GET /brand-kit returns source_url, or run recipes/refresh-brand-kit.ts with a website URL."
+    },
+    {
+      "id": "publish-domain",
+      "description": "A domain for published pages is connected in graph8; without it publishing uses the workspace default domain.",
+      "where": "app",
+      "verify": "GET /landing-pages/domains lists at least one domain, or accept the default domain."
+    }
+  ],
+  "scopes": [
+    "campaigns:delete",
+    "campaigns:read",
+    "campaigns:run",
+    "campaigns:write",
+    "intent:read",
+    "intent:run",
+    "intent:write"
+  ],
+  "defaults": [
+    {
+      "decision": "Create a page with AI or blank",
+      "default": "Blank (generate:false) from code; the AI option stays a button behind a credits confirmation",
+      "askHuman": false
+    },
+    {
+      "decision": "Publish a page to a public URL",
+      "default": "Never publish from code without the person's say-so; the UI always confirms",
+      "askHuman": true
+    },
+    {
+      "decision": "Page size for lists",
+      "default": "25 rows with Previous and Next",
+      "askHuman": false
+    },
+    {
+      "decision": "SEO audit page limit",
+      "default": "100 pages",
+      "askHuman": true
+    },
+    {
+      "decision": "Which screens to mount",
+      "default": "/pages (PageList) and /pages/[id] (PageEditor); ContentLibrary, BrandKitEditor and SeoReport as tabs of a Marketing area",
+      "askHuman": false
+    }
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  }
+}

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

@@ -0,0 +1,152 @@
+"use client";
+
+/**
+ * BrandKitEditor: what graph8 knows about the brand (palette, fonts, voice) plus the page layouts it may use.
+ *
+ * The kit is MEASURED from the customer's website, not typed in. "Re-scan" runs the extraction again (against
+ * the current website, or another URL) and the screen polls the overview until the scan finishes. What a person
+ * edits here is which layout archetypes new landing pages may be built from.
+ *
+ * SDK operations, in the order the screen uses them:
+ *   1. getBrandKitOverview     GET /brand-kit                     (read; status, tokens, logo, tagline, voice)
+ *   2. triggerBrandExtraction  POST /brand-kit/extract            (write; starts a scan, then poll #1)
+ *   3. listArchetypes          GET /brand-kit/archetypes          (read; the layout choices)
+ *   4. getLayoutSelections     GET /brand-kit/layout-selections   (read; the ticked ids)
+ *   5. saveLayoutSelections    PUT /brand-kit/layout-selections   (write; the COMPLETE set of ids)
+ *
+ * Nothing here is billable, external or destructive, so no confirmation dialog is needed. Re-scanning with a
+ * different URL replaces the stored design tokens; the screen says so next to the button.
+ */
+
+import { useEffect, useState } from "react";
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, Skeleton } from "@graph8/sdk/ui";
+import { g8Get, g8Post, g8Put } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useJobPoll } from "@/g8/hooks/use-job-poll";
+import { ApiError } from "@/g8/components/api-error";
+import { asRec, rowsOf, shortDate, text } from "../lib/studio";
+import type { Rec } from "../lib/studio";
+
+export interface BrandKitEditorProps {
+  className?: string;
+}
+
+interface Swatch {
+  hex: string;
+  name: string;
+}
+
+/** The measured palette: `full_palette` entries when present, otherwise the `colors` map. */
+export function swatchesOf(tokens: Rec): Swatch[] {
+  const full = Array.isArray(tokens.full_palette) ? (tokens.full_palette as Rec[]) : [];
+  const fromFull = full.map((c) => ({ hex: text(c.hex) || text(c.value), name: text(c.name) })).filter((s) => s.hex);
+  if (fromFull.length) return fromFull;
+  return Object.entries(asRec(tokens.colors))
+    .map(([key, v]) => ({ hex: typeof v === "string" ? v : text(asRec(v).value), name: text(asRec(v).name) || key }))
+    .filter((s) => s.hex);
+}
+
+function Overview({ overview, onRescan, scanning, error }: { overview: Rec; onRescan: (url: string) => void; scanning: boolean; error: unknown }) {
+  const [url, setUrl] = useState("");
+  const tokens = asRec(overview.design_tokens);
+  const swatches = swatchesOf(tokens);
+  const typo = asRec(tokens.typography);
+  const voice = Array.isArray(overview.voice_traits) ? (overview.voice_traits as unknown[]).map((v) => text(v)) : [];
+  const status = text(overview.status, "not_extracted");
+  return (
+    <Card className="mb-4">
+      <CardHeader><CardTitle className="text-sm">Brand kit</CardTitle></CardHeader>
+      <CardContent className="space-y-4">
+        <p className="text-sm" data-testid="brand-status">
+          {status === "extracted" ? `Measured from ${text(overview.source_url)}${overview.captured_at ? ` on ${shortDate(overview.captured_at)}` : ""}.`
+            : status === "generating" ? "Scanning your website. This takes a minute."
+            : status === "failed" ? `The last scan failed. ${text(overview.scan_error)}`
+            : "No scan yet. Enter your website to measure your brand."}
+        </p>
+        {swatches.length ? (
+          <div className="flex flex-wrap gap-2" aria-label="Palette">
+            {swatches.map((s) => (
+              <div key={s.hex} className="w-20 text-center text-xs">
+                <div className="h-10 rounded-md border" style={{ background: s.hex }} />
+                <div className="mt-1 truncate">{s.name || s.hex}</div>
+                <div className="text-muted-foreground">{s.hex}</div>
+              </div>
+            ))}
+          </div>
+        ) : null}
+        {typo.heading_font || typo.body_font ? <p className="text-sm">Fonts: {text(typo.heading_font)}{typo.body_font ? ` / ${text(typo.body_font)}` : ""}</p> : null}
+        {overview.tagline ? <p className="text-sm italic">{text(overview.tagline)}</p> : null}
+        {voice.length ? <p className="text-sm">Voice: {voice.join(", ")}</p> : null}
+        {error ? <ApiError error={error} title="Could not start the scan" /> : null}
+        <div className="flex flex-wrap items-center gap-2">
+          <Input aria-label="Website URL" placeholder={text(overview.source_url, "https://yourcompany.com")} value={url} onChange={(e) => setUrl(e.target.value)} className="w-72" />
+          <Button variant="outline" loading={scanning} onClick={() => onRescan(url.trim())}>Re-scan website</Button>
+        </div>
+        {url.trim() ? <p className="text-muted-foreground text-xs">Scanning a different site replaces your stored design tokens.</p> : null}
+      </CardContent>
+    </Card>
+  );
+}
+
+function Layouts() {
+  const archetypes = useG8Query((signal) => g8Get("/brand-kit/archetypes", undefined, { signal }), []);
+  const selections = useG8Query((signal) => g8Get("/brand-kit/layout-selections", undefined, { signal }), []);
+  // `edit` is null until the person ticks something, so the box state is the saved state with no effect-lag in between.
+  const [edit, setEdit] = useState<string[] | null>(null);
+  const rawSaved = asRec(selections.data?.data).archetype_ids;
+  const saved = Array.isArray(rawSaved) ? rawSaved.map((i) => text(i)) : [];
+  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());
+  const toggle = (id: string) => setEdit(picked.includes(id) ? picked.filter((p) => p !== id) : [...picked, id]);
+  return (
+    <Card>
+      <CardHeader><CardTitle className="text-sm">Page layouts</CardTitle></CardHeader>
+      <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}
+        {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)} />
+                <span><span className="font-medium">{text(a.name)}</span><br /><span className="text-muted-foreground">{text(a.description)}</span></span>
+              </label>
+            );
+          })}
+        </div>
+        {save.error ? <ApiError error={save.error} title="Could not save the layouts" /> : null}
+        <Button disabled={!dirty} loading={save.loading} onClick={() => void save.mutate(undefined)}>Save layouts</Button>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function BrandKitEditor({ className }: BrandKitEditorProps) {
+  const overview = useG8Query((signal) => g8Get("/brand-kit", undefined, { signal }), []);
+  const poll = useJobPoll<Rec>(async (signal) => asRec((await g8Get("/brand-kit", undefined, { signal })).data), {
+    enabled: false,
+    isTerminal: (o) => text(o.status) !== "generating",
+    onDone: () => void overview.refetch(),
+  });
+  const scan = useG8Mutation((url: string) => g8Post("/brand-kit/extract", url ? { website_url: url } : undefined), { onSuccess: () => poll.start() });
+  const data = asRec(poll.status ?? overview.data?.data);
+  const scanning = scan.loading || poll.polling || text(data.status) === "generating";
+
+  useEffect(() => {
+    if (text(asRec(overview.data?.data).status) === "generating") poll.start();
+  }, [overview.data]);
+
+  if (overview.loading && !overview.data) return <div className={className} aria-busy="true"><Skeleton className="h-48 w-full" /></div>;
+  if (overview.error) return <ApiError error={overview.error} onRetry={() => void overview.refetch()} />;
+  return (
+    <div className={className}>
+      <Overview overview={data} onRescan={(u) => void scan.mutate(u)} scanning={scanning} error={scan.error} />
+      <Layouts />
+    </div>
+  );
+}