@jupytergis/base 0.12.1 → 0.13.0

package/lib/shared/components/Drawer.js

@@ -0,0 +1,59 @@
+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 { Drawer as DrawerPrimitive } from 'vaul';
+import { cn } from './utils';
+function Drawer(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DrawerPrimitive.Root, Object.assign({ "data-slot": "drawer" }, props));
+}
+function DrawerTrigger(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DrawerPrimitive.Trigger, Object.assign({ "data-slot": "drawer-trigger" }, props));
+}
+function DrawerPortal(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DrawerPrimitive.Portal, Object.assign({ "data-slot": "drawer-portal" }, props));
+}
+function DrawerClose(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DrawerPrimitive.Close, Object.assign({ "data-slot": "drawer-close" }, props));
+}
+function DrawerOverlay(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DrawerPrimitive.Overlay, Object.assign({ "data-slot": "drawer-overlay", className: cn('jgis-drawer-overlay', className) }, props)));
+}
+function DrawerContent(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (React.createElement(DrawerPortal, { "data-slot": "drawer-portal" },
+        React.createElement(DrawerOverlay, null),
+        React.createElement(DrawerPrimitive.Content, Object.assign({ "data-slot": "drawer-content", className: cn('jgis-drawer-content', className) }, props),
+            React.createElement("div", { className: "jgis-drawer-handle" }),
+            children)));
+}
+function DrawerHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "drawer-header", className: cn('jgis-drawer-header', className) }, props)));
+}
+function DrawerFooter(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "drawer-footer", className: cn('jgis-drawer-footer', className) }, props)));
+}
+function DrawerTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DrawerPrimitive.Title, Object.assign({ "data-slot": "drawer-title", className: cn('jgis-drawer-title', className) }, props)));
+}
+function DrawerDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DrawerPrimitive.Description, Object.assign({ "data-slot": "drawer-description", className: cn('jgis-drawer-description', className) }, props)));
+}
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };

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

@@ -1,4 +1,4 @@
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
 import * as React from 'react';
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/shared/components/DropdownMenu.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
 import * as React from 'react';
 const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;

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

@@ -1,4 +1,4 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Popover as PopoverPrimitive } from 'radix-ui';
 import * as React from 'react';
 declare const Popover: React.FC<React.ComponentProps<typeof PopoverPrimitive.Root>>;
 declare const PopoverTrigger: React.FC<React.ComponentProps<typeof PopoverPrimitive.Trigger>>;

package/lib/shared/components/Popover.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Popover as PopoverPrimitive } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 const Popover = (_a) => {

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

@@ -1,4 +1,4 @@
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
 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;

package/lib/shared/components/RadioGroup.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { CircleIcon } from 'lucide-react';
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 function RadioGroup(_a) {

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

@@ -0,0 +1,15 @@
+import { Dialog as SheetPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): React.JSX.Element;
+declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): React.JSX.Element;
+declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): React.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, container, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    showCloseButton?: boolean;
+    container: HTMLElement;
+}): React.JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): React.JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/lib/shared/components/Sheet.js

@@ -0,0 +1,64 @@
+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 { XIcon } from 'lucide-react';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { Button } from './Button';
+import { cn } from './utils';
+function Sheet(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(SheetPrimitive.Root, Object.assign({ "data-slot": "sheet" }, props));
+}
+function SheetTrigger(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(SheetPrimitive.Trigger, Object.assign({ "data-slot": "sheet-trigger" }, props));
+}
+function SheetClose(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(SheetPrimitive.Close, Object.assign({ "data-slot": "sheet-close" }, props));
+}
+function SheetPortal(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(SheetPrimitive.Portal, Object.assign({ "data-slot": "sheet-portal" }, props));
+}
+function SheetOverlay(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(SheetPrimitive.Overlay, Object.assign({ "data-slot": "sheet-overlay", className: cn('jgis-sheet-overlay', className) }, props)));
+}
+function SheetContent(_a) {
+    var { className, children, side = 'right', showCloseButton = true, container } = _a, props = __rest(_a, ["className", "children", "side", "showCloseButton", "container"]);
+    return (React.createElement(SheetPortal, null,
+        React.createElement(SheetOverlay, null),
+        React.createElement(SheetPrimitive.Content, Object.assign({ "data-slot": "sheet-content", "data-side": side, className: cn('jgis-sheet-content', className) }, props),
+            children,
+            showCloseButton && (React.createElement(SheetPrimitive.Close, { "data-slot": "sheet-close", asChild: true },
+                React.createElement(Button, { variant: "ghost", className: "jgis-sheet-close", size: "icon-sm" },
+                    React.createElement(XIcon, null),
+                    React.createElement("span", { className: "jgis-sr-only" }, "Close")))))));
+}
+function SheetHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "sheet-header", className: cn('jgis-sheet-header', className) }, props)));
+}
+function SheetFooter(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "sheet-footer", className: cn('jgis-sheet-footer', className) }, props)));
+}
+function SheetTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(SheetPrimitive.Title, Object.assign({ "data-slot": "sheet-title", className: cn('jgis-sheet-title', className) }, props)));
+}
+function SheetDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(SheetPrimitive.Description, Object.assign({ "data-slot": "sheet-description", className: cn('jgis-sheet-description', className) }, props)));
+}
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

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

@@ -1,4 +1,4 @@
-import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { Switch as SwitchPrimitive } from 'radix-ui';
 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

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { Switch as SwitchPrimitive } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 function Switch(_a) {

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

@@ -1,4 +1,4 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { Tabs as TabsPrimitive } from 'radix-ui';
 import * as React from 'react';
 interface IPanelTabProps {
     className: string;

package/lib/shared/components/Tabs.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { Tabs as TabsPrimitive } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 const Tabs = (_a) => {

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

@@ -1,5 +1,5 @@
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { type VariantProps } from 'class-variance-authority';
+import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
 import * as React from 'react';
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;

package/lib/shared/components/ToggleGroup.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { cva } from 'class-variance-authority';
+import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 const toggleVariants = cva('jgis-toggle', {

package/lib/shared/hooks/useLatest.d.ts

@@ -0,0 +1 @@
+export declare function useLatest<T>(value: T): React.MutableRefObject<T>;

package/lib/shared/hooks/useLatest.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from 'react';
+export function useLatest(value) {
+    const ref = useRef(value);
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref;
+}

package/lib/shared/hooks/useMediaQuery.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Subscribes to a media query and returns whether it currently matches.
+ * Updates when the viewport changes (resize, orientation).
+ *
+ * @param query - Media query string (e.g. '(max-width: 768px)').
+ * @returns True if the query matches, false otherwise (and when window is unavailable).
+ */
+declare function useMediaQuery(query: string): boolean;
+export default useMediaQuery;

package/lib/shared/hooks/useMediaQuery.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+/**
+ * Subscribes to a media query and returns whether it currently matches.
+ * Updates when the viewport changes (resize, orientation).
+ *
+ * @param query - Media query string (e.g. '(max-width: 768px)').
+ * @returns True if the query matches, false otherwise (and when window is unavailable).
+ */
+function useMediaQuery(query) {
+    const [matches, setMatches] = useState(() => {
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        return window.matchMedia(query).matches;
+    });
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const mediaQuery = window.matchMedia(query);
+        const handleChange = (event) => {
+            setMatches(event.matches);
+        };
+        setMatches(mediaQuery.matches);
+        mediaQuery.addEventListener('change', handleChange);
+        return () => {
+            mediaQuery.removeEventListener('change', handleChange);
+        };
+    }, [query]);
+    return matches;
+}
+export default useMediaQuery;

package/lib/tools.js

@@ -5,7 +5,7 @@ import { VectorTile } from '@mapbox/vector-tile';
 import { compressors } from 'hyparquet-compressors';
 import Protobuf from 'pbf';
 import shp from 'shpjs';
-import RASTER_LAYER_GALLERY from "../rasterlayer_gallery/raster_layer_gallery.json";
+import LAYER_GALLERY from "../layer_gallery.json";
 export const debounce = (func, timeout = 100) => {
     let timeoutId;
     return (...args) => {
@@ -112,27 +112,29 @@ export function deepCopy(value) {
  * @param layerBrowserRegistry Registry to add layers to
  */
 export function createDefaultLayerRegistry(layerBrowserRegistry) {
-    const RASTER_THUMBNAILS = {};
+    const LAYER_THUMBNAILS = {};
     /**
      * Generate object to hold thumbnail URLs
      */
     const importAll = (r) => {
         r.keys().forEach(key => {
             const imageName = key.replace('./', '').replace(/\.\w+$/, '');
-            RASTER_THUMBNAILS[imageName] = r(key);
+            LAYER_THUMBNAILS[imageName] = r(key);
         });
     };
-    const context = require.context('../rasterlayer_gallery', false, /\.(png|jpe?g|gif|svg)$/);
+    const context = require.context('../layer_gallery', false, /\.(png|jpe?g|gif|svg)$/);
     importAll(context);
-    for (const entry of Object.keys(RASTER_LAYER_GALLERY)) {
-        const xyzprovider = RASTER_LAYER_GALLERY[entry];
-        if ('url' in xyzprovider) {
-            const tile = convertToRegistryEntry(entry, xyzprovider);
+    for (const entry of Object.keys(LAYER_GALLERY)) {
+        const layerProvider = LAYER_GALLERY[entry];
+        if ('thumbnailPath' in layerProvider) {
+            /*flat layer provider*/
+            const tile = convertToRegistryEntry(entry, layerProvider);
             layerBrowserRegistry.addRegistryLayer(tile);
         }
         else {
-            Object.keys(xyzprovider).forEach(mapName => {
-                const tile = convertToRegistryEntry(xyzprovider[mapName]['name'], xyzprovider[mapName], entry);
+            /* nested layer provider */
+            Object.keys(layerProvider).forEach(mapName => {
+                const tile = convertToRegistryEntry(layerProvider[mapName]['name'], layerProvider[mapName], entry);
                 layerBrowserRegistry.addRegistryLayer(tile);
             });
         }
@@ -142,35 +144,20 @@ export function createDefaultLayerRegistry(layerBrowserRegistry) {
      * Parse tile information from providers to be usable in the layer registry
      *
      * @param entry - The name of the entry, which may also serve as the default provider name if none is specified.
-     * @param xyzprovider - An object containing the XYZ provider's details, including name, URL, zoom levels, attribution, and possibly other properties relevant to the provider.
+     * @param layerProvider - An object containing the provider's details, including name, URL, zoom levels, attribution, and possibly other properties relevant to the provider.
      * @param provider - Optional. Specifies the provider name. If not provided, the `entry` parameter is used as the default provider name.
      * @returns - An object representing the registry entry
      */
-    function convertToRegistryEntry(entry, xyzprovider, provider) {
-        const urlParameters = {};
-        if (xyzprovider.time) {
-            urlParameters.time = xyzprovider.time;
-        }
-        if (xyzprovider.variant) {
-            urlParameters.variant = xyzprovider.variant;
-        }
-        if (xyzprovider.tilematrixset) {
-            urlParameters.tilematrixset = xyzprovider.tilematrixset;
-        }
-        if (xyzprovider.format) {
-            urlParameters.format = xyzprovider.format;
-        }
+    function convertToRegistryEntry(entry, layerProvider, provider) {
         return {
             name: entry,
-            thumbnail: RASTER_THUMBNAILS[xyzprovider['name'].replace('.', '-')],
-            source: {
-                url: xyzprovider['url'],
-                minZoom: xyzprovider['min_zoom'] || 0,
-                maxZoom: xyzprovider['max_zoom'] || 24,
-                attribution: xyzprovider['attribution'] || '',
-                provider: provider !== null && provider !== void 0 ? provider : entry,
-                urlParameters,
-            },
+            thumbnail: LAYER_THUMBNAILS[layerProvider['name'].replace('.', '-')],
+            sourceType: layerProvider['sourceType'],
+            layerType: layerProvider['layerType'],
+            sourceParameters: layerProvider['sourceParameters'],
+            layerParameters: layerProvider['layerParameters'],
+            provider: provider !== null && provider !== void 0 ? provider : entry.split('.', 1)[0],
+            description: layerProvider['description'],
         };
     }
 }

package/lib/types.d.ts

@@ -27,3 +27,4 @@ declare global {
 }
 declare const classificationModes: readonly ["quantile", "equal interval", "jenks", "pretty", "logarithmic", "continuous"];
 export type ClassificationMode = (typeof classificationModes)[number];
+export declare const SYMBOLOGY_VALID_LAYER_TYPES: string[];

package/lib/types.js

@@ -6,4 +6,9 @@ const classificationModes = [
     'logarithmic',
     'continuous',
 ];
-export {};
+export const SYMBOLOGY_VALID_LAYER_TYPES = [
+    'VectorLayer',
+    'VectorTileLayer',
+    'WebGlLayer',
+    'HeatmapLayer',
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -44,7 +44,7 @@
     "@jupyter/collaboration": "^4",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.12.1",
+    "@jupytergis/schema": "^0.13.0",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",
@@ -64,15 +64,6 @@
     "@lumino/widgets": "^2.0.0",
     "@mapbox/vector-tile": "^2.0.3",
     "@naisutech/react-tree": "^3.0.1",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toggle-group": "^1.1.10",
     "@rjsf/core": "^4.2.0",
     "@rjsf/validator-ajv8": "^5.23.1",
     "ajv": "^8.14.0",
@@ -94,6 +85,7 @@
     "pmtiles": "^3.0.7",
     "proj4": "2.19.3",
     "proj4-list": "1.0.4",
+    "radix-ui": "^1.4.3",
     "react": "^18.0.1",
     "react-day-picker": "^9.7.0",
     "react-markdown": "^10.1.0",
@@ -101,7 +93,8 @@
     "styled-components": "^5.3.6",
     "three": "^0.135.0",
     "three-mesh-bvh": "^0.5.17",
-    "uuid": "^11.0.3"
+    "uuid": "^11.0.3",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@apidevtools/json-schema-ref-parser": "^9.0.9",

package/style/base.css

@@ -24,6 +24,8 @@
 @import url('./shared/checkbox.css');
 @import url('./shared/radioGroup.css');
 @import url('./shared/dialog.css');
+@import url('./shared/drawer.css');
+@import url('./shared/sheet.css');
 @import url('./shared/switch.css');
 @import url('./shared/popover.css');
 @import url('./shared/command.css');
@@ -66,6 +68,14 @@
   flex-direction: column;
 }
 
+.jGIS-symbology-override-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 1rem;
+  border-bottom: solid 1px var(--jp-border-color0);
+}
+
 .jp-gis-text-label {
   margin: 0;
   padding: 0;
@@ -170,3 +180,8 @@ button.jp-mod-styled.jp-mod-reject {
     margin: 0;
   }
 }
+
+/* Fix for map in mobile specta view */
+body[data-notebook='specta'] #main.jp-ThemedContainer {
+  overflow: visible;
+}

package/style/shared/drawer.css

@@ -0,0 +1,154 @@
+@keyframes drawer-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes drawer-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.jgis-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: color-mix(in srgb, black, transparent 90%);
+  backdrop-filter: blur(2px);
+}
+
+.jgis-drawer-overlay[data-state='open'] {
+  animation: drawer-fade-in 0.2s ease-out;
+}
+
+.jgis-drawer-overlay[data-state='closed'] {
+  animation: drawer-fade-out 0.2s ease-in;
+}
+
+.jgis-drawer-content {
+  position: fixed;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.875rem;
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
+  border-color: var(--jp-border-color0);
+}
+
+/* Bottom */
+.jgis-drawer-content[data-vaul-drawer-direction='bottom'] {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin-top: 6rem;
+  max-height: 80vh;
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-radius: 0.75rem 0.75rem 0 0;
+}
+
+/* Top */
+.jgis-drawer-content[data-vaul-drawer-direction='top'] {
+  left: 0;
+  right: 0;
+  top: 0;
+  margin-bottom: 6rem;
+  max-height: 80vh;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-radius: 0 0 0.75rem 0.75rem;
+}
+
+/* Left */
+.jgis-drawer-content[data-vaul-drawer-direction='left'] {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 75%;
+  border-right-width: 1px;
+  border-right-style: solid;
+  border-radius: 0 0.75rem 0.75rem 0;
+}
+
+@media (min-width: 640px) {
+  .jgis-drawer-content[data-vaul-drawer-direction='left'] {
+    max-width: 24rem;
+  }
+}
+
+/* Right */
+.jgis-drawer-content[data-vaul-drawer-direction='right'] {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 75%;
+  border-left-width: 1px;
+  border-left-style: solid;
+  border-radius: 0.75rem 0 0 0.75rem;
+}
+
+@media (min-width: 640px) {
+  .jgis-drawer-content[data-vaul-drawer-direction='right'] {
+    max-width: 24rem;
+  }
+}
+
+.jgis-drawer-handle {
+  display: none;
+  margin: 1rem auto 0;
+  height: 0.25rem;
+  width: 100px;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background-color: var(--jp-layout-color2);
+}
+
+.jgis-drawer-content[data-vaul-drawer-direction='bottom'] .jgis-drawer-handle {
+  display: block;
+}
+
+.jgis-drawer-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 1rem;
+}
+
+.jgis-drawer-content[data-vaul-drawer-direction='bottom'] .jgis-drawer-header,
+.jgis-drawer-content[data-vaul-drawer-direction='top'] .jgis-drawer-header {
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .jgis-drawer-header {
+    gap: 0.125rem;
+    text-align: left;
+  }
+}
+
+.jgis-drawer-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  margin-top: auto;
+}
+
+.jgis-drawer-title {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--jp-ui-font-color0);
+}
+
+.jgis-drawer-description {
+  font-size: 0.875rem;
+  color: var(--jp-ui-font-color2);
+}