@jupytergis/base 0.16.0-alpha.0 → 0.16.0-alpha.1

package/lib/features/story/components/ListStoryStageOverlay.js

@@ -2,6 +2,7 @@ import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { ListStoryMapOverlayPanel } from "./ListStoryMapOverlayPanel";
 import { ListStoryOverlayMarkdown } from "./ListStoryOverlayMarkdown";
 import { useCurrentSegmentIndex } from "../hooks/useCurrentSegmentIndex";
+import { isIntraSegmentScroll } from "../utils/computeListStoryScrollState";
 import { getSpectaPresentationCssVars } from "../utils/spectaPresentation";
 import { buildStorySegmentViewItems, getStoryMarkdownFromSlide, } from "../utils/storySegmentViewItems";
 import { getSegmentDisplayMode } from '../utils/listStoryScrollTrack';
@@ -25,12 +26,21 @@ function SegmentOverlayPane({ pane, segmentIndex, config, storyData, items, }) {
     const isMap = config.type === 'map';
     return (React.createElement("div", { "data-pane": pane, className: `jgis-story-segment-overlay-pane jgis-story-${isMap ? 'map' : 'markdown'}-scroll-pane` }, isMap ? (React.createElement(ListStoryMapOverlayPanel, { storyData: storyData, segmentIndex: config.segmentIndex, items: items })) : config.markdown ? (React.createElement(ListStoryOverlayMarkdown, { key: `pane-${pane}-seg-${segmentIndex}`, source: config.markdown })) : null));
 }
+function buildFallbackTransition(activeItem) {
+    const mode = getSegmentDisplayMode(activeItem.activeSlide);
+    return {
+        progress: 0,
+        fromIndex: activeItem.index,
+        toIndex: activeItem.index,
+        fromMode: mode,
+        toMode: mode,
+    };
+}
 /**
  * List-story stage overlay: map + markdown segments on the map stage.
- * The story column scrolls only the virtual track; this is the visible UI.
  */
 export function ListStoryStageOverlay({ model, segmentTransition, }) {
-    var _a;
+    var _a, _b;
     const overlayRef = useRef(null);
     const stackRef = useRef(null);
     const [stageHeight, setStageHeight] = useState(0);
@@ -43,12 +53,19 @@ export function ListStoryStageOverlay({ model, segmentTransition, }) {
         story === null || story === void 0 ? void 0 : story.presentationBgColor,
         story === null || story === void 0 ? void 0 : story.presentationTextColor,
     ]);
-    const isTransitioning = segmentTransition !== null;
     const activeItem = items.find(item => item.index === currentIndex);
-    const activeMode = getSegmentDisplayMode(activeItem === null || activeItem === void 0 ? void 0 : activeItem.activeSlide);
-    const transitionProgress = isTransitioning ? segmentTransition.progress : 1;
+    const transition = useMemo(() => {
+        if (segmentTransition) {
+            return segmentTransition;
+        }
+        if (activeItem) {
+            return buildFallbackTransition(activeItem);
+        }
+        return null;
+    }, [segmentTransition, activeItem]);
+    const intraSegmentScroll = isIntraSegmentScroll(transition);
     const { fromIndex, toIndex, fromPaneConfig, toPaneConfig } = useMemo(() => {
-        if (!model || !activeItem) {
+        if (!model || !transition) {
             return {
                 fromIndex: currentIndex,
                 toIndex: currentIndex,
@@ -56,22 +73,22 @@ export function ListStoryStageOverlay({ model, segmentTransition, }) {
                 toPaneConfig: EMPTY_MARKDOWN_PANE,
             };
         }
-        if (segmentTransition) {
-            return {
-                fromIndex: segmentTransition.fromIndex,
-                toIndex: segmentTransition.toIndex,
-                fromPaneConfig: buildPaneConfig(items.find(item => item.index === segmentTransition.fromIndex), segmentTransition.fromMode),
-                toPaneConfig: buildPaneConfig(items.find(item => item.index === segmentTransition.toIndex), segmentTransition.toMode),
-            };
-        }
-        return {
-            fromIndex: currentIndex,
-            toIndex: currentIndex,
-            fromPaneConfig: EMPTY_MARKDOWN_PANE,
-            toPaneConfig: buildPaneConfig(activeItem, activeMode),
+        const fromItem = items.find(item => item.index === transition.fromIndex);
+        const toItem = items.find(item => item.index === transition.toIndex);
+        const fromPaneConfig = buildPaneConfig(fromItem, transition.fromMode);
+        const toPaneConfig = intraSegmentScroll
+            ? EMPTY_MARKDOWN_PANE
+            : buildPaneConfig(toItem, transition.toMode);
+        const paneState = {
+            fromIndex: transition.fromIndex,
+            toIndex: transition.toIndex,
+            fromPaneConfig,
+            toPaneConfig,
         };
-    }, [items, activeItem, currentIndex, activeMode, segmentTransition]);
+        return paneState;
+    }, [items, currentIndex, transition, intraSegmentScroll, model]);
     const overlayHeight = Math.max(stageHeight, 0);
+    const transitionProgress = (_b = transition === null || transition === void 0 ? void 0 : transition.progress) !== null && _b !== void 0 ? _b : 0;
     useLayoutEffect(() => {
         var _a;
         const parent = (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
@@ -91,21 +108,20 @@ export function ListStoryStageOverlay({ model, segmentTransition, }) {
         };
     }, [model, story]);
     useLayoutEffect(() => {
-        if (!isTransitioning) {
-            setTransitionTranslatePx(0);
-            return;
-        }
         const stack = stackRef.current;
         if (!stack) {
             return;
         }
         const measure = () => {
             const fromPane = stack.querySelector('[data-pane="from"]');
-            const gap = stack.querySelector('.jgis-story-segment-transition-gap');
-            if (!(fromPane instanceof HTMLElement) || !(gap instanceof HTMLElement)) {
+            if (!(fromPane instanceof HTMLElement)) {
                 return;
             }
-            const travel = fromPane.offsetHeight + gap.offsetHeight;
+            const gap = stack.querySelector('.jgis-story-segment-transition-gap');
+            const gapHeight = gap instanceof HTMLElement && !intraSegmentScroll
+                ? gap.offsetHeight
+                : 0;
+            const travel = fromPane.offsetHeight + gapHeight;
             setTransitionTranslatePx(prev => (prev === travel ? prev : travel));
         };
         measure();
@@ -114,19 +130,21 @@ export function ListStoryStageOverlay({ model, segmentTransition, }) {
         return () => {
             ro.disconnect();
         };
-    }, [isTransitioning, fromIndex, toIndex, fromPaneConfig, toPaneConfig]);
+    }, [fromIndex, toIndex, fromPaneConfig, toPaneConfig, intraSegmentScroll]);
     const overlaySized = stageHeight > 0;
-    if (!model || !story || !activeItem) {
+    if (!model || !story || !activeItem || !transition) {
         return null;
     }
-    return (React.createElement("div", { ref: overlayRef, className: `jgis-story-stage-overlay${overlaySized ? ' jgis-story-stage-overlay--sized' : ''}${isTransitioning ? ' jgis-story-stage-overlay--transitioning' : ''}`, style: Object.assign(Object.assign(Object.assign({}, spectaPresentationStyle), { '--jgis-segment-transition-progress': transitionProgress }), (overlaySized
+    return (React.createElement("div", { ref: overlayRef, className: `jgis-story-stage-overlay${overlaySized ? ' jgis-story-stage-overlay--sized' : ''} jgis-story-stage-overlay--transitioning`, style: Object.assign(Object.assign(Object.assign({}, spectaPresentationStyle), { '--jgis-segment-transition-progress': transitionProgress }), (overlaySized
             ? {
                 height: overlayHeight,
                 '--jgis-handoff-gap-height': `${stageHeight}px`,
                 '--jgis-transition-translate': `${transitionTranslatePx || stageHeight}px`,
             }
-            : {})) }, isTransitioning ? (React.createElement("div", { ref: stackRef, className: "jgis-story-segment-transition-stack" },
-        React.createElement(SegmentOverlayPane, { pane: "from", segmentIndex: fromIndex, config: fromPaneConfig, storyData: story, items: items }),
-        React.createElement("div", { className: "jgis-story-segment-transition-gap", "aria-hidden": true }),
-        React.createElement(SegmentOverlayPane, { pane: "to", segmentIndex: toIndex, config: toPaneConfig, storyData: story, items: items }))) : (React.createElement(SegmentOverlayPane, { pane: "to", segmentIndex: toIndex, config: toPaneConfig, storyData: story, items: items }))));
+            : {})) },
+        React.createElement("div", { ref: stackRef, className: "jgis-story-segment-transition-stack" },
+            React.createElement(SegmentOverlayPane, { pane: "from", segmentIndex: fromIndex, config: fromPaneConfig, storyData: story, items: items }),
+            !intraSegmentScroll ? (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "jgis-story-segment-transition-gap", "aria-hidden": true }),
+                React.createElement(SegmentOverlayPane, { pane: "to", segmentIndex: toIndex, config: toPaneConfig, storyData: story, items: items }))) : null)));
 }

package/lib/features/story/components/ListStoryTitleBar.d.ts

@@ -0,0 +1,7 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+interface IListStoryTitleBarProps {
+    model: IJupyterGISModel;
+    isMobile: boolean;
+}
+export declare function ListStoryTitleBar({ model, isMobile, }: IListStoryTitleBarProps): JSX.Element;
+export {};

package/lib/features/story/components/ListStoryTitleBar.js

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react';
+import { ListStoryTitleBarDesktop } from "./ListStoryTitleBarDesktop";
+import { ListStoryTitleBarMobile } from "./ListStoryTitleBarMobile";
+import { useListStoryScrollTrackContext } from "../context/ListStoryScrollTrackContext";
+import { useCurrentSegmentIndex } from "../hooks/useCurrentSegmentIndex";
+import { buildStorySegmentViewItems } from "../utils/storySegmentViewItems";
+export function ListStoryTitleBar({ model, isMobile, }) {
+    const currentIndex = useCurrentSegmentIndex(model);
+    const { scrollToSegmentIndex } = useListStoryScrollTrackContext();
+    const segmentItems = useMemo(() => { var _a; return buildStorySegmentViewItems(model, (_a = model.getSelectedStory().story) !== null && _a !== void 0 ? _a : null); }, [model]);
+    const titleBarProps = {
+        segmentItems,
+        currentIndex,
+        onSegmentClick: scrollToSegmentIndex,
+    };
+    if (isMobile) {
+        return React.createElement(ListStoryTitleBarMobile, Object.assign({}, titleBarProps));
+    }
+    return React.createElement(ListStoryTitleBarDesktop, Object.assign({}, titleBarProps));
+}

package/lib/features/story/components/ListStoryTitleBarDesktop.d.ts

@@ -0,0 +1,2 @@
+import type { IListStoryTitleBarContentProps } from "../types/types";
+export declare function ListStoryTitleBarDesktop({ segmentItems, currentIndex, onSegmentClick, }: IListStoryTitleBarContentProps): JSX.Element;

package/lib/features/story/components/ListStoryTitleBarDesktop.js

@@ -0,0 +1,55 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { Button } from "../../../shared/components/Button";
+export function ListStoryTitleBarDesktop({ segmentItems, currentIndex, onSegmentClick, }) {
+    const segmentsRef = useRef(null);
+    const [hasOverflow, setHasOverflow] = useState(false);
+    const currentPosition = segmentItems.findIndex(item => item.index === currentIndex);
+    const hasPrev = currentPosition > 0;
+    const hasNext = currentPosition >= 0 && currentPosition < segmentItems.length - 1;
+    const goToAdjacentSegment = (direction) => {
+        const nextPosition = currentPosition + direction;
+        const nextItem = segmentItems[nextPosition];
+        if (!nextItem) {
+            return;
+        }
+        onSegmentClick(nextItem.index);
+    };
+    useLayoutEffect(() => {
+        const segments = segmentsRef.current;
+        if (!segments) {
+            return;
+        }
+        const update = () => {
+            setHasOverflow(segments.scrollWidth > segments.clientWidth);
+        };
+        update();
+        const ro = new ResizeObserver(update);
+        ro.observe(segments);
+        return () => {
+            ro.disconnect();
+        };
+    }, []);
+    useLayoutEffect(() => {
+        const segments = segmentsRef.current;
+        if (!segments) {
+            return;
+        }
+        const active = segments.querySelector('.jgis-story-title-bar-segment[data-state="active"]');
+        if (!active) {
+            return;
+        }
+        active.scrollIntoView({
+            behavior: 'smooth',
+        });
+    }, [currentIndex]);
+    return (React.createElement("nav", { className: "jgis-story-title-bar", "aria-label": "Story segments" },
+        hasOverflow ? (React.createElement(Button, { type: "button", variant: "ghost", size: "icon-sm", className: "jgis-story-title-bar-scroll-btn", "aria-label": "Previous segment", disabled: !hasPrev, onClick: () => goToAdjacentSegment(-1) },
+            React.createElement(ChevronLeft, null))) : null,
+        React.createElement("div", { ref: segmentsRef, className: "jgis-story-title-bar-segments", onWheelCapture: event => event.stopPropagation() }, segmentItems.map(item => {
+            const isActive = item.index === currentIndex;
+            return (React.createElement("button", { key: item.id, type: "button", className: "jgis-story-title-bar-label jgis-story-title-bar-segment", "data-state": isActive ? 'active' : 'inactive', "aria-current": isActive ? 'true' : undefined, "aria-label": `Go to ${item.layerName}`, onClick: () => onSegmentClick(item.index) }, item.layerName));
+        })),
+        hasOverflow ? (React.createElement(Button, { type: "button", variant: "ghost", size: "icon-sm", className: "jgis-story-title-bar-scroll-btn", "aria-label": "Next segment", disabled: !hasNext, onClick: () => goToAdjacentSegment(1) },
+            React.createElement(ChevronRight, null))) : null));
+}

package/lib/features/story/components/ListStoryTitleBarMobile.d.ts

@@ -0,0 +1,2 @@
+import type { IListStoryTitleBarContentProps } from "../types/types";
+export declare function ListStoryTitleBarMobile({ segmentItems, currentIndex, onSegmentClick, }: IListStoryTitleBarContentProps): JSX.Element;

package/lib/features/story/components/ListStoryTitleBarMobile.js

@@ -0,0 +1,41 @@
+import { Menu } from 'lucide-react';
+import React, { useRef, useState } from 'react';
+import { Button } from "../../../shared/components/Button";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../../shared/components/Popover";
+function getSlideDirection(prevSegmentId, currentPosition, segmentItems) {
+    if (!prevSegmentId || currentPosition < 0) {
+        return undefined;
+    }
+    const prevPosition = segmentItems.findIndex(item => item.id === prevSegmentId);
+    if (prevPosition < 0) {
+        return undefined;
+    }
+    return currentPosition > prevPosition ? 'next' : 'prev';
+}
+export function ListStoryTitleBarMobile({ segmentItems, currentIndex, onSegmentClick, }) {
+    var _a;
+    const [menuOpen, setMenuOpen] = useState(false);
+    const currentPosition = segmentItems.findIndex(item => item.index === currentIndex);
+    const activeSegment = currentPosition >= 0 ? segmentItems[currentPosition] : undefined;
+    const prevSegmentIdRef = useRef(undefined);
+    const slideDirectionRef = useRef(undefined);
+    const activeSegmentId = activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.id;
+    if (activeSegmentId !== prevSegmentIdRef.current) {
+        slideDirectionRef.current = getSlideDirection(prevSegmentIdRef.current, currentPosition, segmentItems);
+        prevSegmentIdRef.current = activeSegmentId;
+    }
+    const handleMenuSegmentClick = (index) => {
+        onSegmentClick(index);
+        setMenuOpen(false);
+    };
+    return (React.createElement("nav", { className: "jgis-story-title-bar jgis-story-title-bar--mobile", "aria-label": "Story segments" },
+        React.createElement(Popover, { open: menuOpen, onOpenChange: setMenuOpen },
+            React.createElement(PopoverTrigger, { asChild: true },
+                React.createElement(Button, { type: "button", variant: "ghost", className: "jgis-story-title-bar-menu-btn", "aria-label": "Open story menu" },
+                    React.createElement(Menu, null))),
+            React.createElement(PopoverContent, { align: "center", side: "bottom", className: "jgis-story-title-bar-segment-menu" }, segmentItems.map(item => {
+                const isActive = item.index === currentIndex;
+                return (React.createElement("button", { key: item.id, type: "button", className: "jgis-story-title-bar-label jgis-story-title-bar-segment-menu-item", "data-state": isActive ? 'active' : 'inactive', "aria-current": isActive ? 'true' : undefined, onClick: () => handleMenuSegmentClick(item.index) }, item.layerName));
+            }))),
+        React.createElement("span", { key: activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.id, className: "jgis-story-title-bar-active-segment", "data-state": "active", "data-slide-direction": slideDirectionRef.current }, (_a = activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.layerName) !== null && _a !== void 0 ? _a : '')));
+}

package/lib/features/story/components/SpectaMobileListModeContent.d.ts

@@ -0,0 +1,13 @@
+import { IJGISStoryMap, IJupyterGISModel } from '@jupytergis/schema';
+import type { IListStorySegmentTransition } from "../types/types";
+export interface ISpectaMobileListModeContentProps {
+    model: IJupyterGISModel;
+    storyData: IJGISStoryMap | null;
+    currentIndex: number;
+    setIndex: (index: number) => void;
+    onSegmentTransitionChange?: (payload: IListStorySegmentTransition | null) => void;
+}
+/**
+ * Mobile list story: full-viewport touch scroll on the virtual track drives
+ */
+export declare function SpectaMobileListModeContent({ model, storyData, currentIndex, setIndex, onSegmentTransitionChange, }: ISpectaMobileListModeContentProps): JSX.Element;

package/lib/features/story/components/SpectaMobileListModeContent.js

@@ -0,0 +1,36 @@
+import React, { useLayoutEffect, useMemo, useRef } from 'react';
+import { ListStoryVirtualScrollTrack } from "./ListStoryVirtualScrollTrack";
+import { useListStoryScrollTrackContext } from "../context/ListStoryScrollTrackContext";
+import { useListStoryScroll } from "../hooks/useListStoryScroll";
+import { getSpectaPresentationStyle } from "../utils/spectaPresentation";
+import { buildStorySegmentViewItems } from "../utils/storySegmentViewItems";
+import { STORY_TYPE } from "../../../types";
+/**
+ * Mobile list story: full-viewport touch scroll on the virtual track drives
+ */
+export function SpectaMobileListModeContent({ model, storyData, currentIndex, setIndex, onSegmentTransitionChange, }) {
+    const scrollContainerRef = useRef(null);
+    const { scrollTrackLayout, bindScrollTrackElement } = useListStoryScrollTrackContext();
+    const segmentViewItems = useMemo(() => buildStorySegmentViewItems(model, storyData), [model, storyData]);
+    const presentationStyle = getSpectaPresentationStyle(storyData);
+    const segmentTransitionSyncEnabled = Boolean(onSegmentTransitionChange) &&
+        (storyData === null || storyData === void 0 ? void 0 : storyData.storyType) === STORY_TYPE.verticalScroll;
+    useLayoutEffect(() => {
+        bindScrollTrackElement(scrollContainerRef.current);
+        return () => {
+            bindScrollTrackElement(null);
+        };
+    }, [bindScrollTrackElement]);
+    useListStoryScroll({
+        enabled: segmentTransitionSyncEnabled,
+        scrollContainerRef,
+        storyData,
+        scrollTrackLayout,
+        items: segmentViewItems,
+        currentIndex,
+        setIndex,
+        onSegmentTransitionChange,
+    });
+    return (React.createElement("div", { ref: scrollContainerRef, id: "jgis-story-segment-panel", className: "jgis-story-viewer-panel-specta-mod-vertical-scroll jgis-story-mobile-list-scroll", style: presentationStyle },
+        React.createElement(ListStoryVirtualScrollTrack, { scrollTrackLayout: scrollTrackLayout })));
+}

package/lib/features/story/components/SpectaMobileSingleModeContent.d.ts

@@ -0,0 +1,14 @@
+import { IJGISStoryMap, IStorySegmentLayer } from '@jupytergis/schema';
+import { RefObject } from 'react';
+export interface ISpectaMobileSingleModeContentProps {
+    segmentContainerRef: RefObject<HTMLDivElement>;
+    storyData: IJGISStoryMap | null;
+    currentIndex: number;
+    activeSlide: IStorySegmentLayer['parameters'] | undefined;
+    layerName: string;
+    handlePrev: () => void;
+    handleNext: () => void;
+    hasPrev: boolean;
+    hasNext: boolean;
+}
+export declare function SpectaMobileSingleModeContent({ segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, }: ISpectaMobileSingleModeContentProps): JSX.Element;

package/lib/features/story/components/SpectaMobileSingleModeContent.js

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+import StoryViewerPanel from "../StoryViewerPanel";
+import { getSpectaPresentationStyle } from "../utils/spectaPresentation";
+import { Button } from "../../../shared/components/Button";
+import { Drawer, DrawerContent, DrawerTrigger, } from "../../../shared/components/Drawer";
+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;
+}
+export function SpectaMobileSingleModeContent({ segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, }) {
+    const [container, setContainer] = useState(null);
+    const [snapPoints, setSnapPoints] = useState([
+        SNAP_FIRST_DEFAULT,
+        1,
+    ]);
+    const [snap, setSnap] = useState(snapPoints[0]);
+    const presentationStyle = getSpectaPresentationStyle(storyData);
+    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]);
+    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("div", { id: SEGMENT_PANEL_ID, className: "jgis-story-viewer-panel" },
+                    React.createElement(StoryViewerPanel, { isSpecta: true, isMobile: true, segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, segmentNav: { handlePrev, handleNext, hasPrev, hasNext } }))))));
+}

package/lib/features/story/components/SpectaMobileView.d.ts

@@ -1,15 +1,19 @@
-import { IJGISStoryMap, IStorySegmentLayer } from '@jupytergis/schema';
-import React, { RefObject } from 'react';
+import { IJGISStoryMap, IJupyterGISModel, IStorySegmentLayer } from '@jupytergis/schema';
+import { RefObject } from 'react';
+import type { IListStorySegmentTransition } from "../types/types";
 interface ISpectaMobileViewProps {
+    model: IJupyterGISModel;
     segmentContainerRef: RefObject<HTMLDivElement>;
     storyData: IJGISStoryMap | null;
     currentIndex: number;
+    setIndex: (index: number) => void;
     activeSlide: IStorySegmentLayer['parameters'] | undefined;
     layerName: string;
     handlePrev: () => void;
     handleNext: () => void;
     hasPrev: boolean;
     hasNext: boolean;
+    onSegmentTransitionChange?: (payload: IListStorySegmentTransition | null) => void;
 }
-export declare function SpectaMobileView({ segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, }: ISpectaMobileViewProps): React.JSX.Element;
+export declare function SpectaMobileView({ model, segmentContainerRef, storyData, currentIndex, setIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, onSegmentTransitionChange, }: ISpectaMobileViewProps): JSX.Element;
 export {};

package/lib/features/story/components/SpectaMobileView.js

@@ -1,100 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import { getSpectaPresentationStyle } from "../utils/spectaPresentation";
-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;
-}
-export function SpectaMobileView({ segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, }) {
-    const [container, setContainer] = useState(null);
-    const [snapPoints, setSnapPoints] = useState([
-        SNAP_FIRST_DEFAULT,
-        1,
-    ]);
-    const [snap, setSnap] = useState(snapPoints[0]);
-    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 ||
-            (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("div", { id: SEGMENT_PANEL_ID, className: "jgis-story-viewer-panel" },
-                    React.createElement(StoryViewerPanel, { isSpecta: true, isMobile: true, segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, segmentNav: { handlePrev, handleNext, hasPrev, hasNext } }))))));
+import React from 'react';
+import { SpectaMobileListModeContent } from "./SpectaMobileListModeContent";
+import { SpectaMobileSingleModeContent } from "./SpectaMobileSingleModeContent";
+import { STORY_TYPE } from "../../../types";
+export function SpectaMobileView({ model, segmentContainerRef, storyData, currentIndex, setIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, onSegmentTransitionChange, }) {
+    const viewMode = (storyData === null || storyData === void 0 ? void 0 : storyData.storyType) === STORY_TYPE.verticalScroll ? 'list' : 'single';
+    const renderModeContent = {
+        single: () => (React.createElement(SpectaMobileSingleModeContent, { segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext })),
+        list: () => (React.createElement(SpectaMobileListModeContent, { model: model, storyData: storyData, currentIndex: currentIndex, setIndex: setIndex, onSegmentTransitionChange: onSegmentTransitionChange })),
+    };
+    return renderModeContent[viewMode]();
 }

package/lib/features/story/context/ListStoryScrollTrackContext.d.ts

@@ -3,7 +3,11 @@ import React from 'react';
 import type { IListStoryScrollTrackLayout } from "../types/types";
 interface IListStoryScrollTrackContextValue {
     scrollTrackLayout: IListStoryScrollTrackLayout | null;
+    scrollTop: number;
     bindScrollTrackElement: (element: HTMLDivElement | null) => void;
+    scrollToSegmentIndex: (index: number, options?: {
+        behavior?: ScrollBehavior;
+    }) => void;
 }
 interface IListStoryScrollTrackProviderProps {
     model: IJupyterGISModel;