@jgengine/editor 0.11.0 → 0.13.0

package/dist/InspectorPanel.d.ts

@@ -1,14 +1,24 @@
 import { type EditorSession } from "@jgengine/core/editor/index";
+import type { EditorHostApi } from "./session.js";
 import type { EditorUiStore } from "./uiStore.js";
+import type { InspectorTab } from "./shell/layoutStore.js";
 /**
- * The right-hand inspector as an isolated, selector-subscribed panel. It reads only the
- * document + selection slices (via `useStoreSelector`) and the ui store's `pathPoint` slice, so
- * UI-only churn (gizmo mode, snapping, active tool) or unrelated document edits outside the
- * selected object's slice no longer rerender it on `EditorChrome`'s own render tick.
- * @internal — mounted by `EditorChrome` as a right-aside panel.
+ * The right-hand inspector as an isolated, selector-subscribed panel: tabbed (Inspector /
+ * Components / Materials), with collapsible component cards over the live selected object.
+ * Reads only the document + selection slices (via `useStoreSelector`) and the ui store's
+ * `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 }: {
+export declare function InspectorPanel({ session, ui, onClose, api, tab, onSelectTab, collapsed, onToggleSection, }: {
     session: EditorSession;
     ui: EditorUiStore;
-    onClose: () => void;
+    onClose?: () => void;
+    /** Host API for RPC-backed actions (material assignment, camera). */
+    api?: EditorHostApi;
+    /** Controlled active tab; omit for local state. */
+    tab?: InspectorTab;
+    onSelectTab?: (tab: InspectorTab) => void;
+    /** Controlled section collapse state (persisted by the shell layout store). */
+    collapsed?: Record<string, boolean>;
+    onToggleSection?: (id: string) => void;
 }): import("react").JSX.Element;

package/dist/InspectorPanel.js

@@ -1,14 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { collectDescendants, editorParentOf, findEditorNote, findEditorPath, } from "@jgengine/core/editor/index";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { editorParentOf, findEditorNote, findEditorPath, isEditorObjectLocked, } from "@jgengine/core/editor/index";
 import { readVegetationSettings, vegetationFootprint } from "@jgengine/core/world/vegetation";
 import { getSceneKind, isSceneKind, parseParams, } from "@jgengine/core/scene/sceneKinds";
 import { getAssetGenerator } from "@jgengine/core/scene/assetGenerator";
 import { useGameContext } from "@jgengine/react/provider";
+import { canAuthorTrigger, clearMaterialAssignmentPatch, clearTriggerInstallPatch, defaultTriggerInstallPatch, hasAuthoredTrigger, hasMaterialAssignment, } from "./authoredComponentMeta.js";
 import { SchemaInspector } from "./SchemaInspector.js";
 import { TriggerInspector } from "./TriggerInspector.js";
+import { listParentCandidates } from "./parentCandidates.js";
+import { TERRAIN_MATERIALS } from "./uiStore.js";
 import { shallowArrayEqual, useStoreSelector } from "./useStoreSelector.js";
-import { INPUT, MICRO } from "./chromeStyles.js";
+import { INPUT } from "./chromeStyles.js";
 import { NumberField } from "./chromeFields.js";
+import { AxisNumberField, FieldRow, SectionAction } from "./shell/fields.js";
+import { Icon, kindIcon } from "./shell/icons.js";
+import { FOCUS_RING, INPUT_CLS, NUMERIC } from "./shell/theme.js";
+import { CollapsibleSection, EmptyState, IconButton, PanelTabs } from "./shell/ui.js";
 function VegetationFields({ volume, onMeta, }) {
     const settings = readVegetationSettings(volume);
     if (settings === null)
@@ -17,7 +25,7 @@ function VegetationFields({ volume, onMeta, }) {
     const areaM2 = (footprint.maxX - footprint.minX) * (footprint.maxZ - footprint.minZ);
     const sliderMax = settings.item === "grass" ? 12 : 1;
     const estimated = Math.floor(areaM2 * settings.density);
-    return (_jsxs("div", { className: "space-y-2 rounded-lg border border-emerald-400/15 bg-emerald-500/[0.06] p-2.5", children: [_jsx("div", { className: "text-[9px] font-semibold uppercase tracking-[0.14em] text-emerald-300", children: "Vegetation" }), _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: "item" }), _jsx("input", { className: `w-32 ${INPUT}`, value: settings.item, placeholder: "grass", onChange: (event) => onMeta({ item: event.target.value }, "veg:item") })] }), _jsxs("label", { className: "block space-y-1", children: [_jsxs("span", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "density /m\u00B2" }), _jsx("span", { className: "text-cyan-200", children: settings.density.toFixed(2) })] }), _jsx("input", { type: "range", min: 0, max: sliderMax, step: sliderMax / 200, className: "w-full accent-emerald-400", value: Math.min(settings.density, sliderMax), onChange: (event) => onMeta({ density: Number(event.target.value) }, "veg:density") })] }), _jsx(NumberField, { label: "density", step: 0.01, value: settings.density, onCommit: (value) => onMeta({ density: Math.max(0, value) }, "veg:density") }), _jsx(NumberField, { label: "min scale", step: 0.05, value: settings.minScale, onCommit: (value) => onMeta({ minScale: value }, "veg:minScale") }), _jsx(NumberField, { label: "max scale", step: 0.05, value: settings.maxScale, onCommit: (value) => onMeta({ maxScale: value }, "veg:maxScale") }), _jsx(NumberField, { label: "spacing", step: 0.25, value: settings.minDistance, onCommit: (value) => onMeta({ minDistance: Math.max(0, value) }, "veg:minDistance") }), _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: "seed" }), _jsx("input", { className: `w-32 ${INPUT}`, value: settings.seed, placeholder: "reroll\u2026", onChange: (event) => onMeta({ seed: event.target.value }, "veg:seed") })] }), _jsxs("div", { className: "text-[10px] text-neutral-500", children: ["\u2248 ", estimated.toLocaleString(), " ", settings.item === "grass" ? "blades" : "placements", " over ", Math.round(areaM2).toLocaleString(), " m\u00B2"] })] }));
+    return (_jsxs("div", { className: "space-y-2", children: [_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: "item" }), _jsx("input", { className: `w-32 ${INPUT}`, value: settings.item, placeholder: "grass", onChange: (event) => onMeta({ item: event.target.value }, "veg:item") })] }), _jsxs("label", { className: "block space-y-1", children: [_jsxs("span", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "density /m\u00B2" }), _jsx("span", { className: "text-cyan-200", children: settings.density.toFixed(2) })] }), _jsx("input", { type: "range", min: 0, max: sliderMax, step: sliderMax / 200, className: "w-full accent-emerald-400", value: Math.min(settings.density, sliderMax), onChange: (event) => onMeta({ density: Number(event.target.value) }, "veg:density") })] }), _jsx(NumberField, { label: "density", step: 0.01, value: settings.density, onCommit: (value) => onMeta({ density: Math.max(0, value) }, "veg:density") }), _jsx(NumberField, { label: "min scale", step: 0.05, value: settings.minScale, onCommit: (value) => onMeta({ minScale: value }, "veg:minScale") }), _jsx(NumberField, { label: "max scale", step: 0.05, value: settings.maxScale, onCommit: (value) => onMeta({ maxScale: value }, "veg:maxScale") }), _jsx(NumberField, { label: "spacing", step: 0.25, value: settings.minDistance, onCommit: (value) => onMeta({ minDistance: Math.max(0, value) }, "veg:minDistance") }), _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: "seed" }), _jsx("input", { className: `w-32 ${INPUT}`, value: settings.seed, placeholder: "reroll\u2026", onChange: (event) => onMeta({ seed: event.target.value }, "veg:seed") })] }), _jsxs("div", { className: "text-[10px] text-neutral-500", children: ["\u2248 ", estimated.toLocaleString(), " ", settings.item === "grass" ? "blades" : "placements", " over ", Math.round(areaM2).toLocaleString(), " m\u00B2"] })] }));
 }
 /** Builds the resolver-facing view of a document object for a registered scene kind's inspector. */
 function markerObject(marker) {
@@ -58,42 +66,82 @@ function GeneratorInspector({ meta, onMeta }) {
  */
 function ClearanceField({ meta, onMeta, }) {
     const value = typeof meta?.["clearance"] === "number" ? meta["clearance"] : 0;
-    return (_jsx("div", { className: "space-y-1", title: "Radius (m) foliage stays clear of and terrain flattens under; 0 = no clearance", children: _jsx(NumberField, { label: "clearance m", step: 0.5, value: value, onCommit: (next) => onMeta({ clearance: Math.max(0, next) }, "clearance") }) }));
+    return (_jsx(FieldRow, { label: "Clearance", title: "Radius (m) foliage stays clear of and terrain flattens under; 0 = no clearance", children: _jsx(AxisNumberField, { label: "m", step: 0.5, value: value, onCommit: (next) => onMeta({ clearance: Math.max(0, next) }, "clearance") }) }));
 }
 /** Inspector row to parent the selected object under another (excludes itself and its descendants). */
 function ParentField({ session, id }) {
     const document = session.getState().document;
     const current = editorParentOf(document, id) ?? "";
-    const banned = collectDescendants(document, [id]);
-    banned.add(id);
-    const labelOf = (node) => node.label ?? node.id;
-    const candidates = [
-        ...document.markers.map((m) => ({ id: m.id, label: labelOf(m) })),
-        ...document.volumes.map((v) => ({ id: v.id, label: labelOf(v) })),
-        ...document.paths.map((p) => ({ id: p.id, label: labelOf(p) })),
-        ...document.annotations.map((n) => ({ id: n.id, label: n.text.slice(0, 30) || n.id })),
-    ].filter((entry) => !banned.has(entry.id));
-    return (_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: "parent" }), _jsxs("select", { className: `w-40 ${INPUT}`, value: current, onChange: (event) => session.dispatch({ type: "setParent", ids: [id], parentId: event.target.value === "" ? null : event.target.value }), children: [_jsx("option", { value: "", children: "\u2014 none (root) \u2014" }), candidates.map((entry) => (_jsx("option", { value: entry.id, children: entry.label }, entry.id)))] })] }));
+    const candidates = listParentCandidates(document, [id]);
+    return (_jsx(FieldRow, { label: "Parent", children: _jsxs("select", { className: `h-6.5 w-full min-w-0 px-1.5 ${INPUT_CLS}`, value: current, "aria-label": "Parent object", onChange: (event) => session.dispatch({ type: "setParent", ids: [id], parentId: event.target.value === "" ? null : event.target.value }), children: [_jsx("option", { value: "", children: "\u2014 none (root) \u2014" }), candidates.map((entry) => (_jsx("option", { value: entry.id, children: entry.label }, entry.id)))] }) }));
 }
 function KindColorFields({ kind, color, onKind, onColor, }) {
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("label", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "kind" }), _jsx("input", { className: `w-full min-w-0 ${INPUT}`, value: kind, onChange: (event) => {
-                            const next = event.target.value.trim();
-                            if (next.length > 0)
-                                onKind(next);
-                        } })] }), _jsx("input", { type: "color", className: "h-7 w-9 shrink-0 cursor-pointer rounded-md border border-white/10 bg-black/40", title: "Display color", value: color ?? "#ffffff", onChange: (event) => onColor(event.target.value) }), color !== undefined ? (_jsx("button", { type: "button", className: "shrink-0 rounded-md bg-white/[0.04] px-1.5 py-1 text-neutral-400 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/10", title: "Reset to kind default color", onClick: () => onColor(undefined), children: "\u21BA" })) : null] }));
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(FieldRow, { label: "Kind", children: _jsx("input", { className: `h-6.5 w-full min-w-0 px-2 ${INPUT_CLS}`, value: kind, "aria-label": "Object kind", onChange: (event) => {
+                        const next = event.target.value.trim();
+                        if (next.length > 0)
+                            onKind(next);
+                    } }) }), _jsxs(FieldRow, { label: "Color", children: [_jsx("input", { type: "color", className: "h-6.5 w-9 shrink-0 cursor-pointer rounded-[5px] border border-white/10 bg-black/40", title: "Display color", "aria-label": "Display color", value: color ?? "#ffffff", onChange: (event) => onColor(event.target.value) }), color !== undefined ? (_jsx(SectionAction, { label: "Reset to kind default color", onClick: () => onColor(undefined), children: "reset" })) : (_jsx("span", { className: "text-[10px] text-neutral-600", children: "kind default" }))] })] }));
+}
+/** Header card identifying the selected object: type glyph, editable name, kind, id, lock state. */
+function ObjectHeader({ kind, id, label, placeholder, locked, onLabel, }) {
+    return (_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-[7px] border border-white/[0.08] bg-white/[0.03] text-cyan-300", children: _jsx(Icon, { name: kindIcon(kind), size: 17 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [onLabel !== undefined ? (_jsx("input", { className: `h-6.5 w-full px-2 font-medium text-cyan-100 ${INPUT_CLS}`, value: label, placeholder: placeholder, "aria-label": "Object name", onChange: (event) => onLabel(event.target.value) })) : (_jsx("div", { className: "truncate text-[12px] font-medium text-cyan-100", children: label.length > 0 ? label : placeholder })), _jsxs("div", { className: "mt-0.5 flex items-center gap-1.5 text-[10px] text-neutral-500", children: [_jsx("span", { children: kind }), _jsx("span", { className: "text-neutral-700", children: "\u00B7" }), _jsx("span", { className: "truncate", title: id, children: id }), locked ? _jsx(Icon, { name: "lock", size: 10, className: "shrink-0 text-amber-400/80", "aria-label": "Locked via collection" }) : null] })] })] }));
+}
+/**
+ * Add/remove bar for optional authored components (trigger, material). Only offers real
+ * data-model seams — no invented component system.
+ */
+function ComponentAddBar({ target, meta, onMeta, api, selectionIds, }) {
+    const offerTrigger = canAuthorTrigger(target) && !hasAuthoredTrigger(meta);
+    const offerMaterial = api !== undefined && selectionIds.length > 0 && !hasMaterialAssignment(meta);
+    if (!offerTrigger && !offerMaterial)
+        return null;
+    return (_jsxs("div", { className: "space-y-1.5 rounded-[6px] border border-dashed border-white/[0.1] bg-white/[0.02] p-2", children: [_jsx("div", { className: "text-[10px] font-medium uppercase tracking-wider text-neutral-500", children: "Add component" }), _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [offerTrigger ? (_jsx("button", { type: "button", className: `rounded-[5px] border border-amber-400/25 bg-amber-500/10 px-2 py-1 text-[11px] text-amber-100 transition-colors hover:bg-amber-500/20 ${FOCUS_RING}`, onClick: () => {
+                            const patch = defaultTriggerInstallPatch(target, meta);
+                            if (patch !== null)
+                                onMeta(patch, "component:add-trigger");
+                        }, children: "+ Trigger" })) : null, offerMaterial ? (_jsxs("label", { className: "flex items-center gap-1.5 text-[11px] text-neutral-400", children: [_jsx("span", { className: "sr-only", children: "Add material" }), _jsxs("select", { className: `h-7 max-w-[10rem] px-1.5 ${INPUT_CLS}`, defaultValue: "", "aria-label": "Add material component", onChange: (event) => {
+                                    const materialId = event.target.value;
+                                    if (materialId.length === 0)
+                                        return;
+                                    api.handle({ method: "assign_material", ids: [...selectionIds], materialId });
+                                    event.currentTarget.value = "";
+                                }, children: [_jsx("option", { value: "", children: "+ Material\u2026" }), TERRAIN_MATERIALS.map((material) => (_jsx("option", { value: material.id, children: material.label }, material.id)))] })] })) : null] })] }));
+}
+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 }));
+}
+/** Materials tab: assign the terrain material palette to the current selection over the real RPC. */
+function MaterialsTab({ api, selection, meta, }) {
+    const current = typeof meta?.["materialId"] === "string" ? meta["materialId"] : null;
+    if (selection.length === 0) {
+        return (_jsx(EmptyState, { icon: "sphere", title: "No selection", description: "Select an object to view or assign its material. Chips can also be dragged onto hierarchy rows or the viewport." }));
+    }
+    return (_jsxs("div", { className: "space-y-2.5 p-2.5", children: [_jsxs("div", { className: "text-[10px] text-neutral-500", children: ["Assigned material", _jsx("div", { className: "mt-1 flex items-center gap-2 rounded-[6px] border border-white/[0.07] bg-white/[0.02] px-2.5 py-2 text-[12px] text-neutral-200", children: current !== null ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "h-3.5 w-3.5 rounded-full ring-1 ring-inset ring-white/20", style: { backgroundColor: TERRAIN_MATERIALS.find((material) => material.id === current)?.color ?? "#888" } }), current] })) : (_jsx("span", { className: "text-neutral-500", children: "none \u2014 kind default appearance" })) })] }), _jsx("div", { className: "text-[10px] text-neutral-500", children: "Palette" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: TERRAIN_MATERIALS.map((material) => (_jsxs("button", { type: "button", disabled: api === undefined, onClick: () => api?.handle({ method: "assign_material", ids: [...selection], materialId: material.id }), className: `flex items-center gap-1.5 rounded-[6px] border px-2 py-1 text-[11px] transition-colors ${FOCUS_RING} ${current === material.id
+                        ? "border-cyan-400/50 bg-cyan-500/15 text-cyan-100"
+                        : "border-white/[0.08] bg-[#191d24] text-neutral-300 hover:bg-[#1f242d]"}`, title: `Assign ${material.label} to selection`, children: [_jsx("span", { className: "h-3 w-3 rounded-full ring-1 ring-inset ring-white/20", style: { backgroundColor: material.color } }), material.label] }, material.id))) })] }));
 }
 /**
- * The right-hand inspector as an isolated, selector-subscribed panel. It reads only the
- * document + selection slices (via `useStoreSelector`) and the ui store's `pathPoint` slice, so
- * UI-only churn (gizmo mode, snapping, active tool) or unrelated document edits outside the
- * selected object's slice no longer rerender it on `EditorChrome`'s own render tick.
- * @internal — mounted by `EditorChrome` as a right-aside panel.
+ * The right-hand inspector as an isolated, selector-subscribed panel: tabbed (Inspector /
+ * Components / Materials), with collapsible component cards over the live selected object.
+ * Reads only the document + selection slices (via `useStoreSelector`) and the ui store's
+ * `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 }) {
+export function InspectorPanel({ session, ui, onClose, api, tab, onSelectTab, collapsed, onToggleSection, }) {
     const document = useStoreSelector(session, (state) => state.document);
     const selection = useStoreSelector(session, (state) => state.selection, shallowArrayEqual);
     const pathPoint = useStoreSelector(ui, (state) => state.pathPoint);
     const ctx = useGameContext();
+    const [localTab, setLocalTab] = useState("inspector");
+    const [localCollapsed, setLocalCollapsed] = useState({});
+    const [linkedExtents, setLinkedExtents] = useState(false);
+    const activeTab = tab ?? localTab;
+    const selectTab = onSelectTab ?? setLocalTab;
+    const sections = {
+        collapsed: collapsed ?? localCollapsed,
+        toggle: onToggleSection ??
+            ((id) => setLocalCollapsed((previous) => ({ ...previous, [id]: !(previous[id] === true) }))),
+    };
     const selectedId = selection[0];
     const selectedMarker = document.markers.find((marker) => marker.id === selectedId);
     const selectedVolume = document.volumes.find((volume) => volume.id === selectedId);
@@ -106,5 +154,103 @@ export function InspectorPanel({ session, ui, onClose }) {
         selectedNote === undefined;
     const liveEntity = documentMiss ? ctx.scene.entity.get(selectedId) : null;
     const liveObject = documentMiss && liveEntity === null ? ctx.scene.object.get(selectedId) : null;
-    return (_jsx("aside", { className: "pointer-events-auto flex w-72 min-w-56 max-w-[42vw] resize-x flex-col overflow-auto border-l border-white/[0.08] bg-[#0d0f13]/95 p-3 backdrop-blur-md", style: { direction: "rtl" }, children: _jsxs("div", { className: "flex-1", style: { direction: "ltr" }, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: MICRO, children: "Inspector" }), _jsx("button", { type: "button", className: "ml-auto rounded-md px-2 py-1 text-neutral-500 transition-colors hover:bg-white/10 hover:text-neutral-200", onClick: onClose, "aria-label": "Close inspector panel", children: "\u00D7" })] }), selection.length > 1 ? (_jsxs("div", { className: "mt-3 space-y-2", children: [_jsxs("div", { className: "text-cyan-200", children: [selection.length, " objects selected"] }), _jsx("div", { className: "max-h-32 space-y-0.5 overflow-auto text-neutral-500", children: selection.map((id) => _jsx("div", { className: "truncate", children: id }, id)) }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", className: "rounded-md bg-white/[0.07] px-2 py-1 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/15", onClick: () => session.dispatch({ type: "duplicate", ids: selection }), children: "Duplicate" }), _jsx("button", { type: "button", className: "rounded-md bg-rose-500/15 px-2 py-1 text-rose-200 ring-1 ring-inset ring-rose-400/25 transition-colors hover:bg-rose-500/25", onClick: () => session.dispatch({ type: "removeMany", ids: selection }), children: "Delete all" })] })] })) : null, selection.length <= 1 && selectedMarker !== undefined ? (_jsxs("div", { className: "mt-3 space-y-2", children: [_jsx("input", { className: `w-full ${INPUT} font-medium text-cyan-200`, value: selectedMarker.label ?? "", placeholder: selectedMarker.id, onChange: (event) => session.dispatch({ type: "setMarker", id: selectedMarker.id, patch: { label: event.target.value } }, { coalesce: `label:${selectedMarker.id}` }) }), _jsxs("div", { className: "text-neutral-500", children: [selectedMarker.kind, " \u00B7 ", selectedMarker.id] }), _jsx(KindColorFields, { kind: selectedMarker.kind, color: selectedMarker.color, onKind: (kind) => session.dispatch({ type: "setMarker", id: selectedMarker.id, patch: { kind } }, { coalesce: `kind:${selectedMarker.id}` }), onColor: (color) => session.dispatch({ type: "setMarker", id: selectedMarker.id, patch: { color } }, { coalesce: `color:${selectedMarker.id}` }) }), ["x", "y", "z"].map((axis) => (_jsx(NumberField, { label: axis, value: selectedMarker.position[axis], onCommit: (value) => session.dispatch({ type: "setTransform", id: selectedMarker.id, position: { ...selectedMarker.position, [axis]: value } }, { coalesce: `pos:${axis}:${selectedMarker.id}` }) }, axis))), _jsx(NumberField, { label: "rot\u00B0", step: 5, value: Math.round(((selectedMarker.rotationY ?? 0) * 180) / Math.PI), onCommit: (value) => session.dispatch({ type: "setTransform", id: selectedMarker.id, rotationY: (value * Math.PI) / 180 }, { coalesce: `rot:${selectedMarker.id}` }) }), _jsx(ClearanceField, { meta: selectedMarker.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setMarker", id: selectedMarker.id, patch: { meta: { ...selectedMarker.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedMarker.id}` }) }), _jsx(TriggerInspector, { target: "marker", meta: selectedMarker.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setMarker", id: selectedMarker.id, patch: { meta: { ...selectedMarker.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedMarker.id}` }) }), _jsx(ParentField, { session: session, id: selectedMarker.id }), isSceneKind(selectedMarker.kind) ? (_jsx(KindInspector, { object: markerObject(selectedMarker), meta: selectedMarker.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setMarker", id: selectedMarker.id, patch: { meta: { ...selectedMarker.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedMarker.id}` }) })) : null, _jsx(GeneratorInspector, { meta: selectedMarker.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setMarker", id: selectedMarker.id, patch: { meta: { ...selectedMarker.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedMarker.id}` }) }), selectedMarker.meta !== undefined ? _jsx("pre", { className: "max-h-48 overflow-auto rounded-md border border-white/[0.06] bg-black/40 p-2 text-[10px] text-neutral-400", children: JSON.stringify(selectedMarker.meta, null, 2) }) : null] })) : null, selection.length <= 1 && selectedVolume !== undefined ? (_jsxs("div", { className: "mt-3 space-y-2", children: [_jsx("input", { className: `w-full ${INPUT} font-medium text-cyan-200`, value: selectedVolume.label ?? "", placeholder: selectedVolume.id, onChange: (event) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { label: event.target.value } }, { coalesce: `label:${selectedVolume.id}` }) }), _jsxs("div", { className: "text-neutral-500", children: [selectedVolume.kind, " \u00B7 ", selectedVolume.shape] }), _jsx(KindColorFields, { kind: selectedVolume.kind, color: selectedVolume.color, onKind: (kind) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { kind } }, { coalesce: `kind:${selectedVolume.id}` }), onColor: (color) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { color } }, { coalesce: `color:${selectedVolume.id}` }) }), ["x", "y", "z"].map((axis) => (_jsx(NumberField, { label: axis, value: selectedVolume.center[axis], onCommit: (value) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { center: { ...selectedVolume.center, [axis]: value } } }, { coalesce: `center:${axis}:${selectedVolume.id}` }) }, axis))), selectedVolume.shape !== "box" ? (_jsx(NumberField, { label: "radius", value: selectedVolume.radius ?? 5, onCommit: (value) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { radius: Math.max(0.5, value) } }, { coalesce: `radius:${selectedVolume.id}` }) })) : null, selectedVolume.shape === "cylinder" ? (_jsx(NumberField, { label: "height", value: selectedVolume.height ?? 4, onCommit: (value) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { height: Math.max(0.5, value) } }, { coalesce: `height:${selectedVolume.id}` }) })) : null, selectedVolume.shape === "box" ? (["x", "y", "z"].map((axis) => (_jsx(NumberField, { label: `half ${axis}`, value: selectedVolume.halfExtents?.[axis] ?? 5, onCommit: (value) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { halfExtents: { x: selectedVolume.halfExtents?.x ?? 5, y: selectedVolume.halfExtents?.y ?? 5, z: selectedVolume.halfExtents?.z ?? 5, [axis]: Math.max(0.5, value) } } }, { coalesce: `he:${axis}:${selectedVolume.id}` }) }, axis)))) : null, _jsx(ClearanceField, { meta: selectedVolume.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { meta: { ...selectedVolume.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedVolume.id}` }) }), _jsx(TriggerInspector, { target: "volume", meta: selectedVolume.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { meta: { ...selectedVolume.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedVolume.id}` }) }), _jsx(ParentField, { session: session, id: selectedVolume.id }), _jsx(VegetationFields, { volume: selectedVolume, onMeta: (patch, coalesce) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { meta: { ...selectedVolume.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedVolume.id}` }) }), isSceneKind(selectedVolume.kind) ? (_jsx(KindInspector, { object: volumeObject(selectedVolume), meta: selectedVolume.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { meta: { ...selectedVolume.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedVolume.id}` }) })) : null] })) : null, selection.length <= 1 && selectedPath !== undefined ? (_jsxs("div", { className: "mt-3 space-y-2", children: [_jsx("input", { className: `w-full ${INPUT} font-medium text-cyan-200`, value: selectedPath.label ?? "", placeholder: selectedPath.id, onChange: (event) => session.dispatch({ type: "setPath", id: selectedPath.id, patch: { label: event.target.value } }, { coalesce: `label:${selectedPath.id}` }) }), _jsxs("div", { className: "text-neutral-500", children: [selectedPath.kind, " \u00B7 ", selectedPath.points.length, " points"] }), _jsx(KindColorFields, { kind: selectedPath.kind, color: selectedPath.color, onKind: (kind) => session.dispatch({ type: "setPath", id: selectedPath.id, patch: { kind } }, { coalesce: `kind:${selectedPath.id}` }), onColor: (color) => session.dispatch({ type: "setPath", id: selectedPath.id, patch: { color } }, { coalesce: `color:${selectedPath.id}` }) }), _jsx(NumberField, { label: "width", value: selectedPath.width ?? 4, onCommit: (value) => session.dispatch({ type: "setPath", id: selectedPath.id, patch: { width: Math.max(0.5, value) } }, { coalesce: `width:${selectedPath.id}` }) }), pathPoint !== null && pathPoint.pathId === selectedPath.id ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "text-neutral-400", children: ["Point ", pathPoint.index + 1, "/", selectedPath.points.length] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", className: "rounded-md bg-white/[0.07] px-2 py-1 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/15", onClick: () => { const at = pathPoint.index; const points = [...selectedPath.points.slice(0, at + 1), { ...selectedPath.points[at] }, ...selectedPath.points.slice(at + 1)]; session.dispatch({ type: "setPath", id: selectedPath.id, patch: { points } }); }, children: "Insert point" }), _jsx("button", { type: "button", className: "rounded-md bg-rose-500/15 px-2 py-1 text-rose-200 ring-1 ring-inset ring-rose-400/25 transition-colors hover:bg-rose-500/25 disabled:opacity-40", disabled: selectedPath.points.length <= 2, onClick: () => { const points = selectedPath.points.filter((_, index) => index !== pathPoint.index); ui.patch({ pathPoint: null }); session.dispatch({ type: "setPath", id: selectedPath.id, patch: { points } }); }, children: "Delete point" })] })] })) : _jsx("div", { className: "text-[10px] text-neutral-500", children: "Click a vertex sphere to edit points." }), isSceneKind(selectedPath.kind) ? (_jsx(KindInspector, { object: pathObject(selectedPath), meta: selectedPath.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setPath", id: selectedPath.id, patch: { meta: { ...selectedPath.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedPath.id}` }) })) : null, _jsx(ParentField, { session: session, id: selectedPath.id })] })) : null, selection.length <= 1 && selectedNote !== undefined ? (_jsxs("div", { className: "mt-3 space-y-2", children: [_jsxs("div", { className: "text-neutral-500", children: ["note \u00B7 ", selectedNote.id] }), _jsx("textarea", { className: `h-24 w-full ${INPUT} text-neutral-100`, value: selectedNote.text, onChange: (event) => session.dispatch({ type: "setNote", id: selectedNote.id, patch: { text: event.target.value } }, { coalesce: `text:${selectedNote.id}` }) }), ["x", "y", "z"].map((axis) => (_jsx(NumberField, { label: axis, value: selectedNote.position[axis], onCommit: (value) => session.dispatch({ type: "setNote", id: selectedNote.id, patch: { position: { ...selectedNote.position, [axis]: value } } }, { coalesce: `npos:${axis}:${selectedNote.id}` }) }, axis)))] })) : null, liveEntity !== null ? _jsxs("div", { className: "mt-3 space-y-1", children: [_jsx("div", { className: "text-cyan-200", children: liveEntity.name }), _jsxs("div", { className: "text-neutral-500", children: ["live entity \u00B7 ", liveEntity.role, " \u00B7 ", liveEntity.id] }), _jsxs("div", { className: "text-neutral-400", children: ["x ", liveEntity.position[0].toFixed(1), " \u00B7 y ", liveEntity.position[1].toFixed(1), " \u00B7 z ", liveEntity.position[2].toFixed(1)] }), _jsx("div", { className: "text-[10px] text-neutral-500", children: "Live world object \u2014 edit its source data to move it permanently." })] }) : null, liveObject !== null ? _jsxs("div", { className: "mt-3 space-y-1", children: [_jsx("div", { className: "text-cyan-200", children: liveObject.catalogId }), _jsxs("div", { className: "text-neutral-500", children: ["live object \u00B7 ", liveObject.instanceId] }), _jsxs("div", { className: "text-neutral-400", 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-500", children: "Live world object \u2014 edit its source data to move it permanently." })] }) : null, selection.length === 0 && liveEntity === null && liveObject === null ? _jsx("div", { className: "mt-3 text-neutral-500", children: "Select an authored or live world object, or + Add to place new ones." }) : null] }) }));
+    const selectedMeta = selectedMarker?.meta ?? selectedVolume?.meta ?? selectedPath?.meta;
+    let body = null;
+    if (activeTab === "materials") {
+        body = _jsx(MaterialsTab, { api: api, selection: selection, meta: selectedMeta });
+    }
+    else if (selection.length > 1) {
+        const positions = selection
+            .map((id) => {
+            const marker = document.markers.find((entry) => entry.id === id);
+            if (marker !== undefined)
+                return { id, position: marker.position };
+            const volume = document.volumes.find((entry) => entry.id === id);
+            if (volume !== undefined)
+                return { id, position: volume.center };
+            const note = document.annotations.find((entry) => entry.id === id);
+            if (note !== undefined)
+                return { id, position: note.position };
+            return null;
+        })
+            .filter((entry) => entry !== null);
+        const axisValues = (axis) => {
+            if (positions.length === 0)
+                return { value: 0, mixed: true };
+            const first = positions[0].position[axis];
+            const mixed = positions.some((entry) => entry.position[axis] !== first);
+            return { value: first, mixed };
+        };
+        const commitAxis = (axis, value) => {
+            for (const entry of positions) {
+                session.dispatch({
+                    type: "setTransform",
+                    id: entry.id,
+                    position: { ...entry.position, [axis]: value },
+                }, { coalesce: `multi-pos:${axis}:${entry.id}` });
+            }
+        };
+        body = (_jsxs("div", { className: "space-y-2.5 p-2.5", children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-[7px] border border-white/[0.08] bg-white/[0.03] text-cyan-300", children: _jsx(Icon, { name: "layers", size: 17 }) }), _jsxs("div", { children: [_jsxs("div", { className: "text-[12px] font-medium text-neutral-100", children: [selection.length, " objects selected"] }), _jsx("div", { className: "text-[10px] text-neutral-500", children: "Shared fields show \u201C\u2014\u201D when mixed; writing applies to every selected object" })] })] }), _jsx("div", { className: "max-h-28 space-y-0.5 overflow-auto rounded-[6px] border border-white/[0.06] bg-black/20 p-1.5 text-[10px] text-neutral-500", children: selection.map((id) => (_jsx("div", { className: "truncate", children: id }, id))) }), positions.length > 0 ? (_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-[10px] font-medium uppercase tracking-wider text-neutral-500", children: "Position" }), _jsx(FieldRow, { label: "Position", children: ["x", "y", "z"].map((axis) => {
+                                const { value, mixed } = axisValues(axis);
+                                return (_jsx(AxisNumberField, { axis: axis, label: axis, step: 0.5, value: value, mixed: mixed, onCommit: (next) => commitAxis(axis, next) }, axis));
+                            }) })] })) : null, _jsxs("div", { className: "flex gap-1.5", children: [_jsx("button", { type: "button", className: `flex-1 rounded-[5px] border border-white/[0.07] bg-[#191d24] px-2 py-1.5 text-[11px] text-neutral-200 transition-colors hover:bg-[#1f242d] ${FOCUS_RING}`, onClick: () => session.dispatch({ type: "duplicate", ids: selection }), children: "Duplicate" }), _jsx("button", { type: "button", className: `flex-1 rounded-[5px] border border-rose-400/25 bg-rose-500/15 px-2 py-1.5 text-[11px] text-rose-200 transition-colors hover:bg-rose-500/25 ${FOCUS_RING}`, onClick: () => session.dispatch({ type: "removeMany", ids: selection }), children: "Delete all" })] })] }));
+    }
+    else if (selectedMarker !== undefined) {
+        const marker = selectedMarker;
+        const onMeta = (patch, coalesce) => session.dispatch({ type: "setMarker", id: marker.id, patch: { meta: { ...marker.meta, ...patch } } }, { coalesce: `${coalesce}:${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 })] }) }), 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;
+        const onMeta = (patch, coalesce) => session.dispatch({ type: "setVolume", id: volume.id, patch: { meta: { ...volume.meta, ...patch } } }, { coalesce: `${coalesce}:${volume.id}` });
+        const setExtent = (axis, value) => {
+            const current = { x: volume.halfExtents?.x ?? 5, y: volume.halfExtents?.y ?? 5, z: volume.halfExtents?.z ?? 5 };
+            const next = linkedExtents
+                ? { x: Math.max(0.5, value), y: Math.max(0.5, value), z: Math.max(0.5, value) }
+                : { ...current, [axis]: Math.max(0.5, value) };
+            session.dispatch({ type: "setVolume", id: volume.id, patch: { halfExtents: next } }, { coalesce: `he:${linkedExtents ? "all" : axis}:${volume.id}` });
+        };
+        const hasTrigger = hasAuthoredTrigger(volume.meta);
+        const hasMaterial = hasMaterialAssignment(volume.meta);
+        const hasVegetation = readVegetationSettings(volume) !== null;
+        const hasKindParams = isSceneKind(volume.kind);
+        const componentCards = (_jsxs(_Fragment, { children: [_jsx(ComponentAddBar, { target: "volume", meta: volume.meta, onMeta: onMeta, api: api, selectionIds: [volume.id] }), hasKindParams ? (_jsx(Section, { id: "kindParams", title: "Kind parameters", icon: "settings", sections: sections, children: _jsx(KindInspector, { object: volumeObject(volume), meta: volume.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: "volume", meta: volume.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(volume.meta?.["materialId"]) })] }) })) : null, hasVegetation ? (_jsxs(Section, { id: "vegetation", title: "Vegetation", icon: "terrain", sections: sections, children: [_jsxs("div", { className: "mb-1.5 text-[10px] text-neutral-500", children: ["Owned by volume kind ", _jsx("span", { className: NUMERIC, children: "vegetation" }), " \u2014 change kind in Inspector to remove."] }), _jsx(VegetationFields, { volume: volume, onMeta: onMeta })] })) : null, !hasKindParams && !hasTrigger && !hasMaterial && !hasVegetation && !canAuthorTrigger("volume") ? (_jsx(EmptyState, { icon: "settings", title: "No components", description: "This volume 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: volume.kind, id: volume.id, label: volume.label ?? "", placeholder: volume.id, locked: isEditorObjectLocked(document, volume.id), onLabel: (value) => session.dispatch({ type: "setVolume", id: volume.id, patch: { label: value } }, { coalesce: `label:${volume.id}` }) }), activeTab === "inspector" ? (_jsxs(_Fragment, { children: [_jsx(Section, { id: "transform", title: "Transform", icon: "move", sections: sections, trailing: volume.shape === "box" ? (_jsx(SectionAction, { label: linkedExtents ? "Unlink extents" : "Link extents (uniform)", active: linkedExtents, onClick: () => setLinkedExtents((value) => !value), children: "link" })) : undefined, children: _jsxs("div", { className: "space-y-1.5", children: [_jsx(FieldRow, { label: "Center", children: ["x", "y", "z"].map((axis) => (_jsx(AxisNumberField, { axis: axis, label: axis, step: 0.5, value: volume.center[axis], onCommit: (value) => session.dispatch({ type: "setVolume", id: volume.id, patch: { center: { ...volume.center, [axis]: value } } }, { coalesce: `center:${axis}:${volume.id}` }) }, axis))) }), volume.shape !== "box" ? (_jsx(FieldRow, { label: "Radius", children: _jsx(AxisNumberField, { label: "r", step: 0.5, value: volume.radius ?? 5, onCommit: (value) => session.dispatch({ type: "setVolume", id: volume.id, patch: { radius: Math.max(0.5, value) } }, { coalesce: `radius:${volume.id}` }) }) })) : null, volume.shape === "cylinder" ? (_jsx(FieldRow, { label: "Height", children: _jsx(AxisNumberField, { label: "h", step: 0.5, value: volume.height ?? 4, onCommit: (value) => session.dispatch({ type: "setVolume", id: volume.id, patch: { height: Math.max(0.5, value) } }, { coalesce: `height:${volume.id}` }) }) })) : null, volume.shape === "box" ? (_jsx(FieldRow, { label: "Extents", children: ["x", "y", "z"].map((axis) => (_jsx(AxisNumberField, { axis: axis, label: axis, step: 0.5, value: volume.halfExtents?.[axis] ?? 5, onCommit: (value) => setExtent(axis, value) }, axis))) })) : null] }) }), _jsx(Section, { id: "appearance", title: "Appearance", icon: "sphere", sections: sections, children: _jsx(KindColorFields, { kind: volume.kind, color: volume.color, onKind: (kind) => session.dispatch({ type: "setVolume", id: volume.id, patch: { kind } }, { coalesce: `kind:${volume.id}` }), onColor: (color) => session.dispatch({ type: "setVolume", id: volume.id, patch: { color } }, { coalesce: `color:${volume.id}` }) }) }), _jsx(Section, { id: "placement", title: "Placement", icon: "pin", sections: sections, children: _jsxs("div", { className: "space-y-2", children: [_jsx(ClearanceField, { meta: volume.meta, onMeta: onMeta }), _jsx(ParentField, { session: session, id: volume.id })] }) })] })) : (componentCards)] }));
+    }
+    else if (selectedPath !== undefined) {
+        const path = selectedPath;
+        const onMeta = (patch, coalesce) => session.dispatch({ type: "setPath", id: path.id, patch: { meta: { ...path.meta, ...patch } } }, { coalesce: `${coalesce}:${path.id}` });
+        body = (_jsxs("div", { className: "space-y-2 p-2.5", children: [_jsx(ObjectHeader, { kind: path.kind, id: path.id, label: path.label ?? "", placeholder: path.id, locked: isEditorObjectLocked(document, path.id), onLabel: (value) => session.dispatch({ type: "setPath", id: path.id, patch: { label: value } }, { coalesce: `label:${path.id}` }) }), activeTab === "inspector" ? (_jsxs(_Fragment, { children: [_jsx(Section, { id: "path", title: "Path", icon: "spline", sections: sections, children: _jsxs("div", { className: "space-y-1.5", children: [_jsx(FieldRow, { label: "Width", children: _jsx(AxisNumberField, { label: "w", step: 0.5, value: path.width ?? 4, onCommit: (value) => session.dispatch({ type: "setPath", id: path.id, patch: { width: Math.max(0.5, value) } }, { coalesce: `width:${path.id}` }) }) }), _jsxs("div", { className: `text-[10px] text-neutral-500 ${NUMERIC}`, children: [path.points.length, " points"] }), pathPoint !== null && pathPoint.pathId === path.id ? (_jsxs("div", { className: "space-y-1.5 rounded-[5px] border border-white/[0.06] bg-black/20 p-2", children: [_jsxs("div", { className: `text-[10px] text-neutral-400 ${NUMERIC}`, children: ["Point ", pathPoint.index + 1, "/", path.points.length] }), _jsxs("div", { className: "flex gap-1.5", children: [_jsx("button", { type: "button", className: `flex-1 rounded-[5px] border border-white/[0.07] bg-[#191d24] px-2 py-1 text-[10px] text-neutral-200 transition-colors hover:bg-[#1f242d] ${FOCUS_RING}`, onClick: () => {
+                                                            const at = pathPoint.index;
+                                                            const points = [...path.points.slice(0, at + 1), { ...path.points[at] }, ...path.points.slice(at + 1)];
+                                                            session.dispatch({ type: "setPath", id: path.id, patch: { points } });
+                                                        }, children: "Insert point" }), _jsx("button", { type: "button", className: `flex-1 rounded-[5px] border border-rose-400/25 bg-rose-500/15 px-2 py-1 text-[10px] text-rose-200 transition-colors hover:bg-rose-500/25 disabled:opacity-40 ${FOCUS_RING}`, disabled: path.points.length <= 2, onClick: () => {
+                                                            const points = path.points.filter((_, index) => index !== pathPoint.index);
+                                                            ui.patch({ pathPoint: null });
+                                                            session.dispatch({ type: "setPath", id: path.id, patch: { points } });
+                                                        }, children: "Delete point" })] })] })) : (_jsx("div", { className: "text-[10px] text-neutral-600", children: "Click a vertex sphere in the viewport to edit points." }))] }) }), _jsx(Section, { id: "appearance", title: "Appearance", icon: "sphere", sections: sections, children: _jsx(KindColorFields, { kind: path.kind, color: path.color, onKind: (kind) => session.dispatch({ type: "setPath", id: path.id, patch: { kind } }, { coalesce: `kind:${path.id}` }), onColor: (color) => session.dispatch({ type: "setPath", id: path.id, patch: { color } }, { coalesce: `color:${path.id}` }) }) }), _jsx(Section, { id: "placement", title: "Placement", icon: "pin", sections: sections, children: _jsx(ParentField, { session: session, id: path.id }) })] })) : isSceneKind(path.kind) ? (_jsx(Section, { id: "kindParams", title: "Kind parameters", icon: "settings", sections: sections, children: _jsx(KindInspector, { object: pathObject(path), meta: path.meta, onMeta: onMeta }) })) : (_jsx(EmptyState, { icon: "settings", title: "No components", description: "This path's kind registers no parameter schema." }))] }));
+    }
+    else if (selectedNote !== undefined) {
+        const note = selectedNote;
+        body = (_jsxs("div", { className: "space-y-2 p-2.5", children: [_jsx(ObjectHeader, { kind: "note", id: note.id, label: note.text.slice(0, 32), placeholder: note.id, locked: false }), _jsx(Section, { id: "note", title: "Note", icon: "note", sections: sections, children: _jsx("textarea", { className: `h-24 w-full p-2 ${INPUT_CLS}`, value: note.text, "aria-label": "Note text", onChange: (event) => session.dispatch({ type: "setNote", id: note.id, patch: { text: event.target.value } }, { coalesce: `text:${note.id}` }) }) }), _jsx(Section, { id: "transform", title: "Transform", icon: "move", sections: sections, children: _jsx(FieldRow, { label: "Position", children: ["x", "y", "z"].map((axis) => (_jsx(AxisNumberField, { axis: axis, label: axis, step: 0.5, value: note.position[axis], onCommit: (value) => session.dispatch({ type: "setNote", id: note.id, patch: { position: { ...note.position, [axis]: value } } }, { coalesce: `npos:${axis}:${note.id}` }) }, axis))) }) })] }));
+    }
+    else if (liveEntity !== null) {
+        body = (_jsxs("div", { className: "space-y-2 p-2.5", children: [_jsx(ObjectHeader, { kind: liveEntity.role, id: liveEntity.id, label: liveEntity.name, placeholder: liveEntity.id, locked: false }), _jsx(Section, { id: "live", title: "Live entity", icon: "walk", sections: sections, children: _jsxs("div", { className: `space-y-1 text-[11px] text-neutral-400 ${NUMERIC}`, children: [_jsxs("div", { children: ["x ", liveEntity.position[0].toFixed(1), " \u00B7 y ", liveEntity.position[1].toFixed(1), " \u00B7 z ", liveEntity.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 if (liveObject !== null) {
+        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." }));
+    }
+    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" },
+                    { id: "components", label: "Components" },
+                    { id: "materials", label: "Materials" },
+                ], trailing: onClose !== undefined ? _jsx(IconButton, { icon: "close", label: "Close inspector", size: 12, tone: "ghost", onClick: onClose }) : undefined }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: body })] }));
 }

package/dist/LightingPanel.d.ts

@@ -0,0 +1,11 @@
+import type { EditorSession } from "@jgengine/core/editor/index";
+/**
+ * Lighting workspace panel — edits `document.environment` (sky preset, time-of-day, intensities,
+ * fog, optional horizon/zenith colors) through the session undo stack. No fabricated runtime data:
+ * empty document shows defaults as display placeholders; the first edit writes a real bag.
+ *
+ * @internal
+ */
+export declare function LightingPanel({ session }: {
+    session: EditorSession;
+}): import("react").JSX.Element;

package/dist/LightingPanel.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+import { SliderRow } from "./chromeFields.js";
+import { BORDER, CONTROL, CONTROL_ACTIVE, FOCUS_RING, INPUT_CLS, MICRO_LABEL, PANEL_BG } from "./shell/theme.js";
+const PRESETS = [
+    { id: "day", label: "Day", hint: "Clear daylight sky" },
+    { id: "dusk", label: "Dusk", hint: "Warm horizon, cooler zenith" },
+    { id: "night", label: "Night", hint: "Low sun, dark dome" },
+];
+/** Engine-aligned defaults shown when the document has no environment bag yet. */
+const DISPLAY_DEFAULTS = {
+    preset: "day",
+    timeOfDay: false,
+    sunIntensity: 1,
+    ambientIntensity: 0.45,
+    fogNear: 80,
+    fogFar: 400,
+    fogColor: "",
+    horizonColor: "",
+    zenithColor: "",
+};
+function readDisplay(env) {
+    return {
+        preset: env?.preset ?? DISPLAY_DEFAULTS.preset,
+        timeOfDay: env?.timeOfDay ?? DISPLAY_DEFAULTS.timeOfDay,
+        sunIntensity: env?.sunIntensity ?? DISPLAY_DEFAULTS.sunIntensity,
+        ambientIntensity: env?.ambientIntensity ?? DISPLAY_DEFAULTS.ambientIntensity,
+        fogNear: env?.fog?.near ?? DISPLAY_DEFAULTS.fogNear,
+        fogFar: env?.fog?.far ?? DISPLAY_DEFAULTS.fogFar,
+        fogColor: env?.fog?.color ?? DISPLAY_DEFAULTS.fogColor,
+        horizonColor: env?.horizonColor ?? DISPLAY_DEFAULTS.horizonColor,
+        zenithColor: env?.zenithColor ?? DISPLAY_DEFAULTS.zenithColor,
+    };
+}
+/**
+ * Lighting workspace panel — edits `document.environment` (sky preset, time-of-day, intensities,
+ * fog, optional horizon/zenith colors) through the session undo stack. No fabricated runtime data:
+ * empty document shows defaults as display placeholders; the first edit writes a real bag.
+ *
+ * @internal
+ */
+export function LightingPanel({ session }) {
+    const state = useSyncExternalStore(session.subscribe, session.getState, session.getState);
+    const env = state.document.environment;
+    const display = readDisplay(env);
+    const authored = env !== undefined;
+    const commit = (next, coalesce) => {
+        session.dispatch({ type: "setEnvironment", environment: next }, coalesce === undefined ? undefined : { coalesce });
+    };
+    const patch = (partial, coalesce) => {
+        const base = {
+            ...(env ?? {}),
+            ...partial,
+        };
+        // Keep fog merged so scrubbing near/far doesn't drop color.
+        if (partial.fog !== undefined || env?.fog !== undefined) {
+            base.fog = { ...(env?.fog ?? {}), ...(partial.fog ?? {}) };
+            if (Object.keys(base.fog).length === 0)
+                delete base.fog;
+        }
+        commit(base, coalesce);
+    };
+    return (_jsxs("div", { className: `pointer-events-auto absolute left-2.5 top-2 z-30 flex w-72 flex-col gap-2 rounded-[8px] border ${BORDER} ${PANEL_BG} p-2.5 shadow-xl shadow-black/40`, children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[12px] font-medium text-neutral-100", children: "Lighting" }), _jsx("div", { className: "text-[10px] text-neutral-500", children: authored ? "Scene document environment" : "Defaults shown — first edit authors the bag" })] }), authored ? (_jsx("button", { type: "button", className: `${CONTROL} px-2 py-1 text-[10px]`, title: "Clear authored environment so world.ts fallbacks apply", onClick: () => commit(undefined), children: "Clear" })) : null] }), _jsxs("section", { className: "space-y-1.5", children: [_jsx("span", { className: MICRO_LABEL, children: "Sky preset" }), _jsx("div", { className: "grid grid-cols-3 gap-1", children: PRESETS.map((entry) => (_jsx("button", { type: "button", title: entry.hint, className: `rounded-[5px] px-1.5 py-1 text-[11px] transition-colors ${FOCUS_RING} ${display.preset === entry.id && (authored || entry.id === DISPLAY_DEFAULTS.preset)
+                                ? CONTROL_ACTIVE
+                                : CONTROL}`, onClick: () => patch({ preset: entry.id }, "env:preset"), children: entry.label }, entry.id))) }), _jsxs("label", { className: "flex items-center gap-1.5 text-[11px] text-neutral-400", children: [_jsx("input", { type: "checkbox", className: "accent-cyan-400", checked: display.timeOfDay, onChange: (event) => patch({ timeOfDay: event.target.checked }, "env:tod") }), "Drive from time of day"] })] }), _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) => {
+                                    const color = event.target.value.trim();
+                                    const fog = { ...(env?.fog ?? {}) };
+                                    if (color.length === 0)
+                                        delete fog.color;
+                                    else
+                                        fog.color = color;
+                                    const next = { ...(env ?? {}) };
+                                    if (Object.keys(fog).length === 0)
+                                        delete next.fog;
+                                    else
+                                        next.fog = fog;
+                                    commit(Object.keys(next).length === 0 ? undefined : next, "env:fogColor");
+                                } })] })] }), _jsxs("section", { className: "space-y-1.5 border-t border-white/[0.05] pt-2", children: [_jsx("span", { className: MICRO_LABEL, children: "Sky colors (optional)" }), _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: "horizon" }), _jsx("input", { type: "text", className: `w-36 px-2 py-1 ${INPUT_CLS}`, placeholder: "#87ceeb", value: display.horizonColor, onChange: (event) => {
+                                    const horizonColor = event.target.value.trim();
+                                    if (horizonColor.length === 0) {
+                                        const next = { ...(env ?? {}) };
+                                        delete next.horizonColor;
+                                        commit(Object.keys(next).length === 0 ? undefined : next, "env:horizon");
+                                    }
+                                    else {
+                                        patch({ horizonColor }, "env:horizon");
+                                    }
+                                } })] }), _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: "zenith" }), _jsx("input", { type: "text", className: `w-36 px-2 py-1 ${INPUT_CLS}`, placeholder: "#1e3a5f", value: display.zenithColor, onChange: (event) => {
+                                    const zenithColor = event.target.value.trim();
+                                    if (zenithColor.length === 0) {
+                                        const next = { ...(env ?? {}) };
+                                        delete next.zenithColor;
+                                        commit(Object.keys(next).length === 0 ? undefined : next, "env:zenith");
+                                    }
+                                    else {
+                                        patch({ zenithColor }, "env:zenith");
+                                    }
+                                } })] })] })] }));
+}

package/dist/MaterialsWorkspacePanel.d.ts

@@ -0,0 +1,12 @@
+import type { EditorSession } from "@jgengine/core/editor/index";
+import type { EditorHostApi } from "./session.js";
+/**
+ * Materials workspace home panel: browse every placeable's real `meta.materialId` from the live
+ * document, filter by assignment/palette id/text, select into the hierarchy, and assign/clear via
+ * the existing `assign_material` / `batch_set_properties` RPC seams. No fake thumbnails.
+ * @internal — mounted by `EditorChrome` when the materials workspace is active.
+ */
+export declare function MaterialsWorkspacePanel({ session, api, }: {
+    session: EditorSession;
+    api: EditorHostApi;
+}): import("react").JSX.Element;

package/dist/MaterialsWorkspacePanel.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { clearMaterialAssignmentPatch } from "./authoredComponentMeta.js";
+import { filterMaterialAssignments, listMaterialAssignments, summarizeMaterialUsage, } from "./materialAssignments.js";
+import { TERRAIN_MATERIALS } from "./uiStore.js";
+import { FOCUS_RING, INPUT_CLS, MICRO_LABEL } from "./shell/theme.js";
+import { EmptyState } from "./shell/ui.js";
+import { shallowArrayEqual, useStoreSelector } from "./useStoreSelector.js";
+const CHIP = `rounded-[5px] border px-1.5 py-0.5 text-[10px] transition-colors ${FOCUS_RING}`;
+const CHIP_IDLE = "border-white/[0.08] bg-[#191d24] text-neutral-400 hover:bg-[#1f242d] hover:text-neutral-200";
+const CHIP_ACTIVE = "border-cyan-400/40 bg-cyan-500/15 text-cyan-100";
+function materialColor(materialId) {
+    if (materialId === null)
+        return "transparent";
+    return TERRAIN_MATERIALS.find((material) => material.id === materialId)?.color ?? "#64748b";
+}
+function materialLabel(materialId) {
+    return TERRAIN_MATERIALS.find((material) => material.id === materialId)?.label ?? materialId;
+}
+/**
+ * Materials workspace home panel: browse every placeable's real `meta.materialId` from the live
+ * document, filter by assignment/palette id/text, select into the hierarchy, and assign/clear via
+ * the existing `assign_material` / `batch_set_properties` RPC seams. No fake thumbnails.
+ * @internal — mounted by `EditorChrome` when the materials workspace is active.
+ */
+export function MaterialsWorkspacePanel({ session, api, }) {
+    const document = useStoreSelector(session, (state) => state.document);
+    const selection = useStoreSelector(session, (state) => state.selection, shallowArrayEqual);
+    const [query, setQuery] = useState("");
+    const [filter, setFilter] = useState("all");
+    const rows = useMemo(() => listMaterialAssignments(document), [document]);
+    const filtered = useMemo(() => filterMaterialAssignments(rows, query, filter), [rows, query, filter]);
+    const usage = useMemo(() => summarizeMaterialUsage(rows), [rows]);
+    const assignedCount = rows.filter((row) => row.materialId !== null).length;
+    const selectRow = (id, additive) => {
+        if (additive) {
+            const next = selection.includes(id) ? selection.filter((entry) => entry !== id) : [...selection, id];
+            api.handle({ method: "select", ids: next });
+            return;
+        }
+        api.handle({ method: "select", ids: [id] });
+    };
+    const assignTo = (ids, materialId) => {
+        if (ids.length === 0)
+            return;
+        api.handle({ method: "assign_material", ids: [...ids], materialId });
+    };
+    const clearFrom = (ids) => {
+        if (ids.length === 0)
+            return;
+        api.handle({
+            method: "batch_set_properties",
+            ids: [...ids],
+            meta: clearMaterialAssignmentPatch(),
+        });
+    };
+    const filterActive = (candidate) => {
+        if (typeof filter === "object" && typeof candidate === "object")
+            return filter.materialId === candidate.materialId;
+        return filter === candidate;
+    };
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { className: "space-y-2 border-b border-white/[0.06] p-2", children: [_jsx("div", { className: MICRO_LABEL, children: "Materials" }), _jsx("p", { className: "text-[10px] leading-snug text-neutral-500", children: "Document material assignments \u2014 select a row to inspect, assign from the palette, or clear." }), _jsx("input", { type: "search", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Filter objects\u2026", "aria-label": "Filter material assignments", className: `h-7 w-full px-2 ${INPUT_CLS}` }), _jsx("div", { className: "flex flex-wrap gap-1", role: "group", "aria-label": "Assignment filters", children: [
+                            { id: "all", label: `All (${rows.length})` },
+                            { id: "assigned", label: `Assigned (${assignedCount})` },
+                            { id: "unassigned", label: `None (${rows.length - assignedCount})` },
+                        ].map((entry) => (_jsx("button", { type: "button", onClick: () => setFilter(entry.id), className: `${CHIP} ${filterActive(entry.id) ? CHIP_ACTIVE : CHIP_IDLE}`, children: entry.label }, entry.id))) }), usage.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-1", role: "group", "aria-label": "Materials in use", children: usage.map((entry) => (_jsxs("button", { type: "button", onClick: () => setFilter({ materialId: entry.materialId }), title: `Show objects using ${entry.materialId}`, className: `${CHIP} flex items-center gap-1 ${filterActive({ materialId: entry.materialId }) ? CHIP_ACTIVE : CHIP_IDLE}`, children: [_jsx("span", { className: "h-2.5 w-2.5 rounded-full ring-1 ring-inset ring-white/20", style: { backgroundColor: materialColor(entry.materialId) } }), materialLabel(entry.materialId), _jsx("span", { className: "tabular-nums text-neutral-600", children: entry.count })] }, entry.materialId))) })) : null, selection.length > 0 ? (_jsxs("div", { className: "space-y-1.5 rounded-[6px] border border-white/[0.07] bg-white/[0.02] p-1.5", children: [_jsxs("div", { className: "text-[10px] text-neutral-500", children: ["Selection (", selection.length, ") \u2014 assign or clear"] }), _jsxs("div", { className: "flex flex-wrap gap-1", children: [TERRAIN_MATERIALS.map((material) => (_jsxs("button", { type: "button", title: `Assign ${material.label} to selection`, onClick: () => assignTo(selection, material.id), className: `${CHIP} flex items-center gap-1 ${CHIP_IDLE}`, children: [_jsx("span", { className: "h-2.5 w-2.5 rounded-full ring-1 ring-inset ring-white/20", style: { backgroundColor: material.color } }), material.label] }, material.id))), _jsx("button", { type: "button", onClick: () => clearFrom(selection), className: `${CHIP} border-rose-400/25 bg-rose-500/10 text-rose-200 hover:bg-rose-500/20`, children: "Clear" })] })] })) : null] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-1.5", role: "list", "aria-label": "Material assignments", children: filtered.length === 0 ? (_jsx(EmptyState, { icon: "sphere", title: rows.length === 0 ? "No placeables" : "No matches", description: rows.length === 0
+                        ? "Add markers, volumes, or paths to the scene, then assign materials from the palette or content browser."
+                        : "Nothing matches this filter. Try All, or clear the search." })) : (filtered.map((row) => (_jsx(MaterialRow, { row: row, selected: selection.includes(row.id), onSelect: selectRow, onAssign: (materialId) => assignTo([row.id], materialId), onClear: () => clearFrom([row.id]) }, row.id)))) }), _jsx("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: _jsxs("span", { className: "tabular-nums", children: [filtered.length, " of ", rows.length, " objects \u00B7 ", assignedCount, " assigned"] }) })] }));
+}
+function MaterialRow({ row, selected, onSelect, onAssign, onClear, }) {
+    return (_jsxs("div", { role: "listitem", className: `group mb-0.5 flex items-center gap-1.5 rounded-[5px] px-1.5 py-1 transition-colors ${selected ? "bg-cyan-500/10 ring-1 ring-inset ring-cyan-400/30" : "hover:bg-white/[0.04]"}`, children: [_jsx("span", { className: "h-3 w-3 shrink-0 rounded-full ring-1 ring-inset ring-white/20", style: {
+                    backgroundColor: materialColor(row.materialId),
+                    opacity: row.materialId === null ? 0.35 : 1,
+                    backgroundImage: row.materialId === null
+                        ? "linear-gradient(45deg, #333 25%, transparent 25%, transparent 75%, #333 75%), linear-gradient(45deg, #333 25%, transparent 25%, transparent 75%, #333 75%)"
+                        : undefined,
+                    backgroundSize: row.materialId === null ? "4px 4px" : undefined,
+                    backgroundPosition: row.materialId === null ? "0 0, 2px 2px" : undefined,
+                }, title: row.materialId ?? "no material" }), _jsxs("button", { type: "button", onClick: (event) => onSelect(row.id, event.shiftKey || event.metaKey || event.ctrlKey), className: `min-w-0 flex-1 truncate text-left ${FOCUS_RING}`, title: `${row.label} (${row.id}) — click to select`, children: [_jsx("span", { className: "block truncate text-[11px] text-neutral-200", children: row.label }), _jsxs("span", { className: "block truncate text-[9px] text-neutral-600", children: [row.kind, " \u00B7 ", row.objectKind, row.materialId !== null ? ` · ${row.materialId}` : " · none"] })] }), _jsxs("select", { "aria-label": `Assign material to ${row.label}`, className: `h-6 max-w-[5.5rem] shrink-0 px-1 text-[10px] opacity-0 transition-opacity focus:opacity-100 group-hover:opacity-100 ${INPUT_CLS}`, value: row.materialId ?? "", onChange: (event) => {
+                    const value = event.target.value;
+                    if (value.length === 0)
+                        onClear();
+                    else
+                        onAssign(value);
+                }, onClick: (event) => event.stopPropagation(), children: [_jsx("option", { value: "", children: "none" }), TERRAIN_MATERIALS.map((material) => (_jsx("option", { value: material.id, children: material.label }, material.id)))] })] }));
+}

package/dist/ParentPickerMenu.d.ts

@@ -0,0 +1,13 @@
+import type { ParentCandidate } from "./parentCandidates.js";
+/**
+ * Searchable parent-target menu for hierarchy / viewport "Parent to…".
+ * Parent owns candidate list (cycle-safe) and the set_parent write.
+ * @internal
+ */
+export declare function ParentPickerMenu({ x, y, candidates, onPick, onClose, }: {
+    x: number;
+    y: number;
+    candidates: readonly ParentCandidate[];
+    onPick: (parentId: string | null) => void;
+    onClose: () => void;
+}): import("react").JSX.Element;