FE-1647: Add Storybook stories for the embedded Preview

[kube]

Summary

Before this PR, the only way to look at the embedded Preview was the demo website's embed route. That route serves the built package, so every change to the Preview cost a package rebuild before it could be seen, and its states could not be put side by side. The editor has had a story since it was built; the Preview never did.

Five stories now cover the Preview's states, and they need no build step. Quick Simulation's artifacts come from the HIR compiler in petrinaut-core, which runs in the browser: the website precompiles them to JSON only to keep the compiler out of its own bundle. The stories compile them at module scope instead, from two core examples.

Links

• Ticket FE-1647

Changes

• Five stories under Petrinaut / Preview

  Read Only, Quick Simulation, With Full View Link, Model With Code, and Narrow Embed.
  Model With Code loads the Deployment Pipeline example, whose transitions and equations carry code, so the inspector's code links have something to open.

• Quick Simulation artifacts are compiled in the story, at module scope

  compileHirArtifacts and lowerScenarioToHir from @hashintel/petrinaut-core/hir, mirroring what the website's generator does at build time.
  Module scope rather than a hook: the models are constants, and the simulation provider keys its lowering on artifact identity, which a per-render value would churn.

• A Frame gives Preview the host it fills

  Preview is width: full; height: full, so it collapses without one. Narrow Embed frames it at 420 by 680 to exercise the stacked inspector and the folded header labels.

• Compilation failures throw with the diagnostics attached

Known issues

• No story for the net selector

  It renders only for a model with subnets, and no core example has any. A hand-built subnet model is the way in, and it is worth its own change.

Test coverage

• Existing @hashintel/petrinaut unit suite
• Every story rendered headless against the running Storybook:

  Node counts match each model, the playback bar and its Quick Simulation trigger appear only where the story supplies one, the full-view link carries its href, Narrow Embed measures 420px, and no story logs a console error.

• Code view exercised in Model With Code:

  Selecting the Start Deployment transition and opening Lambda function shows that transition's documented source.

How to test

• yarn workspace @hashintel/petrinaut dev
• Petrinaut > Preview > Read Only

  Expect canvas, minimap and viewport controls, no playback bar

• Petrinaut > Preview > Quick Simulation

  Expect the sliders button in the bar, and Play to run the model

• Petrinaut > Preview > Model With Code
• Select a transition, then open its lambda function

  Expect the code, read-only, with a back button

• Petrinaut > Preview > Narrow Embed

  Expect the inspector under the canvas once something is selected

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
hash	Ready	Preview	Sep 11, 2026 9:15am UTC
petrinaut	Ready	Preview	Sep 11, 2026 9:15am UTC
petrinaut-docs	Ready	Preview	Sep 11, 2026 9:15am UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 11, 2026 9:15am UTC