@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/ApplicationMenus.tsx

@@ -0,0 +1,272 @@
+import { normalizeToolPlacement } from '@engine/tools/define-tool';
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import {
+  EditorIcon,
+  editorIcons,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  MenuSeparator as Separator,
+} from '../design-system';
+import { useEditorStore, useHistoryCommandSnapshot, useHistoryCommands } from '../EditorContext';
+import { getEditorMode } from '../editor-mode';
+import { getProjectOperations, subscribeProjectOperations } from '../project-operations';
+import { editorThemeLibrarySnapshot, subscribeEditorThemeLibrary } from '../theme-library';
+import {
+  editorThemeSnapshot,
+  setEditorThemePreference,
+  subscribeEditorTheme,
+} from '../theme-preference';
+import { getGlobalTools, subscribeGlobalTools } from '../tool-loader';
+import { openUndoHistory } from '../workspace-aux-commands';
+import {
+  resetWorkspaceDockLayout,
+  showWorkspaceNavigator,
+  showWorkspaceUtility,
+  toggleWorkspaceFocus,
+} from '../workspace-dock-controller';
+import { BUILD_OUTPUT_UTILITY_ID } from '../workspace-utility-commands';
+import { openBuildProfilesDocument } from './build-documents';
+import { openDataAssetsDocument } from './data-documents';
+import { openDebuggerPanel } from './debugger-panel-state';
+import { openProjectOperationsDocument } from './project-operation-documents';
+import { ThemeManagerDialog } from './ThemeManagerDialog';
+import { openToolDocument } from './tool-documents';
+
+type MenuId = 'edit' | 'view' | 'window' | 'debug' | 'tools';
+
+export function ApplicationMenus() {
+  const store = useEditorStore();
+  const history = useHistoryCommands();
+  const historySnapshot = useHistoryCommandSnapshot();
+  const tools = useSyncExternalStore(subscribeGlobalTools, getGlobalTools, getGlobalTools);
+  const themeId = useSyncExternalStore(
+    subscribeEditorTheme,
+    editorThemeSnapshot,
+    editorThemeSnapshot,
+  );
+  const commands = useSyncExternalStore(
+    subscribeProjectOperations,
+    getProjectOperations,
+    getProjectOperations,
+  );
+  const themeChoices = useSyncExternalStore(
+    subscribeEditorThemeLibrary,
+    editorThemeLibrarySnapshot,
+    editorThemeLibrarySnapshot,
+  );
+  const [open, setOpen] = useState<MenuId | null>(null);
+  const [themeManagerOpen, setThemeManagerOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: PointerEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(null);
+    };
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [open]);
+
+  const choose = (action: () => unknown | Promise<unknown>) => () => {
+    setOpen(null);
+    void action();
+  };
+  const panels: Record<MenuId, React.ReactNode> = {
+    edit: (
+      <>
+        <MenuItem
+          disabled={historySnapshot.busy || !historySnapshot.canUndo}
+          onSelect={choose(() => history.undo())}
+        >
+          {historySnapshot.undoLabel ? `Undo ${historySnapshot.undoLabel}` : 'Undo'}
+        </MenuItem>
+        <MenuItem
+          disabled={historySnapshot.busy || !historySnapshot.canRedo}
+          onSelect={choose(() => history.redo())}
+        >
+          {historySnapshot.redoLabel ? `Redo ${historySnapshot.redoLabel}` : 'Redo'}
+        </MenuItem>
+        <Separator />
+        <MenuItem onSelect={choose(openUndoHistory)}>Undo History…</MenuItem>
+        <Separator />
+        <MenuItem
+          disabled={store.selectedEntityIds.size === 0}
+          onSelect={choose(() => store.cutEntities())}
+        >
+          Cut
+        </MenuItem>
+        <MenuItem
+          disabled={store.selectedEntityIds.size === 0}
+          onSelect={choose(() => store.copyEntities())}
+        >
+          Copy
+        </MenuItem>
+        <MenuItem disabled={!store.hasClipboard} onSelect={choose(() => store.pasteEntities())}>
+          Paste
+        </MenuItem>
+        <MenuItem
+          disabled={store.selectedEntityIds.size === 0}
+          onSelect={choose(() => {
+            for (const id of store.selectedEntityIds) store.duplicateEntity(id);
+          })}
+        >
+          Duplicate
+        </MenuItem>
+        <MenuItem
+          disabled={store.selectedEntityIds.size === 0}
+          onSelect={choose(() => store.deleteEntities([...store.selectedEntityIds]))}
+        >
+          Delete
+        </MenuItem>
+        <Separator />
+        <MenuItem onSelect={choose(() => store.selectAll())}>Select All</MenuItem>
+        <MenuItem
+          disabled={store.selectedEntityIds.size === 0}
+          onSelect={choose(() => store.select(null))}
+        >
+          Deselect All
+        </MenuItem>
+      </>
+    ),
+    view: (
+      <>
+        <MenuItem onSelect={choose(() => store.toggleCommandPalette())}>Command Palette…</MenuItem>
+        <Separator />
+        <MenuItem onSelect={choose(toggleWorkspaceFocus)}>Toggle Focus Mode</MenuItem>
+        <Separator />
+        {themeChoices.map((choice) => (
+          <MenuItem
+            key={choice.id}
+            role="menuitemradio"
+            aria-checked={themeId === choice.id}
+            onSelect={choose(() => setEditorThemePreference(choice.id))}
+          >
+            <EditorIcon
+              icon={editorIcons.status.success}
+              style={{ opacity: themeId === choice.id ? 1 : 0 }}
+            />
+            {choice.name}
+          </MenuItem>
+        ))}
+        <Separator />
+        <MenuItem onSelect={choose(() => setThemeManagerOpen(true))}>Customize Themes…</MenuItem>
+        <Separator />
+        <MenuItem onSelect={choose(resetWorkspaceDockLayout)}>Reset Panel Layout</MenuItem>
+      </>
+    ),
+    window: (
+      <>
+        <MenuItem
+          onSelect={choose(() => window.dispatchEvent(new CustomEvent('editor:toggle-console')))}
+        >
+          Console
+        </MenuItem>
+        <MenuItem onSelect={choose(() => openDebuggerPanel('profiler'))}>Debugger</MenuItem>
+        <MenuItem onSelect={choose(() => openDataAssetsDocument(store))}>Data Assets</MenuItem>
+        {getEditorMode() === 'server' && (
+          <>
+            <MenuItem onSelect={choose(() => showWorkspaceNavigator('asset-library'))}>
+              Asset Library
+            </MenuItem>
+            <MenuItem onSelect={choose(() => openBuildProfilesDocument(store))}>
+              Build Profiles
+            </MenuItem>
+            <MenuItem onSelect={choose(() => showWorkspaceUtility(BUILD_OUTPUT_UTILITY_ID))}>
+              Build Output
+            </MenuItem>
+          </>
+        )}
+      </>
+    ),
+    debug: (
+      <>
+        <MenuItem onSelect={choose(() => openDebuggerPanel('profiler'))}>Profiler</MenuItem>
+        <MenuItem onSelect={choose(() => openDebuggerPanel('state'))}>State Watch</MenuItem>
+        <MenuItem onSelect={choose(() => openDebuggerPanel('network'))}>
+          Network Diagnostics
+        </MenuItem>
+        <MenuItem onSelect={choose(() => openDebuggerPanel('machines'))}>State Machines</MenuItem>
+        <MenuItem onSelect={choose(() => openDebuggerPanel('commands'))}>Debug Commands</MenuItem>
+      </>
+    ),
+    tools: (
+      <>
+        {getEditorMode() === 'server' && (
+          <MenuItem onSelect={choose(() => openProjectOperationsDocument(store))}>
+            Project Commands…
+            {commands.operations.length > 0 ? ` (${commands.operations.length})` : ''}
+          </MenuItem>
+        )}
+        {getEditorMode() === 'server' && <Separator />}
+        {tools.length ? (
+          tools.map((tool) => {
+            const placement = normalizeToolPlacement(tool.placement);
+            return (
+              <MenuItem
+                key={tool.id}
+                onSelect={choose(() => {
+                  if (placement === 'document') openToolDocument(store, tool.id);
+                  else showWorkspaceUtility(`tool:${tool.id}`);
+                })}
+              >
+                {tool.title}
+              </MenuItem>
+            );
+          })
+        ) : (
+          <MenuItem disabled>No custom project tools</MenuItem>
+        )}
+      </>
+    ),
+  };
+
+  return (
+    <>
+      <div ref={rootRef} style={{ display: 'flex', alignItems: 'stretch', marginLeft: 4 }}>
+        {(['edit', 'view', 'window', 'debug', 'tools'] as const).map((id) => (
+          <div key={id} style={{ position: 'relative' }}>
+            <MenuTrigger
+              data-testid={`app-menu-${id}`}
+              aria-haspopup="menu"
+              aria-expanded={open === id}
+              onClick={() => setOpen((current) => (current === id ? null : id))}
+              onKeyDown={(event) => {
+                if (event.key !== 'ArrowDown') return;
+                event.preventDefault();
+                setOpen(id);
+              }}
+              onPointerEnter={() => {
+                if (open) setOpen(id);
+              }}
+              style={{ textTransform: 'capitalize' }}
+            >
+              {id}
+            </MenuTrigger>
+            {open === id && (
+              <Menu
+                autoFocusFirst
+                onDismiss={() => {
+                  const trigger = rootRef.current?.querySelector<HTMLButtonElement>(
+                    `[data-testid="app-menu-${id}"]`,
+                  );
+                  setOpen(null);
+                  requestAnimationFrame(() => trigger?.focus());
+                }}
+                style={{
+                  position: 'absolute',
+                  top: '100%',
+                  left: 0,
+                  minWidth: 190,
+                }}
+              >
+                {panels[id]}
+              </Menu>
+            )}
+          </div>
+        ))}
+      </div>
+      {themeManagerOpen && <ThemeManagerDialog onClose={() => setThemeManagerOpen(false)} />}
+    </>
+  );
+}