feat(site-builder): add LayerFocusContext for layers-to-array-editor focus

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

craft/src/editor/EditorShell.tsx

@@ -11,6 +11,7 @@ import { useContextMenu } from '../hooks/useContextMenu';
 import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
 import { useIsMobile } from '../hooks/useIsMobile';
 import { MobileChromeProvider } from '../state/MobileChromeContext';
+import { LayerFocusProvider } from '../panels/left/LayerFocusContext';
 import { DeviceMode } from '../types';
 
 const SHOW_GUIDES_STORAGE_KEY = 'craft-show-guides';
@@ -83,30 +84,32 @@ export const EditorShell: React.FC = () => {
     // doesn't render MobilePanelBar and TopBar's desktop branch behaves
     // identically to before (same booleans, just sourced from context).
     <MobileChromeProvider>
-      <div className="editor-app">
-        <TopBar
-          device={device}
-          onDeviceChange={setDevice}
-          showGuides={showGuides}
-          onToggleGuides={() => setShowGuides(!showGuides)}
-        />
-        <div className="editor-container">
-          {!isMobile && <LeftPanel />}
-          <div onContextMenu={handleContextMenu} style={{ flex: 1, display: 'flex', minWidth: 0 }}>
-            <Canvas device={device} showGuides={showGuides} />
+      <LayerFocusProvider>
+        <div className="editor-app">
+          <TopBar
+            device={device}
+            onDeviceChange={setDevice}
+            showGuides={showGuides}
+            onToggleGuides={() => setShowGuides(!showGuides)}
+          />
+          <div className="editor-container">
+            {!isMobile && <LeftPanel />}
+            <div onContextMenu={handleContextMenu} style={{ flex: 1, display: 'flex', minWidth: 0 }}>
+              <Canvas device={device} showGuides={showGuides} />
+            </div>
+            {!isMobile && <RightPanel />}
           </div>
-          {!isMobile && <RightPanel />}
+          {isMobile && <MobilePanelBar />}
+          {isMobile && <MobileSelectionToolbar />}
+          <ContextMenu
+            visible={menuState.visible}
+            x={menuState.x}
+            y={menuState.y}
+            nodeId={menuState.nodeId}
+            onClose={hideMenu}
+          />
         </div>
-        {isMobile && <MobilePanelBar />}
-        {isMobile && <MobileSelectionToolbar />}
-        <ContextMenu
-          visible={menuState.visible}
-          x={menuState.x}
-          y={menuState.y}
-          nodeId={menuState.nodeId}
-          onClose={hideMenu}
-        />
-      </div>
+      </LayerFocusProvider>
     </MobileChromeProvider>
   );
 };