@jupytergis/base 0.15.0 → 0.16.0-alpha.1

package/lib/features/story/StoryViewerPanel.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { STORY_TYPE } from "../../types";
+import StoryContentSection from './components/StoryContentSection';
+import StoryImageSection from './components/StoryImageSection';
+import StoryNavBar from './components/StoryNavBar';
+import StorySubtitleSection from './components/StorySubtitleSection';
+import StoryTitleSection from './components/StoryTitleSection';
+import { useStoryImagePreload } from './hooks/useStoryImagePreload';
+/**
+ * Returns which section should render the nav bar, or null if nav should be hidden.
+ */
+function getStoryNavPlacement(isSpecta, hasImage, storyType, isMobile) {
+    if (storyType === STORY_TYPE.verticalScroll) {
+        return null;
+    }
+    if (storyType === STORY_TYPE.unguided) {
+        return isSpecta && !isMobile ? 'subtitle-specta' : null;
+    }
+    if (storyType === STORY_TYPE.guided) {
+        if (isSpecta) {
+            return isMobile ? null : 'subtitle-specta';
+        }
+        return hasImage ? 'over-image' : 'below-title';
+    }
+    return null;
+}
+/**
+ * Story viewer (presentational). Receives story state and callbacks from parent.
+ * Desktop scroll/sentinel/imperative handle live in SpectaDesktopView.
+ */
+function StoryViewerPanel({ isSpecta, isMobile = false, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, segmentNav, disableSegmentAnimation = false, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const imageLoaded = useStoryImagePreload((_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _a === void 0 ? void 0 : _a.image);
+    if (!storyData || ((_b = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) === null || _b === void 0 ? void 0 : _b.length) === 0) {
+        return (React.createElement("div", { style: { padding: '1rem' } },
+            React.createElement("p", null, "No Segments available. Add one using the Add Layer menu.")));
+    }
+    const hasImage = !!(((_c = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _c === void 0 ? void 0 : _c.image) && imageLoaded);
+    const storyType = (_d = storyData.storyType) !== null && _d !== void 0 ? _d : STORY_TYPE.guided;
+    const navPlacement = getStoryNavPlacement(isSpecta, hasImage, storyType, isMobile);
+    const navSlot = navPlacement !== null && segmentNav ? (React.createElement(StoryNavBar, { placement: navPlacement, onPrev: segmentNav.handlePrev, onNext: segmentNav.handleNext, hasPrev: segmentNav.hasPrev, hasNext: segmentNav.hasNext })) : null;
+    const transitionTime = (_f = (_e = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.transition) === null || _e === void 0 ? void 0 : _e.time) !== null && _f !== void 0 ? _f : 0.3;
+    const segmentAnimationEnabled = !disableSegmentAnimation;
+    const segmentContainerKey = segmentAnimationEnabled
+        ? currentIndex
+        : undefined;
+    const segmentContainerClassName = segmentAnimationEnabled
+        ? 'jgis-story-segment-container'
+        : 'jgis-story-segment-container jgis-story-segment-container--no-segment-animation';
+    const segmentContainerStyle = segmentAnimationEnabled
+        ? { animationDuration: `${transitionTime}s` }
+        : undefined;
+    return (React.createElement("div", { className: storyData.storyType !== STORY_TYPE.verticalScroll
+            ? 'jgis-story-viewer-panel'
+            : '' },
+        React.createElement("div", { ref: segmentContainerRef, key: segmentContainerKey, className: segmentContainerClassName, style: segmentContainerStyle },
+            React.createElement("div", { id: "jgis-story-segment-header" },
+                React.createElement("h1", { className: "jgis-story-viewer-title" }, layerName !== null && layerName !== void 0 ? layerName : `Slide ${currentIndex + 1}`),
+                ((_g = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _g === void 0 ? void 0 : _g.image) && imageLoaded ? (React.createElement(StoryImageSection, { imageUrl: activeSlide.content.image, imageLoaded: imageLoaded, layerName: layerName !== null && layerName !== void 0 ? layerName : '', slideNumber: currentIndex, navSlot: navPlacement === 'over-image' ? navSlot : null })) : (React.createElement(StoryTitleSection, { title: (_h = storyData.title) !== null && _h !== void 0 ? _h : '', navSlot: navPlacement === 'below-title' ? navSlot : null })),
+                React.createElement(StorySubtitleSection, { title: (_k = (_j = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '', navSlot: navPlacement === 'subtitle-specta' ? navSlot : null })),
+            React.createElement("div", { id: "jgis-story-segment-content" },
+                React.createElement(StoryContentSection, { markdown: (_m = (_l = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _l === void 0 ? void 0 : _l.markdown) !== null && _m !== void 0 ? _m : '' })))));
+}
+export default StoryViewerPanel;

package/lib/features/story/__tests__/fixtures/listStoryTestItems.d.ts

@@ -0,0 +1,9 @@
+import { IListStoryScrollTrackSegment, IStorySegmentViewItem } from '../../types/types';
+export declare function storyItem(id: string, index: number, contentMode: 'map' | 'markdown', markdown?: string): IStorySegmentViewItem;
+export interface IListStoryScrollTrackFixtureOptions {
+    items: IStorySegmentViewItem[];
+    viewportHeight: number;
+    mapViewportHeight?: number;
+    heightsById?: Readonly<Record<string, number>>;
+}
+export declare function layoutSegments(options: IListStoryScrollTrackFixtureOptions): IListStoryScrollTrackSegment[];

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,11 @@
+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.
+ */
+export declare function ListStoryStageOverlay({ model, segmentTransition, }: IListStoryStageOverlayProps): JSX.Element | null;
+export {};

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

@@ -0,0 +1,150 @@
+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';
+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));
+}
+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.
+ */
+export function ListStoryStageOverlay({ model, segmentTransition, }) {
+    var _a, _b;
+    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 activeItem = items.find(item => item.index === currentIndex);
+    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 || !transition) {
+            return {
+                fromIndex: currentIndex,
+                toIndex: currentIndex,
+                fromPaneConfig: EMPTY_MARKDOWN_PANE,
+                toPaneConfig: EMPTY_MARKDOWN_PANE,
+            };
+        }
+        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,
+        };
+        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;
+        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(() => {
+        const stack = stackRef.current;
+        if (!stack) {
+            return;
+        }
+        const measure = () => {
+            const fromPane = stack.querySelector('[data-pane="from"]');
+            if (!(fromPane instanceof HTMLElement)) {
+                return;
+            }
+            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();
+        const ro = new ResizeObserver(measure);
+        ro.observe(stack);
+        return () => {
+            ro.disconnect();
+        };
+    }, [fromIndex, toIndex, fromPaneConfig, toPaneConfig, intraSegmentScroll]);
+    const overlaySized = stageHeight > 0;
+    if (!model || !story || !activeItem || !transition) {
+        return null;
+    }
+    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`,
+            }
+            : {})) },
+        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/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 {};