@oceanum/eidos 0.9.0 → 0.9.1

package/README.md

@@ -19,13 +19,63 @@ A lightweight, reactive JavaScript library for embedding and controlling EIDOS v
 npm install @oceanum/eidos
 ```
 
-### Basic Usage
+### React Usage (Recommended)
+
+```tsx
+import { EidosProvider, useEidosSpec } from "@oceanum/eidos";
+
+// Define your EIDOS specification
+const initialSpec = {
+  version: "0.9",
+  id: "my-app",
+  name: "My Visualization",
+  root: {
+    id: "root",
+    nodeType: "world",
+    children: [],
+  },
+  data: [],
+};
+
+function App() {
+  return (
+    <EidosProvider
+      initialSpec={initialSpec}
+      options={{
+        renderer: "https://render.eidos.oceanum.io",
+        eventListener: (event) => console.log("Event:", event),
+      }}
+    >
+      <YourComponents />
+    </EidosProvider>
+  );
+}
+
+// In any child component
+function YourComponent() {
+  const spec = useEidosSpec();
+
+  const addLayer = () => {
+    // Mutate spec directly - changes propagate automatically to iframe
+    spec.root.children.push({
+      id: "new-layer",
+      nodeType: "worldlayer",
+      layerType: "track",
+    });
+  };
+
+  return <button onClick={addLayer}>Add Layer</button>;
+}
+```
+
+### Vanilla JavaScript Usage
 
 ```javascript
-import { embed } from "@oceanum/eidos";
+import { render } from "@oceanum/eidos";
 
 // Define your EIDOS specification
 const spec = {
+  version: "0.9",
   id: "my-app",
   name: "My Visualization",
   root: {
@@ -34,24 +84,134 @@ const spec = {
     children: [],
   },
   data: [],
-  transforms: [],
 };
 
-// Embed in a container element
+// Render in a container element
 const container = document.getElementById("eidos-container");
-const eidos = await embed(container, spec, (event) => {
-  console.log("Received event:", event);
+const result = await render(container, spec, {
+  renderer: "https://render.eidos.oceanum.io",
+  eventListener: (event) => {
+    console.log("Received event:", event);
+  },
 });
 
 // Mutate the spec naturally - changes propagate automatically
-eidos.name = "Updated Visualization";
-eidos.root.children.push({
+result.spec.name = "Updated Visualization";
+result.spec.root.children.push({
   id: "layer-1",
   nodeType: "worldlayer",
   layerType: "track",
 });
+
+// Clean up when done
+result.destroy();
+```
+
+## Advanced Usage
+
+### Managing Multiple EIDOS Instances
+
+The React Context API allows you to easily manage multiple EIDOS instances in the same application. Each `EidosProvider` creates its own isolated context with its own iframe and spec.
+
+**Option 1: Multiple Providers (Recommended)**
+
+```tsx
+import { EidosProvider, useEidosSpec } from "@oceanum/eidos";
+
+function App() {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
+      {/* Map view */}
+      <EidosProvider
+        initialSpec={mapSpec}
+        options={{ renderer: EIDOS_URL }}
+      >
+        <MapControls />
+      </EidosProvider>
+
+      {/* Chart view */}
+      <EidosProvider
+        initialSpec={chartSpec}
+        options={{ renderer: EIDOS_URL }}
+      >
+        <ChartControls />
+      </EidosProvider>
+    </div>
+  );
+}
+
+function MapControls() {
+  const spec = useEidosSpec(); // Gets mapSpec from nearest provider
+  // Mutations only affect this instance
+  const zoomIn = () => {
+    spec.root.viewState.zoom += 1;
+  };
+  return <button onClick={zoomIn}>Zoom In</button>;
+}
+
+function ChartControls() {
+  const spec = useEidosSpec(); // Gets chartSpec from nearest provider
+  // Completely isolated from MapControls
+  const updateData = () => {
+    spec.data[0].dataSpec = newData;
+  };
+  return <button onClick={updateData}>Update Data</button>;
+}
+```
+
+**Option 2: Low-Level Render API**
+
+For more control, use the `render()` function directly:
+
+```tsx
+import { render } from "@oceanum/eidos";
+import { useEffect, useRef, useState } from "react";
+
+function MultiInstance() {
+  const container1 = useRef(null);
+  const container2 = useRef(null);
+  const [specs, setSpecs] = useState({ map: null, chart: null });
+
+  useEffect(() => {
+    const init = async () => {
+      const map = await render(container1.current, mapSpec, { renderer: EIDOS_URL });
+      const chart = await render(container2.current, chartSpec, { renderer: EIDOS_URL });
+
+      setSpecs({ map: map.spec, chart: chart.spec });
+
+      return () => {
+        map.destroy();
+        chart.destroy();
+      };
+    };
+
+    init();
+  }, []);
+
+  const updateMap = () => {
+    if (specs.map) {
+      specs.map.root.viewState.zoom += 1;
+    }
+  };
+
+  return (
+    <div>
+      <div ref={container1} style={{ width: '50%', height: '100%' }} />
+      <div ref={container2} style={{ width: '50%', height: '100%' }} />
+      <button onClick={updateMap}>Update Map</button>
+    </div>
+  );
+}
 ```
 
+**Key Points for Multiple Instances:**
+
+- ✅ Each instance has its own iframe and spec proxy
+- ✅ Changes to one instance don't affect others
+- ✅ `useEidosSpec()` always returns the spec from the nearest `EidosProvider` ancestor
+- ✅ Use unique `id` values in your specs to avoid conflicts
+- ✅ Each instance can connect to the same or different renderer URLs
+
 ## Framework Integration
 
 - [React Integration](./docs/eidos/react.md) - Hooks, components, and patterns
@@ -61,6 +221,100 @@ eidos.root.children.push({
 
 ## API Reference
 
+### React Components and Hooks
+
+#### `<EidosProvider>`
+
+Renders an EIDOS iframe and provides the spec proxy to all child components via React Context.
+
+**Props:**
+- `initialSpec` (required): The EIDOS specification object
+- `options` (optional): Render options
+  - `renderer` (string): URL of the EIDOS renderer (default: `https://render.eidos.oceanum.io`)
+  - `eventListener` (function): Callback for events from the renderer
+  - `authToken` (string | function): Authentication token for data fetching
+- `containerStyle` (optional): CSS styles for the iframe container (default: `{ width: '100%', height: '100%', position: 'absolute' }`)
+- `onInitialized` (optional): Callback called with the spec proxy after initialization
+
+**Example:**
+```tsx
+<EidosProvider
+  initialSpec={mySpec}
+  options={{
+    renderer: "https://render.eidos.oceanum.io",
+    eventListener: (event) => console.log(event),
+  }}
+  containerStyle={{ width: '100vw', height: '100vh' }}
+  onInitialized={(spec) => console.log('Ready!', spec)}
+>
+  <YourComponents />
+</EidosProvider>
+```
+
+#### `useEidosSpec()`
+
+Hook that returns the EIDOS spec proxy from the nearest `EidosProvider` ancestor.
+
+**Returns:** `Proxy<EidosSpec>` - The spec proxy (read and mutate directly)
+
+**Throws:** Error if not used within an `EidosProvider`
+
+**Example:**
+```tsx
+function MyComponent() {
+  const spec = useEidosSpec();
+
+  // Read from spec
+  const layerCount = spec.root.children.length;
+
+  // Mutate spec - changes sync to iframe automatically
+  const addLayer = () => {
+    spec.root.children.push({
+      id: 'new-layer',
+      nodeType: 'worldlayer',
+    });
+  };
+
+  return <button onClick={addLayer}>Add Layer ({layerCount})</button>;
+}
+```
+
+### Core Functions
+
+#### `render(element, spec, options)`
+
+Low-level function to render EIDOS in a DOM element. Use this for vanilla JavaScript or when you need more control than `EidosProvider` offers.
+
+**Parameters:**
+- `element` (HTMLElement): Container element for the iframe
+- `spec` (EidosSpec): The EIDOS specification
+- `options` (RenderOptions): Configuration options
+  - `renderer` (string): Renderer URL
+  - `eventListener` (function): Event callback
+  - `authToken` (string | function): Auth token
+  - `id` (string): Optional override for spec ID
+
+**Returns:** `Promise<RenderResult>`
+- `spec`: The reactive spec proxy
+- `iframe`: The iframe element
+- `updateAuth(token)`: Function to update auth token
+- `destroy()`: Cleanup function
+
+**Example:**
+```javascript
+const result = await render(container, spec, {
+  renderer: EIDOS_URL,
+  eventListener: (e) => console.log(e),
+});
+
+result.spec.data.push(newData);
+
+// Clean up
+result.destroy();
+```
+
+### Additional Documentation
+
 - [Core API](./docs/eidos/api.md) - Complete API documentation
 - [Events](./docs/eidos/events.md) - Event handling and communication
 - [Validation](./docs/eidos/validation.md) - Schema validation details

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oceanum/eidos",
   "private": false,
-  "version": "0.9.0",
+  "version": "0.9.1",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -9,12 +9,12 @@
   },
   "dependencies": {
     "ajv": "^8.17.1",
-    "valtio": "^2.1.5"
+    "valtio": "^2.3.0"
   },
   "devDependencies": {
     "json-schema-to-typescript": "^15.0.4"
   },
   "peerDependencies": {
-    "react": "^19.1.0"
+    "react": "^19.2.3"
   }
 }

package/src/index.ts

@@ -1,3 +1,7 @@
-export * from "./lib/render";
-export * from "./schema/interfaces";
-export * from "./lib/react";
+export * from './lib/render';
+export type { RenderOptions, RenderResult } from './lib/render';
+export * from './schema/interfaces';
+export {
+    useEidosSpec,
+    EidosProvider
+} from './lib/react';

package/src/lib/react.tsx

@@ -1,8 +1,70 @@
+import { createContext, useContext, useEffect, useRef, useState, ReactNode } from 'react';
 import { useSnapshot } from 'valtio';
 import { Proxy } from 'valtio/vanilla';
 import { EidosSpec } from '../schema/interfaces';
+import { render, RenderOptions } from './render';
 
-export const useEidosSpec = (spec: Proxy<EidosSpec>) => {
-    const specSnapshot = useSnapshot(spec);
-    return specSnapshot;
+// Context to hold the EIDOS spec proxy
+const EidosSpecContext = createContext<Proxy<EidosSpec> | null>(null);
+
+// Hook to get the spec proxy from context
+// Can be used for both reading and mutations - valtio tracks reads automatically
+export const useEidosSpec = () => {
+    const spec = useContext(EidosSpecContext);
+    if (!spec) {
+        throw new Error('useEidosSpec must be used within an EidosProvider');
+    }
+    return spec;
+};
+
+// Props for the EidosProvider component
+interface EidosProviderProps {
+    children: ReactNode;
+    initialSpec: EidosSpec;
+    options?: Omit<RenderOptions, 'id'>;
+    containerStyle?: React.CSSProperties;
+    onInitialized?: (spec: Proxy<EidosSpec>) => void;
+}
+
+// Provider component that renders EIDOS and provides spec to children
+export const EidosProvider = ({
+    children,
+    initialSpec,
+    options = {},
+    containerStyle = { width: '100%', height: '100%', position: 'absolute' },
+    onInitialized,
+}: EidosProviderProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [spec, setSpec] = useState<Proxy<EidosSpec> | null>(null);
+    const initializedRef = useRef(false);
+
+    useEffect(() => {
+        if (!containerRef.current || initializedRef.current) return;
+
+        initializedRef.current = true;
+
+        const initEidos = async () => {
+            try {
+                const result = await render(containerRef.current!, initialSpec, options);
+                setSpec(result.spec);
+                onInitialized?.(result.spec);
+            } catch (error) {
+                console.error('Failed to initialize EIDOS:', error);
+                initializedRef.current = false;
+            }
+        };
+
+        initEidos();
+    }, [initialSpec, options, onInitialized]);
+
+    return (
+        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+            <div ref={containerRef} style={containerStyle} />
+            {spec && (
+                <EidosSpecContext.Provider value={spec}>
+                    {children}
+                </EidosSpecContext.Provider>
+            )}
+        </div>
+    );
 };

package/src/lib/render.ts

@@ -1,25 +1,66 @@
-import { proxy, subscribe, snapshot } from "valtio/vanilla";
-import { validateSchema } from "./eidosmodel";
-import { EidosSpec } from "../schema/interfaces";
+import { proxy, subscribe, snapshot, Proxy } from 'valtio/vanilla';
+import { validateSchema } from './eidosmodel';
+import { EidosSpec } from '../schema/interfaces';
 
-const DEFAULT_RENDERER = "https://render.eidos.oceanum.io";
+const DEFAULT_RENDERER = 'https://render.eidos.oceanum.io';
+
+/**
+ * Options for rendering an EIDOS spec
+ */
+export interface RenderOptions {
+  /** The unique identifier for the EIDOS spec (optional, defaults to spec.id) */
+  id?: string;
+  /** Optional callback for handling events from the renderer */
+  eventListener?: (payload: unknown) => void;
+  /** URL of the EIDOS renderer */
+  renderer?: string;
+  /** Authentication token to pass to the renderer for data fetching */
+  authToken?: string | (() => string | Promise<string>);
+}
+
+/**
+ * Result from the render function
+ */
+export interface RenderResult {
+  /** The reactive EIDOS spec proxy */
+  spec: Proxy<EidosSpec>;
+  /** Update the auth token sent to the renderer */
+  updateAuth: (
+    token: string | (() => string | Promise<string>),
+  ) => Promise<void>;
+  /** The iframe element */
+  iframe: HTMLIFrameElement;
+  /** Destroy the renderer and clean up resources */
+  destroy: () => void;
+}
 
 /**
  * Embed the EIDOS iframe and set up message passing
  * @param element HTML element to render the EIDOS spec into
  * @param spec The EIDOS specification object
- * @param id The unique identifier for the EIDOS spec (optional, defaults to spec.id)
- * @param eventListener Optional callback for handling events from the renderer
- * @param renderer URL of the EIDOS renderer
- * @returns A proxy object that can be used with useEidosSpec
+ * @param options Render options including id, eventListener, renderer URL, and authToken
+ * @returns A RenderResult object containing the spec proxy and control methods
  */
 const render = async (
   element: HTMLElement,
   spec: EidosSpec,
-  id?: string,
-  eventListener?: (payload: unknown) => void,
-  renderer = DEFAULT_RENDERER
-): Promise<Proxy<EidosSpec>> => {
+  options: RenderOptions = {},
+): Promise<RenderResult> => {
+  const { id, eventListener, renderer = DEFAULT_RENDERER, authToken } = options;
+
+  // Check if this container is already initialized
+  // We check both for an existing iframe and a marker on the container itself
+  // This prevents double-mounting even if destroy() was called but the container is being reused
+  const existingIframe = element.querySelector('iframe[data-eidos-renderer]');
+  const isInitialized = element.getAttribute('data-eidos-initialized') === 'true';
+
+  if (existingIframe || isInitialized) {
+    throw new Error('EIDOS renderer already mounted in this container. Call destroy() before re-rendering.');
+  }
+
+  // Mark container as initialized
+  element.setAttribute('data-eidos-initialized', 'true');
+
   // Validate the spec before creating proxy
   try {
     await validateSchema(spec);
@@ -32,55 +73,104 @@ const render = async (
   const _id = id || spec.id;
 
   return new Promise((resolve, reject) => {
-    const iframe = document.createElement("iframe");
+    const iframe = document.createElement('iframe');
     iframe.src = `${renderer}?id=${_id}`;
-    iframe.width = "100%";
-    iframe.height = "100%";
-    iframe.frameBorder = "0";
+    iframe.width = '100%';
+    iframe.height = '100%';
+    iframe.frameBorder = '0';
+    // Mark this as an EIDOS iframe for duplicate detection
+    iframe.setAttribute('data-eidos-renderer', 'true');
     element.appendChild(iframe);
 
+    let messageHandler: ((event: MessageEvent) => void) | null = null;
+    let unsubscribe: (() => void) | null = null;
+
     iframe.onload = () => {
       const win = iframe.contentWindow;
 
-      window.addEventListener("message", (event) => {
+      // Helper to send auth token to iframe
+      const sendAuth = async (
+        token: string | (() => string | Promise<string>),
+      ) => {
+        const resolvedToken =
+          typeof token === 'function' ? await token() : token;
+        win?.postMessage(
+          {
+            id: _id,
+            type: 'auth',
+            payload: resolvedToken,
+          },
+          '*',
+        );
+      };
+
+      messageHandler = (event: MessageEvent) => {
         if (event.source !== win) return;
-        if (event.data.id !== id) return;
 
-        if (event.data.type === "init") {
+        // Check ID only if both message and expected ID exist
+        // Some EIDOS renderers may not include ID in event messages
+        if (event.data.id && event.data.id !== _id) return;
+
+        if (event.data.type === 'init') {
           // Send initial spec
           win?.postMessage(
             {
               id: _id,
-              type: "spec",
+              type: 'spec',
               payload: structuredClone(eidos),
             },
-            "*"
+            '*',
           );
-        } else {
-          eventListener?.(event.data.payload);
+          // Send auth token on init if provided
+          if (authToken) {
+            sendAuth(authToken);
+          }
+        } else if (event.data.type || event.data.action || event.data.control) {
+          // Process as event - EIDOS events may not have 'type' but have 'action' and 'control'
+          eventListener?.(event.data);
         }
-      });
+      };
+      window.addEventListener('message', messageHandler);
 
       // Subscribe to changes and send patches to renderer
-      subscribe(eidos, () => {
+      unsubscribe = subscribe(eidos, () => {
         win?.postMessage(
           {
             id: _id,
-            type: "spec",
+            type: 'spec',
             payload: snapshot(eidos),
           },
-          "*"
+          '*',
         );
       });
 
-      resolve(eidos);
+      // Send initial auth token if provided (in case init already happened)
+      if (authToken) {
+        sendAuth(authToken);
+      }
+
+      resolve({
+        spec: eidos,
+        updateAuth: sendAuth,
+        iframe,
+        destroy: () => {
+          if (messageHandler) {
+            window.removeEventListener('message', messageHandler);
+          }
+          if (unsubscribe) {
+            unsubscribe();
+          }
+          iframe.remove();
+          // Clear the initialization marker when explicitly destroyed
+          element.removeAttribute('data-eidos-initialized');
+        },
+      });
     };
 
     iframe.onerror = () => {
-      reject(new Error("Failed to load EIDOS renderer"));
+      reject(new Error('Failed to load EIDOS renderer'));
     };
   });
-  return eidos;
 };
 
 export { render };

package/src/schema/interfaces.ts

@@ -1,22 +1,22 @@
 /**
  * Auto-generated TypeScript interfaces for EIDOS schemas
  * Generated from: https://schemas.oceanum.io/eidos/root.json
- * 
+ *
  * Each interface corresponds to a definition in the EIDOS schema bundle.
  * These interfaces can be used for type validation and IDE support.
- * 
+ *
  * Do not modify this file directly - regenerate using:
  * npx nx run eidos:generate-types
  */
 
-const 08Constant = "0.8" as const;
-const WorldNodeType = "world" as const;
-const PlotNodeType = "plot" as const;
-const DocumentNodeType = "document" as const;
-const GridNodeType = "grid" as const;
-const MenuNodeType = "menu" as const;
-const WorldlayerNodeType = "worldlayer" as const;
-const ControlgroupNodeType = "controlgroup" as const;
+const Constant = '0.9' as const;
+const WorldNodeType = 'world' as const;
+const PlotNodeType = 'plot' as const;
+const DocumentNodeType = 'document' as const;
+const GridNodeType = 'grid' as const;
+const MenuNodeType = 'menu' as const;
+const WorldlayerNodeType = 'worldlayer' as const;
+const ControlgroupNodeType = 'controlgroup' as const;
 
 /**
  * EIDOS specification
@@ -26,10 +26,10 @@ export interface EidosSpec {
   /**
    * Version of EIDOS
    */
-  version?: 08Constant;
+  version?: Constant;
   /**
    * Unique identifier for this specification. Must be URL-safe using only lowercase letters, numbers, hyphens, and underscores. This ID is used for referencing the specification in URLs, file systems, and databases. It should be descriptive but concise.
-   * 
+   *
    * @example
    * "seastate-demo"
    * "plot-demo"
@@ -38,7 +38,7 @@ export interface EidosSpec {
   id: string;
   /**
    * Human-readable display name for this specification. This is the name shown to users in lists, menus, and interfaces. It can contain spaces, special characters, and mixed case. Should be descriptive and meaningful to end users.
-   * 
+   *
    * @example
    * "DemoOverlay"
    * "DemoPlot"
@@ -47,7 +47,7 @@ export interface EidosSpec {
   name: string;
   /**
    * Detailed description of what this specification does and its purpose. This is primarily for documentation and metadata purposes - it's not typically displayed in the main interface but may be shown in tooltips, help text, or specification listings. Useful for developers and content creators.
-   * 
+   *
    * @example
    * "Demonstration overlay"
    * "Demonstration grid layout"
@@ -66,7 +66,7 @@ export interface EidosSpec {
   /**
    * Data Sources
    * Array of data source definitions that provide data to the visualization components. Each data source can be a static dataset, OceanQL query, Oceanum Datamesh source, or other supported data provider. Data sources are referenced by ID throughout the specification.
-   * 
+   *
    * @example
    * [{"id":"sig-wave-height-trki","dataType":"oceanumDatamesh","dataSpec":{"datasource":"oceanum_wave_trki_era5_v1_grid","variables":["hs","tps"],"geofilter":{"type":"feature","geom":{"type":"Feature","geometry":{"type":"Point","coordinates":[174.3,-38.5]}}},"timefilter":{"times":["2018-01-01 00:00:00Z","2019-01-01 00:00:00Z"]}}}]
    */
@@ -110,7 +110,7 @@ export interface EidosTheme {
   /**
    * Color scheme for the view
    */
-  preset?: "default" | "dark";
+  preset?: 'default' | 'dark';
   style?: EidosStyle;
 }
 
@@ -121,7 +121,7 @@ export interface EidosTheme {
 export interface EidosData {
   /**
    * Unique identifier for this data source within the specification. Must be alphanumeric with hyphens and underscores only. This ID is used to reference the data source from visualization layers and components.
-   * 
+   *
    * @example
    * "sig-wave-height-trki"
    * "ship-positions"
@@ -130,13 +130,13 @@ export interface EidosData {
   id: string;
   /**
    * Type of data source that determines how the data is accessed and processed. Each type requires different configuration in the dataSpec property.
-   * 
+   *
    * @example
    * "dataset"
    * "geojson"
    * "transform"
    */
-  dataType: "oceanql" | "zarr" | "dataset" | "geojson" | "transform";
+  dataType: 'oceanql' | 'zarr' | 'dataset' | 'geojson' | 'transform';
   dataSpec: Dataset | Transform | Geojson | Oceanquery | Zarr;
 }
 
@@ -147,7 +147,7 @@ export interface EidosData {
 export interface World {
   /**
    * Unique identifier for this world node within the specification. Used for referencing this node in events, interactions, and programmatic access.
-   * 
+   *
    * @example
    * "map-1"
    * "world-view"
@@ -206,7 +206,7 @@ export interface Plot {
    */
   title?: string;
   nodeType?: PlotNodeType;
-  plotType?: "vega" | "vega-lite";
+  plotType?: 'vega' | 'vega-lite';
   plotSpec: any & PlotSpec;
   /**
    * Actions to enable for the plot
@@ -245,7 +245,7 @@ export interface Document {
 export interface Grid {
   /**
    * Unique identifier for this grid node within the specification. Used for referencing this node in events, interactions, and programmatic access.
-   * 
+   *
    * @example
    * "main-grid"
    * "dashboard-layout"
@@ -283,7 +283,7 @@ export interface Menu {
   /**
    * Location of menu relative to content
    */
-  position?: "top" | "left" | "bottom" | "right";
+  position?: 'top' | 'left' | 'bottom' | 'right';
   /**
    * Whether menu is open
    */
@@ -356,7 +356,7 @@ export interface Dataset {
 
 /**
  * Transform
- * Specification for data transform. 
+ * Specification for data transform.
  */
 export interface Transform {
   /**
@@ -374,7 +374,7 @@ export interface Transform {
   /**
    * Output data type
    */
-  outputType?: "dataset" | "geojson";
+  outputType?: 'dataset' | 'geojson';
   /**
    * Transform code
    * Transform code as body of function
@@ -460,7 +460,7 @@ export interface Zarr {
 export interface Worldlayer {
   /**
    * Unique identifier for this layer within the world node. Used for layer management, visibility control, and programmatic access.
-   * 
+   *
    * @example
    * "wave-height"
    * "ship-tracks"
@@ -469,7 +469,7 @@ export interface Worldlayer {
   id: string;
   /**
    * Display name for this layer shown in the layer selector and legend. Should be descriptive and user-friendly.
-   * 
+   *
    * @example
    * "Significant Wave Height"
    * "Ship Positions"
@@ -479,7 +479,7 @@ export interface Worldlayer {
   nodeType: WorldlayerNodeType;
   /**
    * Reference to a data source defined in the root 'data' array. This connects the layer to its data source for visualization.
-   * 
+   *
    * @example
    * "hs-1"
    * "sig-wave-height-trki"
@@ -530,7 +530,7 @@ export interface ControlGroup {
    */
   id: string;
   nodeType?: ControlgroupNodeType;
-  orientation?: "horizontal" | "vertical";
+  orientation?: 'horizontal' | 'vertical';
   /**
    * Control list
    */
@@ -550,10 +550,10 @@ export interface View {
   /**
    * Type of world view
    */
-  viewType?: "map" | "globe";
+  viewType?: 'map' | 'globe';
   /**
    * Longitude coordinate of the map center in decimal degrees (-180 to 180). Positive values are East, negative values are West.
-   * 
+   *
    * @example
    * 174.3
    * -122.4
@@ -562,7 +562,7 @@ export interface View {
   longitude: number;
   /**
    * Latitude coordinate of the map center in decimal degrees (-90 to 90). Positive values are North, negative values are South.
-   * 
+   *
    * @example
    * -38.5
    * 37.7
@@ -583,7 +583,7 @@ export interface View {
   maxZoom?: number;
   /**
    * Initial zoom level of the map. Higher values show more detail. Typically ranges from 0 (world view) to 20+ (street level).
-   * 
+   *
    * @example
    * 2
    * 8
@@ -642,7 +642,7 @@ export interface DocumentStyle {
   /**
    * Justify content
    */
-  justifyContent?: "left" | "center" | "right";
+  justifyContent?: 'left' | 'center' | 'right';
 }
 
 /**
@@ -933,10 +933,17 @@ export interface MapHoverInfo {
 /**
  * Layer specification
  */
-export type Layerspec = Feature | Gridded | Label | Scenegraph | Seasurface | Track | Wmts;
+export type Layerspec =
+  | Feature
+  | Gridded
+  | Label
+  | Scenegraph
+  | Seasurface
+  | Track
+  | Wmts;
 
 export interface Timeselect {
-  mode: "nearest" | "exact" | "range";
+  mode: 'nearest' | 'exact' | 'range';
   /**
    * Time tolerance duration for nearest time select
    */
@@ -945,7 +952,7 @@ export interface Timeselect {
    * Time aggregation
    * Aggregation method for time range
    */
-  aggregate?: "last" | "first" | "sum" | "mean" | "max" | "min";
+  aggregate?: 'last' | 'first' | 'sum' | 'mean' | 'max' | 'min';
   /**
    * Data field to group by
    */
@@ -959,7 +966,7 @@ export interface Levelselect {
   /**
    * Level selection mode
    */
-  mode?: "nearest" | "exact" | "range";
+  mode?: 'nearest' | 'exact' | 'range';
   /**
    * Level tolerance for nearest level select
    */
@@ -978,7 +985,7 @@ export interface Control {
   /**
    * Control type
    */
-  nodeType: "points" | "polygon" | "bbox" | "radius" | "drop" | "measure";
+  nodeType: 'points' | 'polygon' | 'bbox' | 'radius' | 'drop' | 'measure';
   /**
    * Control id
    */
@@ -1009,17 +1016,17 @@ export interface Control {
 /**
  * Base layer type
  */
-export type Baselayerpreset = "oceanum" | "terrain";
+export type Baselayerpreset = 'oceanum' | 'terrain';
 
 /**
  * ResampleType
  */
-export type Resampletype = "mean" | "nearest";
+export type Resampletype = 'mean' | 'nearest';
 
 /**
  * Aggregate Ops
  */
-export type AggregateOps = "mean" | "min" | "max" | "std" | "sum";
+export type AggregateOps = 'mean' | 'min' | 'max' | 'std' | 'sum';
 
 /**
  * Feature
@@ -1029,7 +1036,7 @@ export interface Feature {
   /**
    * Type
    */
-  type: "Feature";
+  type: 'Feature';
   geometry: Geometry;
   /**
    * Properties
@@ -1049,7 +1056,14 @@ export interface Feature {
  * Geometry
  * Geometry Model
  */
-export type Geometry = Point | Multipoint | Linestring | Multilinestring | Polygon | Multipolygon | Geometrycollection;
+export type Geometry =
+  | Point
+  | Multipoint
+  | Linestring
+  | Multilinestring
+  | Polygon
+  | Multipolygon
+  | Geometrycollection;
 
 /**
  * Point