{
  "type": "View",
  "orientation": "vertical",
  "spacing": 8,
  "responsive": {
    "regular":           { "orientation": "horizontal", "spacing": 24 },
    "landscape":         { "spacing": 16 },
    "regular-landscape": { "orientation": "horizontal", "spacing": 32 }
  },
  "child": [ /* … */ ]
}

// SwiftUI — the converter lifts the responsive container into a
// @ViewBuilder helper, then injects the children via `content()`.
// Children are emitted ONCE; only the wrapper branches.
@ViewBuilder private func responsiveContentArea<Content: View>(
    @ViewBuilder content: () -> Content
) -> some View {
    if horizontalSizeClass == .regular {
        HStack(spacing: 24) { content() }
    } else {
        VStack(spacing: 8) { content() }
    }
}
 
var body: some View {
    responsiveContentArea {
        section0_0()
        section0_1()
    }
}

// Compose — same pattern. Wrapper is @Composable; children pass through.
@Composable
private fun ResponsiveContentArea(content: @Composable () -> Unit) {
    val widthClass = currentWindowAdaptiveInfo().windowSizeClass.windowWidthSizeClass
    if (widthClass == WindowWidthSizeClass.EXPANDED) {
        Row(horizontalArrangement = Arrangement.spacedBy(24.dp)) { content() }
    } else {
        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) { content() }
    }
}

{/* React — Tailwind breakpoint prefixes do the work; landscape uses
    a useMediaQuery hook for the orientation predicate. */}
<div
  className={[
    'flex flex-col gap-2',                  // base / compact
    'lg:flex-row lg:gap-6',                  // regular
    isLandscape && 'gap-4',                  // landscape
    isLandscape && 'lg:flex-row lg:gap-8',   // regular-landscape
  ]
    .filter(Boolean)
    .join(' ')}
>
  {children}
</div>