@jupytergis/base 0.13.2 → 0.14.0

package/lib/mainview/mainView.js

@@ -45,11 +45,9 @@ import { debounce, isLightTheme, loadFile, throttle } from "../tools";
 import CollaboratorPointers from './CollaboratorPointers';
 import { FollowIndicator } from './FollowIndicator';
 import TemporalSlider from './TemporalSlider';
-import { hexToRgb } from '../dialogs/symbology/colorRampUtils';
 import { markerIcon } from '../icons';
 import { LeftPanel, RightPanel } from '../panelview';
-import { MobileSpectaPanel } from '../panelview/story-maps/MobileSpectaPanel';
-import StoryViewerPanel from '../panelview/story-maps/StoryViewerPanel';
+import { SpectaPanel } from '../panelview/story-maps/SpectaPanel';
 export class MainView extends React.Component {
     constructor(props) {
         super(props);
@@ -135,6 +133,16 @@ export class MainView extends React.Component {
         };
         this.addContextMenu = () => {
             this._commands.addCommand(CommandIDs.addAnnotation, {
+                label: 'Add annotation',
+                describedBy: {
+                    args: {
+                        type: 'object',
+                        properties: {},
+                    },
+                },
+                isEnabled: () => {
+                    return !!this._Map;
+                },
                 execute: () => {
                     var _a;
                     if (!this._Map) {
@@ -152,10 +160,6 @@ export class MainView extends React.Component {
                         open: true,
                     });
                 },
-                label: 'Add annotation',
-                isEnabled: () => {
-                    return !!this._Map;
-                },
             });
             this._contextMenu.addItem({
                 command: CommandIDs.addAnnotation,
@@ -417,8 +421,6 @@ export class MainView extends React.Component {
         this._setupSpectaMode = () => {
             this._removeAllInteractions();
             this._setupStoryScrollListener();
-            // Update colors CSS variables with colors from story
-            this._updateSpectaPresentationColors();
         };
         this._removeAllInteractions = () => {
             // Remove all default interactions
@@ -524,27 +526,6 @@ export class MainView extends React.Component {
                 this._storyScrollHandler = null;
             }
         };
-        this._updateSpectaPresentationColors = () => {
-            var _a;
-            // Try ref first, fallback to querySelector if ref not available yet
-            const container = this.spectaContainerRef.current ||
-                ((_a = this.divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.jgis-specta-story-panel-container'));
-            if (!container) {
-                return;
-            }
-            const story = this._model.getSelectedStory().story;
-            const bgColor = story === null || story === void 0 ? void 0 : story.presentationBgColor;
-            const textColor = story === null || story === void 0 ? void 0 : story.presentationTextColor;
-            // Set background color
-            if (bgColor) {
-                const rgb = hexToRgb(bgColor);
-                container.style.setProperty('--jgis-specta-bg-color', `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`);
-            }
-            // Set text color
-            if (textColor) {
-                container.style.setProperty('--jgis-specta-text-color', textColor);
-            }
-        };
         this._onSharedMetadataChanged = (_, changes) => {
             const newState = Object.assign({}, this.state.annotations);
             changes.forEach((val, key) => {
@@ -588,6 +569,32 @@ export class MainView extends React.Component {
         this._handleWindowResize = () => {
             // TODO SOMETHING
         };
+        this._handleSpectaTouchStart = (e) => {
+            if (e.touches.length > 0) {
+                this._spectaTouchStartX = e.touches[0].clientX;
+            }
+        };
+        this._handleSpectaTouchEnd = (e) => {
+            var _a, _b, _c;
+            if (e.changedTouches.length === 0) {
+                return;
+            }
+            const endX = e.changedTouches[0].clientX;
+            const deltaX = endX - this._spectaTouchStartX;
+            const threshold = 50;
+            const story = this._model.getSelectedStory().story;
+            const segmentCount = (_b = (_a = story === null || story === void 0 ? void 0 : story.storySegments) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+            if (segmentCount === 0) {
+                return;
+            }
+            const current = (_c = this._model.getCurrentSegmentIndex()) !== null && _c !== void 0 ? _c : 0;
+            if (deltaX > threshold && current > 0) {
+                this._model.setCurrentSegmentIndex(current - 1);
+            }
+            else if (deltaX < -threshold && current < segmentCount - 1) {
+                this._model.setCurrentSegmentIndex(current + 1);
+            }
+        };
         this._isPositionInitialized = false;
         this.divRef = React.createRef(); // Reference of render div
         this.controlsToolbarRef = React.createRef();
@@ -600,6 +607,7 @@ export class MainView extends React.Component {
         this._isSpectaPresentationInitialized = false;
         this._storyScrollHandler = null;
         this._pendingStoryScrollRafId = null;
+        this._spectaTouchStartX = 0;
         this._state = props.state;
         this._formSchemaRegistry = props.formSchemaRegistry;
         this._annotationModel = props.annotationModel;
@@ -663,7 +671,8 @@ export class MainView extends React.Component {
             displayTemporalController: false,
             filterStates: {},
             jgisSettings: this._model.jgisSettings,
-            isSpectaPresentation: false,
+            isSpectaPresentation: this._model.isSpectaMode(),
+            initialLayersReady: false,
         };
         this._sources = [];
         this._loadingLayers = new Set();
@@ -709,6 +718,8 @@ export class MainView extends React.Component {
         this._mainViewModel.dispose();
     }
     async generateMap(center, zoom) {
+        const layers = this._model.getLayers();
+        this._initialLayersCount = Object.values(layers).filter(layer => layer.type !== 'StorySegmentLayer').length;
         const scaleLine = new ScaleLine({
             target: this.controlsToolbarRef.current || undefined,
         });
@@ -1047,11 +1058,16 @@ export class MainView extends React.Component {
                 });
                 // Replace color placeholder in SVG with the parameter color
                 const markerColor = parameters.color || '#3463a0';
-                const svgString = markerIcon.svgstr.replace('{{COLOR}}', markerColor);
+                const svgString = markerIcon.svgstr
+                    .replace('{{COLOR}}', markerColor)
+                    .replace('<svg', '<svg width="128" height="128"');
                 const iconStyle = new Style({
                     image: new Icon({
                         src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`,
                         scale: 0.25,
+                        anchor: [0.5, 1],
+                        anchorXUnits: 'fraction',
+                        anchorYUnits: 'fraction',
                     }),
                 });
                 marker.setStyle(iconStyle);
@@ -1346,6 +1362,11 @@ export class MainView extends React.Component {
                 const numLayers = this._Map.getLayers().getLength();
                 const safeIndex = Math.min(index, numLayers);
                 this._Map.getLayers().insertAt(safeIndex, newMapLayer);
+                // doing +1 instead of calling method again
+                if (!this.state.initialLayersReady &&
+                    numLayers + 1 === this._initialLayersCount) {
+                    this.setState(old => (Object.assign(Object.assign({}, old), { initialLayersReady: true })));
+                }
             }
         }
         catch (error) {
@@ -2039,7 +2060,11 @@ export class MainView extends React.Component {
         // ? could send just the filters object and modify that instead of emitting whole layer
         const json = JSON.parse(args);
         const { layerId, layer: jgisLayer } = json;
+        const isSourceType = typeof (jgisLayer === null || jgisLayer === void 0 ? void 0 : jgisLayer.type) === 'string' && jgisLayer.type.includes('Source');
         const olLayer = this.getLayer(layerId);
+        if (isSourceType) {
+            this.updateSource(layerId, jgisLayer);
+        }
         if (!jgisLayer || !olLayer) {
             console.error('Failed to update layer -- layer not found');
             return;
@@ -2086,7 +2111,11 @@ export class MainView extends React.Component {
                         border: this.state.remoteUser
                             ? `solid 3px ${this.state.remoteUser.color}`
                             : 'unset',
-                    } },
+                    }, onTouchStart: this.state.isSpectaPresentation && this.props.isMobile
+                        ? this._handleSpectaTouchStart
+                        : undefined, onTouchEnd: this.state.isSpectaPresentation && this.props.isMobile
+                        ? this._handleSpectaTouchEnd
+                        : undefined },
                     React.createElement(LoadingOverlay, { loading: this.state.loading }),
                     React.createElement(FollowIndicator, { remoteUser: this.state.remoteUser }),
                     React.createElement(CollaboratorPointers, { clients: this.state.clientPointers }),
@@ -2096,9 +2125,7 @@ export class MainView extends React.Component {
                         } },
                         React.createElement("div", { className: "jgis-panels-wrapper" }, !this.state.isSpectaPresentation ? (React.createElement(React.Fragment, null,
                             this._state && (React.createElement(LeftPanel, { model: this._model, commands: this._mainViewModel.commands, state: this._state, settings: this.state.jgisSettings })),
-                            this._formSchemaRegistry && this._annotationModel && (React.createElement(RightPanel, { model: this._model, commands: this._mainViewModel.commands, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel, addLayer: this.addLayer.bind(this), removeLayer: this.removeLayer.bind(this), settings: this.state.jgisSettings })))) : this.props.isMobile ? (React.createElement(MobileSpectaPanel, { model: this._model })) : (React.createElement("div", { className: "jgis-specta-right-panel-container-mod jgis-right-panel-container" },
-                            React.createElement("div", { ref: this.spectaContainerRef, className: "jgis-specta-story-panel-container" },
-                                React.createElement(StoryViewerPanel, { ref: this.storyViewerPanelRef, model: this._model, isSpecta: this.state.isSpectaPresentation, className: "jgis-story-viewer-panel-specta-mod", onSegmentTransitionEnd: () => this._clearStoryScrollGuard() }))))),
+                            this._formSchemaRegistry && this._annotationModel && (React.createElement(RightPanel, { model: this._model, commands: this._mainViewModel.commands, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel, addLayer: this.addLayer.bind(this), removeLayer: this.removeLayer.bind(this), settings: this.state.jgisSettings })))) : (this.state.initialLayersReady && (React.createElement(SpectaPanel, { model: this._model, isSpecta: this.state.isSpectaPresentation, isMobile: this.props.isMobile, onSegmentTransitionEnd: () => this._clearStoryScrollGuard(), containerRef: this.spectaContainerRef, storyViewerPanelRef: this.storyViewerPanelRef, addLayer: this.addLayer.bind(this), removeLayer: this.removeLayer.bind(this) })))),
                         React.createElement("div", { ref: this.controlsToolbarRef, className: "jgis-controls-toolbar" }))),
                 !this.state.isSpectaPresentation && (React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale })))));
     }

package/lib/mainview/mainviewmodel.js

@@ -1,4 +1,4 @@
-import { v4 as uuid } from 'uuid';
+import { UUID } from '@lumino/coreutils';
 export class MainViewModel {
     constructor(options) {
         this._isDisposed = false;
@@ -33,7 +33,7 @@ export class MainViewModel {
     }
     addAnnotation(value) {
         var _a;
-        (_a = this._jGISModel.annotationModel) === null || _a === void 0 ? void 0 : _a.addAnnotation(uuid(), value);
+        (_a = this._jGISModel.annotationModel) === null || _a === void 0 ? void 0 : _a.addAnnotation(UUID.uuid4(), value);
     }
     async _onsharedLayersChanged(_, change) {
         if (change.layerChange) {

package/lib/menus.js

@@ -8,19 +8,19 @@ export const vectorSubMenu = (commands) => {
     subMenu.id = 'jp-gis-toolbar-vector-menu';
     subMenu.addItem({
         type: 'command',
-        command: CommandIDs.newVectorTileEntry,
+        command: CommandIDs.openNewVectorTileDialog,
     });
     subMenu.addItem({
         type: 'command',
-        command: CommandIDs.newGeoJSONEntry,
+        command: CommandIDs.openNewGeoJSONDialog,
     });
     subMenu.addItem({
         type: 'command',
-        command: CommandIDs.newShapefileEntry,
+        command: CommandIDs.openNewShapefileDialog,
     });
     subMenu.addItem({
         type: 'command',
-        command: CommandIDs.newGeoParquetEntry,
+        command: CommandIDs.openNewGeoParquetDialog,
     });
     return subMenu;
 };
@@ -31,19 +31,19 @@ export const rasterSubMenu = (commands) => {
     subMenu.id = 'jp-gis-toolbar-raster-menu';
     subMenu.addItem({
         type: 'command',
-        command: CommandIDs.newRasterEntry,
+        command: CommandIDs.openNewRasterDialog,
     });
     subMenu.addItem({
         type: 'command',
-        command: CommandIDs.newHillshadeEntry,
+        command: CommandIDs.openNewHillshadeDialog,
     });
     subMenu.addItem({
         type: 'command',
-        command: CommandIDs.newImageEntry,
+        command: CommandIDs.openNewImageDialog,
     });
     subMenu.addItem({
         type: 'command',
-        command: CommandIDs.newGeoTiffEntry,
+        command: CommandIDs.openNewGeoTiffDialog,
     });
     return subMenu;
 };

package/lib/panelview/components/layers.js

@@ -261,6 +261,7 @@ const LayerComponent = props => {
         model: gisModel,
     });
     const hasSupportedSymbology = (symbology === null || symbology === void 0 ? void 0 : symbology.symbologyState) !== undefined;
+    const isStorySegmentLayer = layer.type === 'StorySegmentLayer';
     const name = layer.name;
     useEffect(() => {
         setId(DOMUtils.createDomID());
@@ -361,14 +362,16 @@ const LayerComponent = props => {
         const slideNum = story.storySegments.indexOf(layerId) + 1;
         return slideNum;
     };
-    return (React.createElement("div", { className: `${LAYER_ITEM_CLASS} ${LAYER_CLASS}${selected ? ' jp-mod-selected' : ''}`, draggable: true, onDragStart: Private.onDragStart, onDragOver: Private.onDragOver, onDragEnd: Private.onDragEnd, "data-id": layerId, style: { display: 'flex', flexDirection: 'column' } },
+    return (React.createElement("div", { className: `${LAYER_ITEM_CLASS} ${LAYER_CLASS}
+                  ${isStorySegmentLayer ? 'jp-gis-storySegmentLayer' : ''}
+                  ${selected ? ' jp-mod-selected' : ''}`, draggable: true, onDragStart: Private.onDragStart, onDragOver: Private.onDragOver, onDragEnd: Private.onDragEnd, "data-id": layerId, style: { display: 'flex', flexDirection: 'column' } },
         React.createElement("div", { className: LAYER_TITLE_CLASS, onClick: setSelection, onContextMenu: setSelection, style: { display: 'flex' } },
             hasSupportedSymbology && (React.createElement(Button, { minimal: true, onClick: e => {
                     e.stopPropagation();
                     setExpanded(v => !v);
                 }, title: expanded ? 'Hide legend' : 'Show legend' },
                 React.createElement(LabIcon.resolveReact, { icon: expanded ? caretDownIcon : caretRightIcon, tag: "span" }))),
-            layer.type === 'StorySegmentLayer' ? (React.createElement("span", { className: LAYER_SLIDE_NUMBER_CLASS, title: "Slide number" }, getSlideNumber())) : (React.createElement(Button, { title: layer.visible ? 'Hide layer' : 'Show layer', onClick: toggleVisibility, minimal: true },
+            isStorySegmentLayer ? (React.createElement("span", { className: LAYER_SLIDE_NUMBER_CLASS, title: "Slide number" }, getSlideNumber())) : (React.createElement(Button, { title: layer.visible ? 'Hide layer' : 'Show layer', onClick: toggleVisibility, minimal: true },
                 React.createElement(LabIcon.resolveReact, { icon: layer.visible ? visibilityIcon : nonVisibilityIcon, className: `${LAYER_ICON_CLASS}${layer.visible ? '' : ' jp-gis-mod-hidden'}`, tag: "span" }))),
             icons.has(layer.type) && (React.createElement(LabIcon.resolveReact, Object.assign({}, icons.get(layer.type), { className: LAYER_ICON_CLASS }))),
             isEditing ? (React.createElement("input", { type: "text", value: editValue, onChange: e => setEditValue(e.target.value), onKeyDown: handleRenameKeyDown, onBlur: handleRenameSave, className: LAYER_TEXT_CLASS, style: {

package/lib/panelview/objectproperties.js

@@ -1,5 +1,5 @@
+import { UUID } from '@lumino/coreutils';
 import * as React from 'react';
-import { v4 as uuid } from 'uuid';
 import { EditForm } from "../formbuilder/editform";
 export class ObjectPropertiesReact extends React.Component {
     constructor(props) {
@@ -37,7 +37,7 @@ export class ObjectPropertiesReact extends React.Component {
         };
         this.state = {
             clientId: props.model.getClientId(),
-            id: uuid(),
+            id: UUID.uuid4(),
             model: props.model,
             selectedObject: props.selectedObject,
             setSelectedObject: props.setSelectedObject,

package/lib/panelview/rightpanel.js

@@ -3,10 +3,25 @@ import Draggable from 'react-draggable';
 import { AnnotationsPanel } from './annotationPanel';
 import { IdentifyPanelComponent } from './identify-panel/IdentifyPanel';
 import { ObjectPropertiesReact } from './objectproperties';
-import { PreviewModeSwitch } from './story-maps/PreviewModeSwitch';
 import StoryEditorPanel from './story-maps/StoryEditorPanel';
 import StoryViewerPanel from './story-maps/StoryViewerPanel';
+import { PreviewModeSwitch } from './story-maps/components/PreviewModeSwitch';
+import { useStoryMap, } from './story-maps/hooks/useStoryMap';
 import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
+/** Story viewer + useStoryMap hook
+ * only mounted when story tab is active to avoid the hook causing re-renders when tab is hidden.
+ **/
+function RightPanelStoryViewer({ model, addLayer, removeLayer, }) {
+    const overrideLayerEntriesRef = React.useRef([]);
+    const { storyData, currentIndex, setIndex, handlePrev, handleNext, hasPrev, hasNext, activeSlide, layerName, } = useStoryMap({
+        model,
+        overrideLayerEntriesRef,
+        removeLayer,
+        addLayer,
+        isSpecta: false,
+    });
+    return (React.createElement(StoryViewerPanel, { model: model, isSpecta: false, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext, setIndex: setIndex }));
+}
 export const RightPanel = props => {
     var _a;
     const [editorMode, setEditorMode] = React.useState(true);
@@ -90,7 +105,7 @@ export const RightPanel = props => {
                     React.createElement(ObjectPropertiesReact, { setSelectedObject: setSelectedObjectProperties, selectedObject: selectedObjectProperties, formSchemaRegistry: props.formSchemaRegistry, model: props.model }))),
                 !props.settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "storyPanel", className: "jgis-panel-tab-content", style: { paddingTop: 0 } },
                     !storyMapPresentationMode && (React.createElement(PreviewModeSwitch, { checked: !editorMode, onCheckedChange: toggleEditor })),
-                    showEditor ? (React.createElement(StoryEditorPanel, { model: props.model, commands: props.commands })) : (React.createElement(StoryViewerPanel, { model: props.model, isSpecta: false, addLayer: props.addLayer, removeLayer: props.removeLayer })))),
+                    showEditor ? (React.createElement(StoryEditorPanel, { model: props.model, commands: props.commands })) : curTab === 'storyPanel' ? (React.createElement(RightPanelStoryViewer, { model: props.model, addLayer: props.addLayer, removeLayer: props.removeLayer })) : null)),
                 !props.settings.annotationsDisabled && (React.createElement(TabsContent, { value: "annotations", className: "jgis-panel-tab-content" },
                     React.createElement(AnnotationsPanel, { annotationModel: props.annotationModel, jgisModel: props.model }))),
                 !props.settings.identifyDisabled && (React.createElement(TabsContent, { value: "identifyPanel", className: "jgis-panel-tab-content" },

package/lib/panelview/story-maps/SpectaPanel.d.ts

@@ -0,0 +1,15 @@
+import { IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
+import React, { RefObject } from 'react';
+import type { IStoryViewerPanelHandle } from './StoryViewerPanel';
+interface ISpectaPanelProps {
+    model: IJupyterGISModel;
+    isSpecta: boolean;
+    isMobile: boolean;
+    onSegmentTransitionEnd: () => void;
+    containerRef: RefObject<HTMLDivElement>;
+    storyViewerPanelRef: RefObject<IStoryViewerPanelHandle>;
+    addLayer?: (id: string, layer: IJGISLayer, index: number) => Promise<void>;
+    removeLayer?: (id: string) => void;
+}
+export declare function SpectaPanel({ model, isSpecta, isMobile, onSegmentTransitionEnd, containerRef, storyViewerPanelRef, addLayer, removeLayer, }: ISpectaPanelProps): React.JSX.Element;
+export {};

package/lib/panelview/story-maps/SpectaPanel.js

@@ -0,0 +1,35 @@
+import React, { useEffect, useRef } from 'react';
+import { SpectaDesktopView } from './components/SpectaDesktopView';
+import { SpectaMobileView } from './components/SpectaMobileView';
+import { useStoryMap } from './hooks/useStoryMap';
+export function SpectaPanel({ model, isSpecta, isMobile, onSegmentTransitionEnd, containerRef, storyViewerPanelRef, addLayer, removeLayer, }) {
+    const overrideLayerEntriesRef = useRef([]);
+    const segmentContainerRef = useRef(null);
+    const { storyData, currentIndex, setIndex, handlePrev, handleNext, hasPrev, hasNext, activeSlide, layerName, } = useStoryMap({
+        model,
+        overrideLayerEntriesRef,
+        removeLayer,
+        addLayer,
+        panelRef: isMobile ? undefined : containerRef,
+        isSpecta,
+    });
+    // Notify when segment transition animation ends
+    useEffect(() => {
+        const el = segmentContainerRef.current;
+        if (!el || !onSegmentTransitionEnd) {
+            return;
+        }
+        const handleAnimationEnd = (e) => {
+            if (e.animationName === 'fadeIn') {
+                el.removeEventListener('animationend', handleAnimationEnd);
+                onSegmentTransitionEnd();
+            }
+        };
+        el.addEventListener('animationend', handleAnimationEnd);
+        return () => el.removeEventListener('animationend', handleAnimationEnd);
+    }, [currentIndex, onSegmentTransitionEnd]);
+    if (isMobile) {
+        return (React.createElement(SpectaMobileView, { model: model, segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext, setIndex: setIndex }));
+    }
+    return (React.createElement(SpectaDesktopView, { model: model, isSpecta: isSpecta, containerRef: containerRef, storyViewerPanelRef: storyViewerPanelRef, segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext, setIndex: setIndex }));
+}

package/lib/panelview/story-maps/StoryViewerPanel.d.ts

@@ -1,14 +1,22 @@
-import { IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
-import React from 'react';
+import { IJGISStoryMap, IJupyterGISModel, IStorySegmentLayer } from '@jupytergis/schema';
+import React, { RefObject } from 'react';
+/** Props: story state and callbacks come from useStoryMap in parent (SpectaPanel or SpectaMobileView). */
 interface IStoryViewerPanelProps {
     model: IJupyterGISModel;
     isSpecta: boolean;
     isMobile?: boolean;
     className?: string;
-    addLayer?: (id: string, layer: IJGISLayer, index: number) => Promise<void>;
-    removeLayer?: (id: string) => void;
-    /** Called when the segment transition animation has finished (e.g. for scroll-guard cleanup). */
-    onSegmentTransitionEnd?: () => void;
+    /** Ref for the segment container (SpectaPanel uses it for animationend). */
+    segmentContainerRef?: RefObject<HTMLDivElement>;
+    storyData: IJGISStoryMap | null;
+    currentIndex: number;
+    activeSlide: IStorySegmentLayer['parameters'] | undefined;
+    layerName: string;
+    handlePrev: () => void;
+    handleNext: () => void;
+    hasPrev: boolean;
+    hasNext: boolean;
+    setIndex: (index: number) => void;
 }
 export interface IStoryViewerPanelHandle {
     handlePrev: () => void;
@@ -26,8 +34,15 @@ export interface IStoryViewerPanelHandle {
  * - below-title: normal mode, guided, no image (under the title)
  * - over-image: normal mode, guided, with image (over the image)
  * - subtitle-specta: specta mode desktop (next to subtitle, fixed centered)
- * - subtitle-specta-mobile: specta mode mobile (in line with subtitle)
+ * Specta mode mobile returns null (nav hidden).
  */
-export type StoryNavPlacement = 'below-title' | 'over-image' | 'subtitle-specta' | 'subtitle-specta-mobile';
-declare const StoryViewerPanel: React.ForwardRefExoticComponent<IStoryViewerPanelProps & React.RefAttributes<IStoryViewerPanelHandle>>;
+export type StoryNavPlacement = 'below-title' | 'over-image' | 'subtitle-specta';
+/**
+ * Story viewer (presentational). Receives story state and callbacks from parent.
+ * Desktop scroll/sentinel/imperative handle live in SpectaDesktopView.
+ */
+declare function StoryViewerPanel({ model, isSpecta, isMobile, className, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, setIndex, }: IStoryViewerPanelProps): React.JSX.Element;
+declare namespace StoryViewerPanel {
+    var displayName: string;
+}
 export default StoryViewerPanel;