@jgengine/editor 0.18.1 → 0.21.0

package/dist/EditorChrome.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useContext, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { editorDocumentSize, editorParentOf, extractEditorFragment, } from "@jgengine/core/editor/index";
 import { scatterRegionEstimate, SCATTER_PATH_KIND } from "@jgengine/core/world/scatterRegion";
 import { editorAssetFromImport, mergeEditorAssets, } from "./AssetBrowser.js";
@@ -7,6 +7,9 @@ import { CatalogsPanel } from "./CatalogsPanel.js";
 import { CollectionsPanel } from "./CollectionsPanel.js";
 import { EditorContextMenu } from "./EditorContextMenu.js";
 import { ParentPickerMenu } from "./ParentPickerMenu.js";
+import { modelWithAuthoredMaterials } from "@jgengine/core/editor/materialAuthoring";
+import { modelWithAuthoredNodeVisibility } from "@jgengine/core/editor/modelNodeVisibility";
+import { MaterialPreview } from "./MaterialPreview.js";
 import { MaterialsWorkspacePanel } from "./MaterialsWorkspacePanel.js";
 import { PrefabsPanel } from "./PrefabsPanel.js";
 import { listParentCandidates } from "./parentCandidates.js";
@@ -37,6 +40,7 @@ import { createPerfHistoryStore } from "./shell/perfHistory.js";
 import { BORDER, FOCUS_RING } from "./shell/theme.js";
 import { IconButton, Kbd, PanelResizer } from "./shell/ui.js";
 import { ScriptingPanel } from "./ScriptingPanel.js";
+import { EditorDocumentSaveContext, useDocumentSave } from "./useDocumentSave.js";
 let clipboardFragment = null;
 const SHORTCUTS = [
     { keys: "W / E / R", action: "Move · rotate · scale gizmo" },
@@ -72,47 +76,21 @@ function downloadText(filename, text) {
     anchor.click();
     URL.revokeObjectURL(url);
 }
-function useDocumentSave(session, save, onResult) {
-    const [saveState, setSaveState] = useState("idle");
-    const [saveError, setSaveError] = useState(null);
-    const [lastSavedAt, setLastSavedAt] = useState(null);
-    const savedDocRef = useRef(session.getState().document);
-    const dirty = session.getState().document !== savedDocRef.current;
-    const doSave = () => {
-        if (save === undefined || saveState === "saving")
-            return;
-        const document = session.getState().document;
-        setSaveState("saving");
-        void save(session.exportJson(true)).then((result) => {
-            if (result.ok) {
-                savedDocRef.current = document;
-                setSaveError(null);
-                setSaveState("saved");
-                setLastSavedAt(Date.now());
-                onResult?.(true, result.path === undefined ? "Scene saved" : `Scene saved to ${result.path}`);
-            }
-            else {
-                setSaveError(result.error ?? "save failed");
-                setSaveState("error");
-                onResult?.(false, `Save failed: ${result.error ?? "unknown error"}`);
-            }
-        });
-    };
-    return { available: save !== undefined, dirty, saveState, saveError, lastSavedAt, doSave };
-}
 const LEFT_PAGES = [
     { id: "hierarchy", label: "Hierarchy" },
     { id: "collections", label: "Sets" },
     { id: "prefabs", label: "Prefabs" },
     { id: "catalogs", label: "Data" },
 ];
+/** The Animation workspace needs room for a graph's layers, so it raises a shorter dock to this height. */
+const ANIMATION_DOCK_HEIGHT = 400;
 /**
  * The full editor UI shell — global app bar, contextual scene toolbar, workspace rail, resizable
  * hierarchy/inspector docks, tabbed bottom dock (content browser, console, profiler, AI
  * assistant), viewport overlays, and status bar — wired to the session, UI store, layout store,
  * and host RPC. Mounted by `EditorApp`; not a game-author entry point.
  */
-export function EditorChrome({ gameId, session, api, assets, ui, baselineDocument, save, networkSnapshot, importAsset = importAssetToHost, onRegisterAsset, onExitEditor, }) {
+export function EditorChrome({ gameId, session, api, assets, ui, baselineDocument, save, networkSnapshot, importAsset = importAssetToHost, onRegisterAsset, onExitEditor, allowedKinds, exitLabel, maxImportBytes, documentSave, draftAutosave = true, creatorPolicy, }) {
     const layoutRef = useRef(null);
     layoutRef.current ??= createShellLayoutStore(gameId);
     const layout = layoutRef.current;
@@ -126,6 +104,8 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineDocumen
     /** Models added this session via Content Browser Import / drop — merged over the game catalog. */
     const [importedAssets, setImportedAssets] = useState([]);
     const [importBusy, setImportBusy] = useState(false);
+    const [materialInventory, setMaterialInventory] = useState(null);
+    const [materialPreviewFailure, setMaterialPreviewFailure] = useState(null);
     // Bridge global RPC/agent console emits into the dock console for this chrome instance.
     useEffect(() => installEditorConsoleSink((severity, source, message) => {
         consoleStore.log(severity, source, message);
@@ -154,7 +134,44 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineDocumen
     const state = session.getState();
     const uiState = ui.getState();
     const layoutState = layout.getState();
-    const docSave = useDocumentSave(session, save, (ok, detail) => consoleStore.log(ok ? "info" : "error", "save", detail));
+    const materialMarker = state.document.markers.find((item) => state.selection.includes(item.id));
+    const materialSourceUrl = liveAssets.find((item) => item.id === (materialMarker?.catalogId ?? materialMarker?.meta?.catalogId))?.url;
+    const materialPreviewConfig = useMemo(() => {
+        try {
+            return { model: materialSourceUrl && materialMarker ? modelWithAuthoredNodeVisibility(modelWithAuthoredMaterials({ url: materialSourceUrl, targetHeight: 1.8, animation: "none" }, state.document, materialMarker.id), materialMarker) : undefined, error: null };
+        }
+        catch (failure) {
+            return { model: undefined, error: failure instanceof Error ? failure.message : String(failure) };
+        }
+    }, [materialSourceUrl, materialMarker, state.document]);
+    const materialSourceKey = JSON.stringify([materialMarker?.id, materialSourceUrl, materialPreviewConfig]);
+    const materialMarkerId = materialMarker?.id;
+    useEffect(() => {
+        if (layoutState.workspace !== "materials" || !materialMarkerId || !materialSourceUrl)
+            return;
+        if (api.getMaterialSlots(materialMarkerId).status === "ready")
+            return;
+        api.reportMaterialSlots(materialMarkerId, materialSourceUrl, materialPreviewConfig.error
+            ? { status: "unavailable", reason: materialPreviewConfig.error }
+            : { status: "loading" });
+        return () => {
+            const current = api.getMaterialSlots(materialMarkerId);
+            if (current.sourceUrl === materialSourceUrl && current.status === "loading")
+                api.reportMaterialSlots(materialMarkerId, materialSourceUrl, { status: "unavailable", reason: "The model preview closed before slot inspection completed." });
+        };
+    }, [api, materialMarkerId, materialSourceUrl, layoutState.workspace, materialPreviewConfig.error]);
+    const reportMaterialSlots = useCallback((slots) => {
+        if (materialMarkerId && materialSourceUrl && api.reportMaterialSlots(materialMarkerId, materialSourceUrl, { status: "ready", slots }))
+            setMaterialInventory({ source: materialSourceKey, slots });
+    }, [api, materialMarkerId, materialSourceUrl, materialSourceKey]);
+    const reportMaterialError = useCallback((message) => {
+        setMaterialPreviewFailure({ source: materialSourceKey, message });
+        if (message && materialMarkerId && materialSourceUrl && api.getMaterialSlots(materialMarkerId).status !== "ready")
+            api.reportMaterialSlots(materialMarkerId, materialSourceUrl, { status: "unavailable", reason: message });
+    }, [api, materialMarkerId, materialSourceUrl, materialSourceKey]);
+    const sharedSave = useContext(EditorDocumentSaveContext) ?? documentSave;
+    const localSave = useDocumentSave(session, sharedSave === undefined ? save : undefined, (ok, detail) => consoleStore.log(ok ? "info" : "error", "save", detail));
+    const docSave = sharedSave ?? localSave;
     const docSaveRef = useRef(docSave);
     docSaveRef.current = docSave;
     const outlinerGroups = useMemo(() => buildOutlinerGroups(state.document), [state.document]);
@@ -575,6 +592,10 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineDocumen
         }
     }, [importAsset, importBusy, layout, notify, onRegisterAsset]);
     const importFile = (file) => {
+        if (maxImportBytes !== undefined && file.size > maxImportBytes) {
+            notify("Import failed: scene exceeds byte budget", "error");
+            return;
+        }
         void file.text().then((text) => {
             try {
                 session.dispatch({ type: "importJson", json: text });
@@ -612,6 +633,11 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineDocumen
     };
     const selectWorkspace = (workspace) => {
         layout.setWorkspace(workspace);
+        if (workspace === "animation") {
+            openBottomTab("animation");
+            if (layout.getState().bottomHeight < ANIMATION_DOCK_HEIGHT)
+                layout.patch({ bottomHeight: ANIMATION_DOCK_HEIGHT });
+        }
         if (workspace === "terrain")
             ui.setTool("terrain");
         else if (ui.getState().tool === "terrain")
@@ -674,12 +700,12 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineDocumen
     const railActive = uiState.tool === "terrain" ? "terrain" : layoutState.workspace;
     // Only advertise the exit chord when there is a game to return to.
     const shortcuts = onExitEditor !== undefined ? [...SHORTCUTS, { keys: "F2+Q", action: "Exit editor to game" }] : SHORTCUTS;
-    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 z-50 flex flex-col text-xs text-neutral-100", children: [_jsx(TopAppBar, { gameId: gameId, onExitToGame: onExitEditor, dirty: dirty, saveState: docSave.saveState, lastSavedAt: docSave.lastSavedAt, saveAvailable: docSave.available, saveError: docSave.saveError, canUndo: session.canUndo(), canRedo: session.canRedo(), onUndo: () => session.dispatch({ type: "undo" }), onRedo: () => session.dispatch({ type: "redo" }), onSave: docSave.doSave, onPlay: () => api.setMode("play"), onWalk: () => api.setMode("walk"), onHud: () => api.setMode("hud"), onImport: () => importInputRef.current?.click(), onExport: exportJson, onCopyJson: copyExportJson, onOpenPalette: () => setPaletteQuery(""), onToggleHelp: () => setHelpOpen((value) => !value), onResetLayout: () => layout.reset() }), _jsx("input", { ref: importInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: (event) => {
+    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 z-50 flex flex-col text-xs text-neutral-100", children: [_jsx(TopAppBar, { exitLabel: exitLabel, gameId: gameId, onExitToGame: onExitEditor, dirty: dirty, saveState: docSave.saveState, lastSavedAt: docSave.lastSavedAt, saveAvailable: docSave.available, saveError: docSave.saveError, canUndo: session.canUndo(), canRedo: session.canRedo(), onUndo: () => session.dispatch({ type: "undo" }), onRedo: () => session.dispatch({ type: "redo" }), onSave: docSave.doSave, onPlay: () => api.setMode("play"), onWalk: () => api.setMode("walk"), onHud: () => api.setMode("hud"), onImport: () => importInputRef.current?.click(), onExport: exportJson, onCopyJson: copyExportJson, onOpenPalette: () => setPaletteQuery(""), onToggleHelp: () => setHelpOpen((value) => !value), onResetLayout: () => layout.reset() }), _jsx("input", { ref: importInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: (event) => {
                     const file = event.target.files?.[0];
                     if (file !== undefined)
                         importFile(file);
                     event.target.value = "";
-                } }), _jsx(SceneToolbar, { tool: uiState.tool, gizmoMode: uiState.gizmoMode, gizmoSpace: uiState.gizmoSpace, gizmoPivot: uiState.gizmoPivot, snapMode: uiState.snapMode, gridSize: uiState.gridSize, rotationSnapDeg: uiState.rotationSnapDeg, scaleSnap: uiState.scaleSnap, cameraProjection: uiState.cameraProjection, showGrid: uiState.showGrid, showContours: uiState.showContours, showSurfaceGrid: uiState.showSurfaceGrid, showElevation: uiState.showElevation, placementActive: placement !== null, onSetTool: (tool) => ui.setTool(tool), onSetGizmoMode: (mode) => ui.patch({ gizmoMode: mode }), onSetGizmoSpace: (space) => ui.patch({ gizmoSpace: space }), onSetGizmoPivot: (pivot) => ui.patch({ gizmoPivot: pivot }), onSetSnapMode: (mode) => ui.patch({ snapMode: mode }), onSetGridSize: (size) => ui.patch({ gridSize: size }), onSetRotationSnapDeg: (deg) => ui.patch({ rotationSnapDeg: deg }), onSetScaleSnap: (snap) => ui.patch({ scaleSnap: snap }), onSetCameraProjection: (projection) => ui.patch({ cameraProjection: projection }), onToggleGrid: () => ui.patch({ showGrid: !uiState.showGrid }), onToggleContours: () => ui.patch({ showContours: !uiState.showContours }), onToggleSurfaceGrid: () => ui.patch({ showSurfaceGrid: !uiState.showSurfaceGrid }), onToggleElevation: () => ui.patch({ showElevation: !uiState.showElevation }), onFrame: () => {
+                } }), _jsx(SceneToolbar, { allowedKinds: allowedKinds, tool: uiState.tool, gizmoMode: uiState.gizmoMode, gizmoSpace: uiState.gizmoSpace, gizmoPivot: uiState.gizmoPivot, snapMode: uiState.snapMode, gridSize: uiState.gridSize, rotationSnapDeg: uiState.rotationSnapDeg, scaleSnap: uiState.scaleSnap, cameraProjection: uiState.cameraProjection, showGrid: uiState.showGrid, showContours: uiState.showContours, showSurfaceGrid: uiState.showSurfaceGrid, showElevation: uiState.showElevation, placementActive: placement !== null, onSetTool: (tool) => ui.setTool(tool), onSetGizmoMode: (mode) => ui.patch({ gizmoMode: mode }), onSetGizmoSpace: (space) => ui.patch({ gizmoSpace: space }), onSetGizmoPivot: (pivot) => ui.patch({ gizmoPivot: pivot }), onSetSnapMode: (mode) => ui.patch({ snapMode: mode }), onSetGridSize: (size) => ui.patch({ gridSize: size }), onSetRotationSnapDeg: (deg) => ui.patch({ rotationSnapDeg: deg }), onSetScaleSnap: (snap) => ui.patch({ scaleSnap: snap }), onSetCameraProjection: (projection) => ui.patch({ cameraProjection: projection }), onToggleGrid: () => ui.patch({ showGrid: !uiState.showGrid }), onToggleContours: () => ui.patch({ showContours: !uiState.showContours }), onToggleSurfaceGrid: () => ui.patch({ showSurfaceGrid: !uiState.showSurfaceGrid }), onToggleElevation: () => ui.patch({ showElevation: !uiState.showElevation }), onFrame: () => {
                     const selected = session.getState().selection[0];
                     if (selected !== undefined)
                         api.handle({ method: "camera_goto", id: selected });
@@ -701,7 +727,7 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineDocumen
                                                             : null;
                                                 const selected = layoutState.leftPage === page.id;
                                                 return (_jsxs("button", { type: "button", role: "tab", "aria-selected": selected, onClick: () => layout.patch({ leftPage: page.id }), className: `flex h-6.5 items-center gap-1 rounded-[5px] px-2 text-[11px] transition-colors ${FOCUS_RING} ${selected ? "bg-white/[0.08] text-neutral-100" : "text-neutral-500 hover:bg-white/[0.04] hover:text-neutral-300"}`, children: [page.label, badge !== null && badge > 0 ? _jsx("span", { className: "text-[9px] tabular-nums text-neutral-500", children: badge }) : null] }, page.id));
-                                            })), _jsx(IconButton, { icon: "close", label: "Collapse left panel", size: 11, tone: "ghost", className: "ml-auto", onClick: () => layout.patch({ leftOpen: false }) })] }), layoutState.workspace === "multiplayer" ? (_jsx(NetworkWorkspacePanel, { snapshot: networkSnapshot })) : layoutState.workspace === "materials" ? (_jsx(MaterialsWorkspacePanel, { session: session, api: api })) : layoutState.workspace === "scripting" ? (_jsx(ScriptingPanel, { session: session, api: api })) : layoutState.leftPage === "collections" ? (_jsx(CollectionsPanel, { session: session })) : layoutState.leftPage === "prefabs" ? (_jsx(PrefabsPanel, { session: session, api: api })) : layoutState.leftPage === "catalogs" ? (_jsx(CatalogsPanel, { session: session, definitions: api.getCatalogDefinitions() })) : (_jsx(HierarchyPanel, { session: session, api: api, onAdd: () => setPaletteQuery("add "), onRowContextMenu: (point, id) => {
+                                            })), _jsx(IconButton, { icon: "close", label: "Collapse left panel", size: 11, tone: "ghost", className: "ml-auto", onClick: () => layout.patch({ leftOpen: false }) })] }), layoutState.workspace === "multiplayer" ? (_jsx(NetworkWorkspacePanel, { snapshot: networkSnapshot })) : layoutState.workspace === "materials" ? (_jsx(MaterialsWorkspacePanel, { session: session, api: api, materialSlots: materialInventory?.source === materialSourceKey ? materialInventory.slots : [], previewError: materialPreviewConfig.error ?? (materialPreviewFailure?.source === materialSourceKey ? materialPreviewFailure.message : null), onSave: docSave.available ? docSave.doSave : undefined, preview: (asset, mode) => materialPreviewConfig.error || (!materialPreviewConfig.model && !asset) ? null : _jsx(MaterialPreview, { asset: asset, mode: mode, model: materialPreviewConfig.model, onSlots: reportMaterialSlots, onError: reportMaterialError, environment: state.document.environment }) })) : layoutState.workspace === "scripting" ? (_jsx(ScriptingPanel, { session: session, api: api })) : layoutState.leftPage === "collections" ? (_jsx(CollectionsPanel, { session: session })) : layoutState.leftPage === "prefabs" ? (_jsx(PrefabsPanel, { session: session, api: api })) : layoutState.leftPage === "catalogs" ? (_jsx(CatalogsPanel, { session: session, definitions: api.getCatalogDefinitions() })) : (_jsx(HierarchyPanel, { session: session, api: api, onAdd: () => setPaletteQuery("add "), onRowContextMenu: (point, id) => {
                                             const current = session.getState().selection;
                                             if (!current.includes(id))
                                                 session.dispatch({ type: "select", ids: [id] });
@@ -749,5 +775,5 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineDocumen
                                         ["profiler", "Profiler"],
                                         ["animation", "Animation"],
                                         ["assistant", "AI Assistant"],
-                                    ].map(([id, label]) => (_jsx("button", { type: "button", onClick: () => openBottomTab(id), className: `rounded-[4px] px-2 py-0.5 text-[10px] text-neutral-500 transition-colors hover:bg-white/[0.05] hover:text-neutral-300 ${FOCUS_RING}`, children: label }, id))), _jsx("span", { className: "ml-auto text-[9px] text-neutral-600", children: "Ctrl+B opens the content browser" })] }))] }), layoutState.rightOpen ? (_jsxs(_Fragment, { children: [_jsx(PanelResizer, { orientation: "vertical", label: "Resize inspector panel", sign: -1, onResize: (delta) => layout.resize("rightWidth", delta) }), _jsx("aside", { className: `pointer-events-auto hidden min-h-0 flex-col overflow-hidden border-l ${BORDER} bg-[#111318] md:flex`, style: { width: layoutState.rightWidth }, "aria-label": "Inspector dock", children: _jsx(InspectorPanel, { session: session, ui: ui, api: api, assets: liveAssets, tab: layoutState.inspectorTab, onSelectTab: (tab) => layout.patch({ inspectorTab: tab }), collapsed: layoutState.collapsed, onToggleSection: (id) => layout.toggleSection(id), onClose: () => layout.patch({ rightOpen: false }) }) })] })) : null] }), _jsx(StatusBar, { api: api, history: perfHistory, objects: sceneStats.objects, foliage: sceneStats.foliage, selectionCount: state.selection.length, autosave: true }), paletteQuery !== null ? (_jsx(CommandPalette, { commands: paletteCommands, initialQuery: paletteQuery, onClose: () => setPaletteQuery(null) })) : null, helpOpen ? (_jsx("div", { className: "pointer-events-auto absolute inset-0 z-[70] flex items-center justify-center bg-black/50 backdrop-blur-[2px]", onClick: () => setHelpOpen(false), children: _jsxs("div", { className: "w-[28rem] max-w-[90vw] rounded-[10px] border border-white/10 bg-[#14171d] p-5 shadow-2xl shadow-black/60", onClick: (event) => event.stopPropagation(), role: "dialog", "aria-label": "Keyboard shortcuts", children: [_jsxs("div", { className: "mb-3 flex items-center", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold tracking-wide text-neutral-100", children: [_jsx(Icon, { name: "command", size: 15, className: "text-cyan-300" }), "Keyboard shortcuts"] }), _jsx(IconButton, { icon: "close", label: "Close shortcuts", tone: "ghost", className: "ml-auto", onClick: () => setHelpOpen(false) })] }), _jsx("div", { className: "grid max-h-[60vh] grid-cols-[auto_1fr] items-center gap-x-4 gap-y-1.5 overflow-auto", children: shortcuts.map((entry) => (_jsxs("div", { className: "contents", children: [_jsx("span", { className: "justify-self-start", children: _jsx(Kbd, { children: entry.keys }) }), _jsx("span", { className: "text-neutral-300", children: entry.action })] }, entry.keys))) })] }) })) : null] }));
+                                    ].map(([id, label]) => (_jsx("button", { type: "button", onClick: () => openBottomTab(id), className: `rounded-[4px] px-2 py-0.5 text-[10px] text-neutral-500 transition-colors hover:bg-white/[0.05] hover:text-neutral-300 ${FOCUS_RING}`, children: label }, id))), _jsx("span", { className: "ml-auto text-[9px] text-neutral-600", children: "Ctrl+B opens the content browser" })] }))] }), layoutState.rightOpen ? (_jsxs(_Fragment, { children: [_jsx(PanelResizer, { orientation: "vertical", label: "Resize inspector panel", sign: -1, onResize: (delta) => layout.resize("rightWidth", delta) }), _jsx("aside", { className: `pointer-events-auto hidden min-h-0 flex-col overflow-hidden border-l ${BORDER} bg-[#111318] md:flex`, style: { width: layoutState.rightWidth }, "aria-label": "Inspector dock", children: _jsx(InspectorPanel, { creatorPolicy: creatorPolicy, session: session, ui: ui, api: api, assets: liveAssets, tab: layoutState.inspectorTab, onSelectTab: (tab) => layout.patch({ inspectorTab: tab }), collapsed: layoutState.collapsed, onToggleSection: (id) => layout.toggleSection(id), onClose: () => layout.patch({ rightOpen: false }) }) })] })) : null] }), _jsx(StatusBar, { api: api, history: perfHistory, objects: sceneStats.objects, foliage: sceneStats.foliage, selectionCount: state.selection.length, autosave: draftAutosave }), paletteQuery !== null ? (_jsx(CommandPalette, { commands: paletteCommands, initialQuery: paletteQuery, onClose: () => setPaletteQuery(null) })) : null, helpOpen ? (_jsx("div", { className: "pointer-events-auto absolute inset-0 z-[70] flex items-center justify-center bg-black/50 backdrop-blur-[2px]", onClick: () => setHelpOpen(false), children: _jsxs("div", { className: "w-[28rem] max-w-[90vw] rounded-[10px] border border-white/10 bg-[#14171d] p-5 shadow-2xl shadow-black/60", onClick: (event) => event.stopPropagation(), role: "dialog", "aria-label": "Keyboard shortcuts", children: [_jsxs("div", { className: "mb-3 flex items-center", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold tracking-wide text-neutral-100", children: [_jsx(Icon, { name: "command", size: 15, className: "text-cyan-300" }), "Keyboard shortcuts"] }), _jsx(IconButton, { icon: "close", label: "Close shortcuts", tone: "ghost", className: "ml-auto", onClick: () => setHelpOpen(false) })] }), _jsx("div", { className: "grid max-h-[60vh] grid-cols-[auto_1fr] items-center gap-x-4 gap-y-1.5 overflow-auto", children: shortcuts.map((entry) => (_jsxs("div", { className: "contents", children: [_jsx("span", { className: "justify-self-start", children: _jsx(Kbd, { children: entry.keys }) }), _jsx("span", { className: "text-neutral-300", children: entry.action })] }, entry.keys))) })] }) })) : null] }));
 }

package/dist/InspectorPanel.d.ts

@@ -1,3 +1,4 @@
+import type { CreatorPolicy } from "@jgengine/core/editor/creatorStorage";
 import { type EditorSession } from "@jgengine/core/editor/index";
 import { type EditorAssetEntry } from "./AssetBrowser.js";
 import type { EditorHostApi } from "./session.js";
@@ -10,9 +11,10 @@ import type { InspectorTab } from "./shell/layoutStore.js";
  * `pathPoint` slice, so UI-only churn never rerenders it on `EditorChrome`'s render tick.
  * @internal — mounted by `EditorChrome` inside the right dock.
  */
-export declare function InspectorPanel({ session, ui, onClose, api, assets, tab, onSelectTab, collapsed, onToggleSection, }: {
+export declare function InspectorPanel({ session, ui, onClose, api, assets, tab, onSelectTab, collapsed, onToggleSection, creatorPolicy, }: {
     session: EditorSession;
     ui: EditorUiStore;
+    creatorPolicy?: CreatorPolicy;
     onClose?: () => void;
     /** Host API for RPC-backed actions (material assignment, camera). */
     api?: EditorHostApi;

package/dist/InspectorPanel.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SimulationInspector } from "./SimulationInspector.js";
 import { useState } from "react";
 import { editorParentOf, findEditorNote, findEditorPath, isEditorObjectLocked, } from "@jgengine/core/editor/index";
 import { readVegetationSettings, vegetationFootprint } from "@jgengine/core/world/vegetation";
@@ -11,7 +12,7 @@ import { canAuthorTrigger, clearMaterialAssignmentPatch, clearTriggerInstallPatc
 import { SchemaInspector } from "./SchemaInspector.js";
 import { TriggerInspector } from "./TriggerInspector.js";
 import { describeClipRoles } from "./AssetBrowser.js";
-import { animationMode, animationMetaPatch, LOCOMOTION_ROLES, ONE_SHOT_EVENTS, readAnimationSetting, setAnimationMode, setLocomotionClip, setLocomotionNumber, setOneShotClip, } from "./modelAnimationAuthoring.js";
+import { animationMode, animationMetaPatch, LOCOMOTION_ROLES, ONE_SHOT_EVENTS, readAnimationSettingResult, setAnimationMode, setLocomotionClip, setLocomotionNumber, setOneShotClip, setPlaybackBoolean, setPlaybackClip, setPlaybackNumber, setPlaybackClock, setAutomaticRoles, } from "./modelAnimationAuthoring.js";
 import { listParentCandidates } from "./parentCandidates.js";
 import { TERRAIN_MATERIALS } from "./uiStore.js";
 import { shallowArrayEqual, useStoreSelector } from "./useStoreSelector.js";
@@ -127,23 +128,25 @@ function ComponentAddBar({ target, meta, onMeta, api, selectionIds, }) {
 }
 /** A labeled clip dropdown (never free-text) for a role/event; "— none —" clears the binding. */
 function ClipSelectRow({ label, clips, value, onChange, }) {
-    return (_jsx(FieldRow, { label: label, children: _jsxs("select", { className: `h-6.5 w-full min-w-0 px-1.5 ${INPUT_CLS}`, value: value ?? "", "aria-label": `${label} clip`, onChange: (event) => onChange(event.target.value === "" ? null : event.target.value), children: [_jsx("option", { value: "", children: "\u2014 none \u2014" }), clips.map((clip) => (_jsx("option", { value: clip, children: clip }, clip)))] }) }));
+    return (_jsx(FieldRow, { label: label, children: _jsxs("select", { className: `h-6.5 w-full min-w-0 px-1.5 ${INPUT_CLS}`, value: value ?? "", "aria-label": `${label} clip`, onChange: (event) => onChange(event.target.value === "" ? null : event.target.value), children: [_jsx("option", { value: "", children: "\u2014 none \u2014" }), value !== null && !clips.includes(value) ? _jsxs("option", { value: value, children: [value, " (missing)"] }) : null, clips.map((clip) => (_jsx("option", { value: clip, children: clip }, clip)))] }) }));
 }
 const ANIMATION_MODE_HINT = {
     default: "Inherits the catalog default: a rigged asset auto-animates from its clip roles.",
     auto: "Forces derivation of idle/walk/run + hit/death/attack from this rig's clip names.",
     none: "Renders the bind pose — no clip playback.",
-    custom: "Author explicit role→clip bindings below; unset roles fall back to the rig's defaults.",
+    custom: "Author explicit playback or role bindings below; states and graphs take priority over a single clip.",
 };
 /**
  * Inspector section authoring a placement's `ModelConfig.animation` for a rigged catalog asset.
  * Persists to `marker.meta.animation` through the passed `onChange` (an undoable `setMarker` dispatch).
  * All clip picks are dropdowns over the asset's real clip list — never free-text.
  */
-function ModelAnimationSection({ clips, setting, onChange, }) {
+function ModelAnimationSection({ clips, setting, diagnostics, onChange, }) {
     const mode = animationMode(setting);
     const config = mode === "custom" && typeof setting === "object" ? setting : null;
-    return (_jsxs("div", { className: "space-y-2.5", children: [_jsxs("div", { className: "text-[10px] text-neutral-500", children: [clips.length, " clips \u00B7 ", describeClipRoles(clips)] }), _jsx(FieldRow, { label: "Mode", children: _jsxs("select", { className: `h-6.5 w-full min-w-0 px-1.5 ${INPUT_CLS}`, value: mode, "aria-label": "Animation mode", onChange: (event) => onChange(setAnimationMode(setting, event.target.value, clips)), children: [_jsx("option", { value: "default", children: "Default (catalog)" }), _jsx("option", { value: "auto", children: "Auto (derive)" }), _jsx("option", { value: "none", children: "None (bind pose)" }), _jsx("option", { value: "custom", children: "Custom" })] }) }), config === null ? (_jsx("div", { className: "text-[10px] leading-relaxed text-neutral-600", children: ANIMATION_MODE_HINT[mode] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-1.5 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2", children: [_jsx("div", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "Locomotion states" }), LOCOMOTION_ROLES.map((role) => (_jsx(ClipSelectRow, { label: role, clips: clips, value: config.states?.[role] ?? null, onChange: (clip) => onChange(setLocomotionClip(setting, role, clip)) }, role))), _jsx(FieldRow, { label: "walkSpeed", title: "Speed (u/s) above which the entity counts as moving (walk).", children: _jsx(AxisNumberField, { label: "u/s", step: 0.1, value: config.states?.walkSpeed ?? 0.5, onCommit: (value) => onChange(setLocomotionNumber(setting, "walkSpeed", Math.max(0, value))) }) }), _jsx(FieldRow, { label: "runSpeed", title: "Speed above which the run clip plays (when a run clip is set).", children: _jsx(AxisNumberField, { label: "u/s", step: 0.5, value: config.states?.runSpeed ?? 6, onCommit: (value) => onChange(setLocomotionNumber(setting, "runSpeed", Math.max(0, value))) }) }), _jsx(FieldRow, { label: "fadeSec", title: "Crossfade duration (s) when the locomotion state changes.", children: _jsx(AxisNumberField, { label: "s", step: 0.05, value: config.states?.fadeSec ?? 0.2, onCommit: (value) => onChange(setLocomotionNumber(setting, "fadeSec", Math.max(0, value))) }) })] }), _jsxs("div", { className: "space-y-1.5 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2", children: [_jsx("div", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "One-shot events" }), _jsx("div", { className: "text-[10px] text-neutral-600", children: "hit / death auto-fire on damage/death; others via playEntityAnimation." }), ONE_SHOT_EVENTS.map((event) => (_jsx(ClipSelectRow, { label: event, clips: clips, value: config.oneShots?.[event] ?? null, onChange: (clip) => onChange(setOneShotClip(setting, event, clip)) }, event)))] })] }))] }));
+    if (diagnostics.length > 0)
+        return (_jsxs("div", { className: "space-y-2 text-[10px]", children: [_jsxs("div", { role: "alert", "aria-label": "Animation diagnostics", className: "space-y-1 text-amber-200", children: [_jsx("p", { children: "The saved animation override is invalid. Playback edits are unavailable until it is repaired or replaced." }), diagnostics.map((entry) => _jsxs("div", { children: [_jsxs("div", { className: "break-all", children: [entry.path, ": ", entry.message] }), _jsx("div", { children: entry.repair })] }, `${entry.path}:${entry.message}`))] }), _jsxs("label", { className: "flex flex-col gap-1", children: [_jsx("span", { children: "Replace the invalid animation override" }), _jsxs("select", { className: `h-6.5 w-full px-1.5 ${INPUT_CLS}`, value: "", "aria-label": "Replace invalid animation override", onChange: (event) => onChange(setAnimationMode(undefined, event.target.value, clips)), children: [_jsx("option", { value: "", disabled: true, children: "Choose an explicit replacement" }), _jsx("option", { value: "default", children: "Remove override (inherit catalog)" }), _jsx("option", { value: "auto", children: "Replace with Auto" }), _jsx("option", { value: "none", children: "Replace with None (bind pose)" }), _jsx("option", { value: "custom", disabled: clips.length === 0, children: "Replace with Custom (derive from this rig)" })] })] }), _jsx("p", { className: "text-neutral-500", children: "Replacement discards the invalid override and can be undone. Raw metadata remains available below." })] }));
+    return (_jsxs("div", { className: "space-y-2.5", children: [_jsxs("div", { className: "text-[10px] text-neutral-500", children: [clips.length, " clips \u00B7 ", describeClipRoles(clips)] }), _jsx(FieldRow, { label: "Mode", children: _jsxs("select", { className: `h-6.5 w-full min-w-0 px-1.5 ${INPUT_CLS}`, value: mode, "aria-label": "Animation mode", onChange: (event) => onChange(setAnimationMode(setting, event.target.value, clips)), children: [_jsx("option", { value: "default", children: "Default (catalog)" }), _jsx("option", { value: "auto", children: "Auto (derive)" }), _jsx("option", { value: "none", children: "None (bind pose)" }), _jsx("option", { value: "custom", children: "Custom" })] }) }), config === null ? (_jsx("div", { className: "text-[10px] leading-relaxed text-neutral-600", children: ANIMATION_MODE_HINT[mode] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-1.5 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2", children: [_jsx("div", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "Playback" }), _jsx(FieldRow, { label: "Clock", title: "Real time preserves playback speed; game time follows this character's simulation speed and time scale. Unbound previews use real time.", children: _jsxs("select", { className: `h-6.5 w-full min-w-0 px-1.5 ${INPUT_CLS}`, "aria-label": "Animation clock", value: config.clock ?? "real", onChange: (event) => onChange(setPlaybackClock(setting, event.target.value)), children: [_jsx("option", { value: "real", children: "Real time (default)" }), _jsx("option", { value: "game", children: "Game time" })] }) }), _jsx(FieldRow, { label: "Derive roles", title: "Infer roles from the loaded rig. Explicit mappings and graphs replace inferred fields whole.", children: _jsx("input", { type: "checkbox", "aria-label": "Derive loaded clip roles", checked: config.auto === true, onChange: (event) => onChange(setAutomaticRoles(setting, event.target.checked)) }) }), _jsx(ClipSelectRow, { label: "Single clip", clips: clips, value: config.clip ?? null, onChange: (clip) => onChange(setPlaybackClip(setting, clip)) }), _jsx("div", { className: "text-[10px] text-neutral-600", children: "Picking a single clip replaces derived roles, locomotion states and a stored graph." }), _jsx(FieldRow, { label: "Rate", title: "Playback multiplier; zero holds playback.", children: _jsx(AxisNumberField, { label: "rate", step: 0.1, value: config.timeScale ?? 1, onCommit: (value) => onChange(setPlaybackNumber(setting, "timeScale", value)) }) }), _jsx(FieldRow, { label: "Hold pose", title: "Stops playback at the current pose. Single clips also support an authored seek time.", children: _jsx("input", { type: "checkbox", "aria-label": "Hold animation pose", checked: config.paused === true, onChange: (event) => onChange(setPlaybackBoolean(setting, "paused", event.target.checked)) }) }), config.states === undefined && config.graph === undefined ? (_jsxs(_Fragment, { children: [_jsx(FieldRow, { label: "Time", title: "Start or hold the selected clip at this time in seconds.", children: _jsx(AxisNumberField, { label: "time", step: 0.05, value: config.time ?? 0, onCommit: (value) => onChange(setPlaybackNumber(setting, "time", value)) }) }), _jsx(FieldRow, { label: "Loop", children: _jsx("input", { type: "checkbox", "aria-label": "Loop animation clip", checked: config.loop !== false, onChange: (event) => onChange(setPlaybackBoolean(setting, "loop", event.target.checked)) }) })] })) : null] }), _jsxs("div", { className: "space-y-1.5 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2", children: [_jsx("div", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "Locomotion states" }), config.graph === undefined && config.states !== undefined && (config.states.idle === undefined || config.states.idle.trim().length === 0) ? (_jsx("div", { role: "status", className: "text-[10px] text-amber-300", children: "Choose an idle clip to enable locomotion. An explicitly selected single clip remains active until then." })) : null, config.graph === undefined && config.states?.idle !== undefined && config.states.idle.trim().length > 0 && (config.states.walk === undefined || config.states.walk.trim().length === 0) ? (_jsx("div", { role: "status", className: "text-[10px] text-amber-300", children: "Walk is unset: idle continues while moving. Pick a walk clip to animate movement." })) : null, LOCOMOTION_ROLES.map((role) => (_jsx(ClipSelectRow, { label: role, clips: clips, value: config.states?.[role] ?? null, onChange: (clip) => onChange(setLocomotionClip(setting, role, clip, clips)) }, role))), _jsx(FieldRow, { label: "walkSpeed", title: "Speed (u/s) above which the entity counts as moving (walk).", children: _jsx(AxisNumberField, { label: "u/s", step: 0.1, value: config.states?.walkSpeed ?? 0.5, onCommit: (value) => onChange(setLocomotionNumber(setting, "walkSpeed", Math.max(0, value), clips)) }) }), _jsx(FieldRow, { label: "runSpeed", title: "Speed above which the run clip plays (when a run clip is set).", children: _jsx(AxisNumberField, { label: "u/s", step: 0.5, value: config.states?.runSpeed ?? 6, onCommit: (value) => onChange(setLocomotionNumber(setting, "runSpeed", Math.max(0, value), clips)) }) }), _jsx(FieldRow, { label: "fadeSec", title: "Crossfade duration (s) when the locomotion state changes.", children: _jsx(AxisNumberField, { label: "s", step: 0.05, value: config.states?.fadeSec ?? 0.2, onCommit: (value) => onChange(setLocomotionNumber(setting, "fadeSec", Math.max(0, value), clips)) }) })] }), _jsxs("div", { className: "space-y-1.5 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2", children: [_jsx("div", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "One-shot events" }), _jsx("div", { className: "text-[10px] text-neutral-600", children: "hit / death auto-fire on damage/death; others via playEntityAnimation." }), ONE_SHOT_EVENTS.map((event) => (_jsx(FieldRow, { label: event, title: "Choose one clip or Ctrl/Cmd-click multiple variants. Clear selection to remove the binding.", children: _jsxs("select", { multiple: true, size: 3, className: `w-full min-w-0 px-1.5 ${INPUT_CLS}`, "aria-label": `${event} clip variants`, value: typeof config.oneShots?.[event] === "string" ? [config.oneShots[event]] : [...(config.oneShots?.[event] ?? [])], onChange: (change) => onChange(setOneShotClip(setting, event, Array.from(change.target.selectedOptions, (option) => option.value))), children: [clips.map((clip) => _jsx("option", { value: clip, children: clip }, clip)), (typeof config.oneShots?.[event] === "string" ? [config.oneShots[event]] : [...(config.oneShots?.[event] ?? [])]).filter((clip) => !clips.includes(clip)).map((clip) => _jsxs("option", { value: clip, children: [clip, " (missing)"] }, clip))] }) }, event)))] })] }))] }));
 }
 function Section({ id, title, icon, sections, children, trailing, }) {
     return (_jsx(CollapsibleSection, { title: title, ...(icon === undefined ? {} : { icon }), open: sections.collapsed[id] !== true, onToggle: () => sections.toggle(id), ...(trailing === undefined ? {} : { trailing }), children: children }));
@@ -165,7 +168,7 @@ function MaterialsTab({ api, selection, meta, }) {
  * `pathPoint` slice, so UI-only churn never rerenders it on `EditorChrome`'s render tick.
  * @internal — mounted by `EditorChrome` inside the right dock.
  */
-export function InspectorPanel({ session, ui, onClose, api, assets, tab, onSelectTab, collapsed, onToggleSection, }) {
+export function InspectorPanel({ session, ui, onClose, api, assets, tab, onSelectTab, collapsed, onToggleSection, creatorPolicy, }) {
     const document = useStoreSelector(session, (state) => state.document);
     const selection = useStoreSelector(session, (state) => state.selection, shallowArrayEqual);
     const pathPoint = useStoreSelector(ui, (state) => state.pathPoint);
@@ -240,12 +243,13 @@ export function InspectorPanel({ session, ui, onClose, api, assets, tab, onSelec
         const markerCatalog = markerCatalogId(marker);
         const markerRigAsset = markerCatalog === null ? undefined : assets?.find((entry) => entry.id === markerCatalog);
         const markerRigClips = markerRigAsset?.clips !== undefined && markerRigAsset.clips.length > 0 ? markerRigAsset.clips : null;
+        const animation = readAnimationSettingResult(document, marker.id);
         const hasTrigger = hasAuthoredTrigger(marker.meta);
         const hasMaterial = hasMaterialAssignment(marker.meta);
         const hasGenerator = typeof marker.meta?.["assetId"] === "string" && getAssetGenerator(marker.meta["assetId"]) !== undefined;
         const hasKindParams = isSceneKind(marker.kind);
         const componentCards = (_jsxs(_Fragment, { children: [_jsx(ComponentAddBar, { target: "marker", meta: marker.meta, onMeta: onMeta, api: api, selectionIds: [marker.id] }), hasKindParams ? (_jsx(Section, { id: "kindParams", title: "Kind parameters", icon: "settings", sections: sections, children: _jsx(KindInspector, { object: markerObject(marker), meta: marker.meta, onMeta: onMeta }) })) : null, hasTrigger ? (_jsx(Section, { id: "trigger", title: "Trigger", icon: "target", sections: sections, trailing: _jsx(SectionAction, { label: "Remove trigger component", onClick: () => onMeta(clearTriggerInstallPatch(), "component:remove-trigger"), children: "remove" }), children: _jsx(TriggerInspector, { target: "marker", meta: marker.meta, onMeta: onMeta }) })) : null, hasMaterial ? (_jsx(Section, { id: "material", title: "Material", icon: "sphere", sections: sections, trailing: _jsx(SectionAction, { label: "Remove material assignment", onClick: () => onMeta(clearMaterialAssignmentPatch(), "component:remove-material"), children: "remove" }), children: _jsxs("div", { className: "text-[11px] text-neutral-300", children: ["materialId: ", _jsx("span", { className: NUMERIC, children: String(marker.meta?.["materialId"]) })] }) })) : null, hasGenerator ? (_jsx(Section, { id: "generator", title: "Generator", icon: "cube", sections: sections, children: _jsx(GeneratorInspector, { meta: marker.meta, onMeta: onMeta }) })) : null, !hasKindParams && !hasTrigger && !hasMaterial && !hasGenerator && !canAuthorTrigger("marker") ? (_jsx(EmptyState, { icon: "settings", title: "No components", description: "This marker has no optional components. Games that register trigger actions enable Add trigger here." })) : null] }));
-        body = (_jsxs("div", { className: "space-y-2 p-2.5", children: [_jsx(ObjectHeader, { kind: marker.kind, id: marker.id, label: marker.label ?? "", placeholder: marker.id, locked: isEditorObjectLocked(document, marker.id), onLabel: (value) => session.dispatch({ type: "setMarker", id: marker.id, patch: { label: value } }, { coalesce: `label:${marker.id}` }) }), activeTab === "inspector" ? (_jsxs(_Fragment, { children: [_jsx(Section, { id: "transform", title: "Transform", icon: "move", sections: sections, trailing: _jsx(SectionAction, { label: "Reset position to origin", onClick: () => session.dispatch({ type: "setTransform", id: marker.id, position: { x: 0, y: 0, z: 0 } }), children: "reset" }), children: _jsxs("div", { className: "space-y-1.5", children: [_jsx(FieldRow, { label: "Position", children: ["x", "y", "z"].map((axis) => (_jsx(AxisNumberField, { axis: axis, label: axis, step: 0.5, value: marker.position[axis], onCommit: (value) => session.dispatch({ type: "setTransform", id: marker.id, position: { ...marker.position, [axis]: value } }, { coalesce: `pos:${axis}:${marker.id}` }) }, axis))) }), _jsx(FieldRow, { label: "Rotation", children: _jsx(AxisNumberField, { axis: "y", label: "y\u00B0", step: 5, precision: 1, value: Math.round((((marker.rotationY ?? 0) * 180) / Math.PI) * 10) / 10, onCommit: (value) => session.dispatch({ type: "setTransform", id: marker.id, rotationY: (value * Math.PI) / 180 }, { coalesce: `rot:${marker.id}` }) }) })] }) }), _jsx(Section, { id: "appearance", title: "Appearance", icon: "sphere", sections: sections, children: _jsx(KindColorFields, { kind: marker.kind, color: marker.color, onKind: (kind) => session.dispatch({ type: "setMarker", id: marker.id, patch: { kind } }, { coalesce: `kind:${marker.id}` }), onColor: (color) => session.dispatch({ type: "setMarker", id: marker.id, patch: { color } }, { coalesce: `color:${marker.id}` }) }) }), _jsx(Section, { id: "placement", title: "Placement", icon: "pin", sections: sections, children: _jsxs("div", { className: "space-y-2", children: [_jsx(ClearanceField, { meta: marker.meta, onMeta: onMeta }), _jsx(ParentField, { session: session, id: marker.id })] }) }), markerRigClips !== null ? (_jsx(Section, { id: "modelAnimation", title: "Animation", icon: "film", sections: sections, children: _jsx(ModelAnimationSection, { clips: markerRigClips, setting: readAnimationSetting(marker.meta), onChange: (next) => onMeta(animationMetaPatch(next), "animation") }) })) : null, marker.meta !== undefined ? (_jsx(Section, { id: "meta", title: "Raw metadata", icon: "script", sections: sections, children: _jsx("pre", { className: "max-h-48 overflow-auto rounded-[5px] border border-white/[0.06] bg-black/40 p-2 text-[10px] text-neutral-400", children: JSON.stringify(marker.meta, null, 2) }) })) : null] })) : (componentCards)] }));
+        body = (_jsxs("div", { className: "space-y-2 p-2.5", children: [_jsx(ObjectHeader, { kind: marker.kind, id: marker.id, label: marker.label ?? "", placeholder: marker.id, locked: isEditorObjectLocked(document, marker.id), onLabel: (value) => session.dispatch({ type: "setMarker", id: marker.id, patch: { label: value } }, { coalesce: `label:${marker.id}` }) }), activeTab === "inspector" ? (_jsxs(_Fragment, { children: [_jsx(Section, { id: "transform", title: "Transform", icon: "move", sections: sections, trailing: _jsx(SectionAction, { label: "Reset position to origin", onClick: () => session.dispatch({ type: "setTransform", id: marker.id, position: { x: 0, y: 0, z: 0 } }), children: "reset" }), children: _jsxs("div", { className: "space-y-1.5", children: [_jsx(FieldRow, { label: "Position", children: ["x", "y", "z"].map((axis) => (_jsx(AxisNumberField, { axis: axis, label: axis, step: 0.5, value: marker.position[axis], onCommit: (value) => session.dispatch({ type: "setTransform", id: marker.id, position: { ...marker.position, [axis]: value } }, { coalesce: `pos:${axis}:${marker.id}` }) }, axis))) }), _jsx(FieldRow, { label: "Rotation", children: _jsx(AxisNumberField, { axis: "y", label: "y\u00B0", step: 5, precision: 1, value: Math.round((((marker.rotationY ?? 0) * 180) / Math.PI) * 10) / 10, onCommit: (value) => session.dispatch({ type: "setTransform", id: marker.id, rotationY: (value * Math.PI) / 180 }, { coalesce: `rot:${marker.id}` }) }) })] }) }), _jsx(Section, { id: "appearance", title: "Appearance", icon: "sphere", sections: sections, children: _jsx(KindColorFields, { kind: marker.kind, color: marker.color, onKind: (kind) => session.dispatch({ type: "setMarker", id: marker.id, patch: { kind } }, { coalesce: `kind:${marker.id}` }), onColor: (color) => session.dispatch({ type: "setMarker", id: marker.id, patch: { color } }, { coalesce: `color:${marker.id}` }) }) }), _jsx(Section, { id: "placement", title: "Placement", icon: "pin", sections: sections, children: _jsxs("div", { className: "space-y-2", children: [_jsx(ClearanceField, { meta: marker.meta, onMeta: onMeta }), _jsx(ParentField, { session: session, id: marker.id })] }) }), markerRigClips !== null || typeof animation.setting === "object" || animation.diagnostics.length > 0 ? (_jsx(Section, { id: "modelAnimation", title: "Animation", icon: "film", sections: sections, children: _jsx(ModelAnimationSection, { clips: markerRigClips ?? [], setting: animation.setting, diagnostics: animation.diagnostics, onChange: (next) => onMeta(animationMetaPatch(next), "animation") }) })) : null, marker.meta !== undefined ? (_jsx(Section, { id: "meta", title: "Raw metadata", icon: "script", sections: sections, children: _jsx("pre", { className: "max-h-48 overflow-auto rounded-[5px] border border-white/[0.06] bg-black/40 p-2 text-[10px] text-neutral-400", children: JSON.stringify(marker.meta, null, 2) }) })) : null] })) : (componentCards)] }));
     }
     else if (selectedVolume !== undefined) {
         const volume = selectedVolume;
@@ -288,7 +292,7 @@ export function InspectorPanel({ session, ui, onClose, api, assets, tab, onSelec
         body = (_jsxs("div", { className: "space-y-2 p-2.5", children: [_jsx(ObjectHeader, { kind: "prop", id: liveObject.instanceId, label: liveObject.catalogId, placeholder: liveObject.instanceId, locked: false }), _jsx(Section, { id: "live", title: "Live object", icon: "cube", sections: sections, children: _jsxs("div", { className: `space-y-1 text-[11px] text-neutral-400 ${NUMERIC}`, children: [_jsxs("div", { children: ["x ", liveObject.position[0].toFixed(1), " \u00B7 y ", liveObject.position[1].toFixed(1), " \u00B7 z ", liveObject.position[2].toFixed(1)] }), _jsx("div", { className: "text-[10px] text-neutral-600", children: "Read-only live world object \u2014 edit its source data to move it permanently." })] }) })] }));
     }
     else {
-        body = (_jsx(EmptyState, { icon: "cursor", title: "Nothing selected", description: "Click an object in the viewport or hierarchy to inspect it, or use Add to place new content." }));
+        body = (creatorPolicy !== undefined && !(creatorPolicy.maxSimulationParticles || creatorPolicy.maxFireCells || creatorPolicy.maxPopulation || creatorPolicy.maxForceFields) ? _jsx(EmptyState, { icon: "cursor", title: "Nothing selected", description: "Select an object to edit it, or use Add to place approved content." }) : _jsx(SimulationInspector, { session: session, creatorPolicy: creatorPolicy }));
     }
     return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(PanelTabs, { ariaLabel: "Inspector tabs", active: activeTab, onSelect: selectTab, tabs: [
                     { id: "inspector", label: "Inspector" },

package/dist/LightingPanel.js

@@ -13,6 +13,8 @@ const DISPLAY_DEFAULTS = {
     timeOfDay: false,
     sunIntensity: 1,
     ambientIntensity: 0.45,
+    sunAzimuth: 0,
+    sunElevation: 68,
     fogNear: 80,
     fogFar: 400,
     fogColor: "",
@@ -25,6 +27,8 @@ function readDisplay(env) {
         timeOfDay: env?.timeOfDay ?? DISPLAY_DEFAULTS.timeOfDay,
         sunIntensity: env?.sunIntensity ?? DISPLAY_DEFAULTS.sunIntensity,
         ambientIntensity: env?.ambientIntensity ?? DISPLAY_DEFAULTS.ambientIntensity,
+        sunAzimuth: env?.sunAzimuth ?? DISPLAY_DEFAULTS.sunAzimuth,
+        sunElevation: env?.sunElevation ?? DISPLAY_DEFAULTS.sunElevation,
         fogNear: env?.fog?.near ?? DISPLAY_DEFAULTS.fogNear,
         fogFar: env?.fog?.far ?? DISPLAY_DEFAULTS.fogFar,
         fogColor: env?.fog?.color ?? DISPLAY_DEFAULTS.fogColor,
@@ -70,7 +74,7 @@ export function LightingPanel({ session }) {
                                 ? { kind, sky: "#87b5e0", ground: "#3d4a38" }
                                 : kind === "hdri" ? { kind, url: "" } : { kind, urls: ["", "", "", "", "", ""] };
                             patch({ source: nextSource }, "env:source");
-                        }, children: [_jsx("option", { value: "gradient", children: "Gradient" }), _jsx("option", { value: "hdri", children: "HDRI / EXR" }), _jsx("option", { value: "cube", children: "Cube map" })] }), source?.kind === "hdri" ? (_jsx("input", { className: `w-full px-2 py-1 ${INPUT_CLS}`, placeholder: "https://\u2026/environment.hdr", value: source.url, onChange: (event) => patch({ source: { ...source, url: event.target.value } }, "env:sourceUrl") })) : null, source?.kind === "cube" ? (_jsx("input", { className: `w-full px-2 py-1 ${INPUT_CLS}`, placeholder: " six face URLs, comma-separated", value: source.urls.join(","), onChange: (event) => patch({ source: { ...source, urls: event.target.value.split(",").slice(0, 6) } }, "env:sourceCube") })) : null] }), _jsxs("section", { className: "space-y-1.5 border-t border-white/[0.05] pt-2", children: [_jsx("span", { className: MICRO_LABEL, children: "Sun & ambient" }), _jsx(SliderRow, { label: "sun", value: display.sunIntensity, min: 0, max: 3, step: 0.05, onChange: (value) => patch({ sunIntensity: value }, "env:sun"), format: (v) => v.toFixed(2) }), _jsx(SliderRow, { label: "ambient", value: display.ambientIntensity, min: 0, max: 2, step: 0.05, onChange: (value) => patch({ ambientIntensity: value }, "env:ambient"), format: (v) => v.toFixed(2) })] }), _jsxs("section", { className: "space-y-1.5 border-t border-white/[0.05] pt-2", children: [_jsx("span", { className: MICRO_LABEL, children: "Fog" }), _jsx(SliderRow, { label: "near", value: display.fogNear, min: 0, max: 500, step: 1, onChange: (value) => patch({ fog: { near: value } }, "env:fogNear"), format: (v) => `${Math.round(v)}m` }), _jsx(SliderRow, { label: "far", value: display.fogFar, min: 10, max: 2000, step: 5, onChange: (value) => patch({ fog: { far: value } }, "env:fogFar"), format: (v) => `${Math.round(v)}m` }), _jsxs("label", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "color" }), _jsx("input", { type: "text", className: `w-36 px-2 py-1 ${INPUT_CLS}`, placeholder: "#a8c4d8", value: display.fogColor, onChange: (event) => {
+                        }, children: [_jsx("option", { value: "gradient", children: "Gradient" }), _jsx("option", { value: "hdri", children: "HDRI / EXR" }), _jsx("option", { value: "cube", children: "Cube map" })] }), source?.kind === "hdri" ? (_jsx("input", { className: `w-full px-2 py-1 ${INPUT_CLS}`, placeholder: "https://\u2026/environment.hdr", value: source.url, onChange: (event) => patch({ source: { ...source, url: event.target.value } }, "env:sourceUrl") })) : null, source?.kind === "cube" ? (_jsx("input", { className: `w-full px-2 py-1 ${INPUT_CLS}`, placeholder: " six face URLs, comma-separated", value: source.urls.join(","), onChange: (event) => patch({ source: { ...source, urls: event.target.value.split(",").slice(0, 6) } }, "env:sourceCube") })) : null] }), _jsxs("section", { className: "space-y-1.5 border-t border-white/[0.05] pt-2", children: [_jsx("span", { className: MICRO_LABEL, children: "Sun & ambient" }), _jsx(SliderRow, { label: "sun", value: display.sunIntensity, min: 0, max: 3, step: 0.05, onChange: (value) => patch({ sunIntensity: value }, "env:sun"), format: (v) => v.toFixed(2) }), _jsx(SliderRow, { label: "ambient", value: display.ambientIntensity, min: 0, max: 2, step: 0.05, onChange: (value) => patch({ ambientIntensity: value }, "env:ambient"), format: (v) => v.toFixed(2) }), _jsx(SliderRow, { label: "bearing", value: display.sunAzimuth, min: 0, max: 360, step: 1, onChange: (value) => patch({ sunAzimuth: value }, "env:sunAzimuth"), format: (v) => `${Math.round(v)}°` }), _jsx(SliderRow, { label: "height", value: display.sunElevation, min: 0, max: 90, step: 1, onChange: (value) => patch({ sunElevation: value }, "env:sunElevation"), format: (v) => `${Math.round(v)}°` })] }), _jsxs("section", { className: "space-y-1.5 border-t border-white/[0.05] pt-2", children: [_jsx("span", { className: MICRO_LABEL, children: "Fog" }), _jsx(SliderRow, { label: "near", value: display.fogNear, min: 0, max: 500, step: 1, onChange: (value) => patch({ fog: { near: value } }, "env:fogNear"), format: (v) => `${Math.round(v)}m` }), _jsx(SliderRow, { label: "far", value: display.fogFar, min: 10, max: 2000, step: 5, onChange: (value) => patch({ fog: { far: value } }, "env:fogFar"), format: (v) => `${Math.round(v)}m` }), _jsxs("label", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "color" }), _jsx("input", { type: "text", className: `w-36 px-2 py-1 ${INPUT_CLS}`, placeholder: "#a8c4d8", value: display.fogColor, onChange: (event) => {
                                     const color = event.target.value.trim();
                                     const fog = { ...(env?.fog ?? {}) };
                                     if (color.length === 0)

package/dist/MaterialAssetEditor.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+import { type MaterialAsset } from "@jgengine/core/material/materialAsset";
+/** A callback-driven physical material editor; the host owns persistence, undo and preview rendering. */
+export interface MaterialAssetEditorProps {
+    asset: MaterialAsset;
+    onChange(asset: MaterialAsset, coalesce?: string): void;
+    preview?: (asset: MaterialAsset, mode: "neutral" | "game") => ReactNode;
+}
+/**
+ * Edits sparse reusable material assets without replacing untouched imported material values.
+ * @internal Mounted by the material workspace.
+ */
+export declare function MaterialAssetEditor({ asset, onChange, preview }: MaterialAssetEditorProps): import("react").JSX.Element;

package/dist/MaterialAssetEditor.js

@@ -0,0 +1,109 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { MATERIAL_TEXTURE_SEMANTICS, validateMaterialAsset, } from "@jgengine/core/material/materialAsset";
+import { advancedMaterialControls, materialAuthoringNotes, materialControlGroups, prepareMaterialAuthoringEdit } from "./materialControls.js";
+import { CONTROL, FOCUS_RING, INPUT_CLS, MICRO_LABEL } from "./shell/theme.js";
+/**
+ * Edits sparse reusable material assets without replacing untouched imported material values.
+ * @internal Mounted by the material workspace.
+ */
+export function MaterialAssetEditor({ asset, onChange, preview }) {
+    const [previewMode, setPreviewMode] = useState("neutral");
+    const [mapRole, setMapRole] = useState("color");
+    const [mapUrl, setMapUrl] = useState("");
+    const diagnostics = validateMaterialAsset(asset);
+    const commit = (next, coalesce) => onChange(prepareMaterialAuthoringEdit(next), coalesce);
+    const patchSurface = (patch, field) => {
+        const surface = { ...asset.surface, ...patch };
+        for (const key of Object.keys(surface)) {
+            if (surface[key] === undefined)
+                delete surface[key];
+        }
+        commit({ ...asset, surface }, `material:${asset.id}:${field}`);
+    };
+    const patchTexture = (role, texture) => {
+        const textures = { ...asset.textures };
+        if (texture === undefined)
+            delete textures[role];
+        else
+            textures[role] = texture;
+        commit({ ...asset, textures }, `material:${asset.id}:texture:${role}`);
+    };
+    const renderControl = (control) => (_jsx(SurfaceField, { control: control, value: asset.surface[control.key], onChange: (value) => patchSurface({ [control.key]: value }, control.key) }, control.key));
+    return (_jsxs("div", { className: "space-y-3 p-2 text-[11px] text-neutral-300", children: [_jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: MICRO_LABEL, children: "Asset name" }), _jsx("input", { "aria-label": "Material asset name", className: `w-full px-2 py-1 ${INPUT_CLS}`, defaultValue: asset.name, onBlur: (event) => { const name = event.target.value.trim(); if (name && name !== asset.name)
+                            commit({ ...asset, name }); } }, `${asset.id}:${asset.name}`)] }), _jsxs("div", { className: "break-all text-[10px] text-neutral-500", children: ["Stable ID: ", asset.id, " \u00B7 saved with the scene document"] }), _jsxs("label", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: MICRO_LABEL, children: "Surface family" }), _jsx("select", { "aria-label": "Material family", className: `px-2 py-1 ${INPUT_CLS}`, value: asset.family, onChange: (event) => commit({ ...asset, family: event.target.value }), children: ["standard", "fabric", "hair", "glass", "metal", "skin", "stone", "plastic"].map((family) => _jsx("option", { value: family, children: family }, family)) })] }), _jsx("p", { className: "text-[10px] leading-relaxed text-neutral-500", children: "Empty fields inherit the imported surface. A displayed placeholder is the renderer default, which may differ from your asset. Reset removes only this override." }), preview ? _jsxs("section", { className: "space-y-2", "aria-label": "Material preview", children: [_jsx("div", { className: "flex gap-1", role: "group", "aria-label": "Preview lighting", children: ["neutral", "game"].map((mode) => _jsx("button", { type: "button", "aria-pressed": previewMode === mode, className: `${CONTROL} ${FOCUS_RING} flex-1 px-2 py-1`, onClick: () => setPreviewMode(mode), children: mode === "neutral" ? "Neutral light" : "Document light" }, mode)) }), preview(asset, previewMode)] }) : null, materialControlGroups(asset.family).map((group) => _jsxs("section", { className: "space-y-2 border-t border-white/[0.07] pt-2", children: [_jsx("div", { className: MICRO_LABEL, children: group.label }), _jsx("p", { className: "text-[10px] leading-relaxed text-neutral-500", children: group.hint }), group.controls.map(renderControl), group.label === "Coverage" ? _jsx(CoverageFields, { surface: asset.surface, onPatch: patchSurface }) : null, asset.family === "fabric" && group.label === "Detail" ? _jsx(FabricFields, { asset: asset, onChange: commit }) : null, asset.family === "hair" && group.label === "Strand highlights" ? _jsx(HairFields, { asset: asset, onChange: commit }) : null, asset.family === "hair" && group.label === "Backlighting" ? _jsx(HairBacklightFields, { asset: asset, onChange: commit }) : null] }, group.label)), _jsxs("details", { className: "border-t border-white/[0.07] pt-2", children: [_jsxs("summary", { className: `cursor-pointer py-1 ${FOCUS_RING}`, children: ["Texture maps (", Object.keys(asset.textures ?? {}).length, ")"] }), _jsxs("div", { className: "space-y-2 pt-2", children: [_jsx("p", { className: "text-[10px] text-neutral-500", children: "Use an existing runtime URL. Color and emissive use sRGB; numeric maps use linear data and the shader's packed channel." }), _jsxs("label", { className: "block", children: [_jsx("span", { className: MICRO_LABEL, children: "Map role" }), _jsx("select", { "aria-label": "New texture role", className: `mt-1 w-full px-2 py-1 ${INPUT_CLS}`, value: mapRole, onChange: (event) => setMapRole(event.target.value), children: Object.keys(MATERIAL_TEXTURE_SEMANTICS).map((role) => _jsx("option", { value: role, children: role }, role)) })] }), _jsx("input", { "aria-label": "New texture URL", className: `w-full px-2 py-1 ${INPUT_CLS}`, value: mapUrl, onChange: (event) => setMapUrl(event.target.value), placeholder: "/textures/my-surface.png" }), _jsx("button", { type: "button", className: `${CONTROL} ${FOCUS_RING} px-2 py-1`, disabled: !mapUrl.trim(), onClick: () => { if (!mapUrl.trim())
+                                    return; patchTexture(mapRole, { url: mapUrl.trim(), ...MATERIAL_TEXTURE_SEMANTICS[mapRole] }); setMapUrl(""); }, children: "Assign map" }), Object.entries(asset.textures ?? {}).map(([role, texture]) => _jsx(TextureFields, { role: role, texture: texture, onChange: (next) => patchTexture(role, next) }, role))] })] }), _jsxs("details", { className: "border-t border-white/[0.07] pt-2", children: [_jsx("summary", { className: `cursor-pointer py-1 ${FOCUS_RING}`, children: "Advanced physical settings" }), _jsxs("div", { className: "space-y-2 pt-2", children: [advancedMaterialControls.map(renderControl), _jsx(PairField, { label: "Normal strength XY", value: asset.surface.normalScale, fallback: [1, 1], onChange: (normalScale) => patchSurface({ normalScale }, "normalScale") }), _jsx(PairField, { label: "Film thickness range (nm)", value: asset.surface.iridescenceThicknessRange, fallback: [100, 400], onChange: (iridescenceThicknessRange) => patchSurface({ iridescenceThicknessRange }, "iridescenceThicknessRange") }), _jsx(CoverageFields, { surface: asset.surface, onPatch: patchSurface }), _jsxs("div", { className: "text-[10px] text-neutral-500", children: ["Declared capabilities: ", asset.capabilities.join(", ") || "none", ". Expensive lobes render only when enabled."] })] })] }), _jsxs("details", { className: "border-t border-white/[0.07] pt-2", children: [_jsx("summary", { className: `cursor-pointer py-1 ${FOCUS_RING}`, children: "Authorship and provenance" }), _jsx("div", { className: "space-y-2 pt-2", children: _jsx(ProvenanceFields, { label: "Material", provenance: asset.provenance, onChange: (provenance) => commit({ ...asset, provenance }) }, JSON.stringify(asset.provenance)) })] }), materialAuthoringNotes(asset).map((note) => _jsx("p", { className: "text-[10px] leading-relaxed text-amber-200/80", children: note }, note)), diagnostics.length ? _jsx("ul", { className: "space-y-1 text-[10px]", "aria-label": "Material diagnostics", children: diagnostics.map((entry) => _jsxs("li", { className: entry.severity === "error" ? "text-rose-300" : "text-amber-200/80", children: [entry.path, ": ", entry.message] }, `${entry.code}:${entry.path}`)) }) : null] }));
+}
+function SurfaceField({ control, value, onChange }) {
+    return _jsxs("label", { className: "block space-y-1", title: control.hint, children: [_jsxs("span", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: MICRO_LABEL, children: control.label }), value === undefined ? _jsx("span", { className: "text-[9px] text-neutral-600", children: "Inherited" }) : _jsx("button", { type: "button", className: `${FOCUS_RING} text-[9px] text-neutral-400 hover:text-neutral-100`, onClick: () => onChange(undefined), children: "Reset" })] }), control.kind === "color" ? _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { "aria-label": control.label, type: "color", value: typeof value === "string" ? value : String(control.fallback), onChange: (event) => onChange(event.target.value) }), _jsx("span", { className: "text-[10px] text-neutral-500", children: typeof value === "string" ? value : "Imported color" })] }) : _jsx("input", { "aria-label": control.label, type: "number", min: control.min, max: control.max, step: control.step ?? 0.01, value: typeof value === "number" ? value : "", placeholder: String(control.fallback), className: `w-full px-2 py-1 ${INPUT_CLS}`, onChange: (event) => { if (!event.target.value)
+                    onChange(undefined);
+                else {
+                    const next = Number(event.target.value);
+                    if (Number.isFinite(next))
+                        onChange(next);
+                } } })] });
+}
+function CoverageFields({ surface, onPatch }) {
+    return _jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: MICRO_LABEL, children: "Alpha behavior" }), _jsxs("select", { "aria-label": "Alpha behavior", className: `w-full px-2 py-1 ${INPUT_CLS}`, value: surface.alphaMode ?? "", onChange: (event) => onPatch({ alphaMode: (event.target.value || undefined) }, "alphaMode"), children: [_jsx("option", { value: "", children: "Imported behavior" }), _jsx("option", { value: "opaque", children: "Opaque" }), _jsx("option", { value: "mask", children: "Mask / cutout" }), _jsx("option", { value: "blend", children: "Alpha blend" })] })] }), _jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: MICRO_LABEL, children: "Surface sides" }), _jsxs("select", { "aria-label": "Surface sides", className: `w-full px-2 py-1 ${INPUT_CLS}`, value: surface.doubleSided === undefined ? "" : String(surface.doubleSided), onChange: (event) => onPatch({ doubleSided: event.target.value === "" ? undefined : event.target.value === "true" }, "doubleSided"), children: [_jsx("option", { value: "", children: "Imported sides" }), _jsx("option", { value: "false", children: "Front face" }), _jsx("option", { value: "true", children: "Both sides" })] })] })] });
+}
+function PairField({ label, value, fallback, onChange }) {
+    return _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: MICRO_LABEL, children: label }), value ? _jsx("button", { type: "button", className: `${FOCUS_RING} text-[9px]`, onClick: () => onChange(undefined), children: "Reset" }) : _jsx("span", { className: "text-[9px] text-neutral-600", children: "Inherited" })] }), _jsx("div", { className: "grid grid-cols-2 gap-1", children: [0, 1].map((index) => _jsx("input", { "aria-label": `${label} ${index + 1}`, type: "number", step: "0.01", className: `min-w-0 px-2 py-1 ${INPUT_CLS}`, value: value?.[index] ?? "", placeholder: String(fallback[index]), onChange: (event) => { const next = Number(event.target.value); if (!event.target.value || !Number.isFinite(next))
+                        return; const pair = [...(value ?? fallback)]; pair[index] = next; onChange(pair); } }, index)) })] });
+}
+function TextureFields({ role, texture, onChange }) {
+    const patch = (partial) => {
+        const next = { ...texture, ...partial };
+        if (next.transform) {
+            next.transform = { ...next.transform };
+            for (const key of Object.keys(next.transform)) {
+                if (next.transform[key] === undefined)
+                    delete next.transform[key];
+            }
+        }
+        onChange(next);
+    };
+    return _jsxs("details", { className: "rounded border border-white/[0.08] p-2", open: true, children: [_jsxs("summary", { className: `cursor-pointer ${FOCUS_RING}`, children: [role, " \u00B7 ", texture.colorSpace, " \u00B7 ", texture.channel ?? MATERIAL_TEXTURE_SEMANTICS[role].channel] }), _jsxs("div", { className: "space-y-2 pt-2", children: [_jsx("input", { "aria-label": `${role} texture URL`, className: `w-full px-2 py-1 ${INPUT_CLS}`, defaultValue: texture.url, onBlur: (event) => { if (event.target.value.trim() && event.target.value.trim() !== texture.url)
+                            patch({ url: event.target.value.trim() }); } }, texture.url), _jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: MICRO_LABEL, children: "UV set" }), _jsx("select", { "aria-label": `${role} UV set`, className: `w-full px-2 py-1 ${INPUT_CLS}`, value: texture.uvSet ?? 0, onChange: (event) => patch({ uvSet: Number(event.target.value) }), children: [0, 1, 2, 3].map((uv) => _jsx("option", { value: uv, children: uv }, uv)) })] }), _jsx(PairField, { label: `${role} UV scale`, value: texture.transform?.scale, fallback: [1, 1], onChange: (scale) => patch({ transform: { ...texture.transform, scale } }) }), _jsx(PairField, { label: `${role} UV offset`, value: texture.transform?.offset, fallback: [0, 0], onChange: (offset) => patch({ transform: { ...texture.transform, offset } }) }), _jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: MICRO_LABEL, children: "UV rotation (radians)" }), _jsx("input", { "aria-label": `${role} UV rotation`, type: "number", step: "0.01", value: texture.transform?.rotation ?? 0, className: `w-full px-2 py-1 ${INPUT_CLS}`, onChange: (event) => { const rotation = Number(event.target.value); if (Number.isFinite(rotation))
+                                    patch({ transform: { ...texture.transform, rotation } }); } })] }), _jsx(PairField, { label: `${role} physical size (metres)`, value: texture.physicalSize, fallback: [1, 1], onChange: (physicalSize) => patch({ physicalSize }) }), role === "normal" || role === "clearcoatNormal" ? _jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: MICRO_LABEL, children: "Normal convention" }), _jsxs("select", { "aria-label": `${role} normal convention`, className: `w-full px-2 py-1 ${INPUT_CLS}`, value: texture.normalConvention ?? "opengl", onChange: (event) => patch({ normalConvention: event.target.value }), children: [_jsx("option", { value: "opengl", children: "OpenGL (+Y)" }), _jsx("option", { value: "directx", children: "DirectX (-Y)" })] })] }) : null, ["wrapS", "wrapT"].map((axis) => _jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: MICRO_LABEL, children: axis }), _jsxs("select", { "aria-label": `${role} ${axis}`, className: `w-full px-2 py-1 ${INPUT_CLS}`, value: texture.sampler?.[axis] ?? "repeat", onChange: (event) => patch({ sampler: { ...texture.sampler, [axis]: event.target.value } }), children: [_jsx("option", { value: "repeat", children: "Repeat" }), _jsx("option", { value: "clamp", children: "Clamp" }), _jsx("option", { value: "mirror", children: "Mirror" })] })] }, axis)), _jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: MICRO_LABEL, children: "Compression" }), _jsx("select", { "aria-label": `${role} compression`, className: `w-full px-2 py-1 ${INPUT_CLS}`, value: texture.compression ?? "none", onChange: (event) => patch({ compression: event.target.value }), children: ["none", "ktx2", "basisu", "webp"].map((compression) => _jsx("option", { value: compression, children: compression }, compression)) })] }), _jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: MICRO_LABEL, children: "Minification filter" }), _jsx("select", { "aria-label": `${role} minification filter`, className: `w-full px-2 py-1 ${INPUT_CLS}`, value: texture.sampler?.minFilter ?? "linear-mipmap-linear", onChange: (event) => patch({ sampler: { ...texture.sampler, minFilter: event.target.value } }), children: ["nearest", "linear", "nearest-mipmap-nearest", "nearest-mipmap-linear", "linear-mipmap-nearest", "linear-mipmap-linear"].map((filter) => _jsx("option", { value: filter, children: filter }, filter)) })] }), _jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: MICRO_LABEL, children: "Magnification filter" }), _jsxs("select", { "aria-label": `${role} magnification filter`, className: `w-full px-2 py-1 ${INPUT_CLS}`, value: texture.sampler?.magFilter ?? "linear", onChange: (event) => patch({ sampler: { ...texture.sampler, magFilter: event.target.value } }), children: [_jsx("option", { value: "nearest", children: "Nearest" }), _jsx("option", { value: "linear", children: "Linear" })] })] }), _jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: MICRO_LABEL, children: "Texture anisotropic filtering" }), _jsx("input", { "aria-label": `${role} texture anisotropy`, type: "number", min: "1", step: "1", value: texture.sampler?.anisotropy ?? 1, className: `w-full px-2 py-1 ${INPUT_CLS}`, onChange: (event) => { const anisotropy = Number(event.target.value); if (Number.isFinite(anisotropy) && anisotropy >= 1)
+                                    patch({ sampler: { ...texture.sampler, anisotropy } }); } })] }), _jsx("p", { className: "text-[10px] text-neutral-500", children: "Compression describes the supplied file; this editor does not transcode it. Physical size records authored metres; UV scale controls sampling." }), _jsxs("details", { children: [_jsx("summary", { className: `cursor-pointer text-[10px] ${FOCUS_RING}`, children: "Texture attribution" }), _jsx("div", { className: "pt-2", children: _jsx(ProvenanceFields, { label: `${role} texture`, provenance: texture.provenance, onChange: (provenance) => patch({ provenance }) }, JSON.stringify(texture.provenance)) })] }), _jsx("button", { type: "button", className: `${CONTROL} ${FOCUS_RING} px-2 py-1 text-rose-200`, onClick: () => onChange(undefined), children: "Remove map override" })] })] });
+}
+function FabricFields({ asset, onChange }) {
+    const fabric = asset.fabric;
+    return _jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: MICRO_LABEL, children: "Fabric construction" }), _jsxs("select", { "aria-label": "Fabric construction", className: `w-full px-2 py-1 ${INPUT_CLS}`, value: fabric?.construction ?? "", onChange: (event) => { const construction = event.target.value; if (!construction) {
+                            const next = { ...asset };
+                            delete next.fabric;
+                            onChange(next);
+                        }
+                        else
+                            onChange({ ...asset, fabric: construction === "fuzzy" ? { construction: "fuzzy" } : { ...fabric, construction: "woven" } }); }, children: [_jsx("option", { value: "", children: "No appearance adapter" }), _jsx("option", { value: "fuzzy", children: "Fuzzy / grazing sheen" }), _jsx("option", { value: "woven", children: "Woven / directional threads" })] })] }), fabric?.construction === "woven" ? _jsxs(_Fragment, { children: [[
+                        { key: "weaveDirection", label: "Weave direction (radians)", fallback: 0, min: -Math.PI, max: Math.PI },
+                        { key: "threadScale", label: "Thread cycles per UV", fallback: 80, min: 0.01 },
+                        { key: "normalStrength", label: "Thread normal response", fallback: 0.12, min: 0, max: 1 },
+                        { key: "variation", label: "Roughness variation", fallback: 0.05, min: 0, max: 1 },
+                    ].map((field) => _jsx(SurfaceField, { control: { ...field, kind: "number", step: 0.01 }, value: fabric[field.key], onChange: (value) => { const next = { ...fabric, [field.key]: value }; if (value === undefined)
+                            delete next[field.key]; onChange({ ...asset, fabric: next }, `material:${asset.id}:fabric:${field.key}`); } }, field.key)), _jsx("p", { className: "text-[10px] text-neutral-500", children: "Procedural threads modify normals and roughness on UV-mapped geometry. Explicit physical highlight fields override adapter defaults." })] }) : null] });
+}
+function HairFields({ asset, onChange }) {
+    const hair = asset.hair;
+    return _jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: MICRO_LABEL, children: "Existing geometry" }), _jsxs("select", { "aria-label": "Hair geometry kind", className: `w-full px-2 py-1 ${INPUT_CLS}`, value: hair?.geometry ?? "", onChange: (event) => { const geometry = event.target.value; if (!geometry) {
+                            const next = { ...asset };
+                            delete next.hair;
+                            onChange(next);
+                        }
+                        else
+                            onChange({ ...asset, hair: geometry === "strands" ? { geometry: "strands", ...(hair?.strandDirection === undefined ? {} : { strandDirection: hair.strandDirection }) } : { ...hair, geometry: "cards" } }); }, children: [_jsx("option", { value: "", children: "No appearance adapter" }), _jsx("option", { value: "cards", children: "Hair cards" }), _jsx("option", { value: "strands", children: "Strand mesh" })] })] }), hair ? _jsx(SurfaceField, { control: { label: "Strand direction (radians)", kind: "number", fallback: 0, min: -Math.PI, max: Math.PI, step: 0.01 }, value: hair.strandDirection, onChange: (value) => { const next = { ...hair, strandDirection: typeof value === "number" ? value : undefined }; if (value === undefined)
+                    delete next.strandDirection; onChange({ ...asset, hair: next }, `material:${asset.id}:hair:direction`); } }) : null] });
+}
+function HairBacklightFields({ asset, onChange }) {
+    const hair = asset.hair;
+    if (hair?.geometry !== "cards")
+        return _jsx("p", { className: "text-[10px] text-neutral-500", children: "Backlighting is supported by the hair-card adapter. Select existing card geometry under Strand highlights." });
+    return _jsxs("div", { className: "space-y-2", children: [_jsx(SurfaceField, { control: { label: "Card backlight strength", kind: "number", fallback: 0.25, min: 0, max: 1, step: 0.01 }, value: hair.backlightStrength, onChange: (value) => { const next = { ...hair, backlightStrength: typeof value === "number" ? value : undefined }; if (value === undefined)
+                    delete next.backlightStrength; onChange({ ...asset, hair: next }, `material:${asset.id}:hair:backlight`); } }), _jsx(SurfaceField, { control: { label: "Card backlight color", kind: "color", fallback: asset.surface.color ?? "#ffffff" }, value: hair.backlightColor, onChange: (value) => { const next = { ...hair, backlightColor: typeof value === "string" ? value : undefined }; if (value === undefined)
+                    delete next.backlightColor; onChange({ ...asset, hair: next }, `material:${asset.id}:hair:backlightColor`); } })] });
+}
+function ProvenanceFields({ label, provenance, onChange }) {
+    const [draft, setDraft] = useState({ author: provenance?.author ?? "", license: provenance?.license ?? "", sourceUrl: provenance?.sourceUrl ?? "", description: provenance?.description ?? "" });
+    const validSource = !draft.sourceUrl.trim() || /^https?:\/\//i.test(draft.sourceUrl.trim());
+    return _jsxs("div", { className: "space-y-2", children: [["author", "license", "sourceUrl", "description"].map((field) => _jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: MICRO_LABEL, children: field === "sourceUrl" ? "Source URL" : field === "description" ? "Notes" : field }), _jsx("input", { "aria-label": `${label} ${field}`, className: `w-full px-2 py-1 ${INPUT_CLS}`, value: draft[field], onChange: (event) => setDraft({ ...draft, [field]: event.target.value }) })] }, field)), !validSource ? _jsx("p", { className: "text-[10px] text-rose-300", children: "Use an HTTP or HTTPS source URL." }) : null, _jsx("button", { type: "button", className: `${CONTROL} ${FOCUS_RING} px-2 py-1`, disabled: !draft.author.trim() || !draft.license.trim() || !validSource, onClick: () => onChange({ author: draft.author.trim(), license: draft.license.trim(), ...(draft.sourceUrl.trim() ? { sourceUrl: draft.sourceUrl.trim() } : {}), ...(draft.description.trim() ? { description: draft.description.trim() } : {}) }), children: "Apply attribution" }), provenance?.sourceUrl && /^https?:\/\//i.test(provenance.sourceUrl) ? _jsx("a", { href: provenance.sourceUrl, target: "_blank", rel: "noreferrer", className: `ml-2 break-all text-[10px] text-cyan-300 underline ${FOCUS_RING}`, children: "View source" }) : null] });
+}

package/dist/MaterialPreview.d.ts

@@ -0,0 +1,16 @@
+import type { ModelConfig } from "@jgengine/core/game/playableGame";
+import { type ModelMaterialSlotInfo } from "@jgengine/shell/render/materialAsset";
+import type { MaterialAsset } from "@jgengine/core/material/materialAsset";
+import type { EditorEnvironment } from "@jgengine/core/editor/types";
+/**
+ * Material preview lighting uses an isolated renderer; document settings never modify the game.
+ * @internal Mounted by the material workspace.
+ */
+export declare function MaterialPreview({ asset, mode, environment, model, onSlots, onError }: {
+    asset?: MaterialAsset;
+    mode: "neutral" | "game";
+    environment?: EditorEnvironment;
+    model?: ModelConfig;
+    onSlots?: (slots: ModelMaterialSlotInfo[]) => void;
+    onError?: (message: string | null) => void;
+}): import("react").JSX.Element;