@vgai/editor 0.2.0

package/src/components/PlayBar.tsx

@@ -0,0 +1,356 @@
+import {
+  faDesktop,
+  faForwardStep,
+  faHammer,
+  faPause,
+  faPlay,
+  faStop,
+  faVolumeHigh,
+  faVolumeXmark,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { useEditorStore } from '../EditorContext';
+import { getIngestPlayControl, isIngestActive } from '../ingest-mode';
+import {
+  enterPlayMode,
+  exitPlayMode,
+  getGameAudio,
+  pausePlayMode,
+  resumePlayMode,
+  stepPlayMode,
+} from '../play-mode';
+
+export interface Resolution {
+  label: string;
+  width: number | null;
+  height: number | null;
+}
+
+export const RESOLUTIONS: Resolution[] = [
+  { label: 'Fill', width: null, height: null },
+  { label: 'iPhone SE \u2014 375\u00d7667', width: 375, height: 667 },
+  { label: 'iPhone 14 \u2014 390\u00d7844', width: 390, height: 844 },
+  { label: 'iPhone 14 Pro Max \u2014 430\u00d7932', width: 430, height: 932 },
+  { label: 'iPad Mini \u2014 768\u00d71024', width: 768, height: 1024 },
+  { label: 'iPad Pro 11\u2033 \u2014 834\u00d71194', width: 834, height: 1194 },
+  { label: 'Laptop \u2014 1366\u00d7768', width: 1366, height: 768 },
+  { label: 'Desktop \u2014 1920\u00d71080', width: 1920, height: 1080 },
+];
+
+const barStyle: React.CSSProperties = {
+  position: 'absolute',
+  top: 8,
+  left: '50%',
+  transform: 'translateX(-50%)',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 2,
+  padding: '4px 6px',
+  background: 'rgba(36, 36, 36, 0.9)',
+  border: '1px solid #444',
+  borderRadius: 6,
+  backdropFilter: 'blur(8px)',
+  zIndex: 100,
+  pointerEvents: 'auto',
+};
+
+const btnBase: React.CSSProperties = {
+  background: 'transparent',
+  border: 'none',
+  borderRadius: 4,
+  padding: '4px 10px',
+  cursor: 'pointer',
+  color: '#c5c8ce',
+  fontSize: 14,
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4,
+};
+
+const separator: React.CSSProperties = {
+  width: 1,
+  height: 18,
+  background: '#555',
+  margin: '0 2px',
+};
+
+const regimeStyle: React.CSSProperties = {
+  fontSize: 11,
+  color: '#9a9a9a',
+  padding: '0 4px',
+  whiteSpace: 'nowrap',
+};
+
+/**
+ * Wave 20 — names the active play-edit persistence regime (the previously
+ * invisible ephemeral-vs-overlay split, docs/MULTI-WORLD-DESIGN.md §1.F /
+ * MASTER-ARCHITECTURE-REVIEW §7.4 gap 4): a single-world session's edits are
+ * discarded on stop; a multi-world (≥2) session's edits survive via per-world
+ * overlays. Read-only reflection of `store.playEditRegime` (set by
+ * play-mode.ts from the SAME decision that picks the real persistence
+ * provider) — absent whenever that regime is null (not playing).
+ */
+function SaveRegimeIndicator({ regime }: { regime: 'ephemeral' | 'overlay' | null }) {
+  if (!regime) return null;
+  const label =
+    regime === 'overlay'
+      ? 'Play edits: saved per world (overlay)'
+      : 'Play edits: discarded on stop';
+  return (
+    <span data-testid="play-edit-regime" style={regimeStyle} title={label}>
+      {label}
+    </span>
+  );
+}
+
+const MUTE_KEY = 'editor:muted';
+
+function MuteButton() {
+  const [muted, setMuted] = useState(() => localStorage.getItem(MUTE_KEY) === '1');
+
+  useEffect(() => {
+    if (!muted) return;
+    const audio = getGameAudio();
+    if (audio) audio.masterGain.gain.value = 0;
+  });
+
+  const toggle = useCallback(() => {
+    const audio = getGameAudio();
+    if (!audio) return;
+    const next = !muted;
+    audio.masterGain.gain.value = next ? 0 : 1;
+    localStorage.setItem(MUTE_KEY, next ? '1' : '0');
+    setMuted(next);
+  }, [muted]);
+
+  return (
+    <button
+      style={{ ...btnBase, fontSize: 12 }}
+      onClick={toggle}
+      title={muted ? 'Unmute game audio' : 'Mute game audio'}
+    >
+      <FontAwesomeIcon icon={muted ? faVolumeXmark : faVolumeHigh} />
+    </button>
+  );
+}
+
+function ResolutionPicker({
+  resolution,
+  onResolutionChange,
+  scale,
+}: {
+  resolution: Resolution;
+  onResolutionChange: (r: Resolution) => void;
+  scale: number;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  const isFill = resolution.width === null;
+  const label = isFill ? 'Fill' : `${resolution.width}\u00d7${resolution.height}`;
+
+  return (
+    <div ref={ref} style={{ position: 'relative' }}>
+      <button
+        style={{ ...btnBase, fontSize: 11, fontFamily: 'monospace', gap: 5 }}
+        onClick={() => setOpen((v) => !v)}
+        title="Change game resolution"
+      >
+        <FontAwesomeIcon icon={faDesktop} style={{ fontSize: 11 }} />
+        <span>{label}</span>
+        {!isFill && scale < 1 && <span style={{ color: '#888' }}>{Math.round(scale * 100)}%</span>}
+      </button>
+      {open && (
+        <div
+          style={{
+            position: 'absolute',
+            top: '100%',
+            right: 0,
+            marginTop: 4,
+            background: '#252526',
+            border: '1px solid #444',
+            borderRadius: 4,
+            overflow: 'hidden',
+            minWidth: 200,
+            zIndex: 200,
+          }}
+        >
+          {RESOLUTIONS.map((res) => (
+            <button
+              key={res.label}
+              type="button"
+              style={{
+                display: 'block',
+                width: '100%',
+                textAlign: 'left',
+                padding: '6px 12px',
+                border: 'none',
+                background: res.label === resolution.label ? '#37373d' : 'transparent',
+                color: res.label === resolution.label ? '#fff' : '#ccc',
+                fontSize: 12,
+                cursor: 'pointer',
+                fontFamily: 'inherit',
+              }}
+              onMouseEnter={(e) => {
+                (e.target as HTMLElement).style.background = '#3c3c3c';
+              }}
+              onMouseLeave={(e) => {
+                (e.target as HTMLElement).style.background =
+                  res.label === resolution.label ? '#37373d' : 'transparent';
+              }}
+              onClick={() => {
+                onResolutionChange(res);
+                setOpen(false);
+              }}
+            >
+              {res.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface PlayBarProps {
+  resolution?: Resolution;
+  onResolutionChange?: (r: Resolution) => void;
+  scale?: number;
+}
+
+export function PlayBar({ resolution, onResolutionChange, scale }: PlayBarProps) {
+  const store = useEditorStore();
+  useSyncExternalStore(store.subscribe, store.getSnapshot);
+  const state = store.playState;
+  const showRes = resolution && onResolutionChange;
+  // F17/F21: ingest sessions get a real play surface instead of a silent
+  // no-op. Mounts are cold (getIngestPlayControl's doc comment); ▶ starts or
+  // resumes the ingested game's own loop/session, ⏸ freezes it.
+  const [, forceIngestRender] = useState(0);
+  const ingest = isIngestActive() ? getIngestPlayControl() : null;
+  if (ingest) {
+    const playing = ingest.playing;
+    return (
+      <div style={barStyle}>
+        {playing ? (
+          <button
+            style={btnBase}
+            onClick={() => {
+              ingest.pause();
+              forceIngestRender((n) => n + 1);
+            }}
+            title="Pause ingested game (freezes its own loop)"
+          >
+            <FontAwesomeIcon icon={faPause} />
+          </button>
+        ) : (
+          <button
+            style={btnBase}
+            onClick={() => {
+              ingest.play();
+              forceIngestRender((n) => n + 1);
+            }}
+            title="Run ingested game (starts/resumes its own loop and session)"
+          >
+            <FontAwesomeIcon icon={faPlay} />
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  if (state === 'stopped') {
+    return (
+      <div style={barStyle}>
+        <button style={btnBase} onClick={() => enterPlayMode()} title="Play (run game)">
+          <FontAwesomeIcon icon={faPlay} />
+        </button>
+        <div style={separator} />
+        <button
+          style={{ ...btnBase, fontSize: 12 }}
+          onClick={() => window.dispatchEvent(new CustomEvent('editor:show-build-tab'))}
+          title="Build project"
+        >
+          <FontAwesomeIcon icon={faHammer} />
+        </button>
+        {showRes && (
+          <>
+            <div style={separator} />
+            <ResolutionPicker
+              resolution={resolution}
+              onResolutionChange={onResolutionChange}
+              scale={scale ?? 1}
+            />
+          </>
+        )}
+      </div>
+    );
+  }
+
+  if (state === 'playing') {
+    return (
+      <div style={barStyle}>
+        <button style={btnBase} onClick={() => pausePlayMode()} title="Pause">
+          <FontAwesomeIcon icon={faPause} />
+        </button>
+        <button style={btnBase} onClick={() => exitPlayMode()} title="Stop (Escape)">
+          <FontAwesomeIcon icon={faStop} />
+        </button>
+        <div style={separator} />
+        <MuteButton />
+        <div style={separator} />
+        <SaveRegimeIndicator regime={store.playEditRegime} />
+        {showRes && (
+          <>
+            <div style={separator} />
+            <ResolutionPicker
+              resolution={resolution}
+              onResolutionChange={onResolutionChange}
+              scale={scale ?? 1}
+            />
+          </>
+        )}
+      </div>
+    );
+  }
+
+  // paused
+  return (
+    <div style={barStyle}>
+      <button style={btnBase} onClick={() => resumePlayMode()} title="Resume">
+        <FontAwesomeIcon icon={faPlay} />
+      </button>
+      <button style={btnBase} onClick={() => stepPlayMode()} title="Step one frame">
+        <FontAwesomeIcon icon={faForwardStep} />
+      </button>
+      <button style={btnBase} onClick={() => exitPlayMode()} title="Stop (Escape)">
+        <FontAwesomeIcon icon={faStop} />
+      </button>
+      <div style={separator} />
+      <MuteButton />
+      <div style={separator} />
+      <SaveRegimeIndicator regime={store.playEditRegime} />
+      {showRes && (
+        <>
+          <div style={separator} />
+          <ResolutionPicker
+            resolution={resolution}
+            onResolutionChange={onResolutionChange}
+            scale={scale ?? 1}
+          />
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/PrefabSaveDialog.tsx

@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+interface PrefabSaveDialogProps {
+  defaultName: string;
+  onSave: (path: string) => void;
+  onCancel: () => void;
+  /** File extension (sans leading dot), default `prefab.json`. E1.c
+   *  (scene-ui-mode's UI-prefab dialog) passes `uiprefab.json` — a distinct
+   *  file schema/folder from the 3D prefab convention this dialog defaults to. */
+  extension?: string;
+  /** Default folder shown in the dialog, default `prefabs`. */
+  defaultFolder?: string;
+  /** Dialog title, default `Save as Prefab`. */
+  title?: string;
+}
+
+/**
+ * Modal dialog that asks for a filename & folder to save a prefab.
+ * Path is relative to the `public/` root (e.g. "prefabs/crate.prefab.json").
+ */
+export function PrefabSaveDialog({
+  defaultName,
+  onSave,
+  onCancel,
+  extension = 'prefab.json',
+  defaultFolder = 'prefabs',
+  title = 'Save as Prefab',
+}: PrefabSaveDialogProps) {
+  const [folder, setFolder] = useState(defaultFolder);
+  const [filename, setFilename] = useState(defaultName);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.select();
+  }, []);
+
+  const suffixPattern = useMemo(
+    () => new RegExp(`\\.${extension.replace(/\./g, '\\.')}$`),
+    [extension],
+  );
+
+  const handleSubmit = useCallback(() => {
+    const cleanName = filename.trim().replace(suffixPattern, '');
+    if (!cleanName) return;
+    const cleanFolder = folder.trim().replace(/^\/+|\/+$/g, '');
+    const path = cleanFolder
+      ? `${cleanFolder}/${cleanName}.${extension}`
+      : `${cleanName}.${extension}`;
+    onSave(path);
+  }, [filename, folder, onSave, extension, suffixPattern]);
+
+  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' }}>
+          {title}
+        </div>
+
+        <div style={{ marginBottom: 12 }}>
+          <div style={labelStyle}>Folder</div>
+          <input
+            type="text"
+            value={folder}
+            onChange={(e) => setFolder(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={defaultFolder}
+            style={inputStyle}
+          />
+        </div>
+
+        <div style={{ marginBottom: 16 }}>
+          <div style={labelStyle}>Prefab name</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-prefab"
+              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',
+              }}
+            >
+              .{extension}
+            </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() || '...'}.{extension}
+          </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: '#3b82f6',
+              color: '#fff',
+              border: '1px solid #60a5fa',
+              borderRadius: 4,
+              padding: '6px 16px',
+              cursor: 'pointer',
+              fontSize: 12,
+              fontWeight: 600,
+            }}
+          >
+            Save Prefab
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}