worldorbit 3.2.2 → 4.0.0

package/packages/editor/dist/editor.js

@@ -39,6 +39,7 @@ const OBJECT_TYPES = [
     "ring",
     "structure",
     "phenomenon",
+    "craft",
 ];
 const OBJECT_STRING_FIELDS = [
     "kind",
@@ -91,11 +92,11 @@ const FIELD_HELP = {
         references: ["1 = scene fit", "2+ = close-up"],
     },
     "viewpoint-rotation": {
-        description: "Legacy 2D screen rotation. This is separate from the Schema 2.5 camera block.",
+        description: "Legacy 2D screen rotation. This is separate from the Schema 3.0 camera block.",
         references: ["90deg = quarter turn", "Use camera.azimuth for semantic view direction"],
     },
     "viewpoint-camera-azimuth": {
-        description: "Horizontal camera direction in degrees for Schema 2.5 viewpoints.",
+        description: "Horizontal camera direction in degrees for Schema 3.0 viewpoints.",
         references: ["0 = forward/default", "90 = quarter orbit around the scene"],
     },
     "viewpoint-camera-elevation": {
@@ -146,10 +147,18 @@ const FIELD_HELP = {
         description: "Viewpoint IDs that should list this event prominently.",
         references: ["naar-system", "overview inner-system"],
     },
+    "event-trajectory": {
+        description: "Links the event to a declarative trajectory or maneuver plan.",
+        references: ["courier-run", "swing-by-window"],
+    },
     "placement-target": {
         description: "Names the body or reference this object is attached to.",
         references: ["orbit Primary", "surface Homeworld", "at Naar:L4"],
     },
+    "object-trajectory": {
+        description: "Links a craft to a declarative trajectory definition.",
+        references: ["courier-run", "transfer-orbit"],
+    },
     "placement-free": {
         description: "Stores a free-placement offset or a descriptive label for loose placement.",
         references: ["8au = far from the star", '"outer system" = descriptive note'],
@@ -740,75 +749,75 @@ export function createWorldOrbitEditor(container, options = {}) {
     function renderToolbar() {
         const objectType = toolbar.querySelector("[data-editor-add-object-type]")
             ?.value ?? "planet";
-        toolbar.innerHTML = `
-      <div class="wo-editor-toolbar-group">
-        <select data-editor-add-object-type>
-          ${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>
-      </div>
-      <div class="wo-editor-toolbar-group">
-        <button type="button" data-editor-action="remove"${!selection || selection.kind === "system" || selection.kind === "defaults" ? " disabled" : ""}>Remove</button>
-        <button type="button" data-editor-action="undo"${history.length === 0 ? " disabled" : ""}>Undo</button>
-        <button type="button" data-editor-action="redo"${future.length === 0 ? " disabled" : ""}>Redo</button>
-        <button type="button" data-editor-action="format">Format source</button>
-      </div>
+        toolbar.innerHTML = `
+      <div class="wo-editor-toolbar-group">
+        <select data-editor-add-object-type>
+          ${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>
+      </div>
+      <div class="wo-editor-toolbar-group">
+        <button type="button" data-editor-action="remove"${!selection || selection.kind === "system" || selection.kind === "defaults" ? " disabled" : ""}>Remove</button>
+        <button type="button" data-editor-action="undo"${history.length === 0 ? " disabled" : ""}>Undo</button>
+        <button type="button" data-editor-action="redo"${future.length === 0 ? " disabled" : ""}>Redo</button>
+        <button type="button" data-editor-action="format">Format source</button>
+      </div>
     `;
     }
     function renderOutline() {
         const activeKey = selectionKey(selection);
         const diagnosticBuckets = buildDiagnosticBuckets(diagnostics);
         const metadataEntries = Object.entries(atlasDocument.system?.atlasMetadata ?? {}).sort(([left], [right]) => left.localeCompare(right));
-        outline.innerHTML = `
-      <div class="wo-editor-outline-section">
-        <h3>Atlas</h3>
-        ${renderOutlineButton({ kind: "system" }, "System", activeKey, diagnosticBuckets)}
-        ${renderOutlineButton({ kind: "defaults" }, "Defaults", activeKey, diagnosticBuckets)}
-      </div>
-      <div class="wo-editor-outline-section">
-        <h3>Metadata</h3>
+        outline.innerHTML = `
+      <div class="wo-editor-outline-section">
+        <h3>Atlas</h3>
+        ${renderOutlineButton({ kind: "system" }, "System", activeKey, diagnosticBuckets)}
+        ${renderOutlineButton({ kind: "defaults" }, "Defaults", activeKey, diagnosticBuckets)}
+      </div>
+      <div class="wo-editor-outline-section">
+        <h3>Metadata</h3>
         ${metadataEntries.length > 0
             ? metadataEntries
                 .map(([key]) => renderOutlineButton({ kind: "metadata", key }, key, activeKey, diagnosticBuckets))
                 .join("")
-            : `<p class="wo-editor-empty">No atlas metadata yet.</p>`}
-      </div>
-      <div class="wo-editor-outline-section">
-        <h3>Viewpoints</h3>
+            : `<p class="wo-editor-empty">No atlas metadata yet.</p>`}
+      </div>
+      <div class="wo-editor-outline-section">
+        <h3>Viewpoints</h3>
         ${(atlasDocument.system?.viewpoints.length ?? 0) > 0
             ? atlasDocument.system?.viewpoints
                 .map((viewpoint) => renderOutlineButton({ kind: "viewpoint", id: viewpoint.id }, viewpoint.label, activeKey, diagnosticBuckets))
                 .join("")
-            : `<p class="wo-editor-empty">No viewpoints yet.</p>`}
-      </div>
-      <div class="wo-editor-outline-section">
-        <h3>Annotations</h3>
+            : `<p class="wo-editor-empty">No viewpoints yet.</p>`}
+      </div>
+      <div class="wo-editor-outline-section">
+        <h3>Annotations</h3>
         ${(atlasDocument.system?.annotations.length ?? 0) > 0
             ? atlasDocument.system?.annotations
                 .map((annotation) => renderOutlineButton({ kind: "annotation", id: annotation.id }, annotation.label, activeKey, diagnosticBuckets))
                 .join("")
-            : `<p class="wo-editor-empty">No annotations yet.</p>`}
-      </div>
-      <div class="wo-editor-outline-section">
-        <h3>Events</h3>
+            : `<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>
+            : `<p class="wo-editor-empty">No events yet.</p>`}
+      </div>
+      <div class="wo-editor-outline-section">
+        <h3>Objects</h3>
         ${atlasDocument.objects.length > 0
             ? atlasDocument.objects
                 .map((object) => renderOutlineButton({ kind: "object", id: object.id }, `${object.id} - ${object.type}`, activeKey, diagnosticBuckets))
                 .join("")
-            : `<p class="wo-editor-empty">No objects yet.</p>`}
-      </div>
+            : `<p class="wo-editor-empty">No objects yet.</p>`}
+      </div>
     `;
     }
     function renderDiagnostics() {
@@ -819,10 +828,10 @@ export function createWorldOrbitEditor(container, options = {}) {
                     .map((entry) => {
                     const pathLabel = entry.path ? describePath(entry.path) : "Source";
                     const location = formatDiagnosticLocation(entry);
-                    return `<article class="wo-editor-diagnostic wo-editor-diagnostic-${escapeHtml(entry.diagnostic.severity)}">
-                <strong>${escapeHtml(entry.diagnostic.severity.toUpperCase())}</strong>
-                <span>${escapeHtml(pathLabel)}${location ? ` · ${escapeHtml(location)}` : ""}</span>
-                <p>${escapeHtml(entry.diagnostic.message)}</p>
+                    return `<article class="wo-editor-diagnostic wo-editor-diagnostic-${escapeHtml(entry.diagnostic.severity)}">
+                <strong>${escapeHtml(entry.diagnostic.severity.toUpperCase())}</strong>
+                <span>${escapeHtml(pathLabel)}${location ? ` · ${escapeHtml(location)}` : ""}</span>
+                <p>${escapeHtml(entry.diagnostic.message)}</p>
               </article>`;
                 })
                     .join("");
@@ -835,10 +844,10 @@ export function createWorldOrbitEditor(container, options = {}) {
                 : sourceEntries
                     .map((entry) => {
                     const location = formatDiagnosticLocation(entry) ?? "Source";
-                    return `<article class="wo-editor-diagnostic wo-editor-diagnostic-${escapeHtml(entry.diagnostic.severity)}">
-                <strong>${escapeHtml(entry.diagnostic.severity.toUpperCase())}</strong>
-                <span>${escapeHtml(location)}</span>
-                <p>${escapeHtml(entry.diagnostic.message)}</p>
+                    return `<article class="wo-editor-diagnostic wo-editor-diagnostic-${escapeHtml(entry.diagnostic.severity)}">
+                <strong>${escapeHtml(entry.diagnostic.severity.toUpperCase())}</strong>
+                <span>${escapeHtml(location)}</span>
+                <p>${escapeHtml(entry.diagnostic.message)}</p>
               </article>`;
                 })
                     .join("");
@@ -983,9 +992,9 @@ export function createWorldOrbitEditor(container, options = {}) {
             panel.setAttribute("role", "status");
             panel.setAttribute("aria-live", "polite");
             panel.innerHTML = placementDiagnostics
-                .map((entry) => `<article class="wo-editor-overlay-diagnostic wo-editor-overlay-diagnostic-${escapeHtml(entry.diagnostic.severity)}">
-              <strong>${escapeHtml(entry.diagnostic.severity.toUpperCase())}</strong>
-              <p>${escapeHtml(entry.diagnostic.message)}</p>
+                .map((entry) => `<article class="wo-editor-overlay-diagnostic wo-editor-overlay-diagnostic-${escapeHtml(entry.diagnostic.severity)}">
+              <strong>${escapeHtml(entry.diagnostic.severity.toUpperCase())}</strong>
+              <p>${escapeHtml(entry.diagnostic.message)}</p>
             </article>`)
                 .join("");
             overlay.append(panel);
@@ -1451,6 +1460,13 @@ export function createWorldOrbitEditor(container, options = {}) {
             color: readOptionalTextInput(form, "event-color"),
             hidden: readCheckbox(form, "event-hidden"),
         };
+        const nextTrajectory = readOptionalTextInput(form, "event-trajectory");
+        if (nextTrajectory) {
+            replacement.trajectory = nextTrajectory;
+        }
+        else {
+            delete replacement.trajectory;
+        }
         nextDocument.events = nextDocument.events
             .filter((entry) => entry.id !== current.id)
             .concat(replacement)
@@ -1535,11 +1551,18 @@ export function createWorldOrbitEditor(container, options = {}) {
         const replacement = {
             ...current,
             id: nextId,
-            type: readTextInput(form, "object-type") || current.type,
+            type: (readTextInput(form, "object-type") || current.type),
             properties: { ...current.properties },
             info: { ...current.info },
             placement: buildPlacementFromForm(form, current),
         };
+        const nextTrajectory = readOptionalTextInput(form, "object-trajectory");
+        if (nextTrajectory) {
+            replacement.trajectory = nextTrajectory;
+        }
+        else {
+            delete replacement.trajectory;
+        }
         for (const field of OBJECT_STRING_FIELDS) {
             setOptionalProperty(replacement.properties, field, readOptionalTextInput(form, `prop-${field}`));
         }
@@ -1568,11 +1591,11 @@ export function createWorldOrbitEditor(container, options = {}) {
         const errorCount = diagnostics.filter((entry) => entry.diagnostic.severity === "error").length;
         const warningCount = diagnostics.filter((entry) => entry.diagnostic.severity === "warning").length;
         const selectionLabel = selection ? describePath(selection) : "Nothing selected";
-        statusBar.innerHTML = `
-      <span class="wo-editor-status-pill${dirty ? " is-dirty" : " is-clean"}">${dirty ? "Unsaved changes" : "Saved"}</span>
-      <span class="wo-editor-status-pill">Schema ${escapeHtml(atlasDocument.version)}</span>
-      <span class="wo-editor-status-pill${errorCount > 0 ? " is-error" : warningCount > 0 ? " is-warning" : ""}">${errorCount} errors · ${warningCount} warnings</span>
-      <span class="wo-editor-status-pill">${escapeHtml(selectionLabel)}</span>
+        statusBar.innerHTML = `
+      <span class="wo-editor-status-pill${dirty ? " is-dirty" : " is-clean"}">${dirty ? "Unsaved changes" : "Saved"}</span>
+      <span class="wo-editor-status-pill">Schema ${escapeHtml(atlasDocument.version)}</span>
+      <span class="wo-editor-status-pill${errorCount > 0 ? " is-error" : warningCount > 0 ? " is-warning" : ""}">${errorCount} errors · ${warningCount} warnings</span>
+      <span class="wo-editor-status-pill">${escapeHtml(selectionLabel)}</span>
     `;
     }
     function updateLiveRegion() {
@@ -1659,15 +1682,15 @@ export function createWorldOrbitEditor(container, options = {}) {
         if (selectionDiagnostics.length === 0) {
             return "";
         }
-        return `<div class="wo-editor-inspector-summary">
+        return `<div class="wo-editor-inspector-summary">
       ${selectionDiagnostics
             .slice(0, 4)
-            .map((entry) => `<article class="wo-editor-diagnostic wo-editor-diagnostic-${escapeHtml(entry.diagnostic.severity)}">
-              <strong>${escapeHtml(entry.diagnostic.severity.toUpperCase())}</strong>
-              <span>${escapeHtml(entry.diagnostic.field ?? describePath(currentSelection))}</span>
-              <p>${escapeHtml(entry.diagnostic.message)}</p>
+            .map((entry) => `<article class="wo-editor-diagnostic wo-editor-diagnostic-${escapeHtml(entry.diagnostic.severity)}">
+              <strong>${escapeHtml(entry.diagnostic.severity.toUpperCase())}</strong>
+              <span>${escapeHtml(entry.diagnostic.field ?? describePath(currentSelection))}</span>
+              <p>${escapeHtml(entry.diagnostic.message)}</p>
             </article>`)
-            .join("")}
+            .join("")}
     </div>`;
     }
     function decorateInspectorDiagnostics(currentSelection, entries) {
@@ -1732,64 +1755,64 @@ function formatAtlasSource(document) {
 }
 function buildEditorMarkup() {
     const previewOpen = shouldPreviewSectionBeOpenByDefault();
-    return `<section class="wo-editor-shell">
-    <div class="wo-editor-toolbar" data-editor-toolbar></div>
-    <div class="wo-editor-status" data-editor-status role="status" aria-live="polite"></div>
-    <div class="wo-editor-main">
-      <aside class="wo-editor-sidebar" data-editor-pane="sidebar">
-        <div class="wo-editor-panel">${renderPanelSection("Atlas", "atlas", `<div class="wo-editor-outline" data-editor-outline></div>`)}</div>
-        <div class="wo-editor-panel">${renderPanelSection("Diagnostics", "diagnostics", `<div class="wo-editor-diagnostics" data-editor-diagnostics></div>`)}</div>
-      </aside>
-      <div class="wo-editor-stage-panel">
-        <div class="wo-editor-stage-shell" data-editor-stage-shell>
-          <div class="wo-editor-stage" data-editor-stage></div>
-          <div class="wo-editor-overlay" data-editor-overlay></div>
-        </div>
-        <div class="wo-editor-panel" data-editor-pane="preview">
-          ${renderPanelSection("Preview", "preview", `<div class="wo-editor-preview">
-              <div class="wo-editor-preview-card">
-                <h3>Static SVG</h3>
-                <div class="wo-editor-preview-visual" data-editor-preview-visual></div>
-              </div>
-              <div class="wo-editor-preview-card">
-                <h3>Embed Markup</h3>
-                <pre class="wo-editor-preview-markup" data-editor-preview-markup></pre>
-              </div>
-            </div>`, previewOpen)}
-        </div>
-      </div>
-      <aside class="wo-editor-panel wo-editor-inspector" data-editor-pane="inspector">
-        ${renderPanelSection("Inspector", "inspector", `<div data-editor-inspector></div>`)}
-      </aside>
-    </div>
-    <div class="wo-editor-panel wo-editor-text-panel" data-editor-pane="text">
-      ${renderPanelSection("Source", "source", `<textarea
-          class="wo-editor-source"
-          data-editor-source
-          spellcheck="false"
-          aria-describedby="worldorbit-editor-source-diagnostics"
-        ></textarea>
-        <div
-          class="wo-editor-source-diagnostics"
-          id="worldorbit-editor-source-diagnostics"
-          data-editor-source-diagnostics
-          aria-live="polite"
-        ></div>`)}
-    </div>
-    <div class="wo-editor-live-region" data-editor-live aria-live="polite" aria-atomic="true"></div>
+    return `<section class="wo-editor-shell">
+    <div class="wo-editor-toolbar" data-editor-toolbar></div>
+    <div class="wo-editor-status" data-editor-status role="status" aria-live="polite"></div>
+    <div class="wo-editor-main">
+      <aside class="wo-editor-sidebar" data-editor-pane="sidebar">
+        <div class="wo-editor-panel">${renderPanelSection("Atlas", "atlas", `<div class="wo-editor-outline" data-editor-outline></div>`)}</div>
+        <div class="wo-editor-panel">${renderPanelSection("Diagnostics", "diagnostics", `<div class="wo-editor-diagnostics" data-editor-diagnostics></div>`)}</div>
+      </aside>
+      <div class="wo-editor-stage-panel">
+        <div class="wo-editor-stage-shell" data-editor-stage-shell>
+          <div class="wo-editor-stage" data-editor-stage></div>
+          <div class="wo-editor-overlay" data-editor-overlay></div>
+        </div>
+        <div class="wo-editor-panel" data-editor-pane="preview">
+          ${renderPanelSection("Preview", "preview", `<div class="wo-editor-preview">
+              <div class="wo-editor-preview-card">
+                <h3>Static SVG</h3>
+                <div class="wo-editor-preview-visual" data-editor-preview-visual></div>
+              </div>
+              <div class="wo-editor-preview-card">
+                <h3>Embed Markup</h3>
+                <pre class="wo-editor-preview-markup" data-editor-preview-markup></pre>
+              </div>
+            </div>`, previewOpen)}
+        </div>
+      </div>
+      <aside class="wo-editor-panel wo-editor-inspector" data-editor-pane="inspector">
+        ${renderPanelSection("Inspector", "inspector", `<div data-editor-inspector></div>`)}
+      </aside>
+    </div>
+    <div class="wo-editor-panel wo-editor-text-panel" data-editor-pane="text">
+      ${renderPanelSection("Source", "source", `<textarea
+          class="wo-editor-source"
+          data-editor-source
+          spellcheck="false"
+          aria-describedby="worldorbit-editor-source-diagnostics"
+        ></textarea>
+        <div
+          class="wo-editor-source-diagnostics"
+          id="worldorbit-editor-source-diagnostics"
+          data-editor-source-diagnostics
+          aria-live="polite"
+        ></div>`)}
+    </div>
+    <div class="wo-editor-live-region" data-editor-live aria-live="polite" aria-atomic="true"></div>
   </section>`;
 }
 function renderPanelSection(title, sectionId, content, open = true) {
-    return `<details class="wo-editor-panel-section" data-editor-panel-section="${escapeHtml(sectionId)}"${open ? " open" : ""}>
-    <summary><span>${escapeHtml(title)}</span></summary>
-    <div class="wo-editor-panel-section-body">${content}</div>
+    return `<details class="wo-editor-panel-section" data-editor-panel-section="${escapeHtml(sectionId)}"${open ? " open" : ""}>
+    <summary><span>${escapeHtml(title)}</span></summary>
+    <div class="wo-editor-panel-section-body">${content}</div>
   </details>`;
 }
 function renderInspectorSection(formId, sectionId, title, content, open = false) {
     const stateKey = inspectorSectionStateKey(formId, sectionId);
-    return `<details class="wo-editor-inspector-section" data-editor-form-section="${escapeHtml(sectionId)}" data-editor-form-id="${escapeHtml(formId)}" data-editor-section-state="${escapeHtml(stateKey)}"${open ? " open" : ""}>
-    <summary><span>${escapeHtml(title)}</span></summary>
-    <div class="wo-editor-inspector-section-body">${content}</div>
+    return `<details class="wo-editor-inspector-section" data-editor-form-section="${escapeHtml(sectionId)}" data-editor-form-id="${escapeHtml(formId)}" data-editor-section-state="${escapeHtml(stateKey)}"${open ? " open" : ""}>
+    <summary><span>${escapeHtml(title)}</span></summary>
+    <div class="wo-editor-inspector-section-body">${content}</div>
   </details>`;
 }
 function renderFieldLabel(label, name) {
@@ -1800,16 +1823,16 @@ function renderFieldHelp(name) {
     if (!help) {
         return "";
     }
-    return `<details class="wo-editor-field-help">
-    <summary aria-label="Explain ${escapeAttribute(name)}">?</summary>
-    <div class="wo-editor-field-help-card">
-      <p>${escapeHtml(help.description)}</p>
+    return `<details class="wo-editor-field-help">
+    <summary aria-label="Explain ${escapeAttribute(name)}">?</summary>
+    <div class="wo-editor-field-help-card">
+      <p>${escapeHtml(help.description)}</p>
       ${(help.references?.length ?? 0) > 0
         ? `<div class="wo-editor-field-help-chips">${(help.references ?? [])
             .map((entry) => `<span>${escapeHtml(entry)}</span>`)
             .join("")}</div>`
-        : ""}
-    </div>
+        : ""}
+    </div>
   </details>`;
 }
 function captureInspectorSectionState(container, state) {
@@ -1851,51 +1874,51 @@ 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)}
+    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>
-    ${renderInspectorSection("system", "basics", "Basics", `${renderTextField("System ID", "system-id", formState.system?.id ?? "")}
-      ${renderTextField("Title", "system-title", formState.system?.title ?? "")}`, true)}
+    return `<form class="wo-editor-form" data-editor-form="system">
+    <h2>System</h2>
+    ${renderInspectorSection("system", "basics", "Basics", `${renderTextField("System ID", "system-id", formState.system?.id ?? "")}
+      ${renderTextField("Title", "system-title", formState.system?.title ?? "")}`, true)}
   </form>`;
 }
 function renderDefaultsInspector(formState) {
     const defaults = formState.system?.defaults;
-    return `<form class="wo-editor-form" data-editor-form="defaults">
-    <h2>Defaults</h2>
+    return `<form class="wo-editor-form" data-editor-form="defaults">
+    <h2>Defaults</h2>
     ${renderInspectorSection("defaults", "basics", "Basics", `${renderSelectField("Projection", "defaults-view", [
         ["topdown", "Topdown"],
         ["isometric", "Isometric"],
         ["orthographic", "Orthographic"],
         ["perspective", "Perspective"],
-    ], defaults?.view ?? "topdown")}
-      ${renderTextField("Scale preset", "defaults-scale", defaults?.scale ?? "")}
-      ${renderTextField("Units", "defaults-units", defaults?.units ?? "")}
+    ], defaults?.view ?? "topdown")}
+      ${renderTextField("Scale preset", "defaults-scale", defaults?.scale ?? "")}
+      ${renderTextField("Units", "defaults-units", defaults?.units ?? "")}
       ${renderSelectField("Render preset", "defaults-preset", [
         ["", "Document default"],
         ["diagram", "Diagram"],
         ["presentation", "Presentation"],
         ["atlas-card", "Atlas Card"],
         ["markdown", "Markdown"],
-    ], defaults?.preset ?? "")}
-      ${renderTextField("Theme", "defaults-theme", defaults?.theme ?? "")}`, true)}
+    ], defaults?.preset ?? "")}
+      ${renderTextField("Theme", "defaults-theme", defaults?.theme ?? "")}`, true)}
   </form>`;
 }
 function renderMetadataInspector(formState, key) {
     const value = formState.system?.atlasMetadata[key] ?? "";
-    return `<form class="wo-editor-form" data-editor-form="metadata">
-    <h2>Metadata</h2>
-    ${renderInspectorSection("metadata", "entry", "Entry", `${renderTextField("Key", "metadata-key", key)}
-      ${renderTextAreaField("Value", "metadata-value", value)}`, true)}
+    return `<form class="wo-editor-form" data-editor-form="metadata">
+    <h2>Metadata</h2>
+    ${renderInspectorSection("metadata", "entry", "Entry", `${renderTextField("Key", "metadata-key", key)}
+      ${renderTextAreaField("Value", "metadata-value", value)}`, true)}
   </form>`;
 }
 function renderViewpointInspector(formState, id) {
@@ -1903,49 +1926,49 @@ function renderViewpointInspector(formState, id) {
     if (!viewpoint) {
         return `<p class="wo-editor-empty">Viewpoint not found.</p>`;
     }
-    return `<form class="wo-editor-form" data-editor-form="viewpoint">
-    <h2>Viewpoint</h2>
-    ${renderInspectorSection("viewpoint", "basics", "Basics", `${renderTextField("ID", "viewpoint-id", viewpoint.id)}
-      ${renderTextField("Label", "viewpoint-label", viewpoint.label)}
-      ${renderTextAreaField("Summary", "viewpoint-summary", viewpoint.summary)}
-      ${renderTextField("Focus object", "viewpoint-focus", viewpoint.focusObjectId ?? "")}
-      ${renderTextField("Selected object", "viewpoint-select", viewpoint.selectedObjectId ?? "")}
+    return `<form class="wo-editor-form" data-editor-form="viewpoint">
+    <h2>Viewpoint</h2>
+    ${renderInspectorSection("viewpoint", "basics", "Basics", `${renderTextField("ID", "viewpoint-id", viewpoint.id)}
+      ${renderTextField("Label", "viewpoint-label", viewpoint.label)}
+      ${renderTextAreaField("Summary", "viewpoint-summary", viewpoint.summary)}
+      ${renderTextField("Focus object", "viewpoint-focus", viewpoint.focusObjectId ?? "")}
+      ${renderTextField("Selected object", "viewpoint-select", viewpoint.selectedObjectId ?? "")}
       ${renderSelectField("Projection", "viewpoint-projection", [
         ["topdown", "Topdown"],
         ["isometric", "Isometric"],
         ["orthographic", "Orthographic"],
         ["perspective", "Perspective"],
-    ], viewpoint.projection)}
+    ], viewpoint.projection)}
       ${renderSelectField("Preset", "viewpoint-preset", [
         ["", "Document default"],
         ["diagram", "Diagram"],
         ["presentation", "Presentation"],
         ["atlas-card", "Atlas Card"],
         ["markdown", "Markdown"],
-    ], viewpoint.preset ?? "")}
-      ${renderTextField("Zoom", "viewpoint-zoom", viewpoint.zoom === null ? "" : String(viewpoint.zoom))}
-      ${renderTextField("Rotation", "viewpoint-rotation", String(viewpoint.rotationDeg))}`, true)}
-    ${renderInspectorSection("viewpoint", "camera", "Camera", `${renderTextField("Azimuth", "viewpoint-camera-azimuth", viewpoint.camera?.azimuth === null || viewpoint.camera?.azimuth === undefined ? "" : String(viewpoint.camera.azimuth))}
-      ${renderTextField("Elevation", "viewpoint-camera-elevation", viewpoint.camera?.elevation === null || viewpoint.camera?.elevation === undefined ? "" : String(viewpoint.camera.elevation))}
-      ${renderTextField("Roll", "viewpoint-camera-roll", viewpoint.camera?.roll === null || viewpoint.camera?.roll === undefined ? "" : String(viewpoint.camera.roll))}
-      ${renderTextField("Distance", "viewpoint-camera-distance", viewpoint.camera?.distance === null || viewpoint.camera?.distance === undefined ? "" : String(viewpoint.camera.distance))}
-      <p class="wo-editor-inline-note">Rotation stays a 2D screen-rotation hint. The camera block stores Schema 2.5 view direction and framing.</p>`)}
-    ${renderInspectorSection("viewpoint", "layers", "Layers", `<fieldset class="wo-editor-fieldset">
-        <legend>Layers</legend>
-        ${renderCheckboxField("Background", "layer-background", viewpoint.layers.background !== false)}
-        ${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)}
-      </fieldset>`)}
-    ${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("Events", "viewpoint-events", viewpoint.events.join(" "))}`)}
+    ], viewpoint.preset ?? "")}
+      ${renderTextField("Zoom", "viewpoint-zoom", viewpoint.zoom === null ? "" : String(viewpoint.zoom))}
+      ${renderTextField("Rotation", "viewpoint-rotation", String(viewpoint.rotationDeg))}`, true)}
+    ${renderInspectorSection("viewpoint", "camera", "Camera", `${renderTextField("Azimuth", "viewpoint-camera-azimuth", viewpoint.camera?.azimuth === null || viewpoint.camera?.azimuth === undefined ? "" : String(viewpoint.camera.azimuth))}
+      ${renderTextField("Elevation", "viewpoint-camera-elevation", viewpoint.camera?.elevation === null || viewpoint.camera?.elevation === undefined ? "" : String(viewpoint.camera.elevation))}
+      ${renderTextField("Roll", "viewpoint-camera-roll", viewpoint.camera?.roll === null || viewpoint.camera?.roll === undefined ? "" : String(viewpoint.camera.roll))}
+      ${renderTextField("Distance", "viewpoint-camera-distance", viewpoint.camera?.distance === null || viewpoint.camera?.distance === undefined ? "" : String(viewpoint.camera.distance))}
+      <p class="wo-editor-inline-note">Rotation stays a 2D screen-rotation hint. The camera block stores Schema 3.0 view direction and framing.</p>`)}
+    ${renderInspectorSection("viewpoint", "layers", "Layers", `<fieldset class="wo-editor-fieldset">
+        <legend>Layers</legend>
+        ${renderCheckboxField("Background", "layer-background", viewpoint.layers.background !== false)}
+        ${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)}
+      </fieldset>`)}
+    ${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("Events", "viewpoint-events", viewpoint.events.join(" "))}`)}
   </form>`;
 }
 function renderEventInspector(formState, id) {
@@ -1957,30 +1980,32 @@ function renderEventInspector(formState, id) {
         .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("Epoch", "event-epoch", eventEntry.epoch ?? "")}
-      ${renderTextField("Reference plane", "event-referencePlane", eventEntry.referencePlane ?? "")}
-      ${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)}`)}
+    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("Epoch", "event-epoch", eventEntry.epoch ?? "")}
+      ${renderTextField("Reference plane", "event-referencePlane", eventEntry.referencePlane ?? "")}
+      ${renderTextField("Tags", "event-tags", eventEntry.tags.join(" "))}
+      ${renderTextField("Color", "event-color", eventEntry.color ?? "")}
+      ${renderCheckboxField("Hidden", "event-hidden", eventEntry.hidden === true)}`, true)}
+    ${renderInspectorSection("event", "trajectory", "Trajectory", `${renderTextField("Trajectory", "event-trajectory", eventEntry.trajectory ?? "")}
+      <p class="wo-editor-inline-note">Declarative transfer windows, flybys, and maneuver phases can be attached here. The core remains non-numeric.</p>`)}
+    ${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>`)}
+        : `<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) {
@@ -1998,34 +2023,34 @@ function renderEventPoseInspector(formState, eventId, objectId) {
             ? 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)}
+    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)}
-    ${renderInspectorSection("event-pose", "context", "Context", `${renderTextField("Epoch", "pose-epoch", pose.epoch ?? "")}
-      ${renderTextField("Reference plane", "pose-referencePlane", pose.referencePlane ?? "")}
-      <p class="wo-editor-inline-note">Falls back to event, then object, then system context when left empty.</p>`)}
+    ], 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)}
+    ${renderInspectorSection("event-pose", "context", "Context", `${renderTextField("Epoch", "pose-epoch", pose.epoch ?? "")}
+      ${renderTextField("Reference plane", "pose-referencePlane", pose.referencePlane ?? "")}
+      <p class="wo-editor-inline-note">Falls back to event, then object, then system context when left empty.</p>`)}
   </form>`;
 }
 function renderAnnotationInspector(formState, id) {
@@ -2033,14 +2058,14 @@ function renderAnnotationInspector(formState, id) {
     if (!annotation) {
         return `<p class="wo-editor-empty">Annotation not found.</p>`;
     }
-    return `<form class="wo-editor-form" data-editor-form="annotation">
-    <h2>Annotation</h2>
-    ${renderInspectorSection("annotation", "entry", "Entry", `${renderTextField("ID", "annotation-id", annotation.id)}
-      ${renderTextField("Label", "annotation-label", annotation.label)}
-      ${renderTextField("Target object", "annotation-target", annotation.targetObjectId ?? "")}
-      ${renderTextField("Source object", "annotation-source", annotation.sourceObjectId ?? "")}
-      ${renderTextAreaField("Body", "annotation-body", annotation.body)}
-      ${renderTextField("Tags", "annotation-tags", annotation.tags.join(" "))}`, true)}
+    return `<form class="wo-editor-form" data-editor-form="annotation">
+    <h2>Annotation</h2>
+    ${renderInspectorSection("annotation", "entry", "Entry", `${renderTextField("ID", "annotation-id", annotation.id)}
+      ${renderTextField("Label", "annotation-label", annotation.label)}
+      ${renderTextField("Target object", "annotation-target", annotation.targetObjectId ?? "")}
+      ${renderTextField("Source object", "annotation-source", annotation.sourceObjectId ?? "")}
+      ${renderTextAreaField("Body", "annotation-body", annotation.body)}
+      ${renderTextField("Tags", "annotation-tags", annotation.tags.join(" "))}`, true)}
   </form>`;
 }
 function renderObjectInspector(formState, id) {
@@ -2057,49 +2082,53 @@ function renderObjectInspector(formState, id) {
             ? formatUnitValue(object.placement.distance)
             : object.placement.descriptor ?? ""
         : "";
-    return `<form class="wo-editor-form" data-editor-form="object">
-    <h2>Object</h2>
-    ${renderInspectorSection("object", "identity", "Identity", `${renderTextField("ID", "object-id", object.id)}
-      ${renderSelectField("Type", "object-type", OBJECT_TYPES.map((type) => [type, humanizeIdentifier(type)]), object.type)}`, true)}
+    return `<form class="wo-editor-form" data-editor-form="object">
+    <h2>Object</h2>
+    ${renderInspectorSection("object", "identity", "Identity", `${renderTextField("ID", "object-id", object.id)}
+      ${renderSelectField("Type", "object-type", OBJECT_TYPES.map((type) => [type, humanizeIdentifier(type)]), object.type)}`, true)}
     ${renderInspectorSection("object", "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", object.placement?.mode === "orbit" && object.placement.distance ? formatUnitValue(object.placement.distance) : "")}
-      ${renderTextField("Semi-major", "placement-semiMajor", object.placement?.mode === "orbit" && object.placement.semiMajor ? formatUnitValue(object.placement.semiMajor) : "")}
-      ${renderTextField("Eccentricity", "placement-eccentricity", object.placement?.mode === "orbit" && object.placement.eccentricity !== undefined ? String(object.placement.eccentricity) : "")}
-      ${renderTextField("Period", "placement-period", object.placement?.mode === "orbit" && object.placement.period ? formatUnitValue(object.placement.period) : "")}
-      ${renderTextField("Angle", "placement-angle", object.placement?.mode === "orbit" && object.placement.angle ? formatUnitValue(object.placement.angle) : "")}
-      ${renderTextField("Inclination", "placement-inclination", object.placement?.mode === "orbit" && object.placement.inclination ? formatUnitValue(object.placement.inclination) : "")}
-      ${renderTextField("Phase", "placement-phase", object.placement?.mode === "orbit" && object.placement.phase ? formatUnitValue(object.placement.phase) : "")}`, true)}
-    ${renderInspectorSection("object", "properties", "Properties", `<fieldset class="wo-editor-fieldset">
-        <legend>Properties</legend>
-        ${renderTextField("Kind", "prop-kind", readStringProperty(object.properties.kind))}
-        ${renderTextField("Class", "prop-class", readStringProperty(object.properties.class))}
-        ${renderTextField("Culture", "prop-culture", readStringProperty(object.properties.culture))}
-        ${renderTextField("Tags", "prop-tags", readTagsProperty(object.properties.tags))}
-        ${renderTextField("Color", "prop-color", readStringProperty(object.properties.color))}
-        ${renderTextField("Image", "prop-image", readStringProperty(object.properties.image))}
-        ${renderCheckboxField("Hidden", "prop-hidden", object.properties.hidden === true)}
-        ${renderTextField("Radius", "prop-radius", readUnitProperty(object.properties.radius))}
-        ${renderTextField("Mass", "prop-mass", readUnitProperty(object.properties.mass))}
-        ${renderTextField("Density", "prop-density", readUnitProperty(object.properties.density))}
-        ${renderTextField("Gravity", "prop-gravity", readUnitProperty(object.properties.gravity))}
-        ${renderTextField("Temperature", "prop-temperature", readUnitProperty(object.properties.temperature))}
-        ${renderTextField("Albedo", "prop-albedo", readNumberProperty(object.properties.albedo))}
-        ${renderTextField("Atmosphere", "prop-atmosphere", readStringProperty(object.properties.atmosphere))}
-        ${renderTextField("Inner", "prop-inner", readUnitProperty(object.properties.inner))}
-        ${renderTextField("Outer", "prop-outer", readUnitProperty(object.properties.outer))}
-        ${renderTextField("On", "prop-on", readStringProperty(object.properties.on))}
-        ${renderTextField("Source", "prop-source", readStringProperty(object.properties.source))}
-        ${renderTextField("Cycle", "prop-cycle", readUnitProperty(object.properties.cycle))}
-      </fieldset>`)}
-    ${renderInspectorSection("object", "info", "Info", `${renderTextAreaField("Description", "info-description", object.info.description ?? "")}`)}
+    ], placementMode)}
+      ${renderTextField("Placement target", "placement-target", placementTarget)}
+      ${renderTextField("Free value", "placement-free", freeValue)}
+      ${renderTextField("Distance", "placement-distance", object.placement?.mode === "orbit" && object.placement.distance ? formatUnitValue(object.placement.distance) : "")}
+      ${renderTextField("Semi-major", "placement-semiMajor", object.placement?.mode === "orbit" && object.placement.semiMajor ? formatUnitValue(object.placement.semiMajor) : "")}
+      ${renderTextField("Eccentricity", "placement-eccentricity", object.placement?.mode === "orbit" && object.placement.eccentricity !== undefined ? String(object.placement.eccentricity) : "")}
+      ${renderTextField("Period", "placement-period", object.placement?.mode === "orbit" && object.placement.period ? formatUnitValue(object.placement.period) : "")}
+      ${renderTextField("Angle", "placement-angle", object.placement?.mode === "orbit" && object.placement.angle ? formatUnitValue(object.placement.angle) : "")}
+      ${renderTextField("Inclination", "placement-inclination", object.placement?.mode === "orbit" && object.placement.inclination ? formatUnitValue(object.placement.inclination) : "")}
+      ${renderTextField("Phase", "placement-phase", object.placement?.mode === "orbit" && object.placement.phase ? formatUnitValue(object.placement.phase) : "")}`, true)}
+    ${object.type === "craft"
+        ? renderInspectorSection("object", "trajectory", "Trajectory", `${renderTextField("Trajectory", "object-trajectory", object.trajectory ?? "")}
+            <p class="wo-editor-inline-note">Crafts can reference declarative trajectory definitions here. Swing-by and transfer details stay in the DSL, not the editor canvas.</p>`)
+        : ""}
+    ${renderInspectorSection("object", "properties", "Properties", `<fieldset class="wo-editor-fieldset">
+        <legend>Properties</legend>
+        ${renderTextField("Kind", "prop-kind", readStringProperty(object.properties.kind))}
+        ${renderTextField("Class", "prop-class", readStringProperty(object.properties.class))}
+        ${renderTextField("Culture", "prop-culture", readStringProperty(object.properties.culture))}
+        ${renderTextField("Tags", "prop-tags", readTagsProperty(object.properties.tags))}
+        ${renderTextField("Color", "prop-color", readStringProperty(object.properties.color))}
+        ${renderTextField("Image", "prop-image", readStringProperty(object.properties.image))}
+        ${renderCheckboxField("Hidden", "prop-hidden", object.properties.hidden === true)}
+        ${renderTextField("Radius", "prop-radius", readUnitProperty(object.properties.radius))}
+        ${renderTextField("Mass", "prop-mass", readUnitProperty(object.properties.mass))}
+        ${renderTextField("Density", "prop-density", readUnitProperty(object.properties.density))}
+        ${renderTextField("Gravity", "prop-gravity", readUnitProperty(object.properties.gravity))}
+        ${renderTextField("Temperature", "prop-temperature", readUnitProperty(object.properties.temperature))}
+        ${renderTextField("Albedo", "prop-albedo", readNumberProperty(object.properties.albedo))}
+        ${renderTextField("Atmosphere", "prop-atmosphere", readStringProperty(object.properties.atmosphere))}
+        ${renderTextField("Inner", "prop-inner", readUnitProperty(object.properties.inner))}
+        ${renderTextField("Outer", "prop-outer", readUnitProperty(object.properties.outer))}
+        ${renderTextField("On", "prop-on", readStringProperty(object.properties.on))}
+        ${renderTextField("Source", "prop-source", readStringProperty(object.properties.source))}
+        ${renderTextField("Cycle", "prop-cycle", readUnitProperty(object.properties.cycle))}
+      </fieldset>`)}
+    ${renderInspectorSection("object", "info", "Info", `${renderTextAreaField("Description", "info-description", object.info.description ?? "")}`)}
   </form>`;
 }
 function renderTextField(label, name, value) {
@@ -2249,8 +2278,20 @@ function createNewObject(type, id, document) {
     const orbitTarget = document.objects.find((object) => object.type === "star")?.id ??
         document.objects[0]?.id ??
         id;
+    if (type === "craft") {
+        return {
+            type: type,
+            id,
+            properties: {},
+            placement: {
+                mode: "free",
+                distance: { value: 1, unit: "au" },
+            },
+            info: {},
+        };
+    }
     return {
-        type,
+        type: type,
         id,
         properties: {},
         placement: type === "structure" || type === "phenomenon"
@@ -2488,7 +2529,7 @@ function updateOrbitRadius(document, path, objectId, scene, details, pointer, dr
         value: 1,
         unit: "au",
     };
-    const scaled = distanceMetricToUnitValue(Math.max(nextMetric, 0), dragContext.preferredUnit ?? currentValue.unit);
+    const scaled = distanceMetricToUnitValue(Math.max(nextMetric, 0), resolveOrbitDistanceUnit(document, details, Math.max(nextMetric, 0), dragContext.preferredUnit ?? currentValue.unit));
     applyOrbitDistanceValue(orbitPlacementOwner, scaled);
     const targetDisplayedRadius = nextDisplayedRadius;
     let correctedMetric = nextMetric;
@@ -2513,7 +2554,7 @@ function updateOrbitRadius(document, path, objectId, scene, details, pointer, dr
         }
         const correctionFactor = targetDisplayedRadius / Math.max(renderedRadius, 1);
         correctedMetric *= Math.max(correctionFactor, 1.02);
-        applyOrbitDistanceValue(orbitPlacementOwner, distanceMetricToUnitValue(Math.max(correctedMetric, 0), dragContext.preferredUnit ?? currentValue.unit));
+        applyOrbitDistanceValue(orbitPlacementOwner, distanceMetricToUnitValue(Math.max(correctedMetric, 0), resolveOrbitDistanceUnit(next, details, Math.max(correctedMetric, 0), dragContext.preferredUnit ?? currentValue.unit)));
     }
     return next;
 }
@@ -3002,6 +3043,10 @@ function mapDiagnosticFieldToInputNames(selection, field) {
                 default:
                     return [];
             }
+        case "trajectory":
+        case "trajectory-segment":
+        case "trajectory-maneuver":
+            return [];
         case "object":
             if (field === "id") {
                 return ["object-id"];
@@ -3028,6 +3073,8 @@ function mapDiagnosticFieldToInputNames(selection, field) {
                 return [`placement-${field}`];
             }
             return [`prop-${field}`];
+        default:
+            return [];
     }
 }
 function buildEmbedMarkup(source, document, viewMode) {
@@ -3051,6 +3098,12 @@ function describePath(path) {
             return `Event: ${path.id ?? ""}`;
         case "event-pose":
             return `Event Pose: ${path.id ?? ""} / ${path.key ?? ""}`;
+        case "trajectory":
+            return `Trajectory: ${path.id ?? ""}`;
+        case "trajectory-segment":
+            return `Trajectory Segment: ${path.id ?? ""} / ${path.key ?? ""}`;
+        case "trajectory-maneuver":
+            return `Trajectory Maneuver: ${path.id ?? ""} / ${path.key ?? ""}`;
         case "object":
             return `Object: ${path.id ?? ""}`;
         case "viewpoint":
@@ -3059,6 +3112,8 @@ function describePath(path) {
             return `Annotation: ${path.id ?? ""}`;
         case "relation":
             return `Relation: ${path.id ?? ""}`;
+        default:
+            return "Selection";
     }
 }
 function selectionKey(path) {
@@ -3197,6 +3252,53 @@ function normalizeFreeDistanceUnit(unit) {
             return null;
     }
 }
+function resolveOrbitDistanceUnit(document, details, metric, currentUnit) {
+    const normalizedMetric = Math.max(metric, 0);
+    const objectType = details.object.type;
+    const parentType = details.parent ? findObject(document, details.parent.objectId)?.type ?? null : null;
+    const nextPreferredUnit = inferOrbitDistanceUnit(objectType, parentType, normalizedMetric);
+    if (isOrbitDistanceUnitPlausible(normalizedMetric, currentUnit, nextPreferredUnit)) {
+        return currentUnit;
+    }
+    return nextPreferredUnit;
+}
+function inferOrbitDistanceUnit(objectType, parentType, metric) {
+    if (objectType === "ring") {
+        return "km";
+    }
+    if (objectType === "moon" ||
+        parentType === "planet" ||
+        parentType === "moon" ||
+        parentType === "asteroid" ||
+        parentType === "comet" ||
+        metric <= 0.02) {
+        return "km";
+    }
+    return "au";
+}
+function isOrbitDistanceUnitPlausible(metric, unit, preferredUnit) {
+    if (unit === preferredUnit) {
+        return true;
+    }
+    switch (unit) {
+        case "au":
+            return metric >= 0.03;
+        case "km":
+            return metric <= 0.03;
+        case "re": {
+            const earthRadii = (metric * AU_IN_KM) / EARTH_RADIUS_IN_KM;
+            return earthRadii >= 0.25 && earthRadii <= 400;
+        }
+        case "sol": {
+            const solarRadii = (metric * AU_IN_KM) / SOLAR_RADIUS_IN_KM;
+            return solarRadii >= 0.05 && solarRadii <= 120;
+        }
+        case null:
+            return false;
+        default:
+            return false;
+    }
+}
 function unitValueToDistanceMetric(value) {
     if (!value) {
         return null;
@@ -3284,460 +3386,483 @@ function installEditorStyles() {
     }
     const style = document.createElement("style");
     style.id = STYLE_ID;
-    style.textContent = `
-    .wo-editor {
-      --wo-editor-sidebar-width: 280px;
-      --wo-editor-inspector-width: 360px;
-      --wo-editor-source-height: 280px;
-    }
-    .wo-editor-shell { display: grid; gap: 16px; min-width: 0; }
-    .wo-editor-toolbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-width: 0; }
-    .wo-editor-toolbar-group { display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; }
-    .wo-editor-toolbar button, .wo-editor-toolbar select {
-      border: 1px solid rgba(240, 180, 100, 0.2);
-      border-radius: 999px;
-      background: rgba(240, 180, 100, 0.08);
-      color: #edf6ff;
-      font: 600 13px/1.4 "Segoe UI Variable", "Segoe UI", sans-serif;
-      padding: 10px 14px;
-    }
-    .wo-editor button:focus-visible,
-    .wo-editor select:focus-visible,
-    .wo-editor input:focus-visible,
-    .wo-editor textarea:focus-visible {
-      outline: 2px solid rgba(255, 214, 138, 0.95);
-      outline-offset: 2px;
-    }
-    .wo-editor-toolbar button:disabled { opacity: 0.45; cursor: not-allowed; }
-    .wo-editor-status {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      min-width: 0;
-    }
-    .wo-editor-status-pill {
-      border: 1px solid rgba(255,255,255,0.08);
-      border-radius: 999px;
-      background: rgba(255,255,255,0.04);
-      color: #edf6ff;
-      font: 600 12px/1.4 "Segoe UI Variable", "Segoe UI", sans-serif;
-      padding: 8px 12px;
-    }
-    .wo-editor-status-pill.is-clean { border-color: rgba(120, 255, 195, 0.22); color: #c7ffe5; }
-    .wo-editor-status-pill.is-dirty { border-color: rgba(240, 180, 100, 0.28); color: #ffd58a; }
-    .wo-editor-status-pill.is-warning { border-color: rgba(240, 180, 100, 0.28); color: #ffd58a; }
-    .wo-editor-status-pill.is-error { border-color: rgba(255, 120, 120, 0.3); color: #ffb2b2; }
-    .wo-editor-main {
-      display: grid;
-      grid-template-columns:
-        minmax(220px, var(--wo-editor-sidebar-width))
-        minmax(0, 1fr)
-        minmax(280px, var(--wo-editor-inspector-width));
-      gap: 16px;
-      min-width: 0;
-      align-items: start;
-    }
-    .wo-editor-sidebar, .wo-editor-stage-panel, .wo-editor-preview { display: grid; gap: 16px; min-width: 0; }
-    .wo-editor-panel {
-      border-radius: 24px;
-      border: 1px solid rgba(255,255,255,0.08);
-      background: rgba(7, 16, 25, 0.72);
-      padding: 18px;
-      min-width: 0;
-    }
-    .wo-editor-panel h2 {
-      margin: 0 0 14px;
-      color: #edf6ff;
-      font: 700 14px/1.2 "Segoe UI Variable Display", "Segoe UI", sans-serif;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-    }
-    .wo-editor-panel h3 {
-      margin: 0 0 12px;
-      color: rgba(237, 246, 255, 0.82);
-      font: 700 12px/1.2 "Segoe UI Variable", "Segoe UI", sans-serif;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-    }
-    .wo-editor-panel-section,
-    .wo-editor-inspector-section {
-      min-width: 0;
-    }
-    .wo-editor-panel-section > summary,
-    .wo-editor-inspector-section > summary {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-      cursor: pointer;
-      list-style: none;
-      color: #edf6ff;
-      font: 700 14px/1.2 "Segoe UI Variable Display", "Segoe UI", sans-serif;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-    }
-    .wo-editor-inspector-section > summary {
-      font: 700 12px/1.2 "Segoe UI Variable", "Segoe UI", sans-serif;
-      color: rgba(237, 246, 255, 0.9);
-    }
-    .wo-editor-panel-section > summary::-webkit-details-marker,
-    .wo-editor-inspector-section > summary::-webkit-details-marker,
-    .wo-editor-field-help > summary::-webkit-details-marker {
-      display: none;
-    }
-    .wo-editor-panel-section > summary::after,
-    .wo-editor-inspector-section > summary::after {
-      content: "▾";
-      color: rgba(240, 180, 100, 0.86);
-      font-size: 12px;
-      transition: transform 0.18s ease;
-    }
-    .wo-editor-panel-section:not([open]) > summary::after,
-    .wo-editor-inspector-section:not([open]) > summary::after {
-      transform: rotate(-90deg);
-    }
-    .wo-editor-panel-section-body {
-      display: grid;
-      gap: 16px;
-      margin-top: 14px;
-      min-width: 0;
-    }
-    .wo-editor-inspector-section-body {
-      display: grid;
-      gap: 12px;
-      margin-top: 12px;
-      min-width: 0;
-    }
-    .wo-editor[data-wo-show-inspector="false"] [data-editor-pane="inspector"] { display: none; }
-    .wo-editor[data-wo-show-text-pane="false"] [data-editor-pane="text"] { display: none; }
-    .wo-editor[data-wo-show-preview="false"] [data-editor-pane="preview"] { display: none; }
-    .wo-editor-stage-shell {
-      position: relative;
-      min-width: 0;
-      border-radius: 26px;
-      overflow: hidden;
-      border: 1px solid rgba(255,255,255,0.08);
-      background: rgba(8, 17, 28, 0.9);
-    }
-    .wo-editor-stage { min-height: 620px; min-width: 0; }
-    .wo-editor-overlay { position: absolute; inset: 0; pointer-events: none; }
-    .wo-editor-overlay > * { pointer-events: auto; }
-    .wo-editor-handle {
-      position: absolute;
-      transform: translate(-50%, -50%);
-      border: 0;
-      border-radius: 999px;
-      background: rgba(255, 214, 138, 0.92);
-      color: #071019;
-      cursor: grab;
-      font: 700 11px/1 "Segoe UI Variable", "Segoe UI", sans-serif;
-      padding: 8px 10px;
-      box-shadow: 0 10px 24px rgba(0,0,0,0.24);
-    }
-    .wo-editor-hint {
-      position: absolute;
-      transform: translate(-50%, -50%);
-      padding: 4px 8px;
-      border-radius: 999px;
-      background: rgba(18, 39, 58, 0.84);
-      color: #edf6ff;
-      font: 600 11px/1.3 "Segoe UI Variable", "Segoe UI", sans-serif;
-      white-space: nowrap;
-      box-shadow: 0 6px 18px rgba(0,0,0,0.22);
-    }
-    .wo-editor-hint.is-subtle { background: rgba(18, 39, 58, 0.64); color: rgba(237, 246, 255, 0.78); }
-    .wo-editor-hint-note { left: 16px; top: 16px; transform: none; }
-    .wo-editor-overlay-diagnostics {
-      position: absolute;
-      right: 16px;
-      top: 16px;
-      display: grid;
-      gap: 8px;
-      max-width: min(320px, calc(100% - 32px));
-    }
-    .wo-editor-overlay-diagnostic {
-      border-radius: 14px;
-      padding: 10px 12px;
-      background: rgba(10, 20, 32, 0.92);
-      box-shadow: 0 12px 30px rgba(0,0,0,0.28);
-    }
-    .wo-editor-overlay-diagnostic strong {
-      display: block;
-      margin-bottom: 4px;
-      font: 700 11px/1.2 "Segoe UI Variable", "Segoe UI", sans-serif;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-    }
-    .wo-editor-overlay-diagnostic p {
-      margin: 0;
-      color: #edf6ff;
-      font: 500 12px/1.4 "Segoe UI Variable", "Segoe UI", sans-serif;
-    }
-    .wo-editor-overlay-diagnostic-error { border: 1px solid rgba(255, 120, 120, 0.28); }
-    .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);
-      font: 600 11px/1.2 "Segoe UI Variable", "Segoe UI", sans-serif;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-    }
-    .wo-editor-outline-item {
-      border: 1px solid transparent;
-      border-radius: 16px;
-      background: rgba(255,255,255,0.04);
-      color: #edf6ff;
-      cursor: pointer;
-      font: 500 13px/1.4 "Segoe UI Variable", "Segoe UI", sans-serif;
-      padding: 10px 12px;
-      text-align: left;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-    }
-    .wo-editor-outline-item.is-active {
-      border-color: rgba(255, 214, 138, 0.34);
-      background: rgba(255, 214, 138, 0.12);
-      color: #ffdda9;
-    }
-    .wo-editor-outline-badge {
-      min-width: 22px;
-      border-radius: 999px;
-      background: rgba(240, 180, 100, 0.16);
-      color: #ffd58a;
-      font: 700 11px/1 "Segoe UI Variable", "Segoe UI", sans-serif;
-      padding: 5px 7px;
-      text-align: center;
-    }
-    .wo-editor-outline-badge.is-error {
-      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;
-      gap: 4px;
-      border-radius: 16px;
-      padding: 12px;
-      background: rgba(255,255,255,0.04);
-      color: #edf6ff;
-      font: 500 12px/1.45 "Segoe UI Variable", "Segoe UI", sans-serif;
-    }
-    .wo-editor-diagnostic strong { font-size: 11px; letter-spacing: 0.08em; }
-    .wo-editor-diagnostic p { margin: 0; color: rgba(237,246,255,0.82); }
-    .wo-editor-diagnostic-warning { border: 1px solid rgba(240, 180, 100, 0.22); }
-    .wo-editor-diagnostic-error { border: 1px solid rgba(255, 120, 120, 0.24); }
-    .wo-editor-inspector-summary {
-      display: grid;
-      gap: 10px;
-      margin-bottom: 14px;
-    }
-    .wo-editor-form { display: grid; gap: 12px; min-width: 0; }
-    .wo-editor-inspector-section {
-      border: 1px solid rgba(255,255,255,0.08);
-      border-radius: 18px;
-      padding: 14px;
-      background: rgba(255,255,255,0.02);
-    }
-    .wo-editor-field { display: grid; gap: 6px; }
-    .wo-editor-field-label,
-    .wo-editor-fieldset legend {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-    }
-    .wo-editor-field-label,
-    .wo-editor-checkbox .wo-editor-field-label,
-    .wo-editor-fieldset legend {
-      color: rgba(237,246,255,0.72);
-      font: 600 11px/1.2 "Segoe UI Variable", "Segoe UI", sans-serif;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-    }
-    .wo-editor-field input, .wo-editor-field select, .wo-editor-field textarea, .wo-editor-source {
-      width: 100%;
-      min-width: 0;
-      border: 1px solid rgba(255,255,255,0.08);
-      border-radius: 14px;
-      background: rgba(12, 26, 39, 0.84);
-      color: #edf6ff;
-      font: 500 13px/1.5 "Segoe UI Variable", "Segoe UI", sans-serif;
-      padding: 10px 12px;
-      box-sizing: border-box;
-    }
-    .wo-editor-field.has-error input,
-    .wo-editor-field.has-error select,
-    .wo-editor-field.has-error textarea,
-    .wo-editor-checkbox.has-error {
-      border-color: rgba(255, 120, 120, 0.44);
-    }
-    .wo-editor-field.has-warning input,
-    .wo-editor-field.has-warning select,
-    .wo-editor-field.has-warning textarea,
-    .wo-editor-checkbox.has-warning {
-      border-color: rgba(240, 180, 100, 0.42);
-    }
-    .wo-editor-field textarea, .wo-editor-source { min-height: 110px; resize: vertical; }
-    .wo-editor-source {
-      min-height: var(--wo-editor-source-height);
-      font-family: "Cascadia Code", "Consolas", monospace;
-      white-space: pre;
-      overflow: auto;
-    }
-    .wo-editor-field-note {
-      color: rgba(237,246,255,0.72);
-      font: 500 12px/1.45 "Segoe UI Variable", "Segoe UI", sans-serif;
-    }
-    .wo-editor-field-note.is-error { color: #ffb2b2; }
-    .wo-editor-field-note.is-warning { color: #ffd58a; }
-    .wo-editor-fieldset {
-      display: grid;
-      gap: 10px;
-      border: 1px solid rgba(255,255,255,0.08);
-      border-radius: 18px;
-      padding: 14px;
-      min-width: 0;
-    }
-    .wo-editor-checkbox {
-      display: flex;
-      gap: 10px;
-      align-items: flex-start;
-      color: #edf6ff;
-      font: 500 13px/1.4 "Segoe UI Variable", "Segoe UI", sans-serif;
-    }
-    .wo-editor-checkbox input {
-      margin-top: 2px;
-    }
-    .wo-editor-field-help {
-      position: relative;
-      flex: 0 0 auto;
-    }
-    .wo-editor-field-help > summary {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 20px;
-      height: 20px;
-      border-radius: 999px;
-      border: 1px solid rgba(240, 180, 100, 0.28);
-      background: rgba(240, 180, 100, 0.12);
-      color: #ffdda9;
-      cursor: pointer;
-      font: 700 11px/1 "Segoe UI Variable", "Segoe UI", sans-serif;
-      list-style: none;
-    }
-    .wo-editor-field-help-card {
-      display: grid;
-      gap: 8px;
-      margin-top: 8px;
-      padding: 10px 12px;
-      border-radius: 14px;
-      border: 1px solid rgba(240, 180, 100, 0.2);
-      background: rgba(12, 26, 39, 0.92);
-      color: rgba(237, 246, 255, 0.86);
-      text-transform: none;
-      letter-spacing: normal;
-      font: 500 12px/1.45 "Segoe UI Variable", "Segoe UI", sans-serif;
-    }
-    .wo-editor-field-help-card p {
-      margin: 0;
-    }
-    .wo-editor-field-help-chips {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-    }
-    .wo-editor-field-help-chips span {
-      border-radius: 999px;
-      padding: 4px 8px;
-      background: rgba(255,255,255,0.06);
-      color: #edf6ff;
-      font: 600 11px/1.3 "Segoe UI Variable", "Segoe UI", sans-serif;
-      text-transform: none;
-      letter-spacing: normal;
-    }
-    .wo-editor-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    .wo-editor-preview-card {
-      border-radius: 18px;
-      border: 1px solid rgba(255,255,255,0.08);
-      background: rgba(255,255,255,0.03);
-      padding: 14px;
-      min-width: 0;
-    }
-    .wo-editor-preview-visual {
-      min-height: 240px;
-      overflow: auto;
-    }
-    .wo-editor-preview-markup {
-      margin: 0;
-      min-height: 240px;
-      white-space: pre-wrap;
-      overflow-wrap: anywhere;
-      color: #edf6ff;
-      font: 12px/1.5 "Cascadia Code", "Consolas", monospace;
-    }
-    .wo-editor-source-diagnostics {
-      display: grid;
-      gap: 10px;
-      margin-top: 14px;
-    }
-    .wo-editor-empty {
-      margin: 0;
-      color: rgba(237,246,255,0.68);
-      font: 500 12px/1.5 "Segoe UI Variable", "Segoe UI", sans-serif;
-    }
-    .wo-editor-live-region {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      border: 0;
-    }
-    @media (max-width: 1280px) {
-      .wo-editor-main { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
-      .wo-editor-inspector { grid-column: 1 / -1; }
-      .wo-editor-preview { grid-template-columns: 1fr; }
-    }
-    @media (max-width: 960px) {
-      .wo-editor-main { grid-template-columns: 1fr; }
-      .wo-editor-stage { min-height: 440px; }
-      .wo-editor-status { flex-direction: column; }
-    }
+    style.textContent = `
+    .wo-editor {
+      --wo-editor-sidebar-width: 280px;
+      --wo-editor-inspector-width: 360px;
+      --wo-editor-source-height: 280px;
+    }
+    .wo-editor-shell { display: grid; gap: 16px; min-width: 0; }
+    .wo-editor-toolbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-width: 0; }
+    .wo-editor-toolbar-group { display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; }
+    .wo-editor-toolbar button, .wo-editor-toolbar select {
+      border: 1px solid rgba(240, 180, 100, 0.2);
+      border-radius: 999px;
+      background: rgba(240, 180, 100, 0.08);
+      color: #edf6ff;
+      font: 600 13px/1.4 "Segoe UI Variable", "Segoe UI", sans-serif;
+      padding: 10px 14px;
+    }
+    .wo-editor button:focus-visible,
+    .wo-editor select:focus-visible,
+    .wo-editor input:focus-visible,
+    .wo-editor textarea:focus-visible {
+      outline: 2px solid rgba(255, 214, 138, 0.95);
+      outline-offset: 2px;
+    }
+    .wo-editor-toolbar button:disabled { opacity: 0.45; cursor: not-allowed; }
+    .wo-editor-status {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      min-width: 0;
+    }
+    .wo-editor-status-pill {
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.04);
+      color: #edf6ff;
+      font: 600 12px/1.4 "Segoe UI Variable", "Segoe UI", sans-serif;
+      padding: 8px 12px;
+    }
+    .wo-editor-status-pill.is-clean { border-color: rgba(120, 255, 195, 0.22); color: #c7ffe5; }
+    .wo-editor-status-pill.is-dirty { border-color: rgba(240, 180, 100, 0.28); color: #ffd58a; }
+    .wo-editor-status-pill.is-warning { border-color: rgba(240, 180, 100, 0.28); color: #ffd58a; }
+    .wo-editor-status-pill.is-error { border-color: rgba(255, 120, 120, 0.3); color: #ffb2b2; }
+    .wo-editor-main {
+      display: grid;
+      grid-template-columns:
+        minmax(220px, var(--wo-editor-sidebar-width))
+        minmax(0, 1fr)
+        minmax(280px, var(--wo-editor-inspector-width));
+      gap: 16px;
+      min-width: 0;
+      align-items: start;
+    }
+    .wo-editor-sidebar, .wo-editor-stage-panel, .wo-editor-preview { display: grid; gap: 16px; min-width: 0; }
+    .wo-editor-panel {
+      border-radius: 24px;
+      border: 1px solid rgba(255,255,255,0.08);
+      background: rgba(7, 16, 25, 0.72);
+      padding: 18px;
+      min-width: 0;
+    }
+    .wo-editor-panel h2 {
+      margin: 0 0 14px;
+      color: #edf6ff;
+      font: 700 14px/1.2 "Segoe UI Variable Display", "Segoe UI", sans-serif;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+    .wo-editor-panel h3 {
+      margin: 0 0 12px;
+      color: rgba(237, 246, 255, 0.82);
+      font: 700 12px/1.2 "Segoe UI Variable", "Segoe UI", sans-serif;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+    .wo-editor-panel-section,
+    .wo-editor-inspector-section {
+      min-width: 0;
+    }
+    .wo-editor-panel-section > summary,
+    .wo-editor-inspector-section > summary {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      cursor: pointer;
+      list-style: none;
+      color: #edf6ff;
+      font: 700 14px/1.2 "Segoe UI Variable Display", "Segoe UI", sans-serif;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+    .wo-editor-inspector-section > summary {
+      font: 700 12px/1.2 "Segoe UI Variable", "Segoe UI", sans-serif;
+      color: rgba(237, 246, 255, 0.9);
+    }
+    .wo-editor-panel-section > summary::-webkit-details-marker,
+    .wo-editor-inspector-section > summary::-webkit-details-marker,
+    .wo-editor-field-help > summary::-webkit-details-marker {
+      display: none;
+    }
+    .wo-editor-panel-section > summary::after,
+    .wo-editor-inspector-section > summary::after {
+      content: "▾";
+      color: rgba(240, 180, 100, 0.86);
+      font-size: 12px;
+      transition: transform 0.18s ease;
+    }
+    .wo-editor-panel-section:not([open]) > summary::after,
+    .wo-editor-inspector-section:not([open]) > summary::after {
+      transform: rotate(-90deg);
+    }
+    .wo-editor-panel-section-body {
+      display: grid;
+      gap: 16px;
+      margin-top: 14px;
+      min-width: 0;
+    }
+    .wo-editor-inspector-section-body {
+      display: grid;
+      gap: 12px;
+      margin-top: 12px;
+      min-width: 0;
+    }
+    .wo-editor[data-wo-show-inspector="false"] [data-editor-pane="inspector"] { display: none; }
+    .wo-editor[data-wo-show-text-pane="false"] [data-editor-pane="text"] { display: none; }
+    .wo-editor[data-wo-show-preview="false"] [data-editor-pane="preview"] { display: none; }
+    .wo-editor[data-wo-sticky-stage="true"] .wo-editor-stage-panel {
+      position: sticky;
+      top: var(--wo-editor-stage-sticky-top, 12px);
+      align-self: start;
+      max-height: var(--wo-editor-stage-sticky-max-height, calc(100vh - 24px));
+    }
+    .wo-editor[data-wo-sticky-stage="true"] .wo-editor-stage-shell {
+      max-height: var(--wo-editor-stage-sticky-max-height, calc(100vh - 24px));
+    }
+    .wo-editor[data-wo-sticky-stage="true"] .wo-editor-stage {
+      min-height: min(620px, var(--wo-editor-stage-sticky-max-height, calc(100vh - 24px)));
+    }
+    .wo-editor-stage-shell {
+      position: relative;
+      min-width: 0;
+      border-radius: 26px;
+      overflow: hidden;
+      border: 1px solid rgba(255,255,255,0.08);
+      background: rgba(8, 17, 28, 0.9);
+    }
+    .wo-editor-stage { min-height: 620px; min-width: 0; }
+    .wo-editor-overlay { position: absolute; inset: 0; pointer-events: none; }
+    .wo-editor-overlay > * { pointer-events: auto; }
+    .wo-editor-handle {
+      position: absolute;
+      transform: translate(-50%, -50%);
+      border: 0;
+      border-radius: 999px;
+      background: rgba(255, 214, 138, 0.92);
+      color: #071019;
+      cursor: grab;
+      font: 700 11px/1 "Segoe UI Variable", "Segoe UI", sans-serif;
+      padding: 8px 10px;
+      box-shadow: 0 10px 24px rgba(0,0,0,0.24);
+    }
+    .wo-editor-hint {
+      position: absolute;
+      transform: translate(-50%, -50%);
+      padding: 4px 8px;
+      border-radius: 999px;
+      background: rgba(18, 39, 58, 0.84);
+      color: #edf6ff;
+      font: 600 11px/1.3 "Segoe UI Variable", "Segoe UI", sans-serif;
+      white-space: nowrap;
+      box-shadow: 0 6px 18px rgba(0,0,0,0.22);
+    }
+    .wo-editor-hint.is-subtle { background: rgba(18, 39, 58, 0.64); color: rgba(237, 246, 255, 0.78); }
+    .wo-editor-hint-note { left: 16px; top: 16px; transform: none; }
+    .wo-editor-overlay-diagnostics {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+      display: grid;
+      gap: 8px;
+      max-width: min(320px, calc(100% - 32px));
+    }
+    .wo-editor-overlay-diagnostic {
+      border-radius: 14px;
+      padding: 10px 12px;
+      background: rgba(10, 20, 32, 0.92);
+      box-shadow: 0 12px 30px rgba(0,0,0,0.28);
+    }
+    .wo-editor-overlay-diagnostic strong {
+      display: block;
+      margin-bottom: 4px;
+      font: 700 11px/1.2 "Segoe UI Variable", "Segoe UI", sans-serif;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .wo-editor-overlay-diagnostic p {
+      margin: 0;
+      color: #edf6ff;
+      font: 500 12px/1.4 "Segoe UI Variable", "Segoe UI", sans-serif;
+    }
+    .wo-editor-overlay-diagnostic-error { border: 1px solid rgba(255, 120, 120, 0.28); }
+    .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);
+      font: 600 11px/1.2 "Segoe UI Variable", "Segoe UI", sans-serif;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+    .wo-editor-outline-item {
+      border: 1px solid transparent;
+      border-radius: 16px;
+      background: rgba(255,255,255,0.04);
+      color: #edf6ff;
+      cursor: pointer;
+      font: 500 13px/1.4 "Segoe UI Variable", "Segoe UI", sans-serif;
+      padding: 10px 12px;
+      text-align: left;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+    }
+    .wo-editor-outline-item.is-active {
+      border-color: rgba(255, 214, 138, 0.34);
+      background: rgba(255, 214, 138, 0.12);
+      color: #ffdda9;
+    }
+    .wo-editor-outline-badge {
+      min-width: 22px;
+      border-radius: 999px;
+      background: rgba(240, 180, 100, 0.16);
+      color: #ffd58a;
+      font: 700 11px/1 "Segoe UI Variable", "Segoe UI", sans-serif;
+      padding: 5px 7px;
+      text-align: center;
+    }
+    .wo-editor-outline-badge.is-error {
+      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;
+      gap: 4px;
+      border-radius: 16px;
+      padding: 12px;
+      background: rgba(255,255,255,0.04);
+      color: #edf6ff;
+      font: 500 12px/1.45 "Segoe UI Variable", "Segoe UI", sans-serif;
+    }
+    .wo-editor-diagnostic strong { font-size: 11px; letter-spacing: 0.08em; }
+    .wo-editor-diagnostic p { margin: 0; color: rgba(237,246,255,0.82); }
+    .wo-editor-diagnostic-warning { border: 1px solid rgba(240, 180, 100, 0.22); }
+    .wo-editor-diagnostic-error { border: 1px solid rgba(255, 120, 120, 0.24); }
+    .wo-editor-inspector-summary {
+      display: grid;
+      gap: 10px;
+      margin-bottom: 14px;
+    }
+    .wo-editor-form { display: grid; gap: 12px; min-width: 0; }
+    .wo-editor-inspector-section {
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 18px;
+      padding: 14px;
+      background: rgba(255,255,255,0.02);
+    }
+    .wo-editor-field { display: grid; gap: 6px; }
+    .wo-editor-field-label,
+    .wo-editor-fieldset legend {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+    }
+    .wo-editor-field-label,
+    .wo-editor-checkbox .wo-editor-field-label,
+    .wo-editor-fieldset legend {
+      color: rgba(237,246,255,0.72);
+      font: 600 11px/1.2 "Segoe UI Variable", "Segoe UI", sans-serif;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+    .wo-editor-field input, .wo-editor-field select, .wo-editor-field textarea, .wo-editor-source {
+      width: 100%;
+      min-width: 0;
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 14px;
+      background: rgba(12, 26, 39, 0.84);
+      color: #edf6ff;
+      font: 500 13px/1.5 "Segoe UI Variable", "Segoe UI", sans-serif;
+      padding: 10px 12px;
+      box-sizing: border-box;
+    }
+    .wo-editor-field.has-error input,
+    .wo-editor-field.has-error select,
+    .wo-editor-field.has-error textarea,
+    .wo-editor-checkbox.has-error {
+      border-color: rgba(255, 120, 120, 0.44);
+    }
+    .wo-editor-field.has-warning input,
+    .wo-editor-field.has-warning select,
+    .wo-editor-field.has-warning textarea,
+    .wo-editor-checkbox.has-warning {
+      border-color: rgba(240, 180, 100, 0.42);
+    }
+    .wo-editor-field textarea, .wo-editor-source { min-height: 110px; resize: vertical; }
+    .wo-editor-source {
+      min-height: var(--wo-editor-source-height);
+      font-family: "Cascadia Code", "Consolas", monospace;
+      white-space: pre;
+      overflow: auto;
+    }
+    .wo-editor-field-note {
+      color: rgba(237,246,255,0.72);
+      font: 500 12px/1.45 "Segoe UI Variable", "Segoe UI", sans-serif;
+    }
+    .wo-editor-field-note.is-error { color: #ffb2b2; }
+    .wo-editor-field-note.is-warning { color: #ffd58a; }
+    .wo-editor-fieldset {
+      display: grid;
+      gap: 10px;
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 18px;
+      padding: 14px;
+      min-width: 0;
+    }
+    .wo-editor-checkbox {
+      display: flex;
+      gap: 10px;
+      align-items: flex-start;
+      color: #edf6ff;
+      font: 500 13px/1.4 "Segoe UI Variable", "Segoe UI", sans-serif;
+    }
+    .wo-editor-checkbox input {
+      margin-top: 2px;
+    }
+    .wo-editor-field-help {
+      position: relative;
+      flex: 0 0 auto;
+    }
+    .wo-editor-field-help > summary {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      border-radius: 999px;
+      border: 1px solid rgba(240, 180, 100, 0.28);
+      background: rgba(240, 180, 100, 0.12);
+      color: #ffdda9;
+      cursor: pointer;
+      font: 700 11px/1 "Segoe UI Variable", "Segoe UI", sans-serif;
+      list-style: none;
+    }
+    .wo-editor-field-help-card {
+      display: grid;
+      gap: 8px;
+      margin-top: 8px;
+      padding: 10px 12px;
+      border-radius: 14px;
+      border: 1px solid rgba(240, 180, 100, 0.2);
+      background: rgba(12, 26, 39, 0.92);
+      color: rgba(237, 246, 255, 0.86);
+      text-transform: none;
+      letter-spacing: normal;
+      font: 500 12px/1.45 "Segoe UI Variable", "Segoe UI", sans-serif;
+    }
+    .wo-editor-field-help-card p {
+      margin: 0;
+    }
+    .wo-editor-field-help-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+    .wo-editor-field-help-chips span {
+      border-radius: 999px;
+      padding: 4px 8px;
+      background: rgba(255,255,255,0.06);
+      color: #edf6ff;
+      font: 600 11px/1.3 "Segoe UI Variable", "Segoe UI", sans-serif;
+      text-transform: none;
+      letter-spacing: normal;
+    }
+    .wo-editor-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .wo-editor-preview-card {
+      border-radius: 18px;
+      border: 1px solid rgba(255,255,255,0.08);
+      background: rgba(255,255,255,0.03);
+      padding: 14px;
+      min-width: 0;
+    }
+    .wo-editor-preview-visual {
+      min-height: 240px;
+      overflow: auto;
+    }
+    .wo-editor-preview-markup {
+      margin: 0;
+      min-height: 240px;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+      color: #edf6ff;
+      font: 12px/1.5 "Cascadia Code", "Consolas", monospace;
+    }
+    .wo-editor-source-diagnostics {
+      display: grid;
+      gap: 10px;
+      margin-top: 14px;
+    }
+    .wo-editor-empty {
+      margin: 0;
+      color: rgba(237,246,255,0.68);
+      font: 500 12px/1.5 "Segoe UI Variable", "Segoe UI", sans-serif;
+    }
+    .wo-editor-live-region {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+    @media (max-width: 1280px) {
+      .wo-editor-main { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
+      .wo-editor-inspector { grid-column: 1 / -1; }
+      .wo-editor-preview { grid-template-columns: 1fr; }
+    }
+    @media (max-width: 960px) {
+      .wo-editor-main { grid-template-columns: 1fr; }
+      .wo-editor[data-wo-sticky-stage="true"] .wo-editor-stage-panel {
+        position: relative;
+        top: auto;
+        max-height: none;
+      }
+      .wo-editor[data-wo-sticky-stage="true"] .wo-editor-stage-shell {
+        max-height: none;
+      }
+      .wo-editor[data-wo-sticky-stage="true"] .wo-editor-stage {
+        min-height: 440px;
+      }
+      .wo-editor-stage { min-height: 440px; }
+      .wo-editor-status { flex-direction: column; }
+    }
   `;
     document.head.append(style);
 }