worldorbit 2.5.13 → 2.5.15

package/packages/core/dist/scene.js

@@ -130,8 +130,10 @@ export function renderDocumentToScene(document, options = {}) {
     const orbitVisuals = orbitDrafts.map((draft) => createOrbitVisual(draft, relationships.groupIds.get(draft.object.id) ?? null));
     const leaders = leaderDrafts.map((draft) => createLeaderLine(draft));
     const labels = createSceneLabels(objects, height, scaleModel.labelMultiplier);
-    const layers = createSceneLayers(orbitVisuals, leaders, objects, labels);
+    const relations = createSceneRelations(document, objects);
+    const layers = createSceneLayers(orbitVisuals, relations, leaders, objects, labels);
     const groups = createSceneGroups(objects, orbitVisuals, leaders, labels, relationships);
+    const semanticGroups = createSceneSemanticGroups(document, objects);
     const viewpoints = createSceneViewpoints(document, projection, frame.preset, relationships, objectMap);
     const contentBounds = calculateContentBounds(width, height, objects, orbitVisuals, leaders, labels);
     return {
@@ -141,7 +143,7 @@ export function renderDocumentToScene(document, options = {}) {
         renderPreset: frame.preset,
         projection,
         scaleModel,
-        title: String(document.system?.properties.title ?? document.system?.id ?? "WorldOrbit") ||
+        title: String(document.system?.title ?? document.system?.properties.title ?? document.system?.id ?? "WorldOrbit") ||
             "WorldOrbit",
         subtitle: `${capitalizeLabel(projection)} view - ${capitalizeLabel(layoutPreset)} layout`,
         systemId,
@@ -158,9 +160,11 @@ export function renderDocumentToScene(document, options = {}) {
         contentBounds,
         layers,
         groups,
+        semanticGroups,
         viewpoints,
         objects,
         orbitVisuals,
+        relations,
         leaders,
         labels,
     };
@@ -272,6 +276,7 @@ function layoutPresetSpacing(layoutPreset) {
 }
 function createSceneObject(position, scaleModel, relationships) {
     const { object, x, y, radius, sortKey, anchorX, anchorY } = position;
+    const renderPriority = object.renderHints?.renderPriority ?? 0;
     return {
         renderId: createRenderId(object.id),
         objectId: object.id,
@@ -280,11 +285,12 @@ function createSceneObject(position, scaleModel, relationships) {
         ancestorIds: relationships.ancestorIds.get(object.id) ?? [],
         childIds: relationships.childIds.get(object.id) ?? [],
         groupId: relationships.groupIds.get(object.id) ?? null,
+        semanticGroupIds: [...(object.groups ?? [])],
         x,
         y,
         radius,
         visualRadius: visualExtentForObject(object, radius, scaleModel),
-        sortKey,
+        sortKey: sortKey + renderPriority * 0.001,
         anchorX,
         anchorY,
         label: object.id,
@@ -303,6 +309,7 @@ function createOrbitVisual(draft, groupId) {
         object: draft.object,
         parentId: draft.parentId,
         groupId,
+        semanticGroupIds: [...(draft.object.groups ?? [])],
         kind: draft.kind,
         cx: draft.cx,
         cy: draft.cy,
@@ -314,7 +321,7 @@ function createOrbitVisual(draft, groupId) {
         bandThickness: draft.bandThickness,
         frontArcPath: draft.frontArcPath,
         backArcPath: draft.backArcPath,
-        hidden: draft.object.properties.hidden === true,
+        hidden: draft.object.properties.hidden === true || draft.object.renderHints?.renderOrbit === false,
     };
 }
 function createLeaderLine(draft) {
@@ -323,6 +330,7 @@ function createLeaderLine(draft) {
         objectId: draft.object.id,
         object: draft.object,
         groupId: draft.groupId,
+        semanticGroupIds: [...(draft.object.groups ?? [])],
         x1: draft.x1,
         y1: draft.y1,
         x2: draft.x2,
@@ -335,7 +343,7 @@ function createSceneLabels(objects, sceneHeight, labelMultiplier) {
     const labels = [];
     const occupied = [];
     const visibleObjects = [...objects]
-        .filter((object) => !object.hidden)
+        .filter((object) => !object.hidden && object.object.renderHints?.renderLabel !== false)
         .sort((left, right) => left.sortKey - right.sortKey);
     for (const object of visibleObjects) {
         const direction = object.y > sceneHeight * 0.62 ? -1 : 1;
@@ -356,6 +364,7 @@ function createSceneLabels(objects, sceneHeight, labelMultiplier) {
             objectId: object.objectId,
             object: object.object,
             groupId: object.groupId,
+            semanticGroupIds: [...object.semanticGroupIds],
             label: object.label,
             secondaryLabel: object.secondaryLabel,
             x: object.x,
@@ -368,7 +377,7 @@ function createSceneLabels(objects, sceneHeight, labelMultiplier) {
     }
     return labels;
 }
-function createSceneLayers(orbitVisuals, leaders, objects, labels) {
+function createSceneLayers(orbitVisuals, relations, leaders, objects, labels) {
     const backOrbitIds = orbitVisuals
         .filter((visual) => !visual.hidden && Boolean(visual.backArcPath))
         .map((visual) => visual.renderId);
@@ -383,6 +392,10 @@ function createSceneLayers(orbitVisuals, leaders, objects, labels) {
         },
         { id: "orbits-back", renderIds: backOrbitIds },
         { id: "orbits-front", renderIds: frontOrbitIds },
+        {
+            id: "relations",
+            renderIds: relations.filter((relation) => !relation.hidden).map((relation) => relation.renderId),
+        },
         {
             id: "objects",
             renderIds: objects.filter((object) => !object.hidden).map((object) => object.renderId),
@@ -447,6 +460,42 @@ function createSceneGroups(objects, orbitVisuals, leaders, labels, relationships
     }
     return [...groups.values()].sort((left, right) => left.label.localeCompare(right.label));
 }
+function createSceneSemanticGroups(document, objects) {
+    return [...document.groups]
+        .map((group) => ({
+        id: group.id,
+        label: group.label,
+        summary: group.summary,
+        color: group.color,
+        tags: [...group.tags],
+        hidden: group.hidden,
+        objectIds: objects
+            .filter((object) => !object.hidden && object.semanticGroupIds.includes(group.id))
+            .map((object) => object.objectId),
+    }))
+        .sort((left, right) => left.label.localeCompare(right.label));
+}
+function createSceneRelations(document, objects) {
+    const objectMap = new Map(objects.map((object) => [object.objectId, object]));
+    return document.relations
+        .map((relation) => {
+        const from = objectMap.get(relation.from);
+        const to = objectMap.get(relation.to);
+        return {
+            renderId: `${createRenderId(relation.id)}-relation`,
+            relationId: relation.id,
+            relation,
+            fromObjectId: relation.from,
+            toObjectId: relation.to,
+            x1: from?.x ?? 0,
+            y1: from?.y ?? 0,
+            x2: to?.x ?? 0,
+            y2: to?.y ?? 0,
+            hidden: relation.hidden || !from || !to || from.hidden || to.hidden,
+        };
+    })
+        .sort((left, right) => left.relation.id.localeCompare(right.relation.id));
+}
 function createSceneViewpoints(document, projection, preset, relationships, objectMap) {
     const generatedOverview = createGeneratedOverviewViewpoint(document, projection, preset);
     const drafts = new Map();
@@ -464,7 +513,7 @@ function createSceneViewpoints(document, projection, preset, relationships, obje
         }
         const field = fieldParts.join(".").toLowerCase();
         const draft = drafts.get(id) ?? { id };
-        applyViewpointField(draft, field, value, projection, preset, relationships, objectMap);
+        applyViewpointField(draft, field, value, document, projection, preset, relationships, objectMap);
         drafts.set(id, draft);
     }
     const viewpoints = [...drafts.values()]
@@ -495,9 +544,8 @@ function createSceneViewpoints(document, projection, preset, relationships, obje
     });
 }
 function createGeneratedOverviewViewpoint(document, projection, preset) {
-    const label = document.system?.properties.title
-        ? `${String(document.system.properties.title)} Overview`
-        : "Overview";
+    const title = document.system?.title ?? document.system?.properties.title;
+    const label = title ? `${String(title)} Overview` : "Overview";
     return {
         id: "overview",
         label,
@@ -513,7 +561,7 @@ function createGeneratedOverviewViewpoint(document, projection, preset) {
         generated: true,
     };
 }
-function applyViewpointField(draft, field, value, projection, preset, relationships, objectMap) {
+function applyViewpointField(draft, field, value, document, projection, preset, relationships, objectMap) {
     const normalizedValue = value.trim();
     switch (field) {
         case "label":
@@ -580,7 +628,7 @@ function applyViewpointField(draft, field, value, projection, preset, relationsh
         case "groups":
             draft.filter = {
                 ...(draft.filter ?? createEmptyViewpointFilter()),
-                groupIds: parseViewpointGroups(normalizedValue, relationships, objectMap),
+                groupIds: parseViewpointGroups(normalizedValue, document, relationships, objectMap),
             };
             return;
     }
@@ -671,6 +719,7 @@ function parseViewpointLayers(value) {
             rawLayer === "guides" ||
             rawLayer === "orbits-back" ||
             rawLayer === "orbits-front" ||
+            rawLayer === "relations" ||
             rawLayer === "objects" ||
             rawLayer === "labels" ||
             rawLayer === "metadata") {
@@ -690,8 +739,12 @@ function parseViewpointObjectTypes(value) {
         entry === "structure" ||
         entry === "phenomenon");
 }
-function parseViewpointGroups(value, relationships, objectMap) {
+function parseViewpointGroups(value, document, relationships, objectMap) {
     return splitListValue(value).map((entry) => {
+        if (document.schemaVersion === "2.1" ||
+            document.groups.some((group) => group.id === entry)) {
+            return entry;
+        }
         if (entry.startsWith("wo-") && entry.endsWith("-group")) {
             return entry;
         }

package/packages/core/dist/types.d.ts

@@ -2,7 +2,7 @@ export type WorldOrbitObjectType = "system" | "star" | "planet" | "moon" | "belt
 export type PlacementMode = "orbit" | "at" | "surface" | "free";
 export type Unit = "au" | "km" | "m" | "ly" | "pc" | "kpc" | "re" | "rj" | "sol" | "me" | "mj" | "s" | "min" | "h" | "d" | "y" | "ky" | "my" | "gy" | "K" | "deg";
 export type WorldOrbitDocumentVersion = "1.0";
-export type WorldOrbitAtlasDocumentVersion = "2.0";
+export type WorldOrbitAtlasDocumentVersion = "2.0" | "2.1";
 export type WorldOrbitDraftDocumentVersion = "2.0-draft";
 export type WorldOrbitAnyDocumentVersion = WorldOrbitDocumentVersion | WorldOrbitAtlasDocumentVersion | WorldOrbitDraftDocumentVersion;
 export type ViewProjection = "topdown" | "isometric";
@@ -56,38 +56,102 @@ export interface AstInfoEntryNode {
 export interface WorldOrbitDocument {
     format: "worldorbit";
     version: WorldOrbitDocumentVersion;
+    schemaVersion: WorldOrbitAnyDocumentVersion;
     system: WorldOrbitSystem | null;
+    groups: WorldOrbitGroup[];
+    relations: WorldOrbitRelation[];
     objects: WorldOrbitObject[];
 }
 export interface WorldOrbitAtlasDocument {
     format: "worldorbit";
     version: WorldOrbitAtlasDocumentVersion;
+    schemaVersion: WorldOrbitAtlasDocumentVersion;
     sourceVersion: WorldOrbitDocumentVersion;
     system: WorldOrbitAtlasSystem | null;
+    groups: WorldOrbitGroup[];
+    relations: WorldOrbitRelation[];
     objects: WorldOrbitObject[];
     diagnostics: WorldOrbitDiagnostic[];
 }
 export interface WorldOrbitDraftDocument {
     format: "worldorbit";
     version: WorldOrbitDraftDocumentVersion;
+    schemaVersion: WorldOrbitDraftDocumentVersion;
     sourceVersion: WorldOrbitDocumentVersion;
     system: WorldOrbitAtlasSystem | null;
+    groups: WorldOrbitGroup[];
+    relations: WorldOrbitRelation[];
     objects: WorldOrbitObject[];
     diagnostics: WorldOrbitDiagnostic[];
 }
 export interface WorldOrbitSystem {
     type: "system";
     id: string;
+    title?: string | null;
+    description?: string | null;
+    epoch?: string | null;
+    referencePlane?: string | null;
     properties: Record<string, NormalizedValue>;
     info: Record<string, string>;
 }
 export interface WorldOrbitObject {
     type: Exclude<WorldOrbitObjectType, "system">;
     id: string;
+    groups?: string[];
+    epoch?: string | null;
+    referencePlane?: string | null;
+    tidalLock?: boolean;
+    resonance?: WorldOrbitResonance | null;
+    renderHints?: WorldOrbitRenderHints | null;
+    deriveRules?: WorldOrbitDeriveRule[];
+    validationRules?: WorldOrbitValidationRule[];
+    lockedFields?: string[];
+    tolerances?: WorldOrbitToleranceRule[];
+    typedBlocks?: Partial<Record<WorldOrbitTypedBlockName, Record<string, string>>>;
     properties: Record<string, NormalizedValue>;
     placement: Placement | null;
     info: Record<string, string>;
 }
+export type WorldOrbitTypedBlockName = "climate" | "habitability" | "settlement";
+export interface WorldOrbitGroup {
+    id: string;
+    label: string;
+    summary: string;
+    color: string | null;
+    tags: string[];
+    hidden: boolean;
+}
+export interface WorldOrbitRelation {
+    id: string;
+    from: string;
+    to: string;
+    kind: string;
+    label: string | null;
+    summary: string | null;
+    tags: string[];
+    color: string | null;
+    hidden: boolean;
+}
+export interface WorldOrbitResonance {
+    targetObjectId: string;
+    ratio: string;
+}
+export interface WorldOrbitRenderHints {
+    renderLabel?: boolean;
+    renderOrbit?: boolean;
+    renderPriority?: number;
+}
+export interface WorldOrbitDeriveRule {
+    field: string;
+    strategy: string;
+}
+export interface WorldOrbitValidationRule {
+    rule: string;
+}
+export interface WorldOrbitToleranceRule {
+    field: string;
+    value: NormalizedValue;
+}
 export type NormalizedValue = string | number | boolean | string[] | UnitValue;
 export type Placement = OrbitPlacement | AtPlacement | SurfacePlacement | FreePlacement;
 export interface OrbitPlacement {
@@ -167,6 +231,7 @@ export interface RenderSceneObject {
     ancestorIds: string[];
     childIds: string[];
     groupId: string | null;
+    semanticGroupIds: string[];
     x: number;
     y: number;
     radius: number;
@@ -186,6 +251,7 @@ export interface RenderOrbitVisual {
     object: WorldOrbitObject;
     parentId: string;
     groupId: string | null;
+    semanticGroupIds: string[];
     kind: "circle" | "ellipse";
     cx: number;
     cy: number;
@@ -205,6 +271,7 @@ export interface RenderLeaderLine {
     objectId: string;
     object: WorldOrbitObject;
     groupId: string | null;
+    semanticGroupIds: string[];
     x1: number;
     y1: number;
     x2: number;
@@ -217,6 +284,7 @@ export interface RenderSceneLabel {
     objectId: string;
     object: WorldOrbitObject;
     groupId: string | null;
+    semanticGroupIds: string[];
     label: string;
     secondaryLabel: string;
     x: number;
@@ -226,7 +294,7 @@ export interface RenderSceneLabel {
     direction: "above" | "below" | "left" | "right";
     hidden: boolean;
 }
-export type SceneLayerId = "background" | "guides" | "orbits-back" | "orbits-front" | "objects" | "labels" | "metadata";
+export type SceneLayerId = "background" | "guides" | "orbits-back" | "orbits-front" | "relations" | "objects" | "labels" | "metadata";
 export interface RenderSceneViewpointFilter {
     query: string | null;
     objectTypes: Array<Exclude<WorldOrbitObjectType, "system">>;
@@ -261,6 +329,27 @@ export interface RenderSceneGroup {
     leaderIds: string[];
     contentBounds: RenderBounds;
 }
+export interface RenderSceneSemanticGroup {
+    id: string;
+    label: string;
+    summary: string;
+    color: string | null;
+    tags: string[];
+    hidden: boolean;
+    objectIds: string[];
+}
+export interface RenderSceneRelation {
+    renderId: string;
+    relationId: string;
+    relation: WorldOrbitRelation;
+    fromObjectId: string;
+    toObjectId: string;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    hidden: boolean;
+}
 export interface RenderScene {
     width: number;
     height: number;
@@ -277,9 +366,11 @@ export interface RenderScene {
     contentBounds: RenderBounds;
     layers: RenderSceneLayer[];
     groups: RenderSceneGroup[];
+    semanticGroups: RenderSceneSemanticGroup[];
     viewpoints: RenderSceneViewpoint[];
     objects: RenderSceneObject[];
     orbitVisuals: RenderOrbitVisual[];
+    relations: RenderSceneRelation[];
     leaders: RenderLeaderLine[];
     labels: RenderSceneLabel[];
 }
@@ -349,12 +440,15 @@ export interface WorldOrbitAtlasSystem {
     type: "system";
     id: string;
     title: string | null;
+    description: string | null;
+    epoch: string | null;
+    referencePlane: string | null;
     defaults: WorldOrbitAtlasDefaults;
     atlasMetadata: Record<string, string>;
     viewpoints: WorldOrbitAtlasViewpoint[];
     annotations: WorldOrbitAtlasAnnotation[];
 }
-export type AtlasDocumentPathKind = "system" | "defaults" | "metadata" | "object" | "viewpoint" | "annotation";
+export type AtlasDocumentPathKind = "system" | "defaults" | "metadata" | "group" | "object" | "viewpoint" | "annotation" | "relation";
 export interface AtlasDocumentPath {
     kind: AtlasDocumentPathKind;
     id?: string;

package/packages/markdown/README.md

@@ -1,6 +1,6 @@
 # @worldorbit/markdown
 
-WorldOrbit markdown contains build-time integration for fenced `worldorbit` blocks in Unified, Remark, and Rehype pipelines.
+WorldOrbit markdown contains build-time integration for fenced `worldorbit` blocks in Unified, Remark, and Rehype pipelines and accepts the same Schema 2.1 atlas source as the core loader.
 
 Main exports:
 

package/packages/viewer/README.md

@@ -1,6 +1,6 @@
 # @worldorbit/viewer
 
-WorldOrbit viewer contains scene-to-SVG rendering, theme presets, browser interactivity, and embed hydration helpers.
+WorldOrbit viewer contains scene-to-SVG rendering, theme presets, browser interactivity, atlas controls, and embed hydration helpers for WorldOrbit documents up to Schema 2.1.
 
 Main exports:
 
@@ -8,5 +8,6 @@ Main exports:
 - `renderDocumentToSvg(document, options?)`
 - `renderSourceToSvg(source, options?)`
 - `createInteractiveViewer(container, options)`
+- `createAtlasViewer(container, options)`
 - `createWorldOrbitEmbedMarkup(payload, options?)`
 - `mountWorldOrbitEmbeds(root?, options?)`

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

@@ -133,6 +133,7 @@ export function sceneViewpointToLayerOptions(viewpoint) {
     return {
         background: viewpoint.layers.background,
         guides: viewpoint.layers.guides,
+        relations: viewpoint.layers.relations,
         orbits: viewpoint.layers["orbits-front"] === undefined && viewpoint.layers["orbits-back"] === undefined
             ? undefined
             : viewpoint.layers["orbits-front"] !== false || viewpoint.layers["orbits-back"] !== false,
@@ -174,7 +175,12 @@ function matchesObjectFilter(object, filter) {
         return false;
     }
     if (filter.groupIds?.length && (!object.groupId || !filter.groupIds.includes(object.groupId))) {
-        return false;
+        const hasSemanticMatch = object.semanticGroupIds.length > 0 &&
+            filter.groupIds.some((groupId) => object.semanticGroupIds.includes(groupId));
+        const hasLegacyMatch = Boolean(object.groupId && filter.groupIds.includes(object.groupId));
+        if (!hasSemanticMatch && !hasLegacyMatch) {
+            return false;
+        }
     }
     if (filter.tags?.length) {
         const objectTags = Array.isArray(object.object.properties.tags)

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

@@ -9,6 +9,7 @@ export function createAtlasViewer(container, options) {
     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,
@@ -18,6 +19,7 @@ export function createAtlasViewer(container, options) {
     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]");
@@ -31,6 +33,7 @@ export function createAtlasViewer(container, options) {
     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, {
@@ -78,6 +81,7 @@ export function createAtlasViewer(container, options) {
     });
     applyCurrentFilter();
     populateViewpoints();
+    populateGroups();
     syncControlsFromFilter(viewer.getFilter());
     renderBookmarks();
     updateSearchResults();
@@ -90,6 +94,10 @@ export function createAtlasViewer(container, options) {
         objectTypeFilter = (typeFilterSelect.value || null);
         applyCurrentFilter();
     });
+    groupFilterSelect?.addEventListener("change", () => {
+        groupFilter = groupFilterSelect.value || null;
+        applyCurrentFilter();
+    });
     viewpointSelect?.addEventListener("change", () => {
         const activeViewer = requireViewer();
         if (!viewpointSelect.value) {
@@ -233,6 +241,7 @@ export function createAtlasViewer(container, options) {
     return api;
     function refreshAfterInputChange() {
         populateViewpoints();
+        populateGroups();
         applyCurrentFilter();
         renderBookmarks();
         updateSearchResults();
@@ -249,7 +258,7 @@ export function createAtlasViewer(container, options) {
             query: searchQuery || undefined,
             objectTypes: objectTypeFilter ? [objectTypeFilter] : undefined,
             tags: baseFilter?.tags,
-            groupIds: baseFilter?.groupIds,
+            groupIds: groupFilter ? [groupFilter] : baseFilter?.groupIds,
             includeAncestors: baseFilter?.includeAncestors ?? true,
         });
     }
@@ -257,12 +266,16 @@ export function createAtlasViewer(container, options) {
         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) {
@@ -278,6 +291,17 @@ export function createAtlasViewer(container, options) {
         ].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;
@@ -313,6 +337,8 @@ export function createAtlasViewer(container, options) {
                 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,
             },
         };
@@ -351,6 +377,14 @@ function buildAtlasViewerMarkup(controls) {
           </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>

package/packages/viewer/dist/render.js

@@ -32,6 +32,13 @@ export function renderSceneToSvg(scene, options = {}) {
             .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 relationMarkup = layers.relations
+        ? scene.relations
+            .filter((relation) => !relation.hidden)
+            .filter((relation) => visibleObjectIds.has(relation.fromObjectId) && visibleObjectIds.has(relation.toObjectId))
+            .map((relation) => `<line class="wo-relation" x1="${relation.x1}" y1="${relation.y1}" x2="${relation.x2}" y2="${relation.y2}" data-render-id="${escapeXml(relation.renderId)}" data-relation-id="${escapeAttribute(relation.relationId)}" />`)
+            .join("")
+        : "";
     const objectMarkup = layers.objects
         ? visibleObjects
             .map((object) => renderSceneObject(object, options.selectedObjectId ?? null, theme))
@@ -75,10 +82,11 @@ export function renderSceneToSvg(scene, options = {}) {
     .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-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-relation { stroke: ${theme.relation}; stroke-width: 2; stroke-dasharray: 10 6; }
+    .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; }
@@ -109,9 +117,10 @@ export function renderSceneToSvg(scene, options = {}) {
   <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-back">${orbitMarkup.back}</g>` : ""}
+        ${layers.guides ? `<g data-layer-id="guides">${leaderMarkup}</g>` : ""}
+        ${layers.relations ? `<g data-layer-id="relations">${relationMarkup}</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>

package/packages/viewer/dist/theme.js

@@ -1,6 +1,7 @@
 const DEFAULT_LAYERS = {
     background: true,
     guides: true,
+    relations: true,
     orbits: true,
     objects: true,
     labels: true,
@@ -15,6 +16,7 @@ const THEME_PRESETS = {
         backgroundGlow: "rgba(240, 180, 100, 0.18)",
         panel: "rgba(7, 17, 27, 0.9)",
         panelLine: "rgba(168, 207, 242, 0.18)",
+        relation: "rgba(240, 180, 100, 0.42)",
         orbit: "rgba(163, 209, 255, 0.24)",
         orbitBand: "rgba(255, 190, 120, 0.28)",
         guide: "rgba(255, 255, 255, 0.04)",
@@ -37,6 +39,7 @@ const THEME_PRESETS = {
         backgroundGlow: "rgba(120, 255, 215, 0.16)",
         panel: "rgba(7, 20, 30, 0.9)",
         panelLine: "rgba(120, 255, 215, 0.16)",
+        relation: "rgba(156, 231, 255, 0.42)",
         orbit: "rgba(120, 255, 215, 0.2)",
         orbitBand: "rgba(137, 185, 255, 0.24)",
         guide: "rgba(255, 255, 255, 0.035)",
@@ -59,6 +62,7 @@ const THEME_PRESETS = {
         backgroundGlow: "rgba(255, 127, 95, 0.18)",
         panel: "rgba(24, 9, 13, 0.9)",
         panelLine: "rgba(255, 166, 149, 0.16)",
+        relation: "rgba(255, 178, 125, 0.42)",
         orbit: "rgba(255, 188, 164, 0.22)",
         orbitBand: "rgba(255, 214, 139, 0.24)",
         guide: "rgba(255, 255, 255, 0.03)",