@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/RightPanel.tsx

@@ -1,166 +0,0 @@
-import { faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useEditorStore } from '../EditorContext';
-import type { AssetTab } from '../editor-store';
-import { AssetViewer } from './asset-viewers/AssetViewer';
-import { Inspector } from './Inspector';
-
-export function RightPanel() {
-  const store = useEditorStore();
-  const activeKey = store.activeTabKey;
-  const tabs = store.assetTabs;
-
-  return (
-    <div
-      style={{
-        width: 280,
-        borderLeft: '1px solid #333',
-        display: 'flex',
-        flexDirection: 'column',
-        background: '#242424',
-        pointerEvents: 'auto',
-      }}
-    >
-      {/* Only show tab bar when asset tabs are open */}
-      {tabs.length > 0 && (
-        <TabBar
-          activeKey={activeKey}
-          assetTabs={tabs}
-          onSelectTab={(key) => store.setActiveTab(key)}
-          onCloseTab={(key) => store.closeAssetTab(key)}
-        />
-      )}
-      <div style={{ flex: 1, overflowY: 'auto', scrollbarWidth: 'none', minHeight: 0 }}>
-        {activeKey === '__inspector__' ? (
-          // C2 — the ONE inspector shell: `Inspector` itself resolves matched
-          // registered sections per selected node (see
-          // `inspector-section-registry.ts`); this shell no longer branches
-          // between two panels (the A3 dispatch seam is deleted).
-          <Inspector />
-        ) : (
-          (() => {
-            const tab = tabs.find((t) => t.key === activeKey);
-            return tab ? <AssetViewer tab={tab} /> : null;
-          })()
-        )}
-      </div>
-    </div>
-  );
-}
-
-function TabBar({
-  activeKey,
-  assetTabs,
-  onSelectTab,
-  onCloseTab,
-}: {
-  activeKey: string;
-  assetTabs: readonly AssetTab[];
-  onSelectTab: (key: string) => void;
-  onCloseTab: (key: string) => void;
-}) {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        borderBottom: '1px solid #333',
-        background: '#2c2c2c',
-        overflowX: 'auto',
-        scrollbarWidth: 'none',
-        flexShrink: 0,
-      }}
-    >
-      <TabButton
-        label="Inspector"
-        active={activeKey === '__inspector__'}
-        closeable={false}
-        onClick={() => onSelectTab('__inspector__')}
-      />
-      {assetTabs.map((tab) => (
-        <TabButton
-          key={tab.key}
-          label={tab.label}
-          active={activeKey === tab.key}
-          closeable
-          onClick={() => onSelectTab(tab.key)}
-          onClose={() => onCloseTab(tab.key)}
-        />
-      ))}
-    </div>
-  );
-}
-
-function TabButton({
-  label,
-  active,
-  closeable,
-  onClick,
-  onClose,
-}: {
-  label: string;
-  active: boolean;
-  closeable: boolean;
-  onClick: () => void;
-  onClose?: () => void;
-}) {
-  return (
-    <div
-      role="button"
-      tabIndex={0}
-      onClick={onClick}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter') onClick();
-      }}
-      onMouseDown={(e) => {
-        // Middle-click to close
-        if (e.button === 1 && closeable) {
-          e.preventDefault();
-          onClose?.();
-        }
-      }}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 4,
-        padding: '4px 8px',
-        fontSize: 11,
-        color: active ? '#c5c8ce' : '#8c8c8c',
-        background: active ? '#242424' : 'transparent',
-        borderBottom: active ? '2px solid #579EFF' : '2px solid transparent',
-        cursor: 'pointer',
-        userSelect: 'none',
-        whiteSpace: 'nowrap',
-        maxWidth: 120,
-        flexShrink: 0,
-      }}
-    >
-      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }} title={label}>
-        {label}
-      </span>
-      {closeable && (
-        <span
-          role="button"
-          tabIndex={0}
-          onClick={(e) => {
-            e.stopPropagation();
-            onClose?.();
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.stopPropagation();
-              onClose?.();
-            }
-          }}
-          style={{
-            fontSize: 9,
-            opacity: 0.6,
-            cursor: 'pointer',
-            padding: '0 2px',
-          }}
-        >
-          <FontAwesomeIcon icon={faXmark} />
-        </span>
-      )}
-    </div>
-  );
-}

package/src/components/WorldContextMenu.tsx

@@ -1,257 +0,0 @@
-/**
- * WorldContextMenu — spec 27 §6 D3.a (docs/unified-world-editor/
- * 27-visual-react-editing.md) right-click canvas context menu: Duplicate /
- * Wrap / Unwrap / Delete / Select-Parent, plus an Insert-child ▸ submenu
- * (D3.e) when the owning adapter reports `structure.creatableKinds`. Styled
- * after (but a SEPARATE component from) `GameHierarchy.tsx`'s hierarchy-row
- * `ContextMenu` — that one opens from a right-click on a HIERARCHY ROW; this
- * one opens from a right-click on the CANVAS overlay, resolving its target
- * node via `adapter.pickable` (see `WorldSelectionOverlay`'s `onContextMenu`
- * handler) rather than a row's own known id. Both ultimately drive the SAME
- * `AuthoringAdapter.structure` contract, so the two menus intentionally look
- * alike.
- *
- * Rule zero: this file talks ONLY to the `AuthoringAdapter` contract (via the
- * owner-routing helpers in `world-overlay-gestures.ts` — `structureForId`,
- * not a concrete adapter cast) + `hierarchy`/`selection`, which ARE
- * merged/forwarded on `CompositeAuthoringAdapter` (unlike `rects`/`boxEdit`/
- * `text`/`structure`'s OWNER-specific reads here). No `UIEditStore`/
- * `SceneEntity`/`THREE.`/`elementFromPoint`.
- */
-import type { AuthoringAdapter } from '@engine/adapter';
-import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { structureForId } from './world-overlay-gestures';
-
-export interface WorldContextMenuState {
-  x: number;
-  y: number;
-  nodeId: string;
-}
-
-export interface WorldContextMenuProps {
-  adapter: AuthoringAdapter;
-  state: WorldContextMenuState;
-  onClose: () => void;
-}
-
-const MENU_BG = '#2c2c2c';
-const MENU_BORDER = '#444';
-const ITEM_HOVER = '#3a3a3a';
-
-function menuItemStyle(color?: string): React.CSSProperties {
-  return { padding: '5px 12px', cursor: 'pointer', color: color ?? '#c5c8ce' };
-}
-
-function hoverHandlers(): {
-  onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => void;
-  onMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => void;
-} {
-  return {
-    onMouseEnter: (e) => {
-      (e.currentTarget as HTMLDivElement).style.background = ITEM_HOVER;
-    },
-    onMouseLeave: (e) => {
-      (e.currentTarget as HTMLDivElement).style.background = 'transparent';
-    },
-  };
-}
-
-/** The canvas right-click menu (D3.a) — a pickable node's Duplicate/Wrap/
- *  Unwrap/Delete/Select-Parent, capability-gated on the owning adapter's
- *  `structure` provider (absent for an ingested `react-dom` world — no
- *  structural items render at all, only Select-Parent, which needs only
- *  `hierarchy`/`selection`). */
-export function WorldContextMenu({
-  adapter,
-  state,
-  onClose,
-}: WorldContextMenuProps): React.ReactNode {
-  const menuRef = useRef<HTMLDivElement>(null);
-  const [insertOpen, setInsertOpen] = useState(false);
-
-  useEffect(() => {
-    const handler = (e: MouseEvent): void => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) onClose();
-    };
-    const keyHandler = (e: KeyboardEvent): void => {
-      if (e.key === 'Escape') onClose();
-    };
-    document.addEventListener('mousedown', handler);
-    document.addEventListener('keydown', keyHandler);
-    return () => {
-      document.removeEventListener('mousedown', handler);
-      document.removeEventListener('keydown', keyHandler);
-    };
-  }, [onClose]);
-
-  const { nodeId } = state;
-  const node = adapter.hierarchy.node(nodeId);
-  if (!node) return null;
-
-  const structure = structureForId(adapter, nodeId);
-  const creatableKinds = structure?.creatableKinds?.(nodeId) ?? [];
-  const parentId = node.parentId;
-
-  const items: { testId: string; label: string; action: () => void; color?: string }[] = [];
-  if (parentId !== null) {
-    items.push({
-      testId: 'world-context-menu-select-parent',
-      label: 'Select Parent',
-      action: () => {
-        adapter.selection?.set([parentId]);
-        onClose();
-      },
-    });
-  }
-  if (structure) {
-    items.push({
-      testId: 'world-context-menu-duplicate',
-      label: 'Duplicate',
-      action: () => {
-        structure.duplicate(nodeId);
-        onClose();
-      },
-    });
-    if (structure.wrap) {
-      items.push({
-        testId: 'world-context-menu-wrap',
-        label: 'Wrap',
-        action: () => {
-          structure.wrap!(nodeId);
-          onClose();
-        },
-      });
-    }
-    if (structure.unwrap) {
-      items.push({
-        testId: 'world-context-menu-unwrap',
-        label: 'Unwrap',
-        action: () => {
-          structure.unwrap!(nodeId);
-          onClose();
-        },
-      });
-    }
-  }
-
-  // Portaled straight to `document.body` (spec-27 §8 pan-seam fix): this
-  // component renders as a DOM descendant of `WorldSelectionOverlay`'s outer
-  // wrapper, which space-pan gives a live `transform` when pan≠0. A non-`none`
-  // transform on an ancestor becomes the CSS containing block for a
-  // `position: fixed` descendant, so — un-portaled — this menu's `left`/`top`
-  // (raw `clientX`/`clientY` from the triggering right-click, see
-  // `WorldSelectionOverlay`'s `onContextMenu`) would resolve against the
-  // transformed wrapper instead of the viewport once panned, displacing the
-  // menu away from the cursor. Portaling to `document.body` — which never
-  // carries that transform — restores `position: fixed`'s normal
-  // viewport-relative meaning regardless of pan. `menuRef` still points at
-  // the REAL DOM node either way (a portal only changes WHERE React inserts
-  // the subtree, not the node itself), so the outside-click/Escape-to-close
-  // handlers below — native `document` listeners doing DOM `.contains()`
-  // checks — are unaffected by the portal.
-  return createPortal(
-    <div
-      ref={menuRef}
-      data-testid="world-context-menu"
-      style={{
-        position: 'fixed',
-        left: state.x,
-        top: state.y,
-        background: MENU_BG,
-        border: `1px solid ${MENU_BORDER}`,
-        borderRadius: 4,
-        padding: '4px 0',
-        zIndex: 1000,
-        minWidth: 150,
-        maxWidth: 260,
-        boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
-        fontSize: 12,
-        color: '#c5c8ce',
-      }}
-    >
-      {items.map((item) => (
-        <div
-          key={item.testId}
-          data-testid={item.testId}
-          role="menuitem"
-          tabIndex={0}
-          onClick={item.action}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') item.action();
-          }}
-          style={menuItemStyle(item.color)}
-          {...hoverHandlers()}
-        >
-          {item.label}
-        </div>
-      ))}
-      {/* D3.e — Insert-child submenu, gated on the owning adapter's
-          `structure.creatableKinds` (react-world only today; the ingested
-          react-dom adapter has no `structure` at all, so `structure` is
-          `null` here and this whole block is skipped). */}
-      {structure && creatableKinds.length > 0 && (
-        <div>
-          <div
-            data-testid="world-context-menu-insert-child"
-            role="menuitem"
-            tabIndex={0}
-            onClick={() => setInsertOpen((v) => !v)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') setInsertOpen((v) => !v);
-            }}
-            style={menuItemStyle()}
-            {...hoverHandlers()}
-          >
-            Insert child ▸
-          </div>
-          {insertOpen &&
-            creatableKinds.map((k) => (
-              <div
-                key={k.kind}
-                data-testid={`world-context-menu-insert-child-${k.kind}`}
-                role="menuitem"
-                tabIndex={0}
-                onClick={() => {
-                  structure.create(k.kind, nodeId);
-                  onClose();
-                }}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    structure.create(k.kind, nodeId);
-                    onClose();
-                  }
-                }}
-                style={{ padding: '5px 12px 5px 24px', cursor: 'pointer' }}
-                {...hoverHandlers()}
-              >
-                {k.label}
-              </div>
-            ))}
-        </div>
-      )}
-      {structure && (
-        <div
-          data-testid="world-context-menu-delete"
-          role="menuitem"
-          tabIndex={0}
-          onClick={() => {
-            structure.remove(nodeId);
-            onClose();
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              structure.remove(nodeId);
-              onClose();
-            }
-          }}
-          style={menuItemStyle('#ff6b6b')}
-          {...hoverHandlers()}
-        >
-          Delete
-        </div>
-      )}
-    </div>,
-    document.body,
-  );
-}

package/src/components/asset-viewers/AssetViewer.tsx

@@ -1,38 +0,0 @@
-import type { AssetTab } from '../../editor-store';
-import { AudioViewer } from './AudioViewer';
-import { GenericJsonViewer } from './GenericJsonViewer';
-import { ImageViewer } from './ImageViewer';
-import { InputMapViewer } from './InputMapViewer';
-import { ModelViewer } from './ModelViewer';
-import { OnlineAssetDetail } from './OnlineAssetDetail';
-
-interface AssetViewerProps {
-  tab: AssetTab;
-}
-
-export function AssetViewer({ tab }: AssetViewerProps) {
-  // Online asset that hasn't been downloaded yet
-  if (tab.online) {
-    return <OnlineAssetDetail tabKey={tab.key} online={tab.online} />;
-  }
-
-  switch (tab.kind) {
-    case 'model':
-      return <ModelViewer assetPath={tab.assetPath} />;
-    case 'image':
-      return <ImageViewer assetPath={tab.assetPath} />;
-    case 'audio':
-      return <AudioViewer assetPath={tab.assetPath} />;
-    case 'json':
-      if (tab.assetPath.endsWith('.inputmap.json')) {
-        return <InputMapViewer assetPath={tab.assetPath} />;
-      }
-      return <GenericJsonViewer assetPath={tab.assetPath} />;
-    default:
-      return (
-        <div style={{ padding: 16, color: '#8c8c8c', fontSize: 12 }}>
-          No viewer available for this asset type.
-        </div>
-      );
-  }
-}

package/src/ingest/games-react/react-rpg/src/ui/game-state.tsx

@@ -1,129 +0,0 @@
-/**
- * Track N, N2 — verbatim copy of the template's `GameProvider` seam
- * (`packages/editor/template/src/ui/game-state.tsx`), present here
- * ONLY because `adapter-resolver.ts`'s `loadProjectGameProvider` (shared by
- * `default-react` and `ingest-react`, T6.2/Track N) hard-requires
- * `src/ui/game-state.tsx` under whatever `projectRoot` an
- * `ingest-react` world resolves against — see
- * `vite-plugin-react-world-provider.ts`'s literal `/src/ui/
- * game-state.tsx` path. This folder (`games-react/react-rpg/`) IS that
- * world's `projectRoot` (its `vgai.game.json`'s `entry` — `../entry.tsx` —
- * resolves relative to it too), so it needs its own copy, exactly like every
- * scaffolded project gets one (`create-vgai-project`'s `scaffoldProject`).
- *
- * The vendored react-rpg game itself never reads `useGameState`/`useGame` —
- * D-N2's host shim (`../../entry.tsx`) only composes the vendored game's OWN
- * `<Provider store><PersistGate persistor><App/></PersistGate></Provider>`,
- * with `<GameProvider>` wrapped around that AUTOMATICALLY by the resolver
- * (context-only, harmless to a foreign tree, per D-N2). This file is
- * therefore present purely to satisfy the resolver's lookup, not because the
- * ingested game consumes it — kept byte-identical to the template's copy so
- * a future react-ingest game that DOES want the state bridge (e.g. an
- * ingest-authoring follow-on, D-N8) gets it for free.
- */
-
-import type { WorldStateObserver } from '@engine/adapter';
-import {
-  createFrameSelectorCache,
-  type Equals,
-  shallow,
-} from '@engine/runtime/frame-selector-cache';
-import type { Game } from '@engine/runtime/game';
-import { createContext, type ReactNode, useContext, useRef, useSyncExternalStore } from 'react';
-
-/** Re-exported for convenience — the opt-in equality for selectors that
- *  return a fresh object/array/tuple every call (default is `Object.is`). */
-export { shallow };
-
-const GameContext = createContext<Game | null>(null);
-
-/** Provide the `Game` to `useGameState`/`useGame` for everything mounted
- *  beneath it. Does not replace or wrap `mountUI` — compose it around the
- *  element passed to `mountUI` (see the module doc comment above). */
-export function GameProvider({ game, children }: { game: Game; children: ReactNode }) {
-  return <GameContext.Provider value={game}>{children}</GameContext.Provider>;
-}
-
-/** Read the `Game` provided by the nearest `GameProvider`. Throws
- *  descriptively when called outside one — matching the repo's loud-failure
- *  habit rather than silently returning `null`. */
-export function useGame(): Game {
-  const game = useContext(GameContext);
-  if (!game) {
-    throw new Error(
-      'useGame: no Game in context — wrap this component in <GameProvider game={ctx.game!}>.',
-    );
-  }
-  return game;
-}
-
-/**
- * Subscribe to a selected slice of game state (`docs/REACT-STATE-BRIDGE.md`
- * §3). Re-renders only when the selected value changes: the selector re-runs
- * at most once per completed frame (`game.state.frameVersion`), and
- * `equals` (default `Object.is`; pass {@link shallow} for tuples/objects)
- * gates whether the fresh result actually counts as a change.
- */
-export function useGameState<T>(selector: (game: Game) => T, equals: Equals<T> = Object.is): T {
-  const game = useGame();
-  const cacheRef = useRef<ReturnType<typeof createFrameSelectorCache<T>> | null>(null);
-  if (cacheRef.current === null) {
-    cacheRef.current = createFrameSelectorCache<T>(equals);
-  }
-
-  return useSyncExternalStore(
-    (onStoreChange) => game.state.subscribe(onStoreChange),
-    () => cacheRef.current!.get(game.state.frameVersion, () => selector(game)),
-  );
-}
-
-/**
- * Pure, react-free lookup for the `useWorldObservation` hook below — see the
- * template's copy of this file for the full doc comment (byte-identical
- * logic, kept here only so this folder's `GameProvider` lookup resolves).
- */
-export function requireWorldObserver(game: Game, worldId: string): WorldStateObserver {
-  const world = game.world(worldId);
-  if (!world) {
-    throw new Error(
-      `useWorldObservation: no world registered with id "${worldId}" — check game.worlds for the ` +
-        'ids actually registered.',
-    );
-  }
-  const observer = world.mounted.observe;
-  if (!observer) {
-    throw new Error(
-      `useWorldObservation: world "${worldId}" (kind: ${world.kind}, adapter: "${world.adapter.id}") ` +
-        'has no state bridge — its mount has no `observe` (WorldStateObserver). This world cannot ' +
-        'be observed from React (docs/REACT-STATE-BRIDGE.md §4).',
-    );
-  }
-  return observer;
-}
-
-/**
- * Subscribe to a selected slice of a FOREIGN (non-first-party) world's
- * observed state — see the template's copy for the full doc comment.
- */
-export function useWorldObservation<T>(
-  worldId: string,
-  selector: (snapshot: unknown) => T,
-  equals: Equals<T> = Object.is,
-): T {
-  const game = useGame();
-  const observer = requireWorldObserver(game, worldId);
-  const cacheRef = useRef<ReturnType<typeof createFrameSelectorCache<T>> | null>(null);
-  if (cacheRef.current === null) {
-    cacheRef.current = createFrameSelectorCache<T>(equals);
-  }
-  const versionRef = useRef(0);
-
-  return useSyncExternalStore(
-    (onStoreChange) =>
-      observer.subscribe(() => {
-        versionRef.current++;
-        onStoreChange();
-      }),
-    () => cacheRef.current!.get(versionRef.current, () => selector(observer.snapshot())),
-  );
-}

package/src/scene-ui-mode/active-scene-ui.ts

@@ -1,58 +0,0 @@
-/**
- * Scene-UI-mode chrome (E1.a/b/c, spec-27 §7 E1 — the remaining half of "Absorb
- * scene-UI as a mode, not a separate app": palette, keyframe timeline, prefabs).
- *
- * Files under THIS folder are the §10 item-7 grep-ban exemption's home
- * ("outside the migrated scene-UI-mode files"): they may import `UIEditStore`
- * and its neighbours (`ui-editor/*`) freely, because they exist SPECIFICALLY to
- * author a `.vscn` `ui` tree. The generic editor shell (`components/
- * DefaultEditorLayout.tsx`, `components/GameHierarchy.tsx`, `components/
- * BottomPanel.tsx`, …) may compose a `scene-ui-mode/*` component/hook by
- * IMPORTING it (exactly like it already composes `GameHierarchy`/`RightPanel`),
- * but must never import `UIEditStore` (or `SceneEntity`/`THREE.`) itself — that
- * boundary is what keeps `rg "UIEditStore" src/components` a meaningful,
- * zero-hit grep gate outside this folder.
- *
- * This module resolves WHICH `UIAuthoringAdapter` (if any) is the open
- * project's live scene-UI child, so every other file in this folder has one
- * place to ask "is scene-UI authoring live right now?" instead of re-deriving
- * the composite-child lookup.
- */
-
-import { useSyncExternalStore } from 'react';
-import { getAuthoringOverride } from '../authoring/active-adapter';
-import { CompositeAuthoringAdapter } from '../authoring/composite-authoring-adapter';
-import { UIAuthoringAdapter } from '../authoring/ui-authoring-adapter';
-import { useEditorStore } from '../EditorContext';
-
-/**
- * The active `UIAuthoringAdapter`, whether it is installed directly as the
- * override (the standalone harness's pre-C3 shape, `ui-editor/harness.tsx`) or
- * nested as the edit-mode `CompositeAuthoringAdapter`'s `kind: 'scene-ui'`
- * child (C3, the unified editor's real shape — at most one such child exists
- * per open scene, `edit-mode-authoring.ts`'s `buildUIChild`). `null` when
- * neither applies: no override installed, a bare non-UI override (ingest/
- * play), or a composite with no scene-UI child yet (the open scene has no
- * `ui` roots — §3.1's install gate).
- */
-export function resolveActiveSceneUIAdapter(): UIAuthoringAdapter | null {
-  const active = getAuthoringOverride();
-  if (active instanceof UIAuthoringAdapter) return active;
-  if (active instanceof CompositeAuthoringAdapter) {
-    const child = active.childAdapters().find((c) => c.kind === 'scene-ui');
-    return child?.adapter instanceof UIAuthoringAdapter ? child.adapter : null;
-  }
-  return null;
-}
-
-/**
- * React-hook form of {@link resolveActiveSceneUIAdapter} — re-resolves on
- * every `EditorStore` notify (edit-mode composite install/teardown, scene
- * switch, undo/redo of the whole document all fire one), which is exactly the
- * signal that can flip whether a scene-UI child exists at all.
- */
-export function useActiveSceneUIAdapter(): UIAuthoringAdapter | null {
-  const store = useEditorStore();
-  useSyncExternalStore(store.subscribe, store.getSnapshot);
-  return resolveActiveSceneUIAdapter();
-}