FlowDrop 1.11.0: PlaygroundApp and Unified Mount API

FlowDrop 1.11.0 completes the playground component family. PlaygroundApp wraps PlaygroundStudio with the FlowDrop navbar, giving hosts a ready-made full-page layout without needing to wire up navigation themselves.

PlaygroundApp

PlaygroundApp is a full-page wrapper that pairs the FlowDrop Navbar with PlaygroundStudio. Callers supply their own primaryActions array — there are no hardcoded back or edit URLs — so the component can embed in any host that wants standard FlowDrop chrome around the playground.

The Navbar settings modal is fully wired through: showSettings, settingsCategories, showSettingsSyncButton, showSettingsResetButton. Hosts can restrict which tabs appear or hide the gear entirely.

mountPlaygroundApp() is the corresponding vanilla JS mount function, alongside a PlaygroundAppMountOptions type. It mirrors mountPlaygroundStudio so non-Svelte hosts — Drupal, plain HTML, any other framework — can embed the full chrome without Svelte.

Unified settings option

mountPlayground, mountPlaygroundStudio, and mountPlaygroundApp now all accept a settings option (a deep-merged PartialSettings value), mirroring mountFlowDropApp. Theme is re-initialised on every mount, after validation, so failed calls do not mutate global theme state.

Shared NavbarAction type

NavbarAction is now a single exported type in types/navbar.ts, re-exported from all package entry points. Previously it was duplicated across playground and editor surfaces.

Fix: modal mode validation

mountPlaygroundStudio and mountPlaygroundApp now reject mode: 'modal' at runtime with a clear error. In JS hosts where TypeScript narrowing does not apply (e.g. Drupal SDC), the previous silent miscast produced a broken layout with no diagnostic.

Fix: standalone Playground height

Playground switched from height: 100vh to height: 100%. When a host wraps Playground with a navbar, 100vh caused the chat input to be clipped below the fold.

Upgrading

npm install @flowdrop/flowdrop@1.11.0

The implicit height: '100%' / width: '100%' default on mountPlayground, mountPlaygroundStudio, and mountPlaygroundApp has been removed. That default did not resolve inside parents that only set min-height (e.g. Drupal admin chrome), silently collapsing the playground to zero with no error. Hosts that size the container via their own CSS are unaffected. If you were passing no size and relying on the implicit value, pass height: '100vh' (or your preferred value) explicitly to the mount call.