@jupytergis/base 0.12.1 → 0.12.2

package/lib/dialogs/layerBrowserDialog.d.ts

@@ -1,11 +1,11 @@
-import { IJGISFormSchemaRegistry, IJupyterGISModel, IRasterLayerGalleryEntry } from '@jupytergis/schema';
+import { IJGISFormSchemaRegistry, IJupyterGISModel, ILayerGalleryEntry } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import React from 'react';
 interface ILayerBrowserDialogProps {
     model: IJupyterGISModel;
-    registry: IRasterLayerGalleryEntry[];
+    registry: ILayerGalleryEntry[];
     formSchemaRegistry: IJGISFormSchemaRegistry;
     okSignalPromise: PromiseDelegate<Signal<Dialog<any>, number>>;
     cancel: () => void;
@@ -13,7 +13,7 @@ interface ILayerBrowserDialogProps {
 export declare const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps>;
 export interface ILayerBrowserOptions {
     model: IJupyterGISModel;
-    registry: IRasterLayerGalleryEntry[];
+    registry: ILayerGalleryEntry[];
     formSchemaRegistry: IJGISFormSchemaRegistry;
 }
 export declare class LayerBrowserWidget extends Dialog<boolean> {

package/lib/dialogs/layerBrowserDialog.js

@@ -5,14 +5,14 @@ import { PromiseDelegate, UUID } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import React, { useEffect, useState } from 'react';
 import { CreationFormWrapper } from './layerCreationFormDialog';
-import CUSTOM_RASTER_IMAGE from '../../rasterlayer_gallery/custom_raster.png';
+import CUSTOM_RASTER_IMAGE from '../../layer_gallery/custom_raster.png';
 export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okSignalPromise, cancel, }) => {
     const [searchTerm, setSearchTerm] = useState('');
     const [activeLayers, setActiveLayers] = useState([]);
     const [selectedCategory, setSelectedCategory] = useState();
     const [creatingCustomRaster, setCreatingCustomRaster] = useState(false);
     const [galleryWithCategory, setGalleryWithCategory] = useState(registry);
-    const providers = [...new Set(registry.map(item => item.source.provider))];
+    const providers = [...new Set(registry.map(item => item.provider))];
     const filteredGallery = galleryWithCategory.filter(item => item.name.toLowerCase().includes(searchTerm));
     useEffect(() => {
         model.sharedModel.layersChanged.connect(handleLayerChange);
@@ -37,7 +37,7 @@ export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okS
         selectedCategory === null || selectedCategory === void 0 ? void 0 : selectedCategory.classList.remove('jGIS-layer-browser-category-selected');
         const filteredGallery = sameAsOld
             ? registry
-            : registry.filter(item => { var _a; return (_a = item.source.provider) === null || _a === void 0 ? void 0 : _a.includes(categoryTab.innerText); });
+            : registry.filter(item => { var _a; return (_a = item.provider) === null || _a === void 0 ? void 0 : _a.includes(categoryTab.innerText); });
         setGalleryWithCategory(filteredGallery);
         setSearchTerm('');
         setSelectedCategory(sameAsOld ? null : categoryTab);
@@ -52,15 +52,13 @@ export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okS
     const handleTileClick = (tile) => {
         const sourceId = UUID.uuid4();
         const sourceModel = {
-            type: 'RasterSource',
+            type: tile.sourceType,
             name: tile.name,
-            parameters: tile.source,
+            parameters: tile.sourceParameters,
         };
         const layerModel = {
-            type: 'RasterLayer',
-            parameters: {
-                source: sourceId,
-            },
+            type: tile.layerType,
+            parameters: Object.assign(Object.assign({}, tile.layerParameters), { source: sourceId }),
             visible: true,
             name: tile.name + ' Layer',
         };
@@ -113,7 +111,8 @@ export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okS
                 React.createElement("div", { className: "jGIS-layer-browser-text-container" },
                     React.createElement("div", { className: "jGIS-layer-browser-text-info" },
                         React.createElement("h3", { className: "jGIS-layer-browser-text-header jGIS-layer-browser-text-general" }, tile.name)),
-                    React.createElement("p", { className: "jGIS-layer-browser-text-general jGIS-layer-browser-text-source" }, tile.source.attribution))))))));
+                    React.createElement("div", null, tile.sourceType),
+                    React.createElement("p", { className: "jGIS-layer-browser-text-general jGIS-layer-browser-text-source" }, tile.description))))))));
 };
 export class LayerBrowserWidget extends Dialog {
     constructor(options) {

package/lib/formbuilder/objectform/StoryEditorForm.js

@@ -1,5 +1,5 @@
-import { BaseForm } from './baseform';
 import { getCssVarAsColor } from "../../tools";
+import { BaseForm } from './baseform';
 /**
  * The form to modify story map properties.
  */
@@ -10,7 +10,7 @@ export class StoryEditorPropertiesForm extends BaseForm {
         uiSchema.presentationBgColor = {
             'ui:widget': 'color',
         };
-        uiSchema.presentaionTextColor = {
+        uiSchema.presentationTextColor = {
             'ui:widget': 'color',
         };
         // Set default values from theme CSS variables when not already in data
@@ -22,11 +22,11 @@ export class StoryEditorPropertiesForm extends BaseForm {
                 schemaProps.presentationBgColor.default = defaultBg;
             }
         }
-        if ((schemaProps === null || schemaProps === void 0 ? void 0 : schemaProps.presentaionTextColor) &&
-            (data === null || data === void 0 ? void 0 : data.presentaionTextColor) === undefined) {
+        if ((schemaProps === null || schemaProps === void 0 ? void 0 : schemaProps.presentationTextColor) &&
+            (data === null || data === void 0 ? void 0 : data.presentationTextColor) === undefined) {
             const defaultText = getCssVarAsColor('--jp-ui-font-color0');
             if (defaultText) {
-                schemaProps.presentaionTextColor.default = defaultText;
+                schemaProps.presentationTextColor.default = defaultText;
             }
         }
     }

package/lib/mainview/mainView.d.ts

@@ -1,4 +1,4 @@
-import { IAnnotation, IAnnotationModel, IDict, IJGISFilterItem, IJGISFormSchemaRegistry, IJGISLayer, IJGISSource } from '@jupytergis/schema';
+import { IAnnotation, IAnnotationModel, IDict, IJGISFilterItem, IJGISFormSchemaRegistry, IJGISLayer, IJGISSource, IJupyterGISSettings } from '@jupytergis/schema';
 import { User } from '@jupyterlab/services';
 import { IStateDB } from '@jupyterlab/statedb';
 import { Layer } from 'ol/layer';
@@ -10,6 +10,8 @@ interface IProps {
     state?: IStateDB;
     formSchemaRegistry?: IJGISFormSchemaRegistry;
     annotationModel?: IAnnotationModel;
+    /** True when viewport matches (max-width: 768px). Injected by MainViewWithMediaQuery. */
+    isMobile?: boolean;
 }
 interface IStates {
     id: string;
@@ -31,6 +33,7 @@ interface IStates {
     }>;
     displayTemporalController: boolean;
     filterStates: IDict<IJGISFilterItem | undefined>;
+    jgisSettings: IJupyterGISSettings;
     isSpectaPresentation: boolean;
 }
 export declare class MainView extends React.Component<IProps, IStates> {
@@ -136,6 +139,7 @@ export declare class MainView extends React.Component<IProps, IStates> {
     removeLayer(id: string): void;
     private _onClientSharedStateChanged;
     private _onSharedOptionsChanged;
+    private _syncSettingsFromRegistry;
     private _onSettingsChanged;
     private updateOptions;
     private _onViewChanged;
@@ -222,4 +226,6 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _isSpectaPresentationInitialized;
     private _storyScrollHandler;
 }
-export {};
+/** Thin wrapper that injects isMobile from useMediaQuery so MainView can use it in JSX. */
+declare function MainViewWithMediaQuery(props: IProps): React.JSX.Element;
+export { MainViewWithMediaQuery };

package/lib/mainview/mainView.js

@@ -39,6 +39,7 @@ import * as React from 'react';
 import AnnotationFloater from "../annotations/components/AnnotationFloater";
 import { CommandIDs } from "../constants";
 import { LoadingOverlay } from "../shared/components/loading";
+import useMediaQuery from "../shared/hooks/useMediaQuery";
 import StatusBar from "../statusbar/StatusBar";
 import { debounce, isLightTheme, loadFile, throttle } from "../tools";
 import CollaboratorPointers from './CollaboratorPointers';
@@ -47,6 +48,7 @@ import TemporalSlider from './TemporalSlider';
 import { hexToRgb } from '../dialogs/symbology/colorRampUtils';
 import { markerIcon } from '../icons';
 import { LeftPanel, RightPanel } from '../panelview';
+import { MobileSpectaPanel } from '../panelview/story-maps/MobileSpectaPanel';
 import StoryViewerPanel from '../panelview/story-maps/StoryViewerPanel';
 export class MainView extends React.Component {
     constructor(props) {
@@ -529,7 +531,7 @@ export class MainView extends React.Component {
             }
             const story = this._model.getSelectedStory().story;
             const bgColor = story === null || story === void 0 ? void 0 : story.presentationBgColor;
-            const textColor = story === null || story === void 0 ? void 0 : story.presentaionTextColor;
+            const textColor = story === null || story === void 0 ? void 0 : story.presentationTextColor;
             // Set background color
             if (bgColor) {
                 const rgb = hexToRgb(bgColor);
@@ -634,6 +636,9 @@ export class MainView extends React.Component {
         this._model.geolocationChanged.connect(this._handleGeolocationChanged, this);
         this._model.flyToGeometrySignal.connect(this.flyToGeometry, this);
         this._model.highlightFeatureSignal.connect(this.highlightFeatureOnMap, this);
+        Promise.resolve().then(() => {
+            this._syncSettingsFromRegistry();
+        });
         // Watch isIdentifying and clear the highlight when Identify Tool is turned off
         this._model.sharedModel.awareness.on('change', () => {
             var _a;
@@ -653,6 +658,7 @@ export class MainView extends React.Component {
             loadingErrors: [],
             displayTemporalController: false,
             filterStates: {},
+            jgisSettings: this._model.jgisSettings,
             isSpectaPresentation: false,
         };
         this._sources = [];
@@ -1564,8 +1570,16 @@ export class MainView extends React.Component {
             this._isPositionInitialized = true;
         }
     }
-    _onSettingsChanged(sender, key) {
-        if (key !== 'zoomButtonsEnabled' || !this._Map) {
+    async _syncSettingsFromRegistry() {
+        const composite = this._model.jgisSettings;
+        if (composite) {
+            this.setState({ jgisSettings: composite });
+            this._onSettingsChanged();
+        }
+    }
+    _onSettingsChanged() {
+        this.setState({ jgisSettings: this._model.jgisSettings });
+        if (!this._Map) {
             return;
         }
         const enabled = this._model.jgisSettings.zoomButtonsEnabled;
@@ -1795,6 +1809,14 @@ export class MainView extends React.Component {
             if ((jgisLayer === null || jgisLayer === void 0 ? void 0 : jgisLayer.type) === 'StorySegmentLayer') {
                 const layerParams = jgisLayer.parameters;
                 const coords = getCenter(layerParams.extent);
+                // Don't move map if we're already centered on the segment
+                const viewCenter = this._Map.getView().getCenter();
+                const centersEqual = viewCenter !== undefined &&
+                    Math.abs(viewCenter[0] - coords[0]) < 1e-9 &&
+                    Math.abs(viewCenter[1] - coords[1]) < 1e-9;
+                if (centersEqual) {
+                    return;
+                }
                 this._flyToPosition({ x: coords[0], y: coords[1] }, layerParams.zoom, ((_c = layerParams.transition.time) !== null && _c !== void 0 ? _c : 1) * 1000, // seconds -> ms
                 layerParams.transition.type);
                 return;
@@ -2064,11 +2086,18 @@ export class MainView extends React.Component {
                             height: '100%',
                         } },
                         React.createElement("div", { className: "jgis-panels-wrapper" }, !this.state.isSpectaPresentation ? (React.createElement(React.Fragment, null,
-                            this._state && (React.createElement(LeftPanel, { model: this._model, commands: this._mainViewModel.commands, state: this._state })),
-                            this._formSchemaRegistry && this._annotationModel && (React.createElement(RightPanel, { model: this._model, commands: this._mainViewModel.commands, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel })))) : (React.createElement("div", { className: "jgis-specta-right-panel-container-mod jgis-right-panel-container" },
+                            this._state && (React.createElement(LeftPanel, { model: this._model, commands: this._mainViewModel.commands, state: this._state, settings: this.state.jgisSettings })),
+                            this._formSchemaRegistry && this._annotationModel && (React.createElement(RightPanel, { model: this._model, commands: this._mainViewModel.commands, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel, settings: this.state.jgisSettings })))) : this.props.isMobile ? (React.createElement(MobileSpectaPanel, { model: this._model })) : (React.createElement("div", { className: "jgis-specta-right-panel-container-mod jgis-right-panel-container" },
                             React.createElement("div", { ref: this.spectaContainerRef, className: "jgis-specta-story-panel-container" },
-                                React.createElement(StoryViewerPanel, { ref: this.storyViewerPanelRef, model: this._model, isSpecta: this.state.isSpectaPresentation }))))),
+                                React.createElement(StoryViewerPanel, { ref: this.storyViewerPanelRef, model: this._model, isSpecta: this.state.isSpectaPresentation, className: "jgis-story-viewer-panel-specta-mod" }))))),
                         React.createElement("div", { ref: this.controlsToolbarRef, className: "jgis-controls-toolbar" }))),
-                React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale }))));
+                !this.state.isSpectaPresentation && (React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale })))));
     }
 }
+// ! TODO make mainview a modern react component instead of a class
+/** Thin wrapper that injects isMobile from useMediaQuery so MainView can use it in JSX. */
+function MainViewWithMediaQuery(props) {
+    const isMobile = useMediaQuery('(max-width: 768px)');
+    return React.createElement(MainView, Object.assign({}, props, { isMobile: isMobile }));
+}
+export { MainViewWithMediaQuery };

package/lib/mainview/mainviewwidget.js

@@ -1,6 +1,6 @@
 import { ReactWidget } from '@jupyterlab/apputils';
 import * as React from 'react';
-import { MainView } from './mainView';
+import { MainViewWithMediaQuery } from './mainView';
 export class JupyterGISMainViewPanel extends ReactWidget {
     /**
      * Construct a `JupyterGISPanel`.
@@ -12,6 +12,6 @@ export class JupyterGISMainViewPanel extends ReactWidget {
         this._options = options;
     }
     render() {
-        return (React.createElement(MainView, { state: this._state, viewModel: this._options.mainViewModel, formSchemaRegistry: this._options.formSchemaRegistry, annotationModel: this._options.annotationModel }));
+        return (React.createElement(MainViewWithMediaQuery, { state: this._state, viewModel: this._options.mainViewModel, formSchemaRegistry: this._options.formSchemaRegistry, annotationModel: this._options.annotationModel }));
     }
 }

package/lib/panelview/leftpanel.d.ts

@@ -1,4 +1,4 @@
-import { IJupyterGISModel, SelectionType } from '@jupytergis/schema';
+import { IJupyterGISModel, SelectionType, IJupyterGISSettings } from '@jupytergis/schema';
 import { IStateDB } from '@jupyterlab/statedb';
 import { CommandRegistry } from '@lumino/commands';
 import { MouseEvent as ReactMouseEvent } from 'react';
@@ -12,6 +12,7 @@ interface ILeftPanelProps {
     model: IJupyterGISModel;
     state: IStateDB;
     commands: CommandRegistry;
+    settings: IJupyterGISSettings;
 }
 export declare const LeftPanel: React.FC<ILeftPanelProps>;
 export {};

package/lib/panelview/leftpanel.js

@@ -6,32 +6,42 @@ import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/compon
 import StacPanel from '../stacBrowser/components/StacPanel';
 export const LeftPanel = (props) => {
     var _a;
-    const [settings, setSettings] = React.useState(props.model.jgisSettings);
     const [options, setOptions] = React.useState(props.model.getOptions());
     const storyMapPresentationMode = (_a = options.storyMapPresentationMode) !== null && _a !== void 0 ? _a : false;
     const [layerTree, setLayerTree] = React.useState(props.model.getLayerTree());
+    const hasSyncedInitialSelectionRef = React.useRef(false);
     const tabInfo = [
-        !settings.layersDisabled ? { name: 'layers', title: 'Layers' } : false,
-        !settings.stacBrowserDisabled && !storyMapPresentationMode
+        !props.settings.layersDisabled
+            ? { name: 'layers', title: 'Layers' }
+            : false,
+        !props.settings.stacBrowserDisabled && !storyMapPresentationMode
             ? { name: 'stac', title: 'Stac Browser' }
             : false,
-        !settings.filtersDisabled && !storyMapPresentationMode
+        !props.settings.filtersDisabled && !storyMapPresentationMode
             ? { name: 'filters', title: 'Filters' }
             : false,
-        !settings.storyMapsDisabled
+        !props.settings.storyMapsDisabled
             ? { name: 'segments', title: 'Segments' }
             : false,
     ].filter(Boolean);
     const [curTab, setCurTab] = React.useState(tabInfo.length > 0 ? tabInfo[0].name : undefined);
     React.useEffect(() => {
-        const onSettingsChanged = () => {
-            setSettings(Object.assign({}, props.model.jgisSettings));
-        };
         const onOptionsChanged = () => {
             setOptions(Object.assign({}, props.model.getOptions()));
         };
         const updateLayerTree = () => {
-            setLayerTree(props.model.getLayerTree() || []);
+            const freshTree = props.model.getLayerTree() || [];
+            setLayerTree(freshTree);
+            // Sync selected to top layer/group only the first time the tree has items
+            if (!hasSyncedInitialSelectionRef.current && freshTree.length > 0) {
+                hasSyncedInitialSelectionRef.current = true;
+                const lastItem = freshTree[freshTree.length - 1];
+                const lastId = typeof lastItem === 'string' ? lastItem : lastItem === null || lastItem === void 0 ? void 0 : lastItem.name;
+                const lastType = typeof lastItem === 'string' ? 'layer' : 'group';
+                if (lastId) {
+                    props.model.syncSelected({ [lastId]: { type: lastType } }, props.model.getClientId().toString());
+                }
+            }
             // Need to let command know when segments get populated
             props.commands.notifyCommandChanged(CommandIDs.toggleStoryPresentationMode);
         };
@@ -39,14 +49,12 @@ export const LeftPanel = (props) => {
             props.model.syncSelected({ [payload.storySegmentId]: { type: 'layer' } }, props.model.getClientId().toString());
             setCurTab('segments');
         };
-        props.model.settingsChanged.connect(onSettingsChanged);
         props.model.sharedOptionsChanged.connect(onOptionsChanged);
         props.model.sharedModel.layersChanged.connect(updateLayerTree);
         props.model.sharedModel.layerTreeChanged.connect(updateLayerTree);
         props.model.segmentAdded.connect(onSegmentAdded);
         updateLayerTree();
         return () => {
-            props.model.settingsChanged.disconnect(onSettingsChanged);
             props.model.sharedOptionsChanged.disconnect(onOptionsChanged);
             props.model.sharedModel.layersChanged.disconnect(updateLayerTree);
             props.model.sharedModel.layerTreeChanged.disconnect(updateLayerTree);
@@ -110,11 +118,11 @@ export const LeftPanel = (props) => {
         }
         props.model.sharedModel.updateStoryMap(storyId, Object.assign(Object.assign({}, story), { storySegments: storySegmentLayerTree }));
     }, [storySegmentLayerTree]);
-    const allLeftTabsDisabled = settings.layersDisabled &&
-        settings.stacBrowserDisabled &&
-        settings.filtersDisabled &&
-        settings.storyMapsDisabled;
-    const leftPanelVisible = !settings.leftPanelDisabled && !allLeftTabsDisabled;
+    const allLeftTabsDisabled = props.settings.layersDisabled &&
+        props.settings.stacBrowserDisabled &&
+        props.settings.filtersDisabled &&
+        props.settings.storyMapsDisabled;
+    const leftPanelVisible = !props.settings.leftPanelDisabled && !allLeftTabsDisabled;
     return (React.createElement("div", { className: "jgis-left-panel-container", style: { display: leftPanelVisible ? 'block' : 'none' } },
         React.createElement(PanelTabs, { curTab: curTab, className: "jgis-panel-tabs" },
             React.createElement(TabsList, null, tabInfo.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: tab.name, value: tab.name, onClick: () => {
@@ -125,12 +133,12 @@ export const LeftPanel = (props) => {
                         setCurTab('');
                     }
                 } }, tab.title)))),
-            !settings.layersDisabled && (React.createElement(TabsContent, { value: "layers", className: "jgis-panel-tab-content jp-gis-layerPanel" },
+            !props.settings.layersDisabled && (React.createElement(TabsContent, { value: "layers", className: "jgis-panel-tab-content jp-gis-layerPanel" },
                 React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: filteredLayerTree }))),
-            !settings.stacBrowserDisabled && (React.createElement(TabsContent, { value: "stac", className: "jgis-panel-tab-content jgis-panel-tab-content-stac-panel" },
+            !props.settings.stacBrowserDisabled && (React.createElement(TabsContent, { value: "stac", className: "jgis-panel-tab-content jgis-panel-tab-content-stac-panel" },
                 React.createElement(StacPanel, { model: props.model }))),
-            !settings.filtersDisabled && (React.createElement(TabsContent, { value: "filters", className: "jgis-panel-tab-content" },
+            !props.settings.filtersDisabled && (React.createElement(TabsContent, { value: "filters", className: "jgis-panel-tab-content" },
                 React.createElement(FilterComponent, { model: props.model }))),
-            !settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "segments", className: "jgis-panel-tab-content" },
+            !props.settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "segments", className: "jgis-panel-tab-content" },
                 React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: storySegmentLayerTree }))))));
 };

package/lib/panelview/rightpanel.d.ts

@@ -1,4 +1,4 @@
-import { IAnnotationModel, IJGISFormSchemaRegistry, IJupyterGISModel } from '@jupytergis/schema';
+import { IAnnotationModel, IJGISFormSchemaRegistry, IJupyterGISModel, IJupyterGISSettings } from '@jupytergis/schema';
 import { CommandRegistry } from '@lumino/commands';
 import * as React from 'react';
 interface IRightPanelProps {
@@ -6,6 +6,7 @@ interface IRightPanelProps {
     annotationModel: IAnnotationModel;
     model: IJupyterGISModel;
     commands: CommandRegistry;
+    settings: IJupyterGISSettings;
 }
 export declare const RightPanel: React.FC<IRightPanelProps>;
 export {};

package/lib/panelview/rightpanel.js

@@ -9,7 +9,6 @@ import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/compon
 export const RightPanel = props => {
     var _a;
     const [editorMode, setEditorMode] = React.useState(true);
-    const [settings, setSettings] = React.useState(props.model.jgisSettings);
     const [storyMapPresentationMode, setStoryMapPresentationMode] = React.useState((_a = props.model.getOptions().storyMapPresentationMode) !== null && _a !== void 0 ? _a : false);
     // Only show editor when not in presentation mode and editorMode is true
     const showEditor = !storyMapPresentationMode && editorMode;
@@ -20,19 +19,19 @@ export const RightPanel = props => {
             ? 'Story Editor'
             : 'Story Map';
     const tabInfo = [
-        !settings.objectPropertiesDisabled && !storyMapPresentationMode
+        !props.settings.objectPropertiesDisabled && !storyMapPresentationMode
             ? { name: 'objectProperties', title: 'Object Properties' }
             : false,
-        !settings.storyMapsDisabled
+        !props.settings.storyMapsDisabled
             ? {
                 name: 'storyPanel',
                 title: storyPanelTitle,
             }
             : false,
-        !settings.annotationsDisabled
+        !props.settings.annotationsDisabled
             ? { name: 'annotations', title: 'Annotations' }
             : false,
-        !settings.identifyDisabled
+        !props.settings.identifyDisabled
             ? { name: 'identifyPanel', title: 'Identified Features' }
             : false,
     ].filter(Boolean);
@@ -43,9 +42,6 @@ export const RightPanel = props => {
         return tabInfo.length > 0 ? tabInfo[0].name : '';
     });
     React.useEffect(() => {
-        const onSettingsChanged = () => {
-            setSettings(Object.assign({}, props.model.jgisSettings));
-        };
         const onOptionsChanged = () => {
             const { storyMapPresentationMode } = props.model.getOptions();
             setStoryMapPresentationMode(storyMapPresentationMode !== null && storyMapPresentationMode !== void 0 ? storyMapPresentationMode : false);
@@ -63,19 +59,17 @@ export const RightPanel = props => {
                 setCurTab('identifyPanel');
             }
         };
-        props.model.settingsChanged.connect(onSettingsChanged);
         props.model.sharedOptionsChanged.connect(onOptionsChanged);
         props.model.clientStateChanged.connect(onAwerenessChanged);
         return () => {
-            props.model.settingsChanged.disconnect(onSettingsChanged);
             props.model.sharedOptionsChanged.disconnect(onOptionsChanged);
             props.model.clientStateChanged.disconnect(onAwerenessChanged);
         };
     }, [props.model]);
-    const allRightTabsDisabled = settings.objectPropertiesDisabled &&
-        settings.annotationsDisabled &&
-        settings.identifyDisabled;
-    const rightPanelVisible = !settings.rightPanelDisabled && !allRightTabsDisabled;
+    const allRightTabsDisabled = props.settings.objectPropertiesDisabled &&
+        props.settings.annotationsDisabled &&
+        props.settings.identifyDisabled;
+    const rightPanelVisible = !props.settings.rightPanelDisabled && !allRightTabsDisabled;
     const [selectedObjectProperties, setSelectedObjectProperties] = React.useState(undefined);
     const toggleEditor = () => {
         setEditorMode(!editorMode);
@@ -90,13 +84,13 @@ export const RightPanel = props => {
                         setCurTab('');
                     }
                 } }, tab.title)))),
-            !settings.objectPropertiesDisabled && (React.createElement(TabsContent, { value: "objectProperties", className: "jgis-panel-tab-content" },
+            !props.settings.objectPropertiesDisabled && (React.createElement(TabsContent, { value: "objectProperties", className: "jgis-panel-tab-content" },
                 React.createElement(ObjectPropertiesReact, { setSelectedObject: setSelectedObjectProperties, selectedObject: selectedObjectProperties, formSchemaRegistry: props.formSchemaRegistry, model: props.model }))),
-            !settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "storyPanel", className: "jgis-panel-tab-content", style: { paddingTop: 0 } },
+            !props.settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "storyPanel", className: "jgis-panel-tab-content", style: { paddingTop: 0 } },
                 !storyMapPresentationMode && (React.createElement(PreviewModeSwitch, { checked: !editorMode, onCheckedChange: toggleEditor })),
                 showEditor ? (React.createElement(StoryEditorPanel, { model: props.model, commands: props.commands })) : (React.createElement(StoryViewerPanel, { model: props.model, isSpecta: false })))),
-            !settings.annotationsDisabled && (React.createElement(TabsContent, { value: "annotations", className: "jgis-panel-tab-content" },
+            !props.settings.annotationsDisabled && (React.createElement(TabsContent, { value: "annotations", className: "jgis-panel-tab-content" },
                 React.createElement(AnnotationsPanel, { annotationModel: props.annotationModel, jgisModel: props.model }))),
-            !settings.identifyDisabled && (React.createElement(TabsContent, { value: "identifyPanel", className: "jgis-panel-tab-content" },
+            !props.settings.identifyDisabled && (React.createElement(TabsContent, { value: "identifyPanel", className: "jgis-panel-tab-content" },
                 React.createElement(IdentifyPanelComponent, { model: props.model }))))));
 };

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

@@ -0,0 +1,7 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+interface IMobileSpectaPanelProps {
+    model: IJupyterGISModel;
+}
+export declare function MobileSpectaPanel({ model }: IMobileSpectaPanelProps): React.JSX.Element;
+export {};

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

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

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

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