@drawnagency/primitives 0.1.0

package/dist/components/shell/EditorShell.js

@@ -0,0 +1,483 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useState, useCallback, useEffect, useRef } from "react";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+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,
+}));
+export default function EditorShell({ headSha, siteId, audiences: initialAudiences, capabilities, currentUser, }) {
+    const [shellState, setShellState] = useState({ phase: "loading-content" });
+    const [sections, setSections] = useState([]);
+    const [siteIndex, setSiteIndex] = useState({ siteId, order: [], sections: {} });
+    const [audiences, setAudiences] = useState(initialAudiences);
+    const [localChangesExist, setLocalChangesExist] = useState(false);
+    const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
+    const [showSiteSettings, setShowSiteSettings] = useState(false);
+    const [dirtySectionIds, setDirtySectionIds] = useState(new Set());
+    const [siteConfig, setSiteConfig] = useState(null);
+    const [mediaManifest, setMediaManifest] = useState({ images: {} });
+    const [showMediaLibrary, setShowMediaLibrary] = useState(false);
+    const [mediaModalMode, setMediaModalMode] = useState("manage");
+    const [mediaSelectCallback, setMediaSelectCallback] = useState(null);
+    const siteIndexRef = useRef({ siteId, order: [], sections: {} });
+    const fontLinkRef = useRef(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) => {
+        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;
+            let loadedIndex;
+            let loadedConfig;
+            let loadedManifest = { 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;
+                    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 = {};
+                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 !== 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);
+                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, newContent) => {
+        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, type) => {
+        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();
+        const newSection = {
+            section: { id, ...content },
+            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);
+        persistence.markIndexDirty();
+        setLocalChangesExist(true);
+        setDirtySectionIds((prev) => new Set(prev).add(id));
+    }, [persistence]);
+    const onDeleteSection = useCallback((sectionId) => {
+        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, toIndex) => {
+        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, access) => {
+        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, status) => {
+        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) => {
+        setSiteConfig(config);
+        applySiteConfigPreview(config);
+        persistence.persistConfig(config);
+        setLocalChangesExist(true);
+    }, [applySiteConfigPreview, persistence]);
+    // --- Render ---
+    if (shellState.phase === "loading-content") {
+        return _jsx("div", { className: "min-h-screen", "aria-busy": "true", "aria-label": "Loading content" });
+    }
+    if (shellState.phase === "error") {
+        return (_jsx("div", { className: "flex min-h-[50vh] items-center justify-center", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-sm text-red-600", children: shellState.message }), _jsx(Button, { variant: "secondary", size: "md", className: "mt-3", onClick: () => window.location.reload(), children: "Retry" })] }) }));
+    }
+    if (shellState.phase === "recovery") {
+        return (_jsxs(EditorModal, { isOpen: true, onClose: () => { }, title: "Unsaved Changes", blocking: true, children: [_jsxs("p", { className: "text-sm text-base-contrast-light", children: ["You have unsaved changes from ", _jsx("strong", { children: formatTimestamp(shellState.latestTimestamp) }), ". Would you like to restore them or start fresh?"] }), _jsxs("div", { className: "mt-4 flex justify-end gap-3", children: [_jsx(Button, { type: "button", variant: "secondary", size: "md", onClick: handleDiscard, children: "Discard" }), _jsx(Button, { type: "button", variant: "primary", size: "md", onClick: handleRestore, children: "Restore" })] })] }));
+    }
+    return (_jsx(EditorProvider, { children: _jsx(EditorModalProvider, { children: _jsx(MediaLibraryContext.Provider, { value: {
+                    ...mediaPipeline.contextValue,
+                    openSelectModal: (onSelect) => {
+                        setMediaModalMode("select");
+                        setMediaSelectCallback(() => onSelect);
+                        setShowMediaLibrary(true);
+                    },
+                }, children: _jsxs("div", { className: "editor-shell relative", children: [_jsx(EditorToolbar, { localChangesExist: localChangesExist, isPublishing: isPublishing, publishFeedback: publishFeedback, onPublish: handlePublish, onDiscardClick: () => setShowDiscardConfirm(true), onSettingsClick: () => setShowSiteSettings(true), onMediaClick: () => {
+                                setMediaModalMode("manage");
+                                setShowMediaLibrary(true);
+                            }, processingItems: mediaPipeline.processingItems }), _jsx(EditorContent, { sections: sections, audiences: audiences, dirtySectionIds: dirtySectionIds, isPublishing: isPublishing, onSectionChange: onSectionChange, onAddSection: onAddSection, onDeleteSection: onDeleteSection, onReorderSections: onReorderSections, onAccessChange: onAccessChange, onStatusChange: onStatusChange }), _jsx(GlobalModal, {}), _jsx(SiteSettingsModal, { isOpen: showSiteSettings, onClose: () => setShowSiteSettings(false), siteConfig: siteConfig, onSiteConfigChange: handleSiteConfigChange, onAudiencesChange: setAudiences, capabilities: capabilities, currentUser: currentUser }), _jsxs(EditorModal, { isOpen: showDiscardConfirm, onClose: () => setShowDiscardConfirm(false), title: "Discard Changes", children: [_jsx("p", { className: "mb-4 text-sm text-base-contrast-light", children: "Discard all unsaved changes? This will reload with the last published content." }), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { variant: "secondary", size: "md", onClick: () => setShowDiscardConfirm(false), children: "Cancel" }), _jsx(Button, { variant: "destructive", size: "md", onClick: handleToolbarDiscard, children: "Discard" })] })] }), _jsx(EditorModal, { isOpen: showMediaLibrary, onClose: () => {
+                                setShowMediaLibrary(false);
+                                setMediaSelectCallback(null);
+                            }, title: "Media Library", size: "large", children: _jsx(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 }) })] }) }) }) }));
+}
+function EditorContent({ sections, audiences, dirtySectionIds, isPublishing, onSectionChange, onAddSection, onDeleteSection, onReorderSections, onAccessChange, onStatusChange, }) {
+    const { isEditMode } = useEditorContext();
+    const { openModal, closeModal } = useEditorModal();
+    const [pendingInsertIndex, setPendingInsertIndex] = useState(null);
+    const dismissPendingInsert = useCallback(() => setPendingInsertIndex(null), []);
+    const editingEnabled = isEditMode && !isPublishing;
+    useEffect(() => {
+        return monitorForElements({
+            onDragStart: ({ source }) => {
+                if (source.data.dragType === "section") {
+                    setPendingInsertIndex(null);
+                }
+            },
+        });
+    }, []);
+    return (_jsxs("div", { children: [sections.map(({ section, meta }, index) => {
+                const definition = getSection(section.type);
+                if (!definition) {
+                    return (_jsxs("div", { 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", children: ["Unknown section type: ", _jsx("code", { className: "font-mono font-semibold", children: section.type })] }, section.id));
+                }
+                const Component = definition.component;
+                return (_jsxs(Fragment, { children: [editingEnabled && pendingInsertIndex === index && (_jsx(SectionSkeleton, { types: typeOptions, onSelect: (type) => {
+                                onAddSection(index, type);
+                                setPendingInsertIndex(null);
+                            }, onDismiss: dismissPendingInsert })), _jsx(ErrorBoundary, { label: `${definition.label} (${section.type})`, children: _jsx(SectionLayout, { type: section.type, status: meta.status, dimNonPublished: !isEditMode, children: _jsx(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,
+                                        ...("options" in section ? section.options : {}),
+                                    }, 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;
+                                        if (result && typeof result === "object" && "content" in result && "options" in result) {
+                                            const contentPatch = result.content;
+                                            const optionsPatch = result.options;
+                                            onSectionChange(section.id, {
+                                                ...section,
+                                                content: { ...section.content, ...contentPatch },
+                                                options: { ...("options" in section ? section.options : {}), ...optionsPatch },
+                                            });
+                                        }
+                                        else {
+                                            onSectionChange(section.id, {
+                                                ...section,
+                                                ...result,
+                                            });
+                                        }
+                                    } : undefined, onReorder: editingEnabled ? onReorderSections : undefined, onRequestInsert: editingEnabled ? (i) => setPendingInsertIndex(i) : undefined, onDelete: editingEnabled ? () => {
+                                        openModal("Delete Section", (_jsxs("div", { children: [_jsxs("p", { className: "mb-4 text-sm text-base-contrast-light", children: ["Delete this ", _jsx("strong", { children: definition.label }), " section? This cannot be undone."] }), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { variant: "secondary", size: "md", onClick: () => closeModal(), children: "Cancel" }), _jsx(Button, { variant: "destructive", size: "md", onClick: () => {
+                                                                onDeleteSection(section.id);
+                                                                closeModal();
+                                                            }, children: "Confirm" })] })] })));
+                                    } : undefined, children: _jsx(Component, { content: section, options: "options" in section ? section.options : undefined, onChange: editingEnabled ? (newContent) => onSectionChange(section.id, newContent) : undefined, isEditMode: isEditMode, openModal: editingEnabled ? openModal : undefined }) }) }) })] }, section.id));
+            }), editingEnabled && pendingInsertIndex === sections.length && (_jsx(SectionSkeleton, { types: typeOptions, onSelect: (type) => {
+                    onAddSection(sections.length, type);
+                    setPendingInsertIndex(null);
+                }, onDismiss: dismissPendingInsert }))] }));
+}
+function GlobalModal() {
+    const { modalState, closeModal } = useEditorModal();
+    return (_jsx(EditorModal, { isOpen: modalState !== null, onClose: closeModal, title: modalState?.title ?? "", children: modalState?.content }));
+}
+function EditorToolbar({ localChangesExist, isPublishing, publishFeedback, onPublish, onDiscardClick, onSettingsClick, onMediaClick, processingItems, }) {
+    const { isEditMode, toggleEditMode } = useEditorContext();
+    return (_jsxs(_Fragment, { children: [isEditMode && (_jsxs("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", children: [_jsxs("div", { className: "flex items-center gap-2", children: [publishFeedback && (_jsx("span", { className: cn("text-xs font-medium", publishFeedback === "Published" ? "text-green-600" : "text-red-600"), children: publishFeedback })), localChangesExist && (_jsx(Button, { type: "button", variant: "primary", onClick: onPublish, isLoading: isPublishing, loadingLabel: "Publishing...", children: "Publish" })), localChangesExist && (_jsx(Button, { type: "button", variant: "destructive", onClick: onDiscardClick, disabled: isPublishing, children: "Discard Changes" }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ProcessingIndicator, { items: processingItems }), _jsx(IconButton, { icon: _jsx(ImageIcon, { size: 16 }), label: "Media library", size: "md", onClick: onMediaClick, className: "border border-base-200 bg-base-accent" }), _jsx(IconButton, { icon: _jsx(SettingsIcon, { size: 16 }), label: "Site settings", size: "md", onClick: onSettingsClick, className: "border border-base-200 bg-base-accent" }), _jsx(ShowAllChromeToggle, {})] })] })), _jsx("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", children: isEditMode ? (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: [_jsx("path", { d: "M10 12a2 2 0 100-4 2 2 0 000 4z" }), _jsx("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" })] })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("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" }) })) })] }));
+}
+function ShowAllChromeToggle() {
+    const { showAllChrome, toggleShowAllChrome } = useEditorContext();
+    return (_jsx(Button, { variant: "secondary", size: "sm", onClick: toggleShowAllChrome, className: "bg-base-accent", "aria-label": "Toggle editor chrome visibility", children: showAllChrome ? "Hide Controls" : "Show Controls" }));
+}

package/dist/components/shell/MediaLibraryContext.d.ts

@@ -0,0 +1,14 @@
+import type { MediaManifest, MediaItem } from "../../media/types";
+import type { SiteConfig } from "../../schemas/site-config";
+export interface MediaLibraryContextValue {
+    openSelectModal: (onSelect: (imageId: string) => void) => void;
+    uploadFile: (file: File) => void;
+    uploadFileWithCallback: (file: File, onComplete: (imageId: string) => void) => string;
+    manifest: MediaManifest;
+    pendingItems: MediaItem[];
+    pendingLocalUrls: Record<string, string>;
+    siteConfig: SiteConfig | null;
+}
+export declare const MediaLibraryContext: import("react").Context<MediaLibraryContextValue | null>;
+export declare function useMediaLibrary(): MediaLibraryContextValue | null;
+//# sourceMappingURL=MediaLibraryContext.d.ts.map

package/dist/components/shell/MediaLibraryContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaLibraryContext.d.ts","sourceRoot":"","sources":["../../../src/components/shell/MediaLibraryContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;IAC/D,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,sBAAsB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,KAAK,MAAM,CAAC;IACtF,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,mBAAmB,0DAAuD,CAAC;AAExF,wBAAgB,eAAe,IAAI,wBAAwB,GAAG,IAAI,CAEjE"}

package/dist/components/shell/MediaLibraryContext.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from "react";
+export const MediaLibraryContext = createContext(null);
+export function useMediaLibrary() {
+    return useContext(MediaLibraryContext);
+}

package/dist/components/shell/MediaLibraryModal.d.ts

@@ -0,0 +1,14 @@
+import type { MediaItem } from "../../media/types";
+export interface MediaLibraryModalProps {
+    mode: "select" | "manage";
+    items: MediaItem[];
+    onSelect: (id: string) => void;
+    onUpload: (files: File[]) => void;
+    onDelete: (ids: string[]) => void;
+    onAltChange?: (id: string, alt: string) => void;
+    referenceCountMap: Record<string, number>;
+    localUrlMap?: Record<string, string>;
+    maxFileSize?: number;
+}
+export declare function MediaLibraryModal({ mode, items, onSelect, onUpload, onDelete, onAltChange, referenceCountMap, localUrlMap, maxFileSize, }: MediaLibraryModalProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaLibraryModal.d.ts.map

package/dist/components/shell/MediaLibraryModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaLibraryModal.d.ts","sourceRoot":"","sources":["../../../src/components/shell/MediaLibraryModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,mBAAmB,CAAC;AAG9D,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+ED,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,WAAgB,EAChB,WAAW,GACZ,EAAE,sBAAsB,2CAuQxB"}