@vgai/editor 0.2.0

package/src/components/ViewportPanel.tsx

@@ -0,0 +1,369 @@
+import { type RenderScope, resolveRenderSettings } from '@engine/render/render-settings';
+import { applyRendererSettings, applyScenePostProcessing } from '@engine/setup/setup-renderer';
+import { EffectComposer } from 'postprocessing';
+import { useEffect, useRef, useSyncExternalStore } from 'react';
+import * as THREE from 'three';
+import type { CompositeAuthoringAdapter } from '../authoring/composite-authoring-adapter';
+import { mountDesignTimeLayers } from '../authoring/design-time-layers';
+import {
+  EDIT_MODE_REBUILD_EVENT,
+  exitEditModeAuthoring,
+  installEditModeAuthoringForProject,
+} from '../authoring/edit-mode-authoring';
+import { collectState } from '../command-listener';
+import { useEditorStats, useEditorStore } from '../EditorContext';
+import { reportEditorState } from '../editor-api';
+import { connectServerLogs, editorConsole } from '../editor-console';
+import { registerEditorHotkeys } from '../editor-hotkeys';
+import { getEditorMode } from '../editor-mode';
+import type { EditorStore } from '../editor-store';
+import { EditorViewport } from '../editor-viewport';
+import { autoLaunchIngestFromURL, bindIngestMode } from '../ingest-mode';
+import { loadInitialScene } from '../initial-scene';
+import { setupNavMeshHandlers } from '../navmesh-handler';
+import { bindPlayMode } from '../play-mode';
+import { resolvePreviewBoneAttachments } from '../scene-sync';
+import { CameraInfo } from './CameraInfo';
+import { CommandPalette } from './CommandPalette';
+import { NetworkSection } from './NetworkSection';
+import { PlayBar } from './PlayBar';
+import { StatsOverlay } from './StatsOverlay';
+import { ToolStrip } from './Toolbar';
+import { ViewportOverlay } from './ViewportOverlay';
+import { WorldSelectionOverlay } from './WorldSelectionOverlay';
+
+function tickEditorAnimations(objectMap: Map<string, THREE.Object3D>, dt: number): void {
+  resolvePreviewBoneAttachments(objectMap);
+  for (const obj of objectMap.values()) {
+    const mixer = obj.userData['_animMixer'] as THREE.AnimationMixer | undefined;
+    if (mixer) mixer.update(dt);
+  }
+}
+
+function buildEntityTagMap(store: EditorStore): Map<string, string[]> {
+  const tagMap = new Map<string, string[]>();
+  for (const e of store.allEntities()) {
+    if (e.id && e.tags && e.tags.length > 0) tagMap.set(e.id, e.tags);
+  }
+  return tagMap;
+}
+
+export function ViewportPanel() {
+  const store = useEditorStore();
+  const stats = useEditorStats();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current!;
+    const container = containerRef.current!;
+
+    // --- Renderer ---
+    // antialias is reload-only (renderer construction); shadows/resolutionScale
+    // are live and re-applied in rebuildComposer when the environment changes.
+    const rendering = store.environment?.rendering as RenderScope | undefined;
+    const renderer = new THREE.WebGLRenderer({
+      canvas,
+      antialias: Boolean(resolveRenderSettings(rendering)['antialias']),
+    });
+    applyRendererSettings(renderer, rendering, window.devicePixelRatio);
+    renderer.setSize(Math.max(1, container.clientWidth), Math.max(1, container.clientHeight));
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+    renderer.toneMapping = THREE.NoToneMapping;
+
+    // --- Post-processing ---
+    const composer = new EffectComposer(renderer);
+
+    // --- Scene ---
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0xaaaaaa);
+
+    // --- Bind store to scene ---
+    store.bindScene(scene, renderer);
+
+    // --- Viewport ---
+    const viewport = new EditorViewport(canvas, scene, store);
+    // Bind the REAL viewport camera + orbit target so store.cameraPose (the
+    // `editor.viewport.camera.get` facet, see command-listener.ts's
+    // collectState) and the thumbnail-capture path read live data instead of
+    // null — previously bindScene's `camera` param was never passed here, so
+    // `store.cameraPose` (and _captureThumbnail's camera read) stayed dark.
+    store.bindScene(scene, renderer, viewport.batchedRenderer, viewport.camera);
+    store.setOrbitTarget(viewport.orbitControls.target);
+    // DEV/e2e hook: lets the per-game feature matrix assert the viewport camera
+    // reframes (view presets / focus / orbit) on an ingested scene.
+    if (import.meta.env.DEV) {
+      (window as unknown as Record<string, unknown>)['__vgaiViewport'] = viewport;
+    }
+
+    // --- Composer rebuild ---
+    function rebuildComposer(): void {
+      // Re-apply live renderer settings (shadows, resolutionScale) so env edits
+      // take effect; the post-processing master switch is handled inside
+      // applyScenePostProcessing via env.rendering.
+      applyRendererSettings(
+        renderer,
+        store.environment?.rendering as RenderScope | undefined,
+        window.devicePixelRatio,
+      );
+      applyScenePostProcessing(
+        composer,
+        renderer,
+        store.scene ?? scene,
+        viewport.camera,
+        store.environment,
+        store.objectMap,
+        buildEntityTagMap(store),
+      );
+    }
+
+    // --- Store subscription → sync viewport ---
+    // Rebuild the post-processing chain only when its inputs actually change
+    // (environment / scene structure / play-stop swap), tracked by composerVersion.
+    // Previously this ran on EVERY notify, so a gizmo drag — which notifies once
+    // per pointer-move — reconstructed every EffectPass and recompiled shaders
+    // 60×/s, causing severe stutter on any scene with post effects enabled.
+    let lastComposerVersion = store.composerVersion;
+    const unsubStore = store.subscribe(() => {
+      // Swap viewport scene if the store's scene changed (play mode enter/exit)
+      const storeScene = store.scene;
+      if (storeScene && storeScene !== viewport.currentScene) {
+        viewport.setScene(storeScene);
+      }
+      viewport.objectMap = store.objectMap;
+      viewport.syncFromStore();
+      if (store.composerVersion !== lastComposerVersion) {
+        lastComposerVersion = store.composerVersion;
+        rebuildComposer();
+      }
+    });
+
+    // --- Viewport action subscription ---
+    const unsubActions = store.onViewportAction((action) => {
+      switch (action.type) {
+        case 'focus-entity': {
+          const obj = store.objectMap.get(action.id);
+          if (obj) viewport.focusOn(obj);
+          break;
+        }
+        case 'focus-selection': {
+          const objects = [...store.selectedEntityIds]
+            .map((id) => store.objectMap.get(id))
+            .filter((o): o is THREE.Object3D => o !== undefined);
+          viewport.focusOnMultiple(objects);
+          break;
+        }
+        case 'set-view-preset':
+          viewport.setViewPreset(action.preset);
+          break;
+        case 'set-camera-pose':
+          viewport.setPose(action.position, action.target, action.fov);
+          break;
+      }
+    });
+
+    // --- Hotkeys ---
+    const unregisterHotkeys = registerEditorHotkeys(store, viewport, canvas);
+
+    // --- NavMesh ---
+    const disposeNavMesh = setupNavMeshHandlers(store, viewport, scene);
+
+    // --- Play-mode ---
+    bindPlayMode({ store, getViewportCamera: () => viewport.camera });
+    bindIngestMode(store);
+
+    // --- Error capture → editor console ---
+    const onError = (e: ErrorEvent) => {
+      editorConsole.error(e.message || String(e.error), 'runtime');
+    };
+    const onUnhandledRejection = (e: PromiseRejectionEvent) => {
+      editorConsole.error(`Unhandled promise rejection: ${e.reason}`, 'runtime');
+    };
+    window.addEventListener('error', onError);
+    window.addEventListener('unhandledrejection', onUnhandledRejection);
+
+    // --- Server logs ---
+    connectServerLogs();
+
+    // --- Resize ---
+    const resizeObserver = new ResizeObserver(() => {
+      // Docking, HMR, and tab switches can briefly collapse the panel to 0x0.
+      // Three's EffectComposer allocates incomplete render targets at that
+      // size, then floods the console when the shared RAF renders the frame.
+      const w = Math.max(1, container.clientWidth);
+      const h = Math.max(1, container.clientHeight);
+      renderer.setSize(w, h);
+      composer.setSize(w, h);
+      viewport.resize(w, h);
+    });
+    resizeObserver.observe(container);
+
+    // --- RAF loop ---
+    let lastTime = performance.now();
+    let rafId = 0;
+
+    function animate(): void {
+      rafId = requestAnimationFrame(animate);
+      const now = performance.now();
+      stats.frameTime = now - lastTime;
+      stats.fps = 1000 / stats.frameTime;
+      const dt = stats.frameTime / 1000;
+      lastTime = now;
+
+      viewport.update(dt);
+      if (store.playState === 'stopped') {
+        tickEditorAnimations(store.objectMap, dt);
+      }
+      viewport.batchedRenderer.update(dt);
+      composer.render(dt);
+      viewport.renderViewCube(renderer);
+      viewport.renderCameraPreview(renderer);
+
+      stats.drawCalls = renderer.info.render.calls;
+      stats.triangles = renderer.info.render.triangles;
+
+      // Update camera info for CameraInfo panel
+      const cam = viewport.camera.position;
+      const tgt = viewport.orbitControls.target;
+      stats.cameraPosition.x = cam.x;
+      stats.cameraPosition.y = cam.y;
+      stats.cameraPosition.z = cam.z;
+      stats.cameraTarget.x = tgt.x;
+      stats.cameraTarget.y = tgt.y;
+      stats.cameraTarget.z = tgt.z;
+    }
+
+    // --- Start rendering, then load the initial scene ---
+    // loadInitialScene must run after bindScene so store._scene is set
+    // and _rebuildScene can populate the entity tree.
+    viewport.objectMap = store.objectMap;
+    viewport.syncFromStore();
+    rebuildComposer();
+    animate();
+    // `disposed` guards the unmount-during-fetch race: if cleanup runs before
+    // the manifest fetch resolves, tear the just-installed composite down
+    // immediately (and never let a late-resolving install leave a stale
+    // override behind).
+    let disposed = false;
+    let editModeComposite: CompositeAuthoringAdapter | undefined;
+    let disposeDesignTimeLayers: (() => void) | undefined;
+
+    /**
+     * (A1) fetch `vgai.game.json` and install the edit-mode composite over
+     * every declared world, then (B1) composite every OTHER declared world's
+     * design-time layer into THIS SAME container (the threejs canvas above
+     * keeps its existing slot, untouched). Callable more than once: the
+     * initial mount (below) AND (C3) the `'editor:edit-mode-rebuild'`
+     * listener — e.g. after the "Add UI Canvas" hierarchy-menu action seeds
+     * the scene's first `ui` root, the composite needs rebuilding so its new
+     * scene-UI child appears. Tears down any PREVIOUS edit-mode session
+     * first, so a rebuild never leaks the old composite/layers.
+     */
+    async function installAll(): Promise<void> {
+      disposeDesignTimeLayers?.();
+      disposeDesignTimeLayers = undefined;
+      if (editModeComposite) {
+        exitEditModeAuthoring(editModeComposite);
+        editModeComposite = undefined;
+      }
+      const composite = await installEditModeAuthoringForProject(store);
+      editModeComposite = composite;
+      if (disposed) {
+        exitEditModeAuthoring(composite);
+        editModeComposite = undefined;
+        return;
+      }
+      disposeDesignTimeLayers = mountDesignTimeLayers(container, composite, store);
+    }
+
+    function onEditModeRebuild(): void {
+      void installAll();
+    }
+    window.addEventListener(EDIT_MODE_REBUILD_EVENT, onEditModeRebuild);
+
+    // Load the scene, then install the edit-mode composite — BEFORE the
+    // ?ingest= auto-launch below, so a later ingest override always wins the
+    // shared active-authoring slot deterministically (never raced by this
+    // fetch). Then (if the URL carries ?ingest=<id>) auto-launch that
+    // unmodified game so the ingest flow is drivable from a plain hosted link.
+    loadInitialScene(store)
+      .then(() => {
+        // B3-followup fix: `connectCommandListener`'s ONE-TIME initial
+        // `reportEditorState` (EditorContext.tsx's mount effect) fires before
+        // this scene finishes loading — command-listener.ts otherwise only
+        // re-reports state after a RELAYED COMMAND, so `editor.hierarchy.
+        // inspect`/`editor.viewport.camera.get` would see a stale, empty
+        // entityCount/no-camera snapshot forever if no command happens to be
+        // sent first. Report once more right after the scene (and thus the
+        // camera binding just above) is actually ready — a real state
+        // transition, not a fabricated poke. No-ops harmlessly in browser
+        // mode (no server to receive it — reportEditorState is best-effort).
+        if (getEditorMode() !== 'browser') reportEditorState(collectState(store));
+      })
+      .then(() => installAll())
+      .then(() => autoLaunchIngestFromURL(store));
+
+    // --- Cleanup ---
+    return () => {
+      disposed = true;
+      cancelAnimationFrame(rafId);
+      resizeObserver.disconnect();
+      unsubStore();
+      unsubActions();
+      unregisterHotkeys();
+      disposeNavMesh();
+      window.removeEventListener(EDIT_MODE_REBUILD_EVENT, onEditModeRebuild);
+      disposeDesignTimeLayers?.();
+      exitEditModeAuthoring(editModeComposite);
+      window.removeEventListener('error', onError);
+      window.removeEventListener('unhandledrejection', onUnhandledRejection);
+      viewport.dispose();
+      // EffectComposer owns input/output WebGLRenderTargets + per-pass resources
+      // that renderer.dispose() does NOT free — dispose it to avoid leaking GPU
+      // render targets on unmount (incl. React StrictMode's mount/unmount/remount).
+      composer.dispose();
+      renderer.dispose();
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps -- runs once on mount
+
+  // Subscribe to store for overlay visibility
+  useSyncExternalStore(store.subscribe, store.getSnapshot);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        pointerEvents: 'auto',
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        data-testid="editor-canvas"
+        aria-hidden="true"
+        tabIndex={-1}
+        style={{ width: '100%', height: '100%', display: 'block', pointerEvents: 'auto' }}
+      />
+      {/* Spec 27 §3 A3 — mounted as a CHILD of THIS SAME containerRef div, the exact
+          DOM parent `mountDesignTimeLayers(container, …)` above appends each react/pixi
+          world's own `position:absolute; inset:0` layer into, so `RectProvider.rect(id)`'s
+          host-relative geometry lines up with this overlay's own coordinate space with no
+          correction (see WorldSelectionOverlay.tsx's own doc comment). Self-gates to a
+          no-op when the active composite has no rect-capable (DOM) child, so a 3D-only
+          project renders nothing extra here. */}
+      <WorldSelectionOverlay />
+      <PlayBar />
+      <ToolStrip />
+      <ViewportOverlay />
+      {store.showStats && <StatsOverlay />}
+      {store.playState !== 'stopped' && <NetworkSection />}
+      <CameraInfo />
+      {store.commandPaletteOpen && <CommandPalette onClose={() => store.closeCommandPalette()} />}
+    </div>
+  );
+}

package/src/components/WorldContextMenu.tsx

@@ -0,0 +1,257 @@
+/**
+ * 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,
+  );
+}