@vgai/editor 0.2.0

package/src/components/AlignToolbar.tsx

@@ -0,0 +1,189 @@
+/**
+ * AlignToolbar — spec 27 §6 D4.b (docs/unified-world-editor/
+ * 27-visual-react-editing.md) multi-select align/distribute toolbar: shown
+ * when ≥2 world nodes are selected (align) / ≥3 (distribute), floating above
+ * the selection's union bounding box. `WorldSelectionOverlay.tsx` decides
+ * WHEN this renders (its own `computeMultiSelectionAlign` capability gate —
+ * every selected id must resolve both a rect AND an owning `boxEdit`); this
+ * component owns only the button UI + routing a click through the contract.
+ *
+ * Rule zero (spec §0): this file talks ONLY to the `AuthoringAdapter`
+ * contract, via the SAME owner-routing helper (`boxEditForId`) the B2/B3
+ * gesture code already uses — no `UIEditStore`/`SceneEntity`/`THREE.`/
+ * `elementFromPoint`. The align/distribute MATH itself is the pure,
+ * independently-tested `computeAlignTargets`/`computeDistributeTargets` in
+ * `world-overlay-gestures.ts` — this file only maps their output onto a
+ * `begin`/`apply`/`end` bracket per node (spec:301 "one undo step each").
+ */
+import type { AuthoringAdapter } from '@engine/adapter';
+import {
+  type AlignEntry,
+  type AlignOp,
+  type AlignTarget,
+  boxEditForId,
+  computeAlignTargets,
+  computeDistributeTargets,
+  type DistributeAxis,
+  type RectLike,
+  unionRect,
+} from './world-overlay-gestures';
+
+export interface AlignToolbarProps {
+  adapter: AuthoringAdapter;
+  /** The current selection's id+rect pairs — already capability-checked by
+   *  the caller (every id here has a resolvable owner `boxEdit`). */
+  entries: readonly AlignEntry[];
+}
+
+const TOOLBAR_BG = '#2c2c2c';
+const TOOLBAR_BORDER = '#444';
+const BTN_HOVER = '#3a3a3a';
+
+/** 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
+ *  has no `boxEdit` (shouldn't happen given the caller's capability gate,
+ *  but honest regardless — see `boxEditForId`'s own `null` contract) are
+ *  silently skipped rather than throwing. */
+function commitAlignTargets(adapter: AuthoringAdapter, targets: readonly AlignTarget[]): void {
+  for (const t of targets) {
+    const boxEdit = boxEditForId(adapter, t.id);
+    if (!boxEdit) continue;
+    const patch: Record<string, number> = {};
+    if (t.x !== undefined) patch['x'] = t.x;
+    if (t.y !== undefined) patch['y'] = t.y;
+    if (Object.keys(patch).length === 0) continue;
+    boxEdit.begin(t.id);
+    boxEdit.apply(t.id, patch);
+    boxEdit.end(t.id);
+  }
+}
+
+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: '⊥' },
+  ];
+
+const DISTRIBUTE_BUTTONS: ReadonlyArray<{
+  axis: DistributeAxis;
+  testId: string;
+  label: string;
+  glyph: string;
+}> = [
+  {
+    axis: 'horizontal',
+    testId: 'distribute-horizontal',
+    label: 'Distribute horizontally',
+    glyph: '⇔',
+  },
+  { axis: 'vertical', testId: 'distribute-vertical', label: 'Distribute vertically', glyph: '⇕' },
+];
+
+/** Where the toolbar floats: centered above `bbox`, clamped so it never
+ *  renders with a negative `top` (a selection near the host's own top edge
+ *  still gets a visible toolbar, pinned just under the selection instead of
+ *  off-screen above it). Pure; exported mainly for the e2e/visual read, not
+ *  itself independently unit-tested (position is presentation, not the
+ *  align/distribute MATH this task's acceptance criteria target). */
+function toolbarPosition(bbox: RectLike): { left: number; top: number } {
+  const height = 30;
+  const margin = 8;
+  const top = bbox.y - height - margin;
+  return { left: bbox.x, top: top < 0 ? bbox.y + bbox.height + margin : top };
+}
+
+export function AlignToolbar({ adapter, entries }: AlignToolbarProps): React.ReactNode {
+  if (entries.length < 2) return null;
+  const bbox = unionRect(entries.map((e) => e.rect));
+  if (!bbox) return null;
+  const { left, top } = toolbarPosition(bbox);
+  const canDistribute = entries.length >= 3;
+
+  return (
+    <div
+      data-testid="align-toolbar"
+      style={{
+        position: 'absolute',
+        left,
+        top,
+        zIndex: 70,
+        pointerEvents: 'auto',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2,
+        background: TOOLBAR_BG,
+        border: `1px solid ${TOOLBAR_BORDER}`,
+        borderRadius: 4,
+        padding: 3,
+        boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+      }}
+    >
+      {ALIGN_BUTTONS.map(({ op, testId, label, glyph }) => (
+        <button
+          key={op}
+          type="button"
+          data-testid={testId}
+          title={label}
+          style={toolbarButtonStyle()}
+          {...hoverHandlers()}
+          onClick={() => commitAlignTargets(adapter, computeAlignTargets(entries, op))}
+        >
+          {glyph}
+        </button>
+      ))}
+      {canDistribute && (
+        <>
+          <div style={{ width: 1, height: 16, background: TOOLBAR_BORDER, margin: '0 2px' }} />
+          {DISTRIBUTE_BUTTONS.map(({ axis, testId, label, glyph }) => (
+            <button
+              key={axis}
+              type="button"
+              data-testid={testId}
+              title={label}
+              style={toolbarButtonStyle()}
+              {...hoverHandlers()}
+              onClick={() => commitAlignTargets(adapter, computeDistributeTargets(entries, axis))}
+            >
+              {glyph}
+            </button>
+          ))}
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/AppRoot.tsx

@@ -0,0 +1,73 @@
+/**
+ * AppRoot — conditional render: ProjectScreen vs Editor.
+ *
+ * On first render, checks if a project is already specified (via URL param,
+ * Vite define, or server env). If yes, skips the project screen and goes
+ * straight to the editor. Otherwise, shows the project selection screen.
+ *
+ * Key principle: No Three.js, no EditorStore, no RAF loop until a project
+ * is selected. The project screen is pure React + fetch.
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import { EditorProvider } from '../EditorContext';
+import { type ActiveProject, detectProject } from '../project-manager';
+import { DefaultEditorLayout } from './DefaultEditorLayout';
+import { ProjectScreen } from './ProjectScreen';
+
+type State =
+  | { status: 'detecting' }
+  | { status: 'no-project' }
+  | { status: 'ready'; project: ActiveProject };
+
+export function AppRoot() {
+  const [state, setState] = useState<State>({ status: 'detecting' });
+
+  useEffect(() => {
+    detectProject().then((project) => {
+      if (project) {
+        setState({ status: 'ready', project });
+      } else {
+        setState({ status: 'no-project' });
+      }
+    });
+  }, []);
+
+  const handleReturnToProjectScreen = useCallback(() => {
+    setState({ status: 'no-project' });
+  }, []);
+
+  if (state.status === 'detecting') {
+    return (
+      <div
+        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,
+          pointerEvents: 'auto',
+        }}
+      >
+        Loading...
+      </div>
+    );
+  }
+
+  if (state.status === 'no-project') {
+    return <ProjectScreen onOpen={(project) => setState({ status: 'ready', project })} />;
+  }
+
+  return (
+    <EditorProvider>
+      <DefaultEditorLayout onReturnToProjectScreen={handleReturnToProjectScreen} />
+    </EditorProvider>
+  );
+}