Skip to content

ui.stormtrust.net

Last updated View as MarkdownAgent index

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. 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 and health evidence by app. For a failed release, follow recovery procedures with this application's state and access boundaries.