> ## Documentation Index
> Fetch the complete documentation index at: https://design.slingshotai.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> This site documents Sundial 2.0, the design system of the Ash mobile app (Flutter). For implementing UI: use the Design System pages — color/typography tokens (foundations/*), Flutter theming (theming/*), and component APIs (components/*) — as your reference; every value there mirrors the Dart source in lib/design_system/. The Philosophy pages (philosophy/*) are design rationale written for humans: consult them when making design decisions, not for API lookups. Golden rules: never hardcode colors or text styles — read tokens via context.colorTheme and context.textTheme; prefer the 2.0 semantic names (contentPrimary, surfaceComponent, accentSolid…) over legacy contrast*/surface* getters and over SundialRef primitives; the accent is a single pale lavender solid that takes dark content — never use accent fills as text, icons, or borders (use contentAccent / borderSelected); brand surfaces are mode-invariant and pair with the contentOnBrand* inks; check lib/design_system/components/ before building custom widgets.

# StyledScaffold

> The app's screen shell: StyledAppBar, back handling, and system UI overlay control

A wrapper around `Scaffold` that gives every main screen consistent structure: a compact custom app bar, unified back-button behavior, and status-bar brightness control. Source: [`styled_scaffold.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/styled_scaffold.dart) — which exports four things:

* **`StyledScaffold`** — the screen shell
* **`StyledAppBar`** — the compact app bar (usable standalone)
* **`ScaffoldCloseButton`** — themed circular close button
* **`SystemUiOverlayOverride`** — status-bar icon brightness for a subtree

```dart theme={null}
StyledScaffold(
  title: Text('Preferences'),
  body: PreferencesList(),
)
```

## Back-button behavior

The scaffold wraps its `Scaffold` in a `PopScope` with **`canPop: false` by default**: system back gestures and the app-bar back button are intercepted and routed through `onLeadingPressed`, which defaults to `Beamer.of(context).beamToHome()`.

Set `canPop: true` for screens stacked over another route (e.g. the session screen over home) so iOS edge-swipe and system back perform a native pop revealing the route beneath.

## StyledScaffold API

| Parameter | Type | Default | Notes |
| - | - | - | - |
| `body` | `Widget` | **required** | Main content, wrapped in `SystemUiOverlayOverride` |
| `title` / `leading` / `trailing` | `Widget?` | — | Passed to `StyledAppBar` |
| `appBarBottom` | `PreferredSizeWidget?` | — | Banner/controls under the toolbar |
| `hideAppBar` | `bool` | `false` | Remove the app bar entirely |
| `hideBackButton` | `bool` | `false` | Suppress the default back button |
| `showAppBarBottomBorder` | `bool` | `false` | 2 px `surfaceElevated` border |
| `bottomNavigationBar` | `Widget?` | — | e.g. [StyledNavigationBar](https://design.slingshotai.com/components/styled-navigation-bar.md) |
| `floatingActionButton` (+`Location`) | `Widget?` | — | Standard Material FAB slot |
| `extendBodyBehindAppBar` | `bool` | `false` | Full-bleed behind the app bar |
| `extendBodyBehindNavigationBar` | `bool` | `false` | Maps to `Scaffold.extendBody` |
| `resizeToAvoidBottomInset` | `bool` | `true` | Keyboard avoidance |
| `onLeadingPressed` | `VoidCallback?` | beam home | Back/leading action |
| `backgroundColor` | `Color?` | theme `surfaceBg` | — |
| `uiOverlayBrightness` | `Brightness?` | theme brightness | Status-bar icon color |
| `canPop` | `bool` | `false` | See back-button behavior above |

## StyledAppBar

A compact toolbar (**`ashToolbarHeight = 40`**, vs. Material's 56) built on `NavigationToolbar` inside a `SafeArea`. Title renders in `titleMedium` / `contrastMedium`, centered. When `onBackButtonPressed` is provided and no custom `leading`, a `BackButton` appears. Padding knobs: `topPadding` (default `kToolbarHeight - 40`), `bottomPadding` (0), `horizontalPadding` (16). Implements `preferredSize` from its paddings + border + `appBarBottom`.

## ScaffoldCloseButton

40×40 `IconButton` with `Icons.close`, `surfaceElevated` background, `contrastMedium` foreground — the standard dismiss affordance for modal-style screens.

```dart theme={null}
StyledScaffold(
  hideBackButton: true,
  trailing: ScaffoldCloseButton(onPressed: () => Navigator.pop(context)),
  body: …,
)
```

## SystemUiOverlayOverride

Sets status-bar icon brightness via `AnnotatedRegion<SystemUiOverlayStyle>` — dark icons on light themes, light icons on dark. Pass `brightness` explicitly when a screen mixes light content with a dark header (or vice versa). Also exported: `context.systemUiOverlayStyle` for manual use.

## Tokens consumed

`surfaceBg` (via theme), `surfaceElevated` (border, close button), `contrastMedium` (title, icons); typography `titleMedium`.

> [!NOTE]
>
> `StyledScaffold` depends on the app's Beamer router for its default back action — it's the one design-system component with a navigation dependency.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.