@drawnagency/primitives 0.1.79 → 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.79",
+  "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/brandguide/Colors.tsx

@@ -17,6 +17,7 @@ interface Props {
   showLabel?: boolean;
   onChange?: (content: SectionContent) => void;
   openModal?: (title: string, content: ReactNode) => void;
+  onDelete?: () => void;
 }
 
 function getContrastClass(hex: string | undefined): string {
@@ -49,7 +50,7 @@ function buildContent(
   };
 }
 
-export default function Colors({ colors, columns = 3, label, collapsing, showLabel = true, onChange, openModal }: Props) {
+export default function Colors({ colors, columns = 3, label, collapsing, showLabel = true, onChange, openModal, onDelete }: Props) {
   if (onChange && openModal) {
     return (
       <ColorsEditable
@@ -60,6 +61,7 @@ export default function Colors({ colors, columns = 3, label, collapsing, showLab
         showLabel={showLabel}
         onChange={onChange}
         openModal={openModal}
+        onDelete={onDelete}
       />
     );
   }
@@ -125,7 +127,7 @@ function ColorsView({
             const hex = color.spaces[0]?.hex;
             const contrast = getContrastClass(hex);
             return (
-              <div key={i} className="overflow-hidden rounded-outer border border-base-200">
+              <div key={i} className="flex h-full flex-col overflow-hidden rounded-outer border border-base-200">
                 <div className={cn("relative flex min-h-[80px] items-end p-3", contrast)} style={{ backgroundColor: hex || "#ccc" }}>
                   {color.name && <span className="text-sm font-bold">{color.name}</span>}
                   {copiedIndex === i && (
@@ -138,7 +140,8 @@ function ColorsView({
                   )}
                 </div>
                 {expanded && (
-                  <div className="space-y-1 bg-base-accent p-3 text-sm">
+                  // flex-1 so every swatch's label block grows to the tallest in its row.
+                  <div className="flex-1 space-y-1 bg-base-accent p-3 text-sm">
                     {color.spaces.map((space, j) =>
                       Object.entries(space).map(([key, value]) =>
                         value ? (
@@ -168,6 +171,7 @@ function ColorsEditable({
   showLabel,
   onChange,
   openModal,
+  onDelete,
 }: {
   colors: ColorItem[];
   columns: number;
@@ -176,6 +180,7 @@ function ColorsEditable({
   showLabel?: boolean;
   onChange: (content: SectionContent) => void;
   openModal: (title: string, content: ReactNode) => void;
+  onDelete?: () => void;
 }) {
   const [expanded, setExpanded] = useState(!collapsing);
   const options = { label, columns, collapsing, showLabel };
@@ -224,6 +229,10 @@ function ColorsEditable({
       <EditableGrid
         items={colors}
         columns={columns}
+        // Shared group lets a swatch be dragged from one colors section into another.
+        group="colors"
+        // When the last swatch is dragged out to another section, delete this now-empty one.
+        onEmptied={onDelete}
         onChange={(newColors) => onChange(buildContent(newColors, options))}
         createItem={createColorItem}
         isEditMode={true}
@@ -267,7 +276,7 @@ function ColorSwatchEditable({
   };
 
   return (
-    <div className="overflow-hidden rounded-outer border border-base-200">
+    <div className="flex h-full flex-col overflow-hidden rounded-outer border border-base-200">
       <div className={cn("flex min-h-[80px] items-end p-3", contrast)} style={{ backgroundColor: hex || "#ccc" }}>
         <EditablePlainText
           tag="span"
@@ -279,7 +288,8 @@ function ColorSwatchEditable({
         />
       </div>
       {expanded && (
-        <div className="space-y-1 bg-base-accent p-3 text-sm">
+        // flex-1 so every swatch's label block grows to the tallest in its row.
+        <div className="flex-1 space-y-1 bg-base-accent p-3 text-sm">
           {color.spaces.map((space, j) =>
             Object.entries(space).map(([key, value]) =>
               value ? (

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/primitives/EditableGrid.tsx

@@ -1,10 +1,11 @@
-import { useRef, useEffect, useState, type ReactNode } from "react";
+import { useRef, useEffect, useState, useId, type ReactNode } from "react";
 import { ImageIcon } from "lucide-react";
 import { AddIcon, DragHandle, DeleteIcon, SettingsIcon } from "../shared/icons";
 import { IconButton } from "../shared/IconButton";
 import { cn } from "../../lib/cn";
 import { containerGridClass } from "../../lib/container-grid";
 import { useEditableCollection } from "./useEditableCollection";
+import { resolveDropIndex } from "./gridDrop";
 
 interface EditableGridProps<T> {
   items: T[];
@@ -17,6 +18,16 @@ interface EditableGridProps<T> {
   onItemImageClick?: (index: number) => void;
   chromeTopClass?: string;
   className?: string;
+  /**
+   * Items can be dragged BETWEEN two EditableGrids that share the same non-null
+   * `group` (e.g. two colors sections). Without a group, a grid only reorders
+   * its own items. Only pass the same group to grids whose item shape matches —
+   * a cross-grid drop inserts the source item verbatim into the destination.
+   */
+  group?: string;
+  /** Called instead of removing the last item when it is dragged out to another
+   *  grid — lets the owner tear down a now-empty container (e.g. delete the section). */
+  onEmptied?: () => void;
 }
 
 export function EditableGrid<T>({
@@ -30,8 +41,11 @@ export function EditableGrid<T>({
   onItemImageClick,
   chromeTopClass,
   className,
+  group,
+  onEmptied,
 }: EditableGridProps<T>) {
-  const { wrappedItems, onReorder, onAdd, onInsert, onRemove } = useEditableCollection({
+  const gridId = useId();
+  const { wrappedItems, onReorder, onAdd, onInsert, onInsertItem, onRemove } = useEditableCollection({
     items,
     onChange,
     createItem,
@@ -44,18 +58,63 @@ export function EditableGrid<T>({
 
   const [isDragging, setIsDragging] = useState(false);
 
+  // The drop transaction is centralized here (not in each GridCell) because this
+  // monitor is GLOBAL: it fires for every grid-cell drop on the page, so the
+  // source grid and destination grid each see the same drop and act on their own
+  // collection — source removes, destination inserts, same-grid reorders. Keep
+  // the latest handlers/config in a ref so the monitor can be set up once.
+  const cfgRef = useRef({ gridId, group, itemCount: wrappedItems.length, onReorder, onRemove, onInsertItem, onEmptied });
+  cfgRef.current = { gridId, group, itemCount: wrappedItems.length, onReorder, onRemove, onInsertItem, onEmptied };
+
   useEffect(() => {
     let cleanup: (() => void) | undefined;
     let cancelled = false;
 
-    import("@atlaskit/pragmatic-drag-and-drop/element/adapter").then(({ monitorForElements }) => {
+    Promise.all([
+      import("@atlaskit/pragmatic-drag-and-drop/element/adapter"),
+      import("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"),
+    ]).then(([{ monitorForElements }, { extractClosestEdge }]) => {
       if (cancelled) return;
       cleanup = monitorForElements({
         onDragStart: ({ source }) => {
           if (source.data.dragType === "grid-cell") setIsDragging(true);
         },
-        onDrop: ({ source }) => {
-          if (source.data.dragType === "grid-cell") setIsDragging(false);
+        onDrop: ({ source, location }) => {
+          if (source.data.dragType !== "grid-cell") return;
+          setIsDragging(false);
+          // Every grid clears its own indicator on any drop — this is what stops
+          // the destination grid's drop line from sticking after a cross-grid drop.
+          setDragState({ sourceId: null, closestEdge: null });
+
+          const { gridId: my, group: myGroup, itemCount, onReorder, onRemove, onInsertItem, onEmptied } = cfgRef.current;
+          const srcGridId = source.data.gridId as string;
+          const target = location.current.dropTargets[0];
+          const dstGridId = target?.data.gridId as string | undefined;
+
+          // Same-grid reorder — only the owning grid acts on it.
+          if (srcGridId === my && dstGridId === my && target) {
+            const fromIndex = source.data.index as number;
+            const edge = extractClosestEdge(target.data) as "left" | "right" | null;
+            const toIndex = resolveDropIndex({ fromIndex, targetIndex: target.data.index as number, edge, sameCollection: true });
+            if (fromIndex !== toIndex) onReorder(fromIndex, toIndex);
+            return;
+          }
+
+          // Cross-grid transfer requires a shared group. The source grid removes
+          // its item; the destination grid inserts it. Two grids, two updates.
+          const crossAllowed = myGroup != null && source.data.group === myGroup;
+          if (!crossAllowed) return;
+
+          if (srcGridId === my && dstGridId && dstGridId !== my) {
+            // Dragging the last item out empties this grid — let the owner tear
+            // down the now-empty container instead of leaving it behind.
+            if (itemCount <= 1 && onEmptied) onEmptied();
+            else onRemove(source.data.id as string);
+          } else if (dstGridId === my && srcGridId !== my && target) {
+            const edge = extractClosestEdge(target.data) as "left" | "right" | null;
+            const toIndex = resolveDropIndex({ fromIndex: source.data.index as number, targetIndex: target.data.index as number, edge, sameCollection: false });
+            onInsertItem(toIndex, source.data.item as T);
+          }
         },
       });
     });
@@ -88,9 +147,11 @@ export function EditableGrid<T>({
             key={wrapped.id}
             id={wrapped.id}
             index={index}
+            gridId={gridId}
+            group={group}
+            item={wrapped.data}
             isLast={index === wrappedItems.length - 1}
             isDragging={isDragging}
-            onReorder={onReorder}
             onRemove={onRemove}
             onInsert={onInsert}
             onSettings={onItemSettings ? () => onItemSettings(index) : undefined}
@@ -117,12 +178,14 @@ export function EditableGrid<T>({
   );
 }
 
-function GridCell({
+function GridCell<T>({
   id,
   index,
+  gridId,
+  group,
+  item,
   isLast,
   isDragging,
-  onReorder,
   onRemove,
   onInsert,
   onSettings,
@@ -134,9 +197,11 @@ function GridCell({
 }: {
   id: string;
   index: number;
+  gridId: string;
+  group?: string;
+  item: T;
   isLast: boolean;
   isDragging: boolean;
-  onReorder: (from: number, to: number) => void;
   onRemove: (id: string) => void;
   onInsert: (index: number) => void;
   onSettings?: () => void;
@@ -165,17 +230,22 @@ function GridCell({
 
       const cleanupDraggable = draggable({
         element: handle,
-        getInitialData: () => ({ dragType: "grid-cell", id, index }),
+        // `item` rides along so a cross-grid destination can insert it verbatim.
+        getInitialData: () => ({ dragType: "grid-cell", gridId, group, id, index, item }),
         onDragStart: () => setDragState({ sourceId: id, closestEdge: null }),
         onDrop: () => setDragState({ sourceId: null, closestEdge: null }),
       });
 
       const cleanupDropTarget = dropTargetForElements({
         element: cell,
-        canDrop: ({ source }) => source.data.dragType === "grid-cell",
+        // Accept a reorder within this grid, or a transfer from another grid in
+        // the same group. The actual move is performed by the grid-level monitor.
+        canDrop: ({ source }) =>
+          source.data.dragType === "grid-cell" &&
+          (source.data.gridId === gridId || (group != null && source.data.group === group)),
         getData: ({ input, element }) =>
           attachClosestEdge(
-            { id, index },
+            { gridId, id, index },
             { input, element, allowedEdges: ["left", "right"] },
           ),
         onDragEnter: ({ self }) => {
@@ -189,16 +259,6 @@ function GridCell({
         onDragLeave: () => {
           setDragState((prev) => prev.closestEdge?.id === id ? { ...prev, closestEdge: null } : prev);
         },
-        onDrop: ({ source, self }) => {
-          const fromIndex = source.data.index as number;
-          const edge = extractClosestEdge(self.data);
-          let toIndex = index;
-          if (edge === "right") toIndex = index + 1;
-          if (fromIndex < toIndex) toIndex--;
-          if (fromIndex !== toIndex) {
-            onReorder(fromIndex, toIndex);
-          }
-        },
       });
 
       cleanup = () => {
@@ -211,7 +271,7 @@ function GridCell({
       cancelled = true;
       cleanup?.();
     };
-  }, [id, index, onReorder, setDragState]);
+  }, [id, index, gridId, group, item, setDragState]);
 
   const isCellDragging = dragState.sourceId === id;
   const showLeftEdge = dragState.closestEdge?.id === id && dragState.closestEdge.edge === "left" && dragState.sourceId !== id;
@@ -221,7 +281,9 @@ function GridCell({
     <div
       ref={cellRef}
       className={cn(
-        "group/cell relative",
+        // h-full so a full-height renderItem (e.g. a colors swatch) fills the
+        // stretched grid track and can equalize height across the row.
+        "group/cell relative h-full",
         isCellDragging && "opacity-50",
       )}
     >