@flowdrop/flowdrop 1.0.0 → 1.1.0

package/dist/types/interruptState.js

@@ -35,7 +35,7 @@
 /**
  * Initial idle state
  */
-export const initialState = { status: 'idle' };
+export const initialState = { status: "idle" };
 /**
  * Transition function for the interrupt state machine
  *
@@ -58,21 +58,21 @@ export const initialState = { status: 'idle' };
  */
 export function transition(state, action) {
     switch (state.status) {
-        case 'idle':
+        case "idle":
             return transitionFromIdle(state, action);
-        case 'submitting':
+        case "submitting":
             return transitionFromSubmitting(state, action);
-        case 'error':
+        case "error":
             return transitionFromError(state, action);
-        case 'resolved':
+        case "resolved":
             return transitionFromResolved(state, action);
-        case 'cancelled':
+        case "cancelled":
             return transitionFromCancelled(state, action);
         default:
             return {
                 state,
                 valid: false,
-                error: `Unknown state: ${state.status}`
+                error: `Unknown state: ${state.status}`,
             };
     }
 }
@@ -81,31 +81,31 @@ export function transition(state, action) {
  */
 function transitionFromIdle(_state, action) {
     switch (action.type) {
-        case 'SUBMIT':
+        case "SUBMIT":
             return {
                 state: {
-                    status: 'submitting',
+                    status: "submitting",
                     pendingValue: action.value,
-                    isCancelAction: false
+                    isCancelAction: false,
                 },
-                valid: true
+                valid: true,
             };
-        case 'CANCEL':
+        case "CANCEL":
             return {
                 state: {
-                    status: 'submitting',
+                    status: "submitting",
                     pendingValue: undefined,
-                    isCancelAction: true
+                    isCancelAction: true,
                 },
-                valid: true
+                valid: true,
             };
-        case 'RESET':
+        case "RESET":
             return { state: initialState, valid: true };
         default:
             return {
                 state: _state,
                 valid: false,
-                error: `Cannot ${action.type} from idle state`
+                error: `Cannot ${action.type} from idle state`,
             };
     }
 }
@@ -114,49 +114,49 @@ function transitionFromIdle(_state, action) {
  */
 function transitionFromSubmitting(state, action) {
     switch (action.type) {
-        case 'SUCCESS':
+        case "SUCCESS":
             if (state.isCancelAction) {
                 return {
                     state: {
-                        status: 'cancelled',
-                        cancelledAt: new Date().toISOString()
+                        status: "cancelled",
+                        cancelledAt: new Date().toISOString(),
                     },
-                    valid: true
+                    valid: true,
                 };
             }
             return {
                 state: {
-                    status: 'resolved',
+                    status: "resolved",
                     value: state.pendingValue,
-                    resolvedAt: new Date().toISOString()
+                    resolvedAt: new Date().toISOString(),
                 },
-                valid: true
+                valid: true,
             };
-        case 'FAILURE':
+        case "FAILURE":
             return {
                 state: {
-                    status: 'error',
+                    status: "error",
                     error: action.error,
                     failedValue: state.pendingValue,
-                    wasCancelAction: state.isCancelAction
+                    wasCancelAction: state.isCancelAction,
                 },
-                valid: true
+                valid: true,
             };
-        case 'RESET':
+        case "RESET":
             return { state: initialState, valid: true };
         // Prevent double-submit
-        case 'SUBMIT':
-        case 'CANCEL':
+        case "SUBMIT":
+        case "CANCEL":
             return {
                 state,
                 valid: false,
-                error: 'Cannot submit/cancel while already submitting'
+                error: "Cannot submit/cancel while already submitting",
             };
         default:
             return {
                 state,
                 valid: false,
-                error: `Cannot ${action.type} from submitting state`
+                error: `Cannot ${action.type} from submitting state`,
             };
     }
 }
@@ -165,41 +165,41 @@ function transitionFromSubmitting(state, action) {
  */
 function transitionFromError(state, action) {
     switch (action.type) {
-        case 'RETRY':
+        case "RETRY":
             return {
                 state: {
-                    status: 'submitting',
+                    status: "submitting",
                     pendingValue: state.failedValue,
-                    isCancelAction: state.wasCancelAction
+                    isCancelAction: state.wasCancelAction,
                 },
-                valid: true
+                valid: true,
             };
-        case 'SUBMIT':
+        case "SUBMIT":
             // Allow resubmitting with new value
             return {
                 state: {
-                    status: 'submitting',
+                    status: "submitting",
                     pendingValue: action.value,
-                    isCancelAction: false
+                    isCancelAction: false,
                 },
-                valid: true
+                valid: true,
             };
-        case 'CANCEL':
+        case "CANCEL":
             return {
                 state: {
-                    status: 'submitting',
+                    status: "submitting",
                     pendingValue: undefined,
-                    isCancelAction: true
+                    isCancelAction: true,
                 },
-                valid: true
+                valid: true,
             };
-        case 'RESET':
+        case "RESET":
             return { state: initialState, valid: true };
         default:
             return {
                 state,
                 valid: false,
-                error: `Cannot ${action.type} from error state`
+                error: `Cannot ${action.type} from error state`,
             };
     }
 }
@@ -207,26 +207,26 @@ function transitionFromError(state, action) {
  * Transitions from resolved state (terminal - only reset allowed)
  */
 function transitionFromResolved(state, action) {
-    if (action.type === 'RESET') {
+    if (action.type === "RESET") {
         return { state: initialState, valid: true };
     }
     return {
         state,
         valid: false,
-        error: `Cannot ${action.type} from resolved state - interrupt already completed`
+        error: `Cannot ${action.type} from resolved state - interrupt already completed`,
     };
 }
 /**
  * Transitions from cancelled state (terminal - only reset allowed)
  */
 function transitionFromCancelled(state, action) {
-    if (action.type === 'RESET') {
+    if (action.type === "RESET") {
         return { state: initialState, valid: true };
     }
     return {
         state,
         valid: false,
-        error: `Cannot ${action.type} from cancelled state - interrupt already cancelled`
+        error: `Cannot ${action.type} from cancelled state - interrupt already cancelled`,
     };
 }
 // =========================================================================
@@ -239,7 +239,7 @@ function transitionFromCancelled(state, action) {
  * @returns True if the interrupt is finished
  */
 export function isTerminalState(state) {
-    return state.status === 'resolved' || state.status === 'cancelled';
+    return state.status === "resolved" || state.status === "cancelled";
 }
 /**
  * Check if the interrupt is currently submitting
@@ -248,7 +248,7 @@ export function isTerminalState(state) {
  * @returns True if submitting
  */
 export function isSubmitting(state) {
-    return state.status === 'submitting';
+    return state.status === "submitting";
 }
 /**
  * Check if the interrupt has an error
@@ -257,7 +257,7 @@ export function isSubmitting(state) {
  * @returns True if in error state
  */
 export function hasError(state) {
-    return state.status === 'error';
+    return state.status === "error";
 }
 /**
  * Check if the interrupt can accept user input
@@ -266,7 +266,7 @@ export function hasError(state) {
  * @returns True if idle or error (can submit)
  */
 export function canSubmit(state) {
-    return state.status === 'idle' || state.status === 'error';
+    return state.status === "idle" || state.status === "error";
 }
 /**
  * Get the error message if in error state
@@ -275,7 +275,7 @@ export function canSubmit(state) {
  * @returns Error message or undefined
  */
 export function getErrorMessage(state) {
-    return state.status === 'error' ? state.error : undefined;
+    return state.status === "error" ? state.error : undefined;
 }
 /**
  * Get the resolved value if in resolved state
@@ -284,7 +284,7 @@ export function getErrorMessage(state) {
  * @returns Resolved value or undefined
  */
 export function getResolvedValue(state) {
-    return state.status === 'resolved' ? state.value : undefined;
+    return state.status === "resolved" ? state.value : undefined;
 }
 /**
  * Map InterruptState status to legacy InterruptStatus for backward compatibility
@@ -294,15 +294,15 @@ export function getResolvedValue(state) {
  */
 export function toLegacyStatus(state) {
     switch (state.status) {
-        case 'idle':
-        case 'submitting':
-        case 'error':
-            return 'pending';
-        case 'resolved':
-            return 'resolved';
-        case 'cancelled':
-            return 'cancelled';
+        case "idle":
+        case "submitting":
+        case "error":
+            return "pending";
+        case "resolved":
+            return "resolved";
+        case "cancelled":
+            return "cancelled";
         default:
-            return 'pending';
+            return "pending";
     }
 }

package/dist/types/playground.d.ts

@@ -6,11 +6,11 @@
  *
  * @module types/playground
  */
-import type { ConfigProperty } from './index.js';
+import type { ConfigProperty } from "./index.js";
 /**
  * Status of a playground session
  */
-export type PlaygroundSessionStatus = 'idle' | 'running' | 'awaiting_input' | 'completed' | 'failed';
+export type PlaygroundSessionStatus = "idle" | "running" | "awaiting_input" | "completed" | "failed";
 /**
  * Statuses that stop polling by default (resource efficiency)
  */
@@ -43,15 +43,15 @@ export declare function defaultIsTerminalStatus(status: PlaygroundSessionStatus)
  * - `system`: System notifications
  * - `log`: Execution log entries
  */
-export type PlaygroundMessageRole = 'user' | 'assistant' | 'system' | 'log';
+export type PlaygroundMessageRole = "user" | "assistant" | "system" | "log";
 /**
  * Log level for log-type messages
  */
-export type PlaygroundMessageLevel = 'info' | 'warning' | 'error' | 'debug';
+export type PlaygroundMessageLevel = "info" | "warning" | "error" | "debug";
 /**
  * Status of a playground message
  */
-export type PlaygroundMessageStatus = 'pending' | 'processing' | 'completed' | 'failed';
+export type PlaygroundMessageStatus = "pending" | "processing" | "completed" | "failed";
 /**
  * Playground session representing a test conversation
  *
@@ -217,7 +217,7 @@ export interface PlaygroundConfig {
     /** Show timestamps on messages (default: true) */
     showTimestamps?: boolean;
     /** Show log messages inline or in collapsible section (default: "collapsible") */
-    logDisplayMode?: 'inline' | 'collapsible';
+    logDisplayMode?: "inline" | "collapsible";
     /** Enable markdown rendering in messages (default: true) */
     enableMarkdown?: boolean;
     /**
@@ -303,7 +303,7 @@ export declare function hasEnableRunFlag(metadata: PlaygroundMessageMetadata | u
 /**
  * Display mode for the Playground component
  */
-export type PlaygroundMode = 'embedded' | 'standalone' | 'modal';
+export type PlaygroundMode = "embedded" | "standalone" | "modal";
 /**
  * Chat input detection patterns for identifying chat nodes in workflows
  */

package/dist/types/playground.js

@@ -10,19 +10,19 @@
  * Statuses that stop polling by default (resource efficiency)
  */
 export const DEFAULT_STOP_POLLING_STATUSES = [
-    'idle',
-    'completed',
-    'failed',
-    'awaiting_input'
+    "idle",
+    "completed",
+    "failed",
+    "awaiting_input",
 ];
 /**
  * Statuses that are considered terminal by default (clears isExecuting)
  */
 export const DEFAULT_TERMINAL_STATUSES = [
-    'idle',
-    'completed',
-    'failed',
-    'awaiting_input'
+    "idle",
+    "completed",
+    "failed",
+    "awaiting_input",
 ];
 /**
  * Default implementation for determining if polling should stop.
@@ -63,7 +63,7 @@ export function defaultIsTerminalStatus(status) {
  * };
  * ```
  */
-export const ENABLE_RUN_METADATA_KEY = 'enableRun';
+export const ENABLE_RUN_METADATA_KEY = "enableRun";
 /**
  * Check if a message metadata contains the enableRun flag
  *
@@ -77,11 +77,11 @@ export function hasEnableRunFlag(metadata) {
  * Chat input detection patterns for identifying chat nodes in workflows
  */
 export const CHAT_INPUT_PATTERNS = [
-    'chat_input',
-    'text_input',
-    'user_input',
-    'message_input',
-    'prompt_input'
+    "chat_input",
+    "text_input",
+    "user_input",
+    "message_input",
+    "prompt_input",
 ];
 /**
  * Check if a node type is a chat input node

package/dist/types/settings.d.ts

@@ -12,11 +12,11 @@
  * - 'dark': Force dark theme
  * - 'auto': Follow system preference
  */
-export type ThemePreference = 'light' | 'dark' | 'auto';
+export type ThemePreference = "light" | "dark" | "auto";
 /**
  * Resolved theme (actual applied theme, never 'auto')
  */
-export type ResolvedTheme = 'light' | 'dark';
+export type ResolvedTheme = "light" | "dark";
 /**
  * Theme-related settings
  */
@@ -55,6 +55,8 @@ export interface UISettings {
     sidebarCollapsed: boolean;
     /** Enable compact mode for denser UI */
     compactMode: boolean;
+    /** Active theme name — overridden by the theme prop when explicitly provided */
+    theme: "default" | "minimal";
 }
 /**
  * Application behavior and automation settings
@@ -171,7 +173,7 @@ export declare const SETTINGS_STORAGE_KEY = "flowdrop-settings";
 /**
  * API sync status
  */
-export type SyncStatus = 'idle' | 'syncing' | 'synced' | 'error';
+export type SyncStatus = "idle" | "syncing" | "synced" | "error";
 /**
  * Settings store state including sync metadata
  */

package/dist/types/settings.js

@@ -9,26 +9,32 @@
 /**
  * All available settings categories
  */
-export const SETTINGS_CATEGORIES = ['theme', 'editor', 'ui', 'behavior', 'api'];
+export const SETTINGS_CATEGORIES = [
+    "theme",
+    "editor",
+    "ui",
+    "behavior",
+    "api",
+];
 /**
  * Human-readable labels for settings categories
  */
 export const SETTINGS_CATEGORY_LABELS = {
-    theme: 'Theme',
-    editor: 'Editor',
-    ui: 'UI',
-    behavior: 'Behavior',
-    api: 'API'
+    theme: "Theme",
+    editor: "Editor",
+    ui: "UI",
+    behavior: "Behavior",
+    api: "API",
 };
 /**
  * Icons for settings categories (Iconify icon names)
  */
 export const SETTINGS_CATEGORY_ICONS = {
-    theme: 'mdi:palette',
-    editor: 'mdi:grid',
-    ui: 'mdi:view-dashboard',
-    behavior: 'mdi:cog-play',
-    api: 'mdi:api'
+    theme: "mdi:palette",
+    editor: "mdi:grid",
+    ui: "mdi:view-dashboard",
+    behavior: "mdi:cog-play",
+    api: "mdi:api",
 };
 // =========================================================================
 // Default Settings
@@ -37,7 +43,7 @@ export const SETTINGS_CATEGORY_ICONS = {
  * Default theme settings
  */
 export const DEFAULT_THEME_SETTINGS = {
-    preference: 'dark'
+    preference: "dark",
 };
 /**
  * Default editor settings
@@ -50,7 +56,7 @@ export const DEFAULT_EDITOR_SETTINGS = {
     defaultZoom: 1,
     fitViewOnLoad: true,
     proximityConnect: false,
-    proximityConnectDistance: 150
+    proximityConnectDistance: 150,
 };
 /**
  * Default UI settings
@@ -58,7 +64,8 @@ export const DEFAULT_EDITOR_SETTINGS = {
 export const DEFAULT_UI_SETTINGS = {
     sidebarWidth: 280,
     sidebarCollapsed: false,
-    compactMode: false
+    compactMode: false,
+    theme: "default",
 };
 /**
  * Default behavior settings
@@ -67,7 +74,7 @@ export const DEFAULT_BEHAVIOR_SETTINGS = {
     autoSave: false,
     autoSaveInterval: 30000,
     undoHistoryLimit: 50,
-    confirmDelete: false
+    confirmDelete: false,
 };
 /**
  * Default API settings
@@ -76,7 +83,7 @@ export const DEFAULT_API_SETTINGS = {
     timeout: 30000,
     retryEnabled: true,
     retryAttempts: 3,
-    cacheEnabled: false
+    cacheEnabled: false,
 };
 /**
  * Complete default settings object
@@ -86,7 +93,7 @@ export const DEFAULT_SETTINGS = {
     editor: DEFAULT_EDITOR_SETTINGS,
     ui: DEFAULT_UI_SETTINGS,
     behavior: DEFAULT_BEHAVIOR_SETTINGS,
-    api: DEFAULT_API_SETTINGS
+    api: DEFAULT_API_SETTINGS,
 };
 // =========================================================================
 // Settings Persistence Types
@@ -94,4 +101,4 @@ export const DEFAULT_SETTINGS = {
 /**
  * localStorage key for persisting settings
  */
-export const SETTINGS_STORAGE_KEY = 'flowdrop-settings';
+export const SETTINGS_STORAGE_KEY = "flowdrop-settings";

package/dist/types/skin.d.ts

@@ -0,0 +1,31 @@
+export interface FlowDropSkinTokens {
+    /** Keys are --fd-* token names without the prefix, values are CSS values.
+     * e.g. { 'radius-md': '4px', 'primary': '#8b5cf6' }
+     *
+     * Display-control tokens (toggle visual variants via CSS):
+     *   'node-icon-display'      — 'flex' | 'none'  (squircle icon wrapper)
+     *   'node-circle-display'    — 'flex' | 'none'  (circle dot)
+     *   'sidebar-search-display' — 'flex' | 'none'
+     *   'sidebar-header-display' — 'flex' | 'none'
+     *   'sidebar-card-display'   — 'block' | 'none' (accordion card list)
+     *   'sidebar-flat-display'   — 'block' | 'none' (flat dot-name list)
+     *
+     * Port color token:
+     *   'port-skin-color' — when set, overrides all port handle colors (e.g. 'var(--fd-muted-foreground)')
+     *                       leave unset (default) to use per-type colors from getDataTypeColor()
+     */
+    [tokenName: string]: string;
+}
+export interface FlowDropSkin {
+    /** Optional base skin name. When set, its tokens are used as a base and merged
+     * with any inline tokens provided. Useful for extending a built-in skin:
+     * @example
+     * <App skin={{ name: 'minimal', tokens: { primary: '#e11d48' } }} />
+     */
+    name?: FlowDropSkinName | (string & {});
+    /** CSS token overrides injected as :root rules — active in light mode (and as base) */
+    tokens?: FlowDropSkinTokens;
+    /** CSS token overrides injected as [data-theme='dark'] rules — active in dark mode only */
+    darkTokens?: FlowDropSkinTokens;
+}
+export type FlowDropSkinName = "default" | "slate";

package/dist/types/skin.js

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

package/dist/types/theme.d.ts

@@ -0,0 +1,35 @@
+import type { FlowDropSkin } from "./skin.js";
+/**
+ * Behavioral configuration bundled with a theme.
+ * These are initial-state flags, not CSS — they control runtime defaults.
+ */
+export interface FlowDropThemeConfig {
+    sidebar?: {
+        /** Whether the sidebar starts open. Defaults to true. */
+        defaultOpen?: boolean;
+        /** Whether category <details> accordion sections start open in card mode. Defaults to false. */
+        categoriesDefaultOpen?: boolean;
+    };
+}
+/**
+ * A FlowDrop theme bundles a visual skin (CSS tokens) with UI config (behavioral defaults).
+ *
+ * Built-in themes: 'default' | 'minimal'
+ *
+ * @example
+ * // Use a built-in theme by name
+ * <App theme="minimal" />
+ *
+ * @example
+ * // Extend a built-in theme with custom token overrides
+ * <App theme={{ name: 'minimal', skin: { tokens: { primary: '#e11d48' } } }} />
+ */
+export interface FlowDropTheme {
+    /** Optional built-in theme name used as a merge base */
+    name?: FlowDropThemeName | (string & {});
+    /** Visual skin — CSS token overrides */
+    skin?: FlowDropSkin;
+    /** Behavioral configuration defaults */
+    config?: FlowDropThemeConfig;
+}
+export type FlowDropThemeName = "default" | "minimal";

package/dist/types/theme.js

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

package/dist/types/uischema.d.ts

@@ -35,7 +35,7 @@
  * Supported UISchema element types.
  * Designed for future extension with HorizontalLayout, Categorization, etc.
  */
-export type UISchemaElementType = 'VerticalLayout' | 'Group' | 'Control';
+export type UISchemaElementType = "VerticalLayout" | "Group" | "Control";
 /**
  * Base interface for all UISchema elements.
  */
@@ -53,7 +53,7 @@ export interface UISchemaElementBase {
  * ```
  */
 export interface UISchemaControl extends UISchemaElementBase {
-    type: 'Control';
+    type: "Control";
     /**
      * JSON Pointer to the property in the data schema.
      * Must follow the format: #/properties/<fieldName>
@@ -81,7 +81,7 @@ export interface UISchemaControl extends UISchemaElementBase {
  * ```
  */
 export interface UISchemaVerticalLayout extends UISchemaElementBase {
-    type: 'VerticalLayout';
+    type: "VerticalLayout";
     /** Child elements to render vertically */
     elements: UISchemaElement[];
 }
@@ -105,7 +105,7 @@ export interface UISchemaVerticalLayout extends UISchemaElementBase {
  * ```
  */
 export interface UISchemaGroup extends UISchemaElementBase {
-    type: 'Group';
+    type: "Group";
     /** Display label for the fieldset legend / summary */
     label: string;
     /** Child elements within the group */