@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

package/src/View/SystemStatus/Utilities/getStatusItemStyle.js

@@ -3,7 +3,7 @@ export const getStatusItemStyle = (systemStatusMessageInfo) => {
     const background = UIHelper.getColorByMessageType(systemStatusMessageInfo?.statusType ?? 'Success');
     const color = systemStatusMessageInfo
         ? UIHelper.getButtonTextColourForMessageType(systemStatusMessageInfo.statusType)
-        : 'var(--ab-color-text-on-primary)';
+        : 'var(--ab-color-primary-foreground)';
     return {
         background,
         color,

package/src/View/Theme/ThemePopup.d.ts

@@ -1,19 +1,7 @@
 import * as React from 'react';
-import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
-import { AdaptableTheme } from '../../AdaptableState/ThemeState';
-interface ThemePopupProps extends ModuleViewPopupProps<ThemePopupComponent> {
-    CurrentTheme: string;
-    UserThemes: AdaptableTheme[];
-    SelectTheme: (newTheme: string) => ThemeRedux.ThemeSelectAction;
-    hideShowInWindow?: boolean;
-}
-declare class ThemePopupComponent extends React.Component<ThemePopupProps, {}> {
+declare class ThemePopupComponent extends React.Component<ModuleViewPopupProps<ThemePopupComponent>, {}> {
     render(): React.JSX.Element;
-    onChangeTheme(value: string): void;
-    handleCreateNewTheme: (variant: "dark" | "light") => void;
 }
-export declare let ThemePopup: import("react-redux").ConnectedComponent<typeof ThemePopupComponent, {
-    [x: string]: any;
-}>;
+export declare let ThemePopup: typeof ThemePopupComponent;
 export {};

package/src/View/Theme/ThemePopup.js

@@ -1,47 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { connect } from 'react-redux';
-import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import FormLayout, { FormRow } from '../../components/FormLayout';
-import ObjectFactory from '../../Utilities/ObjectFactory';
-import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 import { ThemeSelector } from './ThemeSelector';
 import { Box } from '../../components/Flex';
 class ThemePopupComponent extends React.Component {
     render() {
-        const isCustomTheme = this.props.api.themeApi
-            .getUserThemes()
-            .some((theme) => theme.Name === this.props.CurrentTheme);
-        const disabled = this.props.accessLevel === ACCESS_LEVEL_READ_ONLY;
         return (_jsx(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "Select Current Theme:", children: _jsx(Box, { className: "twa:max-w-[150px]", children: _jsx(ThemeSelector, {}) }) }) }) }));
     }
-    onChangeTheme(value) {
-        this.props.SelectTheme(value);
-    }
-    handleCreateNewTheme = (variant) => {
-        let nthItem = this.props.UserThemes.length + 1;
-        let name = 'Custom-Theme-' + nthItem;
-        // make sure it is unique
-        while (this.props.UserThemes.some((theme) => theme.Name === name)) {
-            nthItem++;
-            name = 'Custom-Theme-' + nthItem;
-        }
-        const newTheme = ObjectFactory.CreateEmptyTheme(name);
-        newTheme.Variant = variant;
-        this.props.api.themeApi.addUserTheme(newTheme);
-        this.props.api.themeApi.loadTheme(newTheme.Name);
-    };
-}
-function mapStateToProps(state, ownProps) {
-    return {
-        CurrentTheme: state.Theme.CurrentTheme,
-        UserThemes: state.Theme.UserThemes,
-    };
-}
-function mapDispatchToProps(dispatch) {
-    return {
-        SelectTheme: (newTheme) => dispatch(ThemeRedux.ThemeSelect(newTheme)),
-    };
 }
-export let ThemePopup = connect(mapStateToProps, mapDispatchToProps)(ThemePopupComponent);
+export let ThemePopup = ThemePopupComponent;

package/src/View/UIHelper.d.ts

@@ -26,7 +26,6 @@ export declare function getMessageTypeByStatusColour(statusColour: StatusColour)
 export declare function getButtonToneByMessageType(messageType: AdaptableMessageType): 'success' | 'error' | 'neutral' | 'none' | 'warning' | 'info' | 'accent';
 export declare function getGlyphByMessageType(messageType: AdaptableMessageType): AdaptableSystemIconName;
 export declare function getColorByMessageType(messageType: AdaptableMessageType): string;
-export declare function getCSSColorByMessageType(messageType: AdaptableMessageType): string;
 export declare function getStyleForStatusColour(statusColour: StatusColour): CSSProperties;
 export declare function getStyleForMessageType(messageType: AdaptableMessageType): CSSProperties;
 export declare function getGlyphForStatusColour(statusColour: StatusColour): string;
@@ -67,7 +66,6 @@ export declare const UIHelper: {
     getGlyphForMessageType: typeof getGlyphForMessageType;
     getStyleForMessageType: typeof getStyleForMessageType;
     getMessageTypeFromAdaptableAlerts: typeof getMessageTypeFromAdaptableAlerts;
-    getCSSColorByMessageType: typeof getCSSColorByMessageType;
     getButtonColourForAdaptableAlerts: typeof getButtonColourForAdaptableAlerts;
     getButtonTextColourForArrayandMessageType: typeof getButtonTextColourForArrayandMessageType;
     getButtonTextColourForMessageType: typeof getButtonTextColourForMessageType;

package/src/View/UIHelper.js

@@ -1,7 +1,7 @@
 import { WizardStatus, } from './Components/SharedProps/EditableConfigEntityState';
 import { FontWeight, FontStyle, StatusColour } from '../AdaptableState/Common/Enums';
 import { StringExtensions } from '../Utilities/Extensions/StringExtensions';
-import { getScheduleDescription as getScheduleDescriptionFromHelper } from '../Utilities/Helpers/ScheduleHelper';
+import { getScheduleDescription as getScheduleDescriptionFromHelper } from '../Utilities/Helpers/Scheduling/ScheduleHelper';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import { resolveContainerElement } from '../Utilities/resolveContainerElement';
 /** Generic swatch entries for the Colour Picker (resolved at runtime per active theme). */
@@ -18,7 +18,7 @@ export function getSwatchColorPaletteEntries() {
 /** Theme semantic colours for the Colour Picker (resolved at runtime per active theme). */
 export function getThemeSemanticColorPaletteEntries() {
     return [
-        'var(--ab-color-error)',
+        'var(--ab-color-destructive)',
         'var(--ab-color-warn)',
         'var(--ab-color-success)',
         'var(--ab-color-info)',
@@ -134,7 +134,7 @@ export function getGlyphByMessageType(messageType) {
 export function getColorByMessageType(messageType) {
     switch (messageType) {
         case 'Error':
-            return 'var(--ab-color-error)';
+            return 'var(--ab-color-destructive)';
         case 'Warning':
             return 'var(--ab-color-warn)';
         case 'Success':
@@ -143,20 +143,6 @@ export function getColorByMessageType(messageType) {
             return 'var(--ab-color-info)';
     }
 }
-export function getCSSColorByMessageType(messageType) {
-    switch (messageType) {
-        case 'Error':
-            return 'error';
-        case 'Warning':
-            return 'warn';
-        case 'Success':
-            return 'success';
-        case 'Info':
-            return 'info';
-        default:
-            return '';
-    }
-}
 export function getStyleForStatusColour(statusColour) {
     let result;
     switch (statusColour) {
@@ -177,7 +163,7 @@ export function getStyleForStatusColour(statusColour) {
             break;
         case StatusColour.Error:
             result = {
-                fill: 'var(--ab-color-error)',
+                fill: 'var(--ab-color-destructive)',
             };
             break;
     }
@@ -206,7 +192,7 @@ export function getStyleForMessageType(messageType) {
             break;
         case 'Error':
             result = {
-                fill: 'var(--ab-color-error)',
+                fill: 'var(--ab-color-destructive)',
             };
             break;
     }
@@ -314,20 +300,20 @@ export function getButtonColourForAdaptableAlerts(adaptableAlerts, messageTypeCo
 }
 export function getButtonTextColourForArrayandMessageType(adaptableAlerts, messageType) {
     if (ArrayExtensions.IsNullOrEmpty(adaptableAlerts)) {
-        return 'text-on-primary';
+        return 'primary-foreground';
     }
     return this.getButtonTextColourForMessageType(messageType);
 }
 export function getButtonTextColourForMessageType(messageType) {
     switch (messageType) {
         case 'Info':
-            return 'var( --ab-color-text-on-info)';
+            return 'var( --ab-color-info-foreground)';
         case 'Success':
-            return 'var( --ab-color-text-on-success)';
+            return 'var( --ab-color-success-foreground)';
         case 'Warning':
-            return 'var( --ab-color-text-on-warn)';
+            return 'var( --ab-color-warn-foreground)';
         case 'Error':
-            return 'var( --ab-color-text-on-error)';
+            return 'var( --ab-color-destructive-foreground)';
     }
 }
 function getNumericCSSVariableValue(stringValue, defaultValue) {
@@ -381,7 +367,6 @@ export const UIHelper = {
     getGlyphForMessageType,
     getStyleForMessageType,
     getMessageTypeFromAdaptableAlerts,
-    getCSSColorByMessageType,
     getButtonColourForAdaptableAlerts,
     getButtonTextColourForArrayandMessageType,
     getButtonTextColourForMessageType,

package/src/View/Wizard/CollapsibleWizardCard.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { type CollapsibleWizardCardSurface } from '../../Utilities/wizardSelection';
+export interface CollapsibleWizardCardProps {
+    title: React.ReactNode;
+    /** Help text in the header when expanded. */
+    help?: React.ReactNode;
+    /**
+     * Help text in the header when collapsed. Uses `help` when omitted.
+     * Pass `false` to hide collapsed header help.
+     */
+    collapsedHelp?: React.ReactNode | false;
+    /** Shown in the card body while collapsed — typically tags or a short value summary. */
+    summary: React.ReactNode;
+    /** One-line value shown in the header when another card in the accordion is expanded. */
+    compactSummary?: React.ReactNode;
+    /** When true, `compactSummary` remains interactive (e.g. toggle buttons). */
+    compactSummaryInteractive?: boolean;
+    /** Full-opacity visual in the header row (all states) — e.g. a live badge preview. */
+    headerVisual?: React.ReactNode;
+    /** Trailing header controls (all states) — e.g. delete. Clicks do not toggle expand. */
+    headerActions?: React.ReactNode;
+    children: React.ReactNode;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    /** When true, only the header row is shown (another card in the accordion is expanded). */
+    compact?: boolean;
+    /** When true, the expanded card grows to fill remaining section height (for scrollable lists). */
+    fillAvailable?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    className?: string;
+    bodyClassName?: string;
+    /** `panel` = Layout wizard (same bg as parent); `popup` = module popups (Dashboard). */
+    surface?: CollapsibleWizardCardSurface;
+    'data-name'?: string;
+}
+export type WizardCardAccordionBinding = {
+    expanded: boolean;
+    compact: boolean;
+    fillAvailable: boolean;
+    onExpandedChange: (expanded: boolean) => void;
+};
+export type WizardCardAccordionBindCardOptions = {
+    /** When expanded, grow to fill remaining section height. Default: false. */
+    fillAvailable?: boolean;
+};
+export type WizardCardAccordionOptions = {
+    /** Section default for `fillAvailable` when not set per card. Default: false. */
+    fillExpandedCard?: boolean;
+};
+export type WizardCardAccordionBindCard = (id: string, options?: WizardCardAccordionBindCardOptions) => WizardCardAccordionBinding;
+export declare function getWizardAccordionSectionClassName(hasExpandedCard: boolean, fillExpandedCard?: boolean): string;
+export declare function renderCompactColumnTags(columnIds: string[], getFriendlyName: (columnId: string) => string, options?: {
+    maxVisible?: number;
+    emptyLabel?: string;
+}): React.ReactNode;
+export declare const CollapsibleWizardCard: React.FC<CollapsibleWizardCardProps>;
+export declare function useWizardCardAccordion(initialExpandedId: string | null, options?: WizardCardAccordionOptions): {
+    expandedId: string;
+    hasExpandedCard: boolean;
+    expandedFillsSpace: boolean;
+    bindCard: WizardCardAccordionBindCard;
+    fillExpandedCard: boolean;
+    setExpandedId: React.Dispatch<React.SetStateAction<string>>;
+};
+/** Collapsed card body: selected value tag(s) only — no description text. */
+export declare const CollapsibleWizardValueSummary: React.FC<{
+    value: React.ReactNode;
+}>;

package/src/View/Wizard/CollapsibleWizardCard.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Card } from '../../components/Card';
+import { cn } from '../../lib/utils';
+import { getCollapsibleWizardCardCollapsedClasses, getCollapsibleWizardCardExpandedClasses, } from '../../Utilities/wizardSelection';
+import { Box, Flex } from '../../components/Flex';
+import useProperty from '../../components/utils/useProperty';
+import { ColumnTag, Tag } from '../../components/Tag';
+import { IconComponent } from '../../components/Icon';
+import { targetOwn } from '../../components/twUtils';
+export function getWizardAccordionSectionClassName(hasExpandedCard, fillExpandedCard = true) {
+    return cn('twa:h-full twa:min-h-0 twa:flex twa:flex-col twa:gap-2', hasExpandedCard && fillExpandedCard ? 'twa:overflow-hidden' : 'twa:overflow-y-auto');
+}
+export function renderCompactColumnTags(columnIds, getFriendlyName, options) {
+    const { maxVisible = 5, emptyLabel = 'None' } = options ?? {};
+    if (!columnIds.length) {
+        return _jsx(Tag, { children: emptyLabel });
+    }
+    const visibleIds = columnIds.slice(0, maxVisible);
+    const remainder = columnIds.length - visibleIds.length;
+    return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: [visibleIds.map((columnId) => (_jsx(ColumnTag, { className: "twa:shrink-0", children: getFriendlyName(columnId) }, columnId))), remainder > 0 ? (_jsxs("span", { className: "twa:text-xs twa:opacity-70 twa:shrink-0", children: ["+", remainder] })) : null] }));
+}
+export const CollapsibleWizardCard = (props) => {
+    const { title, help, collapsedHelp, summary, compactSummary, compactSummaryInteractive = false, headerVisual, headerActions, children, defaultExpanded = false, compact = false, fillAvailable = false, className, bodyClassName, surface = 'popup', 'data-name': dataName, } = props;
+    const [expanded, setExpanded] = useProperty(props, 'expanded', defaultExpanded, {
+        onChange: props.onExpandedChange,
+    });
+    const showSummary = !expanded && !compact;
+    const collapsedHeaderInline = collapsedHelp === false ? undefined : collapsedHelp ?? help;
+    const headerInline = expanded ? help : compact ? compactSummary : collapsedHeaderInline;
+    const isInteractiveCompactSummary = compact && compactSummaryInteractive;
+    const toggleExpanded = () => setExpanded(!expanded);
+    const handleTitleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            toggleExpanded();
+        }
+    };
+    return (_jsxs(Card, { shadow: false, className: cn('ab-CollapsibleWizardCard twa:border twa:transition-[border-color,background-color]', expanded
+            ? getCollapsibleWizardCardExpandedClasses(surface)
+            : getCollapsibleWizardCardCollapsedClasses(surface), compact && 'ab-CollapsibleWizardCard--compact twa:p-0!', fillAvailable
+            ? 'twa:flex-1 twa:min-h-0 twa:flex twa:flex-col twa:overflow-hidden'
+            : 'twa:shrink-0', className), children: [_jsx(Card.Title, { className: "twa:p-0", border: !compact, children: _jsxs(Box, { className: cn('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:w-full twa:px-2 twa:cursor-pointer twa:rounded-standard twa:hover:bg-primary', { 'twa:py-2': true, 'twa:mb-0.5': !compact && !expanded }, 
+                    // `targetOwn.focusOutline` uses a Tailwind `ring` (an *outward* box-shadow).
+                    // In compact/collapsed mode the card sets `p-0!`, so this header sits flush
+                    // against the card edge; combined with the card's `overflow-hidden` the
+                    // outward ring is painted outside the border-box and clipped away. Draw it
+                    // inset so it stays inside the element and is always visible.
+                    targetOwn.focusOutline, 'twa:focus-visible:ring-inset'), "data-name": dataName, onClick: toggleExpanded, onKeyDown: handleTitleKeyDown, tabIndex: 0, "aria-expanded": expanded, role: "button", children: [_jsxs(Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-2 twa:shrink-0 twa:cursor-pointer twa:select-none", children: [_jsx(IconComponent, { icon: { name: expanded ? 'collapse' : 'expand' } }), _jsx(Box, { className: "twa:font-medium", children: title })] }), headerVisual ? (_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:flex twa:justify-end twa:items-center twa:overflow-hidden twa:pointer-events-none", children: headerVisual })) : headerInline ? (_jsx(Box, { className: cn('twa:flex-1 twa:min-w-0 twa:font-normal', isInteractiveCompactSummary
+                                ? 'twa:flex twa:justify-end twa:items-center twa:overflow-visible'
+                                : cn('twa:text-xs twa:opacity-70 twa:pointer-events-none twa:cursor-default', compact ? 'twa:overflow-hidden' : 'twa:truncate')), children: headerInline })) : (_jsx(Box, { className: "twa:flex-1 twa:min-w-0" })), headerActions ? (_jsx(Box, { className: "twa:shrink-0", onClick: (event) => event.stopPropagation(), children: headerActions })) : null] }) }), expanded ? (_jsx(Card.Body, { className: cn('twa:p-1', bodyClassName, fillAvailable && 'twa:max-h-none! twa:flex-1 twa:min-h-0'), children: children })) : showSummary ? (_jsx(Card.Body, { className: "twa:p-1", gap: 1, children: summary })) : null] }));
+};
+export function useWizardCardAccordion(initialExpandedId, options) {
+    const fillExpandedCard = options?.fillExpandedCard ?? false;
+    const cardFillByIdRef = React.useRef({});
+    const [expandedId, setExpandedId] = React.useState(initialExpandedId);
+    const hasExpandedCard = expandedId !== null;
+    const bindCard = React.useCallback((id, cardOptions) => {
+        const shouldFillWhenExpanded = cardOptions?.fillAvailable ?? fillExpandedCard;
+        cardFillByIdRef.current[id] = shouldFillWhenExpanded;
+        return {
+            expanded: expandedId === id,
+            compact: hasExpandedCard && expandedId !== id,
+            fillAvailable: expandedId === id && shouldFillWhenExpanded,
+            onExpandedChange: (expanded) => {
+                setExpandedId(expanded ? id : null);
+            },
+        };
+    }, [expandedId, hasExpandedCard, fillExpandedCard]);
+    const expandedFillsSpace = expandedId != null && cardFillByIdRef.current[expandedId] === true;
+    return {
+        expandedId,
+        hasExpandedCard,
+        expandedFillsSpace,
+        bindCard,
+        fillExpandedCard,
+        setExpandedId,
+    };
+}
+/** Collapsed card body: selected value tag(s) only — no description text. */
+export const CollapsibleWizardValueSummary = ({ value }) => _jsx(_Fragment, { children: value });

package/src/View/Wizard/OnePageAdaptableWizard.d.ts

@@ -57,6 +57,13 @@ export interface OnePageAdaptableWizardProps<ENTITY> {
      * `FriendlyName`.
      */
     moduleName?: string;
+    /**
+     * Persistent preview rendered as a full-width band beneath the wizard
+     * header — visible on every step. Used by wizards (e.g. Styled Column)
+     * that want users to see a live preview of the object they're building
+     * as they progress.
+     */
+    headerPreview?: React.ReactNode;
 }
 export declare const OnePageAdaptableWizard: <ENTITY extends unknown>(props: OnePageAdaptableWizardProps<ENTITY>) => React.JSX.Element;
 export declare const OnePageWizardSummary: <ENTITY extends unknown>() => React.JSX.Element;

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -1,14 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import * as NamedQueryRedux from '../../Redux/ActionsReducers/NamedQueryRedux';
-import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
-import { Tabs } from '../../components/Tabs';
+import { Card } from '../../components/Card';
+import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
 import { NamedQueryContext, } from '../../components/ExpressionEditor/NamedQueryContext';
 import { OnePageWizard, useOnePageWizardContext } from './OnePageWizards';
-import kebabCase from '../../Utilities/utils/kebabCase';
+import { kebabCase } from '../../Utilities/Extensions/StringExtensions';
 import { Box } from '../../components/Flex';
 import { twMerge } from '../../twMerge';
 export const SummaryTag = (props) => (_jsx(Box, { ...props }));
@@ -74,20 +74,9 @@ export const OnePageAdaptableWizard = (props) => {
     return (_jsx(OnePageAdaptableWizardContext.Provider, { value: extraContext, children: _jsx(NamedQueryContext.Provider, { value: { namedQuery, setNamedQuery }, children: _jsx(OnePageWizard, { ...props, name: name, sections: sections, onFinish: handleClickFinish, moduleName: props.moduleName ?? props.moduleInfo.FriendlyName }) }) }));
 };
 export const OnePageWizardSummary = () => {
-    const { sections, data, api, moduleInfo } = useOnePageAdaptableWizardContext();
-    const { setCurrentSection } = useOnePageWizardContext();
-    const [namedQuery] = useState(false);
-    const renderEdit = (index) => (_jsx(SimpleButton, { className: "twa:px-1 twa:inline-block twa:text-2 twa:underline", variant: "text", onClick: () => {
-            setCurrentSection(index);
-        }, children: "edit" }));
-    const extraContext = {
-        data,
-        api,
-        namedQuery,
-        moduleInfo: moduleInfo,
-        sections,
-    };
-    return (_jsx(Box, { className: "ab-OnePageWizardSummary twa:flex twa:flex-col twa:gap-2", children: sections
+    const { data, api } = useOnePageAdaptableWizardContext();
+    const { sections: visibleSections, setCurrentSection } = useOnePageWizardContext();
+    return (_jsx(Box, { className: "ab-OnePageWizardSummary twa:flex twa:flex-col twa:gap-3", children: visibleSections
             .map((section, index) => {
             if (section === '-') {
                 return null;
@@ -95,10 +84,7 @@ export const OnePageWizardSummary = () => {
             if (!section.renderSummary) {
                 return null;
             }
-            if (section.isVisible && !section.isVisible(data, api, extraContext)) {
-                return null;
-            }
-            return (_jsx(_Fragment, { children: _jsxs(Tabs, { keyboardNavigation: false, children: [_jsxs(Tabs.Tab, { children: [section.title, " ", renderEdit(index)] }), _jsx(Tabs.Content, { children: section.renderSummary(data, api) })] }, index) }));
+            return (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { className: "twa:w-full", children: [_jsx(Box, { className: "twa:font-medium twa:flex-1", children: section.title }), _jsx(ButtonEdit, { onClick: () => setCurrentSection(index) })] }), _jsx(Card.Body, { className: "twa:p-1", children: section.renderSummary?.(data, api) })] }, `${section.title}-${index}`));
         })
             .filter(Boolean) }));
 };

package/src/View/Wizard/OnePageWizards.d.ts

@@ -41,6 +41,14 @@ export interface OnePageWizardProps<ENTITY> {
     closeTooltip?: string;
     finishText?: React.ReactNode;
     moduleName?: string;
+    /**
+     * Optional persistent preview rendered as a full-width band beneath the
+     * header. Used by wizards (e.g. Styled Column) that want users to see a
+     * live preview of the object they're building on every step — the same
+     * card the existing Style / Summary steps render, hoisted so it is
+     * always visible.
+     */
+    headerPreview?: React.ReactNode;
 }
 export declare const OnePageWizard: <ENTITY extends unknown>(props: OnePageWizardProps<ENTITY>) => React.JSX.Element;
 export {};

package/src/View/Wizard/OnePageWizards.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { useState, useRef } from 'react';
-import clsx from 'clsx';
+import { cn } from '../../lib/utils';
 import Dialog from '../../components/Dialog';
 import SimpleButton from '../../components/SimpleButton';
 import useProperty from '../../components/utils/useProperty';
@@ -78,11 +78,11 @@ export const OnePageWizard = (props) => {
         if (section === '-') {
             return _jsx(React.Fragment, {}, index);
         }
-        return (_jsx(Flex, { flexDirection: "column", "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2", children: _jsx(Box, { className: "ab-OnePageWizard__section twa:flex-1 twa:rounded-standard twa:overflow-auto twa:bg-defaultbackground", children: section.render(props.data, index) }) }, index));
+        return (_jsx(Flex, { flexDirection: "column", "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2", children: _jsx(Box, { className: "ab-OnePageWizard__section twa:flex-1 twa:rounded-standard twa:overflow-auto twa:bg-background", children: section.render(props.data, index) }) }, index));
     };
     const handleNavigation = useKeyboardNavigation(setCurrentSection, visibleSections);
     const selectedNodeRef = useRef(null);
-    const selectedFeedback = (_jsx("div", { ref: selectedNodeRef, onKeyDown: (event) => handleNavigation(event), tabIndex: 0, className: clsx('ab-OnePageWizard__selected-title-overlay', 'twa:absolute twa:rounded-standard twa:select-none twa:bg-accent twa:transition-top twa:duration-200', targetOwn.focusOutline) }));
+    const selectedFeedback = (_jsx("div", { ref: selectedNodeRef, onKeyDown: (event) => handleNavigation(event), tabIndex: 0, className: cn('ab-OnePageWizard__selected-title-overlay', 'twa:absolute twa:rounded-standard twa:select-none twa:bg-accent twa:transition-top twa:duration-200', targetOwn.focusOutline) }));
     const sizeOwnerRef = useRef(null);
     const [width, setWidth] = useState(0);
     useResizeObserver(sizeOwnerRef, ({ width }) => {
@@ -136,7 +136,7 @@ export const OnePageWizard = (props) => {
                             }
                         }
                     }
-                }, children: _jsxs(Box, { className: clsx('ab-OnePageWizard twa:flex twa:flex-col twa:h-full twa:w-[90vw] twa:max-w-[1200px]', 'twa:bg-primarylight twa:text-primary-foreground'), "data-name": props.name, style: props.style, children: [(props.moduleName || activeSectionDetails) && (_jsxs(Box, { className: clsx('ab-OnePageWizard__header', ONE_PAGE_WIZARD_SECTION_GRID, 'twa:items-start twa:my-3 twa:px-2'), children: [_jsx(Box, { className: "ab-OnePageWizard__module-name twa:min-w-0 twa:pl-3 twa:font-bold", children: props.moduleName }), _jsx(Box, { className: "ab-OnePageWizard__details twa:min-w-0 twa:pr-2 twa:text-4", children: activeSectionDetails })] })), _jsx(Box, { as: "hr", className: "ab-OnePageWizard__module-separator twa:w-full twa:border-0 twa:border-t twa:border-t-input-border twa:mb-2" }), _jsxs(Box, { className: clsx(ONE_PAGE_WIZARD_SECTION_GRID, 'twa:flex-1 twa:min-h-0 twa:overflow-auto twa:items-stretch'), children: [_jsxs(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-title-container twa:min-h-0 twa:min-w-0 twa:overflow-auto twa:p-3 twa:relative", ref: sizeOwnerRef, style: props.titleContainerStyle, children: [visibleSections.map((section, index) => {
+                }, children: _jsxs(Box, { className: cn('ab-OnePageWizard twa:flex twa:flex-col twa:h-full twa:w-[90vw] twa:max-w-[1200px]', 'twa:bg-primarylight twa:text-primary-foreground'), "data-name": props.name, style: props.style, children: [(props.moduleName || activeSectionDetails) && (_jsxs(Box, { className: cn('ab-OnePageWizard__header', ONE_PAGE_WIZARD_SECTION_GRID, 'twa:items-start twa:my-3 twa:px-2'), children: [_jsx(Box, { className: "ab-OnePageWizard__module-name twa:min-w-0 twa:pl-3 twa:font-bold", children: props.moduleName }), _jsx(Box, { className: "ab-OnePageWizard__details twa:min-w-0 twa:pr-2 twa:text-4", children: activeSectionDetails })] })), _jsx(Box, { as: "hr", className: "ab-OnePageWizard__module-separator twa:w-full twa:border-0 twa:border-t twa:border-t-input-border twa:mb-2" }), _jsxs(Box, { className: cn(ONE_PAGE_WIZARD_SECTION_GRID, 'twa:flex-1 twa:min-h-0 twa:overflow-auto twa:items-stretch'), children: [_jsxs(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-title-container twa:min-h-0 twa:min-w-0 twa:overflow-auto twa:p-3 twa:relative", ref: sizeOwnerRef, style: props.titleContainerStyle, children: [visibleSections.map((section, index) => {
                                             if (section === '-') {
                                                 return (_jsx(Box, { as: "hr", className: "ab-OnePageWizard__section-separator twa:mt-2 twa:w-full twa:border-t twa:border-t-input-border" }, `${index}-`));
                                             }
@@ -144,7 +144,7 @@ export const OnePageWizard = (props) => {
                                             navIndexMap.set(navIndex, index);
                                             const active = index === currentSection;
                                             const disabled = false; //!active && !currentSectionValid;
-                                            return (_jsxs(Flex, { className: clsx('ab-OnePageWizard__section-title twa:p-2', {
+                                            return (_jsxs(Flex, { className: cn('ab-OnePageWizard__section-title twa:p-2', {
                                                     'twa:cursor-auto': disabled,
                                                     'twa:cursor-pointer': !disabled,
                                                     'twa:z-10': true,
@@ -163,6 +163,8 @@ export const OnePageWizard = (props) => {
                                                         return;
                                                     }
                                                     setCurrentSection(index);
-                                                }, children: [_jsx(KeyHint, { className: "twa:mr-2 twa:inline-block twa:text-color-accent-foreground", children: navIndex }), _jsx("div", { className: "twa:flex-1", children: section.title }), _jsx(Icon, { name: "error", className: clsx('twa:ml-2', validSectionsMap.get(index) !== true ? 'twa:visible' : 'twa:invisible') })] }, section.title));
-                                        }), selectedFeedback, _jsx(Box, { className: "twa:flex-1" }), _jsxs(KeyHint, { className: "ab-OnePageWizard__key-hint twa:leading-normal", children: [isMacLike() ? 'Cmd' : 'Ctrl', " + #", _jsx("br", {}), "or arrow keys", _jsx("br", {}), "to navigate"] })] }), _jsx(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:min-h-0 twa:min-w-0 twa:flex-1", children: renderSection(currentSection) })] }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2", children: [_jsx(SimpleButton, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: ACCESS_LEVEL_FULL, children: props.closeText ?? 'CLOSE' }), _jsx(KeyHint, { className: "twa:ml-2", children: "Esc" }), _jsx(Box, { className: "ab-OnePageWizard__error twa:text-2 twa:mr-3 twa:flex-1 twa:text-error twa:text-end", children: firstErrorMessage }), _jsx(SimpleButton, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: ACCESS_LEVEL_FULL, children: props.finishText ?? 'Finish' })] })] }) }) }) }));
+                                                }, children: [_jsx(KeyHint, { className: cn('twa:mr-2 twa:inline-block', {
+                                                            'twa:text-accent-foreground': active,
+                                                        }), children: navIndex }), _jsx("div", { className: "twa:flex-1", children: section.title }), _jsx(Icon, { name: "error", className: cn('twa:ml-2', validSectionsMap.get(index) !== true ? 'twa:visible' : 'twa:invisible') })] }, section.title));
+                                        }), selectedFeedback, _jsx(Box, { className: "twa:flex-1" }), _jsxs(KeyHint, { className: "ab-OnePageWizard__key-hint twa:leading-normal", children: [isMacLike() ? 'Cmd' : 'Ctrl', " + #", _jsx("br", {}), "or arrow keys", _jsx("br", {}), "to navigate"] })] }), _jsxs(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:min-h-0 twa:min-w-0 twa:flex-1", children: [props.headerPreview ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ab-OnePageWizard__header-preview twa:px-3 twa:pb-2", children: props.headerPreview }), _jsx(Box, { as: "hr", className: "ab-OnePageWizard__header-preview-separator twa:w-full twa:border-0 twa:border-t twa:border-t-input-border twa:mb-2" })] })) : null, renderSection(currentSection)] })] }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2", children: [_jsx(SimpleButton, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: ACCESS_LEVEL_FULL, children: props.closeText ?? 'CLOSE' }), _jsx(KeyHint, { className: "twa:ml-2", children: "Esc" }), _jsx(Box, { className: "ab-OnePageWizard__error twa:text-2 twa:mr-3 twa:flex-1 twa:text-destructive twa:text-end", children: firstErrorMessage }), _jsx(SimpleButton, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: ACCESS_LEVEL_FULL, children: props.finishText ?? 'Finish' })] })] }) }) }) }));
 };

package/src/View/Wizard/SummaryColorTag.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { AdaptableIcon } from '../../types';
+export type SummaryLabelValueItem = {
+    label: string;
+    value: string;
+    /** When set on an Icon summary row, renders the icon glyph instead of the name. */
+    icon?: AdaptableIcon;
+};
+export declare const isSummaryColorLabel: (label: string) => boolean;
+/** Labels whose label + value render together inside a single tag (colours, font traits). */
+export declare const isSummaryInTagLabel: (label: string) => boolean;
+export declare const ColorSummarySquare: React.FC<{
+    color: string;
+    className?: string;
+}>;
+export declare const renderSummaryLabelValueTagContent: (label: string, value: string, icon?: AdaptableIcon) => React.ReactNode;
+export declare const parseSummaryLabelValueString: (item: string) => {
+    label: string;
+    value: string;
+} | null;
+export declare const renderSummaryStringTagContent: (item: string) => React.ReactNode;
+export declare const renderSummaryStringTags: (items: string[]) => React.JSX.Element;
+export declare const summaryStringsToTagContents: (items: string[]) => React.ReactNode[];
+export declare const renderSummaryLabelValueTags: (items: SummaryLabelValueItem[]) => React.JSX.Element;

package/src/View/Wizard/SummaryColorTag.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex } from '../../components/Flex';
+import { Tag } from '../../components/Tag';
+import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';
+import { allIcons, Icon } from '../../components/icons';
+import { AdaptableIconComponent } from '../Components/AdaptableIconComponent';
+const COLOR_SQUARE_CLASS = 'twa:h-3 twa:w-3 twa:rounded-sm twa:shrink-0 twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_20%,transparent)]';
+export const isSummaryColorLabel = (label) => /\bColou?r$/i.test(label.trim());
+const isIconSummaryLabel = (label) => label.trim() === 'Icon';
+/** Labels whose label + value render together inside a single tag (colours, font traits). */
+export const isSummaryInTagLabel = (label) => {
+    const trimmed = label.trim();
+    return (isSummaryColorLabel(trimmed) ||
+        isIconSummaryLabel(trimmed) ||
+        trimmed === 'Font Weight' ||
+        trimmed === 'Font Style');
+};
+export const ColorSummarySquare = ({ color, className, }) => (_jsx(Box, { className: className ?? COLOR_SQUARE_CLASS, style: { background: getVariableColor(color) }, "aria-hidden": true }));
+const SummaryIconVisual = ({ icon, value }) => {
+    if (icon) {
+        return (_jsx(AdaptableIconComponent, { icon: { ...icon, size: icon.size ?? 14 } }));
+    }
+    if (value && value in allIcons) {
+        return (_jsx(Icon, { "aria-hidden": true, name: value, size: 14, className: "twa:shrink-0" }));
+    }
+    return null;
+};
+const isSummaryIconVisualAvailable = (icon, value) => Boolean(icon || (value && value in allIcons));
+const isFontWeightLabel = (label) => label.trim() === 'Font Weight';
+const isFontStyleLabel = (label) => label.trim() === 'Font Style';
+export const renderSummaryLabelValueTagContent = (label, value, icon) => {
+    if (isSummaryColorLabel(label)) {
+        return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1.5", children: [label, _jsx(ColorSummarySquare, { color: value })] }));
+    }
+    if (isIconSummaryLabel(label)) {
+        if (isSummaryIconVisualAvailable(icon, value)) {
+            return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1.5", children: [label, _jsx(SummaryIconVisual, { icon: icon, value: value })] }));
+        }
+    }
+    if (isFontWeightLabel(label) && value === 'Bold') {
+        return _jsx(Box, { className: "twa:font-bold", children: `${label}: ${value}` });
+    }
+    if (isFontStyleLabel(label) && value === 'Italic') {
+        return _jsx(Box, { className: "twa:italic", children: `${label}: ${value}` });
+    }
+    return `${label}: ${value}`;
+};
+export const parseSummaryLabelValueString = (item) => {
+    const colonIndex = item.indexOf(': ');
+    if (colonIndex <= 0) {
+        return null;
+    }
+    return {
+        label: item.slice(0, colonIndex),
+        value: item.slice(colonIndex + 2),
+    };
+};
+export const renderSummaryStringTagContent = (item) => {
+    const parsed = parseSummaryLabelValueString(item);
+    if (!parsed) {
+        return item;
+    }
+    return renderSummaryLabelValueTagContent(parsed.label, parsed.value);
+};
+export const renderSummaryStringTags = (items) => (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: renderSummaryStringTagContent(item) }, item))) }));
+export const summaryStringsToTagContents = (items) => items.map((item) => renderSummaryStringTagContent(item));
+export const renderSummaryLabelValueTags = (items) => (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value, icon }) => (_jsx(Tag, { children: renderSummaryLabelValueTagContent(label, value, icon) }, `${label}-${value}`))) }));

package/src/View/Wizard/WizardTypeSelection.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+export declare const WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS = "twa:flex twa:w-full twa:min-h-[32px] twa:items-center twa:justify-center twa:overflow-hidden twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_35%,transparent)] twa:px-2 twa:py-1";
+export declare const getWizardTypeSelectionGridColumns: (choiceCount: number) => 2 | 3;
+export type WizardTypeSelectionCardProps = {
+    label: string;
+    description?: string;
+    selected: boolean;
+    disabled?: boolean;
+    disabledTooltip?: string;
+    dataName: string;
+    minHeightClassName?: string;
+    onSelect: () => void;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+};
+export declare const WizardTypeSelectionCard: React.FunctionComponent<WizardTypeSelectionCardProps>;
+export type WizardTypeSelectionSectionProps = {
+    headingId: string;
+    title: string;
+    intro: React.ReactNode;
+    columns: 2 | 3;
+    dataName?: string;
+    className?: string;
+    children: React.ReactNode;
+};
+export declare const WizardTypeSelectionSection: React.FunctionComponent<WizardTypeSelectionSectionProps>;
+export type WizardNameFieldSectionProps = {
+    value: string;
+    onChange: (event: React.SyntheticEvent) => void;
+    inputDataName?: string;
+    placeholder?: string;
+};
+export declare const WizardNameFieldSection: React.FunctionComponent<WizardNameFieldSectionProps>;
+export declare const WizardTypeSelectionPreviewFrame: React.FunctionComponent<React.PropsWithChildren>;