@drawnagency/primitives 0.1.1 → 0.2.0

package/dist/components/shell/EditorShell.js

@@ -1,483 +0,0 @@
-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.js

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

package/dist/components/shell/MediaLibraryModal.js

@@ -1,145 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useCallback } from "react";
-import { Search, Upload, Trash2 } from "lucide-react";
-import { cn } from "../../lib/cn";
-import { Button } from "../shared/Button";
-import { Select } from "../shared/Select";
-import { displayFilenameExt, mimeToExt } from "../../media/utils";
-function formatFileSize(bytes) {
-    if (bytes >= 1048576)
-        return `${Math.round(bytes / 1048576)}MB`;
-    if (bytes >= 1024)
-        return `${Math.round(bytes / 1024)}KB`;
-    return `${bytes}B`;
-}
-function thumbnailSrc(item, localUrls) {
-    const localUrl = localUrls[item.id];
-    if (localUrl)
-        return localUrl;
-    if (item.kind === "video") {
-        return `/api/media/${item.id}/original.${mimeToExt(item.mimeType)}`;
-    }
-    if (item.kind === "image" && item.variants.length > 0) {
-        const smallest = item.variants.reduce((a, b) => (a.width < b.width ? a : b));
-        return `/api/media/${item.id}/${smallest.width}.webp`;
-    }
-    return `/api/media/${item.id}/poster.webp`;
-}
-function displayFilename(item) {
-    return `${item.originalName}${displayFilenameExt(item.mimeType)}`;
-}
-function UploadZone({ onUpload }) {
-    const [dragging, setDragging] = useState(false);
-    const inputRef = useRef(null);
-    const handleFiles = useCallback((files) => {
-        if (!files || files.length === 0)
-            return;
-        onUpload(Array.from(files));
-    }, [onUpload]);
-    return (_jsxs("button", { type: "button", onClick: () => inputRef.current?.click(), onDragOver: (e) => {
-            e.preventDefault();
-            setDragging(true);
-        }, onDragLeave: () => setDragging(false), onDrop: (e) => {
-            e.preventDefault();
-            setDragging(false);
-            handleFiles(e.dataTransfer.files);
-        }, className: cn("flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors", dragging
-            ? "border-primary bg-primary/5"
-            : "border-base-200 hover:border-base-300"), children: [_jsx(Upload, { size: 24, className: "text-base-contrast-light" }), _jsx("span", { className: "text-sm text-base-contrast-light", children: "Drag & drop files or click to browse" }), _jsx("input", { ref: inputRef, type: "file", multiple: true, accept: "image/*,video/*", className: "hidden", onChange: (e) => {
-                    handleFiles(e.target.files);
-                    e.target.value = "";
-                } })] }));
-}
-export function MediaLibraryModal({ mode, items, onSelect, onUpload, onDelete, onAltChange, referenceCountMap, localUrlMap = {}, maxFileSize, }) {
-    const [search, setSearch] = useState("");
-    const [kindFilter, setKindFilter] = useState("all");
-    const [selected, setSelected] = useState(new Set());
-    const [rejectedFiles, setRejectedFiles] = useState([]);
-    const handleUpload = useCallback((files) => {
-        if (!maxFileSize) {
-            onUpload(files);
-            return;
-        }
-        const valid = [];
-        const rejected = [];
-        for (const file of files) {
-            if (file.size > maxFileSize) {
-                rejected.push(file.name);
-            }
-            else {
-                valid.push(file);
-            }
-        }
-        if (rejected.length > 0)
-            setRejectedFiles(rejected);
-        if (valid.length > 0)
-            onUpload(valid);
-    }, [maxFileSize, onUpload]);
-    const filtered = items.filter((item) => {
-        const matchesSearch = item.originalName
-            .toLowerCase()
-            .includes(search.toLowerCase());
-        const matchesKind = kindFilter === "all" || item.kind === kindFilter;
-        return matchesSearch && matchesKind;
-    });
-    function toggleSelect(id) {
-        setSelected((prev) => {
-            const next = new Set(prev);
-            if (next.has(id)) {
-                next.delete(id);
-            }
-            else {
-                next.add(id);
-            }
-            return next;
-        });
-    }
-    const [confirmDelete, setConfirmDelete] = useState(false);
-    const selectedIds = Array.from(selected);
-    const totalUsage = selectedIds.reduce((sum, id) => sum + (referenceCountMap[id] ?? 0), 0);
-    function handleBatchDelete() {
-        if (totalUsage > 0) {
-            setConfirmDelete(true);
-            return;
-        }
-        onDelete(selectedIds);
-        setSelected(new Set());
-    }
-    function handleConfirmDelete() {
-        onDelete(selectedIds);
-        setSelected(new Set());
-        setConfirmDelete(false);
-    }
-    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(UploadZone, { onUpload: handleUpload }), _jsxs("div", { className: "sticky top-[-16px] z-10 -mx-6 space-y-3 bg-base px-6 pb-3 pt-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx(Search, { size: 14, className: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-base-contrast-light" }), _jsx("input", { type: "text", placeholder: "Search media...", value: search, onChange: (e) => setSearch(e.target.value), className: "w-full rounded border border-base-200 bg-base py-1.5 pl-8 pr-3 text-sm text-base-contrast placeholder:text-base-contrast-light focus:outline-none focus:ring-1 focus:ring-primary" })] }), _jsx(Select, { value: kindFilter, onChange: (v) => setKindFilter(v), options: [
-                                    { value: "all", label: "All types" },
-                                    { value: "image", label: "Images" },
-                                    { value: "animated", label: "Animated" },
-                                    { value: "video", label: "Video" },
-                                ], selectClassName: "py-1.5 pr-7 pl-2.5" }), mode === "manage" && selected.size > 0 && (_jsxs(Button, { variant: "destructive", size: "sm", onClick: handleBatchDelete, className: "flex items-center gap-1.5", children: [_jsx(Trash2, { size: 13 }), "Delete ", selected.size] }))] }), confirmDelete && (_jsxs("div", { className: "flex flex-col items-center rounded-lg border border-red-200 bg-red-50 px-4 py-3 lg:flex-row lg:justify-between dark:border-red-900/50 dark:bg-red-950/30", children: [_jsx("p", { className: "mb-2 text-center text-sm text-red-800 lg:mb-0 lg:text-left dark:text-red-200", children: "Some of these images are being used. Deleting these will remove them from these references." }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: () => setConfirmDelete(false), children: "Cancel" }), _jsx(Button, { variant: "destructive", size: "sm", onClick: handleConfirmDelete, children: "Confirm Delete" })] })] })), rejectedFiles.length > 0 && maxFileSize && (_jsxs("div", { className: "flex flex-col items-center rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 lg:flex-row lg:justify-between dark:border-amber-900/50 dark:bg-amber-950/30", children: [_jsxs("p", { className: "mb-2 text-center text-sm text-amber-800 lg:mb-0 lg:text-left dark:text-amber-200", children: [rejectedFiles.length === 1
-                                        ? `"${rejectedFiles[0]}" exceeds`
-                                        : `${rejectedFiles.length} files exceed`, " the ", formatFileSize(maxFileSize), " file size limit."] }), _jsx("div", { className: "flex shrink-0 items-center", children: _jsx(Button, { variant: "secondary", size: "sm", onClick: () => setRejectedFiles([]), children: "Dismiss" }) })] }))] }), filtered.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-12 text-center", children: [_jsx("p", { className: "text-sm font-medium text-base-contrast", children: items.length === 0 ? "No media uploaded yet" : "No results found" }), _jsx("p", { className: "text-xs text-base-contrast-light", children: items.length === 0
-                            ? "Upload files using the drop zone above."
-                            : "Try a different search or filter." })] })) : (_jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", children: filtered.map((item) => {
-                    const isSelected = selected.has(item.id);
-                    const refCount = referenceCountMap[item.id] ?? 0;
-                    const usageLabel = refCount === 0 ? "Not used" : `Used ${refCount}x`;
-                    return (_jsxs("div", { className: "group flex flex-col gap-1.5", onClick: () => {
-                            if (mode === "select") {
-                                onSelect(item.id);
-                            }
-                            else {
-                                toggleSelect(item.id);
-                            }
-                        }, children: [_jsxs("div", { className: cn("relative aspect-square cursor-pointer overflow-hidden rounded-lg border-2 transition-colors", mode === "select"
-                                    ? "border-transparent hover:border-primary"
-                                    : isSelected
-                                        ? "border-primary"
-                                        : "border-transparent hover:border-base-300"), children: [_jsx("div", { className: "h-full w-full bg-base-accent", children: item.kind === "video" ? (_jsx("video", { src: thumbnailSrc(item, localUrlMap), muted: true, playsInline: true, className: "h-full w-full object-cover", onMouseEnter: (e) => e.currentTarget.play().catch(() => { }), onMouseLeave: (e) => { e.currentTarget.pause(); e.currentTarget.currentTime = 0; } })) : (_jsx("img", { src: thumbnailSrc(item, localUrlMap), alt: item.originalName, className: "h-full w-full object-cover" })) }), mode === "manage" && (_jsx("div", { className: cn("absolute top-1.5 left-1.5 flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors", isSelected
-                                            ? "border-primary bg-primary"
-                                            : "border-white/80 bg-white/40 opacity-0 group-hover:opacity-100"), children: isSelected && (_jsx("div", { className: "h-2 w-2 rounded-full bg-white" })) })), mode === "manage" && (_jsx("div", { className: cn("absolute top-1.5 right-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium transition-opacity", isSelected
-                                            ? "opacity-100"
-                                            : "opacity-0 group-hover:opacity-100", refCount > 0
-                                            ? "bg-black/50 text-white"
-                                            : "bg-black/50 text-white/70"), children: usageLabel })), _jsx("div", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent px-2 pb-1.5 pt-4 opacity-0 transition-opacity group-hover:opacity-100", children: _jsx("p", { className: "truncate text-[11px] text-white", children: displayFilename(item) }) })] }), _jsxs("div", { className: "px-0.5", children: [_jsx("label", { className: "text-[10px] font-medium uppercase leading-none tracking-wide text-base-contrast-light/50", children: "Alt text" }), _jsx("textarea", { value: item.alt, placeholder: "Describe this image for accessibility", rows: 2, onClick: (e) => e.stopPropagation(), onChange: (e) => onAltChange?.(item.id, e.target.value), className: "w-full resize-none border-0 bg-transparent p-0 text-xs leading-snug text-base-contrast placeholder:text-base-contrast-light/40 focus:outline-none focus:ring-0" })] })] }, item.id));
-                }) }))] }));
-}