@yourself.create/ngx-form-designer 0.0.4 → 0.0.5

package/fesm2022/uch-web-ngx-form-designer.mjs

@@ -1,6 +1,6 @@
 import { v4 } from 'uuid';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, NgModule, inject, signal, computed, EventEmitter, DestroyRef, Injector, afterNextRender, ViewContainerRef, Input, ViewChild, Output, Inject, ChangeDetectionStrategy, Component, effect, ElementRef, NgZone, input, output, HostListener, ContentChildren, untracked, ChangeDetectorRef, Pipe } from '@angular/core';
+import { Injectable, InjectionToken, NgModule, inject, signal, computed, EventEmitter, DestroyRef, Injector, afterNextRender, ViewContainerRef, Input, ViewChild, Output, Inject, ChangeDetectionStrategy, Component, effect, ElementRef, NgZone, input, output, HostListener, untracked, ChangeDetectorRef, Pipe, ContentChildren } from '@angular/core';
 import { BehaviorSubject, Subject, merge, of, filter, map, debounceTime as debounceTime$1, skip, firstValueFrom } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
@@ -491,18 +491,9 @@ class FormEngine {
         const field = this.getFieldById(fieldId);
         if (!field)
             return false;
-        // 1. Legacy Conditional Visibility
-        if (field.conditionalVisibility) {
-            const cv = field.conditionalVisibility;
-            const val = this.values[cv.fieldName];
-            if (cv.operator === 'equals' && val !== cv.value)
-                return false;
-            if (cv.operator === 'notEquals' && val === cv.value)
-                return false;
-        }
-        // 2. Dependencies (Legacy)
+        // 1. Dependencies (Legacy)
         let visible = this.evaluateDependencyRules(field, 'show', 'hide', true);
-        // 3. Enterprise Rules
+        // 2. Enterprise Rules
         visible = this.evaluateEnterpriseRules(field, 'visible', 'hidden', visible);
         return visible;
     }
@@ -823,6 +814,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 }]
         }] });
 
+const TRANSFORM_CONTROL_KEYS = new Set([
+    'transformX',
+    'transformY',
+    'transformZ',
+    'rotate',
+    'scale'
+]);
 const WRAPPER_SURFACE_STYLE_KEYS = new Set([
     'backgroundColor',
     'borderColor',
@@ -860,10 +858,13 @@ function normalizeStyle$1(style) {
     if (!style)
         return {};
     const result = {};
+    const transform = buildTransform(style);
     Object.keys(style).forEach(key => {
         const value = style[key];
         if (value === undefined || value === null || value === '')
             return;
+        if (TRANSFORM_CONTROL_KEYS.has(key))
+            return;
         // 1. Check for Spacing Tokens (padding*, margin*, gap)
         // Only map known tokens to avoid accidental string matching
         const isSpacing = /^(padding|margin|gap)/i.test(key);
@@ -892,6 +893,10 @@ function normalizeStyle$1(style) {
         }
         result[key] = value;
     });
+    if (transform) {
+        const existingTransform = typeof result['transform'] === 'string' ? result['transform'].trim() : '';
+        result['transform'] = existingTransform ? `${existingTransform} ${transform}` : transform;
+    }
     return result;
 }
 function mergeAndNormalize(base, override) {
@@ -930,6 +935,75 @@ function hasWrapperSurfaceStyles(style) {
     }
     return Object.keys(style).some(key => WRAPPER_SURFACE_STYLE_KEYS.has(key));
 }
+function buildTransform(style) {
+    const transforms = [];
+    const translateX = normalizeLength(style['transformX']);
+    const translateY = normalizeLength(style['transformY']);
+    const translateZ = normalizeLength(style['transformZ']);
+    const rotate = normalizeAngle(style['rotate']);
+    const scale = normalizeScale(style['scale']);
+    if (translateX || translateY || translateZ) {
+        transforms.push(`translate3d(${translateX ?? '0px'}, ${translateY ?? '0px'}, ${translateZ ?? '0px'})`);
+    }
+    if (rotate) {
+        transforms.push(`rotate(${rotate})`);
+    }
+    if (scale) {
+        transforms.push(`scale(${scale})`);
+    }
+    return transforms.join(' ');
+}
+function normalizeLength(value) {
+    if (value === undefined || value === null || value === '') {
+        return null;
+    }
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return `${value}px`;
+    }
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        if (!trimmed) {
+            return null;
+        }
+        if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
+            return `${trimmed}px`;
+        }
+        return trimmed;
+    }
+    return null;
+}
+function normalizeAngle(value) {
+    if (value === undefined || value === null || value === '') {
+        return null;
+    }
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return `${value}deg`;
+    }
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        if (!trimmed) {
+            return null;
+        }
+        if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
+            return `${trimmed}deg`;
+        }
+        return trimmed;
+    }
+    return null;
+}
+function normalizeScale(value) {
+    if (value === undefined || value === null || value === '') {
+        return null;
+    }
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return String(value);
+    }
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        return trimmed || null;
+    }
+    return null;
+}
 
 const WIDGET_EDITOR_CONTEXT = new InjectionToken('WIDGET_EDITOR_CONTEXT');
 
@@ -1023,6 +1097,7 @@ class DesignerStateService {
     isReadOnly = signal(false);
     // Structure of clipboard data
     clipboard = signal(null);
+    pendingFieldInsert = signal(null);
     history = [];
     historyIndex = signal(-1);
     historyLength = signal(0);
@@ -1043,6 +1118,21 @@ class DesignerStateService {
         const entry = this.layoutIndex()[id];
         return entry?.node ?? null;
     });
+    selectedEntry = computed(() => {
+        const id = this.selectedNodeId();
+        if (!id)
+            return null;
+        return this.layoutIndex()[id] ?? null;
+    });
+    selectedColumnId = computed(() => this.findSelectionColumnEntry(this.selectedEntry())?.path.at(-1) ?? null);
+    selectedRowId = computed(() => this.findSelectionRowEntry(this.selectedEntry())?.path.at(-1) ?? null);
+    canInsertColumnBeforeSelection = computed(() => !!this.resolveColumnInsertTarget(this.selectedEntry()));
+    canInsertColumnAfterSelection = computed(() => !!this.resolveColumnInsertTarget(this.selectedEntry()));
+    canInsertRowInSelectedColumn = computed(() => !!this.findSelectionColumnEntry(this.selectedEntry()));
+    canInsertRowBeforeSelection = computed(() => !!this.resolveRelativeRowInsertTarget(this.selectedEntry()));
+    canInsertRowAfterSelection = computed(() => !!this.resolveRelativeRowInsertTarget(this.selectedEntry()));
+    canArmFieldInsertBeforeSelection = computed(() => !!this.getSelectedFieldReference());
+    canArmFieldInsertAfterSelection = computed(() => !!this.getSelectedFieldReference());
     selectedField = computed(() => {
         const selectedId = this.selectedNodeId();
         if (!selectedId)
@@ -1091,6 +1181,7 @@ class DesignerStateService {
         this.restoreSnapshot(nextIndex);
     }
     selectNode(id) {
+        this.pendingFieldInsert.set(null);
         if (!id) {
             this.selectedNodeId.set(null);
             this.selectedNodeIds.set([]);
@@ -1102,6 +1193,7 @@ class DesignerStateService {
         this.closeContextMenu();
     }
     toggleNodeSelection(id) {
+        this.pendingFieldInsert.set(null);
         const current = this.selectedNodeIds();
         const exists = current.includes(id);
         const next = exists ? current.filter(item => item !== id) : [...current, id];
@@ -1116,6 +1208,14 @@ class DesignerStateService {
     isNodeSelected(nodeId) {
         return this.selectedNodeIds().includes(nodeId);
     }
+    isSelectionRowAncestor(nodeId) {
+        const selectedId = this.selectedNodeId();
+        return !!selectedId && selectedId !== nodeId && this.selectedRowId() === nodeId;
+    }
+    isSelectionColumnAncestor(nodeId) {
+        const selectedId = this.selectedNodeId();
+        return !!selectedId && selectedId !== nodeId && this.selectedColumnId() === nodeId;
+    }
     composeScopedNodeId(scopePath, nodeId) {
         return composeScopedNodeId(scopePath, nodeId);
     }
@@ -1364,6 +1464,7 @@ class DesignerStateService {
                 }
             };
             removeRecursive(scopeSchema.layout);
+            this.pruneEmptyRows(scopeSchema.layout);
             scopeSchema.fields = scopeSchema.fields.filter(field => !fieldsToRemove.has(field.id));
         }
         this.setSchema(nextSchema);
@@ -1559,20 +1660,67 @@ class DesignerStateService {
         const selectedId = this.selectedNodeId();
         const selectedEntry = selectedId ? this.layoutIndex()[selectedId] : undefined;
         const insertionScopePath = this.resolveInsertionScopePath(selectedEntry);
+        const pendingFieldInsert = this.pendingFieldInsert();
+        const canInsertRelativeToSelectedWidget = !!selectedEntry
+            && selectedEntry.node.type === 'widget'
+            && this.sameScope(selectedEntry.scopePath, insertionScopePath)
+            && !!selectedEntry.node.refId;
         const nextSchema = this.cloneValue(current);
         const targetSchema = this.resolveSchemaAtScope(nextSchema, insertionScopePath);
         if (!targetSchema)
             return;
-        const targetCol = this.resolveTargetColumnForFieldInsert(targetSchema, selectedEntry, insertionScopePath);
-        if (!targetCol)
-            return;
         const inserted = this.createInsertedWidgets(widgetDef, widgetDef.type);
-        targetSchema.fields.push(...inserted.fields);
-        targetCol.children.push(...inserted.nodes);
+        const targetedInsert = pendingFieldInsert
+            ? this.resolveProgrammaticFieldInsertTarget(nextSchema, {
+                referenceFieldId: pendingFieldInsert.referenceFieldId,
+                position: pendingFieldInsert.position
+            })
+            : canInsertRelativeToSelectedWidget
+                ? this.resolveProgrammaticFieldInsertTarget(nextSchema, {
+                    referenceFieldId: selectedEntry.node.refId,
+                    position: 'after'
+                })
+                : null;
+        if (targetedInsert) {
+            targetedInsert.schema.fields.push(...inserted.fields);
+            targetedInsert.column.children.splice(targetedInsert.index, 0, ...inserted.nodes);
+        }
+        else {
+            const targetCol = this.resolveTargetColumnForFieldInsert(targetSchema, selectedEntry, insertionScopePath);
+            if (!targetCol)
+                return;
+            targetSchema.fields.push(...inserted.fields);
+            targetCol.children.push(...inserted.nodes);
+        }
+        this.pendingFieldInsert.set(null);
         this.setSchema(nextSchema);
         const primaryNode = inserted.primaryNode;
         this.selectNode(this.composeScopedNodeId(insertionScopePath, primaryNode.id));
     }
+    insertColumnBeforeSelection() {
+        this.insertColumnRelativeToSelection('before');
+    }
+    insertColumnAfterSelection() {
+        this.insertColumnRelativeToSelection('after');
+    }
+    insertRowBeforeSelection() {
+        this.insertRowRelativeToSelection('before');
+    }
+    insertRowAfterSelection() {
+        this.insertRowRelativeToSelection('after');
+    }
+    insertRowInSelectedColumn() {
+        const columnEntry = this.findSelectionColumnEntry(this.selectedEntry());
+        if (!columnEntry)
+            return;
+        this.insertRowInColumn(columnEntry.path.at(-1) ?? columnEntry.rawNodeId, 1);
+    }
+    armFieldInsertBeforeSelection() {
+        this.armFieldInsertForSelection('before');
+    }
+    armFieldInsertAfterSelection() {
+        this.armFieldInsertForSelection('after');
+    }
     insertField(options) {
         if (this.isReadOnly())
             return null;
@@ -1969,11 +2117,21 @@ class DesignerStateService {
         const scopeSchema = this.resolveSchemaAtScope(newSchema, entry.scopePath);
         if (!scopeSchema)
             return;
+        const fieldsToRemove = new Set();
+        const collectFieldIds = (node) => {
+            if (node.type === 'widget' && node.refId) {
+                fieldsToRemove.add(node.refId);
+            }
+            if (node.type === 'row' || node.type === 'col') {
+                node.children.forEach(child => collectFieldIds(child));
+            }
+        };
         // Find parent row and remove column
         const removeFromRow = (node) => {
             if (node.type === 'row') {
                 const idx = node.children.findIndex(c => c.id === entry.rawNodeId && c.type === 'col');
                 if (idx !== -1) {
+                    collectFieldIds(node.children[idx]);
                     node.children.splice(idx, 1);
                     return true;
                 }
@@ -1987,6 +2145,8 @@ class DesignerStateService {
             return false;
         };
         removeFromRow(scopeSchema.layout);
+        this.pruneEmptyRows(scopeSchema.layout);
+        scopeSchema.fields = scopeSchema.fields.filter(field => !fieldsToRemove.has(field.id));
         this.setSchema(newSchema);
     }
     /** Set preset column layout (e.g., 3,4,6) on a row */
@@ -2199,6 +2359,7 @@ class DesignerStateService {
             return false;
         };
         removeFromParent(scopeSchema.layout, entry.rawNodeId);
+        this.pruneEmptyRows(scopeSchema.layout);
         scopeSchema.fields = scopeSchema.fields.filter(field => !fieldsToRemove.has(field.id));
         // Clear selection
         if (this.selectedNodeId() === nodeId || this.selectedNodeId() === this.composeScopedNodeId(entry.scopePath, entry.rawNodeId)) {
@@ -2418,6 +2579,22 @@ class DesignerStateService {
             return null;
         return selectedEntry;
     }
+    findSelectionColumnEntry(entry) {
+        return this.findAncestorEntryByType(entry, 'col');
+    }
+    findSelectionRowEntry(entry) {
+        return this.findAncestorEntryByType(entry, 'row');
+    }
+    findAncestorEntryByType(entry, type) {
+        let cursor = entry;
+        while (cursor) {
+            if (cursor.node.type === type) {
+                return cursor;
+            }
+            cursor = cursor.parentId ? this.layoutIndex()[cursor.parentId] : null;
+        }
+        return null;
+    }
     resolveSchemaAtScope(root, scopePath) {
         let cursor = root;
         for (const repeatableFieldId of scopePath) {
@@ -2464,6 +2641,102 @@ class DesignerStateService {
         }
         return this.findFirstColumn(targetSchema.layout);
     }
+    resolveColumnInsertTarget(selectionEntry) {
+        const columnEntry = this.findSelectionColumnEntry(selectionEntry);
+        const rowEntry = this.findSelectionRowEntry(selectionEntry);
+        if (!columnEntry || !rowEntry)
+            return null;
+        return { rowEntry, columnEntry };
+    }
+    insertColumnRelativeToSelection(position) {
+        if (this.isReadOnly())
+            return;
+        const target = this.resolveColumnInsertTarget(this.selectedEntry());
+        if (!target)
+            return;
+        const current = this.schema();
+        const nextSchema = this.cloneValue(current);
+        const scopeSchema = this.resolveSchemaAtScope(nextSchema, target.rowEntry.scopePath);
+        if (!scopeSchema)
+            return;
+        const rowNode = this.findNode(scopeSchema.layout, target.rowEntry.rawNodeId);
+        const selectedColumn = this.findNode(scopeSchema.layout, target.columnEntry.rawNodeId);
+        if (rowNode?.type !== 'row' || selectedColumn?.type !== 'col')
+            return;
+        const insertIndex = position === 'before' ? target.columnEntry.index : target.columnEntry.index + 1;
+        const nextColumn = {
+            id: v4(),
+            type: 'col',
+            responsive: this.cloneValue(selectedColumn.responsive ?? { xs: 12 }),
+            children: []
+        };
+        rowNode.children.splice(insertIndex, 0, nextColumn);
+        this.setSchema(nextSchema);
+        this.selectNode(this.composeScopedNodeId(target.rowEntry.scopePath, nextColumn.id));
+    }
+    resolveRelativeRowInsertTarget(selectionEntry) {
+        if (!selectionEntry)
+            return null;
+        if (selectionEntry.node.type === 'widget') {
+            const containerEntry = this.findSelectionColumnEntry(selectionEntry);
+            if (!containerEntry)
+                return null;
+            return { containerEntry, referenceIndex: selectionEntry.index };
+        }
+        if (selectionEntry.node.type === 'row') {
+            const containerEntry = selectionEntry.parentId
+                ? this.findAncestorEntryByType(this.layoutIndex()[selectionEntry.parentId], 'col')
+                : null;
+            if (!containerEntry)
+                return null;
+            return { containerEntry, referenceIndex: selectionEntry.index };
+        }
+        return null;
+    }
+    insertRowRelativeToSelection(position) {
+        if (this.isReadOnly())
+            return;
+        const target = this.resolveRelativeRowInsertTarget(this.selectedEntry());
+        if (!target)
+            return;
+        const current = this.schema();
+        const nextSchema = this.cloneValue(current);
+        const scopeSchema = this.resolveSchemaAtScope(nextSchema, target.containerEntry.scopePath);
+        if (!scopeSchema)
+            return;
+        const container = this.findNode(scopeSchema.layout, target.containerEntry.rawNodeId);
+        if (container?.type !== 'col')
+            return;
+        const nextRow = {
+            id: v4(),
+            type: 'row',
+            children: [
+                {
+                    id: v4(),
+                    type: 'col',
+                    responsive: { xs: 12 },
+                    children: []
+                }
+            ]
+        };
+        const insertIndex = position === 'before' ? target.referenceIndex : target.referenceIndex + 1;
+        container.children.splice(insertIndex, 0, nextRow);
+        this.setSchema(nextSchema);
+        this.selectNode(this.composeScopedNodeId(target.containerEntry.scopePath, nextRow.children[0].id));
+    }
+    armFieldInsertForSelection(position) {
+        const referenceFieldId = this.getSelectedFieldReference();
+        if (!referenceFieldId)
+            return;
+        this.pendingFieldInsert.set({ referenceFieldId, position });
+    }
+    getSelectedFieldReference() {
+        const entry = this.selectedEntry();
+        if (!entry || entry.node.type !== 'widget')
+            return null;
+        const refId = entry.node.refId;
+        return typeof refId === 'string' && refId.trim().length > 0 ? refId : null;
+    }
     resolveFieldWidgetDefinition(widgetId, type) {
         if (widgetId) {
             const byId = this.widgetDefs.find(widget => widget.id === widgetId);
@@ -2657,6 +2930,20 @@ class DesignerStateService {
         const [removed] = children.splice(result.index, 1);
         return removed ?? null;
     }
+    pruneEmptyRows(node) {
+        if (node.type === 'widget') {
+            return true;
+        }
+        if (node.type === 'col') {
+            node.children = node.children.filter(child => this.pruneEmptyRows(child));
+            return true;
+        }
+        if (node.type === 'row') {
+            node.children = node.children.filter(child => this.pruneEmptyRows(child));
+            return node.children.length > 0;
+        }
+        return true;
+    }
     findWidgetByRefId(node, refId) {
         if (node.type === 'widget' && node.refId === refId) {
             return node;
@@ -2863,6 +3150,12 @@ class LayoutNodeComponent {
     get isSelected() {
         return this.designerState.isNodeSelected(this.getScopedNodeId(this.node.id));
     }
+    get isRowSelectionAncestor() {
+        return this.node.type === 'row' && this.designerState.isSelectionRowAncestor(this.getScopedNodeId(this.node.id));
+    }
+    get isColumnSelectionAncestor() {
+        return this.node.type === 'col' && this.designerState.isSelectionColumnAncestor(this.getScopedNodeId(this.node.id));
+    }
     get isResizing() {
         return this.activeResizeNodeId === this.node.id;
     }
@@ -2961,6 +3254,24 @@ class LayoutNodeComponent {
     wrapWidgetInRow() {
         this.designerState.wrapWidgetInRow(this.getScopedNodeId(this.node.id));
     }
+    decreaseSelectedColumnSpan() {
+        this.adjustSelectedColumnSpan(-1);
+    }
+    increaseSelectedColumnSpan() {
+        this.adjustSelectedColumnSpan(1);
+    }
+    canDecreaseSelectedColumnSpan() {
+        const span = this.getSelectedColumnSpan();
+        return span !== null && span > LayoutNodeComponent.MIN_COLUMN_SPAN;
+    }
+    canIncreaseSelectedColumnSpan() {
+        const span = this.getSelectedColumnSpan();
+        return span !== null && span < LayoutNodeComponent.MAX_COLUMN_SPAN;
+    }
+    getSelectedColumnSpanLabel() {
+        const span = this.getSelectedColumnSpan();
+        return span === null ? '--/12' : `${span}/12`;
+    }
     getNodeTypeLabel() {
         if (this.node.type === 'widget') {
             const widgetNode = this.node;
@@ -3270,6 +3581,32 @@ class LayoutNodeComponent {
         node.responsive[this.breakpoint] = nextSpan;
         this.cdr.detectChanges();
     }
+    adjustSelectedColumnSpan(delta) {
+        const columnEntry = this.getSelectedColumnEntry();
+        const column = columnEntry?.node;
+        if (!column || column.type !== 'col')
+            return;
+        const responsive = { ...(column.responsive ?? { xs: LayoutNodeComponent.MAX_COLUMN_SPAN }) };
+        const currentSpan = this.getEffectiveSpan(responsive);
+        const nextSpan = Math.max(LayoutNodeComponent.MIN_COLUMN_SPAN, Math.min(LayoutNodeComponent.MAX_COLUMN_SPAN, currentSpan + delta));
+        if (nextSpan === currentSpan)
+            return;
+        responsive[this.breakpoint] = nextSpan;
+        this.designerState.updateNodeResponsive(columnEntry.path.at(-1) ?? columnEntry.rawNodeId, responsive);
+    }
+    getSelectedColumnSpan() {
+        const columnEntry = this.getSelectedColumnEntry();
+        const column = columnEntry?.node;
+        if (!column || column.type !== 'col')
+            return null;
+        return this.getEffectiveSpan(column.responsive ?? { xs: LayoutNodeComponent.MAX_COLUMN_SPAN });
+    }
+    getSelectedColumnEntry() {
+        const columnId = this.designerState.selectedColumnId();
+        if (!columnId)
+            return null;
+        return this.designerState.layoutIndex()[columnId] ?? null;
+    }
     getColClasses(node) {
         if (node.type !== 'col')
             return '';
@@ -3445,6 +3782,9 @@ class LayoutNodeComponent {
              [class.outline-dashed]="designMode && showLayoutGuides"
              [class.outline-1]="designMode && showLayoutGuides"
              [class.outline-blue-200]="designMode && showLayoutGuides && !isSelected"
+             [class.ring-1]="designMode && isRowSelectionAncestor"
+             [class.ring-emerald-200]="designMode && isRowSelectionAncestor"
+             [class.bg-emerald-50]="designMode && isRowSelectionAncestor"
              [class.ring-2]="designMode && isSelected"
              [class.ring-blue-500]="designMode && isSelected"
              [class.bg-blue-50]="designMode && isSelected">
@@ -3520,6 +3860,9 @@ class LayoutNodeComponent {
              [class.outline-dashed]="designMode && showLayoutGuides"
              [class.outline-1]="designMode && showLayoutGuides"
              [class.outline-gray-300]="designMode && showLayoutGuides && !isSelected"
+             [class.ring-1]="designMode && isColumnSelectionAncestor"
+             [class.ring-amber-200]="designMode && isColumnSelectionAncestor"
+             [class.bg-amber-50]="designMode && isColumnSelectionAncestor"
              [class.ring-2]="designMode && isSelected"
              [class.ring-blue-500]="designMode && isSelected"
              [class.bg-blue-50]="designMode && isSelected && asCol(node).children.length === 0">
@@ -3547,6 +3890,22 @@ class LayoutNodeComponent {
                 <lucide-icon name="layout-list" class="w-3.5 h-3.5"></lucide-icon>
             </button>
             <div class="w-px h-4 bg-gray-700 mx-0.5"></div>
+            <button type="button"
+                    (click)="decreaseSelectedColumnSpan()"
+                    class="px-2 py-1 hover:bg-gray-700 rounded transition-colors disabled:opacity-40 disabled:hover:bg-transparent"
+                    title="Decrease width"
+                    [disabled]="!canDecreaseSelectedColumnSpan()">
+                -
+            </button>
+            <span class="min-w-10 text-center text-[10px] font-semibold text-gray-300">{{ getSelectedColumnSpanLabel() }}</span>
+            <button type="button"
+                    (click)="increaseSelectedColumnSpan()"
+                    class="px-2 py-1 hover:bg-gray-700 rounded transition-colors disabled:opacity-40 disabled:hover:bg-transparent"
+                    title="Increase width"
+                    [disabled]="!canIncreaseSelectedColumnSpan()">
+                +
+            </button>
+            <div class="w-px h-4 bg-gray-700 mx-0.5"></div>
             <span class="text-gray-400 uppercase font-semibold text-[10px] px-1.5">Column</span>
         </div>
            
@@ -3582,13 +3941,6 @@ class LayoutNodeComponent {
              <div *cdkDragPlaceholder class="min-h-[50px] bg-blue-50 border-2 border-blue-200 border-dashed mb-2 rounded"></div>
          </div>
          
-         <!-- Placeholder for empty col in designer -->
-         <div *ngIf="asCol(node).children.length === 0 && designMode" 
-              class="h-full w-full min-h-[4rem] flex flex-col items-center justify-center p-4 border-2 border-dashed border-gray-200 rounded-lg bg-gray-50/50 hover:bg-gray-100 hover:border-blue-300 transition-all text-gray-400 gap-2">
-            <lucide-icon name="plus" class="w-5 h-5 opacity-50"></lucide-icon>
-            <span class="text-xs font-medium">Drop Widget Here</span>
-         </div>
-
          <!-- Resize Handle - z-50 to stay above widget overlays -->
          <!-- Width Resize (Right) - Only if not last column in row -->
          <div *ngIf="designMode && isSelected"
@@ -3639,6 +3991,22 @@ class LayoutNodeComponent {
                 <lucide-icon name="group" class="w-3.5 h-3.5"></lucide-icon>
             </button>
             <div class="w-px h-4 bg-gray-700 mx-0.5"></div>
+            <button type="button"
+                    (click)="decreaseSelectedColumnSpan()"
+                    class="px-2 py-1 hover:bg-gray-700 rounded transition-colors disabled:opacity-40 disabled:hover:bg-transparent"
+                    title="Decrease width"
+                    [disabled]="!canDecreaseSelectedColumnSpan()">
+                -
+            </button>
+            <span class="min-w-10 text-center text-[10px] font-semibold text-gray-300">{{ getSelectedColumnSpanLabel() }}</span>
+            <button type="button"
+                    (click)="increaseSelectedColumnSpan()"
+                    class="px-2 py-1 hover:bg-gray-700 rounded transition-colors disabled:opacity-40 disabled:hover:bg-transparent"
+                    title="Increase width"
+                    [disabled]="!canIncreaseSelectedColumnSpan()">
+                +
+            </button>
+            <div class="w-px h-4 bg-gray-700 mx-0.5"></div>
             <span class="text-gray-400 uppercase font-semibold text-[10px] px-1.5">{{ getNodeTypeLabel() }}</span>
         </div>
 
@@ -3699,6 +4067,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
              [class.outline-dashed]="designMode && showLayoutGuides"
              [class.outline-1]="designMode && showLayoutGuides"
              [class.outline-blue-200]="designMode && showLayoutGuides && !isSelected"
+             [class.ring-1]="designMode && isRowSelectionAncestor"
+             [class.ring-emerald-200]="designMode && isRowSelectionAncestor"
+             [class.bg-emerald-50]="designMode && isRowSelectionAncestor"
              [class.ring-2]="designMode && isSelected"
              [class.ring-blue-500]="designMode && isSelected"
              [class.bg-blue-50]="designMode && isSelected">
@@ -3774,6 +4145,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
              [class.outline-dashed]="designMode && showLayoutGuides"
              [class.outline-1]="designMode && showLayoutGuides"
              [class.outline-gray-300]="designMode && showLayoutGuides && !isSelected"
+             [class.ring-1]="designMode && isColumnSelectionAncestor"
+             [class.ring-amber-200]="designMode && isColumnSelectionAncestor"
+             [class.bg-amber-50]="designMode && isColumnSelectionAncestor"
              [class.ring-2]="designMode && isSelected"
              [class.ring-blue-500]="designMode && isSelected"
              [class.bg-blue-50]="designMode && isSelected && asCol(node).children.length === 0">
@@ -3801,6 +4175,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 <lucide-icon name="layout-list" class="w-3.5 h-3.5"></lucide-icon>
             </button>
             <div class="w-px h-4 bg-gray-700 mx-0.5"></div>
+            <button type="button"
+                    (click)="decreaseSelectedColumnSpan()"
+                    class="px-2 py-1 hover:bg-gray-700 rounded transition-colors disabled:opacity-40 disabled:hover:bg-transparent"
+                    title="Decrease width"
+                    [disabled]="!canDecreaseSelectedColumnSpan()">
+                -
+            </button>
+            <span class="min-w-10 text-center text-[10px] font-semibold text-gray-300">{{ getSelectedColumnSpanLabel() }}</span>
+            <button type="button"
+                    (click)="increaseSelectedColumnSpan()"
+                    class="px-2 py-1 hover:bg-gray-700 rounded transition-colors disabled:opacity-40 disabled:hover:bg-transparent"
+                    title="Increase width"
+                    [disabled]="!canIncreaseSelectedColumnSpan()">
+                +
+            </button>
+            <div class="w-px h-4 bg-gray-700 mx-0.5"></div>
             <span class="text-gray-400 uppercase font-semibold text-[10px] px-1.5">Column</span>
         </div>
            
@@ -3836,13 +4226,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
              <div *cdkDragPlaceholder class="min-h-[50px] bg-blue-50 border-2 border-blue-200 border-dashed mb-2 rounded"></div>
          </div>
          
-         <!-- Placeholder for empty col in designer -->
-         <div *ngIf="asCol(node).children.length === 0 && designMode" 
-              class="h-full w-full min-h-[4rem] flex flex-col items-center justify-center p-4 border-2 border-dashed border-gray-200 rounded-lg bg-gray-50/50 hover:bg-gray-100 hover:border-blue-300 transition-all text-gray-400 gap-2">
-            <lucide-icon name="plus" class="w-5 h-5 opacity-50"></lucide-icon>
-            <span class="text-xs font-medium">Drop Widget Here</span>
-         </div>
-
          <!-- Resize Handle - z-50 to stay above widget overlays -->
          <!-- Width Resize (Right) - Only if not last column in row -->
          <div *ngIf="designMode && isSelected"
@@ -3893,6 +4276,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 <lucide-icon name="group" class="w-3.5 h-3.5"></lucide-icon>
             </button>
             <div class="w-px h-4 bg-gray-700 mx-0.5"></div>
+            <button type="button"
+                    (click)="decreaseSelectedColumnSpan()"
+                    class="px-2 py-1 hover:bg-gray-700 rounded transition-colors disabled:opacity-40 disabled:hover:bg-transparent"
+                    title="Decrease width"
+                    [disabled]="!canDecreaseSelectedColumnSpan()">
+                -
+            </button>
+            <span class="min-w-10 text-center text-[10px] font-semibold text-gray-300">{{ getSelectedColumnSpanLabel() }}</span>
+            <button type="button"
+                    (click)="increaseSelectedColumnSpan()"
+                    class="px-2 py-1 hover:bg-gray-700 rounded transition-colors disabled:opacity-40 disabled:hover:bg-transparent"
+                    title="Increase width"
+                    [disabled]="!canIncreaseSelectedColumnSpan()">
+                +
+            </button>
+            <div class="w-px h-4 bg-gray-700 mx-0.5"></div>
             <span class="text-gray-400 uppercase font-semibold text-[10px] px-1.5">{{ getNodeTypeLabel() }}</span>
         </div>
 
@@ -4864,7 +5263,7 @@ class JsonFormRendererComponent {
         this.valueChange.emit(fieldValueMap);
         this.groupedValueChange.emit(groupedValues);
         this.combinedValueChange.emit(combinedValues);
-        this.validationChange.emit(this.getValidationResult());
+        this.validationChange.emit(this.getValidationResult(true));
     }
     disposeRunner() {
         if (this.runner) {
@@ -5016,11 +5415,7 @@ class JsonFormRendererComponent {
         event.preventDefault();
         if (this.mode === 'design')
             return;
-        const errors = this.engine?.validate() ?? {};
-        const validation = {
-            errors: { ...errors },
-            isValid: Object.keys(errors).length === 0
-        };
+        const validation = this.getValidationResult(true);
         this.validationChange.emit(validation);
         // Notify all widgets to show errors if any
         this.engine?.submit();
@@ -5042,13 +5437,134 @@ class JsonFormRendererComponent {
             validation
         });
     }
-    getValidationResult() {
-        const errors = this.engine?.getErrors() ?? {};
+    getValidationResult(revalidate = false) {
+        const errors = revalidate
+            ? (this.engine?.validate() ?? {})
+            : (this.engine?.getErrors() ?? {});
         return {
-            errors,
-            isValid: Object.keys(errors).length === 0
+            errors: { ...errors },
+            isValid: Object.keys(errors).length === 0,
+            fields: this.buildFieldValidationState(errors)
         };
     }
+    buildFieldValidationState(errors) {
+        const schema = this.engine?.getSchema() ?? this.schema;
+        if (!schema)
+            return {};
+        const states = {};
+        for (const field of schema.fields) {
+            const visible = this.engine ? this.engine.isFieldVisible(field.id) : true;
+            const required = visible && (this.engine
+                ? this.engine.isFieldRequired(field.id)
+                : !!field.html5?.required);
+            const fieldErrors = errors[field.name] ? [...errors[field.name]] : [];
+            states[field.name] = {
+                fieldId: field.id,
+                fieldName: field.name,
+                ...(field.label ? { label: field.label } : {}),
+                visible,
+                required,
+                valid: fieldErrors.length === 0,
+                errors: fieldErrors,
+                validators: this.describeFieldValidators(field, visible, required)
+            };
+        }
+        return states;
+    }
+    describeFieldValidators(field, visible, required) {
+        const validators = [];
+        const value = this.engine?.getValue(field.name);
+        const hasValue = !this.isValidationEmpty(value);
+        if (this.hasRequiredValidation(field) || required) {
+            validators.push({
+                name: 'required',
+                source: 'required',
+                active: visible && required,
+                message: 'This field is required.'
+            });
+        }
+        if (field.html5?.minLength !== undefined) {
+            validators.push({
+                name: 'minLength',
+                source: 'html5',
+                active: visible && hasValue,
+                value: field.html5.minLength
+            });
+        }
+        if (field.html5?.maxLength !== undefined) {
+            validators.push({
+                name: 'maxLength',
+                source: 'html5',
+                active: visible && hasValue,
+                value: field.html5.maxLength
+            });
+        }
+        if (field.html5?.min !== undefined) {
+            validators.push({
+                name: 'min',
+                source: 'html5',
+                active: visible && hasValue,
+                value: field.html5.min
+            });
+        }
+        if (field.html5?.max !== undefined) {
+            validators.push({
+                name: 'max',
+                source: 'html5',
+                active: visible && hasValue,
+                value: field.html5.max
+            });
+        }
+        if (field.html5?.pattern) {
+            validators.push({
+                name: 'pattern',
+                source: 'html5',
+                active: visible && hasValue,
+                value: field.html5.pattern
+            });
+        }
+        for (const rule of field.validation ?? []) {
+            validators.push({
+                name: rule.type === 'builtin' ? (rule.name ?? 'builtin') : 'expression',
+                source: 'custom',
+                active: visible && hasValue && this.isValidationRuleActive(rule),
+                value: rule.type === 'expression' ? rule.expression : rule.name,
+                message: rule.message
+            });
+        }
+        return validators;
+    }
+    hasRequiredValidation(field) {
+        if (field.html5?.required)
+            return true;
+        if (field.dependencies?.some(rule => rule.effect === 'require' || rule.effect === 'optional')) {
+            return true;
+        }
+        if (field.rules?.some(rule => rule.action === 'required'
+            || rule.action === 'optional'
+            || rule.elseAction === 'required'
+            || rule.elseAction === 'optional')) {
+            return true;
+        }
+        return false;
+    }
+    isValidationRuleActive(rule) {
+        if (!rule.when)
+            return true;
+        try {
+            const checkFn = new Function('form', `return ${rule.when}`);
+            return checkFn(this.engine?.getValues() ?? {});
+        }
+        catch {
+            return false;
+        }
+    }
+    isValidationEmpty(value) {
+        return value === null
+            || value === undefined
+            || value === ''
+            || (Array.isArray(value) && value.length === 0);
+    }
     async uploadPendingFiles() {
         if (!this.engine)
             return {};
@@ -5678,11 +6194,7 @@ class FormJourneyViewerComponent {
             return { ok: false, reason: 'unknown-page' };
         }
         if (!this.viewOnly && this.renderer?.engine) {
-            const errors = this.renderer.engine.validate();
-            const validation = {
-                errors: { ...errors },
-                isValid: Object.keys(errors).length === 0
-            };
+            const validation = this.renderer.getValidationResult(true);
             this.formValidationChange.emit(validation);
             if (!validation.isValid) {
                 return { ok: false, reason: 'validation' };
@@ -7684,6 +8196,7 @@ class LayoutCanvasComponent {
     showLiveSchemaEditor = signal(false);
     liveSchemaEditorText = signal('');
     liveSchemaEditorError = signal('');
+    openContextSubmenu = signal(null);
     liveSchemaEditorOptions = {
         fontSize: 12,
         lineNumbersMinChars: 3,
@@ -7801,6 +8314,7 @@ class LayoutCanvasComponent {
         this.closeContextMenu();
     }
     closeContextMenu() {
+        this.openContextSubmenu.set(null);
         this.state.closeContextMenu();
     }
     groupSelected() {
@@ -7811,6 +8325,46 @@ class LayoutCanvasComponent {
         this.state.ungroupSelectedFields();
         this.closeContextMenu();
     }
+    hasStructuralInsertActions() {
+        return this.state.canInsertColumnBeforeSelection()
+            || this.state.canInsertColumnAfterSelection()
+            || this.state.canInsertRowInSelectedColumn()
+            || this.state.canInsertRowBeforeSelection()
+            || this.state.canInsertRowAfterSelection()
+            || this.state.canArmFieldInsertBeforeSelection()
+            || this.state.canArmFieldInsertAfterSelection();
+    }
+    toggleInsertSubmenu() {
+        this.openContextSubmenu.update(current => current === 'insert' ? null : 'insert');
+    }
+    insertColumnBeforeSelection() {
+        this.state.insertColumnBeforeSelection();
+        this.closeContextMenu();
+    }
+    insertColumnAfterSelection() {
+        this.state.insertColumnAfterSelection();
+        this.closeContextMenu();
+    }
+    insertRowInSelectedColumn() {
+        this.state.insertRowInSelectedColumn();
+        this.closeContextMenu();
+    }
+    insertRowBeforeSelection() {
+        this.state.insertRowBeforeSelection();
+        this.closeContextMenu();
+    }
+    insertRowAfterSelection() {
+        this.state.insertRowAfterSelection();
+        this.closeContextMenu();
+    }
+    armFieldInsertBeforeSelection() {
+        this.state.armFieldInsertBeforeSelection();
+        this.closeContextMenu();
+    }
+    armFieldInsertAfterSelection() {
+        this.state.armFieldInsertAfterSelection();
+        this.closeContextMenu();
+    }
     onCanvasContextMenu(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -8249,6 +8803,56 @@ class LayoutCanvasComponent {
             <span>Delete</span>
             <span class="opacity-60 text-[10px]">Del</span>
           </button>
+          <div *ngIf="hasStructuralInsertActions()" class="relative">
+            <div class="h-px bg-border-default my-1"></div>
+            <button type="button"
+                    aria-label="Open insert submenu"
+                    class="flex w-full items-center justify-between px-3 py-2 text-left text-text-primary hover:bg-slate-50"
+                    [attr.aria-expanded]="openContextSubmenu() === 'insert'"
+                    (click)="toggleInsertSubmenu(); $event.stopPropagation()">
+              <span>Insert…</span>
+              <span class="text-[10px] opacity-60">{{ openContextSubmenu() === 'insert' ? '‹' : '›' }}</span>
+            </button>
+
+            <div *ngIf="openContextSubmenu() === 'insert'"
+                 class="absolute left-full top-0 ml-1 min-w-[210px] rounded-md border border-border-default bg-surface-default shadow-popover text-[12px]">
+              <button *ngIf="!state.isReadOnly() && state.canInsertColumnBeforeSelection()" type="button"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-50 text-text-primary"
+                      (click)="insertColumnBeforeSelection()">
+                Add column left
+              </button>
+              <button *ngIf="!state.isReadOnly() && state.canInsertColumnAfterSelection()" type="button"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-50 text-text-primary"
+                      (click)="insertColumnAfterSelection()">
+                Add column right
+              </button>
+              <button *ngIf="!state.isReadOnly() && state.canInsertRowInSelectedColumn()" type="button"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-50 text-text-primary"
+                      (click)="insertRowInSelectedColumn()">
+                Add row in column
+              </button>
+              <button *ngIf="!state.isReadOnly() && state.canInsertRowBeforeSelection()" type="button"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-50 text-text-primary"
+                      (click)="insertRowBeforeSelection()">
+                Add row above
+              </button>
+              <button *ngIf="!state.isReadOnly() && state.canInsertRowAfterSelection()" type="button"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-50 text-text-primary"
+                      (click)="insertRowAfterSelection()">
+                Add row below
+              </button>
+              <button *ngIf="!state.isReadOnly() && state.canArmFieldInsertBeforeSelection()" type="button"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-50 text-text-primary"
+                      (click)="armFieldInsertBeforeSelection()">
+                Next widget above
+              </button>
+              <button *ngIf="!state.isReadOnly() && state.canArmFieldInsertAfterSelection()" type="button"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-50 text-text-primary"
+                      (click)="armFieldInsertAfterSelection()">
+                Next widget below
+              </button>
+            </div>
+          </div>
           <div class="h-px bg-border-default my-1"></div>
           <button *ngIf="!state.isReadOnly()" type="button"
                   class="w-full px-3 py-2 text-left hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed text-text-primary"
@@ -8495,6 +9099,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             <span>Delete</span>
             <span class="opacity-60 text-[10px]">Del</span>
           </button>
+          <div *ngIf="hasStructuralInsertActions()" class="relative">
+            <div class="h-px bg-border-default my-1"></div>
+            <button type="button"
+                    aria-label="Open insert submenu"
+                    class="flex w-full items-center justify-between px-3 py-2 text-left text-text-primary hover:bg-slate-50"
+                    [attr.aria-expanded]="openContextSubmenu() === 'insert'"
+                    (click)="toggleInsertSubmenu(); $event.stopPropagation()">
+              <span>Insert…</span>
+              <span class="text-[10px] opacity-60">{{ openContextSubmenu() === 'insert' ? '‹' : '›' }}</span>
+            </button>
+
+            <div *ngIf="openContextSubmenu() === 'insert'"
+                 class="absolute left-full top-0 ml-1 min-w-[210px] rounded-md border border-border-default bg-surface-default shadow-popover text-[12px]">
+              <button *ngIf="!state.isReadOnly() && state.canInsertColumnBeforeSelection()" type="button"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-50 text-text-primary"
+                      (click)="insertColumnBeforeSelection()">
+                Add column left
+              </button>
+              <button *ngIf="!state.isReadOnly() && state.canInsertColumnAfterSelection()" type="button"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-50 text-text-primary"
+                      (click)="insertColumnAfterSelection()">
+                Add column right
+              </button>
+              <button *ngIf="!state.isReadOnly() && state.canInsertRowInSelectedColumn()" type="button"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-50 text-text-primary"
+                      (click)="insertRowInSelectedColumn()">
+                Add row in column
+              </button>
+              <button *ngIf="!state.isReadOnly() && state.canInsertRowBeforeSelection()" type="button"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-50 text-text-primary"
+                      (click)="insertRowBeforeSelection()">
+                Add row above
+              </button>
+              <button *ngIf="!state.isReadOnly() && state.canInsertRowAfterSelection()" type="button"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-50 text-text-primary"
+                      (click)="insertRowAfterSelection()">
+                Add row below
+              </button>
+              <button *ngIf="!state.isReadOnly() && state.canArmFieldInsertBeforeSelection()" type="button"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-50 text-text-primary"
+                      (click)="armFieldInsertBeforeSelection()">
+                Next widget above
+              </button>
+              <button *ngIf="!state.isReadOnly() && state.canArmFieldInsertAfterSelection()" type="button"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-50 text-text-primary"
+                      (click)="armFieldInsertAfterSelection()">
+                Next widget below
+              </button>
+            </div>
+          </div>
           <div class="h-px bg-border-default my-1"></div>
           <button *ngIf="!state.isReadOnly()" type="button"
                   class="w-full px-3 py-2 text-left hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed text-text-primary"
@@ -9606,18 +10260,11 @@ class DynamicPropertiesComponent {
     onPropertyChange;
     designerCtx = inject(DesignerContext);
     validatorTypeOptions = [
-        { label: 'Required', value: 'required' },
-        { label: 'Email', value: 'email' },
-        { label: 'Min Value', value: 'min' },
-        { label: 'Max Value', value: 'max' },
-        { label: 'Min Length', value: 'minLength' },
-        { label: 'Max Length', value: 'maxLength' },
-        { label: 'Pattern', value: 'pattern' }
+        { label: 'Built-in', value: 'builtin' },
+        { label: 'Expression', value: 'expression' }
     ];
-    conditionalTypeOptions = [
-        { label: 'Always Visible', value: 'always' },
-        { label: 'Field Equals', value: 'equals' },
-        { label: 'Field Not Equals', value: 'notEquals' }
+    builtinValidatorOptions = [
+        { label: 'Email', value: 'email' }
     ];
     get properties() {
         if (!this.config)
@@ -9954,18 +10601,15 @@ class DynamicPropertiesComponent {
     addValidator(path) {
         if (this.readOnly)
             return;
-        const validators = this.getValue(path) || [];
-        validators.push({
-            name: 'required',
-            message: 'This field is required'
-        });
+        const validators = [...(this.getValue(path) || [])];
+        validators.push(this.createDefaultValidationRule());
         this.setValue(path, validators);
         this.handleFieldChange();
     }
     removeValidator(path, index) {
         if (this.readOnly)
             return;
-        const validators = this.getValue(path) || [];
+        const validators = [...(this.getValue(path) || [])];
         validators.splice(index, 1);
         this.setValue(path, validators);
         this.handleFieldChange();
@@ -9973,57 +10617,47 @@ class DynamicPropertiesComponent {
     updateValidator(path, index, field, value) {
         if (this.readOnly)
             return;
-        const validators = this.getValue(path) || [];
-        if (validators[index]) {
-            validators[index][field] = value;
-            // Set default message if name changes
-            if (field === 'name') {
-                const messages = {
-                    required: 'This field is required',
-                    min: 'Value is too small',
-                    max: 'Value is too large',
-                    minLength: 'Too short',
-                    maxLength: 'Too long',
-                    pattern: 'Invalid format',
-                    email: 'Invalid email'
-                };
-                validators[index].message = messages[value] || 'Invalid value';
-            }
-            this.setValue(path, validators);
+        const validators = [...(this.getValue(path) || [])];
+        const currentRule = validators[index];
+        if (!currentRule) {
+            return;
         }
+        let nextRule = { ...currentRule };
+        if (field === 'type') {
+            nextRule = value === 'expression'
+                ? {
+                    type: 'expression',
+                    expression: 'return true;',
+                    message: 'Validation failed.'
+                }
+                : this.createDefaultValidationRule();
+        }
+        else if (field === 'name') {
+            nextRule.name = String(value);
+            nextRule.message = this.defaultValidationMessage(nextRule);
+        }
+        else if (field === 'expression') {
+            nextRule.expression = String(value);
+        }
+        else if (field === 'message') {
+            nextRule.message = String(value);
+        }
+        validators[index] = nextRule;
+        this.setValue(path, validators);
+        this.handleFieldChange();
     }
-    getValidatorLabel(name) {
-        const labels = {
-            required: 'Required',
-            min: 'Minimum Value',
-            max: 'Maximum Value',
-            minLength: 'Min Length',
-            maxLength: 'Max Length',
-            pattern: 'Regex Pattern',
-            email: 'Email Address'
+    createDefaultValidationRule() {
+        return {
+            type: 'builtin',
+            name: 'email',
+            message: 'Enter a valid email address.'
         };
-        return labels[name] || name;
     }
-    // Conditional Logic Methods
-    enableConditional(path) {
-        if (this.readOnly)
-            return;
-        this.setValue(path, {
-            action: 'visible',
-            operator: 'eq'
-        });
-    }
-    disableConditional(path) {
-        if (this.readOnly)
-            return;
-        this.setValue(path, null);
-    }
-    updateConditional(path, field, value) {
-        if (this.readOnly)
-            return;
-        const condition = this.getValue(path) || {};
-        condition[field] = value;
-        this.setValue(path, condition);
+    defaultValidationMessage(rule) {
+        if (rule.type === 'builtin' && rule.name === 'email') {
+            return 'Enter a valid email address.';
+        }
+        return 'Validation failed.';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicPropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DynamicPropertiesComponent, isStandalone: true, selector: "app-dynamic-properties", inputs: { onPropertyChange: "onPropertyChange", config: "config", readOnly: "readOnly", includeSections: "includeSections", excludeSections: "excludeSections", allFields: "allFields" }, outputs: { configChange: "configChange" }, usesOnChanges: true, ngImport: i0, template: `
@@ -10180,16 +10814,27 @@ class DynamicPropertiesComponent {
                           </div>
                           <div class="space-y-2">
                               <div *ngFor="let val of getValue(field.key) || []; let i = index" class="flex items-center gap-2 p-2 bg-white rounded border border-gray-200">
-                                  <select [(ngModel)]="val.type"
-                                          (ngModelChange)="handleFieldChange()"
+                                  <select [ngModel]="val.type || 'builtin'"
+                                          (ngModelChange)="updateValidator(field.key, i, 'type', $event)"
                                           class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                                       <option *ngFor="let option of validatorTypeOptions" [value]="option.value">{{ option.label }}</option>
                                   </select>
-                                  <input *ngIf="val.type !== 'required' && val.type !== 'email'"
+                                  <select *ngIf="(val.type || 'builtin') === 'builtin'"
+                                          [ngModel]="val.name || 'email'"
+                                          (ngModelChange)="updateValidator(field.key, i, 'name', $event)"
+                                          class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
+                                      <option *ngFor="let option of builtinValidatorOptions" [value]="option.value">{{ option.label }}</option>
+                                  </select>
+                                  <input *ngIf="val.type === 'expression'"
                                          type="text"
-                                         [(ngModel)]="val.value"
-                                         (blur)="handleFieldChange()"
-                                         placeholder="Value"
+                                         [ngModel]="val.expression || ''"
+                                         (ngModelChange)="updateValidator(field.key, i, 'expression', $event)"
+                                         placeholder="return true;"
+                                         class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
+                                  <input type="text"
+                                         [ngModel]="val.message || ''"
+                                         (ngModelChange)="updateValidator(field.key, i, 'message', $event)"
+                                         placeholder="Validation message"
                                          class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                                   <button type="button"
                                           (click)="removeValidator(field.key, i)"
@@ -10201,36 +10846,6 @@ class DynamicPropertiesComponent {
                       </div>
                     </ui-field-wrapper>
 
-                     <!-- Conditional Editor -->
-                    <ui-field-wrapper *ngIf="field.type === 'conditional-editor'" [label]="field.label || ''" [helpText]="field.helpText || ''">
-                      <div class="w-full border border-gray-200 rounded-lg p-3 bg-gray-50">
-                         <div class="flex flex-col gap-2">
-                             <select [ngModel]="getValue(field.key + '.type')"
-                                     (ngModelChange)="setValue(field.key + '.type', $event); handleFieldChange()"
-                                     class="h-8 w-full rounded border border-gray-300 bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
-                                <option *ngFor="let option of conditionalTypeOptions" [value]="option.value">{{ option.label }}</option>
-                             </select>
-                             <div *ngIf="getValue(field.key + '.type') !== 'always'" class="flex gap-2">
-                                 <input type="text"
-                                        [ngModel]="getValue(field.key + '.field')"
-                                        (ngModelChange)="setValue(field.key + '.field', $event)"
-                                        (blur)="handleFieldChange()"
-                                        placeholder="Field Name"
-                                        class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
-                                 <input type="text"
-                                        [ngModel]="getValue(field.key + '.value')"
-                                        (ngModelChange)="setValue(field.key + '.value', $event)"
-                                        (blur)="handleFieldChange()"
-                                        placeholder="Value"
-                                        class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
-                             </div>
-                         </div>
-                         <div *ngIf="getValue(field.key + '.type') === 'always'" class="text-xs text-gray-400 mt-2">
-                              Field always visible.
-                           </div>
-                      </div>
-                    </ui-field-wrapper>
-
                     <!-- Field Reference -->
                     <ui-field-wrapper *ngIf="field.type === 'field-reference'" [label]="field.label || ''" [helpText]="field.helpText || ''">
                         <select [ngModel]="getValue(field.key) || ''"
@@ -10492,16 +11107,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                           </div>
                           <div class="space-y-2">
                               <div *ngFor="let val of getValue(field.key) || []; let i = index" class="flex items-center gap-2 p-2 bg-white rounded border border-gray-200">
-                                  <select [(ngModel)]="val.type"
-                                          (ngModelChange)="handleFieldChange()"
+                                  <select [ngModel]="val.type || 'builtin'"
+                                          (ngModelChange)="updateValidator(field.key, i, 'type', $event)"
                                           class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                                       <option *ngFor="let option of validatorTypeOptions" [value]="option.value">{{ option.label }}</option>
                                   </select>
-                                  <input *ngIf="val.type !== 'required' && val.type !== 'email'"
+                                  <select *ngIf="(val.type || 'builtin') === 'builtin'"
+                                          [ngModel]="val.name || 'email'"
+                                          (ngModelChange)="updateValidator(field.key, i, 'name', $event)"
+                                          class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
+                                      <option *ngFor="let option of builtinValidatorOptions" [value]="option.value">{{ option.label }}</option>
+                                  </select>
+                                  <input *ngIf="val.type === 'expression'"
                                          type="text"
-                                         [(ngModel)]="val.value"
-                                         (blur)="handleFieldChange()"
-                                         placeholder="Value"
+                                         [ngModel]="val.expression || ''"
+                                         (ngModelChange)="updateValidator(field.key, i, 'expression', $event)"
+                                         placeholder="return true;"
+                                         class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
+                                  <input type="text"
+                                         [ngModel]="val.message || ''"
+                                         (ngModelChange)="updateValidator(field.key, i, 'message', $event)"
+                                         placeholder="Validation message"
                                          class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                                   <button type="button"
                                           (click)="removeValidator(field.key, i)"
@@ -10513,36 +11139,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                       </div>
                     </ui-field-wrapper>
 
-                     <!-- Conditional Editor -->
-                    <ui-field-wrapper *ngIf="field.type === 'conditional-editor'" [label]="field.label || ''" [helpText]="field.helpText || ''">
-                      <div class="w-full border border-gray-200 rounded-lg p-3 bg-gray-50">
-                         <div class="flex flex-col gap-2">
-                             <select [ngModel]="getValue(field.key + '.type')"
-                                     (ngModelChange)="setValue(field.key + '.type', $event); handleFieldChange()"
-                                     class="h-8 w-full rounded border border-gray-300 bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
-                                <option *ngFor="let option of conditionalTypeOptions" [value]="option.value">{{ option.label }}</option>
-                             </select>
-                             <div *ngIf="getValue(field.key + '.type') !== 'always'" class="flex gap-2">
-                                 <input type="text"
-                                        [ngModel]="getValue(field.key + '.field')"
-                                        (ngModelChange)="setValue(field.key + '.field', $event)"
-                                        (blur)="handleFieldChange()"
-                                        placeholder="Field Name"
-                                        class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
-                                 <input type="text"
-                                        [ngModel]="getValue(field.key + '.value')"
-                                        (ngModelChange)="setValue(field.key + '.value', $event)"
-                                        (blur)="handleFieldChange()"
-                                        placeholder="Value"
-                                        class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
-                             </div>
-                         </div>
-                         <div *ngIf="getValue(field.key + '.type') === 'always'" class="text-xs text-gray-400 mt-2">
-                              Field always visible.
-                           </div>
-                      </div>
-                    </ui-field-wrapper>
-
                     <!-- Field Reference -->
                     <ui-field-wrapper *ngIf="field.type === 'field-reference'" [label]="field.label || ''" [helpText]="field.helpText || ''">
                         <select [ngModel]="getValue(field.key) || ''"
@@ -13616,6 +14212,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
   `, styles: [".inspector-input{height:1.75rem;padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);color:var(--color-ink-700)}.inspector-input:focus{outline:none;border-color:var(--color-primary-blue)}.inspector-input-with-unit{display:flex;align-items:center;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);overflow:hidden}.inspector-number-input{height:1.5rem;padding-left:.5rem;padding-right:.5rem;background-color:transparent;border:none;font-size:.75rem;line-height:1rem;color:var(--color-ink-700)}.inspector-number-input:focus{outline:none}.inspector-unit{font-size:10px;color:var(--color-ink-400);padding-left:.25rem;padding-right:.25rem;background-color:var(--color-input-dark);height:1.5rem;display:flex;align-items:center;border-left:1px solid var(--color-border-dark)}\n"] }]
         }] });
 
+class InspectorTransformSectionComponent {
+    style = input({});
+    styleChange = output();
+    numberValue(key, fallback) {
+        const value = this.style()?.[key];
+        if (typeof value === 'number' && Number.isFinite(value)) {
+            return value;
+        }
+        if (typeof value === 'string' && value.trim().length > 0) {
+            const parsed = Number(value);
+            if (Number.isFinite(parsed)) {
+                return parsed;
+            }
+        }
+        return fallback;
+    }
+    updateTransform(key, value) {
+        const parsed = typeof value === 'number' ? value : Number(value);
+        if (!Number.isFinite(parsed)) {
+            return;
+        }
+        this.styleChange.emit({
+            ...(this.style() ?? {}),
+            [key]: parsed
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InspectorTransformSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: InspectorTransformSectionComponent, isStandalone: true, selector: "inspector-transform-section", inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { styleChange: "styleChange" }, ngImport: i0, template: `
+    <div class="flex flex-col gap-3">
+      <ui-range-number
+        label="Translate X"
+        prefix="X"
+        hint="px"
+        helpText="Move the widget horizontally."
+        [min]="-200"
+        [max]="200"
+        [step]="1"
+        [value]="numberValue('transformX', 0)"
+        (valueChange)="updateTransform('transformX', $event)">
+      </ui-range-number>
+
+      <ui-range-number
+        label="Translate Y"
+        prefix="Y"
+        hint="px"
+        helpText="Move the widget vertically."
+        [min]="-200"
+        [max]="200"
+        [step]="1"
+        [value]="numberValue('transformY', 0)"
+        (valueChange)="updateTransform('transformY', $event)">
+      </ui-range-number>
+
+      <ui-range-number
+        label="Translate Z"
+        prefix="Z"
+        hint="px"
+        helpText="Move the widget on the z-axis for 3D transforms."
+        [min]="-200"
+        [max]="200"
+        [step]="1"
+        [value]="numberValue('transformZ', 0)"
+        (valueChange)="updateTransform('transformZ', $event)">
+      </ui-range-number>
+
+      <ui-input
+        label="Rotate"
+        hint="deg"
+        helpText="Rotate the widget in degrees."
+        type="number"
+        [step]="1"
+        [model]="numberValue('rotate', 0)"
+        (modelChange)="updateTransform('rotate', $event)">
+      </ui-input>
+
+      <ui-input
+        label="Scale"
+        helpText="Scale the widget uniformly."
+        type="number"
+        [min]="0"
+        [step]="0.1"
+        [model]="numberValue('scale', 1)"
+        (modelChange)="updateTransform('scale', $event)">
+      </ui-input>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UiInputComponent, selector: "ui-input", inputs: ["label", "hint", "helpText", "placeholder", "type", "min", "max", "step", "model"], outputs: ["modelChange", "onBlur"] }, { kind: "component", type: UiRangeNumberComponent, selector: "ui-range-number", inputs: ["label", "hint", "helpText", "prefix", "min", "max", "step", "value"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InspectorTransformSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'inspector-transform-section',
+                    standalone: true,
+                    imports: [CommonModule, UiInputComponent, UiRangeNumberComponent],
+                    template: `
+    <div class="flex flex-col gap-3">
+      <ui-range-number
+        label="Translate X"
+        prefix="X"
+        hint="px"
+        helpText="Move the widget horizontally."
+        [min]="-200"
+        [max]="200"
+        [step]="1"
+        [value]="numberValue('transformX', 0)"
+        (valueChange)="updateTransform('transformX', $event)">
+      </ui-range-number>
+
+      <ui-range-number
+        label="Translate Y"
+        prefix="Y"
+        hint="px"
+        helpText="Move the widget vertically."
+        [min]="-200"
+        [max]="200"
+        [step]="1"
+        [value]="numberValue('transformY', 0)"
+        (valueChange)="updateTransform('transformY', $event)">
+      </ui-range-number>
+
+      <ui-range-number
+        label="Translate Z"
+        prefix="Z"
+        hint="px"
+        helpText="Move the widget on the z-axis for 3D transforms."
+        [min]="-200"
+        [max]="200"
+        [step]="1"
+        [value]="numberValue('transformZ', 0)"
+        (valueChange)="updateTransform('transformZ', $event)">
+      </ui-range-number>
+
+      <ui-input
+        label="Rotate"
+        hint="deg"
+        helpText="Rotate the widget in degrees."
+        type="number"
+        [step]="1"
+        [model]="numberValue('rotate', 0)"
+        (modelChange)="updateTransform('rotate', $event)">
+      </ui-input>
+
+      <ui-input
+        label="Scale"
+        helpText="Scale the widget uniformly."
+        type="number"
+        [min]="0"
+        [step]="0.1"
+        [model]="numberValue('scale', 1)"
+        (modelChange)="updateTransform('scale', $event)">
+      </ui-input>
+    </div>
+  `
+                }]
+        }] });
+
 const DEDICATED_STYLE_KEYS = new Set([
     'alignItems',
     'alignSelf',
@@ -13684,7 +14435,13 @@ const DEDICATED_STYLE_KEYS = new Set([
     'right',
     'textAlign',
     'textDecoration',
+    'transform',
+    'transformX',
+    'transformY',
+    'transformZ',
     'top',
+    'rotate',
+    'scale',
     'width',
     'zIndex'
 ]);
@@ -17334,6 +18091,15 @@ class WidgetInspectorComponent {
                </div>
             </ui-accordion>
 
+            <ui-accordion title="Transform" [expanded]="false">
+               <div [class.pointer-events-none]="readOnly()" [class.opacity-60]="readOnly()">
+                   <inspector-transform-section
+                      [style]="currentStyle()"
+                      (styleChange)="onStyleChange($event)">
+                   </inspector-transform-section>
+               </div>
+            </ui-accordion>
+
             <ui-accordion title="Position" [expanded]="false">
                <div [class.pointer-events-none]="readOnly()" [class.opacity-60]="readOnly()">
                    <inspector-position-section
@@ -17366,7 +18132,7 @@ class WidgetInspectorComponent {
                   [config]="inspectorField()"
                   [allFields]="stateService.getSelectedScopeFields()"
                   [readOnly]="readOnly()"
-                  [excludeSections]="['Layout', 'Spacing', 'Size', 'Typography', 'Appearance', 'Box Model', 'Position', 'Effects', 'Advanced']"
+                  [excludeSections]="['Layout', 'Spacing', 'Size', 'Typography', 'Appearance', 'Box Model', 'Position', 'Effects', 'Transform', 'Advanced']"
                   (configChange)="onFieldConfigChange($event)">
               </app-dynamic-properties>
            </div>
@@ -17406,7 +18172,7 @@ class WidgetInspectorComponent {
     </div>
   `, isInline: true, styles: [":host{display:block;height:100%}.custom-scrollbar::-webkit-scrollbar{width:8px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#94a3b8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: UiAccordionComponent, selector: "ui-accordion", inputs: ["title", "subtitle", "expanded", "showAdd"] }, { kind: "component", type: 
                 // Style Sections
-                InspectorSpacingSectionComponent, selector: "inspector-spacing-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorSizeSectionComponent, selector: "inspector-size-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorTypographySectionComponent, selector: "inspector-typography-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorBordersSectionComponent, selector: "inspector-borders-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorLayoutSectionComponent, selector: "inspector-layout-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorBackgroundsSectionComponent, selector: "inspector-backgrounds-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorEffectsSectionComponent, selector: "inspector-effects-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorPositionSectionComponent, selector: "inspector-position-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorAdvancedSectionComponent, selector: "inspector-advanced-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: 
+                InspectorSpacingSectionComponent, selector: "inspector-spacing-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorSizeSectionComponent, selector: "inspector-size-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorTypographySectionComponent, selector: "inspector-typography-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorBordersSectionComponent, selector: "inspector-borders-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorLayoutSectionComponent, selector: "inspector-layout-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorBackgroundsSectionComponent, selector: "inspector-backgrounds-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorEffectsSectionComponent, selector: "inspector-effects-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorPositionSectionComponent, selector: "inspector-position-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorTransformSectionComponent, selector: "inspector-transform-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorAdvancedSectionComponent, selector: "inspector-advanced-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: 
                 // Functional Panels (All restored)
                 DynamicPropertiesComponent, selector: "app-dynamic-properties", inputs: ["onPropertyChange", "config", "readOnly", "includeSections", "excludeSections", "allFields"], outputs: ["configChange"] }, { kind: "component", type: DataPanelComponent, selector: "app-data-panel", inputs: ["config", "readOnly", "dataConsumer", "bindingShape", "dataTargetPath", "widgetType", "allFields"], outputs: ["configChange"] }, { kind: "component", type: RulesPanelComponent, selector: "app-rules-panel", inputs: ["readOnly", "rules", "allFields"], outputs: ["rulesChange"] }] });
 }
@@ -17425,6 +18191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         InspectorBackgroundsSectionComponent,
                         InspectorEffectsSectionComponent,
                         InspectorPositionSectionComponent,
+                        InspectorTransformSectionComponent,
                         InspectorAdvancedSectionComponent,
                         // Functional Panels (All restored)
                         DynamicPropertiesComponent,
@@ -17541,6 +18308,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                </div>
             </ui-accordion>
 
+            <ui-accordion title="Transform" [expanded]="false">
+               <div [class.pointer-events-none]="readOnly()" [class.opacity-60]="readOnly()">
+                   <inspector-transform-section
+                      [style]="currentStyle()"
+                      (styleChange)="onStyleChange($event)">
+                   </inspector-transform-section>
+               </div>
+            </ui-accordion>
+
             <ui-accordion title="Position" [expanded]="false">
                <div [class.pointer-events-none]="readOnly()" [class.opacity-60]="readOnly()">
                    <inspector-position-section
@@ -17573,7 +18349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                   [config]="inspectorField()"
                   [allFields]="stateService.getSelectedScopeFields()"
                   [readOnly]="readOnly()"
-                  [excludeSections]="['Layout', 'Spacing', 'Size', 'Typography', 'Appearance', 'Box Model', 'Position', 'Effects', 'Advanced']"
+                  [excludeSections]="['Layout', 'Spacing', 'Size', 'Typography', 'Appearance', 'Box Model', 'Position', 'Effects', 'Transform', 'Advanced']"
                   (configChange)="onFieldConfigChange($event)">
               </app-dynamic-properties>
            </div>
@@ -17683,39 +18459,6 @@ class FormSettingsInspectorComponent {
                </div>
 
                <div class="h-px bg-border-default my-1"></div>
-
-               <div class="flex flex-col gap-1">
-                   <label class="text-[10px] text-text-primary opacity-70 uppercase font-semibold">Submit Button</label>
-                   <input 
-                       [ngModel]="schema().submitButtonText"
-                       [disabled]="readOnly()"
-                       (ngModelChange)="updateSettings('submitButtonText', $event)"
-                       placeholder="Submit"
-                       class="h-8 w-full rounded border border-border-default px-2 text-[12px] focus:border-focus-border focus:ring-1 focus:ring-focus-border outline-none bg-surface-default">
-               </div>
-
-               <div class="flex flex-col gap-1">
-                   <label class="text-[10px] text-text-primary opacity-70 uppercase font-semibold">Reset Button</label>
-                   <div class="flex items-center gap-2 mb-1">
-                       <input 
-                           type="checkbox" 
-                           [ngModel]="schema().showResetButton !== false"
-                           [disabled]="readOnly()"
-                           (ngModelChange)="updateSettings('showResetButton', $event)"
-                           id="showReset" 
-                           class="h-3.5 w-3.5 rounded border-border-default text-primary-500 focus:ring-primary-500">
-                       <label for="showReset" class="text-[12px] text-text-primary">Show Reset Button</label>
-                   </div>
-                   
-                   @if (schema().showResetButton !== false) {
-                       <input 
-                           [ngModel]="schema().resetButtonText"
-                           [disabled]="readOnly()"
-                           (ngModelChange)="updateSettings('resetButtonText', $event)"
-                           placeholder="Reset"
-                           class="h-8 w-full rounded border border-border-default px-2 text-[12px] focus:border-focus-border focus:ring-1 focus:ring-focus-border outline-none bg-surface-default">
-                   }
-               </div>
           </div>
         }
 
@@ -17769,7 +18512,7 @@ class FormSettingsInspectorComponent {
 
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}.custom-scrollbar::-webkit-scrollbar{width:8px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#94a3b8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: UiAccordionComponent, selector: "ui-accordion", inputs: ["title", "subtitle", "expanded", "showAdd"] }, { kind: "component", type: InspectorLayoutSectionComponent, selector: "inspector-layout-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorBackgroundsSectionComponent, selector: "inspector-backgrounds-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorBordersSectionComponent, selector: "inspector-borders-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorEffectsSectionComponent, selector: "inspector-effects-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorAdvancedSectionComponent, selector: "inspector-advanced-section", inputs: ["style"], outputs: ["styleChange"] }] });
+  `, isInline: true, styles: [":host{display:block;height:100%}.custom-scrollbar::-webkit-scrollbar{width:8px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#94a3b8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: UiAccordionComponent, selector: "ui-accordion", inputs: ["title", "subtitle", "expanded", "showAdd"] }, { kind: "component", type: InspectorLayoutSectionComponent, selector: "inspector-layout-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorBackgroundsSectionComponent, selector: "inspector-backgrounds-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorBordersSectionComponent, selector: "inspector-borders-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorEffectsSectionComponent, selector: "inspector-effects-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorAdvancedSectionComponent, selector: "inspector-advanced-section", inputs: ["style"], outputs: ["styleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormSettingsInspectorComponent, decorators: [{
             type: Component,
@@ -17835,39 +18578,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                </div>
 
                <div class="h-px bg-border-default my-1"></div>
-
-               <div class="flex flex-col gap-1">
-                   <label class="text-[10px] text-text-primary opacity-70 uppercase font-semibold">Submit Button</label>
-                   <input 
-                       [ngModel]="schema().submitButtonText"
-                       [disabled]="readOnly()"
-                       (ngModelChange)="updateSettings('submitButtonText', $event)"
-                       placeholder="Submit"
-                       class="h-8 w-full rounded border border-border-default px-2 text-[12px] focus:border-focus-border focus:ring-1 focus:ring-focus-border outline-none bg-surface-default">
-               </div>
-
-               <div class="flex flex-col gap-1">
-                   <label class="text-[10px] text-text-primary opacity-70 uppercase font-semibold">Reset Button</label>
-                   <div class="flex items-center gap-2 mb-1">
-                       <input 
-                           type="checkbox" 
-                           [ngModel]="schema().showResetButton !== false"
-                           [disabled]="readOnly()"
-                           (ngModelChange)="updateSettings('showResetButton', $event)"
-                           id="showReset" 
-                           class="h-3.5 w-3.5 rounded border-border-default text-primary-500 focus:ring-primary-500">
-                       <label for="showReset" class="text-[12px] text-text-primary">Show Reset Button</label>
-                   </div>
-                   
-                   @if (schema().showResetButton !== false) {
-                       <input 
-                           [ngModel]="schema().resetButtonText"
-                           [disabled]="readOnly()"
-                           (ngModelChange)="updateSettings('resetButtonText', $event)"
-                           placeholder="Reset"
-                           class="h-8 w-full rounded border border-border-default px-2 text-[12px] focus:border-focus-border focus:ring-1 focus:ring-focus-border outline-none bg-surface-default">
-                   }
-               </div>
           </div>
         }
 
@@ -17924,165 +18634,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
   `, styles: [":host{display:block;height:100%}.custom-scrollbar::-webkit-scrollbar{width:8px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#94a3b8}\n"] }]
         }] });
 
-class UiTabComponent {
-    label = '';
-    name = ''; // Unique key for controlled mode
-    disabled = false;
-    badge;
-    badgeTone = 'neutral';
-    template;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UiTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: UiTabComponent, isStandalone: true, selector: "ui-tab", inputs: { label: "label", name: "name", disabled: "disabled", badge: "badge", badgeTone: "badgeTone" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["tpl"], descendants: true, static: true }], ngImport: i0, template: `<ng-template #tpl><ng-content></ng-content></ng-template>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UiTabComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-tab',
-                    standalone: true,
-                    imports: [CommonModule],
-                    template: `<ng-template #tpl><ng-content></ng-content></ng-template>`
-                }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], badge: [{
-                type: Input
-            }], badgeTone: [{
-                type: Input
-            }], template: [{
-                type: ViewChild,
-                args: ['tpl', { static: true }]
-            }] } });
-class UiTabsComponent {
-    tabQuery;
-    activeTab;
-    activeTabChange = new EventEmitter();
-    // Internal state if uncontrolled
-    _internalIndex = 0;
-    tabs = [];
-    ngAfterContentInit() {
-        this.tabs = this.tabQuery.toArray();
-    }
-    isActive(tab) {
-        if (this.activeTab !== undefined) {
-            return this.activeTab === (tab.name || tab.label);
-        }
-        return this.tabs.indexOf(tab) === this._internalIndex;
-    }
-    activate(tab) {
-        if (tab.disabled)
-            return;
-        const key = tab.name || tab.label;
-        if (this.activeTab !== undefined) {
-            this.activeTabChange.emit(key);
-        }
-        else {
-            this._internalIndex = this.tabs.indexOf(tab);
-        }
-    }
-    get activeTemplate() {
-        if (this.tabs.length === 0)
-            return null;
-        let activeTab;
-        if (this.activeTab !== undefined) {
-            activeTab = this.tabs.find(t => (t.name || t.label) === this.activeTab);
-        }
-        else {
-            activeTab = this.tabs[this._internalIndex];
-        }
-        return activeTab?.template || null;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UiTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: UiTabsComponent, isStandalone: true, selector: "ui-tabs", inputs: { activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange" }, queries: [{ propertyName: "tabQuery", predicate: UiTabComponent }], ngImport: i0, template: `
-    <div class="flex flex-col min-h-0 h-full">
-      <div class="flex items-center gap-1 px-3 border-b border-slate-200 bg-white shrink-0">
-        <button
-          *ngFor="let tab of tabs; let i = index"
-          (click)="activate(tab)"
-          class="relative h-10 px-3 text-xs font-semibold transition-colors rounded-t-md border-b-2"
-          [class.text-accent-600]="isActive(tab)"
-          [class.border-accent-600]="isActive(tab)"
-          [class.text-ink-500]="!isActive(tab)"
-          [class.border-transparent]="!isActive(tab)"
-          [class.hover:text-ink-700]="!isActive(tab)"
-          [disabled]="tab.disabled"
-        >
-          <span class="flex items-center gap-2">
-            {{ tab.label }}
-            <span *ngIf="tab.badge" class="text-[10px] px-1.5 py-0.5 rounded-full border"
-                  [class.bg-accent-50]="tab.badgeTone === 'accent'"
-                  [class.border-accent-200]="tab.badgeTone === 'accent'"
-                  [class.text-accent-700]="tab.badgeTone === 'accent'"
-                  [class.bg-slate-100]="tab.badgeTone === 'neutral'"
-                  [class.border-slate-200]="tab.badgeTone === 'neutral'"
-                  [class.text-slate-600]="tab.badgeTone === 'neutral'">
-              {{ tab.badge }}
-            </span>
-          </span>
-        </button>
-      </div>
-
-      <div class="flex-1 min-h-0 overflow-hidden bg-slate-50/30">
-        <ng-container *ngIf="activeTemplate">
-          <ng-container *ngTemplateOutlet="activeTemplate"></ng-container>
-        </ng-container>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UiTabsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-tabs', standalone: true, imports: [CommonModule], template: `
-    <div class="flex flex-col min-h-0 h-full">
-      <div class="flex items-center gap-1 px-3 border-b border-slate-200 bg-white shrink-0">
-        <button
-          *ngFor="let tab of tabs; let i = index"
-          (click)="activate(tab)"
-          class="relative h-10 px-3 text-xs font-semibold transition-colors rounded-t-md border-b-2"
-          [class.text-accent-600]="isActive(tab)"
-          [class.border-accent-600]="isActive(tab)"
-          [class.text-ink-500]="!isActive(tab)"
-          [class.border-transparent]="!isActive(tab)"
-          [class.hover:text-ink-700]="!isActive(tab)"
-          [disabled]="tab.disabled"
-        >
-          <span class="flex items-center gap-2">
-            {{ tab.label }}
-            <span *ngIf="tab.badge" class="text-[10px] px-1.5 py-0.5 rounded-full border"
-                  [class.bg-accent-50]="tab.badgeTone === 'accent'"
-                  [class.border-accent-200]="tab.badgeTone === 'accent'"
-                  [class.text-accent-700]="tab.badgeTone === 'accent'"
-                  [class.bg-slate-100]="tab.badgeTone === 'neutral'"
-                  [class.border-slate-200]="tab.badgeTone === 'neutral'"
-                  [class.text-slate-600]="tab.badgeTone === 'neutral'">
-              {{ tab.badge }}
-            </span>
-          </span>
-        </button>
-      </div>
-
-      <div class="flex-1 min-h-0 overflow-hidden bg-slate-50/30">
-        <ng-container *ngIf="activeTemplate">
-          <ng-container *ngTemplateOutlet="activeTemplate"></ng-container>
-        </ng-container>
-      </div>
-    </div>
-  `, styles: [":host{display:block;height:100%}\n"] }]
-        }], propDecorators: { tabQuery: [{
-                type: ContentChildren,
-                args: [UiTabComponent]
-            }], activeTab: [{
-                type: Input
-            }], activeTabChange: [{
-                type: Output
-            }] } });
-
 class PropertiesPanelComponent {
     state;
     injector;
+    layoutInspectorTabs = ['Style', 'Settings'];
+    activeLayoutInspectorTab = signal('Style');
     spacingOptions = [
         { label: 'None', value: 'none' },
         { label: 'XS', value: 'xs' },
@@ -18105,9 +18661,11 @@ class PropertiesPanelComponent {
         // No need to initialize form settings manually anymore, component inputs handle it
         // Track the previous widget to avoid unnecessary re-renders
         let previousWidgetId = null;
+        let previousLayoutNodeKey = null;
         effect(() => {
             const node = this.state.selectedNode();
             const currentWidgetId = (node && node.type === 'widget') ? node.id : null;
+            const currentLayoutNodeKey = (node && node.type !== 'widget') ? `${node.type}:${node.id}` : null;
             // Only re-render if the widget actually changed
             if (currentWidgetId !== previousWidgetId) {
                 previousWidgetId = currentWidgetId;
@@ -18120,6 +18678,12 @@ class PropertiesPanelComponent {
                         this.inspectorContainer.clear();
                 }
             }
+            if (currentLayoutNodeKey !== previousLayoutNodeKey) {
+                previousLayoutNodeKey = currentLayoutNodeKey;
+                if (currentLayoutNodeKey) {
+                    this.activeLayoutInspectorTab.set('Style');
+                }
+            }
         });
     }
     responsiveWidthOptions(includeInherit) {
@@ -18359,7 +18923,7 @@ class PropertiesPanelComponent {
         this.state.selectNode(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PropertiesPanelComponent, deps: [{ token: DesignerStateService }, { token: WIDGET_DEFINITIONS }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: PropertiesPanelComponent, isStandalone: true, selector: "app-properties-panel", viewQueries: [{ propertyName: "inspectorContainer", first: true, predicate: ["inspectorContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: PropertiesPanelComponent, isStandalone: true, selector: "app-properties-panel", viewQueries: [{ propertyName: "inspectorContainer", first: true, predicate: ["inspectorContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
     <div class="properties-shell h-full border-l border-border-default bg-surface-default flex flex-col font-sans text-[12px]">
 
        <div *ngIf="state.selectedNode() as node; else noSelection" class="flex flex-col h-full">
@@ -18386,239 +18950,182 @@ class PropertiesPanelComponent {
                   </div>
                </div>
 
-               <!-- Tabs -->
-               <ui-tabs class="flex-1 flex flex-col min-h-0 bg-surface-default">
-                    <ui-tab label="Style">
-                        <div class="panel-body p-4 pt-3 flex flex-col gap-4 overflow-y-auto h-full custom-scrollbar">
-
-                             <!-- ROW Specific -->
-                             <!-- Binds to LayoutNode.style (Row Container Styles) -->
-                             <ng-container *ngIf="node.type === 'row'">
-                                 <div class="inspector-stack space-y-4">
-                                     <div *ngIf="!state.isReadOnly()" class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Column Structure</div>
-
-                                         <!-- Presets -->
-                                         <div class="grid grid-cols-3 gap-2 mb-3">
-                                             <button (click)="applyPreset(node.id, 1)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="1 Column">
-                                                <div class="flex gap-1 w-full h-4 justify-center px-1">
-                                                    <div class="w-full bg-border-default rounded-sm"></div>
-                                                </div>
-                                             </button>
-                                             <button (click)="applyPreset(node.id, 2)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="2 Columns">
-                                                <div class="flex gap-0.5 w-full h-4 px-1">
-                                                    <div class="w-1/2 bg-border-default rounded-sm"></div>
-                                                    <div class="w-1/2 bg-border-default rounded-sm"></div>
-                                                </div>
-                                             </button>
-                                             <button (click)="applyPreset(node.id, 3)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="3 Columns">
-                                                <div class="flex gap-0.5 w-full h-4 px-1">
-                                                    <div class="w-1/3 bg-border-default rounded-sm"></div>
-                                                    <div class="w-1/3 bg-border-default rounded-sm"></div>
-                                                    <div class="w-1/3 bg-border-default rounded-sm"></div>
-                                                </div>
-                                             </button>
-                                             <button (click)="applyPreset(node.id, 4)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="4 Columns">
-                                                 <div class="flex gap-0.5 w-full h-4 px-1">
-                                                    <div class="w-1/4 bg-border-default rounded-sm"></div>
-                                                    <div class="w-1/4 bg-border-default rounded-sm"></div>
-                                                    <div class="w-1/4 bg-border-default rounded-sm"></div>
-                                                    <div class="w-1/4 bg-border-default rounded-sm"></div>
-                                                </div>
-                                             </button>
-                                             <button (click)="applyPreset(node.id, 6)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="6 Columns">
-                                                 <span class="text-[12px] text-text-primary font-medium">6 Col</span>
-                                             </button>
-                                             <button (click)="applyPreset(node.id, 12)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="12 Columns">
-                                                 <span class="text-[12px] text-text-primary font-medium">12 Col</span>
-                                             </button>
-                                         </div>
-
-                                         <!-- Manual Actions -->
-                                         <div class="flex flex-col gap-2">
-                                             <button (click)="addColumn(node.id)" class="w-full h-9 bg-primary-500 text-white rounded-md hover:opacity-90 flex items-center justify-center gap-2 text-[12px] font-medium transition-colors">
-                                                 <lucide-icon name="plus" class="w-4 h-4"></lucide-icon> Add Column
-                                             </button>
-                                         </div>
-                                     </div>
-
-                                     <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Layout</div>
-                                         <inspector-layout-section
-                                             [style]="nodeStyle(node)"
-                                             (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                         </inspector-layout-section>
-                                     </div>
-
-                                     <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Spacing</div>
-                                         <inspector-spacing-section
-                                             [style]="nodeStyle(node)"
-                                             (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                         </inspector-spacing-section>
-                                     </div>
-
-                                     <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Size</div>
-                                         <inspector-size-section
-                                             [style]="nodeStyle(node)"
-                                             (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                         </inspector-size-section>
-                                     </div>
-
-                                     <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Backgrounds</div>
-                                         <inspector-backgrounds-section
-                                             [style]="nodeStyle(node)"
-                                             (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                         </inspector-backgrounds-section>
-                                     </div>
-
-                                     <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Borders</div>
-                                         <inspector-borders-section
-                                             [style]="nodeStyle(node)"
-                                             (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                         </inspector-borders-section>
-                                     </div>
-
-                                     <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Effects</div>
-                                         <inspector-effects-section
-                                             [style]="nodeStyle(node)"
-                                             (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                         </inspector-effects-section>
-                                     </div>
-
-                                     <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Advanced</div>
-                                         <inspector-advanced-section
-                                             [style]="nodeStyle(node)"
-                                             (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                         </inspector-advanced-section>
-                                     </div>
-                                 </div>
-                             </ng-container>
-                             <ng-container *ngIf="node.type === 'col'">
-                                 <div class="inspector-stack space-y-4">
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Responsive Width (1-12)</div>
-
-                                        <!-- XS (Mobile) -->
-                                        <div class="flex items-center gap-2 mb-2">
-                                            <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">XS</span>
-                                            <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.xs" (ngModelChange)="onResponsiveChange(node.id, 'xs', $event)">
-                                              <option *ngFor="let option of responsiveWidthOptions(false)" [ngValue]="option.value">{{ option.label }}</option>
-                                            </select>
-                                        </div>
-
-                                        <!-- SM (Large Phones) -->
-                                        <div class="flex items-center gap-2 mb-2">
-                                            <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">SM</span>
-                                            <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.sm" (ngModelChange)="onResponsiveChange(node.id, 'sm', $event)">
-                                              <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
-                                            </select>
-                                        </div>
-
-                                        <!-- MD (Tablet) -->
-                                        <div class="flex items-center gap-2 mb-2">
-                                            <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">MD</span>
-                                            <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.md" (ngModelChange)="onResponsiveChange(node.id, 'md', $event)">
-                                              <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
-                                            </select>
-                                        </div>
-
-                                         <!-- LG (Desktop) -->
-                                        <div class="flex items-center gap-2 mb-2">
-                                            <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">LG</span>
-                                            <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.lg" (ngModelChange)="onResponsiveChange(node.id, 'lg', $event)">
-                                              <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
-                                            </select>
-                                        </div>
-
-                                        <!-- XL (Large Desktop) -->
-                                        <div class="flex items-center gap-2 mb-2">
-                                            <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">XL</span>
-                                            <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.xl" (ngModelChange)="onResponsiveChange(node.id, 'xl', $event)">
-                                              <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
-                                            </select>
-                                        </div>
-
-                                        <!-- 2XL (Extra Large) -->
-                                        <div class="flex items-center gap-2 mb-2">
-                                            <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">2XL</span>
-                                            <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive ? node.responsive['2xl'] : undefined" (ngModelChange)="onResponsiveChange(node.id, '2xl', $event)">
-                                              <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
-                                            </select>
-                                        </div>
-                                    </div>
-
-                                    <div *ngIf="!state.isReadOnly()" class="inspector-card bg-red-50 border border-red-100 rounded-lg p-3">
-                                        <button (click)="removeColumn(node.id)" class="w-full h-8 text-red-600 hover:text-red-700 flex items-center justify-center gap-2 text-[12px] font-medium transition-colors">
-                                            <lucide-icon name="trash-2" class="w-4 h-4"></lucide-icon> Remove Column
-                                        </button>
-                                    </div>
+               <div class="flex items-center px-2 pt-2 border-b border-border-default bg-surface-default">
+                 @for (tab of layoutInspectorTabs; track tab) {
+                   <button
+                     type="button"
+                     (click)="activeLayoutInspectorTab.set(tab)"
+                     [class]="activeLayoutInspectorTab() === tab
+                       ? 'px-2 pb-2 font-semibold text-primary-500 border-b-2 border-b-primary-500'
+                       : 'px-2 pb-2 text-text-primary opacity-60 hover:opacity-100 hover:text-text-primary border-b-2 border-transparent'">
+                     {{ tab }}
+                   </button>
+                 }
+               </div>
 
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Layout</div>
-                                        <inspector-layout-section
-                                            [style]="nodeStyle(node)"
-                                            (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                        </inspector-layout-section>
-                                    </div>
+               <div class="flex-1 overflow-y-auto custom-scrollbar bg-surface-default">
+                 @if (activeLayoutInspectorTab() === 'Style') {
+                   <div class="flex flex-col" [class.pointer-events-none]="state.isReadOnly()" [class.opacity-60]="state.isReadOnly()">
+                     <ui-accordion title="Layout" [expanded]="true">
+                       <inspector-layout-section
+                           [style]="nodeStyle(node)"
+                           (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
+                       </inspector-layout-section>
+                     </ui-accordion>
+
+                     <ui-accordion title="Spacing" [expanded]="false">
+                       <inspector-spacing-section
+                           [style]="nodeStyle(node)"
+                           (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
+                       </inspector-spacing-section>
+                     </ui-accordion>
+
+                     <ui-accordion title="Size" [expanded]="false">
+                       <inspector-size-section
+                           [style]="nodeStyle(node)"
+                           (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
+                       </inspector-size-section>
+                     </ui-accordion>
+
+                     <ui-accordion title="Backgrounds" [expanded]="false">
+                       <inspector-backgrounds-section
+                           [style]="nodeStyle(node)"
+                           (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
+                       </inspector-backgrounds-section>
+                     </ui-accordion>
+
+                     <ui-accordion title="Borders" [expanded]="false">
+                       <inspector-borders-section
+                           [style]="nodeStyle(node)"
+                           (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
+                       </inspector-borders-section>
+                     </ui-accordion>
+
+                     <ui-accordion title="Effects" [expanded]="false">
+                       <inspector-effects-section
+                           [style]="nodeStyle(node)"
+                           (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
+                       </inspector-effects-section>
+                     </ui-accordion>
+
+                     <ui-accordion title="Advanced" [expanded]="false">
+                       <inspector-advanced-section
+                           [style]="nodeStyle(node)"
+                           (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
+                       </inspector-advanced-section>
+                     </ui-accordion>
+
+                     <div class="h-10"></div>
+                   </div>
+                 }
+
+                 @if (activeLayoutInspectorTab() === 'Settings') {
+                   <div class="p-4 flex flex-col gap-4">
+                     @if (node.type === 'row') {
+                       <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm"
+                            [class.opacity-60]="state.isReadOnly()"
+                            [class.pointer-events-none]="state.isReadOnly()">
+                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Column Structure</div>
+                         <div class="grid grid-cols-3 gap-2 mb-3">
+                           <button (click)="applyPreset(node.id, 1)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="1 Column">
+                             <div class="flex gap-1 w-full h-4 justify-center px-1">
+                               <div class="w-full bg-border-default rounded-sm"></div>
+                             </div>
+                           </button>
+                           <button (click)="applyPreset(node.id, 2)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="2 Columns">
+                             <div class="flex gap-0.5 w-full h-4 px-1">
+                               <div class="w-1/2 bg-border-default rounded-sm"></div>
+                               <div class="w-1/2 bg-border-default rounded-sm"></div>
+                             </div>
+                           </button>
+                           <button (click)="applyPreset(node.id, 3)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="3 Columns">
+                             <div class="flex gap-0.5 w-full h-4 px-1">
+                               <div class="w-1/3 bg-border-default rounded-sm"></div>
+                               <div class="w-1/3 bg-border-default rounded-sm"></div>
+                               <div class="w-1/3 bg-border-default rounded-sm"></div>
+                             </div>
+                           </button>
+                           <button (click)="applyPreset(node.id, 4)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="4 Columns">
+                             <div class="flex gap-0.5 w-full h-4 px-1">
+                               <div class="w-1/4 bg-border-default rounded-sm"></div>
+                               <div class="w-1/4 bg-border-default rounded-sm"></div>
+                               <div class="w-1/4 bg-border-default rounded-sm"></div>
+                               <div class="w-1/4 bg-border-default rounded-sm"></div>
+                             </div>
+                           </button>
+                           <button (click)="applyPreset(node.id, 6)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="6 Columns">
+                             <span class="text-[12px] text-text-primary font-medium">6 Col</span>
+                           </button>
+                           <button (click)="applyPreset(node.id, 12)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="12 Columns">
+                             <span class="text-[12px] text-text-primary font-medium">12 Col</span>
+                           </button>
+                         </div>
+                         <button (click)="addColumn(node.id)" class="w-full h-9 bg-primary-500 text-white rounded-md hover:opacity-90 flex items-center justify-center gap-2 text-[12px] font-medium transition-colors">
+                           <lucide-icon name="plus" class="w-4 h-4"></lucide-icon> Add Column
+                         </button>
+                       </div>
+                     }
+
+                     @if (node.type === 'col') {
+                       <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm"
+                            [class.opacity-60]="state.isReadOnly()"
+                            [class.pointer-events-none]="state.isReadOnly()">
+                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Responsive Width (1-12)</div>
+
+                         <div class="flex items-center gap-2 mb-2">
+                           <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">XS</span>
+                           <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.xs" (ngModelChange)="onResponsiveChange(node.id, 'xs', $event)">
+                             <option *ngFor="let option of responsiveWidthOptions(false)" [ngValue]="option.value">{{ option.label }}</option>
+                           </select>
+                         </div>
 
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Spacing</div>
-                                        <inspector-spacing-section
-                                            [style]="nodeStyle(node)"
-                                            (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                        </inspector-spacing-section>
-                                    </div>
+                         <div class="flex items-center gap-2 mb-2">
+                           <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">SM</span>
+                           <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.sm" (ngModelChange)="onResponsiveChange(node.id, 'sm', $event)">
+                             <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
+                           </select>
+                         </div>
 
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Size</div>
-                                        <inspector-size-section
-                                            [style]="nodeStyle(node)"
-                                            (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                        </inspector-size-section>
-                                    </div>
+                         <div class="flex items-center gap-2 mb-2">
+                           <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">MD</span>
+                           <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.md" (ngModelChange)="onResponsiveChange(node.id, 'md', $event)">
+                             <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
+                           </select>
+                         </div>
 
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Backgrounds</div>
-                                        <inspector-backgrounds-section
-                                            [style]="nodeStyle(node)"
-                                            (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                        </inspector-backgrounds-section>
-                                    </div>
+                         <div class="flex items-center gap-2 mb-2">
+                           <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">LG</span>
+                           <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.lg" (ngModelChange)="onResponsiveChange(node.id, 'lg', $event)">
+                             <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
+                           </select>
+                         </div>
 
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Borders</div>
-                                        <inspector-borders-section
-                                            [style]="nodeStyle(node)"
-                                            (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                        </inspector-borders-section>
-                                    </div>
+                         <div class="flex items-center gap-2 mb-2">
+                           <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">XL</span>
+                           <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.xl" (ngModelChange)="onResponsiveChange(node.id, 'xl', $event)">
+                             <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
+                           </select>
+                         </div>
 
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Effects</div>
-                                        <inspector-effects-section
-                                            [style]="nodeStyle(node)"
-                                            (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                        </inspector-effects-section>
-                                    </div>
+                         <div class="flex items-center gap-2">
+                           <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">2XL</span>
+                           <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive ? node.responsive['2xl'] : undefined" (ngModelChange)="onResponsiveChange(node.id, '2xl', $event)">
+                             <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
+                           </select>
+                         </div>
+                       </div>
 
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Advanced</div>
-                                        <inspector-advanced-section
-                                            [style]="nodeStyle(node)"
-                                            (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                        </inspector-advanced-section>
-                                    </div>
-                                </div>
-                             </ng-container>
-                        </div>
-                    </ui-tab>
-                </ui-tabs>
+                       @if (!state.isReadOnly()) {
+                         <div class="inspector-card bg-red-50 border border-red-100 rounded-lg p-3">
+                           <button (click)="removeColumn(node.id)" class="w-full h-8 text-red-600 hover:text-red-700 flex items-center justify-center gap-2 text-[12px] font-medium transition-colors">
+                             <lucide-icon name="trash-2" class="w-4 h-4"></lucide-icon> Remove Column
+                           </button>
+                         </div>
+                       }
+                     }
+                   </div>
+                 }
+               </div>
            </ng-container>
        </div>
 
@@ -18631,7 +19138,7 @@ class PropertiesPanelComponent {
            </form-settings-inspector>
        </ng-template>
     </div>
-  `, isInline: true, styles: [".custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:99px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: UiTabsComponent, selector: "ui-tabs", inputs: ["activeTab"], outputs: ["activeTabChange"] }, { kind: "component", type: UiTabComponent, selector: "ui-tab", inputs: ["label", "name", "disabled", "badge", "badgeTone"] }, { kind: "component", type: WidgetInspectorComponent, selector: "widget-inspector", inputs: ["node", "field", "readOnly"], outputs: ["fieldChange", "styleChange", "rulesChange", "duplicate", "delete"] }, { kind: "component", type: FormSettingsInspectorComponent, selector: "form-settings-inspector", inputs: ["schema", "readOnly"], outputs: ["settingsChange", "styleChange"] }, { kind: "component", type: InspectorLayoutSectionComponent, selector: "inspector-layout-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorSpacingSectionComponent, selector: "inspector-spacing-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorSizeSectionComponent, selector: "inspector-size-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorBackgroundsSectionComponent, selector: "inspector-backgrounds-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorBordersSectionComponent, selector: "inspector-borders-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorEffectsSectionComponent, selector: "inspector-effects-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorAdvancedSectionComponent, selector: "inspector-advanced-section", inputs: ["style"], outputs: ["styleChange"] }] });
+  `, isInline: true, styles: [".custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:99px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: UiAccordionComponent, selector: "ui-accordion", inputs: ["title", "subtitle", "expanded", "showAdd"] }, { kind: "component", type: WidgetInspectorComponent, selector: "widget-inspector", inputs: ["node", "field", "readOnly"], outputs: ["fieldChange", "styleChange", "rulesChange", "duplicate", "delete"] }, { kind: "component", type: FormSettingsInspectorComponent, selector: "form-settings-inspector", inputs: ["schema", "readOnly"], outputs: ["settingsChange", "styleChange"] }, { kind: "component", type: InspectorLayoutSectionComponent, selector: "inspector-layout-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorSpacingSectionComponent, selector: "inspector-spacing-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorSizeSectionComponent, selector: "inspector-size-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorBackgroundsSectionComponent, selector: "inspector-backgrounds-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorBordersSectionComponent, selector: "inspector-borders-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorEffectsSectionComponent, selector: "inspector-effects-section", inputs: ["style"], outputs: ["styleChange"] }, { kind: "component", type: InspectorAdvancedSectionComponent, selector: "inspector-advanced-section", inputs: ["style"], outputs: ["styleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PropertiesPanelComponent, decorators: [{
             type: Component,
@@ -18639,8 +19146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         CommonModule,
                         FormsModule,
                         UiIconModule,
-                        UiTabsComponent,
-                        UiTabComponent,
+                        UiAccordionComponent,
                         WidgetInspectorComponent,
                         FormSettingsInspectorComponent,
                         InspectorLayoutSectionComponent,
@@ -18677,239 +19183,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                   </div>
                </div>
 
-               <!-- Tabs -->
-               <ui-tabs class="flex-1 flex flex-col min-h-0 bg-surface-default">
-                    <ui-tab label="Style">
-                        <div class="panel-body p-4 pt-3 flex flex-col gap-4 overflow-y-auto h-full custom-scrollbar">
-
-                             <!-- ROW Specific -->
-                             <!-- Binds to LayoutNode.style (Row Container Styles) -->
-                             <ng-container *ngIf="node.type === 'row'">
-                                 <div class="inspector-stack space-y-4">
-                                     <div *ngIf="!state.isReadOnly()" class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Column Structure</div>
-
-                                         <!-- Presets -->
-                                         <div class="grid grid-cols-3 gap-2 mb-3">
-                                             <button (click)="applyPreset(node.id, 1)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="1 Column">
-                                                <div class="flex gap-1 w-full h-4 justify-center px-1">
-                                                    <div class="w-full bg-border-default rounded-sm"></div>
-                                                </div>
-                                             </button>
-                                             <button (click)="applyPreset(node.id, 2)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="2 Columns">
-                                                <div class="flex gap-0.5 w-full h-4 px-1">
-                                                    <div class="w-1/2 bg-border-default rounded-sm"></div>
-                                                    <div class="w-1/2 bg-border-default rounded-sm"></div>
-                                                </div>
-                                             </button>
-                                             <button (click)="applyPreset(node.id, 3)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="3 Columns">
-                                                <div class="flex gap-0.5 w-full h-4 px-1">
-                                                    <div class="w-1/3 bg-border-default rounded-sm"></div>
-                                                    <div class="w-1/3 bg-border-default rounded-sm"></div>
-                                                    <div class="w-1/3 bg-border-default rounded-sm"></div>
-                                                </div>
-                                             </button>
-                                             <button (click)="applyPreset(node.id, 4)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="4 Columns">
-                                                 <div class="flex gap-0.5 w-full h-4 px-1">
-                                                    <div class="w-1/4 bg-border-default rounded-sm"></div>
-                                                    <div class="w-1/4 bg-border-default rounded-sm"></div>
-                                                    <div class="w-1/4 bg-border-default rounded-sm"></div>
-                                                    <div class="w-1/4 bg-border-default rounded-sm"></div>
-                                                </div>
-                                             </button>
-                                             <button (click)="applyPreset(node.id, 6)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="6 Columns">
-                                                 <span class="text-[12px] text-text-primary font-medium">6 Col</span>
-                                             </button>
-                                             <button (click)="applyPreset(node.id, 12)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="12 Columns">
-                                                 <span class="text-[12px] text-text-primary font-medium">12 Col</span>
-                                             </button>
-                                         </div>
-
-                                         <!-- Manual Actions -->
-                                         <div class="flex flex-col gap-2">
-                                             <button (click)="addColumn(node.id)" class="w-full h-9 bg-primary-500 text-white rounded-md hover:opacity-90 flex items-center justify-center gap-2 text-[12px] font-medium transition-colors">
-                                                 <lucide-icon name="plus" class="w-4 h-4"></lucide-icon> Add Column
-                                             </button>
-                                         </div>
-                                     </div>
-
-                                     <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Layout</div>
-                                         <inspector-layout-section
-                                             [style]="nodeStyle(node)"
-                                             (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                         </inspector-layout-section>
-                                     </div>
-
-                                     <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Spacing</div>
-                                         <inspector-spacing-section
-                                             [style]="nodeStyle(node)"
-                                             (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                         </inspector-spacing-section>
-                                     </div>
-
-                                     <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Size</div>
-                                         <inspector-size-section
-                                             [style]="nodeStyle(node)"
-                                             (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                         </inspector-size-section>
-                                     </div>
-
-                                     <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Backgrounds</div>
-                                         <inspector-backgrounds-section
-                                             [style]="nodeStyle(node)"
-                                             (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                         </inspector-backgrounds-section>
-                                     </div>
-
-                                     <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Borders</div>
-                                         <inspector-borders-section
-                                             [style]="nodeStyle(node)"
-                                             (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                         </inspector-borders-section>
-                                     </div>
-
-                                     <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Effects</div>
-                                         <inspector-effects-section
-                                             [style]="nodeStyle(node)"
-                                             (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                         </inspector-effects-section>
-                                     </div>
-
-                                     <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Advanced</div>
-                                         <inspector-advanced-section
-                                             [style]="nodeStyle(node)"
-                                             (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                         </inspector-advanced-section>
-                                     </div>
-                                 </div>
-                             </ng-container>
-                             <ng-container *ngIf="node.type === 'col'">
-                                 <div class="inspector-stack space-y-4">
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Responsive Width (1-12)</div>
-
-                                        <!-- XS (Mobile) -->
-                                        <div class="flex items-center gap-2 mb-2">
-                                            <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">XS</span>
-                                            <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.xs" (ngModelChange)="onResponsiveChange(node.id, 'xs', $event)">
-                                              <option *ngFor="let option of responsiveWidthOptions(false)" [ngValue]="option.value">{{ option.label }}</option>
-                                            </select>
-                                        </div>
-
-                                        <!-- SM (Large Phones) -->
-                                        <div class="flex items-center gap-2 mb-2">
-                                            <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">SM</span>
-                                            <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.sm" (ngModelChange)="onResponsiveChange(node.id, 'sm', $event)">
-                                              <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
-                                            </select>
-                                        </div>
-
-                                        <!-- MD (Tablet) -->
-                                        <div class="flex items-center gap-2 mb-2">
-                                            <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">MD</span>
-                                            <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.md" (ngModelChange)="onResponsiveChange(node.id, 'md', $event)">
-                                              <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
-                                            </select>
-                                        </div>
-
-                                         <!-- LG (Desktop) -->
-                                        <div class="flex items-center gap-2 mb-2">
-                                            <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">LG</span>
-                                            <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.lg" (ngModelChange)="onResponsiveChange(node.id, 'lg', $event)">
-                                              <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
-                                            </select>
-                                        </div>
-
-                                        <!-- XL (Large Desktop) -->
-                                        <div class="flex items-center gap-2 mb-2">
-                                            <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">XL</span>
-                                            <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.xl" (ngModelChange)="onResponsiveChange(node.id, 'xl', $event)">
-                                              <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
-                                            </select>
-                                        </div>
-
-                                        <!-- 2XL (Extra Large) -->
-                                        <div class="flex items-center gap-2 mb-2">
-                                            <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">2XL</span>
-                                            <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive ? node.responsive['2xl'] : undefined" (ngModelChange)="onResponsiveChange(node.id, '2xl', $event)">
-                                              <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
-                                            </select>
-                                        </div>
-                                    </div>
-
-                                    <div *ngIf="!state.isReadOnly()" class="inspector-card bg-red-50 border border-red-100 rounded-lg p-3">
-                                        <button (click)="removeColumn(node.id)" class="w-full h-8 text-red-600 hover:text-red-700 flex items-center justify-center gap-2 text-[12px] font-medium transition-colors">
-                                            <lucide-icon name="trash-2" class="w-4 h-4"></lucide-icon> Remove Column
-                                        </button>
-                                    </div>
+               <div class="flex items-center px-2 pt-2 border-b border-border-default bg-surface-default">
+                 @for (tab of layoutInspectorTabs; track tab) {
+                   <button
+                     type="button"
+                     (click)="activeLayoutInspectorTab.set(tab)"
+                     [class]="activeLayoutInspectorTab() === tab
+                       ? 'px-2 pb-2 font-semibold text-primary-500 border-b-2 border-b-primary-500'
+                       : 'px-2 pb-2 text-text-primary opacity-60 hover:opacity-100 hover:text-text-primary border-b-2 border-transparent'">
+                     {{ tab }}
+                   </button>
+                 }
+               </div>
 
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Layout</div>
-                                        <inspector-layout-section
-                                            [style]="nodeStyle(node)"
-                                            (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                        </inspector-layout-section>
-                                    </div>
+               <div class="flex-1 overflow-y-auto custom-scrollbar bg-surface-default">
+                 @if (activeLayoutInspectorTab() === 'Style') {
+                   <div class="flex flex-col" [class.pointer-events-none]="state.isReadOnly()" [class.opacity-60]="state.isReadOnly()">
+                     <ui-accordion title="Layout" [expanded]="true">
+                       <inspector-layout-section
+                           [style]="nodeStyle(node)"
+                           (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
+                       </inspector-layout-section>
+                     </ui-accordion>
+
+                     <ui-accordion title="Spacing" [expanded]="false">
+                       <inspector-spacing-section
+                           [style]="nodeStyle(node)"
+                           (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
+                       </inspector-spacing-section>
+                     </ui-accordion>
+
+                     <ui-accordion title="Size" [expanded]="false">
+                       <inspector-size-section
+                           [style]="nodeStyle(node)"
+                           (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
+                       </inspector-size-section>
+                     </ui-accordion>
+
+                     <ui-accordion title="Backgrounds" [expanded]="false">
+                       <inspector-backgrounds-section
+                           [style]="nodeStyle(node)"
+                           (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
+                       </inspector-backgrounds-section>
+                     </ui-accordion>
+
+                     <ui-accordion title="Borders" [expanded]="false">
+                       <inspector-borders-section
+                           [style]="nodeStyle(node)"
+                           (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
+                       </inspector-borders-section>
+                     </ui-accordion>
+
+                     <ui-accordion title="Effects" [expanded]="false">
+                       <inspector-effects-section
+                           [style]="nodeStyle(node)"
+                           (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
+                       </inspector-effects-section>
+                     </ui-accordion>
+
+                     <ui-accordion title="Advanced" [expanded]="false">
+                       <inspector-advanced-section
+                           [style]="nodeStyle(node)"
+                           (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
+                       </inspector-advanced-section>
+                     </ui-accordion>
+
+                     <div class="h-10"></div>
+                   </div>
+                 }
+
+                 @if (activeLayoutInspectorTab() === 'Settings') {
+                   <div class="p-4 flex flex-col gap-4">
+                     @if (node.type === 'row') {
+                       <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm"
+                            [class.opacity-60]="state.isReadOnly()"
+                            [class.pointer-events-none]="state.isReadOnly()">
+                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Column Structure</div>
+                         <div class="grid grid-cols-3 gap-2 mb-3">
+                           <button (click)="applyPreset(node.id, 1)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="1 Column">
+                             <div class="flex gap-1 w-full h-4 justify-center px-1">
+                               <div class="w-full bg-border-default rounded-sm"></div>
+                             </div>
+                           </button>
+                           <button (click)="applyPreset(node.id, 2)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="2 Columns">
+                             <div class="flex gap-0.5 w-full h-4 px-1">
+                               <div class="w-1/2 bg-border-default rounded-sm"></div>
+                               <div class="w-1/2 bg-border-default rounded-sm"></div>
+                             </div>
+                           </button>
+                           <button (click)="applyPreset(node.id, 3)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="3 Columns">
+                             <div class="flex gap-0.5 w-full h-4 px-1">
+                               <div class="w-1/3 bg-border-default rounded-sm"></div>
+                               <div class="w-1/3 bg-border-default rounded-sm"></div>
+                               <div class="w-1/3 bg-border-default rounded-sm"></div>
+                             </div>
+                           </button>
+                           <button (click)="applyPreset(node.id, 4)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="4 Columns">
+                             <div class="flex gap-0.5 w-full h-4 px-1">
+                               <div class="w-1/4 bg-border-default rounded-sm"></div>
+                               <div class="w-1/4 bg-border-default rounded-sm"></div>
+                               <div class="w-1/4 bg-border-default rounded-sm"></div>
+                               <div class="w-1/4 bg-border-default rounded-sm"></div>
+                             </div>
+                           </button>
+                           <button (click)="applyPreset(node.id, 6)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="6 Columns">
+                             <span class="text-[12px] text-text-primary font-medium">6 Col</span>
+                           </button>
+                           <button (click)="applyPreset(node.id, 12)" class="h-9 border border-border-default rounded hover:bg-slate-50 flex items-center justify-center p-1" title="12 Columns">
+                             <span class="text-[12px] text-text-primary font-medium">12 Col</span>
+                           </button>
+                         </div>
+                         <button (click)="addColumn(node.id)" class="w-full h-9 bg-primary-500 text-white rounded-md hover:opacity-90 flex items-center justify-center gap-2 text-[12px] font-medium transition-colors">
+                           <lucide-icon name="plus" class="w-4 h-4"></lucide-icon> Add Column
+                         </button>
+                       </div>
+                     }
+
+                     @if (node.type === 'col') {
+                       <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm"
+                            [class.opacity-60]="state.isReadOnly()"
+                            [class.pointer-events-none]="state.isReadOnly()">
+                         <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Responsive Width (1-12)</div>
+
+                         <div class="flex items-center gap-2 mb-2">
+                           <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">XS</span>
+                           <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.xs" (ngModelChange)="onResponsiveChange(node.id, 'xs', $event)">
+                             <option *ngFor="let option of responsiveWidthOptions(false)" [ngValue]="option.value">{{ option.label }}</option>
+                           </select>
+                         </div>
 
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Spacing</div>
-                                        <inspector-spacing-section
-                                            [style]="nodeStyle(node)"
-                                            (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                        </inspector-spacing-section>
-                                    </div>
+                         <div class="flex items-center gap-2 mb-2">
+                           <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">SM</span>
+                           <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.sm" (ngModelChange)="onResponsiveChange(node.id, 'sm', $event)">
+                             <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
+                           </select>
+                         </div>
 
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Size</div>
-                                        <inspector-size-section
-                                            [style]="nodeStyle(node)"
-                                            (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                        </inspector-size-section>
-                                    </div>
+                         <div class="flex items-center gap-2 mb-2">
+                           <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">MD</span>
+                           <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.md" (ngModelChange)="onResponsiveChange(node.id, 'md', $event)">
+                             <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
+                           </select>
+                         </div>
 
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Backgrounds</div>
-                                        <inspector-backgrounds-section
-                                            [style]="nodeStyle(node)"
-                                            (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                        </inspector-backgrounds-section>
-                                    </div>
+                         <div class="flex items-center gap-2 mb-2">
+                           <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">LG</span>
+                           <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.lg" (ngModelChange)="onResponsiveChange(node.id, 'lg', $event)">
+                             <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
+                           </select>
+                         </div>
 
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Borders</div>
-                                        <inspector-borders-section
-                                            [style]="nodeStyle(node)"
-                                            (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                        </inspector-borders-section>
-                                    </div>
+                         <div class="flex items-center gap-2 mb-2">
+                           <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">XL</span>
+                           <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive.xl" (ngModelChange)="onResponsiveChange(node.id, 'xl', $event)">
+                             <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
+                           </select>
+                         </div>
 
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Effects</div>
-                                        <inspector-effects-section
-                                            [style]="nodeStyle(node)"
-                                            (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                        </inspector-effects-section>
-                                    </div>
+                         <div class="flex items-center gap-2">
+                           <span class="text-[12px] w-8 text-text-primary opacity-70 font-medium">2XL</span>
+                           <select class="h-8 flex-1 rounded-md border border-border-default bg-white px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" [ngModel]="node.responsive ? node.responsive['2xl'] : undefined" (ngModelChange)="onResponsiveChange(node.id, '2xl', $event)">
+                             <option *ngFor="let option of responsiveWidthOptions(true)" [ngValue]="option.value">{{ option.label }}</option>
+                           </select>
+                         </div>
+                       </div>
 
-                                    <div class="inspector-card bg-surface-default border border-border-default rounded-lg p-4 shadow-sm" [class.opacity-50]="state.isReadOnly()" [class.pointer-events-none]="state.isReadOnly()">
-                                        <div class="section-title text-[11px] font-semibold text-text-primary opacity-70 uppercase tracking-wide mb-3">Advanced</div>
-                                        <inspector-advanced-section
-                                            [style]="nodeStyle(node)"
-                                            (styleChange)="onNodeInspectorStyleChange(node.id, $event)">
-                                        </inspector-advanced-section>
-                                    </div>
-                                </div>
-                             </ng-container>
-                        </div>
-                    </ui-tab>
-                </ui-tabs>
+                       @if (!state.isReadOnly()) {
+                         <div class="inspector-card bg-red-50 border border-red-100 rounded-lg p-3">
+                           <button (click)="removeColumn(node.id)" class="w-full h-8 text-red-600 hover:text-red-700 flex items-center justify-center gap-2 text-[12px] font-medium transition-colors">
+                             <lucide-icon name="trash-2" class="w-4 h-4"></lucide-icon> Remove Column
+                           </button>
+                         </div>
+                       }
+                     }
+                   </div>
+                 }
+               </div>
            </ng-container>
        </div>
 
@@ -20856,9 +21305,9 @@ const BASIC_CONTACT_TEMPLATE = {
         },
         {
             "id": "btn_submit",
-            "widgetId": "core.form:submit-button",
+            "widgetId": "core.form:form-button",
             "name": "submit",
-            "type": "submit-button",
+            "type": "form-button",
             "label": "Send message",
             "variant": "primary",
             "buttonType": "submit",
@@ -20875,9 +21324,9 @@ const BASIC_CONTACT_TEMPLATE = {
         },
         {
             "id": "btn_reset",
-            "widgetId": "core.form:reset-button",
+            "widgetId": "core.form:form-button",
             "name": "reset",
-            "type": "reset-button",
+            "type": "form-button",
             "label": "Reset",
             "variant": "secondary",
             "buttonType": "reset"
@@ -21269,9 +21718,9 @@ const RULES_SHIPPING_TEMPLATE = {
         },
         {
             "id": "btn_submit",
-            "widgetId": "core.form:submit-button",
+            "widgetId": "core.form:form-button",
             "name": "submit",
-            "type": "submit-button",
+            "type": "form-button",
             "label": "Place order",
             "variant": "primary",
             "buttonType": "submit",
@@ -21286,9 +21735,9 @@ const RULES_SHIPPING_TEMPLATE = {
         },
         {
             "id": "btn_reset",
-            "widgetId": "core.form:reset-button",
+            "widgetId": "core.form:form-button",
             "name": "reset",
-            "type": "reset-button",
+            "type": "form-button",
             "label": "Reset",
             "variant": "secondary",
             "buttonType": "reset"
@@ -21578,9 +22027,9 @@ const DATA_SOURCES_TEMPLATE = {
         },
         {
             "id": "btn_submit",
-            "widgetId": "core.form:submit-button",
+            "widgetId": "core.form:form-button",
             "name": "submit",
-            "type": "submit-button",
+            "type": "form-button",
             "label": "Create profile",
             "variant": "primary",
             "buttonType": "submit"
@@ -36926,10 +37375,6 @@ const FILE_BASIC_FIELDS = [
     { key: 'tooltip', type: 'text', label: 'Tooltip' },
     ...COMMON_GROUP_FIELDS
 ];
-const COMMON_ICON_FIELDS = [
-    { key: 'prefixIcon', type: 'text', label: 'Prefix Icon (Material Name)' },
-    { key: 'suffixIcon', type: 'text', label: 'Suffix Icon (Material Name)' }
-];
 const COMMON_APPEARANCE_FIELDS = [
     {
         key: 'appearance',
@@ -36964,18 +37409,6 @@ const COMMON_STYLE_SECTIONS = [
     STYLE_TRANSFORM_SECTION,
     STYLE_EFFECTS_SECTION
 ];
-const COMMON_VALIDATION_SECTION = {
-    label: 'Validation',
-    fields: [
-        { key: 'validators', type: 'validators-editor', label: 'Validation Rules' }
-    ]
-};
-const COMMON_CONDITIONAL_SECTION = {
-    label: 'Conditional',
-    fields: [
-        { key: 'conditional', type: 'conditional-editor', label: 'Conditional Logic' }
-    ]
-};
 // Start with standard sections for Text Field
 const BASE_REQUIRED_FIELD = {
     key: 'html5.required',
@@ -36983,67 +37416,25 @@ const BASE_REQUIRED_FIELD = {
     label: 'Required',
     helpText: 'Base required state; Rules can override this dynamically.'
 };
-const TEXT_VALIDATION_SECTION = {
-    label: 'Validation',
-    fields: [
-        BASE_REQUIRED_FIELD,
-        { key: 'html5.minLength', type: 'number', label: 'Min Length' },
-        { key: 'html5.maxLength', type: 'number', label: 'Max Length' },
-        { key: 'html5.pattern', type: 'text', label: 'Pattern (regex)' },
-        { key: 'validators', type: 'validators-editor', label: 'Advanced Rules' }
-    ]
-};
-const NUMBER_VALIDATION_SECTION = {
-    label: 'Validation',
-    fields: [
-        BASE_REQUIRED_FIELD,
-        { key: 'html5.min', type: 'number', label: 'Minimum Value' },
-        { key: 'html5.max', type: 'number', label: 'Maximum Value' },
-        { key: 'html5.step', type: 'number', label: 'Step (Increment)' },
-        { key: 'validators', type: 'validators-editor', label: 'Advanced Rules' }
-    ]
-};
-const DATE_VALIDATION_SECTION = {
-    label: 'Validation',
-    fields: [
-        BASE_REQUIRED_FIELD,
-        { key: 'html5.min', type: 'text', label: 'Earliest Date (YYYY-MM-DD)' },
-        { key: 'html5.max', type: 'text', label: 'Latest Date (YYYY-MM-DD)' },
-        { key: 'validators', type: 'validators-editor', label: 'Advanced Rules' }
-    ]
-};
-const TIME_VALIDATION_SECTION = {
-    label: 'Validation',
-    fields: [
-        BASE_REQUIRED_FIELD,
-        { key: 'html5.min', type: 'text', label: 'Earliest Time (HH:MM)' },
-        { key: 'html5.max', type: 'text', label: 'Latest Time (HH:MM)' },
-        { key: 'validators', type: 'validators-editor', label: 'Advanced Rules' }
-    ]
-};
-const DATETIME_VALIDATION_SECTION = {
-    label: 'Validation',
-    fields: [
-        BASE_REQUIRED_FIELD,
-        { key: 'html5.min', type: 'text', label: 'Earliest (YYYY-MM-DDTHH:MM)' },
-        { key: 'html5.max', type: 'text', label: 'Latest (YYYY-MM-DDTHH:MM)' },
-        { key: 'validators', type: 'validators-editor', label: 'Advanced Rules' }
-    ]
-};
-const SELECT_VALIDATION_SECTION = {
-    label: 'Validation',
-    fields: [
-        BASE_REQUIRED_FIELD,
-        { key: 'validators', type: 'validators-editor', label: 'Advanced Rules' }
-    ]
-};
-const FILE_VALIDATION_SECTION = {
-    label: 'Validation',
-    fields: [
-        BASE_REQUIRED_FIELD,
-        { key: 'validators', type: 'validators-editor', label: 'Advanced Rules' }
-    ]
+const CUSTOM_VALIDATION_RULES_FIELD = {
+    key: 'validation',
+    type: 'validators-editor',
+    label: 'Custom Validation Rules',
+    helpText: 'Use these for field-level validation checks. Use the Rules tab for conditional behaviour.'
 };
+function createValidationSection(...fields) {
+    return {
+        label: 'Validation',
+        fields: [...fields, CUSTOM_VALIDATION_RULES_FIELD]
+    };
+}
+const TEXT_VALIDATION_SECTION = createValidationSection(BASE_REQUIRED_FIELD, { key: 'html5.minLength', type: 'number', label: 'Min Length' }, { key: 'html5.maxLength', type: 'number', label: 'Max Length' }, { key: 'html5.pattern', type: 'text', label: 'Pattern (regex)' });
+const NUMBER_VALIDATION_SECTION = createValidationSection(BASE_REQUIRED_FIELD, { key: 'html5.min', type: 'number', label: 'Minimum Value' }, { key: 'html5.max', type: 'number', label: 'Maximum Value' }, { key: 'html5.step', type: 'number', label: 'Step (Increment)' });
+const DATE_VALIDATION_SECTION = createValidationSection(BASE_REQUIRED_FIELD, { key: 'html5.min', type: 'text', label: 'Earliest Date (YYYY-MM-DD)' }, { key: 'html5.max', type: 'text', label: 'Latest Date (YYYY-MM-DD)' });
+const TIME_VALIDATION_SECTION = createValidationSection(BASE_REQUIRED_FIELD, { key: 'html5.min', type: 'text', label: 'Earliest Time (HH:MM)' }, { key: 'html5.max', type: 'text', label: 'Latest Time (HH:MM)' });
+const DATETIME_VALIDATION_SECTION = createValidationSection(BASE_REQUIRED_FIELD, { key: 'html5.min', type: 'text', label: 'Earliest (YYYY-MM-DDTHH:MM)' }, { key: 'html5.max', type: 'text', label: 'Latest (YYYY-MM-DDTHH:MM)' });
+const SELECT_VALIDATION_SECTION = createValidationSection(BASE_REQUIRED_FIELD);
+const FILE_VALIDATION_SECTION = createValidationSection(BASE_REQUIRED_FIELD);
 const BUTTON_VARIANT_OPTIONS = [
     { label: 'Primary (Blue)', value: 'primary' },
     { label: 'Secondary (Outline)', value: 'secondary' }
@@ -37084,7 +37475,6 @@ const IMAGE_BUTTON_PROPERTIES = [
 ];
 const TEXT_WIDGET_PROPERTIES = [
     { label: 'Basic', fields: COMMON_BASIC_FIELDS },
-    { label: 'Icons', fields: COMMON_ICON_FIELDS },
     TEXT_VALIDATION_SECTION,
     { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
     ...COMMON_STYLE_SECTIONS
@@ -37115,7 +37505,6 @@ const FILE_WIDGET_PROPERTIES = [
         ]
     },
     FILE_VALIDATION_SECTION,
-    COMMON_CONDITIONAL_SECTION,
     { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
     ...COMMON_STYLE_SECTIONS
 ];
@@ -37250,9 +37639,7 @@ const FIELD_WIDGETS = [
                     ...COMMON_BASIC_FIELDS
                 ]
             },
-            { label: 'Icons', fields: COMMON_ICON_FIELDS },
             NUMBER_VALIDATION_SECTION,
-            COMMON_CONDITIONAL_SECTION,
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
         ]
@@ -37280,7 +37667,6 @@ const FIELD_WIDGETS = [
         dataBinding: { shape: 'scalar', targetPath: 'defaultValue' },
         properties: [
             { label: 'Basic', fields: COMMON_BASIC_FIELDS },
-            { label: 'Icons', fields: COMMON_ICON_FIELDS },
             DATE_VALIDATION_SECTION,
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
@@ -37309,7 +37695,6 @@ const FIELD_WIDGETS = [
         dataBinding: { shape: 'scalar', targetPath: 'defaultValue' },
         properties: [
             { label: 'Basic', fields: COMMON_BASIC_FIELDS },
-            { label: 'Icons', fields: COMMON_ICON_FIELDS },
             TIME_VALIDATION_SECTION,
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
@@ -37336,7 +37721,6 @@ const FIELD_WIDGETS = [
         dataBinding: { shape: 'scalar', targetPath: 'defaultValue' },
         properties: [
             { label: 'Basic', fields: COMMON_BASIC_FIELDS },
-            { label: 'Icons', fields: COMMON_ICON_FIELDS },
             DATETIME_VALIDATION_SECTION,
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
@@ -37366,7 +37750,6 @@ const FIELD_WIDGETS = [
         dataBinding: { shape: 'scalar', targetPath: 'defaultValue' },
         properties: [
             { label: 'Basic', fields: COMMON_BASIC_FIELDS },
-            { label: 'Icons', fields: COMMON_ICON_FIELDS },
             DATE_VALIDATION_SECTION,
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
@@ -37396,7 +37779,6 @@ const FIELD_WIDGETS = [
         dataBinding: { shape: 'scalar', targetPath: 'defaultValue' },
         properties: [
             { label: 'Basic', fields: COMMON_BASIC_FIELDS },
-            { label: 'Icons', fields: COMMON_ICON_FIELDS },
             DATE_VALIDATION_SECTION,
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
@@ -37583,7 +37965,6 @@ const FIELD_WIDGETS = [
         dataBinding: { shape: 'scalar', targetPath: 'defaultValue' },
         properties: [
             { label: 'Basic', fields: COMMON_BASIC_FIELDS },
-            { label: 'Icons', fields: COMMON_ICON_FIELDS },
             NUMBER_VALIDATION_SECTION,
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
@@ -37663,44 +38044,6 @@ const FIELD_WIDGETS = [
         dataConsumer: 'none',
         properties: BUTTON_PROPERTIES
     }),
-    defineWidget(pluginId$2, {
-        kind: 'button',
-        flavor: 'form',
-        type: 'submit-button',
-        icon: 'send',
-        label: 'Submit Button',
-        createConfig: () => ({
-            id: generateId$2(),
-            name: 'submit_' + Date.now(),
-            type: 'submit-button',
-            label: 'Submit',
-            variant: 'primary',
-            buttonType: 'submit',
-            style: { width: 'auto' }
-        }),
-        renderer: ButtonWidgetComponent,
-        dataConsumer: 'none',
-        properties: BUTTON_PROPERTIES
-    }),
-    defineWidget(pluginId$2, {
-        kind: 'button',
-        flavor: 'form',
-        type: 'reset-button',
-        icon: 'rotate-ccw',
-        label: 'Reset Button',
-        createConfig: () => ({
-            id: generateId$2(),
-            name: 'reset_' + Date.now(),
-            type: 'reset-button',
-            label: 'Reset',
-            variant: 'secondary',
-            buttonType: 'reset',
-            style: { width: 'auto' }
-        }),
-        renderer: ButtonWidgetComponent,
-        dataConsumer: 'none',
-        properties: BUTTON_PROPERTIES
-    }),
     defineWidget(pluginId$2, {
         kind: 'button',
         flavor: 'form',
@@ -37758,7 +38101,6 @@ const FIELD_WIDGETS = [
             },
             // Options are now handled in Data Tab
             SELECT_VALIDATION_SECTION,
-            COMMON_CONDITIONAL_SECTION,
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
         ]
@@ -37788,7 +38130,6 @@ const FIELD_WIDGETS = [
             { label: 'Basic', fields: COMMON_BASIC_FIELDS },
             // Options handled in Data Tab
             SELECT_VALIDATION_SECTION,
-            COMMON_CONDITIONAL_SECTION,
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
         ]
@@ -37818,7 +38159,6 @@ const FIELD_WIDGETS = [
             { label: 'Basic', fields: COMMON_BASIC_FIELDS },
             // Options handled in Data Tab
             SELECT_VALIDATION_SECTION,
-            COMMON_CONDITIONAL_SECTION,
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
         ]
@@ -37843,14 +38183,7 @@ const FIELD_WIDGETS = [
         properties: [
             { label: 'Basic', fields: COMMON_BASIC_FIELDS },
             // Boolean specific validation or standard
-            {
-                label: 'Validation',
-                fields: [
-                    BASE_REQUIRED_FIELD,
-                    { key: 'validators', type: 'validators-editor', label: 'Advanced Rules' }
-                ]
-            },
-            COMMON_CONDITIONAL_SECTION,
+            createValidationSection(BASE_REQUIRED_FIELD),
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
         ]
@@ -37881,7 +38214,6 @@ const FIELD_WIDGETS = [
         properties: [
             { label: 'Basic', fields: COMMON_BASIC_FIELDS },
             SELECT_VALIDATION_SECTION,
-            COMMON_CONDITIONAL_SECTION,
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
         ]
@@ -37945,7 +38277,6 @@ const FIELD_WIDGETS = [
                 ]
             },
             ...COMMON_STYLE_SECTIONS,
-            COMMON_CONDITIONAL_SECTION
         ]
     })
 ];
@@ -40147,6 +40478,162 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     args: [DOCUMENT]
                 }] }] });
 
+class UiTabComponent {
+    label = '';
+    name = ''; // Unique key for controlled mode
+    disabled = false;
+    badge;
+    badgeTone = 'neutral';
+    template;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UiTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: UiTabComponent, isStandalone: true, selector: "ui-tab", inputs: { label: "label", name: "name", disabled: "disabled", badge: "badge", badgeTone: "badgeTone" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["tpl"], descendants: true, static: true }], ngImport: i0, template: `<ng-template #tpl><ng-content></ng-content></ng-template>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UiTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-tab',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<ng-template #tpl><ng-content></ng-content></ng-template>`
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], badge: [{
+                type: Input
+            }], badgeTone: [{
+                type: Input
+            }], template: [{
+                type: ViewChild,
+                args: ['tpl', { static: true }]
+            }] } });
+class UiTabsComponent {
+    tabQuery;
+    activeTab;
+    activeTabChange = new EventEmitter();
+    // Internal state if uncontrolled
+    _internalIndex = 0;
+    tabs = [];
+    ngAfterContentInit() {
+        this.tabs = this.tabQuery.toArray();
+    }
+    isActive(tab) {
+        if (this.activeTab !== undefined) {
+            return this.activeTab === (tab.name || tab.label);
+        }
+        return this.tabs.indexOf(tab) === this._internalIndex;
+    }
+    activate(tab) {
+        if (tab.disabled)
+            return;
+        const key = tab.name || tab.label;
+        if (this.activeTab !== undefined) {
+            this.activeTabChange.emit(key);
+        }
+        else {
+            this._internalIndex = this.tabs.indexOf(tab);
+        }
+    }
+    get activeTemplate() {
+        if (this.tabs.length === 0)
+            return null;
+        let activeTab;
+        if (this.activeTab !== undefined) {
+            activeTab = this.tabs.find(t => (t.name || t.label) === this.activeTab);
+        }
+        else {
+            activeTab = this.tabs[this._internalIndex];
+        }
+        return activeTab?.template || null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UiTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: UiTabsComponent, isStandalone: true, selector: "ui-tabs", inputs: { activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange" }, queries: [{ propertyName: "tabQuery", predicate: UiTabComponent }], ngImport: i0, template: `
+    <div class="flex flex-col min-h-0 h-full">
+      <div class="flex items-center gap-1 px-3 border-b border-slate-200 bg-white shrink-0">
+        <button
+          *ngFor="let tab of tabs; let i = index"
+          (click)="activate(tab)"
+          class="relative h-10 px-3 text-xs font-semibold transition-colors rounded-t-md border-b-2"
+          [class.text-accent-600]="isActive(tab)"
+          [class.border-accent-600]="isActive(tab)"
+          [class.text-ink-500]="!isActive(tab)"
+          [class.border-transparent]="!isActive(tab)"
+          [class.hover:text-ink-700]="!isActive(tab)"
+          [disabled]="tab.disabled"
+        >
+          <span class="flex items-center gap-2">
+            {{ tab.label }}
+            <span *ngIf="tab.badge" class="text-[10px] px-1.5 py-0.5 rounded-full border"
+                  [class.bg-accent-50]="tab.badgeTone === 'accent'"
+                  [class.border-accent-200]="tab.badgeTone === 'accent'"
+                  [class.text-accent-700]="tab.badgeTone === 'accent'"
+                  [class.bg-slate-100]="tab.badgeTone === 'neutral'"
+                  [class.border-slate-200]="tab.badgeTone === 'neutral'"
+                  [class.text-slate-600]="tab.badgeTone === 'neutral'">
+              {{ tab.badge }}
+            </span>
+          </span>
+        </button>
+      </div>
+
+      <div class="flex-1 min-h-0 overflow-hidden bg-slate-50/30">
+        <ng-container *ngIf="activeTemplate">
+          <ng-container *ngTemplateOutlet="activeTemplate"></ng-container>
+        </ng-container>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UiTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-tabs', standalone: true, imports: [CommonModule], template: `
+    <div class="flex flex-col min-h-0 h-full">
+      <div class="flex items-center gap-1 px-3 border-b border-slate-200 bg-white shrink-0">
+        <button
+          *ngFor="let tab of tabs; let i = index"
+          (click)="activate(tab)"
+          class="relative h-10 px-3 text-xs font-semibold transition-colors rounded-t-md border-b-2"
+          [class.text-accent-600]="isActive(tab)"
+          [class.border-accent-600]="isActive(tab)"
+          [class.text-ink-500]="!isActive(tab)"
+          [class.border-transparent]="!isActive(tab)"
+          [class.hover:text-ink-700]="!isActive(tab)"
+          [disabled]="tab.disabled"
+        >
+          <span class="flex items-center gap-2">
+            {{ tab.label }}
+            <span *ngIf="tab.badge" class="text-[10px] px-1.5 py-0.5 rounded-full border"
+                  [class.bg-accent-50]="tab.badgeTone === 'accent'"
+                  [class.border-accent-200]="tab.badgeTone === 'accent'"
+                  [class.text-accent-700]="tab.badgeTone === 'accent'"
+                  [class.bg-slate-100]="tab.badgeTone === 'neutral'"
+                  [class.border-slate-200]="tab.badgeTone === 'neutral'"
+                  [class.text-slate-600]="tab.badgeTone === 'neutral'">
+              {{ tab.badge }}
+            </span>
+          </span>
+        </button>
+      </div>
+
+      <div class="flex-1 min-h-0 overflow-hidden bg-slate-50/30">
+        <ng-container *ngIf="activeTemplate">
+          <ng-container *ngTemplateOutlet="activeTemplate"></ng-container>
+        </ng-container>
+      </div>
+    </div>
+  `, styles: [":host{display:block;height:100%}\n"] }]
+        }], propDecorators: { tabQuery: [{
+                type: ContentChildren,
+                args: [UiTabComponent]
+            }], activeTab: [{
+                type: Input
+            }], activeTabChange: [{
+                type: Output
+            }] } });
+
 class AiToolRegistryService {
     state;
     widgetDefs;