voltra 1.4.0 → 2.0.0-rc.3

package/ios/ui/Layout/FlexContainerHelper.swift

@@ -1,114 +0,0 @@
-import SwiftUI
-
-// MARK: - Shared Flex Container Rendering
-
-/// Shared values computed from a flex container's style
-struct FlexContainerValues {
-  let padding: EdgeInsets
-  let alignItems: FlexAlign
-  let justifyContent: FlexJustify
-  let gap: CGFloat
-  let layout: LayoutStyle
-  let decoration: DecorationStyle
-  let rendering: RenderingStyle
-}
-
-enum FlexContainerHelper {
-  /// Parse flex container values from an element's style dictionary.
-  /// `alignmentMapping` converts component-specific alignment strings (e.g. "leading", "top")
-  /// to FlexAlign values, used as fallback when alignItems isn't set in style.
-  static func parseValues(
-    from element: VoltraElement,
-    alignmentFallback: FlexAlign = .stretch
-  ) -> FlexContainerValues {
-    let anyStyle = element.style?.mapValues { $0.toAny() } ?? [:]
-    let (layout, decoration, rendering, _) = StyleConverter.convert(anyStyle)
-
-    let alignItemsFromStyle = (anyStyle["alignItems"] as? String).flatMap { FlexAlign(fromStyle: $0) }
-    let justifyContentFromStyle = (anyStyle["justifyContent"] as? String).flatMap { FlexJustify(fromStyle: $0) }
-
-    let finalAlignItems = alignItemsFromStyle ?? alignmentFallback
-    let justifyContent = justifyContentFromStyle ?? .flexStart
-    let gap = layout.gap ?? 0
-
-    return FlexContainerValues(
-      padding: layout.padding ?? EdgeInsets(),
-      alignItems: finalAlignItems,
-      justifyContent: justifyContent,
-      gap: gap,
-      layout: layout,
-      decoration: decoration,
-      rendering: rendering
-    )
-  }
-
-  /// Map a VStack alignment string to a FlexAlign fallback
-  static func verticalAlignmentFallback(_ alignment: String) -> FlexAlign {
-    switch alignment.lowercased() {
-    case "leading": return .flexStart
-    case "trailing": return .flexEnd
-    case "center": return .center
-    default: return .stretch
-    }
-  }
-
-  /// Map an HStack alignment string to a FlexAlign fallback
-  static func horizontalAlignmentFallback(_ alignment: String) -> FlexAlign {
-    switch alignment.lowercased() {
-    case "top": return .flexStart
-    case "bottom": return .flexEnd
-    case "center": return .center
-    default: return .stretch
-    }
-  }
-}
-
-// MARK: - Flex Container View Modifier
-
-/// Applies layout, decoration, rendering, margin, offset, positioning, and zIndex
-/// to a flex container — everything except padding (handled by the flex engine).
-/// Also sets FlexItemLayoutKey so this view can be a flex child of another container.
-struct FlexContainerStyleModifier: ViewModifier {
-  let values: FlexContainerValues
-
-  func body(content: Content) -> some View {
-    let layout = values.layout
-    let layoutWithoutPadding: LayoutStyle = {
-      var l = layout
-      l.padding = nil
-      return l
-    }()
-
-    content
-      .modifier(LayoutModifier(style: layoutWithoutPadding))
-      .modifier(DecorationModifier(style: values.decoration))
-      .modifier(RenderingModifier(style: values.rendering))
-      .voltraIfLet(layout.margin) { c, margin in
-        c.background(.clear).padding(margin)
-      }
-      .voltraIfLet(layout.relativeOffset) { c, offset in
-        c.offset(x: offset.x, y: offset.y)
-      }
-      .voltraIfLet(layout.absolutePosition) { c, position in
-        c.position(x: position.x, y: position.y)
-      }
-      .voltraIfLet(layout.zIndex) { c, z in
-        c.zIndex(z)
-      }
-      // Set FlexItemLayoutKey so this container can be a flex child of another container
-      .layoutValue(key: FlexItemLayoutKey.self, value: FlexItemValues(
-        flexGrow: layout.flexGrow,
-        flexShrink: layout.flexShrink,
-        flexBasis: layout.flexBasis,
-        width: layout.width,
-        height: layout.height,
-        minWidth: layout.minWidth,
-        maxWidth: layout.maxWidth,
-        minHeight: layout.minHeight,
-        maxHeight: layout.maxHeight,
-        alignSelf: layout.alignSelf,
-        margin: layout.margin,
-        aspectRatio: layout.aspectRatio
-      ))
-  }
-}

package/ios/ui/Layout/VoltraFlexStackLayout.swift

@@ -1,417 +0,0 @@
-import SwiftUI
-
-// MARK: - Voltra Flex Stack Layout
-
-/// SwiftUI Layout implementing RN-like flexbox for a single axis
-struct VoltraFlexStackLayout: Layout {
-  let axis: Axis // .vertical or .horizontal
-  let spacing: CGFloat
-  let alignItems: FlexAlign // Default: .stretch
-  let justifyContent: FlexJustify // Default: .flexStart
-  let containerPadding: EdgeInsets // From container's style
-
-  // MARK: - sizeThatFits
-
-  func sizeThatFits(
-    proposal: ProposedViewSize,
-    subviews: Subviews,
-    cache _: inout ()
-  ) -> CGSize {
-    let available = availableSize(from: proposal)
-    let resolved = resolveChildren(subviews: subviews, available: available)
-    let totalMain = resolved.reduce(0) { $0 + $1.mainSize + $1.mainMargin }
-      + spacing * CGFloat(max(0, subviews.count - 1))
-    let maxCross = resolved.reduce(0) { max($0, $1.crossSize + $1.crossMargin) }
-
-    let mainSize = main(from: proposal) ?? (totalMain + mainPadding)
-    let crossSize = cross(from: proposal) ?? (maxCross + crossPadding)
-
-    return size(main: mainSize, cross: crossSize)
-  }
-
-  // MARK: - placeSubviews
-
-  func placeSubviews(
-    in bounds: CGRect,
-    proposal _: ProposedViewSize,
-    subviews: Subviews,
-    cache _: inout ()
-  ) {
-    let available = CGSize(
-      width: bounds.width - leadingPad - trailingPad,
-      height: bounds.height - topPad - bottomPad
-    )
-    let resolved = resolveChildren(subviews: subviews, available: available)
-
-    // Compute main-axis positions based on justifyContent
-    let totalChildrenAndMargins = resolved.reduce(CGFloat(0)) { $0 + $1.mainSize + $1.mainMargin }
-    let baseSpacing = spacing * CGFloat(max(0, subviews.count - 1))
-    let usesJustifySpacing = justifyContent == .spaceBetween || justifyContent == .spaceAround || justifyContent == .spaceEvenly
-    // For spacing-based justify modes, remaining space includes base spacing (justify replaces it)
-    let totalMain = totalChildrenAndMargins + (usesJustifySpacing ? 0 : baseSpacing)
-    let remainingMain = mainAxis(available) - totalMain
-    let (startOffset, gapSpacing) = justifyOffsets(
-      remaining: remainingMain, count: subviews.count
-    )
-    // For spacing-based justify, gapSpacing replaces base spacing; otherwise add extraSpacing (0) to base
-    let effectiveSpacing = usesJustifySpacing ? gapSpacing : (spacing + gapSpacing)
-
-    var mainCursor = mainStart(bounds) + startOffset
-
-    for (index, subview) in subviews.enumerated() {
-      let child = resolved[index]
-
-      // Main-axis: advance by leading margin
-      mainCursor += child.mainMarginLeading
-
-      // Cross-axis: align based on alignItems / alignSelf
-      let crossPos = crossPosition(
-        child: child,
-        availableCross: crossAxis(available),
-        boundsOrigin: crossStart(bounds)
-      )
-
-      let point = position(main: mainCursor, cross: crossPos)
-      let childProposal = ProposedViewSize(
-        width: axis == .horizontal ? child.mainSize : child.crossSize,
-        height: axis == .vertical ? child.mainSize : child.crossSize
-      )
-      subview.place(at: point, anchor: .topLeading, proposal: childProposal)
-
-      mainCursor += child.mainSize + child.mainMarginTrailing + effectiveSpacing
-    }
-  }
-
-  // MARK: - Child Resolution
-
-  private struct ResolvedChild {
-    let mainSize: CGFloat
-    let crossSize: CGFloat
-    let mainMarginLeading: CGFloat
-    let mainMarginTrailing: CGFloat
-    let crossMarginLeading: CGFloat
-    let crossMarginTrailing: CGFloat
-    var mainMargin: CGFloat {
-      mainMarginLeading + mainMarginTrailing
-    }
-
-    var crossMargin: CGFloat {
-      crossMarginLeading + crossMarginTrailing
-    }
-
-    let alignSelf: FlexAlign?
-  }
-
-  private func resolveChildren(
-    subviews: Subviews,
-    available: CGSize
-  ) -> [ResolvedChild] {
-    let availableMain = mainAxis(available)
-    let availableCross = crossAxis(available)
-
-    // Step 1: Compute base sizes
-    var items: [(index: Int, baseMain: CGFloat, flexGrow: CGFloat, flexShrink: CGFloat,
-                 minMain: CGFloat?, maxMain: CGFloat?, crossSize: CGFloat,
-                 margin: EdgeInsets?, alignSelf: FlexAlign?)] = []
-
-    for (i, subview) in subviews.enumerated() {
-      let values = subview[FlexItemLayoutKey.self]
-      let margin = values.margin ?? EdgeInsets()
-
-      // Determine main-axis basis
-      let mainBasis: CGFloat
-      if let basis = values.flexBasis {
-        switch basis {
-        case let .fixed(v): mainBasis = v
-        case .fill: mainBasis = availableMain.isFinite ? availableMain : measureIntrinsicMain(subview, availableCross: availableCross, values: values)
-        case .wrap: mainBasis = measureIntrinsicMain(subview, availableCross: availableCross, values: values)
-        }
-      } else {
-        // flexBasis: auto → use width/height if set, else intrinsic
-        mainBasis = resolveAutoMainBasis(subview, values: values, availableMain: availableMain, availableCross: availableCross)
-      }
-
-      // Determine cross-axis size
-      // Only stretch to a finite available cross; infinite means intrinsic measurement
-      let effectiveAlign = values.alignSelf ?? alignItems
-      let crossProposal: CGFloat? = (effectiveAlign == .stretch && availableCross.isFinite) ? availableCross : nil
-      let crossSize = resolveCrossSize(subview, values: values, proposal: crossProposal, availableCross: availableCross)
-
-      // Min/max on main axis
-      let (minMain, maxMain) = mainMinMax(values)
-
-      let clampedBase = clamp(mainBasis, min: minMain, max: maxMain)
-
-      items.append((i, clampedBase, values.flexGrow, values.flexShrink,
-                    minMain, maxMain, crossSize, values.margin, values.alignSelf))
-    }
-
-    // Step 2: Compute total base + margins + spacing
-    let totalMargins = items.reduce(CGFloat(0)) { total, item in
-      total + mainMarginSum(item.margin ?? EdgeInsets())
-    }
-    let totalSpacing = spacing * CGFloat(max(0, items.count - 1))
-    let totalBase = items.reduce(CGFloat(0)) { $0 + $1.baseMain }
-    let usedSpace = totalBase + totalMargins + totalSpacing
-    let freeSpace = availableMain - usedSpace
-
-    // Step 3: Distribute free space
-    var finalMainSizes = items.map(\.baseMain)
-
-    if freeSpace > 0 {
-      // Grow
-      let totalGrow = items.reduce(CGFloat(0)) { $0 + $1.flexGrow }
-      if totalGrow > 0 {
-        for (j, item) in items.enumerated() {
-          if item.flexGrow > 0 {
-            let share = freeSpace * (item.flexGrow / totalGrow)
-            finalMainSizes[j] = clamp(item.baseMain + share, min: item.minMain, max: item.maxMain)
-          }
-        }
-      }
-    } else if freeSpace < 0 {
-      // Shrink
-      let totalShrink = items.reduce(CGFloat(0)) { $0 + $1.flexShrink }
-      if totalShrink > 0 {
-        let deficit = -freeSpace
-        for (j, item) in items.enumerated() {
-          if item.flexShrink > 0 {
-            let share = deficit * (item.flexShrink / totalShrink)
-            finalMainSizes[j] = clamp(item.baseMain - share, min: item.minMain, max: item.maxMain)
-          }
-        }
-      }
-    }
-
-    // Step 4: Build resolved children
-    return items.enumerated().map { j, item in
-      let m = item.margin ?? EdgeInsets()
-      return ResolvedChild(
-        mainSize: max(0, finalMainSizes[j]),
-        crossSize: item.crossSize,
-        mainMarginLeading: mainLeadingMargin(m),
-        mainMarginTrailing: mainTrailingMargin(m),
-        crossMarginLeading: crossLeadingMargin(m),
-        crossMarginTrailing: crossTrailingMargin(m),
-        alignSelf: item.alignSelf
-      )
-    }
-  }
-
-  // MARK: - Measurement Helpers
-
-  /// Measure child's intrinsic main-axis size (flexBasis: auto, no explicit size)
-  private func measureIntrinsicMain(
-    _ subview: LayoutSubview,
-    availableCross: CGFloat,
-    values _: FlexItemValues
-  ) -> CGFloat {
-    let proposal: ProposedViewSize
-    if axis == .horizontal {
-      proposal = ProposedViewSize(width: nil, height: availableCross)
-    } else {
-      proposal = ProposedViewSize(width: availableCross, height: nil)
-    }
-    let size = subview.sizeThatFits(proposal)
-    return mainAxis(size)
-  }
-
-  /// Resolve auto basis: use explicit width/height if set, else intrinsic
-  private func resolveAutoMainBasis(
-    _ subview: LayoutSubview,
-    values: FlexItemValues,
-    availableMain: CGFloat,
-    availableCross: CGFloat
-  ) -> CGFloat {
-    let explicitMain = axis == .horizontal ? values.width : values.height
-    if let explicit = explicitMain {
-      switch explicit {
-      case let .fixed(v): return v
-      case .fill: return availableMain.isFinite ? availableMain : measureIntrinsicMain(subview, availableCross: availableCross, values: values)
-      case .wrap: break
-      }
-    }
-    return measureIntrinsicMain(subview, availableCross: availableCross, values: values)
-  }
-
-  /// Resolve cross-axis size
-  private func resolveCrossSize(
-    _ subview: LayoutSubview,
-    values: FlexItemValues,
-    proposal: CGFloat?,
-    availableCross: CGFloat
-  ) -> CGFloat {
-    let explicitCross = axis == .horizontal ? values.height : values.width
-    if let explicit = explicitCross {
-      switch explicit {
-      case let .fixed(v): return v
-      case .fill: return availableCross.isFinite ? availableCross : crossAxis(subview.sizeThatFits(ProposedViewSize(width: nil, height: nil)))
-      case .wrap: break
-      }
-    }
-    // If stretch and no explicit cross size, use full cross axis (only finite values)
-    if let proposal = proposal, proposal.isFinite { return proposal }
-    // Otherwise, measure intrinsic
-    let size = subview.sizeThatFits(ProposedViewSize(width: nil, height: nil))
-    return crossAxis(size)
-  }
-
-  private func mainMinMax(_ values: FlexItemValues) -> (CGFloat?, CGFloat?) {
-    if axis == .horizontal {
-      return (values.minWidth, values.maxWidth)
-    } else {
-      return (values.minHeight, values.maxHeight)
-    }
-  }
-
-  private func clamp(_ value: CGFloat, min: CGFloat?, max: CGFloat?) -> CGFloat {
-    var result = value
-    if let min = min { result = Swift.max(result, min) }
-    if let max = max { result = Swift.min(result, max) }
-    return result
-  }
-
-  // MARK: - Justify Content
-
-  private func justifyOffsets(remaining: CGFloat, count: Int) -> (start: CGFloat, extraSpacing: CGFloat) {
-    guard count > 0 else { return (0, 0) }
-    switch justifyContent {
-    case .flexStart: return (0, 0)
-    case .flexEnd: return (max(0, remaining), 0)
-    case .center: return (max(0, remaining / 2), 0)
-    case .spaceBetween:
-      guard count > 1 else { return (0, 0) }
-      return (0, max(0, remaining / CGFloat(count - 1)))
-    case .spaceAround:
-      let gap = remaining / CGFloat(count)
-      return (max(0, gap / 2), max(0, gap))
-    case .spaceEvenly:
-      let gap = remaining / CGFloat(count + 1)
-      return (max(0, gap), max(0, gap))
-    }
-  }
-
-  // MARK: - Cross-Axis Positioning
-
-  private func crossPosition(
-    child: ResolvedChild,
-    availableCross: CGFloat,
-    boundsOrigin: CGFloat
-  ) -> CGFloat {
-    let effectiveAlign = child.alignSelf ?? alignItems
-    let childCrossWithMargin = child.crossSize + child.crossMargin
-    let remaining = availableCross - childCrossWithMargin
-
-    let alignedPos: CGFloat
-    switch effectiveAlign {
-    case .flexStart:
-      alignedPos = 0
-    case .flexEnd:
-      alignedPos = max(0, remaining)
-    case .center:
-      alignedPos = max(0, remaining / 2)
-    case .stretch:
-      alignedPos = 0 // stretch already applied in size
-    }
-
-    return boundsOrigin + alignedPos + child.crossMarginLeading + crossPaddingLeading
-  }
-
-  // MARK: - Axis Helpers
-
-  private var mainPadding: CGFloat {
-    axis == .horizontal
-      ? containerPadding.leading + containerPadding.trailing
-      : containerPadding.top + containerPadding.bottom
-  }
-
-  private var crossPadding: CGFloat {
-    axis == .horizontal
-      ? containerPadding.top + containerPadding.bottom
-      : containerPadding.leading + containerPadding.trailing
-  }
-
-  private var leadingPad: CGFloat {
-    containerPadding.leading
-  }
-
-  private var trailingPad: CGFloat {
-    containerPadding.trailing
-  }
-
-  private var topPad: CGFloat {
-    containerPadding.top
-  }
-
-  private var bottomPad: CGFloat {
-    containerPadding.bottom
-  }
-
-  private var crossPaddingLeading: CGFloat {
-    axis == .horizontal ? containerPadding.top : containerPadding.leading
-  }
-
-  private func mainAxis(_ size: CGSize) -> CGFloat {
-    axis == .horizontal ? size.width : size.height
-  }
-
-  private func crossAxis(_ size: CGSize) -> CGFloat {
-    axis == .horizontal ? size.height : size.width
-  }
-
-  private func main(from proposal: ProposedViewSize) -> CGFloat? {
-    axis == .horizontal ? proposal.width : proposal.height
-  }
-
-  private func cross(from proposal: ProposedViewSize) -> CGFloat? {
-    axis == .horizontal ? proposal.height : proposal.width
-  }
-
-  private func size(main: CGFloat, cross: CGFloat) -> CGSize {
-    axis == .horizontal ? CGSize(width: main, height: cross) : CGSize(width: cross, height: main)
-  }
-
-  private func position(main: CGFloat, cross: CGFloat) -> CGPoint {
-    axis == .horizontal ? CGPoint(x: main, y: cross) : CGPoint(x: cross, y: main)
-  }
-
-  private func mainStart(_ bounds: CGRect) -> CGFloat {
-    axis == .horizontal ? bounds.minX + containerPadding.leading : bounds.minY + containerPadding.top
-  }
-
-  private func crossStart(_ bounds: CGRect) -> CGFloat {
-    axis == .horizontal ? bounds.minY : bounds.minX
-  }
-
-  private func availableSize(from proposal: ProposedViewSize) -> CGSize {
-    // nil proposal = intrinsic sizing → treat as unconstrained (.infinity)
-    CGSize(
-      width: max(0, (proposal.width ?? .infinity) - containerPadding.leading - containerPadding.trailing),
-      height: max(0, (proposal.height ?? .infinity) - containerPadding.top - containerPadding.bottom)
-    )
-  }
-
-  // MARK: - Margin Helpers
-
-  private func mainMarginSum(_ margin: EdgeInsets) -> CGFloat {
-    axis == .horizontal
-      ? margin.leading + margin.trailing
-      : margin.top + margin.bottom
-  }
-
-  private func mainLeadingMargin(_ margin: EdgeInsets) -> CGFloat {
-    axis == .horizontal ? margin.leading : margin.top
-  }
-
-  private func mainTrailingMargin(_ margin: EdgeInsets) -> CGFloat {
-    axis == .horizontal ? margin.trailing : margin.bottom
-  }
-
-  private func crossLeadingMargin(_ margin: EdgeInsets) -> CGFloat {
-    axis == .horizontal ? margin.top : margin.leading
-  }
-
-  private func crossTrailingMargin(_ margin: EdgeInsets) -> CGFloat {
-    axis == .horizontal ? margin.bottom : margin.trailing
-  }
-}

package/ios/ui/Protocols/VoltraView.swift

@@ -1,29 +0,0 @@
-import SwiftUI
-
-/// Protocol for Voltra component views with typed parameters
-public protocol VoltraView: View {
-  /// The parameters type for this component
-  associatedtype Parameters: ComponentParameters
-
-  /// The backing element
-  var element: VoltraElement { get }
-
-  init(_ element: VoltraElement)
-}
-
-public extension VoltraView {
-  /// Automatically typed parameters accessor
-  var params: Parameters {
-    element.parameters(Parameters.self)
-  }
-}
-
-/// Empty parameters for components that don't need any
-public struct EmptyParameters: ComponentParameters {}
-
-/// Convenience extension for views with no parameters
-public extension VoltraView where Parameters == EmptyParameters {
-  var params: EmptyParameters {
-    EmptyParameters()
-  }
-}

package/ios/ui/Style/BackgroundValue.swift

@@ -1,27 +0,0 @@
-import SwiftUI
-
-enum RadialGradientShape {
-  case circle
-  case ellipse
-}
-
-enum RadialGradientExtent {
-  case closestSide
-  case farthestSide
-  case closestCorner
-  case farthestCorner
-}
-
-struct RadialGradientSpec {
-  var gradient: Gradient
-  var center: UnitPoint
-  var shape: RadialGradientShape
-  var extent: RadialGradientExtent
-}
-
-enum BackgroundValue {
-  case color(Color)
-  case linearGradient(gradient: Gradient, startPoint: UnitPoint, endPoint: UnitPoint)
-  case radialGradient(spec: RadialGradientSpec)
-  case angularGradient(gradient: Gradient, center: UnitPoint, angle: Angle)
-}

package/ios/ui/Style/CompositeStyle.swift

@@ -1,81 +0,0 @@
-import SwiftUI
-
-struct CompositeStyleModifier: ViewModifier {
-  @Environment(\.isInFlexContainer) var isInFlexContainer
-
-  let layout: LayoutStyle
-  let decoration: DecorationStyle
-  let rendering: RenderingStyle
-  var contentAlignment: Alignment = .topLeading
-
-  func body(content: Content) -> some View {
-    Group {
-      if isInFlexContainer {
-        // FLEX CHILD PATH:
-        // 1. Skip LayoutModifier (no .frame() — parent layout controls sizing)
-        // 2. Apply padding (inner spacing is still the child's responsibility)
-        // 3. Apply decoration + rendering
-        // 4. Attach LayoutValueKey for parent flex layout to read
-
-        content
-          .voltraIfLet(layout.padding) { c, p in c.padding(p) }
-          .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: contentAlignment)
-          .modifier(DecorationModifier(style: decoration))
-          .modifier(RenderingModifier(style: rendering))
-          .layoutValue(key: FlexItemLayoutKey.self, value: FlexItemValues(
-            flexGrow: layout.flexGrow,
-            flexShrink: layout.flexShrink,
-            flexBasis: layout.flexBasis,
-            width: layout.width,
-            height: layout.height,
-            minWidth: layout.minWidth,
-            maxWidth: layout.maxWidth,
-            minHeight: layout.minHeight,
-            maxHeight: layout.maxHeight,
-            alignSelf: layout.alignSelf,
-            margin: layout.margin,
-            aspectRatio: layout.aspectRatio
-          ))
-      } else {
-        // LEGACY PATH
-        content
-          .modifier(LayoutModifier(style: layout, contentAlignment: contentAlignment))
-          .voltraIfLet(layout.alignSelf) { content, alignSelf in
-            let alignment: Alignment = switch alignSelf {
-            case .flexStart: .topLeading
-            case .center: .center
-            case .flexEnd: .bottomTrailing
-            case .stretch: .center
-            }
-            content.frame(
-              maxWidth: alignSelf == .stretch ? .infinity : nil,
-              maxHeight: alignSelf == .stretch ? .infinity : nil,
-              alignment: alignment
-            )
-          }
-          .modifier(DecorationModifier(style: decoration))
-          .modifier(RenderingModifier(style: rendering))
-      }
-    }
-    // Margin (flex engine handles margin via LayoutValueKey;
-    // in legacy mode, applied as SwiftUI padding)
-    .voltraIf(!isInFlexContainer) { content in
-      content.voltraIfLet(layout.margin) { c, margin in
-        c.background(.clear).padding(margin)
-      }
-    }
-    // Apply relative positioning (offset from natural position)
-    .voltraIfLet(layout.relativeOffset) { content, offset in
-      content.offset(x: offset.x, y: offset.y)
-    }
-    // Apply absolute positioning (center-based)
-    .voltraIfLet(layout.absolutePosition) { content, position in
-      content.position(x: position.x, y: position.y)
-    }
-    .voltraIfLet(layout.zIndex) { content, zIndex in
-      content.zIndex(zIndex)
-    }
-    // CRITICAL: Reset environment so nested children behave normally
-    .environment(\.isInFlexContainer, false)
-  }
-}