@parhelia/core 0.1.12927 → 0.1.12928

package/dist/editor/client/EditorShell.js

@@ -1,15 +1,16 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect, useRef, useCallback, useMemo, startTransition, } from "react";
+import React, { useState, useEffect, useLayoutEffect, useRef, useCallback, useMemo, startTransition, } from "react";
 import { toast } from "sonner";
-import { EditContextProvider, FieldsEditContextProvider, OperationsContextProvider, useEditContext, } from "./editContext";
+import { isPerfTraceActive, perfTracePaintStep, perfTraceStep, } from "../perfTrace";
+import { EditContextProvider, FieldsEditContextProvider, OperationsContextProvider, SelectionContextProvider, useEditContext, } from "./editContext";
 import { aggregateModifiedFieldsFromStores, areModifiedFieldSnapshotsEqual, FieldModificationStore, } from "./fieldModificationStore";
 import { SplashScreenAgentProvider } from "../../splash-screen/SplashScreenAgentContext";
 import { useRouter, useSearchParams, usePathname } from "./navigation";
 import { findComponent, getComponentById } from "../componentTreeHelper";
 import { getOperationsContext } from "./operations";
 import { handleErrorResult } from "./helpers";
-import { showExpandableErrorToast, } from "./errorToast";
+import { showExpandableErrorToast } from "./errorToast";
 import { isManualShowMeFocusTransfer, isManualShowMeTarget, } from "./manualShowMeFocus";
 import { executeFieldAction as executeFieldServerAction, connectSocket, getEditHistory, getRunningOperations, reconnectSession, releaseFieldLocks, validateItems, } from "../services/editService";
 import { emitAgentDocumentsChanged } from "../services/agentService";
@@ -37,6 +38,7 @@ import { post } from "../services/serviceHelper";
 import { CONTENT_TREE_SIDEBAR_ID } from "../sidebar/contentTreeConstants";
 import { PageViewerFrame } from "../page-viewer/PageViewerFrame";
 import { useItemsRepository } from "./itemsRepository";
+import { logFieldValueDiagnostic, summarizeFieldDescriptor, } from "../fieldValueDiagnostics";
 import { Spinner } from "../ui/Spinner";
 import { createSettleRegistry } from "../ui/animationSettle";
 import { cleanId } from "../utils/id-helper";
@@ -47,7 +49,7 @@ import { Tour } from "../../tour/Tour";
 import { GuidanceOverlay } from "../ai/GuidanceOverlay";
 import { AgentDialogHandler } from "../ai/dialogs";
 import { setActiveAgentConversation } from "../ai/useActiveAgentConversation";
-import { usePageViewContext, } from "../page-viewer/pageViewContext";
+import { CANVAS_REFRESH_COMPLETED_EVENT, usePageViewContext, } from "../page-viewer/pageViewContext";
 import { QuickItemSwitcher } from "../QuickItemSwitcher";
 import { useEditorSlotContext, } from "../views/editorSlotContext";
 import { getComments, getAvailableCommentTags, } from "../services/reviewsService";
@@ -176,6 +178,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const parheliaSettingsRefreshInFlightRef = useRef(null);
     const minimapEnabledInSettings = effectiveParheliaSettings?.showMinimap !== false;
     const [selection, setSelection] = useState([]);
+    // Current selection for event-time reads (select() early-bail, getSelection)
+    // without making callers depend on the reactive value.
+    const selectionRef = useRef(selection);
+    selectionRef.current = selection;
     const [contentTreeSelection, setContentTreeSelection] = useState([]);
     const [selectedForInsertion, setSelectedForInsertion] = useState("");
     const [refreshCompletedFlag, setRefreshCompletedFlag] = useState(false);
@@ -230,6 +236,51 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const [inserting, setInserting] = useState();
     const [removingComponentIds, setRemovingComponentIds] = useState([]);
     const insertingSequenceRef = useRef(0);
+    // Armed by selectWithoutAutoScroll for programmatic selections (drop
+    // target's parent, post-operation focus): the canvas selection-scroll
+    // effect consumes it and skips exactly that change. Deterministic — unlike
+    // a time window, it cannot expire while a slow operation or a frozen host
+    // delays the effect flush.
+    const suppressNextSelectionAutoScrollRef = useRef(false);
+    const selectWithoutAutoScroll = useCallback((ids) => {
+        const current = selectionRef.current;
+        if (ids.length === current.length &&
+            ids.every((id, index) => id === current[index])) {
+            // No state change: nothing renders, so don't leave the suppression
+            // armed for an unrelated later selection.
+            return;
+        }
+        suppressNextSelectionAutoScrollRef.current = true;
+        setSelection(ids);
+    }, []);
+    const consumeNextSelectionAutoScrollSuppression = useCallback(() => {
+        const suppressed = suppressNextSelectionAutoScrollRef.current;
+        suppressNextSelectionAutoScrollRef.current = false;
+        return suppressed;
+    }, []);
+    const insertingHoldCleanupRef = useRef(null);
+    // The drop operation's HTTP resolve only means the server accepted it — the
+    // canvas re-render (fetch + DOM patch) lands seconds later. Keep the
+    // inserting indicator up until the first canvas refresh after the operation
+    // completes, so it visually hands off to the component actually appearing,
+    // with a timeout backstop for hosts that never report a refresh.
+    const holdInsertingUntilCanvasRefresh = useCallback((sequence) => {
+        insertingHoldCleanupRef.current?.();
+        const finish = () => {
+            insertingHoldCleanupRef.current = null;
+            window.removeEventListener(CANVAS_REFRESH_COMPLETED_EVENT, finish);
+            window.clearTimeout(timeoutId);
+            if (insertingSequenceRef.current === sequence) {
+                setInserting(undefined);
+            }
+        };
+        const timeoutId = window.setTimeout(finish, 15000);
+        window.addEventListener(CANVAS_REFRESH_COMPLETED_EVENT, finish);
+        insertingHoldCleanupRef.current = finish;
+    }, []);
+    useEffect(() => () => {
+        insertingHoldCleanupRef.current?.();
+    }, []);
     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.
@@ -873,6 +924,15 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             setSelectedHelpSectionId(helpParam === "contents" || helpParam === "true" ? null : helpParam);
         }
     }, [searchParams, isInitialLoad]);
+    // Perf probe: the gap between shell:setSelection-state-update and
+    // shell:selection-render-committed is the React render of the entire shell
+    // tree (every editContext consumer); the paint step adds compositor time.
+    useLayoutEffect(() => {
+        if (!isPerfTraceActive())
+            return;
+        perfTraceStep("shell:selection-render-committed", { ids: selection });
+        perfTracePaintStep("shell:selection-painted");
+    }, [selection]);
     useEffect(() => {
         if (focusedField &&
             selection.length > 0 &&
@@ -3054,6 +3114,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         configuration,
         selection,
         setSelection,
+        selectWithoutAutoScroll,
         loadItem,
         addToEditHistory,
         setLockedField,
@@ -4030,6 +4091,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     }, [operationsContext.cleanup]);
     // Shared focused field setter with lock handling (used in both contexts)
     const setFocusedFieldWithLock = useCallback(async (field, requestLock) => {
+        logFieldValueDiagnostic("focused-field", "setFocusedField requested", {
+            field: summarizeFieldDescriptor(field),
+            requestLock,
+            ignoreBlur,
+            currentFocusedField: summarizeFieldDescriptor(focusedFieldRef.current),
+            lockedField: summarizeFieldDescriptor(lockedField),
+        });
         if (field) {
             setIgnoreBlur(true);
             setTimeout(() => {
@@ -4038,12 +4106,25 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             if (requestLock) {
                 const lockResult = (await operations.ensureLock(field)) || false;
                 if (!lockResult) {
+                    logFieldValueDiagnostic("focused-field", "lock failed", {
+                        field: summarizeFieldDescriptor(field),
+                        requestLock,
+                    });
                     return false;
                 }
                 setFocusedField({ ...field });
+                logFieldValueDiagnostic("focused-field", "focused field set", {
+                    field: summarizeFieldDescriptor(field),
+                    requestLock,
+                    lockResult,
+                });
                 return true;
             }
             setFocusedField({ ...field });
+            logFieldValueDiagnostic("focused-field", "focused field set", {
+                field: summarizeFieldDescriptor(field),
+                requestLock,
+            });
         }
         else {
             // Keep the field selected when the blur was caused by clicking a User
@@ -4060,13 +4141,25 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                     now: Date.now(),
                 });
             if (!ignoreBlur && !focusMovedToShowMe) {
+                logFieldValueDiagnostic("focused-field", "clearing focused field", {
+                    previousFocusedField: summarizeFieldDescriptor(focusedFieldRef.current),
+                    lockedField: summarizeFieldDescriptor(lockedField),
+                    sessionId,
+                });
                 setFocusedField(undefined);
                 setLockedField(undefined); // Clear client-side lock state
                 releaseFieldLocks(sessionId);
             }
+            else {
+                logFieldValueDiagnostic("focused-field", "clear skipped", {
+                    reason: ignoreBlur ? "ignoreBlur" : "manual show-me focus transfer",
+                    previousFocusedField: summarizeFieldDescriptor(focusedFieldRef.current),
+                    focusMovedToShowMe,
+                });
+            }
         }
         return true;
-    }, [operations, ignoreBlur, sessionId]);
+    }, [operations, ignoreBlur, sessionId, lockedField]);
     const quickSwitcherEntries = useMemo(() => {
         const entries = [];
         const seen = new Set();
@@ -4552,10 +4645,21 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         loadItemVersions,
         sessionId: sessionId,
         readonly: isReadOnly,
-        selection,
+        getSelection: () => selectionRef.current,
         select: (ids) => {
+            // Re-selecting the same components is a no-op: without this bail a
+            // fresh array identity re-renders every selection consumer.
+            const current = selectionRef.current;
+            if (ids.length === current.length &&
+                ids.every((id, index) => id === current[index])) {
+                perfTraceStep("shell:setSelection-bailed (unchanged)", { ids });
+                return;
+            }
+            perfTraceStep("shell:setSelection-state-update", { ids });
             setSelection(ids);
         },
+        selectWithoutAutoScroll,
+        consumeNextSelectionAutoScrollSuppression,
         contentTreeSelection,
         setContentTreeSelection,
         selectedForInsertion,
@@ -4597,6 +4701,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             return await getComponentCommands(components, editContext, providerContext);
         },
         dragStart: (dragObject) => {
+            // A drag supersedes any unresolved scroll request (e.g. a comment
+            // target still waiting for geometry). Left pending, it would replay
+            // against the post-drop refresh and yank the canvas to a stale spot.
+            setScrollIntoView(undefined);
             setDragObject(dragObject);
         },
         dragEnd: () => {
@@ -4611,8 +4719,11 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             const parentId = placeholderKeyComponents.length === 1
                 ? undefined
                 : placeholderKeyComponents[1];
+            // Without auto-scroll: the parent is selected for context, not to be
+            // shown — scrolling would move the page away from the drop point
+            // (and, before the refresh lands, toward stale pre-move geometry).
             if (parentId)
-                setSelection([parentId]);
+                selectWithoutAutoScroll([parentId]);
             let op;
             if (!currentItemDescriptorRef.current)
                 return;
@@ -4689,16 +4800,29 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 }
                 return;
             }
+            let operationFailed = false;
             try {
-                await operationPromise;
+                // executeOp resolves (instead of throwing) with a failed status when
+                // the server rejects the operation — no refresh follows then.
+                const result = (await operationPromise);
+                operationFailed = result?.executionStatus === "failed";
             }
             catch (err) {
+                operationFailed = true;
                 console.error("Failed to drop component in placeholder", err);
             }
             finally {
                 if (insertionSequence !== undefined &&
                     insertingSequenceRef.current === insertionSequence) {
-                    setInserting(undefined);
+                    if (operationFailed) {
+                        setInserting(undefined);
+                    }
+                    else {
+                        // The server accepted the drop; the canvas has not repainted
+                        // yet. Hold the indicator until the refresh lands so it stops
+                        // when the component actually appears, not seconds earlier.
+                        holdInsertingUntilCanvasRefresh(insertionSequence);
+                    }
                 }
             }
         },
@@ -5200,7 +5324,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         loadItemVersions,
         sessionId,
         isReadOnly,
-        selection,
         contentTreeSelection,
         selectedForInsertion,
         dragObject,
@@ -5348,7 +5471,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     // This ensures editContextRef.current always has the latest value when executeCommand is called
     // Using useEffect would create a timing window where the ref is stale
     editContextRef.current = editContext;
-    const fieldsEditContext = {
+    // Selection is deliberately NOT part of editContext (see SelectionContext):
+    // a canvas click would otherwise rebuild the context and re-render every
+    // consumer. Only SelectionContext subscribers re-render on selection change.
+    const selectionContextValue = useMemo(() => ({ selection }), [selection]);
+    // Memoized: a fresh identity here re-renders every FieldsEditContext
+    // consumer on every shell render (same churn class as SelectionContext).
+    const fieldsEditContext = useMemo(() => ({
         modifiedFields,
         recentEdits,
         clearRecentEdits: () => {
@@ -5361,7 +5490,14 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             setLockedField(undefined); // Clear client-side lock state
             await releaseFieldLocks(sessionId);
         },
-    };
+    }), [
+        modifiedFields,
+        recentEdits,
+        addRecentEdit,
+        focusedField,
+        setFocusedFieldWithLock,
+        sessionId,
+    ]);
     // Debug: Track editContext changes
     // const prevDependencies = useRef<any[]>([]);
     // useEffect(() => {
@@ -5615,13 +5751,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                     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, {}) })] }));
     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, 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, {})] }) }) }) }) }) }));
+    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: _jsx(SelectionContextProvider, { value: selectionContextValue, 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, 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