[dominikhorn93]

Closes the "web-app chrome" part of #4. @miragon/modeler-shell 0.1 covered the chrome for IDE hosts; 0.2 adds the web column of guide §5.2. A Miragon web app now gets its whole chrome from mountShell({ host: "web" }), so the Event Storming web app looks and behaves like its VS Code webview.

What 0.2 adds

• Primary action, top right: "Share" by default. Its label collapses before the palette moves to a second row (decideTopRow).
• Legal line, bottom left: "© year Miragon GmbH", then Impressum and Datenschutz with lang="de" (the corporate-identity URLs), then the modeler's own links.
  • Where the legal line and the zoom panel would meet, the zoom panel moves up above the line (shell rule).
  • In narrow windows the line wraps instead of being cut off, and everything above it moves up with it.
• Menu groups: File and Appearance join Model, Export and Help, in that order.
  • Appearance only appears for dark-capable modelers.
  • commandKeyLabel gives the chips for an app's own Cmd/Ctrl keys.
• Mode before first paint: webHeadMarkup / webModeScript (§13.3), plus the runtime shell.appearance.
• Problems popover above the pill. Every row can be reached by keyboard; rows that point at an element select it.
• Toasts via shell.toast().
  • Two persistent live regions announce them.
  • At most three, with eviction.
  • Hovering or focusing a toast pauses it; a toast with an action never closes by itself.
  • The stack goes into the top layer above modal dialogs.
  • It moves up only where its widest card would meet the bottom row.
• Start screen: the empty-state card. It hides the work chrome and makes the canvas inert. Its hint offers "Open a file…". The browser keeps its page-zoom keys there.
• Drop zone: page-wide, with the §9 over and forbidden states.
• Conformance kit: five web cases and extended geometry, aria and appearance cases, each backed by saboteurs.

Review round (in this PR)

Six commits on top of the first implementation fix what three reviews (spec, Event Storming integration, accessibility) found:

• Toasts
  • Status toasts could go unannounced because each card was its own live region; there are now persistent live regions.
  • At 1280px the toasts sat at bottom 40 instead of 12 because of a 0.5px gap test against the whole stack; it now tests the widest card.
• Keyboard
  • Keyboard users couldn't read past the visible rows of a problems list made of text rows.
  • The start screen swallowed the browser's zoom keys.
  • Closing a toast on the start screen dropped the focus to <body>.
  • The start screen had no keyboard way to open a file.
• Narrow windows: at 320px the legal line cut off Datenschutz.
• Smaller fixes:
  • Close buttons are now told apart by their toast's text.
  • The legal links say they open a new tab.
  • The canvas is the web page's main landmark.
  • The start screen's card border in high contrast now matches the other islands.
  • The docs are aligned with the Event Storming pilot.

Testing

• npm run lint, npm test (api 78, shell 1182), npm run build, publint.
• playwright test: 136/136. The kit runs on the ide, web and embedded hosts plus the dark-capable variants, and all saboteurs pass.
• Each commit typechecks and passes vitest on its own.

Notes

• The version comes from release-please: the feat commits make 0.2.0. The Event Storming pilot (Miragon/event-storming-modeler, feat/webapp-shell) runs on a local pack of this branch until 0.2.0 is published.
• Shell rules where the guide is silent, listed for the product owner in the implementation notes:
  • toast stack position (the bottom row and the widest card);
  • the raised zoom row;
  • the wrapping legal line;
  • the text link on the start screen;
  • the browser keeping its page zoom on the start screen;
  • "dialog" in §5.8 read as modal;
  • cards sized to their content;
  • the copyright as a link.

🤖 Generated with Claude Code