@alpaca-editor/core 1.0.4073 → 1.0.4074

package/dist/editor/client/{EditorClient.js → EditorShell.js}

@@ -8,21 +8,19 @@ import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { findComponent, getComponentById } from "../componentTreeHelper";
 import { getOperationsContext } from "./operations";
 import { handleErrorResult } from "./helpers";
-import { executeFieldAction as executeFieldServerAction, connectSocket, getEditHistory, releaseFieldLocks, validateItems, } from "../services/editService";
+import { executeFieldAction as executeFieldServerAction, getEditHistory, releaseFieldLocks, validateItems, } from "../services/editService";
 import "primeicons/primeicons.css";
 import "primereact/resources/themes/md-light-indigo/theme.css";
 import "react-json-view-lite/dist/index.css";
 import { MediaSelector, } from "../media-selector/MediaSelector";
 import { getComponentCommands } from "../commands/componentCommands";
-import { getLanguagesAndVersions, getWorkbox, } from "../services/contentService";
+import { getLanguagesAndVersions, } from "../services/contentService";
 import ConfirmationDialog from "../ConfirmationDialog";
-import MainLayout from "../MainLayout";
-import { getItemDescriptor, useEventListenerExt } from "../utils";
+import { getItemDescriptor } from "../utils";
 import { EditContextMenu } from "../ContextMenu";
 import { FieldEditorPopup } from "../FieldEditorPopup";
 import { EditorFormPopup, } from "../page-viewer/EditorFormPopup";
 import { post } from "../services/serviceHelper";
-import { SidebarView } from "../sidebar/SidebarView";
 import { PageViewerFrame } from "../page-viewer/PageViewerFrame";
 import { useItemsRepository } from "./itemsRepository";
 import { Spinner } from "../ui/Spinner";
@@ -38,10 +36,15 @@ import uuid from "react-uuid";
 import { flushSync } from "react-dom";
 import { getSuggestedEdits } from "../services/suggestedEditsService";
 import { usePageWizard } from "../../page-wizard/usePageWizard";
-import { requestQuota } from "../services/aiService";
-import { Shrink, Monitor, Smartphone } from "lucide-react";
-import { Agents } from "../ai/Agents";
-export function EditorClient({ configuration, className, item: loadItemDescriptor, sessionId, userInfo, userPreferences, editorSettings, setUserPreferences, children, }) {
+import { useQuota } from "./hooks/useQuota";
+import { useEditorUrlSync } from "./hooks/useEditorUrlSync";
+import { useMediaQuery } from "./hooks/useMediaQuery";
+import { useGlobalEditorEvents } from "./hooks/useGlobalEditorEvents";
+import { FullscreenControls } from "./ui/FullscreenControls";
+import { EditorChrome } from "./ui/EditorChrome";
+import { useWorkbox } from "./hooks/useWorkbox";
+import { useMediaSelector } from "./hooks/useMediaSelector";
+export function EditorShell({ configuration, className, item: loadItemDescriptor, sessionId, userInfo, userPreferences, editorSettings, setUserPreferences, children, }) {
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
@@ -50,10 +53,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
     const [refreshCompletedFlag, setRefreshCompletedFlag] = useState(false);
     const [isRefreshing, setIsRefreshing] = useState(false);
     const [dragObject, setDragObject] = useState();
-    const [mediaResolver, setMediaResolver] = useState();
-    const [mediaSelectorVisible, setMediaSelectorVisible] = useState(false);
-    const [mediaSelectorMode, setMediaSelectorMode] = useState("images");
-    const [selectedMediaIdPath, setSelectedMediaIdPath] = useState("");
+    // media selection handled by useMediaSelector hook
     const [scrollIntoView, setScrollIntoView] = useState();
     const confirmationDialogRef = useRef(null);
     const contextMenuRef = useRef(null);
@@ -167,7 +167,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
     const [centerPanelView, setCenterPanelView] = useState();
     const [timings, setTimings] = useState({});
     const [revision, setRevision] = useState();
-    const [workboxItems, setWorkboxItems] = useState([]);
+    // moved into useWorkbox
     const [isTourActive, setIsTourActive] = useState(false);
     const [mode, setMode] = useState("edit");
     const [statusMessage, setStatusMessage] = useState("");
@@ -177,7 +177,9 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
     const [showAgentsPanel, setShowAgentsPanel] = useState(userPreferences.showAgentsPanel ?? false);
     const [activeEditorTab, setActiveEditorTab] = useState(null);
     const [showLayoutComponents, setShowLayoutComponents] = useState(userPreferences.showLayoutComponents ?? false);
-    const [quotaInfo, setQuotaInfo] = useState(null);
+    const { quotaInfo, setQuotaInfo, isQuotaExceeded, getQuotaWarningMessage } = useQuota({
+        showError: ({ summary, details }) => showErrorToast({ summary, details }),
+    });
     const pageWizard = usePageWizard();
     const [webSocketMessages, setWebSocketMessages] = useState([]);
     const [favorites, setFavorites] = useState([]);
@@ -213,7 +215,6 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         configuration,
     });
     const socketMessageListeners = useRef(new Set());
-    const socketInstanceRef = useRef(null);
     const addSocketMessageListener = useCallback((callback) => {
         socketMessageListeners.current.add(callback);
         return () => socketMessageListeners.current.delete(callback);
@@ -283,241 +284,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         setShowLayoutComponents(newValue);
         setUserPreferences({ showLayoutComponents: newValue });
     }, [showLayoutComponents, setShowLayoutComponents, setUserPreferences]);
-    const messageHandler = useCallback(async (event) => {
-        if (!event.data.startsWith("{"))
-            return;
-        const message = JSON.parse(event.data);
-        // Track all WebSocket messages for debugging/monitoring
-        try {
-            const webSocketMessage = {
-                id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
-                timestamp: new Date().toISOString(),
-                type: message.type || "unknown",
-                payload: message.payload,
-                rawMessage: JSON.stringify(message, null, 2),
-            };
-            setWebSocketMessages((prev) => {
-                const updated = [webSocketMessage, ...prev];
-                // Keep only the latest 1000 messages
-                return updated.slice(0, 1000);
-            });
-        }
-        catch (error) {
-            console.error("Error tracking WebSocket message:", error);
-        }
-        if (message.type === "active-sessions") {
-            setActiveSessions((prev) => {
-                // Ensure payload is an array and contains valid session objects
-                if (!Array.isArray(message.payload)) {
-                    console.warn("❌ Active sessions payload is not an array:", message.payload);
-                    globalThis.__alpacaActiveSessions = prev;
-                    return prev; // keep previous instead of clearing to avoid losing user during HMR blips
-                }
-                // Filter out any invalid session objects
-                const validSessions = message.payload.filter((session) => session &&
-                    typeof session === "object" &&
-                    session.sessionId &&
-                    session.user);
-                if (validSessions.length !== message.payload.length) {
-                    console.warn("❌ Some sessions were filtered out due to invalid data:", {
-                        original: message.payload.length,
-                        valid: validSessions.length,
-                    });
-                }
-                // If server reports empty list, keep previous to avoid transient blanking during HMR
-                if (validSessions.length === 0 && prev.length > 0) {
-                    console.warn("⚠️ Received empty active sessions; preserving previous list to avoid losing state");
-                    globalThis.__alpacaActiveSessions = prev;
-                    return prev;
-                }
-                globalThis.__alpacaActiveSessions = validSessions;
-                return validSessions;
-            });
-            // Detect if the current session is missing from the list and self-heal
-            try {
-                const payload = Array.isArray(message.payload)
-                    ? message.payload
-                    : [];
-                const hasMySession = payload.some((s) => s && s.sessionId === sessionId);
-                if (!hasMySession) {
-                    console.warn("⚠️ Current session missing from active sessions. Re-sending client-info to recover...");
-                    setTimeout(() => {
-                        sendClientInfo();
-                    }, 300);
-                }
-            }
-            catch (e) {
-                console.warn("Failed to verify active sessions for current session!", e);
-            }
-        }
-        if (message.type === "item-deleted") {
-            itemsRepository.onItemsDeleted([
-                { item: message.payload.item, parentId: message.payload.parentId },
-            ]);
-            if (message.payload.item.id === currentItemDescriptor?.id) {
-                console.log("Load", message.payload.parentId);
-                loadItem({
-                    id: message.payload.parentId,
-                    language: currentItemDescriptor?.language ?? "en",
-                    version: 0,
-                });
-            }
-        }
-        if (message.type === "item-changed") {
-            await itemsRepository.refreshItems([message.payload.item]);
-            if (message.payload.item.id === currentItemDescriptor?.id)
-                loadItemVersions();
-        }
-        if (message.type === "item-version-added") {
-            if (currentItemDescriptorRef.current) {
-                if (currentItemDescriptorRef.current.id === message.payload.item.id)
-                    await loadItemVersions();
-            }
-        }
-        if (message.type === "comment-updated") {
-            setComments((x) => {
-                const newComments = [...x];
-                const index = newComments.findIndex((c) => c.id === message.payload.comment.id);
-                if (index !== -1)
-                    newComments[index] = message.payload.comment;
-                else
-                    newComments.push(message.payload.comment);
-                return newComments;
-            });
-        }
-        if (message.type === "comment-deleted") {
-            setComments((x) => {
-                return x.filter((c) => c.id !== message.payload.commentId);
-            });
-        }
-        if (message.type === "suggested-edit-updated") {
-            setSuggestedEdits((x) => {
-                const index = x.findIndex((s) => s.id === message.payload.suggestedEdit.id);
-                if (index !== -1)
-                    x[index] = message.payload.suggestedEdit;
-                else
-                    x.push(message.payload.suggestedEdit);
-                return x;
-            });
-        }
-        if (message.type === "suggested-edit-deleted") {
-            setSuggestedEdits((x) => {
-                return x.filter((s) => s.id !== message.payload.id);
-            });
-        }
-        if (message.type === "executing-field-action") {
-            setActiveFieldActions((x) => {
-                const payload = message.payload;
-                const fieldId = payload.fieldId;
-                const item = payload.item;
-                const status = payload.status;
-                const msg = payload.message;
-                const label = payload.label;
-                // Map backend status to FieldAction state
-                let state;
-                switch (status?.toLowerCase()) {
-                    case "completed":
-                    case "success":
-                        state = "success";
-                        break;
-                    case "failed":
-                    case "error":
-                        state = "error";
-                        break;
-                    default:
-                        state = "running";
-                        break;
-                }
-                // Check if action already exists
-                const existingActionIndex = x.findIndex((action) => action.field.fieldId === fieldId &&
-                    action.field.item.id === item.id &&
-                    action.field.item.language === item.language &&
-                    action.field.item.version === item.version);
-                if (existingActionIndex !== -1) {
-                    // Update existing action
-                    const newActions = [...x];
-                    newActions[existingActionIndex].state = state;
-                    newActions[existingActionIndex].message = msg;
-                    return newActions;
-                }
-                else {
-                    // Insert new action
-                    const fieldDescriptor = {
-                        fieldId: fieldId,
-                        item: item,
-                    };
-                    const newAction = {
-                        field: fieldDescriptor,
-                        state,
-                        message: msg,
-                        label: label,
-                    };
-                    // console.log(newAction);
-                    return [...x, newAction];
-                }
-            });
-        }
-        if (message.type === "update-quota") {
-            setQuotaInfo(message.payload);
-        }
-        if (message.type === "agent-started") {
-            // Agent started message will be handled by individual components that subscribe
-            // The payload should contain { agentId: string, agentName: string }
-        }
-        if (message.type === "load-item") {
-            const itemDescriptor = message.payload;
-            if (itemDescriptor) {
-                loadItem(itemDescriptor, { skipViewChange: true });
-            }
-        }
-        if (message.type === "edit-operation") {
-            const op = message.payload;
-            if (op.type === "edit-field") {
-                const editFieldOperation = op;
-                const field = await itemsRepository.getField({
-                    item: {
-                        ...editFieldOperation.mainItem,
-                        id: editFieldOperation.itemId,
-                    },
-                    fieldId: editFieldOperation.fieldId,
-                });
-                if (!field ||
-                    (field.type !== "single-line text" &&
-                        field.type !== "multi-line text" &&
-                        field.type !== "rich text")) {
-                    itemsRepository.refreshItems([
-                        {
-                            ...editFieldOperation.mainItem,
-                            id: editFieldOperation.itemId,
-                        },
-                    ]);
-                    requestRefresh("immediate");
-                }
-                //TODO: field value changes that require rerender
-                else
-                    itemsRepository.updateFieldValue({
-                        fieldId: editFieldOperation.fieldId,
-                        item: {
-                            ...editFieldOperation.mainItem,
-                            id: editFieldOperation.itemId,
-                        },
-                    }, editFieldOperation.user ?? { name: "unknown", ai: false }, false, editFieldOperation.undone
-                        ? editFieldOperation.oldValue
-                        : editFieldOperation.value);
-            }
-            else {
-                requestRefresh("immediate");
-            }
-            if (op.mainItem &&
-                op.mainItem.id === currentItemRef.current?.descriptor.id &&
-                op.mainItem.language ===
-                    currentItemRef.current?.descriptor.language &&
-                op.mainItem.version === currentItemRef.current?.descriptor.version) {
-                loadHistory(op.mainItem);
-            }
-        }
-        socketMessageListeners.current.forEach((listener) => listener(message));
-    }, [currentItemDescriptorRef, addRecentEdit]);
+    // messageHandler is defined after loadItem/loadHistory declarations to avoid temporal dead zones
     const user = useMemo(() => activeSessions.find((x) => x.sessionId === sessionId)?.user ||
         userInfo.user, [activeSessions, sessionId, userInfo.user]);
     // Self-heal if our session disappears (e.g., after HMR)
@@ -549,11 +316,9 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             else {
                 // Force a reconnect to refresh presence after several failed nudges
                 try {
-                    socketInstanceRef.current?.close(4000, "recover-presence");
-                }
-                catch {
-                    // Ignore errors while attempting to recover presence
+                    globalThis.editorSocket?.close(4000, "recover-presence");
                 }
+                catch { }
             }
         }, delay);
         return () => {
@@ -647,25 +412,8 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             clearInterval(urlCheckInterval);
         };
     }, []);
-    // Custom hook for responsive design
-    const useMediaQuery = (query) => {
-        const [matches, setMatches] = useState(false);
-        useEffect(() => {
-            const media = window.matchMedia(query);
-            const updateMatch = () => setMatches(media.matches);
-            // Set initial value
-            updateMatch();
-            // Listen for changes
-            media.addEventListener("change", updateMatch);
-            // Cleanup
-            return () => {
-                media.removeEventListener("change", updateMatch);
-            };
-        }, [query]);
-        return matches;
-    };
-    // Detect mobile screens (max-width: 768px)
     const isMobile = useMediaQuery("(max-width: 768px)");
+    const media = useMediaSelector();
     useEffect(() => {
         // Suppress auto-start tour when `noTour` query parameter is present
         if (searchParams.get("noTour") !== null) {
@@ -679,117 +427,8 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             localStorage.setItem(key, "true");
         }
     }, [user]);
-    useEffect(() => {
-        let reconnectTimeout = null;
-        let reconnectAttempts = 0;
-        const connectWebSocket = () => {
-            let socket = globalThis.editorSocket;
-            const needsNewSocket = !socket ||
-                socket.readyState === WebSocket.CLOSING ||
-                socket.readyState === WebSocket.CLOSED;
-            if (needsNewSocket) {
-                socket = connectSocket(sessionId);
-                // Connection opened
-                socket.addEventListener("open", () => {
-                    console.log("Connected!");
-                    reconnectAttempts = 0; // Reset attempts on successful connection
-                    sendClientInfo();
-                    requestQuota();
-                    //TODO: Load clients
-                });
-                // Handle connection close
-                socket.addEventListener("close", (event) => {
-                    // WebSocket connection closed
-                    // Only attempt to reconnect if it wasn't a clean close
-                    if (event.code !== 1000) {
-                        // Start with 1 second, increase exponentially up to 30 seconds
-                        const delay = Math.min(1000 * Math.pow(2, Math.min(reconnectAttempts, 5)), 30000);
-                        // Attempting to reconnect with backoff
-                        reconnectTimeout = setTimeout(() => {
-                            reconnectAttempts++;
-                            connectWebSocket();
-                        }, delay);
-                    }
-                });
-                // Handle connection errors
-                socket.addEventListener("error", (error) => {
-                    console.error("WebSocket error:", error);
-                });
-                globalThis.editorSocket = socket;
-            }
-            // Always ensure this instance is listening to messages
-            if (socket) {
-                socket.addEventListener("message", messageHandler);
-                socketInstanceRef.current = socket;
-                // If we attached to an already-open socket, resend client info to refresh presence
-                if (socket.readyState === WebSocket.OPEN) {
-                    sendClientInfo();
-                    requestQuota();
-                }
-            }
-        };
-        connectWebSocket();
-        // Cleanup function
-        return () => {
-            if (reconnectTimeout) {
-                clearTimeout(reconnectTimeout);
-            }
-            if (socketInstanceRef.current) {
-                socketInstanceRef.current.removeEventListener("message", messageHandler);
-                socketInstanceRef.current = null;
-            }
-        };
-    }, []);
-    // Handle initial state setup from URL (only on initial load)
-    useEffect(() => {
-        if (!isInitialLoad)
-            return;
-        const itemid = searchParams.get("itemid");
-        const wizardId = searchParams.get("wizardid");
-        const urlView = searchParams.get("view");
-        // Handle wizard ID from URL first (before view)
-        if (wizardId) {
-            setCurrentWizardId(wizardId);
-        }
-        if (urlView) {
-            setViewName(urlView);
-        }
-        else if (!itemid) {
-            setViewName("splash-screen");
-        }
-    }, [searchParams, isInitialLoad]);
-    // Handle initial compare mode from URL (only on initial load)
-    useEffect(() => {
-        if (!isInitialLoad)
-            return;
-        if (searchParams.has("compare")) {
-            const compareValue = searchParams.get("compare") === "true";
-            setCompareMode(compareValue);
-        }
-    }, [searchParams, pathname, isInitialLoad]);
-    // Handle initial item loading from URL and loadItemDescriptor
-    useEffect(() => {
-        // Use URL params only on initial load, otherwise respect loadItemDescriptor prop
-        const itemid = isInitialLoad ? searchParams.get("itemid") : null;
-        const itemId = cleanId(loadItemDescriptor?.id ?? itemid ?? undefined);
-        const language = loadItemDescriptor?.language ??
-            (isInitialLoad
-                ? (searchParams.get("lang") ?? searchParams.get("language"))
-                : null);
-        const version = loadItemDescriptor?.version ??
-            (isInitialLoad && searchParams.has("version")
-                ? parseInt(searchParams.get("version"))
-                : 0);
-        if (!itemId || !language)
-            return;
-        // Skip loading if the item is already loaded with the same parameters
-        if (currentItemDescriptor?.id === itemId &&
-            currentItemDescriptor?.language === language &&
-            (!version || currentItemDescriptor?.version === version)) {
-            return;
-        }
-        loadItem({ id: itemId, language, version });
-    }, [loadItemDescriptor, searchParams, currentItemDescriptor, isInitialLoad]);
+    // WebSocket initialization is performed after messageHandler is defined
+    // Defer URL sync until loadItem is defined below
     // Mark end of initial load phase
     useEffect(() => {
         if (isInitialLoad) {
@@ -889,28 +528,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         if (!isLoading)
             setInserting(undefined);
     }, [page, viewName, revision]);
-    useEffect(() => {
-        // Handle fullscreen on initial load only
-        if (isInitialLoad &&
-            (searchParams.get("fullscreen") || configuration.forceFullscreen)) {
-            pageViewContext.setFullscreen(true);
-        }
-        const handleMessage = (event) => {
-            if (event.data.action === "refresh") {
-                requestRefresh("immediate");
-            }
-        };
-        window.addEventListener("message", handleMessage);
-        return () => {
-            window.removeEventListener("message", handleMessage);
-        };
-    }, [
-        isInitialLoad,
-        searchParams,
-        pathname,
-        pageViewContext,
-        configuration.forceFullscreen,
-    ]);
+    // moved below to ensure requestRefresh is declared first
     const loadHistory = useDebouncedCallback(async (item) => {
         const result = await getEditHistory(item);
         if (handleErrorResult(result, ui, state))
@@ -923,6 +541,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             return;
         setEditHistory(result.data || []);
     }, []);
+    // defined below after loadItem/loadItemVersions/requestRefresh
     const requestRefresh = useCallback((mode) => {
         const refreshTimer = globalThis.editorRefreshTimer;
         const doRefresh = () => {
@@ -1118,6 +737,20 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         loadHistory,
         addToBrowseHistory,
     ]);
+    useEditorUrlSync({
+        isInitialLoad,
+        setIsInitialLoad,
+        searchParams,
+        pathname,
+        setCurrentWizardId,
+        setViewName,
+        setCompareMode,
+        loadItem,
+        currentItemDescriptor,
+        loadItemDescriptor,
+        routerPush: (url) => router.push(url, { scroll: false }),
+    });
+    // initialized below after messageHandler
     useEffect(() => {
         if (pageViewContext.fullscreen &&
             !searchParams.get("fullscreen") &&
@@ -1222,78 +855,12 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         confirmationDialogRef,
         onOperationExecuted,
     }), [showErrorToast, confirmationDialogRef, onOperationExecuted]);
-    const selectMedia = useCallback(({ selectedIdPath, mode, }) => {
-        setSelectedMediaIdPath(selectedIdPath);
-        setMediaSelectorVisible(true);
-        if (mode)
-            setMediaSelectorMode(mode);
-        return new Promise((resolve) => {
-            setMediaResolver(() => resolve);
-        });
-    }, []);
-    const onMediaSelect = useCallback((mediaUrl) => {
-        mediaResolver?.(mediaUrl);
-        setMediaSelectorVisible(false);
-        setMediaResolver(undefined);
-    }, [mediaResolver]);
-    useEffect(() => {
-        if (!workboxItems || workboxItems.length === 0)
-            return;
-        const itemsToValidate = workboxItems.map((x) => x.item);
-        validate(itemsToValidate);
-    }, [workboxItems]);
-    async function loadWorkbox(items) {
-        if (!items.length) {
-            setWorkboxItems([]);
-            return;
-        }
-        const workbox = await getWorkbox(items.map((x) => getItemDescriptor(x)));
-        const workboxItems = workbox.data || [];
-        const sortedWorkboxItems = workboxItems.sort((a, b) => {
-            if (a.isPublished === b.isPublished)
-                return ((b.workflowCommands?.length || 0) - (a.workflowCommands?.length || 0));
-            return !a.isPublished || !a.isPublishable ? -1 : 1;
-        });
-        setWorkboxItems(sortedWorkboxItems);
-    }
-    const loadWorkboxDebounced = useDebouncedCallback((items) => loadWorkbox(items), 5000);
-    useEffect(() => {
-        const items = [];
-        if (editContext.contentEditorItem) {
-            items.push(editContext.contentEditorItem.descriptor);
-        }
-        if (editContext.page) {
-            collectAllItems(editContext.page.rootComponent, items);
-        }
-        loadWorkboxDebounced(items.filter((x) => x));
-    }, [page, contentEditorItem]);
-    function collectAllItems(component, items) {
-        component.placeholders.forEach((x) => {
-            x.components.forEach((y) => {
-                if (y.isShared && y.datasourceItem) {
-                    items.push(y.datasourceItem);
-                }
-                //TODO: Add picture fields
-                // y.datasourceItem?.fields.forEach((z) => {
-                //   if (z.type === "picture") {
-                //     const picture = z.value as PictureValue;
-                //     if (picture.variants) {
-                //       picture.variants.forEach((v) => {
-                //         if (v.mediaId) {
-                //           items.push({
-                //             id: v.mediaId,
-                //             language: y.datasourceItem!.descriptor.language,
-                //             version: 0,
-                //           });
-                //         }
-                //       });
-                //     }
-                //   }
-                // });
-                collectAllItems(y, items);
-            });
-        });
-    }
+    // moved to useMediaSelector
+    const { workboxItems } = useWorkbox({
+        page,
+        contentEditorItem,
+        validate,
+    });
     const switchView = (viewName, options) => {
         async function switchView() {
             if (currentView?.beforeClose && !options?.skipConfirmation) {
@@ -1375,12 +942,10 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         showErrorToast,
         executeCommand,
     });
-    if (typeof window !== "undefined")
-        useEventListenerExt("keydown", handleKeyDown, window, true);
-    if (typeof window !== "undefined")
-        useEventListenerExt("click", () => {
-            contextMenuRef.current?.close({});
-        }, window, true);
+    useGlobalEditorEvents({
+        onKeyDown: handleKeyDown,
+        onWindowClick: () => contextMenuRef.current?.close({}),
+    });
     useEffect(() => {
         if (mode === "suggestions") {
             setShowSuggestedEdits(true);
@@ -1406,57 +971,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         router.push(newUrl, { scroll: false });
     }, [router]);
     // Quota checking functions
-    const isQuotaExceeded = useCallback(() => {
-        if (!quotaInfo)
-            return false;
-        const { usage, limits } = quotaInfo;
-        // Check absolute limits
-        if (limits.totalTokens > 0 && usage.totalTokens >= limits.totalTokens)
-            return true;
-        if (limits.totalImages > 0 && usage.totalImages >= limits.totalImages)
-            return true;
-        // For now, we're only checking absolute limits as daily/monthly would require server-side logic
-        // You can extend this to check daily/monthly limits if the server provides that information
-        return false;
-    }, [quotaInfo]);
-    const getQuotaWarningMessage = useCallback(() => {
-        if (!quotaInfo)
-            return null;
-        const { usage, limits } = quotaInfo;
-        const warnings = [];
-        // Check tokens
-        if (limits.totalTokens > 0) {
-            const tokenPercentage = (usage.totalTokens / limits.totalTokens) * 100;
-            if (tokenPercentage >= 100) {
-                warnings.push(`Token limit exceeded (${usage.totalTokens}/${limits.totalTokens})`);
-            }
-            else if (tokenPercentage >= 90) {
-                warnings.push(`Token usage high: ${Math.round(tokenPercentage)}% (${usage.totalTokens}/${limits.totalTokens})`);
-            }
-        }
-        // Check images
-        if (limits.totalImages > 0) {
-            const imagePercentage = (usage.totalImages / limits.totalImages) * 100;
-            if (imagePercentage >= 100) {
-                warnings.push(`Image limit exceeded (${usage.totalImages}/${limits.totalImages})`);
-            }
-            else if (imagePercentage >= 90) {
-                warnings.push(`Image usage high: ${Math.round(imagePercentage)}% (${usage.totalImages}/${limits.totalImages})`);
-            }
-        }
-        return warnings.length > 0 ? warnings.join(", ") : null;
-    }, [quotaInfo]);
-    // Show warning when quota is exceeded
-    useEffect(() => {
-        const warningMessage = getQuotaWarningMessage();
-        if (warningMessage) {
-            const isExceeded = isQuotaExceeded();
-            showErrorToast({
-                summary: isExceeded ? "AI Quota Exceeded" : "AI Quota Warning",
-                details: warningMessage,
-            });
-        }
-    }, [quotaInfo, getQuotaWarningMessage, isQuotaExceeded, showErrorToast]);
+    // moved into hook
     // Calculate visible views separately to avoid circular dependency
     const visibleViews = useMemo(() => {
         const allViews = configuration.editor.views
@@ -1519,7 +1034,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
                 const oldUrl = `${pathname}?${searchParams.toString()}`;
                 router.push(newUrl, { scroll: false });
             },
-            selectMedia,
+            selectMedia: media.selectMedia,
             showToast: (message) => {
                 toast(message);
             },
@@ -1843,7 +1358,6 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         searchParams,
         pathname,
         router,
-        selectMedia,
         scrollIntoView,
         focusedField,
         renderedFields,
@@ -2170,42 +1684,11 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
     }, [currentItemDescriptor]);
     if (!currentView)
         return null;
-    const editorUi = pageViewContext.fullscreen ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "fixed inset-0 flex", children: [_jsx(PageViewerFrame, { compareView: compareMode, pageViewContext: pageViewContext }), _jsxs("div", { className: "fixed top-4 right-4 z-[9999] flex gap-2", children: [_jsx("button", { onClick: () => {
-                                    const currentDevice = pageViewContext.device;
-                                    if (currentDevice === "desktop") {
-                                        // Switch to mobile (first mobile device from configuration)
-                                        const firstMobileDevice = configuration.devices[0];
-                                        if (firstMobileDevice) {
-                                            pageViewContext.setDevice(firstMobileDevice.name);
-                                        }
-                                    }
-                                    else {
-                                        // Switch to desktop
-                                        pageViewContext.setDevice("desktop");
-                                    }
-                                }, className: "flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-black/20 text-white backdrop-blur-sm transition-colors duration-200 hover:bg-black/40", "aria-label": pageViewContext.device === "desktop"
-                                    ? "Switch to mobile view"
-                                    : "Switch to desktop view", title: pageViewContext.device === "desktop"
-                                    ? "Switch to mobile view"
-                                    : "Switch to desktop view", "data-testid": "fullscreen-device-toggle", children: pageViewContext.device === "desktop" ? (_jsx(Smartphone, { className: "h-5 w-5" })) : (_jsx(Monitor, { className: "h-5 w-5" })) }), !configuration.forceFullscreen && (_jsx("button", { onClick: () => pageViewContext.setFullscreen(false), className: "flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-black/20 text-white backdrop-blur-sm transition-colors duration-200 hover:bg-black/40", "aria-label": "Exit fullscreen", title: "Return to normal view", "data-testid": "fullscreen-exit-button", children: _jsx(Shrink, { className: "h-5 w-5" }) }))] })] }), _jsx(EditorFormPopup, { ref: editorFormPopupRef, pageViewContext: pageViewContext }), showFullscreenHint && !configuration.forceFullscreen && (_jsx("div", { className: "fixed inset-0", onMouseMoveCapture: () => {
+    const editorUi = pageViewContext.fullscreen ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "fixed inset-0 flex", children: [_jsx(PageViewerFrame, { compareView: compareMode, pageViewContext: pageViewContext }), _jsx(FullscreenControls, { device: pageViewContext.device, setDevice: (d) => pageViewContext.setDevice(d), canExit: !configuration.forceFullscreen, onExit: () => pageViewContext.setFullscreen(false), firstMobileDeviceName: configuration.devices[0]?.name })] }), _jsx(EditorFormPopup, { ref: editorFormPopupRef, pageViewContext: pageViewContext }), showFullscreenHint && !configuration.forceFullscreen && (_jsx("div", { className: "fixed inset-0", onMouseMoveCapture: () => {
                     setTimeout(() => {
                         setShowFullscreenHint(false);
                     }, 600);
-                }, "data-testid": "fullscreen-hint-overlay", children: _jsx("div", { className: "fixed top-3 left-1/2 -translate-x-1/2 transform rounded-sm bg-gray-200 p-12", children: "Press Ctrl + F11 to exit fullscreen mode" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(MainLayout, { className: className, view: currentView, centerPanelView: centerPanelView, rightSidebar: currentView.rightSidebar &&
-                    editContext.page &&
-                    showComponentNavigator && (_jsx(SidebarView, { sidebar: currentView.rightSidebar, editContext: editContext, active: true, detached: true, onClose: () => handleSetShowComponentNavigator(false) })), rightSidebarTitle: currentView.rightSidebar?.title, farRightSidebar: showAgentsPanel &&
-                    !["splash-screen", "open-page", "new-page"].includes(viewName) && (_jsx(SidebarView, { sidebar: {
-                        title: "Agents",
-                        panels: [
-                            {
-                                name: "agents",
-                                title: "Agents",
-                                content: _jsx(Agents, {}),
-                                initialSize: 70,
-                                noOverflow: true,
-                            },
-                        ],
-                    }, editContext: editContext, active: true, detached: true, paddingRight: true, onClose: () => handleSetShowAgentsPanel(false) })), farRightSidebarTitle: "AGENTS" }), isTourActive && _jsx(Tour, { tourStopCallback: () => setIsTourActive(false) })] }));
-    return (_jsx("div", { className: `editor h-full`, children: _jsx(OperationsContextProvider, { value: operationsContext.context, children: _jsx(FieldsEditContextProvider, { value: fieldsEditContext, children: _jsxs(EditContextProvider, { value: editContext, children: [editContext.isRefreshing && (_jsx("div", { className: "pointer-events-none fixed right-0 bottom-0 flex h-24 w-24 items-center justify-center text-gray-600 opacity-50 select-none", children: _jsx(Spinner, {}) })), children || editorUi, dialog, _jsx(Toaster, { position: "top-center" }), " ", _jsx(ConfirmationDialog, { ref: confirmationDialogRef }), _jsx(EditContextMenu, { ref: contextMenuRef }), mediaSelectorVisible && (_jsx(MediaSelector, { language: editContext.currentItemDescriptor.language, visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: onMediaSelect, selectedIdPath: selectedMediaIdPath, mode: mediaSelectorMode })), _jsx(FieldEditorPopup, { ref: fieldEditorPopupRef }), _jsx(EditorFormPopup, { ref: editorFormPopupRef, pageViewContext: pageViewContext })] }) }) }) }));
+                }, "data-testid": "fullscreen-hint-overlay", children: _jsx("div", { className: "fixed top-3 left-1/2 -translate-x-1/2 transform rounded-sm bg-gray-200 p-12", children: "Press Ctrl + F11 to exit fullscreen mode" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EditorChrome, { className: className, currentView: currentView, centerPanelView: centerPanelView, editContext: editContext, showComponentNavigator: showComponentNavigator, handleSetShowComponentNavigator: handleSetShowComponentNavigator, showAgentsPanel: showAgentsPanel, handleSetShowAgentsPanel: handleSetShowAgentsPanel, viewName: viewName }), isTourActive && _jsx(Tour, { tourStopCallback: () => setIsTourActive(false) })] }));
+    return (_jsx("div", { className: `editor h-full`, children: _jsx(OperationsContextProvider, { value: operationsContext.context, children: _jsx(FieldsEditContextProvider, { value: fieldsEditContext, children: _jsxs(EditContextProvider, { value: editContext, children: [editContext.isRefreshing && (_jsx("div", { className: "pointer-events-none fixed right-0 bottom-0 flex h-24 w-24 items-center justify-center text-gray-600 opacity-50 select-none", children: _jsx(Spinner, {}) })), children || editorUi, dialog, _jsx(Toaster, { position: "top-center" }), " ", _jsx(ConfirmationDialog, { ref: confirmationDialogRef }), _jsx(EditContextMenu, { ref: contextMenuRef }), media.mediaSelectorVisible && (_jsx(MediaSelector, { language: editContext.currentItemDescriptor.language, visible: media.mediaSelectorVisible, onHide: () => media.setMediaSelectorVisible(false), onMediaSelected: media.onMediaSelect, selectedIdPath: media.selectedMediaIdPath, mode: media.mediaSelectorMode })), _jsx(FieldEditorPopup, { ref: fieldEditorPopupRef }), _jsx(EditorFormPopup, { ref: editorFormPopupRef, pageViewContext: pageViewContext })] }) }) }) }));
 }
-//# sourceMappingURL=EditorClient.js.map
+//# sourceMappingURL=EditorShell.js.map