@deck.gl-community/widgets 9.2.5 → 9.3.0-beta.1

package/dist/widget-panels/toast-widget.js

@@ -0,0 +1,207 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+/** @jsxImportSource preact */
+import { Widget } from '@deck.gl/core';
+import { render } from 'preact';
+import { toastManager } from "./toast-manager.js";
+const TOAST_KIND_STYLES = {
+    error: {
+        accent: 'var(--deck-widget-error-color, var(--button-icon-idle, currentColor))',
+        background: 'var(--button-background)',
+        icon: '⚠'
+    },
+    info: {
+        accent: 'var(--deck-widget-info-color, var(--button-icon-idle, currentColor))',
+        background: 'var(--button-background)',
+        icon: 'ⓘ'
+    },
+    warning: {
+        accent: 'var(--deck-widget-warning-color, var(--button-icon-idle, currentColor))',
+        background: 'var(--button-background)',
+        icon: '⚠'
+    }
+};
+const TOAST_KIND_ICON_COLOR = {
+    error: 'var(--deck-widget-error-color, var(--button-icon-idle, currentColor))',
+    info: 'var(--deck-widget-info-color, var(--button-icon-idle, currentColor))',
+    warning: 'var(--deck-widget-warning-color, var(--button-icon-idle, currentColor))'
+};
+const TOAST_CONTAINER_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--widget-margin, 8px)',
+    alignItems: 'stretch',
+    pointerEvents: 'auto',
+    width: '100%',
+    maxWidth: 'calc(100vw - 24px)',
+    maxHeight: 'calc(100vh - 24px)',
+    overflow: 'auto',
+    boxSizing: 'border-box'
+};
+const TOAST_CARD_STYLE = {
+    position: 'relative',
+    borderRadius: 'var(--button-corner-radius, 8px)',
+    border: '1px solid transparent',
+    borderLeft: '4px solid transparent',
+    boxShadow: 'var(--button-shadow)',
+    backgroundColor: 'var(--button-background)',
+    color: 'var(--button-text)',
+    padding: '10px 10px 10px 12px',
+    width: '100%',
+    minWidth: 0,
+    animation: 'deck-toast-enter 160ms ease-out',
+    transformOrigin: 'top right',
+    backdropFilter: 'var(--button-backdrop-filter)',
+    WebkitBackdropFilter: 'var(--button-backdrop-filter)'
+};
+const CLOSE_BUTTON_STYLE = {
+    border: 0,
+    borderRadius: 'var(--button-corner-radius, 4px)',
+    color: 'var(--button-text)',
+    background: 'transparent',
+    width: '22px',
+    height: '22px',
+    fontSize: '12px',
+    fontWeight: 700,
+    lineHeight: 1,
+    cursor: 'pointer',
+    padding: 0,
+    minWidth: 'unset',
+    minHeight: 'unset'
+};
+const TOAST_WIDGET_CLASS = 'deck-widget-toast';
+const TOAST_WIDGET_STACK_CLASS = 'deck-widget-toast-stack';
+function ToastWidgetStyles() {
+    return (_jsx("style", { children: `
+      @keyframes deck-toast-enter {
+        from {
+          opacity: 0;
+          transform: translateY(4px) scale(0.98);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+      }
+
+      .${TOAST_WIDGET_CLASS} {
+        color: var(--button-text);
+        pointer-events: auto;
+        position: relative;
+        z-index: 3;
+      }
+
+      .${TOAST_WIDGET_STACK_CLASS} {
+        margin: 0;
+      }
+
+      .${TOAST_WIDGET_CLASS} .deck-widget-icon-button {
+        border: 0;
+        box-shadow: none;
+      }
+    ` }));
+}
+function ToastWidgetView({ toasts, showBorder }) {
+    return (_jsxs("div", { className: TOAST_WIDGET_STACK_CLASS, style: TOAST_CONTAINER_STYLE, role: "status", "aria-live": "polite", children: [_jsx(ToastWidgetStyles, {}), toasts.map((toast) => {
+                const palette = TOAST_KIND_STYLES[toast.type];
+                const iconColor = TOAST_KIND_ICON_COLOR[toast.type];
+                return (_jsx("div", { style: {
+                        ...TOAST_CARD_STYLE,
+                        backgroundColor: palette.background,
+                        borderLeftColor: palette.accent,
+                        boxShadow: showBorder
+                            ? 'inset 0 0 0 0.5px var(--deck-widget-toast-border, rgba(148, 163, 184, 0.35)), var(--button-shadow)'
+                            : 'var(--button-shadow)'
+                    }, "data-toast-id": toast.id, children: _jsxs("div", { style: {
+                            position: 'relative',
+                            display: 'grid',
+                            gridTemplateColumns: 'auto 1fr auto',
+                            alignItems: 'start',
+                            gap: '8px'
+                        }, children: [_jsx("div", { style: { fontSize: '16px', lineHeight: 1, color: iconColor }, "aria-hidden": "true", children: palette.icon }), _jsxs("div", { style: { minWidth: 0 }, children: [toast.title && (_jsx("div", { style: {
+                                            fontSize: '13px',
+                                            fontWeight: 700,
+                                            color: 'var(--button-text)',
+                                            marginBottom: '2px'
+                                        }, children: toast.title })), _jsx("div", { style: {
+                                            fontSize: '12px',
+                                            lineHeight: 1.35,
+                                            color: 'var(--button-text)',
+                                            opacity: '0.8'
+                                        }, children: toast.message })] }), _jsx("button", { className: "deck-widget-icon-button", type: "button", title: "Dismiss", "aria-label": "Dismiss toast", style: CLOSE_BUTTON_STYLE, onClick: () => toastManager.dismiss(toast.id), onPointerDown: (event) => {
+                                    event.stopPropagation();
+                                }, "data-toast-close": toast.id, children: "\u00D7" })] }) }, toast.id));
+            })] }));
+}
+export class ToastWidget extends Widget {
+    static defaultProps = {
+        ...Widget.defaultProps,
+        id: 'toast',
+        placement: 'bottom-right',
+        showBorder: false
+    };
+    className = TOAST_WIDGET_CLASS;
+    placement = 'bottom-right';
+    showBorder = false;
+    #unsubscriber = () => { };
+    #toasts = [];
+    #rootElement = null;
+    constructor(props = {}) {
+        super(props);
+        this.setProps(this.props);
+    }
+    setProps(props) {
+        if (props.placement !== undefined) {
+            this.placement = props.placement;
+        }
+        if (props.showBorder !== undefined) {
+            this.showBorder = props.showBorder;
+        }
+        super.setProps(props);
+    }
+    onAdd() {
+        this.#unsubscriber();
+        this.#unsubscriber = toastManager.subscribe((toasts) => {
+            this.#toasts = toasts;
+            if (this.#rootElement) {
+                render(_jsx(ToastWidgetView, { toasts: this.#toasts, showBorder: this.showBorder }), this.#rootElement);
+            }
+        });
+    }
+    onRemove() {
+        this.#unsubscriber();
+        this.#unsubscriber = () => { };
+        if (this.#rootElement) {
+            render(null, this.#rootElement);
+        }
+    }
+    onRenderHTML(rootElement) {
+        this.#rootElement = rootElement;
+        const className = ['deck-widget', this.className, this.props.className]
+            .filter(Boolean)
+            .join(' ');
+        rootElement.className = className;
+        rootElement.style.pointerEvents = 'auto';
+        rootElement.style.position = 'absolute';
+        rootElement.style.width = '360px';
+        rootElement.style.maxWidth = 'calc(100vw - 24px)';
+        rootElement.style.top = '';
+        rootElement.style.right = '';
+        rootElement.style.bottom = '';
+        rootElement.style.left = '';
+        if (this.placement.includes('top')) {
+            rootElement.style.top = '0px';
+        }
+        else {
+            rootElement.style.bottom = '0px';
+        }
+        if (this.placement.includes('right')) {
+            rootElement.style.right = '0px';
+        }
+        else {
+            rootElement.style.left = '0px';
+        }
+        this.#toasts = toastManager.getToasts();
+        render(_jsx(ToastWidgetView, { toasts: this.#toasts, showBorder: this.showBorder }), rootElement);
+    }
+}
+//# sourceMappingURL=toast-widget.js.map

package/dist/widget-panels/toast-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-widget.js","sourceRoot":"","sources":["../../src/widget-panels/toast-widget.tsx"],"names":[],"mappings":"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"}

package/dist/widget-panels/toast-widget.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toast-widget.test.d.ts.map

package/dist/widget-panels/toast-widget.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-widget.test.d.ts","sourceRoot":"","sources":["../../src/widget-panels/toast-widget.test.tsx"],"names":[],"mappings":""}

package/dist/widget-panels/toast-widget.test.js

@@ -0,0 +1,81 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { toastManager } from "./toast-manager.js";
+import { ToastWidget } from "./toast-widget.js";
+function mountToastWidget() {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+    const widget = new ToastWidget();
+    widget.onAdd();
+    widget.onRenderHTML(root);
+    const cleanup = () => {
+        widget.onRemove();
+        root.remove();
+    };
+    return {
+        root,
+        widget,
+        cleanup
+    };
+}
+beforeEach(() => {
+    toastManager.clear();
+});
+afterEach(() => {
+    document.body.innerHTML = '';
+    toastManager.clear();
+});
+describe('ToastWidget', () => {
+    it('renders existing toasts from the manager', () => {
+        toastManager.toast({
+            type: 'info',
+            title: 'Loaded',
+            message: 'Data loaded'
+        });
+        const { root, cleanup } = mountToastWidget();
+        expect(root.textContent).toContain('Loaded');
+        expect(root.textContent).toContain('Data loaded');
+        expect(root.querySelectorAll('[data-toast-id]').length).toBe(1);
+        cleanup();
+    });
+    it('dismisses a toast when the close button is clicked', () => {
+        const id = toastManager.toast({
+            type: 'warning',
+            title: 'Warning',
+            message: 'Needs attention'
+        });
+        const { root, cleanup } = mountToastWidget();
+        const closeButton = root.querySelector(`[data-toast-close="${id}"]`);
+        expect(closeButton).toBeTruthy();
+        closeButton?.click();
+        expect(root.querySelector(`[data-toast-id="${id}"]`)).toBeNull();
+        expect(toastManager.getToasts()).toHaveLength(0);
+        cleanup();
+    });
+    it('unsubscribes from the manager on remove to avoid listener leaks', () => {
+        const { root, widget } = mountToastWidget();
+        toastManager.toast({ type: 'error', message: 'Initial toast' });
+        expect(root.querySelector('[data-toast-id]')).toBeTruthy();
+        widget.onRemove();
+        expect(root.textContent).toBe('');
+        toastManager.toast({ type: 'info', message: 'Should not appear' });
+        expect(root.textContent).toBe('');
+        root.remove();
+    });
+    it('renders the toast host with visible, viewport-safe dimensions', () => {
+        const { root, cleanup } = mountToastWidget();
+        toastManager.toast({ type: 'info', message: 'Width-safe toast' });
+        const stack = root.querySelector('.deck-widget-toast-stack');
+        expect(stack).toBeTruthy();
+        expect(root.getAttribute('style') || '').toContain('width: 360px');
+        expect(root.getAttribute('style') || '').toContain('max-width: calc(-24px + 100vw)');
+        expect(root.getAttribute('style') || '').toContain('pointer-events: auto');
+        expect(root.getAttribute('style') || '').toContain('position: absolute');
+        expect(root.getAttribute('style') || '').toContain('bottom: 0px');
+        expect(root.getAttribute('style') || '').toContain('right: 0px');
+        const card = root.querySelector('[data-toast-id]');
+        expect(card?.getAttribute('style') || '').toContain('width: 100%');
+        expect(card?.getAttribute('style') || '').toContain('min-width: 0');
+        cleanup();
+    });
+});
+//# sourceMappingURL=toast-widget.test.js.map

package/dist/widget-panels/toast-widget.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-widget.test.js","sourceRoot":"","sources":["../../src/widget-panels/toast-widget.test.tsx"],"names":[],"mappings":"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"}

package/dist/widget-panels/toggle-widget.d.ts

@@ -0,0 +1,34 @@
+import { Widget } from '@deck.gl/core';
+import type { WidgetPlacement, WidgetProps } from '@deck.gl/core';
+/** @jsxImportSource preact */
+export type ToggleWidgetProps = WidgetProps & {
+    placement?: WidgetPlacement;
+    viewId?: string | null;
+    /** @default false */
+    defaultChecked?: boolean;
+    /** data url of icon */
+    icon: string;
+    /** Optional data url of icon when checked */
+    onIcon?: string;
+    /** Tooltip text */
+    label?: string;
+    /** Optional tooltip text when checked */
+    onLabel?: string;
+    /** Icon color when checked
+     * @default #3b82f6
+     */
+    onColor?: string;
+    /** Callback on state change */
+    onChange?: (checked: boolean) => void;
+};
+export declare class ToggleWidget extends Widget<ToggleWidgetProps> {
+    static defaultProps: Required<ToggleWidgetProps>;
+    className: string;
+    placement: WidgetPlacement;
+    checked: boolean;
+    constructor(props: ToggleWidgetProps);
+    setProps(props: Partial<ToggleWidgetProps>): void;
+    toggle: () => void;
+    onRenderHTML(rootElement: HTMLElement): void;
+}
+//# sourceMappingURL=toggle-widget.d.ts.map

package/dist/widget-panels/toggle-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-widget.d.ts","sourceRoot":"","sources":["../../src/widget-panels/toggle-widget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAGrC,OAAO,KAAK,EAAC,eAAe,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAEhE,8BAA8B;AAE9B,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,qBAAqB;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,qBAAa,YAAa,SAAQ,MAAM,CAAC,iBAAiB,CAAC;IACzD,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAY9C;IAEF,SAAS,SAAwB;IACjC,SAAS,EAAE,eAAe,CAAc;IAExC,OAAO,EAAE,OAAO,CAAS;gBAEb,KAAK,EAAE,iBAAiB;IAMpC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG,IAAI;IAMjD,MAAM,aAIJ;IAEF,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;CA0B7C"}

package/dist/widget-panels/toggle-widget.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { Widget } from '@deck.gl/core';
+import { render } from 'preact';
+export class ToggleWidget extends Widget {
+    static defaultProps = {
+        ...Widget.defaultProps,
+        id: 'toggle',
+        placement: 'top-left',
+        viewId: null,
+        icon: '',
+        label: '',
+        defaultChecked: false,
+        onIcon: undefined,
+        onLabel: undefined,
+        onColor: '#3b82f6',
+        onChange: undefined
+    };
+    className = 'deck-widget-toggle';
+    placement = 'top-left';
+    checked = false;
+    constructor(props) {
+        super(props);
+        this.setProps(this.props);
+        this.checked = this.props.defaultChecked;
+    }
+    setProps(props) {
+        this.placement = props.placement ?? this.placement;
+        this.viewId = props.viewId ?? this.viewId;
+        super.setProps(props);
+    }
+    toggle = () => {
+        this.checked = !this.checked;
+        this.props.onChange?.(this.checked);
+        this.updateHTML();
+    };
+    onRenderHTML(rootElement) {
+        const { icon, label, onIcon = icon, onLabel = label, onColor } = this.props;
+        const on = this.checked;
+        const title = on ? onLabel : label;
+        render(_jsx("div", { className: "deck-widget-button", children: _jsx("button", { className: "deck-widget-icon-button", type: "button", title: title, "aria-label": title, onClick: this.toggle, children: _jsx("div", { className: "deck-widget-icon", style: {
+                        backgroundColor: on ? onColor : '',
+                        maskImage: `url('${on ? onIcon : icon}')`
+                    } }) }) }), rootElement);
+    }
+}
+//# sourceMappingURL=toggle-widget.js.map

package/dist/widget-panels/toggle-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-widget.js","sourceRoot":"","sources":["../../src/widget-panels/toggle-widget.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,QAAQ,CAAC;AA2B9B,MAAM,OAAO,YAAa,SAAQ,MAAyB;IACzD,MAAM,CAAC,YAAY,GAAgC;QACjD,GAAG,MAAM,CAAC,YAAY;QACtB,EAAE,EAAE,QAAQ;QACZ,SAAS,EAAE,UAAU;QACrB,MAAM,EAAE,IAAI;QACZ,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,EAAE;QACT,cAAc,EAAE,KAAK;QACrB,MAAM,EAAE,SAAU;QAClB,OAAO,EAAE,SAAU;QACnB,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,SAAU;KACrB,CAAC;IAEF,SAAS,GAAG,oBAAoB,CAAC;IACjC,SAAS,GAAoB,UAAU,CAAC;IAExC,OAAO,GAAY,KAAK,CAAC;IAEzB,YAAY,KAAwB;QAClC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;IAC3C,CAAC;IAED,QAAQ,CAAC,KAAiC;QACxC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;QACnD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC;QAC1C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAED,MAAM,GAAG,GAAG,EAAE;QACZ,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACpC,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC,CAAC;IAEF,YAAY,CAAC,WAAwB;QACnC,MAAM,EAAC,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC1E,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;QACxB,MAAM,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QAEnC,MAAM,CACJ,cAAK,SAAS,EAAC,oBAAoB,YACjC,iBACE,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,gBACA,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,MAAM,YAEpB,cACE,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAE;wBACL,eAAe,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;wBAClC,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI;qBAC1C,GACD,GACK,GACL,EACN,WAAW,CACZ,CAAC;IACJ,CAAC"}

package/dist/widget-panels/toolbar-widget.d.ts

@@ -0,0 +1,53 @@
+/** @jsxImportSource preact */
+import { Widget } from '@deck.gl/core';
+import type { WidgetPlacement, WidgetProps } from '@deck.gl/core';
+import type { ComponentChild } from 'preact';
+export type ToolbarWidgetActionItem = {
+    kind: 'action';
+    id: string;
+    label: string;
+    icon?: ComponentChild;
+    title?: string;
+    disabled?: boolean;
+    active?: boolean;
+    onClick?: () => void;
+};
+export type ToolbarWidgetToggleOption = {
+    id: string;
+    label: string;
+    icon?: ComponentChild;
+    title?: string;
+    disabled?: boolean;
+};
+export type ToolbarWidgetToggleGroupItem = {
+    kind: 'toggle-group';
+    id: string;
+    label?: string;
+    title?: string;
+    disabled?: boolean;
+    selectedId?: string | null;
+    options: ToolbarWidgetToggleOption[];
+    onSelect?: (optionId: string) => void;
+};
+export type ToolbarWidgetBadgeItem = {
+    kind: 'badge';
+    id: string;
+    label: string;
+    title?: string;
+};
+export type ToolbarWidgetItem = ToolbarWidgetActionItem | ToolbarWidgetToggleGroupItem | ToolbarWidgetBadgeItem;
+export type ToolbarWidgetProps = WidgetProps & {
+    placement?: WidgetPlacement;
+    items?: ToolbarWidgetItem[];
+};
+export declare class ToolbarWidget extends Widget<ToolbarWidgetProps> {
+    #private;
+    static defaultProps: Required<ToolbarWidgetProps>;
+    className: string;
+    placement: WidgetPlacement;
+    constructor(props?: ToolbarWidgetProps);
+    setProps(props: Partial<ToolbarWidgetProps>): void;
+    onRemove(): void;
+    onRenderHTML(rootElement: HTMLElement): void;
+}
+//# sourceMappingURL=toolbar-widget.d.ts.map

package/dist/widget-panels/toolbar-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-widget.d.ts","sourceRoot":"","sources":["../../src/widget-panels/toolbar-widget.tsx"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAGrC,OAAO,KAAK,EAAC,eAAe,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,KAAK,EAAC,cAAc,EAAM,MAAM,QAAQ,CAAC;AAEhD,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,QAAQ,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,EAAE,cAAc,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,yBAAyB,EAAE,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GACzB,uBAAuB,GACvB,4BAA4B,GAC5B,sBAAsB,CAAC;AAE3B,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC7B,CAAC;AAgMF,qBAAa,aAAc,SAAQ,MAAM,CAAC,kBAAkB,CAAC;;IAC3D,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAK/C;IAEF,SAAS,SAAyB;IAClC,SAAS,EAAE,eAAe,CAAwC;gBAGtD,KAAK,GAAE,kBAAuB;IAKjC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,kBAAkB,CAAC,GAAG,IAAI;IAQlD,QAAQ,IAAI,IAAI;IAMhB,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;CAiBtD"}

package/dist/widget-panels/toolbar-widget.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+/** @jsxImportSource preact */
+import { Widget } from '@deck.gl/core';
+import { render } from 'preact';
+const ROOT_STYLE = {
+    position: 'absolute',
+    display: 'flex',
+    pointerEvents: 'auto',
+    userSelect: 'none',
+    zIndex: '99'
+};
+const TOOLBAR_STYLE = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    flexWrap: 'wrap',
+    padding: '8px 10px',
+    borderRadius: '999px',
+    background: 'rgba(36, 40, 41, 0.88)',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.25)'
+};
+const ITEM_GROUP_STYLE = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+    minWidth: '0'
+};
+const BUTTON_STYLE = {
+    appearance: 'none',
+    border: 'none',
+    borderRadius: '999px',
+    background: 'transparent',
+    color: '#f0f0f0',
+    minHeight: '30px',
+    padding: '0 10px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '6px',
+    cursor: 'pointer',
+    fontSize: '11px',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontWeight: '500',
+    transition: 'background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease',
+    whiteSpace: 'nowrap'
+};
+const ACTIVE_BUTTON_STYLE = {
+    background: '#0071e3',
+    color: '#ffffff',
+    boxShadow: '0 0 0 2px rgba(255, 255, 255, 0.35)'
+};
+const DISABLED_BUTTON_STYLE = {
+    opacity: 0.45,
+    cursor: 'default'
+};
+const GROUP_LABEL_STYLE = {
+    color: 'rgba(255, 255, 255, 0.65)',
+    fontSize: '11px',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    whiteSpace: 'nowrap'
+};
+const BADGE_STYLE = {
+    padding: '0 8px',
+    minHeight: '28px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '999px',
+    background: 'rgba(255, 255, 255, 0.12)',
+    color: 'rgba(255, 255, 255, 0.88)',
+    fontSize: '11px',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    whiteSpace: 'nowrap'
+};
+function stopToolbarEventPropagation(event) {
+    event.stopPropagation();
+    if (typeof event.stopImmediatePropagation ===
+        'function') {
+        event.stopImmediatePropagation?.();
+    }
+}
+function ToolbarWidgetView({ items }) {
+    return (_jsx("div", { style: TOOLBAR_STYLE, onPointerDown: stopToolbarEventPropagation, onPointerMove: stopToolbarEventPropagation, onPointerUp: stopToolbarEventPropagation, onMouseDown: stopToolbarEventPropagation, onMouseMove: stopToolbarEventPropagation, onMouseUp: stopToolbarEventPropagation, onTouchStart: stopToolbarEventPropagation, onTouchMove: stopToolbarEventPropagation, onTouchEnd: stopToolbarEventPropagation, onClick: stopToolbarEventPropagation, onDblClick: stopToolbarEventPropagation, onContextMenu: stopToolbarEventPropagation, onWheel: stopToolbarEventPropagation, children: items.map((item) => renderToolbarItem(item)) }));
+}
+function renderToolbarItem(item) {
+    if (item.kind === 'badge') {
+        return (_jsx("div", { title: item.title, style: BADGE_STYLE, "data-toolbar-item-kind": "badge", children: item.label }, item.id));
+    }
+    if (item.kind === 'action') {
+        const disabled = item.disabled ?? false;
+        const buttonStyle = {
+            ...BUTTON_STYLE,
+            ...(item.active ? ACTIVE_BUTTON_STYLE : {}),
+            ...(disabled ? DISABLED_BUTTON_STYLE : {})
+        };
+        return (_jsxs("button", { type: "button", title: item.title ?? item.label, "aria-label": item.title ?? item.label, "aria-pressed": item.active ? 'true' : 'false', disabled: disabled, style: buttonStyle, "data-toolbar-item-kind": "action", "data-toolbar-item-id": item.id, onClick: () => {
+                if (!disabled) {
+                    item.onClick?.();
+                }
+            }, children: [item.icon, _jsx("span", { children: item.label })] }, item.id));
+    }
+    const groupDisabled = item.disabled ?? false;
+    return (_jsxs("div", { style: ITEM_GROUP_STYLE, "data-toolbar-item-kind": "toggle-group", children: [item.label ? _jsx("span", { style: GROUP_LABEL_STYLE, children: item.label }) : null, item.options.map((option) => {
+                const disabled = groupDisabled || option.disabled;
+                const active = item.selectedId === option.id;
+                const buttonStyle = {
+                    ...BUTTON_STYLE,
+                    ...(active ? ACTIVE_BUTTON_STYLE : {}),
+                    ...(disabled ? DISABLED_BUTTON_STYLE : {})
+                };
+                return (_jsxs("button", { type: "button", title: option.title ?? option.label ?? item.title, "aria-label": option.title ?? option.label ?? item.title, "aria-pressed": active ? 'true' : 'false', disabled: disabled, style: buttonStyle, "data-toolbar-group-id": item.id, "data-toolbar-option-id": option.id, onClick: () => {
+                        if (!disabled) {
+                            item.onSelect?.(option.id);
+                        }
+                    }, children: [option.icon, _jsx("span", { children: option.label })] }, option.id));
+            })] }, item.id));
+}
+export class ToolbarWidget extends Widget {
+    static defaultProps = {
+        ...Widget.defaultProps,
+        id: 'toolbar-widget',
+        placement: 'top-right',
+        items: []
+    };
+    className = 'deck-widget-toolbar';
+    placement = ToolbarWidget.defaultProps.placement;
+    #rootElement = null;
+    constructor(props = {}) {
+        super({ ...ToolbarWidget.defaultProps, ...props });
+        this.setProps(this.props);
+    }
+    setProps(props) {
+        if (props.placement !== undefined) {
+            this.placement = props.placement;
+        }
+        super.setProps(props);
+        this.#render();
+    }
+    onRemove() {
+        if (this.#rootElement) {
+            render(null, this.#rootElement);
+        }
+    }
+    onRenderHTML(rootElement) {
+        this.#rootElement = rootElement;
+        const className = ['deck-widget', this.className, this.props.className]
+            .filter(Boolean)
+            .join(' ');
+        rootElement.className = className;
+        Object.assign(rootElement.style, ROOT_STYLE, this.props.style ?? {});
+        this.#render();
+    }
+    #render() {
+        if (!this.#rootElement) {
+            return;
+        }
+        render(_jsx(ToolbarWidgetView, { items: this.props.items ?? [] }), this.#rootElement);
+    }
+}
+//# sourceMappingURL=toolbar-widget.js.map

package/dist/widget-panels/toolbar-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-widget.js","sourceRoot":"","sources":["../../src/widget-panels/toolbar-widget.tsx"],"names":[],"mappings":"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"}

package/dist/widget-panels/toolbar-widget.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toolbar-widget.test.d.ts.map

package/dist/widget-panels/toolbar-widget.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-widget.test.d.ts","sourceRoot":"","sources":["../../src/widget-panels/toolbar-widget.test.ts"],"names":[],"mappings":""}