@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/AlignToolbar.tsx

@@ -16,6 +16,15 @@
  * `begin`/`apply`/`end` bracket per node (spec:301 "one undo step each").
  */
 import type { AuthoringAdapter } from '@engine/adapter';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {
+  faAlignCenter,
+  faAlignLeft,
+  faAlignRight,
+  faGripLines,
+  faGripLinesVertical,
+} from '@fortawesome/free-solid-svg-icons';
+import { EditorIcon, IconButton, themeVars, zIndex } from '../design-system';
 import {
   type AlignEntry,
   type AlignOp,
@@ -35,10 +44,8 @@ export interface AlignToolbarProps {
   entries: readonly AlignEntry[];
 }
 
-const TOOLBAR_BG = '#2c2c2c';
-const TOOLBAR_BORDER = '#444';
-const BTN_HOVER = '#3a3a3a';
-
+const TOOLBAR_BG = themeVars.surface.chrome;
+const TOOLBAR_BORDER = themeVars.boundary.strong;
 /** Route every {@link AlignTarget} through its owning `boxEdit`
  *  (begin/apply/end — one undo step per node, per B1/D-1) — the ONE place
  *  align/distribute clicks touch the adapter contract. Targets whose owner
@@ -59,59 +66,59 @@ function commitAlignTargets(adapter: AuthoringAdapter, targets: readonly AlignTa
   }
 }
 
-function toolbarButtonStyle(): React.CSSProperties {
-  return {
-    width: 26,
-    height: 22,
-    border: 'none',
-    background: 'transparent',
-    color: '#c5c8ce',
-    cursor: 'pointer',
-    fontSize: 12,
-    borderRadius: 3,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  };
-}
-
-function hoverHandlers(): {
-  onMouseEnter: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  onMouseLeave: (e: React.MouseEvent<HTMLButtonElement>) => void;
-} {
-  return {
-    onMouseEnter: (e) => {
-      (e.currentTarget as HTMLButtonElement).style.background = BTN_HOVER;
-    },
-    onMouseLeave: (e) => {
-      (e.currentTarget as HTMLButtonElement).style.background = 'transparent';
-    },
-  };
-}
-
-const ALIGN_BUTTONS: ReadonlyArray<{ op: AlignOp; testId: string; label: string; glyph: string }> =
-  [
-    { op: 'left', testId: 'align-left', label: 'Align left', glyph: '⊢' },
-    { op: 'hcenter', testId: 'align-hcenter', label: 'Align horizontal center', glyph: '⊣⊢' },
-    { op: 'right', testId: 'align-right', label: 'Align right', glyph: '⊣' },
-    { op: 'top', testId: 'align-top', label: 'Align top', glyph: '⊤' },
-    { op: 'vcenter', testId: 'align-vcenter', label: 'Align vertical center', glyph: '⊥⊤' },
-    { op: 'bottom', testId: 'align-bottom', label: 'Align bottom', glyph: '⊥' },
-  ];
+/**
+ * L-7 — every other icon in this rail is a FontAwesome glyph; this toolbar
+ * was the one holdout still rendering raw Unicode math symbols (`⊢`, `⊣⊢`,
+ * `⊤`, `⇔`, …), which clash in weight/centering with the FA icon language
+ * used everywhere else. FontAwesome Free's solid set has no dedicated
+ * object-bbox align/distribute icons (only the 4 paragraph-align glyphs;
+ * verified — no `faDistribute*`/`faAlignTop`/etc. exist in
+ * `@fortawesome/free-solid-svg-icons`), so the vertical variants reuse the
+ * horizontal align glyphs rotated 90° (`rotate` below) — the same technique
+ * several icon sets use to derive a vertical-align glyph from a horizontal
+ * one — and distribute reuses the evenly-spaced-bars grip glyphs. Still a
+ * strict style-only swap: same meaning, same button size, one consistent
+ * icon family instead of a second, unrelated glyph language.
+ */
+const ALIGN_BUTTONS: ReadonlyArray<{
+  op: AlignOp;
+  testId: string;
+  label: string;
+  icon: IconDefinition;
+  rotate?: boolean;
+}> = [
+  { op: 'left', testId: 'align-left', label: 'Align left', icon: faAlignLeft },
+  { op: 'hcenter', testId: 'align-hcenter', label: 'Align horizontal center', icon: faAlignCenter },
+  { op: 'right', testId: 'align-right', label: 'Align right', icon: faAlignRight },
+  { op: 'top', testId: 'align-top', label: 'Align top', icon: faAlignLeft, rotate: true },
+  {
+    op: 'vcenter',
+    testId: 'align-vcenter',
+    label: 'Align vertical center',
+    icon: faAlignCenter,
+    rotate: true,
+  },
+  { op: 'bottom', testId: 'align-bottom', label: 'Align bottom', icon: faAlignRight, rotate: true },
+];
 
 const DISTRIBUTE_BUTTONS: ReadonlyArray<{
   axis: DistributeAxis;
   testId: string;
   label: string;
-  glyph: string;
+  icon: IconDefinition;
 }> = [
   {
     axis: 'horizontal',
     testId: 'distribute-horizontal',
     label: 'Distribute horizontally',
-    glyph: '⇔',
+    icon: faGripLinesVertical,
+  },
+  {
+    axis: 'vertical',
+    testId: 'distribute-vertical',
+    label: 'Distribute vertically',
+    icon: faGripLines,
   },
-  { axis: 'vertical', testId: 'distribute-vertical', label: 'Distribute vertically', glyph: '⇕' },
 ];
 
 /** Where the toolbar floats: centered above `bbox`, clamped so it never
@@ -141,46 +148,50 @@ export function AlignToolbar({ adapter, entries }: AlignToolbarProps): React.Rea
         position: 'absolute',
         left,
         top,
-        zIndex: 70,
+        zIndex: zIndex.overlayLow,
         pointerEvents: 'auto',
         display: 'flex',
         alignItems: 'center',
         gap: 2,
         background: TOOLBAR_BG,
         border: `1px solid ${TOOLBAR_BORDER}`,
-        borderRadius: 4,
+        borderRadius: themeVars.shape.medium,
         padding: 3,
-        boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+        boxShadow: themeVars.elevation.medium,
       }}
     >
-      {ALIGN_BUTTONS.map(({ op, testId, label, glyph }) => (
-        <button
+      {ALIGN_BUTTONS.map(({ op, testId, label, icon, rotate }) => (
+        <IconButton
           key={op}
-          type="button"
           data-testid={testId}
           title={label}
-          style={toolbarButtonStyle()}
-          {...hoverHandlers()}
+          aria-label={label}
+          variant="ghost"
+          size="compact"
           onClick={() => commitAlignTargets(adapter, computeAlignTargets(entries, op))}
         >
-          {glyph}
-        </button>
+          <EditorIcon
+            icon={icon}
+            aria-hidden="true"
+            style={rotate ? { transform: 'rotate(90deg)' } : undefined}
+          />
+        </IconButton>
       ))}
       {canDistribute && (
         <>
           <div style={{ width: 1, height: 16, background: TOOLBAR_BORDER, margin: '0 2px' }} />
-          {DISTRIBUTE_BUTTONS.map(({ axis, testId, label, glyph }) => (
-            <button
+          {DISTRIBUTE_BUTTONS.map(({ axis, testId, label, icon }) => (
+            <IconButton
               key={axis}
-              type="button"
               data-testid={testId}
               title={label}
-              style={toolbarButtonStyle()}
-              {...hoverHandlers()}
+              aria-label={label}
+              variant="ghost"
+              size="compact"
               onClick={() => commitAlignTargets(adapter, computeDistributeTargets(entries, axis))}
             >
-              {glyph}
-            </button>
+              <EditorIcon icon={icon} aria-hidden="true" />
+            </IconButton>
           ))}
         </>
       )}

package/src/components/AppRoot.tsx

@@ -1,3 +1,4 @@
+import { Button, themeVars } from '../design-system';
 /**
  * AppRoot — conditional render: ProjectScreen vs Editor.
  *
@@ -11,60 +12,226 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import { EditorProvider } from '../EditorContext';
+import { ProjectCompatibilityError, type StartupRecovery } from '../editor-compatibility';
 import { type ActiveProject, detectProject } from '../project-manager';
 import { DefaultEditorLayout } from './DefaultEditorLayout';
 import { ProjectScreen } from './ProjectScreen';
+import { StartupLoadingScreen } from './StartupLoadingScreen';
 
 type State =
   | { status: 'detecting' }
   | { status: 'no-project' }
+  | { status: 'error'; message: string; recovery?: StartupRecovery }
   | { status: 'ready'; project: ActiveProject };
 
+function startupFailure(error: unknown): Extract<State, { status: 'error' }> {
+  const message = error instanceof Error ? error.message : String(error);
+  return error instanceof ProjectCompatibilityError
+    ? { status: 'error', message, recovery: error.recovery }
+    : { status: 'error', message };
+}
+
+/** Project detection is normally a pair of local fetches and should finish
+ * almost immediately. Never leave the entire editor on an eternal
+ * "Loading..." screen when a dev-server restart or a broken storage backend
+ * leaves one of those requests pending. */
+export const PROJECT_DETECTION_TIMEOUT_MS = 8_000;
+
+export function detectProjectWithTimeout(
+  detect: () => Promise<ActiveProject | null> = detectProject,
+  timeoutMs = PROJECT_DETECTION_TIMEOUT_MS,
+): Promise<ActiveProject | null> {
+  return new Promise((resolve, reject) => {
+    const timeout = window.setTimeout(() => {
+      reject(new Error('Project detection timed out. The editor server may still be starting.'));
+    }, timeoutMs);
+    detect().then(
+      (project) => {
+        window.clearTimeout(timeout);
+        resolve(project);
+      },
+      (error: unknown) => {
+        window.clearTimeout(timeout);
+        reject(error);
+      },
+    );
+  });
+}
+
 export function AppRoot() {
   const [state, setState] = useState<State>({ status: 'detecting' });
+  const [detectionAttempt, setDetectionAttempt] = useState(0);
 
   useEffect(() => {
-    detectProject().then((project) => {
-      if (project) {
-        setState({ status: 'ready', project });
-      } else {
-        setState({ status: 'no-project' });
-      }
-    });
-  }, []);
+    let cancelled = false;
+    setState({ status: 'detecting' });
+    detectProjectWithTimeout().then(
+      (project) => {
+        if (cancelled) return;
+        if (project) {
+          setState({ status: 'ready', project });
+        } else {
+          setState({ status: 'no-project' });
+        }
+      },
+      (error: unknown) => {
+        if (cancelled) return;
+        setState(startupFailure(error));
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [detectionAttempt]);
 
   const handleReturnToProjectScreen = useCallback(() => {
     setState({ status: 'no-project' });
   }, []);
 
   if (state.status === 'detecting') {
+    return <StartupLoadingScreen />;
+  }
+
+  if (state.status === 'no-project') {
+    return <ProjectScreen onOpen={(project) => setState({ status: 'ready', project })} />;
+  }
+
+  if (state.status === 'error') {
+    const recoveryCommand =
+      state.recovery && 'command' in state.recovery ? state.recovery.command : null;
     return (
-      <div
+      <main
+        data-testid="project-detection-error"
+        role="alert"
+        aria-labelledby="project-startup-error-title"
         style={{
           position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          background: '#1a1a1a',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: '#666',
-          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          fontSize: 14,
+          inset: 0,
+          display: 'grid',
+          placeItems: 'center',
+          padding: 24,
+          background: themeVars.surface.shell,
+          color: themeVars.content.primary,
+          fontFamily: themeVars.typography.sans,
           pointerEvents: 'auto',
         }}
       >
-        Loading...
-      </div>
+        <section
+          style={{
+            width: 'min(680px, 100%)',
+            padding: 20,
+            background: themeVars.surface.panel,
+            border: `1px solid ${themeVars.boundary.default}`,
+            borderTop: `2px solid ${themeVars.semantic.danger}`,
+            borderRadius: themeVars.shape.large,
+          }}
+        >
+          <h1
+            id="project-startup-error-title"
+            style={{ margin: 0, color: themeVars.content.primary, fontSize: 18, fontWeight: 600 }}
+          >
+            {state.recovery?.title ?? 'Couldn’t open this project'}
+          </h1>
+          <p
+            style={{
+              margin: '8px 0 12px',
+              color: themeVars.content.muted,
+              fontSize: 12,
+              lineHeight: 1.5,
+            }}
+          >
+            {state.recovery?.guidance ??
+              'The editor stopped during project validation. Fix the project file and retry, or choose another project.'}
+          </p>
+          <pre
+            data-testid="project-startup-error-details"
+            style={{
+              maxHeight: 'min(42vh, 360px)',
+              margin: 0,
+              padding: 12,
+              overflow: 'auto',
+              whiteSpace: 'pre-wrap',
+              overflowWrap: 'anywhere',
+              background: themeVars.surface.inset,
+              border: `1px solid ${themeVars.boundary.default}`,
+              borderRadius: themeVars.shape.medium,
+              color: themeVars.semantic.danger,
+              fontFamily: themeVars.typography.mono,
+              fontSize: 11,
+              lineHeight: 1.5,
+            }}
+          >
+            {state.message}
+          </pre>
+          {recoveryCommand && (
+            <div style={{ marginTop: 12 }}>
+              <div
+                style={{
+                  marginBottom: 5,
+                  color: themeVars.content.dim,
+                  fontSize: 10,
+                  fontWeight: 600,
+                }}
+              >
+                RUN FROM THE PROJECT FOLDER
+              </div>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8,
+                  padding: '8px 10px',
+                  background: themeVars.surface.inset,
+                  border: `1px solid ${themeVars.boundary.default}`,
+                  borderRadius: themeVars.shape.medium,
+                }}
+              >
+                <code
+                  data-testid="project-startup-recovery-command"
+                  style={{
+                    flex: 1,
+                    color: themeVars.content.primary,
+                    fontFamily: themeVars.typography.mono,
+                    fontSize: 11,
+                  }}
+                >
+                  {recoveryCommand}
+                </code>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="compact"
+                  onClick={() => void navigator.clipboard?.writeText(recoveryCommand)}
+                >
+                  Copy command
+                </Button>
+              </div>
+            </div>
+          )}
+          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
+            <Button
+              type="button"
+              variant="primary"
+              size="comfortable"
+              data-testid="retry-project-detection"
+              onClick={() => setDetectionAttempt((attempt) => attempt + 1)}
+            >
+              Retry
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              size="comfortable"
+              onClick={() => setState({ status: 'no-project' })}
+            >
+              Choose another project
+            </Button>
+          </div>
+        </section>
+      </main>
     );
   }
 
-  if (state.status === 'no-project') {
-    return <ProjectScreen onOpen={(project) => setState({ status: 'ready', project })} />;
-  }
-
   return (
     <EditorProvider>
       <DefaultEditorLayout onReturnToProjectScreen={handleReturnToProjectScreen} />