#App Shell

The App Shell establishes a persistent navigation region and a bounded product workspace. It is the top-level frame used by A3S Office, gateway operations, and agent consoles.

npm install @a3s-lab/ui@0.2.0

<div class="app-shell" data-navigation="expanded">
  <aside data-app-navigation>...</aside>
  <main data-app-main>
    <header class="workspace-header">...</header>
    <div data-app-content>...</div>
  </main>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<div class="app-shell" data-navigation="expanded">
  <aside data-app-navigation>...</aside>
  <main data-app-main>
    <header class="workspace-header">...</header>
    <div data-app-content>...</div>
  </main>
</div>

#Parameters

#States and variants

The shell has expanded, collapsed, hidden, and mobile-open states. Below 768px the navigation becomes a contained overlay: its closed state is removed from pointer and keyboard interaction, while data-mobile-navigation="open" reveals it above a local backdrop. State management belongs to the host application because it often persists user preference and coordinates routing. The preview uses a small documentation-only controller.

#Accessibility

Use landmark elements (aside, nav, main, header) and name each navigation region. The navigation toggle needs aria-expanded and a label that changes with state. When mobile navigation is modal, pair this layout with the Drawer behavior for focus containment.