Element: #993 Viewport simulator (concepts/viewport) What it shows: An interactive phone drawing with a device-shape selector, switches for collapsed browser bars and edge-to-edge drawing, a keyboard height slider and a keyboard resize mode, plus a table of what 100lvh, 100svh and 100dvh resolve to and how much of each is hidden. When to use: Teaching why a full-height block must be a floor (min-height) and not a fixed height, and how safe areas and the virtual keyboard change the usable height. Spec: - `import { DEVICE_PRESETS, hiddenBy, type PresetName, viewportHeights } from './model';` computes the numbers; the model is pure and unit-tested - `` and `` - `` with a screen-reader caption listing 100lvh, 100svh, 100dvh and the usable height Tags: viewport, svh, dvh, lvh, safe-area, keyboard, mobile, simulator, concept Needs: @codeatlasdev/ui@4.6.0 Components: SegmentedControl, Switch, Slider Live demo: https://ui.codeatlas.com.br/docs/concepts/viewport#viewport-simulator

({ value: k, label: k }))} /> Keyboard height: {keyboard} px

{#if state.safe.top}

{/if}

{h.visible}px visible

{#if state.safe.bottom && keyboard === 0}

{/if}

{#if keyboard}

keyboard

{/if}

{#each rows as r (r.unit)} {/each}

Height each unit resolves to in the chosen state
Unit	Height	Hidden under UI
`100{r.unit}`	{r.px}px	{r.hidden ? `${r.hidden}px` : 'none'}
Usable by content	{h.usable}px	{h.keyboardInset ? `inset ${h.keyboardInset}px` : 'no inset'}

An illustrative model with round numbers. Real bar heights and keyboard behavior differ by browser and version: test on devices.