@flowdrop/flowdrop 1.9.0 → 1.11.0

package/dist/components/playground/PlaygroundStudio.svelte

@@ -0,0 +1,404 @@
+<!--
+  PlaygroundStudio Component
+
+  Drop-in embeddable split-pane layout: PipelinePanel (left, resizable) + Playground
+  chat (right). Provides the same integrated experience as the FlowDrop demo app with a
+  single import and zero layout glue code.
+
+  @example Basic usage — workflow fetched automatically
+  ```svelte
+  <script>
+    import { PlaygroundStudio, createEndpointConfig } from '@flowdrop/flowdrop/playground';
+    import '@flowdrop/flowdrop/styles';
+  </script>
+
+  <PlaygroundStudio
+    workflowId="wf-123"
+    endpointConfig={createEndpointConfig('/api/flowdrop')}
+  />
+  ```
+
+  @example With pre-loaded workflow and URL-based session routing
+  ```svelte
+  <script>
+    import { PlaygroundStudio, createEndpointConfig } from '@flowdrop/flowdrop/playground';
+
+    let { data } = $props();          // workflow from server load
+    let sessionId = $derived($page.params.sessionId);
+
+    function handleSessionNavigate(id) {
+      goto(`/playground/${id}`);
+    }
+  </script>
+
+  <PlaygroundStudio
+    workflowId={data.workflow.id}
+    workflow={data.workflow}
+    endpointConfig={createEndpointConfig('/api/flowdrop')}
+    initialSessionId={sessionId}
+    onSessionNavigate={handleSessionNavigate}
+  />
+  ```
+-->
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import Icon from '@iconify/svelte';
+  import Playground from './Playground.svelte';
+  import PipelinePanel from './PipelinePanel.svelte';
+  import { getPipelinePanelOpen, pipelinePanelActions } from '../../stores/pipelinePanelStore.svelte.js';
+  import {
+    getActiveExecutionId,
+    getPinnedExecutionId,
+    getLatestExecutionId,
+    getPipelineRefreshTrigger,
+    getCurrentSession,
+    playgroundActions,
+  } from '../../stores/playgroundStore.svelte.js';
+  import { setEndpointConfig, workflowApi } from '../../services/api.js';
+  import { logger } from '../../utils/logger.js';
+  import type { Workflow } from '../../types/index.js';
+  import type { EndpointConfig } from '../../config/endpoints.js';
+  import type { PlaygroundConfig, PlaygroundMode } from '../../types/playground.js';
+
+  interface Props {
+    /** Target workflow ID */
+    workflowId: string;
+    /** Pre-loaded workflow — skips internal fetch when provided */
+    workflow?: Workflow;
+    /** API endpoint configuration */
+    endpointConfig?: EndpointConfig;
+    /** Display mode (default: standalone) */
+    mode?: PlaygroundMode;
+    /** Session ID to activate on mount. Changing this prop remounts the Playground. */
+    initialSessionId?: string;
+    /** Playground configuration options */
+    config?: PlaygroundConfig;
+    /** Whether the pipeline panel starts open. When omitted the stored preference is used. */
+    initialPipelineOpen?: boolean;
+    /** Minimum chat panel width in px (default: 760) */
+    minChatWidth?: number;
+    /** Initial pipeline panel width in px (default: 500) */
+    initialPipelineWidth?: number;
+    /** Called when session navigation is requested — use for URL-based routing */
+    onSessionNavigate?: (sessionId: string) => void;
+    /** Called when the playground is closed (embedded / modal mode) */
+    onClose?: () => void;
+  }
+
+  let {
+    workflowId,
+    workflow: workflowProp,
+    endpointConfig,
+    mode = 'standalone',
+    initialSessionId,
+    config = {},
+    initialPipelineOpen,
+    minChatWidth = 760,
+    initialPipelineWidth = 500,
+    onSessionNavigate,
+    onClose,
+  }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  let resolvedWorkflow = $state<Workflow | null>(workflowProp ?? null);
+  // svelte-ignore state_referenced_locally
+  let workflowLoading = $state(workflowProp === undefined);
+  let workflowError = $state<string | null>(null);
+
+  let splitEl = $state<HTMLElement | null>(null);
+  // svelte-ignore state_referenced_locally
+  let pipelineWidth = $state(initialPipelineWidth);
+  let isResizing = $state(false);
+  let containerWidth = $state(0);
+
+  $effect(() => {
+    if (!splitEl) return;
+    const observer = new ResizeObserver(([entry]) => {
+      containerWidth = entry.contentRect.width;
+    });
+    observer.observe(splitEl);
+    return () => observer.disconnect();
+  });
+
+  onMount(() => {
+    pipelinePanelActions.init();
+    if (initialPipelineOpen !== undefined) {
+      pipelinePanelActions.setOpen(initialPipelineOpen);
+    }
+    if (endpointConfig) {
+      setEndpointConfig(endpointConfig);
+    }
+    if (!workflowProp) {
+      void loadWorkflow();
+    }
+  });
+
+  async function loadWorkflow(): Promise<void> {
+    if (!endpointConfig) {
+      workflowError = 'Provide a workflow prop or an endpointConfig so the workflow can be fetched.';
+      workflowLoading = false;
+      return;
+    }
+
+    try {
+      workflowLoading = true;
+      workflowError = null;
+      resolvedWorkflow = await workflowApi.getWorkflow(workflowId);
+    } catch (err) {
+      workflowError = err instanceof Error ? err.message : 'Failed to load workflow';
+      logger.error('[PlaygroundStudio] Workflow load failed:', err);
+    } finally {
+      workflowLoading = false;
+    }
+  }
+
+  function handleResizerPointerDown(e: PointerEvent) {
+    isResizing = true;
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  }
+
+  function handleResizerPointerMove(e: PointerEvent) {
+    if (!isResizing || !splitEl) return;
+    const rect = splitEl.getBoundingClientRect();
+    pipelineWidth = Math.min(
+      Math.max(e.clientX - rect.left, rect.width - minChatWidth),
+      rect.width * 0.75
+    );
+  }
+
+  function handleResizerPointerUp() {
+    isResizing = false;
+  }
+</script>
+
+<div class="playground-studio" class:playground-studio--resizing={isResizing} style="--playground-studio-min-chat-width: {minChatWidth}px">
+  <div class="playground-studio__panes" bind:this={splitEl}>
+    {#if getPipelinePanelOpen() && resolvedWorkflow && endpointConfig}
+      {@const activeId = getActiveExecutionId()}
+      {@const executions = getCurrentSession()?.executions ?? []}
+
+      <div class="playground-studio__pipeline" style="width: {pipelineWidth}px;">
+        <PipelinePanel
+          pipelineId={activeId}
+          workflow={resolvedWorkflow}
+          {endpointConfig}
+          isPinned={getPinnedExecutionId() !== null}
+          {executions}
+          latestExecutionId={getLatestExecutionId()}
+          onSelectExecution={(id) => playgroundActions.pinExecution(id)}
+          refreshTrigger={getPipelineRefreshTrigger()}
+        />
+      </div>
+
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+      <div
+        class="playground-studio__resizer"
+        class:playground-studio__resizer--active={isResizing}
+        role="separator"
+        aria-orientation="vertical"
+        aria-valuenow={Math.round(pipelineWidth)}
+        aria-valuemin={0}
+        aria-valuemax={Math.round(containerWidth * 0.75)}
+        tabindex="0"
+        onpointerdown={handleResizerPointerDown}
+        onpointermove={handleResizerPointerMove}
+        onpointerup={handleResizerPointerUp}
+        onpointercancel={handleResizerPointerUp}
+      >
+        <div class="playground-studio__resizer-handle"></div>
+      </div>
+    {/if}
+
+    <div
+      class="playground-studio__chat"
+      class:playground-studio__chat--solo={!getPipelinePanelOpen()}
+    >
+      {#if workflowLoading}
+        <div class="playground-studio__loading">
+          <Icon icon="mdi:loading" class="playground-studio__loading-icon" />
+          <p>Loading workflow...</p>
+        </div>
+      {:else if workflowError}
+        <div class="playground-studio__error">
+          <Icon icon="mdi:alert-circle" class="playground-studio__error-icon" />
+          <p class="playground-studio__error-text">{workflowError}</p>
+          <button type="button" class="playground-studio__retry-btn" onclick={loadWorkflow}>
+            <Icon icon="mdi:refresh" />
+            Retry
+          </button>
+        </div>
+      {:else if resolvedWorkflow}
+        {#key initialSessionId}
+          <Playground
+            {workflowId}
+            workflow={resolvedWorkflow}
+            {endpointConfig}
+            {mode}
+            {initialSessionId}
+            {config}
+            {onClose}
+            {onSessionNavigate}
+            onTogglePanel={pipelinePanelActions.toggle}
+            isPipelinePanelOpen={getPipelinePanelOpen()}
+          />
+        {/key}
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .playground-studio {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    background-color: var(--fd-background);
+  }
+
+  .playground-studio--resizing {
+    cursor: col-resize;
+    user-select: none;
+  }
+
+  .playground-studio__panes {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  /* Pipeline pane — explicit width set via inline style */
+  .playground-studio__pipeline {
+    min-width: calc(100% - var(--playground-studio-min-chat-width));
+    max-width: 75%;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  /* Drag handle between the two panes */
+  .playground-studio__resizer {
+    width: 8px;
+    flex-shrink: 0;
+    cursor: col-resize;
+    background-color: var(--fd-background);
+    border-right: 1px solid var(--fd-border);
+    border-left: 1px solid var(--fd-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    touch-action: none;
+    z-index: 1;
+    transition: background-color var(--fd-transition-normal);
+  }
+
+  .playground-studio__resizer:hover,
+  .playground-studio__resizer--active {
+    background-color: var(--fd-primary-muted);
+  }
+
+  .playground-studio__resizer-handle {
+    width: 4px;
+    height: 48px;
+    background-color: var(--fd-border-strong);
+    border-radius: var(--fd-radius-sm);
+    transition:
+      background-color var(--fd-transition-normal),
+      transform var(--fd-transition-normal);
+  }
+
+  .playground-studio__resizer:hover .playground-studio__resizer-handle {
+    background-color: var(--fd-primary);
+    transform: scaleY(1.2);
+  }
+
+  .playground-studio__resizer--active .playground-studio__resizer-handle {
+    background-color: var(--fd-primary-hover);
+    transform: scaleY(1.4);
+  }
+
+  /* Chat pane — fills remaining space */
+  .playground-studio__chat {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .playground-studio__chat--solo {
+    border-left: 1px solid var(--fd-border);
+    border-right: 1px solid var(--fd-border);
+  }
+
+  /* Loading state */
+  .playground-studio__loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--fd-muted-foreground);
+    gap: var(--fd-space-md);
+  }
+
+  :global(.playground-studio__loading-icon) {
+    font-size: var(--fd-space-6xl);
+    animation: studio-spin 1s linear infinite;
+  }
+
+  @keyframes studio-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Error state */
+  .playground-studio__error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: var(--fd-space-4xl);
+    text-align: center;
+    gap: var(--fd-space-md);
+  }
+
+  :global(.playground-studio__error-icon) {
+    font-size: var(--fd-space-7xl);
+    color: var(--fd-error);
+  }
+
+  .playground-studio__error-text {
+    font-size: var(--fd-text-base);
+    color: var(--fd-muted-foreground);
+    margin: 0;
+    max-width: 400px;
+  }
+
+  .playground-studio__retry-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    padding: var(--fd-space-md) var(--fd-space-3xl);
+    border: none;
+    border-radius: var(--fd-radius-lg);
+    background-color: var(--fd-primary);
+    color: var(--fd-primary-foreground);
+    font-size: var(--fd-text-base);
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color var(--fd-transition-normal);
+  }
+
+  .playground-studio__retry-btn:hover {
+    background-color: var(--fd-primary-hover);
+  }
+</style>

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

@@ -0,0 +1,30 @@
+import type { Workflow } from '../../types/index.js';
+import type { EndpointConfig } from '../../config/endpoints.js';
+import type { PlaygroundConfig, PlaygroundMode } from '../../types/playground.js';
+interface Props {
+    /** Target workflow ID */
+    workflowId: string;
+    /** Pre-loaded workflow — skips internal fetch when provided */
+    workflow?: Workflow;
+    /** API endpoint configuration */
+    endpointConfig?: EndpointConfig;
+    /** Display mode (default: standalone) */
+    mode?: PlaygroundMode;
+    /** Session ID to activate on mount. Changing this prop remounts the Playground. */
+    initialSessionId?: string;
+    /** Playground configuration options */
+    config?: PlaygroundConfig;
+    /** Whether the pipeline panel starts open. When omitted the stored preference is used. */
+    initialPipelineOpen?: boolean;
+    /** Minimum chat panel width in px (default: 760) */
+    minChatWidth?: number;
+    /** Initial pipeline panel width in px (default: 500) */
+    initialPipelineWidth?: number;
+    /** Called when session navigation is requested — use for URL-based routing */
+    onSessionNavigate?: (sessionId: string) => void;
+    /** Called when the playground is closed (embedded / modal mode) */
+    onClose?: () => void;
+}
+declare const PlaygroundStudio: import("svelte").Component<Props, {}, "">;
+type PlaygroundStudio = ReturnType<typeof PlaygroundStudio>;
+export default PlaygroundStudio;

package/dist/editor/index.d.ts

@@ -76,7 +76,7 @@ export { setEndpointConfig, getEndpointConfig, nodeApi, workflowApi, api } from
 export { showSuccess, showError, showWarning, showInfo, showLoading, dismissToast, dismissAllToasts, showPromise, showConfirmation, apiToasts, workflowToasts, pipelineToasts } from '../services/toastService.js';
 export { NodeExecutionService, nodeExecutionService } from '../services/nodeExecutionService.js';
 export { PlaygroundService, playgroundService } from '../services/playgroundService.js';
-export { getCurrentSession, getSessions, getMessages, getIsExecuting, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollTimestamp, getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, playgroundActions, createPollingCallback, subscribeToSessionStatus, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestMessageTimestamp } from '../stores/playgroundStore.svelte.js';
+export { getCurrentSession, getSessions, getMessages, getIsExecuting, getCanSendMessage, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollSequenceNumber, getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, playgroundActions, applyServerResponse, subscribeToSessionStatus, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestSequenceNumber } from '../stores/playgroundStore.svelte.js';
 export { saveWorkflow, updateWorkflow, getWorkflow, getWorkflows, deleteWorkflow, getWorkflowCount, initializeSampleWorkflows } from '../services/workflowStorage.js';
 export { globalSaveWorkflow, globalExportWorkflow } from '../services/globalSave.js';
 export { fetchPortConfig, validatePortConfig } from '../services/portConfigApi.js';

package/dist/editor/index.js

@@ -119,7 +119,7 @@ export { showSuccess, showError, showWarning, showInfo, showLoading, dismissToas
 export { NodeExecutionService, nodeExecutionService } from '../services/nodeExecutionService.js';
 // Playground Service and Store
 export { PlaygroundService, playgroundService } from '../services/playgroundService.js';
-export { getCurrentSession, getSessions, getMessages, getIsExecuting, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollTimestamp, getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, playgroundActions, createPollingCallback, subscribeToSessionStatus, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestMessageTimestamp } from '../stores/playgroundStore.svelte.js';
+export { getCurrentSession, getSessions, getMessages, getIsExecuting, getCanSendMessage, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollSequenceNumber, getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, playgroundActions, applyServerResponse, subscribeToSessionStatus, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestSequenceNumber } from '../stores/playgroundStore.svelte.js';
 export { saveWorkflow, updateWorkflow, getWorkflow, getWorkflows, deleteWorkflow, getWorkflowCount, initializeSampleWorkflows } from '../services/workflowStorage.js';
 export { globalSaveWorkflow, globalExportWorkflow } from '../services/globalSave.js';
 export { fetchPortConfig, validatePortConfig } from '../services/portConfigApi.js';

package/dist/playground/index.d.ts

@@ -111,8 +111,12 @@
  * ```
  */
 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';
+export { default as ExecutionList } from '../components/playground/ExecutionList.svelte';
 export { default as SessionManager } from '../components/playground/SessionManager.svelte';
 export { default as InputCollector } from '../components/playground/InputCollector.svelte';
 export { default as ExecutionLogs } from '../components/playground/ExecutionLogs.svelte';
@@ -120,12 +124,13 @@ export { default as MessageBubble } from '../components/playground/MessageBubble
 export { InterruptBubble, ConfirmationPrompt, ChoicePrompt, TextInputPrompt, FormPrompt, ReviewPrompt } from '../components/interrupt/index.js';
 export { PlaygroundService, playgroundService } from '../services/playgroundService.js';
 export { InterruptService, interruptService } from '../services/interruptService.js';
-export { getCurrentSession, getSessions, getMessages, getIsExecuting, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollTimestamp, getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, playgroundActions, createPollingCallback, subscribeToSessionStatus, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestMessageTimestamp } from '../stores/playgroundStore.svelte.js';
-export type { PlaygroundSession, PlaygroundMessage, PlaygroundInputField, PlaygroundMessageRequest, PlaygroundMessagesResult, PlaygroundConfig, PlaygroundMode, PlaygroundSessionStatus, PlaygroundMessageRole, PlaygroundMessageLevel, PlaygroundMessageMetadata, PlaygroundApiResponse, PlaygroundSessionsResponse, PlaygroundSessionResponse, PlaygroundMessageResponse, PlaygroundMessagesApiResponse } from '../types/playground.js';
+export { getCurrentSession, getSessions, getMessages, getIsExecuting, getCanSendMessage, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollSequenceNumber, getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, getActiveExecutionId, getPinnedExecutionId, getLatestExecutionId, playgroundActions, applyServerResponse, subscribeToSessionStatus, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestSequenceNumber } from '../stores/playgroundStore.svelte.js';
+export { getPipelinePanelOpen, pipelinePanelActions } from '../stores/pipelinePanelStore.svelte.js';
+export type { PlaygroundSession, PlaygroundMessage, PlaygroundInputField, PlaygroundMessageRequest, PlaygroundMessagesResult, PlaygroundConfig, PlaygroundMode, PlaygroundSessionStatus, PlaygroundMessageRole, PlaygroundMessageLevel, PlaygroundMessageMetadata, PlaygroundApiResponse, PlaygroundSessionsResponse, PlaygroundSessionResponse, PlaygroundMessageResponse, PlaygroundMessagesApiResponse, PlaygroundExecution } from '../types/playground.js';
 export { isChatInputNode, CHAT_INPUT_PATTERNS, defaultShouldStopPolling, defaultIsTerminalStatus, DEFAULT_STOP_POLLING_STATUSES, DEFAULT_TERMINAL_STATUSES } from '../types/playground.js';
 export type { InterruptType, InterruptStatus, Interrupt, InterruptChoice, InterruptConfig, ConfirmationConfig, ChoiceConfig, TextConfig, FormConfig, ReviewConfig, ReviewChange, ReviewFieldDecision, ReviewResolution, InterruptResolution, InterruptApiResponse, InterruptListResponse, InterruptResponse, InterruptMessageMetadata, InterruptPollingConfig } from '../types/interrupt.js';
 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, type PlaygroundMountOptions, 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

@@ -114,8 +114,12 @@
 // Playground Components
 // ============================================================================
 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';
+export { default as ExecutionList } from '../components/playground/ExecutionList.svelte';
 export { default as SessionManager } from '../components/playground/SessionManager.svelte';
 export { default as InputCollector } from '../components/playground/InputCollector.svelte';
 export { default as ExecutionLogs } from '../components/playground/ExecutionLogs.svelte';
@@ -137,17 +141,23 @@ export { InterruptService, interruptService } from '../services/interruptService
 // ============================================================================
 export { 
 // Core state getters
-getCurrentSession, getSessions, getMessages, getIsExecuting, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollTimestamp, 
+getCurrentSession, getSessions, getMessages, getIsExecuting, getCanSendMessage, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollSequenceNumber, 
 // Derived getters
 getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, 
+// Execution getters (used with PipelinePanel / PlaygroundSplit)
+getActiveExecutionId, getPinnedExecutionId, getLatestExecutionId, 
 // Actions
 playgroundActions, 
-// Polling callback factory
-createPollingCallback, 
+// Server response application (single update path)
+applyServerResponse, 
 // Subscription utility
 subscribeToSessionStatus, 
 // Utilities
-getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestMessageTimestamp } from '../stores/playgroundStore.svelte.js';
+getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestSequenceNumber } from '../stores/playgroundStore.svelte.js';
+// ============================================================================
+// Pipeline Panel Store (open/close state, persisted to localStorage)
+// ============================================================================
+export { getPipelinePanelOpen, pipelinePanelActions } from '../stores/pipelinePanelStore.svelte.js';
 export { isChatInputNode, CHAT_INPUT_PATTERNS, defaultShouldStopPolling, defaultIsTerminalStatus, DEFAULT_STOP_POLLING_STATUSES, DEFAULT_TERMINAL_STATUSES } from '../types/playground.js';
 export { isInterruptMetadata, extractInterruptMetadata, metadataToInterrupt, defaultInterruptPollingConfig } from '../types/interrupt.js';
 // ============================================================================
@@ -165,7 +175,7 @@ getInterrupt, isInterruptPending, isInterruptSubmitting, getInterruptError, getI
 // ============================================================================
 // Playground Mount Functions (for vanilla JS / Drupal / IIFE integration)
 // ============================================================================
-export { mountPlayground, unmountPlayground } 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
@@ -201,3 +211,52 @@ export declare function mountPlayground(container: HTMLElement, options: Playgro
  * ```
  */
 export declare function unmountPlayground(app: MountedPlayground): void;
+export interface PlaygroundStudioMountOptions extends PlaygroundMountOptions {
+    initialPipelineOpen?: boolean;
+    minChatWidth?: number;
+    initialPipelineWidth?: number;
+    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>;