@vgai/editor 0.2.0

package/src/components/BottomPanel.tsx

@@ -0,0 +1,326 @@
+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>
+  );
+}