@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/PlayBar.tsx

@@ -1,96 +1,32 @@
 import {
-  faDesktop,
   faForwardStep,
   faHammer,
   faPause,
   faPlay,
+  faRotateRight,
   faStop,
   faVolumeHigh,
   faVolumeXmark,
 } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useState, useSyncExternalStore } from 'react';
+import { Button, EditorIcon, IconButton, Inline, Text, ToolbarDivider } from '../design-system';
 import { useEditorStore } from '../EditorContext';
+import { getEditorMode } from '../editor-mode';
 import { getIngestPlayControl, isIngestActive } from '../ingest-mode';
 import {
   enterPlayMode,
   exitPlayMode,
   getGameAudio,
+  getRestartRequiredReason,
   pausePlayMode,
   resumePlayMode,
   stepPlayMode,
+  subscribeRestartRequired,
 } from '../play-mode';
+import { openBuildProfilesDocument } from './build-documents';
 
-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',
-};
+export { type Resolution, ResolutionPicker } from './ResolutionPicker';
 
-/**
- * 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 =
@@ -98,21 +34,22 @@ function SaveRegimeIndicator({ regime }: { regime: 'ephemeral' | 'overlay' | nul
       ? 'Play edits: saved per world (overlay)'
       : 'Play edits: discarded on stop';
   return (
-    <span data-testid="play-edit-regime" style={regimeStyle} title={label}>
+    <Text data-testid="play-edit-regime" variant="caption" tone="muted" title={label}>
       {label}
-    </span>
+    </Text>
   );
 }
 
 const MUTE_KEY = 'editor:muted';
 
-function MuteButton() {
+export 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;
+    if (muted) {
+      const audio = getGameAudio();
+      if (audio) audio.masterGain.gain.value = 0;
+    }
   });
 
   const toggle = useCallback(() => {
@@ -125,232 +62,125 @@ function MuteButton() {
   }, [muted]);
 
   return (
-    <button
-      style={{ ...btnBase, fontSize: 12 }}
+    <IconButton
+      aria-label={muted ? 'Unmute game audio' : 'Mute game audio'}
+      aria-pressed={muted}
+      size="comfortable"
       onClick={toggle}
       title={muted ? 'Unmute game audio' : 'Mute game audio'}
     >
-      <FontAwesomeIcon icon={muted ? faVolumeXmark : faVolumeHigh} />
-    </button>
+      <EditorIcon icon={muted ? faVolumeXmark : faVolumeHigh} size="md" />
+    </IconButton>
   );
 }
 
-function ResolutionPicker({
-  resolution,
-  onResolutionChange,
-  scale,
+function TransportButton({
+  label,
+  icon,
+  onClick,
+  title = label,
 }: {
-  resolution: Resolution;
-  onResolutionChange: (r: Resolution) => void;
-  scale: number;
+  label: string;
+  icon: typeof faPlay;
+  onClick: () => void;
+  title?: string;
 }) {
-  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>
+    <IconButton aria-label={label} size="comfortable" onClick={onClick} title={title}>
+      <EditorIcon icon={icon} size="md" />
+    </IconButton>
   );
 }
 
-interface PlayBarProps {
-  resolution?: Resolution;
-  onResolutionChange?: (r: Resolution) => void;
-  scale?: number;
-}
-
-export function PlayBar({ resolution, onResolutionChange, scale }: PlayBarProps) {
+/** Global transport. Resolution and mute stay in the active Game/story document toolbar. */
+export function PlayBar() {
   const store = useEditorStore();
   useSyncExternalStore(store.subscribe, store.getSnapshot);
   const state = store.playState;
-  const showRes = resolution && onResolutionChange;
+  const restartReason = useSyncExternalStore(
+    subscribeRestartRequired,
+    getRestartRequiredReason,
+    getRestartRequiredReason,
+  );
+  const restartButton = (
+    <Button
+      variant={restartReason ? 'primary' : 'ghost'}
+      size="comfortable"
+      data-testid="restart-game"
+      onClick={() => void enterPlayMode()}
+      title={
+        restartReason ??
+        'Restart game (dispose and remount every root without reloading the editor)'
+      }
+    >
+      <EditorIcon icon={faRotateRight} size="md" />
+      Restart Game
+    </Button>
+  );
   // 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>
+      <Inline className="vgai-playbar" gap={2} align="center">
+        <TransportButton
+          label={ingest.playing ? 'Pause ingested game' : 'Run ingested game'}
+          icon={ingest.playing ? faPause : faPlay}
+          onClick={() => {
+            if (ingest.playing) ingest.pause();
+            else ingest.play();
+            forceIngestRender((value) => value + 1);
+          }}
+        />
+      </Inline>
     );
   }
 
   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 && (
+      <Inline className="vgai-playbar" gap={2} align="center">
+        <TransportButton
+          label="Play"
+          title="Play (run game)"
+          icon={faPlay}
+          onClick={() => void enterPlayMode()}
+        />
+        {getEditorMode() === 'server' && (
           <>
-            <div style={separator} />
-            <ResolutionPicker
-              resolution={resolution}
-              onResolutionChange={onResolutionChange}
-              scale={scale ?? 1}
+            <ToolbarDivider />
+            <TransportButton
+              label="Build project"
+              icon={faHammer}
+              onClick={() => openBuildProfilesDocument(store)}
             />
           </>
         )}
-      </div>
+      </Inline>
     );
   }
 
   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} />
+      <Inline className="vgai-playbar" gap={2} align="center">
+        <TransportButton label="Pause" icon={faPause} onClick={() => pausePlayMode()} />
+        <TransportButton label="Stop" icon={faStop} onClick={() => exitPlayMode()} />
+        {restartButton}
+        <ToolbarDivider />
         <SaveRegimeIndicator regime={store.playEditRegime} />
-        {showRes && (
-          <>
-            <div style={separator} />
-            <ResolutionPicker
-              resolution={resolution}
-              onResolutionChange={onResolutionChange}
-              scale={scale ?? 1}
-            />
-          </>
-        )}
-      </div>
+      </Inline>
     );
   }
 
-  // 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} />
+    <Inline className="vgai-playbar" gap={2} align="center">
+      <TransportButton label="Resume" icon={faPlay} onClick={() => resumePlayMode()} />
+      {restartButton}
+      <TransportButton label="Step one frame" icon={faForwardStep} onClick={() => stepPlayMode()} />
+      <TransportButton label="Stop" icon={faStop} onClick={() => exitPlayMode()} />
+      <ToolbarDivider />
       <SaveRegimeIndicator regime={store.playEditRegime} />
-      {showRes && (
-        <>
-          <div style={separator} />
-          <ResolutionPicker
-            resolution={resolution}
-            onResolutionChange={onResolutionChange}
-            scale={scale ?? 1}
-          />
-        </>
-      )}
-    </div>
+    </Inline>
   );
 }

package/src/components/PrefabSaveDialog.tsx

@@ -1,4 +1,18 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogField,
+  DialogFieldLabel,
+  DialogFooter,
+  DialogHeader,
+  JoinedField,
+  JoinedFieldSuffix,
+  Stack,
+  Text,
+  TextInput,
+} from '../design-system';
 
 interface PrefabSaveDialogProps {
   defaultName: string;
@@ -63,139 +77,53 @@ export function PrefabSaveDialog({
     [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)}
+    <Dialog labelledBy="save-prefab-dialog-title" onDismiss={onCancel} onKeyDown={handleKeyDown}>
+      <DialogHeader titleId="save-prefab-dialog-title" title={title} />
+      <DialogBody>
+        <Stack gap={6}>
+          <DialogField htmlFor="save-prefab-folder">
+            <DialogFieldLabel>Folder</DialogFieldLabel>
+            <TextInput
+              id="save-prefab-folder"
+              value={folder}
+              onChange={(e) => setFolder(e.target.value)}
               onKeyDown={handleKeyDown}
-              placeholder="my-prefab"
-              style={{ ...inputStyle, borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
+              placeholder={defaultFolder}
             />
-            <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 }}>
+          </DialogField>
+          <DialogField htmlFor="save-prefab-filename">
+            <DialogFieldLabel>Prefab name</DialogFieldLabel>
+            <JoinedField>
+              <TextInput
+                ref={inputRef}
+                id="save-prefab-filename"
+                value={filename}
+                onChange={(e) => setFilename(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="my-prefab"
+              />
+              <JoinedFieldSuffix>.{extension}</JoinedFieldSuffix>
+            </JoinedField>
+          </DialogField>
+        </Stack>
+        <Text as="p" tone="dim">
           Will save to:{' '}
-          <span style={{ color: '#8c8c8c' }}>
+          <Text tone="muted">
             {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>
+          </Text>
+        </Text>
+      </DialogBody>
+      <DialogFooter>
+        <Button variant="ghost" size="comfortable" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="comfortable" onClick={handleSubmit}>
+          Save Prefab
+        </Button>
+      </DialogFooter>
+    </Dialog>
   );
 }