@jupytergis/base 0.11.1 → 0.12.0

package/lib/panelview/leftpanel.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { LayersBodyComponent } from './components/layers';
+import FilterComponent from './filter-panel/Filter';
 import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
 import StacPanel from '../stacBrowser/components/StacPanel';
-import FilterComponent from './components/filter-panel/Filter';
 export const LeftPanel = (props) => {
     var _a;
     const [settings, setSettings] = React.useState(props.model.jgisSettings);
@@ -82,11 +82,11 @@ export const LeftPanel = (props) => {
     }, [layerTree]);
     // Updates story segments array based on layer tree array
     React.useEffect(() => {
-        const { storySegmentId, story } = props.model.getSelectedStory();
+        const { storyId, story } = props.model.getSelectedStory();
         if (!story) {
             return;
         }
-        props.model.sharedModel.updateStoryMap(storySegmentId, Object.assign(Object.assign({}, story), { storySegments: storySegmentLayerTree }));
+        props.model.sharedModel.updateStoryMap(storyId, Object.assign(Object.assign({}, story), { storySegments: storySegmentLayerTree }));
     }, [storySegmentLayerTree]);
     const allLeftTabsDisabled = settings.layersDisabled &&
         settings.stacBrowserDisabled &&
@@ -118,7 +118,7 @@ export const LeftPanel = (props) => {
                 } }, tab.title)))),
             !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" },
+            !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" },
                 React.createElement(FilterComponent, { model: props.model }))),

package/lib/panelview/rightpanel.d.ts

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

package/lib/panelview/rightpanel.js

@@ -1,17 +1,24 @@
 import * as React from 'react';
 import { AnnotationsPanel } from './annotationPanel';
-import { IdentifyPanelComponent } from './components/identify-panel/IdentifyPanel';
-import { PreviewModeSwitch } from './components/story-maps/PreviewModeSwitch';
-import StoryEditorPanel from './components/story-maps/StoryEditorPanel';
-import StoryViewerPanel from './components/story-maps/StoryViewerPanel';
+import { IdentifyPanelComponent } from './identify-panel/IdentifyPanel';
 import { ObjectPropertiesReact } from './objectproperties';
+import { PreviewModeSwitch } from './story-maps/PreviewModeSwitch';
+import StoryEditorPanel from './story-maps/StoryEditorPanel';
+import StoryViewerPanel from './story-maps/StoryViewerPanel';
 import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
 export const RightPanel = props => {
     var _a;
-    const [displayEditor, setDisplayEditor] = React.useState(true);
+    const [editorMode, setEditorMode] = React.useState(true);
     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 [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;
+    // Tab title: "Story Map" in presentation mode, otherwise based on editorMode
+    const storyPanelTitle = storyMapPresentationMode
+        ? 'Story Map'
+        : editorMode
+            ? 'Story Editor'
+            : 'Story Map';
     const tabInfo = [
         !settings.objectPropertiesDisabled && !storyMapPresentationMode
             ? { name: 'objectProperties', title: 'Object Properties' }
@@ -19,7 +26,7 @@ export const RightPanel = props => {
         !settings.storyMapsDisabled
             ? {
                 name: 'storyPanel',
-                title: displayEditor ? 'Story Editor' : 'Story Map',
+                title: storyPanelTitle,
             }
             : false,
         !settings.annotationsDisabled
@@ -40,7 +47,8 @@ export const RightPanel = props => {
             setSettings(Object.assign({}, props.model.jgisSettings));
         };
         const onOptionsChanged = () => {
-            setOptions(Object.assign({}, props.model.getOptions()));
+            const { storyMapPresentationMode } = props.model.getOptions();
+            setStoryMapPresentationMode(storyMapPresentationMode !== null && storyMapPresentationMode !== void 0 ? storyMapPresentationMode : false);
         };
         let currentlyIdentifiedFeatures = undefined;
         const onAwerenessChanged = (_, clients) => {
@@ -69,11 +77,11 @@ export const RightPanel = props => {
     const rightPanelVisible = !settings.rightPanelDisabled && !allRightTabsDisabled;
     const [selectedObjectProperties, setSelectedObjectProperties] = React.useState(undefined);
     const toggleEditor = () => {
-        setDisplayEditor(!displayEditor);
+        setEditorMode(!editorMode);
     };
     return (React.createElement("div", { className: "jgis-right-panel-container", style: { display: rightPanelVisible ? 'block' : 'none' } },
         React.createElement(PanelTabs, { className: "jgis-panel-tabs", curTab: curTab },
-            React.createElement(TabsList, null, tabInfo.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: tab.name, value: tab.name, onClick: () => {
+            React.createElement(TabsList, null, tabInfo.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: `${tab.name}-${tab.title}`, value: tab.name, onClick: () => {
                     if (curTab !== tab.name) {
                         setCurTab(tab.name);
                     }
@@ -84,9 +92,8 @@ export const RightPanel = 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 } },
-                React.createElement("div", { style: { padding: '0 0.5rem 0.5rem 0.5rem' } },
-                    !storyMapPresentationMode && (React.createElement(PreviewModeSwitch, { checked: !displayEditor, onCheckedChange: toggleEditor })),
-                    storyMapPresentationMode || !displayEditor ? (React.createElement(StoryViewerPanel, { model: props.model })) : (React.createElement(StoryEditorPanel, { model: props.model }))))),
+                !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" },
                 React.createElement(AnnotationsPanel, { annotationModel: props.annotationModel, jgisModel: props.model }))),
             !settings.identifyDisabled && (React.createElement(TabsContent, { value: "identifyPanel", className: "jgis-panel-tab-content" },

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { Switch } from "../../../shared/components/Switch";
+import { Switch } from "../../shared/components/Switch";
 export function PreviewModeSwitch({ checked, onCheckedChange, }) {
     return (React.createElement("div", { style: {
             display: 'flex',
             alignItems: 'center',
             gap: '0.5rem',
-            padding: '1rem 1rem 1rem 0',
+            padding: '1rem',
+            paddingBottom: '0',
         } },
         React.createElement("label", { htmlFor: "preview-mode-switch", style: { fontSize: '0.875rem' } }, "Preview Mode"),
         React.createElement(Switch, { id: "preview-mode-switch", checked: checked, onCheckedChange: onCheckedChange })));

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

@@ -0,0 +1,9 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import { CommandRegistry } from '@lumino/commands';
+import React from 'react';
+interface IStoryPanelProps {
+    model: IJupyterGISModel;
+    commands: CommandRegistry;
+}
+export declare function StoryEditorPanel({ model, commands }: IStoryPanelProps): React.JSX.Element;
+export default StoryEditorPanel;

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

@@ -0,0 +1,34 @@
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import jgisSchema from '@jupytergis/schema/lib/schema/project/jgis.json';
+import React, { useMemo } from 'react';
+import { CommandIDs } from "../../constants";
+import { StoryEditorPropertiesForm } from "../../formbuilder/objectform/StoryEditorForm";
+import { Button } from "../../shared/components/Button";
+import { deepCopy } from "../../tools";
+const storyMapSchema = deepCopy(jgisSchema.definitions.jGISStoryMap);
+const AddStorySegmentButton = ({ model, commands }) => (React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
+    React.createElement(Button, { onClick: () => commands.execute(CommandIDs.addStorySegment) },
+        React.createElement(FontAwesomeIcon, { icon: faLink }),
+        " Add Story Segment")));
+export function StoryEditorPanel({ model, commands }) {
+    const { storyId, story } = useMemo(() => {
+        return model.getSelectedStory();
+    }, [model, model.sharedModel.stories]);
+    const syncStoryData = (properties) => {
+        var _a;
+        // Preserve storySegments when updating, since the form removes it from the UI
+        const updatedStory = Object.assign(Object.assign(Object.assign({}, story), properties), { storySegments: (_a = story === null || story === void 0 ? void 0 : story.storySegments) !== null && _a !== void 0 ? _a : [] });
+        model.sharedModel.updateStoryMap(storyId, updatedStory);
+    };
+    if (!story) {
+        return (React.createElement("div", { style: { padding: '1rem' } },
+            React.createElement("p", null, "No Story Map available."),
+            React.createElement("p", null, "Add a Story Segment from the Add Layer menu. A segment captures the current map view. You can add markdown text and an image to each segment to tell your story."),
+            React.createElement(AddStorySegmentButton, { model: model, commands: commands })));
+    }
+    return (React.createElement("div", { className: "jgis-story-editor-panel" },
+        React.createElement(StoryEditorPropertiesForm, { formContext: "update", sourceData: story, model: model, schema: storyMapSchema, syncData: syncStoryData, filePath: model.filePath }),
+        React.createElement(AddStorySegmentButton, { model: model, commands: commands })));
+}
+export default StoryEditorPanel;

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

@@ -4,6 +4,7 @@ interface IStoryNavBarProps {
     onNext: () => void;
     hasPrev: boolean;
     hasNext: boolean;
+    isSpecta: boolean;
 }
-declare function StoryNavBar({ onPrev, onNext, hasPrev, hasNext }: IStoryNavBarProps): React.JSX.Element;
+declare function StoryNavBar({ onPrev, onNext, hasPrev, hasNext, isSpecta, }: IStoryNavBarProps): React.JSX.Element;
 export default StoryNavBar;

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

@@ -1,8 +1,8 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import React from 'react';
-import { Button } from "../../../shared/components/Button";
-function StoryNavBar({ onPrev, onNext, hasPrev, hasNext }) {
-    return (React.createElement("div", { style: { display: 'flex', gap: '8px', justifyContent: 'center' } },
+import { Button } from "../../shared/components/Button";
+function StoryNavBar({ onPrev, onNext, hasPrev, hasNext, isSpecta, }) {
+    return (React.createElement("div", { className: `jgis-story-navbar ${isSpecta ? 'jgis-story-navbar-specta-mod' : ''}` },
         React.createElement(Button, { onClick: onPrev, disabled: !hasPrev, "aria-label": "Previous slide" },
             React.createElement(ChevronLeft, null)),
         React.createElement(Button, { onClick: onNext, disabled: !hasNext, "aria-label": "Next slide" },

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

@@ -0,0 +1,13 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+interface IStoryViewerPanelProps {
+    model: IJupyterGISModel;
+    isSpecta: boolean;
+}
+export interface IStoryViewerPanelHandle {
+    handlePrev: () => void;
+    handleNext: () => void;
+    canNavigate: boolean;
+}
+declare const StoryViewerPanel: React.ForwardRefExoticComponent<IStoryViewerPanelProps & React.RefAttributes<IStoryViewerPanelHandle>>;
+export default StoryViewerPanel;

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

@@ -1,11 +1,14 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import Markdown from 'react-markdown';
-import StoryNavBar from './StoryNavBar';
-function StoryViewerPanel({ model }) {
-    var _a, _b, _c, _d, _e, _f;
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import StoryContentSection from './components/StoryContentSection';
+import StoryImageSection from './components/StoryImageSection';
+import StorySubtitleSection from './components/StorySubtitleSection';
+import StoryTitleSection from './components/StoryTitleSection';
+const StoryViewerPanel = forwardRef(({ model, isSpecta }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const [currentIndexDisplayed, setCurrentIndexDisplayed] = useState(0);
     const [storyData, setStoryData] = useState((_a = model.getSelectedStory().story) !== null && _a !== void 0 ? _a : null);
     const [imageLoaded, setImageLoaded] = useState(false);
+    const panelRef = useRef(null);
     // Derive story segments from story data
     const storySegments = useMemo(() => {
         if (!(storyData === null || storyData === void 0 ? void 0 : storyData.storySegments)) {
@@ -133,34 +136,44 @@ function StoryViewerPanel({ model }) {
             model.sharedModel.awareness.off('change', handleSelectedStorySegmentChange);
         };
     }, [model, storyData]);
-    const handlePrev = () => {
+    const handlePrev = useCallback(() => {
         if (currentIndexDisplayed > 0) {
             const newIndex = currentIndexDisplayed - 1;
             setCurrentIndexDisplayed(newIndex);
         }
-    };
-    const handleNext = () => {
+    }, [currentIndexDisplayed]);
+    const handleNext = useCallback(() => {
         if (currentIndexDisplayed < storySegments.length - 1) {
             const newIndex = currentIndexDisplayed + 1;
             setCurrentIndexDisplayed(newIndex);
         }
-    };
+    }, [currentIndexDisplayed, storySegments.length]);
+    // Expose methods via ref for parent component to use
+    useImperativeHandle(ref, () => ({
+        handlePrev,
+        handleNext,
+        canNavigate: isSpecta,
+    }), [handlePrev, handleNext, storyData, isSpecta]);
     if (!storyData || ((_c = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) === null || _c === void 0 ? void 0 : _c.length) === 0) {
-        return (React.createElement("div", { style: { padding: '0 0.5rem 0.5rem 0.5rem' } },
+        return (React.createElement("div", { style: { padding: '1rem' } },
             React.createElement("p", null, "No Segments available. Add one using the Add Layer menu.")));
     }
-    return (React.createElement("div", { className: "jgis-story-viewer-panel" },
-        ((_d = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _d === void 0 ? void 0 : _d.image) && imageLoaded ? (React.createElement("div", { className: "jgis-story-viewer-image-container" },
-            React.createElement("img", { src: activeSlide.content.image, alt: activeSlide.content.title || 'Story map image', className: "jgis-story-viewer-image" }),
-            React.createElement("h1", { className: "jgis-story-viewer-image-title" }, layerName !== null && layerName !== void 0 ? layerName : `Slide ${currentIndexDisplayed + 1}`),
-            storyData.storyType === 'guided' && (React.createElement("div", { className: "jgis-story-viewer-nav-container" },
-                React.createElement(StoryNavBar, { onPrev: handlePrev, onNext: handleNext, hasPrev: currentIndexDisplayed > 0, hasNext: currentIndexDisplayed < storySegments.length - 1 }))))) : (React.createElement(React.Fragment, null,
-            React.createElement("h1", { className: "jgis-story-viewer-title" }, storyData.title),
-            storyData.storyType === 'guided' && (React.createElement(StoryNavBar, { onPrev: handlePrev, onNext: handleNext, hasPrev: currentIndexDisplayed > 0, hasNext: currentIndexDisplayed < storySegments.length - 1 })))),
-        React.createElement("h2", { className: "jgis-story-viewer-subtitle" }, ((_e = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _e === void 0 ? void 0 : _e.title)
-            ? activeSlide.content.title
-            : 'Slide Title'),
-        ((_f = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _f === void 0 ? void 0 : _f.markdown) && (React.createElement("div", { className: "jgis-story-viewer-content" },
-            React.createElement(Markdown, null, activeSlide.content.markdown)))));
-}
+    const navProps = {
+        onPrev: handlePrev,
+        onNext: handleNext,
+        hasPrev: currentIndexDisplayed > 0,
+        hasNext: currentIndexDisplayed < storySegments.length - 1,
+    };
+    // Get transition time from current segment, default to 0.3s
+    const transitionTime = (_e = (_d = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.transition) === null || _d === void 0 ? void 0 : _d.time) !== null && _e !== void 0 ? _e : 0.3;
+    return (React.createElement("div", { ref: panelRef, className: `jgis-story-viewer-panel ${isSpecta ? 'jgis-story-viewer-panel-specta-mod' : ''}` },
+        React.createElement("div", { key: currentIndexDisplayed, className: "jgis-story-segment-container", style: {
+                animationDuration: `${transitionTime}s`,
+            } },
+            React.createElement("h1", { className: "jgis-story-viewer-title" }, layerName !== null && layerName !== void 0 ? layerName : `Slide ${currentIndexDisplayed + 1}`),
+            ((_f = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _f === void 0 ? void 0 : _f.image) && imageLoaded ? (React.createElement(StoryImageSection, Object.assign({ imageUrl: activeSlide.content.image, imageLoaded: imageLoaded, layerName: layerName !== null && layerName !== void 0 ? layerName : '', slideNumber: currentIndexDisplayed, isSpecta: isSpecta, storyType: (_g = storyData.storyType) !== null && _g !== void 0 ? _g : 'guided' }, navProps))) : (React.createElement(StoryTitleSection, Object.assign({ title: (_h = storyData.title) !== null && _h !== void 0 ? _h : '', isSpecta: isSpecta, storyType: (_j = storyData.storyType) !== null && _j !== void 0 ? _j : 'guided' }, navProps))),
+            React.createElement(StorySubtitleSection, Object.assign({ title: (_l = (_k = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : '', isSpecta: isSpecta }, navProps)),
+            React.createElement(StoryContentSection, { markdown: (_o = (_m = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _m === void 0 ? void 0 : _m.markdown) !== null && _o !== void 0 ? _o : '' }))));
+});
+StoryViewerPanel.displayName = 'StoryViewerPanel';
 export default StoryViewerPanel;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface IStoryContentProps {
+    markdown: string;
+}
+declare function StoryContentSection({ markdown }: IStoryContentProps): React.JSX.Element | null;
+export default StoryContentSection;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import Markdown from 'react-markdown';
+function StoryContentSection({ markdown }) {
+    if (!markdown) {
+        return null;
+    }
+    return (React.createElement("div", { className: "jgis-story-viewer-content" },
+        React.createElement(Markdown, null, markdown)));
+}
+export default StoryContentSection;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+interface IStoryImageSectionProps {
+    imageUrl: string;
+    imageLoaded: boolean;
+    layerName: string;
+    slideNumber: number;
+    isSpecta: boolean;
+    storyType: string;
+    onPrev: () => void;
+    onNext: () => void;
+    hasPrev: boolean;
+    hasNext: boolean;
+}
+declare function StoryImageSection({ imageUrl, imageLoaded, layerName, slideNumber, isSpecta, storyType, onPrev, onNext, hasPrev, hasNext, }: IStoryImageSectionProps): React.JSX.Element | null;
+export default StoryImageSection;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import StoryNavBar from '../StoryNavBar';
+function StoryImageSection({ imageUrl, imageLoaded, layerName, slideNumber, isSpecta, storyType, onPrev, onNext, hasPrev, hasNext, }) {
+    if (!imageLoaded) {
+        return null;
+    }
+    return (React.createElement("div", { className: "jgis-story-viewer-image-section" },
+        React.createElement("div", { className: "jgis-story-viewer-image-container" },
+            React.createElement("img", { src: imageUrl, alt: "Story map image", className: "jgis-story-viewer-image" }),
+            !isSpecta && storyType === 'guided' && (React.createElement("div", { className: "jgis-story-viewer-nav-container" },
+                React.createElement(StoryNavBar, { onPrev: onPrev, onNext: onNext, hasPrev: hasPrev, hasNext: hasNext, isSpecta: isSpecta }))))));
+}
+export default StoryImageSection;

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import StoryNavBar from '../StoryNavBar';
+function StorySubtitleSection({ title, isSpecta, onPrev, onNext, hasPrev, hasNext, }) {
+    return (React.createElement("div", { className: "jgis-story-viewer-subtitle-container" },
+        React.createElement("h2", { className: "jgis-story-viewer-subtitle" }, title || 'Slide Title'),
+        isSpecta && (React.createElement("div", { className: "jgis-story-viewer-nav-container-specta-mod" },
+            React.createElement(StoryNavBar, { onPrev: onPrev, onNext: onNext, hasPrev: hasPrev, hasNext: hasNext, isSpecta: isSpecta })))));
+}
+export default StorySubtitleSection;

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import StoryNavBar from '../StoryNavBar';
+function StoryTitleSection({ title, isSpecta, storyType, onPrev, onNext, hasPrev, hasNext, }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("h1", { className: "jgis-story-viewer-title" }, title),
+        !isSpecta && storyType === 'guided' && (React.createElement(StoryNavBar, { onPrev: onPrev, onNext: onNext, hasPrev: hasPrev, hasNext: hasNext, isSpecta: isSpecta }))));
+}
+export default StoryTitleSection;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface IComboboxItem {
+    value: string;
+    label: string;
+    onSelect?: () => void;
+    selected?: boolean;
+    showCheckIcon?: boolean;
+}
+interface IComboboxProps {
+    items: IComboboxItem[];
+    buttonText: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    className?: string;
+    buttonClassName?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    showSearch?: boolean;
+}
+export declare function Combobox({ items, buttonText, searchPlaceholder, emptyText, className, buttonClassName, open: controlledOpen, onOpenChange: controlledOnOpenChange, showSearch, }: IComboboxProps): React.JSX.Element;
+export {};

package/lib/shared/components/Combobox.js

@@ -0,0 +1,32 @@
+import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
+import React, { useState } from 'react';
+import { Button } from "./Button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./Command";
+import { Popover, PopoverContent, PopoverTrigger, } from "./Popover";
+import { cn } from './utils';
+export function Combobox({ items, buttonText, searchPlaceholder = 'Search...', emptyText = 'No option found.', className, buttonClassName, open: controlledOpen, onOpenChange: controlledOnOpenChange, showSearch = true, }) {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+    const setOpen = controlledOnOpenChange || setInternalOpen;
+    const handleSelect = (item) => {
+        // Don't close automatically - allow multi-select
+        if (item.onSelect) {
+            item.onSelect();
+        }
+    };
+    return (React.createElement(Popover, { open: open, onOpenChange: setOpen },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(Button, { variant: "outline", role: "combobox", "aria-expanded": open, className: cn('jgis-combobox-button', buttonClassName) },
+                React.createElement("span", { className: "jgis-combobox-button-text" }, buttonText),
+                React.createElement(ChevronsUpDownIcon, { className: "jgis-combobox-icon" }))),
+        React.createElement(PopoverContent, { className: cn('jgis-combobox-popover', className) },
+            React.createElement(Command, null,
+                showSearch && React.createElement(CommandInput, { placeholder: searchPlaceholder }),
+                React.createElement(CommandList, null,
+                    React.createElement(CommandEmpty, null, emptyText),
+                    React.createElement(CommandGroup, null, items.map(item => (React.createElement(CommandItem, { key: item.value, value: item.label, onSelect: () => handleSelect(item) },
+                        item.showCheckIcon && (React.createElement(CheckIcon, { className: "jgis-combobox-check-icon", style: {
+                                opacity: item.selected ? 1 : 0,
+                            } })),
+                        item.label)))))))));
+}

package/lib/shared/components/Command.js

@@ -16,7 +16,7 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, }
 import { cn } from './utils';
 function Command(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(CommandPrimitive, Object.assign({ "data-slot": "command", className: cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', className) }, props)));
+    return (React.createElement(CommandPrimitive, Object.assign({ "data-slot": "command", className: cn('jgis-command', className) }, props)));
 }
 function CommandDialog(_a) {
     var { title = 'Command Palette', description = 'Search for a command to run...', children, className, showCloseButton = true } = _a, props = __rest(_a, ["title", "description", "children", "className", "showCloseButton"]);
@@ -24,18 +24,18 @@ function CommandDialog(_a) {
         React.createElement(DialogHeader, { className: "sr-only" },
             React.createElement(DialogTitle, null, title),
             React.createElement(DialogDescription, null, description)),
-        React.createElement(DialogContent, { className: cn('overflow-hidden p-0', className), showCloseButton: showCloseButton },
-            React.createElement(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5" }, children))));
+        React.createElement(DialogContent, { className: cn(className), showCloseButton: showCloseButton },
+            React.createElement(Command, null, children))));
 }
 function CommandInput(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement("div", { "data-slot": "command-input-wrapper", className: "flex h-9 items-center gap-2 border-b px-3" },
-        React.createElement(SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
-        React.createElement(CommandPrimitive.Input, Object.assign({ "data-slot": "command-input", className: cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className) }, props))));
+    return (React.createElement("div", { "data-slot": "command-input-wrapper", className: "jgis-command-input-wrapper" },
+        React.createElement(SearchIcon, { className: "size-4" }),
+        React.createElement(CommandPrimitive.Input, Object.assign({ "data-slot": "command-input", className: cn('jgis-command-input', className) }, props))));
 }
 function CommandList(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(CommandPrimitive.List, Object.assign({ "data-slot": "command-list", className: cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className) }, props)));
+    return (React.createElement(CommandPrimitive.List, Object.assign({ "data-slot": "command-list", className: cn('jgis-command-list', className) }, props)));
 }
 function CommandEmpty(_a) {
     var props = __rest(_a, []);
@@ -43,7 +43,7 @@ function CommandEmpty(_a) {
 }
 function CommandGroup(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(CommandPrimitive.Group, Object.assign({ "data-slot": "command-group", className: cn('text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium', className) }, props)));
+    return (React.createElement(CommandPrimitive.Group, Object.assign({ "data-slot": "command-group", className: cn('jgis-command-group', className) }, props)));
 }
 function CommandSeparator(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
@@ -51,10 +51,10 @@ function CommandSeparator(_a) {
 }
 function CommandItem(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(CommandPrimitive.Item, Object.assign({ "data-slot": "command-item", className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className) }, props)));
+    return (React.createElement(CommandPrimitive.Item, Object.assign({ "data-slot": "command-item", className: cn('jgis-command-item', className) }, props)));
 }
 function CommandShortcut(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement("span", Object.assign({ "data-slot": "command-shortcut", className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className) }, props)));
+    return (React.createElement("span", Object.assign({ "data-slot": "command-shortcut", className: cn('jgis-command-shortcut', className) }, props)));
 }
 export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function Input({ className, type, ...props }: React.ComponentProps<'input'>): React.JSX.Element;
+export { Input };

package/lib/shared/components/Input.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { cn } from './utils';
+function Input(_a) {
+    var { className, type } = _a, props = __rest(_a, ["className", "type"]);
+    return (React.createElement("input", Object.assign({ type: type, "data-slot": "input", className: cn(className) }, props)));
+}
+export { Input };

package/lib/shared/components/Pagination.js

@@ -12,14 +12,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
 import * as React from 'react';
 import { Button } from './Button';
+import { cn } from './utils';
 const Pagination = (_a) => {
     var props = __rest(_a, []);
     return (React.createElement("nav", Object.assign({ role: "navigation", "aria-label": "pagination", className: 'jgis-pagination' }, props)));
 };
 Pagination.displayName = 'Pagination';
 const PaginationContent = React.forwardRef((_a, ref) => {
-    var props = __rest(_a, []);
-    return (React.createElement("ul", Object.assign({ ref: ref, className: 'jgis-pagination-content' }, props)));
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("ul", Object.assign({ ref: ref, className: cn('jgis-pagination-content', className) }, props)));
 });
 PaginationContent.displayName = 'PaginationContent';
 const PaginationItem = React.forwardRef((_a, ref) => {

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

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface ISelectItem {
+    value: string;
+    label: string;
+    onSelect?: () => void;
+}
+interface ISelectProps {
+    items: ISelectItem[];
+    buttonText: string;
+    emptyText?: string;
+    className?: string;
+    buttonClassName?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    showSearch?: boolean;
+    searchPlaceholder?: string;
+}
+export declare function Select({ items, buttonText, emptyText, className, buttonClassName, open: controlledOpen, onOpenChange: controlledOnOpenChange, showSearch, searchPlaceholder, }: ISelectProps): React.JSX.Element;
+export {};