@jgengine/editor 0.11.0 → 0.12.0

package/dist/shell/AnimationPanel.d.ts

@@ -0,0 +1,17 @@
+import type { EditorSession } from "@jgengine/core/editor/index";
+import type { EditorHostApi } from "../session.js";
+/**
+ * Animation dock: path flythrough scrubber over authored scene polylines.
+ *
+ * Scope (honest, no fake NLE):
+ * - Scrub / play the editor orbit camera along document paths via {@link EditorHostApi.setFocusTarget}.
+ * - Uses real path points + `@jgengine/core` path-follow sampling — not invented keyframes.
+ * - Out of scope: clip authoring, keyframe curves, scene-kind param animation, director cinematics
+ *   stored outside the scene document.
+ *
+ * @internal
+ */
+export declare function AnimationPanel({ session, api }: {
+    session: EditorSession;
+    api: EditorHostApi;
+}): import("react").JSX.Element;

package/dist/shell/AnimationPanel.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useStoreSelector } from "../useStoreSelector.js";
+import { listScrubbablePaths, samplePathAt } from "./pathFlythrough.js";
+import { FOCUS_RING, INPUT_CLS, NUMERIC } from "./theme.js";
+import { EmptyState, IconButton } from "./ui.js";
+/** Default world-units/sec when playing a path flythrough preview. */
+const DEFAULT_PLAY_SPEED = 8;
+/**
+ * Animation dock: path flythrough scrubber over authored scene polylines.
+ *
+ * Scope (honest, no fake NLE):
+ * - Scrub / play the editor orbit camera along document paths via {@link EditorHostApi.setFocusTarget}.
+ * - Uses real path points + `@jgengine/core` path-follow sampling — not invented keyframes.
+ * - Out of scope: clip authoring, keyframe curves, scene-kind param animation, director cinematics
+ *   stored outside the scene document.
+ *
+ * @internal
+ */
+export function AnimationPanel({ session, api }) {
+    const paths = useStoreSelector(session, (state) => state.document.paths);
+    const scrubbable = useMemo(() => listScrubbablePaths(paths), [paths]);
+    const [selectedId, setSelectedId] = useState(null);
+    const [progress, setProgress] = useState(0);
+    const [playing, setPlaying] = useState(false);
+    const [loop, setLoop] = useState(true);
+    const playRef = useRef({ playing: false, loop: true, progress: 0, pathId: null });
+    const selected = scrubbable.find((entry) => entry.id === selectedId) ?? scrubbable[0] ?? null;
+    const selectedPath = selected === null ? undefined : paths.find((path) => path.id === selected.id);
+    useEffect(() => {
+        if (selected !== null && selectedId !== selected.id)
+            setSelectedId(selected.id);
+        if (selected === null && selectedId !== null)
+            setSelectedId(null);
+    }, [selected, selectedId]);
+    useEffect(() => {
+        playRef.current = {
+            playing,
+            loop,
+            progress,
+            pathId: selected?.id ?? null,
+        };
+    }, [playing, loop, progress, selected?.id]);
+    const applyProgress = useCallback((next, pathId) => {
+        const path = session.getState().document.paths.find((entry) => entry.id === pathId);
+        if (path === undefined)
+            return;
+        const sample = samplePathAt(path, next);
+        if (sample === null)
+            return;
+        playRef.current.progress = next;
+        setProgress(next);
+        api.setFocusTarget({ x: sample.x, y: sample.y, z: sample.z });
+    }, [api, session]);
+    const onSelectPath = useCallback((id) => {
+        playRef.current.playing = false;
+        setPlaying(false);
+        setSelectedId(id);
+        playRef.current.pathId = id;
+        applyProgress(0, id);
+        session.dispatch({ type: "select", ids: [id] });
+    }, [applyProgress, session]);
+    const onScrub = useCallback((value) => {
+        if (selected === null)
+            return;
+        playRef.current.playing = false;
+        setPlaying(false);
+        applyProgress(value, selected.id);
+    }, [applyProgress, selected]);
+    useEffect(() => {
+        if (!playing || selected === null || selected.length <= 0)
+            return;
+        playRef.current.playing = true;
+        playRef.current.pathId = selected.id;
+        let frame = 0;
+        let last = performance.now();
+        const tick = (now) => {
+            const dt = Math.min(0.05, Math.max(0, (now - last) / 1000));
+            last = now;
+            const current = playRef.current;
+            if (!current.playing || current.pathId === null)
+                return;
+            const path = session.getState().document.paths.find((entry) => entry.id === current.pathId);
+            if (path === undefined) {
+                playRef.current.playing = false;
+                setPlaying(false);
+                return;
+            }
+            const sample = samplePathAt(path, current.progress);
+            if (sample === null || sample.length <= 0) {
+                playRef.current.playing = false;
+                setPlaying(false);
+                return;
+            }
+            let next = current.progress + (DEFAULT_PLAY_SPEED * dt) / sample.length;
+            if (next >= 1) {
+                if (current.loop) {
+                    next = next % 1;
+                }
+                else {
+                    applyProgress(1, path.id);
+                    playRef.current.playing = false;
+                    setPlaying(false);
+                    return;
+                }
+            }
+            applyProgress(next, path.id);
+            frame = requestAnimationFrame(tick);
+        };
+        frame = requestAnimationFrame(tick);
+        return () => {
+            cancelAnimationFrame(frame);
+            playRef.current.playing = false;
+        };
+    }, [playing, selected, applyProgress, session]);
+    if (scrubbable.length === 0) {
+        return (_jsx(EmptyState, { icon: "film", title: "Path flythrough", badge: "Scoped", description: "Scope: scrub the orbit camera along authored scene paths (routes, roads, patrols). Draw a path with 2+ points via Add \u2192 path/road, then open this tab. Keyframe clip authoring and scene-kind param animation are not in scope." }));
+    }
+    const lengthLabel = selected === null ? "—" : selected.length < 10 ? `${selected.length.toFixed(1)} m` : `${Math.round(selected.length)} m`;
+    const distance = selected === null || selected.length <= 0 ? 0 : progress * selected.length;
+    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: "Path flythrough" }), _jsxs("span", { className: `text-[10px] text-neutral-600 ${NUMERIC}`, children: [scrubbable.length, " path", scrubbable.length === 1 ? "" : "s", " \u00B7 camera follows scrub"] }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx(IconButton, { icon: playing ? "pause" : "play", label: playing ? "Pause flythrough" : "Play flythrough", size: 12, active: playing, disabled: selected === null || selected.length <= 0, onClick: () => setPlaying((value) => !value) }), _jsx("button", { type: "button", className: `rounded-[5px] border px-2 py-0.5 text-[10px] uppercase tracking-wider transition-colors ${FOCUS_RING} ${loop
+                                    ? "border-cyan-400/30 bg-cyan-500/15 text-cyan-200"
+                                    : "border-white/[0.07] bg-white/[0.02] text-neutral-500 hover:text-neutral-300"}`, "aria-pressed": loop, "aria-label": loop ? "Loop on" : "Loop off", onClick: () => setLoop((value) => !value), children: "Loop" })] })] }), _jsxs("div", { className: "flex min-h-0 flex-1 gap-3 overflow-auto p-3", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsxs("label", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-[9px] uppercase tracking-wider text-neutral-600", children: "Path" }), _jsx("select", { className: `${INPUT_CLS} h-8 px-2 text-[12px]`, value: selected?.id ?? "", "aria-label": "Flythrough path", onChange: (event) => onSelectPath(event.target.value), children: scrubbable.map((entry) => (_jsxs("option", { value: entry.id, children: [entry.label, " \u00B7 ", entry.kind, " \u00B7 ", entry.pointCount, " pts"] }, entry.id))) })] }), _jsxs("label", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between text-[9px] uppercase tracking-wider text-neutral-600", children: [_jsx("span", { children: "Progress" }), _jsxs("span", { className: NUMERIC, children: [(progress * 100).toFixed(0), "% \u00B7 ", distance.toFixed(1), " / ", lengthLabel.replace(" m", ""), " m"] })] }), _jsx("input", { type: "range", min: 0, max: 1, step: 0.001, value: progress, "aria-label": "Flythrough progress", disabled: selected === null || selected.length <= 0, className: `h-2 w-full accent-cyan-400 ${FOCUS_RING}`, onChange: (event) => onScrub(Number(event.target.value)) })] }), _jsxs("p", { className: "text-[10px] leading-relaxed text-neutral-600", children: ["Scope: real path points only \u2014 no fabricated keyframes. Play moves the orbit focus along the polyline at", " ", DEFAULT_PLAY_SPEED, " u/s. Edit points in the viewport or inspector."] })] }), _jsxs("div", { className: "flex w-40 shrink-0 flex-col gap-1.5", children: [_jsx(Meta, { label: "Kind", value: selected?.kind ?? "—" }), _jsx(Meta, { label: "Points", value: selected === null ? "—" : String(selected.pointCount) }), _jsx(Meta, { label: "Length", value: lengthLabel }), _jsx(Meta, { label: "At", value: selectedPath === undefined
+                                    ? "—"
+                                    : (() => {
+                                        const sample = samplePathAt(selectedPath, progress);
+                                        if (sample === null)
+                                            return "—";
+                                        return `${sample.x.toFixed(1)}, ${sample.y.toFixed(1)}, ${sample.z.toFixed(1)}`;
+                                    })() })] })] })] }));
+}
+function Meta({ label, value }) {
+    return (_jsxs("div", { className: "min-w-0 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: `truncate text-[12px] font-medium text-neutral-100 ${NUMERIC}`, children: value })] }));
+}

package/dist/shell/AssetThumbnail.d.ts

@@ -0,0 +1,12 @@
+import type { EditorAssetEntry } from "../AssetBrowser.js";
+/**
+ * Content Browser tile face: real offscreen-rendered GLB preview when a model URL
+ * is available and the render succeeds; otherwise the typed kind glyph (honest
+ * fallback — never a fabricated screenshot).
+ * @internal
+ */
+export declare function AssetThumbnail({ asset, size, className, }: {
+    asset: EditorAssetEntry;
+    size?: number;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/shell/AssetThumbnail.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "./icons.js";
+import { useGlbThumbnail } from "./useGlbThumbnail.js";
+const KIND_ICON = {
+    model: "cube",
+    catalog: "layers",
+    marker: "pin",
+};
+/**
+ * Content Browser tile face: real offscreen-rendered GLB preview when a model URL
+ * is available and the render succeeds; otherwise the typed kind glyph (honest
+ * fallback — never a fabricated screenshot).
+ * @internal
+ */
+export function AssetThumbnail({ asset, size = 22, className = "", }) {
+    const canRender = asset.kind === "model" && typeof asset.url === "string" && asset.url.length > 0;
+    const thumb = useGlbThumbnail(canRender ? asset.url : undefined);
+    if (thumb.status === "ready" && thumb.dataUrl !== null) {
+        return (_jsx("img", { src: thumb.dataUrl, alt: "", draggable: false, className: `h-full w-full object-cover ${className}` }));
+    }
+    const loading = canRender && thumb.status === "loading";
+    return (_jsx("span", { className: `flex h-full w-full items-center justify-center text-neutral-500 ${loading ? "animate-pulse" : ""} ${className}`, "aria-hidden": true, children: _jsx(Icon, { name: KIND_ICON[asset.kind], size: size }) }));
+}

package/dist/shell/BottomDock.d.ts

@@ -0,0 +1,25 @@
+import type { EditorSession } from "@jgengine/core/editor/index";
+import type { EditorAssetEntry } from "../AssetBrowser.js";
+import type { EditorHostApi } from "../session.js";
+import type { EditorConsoleStore } from "./consoleStore.js";
+import type { BottomDockTab, BrowserViewMode } from "./layoutStore.js";
+import type { PerfHistoryStore } from "./perfHistory.js";
+/**
+ * Tabbed bottom dock: Content Browser, Console, Profiler, Animation (path flythrough scrub),
+ * and the AI Assistant. Only the active tab's panel mounts, so hidden tools cost nothing per frame.
+ */
+export declare function BottomDock({ tab, onSelectTab, onClose, assets, session, api, consoleStore, perfHistory, browserView, onSetBrowserView, onPlaceAsset, onImportModels, importBusy, }: {
+    tab: BottomDockTab;
+    onSelectTab: (tab: BottomDockTab) => void;
+    onClose: () => void;
+    assets: readonly EditorAssetEntry[];
+    session: EditorSession;
+    api: EditorHostApi;
+    consoleStore: EditorConsoleStore;
+    perfHistory: PerfHistoryStore;
+    browserView: BrowserViewMode;
+    onSetBrowserView: (view: BrowserViewMode) => void;
+    onPlaceAsset: (entry: EditorAssetEntry) => void;
+    onImportModels?: (files: readonly File[]) => void | Promise<void>;
+    importBusy?: boolean;
+}): import("react").JSX.Element;

package/dist/shell/BottomDock.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+import { AgentPanel } from "../agent/AgentPanel.js";
+import { AnimationPanel } from "./AnimationPanel.js";
+import { ConsolePanel } from "./ConsolePanel.js";
+import { ContentBrowser } from "./ContentBrowser.js";
+import { ProfilerPanel } from "./ProfilerPanel.js";
+import { BORDER } from "./theme.js";
+import { IconButton, PanelTabs } from "./ui.js";
+/**
+ * Tabbed bottom dock: Content Browser, Console, Profiler, Animation (path flythrough scrub),
+ * and the AI Assistant. Only the active tab's panel mounts, so hidden tools cost nothing per frame.
+ */
+export function BottomDock({ tab, onSelectTab, onClose, assets, session, api, consoleStore, perfHistory, browserView, onSetBrowserView, onPlaceAsset, onImportModels, importBusy, }) {
+    const consoleEntries = useSyncExternalStore(consoleStore.subscribe, consoleStore.getEntries, consoleStore.getEntries);
+    const consoleErrorCount = consoleEntries.reduce((sum, entry) => (entry.severity === "error" ? sum + 1 : sum), 0);
+    let content;
+    if (tab === "content") {
+        content = (_jsx(ContentBrowser, { assets: assets, session: session, onPlace: onPlaceAsset, view: browserView, onSetView: onSetBrowserView, ...(onImportModels === undefined ? {} : { onImportModels, importBusy }) }));
+    }
+    else if (tab === "console") {
+        content = _jsx(ConsolePanel, { store: consoleStore });
+    }
+    else if (tab === "profiler") {
+        content = _jsx(ProfilerPanel, { history: perfHistory });
+    }
+    else if (tab === "animation") {
+        content = _jsx(AnimationPanel, { session: session, api: api });
+    }
+    else {
+        content = _jsx(AgentPanel, { api: api, embedded: true });
+    }
+    return (_jsxs("section", { className: `pointer-events-auto flex min-h-0 flex-1 flex-col border-t ${BORDER} bg-[#111318]`, "aria-label": "Bottom tool dock", children: [_jsx(PanelTabs, { ariaLabel: "Bottom dock tools", active: tab, onSelect: onSelectTab, tabs: [
+                    { id: "content", label: "Content Browser", icon: "image", badge: assets.length },
+                    { id: "console", label: "Console", icon: "terminal", ...(consoleErrorCount > 0 ? { badge: consoleErrorCount } : {}) },
+                    { id: "profiler", label: "Profiler", icon: "gauge" },
+                    { id: "animation", label: "Animation", icon: "film" },
+                    { id: "assistant", label: "AI Assistant", icon: "sparkle" },
+                ], trailing: _jsx(IconButton, { icon: "chevronDown", label: "Collapse bottom dock", size: 12, tone: "ghost", onClick: onClose }) }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: content })] }));
+}

package/dist/shell/CommandPalette.d.ts

@@ -0,0 +1,12 @@
+import { type PaletteCommand } from "./commandRegistry.js";
+/**
+ * Modal command palette (Ctrl/Cmd+K): fuzzy-filters every executable editor command (plus scene
+ * object jump rows), surfaces recent commands when the query is empty, and runs the highlighted
+ * entry on Enter. Esc or backdrop click cancels without side effects.
+ */
+export declare function CommandPalette({ commands, onClose, initialQuery, }: {
+    commands: readonly PaletteCommand[];
+    onClose: () => void;
+    /** Pre-filled filter (e.g. "add " to open straight into placement commands). */
+    initialQuery?: string;
+}): import("react").JSX.Element;

package/dist/shell/CommandPalette.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "./icons.js";
+import { filterPaletteCommands, loadRecentCommandIds, pushRecentCommandId, } from "./commandRegistry.js";
+import { FOCUS_RING } from "./theme.js";
+import { Kbd } from "./ui.js";
+/**
+ * Modal command palette (Ctrl/Cmd+K): fuzzy-filters every executable editor command (plus scene
+ * object jump rows), surfaces recent commands when the query is empty, and runs the highlighted
+ * entry on Enter. Esc or backdrop click cancels without side effects.
+ */
+export function CommandPalette({ commands, onClose, initialQuery = "", }) {
+    const [query, setQuery] = useState(initialQuery);
+    const [cursor, setCursor] = useState(0);
+    const [recentIds, setRecentIds] = useState(() => loadRecentCommandIds());
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const filtered = useMemo(() => filterPaletteCommands(commands, query, recentIds).slice(0, 40), [commands, query, recentIds]);
+    const clampedCursor = Math.min(cursor, Math.max(0, filtered.length - 1));
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    useEffect(() => {
+        const row = listRef.current?.children[clampedCursor];
+        if (row instanceof HTMLElement)
+            row.scrollIntoView({ block: "nearest" });
+    }, [clampedCursor]);
+    const run = (command) => {
+        if (command === undefined)
+            return;
+        setRecentIds(pushRecentCommandId(command.id));
+        onClose();
+        command.run();
+    };
+    return (_jsx("div", { className: "pointer-events-auto absolute inset-0 z-[70] flex items-start justify-center bg-black/50 pt-[12vh] backdrop-blur-[2px]", onClick: onClose, children: _jsxs("div", { role: "dialog", "aria-label": "Command palette", className: "w-[520px] max-w-[92vw] overflow-hidden rounded-[8px] border border-white/10 bg-[#14171d] shadow-2xl shadow-black/60", onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-white/[0.07] px-3", children: [_jsx(Icon, { name: "search", size: 14, className: "shrink-0 text-neutral-500" }), _jsx("input", { ref: inputRef, value: query, onChange: (event) => {
+                                setQuery(event.target.value);
+                                setCursor(0);
+                            }, onKeyDown: (event) => {
+                                if (event.key === "Escape") {
+                                    event.preventDefault();
+                                    onClose();
+                                }
+                                else if (event.key === "ArrowDown") {
+                                    event.preventDefault();
+                                    setCursor((value) => Math.min(filtered.length - 1, value + 1));
+                                }
+                                else if (event.key === "ArrowUp") {
+                                    event.preventDefault();
+                                    setCursor((value) => Math.max(0, value - 1));
+                                }
+                                else if (event.key === "Enter") {
+                                    event.preventDefault();
+                                    run(filtered[clampedCursor]);
+                                }
+                            }, placeholder: "Search commands, tools, or objects\u2026", "aria-label": "Search commands and objects", className: "h-10 w-full bg-transparent text-[13px] text-neutral-100 outline-none placeholder:text-neutral-600" }), _jsx(Kbd, { children: "Esc" })] }), _jsx("div", { ref: listRef, role: "listbox", "aria-label": "Commands", className: "max-h-[46vh] overflow-auto p-1.5", children: filtered.length === 0 ? (_jsxs("div", { className: "p-4 text-center text-[12px] text-neutral-500", children: ["No commands match \u201C", query, "\u201D."] })) : (filtered.map((command, index) => (_jsxs("button", { type: "button", role: "option", "aria-selected": index === clampedCursor, onMouseEnter: () => setCursor(index), onClick: () => run(command), className: `flex w-full items-center gap-2 rounded-[5px] px-2.5 py-1.5 text-left text-[12px] transition-colors ${FOCUS_RING} ${index === clampedCursor ? "bg-cyan-500/15 text-cyan-100" : "text-neutral-300 hover:bg-white/[0.05]"}`, children: [_jsx("span", { className: "w-16 shrink-0 truncate text-[10px] uppercase tracking-wider text-neutral-600", children: command.group }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: command.title }), command.kbd !== undefined ? _jsx(Kbd, { children: command.kbd }) : null] }, command.id)))) })] }) }));
+}

package/dist/shell/ConsolePanel.d.ts

@@ -0,0 +1,8 @@
+import type { EditorConsoleStore } from "./consoleStore.js";
+/**
+ * Console dock tab over the real editor event log — notifications, save/import results, RPC and
+ * agent errors. Severity filters, counts, search, timestamps, and clear; no fabricated entries.
+ */
+export declare function ConsolePanel({ store }: {
+    store: EditorConsoleStore;
+}): import("react").JSX.Element;

package/dist/shell/ConsolePanel.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useSyncExternalStore } from "react";
+import { Icon } from "./icons.js";
+import { FOCUS_RING, INPUT_CLS, NUMERIC } from "./theme.js";
+import { EmptyState, IconButton } from "./ui.js";
+const SEVERITY_META = {
+    info: { icon: "info", row: "text-neutral-300", chip: "text-neutral-300" },
+    warning: { icon: "warning", row: "text-amber-200", chip: "text-amber-300" },
+    error: { icon: "error", row: "text-rose-200", chip: "text-rose-300" },
+};
+function formatTime(at) {
+    const date = new Date(at);
+    const pad = (value) => String(value).padStart(2, "0");
+    return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+}
+/**
+ * Console dock tab over the real editor event log — notifications, save/import results, RPC and
+ * agent errors. Severity filters, counts, search, timestamps, and clear; no fabricated entries.
+ */
+export function ConsolePanel({ store }) {
+    const entries = useSyncExternalStore(store.subscribe, store.getEntries, store.getEntries);
+    const [enabled, setEnabled] = useState({ info: true, warning: true, error: true });
+    const [query, setQuery] = useState("");
+    const counts = useMemo(() => {
+        const totals = { info: 0, warning: 0, error: 0 };
+        for (const entry of entries)
+            totals[entry.severity] += 1;
+        return totals;
+    }, [entries]);
+    const visible = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        return entries.filter((entry) => enabled[entry.severity] &&
+            (needle.length === 0 || entry.message.toLowerCase().includes(needle) || entry.source.toLowerCase().includes(needle)));
+    }, [entries, enabled, query]);
+    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: [Object.keys(SEVERITY_META).map((severity) => {
+                        const meta = SEVERITY_META[severity];
+                        const active = enabled[severity];
+                        return (_jsxs("button", { type: "button", "aria-pressed": active, "aria-label": `${active ? "Hide" : "Show"} ${severity} entries`, onClick: () => setEnabled((previous) => ({ ...previous, [severity]: !previous[severity] })), className: `flex h-6 items-center gap-1 rounded-[5px] border px-1.5 text-[10px] transition-colors ${FOCUS_RING} ${active ? `border-white/[0.1] bg-white/[0.05] ${meta.chip}` : "border-transparent text-neutral-600 hover:text-neutral-400"}`, children: [_jsx(Icon, { name: meta.icon, size: 11 }), _jsx("span", { className: NUMERIC, children: counts[severity] })] }, severity));
+                    }), _jsx("input", { type: "search", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Filter messages\u2026", "aria-label": "Filter console messages", className: `ml-2 h-6 w-56 px-2 ${INPUT_CLS}` }), _jsx("div", { className: "ml-auto", children: _jsx(IconButton, { icon: "trash", label: "Clear console", size: 12, onClick: () => store.clear(), disabled: entries.length === 0 }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-1 font-mono text-[10.5px] leading-relaxed", children: visible.length === 0 ? (_jsx(EmptyState, { icon: "terminal", title: entries.length === 0 ? "No editor events yet" : "No entries match the filter", description: entries.length === 0
+                        ? "Editor actions, save results, and agent activity will appear here as they happen."
+                        : "Adjust the severity filters or search to see more." })) : (visible.map((entry) => {
+                    const meta = SEVERITY_META[entry.severity];
+                    return (_jsxs("div", { className: `flex items-start gap-2 rounded-[4px] px-1.5 py-0.5 hover:bg-white/[0.03] ${meta.row}`, children: [_jsxs("span", { className: `shrink-0 text-neutral-600 ${NUMERIC}`, children: ["[", formatTime(entry.at), "]"] }), _jsx(Icon, { name: meta.icon, size: 11, className: "mt-0.5 shrink-0 opacity-70" }), _jsx("span", { className: "shrink-0 rounded-[3px] bg-white/[0.05] px-1 text-[9px] uppercase tracking-wider text-neutral-500", children: entry.source }), _jsx("span", { className: "min-w-0 flex-1 break-words", children: entry.message })] }, entry.id));
+                })) })] }));
+}

package/dist/shell/ContentBrowser.d.ts

@@ -0,0 +1,21 @@
+import type { EditorSession } from "@jgengine/core/editor/index";
+import { type EditorAssetEntry } from "../AssetBrowser.js";
+import type { BrowserViewMode } from "./layoutStore.js";
+/**
+ * Content Browser dock tab: folder rail + searchable asset grid/list over the game's real asset
+ * catalog, plus the terrain material palette (drag chips onto objects or the viewport). Assets are
+ * draggable into the viewport for placement (and still double-click / Place). Model cards with a URL
+ * get a real offscreen-GLB thumbnail (cached); catalog/marker rows and failed loads keep typed
+ * glyphs — never a fabricated screenshot. Import reuses the standalone editor's host importer.
+ */
+export declare function ContentBrowser({ assets, session, onPlace, view, onSetView, onImportModels, importBusy, }: {
+    assets: readonly EditorAssetEntry[];
+    session: EditorSession;
+    onPlace: (entry: EditorAssetEntry) => void;
+    view: BrowserViewMode;
+    onSetView: (view: BrowserViewMode) => void;
+    /** When set, enables Import + drop-to-import for `.glb`/`.gltf` model files. */
+    onImportModels?: (files: readonly File[]) => void | Promise<void>;
+    /** True while an import is in flight (disables the Import control). */
+    importBusy?: boolean;
+}): import("react").JSX.Element;

package/dist/shell/ContentBrowser.js

@@ -0,0 +1,130 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { ASSET_DRAG_MIME, MATERIAL_DRAG_MIME, encodeAssetDragPayload, } from "../AssetBrowser.js";
+import { TERRAIN_MATERIALS } from "../uiStore.js";
+import { AssetThumbnail } from "./AssetThumbnail.js";
+import { Icon } from "./icons.js";
+import { FOCUS_RING, INPUT_CLS, MICRO_LABEL } from "./theme.js";
+import { EmptyState, IconButton, Segmented } from "./ui.js";
+const ASSET_KIND_ICON = {
+    model: "cube",
+    catalog: "layers",
+    marker: "pin",
+};
+const MODEL_ACCEPT = ".glb,.gltf,model/gltf-binary,model/gltf+json";
+/**
+ * Content Browser dock tab: folder rail + searchable asset grid/list over the game's real asset
+ * catalog, plus the terrain material palette (drag chips onto objects or the viewport). Assets are
+ * draggable into the viewport for placement (and still double-click / Place). Model cards with a URL
+ * get a real offscreen-GLB thumbnail (cached); catalog/marker rows and failed loads keep typed
+ * glyphs — never a fabricated screenshot. Import reuses the standalone editor's host importer.
+ */
+export function ContentBrowser({ assets, session, onPlace, view, onSetView, onImportModels, importBusy = false, }) {
+    const [query, setQuery] = useState("");
+    const [folder, setFolder] = useState("all");
+    const [selectedId, setSelectedId] = useState(null);
+    const [dropActive, setDropActive] = useState(false);
+    const importInputRef = useRef(null);
+    const folders = useMemo(() => {
+        const kinds = new Map();
+        for (const asset of assets)
+            kinds.set(asset.kind, (kinds.get(asset.kind) ?? 0) + 1);
+        return [
+            { id: "all", label: "All assets", icon: "folder", count: assets.length },
+            ...[...kinds.entries()].map(([kind, count]) => ({
+                id: `kind:${kind}`,
+                label: kind === "model" ? "Models" : kind === "catalog" ? "Catalog" : "Markers",
+                icon: ASSET_KIND_ICON[kind] ?? "cube",
+                count,
+            })),
+            { id: "materials", label: "Materials", icon: "sphere", count: TERRAIN_MATERIALS.length },
+        ];
+    }, [assets]);
+    const filtered = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        let list = assets;
+        if (folder.startsWith("kind:")) {
+            const kind = folder.slice(5);
+            list = list.filter((asset) => asset.kind === kind);
+        }
+        if (needle.length === 0)
+            return list;
+        return list.filter((asset) => asset.id.toLowerCase().includes(needle) || asset.label.toLowerCase().includes(needle));
+    }, [assets, folder, query]);
+    const selected = filtered.find((asset) => asset.id === selectedId) ?? null;
+    const activeFolder = folders.find((entry) => entry.id === folder) ?? folders[0];
+    const showMaterials = folder === "materials";
+    const canImport = onImportModels !== undefined;
+    const takeDroppedFiles = (event) => {
+        if (!canImport || event.dataTransfer === null)
+            return;
+        const files = Array.from(event.dataTransfer.files);
+        if (files.length === 0)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        setDropActive(false);
+        void onImportModels(files);
+    };
+    return (_jsxs("div", { className: `flex min-h-0 flex-1 ${dropActive ? "ring-2 ring-inset ring-cyan-400/40" : ""}`, onDragEnter: (event) => {
+            if (!canImport || event.dataTransfer === null)
+                return;
+            if (![...event.dataTransfer.types].includes("Files"))
+                return;
+            event.preventDefault();
+            setDropActive(true);
+        }, onDragOver: (event) => {
+            if (!canImport || event.dataTransfer === null)
+                return;
+            if (![...event.dataTransfer.types].includes("Files"))
+                return;
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "copy";
+            setDropActive(true);
+        }, onDragLeave: (event) => {
+            if (event.currentTarget.contains(event.relatedTarget))
+                return;
+            setDropActive(false);
+        }, onDrop: takeDroppedFiles, children: [_jsxs("nav", { "aria-label": "Asset folders", className: "flex w-40 shrink-0 flex-col gap-0.5 overflow-auto border-r border-white/[0.06] p-1.5", children: [_jsx("div", { className: `px-1.5 pb-1 ${MICRO_LABEL}`, children: "Folders" }), folders.map((entry) => (_jsxs("button", { type: "button", onClick: () => {
+                            setFolder(entry.id);
+                            setSelectedId(null);
+                        }, "aria-current": entry.id === folder, className: `flex items-center gap-1.5 rounded-[5px] px-1.5 py-1 text-left text-[11px] transition-colors ${FOCUS_RING} ${entry.id === folder ? "bg-cyan-500/15 text-cyan-100" : "text-neutral-400 hover:bg-white/[0.05] hover:text-neutral-200"}`, children: [_jsx(Icon, { name: entry.icon, size: 13, className: "shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.label }), _jsx("span", { className: "text-[9px] tabular-nums text-neutral-600", children: entry.count })] }, entry.id)))] }), _jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex h-9 shrink-0 items-center gap-2 border-b border-white/[0.06] px-2", children: [_jsxs("div", { className: "flex items-center gap-1 text-[11px] text-neutral-500", children: [_jsx("span", { children: "Assets" }), _jsx(Icon, { name: "chevronRight", size: 9 }), _jsx("span", { className: "text-neutral-300", children: activeFolder.label })] }), canImport ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", disabled: importBusy, onClick: () => importInputRef.current?.click(), className: `ml-auto flex h-6.5 items-center gap-1 rounded-[5px] bg-cyan-500/15 px-2 text-[11px] text-cyan-100 ring-1 ring-inset ring-cyan-400/30 transition-colors hover:bg-cyan-500/25 disabled:pointer-events-none disabled:opacity-50 ${FOCUS_RING}`, title: "Import .glb / .gltf models into the placeable catalog", children: [_jsx(Icon, { name: "import", size: 12 }), importBusy ? "Importing…" : "Import"] }), _jsx("input", { ref: importInputRef, type: "file", accept: MODEL_ACCEPT, multiple: true, className: "hidden", onChange: (event) => {
+                                            const files = event.target.files;
+                                            if (files !== null && files.length > 0)
+                                                void onImportModels(Array.from(files));
+                                            event.target.value = "";
+                                        } })] })) : null, _jsx("input", { type: "search", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search assets\u2026", "aria-label": "Search assets", className: `${canImport ? "" : "ml-auto "}h-6.5 w-52 px-2 ${INPUT_CLS}` }), _jsx(Segmented, { ariaLabel: "Browser layout", value: view, onChange: onSetView, options: [
+                                    { value: "grid", label: "Grid view", icon: "gridView", iconOnly: true },
+                                    { value: "list", label: "List view", icon: "list", iconOnly: true },
+                                ] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsx("div", { className: "min-h-0 min-w-0 flex-1 overflow-auto p-2", children: showMaterials ? (_jsx("div", { className: "flex flex-wrap gap-1.5", children: TERRAIN_MATERIALS.map((material) => (_jsxs("div", { draggable: true, onDragStart: (event) => {
+                                            event.dataTransfer.setData(MATERIAL_DRAG_MIME, material.id);
+                                            event.dataTransfer.effectAllowed = "copy";
+                                        }, title: `Drag ${material.label} onto an object or the viewport to assign/paint it`, className: "flex cursor-grab items-center gap-2 rounded-[6px] border border-white/[0.08] bg-[#191d24] px-2.5 py-1.5 text-[11px] text-neutral-300 active:cursor-grabbing", children: [_jsx("span", { className: "h-4 w-4 rounded-full ring-1 ring-inset ring-white/20", style: { backgroundColor: material.color } }), material.label] }, material.id))) })) : filtered.length === 0 ? (_jsx(EmptyState, { icon: "image", title: query.length > 0 ? "No assets match" : "No assets in this catalog", description: query.length > 0
+                                        ? `Nothing in ${activeFolder.label} matches “${query}”.`
+                                        : canImport
+                                            ? "Drop .glb / .gltf files here, or use Import, to add placeable models."
+                                            : "This game registers no placeable assets. Register models in the game's asset catalog, or drop .glb files into the standalone editor." })) : view === "grid" ? (_jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-1.5", children: filtered.map((asset) => {
+                                        const isSelected = asset.id === selectedId;
+                                        return (_jsxs("button", { type: "button", draggable: true, onDragStart: (event) => {
+                                                event.dataTransfer.setData(ASSET_DRAG_MIME, encodeAssetDragPayload(asset));
+                                                event.dataTransfer.effectAllowed = "copy";
+                                            }, onClick: () => setSelectedId(asset.id), onDoubleClick: () => onPlace(asset), title: `${asset.label} — drag into viewport or double-click to place`, className: `group flex cursor-grab flex-col overflow-hidden rounded-[6px] border text-left transition-colors active:cursor-grabbing ${FOCUS_RING} ${isSelected
+                                                ? "border-cyan-400/50 bg-cyan-500/10"
+                                                : "border-white/[0.07] bg-white/[0.02] hover:border-white/[0.14] hover:bg-white/[0.04]"}`, children: [_jsx("div", { className: "flex h-14 items-center justify-center overflow-hidden border-b border-white/[0.05] bg-black/25 text-neutral-500 group-hover:text-neutral-300", children: _jsx(AssetThumbnail, { asset: asset, size: 22 }) }), _jsxs("div", { className: "p-1.5", children: [_jsx("div", { className: "truncate text-[10px] text-neutral-200", children: asset.label }), _jsx("div", { className: "mt-0.5 flex items-center gap-1", children: _jsx("span", { className: "rounded-[3px] bg-white/[0.06] px-1 py-px text-[8px] uppercase tracking-wider text-neutral-500", children: asset.kind }) })] })] }, asset.id));
+                                    }) })) : (_jsx("div", { className: "space-y-0.5", children: filtered.map((asset) => {
+                                        const isSelected = asset.id === selectedId;
+                                        return (_jsxs("div", { draggable: true, onDragStart: (event) => {
+                                                event.dataTransfer.setData(ASSET_DRAG_MIME, encodeAssetDragPayload(asset));
+                                                event.dataTransfer.effectAllowed = "copy";
+                                            }, className: `group flex cursor-grab items-center gap-2 rounded-[5px] px-1.5 py-1 transition-colors active:cursor-grabbing ${isSelected ? "bg-cyan-500/10 ring-1 ring-inset ring-cyan-400/30" : "hover:bg-white/[0.04]"}`, children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-[4px] border border-white/[0.06] bg-black/30", children: _jsx(AssetThumbnail, { asset: asset, size: 14 }) }), _jsxs("button", { type: "button", onClick: () => setSelectedId(asset.id), onDoubleClick: () => onPlace(asset), className: `min-w-0 flex-1 truncate text-left text-[11px] text-neutral-200 ${FOCUS_RING}`, children: [asset.label, _jsx("span", { className: "ml-2 text-[10px] text-neutral-600", children: asset.id })] }), _jsx("span", { className: "rounded-[3px] bg-white/[0.06] px-1 py-px text-[8px] uppercase tracking-wider text-neutral-500", children: asset.kind }), _jsx("button", { type: "button", onClick: () => onPlace(asset), className: `shrink-0 rounded-[4px] bg-cyan-500/20 px-2 py-0.5 text-[10px] text-cyan-200 opacity-0 ring-1 ring-inset ring-cyan-400/30 transition-all hover:bg-cyan-500/30 focus-visible:opacity-100 group-hover:opacity-100 ${FOCUS_RING}`, children: "Place" })] }, asset.id));
+                                    }) })) }), selected !== null && !showMaterials ? (_jsxs("aside", { className: "w-48 shrink-0 overflow-auto border-l border-white/[0.06] p-2.5", "aria-label": "Asset details", children: [_jsx("div", { className: "flex h-16 items-center justify-center overflow-hidden rounded-[6px] border border-white/[0.07] bg-black/25 text-neutral-400", children: _jsx(AssetThumbnail, { asset: selected, size: 26 }) }), _jsx("div", { className: "mt-2 truncate text-[12px] font-medium text-neutral-100", children: selected.label }), _jsxs("dl", { className: "mt-1.5 space-y-1 text-[10px]", children: [_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx("dt", { className: "text-neutral-600", children: "Type" }), _jsx("dd", { className: "text-neutral-400", children: selected.kind })] }), _jsxs("div", { className: "flex justify-between gap-2", children: [_jsx("dt", { className: "text-neutral-600", children: "Id" }), _jsx("dd", { className: "truncate text-neutral-400", children: selected.id })] }), selected.url !== undefined ? (_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx("dt", { className: "text-neutral-600", children: "Source" }), _jsx("dd", { className: "truncate text-neutral-400", title: selected.url, children: selected.url.split("/").pop() })] })) : null] }), _jsx("button", { type: "button", onClick: () => onPlace(selected), className: `mt-2.5 w-full rounded-[5px] bg-cyan-600 px-2 py-1.5 text-[11px] font-medium text-white transition-colors hover:bg-cyan-500 ${FOCUS_RING}`, children: "Place in scene" })] })) : null] }), _jsxs("div", { className: "flex h-7 shrink-0 items-center gap-2 border-t border-white/[0.06] px-2 text-[10px] text-neutral-600", children: [_jsx("span", { className: "tabular-nums", children: showMaterials ? `${TERRAIN_MATERIALS.length} materials` : `${filtered.length} of ${assets.length} assets` }), selected !== null ? _jsxs("span", { className: "truncate text-neutral-500", children: [selected.id, " selected"] }) : null, canImport && !showMaterials ? (_jsx("span", { className: "truncate text-neutral-600", children: "Drop .glb here or Import" })) : null, _jsx("div", { className: "ml-auto", children: _jsx(IconButton, { icon: "pin", label: "Add empty marker at origin", size: 12, onClick: () => session.dispatch({
+                                        type: "addMarker",
+                                        marker: {
+                                            id: `marker_${Date.now().toString(36)}`,
+                                            kind: "prop",
+                                            position: { x: 0, y: 0, z: 0 },
+                                            label: "New marker",
+                                            color: "#e2e8f0",
+                                        },
+                                    }) }) })] })] })] }));
+}

package/dist/shell/HierarchyPanel.d.ts

@@ -0,0 +1,26 @@
+import { type EditorSession } from "@jgengine/core/editor/index";
+import type { EditorHostApi } from "../session.js";
+export { hierarchyActiveDescendantId, hierarchyRowDomId, selectableIds, } from "./hierarchyA11y.js";
+/** HTML5 drag payload for hierarchy reparenting via `set_parent`. */
+export declare const OBJECT_DRAG_MIME = "application/x-jgengine-editor-object";
+/**
+ * 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 declare const HierarchyPanel: import("react").MemoExoticComponent<({ session, api, onAdd, onRowContextMenu, }: {
+    session: EditorSession;
+    api: EditorHostApi;
+    /** Opens the add flow (command palette pre-filtered to Add commands). */
+    onAdd: () => void;
+    /** Right-click a row — host opens the shared editor context menu at the pointer. */
+    onRowContextMenu?: (event: {
+        clientX: number;
+        clientY: number;
+    }, id: string) => void;
+}) => import("react").JSX.Element>;