@vectoriox/iox-builder 1.4.3 → 1.4.5

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1294,177 +1294,541 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: OverlayService }] });
 
+var StyleCategory;
+(function (StyleCategory) {
+    StyleCategory["Layout"] = "Layout";
+    StyleCategory["Size"] = "Size";
+    StyleCategory["Typography"] = "Typography";
+    StyleCategory["Spacing"] = "Spacing";
+    StyleCategory["Border"] = "Border";
+    StyleCategory["Position"] = "Position";
+    StyleCategory["Background"] = "Background";
+    StyleCategory["Effects"] = "Effects";
+    // Legacy — kept for backward compat; prefer Size
+    StyleCategory["Dimensions"] = "Dimensions";
+})(StyleCategory || (StyleCategory = {}));
+const TRIGGER_OPTIONS = [
+    { value: 'pageLoad', label: 'Page load', icon: 'ph-thin ph-play' },
+    { value: 'viewportEnter', label: 'Enter viewport', icon: 'ph-thin ph-eye' },
+    { value: 'click', label: 'Click', icon: 'ph-thin ph-cursor-click' },
+    { value: 'hover', label: 'Hover', icon: 'ph-thin ph-hand-pointing' },
+    { value: 'scrollProgress', label: 'Scroll progress', icon: 'ph-thin ph-arrow-fat-lines-down' },
+];
+const ACTION_TYPE_OPTIONS = [
+    { value: 'fadeIn', label: 'Fade in' },
+    { value: 'fadeOut', label: 'Fade out' },
+    { value: 'moveUp', label: 'Move up' },
+    { value: 'moveDown', label: 'Move down' },
+    { value: 'moveLeft', label: 'Move left' },
+    { value: 'moveRight', label: 'Move right' },
+    { value: 'scaleIn', label: 'Scale in' },
+    { value: 'scaleOut', label: 'Scale out' },
+    { value: 'rotate', label: 'Rotate' },
+    { value: 'show', label: 'Show' },
+    { value: 'hide', label: 'Hide' },
+    { value: 'toggleVisibility', label: 'Toggle visibility' },
+];
+const EASING_OPTIONS = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'];
+/** Interaction pseudo-classes — compiled to .iox-node-{id}:state */
+const INTERACTION_STATES = ['hover', 'active', 'focus'];
+/** Structural pseudo-classes — compiled to .iox-outer-{id}:state */
+const STRUCTURAL_STATES = ['first-child', 'last-child', 'nth-child(odd)', 'nth-child(even)'];
+const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES];
 /**
- * StyleRegistryService — manages a single <style> tag for the builder canvas.
- *
- * Each builder component gets two CSS classes:
- *   .iox-node-{id}  — applied to the inner element; handles layout/visual props
- *                     (display, flex, background, border, padding, etc.)
- *   .iox-outer-{id} — applied to the host element by RenderDirective; handles
- *                     properties that participate in the PARENT flow (margin,
- *                     align-self, flex-grow/shrink/basis, order).
- *
- * This split is necessary because margin on an inner wrapper only adds internal
- * space — it does not push sibling elements. Applying margin to the host element
- * (which IS the flex/block child in the parent container) makes it work correctly.
- *
- * State styles (hover/active/focus) are stored under key `${nodeId}:${state}`
- * and compiled to `.iox-node-{id}:hover { … }` selectors.
- *
- * Design token variables are stored under the reserved key `__tokens__` and
- * compiled to a `:root { … }` block prepended to all other rules.
- *
- * Scoped to PageUiComponent.providers[] — one stylesheet per builder instance.
+ * Build a full StyleTraitGroup[] schema populated with values from a flat
+ * styleProps map. Used when editing a preset in the Style panel — the panel
+ * receives the same `StyleTraitGroup[]` shape regardless of context.
  */
-class StyleRegistryService {
-    constructor() {
-        this.changes$ = new Subject();
-        this.rules = new Map();
-        this.styleEl = null;
-    }
-    /** Properties that must live on the wrapper element to affect the parent layout. */
-    static { this.OUTER_PROPS = new Set([
-        'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
-        'alignSelf', 'flexGrow', 'flexShrink', 'flexBasis', 'order',
-        'width',
-    ]); }
-    init() {
-        this.styleEl = document.createElement('style');
-        this.styleEl.id = 'iox-runtime-styles';
-        document.head.appendChild(this.styleEl);
+function buildPresetStyleTraits(styleProps) {
+    const allGroups = [
+        new LayoutGroupStyleConfig(),
+        new SizeGroupStyleConfig(),
+        new BackgroundGroupStyleConfig(),
+        new SpacingGroupStyleConfig(),
+        new BorderGroupStyleConfig(),
+        new TypographyGroupStyleConfig(),
+        new EffectsGroupStyleConfig(),
+        new PositionGroupStyleConfig(),
+    ];
+    return allGroups.map(group => ({
+        ...group,
+        traits: group.traits.map(trait => ({
+            ...trait,
+            default: styleProps[trait.name] !== undefined ? styleProps[trait.name] : trait.default,
+        })),
+    }));
+}
+var TraitInputType;
+(function (TraitInputType) {
+    TraitInputType["Text"] = "text";
+    TraitInputType["Number"] = "number";
+    TraitInputType["Select"] = "select";
+    TraitInputType["Checkbox"] = "checkbox";
+    TraitInputType["Color"] = "colorPicker";
+    TraitInputType["DirectionalSize"] = "directionalSize";
+    TraitInputType["SelectButton"] = "selectButton";
+    TraitInputType["Scrub"] = "scrub";
+    TraitInputType["Icon"] = "icon";
+    TraitInputType["Media"] = "media";
+    TraitInputType["FontFamily"] = "fontFamily";
+    TraitInputType["GridTemplate"] = "gridTemplate";
+})(TraitInputType || (TraitInputType = {}));
+function generateNodeId() {
+    return Math.random().toString(36).substr(2, 9);
+}
+class ComponentConfig {
+    constructor(type, selector, icon = 'ph-thin ph-cube', category = 'General') {
+        this.id = generateNodeId();
+        this.type = type;
+        this.selector = selector;
+        this.icon = icon;
+        this.category = category;
+        this.inputs = {};
+        this.traits = [];
+        this.styleTraits = [];
     }
-    /**
-     * Write or update the base styles for a node, or a pseudo-class state override.
-     *
-     * @param nodeId  The node's CSS id (used in `.iox-node-{nodeId}`)
-     * @param styles  Flat CSS property map (camelCase keys)
-     * @param state   Optional pseudo-class state ('hover' | 'active' | 'focus').
-     *                When provided, compiles to `.iox-node-{id}:{state} { … }`.
-     *                State rules are NOT partitioned into inner/outer.
-     */
-    upsert(nodeId, styles, state) {
-        if (!nodeId)
-            return;
-        if (state) {
-            const css = this.compile(`iox-node-${nodeId}:${state}`, styles);
-            const key = `${nodeId}:${state}`;
-            if (css) {
-                this.rules.set(key, css);
-            }
-            else {
-                this.rules.delete(key);
-            }
-            this.flush();
-            return;
-        }
-        const inner = {};
-        const outer = {};
-        for (const [k, v] of Object.entries(styles)) {
-            if (StyleRegistryService.OUTER_PROPS.has(k)) {
-                outer[k] = v;
-            }
-            else {
-                inner[k] = v;
+    /** Override specific trait defaults after styleTraits are set.
+     *  Call this at the end of each subclass constructor. */
+    applyStyleDefaults(defaults) {
+        for (const group of this.styleTraits) {
+            for (const trait of group.traits) {
+                if (defaults[trait.name] !== undefined) {
+                    trait.default = defaults[trait.name];
+                }
             }
         }
-        const innerCss = this.compile(`iox-node-${nodeId}`, inner);
-        const outerCss = this.compile(`iox-outer-${nodeId}`, outer);
-        const combined = [innerCss, outerCss].filter(Boolean).join('\n');
-        if (combined) {
-            this.rules.set(nodeId, combined);
-        }
-        else {
-            this.rules.delete(nodeId);
-        }
-        this.flush();
     }
-    /**
-     * Write the org-level design token variables as a `:root { … }` block.
-     * Token names should be CSS custom property names without the `--` prefix
-     * (e.g., `{ 'iox-primary-color': '#cb9090' }`).
-     * Pass an empty object to clear all tokens.
-     */
-    upsertTokens(tokens) {
-        const entries = Object.entries(tokens)
-            .filter(([, v]) => v !== undefined && v !== null && v !== '')
-            .map(([k, v]) => `  --${k}: ${v};`);
-        if (entries.length) {
-            this.rules.set('__tokens__', `:root {\n${entries.join('\n')}\n}`);
-        }
-        else {
-            this.rules.delete('__tokens__');
-        }
-        this.flush();
+}
+class TraitConfig {
+    constructor(name, label, type, options, defaultValue, inline, showWhen) {
+        this.name = name;
+        this.label = label;
+        this.type = type;
+        this.options = options;
+        this.default = defaultValue;
+        this.inline = inline;
+        this.showWhen = showWhen;
     }
-    remove(nodeId) {
-        if (!nodeId)
-            return;
-        // Remove base rule and all state rules for this node
-        this.rules.delete(nodeId);
-        for (const key of this.rules.keys()) {
-            if (key.startsWith(`${nodeId}:`)) {
-                this.rules.delete(key);
-            }
-        }
-        this.flush();
+}
+class GroupStyleConfig {
+    constructor(category, traits) {
+        this.category = category;
+        this.traits = traits;
     }
-    destroy() {
-        this.rules.clear();
-        if (this.styleEl) {
-            this.styleEl.remove();
-            this.styleEl = null;
-        }
+}
+// ─── Unit constants ───────────────────────────────────────────────────────────
+const UNITS_ALL = ['px', '%', 'rem', 'em', 'vw', 'vh'];
+const UNITS_NO_VW = ['px', '%', 'rem', 'em', 'vh'];
+const UNITS_FIXED = ['px', '%', 'rem', 'em'];
+const UNITS_DEG = ['deg'];
+// ─── Shared panel utilities ──────────────────────────────────────────────────
+function resolveTraitControllerType(type) {
+    switch (type) {
+        case TraitInputType.Number: return 'number';
+        case TraitInputType.Select: return 'select';
+        case TraitInputType.Checkbox: return 'switch';
+        case TraitInputType.Color: return 'colorPicker';
+        case TraitInputType.DirectionalSize: return 'directionalSize';
+        case TraitInputType.SelectButton: return 'selectButton';
+        case TraitInputType.Scrub: return 'scrub';
+        case TraitInputType.Icon: return 'icon';
+        case TraitInputType.Media: return 'media';
+        case TraitInputType.FontFamily: return 'select';
+        case TraitInputType.GridTemplate: return 'gridTemplate';
+        default: return 'text';
     }
-    compile(className, styles) {
-        const entries = Object.entries(styles)
-            .filter(([, v]) => v !== undefined && v !== null && v !== '')
-            .map(([k, v]) => `  ${this.toKebabCase(k)}: ${v};`);
-        if (!entries.length)
-            return '';
-        return `.${className} {\n${entries.join('\n')}\n}`;
+}
+function resolveTraitOptions(trait) {
+    if (trait.type === TraitInputType.Color ||
+        trait.type === TraitInputType.DirectionalSize ||
+        trait.type === TraitInputType.SelectButton ||
+        trait.type === TraitInputType.Scrub ||
+        trait.type === TraitInputType.Media) {
+        return trait.options;
     }
-    toKebabCase(str) {
-        return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+    if (trait.type === TraitInputType.FontFamily) {
+        // FontFamily options are injected dynamically by the style panel via FontManagerService.
+        // Return empty array here; the panel overrides this in resolveOptions().
+        return [];
     }
-    flush() {
-        if (!this.styleEl)
-            return;
-        // __tokens__ always first so variables are available to all subsequent rules
-        const tokenBlock = this.rules.get('__tokens__');
-        const rest = Array.from(this.rules.entries())
-            .filter(([k]) => k !== '__tokens__')
-            .map(([, v]) => v);
-        this.styleEl.textContent = [tokenBlock, ...rest].filter(Boolean).join('\n');
-        this.changes$.next();
+    if (trait.type !== TraitInputType.Select) {
+        return undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService }); }
+    const opts = trait.options ?? [];
+    // Already formatted as {label, value}[]
+    if (opts.length > 0 && typeof opts[0] === 'object' && 'label' in opts[0]) {
+        return opts;
+    }
+    return opts.map((option) => ({ label: option, value: option }));
+}
+// ─── Style Groups ─────────────────────────────────────────────────────────────
+const NON_STATIC_POSITIONS = ['relative', 'absolute', 'fixed', 'sticky'];
+class PositionGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Position, [
+            new TraitConfig('position', 'Position', TraitInputType.Select, ['static', 'relative', 'absolute', 'fixed', 'sticky'], 'static'),
+            new TraitConfig('top', 'T', TraitInputType.Scrub, { min: -9999, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true, { trait: 'position', values: NON_STATIC_POSITIONS }),
+            new TraitConfig('right', 'R', TraitInputType.Scrub, { min: -9999, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true, { trait: 'position', values: NON_STATIC_POSITIONS }),
+            new TraitConfig('bottom', 'B', TraitInputType.Scrub, { min: -9999, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true, { trait: 'position', values: NON_STATIC_POSITIONS }),
+            new TraitConfig('left', 'L', TraitInputType.Scrub, { min: -9999, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true, { trait: 'position', values: NON_STATIC_POSITIONS }),
+            new TraitConfig('zIndex', 'Z', TraitInputType.Scrub, { min: -99, max: 9999, step: 1, units: [''] }, '0', false, { trait: 'position', values: NON_STATIC_POSITIONS }),
+        ]);
+    }
+}
+// ─── Layout ───────────────────────────────────────────────────────────────────
+class LayoutGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Layout, [
+            new TraitConfig('display', 'Display', TraitInputType.Select, ['block', 'inline', 'inline-block', 'flex', 'grid'], 'block'),
+            // ── Flex-only ─────────────────────────────────────────────────────
+            new TraitConfig('flexDirection', 'Direction', TraitInputType.SelectButton, [
+                { value: 'row', label: 'Horizontal', icon: 'ph-thin ph-arrow-right' },
+                { value: 'row-reverse', label: 'Horizontal Reversed', icon: 'ph-thin ph-arrow-left' },
+                { value: 'column', label: 'Vertical', icon: 'ph-thin ph-arrow-down' },
+                { value: 'column-reverse', label: 'Vertical Reversed', icon: 'ph-thin ph-arrow-up' },
+            ], 'row', false, { trait: 'display', values: 'flex' }),
+            new TraitConfig('flexWrap', 'Flex Wrap', TraitInputType.SelectButton, [
+                { value: 'nowrap', label: 'No Wrap', icon: 'ph-thin ph-minus' },
+                { value: 'wrap', label: 'Wrap', icon: 'ph-thin ph-arrow-elbow-down-right' },
+                { value: 'wrap-reverse', label: 'Wrap Reversed', icon: 'ph-thin ph-arrow-elbow-up-right' },
+            ], 'nowrap', false, { trait: 'display', values: 'flex' }),
+            // ── Shared flex + grid ────────────────────────────────────────────
+            new TraitConfig('justifyContent', 'Justify', TraitInputType.SelectButton, [
+                { value: 'flex-start', label: 'Start', icon: 'ph-thin ph-align-left' },
+                { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-horizontal' },
+                { value: 'flex-end', label: 'End', icon: 'ph-thin ph-align-right' },
+                { value: 'space-between', label: 'Space Between', icon: 'ph-thin ph-distribute-horizontal' },
+                { value: 'space-around', label: 'Space Around', icon: 'ph-thin ph-dots-three' },
+                { value: 'space-evenly', label: 'Space Evenly', icon: 'ph-thin ph-dots-six' },
+            ], 'flex-start', false, { trait: 'display', values: ['flex', 'grid'] }),
+            new TraitConfig('alignItems', 'Align Items', TraitInputType.SelectButton, [
+                { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-vertical' },
+                { value: 'start', label: 'Start', icon: 'ph-thin ph-align-top' },
+                { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-vertical' },
+                { value: 'end', label: 'End', icon: 'ph-thin ph-align-bottom' },
+            ], 'stretch', false, { trait: 'display', values: ['flex', 'grid'] }),
+            new TraitConfig('gap', 'Gap', TraitInputType.Scrub, { min: 0, max: 200, step: 1, units: UNITS_FIXED }, '0px', false, { trait: 'display', values: ['flex', 'grid'] }),
+            // ── Grid-only ─────────────────────────────────────────────────────
+            new TraitConfig('gridTemplateColumns', 'Columns', TraitInputType.GridTemplate, undefined, '1fr', false, { trait: 'display', values: 'grid' }),
+            new TraitConfig('gridTemplateRows', 'Rows', TraitInputType.GridTemplate, undefined, 'auto', false, { trait: 'display', values: 'grid' }),
+            new TraitConfig('justifyItems', 'Justify Items', TraitInputType.SelectButton, [
+                { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-horizontal' },
+                { value: 'start', label: 'Start', icon: 'ph-thin ph-align-left' },
+                { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-horizontal' },
+                { value: 'end', label: 'End', icon: 'ph-thin ph-align-right' },
+            ], 'stretch', false, { trait: 'display', values: 'grid' }),
+            new TraitConfig('alignContent', 'Align Content', TraitInputType.SelectButton, [
+                { value: 'start', label: 'Start', icon: 'ph-thin ph-align-top' },
+                { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-vertical' },
+                { value: 'end', label: 'End', icon: 'ph-thin ph-align-bottom' },
+                { value: 'space-between', label: 'Space Between', icon: 'ph-thin ph-distribute-vertical' },
+                { value: 'space-around', label: 'Space Around', icon: 'ph-thin ph-dots-three' },
+                { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-vertical' },
+            ], 'stretch', false, { trait: 'display', values: 'grid' }),
+            // ── Direction (always visible) ────────────────────────────────────
+            new TraitConfig('direction', 'Text Direction', TraitInputType.SelectButton, [
+                { value: 'ltr', label: 'LTR' },
+                { value: 'rtl', label: 'RTL' },
+            ], 'ltr'),
+        ]);
+    }
+}
+// ─── Size (replaces Dimensions) ───────────────────────────────────────────────
+class SizeGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Size, [
+            new TraitConfig('width', 'W', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
+            new TraitConfig('height', 'H', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
+            new TraitConfig('minWidth', 'Min W', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
+            new TraitConfig('minHeight', 'Min H', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
+            new TraitConfig('maxWidth', 'Max W', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
+            new TraitConfig('maxHeight', 'Max H', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
+            new TraitConfig('aspectRatio', 'Aspect Ratio', TraitInputType.Text, undefined, 'auto'),
+        ]);
+    }
+}
+/** @deprecated Use SizeGroupStyleConfig instead. */
+class DimensionsGroupStyleConfig extends SizeGroupStyleConfig {
+}
+// ─── Background ───────────────────────────────────────────────────────────────
+class BackgroundGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Background, [
+            new TraitConfig('backgroundColor', 'Background', TraitInputType.Color, { allowGradient: true, allowTransparent: true, formats: ['hex', 'rgb', 'hsl', 'transparent'] }, 'transparent'),
+        ]);
+    }
+}
+class SpacingGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Spacing, [
+            new TraitConfig('margin', 'Margin', TraitInputType.DirectionalSize, {
+                allowNegative: true,
+                allowLinkedSlider: true,
+                slider: { min: 0, max: 200, step: 1 }
+            }, '0px 0px 0px 0px'),
+            new TraitConfig('padding', 'Padding', TraitInputType.DirectionalSize, {
+                allowNegative: false,
+                allowLinkedSlider: true,
+                slider: { min: 0, max: 200, step: 1 }
+            }, '0px 0px 0px 0px')
+        ]);
+    }
+}
+class BorderGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Border, [
+            new TraitConfig('borderWidth', 'Border Width', TraitInputType.DirectionalSize, {
+                units: UNITS_FIXED,
+                allowNegative: false,
+                allowLinkedSlider: true,
+                slider: { min: 0, max: 32, step: 1 }
+            }, '0px'),
+            new TraitConfig('borderStyle', 'Border Style', TraitInputType.SelectButton, [
+                { value: 'solid', icon: 'ph-thin ph-line-segment' },
+                { value: 'dashed', icon: 'ph-thin ph-dots-three' },
+                { value: 'dotted', icon: 'ph-thin ph-dots-six' },
+            ], 'solid'),
+            new TraitConfig('borderColor', 'Border Color', TraitInputType.Color, { allowGradient: false, allowTransparent: false, formats: ['hex', 'rgb', 'hsl'] }, '#CCCCCC'),
+            new TraitConfig('borderRadius', 'Border Radius', TraitInputType.DirectionalSize, {
+                units: UNITS_FIXED,
+                allowNegative: false,
+                allowLinkedSlider: true,
+                linkByDefault: true,
+                slider: { min: 0, max: 120, step: 1 },
+                segments: [
+                    { key: 'top-left', icon: 'ph-arrow-bend-up-left', ariaLabel: 'top left radius' },
+                    { key: 'top-right', icon: 'ph-arrow-bend-up-right', ariaLabel: 'top right radius' },
+                    { key: 'bottom-right', icon: 'ph-arrow-bend-down-right', ariaLabel: 'bottom right radius' },
+                    { key: 'bottom-left', icon: 'ph-arrow-bend-down-left', ariaLabel: 'bottom left radius' }
+                ]
+            }, '0px')
+        ]);
+    }
+}
+class TypographyGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Typography, [
+            new TraitConfig('fontFamily', 'Font Family', TraitInputType.FontFamily, [], 'Poppins, sans-serif'),
+            new TraitConfig('fontSize', 'Font Size', TraitInputType.Scrub, { min: 8, max: 200, step: 1, units: UNITS_FIXED }, '16px'),
+            new TraitConfig('fontWeight', 'Font Weight', TraitInputType.Select, ['100', '200', '300', '400', '500', '600', '700', '800', '900'], '400'),
+            new TraitConfig('color', 'Color', TraitInputType.Color, { allowGradient: false, allowTransparent: false, formats: ['hex', 'rgb', 'hsl'] }, '#000000'),
+            new TraitConfig('lineHeight', 'Line Height', TraitInputType.Select, ['1', '1.2', '1.4', '1.5', '1.75', '2', '2.5'], '1.5'),
+            new TraitConfig('letterSpacing', 'Letter Spacing', TraitInputType.Scrub, { min: -5, max: 50, step: 0.5, units: UNITS_FIXED }, '0px'),
+            new TraitConfig('textAlign', 'Alignment', TraitInputType.SelectButton, [
+                { value: 'left', icon: 'ph-thin ph-text-align-left' },
+                { value: 'center', icon: 'ph-thin ph-text-align-center' },
+                { value: 'right', icon: 'ph-thin ph-text-align-right' },
+                { value: 'justify', icon: 'ph-thin ph-text-align-justify' },
+            ], 'left'),
+            new TraitConfig('fontStyle', 'Italic', TraitInputType.SelectButton, { items: [{ value: 'italic', icon: 'ph-thin ph-text-italic', label: 'Italic' }], allowEmpty: true, noneValue: 'normal' }, 'normal', true),
+            new TraitConfig('textDecoration', 'Underline', TraitInputType.SelectButton, { items: [{ value: 'underline', icon: 'ph-thin ph-text-underline', label: 'Underline' }], allowEmpty: true, noneValue: 'none' }, 'none', true),
+        ]);
+    }
+}
+class EffectsGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Effects, [
+            new TraitConfig('opacity', 'Opacity', TraitInputType.Scrub, { min: 0, max: 1, step: 0.01, units: [''] }, '1'),
+            new TraitConfig('mixBlendMode', 'Blend Mode', TraitInputType.Select, [
+                'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten',
+                'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+                'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity',
+            ], 'normal'),
+            new TraitConfig('cursor', 'Cursor', TraitInputType.Select, [
+                'auto', 'default', 'pointer', 'text', 'move', 'not-allowed',
+                'grab', 'grabbing', 'crosshair', 'zoom-in', 'zoom-out', 'none',
+            ], 'auto'),
+        ]);
+    }
+}
+function flattenSchemaFields(properties, prefix = '') {
+    const result = [];
+    for (const [key, field] of Object.entries(properties)) {
+        const fullPath = prefix ? `${prefix}.${key}` : key;
+        if (field.type === 'object' && field.properties) {
+            result.push(...flattenSchemaFields(field.properties, fullPath));
+        }
+        else {
+            result.push({ label: fullPath, value: fullPath });
+        }
+    }
+    return result;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService, decorators: [{
-            type: Injectable
-        }] });
 
-// Module-level counter — unique drop-list ID per Section instance across the whole app session.
-let dropListCounter = 0;
 /**
- * RenderDirective — applied to <ng-container> to dynamically instantiate a
- * builder component with zero wrapper elements in the DOM.
+ * StyleRegistryService — manages a single <style> tag for the builder canvas.
  *
- * A directive's ViewContainerRef inserts the created component's host element as
- * a sibling of the ng-container comment node — directly inside the parent element
- * — so the resulting DOM has no extra <app-renderer> wrapper.
+ * Each builder component gets two CSS classes:
+ *   .iox-node-{id}  — applied to the inner element; handles layout/visual props
+ *                     (display, flex, background, border, padding, etc.)
+ *   .iox-outer-{id} — applied to the host element by RenderDirective; handles
+ *                     properties that participate in the PARENT flow (margin,
+ *                     align-self, flex-grow/shrink/basis, order).
  *
- * Usage:
- *   <ng-container [ioxRender]="node"
- *                 (onClick)="handleClick($event)"
- *                 (onMouseEnter)="handleMouseEnter($event)"
- *                 (onMouseLeave)="handleMouseLeave()">
- *   </ng-container>
+ * This split is necessary because margin on an inner wrapper only adds internal
+ * space — it does not push sibling elements. Applying margin to the host element
+ * (which IS the flex/block child in the parent container) makes it work correctly.
+ *
+ * State styles (hover/active/focus) are stored under key `${nodeId}:${state}`
+ * and compiled to `.iox-node-{id}:hover { … }` selectors.
+ *
+ * Design token variables are stored under the reserved key `__tokens__` and
+ * compiled to a `:root { … }` block prepended to all other rules.
+ *
+ * Scoped to PageUiComponent.providers[] — one stylesheet per builder instance.
  */
-class RenderDirective {
-    constructor(vcr, injector, registryService, overlayService, styleRegistry, interactionEngine, cdr, panelEventService) {
-        this.vcr = vcr;
-        this.injector = injector;
+class StyleRegistryService {
+    constructor() {
+        this.changes$ = new Subject();
+        this.rules = new Map();
+        this.styleEl = null;
+    }
+    /** Properties that must live on the wrapper element to affect the parent layout. */
+    static { this.OUTER_PROPS = new Set([
+        'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+        'alignSelf', 'flexGrow', 'flexShrink', 'flexBasis', 'order',
+        'width',
+    ]); }
+    init() {
+        this.styleEl = document.createElement('style');
+        this.styleEl.id = 'iox-runtime-styles';
+        document.head.appendChild(this.styleEl);
+    }
+    /**
+     * Write or update the base styles for a node, or a pseudo-class state override.
+     *
+     * @param nodeId  The node's CSS id (used in `.iox-node-{nodeId}`)
+     * @param styles  Flat CSS property map (camelCase keys)
+     * @param state   Optional pseudo-class state ('hover' | 'active' | 'focus').
+     *                When provided, compiles to `.iox-node-{id}:{state} { … }`.
+     *                State rules are NOT partitioned into inner/outer.
+     */
+    upsert(nodeId, styles, state) {
+        if (!nodeId)
+            return;
+        if (state) {
+            // Structural pseudo-classes (first-child, last-child, nth-child) target the
+            // outer wrapper element so they participate correctly in grid/flex layout.
+            const prefix = STRUCTURAL_STATES.includes(state) ? 'iox-outer' : 'iox-node';
+            const css = this.compile(`${prefix}-${nodeId}:${state}`, styles);
+            const key = `${nodeId}:${state}`;
+            if (css) {
+                this.rules.set(key, css);
+            }
+            else {
+                this.rules.delete(key);
+            }
+            this.flush();
+            return;
+        }
+        const inner = {};
+        const outer = {};
+        for (const [k, v] of Object.entries(styles)) {
+            if (StyleRegistryService.OUTER_PROPS.has(k)) {
+                outer[k] = v;
+            }
+            else {
+                inner[k] = v;
+            }
+        }
+        const innerCss = this.compile(`iox-node-${nodeId}`, inner);
+        const outerCss = this.compile(`iox-outer-${nodeId}`, outer);
+        const combined = [innerCss, outerCss].filter(Boolean).join('\n');
+        if (combined) {
+            this.rules.set(nodeId, combined);
+        }
+        else {
+            this.rules.delete(nodeId);
+        }
+        this.flush();
+    }
+    /**
+     * Write the org-level design token variables as a `:root { … }` block.
+     * Token names should be CSS custom property names without the `--` prefix
+     * (e.g., `{ 'iox-primary-color': '#cb9090' }`).
+     * Pass an empty object to clear all tokens.
+     */
+    upsertTokens(tokens) {
+        const entries = Object.entries(tokens)
+            .filter(([, v]) => v !== undefined && v !== null && v !== '')
+            .map(([k, v]) => `  --${k}: ${v};`);
+        if (entries.length) {
+            this.rules.set('__tokens__', `:root {\n${entries.join('\n')}\n}`);
+        }
+        else {
+            this.rules.delete('__tokens__');
+        }
+        this.flush();
+    }
+    remove(nodeId) {
+        if (!nodeId)
+            return;
+        // Remove base rule and all state rules for this node
+        this.rules.delete(nodeId);
+        for (const key of this.rules.keys()) {
+            if (key.startsWith(`${nodeId}:`)) {
+                this.rules.delete(key);
+            }
+        }
+        this.flush();
+    }
+    destroy() {
+        this.rules.clear();
+        if (this.styleEl) {
+            this.styleEl.remove();
+            this.styleEl = null;
+        }
+    }
+    compile(className, styles) {
+        const entries = Object.entries(styles)
+            .filter(([, v]) => v !== undefined && v !== null && v !== '')
+            .map(([k, v]) => `  ${this.toKebabCase(k)}: ${v};`);
+        if (!entries.length)
+            return '';
+        return `.${className} {\n${entries.join('\n')}\n}`;
+    }
+    toKebabCase(str) {
+        return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+    }
+    flush() {
+        if (!this.styleEl)
+            return;
+        // __tokens__ always first so variables are available to all subsequent rules
+        const tokenBlock = this.rules.get('__tokens__');
+        const rest = Array.from(this.rules.entries())
+            .filter(([k]) => k !== '__tokens__')
+            .map(([, v]) => v);
+        this.styleEl.textContent = [tokenBlock, ...rest].filter(Boolean).join('\n');
+        this.changes$.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService, decorators: [{
+            type: Injectable
+        }] });
+
+// Module-level counter — unique drop-list ID per Section instance across the whole app session.
+let dropListCounter = 0;
+/**
+ * RenderDirective — applied to <ng-container> to dynamically instantiate a
+ * builder component with zero wrapper elements in the DOM.
+ *
+ * A directive's ViewContainerRef inserts the created component's host element as
+ * a sibling of the ng-container comment node — directly inside the parent element
+ * — so the resulting DOM has no extra <app-renderer> wrapper.
+ *
+ * Usage:
+ *   <ng-container [ioxRender]="node"
+ *                 (onClick)="handleClick($event)"
+ *                 (onMouseEnter)="handleMouseEnter($event)"
+ *                 (onMouseLeave)="handleMouseLeave()">
+ *   </ng-container>
+ */
+class RenderDirective {
+    constructor(vcr, injector, registryService, overlayService, styleRegistry, interactionEngine, cdr, panelEventService) {
+        this.vcr = vcr;
+        this.injector = injector;
         this.registryService = registryService;
         this.overlayService = overlayService;
         this.styleRegistry = styleRegistry;
@@ -3459,7 +3823,6 @@ class BuilderRepeaterComponent {
     }
     ngOnInit() {
         this.orgId = this.activatedRoute.snapshot.paramMap.get('orgId') || 'default';
-        // When a binding is added/removed on any node, regenerate the preview rows.
         this.bindingSub = this.panelEventService.subscribe(event => {
             if (event.type !== PanelEventTypes.BINDING_CHANGED)
                 return;
@@ -3537,32 +3900,54 @@ class BuilderRepeaterComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderRepeaterComponent, deps: [{ token: DragEngineService }, { token: OverlayService }, { token: IOX_CONTENT_SERVICE, optional: true }, { token: DataSourceRegistryService }, { token: PanelEventService }, { token: i5.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderRepeaterComponent, isStandalone: false, selector: "app-builder-repeater", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", source: "source", limit: "limit" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
-        <div class="repeater-root" [ngClass]="['iox-node-' + nodeId, children.length ? 'has-children' : '']">
+        <ng-template #badgeContent>
+            <i class="ph-thin ph-repeat"></i>
+            <span *ngIf="source">{{ source }}</span>
+            <span *ngIf="!source" class="repeater-badge-empty">No source</span>
+            <span *ngIf="items.length" class="repeater-badge-count">&times; {{ items.length }}</span>
+            <span *ngIf="isLoading" class="repeater-badge-loading"><i class="ph-thin ph-circle-notch"></i></span>
+        </ng-template>
 
-            <!-- Badge: always visible when empty, absolute hover-only when has children -->
-            <div class="repeater-badge">
-                <i class="ph-thin ph-repeat"></i>
-                <span *ngIf="source">{{ source }}</span>
-                <span *ngIf="!source" class="repeater-badge-empty">No source</span>
-                <span *ngIf="items.length" class="repeater-badge-count">&times; {{ items.length }}</span>
-                <span *ngIf="isLoading" class="repeater-badge-loading"><i class="ph-thin ph-circle-notch"></i></span>
+        <!--
+            .repeater-wrapper is the layout root.
+            In has-children state, .repeater-badge lives here as a direct child
+            (position:absolute, hover-only) so it is NOT a child of .repeater-root
+            and does NOT shift the :nth-child index of the item wrappers.
+
+            In empty state, .repeater-badge lives inside .repeater-root (no items
+            to count, so :nth-child is irrelevant there).
+        -->
+        <div class="repeater-wrapper" [class.has-children]="children.length > 0">
+
+            <!-- HAS-CHILDREN: badge outside root, absolute over wrapper -->
+            <div *ngIf="children.length > 0" class="repeater-badge">
+                <ng-container *ngTemplateOutlet="badgeContent"></ng-container>
             </div>
 
-            <!-- Template drop zone — user designs one item here -->
-            <div class="repeater-template"
+            <div class="repeater-root"
+                 [ngClass]="['iox-node-' + nodeId]"
                  ioxDropzone
                  [ioxDropzoneId]="dropListId"
                  [ioxDropzoneData]="children"
                  [ioxDropzonePostDrop]="refreshPreviewsBound"
                  (ioxDrop)="onDrop($event)">
 
-                <div *ngIf="!children.length" class="repeater-placeholder">
-                    <i class="ph-thin ph-rows"></i>
-                    <span>Drop a component here as the item template</span>
-                </div>
+                <!-- EMPTY STATE: badge + placeholder inside root -->
+                <ng-container *ngIf="!children.length">
+                    <div class="repeater-badge">
+                        <ng-container *ngTemplateOutlet="badgeContent"></ng-container>
+                    </div>
+                    <div class="repeater-placeholder">
+                        <i class="ph-thin ph-rows"></i>
+                        <span>Drop a component here as the item template</span>
+                    </div>
+                </ng-container>
 
+                <!-- Template items — DIRECT children of repeater-root.
+                     :first-child / :nth-child(odd) etc. now correctly target these
+                     as siblings of the preview items below. -->
                 <div *ngFor="let child of children"
-                     [ngClass]="['repeater-template-child', 'iox-outer-' + (child.styleId ?? child.id)]"
+                     [ngClass]="['repeater-item-template', 'iox-outer-' + (child.styleId ?? child.id)]"
                      ioxDraggable
                      [ioxDragData]="child"
                      [ioxDragSourceId]="dropListId">
@@ -3573,54 +3958,74 @@ class BuilderRepeaterComponent {
                         (onMouseLeave)="childMouseLeave.emit()">
                     </ng-container>
                 </div>
-            </div>
 
-            <!-- Preview items for rows 2..N — one iox-outer wrapper per child so
-                 width/margin outer props apply, and items participate directly in
-                 the repeater-root grid/flex (template uses display:contents). -->
-            <ng-container *ngFor="let row of previewRows">
-                <div *ngFor="let child of row"
-                     [ngClass]="['repeater-preview-child', 'iox-outer-' + (child.styleId ?? child.id)]">
-                    <ng-container
-                        [ioxRender]="child"
-                        (onClick)="$event"
-                        (onMouseEnter)="$event"
-                        (onMouseLeave)="undefined">
-                    </ng-container>
-                </div>
-            </ng-container>
+                <!-- Preview items — also DIRECT children of repeater-root. -->
+                <ng-container *ngFor="let row of previewRows">
+                    <div *ngFor="let child of row"
+                         [ngClass]="['repeater-preview-child', 'iox-outer-' + (child.styleId ?? child.id)]">
+                        <ng-container
+                            [ioxRender]="child"
+                            (onClick)="$event"
+                            (onMouseEnter)="$event"
+                            (onMouseLeave)="undefined">
+                        </ng-container>
+                    </div>
+                </ng-container>
+            </div>
         </div>
-    `, isInline: true, styles: [".repeater-root{position:relative;box-sizing:border-box}.repeater-badge{display:flex;align-items:center;gap:.4rem;padding:4px 8px;font-size:11px;color:#cb9090;background:#cb909014;border:1px dashed rgba(203,144,144,.4);border-bottom:none;border-radius:4px 4px 0 0;-webkit-user-select:none;user-select:none}.repeater-root.has-children .repeater-badge{position:absolute;top:0;left:0;z-index:10;border-radius:0 0 4px;border:1px solid rgba(203,144,144,.5);opacity:0;cursor:pointer;transition:opacity .15s}.repeater-root.has-children:hover .repeater-badge{opacity:1}.repeater-root.has-children .repeater-template{border:none;border-radius:0;padding:0;min-height:unset;display:contents}.repeater-badge i{font-size:13px}.repeater-badge-empty{opacity:.55}.repeater-badge-count{margin-left:auto;font-weight:600}.repeater-badge-loading i{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.repeater-template{border:1px dashed rgba(203,144,144,.4);border-radius:0 0 4px 4px;padding:4px;min-height:40px}.repeater-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.repeater-placeholder i{font-size:20px}.repeater-template-child{min-width:0}.repeater-preview-child{opacity:.55;pointer-events:none;min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [".repeater-wrapper{position:relative;box-sizing:border-box}.repeater-badge{display:flex;align-items:center;gap:.4rem;padding:4px 8px;font-size:11px;color:#cb9090;background:#cb909014;border:1px dashed rgba(203,144,144,.4);border-bottom:none;border-radius:4px 4px 0 0;-webkit-user-select:none;user-select:none}.repeater-wrapper.has-children>.repeater-badge{position:absolute;top:0;left:0;z-index:10;border-radius:0 0 4px;border:1px solid rgba(203,144,144,.5);opacity:0;cursor:pointer;transition:opacity .15s}.repeater-wrapper.has-children:hover>.repeater-badge{opacity:1}.repeater-badge i{font-size:13px}.repeater-badge-empty{opacity:.55}.repeater-badge-count{margin-left:auto;font-weight:600}.repeater-badge-loading i{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.repeater-root{box-sizing:border-box}.repeater-wrapper:not(.has-children) .repeater-root{border:1px dashed rgba(203,144,144,.4);border-top:none;border-radius:0 0 4px 4px;min-height:40px}.repeater-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.repeater-placeholder i{font-size:20px}.repeater-item-template{min-width:0}.repeater-preview-child{opacity:.55;pointer-events:none;min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderRepeaterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-builder-repeater', template: `
-        <div class="repeater-root" [ngClass]="['iox-node-' + nodeId, children.length ? 'has-children' : '']">
+        <ng-template #badgeContent>
+            <i class="ph-thin ph-repeat"></i>
+            <span *ngIf="source">{{ source }}</span>
+            <span *ngIf="!source" class="repeater-badge-empty">No source</span>
+            <span *ngIf="items.length" class="repeater-badge-count">&times; {{ items.length }}</span>
+            <span *ngIf="isLoading" class="repeater-badge-loading"><i class="ph-thin ph-circle-notch"></i></span>
+        </ng-template>
 
-            <!-- Badge: always visible when empty, absolute hover-only when has children -->
-            <div class="repeater-badge">
-                <i class="ph-thin ph-repeat"></i>
-                <span *ngIf="source">{{ source }}</span>
-                <span *ngIf="!source" class="repeater-badge-empty">No source</span>
-                <span *ngIf="items.length" class="repeater-badge-count">&times; {{ items.length }}</span>
-                <span *ngIf="isLoading" class="repeater-badge-loading"><i class="ph-thin ph-circle-notch"></i></span>
+        <!--
+            .repeater-wrapper is the layout root.
+            In has-children state, .repeater-badge lives here as a direct child
+            (position:absolute, hover-only) so it is NOT a child of .repeater-root
+            and does NOT shift the :nth-child index of the item wrappers.
+
+            In empty state, .repeater-badge lives inside .repeater-root (no items
+            to count, so :nth-child is irrelevant there).
+        -->
+        <div class="repeater-wrapper" [class.has-children]="children.length > 0">
+
+            <!-- HAS-CHILDREN: badge outside root, absolute over wrapper -->
+            <div *ngIf="children.length > 0" class="repeater-badge">
+                <ng-container *ngTemplateOutlet="badgeContent"></ng-container>
             </div>
 
-            <!-- Template drop zone — user designs one item here -->
-            <div class="repeater-template"
+            <div class="repeater-root"
+                 [ngClass]="['iox-node-' + nodeId]"
                  ioxDropzone
                  [ioxDropzoneId]="dropListId"
                  [ioxDropzoneData]="children"
                  [ioxDropzonePostDrop]="refreshPreviewsBound"
                  (ioxDrop)="onDrop($event)">
 
-                <div *ngIf="!children.length" class="repeater-placeholder">
-                    <i class="ph-thin ph-rows"></i>
-                    <span>Drop a component here as the item template</span>
-                </div>
+                <!-- EMPTY STATE: badge + placeholder inside root -->
+                <ng-container *ngIf="!children.length">
+                    <div class="repeater-badge">
+                        <ng-container *ngTemplateOutlet="badgeContent"></ng-container>
+                    </div>
+                    <div class="repeater-placeholder">
+                        <i class="ph-thin ph-rows"></i>
+                        <span>Drop a component here as the item template</span>
+                    </div>
+                </ng-container>
 
+                <!-- Template items — DIRECT children of repeater-root.
+                     :first-child / :nth-child(odd) etc. now correctly target these
+                     as siblings of the preview items below. -->
                 <div *ngFor="let child of children"
-                     [ngClass]="['repeater-template-child', 'iox-outer-' + (child.styleId ?? child.id)]"
+                     [ngClass]="['repeater-item-template', 'iox-outer-' + (child.styleId ?? child.id)]"
                      ioxDraggable
                      [ioxDragData]="child"
                      [ioxDragSourceId]="dropListId">
@@ -3631,24 +4036,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         (onMouseLeave)="childMouseLeave.emit()">
                     </ng-container>
                 </div>
-            </div>
 
-            <!-- Preview items for rows 2..N — one iox-outer wrapper per child so
-                 width/margin outer props apply, and items participate directly in
-                 the repeater-root grid/flex (template uses display:contents). -->
-            <ng-container *ngFor="let row of previewRows">
-                <div *ngFor="let child of row"
-                     [ngClass]="['repeater-preview-child', 'iox-outer-' + (child.styleId ?? child.id)]">
-                    <ng-container
-                        [ioxRender]="child"
-                        (onClick)="$event"
-                        (onMouseEnter)="$event"
-                        (onMouseLeave)="undefined">
-                    </ng-container>
-                </div>
-            </ng-container>
+                <!-- Preview items — also DIRECT children of repeater-root. -->
+                <ng-container *ngFor="let row of previewRows">
+                    <div *ngFor="let child of row"
+                         [ngClass]="['repeater-preview-child', 'iox-outer-' + (child.styleId ?? child.id)]">
+                        <ng-container
+                            [ioxRender]="child"
+                            (onClick)="$event"
+                            (onMouseEnter)="$event"
+                            (onMouseLeave)="undefined">
+                        </ng-container>
+                    </div>
+                </ng-container>
+            </div>
         </div>
-    `, standalone: false, styles: [".repeater-root{position:relative;box-sizing:border-box}.repeater-badge{display:flex;align-items:center;gap:.4rem;padding:4px 8px;font-size:11px;color:#cb9090;background:#cb909014;border:1px dashed rgba(203,144,144,.4);border-bottom:none;border-radius:4px 4px 0 0;-webkit-user-select:none;user-select:none}.repeater-root.has-children .repeater-badge{position:absolute;top:0;left:0;z-index:10;border-radius:0 0 4px;border:1px solid rgba(203,144,144,.5);opacity:0;cursor:pointer;transition:opacity .15s}.repeater-root.has-children:hover .repeater-badge{opacity:1}.repeater-root.has-children .repeater-template{border:none;border-radius:0;padding:0;min-height:unset;display:contents}.repeater-badge i{font-size:13px}.repeater-badge-empty{opacity:.55}.repeater-badge-count{margin-left:auto;font-weight:600}.repeater-badge-loading i{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.repeater-template{border:1px dashed rgba(203,144,144,.4);border-radius:0 0 4px 4px;padding:4px;min-height:40px}.repeater-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.repeater-placeholder i{font-size:20px}.repeater-template-child{min-width:0}.repeater-preview-child{opacity:.55;pointer-events:none;min-width:0}\n"] }]
+    `, standalone: false, styles: [".repeater-wrapper{position:relative;box-sizing:border-box}.repeater-badge{display:flex;align-items:center;gap:.4rem;padding:4px 8px;font-size:11px;color:#cb9090;background:#cb909014;border:1px dashed rgba(203,144,144,.4);border-bottom:none;border-radius:4px 4px 0 0;-webkit-user-select:none;user-select:none}.repeater-wrapper.has-children>.repeater-badge{position:absolute;top:0;left:0;z-index:10;border-radius:0 0 4px;border:1px solid rgba(203,144,144,.5);opacity:0;cursor:pointer;transition:opacity .15s}.repeater-wrapper.has-children:hover>.repeater-badge{opacity:1}.repeater-badge i{font-size:13px}.repeater-badge-empty{opacity:.55}.repeater-badge-count{margin-left:auto;font-weight:600}.repeater-badge-loading i{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.repeater-root{box-sizing:border-box}.repeater-wrapper:not(.has-children) .repeater-root{border:1px dashed rgba(203,144,144,.4);border-top:none;border-radius:0 0 4px 4px;min-height:40px}.repeater-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.repeater-placeholder i{font-size:20px}.repeater-item-template{min-width:0}.repeater-preview-child{opacity:.55;pointer-events:none;min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: OverlayService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3825,363 +4228,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: [PanelChildComponent]
             }] } });
 
-var StyleCategory;
-(function (StyleCategory) {
-    StyleCategory["Layout"] = "Layout";
-    StyleCategory["Size"] = "Size";
-    StyleCategory["Typography"] = "Typography";
-    StyleCategory["Spacing"] = "Spacing";
-    StyleCategory["Border"] = "Border";
-    StyleCategory["Position"] = "Position";
-    StyleCategory["Background"] = "Background";
-    StyleCategory["Effects"] = "Effects";
-    // Legacy — kept for backward compat; prefer Size
-    StyleCategory["Dimensions"] = "Dimensions";
-})(StyleCategory || (StyleCategory = {}));
-const TRIGGER_OPTIONS = [
-    { value: 'pageLoad', label: 'Page load', icon: 'ph-thin ph-play' },
-    { value: 'viewportEnter', label: 'Enter viewport', icon: 'ph-thin ph-eye' },
-    { value: 'click', label: 'Click', icon: 'ph-thin ph-cursor-click' },
-    { value: 'hover', label: 'Hover', icon: 'ph-thin ph-hand-pointing' },
-    { value: 'scrollProgress', label: 'Scroll progress', icon: 'ph-thin ph-arrow-fat-lines-down' },
-];
-const ACTION_TYPE_OPTIONS = [
-    { value: 'fadeIn', label: 'Fade in' },
-    { value: 'fadeOut', label: 'Fade out' },
-    { value: 'moveUp', label: 'Move up' },
-    { value: 'moveDown', label: 'Move down' },
-    { value: 'moveLeft', label: 'Move left' },
-    { value: 'moveRight', label: 'Move right' },
-    { value: 'scaleIn', label: 'Scale in' },
-    { value: 'scaleOut', label: 'Scale out' },
-    { value: 'rotate', label: 'Rotate' },
-    { value: 'show', label: 'Show' },
-    { value: 'hide', label: 'Hide' },
-    { value: 'toggleVisibility', label: 'Toggle visibility' },
-];
-const EASING_OPTIONS = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'];
-const SUPPORTED_STATES = ['hover', 'active', 'focus'];
-/**
- * Build a full StyleTraitGroup[] schema populated with values from a flat
- * styleProps map. Used when editing a preset in the Style panel — the panel
- * receives the same `StyleTraitGroup[]` shape regardless of context.
- */
-function buildPresetStyleTraits(styleProps) {
-    const allGroups = [
-        new LayoutGroupStyleConfig(),
-        new SizeGroupStyleConfig(),
-        new BackgroundGroupStyleConfig(),
-        new SpacingGroupStyleConfig(),
-        new BorderGroupStyleConfig(),
-        new TypographyGroupStyleConfig(),
-        new EffectsGroupStyleConfig(),
-        new PositionGroupStyleConfig(),
-    ];
-    return allGroups.map(group => ({
-        ...group,
-        traits: group.traits.map(trait => ({
-            ...trait,
-            default: styleProps[trait.name] !== undefined ? styleProps[trait.name] : trait.default,
-        })),
-    }));
-}
-var TraitInputType;
-(function (TraitInputType) {
-    TraitInputType["Text"] = "text";
-    TraitInputType["Number"] = "number";
-    TraitInputType["Select"] = "select";
-    TraitInputType["Checkbox"] = "checkbox";
-    TraitInputType["Color"] = "colorPicker";
-    TraitInputType["DirectionalSize"] = "directionalSize";
-    TraitInputType["SelectButton"] = "selectButton";
-    TraitInputType["Scrub"] = "scrub";
-    TraitInputType["Icon"] = "icon";
-    TraitInputType["Media"] = "media";
-    TraitInputType["FontFamily"] = "fontFamily";
-    TraitInputType["GridTemplate"] = "gridTemplate";
-})(TraitInputType || (TraitInputType = {}));
-function generateNodeId() {
-    return Math.random().toString(36).substr(2, 9);
-}
-class ComponentConfig {
-    constructor(type, selector, icon = 'ph-thin ph-cube', category = 'General') {
-        this.id = generateNodeId();
-        this.type = type;
-        this.selector = selector;
-        this.icon = icon;
-        this.category = category;
-        this.inputs = {};
-        this.traits = [];
-        this.styleTraits = [];
-    }
-    /** Override specific trait defaults after styleTraits are set.
-     *  Call this at the end of each subclass constructor. */
-    applyStyleDefaults(defaults) {
-        for (const group of this.styleTraits) {
-            for (const trait of group.traits) {
-                if (defaults[trait.name] !== undefined) {
-                    trait.default = defaults[trait.name];
-                }
-            }
-        }
-    }
-}
-class TraitConfig {
-    constructor(name, label, type, options, defaultValue, inline, showWhen) {
-        this.name = name;
-        this.label = label;
-        this.type = type;
-        this.options = options;
-        this.default = defaultValue;
-        this.inline = inline;
-        this.showWhen = showWhen;
-    }
-}
-class GroupStyleConfig {
-    constructor(category, traits) {
-        this.category = category;
-        this.traits = traits;
-    }
-}
-// ─── Unit constants ───────────────────────────────────────────────────────────
-const UNITS_ALL = ['px', '%', 'rem', 'em', 'vw', 'vh'];
-const UNITS_NO_VW = ['px', '%', 'rem', 'em', 'vh'];
-const UNITS_FIXED = ['px', '%', 'rem', 'em'];
-const UNITS_DEG = ['deg'];
-// ─── Shared panel utilities ──────────────────────────────────────────────────
-function resolveTraitControllerType(type) {
-    switch (type) {
-        case TraitInputType.Number: return 'number';
-        case TraitInputType.Select: return 'select';
-        case TraitInputType.Checkbox: return 'switch';
-        case TraitInputType.Color: return 'colorPicker';
-        case TraitInputType.DirectionalSize: return 'directionalSize';
-        case TraitInputType.SelectButton: return 'selectButton';
-        case TraitInputType.Scrub: return 'scrub';
-        case TraitInputType.Icon: return 'icon';
-        case TraitInputType.Media: return 'media';
-        case TraitInputType.FontFamily: return 'select';
-        case TraitInputType.GridTemplate: return 'gridTemplate';
-        default: return 'text';
-    }
-}
-function resolveTraitOptions(trait) {
-    if (trait.type === TraitInputType.Color ||
-        trait.type === TraitInputType.DirectionalSize ||
-        trait.type === TraitInputType.SelectButton ||
-        trait.type === TraitInputType.Scrub ||
-        trait.type === TraitInputType.Media) {
-        return trait.options;
-    }
-    if (trait.type === TraitInputType.FontFamily) {
-        // FontFamily options are injected dynamically by the style panel via FontManagerService.
-        // Return empty array here; the panel overrides this in resolveOptions().
-        return [];
-    }
-    if (trait.type !== TraitInputType.Select) {
-        return undefined;
-    }
-    const opts = trait.options ?? [];
-    // Already formatted as {label, value}[]
-    if (opts.length > 0 && typeof opts[0] === 'object' && 'label' in opts[0]) {
-        return opts;
-    }
-    return opts.map((option) => ({ label: option, value: option }));
-}
-// ─── Style Groups ─────────────────────────────────────────────────────────────
-const NON_STATIC_POSITIONS = ['relative', 'absolute', 'fixed', 'sticky'];
-class PositionGroupStyleConfig extends GroupStyleConfig {
-    constructor() {
-        super(StyleCategory.Position, [
-            new TraitConfig('position', 'Position', TraitInputType.Select, ['static', 'relative', 'absolute', 'fixed', 'sticky'], 'static'),
-            new TraitConfig('top', 'T', TraitInputType.Scrub, { min: -9999, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true, { trait: 'position', values: NON_STATIC_POSITIONS }),
-            new TraitConfig('right', 'R', TraitInputType.Scrub, { min: -9999, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true, { trait: 'position', values: NON_STATIC_POSITIONS }),
-            new TraitConfig('bottom', 'B', TraitInputType.Scrub, { min: -9999, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true, { trait: 'position', values: NON_STATIC_POSITIONS }),
-            new TraitConfig('left', 'L', TraitInputType.Scrub, { min: -9999, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true, { trait: 'position', values: NON_STATIC_POSITIONS }),
-            new TraitConfig('zIndex', 'Z', TraitInputType.Scrub, { min: -99, max: 9999, step: 1, units: [''] }, '0', false, { trait: 'position', values: NON_STATIC_POSITIONS }),
-        ]);
-    }
-}
-// ─── Layout ───────────────────────────────────────────────────────────────────
-class LayoutGroupStyleConfig extends GroupStyleConfig {
-    constructor() {
-        super(StyleCategory.Layout, [
-            new TraitConfig('display', 'Display', TraitInputType.Select, ['block', 'inline', 'inline-block', 'flex', 'grid'], 'block'),
-            // ── Flex-only ─────────────────────────────────────────────────────
-            new TraitConfig('flexDirection', 'Direction', TraitInputType.SelectButton, [
-                { value: 'row', label: 'Horizontal', icon: 'ph-thin ph-arrow-right' },
-                { value: 'row-reverse', label: 'Horizontal Reversed', icon: 'ph-thin ph-arrow-left' },
-                { value: 'column', label: 'Vertical', icon: 'ph-thin ph-arrow-down' },
-                { value: 'column-reverse', label: 'Vertical Reversed', icon: 'ph-thin ph-arrow-up' },
-            ], 'row', false, { trait: 'display', values: 'flex' }),
-            new TraitConfig('flexWrap', 'Flex Wrap', TraitInputType.SelectButton, [
-                { value: 'nowrap', label: 'No Wrap', icon: 'ph-thin ph-minus' },
-                { value: 'wrap', label: 'Wrap', icon: 'ph-thin ph-arrow-elbow-down-right' },
-                { value: 'wrap-reverse', label: 'Wrap Reversed', icon: 'ph-thin ph-arrow-elbow-up-right' },
-            ], 'nowrap', false, { trait: 'display', values: 'flex' }),
-            // ── Shared flex + grid ────────────────────────────────────────────
-            new TraitConfig('justifyContent', 'Justify', TraitInputType.SelectButton, [
-                { value: 'flex-start', label: 'Start', icon: 'ph-thin ph-align-left' },
-                { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-horizontal' },
-                { value: 'flex-end', label: 'End', icon: 'ph-thin ph-align-right' },
-                { value: 'space-between', label: 'Space Between', icon: 'ph-thin ph-distribute-horizontal' },
-                { value: 'space-around', label: 'Space Around', icon: 'ph-thin ph-dots-three' },
-                { value: 'space-evenly', label: 'Space Evenly', icon: 'ph-thin ph-dots-six' },
-            ], 'flex-start', false, { trait: 'display', values: ['flex', 'grid'] }),
-            new TraitConfig('alignItems', 'Align Items', TraitInputType.SelectButton, [
-                { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-vertical' },
-                { value: 'start', label: 'Start', icon: 'ph-thin ph-align-top' },
-                { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-vertical' },
-                { value: 'end', label: 'End', icon: 'ph-thin ph-align-bottom' },
-            ], 'stretch', false, { trait: 'display', values: ['flex', 'grid'] }),
-            new TraitConfig('gap', 'Gap', TraitInputType.Scrub, { min: 0, max: 200, step: 1, units: UNITS_FIXED }, '0px', false, { trait: 'display', values: ['flex', 'grid'] }),
-            // ── Grid-only ─────────────────────────────────────────────────────
-            new TraitConfig('gridTemplateColumns', 'Columns', TraitInputType.GridTemplate, undefined, '1fr', false, { trait: 'display', values: 'grid' }),
-            new TraitConfig('gridTemplateRows', 'Rows', TraitInputType.GridTemplate, undefined, 'auto', false, { trait: 'display', values: 'grid' }),
-            new TraitConfig('justifyItems', 'Justify Items', TraitInputType.SelectButton, [
-                { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-horizontal' },
-                { value: 'start', label: 'Start', icon: 'ph-thin ph-align-left' },
-                { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-horizontal' },
-                { value: 'end', label: 'End', icon: 'ph-thin ph-align-right' },
-            ], 'stretch', false, { trait: 'display', values: 'grid' }),
-            new TraitConfig('alignContent', 'Align Content', TraitInputType.SelectButton, [
-                { value: 'start', label: 'Start', icon: 'ph-thin ph-align-top' },
-                { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-vertical' },
-                { value: 'end', label: 'End', icon: 'ph-thin ph-align-bottom' },
-                { value: 'space-between', label: 'Space Between', icon: 'ph-thin ph-distribute-vertical' },
-                { value: 'space-around', label: 'Space Around', icon: 'ph-thin ph-dots-three' },
-                { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-vertical' },
-            ], 'stretch', false, { trait: 'display', values: 'grid' }),
-            // ── Direction (always visible) ────────────────────────────────────
-            new TraitConfig('direction', 'Text Direction', TraitInputType.SelectButton, [
-                { value: 'ltr', label: 'LTR' },
-                { value: 'rtl', label: 'RTL' },
-            ], 'ltr'),
-        ]);
-    }
-}
-// ─── Size (replaces Dimensions) ───────────────────────────────────────────────
-class SizeGroupStyleConfig extends GroupStyleConfig {
-    constructor() {
-        super(StyleCategory.Size, [
-            new TraitConfig('width', 'W', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
-            new TraitConfig('height', 'H', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
-            new TraitConfig('minWidth', 'Min W', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
-            new TraitConfig('minHeight', 'Min H', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
-            new TraitConfig('maxWidth', 'Max W', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
-            new TraitConfig('maxHeight', 'Max H', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
-            new TraitConfig('aspectRatio', 'Aspect Ratio', TraitInputType.Text, undefined, 'auto'),
-        ]);
-    }
-}
-/** @deprecated Use SizeGroupStyleConfig instead. */
-class DimensionsGroupStyleConfig extends SizeGroupStyleConfig {
-}
-// ─── Background ───────────────────────────────────────────────────────────────
-class BackgroundGroupStyleConfig extends GroupStyleConfig {
-    constructor() {
-        super(StyleCategory.Background, [
-            new TraitConfig('backgroundColor', 'Background', TraitInputType.Color, { allowGradient: true, allowTransparent: true, formats: ['hex', 'rgb', 'hsl', 'transparent'] }, 'transparent'),
-        ]);
-    }
-}
-class SpacingGroupStyleConfig extends GroupStyleConfig {
-    constructor() {
-        super(StyleCategory.Spacing, [
-            new TraitConfig('margin', 'Margin', TraitInputType.DirectionalSize, {
-                allowNegative: true,
-                allowLinkedSlider: true,
-                slider: { min: 0, max: 200, step: 1 }
-            }, '0px 0px 0px 0px'),
-            new TraitConfig('padding', 'Padding', TraitInputType.DirectionalSize, {
-                allowNegative: false,
-                allowLinkedSlider: true,
-                slider: { min: 0, max: 200, step: 1 }
-            }, '0px 0px 0px 0px')
-        ]);
-    }
-}
-class BorderGroupStyleConfig extends GroupStyleConfig {
-    constructor() {
-        super(StyleCategory.Border, [
-            new TraitConfig('borderWidth', 'Border Width', TraitInputType.DirectionalSize, {
-                units: UNITS_FIXED,
-                allowNegative: false,
-                allowLinkedSlider: true,
-                slider: { min: 0, max: 32, step: 1 }
-            }, '0px'),
-            new TraitConfig('borderStyle', 'Border Style', TraitInputType.SelectButton, [
-                { value: 'solid', icon: 'ph-thin ph-line-segment' },
-                { value: 'dashed', icon: 'ph-thin ph-dots-three' },
-                { value: 'dotted', icon: 'ph-thin ph-dots-six' },
-            ], 'solid'),
-            new TraitConfig('borderColor', 'Border Color', TraitInputType.Color, { allowGradient: false, allowTransparent: false, formats: ['hex', 'rgb', 'hsl'] }, '#CCCCCC'),
-            new TraitConfig('borderRadius', 'Border Radius', TraitInputType.DirectionalSize, {
-                units: UNITS_FIXED,
-                allowNegative: false,
-                allowLinkedSlider: true,
-                linkByDefault: true,
-                slider: { min: 0, max: 120, step: 1 },
-                segments: [
-                    { key: 'top-left', icon: 'ph-arrow-bend-up-left', ariaLabel: 'top left radius' },
-                    { key: 'top-right', icon: 'ph-arrow-bend-up-right', ariaLabel: 'top right radius' },
-                    { key: 'bottom-right', icon: 'ph-arrow-bend-down-right', ariaLabel: 'bottom right radius' },
-                    { key: 'bottom-left', icon: 'ph-arrow-bend-down-left', ariaLabel: 'bottom left radius' }
-                ]
-            }, '0px')
-        ]);
-    }
-}
-class TypographyGroupStyleConfig extends GroupStyleConfig {
-    constructor() {
-        super(StyleCategory.Typography, [
-            new TraitConfig('fontFamily', 'Font Family', TraitInputType.FontFamily, [], 'Poppins, sans-serif'),
-            new TraitConfig('fontSize', 'Font Size', TraitInputType.Scrub, { min: 8, max: 200, step: 1, units: UNITS_FIXED }, '16px'),
-            new TraitConfig('fontWeight', 'Font Weight', TraitInputType.Select, ['100', '200', '300', '400', '500', '600', '700', '800', '900'], '400'),
-            new TraitConfig('color', 'Color', TraitInputType.Color, { allowGradient: false, allowTransparent: false, formats: ['hex', 'rgb', 'hsl'] }, '#000000'),
-            new TraitConfig('lineHeight', 'Line Height', TraitInputType.Select, ['1', '1.2', '1.4', '1.5', '1.75', '2', '2.5'], '1.5'),
-            new TraitConfig('letterSpacing', 'Letter Spacing', TraitInputType.Scrub, { min: -5, max: 50, step: 0.5, units: UNITS_FIXED }, '0px'),
-            new TraitConfig('textAlign', 'Alignment', TraitInputType.SelectButton, [
-                { value: 'left', icon: 'ph-thin ph-text-align-left' },
-                { value: 'center', icon: 'ph-thin ph-text-align-center' },
-                { value: 'right', icon: 'ph-thin ph-text-align-right' },
-                { value: 'justify', icon: 'ph-thin ph-text-align-justify' },
-            ], 'left'),
-            new TraitConfig('fontStyle', 'Italic', TraitInputType.SelectButton, { items: [{ value: 'italic', icon: 'ph-thin ph-text-italic', label: 'Italic' }], allowEmpty: true, noneValue: 'normal' }, 'normal', true),
-            new TraitConfig('textDecoration', 'Underline', TraitInputType.SelectButton, { items: [{ value: 'underline', icon: 'ph-thin ph-text-underline', label: 'Underline' }], allowEmpty: true, noneValue: 'none' }, 'none', true),
-        ]);
-    }
-}
-class EffectsGroupStyleConfig extends GroupStyleConfig {
-    constructor() {
-        super(StyleCategory.Effects, [
-            new TraitConfig('opacity', 'Opacity', TraitInputType.Scrub, { min: 0, max: 1, step: 0.01, units: [''] }, '1'),
-            new TraitConfig('mixBlendMode', 'Blend Mode', TraitInputType.Select, [
-                'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten',
-                'color-dodge', 'color-burn', 'hard-light', 'soft-light',
-                'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity',
-            ], 'normal'),
-            new TraitConfig('cursor', 'Cursor', TraitInputType.Select, [
-                'auto', 'default', 'pointer', 'text', 'move', 'not-allowed',
-                'grab', 'grabbing', 'crosshair', 'zoom-in', 'zoom-out', 'none',
-            ], 'auto'),
-        ]);
-    }
-}
-function flattenSchemaFields(properties, prefix = '') {
-    const result = [];
-    for (const [key, field] of Object.entries(properties)) {
-        const fullPath = prefix ? `${prefix}.${key}` : key;
-        if (field.type === 'object' && field.properties) {
-            result.push(...flattenSchemaFields(field.properties, fullPath));
-        }
-        else {
-            result.push({ label: fullPath, value: fullPath });
-        }
-    }
-    return result;
-}
-
 class InteractionsPanelComponent {
     constructor(overlayService) {
         this.overlayService = overlayService;
@@ -4872,5 +4918,5 @@ class TextBlockComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, GroupStyleConfig, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, buildPresetStyleTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
+export { ACTION_TYPE_OPTIONS, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, GroupStyleConfig, INTERACTION_STATES, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, buildPresetStyleTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map