worldorbit 2.5.2

package/packages/viewer/dist/index.js

@@ -0,0 +1,8 @@
+export { getThemePreset, resolveLayers, resolveTheme } from "./theme.js";
+export { deserializeViewerAtlasState, normalizeViewerFilter, sceneViewpointToLayerOptions, searchSceneObjects, serializeViewerAtlasState, viewpointToViewerFilter, } from "./atlas-state.js";
+export { DEFAULT_VIEWER_STATE, clampScale, composeViewerTransform, fitViewerState, focusViewerState, getViewerVisibleBounds, invertViewerPoint, getSceneCenter, normalizeRotation, panViewerState, rotateViewerState, zoomViewerStateAt, } from "./viewer-state.js";
+export { WORLD_LAYER_ID, renderDocumentToSvg, renderSceneToSvg, renderSourceToSvg, } from "./render.js";
+export { createEmbedPayload, createWorldOrbitEmbedMarkup, deserializeWorldOrbitEmbedPayload, mountWorldOrbitEmbeds, serializeWorldOrbitEmbedPayload, } from "./embed.js";
+export { defineWorldOrbitViewerElement } from "./custom-element.js";
+export { createAtlasViewer } from "./atlas-viewer.js";
+export { createInteractiveViewer } from "./viewer.js";

package/packages/viewer/dist/minimap.d.ts

@@ -0,0 +1,3 @@
+import type { RenderScene, RenderSceneObject } from "@worldorbit/core";
+import type { ViewerState } from "./types.js";
+export declare function renderViewerMinimap(scene: RenderScene, state: ViewerState, visibleObjects: RenderSceneObject[]): string;

package/packages/viewer/dist/minimap.js

@@ -0,0 +1,63 @@
+import { getViewerVisibleBounds } from "./viewer-state.js";
+const MINIMAP_WIDTH = 180;
+const MINIMAP_HEIGHT = 120;
+const MINIMAP_PADDING = 10;
+export function renderViewerMinimap(scene, state, visibleObjects) {
+    const bounds = scene.contentBounds.width > 0 && scene.contentBounds.height > 0
+        ? scene.contentBounds
+        : {
+            minX: 0,
+            minY: 0,
+            maxX: scene.width,
+            maxY: scene.height,
+            width: scene.width,
+            height: scene.height,
+            centerX: scene.width / 2,
+            centerY: scene.height / 2,
+        };
+    const scale = Math.min((MINIMAP_WIDTH - MINIMAP_PADDING * 2) / Math.max(bounds.width, 1), (MINIMAP_HEIGHT - MINIMAP_PADDING * 2) / Math.max(bounds.height, 1));
+    const translateX = (MINIMAP_WIDTH - bounds.width * scale) / 2 - bounds.minX * scale;
+    const translateY = (MINIMAP_HEIGHT - bounds.height * scale) / 2 - bounds.minY * scale;
+    const viewport = getViewerVisibleBounds(scene, state);
+    const objectsMarkup = visibleObjects
+        .map((object) => {
+        const x = object.x * scale + translateX;
+        const y = object.y * scale + translateY;
+        const radius = Math.max(1.4, Math.min(object.visualRadius * scale, 5.2));
+        const fill = object.fillColor ?? minimapColorForObject(object.object.type);
+        return `<circle cx="${formatNumber(x)}" cy="${formatNumber(y)}" r="${formatNumber(radius)}" fill="${fill}" fill-opacity="0.92" />`;
+    })
+        .join("");
+    return `<div data-worldorbit-minimap="true" style="position:absolute;right:16px;bottom:16px;width:${MINIMAP_WIDTH}px;height:${MINIMAP_HEIGHT}px;padding:8px;border-radius:16px;background:rgba(5, 14, 22, 0.78);border:1px solid rgba(179, 216, 255, 0.16);box-shadow:0 14px 28px rgba(0, 0, 0, 0.24);backdrop-filter:blur(8px);pointer-events:none;">
+  <svg width="${MINIMAP_WIDTH}" height="${MINIMAP_HEIGHT}" viewBox="0 0 ${MINIMAP_WIDTH} ${MINIMAP_HEIGHT}" role="presentation" aria-hidden="true">
+    <rect x="0.5" y="0.5" width="${MINIMAP_WIDTH - 1}" height="${MINIMAP_HEIGHT - 1}" rx="12" ry="12" fill="rgba(7, 17, 27, 0.85)" stroke="rgba(179, 216, 255, 0.18)" />
+    <rect x="${formatNumber(bounds.minX * scale + translateX)}" y="${formatNumber(bounds.minY * scale + translateY)}" width="${formatNumber(bounds.width * scale)}" height="${formatNumber(bounds.height * scale)}" rx="10" ry="10" fill="rgba(163, 209, 255, 0.04)" stroke="rgba(163, 209, 255, 0.16)" />
+    ${objectsMarkup}
+    <rect x="${formatNumber(viewport.minX * scale + translateX)}" y="${formatNumber(viewport.minY * scale + translateY)}" width="${formatNumber(viewport.width * scale)}" height="${formatNumber(viewport.height * scale)}" rx="8" ry="8" fill="rgba(255, 180, 100, 0.09)" stroke="rgba(255, 180, 100, 0.88)" stroke-width="1.4" />
+  </svg>
+</div>`;
+}
+function minimapColorForObject(type) {
+    switch (type) {
+        case "star":
+            return "#ffcc67";
+        case "planet":
+            return "#72b7ff";
+        case "moon":
+            return "#c7d7ea";
+        case "belt":
+        case "ring":
+            return "#d9aa74";
+        case "asteroid":
+            return "#a7a5b8";
+        case "comet":
+            return "#9ce7ff";
+        case "structure":
+            return "#ff7f5f";
+        case "phenomenon":
+            return "#78ffd7";
+    }
+}
+function formatNumber(value) {
+    return Number.isInteger(value) ? String(value) : value.toFixed(2);
+}

package/packages/viewer/dist/render.d.ts

@@ -0,0 +1,6 @@
+import { type RenderScene, type WorldOrbitDocument } from "@worldorbit/core";
+import type { SvgRenderOptions } from "./types.js";
+export declare const WORLD_LAYER_ID = "worldorbit-camera-root";
+export declare function renderSceneToSvg(scene: RenderScene, options?: SvgRenderOptions): string;
+export declare function renderDocumentToSvg(document: WorldOrbitDocument, options?: SvgRenderOptions): string;
+export declare function renderSourceToSvg(source: string, options?: SvgRenderOptions): string;

package/packages/viewer/dist/render.js

@@ -0,0 +1,585 @@
+import { loadWorldOrbitSource, renderDocumentToScene, } from "@worldorbit/core";
+import { computeVisibleObjectIds } from "./atlas-state.js";
+import { resolveLayers, resolveTheme } from "./theme.js";
+export const WORLD_LAYER_ID = "worldorbit-camera-root";
+export function renderSceneToSvg(scene, options = {}) {
+    const theme = resolveTheme(options.theme);
+    const presetDefaults = resolveRenderPreset(options.preset ?? scene.renderPreset ?? undefined);
+    const layers = resolveLayers({
+        ...presetDefaults.layers,
+        ...options.layers,
+    });
+    const subtitle = options.subtitle ?? scene.subtitle;
+    const visibleObjectIds = computeVisibleObjectIds(scene, options.filter ?? null);
+    const visibleObjects = scene.objects
+        .filter((object) => !object.hidden)
+        .filter((object) => visibleObjectIds.has(object.objectId))
+        .filter((object) => layers.structures || !isStructureLike(object.object))
+        .sort((left, right) => left.sortKey - right.sortKey);
+    const visibleLabels = scene.labels
+        .filter((label) => !label.hidden)
+        .filter((label) => visibleObjectIds.has(label.objectId))
+        .filter((label) => layers.structures || !isStructureLike(label.object));
+    const imageDefinitions = buildImageDefinitions(visibleObjects);
+    const orbitMarkup = layers.orbits
+        ? renderOrbitLayer(scene, visibleObjectIds, layers.structures)
+        : { back: "", front: "" };
+    const leaderMarkup = layers.guides
+        ? scene.leaders
+            .filter((leader) => !leader.hidden)
+            .filter((leader) => visibleObjectIds.has(leader.objectId))
+            .filter((leader) => layers.structures || !isStructureLike(leader.object))
+            .map((leader) => `<line class="wo-leader wo-leader-${leader.mode}" x1="${leader.x1}" y1="${leader.y1}" x2="${leader.x2}" y2="${leader.y2}" data-render-id="${escapeXml(leader.renderId)}" data-group-id="${escapeAttribute(leader.groupId ?? "")}" />`)
+            .join("")
+        : "";
+    const objectMarkup = layers.objects
+        ? visibleObjects
+            .map((object) => renderSceneObject(object, options.selectedObjectId ?? null, theme))
+            .join("")
+        : "";
+    const labelMarkup = layers.labels
+        ? visibleLabels
+            .map((label) => renderSceneLabel(scene, label, options.selectedObjectId ?? null))
+            .join("")
+        : "";
+    const metadataMarkup = layers.metadata
+        ? `<text class="wo-title" x="56" y="64">${escapeXml(scene.title)}</text>
+  <text class="wo-subtitle" x="56" y="88">${escapeXml(subtitle)}</text>
+  <text class="wo-meta" x="56" y="${scene.height - 42}">${escapeXml(renderMetadata(scene))}</text>`
+        : "";
+    const backgroundMarkup = layers.background
+        ? `<rect class="wo-bg" x="0" y="0" width="${scene.width}" height="${scene.height}" rx="28" ry="28" />
+  <rect class="wo-bg-glow" x="0" y="0" width="${scene.width}" height="${scene.height}" rx="28" ry="28" />
+  ${layers.guides ? renderBackdrop(scene.width, scene.height) : ""}`
+        : "";
+    return `<svg xmlns="http://www.w3.org/2000/svg" data-worldorbit-svg="true" width="${scene.width}" height="${scene.height}" viewBox="0 0 ${scene.width} ${scene.height}" preserveAspectRatio="xMidYMid meet" role="img" aria-labelledby="worldorbit-title worldorbit-desc">
+  <title id="worldorbit-title">${escapeXml(scene.title)}</title>
+  <desc id="worldorbit-desc">A ${escapeXml(scene.viewMode)} WorldOrbit render with ${visibleObjects.length} visible objects.</desc>
+  <defs>
+    <linearGradient id="wo-bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="${theme.backgroundStart}" />
+      <stop offset="100%" stop-color="${theme.backgroundEnd}" />
+    </linearGradient>
+    <radialGradient id="wo-star-glow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="${theme.starGlow}" stop-opacity="0.95" />
+      <stop offset="100%" stop-color="${theme.starCore}" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="wo-bg-glow" cx="20%" cy="10%" r="90%">
+      <stop offset="0%" stop-color="${theme.backgroundGlow}" />
+      <stop offset="100%" stop-color="transparent" />
+    </radialGradient>
+    ${imageDefinitions}
+  </defs>
+  <style>
+    .wo-bg { fill: url(#wo-bg); }
+    .wo-bg-glow { fill: url(#wo-bg-glow); }
+    .wo-grid { fill: none; stroke: ${theme.guide}; stroke-width: 1; }
+    .wo-orbit { fill: none; stroke: ${theme.orbit}; stroke-width: 1.5; }
+    .wo-orbit-back { opacity: 0.38; stroke-dasharray: 8 6; }
+    .wo-orbit-front { opacity: 0.9; }
+    .wo-orbit-band { stroke: ${theme.orbitBand}; stroke-linecap: round; }
+    .wo-leader { stroke: ${theme.leader}; stroke-width: 1.5; stroke-dasharray: 6 5; }
+    .wo-label { fill: ${theme.ink}; font-family: ${theme.fontFamily}; font-weight: 600; letter-spacing: 0.02em; }
+    .wo-label-secondary { fill: ${theme.muted}; font-family: ${theme.fontFamily}; font-weight: 500; }
+    .wo-title { fill: ${theme.ink}; font: 700 24px ${theme.displayFont}; letter-spacing: 0.06em; text-transform: uppercase; }
+    .wo-subtitle { fill: ${theme.muted}; font: 500 12px ${theme.fontFamily}; letter-spacing: 0.14em; text-transform: uppercase; }
+    .wo-meta { fill: ${theme.muted}; font: 500 11px ${theme.fontFamily}; letter-spacing: 0.06em; }
+    .wo-object { cursor: pointer; outline: none; }
+    .wo-object:focus-visible .wo-selection-ring,
+    .wo-object:hover .wo-selection-ring,
+    .wo-object-selected .wo-selection-ring { display: block; }
+    .wo-object-selected .wo-selection-ring { stroke: ${theme.selected}; }
+    .wo-object-label-selected .wo-label { fill: ${theme.accent}; }
+    .wo-object-label-selected .wo-label-secondary { fill: ${theme.selected}; }
+    .wo-chain-selected .wo-selection-ring,
+    .wo-chain-hover .wo-selection-ring { display: block; }
+    .wo-ancestor-selected .wo-selection-ring,
+    .wo-ancestor-hover .wo-selection-ring { display: block; opacity: 0.66; }
+    .wo-chain-selected .wo-label,
+    .wo-chain-hover .wo-label { fill: ${theme.accent}; }
+    .wo-ancestor-selected .wo-label,
+    .wo-ancestor-hover .wo-label { fill: ${theme.ink}; opacity: 0.82; }
+    .wo-orbit-related-selected,
+    .wo-orbit-related-hover { stroke: ${theme.accentStrong}; opacity: 1; }
+    .wo-selection-ring { display: none; fill: none; stroke-width: 2; stroke-dasharray: 6 5; }
+    .wo-object-image { pointer-events: none; }
+  </style>
+  ${backgroundMarkup}
+  ${metadataMarkup}
+  <g data-worldorbit-world="true">
+    <g data-worldorbit-camera-root="${WORLD_LAYER_ID}" id="${WORLD_LAYER_ID}">
+      <g data-worldorbit-world-content="true">
+        ${layers.orbits ? `<g data-layer-id="orbits-back">${orbitMarkup.back}</g>` : ""}
+        ${layers.guides ? `<g data-layer-id="guides">${leaderMarkup}</g>` : ""}
+        ${layers.objects ? `<g data-layer-id="objects">${objectMarkup}</g>` : ""}
+        ${layers.orbits ? `<g data-layer-id="orbits-front">${orbitMarkup.front}</g>` : ""}
+        ${layers.labels ? `<g data-layer-id="labels">${labelMarkup}</g>` : ""}
+      </g>
+    </g>
+  </g>
+</svg>`;
+}
+export function renderDocumentToSvg(document, options = {}) {
+    return renderSceneToSvg(renderDocumentToScene(document, options), options);
+}
+export function renderSourceToSvg(source, options = {}) {
+    const loaded = loadWorldOrbitSource(source);
+    return renderDocumentToSvg(loaded.document, resolveSourceRenderOptions(loaded, options));
+}
+function resolveSourceRenderOptions(loaded, options) {
+    const atlasDocument = loaded.atlasDocument ?? loaded.draftDocument;
+    if (options.preset || !atlasDocument?.system?.defaults.preset) {
+        return options;
+    }
+    return {
+        ...options,
+        preset: atlasDocument.system.defaults.preset,
+    };
+}
+function renderOrbitLayer(scene, visibleObjectIds, includeStructures) {
+    const backParts = [];
+    const frontParts = [];
+    for (const visual of scene.orbitVisuals.filter((entry) => !entry.hidden &&
+        visibleObjectIds.has(entry.objectId) &&
+        (includeStructures || !isStructureLike(entry.object)))) {
+        const strokeWidth = visual.bandThickness ?? (visual.band ? 10 : 1.5);
+        const orbitClass = visual.band ? "wo-orbit wo-orbit-band wo-orbit-node" : "wo-orbit wo-orbit-node";
+        const dataAttributes = `data-render-id="${escapeXml(visual.renderId)}" data-orbit-object-id="${escapeAttribute(visual.objectId)}" data-parent-id="${escapeAttribute(visual.parentId)}" data-group-id="${escapeAttribute(visual.groupId ?? "")}"`;
+        if (visual.backArcPath || visual.frontArcPath) {
+            if (visual.backArcPath) {
+                backParts.push(`<path class="${orbitClass} wo-orbit-back" d="${visual.backArcPath}" stroke-width="${strokeWidth}" ${dataAttributes} />`);
+            }
+            if (visual.frontArcPath) {
+                frontParts.push(`<path class="${orbitClass} wo-orbit-front" d="${visual.frontArcPath}" stroke-width="${strokeWidth}" ${dataAttributes} />`);
+            }
+            continue;
+        }
+        if (visual.kind === "ellipse") {
+            const rx = visual.rx ?? visual.radius ?? 0;
+            const ry = visual.ry ?? visual.radius ?? 0;
+            frontParts.push(`<ellipse class="${orbitClass} wo-orbit-front" cx="${visual.cx}" cy="${visual.cy}" rx="${rx}" ry="${ry}" transform="rotate(${visual.rotationDeg} ${visual.cx} ${visual.cy})" stroke-width="${strokeWidth}" ${dataAttributes} />`);
+            continue;
+        }
+        frontParts.push(`<circle class="${orbitClass} wo-orbit-front" cx="${visual.cx}" cy="${visual.cy}" r="${visual.radius ?? 0}" stroke-width="${strokeWidth}" ${dataAttributes} />`);
+    }
+    return {
+        back: backParts.join(""),
+        front: frontParts.join(""),
+    };
+}
+function buildImageDefinitions(objects) {
+    return objects
+        .filter((object) => Boolean(object.imageHref))
+        .map((object) => renderImageClipPath(object))
+        .join("");
+}
+function renderSceneObject(sceneObject, selectedObjectId, theme) {
+    const { object, x, y, radius, visualRadius } = sceneObject;
+    const selectionClass = selectedObjectId === sceneObject.objectId ? " wo-object-selected" : "";
+    const palette = resolveObjectPalette(sceneObject, theme);
+    const imageMarkup = renderObjectImage(sceneObject);
+    const outlineMarkup = imageMarkup
+        ? renderObjectBody(object, x, y, radius, palette, { outlineOnly: true })
+        : "";
+    return `<g class="wo-object wo-object-${object.type}${selectionClass}" data-object-id="${escapeXml(sceneObject.objectId)}" data-parent-id="${escapeAttribute(sceneObject.parentId ?? "")}" data-group-id="${escapeAttribute(sceneObject.groupId ?? "")}" data-render-id="${escapeXml(sceneObject.renderId)}" tabindex="0" role="button" aria-label="${escapeXml(`${object.type} ${sceneObject.objectId}`)}">
+    <circle class="wo-selection-ring" cx="${x}" cy="${y}" r="${visualRadius + 8}" />
+    ${renderAtmosphere(sceneObject, palette)}
+    ${renderObjectBody(object, x, y, radius, palette)}
+    ${imageMarkup}
+    ${outlineMarkup}
+  </g>`;
+}
+function renderSceneLabel(scene, label, selectedObjectId) {
+    const selectionClass = selectedObjectId === label.objectId ? " wo-object-label-selected" : "";
+    const labelScale = scene.scaleModel.labelMultiplier;
+    return `<g class="wo-object-label${selectionClass}" data-object-id="${escapeXml(label.objectId)}" data-group-id="${escapeAttribute(label.groupId ?? "")}" data-render-id="${escapeXml(label.renderId)}">
+    <text class="wo-label" x="${label.x}" y="${label.y}" text-anchor="${label.textAnchor}" font-size="${14 * labelScale}">${escapeXml(label.label)}</text>
+    <text class="wo-label-secondary" x="${label.x}" y="${label.secondaryY}" text-anchor="${label.textAnchor}" font-size="${11 * labelScale}">${escapeXml(label.secondaryLabel)}</text>
+  </g>`;
+}
+function renderObjectBody(object, x, y, radius, palette, options = {}) {
+    const fill = options.outlineOnly ? "transparent" : palette.fill;
+    const tail = palette.tail ?? palette.fill;
+    switch (object.type) {
+        case "star":
+            return options.outlineOnly
+                ? `<circle cx="${x}" cy="${y}" r="${radius}" fill="transparent" stroke="${palette.stroke}" stroke-width="2" />`
+                : `<circle cx="${x}" cy="${y}" r="${radius * 2.4}" fill="${palette.glow ?? "url(#wo-star-glow)"}" opacity="0.84" />
+<circle cx="${x}" cy="${y}" r="${radius}" fill="${fill}" stroke="${palette.stroke}" stroke-width="2" />`;
+        case "planet":
+        case "moon":
+        case "belt":
+        case "asteroid":
+        case "ring":
+            return `<circle cx="${x}" cy="${y}" r="${radius}" fill="${fill}" stroke="${palette.stroke}" stroke-width="${options.outlineOnly ? 1.5 : 1.4}" />`;
+        case "comet":
+            return options.outlineOnly
+                ? `<circle cx="${x}" cy="${y}" r="${radius}" fill="transparent" stroke="${palette.stroke}" stroke-width="1.4" />`
+                : `<path d="M ${x - radius * 2} ${y + radius * 1.3} Q ${x - radius * 0.7} ${y + radius * 0.3} ${x - radius * 0.45} ${y}" fill="none" stroke="${tail}" stroke-width="${Math.max(2, radius * 0.8)}" stroke-linecap="round" opacity="0.85" />
+<circle cx="${x}" cy="${y}" r="${radius}" fill="${fill}" stroke="${palette.stroke}" stroke-width="1.4" />`;
+        case "structure":
+            return `<polygon points="${diamondPoints(x, y, radius)}" fill="${fill}" stroke="${palette.stroke}" stroke-width="1.4" />`;
+        case "phenomenon":
+            return `<polygon points="${phenomenonPoints(x, y, radius)}" fill="${fill}" stroke="${palette.stroke}" stroke-width="1.4" />`;
+    }
+}
+function renderAtmosphere(sceneObject, palette) {
+    if (!palette.atmosphere) {
+        return "";
+    }
+    const { object, x, y, radius } = sceneObject;
+    if (object.type !== "planet" && object.type !== "moon" && object.type !== "asteroid") {
+        return "";
+    }
+    return `<circle cx="${x}" cy="${y}" r="${radius + 4}" fill="none" stroke="${palette.atmosphere}" stroke-width="4" opacity="0.45" />`;
+}
+function renderObjectImage(sceneObject) {
+    if (!sceneObject.imageHref) {
+        return "";
+    }
+    const bounds = imageBoundsForObject(sceneObject);
+    return `<image class="wo-object-image" x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}" href="${escapeAttribute(sceneObject.imageHref)}" preserveAspectRatio="xMidYMid slice" clip-path="url(#${escapeAttribute(getObjectClipPathId(sceneObject))})" />`;
+}
+function renderImageClipPath(sceneObject) {
+    const { x, y, radius } = sceneObject;
+    let content = "";
+    switch (sceneObject.object.type) {
+        case "star":
+        case "planet":
+        case "moon":
+        case "asteroid":
+        case "comet":
+            content = `<circle cx="${x}" cy="${y}" r="${radius}" />`;
+            break;
+        case "structure":
+            content = `<polygon points="${diamondPoints(x, y, radius)}" />`;
+            break;
+        case "phenomenon":
+            content = `<polygon points="${phenomenonPoints(x, y, radius)}" />`;
+            break;
+        default:
+            return "";
+    }
+    return `<clipPath id="${escapeAttribute(getObjectClipPathId(sceneObject))}" clipPathUnits="userSpaceOnUse">${content}</clipPath>`;
+}
+function imageBoundsForObject(sceneObject) {
+    const { object, x, y, radius } = sceneObject;
+    switch (object.type) {
+        case "structure":
+            return {
+                x: x - radius,
+                y: y - radius,
+                width: radius * 2,
+                height: radius * 2,
+            };
+        case "phenomenon":
+            return {
+                x: x - radius * 1.2,
+                y: y - radius * 1.2,
+                width: radius * 2.4,
+                height: radius * 2.4,
+            };
+        default:
+            return {
+                x: x - radius,
+                y: y - radius,
+                width: radius * 2,
+                height: radius * 2,
+            };
+    }
+}
+function computeLabelPlacements(scene, objects) {
+    const placements = new Map();
+    const occupied = [];
+    const labelScale = scene.scaleModel.labelMultiplier;
+    for (const object of objects) {
+        const direction = object.y > scene.height * 0.62 ? -1 : 1;
+        const labelHalfWidth = estimateLabelHalfWidth(object, labelScale);
+        let labelY = object.y + direction * (object.radius + 18 * labelScale);
+        let secondaryY = labelY + direction * (16 * labelScale);
+        let rect = labelRect(object.x, labelY, secondaryY, labelHalfWidth, direction);
+        let attempts = 0;
+        while (occupied.some((entry) => rectsOverlap(entry, rect)) && attempts < 10) {
+            labelY += direction * 14 * labelScale;
+            secondaryY += direction * 14 * labelScale;
+            rect = labelRect(object.x, labelY, secondaryY, labelHalfWidth, direction);
+            attempts += 1;
+        }
+        occupied.push(rect);
+        placements.set(object.objectId, { labelY, secondaryY });
+    }
+    return placements;
+}
+function defaultLabelPlacement(scene, object) {
+    const direction = object.y > scene.height * 0.62 ? -1 : 1;
+    const labelScale = scene.scaleModel.labelMultiplier;
+    const labelY = object.y + direction * (object.radius + 18 * labelScale);
+    return {
+        labelY,
+        secondaryY: labelY + direction * (16 * labelScale),
+    };
+}
+function labelRect(x, labelY, secondaryY, labelHalfWidth, direction) {
+    return {
+        left: x - labelHalfWidth,
+        right: x + labelHalfWidth,
+        top: Math.min(labelY, secondaryY) - (direction < 0 ? 18 : 12),
+        bottom: Math.max(labelY, secondaryY) + (direction < 0 ? 8 : 12),
+    };
+}
+function rectsOverlap(left, right) {
+    return !(left.right < right.left ||
+        right.right < left.left ||
+        left.bottom < right.top ||
+        right.bottom < left.top);
+}
+function resolveObjectPalette(sceneObject, theme) {
+    const base = basePaletteForType(sceneObject.object.type, theme);
+    const customFill = sceneObject.fillColor && isColorLike(sceneObject.fillColor)
+        ? sceneObject.fillColor
+        : base.fill;
+    const albedo = numericValue(sceneObject.object.properties.albedo);
+    const temperature = numericValue(sceneObject.object.properties.temperature);
+    const fill = applyTemperatureAndAlbedo(customFill, temperature, albedo, sceneObject.object.type);
+    const stroke = mixColors(fill, "#ffffff", 0.4) ?? base.stroke;
+    const atmosphere = atmosphereColor(sceneObject.object.properties.atmosphere);
+    const glow = sceneObject.object.type === "star"
+        ? rgbaString(mixColors(fill, "#fff2cb", 0.4) ?? fill, 0.82)
+        : undefined;
+    return {
+        fill,
+        stroke,
+        glow,
+        atmosphere,
+        tail: sceneObject.object.type === "comet"
+            ? rgbaString(mixColors(fill, "#ffffff", 0.5) ?? fill, 0.72)
+            : undefined,
+    };
+}
+function basePaletteForType(type, theme) {
+    switch (type) {
+        case "star":
+            return {
+                fill: theme.starCore,
+                stroke: theme.starStroke,
+            };
+        case "planet":
+            return { fill: "#72b7ff", stroke: "#d8efff" };
+        case "moon":
+            return { fill: "#c7d7ea", stroke: "#f2f8ff" };
+        case "belt":
+            return { fill: "#d9aa74", stroke: "#f7d5aa" };
+        case "asteroid":
+            return { fill: "#a7a5b8", stroke: "#ebe5ff" };
+        case "comet":
+            return { fill: "#9ce7ff", stroke: "#e7fbff" };
+        case "ring":
+            return { fill: "#e59f7d", stroke: "#fff0d3" };
+        case "structure":
+            return { fill: theme.accentStrong, stroke: "#fff2ea" };
+        case "phenomenon":
+            return { fill: "#78ffd7", stroke: "#e9fff7" };
+    }
+}
+function applyTemperatureAndAlbedo(baseColor, temperature, albedo, type) {
+    let nextColor = baseColor;
+    if (temperature !== null) {
+        const tint = temperatureTint(temperature, type);
+        nextColor = mixColors(nextColor, tint, type === "star" ? 0.42 : 0.2) ?? nextColor;
+    }
+    if (albedo !== null) {
+        const clamped = Math.min(Math.max(albedo, 0), 1);
+        nextColor =
+            mixColors(nextColor, clamped >= 0.5 ? "#ffffff" : "#0f1520", Math.abs(clamped - 0.5) * 0.7) ??
+                nextColor;
+    }
+    return nextColor;
+}
+function temperatureTint(value, type) {
+    if (type === "star") {
+        if (value >= 8_000)
+            return "#d7ebff";
+        if (value >= 6_000)
+            return "#fff3d8";
+        if (value >= 4_000)
+            return "#ffd39a";
+        return "#ff9d76";
+    }
+    if (value <= 180)
+        return "#8fd8ff";
+    if (value >= 600)
+        return "#ffb56e";
+    return "#fff1c4";
+}
+function atmosphereColor(value) {
+    if (typeof value !== "string" || !value.trim()) {
+        return undefined;
+    }
+    const normalized = value.trim().toLowerCase();
+    if (normalized.includes("methane"))
+        return "rgba(134, 236, 255, 0.75)";
+    if (normalized.includes("nitrogen") || normalized.includes("oxygen") || normalized.includes("air")) {
+        return "rgba(122, 194, 255, 0.75)";
+    }
+    if (normalized.includes("carbon") || normalized.includes("co2")) {
+        return "rgba(255, 198, 138, 0.75)";
+    }
+    if (normalized.includes("sulfur")) {
+        return "rgba(255, 233, 138, 0.75)";
+    }
+    return "rgba(180, 222, 255, 0.68)";
+}
+function resolveRenderPreset(preset) {
+    switch (preset) {
+        case "presentation":
+            return {
+                layers: {
+                    background: true,
+                    guides: true,
+                    orbits: true,
+                    objects: true,
+                    labels: true,
+                    structures: true,
+                    metadata: true,
+                },
+            };
+        case "atlas-card":
+            return {
+                layers: {
+                    background: true,
+                    guides: false,
+                    orbits: true,
+                    objects: true,
+                    labels: true,
+                    structures: true,
+                    metadata: true,
+                },
+            };
+        case "markdown":
+            return {
+                layers: {
+                    background: true,
+                    guides: false,
+                    orbits: true,
+                    objects: true,
+                    labels: true,
+                    structures: true,
+                    metadata: false,
+                },
+            };
+        case "diagram":
+        default:
+            return {
+                layers: {
+                    background: true,
+                    guides: true,
+                    orbits: true,
+                    objects: true,
+                    labels: true,
+                    structures: true,
+                    metadata: true,
+                },
+            };
+    }
+}
+function numericValue(value) {
+    if (typeof value === "number") {
+        return value;
+    }
+    if (value && typeof value === "object" && "value" in value) {
+        return value.value;
+    }
+    return null;
+}
+function estimateLabelHalfWidth(object, labelScale) {
+    const primaryWidth = object.label.length * 4.8 * labelScale + 18;
+    const secondaryWidth = object.secondaryLabel.length * 4.1 * labelScale + 18;
+    return Math.max(primaryWidth, secondaryWidth, object.visualRadius + 18);
+}
+function getObjectClipPathId(sceneObject) {
+    return `${sceneObject.renderId}-clip`;
+}
+function diamondPoints(x, y, radius) {
+    return `${x},${y - radius} ${x + radius},${y} ${x},${y + radius} ${x - radius},${y}`;
+}
+function phenomenonPoints(x, y, radius) {
+    return `${x},${y - radius * 1.2} ${x + radius * 0.9},${y - radius * 0.3} ${x + radius * 1.2},${y + radius * 0.8} ${x},${y + radius * 1.2} ${x - radius * 1.1},${y + radius * 0.3} ${x - radius * 0.8},${y - radius * 0.8}`;
+}
+function renderBackdrop(width, height) {
+    const verticalLines = Array.from({ length: 10 }, (_, index) => {
+        const x = 90 + index * ((width - 180) / 9);
+        return `<line class="wo-grid" x1="${x}" y1="120" x2="${x}" y2="${height - 70}" />`;
+    }).join("");
+    const horizontalLines = Array.from({ length: 6 }, (_, index) => {
+        const y = 150 + index * ((height - 240) / 5);
+        return `<line class="wo-grid" x1="56" y1="${y}" x2="${width - 56}" y2="${y}" />`;
+    }).join("");
+    return `${verticalLines}${horizontalLines}`;
+}
+function renderMetadata(scene) {
+    return [
+        `${scene.layoutPreset} layout`,
+        `${scene.viewMode} view`,
+        `${scene.renderPreset ?? "custom"} preset`,
+        `schema ${scene.metadata.version ?? "1.0"}`,
+    ].join(" - ");
+}
+function isStructureLike(object) {
+    return object.type === "structure" || object.type === "phenomenon";
+}
+function mixColors(left, right, amount) {
+    const leftRgb = parseColor(left);
+    const rightRgb = parseColor(right);
+    if (!leftRgb || !rightRgb) {
+        return undefined;
+    }
+    const clamped = Math.min(Math.max(amount, 0), 1);
+    return rgbToHex({
+        r: Math.round(leftRgb.r + (rightRgb.r - leftRgb.r) * clamped),
+        g: Math.round(leftRgb.g + (rightRgb.g - leftRgb.g) * clamped),
+        b: Math.round(leftRgb.b + (rightRgb.b - leftRgb.b) * clamped),
+    });
+}
+function rgbaString(color, alpha) {
+    const rgb = parseColor(color);
+    if (!rgb) {
+        return color;
+    }
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+}
+function parseColor(value) {
+    const hex = value.trim();
+    if (/^#[0-9a-f]{6}$/i.test(hex)) {
+        return {
+            r: Number.parseInt(hex.slice(1, 3), 16),
+            g: Number.parseInt(hex.slice(3, 5), 16),
+            b: Number.parseInt(hex.slice(5, 7), 16),
+        };
+    }
+    if (/^#[0-9a-f]{3}$/i.test(hex)) {
+        return {
+            r: Number.parseInt(hex[1] + hex[1], 16),
+            g: Number.parseInt(hex[2] + hex[2], 16),
+            b: Number.parseInt(hex[3] + hex[3], 16),
+        };
+    }
+    return null;
+}
+function rgbToHex(color) {
+    const part = (value) => value.toString(16).padStart(2, "0");
+    return `#${part(color.r)}${part(color.g)}${part(color.b)}`;
+}
+function isColorLike(value) {
+    return Boolean(value.trim());
+}
+function escapeXml(value) {
+    return value
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll("\"", "&quot;")
+        .replaceAll("'", "&apos;");
+}
+function escapeAttribute(value) {
+    return escapeXml(value);
+}