@vgai/editor 0.2.0

package/src/components/CommandPalette.tsx

@@ -0,0 +1,265 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  buildEntityActions,
+  buildStaticActions,
+  type EditorAction,
+  getRecentActionIds,
+  pushRecentAction,
+} from '../action-registry';
+import { useEditorStore } from '../EditorContext';
+
+interface CommandPaletteProps {
+  onClose: () => void;
+}
+
+function scoreAction(action: EditorAction, query: string, recentIds: string[]): number {
+  if (!query) {
+    const recentIdx = recentIds.indexOf(action.id);
+    return recentIdx >= 0 ? 100 - recentIdx : 0;
+  }
+  const label = action.label.toLowerCase();
+  const q = query.toLowerCase();
+  if (!label.includes(q)) return -1;
+  let score = 10;
+  if (label.startsWith(q)) score += 20;
+  const recentIdx = recentIds.indexOf(action.id);
+  if (recentIdx >= 0) score += 5 - Math.min(recentIdx, 4);
+  return score;
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  action: 'Actions',
+  entity: 'Entities',
+};
+
+const CATEGORY_ORDER = ['action', 'entity'];
+
+export function CommandPalette({ onClose }: CommandPaletteProps) {
+  const store = useEditorStore();
+  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 entities = buildEntityActions(store);
+    return [...statics, ...entities];
+  }, [store]);
+
+  const recentIds = useMemo(() => getRecentActionIds(), []);
+
+  const results = useMemo(() => {
+    const scored = actions
+      .map((a) => ({ action: a, score: scoreAction(a, query, recentIds) }))
+      .filter((s) => s.score >= 0)
+      .sort((a, b) => b.score - a.score);
+    return scored.slice(0, 20).map((s) => s.action);
+  }, [actions, query, recentIds]);
+
+  // Group results by category
+  const grouped = useMemo(() => {
+    const groups: { category: string; label: string; items: EditorAction[] }[] = [];
+    for (const cat of CATEGORY_ORDER) {
+      const items = results.filter((r) => r.category === cat);
+      if (items.length > 0) {
+        groups.push({ category: cat, label: CATEGORY_LABELS[cat] ?? cat, items });
+      }
+    }
+    return groups;
+  }, [results]);
+
+  // Flat list for keyboard navigation
+  const flatResults = useMemo(() => grouped.flatMap((g) => g.items), [grouped]);
+
+  // Reset highlight when query changes
+  useEffect(() => {
+    setHighlightIndex(0);
+  }, [query]);
+
+  const executeAction = useCallback(
+    (action: EditorAction) => {
+      pushRecentAction(action.id);
+      onClose();
+      action.execute();
+    },
+    [onClose],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setHighlightIndex((i) => (i + 1) % Math.max(flatResults.length, 1));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setHighlightIndex((i) => (i - 1 + flatResults.length) % Math.max(flatResults.length, 1));
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        const action = flatResults[highlightIndex];
+        if (action) executeAction(action);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    },
+    [flatResults, highlightIndex, executeAction, onClose],
+  );
+
+  // Scroll highlighted item into view
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const items = list.querySelectorAll('[data-palette-item]');
+    const el = items[highlightIndex] as HTMLElement | undefined;
+    if (el) el.scrollIntoView({ block: 'nearest' });
+  }, [highlightIndex]);
+
+  // Focus input on mount
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  let flatIndex = 0;
+
+  return (
+    <div
+      style={overlayStyle}
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div style={paletteStyle}>
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Search actions, entities\u2026"
+          style={inputStyle}
+        />
+        <div ref={listRef} style={resultsStyle}>
+          {grouped.length === 0 && <div style={emptyStyle}>No results</div>}
+          {grouped.map((group) => (
+            <div key={group.category}>
+              <div style={categoryHeaderStyle}>{group.label}</div>
+              {group.items.map((action) => {
+                const idx = flatIndex++;
+                const isActive = idx === highlightIndex;
+                return (
+                  <div
+                    key={action.id}
+                    data-palette-item
+                    style={{
+                      ...rowStyle,
+                      background: isActive ? '#3c3c3c' : 'transparent',
+                    }}
+                    onMouseEnter={() => setHighlightIndex(idx)}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      executeAction(action);
+                    }}
+                  >
+                    <span style={iconStyle}>
+                      {action.category === 'entity' ? '\u25CB' : '\u25B8'}
+                    </span>
+                    <span style={labelStyle}>{action.label}</span>
+                    {action.shortcut && <span style={shortcutStyle}>{action.shortcut}</span>}
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const overlayStyle: React.CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: 'flex',
+  justifyContent: 'center',
+  paddingTop: 60,
+  zIndex: 10000,
+  pointerEvents: 'auto',
+};
+
+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)',
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+};
+
+const inputStyle: React.CSSProperties = {
+  background: '#1e1e1e',
+  border: 'none',
+  borderBottom: '1px solid #444',
+  color: '#c5c8ce',
+  fontSize: 14,
+  padding: '10px 14px',
+  outline: 'none',
+  fontFamily: 'inherit',
+};
+
+const resultsStyle: React.CSSProperties = {
+  overflowY: 'auto',
+  flex: 1,
+  maxHeight: 400,
+};
+
+const categoryHeaderStyle: React.CSSProperties = {
+  fontSize: 11,
+  fontWeight: 600,
+  color: '#888',
+  textTransform: 'uppercase',
+  padding: '6px 14px 2px',
+  letterSpacing: 0.5,
+};
+
+const rowStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  padding: '5px 14px',
+  cursor: 'pointer',
+  gap: 8,
+};
+
+const iconStyle: React.CSSProperties = {
+  fontSize: 10,
+  color: '#888',
+  width: 14,
+  textAlign: 'center',
+  flexShrink: 0,
+};
+
+const labelStyle: React.CSSProperties = {
+  flex: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+};
+
+const shortcutStyle: React.CSSProperties = {
+  fontSize: 11,
+  color: '#666',
+  flexShrink: 0,
+  fontFamily: 'inherit',
+};
+
+const emptyStyle: React.CSSProperties = {
+  padding: '16px 14px',
+  color: '#666',
+  textAlign: 'center',
+};

package/src/components/ConsolePanel.tsx

@@ -0,0 +1,272 @@
+import {
+  faCircleInfo,
+  faCube,
+  faExclamationTriangle,
+  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 { useEditorStore } from '../EditorContext';
+import { type ConsoleLevel, editorConsole } from '../editor-console';
+
+const LEVEL_COLORS: Record<ConsoleLevel, string> = {
+  info: '#c5c8ce',
+  warn: '#FFD866',
+  error: '#FF6B6B',
+};
+
+const SUBSYSTEM_COLORS: Record<string, string> = {
+  scene: '#78dce8',
+  physics: '#ff6188',
+  animation: '#a9dc76',
+  network: '#fc9867',
+  audio: '#ab9df2',
+  ai: '#ffd866',
+  input: '#78dce8',
+  core: '#c5c8ce',
+};
+
+const LEVEL_ICONS = {
+  info: faCircleInfo,
+  warn: faExclamationTriangle,
+  error: faTimesCircle,
+};
+
+export function ConsolePanel() {
+  const store = useEditorStore();
+  useSyncExternalStore(editorConsole.subscribe, editorConsole.getSnapshot);
+
+  const [filter, setFilter] = useState('');
+  const [showLevels, setShowLevels] = useState<Record<ConsoleLevel, boolean>>({
+    info: true,
+    warn: true,
+    error: true,
+  });
+  const listRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  const entries = editorConsole.getEntries();
+  const filtered = entries.filter((e) => {
+    if (!showLevels[e.level]) return false;
+    if (filter && !e.message.toLowerCase().includes(filter.toLowerCase())) return false;
+    return true;
+  });
+
+  // Auto-scroll to bottom when new entries arrive
+  useEffect(() => {
+    if (autoScroll && listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [entries.length, autoScroll]);
+
+  const handleScroll = () => {
+    if (!listRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = listRef.current;
+    // Pin auto-scroll if within 20px of bottom
+    setAutoScroll(scrollHeight - scrollTop - clientHeight < 20);
+  };
+
+  const toggleLevel = (level: ConsoleLevel) => {
+    setShowLevels((prev) => ({ ...prev, [level]: !prev[level] }));
+  };
+
+  const formatTime = (ts: number) => {
+    const d = new Date(ts);
+    return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}`;
+  };
+
+  const selectAndFocusEntity = (entityId: string) => {
+    getActiveAuthoring(store).selection?.set([entityId]);
+    store.focusOnEntity(entityId);
+  };
+
+  const counts = editorConsole.counts;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {/* Toolbar */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 4,
+          padding: '3px 8px',
+          borderBottom: '1px solid #333',
+          flexShrink: 0,
+        }}
+      >
+        {/* Clear button */}
+        <button
+          type="button"
+          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>
+
+        <div style={{ width: 1, height: 16, background: '#444', margin: '0 2px' }} />
+
+        {/* Level filter toggles */}
+        {(['info', 'warn', 'error'] as const).map((level) => (
+          <button
+            key={level}
+            type="button"
+            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 }} />
+            {counts[level]}
+          </button>
+        ))}
+
+        {/* Search filter */}
+        <input
+          type="text"
+          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',
+          }}
+        />
+      </div>
+
+      {/* 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>
+        )}
+        {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;
+
+          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',
+              }}
+            >
+              <span style={{ color: '#555', marginRight: 6, flexShrink: 0 }}>
+                {formatTime(entry.timestamp)}
+              </span>
+              <FontAwesomeIcon
+                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,
+                    padding: '0 4px',
+                    fontSize: 10,
+                    marginRight: 6,
+                    flexShrink: 0,
+                  }}
+                >
+                  {entry.subsystem}
+                </span>
+              )}
+              <span style={{ flex: 1, wordBreak: 'break-word' }}>
+                {entry.message}
+                {entityId && (
+                  <span
+                    onClick={() => selectAndFocusEntity(entityId)}
+                    style={{
+                      background: '#2a3a2a',
+                      color: '#a9dc76',
+                      borderRadius: 3,
+                      padding: '0 5px',
+                      fontSize: 10,
+                      marginLeft: 6,
+                      cursor: 'pointer',
+                      pointerEvents: 'auto',
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      gap: 3,
+                    }}
+                    title={`Select and focus "${entityName}"`}
+                  >
+                    <FontAwesomeIcon icon={faCube} style={{ fontSize: 8 }} />
+                    {entityName}
+                  </span>
+                )}
+                {entry.source && (
+                  <span style={{ color: '#666', 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>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}