@jupytergis/base 0.10.1 → 0.12.0

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.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('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"]);
+    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(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: "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('jgis-command-list', 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('jgis-command-group', 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('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('jgis-command-shortcut', 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/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/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/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 {};

package/lib/shared/components/Select.js

@@ -0,0 +1,28 @@
+import { 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 Select({ items, buttonText, emptyText = 'No option found.', className, buttonClassName, open: controlledOpen, onOpenChange: controlledOnOpenChange, showSearch = false, searchPlaceholder = 'Search...', }) {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+    const setOpen = controlledOnOpenChange || setInternalOpen;
+    const handleSelect = (item) => {
+        setOpen(false);
+        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-select-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.label)))))))));
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ISingleDatePickerProps {
+    date: Date | undefined;
+    onDateChange: (date: Date | undefined) => void;
+    placeholder?: string;
+    className?: string;
+    dateFormat?: string;
+    showIcon?: boolean;
+}
+declare function SingleDatePicker({ date, onDateChange, placeholder, className, dateFormat, showIcon, }: ISingleDatePickerProps): React.JSX.Element;
+export default SingleDatePicker;

package/lib/shared/components/SingleDatePicker.js

@@ -0,0 +1,16 @@
+import { format } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import React from 'react';
+import { Button } from "./Button";
+import { Calendar } from "./Calendar";
+import { Popover, PopoverContent, PopoverTrigger, } from "./Popover";
+function SingleDatePicker({ date, onDateChange, placeholder = 'Select date', className, dateFormat = 'PPP', showIcon = true, }) {
+    return (React.createElement(Popover, null,
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(Button, { className: className, variant: "outline" },
+                showIcon && React.createElement(CalendarIcon, { className: "jgis-stac-datepicker-icon" }),
+                date ? format(date, dateFormat) : React.createElement("span", null, placeholder))),
+        React.createElement(PopoverContent, null,
+            React.createElement(Calendar, { mode: "single", selected: date, onSelect: onDateChange, autoFocus: true }))));
+}
+export default SingleDatePicker;

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/stacBrowser/components/StacPanel.d.ts

@@ -3,5 +3,13 @@ import React from 'react';
 interface IStacViewProps {
     model?: IJupyterGISModel;
 }
-declare const StacPanel: ({ model }: IStacViewProps) => React.JSX.Element | null;
+declare const StacPanel: {
+    ({ model }: IStacViewProps): React.JSX.Element;
+    ProviderSelect: typeof ProviderSelect;
+};
+/**
+ * Provider selector component for choosing STAC providers.
+ * Uses context to manage selected provider URL.
+ */
+declare function ProviderSelect(): React.JSX.Element;
 export default StacPanel;

package/lib/stacBrowser/components/StacPanel.js

@@ -1,20 +1,64 @@
 import React from 'react';
+import { Select } from "../../shared/components/Select";
 import { Tabs, TabsContent, TabsList, TabsTrigger, } from "../../shared/components/Tabs";
-import useStacSearch from "../hooks/useStacSearch";
-import StacPanelFilters from './StacPanelFilters';
-import StacPanelResults from './StacPanelResults';
-const StacPanel = ({ model }) => {
-    const { filterState, filterSetters, results, startTime, setStartTime, endTime, setEndTime, totalPages, currentPage, totalResults, handlePaginationClick, handleResultClick, formatResult, isLoading, useWorldBBox, setUseWorldBBox, } = useStacSearch({ model });
+import StacFilterExtensionPanel from "./filter-extension/StacFilterExtensionPanel";
+import StacGeodesFilterPanel from "./geodes/StacGeodesFilterPanel";
+import StacPanelResults from "./shared/StacPanelResults";
+import { StacResultsProvider, useStacResultsContext, } from "../context/StacResultsContext";
+const GEODES_URL = 'https://geodes-portal.cnes.fr/api/stac/';
+const COPERNICUS_URL = 'https://stac.dataspace.copernicus.eu/v1/';
+const WORLDPOP_URL = 'https://api.stac.worldpop.org/';
+const PROVIDERS = [
+    { url: COPERNICUS_URL, name: 'Copernicus' },
+    { url: GEODES_URL, name: 'GEODES' },
+    { url: WORLDPOP_URL, name: 'WorldPop' },
+];
+// URL to panel component mapping for extensibility
+// Add new entries here to support additional STAC providers
+const URL_TO_PANEL_MAP = {
+    [GEODES_URL]: StacGeodesFilterPanel,
+};
+// Inner component that uses the context
+const StacPanelContent = ({ model }) => {
+    var _a;
+    const { totalResults, selectedUrl } = useStacResultsContext();
     if (!model) {
         return null;
     }
-    return (React.createElement(Tabs, { defaultValue: "filters", className: "jgis-panel-tabs" },
-        React.createElement(TabsList, { style: { borderRadius: 0 } },
+    const ProviderPanel = (_a = URL_TO_PANEL_MAP[selectedUrl]) !== null && _a !== void 0 ? _a : StacFilterExtensionPanel;
+    return (React.createElement(Tabs, { defaultValue: "filters", className: "jgis-panel-tabs", style: { boxShadow: 'none' } },
+        React.createElement(TabsList, { className: "jgis-stac-panel-tabs-list" },
             React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", value: "filters" }, "Filters"),
             React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", value: "results" }, `Results (${totalResults})`)),
         React.createElement(TabsContent, { value: "filters" },
-            React.createElement(StacPanelFilters, { filterState: filterState, filterSetters: filterSetters, startTime: startTime, setStartTime: setStartTime, endTime: endTime, setEndTime: setEndTime, useWorldBBox: useWorldBBox, setUseWorldBBox: setUseWorldBBox })),
+            React.createElement("div", { className: "jgis-stac-filter-extension-panel" },
+                React.createElement(StacPanel.ProviderSelect, null),
+                selectedUrl ? (React.createElement(ProviderPanel, { model: model })) : (React.createElement("div", { className: "jgis-stac-panel-placeholder" }, "Please select a provider above")))),
         React.createElement(TabsContent, { value: "results" },
-            React.createElement(StacPanelResults, { results: results, currentPage: currentPage, totalPages: totalPages, handlePaginationClick: handlePaginationClick, handleResultClick: handleResultClick, formatResult: formatResult, isLoading: isLoading }))));
+            React.createElement(StacPanelResults, null))));
+};
+// Outer component that provides the context
+const StacPanel = ({ model }) => {
+    return (React.createElement(StacResultsProvider, { model: model },
+        React.createElement(StacPanelContent, { model: model })));
 };
+/**
+ * Provider selector component for choosing STAC providers.
+ * Uses context to manage selected provider URL.
+ */
+function ProviderSelect() {
+    const { selectedUrl, setSelectedUrl } = useStacResultsContext();
+    const selectedProvider = PROVIDERS.find(provider => provider.url === selectedUrl);
+    const buttonText = (selectedProvider === null || selectedProvider === void 0 ? void 0 : selectedProvider.name) || 'Select a provider...';
+    const items = PROVIDERS.map(provider => ({
+        value: provider.url,
+        label: provider.name,
+        onSelect: () => setSelectedUrl(provider.url),
+    }));
+    return (React.createElement("div", { className: "jgis-stac-filter-extension-section" },
+        React.createElement("label", { className: "jgis-stac-filter-extension-label" }, "Provider"),
+        React.createElement(Select, { items: items, buttonText: buttonText, emptyText: "No provider found.", buttonClassName: "jgis-stac-filter-extension-select" })));
+}
+// Attach ProviderSelect as a composable sub-component
+StacPanel.ProviderSelect = ProviderSelect;
 export default StacPanel;

package/lib/stacBrowser/components/filter-extension/QueryableComboBox.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IQueryableFilter, IStacQueryables, UpdateSelectedQueryables } from "../../types/types";
+interface IQueryableComboProps {
+    queryables: IStacQueryables;
+    selectedQueryables: Record<string, IQueryableFilter>;
+    updateSelectedQueryables: UpdateSelectedQueryables;
+}
+export declare function QueryableComboBox({ queryables, selectedQueryables, updateSelectedQueryables, }: IQueryableComboProps): React.JSX.Element;
+export {};