# ui.stormtrust.net

`ui.stormtrust.net` is the Storybook workshop for the private, repository-local `@stormtrust/ui` package. Use it to find shared components, inspect their states, exercise keyboard and pointer behavior, and review composed weather-to-action patterns. It is not a source of live weather or customer results.

## Application reference

| Property          | Value                                                                          |
| ----------------- | ------------------------------------------------------------------------------ |
| Source            | org/apps/ui/                                                                   |
| Worker            | stormtrust-ui                                                                  |
| Custom domain     | ui.stormtrust.net                                                              |
| Workshop          | Storybook                                                                      |
| Components        | Vue and Ark UI                                                                 |
| Interaction state | Zag machines                                                                   |
| Styling           | Tailwind CSS over the shared Nimbus/Kumo-compatible StormTrust v1.2.0 contract |
| Map renderer      | MapLibre GL JS behind StormMapEngine                                           |
| Verification      | make app-verify APP=ui                                                         |

## Find the right surface

The workshop follows a short path from guidance to implementation:

1. **Start Here** explains the library contract.
2. **Foundations** shows color, type, spacing, and evidence semantics.
3. **Components** documents stable controls and states.
4. **Patterns** combines controls into product tasks.
5. **Experimental** contains interfaces that are not stable package APIs.

The toolbar previews light, dark, and system themes. Component stories run interaction and accessibility checks in Chromium during verification.

For the implementation procedure, use [Reuse shared UI](/stormtrust/engineering/operations/reuse-ui/). The tables below describe the package contract.

## Consume the package

Use the smallest export that matches the task:

| Export                    | Use                                                                                                               |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| @stormtrust/ui            | Kumo-compatible controls plus the documentation shell, navigation, search, page metadata, footer, and agent index |
| @stormtrust/ui/assets     | Stable URL helpers for mirrored Cloudflare Docs product, framework, and agent icons                               |
| @stormtrust/ui/replay     | Replay stages, timeline machine, controls, flow, and lightweight map visual                                       |
| @stormtrust/ui/map        | Map engine types, MapLibre adapter, layer switch, and inspector patterns                                          |
| @stormtrust/ui/styles.css | Tailwind-generated component styles and canonical StormTrust tokens                                               |

The public website consumes the replay and component exports without shipping MapLibre. Ark UI provides accessible component structure, while Zag machines own durable interaction state. The public asset release supplies the same semantic colors, Inter and JetBrains Mono faces, type scale, spacing, borders, focus rings, and shadows used by this developers application. Visual parity does not couple StormTrust front ends to its Astro or React runtime. Product code does not call MapLibre directly.

Use the **Cloudflare parity** stories to compare common Kumo component states. Use **Cloudflare Docs assets** to inspect the narrowly mirrored icon sets. The asset release preserves upstream licenses and canonical source attribution; page-specific media and Cloudflare brand artwork remain documentation-owned.

## Reuse the documentation experience

`StDocsShell` packages the same low-friction reading structure used by this developers application: a 56-pixel sticky header, responsive product sidebar, constrained reading column, optional table of contents, page actions, previous and next navigation, and footer. It composes independently exported pieces for search, breadcrumbs, navigation, metadata, and pagination, so another StormTrust application can adopt only the parts its information architecture needs.

The shell includes the familiar active, inactive, hover, focus, and expanded states; Inter and JetBrains Mono typography; responsive spacing; small product and agent icons; **Copy as Markdown**, **View as Markdown**, reviewed-time, and agent-index patterns. Ark UI and Zag still own accessible behavior and state. The Cloudflare Docs-aligned styling is a presentation contract, not a runtime dependency on the developers application.

Review **Patterns > Documentation shell** in Storybook to interact with the complete desktop and mobile experience. Use the full shell for documentation, help, and developer surfaces. For focused product workflows, use the smaller components directly to avoid importing navigation that the task does not need.

The production map reads complete event revisions from `stormtrust-data`. Revision WebSockets are invalidation signals: the client reloads the authoritative revision API. At the live edge, it follows the newest frame. If a user is replaying an earlier frame, it preserves their context and offers one **Jump to latest** action.

Keep product-specific map rendering inside the UI application. Add an item to the shared replay export only when more than one StormTrust application needs the same contract. Label demonstration fixtures and estimated exposure explicitly.

## Ownership

Terraform creates the Worker identity. Storybook builds the static workshop. Wrangler owns observability, deployment, and the `ui.stormtrust.net` Custom Domain.

## Operational guides

Use the shared [validation and deployment guides](/stormtrust/engineering/operations/) and [health evidence by app](/stormtrust/engineering/operations/health/#evidence-by-application). For a failed release, follow [recovery procedures](/stormtrust/engineering/operations/recover/) with this application's state and access boundaries.