Layout

PreviewStage

A resizable device frame for showing a component or a whole page at 390, 768, 1280 or any width, themed in its own light or dark island.

<script>
  import { PreviewStage } from "@codeatlasdev/ui";
  let width = $state("fill");
</script>

<PreviewStage label="Pricing" bind:width scheme="dark">
  <Pricing />
</PreviewStage>
<PreviewStage label="Dashboard" src="/templates/app/dashboard/" height={720} />

For your own showcases, design reviews and docs. A width control (presets plus a draggable splitter) sets the frame width in CSS pixels. When the stage is narrower than the chosen width, the whole frame is scaled down, so a 1280 px page still lays out at 1280 px. The stage has a fixed height up front, so content that loads late never shifts what is below it.

Two modes. With children the content is inline and themed in its own ThemeIsland (scheme, preset), so a light or dark switch never touches the page around it. With src a same-origin page loads in an <iframe>: isolated styles, real viewport width, real media queries. Use src for full pages.

<script lang="ts">
  import { Button, PreviewStage } from '@codeatlasdev/ui';

  let width = $state<number | 'fill'>(390);
  let scheme = $state<'light' | 'dark'>('light');
</script>

<PreviewStage label="Button pair" bind:width {scheme} height={220}>
  <Button>Continue</Button>
  <Button variant="outlined">Cancel</Button>
  {#snippet toolbar()}
    <Button size="sm" variant="ghost" onclick={() => (scheme = scheme === 'light' ? 'dark' : 'light')}>
      {scheme === 'light' ? 'Dark' : 'Light'}
    </Button>
  {/snippet}
</PreviewStage>

<script lang="ts">
  import { PreviewStage } from '@codeatlasdev/ui';
</script>

<PreviewStage label="Sign in template" src="/templates/auth/sign-in/" height={420} widths={[390, 768, 1280]} />

Keyboard

The splitter on the frame’s trailing edge is a WAI-ARIA window splitter (role="separator", focusable): aria-valuenow is the width in px. Arrows move 10 px, Shift plus an arrow 100 px, Home and End go to the smallest and largest width.