@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/primitives/Panel.tsx

@@ -1,67 +1,72 @@
 import type React from 'react';
+import { space, themeVars } from '../../theme';
+import { panelHeaderStyle } from './panel-header-styles';
 
 interface PanelOwnProps {
   name: React.ReactNode;
   actions?: React.ReactNode;
   onHeaderClick?: () => void;
+  /** The dock host already names permanent panels in its tab strip. Hide the
+   * legacy embedded header there to avoid two consecutive titles for one
+   * surface while retaining Panel's content/layout behavior. */
+  hideHeader?: boolean;
 }
 
 type PanelProps = PanelOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof PanelOwnProps>;
 
-export function Panel({ name, actions, onHeaderClick, style, children, ...rest }: PanelProps) {
+export function Panel({
+  name,
+  actions,
+  onHeaderClick,
+  hideHeader = false,
+  style,
+  children,
+  ...rest
+}: PanelProps) {
   return (
     <div
       {...rest}
       style={{
-        background: '#242424',
+        background: themeVars.surface.panel,
         display: 'flex',
         flexDirection: 'column',
         pointerEvents: 'auto',
         ...style,
       }}
     >
-      {/* Header */}
-      <div
-        role={onHeaderClick ? 'button' : undefined}
-        tabIndex={onHeaderClick ? 0 : undefined}
-        onClick={onHeaderClick}
-        onKeyDown={
-          onHeaderClick
-            ? (e) => {
-                if (e.key === 'Enter') onHeaderClick();
-              }
-            : undefined
-        }
-        style={{
-          padding: '4px 8px',
-          background: '#2c2c2c',
-          borderBottom: '1px solid #333',
-          fontWeight: 600,
-          fontSize: 11,
-          textTransform: 'uppercase',
-          color: '#8c8c8c',
-          display: 'flex',
-          alignItems: 'center',
-          flexShrink: 0,
-          cursor: onHeaderClick ? 'pointer' : undefined,
-          userSelect: 'none',
-          pointerEvents: 'auto',
-        }}
-      >
-        <span style={{ flexShrink: 0 }}>{name}</span>
-        {actions && (
-          <div
-            style={{
-              marginLeft: 'auto',
-              display: 'flex',
-              alignItems: 'center',
-              gap: 6,
-            }}
-          >
-            {actions}
-          </div>
-        )}
-      </div>
+      {!hideHeader && (
+        <div
+          role={onHeaderClick ? 'button' : undefined}
+          tabIndex={onHeaderClick ? 0 : undefined}
+          onClick={onHeaderClick}
+          onKeyDown={
+            onHeaderClick
+              ? (e) => {
+                  if (e.key === 'Enter') onHeaderClick();
+                }
+              : undefined
+          }
+          style={{
+            ...panelHeaderStyle,
+            cursor: onHeaderClick ? 'pointer' : undefined,
+            pointerEvents: 'auto',
+          }}
+        >
+          <span style={{ flexShrink: 0 }}>{name}</span>
+          {actions && (
+            <div
+              style={{
+                marginLeft: 'auto',
+                display: 'flex',
+                alignItems: 'center',
+                gap: space[3],
+              }}
+            >
+              {actions}
+            </div>
+          )}
+        </div>
+      )}
       {children}
     </div>
   );

package/src/components/primitives/SectionHeader.tsx

@@ -1,6 +1,5 @@
-import { faChevronDown, faChevronRight } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useState } from 'react';
+import { DisclosureIcon } from './EditorIcon';
 
 interface SectionHeaderProps {
   label: string;
@@ -12,34 +11,17 @@ export function SectionHeader({ label, defaultOpen = true, children }: SectionHe
   const [open, setOpen] = useState(defaultOpen);
 
   return (
-    <div style={{ borderBottom: '1px solid #333' }}>
-      <div
-        role="button"
-        tabIndex={0}
+    <section className="vgai-section">
+      <button
+        type="button"
+        className="vgai-section-header"
+        aria-expanded={open}
         onClick={() => setOpen(!open)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            setOpen(!open);
-          }
-        }}
-        style={{
-          padding: '6px 8px',
-          cursor: 'pointer',
-          fontWeight: 600,
-          fontSize: 11,
-          textTransform: 'uppercase',
-          color: '#8c8c8c',
-          display: 'flex',
-          alignItems: 'center',
-          gap: 4,
-          userSelect: 'none',
-        }}
       >
-        <FontAwesomeIcon icon={open ? faChevronDown : faChevronRight} style={{ fontSize: 8 }} />
+        <DisclosureIcon direction={open ? 'down' : 'right'} />
         {label}
-      </div>
-      {open && <div style={{ padding: '0 8px 8px' }}>{children}</div>}
-    </div>
+      </button>
+      {open && <div className="vgai-section-body">{children}</div>}
+    </section>
   );
 }

package/src/components/primitives/Text.tsx

@@ -0,0 +1,46 @@
+import { type ElementType, forwardRef, type HTMLAttributes } from 'react';
+
+export type TextVariant = 'caption' | 'body' | 'label' | 'title' | 'heading' | 'display' | 'code';
+export type TextTone = 'primary' | 'muted' | 'dim' | 'accent' | 'danger' | 'warning' | 'success';
+
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+  as?: ElementType;
+  variant?: TextVariant;
+  tone?: TextTone;
+  truncate?: boolean;
+  selectable?: boolean;
+}
+
+function classes(base: string, className?: string): string {
+  return className ? `${base} ${className}` : base;
+}
+
+/** Semantic editor typography. Product surfaces choose a role, never a px size. */
+export const Text = forwardRef<HTMLElement, TextProps>(function Text(
+  {
+    as: Component = 'span',
+    variant = 'body',
+    tone = 'primary',
+    truncate = false,
+    selectable = false,
+    className,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <Component
+      {...props}
+      ref={ref}
+      data-variant={variant}
+      data-tone={tone}
+      data-truncate={truncate || undefined}
+      data-selectable={selectable || undefined}
+      className={classes('vgai-text', className)}
+    />
+  );
+});
+
+export function Keycap({ className, ...props }: HTMLAttributes<HTMLElement>) {
+  return <kbd {...props} className={classes('vgai-keycap', className)} />;
+}

package/src/components/primitives/Tooltip.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from 'react';
+import { fontSize, themeVars, zIndex } from '../../theme';
 
 interface TooltipProps {
   text: string;
@@ -46,30 +47,37 @@ export function Tooltip({
           style={{
             position: 'absolute',
             ...positionStyles[position],
-            background: '#1e1e1e',
-            border: '1px solid #555',
-            borderRadius: 4,
+            background: themeVars.surface.inset,
+            // Reconciled to border-2/shadow-sm per EDITOR-STYLE-AUDIT.md §3
+            // (was its own one-off `#555`, drifted from the app-wide
+            // floating-surface border convention) — U1 reviewer nit:
+            // border-2 (#444) to match the menus/popovers chrome contract
+            // (`#444` is what every dropdown/context-menu/popover in this
+            // rail borders itself with), not border-1 (#333, a plain-panel
+            // border, distinct semantic).
+            border: `1px solid ${themeVars.boundary.strong}`,
+            borderRadius: themeVars.shape.medium,
             padding: '4px 8px',
-            zIndex: 10000,
+            zIndex: zIndex.modal,
             pointerEvents: 'none',
             whiteSpace: 'nowrap',
             display: 'flex',
             alignItems: 'center',
             gap: 8,
-            boxShadow: '0 2px 8px rgba(0,0,0,0.6)',
+            boxShadow: themeVars.elevation.small,
           }}
         >
-          <span style={{ fontSize: 11, color: '#c5c8ce' }}>{text}</span>
+          <span style={{ fontSize: fontSize.base, color: themeVars.content.primary }}>{text}</span>
           {hotkey && (
             <kbd
               style={{
-                background: '#333',
-                border: '1px solid #555',
-                borderRadius: 3,
+                background: themeVars.surface.raised,
+                border: `1px solid ${themeVars.boundary.default}`,
+                borderRadius: themeVars.shape.small,
                 padding: '1px 5px',
-                fontFamily: 'monospace',
-                fontSize: 10,
-                color: '#ccc',
+                fontFamily: themeVars.typography.mono,
+                fontSize: fontSize.sm,
+                color: themeVars.content.primary,
               }}
             >
               {hotkey}

package/src/components/primitives/Vec3Input.tsx

@@ -28,6 +28,9 @@ export function Vec3Input({
     }
   };
 
+  // Axis tint literals are deliberate (not tokenized): they mirror the
+  // viewport gizmo's R/G/B axis colors, a cross-tool convention (Unity/
+  // Blender) distinct from the semantic danger/success/accent tones.
   return (
     <div style={{ display: 'flex', gap: 4 }}>
       <NumberInput

package/src/components/primitives/banner-tones.ts

@@ -0,0 +1,33 @@
+import { themeVars } from '../../theme';
+
+/**
+ * Shared semantic-tone triples for dismissible chrome banners
+ * (EDITOR-STYLE-AUDIT.md V-16): `MountFailureBanner` (error) and
+ * `OverlayReportBanner` (warning) each hand-rolled an identical-shaped
+ * `{bg, border, fg}` triple as its own inline magic values — built from the
+ * same lightness formula, but two independent literals with no shared
+ * constant. Hoisted here so a future retouch of one can't silently drift
+ * from the other (the same class of bug V-4 already demonstrated happened
+ * to `PlayBar`'s button styles).
+ *
+ * These are tinted-panel triples, not `theme.ts`'s flat `danger`/`warn`
+ * scalars (`theme.ts` has no "dark tinted banner background" slot) — kept
+ * as their own small module rather than added to the shared token file.
+ */
+
+export interface BannerTone {
+  bg: string;
+  border: string;
+  fg: string;
+}
+
+export const TONE_ERROR: BannerTone = {
+  bg: themeVars.semantic.dangerFaint,
+  border: themeVars.semantic.danger,
+  fg: themeVars.semantic.danger,
+};
+export const TONE_WARNING: BannerTone = {
+  bg: themeVars.semantic.warningMuted,
+  border: themeVars.semantic.warning,
+  fg: themeVars.semantic.warning,
+};

package/src/components/primitives/editor-icons.ts

@@ -0,0 +1,102 @@
+import {
+  faArrowPointer,
+  faArrowsRotate,
+  faBookOpen,
+  faBorderAll,
+  faCamera,
+  faChartSimple,
+  faCheck,
+  faCircleExclamation,
+  faCircleInfo,
+  faCode,
+  faCrosshairs,
+  faCube,
+  faDiagramProject,
+  faEye,
+  faEyeSlash,
+  faFile,
+  faFileCode,
+  faFolder,
+  faFolderOpen,
+  faForwardStep,
+  faHammer,
+  faImage,
+  faLightbulb,
+  faLock,
+  faLockOpen,
+  faMagnet,
+  faMagnifyingGlass,
+  faMusic,
+  faPause,
+  faPlay,
+  faPlus,
+  faPuzzlePiece,
+  faRotate,
+  faRotateLeft,
+  faRotateRight,
+  faStop,
+  faTable,
+  faTrash,
+  faTriangleExclamation,
+  faUpDownLeftRight,
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons';
+
+/**
+ * Semantic icon registry for editor chrome. Components may still import a
+ * genuinely domain-specific Font Awesome definition, but recurring actions,
+ * content kinds, status, and viewport tools use these stable meanings.
+ */
+export const editorIcons = {
+  action: {
+    add: faPlus,
+    close: faXmark,
+    delete: faTrash,
+    search: faMagnifyingGlass,
+    refresh: faArrowsRotate,
+    undo: faRotateLeft,
+    redo: faRotateRight,
+    build: faHammer,
+    select: faArrowPointer,
+  },
+  transport: {
+    play: faPlay,
+    pause: faPause,
+    stop: faStop,
+    step: faForwardStep,
+  },
+  content: {
+    project: faFolderOpen,
+    folder: faFolder,
+    file: faFile,
+    source: faFileCode,
+    scene: faBookOpen,
+    entity: faCube,
+    component: faPuzzlePiece,
+    camera: faCamera,
+    light: faLightbulb,
+    image: faImage,
+    audio: faMusic,
+    data: faTable,
+    code: faCode,
+    stateMachine: faDiagramProject,
+  },
+  status: {
+    success: faCheck,
+    info: faCircleInfo,
+    warning: faTriangleExclamation,
+    error: faCircleExclamation,
+    visible: faEye,
+    hidden: faEyeSlash,
+    locked: faLock,
+    unlocked: faLockOpen,
+  },
+  tool: {
+    move: faUpDownLeftRight,
+    rotate: faRotate,
+    snap: faMagnet,
+    frame: faCrosshairs,
+    grid: faBorderAll,
+    profiler: faChartSimple,
+  },
+} as const;

package/src/components/primitives/panel-header-styles.ts

@@ -0,0 +1,30 @@
+import type React from 'react';
+import { chromeSize, fontSize, fontWeight, space, themeVars } from '../../theme';
+
+/** Shared typography and metrics for panel titles and disclosure sections. */
+export const panelHeaderLabelStyle: React.CSSProperties = {
+  minHeight: chromeSize.panelHeader,
+  padding: `0 ${space[4]}px`,
+  color: themeVars.content.muted,
+  fontSize: fontSize.base,
+  fontWeight: fontWeight.semibold,
+  textTransform: 'uppercase',
+  display: 'flex',
+  alignItems: 'center',
+  gap: space[2],
+  userSelect: 'none',
+};
+
+/** Disclosure rows are one density step below full panel headers. */
+export const sectionHeaderLabelStyle: React.CSSProperties = {
+  ...panelHeaderLabelStyle,
+  minHeight: chromeSize.localToolbar,
+};
+
+/** Complete header rail treatment for a standalone panel. */
+export const panelHeaderStyle: React.CSSProperties = {
+  ...panelHeaderLabelStyle,
+  background: themeVars.surface.chrome,
+  borderBottom: `1px solid ${themeVars.boundary.default}`,
+  flexShrink: 0,
+};

package/src/components/project-operation-documents.tsx

@@ -0,0 +1,226 @@
+import { useMemo, useState, useSyncExternalStore } from 'react';
+import type { EditorAction } from '../action-registry';
+import { Button, bg, border, danger, fontSize, radius, text } from '../design-system';
+import {
+  getProjectOperations,
+  projectOperationsVersion,
+  runProjectOperation,
+  subscribeProjectOperations,
+} from '../project-operations';
+import {
+  openWorkspaceDocument,
+  type WorkspaceDocumentContentProps,
+} from '../workspace-document-registry';
+
+const CATALOG_DOCUMENT_ID = 'project-operations';
+const OPERATION_DOCUMENT_PREFIX = 'project-operation:';
+
+export interface ProjectOperationDocumentStore {
+  setActiveViewportTab(tab: 'scene' | 'game'): void;
+}
+
+function operationDocumentId(name: string): string {
+  return `${OPERATION_DOCUMENT_PREFIX}${name}`;
+}
+
+export function openProjectOperationsDocument(store: ProjectOperationDocumentStore): void {
+  openWorkspaceDocument({
+    id: CATALOG_DOCUMENT_ID,
+    title: 'Project Commands',
+    kind: 'operation',
+    Content: ProjectOperationDocumentContent,
+    closeable: true,
+    onActivate: () => store.setActiveViewportTab('scene'),
+  });
+}
+
+export function openProjectOperationDocument(
+  store: ProjectOperationDocumentStore | null,
+  name: string,
+): boolean {
+  const operation = getProjectOperations().operations.find((entry) => entry.name === name);
+  if (!operation) return false;
+  openWorkspaceDocument({
+    id: operationDocumentId(name),
+    title: operation.summary || operation.name,
+    kind: 'operation',
+    provenance: { sourcePath: operation.sourcePath, origin: operation.name },
+    Content: ProjectOperationDocumentContent,
+    closeable: true,
+    ...(store ? { onActivate: () => store.setActiveViewportTab('scene') } : {}),
+  });
+  return true;
+}
+
+export function buildProjectOperationActions(store: ProjectOperationDocumentStore): EditorAction[] {
+  return [
+    {
+      id: 'project-operations:open',
+      label: 'Open Project Commands',
+      category: 'action',
+      execute: () => openProjectOperationsDocument(store),
+    },
+    ...getProjectOperations().operations.map((operation) => ({
+      id: `project-operation:${operation.name}`,
+      label: `Run: ${operation.summary || operation.name}`,
+      category: 'action' as const,
+      execute: () => void openProjectOperationDocument(store, operation.name),
+    })),
+  ];
+}
+
+function JsonBlock({ value }: { value: unknown }) {
+  return <pre style={jsonStyle}>{JSON.stringify(value, null, 2)}</pre>;
+}
+
+export function ProjectOperationDocumentContent({ documentId }: WorkspaceDocumentContentProps) {
+  useSyncExternalStore(subscribeProjectOperations, projectOperationsVersion);
+  const snapshot = getProjectOperations();
+  const operationName = documentId.startsWith(OPERATION_DOCUMENT_PREFIX)
+    ? documentId.slice(OPERATION_DOCUMENT_PREFIX.length)
+    : null;
+  const operation = operationName
+    ? snapshot.operations.find((entry) => entry.name === operationName)
+    : null;
+  const [inputText, setInputText] = useState('{}');
+  const [result, setResult] = useState<unknown>(null);
+  const [running, setRunning] = useState(false);
+  const [inputError, setInputError] = useState<string | null>(null);
+  const parsedSchema = useMemo(() => operation?.inputSchema ?? {}, [operation]);
+
+  if (!operationName) {
+    return (
+      <div style={rootStyle} data-testid="project-operations-catalog">
+        <h2 style={headingStyle}>Project Commands</h2>
+        <p style={mutedStyle}>
+          Auto-discovered from nested <code>src/operations/*.operation.ts</code> files. Commands are
+          ordinary project functions with a validated tooling boundary; custom interfaces live in{' '}
+          <code>src/tools/</code>.
+        </p>
+        {snapshot.operations.map((entry) => (
+          <Button
+            key={entry.name}
+            type="button"
+            className="vgai-operation-card"
+            onClick={() => openProjectOperationDocument(null, entry.name)}
+            data-testid={`project-command-card:${entry.name}`}
+          >
+            <div style={{ color: text[1] }}>{entry.summary}</div>
+            <code style={mutedStyle}>{entry.name}</code>
+            <div style={mutedStyle}>
+              {entry.host} · {entry.permission.risk} · {entry.sourcePath}
+            </div>
+          </Button>
+        ))}
+        {snapshot.operations.length === 0 && snapshot.loadErrors.length === 0 && (
+          <div style={mutedStyle}>No project commands found.</div>
+        )}
+        {snapshot.loadErrors.map((error) => (
+          <div key={`${error.sourcePath}:${error.message}`} style={errorStyle}>
+            {error.sourcePath}: {error.message}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (!operation) {
+    return <div style={rootStyle}>This operation is no longer available.</div>;
+  }
+
+  const runnable = operation.host === 'node';
+  const execute = async () => {
+    let input: unknown;
+    try {
+      input = JSON.parse(inputText);
+      setInputError(null);
+    } catch (error) {
+      setInputError(error instanceof Error ? error.message : String(error));
+      return;
+    }
+    const confirm =
+      operation.permission.risk === 'read' ||
+      window.confirm(`${operation.permission.summary}\n\nRun ${operation.name}?`);
+    if (!confirm) return;
+    setRunning(true);
+    try {
+      setResult(await runProjectOperation(operation.name, input, { confirm: true }));
+    } catch (error) {
+      setResult({ ok: false, error: { code: 'REQUEST_FAILED', message: String(error) } });
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  return (
+    <div style={rootStyle} data-testid={`project-operation:${operation.name}`}>
+      <h2 style={headingStyle}>{operation.summary}</h2>
+      <code style={{ color: text[2] }}>{operation.name}</code>
+      <p style={{ color: text[2] }}>{operation.description}</p>
+      <div style={mutedStyle}>
+        {operation.host} · {operation.permission.risk} · {operation.sourcePath}
+      </div>
+      {!runnable && (
+        <div style={errorStyle}>
+          This command runner supports Node-hosted operations. Import the underlying function
+          directly in browser or runtime code.
+        </div>
+      )}
+      <label style={labelStyle} htmlFor={`operation-input:${operation.name}`}>
+        Input JSON
+      </label>
+      <textarea
+        id={`operation-input:${operation.name}`}
+        value={inputText}
+        onChange={(event) => setInputText(event.target.value)}
+        rows={10}
+        style={textareaStyle}
+      />
+      {inputError && <div style={errorStyle}>{inputError}</div>}
+      <Button type="button" disabled={!runnable || running} onClick={() => void execute()}>
+        {running ? 'Running…' : 'Run command'}
+      </Button>
+      <details>
+        <summary style={labelStyle}>Input schema</summary>
+        <JsonBlock value={parsedSchema} />
+      </details>
+      {result !== null && (
+        <section>
+          <div style={labelStyle}>Result</div>
+          <JsonBlock value={result} />
+        </section>
+      )}
+    </div>
+  );
+}
+
+const rootStyle: React.CSSProperties = {
+  padding: 16,
+  overflow: 'auto',
+  pointerEvents: 'auto',
+  color: text[1],
+  fontSize: fontSize.base,
+};
+const headingStyle: React.CSSProperties = { margin: '0 0 8px', fontSize: 18 };
+const mutedStyle: React.CSSProperties = { color: text[2], fontSize: fontSize.sm };
+const labelStyle: React.CSSProperties = { display: 'block', margin: '14px 0 6px', color: text[1] };
+const errorStyle: React.CSSProperties = { marginTop: 10, color: danger, whiteSpace: 'pre-wrap' };
+const textareaStyle: React.CSSProperties = {
+  width: '100%',
+  boxSizing: 'border-box',
+  padding: 10,
+  resize: 'vertical',
+  background: bg.inset,
+  color: text[1],
+  border: `1px solid ${border[2]}`,
+  borderRadius: radius.sm,
+  fontFamily: 'monospace',
+};
+const jsonStyle: React.CSSProperties = {
+  overflow: 'auto',
+  padding: 10,
+  background: bg.inset,
+  border: `1px solid ${border[1]}`,
+  borderRadius: radius.sm,
+  color: text[2],
+};