@flowdrop/flowdrop 1.0.0

package/dist/mocks/app-environment.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Mock for $app/environment
+ * Provides minimal implementations for SvelteKit environment in library context
+ */
+export const browser: boolean;
+export const dev: false;
+export const building: false;
+export const version: "1.0.0";

package/dist/mocks/app-environment.js

@@ -0,0 +1,16 @@
+/**
+ * Mock for $app/environment
+ * Provides minimal implementations for SvelteKit environment in library context
+ */
+
+// Mock browser check
+export const browser = typeof window !== 'undefined';
+
+// Mock dev check
+export const dev = false;
+
+// Mock building check
+export const building = false;
+
+// Mock version
+export const version = '1.0.0';

package/dist/mocks/app-forms.d.ts

@@ -0,0 +1,2 @@
+export function enhance(form: any, options?: {}): (event: any) => void;
+export function applyAction(action: any): any;

package/dist/mocks/app-forms.js

@@ -0,0 +1,22 @@
+// @ts-nocheck
+/**
+ * Mock for $app/forms
+ * Provides minimal implementations for SvelteKit forms in library context
+ */
+
+// Mock enhance function
+export const enhance = (form, options = {}) => {
+	return (event) => {
+		event.preventDefault();
+		// Basic form handling for library context
+		if (options.onResult) {
+			options.onResult({ type: 'success' });
+		}
+	};
+};
+
+// Mock applyAction function
+export const applyAction = (action) => {
+	// No-op for library context
+	return action;
+};

package/dist/mocks/app-navigation.d.ts

@@ -0,0 +1,5 @@
+export function goto(): Promise<void>;
+export function invalidate(): Promise<void>;
+export function invalidateAll(): Promise<void>;
+export function preloadData(): Promise<{}>;
+export function preloadCode(): Promise<void>;

package/dist/mocks/app-navigation.js

@@ -0,0 +1,36 @@
+/**
+ * Mock for $app/navigation
+ * Provides minimal implementations for SvelteKit navigation in library context
+ */
+
+import { logger } from '../utils/logger.js';
+
+// Mock goto function
+export const goto = async () => {
+	// No-op for library context
+	logger.warn('Navigation not available in library context');
+};
+
+// Mock invalidate function
+export const invalidate = async () => {
+	// No-op for library context
+	return Promise.resolve();
+};
+
+// Mock invalidateAll function
+export const invalidateAll = async () => {
+	// No-op for library context
+	return Promise.resolve();
+};
+
+// Mock preloadData function
+export const preloadData = async () => {
+	// No-op for library context
+	return Promise.resolve({});
+};
+
+// Mock preloadCode function
+export const preloadCode = async () => {
+	// No-op for library context
+	return Promise.resolve();
+};

package/dist/mocks/app-stores.d.ts

@@ -0,0 +1,14 @@
+export const page: import("svelte/store").Writable<{
+    url: URL;
+    params: {};
+    route: {
+        id: null;
+    };
+    status: number;
+    error: null;
+    data: {};
+    form: null;
+}>;
+export const navigating: import("svelte/store").Writable<null>;
+export const updated: import("svelte/store").Writable<boolean>;
+export function preloadData(): Promise<{}>;

package/dist/mocks/app-stores.js

@@ -0,0 +1,26 @@
+/**
+ * Mock for $app/stores
+ * Provides minimal implementations for SvelteKit stores in library context
+ */
+
+import { writable } from 'svelte/store';
+
+// Mock page store
+export const page = writable({
+	url: new URL('http://localhost:3000'),
+	params: {},
+	route: { id: null },
+	status: 200,
+	error: null,
+	data: {},
+	form: null
+});
+
+// Mock navigating store
+export const navigating = writable(null);
+
+// Mock updated store
+export const updated = writable(false);
+
+// Mock preloadData function
+export const preloadData = async () => ({});

package/dist/playground/index.d.ts

@@ -0,0 +1,131 @@
+/**
+ * FlowDrop Playground Module
+ *
+ * Provides the Playground feature for interactive workflow testing with
+ * chat interface, session management, and real-time execution logs.
+ *
+ * @module playground
+ *
+ * @example Using mountPlayground for vanilla JS / Drupal / IIFE:
+ * ```typescript
+ * import { mountPlayground, createEndpointConfig } from "@flowdrop/flowdrop/playground";
+ *
+ * const app = await mountPlayground(
+ *   document.getElementById("playground-container"),
+ *   {
+ *     workflowId: "wf-123",
+ *     endpointConfig: createEndpointConfig("/api/flowdrop"),
+ *     mode: "standalone"
+ *   }
+ * );
+ *
+ * // Later, to cleanup:
+ * app.destroy();
+ * ```
+ *
+ * @example Drupal Behaviors integration:
+ * ```javascript
+ * (function (Drupal, FlowDrop) {
+ *   Drupal.behaviors.flowdropPlayground = {
+ *     attach: function (context, settings) {
+ *       var container = document.getElementById("playground-container");
+ *       if (!container || container.dataset.initialized) return;
+ *       container.dataset.initialized = "true";
+ *
+ *       FlowDrop.mountPlayground(container, {
+ *         workflowId: settings.flowdrop.workflowId,
+ *         endpointConfig: FlowDrop.createEndpointConfig(settings.flowdrop.apiBaseUrl),
+ *         mode: "standalone"
+ *       }).then(function (app) {
+ *         container._flowdropApp = app;
+ *       });
+ *     },
+ *     detach: function (context, settings, trigger) {
+ *       if (trigger === "unload") {
+ *         var container = document.getElementById("playground-container");
+ *         if (container && container._flowdropApp) {
+ *           container._flowdropApp.destroy();
+ *         }
+ *       }
+ *     }
+ *   };
+ * })(Drupal, window.FlowDrop);
+ * ```
+ *
+ * @example In Svelte (Standalone mode):
+ * ```svelte
+ * <script>
+ *   import { Playground } from "@flowdrop/flowdrop/playground";
+ * </script>
+ *
+ * <Playground workflowId="wf-123" mode="standalone" />
+ * ```
+ *
+ * @example In Svelte (Embedded mode):
+ * ```svelte
+ * <script>
+ *   import { Playground } from "@flowdrop/flowdrop/playground";
+ *   let showPlayground = false;
+ * </script>
+ *
+ * {#if showPlayground}
+ *   <Playground
+ *     workflowId="wf-123"
+ *     workflow={myWorkflow}
+ *     mode="embedded"
+ *     onClose={() => showPlayground = false}
+ *   />
+ * {/if}
+ * ```
+ *
+ * @example In Svelte (Modal mode):
+ * ```svelte
+ * <script>
+ *   import { PlaygroundModal } from "@flowdrop/flowdrop/playground";
+ *   let showPlayground = false;
+ * </script>
+ *
+ * <PlaygroundModal
+ *   isOpen={showPlayground}
+ *   workflowId="wf-123"
+ *   workflow={myWorkflow}
+ *   onClose={() => showPlayground = false}
+ * />
+ * ```
+ *
+ * @example Using mountPlayground with modal mode:
+ * ```typescript
+ * import { mountPlayground, createEndpointConfig } from "@flowdrop/flowdrop/playground";
+ *
+ * const app = await mountPlayground(
+ *   document.getElementById("playground-container"),
+ *   {
+ *     workflowId: "wf-123",
+ *     endpointConfig: createEndpointConfig("/api/flowdrop"),
+ *     mode: "modal",
+ *     onClose: () => {
+ *       app.destroy();
+ *     }
+ *   }
+ * );
+ * ```
+ */
+export { default as Playground } from '../components/playground/Playground.svelte';
+export { default as PlaygroundModal } from '../components/playground/PlaygroundModal.svelte';
+export { default as ChatPanel } from '../components/playground/ChatPanel.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';
+export { default as MessageBubble } from '../components/playground/MessageBubble.svelte';
+export { InterruptBubble, ConfirmationPrompt, ChoicePrompt, TextInputPrompt, FormPrompt } 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 { 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 { createEndpointConfig, defaultEndpointConfig, buildEndpointUrl, type EndpointConfig } from '../config/endpoints.js';

package/dist/playground/index.js

@@ -0,0 +1,172 @@
+/**
+ * FlowDrop Playground Module
+ *
+ * Provides the Playground feature for interactive workflow testing with
+ * chat interface, session management, and real-time execution logs.
+ *
+ * @module playground
+ *
+ * @example Using mountPlayground for vanilla JS / Drupal / IIFE:
+ * ```typescript
+ * import { mountPlayground, createEndpointConfig } from "@flowdrop/flowdrop/playground";
+ *
+ * const app = await mountPlayground(
+ *   document.getElementById("playground-container"),
+ *   {
+ *     workflowId: "wf-123",
+ *     endpointConfig: createEndpointConfig("/api/flowdrop"),
+ *     mode: "standalone"
+ *   }
+ * );
+ *
+ * // Later, to cleanup:
+ * app.destroy();
+ * ```
+ *
+ * @example Drupal Behaviors integration:
+ * ```javascript
+ * (function (Drupal, FlowDrop) {
+ *   Drupal.behaviors.flowdropPlayground = {
+ *     attach: function (context, settings) {
+ *       var container = document.getElementById("playground-container");
+ *       if (!container || container.dataset.initialized) return;
+ *       container.dataset.initialized = "true";
+ *
+ *       FlowDrop.mountPlayground(container, {
+ *         workflowId: settings.flowdrop.workflowId,
+ *         endpointConfig: FlowDrop.createEndpointConfig(settings.flowdrop.apiBaseUrl),
+ *         mode: "standalone"
+ *       }).then(function (app) {
+ *         container._flowdropApp = app;
+ *       });
+ *     },
+ *     detach: function (context, settings, trigger) {
+ *       if (trigger === "unload") {
+ *         var container = document.getElementById("playground-container");
+ *         if (container && container._flowdropApp) {
+ *           container._flowdropApp.destroy();
+ *         }
+ *       }
+ *     }
+ *   };
+ * })(Drupal, window.FlowDrop);
+ * ```
+ *
+ * @example In Svelte (Standalone mode):
+ * ```svelte
+ * <script>
+ *   import { Playground } from "@flowdrop/flowdrop/playground";
+ * </script>
+ *
+ * <Playground workflowId="wf-123" mode="standalone" />
+ * ```
+ *
+ * @example In Svelte (Embedded mode):
+ * ```svelte
+ * <script>
+ *   import { Playground } from "@flowdrop/flowdrop/playground";
+ *   let showPlayground = false;
+ * </script>
+ *
+ * {#if showPlayground}
+ *   <Playground
+ *     workflowId="wf-123"
+ *     workflow={myWorkflow}
+ *     mode="embedded"
+ *     onClose={() => showPlayground = false}
+ *   />
+ * {/if}
+ * ```
+ *
+ * @example In Svelte (Modal mode):
+ * ```svelte
+ * <script>
+ *   import { PlaygroundModal } from "@flowdrop/flowdrop/playground";
+ *   let showPlayground = false;
+ * </script>
+ *
+ * <PlaygroundModal
+ *   isOpen={showPlayground}
+ *   workflowId="wf-123"
+ *   workflow={myWorkflow}
+ *   onClose={() => showPlayground = false}
+ * />
+ * ```
+ *
+ * @example Using mountPlayground with modal mode:
+ * ```typescript
+ * import { mountPlayground, createEndpointConfig } from "@flowdrop/flowdrop/playground";
+ *
+ * const app = await mountPlayground(
+ *   document.getElementById("playground-container"),
+ *   {
+ *     workflowId: "wf-123",
+ *     endpointConfig: createEndpointConfig("/api/flowdrop"),
+ *     mode: "modal",
+ *     onClose: () => {
+ *       app.destroy();
+ *     }
+ *   }
+ * );
+ * ```
+ */
+// ============================================================================
+// Playground Components
+// ============================================================================
+export { default as Playground } from '../components/playground/Playground.svelte';
+export { default as PlaygroundModal } from '../components/playground/PlaygroundModal.svelte';
+export { default as ChatPanel } from '../components/playground/ChatPanel.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';
+export { default as MessageBubble } from '../components/playground/MessageBubble.svelte';
+// ============================================================================
+// Interrupt Components (Human-in-the-Loop)
+// ============================================================================
+export { InterruptBubble, ConfirmationPrompt, ChoicePrompt, TextInputPrompt, FormPrompt } from '../components/interrupt/index.js';
+// ============================================================================
+// Playground Service
+// ============================================================================
+export { PlaygroundService, playgroundService } from '../services/playgroundService.js';
+// ============================================================================
+// Interrupt Service (Human-in-the-Loop)
+// ============================================================================
+export { InterruptService, interruptService } from '../services/interruptService.js';
+// ============================================================================
+// Playground Store
+// ============================================================================
+export { 
+// Core state getters
+getCurrentSession, getSessions, getMessages, getIsExecuting, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollTimestamp, 
+// Derived getters
+getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, 
+// Actions
+playgroundActions, 
+// Polling callback factory
+createPollingCallback, 
+// Subscription utility
+subscribeToSessionStatus, 
+// Utilities
+getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestMessageTimestamp } from '../stores/playgroundStore.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';
+// ============================================================================
+// Interrupt Store (Human-in-the-Loop)
+// ============================================================================
+export { 
+// Core state accessor
+getInterruptsMap, 
+// Getter functions (replace derived stores)
+getPendingInterruptIds, getPendingInterrupts, getPendingInterruptCount, getResolvedInterrupts, getIsAnySubmitting, 
+// Actions
+interruptActions, 
+// Utilities
+getInterrupt, isInterruptPending, isInterruptSubmitting, getInterruptError, getInterruptByMessageId, interruptHasError } from '../stores/interruptStore.svelte.js';
+// ============================================================================
+// Playground Mount Functions (for vanilla JS / Drupal / IIFE integration)
+// ============================================================================
+export { mountPlayground, unmountPlayground } from './mount.js';
+// ============================================================================
+// Endpoint Configuration (re-exported for convenience)
+// ============================================================================
+export { createEndpointConfig, defaultEndpointConfig, buildEndpointUrl } from '../config/endpoints.js';

package/dist/playground/mount.d.ts

@@ -0,0 +1,203 @@
+/**
+ * Playground Mount Functions
+ *
+ * Provides mount/unmount functions for integrating the Playground component
+ * into any web application. Particularly useful for integration with
+ * vanilla JS, Drupal, WordPress, or other frameworks.
+ *
+ * @module playground/mount
+ *
+ * @example Basic usage in vanilla JavaScript:
+ * ```javascript
+ * const app = await FlowDrop.mountPlayground(
+ *   document.getElementById("playground-container"),
+ *   {
+ *     workflowId: "wf-123",
+ *     endpointConfig: FlowDrop.createEndpointConfig("/api/flowdrop"),
+ *     mode: "standalone"
+ *   }
+ * );
+ *
+ * // Later, to cleanup:
+ * app.destroy();
+ * ```
+ *
+ * @example Drupal integration:
+ * ```javascript
+ * (function (Drupal, FlowDrop) {
+ *   Drupal.behaviors.flowdropPlayground = {
+ *     attach: function (context, settings) {
+ *       const container = document.getElementById("playground-container");
+ *       if (!container || container.dataset.initialized) return;
+ *       container.dataset.initialized = "true";
+ *
+ *       FlowDrop.mountPlayground(container, {
+ *         workflowId: settings.flowdrop.workflowId,
+ *         endpointConfig: FlowDrop.createEndpointConfig(settings.flowdrop.apiBaseUrl),
+ *         mode: "standalone"
+ *       }).then(function (app) {
+ *         container._flowdropApp = app;
+ *       });
+ *     }
+ *   };
+ * })(Drupal, window.FlowDrop);
+ * ```
+ */
+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';
+/**
+ * Mount options for Playground component
+ */
+export interface PlaygroundMountOptions {
+    /**
+     * Target workflow ID (required)
+     * The workflow that the playground will interact with
+     */
+    workflowId: string;
+    /**
+     * Pre-loaded workflow data (optional)
+     * If not provided, the component will fetch it from the API
+     */
+    workflow?: Workflow;
+    /**
+     * Display mode
+     * - "standalone": Full-page playground experience
+     * - "embedded": Panel mode for embedding alongside other content
+     * - "modal": Modal dialog mode with backdrop
+     * @default "standalone"
+     */
+    mode?: PlaygroundMode;
+    /**
+     * Resume a specific session by ID
+     * If provided, the playground will load this session on mount
+     */
+    initialSessionId?: string;
+    /**
+     * API endpoint configuration
+     * Use createEndpointConfig() to create this
+     */
+    endpointConfig?: EndpointConfig;
+    /**
+     * Playground-specific configuration options
+     */
+    config?: PlaygroundConfig;
+    /**
+     * Container height (CSS value)
+     * @default "100%"
+     */
+    height?: string;
+    /**
+     * Container width (CSS value)
+     * @default "100%"
+     */
+    width?: string;
+    /**
+     * Callback when playground is closed (required for embedded and modal modes)
+     */
+    onClose?: () => void;
+    /**
+     * Called when session status changes (from polling or actions)
+     *
+     * @param status - The new session status
+     * @param previousStatus - The previous session status
+     */
+    onSessionStatusChange?: (status: PlaygroundSessionStatus, previousStatus: PlaygroundSessionStatus) => void;
+}
+/**
+ * Return type for mounted Playground instance
+ */
+export interface MountedPlayground {
+    /**
+     * Destroy the playground and clean up resources
+     * Should be called when removing the playground from the DOM
+     */
+    destroy: () => void;
+    /**
+     * Get the current session
+     * @returns The current session or null if none selected
+     */
+    getCurrentSession: () => PlaygroundSession | null;
+    /**
+     * Get all sessions for the workflow
+     * @returns Array of playground sessions
+     */
+    getSessions: () => PlaygroundSession[];
+    /**
+     * Get the message count in the current session
+     * @returns Number of messages
+     */
+    getMessageCount: () => number;
+    /**
+     * Check if the playground is currently executing
+     * @returns True if a workflow execution is in progress
+     */
+    isExecuting: () => boolean;
+    /**
+     * Stop any active polling
+     */
+    stopPolling: () => void;
+    /**
+     * Restart polling for the current session
+     * Useful after polling stops (e.g., on awaiting_input) and you want to resume
+     */
+    startPolling: () => void;
+    /**
+     * Push a poll response into the store pipeline.
+     * Use with custom transports (WebSocket/SSE) instead of built-in polling.
+     *
+     * @param response - A PlaygroundMessagesApiResponse to process
+     */
+    pushMessages: (response: PlaygroundMessagesApiResponse) => void;
+    /**
+     * Reset the playground state
+     * Clears the current session and messages
+     */
+    reset: () => void;
+}
+/**
+ * Mount the Playground component in a container
+ *
+ * This function mounts the Playground Svelte component into a DOM container,
+ * enabling interactive workflow testing with a chat interface.
+ *
+ * @param container - DOM element to mount the playground into
+ * @param options - Configuration options for the playground
+ * @returns Promise resolving to a MountedPlayground instance
+ *
+ * @example
+ * ```typescript
+ * import { mountPlayground, createEndpointConfig } from "@flowdrop/flowdrop/playground";
+ *
+ * const app = await mountPlayground(
+ *   document.getElementById("playground"),
+ *   {
+ *     workflowId: "wf-123",
+ *     endpointConfig: createEndpointConfig("/api/flowdrop"),
+ *     mode: "standalone",
+ *     config: {
+ *       showTimestamps: true,
+ *       autoScroll: true,
+ *       pollingInterval: 1500
+ *     }
+ *   }
+ * );
+ * ```
+ */
+export declare function mountPlayground(container: HTMLElement, options: PlaygroundMountOptions): Promise<MountedPlayground>;
+/**
+ * Unmount a Playground instance
+ *
+ * Convenience function for destroying a mounted playground.
+ * Equivalent to calling `app.destroy()`.
+ *
+ * @param app - The mounted playground to unmount
+ *
+ * @example
+ * ```typescript
+ * const app = await mountPlayground(container, options);
+ * // ... later
+ * unmountPlayground(app);
+ * ```
+ */
+export declare function unmountPlayground(app: MountedPlayground): void;