@parhelia/core 0.1.12882 → 0.1.12884

package/dist/editor/client/EditorShell.js

@@ -34,6 +34,7 @@ import { post } from "../services/serviceHelper";
 import { PageViewerFrame } from "../page-viewer/PageViewerFrame";
 import { useItemsRepository } from "./itemsRepository";
 import { Spinner } from "../ui/Spinner";
+import { createSettleRegistry } from "../ui/animationSettle";
 import { cleanId } from "../utils/id-helper";
 import { useDebouncedCallback } from "use-debounce";
 import { useKeyboardNavigation } from "../utils/keyboardNavigation";
@@ -46,6 +47,7 @@ import { QuickItemSwitcher } from "../QuickItemSwitcher";
 import { useEditorSlotContext, } from "../views/editorSlotContext";
 import { getComments, getAvailableCommentTags, } from "../services/reviewsService";
 import { useReviews } from "../reviews/useReviews";
+import { COMMENT_TRANSIENT_ELEMENT_KEY, COMMENT_TRANSIENT_SELECTION_RECT, } from "../reviews/commentTransientSelection";
 import uuid from "react-uuid";
 import { flushSync } from "react-dom";
 import { getSuggestedEdits } from "../services/suggestedEditsService";
@@ -67,6 +69,24 @@ import { FeatureGate, LicenseFeatures, LicenseProvider, LicenseOverlay, } from "
 // nothing open" (param present with this value) so reload can honor the user's intent.
 const SIDEBAR_NONE_SENTINEL = "none";
 const sidebarUrlValue = (ids) => ids.length ? ids.join(",") : SIDEBAR_NONE_SENTINEL;
+// moved to hooks/useQuota
+function isUsableTextSelectionRange(range) {
+    return !!(range &&
+        range.text?.trim() &&
+        typeof range.startOffset === "number" &&
+        typeof range.endOffset === "number" &&
+        range.startOffset !== range.endOffset &&
+        range.fieldId &&
+        range.itemId);
+}
+function selectionRangeMatchesField(range, field) {
+    if (!range || !field)
+        return false;
+    return (cleanId(range.fieldId) === cleanId(field.fieldId) &&
+        cleanId(range.itemId) === cleanId(field.item.id) &&
+        (!range.language || range.language === field.item.language) &&
+        (typeof range.version !== "number" || range.version === field.item.version));
+}
 function reconcileSlotSettingsState(previous, slots, defaults) {
     const next = {};
     let changed = false;
@@ -134,8 +154,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const [focusedField, setFocusedField] = useState();
     const focusedFieldRef = useRef(undefined);
     const [selectedRange, setSelectedRange] = useState();
+    const lastTextSelectionRangeRef = useRef(undefined);
     const [validating, setValidating] = useState(false);
     const [inserting, setInserting] = useState();
+    const insertingSequenceRef = useRef(0);
     const [showFullscreenHint, setShowFullscreenHint] = useState(false);
     // Fullscreen is a shell-level UI mode. Keep it in EditorShell state so the shell can rerender
     // immediately when toggled, while still syncing the active slot's PageViewContext.fullscreen.
@@ -465,7 +487,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     // The very first URL sync after initial load should replaceState (not pushState)
     // so the initial bare URL isn't left as a dead-end history entry.
     const isFirstUrlSyncRef = useRef(true);
-    const [inlineEditingFieldElement, setInlineEditingFieldElement] = useState();
     const [lockedField, setLockedField] = useState();
     const [itemLanguages, setItemLanguages] = useState([]);
     const [itemVersions, setItemVersions] = useState([]);
@@ -556,9 +577,67 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const [isTourActive, setIsTourActive] = useState(tourRestoredFromUrl);
     // Track if tour was restored from URL to skip prepareAction on initial render
     const tourRestoredRef = useRef(tourRestoredFromUrl);
-    const [mode, setMode] = useState("edit");
+    const [mode, setModeState] = useState("edit");
+    const modeRef = useRef("edit");
+    modeRef.current = mode;
+    const modeChangeParticipantsRef = useRef(new Set());
+    const loadSuggestedEditsRef = useRef(async () => { });
+    const [modeTransitionRevision, setModeTransitionRevision] = useState(0);
     const [previewDate, setPreviewDate] = useState();
     const [layoutMode, setLayoutMode] = useState("final");
+    const registerModeChangeParticipant = useCallback((participant) => {
+        modeChangeParticipantsRef.current.add(participant);
+        return () => {
+            modeChangeParticipantsRef.current.delete(participant);
+        };
+    }, []);
+    const changeMode = useCallback(async (nextMode, options) => {
+        const previousMode = modeRef.current;
+        if (nextMode === previousMode)
+            return;
+        const participants = Array.from(modeChangeParticipantsRef.current);
+        for (const participant of participants) {
+            await participant.beforeModeChange?.(nextMode, previousMode, options);
+        }
+        for (const participant of participants) {
+            participant.clearInlineDedupe?.(nextMode, previousMode, options);
+        }
+        flushSync(() => {
+            modeRef.current = nextMode;
+            setModeState(nextMode);
+            setModeTransitionRevision((revision) => revision + 1);
+            if (nextMode !== "preview") {
+                setPreviewDate(undefined);
+            }
+            if (nextMode === "suggestions") {
+                setShowSuggestedEdits(true);
+                setWorkspaceId("editor");
+                setOpenSidebars((prev) => {
+                    if (prev.includes("feedback"))
+                        return prev;
+                    const next = [...prev, "feedback"];
+                    openSidebarsRef.current = next;
+                    return next;
+                });
+            }
+            else {
+                setShowSuggestedEdits(false);
+            }
+        });
+        if (nextMode === "suggestions") {
+            void loadSuggestedEditsRef.current();
+        }
+    }, []);
+    const setMode = useCallback((nextMode) => {
+        const resolvedMode = typeof nextMode === "function" ? nextMode(modeRef.current) : nextMode;
+        void changeMode(resolvedMode);
+    }, [changeMode]);
+    const workspaceShowsModeControls = !!configuration.editor.workspaces?.find((workspace) => workspace.id === workspaceId)?.toolbarFactory;
+    useEffect(() => {
+        if (workspaceShowsModeControls || mode !== "suggestions")
+            return;
+        void changeMode("edit", { reason: "mode-controls-hidden" });
+    }, [changeMode, mode, workspaceId, workspaceShowsModeControls]);
     useEffect(() => {
         if (mode !== "preview") {
             setPreviewDate(undefined);
@@ -577,6 +656,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         return userPreferences.showAgentsPanel ?? false;
     });
     const [editorFormHiddenDefault, setEditorFormHiddenDefault] = useState(userPreferences.editorFormHidden ?? false);
+    // Stable registry that lets layout owners (Splitter panels) report when a
+    // reveal surface finished animating, and lets callers await that signal.
+    const settleRegistry = useMemo(() => createSettleRegistry(), []);
     useEffect(() => {
         setSlotSettingsById((prev) => reconcileSlotSettingsState(prev, editorSlots, {
             showComponentNavigator: showComponentNavigatorDefault,
@@ -664,19 +746,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             setSelectedHelpSectionId(helpParam === "contents" || helpParam === "true" ? null : helpParam);
         }
     }, [searchParams, isInitialLoad]);
-    useEffect(() => {
-        if (mode === "suggestions") {
-            // Ensure we're in the editor workspace and open the feedback sidebar
-            setWorkspaceId("editor");
-            // Open the feedback sidebar if not already open
-            setOpenSidebars((prev) => {
-                if (!prev.includes("comments")) {
-                    return [...prev, "comments"];
-                }
-                return prev;
-            });
-        }
-    }, [mode]);
     useEffect(() => {
         if (focusedField &&
             selection.length > 0 &&
@@ -686,7 +755,19 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     }, [selection]);
     useEffect(() => {
         focusedFieldRef.current = focusedField;
+        const lastTextSelection = lastTextSelectionRangeRef.current;
+        if (focusedField &&
+            lastTextSelection &&
+            (focusedField.fieldId !== lastTextSelection.fieldId ||
+                focusedField.item.id !== lastTextSelection.itemId)) {
+            lastTextSelectionRangeRef.current = undefined;
+        }
     }, [focusedField]);
+    useEffect(() => {
+        if (isUsableTextSelectionRange(selectedRange)) {
+            lastTextSelectionRangeRef.current = selectedRange;
+        }
+    }, [selectedRange]);
     // Track the current page item descriptor for itemsRepository
     const [currentPageItem, setCurrentPageItem] = useState();
     // Create itemsRepository with current page item (will be updated when page loads)
@@ -1220,7 +1301,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const toggleHelpTerminal = useCallback((options) => {
         const isCurrentlyOpen = showHelpTerminal;
         const requestedTab = options?.activeTab;
-        if (isCurrentlyOpen && (!requestedTab || requestedTab === helpTerminalActiveTab)) {
+        if (isCurrentlyOpen &&
+            (!requestedTab || requestedTab === helpTerminalActiveTab)) {
             // Close when toggling the currently active help view.
             handleSetShowHelpTerminal(false);
         }
@@ -1423,9 +1505,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 }
                 // Handle mode changes — always set to avoid stale-closure mismatch
                 const urlMode = urlParams.get("mode");
-                if (urlMode) {
-                    setMode(urlMode);
-                }
+                setMode(urlMode ?? "edit");
                 // Handle fullscreen changes (shell-level state)
                 const isFullscreen = urlParams.get("fullscreen") === "true";
                 if (configuration.forceFullscreen) {
@@ -1705,6 +1785,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         const edits = result.data || [];
         setSuggestedEdits(edits);
     }, [item, searchParams]);
+    useEffect(() => {
+        loadSuggestedEditsRef.current = loadSuggestedEdits;
+    }, [loadSuggestedEdits]);
     const loadFavorites = useCallback(async () => {
         try {
             const result = await getAllFavorites();
@@ -1717,6 +1800,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             setFavorites([]);
         }
     }, []);
+    const refreshFavorites = useCallback(async (opts) => {
+        await loadFavorites();
+    }, [loadFavorites]);
     const page = activePageViewContext.page;
     const currentHistoryScope = useMemo(() => {
         const currentItem = item?.descriptor;
@@ -2113,6 +2199,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             globalThis.editorRefreshTimer = undefined;
         };
         if (mode === "immediate") {
+            if (refreshTimer) {
+                clearTimeout(refreshTimer);
+            }
             doRefresh();
             return;
         }
@@ -2306,7 +2395,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         else {
             current.set("compare", "true");
         }
-        current.set("mode", mode);
+        current.set("mode", workspaceShowsModeControls ? mode : "edit");
         // Handle fullscreen parameter
         if (fullscreen) {
             current.set("fullscreen", "true");
@@ -2762,6 +2851,11 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         if (currentOverlay !== "context-menu")
             contextMenuRef.current?.close({});
     }, [currentOverlay]);
+    const handleContextMenuOpenChange = useCallback((open) => {
+        if (open)
+            return;
+        setCurrentOverlay((overlay) => overlay === "context-menu" ? undefined : overlay);
+    }, []);
     useEffect(() => {
         loadItemVersions();
     }, [currentItemDescriptor]);
@@ -3011,9 +3105,35 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         };
     }, [promptSessionReconnect]);
     const sendSocketMessage = useCallback((message) => {
+        if (message.type === "caret-position" &&
+            message.payload?.source === "form-field") {
+            const payload = message.payload;
+            setRemoteCarets((current) => {
+                if (payload.offset == null) {
+                    if (!current[sessionId])
+                        return current;
+                    const next = { ...current };
+                    delete next[sessionId];
+                    return next;
+                }
+                if (!payload.fieldId || !payload.item) {
+                    return current;
+                }
+                return {
+                    ...current,
+                    [sessionId]: {
+                        sessionId,
+                        fieldId: payload.fieldId,
+                        item: payload.item,
+                        offset: payload.offset,
+                        value: payload.value,
+                    },
+                };
+            });
+        }
         // Routes over whichever transport is active (WebSocket preferred, SSE fallback).
         getEditorRealtime().send(message);
-    }, []);
+    }, [sessionId]);
     // URL update helper - defined early so it can be used by workspace/sidebar functions
     const updateUrl = useCallback((params) => {
         // Use the actual browser pathname (including any basePath like /parhelia)
@@ -3491,34 +3611,51 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             operationsContext.context.markOperationComplete;
     }, [operationsContext.context.markOperationComplete]);
     // Replace selected text with new content (for inline AI editing)
-    const replaceSelectedText = useCallback(async (newText) => {
-        if (!focusedField)
-            return;
+    const replaceSelectedText = useCallback(async (newText, selectionOverride) => {
+        const rangeToReplace = selectionOverride ?? selectedRange ?? lastTextSelectionRangeRef.current;
         try {
             // If we have selected text and a replaceText callback, use it
-            if (selectedRange?.text && selectedRange.replaceText) {
-                selectedRange.replaceText(newText);
+            if (rangeToReplace?.text && rangeToReplace.replaceText) {
+                rangeToReplace.replaceText(newText);
                 setSelectedRange(undefined);
+                lastTextSelectionRangeRef.current = undefined;
                 return;
             }
             // If no selection but we have a replaceText callback, try to use it for insertion
             // (some editors might support insertion via the same callback)
-            if (!selectedRange?.text && selectedRange?.replaceText) {
-                selectedRange.replaceText(newText);
+            if (!rangeToReplace?.text && rangeToReplace?.replaceText) {
+                rangeToReplace.replaceText(newText);
                 setSelectedRange(undefined);
+                lastTextSelectionRangeRef.current = undefined;
                 return;
             }
+            const fieldToReplace = focusedField ??
+                (rangeToReplace?.fieldId &&
+                    rangeToReplace.itemId &&
+                    rangeToReplace.language &&
+                    typeof rangeToReplace.version === "number"
+                    ? {
+                        fieldId: rangeToReplace.fieldId,
+                        item: {
+                            id: rangeToReplace.itemId,
+                            language: rangeToReplace.language,
+                            version: rangeToReplace.version,
+                        },
+                    }
+                    : undefined);
+            if (!fieldToReplace)
+                return;
             // Fallback: indexOf-based replacement/insertion for plain text fields
-            const { fieldId, item } = focusedField;
+            const { fieldId, item } = fieldToReplace;
             const modifiedField = getActiveSlotContext()?.fieldModificationStore.getField(fieldId, item.id, item.language, item.version);
             const currentValue = modifiedField
                 ? modifiedField.value || ""
-                : (await itemsRepository.getField(focusedField))?.value ||
-                    "";
+                : (await itemsRepository.getField(fieldToReplace))
+                    ?.value || "";
             let newValue;
-            if (selectedRange?.text) {
+            if (rangeToReplace?.text) {
                 // Replace selected text
-                const { text: originalSelectedText } = selectedRange;
+                const { text: originalSelectedText } = rangeToReplace;
                 const actualPosition = currentValue.indexOf(originalSelectedText);
                 if (actualPosition === -1) {
                     console.error("Failed to find selected text in field value");
@@ -3531,7 +3668,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             }
             else {
                 // Insert at cursor position (use startOffset if available, otherwise append)
-                const insertPosition = selectedRange?.startOffset ?? currentValue.length;
+                const insertPosition = rangeToReplace?.startOffset ?? currentValue.length;
                 newValue =
                     currentValue.slice(0, insertPosition) +
                         newText +
@@ -3539,12 +3676,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             }
             // Update the field
             await operations.editField({
-                field: focusedField,
+                field: fieldToReplace,
                 value: newValue,
                 refresh: "immediate",
             });
             // Clear the selection after replacement/insertion
             setSelectedRange(undefined);
+            lastTextSelectionRangeRef.current = undefined;
         }
         catch (error) {
             console.error("Failed to replace/insert text:", error);
@@ -4021,18 +4159,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             };
         }
     }, [operations.onFieldBlur]);
-    useEffect(() => {
-        if (mode === "suggestions") {
-            setShowSuggestedEdits(true);
-            // Refresh from the server to recover from any missed
-            // `suggested-edit-updated` WebSocket events (e.g. created by an
-            // agent tool while another tab was focused).
-            loadSuggestedEdits();
-        }
-        else {
-            setShowSuggestedEdits(false);
-        }
-    }, [mode, loadSuggestedEdits]);
     const isReadOnly = !item ||
         !item.canWriteItem ||
         !item.canWriteLanguage ||
@@ -4051,15 +4177,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         // Otherwise, only show workspaces that are in the settings
         return workspaceIdsFromSettings.includes(w.id) && !w.visible;
     });
-    // 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)
@@ -4187,16 +4304,11 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         dragEnd: () => {
             setDragObject(undefined);
         },
-        droppedInPlaceholder: async (placeholderKey, index, spotPositionElement, spotPositionAnchor, insertOption) => {
-            if ((!dragObject && !insertOption) || !page)
+        droppedInPlaceholder: async (placeholderKey, index, spotPositionElement, spotPositionAnchor, insertOption, spotPosition) => {
+            const droppedDragObject = dragObject;
+            if ((!droppedDragObject && !insertOption) || !page)
                 return;
             setDragObject(undefined);
-            if (spotPositionElement && spotPositionAnchor) {
-                setInserting({
-                    positionElement: spotPositionElement,
-                    positionAnchor: spotPositionAnchor,
-                });
-            }
             const placeholderKeyComponents = placeholderKey.split("_");
             const parentId = placeholderKeyComponents.length === 1
                 ? undefined
@@ -4206,39 +4318,31 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             let op;
             if (!currentItemDescriptorRef.current)
                 return;
+            let insertionSequence;
+            if ((spotPosition || spotPositionElement) && spotPositionAnchor) {
+                insertionSequence = ++insertingSequenceRef.current;
+                setInserting({
+                    position: spotPosition,
+                    positionElement: spotPositionElement,
+                    positionAnchor: spotPositionAnchor,
+                });
+            }
+            let operationPromise;
             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)
-                    .then((result) => {
-                    setInserting(undefined);
-                })
-                    .catch((err) => {
-                    setInserting(undefined);
-                });
-                return;
+                operationPromise = operations.addComponent(insertOption.typeId, placeholderKey, index, currentItemDescriptorRef.current);
             }
-            if (!dragObject)
-                return;
-            if (dragObject && dragObject.type == "template") {
-                operations
-                    .addComponent(dragObject.typeId, placeholderKey, index, currentItemDescriptorRef.current)
-                    .then((result) => {
-                    setInserting(undefined);
-                })
-                    .catch((err) => {
-                    setInserting(undefined);
-                });
-                return;
+            else if (droppedDragObject?.type == "template") {
+                operationPromise = operations.addComponent(droppedDragObject.typeId, placeholderKey, index, currentItemDescriptorRef.current);
             }
-            if (dragObject.type == "component" ||
-                (dragObject.type == "items" && dragObject.items)) {
+            else if (droppedDragObject?.type == "component" ||
+                (droppedDragObject?.type == "items" && droppedDragObject.items)) {
                 const parentComponent = parentId && page ? getComponentById(parentId, page) : null;
-                if (dragObject.type == "items" && dragObject.items) {
+                if (droppedDragObject.type == "items" && droppedDragObject.items) {
                     op = {
                         type: "link-component",
                         mainItem: page.item.descriptor,
@@ -4252,33 +4356,52 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                         placeholderIndex: index,
                         date: new Date().toISOString(),
                         id: uuid(),
-                        linkedComponentItem: dragObject.items[0],
+                        linkedComponentItem: droppedDragObject.items[0],
                         title: "Link component",
                     };
                 }
                 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(),
-                        title: "Move component",
-                    };
+                    const componentIds = droppedDragObject.components?.map((c) => c.id) ?? [];
+                    if (componentIds.length > 0) {
+                        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(),
+                            title: "Move component",
+                        };
+                    }
                 }
             }
             if (op)
-                operations.executeEditOperation(op);
+                operationPromise = operations.executeEditOperation(op);
+            if (!operationPromise) {
+                if (insertionSequence !== undefined &&
+                    insertingSequenceRef.current === insertionSequence) {
+                    setInserting(undefined);
+                }
+                return;
+            }
+            try {
+                await operationPromise;
+            }
+            catch (err) {
+                console.error("Failed to drop component in placeholder", err);
+            }
+            finally {
+                if (insertionSequence !== undefined &&
+                    insertingSequenceRef.current === insertionSequence) {
+                    setInserting(undefined);
+                }
+            }
         },
         page,
         triggerFieldAction: async (fieldDescriptor, actionButton, parameters, event) => {
@@ -4557,27 +4680,50 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setShowComments,
         showResolvedComments,
         setShowResolvedComments,
-        addComment: async () => {
+        addComment: async (options) => {
             const descriptor = item?.descriptor;
             if (!descriptor)
                 return;
             // Snapshot selection context up-front so switching views doesn't change what we comment on.
+            const hintedFieldSnapshot = options?.field;
             const focusedFieldSnapshot = focusedFieldRef.current;
-            const selectionSnapshot = [...selection];
-            const selectedRangeSnapshot = selectedRange;
-            const itemId = focusedFieldSnapshot?.item.id ||
-                (selectionSnapshot.length > 0 ? selectionSnapshot[0] : undefined) ||
+            const selectedRangeCandidate = isUsableTextSelectionRange(selectedRange)
+                ? selectedRange
+                : lastTextSelectionRangeRef.current;
+            const selectedRangeSnapshot = !hintedFieldSnapshot ||
+                selectionRangeMatchesField(selectedRangeCandidate, hintedFieldSnapshot)
+                ? selectedRangeCandidate
+                : undefined;
+            const selectedRangeFieldSnapshot = isUsableTextSelectionRange(selectedRangeSnapshot)
+                ? {
+                    fieldId: selectedRangeSnapshot.fieldId,
+                    item: {
+                        id: selectedRangeSnapshot.itemId,
+                        language: selectedRangeSnapshot.language || descriptor.language,
+                        version: typeof selectedRangeSnapshot.version === "number"
+                            ? selectedRangeSnapshot.version
+                            : descriptor.version,
+                    },
+                }
+                : undefined;
+            const commentFieldSnapshot = selectedRangeFieldSnapshot ??
+                hintedFieldSnapshot ??
+                focusedFieldSnapshot;
+            const itemId = commentFieldSnapshot?.item.id ||
+                (selection.length > 0 ? selection[0] : undefined) ||
                 descriptor.id;
             if (!itemId)
                 return;
             // Ensure the feedback sidebar is open when adding a comment (e.g. command palette / toolbar button).
             openSidebar("feedback");
-            const language = descriptor.language;
-            const version = descriptor.version;
+            const language = commentFieldSnapshot?.item.language || descriptor.language;
+            const version = typeof commentFieldSnapshot?.item.version === "number"
+                ? commentFieldSnapshot.item.version
+                : descriptor.version;
             const getFieldName = async () => {
-                if (!focusedFieldSnapshot)
+                if (!commentFieldSnapshot)
                     return "";
-                const field = await itemsRepository.getField(focusedFieldSnapshot);
+                const field = await itemsRepository.getField(commentFieldSnapshot);
                 return field?.name;
             };
             const getItemName = async () => {
@@ -4593,24 +4739,40 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 isNew: true,
                 itemId,
                 itemName: await getItemName(),
-                fieldId: focusedFieldSnapshot?.fieldId,
+                fieldId: commentFieldSnapshot?.fieldId,
                 fieldName: await getFieldName(),
                 mainItemId: descriptor.id,
                 language,
                 version,
                 position: 0,
-                rangeStart: selectedRangeSnapshot?.startOffset || 0,
-                rangeEnd: selectedRangeSnapshot?.endOffset || 0,
+                rangeStart: isUsableTextSelectionRange(selectedRangeSnapshot)
+                    ? selectedRangeSnapshot.startOffset
+                    : 0,
+                rangeEnd: isUsableTextSelectionRange(selectedRangeSnapshot)
+                    ? selectedRangeSnapshot.endOffset
+                    : 0,
                 author: user?.name,
                 authorDisplayName: user?.fullName,
-                date: new Date().toISOString(),
+                created: new Date().toISOString(),
             };
+            if (selectedRangeSnapshot?.clientRect) {
+                newComment[COMMENT_TRANSIENT_SELECTION_RECT] =
+                    selectedRangeSnapshot.clientRect;
+            }
+            if (selectedRangeSnapshot?.elementKey) {
+                newComment[COMMENT_TRANSIENT_ELEMENT_KEY] =
+                    selectedRangeSnapshot.elementKey;
+            }
             setComments([newComment, ...comments]);
             setSelectedComment(newComment);
             setShowComments(true);
+            lastTextSelectionRangeRef.current = undefined;
         },
         mode,
+        changeMode,
         setMode,
+        registerModeChangeParticipant,
+        modeTransitionRevision,
         previewDate,
         setPreviewDate,
         layoutMode,
@@ -4635,6 +4797,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setComponentNavigatorOpenForSlot,
         showAgentsPanel,
         setShowAgentsPanel: handleSetShowAgentsPanel,
+        waitForSurfaceSettled: settleRegistry.waitForSurfaceSettled,
+        notifySurfaceSettled: settleRegistry.notifySettled,
         isEditorFormHiddenForSlot,
         setEditorFormHiddenForSlot,
         editorFormHintSeen,
@@ -4678,6 +4842,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setCurrentWizardId,
         favorites,
         loadFavorites,
+        refreshFavorites,
         isQuickSwitcherVisible: quickSwitcherVisible,
         // Context factory registry methods
         registerContextFactory: (name, factory) => {
@@ -4786,6 +4951,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         isRefreshing,
         favorites,
         loadFavorites,
+        refreshFavorites,
         currentWizardId,
         quickSwitcherVisible,
         quickSwitcherSelectedIndex,
@@ -4796,6 +4962,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         factoriesRef,
         user,
         statusMessage,
+        changeMode,
+        setMode,
+        registerModeChangeParticipant,
+        modeTransitionRevision,
         previewDate,
         layoutMode,
         enableCompletions,
@@ -4811,6 +4981,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         handleSetShowComponentNavigator,
         showAgentsPanel,
         handleSetShowAgentsPanel,
+        settleRegistry,
         activeSlotId,
         editorSlots,
         slotContexts,
@@ -4861,8 +5032,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             setLockedField(undefined); // Clear client-side lock state
             await releaseFieldLocks(sessionId);
         },
-        inlineEditingFieldElement,
-        setInlineEditingFieldElement,
     };
     // Debug: Track editContext changes
     // const prevDependencies = useRef<any[]>([]);
@@ -4901,7 +5070,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     //     componentDesignerRendering,
     //     insertMode,
     //     currentOverlay,
-    //     inlineEditingFieldElement,
     //     lockedField,
     //     selectedRange,
     //     pageViewContext,
@@ -4989,7 +5157,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     //     'componentDesignerRendering',
     //     'insertMode',
     //     'currentOverlay',
-    //     'inlineEditingFieldElement',
     //     'lockedField',
     //     'selectedRange',
     //     'pageViewContext',
@@ -5117,13 +5284,14 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                         : window.location.pathname;
                     window.history.replaceState(getCurrentHistoryState(), "", newUrl);
                 }, configuration: configuration, restoredFromUrl: tourRestoredRef.current })), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(GuidanceOverlay, {}) }), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(AgentDialogHandler, {}) })] }));
-    return (_jsx(LicenseProvider, { initialLicenseStatus: initialLicenseStatus, initialStatusLoaded: initialLicenseStatusLoaded, children: _jsx("div", { className: `editor h-full w-full`, children: _jsx(OperationsContextProvider, { value: operationsContext.context, children: _jsx(FieldsEditContextProvider, { value: fieldsEditContext, children: _jsx(EditContextProvider, { value: editContext, children: _jsxs(SplashScreenAgentProvider, { children: [_jsx(DevModeIndicator, {}), startupChecks.state === "loading" && _jsx(EditorLoadingOverlay, {}), editContext.isRefreshing && (_jsx("div", { className: "text-neutral-grey-50 pointer-events-none fixed right-0 bottom-0 flex h-24 w-24 items-center justify-center opacity-50 select-none", children: _jsx(Spinner, {}) })), (currentWorkspace.id === "agents" ||
+    const showRefreshSpinner = editContext.isRefreshing && !activePageViewContext.iframeSupportsRefresh;
+    return (_jsx(LicenseProvider, { initialLicenseStatus: initialLicenseStatus, initialStatusLoaded: initialLicenseStatusLoaded, children: _jsx("div", { className: `editor h-full w-full`, children: _jsx(OperationsContextProvider, { value: operationsContext.context, children: _jsx(FieldsEditContextProvider, { value: fieldsEditContext, children: _jsx(EditContextProvider, { value: editContext, children: _jsxs(SplashScreenAgentProvider, { children: [_jsx(DevModeIndicator, {}), startupChecks.state === "loading" && _jsx(EditorLoadingOverlay, {}), showRefreshSpinner && (_jsx("div", { className: "text-neutral-grey-50 pointer-events-none fixed right-0 bottom-0 flex h-24 w-24 items-center justify-center opacity-50 select-none", children: _jsx(Spinner, {}) })), (currentWorkspace.id === "agents" ||
                                     currentWorkspace.id === "taskboard" ||
                                     currentWorkspace.id === "translation-management") &&
                                     showAgentsWorkspaceEditor && (_jsx(AgentsSlotContextBridgeHost, { slots: editorSlots })), startupChecks.state !== "loading" && (children || editorUi), startupChecks.state !== "loading" && dialog, _jsx(Toaster, { position: "top-center" }), " ", _jsx(ConfirmationDialog, { ref: confirmationDialogRef }), _jsx(ConcurrentUserLimitDialog, { open: concurrentUserLimitError !== null, onOpenChange: (open) => {
                                         if (!open) {
                                             setConcurrentUserLimitError(null);
                                         }
-                                    }, sessionId: sessionId, currentUsers: concurrentUserLimitError?.currentUsers ?? 0, maxUsers: concurrentUserLimitError?.maxUsers ?? 0, message: concurrentUserLimitError?.message ?? "", onRetry: handleRetryConnection, isAdministrator: userInfo.user.isAdministrator === true }), _jsx(QuickItemSwitcher, { visible: quickSwitcherVisible, entries: quickSwitcherEntries.slice(0, 5), selectedIndex: quickSwitcherSelectedIndex, onSelect: handleQuickSwitcherSelect, onClose: () => setQuickSwitcherVisible(false) }), _jsx(EditContextMenu, { ref: contextMenuRef }), _jsx(EditorFormHintPopover, {}), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(InlineAiTrigger, {}) }), media.mediaSelectorVisible && (_jsx(MediaSelector, { language: editContext.currentItemDescriptor.language, visible: media.mediaSelectorVisible, onHide: media.handleHide, onMediaSelected: media.onMediaSelect, selectedIdPath: media.selectedMediaIdPath, mode: media.mediaSelectorMode, initialSearchTerm: media.initialSearchTerm })), _jsx(FieldEditorPopup, { ref: fieldEditorPopupRef }), _jsx(LicenseOverlay, {}), _jsx(SessionExpiredOverlay, {})] }) }) }) }) }) }));
+                                    }, sessionId: sessionId, currentUsers: concurrentUserLimitError?.currentUsers ?? 0, maxUsers: concurrentUserLimitError?.maxUsers ?? 0, message: concurrentUserLimitError?.message ?? "", onRetry: handleRetryConnection, isAdministrator: userInfo.user.isAdministrator === true }), _jsx(QuickItemSwitcher, { visible: quickSwitcherVisible, entries: quickSwitcherEntries.slice(0, 5), selectedIndex: quickSwitcherSelectedIndex, onSelect: handleQuickSwitcherSelect, onClose: () => setQuickSwitcherVisible(false) }), _jsx(EditContextMenu, { ref: contextMenuRef, onOpenChange: handleContextMenuOpenChange }), _jsx(EditorFormHintPopover, {}), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(InlineAiTrigger, {}) }), media.mediaSelectorVisible && (_jsx(MediaSelector, { language: editContext.currentItemDescriptor.language, visible: media.mediaSelectorVisible, onHide: media.handleHide, onMediaSelected: media.onMediaSelect, selectedIdPath: media.selectedMediaIdPath, mode: media.mediaSelectorMode, initialSearchTerm: media.initialSearchTerm })), _jsx(FieldEditorPopup, { ref: fieldEditorPopupRef }), _jsx(LicenseOverlay, {}), _jsx(SessionExpiredOverlay, {})] }) }) }) }) }) }));
 }
 //# sourceMappingURL=EditorShell.js.map