@parhelia/core 0.1.11004 → 0.1.11007

package/dist/dist/editor/client/EditorShell.js

@@ -0,0 +1,2283 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef, useCallback, useSyncExternalStore, } from "react";
+import { toast } from "sonner";
+import { EditContextProvider, FieldsEditContextProvider, OperationsContextProvider, } from "./editContext";
+import { fieldModificationStore } from "./fieldModificationStore";
+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 { useEditorWebSocket } from "./hooks/useEditorWebSocket";
+import { useSocketMessageHandler } from "./hooks/useSocketMessageHandler";
+import "react-json-view-lite/dist/index.css";
+import { MediaSelector, } from "../media-selector/MediaSelector";
+import { getComponentCommands } from "../commands/componentCommands";
+import { getLanguagesAndVersions, } from "../services/contentService";
+import ConfirmationDialog from "../ConfirmationDialog";
+import { getItemDescriptor } from "../utils";
+import { EditContextMenu } from "../ContextMenu";
+import { FieldEditorPopup } from "../FieldEditorPopup";
+import { post } from "../services/serviceHelper";
+import { PageViewerFrame } from "../page-viewer/PageViewerFrame";
+import { useItemsRepository } from "./itemsRepository";
+import { Spinner } from "../ui/Spinner";
+import { cleanId } from "../utils/id-helper";
+import { useDebouncedCallback } from "use-debounce";
+import { useKeyboardNavigation } from "../utils/keyboardNavigation";
+import { Toaster } from "../../components/ui/sonner";
+import { Tour } from "../../tour/Tour";
+import { usePageViewContext } from "../page-viewer/pageViewContext";
+import { QuickItemSwitcher } from "../QuickItemSwitcher";
+import { getComments, getAvailableCommentTags, } from "../services/reviewsService";
+import { useReviews } from "../reviews/useReviews";
+import uuid from "react-uuid";
+import { flushSync } from "react-dom";
+import { getSuggestedEdits } from "../services/suggestedEditsService";
+import { requestQuota } from "../services/aiService";
+import { useQuota } from "./hooks/useQuota";
+import { useEditorUrlSync } from "./hooks/useEditorUrlSync";
+import { useMediaQuery } from "./hooks/useMediaQuery";
+import { FullscreenControls } from "./ui/FullscreenControls";
+import { EditorChrome } from "./ui/EditorChrome";
+import { useWorkbox } from "./hooks/useWorkbox";
+import { useMediaSelector } from "./hooks/useMediaSelector";
+import { useGlobalEditorKeyDown } from "./hooks/useGlobalEditorKeyDown";
+export function EditorShell({ configuration, className, item: loadItemDescriptor, sessionId, userInfo, userPreferences, parheliaSettings, setUserPreferences, children, }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const [selection, setSelection] = useState([]);
+    const [selectedForInsertion, setSelectedForInsertion] = useState("");
+    const [refreshCompletedFlag, setRefreshCompletedFlag] = useState(false);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [dragObject, setDragObject] = useState();
+    // media selection handled by useMediaSelector hook
+    const [scrollIntoView, setScrollIntoView] = useState();
+    const confirmationDialogRef = useRef(null);
+    const contextMenuRef = useRef(null);
+    const editContextRef = useRef(undefined);
+    const [currentOverlay, setCurrentOverlay] = useState();
+    const [contentEditorItem, setContentEditorItem] = useState();
+    const [focusedField, setFocusedField] = useState();
+    const focusedFieldRef = useRef(undefined);
+    const [selectedRange, setSelectedRange] = useState();
+    const [validating, setValidating] = useState(false);
+    const [inserting, setInserting] = useState();
+    const [showFullscreenHint, setShowFullscreenHint] = useState(false);
+    // const [showPublishDialog, setShowPublishDialog] = useState(false);
+    const [activeFieldActions, setActiveFieldActions] = useState([]);
+    const [renderedFields, setRenderedFields] = useState([]);
+    const fieldEditorPopupRef = React.useRef(null);
+    const [validationResult, setValidationResult] = useState();
+    const [editHistory, setEditHistory] = useState([]);
+    const [recentEdits, setRecentEdits] = useState([]);
+    const addRecentEdit = useCallback((edit) => {
+        setRecentEdits((prevEditedFields) => {
+            return [
+                ...prevEditedFields.filter((x) => x.timestamp > Date.now() - 30000 &&
+                    (x.fieldId !== edit.fieldId ||
+                        x.item.id !== edit.item.id ||
+                        x.item.language !== edit.item.language ||
+                        x.item.version !== edit.item.version)),
+                edit,
+            ];
+        });
+    }, []);
+    const [activeSessions, setActiveSessions] = useState(() => {
+        try {
+            const existing = globalThis.__alpacaActiveSessions;
+            return Array.isArray(existing) ? existing : [];
+        }
+        catch {
+            return [];
+        }
+    });
+    // Block editing until the server acknowledges our client-info for the current item
+    const [isClientInfoAcknowledged, setIsClientInfoAcknowledged] = useState(false);
+    if (typeof window !== "undefined")
+        sessionStorage?.setItem("sessionId", sessionId);
+    const [viewName, setViewName] = useState(
+    // default from query string
+    searchParams.get("view") ??
+        configuration.editor.views[0]?.name ??
+        "splash-screen");
+    const [previousViewName, setPreviousViewName] = useState(undefined);
+    const [compareMode, setCompareMode] = useState(false);
+    const [compareTo, setCompareTo] = useState();
+    const [componentDesignerComponent, setComponentDesignerComponent] = useState();
+    const [componentDesignerRendering, setComponentDesignerRendering] = useState();
+    const [insertMode, setInsertMode] = useState(false);
+    const [ignoreBlur, setIgnoreBlur] = useState(false);
+    const [currentItemDescriptor, setCurrentItemDescriptor] = useState();
+    const currentItemDescriptorRef = useRef(undefined);
+    useEffect(() => {
+        currentItemDescriptorRef.current = currentItemDescriptor;
+    }, [currentItemDescriptor]);
+    const currentItemRef = useRef(undefined);
+    useEffect(() => {
+        currentItemRef.current = contentEditorItem;
+    }, [contentEditorItem]);
+    const [inlineEditingFieldElement, setInlineEditingFieldElement] = useState();
+    const [lockedField, setLockedField] = useState();
+    const [itemLanguages, setItemLanguages] = useState([]);
+    const [itemVersions, setItemVersions] = useState([]);
+    const modifiedFields = useSyncExternalStore((onStoreChange) => fieldModificationStore.subscribeAll(onStoreChange), () => fieldModificationStore.getAllFields(), () => fieldModificationStore.getAllFields());
+    const [comments, setComments] = useState([]);
+    const [suggestedEdits, setSuggestedEdits] = useState([]);
+    const [showSuggestedEdits, setShowSuggestedEdits] = useState(false);
+    const [showSuggestedEditsDiff, setShowSuggestedEditsDiff] = useState(false);
+    const [availableCommentTags, setAvailableCommentTags] = useState([]);
+    const [showComments, setShowComments] = useState(() => {
+        const savedShowComments = typeof window !== "undefined"
+            ? localStorage.getItem("editor.showComments")
+            : null;
+        return savedShowComments ? JSON.parse(savedShowComments) : true;
+    });
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            localStorage.setItem("editor.showComments", JSON.stringify(showComments));
+        }
+    }, [showComments]);
+    const [showResolvedComments, setShowResolvedComments] = useState(() => {
+        const saved = typeof window !== "undefined"
+            ? localStorage.getItem("editor.showResolvedComments")
+            : null;
+        return saved ? JSON.parse(saved) : false;
+    });
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            localStorage.setItem("editor.showResolvedComments", JSON.stringify(showResolvedComments));
+        }
+    }, [showResolvedComments]);
+    const [selectedComment, setSelectedComment] = useState();
+    const [browseHistory, setBrowseHistory] = useState(() => {
+        // Convert UserBrowseHistoryEntry[] to HistoryEntry[]
+        if (!userInfo.browseHistory)
+            return [];
+        return userInfo.browseHistory.map((entry) => ({
+            name: entry.itemName,
+            path: entry.itemPath,
+            id: entry.itemId,
+            version: entry.itemVersion,
+            language: entry.itemLanguage,
+            hasLayout: false, // This will need to be determined from the item
+            templateName: "", // This will need to be determined from the item
+            icon: entry.icon,
+        }));
+    });
+    // Navigation history for browser history (view + item combinations)
+    const [navigationHistory, setNavigationHistory] = useState(() => {
+        // Initialize from browse history with current view
+        if (!userInfo.browseHistory)
+            return [];
+        return userInfo.browseHistory.map((entry) => ({
+            viewName: searchParams.get("view") ??
+                configuration.editor.views[0]?.name ??
+                "content-tree",
+            item: {
+                id: entry.itemId,
+                language: entry.itemLanguage,
+                version: entry.itemVersion,
+            },
+            timestamp: new Date(entry.visitedAt).getTime(),
+            displayName: searchParams.get("view") ??
+                configuration.editor.views[0]?.name ??
+                "content-tree",
+            itemName: entry.itemName,
+            itemPath: entry.itemPath,
+            itemIcon: entry.icon,
+        }));
+    });
+    const [centerPanelView, setCenterPanelView] = useState();
+    const [timings, setTimings] = useState({});
+    const [revision, setRevision] = useState();
+    // moved into useWorkbox
+    const [isTourActive, setIsTourActive] = useState(false);
+    const [mode, setMode] = useState("edit");
+    const [statusMessage, setStatusMessage] = useState("");
+    const [focusFieldComponentId, setFocusFieldComponentId] = useState();
+    const [enableCompletions, setEnableCompletions] = useState(false);
+    const [showComponentNavigator, setShowComponentNavigator] = useState(userPreferences.showComponentNavigator ?? false);
+    const [showAgentsPanel, setShowAgentsPanel] = useState(userPreferences.showAgentsPanel ?? false);
+    const [activeEditorTab, setActiveEditorTab] = useState(null);
+    const [showLayoutComponents, setShowLayoutComponents] = useState(userPreferences.showLayoutComponents ?? false);
+    const { quotaInfo, setQuotaInfo, isQuotaExceeded, getQuotaWarningMessage } = useQuota({
+        showError: ({ summary, details }) => showErrorToast({ summary, details }),
+    });
+    const [webSocketMessages, setWebSocketMessages] = useState([]);
+    const [favorites, setFavorites] = useState([]);
+    // Quick item switcher state
+    const [quickSwitcherVisible, setQuickSwitcherVisible] = useState(false);
+    const [quickSwitcherSelectedIndex, setQuickSwitcherSelectedIndex] = useState(0);
+    // Track initial load to know when to sync state from URL vs URL from state
+    const [isInitialLoad, setIsInitialLoad] = useState(true);
+    // Wizard state - managed centrally instead of reading URL directly
+    const [currentWizardId, setCurrentWizardId] = useState(null);
+    // Handle initial mode setup from URL (only on initial load)
+    useEffect(() => {
+        if (!isInitialLoad)
+            return;
+        const queryMode = searchParams.get("mode");
+        if (queryMode) {
+            setMode(queryMode);
+        }
+    }, [searchParams, isInitialLoad]);
+    useEffect(() => {
+        if (mode === "suggestions") {
+            setViewName("comments");
+        }
+    }, [mode]);
+    useEffect(() => {
+        if (focusedField &&
+            selection.length > 0 &&
+            selection[0] !== focusedField.item.id) {
+            setFocusedField(undefined);
+        }
+    }, [selection]);
+    useEffect(() => {
+        focusedFieldRef.current = focusedField;
+    }, [focusedField]);
+    // Track the current page item descriptor for itemsRepository
+    const [currentPageItem, setCurrentPageItem] = useState();
+    // Create itemsRepository with current page item (will be updated when page loads)
+    const itemsRepository = useItemsRepository(addRecentEdit, currentPageItem);
+    const pageViewContext = usePageViewContext({
+        pageItemDescriptor: currentItemDescriptor,
+        itemsRepository,
+        configuration,
+    });
+    // Update currentPageItem when pageViewContext.page is available
+    useEffect(() => {
+        if (pageViewContext.page?.item.descriptor) {
+            setCurrentPageItem(pageViewContext.page.item.descriptor);
+        }
+    }, [pageViewContext.page?.item.descriptor]);
+    // Track which items are rendered/used by the current page for targeted refresh
+    const pageItemsSetRef = useRef(new Set());
+    const makeItemKey = useCallback((d) => `${d.id}-${d.language}-${d.version}`.toLowerCase(), []);
+    useEffect(() => {
+        const newSet = new Set();
+        const collect = (component) => {
+            if (!component)
+                return;
+            if (component.datasourceItem)
+                newSet.add(makeItemKey(component.datasourceItem));
+            component.items?.forEach((i) => newSet.add(makeItemKey(i)));
+            component.placeholders?.forEach((ph) => ph.components?.forEach(collect));
+        };
+        if (pageViewContext?.page) {
+            // Include the page item itself
+            const pageDescriptor = pageViewContext.page.item.descriptor;
+            newSet.add(makeItemKey(pageDescriptor));
+            collect(pageViewContext.page.rootComponent);
+        }
+        pageItemsSetRef.current = newSet;
+    }, [pageViewContext.page?.editRevision]);
+    const isItemUsedInCurrentPage = useCallback((item) => pageItemsSetRef.current.has(makeItemKey(item)), [makeItemKey]);
+    const socketMessageListeners = useRef(new Set());
+    const addSocketMessageListener = useCallback((callback) => {
+        socketMessageListeners.current.add(callback);
+        return () => socketMessageListeners.current.delete(callback);
+    }, []);
+    // Listen for batch completion notifications
+    useEffect(() => {
+        const removeListener = addSocketMessageListener((message) => {
+            if (message.type === "batch-completed") {
+                const { batchId, totalJobs, completedJobs, errorJobs } = message.payload;
+                let toastMessage;
+                if (errorJobs > 0) {
+                    toastMessage = `Translation batch completed: ${completedJobs}/${totalJobs} successful, ${errorJobs} failed`;
+                }
+                else {
+                    toastMessage = `Translation batch completed successfully: ${completedJobs}/${totalJobs} translations finished`;
+                }
+                // Delay toast slightly to give user time to navigate if they're switching views
+                setTimeout(() => {
+                    toast(toastMessage, {
+                        duration: 5000, // Show for 5 seconds
+                        id: `batch-${batchId}`, // Unique ID to prevent duplicates
+                    });
+                    // If the user is in the translation-management view for the same batch,
+                    // trigger a refresh so the UI reflects the final state immediately.
+                    try {
+                        const params = new URLSearchParams(window.location.search);
+                        const currentView = params.get("view");
+                        const currentBatchId = params.get("batchId") || params.get("batchid");
+                        if (currentView === "translation-management" &&
+                            currentBatchId === batchId) {
+                            // Ask the server for fresh data; BatchTranslationView listens to requestRefresh via editContext
+                            requestRefresh("immediate");
+                        }
+                    }
+                    catch { }
+                }, 1000); // 1 second delay
+            }
+        });
+        return () => {
+            try {
+                removeListener();
+            }
+            catch { }
+        };
+    }, [addSocketMessageListener]);
+    const reviews = useReviews({
+        currentItemDescriptor,
+        addSocketMessageListener: addSocketMessageListener,
+    });
+    const validate = useDebouncedCallback(async (items) => {
+        setValidating(true);
+        const result = await validateItems(items, sessionId);
+        if (result.type === "success")
+            setValidationResult(await result.data);
+        setValidating(false);
+    }, 1000);
+    useEffect(() => {
+        setSelectedForInsertion("");
+    }, [selection]);
+    // Clear any selected insertion template when insert mode is disabled
+    useEffect(() => {
+        if (!insertMode) {
+            setSelectedForInsertion("");
+        }
+    }, [insertMode]);
+    useEffect(() => {
+        if (focusedField?.fieldId !== selectedRange?.fieldId) {
+            setSelectedRange(undefined);
+        }
+    }, [focusedField]);
+    const currentView = configuration.editor.views.find((x) => x.name === viewName) ??
+        configuration.editor.views[0];
+    useEffect(() => {
+        if (currentView?.defaultCenterPanelView) {
+            setCenterPanelView(currentView.defaultCenterPanelView);
+        }
+    }, [currentView]);
+    const sendClientInfoImmediate = useCallback(async () => {
+        const clientInfoMessage = {
+            type: "client-info",
+            sessionId: sessionId,
+            url: window.location.href,
+            userAgent: navigator.userAgent,
+            item: currentItemRef.current
+                ? {
+                    ...currentItemRef.current.descriptor,
+                    name: currentItemRef.current.name,
+                }
+                : null,
+        };
+        const url = "/parhelia/client";
+        await post(url, clientInfoMessage);
+    }, [sessionId]);
+    const debouncedSendClientInfo = useDebouncedCallback(() => {
+        void sendClientInfoImmediate();
+    }, 100);
+    const sendClientInfo = useCallback(() => {
+        debouncedSendClientInfo();
+    }, [debouncedSendClientInfo]);
+    const startTour = useCallback(() => {
+        setIsTourActive(true);
+    }, [setIsTourActive]);
+    const handleSetShowComponentNavigator = useCallback((value) => {
+        const newValue = typeof value === "function" ? value(showComponentNavigator) : value;
+        setShowComponentNavigator(newValue);
+        setUserPreferences({ showComponentNavigator: newValue });
+    }, [showComponentNavigator, setShowComponentNavigator, setUserPreferences]);
+    const handleSetShowAgentsPanel = useCallback((value) => {
+        const newValue = typeof value === "function" ? value(showAgentsPanel) : value;
+        setShowAgentsPanel(newValue);
+        setUserPreferences({ showAgentsPanel: newValue });
+    }, [showAgentsPanel, setShowAgentsPanel, setUserPreferences]);
+    const handleSetShowLayoutComponents = useCallback((value) => {
+        const newValue = typeof value === "function" ? value(showLayoutComponents) : value;
+        setShowLayoutComponents(newValue);
+        setUserPreferences({ showLayoutComponents: newValue });
+    }, [showLayoutComponents, setShowLayoutComponents, setUserPreferences]);
+    const toggleSidebarPin = useCallback((viewName) => {
+        setPinnedSidebars((prev) => {
+            const newPinnedSidebars = prev.includes(viewName)
+                ? prev.filter((name) => name !== viewName)
+                : [...prev, viewName];
+            setUserPreferences({ pinnedSidebars: newPinnedSidebars });
+            return newPinnedSidebars;
+        });
+    }, [setUserPreferences]);
+    const reorderPinnedSidebars = useCallback((newOrder) => {
+        setPinnedSidebars(newOrder);
+        setUserPreferences({ pinnedSidebars: newOrder });
+    }, [setUserPreferences]);
+    // messageHandler is defined after loadItem/loadHistory declarations to avoid temporal dead zones
+    const user = activeSessions.find((x) => x.sessionId === sessionId)?.user ||
+        userInfo.user;
+    // Self-heal if our session disappears (e.g., after HMR)
+    const missingSessionRecoveryTimerRef = useRef(null);
+    const missingSessionRecoveryAttemptsRef = useRef(0);
+    useEffect(() => {
+        const hasMySession = activeSessions.some((s) => s.sessionId === sessionId);
+        if (hasMySession) {
+            // Reset recovery state when we see ourselves again
+            if (missingSessionRecoveryTimerRef.current) {
+                clearTimeout(missingSessionRecoveryTimerRef.current);
+                missingSessionRecoveryTimerRef.current = null;
+            }
+            missingSessionRecoveryAttemptsRef.current = 0;
+            return;
+        }
+        // Only run one recovery timer at a time
+        if (missingSessionRecoveryTimerRef.current)
+            return;
+        const attempt = missingSessionRecoveryAttemptsRef.current + 1;
+        const delay = Math.min(250 * Math.pow(2, attempt - 1), 2000);
+        console.warn(`⚠️ Current session not present in active sessions. Recovery attempt ${attempt} in ${delay}ms...`);
+        missingSessionRecoveryTimerRef.current = setTimeout(() => {
+            missingSessionRecoveryTimerRef.current = null;
+            missingSessionRecoveryAttemptsRef.current = attempt;
+            if (attempt <= 3) {
+                sendClientInfo();
+            }
+            else {
+                // Force a reconnect to refresh presence after several failed nudges
+                try {
+                    globalThis.editorSocket?.close(4000, "recover-presence");
+                }
+                catch { }
+            }
+        }, delay);
+        return () => {
+            if (missingSessionRecoveryTimerRef.current) {
+                clearTimeout(missingSessionRecoveryTimerRef.current);
+                missingSessionRecoveryTimerRef.current = null;
+            }
+        };
+    }, [activeSessions, sessionId]);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        let lastUrl = window.location.href;
+        const keepAliveUrl = "/parhelia/keepalive";
+        const interval = setInterval(() => {
+            fetch(keepAliveUrl + "?ts=" + Date.now()).catch((error) => console.error("Keep Alive error:", error));
+        }, 5 * 60 * 1000);
+        const handleMessage = (event) => {
+            if (event.data.type === "componentsSelected") {
+                setSelection(event.data.componentIds);
+            }
+        };
+        // Listen for browser navigation events (back/forward buttons)
+        const handlePopState = (event) => {
+            const newUrl = window.location.href;
+            if (newUrl !== lastUrl) {
+                lastUrl = newUrl;
+                // Sync URL parameters back to component state for browser navigation
+                const urlParams = new URLSearchParams(window.location.search);
+                // Handle view changes
+                const urlView = urlParams.get("view");
+                if (urlView && urlView !== viewName) {
+                    setViewName(urlView);
+                }
+                // Handle wizard ID changes
+                const wizardId = urlParams.get("wizardid");
+                setCurrentWizardId(wizardId);
+                // Handle compare mode changes
+                const compareValue = urlParams.get("compare") === "true";
+                if (compareValue !== compareMode) {
+                    setCompareMode(compareValue);
+                }
+                // Handle mode changes
+                const urlMode = urlParams.get("mode");
+                if (urlMode && urlMode !== mode) {
+                    setMode(urlMode);
+                }
+                // Handle fullscreen changes
+                const isFullscreen = urlParams.get("fullscreen") === "true";
+                if (isFullscreen !== pageViewContext.fullscreen) {
+                    pageViewContext.setFullscreen(isFullscreen);
+                }
+                // Handle item loading
+                const itemid = urlParams.get("itemid");
+                const language = urlParams.get("lang") ?? urlParams.get("language");
+                const versionParam = urlParams.get("version");
+                const version = versionParam ? parseInt(versionParam) : 0;
+                if (itemid && language) {
+                    const itemId = cleanId(itemid);
+                    // Only load if we have a valid itemId and it's different from current item
+                    if (itemId &&
+                        (currentItemDescriptorRef.current?.id !== itemId ||
+                            currentItemDescriptorRef.current?.language !== language ||
+                            (version &&
+                                currentItemDescriptorRef.current?.version !== version))) {
+                        loadItem({
+                            id: itemId,
+                            language: language, // TypeScript knows this is non-null due to the if check
+                            version,
+                        }, {
+                            addToBrowseHistory: false, // Don't add to history since this is navigation
+                        });
+                    }
+                }
+            }
+        };
+        // Also track any other URL changes with a MutationObserver fallback
+        const checkUrlChange = () => {
+            const currentUrl = window.location.href;
+            if (currentUrl !== lastUrl) {
+                lastUrl = currentUrl;
+            }
+        };
+        const urlCheckInterval = setInterval(checkUrlChange, 100);
+        window.addEventListener("message", handleMessage);
+        window.addEventListener("popstate", handlePopState);
+        return () => {
+            window.removeEventListener("message", handleMessage);
+            window.removeEventListener("popstate", handlePopState);
+            clearInterval(interval);
+            clearInterval(urlCheckInterval);
+        };
+    }, []);
+    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) {
+            return;
+        }
+        const tour = configuration.activeTour;
+        const key = tour === "default" ? "editor.tourShown" : "editor.tourShown." + tour;
+        const tourShown = localStorage.getItem(key);
+        if (!tourShown) {
+            startTour();
+            localStorage.setItem(key, "true");
+        }
+    }, [user]);
+    // 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) {
+            // Set a small timeout to ensure all initial state setting effects have run
+            const timer = setTimeout(() => {
+                setIsInitialLoad(false);
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [isInitialLoad]);
+    // useEffect(() => {
+    //   if (contentEditorItem) {
+    //     const params = new URLSearchParams(window.location.search);
+    //     const wizardId = params.get("wizardid");
+    //     if (wizardId && viewName !== "page-wizard") {
+    //
+    //         action: "Setting page-wizard view due to wizardid parameter",
+    //         wizardId,
+    //         currentViewName: viewName,
+    //         currentUrl: window.location.href,
+    //         timestamp: new Date().toISOString(),
+    //       });
+    //       setViewName("page-wizard");
+    //     }
+    //   }
+    // }, [contentEditorItem, viewName, searchParams]);
+    useEffect(() => {
+        if (selection.length)
+            setSelectedForInsertion("");
+        // Does the current focused field belong to the current item?
+        const currentItem = selection.length > 0 ? selection[0] : pageViewContext.page?.item.id;
+        if (currentItem && focusedField?.item.id !== currentItem) {
+            setFocusedField(undefined);
+        }
+    }, [selection]);
+    // When navigating to a different item, clear any focused field so that
+    // live context doesn't keep stale field context from the previous page.
+    useEffect(() => {
+        if (!currentItemDescriptor)
+            return;
+        if (focusedField) {
+            setFocusedField(undefined);
+        }
+    }, [currentItemDescriptor?.id]);
+    const addToEditHistory = useCallback((currentEditOperation) => {
+        setEditHistory((history) => {
+            // Check if the operation was updated or needs to be added
+            const exists = history.some((item) => item.id === currentEditOperation.id);
+            return exists ? history : [currentEditOperation, ...history];
+        });
+    }, []);
+    useEffect(() => {
+        setRefreshCompletedFlag(!refreshCompletedFlag);
+        setInserting(undefined);
+    }, [currentItemDescriptor, pageViewContext.page?.item.id]);
+    useEffect(() => {
+        // When the item changes, reset acknowledgment and re-send client info
+        setIsClientInfoAcknowledged(false);
+        sendClientInfo();
+    }, [currentItemDescriptor]);
+    // Detect acknowledgment via presence of our session with matching item in active-sessions
+    useEffect(() => {
+        if (!currentItemDescriptor)
+            return;
+        try {
+            const me = activeSessions.find((s) => s.sessionId === sessionId);
+            const item = me?.item;
+            const acknowledged = !!item &&
+                item.id === contentEditorItem?.id &&
+                item.language === contentEditorItem?.language &&
+                item.version === contentEditorItem?.version;
+            if (acknowledged)
+                setIsClientInfoAcknowledged(true);
+        }
+        catch { }
+    }, [activeSessions, contentEditorItem, sessionId]);
+    const loadComments = useCallback(async () => {
+        if (!currentItemDescriptor)
+            return;
+        const result = await getComments(currentItemDescriptor.id, currentItemDescriptor.language, currentItemDescriptor.version);
+        if (handleErrorResult(result, ui, state))
+            return;
+        setComments((x) => {
+            const loadedComments = result.data;
+            const newComments = x.filter((c) => c.isNew &&
+                c.mainItemId === currentItemDescriptor.id &&
+                c.language === currentItemDescriptor.language &&
+                c.version === currentItemDescriptor.version);
+            const allComments = [...loadedComments, ...newComments];
+            allComments.sort((a, b) => a.position - b.position);
+            return allComments;
+        });
+    }, [currentItemDescriptor]);
+    // Assuming currentItemDescriptor, ui, state, handleErrorResult, and setSuggestedEdits
+    // are available in your component context.
+    const loadSuggestedEdits = useCallback(async () => {
+        if (!contentEditorItem)
+            return;
+        const result = await getSuggestedEdits(contentEditorItem.descriptor.id, contentEditorItem.descriptor.language, contentEditorItem.descriptor.version);
+        if (handleErrorResult(result, ui, state))
+            return;
+        setSuggestedEdits(result.data || []);
+    }, [contentEditorItem]);
+    const loadFavorites = useCallback(async () => {
+        try {
+            const { getAllFavorites } = await import("../services/favouritesService");
+            const result = await getAllFavorites();
+            if (result.data) {
+                setFavorites(result.data);
+            }
+        }
+        catch (error) {
+            console.error("Failed to load favorites:", error);
+            setFavorites([]);
+        }
+    }, []);
+    const page = pageViewContext.page;
+    useEffect(() => {
+        const isLoading = !!contentEditorItem &&
+            contentEditorItem.hasLayout &&
+            (!page || (page?.editRevision ?? "") != (revision ?? ""));
+        setIsRefreshing(isLoading && viewName === "page-editor");
+        if (!isLoading)
+            setInserting(undefined);
+    }, [page, viewName, revision]);
+    // moved below to ensure requestRefresh is declared first
+    const loadHistory = useDebouncedCallback(async (item) => {
+        const result = await getEditHistory(item);
+        if (handleErrorResult(result, ui, state))
+            return;
+        setEditHistory(result.data || []);
+    }, 200);
+    const refreshHistory = useCallback(async (item) => {
+        const result = await getEditHistory(item);
+        if (handleErrorResult(result, ui, state))
+            return;
+        setEditHistory(result.data || []);
+    }, []);
+    // defined below after loadItem/loadItemVersions/requestRefresh
+    const requestRefresh = useCallback((mode) => {
+        const refreshTimer = globalThis.editorRefreshTimer;
+        const doRefresh = () => {
+            const newRevision = uuid();
+            setRevision(newRevision);
+            globalThis.editorRefreshTimer = undefined;
+        };
+        if (mode === "immediate") {
+            doRefresh();
+            return;
+        }
+        if (mode === "waitForQuietPeriod" && refreshTimer) {
+            clearTimeout(refreshTimer);
+        }
+        if (!refreshTimer || mode === "waitForQuietPeriod") {
+            globalThis.editorRefreshTimer = setTimeout(() => {
+                doRefresh();
+            }, mode === "waitForQuietPeriod" ? 1200 : 700);
+        }
+    }, []);
+    useEffect(() => {
+        if (!currentItemDescriptor)
+            return;
+        loadComments();
+        loadSuggestedEdits();
+    }, [currentItemDescriptor]);
+    // Load available comment tags once per current item descriptor
+    useEffect(() => {
+        let cancelled = false;
+        const loadTags = async () => {
+            try {
+                if (!currentItemDescriptor) {
+                    if (!cancelled)
+                        setAvailableCommentTags([]);
+                    return;
+                }
+                const tags = await getAvailableCommentTags(currentItemDescriptor);
+                if (!cancelled)
+                    setAvailableCommentTags(tags || []);
+            }
+            catch {
+                if (!cancelled)
+                    setAvailableCommentTags([]);
+            }
+        };
+        loadTags();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        currentItemDescriptor?.id,
+        currentItemDescriptor?.language,
+        currentItemDescriptor?.version,
+    ]);
+    // Load favorites on mount
+    useEffect(() => {
+        loadFavorites();
+    }, [loadFavorites]);
+    // Automatically focus the first rendered field when a new component is added
+    useEffect(() => {
+        async function setFocus() {
+            if (!focusFieldComponentId)
+                return;
+            const component = findComponent(focusFieldComponentId, page?.rootComponent?.placeholders ?? []);
+            if (component?.datasourceItem) {
+                const item = await itemsRepository.getItem(component.datasourceItem);
+                if (!item)
+                    return;
+                const field = item.fields.find((f) => component.datasourceItem?.renderedFieldIds?.includes(f.id) &&
+                    (f.type === "single-line text" ||
+                        f.type === "multi-line text" ||
+                        f.type === "rich text"));
+                if (field) {
+                    setFocusedField(field.descriptor);
+                    setFocusFieldComponentId(undefined);
+                }
+            }
+        }
+        if (mode === "edit")
+            setFocus();
+    }, [page]);
+    // Sync state to URL (only after initial load)
+    useEffect(() => {
+        if (isInitialLoad || !currentItemDescriptor)
+            return;
+        const current = new URLSearchParams(window.location.search);
+        if (current.get("itemid") !== currentItemDescriptor?.id) {
+            current.set("itemid", currentItemDescriptor.id);
+        }
+        if (current.get("lang") !== currentItemDescriptor?.language) {
+            current.set("lang", currentItemDescriptor.language);
+        }
+        if (current.get("version") !== currentItemDescriptor?.version.toString()) {
+            current.set("version", currentItemDescriptor.version.toString());
+        }
+        if (current.get("view") !== viewName) {
+            current.set("view", viewName);
+        }
+        if (!compareMode) {
+            current.delete("compare");
+            current.delete("compareLanguage");
+            current.delete("compareVersion");
+            current.delete("compareDevice");
+        }
+        else {
+            current.set("compare", "true");
+        }
+        current.set("mode", mode);
+        // Handle fullscreen parameter
+        if (pageViewContext.fullscreen) {
+            current.set("fullscreen", "true");
+        }
+        else {
+            current.delete("fullscreen");
+        }
+        // Handle wizard parameter
+        if (currentWizardId) {
+            current.set("wizardid", currentWizardId);
+        }
+        else {
+            current.delete("wizardid");
+        }
+        // Use the actual browser pathname (including any basePath like /parhelia)
+        // so we don't accidentally drop the base segment when updating the URL
+        const browserPathname = typeof window !== "undefined" ? window.location.pathname : pathname;
+        const newUrl = `${browserPathname}?${current.toString()}`;
+        const oldUrl = `${browserPathname}${window.location.search}`;
+        if (newUrl !== oldUrl) {
+            window.history.pushState(null, "", newUrl);
+        }
+    }, [
+        currentItemDescriptor,
+        viewName,
+        compareMode,
+        mode,
+        isInitialLoad,
+        pathname,
+        router,
+        pageViewContext.fullscreen,
+        currentWizardId,
+    ]);
+    useEffect(() => {
+        async function load() {
+            if (!currentItemDescriptor)
+                return;
+            const item = await itemsRepository.getItem(currentItemDescriptor);
+            setContentEditorItem(item);
+            if (!item)
+                return;
+            if (contentEditorItem?.descriptor.id === currentItemDescriptor.id &&
+                contentEditorItem?.descriptor.language ===
+                    currentItemDescriptor.language &&
+                contentEditorItem?.descriptor.version !== item.version) {
+                showInfoToast({
+                    summary: "New version!",
+                    details: "New version of item loaded",
+                });
+            }
+        }
+        load();
+    }, [itemsRepository.revision]);
+    const addToBrowseHistory = useCallback((item) => {
+        const historyEntry = {
+            path: item.path || "unknown",
+            name: item.name || "unknown",
+            language: item.language,
+            templateName: item.templateName,
+            id: item.id,
+            hasLayout: item.hasLayout,
+            icon: item.icon,
+            version: item.version,
+        };
+        setBrowseHistory((history) => {
+            const newItem = item;
+            if (!newItem)
+                return history;
+            const newHistory = [
+                historyEntry,
+                ...history
+                    .filter((x) => x.id !== newItem.id || x.language !== newItem.language)
+                    .slice(0, 25),
+            ];
+            return newHistory;
+        });
+    }, [browseHistory, setBrowseHistory]);
+    // Add entry to navigation history (view + item combination)
+    const addNavigationEntry = useCallback((view, item) => {
+        const navEntry = {
+            viewName: view,
+            item: item
+                ? {
+                    id: item.id,
+                    language: item.language,
+                    version: item.version,
+                }
+                : undefined,
+            timestamp: Date.now(),
+            displayName: view,
+            itemName: item?.name,
+            itemPath: item?.path,
+            itemIcon: item?.icon,
+        };
+        setNavigationHistory((history) => {
+            // Remove duplicates with same view + item identity (including version),
+            // and also handle entries with no item (both undefined)
+            const filtered = history.filter((entry) => {
+                const sameView = entry.viewName === view;
+                const bothNoItem = !entry.item && !item;
+                const sameItem = !!entry.item &&
+                    !!item &&
+                    entry.item.id === item.id &&
+                    entry.item.language === item.language &&
+                    entry.item.version === item.version;
+                return !(sameView && (bothNoItem || sameItem));
+            });
+            // Add new entry at the beginning and limit to 25 items
+            return [navEntry, ...filtered].slice(0, 25);
+        });
+    }, []);
+    const loadItem = useCallback(async (itemToLoad, options) => {
+        if (typeof itemToLoad === "string")
+            itemToLoad = {
+                id: itemToLoad,
+                language: contentEditorItem?.language || "en",
+                version: 0,
+            };
+        const item = await itemsRepository.getItem(itemToLoad);
+        if (!item) {
+            return undefined;
+        }
+        if (!options?.skipViewChange &&
+            ((!item.hasLayout && viewName === "page-editor") ||
+                viewName == "splash-screen" ||
+                viewName == "control-center")) {
+            setViewName("content-tree");
+        }
+        // ensure this is object has no additional properties
+        itemToLoad = getItemDescriptor(itemToLoad);
+        // Set state for the item (URL will be synced automatically by the state-to-URL effect)
+        setCurrentItemDescriptor(itemToLoad);
+        setContentEditorItem(item);
+        setSelection([]);
+        // Load history and add to browse history
+        loadHistory(itemToLoad);
+        if (options?.addToBrowseHistory ||
+            options?.addToBrowseHistory === undefined) {
+            addToBrowseHistory(item);
+            // Also add to navigation history with current view (unless skipped)
+            if (!options?.skipNavigationHistory) {
+                addNavigationEntry(viewName, item);
+            }
+        }
+        return item;
+    }, [
+        itemsRepository,
+        setContentEditorItem,
+        viewName,
+        loadHistory,
+        addToBrowseHistory,
+        addNavigationEntry,
+    ]);
+    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") &&
+            !configuration.forceFullscreen)
+            setShowFullscreenHint(true);
+    }, [pageViewContext.fullscreen, configuration.forceFullscreen]);
+    const state = {
+        page,
+        configuration,
+        selection,
+        setSelection,
+        loadItem,
+        addToEditHistory,
+        setLockedField,
+        contentEditorItem,
+        sessionId,
+        requestRefresh,
+        lockedField,
+        itemsRepository,
+        user,
+        editHistory,
+        refreshHistory,
+        suggestedEdits,
+        setSuggestedEdits,
+        mode,
+        setFocusFieldComponentId,
+        setInsertMode,
+    };
+    useEffect(() => {
+        if (currentOverlay !== "fields")
+            fieldEditorPopupRef.current?.close();
+        if (currentOverlay !== "context-menu")
+            contextMenuRef.current?.close({});
+    }, [currentOverlay]);
+    useEffect(() => {
+        loadItemVersions();
+    }, [currentItemDescriptor]);
+    const loadItemVersions = useCallback(async () => {
+        if (!currentItemDescriptorRef.current) {
+            setItemVersions([]);
+            setItemLanguages([]);
+            return;
+        }
+        const result = await getLanguagesAndVersions(currentItemDescriptorRef.current);
+        if (!result?.data) {
+            setItemVersions([]);
+            setItemLanguages([]);
+            showErrorToast({
+                summary: "Error",
+                details: "Failed to load item versions",
+            });
+            return;
+        }
+        const v = [...result.data.versions].reverse() || [];
+        setItemVersions(v);
+        setItemLanguages(result.data.languages);
+    }, [currentItemDescriptorRef.current, setItemVersions, setItemLanguages]);
+    const showErrorToast = useCallback(({ summary, details }) => {
+        toast.error(details || summary || "An error occurred");
+    }, []);
+    const showInfoToast = useCallback(({ summary, details }) => {
+        toast.info(details || summary || "Information");
+    }, []);
+    const onOperationExecuted = useCallback((op) => {
+        // Replace the operation in edit history with the executed operation
+        setEditHistory((prev) => {
+            const existingOpIndex = prev.findIndex((x) => x.id === op.id);
+            if (existingOpIndex >= 0) {
+                const next = [...prev];
+                next[existingOpIndex] = op;
+                return next;
+            }
+            return prev;
+        });
+        if (contentEditorItem?.id === op.mainItem?.id &&
+            contentEditorItem?.language === op.mainItem?.language &&
+            contentEditorItem?.version === op.mainItem?.version) {
+            setInsertMode(false);
+        }
+    }, [contentEditorItem, setEditHistory, setInsertMode]);
+    const ui = {
+        showErrorToast,
+        confirmationDialogRef,
+        onOperationExecuted,
+    };
+    // moved to useMediaSelector
+    const { workboxItems } = useWorkbox({
+        page,
+        currentItemDescriptor,
+        validate,
+    });
+    // WebSocket message handler and connection
+    const messageHandler = useSocketMessageHandler({
+        sessionId,
+        setWebSocketMessages,
+        setActiveSessions,
+        sendClientInfo,
+        itemsRepository,
+        currentItemDescriptor,
+        loadItem,
+        loadItemVersions,
+        setComments,
+        setSuggestedEdits,
+        setActiveFieldActions,
+        setQuotaInfo,
+        requestRefresh,
+        currentItemRef,
+        loadHistory,
+        addRecentEdit,
+        socketMessageListeners,
+        isItemUsedInCurrentPage,
+    });
+    const { socketRef: socketInstanceRef } = useEditorWebSocket({
+        sessionId,
+        onMessage: messageHandler,
+        onOpen: () => console.log("Connected!"),
+        onError: (error) => console.error("WebSocket error:", error),
+        connectSocket,
+        requestQuota,
+        sendClientInfo,
+    });
+    const switchView = (viewName, options) => {
+        async function switchView() {
+            if (currentView?.beforeClose && !options?.skipConfirmation) {
+                const result = await currentView.beforeClose(editContext);
+                if (!result)
+                    return;
+            }
+            // Track previous view name before switching
+            setPreviousViewName(editContext.viewName);
+            // Add to navigation history with current item (unless explicitly skipped)
+            if (!options?.skipNavigationHistory) {
+                addNavigationEntry(viewName, contentEditorItem);
+            }
+            if (typeof document.startViewTransition === "function") {
+                document.startViewTransition(() => {
+                    flushSync(() => {
+                        setViewName(viewName);
+                    });
+                });
+            }
+            else {
+                setViewName(viewName);
+            }
+        }
+        switchView();
+    };
+    // Listen for switch-view commands from agents via websocket
+    useEffect(() => {
+        const handleSwitchView = (message) => {
+            if (message.type === "switch-view" && message.payload?.viewName) {
+                try {
+                    switchView(message.payload.viewName);
+                }
+                catch (error) {
+                    console.error("Error switching view:", error);
+                }
+            }
+        };
+        const unsubscribe = addSocketMessageListener(handleSwitchView);
+        return () => {
+            unsubscribe();
+        };
+    }, [addSocketMessageListener, switchView]);
+    const [dialog, setDialog] = useState(null);
+    const openDialog = useCallback((Component, props) => {
+        // Ensure any existing overlays (e.g., context menu) are closed before opening dialogs
+        try {
+            setCurrentOverlay(undefined);
+        }
+        catch { }
+        return new Promise((resolve) => {
+            const handleClose = (result) => {
+                setDialog(null);
+                resolve(result);
+            };
+            // Delay mounting one tick to let overlay closure propagate
+            setTimeout(() => {
+                setDialog(_jsx(Component, { ...props, onClose: handleClose }));
+            }, 0);
+        });
+    }, [setDialog, setCurrentOverlay]);
+    const executeCommand = useCallback(async ({ command, event, data, }) => {
+        if (!editContextRef.current)
+            return;
+        const context = {
+            editContext: editContextRef.current,
+            pathname,
+            router,
+            searchParams,
+            openDialog: openDialog,
+            event,
+            data,
+        };
+        const result = await command.execute(context);
+        return result;
+    }, [editContextRef, pathname, router, searchParams, openDialog]);
+    const operationsContext = getOperationsContext(state, ui);
+    const operations = operationsContext.ops;
+    // Shared focused field setter with lock handling (used in both contexts)
+    const setFocusedFieldWithLock = useCallback(async (field, requestLock) => {
+        console.log("[setFocusedFieldWithLock] Called with:", {
+            field: field
+                ? {
+                    fieldId: field.fieldId,
+                    itemId: field.item?.id,
+                    language: field.item?.language,
+                    version: field.item?.version,
+                }
+                : undefined,
+            requestLock,
+            ignoreBlur,
+            timestamp: new Date().toISOString(),
+        });
+        if (field) {
+            setIgnoreBlur(true);
+            setTimeout(() => {
+                setIgnoreBlur(false);
+            }, 20);
+            setFocusedField({ ...field });
+            if (requestLock) {
+                console.log("[setFocusedFieldWithLock] Calling operations.ensureLock for field:", field.fieldId);
+                const lockResult = (await operations.ensureLock(field)) || false;
+                console.log("[setFocusedFieldWithLock] ensureLock result:", lockResult);
+                return lockResult;
+            }
+        }
+        else {
+            console.log("[setFocusedFieldWithLock] Clearing focused field, ignoreBlur:", ignoreBlur);
+            if (!ignoreBlur) {
+                setFocusedField(undefined);
+                console.log("[setFocusedFieldWithLock] Clearing lockedField state");
+                setLockedField(undefined); // Clear client-side lock state
+                releaseFieldLocks(sessionId);
+            }
+        }
+        return true;
+    }, [operations, ignoreBlur, sessionId]);
+    // Quick switcher handlers
+    const showQuickSwitcher = useCallback((show) => {
+        console.log(`[QuickSwitcher] showQuickSwitcher called: show=${show}, historyLength=${navigationHistory.length}`);
+        if (show && navigationHistory.length > 1) {
+            setQuickSwitcherVisible(true);
+            // Start with index 1 (second entry - previous entry) for quick switching
+            setQuickSwitcherSelectedIndex(1);
+            console.log("[QuickSwitcher] Switcher opened, selected index: 1");
+            console.log("[QuickSwitcher] Navigation history:", navigationHistory.map((h, i) => `[${i}] ${h.displayName}`));
+        }
+        else {
+            setQuickSwitcherVisible(false);
+            console.log("[QuickSwitcher] Switcher closed");
+        }
+    }, [navigationHistory]);
+    const cycleQuickSwitcher = useCallback((direction) => {
+        console.log(`[QuickSwitcher] cycleQuickSwitcher: direction=${direction}, visible=${quickSwitcherVisible}`);
+        if (!quickSwitcherVisible)
+            return;
+        const maxItems = Math.min(5, navigationHistory.length);
+        setQuickSwitcherSelectedIndex((current) => {
+            let newIndex = current;
+            // Determine grid layout (responsive columns)
+            // Matches the grid in QuickItemSwitcher: 2/3/4/5 columns
+            const getColumnsForWidth = () => {
+                const width = window.innerWidth;
+                if (width >= 1280)
+                    return 5; // xl
+                if (width >= 1024)
+                    return 4; // lg
+                if (width >= 768)
+                    return 3; // md
+                return 2; // default
+            };
+            const columns = getColumnsForWidth();
+            switch (direction) {
+                case "next":
+                    newIndex = (current + 1) % maxItems;
+                    break;
+                case "prev":
+                    newIndex = (current - 1 + maxItems) % maxItems;
+                    break;
+                case "down":
+                    newIndex = current + columns;
+                    if (newIndex >= maxItems) {
+                        // Wrap to first row
+                        newIndex = current % columns;
+                    }
+                    break;
+                case "up":
+                    newIndex = current - columns;
+                    if (newIndex < 0) {
+                        // Wrap to last row
+                        const currentCol = current % columns;
+                        const rows = Math.ceil(maxItems / columns);
+                        newIndex = (rows - 1) * columns + currentCol;
+                        if (newIndex >= maxItems) {
+                            newIndex = maxItems - columns + currentCol;
+                        }
+                    }
+                    break;
+            }
+            console.log(`[QuickSwitcher] Cycling from index ${current} to ${newIndex} (${columns} columns)`);
+            return newIndex;
+        });
+    }, [quickSwitcherVisible, browseHistory]);
+    const handleQuickSwitcherSelect = useCallback((index) => {
+        console.log(`[QuickSwitcher] Selecting entry at index ${index}`);
+        const selectedEntry = navigationHistory[index];
+        if (selectedEntry) {
+            console.log(`[QuickSwitcher] Navigating to:`, selectedEntry);
+            // First switch view
+            if (selectedEntry.viewName !== viewName) {
+                // Avoid inserting a duplicate navigation entry; we'll explicitly move the
+                // selected one to the front below
+                switchView(selectedEntry.viewName, {
+                    skipConfirmation: true,
+                    skipNavigationHistory: true,
+                });
+            }
+            // Then load item if it exists and is different from current
+            if (selectedEntry.item) {
+                const isDifferentItem = !contentEditorItem ||
+                    contentEditorItem.id !== selectedEntry.item.id ||
+                    contentEditorItem.language !== selectedEntry.item.language ||
+                    contentEditorItem.version !== selectedEntry.item.version;
+                if (isDifferentItem) {
+                    console.log(`[QuickSwitcher] Loading different item:`, selectedEntry.item);
+                    loadItem({
+                        id: selectedEntry.item.id,
+                        language: selectedEntry.item.language,
+                        version: selectedEntry.item.version,
+                    }, {
+                        addToBrowseHistory: false,
+                        skipViewChange: true,
+                        // Avoid inserting an extra nav entry; we move the selected one below
+                        skipNavigationHistory: true,
+                    });
+                }
+                else {
+                    console.log(`[QuickSwitcher] Same item, skipping reload`);
+                }
+            }
+            // Move selected entry to first position in navigation history by identity
+            setNavigationHistory((history) => {
+                const filtered = history.filter((entry) => {
+                    const sameView = entry.viewName === selectedEntry.viewName;
+                    const bothNoItem = !entry.item && !selectedEntry.item;
+                    const sameItem = !!entry.item &&
+                        !!selectedEntry.item &&
+                        entry.item.id === selectedEntry.item.id &&
+                        entry.item.language === selectedEntry.item.language &&
+                        entry.item.version === selectedEntry.item.version;
+                    return !(sameView && (bothNoItem || sameItem));
+                });
+                return [selectedEntry, ...filtered].slice(0, 25);
+            });
+        }
+        setQuickSwitcherVisible(false);
+    }, [
+        navigationHistory,
+        loadItem,
+        switchView,
+        viewName,
+        contentEditorItem,
+        setNavigationHistory,
+    ]);
+    const { handleKeyDown } = useKeyboardNavigation({
+        editContextRef,
+        operations,
+        pageViewContext,
+        configuration,
+        contentEditorItem,
+        browseHistory,
+        loadItem,
+        showInfoToast,
+        showErrorToast,
+        executeCommand,
+        showQuickSwitcher,
+        cycleQuickSwitcher,
+    });
+    useGlobalEditorKeyDown(handleKeyDown);
+    // Global keydown/keyup handler to manage quick switcher
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!quickSwitcherVisible)
+                return;
+            // Enter to select and close
+            if (event.key === "Enter") {
+                event.preventDefault();
+                handleQuickSwitcherSelect(quickSwitcherSelectedIndex);
+            }
+        };
+        const handleKeyUp = (event) => {
+            // Close on Escape without selecting
+            if (event.key === "Escape" && quickSwitcherVisible) {
+                setQuickSwitcherVisible(false);
+            }
+            // Close and select when releasing Ctrl, Alt, or Meta (Win key)
+            if ((event.key === "Control" ||
+                event.key === "Alt" ||
+                event.key === "Meta") &&
+                quickSwitcherVisible) {
+                // Small delay to ensure the key release is not part of the initial trigger
+                setTimeout(() => {
+                    handleQuickSwitcherSelect(quickSwitcherSelectedIndex);
+                }, 50);
+            }
+        };
+        if (typeof window !== "undefined") {
+            window.addEventListener("keydown", handleKeyDown);
+            window.addEventListener("keyup", handleKeyUp);
+            return () => {
+                window.removeEventListener("keydown", handleKeyDown);
+                window.removeEventListener("keyup", handleKeyUp);
+            };
+        }
+    }, [
+        quickSwitcherVisible,
+        quickSwitcherSelectedIndex,
+        handleQuickSwitcherSelect,
+    ]);
+    // Global ctrl+click handler for GUID detection and navigation
+    useEffect(() => {
+        const isGuid = (text) => {
+            // Match GUID patterns with or without braces/curly brackets
+            const guidPattern = /^[\{\(]?[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}[\}\)]?$/;
+            return guidPattern.test(text.trim());
+        };
+        const extractGuidFromText = (text) => {
+            // Remove quotes, whitespace, and other JSON formatting characters
+            const cleaned = text.replace(/["'\s]/g, "");
+            if (isGuid(cleaned)) {
+                return cleaned;
+            }
+            // Try to find GUID within the text using regex
+            const guidPattern = /[\{\(]?[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}[\}\)]?/;
+            const match = text.match(guidPattern);
+            return match ? match[0] : null;
+        };
+        const getTextFromElement = (element) => {
+            if (!element)
+                return null;
+            // First, check if there's a text selection - user might have selected the GUID
+            const selection = window.getSelection();
+            if (selection && !selection.isCollapsed) {
+                const selectedText = selection.toString();
+                const guid = extractGuidFromText(selectedText);
+                if (guid)
+                    return guid;
+            }
+            // Try to get text content from the element itself
+            const textContent = element.textContent?.trim();
+            if (textContent) {
+                const guid = extractGuidFromText(textContent);
+                if (guid)
+                    return guid;
+            }
+            // Check if we clicked on a text node's parent
+            if (element.childNodes.length === 1) {
+                const firstChild = element.childNodes[0];
+                if (firstChild && firstChild.nodeType === Node.TEXT_NODE) {
+                    const text = firstChild.textContent?.trim();
+                    if (text) {
+                        const guid = extractGuidFromText(text);
+                        if (guid)
+                            return guid;
+                    }
+                }
+            }
+            // Walk up the parent tree to find a parent that might contain a GUID
+            // This helps with JSON viewers where the GUID is split across elements
+            let currentElement = element;
+            let depth = 0;
+            while (currentElement && depth < 5) {
+                const parentText = currentElement.textContent?.trim();
+                if (parentText && parentText.length < 200) {
+                    // Avoid huge text blocks
+                    const guid = extractGuidFromText(parentText);
+                    if (guid)
+                        return guid;
+                }
+                currentElement = currentElement.parentElement;
+                depth++;
+            }
+            // Try to find GUIDs in nearby text
+            const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null);
+            let node;
+            while ((node = walker.nextNode())) {
+                const text = node.textContent?.trim();
+                if (text) {
+                    const guid = extractGuidFromText(text);
+                    if (guid)
+                        return guid;
+                }
+            }
+            return null;
+        };
+        const handleCtrlClick = async (event) => {
+            // Only proceed if Ctrl (or Cmd on Mac) is pressed
+            if (!event.ctrlKey && !event.metaKey)
+                return;
+            const target = event.target;
+            const text = getTextFromElement(target);
+            if (text && isGuid(text)) {
+                event.preventDefault();
+                event.stopPropagation();
+                // Clean the GUID (remove braces/brackets)
+                const cleanedGuid = cleanId(text);
+                if (cleanedGuid) {
+                    try {
+                        // Try to load the item
+                        const item = await loadItem(cleanedGuid);
+                        if (item) {
+                            showInfoToast({
+                                summary: "Navigated to item",
+                                details: `Opened item: ${item.name}`,
+                            });
+                        }
+                        else {
+                            showErrorToast({
+                                summary: "Item not found",
+                                details: `Could not find item with ID: ${text}`,
+                            });
+                        }
+                    }
+                    catch (error) {
+                        console.error("Error loading item:", error);
+                        showErrorToast({
+                            summary: "Navigation error",
+                            details: `Failed to load item: ${text}`,
+                        });
+                    }
+                }
+            }
+        };
+        if (typeof document !== "undefined") {
+            document.addEventListener("click", handleCtrlClick, true);
+            return () => {
+                document.removeEventListener("click", handleCtrlClick, true);
+            };
+        }
+    }, [loadItem, showInfoToast, showErrorToast]);
+    useEffect(() => {
+        const handleGlobalBlur = () => {
+            operations.onFieldBlur?.();
+        };
+        if (typeof document !== "undefined") {
+            document.addEventListener("blur", handleGlobalBlur, true);
+            return () => {
+                document.removeEventListener("blur", handleGlobalBlur, true);
+            };
+        }
+    }, [operations.onFieldBlur]);
+    useEffect(() => {
+        if (mode === "suggestions") {
+            setShowSuggestedEdits(true);
+        }
+        else {
+            setShowSuggestedEdits(false);
+        }
+    }, [mode]);
+    const isReadOnly = !contentEditorItem ||
+        !contentEditorItem.canWriteItem ||
+        !contentEditorItem.canWriteLanguage ||
+        !contentEditorItem.canWriteWorkflow ||
+        // Block editing until server acknowledges client-info for the current item
+        (currentItemDescriptor ? !isClientInfoAcknowledged : false);
+    const updateUrl = useCallback((params) => {
+        const url = new URL(window.location.href);
+        const oldUrl = url.toString();
+        Object.entries(params).forEach(([key, value]) => {
+            if (value)
+                url.searchParams.set(key, value);
+            else
+                url.searchParams.delete(key);
+        });
+        const newUrl = url.toString();
+        router.push(newUrl, { scroll: false });
+    }, [router]);
+    // Calculate visible views separately to avoid circular dependency
+    const allViews = configuration.editor.views
+        ?.filter((x) => {
+        // For this calculation, we'll pass null for editContext since we're building it
+        // The visibility check will be recalculated after editContext is available
+        return !x.visible && !x.hidden;
+    })
+        .filter((x) => !userInfo.views ||
+        userInfo.views.map((view) => view.name).includes(x.name)) ?? [];
+    const pinnedViews = userInfo.preferences?.pinnedViews ||
+        configuration.editor.defaultPinnedViews ||
+        [];
+    const [pinnedSidebars, setPinnedSidebars] = useState(userInfo.preferences?.pinnedSidebars || []);
+    const visibleViews = allViews.filter((view) => 
+    // Always show selected view
+    view.name === viewName ||
+        // Show pinned views
+        pinnedViews.includes(view.name));
+    // Handle initial mode setup from URL (only on initial load)
+    useEffect(() => {
+        if (!isInitialLoad)
+            return;
+        const queryMode = searchParams.get("mode");
+        if (queryMode) {
+            setMode(queryMode);
+        }
+    }, [searchParams, isInitialLoad]);
+    // Add this new effect for initial fullscreen setup
+    useEffect(() => {
+        if (!isInitialLoad)
+            return;
+        const isFullscreen = searchParams.get("fullscreen") === "true";
+        if (isFullscreen !== pageViewContext.fullscreen) {
+            pageViewContext.setFullscreen(isFullscreen);
+        }
+    }, [searchParams, isInitialLoad, pageViewContext]);
+    // Simple registry for per-view context factories (e.g., GraphQL context)
+    // Stored outside the EditContext object via ref to avoid re-renders
+    if (!globalThis.__editorContextFactoriesRef) {
+        globalThis.__editorContextFactoriesRef = {
+            map: new Map(),
+        };
+    }
+    const factoriesRef = globalThis.__editorContextFactoriesRef;
+    const editContext = {
+        operations: operationsContext.ops,
+        itemsRepository,
+        configuration,
+        updateUrl,
+        openSplashScreen: () => {
+            const currentParams = new URLSearchParams(window.location.search);
+            const preservedParams = new URLSearchParams();
+            if (currentParams.get("fullscreen") === "true") {
+                preservedParams.set("fullscreen", "true");
+            }
+            const queryString = preservedParams.toString();
+            // Use the current Next.js pathname so this works correctly with or without
+            // a configured basePath (e.g. basePath="/parhelia" in the static export).
+            // Avoid hard-coding "/parhelia" here because Next will automatically
+            // prepend the basePath when navigating.
+            const basePath = pathname || "/";
+            const newUrl = queryString ? `${basePath}?${queryString}` : basePath;
+            router.push(newUrl, { scroll: false });
+        },
+        item: contentEditorItem || page?.item,
+        itemLanguages,
+        itemVersions,
+        sessionId: sessionId,
+        readonly: isReadOnly,
+        selection,
+        select: (ids) => {
+            try {
+                console.log("[DND][EditContext] select", ids);
+            }
+            catch { }
+            setSelection(ids);
+        },
+        selectedForInsertion,
+        setSelectedForInsertion,
+        dragObject,
+        workboxItems,
+        requestRefresh,
+        refreshCompletedFlag,
+        openCreatePageDialog: () => {
+            const current = new URLSearchParams(searchParams.toString());
+            current.delete("version");
+            current.delete("itemid");
+            current.delete("view");
+            current.set("create", "1");
+            const newUrl = `${pathname}?${current.toString()}`;
+            const oldUrl = `${pathname}?${searchParams.toString()}`;
+            router.push(newUrl, { scroll: false });
+        },
+        selectMedia: media.selectMedia,
+        showToast: (message) => {
+            toast(message);
+        },
+        scrollIntoView,
+        setScrollIntoView,
+        focusedField,
+        setFocusedField: setFocusedFieldWithLock,
+        renderedFields,
+        setRenderedFields,
+        getComponentCommands: async (components) => {
+            return await getComponentCommands(components, editContext);
+        },
+        dragStart: (dragObject) => {
+            setDragObject(dragObject);
+        },
+        dragEnd: () => {
+            setDragObject(undefined);
+        },
+        droppedInPlaceholder: async (placeholderKey, index, spotPositionElement, spotPositionAnchor, insertOption) => {
+            if ((!dragObject && !insertOption) || !page)
+                return;
+            setDragObject(undefined);
+            if (spotPositionElement && spotPositionAnchor) {
+                setInserting({
+                    positionElement: spotPositionElement,
+                    positionAnchor: spotPositionAnchor,
+                });
+            }
+            const placeholderKeyComponents = placeholderKey.split("_");
+            const parentId = placeholderKeyComponents.length === 1
+                ? undefined
+                : placeholderKeyComponents[1];
+            if (parentId)
+                setSelection([parentId]);
+            let op;
+            if (!currentItemDescriptorRef.current)
+                return;
+            if (insertOption) {
+                // Clear any selected component type for insertion once the component
+                // has been dropped into a placeholder. This ensures that insert mode
+                // can exit cleanly and the editor header updates from "Add Component"
+                // to the actual component name after the operation completes.
+                setSelectedForInsertion("");
+                operations.addComponent(insertOption.typeId, placeholderKey, index, currentItemDescriptorRef.current);
+                return;
+            }
+            if (!dragObject)
+                return;
+            if (dragObject && dragObject.type == "template") {
+                operations.addComponent(dragObject.typeId, placeholderKey, index, currentItemDescriptorRef.current);
+                return;
+            }
+            console.log("dragObject", dragObject);
+            if (dragObject.type == "component" ||
+                (dragObject.type == "items" && dragObject.items)) {
+                const parentComponent = parentId && page ? getComponentById(parentId, page) : null;
+                if (dragObject.type == "items" && dragObject.items) {
+                    op = {
+                        type: "link-component",
+                        mainItem: page.item.descriptor,
+                        parent: parentId && {
+                            id: parentId,
+                            language: page.item.descriptor.language,
+                            version: page.item.descriptor.version,
+                            name: parentComponent?.name,
+                        },
+                        placeholderKey,
+                        placeholderIndex: index,
+                        date: new Date().toISOString(),
+                        id: uuid(),
+                        linkedComponentItem: dragObject.items[0],
+                        description: "Link component",
+                    };
+                    console.log("op", op);
+                }
+                else {
+                    const componentIds = dragObject.components?.map((c) => c.id) ?? [];
+                    if (componentIds.length === 0)
+                        return;
+                    op = {
+                        type: "move-component",
+                        mainItem: page.item.descriptor,
+                        parent: parentId && {
+                            id: parentId,
+                            language: page.item.descriptor.language,
+                            version: page.item.descriptor.version,
+                        },
+                        placeholderKey,
+                        placeholderIndex: index,
+                        componentIds,
+                        date: new Date().toISOString(),
+                        id: uuid(),
+                        description: "Move component",
+                    };
+                }
+            }
+            if (op)
+                operations.executeEditOperation(op);
+        },
+        page,
+        triggerFieldAction: async (fieldDescriptor, actionButton, parameters) => {
+            const field = await itemsRepository.getField(fieldDescriptor);
+            if (!field)
+                return;
+            const op = {
+                field: fieldDescriptor,
+                //  actionButton,
+                label: actionButton.label,
+                state: "running",
+            };
+            const fieldItem = fieldDescriptor.item;
+            if ("clientAction" in actionButton) {
+                await actionButton.clientAction({
+                    field,
+                    editContext,
+                    //dialogContext,
+                });
+            }
+            console.log("Field action before setActiveFieldActions");
+            if (actionButton.action) {
+                setActiveFieldActions((prevFieldActions) => {
+                    const isSameField = (x) => x.field.fieldId == fieldDescriptor.fieldId &&
+                        x.field.item.id == fieldItem.id &&
+                        x.field.item.language == fieldItem.language &&
+                        x.field.item.version == fieldItem.version;
+                    const existing = prevFieldActions.find(isSameField);
+                    // Preserve any existing state/message (e.g., an early websocket error)
+                    // to avoid overwriting it with a stale "running" state
+                    const mergedOp = existing
+                        ? {
+                            ...op,
+                            state: existing.state,
+                            message: existing.message,
+                            label: existing.label ?? op.label,
+                        }
+                        : op;
+                    return [...prevFieldActions.filter((x) => !isSameField(x)), mergedOp];
+                });
+                console.log("Field action after setActiveFieldActions");
+                try {
+                    await executeFieldServerAction(fieldDescriptor.item, fieldDescriptor.fieldId, contentEditorItem.descriptor, actionButton.action, editContext.sessionId, selectedRange?.text || "", parameters || {}, (data) => {
+                        console.log("Field action progress", data);
+                        // Update progress message if available
+                        if (data?.responseText) {
+                            op.message = data.responseText;
+                            setActiveFieldActions((prevFieldActions) => [
+                                ...prevFieldActions,
+                            ]);
+                        }
+                    });
+                    console.log("Field action completed", op);
+                    itemsRepository.refreshItems([fieldDescriptor.item]);
+                    // Only mark as success if no websocket error has been reported
+                    if (op.state === "running") {
+                        op.state = "success";
+                        // Auto-dismiss successful actions after a brief delay
+                        setTimeout(() => {
+                            setActiveFieldActions((prevFieldActions) => prevFieldActions.filter((x) => !(x.field.fieldId === fieldDescriptor.fieldId &&
+                                x.field.item.id === fieldDescriptor.item.id &&
+                                x.field.item.language === fieldDescriptor.item.language &&
+                                x.field.item.version === fieldDescriptor.item.version &&
+                                x.state === "success")));
+                        }, 500);
+                    }
+                    requestRefresh("immediate");
+                }
+                catch (error) {
+                    console.error("Field action failed", error);
+                    // Mark as failed and show error message
+                    op.state = "error";
+                    op.message =
+                        error instanceof Error ? error.message : "Field action failed";
+                    // Update the field action state to show error
+                    setActiveFieldActions((prevFieldActions) => {
+                        const isSameField = (x) => x.field.fieldId == fieldDescriptor.fieldId &&
+                            x.field.item.id == fieldItem.id &&
+                            x.field.item.language == fieldItem.language &&
+                            x.field.item.version == fieldItem.version;
+                        return [...prevFieldActions.filter((x) => !isSameField(x)), op];
+                    });
+                    // Auto-dismiss error after a longer delay
+                    setTimeout(() => {
+                        setActiveFieldActions((prevFieldActions) => prevFieldActions.filter((x) => !(x.field.fieldId === fieldDescriptor.fieldId &&
+                            x.field.item.id === fieldDescriptor.item.id &&
+                            x.field.item.language === fieldDescriptor.item.language &&
+                            x.field.item.version === fieldDescriptor.item.version)));
+                    }, 3000);
+                }
+            }
+        },
+        dismissFieldAction: (fieldDescriptor) => {
+            setActiveFieldActions((prevFieldActions) => prevFieldActions.filter((x) => !(x.field.fieldId === fieldDescriptor.fieldId &&
+                x.field.item.id === fieldDescriptor.item.id &&
+                x.field.item.language === fieldDescriptor.item.language &&
+                x.field.item.version === fieldDescriptor.item.version)));
+        },
+        activeFieldActions,
+        showContextMenu: (event, items) => {
+            contextMenuRef.current?.show(event, items);
+            setCurrentOverlay("context-menu");
+        },
+        updateContextMenu: (items) => {
+            contextMenuRef.current?.update(items);
+        },
+        showFieldEditorPopup: (fields, sections, ev) => {
+            setCurrentOverlay("fields");
+            fieldEditorPopupRef.current?.show(fields, sections, ev);
+        },
+        inserting,
+        validating,
+        validationResult,
+        contentEditorItem,
+        loadItem,
+        editHistory,
+        isRefreshing,
+        activeSessions,
+        unlockField: async () => {
+            console.log("[EditContext.unlockField] Clearing lockedField state");
+            setLockedField(undefined); // Clear client-side lock state
+            await releaseFieldLocks(sessionId);
+        },
+        isCommandDisabled: ({ command, data, }) => {
+            const props = {
+                editContext,
+                pathname,
+                router,
+                searchParams,
+                data,
+                openDialog,
+            };
+            return command.disabled(props);
+        },
+        executeCommand,
+        viewName,
+        previousViewName,
+        switchView,
+        pinnedSidebars,
+        toggleSidebarPin,
+        reorderPinnedSidebars,
+        compareMode,
+        setCompareMode,
+        view: currentView,
+        visibleViews,
+        pageView: pageViewContext,
+        componentDesignerComponent,
+        setComponentDesignerComponent,
+        componentDesignerRendering,
+        setComponentDesignerRendering,
+        insertMode,
+        setInsertMode,
+        currentOverlay,
+        setCurrentOverlay,
+        inlineEditingFieldElement,
+        setInlineEditingFieldElement,
+        lockedField,
+        timings,
+        setTimings,
+        selectedRange,
+        setSelectedRange,
+        confirmationDialogRef,
+        confirm: (props) => {
+            confirmationDialogRef.current?.confirm(props);
+        },
+        showMessageDialog: (props) => {
+            confirmationDialogRef.current?.confirm({
+                header: props.header,
+                message: props.message,
+                accept: () => { },
+                acceptLabel: "Ok",
+            });
+        },
+        browseHistory,
+        setCenterPanelView,
+        handleKeyDown,
+        startTour,
+        addSocketMessageListener,
+        currentItemDescriptor,
+        compareTo,
+        setCompareTo,
+        revision,
+        selectedComment,
+        setSelectedComment,
+        comments,
+        availableCommentTags,
+        loadComments,
+        setComments,
+        showComments,
+        setShowComments,
+        showResolvedComments,
+        setShowResolvedComments,
+        addComment: async () => {
+            const descriptor = contentEditorItem?.descriptor;
+            if (!descriptor)
+                return;
+            const itemId = focusedFieldRef.current?.item.id ||
+                (selection.length > 0 ? selection[0] : undefined) ||
+                descriptor.id;
+            if (!itemId)
+                return;
+            const language = descriptor.language;
+            const version = descriptor.version;
+            const getFieldName = async () => {
+                if (!focusedFieldRef.current)
+                    return "";
+                const field = await itemsRepository.getField(focusedFieldRef.current);
+                return field?.name;
+            };
+            const getItemName = async () => {
+                const item = await itemsRepository.getItem({
+                    id: itemId,
+                    language,
+                    version,
+                });
+                return item?.name;
+            };
+            const newComment = {
+                id: uuid(),
+                isNew: true,
+                itemId,
+                itemName: await getItemName(),
+                fieldId: focusedFieldRef.current?.fieldId,
+                fieldName: await getFieldName(),
+                mainItemId: descriptor.id,
+                language,
+                version,
+                position: 0,
+                rangeStart: selectedRange?.startOffset || 0,
+                rangeEnd: selectedRange?.endOffset || 0,
+                author: user?.name,
+                authorDisplayName: user?.fullName,
+                date: new Date().toISOString(),
+            };
+            setComments([newComment, ...comments]);
+            setSelectedComment(newComment);
+            setShowComments(true);
+        },
+        mode,
+        setMode,
+        user,
+        reviews,
+        statusMessage,
+        setStatusMessage,
+        suggestedEdits,
+        showSuggestedEdits,
+        setShowSuggestedEdits,
+        showSuggestedEditsDiff,
+        setShowSuggestedEditsDiff,
+        enableCompletions,
+        setEnableCompletions,
+        showComponentNavigator,
+        setShowComponentNavigator: handleSetShowComponentNavigator,
+        showAgentsPanel,
+        setShowAgentsPanel: handleSetShowAgentsPanel,
+        activeEditorTab,
+        setActiveEditorTab,
+        showLayoutComponents,
+        setShowLayoutComponents: handleSetShowLayoutComponents,
+        quotaInfo,
+        isQuotaExceeded: isQuotaExceeded(),
+        getQuotaWarningMessage,
+        isMobile,
+        openDialog,
+        webSocketMessages,
+        clearWebSocketMessages: () => setWebSocketMessages([]),
+        userInfo: userInfo,
+        parheliaSettings,
+        userPreferences,
+        setUserPreferences,
+        currentWizardId,
+        setCurrentWizardId,
+        favorites,
+        loadFavorites,
+        isQuickSwitcherVisible: quickSwitcherVisible,
+        // Context factory registry methods
+        registerContextFactory: (name, factory) => {
+            try {
+                factoriesRef.map.set(name, factory);
+            }
+            catch { }
+        },
+        unregisterContextFactory: (name) => {
+            try {
+                factoriesRef.map.delete(name);
+            }
+            catch { }
+        },
+        getContextFactory: (name) => {
+            try {
+                return factoriesRef.map.get(name);
+            }
+            catch {
+                return undefined;
+            }
+        },
+    };
+    // CRITICAL: Assign editContext to ref so keyboard handlers can access it
+    useEffect(() => {
+        editContextRef.current = editContext;
+    }, [editContext]);
+    const fieldsEditContext = {
+        modifiedFields,
+        recentEdits,
+        clearModifiedFields: () => {
+            fieldModificationStore.clear();
+        },
+        clearRecentEdits: () => {
+            setRecentEdits([]);
+        },
+        addRecentEdit,
+        focusedField,
+        setFocusedField: setFocusedFieldWithLock,
+        unlockField: async () => {
+            console.log("[FieldsEditContext.unlockField] Clearing lockedField state");
+            setLockedField(undefined); // Clear client-side lock state
+            await releaseFieldLocks(sessionId);
+        },
+        inlineEditingFieldElement,
+        setInlineEditingFieldElement,
+    };
+    // Debug: Track editContext changes
+    // const prevDependencies = useRef<any[]>([]);
+    // useEffect(() => {
+    //   // Create current dependencies array to match the useMemo dependency array
+    //   const currentDependencies = [
+    //     operations,
+    //     itemsRepository,
+    //     configuration,
+    //     contentEditorItem,
+    //     page?.item,
+    //     itemLanguages,
+    //     itemVersions,
+    //     sessionId,
+    //     isReadOnly,
+    //     selection,
+    //     selectedForInsertion,
+    //     dragObject,
+    //     requestRefresh,
+    //     refreshCompletedFlag,
+    //     searchParams,
+    //     pathname,
+    //     router,
+    //     selectMedia,
+    //     scrollIntoView,
+    //     focusedField,
+    //     renderedFields,
+    //     inserting,
+    //     page,
+    //     activeFieldActions,
+    //     editHistory,
+    //     isRefreshing,
+    //     activeSessions,
+    //     currentView,
+    //     componentDesignerComponent,
+    //     componentDesignerRendering,
+    //     insertMode,
+    //     currentOverlay,
+    //     inlineEditingFieldElement,
+    //     lockedField,
+    //     selectedRange,
+    //     pageViewContext,
+    //     browseHistory,
+    //     workboxItems,
+    //     validating,
+    //     setCenterPanelView,
+    //     handleKeyDown,
+    //     setTimings,
+    //     timings,
+    //     startTour,
+    //     viewName,
+    //     compareMode,
+    //     setCompareMode,
+    //     addSocketMessageListener,
+    //     currentItemDescriptor,
+    //     compareTo,
+    //     setCompareTo,
+    //     revision,
+    //     comments,
+    //     setComments,
+    //     selectedComment,
+    //     setSelectedComment,
+    //     loadComments,
+    //     mode,
+    //     setMode,
+    //     user,
+    //     reviews,
+    //     statusMessage,
+    //     setStatusMessage,
+    //     suggestedEdits,
+    //     setSuggestedEdits,
+    //     showSuggestedEdits,
+    //     setShowSuggestedEdits,
+    //     showSuggestedEditsDiff,
+    //     setShowSuggestedEditsDiff,
+    //     showRightSidebar,
+    //     handleSetShowRightSidebar,
+    //     activeEditorTab,
+    //     setActiveEditorTab,
+    //     showLayoutComponents,
+    //     handleSetShowLayoutComponents,
+    //     quotaInfo,
+    //     isQuotaExceeded,
+    //     getQuotaWarningMessage,
+    //     isMobile,
+    //     openDialog,
+    //     pageWizard,
+    //     webSocketMessages,
+    //     currentWizardId,
+    //     setCurrentWizardId,
+    //     favorites,
+    //     loadFavorites,
+    //   ];
+    //   const dependencyNames = [
+    //     'operations',
+    //     'itemsRepository',
+    //     'configuration',
+    //     'contentEditorItem',
+    //     'page?.item',
+    //     'itemLanguages',
+    //     'itemVersions',
+    //     'sessionId',
+    //     'isReadOnly',
+    //     'selection',
+    //     'selectedForInsertion',
+    //     'dragObject',
+    //     'requestRefresh',
+    //     'refreshCompletedFlag',
+    //     'searchParams',
+    //     'pathname',
+    //     'router',
+    //     'selectMedia',
+    //     'scrollIntoView',
+    //     'focusedField',
+    //     'renderedFields',
+    //     'inserting',
+    //     'page',
+    //     'activeFieldActions',
+    //     'editHistory',
+    //     'isRefreshing',
+    //     'activeSessions',
+    //     'currentView',
+    //     'componentDesignerComponent',
+    //     'componentDesignerRendering',
+    //     'insertMode',
+    //     'currentOverlay',
+    //     'inlineEditingFieldElement',
+    //     'lockedField',
+    //     'selectedRange',
+    //     'pageViewContext',
+    //     'browseHistory',
+    //     'workboxItems',
+    //     'validating',
+    //     'setCenterPanelView',
+    //     'handleKeyDown',
+    //     'setTimings',
+    //     'timings',
+    //     'startTour',
+    //     'viewName',
+    //     'compareMode',
+    //     'setCompareMode',
+    //     'addSocketMessageListener',
+    //     'currentItemDescriptor',
+    //     'compareTo',
+    //     'setCompareTo',
+    //     'revision',
+    //     'comments',
+    //     'setComments',
+    //     'selectedComment',
+    //     'setSelectedComment',
+    //     'loadComments',
+    //     'mode',
+    //     'setMode',
+    //     'user',
+    //     'reviews',
+    //     'statusMessage',
+    //     'setStatusMessage',
+    //     'suggestedEdits',
+    //     'setSuggestedEdits',
+    //     'showSuggestedEdits',
+    //     'setShowSuggestedEdits',
+    //     'showSuggestedEditsDiff',
+    //     'setShowSuggestedEditsDiff',
+    //     'showRightSidebar',
+    //     'handleSetShowRightSidebar',
+    //     'activeEditorTab',
+    //     'setActiveEditorTab',
+    //     'showLayoutComponents',
+    //     'handleSetShowLayoutComponents',
+    //     'quotaInfo',
+    //     'isQuotaExceeded',
+    //     'getQuotaWarningMessage',
+    //     'isMobile',
+    //     'openDialog',
+    //     'pageWizard',
+    //     'webSocketMessages',
+    //     'currentWizardId',
+    //     'setCurrentWizardId',
+    //     'favorites',
+    //     'loadFavorites',
+    //   ];
+    //   // Check which dependencies have changed
+    //   const changedDependencies: string[] = [];
+    //   currentDependencies.forEach((dep, index) => {
+    //     if (prevDependencies.current[index] !== dep) {
+    //       const depName = dependencyNames[index];
+    //       if (depName) {
+    //         changedDependencies.push(depName);
+    //       }
+    //     }
+    //   });
+    //   if (changedDependencies.length > 0) {
+    //     console.group('🔍 EditContext Changed');
+    //     console.log('Changed dependencies:', changedDependencies);
+    //     console.log('Total dependencies tracked:', currentDependencies.length);
+    //     // Log details about the changed dependencies
+    //     changedDependencies.forEach(depName => {
+    //       const index = dependencyNames.indexOf(depName);
+    //       const oldValue = prevDependencies.current[index];
+    //       const newValue = currentDependencies[index];
+    //       console.log(`📝 ${depName}:`, {
+    //         from: oldValue,
+    //         to: newValue,
+    //         changed: oldValue !== newValue
+    //       });
+    //     });
+    //     console.groupEnd();
+    //   }
+    //   // Store current dependencies for next comparison
+    //   prevDependencies.current = currentDependencies;
+    //   editContextRef.current = editContext;
+    // }, [editContext]);
+    useEffect(() => {
+        fieldsEditContext.clearModifiedFields();
+    }, [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 }), _jsx(FullscreenControls, { device: pageViewContext.device, setDevice: (d) => pageViewContext.setDevice(d), canExit: !configuration.forceFullscreen, onExit: () => pageViewContext.setFullscreen(false), firstMobileDeviceName: configuration.devices[0]?.name })] }), 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(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(QuickItemSwitcher, { visible: quickSwitcherVisible, entries: navigationHistory.slice(0, 5), selectedIndex: quickSwitcherSelectedIndex, onSelect: handleQuickSwitcherSelect, onClose: () => setQuickSwitcherVisible(false) }), _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 })] }) }) }) }));
+}
+//# sourceMappingURL=EditorShell.js.map