@jgengine/editor 0.11.0 → 0.12.0

package/dist/shell/HierarchyPanel.js

@@ -0,0 +1,387 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { isEditorObjectCollectionLocked, isEditorObjectHidden, isEditorObjectLocked, isEditorObjectSelfLocked, } from "@jgengine/core/editor/index";
+import { MATERIAL_DRAG_MIME } from "../AssetBrowser.js";
+import { flattenOutliner } from "../outlinerModel.js";
+import { shallowArrayEqual, useStoreSelector, virtualWindow } from "../useStoreSelector.js";
+import { hierarchyActiveDescendantId, hierarchyRowDomId, selectableIds, } from "./hierarchyA11y.js";
+import { Icon, kindIcon } from "./icons.js";
+import { renameEditorObject } from "./renameObject.js";
+import { FOCUS_RING, INPUT_CLS, NUMERIC } from "./theme.js";
+import { IconButton, Segmented } from "./ui.js";
+export { hierarchyActiveDescendantId, hierarchyRowDomId, selectableIds, } from "./hierarchyA11y.js";
+const ROW_HEIGHT = 26;
+/** HTML5 drag payload for hierarchy reparenting via `set_parent`. */
+export const OBJECT_DRAG_MIME = "application/x-jgengine-editor-object";
+function dataTransferHas(types, mime) {
+    return types.includes(mime);
+}
+/**
+ * Mouse activation of row chrome must not steal focus from the tree container — focus stays on
+ * the list for roving tabindex / `aria-activedescendant`. Rename inputs still take focus.
+ */
+function preventFocusSteal(event) {
+    const target = event.target;
+    if (target instanceof HTMLElement && target.closest("input") !== null)
+        return;
+    event.preventDefault();
+}
+/**
+ * Redesigned world outliner: searchable, virtualized, kind-iconed rows generated from the live
+ * document. Group headers carry real per-kind visibility toggles (the editor's layer system);
+ * rows expose per-object eye/lock toggles (`setObjectFlags` → document `hidden`/`locked`) and show
+ * a lock affordance when a locked collection also owns the id. Tree view supports drag-and-drop
+ * reparenting through the existing `set_parent` RPC. Keyboard navigation uses a single tab stop
+ * on the list (roving active row via `aria-activedescendant`; arrows / Home / End / Enter / F2),
+ * double-click rename, and row context menus (frame / duplicate / delete / prefab / parent to… /
+ * unparent) are supported. Selector-subscribed and memoized, so UI-only churn never rerenders it.
+ */
+export const HierarchyPanel = memo(function HierarchyPanel({ session, api, onAdd, onRowContextMenu, }) {
+    const document = useStoreSelector(session, (state) => state.document);
+    const selection = useStoreSelector(session, (state) => state.selection, shallowArrayEqual);
+    const selectedId = selection[0];
+    const [view, setView] = useState("kind");
+    const [query, setQuery] = useState("");
+    const [collapsedKinds, setCollapsedKinds] = useState({});
+    const [collapsedNodes, setCollapsedNodes] = useState({});
+    const [visibilityTick, setVisibilityTick] = useState(0);
+    useEffect(() => api.subscribeVisibility(() => setVisibilityTick((value) => value + 1)), [api]);
+    void visibilityTick;
+    const visibility = api.getVisibility();
+    const rows = useMemo(() => flattenOutliner(document, { view, query, collapsedKinds, collapsedNodes }), [document, view, query, collapsedKinds, collapsedNodes]);
+    const total = document.markers.length + document.volumes.length + document.paths.length + document.annotations.length;
+    const scrollRef = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [viewportHeight, setViewportHeight] = useState(320);
+    useEffect(() => {
+        const element = scrollRef.current;
+        if (element === null)
+            return;
+        const measure = () => setViewportHeight(element.clientHeight);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const win = virtualWindow(scrollTop, viewportHeight, ROW_HEIGHT, rows.length);
+    const visible = rows.slice(win.start, win.end);
+    const selectRow = (id, additive) => {
+        if (additive) {
+            const current = session.getState().selection;
+            const next = current.includes(id) ? current.filter((entry) => entry !== id) : [...current, id];
+            session.dispatch({ type: "select", ids: next });
+            return;
+        }
+        session.dispatch({ type: "select", ids: [id] });
+        api.handle({ method: "camera_goto", id });
+    };
+    const navigableIds = useMemo(() => selectableIds(rows), [rows]);
+    const [activeId, setActiveId] = useState(null);
+    const [renamingId, setRenamingId] = useState(null);
+    const [renameDraft, setRenameDraft] = useState("");
+    const renameInputRef = useRef(null);
+    useEffect(() => {
+        if (activeId !== null && !navigableIds.includes(activeId))
+            setActiveId(navigableIds[0] ?? null);
+    }, [activeId, navigableIds]);
+    useEffect(() => {
+        if (renamingId !== null)
+            renameInputRef.current?.focus();
+    }, [renamingId]);
+    const focusTree = () => {
+        scrollRef.current?.focus({ preventScroll: true });
+    };
+    const scrollRowIntoView = (id) => {
+        const rowIndex = rows.findIndex((row) => (row.type === "kindItem" && row.ids[0] === id) || (row.type === "treeItem" && row.id === id));
+        if (rowIndex < 0 || scrollRef.current === null)
+            return;
+        const top = rowIndex * ROW_HEIGHT;
+        const bottom = top + ROW_HEIGHT;
+        const viewTop = scrollRef.current.scrollTop;
+        const viewBottom = viewTop + scrollRef.current.clientHeight;
+        if (top < viewTop)
+            scrollRef.current.scrollTop = top;
+        else if (bottom > viewBottom)
+            scrollRef.current.scrollTop = bottom - scrollRef.current.clientHeight;
+    };
+    const activateId = (id, additive) => {
+        setActiveId(id);
+        selectRow(id, additive);
+        scrollRowIntoView(id);
+    };
+    const beginRename = (id, label) => {
+        setRenamingId(id);
+        setRenameDraft(label);
+        setActiveId(id);
+    };
+    const endRename = () => {
+        setRenamingId(null);
+        // Restore the single tree tab stop after the rename input unmounts.
+        queueMicrotask(focusTree);
+    };
+    const commitRename = () => {
+        if (renamingId === null)
+            return;
+        renameEditorObject(session, renamingId, renameDraft);
+        endRename();
+    };
+    const cancelRename = () => endRename();
+    const onListFocus = () => {
+        if (renamingId !== null)
+            return;
+        if (activeId !== null && navigableIds.includes(activeId))
+            return;
+        const seed = selectedId !== undefined && navigableIds.includes(selectedId)
+            ? selectedId
+            : (navigableIds[0] ?? null);
+        if (seed !== null)
+            setActiveId(seed);
+    };
+    const onListKeyDown = (event) => {
+        if (renamingId !== null)
+            return;
+        if (navigableIds.length === 0)
+            return;
+        const currentIndex = activeId === null ? -1 : navigableIds.indexOf(activeId);
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            const delta = event.key === "ArrowDown" ? 1 : -1;
+            const nextIndex = currentIndex < 0
+                ? event.key === "ArrowDown"
+                    ? 0
+                    : navigableIds.length - 1
+                : Math.max(0, Math.min(navigableIds.length - 1, currentIndex + delta));
+            activateId(navigableIds[nextIndex], event.shiftKey);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            activateId(navigableIds[0], event.shiftKey);
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            activateId(navigableIds[navigableIds.length - 1], event.shiftKey);
+            return;
+        }
+        if (event.key === "Enter" && activeId !== null) {
+            event.preventDefault();
+            api.handle({ method: "camera_goto", id: activeId });
+            return;
+        }
+        if (event.key === "F2" && activeId !== null) {
+            event.preventDefault();
+            const row = rows.find((entry) => (entry.type === "kindItem" && entry.ids[0] === activeId) ||
+                (entry.type === "treeItem" && entry.id === activeId));
+            if (row !== undefined && (row.type === "kindItem" || row.type === "treeItem")) {
+                beginRename(activeId, row.label);
+            }
+        }
+    };
+    const [materialDropTarget, setMaterialDropTarget] = useState(null);
+    const [reparentDropTarget, setReparentDropTarget] = useState(null);
+    const [draggingObjectId, setDraggingObjectId] = useState(null);
+    const acceptMaterialDrop = (event, _ids, key) => {
+        if (!dataTransferHas(event.dataTransfer.types, MATERIAL_DRAG_MIME))
+            return false;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+        if (materialDropTarget !== key)
+            setMaterialDropTarget(key);
+        return true;
+    };
+    const commitMaterialDrop = (event, ids) => {
+        const materialId = event.dataTransfer.getData(MATERIAL_DRAG_MIME);
+        if (materialId.length === 0)
+            return false;
+        event.preventDefault();
+        setMaterialDropTarget(null);
+        api.handle({ method: "assign_material", ids: [...ids], materialId });
+        return true;
+    };
+    const acceptReparentDrop = (event, key) => {
+        if (!dataTransferHas(event.dataTransfer.types, OBJECT_DRAG_MIME))
+            return false;
+        if (dataTransferHas(event.dataTransfer.types, MATERIAL_DRAG_MIME))
+            return false;
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = "move";
+        if (reparentDropTarget !== key)
+            setReparentDropTarget(key);
+        return true;
+    };
+    const commitReparentDrop = (event, parentId) => {
+        const objectId = event.dataTransfer.getData(OBJECT_DRAG_MIME);
+        if (objectId.length === 0)
+            return false;
+        event.preventDefault();
+        event.stopPropagation();
+        setReparentDropTarget(null);
+        setDraggingObjectId(null);
+        if (parentId === objectId)
+            return true;
+        api.handle({ method: "set_parent", ids: [objectId], parentId });
+        return true;
+    };
+    const rowLocked = (ids) => ids.some((id) => isEditorObjectLocked(document, id));
+    const rowHidden = (ids) => ids.some((id) => isEditorObjectHidden(document, id));
+    const toggleHidden = (ids) => {
+        const nextHidden = !rowHidden(ids);
+        session.dispatch({ type: "setObjectFlags", ids: [...ids], patch: { hidden: nextHidden } });
+    };
+    /**
+     * Toggle object-level lock. When the object is only locked via a collection, do not silently
+     * invent an object lock — leave collection locks to the Collections panel.
+     */
+    const toggleLocked = (ids) => {
+        const anySelfLocked = ids.some((id) => isEditorObjectSelfLocked(document, id));
+        if (anySelfLocked) {
+            session.dispatch({ type: "setObjectFlags", ids: [...ids], patch: { locked: false } });
+            return;
+        }
+        const onlyCollection = ids.every((id) => isEditorObjectCollectionLocked(document, id) && !isEditorObjectSelfLocked(document, id));
+        if (onlyCollection)
+            return;
+        session.dispatch({ type: "setObjectFlags", ids: [...ids], patch: { locked: true } });
+    };
+    const activeDescendant = hierarchyActiveDescendantId(activeId, navigableIds);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-1.5 border-b border-white/[0.06] p-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("div", { className: "relative min-w-0 flex-1", children: [_jsx(Icon, { name: "search", size: 12, className: "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-neutral-600" }), _jsx("input", { type: "search", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search\u2026", "aria-label": "Search scene objects", className: `h-7 w-full pl-7 pr-2 ${INPUT_CLS}` })] }), _jsx(IconButton, { icon: "plus", label: "Add object\u2026", onClick: onAdd })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Segmented, { ariaLabel: "Outliner grouping", value: view, onChange: setView, options: [
+                                    { value: "kind", label: "By kind", icon: "layers" },
+                                    { value: "tree", label: "Tree", icon: "folder" },
+                                ] }), _jsxs("span", { className: `ml-auto text-[10px] text-neutral-600 ${NUMERIC}`, children: [total, " objects"] })] }), view === "tree" ? (_jsx("p", { className: "px-0.5 text-[10px] text-neutral-600", children: "Drag rows to reparent \u00B7 drop on empty list to unparent \u00B7 F2 rename" })) : null] }), _jsx("div", { ref: scrollRef, className: `min-h-0 flex-1 overflow-auto px-1.5 py-1 outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-cyan-400/40 ${reparentDropTarget === "__root__" ? "bg-cyan-500/10 ring-1 ring-inset ring-cyan-400/30" : ""}`, tabIndex: 0, role: "tree", "aria-label": "Scene hierarchy", "aria-multiselectable": "true", "aria-activedescendant": activeDescendant, onScroll: (event) => setScrollTop(event.currentTarget.scrollTop), onFocus: onListFocus, onKeyDown: onListKeyDown, onDragOver: view === "tree"
+                    ? (event) => {
+                        acceptReparentDrop(event, "__root__");
+                    }
+                    : undefined, onDragLeave: view === "tree"
+                    ? () => setReparentDropTarget((current) => (current === "__root__" ? null : current))
+                    : undefined, onDrop: view === "tree"
+                    ? (event) => {
+                        commitReparentDrop(event, null);
+                    }
+                    : undefined, children: rows.length === 0 ? (_jsx("div", { className: "p-4 text-center text-[11px] text-neutral-600", children: query.length > 0 ? "No matching objects." : "No objects yet — use Add or place assets from the Content Browser." })) : (_jsx("div", { style: { height: win.totalHeight, position: "relative" }, role: "none", children: _jsx("div", { style: { transform: `translateY(${win.offsetTop}px)` }, role: "none", children: visible.map((row) => {
+                            if (row.type === "group") {
+                                const kindVisible = visibility[row.kind] !== false;
+                                return (_jsxs("div", { role: "presentation", style: { height: ROW_HEIGHT }, className: "group flex items-center gap-0.5 pr-0.5", children: [_jsxs("button", { type: "button", tabIndex: -1, className: `flex h-full min-w-0 flex-1 items-center gap-1 rounded-[5px] px-1 text-left text-[11px] font-semibold text-neutral-300 transition-colors hover:bg-white/[0.05] ${FOCUS_RING}`, onMouseDown: preventFocusSteal, onClick: () => setCollapsedKinds((previous) => ({ ...previous, [row.kind]: !(previous[row.kind] === true) })), "aria-expanded": !row.collapsed, children: [_jsx(Icon, { name: row.collapsed ? "chevronRight" : "chevronDown", size: 10, className: "shrink-0 text-neutral-600" }), _jsx(Icon, { name: row.collapsed ? "folder" : "folderOpen", size: 13, className: "shrink-0 text-neutral-500" }), _jsx("span", { className: "truncate", children: row.kind }), _jsx("span", { className: `ml-auto pr-1 text-[10px] font-normal text-neutral-600 ${NUMERIC}`, children: row.total })] }), _jsx("button", { type: "button", tabIndex: -1, "aria-label": kindVisible ? `Hide ${row.kind} layer` : `Show ${row.kind} layer`, "aria-pressed": kindVisible, title: kindVisible ? `Hide ${row.kind} layer` : `Show ${row.kind} layer`, onMouseDown: preventFocusSteal, onClick: () => api.setVisibility({ ...api.getVisibility(), [row.kind]: !kindVisible }), className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-[4px] transition-colors hover:bg-white/[0.08] ${FOCUS_RING} ${kindVisible ? "text-neutral-500 opacity-0 group-hover:opacity-100 focus-visible:opacity-100" : "text-neutral-600"}`, children: _jsx(Icon, { name: kindVisible ? "eye" : "eyeOff", size: 12 }) })] }, row.key));
+                            }
+                            if (row.type === "kindItem") {
+                                const primaryId = row.ids[0];
+                                const rowSelected = selectedId !== undefined && row.ids.includes(selectedId);
+                                const cycleIndex = rowSelected ? row.ids.indexOf(selectedId) + 1 : 0;
+                                const dropActive = materialDropTarget === row.key;
+                                const locked = rowLocked(row.ids);
+                                const hidden = rowHidden(row.ids);
+                                const collectionOnlyLock = locked &&
+                                    row.ids.every((id) => isEditorObjectCollectionLocked(document, id) && !isEditorObjectSelfLocked(document, id));
+                                const active = activeId === primaryId;
+                                const renaming = renamingId === primaryId && row.ids.length === 1;
+                                return (_jsxs("div", { id: hierarchyRowDomId(primaryId), role: "treeitem", "aria-selected": rowSelected, "aria-level": 2, style: { height: ROW_HEIGHT }, className: `group flex w-full items-center gap-0.5 rounded-[5px] pl-6 pr-0.5 text-[11px] transition-colors ${dropActive
+                                        ? "bg-cyan-500/25 ring-1 ring-inset ring-cyan-300/50"
+                                        : rowSelected || active
+                                            ? "bg-cyan-500/15 text-cyan-100 ring-1 ring-inset ring-cyan-400/25"
+                                            : "text-neutral-300 hover:bg-white/[0.05]"} ${hidden ? "opacity-55" : ""}`, onDragOver: (event) => {
+                                        acceptMaterialDrop(event, row.ids, row.key);
+                                    }, onDragLeave: () => setMaterialDropTarget((current) => (current === row.key ? null : current)), onDrop: (event) => {
+                                        commitMaterialDrop(event, row.ids);
+                                    }, children: [_jsxs("button", { type: "button", tabIndex: -1, className: `flex h-full min-w-0 flex-1 items-center gap-1.5 truncate rounded-[5px] pr-1 text-left ${FOCUS_RING}`, onMouseDown: preventFocusSteal, onClick: (event) => {
+                                                setActiveId(primaryId);
+                                                selectRow(primaryId, event.ctrlKey || event.metaKey || event.shiftKey);
+                                                focusTree();
+                                            }, onDoubleClick: () => {
+                                                if (row.ids.length === 1)
+                                                    beginRename(primaryId, row.label);
+                                            }, onContextMenu: (event) => {
+                                                event.preventDefault();
+                                                setActiveId(primaryId);
+                                                onRowContextMenu?.({ clientX: event.clientX, clientY: event.clientY }, primaryId);
+                                            }, children: [_jsx(Icon, { name: kindIcon(row.kind), size: 13, className: `shrink-0 ${rowSelected || active ? "text-cyan-300" : "text-neutral-500"}` }), renaming ? (_jsx("input", { ref: renameInputRef, value: renameDraft, onChange: (event) => setRenameDraft(event.target.value), onBlur: commitRename, onKeyDown: (event) => {
+                                                        event.stopPropagation();
+                                                        if (event.key === "Enter") {
+                                                            event.preventDefault();
+                                                            commitRename();
+                                                        }
+                                                        else if (event.key === "Escape") {
+                                                            event.preventDefault();
+                                                            cancelRename();
+                                                        }
+                                                    }, onClick: (event) => event.stopPropagation(), className: `min-w-0 flex-1 rounded-[3px] border border-cyan-400/40 bg-black/40 px-1 py-0 text-[11px] text-neutral-100 outline-none ${FOCUS_RING}`, "aria-label": "Rename object" })) : (_jsxs("span", { className: "min-w-0 flex-1 truncate", children: [row.label, row.ids.length > 1 ? (_jsxs("span", { className: `text-neutral-500 ${NUMERIC}`, children: [" ", "\u00D7", row.ids.length, rowSelected ? ` · ${cycleIndex}/${row.ids.length} · N next` : ""] })) : null] }))] }), _jsx("button", { type: "button", tabIndex: -1, "aria-label": hidden ? "Show object in viewport" : "Hide object in viewport", "aria-pressed": !hidden, title: hidden ? "Show in viewport" : "Hide in viewport", onMouseDown: preventFocusSteal, onClick: (event) => {
+                                                event.stopPropagation();
+                                                toggleHidden(row.ids);
+                                            }, className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-[4px] transition-colors hover:bg-white/[0.08] ${FOCUS_RING} ${hidden
+                                                ? "text-neutral-500"
+                                                : "text-neutral-500 opacity-0 group-hover:opacity-100 focus-visible:opacity-100"}`, children: _jsx(Icon, { name: hidden ? "eyeOff" : "eye", size: 12 }) }), _jsx("button", { type: "button", tabIndex: -1, "aria-label": collectionOnlyLock
+                                                ? "Locked by collection"
+                                                : locked
+                                                    ? "Unlock object"
+                                                    : "Lock object", "aria-pressed": locked, title: collectionOnlyLock
+                                                ? "Locked by collection — unlock in Collections panel"
+                                                : locked
+                                                    ? "Unlock object"
+                                                    : "Lock object", disabled: collectionOnlyLock, onMouseDown: preventFocusSteal, onClick: (event) => {
+                                                event.stopPropagation();
+                                                toggleLocked(row.ids);
+                                            }, className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-[4px] transition-colors hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-60 ${FOCUS_RING} ${locked
+                                                ? "text-amber-400/80"
+                                                : "text-neutral-500 opacity-0 group-hover:opacity-100 focus-visible:opacity-100"}`, children: _jsx(Icon, { name: locked ? "lock" : "unlock", size: 11 }) })] }, row.key));
+                            }
+                            const rowSelected = selection.includes(row.id);
+                            const materialDrop = materialDropTarget === row.key;
+                            const reparentDrop = reparentDropTarget === row.key && draggingObjectId !== row.id;
+                            const locked = isEditorObjectLocked(document, row.id);
+                            const hidden = isEditorObjectHidden(document, row.id);
+                            const collectionOnlyLock = isEditorObjectCollectionLocked(document, row.id) && !isEditorObjectSelfLocked(document, row.id);
+                            const dragging = draggingObjectId === row.id;
+                            const active = activeId === row.id;
+                            const renaming = renamingId === row.id;
+                            const expanded = row.hasChildren ? collapsedNodes[row.id] !== true : undefined;
+                            return (_jsxs("div", { id: hierarchyRowDomId(row.id), role: "treeitem", "aria-selected": rowSelected, "aria-level": row.depth + 1, "aria-expanded": expanded, style: { height: ROW_HEIGHT, paddingLeft: `${row.depth * 12}px` }, className: `group flex items-center ${hidden ? "opacity-55" : ""}`, children: [row.hasChildren ? (_jsx("button", { type: "button", tabIndex: -1, "aria-label": collapsedNodes[row.id] === true ? "Expand children" : "Collapse children", className: `flex h-4 w-4 shrink-0 items-center justify-center text-neutral-500 transition-colors hover:text-neutral-200 ${FOCUS_RING}`, onMouseDown: preventFocusSteal, onClick: () => setCollapsedNodes((previous) => ({ ...previous, [row.id]: !(previous[row.id] === true) })), children: _jsx(Icon, { name: collapsedNodes[row.id] === true ? "chevronRight" : "chevronDown", size: 10 }) })) : (_jsx("span", { className: "w-4 shrink-0", "aria-hidden": "true" })), _jsxs("button", { type: "button", tabIndex: -1, draggable: true, className: `flex h-full min-w-0 flex-1 items-center gap-1.5 truncate rounded-[5px] px-1.5 text-left text-[11px] transition-colors ${FOCUS_RING} ${materialDrop || reparentDrop
+                                            ? "bg-cyan-500/25 ring-1 ring-inset ring-cyan-300/50"
+                                            : rowSelected || active
+                                                ? "bg-cyan-500/15 text-cyan-100 ring-1 ring-inset ring-cyan-400/25"
+                                                : "text-neutral-300 hover:bg-white/[0.05]"} ${dragging ? "opacity-50" : ""}`, onMouseDown: preventFocusSteal, onClick: (event) => {
+                                            setActiveId(row.id);
+                                            selectRow(row.id, event.ctrlKey || event.metaKey || event.shiftKey);
+                                            focusTree();
+                                        }, onDoubleClick: () => beginRename(row.id, row.label), onContextMenu: (event) => {
+                                            event.preventDefault();
+                                            setActiveId(row.id);
+                                            onRowContextMenu?.({ clientX: event.clientX, clientY: event.clientY }, row.id);
+                                        }, title: `${row.id} — drag to reparent · F2 rename · Enter frame · right-click menu`, onDragStart: (event) => {
+                                            event.dataTransfer.setData(OBJECT_DRAG_MIME, row.id);
+                                            event.dataTransfer.effectAllowed = "move";
+                                            setDraggingObjectId(row.id);
+                                        }, onDragEnd: () => {
+                                            setDraggingObjectId(null);
+                                            setReparentDropTarget(null);
+                                        }, onDragOver: (event) => {
+                                            if (acceptMaterialDrop(event, [row.id], row.key))
+                                                return;
+                                            acceptReparentDrop(event, row.key);
+                                        }, onDragLeave: () => {
+                                            setMaterialDropTarget((current) => (current === row.key ? null : current));
+                                            setReparentDropTarget((current) => (current === row.key ? null : current));
+                                        }, onDrop: (event) => {
+                                            if (commitMaterialDrop(event, [row.id]))
+                                                return;
+                                            commitReparentDrop(event, row.id);
+                                        }, children: [_jsx(Icon, { name: kindIcon(row.kind), size: 13, className: `shrink-0 ${rowSelected || active ? "text-cyan-300" : "text-neutral-500"}` }), renaming ? (_jsx("input", { ref: renameInputRef, value: renameDraft, onChange: (event) => setRenameDraft(event.target.value), onBlur: commitRename, onKeyDown: (event) => {
+                                                    event.stopPropagation();
+                                                    if (event.key === "Enter") {
+                                                        event.preventDefault();
+                                                        commitRename();
+                                                    }
+                                                    else if (event.key === "Escape") {
+                                                        event.preventDefault();
+                                                        cancelRename();
+                                                    }
+                                                }, onClick: (event) => event.stopPropagation(), className: `min-w-0 flex-1 rounded-[3px] border border-cyan-400/40 bg-black/40 px-1 py-0 text-[11px] text-neutral-100 outline-none ${FOCUS_RING}`, "aria-label": "Rename object" })) : (_jsx("span", { className: "min-w-0 flex-1 truncate", children: row.label })), _jsx("span", { className: "text-[9px] text-neutral-600", children: row.kind })] }), _jsx("button", { type: "button", tabIndex: -1, "aria-label": hidden ? "Show object in viewport" : "Hide object in viewport", "aria-pressed": !hidden, title: hidden ? "Show in viewport" : "Hide in viewport", onMouseDown: preventFocusSteal, onClick: () => toggleHidden([row.id]), className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-[4px] transition-colors hover:bg-white/[0.08] ${FOCUS_RING} ${hidden
+                                            ? "text-neutral-500"
+                                            : "text-neutral-500 opacity-0 group-hover:opacity-100 focus-visible:opacity-100"}`, children: _jsx(Icon, { name: hidden ? "eyeOff" : "eye", size: 12 }) }), _jsx("button", { type: "button", tabIndex: -1, "aria-label": collectionOnlyLock ? "Locked by collection" : locked ? "Unlock object" : "Lock object", "aria-pressed": locked, title: collectionOnlyLock
+                                            ? "Locked by collection — unlock in Collections panel"
+                                            : locked
+                                                ? "Unlock object"
+                                                : "Lock object", disabled: collectionOnlyLock, onMouseDown: preventFocusSteal, onClick: () => toggleLocked([row.id]), className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-[4px] transition-colors hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-60 ${FOCUS_RING} ${locked
+                                            ? "text-amber-400/80"
+                                            : "text-neutral-500 opacity-0 group-hover:opacity-100 focus-visible:opacity-100"}`, children: _jsx(Icon, { name: locked ? "lock" : "unlock", size: 11 }) })] }, row.key));
+                        }) }) })) })] }));
+});

package/dist/shell/NetworkWorkspacePanel.d.ts

@@ -0,0 +1,11 @@
+import { type EditorNetworkSnapshot } from "../networkSnapshot.js";
+/**
+ * Network workspace panel: inspects the game's declared multiplayer adapter and optional
+ * host-injected presence/session snapshot. Missing presence is an honest empty state — never
+ * fabricated actors or latency.
+ *
+ * @internal — mounted by `EditorChrome` when the Network workspace is active.
+ */
+export declare function NetworkWorkspacePanel({ snapshot }: {
+    snapshot: EditorNetworkSnapshot;
+}): import("react").JSX.Element;

package/dist/shell/NetworkWorkspacePanel.js

@@ -0,0 +1,49 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isNetworkMultiplayerConfigured, } from "../networkSnapshot.js";
+import { MICRO_LABEL, NUMERIC } from "./theme.js";
+import { EmptyState } from "./ui.js";
+function formatCoord(value) {
+    return Number.isFinite(value) ? value.toFixed(1) : "—";
+}
+function formatSeen(lastSeenAt, nowMs) {
+    if (lastSeenAt === undefined)
+        return "—";
+    const ageSec = Math.max(0, (nowMs - lastSeenAt) / 1000);
+    if (ageSec < 1)
+        return "just now";
+    if (ageSec < 60)
+        return `${ageSec.toFixed(0)}s ago`;
+    if (ageSec < 3600)
+        return `${Math.floor(ageSec / 60)}m ago`;
+    return new Date(lastSeenAt).toLocaleTimeString();
+}
+function Field({ label, value }) {
+    return (_jsxs("div", { className: "flex items-baseline justify-between gap-3 border-b border-white/[0.04] py-1 last:border-b-0", children: [_jsx("span", { className: "text-[10px] uppercase tracking-wider text-neutral-600", children: label }), _jsx("span", { className: `min-w-0 truncate text-right text-[11px] text-neutral-200 ${NUMERIC}`, children: value })] }));
+}
+function PresenceRow({ actor, nowMs }) {
+    const pos = actor.position;
+    return (_jsxs("li", { className: "rounded-[6px] border border-white/[0.07] bg-white/[0.02] px-2.5 py-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-400/90", "aria-hidden": "true" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-[11px] font-medium text-neutral-100", children: actor.userId }), _jsx("span", { className: `shrink-0 text-[9px] text-neutral-600 ${NUMERIC}`, children: formatSeen(actor.lastSeenAt, nowMs) })] }), _jsxs("div", { className: `mt-0.5 text-[10px] text-neutral-500 ${NUMERIC}`, children: ["x ", formatCoord(pos.x), " \u00B7 y ", formatCoord(pos.y), " \u00B7 z ", formatCoord(pos.z), actor.rotationY !== undefined ? ` · yaw ${formatCoord(actor.rotationY)}` : null] })] }));
+}
+function authorityLabel(snapshot) {
+    if (snapshot.authority === null)
+        return "single-player";
+    if (snapshot.authority === "server")
+        return "server (host-authoritative)";
+    return "client (presence-only)";
+}
+/**
+ * Network workspace panel: inspects the game's declared multiplayer adapter and optional
+ * host-injected presence/session snapshot. Missing presence is an honest empty state — never
+ * fabricated actors or latency.
+ *
+ * @internal — mounted by `EditorChrome` when the Network workspace is active.
+ */
+export function NetworkWorkspacePanel({ snapshot }) {
+    const nowMs = Date.now();
+    const multiplayer = isNetworkMultiplayerConfigured(snapshot);
+    const online = snapshot.online;
+    const hasSession = snapshot.session !== undefined;
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-auto p-2.5", "aria-label": "Network workspace", children: [_jsxs("div", { children: [_jsx("div", { className: MICRO_LABEL, children: "Session" }), _jsxs("div", { className: "mt-1.5 rounded-[6px] border border-white/[0.07] bg-white/[0.02] px-2.5 py-1.5", children: [_jsx(Field, { label: "Game", value: snapshot.gameId }), _jsx(Field, { label: "Adapter", value: snapshot.adapterKind }), _jsx(Field, { label: "Authority", value: authorityLabel(snapshot) }), snapshot.topology !== undefined ? _jsx(Field, { label: "Topology", value: snapshot.topology }) : null, snapshot.endpoint !== undefined ? _jsx(Field, { label: "Endpoint", value: snapshot.endpoint }) : null, hasSession ? (_jsxs(_Fragment, { children: [_jsx(Field, { label: "User", value: snapshot.session.userId }), snapshot.session.serverId !== undefined ? (_jsx(Field, { label: "Server", value: snapshot.session.serverId === null ? "(joined, id not reported)" : snapshot.session.serverId })) : null, snapshot.session.feedActions !== undefined && snapshot.session.feedActions.length > 0 ? (_jsx(Field, { label: "Feeds", value: snapshot.session.feedActions.join(", ") })) : null] })) : (_jsx(Field, { label: "Live session", value: multiplayer ? "not attached" : "n/a (offline)" }))] })] }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { className: "mb-1.5 flex items-center gap-2", children: [_jsx("div", { className: MICRO_LABEL, children: "Presence" }), online !== undefined ? (_jsxs("span", { className: `text-[9px] text-neutral-600 ${NUMERIC}`, children: [online.length, " online"] })) : null, snapshot.updatedAt !== undefined ? (_jsxs("span", { className: `ml-auto text-[9px] text-neutral-600 ${NUMERIC}`, children: ["updated ", formatSeen(snapshot.updatedAt, nowMs)] })) : null] }), online === undefined ? (_jsx(EmptyState, { icon: "network", title: "No presence feed", description: multiplayer
+                            ? "The host has not supplied a live presence snapshot. Attach a multiplayer backend (Convex/WS) and pass presence rows into the editor — nothing is invented here."
+                            : "This game is offline / single-player. Presence inspection appears when the game declares a multiplayer adapter and the host injects a session feed." })) : online.length === 0 ? (_jsx(EmptyState, { icon: "network", title: "No players online", description: "The presence feed is connected but the roster is empty. Other clients will appear here when they sync poses." })) : (_jsx("ul", { className: "min-h-0 flex-1 space-y-1 overflow-auto pr-0.5", children: online.map((actor) => (_jsx(PresenceRow, { actor: actor, nowMs: nowMs }, actor.userId))) }))] })] }));
+}

package/dist/shell/PlayModeBar.d.ts

@@ -0,0 +1,12 @@
+import type { EditorHostApi } from "../session.js";
+/**
+ * Slim shell chrome for Play mode — same app-bar language as edit mode so switching modes
+ * does not feel like an app swap. Pause / Resume / Step drive the existing runtime play
+ * controls (`runtime_pause` / `runtime_resume` / `runtime_step`); Exit returns to edit.
+ * @internal
+ */
+export declare function PlayModeBar({ gameId, api, onExit, }: {
+    gameId: string;
+    api: EditorHostApi;
+    onExit: () => void;
+}): import("react").JSX.Element;

package/dist/shell/PlayModeBar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Icon } from "./icons.js";
+import { BORDER, FOCUS_RING } from "./theme.js";
+import { IconButton, ToolbarDivider } from "./ui.js";
+/**
+ * Slim shell chrome for Play mode — same app-bar language as edit mode so switching modes
+ * does not feel like an app swap. Pause / Resume / Step drive the existing runtime play
+ * controls (`runtime_pause` / `runtime_resume` / `runtime_step`); Exit returns to edit.
+ * @internal
+ */
+export function PlayModeBar({ gameId, api, onExit, }) {
+    const [play, setPlay] = useState(() => api.getPlayControl());
+    useEffect(() => api.subscribePlayControl(setPlay), [api]);
+    const pause = () => {
+        api.handle({ method: "runtime_pause" });
+    };
+    const resume = () => {
+        api.handle({ method: "runtime_resume" });
+    };
+    const step = () => {
+        api.handle({ method: "runtime_step", frames: 1 });
+    };
+    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`, role: "banner", "aria-label": "Play mode", 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-emerald-500/30 to-cyan-500/25 text-[11px] font-bold tracking-wide text-emerald-200 ring-1 ring-inset ring-emerald-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: "Play mode" })] }), _jsxs("span", { className: `ml-1 hidden items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] sm:flex ${play.paused
+                            ? "bg-amber-500/15 text-amber-200 ring-1 ring-inset ring-amber-400/25"
+                            : "bg-emerald-500/15 text-emerald-200 ring-1 ring-inset ring-emerald-400/25"}`, children: [_jsx("span", { className: `h-1.5 w-1.5 rounded-full ${play.paused ? "bg-amber-400" : "bg-emerald-400 animate-pulse"}` }), play.paused ? "Paused" : "Playing"] })] }), _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [_jsx(IconButton, { icon: play.paused ? "play" : "pause", label: play.paused ? "Resume simulation" : "Pause simulation", onClick: () => (play.paused ? resume() : pause()), active: play.paused }), _jsx(IconButton, { icon: "step", label: "Step one frame (pause required)", onClick: step, disabled: !play.paused }), _jsx(ToolbarDivider, {}), _jsxs("button", { type: "button", onClick: onExit, title: "Return to the editor (F2+E)", className: `flex h-8 items-center gap-1.5 rounded-[6px] border border-white/[0.07] bg-[#191d24] px-3 text-[12px] font-medium text-neutral-200 transition-colors hover:bg-[#1f242d] ${FOCUS_RING}`, children: [_jsx(Icon, { name: "panel", size: 12 }), "Editor"] })] })] }));
+}

package/dist/shell/ProfilerPanel.d.ts

@@ -0,0 +1,10 @@
+import type { PerfHistoryStore } from "./perfHistory.js";
+/**
+ * Profiler dock tab over the real {@link PerfProbe} sample history: frame-time graph, current and
+ * average values, authoring-cost series when the probe reports one, sim/outside budget when
+ * `devtools.frame` has recorded frames, and JS heap memory when the browser exposes
+ * `performance.memory`. Series the host cannot measure are omitted entirely rather than fabricated.
+ */
+export declare function ProfilerPanel({ history }: {
+    history: PerfHistoryStore;
+}): import("react").JSX.Element;

package/dist/shell/ProfilerPanel.js

@@ -0,0 +1,41 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+import { formatTriangles } from "./StatusBar.js";
+import { latestPhases, samplesHaveFrameBudget, seriesAverage, seriesAverageDefined, sparklinePoints, } from "./perfHistory.js";
+import { NUMERIC } from "./theme.js";
+import { EmptyState, IconButton } from "./ui.js";
+const GRAPH_WIDTH = 560;
+const GRAPH_HEIGHT = 96;
+function Stat({ label, value, average }) {
+    return (_jsxs("div", { className: "min-w-24 rounded-[6px] border border-white/[0.07] bg-white/[0.02] px-2.5 py-1.5", children: [_jsx("div", { className: "text-[9px] uppercase tracking-wider text-neutral-600", children: label }), _jsx("div", { className: `text-[15px] font-medium text-neutral-100 ${NUMERIC}`, children: value }), average !== undefined ? _jsxs("div", { className: `text-[9px] text-neutral-500 ${NUMERIC}`, children: ["avg ", average] }) : null] }));
+}
+function BudgetBar({ simMs, outsideMs }) {
+    const total = Math.max(1e-6, simMs + outsideMs);
+    const simPct = (simMs / total) * 100;
+    return (_jsxs("div", { className: "mt-2 space-y-1", children: [_jsx("div", { className: "text-[9px] uppercase tracking-wider text-neutral-600", children: "Frame budget (sim vs outside)" }), _jsxs("div", { className: "flex h-2 overflow-hidden rounded-[4px] border border-white/[0.07] bg-black/25", children: [_jsx("div", { className: "h-full bg-sky-400", style: { width: `${simPct}%` }, title: `sim ${simMs.toFixed(2)} ms` }), _jsx("div", { className: "h-full bg-amber-400/80", style: { width: `${100 - simPct}%` }, title: `outside ${outsideMs.toFixed(2)} ms` })] }), _jsxs("div", { className: `flex justify-between text-[9px] text-neutral-500 ${NUMERIC}`, children: [_jsxs("span", { className: "text-sky-300", children: ["sim ", simMs.toFixed(2), " ms"] }), _jsxs("span", { className: "text-amber-300", children: ["outside ", outsideMs.toFixed(2), " ms"] })] }), _jsx("div", { className: "text-[9px] leading-snug text-neutral-600", children: "Outside = frame \u2212 sim (render / React / GPU / GC). Same numbers as F2+D / debug_snapshot." })] }));
+}
+/**
+ * Profiler dock tab over the real {@link PerfProbe} sample history: frame-time graph, current and
+ * average values, authoring-cost series when the probe reports one, sim/outside budget when
+ * `devtools.frame` has recorded frames, and JS heap memory when the browser exposes
+ * `performance.memory`. Series the host cannot measure are omitted entirely rather than fabricated.
+ */
+export function ProfilerPanel({ history }) {
+    const samples = useSyncExternalStore(history.subscribe, history.getSamples, history.getSamples);
+    const paused = useSyncExternalStore(history.subscribe, history.isPaused, history.isPaused);
+    const frameSeries = samples.map((sample) => sample.frameMs);
+    const authoringSeries = samples.map((sample) => sample.authoringMs ?? 0);
+    const memorySeries = samples.map((sample) => sample.memoryMb ?? 0);
+    const simSeries = samples.map((sample) => sample.simMs ?? 0);
+    const outsideSeries = samples.map((sample) => sample.outsideMs ?? 0);
+    const hasAuthoring = authoringSeries.some((value) => value > 0);
+    const hasMemory = samples.some((sample) => sample.memoryMb !== undefined);
+    const hasBudget = samplesHaveFrameBudget(samples);
+    const phases = latestPhases(samples);
+    const latest = samples[samples.length - 1];
+    const maxFrame = Math.max(33.4, ...frameSeries, ...(hasBudget ? [...simSeries, ...outsideSeries] : []));
+    const maxMemory = hasMemory ? Math.max(16, ...memorySeries) : 0;
+    const latestSim = latest?.simMs;
+    const latestOutside = latest?.outsideMs;
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex h-8 shrink-0 items-center gap-1.5 border-b border-white/[0.06] px-2", children: [_jsx("span", { className: "text-[10px] uppercase tracking-wider text-neutral-500", children: "Frame time" }), _jsxs("span", { className: `text-[10px] text-neutral-600 ${NUMERIC}`, children: [samples.length, " samples \u00B7 500ms window"] }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx(IconButton, { icon: paused ? "play" : "pause", label: paused ? "Resume sampling" : "Pause sampling", size: 12, active: paused, onClick: () => history.setPaused(!paused) }), _jsx(IconButton, { icon: "trash", label: "Clear samples", size: 12, onClick: () => history.clear(), disabled: samples.length === 0 })] })] }), samples.length === 0 ? (_jsx(EmptyState, { icon: "gauge", title: "No samples yet", description: "The in-viewport probe publishes a real frame sample every 500ms while the editor renders." })) : (_jsxs("div", { className: "flex min-h-0 flex-1 gap-3 overflow-auto p-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("svg", { viewBox: `0 0 ${GRAPH_WIDTH} ${GRAPH_HEIGHT}`, preserveAspectRatio: "none", className: "h-full max-h-40 w-full rounded-[6px] border border-white/[0.07] bg-black/25", role: "img", "aria-label": "Frame time graph", children: [_jsx("line", { x1: 0, x2: GRAPH_WIDTH, y1: GRAPH_HEIGHT - (16.7 / maxFrame) * GRAPH_HEIGHT, y2: GRAPH_HEIGHT - (16.7 / maxFrame) * GRAPH_HEIGHT, stroke: "rgba(74,222,128,0.25)", strokeDasharray: "4 4" }), _jsx("line", { x1: 0, x2: GRAPH_WIDTH, y1: GRAPH_HEIGHT - (33.3 / maxFrame) * GRAPH_HEIGHT, y2: GRAPH_HEIGHT - (33.3 / maxFrame) * GRAPH_HEIGHT, stroke: "rgba(251,191,36,0.25)", strokeDasharray: "4 4" }), _jsx("polyline", { points: sparklinePoints(frameSeries, GRAPH_WIDTH, GRAPH_HEIGHT, maxFrame), fill: "none", stroke: "#22d3ee", strokeWidth: 1.5, vectorEffect: "non-scaling-stroke" }), hasBudget ? (_jsxs(_Fragment, { children: [_jsx("polyline", { points: sparklinePoints(simSeries, GRAPH_WIDTH, GRAPH_HEIGHT, maxFrame), fill: "none", stroke: "#38bdf8", strokeWidth: 1, vectorEffect: "non-scaling-stroke" }), _jsx("polyline", { points: sparklinePoints(outsideSeries, GRAPH_WIDTH, GRAPH_HEIGHT, maxFrame), fill: "none", stroke: "#fbbf24", strokeWidth: 1, vectorEffect: "non-scaling-stroke" })] })) : null, hasAuthoring ? (_jsx("polyline", { points: sparklinePoints(authoringSeries, GRAPH_WIDTH, GRAPH_HEIGHT, maxFrame), fill: "none", stroke: "#a78bfa", strokeWidth: 1, vectorEffect: "non-scaling-stroke" })) : null] }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-3 text-[9px] text-neutral-500", children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "h-0.5 w-3 bg-cyan-400" }), " frame ms"] }), hasBudget ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "h-0.5 w-3 bg-sky-400" }), " sim ms"] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "h-0.5 w-3 bg-amber-400" }), " outside ms"] })] })) : null, hasAuthoring ? _jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "h-0.5 w-3 bg-violet-400" }), " authoring ms"] }) : null, _jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "h-0.5 w-3 bg-emerald-400/60" }), " 60 fps budget"] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "h-0.5 w-3 bg-amber-400/60" }), " 30 fps budget"] })] }), hasBudget && latestSim !== undefined && latestOutside !== undefined ? (_jsx(BudgetBar, { simMs: latestSim, outsideMs: latestOutside })) : (_jsx("div", { className: "mt-2 text-[9px] leading-snug text-neutral-600", children: "Sim / outside split appears when the runtime FrameDriver records frames (Play mode / live tick) \u2014 same source as debug_snapshot. Edit-only idle leaves this series omitted." })), phases.length > 0 ? (_jsxs("div", { className: "mt-3 space-y-1", children: [_jsx("div", { className: "text-[9px] uppercase tracking-wider text-neutral-600", children: "Sim phases (avg)" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: phases.map((phase) => (_jsxs("div", { className: `rounded border border-white/[0.07] bg-white/[0.02] px-2 py-1 text-[10px] text-neutral-300 ${NUMERIC}`, children: [_jsx("span", { className: "text-neutral-500", children: phase.name }), " ", phase.avgMs.toFixed(2), " ms"] }, phase.name))) })] })) : null, hasMemory ? (_jsxs("div", { className: "mt-3", children: [_jsx("div", { className: "mb-1 text-[9px] uppercase tracking-wider text-neutral-600", children: "JS heap (browser)" }), _jsx("svg", { viewBox: `0 0 ${GRAPH_WIDTH} ${GRAPH_HEIGHT}`, preserveAspectRatio: "none", className: "h-20 w-full rounded-[6px] border border-white/[0.07] bg-black/25", role: "img", "aria-label": "JS heap memory graph", children: _jsx("polyline", { points: sparklinePoints(memorySeries, GRAPH_WIDTH, GRAPH_HEIGHT, maxMemory), fill: "none", stroke: "#fbbf24", strokeWidth: 1.5, vectorEffect: "non-scaling-stroke" }) })] })) : null] }), _jsxs("div", { className: "flex shrink-0 flex-col gap-1.5", children: [_jsx(Stat, { label: "FPS", value: latest === undefined ? "—" : latest.active ? latest.fps.toFixed(0) : "idle", average: `${seriesAverage(samples.map((sample) => sample.fps)).toFixed(0)}` }), _jsx(Stat, { label: "Frame", value: latest === undefined ? "—" : `${latest.frameMs.toFixed(2)} ms`, average: `${seriesAverage(frameSeries).toFixed(2)} ms` }), hasBudget ? (_jsxs(_Fragment, { children: [_jsx(Stat, { label: "Sim", value: latestSim === undefined ? "—" : `${latestSim.toFixed(2)} ms`, average: `${seriesAverageDefined(samples.map((sample) => sample.simMs)).toFixed(2)} ms` }), _jsx(Stat, { label: "Outside", value: latestOutside === undefined ? "—" : `${latestOutside.toFixed(2)} ms`, average: `${seriesAverageDefined(samples.map((sample) => sample.outsideMs)).toFixed(2)} ms` })] })) : null, _jsx(Stat, { label: "Draw calls", value: latest === undefined ? "—" : String(latest.drawCalls) }), _jsx(Stat, { label: "Triangles", value: latest === undefined ? "—" : formatTriangles(latest.triangles) }), hasAuthoring ? (_jsx(Stat, { label: "Authoring", value: `${(latest?.authoringMs ?? 0).toFixed(1)} ms`, average: `${seriesAverage(authoringSeries).toFixed(1)} ms` })) : null, hasMemory ? (_jsx(Stat, { label: "Heap", value: `${(latest?.memoryMb ?? 0).toFixed(1)} MB`, average: `${seriesAverage(memorySeries).toFixed(1)} MB` })) : null] })] }))] }));
+}

package/dist/shell/SceneToolbar.d.ts

@@ -0,0 +1,43 @@
+import { type CameraProjectionMode, type EditorTool, type GizmoMode, type GizmoPivot, type GizmoSpace, type PlacementTool, type SnapMode } from "../uiStore.js";
+/** Volume placement entries offered by the Add menu. */
+export declare const ADD_VOLUME_ENTRIES: readonly {
+    label: string;
+    tool: PlacementTool;
+}[];
+/**
+ * Contextual scene toolbar under the app bar: tools, gizmo modes, gizmo space, pivot,
+ * snapping, viewport overlays, framing, projection, and the Add menu.
+ */
+export declare 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, }: {
+    tool: EditorTool;
+    gizmoMode: GizmoMode;
+    gizmoSpace: GizmoSpace;
+    gizmoPivot: GizmoPivot;
+    snapMode: SnapMode;
+    gridSize: number;
+    rotationSnapDeg: number | null;
+    scaleSnap: number | null;
+    cameraProjection: CameraProjectionMode;
+    showGrid: boolean;
+    showContours: boolean;
+    showSurfaceGrid: boolean;
+    showElevation: boolean;
+    placementActive: boolean;
+    onSetTool: (tool: EditorTool) => void;
+    onSetGizmoMode: (mode: GizmoMode) => void;
+    onSetGizmoSpace: (space: GizmoSpace) => void;
+    onSetGizmoPivot: (pivot: GizmoPivot) => void;
+    onSetSnapMode: (mode: SnapMode) => void;
+    onSetGridSize: (size: number) => void;
+    onSetRotationSnapDeg: (deg: number | null) => void;
+    onSetScaleSnap: (snap: number | null) => void;
+    onSetCameraProjection: (projection: CameraProjectionMode) => void;
+    onToggleGrid: () => void;
+    onToggleContours: () => void;
+    onToggleSurfaceGrid: () => void;
+    onToggleElevation: () => void;
+    onFrame: () => void;
+    onStartPlacement: (tool: PlacementTool) => void;
+    onOpenAssistant: () => void;
+    assistantOpen: boolean;
+}): import("react").JSX.Element;