@d34dman/flowdrop 0.0.43 → 0.0.45

package/dist/styles/toast.css

@@ -0,0 +1,33 @@
+/**
+ * FlowDrop Toast Theme
+ *
+ * Themes svelte-5-french-toast to match FlowDrop design tokens.
+ * Apply containerClassName="flowdrop-toaster" and default toastOptions.className="flowdrop-toast-bar"
+ * so these selectors apply. Icon colors are set via toastOptions.iconTheme using CSS variables.
+ *
+ * Uses !important so our token-based styles win over the library's default styles,
+ * which are injected when the Toaster mounts (after this stylesheet).
+ */
+
+/* Toaster container: use design token for offset from viewport edges */
+.flowdrop-toaster.flowdrop-toaster {
+	--default-offset: var(--fd-space-4, 16px);
+}
+
+/*
+ * Toast bar: card surface, border, radius, shadow, typography and spacing from design tokens.
+ * Plain descendant selector (no :global - that's Svelte-only and invalid in plain CSS).
+ */
+.flowdrop-toaster.flowdrop-toaster .flowdrop-toast-bar {
+	background: var(--fd-card) !important;
+	color: var(--fd-card-foreground) !important;
+	border: 1px solid var(--fd-border) !important;
+	border-radius: var(--fd-radius-lg) !important;
+	box-shadow: var(--fd-shadow-md) !important;
+	padding: var(--fd-space-2) var(--fd-space-3) !important;
+	max-width: 350px;
+	font-size: var(--fd-text-sm);
+	line-height: 1.3;
+	transition: background var(--fd-transition-fast), border-color var(--fd-transition-fast),
+		box-shadow var(--fd-transition-fast);
+}

package/dist/styles/tokens.css

@@ -0,0 +1,402 @@
+/**
+ * FlowDrop Design Tokens
+ * 
+ * A semantic-first token system with three tiers:
+ * 1. Internal palette (--_*) - Raw color values, not documented for users
+ * 2. Semantic tokens (--fd-*) - The public API for theming
+ * 3. Component tokens - Built using semantic tokens
+ * 
+ * Users customize FlowDrop by overriding --fd-* tokens.
+ * 
+ * @example Quick theming
+ * :root {
+ *   --fd-primary: #8b5cf6;
+ *   --fd-primary-hover: #7c3aed;
+ *   --fd-radius-md: 0.5rem;
+ * }
+ */
+
+:root {
+	/* =========================================================================
+	   INTERNAL PALETTE (Private - not documented for users)
+	   Prefix: --_ indicates internal/private tokens
+	   ========================================================================= */
+
+	/* Grays - Tinted scale with subtle blue undertone for modern feel, 9 steps */
+	--_gray-1: #fafafc;
+	--_gray-2: #f5f5f8;
+	--_gray-3: #eaeaef;
+	--_gray-4: #dcdce4;
+	--_gray-5: #a3a3ad;
+	--_gray-6: #71717b;
+	--_gray-7: #52525c;
+	--_gray-8: #27272b;
+	--_gray-9: #18181c;
+
+	/* Blue - Primary/interactive color */
+	--_blue-1: #eff6ff;
+	--_blue-2: #3b82f6;
+	--_blue-3: #1d4ed8;
+
+	/* Green - Success states */
+	--_green-1: #f0fdf4;
+	--_green-2: #22c55e;
+	--_green-3: #15803d;
+
+	/* Red - Error/destructive states */
+	--_red-1: #fef2f2;
+	--_red-2: #ef4444;
+	--_red-3: #b91c1c;
+
+	/* Amber - Warning states */
+	--_amber-1: #fffbeb;
+	--_amber-2: #f59e0b;
+	--_amber-3: #b45309;
+
+	/* Violet - Selection/accent */
+	--_violet-1: #f5f3ff;
+	--_violet-2: #8b5cf6;
+	--_violet-3: #6d28d9;
+
+	/* =========================================================================
+	   SEMANTIC TOKENS (Public API)
+	   These are the tokens users override for theming
+	   ========================================================================= */
+
+	/* ----- SURFACES (Backgrounds) ----- */
+	--fd-background: #ffffff;
+	--fd-foreground: var(--_gray-9);
+	--fd-muted: #f8f8fb;
+	--fd-muted-foreground: var(--_gray-6);
+	--fd-subtle: #f0f0f5;
+	--fd-card: #ffffff;
+	--fd-card-foreground: var(--_gray-9);
+
+	/* ----- HEADER (Distinct header styling) ----- */
+	--fd-header: #f5f7fa;
+	--fd-header-foreground: var(--_gray-8);
+	--fd-header-gradient: linear-gradient(180deg, #f8f9fc 0%, #f4f5f8 100%);
+
+	/* ----- SURFACE TINT (Subtle accent for surfaces) ----- */
+	--fd-surface-tint: rgba(99, 102, 241, 0.02);
+
+	/* ----- BORDERS ----- */
+	--fd-border: var(--_gray-4);
+	--fd-border-muted: var(--_gray-3);
+	--fd-border-strong: var(--_gray-5);
+	--fd-ring: var(--_blue-2);
+
+	/* ----- NODE BORDERS (Higher contrast for visibility when zoomed out) ----- */
+	--fd-node-border: var(--_gray-5);
+	--fd-node-border-hover: var(--_gray-6);
+
+	/* ----- PRIMARY (Interactive/Brand) ----- */
+	--fd-primary: var(--_blue-2);
+	--fd-primary-hover: var(--_blue-3);
+	--fd-primary-foreground: #ffffff;
+	--fd-primary-muted: var(--_blue-1);
+
+	/* ----- SECONDARY ----- */
+	--fd-secondary: var(--_gray-2);
+	--fd-secondary-hover: var(--_gray-3);
+	--fd-secondary-foreground: var(--_gray-9);
+
+	/* ----- ACCENT ----- */
+	--fd-accent: var(--_violet-2);
+	--fd-accent-hover: var(--_violet-3);
+	--fd-accent-foreground: #ffffff;
+	--fd-accent-muted: var(--_violet-1);
+
+	/* ----- STATUS: SUCCESS ----- */
+	--fd-success: var(--_green-2);
+	--fd-success-hover: var(--_green-3);
+	--fd-success-foreground: #ffffff;
+	--fd-success-muted: var(--_green-1);
+
+	/* ----- STATUS: WARNING ----- */
+	--fd-warning: var(--_amber-2);
+	--fd-warning-hover: var(--_amber-3);
+	--fd-warning-foreground: var(--_gray-9);
+	--fd-warning-muted: var(--_amber-1);
+
+	/* ----- STATUS: ERROR/DESTRUCTIVE ----- */
+	--fd-error: var(--_red-2);
+	--fd-error-hover: var(--_red-3);
+	--fd-error-foreground: #ffffff;
+	--fd-error-muted: var(--_red-1);
+
+	/* ----- STATUS: INFO ----- */
+	--fd-info: var(--_blue-2);
+	--fd-info-foreground: #ffffff;
+	--fd-info-muted: var(--_blue-1);
+
+	/* ----- SPACING SCALE ----- */
+	--fd-space-0: 0;
+	--fd-space-1: 0.25rem;
+	/* 4px */
+	--fd-space-2: 0.5rem;
+	/* 8px */
+	--fd-space-3: 0.75rem;
+	/* 12px */
+	--fd-space-4: 1rem;
+	/* 16px */
+	--fd-space-5: 1.25rem;
+	/* 20px */
+	--fd-space-6: 1.5rem;
+	/* 24px */
+	--fd-space-8: 2rem;
+	/* 32px */
+	--fd-space-10: 2.5rem;
+	/* 40px */
+	--fd-space-12: 3rem;
+	/* 48px */
+	--fd-space-16: 4rem;
+	/* 64px */
+
+	/* ----- BORDER RADIUS ----- */
+	--fd-radius-none: 0;
+	--fd-radius-sm: 0.25rem;
+	/* 4px */
+	--fd-radius-md: 0.375rem;
+	/* 6px */
+	--fd-radius-lg: 0.5rem;
+	/* 8px */
+	--fd-radius-xl: 0.75rem;
+	/* 12px */
+	--fd-radius-2xl: 1rem;
+	/* 16px */
+	--fd-radius-full: 9999px;
+
+	/* ----- SHADOWS (Refined layered shadows for modern depth) ----- */
+	--fd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06);
+	--fd-shadow-md: 0 4px 8px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04);
+	--fd-shadow-lg: 0 10px 20px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.04);
+	--fd-shadow-xl: 0 20px 30px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.06);
+
+	/* ----- FONT SIZES ----- */
+	--fd-text-xs: 0.75rem;
+	/* 12px */
+	--fd-text-sm: 0.875rem;
+	/* 14px */
+	--fd-text-base: 1rem;
+	/* 16px */
+	--fd-text-lg: 1.125rem;
+	/* 18px */
+	--fd-text-xl: 1.25rem;
+	/* 20px */
+	--fd-text-2xl: 1.5rem;
+	/* 24px */
+
+	/* ----- TRANSITIONS ----- */
+	--fd-transition-fast: 150ms ease;
+	--fd-transition-normal: 200ms ease;
+	--fd-transition-slow: 300ms ease;
+
+	/* =========================================================================
+	   COMPONENT TOKENS
+	   These provide fine-grained control while defaulting to semantic tokens
+	   ========================================================================= */
+
+	/* ----- LAYOUT ----- */
+	--fd-sidebar-width: 320px;
+	--fd-navbar-height: 60px;
+	--fd-toolbar-height: 40px;
+
+	/* ----- NODE COLORS (for workflow editor) ----- */
+	--fd-node-emerald: #10b981;
+	--fd-node-blue: #2563eb;
+	--fd-node-amber: #f59e0b;
+	--fd-node-orange: #f97316;
+	--fd-node-red: #ef4444;
+	--fd-node-pink: #ec4899;
+	--fd-node-indigo: #6366f1;
+	--fd-node-teal: #14b8a6;
+	--fd-node-cyan: #06b6d4;
+	--fd-node-lime: #84cc16;
+	--fd-node-slate: #64748b;
+	--fd-node-purple: #9333ea;
+
+	/** Icon on node squircle: dark in light theme, white in dark theme */
+	--fd-node-icon: var(--_gray-9);
+	/** Opacity of the icon squircle background (color-mix percentage). Light mode: 15% / 22% hover; dark mode uses higher values. */
+	--fd-node-icon-bg-opacity: 20%;
+	--fd-node-icon-bg-opacity-hover: 50%;
+
+	/* ----- EDGE TOKENS ----- */
+	--fd-edge-trigger: var(--_gray-9);
+	--fd-edge-trigger-hover: var(--_gray-9);
+	--fd-edge-trigger-selected: var(--_violet-2);
+	--fd-edge-trigger-width: 2px;
+	--fd-edge-trigger-width-hover: 3px;
+
+	--fd-edge-tool: var(--_amber-2);
+	--fd-edge-tool-hover: var(--_amber-3);
+	--fd-edge-tool-selected: var(--_violet-2);
+
+	--fd-edge-data: var(--_gray-5);
+	--fd-edge-data-hover: var(--_gray-6);
+	--fd-edge-data-selected: var(--_violet-2);
+
+	--fd-edge-loopback: var(--_gray-6);
+	--fd-edge-loopback-hover: var(--_gray-7);
+	--fd-edge-loopback-selected: var(--_violet-2);
+	--fd-edge-loopback-width: 1.5px;
+	--fd-edge-loopback-width-hover: 2.5px;
+	--fd-edge-loopback-dasharray: 5 5;
+	--fd-edge-loopback-opacity: 0.85;
+
+	/* ----- SCROLLBAR COLORS ----- */
+	--fd-scrollbar-thumb: var(--_gray-4);
+	--fd-scrollbar-thumb-hover: var(--_gray-5);
+	--fd-scrollbar-track: var(--_gray-2);
+
+	/* ----- BACKDROP/OVERLAY ----- */
+	--fd-backdrop: rgba(255, 255, 255, 0.8);
+	--fd-backdrop-blur: blur(8px);
+
+	/* ----- HANDLE (Node connection points) ----- */
+	/* White ring around handles for contrast against node backgrounds */
+	--fd-handle-border: #ffffff;
+	/* Outer size = connection/hit area (px); visual = visible circle (px) */
+	--fd-handle-size: 20px;
+	--fd-handle-visual-size: 12px;
+
+	/* ----- NODE LAYOUT (Dimensions and port alignment; multiples of 10 for grid) ----- */
+	--fd-node-grid-step: 10;
+	--fd-node-default-width: 290px;
+	--fd-node-header-height: 60px;
+	--fd-node-header-title-height: 40px;
+	--fd-node-header-desc-line: 20px;
+	--fd-node-header-gap: 10px;
+	--fd-node-port-row-height: 20px;
+	--fd-node-terminal-size: 80px;
+	--fd-node-square-size: 80px;
+	--fd-node-simple-height: 80px;
+	--fd-node-tool-min-height: 80px;
+
+	/* ----- LAYOUT BACKGROUND (Main content area gradient) ----- */
+	--fd-layout-background: linear-gradient(135deg, #f9fafb 0%, #e0e7ff 50%, #c7d2fe 100%);
+}
+
+/* =========================================================================
+   DARK MODE
+   Users enable with: <html data-theme="dark">
+   Designed for softer contrast and reduced eye strain
+   ========================================================================= */
+
+[data-theme="dark"] {
+	/* ----- SURFACES (Backgrounds) - Softer contrast ----- */
+	--fd-background: #1a1a1e;
+	--fd-foreground: var(--_gray-2);
+	--fd-muted: #242428;
+	--fd-muted-foreground: var(--_gray-4);
+	--fd-subtle: #2a2a30;
+	--fd-card: #222226;
+	--fd-card-foreground: var(--_gray-2);
+
+	/* ----- HEADER (Distinct header styling for dark mode) ----- */
+	--fd-header: #1f1f24;
+	--fd-header-foreground: var(--_gray-3);
+	--fd-header-gradient: linear-gradient(180deg, #222228 0%, #1e1e24 100%);
+
+	/* ----- SURFACE TINT (Subtle accent for surfaces) ----- */
+	--fd-surface-tint: rgba(99, 102, 241, 0.03);
+
+	/* ----- HANDLE (Node connection points) ----- */
+	/* White ring around handles provides contrast on dark node backgrounds */
+	--fd-handle-border: rgba(255, 255, 255, 0.9);
+
+	/* ----- BORDERS - Subtle in dark mode for softer contrast ----- */
+	--fd-border: #3a3a40;
+	--fd-border-muted: #2e2e33;
+	--fd-border-strong: #4a4a52;
+
+	/* ----- NODE BORDERS (Higher contrast for visibility when zoomed out) ----- */
+	--fd-node-border: #4a4a52;
+	--fd-node-border-hover: #5a5a62;
+
+	/* ----- NODE COLORS (port type labels/badges - lighter for readability on dark surfaces) ----- */
+	--fd-node-emerald: #34d399;
+	--fd-node-blue: #60a5fa;
+	--fd-node-amber: #fbbf24;
+	--fd-node-orange: #fb923c;
+	--fd-node-red: #f87171;
+	--fd-node-pink: #f472b6;
+	--fd-node-indigo: #818cf8;
+	--fd-node-teal: #2dd4bf;
+	--fd-node-cyan: #22d3ee;
+	--fd-node-lime: #a3e635;
+	--fd-node-slate: #94a3b8;
+	--fd-node-purple: #c084fc;
+
+	/** Icon on node squircle: white in dark theme */
+	--fd-node-icon: #ffffff;
+	/** Icon squircle background opacity: higher in dark mode for visibility on dark surfaces */
+	--fd-node-icon-bg-opacity: 50%;
+	--fd-node-icon-bg-opacity-hover: 80%;
+
+	/* ----- PRIMARY (Interactive/Brand) ----- */
+	--fd-primary: #60a5fa;
+	--fd-primary-hover: #93c5fd;
+	--fd-primary-foreground: var(--_gray-9);
+	--fd-primary-muted: rgba(59, 130, 246, 0.12);
+
+	/* ----- SECONDARY ----- */
+	--fd-secondary: #2d2d32;
+	--fd-secondary-hover: #3a3a3f;
+	--fd-secondary-foreground: var(--_gray-2);
+
+	/* ----- ACCENT ----- */
+	--fd-accent: #a78bfa;
+	--fd-accent-hover: #c4b5fd;
+	--fd-accent-foreground: var(--_gray-9);
+	--fd-accent-muted: rgba(139, 92, 246, 0.12);
+
+	/* ----- STATUS: SUCCESS ----- */
+	--fd-success: #4ade80;
+	--fd-success-hover: #86efac;
+	--fd-success-foreground: var(--_gray-9);
+	--fd-success-muted: rgba(34, 197, 94, 0.12);
+
+	/* ----- STATUS: WARNING ----- */
+	--fd-warning: #fbbf24;
+	--fd-warning-hover: #fcd34d;
+	--fd-warning-foreground: var(--_gray-9);
+	--fd-warning-muted: rgba(245, 158, 11, 0.12);
+
+	/* ----- STATUS: ERROR/DESTRUCTIVE ----- */
+	--fd-error: #f87171;
+	--fd-error-hover: #fca5a5;
+	--fd-error-foreground: var(--_gray-9);
+	--fd-error-muted: rgba(239, 68, 68, 0.12);
+
+	/* ----- STATUS: INFO ----- */
+	--fd-info: #60a5fa;
+	--fd-info-foreground: var(--_gray-9);
+	--fd-info-muted: rgba(59, 130, 246, 0.12);
+
+	/* ----- SHADOWS (softer for dark mode) ----- */
+	--fd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.2);
+	--fd-shadow-md: 0 4px 6px rgb(0 0 0 / 0.25);
+	--fd-shadow-lg: 0 10px 15px rgb(0 0 0 / 0.3);
+	--fd-shadow-xl: 0 20px 25px rgb(0 0 0 / 0.4);
+
+	/* ----- SCROLLBAR COLORS ----- */
+	--fd-scrollbar-thumb: var(--_gray-5);
+	--fd-scrollbar-thumb-hover: var(--_gray-4);
+	--fd-scrollbar-track: #242428;
+
+	/* ----- BACKDROP/OVERLAY ----- */
+	--fd-backdrop: rgba(26, 26, 30, 0.85);
+
+	/* ----- EDGE TOKENS (adjusted for dark mode visibility) ----- */
+	--fd-edge-trigger: var(--_gray-3);
+	--fd-edge-trigger-hover: var(--_gray-2);
+	--fd-edge-data: var(--_gray-5);
+	--fd-edge-data-hover: var(--_gray-4);
+	--fd-edge-loopback: var(--_gray-5);
+	--fd-edge-loopback-hover: var(--_gray-4);
+
+	/* ----- LAYOUT BACKGROUND (darker gradient for dark mode) ----- */
+	--fd-layout-background: linear-gradient(135deg, #141418 0%, #1a1a2e 50%, #16162a 100%);
+}

package/dist/types/index.d.ts

@@ -151,6 +151,80 @@ export type NodeType = BuiltinNodeType | (string & Record<never, never>);
  * HTTP method types for dynamic schema endpoints
  */
 export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH';
+/**
+ * Autocomplete configuration for form fields
+ *
+ * Defines how autocomplete suggestions are fetched from a callback URL.
+ * Supports both "on-type" (debounced search) and "on-focus" (load all options) modes.
+ *
+ * @example
+ * ```typescript
+ * const autocompleteConfig: AutocompleteConfig = {
+ *   url: "/api/users/search",
+ *   queryParam: "q",
+ *   minChars: 2,
+ *   debounceMs: 300,
+ *   fetchOnFocus: true,
+ *   labelField: "name",
+ *   valueField: "id",
+ *   allowFreeText: false
+ * };
+ * ```
+ */
+export interface AutocompleteConfig {
+    /**
+     * The callback URL to fetch autocomplete suggestions from.
+     * Can be relative (resolved against API base URL) or absolute.
+     */
+    url: string;
+    /**
+     * Query parameter name to pass the search term.
+     * @default "q"
+     */
+    queryParam?: string;
+    /**
+     * Minimum number of characters before fetching suggestions.
+     * Set to 0 to fetch immediately on focus (when fetchOnFocus is true).
+     * @default 0
+     */
+    minChars?: number;
+    /**
+     * Debounce delay in milliseconds before fetching suggestions.
+     * Prevents excessive API calls while typing.
+     * @default 300
+     */
+    debounceMs?: number;
+    /**
+     * Whether to fetch all options when the field is focused.
+     * When true, an empty query is sent on focus to load initial options.
+     * @default false
+     */
+    fetchOnFocus?: boolean;
+    /**
+     * The field name in the response objects to use as the display label.
+     * @default "label"
+     */
+    labelField?: string;
+    /**
+     * The field name in the response objects to use as the stored value.
+     * @default "value"
+     */
+    valueField?: string;
+    /**
+     * Whether to allow values that are not in the suggestions list.
+     * When true, users can enter and submit any text.
+     * When false, only values from suggestions are accepted.
+     * @default false
+     */
+    allowFreeText?: boolean;
+    /**
+     * Whether to allow multiple selections.
+     * When true, users can select multiple values displayed as tags.
+     * When false, only a single value can be selected.
+     * @default false
+     */
+    multiple?: boolean;
+}
 /**
  * Dynamic schema endpoint configuration
  * Used when the config schema needs to be fetched at runtime from a REST endpoint
@@ -807,3 +881,7 @@ export interface WorkflowEvents {
         error: string;
     };
 }
+export type { AuthProvider, StaticAuthConfig, CallbackAuthConfig } from './auth.js';
+export { StaticAuthProvider, CallbackAuthProvider, NoAuthProvider } from './auth.js';
+export type { FlowDropSettings, ThemeSettings, EditorSettings, UISettings, BehaviorSettings, ApiSettings, ThemePreference, ResolvedTheme, SettingsCategory, PartialSettings, SyncStatus, SettingsStoreState, SettingsChangeEvent, SettingsChangeCallback } from './settings.js';
+export { DEFAULT_SETTINGS, DEFAULT_THEME_SETTINGS, DEFAULT_EDITOR_SETTINGS, DEFAULT_UI_SETTINGS, DEFAULT_BEHAVIOR_SETTINGS, DEFAULT_API_SETTINGS, SETTINGS_CATEGORIES, SETTINGS_CATEGORY_LABELS, SETTINGS_CATEGORY_ICONS, SETTINGS_STORAGE_KEY } from './settings.js';

package/dist/types/index.js

@@ -18,3 +18,5 @@ export function dynamicPortToNodePort(port, portType) {
         description: port.description
     };
 }
+export { StaticAuthProvider, CallbackAuthProvider, NoAuthProvider } from './auth.js';
+export { DEFAULT_SETTINGS, DEFAULT_THEME_SETTINGS, DEFAULT_EDITOR_SETTINGS, DEFAULT_UI_SETTINGS, DEFAULT_BEHAVIOR_SETTINGS, DEFAULT_API_SETTINGS, SETTINGS_CATEGORIES, SETTINGS_CATEGORY_LABELS, SETTINGS_CATEGORY_ICONS, SETTINGS_STORAGE_KEY } from './settings.js';

package/dist/types/playground.d.ts

@@ -219,6 +219,18 @@ export interface PlaygroundConfig {
      * Note: Only runs once per session - subsequent runs require clicking the Run button.
      */
     autoRun?: boolean;
+    /**
+     * Whether to show the sidebar with session list (default: true)
+     * When false, the sidebar is hidden, creating a minimal chat widget experience.
+     * Use with initialSessionId to load a pre-created session directly.
+     */
+    showSidebar?: boolean;
+    /**
+     * Whether to show the session header bar (default: true)
+     * When false, the header with session name and close button is hidden.
+     * Typically used together with showSidebar: false for minimal UI.
+     */
+    showSessionHeader?: boolean;
 }
 /**
  * Metadata field to control Run button state from backend.