@drawnagency/primitives 0.1.89 → 0.1.90

package/src/components/shell/AudiencePreviewMenu.tsx

@@ -0,0 +1,73 @@
+import { useRef, useState } from "react";
+import { Check, UsersIcon } from "lucide-react";
+import { IconButton } from "../shared/IconButton";
+import { Popover } from "../shared/Popover";
+import { PopoverItem } from "../shared/PopoverItem";
+import { useEditorContext } from "./EditorContext";
+import type { Audience } from "../../auth/types";
+
+interface AudiencePreviewMenuProps {
+  audiences: Audience[];
+}
+
+export function AudiencePreviewMenu({ audiences }: AudiencePreviewMenuProps) {
+  const { previewAudience, setPreviewAudience } = useEditorContext();
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  // A previewed audience can be deleted mid-session; the badge falls back grey.
+  const active = previewAudience !== null ? audiences.find((a) => a.name === previewAudience) : undefined;
+
+  function select(name: string | null) {
+    setPreviewAudience(name);
+    setOpen(false);
+  }
+
+  return (
+    <div ref={wrapperRef} className="relative">
+      <IconButton
+        icon={<UsersIcon size={16} />}
+        label="Preview as audience"
+        size="md"
+        onClick={() => setOpen((v) => !v)}
+        aria-pressed={previewAudience !== null}
+        aria-haspopup="true"
+        aria-expanded={open}
+        className="border border-base-200 bg-base-accent"
+      />
+      {previewAudience !== null && (
+        <span
+          aria-hidden="true"
+          data-testid="audience-preview-badge"
+          className="pointer-events-none absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border border-base"
+          style={{ backgroundColor: active?.color ?? "#9ca3af" }}
+        />
+      )}
+      <Popover isOpen={open} onClose={() => setOpen(false)} anchorRef={wrapperRef} className="w-48">
+        <ul role="radiogroup" aria-label="Preview as audience" className="w-full overflow-hidden py-1">
+          <li>
+            <PopoverItem role="radio" aria-checked={previewAudience === null} onClick={() => select(null)}>
+              <span className="flex-1 font-medium text-base-contrast">All audiences</span>
+              {previewAudience === null && <Check size={14} strokeWidth={3} className="text-primary" />}
+            </PopoverItem>
+          </li>
+          {audiences.map((a) => {
+            const checked = previewAudience === a.name;
+            return (
+              <li key={a.name}>
+                <PopoverItem role="radio" aria-checked={checked} onClick={() => select(a.name)}>
+                  <span
+                    aria-hidden="true"
+                    className="h-3 w-3 shrink-0 rounded-full border border-base-200"
+                    style={{ backgroundColor: a.color ?? "#9ca3af" }}
+                  />
+                  <span className="flex-1 font-medium text-base-contrast">{a.displayName}</span>
+                  {checked && <Check size={14} strokeWidth={3} className="text-primary" />}
+                </PopoverItem>
+              </li>
+            );
+          })}
+        </ul>
+      </Popover>
+    </div>
+  );
+}

package/src/components/shell/AuthoringDefaultsMenu.tsx

@@ -0,0 +1,54 @@
+import { useRef, useState } from "react";
+import { SlidersHorizontalIcon } from "lucide-react";
+import { IconButton } from "../shared/IconButton";
+import { Popover } from "../shared/Popover";
+import { StatusRadioList } from "../editor/StatusIndicator";
+import { AudienceChecklist } from "../editor/AudienceIndicator";
+import type { AuthoringDefaults } from "../../lib/authoring-defaults";
+import type { Audience } from "../../auth/types";
+
+interface AuthoringDefaultsMenuProps {
+  defaults: AuthoringDefaults;
+  audiences: Audience[];
+  onChange: (next: AuthoringDefaults) => void;
+}
+
+export function AuthoringDefaultsMenu({ defaults, audiences, onChange }: AuthoringDefaultsMenuProps) {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  function toggleAudience(name: string) {
+    const access = defaults.access.includes(name)
+      ? defaults.access.filter((n) => n !== name)
+      : [...defaults.access, name];
+    onChange({ ...defaults, access });
+  }
+
+  return (
+    <div ref={wrapperRef} className="relative">
+      <IconButton
+        icon={<SlidersHorizontalIcon size={16} />}
+        label="Authoring defaults"
+        size="md"
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="true"
+        aria-expanded={open}
+        className="border border-base-200 bg-base-accent"
+      />
+      <Popover isOpen={open} onClose={() => setOpen(false)} anchorRef={wrapperRef} className="w-56">
+        <div className="px-3 pt-2 pb-1 text-xs font-semibold text-base-contrast-light">
+          New sections start as
+        </div>
+        <StatusRadioList
+          status={defaults.status}
+          onChange={(status) => onChange({ ...defaults, status })}
+          ariaLabel="Default status for new sections"
+        />
+        <div className="border-t border-base-200 px-3 pt-2 pb-1 text-xs font-semibold text-base-contrast-light">
+          Default audiences
+        </div>
+        <AudienceChecklist access={defaults.access} audiences={audiences} onToggle={toggleAudience} />
+      </Popover>
+    </div>
+  );
+}

package/src/components/shell/EditorContext.tsx

@@ -17,11 +17,14 @@ interface EditorContextValue {
   viewBranch: "saved" | "live";
   historyState: HistoryState;
   historyPageId: string | null;
+  /** Audience-preview mode: dim sections this audience can't access. null = off. */
+  previewAudience: string | null;
   toggleEditMode: () => void;
   toggleShowAllChrome: () => void;
   setViewBranch: (branch: "saved" | "live") => void;
   setHistoryState: (state: HistoryState) => void;
   setHistoryPageId: (pageId: string | null) => void;
+  setPreviewAudience: (audience: string | null) => void;
 }
 
 const EditorContext = createContext<EditorContextValue | null>(null);
@@ -36,6 +39,7 @@ export function EditorProvider({ children }: EditorProviderProps) {
   const [viewBranch, setViewBranchState] = useState<"saved" | "live">("saved");
   const [historyState, setHistoryStateRaw] = useState<HistoryState>(null);
   const [historyPageId, setHistoryPageId] = useState<string | null>(null);
+  const [previewAudience, setPreviewAudience] = useState<string | null>(null);
   const setHistoryState = useCallback((state: HistoryState) => {
     // null = "auto": resolved to the current page (or home) at render time
     setHistoryPageId(null);
@@ -54,7 +58,7 @@ export function EditorProvider({ children }: EditorProviderProps) {
   const setViewBranch = useCallback((b: "saved" | "live") => setViewBranchState(b), []);
 
   return (
-    <EditorContext.Provider value={{ isEditMode, showAllChrome, viewBranch, historyState, historyPageId, toggleEditMode, toggleShowAllChrome, setViewBranch, setHistoryState, setHistoryPageId }}>
+    <EditorContext.Provider value={{ isEditMode, showAllChrome, viewBranch, historyState, historyPageId, previewAudience, toggleEditMode, toggleShowAllChrome, setViewBranch, setHistoryState, setHistoryPageId, setPreviewAudience }}>
       {children}
     </EditorContext.Provider>
   );

package/src/components/shell/EditorShell.tsx

@@ -90,7 +90,7 @@ import { generateSiteNav } from "../../lib/nav";
 import { siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent } from "../../lib/events";
 import {
   homePage, pageById, pageBySlug, pageDisplayTitle, addSectionToPage, removeSectionFromPages,
-  reorderSectionInPage,
+  reorderSectionInPage, audiencePasses,
   setHomePage, setPageArchived, setPageFields, setPageAudience, setPageDocument, deletePage, addPage, reorderPages,
   moveSection as moveSectionReducer,
 } from "../../lib/pages";
@@ -101,6 +101,7 @@ import { UploadRejectionAlert, formatRejections } from "../shared/UploadRejectio
 import { Button } from "../shared/Button";
 import { SplitButton } from "../shared/SplitButton";
 import { IconButton } from "../shared/IconButton";
+import { Tooltip } from "../shared/Tooltip";
 import { SegmentedControl } from "../shared/SegmentedControl";
 import { computeDisplaySections } from "./view-branch";
 import { SettingsIcon } from "../shared/icons";
@@ -110,6 +111,9 @@ import { HistoryToolbar } from "./HistoryToolbar";
 import { RestoreModal } from "./RestoreModal";
 import { EditorLoading } from "./EditorLoading";
 import ViewRenderer from "../sections/ViewRenderer";
+import { AuthoringDefaultsMenu } from "./AuthoringDefaultsMenu";
+import { AudiencePreviewMenu } from "./AudiencePreviewMenu";
+import { loadAuthoringDefaults, saveAuthoringDefaults, filterAccessToKnown, type AuthoringDefaults } from "../../lib/authoring-defaults";
 
 export { useMediaLibrary } from "./MediaLibraryContext";
 
@@ -173,6 +177,11 @@ export default function EditorShell({
   const [sections, setSections] = useState<LoadedSection[]>([]);
   const [siteIndex, setSiteIndex] = useState<SiteIndex>({ siteId, pages: [], sections: {} });
   const [audiences, setAudiences] = useState<Audience[]>(initialAudiences);
+  const [authoringDefaults, setAuthoringDefaults] = useState<AuthoringDefaults>(loadAuthoringDefaults);
+  const onAuthoringDefaultsChange = useCallback((next: AuthoringDefaults) => {
+    setAuthoringDefaults(next);
+    saveAuthoringDefaults(next);
+  }, []);
   const [localChangesExist, setLocalChangesExist] = useState(false);
   const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
   const [showSiteSettings, setShowSiteSettings] = useState(false);
@@ -1157,7 +1166,14 @@ export default function EditorShell({
       const content = resolveInsertedContent(selection, getAllSections(), newId);
       if (!content) return;
       const id = newId();
-      const meta = { type: content.type, status: "draft" as const, access: [] as string[] };
+      // Access is constrained to the audiences this page can offer (all site
+      // audiences on an unrestricted page), so stale or out-of-scope default
+      // names never land in a section's access list.
+      const meta = {
+        type: content.type,
+        status: authoringDefaults.status,
+        access: filterAccessToKnown(authoringDefaults.access, pageAudiences),
+      };
       const newSection: LoadedSection = { section: { id, ...content } as LoadedSection["section"], meta };
 
       setSections((prev) => [...prev, newSection]);
@@ -1173,7 +1189,7 @@ export default function EditorShell({
       // save-time sync by design).
       void collabRef.current?.requestEdit(id);
     },
-    [persistence, resolvedActivePage],
+    [persistence, resolvedActivePage, authoringDefaults, pageAudiences],
   );
 
   // Runs after the confirmation modal is accepted. Removes the section from the
@@ -1512,6 +1528,9 @@ export default function EditorShell({
             collabPeers={collab.peers}
             collabSelfId={collabBootstrap?.userId ?? null}
             collabStatus={collab.status}
+            audiences={audiences}
+            authoringDefaults={authoringDefaults}
+            onAuthoringDefaultsChange={onAuthoringDefaultsChange}
           />
 
           {/* Bug reports persist via Supabase. On the password-only (zero-Supabase)
@@ -1889,7 +1908,7 @@ function HistoryOrEditorContent({
   activeSections: LoadedSection[];
   activePageId: string | null;
 }) {
-  const { historyState, historyPageId, setHistoryPageId } = useEditorContext();
+  const { historyState, historyPageId, setHistoryPageId, previewAudience } = useEditorContext();
   const wasInHistory = useRef(false);
 
   const historyPage = historyState ? resolveHistoryPage(historyState, historyPageId, activePageId) : null;
@@ -1922,7 +1941,7 @@ function HistoryOrEditorContent({
     const pageSections = historyState.sections
       .filter((s) => position.has(s.section.id))
       .sort((a, b) => (position.get(a.section.id) ?? 0) - (position.get(b.section.id) ?? 0));
-    return <ViewRenderer sections={pageSections} />;
+    return <ViewRenderer sections={pageSections} previewAudience={previewAudience} />;
   }
   return <>{children}</>;
 }
@@ -2001,7 +2020,7 @@ function EditorContent({
   getEditIntent: (id: string) => () => Promise<boolean>;
   onTakeover: (id: string) => void;
 }) {
-  const { isEditMode, viewBranch } = useEditorContext();
+  const { isEditMode, viewBranch, previewAudience } = useEditorContext();
   const { openModal, closeModal } = useEditorModal();
   const [pendingInsertIndex, setPendingInsertIndex] = useState<number | null>(null);
   const dismissPendingInsert = useCallback(() => setPendingInsertIndex(null), []);
@@ -2092,7 +2111,12 @@ function EditorContent({
             )}
 
             <ErrorBoundary label={`${definition.label} (${section.type})`}>
-              <SectionLayout type={section.type} status={meta.status} dimNonPublished={!isEditMode}>
+              <SectionLayout
+                type={section.type}
+                status={meta.status}
+                dimNonPublished={!isEditMode}
+                dimmed={previewAudience !== null && !audiencePasses(meta.access, previewAudience)}
+              >
                 <SectionWrapper
                   sectionId={section.id}
                   sectionType={section.type}
@@ -2340,6 +2364,9 @@ function EditorToolbar({
   collabPeers,
   collabSelfId,
   collabStatus,
+  audiences,
+  authoringDefaults,
+  onAuthoringDefaultsChange,
 }: {
   buttonState: "synced" | "publish" | "saveAndPublish";
   localChangesExist: boolean;
@@ -2362,6 +2389,9 @@ function EditorToolbar({
   collabPeers: CollabPeer[];
   collabSelfId: string | null;
   collabStatus: CollabStatus;
+  audiences: Audience[];
+  authoringDefaults: AuthoringDefaults;
+  onAuthoringDefaultsChange: (next: AuthoringDefaults) => void;
 }) {
   const { isEditMode, viewBranch, setViewBranch, toggleEditMode, historyState, setHistoryState, historyPageId, setHistoryPageId } = useEditorContext();
 
@@ -2432,11 +2462,28 @@ function EditorToolbar({
             </div>
             <div className="flex items-center justify-end gap-2">
               <ProcessingIndicator items={processingItems} />
-              <IconButton icon={<ImageIcon size={16} />} label="Media library" size="md" onClick={onMediaClick} className="border border-base-200 bg-base-accent" />
-              <IconButton icon={<ListOrderedIcon size={16} />} label="Reorder sections" size="md" onClick={onOrderingClick} className="border border-base-200 bg-base-accent" />
-              <IconButton icon={<FilesIcon size={16} />} label="Pages" size="md" onClick={onPagesClick} className="border border-base-200 bg-base-accent" />
-              <ShowAllChromeToggle />
-              <IconButton icon={<SettingsIcon size={16} />} label="Site settings" size="md" onClick={onSettingsClick} className="border border-base-200 bg-base-accent" />
+              <Tooltip side="bottom" content="Authoring defaults">
+                <AuthoringDefaultsMenu defaults={authoringDefaults} audiences={audiences} onChange={onAuthoringDefaultsChange} />
+              </Tooltip>
+              <Tooltip side="bottom" content="Preview as audience">
+                <AudiencePreviewMenu audiences={audiences} />
+              </Tooltip>
+              <div aria-hidden="true" className="mx-1 h-6 w-px self-center bg-base-200" />
+              <Tooltip side="bottom" content="Media library">
+                <IconButton icon={<ImageIcon size={16} />} label="Media library" size="md" onClick={onMediaClick} className="border border-base-200 bg-base-accent" />
+              </Tooltip>
+              <Tooltip side="bottom" content="Reorder sections">
+                <IconButton icon={<ListOrderedIcon size={16} />} label="Reorder sections" size="md" onClick={onOrderingClick} className="border border-base-200 bg-base-accent" />
+              </Tooltip>
+              <Tooltip side="bottom" content="Pages">
+                <IconButton icon={<FilesIcon size={16} />} label="Pages" size="md" onClick={onPagesClick} className="border border-base-200 bg-base-accent" />
+              </Tooltip>
+              <Tooltip side="bottom" content="Toggle controls">
+                <ShowAllChromeToggle />
+              </Tooltip>
+              <Tooltip side="bottom-clamp" content="Site settings">
+                <IconButton icon={<SettingsIcon size={16} />} label="Site settings" size="md" onClick={onSettingsClick} className="border border-base-200 bg-base-accent" />
+              </Tooltip>
             </div>
           </div>
         </div>

package/src/components/shell/SiteSettingsChatbot.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { Button } from "../shared/Button";
 import { cn } from "../../lib/cn";
+import { contrastColor } from "../../lib/contrast";
 import ChatPanel from "../chat/ChatPanel";
 import type { SiteConfig, ChatbotConfig, ChatbotTask } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
@@ -35,7 +36,7 @@ function AudienceChips({ audiences, selected, onToggle }: { audiences: Audience[
         <button key={a.name} type="button" onClick={() => onToggle(a.name)}
           className={cn("rounded-full border px-2 py-0.5 text-xs",
             selected.includes(a.name) ? "border-primary bg-primary text-primary-contrast" : "border-base-200 bg-base-accent text-base-contrast")}
-          style={a.color && selected.includes(a.name) ? { backgroundColor: a.color, borderColor: a.color } : undefined}>
+          style={a.color && selected.includes(a.name) ? { backgroundColor: a.color, borderColor: a.color, color: contrastColor(a.color) } : undefined}>
           {a.displayName}
         </button>
       ))}

package/src/hooks/useBuildStatus.ts

@@ -23,6 +23,14 @@ const FADE_DURATION = 1000;
 // whose deploy was never confirmed (e.g. superseded by a later build) — show
 // idle rather than a phantom in-progress publish.
 const STALE_BUILD_MS = 15 * 60 * 1000;
+// Hard cap on an ACTIVE tracking session. Completion normally arrives via a terminal
+// poll (ready/error), which the Netlify webhook writes to the deploy-status row. If
+// that signal is lost/delayed (webhook dropped or unconfigured) the row stays
+// "building" forever and the elapsed counter would climb indefinitely. This backstop
+// stops the runaway counter and hides the indicator after the cap — the same "a build
+// shouldn't run longer than this" invariant as STALE_BUILD_MS, applied to the live
+// session rather than only on mount.
+const MAX_TRACKING_MS = STALE_BUILD_MS;
 
 export function useBuildStatus(): BuildStatusResult {
   const [state, setState] = useState<BuildState>("idle");
@@ -31,6 +39,7 @@ export function useBuildStatus(): BuildStatusResult {
   const clearRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const fadeRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const giveUpRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const isPolling = useRef(false);
   const mountedRef = useRef(true);
 
@@ -52,6 +61,23 @@ export function useBuildStatus(): BuildStatusResult {
     isPolling.current = false;
   }, []);
 
+  const clearGiveUp = useCallback(() => {
+    if (giveUpRef.current) { clearTimeout(giveUpRef.current); giveUpRef.current = null; }
+  }, []);
+
+  // Arm the runaway backstop: if the cap elapses before a terminal signal, stop
+  // polling + the timer and drop back to idle (hide the indicator). `elapsedMs` lets a
+  // build already in progress at mount count against the same absolute cap.
+  const armGiveUp = useCallback((elapsedMs = 0) => {
+    clearGiveUp();
+    giveUpRef.current = setTimeout(() => {
+      if (!mountedRef.current) return;
+      stopPolling();
+      stopTimer();
+      setState("idle");
+    }, Math.max(0, MAX_TRACKING_MS - elapsedMs));
+  }, [clearGiveUp, stopPolling, stopTimer]);
+
   const fetchStatus = useCallback(async (): Promise<BuildStatusResponse | null> => {
     try {
       const res = await fetch("/api/build-status");
@@ -86,6 +112,7 @@ export function useBuildStatus(): BuildStatusResult {
       if (data.state === "ready" || data.state === "error") {
         stopPolling();
         stopTimer();
+        clearGiveUp();
         if (data.state === "ready") {
           clearRef.current = setTimeout(() => {
             if (!mountedRef.current) return;
@@ -98,7 +125,7 @@ export function useBuildStatus(): BuildStatusResult {
         }
       }
     },
-    [stopPolling, stopTimer],
+    [stopPolling, stopTimer, clearGiveUp],
   );
 
   const startPolling = useCallback(() => {
@@ -130,6 +157,7 @@ export function useBuildStatus(): BuildStatusResult {
         // counts real elapsed time instead of sitting frozen at 0:00.
         startTimer(Number.isFinite(ageMs) ? Math.max(0, Math.floor(ageMs / 1000)) : 0);
         startPolling();
+        armGiveUp(Number.isFinite(ageMs) ? ageMs : 0);
         return;
       }
 
@@ -143,24 +171,27 @@ export function useBuildStatus(): BuildStatusResult {
       mountedRef.current = false;
       stopPolling();
       stopTimer();
+      clearGiveUp();
       if (clearRef.current) clearTimeout(clearRef.current);
       if (fadeRef.current) clearTimeout(fadeRef.current);
     };
-  }, [fetchStatus, handleStatusUpdate, startPolling, startTimer, stopPolling, stopTimer]);
+  }, [fetchStatus, handleStatusUpdate, startPolling, startTimer, stopPolling, stopTimer, armGiveUp, clearGiveUp]);
 
   const startTracking = useCallback(() => {
     if (clearRef.current) { clearTimeout(clearRef.current); clearRef.current = null; }
     setState("building");
     startTimer();
     startPolling();
-  }, [startPolling, startTimer]);
+    armGiveUp(0);
+  }, [startPolling, startTimer, armGiveUp]);
 
   const dismiss = useCallback(() => {
     if (clearRef.current) { clearTimeout(clearRef.current); clearRef.current = null; }
     setState("idle");
     stopPolling();
     stopTimer();
-  }, [stopPolling, stopTimer]);
+    clearGiveUp();
+  }, [stopPolling, stopTimer, clearGiveUp]);
 
   return { state, elapsedSeconds, startTracking, dismiss };
 }

package/src/lib/authoring-defaults.ts

@@ -0,0 +1,42 @@
+import { z } from "zod";
+import { StatusSchema } from "../schemas/site-config";
+import type { Audience } from "../auth/types";
+
+export const AuthoringDefaultsSchema = z.object({
+  status: StatusSchema,
+  access: z.array(z.string()),
+});
+
+export type AuthoringDefaults = z.infer<typeof AuthoringDefaultsSchema>;
+
+export const FALLBACK_AUTHORING_DEFAULTS: AuthoringDefaults = { status: "draft", access: [] };
+
+// Per-origin key — every client site is its own domain, so the preference is
+// automatically per-site.
+const STORAGE_KEY = "portal-authoring-defaults";
+
+export function loadAuthoringDefaults(): AuthoringDefaults {
+  if (typeof localStorage === "undefined") return FALLBACK_AUTHORING_DEFAULTS;
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return FALLBACK_AUTHORING_DEFAULTS;
+    return AuthoringDefaultsSchema.parse(JSON.parse(raw));
+  } catch {
+    return FALLBACK_AUTHORING_DEFAULTS;
+  }
+}
+
+export function saveAuthoringDefaults(defaults: AuthoringDefaults): void {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(defaults));
+  } catch {
+    // Quota/private-mode failures just lose the preference.
+  }
+}
+
+// Stored default audiences can outlive the audiences themselves — drop any
+// name the site no longer has before stamping it onto a new section's access.
+export function filterAccessToKnown(access: string[], audiences: Audience[]): string[] {
+  return access.filter((name) => audiences.some((a) => a.name === name));
+}

package/src/lib/container-grid.ts

@@ -42,6 +42,20 @@ export const gapClass: Record<string, string> = {
   lg: "gap-8",
 };
 
+/**
+ * Column count -> `columns-N` classes for masonry (CSS multi-column), mirroring
+ * `containerGridClass`'s collapse curve (`grid-cols-`→`columns-`). Full static
+ * strings so Tailwind's source scan generates them.
+ */
+export const masonryColumnsClass: Record<number, string> = {
+  1: "columns-1",
+  2: "columns-1 @sm:columns-2",
+  3: "columns-1 @sm:columns-2 @lg:columns-3",
+  4: "columns-1 @xs:columns-2 @lg:columns-4",
+  5: "columns-1 @xs:columns-2 @md:columns-3 @xl:columns-5",
+  6: "columns-1 @xs:columns-2 @md:columns-3 @2xl:columns-6",
+};
+
 /**
  * Per-column-count container-query classes that HIDE a spacer cell once the container
  * collapses to a single column (mobile). Mirrors `containerGridClass`'s collapse curve:

package/src/lib/migrate-sections-transform.ts

@@ -99,7 +99,8 @@ function upgradeGrid(section: Obj): Obj {
     type: "container",
     content: {
       columns: content.columns,
-      flow: "row",
+      layout: "grid",
+      equalizeRowHeight: false,
       children: media.map((item, i) => mapRefItem(item, id, i)),
     },
   };
@@ -126,7 +127,7 @@ function upgradeSplitContent(section: Obj): Obj {
   };
   const children = options.imagePosition === "right" ? [proseChild, mediaChild] : [mediaChild, proseChild];
 
-  const out: Obj = { id, type: "container", content: { columns: 2, flow: "row", children } };
+  const out: Obj = { id, type: "container", content: { columns: 2, layout: "grid", equalizeRowHeight: false, children } };
   if (section.layout !== undefined) out.layout = section.layout;
   return out;
 }
@@ -163,7 +164,8 @@ function upgradeDoDont(section: Obj): Obj {
     type: "container",
     content: {
       columns: 2,
-      flow: "row",
+      layout: "grid",
+      equalizeRowHeight: false,
       children: [
         dodontChild(doItems, id, 0, "do", childOptions),
         dodontChild(dontItems, id, 1, "dont", childOptions),

package/src/schemas/site-config.ts

@@ -7,7 +7,7 @@ import { CORNER_RADIUS_OPTIONS } from "../lib/corner-radius";
 // document options block onto PageSchema.
 import { documentOptionsSchema } from "../document/engine/settings";
 
-const StatusSchema = z.enum(["draft", "live", "archived", "published"]).transform(
+export const StatusSchema = z.enum(["draft", "live", "archived", "published"]).transform(
   (val) => val === "published" ? "live" as const : val,
 );