@vgai/editor 0.2.0

package/src/components/WorldTextEditor.tsx

@@ -0,0 +1,86 @@
+/**
+ * WorldTextEditor — spec 27 §6 D3.b (docs/unified-world-editor/
+ * 27-visual-react-editing.md) double-click-to-edit-text: an inline
+ * `<textarea>` positioned over the double-clicked node's rect. Escape
+ * cancels; Enter (no shift) or blur commits. Purely a controlled
+ * presentational component — `WorldSelectionOverlay` decides WHETHER to
+ * render this (via `adapter.text`/`textForId`, rule zero) and supplies the
+ * initial text + the commit/cancel callbacks; this file has no adapter/DOM
+ * reach of its own.
+ */
+import { useEffect, useRef, useState } from 'react';
+
+export interface WorldTextEditorProps {
+  rect: { x: number; y: number; width: number; height: number };
+  initialText: string;
+  onCommit: (text: string) => void;
+  onCancel: () => void;
+}
+
+export function WorldTextEditor({
+  rect,
+  initialText,
+  onCommit,
+  onCancel,
+}: WorldTextEditorProps): React.ReactNode {
+  const [value, setValue] = useState(initialText);
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const committedRef = useRef(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    el.select();
+  }, []);
+
+  const commit = (): void => {
+    if (committedRef.current) return;
+    committedRef.current = true;
+    onCommit(value);
+  };
+
+  const cancel = (): void => {
+    if (committedRef.current) return;
+    committedRef.current = true;
+    onCancel();
+  };
+
+  return (
+    <textarea
+      ref={ref}
+      data-testid="world-text-editor"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      onBlur={commit}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          e.stopPropagation();
+          cancel();
+        } else if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          commit();
+        }
+      }}
+      style={{
+        position: 'absolute',
+        left: rect.x,
+        top: rect.y,
+        width: Math.max(rect.width, 40),
+        height: Math.max(rect.height, 20),
+        boxSizing: 'border-box',
+        zIndex: 60,
+        pointerEvents: 'auto',
+        resize: 'none',
+        font: 'inherit',
+        fontSize: 13,
+        lineHeight: 1.3,
+        padding: 2,
+        border: '2px solid #0d99ff',
+        outline: 'none',
+        background: '#fff',
+        color: '#111',
+      }}
+    />
+  );
+}

package/src/components/asset-viewers/AssetViewer.tsx

@@ -0,0 +1,38 @@
+import type { AssetTab } from '../../editor-store';
+import { AudioViewer } from './AudioViewer';
+import { GenericJsonViewer } from './GenericJsonViewer';
+import { ImageViewer } from './ImageViewer';
+import { InputMapViewer } from './InputMapViewer';
+import { ModelViewer } from './ModelViewer';
+import { OnlineAssetDetail } from './OnlineAssetDetail';
+
+interface AssetViewerProps {
+  tab: AssetTab;
+}
+
+export function AssetViewer({ tab }: AssetViewerProps) {
+  // Online asset that hasn't been downloaded yet
+  if (tab.online) {
+    return <OnlineAssetDetail tabKey={tab.key} online={tab.online} />;
+  }
+
+  switch (tab.kind) {
+    case 'model':
+      return <ModelViewer assetPath={tab.assetPath} />;
+    case 'image':
+      return <ImageViewer assetPath={tab.assetPath} />;
+    case 'audio':
+      return <AudioViewer assetPath={tab.assetPath} />;
+    case 'json':
+      if (tab.assetPath.endsWith('.inputmap.json')) {
+        return <InputMapViewer assetPath={tab.assetPath} />;
+      }
+      return <GenericJsonViewer assetPath={tab.assetPath} />;
+    default:
+      return (
+        <div style={{ padding: 16, color: '#8c8c8c', fontSize: 12 }}>
+          No viewer available for this asset type.
+        </div>
+      );
+  }
+}

package/src/components/asset-viewers/AudioViewer.tsx

@@ -0,0 +1,149 @@
+import { useEffect, useRef, useState } from 'react';
+import { SectionHeader } from '../primitives/SectionHeader';
+
+const labelStyle: React.CSSProperties = { fontSize: 11, color: '#8c8c8c', marginBottom: 2 };
+const btnStyle: React.CSSProperties = {
+  background: '#333',
+  color: '#c5c8ce',
+  border: '1px solid #444',
+  borderRadius: 3,
+  padding: '4px 16px',
+  cursor: 'pointer',
+  fontSize: 11,
+};
+
+export function AudioViewer({ assetPath }: { assetPath: string }) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [playing, setPlaying] = useState(false);
+  const [duration, setDuration] = useState<number | null>(null);
+  const [currentTime, setCurrentTime] = useState(0);
+  const fileName = assetPath.split('/').pop() ?? assetPath;
+  const ext = assetPath.split('.').pop()?.toUpperCase() ?? '';
+
+  // Pause when component unmounts (tab closed or switched)
+  useEffect(() => {
+    return () => {
+      audioRef.current?.pause();
+    };
+  }, []);
+
+  const togglePlay = () => {
+    const el = audioRef.current;
+    if (!el) return;
+    if (playing) {
+      el.pause();
+    } else {
+      el.play();
+    }
+    setPlaying(!playing);
+  };
+
+  const formatTime = (t: number) => {
+    const m = Math.floor(t / 60);
+    const s = Math.floor(t % 60);
+    return `${m}:${s.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <div style={{ fontWeight: 600, fontSize: 12, color: '#c5c8ce', wordBreak: 'break-all' }}>
+        {fileName}
+      </div>
+      {/* Player */}
+      <div
+        style={{
+          width: '100%',
+          background: '#1e1e1e',
+          borderRadius: 4,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+          gap: 8,
+          padding: 16,
+        }}
+      >
+        {/* Audio icon */}
+        <svg viewBox="0 0 24 24" width={48} height={48}>
+          <rect x="3" y="3" width="18" height="18" rx="2" fill="#34d399" />
+          <path
+            d="M9 8l4-2v12l-4-2H7V10h2zm6 1v6m2-5v4"
+            stroke="#fff"
+            strokeWidth="1.5"
+            fill="none"
+            strokeLinecap="round"
+          />
+        </svg>
+        {/* Progress */}
+        {duration != null && (
+          <div style={{ width: '100%', fontSize: 10, color: '#8c8c8c', textAlign: 'center' }}>
+            {formatTime(currentTime)} / {formatTime(duration)}
+          </div>
+        )}
+        {/* Scrub bar */}
+        {duration != null && duration > 0 && (
+          <div
+            style={{
+              width: '100%',
+              height: 4,
+              background: '#333',
+              borderRadius: 2,
+              cursor: 'pointer',
+              position: 'relative',
+            }}
+            onClick={(e) => {
+              const rect = e.currentTarget.getBoundingClientRect();
+              const frac = (e.clientX - rect.left) / rect.width;
+              if (audioRef.current) {
+                audioRef.current.currentTime = frac * duration;
+              }
+            }}
+          >
+            <div
+              style={{
+                width: `${(currentTime / duration) * 100}%`,
+                height: '100%',
+                background: '#34d399',
+                borderRadius: 2,
+              }}
+            />
+          </div>
+        )}
+        <button type="button" onClick={togglePlay} style={btnStyle}>
+          {playing ? 'Pause' : 'Play'}
+        </button>
+      </div>
+      <audio
+        ref={audioRef}
+        src={assetPath}
+        onLoadedMetadata={() => {
+          if (audioRef.current) setDuration(audioRef.current.duration);
+        }}
+        onTimeUpdate={() => {
+          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
+        }}
+        onEnded={() => setPlaying(false)}
+      />
+      <SectionHeader label="Info">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+          <div>
+            <div style={labelStyle}>Path</div>
+            <div style={{ fontSize: 11, color: '#c5c8ce', wordBreak: 'break-all' }}>
+              {assetPath}
+            </div>
+          </div>
+          {duration != null && (
+            <div>
+              <div style={labelStyle}>Duration</div>
+              <div style={{ fontSize: 11, color: '#c5c8ce' }}>{formatTime(duration)}</div>
+            </div>
+          )}
+          <div>
+            <div style={labelStyle}>Format</div>
+            <div style={{ fontSize: 11, color: '#c5c8ce' }}>{ext}</div>
+          </div>
+        </div>
+      </SectionHeader>
+    </div>
+  );
+}

package/src/components/asset-viewers/GenericJsonViewer.tsx

@@ -0,0 +1,77 @@
+import { resolveUrl } from '@engine/loader';
+import { useEffect, useState } from 'react';
+import { SectionHeader } from '../primitives/SectionHeader';
+
+const labelStyle: React.CSSProperties = { fontSize: 11, color: '#8c8c8c', marginBottom: 2 };
+
+export function GenericJsonViewer({ assetPath }: { assetPath: string }) {
+  const [content, setContent] = useState<string | null>(null);
+  const [error, setError] = useState(false);
+  const fileName = assetPath.split('/').pop() ?? assetPath;
+
+  useEffect(() => {
+    let cancelled = false;
+    setContent(null);
+    setError(false);
+    fetch(resolveUrl(assetPath))
+      .then((r) => r.text())
+      .then((text) => {
+        // Pretty-print if valid JSON
+        try {
+          const parsed = JSON.parse(text);
+          if (!cancelled) setContent(JSON.stringify(parsed, null, 2));
+        } catch {
+          if (!cancelled) setContent(text);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setError(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [assetPath]);
+
+  return (
+    <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <div style={{ fontWeight: 600, fontSize: 12, color: '#c5c8ce', wordBreak: 'break-all' }}>
+        {fileName}
+      </div>
+      <div
+        style={{
+          background: '#1e1e1e',
+          borderRadius: 4,
+          padding: 8,
+          overflow: 'auto',
+          scrollbarWidth: 'none',
+          maxHeight: 500,
+        }}
+      >
+        {error ? (
+          <span style={{ color: '#F53352', fontSize: 11 }}>Failed to load file</span>
+        ) : content === null ? (
+          <span style={{ color: '#8c8c8c', fontSize: 11 }}>Loading...</span>
+        ) : (
+          <pre
+            style={{
+              margin: 0,
+              fontSize: 10,
+              color: '#c5c8ce',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all',
+              fontFamily: 'monospace',
+            }}
+          >
+            {content}
+          </pre>
+        )}
+      </div>
+      <SectionHeader label="Info" defaultOpen={false}>
+        <div>
+          <div style={labelStyle}>Path</div>
+          <div style={{ fontSize: 11, color: '#c5c8ce', wordBreak: 'break-all' }}>{assetPath}</div>
+        </div>
+      </SectionHeader>
+    </div>
+  );
+}

package/src/components/asset-viewers/ImageViewer.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { SectionHeader } from '../primitives/SectionHeader';
+
+const labelStyle: React.CSSProperties = { fontSize: 11, color: '#8c8c8c', marginBottom: 2 };
+
+export function ImageViewer({ assetPath }: { assetPath: string }) {
+  const [dimensions, setDimensions] = useState<{ w: number; h: number } | null>(null);
+  const fileName = assetPath.split('/').pop() ?? assetPath;
+  const ext = assetPath.split('.').pop()?.toUpperCase() ?? '';
+
+  return (
+    <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <div style={{ fontWeight: 600, fontSize: 12, color: '#c5c8ce', wordBreak: 'break-all' }}>
+        {fileName}
+      </div>
+      <div
+        style={{
+          width: '100%',
+          borderRadius: 4,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 8,
+          backgroundImage:
+            'linear-gradient(45deg, #2a2a2a 25%, transparent 25%, transparent 75%, #2a2a2a 75%), linear-gradient(45deg, #2a2a2a 25%, transparent 25%, transparent 75%, #2a2a2a 75%)',
+          backgroundSize: '16px 16px',
+          backgroundPosition: '0 0, 8px 8px',
+          backgroundColor: '#1e1e1e',
+        }}
+      >
+        <img
+          src={assetPath}
+          alt={fileName}
+          style={{ maxWidth: '100%', maxHeight: 300, objectFit: 'contain' }}
+          onLoad={(e) => {
+            const img = e.currentTarget;
+            setDimensions({ w: img.naturalWidth, h: img.naturalHeight });
+          }}
+        />
+      </div>
+      <SectionHeader label="Info">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+          <div>
+            <div style={labelStyle}>Path</div>
+            <div style={{ fontSize: 11, color: '#c5c8ce', wordBreak: 'break-all' }}>
+              {assetPath}
+            </div>
+          </div>
+          {dimensions && (
+            <div>
+              <div style={labelStyle}>Dimensions</div>
+              <div style={{ fontSize: 11, color: '#c5c8ce' }}>
+                {dimensions.w} &times; {dimensions.h}
+              </div>
+            </div>
+          )}
+          <div>
+            <div style={labelStyle}>Format</div>
+            <div style={{ fontSize: 11, color: '#c5c8ce' }}>{ext}</div>
+          </div>
+        </div>
+      </SectionHeader>
+    </div>
+  );
+}

package/src/components/asset-viewers/InputMapViewer.tsx

@@ -0,0 +1,206 @@
+import { InputMapFileSchema } from '@engine/input/schema';
+import { resolveUrl } from '@engine/loader';
+import { useEffect, useState } from 'react';
+import { SectionHeader } from '../primitives/SectionHeader';
+
+const labelStyle: React.CSSProperties = { fontSize: 11, color: '#8c8c8c', marginBottom: 2 };
+const cellStyle: React.CSSProperties = {
+  fontSize: 11,
+  color: '#c5c8ce',
+  padding: '3px 4px',
+  borderBottom: '1px solid #333',
+};
+
+interface Binding {
+  type: string;
+  code?: string;
+  button?: number;
+  axis?: number;
+  xAxis?: number;
+  yAxis?: number;
+  direction?: string;
+  deadzone?: number;
+}
+
+interface InputMapData {
+  version?: number;
+  actions?: Record<string, { bindings: Binding[] }>;
+}
+
+function describeBinding(b: Binding): string {
+  switch (b.type) {
+    case 'key':
+      return b.code?.replace('Key', '') ?? 'Key';
+    case 'mouse_button':
+      return `Mouse ${b.button === 0 ? 'Left' : b.button === 1 ? 'Middle' : 'Right'}`;
+    case 'gamepad_button':
+      return `Gamepad Button ${b.button}`;
+    case 'gamepad_axis':
+      return `Gamepad Axis ${b.axis}${b.direction ? ` ${b.direction}` : ''}`;
+    // No `mouse_move`/`gamepad_axis_pair` cases: those binding kinds are
+    // REJECTED at parse by InputMapFileSchema (T4.1/T4.6 dead stubs), so a
+    // file containing them never reaches this preview — it shows the
+    // invalid-file error state instead (R3, §7.2: this panel used to echo
+    // them from a raw fetch, past the schema).
+    default:
+      return b.type;
+  }
+}
+
+/**
+ * R3 (MASTER-ARCHITECTURE-REVIEW.md §7.2): the pure validate-before-preview
+ * data path, exported for unit tests (the repo's component-test convention —
+ * see network-inspector.test.ts: node environment, no jsdom; test the data
+ * function the component renders from). The panel used to raw-fetch and
+ * render whatever JSON came back — a file the runtime will reject (T4.6
+ * fetch-validation) showed a normal-looking preview.
+ */
+export function validateInputMapForViewer(
+  json: unknown,
+): { ok: true; data: InputMapData } | { ok: false; issues: string[] } {
+  const result = InputMapFileSchema.safeParse(json);
+  if (!result.success) {
+    return {
+      ok: false,
+      issues: result.error.issues.map((i) => `${i.path.join('.') || '(root)'}: ${i.message}`),
+    };
+  }
+  // Render the original JSON (now proven valid) — the local view interfaces
+  // are a structural subset of InputMapFile.
+  return { ok: true, data: json as InputMapData };
+}
+
+/** Loud invalid-file state: file name + first issues (a reusable asset-viewer error panel). */
+export function AssetValidationError({
+  kind,
+  fileName,
+  issues,
+}: {
+  kind: string;
+  fileName: string;
+  issues: string[];
+}) {
+  const shown = issues.slice(0, 3);
+  return (
+    <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 6 }}>
+      <div style={{ color: '#F53352', fontSize: 12, fontWeight: 700 }}>
+        Invalid {kind} — the runtime will reject this file
+      </div>
+      <div style={{ color: '#c5c8ce', fontSize: 11, wordBreak: 'break-all' }}>{fileName}</div>
+      <div
+        style={{
+          color: '#F53352',
+          fontSize: 11,
+          fontFamily: 'monospace',
+          whiteSpace: 'pre-wrap',
+          border: '1px solid #F53352',
+          borderRadius: 3,
+          padding: 8,
+        }}
+      >
+        {shown.join('\n')}
+        {issues.length > shown.length
+          ? `\n… and ${issues.length - shown.length} more issue(s)`
+          : ''}
+      </div>
+    </div>
+  );
+}
+
+export function InputMapViewer({ assetPath }: { assetPath: string }) {
+  const [data, setData] = useState<InputMapData | null>(null);
+  const [error, setError] = useState(false);
+  const [invalid, setInvalid] = useState<string[] | null>(null);
+  const fileName = assetPath.split('/').pop() ?? assetPath;
+
+  useEffect(() => {
+    let cancelled = false;
+    setData(null);
+    setError(false);
+    setInvalid(null);
+    fetch(resolveUrl(assetPath))
+      .then((r) => r.json())
+      .then((json) => {
+        if (cancelled) return;
+        const result = validateInputMapForViewer(json);
+        if (result.ok) setData(result.data);
+        else setInvalid(result.issues);
+      })
+      .catch(() => {
+        if (!cancelled) setError(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [assetPath]);
+
+  if (error) {
+    return <div style={{ padding: 16, color: '#F53352', fontSize: 12 }}>Failed to load file</div>;
+  }
+  if (invalid) {
+    return <AssetValidationError kind="input map" fileName={fileName} issues={invalid} />;
+  }
+  if (!data) {
+    return <div style={{ padding: 16, color: '#8c8c8c', fontSize: 12 }}>Loading...</div>;
+  }
+
+  const actions = data.actions ? Object.entries(data.actions) : [];
+
+  return (
+    <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <div style={{ fontWeight: 600, fontSize: 12, color: '#c5c8ce', wordBreak: 'break-all' }}>
+        {fileName}
+      </div>
+
+      <SectionHeader label="Actions">
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          {actions.map(([name, action]) => (
+            <div
+              key={name}
+              style={{ ...cellStyle, display: 'flex', flexDirection: 'column', gap: 2 }}
+            >
+              <span style={{ fontWeight: 600 }}>{name}</span>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+                {action.bindings.map((b, i) => (
+                  <span
+                    key={i}
+                    style={{
+                      background: '#333',
+                      border: '1px solid #444',
+                      borderRadius: 3,
+                      padding: '1px 6px',
+                      fontSize: 10,
+                      color: '#c5c8ce',
+                    }}
+                  >
+                    {describeBinding(b)}
+                  </span>
+                ))}
+              </div>
+            </div>
+          ))}
+          {actions.length === 0 && (
+            <div style={{ fontSize: 11, color: '#8c8c8c', padding: 4 }}>No actions defined</div>
+          )}
+        </div>
+      </SectionHeader>
+
+      <SectionHeader label="Info" defaultOpen={false}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+          <div>
+            <div style={labelStyle}>Path</div>
+            <div style={{ fontSize: 11, color: '#c5c8ce', wordBreak: 'break-all' }}>
+              {assetPath}
+            </div>
+          </div>
+          {data.version != null && (
+            <div>
+              <div style={labelStyle}>Version</div>
+              <div style={{ fontSize: 11, color: '#c5c8ce' }}>{data.version}</div>
+            </div>
+          )}
+        </div>
+      </SectionHeader>
+    </div>
+  );
+}