@flowdrop/flowdrop 1.10.0 → 1.11.0

package/dist/components/Navbar.svelte

@@ -11,18 +11,9 @@
   import Logo from './Logo.svelte';
   import SettingsModal from './SettingsModal.svelte';
   import type { SettingsCategory } from '../types/settings.js';
+  import type { NavbarAction } from '../types/navbar.js';
   import { m } from '../messages/index.js';
 
-  interface NavbarAction {
-    label: string;
-    href: string;
-    icon?: string;
-    variant?: 'primary' | 'secondary' | 'outline';
-    onclick?: (event: Event) => void;
-    /** If true, opens link in new tab with proper security attributes */
-    external?: boolean;
-  }
-
   interface BreadcrumbItem {
     label: string;
     href?: string;

package/dist/components/Navbar.svelte.d.ts

@@ -1,13 +1,5 @@
 import type { SettingsCategory } from '../types/settings.js';
-interface NavbarAction {
-    label: string;
-    href: string;
-    icon?: string;
-    variant?: 'primary' | 'secondary' | 'outline';
-    onclick?: (event: Event) => void;
-    /** If true, opens link in new tab with proper security attributes */
-    external?: boolean;
-}
+import type { NavbarAction } from '../types/navbar.js';
 interface BreadcrumbItem {
     label: string;
     href?: string;

package/dist/components/playground/Playground.svelte

@@ -890,7 +890,7 @@
   }
 
   .playground--standalone {
-    height: 100vh;
+    height: 100%;
     background: var(--fd-layout-background, var(--fd-muted));
   }
 

package/dist/components/playground/PlaygroundApp.svelte

@@ -0,0 +1,110 @@
+<!--
+  PlaygroundApp Component
+
+  Full-page playground wrapper that pairs the FlowDrop Navbar with
+  PlaygroundStudio.
+
+  When importing this component directly (rather than via mountPlaygroundApp),
+  call initializeSettings() before mount — the navbar's settings modal reads
+  from the settings store.
+-->
+
+<script lang="ts">
+  import Navbar from '../Navbar.svelte';
+  import PlaygroundStudio from './PlaygroundStudio.svelte';
+  import type { Workflow } from '../../types/index.js';
+  import type { EndpointConfig } from '../../config/endpoints.js';
+  import type { PlaygroundConfig } from '../../types/playground.js';
+  import type { SettingsCategory } from '../../types/settings.js';
+  import type { NavbarAction } from '../../types/navbar.js';
+
+  interface Props {
+    workflowId: string;
+    workflow?: Workflow;
+    mode?: 'standalone' | 'embedded';
+    endpointConfig?: EndpointConfig;
+    config?: PlaygroundConfig;
+    showNavbar?: boolean;
+    navbarTitle?: string;
+    primaryActions?: NavbarAction[];
+    showSettings?: boolean;
+    settingsCategories?: SettingsCategory[];
+    showSettingsSyncButton?: boolean;
+    showSettingsResetButton?: boolean;
+    initialSessionId?: string;
+    initialPipelineOpen?: boolean;
+    minChatWidth?: number;
+    initialPipelineWidth?: number;
+    onClose?: () => void;
+    onSessionNavigate?: (sessionId: string) => void;
+  }
+
+  let {
+    workflowId,
+    workflow,
+    mode = 'standalone',
+    endpointConfig,
+    config = {},
+    showNavbar = true,
+    navbarTitle,
+    primaryActions = [],
+    showSettings = true,
+    settingsCategories,
+    showSettingsSyncButton,
+    showSettingsResetButton,
+    initialSessionId,
+    initialPipelineOpen,
+    minChatWidth,
+    initialPipelineWidth,
+    onClose,
+    onSessionNavigate
+  }: Props = $props();
+
+  const displayTitle = $derived(navbarTitle ?? workflow?.name ?? 'Playground');
+</script>
+
+<div class="fd-playground-app">
+  {#if showNavbar}
+    <Navbar
+      title={displayTitle}
+      {primaryActions}
+      showStatus={false}
+      {showSettings}
+      {settingsCategories}
+      {showSettingsSyncButton}
+      {showSettingsResetButton}
+    />
+  {/if}
+  <div class="fd-playground-app__content">
+    <PlaygroundStudio
+      {workflowId}
+      {workflow}
+      {mode}
+      {endpointConfig}
+      {config}
+      {initialSessionId}
+      {initialPipelineOpen}
+      {minChatWidth}
+      {initialPipelineWidth}
+      {onClose}
+      {onSessionNavigate}
+    />
+  </div>
+</div>
+
+<style>
+  .fd-playground-app {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background: var(--fd-background);
+  }
+
+  .fd-playground-app__content {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+</style>

package/dist/components/playground/PlaygroundApp.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Workflow } from '../../types/index.js';
+import type { EndpointConfig } from '../../config/endpoints.js';
+import type { PlaygroundConfig } from '../../types/playground.js';
+import type { SettingsCategory } from '../../types/settings.js';
+import type { NavbarAction } from '../../types/navbar.js';
+interface Props {
+    workflowId: string;
+    workflow?: Workflow;
+    mode?: 'standalone' | 'embedded';
+    endpointConfig?: EndpointConfig;
+    config?: PlaygroundConfig;
+    showNavbar?: boolean;
+    navbarTitle?: string;
+    primaryActions?: NavbarAction[];
+    showSettings?: boolean;
+    settingsCategories?: SettingsCategory[];
+    showSettingsSyncButton?: boolean;
+    showSettingsResetButton?: boolean;
+    initialSessionId?: string;
+    initialPipelineOpen?: boolean;
+    minChatWidth?: number;
+    initialPipelineWidth?: number;
+    onClose?: () => void;
+    onSessionNavigate?: (sessionId: string) => void;
+}
+declare const PlaygroundApp: import("svelte").Component<Props, {}, "">;
+type PlaygroundApp = ReturnType<typeof PlaygroundApp>;
+export default PlaygroundApp;

package/dist/playground/index.d.ts

@@ -112,6 +112,7 @@
  */
 export { default as Playground } from '../components/playground/Playground.svelte';
 export { default as PlaygroundStudio } from '../components/playground/PlaygroundStudio.svelte';
+export { default as PlaygroundApp } from '../components/playground/PlaygroundApp.svelte';
 export { default as PlaygroundModal } from '../components/playground/PlaygroundModal.svelte';
 export { default as ChatPanel } from '../components/playground/ChatPanel.svelte';
 export { default as PipelinePanel } from '../components/playground/PipelinePanel.svelte';
@@ -131,5 +132,5 @@ export type { InterruptType, InterruptStatus, Interrupt, InterruptChoice, Interr
 export { isInterruptMetadata, extractInterruptMetadata, metadataToInterrupt, defaultInterruptPollingConfig } from '../types/interrupt.js';
 export { getInterruptsMap, getPendingInterruptIds, getPendingInterrupts, getPendingInterruptCount, getResolvedInterrupts, getIsAnySubmitting, interruptActions, getInterrupt, isInterruptPending, isInterruptSubmitting, getInterruptError, getInterruptByMessageId, interruptHasError } from '../stores/interruptStore.svelte.js';
 export type { InterruptWithState } from '../stores/interruptStore.svelte.js';
-export { mountPlayground, unmountPlayground, mountPlaygroundStudio, type PlaygroundMountOptions, type PlaygroundStudioMountOptions, type MountedPlayground } from './mount.js';
+export { mountPlayground, unmountPlayground, mountPlaygroundStudio, mountPlaygroundApp, type PlaygroundMountOptions, type PlaygroundStudioMountOptions, type PlaygroundAppMountOptions, type MountedPlayground } from './mount.js';
 export { createEndpointConfig, defaultEndpointConfig, buildEndpointUrl, type EndpointConfig } from '../config/endpoints.js';

package/dist/playground/index.js

@@ -115,6 +115,7 @@
 // ============================================================================
 export { default as Playground } from '../components/playground/Playground.svelte';
 export { default as PlaygroundStudio } from '../components/playground/PlaygroundStudio.svelte';
+export { default as PlaygroundApp } from '../components/playground/PlaygroundApp.svelte';
 export { default as PlaygroundModal } from '../components/playground/PlaygroundModal.svelte';
 export { default as ChatPanel } from '../components/playground/ChatPanel.svelte';
 export { default as PipelinePanel } from '../components/playground/PipelinePanel.svelte';
@@ -174,7 +175,7 @@ getInterrupt, isInterruptPending, isInterruptSubmitting, getInterruptError, getI
 // ============================================================================
 // Playground Mount Functions (for vanilla JS / Drupal / IIFE integration)
 // ============================================================================
-export { mountPlayground, unmountPlayground, mountPlaygroundStudio } from './mount.js';
+export { mountPlayground, unmountPlayground, mountPlaygroundStudio, mountPlaygroundApp } from './mount.js';
 // ============================================================================
 // Endpoint Configuration (re-exported for convenience)
 // ============================================================================

package/dist/playground/mount.d.ts

@@ -46,6 +46,8 @@
 import type { Workflow } from '../types/index.js';
 import type { EndpointConfig } from '../config/endpoints.js';
 import type { PlaygroundMode, PlaygroundConfig, PlaygroundSession, PlaygroundMessagesApiResponse, PlaygroundSessionStatus } from '../types/playground.js';
+import type { PartialSettings, SettingsCategory } from '../types/settings.js';
+import type { NavbarAction } from '../types/navbar.js';
 /**
  * Mount options for Playground component
  */
@@ -83,13 +85,15 @@ export interface PlaygroundMountOptions {
      */
     config?: PlaygroundConfig;
     /**
-     * Container height (CSS value)
-     * @default "100%"
+     * Container height (CSS value). If omitted, the library does NOT set an
+     * inline height — the host's own CSS owns sizing. Pass a definite value
+     * (e.g. `"100dvh"`, `"600px"`) only when mounting into an unsized
+     * container.
      */
     height?: string;
     /**
-     * Container width (CSS value)
-     * @default "100%"
+     * Container width (CSS value). If omitted, the library does NOT set an
+     * inline width. See `height` for rationale.
      */
     width?: string;
     /**
@@ -103,6 +107,12 @@ export interface PlaygroundMountOptions {
      * @param previousStatus - The previous session status
      */
     onSessionStatusChange?: (status: PlaygroundSessionStatus, previousStatus: PlaygroundSessionStatus) => void;
+    /**
+     * Optional setting overrides deep-merged over current settings before mount.
+     * Theme is re-initialized on every mount regardless. Mirrors mountFlowDropApp's
+     * `settings` option.
+     */
+    settings?: PartialSettings;
 }
 /**
  * Return type for mounted Playground instance
@@ -208,3 +218,45 @@ export interface PlaygroundStudioMountOptions extends PlaygroundMountOptions {
     onSessionNavigate?: (sessionId: string) => void;
 }
 export declare function mountPlaygroundStudio(container: HTMLElement, options: PlaygroundStudioMountOptions): Promise<MountedPlayground>;
+export interface PlaygroundAppMountOptions extends Omit<PlaygroundStudioMountOptions, 'mode'> {
+    /**
+     * Display mode. Modal is unsupported — use mountPlayground() for that.
+     * @default "standalone"
+     */
+    mode?: 'standalone' | 'embedded';
+    /** Render the FlowDrop Navbar above the playground (default: true). */
+    showNavbar?: boolean;
+    /** Title shown in the navbar. Falls back to the workflow name, then "Playground". */
+    navbarTitle?: string;
+    /** Action buttons rendered in the navbar. Passed straight through to <Navbar primaryActions>. */
+    primaryActions?: NavbarAction[];
+    /** Show the settings gear icon in the navbar (default: true). */
+    showSettings?: boolean;
+    /** Restrict which settings categories are exposed in the settings modal. */
+    settingsCategories?: SettingsCategory[];
+    /** Show the "Sync to Cloud" button in the settings modal. */
+    showSettingsSyncButton?: boolean;
+    /** Show the reset buttons in the settings modal. */
+    showSettingsResetButton?: boolean;
+}
+/**
+ * Mount the full-page PlaygroundApp (Navbar + PlaygroundStudio) into a container.
+ *
+ * Use this when you want the same chrome as the FlowDrop editor — logo,
+ * branding, and settings modal — wrapped around the playground. For an
+ * embeddable split-pane without the navbar, use mountPlaygroundStudio().
+ *
+ * @example
+ * ```typescript
+ * const app = await mountPlaygroundApp(container, {
+ *   workflowId: 'wf-123',
+ *   endpointConfig: createEndpointConfig('/api/flowdrop'),
+ *   navbarTitle: 'My Workflow',
+ *   primaryActions: [
+ *     { label: 'Edit', href: '/workflows/wf-123/edit', icon: 'mdi:pencil-outline', variant: 'secondary' },
+ *     { label: 'Workflows', href: '/workflows', icon: 'mdi:arrow-left', variant: 'outline' }
+ *   ]
+ * });
+ * ```
+ */
+export declare function mountPlaygroundApp(container: HTMLElement, options: PlaygroundAppMountOptions): Promise<MountedPlayground>;

package/dist/playground/mount.js

@@ -47,6 +47,8 @@ import { mount, unmount } from 'svelte';
 import Playground from '../components/playground/Playground.svelte';
 import PlaygroundModal from '../components/playground/PlaygroundModal.svelte';
 import PlaygroundStudio from '../components/playground/PlaygroundStudio.svelte';
+import PlaygroundApp from '../components/playground/PlaygroundApp.svelte';
+import { initializeSettings } from '../stores/settingsStore.svelte.js';
 import { setEndpointConfig } from '../services/api.js';
 import { playgroundService } from '../services/playgroundService.js';
 import { getCurrentSession, getSessions, getMessages, getIsExecuting, playgroundActions, applyServerResponse, subscribeToSessionStatus } from '../stores/playgroundStore.svelte.js';
@@ -62,6 +64,28 @@ async function resolveEndpointConfig(endpointConfig) {
     setEndpointConfig(resolved);
     return resolved;
 }
+/**
+ * Shared prelude for the playground mount functions: resolves the endpoint
+ * config and initializes settings/theme. Each mount function still owns its
+ * own argument validation and container sizing (those vary per mode).
+ */
+async function prepareMount(options) {
+    const finalEndpointConfig = await resolveEndpointConfig(options.endpointConfig);
+    await initializeSettings({ defaults: options.settings });
+    return finalEndpointConfig;
+}
+/**
+ * Apply caller-supplied height/width as inline styles. When omitted, the host
+ * CSS owns container sizing — this is deliberate: a default of `100%` does not
+ * resolve inside parents with only `min-height` set (a common pattern in
+ * Drupal admin chrome), collapsing the playground to zero.
+ */
+function sizeContainer(container, height, width) {
+    if (height !== undefined)
+        container.style.height = height;
+    if (width !== undefined)
+        container.style.width = width;
+}
 function buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange) {
     const pollingInterval = config.pollingInterval ?? 1500;
     const unsubscribeStatus = onSessionStatusChange
@@ -122,7 +146,7 @@ function buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusCh
  * ```
  */
 export async function mountPlayground(container, options) {
-    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height = '100%', width = '100%', onClose, onSessionStatusChange } = options;
+    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height, width, settings: initialSettings, onClose, onSessionStatusChange } = options;
     // Validate required parameters
     if (!workflowId) {
         throw new Error('workflowId is required for mountPlayground()');
@@ -134,14 +158,16 @@ export async function mountPlayground(container, options) {
     if (mode === 'modal' && !onClose) {
         throw new Error('onClose callback is required for modal mode');
     }
-    const finalEndpointConfig = await resolveEndpointConfig(endpointConfig);
+    const finalEndpointConfig = await prepareMount({
+        endpointConfig,
+        settings: initialSettings
+    });
     let targetContainer = container;
     if (mode === 'modal') {
         targetContainer = document.body;
     }
     else {
-        container.style.height = height;
-        container.style.width = width;
+        sizeContainer(container, height, width);
     }
     let svelteApp;
     if (mode === 'modal') {
@@ -199,7 +225,7 @@ export function unmountPlayground(app) {
     }
 }
 export async function mountPlaygroundStudio(container, options) {
-    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height = '100%', width = '100%', initialPipelineOpen, minChatWidth, initialPipelineWidth, onClose, onSessionNavigate, onSessionStatusChange } = options;
+    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height, width, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange } = options;
     if (!workflowId) {
         throw new Error('workflowId is required for mountPlaygroundStudio()');
     }
@@ -209,9 +235,11 @@ export async function mountPlaygroundStudio(container, options) {
     if (mode === 'modal') {
         throw new Error('modal mode is not supported by mountPlaygroundStudio() — use mountPlayground() instead');
     }
-    const finalEndpointConfig = await resolveEndpointConfig(endpointConfig);
-    container.style.height = height;
-    container.style.width = width;
+    const finalEndpointConfig = await prepareMount({
+        endpointConfig,
+        settings: initialSettings
+    });
+    sizeContainer(container, height, width);
     const svelteApp = mount(PlaygroundStudio, {
         target: container,
         props: {
@@ -230,3 +258,67 @@ export async function mountPlaygroundStudio(container, options) {
     });
     return buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange);
 }
+/**
+ * Mount the full-page PlaygroundApp (Navbar + PlaygroundStudio) into a container.
+ *
+ * Use this when you want the same chrome as the FlowDrop editor — logo,
+ * branding, and settings modal — wrapped around the playground. For an
+ * embeddable split-pane without the navbar, use mountPlaygroundStudio().
+ *
+ * @example
+ * ```typescript
+ * const app = await mountPlaygroundApp(container, {
+ *   workflowId: 'wf-123',
+ *   endpointConfig: createEndpointConfig('/api/flowdrop'),
+ *   navbarTitle: 'My Workflow',
+ *   primaryActions: [
+ *     { label: 'Edit', href: '/workflows/wf-123/edit', icon: 'mdi:pencil-outline', variant: 'secondary' },
+ *     { label: 'Workflows', href: '/workflows', icon: 'mdi:arrow-left', variant: 'outline' }
+ *   ]
+ * });
+ * ```
+ */
+export async function mountPlaygroundApp(container, options) {
+    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height, width, showNavbar = true, navbarTitle, primaryActions, showSettings = true, settingsCategories, showSettingsSyncButton, showSettingsResetButton, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange } = options;
+    if (!workflowId) {
+        throw new Error('workflowId is required for mountPlaygroundApp()');
+    }
+    if (!container) {
+        throw new Error('container element is required for mountPlaygroundApp()');
+    }
+    // Positive narrowing (not `=== 'modal'`) because PlaygroundAppMountOptions
+    // Omit-narrows `mode`, so the type lies for JS callers — check the values
+    // we actually accept instead of the one we don't.
+    if (mode !== 'standalone' && mode !== 'embedded') {
+        throw new Error(`mountPlaygroundApp(): mode must be 'standalone' or 'embedded', got ${String(mode)}`);
+    }
+    const finalEndpointConfig = await prepareMount({
+        endpointConfig,
+        settings: initialSettings
+    });
+    sizeContainer(container, height, width);
+    const svelteApp = mount(PlaygroundApp, {
+        target: container,
+        props: {
+            workflowId,
+            workflow,
+            mode,
+            initialSessionId,
+            endpointConfig: finalEndpointConfig,
+            config,
+            showNavbar,
+            navbarTitle,
+            primaryActions,
+            showSettings,
+            settingsCategories,
+            showSettingsSyncButton,
+            showSettingsResetButton,
+            initialPipelineOpen,
+            minChatWidth,
+            initialPipelineWidth,
+            onClose,
+            onSessionNavigate
+        }
+    });
+    return buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange);
+}

package/dist/svelte-app.d.ts

@@ -14,16 +14,8 @@ import type { FlowDropTheme, FlowDropThemeName } from './types/theme.js';
 import type { WorkflowFormatAdapter } from './registry/workflowFormatRegistry.js';
 import './registry/builtinFormats.js';
 import type { PartialSettings, SettingsCategory } from './types/settings.js';
-/**
- * Navbar action configuration
- */
-export interface NavbarAction {
-    label: string;
-    href: string;
-    icon?: string;
-    variant?: 'primary' | 'secondary' | 'outline';
-    onclick?: (event: Event) => void;
-}
+import type { NavbarAction } from './types/navbar.js';
+export type { NavbarAction };
 /**
  * Mount options for FlowDrop App
  */

package/dist/types/navbar.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Navbar action button configuration.
+ *
+ * Rendered as a link by `<Navbar>` and the mount functions that wrap it.
+ */
+export interface NavbarAction {
+    label: string;
+    href: string;
+    icon?: string;
+    variant?: 'primary' | 'secondary' | 'outline';
+    onclick?: (event: Event) => void;
+    /** If true, opens link in new tab with `rel="noopener noreferrer"`. */
+    external?: boolean;
+}

package/dist/types/navbar.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -3,7 +3,7 @@
   "description": "A drop-in visual workflow editor for any web application. You own the backend. You own the data. You own the orchestration.",
   "license": "MIT",
   "private": false,
-  "version": "1.10.0",
+  "version": "1.11.0",
   "author": "Shibin Das (D34dMan)",
   "bugs": {
     "url": "https://github.com/flowdrop-io/flowdrop/issues"