@parhelia/core 0.1.12880 → 0.1.12881

package/dist/editor/client/EditorShell.js

@@ -46,6 +46,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 +68,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 +153,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 +486,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([]);
@@ -555,9 +575,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);
@@ -663,19 +741,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 &&
@@ -685,7 +750,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)
@@ -1216,7 +1293,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);
         }
@@ -1419,9 +1497,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) {
@@ -1698,6 +1774,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();
@@ -1710,6 +1789,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;
@@ -2106,6 +2188,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             globalThis.editorRefreshTimer = undefined;
         };
         if (mode === "immediate") {
+            if (refreshTimer) {
+                clearTimeout(refreshTimer);
+            }
             doRefresh();
             return;
         }
@@ -2299,7 +2384,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");
@@ -3004,9 +3089,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)
@@ -3484,34 +3595,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");
@@ -3524,7 +3652,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 +
@@ -3532,12 +3660,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);
@@ -4014,18 +4143,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 ||
@@ -4044,15 +4161,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)
@@ -4180,16 +4288,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
@@ -4199,39 +4302,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,
@@ -4245,33 +4340,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) => {
@@ -4550,27 +4664,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 () => {
@@ -4586,24 +4723,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,
@@ -4671,6 +4824,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setCurrentWizardId,
         favorites,
         loadFavorites,
+        refreshFavorites,
         isQuickSwitcherVisible: quickSwitcherVisible,
         // Context factory registry methods
         registerContextFactory: (name, factory) => {
@@ -4779,6 +4933,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         isRefreshing,
         favorites,
         loadFavorites,
+        refreshFavorites,
         currentWizardId,
         quickSwitcherVisible,
         quickSwitcherSelectedIndex,
@@ -4789,6 +4944,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         factoriesRef,
         user,
         statusMessage,
+        changeMode,
+        setMode,
+        registerModeChangeParticipant,
+        modeTransitionRevision,
         previewDate,
         layoutMode,
         enableCompletions,
@@ -4854,8 +5013,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[]>([]);
@@ -4894,7 +5051,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     //     componentDesignerRendering,
     //     insertMode,
     //     currentOverlay,
-    //     inlineEditingFieldElement,
     //     lockedField,
     //     selectedRange,
     //     pageViewContext,
@@ -4982,7 +5138,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     //     'componentDesignerRendering',
     //     'insertMode',
     //     'currentOverlay',
-    //     'inlineEditingFieldElement',
     //     'lockedField',
     //     'selectedRange',
     //     'pageViewContext',
@@ -5110,7 +5265,8 @@ 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) => {