@jupytergis/base 0.13.3 → 0.14.0

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

@@ -1,9 +1,7 @@
-import { UUID } from '@lumino/coreutils';
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
-import { cn } from "../../shared/components/utils";
-import StoryNavBar from './StoryNavBar';
+import React, { useEffect, useState } from 'react';
 import StoryContentSection from './components/StoryContentSection';
 import StoryImageSection from './components/StoryImageSection';
+import StoryNavBar from './components/StoryNavBar';
 import StorySubtitleSection from './components/StorySubtitleSection';
 import StoryTitleSection from './components/StoryTitleSection';
 /**
@@ -11,122 +9,20 @@ import StoryTitleSection from './components/StoryTitleSection';
  */
 function getStoryNavPlacement(isSpecta, hasImage, storyType, isMobile) {
     if (isSpecta) {
-        return isMobile ? 'subtitle-specta-mobile' : 'subtitle-specta';
+        return isMobile ? null : 'subtitle-specta';
     }
     if (storyType !== 'guided') {
         return null;
     }
     return hasImage ? 'over-image' : 'below-title';
 }
-const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, className, addLayer, removeLayer, onSegmentTransitionEnd, }, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    const [currentIndexDisplayed, setCurrentIndexDisplayed] = useState(() => model.getCurrentSegmentIndex());
-    const [storyData, setStoryData] = useState((_a = model.getSelectedStory().story) !== null && _a !== void 0 ? _a : null);
+/**
+ * Story viewer (presentational). Receives story state and callbacks from parent.
+ * Desktop scroll/sentinel/imperative handle live in SpectaDesktopView.
+ */
+function StoryViewerPanel({ model, isSpecta, isMobile = false, className, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, setIndex, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const [imageLoaded, setImageLoaded] = useState(false);
-    const panelRef = useRef(null);
-    const segmentContainerRef = useRef(null);
-    const topSentinelRef = useRef(null);
-    const bottomSentinelRef = useRef(null);
-    const atTopRef = useRef(false);
-    const atBottomRef = useRef(false);
-    const setIndex = useCallback((index) => {
-        model.setCurrentSegmentIndex(index);
-        setCurrentIndexDisplayed(index);
-    }, [model]);
-    /** Layers affected by layer override
-     * We want to remove added layers (ie Heatmap)
-     * and Restore the original symbology for modified layers
-     */
-    const overrideLayerEntriesRef = useRef([]);
-    const clearOverrideLayers = useCallback(() => {
-        overrideLayerEntriesRef.current.forEach(({ layerId, action }) => {
-            if (action === 'remove') {
-                removeLayer === null || removeLayer === void 0 ? void 0 : removeLayer(layerId);
-            }
-            else {
-                const layer = model.getLayer(layerId);
-                if (layer) {
-                    model.triggerLayerUpdate(layerId, layer);
-                }
-            }
-        });
-        overrideLayerEntriesRef.current = [];
-    }, [model]);
-    // 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 hasPrev = currentIndexDisplayed > 0;
-    const hasNext = currentIndexDisplayed < storySegments.length - 1;
-    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]);
-    // On unmount: remove override layers and restore layer symbology
-    useEffect(() => {
-        return () => {
-            var _a;
-            clearOverrideLayers();
-            (_a = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) === null || _a === void 0 ? void 0 : _a.forEach(segmentId => {
-                var _a;
-                const segment = model.getLayer(segmentId);
-                const overrides = (_a = segment === null || segment === void 0 ? void 0 : segment.parameters) === null || _a === void 0 ? void 0 : _a.layerOverride;
-                if (Array.isArray(overrides)) {
-                    overrides.forEach((override) => {
-                        const targetLayerId = override.targetLayer;
-                        const targetLayer = model.getLayer(targetLayerId);
-                        targetLayer &&
-                            model.triggerLayerUpdate(targetLayerId, targetLayer);
-                    });
-                }
-            });
-        };
-    }, [storyData, model, clearOverrideLayers]);
-    useEffect(() => {
-        const updateStory = () => {
-            var _a;
-            clearOverrideLayers();
-            const { story } = model.getSelectedStory();
-            setStoryData(story !== null && story !== void 0 ? story : null);
-            setIndex((_a = model.getCurrentSegmentIndex()) !== null && _a !== void 0 ? _a : 0);
-        };
-        updateStory();
-        model.sharedModel.storyMapsChanged.connect(updateStory);
-        return () => {
-            model.sharedModel.storyMapsChanged.disconnect(updateStory);
-        };
-    }, [model, setIndex, clearOverrideLayers]);
     // Prefetch image when slide changes
     useEffect(() => {
         var _a;
@@ -151,33 +47,8 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, classN
             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 and apply symbology when segment changes; remove previous segment's override layers first.
-    useEffect(() => {
-        if (!(storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) || currentIndexDisplayed < 0) {
-            return;
-        }
-        clearOverrideLayers();
-        setSelectedLayerByIndex(currentIndexDisplayed);
-        overrideSymbology(currentIndexDisplayed);
-    }, [
-        storyData,
-        currentIndexDisplayed,
-        setSelectedLayerByIndex,
-        clearOverrideLayers,
-    ]);
-    // 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]);
+    }, [(_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _a === void 0 ? void 0 : _a.image]);
+    // ! TODO come back for this
     // 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
@@ -214,71 +85,7 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, classN
             model.sharedModel.awareness.off('change', handleSelectedStorySegmentChange);
         };
     }, [model, storyData, setIndex]);
-    // Apply layer overrides for the segment at the given index
-    const overrideSymbology = (index) => {
-        var _a;
-        if (index < 0 || !storySegments[index]) {
-            return;
-        }
-        const segment = storySegments[index];
-        const layerOverrides = (_a = segment.parameters) === null || _a === void 0 ? void 0 : _a.layerOverride;
-        if (!Array.isArray(layerOverrides)) {
-            return;
-        }
-        // Apply all layer overrides for this segment
-        layerOverrides.forEach(override => {
-            const { color, opacity, symbologyState, targetLayer: targetLayerId, visible, } = override;
-            if (!targetLayerId) {
-                return;
-            }
-            overrideLayerEntriesRef.current.push({
-                layerId: targetLayerId,
-                action: 'restore',
-            });
-            const targetLayer = model.getLayer(targetLayerId);
-            if (targetLayer === null || targetLayer === void 0 ? void 0 : targetLayer.parameters) {
-                if (symbologyState !== undefined) {
-                    targetLayer.parameters.symbologyState = symbologyState;
-                }
-                if (color !== undefined) {
-                    targetLayer.parameters.color = color;
-                }
-                if (opacity !== undefined) {
-                    targetLayer.parameters.opacity = opacity;
-                }
-                if (visible !== undefined) {
-                    targetLayer.visible = visible;
-                }
-                // Heatmaps are actually a different layer, not just symbology
-                // so they need special handling
-                if ((symbologyState === null || symbologyState === void 0 ? void 0 : symbologyState.renderType) === 'Heatmap') {
-                    targetLayer.type = 'HeatmapLayer';
-                    if (addLayer) {
-                        const newId = UUID.uuid4();
-                        addLayer(newId, targetLayer, 100);
-                        overrideLayerEntriesRef.current.push({
-                            layerId: newId,
-                            action: 'remove',
-                        });
-                    }
-                }
-                else {
-                    model.triggerLayerUpdate(targetLayerId, targetLayer);
-                }
-            }
-        });
-    };
-    const handlePrev = useCallback(() => {
-        if (hasPrev) {
-            setIndex(currentIndexDisplayed - 1);
-        }
-    }, [currentIndexDisplayed, setIndex]);
-    const handleNext = useCallback(() => {
-        if (hasNext) {
-            setIndex(currentIndexDisplayed + 1);
-        }
-    }, [currentIndexDisplayed, storySegments.length, setIndex]);
-    if (!storyData || ((_c = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) === null || _c === void 0 ? void 0 : _c.length) === 0) {
+    if (!storyData || ((_b = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) === null || _b === void 0 ? void 0 : _b.length) === 0) {
         return (React.createElement("div", { style: { padding: '1rem' } },
             React.createElement("p", null, "No Segments available. Add one using the Add Layer menu.")));
     }
@@ -288,75 +95,22 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, classN
         hasPrev,
         hasNext,
     };
-    // IntersectionObserver for at-top/at-bottom (avoids layout reads in scroll path)
-    useEffect(() => {
-        const root = panelRef.current;
-        const topEl = topSentinelRef.current;
-        const bottomEl = bottomSentinelRef.current;
-        if (!root || !topEl || !bottomEl) {
-            return;
-        }
-        const observer = new IntersectionObserver((entries) => {
-            for (const entry of entries) {
-                if (entry.target === topEl) {
-                    atTopRef.current = entry.isIntersecting;
-                }
-                else if (entry.target === bottomEl) {
-                    atBottomRef.current = entry.isIntersecting;
-                }
-            }
-        }, { root, threshold: 0, rootMargin: '0px' });
-        observer.observe(topEl);
-        observer.observe(bottomEl);
-        return () => observer.disconnect();
-    }, [currentIndexDisplayed]);
-    // Expose methods via ref for parent component to use
-    useImperativeHandle(ref, () => ({
-        handlePrev,
-        handleNext,
-        spectaMode: isSpecta,
-        hasPrev,
-        hasNext,
-        getAtTop: () => atTopRef.current,
-        getAtBottom: () => atBottomRef.current,
-        getScrollContainer: () => panelRef.current,
-    }), [handlePrev, handleNext, storyData, isSpecta, hasPrev, hasNext]);
-    const hasImage = !!(((_d = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _d === void 0 ? void 0 : _d.image) && imageLoaded);
-    const storyType = (_e = storyData.storyType) !== null && _e !== void 0 ? _e : 'guided';
+    const hasImage = !!(((_c = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _c === void 0 ? void 0 : _c.image) && imageLoaded);
+    const storyType = (_d = storyData.storyType) !== null && _d !== void 0 ? _d : 'guided';
     const navPlacement = getStoryNavPlacement(isSpecta, hasImage, storyType, isMobile);
     const navSlot = navPlacement !== null ? (React.createElement(StoryNavBar, Object.assign({ placement: navPlacement }, storyNavBarProps))) : null;
     // Get transition time from current segment, default to 0.3s
-    const transitionTime = (_g = (_f = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.transition) === null || _f === void 0 ? void 0 : _f.time) !== null && _g !== void 0 ? _g : 0.3;
-    // Notify parent when segment transition animation ends (e.g. for scroll-guard cleanup)
-    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);
-    }, [currentIndexDisplayed, onSegmentTransitionEnd]);
-    return (React.createElement("div", { ref: panelRef, className: cn('jgis-story-viewer-panel', className), id: "jgis-story-segment-panel" },
-        React.createElement("div", { ref: topSentinelRef, "aria-hidden": true, "data-story-scroll-sentinel": "top", style: { height: 1, minHeight: 1, pointerEvents: 'none' } }),
-        React.createElement("div", { ref: segmentContainerRef, key: currentIndexDisplayed, className: "jgis-story-segment-container", style: {
+    const transitionTime = (_f = (_e = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.transition) === null || _e === void 0 ? void 0 : _e.time) !== null && _f !== void 0 ? _f : 0.3;
+    return (React.createElement("div", { className: "jgis-story-viewer-panel" },
+        React.createElement("div", { ref: segmentContainerRef, key: currentIndex, className: "jgis-story-segment-container", style: {
                 animationDuration: `${transitionTime}s`,
             } },
             React.createElement("div", { id: "jgis-story-segment-header" },
-                React.createElement("h1", { className: "jgis-story-viewer-title" }, layerName !== null && layerName !== void 0 ? layerName : `Slide ${currentIndexDisplayed + 1}`),
-                ((_h = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _h === void 0 ? void 0 : _h.image) && imageLoaded ? (React.createElement(StoryImageSection, { imageUrl: activeSlide.content.image, imageLoaded: imageLoaded, layerName: layerName !== null && layerName !== void 0 ? layerName : '', slideNumber: currentIndexDisplayed, navSlot: navPlacement === 'over-image' ? navSlot : null })) : (React.createElement(StoryTitleSection, { title: (_j = storyData.title) !== null && _j !== void 0 ? _j : '', navSlot: navPlacement === 'below-title' ? navSlot : null })),
-                React.createElement(StorySubtitleSection, { 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 : '', navSlot: navPlacement === 'subtitle-specta' ||
-                        navPlacement === 'subtitle-specta-mobile'
-                        ? navSlot
-                        : null })),
+                React.createElement("h1", { className: "jgis-story-viewer-title" }, layerName !== null && layerName !== void 0 ? layerName : `Slide ${currentIndex + 1}`),
+                ((_g = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _g === void 0 ? void 0 : _g.image) && imageLoaded ? (React.createElement(StoryImageSection, { imageUrl: activeSlide.content.image, imageLoaded: imageLoaded, layerName: layerName !== null && layerName !== void 0 ? layerName : '', slideNumber: currentIndex, navSlot: navPlacement === 'over-image' ? navSlot : null })) : (React.createElement(StoryTitleSection, { title: (_h = storyData.title) !== null && _h !== void 0 ? _h : '', navSlot: navPlacement === 'below-title' ? navSlot : null })),
+                React.createElement(StorySubtitleSection, { title: (_k = (_j = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '', navSlot: navPlacement === 'subtitle-specta' ? navSlot : null })),
             React.createElement("div", { id: "jgis-story-segment-content" },
-                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 : '' }))),
-        React.createElement("div", { ref: bottomSentinelRef, "aria-hidden": true, "data-story-scroll-sentinel": "bottom", style: { height: 1, minHeight: 1, pointerEvents: 'none' } })));
-});
+                React.createElement(StoryContentSection, { markdown: (_m = (_l = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _l === void 0 ? void 0 : _l.markdown) !== null && _m !== void 0 ? _m : '' })))));
+}
 StoryViewerPanel.displayName = 'StoryViewerPanel';
 export default StoryViewerPanel;

package/lib/panelview/story-maps/{PreviewModeSwitch.js → components/PreviewModeSwitch.js}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Switch } from "../../shared/components/Switch";
+import { Switch } from "../../../shared/components/Switch";
 export function PreviewModeSwitch({ checked, onCheckedChange, }) {
     return (React.createElement("div", { style: {
             display: 'flex',

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

@@ -0,0 +1,21 @@
+import { IJGISStoryMap, IJupyterGISModel, IStorySegmentLayer } from '@jupytergis/schema';
+import { RefObject } from 'react';
+import { type IStoryViewerPanelHandle } from "../StoryViewerPanel";
+interface ISpectaDesktopViewProps {
+    model: IJupyterGISModel;
+    isSpecta: boolean;
+    containerRef: RefObject<HTMLDivElement>;
+    storyViewerPanelRef: RefObject<IStoryViewerPanelHandle>;
+    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 declare function SpectaDesktopView({ model, isSpecta, containerRef, storyViewerPanelRef, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, setIndex, }: ISpectaDesktopViewProps): JSX.Element;
+export {};

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

@@ -0,0 +1,49 @@
+import React, { useEffect, useImperativeHandle, useRef, } from 'react';
+import StoryViewerPanel from "../StoryViewerPanel";
+import SpectaPresentationProgressBar from "../../../statusbar/SpectaPresentationProgressBar";
+export function SpectaDesktopView({ model, isSpecta, containerRef, storyViewerPanelRef, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, setIndex, }) {
+    const scrollContainerRef = useRef(null);
+    const topSentinelRef = useRef(null);
+    const bottomSentinelRef = useRef(null);
+    const atTopRef = useRef(false);
+    const atBottomRef = useRef(false);
+    useEffect(() => {
+        const root = scrollContainerRef.current;
+        const topEl = topSentinelRef.current;
+        const bottomEl = bottomSentinelRef.current;
+        if (!root || !topEl || !bottomEl) {
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target === topEl) {
+                    atTopRef.current = entry.isIntersecting;
+                }
+                else if (entry.target === bottomEl) {
+                    atBottomRef.current = entry.isIntersecting;
+                }
+            }
+        }, { root, threshold: 0, rootMargin: '0px' });
+        observer.observe(topEl);
+        observer.observe(bottomEl);
+        return () => observer.disconnect();
+    }, [currentIndex]);
+    useImperativeHandle(storyViewerPanelRef, () => ({
+        handlePrev,
+        handleNext,
+        spectaMode: isSpecta,
+        hasPrev,
+        hasNext,
+        getAtTop: () => atTopRef.current,
+        getAtBottom: () => atBottomRef.current,
+        getScrollContainer: () => scrollContainerRef.current,
+    }), [handlePrev, handleNext, isSpecta, hasPrev, hasNext]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "jgis-specta-right-panel-container-mod jgis-right-panel-container" },
+            React.createElement("div", { ref: containerRef, className: "jgis-specta-story-panel-container" },
+                React.createElement("div", { ref: scrollContainerRef, className: "jgis-story-viewer-panel-specta-mod", id: "jgis-story-segment-panel" },
+                    React.createElement("div", { ref: topSentinelRef, "aria-hidden": true, "data-story-scroll-sentinel": "top", style: { height: 1, minHeight: 1, pointerEvents: 'none' } }),
+                    React.createElement(StoryViewerPanel, { model: model, isSpecta: isSpecta, className: "jgis-story-viewer-panel-specta-mod", segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext, setIndex: setIndex }),
+                    React.createElement("div", { ref: bottomSentinelRef, "aria-hidden": true, "data-story-scroll-sentinel": "bottom", style: { height: 1, minHeight: 1, pointerEvents: 'none' } })))),
+        React.createElement(SpectaPresentationProgressBar, { model: model })));
+}

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

@@ -0,0 +1,17 @@
+import { IJGISStoryMap, IJupyterGISModel, IStorySegmentLayer } from '@jupytergis/schema';
+import React, { RefObject } from 'react';
+interface ISpectaMobileViewProps {
+    model: IJupyterGISModel;
+    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 declare function SpectaMobileView({ model, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, setIndex, }: ISpectaMobileViewProps): React.JSX.Element;
+export {};

package/lib/panelview/story-maps/{MobileSpectaPanel.js → components/SpectaMobileView.js}

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Button } from "../../shared/components/Button";
-import { Drawer, DrawerContent, DrawerTrigger, } from "../../shared/components/Drawer";
-import StoryViewerPanel from './StoryViewerPanel';
+import { Button } from "../../../shared/components/Button";
+import { Drawer, DrawerContent, DrawerTrigger, } from "../../../shared/components/Drawer";
+import StoryViewerPanel from '../StoryViewerPanel';
+import { getSpectaPresentationStyle } from '../hooks/useStoryMap';
 const MAIN_ID = 'jp-main-content-panel';
 const SEGMENT_PANEL_ID = 'jgis-story-segment-panel';
 const SEGMENT_HEADER_ID = 'jgis-story-segment-header';
@@ -28,30 +29,14 @@ function getFirstSnapFromSegmentHeader(mainEl, segmentPanelEl, segmentHeaderEl)
     const clamped = Math.max(SNAP_FIRST_MIN, Math.min(SNAP_FIRST_MAX, fraction));
     return clamped;
 }
-/** Build inline styles for specta presentation (bg and text color from story). */
-function getSpectaPresentationStyle(model) {
-    const story = 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;
-    const style = {};
-    if (bgColor) {
-        style['--jgis-specta-bg-color'] = bgColor;
-        style.backgroundColor = bgColor;
-    }
-    if (textColor) {
-        style['--jgis-specta-text-color'] = textColor;
-        style.color = textColor;
-    }
-    return style;
-}
-export function MobileSpectaPanel({ model }) {
+export function SpectaMobileView({ model, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, setIndex, }) {
     const [container, setContainer] = useState(null);
     const [snapPoints, setSnapPoints] = useState([
         SNAP_FIRST_DEFAULT,
         1,
     ]);
     const [snap, setSnap] = useState(snapPoints[0]);
-    const presentationStyle = getSpectaPresentationStyle(model);
+    const presentationStyle = getSpectaPresentationStyle(storyData);
     // Keep active snap in sync with snapPoints so Vaul's --snap-point-height stays defined.
     useEffect(() => {
         const isInSnapPoints = snapPoints.some(p => p === snap ||
@@ -110,5 +95,6 @@ export function MobileSpectaPanel({ model }) {
             React.createElement(DrawerTrigger, { asChild: true },
                 React.createElement(Button, null, "Open Story Panel")),
             React.createElement(DrawerContent, { style: presentationStyle },
-                React.createElement(StoryViewerPanel, { isSpecta: true, isMobile: true, model: model })))));
+                React.createElement("div", { id: SEGMENT_PANEL_ID, className: "jgis-story-viewer-panel" },
+                    React.createElement(StoryViewerPanel, { model: model, isSpecta: true, isMobile: true, 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/{StoryNavBar.d.ts → components/StoryNavBar.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StoryNavPlacement } from './StoryViewerPanel';
+import type { StoryNavPlacement } from '../StoryViewerPanel';
 interface IStoryNavBarProps {
     placement: StoryNavPlacement;
     onPrev: () => void;

package/lib/panelview/story-maps/{StoryNavBar.js → components/StoryNavBar.js}

@@ -1,14 +1,12 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import React from 'react';
-import { Button } from "../../shared/components/Button";
+import { Button } from "../../../shared/components/Button";
 function StoryNavBar({ placement, onPrev, onNext, hasPrev, hasNext, }) {
     const containerClassName = placement === 'over-image'
         ? 'jgis-story-viewer-nav-container'
         : placement === 'subtitle-specta'
             ? 'jgis-story-viewer-nav-container-specta-mod'
-            : placement === 'subtitle-specta-mobile'
-                ? 'jgis-story-viewer-nav-container-specta-mobile'
-                : undefined;
+            : undefined;
     const navbarClassName = placement === 'subtitle-specta'
         ? 'jgis-story-navbar jgis-story-navbar-specta-mod'
         : 'jgis-story-navbar';

package/lib/panelview/story-maps/hooks/useStoryMap.d.ts

@@ -0,0 +1,39 @@
+import type { IJGISLayer, IJGISStoryMap, IJupyterGISModel } from '@jupytergis/schema';
+import { CSSProperties, RefObject } from 'react';
+/** Entry for a layer affected by layer override
+ * remove if we added a layer or restore if we modified an existing layer.
+ **/
+export interface IOverrideLayerEntry {
+    layerId: string;
+    action: 'remove' | 'restore';
+}
+export interface IUseStoryMapParams {
+    model: IJupyterGISModel;
+    overrideLayerEntriesRef: RefObject<IOverrideLayerEntry[]>;
+    removeLayer?: (id: string) => void;
+    addLayer?: (id: string, layer: IJGISLayer, index: number) => Promise<void>;
+    isSpecta: boolean;
+    /** Panel root element for applying specta presentation CSS variables. */
+    panelRef?: RefObject<HTMLDivElement | null>;
+}
+/** Inline style for specta presentation (bg and text color from story). */
+export declare function getSpectaPresentationStyle(story: IJGISStoryMap | null): CSSProperties;
+export declare function useStoryMap({ model, overrideLayerEntriesRef, removeLayer, addLayer, panelRef, isSpecta, }: IUseStoryMapParams): {
+    storyData: IJGISStoryMap | null;
+    storySegments: IJGISLayer[];
+    currentIndex: number;
+    clearOverrideLayers: () => void;
+    setIndex: (index: number) => void;
+    handlePrev: () => void;
+    handleNext: () => void;
+    hasPrev: boolean;
+    hasNext: boolean;
+    setSelectedLayerByIndex: (index: number) => void;
+    currentStorySegment: IJGISLayer;
+    activeSlide: {
+        [k: string]: any;
+    } | undefined;
+    layerName: string;
+    currentStorySegmentId: string | undefined;
+    zoomToCurrentLayer: () => void;
+};