> ## 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.

# Common Widgets Catalogue

> App-level reusable widgets in lib/widgets/common/ — adjacent to, but outside, the design system

Beyond `lib/design_system/`, the app keeps reusable feature-agnostic widgets in [`lib/widgets/common/`](https://github.com/slingshot-ai/ash-mobile-app/tree/main/lib/widgets/common). They follow Sundial conventions (tokens via context, no hardcoded styles) but are **not** exported from `design_system.dart` — they're app-level building blocks. Check here before writing a new widget.

## Widgets

| Widget | Purpose |
| - | - |
| `AppBarProgressIndicator` | Progress indicator rendered as the bottom of an app bar |
| `AshStateLoader` | Loading state displaying the Ash typeface, optionally with text |
| `BetaLabel` | Small “beta” pill to mark a feature |
| `BlendMask` | Applies a `BlendMode` to its child (CSS mix-blend-mode analog; render object) |
| `ElevatedButtonWithLoader` | `ElevatedButton` that swaps in a spinner while `loading` |
| `CarouselListView` | Horizontal scrollable carousel (hooks-based) |
| `ConversationCard` | Card representing a conversation entry |
| `FeatureIntroModal` | Multi-page feature introduction modal (Riverpod consumer) |
| `MarkdownText` | Text with markdown-like syntax support |
| `OptionSelector` | Generic selectable list-of-options |
| `PageIndicator` | Animated pagination dots |
| `PageMenu` | Page-level menu |
| `ProgressCounter` | Step/progress counter |
| `RatingScale` | Numeric rating scale selector |
| `ScrollableEdgeFade` | Fades the top/bottom edges of a scrollable |
| `SizeReporter` | Reports child's laid-out size and screen position (render object) |
| `StarRating` | Star-based rating display |
| `TextContent` | Structured text content renderer (headings etc.) |
| `TextFieldWithTranscription` | [`StyledTextField`](https://design.slingshotai.com/components/styled-text-field) + audio-transcription button (Rive) |

## Dialogs — `common/dialogs/`

| Item | Purpose |
| - | - |
| `CenterModalPopUp` | Full-screen blocking modal |
| `showConfirmationDialog(…)` | Standard confirm/cancel dialog function |
| `ForceUpdateModal` | Blocks the app when the version is unsupported |
| `interstitialModalHeader(…)` | Header builder (image/icon) for `CenterModalPopUp` flows |
| `showSnackBarMessage(…)` | Themed snackbar function |
| `show_toast_message.dart` | Global toast overlay manager + show function |
| `UrlInputDialog` | URL input dialog |

## Layout — `common/layout/`

| Widget | Purpose |
| - | - |
| `ScrollViewWithBottomChild` | Scroll view that pins a `bottomChild` to the bottom |

## Related: animations

Rive and animation helpers live in `lib/widgets/animations/` (`RiveLoader`, `rive_color_injection`, `AnimatedFade`, `AnimatedTextSequence`, `FadeInText`, `RevealAnimation`, `SlideAndFadeTransition`). Rive artwork, Lottie assets, and the bloom shader system are app-level concerns outside the design system.

> [!NOTE]
>
> **Promotion path**: when a common widget proves broadly useful and stable, consider moving it into `lib/design_system/components/` with the full treatment — `Styled*`/`Ash*` naming, token discipline, docs page. See [Contributing](https://design.slingshotai.com/patterns/contributing.md).


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