FE-1705: Add bottom toolbar layouts and a blur fallback for its glass

[kube]

Important

Experimental
Adds the Bottom toolbar layout setting. Glass finish by browser ships for everyone.

Summary

Before this PR, the bottom toolbar drew its glass through an SVG backdrop filter that only Chromium renders, so Safari and Firefox showed a flat panel. The bar had one layout, two glass segments, while the design file carries a single-segment version with an Edit / Simulate switch at its end.

Every segment now paints a blurred backdrop first and, on Chromium, fades the refraction in over 0.4s. A Bottom toolbar setting picks between three layouts: the split bar, the design file's mode-switch bar, and a single bar holding every control. All three share the frame that keeps the bar clear of the panels and collapses controls when room runs short.

Links

• Ticket FE-1706
• Ticket FE-1705
• Docs Visual settings › Bottom toolbar (experimental)
• Docs Drawing a net
• Design floatingToolbar component set

Changes

Glass finish

• Every toolbar segment is a GlassSurface with a blur layer under its fill

  Chromium adds the refractive layer, which fades in over 0.4s while the blur fades out and unmounts.
  Safari and Firefox keep a 14px blur.

• Browser detection reads userAgentData.brands, with the user agent string as fallback

  Only Chromium paints an SVG filter given to backdrop-filter, and CSS.supports cannot tell.
  Chrome on iOS renders with WebKit and gets the blur.

Layouts

• Bottom toolbar setting under General picks Split, Mode switch or Single

  Persisted values are validated on load, so a layout a build no longer has falls back to Split.

• BottomBar becomes the frame: lane, placement against the panels, collapse context and layout dispatch

  The three layouts render from the same props and building blocks.

• Mode-switch layout follows the design file's single segment

  Cursor square tinted blue on the edit face and purple on the simulate face, that face's controls, chart-line panel toggle, Edit / Simulate switch at the end.
  Starting a run turns the bar to the simulate face.
  While the run holds the net, the edit segment is locked and its tooltip says to reset.

• Single layout holds every control in one segment

  Cursor, AI assistant and add tools, diagnostics, filled Play, scrubber and playback settings, panel toggle at the end.

• Playback settings can open from the current speed next to Play

  Mode-switch layout uses it; the gear stays the default elsewhere.

• Toolbar buttons and the cursor trigger take a tone and a filled appearance

Motion

• Collapse and reveal curves retuned

  Collapse runs 180ms on the standard curve with the opacity leading the width.
  Reveal runs 140ms and decelerates.

Known issues

• Blur-only finish covered by the detection tests, not checked by eye in Safari or Firefox
• Collapse and reveal timings have not been measured

Next steps

• Screenshots of the two new layouts for the user guide

Test coverage

Extraction onto main preserved the complete feature patch without conflicts. All 37 focused glass, Settings keyboard, and preference tests passed. The earlier integrated stack passed package builds, unit tests, types, lint, and architecture checks. Browser recordings and manual checks listed below predate extraction.

• glass-finish.test.ts:

  Chromium brands, the user agent fallback, and Chrome on iOS taking the blur.

• Existing @hashintel/petrinaut unit suite.
• Storybook DOM probes and screenshots:

  All three layouts on the SIR story, including mid-playback; refractive layer active and blur layer unmounted on Chromium.

How to test

• Open Petrinaut preview on Vercel
• Menu > Load example > SIR
• Menu > User settings > General > Bottom toolbar > Mode switch

  Expect one segment, blue cursor square, pencil selected at the right end

• Press the play segment of the switch

  Expect purple cursor square, Play, speed and chart toggle

• Press Play

  Expect scrubber and pause, pencil segment disabled

• Viewport controls > Settings > Viewport > Bottom toolbar > Single

  Expect one segment with a filled blue Play

• Open the bottom panel

  Expect the bar to lift with the panel

[vercel]

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

Project	Deployment	Actions	Updated
hash	Ready	Preview	Sep 15, 2026 10:17pm UTC
petrinaut	Ready	Preview	Sep 15, 2026 10:17pm UTC
petrinaut-docs	Ready	Preview	Sep 15, 2026 10:17pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 15, 2026 10:17pm UTC

[semgrep-code-hashintel]

Semgrep identified an issue in your code:
A hardcoded username in plain text is identified. Store it properly in an environment variable.

To resolve this comment:

🔧 No guidance has been designated for this issue. Fix according to your organization's approved methods.

💬 Ignore this finding

Reply with Semgrep commands to ignore this finding.

• /fp <comment> for false positive
• /ar <comment> for acceptable risk
• /other <comment> for all other reasons

Alternatively, triage in Semgrep AppSec Platform to ignore the finding created by node_username.

_{You can view more details about this finding in the Semgrep AppSec Platform.}

[semgrep-code-hashintel]

Semgrep identified an issue in your code:
A hardcoded username in plain text is identified. Store it properly in an environment variable.

To resolve this comment:

🔧 No guidance has been designated for this issue. Fix according to your organization's approved methods.

💬 Ignore this finding

Reply with Semgrep commands to ignore this finding.

• /fp <comment> for false positive
• /ar <comment> for acceptable risk
• /other <comment> for all other reasons

Alternatively, triage in Semgrep AppSec Platform to ignore the finding created by node_username.

_{You can view more details about this finding in the Semgrep AppSec Platform.}

[semgrep-code-hashintel]

Semgrep identified an issue in your code:
A hardcoded username in plain text is identified. Store it properly in an environment variable.

To resolve this comment:

🔧 No guidance has been designated for this issue. Fix according to your organization's approved methods.

💬 Ignore this finding

Reply with Semgrep commands to ignore this finding.

• /fp <comment> for false positive
• /ar <comment> for acceptable risk
• /other <comment> for all other reasons

Alternatively, triage in Semgrep AppSec Platform to ignore the finding created by node_username.

_{You can view more details about this finding in the Semgrep AppSec Platform.}

[semgrep-code-hashintel]

Semgrep identified an issue in your code:
A hardcoded username in plain text is identified. Store it properly in an environment variable.

To resolve this comment:

🔧 No guidance has been designated for this issue. Fix according to your organization's approved methods.

💬 Ignore this finding

Reply with Semgrep commands to ignore this finding.

• /fp <comment> for false positive
• /ar <comment> for acceptable risk
• /other <comment> for all other reasons

Alternatively, triage in Semgrep AppSec Platform to ignore the finding created by node_username.

_{You can view more details about this finding in the Semgrep AppSec Platform.}