@adaptabletools/adaptable 23.0.4 → 23.0.5-canary.1

package/src/View/StyledColumn/Wizard/StyledColumnWizardBulletSection.js

@@ -127,7 +127,6 @@ export const getStyledColumnBulletStyleViewValues = (data) => {
         includeEmptyTooltip: false,
     });
 };
-/** Wizard / list-view summary for the Ranges step (qualitative bands). */
 export const renderStyledColumnBulletRangesSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
@@ -137,7 +136,6 @@ export const renderStyledColumnBulletRangesSummary = (data) => {
     return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), _jsx(BulletRangesSummaryPreview, { bulletStyle: bullet })] }));
 };
 export const StyledColumnBulletRangesView = ({ data }) => renderStyledColumnBulletRangesSummary(data);
-/** Wizard / list-view summary for the Style step (target, bar, text, font). */
 export const renderStyledColumnBulletStyleSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
@@ -152,7 +150,6 @@ export const renderStyledColumnBulletStyleSummary = (data) => {
     }
     return renderSummaryStringTags(items);
 };
-/** Full combined summary (ranges + style); kept for callers that expect one block. */
 export const renderStyledColumnBulletSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
@@ -160,12 +157,6 @@ export const renderStyledColumnBulletSummary = (data) => {
     }
     return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:items-start", children: [renderStyledColumnBulletRangesSummary(data), renderStyledColumnBulletStyleSummary(data)] }));
 };
-/**
- * Maps the structured `BulletChartStyle.Target` field to one of the simple
- * modes the wizard exposes. The wizard only configures *one* primary target;
- * if a state-defined Bullet Chart used the array form or a per-target marker
- * override, we leave it alone but treat the first entry as the editable one.
- */
 const getSimpleTargetMode = (target) => {
     if (target == undefined) {
         return 'None';
@@ -217,9 +208,6 @@ export const StyledColumnWizardBulletSection = (props) => {
     const scope = { ColumnIds: [data.ColumnId] };
     const bullet = data.BulletChartStyle ?? {};
     const disabled = !data.ColumnId || !column;
-    // -------------------------------------------------------------------------
-    // Updaters
-    // -------------------------------------------------------------------------
     const update = (patch) => {
         props.onChange({
             ...data,
@@ -233,10 +221,6 @@ export const StyledColumnWizardBulletSection = (props) => {
         update({ CellRanges: ranges });
     };
     const onUpdateColumnComparison = (columnComparison) => {
-        // Bullet Chart can technically still accept a ColumnComparison through
-        // state, but the Bullet wizard hides the toggle. This callback is wired
-        // up only to satisfy the RangesComponent prop contract; in practice it
-        // will never be invoked because hideColumnComparison is true.
         update({ ColumnComparison: columnComparison });
     };
     const onRangeValueTypeChange = React.useCallback((rangeValueType) => {
@@ -258,14 +242,12 @@ export const StyledColumnWizardBulletSection = (props) => {
             },
         });
     }, [data, bullet]);
-    // -- Target ----------------------------------------------------------------
     const currentMode = getSimpleTargetMode(bullet.TargetProperties?.Target);
     const updateTargetProperties = (patch) => {
         const merged = {
             ...bullet.TargetProperties,
             ...patch,
         };
-        // Strip the wrapper when nothing meaningful is left.
         const isEmpty = merged.Target == undefined && merged.Marker == undefined;
         update({ TargetProperties: isEmpty ? undefined : merged });
     };
@@ -284,7 +266,6 @@ export const StyledColumnWizardBulletSection = (props) => {
             return;
         }
         if (mode === 'Column') {
-            // Use the first available numeric column (excluding the styled column itself)
             const candidate = api.columnApi.getNumericColumns().find((c) => c.columnId !== data.ColumnId);
             setTarget(candidate?.columnId ?? '');
             return;
@@ -296,7 +277,6 @@ export const StyledColumnWizardBulletSection = (props) => {
     const handleColumnTargetChange = (columnId) => {
         setTarget(columnId);
     };
-    // -- Bar -------------------------------------------------------------------
     const updateBar = (patch) => {
         const merged = {
             ...bullet.Bar,
@@ -305,7 +285,6 @@ export const StyledColumnWizardBulletSection = (props) => {
         const isEmpty = merged.Color == undefined && merged.Height == undefined;
         update({ Bar: isEmpty ? undefined : merged });
     };
-    // -- Marker ----------------------------------------------------------------
     const updateMarker = (patch) => {
         updateTargetProperties({
             Marker: {
@@ -315,7 +294,6 @@ export const StyledColumnWizardBulletSection = (props) => {
             },
         });
     };
-    // -- Cell text -------------------------------------------------------------
     const toggleCellText = (token, show) => {
         update(toggleBarStyleCellTextToken(bullet.CellTextProperties, token, show));
     };
@@ -331,15 +309,11 @@ export const StyledColumnWizardBulletSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    // -------------------------------------------------------------------------
-    // Render
-    // -------------------------------------------------------------------------
     if (!data.ColumnId || !column) {
         return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: !data.ColumnId
                     ? 'You need to select a column before styling.'
                     : `Column "${data.ColumnId}" was not found in the grid.` }) }));
     }
-    // ----- Ranges-only variant (wizard step before Style) ---------------------
     if (variant === 'ranges') {
         return (_jsx(Box, { children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Ranges" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define qualitative bands for the bullet scale" })] }), _jsx(Card.Body, { children: _jsx(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: bullet.CellRanges, rangeValueType: bullet.RangeValueType, onRangeValueTypeChange: onRangeValueTypeChange, columnComparison: bullet.ColumnComparison, updateRanges: onUpdateRanges, updateColumnComparison: onUpdateColumnComparison, hideColumnComparison: true }) })] }) }));
     }

package/src/View/StyledColumn/Wizard/StyledColumnWizardGradientSection.js

@@ -42,9 +42,6 @@ export const getStyledColumnGradientStyleViewValues = (data) => {
     }
     return buildStyledColumnGradientStyleSummaryStrings(gs, { includeEmptyTooltip: false });
 };
-/**
- * Summary of Gradient-only style options (alpha bounds, auto-contrast, tooltip).
- */
 export const renderStyledColumnGradientStyleSummary = (data) => {
     const gs = data.GradientStyle;
     if (!gs) {

package/src/View/StyledColumn/Wizard/StyledColumnWizardIconSection.js

@@ -39,9 +39,6 @@ const previewIcon = (spec) => {
     }
     return _jsx(AdaptableIconComponent, { icon: spec });
 };
-// ---------------------------------------------------------------------------
-// Summary helpers (used by the wizard step header + Styled Columns list)
-// ---------------------------------------------------------------------------
 const ICON_MAPPINGS_PREVIEW_CHIP_LIMIT = 6;
 const previewMapping = (mapping, index) => {
     return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:px-1.5 twa:py-0.5 twa:rounded twa:bg-[var(--ab-color-primary)] twa:text-[var(--ab-color-primarytext)]", children: [_jsx(Box, { children: previewIcon(mapping.Icon) }), _jsx(Box, { className: "twa:text-xs twa:opacity-90", children: String(mapping.Key) })] }, `${String(mapping.Key)}-${index}`));
@@ -123,7 +120,6 @@ export const getStyledColumnIconStyleViewValues = (data) => {
         includeEmptyTooltip: false,
     });
 };
-/** Mappings step summary. */
 export const renderStyledColumnIconMappingsSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
@@ -134,7 +130,6 @@ export const renderStyledColumnIconMappingsSummary = (data) => {
     return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), renderMappingsPreview(previewMappings)] }));
 };
 export const StyledColumnIconMappingsView = ({ data }) => renderStyledColumnIconMappingsSummary(data);
-/** Style step summary (size, text, tooltip, font / cell). */
 export const renderStyledColumnIconStyleSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
@@ -149,9 +144,6 @@ export const renderStyledColumnIconStyleSummary = (data) => {
     }
     return renderSummaryStringTags(items);
 };
-/**
- * Combined summary for the Styled Columns list row (preview + key facts).
- */
 export const renderStyledColumnIconSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
@@ -159,9 +151,6 @@ export const renderStyledColumnIconSummary = (data) => {
     }
     return renderStyledColumnIconMappingsSummary(data);
 };
-// ---------------------------------------------------------------------------
-// Wizard validity check
-// ---------------------------------------------------------------------------
 export const isValidIconStyleMappings = (data) => {
     const ic = data.IconStyle;
     if (!ic)
@@ -206,18 +195,9 @@ export const StyledColumnWizardIconSection = (props) => {
             props.onChange({ ...data, IconStyle: rest });
         }
     };
-    // -----------------------------------------------------------------------
-    // Preset operations
-    // -----------------------------------------------------------------------
     const applyPreset = (preset) => {
-        // Presets are now resolved at *runtime* — we only need to record the
-        // selection here. Custom `Mappings` continue to act as overrides /
-        // additions on top of the preset.
         update({
             Preset: preset,
-            // Flags / Status presets pair best with case-insensitive matching
-            // because they include both code (`'GBP'`) and name (`'United Kingdom'`)
-            // synonyms; user can flip back to Exact in the wizard if needed.
             MatchMode: preset === 'Flags' || preset === 'Status'
                 ? 'CaseInsensitive'
                 : iconStyle.MatchMode ?? 'Exact',
@@ -226,9 +206,6 @@ export const StyledColumnWizardIconSection = (props) => {
     const clearPreset = () => {
         update({ Preset: undefined });
     };
-    // -----------------------------------------------------------------------
-    // Mapping list operations
-    // -----------------------------------------------------------------------
     const setMappings = (next) => {
         update({ Mappings: next });
     };
@@ -251,16 +228,11 @@ export const StyledColumnWizardIconSection = (props) => {
         setMappings(next);
         setAutoOpenPickerIndex(next.length - 1);
     };
-    // -----------------------------------------------------------------------
-    // CellText helpers
-    // -----------------------------------------------------------------------
     const updateCellTextProperties = (patch) => {
         const merged = {
             ...iconStyle.CellTextProperties,
             ...patch,
         };
-        // Strip the wrapper when both inner properties are unset, so empty state
-        // serialises cleanly.
         const isEmpty = !merged.CellText?.length && merged.CellTextPosition == undefined;
         update({ CellTextProperties: isEmpty ? undefined : merged });
     };
@@ -271,16 +243,11 @@ export const StyledColumnWizardIconSection = (props) => {
             : current.filter((t) => t !== token);
         updateCellTextProperties({ CellText: next });
     };
-    // -----------------------------------------------------------------------
-    // Fallback helpers
-    // -----------------------------------------------------------------------
     const updateFallbackProperties = (patch) => {
         const merged = {
             ...iconStyle.FallbackProperties,
             ...patch,
         };
-        // Strip the wrapper when there's nothing to remember; the renderer
-        // already defaults to `Mode: 'Hide'` when `FallbackProperties` is unset.
         const isEmpty = (merged.Mode == undefined || merged.Mode === 'Hide') && merged.Icon == undefined;
         update({ FallbackProperties: isEmpty ? undefined : merged });
     };
@@ -291,9 +258,6 @@ export const StyledColumnWizardIconSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    // -----------------------------------------------------------------------
-    // Render
-    // -----------------------------------------------------------------------
     if (props.variant === 'mappings') {
         const presetMappingsPreview = iconStyle.Preset
             ? getIconStylePresetMappings(iconStyle.Preset)
@@ -317,7 +281,6 @@ export const StyledColumnWizardIconSection = (props) => {
                                                     { value: 'Icon', label: 'Show Fallback Icon' },
                                                 ] }) }) }), iconStyle.FallbackProperties?.Mode === 'Icon' && (_jsx(FormRow, { label: "Fallback Icon:", children: _jsx(IconPickerButton, { value: iconStyle.FallbackProperties?.Icon, onChange: (next) => updateFallbackProperties({ Icon: next }) }) }))] }) })] })] }));
     }
-    // ----- Style variant (wizard step title: "Style") ------------------------
     const cellText = iconStyle.CellTextProperties?.CellText ?? [];
     const toolTipText = iconStyle.ToolTipText ?? [];
     const cellTextDisabled = cellText.length === 0;
@@ -340,9 +303,6 @@ export const StyledColumnWizardIconSection = (props) => {
                                                     { value: 'Below', label: 'Below' },
                                                 ] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
 };
-// ---------------------------------------------------------------------------
-// Icon picker — click-to-open popover (closes on outside click or system pick)
-// ---------------------------------------------------------------------------
 const ICON_KIND_OPTIONS = [
     { value: 'Emoji', label: 'Emoji' },
     { value: 'System', label: 'Built-in' },

package/src/View/StyledColumn/Wizard/StyledColumnWizardRangeBarSection.js

@@ -47,20 +47,6 @@ const summarizeBound = (bound) => {
     }
     return bound;
 };
-/**
- * A single joined bound control: a type selector (Fixed Number / Column /
- * Column Min / Max / Average / Median, plus `None` for the optional Reference)
- * joined inline with a contextual editor. Mirrors the Column Comparison bound
- * input so the two read as one block: the select hard-codes `rounded-input`, so
- * the touching corners are flattened directly (important, to beat it) and the
- * shared border overlapped via `-ml-px`.
- *
- *  - Fixed Number  → editable number input
- *  - Column        → numeric column selector (excluding the styled column)
- *  - Col-* (aggregate) → disabled input showing the resolved value (when a
- *    column is in scope), so the user sees the underlying number
- *  - None          → no editor (selector only)
- */
 const RangeBarBoundInput = ({ api, value, optional, fallbackNumber, excludeColumnId, resolved, disabled, onChange }) => {
     const mode = getBoundMode(value);
     const handleModeChange = (next) => {
@@ -76,7 +62,6 @@ const RangeBarBoundInput = ({ api, value, optional, fallbackNumber, excludeColum
                 .find((c) => c.columnId !== excludeColumnId);
             return onChange(candidate?.columnId ?? '');
         }
-        // Col-Min / Col-Max / Col-Avg / Col-Median
         return onChange(next);
     };
     const items = [
@@ -201,7 +186,6 @@ export const getStyledColumnRangeBarDisplayViewValues = (data) => {
         includeEmptyTooltip: false,
     });
 };
-/** Summary line for the Range wizard step (bounds + bands only). */
 export const renderStyledColumnRangeBarRangeStepSummary = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
@@ -211,7 +195,6 @@ export const renderStyledColumnRangeBarRangeStepSummary = (data) => {
     return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), _jsx(RangeBarRangesSummaryPreview, { rangeStyle: range })] }));
 };
 export const StyledColumnRangeBarRangeView = ({ data }) => renderStyledColumnRangeBarRangeStepSummary(data);
-/** Summary for the Display wizard step (markers, track, text). */
 export const renderStyledColumnRangeBarDisplayStepSummary = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
@@ -226,9 +209,6 @@ export const renderStyledColumnRangeBarDisplayStepSummary = (data) => {
     }
     return renderSummaryStringTags(items);
 };
-/**
- * Combined summary for the Styled Columns list row (preview + key facts).
- */
 export const renderStyledColumnRangeBarSummary = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
@@ -236,15 +216,6 @@ export const renderStyledColumnRangeBarSummary = (data) => {
     }
     return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:items-start", children: [renderStyledColumnRangeBarRangeStepSummary(data), renderStyledColumnRangeBarDisplayStepSummary(data)] }));
 };
-// ---------------------------------------------------------------------------
-// Wizard validity check (also used by the wizard step config)
-// ---------------------------------------------------------------------------
-/**
- * Returns `true` if the Range Bar's bounds are well-formed, otherwise an
- * error string explaining what's missing. Used as the wizard step's
- * `isValid` callback.
- */
-/** Bounds + bands step — Min / Max required and numeric pair must span. */
 export const isValidRangeBarBounds = (data) => {
     const range = data.RangeBarStyle;
     if (!range)
@@ -260,9 +231,6 @@ export const isValidRangeBarBounds = (data) => {
     }
     return true;
 };
-// ---------------------------------------------------------------------------
-// Section
-// ---------------------------------------------------------------------------
 const MARKER_SHAPES = [
     { value: 'Diamond', label: 'Diamond' },
     { value: 'Line', label: 'Line' },
@@ -290,9 +258,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
     const scope = { ColumnIds: [data.ColumnId] };
     const range = data.RangeBarStyle ?? {};
     const disabled = !data.ColumnId || !column;
-    // -------------------------------------------------------------------------
-    // Updaters
-    // -------------------------------------------------------------------------
     const update = (patch) => {
         props.onChange({
             ...data,
@@ -305,9 +270,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
     const onUpdateRanges = (ranges) => {
         update({ CellRanges: ranges });
     };
-    // The Range Bar wizard hides the column-comparison toggle (bounds *are*
-    // the per-row range here). Stub kept to satisfy the RangesComponent prop
-    // contract.
     const onUpdateColumnComparison = (columnComparison) => {
         update({ ColumnComparison: columnComparison });
     };
@@ -346,8 +308,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
             ...range.OutOfRange,
             ...patch,
         };
-        // Default mode is `Clamp` with no override colour; drop the wrapper in
-        // that case so empty state serialises cleanly.
         const isEmpty = (merged.Mode == undefined || merged.Mode === 'Clamp') && merged.Color == undefined;
         update({ OutOfRange: isEmpty ? undefined : merged });
     };
@@ -359,9 +319,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
         };
         update({ Reference: merged });
     };
-    // -- Bound editors ---------------------------------------------------------
-    // Resolved values for the column-wide aggregate bound modes, shown read-only
-    // in the bound editor so the user sees the underlying number.
     const resolvedBoundValues = {
         'Col-Min': minMaxRangeValues?.min,
         'Col-Max': minMaxRangeValues?.max,
@@ -372,11 +329,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
             ? api.styledColumnApi.internalApi.getMedianValueForNumericColumn(column)
             : undefined,
     };
-    /**
-     * Renders one of `Min` / `Max` / `Reference` as a single joined row (type
-     * selector + contextual editor). Centralised so the three controls stay
-     * visually and behaviourally identical (only the field name differs).
-     */
     const renderBoundEditor = (opts) => {
         const setBound = (next) => {
             if (opts.field === 'Reference') {
@@ -400,7 +352,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
         const value = opts.field === 'Reference' ? range.Reference?.Value : range[opts.field];
         return (_jsx(FormRow, { label: `${opts.label}:`, children: _jsx(RangeBarBoundInput, { api: api, value: value, optional: opts.optional, fallbackNumber: opts.fallbackNumber, excludeColumnId: data.ColumnId, resolved: resolvedBoundValues, disabled: disabled, onChange: setBound }) }));
     };
-    // -- Marker editors --------------------------------------------------------
     const updateValueMarker = (patch) => {
         update({
             Marker: {
@@ -419,8 +370,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
             },
         });
     };
-    // Defaults applied locally for displaying current values in the editor —
-    // the renderer applies its own defaults if these stay undefined in state.
     const valueMarker = {
         Shape: range.Marker?.Shape ?? 'Diamond',
         Color: range.Marker?.Color ?? '',
@@ -432,7 +381,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
         Color: referenceMarkerCfg?.Color ?? '',
         Size: referenceMarkerCfg?.Size ?? (referenceMarkerCfg?.Shape === 'Line' ? 2 : 8),
     };
-    // -- Cell text -------------------------------------------------------------
     const toggleCellText = (token, show) => {
         update(toggleBarStyleCellTextToken(range.CellTextProperties, token, show));
     };
@@ -448,9 +396,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    // -------------------------------------------------------------------------
-    // Render
-    // -------------------------------------------------------------------------
     if (!data.ColumnId || !column) {
         return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: !data.ColumnId
                     ? 'You need to select a column before styling.'

package/src/View/StyledColumn/Wizard/StyledColumnWizardRatingSection.js

@@ -61,11 +61,6 @@ export const getStyledColumnRatingStyleViewValues = (data) => {
         includeEmptyTooltip: false,
     });
 };
-/**
- * Resolve a CSS custom property (e.g. `--ab-color-warn`) to its computed
- * value at runtime. Returns the fallback hex on SSR or when the variable
- * isn't defined for the current theme.
- */
 const resolveCssVar = (varName, fallbackHex) => {
     if (typeof window === 'undefined')
         return fallbackHex;
@@ -79,16 +74,7 @@ const resolveCssVar = (varName, fallbackHex) => {
         return fallbackHex;
     }
 };
-/**
- * Best-effort preview colour for the wizard's `Filled Colour` picker when
- * the user hasn't chosen one. The renderer uses `var(--ab-color-warn,
- * #f5a623)`, but `ColorPicker` can't parse a `var(...)` with a fallback,
- * so we resolve the variable manually and pass a concrete hex.
- */
 const getDisplayedFilledColor = (rating) => rating.FilledColor || resolveCssVar('--ab-color-warn', '#f5a623');
-/**
- * Best-effort preview colour for the wizard's `Empty Colour` picker.
- */
 const getDisplayedEmptyColor = (rating) => {
     if (rating.EmptyColor)
         return rating.EmptyColor;
@@ -102,7 +88,6 @@ const getDisplayedEmptyColor = (rating) => {
         }
     }
     catch {
-        /* fall through */
     }
     return 'rgba(127, 127, 127, 0.22)';
 };

package/src/View/StyledColumn/Wizard/StyledColumnWizardScopeSection.js

@@ -9,20 +9,6 @@ import { cn } from '../../../lib/utils';
 import { getStyledColumnRowKindDisabledReason, isStyledColumnRowKindSupported, sanitizeStyledColumnRowScope, STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY, STYLED_COLUMN_ROW_KINDS, } from '../../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 import { isUnsupportedColumnDataTypeForIconStyle } from '../../../Utilities/Helpers/StyledColumns/IconStyleHelper';
 import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
-// ---------------------------------------------------------------------------
-// Row-kind helpers
-// ---------------------------------------------------------------------------
-/**
- * Per-type *effective* default for "render on this row kind?" — used by
- * the wizard checkboxes when `StyledColumn.RowScope` is unset, and by
- * the styled column list / summary view.
- *
- * Keep this in lockstep with `shouldRenderStyledColumnOnRow`:
- *  - Badge defaults to rendering everywhere (subject to type capabilities).
- *  - Every other type defaults to leaf rows only (matching the long-
- *    standing renderer behaviour), intersected with type capabilities
- *    (e.g. Sparkline → data rows only).
- */
 const ROW_KIND_LABELS = {
     Data: 'Data (leaf) Rows',
     Group: 'Group Rows',
@@ -51,9 +37,6 @@ const isRowKindIncluded = (styledColumn, kind) => {
 const collectIncludedRowKinds = (styledColumn) => {
     return STYLED_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(styledColumn, k));
 };
-// ---------------------------------------------------------------------------
-// Summary
-// ---------------------------------------------------------------------------
 export const renderStyledColumnScopeSummary = (data, api) => {
     const includedKinds = collectIncludedRowKinds(data);
     const allKinds = includedKinds.length === 4;
@@ -61,7 +44,6 @@ export const renderStyledColumnScopeSummary = (data, api) => {
                             ? api.columnApi.getFriendlyNameForColumnId(data.ColumnId)
                             : 'No Column Selected' })] }), _jsxs(Box, { className: "twa:mt-2", children: ["Rows:", ' ', allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (includedKinds.map((k) => (_jsx(Tag, { className: "twa:mr-1", children: k }, k))))] })] }));
 };
-/** Used by the styled column list view (one-line "Rows: Data, Group, …"). */
 export const collectIncludedRowKindLabels = (styledColumn) => collectIncludedRowKinds(styledColumn);
 const StyledColumnColumnScopeSummary = ({ data, }) => {
     const { api } = useOnePageAdaptableWizardContext();
@@ -72,9 +54,6 @@ const StyledColumnRowsScopeSummary = ({ data, }) => {
     const allKinds = includedKinds.length === 4;
     return (_jsx(CollapsibleWizardValueSummary, { value: allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: includedKinds.map((kind) => (_jsx(Tag, { children: ROW_KIND_LABELS[kind] }, kind))) })) }));
 };
-// ---------------------------------------------------------------------------
-// Validity
-// ---------------------------------------------------------------------------
 export const isValidStyledColumnScope = (data, api) => {
     if (!data.ColumnId) {
         return 'Please select a column for the Styled Column.';

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/BarStyleCellTextPreview.js

@@ -23,16 +23,6 @@ const CellTextRow = ({ className, style, slots }) => (_jsx(Flex, { className: cl
                 textAlign: HORIZONTAL_TEXT_ALIGN[horizontal],
             }, children: slot?.text ?? '' }, horizontal));
     }) }));
-/**
- * Preview of the per-value cell-text layout. Renders three potential bands:
- * - `Above` slots (above the bar)
- * - `Merged` slots (overlay on top of the bar — uses `mergedOverlayClassName`)
- * - `Below` slots (below the bar)
- *
- * Each band has three horizontal slots (Left/Center/Right) so the spacing is
- * stable. When `vertical` is provided, only the band matching that value is
- * rendered (used by the preview cards to position bands around the bar).
- */
 export const BarStyleCellTextPreview = ({ className, style, cellTextProperties, labels, mergedOverlayClassName, vertical }) => {
     if (!labels.cellValue && !labels.percentage) {
         return null;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/GradientSummaryPreview.js

@@ -28,11 +28,6 @@ function zeroCentredSplitPreview(negativeColor, positiveColor, postfix, minA, ma
                             background: gradientRangeStripCss(positiveColor, false, minA, maxA),
                         } })] })] }));
 }
-/**
- * Visual summary of Gradient cell ranges: shows an alpha ramp per range
- * (instead of a flat colour swatch). Zero-centred and legacy diverging
- * `Col-Min..0` + `0..Col-Max` pairs render as a single split strip.
- */
 export const GradientRangesSummaryPreview = (props) => {
     const minA = props.gradientStyle?.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
     const maxA = props.gradientStyle?.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/PercentBarStylePreview.js

@@ -2,10 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Flex } from '../../../../../components/Flex';
 import { getVariableColor } from '../../../../../Utilities/Helpers/StyleHelper';
 const stripClassName = 'twa:h-6 twa:w-[128px] twa:rounded twa:overflow-hidden twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
-/**
- * Compact range-colour strip for Percent Bar range summaries.
- * Cell text / origin / font are shown in `StyledColumnPercentBarPreview`.
- */
 export const PercentBarStylePreview = (props) => {
     const trackColor = props.backgroundColor ? getVariableColor(props.backgroundColor) : undefined;
     const barColor = props.barBackgroundColor

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview.js

@@ -23,11 +23,6 @@ const resolveBadgeRowJustify = (alignment) => {
             return null;
     }
 };
-/**
- * Pixel-parity preview of the badges as they would render in the cell.
- * Uses the same wrapper/badge classes (and the same `Badge` component) as
- * `BadgeRenderer` so the wizard summary matches the grid output exactly.
- */
 export const StyledColumnBadgePreview = ({ data }) => {
     const adaptable = useAdaptable();
     const badgeStyle = data.BadgeStyle;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview.js

@@ -16,7 +16,6 @@ const getBulletPreviewSample = (bullet) => {
         max = Math.max(...numeric.map((range) => range.Max));
     }
     const span = max - min || 1;
-    // Matches the schematic bar width (~58%) in `StyledColumnBulletChartListPreview`.
     const sampleValue = min + span * 0.58;
     const valueFraction = (sampleValue - min) / span;
     return {
@@ -35,8 +34,6 @@ const BulletChartPreviewContent = ({ bullet, }) => {
     const isVertical = bullet.Orientation === 'Vertical';
     const cellTextClassName = 'ab-BulletChart__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full';
     const chartEl = _jsx(StyledColumnBulletChartListPreview, { bullet: bullet });
-    // Merged-only with no outside bands → relative container so the overlay sits
-    // on top of the chart, matching the runtime renderer's behaviour.
     if (hasCellText && presence.hasMerged && !presence.hasAbove && !presence.hasBelow) {
         return (_jsxs(Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
     }

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnChartListPreviews.js

@@ -4,11 +4,6 @@ const PREVIEW_WIDTH = 168;
 const PREVIEW_HEIGHT = 26;
 const VB_W = 100;
 const VB_H = 22;
-/**
- * Maps each `CellColorRange` to a horizontal span in the schematic preview.
- * When endpoints are not plain numbers (e.g. `Col-Min`), falls back to even
- * slices so the strip still reads as a qualitative scale.
- */
 const bandSegmentsForPreview = (ranges) => {
     if (!ranges?.length) {
         return [];
@@ -34,10 +29,6 @@ const bandSegmentsForPreview = (ranges) => {
 const DEFAULT_TRACK = 'color-mix(in srgb, var(--ab-color-foreground) 35%, transparent)';
 const DEFAULT_BAR = 'var(--ab-color-accent, #07c)';
 const DEFAULT_MARKER = 'var(--ab-color-foreground, #333)';
-/**
- * Compact schematic of a Range Bar (bands + track + value / reference markers)
- * for the Styled Columns object list and wizard step summaries.
- */
 export const StyledColumnRangeBarListPreview = (props) => {
     const { range } = props;
     const segments = bandSegmentsForPreview(range.CellRanges);
@@ -48,10 +39,6 @@ export const StyledColumnRangeBarListPreview = (props) => {
     const isVertical = range.Orientation === 'Vertical';
     return (_jsx(Box, { className: "twa:rounded twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_12%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_40%,transparent)] twa:px-1 twa:py-0.5", style: { width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", "aria-hidden": true, children: [segments.length === 0 ? (_jsx("rect", { x: "0", y: "0", width: VB_W, height: VB_H, fill: range.BackColor ?? 'transparent' })) : (segments.map((s, i) => (_jsx("rect", { x: s.x0 * VB_W, y: "0", width: (s.x1 - s.x0) * VB_W, height: VB_H, fill: s.color, opacity: 0.55 }, i)))), isVertical ? (_jsxs(_Fragment, { children: [_jsx("rect", { x: VB_W * 0.42, y: "2", width: "5", height: VB_H - 4, rx: "1", fill: trackFill }), hasRef && (_jsx("line", { x1: VB_W * 0.46, y1: "3", x2: VB_W * 0.46, y2: VB_H - 3, stroke: refColor, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })), _jsx("polygon", { points: `${VB_W * 0.52},${VB_H * 0.35} ${VB_W * 0.62},${VB_H * 0.5} ${VB_W * 0.52},${VB_H * 0.65}`, fill: valueColor })] })) : (_jsxs(_Fragment, { children: [_jsx("rect", { x: "2", y: VB_H * 0.38, width: VB_W - 4, height: "5", rx: "1", fill: trackFill }), hasRef && (_jsx("line", { x1: VB_W * 0.38, y1: VB_H * 0.2, x2: VB_W * 0.38, y2: VB_H * 0.8, stroke: refColor, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })), _jsx("polygon", { points: `${VB_W * 0.72},${VB_H * 0.2} ${VB_W * 0.82},${VB_H * 0.5} ${VB_W * 0.72},${VB_H * 0.8}`, fill: valueColor })] }))] }) }));
 };
-/**
- * Compact schematic of a Bullet Chart (qualitative bands + bar + target marker)
- * for the Styled Columns object list.
- */
 export const StyledColumnBulletChartListPreview = (props) => {
     const { bullet } = props;
     const segments = bandSegmentsForPreview(bullet.CellRanges);

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview.js

@@ -13,7 +13,6 @@ const getRangeBarPreviewSample = (range) => {
         max = range.Max;
     }
     const span = max - min || 1;
-    // Matches the value-marker position (~72%) in `StyledColumnRangeBarListPreview`.
     const sampleValue = min + span * 0.72;
     const valueFraction = (sampleValue - min) / span;
     return {

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview.js

@@ -34,7 +34,6 @@ export const RatingPreview = ({ rating, value, }) => {
     const allowHalf = rating.AllowHalf ?? true;
     const previewValue = value ?? Math.max(1, Math.min(max, max * 0.7));
     const effective = allowHalf ? previewValue : Math.round(previewValue);
-    // Display rounded to 1 dp so e.g. 3 * 0.7 doesn't surface as 2.0999999999999996.
     const displayValue = Math.round(previewValue * 10) / 10;
     const d = ICON_PATHS[icon];
     return (_jsxs("span", { style: {

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview.js

@@ -45,7 +45,6 @@ const buildSparklinePreviewOptions = (sparklineStyle, container, data, width, he
         height,
         data: data,
     });
-    // Custom tooltip renderers expect AG Grid row context — use the default tooltip in preview.
     if (options.tooltip?.renderer) {
         const { renderer: _renderer, ...tooltipRest } = options.tooltip;
         options.tooltip = tooltipRest;