@jupytergis/base 0.10.1 → 0.11.1

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

@@ -0,0 +1,166 @@
+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;
+    const [currentIndexDisplayed, setCurrentIndexDisplayed] = useState(0);
+    const [storyData, setStoryData] = useState((_a = model.getSelectedStory().story) !== null && _a !== void 0 ? _a : null);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    // Derive story segments from story data
+    const storySegments = useMemo(() => {
+        if (!(storyData === null || storyData === void 0 ? void 0 : storyData.storySegments)) {
+            return [];
+        }
+        return storyData.storySegments
+            .map(storySegmentId => model.getLayer(storySegmentId))
+            .filter((layer) => layer !== undefined);
+    }, [storyData, model]);
+    // Derive current story segment from story segments and currentIndexDisplayed
+    const currentStorySegment = useMemo(() => {
+        return storySegments[currentIndexDisplayed];
+    }, [storySegments, currentIndexDisplayed]);
+    // Derive active slide and layer name from current story segment
+    const activeSlide = useMemo(() => {
+        return currentStorySegment === null || currentStorySegment === void 0 ? void 0 : currentStorySegment.parameters;
+    }, [currentStorySegment]);
+    const layerName = useMemo(() => {
+        var _a;
+        return (_a = currentStorySegment === null || currentStorySegment === void 0 ? void 0 : currentStorySegment.name) !== null && _a !== void 0 ? _a : '';
+    }, [currentStorySegment]);
+    // Derive story segment ID for zooming
+    const currentStorySegmentId = useMemo(() => {
+        var _a;
+        return (_a = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) === null || _a === void 0 ? void 0 : _a[currentIndexDisplayed];
+    }, [storyData, currentIndexDisplayed]);
+    const zoomToCurrentLayer = () => {
+        if (currentStorySegmentId) {
+            model.centerOnPosition(currentStorySegmentId);
+        }
+    };
+    const setSelectedLayerByIndex = useCallback((index) => {
+        var _a;
+        const storySegmentId = (_a = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) === null || _a === void 0 ? void 0 : _a[index];
+        if (storySegmentId) {
+            model.selected = {
+                [storySegmentId]: {
+                    type: 'layer',
+                },
+            };
+        }
+    }, [storyData, model]);
+    useEffect(() => {
+        const updateStory = () => {
+            const { story } = model.getSelectedStory();
+            setStoryData(story !== null && story !== void 0 ? story : null);
+            // Reset to first slide when story changes
+            setCurrentIndexDisplayed(0);
+        };
+        updateStory();
+        model.sharedModel.storyMapsChanged.connect(updateStory);
+        return () => {
+            model.sharedModel.storyMapsChanged.disconnect(updateStory);
+        };
+    }, [model]);
+    // Prefetch image when slide changes
+    useEffect(() => {
+        var _a;
+        const imageUrl = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _a === void 0 ? void 0 : _a.image;
+        if (!imageUrl) {
+            setImageLoaded(false);
+            return;
+        }
+        // Reset state
+        setImageLoaded(false);
+        // Preload the image
+        const img = new Image();
+        img.onload = () => {
+            setImageLoaded(true);
+        };
+        img.onerror = () => {
+            setImageLoaded(false);
+        };
+        img.src = imageUrl;
+        // Cleanup: abort loading if component unmounts or slide changes
+        return () => {
+            img.onload = null;
+            img.onerror = null;
+        };
+    }, [(_b = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _b === void 0 ? void 0 : _b.image]);
+    // Auto-zoom when slide changes
+    useEffect(() => {
+        if (currentStorySegmentId) {
+            zoomToCurrentLayer();
+        }
+    }, [currentStorySegmentId, model]);
+    // Set selected layer on initial render and when story data changes
+    useEffect(() => {
+        if ((storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) && currentIndexDisplayed >= 0) {
+            setSelectedLayerByIndex(currentIndexDisplayed);
+        }
+    }, [storyData, currentIndexDisplayed, setSelectedLayerByIndex]);
+    // Listen for layer selection changes in unguided mode
+    useEffect(() => {
+        // ! TODO this logic (getting a single selected layer) is also in the processing index.ts, move to tools
+        const handleSelectedStorySegmentChange = () => {
+            var _a, _b;
+            // This is just to update the displayed content
+            // So bail early if we don't need to do that
+            if (!storyData || storyData.storyType !== 'unguided') {
+                return;
+            }
+            const localState = model.sharedModel.awareness.getLocalState();
+            if (!localState || !((_a = localState['selected']) === null || _a === void 0 ? void 0 : _a.value)) {
+                return;
+            }
+            const selectedLayers = Object.keys(localState['selected'].value);
+            // Ensure only one layer is selected
+            if (selectedLayers.length !== 1) {
+                return;
+            }
+            const selectedLayerId = selectedLayers[0];
+            const selectedLayer = model.getLayer(selectedLayerId);
+            if (!selectedLayer || selectedLayer.type !== 'StorySegmentLayer') {
+                return;
+            }
+            const index = (_b = storyData.storySegments) === null || _b === void 0 ? void 0 : _b.indexOf(selectedLayerId);
+            if (index === undefined || index === -1) {
+                return;
+            }
+            setCurrentIndexDisplayed(index);
+        };
+        model.sharedModel.awareness.on('change', handleSelectedStorySegmentChange);
+        return () => {
+            model.sharedModel.awareness.off('change', handleSelectedStorySegmentChange);
+        };
+    }, [model, storyData]);
+    const handlePrev = () => {
+        if (currentIndexDisplayed > 0) {
+            const newIndex = currentIndexDisplayed - 1;
+            setCurrentIndexDisplayed(newIndex);
+        }
+    };
+    const handleNext = () => {
+        if (currentIndexDisplayed < storySegments.length - 1) {
+            const newIndex = currentIndexDisplayed + 1;
+            setCurrentIndexDisplayed(newIndex);
+        }
+    };
+    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' } },
+            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)))));
+}
+export default StoryViewerPanel;

package/lib/panelview/leftpanel.js

@@ -4,26 +4,106 @@ import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/compon
 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);
+    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());
     React.useEffect(() => {
         const onSettingsChanged = () => {
             setSettings(Object.assign({}, props.model.jgisSettings));
         };
+        const onOptionsChanged = () => {
+            setOptions(Object.assign({}, props.model.getOptions()));
+        };
+        const updateLayerTree = () => {
+            setLayerTree(props.model.getLayerTree() || []);
+        };
         props.model.settingsChanged.connect(onSettingsChanged);
+        props.model.sharedOptionsChanged.connect(onOptionsChanged);
+        props.model.sharedModel.layersChanged.connect(updateLayerTree);
+        props.model.sharedModel.layerTreeChanged.connect(updateLayerTree);
+        updateLayerTree();
         return () => {
             props.model.settingsChanged.disconnect(onSettingsChanged);
+            props.model.sharedOptionsChanged.disconnect(onOptionsChanged);
+            props.model.sharedModel.layersChanged.disconnect(updateLayerTree);
+            props.model.sharedModel.layerTreeChanged.disconnect(updateLayerTree);
         };
     }, [props.model]);
+    // Since story segments are technically layers they are stored in the layer tree, so we separate them
+    // from regular layers. Process the tree once to build both filtered and story segment trees.
+    const { filteredLayerTree, storySegmentLayerTree } = React.useMemo(() => {
+        const filtered = [];
+        const storySegments = [];
+        const processLayer = (layer) => {
+            if (typeof layer === 'string') {
+                const layerData = props.model.getLayer(layer);
+                const isStorySegment = (layerData === null || layerData === void 0 ? void 0 : layerData.type) === 'StorySegmentLayer';
+                return {
+                    filtered: isStorySegment ? null : layer,
+                    storySegment: isStorySegment ? layer : null,
+                };
+            }
+            // For layer groups, recursively process their layers
+            const filteredGroupLayers = [];
+            const storySegmentGroupLayers = [];
+            for (const groupLayer of layer.layers) {
+                const result = processLayer(groupLayer);
+                if (result.filtered !== null) {
+                    filteredGroupLayers.push(result.filtered);
+                }
+                if (result.storySegment !== null) {
+                    storySegmentGroupLayers.push(result.storySegment);
+                }
+            }
+            return {
+                filtered: filteredGroupLayers.length > 0
+                    ? Object.assign(Object.assign({}, layer), { layers: filteredGroupLayers }) : null,
+                storySegment: storySegmentGroupLayers.length > 0
+                    ? Object.assign(Object.assign({}, layer), { layers: storySegmentGroupLayers }) : null,
+            };
+        };
+        for (const layer of layerTree) {
+            const result = processLayer(layer);
+            if (result.filtered !== null) {
+                filtered.push(result.filtered);
+            }
+            if (result.storySegment !== null) {
+                storySegments.push(result.storySegment);
+            }
+        }
+        // Reverse filteredLayerTree before returning
+        filtered.reverse();
+        return {
+            filteredLayerTree: filtered,
+            storySegmentLayerTree: storySegments,
+        };
+    }, [layerTree]);
+    // Updates story segments array based on layer tree array
+    React.useEffect(() => {
+        const { storySegmentId, story } = props.model.getSelectedStory();
+        if (!story) {
+            return;
+        }
+        props.model.sharedModel.updateStoryMap(storySegmentId, Object.assign(Object.assign({}, story), { storySegments: storySegmentLayerTree }));
+    }, [storySegmentLayerTree]);
     const allLeftTabsDisabled = settings.layersDisabled &&
         settings.stacBrowserDisabled &&
-        settings.filtersDisabled;
+        settings.filtersDisabled &&
+        settings.storyMapsDisabled;
     const leftPanelVisible = !settings.leftPanelDisabled && !allLeftTabsDisabled;
     const tabInfo = [
         !settings.layersDisabled ? { name: 'layers', title: 'Layers' } : false,
-        !settings.stacBrowserDisabled
+        !settings.stacBrowserDisabled && !storyMapPresentationMode
             ? { name: 'stac', title: 'Stac Browser' }
             : false,
-        !settings.filtersDisabled ? { name: 'filters', title: 'Filters' } : false,
+        !settings.filtersDisabled && !storyMapPresentationMode
+            ? { name: 'filters', title: 'Filters' }
+            : false,
+        !settings.storyMapsDisabled
+            ? { name: 'segments', title: 'Segments' }
+            : false,
     ].filter(Boolean);
     const [curTab, setCurTab] = React.useState(tabInfo.length > 0 ? tabInfo[0].name : undefined);
     return (React.createElement("div", { className: "jgis-left-panel-container", style: { display: leftPanelVisible ? 'block' : 'none' } },
@@ -37,9 +117,11 @@ 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 }))),
+                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" },
                 React.createElement(StacPanel, { model: props.model }))),
             !settings.filtersDisabled && (React.createElement(TabsContent, { value: "filters", className: "jgis-panel-tab-content" },
-                React.createElement(FilterComponent, { model: props.model }))))));
+                React.createElement(FilterComponent, { model: props.model }))),
+            !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.js

@@ -1,14 +1,27 @@
 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 { ObjectPropertiesReact } from './objectproperties';
 import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
 export const RightPanel = props => {
+    var _a;
+    const [displayEditor, setDisplayEditor] = 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 tabInfo = [
-        !settings.objectPropertiesDisabled
+        !settings.objectPropertiesDisabled && !storyMapPresentationMode
             ? { name: 'objectProperties', title: 'Object Properties' }
             : false,
+        !settings.storyMapsDisabled
+            ? {
+                name: 'storyPanel',
+                title: displayEditor ? 'Story Editor' : 'Story Map',
+            }
+            : false,
         !settings.annotationsDisabled
             ? { name: 'annotations', title: 'Annotations' }
             : false,
@@ -16,11 +29,19 @@ export const RightPanel = props => {
             ? { name: 'identifyPanel', title: 'Identified Features' }
             : false,
     ].filter(Boolean);
-    const [curTab, setCurTab] = React.useState(tabInfo.length > 0 ? tabInfo[0].name : undefined);
+    const [curTab, setCurTab] = React.useState(() => {
+        if (storyMapPresentationMode) {
+            return 'storyPanel';
+        }
+        return tabInfo.length > 0 ? tabInfo[0].name : '';
+    });
     React.useEffect(() => {
         const onSettingsChanged = () => {
             setSettings(Object.assign({}, props.model.jgisSettings));
         };
+        const onOptionsChanged = () => {
+            setOptions(Object.assign({}, props.model.getOptions()));
+        };
         let currentlyIdentifiedFeatures = undefined;
         const onAwerenessChanged = (_, clients) => {
             var _a;
@@ -34,9 +55,11 @@ export const RightPanel = props => {
             }
         };
         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]);
@@ -45,6 +68,9 @@ export const RightPanel = props => {
         settings.identifyDisabled;
     const rightPanelVisible = !settings.rightPanelDisabled && !allRightTabsDisabled;
     const [selectedObjectProperties, setSelectedObjectProperties] = React.useState(undefined);
+    const toggleEditor = () => {
+        setDisplayEditor(!displayEditor);
+    };
     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: () => {
@@ -57,6 +83,10 @@ export const RightPanel = props => {
                 } }, tab.title)))),
             !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 }))))),
             !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/shared/components/Calendar.d.ts

@@ -7,7 +7,7 @@ export type CalendarProps = DayPickerProps & {
      */
     yearRange?: number;
     /**
-     * Wether to show the year switcher in the caption.
+     * Whether to show the year switcher in the caption.
      * @default true
      */
     showYearSwitcher?: boolean;

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

@@ -0,0 +1,18 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import * as React from 'react';
+import { Dialog } from "./Dialog";
+declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): React.JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
+declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): React.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): React.JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/lib/shared/components/Command.js

@@ -0,0 +1,60 @@
+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 { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+import * as React from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "./Dialog";
+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)));
+}
+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"]);
+    return (React.createElement(Dialog, Object.assign({}, props),
+        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))));
+}
+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))));
+}
+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)));
+}
+function CommandEmpty(_a) {
+    var props = __rest(_a, []);
+    return (React.createElement(CommandPrimitive.Empty, Object.assign({ "data-slot": "command-empty", className: "py-6 text-center text-sm" }, props)));
+}
+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)));
+}
+function CommandSeparator(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(CommandPrimitive.Separator, Object.assign({ "data-slot": "command-separator", className: cn('bg-border -mx-1 h-px', className) }, props)));
+}
+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)));
+}
+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)));
+}
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

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

@@ -0,0 +1,15 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as React from 'react';
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/lib/shared/components/Dialog.js

@@ -0,0 +1,62 @@
+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 DialogPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+import * as React from 'react';
+import { cn } from './utils';
+function Dialog(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DialogPrimitive.Root, Object.assign({ "data-slot": "dialog" }, props));
+}
+function DialogTrigger(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DialogPrimitive.Trigger, Object.assign({ "data-slot": "dialog-trigger" }, props));
+}
+function DialogPortal(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DialogPrimitive.Portal, Object.assign({ "data-slot": "dialog-portal" }, props));
+}
+function DialogClose(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DialogPrimitive.Close, Object.assign({ "data-slot": "dialog-close" }, props));
+}
+function DialogOverlay(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DialogPrimitive.Overlay, Object.assign({ "data-slot": "dialog-overlay", className: cn('jgis-dialog-overlay', className) }, props)));
+}
+function DialogContent(_a) {
+    var { className, children, showCloseButton = true } = _a, props = __rest(_a, ["className", "children", "showCloseButton"]);
+    return (React.createElement(DialogPortal, { "data-slot": "dialog-portal" },
+        React.createElement(DialogOverlay, null),
+        React.createElement(DialogPrimitive.Content, Object.assign({ "data-slot": "dialog-content", className: cn('jgis-dialog-content', className) }, props),
+            children,
+            showCloseButton && (React.createElement(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "jgis-dialog-close" },
+                React.createElement(XIcon, null),
+                React.createElement("span", { className: "jgis-sr-only" }, "Close"))))));
+}
+function DialogHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "dialog-header", className: cn('jgis-dialog-header', className) }, props)));
+}
+function DialogFooter(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "dialog-footer", className: cn('jgis-dialog-footer', className) }, props)));
+}
+function DialogTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DialogPrimitive.Title, Object.assign({ "data-slot": "dialog-title", className: cn('jgis-dialog-title', className) }, props)));
+}
+function DialogDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DialogPrimitive.Description, Object.assign({ "data-slot": "dialog-description", className: cn('jgis-dialog-description', className) }, props)));
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

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

@@ -0,0 +1,5 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as React from 'react';
+declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): React.JSX.Element;
+declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): React.JSX.Element;
+export { RadioGroup, RadioGroupItem };

package/lib/shared/components/RadioGroup.js

@@ -0,0 +1,26 @@
+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 RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { CircleIcon } from 'lucide-react';
+import * as React from 'react';
+import { cn } from './utils';
+function RadioGroup(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(RadioGroupPrimitive.Root, Object.assign({ "data-slot": "radio-group", className: cn('jgis-radio-group', className) }, props)));
+}
+function RadioGroupItem(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(RadioGroupPrimitive.Item, Object.assign({ "data-slot": "radio-group-item", className: cn('jgis-radio-group-item', className) }, props),
+        React.createElement(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "jgis-radio-group-indicator" },
+            React.createElement(CircleIcon, { className: "jgis-radio-group-indicator-icon" }))));
+}
+export { RadioGroup, RadioGroupItem };

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

@@ -0,0 +1,4 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as React from 'react';
+declare function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>): React.JSX.Element;
+export { Switch };

package/lib/shared/components/Switch.js

@@ -0,0 +1,20 @@
+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 SwitchPrimitive from '@radix-ui/react-switch';
+import * as React from 'react';
+import { cn } from './utils';
+function Switch(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(SwitchPrimitive.Root, Object.assign({ "data-slot": "switch", className: cn('jgis-switch', className) }, props),
+        React.createElement(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "jgis-switch-thumb" })));
+}
+export { Switch };

package/lib/toolbar/widget.d.ts

@@ -12,7 +12,17 @@ export declare class Separator extends Widget {
 }
 export declare class ToolbarWidget extends ReactiveToolbar {
     private _model;
+    private _newSubMenu;
     constructor(options: ToolbarWidget.IOptions);
+    /**
+     * Updates the story segment menu item based on settings
+     */
+    private _updateStorySegmentMenuItem;
+    /**
+     * Handles settings changes
+     */
+    private _onSettingsChanged;
+    dispose(): void;
 }
 export declare namespace ToolbarWidget {
     interface IOptions extends Toolbar.IOptions {