@vgai/editor 0.2.0

package/src/components/RightPanel.tsx

@@ -0,0 +1,166 @@
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useEditorStore } from '../EditorContext';
+import type { AssetTab } from '../editor-store';
+import { AssetViewer } from './asset-viewers/AssetViewer';
+import { Inspector } from './Inspector';
+
+export function RightPanel() {
+  const store = useEditorStore();
+  const activeKey = store.activeTabKey;
+  const tabs = store.assetTabs;
+
+  return (
+    <div
+      style={{
+        width: 280,
+        borderLeft: '1px solid #333',
+        display: 'flex',
+        flexDirection: 'column',
+        background: '#242424',
+        pointerEvents: 'auto',
+      }}
+    >
+      {/* Only show tab bar when asset tabs are open */}
+      {tabs.length > 0 && (
+        <TabBar
+          activeKey={activeKey}
+          assetTabs={tabs}
+          onSelectTab={(key) => store.setActiveTab(key)}
+          onCloseTab={(key) => store.closeAssetTab(key)}
+        />
+      )}
+      <div style={{ flex: 1, overflowY: 'auto', scrollbarWidth: 'none', minHeight: 0 }}>
+        {activeKey === '__inspector__' ? (
+          // C2 — the ONE inspector shell: `Inspector` itself resolves matched
+          // registered sections per selected node (see
+          // `inspector-section-registry.ts`); this shell no longer branches
+          // between two panels (the A3 dispatch seam is deleted).
+          <Inspector />
+        ) : (
+          (() => {
+            const tab = tabs.find((t) => t.key === activeKey);
+            return tab ? <AssetViewer tab={tab} /> : null;
+          })()
+        )}
+      </div>
+    </div>
+  );
+}
+
+function TabBar({
+  activeKey,
+  assetTabs,
+  onSelectTab,
+  onCloseTab,
+}: {
+  activeKey: string;
+  assetTabs: readonly AssetTab[];
+  onSelectTab: (key: string) => void;
+  onCloseTab: (key: string) => void;
+}) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        borderBottom: '1px solid #333',
+        background: '#2c2c2c',
+        overflowX: 'auto',
+        scrollbarWidth: 'none',
+        flexShrink: 0,
+      }}
+    >
+      <TabButton
+        label="Inspector"
+        active={activeKey === '__inspector__'}
+        closeable={false}
+        onClick={() => onSelectTab('__inspector__')}
+      />
+      {assetTabs.map((tab) => (
+        <TabButton
+          key={tab.key}
+          label={tab.label}
+          active={activeKey === tab.key}
+          closeable
+          onClick={() => onSelectTab(tab.key)}
+          onClose={() => onCloseTab(tab.key)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function TabButton({
+  label,
+  active,
+  closeable,
+  onClick,
+  onClose,
+}: {
+  label: string;
+  active: boolean;
+  closeable: boolean;
+  onClick: () => void;
+  onClose?: () => void;
+}) {
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') onClick();
+      }}
+      onMouseDown={(e) => {
+        // Middle-click to close
+        if (e.button === 1 && closeable) {
+          e.preventDefault();
+          onClose?.();
+        }
+      }}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+        padding: '4px 8px',
+        fontSize: 11,
+        color: active ? '#c5c8ce' : '#8c8c8c',
+        background: active ? '#242424' : 'transparent',
+        borderBottom: active ? '2px solid #579EFF' : '2px solid transparent',
+        cursor: 'pointer',
+        userSelect: 'none',
+        whiteSpace: 'nowrap',
+        maxWidth: 120,
+        flexShrink: 0,
+      }}
+    >
+      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }} title={label}>
+        {label}
+      </span>
+      {closeable && (
+        <span
+          role="button"
+          tabIndex={0}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClose?.();
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.stopPropagation();
+              onClose?.();
+            }
+          }}
+          style={{
+            fontSize: 9,
+            opacity: 0.6,
+            cursor: 'pointer',
+            padding: '0 2px',
+          }}
+        >
+          <FontAwesomeIcon icon={faXmark} />
+        </span>
+      )}
+    </div>
+  );
+}

package/src/components/RootActivateDialog.tsx

@@ -0,0 +1,105 @@
+/**
+ * D8 root-activation confirmation dialog (A4) — shown by `DefaultEditorLayout`
+ * when `authoring/root-activation.ts`'s `requestRootActivation` finds the
+ * active adapter dirty. Portal-free (unlike `PrefabSaveDialog`/`SaveDialog`,
+ * rendered directly in `DefaultEditorLayout`'s own tree — no bottom-panel
+ * portal needed here), same modal shape/styling precedent.
+ *
+ * Two actions only (no "Discard"): this editor autosaves continuously — there
+ * is no meaningful "throw away my last few keystrokes" affordance elsewhere,
+ * so "dirty" here just means "the 300ms autosave debounce hasn't flushed
+ * yet". Confirm flushes (via the adapter's own `rootGroups.activate`, which
+ * already `saveNow()`s when dirty) and switches; Cancel leaves the current
+ * root loaded, untouched.
+ */
+import { useEffect, useRef } from 'react';
+
+interface RootActivateDialogProps {
+  label: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function RootActivateDialog({ label, onConfirm, onCancel }: RootActivateDialogProps) {
+  const confirmRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    confirmRef.current?.focus();
+  }, []);
+
+  return (
+    <div
+      data-testid="root-activate-dialog"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(0,0,0,0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 10000,
+        pointerEvents: 'auto',
+      }}
+      onClick={onCancel}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') onCancel();
+      }}
+    >
+      <div
+        style={{
+          background: '#2c2c2c',
+          border: '1px solid #444',
+          borderRadius: 8,
+          padding: 20,
+          minWidth: 360,
+          boxShadow: '0 8px 32px rgba(0,0,0,0.6)',
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 12, color: '#c5c8ce' }}>
+          Switch scene root?
+        </div>
+        <div style={{ fontSize: 12, color: '#9aa0a6', marginBottom: 16, lineHeight: 1.5 }}>
+          The current scene has unsaved changes still pending autosave. Switching to{' '}
+          <span style={{ color: '#c5c8ce' }}>{label}</span> will save them first, then load it.
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+          <button
+            type="button"
+            data-testid="root-activate-cancel"
+            onClick={onCancel}
+            style={{
+              background: '#333',
+              color: '#c5c8ce',
+              border: '1px solid #444',
+              borderRadius: 4,
+              padding: '6px 16px',
+              cursor: 'pointer',
+              fontSize: 12,
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            ref={confirmRef}
+            type="button"
+            data-testid="root-activate-confirm"
+            onClick={onConfirm}
+            style={{
+              background: '#3b82f6',
+              color: '#fff',
+              border: '1px solid #60a5fa',
+              borderRadius: 4,
+              padding: '6px 16px',
+              cursor: 'pointer',
+              fontSize: 12,
+              fontWeight: 600,
+            }}
+          >
+            Save &amp; Switch
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/SaveDialog.tsx

@@ -0,0 +1,197 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEditorStore } from '../EditorContext';
+
+interface SaveDialogProps {
+  onSave: (path: string) => void;
+  onCancel: () => void;
+}
+
+/**
+ * Modal dialog that asks the user for a filename & folder to save the scene.
+ * Path is relative to the `public/` root (e.g. "scenes/my-level.vscn.json").
+ */
+export function SaveDialog({ onSave, onCancel }: SaveDialogProps) {
+  const store = useEditorStore();
+  const defaultFolder = 'scenes';
+  const docName = store.sceneName || 'Untitled';
+
+  // Pre-fill from existing save path or derive from document name
+  const [folder, setFolder] = useState(() => {
+    if (store.savePath) {
+      const lastSlash = store.savePath.lastIndexOf('/');
+      return lastSlash >= 0 ? store.savePath.slice(0, lastSlash) : defaultFolder;
+    }
+    return defaultFolder;
+  });
+  const [filename, setFilename] = useState(() => {
+    if (store.savePath) {
+      const lastSlash = store.savePath.lastIndexOf('/');
+      const name = lastSlash >= 0 ? store.savePath.slice(lastSlash + 1) : store.savePath;
+      return name.replace(/\.vscn\.json$/, '');
+    }
+    return docName;
+  });
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.select();
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    const cleanName = filename.trim().replace(/\.vscn\.json$/, '');
+    if (!cleanName) return;
+    const cleanFolder = folder.trim().replace(/^\/+|\/+$/g, '');
+    const path = cleanFolder ? `${cleanFolder}/${cleanName}.vscn.json` : `${cleanName}.vscn.json`;
+    onSave(path);
+  }, [filename, folder, onSave]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        handleSubmit();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [handleSubmit, onCancel],
+  );
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%',
+    background: '#1e1e1e',
+    border: '1px solid #444',
+    borderRadius: 3,
+    color: '#c5c8ce',
+    fontSize: 12,
+    padding: '6px 8px',
+    outline: 'none',
+    boxSizing: 'border-box',
+  };
+
+  const labelStyle: React.CSSProperties = {
+    fontSize: 11,
+    color: '#8c8c8c',
+    marginBottom: 4,
+  };
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(0,0,0,0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 10000,
+        pointerEvents: 'auto',
+      }}
+      onClick={onCancel}
+      onKeyDown={handleKeyDown}
+    >
+      <div
+        style={{
+          background: '#2c2c2c',
+          border: '1px solid #444',
+          borderRadius: 8,
+          padding: 20,
+          minWidth: 360,
+          boxShadow: '0 8px 32px rgba(0,0,0,0.6)',
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 16, color: '#c5c8ce' }}>
+          Save Scene
+        </div>
+
+        <div style={{ marginBottom: 12 }}>
+          <div style={labelStyle}>Folder</div>
+          <input
+            type="text"
+            value={folder}
+            onChange={(e) => setFolder(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="scenes"
+            style={inputStyle}
+          />
+        </div>
+
+        <div style={{ marginBottom: 16 }}>
+          <div style={labelStyle}>Filename</div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 0 }}>
+            <input
+              ref={inputRef}
+              type="text"
+              value={filename}
+              onChange={(e) => setFilename(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="my-scene"
+              style={{ ...inputStyle, borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
+            />
+            <span
+              style={{
+                background: '#333',
+                border: '1px solid #444',
+                borderLeft: 'none',
+                borderTopRightRadius: 3,
+                borderBottomRightRadius: 3,
+                padding: '6px 8px',
+                fontSize: 12,
+                color: '#666',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              .vscn.json
+            </span>
+          </div>
+        </div>
+
+        <div style={{ fontSize: 11, color: '#666', marginBottom: 16 }}>
+          Will save to:{' '}
+          <span style={{ color: '#8c8c8c' }}>
+            {folder.trim().replace(/^\/+|\/+$/g, '')}
+            {folder.trim() ? '/' : ''}
+            {filename.trim() || '...'}.vscn.json
+          </span>
+        </div>
+
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+          <button
+            type="button"
+            onClick={onCancel}
+            style={{
+              background: '#333',
+              color: '#c5c8ce',
+              border: '1px solid #444',
+              borderRadius: 4,
+              padding: '6px 16px',
+              cursor: 'pointer',
+              fontSize: 12,
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleSubmit}
+            style={{
+              background: '#579EFF',
+              color: '#fff',
+              border: '1px solid #6AADFF',
+              borderRadius: 4,
+              padding: '6px 16px',
+              cursor: 'pointer',
+              fontSize: 12,
+              fontWeight: 600,
+            }}
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/SaveStatus.tsx

@@ -0,0 +1,69 @@
+import { useSyncExternalStore } from 'react';
+import { getActiveAuthoring } from '../authoring/active-adapter';
+import { useEditorStore } from '../EditorContext';
+
+/**
+ * Compact save-status affordance for the project header. Surfaces whether the
+ * scene is in sync with disk — previously autosave failures were completely
+ * silent (no dirty dot, no error), a data-loss trap. Click to force a save
+ * (also bound to Cmd/Ctrl+S).
+ */
+export function SaveStatus() {
+  const store = useEditorStore();
+  useSyncExternalStore(store.subscribe, store.getSnapshot);
+  const state = store.saveState;
+  // Destination is the active adapter's own — never hard-coded to `.vscn` — so
+  // the status honestly reflects where a save (or autosave) would actually go
+  // (design docs/PERSISTENCE-PROVIDER-DESIGN.md §2).
+  const destination = getActiveAuthoring(store).persistence?.destination;
+
+  const config = {
+    saved: { dot: '#3a9a52', label: 'Saved', color: '#7a7a7a', title: 'All changes saved' },
+    unsaved: {
+      dot: '#c9a227',
+      label: 'Unsaved',
+      color: '#c9a227',
+      title: 'Unsaved changes — click to save (Cmd/Ctrl+S)',
+    },
+    failed: {
+      dot: '#d9534f',
+      label: 'Save failed',
+      color: '#e06178',
+      title: 'Save failed — changes are NOT on disk. Click to retry.',
+    },
+  }[state];
+  const title = destination ? `${config.title} — ${destination}` : config.title;
+
+  return (
+    <button
+      type="button"
+      data-testid="save-status"
+      data-save-state={state}
+      onClick={() => void getActiveAuthoring(store).persistence?.save()}
+      title={title}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 5,
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        padding: '2px 6px',
+        borderRadius: 3,
+        color: config.color,
+        fontSize: 10,
+      }}
+    >
+      <span
+        style={{
+          width: 7,
+          height: 7,
+          borderRadius: '50%',
+          background: config.dot,
+          flexShrink: 0,
+        }}
+      />
+      {config.label}
+    </button>
+  );
+}

package/src/components/StatsOverlay.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { useEditorStats } from '../EditorContext';
+
+export function StatsOverlay() {
+  const stats = useEditorStats();
+  const [, setTick] = useState(0);
+
+  useEffect(() => {
+    const id = setInterval(() => setTick((t) => t + 1), 200);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 48,
+        right: 8,
+        background: 'rgba(0, 0, 0, 0.7)',
+        borderRadius: 4,
+        padding: '6px 10px',
+        pointerEvents: 'auto',
+        fontSize: 11,
+        color: '#c5c8ce',
+        fontFamily: 'monospace',
+        lineHeight: '16px',
+      }}
+    >
+      <div>FPS: {stats.fps.toFixed(0)}</div>
+      <div>Draw: {stats.drawCalls}</div>
+      <div>Tris: {stats.triangles.toLocaleString()}</div>
+      <div>Frame: {stats.frameTime.toFixed(1)}ms</div>
+    </div>
+  );
+}

package/src/components/ToolHost.tsx

@@ -0,0 +1,80 @@
+/**
+ * Dock-tool host (W4, docs/DATA-TOOLS-DESIGN.md §3.2/§3.4) — renders one
+ * project tool's component inside the bottom dock, wrapped in an error
+ * boundary: tools are PROJECT code running in the editor (§4's trust note),
+ * and a crashing tool must never take the editor down with it. A render
+ * crash swaps the panel content for a teaching message naming the source
+ * file; the tab, and every other tool, keep working. An HMR reload of the
+ * tool remounts the host fresh (`BottomPanel` keys it on the load version),
+ * which also clears a tripped boundary — fix the file, save, retry for free.
+ *
+ * Chrome stays editor-styled (§3.4): the host provides the scrollable
+ * editor-toned container; whatever the tool renders inside is its own
+ * business (plain React, the project's choice).
+ */
+
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+import type { DockTool } from '../tool-loader';
+
+interface ToolErrorBoundaryProps {
+  /** Project-relative source file, shown in the crash message. */
+  file: string;
+  children: ReactNode;
+}
+
+interface ToolErrorBoundaryState {
+  error: Error | null;
+}
+
+/** Shared by the dock host below and `InspectorToolSection.tsx` (W3) — one
+ *  crash-containment story for every project-tool mount point. */
+export class ToolErrorBoundary extends Component<ToolErrorBoundaryProps, ToolErrorBoundaryState> {
+  override state: ToolErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): ToolErrorBoundaryState {
+    return { error };
+  }
+
+  override componentDidCatch(error: Error, info: ErrorInfo): void {
+    // Loud in the editor console too (same channel the tool-loader's
+    // teaching errors use), with React's component stack for context.
+    // biome-ignore lint/suspicious/noConsole: deliberate, greppable — a crashed project tool must be diagnosable from the console (§6.5 "errors teach"), mirroring tool-loader.ts
+    console.error(
+      `[tools] ${this.props.file} crashed while rendering:`,
+      error,
+      info.componentStack,
+    );
+  }
+
+  override render(): ReactNode {
+    if (this.state.error) {
+      return (
+        <div style={{ padding: 12, fontSize: 12, color: '#FF6B6B', maxWidth: 640 }}>
+          <div style={{ fontWeight: 600, marginBottom: 4 }}>
+            Tool crashed: <code>{this.props.file}</code>
+          </div>
+          <div style={{ whiteSpace: 'pre-wrap' }}>{String(this.state.error)}</div>
+          <div style={{ color: '#8c8c8c', marginTop: 6 }}>
+            The editor is fine — fix the tool file and save; it reloads in place.
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+/** One dock tool's panel content: editor-styled scroll container + boundary. */
+export function ToolHost({ tool }: { tool: DockTool }) {
+  const ToolComponent = tool.Component;
+  return (
+    <div
+      data-testid={`tool-panel-${tool.id}`}
+      style={{ flex: 1, minHeight: 0, overflow: 'auto', color: '#c5c8ce' }}
+    >
+      <ToolErrorBoundary file={tool.file}>
+        <ToolComponent />
+      </ToolErrorBoundary>
+    </div>
+  );
+}