@kepler.gl/components 3.3.0-alpha.1 → 3.3.0-alpha.10

package/dist/map/theme-toggle-button.d.ts

@@ -0,0 +1,18 @@
+import React, { ComponentType } from 'react';
+import { MapControls } from '@kepler.gl/types';
+import MapControlTooltipFactory from './map-control-tooltip';
+interface ThemeToggleButtonIcons {
+    sun: ComponentType<any>;
+    moon: ComponentType<any>;
+}
+export type ThemeToggleButtonProps = {
+    themeName?: string;
+    onSetTheme: (theme: string) => void;
+    mapControls: MapControls;
+    actionIcons?: ThemeToggleButtonIcons;
+};
+declare function ThemeToggleButtonFactory(MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>): React.NamedExoticComponent<ThemeToggleButtonProps>;
+declare namespace ThemeToggleButtonFactory {
+    var deps: (typeof MapControlTooltipFactory)[];
+}
+export default ThemeToggleButtonFactory;

package/dist/map/toggle-3d-button.d.ts

@@ -1,17 +1,23 @@
 import React, { ComponentType } from 'react';
 import MapControlTooltipFactory from './map-control-tooltip';
+import MapControlToolbarFactory from './map-control-toolbar';
 import { MapControls } from '@kepler.gl/types';
+import { MapViewMode } from '@kepler.gl/constants';
 interface Toggle3dButtonIcons {
     cube: ComponentType<any>;
+    globe: ComponentType<any>;
 }
 export type Toggle3dButtonProps = {
     dragRotate: boolean;
+    mapViewMode?: MapViewMode;
     onTogglePerspective: () => void;
+    onSetMapViewMode?: (mode: MapViewMode) => void;
+    onToggleMapControl: (control: string) => void;
     actionIcons: Toggle3dButtonIcons;
     mapControls: MapControls;
 };
-declare function Toggle3dButtonFactory(MapControlTooltip: any): React.NamedExoticComponent<Toggle3dButtonProps>;
+declare function Toggle3dButtonFactory(MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>, MapControlToolbar: ReturnType<typeof MapControlToolbarFactory>): React.NamedExoticComponent<Toggle3dButtonProps>;
 declare namespace Toggle3dButtonFactory {
-    var deps: (typeof MapControlTooltipFactory)[];
+    var deps: (typeof MapControlToolbarFactory | typeof MapControlTooltipFactory)[];
 }
 export default Toggle3dButtonFactory;

package/dist/map-container.d.ts

@@ -4,29 +4,19 @@ import { Map as MaplibreMap } from '@vis.gl/react-maplibre';
 import { VisStateActions, MapStateActions, UIStateActions } from '@kepler.gl/actions';
 import MapPopoverFactory from './map/map-popover';
 import MapControlFactory from './map/map-control';
+import MapScaleFactory from './map/map-scale';
+import { Attribution, AttributionLogos, renderBasemapAttribution, dedupeBasemapAttributions } from './map/attribution';
 import EditorFactory from './editor/editor';
 import { generateMapboxLayers } from '@kepler.gl/layers';
 import { AttributionWithStyle, DatasetAttribution, MapState, MapControls, Viewport } from '@kepler.gl/types';
-import { BaseMapLibraryConfig, GetMapRef } from '@kepler.gl/utils';
+import { GetMapRef } from '@kepler.gl/utils';
 import { MapStyle, computeDeckLayers } from '@kepler.gl/reducers';
 import { VisState } from '@kepler.gl/schemas';
 export declare const isSplitSelector: (props: any) => any;
 export declare const Droppable: ({ containerId }: {
     containerId: any;
 }) => React.JSX.Element;
-type AttributionProps = {
-    showBaseMapLibLogo: boolean;
-    showOsmBasemapAttribution: boolean;
-    datasetAttributions: DatasetAttribution[];
-    baseMapLibraryConfig: BaseMapLibraryConfig;
-};
-export declare const Attribution: React.FC<AttributionProps>;
-type AttributionLogosProps = {
-    logos: AttributionWithStyle[];
-    activeSidePanel?: boolean;
-    sidePanelWidth?: number;
-};
-export declare const AttributionLogos: React.FC<AttributionLogosProps>;
+export { Attribution, AttributionLogos, renderBasemapAttribution, dedupeBasemapAttributions };
 type MapboxStyle = string | object | undefined;
 export interface MapContainerProps {
     visState: VisState;
@@ -54,6 +44,7 @@ export interface MapContainerProps {
     activeSidePanel: string | null;
     sidePanelWidth?: number;
     locale?: any;
+    uiTheme?: string;
     theme?: any;
     editor?: any;
     MapComponent?: typeof MapboxLegacyMap | typeof MaplibreMap;
@@ -82,8 +73,8 @@ export interface MapContainerProps {
     };
     logoComponent?: React.FC | React.ReactNode;
 }
-declare function MapContainerFactory(MapPopover: ReturnType<typeof MapPopoverFactory>, MapControl: ReturnType<typeof MapControlFactory>, Editor: ReturnType<typeof EditorFactory>): React.ComponentType<MapContainerProps>;
+declare function MapContainerFactory(MapPopover: ReturnType<typeof MapPopoverFactory>, MapControl: ReturnType<typeof MapControlFactory>, Editor: ReturnType<typeof EditorFactory>, MapScale: ReturnType<typeof MapScaleFactory>): React.ComponentType<MapContainerProps>;
 declare namespace MapContainerFactory {
-    var deps: (typeof EditorFactory | typeof MapPopoverFactory | typeof MapControlFactory)[];
+    var deps: (typeof MapScaleFactory | typeof MapPopoverFactory | typeof MapControlFactory | typeof EditorFactory)[];
 }
 export default MapContainerFactory;

package/dist/map-view-state-context.d.ts

@@ -6,6 +6,8 @@ type MapViewState = {
     bearing?: number;
     pitch?: number;
     maxPitch?: number;
+    minZoom?: number;
+    maxZoom?: number;
 };
 import { MapState } from '@kepler.gl/types';
 export type MapViewStateContextType = {

package/dist/maps-layout.d.ts

@@ -4,6 +4,9 @@ interface MapsLayoutProps {
     mapState: MapState;
     className?: string;
     children?: React.ReactNode;
+    onSetSwipeComparePercentage?: (payload: {
+        percentage: number;
+    }) => void;
 }
 declare function MapsLayoutFactory(): React.ComponentType<MapsLayoutProps>;
 declare namespace MapsLayoutFactory {

package/dist/modal-container.d.ts

@@ -53,6 +53,6 @@ declare namespace ModalContainerFactory {
         WrappedComponent: React.ComponentType<import("./modals/export-image-modal").ExportImageModalProps>;
     }) | (() => React.FC<import("react-intl").WithIntlProps<import("./modals/export-data-modal").ExportDataModalProps>> & {
         WrappedComponent: React.ComponentType<import("./modals/export-data-modal").ExportDataModalProps>;
-    }) | typeof ExportMapModalFactory | (() => React.FC<import("./modals/export-video-modal").ExportVideoModalProps>) | typeof AddMapStyleModalFactory | (() => import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("./common/modal").ModalDialogOwnProps & Omit<import("react-modal").Props, "className" | "style" | "ariaHideApp"> & React.RefAttributes<import("./common/modal").ModalDialog>, never>> & Omit<typeof import("./common/modal").ModalDialog, keyof React.Component<any, {}, any>>) | typeof SaveMapModalFactory)[];
+    }) | typeof ExportMapModalFactory | (() => React.FC<import("./modals/export-video-modal").ExportVideoModalProps>) | typeof AddMapStyleModalFactory | (() => import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("./common/modal").ModalDialogOwnProps & Omit<import("react-modal").Props, "className" | "style" | "ariaHideApp"> & React.RefAttributes<import("./common/modal").ModalDialog>, never> & Partial<Pick<import("./common/modal").ModalDialogOwnProps & Omit<import("react-modal").Props, "className" | "style" | "ariaHideApp"> & React.RefAttributes<import("./common/modal").ModalDialog>, never>>> & string & Omit<typeof import("./common/modal").ModalDialog, keyof React.Component<any, {}, any>>) | typeof SaveMapModalFactory)[];
 }
 export default ModalContainerFactory;

package/dist/modals/cloud-components/cloud-item.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export declare const CloudItem: ({ vis, onClick }: {
+export declare const CloudItem: ({ vis, onClick, provider }: {
     vis: any;
     onClick: any;
+    provider: any;
 }) => React.JSX.Element;

package/dist/modals/cloud-components/cloud-storage-disclaimer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CloudStorageDisclaimer: React.FC;

package/dist/modals/cloud-tile.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import { IStyledComponent } from 'styled-components';
 import { Provider } from '@kepler.gl/cloud-providers';
 import { BaseComponentProps } from '../types';
 export type StyledTileWrapperProps = BaseComponentProps & {
     selected?: boolean;
 };
-export declare const StyledWarning: IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+export declare const StyledWarning: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 interface CloudTileProps {
     actionName?: string | null;
     provider: Provider;

package/dist/modals/data-table-modal.d.ts

@@ -31,6 +31,7 @@ interface DataTableModalProps {
     }) => void;
     uiStateActions: typeof UIStateActions;
     uiState: UiState;
+    loadColumnStats?: (dataId: string, fieldName: string | string[]) => void;
 }
 declare function DataTableModalFactory(DataTable: ReturnType<typeof DataTableFactory>, DataTableConfig: ReturnType<typeof DataTableConfigFactory>): React.ComponentType<Omit<DataTableModalProps, 'theme'>>;
 declare namespace DataTableModalFactory {

package/dist/modals/export-map-modal/components.d.ts

@@ -1,9 +1,27 @@
 import React from 'react';
-export declare const StyledExportMapSection: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "disabled"> & import("../../common/styled-components").StyledExportSectionProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("../../common/styled-components").StyledExportSectionProps>>, keyof React.Component<any, {}, any>>;
-export declare const StyledWarning: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
-export declare const StyledExportLink: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>;
+export declare const StyledExportMapModalContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, never>>> & string;
+export declare const StyledExportMapSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "disabled"> & import("../../common/styled-components").StyledExportSectionProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "disabled"> & import("../../common/styled-components").StyledExportSectionProps, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "disabled"> & import("../../common/styled-components").StyledExportSectionProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "disabled"> & import("../../common/styled-components").StyledExportSectionProps, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, never>>> & string;
+export declare const StyledExportMapNote: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
+export declare const StyledExportMapFormatPanels: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledExportMapFormatPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$active"> & {
+    $active: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$active"> & {
+    $active: boolean;
+}, never>>> & string;
+export declare const StyledWarning: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const StyledExportLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>> & string;
 export declare const ExportMapLink: ({ children, ...props }: {
     [x: string]: any;
     children: any;

package/dist/modals/export-video-modal.d.ts

@@ -8,6 +8,9 @@ export type VideoConfiguration = {
     fileName?: string;
     resolution?: string;
     durationMs?: number;
+    swipeStartPct?: number;
+    swipeEndPct?: number;
+    swipeEasing?: 'linear' | 'ease-in-out';
 };
 export interface ExportVideoModalProps {
     mapboxApiAccessToken: string;

package/dist/modals/globe-export-video-container.d.ts

@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import { DeckAdapter, FormatConfigs, Timecode } from '@hubble.gl/core';
+import type { DeckProps, MapViewState } from '@deck.gl/core';
+import { GlobeExportVideoPreview } from './globe-export-video-preview';
+export type GlobeExportVideoSettings = {
+    mediaType?: string;
+    cameraPreset?: string;
+    fileName?: string;
+    resolution?: string;
+    durationMs?: number;
+};
+type GlobeExportVideoPanelContainerProps = {
+    initialState?: Partial<GlobeExportVideoPanelContainerState>;
+    glContext?: WebGL2RenderingContext;
+    exportVideoWidth: number;
+    handleClose: () => void;
+    mapData: any;
+    header: boolean;
+    deckProps?: DeckProps;
+    mapProps: Record<string, any>;
+    defaultFileName: string;
+    animatableFilters: any;
+    onTripFrameUpdate: (value: any) => void;
+    onFilterFrameUpdate: (filterIdx: number, name: string, value: any) => void;
+    getTimeRangeFilterKeyframes: (args: any) => any;
+    onSettingsChange: (settings: GlobeExportVideoSettings) => void;
+};
+type GlobeExportVideoPanelContainerState = {
+    adapter?: DeckAdapter;
+    durationMs: number;
+    mediaType: string;
+    cameraPreset: string;
+    fileName: string;
+    resolution: string;
+    viewState?: MapViewState;
+    rendering: boolean;
+    previewing: boolean;
+    saving: boolean;
+    currentTimeMs: number;
+    memo?: {
+        viewState: MapViewState;
+    };
+};
+/**
+ * Video export container for globe mode.
+ *
+ * hubble's built-in ExportVideoPanelContainer only drives its frame-capture
+ * loop from the mapbox base map's 'render' event; in globe mode the base map is
+ * disabled so that loop never fires and the export hangs. This container mirrors
+ * the swipe-export approach: it owns a requestAnimationFrame capture loop and
+ * reads the globe deck canvas directly, so recording works without a base map.
+ */
+export declare class GlobeExportVideoPanelContainer extends Component<GlobeExportVideoPanelContainerProps, GlobeExportVideoPanelContainerState> {
+    previewRef: React.RefObject<GlobeExportVideoPreview | null>;
+    animationFrameId: number | null;
+    activeEncoder: any | null;
+    compositeCanvas: HTMLCanvasElement | null;
+    constructor(props: GlobeExportVideoPanelContainerProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    getFileName(): string;
+    getCanvasSize(): {
+        width: number;
+        height: number;
+    };
+    _getContainer(): {
+        height: number;
+        width: number;
+    };
+    getFormatConfigs(): Partial<FormatConfigs>;
+    getTimecode(): Timecode;
+    getEncoder(): any;
+    getCameraKeyframes(): {
+        timings: number[];
+        keyframes: MapViewState[];
+        easings: import("popmotion").Easing[];
+        width: number;
+        height: number;
+    };
+    getFilterKeyframes(): {
+        filters: any;
+        filterKeyframes: any;
+    } | {
+        filters?: undefined;
+        filterKeyframes?: undefined;
+    };
+    getTripKeyframes(): {
+        animationConfig: any;
+        tripKeyframe: {
+            timings: number[];
+        };
+    } | {
+        animationConfig?: undefined;
+        tripKeyframe?: undefined;
+    };
+    setViewState: (viewState: MapViewState) => void;
+    /** CSS background color (area the globe doesn't cover), from globe config. */
+    getBackgroundColor(): string;
+    /** Starfield behind the globe, matching the live map's CSS background. */
+    areStarsEnabled(): boolean;
+    setStateAndNotify(update: GlobeExportVideoSettings): void;
+    setMediaType: (mediaType: string) => void;
+    setCameraPreset: (cameraPreset: string) => void;
+    setFileName: (fileName: string) => void;
+    setResolution: (resolution: string) => void;
+    setDuration: (durationMs: number) => void;
+    /** Preview playback — animate the camera without encoding. */
+    onPreviewVideo: () => void;
+    /**
+     * Record — drive our own capture loop (hubble's built-in loop never fires
+     * without a base map) and encode the globe deck canvas frame by frame.
+     */
+    onRenderVideo: () => void;
+    onStop: ({ abort }?: {
+        abort?: boolean;
+    }) => void;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/modals/globe-export-video-preview.d.ts

@@ -0,0 +1,44 @@
+import React, { Component, RefObject } from 'react';
+import type { Deck, DeckProps, MapViewState } from '@deck.gl/core';
+import { DeckAdapter } from '@hubble.gl/core';
+export type GlobeExportVideoPreviewProps = {
+    mapData: any;
+    resolution: [number, number];
+    exportVideoWidth: number;
+    deckProps?: DeckProps;
+    viewState: MapViewState;
+    adapter: DeckAdapter;
+    rendering: boolean;
+    saving: boolean;
+    setViewState: (viewState: MapViewState) => void;
+    durationMs: number;
+    /** CSS color string for the area the globe does not cover. */
+    backgroundColor: string;
+    mapProps?: Record<string, any>;
+    /** Tileable star-field data URL, matching the live globe map CSS background. */
+    starsImage?: string | null;
+};
+/**
+ * Single-canvas video export preview for globe mode.
+ *
+ * hubble's built-in preview cannot be used for globe mode: in its
+ * `disableBaseMap` branch it renders a bare <DeckGL> without a viewState and
+ * never wires up the frame-capture loop (that loop is driven by the mapbox
+ * 'render' event, which does not exist without a base map). This component
+ * renders the globe deck directly with a valid, controlled viewState so the
+ * GlobeView controller initializes correctly (no MapState/GlobeState assert),
+ * stays interactive, and exposes the deck canvas so the parent container can
+ * drive its own capture loop (mirrors the swipe export approach).
+ */
+export declare class GlobeExportVideoPreview extends Component<GlobeExportVideoPreviewProps> {
+    deckRef: RefObject<Deck | null>;
+    _getContainer(): {
+        height: number;
+        width: number;
+    };
+    /** Expose the deck canvas so the parent container can capture frames. */
+    getCanvas(): HTMLCanvasElement | null;
+    /** All layers loaded — used to gate the first capture frame. */
+    areLayersLoaded(): boolean;
+    render(): React.JSX.Element;
+}

package/dist/modals/hubble-utils.d.ts

@@ -1,3 +1,4 @@
+import { type MapViewState } from '@deck.gl/core';
 import { TimeRangeFilter } from '@kepler.gl/types';
 type KeplerState = {
     visState: any;
@@ -7,6 +8,22 @@ type KeplerState = {
 type MapboxLayerRef = {
     id: string;
 } & Record<string, any>;
+/** Device props for export previews that own their canvas and read pixels back off it. */
+export declare const EXPORT_DECK_DEVICE_PROPS: {
+    type: "webgl";
+    webgl: {
+        preserveDrawingBuffer: boolean;
+    };
+    debug: boolean;
+};
+/** Device props for export previews that draw as an overlay on top of a basemap. */
+export declare const EXPORT_OVERLAY_DEVICE_PROPS: {
+    type: "webgl";
+    webgl: {
+        stencil: boolean;
+    };
+    debug: boolean;
+};
 type TimeRangeFilterKeyframes = {
     keyframes: {
         value: number | [number, number];
@@ -20,6 +37,34 @@ export declare function getTimeRangeFilterKeyframes({ filter, timings }: {
 }): TimeRangeFilterKeyframes;
 export declare function getBeforeLayerId(topMapStyle: any, bottomMapStyle: any): MapboxLayerRef | null;
 export declare function getStaticMapProps(keplerState: KeplerState, onViewChange: (viewState: Record<string, any>) => void, mapboxApiAccessToken: string, mapboxApiUrl?: string): Record<string, any>;
-export declare function getHubbleDeckGlProps(keplerState: KeplerState, _mapboxApiAccessToken: string, _mapboxApiUrl?: string): Record<string, any>;
+export declare function getHubbleDeckGlProps(keplerState: KeplerState, mapboxApiAccessToken: string, mapboxApiUrl?: string): Record<string, any>;
+/**
+ * Build a fresh set of globe layers (base + data + top) for a given split-map
+ * index. Used by the swipe export preview, which mounts two independent Deck
+ * instances: each side needs its OWN layer instances (deck.gl Layer objects are
+ * stateful and bound to a single Deck) and its own `mapIndex` so the split-map
+ * layer visibility is respected on each half of the swipe.
+ */
+export declare function getGlobeExportLayers(keplerState: KeplerState, { mapIndex, mapboxApiAccessToken, mapboxApiUrl, viewState }: {
+    mapIndex: number;
+    mapboxApiAccessToken?: string;
+    mapboxApiUrl?: string;
+    viewState?: MapViewState;
+}): (import("@kepler.gl/layers").Layer | import("@deck.gl/core").Layer<{}>)[];
 export declare function getAnimatableFilters(keplerState: KeplerState): TimeRangeFilter[];
+export declare function scaleToVideoExport(viewState: MapViewState, container: {
+    width: number;
+    height: number;
+}): MapViewState & {
+    width: number;
+    height: number;
+};
+export declare function parseSetCameraType(strCameraType: string, viewState: MapViewState): MapViewState;
+type Resolution = {
+    value: string;
+    label: string;
+    width: number;
+    height: number;
+};
+export declare function getResolutionSetting(value: string): Resolution;
 export {};

package/dist/modals/modal-dialog.d.ts

@@ -1,2 +1,2 @@
-declare const ModalDialogFactory: () => import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("../common/modal").ModalDialogOwnProps & Omit<import("react-modal").Props, "className" | "style" | "ariaHideApp"> & import("react").RefAttributes<import("../common/modal").ModalDialog>, never>> & Omit<typeof import("../common/modal").ModalDialog, keyof import("react").Component<any, {}, any>>;
+declare const ModalDialogFactory: () => import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../common/modal").ModalDialogOwnProps & Omit<import("react-modal").Props, "className" | "style" | "ariaHideApp"> & import("react").RefAttributes<import("../common/modal").ModalDialog>, never> & Partial<Pick<import("../common/modal").ModalDialogOwnProps & Omit<import("react-modal").Props, "className" | "style" | "ariaHideApp"> & import("react").RefAttributes<import("../common/modal").ModalDialog>, never>>> & string & Omit<typeof import("../common/modal").ModalDialog, keyof import("react").Component<any, {}, any>>;
 export default ModalDialogFactory;

package/dist/modals/share-map-modal.d.ts

@@ -2,10 +2,8 @@ import React from 'react';
 import { ImageModalContainerProps } from './image-modal-container';
 import { Provider } from '@kepler.gl/cloud-providers';
 import { cleanupExportImage as cleanupExportImageAction } from '@kepler.gl/actions';
-export declare const StyledInputLabel: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>;
-export declare const StyleSharingUrl: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}>, never>, never>>;
+export declare const StyledInputLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
+export declare const StyleSharingUrl: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "className"> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "className">>> & string;
 interface SharingUrlProps {
     url: string;
     message?: string;

package/dist/modals/swipe-composite-utils.d.ts

@@ -0,0 +1,10 @@
+export type SwipeEasing = 'linear' | 'ease-in-out';
+/**
+ * Compute the swipe percentage at a given time.
+ */
+export declare function getSwipePercentageAtTime(timeMs: number, durationMs: number, startPct: number, endPct: number, easing?: SwipeEasing): number;
+/**
+ * Composite two canvases (left/right map views) with a swipe divider
+ * into a single output canvas.
+ */
+export declare function compositeSwipeFrame(leftCanvas: HTMLCanvasElement, rightCanvas: HTMLCanvasElement, outputCanvas: HTMLCanvasElement, percentage: number, showDivider?: boolean, backgroundColor?: string, showStars?: boolean): void;

package/dist/modals/swipe-composite-utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/modals/swipe-export-settings.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SwipeEasing } from './swipe-composite-utils';
+export type SwipeExportSettingsProps = {
+    durationMs: number;
+    mediaType: string;
+    resolution: string;
+    fileName: string;
+    cameraPreset: string;
+    frameRate: number;
+    onChangeDuration: (value: number) => void;
+    onChangeMediaType: (value: string) => void;
+    onChangeResolution: (value: string) => void;
+    onChangeFileName: (value: string) => void;
+    onChangeCameraPreset: (value: string) => void;
+    swipeStartPct: number;
+    swipeEndPct: number;
+    swipeEasing: SwipeEasing;
+    disabled: boolean;
+    onChangeStartPct: (value: number) => void;
+    onChangeEndPct: (value: number) => void;
+    onChangeEasing: (value: SwipeEasing) => void;
+    hideSwipe?: boolean;
+};
+declare const SwipeExportSettings: React.FC<SwipeExportSettingsProps>;
+export default SwipeExportSettings;

package/dist/modals/swipe-export-video-container.d.ts

@@ -0,0 +1,128 @@
+import React, { Component } from 'react';
+import { DeckAdapter, FormatConfigs, Timecode } from '@hubble.gl/core';
+import type { DeckProps, MapViewState } from '@deck.gl/core';
+import { SwipeExportVideoPreview } from './swipe-export-video-preview';
+import { SwipeEasing } from './swipe-composite-utils';
+export type SwipeExportVideoSettings = {
+    mediaType?: string;
+    cameraPreset?: string;
+    fileName?: string;
+    resolution?: string;
+    durationMs?: number;
+    swipeStartPct?: number;
+    swipeEndPct?: number;
+    swipeEasing?: SwipeEasing;
+};
+type SwipeExportVideoPanelContainerProps = {
+    initialState?: Partial<SwipeExportVideoPanelContainerState>;
+    glContext?: WebGL2RenderingContext;
+    exportVideoWidth: number;
+    handleClose: () => void;
+    mapData: any;
+    header: boolean;
+    deckProps?: DeckProps;
+    mapProps: Record<string, any>;
+    disableBaseMap: boolean;
+    mapboxLayerBeforeId?: string;
+    defaultFileName: string;
+    animatableFilters: any;
+    onTripFrameUpdate: (value: any) => void;
+    onFilterFrameUpdate: (filterIdx: number, name: string, value: any) => void;
+    getTimeRangeFilterKeyframes: (args: any) => any;
+    onSettingsChange: (settings: SwipeExportVideoSettings) => void;
+    swipeStartPct: number;
+    swipeEndPct: number;
+    swipeEasing: SwipeEasing;
+};
+type SwipeExportVideoPanelContainerState = {
+    adapter?: DeckAdapter;
+    durationMs: number;
+    mediaType: string;
+    cameraPreset: string;
+    fileName: string;
+    resolution: string;
+    viewState?: MapViewState;
+    rendering: boolean;
+    previewing: boolean;
+    saving: boolean;
+    currentTimeMs: number;
+    memo?: {
+        viewState: MapViewState;
+    };
+};
+/**
+ * Orchestrates swipe video export recording.
+ * Manages a DeckAdapter but overrides the capture pipeline to
+ * composite left/right canvases with an animated swipe divider.
+ */
+export declare class SwipeExportVideoPanelContainer extends Component<SwipeExportVideoPanelContainerProps, SwipeExportVideoPanelContainerState> {
+    previewRef: React.RefObject<SwipeExportVideoPreview | null>;
+    animationFrameId: number | null;
+    activeEncoder: any | null;
+    constructor(props: SwipeExportVideoPanelContainerProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    getFileName(): string;
+    getCanvasSize(): {
+        width: number;
+        height: number;
+    };
+    _getContainer(): {
+        height: number;
+        width: number;
+    };
+    getFormatConfigs(): Partial<FormatConfigs>;
+    getTimecode(): Timecode;
+    getEncoder(): any;
+    getCameraKeyframes(): {
+        timings: number[];
+        keyframes: MapViewState[];
+        easings: import("popmotion").Easing[];
+        width: number;
+        height: number;
+    };
+    getFilterKeyframes(): {
+        filters: any;
+        filterKeyframes: any;
+    } | {
+        filters?: undefined;
+        filterKeyframes?: undefined;
+    };
+    getTripKeyframes(): {
+        animationConfig: any;
+        tripKeyframe: {
+            timings: number[];
+        };
+    } | {
+        animationConfig?: undefined;
+        tripKeyframe?: undefined;
+    };
+    setViewState: (viewState: MapViewState) => void;
+    /**
+     * CSS background color for globe swipe (the area the globe doesn't cover).
+     * Returns undefined outside globe mode so non-globe swipe keeps its previous
+     * transparent-clear compositing (the opaque base map already fills the frame).
+     */
+    getBackgroundColor(): string | undefined;
+    setStateAndNotify(update: SwipeExportVideoSettings): void;
+    setMediaType: (mediaType: string) => void;
+    setCameraPreset: (cameraPreset: string) => void;
+    setFileName: (fileName: string) => void;
+    setResolution: (resolution: string) => void;
+    setDuration: (durationMs: number) => void;
+    /**
+     * Start a preview playback — animates the swipe without encoding.
+     */
+    onPreviewVideo: () => void;
+    /**
+     * Start actual recording — captures composited frames into the encoder.
+     * Uses a timer-based approach: updates currentTimeMs, waits for the preview
+     * to composite, then captures the composite canvas.
+     */
+    onRenderVideo: () => void;
+    onStop: ({ abort }?: {
+        abort?: boolean;
+    }) => void;
+    render(): React.JSX.Element;
+}
+export {};