@parhelia/core 0.1.12477 → 0.1.12479

package/dist/editor/client/EditorShell.js

@@ -481,7 +481,27 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const [statusMessage, setStatusMessage] = useState("");
     const [focusFieldComponentId, setFocusFieldComponentId] = useState();
     const [enableCompletions, setEnableCompletions] = useState(false);
-    const [showComponentNavigator, setShowComponentNavigator] = useState(userPreferences.showComponentNavigator ?? false);
+    const [showComponentNavigatorDefault, setShowComponentNavigatorDefault] = useState(userPreferences.showComponentNavigator ?? false);
+    const [slotComponentNavigatorVisibility, setSlotComponentNavigatorVisibility] = useState({});
+    useEffect(() => {
+        setSlotComponentNavigatorVisibility((prev) => {
+            const next = {};
+            let changed = false;
+            for (const slot of editorSlots) {
+                if (Object.prototype.hasOwnProperty.call(prev, slot.slotId)) {
+                    next[slot.slotId] = prev[slot.slotId];
+                }
+                else {
+                    next[slot.slotId] = showComponentNavigatorDefault;
+                    changed = true;
+                }
+            }
+            if (Object.keys(prev).length !== editorSlots.length) {
+                changed = true;
+            }
+            return changed ? next : prev;
+        });
+    }, [editorSlots, showComponentNavigatorDefault]);
     const [showAgentsPanel, setShowAgentsPanel] = useState(userPreferences.showAgentsPanel ?? false);
     const [showMinimap, setShowMinimap] = useState(userPreferences.showMinimap ?? true);
     const [showHelpTerminal, setShowHelpTerminal] = useState(false);
@@ -622,6 +642,12 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const activeSlotContext = activeSlotId
         ? slotContexts.get(activeSlotId)
         : undefined;
+    const isComponentNavigatorOpenForSlot = useCallback((slotId) => {
+        if (!slotId)
+            return showComponentNavigatorDefault;
+        return (slotComponentNavigatorVisibility[slotId] ?? showComponentNavigatorDefault);
+    }, [slotComponentNavigatorVisibility, showComponentNavigatorDefault]);
+    const showComponentNavigator = isComponentNavigatorOpenForSlot(activeSlotId);
     // Sync global compareMode from the active slot's compareMode for URL syncing
     useEffect(() => {
         if (activeSlotContext && activeSlotContext.compareMode !== compareMode) {
@@ -816,29 +842,44 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             }
         }
     }, [isMobile]);
-    const handleSetShowComponentNavigator = useCallback((value) => {
-        const newValue = typeof value === "function" ? value(showComponentNavigator) : value;
-        setShowComponentNavigator(newValue);
+    const setComponentNavigatorOpenForSlot = useCallback((slotId, value) => {
+        const previousValue = isComponentNavigatorOpenForSlot(slotId);
+        const newValue = typeof value === "function" ? value(previousValue) : value;
+        if (slotId) {
+            setSlotComponentNavigatorVisibility((prev) => {
+                const currentValue = prev[slotId] ?? showComponentNavigatorDefault;
+                if (currentValue === newValue && prev[slotId] !== undefined) {
+                    return prev;
+                }
+                return {
+                    ...prev,
+                    [slotId]: newValue,
+                };
+            });
+        }
+        setShowComponentNavigatorDefault(newValue);
         setUserPreferences({ showComponentNavigator: newValue });
-        // On mobile, close Agents Panel when opening Component Navigator
         if (isMobile && newValue) {
             setShowAgentsPanel(false);
             setUserPreferences({ showAgentsPanel: false });
         }
     }, [
-        showComponentNavigator,
-        setShowComponentNavigator,
+        isComponentNavigatorOpenForSlot,
+        showComponentNavigatorDefault,
         setUserPreferences,
         isMobile,
         setShowAgentsPanel,
     ]);
+    const handleSetShowComponentNavigator = useCallback((value) => {
+        setComponentNavigatorOpenForSlot(activeSlotIdRef.current, value);
+    }, [setComponentNavigatorOpenForSlot]);
     const handleSetShowAgentsPanel = useCallback((value) => {
         const newValue = typeof value === "function" ? value(showAgentsPanel) : value;
         setShowAgentsPanel(newValue);
         setUserPreferences({ showAgentsPanel: newValue });
         // On mobile, close Component Navigator when opening Agents Panel
         if (isMobile && newValue) {
-            setShowComponentNavigator(false);
+            setComponentNavigatorOpenForSlot(activeSlotIdRef.current, false);
             setUserPreferences({ showComponentNavigator: false });
         }
     }, [
@@ -846,7 +887,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setShowAgentsPanel,
         setUserPreferences,
         isMobile,
-        setShowComponentNavigator,
+        setComponentNavigatorOpenForSlot,
     ]);
     // Mobile editor panel state (EditorForm shown in bottom panel on mobile)
     const [mobileEditorPanelOpen, setMobileEditorPanelOpenRaw] = useState(false);
@@ -3986,6 +4027,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setEnableCompletions,
         showComponentNavigator,
         setShowComponentNavigator: handleSetShowComponentNavigator,
+        isComponentNavigatorOpenForSlot,
+        setComponentNavigatorOpenForSlot,
         showAgentsPanel,
         setShowAgentsPanel: handleSetShowAgentsPanel,
         showMinimap,
@@ -4147,6 +4190,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         mobileEditorPanelOpen,
         handleSetMobileEditorPanelOpen,
         showComponentNavigator,
+        isComponentNavigatorOpenForSlot,
+        setComponentNavigatorOpenForSlot,
         handleSetShowComponentNavigator,
         showAgentsPanel,
         handleSetShowAgentsPanel,
@@ -4437,7 +4482,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                     setTimeout(() => {
                         setShowFullscreenHint(false);
                     }, 600);
-                }, "data-testid": "fullscreen-hint-overlay", children: _jsxs("div", { className: "fixed top-6 left-1/2 -translate-x-1/2 transform rounded-full bg-black/60 px-6 py-2.5 text-sm font-medium text-white shadow-2xl backdrop-blur-md transition-all duration-500", children: ["Press", " ", _jsx("kbd", { className: "mx-1 rounded bg-white/20 px-1.5 py-0.5 text-xs font-semibold", children: "Ctrl + F11" }), " ", "to exit fullscreen"] }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EditorChrome, { className: className, currentWorkspace: currentWorkspace, centerPanelView: centerPanelView, editContext: editContext, showComponentNavigator: showComponentNavigator, handleSetShowComponentNavigator: handleSetShowComponentNavigator, showAgentsPanel: showAgentsPanel, handleSetShowAgentsPanel: handleSetShowAgentsPanel, workspaceId: workspaceId, 
+                }, "data-testid": "fullscreen-hint-overlay", children: _jsxs("div", { className: "fixed top-6 left-1/2 -translate-x-1/2 transform rounded-full bg-black/60 px-6 py-2.5 text-sm font-medium text-white shadow-2xl backdrop-blur-md transition-all duration-500", children: ["Press", " ", _jsx("kbd", { className: "mx-1 rounded bg-white/20 px-1.5 py-0.5 text-xs font-semibold", children: "Ctrl + F11" }), " ", "to exit fullscreen"] }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EditorChrome, { className: className, currentWorkspace: currentWorkspace, centerPanelView: centerPanelView, editContext: editContext, showAgentsPanel: showAgentsPanel, handleSetShowAgentsPanel: handleSetShowAgentsPanel, workspaceId: workspaceId, 
                 // Legacy props for backwards compatibility
                 currentView: currentView, viewName: viewName }), isTourActive && (_jsx(Tour, { tourStopCallback: () => {
                     setIsTourActive(false);