@volter/editor-game 0.5.65

package/src/host/canvas-entry-runtime.ts

@@ -0,0 +1,95 @@
+/**
+ * Resolve the canvas entry adapter from the same module graph as project
+ * worlds — the `@pixi/react` sibling of `r3f-entry-runtime.ts`.
+ *
+ * The packaged editor's UI is prebuilt with its own React, `@pixi/react` and
+ * `pixi.js`, while project modules are transformed by a separate,
+ * project-rooted Vite server. Building a project component's adapter with the
+ * UI bundle's factory crosses those graphs: the reconciler's hooks and the
+ * component's hooks come from two Reacts, the tree never commits, and
+ * the canvas mount fails its own first-commit ceiling ten seconds
+ * later. See `../vite-plugin-module-doorways.ts` for the measured failure.
+ *
+ * `@volter/game-runtime/canvas-react` is dynamic-imported on BOTH branches, deliberately: a
+ * static import would put `pixi.js` and the Pixi reconciler in every editor
+ * bundle, including one opening a three-only project — the same reason the
+ * call sites this replaces were already dynamic.
+ */
+
+import type { resolveCanvasEntryAdapter } from '@volter/game-runtime/canvas-react';
+import type { RootAdapter } from '@volter/editor-project/adapter';
+import type * as PIXI from 'pixi.js';
+import { CANVAS_RUNTIME_PATH } from '@volter/editor-sdk/host';
+import { isPackagedRuntime } from '@volter/editor-core/packaged-runtime';
+
+type CanvasEntryResolver = typeof resolveCanvasEntryAdapter;
+
+/**
+ * The `pixi.js` module namespace a canvas surface constructs and class-checks
+ * with. Every editor-side collaborator of one mounted canvas world takes THIS,
+ * never a static import — see `../vite-plugin-module-doorways.ts` for the four
+ * measured failures a second namespace causes.
+ */
+export type CanvasPixiNamespace = typeof PIXI;
+
+interface PackagedCanvasRuntime {
+  readonly resolve: CanvasEntryResolver;
+  readonly projectPixi: CanvasPixiNamespace;
+}
+
+let cachedPackagedRuntime: Promise<PackagedCanvasRuntime> | null = null;
+
+async function packagedRuntime(): Promise<PackagedCanvasRuntime> {
+  const mod = (await import(/* @vite-ignore */ CANVAS_RUNTIME_PATH)) as {
+    resolveCanvasEntryAdapter?: unknown;
+    projectPixi?: unknown;
+  };
+  if (typeof mod.resolveCanvasEntryAdapter !== 'function') {
+    throw new Error(
+      "The packaged runtime's synthetic canvas module did not export " +
+        '`resolveCanvasEntryAdapter` — see vite-plugin-module-doorways.ts.',
+    );
+  }
+  if (typeof mod.projectPixi !== 'object' || mod.projectPixi === null) {
+    throw new Error(
+      "The packaged runtime's synthetic canvas module did not export " +
+        '`projectPixi` — see vite-plugin-module-doorways.ts.',
+    );
+  }
+  return {
+    resolve: mod.resolveCanvasEntryAdapter as CanvasEntryResolver,
+    projectPixi: mod.projectPixi as CanvasPixiNamespace,
+  };
+}
+
+/**
+ * THE `pixi.js` OF THE GRAPH A CANVAS WORLD MOUNTS IN — the project's under the
+ * packaged runtime, this bundle's own copy otherwise.
+ *
+ * Dynamic on BOTH branches for the reason this module's header gives: a static
+ * `pixi.js` import here would put the whole renderer in every editor bundle,
+ * including one opening a three-only project.
+ *
+ * A mount site resolves this ONCE and hands it to everything it builds for that
+ * world. Nothing further down calls it per node — a namespace that could differ
+ * between two collaborators of the same surface is the bug, not the seam.
+ */
+export async function resolveCanvasPixiForEditor(): Promise<CanvasPixiNamespace> {
+  if (!(await isPackagedRuntime())) return import('pixi.js');
+  if (!cachedPackagedRuntime) cachedPackagedRuntime = packagedRuntime();
+  return (await cachedPackagedRuntime).projectPixi;
+}
+
+/** The adjudicator `resolveCanvasEntryAdapter` — from the PROJECT's graph
+ *  under the packaged runtime, from this bundle's own engine copy otherwise. */
+export async function resolveCanvasEntryAdapterForEditor(
+  entryModule: unknown,
+  rootId: string,
+): Promise<RootAdapter<'canvas'> | null> {
+  if (!(await isPackagedRuntime())) {
+    const { resolveCanvasEntryAdapter } = await import('@volter/game-runtime/canvas-react');
+    return resolveCanvasEntryAdapter(entryModule, rootId);
+  }
+  if (!cachedPackagedRuntime) cachedPackagedRuntime = packagedRuntime();
+  return (await cachedPackagedRuntime).resolve(entryModule, rootId);
+}

package/src/host/components/CameraAuthoringOverlay.tsx

@@ -0,0 +1,216 @@
+import {
+  faCamera,
+  faEllipsis,
+  faGripLines,
+  faThumbtack,
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  Button,
+  EditorBadge,
+  EditorIcon,
+  EditorPopover,
+  EditorSurface,
+  IconButton,
+  Inline,
+  Text,
+  Tooltip,
+} from '@volter/editor-sdk/widgets';
+import { type RefObject, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import type * as THREE from 'three';
+import {
+  alignCameraToViewport,
+  cameraAuthoringPresentation,
+  cameraAuthoringVersion,
+  leaveCameraView,
+  pilotCamera,
+  subscribeCameraAuthoring,
+  toggleCameraCompositionGuides,
+  toggleCameraPreviewPin,
+  viewThroughCamera,
+} from '@volter/editor-core/camera-authoring';
+
+export interface CameraAuthoringOverlayProps {
+  readonly previewRef: RefObject<HTMLDivElement | null>;
+}
+
+function CameraPreview({ previewRef }: CameraAuthoringOverlayProps) {
+  const { preview, previewPinned } = cameraAuthoringPresentation();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    const dismiss = (event: PointerEvent) => {
+      if (!menuRef.current?.contains(event.target as Node)) setMenuOpen(false);
+    };
+    document.addEventListener('pointerdown', dismiss);
+    return () => document.removeEventListener('pointerdown', dismiss);
+  }, [menuOpen]);
+
+  if (!preview) return null;
+  const aspect =
+    (preview.camera as THREE.PerspectiveCamera).isPerspectiveCamera &&
+    Number.isFinite((preview.camera as THREE.PerspectiveCamera).aspect)
+      ? (preview.camera as THREE.PerspectiveCamera).aspect
+      : 16 / 9;
+
+  return (
+    <div className="vgai-camera-preview" data-testid="camera-preview">
+      <Inline className="vgai-camera-preview-header" gap={4} align="center">
+        <EditorIcon icon={faCamera} size="sm" />
+        <Text
+          variant="label"
+          truncate
+          className="vgai-camera-preview-title"
+          title={`${preview.name} · ${preview.lens}`}
+        >
+          {preview.name}
+        </Text>
+        <Tooltip text={previewPinned ? 'Unpin camera preview' : 'Pin camera preview'}>
+          <IconButton
+            aria-label={previewPinned ? 'Unpin camera preview' : 'Pin camera preview'}
+            aria-pressed={previewPinned}
+            size="compact"
+            onClick={toggleCameraPreviewPin}
+          >
+            <EditorIcon icon={faThumbtack} size="sm" />
+          </IconButton>
+        </Tooltip>
+        <div ref={menuRef} className="vgai-camera-preview-menu-anchor">
+          <Tooltip text="Camera actions">
+            <IconButton
+              aria-label="Camera actions"
+              aria-expanded={menuOpen}
+              size="compact"
+              onClick={() => setMenuOpen((open) => !open)}
+            >
+              <EditorIcon icon={faEllipsis} size="sm" />
+            </IconButton>
+          </Tooltip>
+          {menuOpen ? (
+            <EditorPopover className="vgai-camera-preview-menu">
+              <Button
+                variant="ghost"
+                size="compact"
+                disabled={!preview.canAuthorPose}
+                title={preview.poseRefusal}
+                onClick={() => {
+                  setMenuOpen(false);
+                  pilotCamera(preview);
+                }}
+              >
+                Pilot Camera
+              </Button>
+              <Button
+                variant="ghost"
+                size="compact"
+                onClick={() => {
+                  setMenuOpen(false);
+                  viewThroughCamera(preview);
+                }}
+              >
+                View Through Camera
+              </Button>
+              <Button
+                variant="ghost"
+                size="compact"
+                disabled={!preview.canAuthorPose}
+                title={preview.poseRefusal}
+                onClick={() => {
+                  setMenuOpen(false);
+                  alignCameraToViewport(preview);
+                }}
+              >
+                Align Camera to Current View
+              </Button>
+            </EditorPopover>
+          ) : null}
+        </div>
+      </Inline>
+      <div
+        ref={previewRef}
+        className="vgai-camera-preview-image"
+        style={{ aspectRatio: String(Math.max(0.5, Math.min(3, aspect))) }}
+        role="img"
+        aria-label={`Live view through ${preview.name}`}
+        onDoubleClick={() => viewThroughCamera(preview)}
+      />
+    </div>
+  );
+}
+
+function CompositionGuides() {
+  return (
+    <div className="vgai-camera-guides" aria-hidden="true">
+      <div className="vgai-camera-guide vgai-camera-guide-v1" />
+      <div className="vgai-camera-guide vgai-camera-guide-v2" />
+      <div className="vgai-camera-guide vgai-camera-guide-h1" />
+      <div className="vgai-camera-guide vgai-camera-guide-h2" />
+      <div className="vgai-camera-safe-frame" />
+      <div className="vgai-camera-center-mark" />
+    </div>
+  );
+}
+
+function CameraViewBanner() {
+  const { view, guidesVisible } = cameraAuthoringPresentation();
+  if (!view) return null;
+  const piloting = view.mode === 'pilot';
+  return (
+    <>
+      {guidesVisible ? <CompositionGuides /> : null}
+      <EditorSurface
+        variant="overlay"
+        border
+        className="vgai-camera-view-banner vgai-chrome-island vgai-glass-island"
+        data-testid="camera-view-banner"
+      >
+        <Inline gap={6} align="center">
+          <EditorBadge>{piloting ? 'PILOTING' : 'CAMERA VIEW'}</EditorBadge>
+          <Text variant="label">{view.subject.name}</Text>
+          <Text variant="caption" tone="muted">
+            Exact camera view
+          </Text>
+          <Tooltip text={guidesVisible ? 'Hide composition guides' : 'Show composition guides'}>
+            <IconButton
+              aria-label={guidesVisible ? 'Hide composition guides' : 'Show composition guides'}
+              aria-pressed={guidesVisible}
+              size="compact"
+              onClick={toggleCameraCompositionGuides}
+            >
+              <EditorIcon icon={faGripLines} size="sm" />
+            </IconButton>
+          </Tooltip>
+          {!piloting ? (
+            <Button
+              size="compact"
+              variant="primary"
+              disabled={!view.subject.canAuthorPose}
+              title={view.subject.poseRefusal}
+              onClick={() => pilotCamera(view.subject)}
+            >
+              Pilot
+            </Button>
+          ) : null}
+          <Tooltip text="Exit camera view">
+            <IconButton aria-label="Exit camera view" size="compact" onClick={leaveCameraView}>
+              <EditorIcon icon={faXmark} size="sm" />
+            </IconButton>
+          </Tooltip>
+        </Inline>
+      </EditorSurface>
+    </>
+  );
+}
+
+/** Selected-camera preview and view/pilot presentation for the Scene viewport. */
+export function CameraAuthoringOverlay({ previewRef }: CameraAuthoringOverlayProps) {
+  useSyncExternalStore(subscribeCameraAuthoring, cameraAuthoringVersion, cameraAuthoringVersion);
+  return (
+    <>
+      <CameraPreview previewRef={previewRef} />
+      <CameraViewBanner />
+    </>
+  );
+}

package/src/host/components/HeaderTelemetry.tsx

@@ -0,0 +1,341 @@
+import { faVolumeHigh, faVolumeXmark } from '@fortawesome/free-solid-svg-icons';
+import { AnchoredMenu, Button, EditorIcon, Inline, MenuItem } from '@volter/editor-sdk/widgets';
+import type { PerformanceSnapshot } from '@volter/game-runtime/dev/performance-profiler';
+import type { AudioAdapter, AudioMeterFrame } from '@volter/editor-project/adapter';
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import {
+  activeAudioVersion,
+  getAllActiveAudio,
+  getInspectedAudio,
+  subscribeActiveAudio,
+} from '@volter/editor-core/authoring/active-systems';
+import { useEditorStore } from '@volter/editor-core/editor-runtime';
+import { useActivePerformanceSource } from '../use-active-performance-source';
+import {
+  activeChromeRegions,
+  chromeRegionsKey,
+  subscribeChromeRegions,
+} from '@volter/editor-core/workspace-regions';
+import {
+  AUDIO_METER_SEGMENTS,
+  audioMeterSegmentCount,
+  FRAME_BUDGET_60_FPS_MS,
+  frameSparklinePoints,
+  PERFORMANCE_SPARKLINE_SAMPLES,
+  performanceTelemetryTone,
+  sampleFrameInterval,
+} from './header-telemetry-model';
+import { profilerView } from './utility-view-state';
+
+const MUTE_KEY = 'editor:muted';
+const EMPTY_PERFORMANCE: PerformanceSnapshot = {
+  enabled: false,
+  recording: false,
+  fps: 0,
+  cpuMs: 0,
+  p95Ms: 0,
+  p99Ms: 0,
+  frames: [],
+  phases: [],
+  systems: [],
+  components: [],
+  render: {
+    gpuMs: null,
+    drawCalls: 0,
+    triangles: 0,
+    geometries: 0,
+    textures: 0,
+    renderPasses: 0,
+  },
+};
+
+function storedMutePreference(): boolean {
+  try {
+    return localStorage.getItem(MUTE_KEY) === '1';
+  } catch {
+    return false;
+  }
+}
+
+function persistMutePreference(muted: boolean): void {
+  try {
+    localStorage.setItem(MUTE_KEY, muted ? '1' : '0');
+  } catch {
+    // Storage can be unavailable in an embedded/locked-down host. Muting the
+    // live adapters still succeeds; only the next-session preference is lost.
+  }
+}
+
+function audioDisplayLevel(adapter: AudioAdapter, frames: readonly AudioMeterFrame[]): number {
+  const master = frames.find((frame) => frame.id === 'master')?.level;
+  if (!adapter.isMuted() && master !== undefined) return master;
+  // The first-party master tap is post-gain, so it truthfully flatlines while
+  // muted. The bus taps are pre-master: their maximum is an ACTIVITY reading,
+  // not a fabricated mixed output level, and lets grey bars say "signal is
+  // present but silenced". External adapters that expose only master degrade
+  // to that honest (possibly zero) value.
+  const upstream = frames.filter((frame) => frame.id !== 'master').map((frame) => frame.level);
+  return upstream.length > 0 ? Math.max(...upstream) : (master ?? 0);
+}
+
+/**
+ * AUTHORING IS SILENT: the host's own policy, not each game's manners.
+ *
+ * In edit mode a mounted world's system adapters are live (the design session
+ * publishes `game.systemAdapters`), so a game whose audio starts with its
+ * scene sounds at the person EDITING it. The engine only mutes for pause
+ * (`setRootGates`), which is a runtime concern; nothing muted a world for
+ * being authored rather than played. So the effective mute for every active
+ * adapter is `userMuted || !playing`, applied here, with the user's own
+ * preference left untouched: the toggle keeps meaning "the user wants mute",
+ * and while stopped it decides what happens once play starts.
+ *
+ * Only `'playing'` counts as audible so the two gates agree instead of
+ * fighting: `'paused'` is already muted by the engine, which restores the
+ * pre-pause value on resume — which is exactly this effective value, and the
+ * play-state subscription re-applies it on that transition anyway.
+ */
+function AudioTelemetry() {
+  const store = useEditorStore();
+  useSyncExternalStore(store.subscribe, store.getShellSnapshot ?? store.getSnapshot);
+  const playing = store.playState === 'playing';
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [level, setLevel] = useState(0);
+  const [muted, setMuted] = useState(false);
+  const [meterAvailable, setMeterAvailable] = useState(false);
+  // The user's own wish, which the authoring gate above never clobbers — the
+  // menu names THIS (what the next click changes), while the icon and the
+  // state label report the effective, audible-or-not truth.
+  const [userMuted, setUserMuted] = useState(storedMutePreference);
+  const desiredMuteRef = useRef(storedMutePreference());
+  const appliedRef = useRef(new WeakMap<object, boolean>());
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const audioVersion = useSyncExternalStore(
+    subscribeActiveAudio,
+    activeAudioVersion,
+    activeAudioVersion,
+  );
+  const adapter = getInspectedAudio();
+
+  useEffect(() => {
+    void audioVersion;
+    const desired = desiredMuteRef.current || !playing;
+    for (const active of getAllActiveAudio()) {
+      if (appliedRef.current.get(active) === desired) continue;
+      active.setMuted(desired);
+      appliedRef.current.set(active, desired);
+    }
+  }, [audioVersion, playing]);
+
+  useEffect(() => {
+    if (!adapter) {
+      setLevel(0);
+      setMuted(false);
+      setMeterAvailable(false);
+      return;
+    }
+    const handle = adapter.acquireMeters?.() ?? null;
+    setMeterAvailable(handle !== null);
+    const sample = () => {
+      setMuted(adapter.isMuted());
+      setLevel(handle ? audioDisplayLevel(adapter, handle.read()) : 0);
+    };
+    sample();
+    const id = setInterval(sample, 100);
+    return () => {
+      clearInterval(id);
+      handle?.dispose();
+    };
+  }, [adapter]);
+
+  // The button toggles the USER's preference, never the effective state:
+  // reading it back off the adapters would make "unmute" while stopped (where
+  // everything is muted by the authoring gate) unmute the world at the person
+  // editing it, and would lose the preference the next time play starts.
+  const toggleMute = () => {
+    const nextPreference = !desiredMuteRef.current;
+    const effective = nextPreference || !playing;
+    for (const item of getAllActiveAudio()) {
+      item.resume?.();
+      item.setMuted(effective);
+      appliedRef.current.set(item, effective);
+    }
+    desiredMuteRef.current = nextPreference;
+    setUserMuted(nextPreference);
+    persistMutePreference(nextPreference);
+    setMuted(effective);
+  };
+
+  const filled = audioMeterSegmentCount(level);
+  // Muted-because-not-playing is the one state a person cannot explain from
+  // the icon alone; it rides in the existing tooltip rather than new chrome.
+  const muteReason = adapter && muted && !userMuted && !playing ? ' (not playing)' : '';
+  const stateLabel = !adapter
+    ? 'Audio unavailable'
+    : muted
+      ? 'Audio muted'
+      : level > 0
+        ? 'Audio playing'
+        : 'Audio quiet';
+
+  return (
+    <div className="vgai-header-audio" data-muted={muted || undefined} data-available={!!adapter}>
+      <Button
+        ref={buttonRef}
+        type="button"
+        variant="ghost"
+        size="compact"
+        className="vgai-header-telemetry-button"
+        data-testid="header-audio-telemetry"
+        aria-label={`${stateLabel}; open audio controls`}
+        aria-haspopup="menu"
+        aria-expanded={menuOpen}
+        title={`${stateLabel}${muteReason}${meterAvailable ? '' : ' · level metering unavailable'}`}
+        onClick={() => setMenuOpen((open) => !open)}
+      >
+        <EditorIcon icon={muted ? faVolumeXmark : faVolumeHigh} size="sm" />
+        <span className="vgai-audio-vu" aria-hidden="true">
+          {Array.from({ length: AUDIO_METER_SEGMENTS }, (_, index) => (
+            <i key={index} data-filled={index < filled || undefined} />
+          ))}
+        </span>
+      </Button>
+      {menuOpen && (
+        <AnchoredMenu anchorRef={buttonRef} onDismiss={() => setMenuOpen(false)} gap={3}>
+          <MenuItem
+            onClick={() => {
+              toggleMute();
+              setMenuOpen(false);
+            }}
+          >
+            {userMuted ? 'Unmute audio' : 'Mute audio'}
+          </MenuItem>
+        </AnchoredMenu>
+      )}
+    </div>
+  );
+}
+
+function PerformanceTelemetry() {
+  const source = useActivePerformanceSource();
+  const profiler = source?.profiler ?? null;
+  const [snapshot, setSnapshot] = useState<PerformanceSnapshot>(EMPTY_PERFORMANCE);
+  const [frameHistory, setFrameHistory] = useState<number[]>([]);
+
+  useEffect(() => {
+    if (!profiler) {
+      setSnapshot(EMPTY_PERFORMANCE);
+      setFrameHistory([]);
+      return;
+    }
+    const telemetryWasEnabled = profiler.telemetryEnabled;
+    profiler.telemetryEnabled = true;
+    const initial = profiler.getSnapshot();
+    const initialSample = sampleFrameInterval(initial.frames, 0);
+    let sampledThroughFrameId = initialSample.frameId;
+    setSnapshot(initial);
+    setFrameHistory(initialSample.intervalMs === null ? [] : [initialSample.intervalMs]);
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const publish = () => {
+      timer = null;
+      const next = profiler.getSnapshot();
+      const sample = sampleFrameInterval(next.frames, sampledThroughFrameId);
+      sampledThroughFrameId = sample.frameId;
+      setSnapshot(next);
+      const interval = sample.intervalMs;
+      if (interval !== null) {
+        setFrameHistory((history) => [...history, interval].slice(-PERFORMANCE_SPARKLINE_SAMPLES));
+      }
+    };
+    const unsubscribe = profiler.subscribe(() => {
+      if (timer === null) timer = setTimeout(publish, 500);
+    });
+    return () => {
+      unsubscribe();
+      if (timer !== null) clearTimeout(timer);
+      if (!telemetryWasEnabled) profiler.telemetryEnabled = false;
+    };
+  }, [profiler]);
+
+  const latestFrameMs = frameHistory.at(-1) ?? null;
+  const points = frameSparklinePoints(frameHistory, 72, 18);
+  const fps = latestFrameMs
+    ? Math.round(1000 / latestFrameMs)
+    : snapshot.fps > 0
+      ? Math.round(snapshot.fps)
+      : null;
+  const frameMs = latestFrameMs ?? (snapshot.fps > 0 ? 1000 / snapshot.fps : null);
+  const tone = performanceTelemetryTone(frameHistory);
+  const title = source
+    ? `${source.label}: ${fps ?? '—'} FPS · ${frameMs?.toFixed(1) ?? '—'} ms frame time · open Profiler`
+    : 'The active document has no live render loop to profile';
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="compact"
+      className="vgai-header-telemetry-button vgai-header-performance"
+      data-testid="header-performance-telemetry"
+      data-performance-tone={tone}
+      disabled={!source}
+      aria-label={title}
+      title={title}
+      onClick={() => profilerView.open('profiler')}
+    >
+      <svg
+        className="vgai-performance-graph"
+        aria-hidden="true"
+        viewBox="0 0 72 18"
+        width="72"
+        height="18"
+      >
+        <line
+          className="vgai-performance-budget"
+          x1="0"
+          x2="72"
+          y1={18 - (FRAME_BUDGET_60_FPS_MS / 50) * 18}
+          y2={18 - (FRAME_BUDGET_60_FPS_MS / 50) * 18}
+        />
+        {points && <polyline className="vgai-performance-sparkline" points={points} />}
+      </svg>
+      <span className="vgai-performance-readout">
+        <strong className="vgai-header-fps">{fps ?? '—'} FPS</strong>
+        <span className="vgai-header-frame-ms">{frameMs?.toFixed(1) ?? '—'} ms</span>
+      </span>
+    </Button>
+  );
+}
+
+/**
+ * Persistent, glanceable runtime telemetry. The audio VU is an instantaneous
+ * segmented magnitude; performance is a historical line, so the two readings
+ * remain distinguishable without color.
+ *
+ * IT IS A CHROME REGION (`telemetry`, `workspace-regions.ts`), the way the
+ * workspace tab strip is: measured against Blender's Modeling frame, this
+ * cluster is the brightest, highest-chroma ink in a window whose brightest
+ * chrome ink is 216 — a yellow readout, an orange sparkline and a lit meter
+ * where Blender's corner carries two quiet wells (Scene, ViewLayer) — and it
+ * is the first thing the eye lands on. A style that wants that corner quiet
+ * declares `telemetry: 'hidden'`; absent means shown, so every existing skin
+ * is unchanged. Only these three readings are behind the region: Invite and
+ * Account are product identity, not look, and they are already quiet. The
+ * Profiler utility remains the door to the same numbers, which is what the
+ * readout's own tooltip says.
+ */
+export function HeaderTelemetry() {
+  useSyncExternalStore(subscribeChromeRegions, chromeRegionsKey, chromeRegionsKey);
+  if (activeChromeRegions().telemetry === 'hidden') return null;
+  return (
+    <Inline
+      className="vgai-header-telemetry vgai-chrome-island vgai-glass-island"
+      data-island-scale="compact"
+      align="center"
+      gap={1}
+    >
+      <AudioTelemetry />
+      <PerformanceTelemetry />
+    </Inline>
+  );
+}