Viewport ranges

Every flow has an intended viewport range — a band of widths it's designed for. The range drives how the wireflow canvas and the per-screen viewport control behave: which breakpoints they offer, what size a screen opens at, and how far you can zoom.

The range is advisory, never a clamp. A reviewer can still look outside it — the chrome just signals that they've left the intended range.

Where the range comes from

The range resolves in a cascade — a flow's own setting wins over the design system's:

effective = flow meta.json `viewport`  ??  <DS>/ds.json `intendedViewport`  ??  unconstrained

• DS-wide default — design-system/<version>/ds.json declares intendedViewport, and every flow on that design system inherits it.
• Per-flow override — a flow's meta.json viewport wins over the DS default. Use it only for exceptions (for example, a desktop-only flow on an otherwise responsive DS).

A range is a min / max pair. Each edge is either raw { w, h } CSS pixels or a generic device-class preset name. For example, the ziptility-v1 ds.json:

{
  "intendedViewport": { "min": { "w": 375, "h": 812 }, "max": { "w": 1440, "h": 900 } }
}

If the authored min is larger than the max, the edges are swapped automatically. A range with an unknown preset or malformed edge is skipped, falling through to the next level of the cascade.

Named ranges (0.8.0)

Raw {min,max} pairs work, but the named ranges introduced in 0.8.0 are the preferred way to express intent — they also carry an ideal (the size a screen opens at), which a bare {min,max} can't:

Set one the same way you'd set a raw range:

// design-system/<version>/ds.json — every flow on this DS inherits it
{ "intendedViewport": "native-phone" }

// a flow's meta.json — overrides the DS default for this flow only
{ "viewport": "desktop-only" }

When a range is authored as a bare { "min": ..., "max": ... } object (rather than a named range), the ideal is taken to be the max.

What the range drives

• The wireflow canvas and the per-screen viewport control offer only in-range breakpoints — out-of-range ones are hidden — and open at the range's ideal.
• Max-zoom is derived from the range's largest allowed width (roughly ~400% for a mobile range, ~800% for a web range).
• The dashboard homepage shows a resolution-range column, and the viewport control's footer shows the resolved "Intended: …" range.

Device-class presets

The generic preset names you can use as range edges (CSS-px dimensions follow the DevTools screen-dp convention — full screen, no browser chrome subtracted):

(Tablets also have -wide landscape variants, plus square-foldable-phone and trifold for foldables.)