@drawnagency/primitives 0.1.80 → 0.1.81

package/dist/schemas/site-config.d.ts

@@ -10,7 +10,7 @@ export declare const SectionMetaSchema: z.ZodObject<{
     access: z.ZodArray<z.ZodString>;
 }, z.core.$strip>;
 export type SectionMeta = z.infer<typeof SectionMetaSchema>;
-export declare const RESERVED_SLUGS: readonly ["edit", "api", "login", "set-password", "404"];
+export declare const RESERVED_SLUGS: readonly ["edit", "api", "login", "set-password", "404", "present"];
 export declare const PageStatusSchema: z.ZodEnum<{
     live: "live";
     archived: "archived";
@@ -27,6 +27,46 @@ export declare const PageSchema: z.ZodObject<{
     }>;
     access: z.ZodArray<z.ZodString>;
     order: z.ZodArray<z.ZodString>;
+    document: z.ZodOptional<z.ZodObject<{
+        enabled: z.ZodDefault<z.ZodBoolean>;
+        meta: z.ZodDefault<z.ZodObject<{
+            client: z.ZodDefault<z.ZodString>;
+            project: z.ZodDefault<z.ZodString>;
+            dateLabel: z.ZodDefault<z.ZodString>;
+        }, z.core.$strip>>;
+        cover: z.ZodDefault<z.ZodObject<{
+            bgColor: z.ZodDefault<z.ZodString>;
+            accentColor: z.ZodDefault<z.ZodString>;
+            title: z.ZodDefault<z.ZodString>;
+            label: z.ZodDefault<z.ZodString>;
+            date: z.ZodDefault<z.ZodString>;
+            imageId: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+        }, z.core.$strip>>;
+        sections: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodObject<{
+            excluded: z.ZodDefault<z.ZodBoolean>;
+            textPlacement: z.ZodDefault<z.ZodEnum<{
+                top: "top";
+                leftColumn: "leftColumn";
+            }>>;
+            imagePlacement: z.ZodDefault<z.ZodEnum<{
+                fullWidth: "fullWidth";
+                right: "right";
+            }>>;
+            dropTextOverflow: z.ZodDefault<z.ZodBoolean>;
+            imageLayout: z.ZodDefault<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                mode: z.ZodLiteral<"grid">;
+                rows: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<1>, z.ZodLiteral<2>, z.ZodLiteral<3>]>>;
+                columns: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<2>, z.ZodLiteral<3>, z.ZodLiteral<4>]>>;
+            }, z.core.$strip>, z.ZodObject<{
+                mode: z.ZodLiteral<"masonry">;
+                flow: z.ZodDefault<z.ZodEnum<{
+                    rows: "rows";
+                    columns: "columns";
+                }>>;
+                columns: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<2>, z.ZodLiteral<3>, z.ZodLiteral<4>, z.ZodLiteral<5>, z.ZodLiteral<6>]>>;
+            }, z.core.$strip>], "mode">>;
+        }, z.core.$strip>>>;
+    }, z.core.$strip>>;
 }, z.core.$strip>;
 export type Page = z.infer<typeof PageSchema>;
 declare const CanonicalIndexSchema: z.ZodObject<{
@@ -43,6 +83,46 @@ declare const CanonicalIndexSchema: z.ZodObject<{
         }>;
         access: z.ZodArray<z.ZodString>;
         order: z.ZodArray<z.ZodString>;
+        document: z.ZodOptional<z.ZodObject<{
+            enabled: z.ZodDefault<z.ZodBoolean>;
+            meta: z.ZodDefault<z.ZodObject<{
+                client: z.ZodDefault<z.ZodString>;
+                project: z.ZodDefault<z.ZodString>;
+                dateLabel: z.ZodDefault<z.ZodString>;
+            }, z.core.$strip>>;
+            cover: z.ZodDefault<z.ZodObject<{
+                bgColor: z.ZodDefault<z.ZodString>;
+                accentColor: z.ZodDefault<z.ZodString>;
+                title: z.ZodDefault<z.ZodString>;
+                label: z.ZodDefault<z.ZodString>;
+                date: z.ZodDefault<z.ZodString>;
+                imageId: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+            }, z.core.$strip>>;
+            sections: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodObject<{
+                excluded: z.ZodDefault<z.ZodBoolean>;
+                textPlacement: z.ZodDefault<z.ZodEnum<{
+                    top: "top";
+                    leftColumn: "leftColumn";
+                }>>;
+                imagePlacement: z.ZodDefault<z.ZodEnum<{
+                    fullWidth: "fullWidth";
+                    right: "right";
+                }>>;
+                dropTextOverflow: z.ZodDefault<z.ZodBoolean>;
+                imageLayout: z.ZodDefault<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                    mode: z.ZodLiteral<"grid">;
+                    rows: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<1>, z.ZodLiteral<2>, z.ZodLiteral<3>]>>;
+                    columns: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<2>, z.ZodLiteral<3>, z.ZodLiteral<4>]>>;
+                }, z.core.$strip>, z.ZodObject<{
+                    mode: z.ZodLiteral<"masonry">;
+                    flow: z.ZodDefault<z.ZodEnum<{
+                        rows: "rows";
+                        columns: "columns";
+                    }>>;
+                    columns: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<2>, z.ZodLiteral<3>, z.ZodLiteral<4>, z.ZodLiteral<5>, z.ZodLiteral<6>]>>;
+                }, z.core.$strip>], "mode">>;
+            }, z.core.$strip>>>;
+        }, z.core.$strip>>;
     }, z.core.$strip>>;
     sections: z.ZodRecord<z.ZodString, z.ZodObject<{
         type: z.ZodString;
@@ -71,6 +151,46 @@ export declare const IndexSchema: z.ZodPipe<z.ZodPipe<z.ZodObject<{
         }>;
         access: z.ZodArray<z.ZodString>;
         order: z.ZodArray<z.ZodString>;
+        document: z.ZodOptional<z.ZodObject<{
+            enabled: z.ZodDefault<z.ZodBoolean>;
+            meta: z.ZodDefault<z.ZodObject<{
+                client: z.ZodDefault<z.ZodString>;
+                project: z.ZodDefault<z.ZodString>;
+                dateLabel: z.ZodDefault<z.ZodString>;
+            }, z.core.$strip>>;
+            cover: z.ZodDefault<z.ZodObject<{
+                bgColor: z.ZodDefault<z.ZodString>;
+                accentColor: z.ZodDefault<z.ZodString>;
+                title: z.ZodDefault<z.ZodString>;
+                label: z.ZodDefault<z.ZodString>;
+                date: z.ZodDefault<z.ZodString>;
+                imageId: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+            }, z.core.$strip>>;
+            sections: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodObject<{
+                excluded: z.ZodDefault<z.ZodBoolean>;
+                textPlacement: z.ZodDefault<z.ZodEnum<{
+                    top: "top";
+                    leftColumn: "leftColumn";
+                }>>;
+                imagePlacement: z.ZodDefault<z.ZodEnum<{
+                    fullWidth: "fullWidth";
+                    right: "right";
+                }>>;
+                dropTextOverflow: z.ZodDefault<z.ZodBoolean>;
+                imageLayout: z.ZodDefault<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                    mode: z.ZodLiteral<"grid">;
+                    rows: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<1>, z.ZodLiteral<2>, z.ZodLiteral<3>]>>;
+                    columns: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<2>, z.ZodLiteral<3>, z.ZodLiteral<4>]>>;
+                }, z.core.$strip>, z.ZodObject<{
+                    mode: z.ZodLiteral<"masonry">;
+                    flow: z.ZodDefault<z.ZodEnum<{
+                        rows: "rows";
+                        columns: "columns";
+                    }>>;
+                    columns: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<2>, z.ZodLiteral<3>, z.ZodLiteral<4>, z.ZodLiteral<5>, z.ZodLiteral<6>]>>;
+                }, z.core.$strip>], "mode">>;
+            }, z.core.$strip>>>;
+        }, z.core.$strip>>;
     }, z.core.$strip>>>;
     sections: z.ZodRecord<z.ZodString, z.ZodObject<{
         type: z.ZodString;
@@ -94,6 +214,37 @@ export declare const IndexSchema: z.ZodPipe<z.ZodPipe<z.ZodObject<{
         status: "live" | "archived";
         access: string[];
         order: string[];
+        document?: {
+            enabled?: boolean | undefined;
+            meta?: {
+                client?: string | undefined;
+                project?: string | undefined;
+                dateLabel?: string | undefined;
+            } | undefined;
+            cover?: {
+                bgColor?: string | undefined;
+                accentColor?: string | undefined;
+                title?: string | undefined;
+                label?: string | undefined;
+                date?: string | undefined;
+                imageId?: string | null | undefined;
+            } | undefined;
+            sections?: Record<string, {
+                excluded?: boolean | undefined;
+                textPlacement?: "top" | "leftColumn" | undefined;
+                imagePlacement?: "fullWidth" | "right" | undefined;
+                dropTextOverflow?: boolean | undefined;
+                imageLayout?: {
+                    mode: "grid";
+                    rows?: 2 | 1 | 3 | undefined;
+                    columns?: 2 | 4 | 3 | undefined;
+                } | {
+                    mode: "masonry";
+                    flow?: "rows" | "columns" | undefined;
+                    columns?: 2 | 4 | 3 | 5 | 6 | undefined;
+                } | undefined;
+            }> | undefined;
+        } | undefined;
     }[];
     sections: Record<string, {
         type: string;
@@ -118,6 +269,37 @@ export declare const IndexSchema: z.ZodPipe<z.ZodPipe<z.ZodObject<{
         status: "live" | "archived";
         access: string[];
         order: string[];
+        document?: {
+            enabled: boolean;
+            meta: {
+                client: string;
+                project: string;
+                dateLabel: string;
+            };
+            cover: {
+                bgColor: string;
+                accentColor: string;
+                title: string;
+                label: string;
+                date: string;
+                imageId: string | null;
+            };
+            sections: Record<string, {
+                excluded: boolean;
+                textPlacement: "top" | "leftColumn";
+                imagePlacement: "fullWidth" | "right";
+                dropTextOverflow: boolean;
+                imageLayout: {
+                    mode: "grid";
+                    rows: 2 | 1 | 3;
+                    columns: 2 | 4 | 3;
+                } | {
+                    mode: "masonry";
+                    flow: "rows" | "columns";
+                    columns: 2 | 4 | 3 | 5 | 6;
+                };
+            }>;
+        } | undefined;
     }[] | undefined;
     lastModified?: string | null | undefined;
 }>>, z.ZodObject<{
@@ -134,6 +316,46 @@ export declare const IndexSchema: z.ZodPipe<z.ZodPipe<z.ZodObject<{
         }>;
         access: z.ZodArray<z.ZodString>;
         order: z.ZodArray<z.ZodString>;
+        document: z.ZodOptional<z.ZodObject<{
+            enabled: z.ZodDefault<z.ZodBoolean>;
+            meta: z.ZodDefault<z.ZodObject<{
+                client: z.ZodDefault<z.ZodString>;
+                project: z.ZodDefault<z.ZodString>;
+                dateLabel: z.ZodDefault<z.ZodString>;
+            }, z.core.$strip>>;
+            cover: z.ZodDefault<z.ZodObject<{
+                bgColor: z.ZodDefault<z.ZodString>;
+                accentColor: z.ZodDefault<z.ZodString>;
+                title: z.ZodDefault<z.ZodString>;
+                label: z.ZodDefault<z.ZodString>;
+                date: z.ZodDefault<z.ZodString>;
+                imageId: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+            }, z.core.$strip>>;
+            sections: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodObject<{
+                excluded: z.ZodDefault<z.ZodBoolean>;
+                textPlacement: z.ZodDefault<z.ZodEnum<{
+                    top: "top";
+                    leftColumn: "leftColumn";
+                }>>;
+                imagePlacement: z.ZodDefault<z.ZodEnum<{
+                    fullWidth: "fullWidth";
+                    right: "right";
+                }>>;
+                dropTextOverflow: z.ZodDefault<z.ZodBoolean>;
+                imageLayout: z.ZodDefault<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                    mode: z.ZodLiteral<"grid">;
+                    rows: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<1>, z.ZodLiteral<2>, z.ZodLiteral<3>]>>;
+                    columns: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<2>, z.ZodLiteral<3>, z.ZodLiteral<4>]>>;
+                }, z.core.$strip>, z.ZodObject<{
+                    mode: z.ZodLiteral<"masonry">;
+                    flow: z.ZodDefault<z.ZodEnum<{
+                        rows: "rows";
+                        columns: "columns";
+                    }>>;
+                    columns: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<2>, z.ZodLiteral<3>, z.ZodLiteral<4>, z.ZodLiteral<5>, z.ZodLiteral<6>]>>;
+                }, z.core.$strip>], "mode">>;
+            }, z.core.$strip>>>;
+        }, z.core.$strip>>;
     }, z.core.$strip>>;
     sections: z.ZodRecord<z.ZodString, z.ZodObject<{
         type: z.ZodString;

package/dist/schemas/site-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"site-config.d.ts","sourceRoot":"","sources":["../../src/schemas/site-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AASxB,eAAO,MAAM,iBAAiB;;;;;;;;;iBAI5B,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAO5D,eAAO,MAAM,cAAc,0DAA2D,CAAC;AAEvF,eAAO,MAAM,gBAAgB;;;EAA+B,CAAC;AAE7D,eAAO,MAAM,UAAU;;;;;;;;;;;;iBASrB,CAAC;AAEH,MAAM,MAAM,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,UAAU,CAAC,CAAC;AA0C9C,QAAA,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6CtB,CAAC;AAEL,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAyE,CAAC;AAElG,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAE7D,oFAAoF;AACpF,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,OAAO,GAAG,SAAS,CAE1D;AAMD,eAAO,MAAM,iBAAiB;;;;;iBAM5B,CAAC;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE5D,eAAO,MAAM,mBAAmB;;;;;;;;;;;iBAwB5B,CAAC;AACL,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEhE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4B3B,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"site-config.d.ts","sourceRoot":"","sources":["../../src/schemas/site-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAaxB,eAAO,MAAM,iBAAiB;;;;;;;;;iBAI5B,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAQ5D,eAAO,MAAM,cAAc,qEAAsE,CAAC;AAWlG,eAAO,MAAM,gBAAgB;;;EAA+B,CAAC;AAE7D,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAUrB,CAAC;AAEH,MAAM,MAAM,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,UAAU,CAAC,CAAC;AA0C9C,QAAA,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6CtB,CAAC;AAEL,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAyE,CAAC;AAElG,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAE7D,oFAAoF;AACpF,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,OAAO,GAAG,SAAS,CAE1D;AAMD,eAAO,MAAM,iBAAiB;;;;;iBAM5B,CAAC;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE5D,eAAO,MAAM,mBAAmB;;;;;;;;;;;iBAwB5B,CAAC;AACL,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEhE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4B3B,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.80",
+  "version": "0.1.81",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
@@ -84,6 +84,10 @@
       "types": "./dist/components/primitives/index.d.ts",
       "default": "./dist/components/primitives/index.js"
     },
+    "./document": {
+      "types": "./dist/document/index.d.ts",
+      "default": "./dist/document/index.js"
+    },
     "./auth": {
       "types": "./dist/auth/index.d.ts",
       "default": "./dist/auth/index.js"

package/src/components/editor/PagesModal.tsx

@@ -2,6 +2,10 @@ import { useState, useEffect } from "react";
 import { Check } from "lucide-react";
 import type { SiteIndex, Page } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
+// Sanctioned outside->inside import: document/ is a sealed subtree, but the
+// Document mode toggle needs the patch shape it edits (mirrors the same
+// sanctioned import in schemas/site-config.ts and lib/pages.ts).
+import type { DocumentOptions } from "../../document/engine/settings";
 import { Button } from "../shared/Button";
 import { Input } from "../shared/Input";
 import { Checkbox } from "../shared/Checkbox";
@@ -24,6 +28,7 @@ export interface PagesModalProps {
   onSetArchived: (pageId: string, archived: boolean) => void;
   onSetFields: (pageId: string, patch: Partial<Pick<Page, "title" | "slug" | "showInNav">>) => void;
   onSetAudience: (pageId: string, access: string[]) => void;
+  onSetDocument: (pageId: string, patch: Partial<DocumentOptions>) => void;
   onConfirmDelete: (pageId: string) => void;
 }
 
@@ -71,6 +76,7 @@ export function PagesModal(props: PagesModalProps) {
       }}
       onSetFields={(patch) => props.onSetFields(page.id, patch)}
       onSetAudience={(access) => props.onSetAudience(page.id, access)}
+      onSetDocument={(patch) => props.onSetDocument(page.id, patch)}
       onRequestDelete={() =>
         page.order.length === 0 ? props.onConfirmDelete(page.id) : setDeletingId(page.id)
       }
@@ -105,14 +111,16 @@ export function PagesModal(props: PagesModalProps) {
 }
 
 function PageRow({
-  page, audiences, expanded, isNew, otherSlugs, dragIndex, onReorder, onToggleExpand, onSetHome, onSetArchived, onSetFields, onSetAudience, onRequestDelete,
+  page, audiences, expanded, isNew, otherSlugs, dragIndex, onReorder, onToggleExpand, onSetHome, onSetArchived, onSetFields, onSetAudience, onSetDocument, onRequestDelete,
 }: {
   page: Page; audiences: Audience[]; expanded: boolean;
   isNew: boolean; otherSlugs: string[];
   dragIndex?: number; onReorder: (fromIndex: number, toIndex: number) => void;
   onToggleExpand: () => void; onSetHome: () => void; onSetArchived: (v: boolean) => void;
   onSetFields: (patch: Partial<Pick<Page, "title" | "slug" | "showInNav">>) => void;
-  onSetAudience: (access: string[]) => void; onRequestDelete: () => void;
+  onSetAudience: (access: string[]) => void;
+  onSetDocument: (patch: Partial<DocumentOptions>) => void;
+  onRequestDelete: () => void;
 }) {
   const draggable = dragIndex !== undefined;
   const { rowRef, handleRef, isDragging, closestEdge } = useSortableRow<HTMLDivElement, HTMLButtonElement>({
@@ -264,6 +272,12 @@ function PageRow({
               className="shrink-0"
             />
           </div>
+          <Checkbox
+            label="Document mode"
+            description="Adds a presentation view of this page."
+            checked={page.document?.enabled ?? false}
+            onChange={(enabled) => onSetDocument({ enabled })}
+          />
           <div className="flex items-center gap-2">
             <Button
               variant="secondary"

package/src/components/shell/DocInspector.tsx

@@ -0,0 +1,278 @@
+import { settingsFor, type DocumentOptions } from "../../document";
+import { Input } from "../shared/Input";
+import { Select } from "../shared/Select";
+import { Checkbox } from "../shared/Checkbox";
+import { RadioGroup } from "../shared/RadioGroup";
+import { ColorPicker } from "../shared/ColorPicker";
+import { FormLabel } from "../shared/FormLabel";
+import { useMediaLibrary } from "./MediaLibraryContext";
+import { Button } from "../shared/Button";
+import type { MediaItem } from "../../media/types";
+
+// Smallest generated variant for the inspector thumbnail (same file naming as
+// docImagesFrom in lib/document-input.ts); null when the item can't render.
+function thumbSrc(imageId: string, item: MediaItem | undefined): string | null {
+  if (!item || item.kind !== "image") return null;
+  if (item.mimeType === "image/svg+xml") return `/api/media/${imageId}/original.svg`;
+  const widths = item.variants.map((v) => v.width).sort((a, b) => a - b);
+  if (widths.length === 0) return null;
+  return `/api/media/${imageId}/${widths[0]}.webp`;
+}
+
+export interface DocInspectorProps {
+  document: DocumentOptions;
+  selection: { kind: "cover" } | { kind: "chunk"; chunkId: string; title: string };
+  warnings: string[]; // warningsByChunk for the selected chunk
+  onUpdateCover: (patch: Partial<DocumentOptions["cover"]>) => void;
+  onUpdateMeta: (patch: Partial<DocumentOptions["meta"]>) => void;
+  // Caller merges the patch via sectionSettingsSchema.parse.
+  onUpdateSection: (chunkId: string, patch: Record<string, unknown>) => void;
+}
+
+// Drawn palette — mirrors the swatch row in the harness inspector.
+const SWATCHES = [
+  "#FFFFFF", "#EBEBEB", "#999999", "#333333", "#1F1F1F", // neutrals: white → near-black
+  "#009FAD", // teal (brand primary)
+  "#3D7F7F", // forest
+  "#099A6F", // green
+  "#5F81AB", // blue
+  "#7C97BB", // sky
+  "#6864A0", // violet
+  "#D3A978", // beige
+  "#EB9500", // gold
+  "#F07C00", // orange
+  "#A24E16", // brown / rust
+  "#A65982", // indigo
+  "#E64165", // pink
+];
+
+function ColorControl({ label, value, onPick }: { label: string; value: string; onPick: (v: string) => void }) {
+  return (
+    <div className="mb-4">
+      <FormLabel>{label}</FormLabel>
+      <div className="flex flex-wrap items-center gap-1">
+        {SWATCHES.map((s) => (
+          <button
+            key={s}
+            type="button"
+            aria-label={s}
+            onClick={() => onPick(s)}
+            style={{ background: s }}
+            className={`h-6 w-6 rounded border ${s === value ? "border-primary ring-1 ring-primary" : "border-base-200"}`}
+          />
+        ))}
+        <ColorPicker value={value} onChange={onPick} label="Custom color" className="h-6 w-6" />
+      </div>
+    </div>
+  );
+}
+
+export function DocInspector({
+  document: doc,
+  selection,
+  warnings,
+  onUpdateCover,
+  onUpdateMeta,
+  onUpdateSection,
+}: DocInspectorProps) {
+  return (
+    <aside data-testid="doc-inspector" className="w-64 shrink-0 overflow-y-auto border-l border-base-200 bg-base p-4">
+      {selection.kind === "cover" ? (
+        <CoverPanel doc={doc} onUpdateCover={onUpdateCover} onUpdateMeta={onUpdateMeta} />
+      ) : (
+        <ChunkPanel
+          key={selection.chunkId}
+          chunkId={selection.chunkId}
+          title={selection.title}
+          doc={doc}
+          warnings={warnings}
+          onUpdateSection={onUpdateSection}
+        />
+      )}
+    </aside>
+  );
+}
+
+function CoverPanel({
+  doc,
+  onUpdateCover,
+  onUpdateMeta,
+}: {
+  doc: DocumentOptions;
+  onUpdateCover: (patch: Partial<DocumentOptions["cover"]>) => void;
+  onUpdateMeta: (patch: Partial<DocumentOptions["meta"]>) => void;
+}) {
+  const { cover, meta } = doc;
+  const media = useMediaLibrary();
+  return (
+    <>
+      <h2 className="mb-2 text-xs font-semibold uppercase tracking-wide text-base-contrast-light">Cover</h2>
+      <Input label="Title" value={cover.title} onChange={(title) => onUpdateCover({ title })} className="mb-2" />
+      <Input label="Label" value={cover.label} onChange={(label) => onUpdateCover({ label })} className="mb-2" />
+      <Input label="Date" value={cover.date} onChange={(date) => onUpdateCover({ date })} className="mb-2" />
+
+      {media ? (
+        <div className="mb-4">
+          <FormLabel>Cover image</FormLabel>
+          {cover.imageId ? (
+            (() => {
+              const src = thumbSrc(cover.imageId, media.manifest.images[cover.imageId]);
+              return src ? (
+                <img src={src} alt="Cover image preview" className="mb-2 max-h-24 rounded border border-base-200" />
+              ) : null;
+            })()
+          ) : null}
+          <div className="flex gap-2">
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => media.openSelectModal((imageId) => onUpdateCover({ imageId }))}
+            >
+              {cover.imageId ? "Replace image" : "Choose image"}
+            </Button>
+            {cover.imageId ? (
+              <Button variant="ghost" size="sm" onClick={() => onUpdateCover({ imageId: null })}>
+                Remove image
+              </Button>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      <ColorControl label="Background" value={cover.bgColor} onPick={(bgColor) => onUpdateCover({ bgColor })} />
+      <ColorControl label="Accent" value={cover.accentColor} onPick={(accentColor) => onUpdateCover({ accentColor })} />
+
+      <h2 className="mb-2 mt-6 text-xs font-semibold uppercase tracking-wide text-base-contrast-light">Document</h2>
+      <Input label="Client" value={meta.client} onChange={(client) => onUpdateMeta({ client })} className="mb-2" />
+      <Input label="Project" value={meta.project} onChange={(project) => onUpdateMeta({ project })} className="mb-2" />
+      <Input label="Date label" value={meta.dateLabel} onChange={(dateLabel) => onUpdateMeta({ dateLabel })} className="mb-2" />
+    </>
+  );
+}
+
+function ChunkPanel({
+  chunkId,
+  title,
+  doc,
+  warnings,
+  onUpdateSection,
+}: {
+  chunkId: string;
+  title: string;
+  doc: DocumentOptions;
+  warnings: string[];
+  onUpdateSection: (chunkId: string, patch: Record<string, unknown>) => void;
+}) {
+  const settings = settingsFor(doc.sections, chunkId);
+  const layout = settings.imageLayout;
+
+  return (
+    <>
+      <h2 className="mb-3 text-xs font-semibold uppercase tracking-wide text-base-contrast-light">{title}</h2>
+
+      <Checkbox
+        className="mb-4"
+        checked={!settings.excluded}
+        onChange={(checked) => onUpdateSection(chunkId, { excluded: !checked })}
+        label="Include in document"
+      />
+
+      {/* Image placement is linked, not independent (Drew, 2026-07-19): text
+          left → images right of the column, text top → images below full
+          width. One control drives both fields. */}
+      <RadioGroup
+        className="mb-4"
+        label="Text placement"
+        value={settings.textPlacement}
+        options={[
+          { label: "Top", value: "top" },
+          { label: "Left column", value: "leftColumn" },
+        ]}
+        onChange={(textPlacement) =>
+          onUpdateSection(chunkId, {
+            textPlacement,
+            imagePlacement: textPlacement === "leftColumn" ? "right" : "fullWidth",
+          })
+        }
+      />
+
+      <Checkbox
+        className="mb-4"
+        checked={settings.dropTextOverflow}
+        onChange={(dropTextOverflow) => onUpdateSection(chunkId, { dropTextOverflow })}
+        label="Drop text overflow"
+      />
+
+      <Select
+        className="mb-4"
+        label="Image layout"
+        value={layout.mode}
+        options={[
+          { value: "grid", label: "Grid" },
+          { value: "masonry", label: "Masonry" },
+        ]}
+        onChange={(v) =>
+          onUpdateSection(
+            chunkId,
+            v === "grid"
+              ? { imageLayout: { mode: "grid", rows: 2, columns: 4 } }
+              : { imageLayout: { mode: "masonry", flow: "rows", columns: 3 } },
+          )
+        }
+      />
+
+      {layout.mode === "grid" ? (
+        <>
+          <Select
+            className="mb-4"
+            label="Rows"
+            value={String(layout.rows)}
+            options={[1, 2, 3].map((n) => ({ value: String(n), label: String(n) }))}
+            onChange={(v) => onUpdateSection(chunkId, { imageLayout: { ...layout, rows: Number(v) } })}
+          />
+          <Select
+            className="mb-4"
+            label="Columns"
+            value={String(layout.columns)}
+            options={[2, 3, 4].map((n) => ({ value: String(n), label: String(n) }))}
+            onChange={(v) => onUpdateSection(chunkId, { imageLayout: { ...layout, columns: Number(v) } })}
+          />
+        </>
+      ) : (
+        <>
+          <Select
+            className="mb-4"
+            label="Flow"
+            value={layout.flow}
+            options={[
+              { value: "rows", label: "Rows" },
+              { value: "columns", label: "Columns" },
+            ]}
+            onChange={(v) => onUpdateSection(chunkId, { imageLayout: { ...layout, flow: v } })}
+          />
+          {/* Column count only drives the columns flow (layoutRows never reads
+              it) — hide it when irrelevant. */}
+          {layout.flow === "columns" ? (
+            <Select
+              className="mb-4"
+              label="Columns"
+              value={String(layout.columns)}
+              options={[2, 3, 4, 5, 6].map((n) => ({ value: String(n), label: String(n) }))}
+              onChange={(v) => onUpdateSection(chunkId, { imageLayout: { ...layout, columns: Number(v) } })}
+            />
+          ) : null}
+        </>
+      )}
+
+      {warnings.length > 0 ? (
+        <div className="mt-2">
+          {warnings.map((w, i) => (
+            <p key={i} className="mb-1 rounded border border-amber-300 bg-amber-50 px-2 py-1 text-xs text-amber-800">
+              {w}
+            </p>
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
+}