@sqlrooms/deck 0.29.0-rc.11 → 0.29.0-rc.13

package/dist/MapSettings.js

@@ -1,43 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { getTableIdentity, resolveTableReference, } from '@sqlrooms/duckdb';
-import { binnedNumericSchemes, categoricalSchemes, continuousDivergingSchemes, continuousSequentialSchemes, continuousSequentialInterpolators, parseColorString, } from '@sqlrooms/color-scales';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, ScrollArea, SettingsPanelHeader, Switch, } from '@sqlrooms/ui';
+import { binnedNumericSchemes, categoricalSchemeColors, categoricalSchemes, continuousDivergingInterpolators, continuousDivergingSchemes, continuousSequentialSchemes, continuousSequentialInterpolators, parseColorString, } from '@sqlrooms/color-scales';
+import { cn, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, ScrollArea, SettingsPanelHeader, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Tooltip, TooltipContent, TooltipTrigger, } from '@sqlrooms/ui';
+import { AlertTriangleIcon } from 'lucide-react';
+import { DeckMapBasemapSelect } from './DeckMapBasemapSelect';
 import { isDeckMapTableDatasetSource } from './mapConfig';
-import { clearDeckMapLayerColorScale, createDeckMapLayerColorScale, DECK_MAP_COLOR_SCALE_TYPE_OPTIONS, DECK_MAP_LAYER_TYPE_OPTIONS, getDeckMapColorAccessorOptions, getDeckMapLayerDatasetId, getDeckMapLayerColorScale, getDeckMapLayerRecords, setDeckMapLayerColorScale, setDeckMapLayerGeometryColumn, setDeckMapLayerHexagonColumn, setDeckMapLayerArcColumns, setDeckMapLayerTimestampColumn, setDeckMapLayerType, updateDeckMapLayer, usesGeometryColumnSetting, usesH3ColumnSetting, usesArcColumnSetting, usesRadiusSetting, usesColumnRadiusSetting, usesTripsSettings, usesExtrusionSettings, } from './mapLayerConfigUtils';
-import { DeckMapCodeViewerPanel, DeckMapCodeViewToggleButton, DeckMapColumnSelector as ColumnSelector, DeckMapColumnsProvider as ColumnsProvider, DeckMapSettingsField as Field, DeckMapTableSelector as DataTableSelector, } from './MapSettingsControls';
+import { clearDeckMapLayerColorScale, createDeckMapLayerColorScale, DECK_MAP_COLOR_SCALE_TYPE_OPTIONS, DECK_MAP_DEFAULT_LAYER_COLOR, DECK_MAP_DEFAULT_STROKE_COLOR, DECK_MAP_LAYER_TYPE_OPTIONS, deckMapRgbaToHex, getDeckMapColorAccessorOptions, getDeckMapLayerDatasetId, getDeckMapLayerColorScale, getDeckMapLayerExtruded, getDeckMapLayerFlatColor, getDeckMapLayerRecords, setDeckMapLayerFlatColor, setDeckMapLayerGeometryColumn, setDeckMapLayerHexagonColumn, setDeckMapLayerArcColumns, setDeckMapLayerTimestampColumn, setDeckMapLayerType, setDeckMapLayerColumnRadius, updateDeckMapLayer, usesGeometryColumnSetting, usesH3ColumnSetting, usesArcColumnSetting, usesRadiusSetting, usesColumnRadiusSetting, usesTripsSettings, usesExtrusionSettings, usesStrokeSetting, usesStrokeExtrusionWarning, getDeckMapLayerStrokeDefault, getDeckMapColorScaleOpacity, getDeckMapLayerChannelOpacityPercent, detachDeckMapLayerOpacity, replaceDeckMapLayerColorScalesWithFlat, replaceDeckMapLayerColorScaleWithFlat, } from './mapLayerConfigUtils';
+import { DeckMapCodeViewerPanel, DeckMapCodeViewToggleButton, DeckMapColumnSelector as ColumnSelector, DeckMapColumnsProvider as ColumnsProvider, DeckMapSettingsField as Field, DeckMapTableSelector as DataTableSelector, filterDeckMapColumns, isDeckMapCategoricalColorColumn, } from './MapSettingsControls';
 import { regenerateMapConfigForTable } from './mapConfigUtils';
 import { useDeckMapDatasetSchema } from './useDeckMapDatasetSchema';
-const HEATMAP_COLOR_STEPS = 6;
+import { detectHeatmapScheme, heatmapSchemeToColorRange, } from './json/heatmapDefaults';
 const EMPTY_COLUMNS = [];
-function schemeToColorRange(scheme) {
-    const interpolator = continuousSequentialInterpolators[scheme];
-    if (!interpolator) {
-        return continuousSequentialInterpolators.Viridis
-            ? Array.from({ length: HEATMAP_COLOR_STEPS }, (_, i) => parseColorString(continuousSequentialInterpolators.Viridis(i / (HEATMAP_COLOR_STEPS - 1))))
-            : [];
+function getColorScaleColumnKind(type) {
+    return type === 'categorical' ? 'categorical' : 'quantitative';
+}
+/** Color-scale type matching the field's column kind. */
+function resolveColorScaleTypeForField(columns, field, preferredType) {
+    if (!field)
+        return preferredType;
+    const column = columns.find((candidate) => candidate.name === field);
+    if (!column?.type)
+        return preferredType;
+    // String/boolean/binary fields only work with categorical scales.
+    if (isDeckMapCategoricalColorColumn(column)) {
+        return 'categorical';
     }
-    return Array.from({ length: HEATMAP_COLOR_STEPS }, (_, i) => parseColorString(interpolator(i / (HEATMAP_COLOR_STEPS - 1))));
+    return preferredType;
 }
-function detectHeatmapScheme(colorRange) {
-    if (!Array.isArray(colorRange) || colorRange.length === 0)
-        return 'Viridis';
-    for (const scheme of continuousSequentialSchemes) {
-        const sampled = schemeToColorRange(scheme);
-        if (sampled.length === colorRange.length) {
-            const matches = sampled.every((color, idx) => {
-                const actual = colorRange[idx];
-                if (!Array.isArray(actual))
-                    return false;
-                return (Math.abs(color[0] - actual[0]) < 2 &&
-                    Math.abs(color[1] - actual[1]) < 2 &&
-                    Math.abs(color[2] - actual[2]) < 2);
-            });
-            if (matches)
-                return scheme;
-        }
+/** First selectable color-scale field for this type. */
+function getDefaultColorScaleField(columns, type, preferred) {
+    const colorable = filterDeckMapColumns(columns, 'colorable');
+    if (preferred && colorable.some((column) => column.name === preferred)) {
+        return preferred;
     }
-    return 'Viridis';
+    const matchingKind = filterDeckMapColumns(colorable, getColorScaleColumnKind(type));
+    return matchingKind[0]?.name ?? colorable[0]?.name;
+}
+/** Pick field first, then coerce scale type to match that field. */
+export function resolveColorScaleFieldAndType(columns, preferredType, preferredField) {
+    const field = getDefaultColorScaleField(columns, preferredType, preferredField);
+    if (!field)
+        return undefined;
+    return {
+        field,
+        type: resolveColorScaleTypeForField(columns, field, preferredType),
+    };
 }
 function getSchemeOptions(type) {
     if (type === 'categorical') {
@@ -52,10 +60,296 @@ function getSchemeOptions(type) {
     // Quantile/quantize/threshold: ColorBrewer only (Viridis → sequential).
     return binnedNumericSchemes;
 }
-export const DeckMapSettingsPanel = ({ title, selectedTable, config, tables, onClose, onTableChange, onTitleChange, onConfigChange, readOnly, }) => {
+const SCHEME_PREVIEW_STEPS = 24;
+/** Sample CSS colors for scheme dropdown previews. */
+function getSchemePreviewColors(scheme, type) {
+    if (type === 'categorical') {
+        const colors = categoricalSchemeColors[scheme];
+        return colors ? [...colors] : [];
+    }
+    const interpolator = type === 'diverging'
+        ? continuousDivergingInterpolators[scheme]
+        : (continuousSequentialInterpolators[scheme] ??
+            continuousDivergingInterpolators[scheme]);
+    if (!interpolator)
+        return [];
+    return Array.from({ length: SCHEME_PREVIEW_STEPS }, (_, i) => interpolator(i / (SCHEME_PREVIEW_STEPS - 1)));
+}
+/** Edge-to-edge CSS gradient for a scheme (no fringe gaps). */
+function getSchemePreviewGradient(colors, type) {
+    if (colors.length === 0)
+        return undefined;
+    if (type === 'categorical') {
+        const stops = colors.flatMap((color, index) => {
+            const start = (index / colors.length) * 100;
+            const end = ((index + 1) / colors.length) * 100;
+            return [`${color} ${start}%`, `${color} ${end}%`];
+        });
+        return `linear-gradient(to right, ${stops.join(', ')})`;
+    }
+    return `linear-gradient(to right, ${colors.join(', ')})`;
+}
+const ColorSchemeOptionLabel = ({ scheme, type }) => {
+    const colors = getSchemePreviewColors(scheme, type);
+    const gradient = getSchemePreviewGradient(colors, type);
+    return (_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [gradient ? (_jsx("span", { "aria-hidden": true, className: "h-3 w-20 shrink-0 overflow-hidden rounded-sm", style: { backgroundImage: gradient } })) : null, _jsx("span", { className: "truncate", children: scheme })] }));
+};
+/** Compact color swatch; native picker is visually hidden. */
+const ColorSwatchInput = ({ value, onChange, disabled, 'aria-label': ariaLabel }) => (_jsx("label", { className: cn('border-input relative h-5 w-9 shrink-0 overflow-hidden rounded-[3px] border', 'ring-offset-background focus-within:ring-ring focus-within:ring-1 focus-within:ring-offset-1', disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'), style: { backgroundColor: value }, children: _jsx("input", { type: "color", "aria-label": ariaLabel, value: value, disabled: disabled, className: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed", onChange: (event) => onChange(event.target.value) }) }));
+function opacityPercentToAlpha(percent) {
+    return Math.round((Math.max(0, Math.min(100, percent)) / 100) * 255);
+}
+function getLayerOpacityPercent(layer) {
+    const opacity = layer?.opacity;
+    if (typeof opacity === 'number' && Number.isFinite(opacity)) {
+        return Math.round(Math.max(0, Math.min(1, opacity)) * 100);
+    }
+    return 100;
+}
+const SettingsSliderField = ({ label, children }) => (_jsx(Field, { label: label, children: _jsx("div", { className: "pt-0.5", children: children }) }));
+const AppearanceOpacitySlider = ({ valuePercent, onChange, disabled }) => (_jsx(SettingsSliderField, { label: `Opacity: ${valuePercent}%`, children: _jsx(Slider, { min: 0, max: 100, step: 1, value: [valuePercent], disabled: disabled, onValueChange: (values) => onChange(values[0] ?? valuePercent) }) }));
+const AppearanceColorChannel = ({ accessor, layer, columns, mapConfig, layerIndex, applyConfig, lastColorScaleFieldsRef, readOnly, enabled, onEnabledChange, enableLabel = 'Enabled', defaultFlatColor = DECK_MAP_DEFAULT_LAYER_COLOR, widthPixels, onWidthChange, widthLabel = 'Width', radiusValue, onRadiusChange, radiusLabel = 'Radius', radiusUnit = '', radiusMin = 0.1, radiusMax = 50, radiusStep = 0.1, extrusionDisablesStroke = false, }) => {
+    const colorScale = getDeckMapLayerColorScale(layer, accessor);
+    const flatColor = getDeckMapLayerFlatColor(layer, accessor) ?? [
+        ...defaultFlatColor,
+    ];
+    const colorScaleType = colorScale?.type ?? 'sequential';
+    const schemeOptions = getSchemeOptions(colorScaleType);
+    // Don't read lastColorScaleFieldsRef during render (react-hooks/refs).
+    const defaultField = getDefaultColorScaleField(columns, colorScaleType);
+    const showControls = enabled !== false;
+    const opacityPercent = getDeckMapLayerChannelOpacityPercent(layer, accessor, flatColor[3] ?? 255);
+    const updateColorScale = (patch) => {
+        const preferredField = patch.field ??
+            colorScale?.field ??
+            lastColorScaleFieldsRef.current[accessor];
+        const resolved = resolveColorScaleFieldAndType(columns, patch.type ?? colorScale?.type ?? 'sequential', preferredField);
+        if (!resolved)
+            return;
+        const { field, type } = resolved;
+        lastColorScaleFieldsRef.current[accessor] = field;
+        const scheme = patch.scheme ??
+            (patch.type && patch.type !== colorScale?.type
+                ? undefined
+                : type !== colorScale?.type
+                    ? undefined
+                    : colorScale?.scheme);
+        applyConfig(updateDeckMapLayer(mapConfig, layerIndex, (nextLayer) => {
+            const detached = detachDeckMapLayerOpacity(nextLayer);
+            const existingScale = getDeckMapLayerColorScale(detached, accessor);
+            const currentFlat = getDeckMapLayerFlatColor(detached, accessor) ?? flatColor;
+            return {
+                ...detached,
+                [accessor]: createDeckMapLayerColorScale({
+                    field,
+                    type,
+                    scheme,
+                    title: field,
+                    opacity: existingScale
+                        ? getDeckMapColorScaleOpacity(existingScale)
+                        : (currentFlat[3] ?? 255) / 255,
+                }),
+            };
+        }));
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [onEnabledChange ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: "flex items-center gap-1 text-xs font-medium", children: [enableLabel, extrusionDisablesStroke ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "inline-flex", "aria-label": "no strokes with extrusion enabled", children: _jsx(AlertTriangleIcon, { className: "h-3.5 w-3.5 text-amber-500" }) }) }), _jsx(TooltipContent, { children: "no strokes with extrusion enabled" })] })) : null] }), _jsx(Switch, { checked: enabled !== false, onCheckedChange: onEnabledChange, "aria-label": enableLabel })] })) : null, showControls && onWidthChange && widthPixels !== undefined ? (_jsx(SettingsSliderField, { label: `${widthLabel}: ${Number(widthPixels.toFixed(1))}px`, children: _jsx(Slider, { min: 0.1, max: 20, step: 0.1, value: [widthPixels], onValueChange: (values) => onWidthChange(values[0] ?? 1) }) })) : null, showControls && onRadiusChange && radiusValue !== undefined ? (_jsx(SettingsSliderField, { label: `${radiusLabel}: ${radiusStep < 1 ? Number(radiusValue.toFixed(1)) : radiusValue}${radiusUnit}`, children: _jsx(Slider, { min: radiusMin, max: radiusMax, step: radiusStep, value: [radiusValue], onValueChange: (values) => onRadiusChange(values[0] ?? radiusValue) }) })) : null, showControls ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium", children: "Color scale" }), _jsx(Switch, { checked: Boolean(colorScale), disabled: readOnly || (!colorScale && !defaultField), "aria-label": "Color scale", onCheckedChange: (checked) => {
+                                    if (checked) {
+                                        updateColorScale({});
+                                        return;
+                                    }
+                                    if (colorScale?.field) {
+                                        lastColorScaleFieldsRef.current[accessor] = colorScale.field;
+                                    }
+                                    applyConfig(clearDeckMapLayerColorScale(mapConfig, layerIndex, accessor));
+                                } })] }), !colorScale ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium", children: "Color" }), _jsx(ColorSwatchInput, { "aria-label": "Color", value: deckMapRgbaToHex(flatColor), disabled: readOnly, onChange: (hex) => {
+                                    const next = parseColorString(hex, flatColor[3] ?? 255);
+                                    applyConfig(setDeckMapLayerFlatColor(mapConfig, layerIndex, accessor, next));
+                                } })] })) : null, colorScale ? (_jsxs("div", { className: "flex flex-col gap-2", children: [columns.length > 0 ? (_jsx(ColumnsProvider, { columns: columns, children: _jsx(Field, { label: "Field", required: true, children: _jsx(ColumnSelector.Colorable, { value: colorScale.field, onChange: (field) => updateColorScale({ field }), disabled: readOnly }) }) })) : null, _jsx(Field, { label: "Type", children: _jsxs(Select, { value: colorScaleType, onValueChange: (value) => updateColorScale({ type: value }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: DECK_MAP_COLOR_SCALE_TYPE_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }) }), _jsx(Field, { label: "Scheme", children: _jsxs(Select, { value: colorScale.scheme, onValueChange: (value) => updateColorScale({ scheme: value }), children: [_jsx(SelectTrigger, { className: "w-full [&>span]:line-clamp-none", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: schemeOptions.map((scheme) => (_jsx(SelectItem, { value: scheme, children: _jsx(ColorSchemeOptionLabel, { scheme: scheme, type: colorScaleType }) }, scheme))) })] }) })] })) : null, _jsx(AppearanceOpacitySlider, { valuePercent: opacityPercent, disabled: readOnly, onChange: (percent) => {
+                            applyConfig(updateDeckMapLayer(mapConfig, layerIndex, (nextLayer) => {
+                                const detached = detachDeckMapLayerOpacity(nextLayer);
+                                if (colorScale) {
+                                    const scale = getDeckMapLayerColorScale(detached, accessor) ??
+                                        colorScale;
+                                    return {
+                                        ...detached,
+                                        [accessor]: {
+                                            ...scale,
+                                            opacity: percent / 100,
+                                        },
+                                    };
+                                }
+                                const current = getDeckMapLayerFlatColor(detached, accessor) ?? flatColor;
+                                return {
+                                    ...detached,
+                                    [accessor]: [
+                                        current[0],
+                                        current[1],
+                                        current[2],
+                                        opacityPercentToAlpha(percent),
+                                    ],
+                                };
+                            }));
+                        } })] })) : null] }));
+};
+/** Arc source/target colors; optional shared color scale. */
+const AppearanceArcColorPanel = ({ layer, columns, mapConfig, layerIndex, applyConfig, lastColorScaleFieldsRef, readOnly, }) => {
+    const sourceScale = getDeckMapLayerColorScale(layer, 'getSourceColor');
+    const targetScale = getDeckMapLayerColorScale(layer, 'getTargetColor');
+    const colorScale = sourceScale ?? targetScale;
+    const colorScaleType = colorScale?.type ?? 'sequential';
+    const schemeOptions = getSchemeOptions(colorScaleType);
+    // Don't read lastColorScaleFieldsRef during render (react-hooks/refs).
+    const defaultField = getDefaultColorScaleField(columns, colorScaleType);
+    const sourceFlat = getDeckMapLayerFlatColor(layer, 'getSourceColor') ?? [
+        ...DECK_MAP_DEFAULT_LAYER_COLOR,
+    ];
+    const targetFlat = getDeckMapLayerFlatColor(layer, 'getTargetColor') ?? [
+        ...DECK_MAP_DEFAULT_LAYER_COLOR,
+    ];
+    const opacityPercent = Math.round((getDeckMapLayerChannelOpacityPercent(layer, 'getSourceColor', sourceFlat[3] ?? 255) +
+        getDeckMapLayerChannelOpacityPercent(layer, 'getTargetColor', targetFlat[3] ?? 255)) /
+        2);
+    const applySharedColorScale = (patch) => {
+        const preferredField = patch.field ??
+            colorScale?.field ??
+            lastColorScaleFieldsRef.current.getSourceColor ??
+            lastColorScaleFieldsRef.current.getTargetColor;
+        const resolved = resolveColorScaleFieldAndType(columns, patch.type ?? colorScale?.type ?? 'sequential', preferredField);
+        if (!resolved)
+            return;
+        const { field, type } = resolved;
+        lastColorScaleFieldsRef.current.getSourceColor = field;
+        lastColorScaleFieldsRef.current.getTargetColor = field;
+        const scheme = patch.scheme ??
+            (patch.type && patch.type !== colorScale?.type
+                ? undefined
+                : type !== colorScale?.type
+                    ? undefined
+                    : colorScale?.scheme);
+        applyConfig(updateDeckMapLayer(mapConfig, layerIndex, (nextLayer) => {
+            const detached = detachDeckMapLayerOpacity(nextLayer);
+            const existing = getDeckMapLayerColorScale(detached, 'getSourceColor') ??
+                getDeckMapLayerColorScale(detached, 'getTargetColor');
+            const source = getDeckMapLayerFlatColor(detached, 'getSourceColor') ?? sourceFlat;
+            const target = getDeckMapLayerFlatColor(detached, 'getTargetColor') ?? targetFlat;
+            const opacity = existing
+                ? getDeckMapColorScaleOpacity(existing)
+                : Math.round(((source[3] ?? 255) + (target[3] ?? 255)) / 2) / 255;
+            const scale = createDeckMapLayerColorScale({
+                field,
+                type,
+                scheme,
+                title: field,
+                opacity,
+            });
+            return {
+                ...detached,
+                getSourceColor: scale,
+                getTargetColor: scale,
+            };
+        }));
+    };
+    const setFlatColor = (accessor, color) => {
+        applyConfig(setDeckMapLayerFlatColor(mapConfig, layerIndex, accessor, color));
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium", children: "Color scale" }), _jsx(Switch, { checked: Boolean(colorScale), disabled: readOnly || (!colorScale && !defaultField), "aria-label": "Color scale", onCheckedChange: (checked) => {
+                            if (checked) {
+                                applySharedColorScale({});
+                                return;
+                            }
+                            if (colorScale?.field) {
+                                lastColorScaleFieldsRef.current.getSourceColor = colorScale.field;
+                                lastColorScaleFieldsRef.current.getTargetColor = colorScale.field;
+                            }
+                            applyConfig(updateDeckMapLayer(mapConfig, layerIndex, (nextLayer) => {
+                                const replacements = {};
+                                if (getDeckMapLayerColorScale(nextLayer, 'getSourceColor')) {
+                                    replacements.getSourceColor = DECK_MAP_DEFAULT_LAYER_COLOR;
+                                }
+                                if (getDeckMapLayerColorScale(nextLayer, 'getTargetColor')) {
+                                    replacements.getTargetColor = DECK_MAP_DEFAULT_LAYER_COLOR;
+                                }
+                                return replaceDeckMapLayerColorScalesWithFlat(nextLayer, replacements);
+                            }));
+                        } })] }), !colorScale ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium", children: "Source color" }), _jsx(ColorSwatchInput, { "aria-label": "Source color", value: deckMapRgbaToHex(sourceFlat), disabled: readOnly, onChange: (hex) => {
+                                    const next = parseColorString(hex, sourceFlat[3] ?? 255);
+                                    setFlatColor('getSourceColor', next);
+                                } })] }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium", children: "Target color" }), _jsx(ColorSwatchInput, { "aria-label": "Target color", value: deckMapRgbaToHex(targetFlat), disabled: readOnly, onChange: (hex) => {
+                                    const next = parseColorString(hex, targetFlat[3] ?? 255);
+                                    setFlatColor('getTargetColor', next);
+                                } })] })] })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [columns.length > 0 ? (_jsx(ColumnsProvider, { columns: columns, children: _jsx(Field, { label: "Field", required: true, children: _jsx(ColumnSelector.Colorable, { value: colorScale.field, onChange: (field) => applySharedColorScale({ field }), disabled: readOnly }) }) })) : null, _jsx(Field, { label: "Type", children: _jsxs(Select, { value: colorScaleType, onValueChange: (value) => applySharedColorScale({
+                                type: value,
+                            }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: DECK_MAP_COLOR_SCALE_TYPE_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }) }), _jsx(Field, { label: "Scheme", children: _jsxs(Select, { value: colorScale.scheme, onValueChange: (value) => applySharedColorScale({ scheme: value }), children: [_jsx(SelectTrigger, { className: "w-full [&>span]:line-clamp-none", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: schemeOptions.map((scheme) => (_jsx(SelectItem, { value: scheme, children: _jsx(ColorSchemeOptionLabel, { scheme: scheme, type: colorScaleType }) }, scheme))) })] }) })] })), _jsx(AppearanceOpacitySlider, { valuePercent: opacityPercent, disabled: readOnly, onChange: (percent) => {
+                    applyConfig(updateDeckMapLayer(mapConfig, layerIndex, (nextLayer) => {
+                        const detached = detachDeckMapLayerOpacity(nextLayer);
+                        if (colorScale) {
+                            const scale = getDeckMapLayerColorScale(detached, 'getSourceColor') ??
+                                getDeckMapLayerColorScale(detached, 'getTargetColor') ??
+                                colorScale;
+                            const nextScale = { ...scale, opacity: percent / 100 };
+                            return {
+                                ...detached,
+                                getSourceColor: nextScale,
+                                getTargetColor: nextScale,
+                            };
+                        }
+                        const alpha = opacityPercentToAlpha(percent);
+                        const source = getDeckMapLayerFlatColor(detached, 'getSourceColor') ??
+                            sourceFlat;
+                        const target = getDeckMapLayerFlatColor(detached, 'getTargetColor') ??
+                            targetFlat;
+                        return {
+                            ...detached,
+                            getSourceColor: [source[0], source[1], source[2], alpha],
+                            getTargetColor: [target[0], target[1], target[2], alpha],
+                        };
+                    }));
+                } })] }));
+};
+const AppearanceExtrusionPanel = ({ layer, columns, mapConfig, layerIndex, applyConfig, readOnly }) => {
+    const extruded = getDeckMapLayerExtruded(layer);
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium", children: "Extruded" }), _jsx(Switch, { checked: extruded, onCheckedChange: (checked) => applyConfig(updateDeckMapLayer(mapConfig, layerIndex, (nextLayer) => ({
+                            ...nextLayer,
+                            extruded: checked,
+                            getElevation: checked
+                                ? (nextLayer.getElevation ?? 1)
+                                : nextLayer.getElevation,
+                        }))) })] }), extruded && columns.length > 0 ? (_jsx(ColumnsProvider, { columns: columns, children: _jsx(Field, { label: "Elevation column", children: _jsx(ColumnSelector.Numeric, { value: (() => {
+                            const elev = layer?.getElevation;
+                            if (elev &&
+                                typeof elev === 'object' &&
+                                '@@function' in elev) {
+                                return elev.field;
+                            }
+                            if (typeof elev === 'string' && elev.startsWith('@@=')) {
+                                return elev.slice(3);
+                            }
+                            return undefined;
+                        })(), onChange: (elevationColumn) => applyConfig(updateDeckMapLayer(mapConfig, layerIndex, (nextLayer) => ({
+                            ...nextLayer,
+                            getElevation: elevationColumn
+                                ? {
+                                    '@@function': 'scale',
+                                    field: elevationColumn,
+                                    type: 'linear',
+                                    domain: 'auto',
+                                    range: [0, 200],
+                                }
+                                : undefined,
+                            elevationScale: nextLayer.elevationScale ?? 1,
+                        }))), placeholder: "Select elevation column...", disabled: readOnly }) }) })) : null, extruded ? (_jsx(SettingsSliderField, { label: `Elevation scale: ${layer?.elevationScale ?? 1}x`, children: _jsx(Slider, { min: 0.01, max: 1000, step: 0.01, value: [layer?.elevationScale ?? 1], onValueChange: (values) => {
+                        const value = values[0] ?? 1;
+                        applyConfig(updateDeckMapLayer(mapConfig, layerIndex, (nextLayer) => ({
+                            ...nextLayer,
+                            elevationScale: value,
+                        })));
+                    } }) })) : null] }));
+};
+export const DeckMapSettingsPanel = ({ title, selectedTable, config, tables, onClose, onTableChange, onTitleChange, onConfigChange, readOnly, customConfig = false, preferDatasetSource = false, }) => {
     const [layerIndex, setLayerIndex] = useState(0);
-    const [colorAccessor, setColorAccessor] = useState('getFillColor');
-    const [viewMode, setViewMode] = useState('settings');
+    const [viewMode, setViewMode] = useState(customConfig ? 'code' : 'settings');
+    // Last color-scale field per accessor (restored when re-enabling a scale).
+    const lastColorScaleFieldsRef = useRef({});
     const selectedDataTable = useMemo(() => selectedTable
         ? resolveTableReference(tables, selectedTable).table
         : undefined, [selectedTable, tables]);
@@ -66,7 +360,7 @@ export const DeckMapSettingsPanel = ({ title, selectedTable, config, tables, onC
     }, [onTableChange, readOnly]);
     const mapConfig = config;
     const serializedMapConfig = useMemo(() => JSON.stringify(config, null, 2), [config]);
-    const showCode = viewMode === 'code';
+    const showCode = customConfig || viewMode === 'code';
     const layers = getDeckMapLayerRecords(mapConfig);
     const activeLayerIndex = Math.min(layerIndex, Math.max(layers.length - 1, 0));
     const activeLayer = layers[activeLayerIndex];
@@ -74,9 +368,7 @@ export const DeckMapSettingsPanel = ({ title, selectedTable, config, tables, onC
     const activeLayerDataset = activeLayerDatasetId
         ? mapConfig.datasets?.[activeLayerDatasetId]
         : undefined;
-    // Resolve the structured source table separately from the compiled dataset
-    // output. Coordinate selectors edit the source transform, while render
-    // bindings such as geometry/color/elevation target output columns.
+    // Source table (coords/transform) vs compiled output columns (bindings).
     const activeLayerDatasetSource = activeLayerDataset?.source;
     const fallbackTableName = isDeckMapTableDatasetSource(activeLayerDatasetSource)
         ? activeLayerDatasetSource.tableName
@@ -84,7 +376,9 @@ export const DeckMapSettingsPanel = ({ title, selectedTable, config, tables, onC
     const fallbackTable = useMemo(() => fallbackTableName
         ? resolveTableReference(tables, fallbackTableName).table
         : undefined, [fallbackTableName, tables]);
-    const sourceDataTable = selectedDataTable ?? fallbackTable;
+    const sourceDataTable = preferDatasetSource
+        ? (fallbackTable ?? selectedDataTable)
+        : (selectedDataTable ?? fallbackTable);
     const sourceColumns = sourceDataTable?.columns ?? EMPTY_COLUMNS;
     const resolvedActiveLayerDatasetSource = useMemo(() => {
         if (!activeLayerDatasetSource) {
@@ -96,14 +390,14 @@ export const DeckMapSettingsPanel = ({ title, selectedTable, config, tables, onC
             return activeLayerDatasetSource;
         }
         return {
-            tableName: selectedDataTable
+            tableName: !preferDatasetSource && selectedDataTable
                 ? getTableIdentity(selectedDataTable.table)
                 : activeLayerDatasetSource.tableName,
             ...(activeLayerDatasetSource.transformSql
                 ? { transformSql: activeLayerDatasetSource.transformSql }
                 : {}),
         };
-    }, [activeLayerDatasetSource, selectedDataTable]);
+    }, [activeLayerDatasetSource, preferDatasetSource, selectedDataTable]);
     const datasetSchema = useDeckMapDatasetSchema({
         source: resolvedActiveLayerDatasetSource,
         sourceColumns,
@@ -118,181 +412,243 @@ export const DeckMapSettingsPanel = ({ title, selectedTable, config, tables, onC
     const showColumnRadiusSetting = usesColumnRadiusSetting(activeLayer?.['@@type']);
     const showTripsSettings = usesTripsSettings(activeLayer?.['@@type']);
     const showExtrusionSettings = usesExtrusionSettings(activeLayer?.['@@type']);
+    const showStrokeSetting = usesStrokeSetting(activeLayer?.['@@type']);
+    const strokeEnabled = typeof activeLayer?.stroked === 'boolean'
+        ? activeLayer.stroked
+        : getDeckMapLayerStrokeDefault(activeLayer?.['@@type'], {
+            extruded: getDeckMapLayerExtruded(activeLayer),
+        });
+    const strokeWidthPixels = activeLayer?.lineWidthUnits === 'pixels' &&
+        typeof activeLayer?.getLineWidth === 'number'
+        ? activeLayer.getLineWidth
+        : (activeLayer?.lineWidthMinPixels ?? 1);
     const colorAccessorOptions = getDeckMapColorAccessorOptions(activeLayer?.['@@type']);
-    const effectiveColorAccessor = colorAccessorOptions.find((option) => option.value === colorAccessor)
-        ?.value ?? colorAccessorOptions[0]?.value;
+    const hasFillColor = colorAccessorOptions.some((option) => option.value === 'getFillColor');
+    const hasLineColor = colorAccessorOptions.some((option) => option.value === 'getLineColor');
+    const hasPathColor = colorAccessorOptions.some((option) => option.value === 'getColor');
+    const hasSourceColor = colorAccessorOptions.some((option) => option.value === 'getSourceColor');
+    const hasTargetColor = colorAccessorOptions.some((option) => option.value === 'getTargetColor');
+    const isPathLayer = activeLayer?.['@@type'] === 'GeoArrowPathLayer';
     const isGeoJsonLayer = activeLayer?.['@@type'] === 'GeoJsonLayer';
+    // Keep unknown types visible if the layer already uses them.
+    const activeLayerType = typeof activeLayer?.['@@type'] === 'string'
+        ? activeLayer['@@type']
+        : undefined;
+    const layerTypeOptions = activeLayerType &&
+        !DECK_MAP_LAYER_TYPE_OPTIONS.some((option) => option.value === activeLayerType)
+        ? [
+            ...DECK_MAP_LAYER_TYPE_OPTIONS,
+            { value: activeLayerType, label: activeLayerType },
+        ]
+        : DECK_MAP_LAYER_TYPE_OPTIONS;
+    // GeoJsonLayer uses pointRadius* / getPointRadius; scatterplot uses radius* / getRadius.
     const pointRadiusPixels = isGeoJsonLayer
-        ? typeof activeLayer?.getPointRadius === 'number'
+        ? activeLayer?.pointRadiusUnits === 'pixels' &&
+            typeof activeLayer?.getPointRadius === 'number'
             ? activeLayer.getPointRadius
             : (activeLayer?.pointRadiusMinPixels ?? 2)
         : activeLayer?.radiusUnits === 'pixels' &&
             typeof activeLayer?.getRadius === 'number'
             ? activeLayer.getRadius
             : (activeLayer?.radiusMinPixels ?? 2);
-    const colorScale = effectiveColorAccessor
-        ? getDeckMapLayerColorScale(activeLayer, effectiveColorAccessor)
-        : undefined;
-    const colorScaleType = colorScale?.type ?? 'sequential';
-    const schemeOptions = getSchemeOptions(colorScaleType);
     const isHeatmapLayer = activeLayer?.['@@type'] === 'GeoArrowHeatmapLayer';
-    const firstColumnName = dataOutputColumns[0]?.name;
+    const showAppearanceCard = isHeatmapLayer || colorAccessorOptions.length > 0;
+    const lineWidthPixels = activeLayer?.widthUnits === 'pixels' &&
+        typeof activeLayer?.getWidth === 'number'
+        ? activeLayer.getWidth
+        : (activeLayer?.widthMinPixels ??
+            (showTripsSettings ? 3 : 1));
     const applyConfig = useCallback((nextConfig) => {
         if (readOnly)
             return;
         onConfigChange(nextConfig);
     }, [onConfigChange, readOnly]);
-    const updateColorScale = (patch) => {
-        const field = patch.field ?? colorScale?.field ?? firstColumnName;
-        if (!field || !effectiveColorAccessor)
+    // Drop point/heatmap radius leftovers on Column layers (pixels vs meters).
+    useEffect(() => {
+        if (!showColumnRadiusSetting || !activeLayer || readOnly)
             return;
-        const type = patch.type ?? colorScale?.type ?? 'sequential';
-        const scheme = patch.scheme ??
-            (patch.type && patch.type !== colorScale?.type
-                ? undefined
-                : colorScale?.scheme);
-        applyConfig(setDeckMapLayerColorScale(mapConfig, activeLayerIndex, effectiveColorAccessor, createDeckMapLayerColorScale({
-            field,
-            type,
-            scheme,
-            title: field,
+        const needsHeal = activeLayer.radiusUnits === 'pixels' ||
+            activeLayer.getRadius !== undefined ||
+            activeLayer.radiusMinPixels !== undefined ||
+            activeLayer.radiusMaxPixels !== undefined ||
+            activeLayer.radiusPixels !== undefined;
+        if (!needsHeal)
+            return;
+        const radius = typeof activeLayer.radius === 'number' &&
+            Number.isFinite(activeLayer.radius) &&
+            activeLayer.radius > 0
+            ? activeLayer.radius
+            : 50;
+        applyConfig(setDeckMapLayerColumnRadius(mapConfig, activeLayerIndex, radius));
+    }, [
+        activeLayer,
+        activeLayerIndex,
+        applyConfig,
+        mapConfig,
+        readOnly,
+        showColumnRadiusSetting,
+    ]);
+    // Fix path/arc/trips where widthMaxPixels < widthMinPixels (clamps the slider).
+    useEffect(() => {
+        const isLineWidthLayer = showTripsSettings ||
+            activeLayer?.['@@type'] === 'GeoArrowPathLayer' ||
+            showArcColumnSetting;
+        if (!isLineWidthLayer || !activeLayer || readOnly)
+            return;
+        const min = typeof activeLayer.widthMinPixels === 'number'
+            ? activeLayer.widthMinPixels
+            : undefined;
+        const max = typeof activeLayer.widthMaxPixels === 'number'
+            ? activeLayer.widthMaxPixels
+            : undefined;
+        if (min === undefined || max === undefined || max >= min)
+            return;
+        applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
+            ...layer,
+            widthMinPixels: Math.min(min, max),
+            widthMaxPixels: Math.max(min, max),
         })));
+    }, [
+        activeLayer,
+        activeLayerIndex,
+        applyConfig,
+        mapConfig,
+        readOnly,
+        showArcColumnSetting,
+        showTripsSettings,
+    ]);
+    const setStrokeWidth = (value) => {
+        applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => {
+            const nextLayer = {
+                ...layer,
+                lineWidthUnits: 'pixels',
+                lineWidthMinPixels: value,
+                lineWidthMaxPixels: value,
+            };
+            if (typeof layer.getLineWidth !== 'string') {
+                nextLayer.getLineWidth = value;
+            }
+            return nextLayer;
+        }));
+    };
+    const setLineWidth = (value) => {
+        applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => {
+            const nextLayer = {
+                ...layer,
+                widthUnits: 'pixels',
+                widthMinPixels: value,
+                widthMaxPixels: value,
+            };
+            if (typeof layer.getWidth !== 'string') {
+                nextLayer.getWidth = value;
+            }
+            return nextLayer;
+        }));
     };
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(SettingsPanelHeader, { title: "Map settings", className: "shrink-0 p-2", actions: _jsx(DeckMapCodeViewToggleButton, { label: showCode ? 'Show settings' : 'View code', selected: showCode, onClick: () => setViewMode((currentViewMode) => currentViewMode === 'code' ? 'settings' : 'code') }), onClose: onClose, closeLabel: "Close map settings" }), showCode ? (_jsx(DeckMapCodeViewerPanel, { value: serializedMapConfig, copyTooltipLabel: "Copy map config" })) : (_jsx(ScrollArea, { className: "min-h-0 flex-1 [&_[data-radix-scroll-area-viewport]>div]:!block", children: _jsxs("div", { className: "flex flex-col gap-2 p-2 pt-0", children: [_jsx(Field, { label: "Title", children: _jsx("input", { value: title, onChange: (e) => onTitleChange(e.target.value), placeholder: "Map title", disabled: readOnly, className: "border-input placeholder:text-muted-foreground focus-visible:ring-ring h-8 w-full rounded-md border bg-transparent px-3 py-2 text-xs font-medium shadow-sm outline-hidden transition-colors focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50" }) }), _jsx(Field, { label: "Dataset", required: true, children: _jsx(DataTableSelector, { onChange: handleTableChange, tables: tables, value: selectedDataTable, disabled: readOnly }) }), layers.length > 0 && (_jsxs("div", { className: "flex flex-col gap-3", children: [layers.length > 1 && (_jsx(Field, { label: "Layer", children: _jsxs(Select, { value: String(activeLayerIndex), onValueChange: (value) => setLayerIndex(Number(value)), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: layers.map((layer, index) => (_jsx(SelectItem, { value: String(index), children: String(layer.id ?? `Layer ${index + 1}`) }, index))) })] }) })), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-medium", children: "Visible" }), _jsx(Switch, { checked: activeLayer?.visible !== false, onCheckedChange: (checked) => applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
+    const setPointRadius = (value) => {
+        applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => {
+            if (layer['@@type'] === 'GeoJsonLayer') {
+                const nextLayer = {
+                    ...layer,
+                    pointRadiusUnits: 'pixels',
+                    pointRadiusMinPixels: value,
+                    pointRadiusMaxPixels: value,
+                };
+                if (typeof layer.getPointRadius !== 'string') {
+                    nextLayer.getPointRadius = value;
+                }
+                return nextLayer;
+            }
+            const nextLayer = {
+                ...layer,
+                radiusUnits: 'pixels',
+                radiusMinPixels: value,
+                radiusMaxPixels: value,
+            };
+            if (typeof layer.getRadius !== 'string') {
+                nextLayer.getRadius = value;
+            }
+            return nextLayer;
+        }));
+    };
+    const setColumnRadius = (value) => {
+        applyConfig(setDeckMapLayerColumnRadius(mapConfig, activeLayerIndex, value));
+    };
+    const fillRadiusProps = showRadiusSetting
+        ? {
+            radiusValue: pointRadiusPixels,
+            onRadiusChange: setPointRadius,
+            radiusLabel: 'Point radius',
+            radiusUnit: 'px',
+            radiusMin: 0.1,
+            radiusMax: 50,
+            radiusStep: 0.1,
+        }
+        : showColumnRadiusSetting
+            ? {
+                radiusValue: activeLayer?.radius ?? 50,
+                onRadiusChange: setColumnRadius,
+                radiusLabel: 'Column radius',
+                radiusUnit: 'm',
+                radiusMin: 1,
+                radiusMax: 10000,
+                radiusStep: 1,
+            }
+            : {};
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(SettingsPanelHeader, { title: "Map settings", className: "shrink-0 p-2", actions: customConfig ? undefined : (_jsx(DeckMapCodeViewToggleButton, { label: showCode ? 'Show settings' : 'View code', selected: showCode, onClick: () => setViewMode((currentViewMode) => currentViewMode === 'code' ? 'settings' : 'code') })), onClose: onClose, closeLabel: "Close map settings" }), _jsxs("div", { className: "flex shrink-0 flex-col gap-2 px-2 pb-2", children: [_jsx(Field, { label: "Title", children: _jsx("input", { value: title, onChange: (e) => onTitleChange(e.target.value), placeholder: "Map title", disabled: readOnly, className: "border-input placeholder:text-muted-foreground focus-visible:ring-ring h-8 w-full rounded-md border bg-transparent px-3 py-2 text-xs font-medium shadow-sm outline-hidden transition-colors focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50" }) }), _jsx(DeckMapBasemapSelect, { config: config, onConfigChange: onConfigChange, readOnly: readOnly })] }), showCode ? (_jsx(DeckMapCodeViewerPanel, { value: serializedMapConfig, copyTooltipLabel: "Copy map config" })) : (_jsx(ScrollArea, { className: "min-h-0 flex-1 [&_[data-radix-scroll-area-viewport]>div]:!block", children: _jsxs("div", { className: "flex flex-col gap-2 p-2 pt-0", children: [_jsx(Field, { label: "Dataset", required: true, children: _jsx(DataTableSelector, { onChange: handleTableChange, tables: tables, value: sourceDataTable, disabled: readOnly }) }), layers.length > 0 && (_jsxs("div", { className: "flex flex-col gap-3", children: [layers.length > 1 && (_jsx(Field, { label: "Layer", children: _jsxs(Select, { value: String(activeLayerIndex), onValueChange: (value) => setLayerIndex(Number(value)), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: layers.map((layer, index) => (_jsx(SelectItem, { value: String(index), children: String(layer.id ?? `Layer ${index + 1}`) }, index))) })] }) })), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-medium", children: "Visible" }), _jsx(Switch, { checked: activeLayer?.visible !== false, onCheckedChange: (checked) => applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
                                                 ...layer,
                                                 visible: checked,
                                             }))) })] }), _jsx(Field, { label: "Layer type", children: _jsxs(Select, { value: typeof activeLayer?.['@@type'] === 'string'
                                             ? activeLayer['@@type']
-                                            : undefined, onValueChange: (value) => applyConfig(setDeckMapLayerType(mapConfig, activeLayerIndex, value)), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: "Select layer type" }) }), _jsx(SelectContent, { children: DECK_MAP_LAYER_TYPE_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }) }), (datasetSchema.isLoading || datasetSchemaErrorMessage) && (_jsx("div", { className: "text-muted-foreground rounded-md border px-2 py-1.5 text-xs", children: datasetSchema.isLoading
+                                            : undefined, onValueChange: (value) => applyConfig(setDeckMapLayerType(mapConfig, activeLayerIndex, value)), children: [_jsx(SelectTrigger, { className: "w-full text-xs", children: _jsx(SelectValue, { placeholder: "Select layer type" }) }), _jsx(SelectContent, { children: layerTypeOptions.map((option) => (_jsx(SelectItem, { value: option.value, className: "text-xs", children: option.label }, option.value))) })] }) }), (datasetSchema.isLoading || datasetSchemaErrorMessage) && (_jsx("div", { className: "text-muted-foreground rounded-md border px-2 py-1.5 text-xs", children: datasetSchema.isLoading
                                         ? 'Inspecting dataset schema...'
-                                        : `Dataset schema unavailable: ${datasetSchemaErrorMessage}` })), showTripsSettings && (_jsxs(_Fragment, { children: [outputColumns.length > 0 && (_jsx(ColumnsProvider, { columns: outputColumns, children: _jsx(Field, { label: "Timestamp column", required: true, children: _jsx(ColumnSelector, { value: activeLayer?._sqlroomsBinding?.timestampColumn, onChange: (timestampColumn) => applyConfig(setDeckMapLayerTimestampColumn(mapConfig, activeLayerIndex, timestampColumn)), placeholder: "Select timestamp column...", disabled: readOnly }) }) })), _jsx(Field, { label: `Line width: ${activeLayer?.widthMinPixels ?? 3}px`, children: _jsx(Slider, { min: 1, max: 20, step: 1, value: [
-                                                    activeLayer?.widthMinPixels ??
-                                                        3,
-                                                ], onValueChange: (values) => {
-                                                    const value = values[0] ?? 3;
-                                                    applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
+                                        : `Dataset schema unavailable: ${datasetSchemaErrorMessage}` })), showAppearanceCard && (_jsx(Field, { label: "Appearance", children: _jsx("div", { className: "flex flex-col gap-2 rounded-md border p-2", children: isHeatmapLayer ? (_jsxs(_Fragment, { children: [_jsx(SettingsSliderField, { label: `Radius: ${activeLayer?.radiusPixels ?? 30}px`, children: _jsx(Slider, { min: 1, max: 100, step: 1, value: [
+                                                            activeLayer?.radiusPixels ?? 30,
+                                                        ], onValueChange: (values) => {
+                                                            const value = values[0] ?? 30;
+                                                            applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
+                                                                ...layer,
+                                                                radiusPixels: value,
+                                                            })));
+                                                        } }) }), _jsxs(Select, { value: detectHeatmapScheme(activeLayer?.colorRange), onValueChange: (value) => applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
                                                         ...layer,
-                                                        widthMinPixels: value,
-                                                    })));
-                                                } }) }), _jsx(Field, { label: `Trail length: ${Math.round((activeLayer?._trailLengthFactor ?? 0.4) * 100)}%`, children: _jsx(Slider, { min: 5, max: 100, step: 5, value: [
-                                                    Math.round((activeLayer?._trailLengthFactor ?? 0.4) * 100),
-                                                ], onValueChange: (values) => {
-                                                    const value = (values[0] ?? 40) / 100;
-                                                    applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
-                                                        ...layer,
-                                                        _trailLengthFactor: value,
-                                                    })));
-                                                } }) })] })), isHeatmapLayer ? (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-2", children: [_jsx("span", { className: "text-xs font-medium", children: "Color scheme (density)" }), _jsx(Field, { label: "Scheme", children: _jsxs(Select, { value: detectHeatmapScheme(activeLayer?.colorRange), onValueChange: (value) => applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
-                                                    ...layer,
-                                                    colorRange: schemeToColorRange(value),
-                                                }))), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: continuousSequentialSchemes.map((scheme) => (_jsx(SelectItem, { value: scheme, children: scheme }, scheme))) })] }) })] })) : (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium", children: "Color scale" }), _jsx(Switch, { checked: Boolean(colorScale), onCheckedChange: (checked) => {
-                                                        if (!effectiveColorAccessor)
-                                                            return;
-                                                        if (checked) {
-                                                            updateColorScale({});
-                                                            return;
-                                                        }
-                                                        applyConfig(clearDeckMapLayerColorScale(mapConfig, activeLayerIndex, effectiveColorAccessor));
-                                                    }, disabled: !firstColumnName || !effectiveColorAccessor })] }), effectiveColorAccessor && (_jsx(Field, { label: "Color property", children: _jsxs(Select, { value: effectiveColorAccessor, onValueChange: (value) => setColorAccessor(value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: colorAccessorOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }) })), colorScale && dataOutputColumns.length > 0 && (_jsx(ColumnsProvider, { columns: dataOutputColumns, children: _jsx(Field, { label: "Color field", required: true, children: colorScaleType === 'categorical' ? (_jsx(ColumnSelector.Categorical, { value: colorScale.field, onChange: (field) => updateColorScale({ field }), disabled: readOnly })) : (_jsx(ColumnSelector.Quantitative, { value: colorScale.field, onChange: (field) => updateColorScale({ field }), disabled: readOnly })) }) })), colorScale && (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Scale type", children: _jsxs(Select, { value: colorScaleType, onValueChange: (value) => updateColorScale({
-                                                            type: value,
-                                                        }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: DECK_MAP_COLOR_SCALE_TYPE_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }) }), _jsx(Field, { label: "Scheme", children: _jsxs(Select, { value: colorScale.scheme, onValueChange: (value) => updateColorScale({
-                                                            scheme: value,
-                                                        }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: schemeOptions.map((scheme) => (_jsx(SelectItem, { value: scheme, children: scheme }, scheme))) })] }) })] }))] }))] })), isHeatmapLayer && (_jsx(Field, { label: `Radius: ${activeLayer?.radiusPixels ?? 30}px`, children: _jsx("div", { className: "pt-0.5", children: _jsx(Slider, { min: 1, max: 100, step: 1, value: [
-                                        activeLayer?.radiusPixels ?? 30,
-                                    ], onValueChange: (values) => {
-                                        const value = values[0] ?? 30;
-                                        applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
-                                            ...layer,
-                                            radiusPixels: value,
-                                        })));
-                                    } }) }) })), showRadiusSetting && (_jsx(Field, { label: `Point radius: ${pointRadiusPixels}px`, children: _jsx("div", { className: "pt-0.5", children: _jsx(Slider, { min: 1, max: 50, step: 1, value: [pointRadiusPixels], onValueChange: (values) => {
-                                        const value = values[0] ?? 2;
-                                        applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => {
-                                            const nextLayer = layer['@@type'] === 'GeoJsonLayer'
-                                                ? {
-                                                    ...layer,
-                                                    pointRadiusUnits: 'pixels',
-                                                    pointRadiusMinPixels: value,
-                                                    pointRadiusMaxPixels: Math.max(value, layer.pointRadiusMaxPixels ?? value),
-                                                    getPointRadius: value,
-                                                }
-                                                : {
-                                                    ...layer,
-                                                    radiusMinPixels: value,
-                                                    radiusMaxPixels: Math.max(value, layer.radiusMaxPixels ?? value),
-                                                };
-                                            if (layer['@@type'] !== 'GeoJsonLayer' &&
-                                                layer.radiusUnits === 'pixels' &&
-                                                typeof layer.getRadius !== 'string') {
-                                                nextLayer.getRadius = value;
-                                            }
-                                            return nextLayer;
-                                        }));
-                                    } }) }) })), showColumnRadiusSetting && (_jsx(Field, { label: `Column radius: ${activeLayer?.radius ?? 50}m`, children: _jsx("div", { className: "pt-0.5", children: _jsx(Slider, { min: 1, max: 10000, step: 1, value: [activeLayer?.radius ?? 50], onValueChange: (values) => {
-                                        const value = values[0] ?? 50;
-                                        applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
-                                            ...layer,
-                                            radius: value,
-                                        })));
-                                    } }) }) })), outputColumns.length > 0 && showGeometryColumnSetting && (_jsx(ColumnsProvider, { columns: outputColumns, children: _jsx(Field, { label: "Geometry column", required: true, children: _jsx(ColumnSelector, { value: activeLayerDataset?.geometryColumn, onChange: (geometryColumn) => applyConfig(setDeckMapLayerGeometryColumn(mapConfig, activeLayerIndex, geometryColumn)), placeholder: "Select geometry column...", disabled: readOnly }) }) })), outputColumns.length > 0 && showH3ColumnSetting && (_jsx(ColumnsProvider, { columns: outputColumns, children: _jsx(Field, { label: "H3 column", required: true, children: _jsx(ColumnSelector, { value: activeLayer?._sqlroomsBinding
-                                        ?.hexagonColumn, onChange: (hexagonColumn) => applyConfig(setDeckMapLayerHexagonColumn(mapConfig, activeLayerIndex, hexagonColumn)), placeholder: "Select H3 index column...", disabled: readOnly }) }) })), outputColumns.length > 0 && showArcColumnSetting && (_jsxs(ColumnsProvider, { columns: outputColumns, children: [_jsx(Field, { label: "Source geometry", required: true, children: _jsx(ColumnSelector, { value: activeLayer?._sqlroomsBinding
-                                            ?.sourceGeometryColumn, onChange: (sourceGeometryColumn) => applyConfig(setDeckMapLayerArcColumns(mapConfig, activeLayerIndex, {
-                                            sourceGeometryColumn,
-                                        })), placeholder: "Select source geometry...", disabled: readOnly }) }), _jsx(Field, { label: "Target geometry", required: true, children: _jsx(ColumnSelector, { value: activeLayer?._sqlroomsBinding
-                                            ?.targetGeometryColumn, onChange: (targetGeometryColumn) => applyConfig(setDeckMapLayerArcColumns(mapConfig, activeLayerIndex, {
-                                            targetGeometryColumn,
-                                        })), placeholder: "Select target geometry...", disabled: readOnly }) })] })), showArcColumnSetting && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-medium", children: "Flat lines" }), _jsx(Switch, { checked: activeLayer?.getHeight === 0, onCheckedChange: (checked) => applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
-                                        ...layer,
-                                        getHeight: checked ? 0 : undefined,
-                                    }))) })] })), showArcColumnSetting && (_jsx(Field, { label: `Line width: ${activeLayer?.widthMinPixels ?? 1}px`, children: _jsx(Slider, { min: 1, max: 20, step: 1, value: [
-                                    activeLayer?.widthMinPixels ?? 1,
-                                ], onValueChange: (values) => {
-                                    const value = values[0] ?? 1;
-                                    applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
-                                        ...layer,
-                                        widthMinPixels: value,
-                                    })));
-                                } }) })), showExtrusionSettings && (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium", children: "Extrusion" }), _jsx(Switch, { checked: Boolean(activeLayer?.extruded), onCheckedChange: (checked) => applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
-                                                ...layer,
-                                                extruded: checked,
-                                                getElevation: checked
-                                                    ? (layer.getElevation ?? 1)
-                                                    : layer.getElevation,
-                                            }))) })] }), Boolean(activeLayer?.extruded) &&
-                                    dataOutputColumns.length > 0 && (_jsx(ColumnsProvider, { columns: dataOutputColumns, children: _jsx(Field, { label: "Elevation column", children: _jsx(ColumnSelector.Numeric, { value: (() => {
-                                                const elev = activeLayer?.getElevation;
-                                                if (elev &&
-                                                    typeof elev === 'object' &&
-                                                    '@@function' in elev) {
-                                                    return elev.field;
-                                                }
-                                                if (typeof elev === 'string' &&
-                                                    elev.startsWith('@@=')) {
-                                                    return elev.slice(3);
-                                                }
-                                                return undefined;
-                                            })(), onChange: (elevationColumn) => applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
-                                                ...layer,
-                                                getElevation: elevationColumn
-                                                    ? {
-                                                        '@@function': 'scale',
-                                                        field: elevationColumn,
-                                                        type: 'linear',
-                                                        domain: 'auto',
-                                                        range: [0, 200],
-                                                    }
-                                                    : undefined,
-                                                elevationScale: layer.elevationScale ?? 1,
-                                            }))), placeholder: "Select elevation column...", disabled: readOnly }) }) })), Boolean(activeLayer?.extruded) && (_jsx(Field, { label: `Elevation scale: ${activeLayer?.elevationScale ?? 1}x`, children: _jsx("div", { className: "pt-1.5", children: _jsx(Slider, { min: 0.01, max: 100, step: 0.01, value: [
-                                                activeLayer?.elevationScale ??
-                                                    1,
-                                            ], onValueChange: (values) => {
-                                                const value = values[0] ?? 1;
-                                                applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
-                                                    ...layer,
-                                                    elevationScale: value,
-                                                })));
-                                            } }) }) }))] })), sourceDataTable &&
+                                                        colorRange: heatmapSchemeToColorRange(value),
+                                                    }))), children: [_jsx(SelectTrigger, { className: "w-full [&>span]:line-clamp-none", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: continuousSequentialSchemes.map((scheme) => (_jsx(SelectItem, { value: scheme, children: _jsx(ColorSchemeOptionLabel, { scheme: scheme, type: "sequential" }) }, scheme))) })] }), _jsx(AppearanceOpacitySlider, { valuePercent: getLayerOpacityPercent(activeLayer), disabled: readOnly, onChange: (percent) => {
+                                                        applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
+                                                            ...layer,
+                                                            opacity: percent / 100,
+                                                        })));
+                                                    } })] })) : (_jsxs(_Fragment, { children: [(showTripsSettings ||
+                                                    isPathLayer ||
+                                                    showArcColumnSetting) && (_jsx(SettingsSliderField, { label: `${showTripsSettings ? 'Trip width' : 'Line width'}: ${lineWidthPixels}px`, children: _jsx(Slider, { min: 1, max: 20, step: 1, value: [lineWidthPixels], onValueChange: (values) => setLineWidth(values[0] ?? lineWidthPixels) }) })), showArcColumnSetting ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium", children: "Flat lines" }), _jsx(Switch, { checked: activeLayer?.getHeight === 0, onCheckedChange: (checked) => applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
+                                                                ...layer,
+                                                                getHeight: checked ? 0 : undefined,
+                                                            }))) })] })) : null, showTripsSettings ? (_jsx(SettingsSliderField, { label: `Trail length: ${Math.round((activeLayer?._trailLengthFactor ?? 0.4) * 100)}%`, children: _jsx(Slider, { min: 5, max: 100, step: 5, value: [
+                                                            Math.round((activeLayer?._trailLengthFactor ?? 0.4) * 100),
+                                                        ], onValueChange: (values) => {
+                                                            const value = (values[0] ?? 40) / 100;
+                                                            applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => ({
+                                                                ...layer,
+                                                                _trailLengthFactor: value,
+                                                            })));
+                                                        } }) })) : null, hasFillColor && hasLineColor && showStrokeSetting ? (_jsxs(Tabs, { defaultValue: "fill", className: "w-full", children: [_jsxs(TabsList, { className: `grid h-8 w-full ${showExtrusionSettings ? 'grid-cols-3' : 'grid-cols-2'}`, children: [_jsx(TabsTrigger, { value: "fill", className: "text-xs", children: "Fill" }), _jsx(TabsTrigger, { value: "stroke", className: "text-xs", children: "Stroke" }), showExtrusionSettings ? (_jsx(TabsTrigger, { value: "extrusion", className: "text-xs", children: "Extrusion" })) : null] }), _jsx(TabsContent, { value: "fill", className: "mt-2", children: _jsx(AppearanceColorChannel, { accessor: "getFillColor", layer: activeLayer, columns: dataOutputColumns, mapConfig: mapConfig, layerIndex: activeLayerIndex, applyConfig: applyConfig, lastColorScaleFieldsRef: lastColorScaleFieldsRef, readOnly: readOnly, ...fillRadiusProps }) }), _jsx(TabsContent, { value: "stroke", className: "mt-2", children: _jsx(AppearanceColorChannel, { accessor: "getLineColor", layer: activeLayer, columns: dataOutputColumns, mapConfig: mapConfig, layerIndex: activeLayerIndex, applyConfig: applyConfig, lastColorScaleFieldsRef: lastColorScaleFieldsRef, readOnly: readOnly, enabled: strokeEnabled, onEnabledChange: (checked) => applyConfig(updateDeckMapLayer(mapConfig, activeLayerIndex, (layer) => {
+                                                                    if (checked) {
+                                                                        return { ...layer, stroked: true };
+                                                                    }
+                                                                    // Clear stroke color scale when stroke is off.
+                                                                    const next = {
+                                                                        ...layer,
+                                                                        stroked: false,
+                                                                    };
+                                                                    if (getDeckMapLayerColorScale(next, 'getLineColor')) {
+                                                                        return replaceDeckMapLayerColorScaleWithFlat(next, 'getLineColor', DECK_MAP_DEFAULT_STROKE_COLOR);
+                                                                    }
+                                                                    return next;
+                                                                })), enableLabel: "Stroke", defaultFlatColor: DECK_MAP_DEFAULT_STROKE_COLOR, widthPixels: strokeWidthPixels, onWidthChange: setStrokeWidth, widthLabel: "Stroke width", extrusionDisablesStroke: usesStrokeExtrusionWarning(activeLayer?.['@@type']) && getDeckMapLayerExtruded(activeLayer) }) }), showExtrusionSettings ? (_jsx(TabsContent, { value: "extrusion", className: "mt-2", children: _jsx(AppearanceExtrusionPanel, { layer: activeLayer, columns: dataOutputColumns, mapConfig: mapConfig, layerIndex: activeLayerIndex, applyConfig: applyConfig, readOnly: readOnly }) })) : null] }, `appearance-fill-stroke${showExtrusionSettings ? '-extrusion' : ''}`)) : hasFillColor && showExtrusionSettings ? (_jsxs(Tabs, { defaultValue: "fill", className: "w-full", children: [_jsxs(TabsList, { className: "grid h-8 w-full grid-cols-2", children: [_jsx(TabsTrigger, { value: "fill", className: "text-xs", children: "Fill" }), _jsx(TabsTrigger, { value: "extrusion", className: "text-xs", children: "Extrusion" })] }), _jsx(TabsContent, { value: "fill", className: "mt-2", children: _jsx(AppearanceColorChannel, { accessor: "getFillColor", layer: activeLayer, columns: dataOutputColumns, mapConfig: mapConfig, layerIndex: activeLayerIndex, applyConfig: applyConfig, lastColorScaleFieldsRef: lastColorScaleFieldsRef, readOnly: readOnly, ...fillRadiusProps }) }), _jsx(TabsContent, { value: "extrusion", className: "mt-2", children: _jsx(AppearanceExtrusionPanel, { layer: activeLayer, columns: dataOutputColumns, mapConfig: mapConfig, layerIndex: activeLayerIndex, applyConfig: applyConfig, readOnly: readOnly }) })] }, "appearance-fill-extrusion")) : hasFillColor ? (_jsx(AppearanceColorChannel, { accessor: "getFillColor", layer: activeLayer, columns: dataOutputColumns, mapConfig: mapConfig, layerIndex: activeLayerIndex, applyConfig: applyConfig, lastColorScaleFieldsRef: lastColorScaleFieldsRef, readOnly: readOnly, ...fillRadiusProps })) : null, hasSourceColor && hasTargetColor ? (_jsx(AppearanceArcColorPanel, { layer: activeLayer, columns: dataOutputColumns, mapConfig: mapConfig, layerIndex: activeLayerIndex, applyConfig: applyConfig, lastColorScaleFieldsRef: lastColorScaleFieldsRef, readOnly: readOnly })) : null, hasPathColor ? (_jsx(AppearanceColorChannel, { accessor: "getColor", layer: activeLayer, columns: dataOutputColumns, mapConfig: mapConfig, layerIndex: activeLayerIndex, applyConfig: applyConfig, lastColorScaleFieldsRef: lastColorScaleFieldsRef, readOnly: readOnly })) : null] })) }) })), outputColumns.length > 0 && showGeometryColumnSetting && (_jsx(ColumnsProvider, { columns: outputColumns, children: _jsx(Field, { label: "Geometry column", required: true, children: _jsx(ColumnSelector, { value: activeLayerDataset?.geometryColumn, onChange: (geometryColumn) => applyConfig(setDeckMapLayerGeometryColumn(mapConfig, activeLayerIndex, geometryColumn)), placeholder: "Select geometry column...", disabled: readOnly }) }) })), outputColumns.length > 0 && showTripsSettings && (_jsx(ColumnsProvider, { columns: outputColumns, children: _jsx(Field, { label: "Timestamp column", required: true, children: _jsx(ColumnSelector, { value: activeLayer?._sqlroomsBinding?.timestampColumn, onChange: (timestampColumn) => applyConfig(setDeckMapLayerTimestampColumn(mapConfig, activeLayerIndex, timestampColumn)), placeholder: "Select timestamp column...", disabled: readOnly }) }) })), outputColumns.length > 0 && showH3ColumnSetting && (_jsx(ColumnsProvider, { columns: outputColumns, children: _jsx(Field, { label: "H3 column", required: true, children: _jsx(ColumnSelector, { value: activeLayer?._sqlroomsBinding?.hexagonColumn, onChange: (hexagonColumn) => applyConfig(setDeckMapLayerHexagonColumn(mapConfig, activeLayerIndex, hexagonColumn)), placeholder: "Select H3 index column...", disabled: readOnly }) }) })), outputColumns.length > 0 && showArcColumnSetting && (_jsxs(ColumnsProvider, { columns: outputColumns, children: [_jsx(Field, { label: "Source geometry", required: true, children: _jsx(ColumnSelector, { value: activeLayer?._sqlroomsBinding?.sourceGeometryColumn, onChange: (sourceGeometryColumn) => applyConfig(setDeckMapLayerArcColumns(mapConfig, activeLayerIndex, {
+                                                    sourceGeometryColumn,
+                                                })), placeholder: "Select source geometry...", disabled: readOnly }) }), _jsx(Field, { label: "Target geometry", required: true, children: _jsx(ColumnSelector, { value: activeLayer?._sqlroomsBinding?.targetGeometryColumn, onChange: (targetGeometryColumn) => applyConfig(setDeckMapLayerArcColumns(mapConfig, activeLayerIndex, {
+                                                    targetGeometryColumn,
+                                                })), placeholder: "Select target geometry...", disabled: readOnly }) })] }))] })), sourceDataTable &&
                             !showGeometryColumnSetting &&
                             !showH3ColumnSetting &&
                             !showArcColumnSetting && (_jsxs(ColumnsProvider, { columns: sourceColumns, children: [_jsx(Field, { label: "Latitude column", required: true, children: _jsx(ColumnSelector.Numeric, { value: mapConfig.fitToData?.latitudeColumn, onChange: (latitudeColumn) => {