site-builder/craft/src/editor/EditorShell.tsx

import React, { useState, useCallback } from 'react';
import { useEditor } from '@craftjs/core';
import { TopBar } from '../panels/topbar/TopBar';
import { LeftPanel } from '../panels/left/LeftPanel';
import { RightPanel } from '../panels/right/RightPanel';
import { Canvas } from './Canvas';
import { ContextMenu } from '../panels/context-menu/ContextMenu';
import { useContextMenu } from '../hooks/useContextMenu';
import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
import { DeviceMode } from '../types';

const SHOW_GUIDES_STORAGE_KEY = 'craft-show-guides';

function loadShowGuides(): boolean {
  try {
    const stored = window.localStorage.getItem(SHOW_GUIDES_STORAGE_KEY);
    return stored === null ? true : stored === '1';
  } catch {
    return true;
  }
}

export const EditorShell: React.FC = () => {
  const [device, setDevice] = useState<DeviceMode>('desktop');
  // Item 10: canvas dashed "guide" outlines toggle -- default ON, persisted
  // so the choice survives a reload. Lifted here (rather than owned by
  // TopBar or Canvas alone) because the toggle button lives in TopBar but
  // the `.guides-off` class it drives is applied to Canvas's
  // `.canvas-device-frame`, mirroring how `device` is already lifted for
  // the same reason.
  const [showGuides, setShowGuidesState] = useState<boolean>(loadShowGuides);
  const setShowGuides = useCallback((next: boolean) => {
    setShowGuidesState(next);
    try {
      window.localStorage.setItem(SHOW_GUIDES_STORAGE_KEY, next ? '1' : '0');
    } catch {
      // Storage unavailable (private browsing, etc.) -- in-memory state still works.
    }
  }, []);
  const { menuState, show: showMenu, hide: hideMenu } = useContextMenu();
  const { query } = useEditor();

  // Register keyboard shortcuts
  useKeyboardShortcuts();

  const handleContextMenu = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    // Find the selected node id
    let nodeId: string | null = null;
    try {
      const selected = query.getEvent('selected').all();
      if (selected.length > 0) {
        nodeId = selected[0];
      }
    } catch {
      // No selection
    }
    showMenu(e.clientX, e.clientY, nodeId);
  }, [query, showMenu]);

  return (
    <div className="editor-app">
      <TopBar
        device={device}
        onDeviceChange={setDevice}
        showGuides={showGuides}
        onToggleGuides={() => setShowGuides(!showGuides)}
      />
      <div className="editor-container">
        <LeftPanel />
        <div onContextMenu={handleContextMenu} style={{ flex: 1, display: 'flex', minWidth: 0 }}>
          <Canvas device={device} showGuides={showGuides} />
        </div>
        <RightPanel />
      </div>
      <ContextMenu
        visible={menuState.visible}
        x={menuState.x}
        y={menuState.y}
        nodeId={menuState.nodeId}
        onClose={hideMenu}
      />
    </div>
  );
};