@d34dman/flowdrop 0.0.30 → 0.0.32

package/dist/form/index.js

@@ -42,27 +42,27 @@
 // ============================================================================
 // Main Components
 // ============================================================================
-export { default as SchemaForm } from "../components/SchemaForm.svelte";
+export { default as SchemaForm } from '../components/SchemaForm.svelte';
 // ============================================================================
 // Form Field Components (Light - no heavy dependencies)
 // ============================================================================
 // Use the light version of FormField that uses the registry for heavy editors
-export { default as FormField } from "../components/form/FormFieldLight.svelte";
+export { default as FormField } from '../components/form/FormFieldLight.svelte';
 // Also export the original (full) version for users who want everything
-export { default as FormFieldFull } from "../components/form/FormField.svelte";
-export { default as FormFieldWrapper } from "../components/form/FormFieldWrapper.svelte";
-export { default as FormTextField } from "../components/form/FormTextField.svelte";
-export { default as FormTextarea } from "../components/form/FormTextarea.svelte";
-export { default as FormNumberField } from "../components/form/FormNumberField.svelte";
-export { default as FormRangeField } from "../components/form/FormRangeField.svelte";
-export { default as FormToggle } from "../components/form/FormToggle.svelte";
-export { default as FormSelect } from "../components/form/FormSelect.svelte";
-export { default as FormCheckboxGroup } from "../components/form/FormCheckboxGroup.svelte";
-export { default as FormArray } from "../components/form/FormArray.svelte";
-export { isFieldOptionArray, normalizeOptions } from "../components/form/types.js";
+export { default as FormFieldFull } from '../components/form/FormField.svelte';
+export { default as FormFieldWrapper } from '../components/form/FormFieldWrapper.svelte';
+export { default as FormTextField } from '../components/form/FormTextField.svelte';
+export { default as FormTextarea } from '../components/form/FormTextarea.svelte';
+export { default as FormNumberField } from '../components/form/FormNumberField.svelte';
+export { default as FormRangeField } from '../components/form/FormRangeField.svelte';
+export { default as FormToggle } from '../components/form/FormToggle.svelte';
+export { default as FormSelect } from '../components/form/FormSelect.svelte';
+export { default as FormCheckboxGroup } from '../components/form/FormCheckboxGroup.svelte';
+export { default as FormArray } from '../components/form/FormArray.svelte';
+export { isFieldOptionArray, normalizeOptions } from '../components/form/types.js';
 // ============================================================================
 // Field Registry (for dynamic field registration)
 // ============================================================================
 export { registerFieldComponent, unregisterFieldComponent, resolveFieldComponent, getRegisteredFieldTypes, isFieldTypeRegistered, clearFieldRegistry, getFieldRegistrySize, 
 // Built-in matchers for custom components
-hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from "./fieldRegistry.js";
+hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from './fieldRegistry.js';

package/dist/form/markdown.d.ts

@@ -23,9 +23,9 @@
  * };
  * ```
  */
-import type { FieldSchema } from "../components/form/types.js";
-export { default as FormMarkdownEditor } from "../components/form/FormMarkdownEditor.svelte";
-export type { MarkdownEditorFieldProps } from "../components/form/types.js";
+import type { FieldSchema } from '../components/form/types.js';
+export { default as FormMarkdownEditor } from '../components/form/FormMarkdownEditor.svelte';
+export type { MarkdownEditorFieldProps } from '../components/form/types.js';
 /**
  * Matcher for markdown editor fields
  * Matches: format "markdown"

package/dist/form/markdown.js

@@ -23,15 +23,15 @@
  * };
  * ```
  */
-import { registerFieldComponent } from "./fieldRegistry.js";
+import { registerFieldComponent } from './fieldRegistry.js';
 // Re-export the component for direct usage if needed
-export { default as FormMarkdownEditor } from "../components/form/FormMarkdownEditor.svelte";
+export { default as FormMarkdownEditor } from '../components/form/FormMarkdownEditor.svelte';
 /**
  * Matcher for markdown editor fields
  * Matches: format "markdown"
  */
 export function markdownEditorFieldMatcher(schema) {
-    return schema.format === "markdown";
+    return schema.format === 'markdown';
 }
 /**
  * Track if markdown editor is registered
@@ -58,8 +58,8 @@ export function registerMarkdownEditorField(priority = 100) {
         return;
     }
     // Dynamic import to ensure proper code splitting
-    import("../components/form/FormMarkdownEditor.svelte").then((module) => {
-        registerFieldComponent("markdown-editor", module.default, markdownEditorFieldMatcher, priority);
+    import('../components/form/FormMarkdownEditor.svelte').then((module) => {
+        registerFieldComponent('markdown-editor', module.default, markdownEditorFieldMatcher, priority);
         markdownEditorRegistered = true;
     });
 }
@@ -82,7 +82,7 @@ component, priority = 100) {
     if (markdownEditorRegistered) {
         return;
     }
-    registerFieldComponent("markdown-editor", component, markdownEditorFieldMatcher, priority);
+    registerFieldComponent('markdown-editor', component, markdownEditorFieldMatcher, priority);
     markdownEditorRegistered = true;
 }
 /**

package/dist/index.d.ts

@@ -13,6 +13,7 @@
  * - `@d34dman/flowdrop/form/code` - Code editor support (adds CodeMirror)
  * - `@d34dman/flowdrop/form/markdown` - Markdown editor support (adds EasyMDE)
  * - `@d34dman/flowdrop/display` - MarkdownDisplay (adds marked)
+ * - `@d34dman/flowdrop/playground` - Playground for interactive workflow testing
  * - `@d34dman/flowdrop/styles` - CSS styles
  *
  * ## Legacy Import (Full Bundle)
@@ -28,7 +29,8 @@
  *
  * @module flowdrop
  */
-export * from "./core/index.js";
-export * from "./form/index.js";
-export * from "./display/index.js";
-export * from "./editor/index.js";
+export * from './core/index.js';
+export * from './form/index.js';
+export * from './display/index.js';
+export * from './playground/index.js';
+export * from './editor/index.js';

package/dist/index.js

@@ -13,6 +13,7 @@
  * - `@d34dman/flowdrop/form/code` - Code editor support (adds CodeMirror)
  * - `@d34dman/flowdrop/form/markdown` - Markdown editor support (adds EasyMDE)
  * - `@d34dman/flowdrop/display` - MarkdownDisplay (adds marked)
+ * - `@d34dman/flowdrop/playground` - Playground for interactive workflow testing
  * - `@d34dman/flowdrop/styles` - CSS styles
  *
  * ## Legacy Import (Full Bundle)
@@ -35,18 +36,22 @@
 // ============================================================================
 // Core Exports (Types & Utilities - No Heavy Dependencies)
 // ============================================================================
-export * from "./core/index.js";
+export * from './core/index.js';
 // ============================================================================
 // Form Exports
 // ============================================================================
-export * from "./form/index.js";
+export * from './form/index.js';
 // Note: Heavy form fields (code, markdown) are NOT auto-registered.
 // Users must import from form/code or form/markdown and register explicitly.
 // ============================================================================
 // Display Exports
 // ============================================================================
-export * from "./display/index.js";
+export * from './display/index.js';
+// ============================================================================
+// Playground Exports
+// ============================================================================
+export * from './playground/index.js';
 // ============================================================================
 // Editor Exports (includes @xyflow/svelte and auto-registers builtin nodes)
 // ============================================================================
-export * from "./editor/index.js";
+export * from './editor/index.js';

package/dist/playground/index.d.ts

@@ -0,0 +1,125 @@
+/**
+ * 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 "@d34dman/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 "@d34dman/flowdrop/playground";
+ * </script>
+ *
+ * <Playground workflowId="wf-123" mode="standalone" />
+ * ```
+ *
+ * @example In Svelte (Embedded mode):
+ * ```svelte
+ * <script>
+ *   import { Playground } from "@d34dman/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 "@d34dman/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 "@d34dman/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 { PlaygroundService, playgroundService } from '../services/playgroundService.js';
+export { currentSession, sessions, messages, isExecuting, isLoading, error as playgroundError, currentWorkflow, lastPollTimestamp, sessionStatus, messageCount, chatMessages, logMessages, latestMessage, inputFields, hasChatInput, sessionCount, playgroundActions, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestMessageTimestamp } from '../stores/playgroundStore.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 } from '../types/playground.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,147 @@
+/**
+ * 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 "@d34dman/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 "@d34dman/flowdrop/playground";
+ * </script>
+ *
+ * <Playground workflowId="wf-123" mode="standalone" />
+ * ```
+ *
+ * @example In Svelte (Embedded mode):
+ * ```svelte
+ * <script>
+ *   import { Playground } from "@d34dman/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 "@d34dman/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 "@d34dman/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';
+// ============================================================================
+// Playground Service
+// ============================================================================
+export { PlaygroundService, playgroundService } from '../services/playgroundService.js';
+// ============================================================================
+// Playground Store
+// ============================================================================
+export { 
+// Core stores
+currentSession, sessions, messages, isExecuting, isLoading, error as playgroundError, currentWorkflow, lastPollTimestamp, 
+// Derived stores
+sessionStatus, messageCount, chatMessages, logMessages, latestMessage, inputFields, hasChatInput, sessionCount, 
+// Actions
+playgroundActions, 
+// Utilities
+getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestMessageTimestamp } from '../stores/playgroundStore.js';
+export { isChatInputNode, CHAT_INPUT_PATTERNS } from '../types/playground.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,184 @@
+/**
+ * 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 } 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;
+}
+/**
+ * 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;
+    /**
+     * 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 "@d34dman/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;