@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/status-contributions.tsx

@@ -0,0 +1,175 @@
+/**
+ * W4 (docs/EDITOR-WORKSPACE-SHELL-TODO.md §5/§9 W4) — the editor's core
+ * STATUS-BAR contributions (inventory rows H3/V9/V12 + the §4.1 mock's
+ * `0 errors | Play stopped | localhost:5187 … Board selected`):
+ *
+ *  - `save-status` (H3): moved out of the global command header. Success is
+ *    silent; `Unsaved` and `Save failed` appear when actionable (click
+ *    retries — the one deliberate command-shaped exception, kept because a
+ *    failed save's retry affordance must live where the failure is shown).
+ *  - `error-count` (V12's count half): the truthful problem signal that
+ *    exists today — the editor console's error count (scene-validation
+ *    failures, engine/server errors all land there). There is NO separate
+ *    Problems source (no in-editor typecheck surface), so no fabricated
+ *    `N problems` — see `core-utilities.tsx`'s recorded Problems decision.
+ *  - `play-state`: §4.1 "Play stopped" / "Playing" / "Paused".
+ *  - `connection` (V9): compact connection state WHILE a networking
+ *    adapter is active (the §5 rule) — detailed room/replication info
+ *    opens the Debugger's Network view.
+ *  - `selection` (right): concise selection summary ("Board selected",
+ *    "3 selected"), nothing when nothing is selected.
+ *
+ * `build-progress` (B4/B15) is registered by `build-documents.tsx` (server
+ * mode) — the W3 contribution this bar finally renders.
+ */
+
+import type { ConnectionState } from '@engine/adapter';
+import { useSyncExternalStore } from 'react';
+import { getActiveNetworking } from '../authoring/active-systems';
+import { useAvailabilityTick } from '../availability-tick';
+import { Button, themeVars } from '../design-system';
+import { useEditorStore } from '../EditorContext';
+import { editorConsole } from '../editor-console';
+import { createHmrRegistrationGroup } from '../hmr-registration-group';
+import { registerWorkspaceStatus } from '../workspace-status-registry';
+import { openDebuggerPanel } from './debugger-panel-state';
+import { SaveStatus } from './SaveStatus';
+
+/** Console error/warn counts — the truthful "problems" signal (module doc). */
+export function ErrorCountStatus() {
+  useSyncExternalStore(editorConsole.subscribe, editorConsole.getSnapshot);
+  const errors = editorConsole.counts.error;
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="compact"
+      className="vgai-status-action"
+      data-testid="status-error-count"
+      data-has-errors={errors > 0 || undefined}
+      onClick={() => window.dispatchEvent(new CustomEvent('editor:toggle-console'))}
+      title={
+        errors > 0
+          ? `${errors} console error${errors === 1 ? '' : 's'} — open the Console utility (\`)`
+          : 'No console errors'
+      }
+    >
+      {errors} error{errors === 1 ? '' : 's'}
+    </Button>
+  );
+}
+
+/** §4.1 play state ("Play stopped" quiet; running/paused colored). */
+export function PlayStateStatus() {
+  const store = useEditorStore();
+  useSyncExternalStore(store.subscribe, store.getSnapshot);
+  const state = store.playState;
+  const view = {
+    stopped: { label: 'Play stopped', color: themeVars.content.dim },
+    playing: { label: 'Playing', color: themeVars.semantic.success },
+    paused: { label: 'Paused', color: themeVars.semantic.warning },
+  }[state];
+  return (
+    <span data-testid="status-play-state" data-play-state={state} style={{ color: view.color }}>
+      {view.label}
+    </span>
+  );
+}
+
+/** Compact connection state while a NetworkingAdapter is active (V9);
+ *  renders nothing otherwise — single-player sessions register none. */
+export function ConnectionStatus() {
+  // W5: derived per render off the SHARED 250ms availability tick
+  // (`availability-tick.ts`), replacing this component's own interval.
+  useAvailabilityTick();
+  const state: ConnectionState | null = getActiveNetworking()?.getConnectionState() ?? null;
+  if (state === null) return null;
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="compact"
+      className="vgai-status-action"
+      data-testid="status-connection"
+      data-connection-state={state}
+      onClick={() => openDebuggerPanel('network')}
+      title="Network connection state — open Network diagnostics"
+    >
+      net: {state}
+    </Button>
+  );
+}
+
+/** Right-aligned concise selection summary (§4.1 "Board selected"). */
+export function SelectionStatus() {
+  const store = useEditorStore();
+  useSyncExternalStore(store.subscribe, store.getSnapshot);
+  const selected = store.selectedEntities;
+  if (selected.length === 0) return null;
+  const label =
+    selected.length === 1
+      ? `${selected[0]!.name ?? selected[0]!.id} selected`
+      : `${selected.length} selected`;
+  return (
+    <span data-testid="status-selection" style={{ color: themeVars.content.muted }}>
+      {label}
+    </span>
+  );
+}
+
+const registrationGroup = createHmrRegistrationGroup(import.meta.hot, 'core-status-contributions');
+
+/** Idempotent one-time registration of the core status contributions
+ *  (same ensure idiom as `ensureBuildContributionsRegistered`). */
+export function ensureCoreStatusContributionsRegistered(): void {
+  registrationGroup.ensure((track) => {
+    track(
+      registerWorkspaceStatus({
+        id: 'save-status',
+        align: 'left',
+        order: 0,
+        Content: SaveStatus,
+      }),
+    );
+    track(
+      registerWorkspaceStatus({
+        id: 'error-count',
+        align: 'left',
+        order: 10,
+        Content: ErrorCountStatus,
+      }),
+    );
+    track(
+      registerWorkspaceStatus({
+        id: 'play-state',
+        align: 'left',
+        order: 20,
+        Content: PlayStateStatus,
+      }),
+    );
+    track(
+      registerWorkspaceStatus({
+        id: 'connection',
+        align: 'left',
+        order: 30,
+        Content: ConnectionStatus,
+      }),
+    );
+    // `build-progress` (build-documents.tsx, server mode) registers with
+    // order 0/default and a later sequence, so it lands after `save-status`
+    // among the order-0 items — visually beside the session state it extends.
+    track(
+      registerWorkspaceStatus({
+        id: 'selection',
+        align: 'right',
+        order: 0,
+        Content: SelectionStatus,
+      }),
+    );
+  });
+}
+
+/** Test-only: allow re-registration after a registry reset. */
+export function __resetCoreStatusContributionsForTest(): void {
+  registrationGroup.reset();
+}

package/src/components/story-documents-register.ts

@@ -0,0 +1,15 @@
+/**
+ * W2 side-effect registration module (imported by `main.tsx` alongside the
+ * other contribution-seam imports): installs the story-scoped shell
+ * contributions — the Inspector `Story Args` section and the
+ * `Actions`/`Interactions` utilities — at editor boot, BEFORE the adapter
+ * inspector contributions register, so Story Args renders above the
+ * environment/entity sections while a story document is active (§4.2's
+ * Inspector layout). Kept separate from `story-documents.tsx` itself so unit
+ * tests can import that module without mutating shared registries
+ * (`ensureStoryContributionsRegistered` stays idempotent either way).
+ */
+
+import { ensureStoryContributionsRegistered } from './story-documents';
+
+ensureStoryContributionsRegistered();