@drawnagency/primitives 0.1.0

package/src/components/shell/EditorShell.tsx

@@ -0,0 +1,910 @@
+import { Fragment, useState, useCallback, useEffect, useRef } from "react";
+
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import type { LoadedSection } from "../../lib/loader";
+import type { SectionContent } from "../../schemas/sections";
+import type { SiteIndex, SiteConfig } from "../../schemas/site-config";
+import type { Audience } from "../../auth/types";
+import type { MediaManifest } from "../../media/types";
+import type { QueueItem } from "../../media/queue";
+import { SiteConfigSchema } from "../../schemas/site-config";
+import { EditorProvider, useEditorContext } from "./EditorContext";
+import { EditorModalProvider, useEditorModal } from "./EditorModalContext";
+import { EditorModal } from "./EditorModal";
+import { SiteSettingsModal } from "./SiteSettingsModal";
+import { MediaLibraryModal } from "./MediaLibraryModal";
+import { MediaLibraryContext } from "./MediaLibraryContext";
+import { ProcessingIndicator } from "./ProcessingIndicator";
+import { SectionSkeleton } from "./SectionSkeleton";
+import "../sections/register";
+import { getSection, getAllSections } from "../../lib/registry";
+import { SectionWrapper } from "../editor/SectionWrapper";
+import { SectionLayout } from "../sections/SectionLayout";
+import {
+  initEditorStore,
+  checkForLocalChanges,
+  restoreLocalChanges,
+  discardLocalChanges,
+  getCachedContent,
+  cacheContent,
+  persistMediaManifest,
+  getMediaManifest,
+  getPendingMediaItems,
+  getPendingMediaLocalUrls,
+  getPendingMediaDeletions,
+} from "../../lib/dexie";
+import { useEditorPersistence } from "../../hooks/useEditorPersistence";
+import { useEditorPublish } from "../../hooks/useEditorPublish";
+import { useMediaPipeline } from "../../hooks/useMediaPipeline";
+import { formatTimestamp } from "../../lib/timestamp";
+import { generateNavLinks } from "../../lib/nav";
+import { navChangeEvent, darkModeEvent } from "../../lib/events";
+import { cn } from "../../lib/cn";
+import { Button } from "../shared/Button";
+import { IconButton } from "../shared/IconButton";
+import { SettingsIcon } from "../shared/icons";
+import { ImageIcon } from "lucide-react";
+import { ErrorBoundary } from "../shared/ErrorBoundary";
+
+export { useMediaLibrary } from "./MediaLibraryContext";
+
+const typeOptions = getAllSections().map((def) => ({
+  type: def.type,
+  label: def.label,
+  icon: () => null,
+}));
+
+type ShellState =
+  | { phase: "loading-content" }
+  | { phase: "error"; message: string }
+  | { phase: "recovery"; latestTimestamp: string }
+  | { phase: "ready" };
+
+interface Props {
+  headSha: string;
+  siteId: string;
+  audiences: Audience[];
+  capabilities: {
+    oauth: boolean;
+    emailPassword: boolean;
+    passwordOnly: boolean;
+    userManagement: boolean;
+    audienceManagement: boolean;
+    passwordToggle: boolean;
+  };
+  currentUser: { email: string; role: "owner" | "editor" } | null;
+}
+
+export default function EditorShell({
+  headSha,
+  siteId,
+  audiences: initialAudiences,
+  capabilities,
+  currentUser,
+}: Props) {
+  const [shellState, setShellState] = useState<ShellState>({ phase: "loading-content" });
+  const [sections, setSections] = useState<LoadedSection[]>([]);
+  const [siteIndex, setSiteIndex] = useState<SiteIndex>({ siteId, order: [], sections: {} });
+  const [audiences, setAudiences] = useState<Audience[]>(initialAudiences);
+  const [localChangesExist, setLocalChangesExist] = useState(false);
+  const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
+  const [showSiteSettings, setShowSiteSettings] = useState(false);
+  const [dirtySectionIds, setDirtySectionIds] = useState<Set<string>>(new Set());
+  const [siteConfig, setSiteConfig] = useState<SiteConfig | null>(null);
+  const [mediaManifest, setMediaManifest] = useState<MediaManifest>({ images: {} });
+  const [showMediaLibrary, setShowMediaLibrary] = useState(false);
+  const [mediaModalMode, setMediaModalMode] = useState<"select" | "manage">("manage");
+  const [mediaSelectCallback, setMediaSelectCallback] = useState<((id: string) => void) | null>(null);
+
+  const siteIndexRef = useRef<SiteIndex>({ siteId, order: [], sections: {} });
+  const fontLinkRef = useRef<HTMLLinkElement | null>(null);
+  useEffect(() => { siteIndexRef.current = siteIndex; }, [siteIndex]);
+
+  const persistence = useEditorPersistence(siteIndexRef);
+
+  const mediaPipeline = useMediaPipeline({
+    siteConfig,
+    mediaManifest,
+    setMediaManifest,
+    sections,
+    setSections,
+    setLocalChangesExist,
+    setDirtySectionIds,
+    markSectionDirty: persistence.markSectionDirty,
+  });
+
+  const { isPublishing, publishFeedback, handlePublish } = useEditorPublish({
+    flushNow: persistence.flushNow,
+    cancelPendingFlush: persistence.cancelPendingFlush,
+    isConfigDirty: persistence.isConfigDirty,
+    clearConfigDirty: persistence.clearConfigDirty,
+    siteIndexRef,
+    siteConfig,
+    sections,
+    onSuccess: () => {
+      setDirtySectionIds(new Set());
+      setLocalChangesExist(false);
+    },
+    mediaManifest,
+    pendingMediaItems: mediaPipeline.pendingMediaItems,
+    pendingMediaDeletions: mediaPipeline.pendingDeletions,
+    onMediaPublished: (publishedItems, publishedDeletions) => {
+      mediaPipeline.setPendingMediaItems([]);
+      mediaPipeline.setPendingLocalUrls({});
+      mediaPipeline.setPendingDeletions([]);
+      setMediaManifest((prev) => {
+        const images = { ...prev.images };
+        for (const item of publishedItems) {
+          images[item.id] = item;
+        }
+        for (const id of publishedDeletions) {
+          delete images[id];
+        }
+        return { images };
+      });
+    },
+  });
+
+  useEffect(() => {
+    if (sections.length === 0) return;
+    const navLinks = generateNavLinks(sections);
+    navChangeEvent.dispatch(navLinks);
+  }, [sections]);
+
+  const applySiteConfigPreview = useCallback((config: SiteConfig) => {
+    const root = document.documentElement;
+    root.style.setProperty("--color-primary", config.primaryColor);
+    root.style.setProperty("--color-primary-contrast", config.primaryContrast);
+    root.style.setProperty("--font-heading", `${config.headingFont}, system-ui, sans-serif`);
+    root.style.setProperty("--font-body", `${config.bodyFont}, system-ui, sans-serif`);
+
+    if (config.googleFontsUrl) {
+      if (fontLinkRef.current?.href !== config.googleFontsUrl) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = config.googleFontsUrl;
+        document.head.appendChild(link);
+        fontLinkRef.current?.remove();
+        fontLinkRef.current = link;
+      }
+    } else {
+      fontLinkRef.current?.remove();
+      fontLinkRef.current = null;
+    }
+
+    if (config.darkMode === "dark") {
+      root.classList.add("dark");
+    } else if (config.darkMode === "light") {
+      root.classList.remove("dark");
+    } else {
+      const stored = localStorage.getItem("theme");
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      root.classList.toggle("dark", stored === "dark" || (!stored && prefersDark));
+    }
+
+    localStorage.setItem("portal-dark-mode", config.darkMode);
+    localStorage.setItem("portal-primary-color", config.primaryColor);
+    localStorage.setItem("portal-primary-contrast", config.primaryContrast);
+    darkModeEvent.dispatch(config.darkMode);
+  }, []);
+
+  // --- Content loading ---
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadContent() {
+      initEditorStore(siteId);
+      let loadedSections: LoadedSection[];
+      let loadedIndex: SiteIndex;
+      let loadedConfig: SiteConfig;
+      let loadedManifest: MediaManifest = { images: {} };
+
+      const cached = await getCachedContent();
+      if (cached && cached.sha === headSha) {
+        loadedSections = cached.sections;
+        loadedIndex = cached.index;
+        loadedConfig = SiteConfigSchema.parse(cached.siteConfig);
+        const savedManifest = await getMediaManifest();
+        if (savedManifest) loadedManifest = savedManifest;
+      } else {
+        const response = await fetch("/api/content");
+        if (!response.ok) throw new Error(`Failed to load content: ${response.status}`);
+        const data = await response.json();
+        loadedSections = data.sections;
+        loadedIndex = data.index;
+        loadedConfig = SiteConfigSchema.parse(data.siteConfig);
+        await cacheContent(data.sha, data.sections, data.index, data.siteConfig);
+        if (data.mediaManifest) {
+          loadedManifest = data.mediaManifest as MediaManifest;
+          await persistMediaManifest(loadedManifest);
+        }
+      }
+
+      if (cancelled) return;
+      setSections(loadedSections);
+      setSiteIndex(loadedIndex);
+      setSiteConfig(loadedConfig);
+      setMediaManifest(loadedManifest);
+      siteIndexRef.current = loadedIndex;
+      applySiteConfigPreview(loadedConfig);
+
+      // Load pending media from Dexie
+      const savedPendingItems = await getPendingMediaItems();
+      if (!cancelled && savedPendingItems.length > 0) {
+        mediaPipeline.setPendingMediaItems(savedPendingItems);
+        const urlMap: Record<string, string> = {};
+        for (const pi of savedPendingItems) {
+          const urls = await getPendingMediaLocalUrls(pi.id);
+          if (urls) {
+            const smallestKey = Object.keys(urls).find((k) => k !== "primary") ?? "primary";
+            if (urls[smallestKey]) urlMap[pi.id] = urls[smallestKey];
+          }
+        }
+        if (!cancelled) mediaPipeline.setPendingLocalUrls(urlMap);
+      }
+      const savedDeletions = await getPendingMediaDeletions();
+      if (!cancelled && savedDeletions.length > 0) mediaPipeline.setPendingDeletions(savedDeletions);
+
+      const result = await checkForLocalChanges();
+      if (cancelled) return;
+      if (result) {
+        setShellState({ phase: "recovery", latestTimestamp: result.latestTimestamp });
+      } else {
+        setShellState({ phase: "ready" });
+      }
+    }
+
+    loadContent().catch((err) => {
+      console.error("Failed to load editor content:", err);
+      setShellState({ phase: "error", message: err instanceof Error ? err.message : "Failed to load content" });
+    });
+    return () => { cancelled = true; };
+  }, [headSha, siteId, applySiteConfigPreview]);
+
+  // --- Recovery handlers ---
+
+  const handleRestore = useCallback(async () => {
+    const restored = await restoreLocalChanges();
+
+    if (restored.siteIndex) {
+      const restoredIndex = restored.siteIndex;
+      setSections(() =>
+        restoredIndex.order.map((id) => {
+          const restoredContent = restored.sections[id];
+          const existing = sections.find((s) => s.section.id === id);
+          if (restoredContent) {
+            return {
+              section: { id, ...restoredContent },
+              meta: restoredIndex.sections[id] ?? existing?.meta ?? { type: restoredContent.type, status: "draft", access: ["internal"] },
+            };
+          }
+          if (existing) {
+            return { ...existing, meta: restoredIndex.sections[id] ?? existing.meta };
+          }
+          return null;
+        }).filter((s): s is LoadedSection => s !== null),
+      );
+      setSiteIndex(restoredIndex);
+    } else {
+      setSections((prev) =>
+        prev.map((loaded) => {
+          const restoredContent = restored.sections[loaded.section.id];
+          if (restoredContent) {
+            return { ...loaded, section: { id: loaded.section.id, ...restoredContent } };
+          }
+          return loaded;
+        }),
+      );
+    }
+
+    if (restored.siteConfig) {
+      const parsed = SiteConfigSchema.safeParse(restored.siteConfig);
+      if (parsed.success) {
+        setSiteConfig(parsed.data);
+        persistence.persistConfig(parsed.data as unknown as Record<string, unknown>);
+        applySiteConfigPreview(parsed.data);
+      }
+    }
+
+    setLocalChangesExist(true);
+    setDirtySectionIds(new Set(Object.keys(restored.sections)));
+    setShellState({ phase: "ready" });
+  }, [sections, applySiteConfigPreview, persistence]);
+
+  const handleDiscard = useCallback(async () => {
+    await discardLocalChanges();
+    setLocalChangesExist(false);
+    setDirtySectionIds(new Set());
+    mediaPipeline.setPendingMediaItems([]);
+    mediaPipeline.setPendingLocalUrls({});
+    mediaPipeline.setPendingDeletions([]);
+    const cached = await getCachedContent();
+    if (cached) {
+      setSections(cached.sections);
+      setSiteIndex(cached.index);
+      siteIndexRef.current = cached.index;
+      const parsed = SiteConfigSchema.safeParse(cached.siteConfig);
+      if (parsed.success) {
+        setSiteConfig(parsed.data);
+        applySiteConfigPreview(parsed.data);
+      }
+    }
+    const savedManifest = await getMediaManifest();
+    setMediaManifest(savedManifest ?? { images: {} });
+    persistence.clearConfigDirty();
+    setShellState({ phase: "ready" });
+  }, [applySiteConfigPreview, persistence]);
+
+  const handleToolbarDiscard = useCallback(async () => {
+    setShowDiscardConfirm(false);
+    await handleDiscard();
+  }, [handleDiscard]);
+
+  // --- Section CRUD ---
+
+  const onSectionChange = useCallback(
+    (sectionId: string, newContent: SectionContent) => {
+      setSections((prev) =>
+        prev.map((loaded) =>
+          loaded.section.id === sectionId
+            ? { ...loaded, section: { id: loaded.section.id, ...newContent } }
+            : loaded,
+        ),
+      );
+      persistence.markSectionDirty(sectionId, newContent);
+      setLocalChangesExist(true);
+      setDirtySectionIds((prev) => new Set(prev).add(sectionId));
+    },
+    [persistence],
+  );
+
+  const onAddSection = useCallback(
+    (insertIndex: number, type: string) => {
+      const definition = getSection(type);
+      if (!definition) return;
+
+      const id = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+        ? crypto.randomUUID()
+        : `_id_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+      const content = definition.defaults() as object;
+      const newSection: LoadedSection = {
+        section: { id, ...content } as LoadedSection["section"],
+        meta: { type, status: "draft", access: ["internal"] },
+      };
+
+      setSections((prev) => {
+        const next = [...prev];
+        next.splice(insertIndex, 0, newSection);
+        return next;
+      });
+
+      setSiteIndex((prev) => {
+        const newOrder = [...prev.order];
+        newOrder.splice(insertIndex, 0, id);
+        return {
+          ...prev,
+          order: newOrder,
+          sections: { ...prev.sections, [id]: { type, status: "draft", access: ["internal"] } },
+        };
+      });
+
+      persistence.markSectionDirty(id, content as SectionContent);
+      persistence.markIndexDirty();
+      setLocalChangesExist(true);
+      setDirtySectionIds((prev) => new Set(prev).add(id));
+    },
+    [persistence],
+  );
+
+  const onDeleteSection = useCallback(
+    (sectionId: string) => {
+      setSections((prev) => prev.filter((s) => s.section.id !== sectionId));
+      setSiteIndex((prev) => {
+        const { [sectionId]: _, ...remainingSections } = prev.sections;
+        return {
+          ...prev,
+          order: prev.order.filter((id) => id !== sectionId),
+          sections: remainingSections,
+        };
+      });
+
+      persistence.markSectionDeleted(sectionId);
+      setLocalChangesExist(true);
+      setDirtySectionIds((prev) => {
+        const next = new Set(prev);
+        next.delete(sectionId);
+        return next;
+      });
+    },
+    [persistence],
+  );
+
+  const onReorderSections = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      setSections((prev) => {
+        const next = [...prev];
+        const [moved] = next.splice(fromIndex, 1);
+        next.splice(toIndex, 0, moved);
+        return next;
+      });
+      setSiteIndex((prev) => {
+        const newOrder = [...prev.order];
+        const [movedId] = newOrder.splice(fromIndex, 1);
+        newOrder.splice(toIndex, 0, movedId);
+        return { ...prev, order: newOrder };
+      });
+
+      persistence.markIndexDirty();
+      setLocalChangesExist(true);
+    },
+    [persistence],
+  );
+
+  const onAccessChange = useCallback(
+    (sectionId: string, access: string[]) => {
+      setSections((prev) =>
+        prev.map((loaded) =>
+          loaded.section.id === sectionId
+            ? { ...loaded, meta: { ...loaded.meta, access } }
+            : loaded,
+        ),
+      );
+      setSiteIndex((prev) => ({
+        ...prev,
+        sections: { ...prev.sections, [sectionId]: { ...prev.sections[sectionId], access } },
+      }));
+      persistence.markIndexDirty();
+      setLocalChangesExist(true);
+    },
+    [persistence],
+  );
+
+  const onStatusChange = useCallback(
+    (sectionId: string, status: "draft" | "published" | "archived") => {
+      setSections((prev) =>
+        prev.map((loaded) =>
+          loaded.section.id === sectionId
+            ? { ...loaded, meta: { ...loaded.meta, status } }
+            : loaded,
+        ),
+      );
+      setSiteIndex((prev) => ({
+        ...prev,
+        sections: { ...prev.sections, [sectionId]: { ...prev.sections[sectionId], status } },
+      }));
+      persistence.markIndexDirty();
+      setLocalChangesExist(true);
+    },
+    [persistence],
+  );
+
+  const handleSiteConfigChange = useCallback((config: SiteConfig) => {
+    setSiteConfig(config);
+    applySiteConfigPreview(config);
+    persistence.persistConfig(config as unknown as Record<string, unknown>);
+    setLocalChangesExist(true);
+  }, [applySiteConfigPreview, persistence]);
+
+  // --- Render ---
+
+  if (shellState.phase === "loading-content") {
+    return <div className="min-h-screen" aria-busy="true" aria-label="Loading content" />;
+  }
+
+  if (shellState.phase === "error") {
+    return (
+      <div className="flex min-h-[50vh] items-center justify-center">
+        <div className="text-center">
+          <p className="text-sm text-red-600">{shellState.message}</p>
+          <Button variant="secondary" size="md" className="mt-3" onClick={() => window.location.reload()}>
+            Retry
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (shellState.phase === "recovery") {
+    return (
+      <EditorModal isOpen={true} onClose={() => {}} title="Unsaved Changes" blocking>
+        <p className="text-sm text-base-contrast-light">
+          You have unsaved changes from <strong>{formatTimestamp(shellState.latestTimestamp)}</strong>.
+          Would you like to restore them or start fresh?
+        </p>
+        <div className="mt-4 flex justify-end gap-3">
+          <Button type="button" variant="secondary" size="md" onClick={handleDiscard}>
+            Discard
+          </Button>
+          <Button type="button" variant="primary" size="md" onClick={handleRestore}>
+            Restore
+          </Button>
+        </div>
+      </EditorModal>
+    );
+  }
+
+  return (
+    <EditorProvider>
+      <EditorModalProvider>
+        <MediaLibraryContext.Provider value={{
+          ...mediaPipeline.contextValue,
+          openSelectModal: (onSelect) => {
+            setMediaModalMode("select");
+            setMediaSelectCallback(() => onSelect);
+            setShowMediaLibrary(true);
+          },
+        }}>
+        <div className="editor-shell relative">
+          <EditorToolbar
+            localChangesExist={localChangesExist}
+            isPublishing={isPublishing}
+            publishFeedback={publishFeedback}
+            onPublish={handlePublish}
+            onDiscardClick={() => setShowDiscardConfirm(true)}
+            onSettingsClick={() => setShowSiteSettings(true)}
+            onMediaClick={() => {
+              setMediaModalMode("manage");
+              setShowMediaLibrary(true);
+            }}
+            processingItems={mediaPipeline.processingItems}
+          />
+
+          <EditorContent
+            sections={sections}
+            audiences={audiences}
+            dirtySectionIds={dirtySectionIds}
+            isPublishing={isPublishing}
+            onSectionChange={onSectionChange}
+            onAddSection={onAddSection}
+            onDeleteSection={onDeleteSection}
+            onReorderSections={onReorderSections}
+            onAccessChange={onAccessChange}
+            onStatusChange={onStatusChange}
+          />
+          <GlobalModal />
+          <SiteSettingsModal
+            isOpen={showSiteSettings}
+            onClose={() => setShowSiteSettings(false)}
+            siteConfig={siteConfig!}
+            onSiteConfigChange={handleSiteConfigChange}
+            onAudiencesChange={setAudiences}
+            capabilities={capabilities}
+            currentUser={currentUser}
+          />
+          <EditorModal
+            isOpen={showDiscardConfirm}
+            onClose={() => setShowDiscardConfirm(false)}
+            title="Discard Changes"
+          >
+            <p className="mb-4 text-sm text-base-contrast-light">
+              Discard all unsaved changes? This will reload with the last published content.
+            </p>
+            <div className="flex justify-end gap-3">
+              <Button variant="secondary" size="md" onClick={() => setShowDiscardConfirm(false)}>
+                Cancel
+              </Button>
+              <Button variant="destructive" size="md" onClick={handleToolbarDiscard}>
+                Discard
+              </Button>
+            </div>
+          </EditorModal>
+          <EditorModal
+            isOpen={showMediaLibrary}
+            onClose={() => {
+              setShowMediaLibrary(false);
+              setMediaSelectCallback(null);
+            }}
+            title="Media Library"
+            size="large"
+          >
+            <MediaLibraryModal
+              mode={mediaModalMode}
+              items={[
+                ...Object.values(mediaManifest.images),
+                ...mediaPipeline.pendingMediaItems,
+              ].filter((item) => !mediaPipeline.pendingDeletions.includes(item.id))}
+              onSelect={(id) => {
+                if (mediaSelectCallback) {
+                  mediaSelectCallback(id);
+                }
+                setShowMediaLibrary(false);
+                setMediaSelectCallback(null);
+              }}
+              onUpload={mediaPipeline.handleMediaUpload}
+              onDelete={mediaPipeline.handleMediaDelete}
+              onAltChange={mediaPipeline.handleMediaAltChange}
+              referenceCountMap={mediaPipeline.referenceCountMap}
+              localUrlMap={mediaPipeline.pendingLocalUrls}
+              maxFileSize={siteConfig?.media.maxFileSize}
+            />
+          </EditorModal>
+        </div>
+        </MediaLibraryContext.Provider>
+      </EditorModalProvider>
+    </EditorProvider>
+  );
+}
+
+function EditorContent({
+  sections,
+  audiences,
+  dirtySectionIds,
+  isPublishing,
+  onSectionChange,
+  onAddSection,
+  onDeleteSection,
+  onReorderSections,
+  onAccessChange,
+  onStatusChange,
+}: {
+  sections: LoadedSection[];
+  audiences: Audience[];
+  dirtySectionIds: Set<string>;
+  isPublishing: boolean;
+  onSectionChange: (sectionId: string, content: SectionContent) => void;
+  onAddSection: (insertIndex: number, type: string) => void;
+  onDeleteSection: (sectionId: string) => void;
+  onReorderSections: (fromIndex: number, toIndex: number) => void;
+  onAccessChange: (sectionId: string, access: string[]) => void;
+  onStatusChange: (sectionId: string, status: "draft" | "published" | "archived") => void;
+}) {
+  const { isEditMode } = useEditorContext();
+  const { openModal, closeModal } = useEditorModal();
+  const [pendingInsertIndex, setPendingInsertIndex] = useState<number | null>(null);
+  const dismissPendingInsert = useCallback(() => setPendingInsertIndex(null), []);
+
+  const editingEnabled = isEditMode && !isPublishing;
+
+  useEffect(() => {
+    return monitorForElements({
+      onDragStart: ({ source }) => {
+        if (source.data.dragType === "section") {
+          setPendingInsertIndex(null);
+        }
+      },
+    });
+  }, []);
+
+  return (
+    <div>
+      {sections.map(({ section, meta }, index) => {
+        const definition = getSection(section.type);
+        if (!definition) {
+          return (
+            <div
+              key={section.id}
+              className="border border-amber-400 bg-amber-50 px-4 py-3 text-sm text-amber-800 dark:border-amber-600 dark:bg-amber-900/30 dark:text-amber-300"
+              role="alert"
+            >
+              Unknown section type: <code className="font-mono font-semibold">{section.type}</code>
+            </div>
+          );
+        }
+        const Component = definition.component;
+
+        return (
+          <Fragment key={section.id}>
+            {editingEnabled && pendingInsertIndex === index && (
+              <SectionSkeleton
+                types={typeOptions}
+                onSelect={(type) => {
+                  onAddSection(index, type);
+                  setPendingInsertIndex(null);
+                }}
+                onDismiss={dismissPendingInsert}
+              />
+            )}
+
+            <ErrorBoundary label={`${definition.label} (${section.type})`}>
+              <SectionLayout type={section.type} status={meta.status} dimNonPublished={!isEditMode}>
+                <SectionWrapper
+                  sectionId={section.id}
+                  sectionType={section.type}
+                  status={meta.status}
+                  dirty={dirtySectionIds.has(section.id)}
+                  index={index}
+                  isLast={index === sections.length - 1}
+                  definition={definition}
+                  options={{
+                    ...(section.content as Record<string, unknown>),
+                    ...("options" in section ? (section.options as Record<string, unknown>) : {}),
+                  }}
+                  audiences={audiences}
+                  access={meta.access}
+                  onAccessChange={editingEnabled ? (a) => onAccessChange(section.id, a) : undefined}
+                  onStatusChange={editingEnabled ? (s) => onStatusChange(section.id, s) : undefined}
+                  onSectionChange={editingEnabled ? (settingsResult) => {
+                    const result = settingsResult as Record<string, unknown>;
+                    if (result && typeof result === "object" && "content" in result && "options" in result) {
+                      const contentPatch = result.content as Record<string, unknown>;
+                      const optionsPatch = result.options as Record<string, unknown>;
+                      onSectionChange(section.id, {
+                        ...section,
+                        content: { ...section.content, ...contentPatch },
+                        options: { ...("options" in section ? section.options : {}), ...optionsPatch },
+                      } as SectionContent);
+                    } else {
+                      onSectionChange(section.id, {
+                        ...section,
+                        ...result,
+                      } as SectionContent);
+                    }
+                  } : undefined}
+                  onReorder={editingEnabled ? onReorderSections : undefined}
+                  onRequestInsert={editingEnabled ? (i) => setPendingInsertIndex(i) : undefined}
+                  onDelete={editingEnabled ? () => {
+                    openModal("Delete Section", (
+                      <div>
+                        <p className="mb-4 text-sm text-base-contrast-light">
+                          Delete this <strong>{definition.label}</strong> section? This cannot be undone.
+                        </p>
+                        <div className="flex justify-end gap-3">
+                          <Button variant="secondary" size="md" onClick={() => closeModal()}>
+                            Cancel
+                          </Button>
+                          <Button variant="destructive" size="md" onClick={() => {
+                            onDeleteSection(section.id);
+                            closeModal();
+                          }}>
+                            Confirm
+                          </Button>
+                        </div>
+                      </div>
+                    ));
+                  } : undefined}
+                >
+                  <Component
+                    content={section}
+                    options={"options" in section ? (section.options as Record<string, unknown>) : undefined}
+                    onChange={editingEnabled ? (newContent) => onSectionChange(section.id, newContent as SectionContent) : undefined}
+                    isEditMode={isEditMode}
+                    openModal={editingEnabled ? openModal : undefined}
+                  />
+                </SectionWrapper>
+              </SectionLayout>
+            </ErrorBoundary>
+          </Fragment>
+        );
+      })}
+
+      {editingEnabled && pendingInsertIndex === sections.length && (
+        <SectionSkeleton
+          types={typeOptions}
+          onSelect={(type) => {
+            onAddSection(sections.length, type);
+            setPendingInsertIndex(null);
+          }}
+          onDismiss={dismissPendingInsert}
+        />
+      )}
+
+    </div>
+  );
+}
+
+function GlobalModal() {
+  const { modalState, closeModal } = useEditorModal();
+
+  return (
+    <EditorModal
+      isOpen={modalState !== null}
+      onClose={closeModal}
+      title={modalState?.title ?? ""}
+    >
+      {modalState?.content}
+    </EditorModal>
+  );
+}
+
+function EditorToolbar({
+  localChangesExist,
+  isPublishing,
+  publishFeedback,
+  onPublish,
+  onDiscardClick,
+  onSettingsClick,
+  onMediaClick,
+  processingItems,
+}: {
+  localChangesExist: boolean;
+  isPublishing: boolean;
+  publishFeedback: string | null;
+  onPublish: () => void;
+  onDiscardClick: () => void;
+  onSettingsClick: () => void;
+  onMediaClick: () => void;
+  processingItems: QueueItem[];
+}) {
+  const { isEditMode, toggleEditMode } = useEditorContext();
+
+  return (
+    <>
+      {isEditMode && (
+        <div className="fixed top-0 right-0 left-0 z-50 flex items-center justify-between border-b border-base-200 bg-base px-4 py-2">
+          <div className="flex items-center gap-2">
+            {publishFeedback && (
+              <span className={cn(
+                "text-xs font-medium",
+                publishFeedback === "Published" ? "text-green-600" : "text-red-600",
+              )}>
+                {publishFeedback}
+              </span>
+            )}
+            {localChangesExist && (
+              <Button
+                type="button"
+                variant="primary"
+                onClick={onPublish}
+                isLoading={isPublishing}
+                loadingLabel="Publishing..."
+              >
+                Publish
+              </Button>
+            )}
+            {localChangesExist && (
+              <Button
+                type="button"
+                variant="destructive"
+                onClick={onDiscardClick}
+                disabled={isPublishing}
+              >
+                Discard Changes
+              </Button>
+            )}
+          </div>
+          <div className="flex items-center 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={<SettingsIcon size={16} />}
+              label="Site settings"
+              size="md"
+              onClick={onSettingsClick}
+              className="border border-base-200 bg-base-accent"
+            />
+            <ShowAllChromeToggle />
+          </div>
+        </div>
+      )}
+      <button
+        onClick={toggleEditMode}
+        className="cursor-pointer fixed bottom-4 right-4 z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity"
+        aria-label={isEditMode ? "Switch to view mode" : "Switch to edit mode"}
+      >
+        {isEditMode ? (
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
+            <path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
+          </svg>
+        ) : (
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+          </svg>
+        )}
+      </button>
+    </>
+  );
+}
+
+function ShowAllChromeToggle() {
+  const { showAllChrome, toggleShowAllChrome } = useEditorContext();
+
+  return (
+    <Button
+      variant="secondary"
+      size="sm"
+      onClick={toggleShowAllChrome}
+      className="bg-base-accent"
+      aria-label="Toggle editor chrome visibility"
+    >
+      {showAllChrome ? "Hide Controls" : "Show Controls"}
+    </Button>
+  );
+}