@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/WorldSelectionOverlay.tsx

@@ -6,12 +6,11 @@
  * format-neutral authoring contract so it works over ANY DOM-capable world
  * (react `data-oid`, ingested `react-dom`), not just the scene-UI silo.
  *
- * MOUNT SITE / COORDINATES (critical — see this file's `ViewportPanel.tsx`
- * call site): this component is rendered as a CHILD of `ViewportPanel`'s own
- * `containerRef` div — the EXACT SAME DOM element `design-time-layers.ts`'s
- * `mountDesignTimeLayers(container, …)` appends each react/pixi world's own
- * `position:absolute; inset:0` layer div into (`createLayerElement`,
- * `container.appendChild(layer)`). This component's own outer wrapper is
+ * MOUNT SITE / COORDINATES (critical): DOM worlds render this component as a
+ * child of their world document's host — the EXACT SAME DOM element
+ * `design-time-layers.ts` appends that world's `position:absolute; inset:0`
+ * layer into. The native Three scene retains a separate instance in
+ * `ViewportPanel`. This component's own outer wrapper is
  * ALSO `position:absolute; inset:0` inside that SAME parent, so its
  * `getBoundingClientRect()` is IDENTICAL to every world layer's — a
  * HOST-RELATIVE rect from `RectProvider.rect(id)` (host = the owning
@@ -87,13 +86,14 @@ import {
   subscribeWorldPan,
 } from '../authoring/world-pan-state';
 import { isWorldHidden } from '../authoring/world-session-state';
+import { themeVars } from '../design-system';
 import { useEditorStore } from '../EditorContext';
 import { isIngestActive } from '../ingest-mode';
 import { isModuleModeActive } from '../module-mode';
 import { isPlayModeActive } from '../play-mode';
 import { effectiveColorFromChain } from '../ui-source/inspect';
+import { zIndex } from '../z-index';
 import { AlignToolbar } from './AlignToolbar';
-import { WorldContextMenu, type WorldContextMenuState } from './WorldContextMenu';
 import { WorldTextEditor } from './WorldTextEditor';
 import {
   type AlignEntry,
@@ -138,14 +138,19 @@ import {
 
 export { rectForId } from './world-overlay-gestures';
 
+// ACCENT ('#0d99ff') is a third independent "selection blue" alongside the
+// toolbar's themeVars.accent.default (`#579EFF`) and the marquee/drop-overlay's same themeVars.accent.default
+// (EDITOR-STYLE-AUDIT.md V-19) — flagged OUT-OF-SCOPE to change without a
+// mixed-world (React/Pixi) test project to verify against; left as-is.
 const ACCENT = '#0d99ff';
-/** Strictly below `PlayBar`'s z100 / `ToolStrip`+`ViewportOverlay`'s z1000 —
- *  mirrors `design-time-layers.ts`'s own `BASE_Z_INDEX` doc comment ("so
- *  gizmo/orbit-controls/marquee chrome is never occluded") — and strictly
+/** Strictly below `ToolStrip`+`ViewportOverlay`'s z1000 — mirrors
+ *  `design-time-layers.ts`'s own `BASE_Z_INDEX` doc comment ("so canvas-local
+ *  editing chrome is never occluded") — and strictly
  *  above the design-time layers themselves (`BASE_Z_INDEX + i`, small N),
  *  so this overlay's boxes/marquee always paint over the world content they
- *  describe. */
-const Z_INDEX = 50;
+ *  describe. V-12 — pure rename onto the canonical z-index scale
+ *  (`zIndex.overlayLow`), same numeric value (50), no behavior change. */
+const Z_INDEX = zIndex.overlayLow;
 const DRAG_THRESHOLD_PX = 5;
 
 interface Rect {
@@ -184,7 +189,7 @@ export function hasRectCapableChild(adapter: AuthoringAdapter): boolean {
  * for a composite, from each VISIBLE child's own `rects` provider — the
  * marquee's candidate pool. Walks each CHILD's OWN hierarchy
  * (`collectAllNodeIds`), never the composite's synthetic `world:<id>`
- * wrapper, so a group/game-root id is never a candidate. A session-hidden
+ * wrapper, so a group/organization id is never a candidate. A session-hidden
  * world (`world-session-state.ts`'s eye toggle, B1) contributes no
  * candidates — consistent with it being invisible/unpickable.
  *
@@ -314,7 +319,7 @@ function labelStyle(r: DOMRectLike): React.CSSProperties {
 
 const HANDLE_SIZE = 10;
 
-/** One of the 8 B2 resize handles — a small white/accent square centered on
+/** One of the 8 B2 resize handles — a small white/themeVars.accent.default square centered on
  *  its position on the selection rect (spec:317/§5 :465). */
 function handleStyle(center: { x: number; y: number }, cursor: string): React.CSSProperties {
   return {
@@ -371,6 +376,12 @@ function dimensionLabelStyle(rect: DOMRectLike): React.CSSProperties {
   };
 }
 
+// Deliberate literals (U6 census): the padding/margin band pair, their label
+// inks, the measurement pinks (`#ff2d92`/`#ff5fa2`) and the snap-guide red
+// (`#f24822`) below are the industry-convention CANVAS-GUIDE language (green
+// padding / orange margin / pink measure / red snap — Figma & devtools
+// grammar), each deliberately distinct from the chrome tokens AND from the
+// #0d99ff canvas-selection pair so guides never read as selection or chrome.
 const PADDING_BAND_COLOR = 'rgba(46, 204, 113, 0.25)';
 const MARGIN_BAND_COLOR = 'rgba(230, 126, 34, 0.25)';
 
@@ -905,8 +916,6 @@ export function WorldSelectionOverlay(): React.ReactNode {
     [],
   );
 
-  // D3.a — the open canvas right-click context menu, or `null`.
-  const [contextMenu, setContextMenu] = useState<WorldContextMenuState | null>(null);
   // D3.b — the currently-open inline text editor (double-clicked node), or
   // `null`. `textEditRef` mirrors the state for synchronous reads from
   // callbacks (same "ref mirrors state" convention `marqueeRef`/`setMarquee`
@@ -936,7 +945,7 @@ export function WorldSelectionOverlay(): React.ReactNode {
   // commit, so whether it landed or was refused can only be learned from a
   // LATER re-render. Stash the committed id+rect here the instant `commitTextEdit`
   // fires; the effect below consumes it on the next store notify (`editText`
-  // calls `store.notifyIngestEdit()` unconditionally on both the success and the
+  // calls `store.notifyIngestEdit()` unconditionally on both the themeVars.semantic.success and the
   // refusal path) and checks `text.get` — which reports `null` for a refused id
   // (via the adapter's own `dynamicPaths` mark) — to decide whether to surface
   // the refused indicator instead of letting the edit silently vanish.
@@ -1010,10 +1019,16 @@ export function WorldSelectionOverlay(): React.ReactNode {
     setMarqueeState(r);
   }, []);
 
-  const toHostLocal = useCallback((clientX: number, clientY: number): { x: number; y: number } => {
-    const host = interactionRef.current?.getBoundingClientRect();
-    return { x: clientX - (host?.left ?? 0), y: clientY - (host?.top ?? 0) };
-  }, []);
+  const toHostLocal = useCallback(
+    (clientX: number, clientY: number): { x: number; y: number } => {
+      const host = interactionRef.current?.getBoundingClientRect();
+      return {
+        x: (clientX - (host?.left ?? 0)) / pan.zoom,
+        y: (clientY - (host?.top ?? 0)) / pan.zoom,
+      };
+    },
+    [pan.zoom],
+  );
 
   const bumpGesture = useCallback(() => setGestureTick((t) => t + 1), []);
 
@@ -1205,7 +1220,7 @@ export function WorldSelectionOverlay(): React.ReactNode {
   // literal key-HOLD state in this codebase). Matches `hotkeys.ts`'s own
   // not-typing guard exactly (input/textarea/select/contentEditable) so Space
   // still types a literal space character in any of those, never arming pan.
-  // A focused `<button>` is ALSO excluded so Space keeps its native
+  // A focused `<Button>` is ALSO excluded so Space keeps its native
   // accessible "activate the focused control" behavior instead of arming pan
   // out from under it. `e.repeat` is ignored so an OS key-repeat storm is a
   // single no-op transition, not thousands of redundant `preventDefault`s.
@@ -1249,6 +1264,12 @@ export function WorldSelectionOverlay(): React.ReactNode {
   const onPointerDown = useCallback(
     (e: ReactPointerEvent<HTMLDivElement>) => {
       if (e.button !== 0) return;
+      // Camera navigation is bound to the viewport container so right/middle
+      // drags can pass through this DOM overlay. Keep left-button authoring
+      // gestures owned here: OrbitControls captures every pointer it sees,
+      // including left clicks, which would otherwise retarget pointerup to
+      // the container before this overlay can finish selection/marquee/edit.
+      e.stopPropagation();
       // D4 (spec27 §8 "space-pan" row) — a press while Space is held ARMS a
       // pan-drag instead of the ordinary pick/select/marquee/eyedropper flow
       // below, which it skips entirely (never fights another gesture for the
@@ -1489,23 +1510,6 @@ export function WorldSelectionOverlay(): React.ReactNode {
     setHoverId(null);
   }, []);
 
-  // D3.a — right-click picks the node (rule zero: through `pickTopmost`, the
-  // SAME primitive A3's click-select uses — never `elementFromPoint`) and
-  // opens the canvas context menu at the click point. A miss (empty space)
-  // opens nothing.
-  const onContextMenu = useCallback(
-    (e: ReactMouseEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      const hitId = pickTopmost(store, e.clientX, e.clientY);
-      if (!hitId) {
-        setContextMenu(null);
-        return;
-      }
-      setContextMenu({ x: e.clientX, y: e.clientY, nodeId: hitId });
-    },
-    [store],
-  );
-
   // D3.b — double-click picks the node and opens the inline text editor
   // through `adapter.text` (owner-routed — `textForId`), rule zero: no DOM
   // read of the node's own text happens here, only the contract's own
@@ -1619,7 +1623,7 @@ export function WorldSelectionOverlay(): React.ReactNode {
   const alignEntries = computeMultiSelectionAlign(adapter, selectedIds);
 
   // D3.c — every currently-empty container hint reachable from the active
-  // adapter (owner-routed per child, session-hidden worlds excluded — see
+  // adapter (owner-routed per child, session-hidden roots excluded — see
   // `emptyContainerHintsFor`'s doc comment). Cached (see `emptyHintsCacheRef`
   // above) so a hover-only re-render reuses the last computed hints instead
   // of re-walking + re-measuring the whole tree.
@@ -1651,6 +1655,7 @@ export function WorldSelectionOverlay(): React.ReactNode {
         // unit with the world content it describes — `undefined` at rest
         // (pan=0,0) keeps this byte-identical to pre-pan markup.
         transform: panTransformValue(pan),
+        transformOrigin: '0 0',
       }}
     >
       <div
@@ -1662,12 +1667,11 @@ export function WorldSelectionOverlay(): React.ReactNode {
           pointerEvents: 'auto',
           cursor: interactionCursor(isPanning, spaceHeld, eyedropperActive, !!marquee),
         }}
-        onPointerDown={onPointerDown}
+        onPointerDownCapture={onPointerDown}
         onPointerMove={onPointerMove}
         onPointerUp={onPointerUp}
         onPointerCancel={onPointerCancel}
         onPointerLeave={onPointerLeave}
-        onContextMenu={onContextMenu}
         onDoubleClick={onDoubleClick}
       />
       {/* D3.c — dashed empty-container placeholders, visual hints only. */}
@@ -1683,6 +1687,7 @@ export function WorldSelectionOverlay(): React.ReactNode {
             top: hint.rect.y,
             width: hint.rect.width,
             height: hint.rect.height,
+            // text-2 at 0.7 alpha — a quiet non-interactive hint outline.
             border: '1px dashed rgba(154, 160, 166, 0.7)',
             boxSizing: 'border-box',
             pointerEvents: 'none',
@@ -1783,9 +1788,6 @@ export function WorldSelectionOverlay(): React.ReactNode {
         </>
       )}
       <D3Affordances
-        adapter={adapter}
-        contextMenu={contextMenu}
-        onCloseContextMenu={() => setContextMenu(null)}
         textEdit={textEdit}
         onCommitTextEdit={commitTextEdit}
         onCancelTextEdit={cancelTextEdit}
@@ -1898,17 +1900,14 @@ function D2Affordances(props: {
 }
 
 /**
- * D3Affordances — the D3.a/b/d overlay bits (context menu, inline text
- * editor + its refusal indicator, eyedropper swatch), factored into its OWN
+ * D3Affordances — the D3.b/d overlay bits (inline text editor + its refusal
+ * indicator, eyedropper swatch), factored into its OWN
  * component purely to keep `WorldSelectionOverlay`'s own cognitive
  * complexity down (each is an independent, mutually-exclusive-in-practice
  * conditional render — bundling them here costs the PARENT nothing beyond
  * one element reference). No behavior change from having them inline.
  */
 function D3Affordances(props: {
-  adapter: AuthoringAdapter;
-  contextMenu: WorldContextMenuState | null;
-  onCloseContextMenu: () => void;
   textEdit: { id: string; rect: DOMRectLike; initialText: string } | null;
   onCommitTextEdit: (text: string) => void;
   onCancelTextEdit: () => void;
@@ -1917,9 +1916,6 @@ function D3Affordances(props: {
   eyedropperPreview: { x: number; y: number; color: string | null } | null;
 }): React.ReactNode {
   const {
-    adapter,
-    contextMenu,
-    onCloseContextMenu,
     textEdit,
     onCommitTextEdit,
     onCancelTextEdit,
@@ -1929,14 +1925,6 @@ function D3Affordances(props: {
   } = props;
   return (
     <>
-      {/* D3.a — canvas right-click context menu. `WorldContextMenu` portals
-          itself to `document.body` (pan-seam fix — see its own doc comment),
-          so unlike the other D3 affordances below it needs no
-          `pointerEvents: 'auto'` wrapper here: it never actually mounts as a
-          DOM descendant of this (`pointerEvents: 'none'`) overlay tree. */}
-      {contextMenu && (
-        <WorldContextMenu adapter={adapter} state={contextMenu} onClose={onCloseContextMenu} />
-      )}
       {/* D3.b — the inline text editor (double-click), or the loud "not
           editable" refusal indicator for a dynamic/child-bearing body. */}
       {textEdit && (
@@ -1959,9 +1947,9 @@ function D3Affordances(props: {
             top: textEditRefused.rect.y,
             width: Math.max(textEditRefused.rect.width, 40),
             height: Math.max(textEditRefused.rect.height, 20),
-            border: '2px dashed #ff6b6b',
+            border: `2px dashed ${themeVars.semantic.danger}`,
             boxSizing: 'border-box',
-            background: 'rgba(255, 107, 107, 0.12)',
+            background: themeVars.semantic.dangerMuted,
             pointerEvents: 'none',
           }}
         />

package/src/components/WorldTextEditor.tsx

@@ -9,6 +9,8 @@
  * reach of its own.
  */
 import { useEffect, useRef, useState } from 'react';
+import { themeVars } from '../design-system';
+import { zIndex } from '../z-index';
 
 export interface WorldTextEditorProps {
   rect: { x: number; y: number; width: number; height: number };
@@ -69,17 +71,19 @@ export function WorldTextEditor({
         width: Math.max(rect.width, 40),
         height: Math.max(rect.height, 20),
         boxSizing: 'border-box',
-        zIndex: 60,
+        zIndex: zIndex.overlayLow,
         pointerEvents: 'auto',
         resize: 'none',
         font: 'inherit',
-        fontSize: 13,
+        fontSize: 'var(--vgai-font-lg)',
         lineHeight: 1.3,
         padding: 2,
-        border: '2px solid #0d99ff',
+        // D-8: dark input convention (was a bright white light-mode box over
+        // the all-dark app) + D-4: the canonical themeVars.accent.default, not one-off #0d99ff.
+        border: `2px solid ${themeVars.accent.default}`,
         outline: 'none',
-        background: '#fff',
-        color: '#111',
+        background: themeVars.surface.inset,
+        color: themeVars.content.primary,
       }}
     />
   );