@jupytergis/base 0.12.1 → 0.13.0

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

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { Button } from "../../shared/components/Button";
+import { Drawer, DrawerContent, DrawerTrigger, } from "../../shared/components/Drawer";
+import StoryViewerPanel from './StoryViewerPanel';
+const MAIN_ID = 'jp-main-content-panel';
+const SEGMENT_PANEL_ID = 'jgis-story-segment-panel';
+const SEGMENT_HEADER_ID = 'jgis-story-segment-header';
+const SNAP_FIRST_MIN = 0.3;
+const SNAP_FIRST_MAX = 0.95;
+const SNAP_FIRST_DEFAULT = 0.7;
+/** Offset (px) for segment header height: margins from p and h1 in story content */
+const SEGMENT_HEADER_OFFSET_PX = 16.8 * 2 + 18.76;
+/**
+ * Compute the first snap point so that vaul's --snap-point-height (the
+ * transform offset) equals #jgis-story-segment-panel height minus #jgis-story-segment-header height.
+ * For a bottom drawer, offset = mainHeight * (1 - snapPoint), so
+ * snapPoint = (mainHeight - offset) / mainHeight.
+ */
+function getFirstSnapFromSegmentHeader(mainEl, segmentPanelEl, segmentHeaderEl) {
+    const mainHeight = mainEl.getBoundingClientRect().height;
+    const segmentPanelHeight = segmentPanelEl.getBoundingClientRect().height;
+    const segmentHeaderHeight = segmentHeaderEl.getBoundingClientRect().height;
+    const offsetPx = segmentPanelHeight - segmentHeaderHeight - SEGMENT_HEADER_OFFSET_PX;
+    if (mainHeight <= 0) {
+        return SNAP_FIRST_DEFAULT;
+    }
+    const fraction = (mainHeight - offsetPx) / mainHeight;
+    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 }) {
+    const [container, setContainer] = useState(null);
+    const [snapPoints, setSnapPoints] = useState([
+        SNAP_FIRST_DEFAULT,
+        1,
+    ]);
+    const [snap, setSnap] = useState(snapPoints[0]);
+    const presentationStyle = getSpectaPresentationStyle(model);
+    // Keep active snap in sync with snapPoints so Vaul's --snap-point-height stays defined.
+    useEffect(() => {
+        const isInSnapPoints = snapPoints.some(p => p === snap ||
+            (typeof p === 'number' &&
+                typeof snap === 'number' &&
+                Math.abs(p - snap) < 1e-9));
+        if (!isInSnapPoints && snapPoints.length > 0) {
+            setSnap(snapPoints[0]);
+        }
+    }, [snapPoints, snap]);
+    // Observe #jgis-story-segment-panel (and re-attach when drawer reopens).
+    useEffect(() => {
+        const mainEl = document.getElementById(MAIN_ID);
+        setContainer(mainEl);
+        if (!mainEl) {
+            return;
+        }
+        const updateFirstSnap = () => {
+            const segmentPanelEl = document.getElementById(SEGMENT_PANEL_ID);
+            const segmentHeaderEl = document.getElementById(SEGMENT_HEADER_ID);
+            if (segmentPanelEl && segmentHeaderEl) {
+                const firstSnap = getFirstSnapFromSegmentHeader(mainEl, segmentPanelEl, segmentHeaderEl);
+                setSnapPoints([firstSnap, 1]);
+            }
+        };
+        const resizeObserver = new ResizeObserver(() => updateFirstSnap());
+        let observedPanelEl = null;
+        const syncHeaderObserver = () => {
+            const segmentPanelEl = document.getElementById(SEGMENT_PANEL_ID);
+            const segmentHeaderEl = document.getElementById(SEGMENT_HEADER_ID);
+            if (!segmentPanelEl ||
+                !segmentHeaderEl ||
+                segmentPanelEl === observedPanelEl) {
+                return;
+            }
+            if (observedPanelEl) {
+                resizeObserver.unobserve(observedPanelEl);
+            }
+            resizeObserver.observe(segmentPanelEl);
+            observedPanelEl = segmentPanelEl;
+            updateFirstSnap();
+        };
+        syncHeaderObserver();
+        const mutationObserver = new MutationObserver(syncHeaderObserver);
+        mutationObserver.observe(mainEl, {
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, []);
+    return (React.createElement("div", { className: "jgis-mobile-specta-trigger-wrapper" },
+        React.createElement(Drawer, { snapPoints: snapPoints, activeSnapPoint: snap, setActiveSnapPoint: setSnap, direction: "bottom", container: container, noBodyStyles: true },
+            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 })))));
+}

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

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

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

@@ -1,11 +1,23 @@
 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))));
+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;
+    const navbarClassName = placement === 'subtitle-specta'
+        ? 'jgis-story-navbar jgis-story-navbar-specta-mod'
+        : 'jgis-story-navbar';
+    return (React.createElement("div", { className: containerClassName },
+        React.createElement("div", { className: navbarClassName },
+            React.createElement(React.Fragment, null,
+                React.createElement(Button, { onClick: onPrev, disabled: !hasPrev, className: "jgis-story-navbar-button", "aria-label": "Previous slide" },
+                    React.createElement(ChevronLeft, null)),
+                React.createElement(Button, { onClick: onNext, disabled: !hasNext, className: "jgis-story-navbar-button", "aria-label": "Next slide" },
+                    React.createElement(ChevronRight, null))))));
 }
 export default StoryNavBar;

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

@@ -1,13 +1,25 @@
-import { IJupyterGISModel } from '@jupytergis/schema';
+import { IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
 import React from 'react';
 interface IStoryViewerPanelProps {
     model: IJupyterGISModel;
     isSpecta: boolean;
+    isMobile?: boolean;
+    className?: string;
+    addLayer?: (id: string, layer: IJGISLayer, index: number) => Promise<void>;
+    removeLayer?: (id: string) => void;
 }
 export interface IStoryViewerPanelHandle {
     handlePrev: () => void;
     handleNext: () => void;
     canNavigate: boolean;
 }
+/**
+ * Where the story nav bar should be rendered in the viewer layout.
+ * - 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)
+ */
+export type StoryNavPlacement = 'below-title' | 'over-image' | 'subtitle-specta' | 'subtitle-specta-mobile';
 declare const StoryViewerPanel: React.ForwardRefExoticComponent<IStoryViewerPanelProps & React.RefAttributes<IStoryViewerPanelHandle>>;
 export default StoryViewerPanel;

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

@@ -1,14 +1,52 @@
+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 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) => {
+/**
+ * Returns which section should render the nav bar, or null if nav should be hidden.
+ */
+function getStoryNavPlacement(isSpecta, hasImage, storyType, isMobile) {
+    if (isSpecta) {
+        return isMobile ? 'subtitle-specta-mobile' : 'subtitle-specta';
+    }
+    if (storyType !== 'guided') {
+        return null;
+    }
+    return hasImage ? 'over-image' : 'below-title';
+}
+const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, className, addLayer, removeLayer }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    const [currentIndexDisplayed, setCurrentIndexDisplayed] = useState(0);
+    const [currentIndexDisplayed, setCurrentIndexDisplayed] = useState(() => model.getCurrentSegmentIndex());
     const [storyData, setStoryData] = useState((_a = model.getSelectedStory().story) !== null && _a !== void 0 ? _a : null);
     const [imageLoaded, setImageLoaded] = useState(false);
     const panelRef = useRef(null);
+    const setIndex = useCallback((index) => {
+        model.setCurrentSegmentIndex(index);
+        setCurrentIndexDisplayed(index);
+    }, [model]);
+    /** Layers affected by symbology 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)) {
@@ -26,15 +64,14 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta }, ref) => {
     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]);
+    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);
@@ -51,19 +88,40 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta }, ref) => {
             };
         }
     }, [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);
-            // Reset to first slide when story changes
-            setCurrentIndexDisplayed(0);
+            setIndex((_a = model.getCurrentSegmentIndex()) !== null && _a !== void 0 ? _a : 0);
         };
         updateStory();
         model.sharedModel.storyMapsChanged.connect(updateStory);
         return () => {
             model.sharedModel.storyMapsChanged.disconnect(updateStory);
         };
-    }, [model]);
+    }, [model, setIndex, clearOverrideLayers]);
     // Prefetch image when slide changes
     useEffect(() => {
         var _a;
@@ -95,6 +153,20 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta }, ref) => {
             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) {
@@ -129,51 +201,113 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta }, ref) => {
             if (index === undefined || index === -1) {
                 return;
             }
-            setCurrentIndexDisplayed(index);
+            setIndex(index);
         };
+        // ! TODO really only want to connect this un unguided mode
         model.sharedModel.awareness.on('change', handleSelectedStorySegmentChange);
         return () => {
             model.sharedModel.awareness.off('change', handleSelectedStorySegmentChange);
         };
-    }, [model, storyData]);
+    }, [model, storyData, setIndex]);
+    // Apply symbology 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 symbology 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 (currentIndexDisplayed > 0) {
-            const newIndex = currentIndexDisplayed - 1;
-            setCurrentIndexDisplayed(newIndex);
+        if (hasPrev) {
+            setIndex(currentIndexDisplayed - 1);
         }
-    }, [currentIndexDisplayed]);
+    }, [currentIndexDisplayed, setIndex]);
     const handleNext = useCallback(() => {
-        if (currentIndexDisplayed < storySegments.length - 1) {
-            const newIndex = currentIndexDisplayed + 1;
-            setCurrentIndexDisplayed(newIndex);
+        if (hasNext) {
+            setIndex(currentIndexDisplayed + 1);
         }
-    }, [currentIndexDisplayed, storySegments.length]);
-    // Expose methods via ref for parent component to use
-    useImperativeHandle(ref, () => ({
-        handlePrev,
-        handleNext,
-        canNavigate: isSpecta,
-    }), [handlePrev, handleNext, storyData, isSpecta]);
+    }, [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) {
         return (React.createElement("div", { style: { padding: '1rem' } },
             React.createElement("p", null, "No Segments available. Add one using the Add Layer menu.")));
     }
-    const navProps = {
+    const storyNavBarProps = {
         onPrev: handlePrev,
         onNext: handleNext,
-        hasPrev: currentIndexDisplayed > 0,
-        hasNext: currentIndexDisplayed < storySegments.length - 1,
+        hasPrev,
+        hasNext,
     };
+    // Expose methods via ref for parent component to use
+    useImperativeHandle(ref, () => ({
+        handlePrev,
+        handleNext,
+        canNavigate: isSpecta,
+    }), [handlePrev, handleNext, storyData, isSpecta]);
+    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 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 = (_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' : ''}` },
+    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;
+    return (React.createElement("div", { ref: panelRef, className: cn('jgis-story-viewer-panel', className), id: "jgis-story-segment-panel" },
         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 : '' }))));
+            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("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 : '' })))));
 });
 StoryViewerPanel.displayName = 'StoryViewerPanel';
 export default StoryViewerPanel;

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

@@ -4,12 +4,7 @@ interface IStoryImageSectionProps {
     imageLoaded: boolean;
     layerName: string;
     slideNumber: number;
-    isSpecta: boolean;
-    storyType: string;
-    onPrev: () => void;
-    onNext: () => void;
-    hasPrev: boolean;
-    hasNext: boolean;
+    navSlot?: React.ReactNode;
 }
-declare function StoryImageSection({ imageUrl, imageLoaded, layerName, slideNumber, isSpecta, storyType, onPrev, onNext, hasPrev, hasNext, }: IStoryImageSectionProps): React.JSX.Element | null;
+declare function StoryImageSection({ imageUrl, imageLoaded, layerName, slideNumber, navSlot, }: IStoryImageSectionProps): React.JSX.Element | null;
 export default StoryImageSection;

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

@@ -1,13 +1,11 @@
 import React from 'react';
-import StoryNavBar from '../StoryNavBar';
-function StoryImageSection({ imageUrl, imageLoaded, layerName, slideNumber, isSpecta, storyType, onPrev, onNext, hasPrev, hasNext, }) {
+function StoryImageSection({ imageUrl, imageLoaded, layerName, slideNumber, navSlot, }) {
     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 }))))));
+            navSlot)));
 }
 export default StoryImageSection;

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

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

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

@@ -1,9 +1,7 @@
 import React from 'react';
-import StoryNavBar from '../StoryNavBar';
-function StorySubtitleSection({ title, isSpecta, onPrev, onNext, hasPrev, hasNext, }) {
+function StorySubtitleSection({ title, navSlot }) {
     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 })))));
+        navSlot));
 }
 export default StorySubtitleSection;

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

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

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import StoryNavBar from '../StoryNavBar';
-function StoryTitleSection({ title, isSpecta, storyType, onPrev, onNext, hasPrev, hasNext, }) {
+function StoryTitleSection({ title, navSlot }) {
     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 }))));
+        navSlot));
 }
 export default StoryTitleSection;

package/lib/shared/components/Button.js

@@ -9,12 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Slot } from '@radix-ui/react-slot';
+import { Slot } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 const Button = React.forwardRef((_a, ref) => {
     var { variant, className, size, asChild = false } = _a, props = __rest(_a, ["variant", "className", "size", "asChild"]);
-    const Comp = asChild ? Slot : 'button';
+    const Comp = asChild ? Slot.Root : 'button';
     return (React.createElement(Comp, Object.assign({ "data-size": size, "data-variant": variant, className: cn('jgis-button', className), ref: ref }, props)));
 });
 Button.displayName = 'Button';

package/lib/shared/components/Calendar.js

@@ -1,4 +1,3 @@
-'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

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

@@ -1,4 +1,4 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
 import * as React from 'react';
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default Checkbox;

package/lib/shared/components/Checkbox.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { Check } from 'lucide-react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
 import * as React from 'react';
 const Checkbox = React.forwardRef((_a, ref) => {
     var props = __rest(_a, []);

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

@@ -1,4 +1,4 @@
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Dialog as DialogPrimitive } from 'radix-ui';
 import * as React from 'react';
 declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
 declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;

package/lib/shared/components/Dialog.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { XIcon } from 'lucide-react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 function Dialog(_a) {

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): React.JSX.Element;
+declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): React.JSX.Element;
+declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): React.JSX.Element;
+declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): React.JSX.Element;
+declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): React.JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): React.JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): React.JSX.Element;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };