@parhelia/core 0.1.12788 → 0.1.12790

package/dist/editor/client/EditorShell.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect, useRef, useCallback, useSyncExternalStore, useMemo, startTransition, } from "react";
+import React, { useState, useEffect, useRef, useCallback, useMemo, startTransition, } from "react";
 import { toast } from "sonner";
 import { EditContextProvider, FieldsEditContextProvider, OperationsContextProvider, useEditContext, } from "./editContext";
-import { fieldModificationStore } from "./fieldModificationStore";
+import { aggregateModifiedFieldsFromStores, areModifiedFieldSnapshotsEqual, FieldModificationStore, } from "./fieldModificationStore";
 import { SplashScreenAgentProvider } from "../../splash-screen/SplashScreenAgentContext";
 import { useRouter, useSearchParams, usePathname } from "./navigation";
 import { findComponent, getComponentById } from "../componentTreeHelper";
@@ -57,6 +57,7 @@ import { useWorkbox } from "./hooks/useWorkbox";
 import { useMediaSelector } from "./hooks/useMediaSelector";
 import { useGlobalEditorKeyDown } from "./hooks/useGlobalEditorKeyDown";
 import { useStartupChecks } from "../settings/status/index";
+import { EditorLoadingOverlay } from "../EditorLoadingOverlay";
 import { FeatureGate, LicenseFeatures, LicenseProvider, LicenseOverlay, } from "../../licensing";
 // Sentinel written to the `sidebar` URL param when the user has explicitly closed
 // every sidebar. Distinguishes "no preference yet" (param absent) from "user wants
@@ -372,6 +373,25 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         activeSlotIdRef.current = activeSlotId;
     }, [activeSlotId]);
     const [slotContexts, setSlotContexts] = useState(() => new Map());
+    const fieldModificationStoresBySlotRef = useRef(new Map());
+    const [fieldModificationStoreRegistryRevision, setFieldModificationStoreRegistryRevision,] = useState(0);
+    const getFieldModificationStoreForSlot = useCallback((slotId) => {
+        let store = fieldModificationStoresBySlotRef.current.get(slotId);
+        if (!store) {
+            store = new FieldModificationStore();
+            fieldModificationStoresBySlotRef.current.set(slotId, store);
+        }
+        return store;
+    }, []);
+    const getFieldModificationStores = useCallback(() => {
+        return Array.from(fieldModificationStoresBySlotRef.current.values());
+    }, []);
+    const ensureFieldModificationStoreRegistered = useCallback((slotId) => {
+        if (fieldModificationStoresBySlotRef.current.has(slotId))
+            return;
+        fieldModificationStoresBySlotRef.current.set(slotId, new FieldModificationStore());
+        setFieldModificationStoreRegistryRevision((previous) => previous + 1);
+    }, []);
     const promptSessionReconnect = useCallback((reason) => {
         const description = reason && reason !== "session-revoked"
             ? `${reason}. Click reconnect to continue in this browser.`
@@ -445,7 +465,23 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const [itemLanguages, setItemLanguages] = useState([]);
     const [itemVersions, setItemVersions] = useState([]);
     const [isLoadingVersions, setIsLoadingVersions] = useState(false);
-    const modifiedFields = useSyncExternalStore((onStoreChange) => fieldModificationStore.subscribeAll(onStoreChange), () => fieldModificationStore.getAllFields(), () => fieldModificationStore.getAllFields());
+    const [modifiedFields, setModifiedFields] = useState([]);
+    useEffect(() => {
+        const stores = getFieldModificationStores();
+        const recomputeModifiedFields = () => {
+            const next = aggregateModifiedFieldsFromStores(stores);
+            setModifiedFields((previous) => areModifiedFieldSnapshotsEqual(previous, next) ? previous : next);
+        };
+        const unsubscribes = stores.map((store) => store.subscribeAll(recomputeModifiedFields));
+        recomputeModifiedFields();
+        return () => {
+            unsubscribes.forEach((unsubscribe) => unsubscribe());
+        };
+    }, [
+        editorSlots,
+        fieldModificationStoreRegistryRevision,
+        getFieldModificationStores,
+    ]);
     const [comments, setComments] = useState([]);
     const [suggestedEdits, setSuggestedEdits] = useState([]);
     const [showSuggestedEdits, setShowSuggestedEdits] = useState(false);
@@ -648,7 +684,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     // Track the current page item descriptor for itemsRepository
     const [currentPageItem, setCurrentPageItem] = useState();
     // Create itemsRepository with current page item (will be updated when page loads)
-    const itemsRepository = useItemsRepository(addRecentEdit, currentPageItem);
+    const itemsRepository = useItemsRepository(addRecentEdit, currentPageItem, getFieldModificationStores);
     const fallbackPageViewContext = usePageViewContext({
         pageItemDescriptor: currentItemDescriptor,
         itemsRepository,
@@ -682,9 +718,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     }, []);
     const slotContextsRef = useRef(slotContexts);
     const lastActiveSlotContextRef = useRef(null);
-    useEffect(() => {
-        slotContextsRef.current = slotContexts;
-    }, [slotContexts]);
+    slotContextsRef.current = slotContexts;
     const getActiveSlotContext = useCallback(() => {
         const activeId = activeSlotIdRef.current;
         if (!activeId)
@@ -1481,6 +1515,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const historyModeRef = useRef(historyMode);
     const itemRef = useRef(item);
     const historySearchQueryRef = useRef(historySearchQuery);
+    const showOnlyMyChangesRef = useRef(showOnlyMyChanges);
+    const filterByCurrentLanguageRef = useRef(filterByCurrentLanguage);
     useEffect(() => {
         historyModeRef.current = historyMode;
     }, [historyMode]);
@@ -1490,6 +1526,12 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     useEffect(() => {
         historySearchQueryRef.current = historySearchQuery;
     }, [historySearchQuery]);
+    useEffect(() => {
+        showOnlyMyChangesRef.current = showOnlyMyChanges;
+    }, [showOnlyMyChanges]);
+    useEffect(() => {
+        filterByCurrentLanguageRef.current = filterByCurrentLanguage;
+    }, [filterByCurrentLanguage]);
     // Mirror the backend LIKE filter on MainItemPath/Title/Description so that
     // ops arriving via WebSocket while a search is active don't bypass the filter.
     const matchesHistorySearchQuery = useCallback((op) => {
@@ -1768,6 +1810,34 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             : filterByCurrentLanguage;
         const trimmedHistoryQuery = historySearchQuery.trim();
         const historyQuery = trimmedHistoryQuery.length > 0 ? trimmedHistoryQuery : undefined;
+        const requestMode = currentMode;
+        const requestSearchQuery = trimmedHistoryQuery;
+        const requestItem = item?.descriptor;
+        const requestLanguage = item?.descriptor?.language || currentItemDescriptor?.language;
+        const isStaleHistoryResponse = () => {
+            if (historyModeRef.current !== requestMode)
+                return true;
+            if ((historySearchQueryRef.current || "").trim() !== requestSearchQuery) {
+                return true;
+            }
+            if (showOnlyMyChangesRef.current !== shouldFilterBySession)
+                return true;
+            if (filterByCurrentLanguageRef.current !== shouldFilterByLanguage) {
+                return true;
+            }
+            const latestItem = itemRef.current?.descriptor;
+            if (requestMode !== "global") {
+                return (!latestItem ||
+                    !requestItem ||
+                    latestItem.id !== requestItem.id ||
+                    latestItem.language !== requestItem.language ||
+                    latestItem.version !== requestItem.version);
+            }
+            return (shouldFilterByLanguage &&
+                !!requestLanguage &&
+                !!latestItem?.language &&
+                latestItem.language !== requestLanguage);
+        };
         if (currentMode === "global") {
             // Global mode: optionally filter by session and/or language
             const currentLanguage = item?.descriptor?.language || currentItemDescriptor?.language;
@@ -1783,6 +1853,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 console.error("[EditorShell] Failed to load history:", result);
                 return;
             }
+            if (isStaleHistoryResponse()) {
+                return;
+            }
             setEditHistory((prev) => {
                 const next = normalizeEditHistoryPayload(result.data);
                 const scope = {
@@ -1870,6 +1943,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 console.error("[EditorShell] Failed to load item history:", result);
                 return;
             }
+            if (isStaleHistoryResponse()) {
+                return;
+            }
             let operations = normalizeEditHistoryPayload(result.data);
             // Client-side version filtering for current-version mode
             if (currentMode === "current-version") {
@@ -2263,15 +2339,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             setItem(item);
             if (!item)
                 return;
-            if (itemRef.current?.descriptor.id === currentItemDescriptor.id &&
-                itemRef.current?.descriptor.language ===
-                    currentItemDescriptor.language &&
-                itemRef.current?.descriptor.version !== item.version) {
-                showInfoToast({
-                    summary: "New version!",
-                    details: "New version of item loaded",
-                });
-            }
         }
         load();
     }, [itemsRepository.revision]);
@@ -2359,6 +2426,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             (activeSlotIdRef.current == null ||
                 existingSlotForItem.slotId === activeSlotIdRef.current)) {
             const isExistingSlotActive = existingSlotForItem.slotId === activeSlotIdRef.current;
+            ensureFieldModificationStoreRegistered(existingSlotForItem.slotId);
             if (isExistingSlotActive) {
                 latestGlobalLoadKeyRef.current = requestedItemKey;
             }
@@ -2417,6 +2485,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 : (activeSlotId ?? editorSlots[0]?.slotId ?? null));
         if (!targetSlotId)
             return undefined;
+        ensureFieldModificationStoreRegistered(targetSlotId);
         setEditorSlots((prev) => {
             if (shouldOpenNewSlot && !options?.targetSlotId) {
                 const existingIdx = prev.findIndex((s) => s.slotId === targetSlotId);
@@ -2494,6 +2563,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         activeSlotId,
         item,
         workspaceId,
+        ensureFieldModificationStoreRegistered,
     ]);
     const setActiveSlot = useCallback(async (slotId) => {
         if (activeSlotId === slotId)
@@ -2536,6 +2606,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         // Remove the slot
         setEditorSlots((prev) => prev.filter((s) => s.slotId !== slotId));
         unregisterSlotContext(slotId);
+        if (fieldModificationStoresBySlotRef.current.delete(slotId)) {
+            setFieldModificationStoreRegistryRevision((previous) => previous + 1);
+        }
         // Activate the next slot if we closed the active one
         if (isClosingActiveSlot) {
             if (nextActiveSlotId) {
@@ -2603,6 +2676,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         layoutMode,
         setFocusFieldComponentId,
         setInsertMode,
+        getActiveSlotContext,
+        getFieldModificationStoreForSlot,
+        getActiveSlotId,
     };
     useEffect(() => {
         if (currentOverlay !== "fields")
@@ -3227,9 +3303,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 return false;
             if (!isTaskboardWorkspace && isTaskboardSidebar)
                 return false;
-            // Always show agents-panel regardless of workspace settings.
+            // Keep agents-panel broadly available, except in dedicated workspaces
+            // that own their full surface.
             if (s.id === "agents-panel") {
-                return true;
+                return targetWorkspaceId !== "translation-management";
             }
             // If no workspace settings or no sidebars defined for current workspace, show all.
             if (workspaceAllowedSidebarIds.length === 0) {
@@ -3377,7 +3454,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             }
             // Fallback: indexOf-based replacement/insertion for plain text fields
             const { fieldId, item } = focusedField;
-            const modifiedField = fieldModificationStore.getField(fieldId, item.id, item.language, item.version);
+            const modifiedField = getActiveSlotContext()?.fieldModificationStore.getField(fieldId, item.id, item.language, item.version);
             const currentValue = modifiedField
                 ? modifiedField.value || ""
                 : (await itemsRepository.getField(focusedField))?.value ||
@@ -3416,7 +3493,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         catch (error) {
             console.error("Failed to replace/insert text:", error);
         }
-    }, [selectedRange, focusedField, itemsRepository, operations]);
+    }, [
+        selectedRange,
+        focusedField,
+        itemsRepository,
+        operations,
+        getActiveSlotContext,
+    ]);
     // Insert text at cursor position (for when there's no selection)
     const insertTextAtCursor = useCallback(async (newText) => {
         if (!focusedField)
@@ -3457,7 +3540,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             }
             // Fallback: use field value length (append)
             const { fieldId, item } = focusedField;
-            const modifiedField = fieldModificationStore.getField(fieldId, item.id, item.language, item.version);
+            const modifiedField = getActiveSlotContext()?.fieldModificationStore.getField(fieldId, item.id, item.language, item.version);
             const currentValue = modifiedField
                 ? modifiedField.value || ""
                 : (await itemsRepository.getField(focusedField))?.value ||
@@ -3476,7 +3559,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         catch (error) {
             console.error("Failed to insert text at cursor:", error);
         }
-    }, [focusedField, selectedRange, itemsRepository, operations]);
+    }, [
+        focusedField,
+        selectedRange,
+        itemsRepository,
+        operations,
+        getActiveSlotContext,
+    ]);
     // Cleanup pending debounced operations on unmount to prevent stuck "saving" states
     useEffect(() => {
         return () => {
@@ -4377,6 +4466,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         unregisterSlotContext,
         getActiveSlotContext,
         getActiveSlotId,
+        getFieldModificationStoreForSlot,
         closeEditorSlot,
         setActiveSlot,
         revision,
@@ -4645,6 +4735,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         showAgentsPanel,
         handleSetShowAgentsPanel,
         activeSlotId,
+        editorSlots,
+        slotContexts,
+        getFieldModificationStoreForSlot,
         isEditorFormHiddenForSlot,
         setEditorFormHiddenForSlot,
         editorFormHintSeen,
@@ -4681,9 +4774,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const fieldsEditContext = {
         modifiedFields,
         recentEdits,
-        clearModifiedFields: () => {
-            fieldModificationStore.clear();
-        },
         clearRecentEdits: () => {
             setRecentEdits([]);
         },
@@ -4932,9 +5022,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         selection,
         workspaceId,
     ]);
-    useEffect(() => {
-        fieldsEditContext.clearModifiedFields();
-    }, [currentItemDescriptor]);
     if (!currentWorkspace)
         return null;
     const editorUi = fullscreen ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "fixed inset-0 flex", children: [_jsx(PageViewerFrame, { compareView: compareMode, pageViewContext: activePageViewContext }), _jsx(FullscreenControls, { device: activePageViewContext.device, setDevice: (d) => activePageViewContext.setDevice(d), canExit: !configuration.forceFullscreen, onExit: () => setFullscreen(false), firstMobileDeviceName: configuration.devices[0]?.name })] }), showFullscreenHint && !configuration.forceFullscreen && !isMobile && (_jsx("div", { className: "fixed inset-0 z-10000", onMouseMoveCapture: () => {
@@ -4953,8 +5040,9 @@ 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("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-white/70 backdrop-blur-[1px]", children: _jsx("div", { className: "flex items-center gap-3 rounded-md border border-gray-200 bg-white px-4 py-3 text-gray-700 shadow-sm", children: _jsx(Spinner, { size: "xl" }) }) })), editContext.isRefreshing && (_jsx("div", { className: "pointer-events-none fixed right-0 bottom-0 flex h-24 w-24 items-center justify-center text-gray-600 opacity-50 select-none", children: _jsx(Spinner, {}) })), (currentWorkspace.id === "agents" ||
-                                    currentWorkspace.id === "taskboard") &&
+    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: "pointer-events-none fixed right-0 bottom-0 flex h-24 w-24 items-center justify-center text-gray-600 opacity-50 select-none", children: _jsx(Spinner, {}) })), (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);