@mappedin/react-sdk 6.0.1-beta.30 → 6.0.1-beta.31

package/lib/esm/index.d.ts

@@ -22,7 +22,7 @@
 //   ../react/@packages/internal/quad-tree
 //   ../react/@mappedin/core-sdk/src/components/text3d
 //   ../react/minisearch
-//   ../react/three/addons/loaders/GLTFLoader.js
+//   ../react/three/examples/jsm/loaders/GLTFLoader.js
 //   ../react/@mapbox/point-geometry
 //   ../react/@maplibre/maplibre-gl-style-spec
 //   ../react/gl-matrix
@@ -65,12 +65,13 @@ declare module '@mappedin/react-sdk/mappedin-js/src' {
     import type { ParsedMVF as TMVF, StyleCollection as TMVFStyleCollection, Style as TMVFStyle, LineStringStyle as TMVFLineStringStyle, PolygonStyle as TMVFPolygonStyle, PointStyle as TMVFPointStyle, ParsedMVFLocalePack, OperationHours, SiblingGroup, LocationState } from '@mappedin/mvf';
     import { MapView } from '@mappedin/react-sdk/mappedin-js/src/map-view';
     export type { Text3D as Text3DApi } from '@mappedin/react-sdk/mappedin-js/src/api-geojson/text3d';
-    import type { InsetPadding, InsetPaddingOption, Shading, PaintStyle, LineStyle, WatermarkOptions, Text3DState, AddText3DOptions, UpdatableText3DState, InitializeText3DState, MapViewState } from '@mappedin/react-sdk/geojson/src';
+    import type { InsetPadding, InsetPaddingOption, Shading, PaintStyle, LineStyle, WatermarkOptions, Text3DState, AddText3DOptions, UpdatableText3DState, InitializeText3DState, EnvMapOptions, MapViewState, UpdateModelState, InitializeModelState } from '@mappedin/react-sdk/geojson/src';
     import { enableTestMode, preloadFont } from '@mappedin/react-sdk/geojson/src';
     export type { PubSub } from '@packages/internal/common/pubsub';
     import type { TMappedinMapLibreOverlayEvents } from '@mappedin/react-sdk/mappedin-js/src/maplibre-overlay';
     import { MappedinMapLibreOverlay } from '@mappedin/react-sdk/mappedin-js/src/maplibre-overlay';
     import type { LanguagePackHydrationItem } from '@mappedin/react-sdk/mappedin-js/src/types';
+    import { MAPPEDIN_COLORS } from '@mappedin/react-sdk/mappedin-js/src/constants';
     import { type Environment } from '@packages/internal/mvf-utils/mvf-utils';
     import type { TBlueDotEvents, TBlueDotAction, TBlueDotState, GeolocationPositionExtended, TFollowMode, TFollowCameraOptions } from '@mappedin/react-sdk/mappedin-js/src/api-geojson/blue-dot/blue-dot';
     import type { TExpandOptions, TStackedMapsEvents, TStackedMapsState } from '@mappedin/react-sdk/mappedin-js/src/api-geojson/stacked-maps/stacked-maps';
@@ -330,8 +331,8 @@ declare module '@mappedin/react-sdk/mappedin-js/src' {
         * @deprecated Use {@link show3dMap} instead.
         */
     export const show3dMapGeojson: (el: HTMLElement, mapData: MapData, options?: TShow3DMapOptions) => Promise<MapView>;
-    export { parseMVF, unzipMVF, enableTestMode, preloadFont };
-    export type { MapView, MapData, MapViewState, MappedinMapLibreOverlay, TMappedinMapLibreOverlayEvents, TBlueDotEvents, TBlueDotAction, TBlueDotState, GeolocationPositionExtended, TStackedMapsEvents, TExpandOptions, TStackedMapsState, TFollowMode, TFollowCameraOptions, TEvents, TEventPayload, TFloorChangeReason, TClickPayload, THoverPayload, TShow3DMapOptions, TGetMapDataOptions, TGetMapDataWithAccessTokenOptions, TGetMapDataWithCredentialsOptions, TGetMapDataSharedOptions, TAntialiasingOptions, TMVF, PaintStyle, LineStyle, Shading, TMVFStyleCollection, TMVFStyle, TMVFLineStringStyle, TMVFPolygonStyle, TMVFPointStyle, Environment, InsetPadding, InsetPaddingOption, OperationHours, SiblingGroup, LocationState, Text3DState, AddText3DOptions, UpdatableText3DState, InitializeText3DState, };
+    export { parseMVF, unzipMVF, enableTestMode, preloadFont, MAPPEDIN_COLORS };
+    export type { MapView, MapData, MapViewState, MappedinMapLibreOverlay, TMappedinMapLibreOverlayEvents, TBlueDotEvents, TBlueDotAction, TBlueDotState, GeolocationPositionExtended, TStackedMapsEvents, TExpandOptions, TStackedMapsState, TFollowMode, TFollowCameraOptions, TEvents, TEventPayload, TFloorChangeReason, TClickPayload, THoverPayload, TShow3DMapOptions, TGetMapDataOptions, TGetMapDataWithAccessTokenOptions, TGetMapDataWithCredentialsOptions, TGetMapDataSharedOptions, TAntialiasingOptions, TMVF, PaintStyle, LineStyle, EnvMapOptions, Shading, TMVFStyleCollection, TMVFStyle, TMVFLineStringStyle, TMVFPolygonStyle, TMVFPointStyle, Environment, InsetPadding, InsetPaddingOption, OperationHours, SiblingGroup, LocationState, Text3DState, AddText3DOptions, UpdatableText3DState, InitializeText3DState, UpdateModelState, InitializeModelState, };
     export type * from 'geojson';
     export type { TUpdateState, TUpdateStates, TLabelState, TGeometryState, TModelState, TShapeState, TDoorsState, TImageState, TWallsState, TCameraAnimationOptions, TAnimationOptions, TFocusOnOptions, TEasingFunction, TCameraTarget, TNavigationTarget, TDirectionZone, TAddMarkerOptions, TAddPathOptions, TLabelAppearance, TAddLabelOptions, TAddModelOptions, TAddModel, TAddImageOptions, TGetDirectionsOptions, TCollisionRankingTier, TMarkerAnchor, TDirectionInstruction, TDirectionInstructionAction, TGetState, TMarkerState, TBlueDotOptions, TBlueDotPositionUpdate, TFocusTarget, IFocusable, IAnchorable, TMapDataObjectTypes, } from '@mappedin/react-sdk/mappedin-js/src/types';
     export { WALLS, DOORS } from '@mappedin/react-sdk/mappedin-js/src/types';
@@ -1365,7 +1366,7 @@ declare module '@mappedin/react-sdk/mappedin-js/src/map-view' {
     import type MapData from '@mappedin/react-sdk/mappedin-js/src/map-data';
     import type { Annotation, Coordinate, Door, Floor, MapObject, PointOfInterest, Space, Node, EnterpriseLocation, FloorStack, Facade } from '@mappedin/react-sdk/mappedin-js/src/map-data-objects';
     import type { DOORS, WALLS, TGetDirectionsOptions, TGetState, TNavigationTarget, TUpdateState, TUpdateStates, GlobalState, UpdateGlobalState } from '@mappedin/react-sdk/mappedin-js/src/types';
-    import type { Label, Marker, Image, Shape, Text3D as Text3DView } from '@mappedin/react-sdk/mappedin-js/src/map-view-objects';
+    import type { Label, Marker, Image, Shape, Text3D as Text3DView, Model } from '@mappedin/react-sdk/mappedin-js/src/map-view-objects';
     import type { TEventPayload } from '@mappedin/react-sdk/mappedin-js/src/events';
     import type { Shapes } from '@mappedin/react-sdk/mappedin-js/src/api-geojson/shapes';
     import type { StackedMaps, TCollapseOptions, TExpandOptions } from '@mappedin/react-sdk/mappedin-js/src/api-geojson/stacked-maps/stacked-maps';
@@ -1471,7 +1472,7 @@ declare module '@mappedin/react-sdk/mappedin-js/src/map-view' {
                 * // Update the color of a space to red.
                 * map.updateState(space, { color: 'red' });
                 */
-            updateState<T extends Space | Text3DView | MapObject | Label | Marker | Shape | Door | Facade | WALLS | DOORS>(target: T, state: TUpdateState<T>): any;
+            updateState<T extends Space | Text3DView | MapObject | Label | Marker | Shape | Door | Facade | WALLS | DOORS | Model>(target: T, state: TUpdateState<T>): any;
             updateState<T extends string & NonNullable<unknown>>(target: T, state: TUpdateStates): any;
             /**
                 * Update global state of the MapView
@@ -1539,7 +1540,7 @@ declare module '@mappedin/react-sdk/mappedin-js/src/map-view' {
                 * @hidden
                 */
             updateWatermark(options: WatermarkUpdateOptions): void;
-            getState<T extends Space | Text3DView | MapObject | Label | Marker | Image | Shape | string>(target: T): TGetState<T>;
+            getState<T extends Space | Model | Text3DView | MapObject | Label | Marker | Image | Shape | string>(target: T): TGetState<T>;
             setHoverColor(c: string): void;
             getHoverColor(): string | undefined;
             /**
@@ -1750,10 +1751,10 @@ declare module '@mappedin/react-sdk/geojson/src' {
     import type { GroupContainerState } from '@mappedin/react-sdk/geojson/src/entities/group-container';
     import type { GeometryGroupState } from '@mappedin/react-sdk/geojson/src/entities/geometry-group';
     import type { Position } from '@mappedin/react-sdk/geojson/src/types/geometry';
-    import type { InsetPadding, InsetPaddingOption, RendererCoreOptions, ClickPayload, HoverPayload, CameraPayload, MapEvent, MapEventPayload } from '@mappedin/react-sdk/geojson/src/types';
+    import type { InsetPadding, InsetPaddingOption, RendererCoreOptions, ClickPayload, HoverPayload, CameraPayload, MapEvent, MapEventPayload, EnvMapOptions } from '@mappedin/react-sdk/geojson/src/types';
     import type { GeometryState } from '@mappedin/react-sdk/geojson/src/components/mesh';
     import type { ShapeState, CustomGeometryBuilder } from '@mappedin/react-sdk/geojson/src/components/custom';
-    import type { ModelState } from '@mappedin/react-sdk/geojson/src/components/model';
+    import type { ModelState, UpdateModelState, InitializeModelState } from '@mappedin/react-sdk/geojson/src/components/model';
     import RendererCore, { type MapViewState } from '@mappedin/react-sdk/geojson/src/renderer';
     import type { Camera, AnimateToOptions, FocusOnOptions, EasingCurve } from '@mappedin/react-sdk/geojson/src/camera';
     import { mountSceneGraphVisualizer } from '@mappedin/react-sdk/geojson/examples/src/utils/scene-graph-visualizer';
@@ -1771,17 +1772,17 @@ declare module '@mappedin/react-sdk/geojson/src' {
       */
     export { enableTestMode } from '@mappedin/react-sdk/geojson/src/services/test-mode';
     export { mountSceneGraphVisualizer };
-    export type { EntityId, EntityState, LineStyle, PaintStyle, ModelStyle, ModelProperties, Shading } from '@mappedin/react-sdk/geojson/src/types';
+    export type { EntityId, EntityState, LineStyle, PaintStyle, ModelProperties, Shading } from '@mappedin/react-sdk/geojson/src/types';
     export type * from 'geojson';
     export type { WatermarkUpdateOptions, WatermarkOptions, WatermarkPosition } from '@mappedin/react-sdk/geojson/src/systems/watermark/system';
     export { preloadFont } from '@mappedin/react-sdk/geojson/src/systems/text3d/system';
     export type { GLTFExportOptions } from '@mappedin/react-sdk/geojson/src/systems/exporter';
     export type { AttributionControlOptions, AttributionPosition } from '@mappedin/react-sdk/geojson/src/systems/html-controls/system';
-    export type { Text3DStyle } from '@mappedin/react-sdk/geojson/src/components/styles';
+    export type { Text3DStyle, ModelStyle } from '@mappedin/react-sdk/geojson/src/components/styles';
     export type { AddText3DOptions, InitializeText3DState, UpdatableText3DState } from '@mappedin/react-sdk/geojson/src/components/text3d';
     export { ATTRIBUTION_POSITIONS } from '@mappedin/react-sdk/geojson/src/systems/html-controls/system';
     export { ANIMATION_TWEENS } from '@mappedin/react-sdk/geojson/src/camera';
-    export type { AddPathOptions, AddMarkerOptions, AddLabelOptions, AnimateToOptions, FocusOnOptions, MapViewState, MarkerState, PathState, GroupContainerState, GeometryGroupState, ShapeState, CustomGeometryBuilder, LabelState, GeometryState, ModelState, EasingCurve, Camera, InsetPadding, InsetPaddingOption, Position, ClickPayload, HoverPayload, CameraPayload, MapEvent, MapEventPayload, CollisionRankingTier, LabelAppearance, RendererCore, RendererCoreOptions, };
+    export type { AddPathOptions, AddMarkerOptions, AddLabelOptions, AnimateToOptions, FocusOnOptions, MapViewState, MarkerState, PathState, GroupContainerState, GeometryGroupState, ShapeState, CustomGeometryBuilder, LabelState, GeometryState, ModelState, UpdateModelState, InitializeModelState, EasingCurve, Camera, InsetPadding, InsetPaddingOption, Position, ClickPayload, HoverPayload, CameraPayload, MapEvent, MapEventPayload, CollisionRankingTier, LabelAppearance, RendererCore, EnvMapOptions, RendererCoreOptions, };
     export function createRenderer(container: HTMLElement, options?: RendererCoreOptions & {
         [key: string]: any;
     }): Promise<RendererCore>;
@@ -1862,7 +1863,7 @@ declare module '@mappedin/react-sdk/mappedin-js/src/types' {
     import type { Coordinate, Floor, Door, Space, MapObject, PointOfInterest, Connection, EnterpriseLocation, Node, Area, Facade, FloorStack, Annotation, EnterpriseCategory, EnterpriseVenue } from '@mappedin/react-sdk/mappedin-js/src/map-data-objects';
     import type { Label, Marker, Model, Image, Shape, Text3D } from '@mappedin/react-sdk/mappedin-js/src/map-view-objects';
     import type { Language, ParsedMVFLocalePack } from '@mappedin/mvf';
-    import type { InsetPaddingOption, UpdatableText3DState, Text3DState, AddText3DOptions } from '@mappedin/react-sdk/geojson/src';
+    import type { InsetPaddingOption, UpdatableText3DState, Text3DState, AddText3DOptions, EnvMapOptions, InitializeModelState, ModelState, UpdateModelState } from '@mappedin/react-sdk/geojson/src';
     export type DeepRequired<T> = Required<{
             [K in keyof T]: T[K] extends Required<T[K]> ? T[K] : DeepRequired<T[K]>;
     }>;
@@ -1951,7 +1952,7 @@ declare module '@mappedin/react-sdk/mappedin-js/src/types' {
         */
     export type TModelState = {
             type: 'model';
-    };
+    } & ModelState;
     /**
         * Defines the state for an image when its appearance is updated.
         */
@@ -2123,7 +2124,7 @@ declare module '@mappedin/react-sdk/mappedin-js/src/types' {
     /**
         * The type for updating the state of map elements (colors, texts, etc.).
         */
-    export type TUpdateState<T> = T extends WALLS ? Partial<TWallsState> : T extends DOORS | Door ? Partial<TDoorsState> : T extends Marker ? Partial<TMarkerState> : T extends Label ? Partial<TLabelState> : T extends Space | MapObject | Facade ? Partial<TGeometryState> : T extends Shape ? Partial<Omit<TShapeState, 'height' | 'type'>> : T extends Text3D ? UpdatableText3DState : T extends string ? Record<string, any> : never;
+    export type TUpdateState<T> = T extends WALLS ? Partial<TWallsState> : T extends DOORS | Door ? Partial<TDoorsState> : T extends Model ? Partial<UpdateModelState> : T extends Marker ? Partial<TMarkerState> : T extends Label ? Partial<TLabelState> : T extends Space | MapObject | Facade ? Partial<TGeometryState> : T extends Shape ? Partial<Omit<TShapeState, 'height' | 'type'>> : T extends Text3D ? UpdatableText3DState : T extends string ? Record<string, any> : never;
     export type TUpdateStates = Partial<Omit<TGeometryState, 'interactive' | 'hoverColor' | 'type'>> | Partial<TMarkerState> | Partial<TLabelState> | Partial<TGeometryState>;
     export type TGetState<T> = T extends WALLS ? TWallsState | undefined : T extends DOORS ? TDoorsState | undefined : T extends Marker ? TMarkerState | undefined : T extends Shape ? TShapeState | undefined : T extends Model ? TModelState | undefined : T extends Label ? TLabelState | undefined : T extends Image ? TImageState | undefined : T extends Text3D ? Text3DState | undefined : T extends Space | MapObject ? TGeometryState | undefined : T extends string ? TLabelState | TGeometryState | TMarkerState | TModelState | undefined : never;
     /**
@@ -2594,16 +2595,15 @@ declare module '@mappedin/react-sdk/mappedin-js/src/types' {
                 * @default false
                 */
             interactive?: boolean;
+            /**
+                * Vertical offset of the model in meters.
+                */
+            verticalOffset?: number;
     };
     /**
         * Options for controlling the behavior of a {@link Model}.
         */
-    export type TAddModelOptions = {
-            /**
-                * Model's URL.
-                */
-            url: string;
-    };
+    export type TAddModelOptions = Omit<InitializeModelState, 'verticalOffset'>;
     /**
         * @interface
         */
@@ -2814,6 +2814,11 @@ declare module '@mappedin/react-sdk/mappedin-js/src/types' {
             localePack: ParsedMVFLocalePack;
     };
     export type GlobalState = {
+            /**
+                * environment map for reflections.
+                * @default 'basic'
+                */
+            environment: EnvMapOptions;
             text3d: {
                     /**
                         * hover color of the text3d
@@ -2865,6 +2870,44 @@ declare module '@mappedin/react-sdk/mappedin-js/src/types' {
     };
 }
 
+declare module '@mappedin/react-sdk/mappedin-js/src/constants' {
+    /**
+      * Default map options used if no custom options are provided.
+      *
+      * @internal
+      */
+    export const DEFAULT_MAP_OPTIONS: {
+        auto: true;
+        debug: false;
+        pitch: number;
+        bearing: number;
+        antialiasing: {
+            enabled: true;
+        };
+        shadingAndOutlines: true;
+        outdoorView: {
+            layersHiddenByGeometry: string[];
+        };
+    };
+    export const EXTERIOR_WALLS_ID = "ExteriorWalls";
+    export const WALLS_ID = "Walls";
+    export const ADD_MAP_FOCUS_ON_DURATION = 0;
+    export const INTERIOR_DOORS_ID = "InteriorDoors";
+    export const EXTERIOR_DOORS_ID = "ExteriorDoors";
+    export const GEOMETRY_LAYER = "GeometryLayer";
+    export const LABELS_LAYER = "LabelsLayer";
+    export const MARKERS_LAYER = "MarkersLayer";
+    export const FOOTPRINT_LAYER = "FootprintLayer";
+    export const IMAGES_LAYER = "ImagesLayer";
+    export const SELF_SERVE_API_AUDIENCE: string[];
+    export const ENTERPRISE_API_AUDIENCE: string[];
+    export const MAPPEDIN_COLORS: {
+        orange: string;
+        teal: string;
+        lightTeal: string;
+    };
+}
+
 declare module '@mappedin/react-sdk/mappedin-js/src/api-geojson/blue-dot/blue-dot' {
     import type { EasingCurve, RendererCore } from '@mappedin/core-sdk';
     import { PubSub } from '@packages/internal/common';
@@ -4001,6 +4044,10 @@ declare module '@mappedin/react-sdk/mappedin-js/src/map-data-objects/space' {
                 * @internal
                 */
             readonly __type = "space";
+            /**
+                * @internal
+                * @hidden
+                */
             getMvfData(): import("@mappedin/mvf").Feature<import("@mappedin/mvf").LineString | import("@mappedin/mvf").Polygon | import("@mappedin/mvf").Point, import("@mappedin/mvf").SpaceProperties>;
             /**
                 * Checks if the provided instance is of type Space.
@@ -5093,7 +5140,7 @@ declare module '@mappedin/react-sdk/mappedin-js/src/map-data-objects/location' {
         *
         * Refer to the [EnterpriseLocation Guide](https://developer.mappedin.com/web-sdk/enterprise-data#enterprise-locations) for more information and interactive examples.
         */
-    class EnterpriseLocation extends BaseMetaData implements Omit<MVFEnterpriseLocation, 'polygons' | 'nodes' | 'links'>, IFocusable {
+    class EnterpriseLocation extends BaseMetaData implements Omit<MVFEnterpriseLocation, 'polygons' | 'nodes' | 'links' | 'spaces'>, IFocusable {
             #private;
             /**
                 * @internal
@@ -5649,16 +5696,16 @@ declare module '@mappedin/react-sdk/geojson/src/components/marker' {
             dynamicResize: z.ZodOptional<z.ZodBoolean>;
             zIndex: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
-            interactive?: boolean | "pointer-events-auto" | undefined;
-            id?: string | undefined;
             anchor?: "center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | ("center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right")[] | undefined;
+            id?: string | undefined;
+            interactive?: boolean | "pointer-events-auto" | undefined;
             dynamicResize?: boolean | undefined;
             zIndex?: number | undefined;
             rank?: number | "low" | "medium" | "high" | "always-visible" | undefined;
     }, {
-            interactive?: boolean | "pointer-events-auto" | undefined;
-            id?: string | undefined;
             anchor?: "center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | ("center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right")[] | undefined;
+            id?: string | undefined;
+            interactive?: boolean | "pointer-events-auto" | undefined;
             dynamicResize?: boolean | undefined;
             zIndex?: number | undefined;
             rank?: number | "low" | "medium" | "high" | "always-visible" | undefined;
@@ -5878,16 +5925,16 @@ declare module '@mappedin/react-sdk/geojson/src/components/path' {
             displayArrowsOnPath: z.ZodOptional<z.ZodBoolean>;
             animateArrowsOnPath: z.ZodOptional<z.ZodBoolean>;
     }, "strip", z.ZodTypeAny, {
-            interactive?: boolean | undefined;
             id?: string | undefined;
+            interactive?: boolean | undefined;
             accentColor?: string | undefined;
             displayArrowsOnPath?: boolean | undefined;
             animateArrowsOnPath?: boolean | undefined;
             nearRadius?: number | undefined;
             farRadius?: number | undefined;
     }, {
-            interactive?: boolean | undefined;
             id?: string | undefined;
+            interactive?: boolean | undefined;
             accentColor?: string | undefined;
             displayArrowsOnPath?: boolean | undefined;
             animateArrowsOnPath?: boolean | undefined;
@@ -6579,10 +6626,18 @@ declare module '@mappedin/react-sdk/geojson/src/entities/geometry-group' {
                 * The opacity of the geometry group. This will affect all children of the geometry group and override their opacity.
                 */
             opacity: number;
+            /**
+                * The initial color of the geometry and its children. This is used to reset the color of the geometry to its initial value.
+                */
+            initialColor: string;
             /**
                 * The color of the geometry and its children. Updating this will affect any children whose color was not updated after generation
                 */
             color: string;
+            /**
+                * The initial top color of the geometry and its children. This is used to reset the top color of the geometry to its initial value.
+                */
+            initialTopColor?: string;
             /**
                 * The top color of the geometry and its children. Updating this will affect any children whose top color was not updated after generation
                 */
@@ -6778,15 +6833,23 @@ declare module '@mappedin/react-sdk/geojson/src/types' {
     export * from '@mappedin/react-sdk/geojson/src/types/options';
     export type ModelProperties = {
             rotation?: [number, number, number];
-            altitude?: number;
             scale?: [number, number, number];
             interactive?: boolean;
             id?: string | number;
+            verticalOffset?: number;
     };
-    export type ModelStyle = {
+    export type ModelGroupStyle = {
             url: string;
             color?: string;
             opacity?: number;
+            /**
+                * traverse the scene and update the materials by name
+                */
+            material?: {
+                    [name: string]: {
+                            color: string;
+                    };
+            };
     };
     export type InsetPadding = {
             top: number;
@@ -7015,6 +7078,10 @@ declare module '@mappedin/react-sdk/geojson/src/components/mesh' {
                 * The color of the geometry
                 */
             color: string;
+            /**
+                * The initial top color of the geometry. This is used to reset the top color of the geometry to its initial value.
+                */
+            initialTopColor?: string;
             /**
                 * The color of geometry faces that are facing up
                 */
@@ -7192,24 +7259,28 @@ declare module '@mappedin/react-sdk/geojson/src/components/custom' {
             constructor(feature: Feature<Point>, builder: CustomGeometryBuilder);
             get visible(): boolean;
             set visible(value: boolean);
-            setOpacity(): void;
+            set opacity(_v: number);
+            get opacity(): number;
             color: Color;
             setColor(): void;
             get position(): import("three").Vector3;
             get altitude(): number;
             set altitude(value: number);
+            get renderOrder(): number;
+            set renderOrder(_: number);
     }
 }
 
 declare module '@mappedin/react-sdk/geojson/src/components/model' {
-    import type { LineSegments, Object3D } from 'three';
+    import type { Group, LineSegments, Object3D } from 'three';
     import { Color, Vector3 } from 'three';
     import type { BatchedStandardMaterial } from '@mappedin/react-sdk/geojson/src/systems/mesh-creation-and-optimization/batched-material';
-    import type { Position, EntityId, ModelProperties, ModelStyle } from '@mappedin/react-sdk/geojson/src/types';
+    import type { Position, EntityId, ModelProperties, ModelGroupStyle } from '@mappedin/react-sdk/geojson/src/types';
     import type { Feature, FeatureCollection, Point } from 'geojson';
     import type { Geometry3DObject3D } from '@mappedin/react-sdk/geojson/src/entities/geometry3d';
     import type { GeometryGroupState } from '@mappedin/react-sdk/geojson/src/entities/geometry-group';
     import { z } from 'zod';
+    import type { ModelStyle } from '@mappedin/react-sdk/geojson/src/components/styles';
     /**
         * State representing a Model, typically loaded via a URL
         */
@@ -7233,25 +7304,38 @@ declare module '@mappedin/react-sdk/geojson/src/components/model' {
                 * ```
                 */
             interactive: boolean;
-    };
+    } & Partial<ModelStyle>;
+    /**
+        * initialize model state
+        * @interface
+        */
+    export type InitializeModelState = Omit<Partial<Omit<ModelState, 'url'> & Pick<ModelStyle, 'url'>>, 'id' | 'type' | 'parent' | 'position'>;
+    /**
+        * updatable model state
+        * @interface
+        */
+    export type UpdateModelState = Omit<InitializeModelState, 'url'>;
     export const modelPropertiesSchema: z.ZodObject<{
             rotation: z.ZodOptional<z.ZodArray<z.ZodNumber, "many">>;
             altitude: z.ZodOptional<z.ZodNumber>;
             scale: z.ZodOptional<z.ZodArray<z.ZodNumber, "many">>;
             interactive: z.ZodOptional<z.ZodBoolean>;
+            verticalOffset: z.ZodOptional<z.ZodNumber>;
             id: z.ZodOptional<z.ZodUnion<[z.ZodNumber, z.ZodString]>>;
     }, "strip", z.ZodTypeAny, {
-            rotation?: number[] | undefined;
             altitude?: number | undefined;
-            scale?: number[] | undefined;
-            interactive?: boolean | undefined;
+            verticalOffset?: number | undefined;
             id?: string | number | undefined;
-    }, {
+            interactive?: boolean | undefined;
             rotation?: number[] | undefined;
-            altitude?: number | undefined;
             scale?: number[] | undefined;
-            interactive?: boolean | undefined;
+    }, {
+            altitude?: number | undefined;
+            verticalOffset?: number | undefined;
             id?: string | number | undefined;
+            interactive?: boolean | undefined;
+            rotation?: number[] | undefined;
+            scale?: number[] | undefined;
     }>;
     export const featureSchema: z.ZodObject<{
             type: z.ZodEnum<["Feature"]>;
@@ -7270,19 +7354,22 @@ declare module '@mappedin/react-sdk/geojson/src/components/model' {
                     altitude: z.ZodOptional<z.ZodNumber>;
                     scale: z.ZodOptional<z.ZodArray<z.ZodNumber, "many">>;
                     interactive: z.ZodOptional<z.ZodBoolean>;
+                    verticalOffset: z.ZodOptional<z.ZodNumber>;
                     id: z.ZodOptional<z.ZodUnion<[z.ZodNumber, z.ZodString]>>;
             }, "strip", z.ZodTypeAny, {
-                    rotation?: number[] | undefined;
                     altitude?: number | undefined;
-                    scale?: number[] | undefined;
-                    interactive?: boolean | undefined;
+                    verticalOffset?: number | undefined;
                     id?: string | number | undefined;
-            }, {
+                    interactive?: boolean | undefined;
                     rotation?: number[] | undefined;
-                    altitude?: number | undefined;
                     scale?: number[] | undefined;
-                    interactive?: boolean | undefined;
+            }, {
+                    altitude?: number | undefined;
+                    verticalOffset?: number | undefined;
                     id?: string | number | undefined;
+                    interactive?: boolean | undefined;
+                    rotation?: number[] | undefined;
+                    scale?: number[] | undefined;
             }>;
     }, "strip", z.ZodTypeAny, {
             type: "Feature";
@@ -7291,11 +7378,12 @@ declare module '@mappedin/react-sdk/geojson/src/components/model' {
                     coordinates: number[];
             };
             properties: {
-                    rotation?: number[] | undefined;
                     altitude?: number | undefined;
-                    scale?: number[] | undefined;
-                    interactive?: boolean | undefined;
+                    verticalOffset?: number | undefined;
                     id?: string | number | undefined;
+                    interactive?: boolean | undefined;
+                    rotation?: number[] | undefined;
+                    scale?: number[] | undefined;
             };
     }, {
             type: "Feature";
@@ -7304,11 +7392,12 @@ declare module '@mappedin/react-sdk/geojson/src/components/model' {
                     coordinates: number[];
             };
             properties: {
-                    rotation?: number[] | undefined;
                     altitude?: number | undefined;
-                    scale?: number[] | undefined;
-                    interactive?: boolean | undefined;
+                    verticalOffset?: number | undefined;
                     id?: string | number | undefined;
+                    interactive?: boolean | undefined;
+                    rotation?: number[] | undefined;
+                    scale?: number[] | undefined;
             };
     }>;
     export const addModelFeatureSchema: z.ZodObject<{
@@ -7330,19 +7419,22 @@ declare module '@mappedin/react-sdk/geojson/src/components/model' {
                             altitude: z.ZodOptional<z.ZodNumber>;
                             scale: z.ZodOptional<z.ZodArray<z.ZodNumber, "many">>;
                             interactive: z.ZodOptional<z.ZodBoolean>;
+                            verticalOffset: z.ZodOptional<z.ZodNumber>;
                             id: z.ZodOptional<z.ZodUnion<[z.ZodNumber, z.ZodString]>>;
                     }, "strip", z.ZodTypeAny, {
-                            rotation?: number[] | undefined;
                             altitude?: number | undefined;
-                            scale?: number[] | undefined;
-                            interactive?: boolean | undefined;
+                            verticalOffset?: number | undefined;
                             id?: string | number | undefined;
-                    }, {
+                            interactive?: boolean | undefined;
                             rotation?: number[] | undefined;
-                            altitude?: number | undefined;
                             scale?: number[] | undefined;
-                            interactive?: boolean | undefined;
+                    }, {
+                            altitude?: number | undefined;
+                            verticalOffset?: number | undefined;
                             id?: string | number | undefined;
+                            interactive?: boolean | undefined;
+                            rotation?: number[] | undefined;
+                            scale?: number[] | undefined;
                     }>;
             }, "strip", z.ZodTypeAny, {
                     type: "Feature";
@@ -7351,11 +7443,12 @@ declare module '@mappedin/react-sdk/geojson/src/components/model' {
                             coordinates: number[];
                     };
                     properties: {
-                            rotation?: number[] | undefined;
                             altitude?: number | undefined;
-                            scale?: number[] | undefined;
-                            interactive?: boolean | undefined;
+                            verticalOffset?: number | undefined;
                             id?: string | number | undefined;
+                            interactive?: boolean | undefined;
+                            rotation?: number[] | undefined;
+                            scale?: number[] | undefined;
                     };
             }, {
                     type: "Feature";
@@ -7364,11 +7457,12 @@ declare module '@mappedin/react-sdk/geojson/src/components/model' {
                             coordinates: number[];
                     };
                     properties: {
-                            rotation?: number[] | undefined;
                             altitude?: number | undefined;
-                            scale?: number[] | undefined;
-                            interactive?: boolean | undefined;
+                            verticalOffset?: number | undefined;
                             id?: string | number | undefined;
+                            interactive?: boolean | undefined;
+                            rotation?: number[] | undefined;
+                            scale?: number[] | undefined;
                     };
             }>, "many">;
     }, "strip", z.ZodTypeAny, {
@@ -7380,11 +7474,12 @@ declare module '@mappedin/react-sdk/geojson/src/components/model' {
                             coordinates: number[];
                     };
                     properties: {
-                            rotation?: number[] | undefined;
                             altitude?: number | undefined;
-                            scale?: number[] | undefined;
-                            interactive?: boolean | undefined;
+                            verticalOffset?: number | undefined;
                             id?: string | number | undefined;
+                            interactive?: boolean | undefined;
+                            rotation?: number[] | undefined;
+                            scale?: number[] | undefined;
                     };
             }[];
     }, {
@@ -7396,31 +7491,45 @@ declare module '@mappedin/react-sdk/geojson/src/components/model' {
                             coordinates: number[];
                     };
                     properties: {
-                            rotation?: number[] | undefined;
                             altitude?: number | undefined;
-                            scale?: number[] | undefined;
-                            interactive?: boolean | undefined;
+                            verticalOffset?: number | undefined;
                             id?: string | number | undefined;
+                            interactive?: boolean | undefined;
+                            rotation?: number[] | undefined;
+                            scale?: number[] | undefined;
                     };
             }[];
     }>;
-    export const modelStyleSchema: z.ZodObject<{
+    export const modelGroupStyleSchema: z.ZodObject<{
             url: z.ZodString;
             color: z.ZodOptional<z.ZodString>;
             opacity: z.ZodOptional<z.ZodNumber>;
+            material: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodObject<{
+                    color: z.ZodString;
+            }, "strip", z.ZodTypeAny, {
+                    color: string;
+            }, {
+                    color: string;
+            }>>>;
     }, "strip", z.ZodTypeAny, {
             url: string;
             color?: string | undefined;
             opacity?: number | undefined;
+            material?: Record<string, {
+                    color: string;
+            }> | undefined;
     }, {
             url: string;
             color?: string | undefined;
             opacity?: number | undefined;
+            material?: Record<string, {
+                    color: string;
+            }> | undefined;
     }>;
-    export function validateModelGroup(id: string | number, geometry: FeatureCollection<Point, ModelProperties>, style: ModelStyle): void;
+    export function validateModelGroup(id: string | number, geometry: FeatureCollection<Point, ModelProperties>, style: Partial<ModelGroupStyle>): void;
     export class ModelComponent {
             #private;
-            mesh?: Geometry3DObject3D;
+            mesh?: Geometry3DObject3D | Group;
             readonly type = "model";
             outline?: LineSegments;
             geometry?: Object3D;
@@ -7442,7 +7551,7 @@ declare module '@mappedin/react-sdk/geojson/src/components/model' {
 
 declare module '@mappedin/react-sdk/geojson/src/renderer' {
     import './utils/object-this-polyfill';
-    import { Vector3, Raycaster, Camera as ThreeCamera } from 'three';
+    import { Scene, Vector3, Raycaster, Camera as ThreeCamera } from 'three';
     import type { GroupContainerState } from '@mappedin/react-sdk/geojson/src/entities/group-container';
     import { GroupContainerObject3D } from '@mappedin/react-sdk/geojson/src/entities/group-container';
     import { PubSub } from '@mappedin/react-sdk/packages/common/pubsub';
@@ -7453,7 +7562,7 @@ declare module '@mappedin/react-sdk/geojson/src/renderer' {
     import type { GLTFExportOptions } from '@mappedin/react-sdk/geojson/src/systems/exporter';
     import { ExporterSystem } from '@mappedin/react-sdk/geojson/src/systems/exporter';
     import type { AddLabelOptions, LabelState } from '@mappedin/react-sdk/geojson/src/components/label';
-    import type { LineStyle, PaintStyle, RendererCoreOptions, Position, ModelProperties, ModelStyle, EntityState, EntityId, MapEvent, MapEventPayload, RendererState, EntityTypes } from '@mappedin/react-sdk/geojson/src/types';
+    import type { LineStyle, PaintStyle, RendererCoreOptions, Position, ModelProperties, EntityState, EntityId, MapEvent, MapEventPayload, RendererState, EntityTypes, EnvMapOptions } from '@mappedin/react-sdk/geojson/src/types';
     import { MeshCreationAndOptimizationSystem } from '@mappedin/react-sdk/geojson/src/systems/mesh-creation-and-optimization/system';
     import { DOMVisibilitySystem } from '@mappedin/react-sdk/geojson/src/systems/dom-visiblity/system';
     import { TwoDProjectionSystem } from '@mappedin/react-sdk/geojson/src/systems/2d-projection/system';
@@ -7468,7 +7577,7 @@ declare module '@mappedin/react-sdk/geojson/src/renderer' {
     import { DOMDrawSystem } from '@mappedin/react-sdk/geojson/src/systems/dom-draw/system';
     import { type Map as MapLibreMap } from '@mappedin/react-sdk/packages/outdoor-context-v4';
     import type { GeometryState } from '@mappedin/react-sdk/geojson/src/components/mesh';
-    import type { ModelState } from '@mappedin/react-sdk/geojson/src/components/model';
+    import type { InitializeModelState, ModelState, UpdateModelState } from '@mappedin/react-sdk/geojson/src/components/model';
     import type { GeometryGroupState } from '@mappedin/react-sdk/geojson/src/entities/geometry-group';
     import { DOMResizeSystem } from '@mappedin/react-sdk/geojson/src/systems/dom-resize/system';
     import { Camera } from '@mappedin/react-sdk/geojson/src/camera';
@@ -7596,7 +7705,10 @@ declare module '@mappedin/react-sdk/geojson/src/renderer' {
             /**
                 * Add a group of models from GeoJSON data. These will be instanced automatically for better performance.
                 */
-            addModelGroup(id: string, geometry: FeatureCollection<Point, ModelProperties>, style: ModelStyle, parent?: EntityId<GroupContainerState> | string | null): EntityId<GeometryGroupState> | undefined;
+            addModelGroup(id: string, geometry: FeatureCollection<Point, ModelProperties>, style: Partial<InitializeModelState>, { parent, onComplete: onAdd, }?: {
+                    parent?: EntityId<GroupContainerState> | string | null;
+                    onComplete?: () => void;
+            }): EntityId<GeometryGroupState> | undefined;
             /**
                 * Add an HTML Marker at a GeoJSON coordinate.
                 */
@@ -7657,6 +7769,9 @@ declare module '@mappedin/react-sdk/geojson/src/renderer' {
                 * Recursively get the state for the whole scene. Can be an expensive operation.
                 */
             getScene(): GroupContainerState;
+            getThreeScene(): Scene | undefined;
+            setEnvironment(update: EnvMapOptions): Promise<void>;
+            getEnvironment(): EnvMapOptions;
             /**
                 * Get the current scene as a GLB file
                 */
@@ -7683,7 +7798,7 @@ declare module '@mappedin/react-sdk/geojson/src/renderer' {
             setState<T extends EntityId<GeometryState>>(object: T | T['id'], state: Partial<GeometryState>): void;
             setState<T extends EntityId<ShapeState>>(object: T | T['id'], state: Partial<ShapeState>): void;
             setState<T extends EntityId<PathState>>(object: T | T['id'], state: PathUpdateState): void;
-            setState<T extends EntityId<ModelState>>(object: T | T['id'], state: Partial<ModelState>): void;
+            setState<T extends EntityId<ModelState>>(object: T | T['id'], state: Partial<UpdateModelState>): void;
             setState<T extends EntityId<ImageState>>(object: T | T['id'], state: Partial<ImageState>): void;
             setState<T extends EntityId<Text3DState>>(object: T | T['id'], state: Partial<UpdatableText3DState>): void;
             setState<T extends EntityState>(object: T | T['id'], state: Partial<T>): void;
@@ -7778,7 +7893,7 @@ declare module '@mappedin/react-sdk/geojson/src/renderer' {
                 *
                 * Note: Only use this if you have an animation frame setup elsewhere
                 */
-            renderSync: () => Promise<any>;
+            renderSync: () => Promise<any> | undefined;
             /**
                 * @internal for testing
                 */
@@ -7985,7 +8100,7 @@ declare module '@mappedin/react-sdk/geojson/src/camera' {
             /**
                 * The camera's current pan mode.
                 */
-            get panMode(): "elevation" | "default";
+            get panMode(): "default" | "elevation";
             /**
                 * Set the camera's pan mode. 'elevation' moves the camera up and down, while 'default' allows the camera to pan along the ground.
                 */
@@ -7996,6 +8111,10 @@ declare module '@mappedin/react-sdk/geojson/src/camera' {
                 */
             setInsetPadding(padding: InsetPadding): void;
             animateTo(options: AnimateToOptions): Promise<void>;
+            getCameraFrameForCoordinates(coordinates: (GeoJSONPosition | Position)[], options?: FocusOnOptions): {
+                    center: Position;
+                    zoomLevel: number;
+            };
             /**
                 *  Focuses the camera on a set of coordinates, with optional animation
                 *
@@ -8099,10 +8218,8 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
             content: z.ZodString;
     }, "strip", z.ZodTypeAny, {
             type: "text3d";
-            id: string | number;
-            color: string;
-            position: [number, number, number];
             visible: boolean;
+            color: string;
             flipToFaceCamera: boolean;
             fontSize: number;
             margin: number | [number, number, number, number];
@@ -8116,6 +8233,8 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
             strokeOpacity: number;
             strokeColor: string;
             fillOpacity: number;
+            id: string | number;
+            position: [number, number, number];
             content: string;
             maxWidth?: number | undefined;
             font?: string | undefined;
@@ -8123,10 +8242,8 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
             hoverColor?: string | undefined;
     }, {
             type: "text3d";
-            id: string | number;
-            color: string;
-            position: [number, number, number];
             visible: boolean;
+            color: string;
             flipToFaceCamera: boolean;
             fontSize: number;
             margin: number | [number, number, number, number];
@@ -8140,6 +8257,8 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
             strokeOpacity: number;
             strokeColor: string;
             fillOpacity: number;
+            id: string | number;
+            position: [number, number, number];
             content: string;
             maxWidth?: number | undefined;
             font?: string | undefined;
@@ -8176,9 +8295,8 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
             content: z.ZodOptional<z.ZodString>;
     }, "type" | "id">, "strict", z.ZodTypeAny, {
             maxWidth?: number | undefined;
-            color?: string | undefined;
-            position?: [number, number, number] | undefined;
             visible?: boolean | undefined;
+            color?: string | undefined;
             flipToFaceCamera?: boolean | undefined;
             font?: string | undefined;
             fontSize?: number | undefined;
@@ -8195,12 +8313,12 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
             strokeColor?: string | undefined;
             fillOpacity?: number | undefined;
             hoverColor?: string | undefined;
+            position?: [number, number, number] | undefined;
             content?: string | undefined;
     }, {
             maxWidth?: number | undefined;
-            color?: string | undefined;
-            position?: [number, number, number] | undefined;
             visible?: boolean | undefined;
+            color?: string | undefined;
             flipToFaceCamera?: boolean | undefined;
             font?: string | undefined;
             fontSize?: number | undefined;
@@ -8217,6 +8335,7 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
             strokeColor?: string | undefined;
             fillOpacity?: number | undefined;
             hoverColor?: string | undefined;
+            position?: [number, number, number] | undefined;
             content?: string | undefined;
     }>;
     /**
@@ -8249,9 +8368,9 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
             type: z.ZodOptional<z.ZodLiteral<"text3d">>;
             position: z.ZodOptional<z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>>;
             content: z.ZodOptional<z.ZodString>;
-    }, "type" | "id">, "maxWidth" | "position" | "margin" | "maxHeight" | "content">, "strict", z.ZodTypeAny, {
-            color?: string | undefined;
+    }, "type" | "id">, "maxWidth" | "margin" | "maxHeight" | "position" | "content">, "strict", z.ZodTypeAny, {
             visible?: boolean | undefined;
+            color?: string | undefined;
             flipToFaceCamera?: boolean | undefined;
             font?: string | undefined;
             fontSize?: number | undefined;
@@ -8267,8 +8386,8 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
             fillOpacity?: number | undefined;
             hoverColor?: string | undefined;
     }, {
-            color?: string | undefined;
             visible?: boolean | undefined;
+            color?: string | undefined;
             flipToFaceCamera?: boolean | undefined;
             font?: string | undefined;
             fontSize?: number | undefined;
@@ -8319,9 +8438,8 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
                     content: z.ZodOptional<z.ZodString>;
             }, "type" | "id">, "strict", z.ZodTypeAny, {
                     maxWidth?: number | undefined;
-                    color?: string | undefined;
-                    position?: [number, number, number] | undefined;
                     visible?: boolean | undefined;
+                    color?: string | undefined;
                     flipToFaceCamera?: boolean | undefined;
                     font?: string | undefined;
                     fontSize?: number | undefined;
@@ -8338,12 +8456,12 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
                     strokeColor?: string | undefined;
                     fillOpacity?: number | undefined;
                     hoverColor?: string | undefined;
+                    position?: [number, number, number] | undefined;
                     content?: string | undefined;
             }, {
                     maxWidth?: number | undefined;
-                    color?: string | undefined;
-                    position?: [number, number, number] | undefined;
                     visible?: boolean | undefined;
+                    color?: string | undefined;
                     flipToFaceCamera?: boolean | undefined;
                     font?: string | undefined;
                     fontSize?: number | undefined;
@@ -8360,6 +8478,7 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
                     strokeColor?: string | undefined;
                     fillOpacity?: number | undefined;
                     hoverColor?: string | undefined;
+                    position?: [number, number, number] | undefined;
                     content?: string | undefined;
             }>>;
             parentId: z.ZodOptional<z.ZodString>;
@@ -8367,9 +8486,8 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
             parentId?: string | undefined;
             appearance?: {
                     maxWidth?: number | undefined;
-                    color?: string | undefined;
-                    position?: [number, number, number] | undefined;
                     visible?: boolean | undefined;
+                    color?: string | undefined;
                     flipToFaceCamera?: boolean | undefined;
                     font?: string | undefined;
                     fontSize?: number | undefined;
@@ -8386,15 +8504,15 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
                     strokeColor?: string | undefined;
                     fillOpacity?: number | undefined;
                     hoverColor?: string | undefined;
+                    position?: [number, number, number] | undefined;
                     content?: string | undefined;
             } | undefined;
     }, {
             parentId?: string | undefined;
             appearance?: {
                     maxWidth?: number | undefined;
-                    color?: string | undefined;
-                    position?: [number, number, number] | undefined;
                     visible?: boolean | undefined;
+                    color?: string | undefined;
                     flipToFaceCamera?: boolean | undefined;
                     font?: string | undefined;
                     fontSize?: number | undefined;
@@ -8411,6 +8529,7 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
                     strokeColor?: string | undefined;
                     fillOpacity?: number | undefined;
                     hoverColor?: string | undefined;
+                    position?: [number, number, number] | undefined;
                     content?: string | undefined;
             } | undefined;
     }>;
@@ -8433,14 +8552,15 @@ declare module '@mappedin/react-sdk/geojson/src/components/text3d' {
 }
 
 declare module '@mappedin/react-sdk/geojson/src/entities/utils' {
-    import type { CollisionRankingTier, GeometryState, LabelState, RendererCore } from '@mappedin/react-sdk/geojson/src';
+    import type { CollisionRankingTier, GeometryState, LabelState, ModelState, RendererCore } from '@mappedin/react-sdk/geojson/src';
     import { type MarkerState } from '@mappedin/react-sdk/geojson/src/components/marker';
     import type { PathUpdateState } from '@mappedin/react-sdk/geojson/src/components/path';
     import type { EntityTypes, All3DTypes, Position, RendererState } from '@mappedin/react-sdk/geojson/src/renderer';
     import type { KeysOfUnion } from '@mappedin/react-sdk/geojson/src/utils';
     import { GeometryGroupObject3D, type GeometryGroupState } from '@mappedin/react-sdk/geojson/src/entities/geometry-group';
     import { GroupContainerObject3D } from '@mappedin/react-sdk/geojson/src/entities/group-container';
-    import { Geometry3D, Geometry3DObject3D, type Geometry3DTypes, type TextGeometry3D } from '@mappedin/react-sdk/geojson/src/entities/geometry3d';
+    import { Geometry3D, Geometry3DObject3D } from '@mappedin/react-sdk/geojson/src/entities/geometry3d';
+    import type { ModelGeometry3D, Geometry3DTypes, TextGeometry3D } from '@mappedin/react-sdk/geojson/src/entities/geometry3d';
     import { Geometry2D, Geometry2DObject3D } from '@mappedin/react-sdk/geojson/src/entities/geometry2d';
     import type { StyleComponent } from '@mappedin/react-sdk/geojson/src/components/styles/style';
     import type { GeometryGroupStyleComponent } from '@mappedin/react-sdk/geojson/src/components/geometry-group-style';
@@ -8482,6 +8602,11 @@ declare module '@mappedin/react-sdk/geojson/src/entities/utils' {
         * Handle state update of the text3d geometry.
         */
     export function handleText3DUpdate(geometry: TextGeometry3D, update: Partial<Text3DState>): void;
+    /**
+        * @internal
+        */
+    export const MODEL_UPATE_PROPS: KeysOfUnion<ModelState>[];
+    export function handleModelStyleUpdate(geometry: ModelGeometry3D, update: Partial<ModelState>): void;
 }
 
 declare module '@mappedin/react-sdk/packages/geojson-navigator' {
@@ -8587,11 +8712,13 @@ declare module '@mappedin/react-sdk/geojson/src/utils/debug' {
     import type Core from '@mappedin/react-sdk/geojson/src/renderer';
     const DEFAULT_DEBUG_STATE: {
         showPolygonLabelTextAreaMesh: boolean;
+        showEnvMap: boolean;
     };
     export type DebugState = typeof DEFAULT_DEBUG_STATE;
     export class Debug {
         state: {
             showPolygonLabelTextAreaMesh: boolean;
+            showEnvMap: boolean;
         };
         core: Core;
         constructor(core: Core);
@@ -8764,6 +8891,7 @@ declare module '@mappedin/react-sdk/geojson/src/systems/html-controls/system' {
 declare module '@mappedin/react-sdk/geojson/src/components/styles' {
     export { StyleComponent, DEFAULT_COLOR, type MaterialSide } from '@mappedin/react-sdk/geojson/src/components/styles/style';
     export { Text3DStyleComponent, type Text3DStyle, DEFAULT_TEXT_STYLE } from '@mappedin/react-sdk/geojson/src/components/styles/text-style';
+    export { ModelStyleComponnet, type ModelStyle } from '@mappedin/react-sdk/geojson/src/components/styles/model-style';
 }
 
 declare module '@mappedin/react-sdk/mappedin-js/src/api-geojson/api' {
@@ -8775,7 +8903,7 @@ declare module '@mappedin/react-sdk/mappedin-js/src/api-geojson/api' {
     import { Facade, Coordinate, MapObject, Space, Floor, Door } from '@mappedin/react-sdk/mappedin-js/src/map-data-objects';
     import type { MapView } from '@mappedin/react-sdk/mappedin-js/src/map-view';
     import { Label, Marker, Shape } from '@mappedin/react-sdk/mappedin-js/src/map-view-objects';
-    import { Text3D as Text3DView, type Image } from '@mappedin/react-sdk/mappedin-js/src/map-view-objects';
+    import { Text3D as Text3DView, Model, type Image } from '@mappedin/react-sdk/mappedin-js/src/map-view-objects';
     import { Navigation } from '@mappedin/react-sdk/mappedin-js/src/navigation';
     import type { TGetState, TUpdateState } from '@mappedin/react-sdk/mappedin-js/src/types';
     import { Camera } from '@mappedin/react-sdk/mappedin-js/src/api-geojson/camera';
@@ -8824,7 +8952,7 @@ declare module '@mappedin/react-sdk/mappedin-js/src/api-geojson/api' {
         get DynamicFocus(): import("..").DynamicFocus;
         get StackedMaps(): import("..").StackedMaps;
         constructor(rendererCore: RendererCore, mapView: MapView);
-        updateState<T extends Space | Text3DView | MapObject | Label | Shape | Marker | Door | Facade | WALLS | DOORS | (string & NonNullable<unknown>)>(target: T, state: TUpdateState<T>): void;
+        updateState<T extends Space | Text3DView | MapObject | Label | Shape | Marker | Model | Door | Facade | WALLS | DOORS | (string & NonNullable<unknown>)>(target: T, state: TUpdateState<T>): void;
         update: () => void;
         getMapDataInternal(): MapDataInternal | undefined;
         getMapData(): MapData | undefined;
@@ -8834,7 +8962,7 @@ declare module '@mappedin/react-sdk/mappedin-js/src/api-geojson/api' {
         updateWatermark(options: WatermarkUpdateOptions): void;
         get currentFloorStack(): FloorStack;
         get currentFloor(): Floor;
-        getState<T extends Space | Text3DView | MapObject | Label | Marker | Image | Shape | string>(target: T): TGetState<T>;
+        getState<T extends Space | Text3DView | MapObject | Label | Marker | Image | Shape | Model | string>(target: T): TGetState<T>;
         setHoverColor(c: string): void;
         getHoverColor(): string | undefined;
         createCoordinate(latitude: number, longitude: number, floor?: Floor): Coordinate;
@@ -8856,13 +8984,14 @@ declare module '@mappedin/react-sdk/mappedin-js/src/api-geojson/map-object' {
     import { PubSub } from '@packages/internal/common';
     import type { Position, AddLabelOptions, RendererCore, PathState, MarkerState, LineStyle, PaintStyle, EntityId } from '@mappedin/core-sdk';
     import { FloorObject } from '@mappedin/react-sdk/mappedin-js/src/api-geojson/floor-object';
-    import type { Coordinate, Directions, Floor, TAddMarkerOptions, TAddPathOptions, TShow3DMapOptions } from '@mappedin/react-sdk/mappedin-js/src';
+    import type { Directions, Floor, TAddMarkerOptions, TAddPathOptions, TShow3DMapOptions } from '@mappedin/react-sdk/mappedin-js/src';
     import type { GLTFExportOptions, TAnimationOptions, TAddModelOptions, TAddModel, TAddImageOptions, TDirectionInstruction, TAddText3DOptions, IAnchorable } from '@mappedin/react-sdk/mappedin-js/src/types';
     import { type AggregatedStyleMap } from '@mappedin/react-sdk/mappedin-js/src/api-geojson/utils';
     import { StackedMaps } from '@mappedin/react-sdk/mappedin-js/src/api-geojson/stacked-maps/stacked-maps';
     import type { TFloorChangeReason } from '@mappedin/react-sdk/mappedin-js/src/events';
     import type { Path, Shape, Label } from '@mappedin/react-sdk/mappedin-js/src/map-view-objects';
-    import { type MapDataInternal, Space } from '@mappedin/react-sdk/mappedin-js/src/map-data-objects';
+    import { Space } from '@mappedin/react-sdk/mappedin-js/src/map-data-objects';
+    import type { Coordinate, MapDataInternal } from '@mappedin/react-sdk/mappedin-js/src/map-data-objects';
     import { type GeoJsonApi } from '@mappedin/react-sdk/mappedin-js/src/api-geojson/api';
     import { FloorStackObject } from '@mappedin/react-sdk/mappedin-js/src/api-geojson/floor-stack-object';
     import { DynamicFocus } from '@mappedin/react-sdk/mappedin-js/src/api-geojson/dynamic-focus';
@@ -9296,6 +9425,18 @@ declare module '@mappedin/react-sdk/mappedin-js/src/api-geojson/camera' {
                 * @param panMode The new pan mode.
                 */
             setPanMode(panMode: 'default' | 'elevation'): void;
+            /**
+                * Get the camera transform that can be used to focus on a target or array of targets. Similar to {@link Camera.focusOn} but returns the transform directly.
+                * @param target The target(s) to get the camera transform for.
+                * @param options Optional settings for the camera transform.
+                * @returns The camera transform which can then be passed to {@link Camera.set} or {@link Camera.animateTo}.
+                *
+                * @example
+                * // Focus on a single space
+                * const transform = mapView.Camera.getCameraFocusTransform(space, { minZoomLevel: 5 });
+                * mapView.Camera.animateTo(transform);
+                */
+            getFocusOnTransform(target: IFocusable | IFocusable[], options?: TFocusOnOptions): TCameraTarget;
             /**
                 * Focuses the camera on a specific target or array of targets.
                 *
@@ -9622,7 +9763,7 @@ declare module '@mappedin/react-sdk/mappedin-js/src/api-geojson/models' {
                 * // Add a {@link Model} to the map.
                 * mapView.Models.add(coordinate);
                 */
-            add(models: TAddModel | TAddModel[], options: TAddModelOptions): Model[];
+            add(models: TAddModel, options: TAddModelOptions): Model;
             /**
                 * Removes a model from the map.
                 *
@@ -10848,7 +10989,7 @@ declare module '@mappedin/react-sdk/geojson/src/entities/geometry3d' {
     import type { Geometry2D } from '@mappedin/react-sdk/geojson/src/entities/geometry2d';
     import { GeometryGroupObject3D } from '@mappedin/react-sdk/geojson/src/entities/geometry-group';
     import type { Text3DComponent } from '@mappedin/react-sdk/geojson/src/components/text3d';
-    import type { Text3DStyleComponent } from '@mappedin/react-sdk/geojson/src/components/styles';
+    import type { ModelStyleComponnet, Text3DStyleComponent } from '@mappedin/react-sdk/geojson/src/components/styles';
     export enum Geometry3DComponents {
         Mesh = 0,
         Style = 1,
@@ -10859,6 +11000,10 @@ declare module '@mappedin/react-sdk/geojson/src/entities/geometry3d' {
         type: Geometry3DObjectTypes;
         userData: {
             entityId: string;
+            /**
+              * TODO: remove this when proper instancing is handled
+              */
+            isSingleModel?: boolean;
             type: Geometry3DObjectTypes;
         };
     }
@@ -10871,7 +11016,7 @@ declare module '@mappedin/react-sdk/geojson/src/entities/geometry3d' {
     }
     export type MeshComponentTypes = MeshComponent | PathComponent | ModelComponent | CustomGeometryComponent | Text3DComponent | ImageComponent;
     type MappedComponentType<M> = M extends MeshComponent ? 'geometry' : M extends PathComponent ? 'path' : M extends ModelComponent ? 'model' : M extends CustomGeometryComponent ? 'custom-geometry' : M extends ImageComponent ? 'image' : M extends Text3DComponent ? 'text3d' : never;
-    export class Geometry3D<M extends MeshComponentTypes = MeshComponent, S extends StyleComponent | Text3DStyleComponent = StyleComponent, I extends InteractionComponent = InteractionComponent, T extends MappedComponentType<M> = MappedComponentType<M>> {
+    export class Geometry3D<M extends MeshComponentTypes = MeshComponent, S extends StyleComponent | Text3DStyleComponent | ModelStyleComponnet = StyleComponent, I extends InteractionComponent = InteractionComponent, T extends MappedComponentType<M> = MappedComponentType<M>> {
         id: string | number;
         components: [M, S, I?];
         get object3d(): M["mesh"];
@@ -10885,7 +11030,7 @@ declare module '@mappedin/react-sdk/geojson/src/entities/geometry3d' {
     }
     export type TextGeometry3D = Geometry3D<Text3DComponent, Text3DStyleComponent, InteractionComponent, 'text3d'>;
     export type CustomGeometry3D = Geometry3D<CustomGeometryComponent, StyleComponent, InteractionComponent, 'custom-geometry'>;
-    export type ModelGeometry3D = Geometry3D<ModelComponent, StyleComponent, InteractionComponent, 'model'>;
+    export type ModelGeometry3D = Geometry3D<ModelComponent, ModelStyleComponnet, InteractionComponent, 'model'>;
     export type PathGeometry3D = Geometry3D<PathComponent, StyleComponent, InteractionComponent, 'path'>;
     export type ImageGeometry3D = Geometry3D<ImageComponent, StyleComponent, InteractionComponent, 'image'>;
     export type MeshGeometry3D = Geometry3D<MeshComponent, StyleComponent, InteractionComponent, 'geometry'>;
@@ -11062,7 +11207,9 @@ declare module '@mappedin/react-sdk/geojson/src/components/geometry-group-style'
     export class GeometryGroupStyleComponent implements GeometryGroupStyle {
         #private;
         color: string;
+        initialColor: string;
         topColor?: string;
+        initialTopColor?: string;
         opacity: number;
         height?: number;
         outline: boolean;
@@ -11128,13 +11275,13 @@ declare module '@mappedin/react-sdk/geojson/src/components/image' {
             }, "strip", z.ZodTypeAny, {
                     height: number;
                     width: number;
-                    rotation?: number | undefined;
                     verticalOffset?: number | undefined;
+                    rotation?: number | undefined;
             }, {
                     height: number;
                     width: number;
-                    rotation?: number | undefined;
                     verticalOffset?: number | undefined;
+                    rotation?: number | undefined;
             }>;
             geometry: z.ZodObject<{
                     type: z.ZodEnum<["Point"]>;
@@ -11155,8 +11302,8 @@ declare module '@mappedin/react-sdk/geojson/src/components/image' {
             properties: {
                     height: number;
                     width: number;
-                    rotation?: number | undefined;
                     verticalOffset?: number | undefined;
+                    rotation?: number | undefined;
             };
     }, {
             type: "Feature";
@@ -11167,8 +11314,8 @@ declare module '@mappedin/react-sdk/geojson/src/components/image' {
             properties: {
                     height: number;
                     width: number;
-                    rotation?: number | undefined;
                     verticalOffset?: number | undefined;
+                    rotation?: number | undefined;
             };
     }>;
     export function validateImage(id: string | number, feature: Feature<Point, ImageProperties>, style: ImageStyle): void;
@@ -11216,6 +11363,7 @@ declare module '@mappedin/react-sdk/geojson/src/types/options' {
     import type { Map as MapLibreMap } from '@mappedin/react-sdk/packages/outdoor-context-v4';
     import type { AttributionControlOptions } from '@mappedin/react-sdk/geojson/src/systems/html-controls/system';
     import type { WatermarkOptions } from '@mappedin/react-sdk/geojson/src';
+    export type EnvMapOptions = 'basic' | false;
     export type RendererCoreOptions = Partial<{
         center?: Position;
         zoomLevel?: number;
@@ -11240,6 +11388,11 @@ declare module '@mappedin/react-sdk/geojson/src/types/options' {
         onWebGLRendererError?: (error: Error) => void;
         watermark?: WatermarkOptions;
         attribution?: AttributionControlOptions;
+        /**
+          * environment map for reflections.
+          * @default 'basic'
+          */
+        environment?: EnvMapOptions;
     }>;
 }
 
@@ -11341,7 +11494,7 @@ declare module '@mappedin/react-sdk/packages/common/pubsub' {
 
 declare module '@mappedin/react-sdk/geojson/src/services/renderer' {
     import type { Scene, Camera } from 'three';
-    import { Color, WebGL1Renderer, WebGLRenderer } from 'three';
+    import { Color, WebGLRenderer } from 'three';
     export type TRendererOptions = {
             alpha: boolean;
             onWebGLRendererError: (e: Error) => void;
@@ -11353,12 +11506,13 @@ declare module '@mappedin/react-sdk/geojson/src/services/renderer' {
             width: number;
             height: number;
             options: TRendererOptions;
-            renderer?: WebGLRenderer | WebGL1Renderer;
-            constructor(renderOptions: any, targetWebGLVersion?: number);
+            renderer?: WebGLRenderer;
+            constructor(renderOptions: any);
             /**
                 * Dispose of the renderer and its buffers.
                 */
             destroy(): void;
+            enabledLayers: Set<number>;
             /**
                 * Re-render the scene, depending on which parts of the scene have been
                 * invalidated.
@@ -11401,10 +11555,12 @@ declare module '@mappedin/react-sdk/geojson/src/systems/mesh-creation-and-optimi
     import { MeshComponent, type MeshComponentProperties } from '@mappedin/react-sdk/geojson/src/components/mesh';
     import { StyleComponent } from '@mappedin/react-sdk/geojson/src/components/styles/style';
     import type { Feature, LineString, MultiPolygon, Point, Polygon } from 'geojson';
-    import type { LineStyle, ModelProperties, ModelStyle, PaintStyle } from '@mappedin/react-sdk/geojson/src/types';
-    import type { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+    import type { LineStyle, ModelProperties, PaintStyle } from '@mappedin/react-sdk/geojson/src/types';
+    import { GeometryGroupObject3D } from '@mappedin/react-sdk/geojson/src/entities/geometry-group';
     import type { ModelGeometry3D } from '@mappedin/react-sdk/geojson/src/entities';
     import { PubSub } from '@packages/internal/common';
+    import type { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+    import type { ModelStyle } from '@mappedin/react-sdk/geojson/src/components/styles';
     export class MeshCreationAndOptimizationSystem extends PubSub<{
         'model-loaded': void;
     }> {
@@ -11412,14 +11568,14 @@ declare module '@mappedin/react-sdk/geojson/src/systems/mesh-creation-and-optimi
         convertTo3DMapPosition: any;
         loader?: GLTFLoader;
         constructor(state: RendererState, convertTo3DMapPosition: any);
-        getGLTFLoader(): Promise<void>;
+        getGLTFLoader(): Promise<GLTFLoader>;
         createEntityFromFeature(id: string | number, feature: Feature<Polygon | LineString | MultiPolygon, MeshComponentProperties>, style?: LineStyle | PaintStyle): Geometry3D<MeshComponent, StyleComponent, import("../../components/interaction").InteractionComponent, "geometry">;
-        createModelFromFeature(id: string | number, feature: Feature<Point, ModelProperties>, style?: ModelStyle): ModelGeometry3D;
+        createModelFromFeature(id: string | number, feature: Feature<Point, ModelProperties>, style?: Partial<ModelStyle>): ModelGeometry3D;
         populateEntityMesh(entity: Geometry3D, geometry: BufferGeometry): void;
-        populateModelGroup(entities: Set<string | number>, url: string, tree: any): Promise<Geometry3DObject3D>;
+        populateModelGroup(entities: Set<string | number>, url: string, tree: GeometryGroupObject3D): Promise<Geometry3DObject3D>;
         populateEntityGroup(entities: Set<string | number>): Set<string | number>;
         optimize(tree: any): void;
-        update(): void;
+        update(): Promise<void[]> | undefined;
     }
 }
 
@@ -11547,7 +11703,7 @@ declare module '@mappedin/react-sdk/geojson/src/systems/render/system' {
             constructor(renderer: Renderer, state: RendererState, mode: RendererCore['mode'], scene: Scene, cameraObject: PerspectiveCamera, viewCamera: Camera, systems: Systems);
             twoDdirty: boolean;
             threeDdirty: boolean;
-            update: (sync?: boolean) => Promise<any>;
+            update: (sync?: boolean) => Promise<any> | undefined;
             destroy(): void;
     }
 }
@@ -11945,6 +12101,7 @@ declare module '@mappedin/react-sdk/geojson/src/components/styles/style' {
     export class StyleComponent implements Style {
         initialColor: string;
         color: string;
+        initialTopColor?: string;
         topColor?: string;
         topTexture?: string;
         texture?: string;
@@ -12251,6 +12408,59 @@ declare module '@mappedin/react-sdk/geojson/src/components/styles/text-style' {
     };
 }
 
+declare module '@mappedin/react-sdk/geojson/src/components/styles/model-style' {
+    type MaterialStyle = {
+            color: string;
+    };
+    export type ModelStyle = {
+            /**
+                * Model's URL. Can be based64 inlined url.
+                */
+            url: string;
+            /**
+                * Visiiblity of the model group
+                */
+            visible: boolean;
+            /**
+                * Opacity of the model group.
+                */
+            opacity: number;
+            /**
+                * Change material state by name
+                * @example
+                * ```ts
+                * mapView.Models.add(
+                *   { target: new Coordinate(45, -75) },
+                *   {
+                *     url: 'bed.glb',
+                *     materials: {
+                *       Default: {
+                *         color: MAPPEDIN_COLOR.orange,
+                *       },
+                *     },
+                *   },
+                * );
+                * ```
+                */
+            material: {
+                    [name: string]: MaterialStyle;
+            };
+            /**
+                * vertical offset of the model in meters off the floor
+                */
+            verticalOffset: number;
+    };
+    export class ModelStyleComponnet implements Partial<ModelStyle> {
+            dirty: boolean;
+            visible: boolean;
+            opacity: number;
+            verticalOffset: number;
+            material?: ModelStyle['material'];
+            constructor(init?: Partial<ModelStyle>);
+    }
+    export {};
+}
+
 declare module '@mappedin/react-sdk/mappedin-js/src/api-geojson/floor-object' {
     import type { Polygon, MultiPolygon, FloorProperties as MVFFloor, ParsedMVF, Feature } from '@mappedin/mvf';
     import type { RendererCore } from '@mappedin/core-sdk';
@@ -12537,6 +12747,7 @@ declare module '@mappedin/react-sdk/geojson/src/systems/interactions/system' {
             getCursor(): CursorTypes;
             resize: () => void;
     }
+    export function findModelParent(object: Object3D): Object3D<import("three").Object3DEventMap> | undefined;
     export {};
 }
 
@@ -12978,6 +13189,12 @@ declare module '@mappedin/react-sdk/geojson/src/systems/camera/system' {
             convertZoomLevelToAltitude: (zoomLevel: number) => number;
             static CAMERA_FRAME_PADDING_SIDES: readonly ["top", "bottom", "left", "right"];
             debugContainer: Object3D<import("three").Object3DEventMap>;
+            getCameraFrameForCoordinates(pointCloud: Vector3[], options: CameraFocusOnOptions & {
+                    padding: InsetPadding;
+            }): {
+                    center: Vector3;
+                    zoomLevel: number;
+            };
             focusOn(pointCloud: Vector3[], options: CameraFocusOnOptions & {
                     padding: InsetPadding;
             }): void;