@jgengine/editor 0.11.0 → 0.12.0

package/dist/shell/SceneToolbar.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { WELL_KNOWN_MARKER_KINDS } from "@jgengine/core/editor/index";
+import { VEGETATION_VOLUME_KIND } from "@jgengine/core/world/vegetation";
+import { listSceneKinds } from "@jgengine/core/scene/sceneKinds";
+import { ROTATION_SNAP_CHOICES_DEG, SCALE_SNAP_CHOICES, } from "../uiStore.js";
+import { Icon } from "./icons.js";
+import { BORDER, FOCUS_RING, MICRO_LABEL } from "./theme.js";
+import { IconButton, Segmented, ToolbarDivider } from "./ui.js";
+/** Volume placement entries offered by the Add menu. */
+export const ADD_VOLUME_ENTRIES = [
+    { label: "Zone (sphere)", tool: { tool: "volume", kind: "zone", shape: "sphere" } },
+    { label: "Zone (box)", tool: { tool: "volume", kind: "zone", shape: "box" } },
+    { label: "Zone (cylinder)", tool: { tool: "volume", kind: "zone", shape: "cylinder" } },
+    { label: "Aggro range", tool: { tool: "volume", kind: "aggro", shape: "sphere" } },
+    { label: "Leash range", tool: { tool: "volume", kind: "leash", shape: "sphere" } },
+    { label: "Discover area", tool: { tool: "volume", kind: "discover", shape: "sphere" } },
+    { label: "Capture area", tool: { tool: "volume", kind: "capture", shape: "cylinder" } },
+    { label: "Vegetation (box)", tool: { tool: "volume", kind: VEGETATION_VOLUME_KIND, shape: "box" } },
+    { label: "Vegetation (circle)", tool: { tool: "volume", kind: VEGETATION_VOLUME_KIND, shape: "sphere" } },
+];
+const GRID_SIZES = [0.5, 1, 2, 4, 8];
+function MenuShell({ open, onClose, children, width = "w-56", }) {
+    const ref = useRef(null);
+    // Fixed positioning: the toolbar scrolls horizontally (overflow-x-auto), which also clips
+    // absolutely-positioned descendants — an absolute menu would render invisible below it.
+    const [anchor, setAnchor] = useState(null);
+    useLayoutEffect(() => {
+        if (!open) {
+            setAnchor(null);
+            return;
+        }
+        const rect = ref.current?.parentElement?.getBoundingClientRect();
+        if (rect !== undefined)
+            setAnchor({ left: rect.left, top: rect.bottom + 4 });
+    }, [open]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            if (ref.current !== null && !ref.current.contains(event.target))
+                onClose();
+        };
+        const onKey = (event) => {
+            if (event.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("pointerdown", onPointerDown);
+        window.addEventListener("keydown", onKey);
+        return () => {
+            window.removeEventListener("pointerdown", onPointerDown);
+            window.removeEventListener("keydown", onKey);
+        };
+    }, [open, onClose]);
+    if (!open)
+        return null;
+    return (_jsx("div", { ref: ref, style: anchor === null ? undefined : { left: anchor.left, top: anchor.top }, className: `fixed z-[70] max-h-[56vh] ${width} overflow-auto rounded-[8px] border border-white/10 bg-[#14171d] p-1.5 shadow-2xl shadow-black/60`, children: children }));
+}
+const MENU_ITEM = `block w-full rounded-[5px] px-2.5 py-1.5 text-left text-[12px] text-neutral-300 transition-colors hover:bg-cyan-500/15 hover:text-cyan-100 ${FOCUS_RING}`;
+/** Small preset chip inside the snap menu (grid sizes, rotation/scale increments). */
+function SnapChip({ label, active, onClick }) {
+    return (_jsx("button", { type: "button", onClick: onClick, "aria-pressed": active, className: `rounded-[4px] px-1.5 py-0.5 text-[10px] tabular-nums transition-colors ${FOCUS_RING} ${active ? "bg-cyan-500/20 text-cyan-100" : "bg-white/[0.05] text-neutral-400 hover:text-neutral-200"}`, children: label }));
+}
+const PIVOT_LABEL = {
+    origin: "Origin",
+    center: "Center",
+    median: "Median",
+};
+/**
+ * Contextual scene toolbar under the app bar: tools, gizmo modes, gizmo space, pivot,
+ * snapping, viewport overlays, framing, projection, and the Add menu.
+ */
+export function SceneToolbar({ tool, gizmoMode, gizmoSpace, gizmoPivot, snapMode, gridSize, rotationSnapDeg, scaleSnap, cameraProjection, showGrid, showContours, showSurfaceGrid, showElevation, placementActive, onSetTool, onSetGizmoMode, onSetGizmoSpace, onSetGizmoPivot, onSetSnapMode, onSetGridSize, onSetRotationSnapDeg, onSetScaleSnap, onSetCameraProjection, onToggleGrid, onToggleContours, onToggleSurfaceGrid, onToggleElevation, onFrame, onStartPlacement, onOpenAssistant, assistantOpen, }) {
+    const [addOpen, setAddOpen] = useState(false);
+    const [snapOpen, setSnapOpen] = useState(false);
+    const [pivotOpen, setPivotOpen] = useState(false);
+    const lastSnapRef = useRef("ground");
+    if (snapMode !== "off")
+        lastSnapRef.current = snapMode;
+    // Recomputed every render (opening the menu rerenders): studios may register after the chrome
+    // mounts (game modules load lazily), and a once-on-mount snapshot would silently hide them.
+    const studioKinds = listSceneKinds().filter((definition) => definition.addCategory !== undefined);
+    const pick = (placement) => {
+        setAddOpen(false);
+        onStartPlacement(placement);
+    };
+    return (_jsxs("div", { className: `pointer-events-auto relative z-[55] flex h-9 shrink-0 items-center gap-1 overflow-x-auto border-b ${BORDER} bg-[#0e1014] px-2 [scrollbar-width:none]`, role: "toolbar", "aria-label": "Scene tools", children: [_jsx(Segmented, { ariaLabel: "Editing tool", value: tool, onChange: onSetTool, options: [
+                    { value: "select", label: "Select", icon: "cursor" },
+                    { value: "terrain", label: "Terrain", icon: "terrain", kbd: "T" },
+                ] }), _jsx(ToolbarDivider, {}), _jsx(Segmented, { ariaLabel: "Transform gizmo", value: gizmoMode, onChange: onSetGizmoMode, disabled: tool === "terrain", options: [
+                    { value: "translate", label: "Move", icon: "move", kbd: "W", iconOnly: true },
+                    { value: "rotate", label: "Rotate", icon: "rotate", kbd: "E", iconOnly: true },
+                    { value: "scale", label: "Scale", icon: "scale", kbd: "R", iconOnly: true },
+                ] }), _jsx(Segmented, { ariaLabel: "Gizmo space", value: gizmoSpace, onChange: onSetGizmoSpace, disabled: tool === "terrain", options: [
+                    { value: "world", label: "World" },
+                    { value: "local", label: "Local" },
+                ] }), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setPivotOpen((value) => !value), disabled: tool === "terrain", "aria-label": `Gizmo pivot: ${PIVOT_LABEL[gizmoPivot]}`, "aria-expanded": pivotOpen, title: "Gizmo pivot for multi-select: origin (primary), center (mean), or median", className: `flex h-6 items-center gap-1 rounded-[5px] border border-white/[0.07] bg-[#191d24] px-2 text-[11px] text-neutral-300 transition-colors hover:bg-[#1f242d] disabled:opacity-40 ${FOCUS_RING}`, children: [_jsx(Icon, { name: "target", size: 12 }), PIVOT_LABEL[gizmoPivot], _jsx(Icon, { name: "chevronDown", size: 10, className: "text-neutral-500" })] }), _jsxs(MenuShell, { open: pivotOpen, onClose: () => setPivotOpen(false), width: "w-44", children: [_jsx("div", { className: `px-2 pb-1 pt-1.5 ${MICRO_LABEL}`, children: "Gizmo pivot" }), ["origin", "center", "median"].map((pivot) => (_jsxs("button", { type: "button", className: `${MENU_ITEM} ${gizmoPivot === pivot ? "text-cyan-200" : ""}`, onClick: () => {
+                                    onSetGizmoPivot(pivot);
+                                    setPivotOpen(false);
+                                }, children: [PIVOT_LABEL[pivot], gizmoPivot === pivot ? " ✓" : ""] }, pivot)))] })] }), _jsx(ToolbarDivider, {}), _jsxs("div", { className: "relative flex items-center gap-1", children: [_jsx(IconButton, { icon: "magnet", label: snapMode === "off" ? "Enable snapping" : `Snapping: ${snapMode}`, active: snapMode !== "off", onClick: () => onSetSnapMode(snapMode === "off" ? lastSnapRef.current : "off") }), _jsxs("button", { type: "button", onClick: () => setSnapOpen((value) => !value), "aria-label": "Snapping options", "aria-expanded": snapOpen, className: `flex h-7 items-center gap-1 rounded-[5px] border border-white/[0.07] bg-[#191d24] px-2 text-[11px] text-neutral-300 transition-colors hover:bg-[#1f242d] ${FOCUS_RING}`, children: [snapMode === "off" ? "Snap off" : snapMode === "grid" ? `Grid ${gridSize}m` : "Ground", _jsx(Icon, { name: "chevronDown", size: 10, className: "text-neutral-500" })] }), _jsxs(MenuShell, { open: snapOpen, onClose: () => setSnapOpen(false), width: "w-52", children: [_jsx("div", { className: `px-2 pb-1 pt-1.5 ${MICRO_LABEL}`, children: "Translation snap" }), ["ground", "grid", "off"].map((mode) => (_jsxs("button", { type: "button", className: `${MENU_ITEM} ${snapMode === mode ? "text-cyan-200" : ""}`, onClick: () => {
+                                    onSetSnapMode(mode);
+                                    if (mode !== "grid")
+                                        setSnapOpen(false);
+                                }, children: [mode === "ground" ? "Snap to ground" : mode === "grid" ? "Snap to grid" : "Snapping off", snapMode === mode ? " ✓" : ""] }, mode))), snapMode === "grid" ? (_jsx("div", { className: "flex items-center gap-1 px-2 py-1.5", children: GRID_SIZES.map((size) => (_jsx(SnapChip, { label: `${size}m`, active: gridSize === size, onClick: () => {
+                                        onSetGridSize(size);
+                                        setSnapOpen(false);
+                                    } }, size))) })) : null, _jsx("div", { className: "my-1 h-px bg-white/[0.07]" }), _jsx("div", { className: `px-2 pb-1 pt-1.5 ${MICRO_LABEL}`, children: "Rotation snap" }), _jsxs("div", { className: "flex items-center gap-1 px-2 py-1.5", children: [_jsx(SnapChip, { label: "Off", active: rotationSnapDeg === null, onClick: () => onSetRotationSnapDeg(null) }), ROTATION_SNAP_CHOICES_DEG.map((deg) => (_jsx(SnapChip, { label: `${deg}°`, active: rotationSnapDeg === deg, onClick: () => onSetRotationSnapDeg(deg) }, deg)))] }), _jsx("div", { className: `px-2 pb-1 pt-1.5 ${MICRO_LABEL}`, children: "Scale snap" }), _jsxs("div", { className: "flex items-center gap-1 px-2 py-1.5", children: [_jsx(SnapChip, { label: "Off", active: scaleSnap === null, onClick: () => onSetScaleSnap(null) }), SCALE_SNAP_CHOICES.map((snap) => (_jsx(SnapChip, { label: `${snap}`, active: scaleSnap === snap, onClick: () => onSetScaleSnap(snap) }, snap)))] })] })] }), _jsx(ToolbarDivider, {}), _jsx(IconButton, { icon: "grid", label: "Reference grid (G)", active: showGrid, onClick: onToggleGrid }), _jsx(IconButton, { icon: "terrain", label: "Elevation contours", active: showContours, onClick: onToggleContours }), _jsx(IconButton, { icon: "layers", label: "Terrain-draped grid", active: showSurfaceGrid, onClick: onToggleSurfaceGrid }), _jsx(IconButton, { icon: "gauge", label: "Elevation readout", active: showElevation, onClick: onToggleElevation }), _jsx(ToolbarDivider, {}), _jsx(IconButton, { icon: "frame", label: "Frame selection / scene (F)", onClick: onFrame }), _jsxs("button", { type: "button", onClick: () => onSetCameraProjection(cameraProjection === "perspective" ? "orthographic" : "perspective"), title: cameraProjection === "perspective"
+                    ? "Perspective projection — click for orthographic"
+                    : "Orthographic projection — click for perspective", "aria-label": cameraProjection === "perspective"
+                    ? "Camera projection: perspective (switch to orthographic)"
+                    : "Camera projection: orthographic (switch to perspective)", "aria-pressed": cameraProjection === "orthographic", className: `flex h-6 items-center gap-1 rounded-[5px] border px-2 text-[11px] transition-colors ${FOCUS_RING} ${cameraProjection === "orthographic"
+                    ? "border-cyan-400/30 bg-cyan-500/15 text-cyan-100"
+                    : "border-white/[0.07] bg-[#191d24] text-neutral-300 hover:bg-[#1f242d]"}`, children: [_jsx(Icon, { name: "camera", size: 12 }), cameraProjection === "perspective" ? "Persp" : "Ortho"] }), _jsx(ToolbarDivider, {}), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setAddOpen((value) => !value), "aria-expanded": addOpen, className: `flex h-7 items-center gap-1.5 rounded-[5px] px-2.5 text-[12px] font-medium transition-colors ${FOCUS_RING} ${addOpen || placementActive
+                            ? "bg-cyan-600 text-white shadow-sm shadow-cyan-950/40"
+                            : "border border-white/[0.07] bg-[#191d24] text-neutral-200 hover:bg-[#1f242d]"}`, children: [_jsx(Icon, { name: "plus", size: 12 }), "Add"] }), _jsxs(MenuShell, { open: addOpen, onClose: () => setAddOpen(false), children: [_jsx("div", { className: `px-2 pb-1 pt-1.5 ${MICRO_LABEL}`, children: "Markers" }), WELL_KNOWN_MARKER_KINDS.map((kind) => (_jsx("button", { type: "button", className: MENU_ITEM, onClick: () => pick({ tool: "marker", kind }), children: kind }, kind))), _jsx("div", { className: `px-2 pb-1 pt-2 ${MICRO_LABEL}`, children: "Volumes" }), ADD_VOLUME_ENTRIES.map((entry) => (_jsx("button", { type: "button", className: MENU_ITEM, onClick: () => pick(entry.tool), children: entry.label }, entry.label))), _jsx("div", { className: `px-2 pb-1 pt-2 ${MICRO_LABEL}`, children: "Studios" }), studioKinds.map((definition) => (_jsxs("button", { type: "button", className: `${MENU_ITEM}`, style: { color: definition.accent ?? "#34d399" }, onClick: () => pick(definition.target === "path"
+                                    ? { tool: "path", kind: definition.kind }
+                                    : definition.target === "volume"
+                                        ? { tool: "volume", kind: definition.kind, shape: "box" }
+                                        : { tool: "marker", kind: definition.kind }), children: [definition.label, definition.target === "path" ? (definition.pathShape === "line" ? " (draw line)" : " (lasso)") : ""] }, definition.kind))), _jsx("div", { className: `px-2 pb-1 pt-2 ${MICRO_LABEL}`, children: "Paths & notes" }), _jsx("button", { type: "button", className: MENU_ITEM, onClick: () => pick({ tool: "path", kind: "route" }), children: "Draw path (route)" }), _jsx("button", { type: "button", className: MENU_ITEM, onClick: () => pick({ tool: "path", kind: "road" }), children: "Draw road" }), _jsx("button", { type: "button", className: MENU_ITEM, onClick: () => pick({ tool: "note" }), children: "Note" })] })] }), _jsx("div", { className: "ml-auto flex items-center gap-1", children: _jsxs("button", { type: "button", onClick: onOpenAssistant, className: `flex h-7 items-center gap-1.5 rounded-[5px] px-2.5 text-[12px] transition-colors ${FOCUS_RING} ${assistantOpen
+                        ? "border border-violet-400/40 bg-violet-500/20 text-violet-100"
+                        : "border border-white/[0.07] bg-[#191d24] text-neutral-300 hover:bg-[#1f242d] hover:text-neutral-100"}`, title: "AI assistant \u2014 drives the scene through the same RPC and undo as the toolbar", children: [_jsx(Icon, { name: "sparkle", size: 13 }), "AI"] }) })] }));
+}

package/dist/shell/StatusBar.d.ts

@@ -0,0 +1,18 @@
+import type { EditorHostApi, EditorPerfSample } from "../session.js";
+import type { PerfHistoryStore } from "./perfHistory.js";
+/** Shared editor-host perf poll: samples on an interval and feeds the profiler history. */
+export declare function usePerfSample(api: EditorHostApi, history?: PerfHistoryStore): EditorPerfSample | null;
+/** Compact triangle-count formatting (1.2M / 340k). */
+export declare function formatTriangles(count: number): string;
+/**
+ * Bottom status strip: readiness, scene stats, live perf pill, autosave state, and camera hints.
+ * Owns its own perf poll (and the profiler history feed) so the 500ms tick never rerenders the shell.
+ */
+export declare function StatusBar({ api, history, objects, foliage, selectionCount, autosave, }: {
+    api: EditorHostApi;
+    history: PerfHistoryStore;
+    objects: number;
+    foliage: number;
+    selectionCount: number;
+    autosave: boolean;
+}): import("react").JSX.Element;

package/dist/shell/StatusBar.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { classifyEditorPerf } from "../perfPill.js";
+import { BORDER, NUMERIC } from "./theme.js";
+const PERF_POLL_MS = 500;
+/** Shared editor-host perf poll: samples on an interval and feeds the profiler history. */
+export function usePerfSample(api, history) {
+    const [sample, setSample] = useState(null);
+    useEffect(() => {
+        const timer = setInterval(() => {
+            const next = api.getPerf();
+            setSample(next);
+            if (next !== null && history !== undefined)
+                history.push(next);
+        }, PERF_POLL_MS);
+        return () => clearInterval(timer);
+    }, [api, history]);
+    return sample;
+}
+/** Compact triangle-count formatting (1.2M / 340k). */
+export function formatTriangles(count) {
+    if (count >= 1_000_000)
+        return `${(count / 1_000_000).toFixed(1)}M`;
+    if (count >= 1_000)
+        return `${(count / 1_000).toFixed(0)}k`;
+    return String(count);
+}
+const PERF_TONE_CLASS = {
+    idle: "text-neutral-500",
+    healthy: "text-emerald-400",
+    busy: "text-rose-400",
+};
+/**
+ * Bottom status strip: readiness, scene stats, live perf pill, autosave state, and camera hints.
+ * Owns its own perf poll (and the profiler history feed) so the 500ms tick never rerenders the shell.
+ */
+export function StatusBar({ api, history, objects, foliage, selectionCount, autosave, }) {
+    const perf = usePerfSample(api, history);
+    const tone = perf === null ? "idle" : classifyEditorPerf(perf);
+    return (_jsxs("footer", { className: `pointer-events-auto flex h-6 shrink-0 items-center gap-3 border-t ${BORDER} bg-[#0e1014] px-2.5 text-[10px] text-neutral-500`, children: [_jsxs("span", { className: "flex items-center gap-1.5 text-neutral-400", children: [_jsx("span", { className: `h-1.5 w-1.5 rounded-full ${tone === "busy" ? "bg-rose-400" : "bg-emerald-500"}` }), "Ready"] }), _jsxs("span", { className: NUMERIC, children: [objects, " objects"] }), foliage > 0 ? _jsxs("span", { className: NUMERIC, children: ["\u2248", formatTriangles(foliage), " foliage"] }) : null, selectionCount > 0 ? _jsxs("span", { className: `${NUMERIC} text-cyan-300/80`, children: [selectionCount, " selected"] }) : null, perf !== null ? (_jsxs("span", { className: `${NUMERIC} ${PERF_TONE_CLASS[tone]}`, children: [tone === "idle" ? "idle" : `${perf.fps.toFixed(0)} fps`, tone === "idle" && perf.drawCalls === 0 ? "" : ` · ${perf.drawCalls} draws · ${formatTriangles(perf.triangles)} tris`] })) : null, _jsx("span", { className: "ml-auto hidden lg:inline", children: "RMB orbit \u00B7 MMB pan \u00B7 W/E/R gizmo \u00B7 F frame \u00B7 ? shortcuts" }), _jsxs("span", { className: "flex items-center gap-1.5", children: ["Draft autosave", _jsx("span", { className: autosave ? "text-emerald-400" : "text-neutral-600", children: autosave ? "on" : "off" })] })] }));
+}

package/dist/shell/TopAppBar.d.ts

@@ -0,0 +1,33 @@
+/** @internal Re-export for historical TopAppBar importers. */
+export { formatSavedRelative } from "./formatSavedRelative.js";
+/** Document save lifecycle mirrored from `useDocumentSave`. */
+export type TopBarSaveState = "idle" | "saving" | "saved" | "error";
+/**
+ * Global application bar: identity + save state on the left, command palette in the center,
+ * history / run controls / document actions on the right. Pause and Step stay disabled in
+ * edit mode; Play mode mounts {@link PlayModeBar}, which wires the same controls to the
+ * runtime pause/step RPCs so mode switches keep shell chrome.
+ */
+export declare function TopAppBar({ gameId, dirty, saveState, lastSavedAt, saveAvailable, saveError, canUndo, canRedo, onUndo, onRedo, onSave, onPlay, onWalk, onHud, onImport, onExport, onCopyJson, onOpenPalette, onToggleHelp, onResetLayout, }: {
+    gameId: string;
+    dirty: boolean;
+    saveState: TopBarSaveState;
+    /** Epoch ms of the last successful save this session; omit/null when never saved. */
+    lastSavedAt?: number | null;
+    saveAvailable: boolean;
+    saveError: string | null;
+    canUndo: boolean;
+    canRedo: boolean;
+    onUndo: () => void;
+    onRedo: () => void;
+    onSave: () => void;
+    onPlay: () => void;
+    onWalk: () => void;
+    onHud: () => void;
+    onImport: () => void;
+    onExport: () => void;
+    onCopyJson: () => void;
+    onOpenPalette: () => void;
+    onToggleHelp: () => void;
+    onResetLayout: () => void;
+}): import("react").JSX.Element;

package/dist/shell/TopAppBar.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { formatSavedRelative } from "./formatSavedRelative.js";
+import { Icon } from "./icons.js";
+import { BORDER, FOCUS_RING } from "./theme.js";
+import { IconButton, Kbd, ToolbarDivider } from "./ui.js";
+/** @internal Re-export for historical TopAppBar importers. */
+export { formatSavedRelative } from "./formatSavedRelative.js";
+function SaveStatus({ dirty, saveState, lastSavedAt, }) {
+    // Tick once a minute so "Saved 2m ago" advances without a save/dirty transition.
+    const [, setTick] = useState(0);
+    useEffect(() => {
+        if (dirty || lastSavedAt === null)
+            return;
+        const id = window.setInterval(() => setTick((value) => value + 1), 30_000);
+        return () => window.clearInterval(id);
+    }, [dirty, lastSavedAt]);
+    if (saveState === "saving") {
+        return (_jsxs("span", { className: "flex items-center gap-1.5 text-[11px] text-neutral-400", children: [_jsx("span", { className: "h-1.5 w-1.5 animate-pulse rounded-full bg-cyan-400" }), "Saving\u2026"] }));
+    }
+    if (saveState === "error") {
+        return (_jsxs("span", { className: "flex items-center gap-1.5 text-[11px] text-rose-300", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-rose-400" }), "Save failed"] }));
+    }
+    if (dirty) {
+        return (_jsxs("span", { className: "flex items-center gap-1.5 text-[11px] text-amber-300/90", title: "Unsaved edits", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-400" }), "Unsaved changes"] }));
+    }
+    const relative = lastSavedAt === null ? null : formatSavedRelative(lastSavedAt);
+    const label = relative === null ? "Saved" : relative === "just now" ? "Saved just now" : `Saved ${relative}`;
+    return (_jsxs("span", { className: "flex items-center gap-1.5 text-[11px] text-neutral-500", title: lastSavedAt === null ? "All edits saved" : `Last saved ${new Date(lastSavedAt).toLocaleString()}`, children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500/80" }), label] }));
+}
+/**
+ * Global application bar: identity + save state on the left, command palette in the center,
+ * history / run controls / document actions on the right. Pause and Step stay disabled in
+ * edit mode; Play mode mounts {@link PlayModeBar}, which wires the same controls to the
+ * runtime pause/step RPCs so mode switches keep shell chrome.
+ */
+export function TopAppBar({ gameId, dirty, saveState, lastSavedAt = null, saveAvailable, saveError, canUndo, canRedo, onUndo, onRedo, onSave, onPlay, onWalk, onHud, onImport, onExport, onCopyJson, onOpenPalette, onToggleHelp, onResetLayout, }) {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const menuRef = useRef(null);
+    useEffect(() => {
+        if (!menuOpen)
+            return;
+        const onPointerDown = (event) => {
+            if (menuRef.current !== null && !menuRef.current.contains(event.target))
+                setMenuOpen(false);
+        };
+        const onKey = (event) => {
+            if (event.key === "Escape")
+                setMenuOpen(false);
+        };
+        window.addEventListener("pointerdown", onPointerDown);
+        window.addEventListener("keydown", onKey);
+        return () => {
+            window.removeEventListener("pointerdown", onPointerDown);
+            window.removeEventListener("keydown", onKey);
+        };
+    }, [menuOpen]);
+    const menuItem = `flex w-full items-center gap-2 rounded-[5px] px-2.5 py-1.5 text-left text-[12px] text-neutral-300 transition-colors hover:bg-cyan-500/15 hover:text-cyan-100 ${FOCUS_RING}`;
+    return (_jsxs("header", { className: `pointer-events-auto relative z-[60] flex h-12 shrink-0 items-center gap-2 border-b ${BORDER} bg-[#111318] px-2.5`, children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px] bg-gradient-to-br from-cyan-500/30 to-indigo-500/25 text-[11px] font-bold tracking-wide text-cyan-200 ring-1 ring-inset ring-cyan-400/30", "aria-hidden": "true", children: "JG" }), _jsxs("div", { className: "min-w-0 leading-tight", children: [_jsx("div", { className: "truncate text-[13px] font-semibold text-neutral-100", children: gameId }), _jsx("div", { className: "text-[10px] text-neutral-500", children: "Scene Editor" })] }), _jsx("div", { className: "ml-1 hidden md:block", children: _jsx(SaveStatus, { dirty: dirty, saveState: saveState, lastSavedAt: lastSavedAt }) })] }), _jsx("div", { className: "flex flex-1 justify-center px-2", children: _jsxs("button", { type: "button", onClick: onOpenPalette, "aria-label": "Open command palette", className: `flex h-8 w-full max-w-[420px] items-center gap-2 rounded-[6px] border border-white/[0.08] bg-black/30 px-3 text-[12px] text-neutral-500 transition-colors hover:border-white/[0.14] hover:text-neutral-400 ${FOCUS_RING}`, children: [_jsx(Icon, { name: "search", size: 13 }), _jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: "Search or run a command\u2026" }), _jsxs("span", { className: "hidden items-center gap-0.5 sm:flex", children: [_jsx(Kbd, { children: "Ctrl" }), _jsx(Kbd, { children: "K" })] })] }) }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx(IconButton, { icon: "undo", label: "Undo (Ctrl+Z)", onClick: onUndo, disabled: !canUndo, tone: "ghost" }), _jsx(IconButton, { icon: "redo", label: "Redo (Ctrl+Y)", onClick: onRedo, disabled: !canRedo, tone: "ghost" }), _jsx(ToolbarDivider, {}), _jsxs("button", { type: "button", onClick: onPlay, className: `flex h-8 items-center gap-1.5 rounded-[6px] bg-emerald-600 px-3.5 text-[12px] font-semibold text-white shadow-sm shadow-emerald-950/40 transition-colors hover:bg-emerald-500 ${FOCUS_RING}`, title: "Enter Play mode (F2+E toggles back)", children: [_jsx(Icon, { name: "play", size: 12 }), "Play"] }), _jsx(IconButton, { icon: "pause", label: "Pause \u2014 available in Play mode", disabled: true }), _jsx(IconButton, { icon: "step", label: "Step one frame \u2014 available in Play mode", disabled: true }), _jsx(ToolbarDivider, {}), _jsx(IconButton, { icon: "walk", label: "Walk the world", onClick: onWalk, tone: "ghost" }), _jsx(IconButton, { icon: "panel", label: "Lay out HUD panels", onClick: onHud, tone: "ghost" }), _jsx(ToolbarDivider, {}), saveAvailable ? (_jsxs("button", { type: "button", onClick: onSave, disabled: saveState === "saving", title: saveError ?? "Write the scene to the game's editor.scene.json (Ctrl+S)", className: `flex h-8 items-center gap-1.5 rounded-[6px] px-3 text-[12px] font-medium transition-colors ${FOCUS_RING} ${saveState === "error"
+                            ? "bg-rose-600/90 text-white hover:bg-rose-500"
+                            : dirty
+                                ? "bg-cyan-600 text-white shadow-sm shadow-cyan-950/40 hover:bg-cyan-500"
+                                : "border border-white/[0.07] bg-[#191d24] text-neutral-400 hover:bg-[#1f242d]"}`, children: [_jsx(Icon, { name: "save", size: 12 }), saveState === "saving" ? "Saving…" : saveState === "error" ? "Retry save" : "Save"] })) : (_jsxs("button", { type: "button", onClick: onExport, title: "Download the scene document JSON", className: `flex h-8 items-center gap-1.5 rounded-[6px] border border-cyan-400/30 bg-cyan-500/15 px-3 text-[12px] font-medium text-cyan-200 transition-colors hover:bg-cyan-500/25 ${FOCUS_RING}`, children: [_jsx(Icon, { name: "export", size: 12 }), "Export"] })), _jsxs("div", { className: "relative", ref: menuRef, children: [_jsx(IconButton, { icon: "settings", label: "Editor menu", onClick: () => setMenuOpen((value) => !value), active: menuOpen, tone: "ghost" }), menuOpen ? (_jsxs("div", { className: "absolute right-0 top-9 z-[70] w-56 rounded-[8px] border border-white/10 bg-[#14171d] p-1.5 shadow-2xl shadow-black/60", children: [_jsxs("button", { type: "button", className: menuItem, onClick: () => { setMenuOpen(false); onImport(); }, children: [_jsx(Icon, { name: "import", size: 13 }), " Import scene JSON\u2026"] }), _jsxs("button", { type: "button", className: menuItem, onClick: () => { setMenuOpen(false); onExport(); }, children: [_jsx(Icon, { name: "export", size: 13 }), " Export scene JSON"] }), _jsxs("button", { type: "button", className: menuItem, onClick: () => { setMenuOpen(false); onCopyJson(); }, children: [_jsx(Icon, { name: "copy", size: 13 }), " Copy JSON to clipboard"] }), _jsx("div", { className: "my-1 h-px bg-white/[0.07]" }), _jsxs("button", { type: "button", className: menuItem, onClick: () => { setMenuOpen(false); onResetLayout(); }, children: [_jsx(Icon, { name: "panel", size: 13 }), " Reset panel layout"] }), _jsxs("button", { type: "button", className: menuItem, onClick: () => { setMenuOpen(false); onToggleHelp(); }, children: [_jsx(Icon, { name: "help", size: 13 }), " Keyboard shortcuts"] })] })) : null] }), _jsx(IconButton, { icon: "help", label: "Keyboard shortcuts (?)", onClick: onToggleHelp, tone: "ghost" })] })] }));
+}

package/dist/shell/ViewportOverlays.d.ts

@@ -0,0 +1,23 @@
+import type { EditorDocument } from "@jgengine/core/editor/index";
+import type { EditorHostApi } from "../session.js";
+/**
+ * Top-left viewport performance readout backed by the real in-canvas {@link PerfProbe} samples.
+ * Rows without data (no sample yet) simply don't render — nothing is fabricated.
+ */
+export declare const PerformanceOverlay: import("react").MemoExoticComponent<({ api }: {
+    api: EditorHostApi;
+}) => import("react").JSX.Element | null>;
+/**
+ * Bottom-left orientation axis widget. Reads the camera basis published by the in-canvas probe on
+ * its own rAF loop and mutates SVG attributes directly, so orbiting never rerenders React.
+ */
+export declare const OrientationWidget: import("react").MemoExoticComponent<() => import("react").JSX.Element>;
+/**
+ * Top-right collapsible viewport utility panel: real minimap from `document.minimap` when baked
+ * (via `bake_minimap` RPC — never a fake image), plus per-kind object counts and framing actions.
+ */
+export declare function ViewportUtilityPanel({ document, api, selectionCount, }: {
+    document: EditorDocument;
+    api: EditorHostApi;
+    selectionCount: number;
+}): import("react").JSX.Element;

package/dist/shell/ViewportOverlays.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { classifyEditorPerf } from "../perfPill.js";
+import { getCameraTelemetry } from "./cameraTelemetry.js";
+import { Icon } from "./icons.js";
+import { formatTriangles, usePerfSample } from "./StatusBar.js";
+import { FOCUS_RING, NUMERIC } from "./theme.js";
+import { IconButton } from "./ui.js";
+const OVERLAY_CARD = "rounded-[7px] border border-white/[0.08] bg-[#0e1014]/85 shadow-lg shadow-black/40 backdrop-blur-md";
+/**
+ * Top-left viewport performance readout backed by the real in-canvas {@link PerfProbe} samples.
+ * Rows without data (no sample yet) simply don't render — nothing is fabricated.
+ */
+export const PerformanceOverlay = memo(function PerformanceOverlay({ api }) {
+    const perf = usePerfSample(api);
+    if (perf === null)
+        return null;
+    const tone = classifyEditorPerf(perf);
+    // A throttled render-on-demand window reports huge frame gaps and a reset draw counter;
+    // show placeholders instead of implying a 2,000ms frame.
+    const stale = tone === "idle" && perf.drawCalls === 0;
+    const rows = [
+        ["FPS", tone === "idle" ? "idle" : perf.fps.toFixed(0)],
+        ["Frame", stale ? "—" : `${perf.frameMs.toFixed(2)} ms`],
+        ["Draw calls", stale ? "—" : String(perf.drawCalls)],
+        ["Tris", stale ? "—" : formatTriangles(perf.triangles)],
+    ];
+    if (perf.authoringMs !== undefined && perf.authoringMs > 0) {
+        rows.push(["Authoring", `${perf.authoringMs.toFixed(1)} ms`]);
+    }
+    return (_jsx("div", { className: `pointer-events-auto absolute left-2.5 top-2.5 z-30 w-36 p-2 ${OVERLAY_CARD}`, children: _jsx("div", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5", children: rows.map(([label, value]) => (_jsxs("div", { className: "contents", children: [_jsx("span", { className: "text-[10px] text-neutral-500", children: label }), _jsx("span", { className: `text-right text-[10px] ${NUMERIC} ${label === "FPS" ? (tone === "busy" ? "text-rose-300" : tone === "healthy" ? "text-emerald-300" : "text-neutral-400") : "text-neutral-300"}`, children: value })] }, label))) }) }));
+});
+const AXES = [
+    { axis: "x", color: "#f87171" },
+    { axis: "y", color: "#4ade80" },
+    { axis: "z", color: "#60a5fa" },
+];
+const WIDGET_SIZE = 84;
+const WIDGET_RADIUS = 30;
+/**
+ * Bottom-left orientation axis widget. Reads the camera basis published by the in-canvas probe on
+ * its own rAF loop and mutates SVG attributes directly, so orbiting never rerenders React.
+ */
+export const OrientationWidget = memo(function OrientationWidget() {
+    const svgRef = useRef(null);
+    const readoutRef = useRef(null);
+    useEffect(() => {
+        const telemetry = getCameraTelemetry();
+        let lastVersion = -1;
+        let frame = 0;
+        const center = WIDGET_SIZE / 2;
+        const tick = () => {
+            frame = requestAnimationFrame(tick);
+            if (telemetry.version === lastVersion)
+                return;
+            lastVersion = telemetry.version;
+            const svg = svgRef.current;
+            if (svg === null)
+                return;
+            const basis = {
+                x: { sx: telemetry.rightX, sy: telemetry.upX, depth: telemetry.forwardX },
+                y: { sx: telemetry.rightY, sy: telemetry.upY, depth: telemetry.forwardY },
+                z: { sx: telemetry.rightZ, sy: telemetry.upZ, depth: telemetry.forwardZ },
+            };
+            for (const { axis } of AXES) {
+                const line = svg.querySelector(`[data-axis-line="${axis}"]`);
+                const dot = svg.querySelector(`[data-axis-dot="${axis}"]`);
+                const text = svg.querySelector(`[data-axis-label="${axis}"]`);
+                if (line === null || dot === null || text === null)
+                    continue;
+                const { sx, sy, depth } = basis[axis];
+                const endX = center + sx * WIDGET_RADIUS;
+                const endY = center - sy * WIDGET_RADIUS;
+                line.setAttribute("x2", endX.toFixed(1));
+                line.setAttribute("y2", endY.toFixed(1));
+                dot.setAttribute("cx", endX.toFixed(1));
+                dot.setAttribute("cy", endY.toFixed(1));
+                text.setAttribute("x", (center + sx * (WIDGET_RADIUS + 8)).toFixed(1));
+                text.setAttribute("y", (center - sy * (WIDGET_RADIUS + 8) + 3).toFixed(1));
+                const toward = depth < 0;
+                const opacity = toward ? "1" : "0.45";
+                line.setAttribute("opacity", opacity);
+                dot.setAttribute("opacity", opacity);
+                text.setAttribute("opacity", opacity);
+            }
+            const readout = readoutRef.current;
+            if (readout !== null) {
+                const az = ((telemetry.azimuth * 180) / Math.PI + 360) % 360;
+                const el = (telemetry.elevation * 180) / Math.PI;
+                readout.textContent = `${az.toFixed(0)}° az · ${el.toFixed(0)}° el`;
+            }
+        };
+        frame = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(frame);
+    }, []);
+    return (_jsxs("div", { className: `pointer-events-auto absolute bottom-2.5 left-2.5 z-30 flex flex-col items-center p-1.5 ${OVERLAY_CARD}`, children: [_jsxs("svg", { ref: svgRef, width: WIDGET_SIZE, height: WIDGET_SIZE, viewBox: `0 0 ${WIDGET_SIZE} ${WIDGET_SIZE}`, "aria-label": "Camera orientation axes", role: "img", children: [_jsx("circle", { cx: WIDGET_SIZE / 2, cy: WIDGET_SIZE / 2, r: WIDGET_RADIUS + 3, fill: "rgba(255,255,255,0.02)", stroke: "rgba(255,255,255,0.06)" }), AXES.map(({ axis, color }) => (_jsxs("g", { children: [_jsx("line", { "data-axis-line": axis, x1: WIDGET_SIZE / 2, y1: WIDGET_SIZE / 2, x2: WIDGET_SIZE / 2, y2: WIDGET_SIZE / 2, stroke: color, strokeWidth: 1.5 }), _jsx("circle", { "data-axis-dot": axis, cx: WIDGET_SIZE / 2, cy: WIDGET_SIZE / 2, r: 2.5, fill: color }), _jsx("text", { "data-axis-label": axis, x: WIDGET_SIZE / 2, y: WIDGET_SIZE / 2, textAnchor: "middle", fontSize: 8, fill: color, className: "uppercase", children: axis })] }, axis)))] }), _jsx("div", { ref: readoutRef, className: `text-[9px] text-neutral-500 ${NUMERIC}` })] }));
+});
+/**
+ * Top-right collapsible viewport utility panel: real minimap from `document.minimap` when baked
+ * (via `bake_minimap` RPC — never a fake image), plus per-kind object counts and framing actions.
+ */
+export function ViewportUtilityPanel({ document, api, selectionCount, }) {
+    const [open, setOpen] = useState(true);
+    const [bakeBusy, setBakeBusy] = useState(false);
+    const [bakeError, setBakeError] = useState(null);
+    const counts = useMemo(() => {
+        const byKind = new Map();
+        const bump = (kind) => byKind.set(kind, (byKind.get(kind) ?? 0) + 1);
+        for (const marker of document.markers)
+            bump(marker.kind);
+        for (const volume of document.volumes)
+            bump(volume.kind);
+        for (const path of document.paths)
+            bump(path.kind);
+        for (let index = 0; index < document.annotations.length; index += 1)
+            bump("note");
+        return [...byKind.entries()].sort((a, b) => b[1] - a[1]).slice(0, 6);
+    }, [document]);
+    const minimap = document.minimap;
+    const bake = () => {
+        setBakeBusy(true);
+        setBakeError(null);
+        // bake_minimap is synchronous; yield so the button can show a busy state for one frame.
+        requestAnimationFrame(() => {
+            const result = api.handle({ method: "bake_minimap", resolution: 128 });
+            setBakeBusy(false);
+            if (!result.ok)
+                setBakeError(result.error ?? "bake failed");
+        });
+    };
+    return (_jsxs("div", { className: `pointer-events-auto absolute right-2.5 top-2.5 z-30 w-48 ${OVERLAY_CARD}`, children: [_jsxs("div", { className: "flex h-7 items-center gap-1.5 px-2", children: [_jsx(Icon, { name: "layers", size: 12, className: "text-neutral-500" }), _jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-neutral-400", children: "Scene overview" }), _jsx("button", { type: "button", "aria-label": open ? "Collapse scene overview" : "Expand scene overview", "aria-expanded": open, onClick: () => setOpen((value) => !value), className: `ml-auto flex h-5 w-5 items-center justify-center rounded-[4px] text-neutral-500 transition-colors hover:bg-white/[0.07] hover:text-neutral-200 ${FOCUS_RING}`, children: _jsx(Icon, { name: open ? "chevronDown" : "chevronRight", size: 10 }) })] }), open ? (_jsxs("div", { className: "border-t border-white/[0.06] p-2", children: [_jsx("div", { className: "mb-2 overflow-hidden rounded-[5px] border border-white/[0.07] bg-black/40", children: minimap !== undefined ? (_jsx("img", { src: minimap.background, alt: "Baked scene minimap", className: "block h-28 w-full object-cover", draggable: false })) : (_jsxs("div", { className: "flex h-28 flex-col items-center justify-center gap-1 px-2 text-center", children: [_jsx("span", { className: "text-[10px] text-neutral-500", children: "No minimap baked yet" }), _jsx("span", { className: "text-[9px] text-neutral-600", children: "Uses live terrain \u2014 not a placeholder image" })] })) }), _jsx("button", { type: "button", disabled: bakeBusy, onClick: bake, className: `mb-2 w-full rounded-[5px] border border-white/[0.07] bg-[#191d24] px-2 py-1 text-[10px] text-neutral-300 transition-colors hover:bg-[#1f242d] disabled:opacity-50 ${FOCUS_RING}`, children: bakeBusy ? "Baking…" : minimap !== undefined ? "Rebake minimap" : "Bake minimap" }), bakeError !== null ? _jsx("div", { className: "mb-2 text-[9px] text-rose-300", children: bakeError }) : null, counts.length === 0 ? (_jsx("div", { className: "py-1 text-[10px] text-neutral-600", children: "No authored objects yet." })) : (_jsx("div", { className: "space-y-0.5", children: counts.map(([kind, count]) => (_jsxs("div", { className: "flex items-center justify-between text-[10px]", children: [_jsx("span", { className: "truncate text-neutral-400", children: kind }), _jsx("span", { className: `text-neutral-300 ${NUMERIC}`, children: count })] }, kind))) })), _jsxs("div", { className: "mt-2 flex gap-1", children: [_jsx("button", { type: "button", onClick: () => api.handle({ method: "camera_frame" }), className: `flex-1 rounded-[5px] border border-white/[0.07] bg-[#191d24] px-2 py-1 text-[10px] text-neutral-300 transition-colors hover:bg-[#1f242d] ${FOCUS_RING}`, children: "Frame all" }), _jsx(IconButton, { icon: "target", label: "Frame selection", disabled: selectionCount === 0, onClick: () => {
+                                    const id = api.getSession().getState().selection[0];
+                                    if (id !== undefined)
+                                        api.handle({ method: "camera_goto", id });
+                                } })] })] })) : null] }));
+}

package/dist/shell/WorkspaceRail.d.ts

@@ -0,0 +1,20 @@
+import { type IconName } from "./icons.js";
+import type { EditorWorkspace } from "./layoutStore.js";
+interface RailEntry {
+    id: EditorWorkspace;
+    label: string;
+    icon: IconName;
+    /** False renders the mode as a visibly disabled, planned workspace. */
+    supported: boolean;
+}
+/** Rail order and support map. Unsupported modes are visible but disabled — never fake panels. */
+export declare const WORKSPACES: readonly RailEntry[];
+/**
+ * Narrow left workspace rail. Supported modes activate their home panels; planned modes are
+ * disabled with an explanatory tooltip so nothing pretends to work.
+ */
+export declare function WorkspaceRail({ active, onSelect, }: {
+    active: EditorWorkspace;
+    onSelect: (workspace: EditorWorkspace) => void;
+}): import("react").JSX.Element;
+export {};

package/dist/shell/WorkspaceRail.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "./icons.js";
+import { BORDER, FOCUS_RING } from "./theme.js";
+/** Rail order and support map. Unsupported modes are visible but disabled — never fake panels. */
+export const WORKSPACES = [
+    { id: "scene", label: "Scene", icon: "cube", supported: true },
+    { id: "terrain", label: "Terrain", icon: "terrain", supported: true },
+    { id: "assets", label: "Assets", icon: "image", supported: true },
+    { id: "materials", label: "Materials", icon: "sphere", supported: true },
+    { id: "scripting", label: "Scripting", icon: "script", supported: true },
+    { id: "animation", label: "Animation", icon: "film", supported: false },
+    { id: "audio", label: "Audio", icon: "audio", supported: false },
+    { id: "lighting", label: "Lighting", icon: "bulb", supported: true },
+    { id: "ai", label: "AI", icon: "sparkle", supported: true },
+    /** Presence/session inspection over host-supplied snapshot + game adapter config — never fabricated. */
+    { id: "multiplayer", label: "Network", icon: "network", supported: true },
+];
+/**
+ * Narrow left workspace rail. Supported modes activate their home panels; planned modes are
+ * disabled with an explanatory tooltip so nothing pretends to work.
+ */
+export function WorkspaceRail({ active, onSelect, }) {
+    return (_jsx("nav", { "aria-label": "Workspaces", className: `pointer-events-auto flex w-13 shrink-0 flex-col items-center gap-0.5 overflow-y-auto border-r ${BORDER} bg-[#0e1014] py-1.5 [scrollbar-width:none]`, children: WORKSPACES.map((entry) => {
+            const selected = entry.id === active;
+            return (_jsxs("button", { type: "button", disabled: !entry.supported, "aria-label": entry.supported ? `${entry.label} workspace` : `${entry.label} workspace — planned`, "aria-current": selected ? "page" : undefined, title: entry.supported ? `${entry.label} workspace` : `${entry.label} — planned workspace`, onClick: () => onSelect(entry.id), className: `relative flex w-11 flex-col items-center gap-0.5 rounded-[6px] py-1.5 transition-colors ${FOCUS_RING} ${selected
+                    ? "bg-cyan-500/15 text-cyan-200"
+                    : entry.supported
+                        ? "text-neutral-500 hover:bg-white/[0.05] hover:text-neutral-300"
+                        : "text-neutral-700"} disabled:pointer-events-none`, children: [selected ? _jsx("span", { className: "absolute -left-1 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full bg-cyan-400" }) : null, _jsx(Icon, { name: entry.icon, size: 16 }), _jsx("span", { className: "text-[9px] leading-none", children: entry.label })] }, entry.id));
+        }) }));
+}

package/dist/shell/cameraTelemetry.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Per-frame camera orientation channel between the in-canvas probe and the DOM orientation
+ * widget. Deliberately a mutable record, not React state: the probe writes every frame and the
+ * widget reads on its own rAF loop, applying styles directly — zero shell rerenders.
+ */
+export interface CameraTelemetry {
+    /** Camera-space basis (world-matrix columns): screen-projects world axes without a matrix lib. */
+    rightX: number;
+    rightY: number;
+    rightZ: number;
+    upX: number;
+    upY: number;
+    upZ: number;
+    forwardX: number;
+    forwardY: number;
+    forwardZ: number;
+    /** Camera yaw around +Y in radians (viewing direction). */
+    azimuth: number;
+    /** Camera pitch above the horizon in radians. */
+    elevation: number;
+    /** Monotonic write counter so readers can skip untouched frames. */
+    version: number;
+}
+/** Creates a telemetry record seeded at rest (identity basis). */
+export declare function createCameraTelemetry(): CameraTelemetry;
+/** Shared telemetry singleton — probe and widget may mount in different React trees. */
+export declare function getCameraTelemetry(): CameraTelemetry;

package/dist/shell/cameraTelemetry.js

@@ -0,0 +1,24 @@
+/** Creates a telemetry record seeded at rest (identity basis). */
+export function createCameraTelemetry() {
+    return {
+        rightX: 1,
+        rightY: 0,
+        rightZ: 0,
+        upX: 0,
+        upY: 1,
+        upZ: 0,
+        forwardX: 0,
+        forwardY: 0,
+        forwardZ: 1,
+        azimuth: 0,
+        elevation: 0,
+        version: 0,
+    };
+}
+const globalKey = "__jgengineEditorCameraTelemetry";
+/** Shared telemetry singleton — probe and widget may mount in different React trees. */
+export function getCameraTelemetry() {
+    const root = globalThis;
+    root[globalKey] ??= createCameraTelemetry();
+    return root[globalKey];
+}