worldorbit 2.5.1-5.2

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

@@ -0,0 +1,482 @@
+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,
+        groupFilter: options.controls?.groupFilter ?? 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 groupFilterSelect = container.querySelector("[data-atlas-group-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 groupFilter = baseFilter?.groupIds?.[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();
+    populateGroups();
+    syncControlsFromFilter(viewer.getFilter());
+    renderBookmarks();
+    updateSearchResults();
+    updateInspector();
+    searchInput?.addEventListener("input", () => {
+        searchQuery = searchInput.value.trim();
+        applyCurrentFilter();
+    });
+    typeFilterSelect?.addEventListener("change", () => {
+        objectTypeFilter = (typeFilterSelect.value || null);
+        applyCurrentFilter();
+    });
+    groupFilterSelect?.addEventListener("change", () => {
+        groupFilter = groupFilterSelect.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();
+        populateGroups();
+        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: groupFilter ? [groupFilter] : baseFilter?.groupIds,
+            includeAncestors: baseFilter?.includeAncestors ?? true,
+        });
+    }
+    function syncControlsFromFilter(filter) {
+        searchQuery = filter?.query?.trim() ?? "";
+        objectTypeFilter =
+            filter?.objectTypes?.length === 1 ? filter.objectTypes[0] : null;
+        groupFilter = filter?.groupIds?.length === 1 ? filter.groupIds[0] : null;
+        if (searchInput && document.activeElement !== searchInput) {
+            searchInput.value = searchQuery;
+        }
+        if (typeFilterSelect) {
+            typeFilterSelect.value = objectTypeFilter ?? "";
+        }
+        if (groupFilterSelect) {
+            groupFilterSelect.value = groupFilter ?? "";
+        }
+    }
+    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 populateGroups() {
+        if (!groupFilterSelect) {
+            return;
+        }
+        const activeViewer = requireViewer();
+        groupFilterSelect.innerHTML = [
+            `<option value="">All groups</option>`,
+            ...activeViewer.getScene().semanticGroups.map((group) => `<option value="${escapeHtml(group.id)}">${escapeHtml(group.label)}</option>`),
+        ].join("");
+        groupFilterSelect.value = groupFilter ?? "";
+    }
+    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,
+                semanticGroupCount: activeViewer.getScene().semanticGroups.length,
+                relationCount: activeViewer.getScene().relations.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.groupFilter
+            ? `<label class="wo-atlas-field">
+          <span>Group</span>
+          <select data-atlas-group-filter>
+            <option value="">All groups</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;