@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/ThemeManagerDialog.tsx

@@ -0,0 +1,371 @@
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import {
+  Button,
+  ColorSwatchInput,
+  Dialog,
+  DialogField,
+  DialogFieldLabel,
+  DialogFooter,
+  DialogHeader,
+  type EditorTheme,
+  FileInput,
+  Inline,
+  Stack,
+  Text,
+  TextInput,
+} from '../design-system';
+import {
+  CUSTOM_EDITOR_THEME_SCHEMA_VERSION,
+  type CustomEditorThemeDocument,
+  deleteCustomEditorTheme,
+  duplicateEditorTheme,
+  editorThemeLibrarySnapshot,
+  importCustomEditorTheme,
+  saveCustomEditorTheme,
+  subscribeEditorThemeLibrary,
+} from '../theme-library';
+import {
+  clearEditorThemePreview,
+  DEFAULT_EDITOR_THEME_ID,
+  editorThemeSnapshot,
+  previewEditorTheme,
+  setEditorThemePreference,
+} from '../theme-preference';
+import './ThemeManagerDialog.css';
+
+interface ThemeManagerDialogProps {
+  onClose: () => void;
+}
+
+interface ThemeField {
+  readonly label: string;
+  readonly path: string;
+}
+
+interface ThemeFieldGroup {
+  readonly title: string;
+  readonly fields: readonly ThemeField[];
+}
+
+const FIELD_GROUPS: readonly ThemeFieldGroup[] = [
+  {
+    title: 'Surfaces',
+    fields: [
+      { label: 'Shell', path: 'color.surface.shell' },
+      { label: 'Panel', path: 'color.surface.panel' },
+      { label: 'Chrome', path: 'color.surface.chrome' },
+      { label: 'Raised', path: 'color.surface.raised' },
+      { label: 'Inset', path: 'color.surface.inset' },
+      { label: 'Viewport overlay', path: 'color.surface.overlay' },
+    ],
+  },
+  {
+    title: 'Content & boundaries',
+    fields: [
+      { label: 'Primary text', path: 'color.content.primary' },
+      { label: 'Muted text', path: 'color.content.muted' },
+      { label: 'Dim text', path: 'color.content.dim' },
+      { label: 'Text on accent', path: 'color.content.onAccent' },
+      { label: 'Default boundary', path: 'color.boundary.default' },
+      { label: 'Strong boundary', path: 'color.boundary.strong' },
+      { label: 'Hover overlay', path: 'color.neutralOverlay.hover' },
+      { label: 'Active overlay', path: 'color.neutralOverlay.active' },
+      { label: 'Modal scrim', path: 'color.scrim' },
+    ],
+  },
+  {
+    title: 'Accent & status',
+    fields: [
+      { label: 'Accent', path: 'color.accent.default' },
+      { label: 'Accent tint', path: 'color.accent.muted' },
+      { label: 'Danger', path: 'color.semantic.danger' },
+      { label: 'Danger tint', path: 'color.semantic.dangerMuted' },
+      { label: 'Danger row', path: 'color.semantic.dangerFaint' },
+      { label: 'Warning', path: 'color.semantic.warning' },
+      { label: 'Warning tint', path: 'color.semantic.warningMuted' },
+      { label: 'Success', path: 'color.semantic.success' },
+      { label: 'Success tint', path: 'color.semantic.successMuted' },
+      { label: 'Dynamic', path: 'color.semantic.dynamic' },
+      { label: 'Dynamic tint', path: 'color.semantic.dynamicMuted' },
+    ],
+  },
+  {
+    title: 'Typography',
+    fields: [
+      { label: 'Interface font', path: 'typography.sans' },
+      { label: 'Monospace font', path: 'typography.mono' },
+    ],
+  },
+  {
+    title: 'Shape & elevation',
+    fields: [
+      { label: 'Small radius', path: 'shape.small' },
+      { label: 'Medium radius', path: 'shape.medium' },
+      { label: 'Large radius', path: 'shape.large' },
+      { label: 'Round radius', path: 'shape.full' },
+      { label: 'Small shadow', path: 'elevation.small' },
+      { label: 'Medium shadow', path: 'elevation.medium' },
+      { label: 'Large shadow', path: 'elevation.large' },
+    ],
+  },
+];
+
+function themeValue(theme: EditorTheme, path: string): string {
+  let value: unknown = theme;
+  for (const key of path.split('.')) value = (value as Record<string, unknown>)[key];
+  return value as string;
+}
+
+function withThemeValue(theme: EditorTheme, path: string, value: string): EditorTheme {
+  const next = structuredClone(theme) as unknown as Record<string, unknown>;
+  const keys = path.split('.');
+  let target = next;
+  for (const key of keys.slice(0, -1)) target = target[key] as Record<string, unknown>;
+  target[keys.at(-1)!] = value;
+  return next as unknown as EditorTheme;
+}
+
+function ThemeValueInput({
+  disabled,
+  path,
+  theme,
+  onChange,
+}: {
+  disabled: boolean;
+  path: string;
+  theme: EditorTheme;
+  onChange: (theme: EditorTheme) => void;
+}) {
+  const value = themeValue(theme, path);
+  const isColor = path.startsWith('color.');
+  const hasNativeSwatch = /^#[0-9a-f]{6}$/i.test(value);
+  return (
+    <Inline className="vgai-theme-value" gap={2} align="center">
+      {isColor &&
+        (hasNativeSwatch ? (
+          <ColorSwatchInput
+            aria-label={`${path} color`}
+            disabled={disabled}
+            value={value}
+            onChange={(event) => onChange(withThemeValue(theme, path, event.target.value))}
+            className="vgai-theme-swatch-input"
+          />
+        ) : (
+          <span
+            role="img"
+            aria-label={`${path} preview`}
+            className="vgai-theme-swatch-preview"
+            style={{ background: value }}
+          />
+        ))}
+      <TextInput
+        aria-label={path}
+        disabled={disabled}
+        value={value}
+        onChange={(event) => onChange(withThemeValue(theme, path, event.target.value))}
+      />
+    </Inline>
+  );
+}
+
+function downloadTheme(themeDocument: CustomEditorThemeDocument): void {
+  const blob = new Blob([`${JSON.stringify(themeDocument, null, 2)}\n`], {
+    type: 'application/json',
+  });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = `${themeDocument.name.toLowerCase().replace(/[^a-z0-9]+/g, '-') || 'vgai-theme'}.vgai-theme.json`;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+
+export function ThemeManagerDialog({ onClose }: ThemeManagerDialogProps) {
+  const choices = useSyncExternalStore(
+    subscribeEditorThemeLibrary,
+    editorThemeLibrarySnapshot,
+    editorThemeLibrarySnapshot,
+  );
+  const currentId = editorThemeSnapshot();
+  const initial = choices.find((choice) => choice.id === currentId) ?? choices[0]!;
+  const [selectedId, setSelectedId] = useState(initial.id);
+  const [name, setName] = useState(initial.name);
+  const [draft, setDraft] = useState<EditorTheme>(() => structuredClone(initial.theme));
+  const [message, setMessage] = useState<string | null>(null);
+  const fileRef = useRef<HTMLInputElement>(null);
+  const selected = choices.find((choice) => choice.id === selectedId) ?? initial;
+  const editable = selected.kind === 'custom';
+
+  useEffect(() => {
+    previewEditorTheme(draft);
+    return clearEditorThemePreview;
+  }, [draft]);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      event.preventDefault();
+      onClose();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onClose]);
+
+  const exportDocument = useMemo<CustomEditorThemeDocument>(
+    () => ({ schemaVersion: CUSTOM_EDITOR_THEME_SCHEMA_VERSION, name, theme: draft }),
+    [draft, name],
+  );
+
+  const setChoice = (choice: (typeof choices)[number]) => {
+    setSelectedId(choice.id);
+    setName(choice.name);
+    setDraft(structuredClone(choice.theme));
+    setMessage(null);
+  };
+
+  const chooseTheme = (id: string) => {
+    const choice = choices.find((candidate) => candidate.id === id);
+    if (choice) setChoice(choice);
+  };
+
+  const duplicate = () => {
+    const created = duplicateEditorTheme(selected.id);
+    setChoice(created);
+    setMessage('Custom copy created.');
+  };
+
+  const saveAndUse = () => {
+    try {
+      if (editable) saveCustomEditorTheme({ ...exportDocument, name: name.trim() });
+      clearEditorThemePreview();
+      setEditorThemePreference(selected.id);
+      onClose();
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : String(error));
+    }
+  };
+
+  return (
+    <Dialog
+      labelledBy="theme-manager-title"
+      onDismiss={onClose}
+      size="wide"
+      data-testid="theme-manager-dialog"
+    >
+      <DialogHeader
+        titleId="theme-manager-title"
+        title="Editor Themes"
+        description="Customize editor chrome only. Game worlds and authored UI keep their own design tokens."
+      />
+      <Inline className="vgai-theme-manager-content">
+        <aside aria-label="Available themes" className="vgai-theme-list">
+          {choices.map((choice) => (
+            <Button
+              key={choice.id}
+              variant="ghost"
+              aria-pressed={selectedId === choice.id}
+              onClick={() => chooseTheme(choice.id)}
+              className="vgai-theme-choice"
+            >
+              <Text variant="label" truncate>
+                {choice.name}
+              </Text>
+              <Text variant="caption" tone="dim">
+                {choice.kind === 'built-in' ? 'Built in' : 'Custom'}
+              </Text>
+            </Button>
+          ))}
+          <Button onClick={duplicate} className="vgai-theme-list-action">
+            Duplicate Theme
+          </Button>
+          <Button onClick={() => fileRef.current?.click()} className="vgai-theme-list-action">
+            Import JSON…
+          </Button>
+          <FileInput
+            ref={fileRef}
+            accept="application/json,.json"
+            hidden
+            onChange={async (event) => {
+              const file = event.target.files?.[0];
+              event.target.value = '';
+              if (!file) return;
+              try {
+                const imported = importCustomEditorTheme(JSON.parse(await file.text()));
+                setChoice(imported);
+                setMessage('Theme imported.');
+              } catch (error) {
+                setMessage(error instanceof Error ? error.message : String(error));
+              }
+            }}
+          />
+        </aside>
+
+        <div role="region" aria-label="Theme tokens" className="vgai-theme-tokens">
+          <Inline className="vgai-theme-name-row" gap={4} align="end">
+            <DialogField className="vgai-theme-name-field">
+              <DialogFieldLabel>Theme name</DialogFieldLabel>
+              <TextInput
+                disabled={!editable}
+                value={name}
+                onChange={(event) => setName(event.target.value)}
+              />
+            </DialogField>
+            <Button onClick={() => downloadTheme(exportDocument)}>Export JSON</Button>
+            {editable && (
+              <Button
+                variant="danger"
+                onClick={() => {
+                  if (editorThemeSnapshot() === selected.id)
+                    setEditorThemePreference(DEFAULT_EDITOR_THEME_ID);
+                  deleteCustomEditorTheme(selected.id);
+                  chooseTheme(DEFAULT_EDITOR_THEME_ID);
+                  setMessage('Custom theme deleted.');
+                }}
+              >
+                Delete
+              </Button>
+            )}
+          </Inline>
+
+          {!editable && (
+            <Text as="p" tone="muted" className="vgai-theme-readonly-note">
+              Built-in themes are read-only. Duplicate this theme to customize every token.
+            </Text>
+          )}
+
+          {FIELD_GROUPS.map((group) => (
+            <Stack key={group.title} className="vgai-theme-group" gap={4}>
+              <Text as="h3" variant="title">
+                {group.title}
+              </Text>
+              <div className="vgai-theme-field-grid">
+                {group.fields.map((field) => (
+                  <DialogField key={field.path}>
+                    <DialogFieldLabel>{field.label}</DialogFieldLabel>
+                    <ThemeValueInput
+                      disabled={!editable}
+                      path={field.path}
+                      theme={draft}
+                      onChange={setDraft}
+                    />
+                  </DialogField>
+                ))}
+              </div>
+            </Stack>
+          ))}
+        </div>
+      </Inline>
+      <DialogFooter>
+        {message && (
+          <Text role="status" tone="muted" className="vgai-theme-message">
+            {message}
+          </Text>
+        )}
+        <Button onClick={onClose}>Cancel</Button>
+        <Button variant="primary" disabled={editable && !name.trim()} onClick={saveAndUse}>
+          {editable ? 'Save & Use' : 'Use Theme'}
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+}

package/src/components/ToolHost.tsx

@@ -1,12 +1,14 @@
+import { space, themeVars } from '../design-system';
 /**
- * Dock-tool host (W4, docs/DATA-TOOLS-DESIGN.md §3.2/§3.4) — renders one
- * project tool's component inside the bottom dock, wrapped in an error
- * boundary: tools are PROJECT code running in the editor (§4's trust note),
- * and a crashing tool must never take the editor down with it. A render
- * crash swaps the panel content for a teaching message naming the source
- * file; the tab, and every other tool, keep working. An HMR reload of the
- * tool remounts the host fresh (`BottomPanel` keys it on the load version),
- * which also clears a tripped boundary — fix the file, save, retry for free.
+ * Project-global tool host (W4, docs/DATA-TOOLS-DESIGN.md §3.2/§3.4; re-homed
+ * by workspace-shell W3) — renders one project tool's component wrapped in an
+ * error boundary: tools are PROJECT code running in the editor (§4's trust
+ * note), and a crashing tool must never take the editor down with it. A
+ * render crash swaps the content for a teaching message naming the source
+ * file; every other tool keeps working. An HMR reload of the tool remounts
+ * the host fresh (its hosts key it on the load version — see
+ * `tool-documents.tsx` and `tool-loader.ts`'s utility registrations), which
+ * also clears a tripped boundary — fix the file, save, retry for free.
  *
  * Chrome stays editor-styled (§3.4): the host provides the scrollable
  * editor-toned container; whatever the tool renders inside is its own
@@ -14,7 +16,7 @@
  */
 
 import { Component, type ErrorInfo, type ReactNode } from 'react';
-import type { DockTool } from '../tool-loader';
+import type { GlobalTool } from '../tool-loader';
 
 interface ToolErrorBoundaryProps {
   /** Project-relative source file, shown in the crash message. */
@@ -49,12 +51,19 @@ export class ToolErrorBoundary extends Component<ToolErrorBoundaryProps, ToolErr
   override render(): ReactNode {
     if (this.state.error) {
       return (
-        <div style={{ padding: 12, fontSize: 12, color: '#FF6B6B', maxWidth: 640 }}>
-          <div style={{ fontWeight: 600, marginBottom: 4 }}>
+        <div
+          style={{
+            padding: space[6],
+            fontSize: 'var(--vgai-font-md)',
+            color: themeVars.semantic.danger,
+            maxWidth: 640,
+          }}
+        >
+          <div style={{ fontWeight: 600, marginBottom: space[2] }}>
             Tool crashed: <code>{this.props.file}</code>
           </div>
           <div style={{ whiteSpace: 'pre-wrap' }}>{String(this.state.error)}</div>
-          <div style={{ color: '#8c8c8c', marginTop: 6 }}>
+          <div style={{ color: themeVars.content.muted, marginTop: space[3] }}>
             The editor is fine — fix the tool file and save; it reloads in place.
           </div>
         </div>
@@ -64,13 +73,15 @@ export class ToolErrorBoundary extends Component<ToolErrorBoundaryProps, ToolErr
   }
 }
 
-/** One dock tool's panel content: editor-styled scroll container + boundary. */
-export function ToolHost({ tool }: { tool: DockTool }) {
+/** One project-global tool's content host: editor-styled scroll container +
+ *  boundary. Rendered by a center tool DOCUMENT (`tool-documents.tsx`) or a
+ *  utility-placement registration (`tool-loader.ts`) since W3. */
+export function ToolHost({ tool }: { tool: GlobalTool }) {
   const ToolComponent = tool.Component;
   return (
     <div
       data-testid={`tool-panel-${tool.id}`}
-      style={{ flex: 1, minHeight: 0, overflow: 'auto', color: '#c5c8ce' }}
+      style={{ flex: 1, minHeight: 0, overflow: 'auto', color: themeVars.content.primary }}
     >
       <ToolErrorBoundary file={tool.file}>
         <ToolComponent />