worldorbit 2.5.16 → 2.5.17

package/packages/editor/dist/editor.js

@@ -86,6 +86,34 @@ const FIELD_HELP = {
         description: "Rotates the saved camera angle in degrees.",
         references: ["90deg = quarter turn", "180deg = flip"],
     },
+    "viewpoint-events": {
+        description: "Lists event IDs that this viewpoint should feature in its detail panel.",
+        references: ["solar-eclipse-naar", "transit-window conjunction"],
+    },
+    "event-kind": {
+        description: "Short semantic event type for tooling and viewer overlays.",
+        references: ["solar-eclipse", "lunar-eclipse", "transit"],
+    },
+    "event-target": {
+        description: "Primary object this event is centered on.",
+        references: ["Naar", "Seyra"],
+    },
+    "event-participants": {
+        description: "Objects that participate in the event snapshot or description.",
+        references: ["Iyath Naar Seyra", "Naar Seyra Orun"],
+    },
+    "event-timing": {
+        description: "Free-text timing note for the event.",
+        references: ['"Every late bloom season"', '"At local midyear"'],
+    },
+    "event-visibility": {
+        description: "Notes where or how the event is visible.",
+        references: ['"Visible from Naar"', '"Southern hemisphere only"'],
+    },
+    "event-viewpoints": {
+        description: "Viewpoint IDs that should list this event prominently.",
+        references: ["naar-system", "overview inner-system"],
+    },
     "placement-target": {
         description: "Names the body or reference this object is attached to.",
         references: ["orbit Primary", "surface Homeworld", "at Naar:L4"],
@@ -206,12 +234,25 @@ export function createWorldOrbitEditor(container, options = {}) {
         minimap: true,
         tooltipMode: "hover",
         onSelectionChange(selectedObject) {
+            const activeEventId = selection ? selectionEventId(selection) : null;
             if (ignoreViewerSelection || !selectedObject) {
-                if (!ignoreViewerSelection && selection?.kind === "object") {
-                    setSelection(null, false, true);
+                if (!ignoreViewerSelection) {
+                    if (selection?.kind === "event-pose" && selection.id) {
+                        setSelection({ kind: "event", id: selection.id }, false, true);
+                    }
+                    else if (selection?.kind === "object") {
+                        setSelection(activeEventId ? { kind: "event", id: activeEventId } : null, false, true);
+                    }
+                    else if (selection?.kind === "event" && selection.id) {
+                        setSelection({ kind: "event", id: selection.id }, false, true);
+                    }
                 }
                 return;
             }
+            if (activeEventId && findEventPose(atlasDocument, activeEventId, selectedObject.objectId)) {
+                setSelection({ kind: "event-pose", id: activeEventId, key: selectedObject.objectId }, false, true);
+                return;
+            }
             setSelection({ kind: "object", id: selectedObject.objectId }, false, true);
         },
         onViewChange() {
@@ -221,6 +262,7 @@ export function createWorldOrbitEditor(container, options = {}) {
     toolbar.addEventListener("click", handleToolbarClick);
     outline.addEventListener("click", handleOutlineClick);
     overlay.addEventListener("pointerdown", handleOverlayPointerDown);
+    inspector?.addEventListener("click", handleInspectorClick);
     inspector?.addEventListener("input", handleInspectorInput);
     inspector?.addEventListener("change", handleInspectorChange);
     sourcePane?.addEventListener("input", handleSourceInput);
@@ -295,6 +337,28 @@ export function createWorldOrbitEditor(container, options = {}) {
             replaceAtlasDocument(nextDocument, true, { kind: "object", id });
             return id;
         },
+        addEvent() {
+            const id = createUniqueId("event", atlasDocument.events.map((event) => event.id));
+            const created = {
+                id,
+                kind: "",
+                label: humanizeIdentifier(id),
+                summary: null,
+                targetObjectId: null,
+                participantObjectIds: [],
+                timing: null,
+                visibility: null,
+                tags: [],
+                color: null,
+                hidden: false,
+                positions: [],
+            };
+            const nextDocument = cloneAtlasDocument(atlasDocument);
+            nextDocument.events.push(created);
+            nextDocument.events.sort(compareEvents);
+            replaceAtlasDocument(nextDocument, true, { kind: "event", id });
+            return id;
+        },
         addViewpoint() {
             const id = createUniqueId("viewpoint", atlasDocument.system?.viewpoints.map((viewpoint) => viewpoint.id) ?? []);
             const created = {
@@ -303,6 +367,7 @@ export function createWorldOrbitEditor(container, options = {}) {
                 summary: "",
                 focusObjectId: null,
                 selectedObjectId: null,
+                events: [],
                 projection: atlasDocument.system?.defaults.view ?? "topdown",
                 preset: atlasDocument.system?.defaults.preset ?? null,
                 zoom: null,
@@ -363,6 +428,7 @@ export function createWorldOrbitEditor(container, options = {}) {
             toolbar.removeEventListener("click", handleToolbarClick);
             outline.removeEventListener("click", handleOutlineClick);
             overlay.removeEventListener("pointerdown", handleOverlayPointerDown);
+            inspector?.removeEventListener("click", handleInspectorClick);
             inspector?.removeEventListener("input", handleInspectorInput);
             inspector?.removeEventListener("change", handleInspectorChange);
             sourcePane?.removeEventListener("input", handleSourceInput);
@@ -408,7 +474,7 @@ export function createWorldOrbitEditor(container, options = {}) {
     }
     function getCurrentSourceForExport() {
         if (dragState?.changed) {
-            return formatDocument(atlasDocument, { schema: "2.0" });
+            return formatAtlasSource(atlasDocument);
         }
         return canonicalSource;
     }
@@ -447,7 +513,7 @@ export function createWorldOrbitEditor(container, options = {}) {
         }
         clearSourceInputTimer();
         atlasDocument = cloneAtlasDocument(nextDocument);
-        canonicalSource = formatDocument(atlasDocument, { schema: "2.0" });
+        canonicalSource = formatAtlasSource(atlasDocument);
         if (!preserveSourceText) {
             sourceText = canonicalSource;
         }
@@ -488,10 +554,10 @@ export function createWorldOrbitEditor(container, options = {}) {
         if (commitHistory) {
             history.push(createHistoryEntry());
             future.length = 0;
-            sourceText = formatDocument(nextDocument, { schema: "2.0" });
+            sourceText = formatAtlasSource(nextDocument);
         }
         atlasDocument = cloneAtlasDocument(nextDocument);
-        canonicalSource = formatDocument(atlasDocument, { schema: "2.0" });
+        canonicalSource = formatAtlasSource(atlasDocument);
         diagnostics = mergeDiagnostics(loadedDiagnostics, collectDocumentDiagnostics(atlasDocument));
         selection = normalizeSelection(selection);
         syncViewer({
@@ -510,11 +576,15 @@ export function createWorldOrbitEditor(container, options = {}) {
         const previousState = viewer.getState();
         const currentRenderOptions = viewer.getRenderOptions();
         const nextPreset = atlasDocument.system?.defaults.preset ?? "atlas-card";
+        const nextActiveEventId = selection ? selectionEventId(selection) : null;
         ignoreViewerSelection = true;
-        if (currentRenderOptions.preset !== nextPreset || currentRenderOptions.projection !== "document") {
+        if (currentRenderOptions.preset !== nextPreset ||
+            currentRenderOptions.projection !== "document" ||
+            (currentRenderOptions.activeEventId ?? null) !== nextActiveEventId) {
             viewer.setRenderOptions({
                 preset: nextPreset,
                 projection: "document",
+                activeEventId: nextActiveEventId,
             });
         }
         viewer.setDocument(materializeAtlasDocument(atlasDocument));
@@ -524,12 +594,19 @@ export function createWorldOrbitEditor(container, options = {}) {
         else if (options.preserveCamera !== false) {
             viewer.setState({
                 ...previousState,
-                selectedObjectId: selection?.kind === "object" ? selection.id ?? null : null,
+                selectedObjectId: selection?.kind === "object"
+                    ? selection.id ?? null
+                    : selection?.kind === "event-pose"
+                        ? selection.key ?? null
+                        : null,
             });
         }
         else if (selection?.kind === "object" && selection.id) {
             viewer.focusObject(selection.id);
         }
+        else if (selection?.kind === "event-pose" && selection.key) {
+            viewer.focusObject(selection.key);
+        }
         ignoreViewerSelection = false;
     }
     function emitSnapshot() {
@@ -547,9 +624,13 @@ export function createWorldOrbitEditor(container, options = {}) {
         selection = normalizeSelection(nextSelection);
         if (syncViewerSelection) {
             ignoreViewerSelection = true;
+            viewer.setRenderOptions({ activeEventId: selection ? selectionEventId(selection) : null });
             if (selection?.kind === "object" && selection.id) {
                 viewer.focusObject(selection.id);
             }
+            else if (selection?.kind === "event-pose" && selection.key) {
+                viewer.focusObject(selection.key);
+            }
             else if (selection?.kind === "viewpoint" && selection.id) {
                 viewer.goToViewpoint(selection.id);
             }
@@ -604,6 +685,7 @@ export function createWorldOrbitEditor(container, options = {}) {
           ${OBJECT_TYPES.map((type) => `<option value="${escapeHtml(type)}"${type === objectType ? " selected" : ""}>${escapeHtml(humanizeIdentifier(type))}</option>`).join("")}
         </select>
         <button type="button" data-editor-action="add-object">Add object</button>
+        <button type="button" data-editor-action="add-event">Add event</button>
         <button type="button" data-editor-action="add-viewpoint">Add viewpoint</button>
         <button type="button" data-editor-action="add-annotation">Add annotation</button>
         <button type="button" data-editor-action="add-metadata">Add metadata</button>
@@ -650,6 +732,14 @@ export function createWorldOrbitEditor(container, options = {}) {
                 .join("")
             : `<p class="wo-editor-empty">No annotations yet.</p>`}
       </div>
+      <div class="wo-editor-outline-section">
+        <h3>Events</h3>
+        ${atlasDocument.events.length > 0
+            ? atlasDocument.events
+                .map((eventEntry) => renderEventOutlineItems(eventEntry, activeKey, diagnosticBuckets))
+                .join("")
+            : `<p class="wo-editor-empty">No events yet.</p>`}
+      </div>
       <div class="wo-editor-outline-section">
         <h3>Objects</h3>
         ${atlasDocument.objects.length > 0
@@ -701,6 +791,7 @@ export function createWorldOrbitEditor(container, options = {}) {
             selection: selection ? { path: { ...selection } } : null,
             system: atlasDocument.system,
             viewpoints: atlasDocument.system?.viewpoints ?? [],
+            events: atlasDocument.events,
             objects: atlasDocument.objects,
         };
         if (!selection) {
@@ -729,6 +820,17 @@ export function createWorldOrbitEditor(container, options = {}) {
                 applyInspectorSectionState(inspector, inspectorSectionState);
                 decorateInspectorDiagnostics(selection, diagnostics);
                 return;
+            case "event":
+                inspector.innerHTML = diagnosticSummary + renderEventInspector(formState, selection.id ?? "");
+                applyInspectorSectionState(inspector, inspectorSectionState);
+                decorateInspectorDiagnostics(selection, diagnostics);
+                return;
+            case "event-pose":
+                inspector.innerHTML =
+                    diagnosticSummary + renderEventPoseInspector(formState, selection.id ?? "", selection.key ?? "");
+                applyInspectorSectionState(inspector, inspectorSectionState);
+                decorateInspectorDiagnostics(selection, diagnostics);
+                return;
             case "annotation":
                 inspector.innerHTML = diagnosticSummary + renderAnnotationInspector(formState, selection.id ?? "");
                 applyInspectorSectionState(inspector, inspectorSectionState);
@@ -761,10 +863,15 @@ export function createWorldOrbitEditor(container, options = {}) {
             return;
         }
         overlay.innerHTML = "";
-        if (selection?.kind !== "object" || !selection.id) {
+        const selectedObjectId = selection?.kind === "object"
+            ? selection.id ?? null
+            : selection?.kind === "event-pose"
+                ? selection.key ?? null
+                : null;
+        if (!selectedObjectId) {
             return;
         }
-        const details = viewer.getObjectDetails(selection.id);
+        const details = viewer.getObjectDetails(selectedObjectId);
         if (!details) {
             return;
         }
@@ -883,6 +990,9 @@ export function createWorldOrbitEditor(container, options = {}) {
             case "add-viewpoint":
                 api.addViewpoint();
                 return;
+            case "add-event":
+                api.addEvent();
+                return;
             case "add-annotation":
                 api.addAnnotation();
                 return;
@@ -917,6 +1027,35 @@ export function createWorldOrbitEditor(container, options = {}) {
             key: button.dataset.pathKey || undefined,
         }, true, true);
     }
+    function handleInspectorClick(event) {
+        const pathButton = event.target?.closest("[data-path-kind]");
+        if (pathButton) {
+            setSelection({
+                kind: pathButton.dataset.pathKind,
+                id: pathButton.dataset.pathId || undefined,
+                key: pathButton.dataset.pathKey || undefined,
+            }, true, true);
+            return;
+        }
+        const actionButton = event.target?.closest("[data-editor-action]");
+        if (!actionButton) {
+            return;
+        }
+        if (actionButton.dataset.editorAction === "add-event-pose") {
+            const eventId = actionButton.dataset.editorEventId ||
+                (selection?.kind === "event" || selection?.kind === "event-pose" ? selection.id ?? "" : "");
+            if (!eventId) {
+                return;
+            }
+            const nextDocument = addEventPose(atlasDocument, eventId);
+            const createdEvent = nextDocument.events.find((entry) => entry.id === eventId);
+            const createdPose = createdEvent?.positions.at(-1) ?? createdEvent?.positions[0];
+            replaceAtlasDocument(nextDocument, true, createdPose
+                ? { kind: "event-pose", id: eventId, key: createdPose.objectId }
+                : { kind: "event", id: eventId });
+            return;
+        }
+    }
     function handleInspectorInput() {
         applyInspectorState(false);
     }
@@ -940,6 +1079,12 @@ export function createWorldOrbitEditor(container, options = {}) {
             case "viewpoint":
                 replaceAtlasDocument(buildViewpointDocumentFromInspector(selection.id ?? ""), commitHistory, selection, false);
                 return;
+            case "event":
+                replaceAtlasDocument(buildEventDocumentFromInspector(selection.id ?? ""), commitHistory, selection, false);
+                return;
+            case "event-pose":
+                replaceAtlasDocument(buildEventPoseDocumentFromInspector(selection.id ?? "", selection.key ?? ""), commitHistory, selection, false);
+                return;
             case "annotation":
                 replaceAtlasDocument(buildAnnotationDocumentFromInspector(selection.id ?? ""), commitHistory, selection, false);
                 return;
@@ -1010,6 +1155,7 @@ export function createWorldOrbitEditor(container, options = {}) {
             kind,
             objectId,
             pointerId: event.pointerId,
+            path: selection ? { ...selection } : { kind: "object", id: objectId },
             startedFrom: createHistoryEntry(),
             changed: false,
             orbitRadiusContext: kind === "orbit-radius" && details
@@ -1022,8 +1168,8 @@ export function createWorldOrbitEditor(container, options = {}) {
     function handleWindowPointerMove(event) {
         if (!dragState ||
             dragState.pointerId !== event.pointerId ||
-            selection?.kind !== "object" ||
-            selection.id !== dragState.objectId) {
+            !selection ||
+            selectionKey(selection) !== selectionKey(dragState.path)) {
             return;
         }
         const details = viewer.getObjectDetails(dragState.objectId);
@@ -1035,27 +1181,27 @@ export function createWorldOrbitEditor(container, options = {}) {
         switch (dragState.kind) {
             case "orbit-phase":
                 if (details.object.placement?.mode === "orbit" && details.orbit) {
-                    nextDocument = updateOrbitPhase(atlasDocument, dragState.objectId, details, pointer);
+                    nextDocument = updateOrbitPhase(atlasDocument, dragState.path, dragState.objectId, details, pointer);
                 }
                 break;
             case "orbit-radius":
                 if (details.object.placement?.mode === "orbit" && details.orbit) {
-                    nextDocument = updateOrbitRadius(atlasDocument, dragState.objectId, details, pointer, dragState.orbitRadiusContext ?? null);
+                    nextDocument = updateOrbitRadius(atlasDocument, dragState.path, dragState.objectId, details, pointer, dragState.orbitRadiusContext ?? null);
                 }
                 break;
             case "at-reference":
                 if (details.object.placement?.mode === "at") {
-                    nextDocument = updateAtReference(atlasDocument, dragState.objectId, viewer.getScene(), pointer);
+                    nextDocument = updateAtReference(atlasDocument, dragState.path, dragState.objectId, viewer.getScene(), pointer);
                 }
                 break;
             case "surface-target":
                 if (details.object.placement?.mode === "surface") {
-                    nextDocument = updateSurfaceTarget(atlasDocument, dragState.objectId, viewer.getScene(), pointer);
+                    nextDocument = updateSurfaceTarget(atlasDocument, dragState.path, dragState.objectId, viewer.getScene(), pointer);
                 }
                 break;
             case "free-distance":
                 if (details.object.placement?.mode === "free") {
-                    nextDocument = updateFreeDistance(atlasDocument, dragState.objectId, viewer.getScene(), details, pointer);
+                    nextDocument = updateFreeDistance(atlasDocument, dragState.path, dragState.objectId, viewer.getScene(), details, pointer);
                 }
                 break;
         }
@@ -1087,7 +1233,7 @@ export function createWorldOrbitEditor(container, options = {}) {
         }
         history.push(dragState.startedFrom);
         future.length = 0;
-        canonicalSource = formatDocument(atlasDocument, { schema: "2.0" });
+        canonicalSource = formatAtlasSource(atlasDocument);
         sourceText = canonicalSource;
         dragState = null;
         renderAll();
@@ -1194,10 +1340,12 @@ export function createWorldOrbitEditor(container, options = {}) {
                 guides: readCheckbox(form, "layer-guides"),
                 "orbits-back": readCheckbox(form, "layer-orbits-back"),
                 "orbits-front": readCheckbox(form, "layer-orbits-front"),
+                events: readCheckbox(form, "layer-events"),
                 objects: readCheckbox(form, "layer-objects"),
                 labels: readCheckbox(form, "layer-labels"),
                 metadata: readCheckbox(form, "layer-metadata"),
             },
+            events: splitTokens(readOptionalTextInput(form, "viewpoint-events")),
             filter: {
                 query: readOptionalTextInput(form, "filter-query"),
                 objectTypes: parseObjectTypes(readOptionalTextInput(form, "filter-object-types")),
@@ -1214,6 +1362,73 @@ export function createWorldOrbitEditor(container, options = {}) {
         }
         return nextDocument;
     }
+    function buildEventDocumentFromInspector(currentId) {
+        const nextDocument = cloneAtlasDocument(atlasDocument);
+        const form = inspector?.querySelector("form[data-editor-form='event']");
+        const current = nextDocument.events.find((entry) => entry.id === currentId);
+        if (!form || !current) {
+            return nextDocument;
+        }
+        const nextId = readTextInput(form, "event-id") || current.id;
+        const replacement = {
+            ...current,
+            id: nextId,
+            kind: readTextInput(form, "event-kind"),
+            label: readTextInput(form, "event-label") || current.label,
+            summary: readOptionalTextInput(form, "event-summary"),
+            targetObjectId: readOptionalTextInput(form, "event-target"),
+            participantObjectIds: splitTokens(readOptionalTextInput(form, "event-participants")),
+            timing: readOptionalTextInput(form, "event-timing"),
+            visibility: readOptionalTextInput(form, "event-visibility"),
+            tags: splitTokens(readOptionalTextInput(form, "event-tags")),
+            color: readOptionalTextInput(form, "event-color"),
+            hidden: readCheckbox(form, "event-hidden"),
+        };
+        nextDocument.events = nextDocument.events
+            .filter((entry) => entry.id !== current.id)
+            .concat(replacement)
+            .sort(compareEvents);
+        syncEventViewpointReferences(nextDocument, current.id, replacement.id, splitTokens(readOptionalTextInput(form, "event-viewpoints")));
+        if (current.id !== replacement.id) {
+            selection = { kind: "event", id: replacement.id };
+        }
+        return nextDocument;
+    }
+    function buildEventPoseDocumentFromInspector(eventId, objectId) {
+        const nextDocument = cloneAtlasDocument(atlasDocument);
+        const form = inspector?.querySelector("form[data-editor-form='event-pose']");
+        const eventEntry = nextDocument.events.find((entry) => entry.id === eventId);
+        const currentPose = eventEntry?.positions.find((entry) => entry.objectId === objectId);
+        if (!form || !eventEntry || !currentPose) {
+            return nextDocument;
+        }
+        const nextObjectId = readTextInput(form, "pose-object-id") || currentPose.objectId;
+        const replacement = {
+            objectId: nextObjectId,
+            placement: buildPlacementFromPoseForm(form, currentPose),
+        };
+        const inner = parseOptionalUnit(readOptionalTextInput(form, "prop-inner"));
+        const outer = parseOptionalUnit(readOptionalTextInput(form, "prop-outer"));
+        if (inner) {
+            replacement.inner = inner;
+        }
+        if (outer) {
+            replacement.outer = outer;
+        }
+        eventEntry.positions = eventEntry.positions
+            .filter((entry) => entry.objectId !== currentPose.objectId)
+            .concat(replacement)
+            .sort(compareEventPoses);
+        if (eventEntry.targetObjectId !== replacement.objectId &&
+            !eventEntry.participantObjectIds.includes(replacement.objectId)) {
+            eventEntry.participantObjectIds.push(replacement.objectId);
+            eventEntry.participantObjectIds.sort((left, right) => left.localeCompare(right));
+        }
+        if (currentPose.objectId !== replacement.objectId) {
+            selection = { kind: "event-pose", id: eventId, key: replacement.objectId };
+        }
+        return nextDocument;
+    }
     function buildAnnotationDocumentFromInspector(currentId) {
         const nextDocument = cloneAtlasDocument(atlasDocument);
         const form = inspector?.querySelector("form[data-editor-form='annotation']");
@@ -1421,7 +1636,7 @@ function resolveInitialEditorState(options) {
         const atlasDocument = cloneAtlasDocument(options.atlasDocument);
         return {
             atlasDocument,
-            source: formatDocument(atlasDocument, { schema: "2.0" }),
+            source: formatAtlasSource(atlasDocument),
             diagnostics: collectDocumentDiagnostics(atlasDocument),
         };
     }
@@ -1431,7 +1646,7 @@ function resolveInitialEditorState(options) {
             const atlasDocument = loaded.value.atlasDocument ?? upgradeDocumentToV2(loaded.value.document);
             return {
                 atlasDocument,
-                source: formatDocument(atlasDocument, { schema: "2.0" }),
+                source: formatAtlasSource(atlasDocument),
                 diagnostics: mergeDiagnostics(resolveAtlasDiagnostics(atlasDocument, loaded.diagnostics), collectDocumentDiagnostics(atlasDocument)),
             };
         }
@@ -1439,10 +1654,13 @@ function resolveInitialEditorState(options) {
     const atlasDocument = createEmptyAtlasDocument("WorldOrbit");
     return {
         atlasDocument,
-        source: formatDocument(atlasDocument, { schema: "2.0" }),
+        source: formatAtlasSource(atlasDocument),
         diagnostics: collectDocumentDiagnostics(atlasDocument),
     };
 }
+function formatAtlasSource(document) {
+    return formatDocument(document, { schema: document.version });
+}
 function buildEditorMarkup() {
     const previewOpen = shouldPreviewSectionBeOpenByDefault();
     return `<section class="wo-editor-shell">
@@ -1563,6 +1781,17 @@ function renderOutlineButton(path, label, activeKey, diagnosticBuckets) {
         : "";
     return `<button type="button" class="wo-editor-outline-item${key === activeKey ? " is-active" : ""}" data-path-kind="${escapeHtml(path.kind)}"${path.id ? ` data-path-id="${escapeHtml(path.id)}"` : ""}${path.key ? ` data-path-key="${escapeHtml(path.key)}"` : ""}><span>${escapeHtml(label)}</span>${badge}</button>`;
 }
+function renderEventOutlineItems(eventEntry, activeKey, diagnosticBuckets) {
+    return `<div class="wo-editor-outline-group">
+    ${renderOutlineButton({ kind: "event", id: eventEntry.id }, eventEntry.label || eventEntry.id, activeKey, diagnosticBuckets)}
+    ${eventEntry.positions.length > 0
+        ? `<div class="wo-editor-outline-children">${[...eventEntry.positions]
+            .sort(compareEventPoses)
+            .map((pose) => renderOutlineButton({ kind: "event-pose", id: eventEntry.id, key: pose.objectId }, pose.objectId, activeKey, diagnosticBuckets))
+            .join("")}</div>`
+        : ""}
+  </div>`;
+}
 function renderSystemInspector(formState) {
     return `<form class="wo-editor-form" data-editor-form="system">
     <h2>System</h2>
@@ -1629,6 +1858,7 @@ function renderViewpointInspector(formState, id) {
         ${renderCheckboxField("Guides", "layer-guides", viewpoint.layers.guides !== false)}
         ${renderCheckboxField("Orbits back", "layer-orbits-back", viewpoint.layers["orbits-back"] !== false)}
         ${renderCheckboxField("Orbits front", "layer-orbits-front", viewpoint.layers["orbits-front"] !== false)}
+        ${renderCheckboxField("Events", "layer-events", viewpoint.layers.events !== false)}
         ${renderCheckboxField("Objects", "layer-objects", viewpoint.layers.objects !== false)}
         ${renderCheckboxField("Labels", "layer-labels", viewpoint.layers.labels !== false)}
         ${renderCheckboxField("Metadata", "layer-metadata", viewpoint.layers.metadata !== false)}
@@ -1636,7 +1866,83 @@ function renderViewpointInspector(formState, id) {
     ${renderInspectorSection("viewpoint", "filter", "Filter", `${renderTextField("Filter query", "filter-query", viewpoint.filter?.query ?? "")}
       ${renderTextField("Filter object types", "filter-object-types", viewpoint.filter?.objectTypes.join(" ") ?? "")}
       ${renderTextField("Filter tags", "filter-tags", viewpoint.filter?.tags.join(" ") ?? "")}
-      ${renderTextField("Filter groups", "filter-groups", viewpoint.filter?.groupIds.join(" ") ?? "")}`)}
+      ${renderTextField("Filter groups", "filter-groups", viewpoint.filter?.groupIds.join(" ") ?? "")}
+      ${renderTextField("Events", "viewpoint-events", viewpoint.events.join(" "))}`)}
+  </form>`;
+}
+function renderEventInspector(formState, id) {
+    const eventEntry = formState.events.find((entry) => entry.id === id);
+    if (!eventEntry) {
+        return `<p class="wo-editor-empty">Event not found.</p>`;
+    }
+    const linkedViewpoints = formState.viewpoints
+        .filter((viewpoint) => viewpoint.events.includes(eventEntry.id))
+        .map((viewpoint) => viewpoint.id)
+        .join(" ");
+    return `<form class="wo-editor-form" data-editor-form="event">
+    <h2>Event</h2>
+    ${renderInspectorSection("event", "basics", "Basics", `${renderTextField("ID", "event-id", eventEntry.id)}
+      ${renderTextField("Kind", "event-kind", eventEntry.kind)}
+      ${renderTextField("Label", "event-label", eventEntry.label)}
+      ${renderTextAreaField("Summary", "event-summary", eventEntry.summary ?? "")}
+      ${renderTextField("Target object", "event-target", eventEntry.targetObjectId ?? "")}
+      ${renderTextField("Participants", "event-participants", eventEntry.participantObjectIds.join(" "))}
+      ${renderTextField("Timing", "event-timing", eventEntry.timing ?? "")}
+      ${renderTextField("Visibility", "event-visibility", eventEntry.visibility ?? "")}
+      ${renderTextField("Tags", "event-tags", eventEntry.tags.join(" "))}
+      ${renderTextField("Color", "event-color", eventEntry.color ?? "")}
+      ${renderCheckboxField("Hidden", "event-hidden", eventEntry.hidden === true)}`, true)}
+    ${renderInspectorSection("event", "viewpoints", "Viewpoints", `${renderTextField("Viewpoints", "event-viewpoints", linkedViewpoints)}`)}
+    ${renderInspectorSection("event", "positions", "Positions", `${eventEntry.positions.length > 0
+        ? `<div class="wo-editor-inline-list">${eventEntry.positions
+            .map((pose) => renderOutlineButton({ kind: "event-pose", id: eventEntry.id, key: pose.objectId }, pose.objectId, null, new Map()))
+            .join("")}</div>`
+        : `<p class="wo-editor-empty">No event poses yet.</p>`}
+      <div class="wo-editor-inline-actions">
+        <button type="button" data-editor-action="add-event-pose" data-editor-event-id="${escapeHtml(eventEntry.id)}">Add pose</button>
+      </div>`)}
+  </form>`;
+}
+function renderEventPoseInspector(formState, eventId, objectId) {
+    const eventEntry = formState.events.find((entry) => entry.id === eventId);
+    const pose = eventEntry?.positions.find((entry) => entry.objectId === objectId);
+    if (!eventEntry || !pose) {
+        return `<p class="wo-editor-empty">Event pose not found.</p>`;
+    }
+    const placementMode = pose.placement?.mode ?? "";
+    const placementTarget = pose.placement?.mode === "orbit" || pose.placement?.mode === "surface" || pose.placement?.mode === "at"
+        ? pose.placement.target
+        : "";
+    const freeValue = pose.placement?.mode === "free"
+        ? pose.placement.distance
+            ? formatUnitValue(pose.placement.distance)
+            : pose.placement.descriptor ?? ""
+        : "";
+    return `<form class="wo-editor-form" data-editor-form="event-pose">
+    <h2>Event Pose</h2>
+    <p class="wo-editor-inline-note">Event <strong>${escapeHtml(eventEntry.label || eventEntry.id)}</strong></p>
+    ${renderInspectorSection("event-pose", "identity", "Identity", `${renderTextField("Object", "pose-object-id", pose.objectId)}
+      <div class="wo-editor-inline-actions">
+        <button type="button" data-path-kind="event" data-path-id="${escapeHtml(eventEntry.id)}">Select event</button>
+      </div>`, true)}
+    ${renderInspectorSection("event-pose", "placement", "Placement", `${renderSelectField("Placement mode", "placement-mode", [
+        ["", "None"],
+        ["orbit", "Orbit"],
+        ["at", "At"],
+        ["surface", "Surface"],
+        ["free", "Free"],
+    ], placementMode)}
+      ${renderTextField("Placement target", "placement-target", placementTarget)}
+      ${renderTextField("Free value", "placement-free", freeValue)}
+      ${renderTextField("Distance", "placement-distance", pose.placement?.mode === "orbit" && pose.placement.distance ? formatUnitValue(pose.placement.distance) : "")}
+      ${renderTextField("Semi-major", "placement-semiMajor", pose.placement?.mode === "orbit" && pose.placement.semiMajor ? formatUnitValue(pose.placement.semiMajor) : "")}
+      ${renderTextField("Eccentricity", "placement-eccentricity", pose.placement?.mode === "orbit" && pose.placement.eccentricity !== undefined ? String(pose.placement.eccentricity) : "")}
+      ${renderTextField("Period", "placement-period", pose.placement?.mode === "orbit" && pose.placement.period ? formatUnitValue(pose.placement.period) : "")}
+      ${renderTextField("Angle", "placement-angle", pose.placement?.mode === "orbit" && pose.placement.angle ? formatUnitValue(pose.placement.angle) : "")}
+      ${renderTextField("Inclination", "placement-inclination", pose.placement?.mode === "orbit" && pose.placement.inclination ? formatUnitValue(pose.placement.inclination) : "")}
+      ${renderTextField("Phase", "placement-phase", pose.placement?.mode === "orbit" && pose.placement.phase ? formatUnitValue(pose.placement.phase) : "")}
+      ${renderTextField("Inner", "prop-inner", pose.inner ? formatUnitValue(pose.inner) : "")}
+      ${renderTextField("Outer", "prop-outer", pose.outer ? formatUnitValue(pose.outer) : "")}`, true)}
   </form>`;
 }
 function renderAnnotationInspector(formState, id) {
@@ -1749,6 +2055,12 @@ function readCheckbox(form, name) {
     return form.elements.namedItem(name)?.checked ?? false;
 }
 function buildPlacementFromForm(form, current) {
+    return buildPlacementFromValues(form, current.placement, current.id);
+}
+function buildPlacementFromPoseForm(form, current) {
+    return buildPlacementFromValues(form, current.placement, current.objectId);
+}
+function buildPlacementFromValues(form, currentPlacement, fallbackTarget) {
     const mode = readTextInput(form, "placement-mode");
     const target = readOptionalTextInput(form, "placement-target");
     switch (mode) {
@@ -1756,9 +2068,9 @@ function buildPlacementFromForm(form, current) {
             return {
                 mode,
                 target: target ??
-                    (current.placement?.mode === "orbit"
-                        ? current.placement.target
-                        : current.id),
+                    (currentPlacement?.mode === "orbit"
+                        ? currentPlacement.target
+                        : fallbackTarget),
                 distance: parseOptionalUnit(readOptionalTextInput(form, "placement-distance")),
                 semiMajor: parseOptionalUnit(readOptionalTextInput(form, "placement-semiMajor")),
                 eccentricity: parseNullableNumber(readOptionalTextInput(form, "placement-eccentricity")) ?? undefined,
@@ -1770,13 +2082,13 @@ function buildPlacementFromForm(form, current) {
         case "at":
             return {
                 mode,
-                target: target ?? current.id,
-                reference: parseAtReferenceString(target ?? current.id),
+                target: target ?? fallbackTarget,
+                reference: parseAtReferenceString(target ?? fallbackTarget),
             };
         case "surface":
             return {
                 mode,
-                target: target ?? current.id,
+                target: target ?? fallbackTarget,
             };
         case "free": {
             const freeValue = readOptionalTextInput(form, "placement-free");
@@ -1920,9 +2232,48 @@ function renameObjectReferences(document, fromId, toId) {
             annotation.sourceObjectId = toId;
         }
     }
+    for (const eventEntry of document.events) {
+        if (eventEntry.targetObjectId === fromId) {
+            eventEntry.targetObjectId = toId;
+        }
+        eventEntry.participantObjectIds = eventEntry.participantObjectIds.map((entry) => entry === fromId ? toId : entry);
+        for (const pose of eventEntry.positions) {
+            if (pose.objectId === fromId) {
+                pose.objectId = toId;
+            }
+            if (pose.placement?.mode === "orbit" && pose.placement.target === fromId) {
+                pose.placement.target = toId;
+            }
+            if (pose.placement?.mode === "surface" && pose.placement.target === fromId) {
+                pose.placement.target = toId;
+            }
+            if (pose.placement?.mode === "at") {
+                const reference = pose.placement.reference;
+                if (reference.kind === "anchor" && reference.objectId === fromId) {
+                    reference.objectId = toId;
+                }
+                if (reference.kind === "lagrange") {
+                    if (reference.primary === fromId) {
+                        reference.primary = toId;
+                    }
+                    if (reference.secondary === fromId) {
+                        reference.secondary = toId;
+                    }
+                }
+                pose.placement.target = formatAtReference(reference);
+            }
+        }
+        eventEntry.positions.sort(compareEventPoses);
+    }
 }
 function removeSelectedNode(document, selection) {
     const next = removeAtlasDocumentNode(document, selection);
+    if (selection.kind === "event" && selection.id) {
+        for (const viewpoint of next.system?.viewpoints ?? []) {
+            viewpoint.events = viewpoint.events.filter((eventId) => eventId !== selection.id);
+        }
+        return next;
+    }
     if (selection.kind !== "object" || !selection.id) {
         return next;
     }
@@ -1959,9 +2310,47 @@ function removeSelectedNode(document, selection) {
             annotation.sourceObjectId = null;
         }
     }
+    for (const eventEntry of next.events) {
+        if (eventEntry.targetObjectId === selection.id) {
+            eventEntry.targetObjectId = null;
+        }
+        eventEntry.participantObjectIds = eventEntry.participantObjectIds.filter((entry) => entry !== selection.id);
+        eventEntry.positions = eventEntry.positions.filter((entry) => entry.objectId !== selection.id);
+        for (const pose of eventEntry.positions) {
+            if (pose.placement?.mode === "orbit" && pose.placement.target === selection.id) {
+                pose.placement = null;
+            }
+            if (pose.placement?.mode === "surface" && pose.placement.target === selection.id) {
+                pose.placement = null;
+            }
+            if (pose.placement?.mode === "at") {
+                const reference = pose.placement.reference;
+                const touchesSelection = (reference.kind === "anchor" && reference.objectId === selection.id) ||
+                    (reference.kind === "lagrange" &&
+                        (reference.primary === selection.id || reference.secondary === selection.id));
+                if (touchesSelection) {
+                    pose.placement = null;
+                }
+            }
+        }
+    }
     return next;
 }
-function updateOrbitPhase(document, objectId, details, pointer) {
+function findEditablePlacementOwner(document, path, objectId) {
+    if (path.kind === "event-pose" && path.id && path.key) {
+        const pose = findEventPose(document, path.id, path.key);
+        if (pose?.placement) {
+            return { placement: pose.placement };
+        }
+        return null;
+    }
+    const object = findObject(document, objectId);
+    if (object?.placement) {
+        return { placement: object.placement };
+    }
+    return null;
+}
+function updateOrbitPhase(document, path, objectId, details, pointer) {
     const orbit = details.orbit;
     if (!orbit || details.object.placement?.mode !== "orbit") {
         return document;
@@ -1972,17 +2361,17 @@ function updateOrbitPhase(document, objectId, details, pointer) {
     const radians = Math.atan2((unrotated.y - orbit.cy) / Math.max(ry, 1), (unrotated.x - orbit.cx) / Math.max(rx, 1));
     const phaseDeg = normalizeDegrees((radians * 180) / Math.PI);
     const next = cloneAtlasDocument(document);
-    const object = next.objects.find((entry) => entry.id === objectId);
-    if (!object || object.placement?.mode !== "orbit") {
+    const placementOwner = findEditablePlacementOwner(next, path, objectId);
+    if (!placementOwner || placementOwner.placement.mode !== "orbit") {
         return document;
     }
-    object.placement.phase = {
+    placementOwner.placement.phase = {
         value: roundNumber(phaseDeg, 2),
         unit: "deg",
     };
     return next;
 }
-function updateOrbitRadius(document, objectId, details, pointer, dragContext) {
+function updateOrbitRadius(document, path, objectId, details, pointer, dragContext) {
     const orbit = details.orbit;
     if (!orbit || details.object.placement?.mode !== "orbit" || !dragContext) {
         return document;
@@ -1992,49 +2381,49 @@ function updateOrbitRadius(document, objectId, details, pointer, dragContext) {
     const nextBaseRadius = Math.max(nextDisplayedRadius - dragContext.radiusOffsetPx, dragContext.innerPx);
     const nextMetric = orbitRadiusPxToMetric(nextBaseRadius, dragContext.innerPx, dragContext.stepPx);
     const next = cloneAtlasDocument(document);
-    const object = next.objects.find((entry) => entry.id === objectId);
-    if (!object || object.placement?.mode !== "orbit") {
+    const placementOwner = findEditablePlacementOwner(next, path, objectId);
+    if (!placementOwner || placementOwner.placement.mode !== "orbit") {
         return document;
     }
-    const currentValue = object.placement.semiMajor ??
-        object.placement.distance ?? {
+    const currentValue = placementOwner.placement.semiMajor ??
+        placementOwner.placement.distance ?? {
         value: 1,
         unit: "au",
     };
     const scaled = distanceMetricToUnitValue(Math.max(nextMetric, 0), dragContext.preferredUnit ?? currentValue.unit);
-    if (object.placement.semiMajor) {
-        object.placement.semiMajor = scaled;
+    if (placementOwner.placement.semiMajor) {
+        placementOwner.placement.semiMajor = scaled;
     }
     else {
-        object.placement.distance = scaled;
+        placementOwner.placement.distance = scaled;
     }
     return next;
 }
-function updateAtReference(document, objectId, scene, pointer) {
+function updateAtReference(document, path, objectId, scene, pointer) {
     const candidate = findNearestAtCandidate(scene, objectId, pointer);
     if (!candidate) {
         return document;
     }
     const next = cloneAtlasDocument(document);
-    const object = next.objects.find((entry) => entry.id === objectId);
-    if (!object || object.placement?.mode !== "at") {
+    const placementOwner = findEditablePlacementOwner(next, path, objectId);
+    if (!placementOwner || placementOwner.placement.mode !== "at") {
         return document;
     }
-    object.placement.reference = candidate.reference;
-    object.placement.target = formatAtReference(candidate.reference);
+    placementOwner.placement.reference = candidate.reference;
+    placementOwner.placement.target = formatAtReference(candidate.reference);
     return next;
 }
-function updateSurfaceTarget(document, objectId, scene, pointer) {
+function updateSurfaceTarget(document, path, objectId, scene, pointer) {
     const target = findNearestSceneObject(scene, objectId, pointer, (entry) => SURFACE_TARGET_TYPES.has(entry.object.type));
     if (!target) {
         return document;
     }
     const next = cloneAtlasDocument(document);
-    const object = next.objects.find((entry) => entry.id === objectId);
-    if (!object || object.placement?.mode !== "surface") {
+    const placementOwner = findEditablePlacementOwner(next, path, objectId);
+    if (!placementOwner || placementOwner.placement.mode !== "surface") {
         return document;
     }
-    object.placement.target = target.objectId;
+    placementOwner.placement.target = target.objectId;
     return next;
 }
 function createOrbitRadiusDragContext(document, scene, details) {
@@ -2042,8 +2431,9 @@ function createOrbitRadiusDragContext(document, scene, details) {
         return null;
     }
     const targetId = details.object.placement.target;
-    const siblingCount = document.objects.filter((entry) => entry.placement?.mode === "orbit" &&
-        entry.placement.target === targetId).length;
+    const siblingCount = scene.objects.filter((entry) => entry.object.placement?.mode === "orbit" &&
+        entry.object.placement.target === targetId &&
+        !entry.hidden).length;
     const spacingFactor = layoutPresetSpacingForScene(scene.layoutPreset);
     const stepPx = (siblingCount > 2 ? 54 : 64) * spacingFactor * scene.scaleModel.orbitDistanceMultiplier;
     const innerPx = details.parent.radius +
@@ -2059,28 +2449,28 @@ function createOrbitRadiusDragContext(document, scene, details) {
         preferredUnit: currentValue?.unit ?? null,
     };
 }
-function updateFreeDistance(document, objectId, scene, details, pointer) {
+function updateFreeDistance(document, path, objectId, scene, details, pointer) {
     if (details.object.placement?.mode !== "free") {
         return document;
     }
     const railX = scene.width - scene.padding - 140;
     const offsetPx = Math.max(0, railX - pointer.x);
     const next = cloneAtlasDocument(document);
-    const object = next.objects.find((entry) => entry.id === objectId);
-    if (!object || object.placement?.mode !== "free") {
+    const placementOwner = findEditablePlacementOwner(next, path, objectId);
+    if (!placementOwner || placementOwner.placement.mode !== "free") {
         return document;
     }
-    const preferredUnit = normalizeFreeDistanceUnit(object.placement.distance?.unit ?? null);
+    const preferredUnit = normalizeFreeDistanceUnit(placementOwner.placement.distance?.unit ?? null);
     const metric = offsetPx / Math.max(FREE_DISTANCE_PIXEL_FACTOR * scene.scaleModel.freePlacementMultiplier, 1);
     if (metric < 0.01) {
-        object.placement.distance = undefined;
-        if (!object.placement.descriptor) {
-            delete object.placement.descriptor;
+        placementOwner.placement.distance = undefined;
+        if (!placementOwner.placement.descriptor) {
+            delete placementOwner.placement.descriptor;
         }
         return next;
     }
-    object.placement.distance = distanceMetricToUnitValue(metric, preferredUnit);
-    delete object.placement.descriptor;
+    placementOwner.placement.distance = distanceMetricToUnitValue(metric, preferredUnit);
+    delete placementOwner.placement.descriptor;
     return next;
 }
 function findNearestSceneObject(scene, selectedObjectId, pointer, predicate = () => true) {
@@ -2356,9 +2746,60 @@ function mapDiagnosticFieldToInputNames(selection, field) {
                     return ["viewpoint-zoom"];
                 case "rotationDeg":
                     return ["viewpoint-rotation"];
+                case "events":
+                    return ["viewpoint-events"];
                 default:
                     return [];
             }
+        case "event":
+            switch (field) {
+                case "id":
+                    return ["event-id"];
+                case "kind":
+                    return ["event-kind"];
+                case "label":
+                    return ["event-label"];
+                case "summary":
+                    return ["event-summary"];
+                case "targetObjectId":
+                case "target":
+                    return ["event-target"];
+                case "participantObjectIds":
+                case "participants":
+                    return ["event-participants"];
+                case "timing":
+                    return ["event-timing"];
+                case "visibility":
+                    return ["event-visibility"];
+                case "tags":
+                    return ["event-tags"];
+                case "color":
+                    return ["event-color"];
+                case "hidden":
+                    return ["event-hidden"];
+                default:
+                    return [];
+            }
+        case "event-pose":
+            if (field === "objectId") {
+                return ["pose-object-id"];
+            }
+            if (field === "placement") {
+                return ["placement-mode"];
+            }
+            if (field === "reference" || field === "target") {
+                return ["placement-target"];
+            }
+            if (field === "descriptor") {
+                return ["placement-free"];
+            }
+            if (PLACEMENT_DIAGNOSTIC_FIELDS.has(field)) {
+                return [`placement-${field}`];
+            }
+            if (field === "inner" || field === "outer") {
+                return [`prop-${field}`];
+            }
+            return [];
         case "annotation":
             switch (field) {
                 case "id":
@@ -2444,6 +2885,10 @@ function describePath(path) {
             return `Metadata: ${path.key ?? ""}`;
         case "group":
             return `Group: ${path.id ?? ""}`;
+        case "event":
+            return `Event: ${path.id ?? ""}`;
+        case "event-pose":
+            return `Event Pose: ${path.id ?? ""} / ${path.key ?? ""}`;
         case "object":
             return `Object: ${path.id ?? ""}`;
         case "viewpoint":
@@ -2455,11 +2900,72 @@ function describePath(path) {
     }
 }
 function selectionKey(path) {
-    return path ? `${path.kind}:${path.id ?? path.key ?? ""}` : null;
+    return path ? `${path.kind}:${path.id ?? ""}:${path.key ?? ""}` : null;
+}
+function selectionEventId(path) {
+    if (!path) {
+        return null;
+    }
+    return path.kind === "event" || path.kind === "event-pose" ? path.id ?? null : null;
 }
 function compareObjects(left, right) {
     return left.id.localeCompare(right.id);
 }
+function compareEvents(left, right) {
+    return left.id.localeCompare(right.id);
+}
+function compareEventPoses(left, right) {
+    return left.objectId.localeCompare(right.objectId);
+}
+function findEvent(document, eventId) {
+    return document.events.find((entry) => entry.id === eventId) ?? null;
+}
+function findEventPose(document, eventId, objectId) {
+    return findEvent(document, eventId)?.positions.find((entry) => entry.objectId === objectId) ?? null;
+}
+function findObject(document, objectId) {
+    return document.objects.find((entry) => entry.id === objectId) ?? null;
+}
+function addEventPose(document, eventId) {
+    const next = cloneAtlasDocument(document);
+    const eventEntry = next.events.find((entry) => entry.id === eventId);
+    if (!eventEntry) {
+        return document;
+    }
+    const baseObject = next.objects.find((object) => !eventEntry.positions.some((pose) => pose.objectId === object.id)) ??
+        next.objects[0];
+    if (!baseObject) {
+        return document;
+    }
+    if (eventEntry.targetObjectId !== baseObject.id &&
+        !eventEntry.participantObjectIds.includes(baseObject.id)) {
+        eventEntry.participantObjectIds.push(baseObject.id);
+        eventEntry.participantObjectIds.sort((left, right) => left.localeCompare(right));
+    }
+    eventEntry.positions.push(createEventPoseFromObject(baseObject));
+    eventEntry.positions.sort(compareEventPoses);
+    return next;
+}
+function createEventPoseFromObject(object) {
+    return {
+        objectId: object.id,
+        placement: object.placement ? structuredClone(object.placement) : null,
+        inner: readUnitValue(object.properties.inner),
+        outer: readUnitValue(object.properties.outer),
+    };
+}
+function syncEventViewpointReferences(document, previousEventId, nextEventId, viewpointIds) {
+    const desired = new Set(viewpointIds);
+    for (const viewpoint of document.system?.viewpoints ?? []) {
+        const currentIds = new Set(viewpoint.events);
+        currentIds.delete(previousEventId);
+        currentIds.delete(nextEventId);
+        if (desired.has(viewpoint.id)) {
+            currentIds.add(nextEventId);
+        }
+        viewpoint.events = [...currentIds].sort((left, right) => left.localeCompare(right));
+    }
+}
 function createUniqueId(prefix, existing) {
     const safePrefix = prefix.trim() || "item";
     let counter = 1;
@@ -2494,6 +3000,9 @@ function readUnitProperty(value) {
         ? formatUnitValue(value)
         : "";
 }
+function readUnitValue(value) {
+    return value && typeof value === "object" && "value" in value ? value : undefined;
+}
 function readNumberProperty(value) {
     return typeof value === "number" ? String(value) : "";
 }
@@ -2803,6 +3312,12 @@ function installEditorStyles() {
     .wo-editor-overlay-diagnostic-warning { border: 1px solid rgba(240, 180, 100, 0.24); }
     .wo-editor-outline { display: grid; gap: 14px; }
     .wo-editor-outline-section { display: grid; gap: 8px; }
+    .wo-editor-outline-group { display: grid; gap: 6px; }
+    .wo-editor-outline-children {
+      display: grid;
+      gap: 6px;
+      padding-left: 16px;
+    }
     .wo-editor-outline-section h3 {
       margin: 0;
       color: rgba(237,246,255,0.68);
@@ -2842,6 +3357,27 @@ function installEditorStyles() {
       background: rgba(255, 120, 120, 0.18);
       color: #ffb2b2;
     }
+    .wo-editor-inline-list { display: grid; gap: 8px; }
+    .wo-editor-inline-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 12px;
+    }
+    .wo-editor-inline-actions button {
+      border: 1px solid rgba(255,255,255,0.14);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.06);
+      color: #edf6ff;
+      cursor: pointer;
+      font: 600 12px/1.2 "Segoe UI Variable", "Segoe UI", sans-serif;
+      padding: 8px 12px;
+    }
+    .wo-editor-inline-note {
+      margin: 0 0 12px;
+      color: rgba(237,246,255,0.72);
+      font: 500 12px/1.5 "Segoe UI Variable", "Segoe UI", sans-serif;
+    }
     .wo-editor-diagnostics { display: grid; gap: 10px; }
     .wo-editor-diagnostic {
       display: grid;