@vgai/editor 0.2.0

package/src/components/InspectorToolSection.tsx

@@ -0,0 +1,74 @@
+/**
+ * Inspector-tool section host (W3, docs/DATA-TOOLS-DESIGN.md §3.2/§3.4) —
+ * renders one project tool (`placement: 'inspector'`) as a section in the
+ * ONE inspector shell (`Inspector.tsx`), via `inspector-section-registry`.
+ *
+ * The chrome is the editor's (§3.4): a bordered section with the ⚙-marked
+ * title row (the same project-tool marker the dock tabs use, §3.5), matching
+ * the shell's own section styling (`Inspector.tsx`'s Stories block). What the
+ * tool renders inside is its own business — plain React, ideally built from
+ * `@editor/widgets` so fields sit flush with the built-in sections.
+ *
+ * Crash containment mirrors the dock (`ToolHost.tsx`, shared boundary): a
+ * throwing tool component swaps THIS section for a teaching message; the
+ * rest of the inspector, and every other tool, keep working. The loader
+ * re-registers a fresh registration per (re)load, so an HMR save remounts
+ * the section and clears a tripped boundary for free.
+ *
+ * W3.1 (§3.3): the tool render is wrapped in `EditorSelectionProvider`, INSIDE
+ * the error boundary, so `useSelection()` works for any inspector tool
+ * without adding to `InspectorToolProps` — richer data arrives through hooks,
+ * not more props. Dock tools get no such provider (`ToolHost`/`BottomPanel`
+ * have no adapter/selection in scope) — `useSelection` there throws a
+ * teaching error, contained the same way a render crash is.
+ */
+
+import type { AuthoringAdapter } from '@engine/adapter';
+import { EditorSelectionProvider } from '@engine/react/use-selection';
+import type { InspectorToolProps } from '@engine/tools/define-tool';
+import type { ComponentType } from 'react';
+import { ToolErrorBoundary } from './ToolHost';
+
+export interface InspectorToolSectionProps {
+  /** `ToolConfig.id` — the section's `data-testid` suffix (`inspector-tool-<id>`). */
+  id: string;
+  /** `ToolConfig.title` — the section header, after the ⚙ marker. */
+  title: string;
+  /** Project-relative source file, shown in crash/teaching messages. */
+  file: string;
+  /** The tool module's default export. */
+  Component: ComponentType<InspectorToolProps>;
+  /** Live adapter + selection, as the section registry hands them over. */
+  adapter: AuthoringAdapter;
+  nodeId: string | null;
+}
+
+/** One inspector tool's section: editor-styled chrome + boundary + the tool. */
+export function InspectorToolSection({
+  id,
+  title,
+  file,
+  Component,
+  adapter,
+  nodeId,
+}: InspectorToolSectionProps) {
+  const node = nodeId ? adapter.hierarchy.node(nodeId) : null;
+  return (
+    <div
+      data-testid={`inspector-tool-${id}`}
+      style={{ padding: '8px', borderTop: '1px solid #333', marginTop: 4 }}
+    >
+      <div style={{ fontSize: 11, fontWeight: 600, color: '#9aa0a6', marginBottom: 4 }}>
+        <span aria-hidden="true" style={{ marginRight: 4 }}>
+          ⚙
+        </span>
+        {title}
+      </div>
+      <ToolErrorBoundary file={file}>
+        <EditorSelectionProvider adapter={adapter} nodeId={nodeId}>
+          <Component node={node} nodeId={nodeId} />
+        </EditorSelectionProvider>
+      </ToolErrorBoundary>
+    </div>
+  );
+}

package/src/components/MountFailureBanner.tsx

@@ -0,0 +1,110 @@
+/**
+ * D-W3 (docs/WAVE4-FTUE-HARDENING-DESIGN.md §D-W3, F9) — the loud, dismissible
+ * banner for `../authoring/mount-failure-report.ts`'s slot: a manifest world's
+ * auto-launch route failed to mount at all. Styled after
+ * `./OverlayReportBanner.tsx` (same dark-theme inline-style precedent, same
+ * "no window.prompt() — inline React components only" CLAUDE.md rule), but
+ * rendered at a DIFFERENT altitude: `OverlayReportBanner` lives INSIDE
+ * `GameHierarchy` (A2 — formerly `IngestHierarchy`), which self-gates by
+ * simply having nothing to report (`getActiveOverlayReport()` returns null)
+ * when no ingest/overlay session is active — i.e. only visible AFTER a
+ * successful mount. This banner is the opposite case (mount never happened
+ * at all, so there is no override, no live overlay report — just the default
+ * Untitled scene the editor falls back to), and is mounted by
+ * `DefaultEditorLayout` OUTSIDE `GameHierarchy` so it shows over that default
+ * scene instead of never rendering.
+ *
+ * D-V5 (docs/WAVE5-MULTIWORLD-INGEST-DESIGN.md, F24 composite): the slot
+ * behind this banner is now an ORDERED LIST
+ * (`getMountFailureReports`) — a composite manifest's sibling-mount loop can
+ * fail several worlds independently in one attempt, and silently showing
+ * only the latest would be the exact F9 anti-pattern this banner exists to
+ * close. This renders EVERY entry, each its own worldId-labelled
+ * summary/message pair, inside the SAME single banner (one `data-testid`,
+ * one dismiss button that clears the whole list via `setMountFailureReport
+ * (null)` — same back-compat-frozen semantics `mount-failure-report.ts`
+ * documents) — never a separate banner per world.
+ */
+
+import { useReducer, useSyncExternalStore } from 'react';
+import { getMountFailureReports, setMountFailureReport } from '../authoring/mount-failure-report';
+import { useEditorStore } from '../EditorContext';
+
+export function MountFailureBanner() {
+  const store = useEditorStore();
+  // Re-render off the SAME broadcast every manifest route already fires right
+  // after a mount attempt (`store.notifyIngestEdit()`) — mirrors
+  // `OverlayReportBanner`'s identical comment; the failure slot itself has no
+  // subscribe of its own.
+  useSyncExternalStore(store.subscribe, store.getSnapshot);
+  const reports = getMountFailureReports();
+  // Unlike `OverlayReportBanner` (which tracks a local "dismissed for this
+  // gameId" flag and leaves the underlying overlay-report slot untouched),
+  // dismiss here CLEARS the actual `mount-failure-report.ts` slot — the
+  // failure is a one-shot, single-session event (there is no re-check to
+  // "come back" from the way an overlay report re-evaluates every mount), so
+  // there is nothing for a local-only dismiss to hide that a fresh mount
+  // attempt wouldn't already overwrite anyway. Clearing the slot needs its
+  // own re-render trigger (mutating the module singleton doesn't itself
+  // schedule one) — a plain counter bump.
+  const [, forceRerender] = useReducer((n: number) => n + 1, 0);
+
+  if (reports.length === 0) return null;
+
+  return (
+    <div
+      data-testid="mount-failure-banner"
+      style={{
+        background: '#4a1f1f',
+        border: '1px solid #8a2f2f',
+        color: '#f0a0a0',
+        borderRadius: 3,
+        margin: '4px 8px',
+        padding: '6px 8px',
+        fontSize: 11,
+        pointerEvents: 'auto',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 6 }}>
+        <span style={{ flex: 1 }}>
+          {reports.map((report) => (
+            <div key={report.worldId} style={{ marginBottom: 4 }}>
+              <div data-testid="mount-failure-summary">
+                <strong>
+                  "{report.worldId}" ({report.kind} / {report.identity}) failed to mount.
+                </strong>
+              </div>
+              <div
+                data-testid="mount-failure-message"
+                style={{ marginTop: 2, wordBreak: 'break-word' }}
+              >
+                {report.message}
+              </div>
+            </div>
+          ))}
+          <div style={{ marginTop: 2, opacity: 0.8 }}>See the Console tab for the full trace.</div>
+        </span>
+        <button
+          type="button"
+          data-testid="mount-failure-dismiss"
+          onClick={() => {
+            setMountFailureReport(null);
+            forceRerender();
+          }}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: '#f0a0a0',
+            cursor: 'pointer',
+            fontSize: 13,
+            lineHeight: 1,
+            padding: 0,
+          }}
+          aria-label="Dismiss"
+        >
+          ×
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/NetworkSection.tsx

@@ -0,0 +1,109 @@
+/**
+ * Network inspector overlay — reads the active game's `NetworkingAdapter`
+ * (`SystemAdapters.networking`, widened in T2.2) through the authoring seam
+ * (`getActiveNetworking()`) and renders connection state / room info /
+ * replication stats. Mirrors `StatsOverlay`'s poll-and-render pattern; also
+ * subscribes to the adapter's own change notifications for snappier updates.
+ *
+ * Editor code never imports Colyseus here — only the `NetworkingAdapter`
+ * interface, per the adapter-seam rule (root CLAUDE.md).
+ *
+ * Renders nothing when no `NetworkingAdapter` is active — single-player
+ * games register none. Games contribute one via
+ * `ctx.registerSystemAdapter?.('networking', …)` (the arena example is the
+ * first-party reference — `third-person-arena/network-adapter.ts`).
+ */
+
+import type {
+  ConnectionState,
+  NetworkingAdapter,
+  ReplicationStats,
+  RoomInfo,
+} from '@engine/adapter';
+import { useEffect, useState } from 'react';
+import { getActiveNetworking } from '../authoring/active-systems';
+
+export interface NetworkView {
+  connectionState: ConnectionState;
+  roomInfo: RoomInfo | null;
+  stats: ReplicationStats;
+}
+
+/**
+ * Pure data-path function: adapter → view model. No React/DOM — this is the
+ * part covered by a headless unit test (`network-section-view.test.ts`).
+ */
+export function deriveNetworkView(
+  adapter: NetworkingAdapter | null | undefined,
+): NetworkView | null {
+  if (!adapter) return null;
+  return {
+    connectionState: adapter.getConnectionState(),
+    roomInfo: adapter.getRoomInfo(),
+    stats: adapter.getReplicationStats(),
+  };
+}
+
+const STATE_COLORS: Record<ConnectionState, string> = {
+  disconnected: '#8c8c8c',
+  connecting: '#e0a030',
+  connected: '#4caf50',
+  error: '#e05050',
+};
+
+export function NetworkSection() {
+  const [view, setView] = useState<NetworkView | null>(() =>
+    deriveNetworkView(getActiveNetworking()),
+  );
+
+  useEffect(() => {
+    const tick = () => setView(deriveNetworkView(getActiveNetworking()));
+    tick();
+    // Poll — covers the active adapter's IDENTITY changing (a new game
+    // mounts/unmounts) — plus a direct subscription to the current adapter
+    // for snappier updates while it stays active.
+    const intervalId = setInterval(tick, 250);
+    const unsubscribe = getActiveNetworking()?.subscribe(tick);
+    return () => {
+      clearInterval(intervalId);
+      unsubscribe?.();
+    };
+  }, []);
+
+  if (!view) return null;
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 48,
+        left: 8,
+        background: 'rgba(0, 0, 0, 0.7)',
+        borderRadius: 4,
+        padding: '6px 10px',
+        pointerEvents: 'auto',
+        fontSize: 11,
+        color: '#c5c8ce',
+        fontFamily: 'monospace',
+        lineHeight: '16px',
+      }}
+    >
+      <div>
+        Net:{' '}
+        <span style={{ color: STATE_COLORS[view.connectionState] }}>{view.connectionState}</span>
+      </div>
+      {view.roomInfo && (
+        <>
+          <div>
+            Room: {view.roomInfo.roomName} ({view.roomInfo.roomId})
+          </div>
+          <div>Session: {view.roomInfo.sessionId}</div>
+        </>
+      )}
+      <div>Entities: {view.stats.entities}</div>
+      <div>
+        In/Out: {view.stats.msgsInPerSec}/s / {view.stats.msgsOutPerSec}/s
+      </div>
+    </div>
+  );
+}