@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/ReactCanvasControls.tsx

@@ -0,0 +1,185 @@
+import {
+  faExpand,
+  faMagnifyingGlassMinus,
+  faMagnifyingGlassPlus,
+} from '@fortawesome/free-solid-svg-icons';
+import { type RefObject, useCallback, useSyncExternalStore } from 'react';
+import type { ViewportToolContext } from '../authoring/viewport-tool-context';
+import {
+  getWorldCanvasViewport,
+  setWorldCanvasViewport,
+  subscribeWorldCanvasViewport,
+} from '../authoring/world-canvas-viewport-state';
+import {
+  getWorldPan,
+  panTransformValue,
+  setWorldView,
+  subscribeWorldPan,
+} from '../authoring/world-pan-state';
+import { Button, EditorIcon, FloatingToolbar, IconButton, Select } from '../design-system';
+import { useEditorStore } from '../EditorContext';
+
+const VIEWPORT_PRESETS = {
+  fill: null,
+  desktop: { width: 1440, height: 900 },
+  tablet: { width: 768, height: 1024 },
+  mobile: { width: 390, height: 844 },
+} as const;
+
+export function ReactCanvasControls({
+  containerRef,
+  context,
+}: {
+  containerRef: RefObject<HTMLDivElement | null>;
+  context: ViewportToolContext | null;
+}) {
+  const store = useEditorStore();
+  useSyncExternalStore(store.subscribe, store.getSnapshot);
+  const view = useSyncExternalStore(subscribeWorldPan, getWorldPan);
+  const viewport = useSyncExternalStore(subscribeWorldCanvasViewport, getWorldCanvasViewport);
+
+  const zoomAroundCenter = useCallback(
+    (requestedZoom: number) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const zoom = Math.min(4, Math.max(0.1, requestedZoom));
+      const cx = container.clientWidth / 2;
+      const cy = container.clientHeight / 2;
+      const worldX = (cx - view.x) / view.zoom;
+      const worldY = (cy - view.y) / view.zoom;
+      setWorldView(cx - worldX * zoom, cy - worldY * zoom, zoom);
+    },
+    [containerRef, view],
+  );
+
+  const zoomToSelection = useCallback(() => {
+    const container = containerRef.current;
+    const selectedId = [...store.selectedEntityIds].at(-1);
+    if (!container || !selectedId) return;
+    const rect = context?.adapter.rects?.rect(selectedId);
+    if (!rect || rect.width <= 0 || rect.height <= 0) return;
+    const availableWidth = Math.max(1, container.clientWidth - 96);
+    const availableHeight = Math.max(1, container.clientHeight - 96);
+    const zoom = Math.min(
+      4,
+      Math.max(0.1, Math.min(availableWidth / rect.width, availableHeight / rect.height)),
+    );
+    setWorldView(
+      container.clientWidth / 2 - (rect.x + rect.width / 2) * zoom,
+      container.clientHeight / 2 - (rect.y + rect.height / 2) * zoom,
+      zoom,
+    );
+  }, [containerRef, context, store]);
+
+  const selectViewport = useCallback(
+    (preset: keyof typeof VIEWPORT_PRESETS) => {
+      const container = containerRef.current;
+      const size = VIEWPORT_PRESETS[preset];
+      if (!container || size === null) {
+        setWorldCanvasViewport(null, null);
+        setWorldView(0, 0, 1);
+        return;
+      }
+      setWorldCanvasViewport(size.width, size.height);
+      const zoom = Math.min(
+        1,
+        Math.max(
+          0.1,
+          Math.min(
+            (container.clientWidth - 96) / size.width,
+            (container.clientHeight - 96) / size.height,
+          ),
+        ),
+      );
+      setWorldView(
+        (container.clientWidth - size.width * zoom) / 2,
+        (container.clientHeight - size.height * zoom) / 2,
+        zoom,
+      );
+    },
+    [containerRef],
+  );
+
+  if (context?.kind !== 'react' || !context.adapter.rects) return null;
+
+  const viewportValue =
+    Object.entries(VIEWPORT_PRESETS).find(([, size]) =>
+      size === null
+        ? viewport.width === null
+        : size.width === viewport.width && size.height === viewport.height,
+    )?.[0] ?? 'fill';
+
+  return (
+    <>
+      {viewport.width !== null && viewport.height !== null && (
+        <div
+          data-testid="react-canvas-device-frame"
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            zIndex: 0,
+            width: viewport.width,
+            height: viewport.height,
+            transform: panTransformValue(view),
+            transformOrigin: '0 0',
+            pointerEvents: 'none',
+            background: '#fff',
+            boxShadow: '0 0 0 1px #ffffff40, 0 8px 30px #0009',
+          }}
+        />
+      )}
+      <FloatingToolbar
+        label="React canvas view"
+        data-testid="react-canvas-zoom-controls"
+        className="vgai-react-canvas-controls"
+      >
+        <Select
+          aria-label="Responsive viewport"
+          title="Responsive viewport"
+          value={viewportValue}
+          onChange={(event) => selectViewport(event.target.value as keyof typeof VIEWPORT_PRESETS)}
+          className="vgai-react-viewport-select"
+        >
+          <option value="fill">Fill</option>
+          <option value="desktop">Desktop · 1440×900</option>
+          <option value="tablet">Tablet · 768×1024</option>
+          <option value="mobile">Mobile · 390×844</option>
+        </Select>
+        <IconButton
+          aria-label="Zoom out"
+          title="Zoom out"
+          size="comfortable"
+          onClick={() => zoomAroundCenter(view.zoom / 1.2)}
+        >
+          <EditorIcon icon={faMagnifyingGlassMinus} size="md" />
+        </IconButton>
+        <Button
+          variant="ghost"
+          aria-label="Reset zoom to 100%"
+          title="Reset zoom to 100%"
+          size="comfortable"
+          onClick={() => zoomAroundCenter(1)}
+        >
+          {Math.round(view.zoom * 100)}%
+        </Button>
+        <IconButton
+          aria-label="Zoom in"
+          title="Zoom in"
+          size="comfortable"
+          onClick={() => zoomAroundCenter(view.zoom * 1.2)}
+        >
+          <EditorIcon icon={faMagnifyingGlassPlus} size="md" />
+        </IconButton>
+        <IconButton
+          aria-label="Zoom to selection"
+          title="Zoom to selection"
+          size="comfortable"
+          onClick={zoomToSelection}
+        >
+          <EditorIcon icon={faExpand} size="md" />
+        </IconButton>
+      </FloatingToolbar>
+    </>
+  );
+}

package/src/components/ResolutionPicker.tsx

@@ -0,0 +1,85 @@
+import { faDesktop } from '@fortawesome/free-solid-svg-icons';
+import { useEffect, useRef, useState } from 'react';
+import { Button, EditorIcon, Menu, MenuItem, Text } from '../design-system';
+
+export interface Resolution {
+  label: string;
+  width: number | null;
+  height: number | null;
+}
+
+export const RESOLUTIONS: Resolution[] = [
+  { label: 'Fill', width: null, height: null },
+  { label: 'iPhone SE — 375×667', width: 375, height: 667 },
+  { label: 'iPhone 14 — 390×844', width: 390, height: 844 },
+  { label: 'iPhone 14 Pro Max — 430×932', width: 430, height: 932 },
+  { label: 'iPad Mini — 768×1024', width: 768, height: 1024 },
+  { label: 'iPad Pro 11″ — 834×1194', width: 834, height: 1194 },
+  { label: 'Laptop — 1366×768', width: 1366, height: 768 },
+  { label: 'Desktop — 1920×1080', width: 1920, height: 1080 },
+];
+
+/** Shared preview-resolution picker for Game and isolated story documents. */
+export function ResolutionPicker({
+  resolution,
+  onResolutionChange,
+  scale,
+  title = 'Change preview resolution',
+}: {
+  resolution: Resolution;
+  onResolutionChange: (resolution: Resolution) => void;
+  scale: number;
+  title?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.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}×${resolution.height}`;
+
+  return (
+    <div ref={ref} className="vgai-playbar-popover-anchor">
+      <Button
+        variant="ghost"
+        size="comfortable"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+        title={title}
+      >
+        <EditorIcon icon={faDesktop} size="md" />
+        <Text variant="code">{label}</Text>
+        {!isFill && scale < 1 && (
+          <Text variant="caption" tone="dim">
+            {Math.round(scale * 100)}%
+          </Text>
+        )}
+      </Button>
+      {open && (
+        <Menu className="vgai-resolution-menu" onDismiss={() => setOpen(false)}>
+          {RESOLUTIONS.map((candidate) => (
+            <MenuItem
+              key={candidate.label}
+              role="menuitemradio"
+              aria-checked={candidate.label === resolution.label}
+              onSelect={() => {
+                onResolutionChange(candidate);
+                setOpen(false);
+              }}
+            >
+              {candidate.label}
+            </MenuItem>
+          ))}
+        </Menu>
+      )}
+    </div>
+  );
+}

package/src/components/RootActivateDialog.tsx

@@ -13,14 +13,23 @@
  * root loaded, untouched.
  */
 import { useEffect, useRef } from 'react';
+import { Button, Dialog, DialogBody, DialogFooter, DialogHeader, Text } from '../design-system';
 
 interface RootActivateDialogProps {
   label: string;
+  /** Dialog heading — defaults to the D8 scene-root copy; A4's world
+   *  focus-switch passes its own (same dialog, same dirty semantics). */
+  title?: string;
   onConfirm: () => void;
   onCancel: () => void;
 }
 
-export function RootActivateDialog({ label, onConfirm, onCancel }: RootActivateDialogProps) {
+export function RootActivateDialog({
+  label,
+  title = 'Switch scene root?',
+  onConfirm,
+  onCancel,
+}: RootActivateDialogProps) {
   const confirmRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
@@ -28,78 +37,40 @@ export function RootActivateDialog({ label, onConfirm, onCancel }: RootActivateD
   }, []);
 
   return (
-    <div
+    <Dialog
       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}
+      labelledBy="root-activate-dialog-title"
+      onDismiss={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 }}>
+      <DialogHeader titleId="root-activate-dialog-title" title={title} />
+      <DialogBody>
+        <Text as="p" tone="muted">
           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>
+          <Text variant="label">{label}</Text> will save them first, then load it.
+        </Text>
+      </DialogBody>
+      <DialogFooter>
+        <Button
+          variant="ghost"
+          size="comfortable"
+          data-testid="root-activate-cancel"
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+        <Button
+          ref={confirmRef}
+          variant="primary"
+          size="comfortable"
+          data-testid="root-activate-confirm"
+          onClick={onConfirm}
+        >
+          Save &amp; Switch
+        </Button>
+      </DialogFooter>
+    </Dialog>
   );
 }

package/src/components/SaveDialog.tsx

@@ -1,4 +1,18 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogField,
+  DialogFieldLabel,
+  DialogFooter,
+  DialogHeader,
+  JoinedField,
+  JoinedFieldSuffix,
+  Stack,
+  Text,
+  TextInput,
+} from '../design-system';
 import { useEditorStore } from '../EditorContext';
 
 interface SaveDialogProps {
@@ -59,139 +73,53 @@ export function SaveDialog({ onSave, onCancel }: SaveDialogProps) {
     [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)}
+    <Dialog labelledBy="save-scene-dialog-title" onDismiss={onCancel} onKeyDown={handleKeyDown}>
+      <DialogHeader titleId="save-scene-dialog-title" title="Save Scene" />
+      <DialogBody>
+        <Stack gap={6}>
+          <DialogField htmlFor="save-scene-folder">
+            <DialogFieldLabel>Folder</DialogFieldLabel>
+            <TextInput
+              id="save-scene-folder"
+              value={folder}
+              onChange={(e) => setFolder(e.target.value)}
               onKeyDown={handleKeyDown}
-              placeholder="my-scene"
-              style={{ ...inputStyle, borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
+              placeholder="scenes"
             />
-            <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 }}>
+          </DialogField>
+          <DialogField htmlFor="save-scene-filename">
+            <DialogFieldLabel>Filename</DialogFieldLabel>
+            <JoinedField>
+              <TextInput
+                ref={inputRef}
+                id="save-scene-filename"
+                value={filename}
+                onChange={(e) => setFilename(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="my-scene"
+              />
+              <JoinedFieldSuffix>.vscn.json</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() || '...'}.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>
+          </Text>
+        </Text>
+      </DialogBody>
+      <DialogFooter>
+        <Button variant="ghost" size="comfortable" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="comfortable" onClick={handleSubmit}>
+          Save
+        </Button>
+      </DialogFooter>
+    </Dialog>
   );
 }

package/src/components/SaveStatus.tsx

@@ -1,9 +1,10 @@
 import { useSyncExternalStore } from 'react';
 import { getActiveAuthoring } from '../authoring/active-adapter';
+import { Button } from '../design-system';
 import { useEditorStore } from '../EditorContext';
 
 /**
- * Compact save-status affordance for the project header. Surfaces whether the
+ * Compact save-status affordance for the status bar. 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).
@@ -12,58 +13,39 @@ export function SaveStatus() {
   const store = useEditorStore();
   useSyncExternalStore(store.subscribe, store.getSnapshot);
   const state = store.saveState;
+  // Success is the steady state, not an alert. Keep the status bar quiet
+  // until there is unsaved work or a failure requiring attention.
+  if (state === 'saved') return null;
   // 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
+    <Button
       type="button"
       data-testid="save-status"
       data-save-state={state}
+      variant="ghost"
+      size="compact"
+      className="vgai-save-status"
       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,
-        }}
-      />
+      <span className="vgai-save-status-dot" />
       {config.label}
-    </button>
+    </Button>
   );
 }