@jupytergis/base 0.14.1 → 0.16.0-alpha.0

package/lib/features/story/__tests__/fixtures/listStoryTestItems.js

@@ -0,0 +1,21 @@
+import { buildListStoryScrollTrack } from '../../utils/listStoryScrollTrack';
+export function storyItem(id, index, contentMode, markdown = '') {
+    return {
+        id,
+        index,
+        layerName: id,
+        activeSlide: {
+            content: {
+                contentMode,
+                markdown,
+            },
+        },
+    };
+}
+export function layoutSegments(options) {
+    const layout = buildListStoryScrollTrack(options);
+    if (!layout) {
+        throw new Error('layoutSegments: buildListStoryScrollTrack returned null');
+    }
+    return layout.segments;
+}

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

@@ -0,0 +1,10 @@
+import { IJGISStoryMap } from '@jupytergis/schema';
+import type { IStorySegmentViewItem } from "../types/types";
+interface IListStoryMapOverlayPanelProps {
+    storyData: IJGISStoryMap;
+    segmentIndex: number;
+    items: IStorySegmentViewItem[];
+}
+/** Map segment chrome on the list-story stage overlay (not in the scroll column). */
+export declare function ListStoryMapOverlayPanel({ storyData, segmentIndex, items, }: IListStoryMapOverlayPanelProps): JSX.Element | null;
+export {};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import StoryViewerPanel from "../StoryViewerPanel";
+/** Map segment chrome on the list-story stage overlay (not in the scroll column). */
+export function ListStoryMapOverlayPanel({ storyData, segmentIndex, items, }) {
+    const item = items.find(entry => entry.index === segmentIndex);
+    if (!item) {
+        return null;
+    }
+    return (React.createElement("div", { className: "jgis-story-map-overlay-content" },
+        React.createElement(StoryViewerPanel, { isSpecta: true, disableSegmentAnimation: true, storyData: storyData, currentIndex: segmentIndex, activeSlide: item.activeSlide, layerName: item.layerName })));
+}

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

@@ -0,0 +1,11 @@
+interface IListStoryMarkdownMeasurePaneProps {
+    segmentId: string;
+    markdown: string;
+    onHeight: (segmentId: string, height: number) => void;
+    onMeasureComplete: () => void;
+}
+/**
+ * Single off-screen pane matching overlay markdown layout for height measurement.
+ */
+export declare function ListStoryMarkdownMeasurePane({ segmentId, markdown, onHeight, onMeasureComplete, }: IListStoryMarkdownMeasurePaneProps): JSX.Element;
+export {};

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

@@ -0,0 +1,55 @@
+import React, { useCallback, useLayoutEffect, useRef } from 'react';
+import { ListStoryOverlayMarkdown } from "./ListStoryOverlayMarkdown";
+/**
+ * Single off-screen pane matching overlay markdown layout for height measurement.
+ */
+export function ListStoryMarkdownMeasurePane({ segmentId, markdown, onHeight, onMeasureComplete, }) {
+    const contentRef = useRef(null);
+    const renderedRef = useRef(false);
+    const completedRef = useRef(false);
+    const completeMeasure = useCallback(() => {
+        if (completedRef.current) {
+            return;
+        }
+        completedRef.current = true;
+        onMeasureComplete();
+    }, [onMeasureComplete]);
+    const reportHeight = useCallback(() => {
+        const content = contentRef.current;
+        if (!content) {
+            return;
+        }
+        onHeight(segmentId, Math.ceil(content.scrollHeight));
+    }, [segmentId, onHeight]);
+    const handleRendered = useCallback(() => {
+        renderedRef.current = true;
+        reportHeight();
+        completeMeasure();
+    }, [reportHeight, completeMeasure]);
+    useLayoutEffect(() => {
+        renderedRef.current = false;
+        completedRef.current = false;
+        if (!markdown) {
+            renderedRef.current = true;
+            reportHeight();
+            completeMeasure();
+        }
+    }, [segmentId, markdown, reportHeight, completeMeasure]);
+    useLayoutEffect(() => {
+        const content = contentRef.current;
+        if (!content) {
+            return;
+        }
+        const ro = new ResizeObserver(() => {
+            if (renderedRef.current) {
+                reportHeight();
+            }
+        });
+        ro.observe(content);
+        return () => {
+            ro.disconnect();
+        };
+    }, [segmentId, markdown, reportHeight]);
+    return (React.createElement("div", { "data-segment-id": segmentId, className: "jgis-story-markdown-scroll-pane jgis-story-markdown-scroll-pane--measure" },
+        React.createElement("div", { ref: contentRef }, markdown ? (React.createElement(ListStoryOverlayMarkdown, { source: markdown, onRendered: handleRendered })) : null)));
+}

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

@@ -0,0 +1,15 @@
+import { type IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import React from 'react';
+interface IStoryRenderMimeProviderProps {
+    rendermime: IRenderMimeRegistry | null | undefined;
+    children: React.ReactNode;
+}
+export declare function StoryRenderMimeProvider({ rendermime, children, }: IStoryRenderMimeProviderProps): JSX.Element;
+interface IListStoryOverlayMarkdownProps {
+    source: string;
+    /** Fires after rendermime (or plain fallback) has painted. */
+    onRendered?: () => void;
+}
+/** Markdown body for a list-story stage overlay segment. */
+export declare function ListStoryOverlayMarkdown({ source, onRendered, }: IListStoryOverlayMarkdownProps): JSX.Element | null;
+export {};

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

@@ -0,0 +1,93 @@
+import { MimeModel } from '@jupyterlab/rendermime';
+import { Widget } from '@lumino/widgets';
+import React, { createContext, useContext, useLayoutEffect, useRef, } from 'react';
+const StoryRenderMimeContext = createContext(null);
+export function StoryRenderMimeProvider({ rendermime, children, }) {
+    return (React.createElement(StoryRenderMimeContext.Provider, { value: rendermime !== null && rendermime !== void 0 ? rendermime : null }, children));
+}
+function useStoryRenderMime() {
+    return useContext(StoryRenderMimeContext);
+}
+const MARKDOWN_MIME = 'text/markdown';
+function disposeRenderer(renderer) {
+    if (renderer.isDisposed) {
+        return;
+    }
+    if (renderer.isAttached) {
+        try {
+            Widget.detach(renderer);
+        }
+        catch (_a) {
+            // Host may already be gone when React unmounts the pane.
+        }
+    }
+    renderer.dispose();
+}
+/** Markdown body for a list-story stage overlay segment. */
+export function ListStoryOverlayMarkdown({ source, onRendered, }) {
+    const rendermime = useStoryRenderMime();
+    const hostRef = useRef(null);
+    useLayoutEffect(() => {
+        const host = hostRef.current;
+        if (!rendermime || !host || !source) {
+            return;
+        }
+        const registry = rendermime.clone();
+        const renderer = registry.createRenderer(MARKDOWN_MIME);
+        const model = new MimeModel({
+            data: { [MARKDOWN_MIME]: source },
+            trusted: false,
+        });
+        let cancelled = false;
+        const run = async () => {
+            if (cancelled) {
+                return;
+            }
+            Widget.attach(renderer, host);
+            if (cancelled) {
+                disposeRenderer(renderer);
+                return;
+            }
+            try {
+                await renderer.renderModel(model);
+            }
+            catch (error) {
+                console.error('Failed to render list story overlay markdown', error);
+                disposeRenderer(renderer);
+                return;
+            }
+            if (cancelled || renderer.isDisposed) {
+                disposeRenderer(renderer);
+                return;
+            }
+            renderer.addClass('jp-MarkdownOutput');
+            requestAnimationFrame(() => {
+                if (!cancelled && !renderer.isDisposed) {
+                    onRendered === null || onRendered === void 0 ? void 0 : onRendered();
+                }
+            });
+        };
+        void run();
+        return () => {
+            cancelled = true;
+            disposeRenderer(renderer);
+        };
+    }, [rendermime, source, onRendered]);
+    useLayoutEffect(() => {
+        if (rendermime || !source) {
+            return;
+        }
+        onRendered === null || onRendered === void 0 ? void 0 : onRendered();
+    }, [rendermime, source, onRendered]);
+    if (!source) {
+        return null;
+    }
+    if (!rendermime) {
+        return (React.createElement("div", { className: "jgis-story-stage-overlay-content" },
+            React.createElement("div", { className: "specta-article-host-widget specta-cell-content" },
+                React.createElement("pre", { className: "jgis-story-overlay-markdown-plain" }, source))));
+    }
+    return (React.createElement("div", { className: "jgis-story-stage-overlay-content" },
+        React.createElement("div", { className: "specta-article-host-widget specta-cell-content" },
+            React.createElement("div", { ref: hostRef }))));
+}

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

@@ -0,0 +1,12 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import type { IListStorySegmentTransition } from "../types/types";
+interface IListStoryStageOverlayProps {
+    model: IJupyterGISModel;
+    segmentTransition: IListStorySegmentTransition | null;
+}
+/**
+ * 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 declare function ListStoryStageOverlay({ model, segmentTransition, }: IListStoryStageOverlayProps): JSX.Element | null;
+export {};

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

@@ -0,0 +1,132 @@
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { ListStoryMapOverlayPanel } from "./ListStoryMapOverlayPanel";
+import { ListStoryOverlayMarkdown } from "./ListStoryOverlayMarkdown";
+import { useCurrentSegmentIndex } from "../hooks/useCurrentSegmentIndex";
+import { getSpectaPresentationCssVars } from "../utils/spectaPresentation";
+import { buildStorySegmentViewItems, getStoryMarkdownFromSlide, } from "../utils/storySegmentViewItems";
+import { getSegmentDisplayMode } from '../utils/listStoryScrollTrack';
+const EMPTY_MARKDOWN_PANE = {
+    type: 'markdown',
+    markdown: '',
+};
+function buildPaneConfig(item, mode) {
+    if (!item) {
+        return EMPTY_MARKDOWN_PANE;
+    }
+    if (mode === 'map') {
+        return { type: 'map', segmentIndex: item.index };
+    }
+    return {
+        type: 'markdown',
+        markdown: getStoryMarkdownFromSlide(item.activeSlide),
+    };
+}
+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));
+}
+/**
+ * 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;
+    const overlayRef = useRef(null);
+    const stackRef = useRef(null);
+    const [stageHeight, setStageHeight] = useState(0);
+    const [transitionTranslatePx, setTransitionTranslatePx] = useState(0);
+    const currentIndex = useCurrentSegmentIndex(model);
+    const story = (_a = model === null || model === void 0 ? void 0 : model.getSelectedStory().story) !== null && _a !== void 0 ? _a : null;
+    const items = useMemo(() => buildStorySegmentViewItems(model, story), [model, story]);
+    const spectaPresentationStyle = useMemo(() => getSpectaPresentationCssVars(story), [
+        story === null || story === void 0 ? void 0 : story.storyType,
+        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 { fromIndex, toIndex, fromPaneConfig, toPaneConfig } = useMemo(() => {
+        if (!model || !activeItem) {
+            return {
+                fromIndex: currentIndex,
+                toIndex: currentIndex,
+                fromPaneConfig: EMPTY_MARKDOWN_PANE,
+                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),
+        };
+    }, [items, activeItem, currentIndex, activeMode, segmentTransition]);
+    const overlayHeight = Math.max(stageHeight, 0);
+    useLayoutEffect(() => {
+        var _a;
+        const parent = (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!parent) {
+            setStageHeight(0);
+            return;
+        }
+        const update = () => {
+            const next = parent.clientHeight;
+            setStageHeight(prev => (prev === next ? prev : next));
+        };
+        update();
+        const ro = new ResizeObserver(update);
+        ro.observe(parent);
+        return () => {
+            ro.disconnect();
+        };
+    }, [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)) {
+                return;
+            }
+            const travel = fromPane.offsetHeight + gap.offsetHeight;
+            setTransitionTranslatePx(prev => (prev === travel ? prev : travel));
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(stack);
+        return () => {
+            ro.disconnect();
+        };
+    }, [isTransitioning, fromIndex, toIndex, fromPaneConfig, toPaneConfig]);
+    const overlaySized = stageHeight > 0;
+    if (!model || !story || !activeItem) {
+        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
+            ? {
+                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 }))));
+}

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

@@ -0,0 +1,6 @@
+import type { IListStoryScrollTrackLayout } from "../types/types";
+interface IListStoryVirtualScrollTrackProps {
+    scrollTrackLayout: IListStoryScrollTrackLayout | null;
+}
+export declare function ListStoryVirtualScrollTrack({ scrollTrackLayout, }: IListStoryVirtualScrollTrackProps): JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export function ListStoryVirtualScrollTrack({ scrollTrackLayout, }) {
+    if (!scrollTrackLayout) {
+        return React.createElement("div", { style: { padding: '1rem' } }, "No segments.");
+    }
+    return (React.createElement("div", { className: "jgis-story-virtual-track", style: { height: scrollTrackLayout.scrollTrackHeight }, "aria-hidden": true }));
+}

package/lib/{panelview/story-maps → features/story}/components/SpectaDesktopView.d.ts

@@ -1,6 +1,7 @@
 import { IJGISStoryMap, IJupyterGISModel, IStorySegmentLayer } from '@jupytergis/schema';
 import { RefObject } from 'react';
-import { type IStoryViewerPanelHandle } from "../StoryViewerPanel";
+import { IStoryViewerPanelHandle } from "../StoryViewerPanel";
+import type { IListStorySegmentTransition } from "../types/types";
 interface ISpectaDesktopViewProps {
     model: IJupyterGISModel;
     isSpecta: boolean;
@@ -17,6 +18,7 @@ interface ISpectaDesktopViewProps {
     hasNext: boolean;
     showGradient: boolean;
     setIndex: (index: number) => void;
+    onSegmentTransitionChange?: (payload: IListStorySegmentTransition | null) => void;
 }
-export declare function SpectaDesktopView({ model, isSpecta, containerRef, storyViewerPanelRef, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, showGradient, setIndex, }: ISpectaDesktopViewProps): JSX.Element;
+export declare function SpectaDesktopView({ model, isSpecta, containerRef, storyViewerPanelRef, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, showGradient, setIndex, onSegmentTransitionChange, }: ISpectaDesktopViewProps): JSX.Element;
 export {};

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

@@ -0,0 +1,67 @@
+import React, { useImperativeHandle, useLayoutEffect, useMemo, } from 'react';
+import { ListStoryVirtualScrollTrack } from "./ListStoryVirtualScrollTrack";
+import { SpectaSingleModeContent } from "./SpectaSingleModeContent";
+import { useListStoryScrollTrackContext } from "../context/ListStoryScrollTrackContext";
+import { useListStoryScroll } from "../hooks/useListStoryScroll";
+import { useStoryScrollState } from "../hooks/useStoryScrollState";
+import { getSpectaPresentationCssVars } from "../utils/spectaPresentation";
+import { buildStorySegmentViewItems } from "../utils/storySegmentViewItems";
+import { STORY_TYPE } from "../../../types";
+import SpectaPresentationProgressBar from "../../../workspace/statusbar/SpectaPresentationProgressBar";
+export function SpectaDesktopView({ model, isSpecta, containerRef, storyViewerPanelRef, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, showGradient, setIndex, onSegmentTransitionChange, }) {
+    const isVerticalScrollView = (storyData === null || storyData === void 0 ? void 0 : storyData.storyType) === STORY_TYPE.verticalScroll;
+    const viewMode = isVerticalScrollView
+        ? 'verticalScroll'
+        : 'single';
+    const sentinelsEnabled = !isVerticalScrollView;
+    const { scrollContainerRef, topSentinelRef, bottomSentinelRef, getAtTop, getAtBottom, } = useStoryScrollState({ currentIndex, sentinelsEnabled });
+    const segmentViewItems = useMemo(() => buildStorySegmentViewItems(model, storyData), [model, storyData]);
+    const spectaPresentationStyle = useMemo(() => getSpectaPresentationCssVars(storyData), [
+        storyData === null || storyData === void 0 ? void 0 : storyData.storyType,
+        storyData === null || storyData === void 0 ? void 0 : storyData.presentationBgColor,
+        storyData === null || storyData === void 0 ? void 0 : storyData.presentationTextColor,
+    ]);
+    const segmentTransitionSyncEnabled = Boolean(onSegmentTransitionChange) && isVerticalScrollView;
+    const { scrollTrackLayout, bindScrollTrackElement } = useListStoryScrollTrackContext();
+    useLayoutEffect(() => {
+        if (!isVerticalScrollView) {
+            bindScrollTrackElement(null);
+            return;
+        }
+        bindScrollTrackElement(scrollContainerRef.current);
+        return () => {
+            bindScrollTrackElement(null);
+        };
+    }, [isVerticalScrollView, bindScrollTrackElement, scrollContainerRef]);
+    useListStoryScroll({
+        enabled: segmentTransitionSyncEnabled,
+        scrollContainerRef,
+        storyData,
+        scrollTrackLayout,
+        items: segmentViewItems,
+        currentIndex,
+        setIndex,
+        onSegmentTransitionChange,
+    });
+    const renderModeContent = {
+        single: () => (React.createElement(SpectaSingleModeContent, { isSpecta: isSpecta, segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext, topSentinelRef: topSentinelRef, bottomSentinelRef: bottomSentinelRef })),
+        verticalScroll: () => (React.createElement(ListStoryVirtualScrollTrack, { scrollTrackLayout: scrollTrackLayout })),
+    };
+    useImperativeHandle(storyViewerPanelRef, () => ({
+        handlePrev,
+        handleNext,
+        spectaMode: isSpecta,
+        hasPrev,
+        hasNext,
+        getAtTop,
+        getAtBottom,
+        getScrollContainer: () => scrollContainerRef.current,
+    }), [handlePrev, handleNext, isSpecta, hasPrev, hasNext, getAtTop, getAtBottom]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "jgis-specta-right-panel-container-mod jgis-right-panel-container", style: showGradient ? undefined : { width: '25%', borderRadius: 0 } },
+            React.createElement("div", { ref: containerRef, className: "jgis-specta-story-panel-container", style: spectaPresentationStyle },
+                React.createElement("div", { ref: scrollContainerRef, className: `jgis-story-viewer-panel-specta-mod ${isVerticalScrollView
+                        ? 'jgis-story-viewer-panel-specta-mod-vertical-scroll'
+                        : ''}`, id: "jgis-story-segment-panel", style: showGradient ? undefined : { width: 'unset' } }, renderModeContent[viewMode]()))),
+        !isVerticalScrollView && React.createElement(SpectaPresentationProgressBar, { model: model })));
+}

package/lib/{panelview/story-maps → features/story}/components/SpectaMobileView.d.ts

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

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

@@ -1,8 +1,8 @@
 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';
-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';
@@ -29,7 +29,7 @@ function getFirstSnapFromSegmentHeader(mainEl, segmentPanelEl, segmentHeaderEl)
     const clamped = Math.max(SNAP_FIRST_MIN, Math.min(SNAP_FIRST_MAX, fraction));
     return clamped;
 }
-export function SpectaMobileView({ model, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, setIndex, }) {
+export function SpectaMobileView({ segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, }) {
     const [container, setContainer] = useState(null);
     const [snapPoints, setSnapPoints] = useState([
         SNAP_FIRST_DEFAULT,
@@ -96,5 +96,5 @@ export function SpectaMobileView({ model, segmentContainerRef, storyData, curren
                 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, { 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 }))))));
+                    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/SpectaSingleModeContent.d.ts

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import StoryViewerPanel from "../StoryViewerPanel";
+export function SpectaSingleModeContent({ isSpecta, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, topSentinelRef, bottomSentinelRef, }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: topSentinelRef, "aria-hidden": true, "data-story-scroll-sentinel": "top", style: { height: 1, minHeight: 1, pointerEvents: 'none' } }),
+        React.createElement(StoryViewerPanel, { isSpecta: isSpecta, segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, segmentNav: { handlePrev, handleNext, hasPrev, hasNext } }),
+        React.createElement("div", { ref: bottomSentinelRef, "aria-hidden": true, "data-story-scroll-sentinel": "bottom", style: { height: 1, minHeight: 1, pointerEvents: 'none' } })));
+}

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

@@ -0,0 +1,15 @@
+import type { IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+import type { IListStoryScrollTrackLayout } from "../types/types";
+interface IListStoryScrollTrackContextValue {
+    scrollTrackLayout: IListStoryScrollTrackLayout | null;
+    bindScrollTrackElement: (element: HTMLDivElement | null) => void;
+}
+interface IListStoryScrollTrackProviderProps {
+    model: IJupyterGISModel;
+    enabled: boolean;
+    children: React.ReactNode;
+}
+export declare function ListStoryScrollTrackProvider({ model, enabled, children, }: IListStoryScrollTrackProviderProps): JSX.Element;
+export declare function useListStoryScrollTrackContext(): IListStoryScrollTrackContextValue;
+export {};