Primitive

Viewport

Auto-emitted from DSKintsugiCatalog.viewport. Tier atom.

Live Preview

Dark surface

320px · mobile — cards wrap to column

320px

M1 Portfolio

M2 Strategy

M3 Indicators

768px · tablet — 2-column reflow

768px

M1 Portfolio

M2 Strategy

M3 Indicators

1280px · desktop — 3-column inline row

1280px

M1 Portfolio

M2 Strategy

M3 Indicators

Native · macOS

DSL usage

// Mobile viewport (constrained)
katagami.viewport(
  minWidth: 320,
  maxWidth: 320,
  aspectRatio: nil,
  scaleToFit: true
) {
  VStack(spacing: 12) { moduleCards }
}

// Tablet viewport
katagami.viewport(
  minWidth: 768,
  maxWidth: 768,
  aspectRatio: nil,
  scaleToFit: true
) {
  Grid(columns: 2, spacing: 12) { moduleCards }
}

// Desktop viewport
katagami.viewport(
  minWidth: 1280,
  maxWidth: 1280,
  aspectRatio: nil,
  scaleToFit: true
) {
  HStack(spacing: 12) { moduleCards }
}

Attributes

Name	Type	Default	Description
`minWidth`	CGFloat?	`nil`	Minimum width constraint applied to the viewport frame
`maxWidth`	CGFloat?	`nil`	Maximum width constraint; nil = unconstrained (fills parent)
`aspectRatio`	CGFloat?	`nil`	Optional aspect ratio (width/height); nil = intrinsic height
`scaleToFit`	Bool	`false`	When true the viewport scales its child down to fit inside a smaller host
`density`	Density	`regular`	compact \| regular \| expanded
`locale`	Locale	`en`	BCP-47 locale tag for locale-aware rendering

Used in

sigma-analytics c-tech KatagamiScreens