@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/BottomPanel.tsx

@@ -1,326 +0,0 @@
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
-import { connectToolFileEvents } from '../asset-events';
-import { editorConsole } from '../editor-console';
-import { getEditorMode } from '../editor-mode';
-import { onProjectChange } from '../project-manager';
-import { SceneUITimelineTab } from '../scene-ui-mode/scene-ui-timeline-tab';
-import { getDockTools, refreshProjectTools, subscribeDockTools } from '../tool-loader';
-import { AssetBrowser } from './AssetBrowser';
-import { BuildPanel } from './BuildPanel';
-import { ConsolePanel } from './ConsolePanel';
-import { DataPanel } from './DataPanel';
-import { OnlineAssetBrowser } from './OnlineAssetBrowser';
-import { ToolHost } from './ToolHost';
-
-// Built-in tabs, plus one dynamic `tool:<id>` entry per discovered project
-// dock tool (W4, docs/DATA-TOOLS-DESIGN.md §3.2 — the tab union is extended
-// past the built-ins at runtime; the fixed layout itself stays).
-type BottomTab = 'assets' | 'library' | 'console' | 'build' | 'data' | 'timeline';
-type ActiveTab = BottomTab | `tool:${string}`;
-
-// Phase A cleanup: Build (spawns `npm run <script>` server-side) and Library
-// (proxies Poly Haven/ambientcg through the Node server, writes via raw
-// `node:fs`) have no browser-mode equivalent — see `editor-api.ts`'s Asset
-// Library section comment and `startExport`'s doc comment. Hidden outright
-// rather than shown-but-broken: neither is a navigation/creation path, so
-// there's no dead-end risk in hiding them (unlike ProjectScreen's
-// New-Project/Open-Project affordances).
-const SHOW_NODE_ONLY_TABS = getEditorMode() === 'server';
-
-interface BottomPanelProps {
-  onOpenScene?: (assetPath: string) => void;
-}
-
-export function BottomPanel({ onOpenScene }: BottomPanelProps) {
-  const [activeTab, setActiveTab] = useState<ActiveTab>('assets');
-  const [panelHeight, setPanelHeight] = useState(200);
-  const resizingRef = useRef(false);
-  const resizeStartRef = useRef({ y: 0, height: 0 });
-
-  // Subscribe to console for error badge count
-  useSyncExternalStore(editorConsole.subscribe, editorConsole.getSnapshot);
-  const errorCount = editorConsole.counts.error + editorConsole.counts.warn;
-
-  // Project tools (W4/W3, docs/DATA-TOOLS-DESIGN.md §3): live registry from
-  // the src/tools/ folder scan. Discover on mount and again whenever the open
-  // project changes; tool-loader's own HMR listener keeps it fresh on edits.
-  // The refresh ALSO (re)registers inspector-placement tools into the section
-  // registry — this dock is simply where the discovery pass is anchored.
-  // Deliberately NOT gated on play state — docked tools tune-while-playing
-  // (§3.2's whole point), so play mode needs nothing here.
-  const dockTools = useSyncExternalStore(subscribeDockTools, getDockTools);
-  useEffect(() => {
-    void refreshProjectTools();
-    return onProjectChange(() => void refreshProjectTools());
-  }, []);
-
-  // W6a: a NEW `src/tools/*.tool.tsx` (or a deleted one) shows up as a ⚙ tab
-  // with no reload — the server's `src/`-scoped watcher broadcasts
-  // add/unlink only (never `change`; edits already ride the existing
-  // vgai:script-update HMR path), and `refreshProjectTools` is a cheap full
-  // rescan, so any add/unlink just re-runs the same discovery pass above.
-  useEffect(() => connectToolFileEvents(() => void refreshProjectTools()), []);
-
-  // Listen for backtick toggle event from hotkey system
-  useEffect(() => {
-    const handler = () => setActiveTab((prev) => (prev === 'console' ? 'assets' : 'console'));
-    window.addEventListener('editor:toggle-console', handler);
-    return () => window.removeEventListener('editor:toggle-console', handler);
-  }, []);
-
-  // Listen for build tab activation from PlayBar / command palette
-  useEffect(() => {
-    const handler = () => setActiveTab('build');
-    window.addEventListener('editor:show-build-tab', handler);
-    return () => window.removeEventListener('editor:show-build-tab', handler);
-  }, []);
-
-  const onResizeMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      resizingRef.current = true;
-      resizeStartRef.current = { y: e.clientY, height: panelHeight };
-      const onMouseMove = (ev: MouseEvent) => {
-        if (!resizingRef.current) return;
-        const delta = resizeStartRef.current.y - ev.clientY;
-        const newHeight = Math.max(
-          100,
-          Math.min(window.innerHeight * 0.5, resizeStartRef.current.height + delta),
-        );
-        setPanelHeight(newHeight);
-      };
-      const onMouseUp = () => {
-        resizingRef.current = false;
-        document.removeEventListener('mousemove', onMouseMove);
-        document.removeEventListener('mouseup', onMouseUp);
-      };
-      document.addEventListener('mousemove', onMouseMove);
-      document.addEventListener('mouseup', onMouseUp);
-    },
-    [panelHeight],
-  );
-
-  // A deleted tool file takes its tab with it (discovery is the folder scan,
-  // D3) — don't leave the panel showing a ghost selection.
-  useEffect(() => {
-    if (activeTab.startsWith('tool:') && !dockTools.some((t) => `tool:${t.id}` === activeTab)) {
-      setActiveTab('assets');
-    }
-  }, [dockTools, activeTab]);
-
-  const tabStyle = (tab: ActiveTab): React.CSSProperties => ({
-    background: activeTab === tab ? '#2c2c2c' : 'transparent',
-    color: activeTab === tab ? '#c5c8ce' : '#777',
-    border: 'none',
-    borderBottom: activeTab === tab ? '2px solid #579EFF' : '2px solid transparent',
-    padding: '4px 12px',
-    cursor: 'pointer',
-    fontSize: 11,
-    fontWeight: 600,
-    textTransform: 'uppercase',
-    display: 'flex',
-    alignItems: 'center',
-    gap: 6,
-  });
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: panelHeight, flexShrink: 0 }}>
-      {/* Resize handle */}
-      <div
-        onMouseDown={onResizeMouseDown}
-        style={{
-          height: 4,
-          cursor: 'ns-resize',
-          background: 'transparent',
-          flexShrink: 0,
-        }}
-        onMouseEnter={(e) => {
-          (e.currentTarget as HTMLDivElement).style.background = '#579EFF';
-        }}
-        onMouseLeave={(e) => {
-          if (!resizingRef.current)
-            (e.currentTarget as HTMLDivElement).style.background = 'transparent';
-        }}
-      />
-
-      {/* Tab bar */}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          background: '#242424',
-          borderBottom: '1px solid #333',
-          flexShrink: 0,
-        }}
-      >
-        <button type="button" onClick={() => setActiveTab('assets')} style={tabStyle('assets')}>
-          Assets
-        </button>
-        {SHOW_NODE_ONLY_TABS && (
-          <button type="button" onClick={() => setActiveTab('library')} style={tabStyle('library')}>
-            Library
-          </button>
-        )}
-        <button type="button" onClick={() => setActiveTab('console')} style={tabStyle('console')}>
-          Console
-          {errorCount > 0 && activeTab !== 'console' && (
-            <span
-              style={{
-                background: editorConsole.counts.error > 0 ? '#FF6B6B' : '#FFD866',
-                color: editorConsole.counts.error > 0 ? '#fff' : '#000',
-                borderRadius: 8,
-                padding: '0 5px',
-                fontSize: 9,
-                fontWeight: 700,
-                minWidth: 16,
-                textAlign: 'center',
-              }}
-            >
-              {errorCount}
-            </span>
-          )}
-        </button>
-        {SHOW_NODE_ONLY_TABS && (
-          <button type="button" onClick={() => setActiveTab('build')} style={tabStyle('build')}>
-            Build
-          </button>
-        )}
-        {/* W2 (docs/DATA-TOOLS-DESIGN.md §2.4) — the data-asset dock tab:
-            lists src/data/*.data.json and edits values in place. Always
-            present, like every built-in tab; `DataPanel` owns its own
-            empty state when the project has no data assets. */}
-        <button
-          type="button"
-          data-testid="bottom-tab-data"
-          onClick={() => setActiveTab('data')}
-          style={tabStyle('data')}
-        >
-          Data
-        </button>
-        {/* E1.b (spec-27 §7 E1) — the scene-UI keyframe timeline; content
-            shows a friendly empty state when no scene-UI child is open
-            (`SceneUITimelineTab`'s own gate), same discipline as `Inspector`'s
-            "nothing selected" branch rather than the tab itself appearing/
-            disappearing. */}
-        <button
-          type="button"
-          data-testid="bottom-tab-timeline"
-          onClick={() => setActiveTab('timeline')}
-          style={tabStyle('timeline')}
-        >
-          UI Timeline
-        </button>
-        {/* W4 (docs/DATA-TOOLS-DESIGN.md §3.5) — project dock tools: grouped
-            after a separator at the end of the built-in tab row, visually
-            distinct (⚙ marker), same tab styling. One tab per discovered
-            src/tools/*.tool.tsx; no tools, no separator. */}
-        {dockTools.length > 0 && (
-          <div
-            data-testid="bottom-tab-tools-separator"
-            style={{ width: 1, height: 16, background: '#444', margin: '0 6px', flexShrink: 0 }}
-          />
-        )}
-        {dockTools.map((t) => (
-          <button
-            key={t.id}
-            type="button"
-            data-testid={`bottom-tab-tool-${t.id}`}
-            onClick={() => setActiveTab(`tool:${t.id}`)}
-            style={tabStyle(`tool:${t.id}`)}
-            title={t.file}
-          >
-            <span aria-hidden="true">⚙</span>
-            {t.title}
-          </button>
-        ))}
-      </div>
-
-      {/* Tab content */}
-      <div
-        style={{
-          flex: 1,
-          minHeight: 0,
-          display: activeTab === 'assets' ? 'flex' : 'none',
-          flexDirection: 'column',
-        }}
-      >
-        <AssetBrowser {...(onOpenScene ? { onOpenScene } : {})} />
-      </div>
-      {SHOW_NODE_ONLY_TABS && (
-        <div
-          style={{
-            flex: 1,
-            minHeight: 0,
-            display: activeTab === 'library' ? 'flex' : 'none',
-            flexDirection: 'column',
-          }}
-        >
-          <OnlineAssetBrowser />
-        </div>
-      )}
-      <div
-        style={{
-          flex: 1,
-          minHeight: 0,
-          display: activeTab === 'console' ? 'flex' : 'none',
-          flexDirection: 'column',
-        }}
-      >
-        <ConsolePanel />
-      </div>
-      {SHOW_NODE_ONLY_TABS && (
-        <div
-          style={{
-            flex: 1,
-            minHeight: 0,
-            display: activeTab === 'build' ? 'flex' : 'none',
-            flexDirection: 'column',
-          }}
-        >
-          <BuildPanel />
-        </div>
-      )}
-      <div
-        data-testid="bottom-tab-data-panel"
-        style={{
-          flex: 1,
-          minHeight: 0,
-          display: activeTab === 'data' ? 'flex' : 'none',
-          flexDirection: 'column',
-        }}
-      >
-        <DataPanel active={activeTab === 'data'} />
-      </div>
-      <div
-        data-testid="bottom-tab-timeline-panel"
-        style={{
-          flex: 1,
-          minHeight: 0,
-          display: activeTab === 'timeline' ? 'flex' : 'none',
-          flexDirection: 'column',
-          overflow: 'auto',
-        }}
-      >
-        <SceneUITimelineTab />
-      </div>
-      {/* Project dock tools stay MOUNTED like every built-in tab (display
-          toggling, not conditional render) — a tool keeps its local state
-          across tab switches and play mode alike. Keyed on the load version
-          so an HMR reload remounts fresh (also resetting a tripped error
-          boundary — see ToolHost.tsx). */}
-      {dockTools.map((t) => (
-        <div
-          key={`${t.id}:${t.version}`}
-          style={{
-            flex: 1,
-            minHeight: 0,
-            display: activeTab === `tool:${t.id}` ? 'flex' : 'none',
-            flexDirection: 'column',
-          }}
-        >
-          <ToolHost tool={t} />
-        </div>
-      ))}
-    </div>
-  );
-}