@vectoriox/iox-builder 1.4.3 → 1.4.4

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;
@@ -3825,363 +4189,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 +4879,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