@jupytergis/base 0.10.1 → 0.12.0

package/lib/panelview/leftpanel.js

@@ -1,29 +1,109 @@
 import * as React from 'react';
 import { LayersBodyComponent } from './components/layers';
+import FilterComponent from './filter-panel/Filter';
 import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
 import StacPanel from '../stacBrowser/components/StacPanel';
-import FilterComponent from './components/filter-panel/Filter';
 export const LeftPanel = (props) => {
+    var _a;
     const [settings, setSettings] = React.useState(props.model.jgisSettings);
+    const [options, setOptions] = React.useState(props.model.getOptions());
+    const storyMapPresentationMode = (_a = options.storyMapPresentationMode) !== null && _a !== void 0 ? _a : false;
+    const [layerTree, setLayerTree] = React.useState(props.model.getLayerTree());
     React.useEffect(() => {
         const onSettingsChanged = () => {
             setSettings(Object.assign({}, props.model.jgisSettings));
         };
+        const onOptionsChanged = () => {
+            setOptions(Object.assign({}, props.model.getOptions()));
+        };
+        const updateLayerTree = () => {
+            setLayerTree(props.model.getLayerTree() || []);
+        };
         props.model.settingsChanged.connect(onSettingsChanged);
+        props.model.sharedOptionsChanged.connect(onOptionsChanged);
+        props.model.sharedModel.layersChanged.connect(updateLayerTree);
+        props.model.sharedModel.layerTreeChanged.connect(updateLayerTree);
+        updateLayerTree();
         return () => {
             props.model.settingsChanged.disconnect(onSettingsChanged);
+            props.model.sharedOptionsChanged.disconnect(onOptionsChanged);
+            props.model.sharedModel.layersChanged.disconnect(updateLayerTree);
+            props.model.sharedModel.layerTreeChanged.disconnect(updateLayerTree);
         };
     }, [props.model]);
+    // Since story segments are technically layers they are stored in the layer tree, so we separate them
+    // from regular layers. Process the tree once to build both filtered and story segment trees.
+    const { filteredLayerTree, storySegmentLayerTree } = React.useMemo(() => {
+        const filtered = [];
+        const storySegments = [];
+        const processLayer = (layer) => {
+            if (typeof layer === 'string') {
+                const layerData = props.model.getLayer(layer);
+                const isStorySegment = (layerData === null || layerData === void 0 ? void 0 : layerData.type) === 'StorySegmentLayer';
+                return {
+                    filtered: isStorySegment ? null : layer,
+                    storySegment: isStorySegment ? layer : null,
+                };
+            }
+            // For layer groups, recursively process their layers
+            const filteredGroupLayers = [];
+            const storySegmentGroupLayers = [];
+            for (const groupLayer of layer.layers) {
+                const result = processLayer(groupLayer);
+                if (result.filtered !== null) {
+                    filteredGroupLayers.push(result.filtered);
+                }
+                if (result.storySegment !== null) {
+                    storySegmentGroupLayers.push(result.storySegment);
+                }
+            }
+            return {
+                filtered: filteredGroupLayers.length > 0
+                    ? Object.assign(Object.assign({}, layer), { layers: filteredGroupLayers }) : null,
+                storySegment: storySegmentGroupLayers.length > 0
+                    ? Object.assign(Object.assign({}, layer), { layers: storySegmentGroupLayers }) : null,
+            };
+        };
+        for (const layer of layerTree) {
+            const result = processLayer(layer);
+            if (result.filtered !== null) {
+                filtered.push(result.filtered);
+            }
+            if (result.storySegment !== null) {
+                storySegments.push(result.storySegment);
+            }
+        }
+        // Reverse filteredLayerTree before returning
+        filtered.reverse();
+        return {
+            filteredLayerTree: filtered,
+            storySegmentLayerTree: storySegments,
+        };
+    }, [layerTree]);
+    // Updates story segments array based on layer tree array
+    React.useEffect(() => {
+        const { storyId, story } = props.model.getSelectedStory();
+        if (!story) {
+            return;
+        }
+        props.model.sharedModel.updateStoryMap(storyId, Object.assign(Object.assign({}, story), { storySegments: storySegmentLayerTree }));
+    }, [storySegmentLayerTree]);
     const allLeftTabsDisabled = settings.layersDisabled &&
         settings.stacBrowserDisabled &&
-        settings.filtersDisabled;
+        settings.filtersDisabled &&
+        settings.storyMapsDisabled;
     const leftPanelVisible = !settings.leftPanelDisabled && !allLeftTabsDisabled;
     const tabInfo = [
         !settings.layersDisabled ? { name: 'layers', title: 'Layers' } : false,
-        !settings.stacBrowserDisabled
+        !settings.stacBrowserDisabled && !storyMapPresentationMode
             ? { name: 'stac', title: 'Stac Browser' }
             : false,
-        !settings.filtersDisabled ? { name: 'filters', title: 'Filters' } : false,
+        !settings.filtersDisabled && !storyMapPresentationMode
+            ? { name: 'filters', title: 'Filters' }
+            : false,
+        !settings.storyMapsDisabled
+            ? { name: 'segments', title: 'Segments' }
+            : false,
     ].filter(Boolean);
     const [curTab, setCurTab] = React.useState(tabInfo.length > 0 ? tabInfo[0].name : undefined);
     return (React.createElement("div", { className: "jgis-left-panel-container", style: { display: leftPanelVisible ? 'block' : 'none' } },
@@ -37,9 +117,11 @@ export const LeftPanel = (props) => {
                     }
                 } }, tab.title)))),
             !settings.layersDisabled && (React.createElement(TabsContent, { value: "layers", className: "jgis-panel-tab-content jp-gis-layerPanel" },
-                React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state }))),
-            !settings.stacBrowserDisabled && (React.createElement(TabsContent, { value: "stac", className: "jgis-panel-tab-content" },
+                React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: filteredLayerTree }))),
+            !settings.stacBrowserDisabled && (React.createElement(TabsContent, { value: "stac", className: "jgis-panel-tab-content jgis-panel-tab-content-stac-panel" },
                 React.createElement(StacPanel, { model: props.model }))),
             !settings.filtersDisabled && (React.createElement(TabsContent, { value: "filters", className: "jgis-panel-tab-content" },
-                React.createElement(FilterComponent, { model: props.model }))))));
+                React.createElement(FilterComponent, { model: props.model }))),
+            !settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "segments", className: "jgis-panel-tab-content" },
+                React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: storySegmentLayerTree }))))));
 };

package/lib/panelview/rightpanel.d.ts

@@ -1,9 +1,11 @@
 import { IAnnotationModel, IJGISFormSchemaRegistry, IJupyterGISModel } from '@jupytergis/schema';
+import { CommandRegistry } from '@lumino/commands';
 import * as React from 'react';
 interface IRightPanelProps {
     formSchemaRegistry: IJGISFormSchemaRegistry;
     annotationModel: IAnnotationModel;
     model: IJupyterGISModel;
+    commands: CommandRegistry;
 }
 export declare const RightPanel: React.FC<IRightPanelProps>;
 export {};

package/lib/panelview/rightpanel.js

@@ -1,14 +1,34 @@
 import * as React from 'react';
 import { AnnotationsPanel } from './annotationPanel';
-import { IdentifyPanelComponent } from './components/identify-panel/IdentifyPanel';
+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 { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
 export const RightPanel = props => {
+    var _a;
+    const [editorMode, setEditorMode] = React.useState(true);
     const [settings, setSettings] = React.useState(props.model.jgisSettings);
+    const [storyMapPresentationMode, setStoryMapPresentationMode] = React.useState((_a = props.model.getOptions().storyMapPresentationMode) !== null && _a !== void 0 ? _a : false);
+    // Only show editor when not in presentation mode and editorMode is true
+    const showEditor = !storyMapPresentationMode && editorMode;
+    // Tab title: "Story Map" in presentation mode, otherwise based on editorMode
+    const storyPanelTitle = storyMapPresentationMode
+        ? 'Story Map'
+        : editorMode
+            ? 'Story Editor'
+            : 'Story Map';
     const tabInfo = [
-        !settings.objectPropertiesDisabled
+        !settings.objectPropertiesDisabled && !storyMapPresentationMode
             ? { name: 'objectProperties', title: 'Object Properties' }
             : false,
+        !settings.storyMapsDisabled
+            ? {
+                name: 'storyPanel',
+                title: storyPanelTitle,
+            }
+            : false,
         !settings.annotationsDisabled
             ? { name: 'annotations', title: 'Annotations' }
             : false,
@@ -16,11 +36,20 @@ export const RightPanel = props => {
             ? { name: 'identifyPanel', title: 'Identified Features' }
             : false,
     ].filter(Boolean);
-    const [curTab, setCurTab] = React.useState(tabInfo.length > 0 ? tabInfo[0].name : undefined);
+    const [curTab, setCurTab] = React.useState(() => {
+        if (storyMapPresentationMode) {
+            return 'storyPanel';
+        }
+        return tabInfo.length > 0 ? tabInfo[0].name : '';
+    });
     React.useEffect(() => {
         const onSettingsChanged = () => {
             setSettings(Object.assign({}, props.model.jgisSettings));
         };
+        const onOptionsChanged = () => {
+            const { storyMapPresentationMode } = props.model.getOptions();
+            setStoryMapPresentationMode(storyMapPresentationMode !== null && storyMapPresentationMode !== void 0 ? storyMapPresentationMode : false);
+        };
         let currentlyIdentifiedFeatures = undefined;
         const onAwerenessChanged = (_, clients) => {
             var _a;
@@ -34,9 +63,11 @@ export const RightPanel = props => {
             }
         };
         props.model.settingsChanged.connect(onSettingsChanged);
+        props.model.sharedOptionsChanged.connect(onOptionsChanged);
         props.model.clientStateChanged.connect(onAwerenessChanged);
         return () => {
             props.model.settingsChanged.disconnect(onSettingsChanged);
+            props.model.sharedOptionsChanged.disconnect(onOptionsChanged);
             props.model.clientStateChanged.disconnect(onAwerenessChanged);
         };
     }, [props.model]);
@@ -45,9 +76,12 @@ export const RightPanel = props => {
         settings.identifyDisabled;
     const rightPanelVisible = !settings.rightPanelDisabled && !allRightTabsDisabled;
     const [selectedObjectProperties, setSelectedObjectProperties] = React.useState(undefined);
+    const toggleEditor = () => {
+        setEditorMode(!editorMode);
+    };
     return (React.createElement("div", { className: "jgis-right-panel-container", style: { display: rightPanelVisible ? 'block' : 'none' } },
         React.createElement(PanelTabs, { className: "jgis-panel-tabs", curTab: curTab },
-            React.createElement(TabsList, null, tabInfo.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: tab.name, value: tab.name, onClick: () => {
+            React.createElement(TabsList, null, tabInfo.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: `${tab.name}-${tab.title}`, value: tab.name, onClick: () => {
                     if (curTab !== tab.name) {
                         setCurTab(tab.name);
                     }
@@ -57,6 +91,9 @@ export const RightPanel = props => {
                 } }, tab.title)))),
             !settings.objectPropertiesDisabled && (React.createElement(TabsContent, { value: "objectProperties", className: "jgis-panel-tab-content" },
                 React.createElement(ObjectPropertiesReact, { setSelectedObject: setSelectedObjectProperties, selectedObject: selectedObjectProperties, formSchemaRegistry: props.formSchemaRegistry, model: props.model }))),
+            !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 })))),
             !settings.annotationsDisabled && (React.createElement(TabsContent, { value: "annotations", className: "jgis-panel-tab-content" },
                 React.createElement(AnnotationsPanel, { annotationModel: props.annotationModel, jgisModel: props.model }))),
             !settings.identifyDisabled && (React.createElement(TabsContent, { value: "identifyPanel", className: "jgis-panel-tab-content" },

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface IPreviewModeSwitchProps {
+    checked: boolean;
+    onCheckedChange: () => void;
+}
+export declare function PreviewModeSwitch({ checked, onCheckedChange, }: IPreviewModeSwitchProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Switch } from "../../shared/components/Switch";
+export function PreviewModeSwitch({ checked, onCheckedChange, }) {
+    return (React.createElement("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+            padding: '1rem',
+            paddingBottom: '0',
+        } },
+        React.createElement("label", { htmlFor: "preview-mode-switch", style: { fontSize: '0.875rem' } }, "Preview Mode"),
+        React.createElement(Switch, { id: "preview-mode-switch", checked: checked, onCheckedChange: onCheckedChange })));
+}

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

@@ -0,0 +1,9 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import { CommandRegistry } from '@lumino/commands';
+import React from 'react';
+interface IStoryPanelProps {
+    model: IJupyterGISModel;
+    commands: CommandRegistry;
+}
+export declare function StoryEditorPanel({ model, commands }: IStoryPanelProps): React.JSX.Element;
+export default StoryEditorPanel;

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

@@ -0,0 +1,34 @@
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import jgisSchema from '@jupytergis/schema/lib/schema/project/jgis.json';
+import React, { useMemo } from 'react';
+import { CommandIDs } from "../../constants";
+import { StoryEditorPropertiesForm } from "../../formbuilder/objectform/StoryEditorForm";
+import { Button } from "../../shared/components/Button";
+import { deepCopy } from "../../tools";
+const storyMapSchema = deepCopy(jgisSchema.definitions.jGISStoryMap);
+const AddStorySegmentButton = ({ model, commands }) => (React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
+    React.createElement(Button, { onClick: () => commands.execute(CommandIDs.addStorySegment) },
+        React.createElement(FontAwesomeIcon, { icon: faLink }),
+        " Add Story Segment")));
+export function StoryEditorPanel({ model, commands }) {
+    const { storyId, story } = useMemo(() => {
+        return model.getSelectedStory();
+    }, [model, model.sharedModel.stories]);
+    const syncStoryData = (properties) => {
+        var _a;
+        // Preserve storySegments when updating, since the form removes it from the UI
+        const updatedStory = Object.assign(Object.assign(Object.assign({}, story), properties), { storySegments: (_a = story === null || story === void 0 ? void 0 : story.storySegments) !== null && _a !== void 0 ? _a : [] });
+        model.sharedModel.updateStoryMap(storyId, updatedStory);
+    };
+    if (!story) {
+        return (React.createElement("div", { style: { padding: '1rem' } },
+            React.createElement("p", null, "No Story Map available."),
+            React.createElement("p", null, "Add a Story Segment from the Add Layer menu. A segment captures the current map view. You can add markdown text and an image to each segment to tell your story."),
+            React.createElement(AddStorySegmentButton, { model: model, commands: commands })));
+    }
+    return (React.createElement("div", { className: "jgis-story-editor-panel" },
+        React.createElement(StoryEditorPropertiesForm, { formContext: "update", sourceData: story, model: model, schema: storyMapSchema, syncData: syncStoryData, filePath: model.filePath }),
+        React.createElement(AddStorySegmentButton, { model: model, commands: commands })));
+}
+export default StoryEditorPanel;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface IStoryNavBarProps {
+    onPrev: () => void;
+    onNext: () => void;
+    hasPrev: boolean;
+    hasNext: boolean;
+    isSpecta: boolean;
+}
+declare function StoryNavBar({ onPrev, onNext, hasPrev, hasNext, isSpecta, }: IStoryNavBarProps): React.JSX.Element;
+export default StoryNavBar;

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

@@ -0,0 +1,11 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import React from 'react';
+import { Button } from "../../shared/components/Button";
+function StoryNavBar({ onPrev, onNext, hasPrev, hasNext, isSpecta, }) {
+    return (React.createElement("div", { className: `jgis-story-navbar ${isSpecta ? 'jgis-story-navbar-specta-mod' : ''}` },
+        React.createElement(Button, { onClick: onPrev, disabled: !hasPrev, "aria-label": "Previous slide" },
+            React.createElement(ChevronLeft, null)),
+        React.createElement(Button, { onClick: onNext, disabled: !hasNext, "aria-label": "Next slide" },
+            React.createElement(ChevronRight, null))));
+}
+export default StoryNavBar;

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

@@ -0,0 +1,13 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+interface IStoryViewerPanelProps {
+    model: IJupyterGISModel;
+    isSpecta: boolean;
+}
+export interface IStoryViewerPanelHandle {
+    handlePrev: () => void;
+    handleNext: () => void;
+    canNavigate: boolean;
+}
+declare const StoryViewerPanel: React.ForwardRefExoticComponent<IStoryViewerPanelProps & React.RefAttributes<IStoryViewerPanelHandle>>;
+export default StoryViewerPanel;

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

@@ -0,0 +1,179 @@
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import StoryContentSection from './components/StoryContentSection';
+import StoryImageSection from './components/StoryImageSection';
+import StorySubtitleSection from './components/StorySubtitleSection';
+import StoryTitleSection from './components/StoryTitleSection';
+const StoryViewerPanel = forwardRef(({ model, isSpecta }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const [currentIndexDisplayed, setCurrentIndexDisplayed] = useState(0);
+    const [storyData, setStoryData] = useState((_a = model.getSelectedStory().story) !== null && _a !== void 0 ? _a : null);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const panelRef = useRef(null);
+    // Derive story segments from story data
+    const storySegments = useMemo(() => {
+        if (!(storyData === null || storyData === void 0 ? void 0 : storyData.storySegments)) {
+            return [];
+        }
+        return storyData.storySegments
+            .map(storySegmentId => model.getLayer(storySegmentId))
+            .filter((layer) => layer !== undefined);
+    }, [storyData, model]);
+    // Derive current story segment from story segments and currentIndexDisplayed
+    const currentStorySegment = useMemo(() => {
+        return storySegments[currentIndexDisplayed];
+    }, [storySegments, currentIndexDisplayed]);
+    // Derive active slide and layer name from current story segment
+    const activeSlide = useMemo(() => {
+        return currentStorySegment === null || currentStorySegment === void 0 ? void 0 : currentStorySegment.parameters;
+    }, [currentStorySegment]);
+    const layerName = useMemo(() => {
+        var _a;
+        return (_a = currentStorySegment === null || currentStorySegment === void 0 ? void 0 : currentStorySegment.name) !== null && _a !== void 0 ? _a : '';
+    }, [currentStorySegment]);
+    // Derive story segment ID for zooming
+    const currentStorySegmentId = useMemo(() => {
+        var _a;
+        return (_a = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) === null || _a === void 0 ? void 0 : _a[currentIndexDisplayed];
+    }, [storyData, currentIndexDisplayed]);
+    const zoomToCurrentLayer = () => {
+        if (currentStorySegmentId) {
+            model.centerOnPosition(currentStorySegmentId);
+        }
+    };
+    const setSelectedLayerByIndex = useCallback((index) => {
+        var _a;
+        const storySegmentId = (_a = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) === null || _a === void 0 ? void 0 : _a[index];
+        if (storySegmentId) {
+            model.selected = {
+                [storySegmentId]: {
+                    type: 'layer',
+                },
+            };
+        }
+    }, [storyData, model]);
+    useEffect(() => {
+        const updateStory = () => {
+            const { story } = model.getSelectedStory();
+            setStoryData(story !== null && story !== void 0 ? story : null);
+            // Reset to first slide when story changes
+            setCurrentIndexDisplayed(0);
+        };
+        updateStory();
+        model.sharedModel.storyMapsChanged.connect(updateStory);
+        return () => {
+            model.sharedModel.storyMapsChanged.disconnect(updateStory);
+        };
+    }, [model]);
+    // Prefetch image when slide changes
+    useEffect(() => {
+        var _a;
+        const imageUrl = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _a === void 0 ? void 0 : _a.image;
+        if (!imageUrl) {
+            setImageLoaded(false);
+            return;
+        }
+        // Reset state
+        setImageLoaded(false);
+        // Preload the image
+        const img = new Image();
+        img.onload = () => {
+            setImageLoaded(true);
+        };
+        img.onerror = () => {
+            setImageLoaded(false);
+        };
+        img.src = imageUrl;
+        // Cleanup: abort loading if component unmounts or slide changes
+        return () => {
+            img.onload = null;
+            img.onerror = null;
+        };
+    }, [(_b = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _b === void 0 ? void 0 : _b.image]);
+    // Auto-zoom when slide changes
+    useEffect(() => {
+        if (currentStorySegmentId) {
+            zoomToCurrentLayer();
+        }
+    }, [currentStorySegmentId, model]);
+    // Set selected layer on initial render and when story data changes
+    useEffect(() => {
+        if ((storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) && currentIndexDisplayed >= 0) {
+            setSelectedLayerByIndex(currentIndexDisplayed);
+        }
+    }, [storyData, currentIndexDisplayed, setSelectedLayerByIndex]);
+    // Listen for layer selection changes in unguided mode
+    useEffect(() => {
+        // ! TODO this logic (getting a single selected layer) is also in the processing index.ts, move to tools
+        const handleSelectedStorySegmentChange = () => {
+            var _a, _b;
+            // This is just to update the displayed content
+            // So bail early if we don't need to do that
+            if (!storyData || storyData.storyType !== 'unguided') {
+                return;
+            }
+            const localState = model.sharedModel.awareness.getLocalState();
+            if (!localState || !((_a = localState['selected']) === null || _a === void 0 ? void 0 : _a.value)) {
+                return;
+            }
+            const selectedLayers = Object.keys(localState['selected'].value);
+            // Ensure only one layer is selected
+            if (selectedLayers.length !== 1) {
+                return;
+            }
+            const selectedLayerId = selectedLayers[0];
+            const selectedLayer = model.getLayer(selectedLayerId);
+            if (!selectedLayer || selectedLayer.type !== 'StorySegmentLayer') {
+                return;
+            }
+            const index = (_b = storyData.storySegments) === null || _b === void 0 ? void 0 : _b.indexOf(selectedLayerId);
+            if (index === undefined || index === -1) {
+                return;
+            }
+            setCurrentIndexDisplayed(index);
+        };
+        model.sharedModel.awareness.on('change', handleSelectedStorySegmentChange);
+        return () => {
+            model.sharedModel.awareness.off('change', handleSelectedStorySegmentChange);
+        };
+    }, [model, storyData]);
+    const handlePrev = useCallback(() => {
+        if (currentIndexDisplayed > 0) {
+            const newIndex = currentIndexDisplayed - 1;
+            setCurrentIndexDisplayed(newIndex);
+        }
+    }, [currentIndexDisplayed]);
+    const handleNext = useCallback(() => {
+        if (currentIndexDisplayed < storySegments.length - 1) {
+            const newIndex = currentIndexDisplayed + 1;
+            setCurrentIndexDisplayed(newIndex);
+        }
+    }, [currentIndexDisplayed, storySegments.length]);
+    // Expose methods via ref for parent component to use
+    useImperativeHandle(ref, () => ({
+        handlePrev,
+        handleNext,
+        canNavigate: isSpecta,
+    }), [handlePrev, handleNext, storyData, isSpecta]);
+    if (!storyData || ((_c = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) === null || _c === void 0 ? void 0 : _c.length) === 0) {
+        return (React.createElement("div", { style: { padding: '1rem' } },
+            React.createElement("p", null, "No Segments available. Add one using the Add Layer menu.")));
+    }
+    const navProps = {
+        onPrev: handlePrev,
+        onNext: handleNext,
+        hasPrev: currentIndexDisplayed > 0,
+        hasNext: currentIndexDisplayed < storySegments.length - 1,
+    };
+    // Get transition time from current segment, default to 0.3s
+    const transitionTime = (_e = (_d = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.transition) === null || _d === void 0 ? void 0 : _d.time) !== null && _e !== void 0 ? _e : 0.3;
+    return (React.createElement("div", { ref: panelRef, className: `jgis-story-viewer-panel ${isSpecta ? 'jgis-story-viewer-panel-specta-mod' : ''}` },
+        React.createElement("div", { key: currentIndexDisplayed, className: "jgis-story-segment-container", style: {
+                animationDuration: `${transitionTime}s`,
+            } },
+            React.createElement("h1", { className: "jgis-story-viewer-title" }, layerName !== null && layerName !== void 0 ? layerName : `Slide ${currentIndexDisplayed + 1}`),
+            ((_f = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _f === void 0 ? void 0 : _f.image) && imageLoaded ? (React.createElement(StoryImageSection, Object.assign({ imageUrl: activeSlide.content.image, imageLoaded: imageLoaded, layerName: layerName !== null && layerName !== void 0 ? layerName : '', slideNumber: currentIndexDisplayed, isSpecta: isSpecta, storyType: (_g = storyData.storyType) !== null && _g !== void 0 ? _g : 'guided' }, navProps))) : (React.createElement(StoryTitleSection, Object.assign({ title: (_h = storyData.title) !== null && _h !== void 0 ? _h : '', isSpecta: isSpecta, storyType: (_j = storyData.storyType) !== null && _j !== void 0 ? _j : 'guided' }, navProps))),
+            React.createElement(StorySubtitleSection, Object.assign({ title: (_l = (_k = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : '', isSpecta: isSpecta }, navProps)),
+            React.createElement(StoryContentSection, { markdown: (_o = (_m = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _m === void 0 ? void 0 : _m.markdown) !== null && _o !== void 0 ? _o : '' }))));
+});
+StoryViewerPanel.displayName = 'StoryViewerPanel';
+export default StoryViewerPanel;

package/lib/panelview/story-maps/components/StoryContentSection.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface IStoryContentProps {
+    markdown: string;
+}
+declare function StoryContentSection({ markdown }: IStoryContentProps): React.JSX.Element | null;
+export default StoryContentSection;

package/lib/panelview/story-maps/components/StoryContentSection.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Markdown from 'react-markdown';
+function StoryContentSection({ markdown }) {
+    if (!markdown) {
+        return null;
+    }
+    return (React.createElement("div", { className: "jgis-story-viewer-content" },
+        React.createElement(Markdown, null, markdown)));
+}
+export default StoryContentSection;

package/lib/panelview/story-maps/components/StoryImageSection.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface IStoryImageSectionProps {
+    imageUrl: string;
+    imageLoaded: boolean;
+    layerName: string;
+    slideNumber: number;
+    isSpecta: boolean;
+    storyType: string;
+    onPrev: () => void;
+    onNext: () => void;
+    hasPrev: boolean;
+    hasNext: boolean;
+}
+declare function StoryImageSection({ imageUrl, imageLoaded, layerName, slideNumber, isSpecta, storyType, onPrev, onNext, hasPrev, hasNext, }: IStoryImageSectionProps): React.JSX.Element | null;
+export default StoryImageSection;

package/lib/panelview/story-maps/components/StoryImageSection.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import StoryNavBar from '../StoryNavBar';
+function StoryImageSection({ imageUrl, imageLoaded, layerName, slideNumber, isSpecta, storyType, onPrev, onNext, hasPrev, hasNext, }) {
+    if (!imageLoaded) {
+        return null;
+    }
+    return (React.createElement("div", { className: "jgis-story-viewer-image-section" },
+        React.createElement("div", { className: "jgis-story-viewer-image-container" },
+            React.createElement("img", { src: imageUrl, alt: "Story map image", className: "jgis-story-viewer-image" }),
+            !isSpecta && storyType === 'guided' && (React.createElement("div", { className: "jgis-story-viewer-nav-container" },
+                React.createElement(StoryNavBar, { onPrev: onPrev, onNext: onNext, hasPrev: hasPrev, hasNext: hasNext, isSpecta: isSpecta }))))));
+}
+export default StoryImageSection;

package/lib/panelview/story-maps/components/StorySubtitleSection.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface IStorySubtitleSectionProps {
+    title: string;
+    isSpecta: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+    hasPrev: boolean;
+    hasNext: boolean;
+}
+declare function StorySubtitleSection({ title, isSpecta, onPrev, onNext, hasPrev, hasNext, }: IStorySubtitleSectionProps): React.JSX.Element;
+export default StorySubtitleSection;

package/lib/panelview/story-maps/components/StorySubtitleSection.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import StoryNavBar from '../StoryNavBar';
+function StorySubtitleSection({ title, isSpecta, onPrev, onNext, hasPrev, hasNext, }) {
+    return (React.createElement("div", { className: "jgis-story-viewer-subtitle-container" },
+        React.createElement("h2", { className: "jgis-story-viewer-subtitle" }, title || 'Slide Title'),
+        isSpecta && (React.createElement("div", { className: "jgis-story-viewer-nav-container-specta-mod" },
+            React.createElement(StoryNavBar, { onPrev: onPrev, onNext: onNext, hasPrev: hasPrev, hasNext: hasNext, isSpecta: isSpecta })))));
+}
+export default StorySubtitleSection;

package/lib/panelview/story-maps/components/StoryTitleSection.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface IStoryTitleSectionProps {
+    title: string;
+    isSpecta: boolean;
+    storyType: string;
+    onPrev: () => void;
+    onNext: () => void;
+    hasPrev: boolean;
+    hasNext: boolean;
+}
+declare function StoryTitleSection({ title, isSpecta, storyType, onPrev, onNext, hasPrev, hasNext, }: IStoryTitleSectionProps): React.JSX.Element;
+export default StoryTitleSection;

package/lib/panelview/story-maps/components/StoryTitleSection.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import StoryNavBar from '../StoryNavBar';
+function StoryTitleSection({ title, isSpecta, storyType, onPrev, onNext, hasPrev, hasNext, }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("h1", { className: "jgis-story-viewer-title" }, title),
+        !isSpecta && storyType === 'guided' && (React.createElement(StoryNavBar, { onPrev: onPrev, onNext: onNext, hasPrev: hasPrev, hasNext: hasNext, isSpecta: isSpecta }))));
+}
+export default StoryTitleSection;

package/lib/shared/components/Calendar.d.ts

@@ -7,7 +7,7 @@ export type CalendarProps = DayPickerProps & {
      */
     yearRange?: number;
     /**
-     * Wether to show the year switcher in the caption.
+     * Whether to show the year switcher in the caption.
      * @default true
      */
     showYearSwitcher?: boolean;