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.
| 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 |
The workshop follows a short path from guidance to implementation:
- Start Here explains the library contract.
- Foundations shows color, type, spacing, and evidence semantics.
- Components documents stable controls and states.
- Patterns combines controls into product tasks.
- 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. The tables below describe the package contract.
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.
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.
Terraform creates the Worker identity. Storybook builds the static workshop.
Wrangler owns observability, deployment, and the ui.stormtrust.net Custom
Domain.
Use the shared validation and deployment guides and health evidence by app. For a failed release, follow recovery procedures with this application's state and access boundaries.