@vgai/editor 0.2.0

package/src/components/GameHierarchy.tsx

@@ -0,0 +1,1349 @@
+/**
+ * GameHierarchy — the ONE hierarchy panel (A2,
+ * docs/unified-world-editor/26-unified-editor-spec.md §2 A2). Replaces the
+ * former pair of per-format hierarchy panels (first-party single-document,
+ * ingested-game) — a single contract-only shell driven ENTIRELY through the
+ * active {@link AuthoringAdapter}: `hierarchy`/`selection`/`inspector`/
+ * `structure`/`assetDrop`. Every row affordance is gated on the PRESENCE of a
+ * provider or a reserved inspector path, never on which concrete adapter is
+ * active.
+ *
+ * Rule zero (spec §0): this file imports ONLY from `@engine/adapter` types
+ * and editor-shell modules — no private first-party entity type, no direct
+ * 3D-library value import, no first-party document-format string literal.
+ * First-party-only affordances not yet contract-expressible (prefab
+ * unpack/open/save-as) live behind `hierarchy-menu-registry.ts`'s escape
+ * hatch, registered elsewhere (`authoring/first-party-hierarchy-menu.ts`).
+ *
+ * Shape handling (the manager's reconciliation constraint): the ACTIVE
+ * adapter is either a bare per-scene adapter (single-world edit, an ingested
+ * game, …) — `adapter.hierarchy.roots()` returns real entity roots directly —
+ * or `CompositeAuthoringAdapter` (2+ worlds) — roots are synthetic
+ * `world:<id>` GROUP nodes (`flags.runtimeOnly`), each world's own roots
+ * nested beneath. Both shapes are walked by the SAME generic row engine
+ * (`flattenIngestRows` — the format-neutral `EditorNode`-typed row
+ * flattener, not the legacy first-party-typed sibling module); a group node
+ * only ever gets a small set of cosmetic extras (kind/zOrder badge, a
+ * session-local eye, `flags.inactiveRoot` dimming) layered on TOP of the
+ * same row component.
+ *
+ * Zero-regression testids (landmine a): every row carries BOTH the
+ * `data-entity-name`/`data-testid="scene-name"` family (`EditorPage.getEntityNames`/
+ * 09-editor-interaction.spec.ts) and the full `ingest-*` family (`ingest-row`,
+ * `ingest-row-caret`, `ingest-row-visibility`, `ingest-search`,
+ * `ingest-hierarchy`, `data-ingest-name`, `ingest-context-menu`) so the 13
+ * existing ingest-family e2e specs keep passing unchanged.
+ */
+
+import type { AuthoringAdapter } from '@engine/adapter';
+import {
+  faCaretDown,
+  faCaretRight,
+  faCrosshairs,
+  faEye,
+  faEyeSlash,
+  faHandPointer,
+  faLock,
+  faLockOpen,
+  faPlus,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useCallback, useEffect, useReducer, useRef, useState, useSyncExternalStore } from 'react';
+import { getActiveAuthoring, hasAuthoringOverride } from '../authoring/active-adapter';
+import { CompositeAuthoringAdapter } from '../authoring/composite-authoring-adapter';
+import { requestRootActivation } from '../authoring/root-activation';
+import {
+  isWorldHidden,
+  isWorldInteractive,
+  isWorldPickLocked,
+  toggleWorldHidden,
+  toggleWorldInteractive,
+  toggleWorldPickLock,
+} from '../authoring/world-session-state';
+import { useEditorStore } from '../EditorContext';
+import type { EditorStore } from '../editor-store';
+import { getHierarchyMenuItems } from '../hierarchy-menu-registry';
+import { CHILD_CAP } from '../hierarchy-rows';
+import { setActiveScope } from '../hotkeys';
+import {
+  flattenIngestRows,
+  type IngestRow,
+  ingestRowKey,
+  ingestRowWindow,
+} from '../ingest-hierarchy-rows';
+import { OverlayReportBanner } from './OverlayReportBanner';
+import { Panel } from './primitives/Panel';
+
+const ASSET_MIME = 'application/x-editor-asset';
+const REORDER_MIME = 'application/x-hierarchy-reorder';
+const ROW_HEIGHT = 24;
+const INDENT = 14;
+
+// Wave-18-ported scroll-window sizing (docs/WAVE18-INGEST-HIERARCHY-VIRTUALIZATION-DESIGN.md),
+// adapted from `IngestHierarchy`'s pre-A2 windowing: `ROW_HEIGHT` above (24)
+// is THIS panel's row height, not IngestHierarchy's old 22 — every rendered
+// row (Row/MoreRow) is already fixed at that height, so the spacer-div trick
+// only keeps the scrollbar honest as long as this constant matches. OVERSCAN
+// keeps a small buffer of already-rendered rows on each side of the visible
+// band so a fast scroll/keyboard-nav doesn't flash empty space before the
+// next paint catches up. DEFAULT_VIEWPORT_PX is used whenever the container
+// hasn't reported a real (nonzero) `clientHeight` yet — jsdom never performs
+// real layout, so unit tests never measure anything unless they explicitly
+// mock it; this generous fallback also keeps every pre-existing small-tree
+// render byte-identical without any test needing to.
+const OVERSCAN = 8;
+const DEFAULT_VIEWPORT_PX = 2400;
+// Only scroll-window ABOVE this row count. Small/medium trees (every real
+// multi-world browse tree — world-group rows + CHILD_CAP-bounded children)
+// render in full, immune to a transient/small `clientHeight` measurement
+// windowing out later world-group rows (which broke 19-multi-world/22-tri-world
+// when virtualization first landed). Windowing only kicks in for pathologically
+// large lists (e.g. an ingested game's uncapped SEARCH result — react-rpg's
+// dungeon is ~1900 rows), which is exactly the case wave-18 targeted.
+const VIRTUALIZE_MIN_ROWS = 300;
+
+const KIND_GLYPH: Record<string, string> = {
+  mesh: '◧',
+  light: '☀',
+  camera: '▣',
+  group: '▾',
+  object: '•',
+  // B3 — a react world's catalog component node (`kind:'component'`, the
+  // registry entry, not the entry-preview's DOM subtree). A neutral glyph
+  // (NOT react-branded) — this shell only ever knows the format-neutral
+  // `EditorNode.kind` string, never react internals.
+  component: '❖',
+};
+
+type DropZone = 'before' | 'child' | 'after';
+interface DropTarget {
+  nodeId: string;
+  zone: DropZone;
+}
+
+/** Walk UP from `targetId` via `parentId` — true if any ancestor (or itself)
+ *  is in `dragIds` (prevents dropping a subtree into its own descendant). */
+function isDescendantOfAny(
+  targetId: string,
+  dragIds: string[],
+  adapter: AuthoringAdapter,
+): boolean {
+  let current: string | null = targetId;
+  let guard = 0;
+  while (current && guard++ < 1000) {
+    if (dragIds.includes(current)) return true;
+    current = adapter.hierarchy.node(current)?.parentId ?? null;
+  }
+  return false;
+}
+
+/** The ids of `parentId`'s children, in order — `null` parentId means "the
+ *  adapter's own roots" (NOT necessarily the document root of a composite —
+ *  callers pass the group-node id for "this world's roots"). */
+function siblingIdsOf(adapter: AuthoringAdapter, parentId: string | null): string[] {
+  if (parentId === null) return adapter.hierarchy.roots().map((n) => n.id);
+  return adapter.hierarchy.node(parentId)?.childIds ?? [];
+}
+
+/**
+ * `CompositeAuthoringAdapter`'s zOrder badge for a `world:<id>` group row —
+ * `null` when the active adapter isn't a composite (bare shape) or the id
+ * isn't one of its synthetic group nodes.
+ *
+ * IMPORTANT: a composite GROUP node is NOT the same as `flags.runtimeOnly`.
+ * Six different adapters (ingest / react-dom / react-world / world2d /
+ * embed-only, plus the composite's own group nodes) all set
+ * `flags.runtimeOnly: true` on their nodes — so `runtimeOnly` means "not an
+ * authored first-party entity", NOT "a composite world wrapper". Only the
+ * composite manufactures the synthetic `world:<id>` group rows this panel
+ * treats specially (session-local eye per D9, kind/zOrder badge, non-draggable);
+ * an ingested game's own rows are ordinary rows whose eye/lock/rename route
+ * through the contract like any other. Keying "is a group node" off
+ * `runtimeOnly` (an earlier bug) wrongly treated every ingest/react row as a
+ * world wrapper, regressing the ingest eye toggle to a session-local shell
+ * hide instead of the adapter's `inspector.set(id,'visible',…)`.
+ */
+function compositeGroupBadge(
+  adapter: AuthoringAdapter,
+  nodeId: string,
+): { zOrder: number; worldId: string } | null {
+  if (!(adapter instanceof CompositeAuthoringAdapter)) return null;
+  for (const child of adapter.childAdapters()) {
+    if (adapter.groupNodeId(child.worldId) === nodeId) {
+      // A4 (D8) — prefer the LIVE manifest zOrder (editable on the game root,
+      // `composite.inspector.get(groupId, 'zOrder')`) over the array-index
+      // fallback `child.zOrder`, so editing zOrder through the generic
+      // inspector is reflected on this badge immediately (the write path
+      // calls `store.notifyIngestEdit()`, which re-renders this panel).
+      // Falls back to the array index when there's no manifest surface
+      // (play-mode composites, or any adapter that doesn't report a
+      // `zOrder` inspector property for its own group-node id) — unchanged
+      // from before A4.
+      const manifestZOrder = adapter.inspector?.get(nodeId, 'zOrder');
+      return {
+        zOrder: typeof manifestZOrder === 'number' ? manifestZOrder : child.zOrder,
+        // B1 — the RAW manifest world id (`CompositeChild.worldId`), so
+        // callers can key session-local world state (`world-session-state.ts`
+        // — eye/interactive/pick-lock) consistently with `design-time-layers.ts`,
+        // which reads the SAME id off `composite.childAdapters()` directly.
+        worldId: child.worldId,
+      };
+    }
+  }
+  return null;
+}
+
+/** True only for a composite's synthetic `world:<id>` group row (see
+ *  {@link compositeGroupBadge}) — never for an ordinary (even runtime-only)
+ *  ingest/react/world2d node. */
+function isCompositeGroupNode(adapter: AuthoringAdapter, nodeId: string): boolean {
+  return compositeGroupBadge(adapter, nodeId) !== null;
+}
+
+/**
+ * A4 (D8) — true only for the composite's synthetic game-root row. Asks the
+ * adapter for its reserved id (`CompositeAuthoringAdapter.gameRootId`) rather
+ * than hardcoding the string here — same "ask, don't sniff" discipline as
+ * `groupNodeId()`/`compositeGroupBadge` above (Rule zero: this file never
+ * decodes an adapter-minted id itself).
+ */
+function isGameRootNode(adapter: AuthoringAdapter, nodeId: string): boolean {
+  return adapter instanceof CompositeAuthoringAdapter && adapter.gameRootId === nodeId;
+}
+
+/**
+ * A4 (D8) — every root-group MEMBER id (radio row — a data-file root), keyed
+ * by node id, built fresh from `adapter.rootGroups.groups()` each render.
+ * This is the ONLY way `GameHierarchy` learns which rows are members/which
+ * is active — never by decoding the opaque id string itself (Rule zero:
+ * this file's ids stay format-neutral, no first-party document vocabulary).
+ */
+function buildRootMembers(
+  adapter: AuthoringAdapter,
+): Map<string, { groupId: string; active: boolean }> {
+  const map = new Map<string, { groupId: string; active: boolean }>();
+  for (const group of adapter.rootGroups?.groups() ?? []) {
+    for (const id of group.memberRootIds) {
+      map.set(id, { groupId: group.id, active: group.activeRootId === id });
+    }
+  }
+  return map;
+}
+
+// --- Context menu ---
+
+interface ContextMenuState {
+  x: number;
+  y: number;
+  nodeId: string;
+}
+
+function ContextMenu({
+  state,
+  adapter,
+  store,
+  isGroupNode,
+  onRename,
+  onClose,
+}: {
+  state: ContextMenuState;
+  adapter: AuthoringAdapter;
+  store: EditorStore;
+  isGroupNode: boolean;
+  onRename: (id: string) => void;
+  onClose: () => void;
+}) {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [createOpen, setCreateOpen] = useState(false);
+  // Same at-most-once-per-open guard as CreateMenu: `onClose()` on select is
+  // async, so a double-dispatched click/Enter on a create item could otherwise
+  // double-invoke `create` before the menu unmounts. Reset on each open.
+  const createGuardRef = useRef(false);
+
+  useEffect(() => {
+    if (createOpen) createGuardRef.current = false;
+  }, [createOpen]);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) onClose();
+    };
+    const keyHandler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('mousedown', handler);
+    document.addEventListener('keydown', keyHandler);
+    return () => {
+      document.removeEventListener('mousedown', handler);
+      document.removeEventListener('keydown', keyHandler);
+    };
+  }, [onClose]);
+
+  const node = adapter.hierarchy.node(state.nodeId);
+  if (!node) return null;
+
+  const creatableKinds = adapter.structure?.creatableKinds?.(state.nodeId) ?? [];
+  const hasStructure = !!adapter.structure;
+  const nameKnown = adapter.inspector?.get(state.nodeId, 'name') !== undefined;
+  const lockedKnown = adapter.inspector?.get(state.nodeId, 'locked') !== undefined;
+  const locked = adapter.inspector?.get(state.nodeId, 'locked') === true;
+  const visibleKnown = adapter.inspector !== undefined;
+  const visible = adapter.inspector?.get(state.nodeId, 'visible') !== false;
+
+  const items: { label: string; action: () => void; color?: string }[] = [];
+
+  if (!isGroupNode) {
+    if (nameKnown) {
+      items.push({
+        label: 'Rename',
+        action: () => {
+          onRename(state.nodeId);
+          onClose();
+        },
+      });
+    }
+    if (hasStructure) {
+      items.push({
+        label: 'Duplicate',
+        action: () => {
+          adapter.structure!.duplicate(state.nodeId);
+          onClose();
+        },
+      });
+    }
+    if (visibleKnown) {
+      items.push({
+        label: visible ? 'Hide' : 'Show',
+        action: () => {
+          adapter.inspector!.set(state.nodeId, 'visible', !visible);
+          store.notifyIngestEdit();
+          onClose();
+        },
+      });
+    }
+    if (lockedKnown) {
+      items.push({
+        label: locked ? 'Unlock' : 'Lock',
+        action: () => {
+          adapter.inspector!.set(state.nodeId, 'locked', !locked);
+          store.notifyIngestEdit();
+          onClose();
+        },
+      });
+    }
+    // First-party escape-hatch extras (prefab unpack/open/save-as, …) —
+    // permanent adapter-module contribution seam (see hierarchy-menu-registry.ts).
+    for (const extra of getHierarchyMenuItems({ nodeId: state.nodeId, store })) {
+      items.push({
+        label: extra.label,
+        ...(extra.color !== undefined ? { color: extra.color } : {}),
+        action: () => {
+          extra.action();
+          onClose();
+        },
+      });
+    }
+    if (hasStructure) {
+      items.push({
+        label: 'Delete',
+        color: '#ff6b6b',
+        action: () => {
+          adapter.structure!.remove(state.nodeId);
+          onClose();
+        },
+      });
+    }
+  }
+
+  return (
+    <div
+      ref={menuRef}
+      data-testid="ingest-context-menu"
+      style={{
+        position: 'fixed',
+        left: state.x,
+        top: state.y,
+        background: '#2c2c2c',
+        border: '1px solid #444',
+        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',
+      }}
+    >
+      {/* A4 (D8): also suppressed for a root-group MEMBER row, same as an
+          existing composite group row — `isGroupNode` covers both (see the
+          caller's computation below). Create▸ on a member id would silently
+          land at the scene root instead of doing anything meaningful. */}
+      {!isGroupNode && creatableKinds.length > 0 && (
+        <div>
+          <div
+            role="menuitem"
+            tabIndex={0}
+            onClick={() => setCreateOpen((v) => !v)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') setCreateOpen((v) => !v);
+            }}
+            style={{ padding: '5px 12px', cursor: 'pointer' }}
+          >
+            Create ▸
+          </div>
+          {createOpen &&
+            creatableKinds.map((k) => (
+              <div
+                key={k.kind}
+                role="menuitem"
+                tabIndex={0}
+                onClick={() => {
+                  if (createGuardRef.current) return;
+                  createGuardRef.current = true;
+                  adapter.structure!.create(k.kind, state.nodeId);
+                  onClose();
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    if (createGuardRef.current) return;
+                    createGuardRef.current = true;
+                    adapter.structure!.create(k.kind, state.nodeId);
+                    onClose();
+                  }
+                }}
+                style={{ padding: '5px 12px 5px 24px', cursor: 'pointer' }}
+                onMouseEnter={(e) => {
+                  (e.currentTarget as HTMLDivElement).style.background = '#3a3a3a';
+                }}
+                onMouseLeave={(e) => {
+                  (e.currentTarget as HTMLDivElement).style.background = 'transparent';
+                }}
+              >
+                {k.label}
+              </div>
+            ))}
+        </div>
+      )}
+      {items.map((item) => (
+        <div
+          key={item.label}
+          role="menuitem"
+          tabIndex={0}
+          onClick={item.action}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') item.action();
+          }}
+          style={{ padding: '5px 12px', cursor: 'pointer', color: item.color ?? '#c5c8ce' }}
+          onMouseEnter={(e) => {
+            (e.currentTarget as HTMLDivElement).style.background = '#3a3a3a';
+          }}
+          onMouseLeave={(e) => {
+            (e.currentTarget as HTMLDivElement).style.background = 'transparent';
+          }}
+        >
+          {item.label}
+        </div>
+      ))}
+      {/* Bounded-authoring honest degrade (landmine f): the ACTIVE adapter has
+          no `structure` provider at all (an ingested/foreign game owns its
+          own scene graph) — Rename/Show-Hide/Lock above still work (they're
+          gated independently, on `inspector`), but Create/Duplicate/Delete/
+          Reparent are not, so say so plainly instead of hiding the menu. */}
+      {!hasStructure && (
+        <div style={{ padding: '8px 12px', color: '#c9a227', maxWidth: 240, lineHeight: 1.4 }}>
+          <strong>Create / Delete / Reparent — not available.</strong> This game owns its own scene
+          graph, so structural authoring isn't reapplicable. You can edit transform / material /
+          visibility, or capture a subtree into the first-party editable format.
+        </div>
+      )}
+    </div>
+  );
+}
+
+// --- Add / Create menu (shared by the toolbar "+" and reused create list) ---
+
+function CreateMenu({ adapter, parentId }: { adapter: AuthoringAdapter; parentId: string | null }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  // At-most-once-per-open guard. `setOpen(false)` on select is async — the menu
+  // item stays mounted until the next render, so under CI input jank a single
+  // menu-open can receive two `click` dispatches on the same item before it
+  // unmounts, double-invoking `create` (the "expected 3, saw 8" overshoot in
+  // 29-game-hierarchy). React state can't gate this because both clicks land in
+  // the same commit; a ref reset on each open bounds it to one create per open.
+  const creatingRef = useRef(false);
+  const kinds = adapter.structure?.creatableKinds?.(parentId) ?? [];
+
+  useEffect(() => {
+    if (!open) return;
+    creatingRef.current = false; // fresh open → allow exactly one create
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    const keyHandler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    document.addEventListener('keydown', keyHandler);
+    return () => {
+      document.removeEventListener('mousedown', handler);
+      document.removeEventListener('keydown', keyHandler);
+    };
+  }, [open]);
+
+  if (kinds.length === 0) return null;
+
+  return (
+    <div ref={ref} style={{ position: 'relative', flexShrink: 0 }}>
+      <span
+        role="button"
+        title="Add Entity"
+        data-testid="hierarchy-add-menu"
+        onClick={() => setOpen(!open)}
+        style={{
+          cursor: 'pointer',
+          fontSize: 13,
+          padding: '1px 4px',
+          borderRadius: 3,
+          background: open ? '#3a3a3a' : 'transparent',
+          userSelect: 'none',
+          color: '#c5c8ce',
+        }}
+      >
+        <FontAwesomeIcon icon={faPlus} style={{ fontSize: 10 }} />{' '}
+        <FontAwesomeIcon icon={faCaretDown} style={{ fontSize: 9 }} />
+      </span>
+      {open && (
+        <div
+          style={{
+            position: 'absolute',
+            top: '100%',
+            right: 0,
+            marginTop: 4,
+            background: '#2c2c2c',
+            border: '1px solid #444',
+            borderRadius: 4,
+            padding: '4px 0',
+            zIndex: 1000,
+            minWidth: 130,
+            boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+          }}
+        >
+          {kinds.map((k) => (
+            <div
+              key={k.kind}
+              data-testid={`hierarchy-add-${k.kind}`}
+              onClick={() => {
+                if (creatingRef.current) return; // ignore a double-dispatched click
+                creatingRef.current = true;
+                adapter.structure!.create(k.kind, parentId ?? undefined);
+                setOpen(false);
+              }}
+              style={{ padding: '5px 12px', cursor: 'pointer', fontSize: 12, color: '#c5c8ce' }}
+              onMouseEnter={(e) => {
+                (e.currentTarget as HTMLDivElement).style.background = '#3a3a3a';
+              }}
+              onMouseLeave={(e) => {
+                (e.currentTarget as HTMLDivElement).style.background = 'transparent';
+              }}
+            >
+              {k.label}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// --- Row ---
+
+function MoreRow({ row, onReveal }: { row: IngestRow; onReveal: (parentPathKey: string) => void }) {
+  const hidden = row.more!.hidden;
+  return (
+    <button
+      type="button"
+      data-testid="ingest-row-more"
+      onClick={() => onReveal(row.more!.parentPathKey)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        height: ROW_HEIGHT,
+        paddingLeft: row.depth * INDENT + INDENT,
+        border: 'none',
+        background: 'transparent',
+        color: '#7d828c',
+        fontSize: 12,
+        fontStyle: 'italic',
+        textAlign: 'left',
+        cursor: 'pointer',
+      }}
+    >
+      … {hidden} more
+    </button>
+  );
+}
+
+/**
+ * D4 (spec27 §6 D4, layer-tree "search filters + HIGHLIGHTS") — split
+ * `label` into `<mark>`-wrapped/plain segments around every case-insensitive
+ * occurrence of `term`, or the plain label unchanged when `term` is empty
+ * (the pre-D4 render, byte-identical). Pure text math — no adapter/DOM
+ * access — factored out purely so `Row` itself stays simple.
+ */
+function highlightSegments(label: string, term: string): React.ReactNode {
+  if (!term) return label;
+  const lower = label.toLowerCase();
+  const needle = term.toLowerCase();
+  const parts: React.ReactNode[] = [];
+  let cursor = 0;
+  let idx = lower.indexOf(needle, cursor);
+  if (idx < 0) return label;
+  let key = 0;
+  while (idx >= 0) {
+    if (idx > cursor) parts.push(label.slice(cursor, idx));
+    parts.push(
+      <mark
+        key={key++}
+        data-testid="ingest-row-search-highlight"
+        style={{ background: '#e0a030', color: '#1a1a1a', borderRadius: 2 }}
+      >
+        {label.slice(idx, idx + needle.length)}
+      </mark>,
+    );
+    cursor = idx + needle.length;
+    idx = lower.indexOf(needle, cursor);
+  }
+  if (cursor < label.length) parts.push(label.slice(cursor));
+  return parts;
+}
+
+function Row({
+  row,
+  adapter,
+  store,
+  isSelected,
+  isEditing,
+  isCollapsed,
+  dropZone,
+  isDragged,
+  rootMember,
+  searchTerm,
+  onToggleOpen,
+  onStartEditing,
+  onContextMenu,
+  onDragStart,
+  onClick,
+  onActivateRoot,
+}: {
+  row: IngestRow;
+  adapter: AuthoringAdapter;
+  store: EditorStore;
+  isSelected: boolean;
+  isEditing: boolean;
+  isCollapsed: boolean;
+  dropZone: DropZone | null;
+  isDragged: boolean;
+  /** A4 (D8) — set when this row is a root-group member (a scene-file
+   *  root); `active` is whether it's the currently-loaded one. */
+  rootMember: { groupId: string; active: boolean } | undefined;
+  /** D4 — the trimmed, lowercased-by-the-caller search term (empty string
+   *  when the search box is empty), for {@link highlightSegments}. */
+  searchTerm: string;
+  onToggleOpen: (pathKey: string) => void;
+  onStartEditing: (id: string) => void;
+  onContextMenu: (e: React.MouseEvent, id: string) => void;
+  onDragStart: (e: React.DragEvent, id: string) => void;
+  onClick: (e: React.MouseEvent, id: string) => void;
+  onActivateRoot: (groupId: string, rootId: string) => void;
+}) {
+  const { node, depth, hasChildren, pathKey } = row;
+  // A composite `world:<id>` group row (session-local eye per D9, zOrder badge,
+  // non-draggable) — NOT merely a runtime-only node (see `isCompositeGroupNode`).
+  const badge = compositeGroupBadge(adapter, node.id);
+  const isGroupNode = badge !== null;
+  // A4 (D8) — the synthetic game root, and a root-group member (scene-file
+  // root) row. Neither owns a real name/visible/locked path, isn't
+  // draggable, and carries no `data-entity-name` (landmine: every project
+  // ships 2+ scene-file members — they must not pollute `getEntityNames()`).
+  const isGameRootRow = isGameRootNode(adapter, node.id);
+  const isMemberRow = rootMember !== undefined;
+  const isStructural = isGroupNode || isGameRootRow || isMemberRow;
+  // Reserved-path reads, resolved ONCE per row and only for non-structural
+  // rows: an adapter that doesn't support a reserved path returns
+  // `undefined` (its affordance simply doesn't render). Cheap for every
+  // stock adapter — the ingest/react adapters early-return `undefined` for a
+  // non-style path before touching their tree; the first-party adapter
+  // reads a plain descriptor.
+  const lockedValue = isStructural ? undefined : adapter.inspector?.get(node.id, 'locked');
+  const nameValue = isStructural ? undefined : adapter.inspector?.get(node.id, 'name');
+  const visibleKnown = !isStructural && adapter.inspector !== undefined;
+  // B1 (D9) — a group row's eye/interactive/pick-lock read the LIFTED,
+  // module-level session store (`world-session-state.ts`), keyed by the
+  // RAW manifest world id `badge.worldId` — not the group-node id itself.
+  const worldHidden = badge ? isWorldHidden(badge.worldId) : false;
+  const worldInteractive = badge ? isWorldInteractive(badge.worldId) : false;
+  const worldPickLocked = badge ? isWorldPickLocked(badge.worldId) : false;
+  const visible = isGroupNode ? !worldHidden : adapter.inspector?.get(node.id, 'visible') !== false;
+  const lockedKnown = lockedValue !== undefined;
+  const locked = lockedValue === true;
+  const nameKnown = nameValue !== undefined;
+
+  const bg =
+    dropZone === 'child' ? 'rgba(87, 158, 255, 0.25)' : isSelected ? '#2a4a7a' : 'transparent';
+
+  return (
+    <div
+      data-entity-name={isMemberRow || isGameRootRow ? undefined : node.label}
+      data-testid="ingest-row"
+      data-ingest-name={node.label}
+      draggable={!isStructural}
+      onDragStart={(e) => onDragStart(e, node.id)}
+      onClick={(e) => onClick(e, node.id)}
+      onDoubleClick={() => {
+        if (rootMember && !rootMember.active) {
+          onActivateRoot(rootMember.groupId, node.id);
+        } else if (nameKnown) {
+          onStartEditing(node.id);
+        }
+      }}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        onContextMenu(e, node.id);
+      }}
+      style={{
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        height: ROW_HEIGHT,
+        paddingLeft: depth * INDENT,
+        paddingRight: 4,
+        gap: 4,
+        cursor: 'pointer',
+        background: bg,
+        outline: dropZone === 'child' ? '1px dashed #579EFF' : 'none',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        opacity:
+          isDragged || (!isStructural && !visible) || (rootMember && !rootMember.active) ? 0.45 : 1,
+        fontSize: 13,
+        color: '#c5c8ce',
+        userSelect: 'none',
+      }}
+    >
+      {dropZone === 'before' && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: depth * INDENT,
+            right: 0,
+            height: 2,
+            background: '#579EFF',
+            pointerEvents: 'none',
+            zIndex: 10,
+          }}
+        />
+      )}
+      {dropZone === 'after' && (
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: depth * INDENT,
+            right: 0,
+            height: 2,
+            background: '#579EFF',
+            pointerEvents: 'none',
+            zIndex: 10,
+          }}
+        />
+      )}
+
+      <span
+        data-testid="ingest-row-caret"
+        onClick={(e) => {
+          e.stopPropagation();
+          onToggleOpen(pathKey);
+        }}
+        style={{
+          width: 12,
+          fontSize: 8,
+          textAlign: 'center',
+          flexShrink: 0,
+          cursor: hasChildren ? 'pointer' : 'default',
+          color: '#8c8c8c',
+        }}
+      >
+        {hasChildren ? <FontAwesomeIcon icon={isCollapsed ? faCaretRight : faCaretDown} /> : ''}
+      </span>
+
+      {rootMember && (
+        <span
+          data-testid="root-radio"
+          data-root-active={rootMember.active ? 'true' : 'false'}
+          title={rootMember.active ? 'Active root' : 'Inactive root — double-click to activate'}
+          style={{ fontSize: 9, opacity: 0.8, flexShrink: 0 }}
+        >
+          {rootMember.active ? '●' : '○'}
+        </span>
+      )}
+
+      <span style={{ fontSize: 10, opacity: 0.6, flexShrink: 0 }}>
+        {KIND_GLYPH[node.kind] ?? '•'}
+      </span>
+
+      {isEditing ? (
+        <input
+          autoFocus
+          defaultValue={node.label}
+          onBlur={(e) => {
+            adapter.inspector!.set(node.id, 'name', e.currentTarget.value);
+            store.notifyIngestEdit();
+            onStartEditing('');
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              adapter.inspector!.set(node.id, 'name', e.currentTarget.value);
+              store.notifyIngestEdit();
+              onStartEditing('');
+            }
+            if (e.key === 'Escape') onStartEditing('');
+          }}
+          onClick={(e) => e.stopPropagation()}
+          style={{
+            flex: 1,
+            minWidth: 0,
+            background: '#1a1a1a',
+            border: '1px solid #579EFF',
+            borderRadius: 2,
+            color: '#c5c8ce',
+            fontSize: 13,
+            padding: '0 4px',
+            outline: 'none',
+          }}
+        />
+      ) : (
+        <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          {highlightSegments(node.label, searchTerm)}
+          {badge && (
+            <span style={{ marginLeft: 6, fontSize: 10, opacity: 0.6 }}>z{badge.zOrder}</span>
+          )}
+        </span>
+      )}
+
+      {lockedKnown && (
+        <span
+          data-testid="ingest-row-lock"
+          title="Toggle Lock"
+          onClick={(e) => {
+            e.stopPropagation();
+            adapter.inspector!.set(node.id, 'locked', !locked);
+            store.notifyIngestEdit();
+          }}
+          style={{ fontSize: 9, cursor: 'pointer', flexShrink: 0, opacity: locked ? 0.8 : 0.35 }}
+        >
+          <FontAwesomeIcon icon={locked ? faLock : faLockOpen} />
+        </span>
+      )}
+
+      {(visibleKnown || isGroupNode) && (
+        <button
+          type="button"
+          data-testid="ingest-row-visibility"
+          title={visible ? 'Hide' : 'Show'}
+          onClick={(e) => {
+            e.stopPropagation();
+            if (badge) {
+              toggleWorldHidden(badge.worldId);
+              store.notifyIngestEdit();
+            } else {
+              adapter.inspector!.set(node.id, 'visible', !visible);
+              store.notifyIngestEdit();
+            }
+          }}
+          style={{
+            width: 20,
+            height: 20,
+            border: 'none',
+            background: 'transparent',
+            color: visible ? '#9aa0a6' : '#e0a030',
+            cursor: 'pointer',
+            fontSize: 11,
+            flexShrink: 0,
+          }}
+        >
+          <FontAwesomeIcon icon={visible ? faEye : faEyeSlash} />
+        </button>
+      )}
+
+      {/* B1 (D9) — session-local, per-world design-time toggles: `interactive`
+       *  forwards real pointer events to the world's layer (design-time
+       *  hover/press testing, `design-time-layers.ts`); `pickLock` is stored
+       *  for B4's layered viewport picking to consume. Group rows only —
+       *  neither concept applies to an ordinary entity row. */}
+      {badge && (
+        <span
+          data-testid="world-interactive-toggle"
+          title={
+            worldInteractive
+              ? 'Interactive (layer forwards pointer events)'
+              : 'Not interactive (layer is pointer-events:none)'
+          }
+          onClick={(e) => {
+            e.stopPropagation();
+            toggleWorldInteractive(badge.worldId);
+            store.notifyIngestEdit();
+          }}
+          style={{
+            fontSize: 9,
+            cursor: 'pointer',
+            flexShrink: 0,
+            opacity: worldInteractive ? 0.9 : 0.35,
+          }}
+        >
+          <FontAwesomeIcon icon={faHandPointer} />
+        </span>
+      )}
+      {badge && (
+        <span
+          data-testid="world-picklock-toggle"
+          title={
+            worldPickLocked ? 'Pick-locked (skipped by topmost-layer picking)' : 'Not pick-locked'
+          }
+          onClick={(e) => {
+            e.stopPropagation();
+            toggleWorldPickLock(badge.worldId);
+            store.notifyIngestEdit();
+          }}
+          style={{
+            fontSize: 9,
+            cursor: 'pointer',
+            flexShrink: 0,
+            opacity: worldPickLocked ? 0.9 : 0.35,
+          }}
+        >
+          <FontAwesomeIcon icon={faCrosshairs} />
+        </span>
+      )}
+    </div>
+  );
+}
+
+// --- Main panel ---
+
+export function GameHierarchy() {
+  const store = useEditorStore();
+  useSyncExternalStore(store.subscribe, store.getSnapshot);
+  const adapter = getActiveAuthoring(store);
+
+  const [search, setSearch] = useState('');
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<DropTarget | null>(null);
+  const [tailDrop, setTailDrop] = useState(false);
+  const [draggedIds, setDraggedIds] = useState<string[] | null>(null);
+  // D9 — world-group visibility (eye) is SESSION-LOCAL shell state, never
+  // routed through `inspector`/serialized. B1 LIFTED this out of a local
+  // `useState` (which the design-time layer stack could never see) into the
+  // module-level `world-session-state.ts` singleton, so `design-time-layers.ts`
+  // can actually hide/show a world's DOM layer, not just dim its hierarchy
+  // row — see that module's header comment.
+  // Wave-18-ported scroll-window state — the live `scrollTop`, updated by
+  // `onScroll` below; `clientHeight` is read fresh from `containerRef` every
+  // render rather than cached in state (see the constants' doc comment).
+  const [scrollTop, setScrollTop] = useState(0);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const collapsedKeysRef = useRef(new Set<string>());
+  const revealedRef = useRef(new Map<string, number>());
+  const lastClickedRef = useRef<string | null>(null);
+  const [, forceUpdate] = useReducer((x: number) => x + 1, 0);
+
+  const term = search.trim().toLowerCase();
+  // Cap browse-view children (D-C1) whenever a non-first-party/composite
+  // session is active (an ingested/multi-world tree may be huge), OR while
+  // playing (a live scene graph can also balloon) — matches the exact
+  // capping policy the former SceneHierarchy (play-only) / IngestHierarchy
+  // (always, unless searching) components each had on their own.
+  const capEnabled = term.length === 0 && (hasAuthoringOverride() || store.playState !== 'stopped');
+
+  const allRows = flattenIngestRows(
+    adapter.hierarchy,
+    collapsedKeysRef.current,
+    revealedRef.current,
+    capEnabled,
+  );
+  // Session-local world-hide (D9): drop every row belonging to a hidden world
+  // group (the group row itself stays, dimmed by its own `visible` flag above).
+  const worldFiltered = allRows.filter((row) => {
+    if (isCompositeGroupNode(adapter, row.node.id)) return true; // the group row itself always shows
+    let current: string | null = row.node.parentId;
+    while (current) {
+      const badge = compositeGroupBadge(adapter, current);
+      if (badge && isWorldHidden(badge.worldId)) return false;
+      current = adapter.hierarchy.node(current)?.parentId ?? null;
+    }
+    return true;
+  });
+  const rows = term
+    ? worldFiltered.filter((r) => r.node.label.toLowerCase().includes(term))
+    : worldFiltered.filter((r) => !r.hiddenByCollapse);
+
+  // Wave-18-ported: a filtered-down result set shouldn't leave the viewport
+  // parked at a stale deep scroll offset from a previous (larger) list.
+  useEffect(() => {
+    setScrollTop(0);
+    if (containerRef.current) containerRef.current.scrollTop = 0;
+  }, [term]);
+
+  // Wave-18-ported: render only the windowed slice of `rows` — everything
+  // above (cap/collapse/search/world-hide filtering) is unchanged; only the
+  // final `.map()` further down is restricted. The drag/reorder + tailDrop
+  // math below index/position against the FULL `rows` array (and read
+  // `containerRef.current.scrollTop` directly), so windowing this slice
+  // alone doesn't disturb them.
+  const viewportPx = containerRef.current?.clientHeight || DEFAULT_VIEWPORT_PX;
+  // Below the threshold, render every row (no window) — see VIRTUALIZE_MIN_ROWS.
+  const { start, end } =
+    rows.length > VIRTUALIZE_MIN_ROWS
+      ? ingestRowWindow(rows.length, scrollTop, viewportPx, ROW_HEIGHT, OVERSCAN)
+      : { start: 0, end: rows.length };
+  const windowRows = rows.slice(start, end);
+  const topSpacerPx = start * ROW_HEIGHT;
+  const bottomSpacerPx = (rows.length - end) * ROW_HEIGHT;
+
+  const toggleOpen = useCallback((pathKey: string) => {
+    const set = collapsedKeysRef.current;
+    if (set.has(pathKey)) set.delete(pathKey);
+    else set.add(pathKey);
+    forceUpdate();
+  }, []);
+
+  const revealMore = useCallback((parentPathKey: string) => {
+    const m = revealedRef.current;
+    m.set(parentPathKey, (m.get(parentPathKey) ?? CHILD_CAP) + CHILD_CAP);
+    forceUpdate();
+  }, []);
+
+  // A4 (D8) — every root-group member, rebuilt each render straight from
+  // `rootGroups.groups()` (never from the id string — see `buildRootMembers`'s
+  // doc comment). `handleActivateRoot` is the ONE choke point a double-click
+  // on an inactive member row goes through, shared with the asset-browser's
+  // scene double-click (`DefaultEditorLayout.tsx`'s `handleOpenScene`) via
+  // `requestRootActivation` so the dirty-gate/confirmation UX can't drift
+  // between the two call sites.
+  const rootMembers = buildRootMembers(adapter);
+  const handleActivateRoot = useCallback(
+    (groupId: string, rootId: string) => {
+      requestRootActivation(adapter, groupId, rootId);
+    },
+    [adapter],
+  );
+
+  const selectedIds = new Set(adapter.selection?.get() ?? []);
+
+  const handleRowClick = useCallback(
+    (e: React.MouseEvent, nodeId: string) => {
+      if (!adapter.selection) return;
+      if (e.metaKey || e.ctrlKey) {
+        const ids = new Set(selectedIds);
+        if (ids.has(nodeId)) ids.delete(nodeId);
+        else ids.add(nodeId);
+        adapter.selection.set([...ids]);
+      } else if (e.shiftKey && lastClickedRef.current) {
+        const lastIdx = rows.findIndex((r) => r.node.id === lastClickedRef.current);
+        const curIdx = rows.findIndex((r) => r.node.id === nodeId);
+        if (lastIdx >= 0 && curIdx >= 0) {
+          const start = Math.min(lastIdx, curIdx);
+          const end = Math.max(lastIdx, curIdx);
+          const rangeIds = rows
+            .slice(start, end + 1)
+            .filter((r) => !r.more)
+            .map((r) => r.node.id);
+          adapter.selection.set(rangeIds);
+        }
+      } else {
+        adapter.selection.set([nodeId]);
+      }
+      lastClickedRef.current = nodeId;
+    },
+    [adapter, rows, selectedIds],
+  );
+
+  const handleRowDragStart = useCallback(
+    (e: React.DragEvent, nodeId: string) => {
+      const ids = selectedIds.has(nodeId) ? [...selectedIds] : [nodeId];
+      setDraggedIds(ids);
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData(REORDER_MIME, JSON.stringify(ids));
+      e.dataTransfer.setData('text/plain', nodeId);
+    },
+    [selectedIds],
+  );
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      const isInternal = e.dataTransfer.types.includes(REORDER_MIME);
+      const isAsset = e.dataTransfer.types.includes(ASSET_MIME);
+      if (!isInternal && !isAsset) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = isInternal ? 'move' : 'copy';
+
+      const rect = containerRef.current!.getBoundingClientRect();
+      const scrollTop = containerRef.current!.scrollTop;
+      const y = e.clientY - rect.top + scrollTop;
+      const rowIndex = Math.floor(y / ROW_HEIGHT);
+
+      if (rowIndex >= rows.length) {
+        setDropTarget(null);
+        setTailDrop(true);
+        return;
+      }
+      setTailDrop(false);
+
+      const row = rows[rowIndex]!;
+      if (row.more) {
+        setDropTarget(null);
+        return;
+      }
+      const rowY = y - rowIndex * ROW_HEIGHT;
+      let zone: DropZone;
+      if (rowY < ROW_HEIGHT * 0.25) zone = 'before';
+      else if (rowY > ROW_HEIGHT * 0.75) zone = 'after';
+      else zone = 'child';
+
+      if (isInternal && draggedIds) {
+        const targetId = row.node.id;
+        if (draggedIds.includes(targetId)) return;
+        if (isDescendantOfAny(targetId, draggedIds, adapter)) return;
+      }
+      if (isCompositeGroupNode(adapter, row.node.id) && zone !== 'child') {
+        // A composite world-group row has no siblings of its own kind to
+        // reorder against — only "drop into this world" makes sense.
+        zone = 'child';
+      }
+
+      setDropTarget({ nodeId: row.node.id, zone });
+    },
+    [rows, draggedIds, adapter],
+  );
+
+  const handleDragEnd = useCallback(() => {
+    setDropTarget(null);
+    setTailDrop(false);
+    setDraggedIds(null);
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const currentDropTarget = dropTarget;
+      const isTail = tailDrop;
+      setDropTarget(null);
+      setTailDrop(false);
+      setDraggedIds(null);
+
+      const structure = adapter.structure;
+
+      // Internal reorder/reparent.
+      const reorderData = e.dataTransfer.getData(REORDER_MIME);
+      if (reorderData && structure) {
+        const ids = JSON.parse(reorderData) as string[];
+        if (isTail) {
+          for (const id of ids) structure.reparent(id, null);
+          return;
+        }
+        if (!currentDropTarget) return;
+        const targetRow = rows.find((r) => r.node.id === currentDropTarget.nodeId);
+        if (!targetRow) return;
+        const targetId = targetRow.node.id;
+        if (currentDropTarget.zone === 'child') {
+          for (const id of ids) structure.reparent(id, targetId);
+          return;
+        }
+        const targetParentId = targetRow.node.parentId;
+        const siblings = siblingIdsOf(adapter, targetParentId).filter((id) => !ids.includes(id));
+        const idx = siblings.indexOf(targetId);
+        const beforeSiblingId =
+          currentDropTarget.zone === 'before'
+            ? targetId
+            : idx >= 0
+              ? (siblings[idx + 1] ?? null)
+              : null;
+        for (const id of ids) {
+          const currentParentId = adapter.hierarchy.node(id)?.parentId ?? null;
+          if (currentParentId !== targetParentId) structure.reparent(id, targetParentId ?? null);
+          structure.reorder?.(id, beforeSiblingId);
+        }
+        return;
+      }
+
+      // External asset drop.
+      const assetData = e.dataTransfer.getData(ASSET_MIME);
+      if (assetData && adapter.assetDrop) {
+        try {
+          const data = JSON.parse(assetData) as { path: string; kind: string };
+          if (data.kind === 'scene') return; // scene-file drop: A4/deferred, not this shell's job
+          if (isTail) {
+            if (adapter.assetDrop.accepts('', data.path)) adapter.assetDrop.drop('', data.path);
+            return;
+          }
+          if (!currentDropTarget) return;
+          const targetRow = rows.find((r) => r.node.id === currentDropTarget.nodeId);
+          if (!targetRow) return;
+          const targetId = targetRow.node.id;
+          if (adapter.assetDrop.accepts(targetId, data.path))
+            adapter.assetDrop.drop(targetId, data.path);
+        } catch {
+          /* ignore malformed drag payload */
+        }
+      }
+    },
+    [dropTarget, tailDrop, rows, adapter],
+  );
+
+  const panelName = adapter.persistence?.destination ?? 'Untitled';
+
+  return (
+    <Panel
+      name={
+        <span data-testid="scene-name" data-scene={panelName}>
+          {panelName}
+        </span>
+      }
+      onPointerDown={() => setActiveScope('hierarchy')}
+      onDragOver={(e) => {
+        if (e.dataTransfer.types.includes(ASSET_MIME)) {
+          e.preventDefault();
+          e.dataTransfer.dropEffect = 'copy';
+        }
+      }}
+      style={{ width: 240, borderRight: '1px solid #333' }}
+    >
+      <OverlayReportBanner />
+      <div
+        style={{
+          padding: '4px 8px',
+          borderBottom: '1px solid #333',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 4,
+          flexShrink: 0,
+        }}
+      >
+        <input
+          type="text"
+          data-testid="ingest-search"
+          placeholder="Search..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          style={{
+            flex: 1,
+            minWidth: 0,
+            background: '#1e1e1e',
+            border: '1px solid #333',
+            borderRadius: 3,
+            color: '#c5c8ce',
+            fontSize: 11,
+            padding: '3px 6px',
+            outline: 'none',
+          }}
+        />
+        <CreateMenu adapter={adapter} parentId={null} />
+      </div>
+
+      <div
+        ref={containerRef}
+        data-testid="ingest-hierarchy"
+        style={{
+          flex: 1,
+          minHeight: 0,
+          overflow: 'auto',
+          position: 'relative',
+          pointerEvents: 'auto',
+        }}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+        onDragEnd={handleDragEnd}
+        onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
+        onDragLeave={(e) => {
+          if (!containerRef.current?.contains(e.relatedTarget as Node)) {
+            setDropTarget(null);
+            setTailDrop(false);
+          }
+        }}
+      >
+        <div data-testid="game-hierarchy-spacer-top" style={{ height: topSpacerPx }} />
+        {windowRows.map((row) =>
+          row.more ? (
+            <MoreRow key={ingestRowKey(row)} row={row} onReveal={revealMore} />
+          ) : (
+            <Row
+              key={ingestRowKey(row)}
+              row={row}
+              adapter={adapter}
+              store={store}
+              isSelected={selectedIds.has(row.node.id)}
+              isEditing={editingId === row.node.id}
+              isCollapsed={collapsedKeysRef.current.has(row.pathKey)}
+              dropZone={dropTarget && dropTarget.nodeId === row.node.id ? dropTarget.zone : null}
+              isDragged={draggedIds?.includes(row.node.id) ?? false}
+              rootMember={rootMembers.get(row.node.id)}
+              searchTerm={term}
+              onToggleOpen={toggleOpen}
+              onStartEditing={setEditingId}
+              onContextMenu={(e, id) => setContextMenu({ x: e.clientX, y: e.clientY, nodeId: id })}
+              onDragStart={handleRowDragStart}
+              onClick={handleRowClick}
+              onActivateRoot={handleActivateRoot}
+            />
+          ),
+        )}
+        <div data-testid="game-hierarchy-spacer-bottom" style={{ height: bottomSpacerPx }} />
+        <div style={{ minHeight: 40 }} />
+        {tailDrop && (
+          <div
+            style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: rows.length * ROW_HEIGHT,
+              height: 2,
+              background: '#579EFF',
+              pointerEvents: 'none',
+              zIndex: 10,
+            }}
+          />
+        )}
+      </div>
+
+      {contextMenu &&
+        (() => {
+          const menuNode = adapter.hierarchy.node(contextMenu.nodeId);
+          // A4 (D8): a root-group member or the game root gets the same
+          // "no structural affordances" treatment as an existing composite
+          // group row — none of the three own a name/visible/locked path or
+          // a meaningful Create/Duplicate/Delete target.
+          const isGroupNode = menuNode
+            ? isCompositeGroupNode(adapter, menuNode.id) ||
+              isGameRootNode(adapter, menuNode.id) ||
+              rootMembers.has(menuNode.id)
+            : false;
+          return (
+            <ContextMenu
+              state={contextMenu}
+              adapter={adapter}
+              store={store}
+              isGroupNode={isGroupNode}
+              onRename={setEditingId}
+              onClose={() => setContextMenu(null)}
+            />
+          );
+        })()}
+    </Panel>
+  );
+}