@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/ProjectScreen.tsx

@@ -1,3 +1,4 @@
+import { Button, IconButton, Select, TextInput, themeVars } from '../design-system';
 /**
  * Project screen — shown before the editor when no project is specified.
  *
@@ -7,6 +8,12 @@
  */
 
 import { useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import {
+  BUNDLED_EDITOR_COMPATIBILITY,
+  BUNDLED_EDITOR_VERSION,
+  BUNDLED_ENGINE_VERSION,
+} from '../build-identity';
+import { TONE_ERROR } from '../design-system';
 import {
   browseFolder,
   createProject,
@@ -17,6 +24,11 @@ import {
   type RecentProject,
   revealInFinder,
 } from '../editor-api';
+import {
+  assertProjectCompatibility,
+  ProjectCompatibilityError,
+  type StartupRecovery,
+} from '../editor-compatibility';
 import { getEditorMode } from '../editor-mode';
 import { type ActiveProject, type ProjectConfig, setActiveProject } from '../project-manager';
 import {
@@ -26,6 +38,7 @@ import {
   type StorageBackend,
 } from '../storage';
 import { readProjectManifest, seedIfEmpty } from '../storage/seed';
+import { zIndex } from '../z-index';
 
 // ---------------------------------------------------------------------------
 // Injected stylesheet for interactive states
@@ -33,12 +46,18 @@ import { readProjectManifest, seedIfEmpty } from '../storage/seed';
 
 const STYLE_ID = 'vgai-project-screen';
 
+// D-15: this CSS block used to hand-retype its own palette (three different
+// themeVars.accent.default blues inside one file, its own menu recipe, its own button shapes)
+// because a template string can't share inline-style constants. It now
+// interpolates `theme.ts` tokens directly — same delivery mechanism
+// (className + injected sheet, the only way to get :hover/:focus-visible/
+// :disabled here), one source of truth for the values.
 const CSS = `
 .ps-card {
   position: relative;
-  background: #222;
-  border: 1px solid #333;
-  border-radius: 8px;
+  background: ${themeVars.surface.panel};
+  border: 1px solid ${themeVars.boundary.default};
+  border-radius: ${themeVars.shape.large};
   padding: 14px 14px 12px;
   cursor: pointer;
   text-align: left;
@@ -47,21 +66,21 @@ const CSS = `
   transition: border-color 0.15s, background 0.15s;
   width: 100%;
 }
-.ps-card:hover { border-color: #555; background: #2a2a2a; }
-.ps-card:focus-visible { outline: 1px solid #579eff; outline-offset: 1px; }
-.ps-card:disabled { opacity: 0.5; cursor: default; }
+.ps-card:hover { border-color: ${themeVars.boundary.strong}; background: ${themeVars.surface.chrome}; }
+.ps-card:focus-visible { outline: 1px solid ${themeVars.accent.default}; outline-offset: 1px; }
+.ps-card:disabled, .ps-card[aria-disabled="true"] { opacity: 0.5; cursor: default; }
 
 .ps-card-remove {
   position: absolute;
   top: 6px;
   right: 6px;
-  background: #333;
+  background: ${themeVars.surface.raised};
   border: none;
-  color: #888;
-  font-size: 14px;
+  color: ${themeVars.content.dim};
+  font-size: var(--vgai-font-xl);
   width: 20px;
   height: 20px;
-  border-radius: 4px;
+  border-radius: ${themeVars.shape.small};
   cursor: pointer;
   opacity: 0;
   transition: opacity 0.15s;
@@ -70,58 +89,19 @@ const CSS = `
   justify-content: center;
 }
 .ps-card:hover .ps-card-remove { opacity: 1; }
-.ps-card-remove:hover { background: #444; color: #ccc; }
-
-.ps-btn-primary {
-  background: #3a8eef;
-  color: #fff;
-  border: none;
-  border-radius: 6px;
-  padding: 10px 20px;
-  font-size: 14px;
-  font-weight: 600;
-  font-family: inherit;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-.ps-btn-primary:hover { background: #4a9eff; }
-.ps-btn-primary:focus-visible { outline: 1px solid #579eff; outline-offset: 1px; }
-.ps-btn-primary:disabled { opacity: 0.5; cursor: default; }
-
-.ps-btn-secondary {
-  background: #333;
-  color: #c5c8ce;
-  border: none;
-  border-radius: 6px;
-  padding: 10px 20px;
-  font-size: 14px;
-  font-family: inherit;
-  cursor: pointer;
-  transition: background 0.15s;
-  white-space: nowrap;
-}
-.ps-btn-secondary:hover { background: #444; }
-.ps-btn-secondary:focus-visible { outline: 1px solid #579eff; outline-offset: 1px; }
-.ps-btn-secondary:disabled { opacity: 0.5; cursor: default; }
-
-.ps-input {
-  flex: 1;
-  background: #2a2a2a;
-  border: 1px solid #333;
-  border-radius: 6px;
-  padding: 8px 12px;
-  font-size: 14px;
-  color: #e0e0e0;
-  outline: none;
-  font-family: inherit;
-}
-.ps-input:focus { border-color: #579eff; }
+/* Hover fill is one neutral step above the resting bg-3 (#333) — that step
+   renders as #444444, a value the bg ramp deliberately has no slot for
+   (adding a bg-4 for one hover state would invite ramp sprawl). border-2 is
+   the token that carries #444444; the theme already shares values across
+   ramps by design (border-1 ≡ bg-3 — see theme.ts), so this is the same
+   documented cross-ramp reuse, not drift. (U6 punch-list #4.) */
+.ps-card-remove:hover { background: ${themeVars.boundary.strong}; color: ${themeVars.content.primary}; }
 
 .ps-template {
   flex: 1;
-  background: #222;
-  border: 1px solid #333;
-  border-radius: 8px;
+  background: ${themeVars.surface.panel};
+  border: 1px solid ${themeVars.boundary.default};
+  border-radius: ${themeVars.shape.large};
   padding: 12px 14px;
   cursor: pointer;
   text-align: left;
@@ -129,49 +109,50 @@ const CSS = `
   color: inherit;
   transition: border-color 0.15s;
 }
-.ps-template:hover { border-color: #555; }
-.ps-template[data-selected="true"] { border-color: #3a8eef; }
+.ps-template:hover { border-color: ${themeVars.boundary.strong}; }
+.ps-template:focus-visible { outline: 1px solid ${themeVars.accent.default}; outline-offset: 1px; }
+.ps-template[data-selected="true"] { border-color: ${themeVars.accent.default}; }
 
 .ps-ctx-menu {
   position: fixed;
-  background: #2a2a2a;
-  border: 1px solid #444;
-  border-radius: 6px;
+  background: ${themeVars.surface.chrome};
+  border: 1px solid ${themeVars.boundary.strong};
+  border-radius: ${themeVars.shape.medium};
   padding: 4px 0;
   min-width: 160px;
-  z-index: 100;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+  z-index: ${zIndex.dropdown};
+  box-shadow: ${themeVars.elevation.medium};
 }
 .ps-ctx-item {
   display: block;
   width: 100%;
   background: none;
   border: none;
-  color: #c5c8ce;
+  color: ${themeVars.content.primary};
   font: inherit;
-  font-size: 13px;
+  font-size: var(--vgai-font-lg);
   padding: 6px 14px;
   text-align: left;
   cursor: pointer;
 }
-.ps-ctx-item:hover { background: #333; }
+.ps-ctx-item:hover { background: ${themeVars.accent.muted}; }
 .ps-ctx-sep {
   height: 1px;
-  background: #444;
+  background: ${themeVars.boundary.strong};
   margin: 4px 0;
 }
 
 .ps-thumbnail {
   width: 100%;
   aspect-ratio: 16/9;
-  background: #1a1a1a;
-  border-radius: 4px;
+  background: ${themeVars.surface.shell};
+  border-radius: ${themeVars.shape.small};
   margin-bottom: 8px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #333;
+  color: ${themeVars.surface.raised};
   font-size: 24px;
 }
 .ps-thumbnail img {
@@ -200,12 +181,12 @@ interface ScreenState {
   view: 'home' | 'new-project';
   recentProjects: RecentProject[];
   loaded: boolean;
-  error: string | null;
+  error: ScreenError | null;
   busy: boolean; // opening or creating
   // New project form
   projectName: string;
   projectLocation: string;
-  template: 'starter' | 'empty' | 'example';
+  template: 'default' | '2d' | 'react' | 'example';
   exampleId: string | null;
   availableExamples: ExampleInfo[];
 }
@@ -213,12 +194,12 @@ interface ScreenState {
 type ScreenAction =
   | { type: 'LOADED'; projects: RecentProject[] }
   | { type: 'SET_VIEW'; view: 'home' | 'new-project' }
-  | { type: 'SET_ERROR'; error: string | null }
+  | { type: 'SET_ERROR'; error: unknown | null }
   | { type: 'SET_BUSY'; busy: boolean }
   | { type: 'REMOVE_RECENT'; path: string }
   | { type: 'SET_NAME'; name: string }
   | { type: 'SET_LOCATION'; location: string }
-  | { type: 'SET_TEMPLATE'; template: 'starter' | 'empty' | 'example' }
+  | { type: 'SET_TEMPLATE'; template: 'default' | '2d' | 'react' | 'example' }
   | { type: 'SET_EXAMPLE_ID'; exampleId: string }
   | { type: 'SET_AVAILABLE_EXAMPLES'; examples: ExampleInfo[] };
 
@@ -230,11 +211,24 @@ const initialState: ScreenState = {
   busy: false,
   projectName: 'My Game',
   projectLocation: '~/VGAI Projects',
-  template: 'starter',
+  template: 'default',
   exampleId: null,
   availableExamples: [],
 };
 
+interface ScreenError {
+  message: string;
+  recovery?: StartupRecovery;
+}
+
+function screenError(error: unknown): ScreenError | null {
+  if (error === null) return null;
+  if (error instanceof ProjectCompatibilityError) {
+    return { message: error.message, recovery: error.recovery };
+  }
+  return { message: error instanceof Error ? error.message : String(error) };
+}
+
 function reducer(state: ScreenState, action: ScreenAction): ScreenState {
   switch (action.type) {
     case 'LOADED':
@@ -247,7 +241,7 @@ function reducer(state: ScreenState, action: ScreenAction): ScreenState {
     case 'SET_VIEW':
       return { ...state, view: action.view, error: null };
     case 'SET_ERROR':
-      return { ...state, error: action.error, busy: false };
+      return { ...state, error: screenError(action.error), busy: false };
     case 'SET_BUSY':
       return { ...state, busy: action.busy, error: null };
     case 'REMOVE_RECENT':
@@ -324,7 +318,7 @@ export function ProjectScreen({ onOpen }: ProjectScreenProps) {
           dispatch({ type: 'SET_ERROR', error: `Failed to open project at ${path}` });
         }
       } catch (err) {
-        dispatch({ type: 'SET_ERROR', error: err instanceof Error ? err.message : String(err) });
+        dispatch({ type: 'SET_ERROR', error: err });
       }
     },
     [onOpen],
@@ -358,7 +352,7 @@ export function ProjectScreen({ onOpen }: ProjectScreenProps) {
         dispatch({ type: 'SET_ERROR', error: result.error ?? 'Failed to create project.' });
       }
     } catch (err) {
-      dispatch({ type: 'SET_ERROR', error: err instanceof Error ? err.message : String(err) });
+      dispatch({ type: 'SET_ERROR', error: err });
     }
   }, [state.projectName, state.projectLocation, state.template, state.exampleId, onOpen]);
 
@@ -367,7 +361,7 @@ export function ProjectScreen({ onOpen }: ProjectScreenProps) {
       const path = await browseFolder('Select a project folder');
       if (path) openProject(path);
     } catch (err) {
-      dispatch({ type: 'SET_ERROR', error: err instanceof Error ? err.message : String(err) });
+      dispatch({ type: 'SET_ERROR', error: err });
     }
   }, [openProject]);
 
@@ -376,7 +370,7 @@ export function ProjectScreen({ onOpen }: ProjectScreenProps) {
       const path = await browseFolder('Choose project location');
       if (path) dispatch({ type: 'SET_LOCATION', location: path });
     } catch (err) {
-      dispatch({ type: 'SET_ERROR', error: err instanceof Error ? err.message : String(err) });
+      dispatch({ type: 'SET_ERROR', error: err });
     }
   }, []);
 
@@ -386,6 +380,7 @@ export function ProjectScreen({ onOpen }: ProjectScreenProps) {
     async (backend: StorageBackend) => {
       await seedIfEmpty(backend);
       const config = await readProjectManifest(backend);
+      assertProjectCompatibility(config, BUNDLED_EDITOR_COMPATIBILITY);
       const project: ActiveProject = { rootPath: 'fsa', config };
       setActiveProject(project);
       onOpen(project);
@@ -396,17 +391,25 @@ export function ProjectScreen({ onOpen }: ProjectScreenProps) {
   // Browser-first mode: open a REAL on-disk folder via the File System Access
   // API (Chromium). The picked folder is remembered so a reload reopens it.
   const handleOpenFolderFsa = useCallback(async () => {
-    const pick = getHostCapabilities().pickProjectRoot;
-    if (!pick) return;
-    const backend = await pick();
-    if (backend) await openFsaBackend(backend);
+    try {
+      const pick = getHostCapabilities().pickProjectRoot;
+      if (!pick) return;
+      const backend = await pick();
+      if (backend) await openFsaBackend(backend);
+    } catch (error) {
+      dispatch({ type: 'SET_ERROR', error });
+    }
   }, [openFsaBackend]);
 
   // Reopen the remembered on-disk folder — re-grants read/write permission
   // (this click IS the required user gesture) and opens it.
   const handleReopenFolder = useCallback(async () => {
-    const backend = await reopenPersistedProjectRoot();
-    if (backend) await openFsaBackend(backend);
+    try {
+      const backend = await reopenPersistedProjectRoot();
+      if (backend) await openFsaBackend(backend);
+    } catch (error) {
+      dispatch({ type: 'SET_ERROR', error });
+    }
   }, [openFsaBackend]);
 
   const slug = state.projectName
@@ -419,12 +422,14 @@ export function ProjectScreen({ onOpen }: ProjectScreenProps) {
       <div style={S.inner}>
         <header style={S.header}>
           <div style={S.title}>VGAI ENGINE</div>
-          <div style={S.version}>v0.1.0</div>
+          <div style={S.version}>
+            Editor v{BUNDLED_EDITOR_VERSION} · Engine v{BUNDLED_ENGINE_VERSION}
+          </div>
         </header>
 
         {state.error && (
           <ErrorBanner
-            message={state.error}
+            error={state.error}
             onDismiss={() => dispatch({ type: 'SET_ERROR', error: null })}
           />
         )}
@@ -436,26 +441,32 @@ export function ProjectScreen({ onOpen }: ProjectScreenProps) {
               gap: 10,
               alignItems: 'center',
               margin: '2px 0 14px',
-              color: '#8b919b',
-              fontSize: 13,
+              color: themeVars.content.muted,
+              fontSize: 'var(--vgai-font-lg)',
             }}
           >
             <span>Projects are stored in your browser (OPFS) — nothing leaves this device.</span>
             {typeof window !== 'undefined' && 'showDirectoryPicker' in window && (
               <>
                 {persistedRootName && (
-                  <button
+                  <Button
                     type="button"
-                    className="ps-btn-primary"
+                    variant="primary"
+                    size="comfortable"
                     onClick={handleReopenFolder}
                     data-testid="reopen-folder"
                   >
                     Reopen “{persistedRootName}”
-                  </button>
+                  </Button>
                 )}
-                <button type="button" className="ps-btn-secondary" onClick={handleOpenFolderFsa}>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="comfortable"
+                  onClick={handleOpenFolderFsa}
+                >
                   Open Folder…
-                </button>
+                </Button>
               </>
             )}
           </div>
@@ -543,12 +554,12 @@ function HomeView({
       </section>
 
       <div style={S.actions}>
-        <button type="button" className="ps-btn-primary" onClick={onNewProject}>
+        <Button type="button" variant="primary" size="comfortable" onClick={onNewProject}>
           + New Project
-        </button>
-        <button type="button" className="ps-btn-secondary" onClick={onBrowse}>
+        </Button>
+        <Button type="button" variant="secondary" size="comfortable" onClick={onBrowse}>
           Open Project...
-        </button>
+        </Button>
       </div>
     </>
   );
@@ -575,12 +586,21 @@ function ProjectCard({ project, disabled, onOpen, onRemove }: ProjectCardProps)
 
   return (
     <>
-      <button
-        type="button"
+      <div
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled}
         className="ps-card"
-        onClick={onOpen}
+        onClick={() => {
+          if (!disabled) onOpen();
+        }}
+        onKeyDown={(event) => {
+          if (!disabled && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            onOpen();
+          }
+        }}
         onContextMenu={handleContextMenu}
-        disabled={disabled}
       >
         <div className="ps-thumbnail">
           {project.thumbnail ? <img src={project.thumbnail} alt={project.name} /> : '\u25a6'}
@@ -590,7 +610,7 @@ function ProjectCard({ project, disabled, onOpen, onRemove }: ProjectCardProps)
           {shortenPath(project.path)}
         </div>
         <div style={S.cardMeta}>{formatRelativeTime(project.lastOpened)}</div>
-        <button
+        <Button
           type="button"
           className="ps-card-remove"
           title="Remove from list"
@@ -600,8 +620,8 @@ function ProjectCard({ project, disabled, onOpen, onRemove }: ProjectCardProps)
           }}
         >
           ×
-        </button>
-      </button>
+        </Button>
+      </div>
 
       {ctxMenu && (
         <ContextMenu
@@ -664,7 +684,7 @@ function ContextMenu({ x, y, onClose, items }: ContextMenuProps) {
         item.separator ? (
           <div key={`sep-${i}`} className="ps-ctx-sep" />
         ) : (
-          <button
+          <Button
             key={item.label}
             type="button"
             className="ps-ctx-item"
@@ -674,7 +694,7 @@ function ContextMenu({ x, y, onClose, items }: ContextMenuProps) {
             }}
           >
             {item.label}
-          </button>
+          </Button>
         ),
       )}
     </div>
@@ -688,14 +708,14 @@ function ContextMenu({ x, y, onClose, items }: ContextMenuProps) {
 interface NewProjectFormProps {
   name: string;
   location: string;
-  template: 'starter' | 'empty' | 'example';
+  template: 'default' | '2d' | 'react' | 'example';
   exampleId: string | null;
   availableExamples: ExampleInfo[];
   slug: string;
   busy: boolean;
   onNameChange: (name: string) => void;
   onLocationChange: (location: string) => void;
-  onTemplateChange: (template: 'starter' | 'empty' | 'example') => void;
+  onTemplateChange: (template: 'default' | '2d' | 'react' | 'example') => void;
   onExampleIdChange: (exampleId: string) => void;
   onBrowseLocation: () => void;
   onCancel: () => void;
@@ -724,47 +744,58 @@ function NewProjectForm({
 
       <label style={S.label}>
         Name
-        <input className="ps-input" value={name} onChange={(e) => onNameChange(e.target.value)} />
+        <TextInput
+          style={{ flex: 1 }}
+          value={name}
+          onChange={(e) => onNameChange(e.target.value)}
+        />
       </label>
 
       <label style={S.label}>
         Location
         <div style={S.locationRow}>
-          <input
-            className="ps-input"
+          <TextInput
+            style={{ flex: 1 }}
             value={location}
             onChange={(e) => onLocationChange(e.target.value)}
           />
-          <button type="button" className="ps-btn-secondary" onClick={onBrowseLocation}>
+          <Button type="button" variant="secondary" size="comfortable" onClick={onBrowseLocation}>
             Browse
-          </button>
+          </Button>
         </div>
       </label>
 
       <div style={S.label}>
         Template
         <div style={S.templateRow}>
-          <button
+          <Button
             type="button"
             className="ps-template"
-            data-selected={template === 'starter'}
-            onClick={() => onTemplateChange('starter')}
+            data-selected={template === 'default'}
+            onClick={() => onTemplateChange('default')}
           >
-            <div style={S.templateName}>Starter</div>
-            <div style={S.templateDesc}>
-              7 example scenes, prefabs, input maps, animation graphs
-            </div>
-          </button>
-          <button
+            <div style={S.templateName}>3D + UI</div>
+            <div style={S.templateDesc}>Three.js game root plus React UI root</div>
+          </Button>
+          <Button
+            type="button"
+            className="ps-template"
+            data-selected={template === '2d'}
+            onClick={() => onTemplateChange('2d')}
+          >
+            <div style={S.templateName}>2D + UI</div>
+            <div style={S.templateDesc}>PixiJS game root plus React UI root</div>
+          </Button>
+          <Button
             type="button"
             className="ps-template"
-            data-selected={template === 'empty'}
-            onClick={() => onTemplateChange('empty')}
+            data-selected={template === 'react'}
+            onClick={() => onTemplateChange('react')}
           >
-            <div style={S.templateName}>Empty</div>
-            <div style={S.templateDesc}>Blank project with a default scene</div>
-          </button>
-          <button
+            <div style={S.templateName}>React</div>
+            <div style={S.templateDesc}>React-only game root</div>
+          </Button>
+          <Button
             type="button"
             className="ps-template"
             data-selected={template === 'example'}
@@ -774,12 +805,11 @@ function NewProjectForm({
             <div style={S.templateDesc}>
               Start from a real example project (e.g. the multiplayer arena)
             </div>
-          </button>
+          </Button>
         </div>
         {template === 'example' && (
-          <select
-            className="ps-input"
-            style={{ marginTop: 10 }}
+          <Select
+            style={{ flex: 1, marginTop: 10 }}
             value={exampleId ?? ''}
             onChange={(e) => onExampleIdChange(e.target.value)}
           >
@@ -791,7 +821,7 @@ function NewProjectForm({
                 {ex.name}
               </option>
             ))}
-          </select>
+          </Select>
         )}
       </div>
 
@@ -802,19 +832,26 @@ function NewProjectForm({
       )}
 
       <div style={S.formActions}>
-        <button type="button" className="ps-btn-secondary" onClick={onCancel} disabled={busy}>
+        <Button
+          type="button"
+          variant="secondary"
+          size="comfortable"
+          onClick={onCancel}
+          disabled={busy}
+        >
           Cancel
-        </button>
-        <button
+        </Button>
+        <Button
           type="button"
-          className="ps-btn-primary"
+          variant="primary"
+          size="comfortable"
           onClick={onCreate}
           disabled={
             busy || !name.trim() || !location.trim() || (template === 'example' && !exampleId)
           }
         >
           {busy ? 'Creating...' : 'Create Project'}
-        </button>
+        </Button>
       </div>
     </div>
   );
@@ -824,13 +861,46 @@ function NewProjectForm({
 // ErrorBanner
 // ---------------------------------------------------------------------------
 
-function ErrorBanner({ message, onDismiss }: { message: string; onDismiss: () => void }) {
+function ErrorBanner({ error, onDismiss }: { error: ScreenError; onDismiss: () => void }) {
+  const command = error.recovery && 'command' in error.recovery ? error.recovery.command : null;
   return (
-    <div style={S.error}>
-      <span>{message}</span>
-      <button type="button" style={S.errorClose} onClick={onDismiss}>
+    <div role="alert" style={{ ...S.error, alignItems: 'flex-start', gap: 12 }}>
+      <div style={{ flex: 1 }}>
+        {error.recovery && (
+          <div style={{ marginBottom: 4, color: themeVars.content.primary, fontWeight: 600 }}>
+            {error.recovery.title}
+          </div>
+        )}
+        {error.recovery && <div style={{ marginBottom: 6 }}>{error.recovery.guidance}</div>}
+        <div>{error.message}</div>
+        {command && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
+            <code
+              data-testid="project-screen-recovery-command"
+              style={{ fontFamily: themeVars.typography.mono }}
+            >
+              {command}
+            </code>
+            <Button
+              type="button"
+              variant="secondary"
+              size="compact"
+              onClick={() => void navigator.clipboard?.writeText(command)}
+            >
+              Copy
+            </Button>
+          </div>
+        )}
+      </div>
+      <IconButton
+        type="button"
+        variant="danger"
+        size="compact"
+        aria-label="Dismiss error"
+        onClick={onDismiss}
+      >
         ×
-      </button>
+      </IconButton>
     </div>
   );
 }
@@ -869,12 +939,12 @@ const S = {
     left: 0,
     width: '100%',
     height: '100%',
-    background: '#1a1a1a',
+    background: themeVars.surface.shell,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    color: '#c5c8ce',
+    fontFamily: themeVars.typography.sans,
+    color: themeVars.content.primary,
     pointerEvents: 'auto' as const,
   },
   inner: {
@@ -889,47 +959,39 @@ const S = {
   title: {
     fontSize: 28,
     fontWeight: 700,
-    color: '#e0e0e0',
+    color: themeVars.content.primary,
     letterSpacing: 2,
   },
   version: {
-    fontSize: 13,
-    color: '#666',
+    fontSize: 'var(--vgai-font-lg)',
+    color: themeVars.content.dim,
     marginTop: 4,
   },
   error: {
-    background: '#3a1c1c',
-    border: '1px solid #6b2c2c',
-    borderRadius: 6,
+    background: TONE_ERROR.bg,
+    border: `1px solid ${TONE_ERROR.border}`,
+    borderRadius: themeVars.shape.medium,
     padding: '10px 16px',
     marginBottom: 16,
-    fontSize: 13,
-    color: '#e8a0a0',
+    fontSize: 'var(--vgai-font-lg)',
+    color: TONE_ERROR.fg,
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
-  errorClose: {
-    background: 'none',
-    border: 'none',
-    color: '#e8a0a0',
-    fontSize: 18,
-    cursor: 'pointer',
-    padding: '0 4px',
-  },
   section: {
     marginBottom: 24,
   },
   sectionTitle: {
-    fontSize: 13,
-    color: '#888',
+    fontSize: 'var(--vgai-font-lg)',
+    color: themeVars.content.muted,
     textTransform: 'uppercase' as const,
     letterSpacing: 1,
     marginBottom: 12,
   },
   empty: {
-    color: '#555',
-    fontSize: 13,
+    color: themeVars.content.dim,
+    fontSize: 'var(--vgai-font-lg)',
     padding: '24px 0',
     textAlign: 'center' as const,
   },
@@ -939,17 +1001,17 @@ const S = {
     gap: 10,
   },
   cardName: {
-    fontSize: 14,
+    fontSize: 'var(--vgai-font-xl)',
     fontWeight: 600,
-    color: '#e0e0e0',
+    color: themeVars.content.primary,
     marginBottom: 2,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap' as const,
   },
   cardMeta: {
-    fontSize: 11,
-    color: '#666',
+    fontSize: 'var(--vgai-font-base)',
+    color: themeVars.content.dim,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap' as const,
@@ -967,8 +1029,8 @@ const S = {
     display: 'flex',
     flexDirection: 'column' as const,
     gap: 6,
-    fontSize: 13,
-    color: '#888',
+    fontSize: 'var(--vgai-font-lg)',
+    color: themeVars.content.muted,
   },
   locationRow: {
     display: 'flex',
@@ -980,20 +1042,20 @@ const S = {
     marginTop: 4,
   },
   templateName: {
-    fontSize: 14,
+    fontSize: 'var(--vgai-font-xl)',
     fontWeight: 600,
-    color: '#e0e0e0',
+    color: themeVars.content.primary,
     marginBottom: 4,
   },
   templateDesc: {
-    fontSize: 11,
-    color: '#666',
+    fontSize: 'var(--vgai-font-base)',
+    color: themeVars.content.dim,
     lineHeight: 1.4,
   },
   previewPath: {
-    fontSize: 12,
-    color: '#555',
-    fontFamily: 'monospace',
+    fontSize: 'var(--vgai-font-md)',
+    color: themeVars.content.dim,
+    fontFamily: themeVars.typography.mono,
   },
   formActions: {
     display: 'flex',