worldorbit 2.5.2

package/packages/viewer/dist/atlas-viewer.js

@@ -0,0 +1,448 @@
+import { normalizeViewerFilter } from "./atlas-state.js";
+import { createInteractiveViewer } from "./viewer.js";
+const STYLE_ID = "worldorbit-atlas-viewer-style";
+export function createAtlasViewer(container, options) {
+    if (typeof document === "undefined") {
+        throw new Error("Atlas viewer requires a browser environment.");
+    }
+    installAtlasViewerStyles();
+    const controls = {
+        search: options.controls?.search ?? true,
+        typeFilter: options.controls?.typeFilter ?? true,
+        viewpointSelect: options.controls?.viewpointSelect ?? true,
+        inspector: options.controls?.inspector ?? true,
+        bookmarks: options.controls?.bookmarks ?? true,
+    };
+    container.classList.add("wo-atlas-viewer");
+    container.innerHTML = buildAtlasViewerMarkup(controls);
+    const toolbar = container.querySelector("[data-atlas-toolbar]");
+    const searchInput = container.querySelector("[data-atlas-search]");
+    const typeFilterSelect = container.querySelector("[data-atlas-type-filter]");
+    const viewpointSelect = container.querySelector("[data-atlas-viewpoint]");
+    const bookmarkButton = container.querySelector("[data-atlas-bookmark]");
+    const bookmarkList = container.querySelector("[data-atlas-bookmarks]");
+    const searchResults = container.querySelector("[data-atlas-results]");
+    const inspector = container.querySelector("[data-atlas-inspector]");
+    const stage = container.querySelector("[data-atlas-stage]");
+    if (!stage) {
+        throw new Error("Atlas viewer failed to initialize its stage container.");
+    }
+    const baseFilter = normalizeViewerFilter(options.initialFilter ?? null);
+    let searchQuery = options.initialQuery?.trim() ?? baseFilter?.query ?? "";
+    let objectTypeFilter = options.initialObjectType ??
+        (baseFilter?.objectTypes?.length === 1 ? baseFilter.objectTypes[0] : null);
+    let bookmarks = [];
+    let viewer;
+    viewer = createInteractiveViewer(stage, {
+        ...options,
+        initialFilter: null,
+        onSelectionChange(selection) {
+            if (viewer) {
+                updateInspector();
+            }
+            options.onSelectionChange?.(selection);
+        },
+        onSelectionDetailsChange(details) {
+            if (viewer) {
+                updateInspector();
+            }
+            options.onSelectionDetailsChange?.(details);
+        },
+        onFilterChange(filter, visibleObjects) {
+            if (viewer) {
+                syncControlsFromFilter(filter);
+                updateSearchResults();
+                updateInspector();
+            }
+            options.onFilterChange?.(filter, visibleObjects);
+        },
+        onViewpointChange(viewpoint) {
+            if (viewer) {
+                syncViewpointControl();
+                updateInspector();
+            }
+            options.onViewpointChange?.(viewpoint);
+        },
+        onAtlasStateChange(state) {
+            if (viewer) {
+                updateInspector();
+            }
+            options.onAtlasStateChange?.(state);
+        },
+        onViewChange(state) {
+            if (viewer) {
+                updateInspector();
+            }
+            options.onViewChange?.(state);
+        },
+    });
+    applyCurrentFilter();
+    populateViewpoints();
+    syncControlsFromFilter(viewer.getFilter());
+    renderBookmarks();
+    updateSearchResults();
+    updateInspector();
+    searchInput?.addEventListener("input", () => {
+        searchQuery = searchInput.value.trim();
+        applyCurrentFilter();
+    });
+    typeFilterSelect?.addEventListener("change", () => {
+        objectTypeFilter = (typeFilterSelect.value || null);
+        applyCurrentFilter();
+    });
+    viewpointSelect?.addEventListener("change", () => {
+        const activeViewer = requireViewer();
+        if (!viewpointSelect.value) {
+            activeViewer.resetView();
+            applyCurrentFilter();
+            return;
+        }
+        activeViewer.goToViewpoint(viewpointSelect.value);
+        updateInspector();
+    });
+    bookmarkButton?.addEventListener("click", () => {
+        const activeViewer = requireViewer();
+        const label = activeViewer.getActiveViewpoint()?.label ??
+            activeViewer.getSelectionDetails()?.objectId ??
+            `Bookmark ${bookmarks.length + 1}`;
+        bookmarks = [...bookmarks, activeViewer.captureBookmark(label, label)];
+        renderBookmarks();
+        updateInspector();
+    });
+    bookmarkList?.addEventListener("click", (event) => {
+        const button = event.target?.closest("[data-bookmark-id]");
+        if (!button) {
+            return;
+        }
+        const bookmark = bookmarks.find((entry) => entry.id === button.dataset.bookmarkId);
+        if (!bookmark) {
+            return;
+        }
+        const activeViewer = requireViewer();
+        activeViewer.applyBookmark(bookmark);
+        syncControlsFromFilter(activeViewer.getFilter());
+        updateSearchResults();
+        updateInspector();
+    });
+    searchResults?.addEventListener("click", (event) => {
+        const button = event.target?.closest("[data-object-id]");
+        if (!button) {
+            return;
+        }
+        requireViewer().focusObject(button.dataset.objectId ?? "");
+        updateInspector();
+    });
+    function requireViewer() {
+        if (!viewer) {
+            throw new Error("Atlas viewer is not initialized.");
+        }
+        return viewer;
+    }
+    const api = {
+        element: container,
+        get viewer() {
+            return requireViewer();
+        },
+        getViewer() {
+            return requireViewer();
+        },
+        setSource(source) {
+            requireViewer().setSource(source);
+            refreshAfterInputChange();
+        },
+        setDocument(document) {
+            requireViewer().setDocument(document);
+            refreshAfterInputChange();
+        },
+        setScene(scene) {
+            requireViewer().setScene(scene);
+            refreshAfterInputChange();
+        },
+        getAtlasState() {
+            return requireViewer().getAtlasState();
+        },
+        setAtlasState(state) {
+            const activeViewer = requireViewer();
+            activeViewer.setAtlasState(state);
+            syncControlsFromFilter(activeViewer.getFilter());
+            updateSearchResults();
+            updateInspector();
+        },
+        getInspectorSnapshot() {
+            return buildInspectorSnapshot();
+        },
+        getSearchQuery() {
+            return searchQuery;
+        },
+        setSearchQuery(query) {
+            searchQuery = query.trim();
+            if (searchInput) {
+                searchInput.value = searchQuery;
+            }
+            applyCurrentFilter();
+        },
+        getObjectTypeFilter() {
+            return objectTypeFilter;
+        },
+        setObjectTypeFilter(type) {
+            objectTypeFilter = type;
+            if (typeFilterSelect) {
+                typeFilterSelect.value = type ?? "";
+            }
+            applyCurrentFilter();
+        },
+        listSearchResults(limit = 6) {
+            return requireViewer().search(searchQuery, limit);
+        },
+        listBookmarks() {
+            return bookmarks.map(cloneBookmark);
+        },
+        captureBookmark(name, label) {
+            const bookmark = requireViewer().captureBookmark(name, label);
+            bookmarks = [...bookmarks, bookmark];
+            renderBookmarks();
+            updateInspector();
+            return cloneBookmark(bookmark);
+        },
+        applyBookmark(bookmark) {
+            const activeViewer = requireViewer();
+            const result = activeViewer.applyBookmark(bookmark);
+            if (result) {
+                syncControlsFromFilter(activeViewer.getFilter());
+                updateSearchResults();
+                updateInspector();
+            }
+            return result;
+        },
+        goToViewpoint(id) {
+            const result = requireViewer().goToViewpoint(id);
+            if (result) {
+                updateInspector();
+            }
+            return result;
+        },
+        exportSvg() {
+            return requireViewer().exportSvg();
+        },
+        destroy() {
+            requireViewer().destroy();
+            container.innerHTML = "";
+            container.classList.remove("wo-atlas-viewer");
+        },
+    };
+    return api;
+    function refreshAfterInputChange() {
+        populateViewpoints();
+        applyCurrentFilter();
+        renderBookmarks();
+        updateSearchResults();
+        updateInspector();
+    }
+    function applyCurrentFilter() {
+        requireViewer().setFilter(buildComposedFilter());
+        populateViewpoints();
+        updateSearchResults();
+        updateInspector();
+    }
+    function buildComposedFilter() {
+        return normalizeViewerFilter({
+            query: searchQuery || undefined,
+            objectTypes: objectTypeFilter ? [objectTypeFilter] : undefined,
+            tags: baseFilter?.tags,
+            groupIds: baseFilter?.groupIds,
+            includeAncestors: baseFilter?.includeAncestors ?? true,
+        });
+    }
+    function syncControlsFromFilter(filter) {
+        searchQuery = filter?.query?.trim() ?? "";
+        objectTypeFilter =
+            filter?.objectTypes?.length === 1 ? filter.objectTypes[0] : null;
+        if (searchInput && document.activeElement !== searchInput) {
+            searchInput.value = searchQuery;
+        }
+        if (typeFilterSelect) {
+            typeFilterSelect.value = objectTypeFilter ?? "";
+        }
+    }
+    function populateViewpoints() {
+        if (!viewpointSelect) {
+            return;
+        }
+        const activeViewer = requireViewer();
+        const active = activeViewer.getActiveViewpoint()?.id ?? "";
+        viewpointSelect.innerHTML = [
+            `<option value="">Scene default</option>`,
+            ...activeViewer
+                .listViewpoints()
+                .map((viewpoint) => `<option value="${escapeHtml(viewpoint.id)}">${escapeHtml(viewpoint.label)}</option>`),
+        ].join("");
+        viewpointSelect.value = active;
+    }
+    function syncViewpointControl() {
+        if (!viewpointSelect) {
+            return;
+        }
+        viewpointSelect.value = requireViewer().getActiveViewpoint()?.id ?? "";
+    }
+    function updateSearchResults() {
+        if (!searchResults) {
+            return;
+        }
+        const results = requireViewer().search(searchQuery, 6);
+        searchResults.innerHTML = results
+            .map((result) => `<button type="button" class="wo-atlas-pill" data-object-id="${escapeHtml(result.objectId)}">${escapeHtml(result.objectId)} - ${escapeHtml(result.type)}</button>`)
+            .join("");
+    }
+    function updateInspector() {
+        const snapshot = buildInspectorSnapshot();
+        if (inspector) {
+            inspector.textContent = JSON.stringify(snapshot, null, 2);
+        }
+        options.onInspectorChange?.(snapshot);
+    }
+    function buildInspectorSnapshot() {
+        const activeViewer = requireViewer();
+        return {
+            selection: activeViewer.getSelectionDetails(),
+            activeViewpoint: activeViewer.getActiveViewpoint(),
+            filter: activeViewer.getFilter(),
+            atlasState: activeViewer.getAtlasState(),
+            visibleObjectIds: activeViewer.getVisibleObjects().map((object) => object.objectId),
+            scene: {
+                title: activeViewer.getScene().title,
+                projection: activeViewer.getScene().projection,
+                renderPreset: activeViewer.getScene().renderPreset,
+                groupCount: activeViewer.getScene().groups.length,
+                viewpointCount: activeViewer.getScene().viewpoints.length,
+            },
+        };
+    }
+    function renderBookmarks() {
+        if (!bookmarkList) {
+            return;
+        }
+        bookmarkList.innerHTML = bookmarks
+            .map((bookmark) => `<button type="button" class="wo-atlas-pill" data-bookmark-id="${escapeHtml(bookmark.id)}">${escapeHtml(bookmark.label)}</button>`)
+            .join("");
+    }
+}
+function buildAtlasViewerMarkup(controls) {
+    const toolbarItems = [
+        controls.search
+            ? `<label class="wo-atlas-field">
+          <span>Search</span>
+          <input data-atlas-search type="text" placeholder="Search objects, tags, or types" />
+        </label>`
+            : "",
+        controls.typeFilter
+            ? `<label class="wo-atlas-field">
+          <span>Type</span>
+          <select data-atlas-type-filter>
+            <option value="">All types</option>
+            <option value="star">Star</option>
+            <option value="planet">Planet</option>
+            <option value="moon">Moon</option>
+            <option value="belt">Belt</option>
+            <option value="asteroid">Asteroid</option>
+            <option value="comet">Comet</option>
+            <option value="ring">Ring</option>
+            <option value="structure">Structure</option>
+            <option value="phenomenon">Phenomenon</option>
+          </select>
+        </label>`
+            : "",
+        controls.viewpointSelect
+            ? `<label class="wo-atlas-field">
+          <span>Viewpoint</span>
+          <select data-atlas-viewpoint>
+            <option value="">Scene default</option>
+          </select>
+        </label>`
+            : "",
+        controls.bookmarks
+            ? `<button type="button" class="wo-atlas-button" data-atlas-bookmark>Save bookmark</button>`
+            : "",
+    ]
+        .filter(Boolean)
+        .join("");
+    return `<section class="wo-atlas-shell">
+    ${toolbarItems ? `<div class="wo-atlas-toolbar" data-atlas-toolbar>${toolbarItems}</div>` : ""}
+    <div class="wo-atlas-workspace">
+      <div class="wo-atlas-stage" data-atlas-stage></div>
+      ${controls.inspector ? `<pre class="wo-atlas-inspector" data-atlas-inspector></pre>` : ""}
+    </div>
+    <div class="wo-atlas-footer">
+      <div class="wo-atlas-results" data-atlas-results></div>
+      ${controls.bookmarks ? `<div class="wo-atlas-bookmarks" data-atlas-bookmarks></div>` : ""}
+    </div>
+  </section>`;
+}
+function installAtlasViewerStyles() {
+    if (document.getElementById(STYLE_ID)) {
+        return;
+    }
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = `
+    .wo-atlas-shell { display: grid; gap: 16px; min-width: 0; }
+    .wo-atlas-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
+    .wo-atlas-workspace { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
+    .wo-atlas-stage { min-height: 420px; min-width: 0; }
+    .wo-atlas-inspector {
+      margin: 0;
+      min-height: 420px;
+      padding: 16px;
+      border-radius: 18px;
+      border: 1px solid rgba(255,255,255,0.08);
+      background: rgba(7, 16, 25, 0.72);
+      color: #edf6ff;
+      overflow: auto;
+      font: 12px/1.5 "Cascadia Code", "Consolas", monospace;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+    .wo-atlas-footer { display: grid; gap: 12px; }
+    .wo-atlas-results, .wo-atlas-bookmarks { display: flex; gap: 8px; flex-wrap: wrap; }
+    .wo-atlas-field { display: grid; gap: 6px; min-width: 180px; color: #edf6ff; font: 600 12px/1.4 "Segoe UI Variable", "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; }
+    .wo-atlas-field input, .wo-atlas-field select, .wo-atlas-button, .wo-atlas-pill {
+      border: 1px solid rgba(240, 180, 100, 0.2);
+      border-radius: 999px;
+      background: rgba(240, 180, 100, 0.08);
+      color: #edf6ff;
+      font: 500 13px/1.4 "Segoe UI Variable", "Segoe UI", sans-serif;
+      padding: 10px 14px;
+    }
+    .wo-atlas-button, .wo-atlas-pill { cursor: pointer; }
+    @media (max-width: 1080px) {
+      .wo-atlas-workspace { grid-template-columns: 1fr; }
+      .wo-atlas-inspector { min-height: 220px; }
+    }
+  `;
+    document.head.append(style);
+}
+function cloneBookmark(bookmark) {
+    return {
+        ...bookmark,
+        atlasState: {
+            ...bookmark.atlasState,
+            viewerState: { ...bookmark.atlasState.viewerState },
+            renderOptions: {
+                ...bookmark.atlasState.renderOptions,
+                layers: bookmark.atlasState.renderOptions.layers
+                    ? { ...bookmark.atlasState.renderOptions.layers }
+                    : undefined,
+                scaleModel: bookmark.atlasState.renderOptions.scaleModel
+                    ? { ...bookmark.atlasState.renderOptions.scaleModel }
+                    : undefined,
+            },
+            filter: bookmark.atlasState.filter ? { ...bookmark.atlasState.filter } : null,
+        },
+    };
+}
+function escapeHtml(value) {
+    return value
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;");
+}

package/packages/viewer/dist/custom-element.d.ts

@@ -0,0 +1 @@
+export declare function defineWorldOrbitViewerElement(tagName?: string): void;

package/packages/viewer/dist/custom-element.js

@@ -0,0 +1,64 @@
+import { loadWorldOrbitSource, renderDocumentToScene, } from "@worldorbit/core";
+import { renderSceneToSvg } from "./render.js";
+import { createAtlasViewer } from "./atlas-viewer.js";
+import { createInteractiveViewer } from "./viewer.js";
+export function defineWorldOrbitViewerElement(tagName = "worldorbit-viewer") {
+    if (typeof window === "undefined" || typeof customElements === "undefined") {
+        return;
+    }
+    if (customElements.get(tagName)) {
+        return;
+    }
+    class WorldOrbitViewerElement extends HTMLElement {
+        static get observedAttributes() {
+            return ["source", "mode", "theme"];
+        }
+        viewer = null;
+        connectedCallback() {
+            this.renderCurrent();
+        }
+        disconnectedCallback() {
+            this.viewer?.destroy();
+            this.viewer = null;
+        }
+        attributeChangedCallback() {
+            if (this.isConnected) {
+                this.renderCurrent();
+            }
+        }
+        renderCurrent() {
+            this.viewer?.destroy();
+            this.viewer = null;
+            const source = this.getAttribute("source") ?? this.textContent ?? "";
+            const mode = this.getAttribute("mode") ?? "interactive";
+            if (!source.trim()) {
+                this.innerHTML = "";
+                return;
+            }
+            const documentModel = parseSource(source);
+            const scene = renderDocumentToScene(documentModel);
+            const theme = (this.getAttribute("theme") ?? undefined);
+            if (mode === "static") {
+                this.innerHTML = renderSceneToSvg(scene, {
+                    theme,
+                });
+                return;
+            }
+            if (mode === "atlas") {
+                this.viewer = createAtlasViewer(this, {
+                    scene,
+                    theme,
+                });
+                return;
+            }
+            this.viewer = createInteractiveViewer(this, {
+                scene,
+                theme,
+            });
+        }
+    }
+    customElements.define(tagName, WorldOrbitViewerElement);
+}
+function parseSource(source) {
+    return loadWorldOrbitSource(source).document;
+}

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

@@ -0,0 +1,20 @@
+import type { RenderScene } from "@worldorbit/core";
+import type { MountedWorldOrbitEmbeds, MountWorldOrbitEmbedsOptions, ViewerAtlasState, ViewerFilter, WorldOrbitEmbedPayload } from "./types.js";
+export declare function serializeWorldOrbitEmbedPayload(payload: WorldOrbitEmbedPayload): string;
+export declare function deserializeWorldOrbitEmbedPayload(serialized: string): WorldOrbitEmbedPayload;
+export declare function createEmbedPayload(scene: RenderScene, mode: WorldOrbitEmbedPayload["mode"], options?: {
+    initialViewpointId?: string;
+    initialSelectionObjectId?: string;
+    initialFilter?: ViewerFilter | null;
+    atlasState?: ViewerAtlasState | null;
+    minimap?: boolean;
+}): WorldOrbitEmbedPayload;
+export declare function createWorldOrbitEmbedMarkup(payload: WorldOrbitEmbedPayload, options?: Pick<MountWorldOrbitEmbedsOptions, "theme" | "layers" | "subtitle" | "preset"> & {
+    className?: string;
+    initialViewpointId?: string;
+    initialSelectionObjectId?: string;
+    initialFilter?: ViewerFilter | null;
+    atlasState?: ViewerAtlasState | null;
+    minimap?: boolean;
+}): string;
+export declare function mountWorldOrbitEmbeds(root?: ParentNode, options?: MountWorldOrbitEmbedsOptions): MountedWorldOrbitEmbeds;

package/packages/viewer/dist/embed.js

@@ -0,0 +1,138 @@
+import { renderSceneToSvg } from "./render.js";
+import { createInteractiveViewer } from "./viewer.js";
+const EMBED_SELECTOR = "[data-worldorbit-embed]";
+export function serializeWorldOrbitEmbedPayload(payload) {
+    return encodeURIComponent(JSON.stringify(payload));
+}
+export function deserializeWorldOrbitEmbedPayload(serialized) {
+    const raw = JSON.parse(decodeURIComponent(serialized));
+    return {
+        version: "2.0",
+        mode: raw.mode ?? "interactive",
+        scene: raw.scene,
+        options: raw.options
+            ? {
+                ...raw.options,
+                initialFilter: raw.options.initialFilter ?? null,
+                atlasState: raw.options.atlasState ?? null,
+            }
+            : undefined,
+    };
+}
+export function createEmbedPayload(scene, mode, options = {}) {
+    return {
+        version: "2.0",
+        mode,
+        scene,
+        options: {
+            initialViewpointId: options.initialViewpointId,
+            initialSelectionObjectId: options.initialSelectionObjectId,
+            initialFilter: options.initialFilter ?? null,
+            atlasState: options.atlasState ?? null,
+            minimap: options.minimap,
+        },
+    };
+}
+export function createWorldOrbitEmbedMarkup(payload, options = {}) {
+    const mergedPayload = {
+        ...payload,
+        options: {
+            ...payload.options,
+            theme: options.theme ?? payload.options?.theme,
+            layers: options.layers ?? payload.options?.layers,
+            subtitle: options.subtitle ?? payload.options?.subtitle,
+            preset: options.preset ?? payload.options?.preset,
+            initialViewpointId: options.initialViewpointId ?? payload.options?.initialViewpointId,
+            initialSelectionObjectId: options.initialSelectionObjectId ?? payload.options?.initialSelectionObjectId,
+            initialFilter: options.initialFilter ?? payload.options?.initialFilter ?? null,
+            atlasState: options.atlasState ?? payload.options?.atlasState ?? null,
+            minimap: options.minimap ?? payload.options?.minimap,
+        },
+    };
+    const html = renderSceneToSvg(payload.scene, {
+        theme: mergedPayload.options?.theme,
+        layers: mergedPayload.options?.layers,
+        filter: mergedPayload.options?.initialFilter ?? null,
+        selectedObjectId: mergedPayload.options?.initialSelectionObjectId ?? null,
+        subtitle: mergedPayload.options?.subtitle,
+        preset: mergedPayload.options?.preset,
+    });
+    return `<div class="${escapeAttribute(options.className ?? "worldorbit-embed")}" data-worldorbit-embed="true" data-worldorbit-mode="${payload.mode}" data-worldorbit-preset="${escapeAttribute(mergedPayload.options?.preset ?? payload.scene.renderPreset ?? "custom")}" data-worldorbit-viewpoint="${escapeAttribute(mergedPayload.options?.initialViewpointId ?? "")}" data-worldorbit-payload="${escapeAttribute(serializeWorldOrbitEmbedPayload(mergedPayload))}">${html}</div>`;
+}
+export function mountWorldOrbitEmbeds(root = document, options = {}) {
+    const viewers = new Map();
+    const elements = [...root.querySelectorAll(EMBED_SELECTOR)];
+    for (const element of elements) {
+        const payload = deserializePayloadFromElement(element);
+        const mode = options.mode ?? payload.mode;
+        const theme = options.theme ?? payload.options?.theme;
+        const layers = options.layers ?? payload.options?.layers;
+        const subtitle = options.subtitle ?? payload.options?.subtitle;
+        const preset = options.preset ?? payload.options?.preset ?? payload.scene.renderPreset ?? undefined;
+        const initialFilter = options.viewer?.initialFilter ?? payload.options?.initialFilter ?? null;
+        const initialViewpointId = options.viewer?.initialViewpointId ?? payload.options?.initialViewpointId;
+        const initialSelectionObjectId = options.viewer?.initialSelectionObjectId ?? payload.options?.initialSelectionObjectId;
+        const minimap = options.viewer?.minimap ?? payload.options?.minimap;
+        if (mode === "interactive") {
+            const viewer = createInteractiveViewer(element, {
+                ...options.viewer,
+                scene: payload.scene,
+                width: options.width ?? payload.scene.width,
+                height: options.height ?? payload.scene.height,
+                padding: options.padding ?? payload.scene.padding,
+                preset,
+                theme,
+                layers,
+                subtitle,
+                initialFilter,
+                initialViewpointId,
+                initialSelectionObjectId,
+                minimap,
+            });
+            if (payload.options?.atlasState) {
+                viewer.setAtlasState(payload.options.atlasState);
+            }
+            viewers.set(element, viewer);
+            options.onMount?.(viewer, element);
+        }
+        else {
+            element.innerHTML = renderSceneToSvg(payload.scene, {
+                width: options.width ?? payload.scene.width,
+                height: options.height ?? payload.scene.height,
+                padding: options.padding ?? payload.scene.padding,
+                preset,
+                theme,
+                layers,
+                filter: initialFilter,
+                selectedObjectId: initialSelectionObjectId ?? null,
+                subtitle,
+            });
+            options.onMount?.(null, element);
+        }
+        element.dataset.worldorbitMounted = "true";
+    }
+    return {
+        viewers: [...viewers.values()],
+        destroy() {
+            for (const [element, viewer] of viewers.entries()) {
+                viewer.destroy();
+                element.removeAttribute("data-worldorbit-mounted");
+            }
+            viewers.clear();
+        },
+    };
+}
+function deserializePayloadFromElement(element) {
+    const serialized = element.dataset.worldorbitPayload;
+    if (!serialized) {
+        throw new Error("WorldOrbit embed is missing data-worldorbit-payload.");
+    }
+    return deserializeWorldOrbitEmbedPayload(serialized);
+}
+function escapeAttribute(value) {
+    return value
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll("\"", "&quot;");
+}

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

@@ -0,0 +1,9 @@
+export type * from "./types.js";
+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";