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

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

@@ -0,0 +1,761 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+/** @jsxImportSource preact */
+import { createContext } from 'preact';
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { DarkTheme, LightTheme } from '@deck.gl/widgets';
+/**
+ * Normalizes an object map of panels into an array in insertion order.
+ */
+function normalizePanelRecordPanels(panels) {
+    return Object.keys(panels).map((panelId) => {
+        const panel = panels[panelId];
+        return {
+            ...panel,
+            id: panelId
+        };
+    });
+}
+/**
+ * Mounts an imperative HTML host for custom widget panels.
+ */
+function CustomPanelContent({ className, onRenderHTML }) {
+    const rootElementRef = useRef(null);
+    useLayoutEffect(() => {
+        const rootElement = rootElementRef.current;
+        if (!rootElement) {
+            return undefined;
+        }
+        const cleanup = onRenderHTML(rootElement);
+        return () => {
+            if (typeof cleanup === 'function') {
+                cleanup();
+            }
+        };
+    }, [onRenderHTML]);
+    return _jsx("div", { ref: rootElementRef, className: className });
+}
+/**
+ * A wrapper panel that renders child panels in an accordion layout.
+ */
+export class AccordeonPanel {
+    id;
+    title;
+    content;
+    theme;
+    constructor({ panels, id = 'accordeon-widgets', title = 'Panels', theme = 'inherit' }) {
+        this.id = id;
+        this.title = title;
+        this.theme = theme;
+        this.content = _jsx(AccordeonWidgetContainer, { panels: normalizePanelRecordPanels(panels) });
+    }
+}
+/**
+ * A wrapper panel that renders child panels in a tabbed layout.
+ */
+export class TabbedPanel {
+    id;
+    title;
+    content;
+    theme;
+    constructor({ panels, id = 'tabbed-widgets', title = 'Panels', tabListLayout = 'wrap', theme = 'inherit' }) {
+        this.id = id;
+        this.title = title;
+        this.theme = theme;
+        this.content = (_jsx(TabbedWidgetContainer, { panels: normalizePanelRecordPanels(panels), tabListLayout: tabListLayout }));
+    }
+}
+/**
+ * A wrapper panel that renders child panels in a vertical column.
+ */
+export class ColumnPanel {
+    id;
+    title;
+    content;
+    theme;
+    constructor({ panels, id = 'column-widgets', title = 'Panels', theme = 'inherit' }) {
+        this.id = id;
+        this.title = title;
+        this.theme = theme;
+        this.content = _jsx(ColumnWidgetContainer, { panels: normalizePanelRecordPanels(panels) });
+    }
+}
+/**
+ * A wrapper panel that renders imperative HTML content into a managed host element.
+ */
+export class CustomPanel {
+    id;
+    title;
+    content;
+    theme;
+    disabled;
+    keepMounted;
+    constructor({ id, title, onRenderHTML, disabled, keepMounted, className, theme = 'inherit' }) {
+        this.id = id;
+        this.title = title;
+        this.theme = theme;
+        this.disabled = disabled;
+        this.keepMounted = keepMounted;
+        this.content = _jsx(CustomPanelContent, { className: className, onRenderHTML: onRenderHTML });
+    }
+}
+/**
+ * A wrapper panel that renders a minimal built-in Markdown subset without external parsers.
+ */
+export class MarkdownPanel {
+    id;
+    title;
+    content;
+    theme;
+    disabled;
+    keepMounted;
+    constructor({ id, title, markdown, disabled, keepMounted, className, theme = 'inherit' }) {
+        this.id = id;
+        this.title = title;
+        this.theme = theme;
+        this.disabled = disabled;
+        this.keepMounted = keepMounted;
+        this.content = (_jsx("div", { className: className, style: MARKDOWN_PANEL_STYLE, children: renderMarkdownBlocks(markdown) }));
+    }
+}
+/**
+ * Builds a direct-content container for modal-style and sidebar panel shorthands.
+ */
+export function asPanelContainer(panel) {
+    return {
+        kind: 'panel',
+        props: {
+            panel
+        }
+    };
+}
+/**
+ * Renders an accordion-style widget panel stack.
+ */
+export function AccordeonWidgetContainer({ panels, className, defaultExpandedPanelIds = [], expandedPanelIds, onExpandedPanelIdsChange, allowMultipleExpanded = true }) {
+    const [currentExpandedPanelIds, setCurrentExpandedPanelIds] = useControlledStringListState(expandedPanelIds, defaultExpandedPanelIds);
+    const expandedPanelIdSet = useMemo(() => new Set(currentExpandedPanelIds), [currentExpandedPanelIds]);
+    const effectivePanels = useMemo(() => [...panels], [panels]);
+    const handleTogglePanel = useCallback((panelId) => {
+        const nextPanelIds = new Set(allowMultipleExpanded ? currentExpandedPanelIds : []);
+        if (nextPanelIds.has(panelId)) {
+            nextPanelIds.delete(panelId);
+        }
+        else {
+            if (!allowMultipleExpanded) {
+                nextPanelIds.clear();
+            }
+            nextPanelIds.add(panelId);
+        }
+        const next = [...nextPanelIds];
+        setCurrentExpandedPanelIds(next);
+        onExpandedPanelIdsChange?.(next);
+    }, [allowMultipleExpanded, currentExpandedPanelIds, onExpandedPanelIdsChange]);
+    return (_jsx("div", { className: className, style: ACCORDEON_CONTAINER_STYLE, children: effectivePanels.map((panel) => {
+            const isExpanded = expandedPanelIdSet.has(panel.id);
+            const shouldRenderContent = panel.keepMounted || isExpanded;
+            return (_jsxs("section", { style: ACCORDION_PANEL_STYLE, children: [_jsxs("button", { type: "button", style: {
+                            ...ACCORDION_HEADING_STYLE,
+                            cursor: panel.disabled ? 'not-allowed' : 'pointer',
+                            opacity: panel.disabled ? 0.55 : 1
+                        }, disabled: panel.disabled, onPointerDown: (event) => {
+                            if (panel.disabled) {
+                                event.stopPropagation();
+                                return;
+                            }
+                            event.preventDefault();
+                            handleTogglePanel(panel.id);
+                        }, children: [_jsx("span", { children: panel.title }), _jsx("span", { style: {
+                                    transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                                    transition: 'transform 160ms ease'
+                                }, children: "\u25B8" })] }), _jsx("div", { style: {
+                            ...ACCORDION_CONTENT_STYLE,
+                            display: isExpanded ? 'block' : 'none'
+                        }, children: shouldRenderContent ? (_jsx(WidgetPanelThemeScope, { panel: panel, children: panel.content })) : null })] }, panel.id));
+        }) }));
+}
+/**
+ * Renders a tabbed widget panel switcher.
+ */
+export function TabbedWidgetContainer({ panels, className, defaultActivePanelId, activePanelId, onActivePanelIdChange, tabListLayout = 'wrap' }) {
+    const [currentActivePanelId, setCurrentActivePanelId] = useControlledStringState(activePanelId, defaultActivePanelId);
+    const enabledPanels = useMemo(() => panels.filter((panel) => !panel.disabled), [panels]);
+    const initialActivePanelId = useMemo(() => {
+        const isActivePanelEnabled = currentActivePanelId
+            ? enabledPanels.some((panel) => panel.id === currentActivePanelId)
+            : false;
+        return isActivePanelEnabled ? currentActivePanelId : enabledPanels[0]?.id;
+    }, [currentActivePanelId, enabledPanels]);
+    useEffect(() => {
+        const shouldSyncActivePanel = currentActivePanelId !== initialActivePanelId;
+        if (!shouldSyncActivePanel || !initialActivePanelId) {
+            return;
+        }
+        setCurrentActivePanelId(initialActivePanelId);
+        onActivePanelIdChange?.(initialActivePanelId);
+    }, [currentActivePanelId, initialActivePanelId, onActivePanelIdChange, setCurrentActivePanelId]);
+    return (_jsxs("div", { className: className, style: TABBED_CONTAINER_STYLE, children: [_jsx("div", { "data-widget-tabs": "", style: getTabListStyle(tabListLayout), children: panels.map((panel) => {
+                    const isActive = panel.id === initialActivePanelId;
+                    return (_jsx("button", { type: "button", style: {
+                            ...TAB_BUTTON_STYLE,
+                            opacity: panel.disabled ? 0.55 : 1,
+                            backgroundColor: isActive
+                                ? 'var(--button-background, rgba(255, 255, 255, 0.96))'
+                                : 'transparent',
+                            borderColor: isActive
+                                ? 'var(--menu-border, rgba(148, 163, 184, 0.35))'
+                                : 'transparent',
+                            color: isActive
+                                ? 'var(--button-text, rgb(24, 24, 26))'
+                                : 'var(--button-icon-idle, rgb(71, 85, 105))',
+                            boxShadow: isActive ? '0 1px 2px rgba(15, 23, 42, 0.08)' : 'none'
+                        }, disabled: panel.disabled, onPointerDown: (event) => {
+                            if (panel.disabled) {
+                                event.stopPropagation();
+                                return;
+                            }
+                            event.preventDefault();
+                            setCurrentActivePanelId(panel.id);
+                            onActivePanelIdChange?.(panel.id);
+                        }, children: panel.title }, panel.id));
+                }) }), _jsx("div", { style: TAB_PANEL_STYLE, children: panels.map((panel) => {
+                    const isActive = panel.id === initialActivePanelId;
+                    return (_jsx("div", { "aria-hidden": !isActive, style: {
+                            ...TAB_PANEL_CONTENT_STYLE,
+                            visibility: isActive ? 'visible' : 'hidden',
+                            pointerEvents: isActive ? 'auto' : 'none'
+                        }, children: _jsx(WidgetPanelThemeScope, { panel: panel, children: panel.content }) }, panel.id));
+                }) })] }));
+}
+/**
+ * Renders child panels in a simple vertical column.
+ */
+export function ColumnWidgetContainer({ panels, className }) {
+    const effectivePanels = useMemo(() => [...panels], [panels]);
+    return (_jsx("div", { className: className, style: COLUMN_CONTAINER_STYLE, children: effectivePanels.map((panel, panelIndex) => (_jsxs("section", { style: {
+                ...COLUMN_PANEL_STYLE,
+                borderTop: panelIndex > 0 ? '1px solid var(--menu-border, rgba(148, 163, 184, 0.25))' : 'none',
+                opacity: panel.disabled ? 0.55 : 1
+            }, children: [panel.title ? _jsx("header", { style: COLUMN_PANEL_HEADER_STYLE, children: panel.title }) : null, _jsx("div", { style: COLUMN_PANEL_CONTENT_STYLE, children: _jsx(WidgetPanelThemeScope, { panel: panel, children: panel.content }) })] }, panel.id))) }));
+}
+/**
+ * Renders the requested container based on descriptor kind.
+ */
+export function WidgetContainerRenderer({ container }) {
+    if (container.kind === 'accordeon') {
+        return _jsx(AccordeonWidgetContainer, { ...container.props });
+    }
+    if (container.kind === 'panel') {
+        return (_jsx("div", { className: container.props.className, children: _jsx(WidgetPanelThemeScope, { panel: container.props.panel, children: container.props.panel.content }) }));
+    }
+    return _jsx(TabbedWidgetContainer, { ...container.props });
+}
+const PanelThemeModeContext = createContext(undefined);
+/**
+ * Returns the effective light/dark theme mode for the current panel subtree.
+ */
+export function useEffectiveWidgetPanelThemeMode() {
+    return useContext(PanelThemeModeContext) ?? 'light';
+}
+/**
+ * Applies a panel-level theme override and exposes the resolved mode to descendants.
+ */
+function WidgetPanelThemeScope({ panel, children }) {
+    const inheritedMode = useContext(PanelThemeModeContext);
+    const hostElementRef = useRef(null);
+    const [rootMode, setRootMode] = useState('light');
+    const parentMode = inheritedMode ?? rootMode;
+    const resolvedMode = resolveWidgetPanelThemeMode(parentMode, panel.theme);
+    useLayoutEffect(() => {
+        if (!inheritedMode) {
+            const hostElement = hostElementRef.current;
+            if (!hostElement) {
+                return undefined;
+            }
+            const parentHostElement = hostElement.parentElement instanceof HTMLElement ? hostElement.parentElement : hostElement;
+            const updateRootMode = () => {
+                const inferredMode = inferWidgetPanelThemeMode(parentHostElement);
+                setRootMode((previousMode) => previousMode === inferredMode ? previousMode : inferredMode);
+            };
+            updateRootMode();
+            const themedContainer = parentHostElement.closest('.deck-widget-container');
+            const mutationObserver = new MutationObserver(() => {
+                updateRootMode();
+            });
+            mutationObserver.observe(parentHostElement, {
+                attributes: true,
+                attributeFilter: ['style', 'class']
+            });
+            if (themedContainer && themedContainer !== parentHostElement) {
+                mutationObserver.observe(themedContainer, {
+                    attributes: true,
+                    attributeFilter: ['style', 'class']
+                });
+            }
+            return () => {
+                mutationObserver.disconnect();
+            };
+        }
+        return undefined;
+    }, [inheritedMode]);
+    return (_jsx(PanelThemeModeContext.Provider, { value: resolvedMode, children: _jsx("div", { ref: hostElementRef, "data-panel-theme-mode": resolvedMode, style: getWidgetPanelThemeScopeStyle(resolvedMode), children: children }) }));
+}
+/**
+ * Resolves one local panel theme override against its parent effective mode.
+ */
+function resolveWidgetPanelThemeMode(parentMode, theme) {
+    if (theme === 'dark') {
+        return 'dark';
+    }
+    if (theme === 'light') {
+        return 'light';
+    }
+    if (theme === 'invert') {
+        return parentMode === 'dark' ? 'light' : 'dark';
+    }
+    return parentMode;
+}
+/**
+ * Builds the inline CSS variable scope for one resolved panel theme mode.
+ */
+function getWidgetPanelThemeScopeStyle(mode) {
+    const themeVariables = mode === 'dark' ? DarkTheme : LightTheme;
+    return { ...themeVariables };
+}
+/**
+ * Infers the surrounding widget theme mode from resolved CSS variables.
+ */
+function inferWidgetPanelThemeMode(hostElement) {
+    const ownerWindow = hostElement.ownerDocument.defaultView;
+    if (!ownerWindow) {
+        return 'light';
+    }
+    const computedStyle = ownerWindow.getComputedStyle(hostElement);
+    const menuBackground = computedStyle.getPropertyValue('--menu-background').trim();
+    const parsedColor = parseThemeColor(menuBackground);
+    if (!parsedColor) {
+        return 'light';
+    }
+    return getRelativeLuminance(parsedColor) < 0.5 ? 'dark' : 'light';
+}
+/**
+ * Parses a CSS rgb/rgba/hex color string into numeric channels.
+ */
+function parseThemeColor(value) {
+    if (!value) {
+        return null;
+    }
+    if (value.startsWith('#')) {
+        const hex = value.slice(1);
+        if (hex.length === 3) {
+            return [
+                parseInt(hex[0] + hex[0], 16),
+                parseInt(hex[1] + hex[1], 16),
+                parseInt(hex[2] + hex[2], 16)
+            ];
+        }
+        if (hex.length >= 6) {
+            return [
+                parseInt(hex.slice(0, 2), 16),
+                parseInt(hex.slice(2, 4), 16),
+                parseInt(hex.slice(4, 6), 16)
+            ];
+        }
+        return null;
+    }
+    const channelMatches = value.match(/[\d.]+/g);
+    if (!channelMatches || channelMatches.length < 3) {
+        return null;
+    }
+    return [Number(channelMatches[0]), Number(channelMatches[1]), Number(channelMatches[2])];
+}
+/**
+ * Computes relative luminance for an RGB color.
+ */
+function getRelativeLuminance([red, green, blue]) {
+    return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
+}
+/**
+ * Keeps local string-state in sync with controlled/uncontrolled props.
+ */
+function useControlledStringState(controlledValue, defaultValue) {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const resolvedValue = isControlled ? controlledValue : internalValue;
+    useEffect(() => {
+        if (!isControlled) {
+            return;
+        }
+        setInternalValue(controlledValue);
+    }, [isControlled, controlledValue]);
+    const setValue = useCallback((next) => {
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+    }, [isControlled]);
+    return [resolvedValue, setValue];
+}
+/**
+ * Renders a Markdown document into a safe built-in subset of block elements.
+ */
+/* eslint-disable max-statements, no-continue */
+function renderMarkdownBlocks(markdown) {
+    const normalizedMarkdown = markdown.replace(/\r\n?/g, '\n');
+    const lines = normalizedMarkdown.split('\n');
+    const blocks = [];
+    const paragraphLines = [];
+    const unorderedListItems = [];
+    const orderedListItems = [];
+    let fencedCodeLines;
+    let blockIndex = 0;
+    const flushParagraph = () => {
+        if (paragraphLines.length === 0) {
+            return;
+        }
+        const paragraphText = paragraphLines.join(' ');
+        const currentBlockKey = `paragraph-${blockIndex++}`;
+        blocks.push(_jsx("p", { style: MARKDOWN_PARAGRAPH_STYLE, children: renderInlineMarkdown(paragraphText, currentBlockKey) }, currentBlockKey));
+        paragraphLines.length = 0;
+    };
+    const flushUnorderedList = () => {
+        if (unorderedListItems.length === 0) {
+            return;
+        }
+        const currentBlockIndex = blockIndex++;
+        blocks.push(_jsx("ul", { style: MARKDOWN_LIST_STYLE, children: unorderedListItems.map((item, itemIndex) => (_jsx("li", { style: MARKDOWN_LIST_ITEM_STYLE, children: renderInlineMarkdown(item, `unordered-item-${currentBlockIndex}-${itemIndex}`) }, `unordered-item-${currentBlockIndex}-${itemIndex}`))) }, `unordered-list-${currentBlockIndex}`));
+        unorderedListItems.length = 0;
+    };
+    const flushOrderedList = () => {
+        if (orderedListItems.length === 0) {
+            return;
+        }
+        const currentBlockIndex = blockIndex++;
+        blocks.push(_jsx("ol", { style: MARKDOWN_LIST_STYLE, children: orderedListItems.map((item, itemIndex) => (_jsx("li", { style: MARKDOWN_LIST_ITEM_STYLE, children: renderInlineMarkdown(item, `ordered-item-${currentBlockIndex}-${itemIndex}`) }, `ordered-item-${currentBlockIndex}-${itemIndex}`))) }, `ordered-list-${currentBlockIndex}`));
+        orderedListItems.length = 0;
+    };
+    const flushFencedCodeBlock = () => {
+        if (fencedCodeLines === undefined) {
+            return;
+        }
+        blocks.push(_jsx("pre", { style: MARKDOWN_CODE_BLOCK_STYLE, children: _jsx("code", { children: fencedCodeLines.join('\n') }) }, `code-${blockIndex++}`));
+        fencedCodeLines = undefined;
+    };
+    for (const line of lines) {
+        const trimmedLine = line.trim();
+        if (fencedCodeLines !== undefined) {
+            if (trimmedLine.startsWith('```')) {
+                flushFencedCodeBlock();
+            }
+            else {
+                fencedCodeLines.push(line);
+            }
+            continue;
+        }
+        if (trimmedLine.startsWith('```')) {
+            flushParagraph();
+            flushUnorderedList();
+            flushOrderedList();
+            fencedCodeLines = [];
+            continue;
+        }
+        if (trimmedLine.length === 0) {
+            flushParagraph();
+            flushUnorderedList();
+            flushOrderedList();
+            continue;
+        }
+        const headingMatch = trimmedLine.match(/^(#{1,6})\s+(.+)$/);
+        if (headingMatch) {
+            flushParagraph();
+            flushUnorderedList();
+            flushOrderedList();
+            const headingLevel = headingMatch[1].length;
+            const headingText = headingMatch[2];
+            const HeadingTag = `h${headingLevel}`;
+            const currentBlockKey = `heading-${blockIndex++}`;
+            blocks.push(_jsx(HeadingTag, { style: getMarkdownHeadingStyle(headingLevel), children: renderInlineMarkdown(headingText, currentBlockKey) }, currentBlockKey));
+            continue;
+        }
+        const unorderedListMatch = trimmedLine.match(/^[-*]\s+(.+)$/);
+        if (unorderedListMatch) {
+            flushParagraph();
+            flushOrderedList();
+            unorderedListItems.push(unorderedListMatch[1]);
+            continue;
+        }
+        const orderedListMatch = trimmedLine.match(/^\d+\.\s+(.+)$/);
+        if (orderedListMatch) {
+            flushParagraph();
+            flushUnorderedList();
+            orderedListItems.push(orderedListMatch[1]);
+            continue;
+        }
+        paragraphLines.push(trimmedLine);
+    }
+    flushParagraph();
+    flushUnorderedList();
+    flushOrderedList();
+    flushFencedCodeBlock();
+    return blocks;
+}
+/**
+ * Renders a minimal inline Markdown subset into safe text and inline elements.
+ */
+// eslint-disable-next-line complexity
+function renderInlineMarkdown(source, keyPrefix) {
+    const inlineTokenPattern = /(\[([^\]]+)\]\(([^)\s]+)\)|`([^`]+)`|\*\*([^*]+)\*\*|__([^_]+)__|\*([^*]+)\*|_([^_]+)_)/g;
+    const children = [];
+    let match;
+    let previousIndex = 0;
+    let tokenIndex = 0;
+    for (match = inlineTokenPattern.exec(source); match; match = inlineTokenPattern.exec(source)) {
+        if (match.index > previousIndex) {
+            children.push(source.slice(previousIndex, match.index));
+        }
+        if (match[2] !== undefined && match[3] !== undefined) {
+            children.push(_jsx("a", { href: match[3], target: "_blank", rel: "noreferrer", style: MARKDOWN_LINK_STYLE, children: match[2] }, `${keyPrefix}-link-${tokenIndex}`));
+        }
+        else if (match[4] !== undefined) {
+            children.push(_jsx("code", { style: MARKDOWN_INLINE_CODE_STYLE, children: match[4] }, `${keyPrefix}-code-${tokenIndex}`));
+        }
+        else if (match[5] !== undefined || match[6] !== undefined) {
+            children.push(_jsx("strong", { children: match[5] ?? match[6] }, `${keyPrefix}-strong-${tokenIndex}`));
+        }
+        else if (match[7] !== undefined || match[8] !== undefined) {
+            children.push(_jsx("em", { children: match[7] ?? match[8] }, `${keyPrefix}-em-${tokenIndex}`));
+        }
+        previousIndex = match.index + match[0].length;
+        tokenIndex += 1;
+    }
+    if (previousIndex < source.length) {
+        children.push(source.slice(previousIndex));
+    }
+    if (children.length === 0) {
+        return [source];
+    }
+    return children;
+}
+/* eslint-enable max-statements, no-continue */
+/**
+ * Returns the heading style for one Markdown heading level.
+ */
+function getMarkdownHeadingStyle(level) {
+    if (level === 1) {
+        return MARKDOWN_HEADING_1_STYLE;
+    }
+    if (level === 2) {
+        return MARKDOWN_HEADING_2_STYLE;
+    }
+    if (level === 3) {
+        return MARKDOWN_HEADING_3_STYLE;
+    }
+    return MARKDOWN_HEADING_4_TO_6_STYLE;
+}
+/**
+ * Normalizes panel id collections for deterministic membership checks and stable state.
+ */
+function normalizePanelIds(values) {
+    if (!values || values.length === 0) {
+        return [];
+    }
+    const deduped = [];
+    const seen = new Set();
+    for (const value of values) {
+        const trimmed = String(value);
+        if (!seen.has(trimmed)) {
+            seen.add(trimmed);
+            deduped.push(trimmed);
+        }
+    }
+    return deduped;
+}
+/**
+ * Keeps local list state in sync with controlled/uncontrolled props.
+ */
+function useControlledStringListState(controlledValue, defaultValue) {
+    const [internalValue, setInternalValue] = useState(() => normalizePanelIds(controlledValue ?? defaultValue));
+    const isControlled = controlledValue !== undefined;
+    const resolvedValue = isControlled ? normalizePanelIds(controlledValue) : internalValue;
+    useEffect(() => {
+        if (!isControlled) {
+            return;
+        }
+        setInternalValue(normalizePanelIds(controlledValue));
+    }, [isControlled, controlledValue]);
+    const setValue = useCallback((next) => {
+        if (!isControlled) {
+            setInternalValue(normalizePanelIds(next));
+        }
+    }, [isControlled]);
+    return [resolvedValue, setValue];
+}
+/**
+ * Shared accordion/tab layout styles.
+ */
+const ACCORDEON_CONTAINER_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px'
+};
+const ACCORDION_PANEL_STYLE = {
+    border: 'var(--menu-border, 1px solid rgba(148, 163, 184, 0.35))',
+    borderRadius: 'var(--button-corner-radius, 8px)',
+    overflow: 'hidden'
+};
+const ACCORDION_HEADING_STYLE = {
+    width: '100%',
+    border: '0',
+    margin: '0',
+    padding: '10px 12px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '8px',
+    backgroundColor: 'var(--menu-background, #fff)',
+    color: 'var(--menu-text, rgb(24, 24, 26))',
+    fontSize: '12px',
+    lineHeight: 1.2,
+    fontWeight: 700
+};
+const ACCORDION_CONTENT_STYLE = {
+    padding: '8px 10px 10px 12px',
+    borderTop: 'var(--menu-divider, var(--menu-border, 1px solid rgba(148, 163, 184, 0.25)))',
+    backgroundColor: 'var(--menu-background, #fff)',
+    color: 'var(--menu-text, rgb(24, 24, 26))'
+};
+const TABBED_CONTAINER_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: '220px',
+    border: 'var(--menu-border, 1px solid rgba(148, 163, 184, 0.35))',
+    borderRadius: 'var(--button-corner-radius, 8px)',
+    overflow: 'hidden',
+    backgroundColor: 'var(--menu-background, #fff)',
+    color: 'var(--menu-text, rgb(24, 24, 26))'
+};
+function getTabListStyle(tabListLayout) {
+    return {
+        display: 'flex',
+        alignItems: 'flex-start',
+        flexWrap: tabListLayout === 'wrap' ? 'wrap' : 'nowrap',
+        gap: '4px',
+        overflowX: tabListLayout === 'scroll' ? 'auto' : 'hidden',
+        overflowY: 'hidden',
+        background: 'var(--menu-weak-background, var(--button-background, var(--menu-background, #fff)))',
+        padding: '4px 6px',
+        borderBottom: 'var(--menu-divider, var(--menu-border, 1px solid rgba(148, 163, 184, 0.2)))',
+        position: 'sticky',
+        top: 0,
+        zIndex: 1
+    };
+}
+const TAB_BUTTON_STYLE = {
+    flex: '0 0 auto',
+    border: '1px solid transparent',
+    borderRadius: '4px',
+    margin: 0,
+    padding: '4px 8px',
+    fontSize: '12px',
+    fontWeight: 600,
+    lineHeight: 1.25,
+    cursor: 'pointer',
+    color: 'var(--menu-text, rgb(24, 24, 26))',
+    backgroundColor: 'rgba(255, 255, 255, 0.35)',
+    whiteSpace: 'nowrap',
+    transition: 'background-color 120ms ease, border-color 120ms ease, color 120ms ease'
+};
+const TAB_PANEL_STYLE = {
+    display: 'grid',
+    alignItems: 'start',
+    padding: '10px',
+    overflow: 'auto'
+};
+const TAB_PANEL_CONTENT_STYLE = {
+    gridArea: '1 / 1',
+    minWidth: 0
+};
+const COLUMN_CONTAINER_STYLE = {
+    display: 'grid',
+    gap: '0'
+};
+const COLUMN_PANEL_STYLE = {
+    display: 'grid',
+    gap: '10px',
+    padding: '12px 0'
+};
+const COLUMN_PANEL_HEADER_STYLE = {
+    fontSize: '12px',
+    fontWeight: 700,
+    color: 'var(--button-text, currentColor)',
+    padding: '0 2px'
+};
+const COLUMN_PANEL_CONTENT_STYLE = {
+    minWidth: 0
+};
+const MARKDOWN_PANEL_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12px',
+    color: 'var(--menu-text, rgb(24, 24, 26))',
+    fontSize: '13px',
+    lineHeight: '1.5'
+};
+const MARKDOWN_PARAGRAPH_STYLE = {
+    margin: '0'
+};
+const MARKDOWN_LIST_STYLE = {
+    margin: '0',
+    paddingLeft: '18px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '6px'
+};
+const MARKDOWN_LIST_ITEM_STYLE = {
+    margin: '0'
+};
+const MARKDOWN_CODE_BLOCK_STYLE = {
+    margin: '0',
+    padding: '10px 12px',
+    borderRadius: '8px',
+    overflowX: 'auto',
+    background: 'var(--menu-weak-background, var(--button-background, var(--menu-background, #fff)))',
+    border: '1px solid var(--menu-border, rgba(148, 163, 184, 0.2))',
+    color: 'var(--menu-text, rgb(24, 24, 26))',
+    fontSize: '12px',
+    lineHeight: '1.45'
+};
+const MARKDOWN_INLINE_CODE_STYLE = {
+    padding: '1px 5px',
+    borderRadius: '4px',
+    background: 'var(--menu-weak-background, var(--button-background, var(--menu-background, #fff)))',
+    border: '1px solid var(--menu-border, rgba(148, 163, 184, 0.2))',
+    color: 'var(--menu-text, rgb(24, 24, 26))',
+    fontSize: '12px'
+};
+const MARKDOWN_LINK_STYLE = {
+    color: 'var(--button-text, rgb(29, 78, 216))'
+};
+const MARKDOWN_HEADING_1_STYLE = {
+    margin: '0',
+    fontSize: '20px',
+    fontWeight: 700,
+    lineHeight: '1.25'
+};
+const MARKDOWN_HEADING_2_STYLE = {
+    margin: '0',
+    fontSize: '17px',
+    fontWeight: 700,
+    lineHeight: '1.3'
+};
+const MARKDOWN_HEADING_3_STYLE = {
+    margin: '0',
+    fontSize: '15px',
+    fontWeight: 700,
+    lineHeight: '1.35'
+};
+const MARKDOWN_HEADING_4_TO_6_STYLE = {
+    margin: '0',
+    fontSize: '13px',
+    fontWeight: 700,
+    lineHeight: '1.4'
+};
+//# sourceMappingURL=widget-containers.js.map