Layout

MobilePane

A full-screen pane above the shell for mobile drill-down such as chat threads, history and detail views.

<script>
  import { MobilePane } from "@codeatlasdev/ui";
  let open = $state(false);
</script>

<MobilePane bind:open title="Maria Souza" onback={() => (chatId = null)}>
  <Messages />
</MobilePane>

The pane is position: fixed and covers the viewport, with a header that has a back button. Escape and the back button close it, focus moves into the pane on open and returns to the previous element on close, and the body respects safe-area insets and the virtual keyboard. It replaces hand-rolled fixed panels.

Chat

Open the pane. On a phone the text field rises with the virtual keyboard.

Code

<script lang="ts">
  import { MobilePane, Button, IconButton, TextField } from '@codeatlasdev/ui';
  import { MoreVertical } from '@lucide/svelte';

  let open = $state(false);
  const messages = ['Hi!', 'How are you?', 'The report is attached.', 'Can you review it today?', 'Deal, thanks.'];
</script>

<Button variant="filled" onclick={() => (open = true)}>Open conversation</Button>

<MobilePane bind:open title="Maria Souza">
  {#snippet actions()}
    <IconButton variant="text" aria-label="More options"><MoreVertical size={20} aria-hidden="true" /></IconButton>
  {/snippet}
  <ul class="msgs">
    {#each messages as m}<li>{m}</li>{/each}
  </ul>
  <div class="composer"><TextField label="Message" placeholder="Write something…" /></div>
</MobilePane>

<style>
  .msgs { list-style: none; margin: 0; padding: var(--ca-space-4); display: flex; flex-direction: column; gap: var(--ca-space-2); flex: 1; }
  .msgs li { align-self: flex-start; padding: var(--ca-space-2) var(--ca-space-3); border-radius: var(--ca-radius-lg); background: var(--ca-surface-raised); }
  .composer { padding: var(--ca-space-3) var(--ca-space-4); }
</style>

Props

Prop	Type	Default	Description
`open`	`boolean`	`false`	Visibility (bindable). The back button and Escape set it to false.
`title`	`string`	–	Header title and accessible name of the pane.
`onback`	`() => void`	–	Called after the back button or Escape closes the pane.
`children`	`Snippet`	–	Scrollable body.
`actions`	`Snippet`	–	Right side of the header.
`headerTitle`	`Snippet`	–	Replaces the title text in the header (for example avatar plus name). title stays as the accessible name.
`scroll`	`boolean`	`true`	false renders the body as a flex column without its own scroll, for layouts with a scrollable area and a fixed composer.
`class`	`string`	`''`	Extra class names on the pane.