@rokt/dcui-orchestrator 0.2.1-rc.83 → 0.2.1-rc.84

package/node_modules/@rokt/dcui-layout-schema/v1.3/index.d.ts

@@ -1,818 +1,2543 @@
+/** A URL value that supports light and dark mode themes. */
 export interface ThemeUrl {
+    /** The URL for light mode. */
     light: string;
+    /** The URL for dark mode. Omit to use the light mode URL in both themes. */
     dark?: null | string;
 }
-export type BackgroundImagePosition = "top" | "right" | "bottom" | "left" | "center" | "top-right" | "top-left" | "bottom-left" | "bottom-right";
-export type BackgroundImageScale = "crop" | "fit" | "fill";
+/**
+ * Positioning of a background image within its container.
+ * Specifies which area of the container the image aligns to.
+ */
+export type BackgroundImagePosition = 
+/** Positions the image at the top center. */
+"top"
+/** Positions the image at the center right. */
+ | "right"
+/** Positions the image at the bottom center. */
+ | "bottom"
+/** Positions the image at the center left. */
+ | "left"
+/** Positions the image at the center of the container. */
+ | "center"
+/** Positions the image at the top right corner. */
+ | "top-right"
+/** Positions the image at the top left corner. */
+ | "top-left"
+/** Positions the image at the bottom left corner. */
+ | "bottom-left"
+/** Positions the image at the bottom right corner. */
+ | "bottom-right";
+/**
+ * How a background image is scaled to fit its container.
+ * Controls the trade-off between covering the container and preserving aspect ratio.
+ */
+export type BackgroundImageScale = 
+/** Scales the image to cover the entire container, cropping edges that overflow. */
+"crop"
+/** Scales the image to fit entirely within the container, potentially leaving empty space. */
+ | "fit"
+/** Stretches the image to fill the container exactly, potentially distorting aspect ratio. */
+ | "fill";
+/**
+ * A background image with themed URL support.
+ * Use this to display an image behind element content with control over positioning and scaling.
+ */
 export interface BackgroundImage {
+    /** The image URL. Uses themed values for light/dark mode. */
     url: ThemeUrl;
+    /** Where the image is positioned within the element. */
     position?: null | BackgroundImagePosition;
+    /** How the image is scaled to fit the element. */
     scale?: null | BackgroundImageScale;
 }
+/**
+ * A color value that supports light and dark mode themes. Always provide the light mode value.
+ * Provide dark mode only if the color should differ from light mode.
+ * Colors are hex strings in `#RRGGBB` or `#AARRGGBB` format. NOTE: the alpha channel comes
+ * BEFORE the RGB channels (e.g. `#80000000` for 50% transparent black), unlike CSS where alpha is last.
+ */
 export interface ThemeColor {
+    /** The color hex code for light mode. Format: `#RRGGBB` or `#AARRGGBB` (e.g. "#FF0000", "#80000000"). */
     light: string;
+    /** The color hex code for dark mode. Omit to use the light mode value in both themes. */
     dark?: null | string;
 }
+/**
+ * Background styling properties for elements.
+ * All fields are optional. Only include the properties you want to override.
+ */
 export interface BackgroundStylingProperties {
+    /** The background fill color. */
     backgroundColor?: null | ThemeColor;
+    /** A background image to display behind the element content. */
     backgroundImage?: null | BackgroundImage;
 }
+/** A styling block that defines styles for different interaction states. The 'default' state is required; other states are optional and override default styles when active. */
 export interface BasicStateStylingBlock<StyleProperties> {
+    /** The base styles applied in the normal state. This is always required. */
     default: StyleProperties;
+    /** Styles applied when the element is being pressed/clicked. Only applicable to interactive elements. */
     pressed?: null | StyleProperties;
+    /** Styles applied when the cursor is over the element. Only applicable to interactive elements. */
     hovered?: null | StyleProperties;
+    /** Styles applied when the element has keyboard focus. */
     focussed?: null | StyleProperties;
+    /** Styles applied when the element is disabled. */
     disabled?: null | StyleProperties;
 }
-export type DimensionWidthValue = {
+/**
+ * Width value specification. MUST be an object with 'type' and 'value' properties.
+ * Do NOT use bare numbers or CSS strings. Example: {"type": "percentage", "value": 100}.
+ */
+export type DimensionWidthValue = 
+/** A fixed width in platform units (px on Web, pt on iOS, dp on Android). Value: {"type": "fixed", "value": <number>}. */
+{
     type: "fixed";
     value: number;
-} | {
+}
+/** A percentage of the parent container width. Value: {"type": "percentage", "value": <0-100>}. */
+ | {
     type: "percentage";
     value: number;
-} | {
+}
+/** Sizes to fit content. Value: {"type": "fit", "value": "wrap-content" or "fit-width"}. */
+ | {
     type: "fit";
     value: DimensionWidthFitValue;
 };
-export type DimensionHeightValue = {
+/**
+ * Height value specification. MUST be an object with 'type' and 'value' properties.
+ * Do NOT use bare numbers or CSS strings. Example: {"type": "fixed", "value": 200}.
+ */
+export type DimensionHeightValue = 
+/** A fixed height in platform units (px on Web, pt on iOS, dp on Android). Value: {"type": "fixed", "value": <number>}. */
+{
     type: "fixed";
     value: number;
-} | {
+}
+/** A percentage of the parent container height. Value: {"type": "percentage", "value": <0-100>}. */
+ | {
     type: "percentage";
     value: number;
-} | {
+}
+/** Sizes to fit content. Value: {"type": "fit", "value": "wrap-content" or "fit-height"}. */
+ | {
     type: "fit";
     value: DimensionHeightFitValue;
 };
+/**
+ * Dimension and size styling properties. Numeric values are in platform units (px on Web, pt on iOS, dp on Android). Plain numbers (e.g. minWidth: 100)
+ * while width/height use typed objects. Do NOT use bare numbers for width or height.
+ * All fields are optional. Only include the properties you want to override.
+ */
 export interface DimensionStylingProperties {
+    /** Minimum width in platform units. */
     minWidth?: null | number;
+    /** Maximum width in platform units. */
     maxWidth?: null | number;
+    /**
+     * The width value. MUST be a typed object, e.g. {"type": "percentage", "value": 100}.
+     * Do NOT use bare numbers.
+     */
     width?: null | DimensionWidthValue;
+    /** Minimum height in platform units. */
     minHeight?: null | number;
+    /** Maximum height in platform units. */
     maxHeight?: null | number;
+    /**
+     * The height value. MUST be a typed object, e.g. {"type": "fixed", "value": 200}.
+     * Do NOT use bare numbers.
+     */
     height?: null | DimensionHeightValue;
+    /** Rotation around the z-axis in degrees. */
     rotateZ?: null | number;
 }
-export type FlexAlignment = "center" | "flex-start" | "flex-end" | "stretch";
+/** Cross-axis alignment options for flex containers and flex children. */
+export type FlexAlignment = 
+/** Centers items along the cross axis. */
+"center"
+/** Aligns items to the start of the cross axis. */
+ | "flex-start"
+/** Aligns items to the end of the cross axis. */
+ | "flex-end"
+/** Stretches items to fill the cross axis. */
+ | "stretch";
+/**
+ * Properties that control how this element behaves as a child within a flex container (Row or Column).
+ * All fields are optional. Only include the properties you want to override.
+ */
 export interface FlexChildStylingProperties {
+    /**
+     * The flex grow weight. Determines how remaining space is distributed.
+     * A child with weight 2 gets twice the extra space as one with weight 1.
+     */
     weight?: null | number;
+    /** The visual order of this child within its container. Lower values appear first. */
     order?: null | number;
+    /** Overrides the parent container's alignItems for this specific child. */
     alignSelf?: null | FlexAlignment;
 }
+/**
+ * Spacing properties for padding, margin and offset.
+ * Values are specified as space-separated strings of numeric values in platform units (px on Web, pt on iOS, dp on Android) following CSS shorthand.
+ * All fields are optional. Only include the properties you want to override.
+ */
 export interface SpacingStylingProperties {
+    /**
+     * Internal spacing between the element border and its content. Specified as a
+     * space-separated string of numeric values following CSS shorthand: '10' for all sides,
+     * '10 20' for vertical/horizontal, '10 20 10 20' for top/right/bottom/left.
+     */
     padding?: null | string;
+    /** External spacing around the outside of the element border. Same format as padding. */
     margin?: null | string;
+    /** Positional offset from the element's normal position. Same format as padding. */
     offset?: null | string;
 }
-export type FontWeight = "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
-export type FontJustification = "left" | "right" | "center" | "start" | "end" | "justify";
-export type FontBaselineAlignment = "super" | "sub" | "baseline";
-export type FontStyle = "normal" | "italic";
-export type TextTransform = "capitalize" | "uppercase" | "lowercase" | "none";
-export type TextDecoration = "underline" | "strike-through" | "none";
+/**
+ * The weight (boldness) of the font. Values are CSS-standard numeric weights.
+ * MUST be one of the predefined weight values. Do NOT use arbitrary numbers.
+ */
+export type FontWeight = 
+/** Thin (Hairline). The lightest available weight. */
+"100"
+/** Extra Light (Ultra Light). */
+ | "200"
+/** Light. */
+ | "300"
+/** Normal / Regular. The default font weight. */
+ | "400"
+/** Medium. Slightly bolder than normal. */
+ | "500"
+/** Semi Bold (Demi Bold). */
+ | "600"
+/** Bold. */
+ | "700"
+/** Extra Bold (Ultra Bold). */
+ | "800"
+/** Black (Heavy). The boldest available weight. */
+ | "900";
+/**
+ * Horizontal text alignment within the text element.
+ * MUST use one of the specified alignment values. Do NOT use CSS text-align strings directly.
+ */
+export type FontJustification = 
+/** Aligns text to the left edge. */
+"left"
+/** Aligns text to the right edge. */
+ | "right"
+/** Centers text horizontally. */
+ | "center"
+/** Aligns text to the start edge (left in LTR, right in RTL). */
+ | "start"
+/** Aligns text to the end edge (right in LTR, left in RTL). */
+ | "end"
+/** Stretches text so each line fills the full width, adjusting spacing between words. */
+ | "justify";
+/**
+ * Vertical alignment of text relative to the baseline.
+ * Use this to position text as superscript, subscript, or at the normal baseline.
+ */
+export type FontBaselineAlignment = 
+/** Raises text above the baseline (superscript). */
+"super"
+/** Lowers text below the baseline (subscript). */
+ | "sub"
+/** Aligns text to the normal baseline position. */
+ | "baseline";
+/**
+ * The style of the font.
+ * Controls whether text is rendered upright or italicised.
+ */
+export type FontStyle = 
+/** Standard upright text. */
+"normal"
+/** Italicised text. */
+ | "italic";
+/**
+ * Controls text capitalisation.
+ * Applied as a visual transform; does not alter the underlying text data.
+ */
+export type TextTransform = 
+/** Capitalises the first letter of each word. */
+"capitalize"
+/** Transforms all text to uppercase. */
+ | "uppercase"
+/** Transforms all text to lowercase. */
+ | "lowercase"
+/** No transformation applied. */
+ | "none";
+/**
+ * Decorative line applied to text.
+ * Use to add visual emphasis such as underline or strikethrough.
+ */
+export type TextDecoration = 
+/** Adds a line beneath the text. */
+"underline"
+/** Adds a line through the middle of the text. */
+ | "strike-through"
+/** No decoration applied. */
+ | "none";
+/**
+ * Typography styling properties for text elements.
+ * All fields are optional. Only include the properties you want to override.
+ */
 export interface TextStylingProperties {
+    /** The text color. Uses themed values for light/dark mode support. */
     textColor?: null | ThemeColor;
+    /** Font size in platform units (px on Web, pt on iOS, dp on Android). */
     fontSize?: null | number;
+    /** The font family name. Use 'rokt-icons' for icon fonts. */
     fontFamily?: null | string;
+    /** The weight (boldness) of the font. */
     fontWeight?: null | FontWeight;
+    /** Line height in platform units. Controls the spacing between lines of text. */
     lineHeight?: null | number;
+    /** Horizontal text alignment within the element. */
     horizontalTextAlign?: null | FontJustification;
+    /** Vertical alignment of text relative to the baseline. */
     baselineTextAlign?: null | FontBaselineAlignment;
+    /** Normal or italic text rendering. */
     fontStyle?: null | FontStyle;
+    /** Controls automatic text capitalisation. */
     textTransform?: null | TextTransform;
+    /** Additional spacing between characters in platform units. */
     letterSpacing?: null | number;
+    /** Decorative line applied to text (underline, strikethrough). */
     textDecoration?: null | TextDecoration;
+    /** Maximum number of lines to display. Text beyond this limit is truncated. */
     lineLimit?: null | number;
 }
+/** Visual styles for the BasicText node. */
 export interface BasicTextStyle {
+    /** Width, height and rotation properties. */
     dimension?: null | DimensionStylingProperties;
+    /** Properties controlling behaviour as a flex child. */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding, margin and offset properties. */
     spacing?: null | SpacingStylingProperties;
+    /** Background color and image properties. */
     background?: null | BackgroundStylingProperties;
+    /** Typography properties. */
     text?: null | TextStylingProperties;
 }
+/** Style elements for the BasicText node. */
 export interface BasicTextElements {
+    /** Style blocks for the node's primary element. Array represents breakpoint-specific styles. */
     own: BasicStateStylingBlock<BasicTextStyle>[];
 }
+/** The top-level style object for a node. Contains element styling and optional conditional transitions. */
 export interface LayoutStyle<ElementsStyles, ConditionalTransitionsStyles> {
+    /** Defines the visual styles for each styleable element of this node. MUST contain at least an 'own' key with a styling block array. */
     elements?: null | ElementsStyles;
+    /** Optional style transitions that are applied when runtime conditions (predicates) are met. */
     conditionalTransitions?: null | ConditionalTransitionsStyles;
 }
+/** Defines a style transition that is applied when the specified predicates evaluate to true. */
 export interface ConditionalStyleTransition<Styles, Predicates> {
+    /** The list of conditions that must all be true for this transition to apply. */
     predicates: Predicates[];
+    /** The transition duration in milliseconds. */
     duration: number;
+    /** The style properties to apply when all predicates are met. */
     value: Styles;
 }
+/** Renders a paragraph of plain text. Use for simple text content. For text with HTML formatting use RichText instead. */
 export interface BasicTextModel<Predicates> {
+    /** Visual styles for the text element. */
     styles?: null | LayoutStyle<BasicTextElements, ConditionalStyleTransition<BasicTextTransitions, Predicates>>;
+    /** The text content to display. Supports data binding placeholders in the format %^DATA.key^% for dynamic creative content. */
     value: string;
 }
+/** Transition definitions for the BasicText node. */
 export interface BasicTextTransitions {
+    /** Transition properties for the primary element. */
     own?: null | BasicTextStyle;
 }
-export type BorderStyle = "solid" | "dashed";
+/**
+ * The visual style of the border line.
+ * MUST be one of the supported values. Do NOT use CSS border-style strings directly.
+ */
+export type BorderStyle = 
+/** A solid continuous border line. */
+"solid"
+/** A dashed border line. */
+ | "dashed";
+/**
+ * Border styling properties for elements.
+ * All fields are optional. Only include the properties you want to override.
+ */
 export interface BorderStylingProperties {
+    /** Corner radius in platform units (px on Web, pt on iOS, dp on Android). Applies uniformly to all corners. */
     borderRadius?: null | number;
+    /** The border color. Uses themed values for light/dark mode support. */
     borderColor?: null | ThemeColor;
+    /**
+     * Border width specified as a space-separated string of numeric values in platform units.
+     * Follows CSS shorthand: '2' for all sides, '2 4' for vertical/horizontal,
+     * '1 2 3 4' for top/right/bottom/left.
+     */
     borderWidth?: null | string;
+    /** The visual style of the border line (solid or dashed). */
     borderStyle?: null | BorderStyle;
 }
-export type FlexJustification = "center" | "flex-start" | "flex-end";
+/** Main-axis justification options for flex containers. */
+export type FlexJustification = 
+/** Centers items along the main axis. */
+"center"
+/** Packs items toward the start of the main axis. */
+ | "flex-start"
+/** Packs items toward the end of the main axis. */
+ | "flex-end";
+/** Defines a box shadow effect. All offset and radius values are in platform units (px on Web, pt on iOS, dp on Android). */
 export interface Shadow {
+    /** Horizontal offset of the shadow. Positive values move the shadow right. */
     offsetX?: null | number;
+    /** Vertical offset of the shadow. Positive values move the shadow down. */
     offsetY?: null | number;
+    /** The blur radius. Higher values create a more diffuse shadow. */
     blurRadius?: null | number;
+    /** The spread radius. Positive values expand the shadow, negative values shrink it. */
     spreadRadius?: null | number;
+    /** The shadow color. */
     color: ThemeColor;
 }
-export type Overflow = "hidden" | "visible";
+/** Controls visibility of content that overflows the container bounds. */
+export type Overflow = 
+/** Content that overflows is clipped and not visible. */
+"hidden"
+/** Content that overflows remains visible outside the container bounds. */
+ | "visible";
+/** Styling properties for container layout behaviour. Only applicable to nodes that contain children. */
 export interface ContainerStylingProperties {
+    /** Controls how children are distributed along the main axis. For a Row this is horizontal, for a Column this is vertical. */
     justifyContent?: null | FlexJustification;
+    /** Controls how children are aligned along the cross axis. For a Row this is vertical, for a Column this is horizontal. */
     alignItems?: null | FlexAlignment;
+    /** Applies a box shadow effect around the container. */
     shadow?: null | Shadow;
+    /** Controls whether content overflowing the container bounds is visible or hidden. */
     overflow?: null | Overflow;
+    /** The gap in platform units between children in the container. */
     gap?: null | number;
+    /** Applies a Gaussian blur effect. Value is the blur radius in platform units. */
     blur?: null | number;
 }
+/**
+ * Available style categories for the BottomSheet content element. Each optional field
+ * enables a specific category of visual styling. Omit a field to leave that category
+ * unstyled.
+ */
 export interface BottomSheetStyles {
+    /**
+     * Layout properties for the flex container (justification, alignment, gap, overflow).
+     * MUST be used to control how children are arranged within the bottom sheet content area.
+     */
     container?: null | ContainerStylingProperties;
+    /**
+     * Background color and image properties. Use to set a solid color, gradient, or image
+     * behind the bottom sheet content.
+     */
     background?: null | BackgroundStylingProperties;
+    /**
+     * Border radius, color, width and style properties. Use to add visible borders or
+     * rounded corners to the bottom sheet content area. Typically top corners are rounded.
+     */
     border?: null | BorderStylingProperties;
+    /**
+     * Width, height and rotation properties. Use to explicitly size the bottom sheet content
+     * area. Do NOT set width/height if the bottom sheet should size to its content.
+     */
     dimension?: null | DimensionStylingProperties;
+    /**
+     * Properties controlling this element's behaviour as a child of a flex container.
+     * Use to set flex-grow, flex-shrink, flex-basis, and align-self.
+     */
     flexChild?: null | FlexChildStylingProperties;
+    /**
+     * Padding, margin and offset properties. Use to add spacing inside or outside the
+     * bottom sheet content area.
+     */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Style categories for the BottomSheet wrapper (backdrop) element. Controls the appearance
+ * of the area behind the bottom sheet content.
+ */
 export interface BottomSheetWrapperStyles {
+    /** Layout properties for the wrapper container that positions the bottom sheet content. */
     container?: null | ContainerStylingProperties;
+    /**
+     * Background color for the backdrop. Typically a semi-transparent color (using `#AARRGGBB`
+     * format, e.g. `#80000000`) to dim the content behind the bottom sheet.
+     */
     background?: null | BackgroundStylingProperties;
 }
+/**
+ * Styleable elements of the BottomSheet node. The BottomSheet has two styleable elements:
+ * its own content area and its wrapper (backdrop).
+ */
 export interface BottomSheetElements {
+    /**
+     * Style blocks for the bottom sheet content area. The array represents
+     * breakpoint-specific styles: first item is the default (no breakpoint), subsequent
+     * items correspond to breakpoints in ascending order. MUST contain at least one item
+     * for the default style.
+     */
     own: BasicStateStylingBlock<BottomSheetStyles>[];
+    /**
+     * Style blocks for the bottom sheet wrapper (backdrop). The array represents
+     * breakpoint-specific styles: first item is the default, subsequent items correspond
+     * to breakpoints in ascending order.
+     */
     wrapper: BasicStateStylingBlock<BottomSheetWrapperStyles>[];
 }
+/**
+ * A modal container that slides up from the bottom of the screen. Use for contextual actions,
+ * forms, or supplementary content that does not require full-screen takeover. The bottom
+ * sheet appears with a backdrop behind it. Do NOT use BottomSheet for persistent content;
+ * use a regular Column or ScrollableColumn instead.
+ */
 export interface BottomSheetModel<Children, Predicates> {
+    /**
+     * If true, clicking the backdrop area closes the bottom sheet. MUST be set to true when
+     * the bottom sheet is dismissible. Set to false when the user MUST interact with the
+     * bottom sheet content before proceeding.
+     */
     allowBackdropToClose: boolean;
+    /**
+     * Accessibility label for screen readers. MUST be set to describe the purpose of the
+     * bottom sheet (e.g., "Share options" or "Filter settings").
+     */
     a11yLabel?: null | string;
+    /**
+     * Visual styles for this bottom sheet. See styling documentation for the structure. Omit
+     * to use default (unstyled) rendering.
+     */
     styles?: null | LayoutStyle<BottomSheetElements, ConditionalStyleTransition<BottomSheetTransitions, Predicates>>;
+    /** The content displayed within the bottom sheet. */
     children: Children[];
 }
+/**
+ * Transition styles for the BottomSheet node. Use to animate style changes smoothly,
+ * particularly the slide-up entrance animation.
+ */
 export interface BottomSheetTransitions {
+    /**
+     * Transition properties for the bottom sheet content area. Specifies which style
+     * properties should animate and their duration/easing when values change.
+     */
     own?: null | BottomSheetStyles;
+    /** Transition properties for the bottom sheet wrapper (backdrop). */
     wrapper?: null | BottomSheetWrapperStyles;
 }
-export type OrderableWhenCondition = "is" | "is-not" | "is-below" | "is-above";
+/**
+ * Condition operators for numeric/orderable comparisons. Use these to compare
+ * values that have a natural ordering (numbers, positions, breakpoints).
+ * Serialized as kebab-case strings: "is", "is-not", "is-below", "is-above".
+ */
+export type OrderableWhenCondition = 
+/** True when the value equals the specified value. */
+"is"
+/** True when the value does not equal the specified value. */
+ | "is-not"
+/** True when the value is less than the specified value. */
+ | "is-below"
+/** True when the value is greater than the specified value. */
+ | "is-above";
+/**
+ * Tests the viewport width against a breakpoint value. Use for
+ * responsive layouts that adapt to different screen sizes. The value MUST
+ * be a string representation of a number in platform units.
+ */
 export interface BreakpointPredicate {
+    /** The comparison operator. Use "is-above" or "is-below" for responsive breakpoints. */
     condition: OrderableWhenCondition;
+    /**
+     * The breakpoint width in platform units to compare against. MUST be a string
+     * representation of a number, e.g. "768".
+     */
     value: string;
 }
+/** A styling block with only a default state. Used for non-interactive elements. */
 export interface StatelessStylingBlock<StyleProperties> {
+    /** The styles to apply. Always required. */
     default: StyleProperties;
 }
+/**
+ * Visual style properties for the CarouselDistribution container.
+ * Contains the standard style categories: container layout, background colors,
+ * border appearance, dimensions, flex child positioning, and spacing.
+ */
 export interface CarouselDistributionStyles {
+    /** Container layout styles (e.g. flex direction, alignment). */
     container?: null | ContainerStylingProperties;
+    /** Background color and gradient styles. */
     background?: null | BackgroundStylingProperties;
+    /** Border width, color, and radius styles. */
     border?: null | BorderStylingProperties;
+    /** Width and height dimension styles. */
     dimension?: null | DimensionStylingProperties;
+    /** Flex child sizing and alignment styles (grow, shrink, align-self). */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding and margin spacing styles. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styling elements for the CarouselDistribution container.
+ * The `own` array contains stateless styling blocks applied to the carousel container itself.
+ */
 export interface CarouselDistributionElements {
+    /** Array of stateless styling blocks for the carousel container. */
     own: StatelessStylingBlock<CarouselDistributionStyles>[];
 }
-export type PeekThroughSize = {
+/**
+ * The size of the peek-through area showing adjacent carousel items.
+ * Controls how much of the next/previous items are visible at the edges.
+ */
+export type PeekThroughSize = 
+/** A fixed size in platform units (px on Web, pt on iOS, dp on Android) for the peek-through area. */
+{
     type: "Fixed";
     value: number;
-} | {
+}
+/** A percentage-based size for the peek-through area, relative to the carousel width. */
+ | {
     type: "Percentage";
     value: number;
 };
+/**
+ * Presents offers in a horizontally scrollable carousel.
+ * Used EXCLUSIVELY in the Outer Layout. This is the container into which offers (Layout Variants) are rendered.
+ * Users can swipe left/right to browse offers.
+ *
+ * Use `viewableItems` to control how many items are visible at once per breakpoint.
+ * Use `peekThroughSize` to hint that more items exist by showing partial adjacent items.
+ */
 export interface CarouselDistributionModel<Predicates> {
+    /**
+     * Configuration for how many items are visible at once.
+     * Provided as an array of values for different breakpoints.
+     */
     viewableItems: number[];
+    /**
+     * How much of the next/previous items peek into view.
+     * Provided as an array of PeekThroughSize values for different breakpoints.
+     * Use Fixed for absolute values in platform units or Percentage for relative values.
+     */
     peekThroughSize: PeekThroughSize[];
+    /**
+     * Visual styles for the carousel container.
+     * Uses the LayoutStyle wrapper with conditional style transitions.
+     */
     styles?: null | LayoutStyle<CarouselDistributionElements, ConditionalStyleTransition<CarouselDistributionTransitions, Predicates>>;
 }
+/** Transition styles for animating CarouselDistribution style changes. */
 export interface CarouselDistributionTransitions {
+    /** Transition properties for the carousel container's own styles. */
     own?: null | CarouselDistributionStyles;
 }
+/**
+ * Visual style properties for a catalog response button.
+ * Controls the button's layout, appearance, and sizing.
+ */
 export interface CatalogResponseButtonStyles {
+    /** Layout properties for the flex container. */
     container?: null | ContainerStylingProperties;
+    /** Background color and image properties. */
     background?: null | BackgroundStylingProperties;
+    /** Border radius, color, width and style. */
     border?: null | BorderStylingProperties;
+    /** Width, height and rotation properties. */
     dimension?: null | DimensionStylingProperties;
+    /** Properties controlling behaviour as a flex child. */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding, margin and offset properties. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Breakpoint-specific style elements for a catalog response button.
+ * Allows different visual treatments at different screen sizes and interaction states.
+ */
 export interface CatalogResponseButtonElements {
+    /** Style blocks for the node's primary element. Array represents breakpoint-specific styles. */
     own: BasicStateStylingBlock<CatalogResponseButtonStyles>[];
 }
+/**
+ * A response button for catalog/add-to-cart interactions. Similar to CreativeResponse but
+ * designed for product catalog flows. When tapped, it sends a response keyed by `responseKey`
+ * back to the server to advance the catalog interaction.
+ */
 export interface CatalogResponseButtonModel<Children, Predicates> {
+    /**
+     * Responsive and conditional styling for this button, including breakpoint-specific
+     * element styles and animated transitions.
+     */
     styles?: null | LayoutStyle<CatalogResponseButtonElements, ConditionalStyleTransition<CatalogResponseButtonTransitions, Predicates>>;
+    /**
+     * Child nodes rendered inside this button. Typically contains text labels or icons
+     * describing the action (e.g., "Add to Cart", product name).
+     */
     children: Children[];
 }
+/** Transition properties for animating style changes on a catalog response button. */
 export interface CatalogResponseButtonTransitions {
+    /** Transition properties for the primary element. */
     own?: null | CatalogResponseButtonStyles;
 }
+/**
+ * Visual style properties for the stacked collection container.
+ * Controls the layout and appearance of the outer wrapper that holds
+ * the stacked catalog item cards.
+ */
 export interface CatalogStackedCollectionStyles {
+    /** Layout properties for the flex container. */
     container?: null | ContainerStylingProperties;
+    /** Background color and image properties. */
     background?: null | BackgroundStylingProperties;
+    /** Border radius, color, width and style. */
     border?: null | BorderStylingProperties;
+    /** Width, height and rotation properties. */
     dimension?: null | DimensionStylingProperties;
+    /** Properties controlling behaviour as a flex child. */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding, margin and offset properties. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Breakpoint-specific style elements for a catalog stacked collection.
+ * Uses stateless styling blocks since this is a static container without
+ * interactive states.
+ */
 export interface CatalogStackedCollectionElements {
+    /** Style blocks for the node's primary element. Array represents breakpoint-specific styles. */
     own: StatelessStylingBlock<CatalogStackedCollectionStyles>[];
 }
+/**
+ * A vertically stacked collection of catalog items for add-to-cart flows.
+ * Renders each catalog product as a card in a vertical stack layout, where items
+ * are presented one below another. The visual content of each item is defined by
+ * a reusable template node that is instantiated per product in the collection.
+ */
 export interface CatalogStackedCollectionModel<NodeTemplate, Predicates> {
+    /**
+     * Responsive and conditional styling for this collection container, including
+     * breakpoint-specific element styles and animated transitions.
+     */
     styles?: null | LayoutStyle<CatalogStackedCollectionElements, ConditionalStyleTransition<CatalogStackedCollectionTransitions, Predicates>>;
+    /**
+     * Template node used to render each catalog item in the stacked collection.
+     * This template is instantiated once per product, with product-specific data
+     * bound at runtime.
+     */
     template: NodeTemplate;
 }
+/** Transition properties for animating style changes on a catalog stacked collection. */
 export interface CatalogStackedCollectionTransitions {
+    /** Transition properties for the primary element. */
     own?: null | CatalogStackedCollectionStyles;
 }
+/**
+ * Visual style properties for the CloseButton.
+ * Contains the standard style categories: container layout, background colors,
+ * border appearance, dimensions, flex child positioning, and spacing.
+ */
 export interface CloseButtonStyles {
+    /** Container layout styles (e.g. flex direction, alignment). */
     container?: null | ContainerStylingProperties;
+    /** Background color and gradient styles. */
     background?: null | BackgroundStylingProperties;
+    /** Border width, color, and radius styles. */
     border?: null | BorderStylingProperties;
+    /** Width and height dimension styles. */
     dimension?: null | DimensionStylingProperties;
+    /** Flex child sizing and alignment styles (grow, shrink, align-self). */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding and margin spacing styles. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styling elements for the CloseButton.
+ * The `own` array contains state-dependent styling blocks (e.g. default, pressed)
+ * applied to the close button itself.
+ */
 export interface CloseButtonElements {
+    /**
+     * Array of state-dependent styling blocks for the close button.
+     * Each block targets a specific interaction state (default, pressed, etc.).
+     */
     own: BasicStateStylingBlock<CloseButtonStyles>[];
 }
+/**
+ * A button that closes/dismisses the layout when clicked.
+ * Typically contains a StaticIcon with the 'Close' icon.
+ *
+ * MUST include child content (usually a StaticIcon with name `"Close"`).
+ * Do NOT use CreativeResponse for dismissal; use CloseButton instead so that
+ * the dismiss action is correctly tracked.
+ */
 export interface CloseButtonModel<Children, Predicates> {
+    /** Visual styles for the close button. Uses the LayoutStyle wrapper with conditional style transitions. */
     styles?: null | LayoutStyle<CloseButtonElements, ConditionalStyleTransition<CloseButtonTransitions, Predicates>>;
+    /**
+     * Child nodes forming the button content. Typically a StaticIcon with name `"Close"`.
+     * MUST contain at least one child to display the close icon or label.
+     */
     children: Children[];
+    /**
+     * Optional dismissal method configuration.
+     * Controls how the dismissal is reported for analytics purposes.
+     */
     dismissalMethod?: null | string;
 }
+/**
+ * Transition styles for animating CloseButton style changes.
+ * Defines which style properties should animate when the button's conditional styles change.
+ */
 export interface CloseButtonTransitions {
+    /** Transition properties for the close button's own styles. */
     own?: null | CloseButtonStyles;
 }
+/**
+ * Available style categories for the Column element. Each optional field enables a specific
+ * category of visual styling. Omit a field to leave that category unstyled.
+ */
 export interface ColumnStyle {
+    /**
+     * Layout properties for the flex container (justification, alignment, gap, overflow).
+     * MUST be used to control how children are arranged within the column.
+     */
     container?: null | ContainerStylingProperties;
+    /**
+     * Background color and image properties. Use to set a solid color, gradient, or image
+     * behind the column content.
+     */
     background?: null | BackgroundStylingProperties;
+    /**
+     * Border radius, color, width and style properties. Use to add visible borders or
+     * rounded corners to the column.
+     */
     border?: null | BorderStylingProperties;
+    /**
+     * Width, height and rotation properties. Use to explicitly size the column or apply
+     * rotation transforms. Do NOT set width/height if the column should size to its content.
+     */
     dimension?: null | DimensionStylingProperties;
+    /**
+     * Properties controlling this element's behaviour as a child of a flex container.
+     * Use to set flex-grow, flex-shrink, flex-basis, and align-self.
+     */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding, margin and offset properties. Use to add spacing inside or outside the column. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styleable elements of the Column node. The Column has a single styleable element: its own
+ * container.
+ */
 export interface ColumnElements {
+    /**
+     * Style blocks for the column container itself. The array represents breakpoint-specific
+     * styles: first item is the default (no breakpoint), subsequent items correspond to
+     * breakpoints in ascending order. MUST contain at least one item for the default style.
+     */
     own: BasicStateStylingBlock<ColumnStyle>[];
 }
+/**
+ * A vertical flex container that arranges its children in a column (top to bottom). Use for
+ * vertical layouts. Children are laid out along the vertical axis by default. To control
+ * alignment and distribution, configure the container styles. Do NOT nest Columns
+ * unnecessarily when a single Column with appropriate styling would suffice.
+ */
 export interface ColumnModel<Children, Predicates> {
+    /**
+     * Accessibility label for screen readers. Omit if the column is purely decorative or its
+     * children already provide sufficient accessible labels. MUST be set when the column
+     * conveys meaning not available from its children alone.
+     */
     a11yLabel?: null | string;
+    /**
+     * Visual styles for this column. See styling documentation for the structure. Omit to use
+     * default (unstyled) rendering.
+     */
     styles?: null | LayoutStyle<ColumnElements, ConditionalStyleTransition<ColumnTransitions, Predicates>>;
+    /**
+     * Child nodes rendered vertically within this column.
+     * Children are laid out top to bottom in source order.
+     */
     children: Children[];
 }
+/** Transition styles for the Column node. Use to animate style changes smoothly. */
 export interface ColumnTransitions {
+    /**
+     * Transition properties for the column container. Specifies which style properties
+     * should animate and their duration/easing when values change.
+     */
     own?: null | ColumnStyle;
 }
-export type ExistenceWhenCondition = "exists" | "not-exists";
+/**
+ * Condition operators for checking whether a value exists. Use these to
+ * conditionally render content based on whether data is present.
+ * Serialized as kebab-case strings: "exists", "not-exists".
+ */
+export type ExistenceWhenCondition = 
+/** True when the value is present and non-empty. */
+"exists"
+/** True when the value is absent or empty. */
+ | "not-exists";
+/**
+ * Tests whether a creative data attribute exists. Use to conditionally show
+ * content only when specific creative data is available. Do NOT use this for
+ * non-creative data checks.
+ */
 export interface CreativeCopyPredicate {
+    /** Whether to check for existence or non-existence of the creative attribute. */
     condition: ExistenceWhenCondition;
+    /**
+     * The dot-notation path to the creative attribute, e.g.
+     * "creative.socialProof.number". MUST use dot notation to reference
+     * nested creative data fields.
+     */
     value: string;
 }
+/**
+ * Visual style properties for the CreativeResponse button.
+ * Contains the standard style categories: container layout, background colors,
+ * border appearance, dimensions, flex child positioning, and spacing.
+ */
 export interface CreativeResponseStyles {
+    /** Container layout styles (e.g. flex direction, alignment). */
     container?: null | ContainerStylingProperties;
+    /** Background color and gradient styles. */
     background?: null | BackgroundStylingProperties;
+    /** Border width, color, and radius styles. */
     border?: null | BorderStylingProperties;
+    /** Width and height dimension styles. */
     dimension?: null | DimensionStylingProperties;
+    /** Flex child sizing and alignment styles (grow, shrink, align-self). */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding and margin spacing styles. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styling elements for the CreativeResponse button.
+ * The `own` array contains state-dependent styling blocks (e.g. default, pressed, disabled)
+ * applied to the button itself.
+ */
 export interface CreativeResponseElements {
+    /**
+     * Array of state-dependent styling blocks for the button.
+     * Each block targets a specific interaction state (default, pressed, disabled, etc.).
+     */
     own: BasicStateStylingBlock<CreativeResponseStyles>[];
 }
-export type LinkOpenTarget = "internally" | "externally";
+/**
+ * Controls how links are opened when clicked. MUST be one of the valid
+ * kebab-case string values. Determines the navigation behavior when a
+ * user activates a link action.
+ */
+export type LinkOpenTarget = 
+/**
+ * Opens the link within the current context (in-app webview or same
+ * window). Use for links that should keep the user in the application.
+ */
+"internally"
+/**
+ * Opens the link in the system browser. Use for external URLs that
+ * should leave the application context.
+ */
+ | "externally";
+/**
+ * A button that triggers a creative response (positive or negative).
+ * This is the primary call-to-action node for offer interactions.
+ * Children inside this node become the button content.
+ *
+ * MUST have a `responseKey` of either `"positive"` or `"negative"`.
+ * Use `"positive"` for accept/CTA buttons and `"negative"` for decline/dismiss buttons.
+ * Do NOT use this node for non-response actions like navigation; use StaticLink or ButtonStateTrigger instead.
+ */
 export interface CreativeResponseModel<Children, Predicates> {
+    /**
+     * The response type. Use `"positive"` for accept/CTA buttons, `"negative"` for decline/dismiss buttons.
+     * Do NOT use arbitrary strings; only `"positive"` and `"negative"` are valid.
+     */
     responseKey: string;
+    /** Visual styles for the button. Uses the LayoutStyle wrapper with conditional style transitions. */
     styles?: null | LayoutStyle<CreativeResponseElements, ConditionalStyleTransition<CreativeResponseTransitions, Predicates>>;
+    /**
+     * Controls how the response URL is opened when clicked.
+     * If omitted, the default link opening behaviour is used.
+     */
     openLinks?: null | LinkOpenTarget;
+    /**
+     * Child nodes that form the button's visible content.
+     * Typically contains a BasicText node with the CTA label.
+     * MUST contain at least one child to display button content.
+     */
     children: Children[];
 }
+/**
+ * Transition styles for animating CreativeResponse style changes.
+ * Defines which style properties should animate when the button's conditional styles change.
+ */
 export interface CreativeResponseTransitions {
+    /** Transition properties for the button's own styles. */
     own?: null | CreativeResponseStyles;
 }
+/**
+ * Tests a custom state value. Custom states are set by state trigger nodes
+ * such as ButtonStateTrigger, ToggleButtonStateTrigger, and similar components.
+ * The value is an integer that represents the current state.
+ */
 export interface CustomStatePredicate {
+    /**
+     * The custom state key to check. MUST match the key used in the
+     * corresponding state trigger node.
+     */
     key: string;
+    /** The comparison operator. */
     condition: OrderableWhenCondition;
+    /** The integer value to compare the custom state against. */
     value: number;
 }
-export type EqualityWhenCondition = "is" | "is-not";
+/**
+ * Condition operators for equality comparisons. Use these when you only need
+ * to test if two values are equal or not equal.
+ * Serialized as kebab-case strings: "is", "is-not".
+ */
+export type EqualityWhenCondition = 
+/** True when the value equals the specified value. */
+"is"
+/** True when the value does not equal the specified value. */
+ | "is-not";
+/**
+ * Tests whether dark mode is active. Use to provide different styling or
+ * content for light and dark modes.
+ */
 export interface DarkModePredicate {
+    /** Use "is" to check if dark mode matches the value, "is-not" for the inverse. */
     condition: EqualityWhenCondition;
+    /**
+     * The boolean value to compare against. Set to true to test for dark mode,
+     * false to test for light mode.
+     */
     value: boolean;
 }
+/** Visual styles for the DataIcon node. */
 export interface DataIconStyles {
+    /** Typography properties. */
     text?: null | TextStylingProperties;
+    /** Width, height and rotation properties. */
     dimension?: null | DimensionStylingProperties;
+    /** Properties controlling behaviour as a flex child. */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding, margin and offset properties. */
     spacing?: null | SpacingStylingProperties;
+    /** Background color and image properties. */
     background?: null | BackgroundStylingProperties;
+    /** Border radius, color, width and style. */
     border?: null | BorderStylingProperties;
 }
+/** Style elements for the DataIcon node. */
 export interface DataIconElements {
+    /** Style blocks for the node's primary element. Array represents breakpoint-specific styles. */
     own: BasicStateStylingBlock<DataIconStyles>[];
 }
+/** Renders an icon from creative data. The icon is resolved from the creative object using the iconKey. */
 export interface DataIconModel<Predicates> {
+    /** Visual styles for the icon. */
     styles?: null | LayoutStyle<DataIconElements, ConditionalStyleTransition<DataIconTransitions, Predicates>>;
+    /** The key identifying which icon from the creative data to display. */
     iconKey: string;
 }
+/** Transition definitions for the DataIcon node. */
 export interface DataIconTransitions {
+    /** Transition properties for the primary element. */
     own?: null | DataIconStyles;
 }
+/** Visual styles for the DataImage node. */
 export interface DataImageStyles {
+    /** Background color and image properties. */
     background?: null | BackgroundStylingProperties;
+    /** Border radius, color, width and style. */
     border?: null | BorderStylingProperties;
+    /** Width, height and rotation properties. */
     dimension?: null | DimensionStylingProperties;
+    /** Properties controlling behaviour as a flex child. */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding, margin and offset properties. */
     spacing?: null | SpacingStylingProperties;
 }
+/** Style elements for the DataImage node. */
 export interface DataImageElements {
+    /** Style blocks for the node's primary element. Array represents breakpoint-specific styles. */
     own: BasicStateStylingBlock<DataImageStyles>[];
 }
+/** Renders an image from creative data. The image URL is resolved from the creative object using the imageKey. Use for offer-specific images. */
 export interface DataImageModel<Predicates> {
+    /** Visual styles for the image element. */
     styles?: null | LayoutStyle<DataImageElements, ConditionalStyleTransition<DataImageTransitions, Predicates>>;
+    /** The key identifying which image from the creative data to display. */
     imageKey: string;
 }
+/** Transition definitions for the DataImage node. */
 export interface DataImageTransitions {
+    /** Transition properties for the primary element. */
     own?: null | DataImageStyles;
 }
-export type DomainStateKey = "offerComplete";
+/**
+ * Keys for accessing application domain state in the full layout schema
+ * context. Domain state represents high-level application state managed by
+ * the host application. Serialized as camelCase strings.
+ */
+export type DomainStateKey = 
+/**
+ * Indicates whether the current offer has been completed by the user.
+ * Use to show post-completion content or hide offer-specific elements.
+ */
+"offerComplete";
+/**
+ * Tests application domain state. Domain state is managed by the host
+ * application and represents high-level application state such as whether
+ * an offer is complete or checkout state.
+ */
 export interface DomainStatePredicate<DomainStateKey> {
+    /** The domain state key to check. */
     key: DomainStateKey;
+    /** The comparison operator. */
     condition: OrderableWhenCondition;
+    /** The integer value to compare the domain state against. */
     value: number;
 }
+/**
+ * An escape hatch node that allows passing raw data through the DCUI schema.
+ * Use sparingly for edge cases not covered by standard nodes.
+ *
+ * Do NOT use this as a general-purpose data container. Prefer standard DCUI nodes
+ * whenever possible. This node bypasses schema validation for its data content.
+ */
 export interface EscapeHatchModel {
+    /**
+     * Raw string data to pass through.
+     * The content is opaque to the DCUI renderer and is passed directly to the client.
+     * MUST be a valid string. The client is responsible for parsing and interpreting the data.
+     */
     data: string;
 }
+/** Settings for a bidirectional fade-in/fade-out transition. */
 export interface FadeInOutTransitionSettings {
+    /**
+     * The transition duration in milliseconds. MUST be a positive integer.
+     * Common values: 200 for fast, 400 for medium, 1000 for slow.
+     */
     duration: number;
 }
+/** Settings for a fade-in (enter) transition. */
 export interface FadeInTransitionSettings {
+    /**
+     * The transition duration in milliseconds. MUST be a positive integer.
+     * Common values: 200 for fast, 400 for medium, 1000 for slow.
+     */
     duration: number;
 }
+/** Settings for a fade-out (exit) transition. */
 export interface FadeOutTransitionSettings {
+    /**
+     * The transition duration in milliseconds. MUST be a positive integer.
+     * Common values: 200 for fast, 400 for medium, 1000 for slow.
+     */
     duration: number;
 }
+/**
+ * Available style categories for the FlowRow element. Each optional field enables a specific
+ * category of visual styling. Omit a field to leave that category unstyled.
+ */
 export interface FlowRowStyle {
+    /**
+     * Layout properties for the flex container (justification, alignment, gap, overflow).
+     * MUST be used to control how children are arranged and wrapped within the flow row.
+     */
     container?: null | ContainerStylingProperties;
+    /**
+     * Background color and image properties. Use to set a solid color, gradient, or image
+     * behind the flow row content.
+     */
     background?: null | BackgroundStylingProperties;
+    /**
+     * Border radius, color, width and style properties. Use to add visible borders or
+     * rounded corners to the flow row.
+     */
     border?: null | BorderStylingProperties;
+    /**
+     * Width, height and rotation properties. Use to explicitly size the flow row or apply
+     * rotation transforms. Do NOT set width/height if the flow row should size to its content.
+     */
     dimension?: null | DimensionStylingProperties;
+    /**
+     * Properties controlling this element's behaviour as a child of a flex container.
+     * Use to set flex-grow, flex-shrink, flex-basis, and align-self.
+     */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding, margin and offset properties. Use to add spacing inside or outside the flow row. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styleable elements of the FlowRow node. The FlowRow has a single styleable element: its
+ * own container.
+ */
 export interface FlowRowElements {
+    /**
+     * Style blocks for the flow row container itself. The array represents breakpoint-specific
+     * styles: first item is the default (no breakpoint), subsequent items correspond to
+     * breakpoints in ascending order. MUST contain at least one item for the default style.
+     */
     own: BasicStateStylingBlock<FlowRowStyle>[];
 }
+/**
+ * A horizontal flex container that wraps children to the next line when they exceed the
+ * container width. Like Row but with line wrapping. Use when you have a dynamic number of
+ * items that should flow naturally across lines (e.g., tags, chips, badges). Do NOT use
+ * FlowRow when you need a single non-wrapping horizontal row; use Row instead.
+ */
 export interface FlowRowModel<Children, Predicates> {
+    /**
+     * Accessibility label for screen readers. Omit if the flow row is purely decorative or
+     * its children already provide sufficient accessible labels. MUST be set when the flow
+     * row conveys meaning not available from its children alone.
+     */
     a11yLabel?: null | string;
+    /**
+     * Visual styles for this flow row. See styling documentation for the structure. Omit to
+     * use default (unstyled) rendering.
+     */
     styles?: null | LayoutStyle<FlowRowElements, ConditionalStyleTransition<FlowRowTransitions, Predicates>>;
+    /**
+     * Child nodes rendered horizontally with wrapping within this flow row. MUST contain at
+     * least one child. Children wrap to the next line when they exceed the container width.
+     */
     children: Children[];
 }
+/** Transition styles for the FlowRow node. Use to animate style changes smoothly. */
 export interface FlowRowTransitions {
+    /**
+     * Transition properties for the flow row container. Specifies which style properties
+     * should animate and their duration/easing when values change.
+     */
     own?: null | FlowRowStyle;
 }
+/**
+ * Visual style properties for the GroupedDistribution container.
+ * Contains the standard style categories: container layout, background colors,
+ * border appearance, dimensions, flex child positioning, and spacing.
+ */
 export interface GroupedDistributionStyles {
+    /** Container layout styles (e.g. flex direction, alignment). */
     container?: null | ContainerStylingProperties;
+    /** Background color and gradient styles. */
     background?: null | BackgroundStylingProperties;
+    /** Border width, color, and radius styles. */
     border?: null | BorderStylingProperties;
+    /** Width and height dimension styles. */
     dimension?: null | DimensionStylingProperties;
+    /** Flex child sizing and alignment styles (grow, shrink, align-self). */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding and margin spacing styles. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styling elements for the GroupedDistribution container.
+ * The `own` array contains stateless styling blocks applied to the grouped container itself.
+ */
 export interface GroupedDistributionElements {
+    /** Array of stateless styling blocks for the grouped container. */
     own: StatelessStylingBlock<GroupedDistributionStyles>[];
 }
-export type Transition = {
+/**
+ * A bidirectional transition that applies both when showing and hiding an
+ * element. MUST be an object with a "type" field and a "settings" field.
+ * Currently only "FadeInOut" is supported.
+ */
+export type Transition = 
+/**
+ * A fade-in/fade-out transition. The element fades in when shown and
+ * fades out when hidden, using the specified duration.
+ */
+{
     type: "FadeInOut";
     settings: FadeInOutTransitionSettings;
 };
+/**
+ * Presents offers in groups, progressing through groups sequentially.
+ * Used EXCLUSIVELY in the Outer Layout. This is the container into which offers (Layout Variants) are rendered.
+ * Each group shows a fixed number of offers at once, and the user advances through groups.
+ *
+ * Pair with ProgressControl nodes for group navigation.
+ * Use `viewableItems` to control how many offers appear per group at each breakpoint.
+ */
 export interface GroupedDistributionModel<Predicates> {
+    /**
+     * Configuration for how many items per group.
+     * Provided as an array of values for different breakpoints.
+     */
     viewableItems: number[];
+    /**
+     * The transition animation between groups.
+     * Defines how the current group exits and the next group enters.
+     */
     transition: Transition;
+    /**
+     * Visual styles for the grouped container.
+     * Uses the LayoutStyle wrapper with conditional style transitions.
+     */
     styles?: null | LayoutStyle<GroupedDistributionElements, ConditionalStyleTransition<GroupedDistributionTransitions, Predicates>>;
 }
+/** Transition styles for animating GroupedDistribution style changes. */
 export interface GroupedDistributionTransitions {
+    /** Transition properties for the grouped container's own styles. */
     own?: null | GroupedDistributionStyles;
 }
+/**
+ * Typography styling for inline text elements. A subset of TextStylingProperties
+ * without line-level controls (lineHeight, horizontalTextAlign, lineLimit).
+ * All fields are optional. Only include the properties you want to override.
+ */
 export interface InlineTextStylingProperties {
+    /** The text color. Uses themed values for light/dark mode support. */
     textColor?: null | ThemeColor;
+    /** Font size in platform units (px on Web, pt on iOS, dp on Android). */
     fontSize?: null | number;
+    /** The font family name. Use 'rokt-icons' for icon fonts. */
     fontFamily?: null | string;
+    /** The weight (boldness) of the font. */
     fontWeight?: null | FontWeight;
+    /** Vertical alignment of text relative to the baseline. */
     baselineTextAlign?: null | FontBaselineAlignment;
+    /** Normal or italic text rendering. */
     fontStyle?: null | FontStyle;
+    /** Controls automatic text capitalisation. */
     textTransform?: null | TextTransform;
+    /** Additional spacing between characters in platform units. */
     letterSpacing?: null | number;
+    /** Decorative line applied to text (underline, strikethrough). */
     textDecoration?: null | TextDecoration;
 }
+/** Inline text styling for elements like links within rich text. */
 export interface InLineTextStyle {
+    /** Typography properties for the inline text element. */
     text: InlineTextStylingProperties;
 }
+/**
+ * Visual style properties for individual indicator items (dots, bars, etc.).
+ * Includes text styling for number-based indicators.
+ */
 export interface IndicatorStyles {
+    /** Container layout styles (e.g. flex direction, alignment). */
     container?: null | ContainerStylingProperties;
+    /** Background color and gradient styles. */
     background?: null | BackgroundStylingProperties;
+    /** Border width, color, and radius styles. */
     border?: null | BorderStylingProperties;
+    /** Width and height dimension styles. */
     dimension?: null | DimensionStylingProperties;
+    /** Flex child sizing and alignment styles (grow, shrink, align-self). */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding and margin spacing styles. */
     spacing?: null | SpacingStylingProperties;
+    /** Text styling for number-based indicators. */
     text?: null | TextStylingProperties;
 }
+/**
+ * Tests application domain state in the full layout schema context. Domain
+ * state is managed by the host application and represents high-level
+ * application state.
+ */
 export interface LayoutSchemaDomainStatePredicate {
+    /** The domain state key to check. */
     key: DomainStateKey;
+    /** The comparison operator. */
     condition: OrderableWhenCondition;
+    /** The integer value to compare the domain state against. */
     value: number;
 }
+/** Platform-specific settings for the layout behaviour. */
 export interface LayoutSettings {
+    /** Whether to automatically close the layout after the user completes the interaction flow. */
     closeOnComplete?: null | boolean;
 }
+/**
+ * Visual style properties for the OneByOneDistribution container.
+ * Contains the standard style categories: container layout, background colors,
+ * border appearance, dimensions, flex child positioning, and spacing.
+ */
 export interface OneByOneDistributionStyles {
+    /** Container layout styles (e.g. flex direction, alignment). */
     container?: null | ContainerStylingProperties;
+    /** Background color and gradient styles. */
     background?: null | BackgroundStylingProperties;
+    /** Border width, color, and radius styles. */
     border?: null | BorderStylingProperties;
+    /** Width and height dimension styles. */
     dimension?: null | DimensionStylingProperties;
+    /** Flex child sizing and alignment styles (grow, shrink, align-self). */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding and margin spacing styles. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styling elements for the OneByOneDistribution container.
+ * The `own` array contains stateless styling blocks applied to the distribution container itself.
+ */
 export interface OneByOneDistributionElements {
+    /** Array of stateless styling blocks for the distribution container. */
     own: StatelessStylingBlock<OneByOneDistributionStyles>[];
 }
+/**
+ * Presents offers one at a time, allowing the user to progress through them sequentially.
+ * Used EXCLUSIVELY in the Outer Layout. This is the container into which offers (Layout Variants) are rendered.
+ *
+ * Pair with ProgressControl nodes to enable forward/backward navigation between offers.
+ * Pair with ProgressIndicator to show the user's current position.
+ * Do NOT use this for displaying all offers at once; use StackedDistribution instead.
+ */
 export interface OneByOneDistributionModel<Predicates> {
+    /**
+     * Visual styles for the distribution container.
+     * Uses the LayoutStyle wrapper with conditional style transitions.
+     */
     styles?: null | LayoutStyle<OneByOneDistributionElements, ConditionalStyleTransition<OneByOneDistributionTransitions, Predicates>>;
+    /**
+     * The animation transition between offers.
+     * Defines how the current offer exits and the next offer enters.
+     */
     transition: Transition;
 }
+/** Transition styles for animating OneByOneDistribution style changes. */
 export interface OneByOneDistributionTransitions {
+    /** Transition properties for the distribution container's own styles. */
     own?: null | OneByOneDistributionStyles;
 }
+/**
+ * Available style categories for the Overlay content element. Each optional field enables a
+ * specific category of visual styling. Omit a field to leave that category unstyled.
+ */
 export interface OverlayStyles {
+    /**
+     * Layout properties for the flex container (justification, alignment, gap, overflow).
+     * MUST be used to control how children are arranged within the overlay content area.
+     */
     container?: null | ContainerStylingProperties;
+    /**
+     * Background color and image properties. Use to set a solid color, gradient, or image
+     * behind the overlay content.
+     */
     background?: null | BackgroundStylingProperties;
+    /**
+     * Border radius, color, width and style properties. Use to add visible borders or
+     * rounded corners to the overlay content area.
+     */
     border?: null | BorderStylingProperties;
+    /**
+     * Width, height and rotation properties. Use to explicitly size the overlay content area.
+     * Do NOT set width/height if the overlay should size to its content.
+     */
     dimension?: null | DimensionStylingProperties;
+    /**
+     * Properties controlling this element's behaviour as a child of a flex container.
+     * Use to set flex-grow, flex-shrink, flex-basis, and align-self.
+     */
     flexChild?: null | FlexChildStylingProperties;
+    /**
+     * Padding, margin and offset properties. Use to add spacing inside or outside the
+     * overlay content area.
+     */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Style categories for the Overlay wrapper (backdrop) element. Controls the appearance of
+ * the area behind the overlay content.
+ */
 export interface OverlayWrapperStyles {
+    /** Layout properties for the wrapper container that positions the overlay content. */
     container?: null | ContainerStylingProperties;
+    /**
+     * Background color for the backdrop. Typically a semi-transparent color (using `#AARRGGBB`
+     * format, e.g. `#80000000`) to dim the content behind the overlay.
+     */
     background?: null | BackgroundStylingProperties;
 }
+/**
+ * Styleable elements of the Overlay node. The Overlay has two styleable elements: its own
+ * content area and its wrapper (backdrop).
+ */
 export interface OverlayElements {
+    /**
+     * Style blocks for the overlay content area. The array represents breakpoint-specific
+     * styles: first item is the default (no breakpoint), subsequent items correspond to
+     * breakpoints in ascending order. MUST contain at least one item for the default style.
+     */
     own: BasicStateStylingBlock<OverlayStyles>[];
+    /**
+     * Style blocks for the overlay wrapper (backdrop). The array represents
+     * breakpoint-specific styles: first item is the default, subsequent items correspond
+     * to breakpoints in ascending order.
+     */
     wrapper: BasicStateStylingBlock<OverlayWrapperStyles>[];
 }
+/**
+ * A modal overlay that appears on top of the main content with a backdrop. Use for dialogs,
+ * confirmations, and modal interactions that require user attention. The overlay blocks
+ * interaction with the content behind it. Do NOT use Overlay for inline content layering;
+ * use ZStack instead.
+ */
 export interface OverlayModel<Children, Predicates> {
+    /**
+     * If true, clicking the backdrop area closes the overlay. MUST be set to true when the
+     * overlay is dismissible. Set to false when the user MUST interact with the overlay
+     * content before proceeding (e.g., mandatory confirmations).
+     */
     allowBackdropToClose: boolean;
+    /**
+     * Accessibility label for screen readers. MUST be set to describe the purpose of the
+     * overlay (e.g., "Confirmation dialog" or "Settings panel").
+     */
     a11yLabel?: null | string;
+    /**
+     * Visual styles for this overlay. See styling documentation for the structure. Omit to
+     * use default (unstyled) rendering.
+     */
     styles?: null | LayoutStyle<OverlayElements, ConditionalStyleTransition<OverlayTransitions, Predicates>>;
+    /** The content displayed within the overlay. */
     children: Children[];
 }
+/** Transition styles for the Overlay node. Use to animate style changes smoothly. */
 export interface OverlayTransitions {
+    /**
+     * Transition properties for the overlay content area. Specifies which style properties
+     * should animate and their duration/easing when values change.
+     */
     own?: null | OverlayStyles;
+    /** Transition properties for the overlay wrapper (backdrop). */
     wrapper?: null | OverlayWrapperStyles;
 }
+/**
+ * Tests the position index of the current item within a collection. Use to
+ * style items differently based on their position (e.g. first item, last item).
+ */
 export interface PositionPredicate {
+    /** The comparison operator. */
     condition: OrderableWhenCondition;
+    /**
+     * The position index to compare against. MUST be a string representation
+     * of a number, e.g. "0" for the first item.
+     */
     value: string;
 }
+/**
+ * Visual style properties for the ProgressControl button.
+ * Contains the standard style categories: container layout, background colors,
+ * border appearance, dimensions, flex child positioning, and spacing.
+ */
 export interface ProgressControlStyle {
+    /** Container layout styles (e.g. flex direction, alignment). */
     container?: null | ContainerStylingProperties;
+    /** Background color and gradient styles. */
     background?: null | BackgroundStylingProperties;
+    /** Border width, color, and radius styles. */
     border?: null | BorderStylingProperties;
+    /** Width and height dimension styles. */
     dimension?: null | DimensionStylingProperties;
+    /** Flex child sizing and alignment styles (grow, shrink, align-self). */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding and margin spacing styles. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styling elements for the ProgressControl button.
+ * The `own` array contains state-dependent styling blocks (e.g. default, pressed, disabled)
+ * applied to the control button itself.
+ */
 export interface ProgressControlElements {
+    /**
+     * Array of state-dependent styling blocks for the control button.
+     * Each block targets a specific interaction state (default, pressed, disabled, etc.).
+     */
     own: BasicStateStylingBlock<ProgressControlStyle>[];
 }
-export type ProgressionDirection = "Forward" | "Backward";
+/** The direction in which the progress control advances offers. */
+export type ProgressionDirection = 
+/** Advance to the next offer or group. */
+"Forward"
+/** Return to the previous offer or group. */
+ | "Backward";
+/**
+ * A button that advances or reverses offer progression.
+ * Used with OneByOneDistribution or GroupedDistribution for navigation.
+ *
+ * MUST specify a `direction` (Forward or Backward).
+ * Pair with a distribution node for the control to have an effect.
+ * Typically contains an arrow icon as child content.
+ */
 export interface ProgressControlModel<Children, Predicates> {
+    /** Visual styles for the control. Uses the LayoutStyle wrapper with conditional style transitions. */
     styles?: null | LayoutStyle<ProgressControlElements, ConditionalStyleTransition<ProgressControlTransitions, Predicates>>;
+    /** The direction to progress. MUST be either Forward or Backward. */
     direction: ProgressionDirection;
+    /**
+     * Child nodes forming the button content (e.g. an arrow icon).
+     * MUST contain at least one child for the control to have visible content.
+     */
     children: Children[];
 }
+/** Transition styles for animating ProgressControl style changes. */
 export interface ProgressControlTransitions {
+    /** Transition properties for the control button's own styles. */
     own?: null | ProgressControlStyle;
 }
+/**
+ * Visual style properties for the ProgressIndicator container.
+ * Contains the standard style categories for the outer indicator wrapper.
+ */
 export interface ProgressIndicatorStyles {
+    /** Container layout styles (e.g. flex direction, alignment). */
     container?: null | ContainerStylingProperties;
+    /** Background color and gradient styles. */
     background?: null | BackgroundStylingProperties;
+    /** Border width, color, and radius styles. */
     border?: null | BorderStylingProperties;
+    /** Width and height dimension styles. */
     dimension?: null | DimensionStylingProperties;
+    /** Flex child sizing and alignment styles (grow, shrink, align-self). */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding and margin spacing styles. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styling elements for the ProgressIndicator.
+ * Contains styling blocks for the container, individual indicators, and special indicator states.
+ */
 export interface ProgressIndicatorElements {
+    /** Array of state-dependent styling blocks for the indicator container. */
     own: BasicStateStylingBlock<ProgressIndicatorStyles>[];
+    /** Styling blocks for each individual indicator item (default state). */
     indicator: BasicStateStylingBlock<IndicatorStyles>[];
+    /**
+     * Optional styling blocks for the currently active indicator.
+     * If omitted, the default indicator styling is used.
+     */
     activeIndicator?: null | BasicStateStylingBlock<IndicatorStyles>[];
+    /**
+     * Optional styling blocks for indicators that have been seen/visited.
+     * If omitted, the default indicator styling is used.
+     */
     seenIndicator?: null | BasicStateStylingBlock<IndicatorStyles>[];
 }
+/**
+ * Displays visual progress indicators (dots, bars) showing the user's position
+ * within a series of offers.
+ *
+ * MUST be paired with a distribution node (OneByOneDistribution, GroupedDistribution, etc.)
+ * to track position. The indicator automatically reflects the current offer position.
+ * Use `indicator` to specify the type (e.g. "dot", "bar", "number").
+ */
 export interface ProgressIndicatorModel<Predicates> {
+    /**
+     * Visual styles for the progress indicators.
+     * Uses the LayoutStyle wrapper with conditional style transitions.
+     */
     styles?: null | LayoutStyle<ProgressIndicatorElements, ConditionalStyleTransition<ProgressIndicatorTransitions, Predicates>>;
+    /**
+     * The type of indicator to display (e.g. "dot", "bar", "number").
+     * MUST be a valid indicator type string.
+     */
     indicator: string;
+    /**
+     * The initial position of the indicator (zero-indexed).
+     * If omitted, defaults to position 0.
+     */
     startPosition?: null | number;
+    /**
+     * If true, the indicator is hidden from screen readers.
+     * Set to true when the indicator is purely decorative.
+     */
     accessibilityHidden?: null | boolean;
 }
+/**
+ * Transition styles for animating ProgressIndicator style changes.
+ * Defines transitions for the container and each indicator state.
+ */
 export interface ProgressIndicatorTransitions {
+    /** Transition properties for the indicator container's own styles. */
     own?: null | ProgressIndicatorStyles;
+    /** Transition properties for the default indicator styles. */
     indicator?: null | IndicatorStyles;
+    /** Transition properties for the active indicator styles. */
     activeIndicator?: null | IndicatorStyles;
+    /** Transition properties for the seen indicator styles. */
     seenIndicator?: null | IndicatorStyles;
 }
+/**
+ * Tests which offer index is currently visible in a carousel or progression.
+ * Use 0 for the first offer, -1 for the last offer.
+ */
 export interface ProgressionPredicate {
+    /** The comparison operator. */
     condition: OrderableWhenCondition;
+    /**
+     * The progression index to compare against. MUST be a string representation
+     * of a number. Use "0" for the first offer, "-1" for the last offer.
+     */
     value: string;
 }
+/** Visual styles for the RichText node. */
 export interface RichTextStyle {
+    /** Width, height and rotation properties. */
     dimension?: null | DimensionStylingProperties;
+    /** Properties controlling behaviour as a flex child. */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding, margin and offset properties. */
     spacing?: null | SpacingStylingProperties;
+    /** Background color and image properties. */
     background?: null | BackgroundStylingProperties;
+    /** Typography properties. */
     text?: null | TextStylingProperties;
 }
+/** Style elements for the RichText node. */
 export interface RichTextElements {
+    /** Style blocks for the node's primary element. Array represents breakpoint-specific styles. */
     own: BasicStateStylingBlock<RichTextStyle>[];
+    /** Style blocks for link elements within the rich text content. */
     link?: null | BasicStateStylingBlock<InLineTextStyle>[];
 }
+/** Renders HTML-formatted text content. Supports `<a>`, `<strong>`, `<em>`, `<br>` and other inline HTML elements. Use BasicText for plain text without HTML. */
 export interface RichTextModel<Predicates> {
+    /** Visual styles for the text element. */
     styles?: null | LayoutStyle<RichTextElements, ConditionalStyleTransition<RichTextTransitions, Predicates>>;
+    /** Controls how links within the rich text are opened when clicked. */
     openLinks?: null | LinkOpenTarget;
+    /** The HTML text content to display. Supports inline HTML tags and data binding placeholders in the format %^DATA.key^% or %^ATTRIBUTE.key^%. */
     value: string;
 }
+/** Transition definitions for the RichText node. */
 export interface RichTextTransitions {
+    /** Transition properties for the primary element. */
     own?: null | RichTextStyle;
+    /** Transition properties for link elements. */
     link?: null | InLineTextStyle;
 }
+/**
+ * The top-level schema structure for an outer layout. Contains the layout tree,
+ * breakpoint definitions, settings and display configuration.
+ */
 export interface RootSchemaModel<Layout, Display, Settings> {
+    /**
+     * Map of breakpoint names to viewport width thresholds in platform units.
+     * Defines responsive breakpoints for the layout.
+     */
     breakpoints: Record<string, number>;
+    /** The root node of the layout tree. */
     layout: Layout;
+    /** Platform-specific layout settings. */
     settings?: null | Settings;
+    /** Controls how the layout is displayed (fullscreen, embedded, etc). */
     display?: null | Display;
 }
+/**
+ * Available style categories for the Row element. Each optional field enables a specific
+ * category of visual styling. Omit a field to leave that category unstyled.
+ */
 export interface RowStyle {
+    /**
+     * Layout properties for the flex container (justification, alignment, gap, overflow).
+     * MUST be used to control how children are arranged within the row.
+     */
     container?: null | ContainerStylingProperties;
+    /**
+     * Background color and image properties. Use to set a solid color, gradient, or image
+     * behind the row content.
+     */
     background?: null | BackgroundStylingProperties;
+    /**
+     * Border radius, color, width and style properties. Use to add visible borders or
+     * rounded corners to the row.
+     */
     border?: null | BorderStylingProperties;
+    /**
+     * Width, height and rotation properties. Use to explicitly size the row or apply rotation
+     * transforms. Do NOT set width/height if the row should size to its content.
+     */
     dimension?: null | DimensionStylingProperties;
+    /**
+     * Properties controlling this element's behaviour as a child of a flex container.
+     * Use to set flex-grow, flex-shrink, flex-basis, and align-self.
+     */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding, margin and offset properties. Use to add spacing inside or outside the row. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styleable elements of the Row node. The Row has a single styleable element: its own
+ * container.
+ */
 export interface RowElements {
+    /**
+     * Style blocks for the row container itself. The array represents breakpoint-specific
+     * styles: first item is the default (no breakpoint), subsequent items correspond to
+     * breakpoints in ascending order. MUST contain at least one item for the default style.
+     */
     own: BasicStateStylingBlock<RowStyle>[];
 }
+/**
+ * A horizontal flex container that arranges its children in a row (left to right). Use for
+ * horizontal layouts. Children are laid out along the horizontal axis by default. To control
+ * alignment and distribution, configure the container styles. Do NOT nest Rows unnecessarily
+ * when a single Row with appropriate styling would suffice.
+ */
 export interface RowModel<Children, Predicates> {
+    /**
+     * Accessibility label for screen readers. Omit if the row is purely decorative or its
+     * children already provide sufficient accessible labels. MUST be set when the row
+     * conveys meaning not available from its children alone.
+     */
     a11yLabel?: null | string;
+    /**
+     * Visual styles for this row. See styling documentation for the structure. Omit to use
+     * default (unstyled) rendering.
+     */
     styles?: null | LayoutStyle<RowElements, ConditionalStyleTransition<RowTransitions, Predicates>>;
+    /**
+     * Child nodes rendered horizontally within this row.
+     * Children are laid out left to right in source order.
+     */
     children: Children[];
 }
+/** Transition styles for the Row node. Use to animate style changes smoothly. */
 export interface RowTransitions {
+    /**
+     * Transition properties for the row container. Specifies which style properties
+     * should animate and their duration/easing when values change.
+     */
     own?: null | RowStyle;
 }
+/**
+ * Available style categories for the ScrollableColumn element. Each optional field enables a
+ * specific category of visual styling. Omit a field to leave that category unstyled.
+ */
 export interface ScrollableColumnStyle {
+    /**
+     * Layout properties for the flex container (justification, alignment, gap, overflow).
+     * MUST be used to control how children are arranged within the scrollable column.
+     */
     container?: null | ContainerStylingProperties;
+    /**
+     * Background color and image properties. Use to set a solid color, gradient, or image
+     * behind the scrollable column content.
+     */
     background?: null | BackgroundStylingProperties;
+    /**
+     * Border radius, color, width and style properties. Use to add visible borders or
+     * rounded corners to the scrollable column.
+     */
     border?: null | BorderStylingProperties;
+    /**
+     * Width, height and rotation properties. MUST set a constrained height for scrolling to
+     * work. Without a height constraint, the container will expand to fit all content and
+     * scrolling will not occur.
+     */
     dimension?: null | DimensionStylingProperties;
+    /**
+     * Properties controlling this element's behaviour as a child of a flex container.
+     * Use to set flex-grow, flex-shrink, flex-basis, and align-self.
+     */
     flexChild?: null | FlexChildStylingProperties;
+    /**
+     * Padding, margin and offset properties. Use to add spacing inside or outside the
+     * scrollable column.
+     */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styleable elements of the ScrollableColumn node. The ScrollableColumn has a single
+ * styleable element: its own container.
+ */
 export interface ScrollableColumnElements {
+    /**
+     * Style blocks for the scrollable column container itself. The array represents
+     * breakpoint-specific styles: first item is the default (no breakpoint), subsequent
+     * items correspond to breakpoints in ascending order. MUST contain at least one item
+     * for the default style.
+     */
     own: BasicStateStylingBlock<ScrollableColumnStyle>[];
 }
+/**
+ * A vertical scrollable container. Children that exceed the container height can be scrolled
+ * into view. Use when content may overflow vertically (e.g., long lists, content feeds).
+ * MUST have a constrained height via dimension styles for scrolling to activate. Do NOT use
+ * ScrollableColumn when a regular Column would suffice (i.e., when content fits without
+ * scrolling).
+ */
 export interface ScrollableColumnModel<Children, Predicates> {
+    /**
+     * Accessibility label for screen readers. Omit if the scrollable column is purely
+     * decorative or its children already provide sufficient accessible labels. MUST be set
+     * when the scrollable column conveys meaning not available from its children alone.
+     */
     a11yLabel?: null | string;
+    /**
+     * Visual styles for this scrollable column. See styling documentation for the structure.
+     * Omit to use default (unstyled) rendering.
+     */
     styles?: null | LayoutStyle<ScrollableColumnElements, ConditionalStyleTransition<ScrollableColumnTransitions, Predicates>>;
+    /**
+     * Child nodes rendered vertically within this scrollable column. MUST contain at least
+     * one child. Children are laid out top to bottom in source order and scroll vertically
+     * when they exceed the container height.
+     */
     children: Children[];
 }
+/** Transition styles for the ScrollableColumn node. Use to animate style changes smoothly. */
 export interface ScrollableColumnTransitions {
+    /**
+     * Transition properties for the scrollable column container. Specifies which style
+     * properties should animate and their duration/easing when values change.
+     */
     own?: null | ScrollableColumnStyle;
 }
+/**
+ * Available style categories for the ScrollableRow element. Each optional field enables a
+ * specific category of visual styling. Omit a field to leave that category unstyled.
+ */
 export interface ScrollableRowStyle {
+    /**
+     * Layout properties for the flex container (justification, alignment, gap, overflow).
+     * MUST be used to control how children are arranged within the scrollable row.
+     */
     container?: null | ContainerStylingProperties;
+    /**
+     * Background color and image properties. Use to set a solid color, gradient, or image
+     * behind the scrollable row content.
+     */
     background?: null | BackgroundStylingProperties;
+    /**
+     * Border radius, color, width and style properties. Use to add visible borders or
+     * rounded corners to the scrollable row.
+     */
     border?: null | BorderStylingProperties;
+    /**
+     * Width, height and rotation properties. MUST set a constrained width for scrolling to
+     * work. Without a width constraint, the container will expand to fit all content and
+     * scrolling will not occur.
+     */
     dimension?: null | DimensionStylingProperties;
+    /**
+     * Properties controlling this element's behaviour as a child of a flex container.
+     * Use to set flex-grow, flex-shrink, flex-basis, and align-self.
+     */
     flexChild?: null | FlexChildStylingProperties;
+    /**
+     * Padding, margin and offset properties. Use to add spacing inside or outside the
+     * scrollable row.
+     */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styleable elements of the ScrollableRow node. The ScrollableRow has a single styleable
+ * element: its own container.
+ */
 export interface ScrollableRowElements {
+    /**
+     * Style blocks for the scrollable row container itself. The array represents
+     * breakpoint-specific styles: first item is the default (no breakpoint), subsequent
+     * items correspond to breakpoints in ascending order. MUST contain at least one item
+     * for the default style.
+     */
     own: BasicStateStylingBlock<ScrollableRowStyle>[];
 }
+/**
+ * A horizontal scrollable container. Children that exceed the container width can be scrolled
+ * into view. Use when content may overflow horizontally (e.g., carousels, horizontal lists).
+ * MUST have a constrained width via dimension styles for scrolling to activate. Do NOT use
+ * ScrollableRow when a regular Row would suffice (i.e., when content fits without scrolling).
+ */
 export interface ScrollableRowModel<Children, Predicates> {
+    /**
+     * Accessibility label for screen readers. Omit if the scrollable row is purely decorative
+     * or its children already provide sufficient accessible labels. MUST be set when the
+     * scrollable row conveys meaning not available from its children alone.
+     */
     a11yLabel?: null | string;
+    /**
+     * Visual styles for this scrollable row. See styling documentation for the structure.
+     * Omit to use default (unstyled) rendering.
+     */
     styles?: null | LayoutStyle<ScrollableRowElements, ConditionalStyleTransition<ScrollableRowTransitions, Predicates>>;
+    /**
+     * Child nodes rendered horizontally within this scrollable row. MUST contain at least
+     * one child. Children are laid out left to right in source order and scroll horizontally
+     * when they exceed the container width.
+     */
     children: Children[];
 }
+/** Transition styles for the ScrollableRow node. Use to animate style changes smoothly. */
 export interface ScrollableRowTransitions {
+    /**
+     * Transition properties for the scrollable row container. Specifies which style
+     * properties should animate and their duration/easing when values change.
+     */
     own?: null | ScrollableRowStyle;
 }
+/**
+ * Visual style properties for the SlideStateTrigger container.
+ * Contains the standard style categories for the slider's outer container.
+ */
 export interface SlideStateTriggerOwnStyles {
+    /** Container layout styles (e.g. flex direction, alignment). */
     container?: null | ContainerStylingProperties;
+    /** Background color and gradient styles. */
     background?: null | BackgroundStylingProperties;
+    /** Border width, color, and radius styles. */
     border?: null | BorderStylingProperties;
+    /** Width and height dimension styles. */
     dimension?: null | DimensionStylingProperties;
+    /** Flex child sizing and alignment styles (grow, shrink, align-self). */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding and margin spacing styles. */
     spacing?: null | SpacingStylingProperties;
 }
+/** Visual style properties for the slider thumb (the draggable handle). */
 export interface SlideStateTriggerThumbStyles {
+    /** Text styling for the thumb label. */
     text?: null | TextStylingProperties;
+    /** Background color and gradient styles for the thumb. */
     background?: null | BackgroundStylingProperties;
+    /** Border width, color, and radius styles for the thumb. */
     border?: null | BorderStylingProperties;
+    /** Width and height dimension styles for the thumb. */
     dimension?: null | DimensionStylingProperties;
+    /** Flex child sizing and alignment styles for the thumb. */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding and margin spacing styles for the thumb. */
     spacing?: null | SpacingStylingProperties;
 }
+/** Visual style properties for the slider label. */
 export interface SlideStateTriggerLabelStyles {
+    /** Text styling for the label. */
     text?: null | TextStylingProperties;
+    /** Padding and margin spacing styles for the label. */
     spacing?: null | SpacingStylingProperties;
 }
+/** Visual style properties for the slider fill (the filled portion of the track). */
 export interface SlideStateTriggerFillStyles {
+    /** Background color and gradient styles for the fill. */
     background?: null | BackgroundStylingProperties;
+    /** Border width, color, and radius styles for the fill. */
     border?: null | BorderStylingProperties;
 }
+/**
+ * Styling elements for the SlideStateTrigger.
+ * Contains styling blocks for the container, thumb, label, and fill sub-elements.
+ */
 export interface SlideStateTriggerElements {
+    /** Array of stateless styling blocks for the slider container. */
     own: StatelessStylingBlock<SlideStateTriggerOwnStyles>[];
+    /** Optional styling blocks for the slider thumb (draggable handle). */
     thumb?: null | StatelessStylingBlock<SlideStateTriggerThumbStyles>[];
+    /** Optional styling blocks for the slider label. */
     label?: null | StatelessStylingBlock<SlideStateTriggerLabelStyles>[];
+    /** Optional styling blocks for the slider fill (filled track portion). */
     fill?: null | StatelessStylingBlock<SlideStateTriggerFillStyles>[];
 }
+/** Configuration for the slider label. */
 export interface SlideStateTriggerLabel {
+    /** Optional text value to display as the slider label. */
     value?: null | string;
 }
+/** Configuration for the slider thumb (draggable handle). */
 export interface SlideStateTriggerThumb {
+    /** Optional icon name to display inside the thumb. */
     icon?: null | string;
 }
+/**
+ * A slider control that updates a custom state value as the user drags.
+ * The slider thumb can be dragged to set the state to a value proportional to the position.
+ * Use with When nodes to conditionally show/hide content based on the slider state.
+ *
+ * MUST provide a `customStateKey` that matches the key in When predicates.
+ * Optionally provide `customStateValue` to set the slider's initial position.
+ */
 export interface SlideStateTriggerModel<Predicates> {
+    /** Visual styles for the slider. Uses the LayoutStyle wrapper with conditional style transitions. */
     styles?: null | LayoutStyle<SlideStateTriggerElements, ConditionalStyleTransition<SlideStateTriggerTransitions, Predicates>>;
+    /** Configuration for the slider thumb (draggable handle). */
     thumb?: null | SlideStateTriggerThumb;
+    /** Configuration for the slider label. */
     label?: null | SlideStateTriggerLabel;
+    /**
+     * The custom state key to update as the slider is dragged.
+     * MUST match the key referenced in When node predicates.
+     */
     customStateKey: string;
+    /**
+     * The initial value of the custom state (slider position).
+     * If omitted, defaults to the minimum position.
+     */
     customStateValue?: null | number;
 }
+/**
+ * Transition styles for animating SlideStateTrigger style changes.
+ * Defines transitions for all slider sub-elements.
+ */
 export interface SlideStateTriggerTransitions {
+    /** Transition properties for the slider container's own styles. */
     own?: null | SlideStateTriggerOwnStyles;
+    /** Transition properties for the thumb styles. */
     thumb?: null | SlideStateTriggerThumbStyles;
+    /** Transition properties for the label styles. */
     label?: null | SlideStateTriggerLabelStyles;
+    /** Transition properties for the fill styles. */
     fill?: null | SlideStateTriggerFillStyles;
 }
+/**
+ * Visual style properties for the StackedDistribution container.
+ * Contains the standard style categories: container layout, background colors,
+ * border appearance, dimensions, flex child positioning, and spacing.
+ */
 export interface StackedDistributionStyles {
+    /** Container layout styles (e.g. flex direction, alignment). */
     container?: null | ContainerStylingProperties;
+    /** Background color and gradient styles. */
     background?: null | BackgroundStylingProperties;
+    /** Border width, color, and radius styles. */
     border?: null | BorderStylingProperties;
+    /** Width and height dimension styles. */
     dimension?: null | DimensionStylingProperties;
+    /** Flex child sizing and alignment styles (grow, shrink, align-self). */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding and margin spacing styles. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styling elements for the StackedDistribution container.
+ * The `own` array contains stateless styling blocks applied to the stacked container itself.
+ */
 export interface StackedDistributionElements {
+    /** Array of stateless styling blocks for the stacked container. */
     own: StatelessStylingBlock<StackedDistributionStyles>[];
 }
+/**
+ * Presents multiple offers stacked vertically, all visible at once.
+ * Used EXCLUSIVELY in the Outer Layout. This is the container into which offers (Layout Variants) are rendered.
+ *
+ * Use this when all offers should be visible simultaneously.
+ * Do NOT use this for sequential one-at-a-time presentation; use OneByOneDistribution instead.
+ */
 export interface StackedDistributionModel<Predicates> {
+    /**
+     * Visual styles for the stacked container.
+     * Uses the LayoutStyle wrapper with conditional style transitions.
+     */
     styles?: null | LayoutStyle<StackedDistributionElements, ConditionalStyleTransition<StackedDistributionTransitions, Predicates>>;
 }
+/** Transition styles for animating StackedDistribution style changes. */
 export interface StackedDistributionTransitions {
+    /** Transition properties for the stacked container's own styles. */
     own?: null | StackedDistributionStyles;
 }
-export type BooleanWhenCondition = "is-true" | "is-false";
+/**
+ * Condition operators for boolean values. Use these to test boolean flags.
+ * Serialized as kebab-case strings: "is-true", "is-false".
+ */
+export type BooleanWhenCondition = 
+/** True when the value is true. */
+"is-true"
+/** True when the value is false. */
+ | "is-false";
+/**
+ * A predicate with a hardcoded boolean value. Useful for enabling or disabling
+ * sections during development or for static feature flags.
+ */
 export interface StaticBooleanPredicate {
+    /** The boolean condition. Use "is-true" or "is-false". */
     condition: BooleanWhenCondition;
+    /** The static boolean value to evaluate against the condition. */
     value: boolean;
 }
+/** Visual styles for the StaticIcon node. MUST include text styles with fontFamily set to 'rokt-icons' to render correctly. */
 export interface StaticIconStyles {
+    /** Typography properties. MUST include fontFamily set to 'rokt-icons' for the icon to render correctly. */
     text?: null | TextStylingProperties;
+    /** Width, height and rotation properties. */
     dimension?: null | DimensionStylingProperties;
+    /** Properties controlling behaviour as a flex child. */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding, margin and offset properties. */
     spacing?: null | SpacingStylingProperties;
+    /** Background color and image properties. */
     background?: null | BackgroundStylingProperties;
+    /** Border radius, color, width and style. */
     border?: null | BorderStylingProperties;
 }
+/** Style elements for the StaticIcon node. */
 export interface StaticIconElements {
+    /** Style blocks for the node's primary element. Array represents breakpoint-specific styles. */
     own: BasicStateStylingBlock<StaticIconStyles>[];
 }
+/** Renders an SVG icon from the Rokt icon font. The icon is selected by name from the available icon set. */
 export interface StaticIconModel<Predicates> {
+    /** Visual styles for the icon. MUST include text styles with fontFamily set to 'rokt-icons' to render correctly. */
     styles?: null | LayoutStyle<StaticIconElements, ConditionalStyleTransition<StaticIconTransitions, Predicates>>;
+    /** The icon name. Available icons include: Car, CreditCard, Ticket, Star, Mobile, Train, Utensils, Calculator, Couch, CheckApproved, Check, Lock, Shield, ThumbUp, ShoppingCart, TrendingUp, Wallet, Luggage, Close, ChevronLeft, ChevronRight, ExpandMore, ExpandLess, ArrowBack, ArrowForward, ArrowUpward, ArrowDownward, Add, Remove, ExternalLink, CircleCheck, Help, Info. */
     name: string;
+    /** Accessibility description of the icon for screen readers. */
     description?: null | string;
 }
+/** Transition definitions for the StaticIcon node. */
 export interface StaticIconTransitions {
+    /** Transition properties for the primary element. */
     own?: null | StaticIconStyles;
 }
+/** Visual styles for the StaticImage node. */
 export interface StaticImageStyles {
+    /** Background color and image properties. */
     background?: null | BackgroundStylingProperties;
+    /** Border radius, color, width and style. */
     border?: null | BorderStylingProperties;
+    /** Width, height and rotation properties. */
     dimension?: null | DimensionStylingProperties;
+    /** Properties controlling behaviour as a flex child. */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding, margin and offset properties. */
     spacing?: null | SpacingStylingProperties;
 }
+/** Style elements for the StaticImage node. */
 export interface StaticImageElements {
+    /** Style blocks for the node's primary element. Array represents breakpoint-specific styles. */
     own: BasicStateStylingBlock<StaticImageStyles>[];
 }
+/** URL configuration for a static image with themed light/dark mode support. */
 export interface StaticImageUrl {
+    /** The image URL for light mode. MUST be a valid URL. */
     light: string;
+    /** The image URL for dark mode. If not provided, the light URL is used for both modes. */
     dark?: null | string;
 }
+/** Renders a static image from a provided URL. Use for images with known URLs (logos, icons, decorative images). */
 export interface StaticImageModel<Predicates> {
+    /** Visual styles for the image element. */
     styles?: null | LayoutStyle<StaticImageElements, ConditionalStyleTransition<StaticImageTransitions, Predicates>>;
+    /** Alt text for accessibility. Describes the image for screen readers. */
     alt?: null | string;
+    /** Title text shown on hover. */
     title?: null | string;
+    /** The image URL with themed light/dark mode support. */
     url: StaticImageUrl;
 }
+/** Transition definitions for the StaticImage node. */
 export interface StaticImageTransitions {
+    /** Transition properties for the primary element. */
     own?: null | StaticImageStyles;
 }
+/**
+ * Visual style properties for the StaticLink.
+ * Contains the standard style categories: container layout, background colors,
+ * border appearance, dimensions, flex child positioning, and spacing.
+ */
 export interface StaticLinkStyles {
+    /** Container layout styles (e.g. flex direction, alignment). */
     container?: null | ContainerStylingProperties;
+    /** Background color and gradient styles. */
     background?: null | BackgroundStylingProperties;
+    /** Border width, color, and radius styles. */
     border?: null | BorderStylingProperties;
+    /** Width and height dimension styles. */
     dimension?: null | DimensionStylingProperties;
+    /** Flex child sizing and alignment styles (grow, shrink, align-self). */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding and margin spacing styles. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styling elements for the StaticLink.
+ * The `own` array contains state-dependent styling blocks (e.g. default, pressed)
+ * applied to the link itself.
+ */
 export interface StaticLinkElements {
+    /**
+     * Array of state-dependent styling blocks for the link.
+     * Each block targets a specific interaction state (default, pressed, etc.).
+     */
     own: BasicStateStylingBlock<StaticLinkStyles>[];
 }
+/**
+ * A clickable link that wraps its children. Opens the specified URL when clicked.
+ *
+ * Use this node for navigation to external URLs. Do NOT use CreativeResponse for link navigation;
+ * CreativeResponse is for offer accept/decline actions only.
+ * The `src` field MUST be a valid URL string.
+ */
 export interface StaticLinkModel<Children, Predicates> {
+    /**
+     * The destination URL to open when the link is clicked.
+     * MUST be a valid URL string (e.g. "https://example.com").
+     */
     src: string;
+    /** Controls how the link URL is opened (e.g. in-app browser, external browser). */
     open: LinkOpenTarget;
+    /** Visual styles for the link. Uses the LayoutStyle wrapper with conditional style transitions. */
     styles?: null | LayoutStyle<StaticLinkElements, ConditionalStyleTransition<StaticLinkTransitions, Predicates>>;
+    /**
+     * Child nodes that form the clickable link content.
+     * MUST contain at least one child for the link to have visible, tappable content.
+     */
     children: Children[];
 }
+/**
+ * Transition styles for animating StaticLink style changes.
+ * Defines which style properties should animate when the link's conditional styles change.
+ */
 export interface StaticLinkTransitions {
+    /** Transition properties for the link's own styles. */
     own?: null | StaticLinkStyles;
 }
+/**
+ * Compares a static string input against a value. Use when you need to
+ * evaluate a known, fixed string against a condition.
+ */
 export interface StaticStringPredicate {
+    /** The static string value to test. */
     input: string;
+    /** The comparison operator. Use "is" or "is-not". */
     condition: EqualityWhenCondition;
+    /** The string to compare against. */
     value: string;
 }
+/**
+ * Visual style properties for the ToggleButtonStateTrigger.
+ * Contains the standard style categories: container layout, background colors,
+ * border appearance, dimensions, flex child positioning, and spacing.
+ */
 export interface ToggleButtonStateTriggerStyle {
+    /** Container layout styles (e.g. flex direction, alignment). */
     container?: null | ContainerStylingProperties;
+    /** Background color and gradient styles. */
     background?: null | BackgroundStylingProperties;
+    /** Border width, color, and radius styles. */
     border?: null | BorderStylingProperties;
+    /** Width and height dimension styles. */
     dimension?: null | DimensionStylingProperties;
+    /** Flex child sizing and alignment styles (grow, shrink, align-self). */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding and margin spacing styles. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styling elements for the ToggleButtonStateTrigger.
+ * The `own` array contains state-dependent styling blocks applied to the toggle button itself.
+ */
 export interface ToggleButtonStateTriggerElements {
+    /** Array of state-dependent styling blocks for the toggle button. */
     own: BasicStateStylingBlock<ToggleButtonStateTriggerStyle>[];
 }
+/**
+ * A toggle button that cycles a custom state between values when clicked.
+ * Each click toggles the state value, typically between 0 and 1.
+ * Use with When nodes to conditionally show/hide content based on the toggled state.
+ *
+ * MUST provide a `customStateKey` that matches the key in When predicates.
+ * Unlike ButtonStateTrigger, this does NOT require a `value` field; it toggles automatically.
+ */
 export interface ToggleButtonStateTriggerModel<Children, Predicates> {
+    /** Visual styles for the toggle button. */
     styles?: null | LayoutStyle<ToggleButtonStateTriggerElements, ConditionalStyleTransition<ToggleButtonStateTriggerTransitions, Predicates>>;
+    /** Child nodes forming the toggle button content. */
     children: Children[];
+    /**
+     * The custom state key to toggle when the button is pressed.
+     * MUST match the key referenced in When node predicates.
+     */
     customStateKey: string;
 }
+/** Transition styles for animating ToggleButtonStateTrigger style changes. */
 export interface ToggleButtonStateTriggerTransitions {
+    /** Transition properties for the toggle button's own styles. */
     own?: null | ToggleButtonStateTriggerStyle;
 }
-export type InTransition = {
+/**
+ * A transition that applies only when an element enters (becomes visible).
+ * MUST be an object with a "type" field and a "settings" field.
+ * Currently only "FadeIn" is supported.
+ */
+export type InTransition = 
+/**
+ * A fade-in transition. The element gradually becomes visible over the
+ * specified duration.
+ */
+{
     type: "FadeIn";
     settings: FadeInTransitionSettings;
 };
-export type OutTransition = {
+/**
+ * A transition that applies only when an element exits (becomes hidden).
+ * MUST be an object with a "type" field and a "settings" field.
+ * Currently only "FadeOut" is supported.
+ */
+export type OutTransition = 
+/**
+ * A fade-out transition. The element gradually becomes invisible over
+ * the specified duration.
+ */
+{
     type: "FadeOut";
     settings: FadeOutTransitionSettings;
 };
+/**
+ * Transition configuration for when visibility changes.
+ * Defines enter and exit animations for the When node's children.
+ */
 export interface WhenTransition {
+    /** Transition animations to play when children become visible (predicates become true). */
     inTransition?: null | InTransition[];
+    /** Transition animations to play when children become hidden (predicates become false). */
     outTransition?: null | OutTransition[];
 }
-export type WhenHidden = "visually" | "functionally";
+/**
+ * Controls the hiding behaviour of When children.
+ * Determines whether hidden children still occupy space in the layout.
+ */
+export type WhenHidden = 
+/**
+ * Children are visually hidden but remain in the layout (take up space).
+ * Use this when you need to preserve layout dimensions even when content is hidden.
+ */
+"visually"
+/**
+ * Children are fully removed from the layout.
+ * They take up no space and do not affect sibling positioning.
+ */
+ | "functionally";
+/**
+ * Conditional rendering node. Shows or hides its children based on predicate conditions.
+ * All predicates MUST evaluate to true for children to be shown (AND logic).
+ *
+ * Use this node to conditionally display content based on custom state, offer count, or other
+ * predicate conditions. Do NOT nest When nodes unnecessarily; combine predicates in a single
+ * When node instead.
+ */
 export interface WhenModel<Children, Predicates> {
+    /**
+     * Array of conditions that MUST ALL be true for children to render.
+     * Uses AND logic: if any predicate is false, children are hidden.
+     * MUST contain at least one predicate.
+     */
     predicates: Predicates[];
+    /** Child nodes to conditionally show or hide based on the predicates. */
     children: Children[];
+    /**
+     * Optional transition animation configuration for when visibility changes.
+     * Controls how children animate in and out when predicates change.
+     */
     transition?: null | WhenTransition;
+    /**
+     * Controls how hidden children are treated in the layout.
+     * If omitted, defaults to functionally hiding (fully removed from layout).
+     */
     hide?: null | WhenHidden;
 }
+/** Styling properties for ZStack container layout. ZStack layers children on top of each other. */
 export interface ZStackContainerStylingProperties {
+    /** Controls horizontal positioning of children within the ZStack. */
     justifyContent?: null | FlexJustification;
+    /** Controls vertical positioning of children within the ZStack. */
     alignItems?: null | FlexAlignment;
+    /** Applies a box shadow effect around the container. */
     shadow?: null | Shadow;
+    /** Controls whether content overflowing the container bounds is visible or hidden. */
     overflow?: null | Overflow;
+    /** Applies a Gaussian blur effect. Value is the blur radius in platform units. */
     blur?: null | number;
 }
+/**
+ * Available style categories for the ZStack element. Each optional field enables a specific
+ * category of visual styling. Omit a field to leave that category unstyled.
+ */
 export interface ZStackStyle {
+    /**
+     * Layout properties for the ZStack container (alignment of stacked children).
+     * MUST be used to control how children are positioned within the stack.
+     */
     container?: null | ZStackContainerStylingProperties;
+    /**
+     * Background color and image properties. Use to set a solid color, gradient, or image
+     * behind the stacked content.
+     */
     background?: null | BackgroundStylingProperties;
+    /**
+     * Border radius, color, width and style properties. Use to add visible borders or
+     * rounded corners to the ZStack.
+     */
     border?: null | BorderStylingProperties;
+    /**
+     * Width, height and rotation properties. Use to explicitly size the ZStack or apply
+     * rotation transforms. Do NOT set width/height if the ZStack should size to its content.
+     */
     dimension?: null | DimensionStylingProperties;
+    /**
+     * Properties controlling this element's behaviour as a child of a flex container.
+     * Use to set flex-grow, flex-shrink, flex-basis, and align-self.
+     */
     flexChild?: null | FlexChildStylingProperties;
+    /** Padding, margin and offset properties. Use to add spacing inside or outside the ZStack. */
     spacing?: null | SpacingStylingProperties;
 }
+/**
+ * Styleable elements of the ZStack node. The ZStack has a single styleable element: its own
+ * container.
+ */
 export interface ZStackElements {
+    /**
+     * Style blocks for the ZStack container itself. The array represents breakpoint-specific
+     * styles: first item is the default (no breakpoint), subsequent items correspond to
+     * breakpoints in ascending order. MUST contain at least one item for the default style.
+     */
     own: BasicStateStylingBlock<ZStackStyle>[];
 }
+/**
+ * A layered container that stacks children on top of each other along the z-axis. Later
+ * children render on top of earlier ones. Use for overlapping content such as badges on
+ * images, text overlays, or layered decorative elements. Do NOT use ZStack for simple
+ * sequential layouts; use Row or Column instead.
+ */
 export interface ZStackModel<Children, Predicates> {
+    /**
+     * Accessibility label for screen readers. Omit if the ZStack is purely decorative or its
+     * children already provide sufficient accessible labels. MUST be set when the ZStack
+     * conveys meaning not available from its children alone.
+     */
     a11yLabel?: null | string;
+    /**
+     * Visual styles for this ZStack. See styling documentation for the structure. Omit to use
+     * default (unstyled) rendering.
+     */
     styles?: null | LayoutStyle<ZStackElements, ConditionalStyleTransition<ZStackTransitions, Predicates>>;
+    /**
+     * Child nodes stacked on top of each other within this ZStack. MUST contain at least one
+     * child. Children are rendered in source order, with later children appearing on top of
+     * earlier ones.
+     */
     children: Children[];
 }
+/** Transition styles for the ZStack node. Use to animate style changes smoothly. */
 export interface ZStackTransitions {
+    /**
+     * Transition properties for the ZStack container. Specifies which style properties
+     * should animate and their duration/easing when values change.
+     */
     own?: null | ZStackStyle;
 }
+/**
+ * Root node types for a catalog stacked collection item template. Must be a Row or Column
+ * that contains CatalogStackedCollectionTemplateNodeChildren.
+ */
 export type CatalogStackedCollectionTemplateNode = {
     type: "Row";
     node: RowModel<CatalogStackedCollectionTemplateNodeChildren, LayoutVariantWhenPredicate>;
@@ -820,6 +2545,11 @@ export type CatalogStackedCollectionTemplateNode = {
     type: "Column";
     node: ColumnModel<CatalogStackedCollectionTemplateNodeChildren, LayoutVariantWhenPredicate>;
 };
+/**
+ * Child node types allowed inside a catalog stacked collection template row or column.
+ * Includes layout containers, text, images, icons, data-bound content, interactive triggers,
+ * catalog response buttons, radio groups, and quantity counters.
+ */
 export type CatalogStackedCollectionTemplateNodeChildren = {
     type: "Row";
     node: RowModel<CatalogStackedCollectionTemplateNodeChildren, LayoutVariantWhenPredicate>;
@@ -869,9 +2599,36 @@ export type CatalogStackedCollectionTemplateNodeChildren = {
     type: "EscapeHatch";
     node: EscapeHatchModel;
 };
-export type DimensionHeightFitValue = "wrap-content" | "fit-height";
-export type DimensionWidthFitValue = "wrap-content" | "fit-width";
-export type LayoutDisplayPreset = "FULLSCREEN" | "EMBEDDED" | "ATTACHED";
+/**
+ * Fit behaviour options for height.
+ * Used as the 'value' inside a {"type": "fit", "value": ...} height specification.
+ */
+export type DimensionHeightFitValue = 
+/** Shrinks to fit the content height. */
+"wrap-content"
+/** Expands to fill the available height. */
+ | "fit-height";
+/**
+ * Fit behaviour options for width.
+ * Used as the 'value' inside a {"type": "fit", "value": ...} width specification.
+ */
+export type DimensionWidthFitValue = 
+/** Shrinks to fit the content width. */
+"wrap-content"
+/** Expands to fill the available width. */
+ | "fit-width";
+/** Controls how the layout is displayed on the page. */
+export type LayoutDisplayPreset = 
+/** Layout covers the full viewport. */
+"FULLSCREEN"
+/** Layout is embedded inline within the page content. */
+ | "EMBEDDED"
+/** Layout is attached/anchored to a specific position. */
+ | "ATTACHED";
+/**
+ * All node types supported in the web platform schema. This is the union type used by SDKs.
+ * Layouts are authored using OuterLayoutSchemaModel or LayoutVariantSchemaModel instead.
+ */
 export type LayoutSchemaModel = {
     type: "Row";
     node: RowModel<LayoutSchemaModel, WhenPredicate>;
@@ -960,6 +2717,11 @@ export type LayoutSchemaModel = {
     type: "EscapeHatch";
     node: EscapeHatchModel;
 };
+/**
+ * Recursive child node types allowed within layout variant containers. Includes all layout
+ * variant nodes such as layout, text, images, data-bound content, interactive triggers,
+ * catalog components, and escape hatches.
+ */
 export type LayoutVariantChildren = {
     type: "Row";
     node: RowModel<LayoutVariantChildren, LayoutVariantWhenPredicate>;
@@ -1018,7 +2780,23 @@ export type LayoutVariantChildren = {
     type: "EscapeHatch";
     node: EscapeHatchModel;
 };
-export type LayoutVariantDomainStateKey = "offerComplete";
+/**
+ * Keys for accessing application domain state in the layout variant (offer
+ * format) context. Serialized as camelCase strings. These are the domain
+ * state keys available when defining conditional rendering within a layout
+ * variant.
+ */
+export type LayoutVariantDomainStateKey = 
+/**
+ * Indicates whether the current offer has been completed by the user.
+ * Use to show post-completion content or hide offer-specific elements.
+ */
+"offerComplete";
+/**
+ * Non-interactive child node types within layout variants. Only allows structural containers,
+ * static/data images, basic text, icons, conditional nodes, and escape hatches. Used as
+ * children of interactive elements like buttons and links in layout variants.
+ */
 export type LayoutVariantNonInteractableChildren = {
     type: "Row";
     node: RowModel<LayoutVariantNonInteractableChildren, LayoutVariantWhenPredicate>;
@@ -1053,6 +2831,10 @@ export type LayoutVariantNonInteractableChildren = {
     type: "EscapeHatch";
     node: EscapeHatchModel;
 };
+/**
+ * Node types valid for use in layout variants (offer formats). Layout variants contain the
+ * offer-specific creative content including images, text, response buttons, and catalog components.
+ */
 export type LayoutVariantSchemaModel = {
     type: "Row";
     node: RowModel<LayoutVariantChildren, LayoutVariantWhenPredicate>;
@@ -1111,34 +2893,63 @@ export type LayoutVariantSchemaModel = {
     type: "EscapeHatch";
     node: EscapeHatchModel;
 };
-export type LayoutVariantWhenPredicate = {
+/**
+ * Predicate types available in the layout variant (offer format) context.
+ * This is a subset of predicates that are valid when defining conditional
+ * rendering within a layout variant. Each predicate MUST include a "type"
+ * field and a "predicate" field.
+ */
+export type LayoutVariantWhenPredicate = 
+/** Tests the viewport width against a breakpoint value. */
+{
     type: "Breakpoint";
     predicate: BreakpointPredicate;
-} | {
+}
+/** Tests the position index of the current item in a collection. */
+ | {
     type: "Position";
     predicate: PositionPredicate;
-} | {
+}
+/** Tests which offer index is currently visible. */
+ | {
     type: "Progression";
     predicate: ProgressionPredicate;
-} | {
+}
+/** Tests whether dark mode is active. */
+ | {
     type: "DarkMode";
     predicate: DarkModePredicate;
-} | {
+}
+/** Tests whether a creative data attribute exists. */
+ | {
     type: "CreativeCopy";
     predicate: CreativeCopyPredicate;
-} | {
+}
+/** Evaluates a hardcoded boolean value. */
+ | {
     type: "StaticBoolean";
     predicate: StaticBooleanPredicate;
-} | {
+}
+/** Tests a custom state value set by state trigger nodes. */
+ | {
     type: "CustomState";
     predicate: CustomStatePredicate;
-} | {
+}
+/** Tests application domain state in the layout variant context. */
+ | {
     type: "DomainState";
     predicate: DomainStatePredicate<LayoutVariantDomainStateKey>;
-} | {
+}
+/** Compares a static string input against a value. */
+ | {
     type: "StaticString";
     predicate: StaticStringPredicate;
 };
+/**
+ * Child node types allowed inside modal containers (Overlay, BottomSheet) in the combined
+ * SDK schema. Includes structural, presentational, distribution, and interactive nodes
+ * but excludes nested modals.
+ */
 export type ModalChildren = {
     type: "Row";
     node: RowModel<ModalChildren, WhenPredicate>;
@@ -1206,6 +3017,11 @@ export type ModalChildren = {
     type: "EscapeHatch";
     node: EscapeHatchModel;
 };
+/**
+ * Child node types allowed inside modal containers (Overlay, BottomSheet) within outer
+ * layouts. Includes structural, presentational, distribution, and interactive nodes scoped
+ * to outer layout predicates, but excludes nested modals.
+ */
 export type ModalOuterChildren = {
     type: "Row";
     node: RowModel<ModalOuterChildren, OuterLayoutWhenPredicate>;
@@ -1273,6 +3089,11 @@ export type ModalOuterChildren = {
     type: "EscapeHatch";
     node: EscapeHatchModel;
 };
+/**
+ * Non-interactive child node types in the combined SDK schema. Only allows structural
+ * containers, static/data images, basic text, icons, conditional nodes, and escape hatches.
+ * Used as children of interactive elements like buttons and links.
+ */
 export type NonInteractableChildren = {
     type: "Row";
     node: RowModel<NonInteractableChildren, WhenPredicate>;
@@ -1307,6 +3128,10 @@ export type NonInteractableChildren = {
     type: "EscapeHatch";
     node: EscapeHatchModel;
 };
+/**
+ * Recursive child node types allowed within outer layout containers. Includes structural,
+ * distribution, navigation, and presentational nodes scoped to outer layout predicates.
+ */
 export type OuterLayoutChildren = {
     type: "Row";
     node: RowModel<OuterLayoutChildren, OuterLayoutWhenPredicate>;
@@ -1374,6 +3199,11 @@ export type OuterLayoutChildren = {
     type: "EscapeHatch";
     node: EscapeHatchModel;
 };
+/**
+ * Non-interactive child node types within outer layouts. Only allows structural containers,
+ * static images, basic text, icons, conditional nodes, and escape hatches. Used as children
+ * of interactive elements like buttons and links in outer layouts.
+ */
 export type OuterLayoutNonInteractableChildren = {
     type: "Row";
     node: RowModel<OuterLayoutNonInteractableChildren, OuterLayoutWhenPredicate>;
@@ -1402,6 +3232,11 @@ export type OuterLayoutNonInteractableChildren = {
     type: "EscapeHatch";
     node: EscapeHatchModel;
 };
+/**
+ * Node types valid for use in outer layouts. Outer layouts define the frame and offer
+ * distribution but do not contain offer-specific content. They include structural containers,
+ * distribution nodes, navigation controls, and close buttons.
+ */
 export type OuterLayoutSchemaModel = {
     type: "Row";
     node: RowModel<OuterLayoutChildren, OuterLayoutWhenPredicate>;
@@ -1475,25 +3310,47 @@ export type OuterLayoutSchemaModel = {
     type: "EscapeHatch";
     node: EscapeHatchModel;
 };
-export type OuterLayoutWhenPredicate = {
+/**
+ * Predicate types available in the outer layout context. This is a more
+ * restricted subset of predicates for use in the outer layout wrapper.
+ * Does NOT include Position, CreativeCopy, or DomainState predicates.
+ * Each predicate MUST include a "type" field and a "predicate" field.
+ */
+export type OuterLayoutWhenPredicate = 
+/** Tests the viewport width against a breakpoint value. */
+{
     type: "Breakpoint";
     predicate: BreakpointPredicate;
-} | {
+}
+/** Tests which offer index is currently visible. */
+ | {
     type: "Progression";
     predicate: ProgressionPredicate;
-} | {
+}
+/** Tests whether dark mode is active. */
+ | {
     type: "DarkMode";
     predicate: DarkModePredicate;
-} | {
+}
+/** Evaluates a hardcoded boolean value. */
+ | {
     type: "StaticBoolean";
     predicate: StaticBooleanPredicate;
-} | {
+}
+/** Tests a custom state value set by state trigger nodes. */
+ | {
     type: "CustomState";
     predicate: CustomStatePredicate;
-} | {
+}
+/** Compares a static string input against a value. */
+ | {
     type: "StaticString";
     predicate: StaticStringPredicate;
 };
+/**
+ * Child node types allowed inside scrollable containers (ScrollableColumn, ScrollableRow)
+ * in the combined SDK schema. Excludes overlay and bottom sheet nodes that cannot scroll.
+ */
 export type ScrollableChildren = {
     type: "Row";
     node: RowModel<ScrollableChildren, WhenPredicate>;
@@ -1570,6 +3427,10 @@ export type ScrollableChildren = {
     type: "EscapeHatch";
     node: EscapeHatchModel;
 };
+/**
+ * Child node types allowed inside scrollable containers within layout variants. Excludes
+ * overlay and bottom sheet nodes, scoped to layout variant predicates. Includes catalog components.
+ */
 export type ScrollableLayoutVariantChildren = {
     type: "Row";
     node: RowModel<ScrollableLayoutVariantChildren, LayoutVariantWhenPredicate>;
@@ -1622,6 +3483,10 @@ export type ScrollableLayoutVariantChildren = {
     type: "EscapeHatch";
     node: EscapeHatchModel;
 };
+/**
+ * Child node types allowed inside scrollable containers within outer layouts. Excludes overlay
+ * and bottom sheet nodes, scoped to outer layout predicates.
+ */
 export type ScrollableOuterLayoutChildren = {
     type: "Row";
     node: RowModel<ScrollableOuterLayoutChildren, OuterLayoutWhenPredicate>;
@@ -1683,31 +3548,55 @@ export type ScrollableOuterLayoutChildren = {
     type: "EscapeHatch";
     node: EscapeHatchModel;
 };
-export type WhenPredicate = {
+/**
+ * All available predicate types for conditional rendering in the full layout
+ * schema. Used with the When node to conditionally show or hide children.
+ * Each predicate MUST include a "type" field to identify the predicate kind
+ * and a "predicate" field containing the predicate configuration.
+ */
+export type WhenPredicate = 
+/** Tests the viewport width against a breakpoint value. */
+{
     type: "Breakpoint";
     predicate: BreakpointPredicate;
-} | {
+}
+/** Tests the position index of the current item in a collection. */
+ | {
     type: "Position";
     predicate: PositionPredicate;
-} | {
+}
+/** Tests which offer index is currently visible. */
+ | {
     type: "Progression";
     predicate: ProgressionPredicate;
-} | {
+}
+/** Tests whether dark mode is active. */
+ | {
     type: "DarkMode";
     predicate: DarkModePredicate;
-} | {
+}
+/** Tests whether a creative data attribute exists. */
+ | {
     type: "CreativeCopy";
     predicate: CreativeCopyPredicate;
-} | {
+}
+/** Evaluates a hardcoded boolean value. */
+ | {
     type: "StaticBoolean";
     predicate: StaticBooleanPredicate;
-} | {
+}
+/** Tests a custom state value set by state trigger nodes. */
+ | {
     type: "CustomState";
     predicate: CustomStatePredicate;
-} | {
+}
+/** Tests application domain state. */
+ | {
     type: "DomainState";
     predicate: LayoutSchemaDomainStatePredicate;
-} | {
+}
+/** Compares a static string input against a value. */
+ | {
     type: "StaticString";
     predicate: StaticStringPredicate;
 };