@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/CommandPalette.tsx

@@ -6,7 +6,26 @@ import {
   getRecentActionIds,
   pushRecentAction,
 } from '../action-registry';
-import { useEditorStore } from '../EditorContext';
+import {
+  accentMuted,
+  bg,
+  border,
+  DisclosureIcon,
+  fontSize,
+  fontWeight,
+  radius,
+  scrim,
+  shadow,
+  TextInput,
+  text,
+} from '../design-system';
+import { useEditorStore, useHistoryCommandSnapshot, useHistoryCommands } from '../EditorContext';
+import { zIndex } from '../z-index';
+import { buildDataAssetActions } from './data-documents';
+import { buildProjectOperationActions } from './project-operation-documents';
+import { buildStoryActions } from './story-documents';
+import { buildToolActions } from './tool-documents';
+import { buildXStateMachineActions } from './xstate-documents';
 
 interface CommandPaletteProps {
   onClose: () => void;
@@ -36,16 +55,29 @@ const CATEGORY_ORDER = ['action', 'entity'];
 
 export function CommandPalette({ onClose }: CommandPaletteProps) {
   const store = useEditorStore();
+  const history = useHistoryCommands();
+  const historySnapshot = useHistoryCommandSnapshot();
   const [query, setQuery] = useState('');
   const [highlightIndex, setHighlightIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
 
   const actions = useMemo(() => {
-    const statics = buildStaticActions(store);
+    const statics = buildStaticActions(store, history, historySnapshot);
+    // W3 (workspace-shell §9/W3) — document-open discovery lives HERE now
+    // that the permanent bottom tabs are gone: data assets (one per
+    // discovered file), document-placement project tools, and live XState
+    // machines. All read live snapshots; the palette mounts fresh per open.
+    const documents = [
+      ...buildDataAssetActions(store),
+      ...buildProjectOperationActions(store),
+      ...buildStoryActions(store),
+      ...buildToolActions(store),
+      ...buildXStateMachineActions(),
+    ];
     const entities = buildEntityActions(store);
-    return [...statics, ...entities];
-  }, [store]);
+    return [...statics, ...documents, ...entities];
+  }, [store, history, historySnapshot]);
 
   const recentIds = useMemo(() => getRecentActionIds(), []);
 
@@ -124,13 +156,16 @@ export function CommandPalette({ onClose }: CommandPaletteProps) {
 
   return (
     <div
+      role="dialog"
+      aria-label="Command Palette"
+      data-testid="command-palette"
       style={overlayStyle}
       onMouseDown={(e) => {
         if (e.target === e.currentTarget) onClose();
       }}
     >
       <div style={paletteStyle}>
-        <input
+        <TextInput
           ref={inputRef}
           type="text"
           value={query}
@@ -153,16 +188,20 @@ export function CommandPalette({ onClose }: CommandPaletteProps) {
                     data-palette-item
                     style={{
                       ...rowStyle,
-                      background: isActive ? '#3c3c3c' : 'transparent',
+                      background: isActive ? accentMuted : 'transparent',
                     }}
-                    onMouseEnter={() => setHighlightIndex(idx)}
+                    onPointerMove={() => setHighlightIndex(idx)}
                     onMouseDown={(e) => {
                       e.preventDefault();
                       executeAction(action);
                     }}
                   >
                     <span style={iconStyle}>
-                      {action.category === 'entity' ? '\u25CB' : '\u25B8'}
+                      {action.category === 'entity' ? (
+                        '\u25CB'
+                      ) : (
+                        <DisclosureIcon direction="right" />
+                      )}
                     </span>
                     <span style={labelStyle}>{action.label}</span>
                     {action.shortcut && <span style={shortcutStyle}>{action.shortcut}</span>}
@@ -177,37 +216,43 @@ export function CommandPalette({ onClose }: CommandPaletteProps) {
   );
 }
 
+/** D-1: the Command Palette was the ONLY overlay in the app with zero
+ *  backdrop dimming — it now uses the same dialog-family scrim, and
+ *  `position: fixed` (like every sibling modal's scrim) so the dimming
+ *  covers the whole app, not just the viewport panel it mounts inside. */
 const overlayStyle: React.CSSProperties = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
+  position: 'fixed',
+  inset: 0,
+  background: scrim,
   display: 'flex',
   justifyContent: 'center',
+  alignItems: 'flex-start',
   paddingTop: 60,
-  zIndex: 10000,
+  zIndex: zIndex.modal,
   pointerEvents: 'auto',
 };
 
+/** D-9: dialog-family chrome (bg-2 / border-2 / radius-lg / shadow-lg) —
+ *  replaces the palette's one-off `#252526`/`#555`/radius-6 near-miss. */
 const paletteStyle: React.CSSProperties = {
   width: 500,
   maxHeight: 480,
-  background: '#252526',
-  border: '1px solid #555',
-  borderRadius: 6,
-  boxShadow: '0 8px 32px rgba(0,0,0,0.6)',
+  background: bg[2],
+  border: `1px solid ${border[2]}`,
+  borderRadius: radius.lg,
+  boxShadow: shadow.lg,
+  color: text[1],
   display: 'flex',
   flexDirection: 'column',
   overflow: 'hidden',
 };
 
 const inputStyle: React.CSSProperties = {
-  background: '#1e1e1e',
+  background: bg.inset,
   border: 'none',
-  borderBottom: '1px solid #444',
-  color: '#c5c8ce',
-  fontSize: 14,
+  borderBottom: `1px solid ${border[2]}`,
+  color: text[1],
+  fontSize: fontSize.xl,
   padding: '10px 14px',
   outline: 'none',
   fontFamily: 'inherit',
@@ -220,9 +265,9 @@ const resultsStyle: React.CSSProperties = {
 };
 
 const categoryHeaderStyle: React.CSSProperties = {
-  fontSize: 11,
-  fontWeight: 600,
-  color: '#888',
+  fontSize: fontSize.base,
+  fontWeight: fontWeight.semibold,
+  color: text[2],
   textTransform: 'uppercase',
   padding: '6px 14px 2px',
   letterSpacing: 0.5,
@@ -237,8 +282,8 @@ const rowStyle: React.CSSProperties = {
 };
 
 const iconStyle: React.CSSProperties = {
-  fontSize: 10,
-  color: '#888',
+  fontSize: fontSize.sm,
+  color: text[3],
   width: 14,
   textAlign: 'center',
   flexShrink: 0,
@@ -252,14 +297,14 @@ const labelStyle: React.CSSProperties = {
 };
 
 const shortcutStyle: React.CSSProperties = {
-  fontSize: 11,
-  color: '#666',
+  fontSize: fontSize.base,
+  color: text[3],
   flexShrink: 0,
   fontFamily: 'inherit',
 };
 
 const emptyStyle: React.CSSProperties = {
   padding: '16px 14px',
-  color: '#666',
+  color: text[3],
   textAlign: 'center',
 };

package/src/components/ConsolePanel.css

@@ -0,0 +1,55 @@
+.vgai-console {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+.vgai-console .vgai-toolbar {
+  flex: 0 0 auto;
+}
+.vgai-console-filter {
+  width: 140px;
+  margin-left: auto;
+}
+.vgai-console-list {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  font-family: var(--vgai-font-mono);
+  font-size: var(--vgai-font-base);
+  line-height: 18px;
+}
+.vgai-console-empty {
+  padding: var(--vgai-space-6) var(--vgai-space-4);
+  color: var(--vgai-content-dim);
+  font-style: italic;
+}
+.vgai-console-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 1px var(--vgai-space-4);
+  border-bottom: var(--vgai-stroke-resting) solid var(--vgai-boundary-default);
+}
+.vgai-console-row[data-level="error"] {
+  background: var(--vgai-danger-faint);
+}
+.vgai-console-row:hover {
+  background: var(--vgai-neutral-hover);
+}
+.vgai-console-count {
+  flex: 0 0 auto;
+  margin-left: var(--vgai-space-3);
+  padding: 0 var(--vgai-space-2);
+  color: var(--vgai-content-muted);
+  background: var(--vgai-surface-raised);
+  border-radius: var(--vgai-radius-lg);
+  font-size: var(--vgai-font-sm);
+}
+.vgai-console [data-console-level="info"][aria-pressed="true"] {
+  color: var(--vgai-content-primary);
+}
+.vgai-console [data-console-level="warn"][aria-pressed="true"] {
+  color: var(--vgai-warn);
+}
+.vgai-console [data-console-level="error"][aria-pressed="true"] {
+  color: var(--vgai-danger);
+}

package/src/components/ConsolePanel.tsx

@@ -5,16 +5,26 @@ import {
   faTimesCircle,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { getActiveAuthoring } from '../authoring/active-adapter';
+import {
+  Button,
+  EditorIcon,
+  EditorSurface,
+  EditorToolbar,
+  IconButton,
+  TextInput,
+  ToolbarDivider,
+  themeVars,
+} from '../design-system';
 import { useEditorStore } from '../EditorContext';
 import { type ConsoleLevel, editorConsole } from '../editor-console';
+import './ConsolePanel.css';
 
 const LEVEL_COLORS: Record<ConsoleLevel, string> = {
-  info: '#c5c8ce',
-  warn: '#FFD866',
-  error: '#FF6B6B',
+  info: themeVars.content.primary,
+  warn: themeVars.semantic.warning,
+  error: themeVars.semantic.danger,
 };
 
 const SUBSYSTEM_COLORS: Record<string, string> = {
@@ -25,7 +35,7 @@ const SUBSYSTEM_COLORS: Record<string, string> = {
   audio: '#ab9df2',
   ai: '#ffd866',
   input: '#78dce8',
-  core: '#c5c8ce',
+  core: themeVars.content.primary,
 };
 
 const LEVEL_ICONS = {
@@ -85,132 +95,79 @@ export function ConsolePanel() {
   const counts = editorConsole.counts;
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+    <EditorSurface className="vgai-console">
       {/* Toolbar */}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 4,
-          padding: '3px 8px',
-          borderBottom: '1px solid #333',
-          flexShrink: 0,
-        }}
-      >
+      <EditorToolbar label="Console filters" compact>
         {/* Clear button */}
-        <button
-          type="button"
+        <IconButton
+          aria-label="Clear console"
+          size="compact"
           onClick={() => editorConsole.clear()}
           title="Clear console"
-          style={{
-            background: '#333',
-            color: '#c5c8ce',
-            border: '1px solid #444',
-            borderRadius: 3,
-            padding: '2px 6px',
-            cursor: 'pointer',
-            fontSize: 11,
-            display: 'flex',
-            alignItems: 'center',
-            gap: 4,
-          }}
         >
-          <FontAwesomeIcon icon={faTrash} style={{ fontSize: 9 }} />
-        </button>
+          <EditorIcon icon={faTrash} size="xs" />
+        </IconButton>
 
-        <div style={{ width: 1, height: 16, background: '#444', margin: '0 2px' }} />
+        <ToolbarDivider />
 
         {/* Level filter toggles */}
         {(['info', 'warn', 'error'] as const).map((level) => (
-          <button
+          <Button
             key={level}
-            type="button"
+            variant="ghost"
+            size="compact"
+            aria-label={`Toggle ${level} messages`}
+            aria-pressed={showLevels[level]}
+            data-console-level={level}
             onClick={() => toggleLevel(level)}
-            style={{
-              background: showLevels[level] ? '#3a3a3a' : 'transparent',
-              color: showLevels[level] ? LEVEL_COLORS[level] : '#555',
-              border: `1px solid ${showLevels[level] ? '#555' : '#333'}`,
-              borderRadius: 3,
-              padding: '2px 6px',
-              cursor: 'pointer',
-              fontSize: 11,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 4,
-            }}
           >
-            <FontAwesomeIcon icon={LEVEL_ICONS[level]} style={{ fontSize: 9 }} />
+            <EditorIcon icon={LEVEL_ICONS[level]} size="xs" />
             {counts[level]}
-          </button>
+          </Button>
         ))}
 
         {/* Search filter */}
-        <input
-          type="text"
+        {/* B-4: the one dock text-input style (`.vgai-input` — real hover/focus
+            states from the U0 sheet) instead of this file's own variant. */}
+        <TextInput
           placeholder="Filter..."
           value={filter}
           onChange={(e) => setFilter(e.target.value)}
-          style={{
-            marginLeft: 'auto',
-            background: '#1e1e1e',
-            color: '#c5c8ce',
-            border: '1px solid #444',
-            borderRadius: 3,
-            padding: '2px 6px',
-            fontSize: 11,
-            width: 140,
-            outline: 'none',
-          }}
+          className="vgai-console-filter"
         />
-      </div>
+      </EditorToolbar>
 
       {/* Message list */}
-      <div
-        ref={listRef}
-        onScroll={handleScroll}
-        style={{
-          flex: 1,
-          overflowY: 'auto',
-          fontFamily: 'ui-monospace, "SF Mono", Monaco, "Cascadia Code", monospace',
-          fontSize: 11,
-          lineHeight: '18px',
-          scrollbarWidth: 'none',
-        }}
-      >
-        {filtered.length === 0 && (
-          <div style={{ padding: '12px 8px', color: '#555', fontStyle: 'italic' }}>No messages</div>
-        )}
+      <div ref={listRef} onScroll={handleScroll} className="vgai-console-list">
+        {filtered.length === 0 && <div className="vgai-console-empty">No messages</div>}
         {filtered.map((entry) => {
           const entityId =
             entry.metadata?.['entityId'] != null ? String(entry.metadata['entityId']) : null;
           const entity = entityId ? store.getEntityById(entityId) : null;
           const entityName = entity?.name ?? entityId;
 
+          // dangerFaint (NOT dangerMuted): resting row tint stays deliberately
+          // low-emphasis so stacked error rows read as a list, not a red wall.
           return (
             <div
               key={entry.id}
-              style={{
-                display: 'flex',
-                alignItems: 'flex-start',
-                padding: '1px 8px',
-                borderBottom: '1px solid #2a2a2a',
-                color: LEVEL_COLORS[entry.level],
-                background: entry.level === 'error' ? 'rgba(255,107,107,0.06)' : 'transparent',
-              }}
+              className="vgai-console-row"
+              data-level={entry.level}
+              style={{ color: LEVEL_COLORS[entry.level] }}
             >
-              <span style={{ color: '#555', marginRight: 6, flexShrink: 0 }}>
+              <span style={{ color: themeVars.content.dim, marginRight: 6, flexShrink: 0 }}>
                 {formatTime(entry.timestamp)}
               </span>
-              <FontAwesomeIcon
+              <EditorIcon
                 icon={LEVEL_ICONS[entry.level]}
                 style={{ fontSize: 9, marginTop: 4, marginRight: 6, flexShrink: 0 }}
               />
               {entry.subsystem && (
                 <span
                   style={{
-                    background: `${SUBSYSTEM_COLORS[entry.subsystem] ?? '#888'}22`,
-                    color: SUBSYSTEM_COLORS[entry.subsystem] ?? '#888',
-                    borderRadius: 3,
+                    background: `${SUBSYSTEM_COLORS[entry.subsystem] ?? themeVars.content.muted}22`,
+                    color: SUBSYSTEM_COLORS[entry.subsystem] ?? themeVars.content.muted,
+                    borderRadius: themeVars.shape.small,
                     padding: '0 4px',
                     fontSize: 10,
                     marginRight: 6,
@@ -226,9 +183,9 @@ export function ConsolePanel() {
                   <span
                     onClick={() => selectAndFocusEntity(entityId)}
                     style={{
-                      background: '#2a3a2a',
-                      color: '#a9dc76',
-                      borderRadius: 3,
+                      background: themeVars.semantic.successMuted,
+                      color: themeVars.semantic.success,
+                      borderRadius: themeVars.shape.small,
                       padding: '0 5px',
                       fontSize: 10,
                       marginLeft: 6,
@@ -240,33 +197,21 @@ export function ConsolePanel() {
                     }}
                     title={`Select and focus "${entityName}"`}
                   >
-                    <FontAwesomeIcon icon={faCube} style={{ fontSize: 8 }} />
+                    <EditorIcon icon={faCube} style={{ fontSize: 8 }} />
                     {entityName}
                   </span>
                 )}
                 {entry.source && (
-                  <span style={{ color: '#666', marginLeft: 6 }}>[{entry.source}]</span>
+                  <span style={{ color: themeVars.content.dim, marginLeft: 6 }}>
+                    [{entry.source}]
+                  </span>
                 )}
               </span>
-              {entry.count > 1 && (
-                <span
-                  style={{
-                    background: '#444',
-                    color: '#aaa',
-                    borderRadius: 8,
-                    padding: '0 5px',
-                    fontSize: 10,
-                    marginLeft: 6,
-                    flexShrink: 0,
-                  }}
-                >
-                  {entry.count}
-                </span>
-              )}
+              {entry.count > 1 && <span className="vgai-console-count">{entry.count}</span>}
             </div>
           );
         })}
       </div>
-    </div>
+    </EditorSurface>
   );
 }