@flowdrop/flowdrop 1.0.1 → 1.2.0

package/dist/skins/default.d.ts

@@ -0,0 +1,2 @@
+import type { FlowDropSkin } from "../types/skin";
+export declare const defaultSkin: FlowDropSkin;

package/dist/skins/default.js

@@ -0,0 +1 @@
+export const defaultSkin = { name: "default" };

package/dist/skins/index.d.ts

@@ -0,0 +1,13 @@
+import type { FlowDropSkin, FlowDropSkinName } from "../types/skin";
+import { defaultSkin } from "./default";
+import { slateSkin } from "./slate";
+/**
+ * Resolve a skin prop to a complete FlowDropSkin object.
+ *
+ * When an object with inline tokens is provided alongside a named base skin,
+ * the inline tokens are merged on top of the named skin's tokens:
+ *   resolveSkin({ name: 'minimal', tokens: { primary: '#e11d48' } })
+ *   → minimal skin tokens + { primary: '#e11d48' }
+ */
+export declare function resolveSkin(skin: FlowDropSkin | FlowDropSkinName | undefined): FlowDropSkin;
+export { defaultSkin, slateSkin };

package/dist/skins/index.js

@@ -0,0 +1,30 @@
+import { defaultSkin } from "./default";
+import { slateSkin } from "./slate";
+const builtinSkins = {
+    default: defaultSkin,
+    slate: slateSkin,
+};
+/**
+ * Resolve a skin prop to a complete FlowDropSkin object.
+ *
+ * When an object with inline tokens is provided alongside a named base skin,
+ * the inline tokens are merged on top of the named skin's tokens:
+ *   resolveSkin({ name: 'minimal', tokens: { primary: '#e11d48' } })
+ *   → minimal skin tokens + { primary: '#e11d48' }
+ */
+export function resolveSkin(skin) {
+    if (!skin || skin === "default")
+        return defaultSkin;
+    if (typeof skin === "string")
+        return builtinSkins[skin] ?? defaultSkin;
+    // Object form — check for a named base to merge on top of
+    const baseName = skin.name;
+    if (baseName && baseName !== "default" && builtinSkins[baseName]) {
+        const base = builtinSkins[baseName];
+        return {
+            tokens: { ...(base.tokens ?? {}), ...(skin.tokens ?? {}) },
+        };
+    }
+    return skin;
+}
+export { defaultSkin, slateSkin };

package/dist/skins/slate.d.ts

@@ -0,0 +1,2 @@
+import type { FlowDropSkin } from "../types/skin";
+export declare const slateSkin: FlowDropSkin;

package/dist/skins/slate.js

@@ -0,0 +1,78 @@
+export const slateSkin = {
+    tokens: {
+        // --- Display / structural tokens (apply in both light and dark) ---
+        // Node icon: hide squircle, show circle dot
+        "node-icon-display": "none",
+        "node-circle-display": "flex",
+        // Sidebar: hide search + header, hide cards, show flat list
+        "sidebar-search-display": "none",
+        "sidebar-header-display": "none",
+        "sidebar-card-display": "none",
+        "sidebar-flat-display": "block",
+        // Navbar: split buttons instead of dropdown
+        "navbar-split-display": "flex",
+        "navbar-dropdown-display": "none",
+        // --- Light mode color palette (cool lavender-white) ---
+        background: "#f6f6ff",
+        foreground: "#13131a",
+        muted: "#eeeef8",
+        "muted-foreground": "#5a5a7a",
+        card: "#ffffff",
+        "card-foreground": "#13131a",
+        border: "#d0d0e8",
+        "border-muted": "#e4e4f4",
+        "border-strong": "#b0b0cc",
+        header: "#ededf8",
+        "layout-background": "linear-gradient(135deg, #f4f4ff 0%, #ece8ff 50%, #e6e0ff 100%)",
+        // Primary brand colors (website accent purple)
+        primary: "#6c63ff",
+        "primary-hover": "#5b52ef",
+        "primary-foreground": "#ffffff",
+        "primary-muted": "rgba(108, 99, 255, 0.1)",
+        // Scrollbar
+        "scrollbar-thumb": "#d0d0e8",
+        "scrollbar-track": "#f0f0f8",
+        // Backdrop
+        backdrop: "rgba(246, 246, 255, 0.9)",
+        // Node border and port ring
+        "node-border": "#9898b8",
+        "node-border-hover": "#7878a8",
+        "handle-border": "#ffffff",
+        // Category header: dim purple-grey
+        "sidebar-category-color": "#c0c0d8",
+        // Flat item text: dark for light bg readability
+        "sidebar-flat-item-color": "#4a4a6a",
+    },
+    darkTokens: {
+        // --- Dark mode color palette (deep navy / original slate) ---
+        background: "#13131a",
+        foreground: "#c0c0d8",
+        muted: "#1a1a28",
+        "muted-foreground": "#7a7a9a",
+        card: "#1a1a28",
+        "card-foreground": "#e8e8f0",
+        border: "#2a2a3a",
+        "border-muted": "#1e1e2a",
+        "border-strong": "#3a3a55",
+        header: "#1a1a25",
+        "layout-background": "#0a0a0f",
+        // Primary brand colors
+        primary: "#6c63ff",
+        "primary-hover": "#7c74ff",
+        "primary-foreground": "#ffffff",
+        "primary-muted": "rgba(108, 99, 255, 0.15)",
+        // Scrollbar
+        "scrollbar-thumb": "#2a2a3a",
+        "scrollbar-track": "#13131a",
+        // Backdrop
+        backdrop: "rgba(19, 19, 26, 0.9)",
+        // Node border and port ring: purplish-grey matching dark palette
+        "node-border": "#9898b8",
+        "node-border-hover": "#aeaed0",
+        "handle-border": "#9898b8",
+        // Category header: extremely dim
+        "sidebar-category-color": "#3a3a55",
+        // Flat item text: muted, not full-brightness white
+        "sidebar-flat-item-color": "#8888aa",
+    },
+};

package/dist/stores/categoriesStore.svelte.d.ts

@@ -4,7 +4,7 @@
  * Manages category definitions with merged defaults and API-provided overrides.
  * Exposes lookup helpers for icon, color, and label resolution.
  */
-import type { CategoryDefinition, NodeCategory } from '../types/index.js';
+import type { CategoryDefinition, NodeCategory } from "../types/index.js";
 /**
  * Get all category definitions, sorted by weight.
  */

package/dist/stores/categoriesStore.svelte.js

@@ -4,7 +4,7 @@
  * Manages category definitions with merged defaults and API-provided overrides.
  * Exposes lookup helpers for icon, color, and label resolution.
  */
-import { DEFAULT_CATEGORIES } from '../config/defaultCategories.js';
+import { DEFAULT_CATEGORIES } from "../config/defaultCategories.js";
 /**
  * Internal reactive state holding the category definitions.
  * Initialized with defaults, updated when API data is fetched.
@@ -39,7 +39,7 @@ export function initializeCategories(apiCategories) {
     for (const cat of apiCategories) {
         defaultMap.set(cat.name, {
             ...defaultMap.get(cat.name),
-            ...cat
+            ...cat,
         });
     }
     categoriesState = Array.from(defaultMap.values());
@@ -55,19 +55,19 @@ export function getCategoryLabel(category) {
     return category
         .split(/[\s_-]+/)
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(' ');
+        .join(" ");
 }
 /**
  * Get the icon for a category.
  */
 export function getCategoryIcon(category) {
-    return categoryMap.get(category)?.icon ?? 'mdi:folder';
+    return categoryMap.get(category)?.icon ?? "mdi:folder";
 }
 /**
  * Get the color token for a category.
  */
 export function getCategoryColor(category) {
-    return categoryMap.get(category)?.color ?? 'var(--fd-node-slate)';
+    return categoryMap.get(category)?.color ?? "var(--fd-node-slate)";
 }
 /**
  * Get the full category definition, or undefined if not found.

package/dist/stores/editorStateMachine.svelte.d.ts

@@ -7,8 +7,8 @@
  *
  * @module stores/editorStateMachine
  */
-export type EditorState = 'uninitialized' | 'loading' | 'idle' | 'dragging' | 'connecting' | 'dropping' | 'restoring' | 'deleting' | 'updating_node';
-export type EditorEvent = 'WORKFLOW_LOADED' | 'LOAD_COMPLETE' | 'START_DRAG' | 'STOP_DRAG' | 'START_CONNECT' | 'CONNECTION_MADE' | 'CONNECTION_CANCELLED' | 'START_DROP' | 'DROP_COMPLETE' | 'DROP_CANCELLED' | 'START_RESTORE' | 'RESTORE_COMPLETE' | 'EXTERNAL_STORE_CHANGE' | 'SYNC_COMPLETE' | 'START_DELETE' | 'DELETE_COMPLETE' | 'START_NODE_UPDATE' | 'UPDATE_COMPLETE' | 'WORKFLOW_SWITCHED' | 'WORKFLOW_CLEARED' | 'RESET';
+export type EditorState = "uninitialized" | "loading" | "idle" | "dragging" | "connecting" | "dropping" | "restoring" | "deleting" | "updating_node";
+export type EditorEvent = "WORKFLOW_LOADED" | "LOAD_COMPLETE" | "START_DRAG" | "STOP_DRAG" | "START_CONNECT" | "CONNECTION_MADE" | "CONNECTION_CANCELLED" | "START_DROP" | "DROP_COMPLETE" | "DROP_CANCELLED" | "START_RESTORE" | "RESTORE_COMPLETE" | "EXTERNAL_STORE_CHANGE" | "SYNC_COMPLETE" | "START_DELETE" | "DELETE_COMPLETE" | "START_NODE_UPDATE" | "UPDATE_COMPLETE" | "WORKFLOW_SWITCHED" | "WORKFLOW_CLEARED" | "RESET";
 /** What operations are permitted in the current state */
 export interface StatePermissions {
     /** Whether the editor can write to the global workflow store */

package/dist/stores/editorStateMachine.svelte.js

@@ -7,64 +7,96 @@
  *
  * @module stores/editorStateMachine
  */
-import { logger } from '../utils/logger.js';
+import { logger } from "../utils/logger.js";
 const transitions = {
     uninitialized: {
-        WORKFLOW_LOADED: 'loading'
+        WORKFLOW_LOADED: "loading",
     },
     loading: {
-        LOAD_COMPLETE: 'idle'
+        LOAD_COMPLETE: "idle",
     },
     idle: {
-        START_DRAG: 'dragging',
-        START_CONNECT: 'connecting',
-        START_DROP: 'dropping',
-        START_RESTORE: 'restoring',
-        EXTERNAL_STORE_CHANGE: 'loading',
-        START_DELETE: 'deleting',
-        START_NODE_UPDATE: 'updating_node',
-        WORKFLOW_SWITCHED: 'loading',
-        WORKFLOW_CLEARED: 'uninitialized'
+        START_DRAG: "dragging",
+        START_CONNECT: "connecting",
+        START_DROP: "dropping",
+        START_RESTORE: "restoring",
+        EXTERNAL_STORE_CHANGE: "loading",
+        START_DELETE: "deleting",
+        START_NODE_UPDATE: "updating_node",
+        WORKFLOW_SWITCHED: "loading",
+        WORKFLOW_CLEARED: "uninitialized",
     },
     dragging: {
-        STOP_DRAG: 'idle'
+        STOP_DRAG: "idle",
     },
     connecting: {
-        CONNECTION_MADE: 'idle',
-        CONNECTION_CANCELLED: 'idle'
+        CONNECTION_MADE: "idle",
+        CONNECTION_CANCELLED: "idle",
     },
     dropping: {
-        DROP_COMPLETE: 'idle',
-        DROP_CANCELLED: 'idle'
+        DROP_COMPLETE: "idle",
+        DROP_CANCELLED: "idle",
     },
     restoring: {
-        RESTORE_COMPLETE: 'idle'
+        RESTORE_COMPLETE: "idle",
     },
     deleting: {
-        DELETE_COMPLETE: 'idle'
+        DELETE_COMPLETE: "idle",
     },
     updating_node: {
-        UPDATE_COMPLETE: 'idle'
-    }
+        UPDATE_COMPLETE: "idle",
+    },
 };
 /** Global transitions valid from any state */
 const globalTransitions = {
-    RESET: 'uninitialized',
-    WORKFLOW_CLEARED: 'uninitialized'
+    RESET: "uninitialized",
+    WORKFLOW_CLEARED: "uninitialized",
 };
 // ---------------------------------------------------------------------------
 // Permissions table
 // ---------------------------------------------------------------------------
 const permissions = {
-    uninitialized: { canWriteToStore: false, canPushHistory: false, suppressEffect: false },
-    loading: { canWriteToStore: false, canPushHistory: false, suppressEffect: false },
+    uninitialized: {
+        canWriteToStore: false,
+        canPushHistory: false,
+        suppressEffect: false,
+    },
+    loading: {
+        canWriteToStore: false,
+        canPushHistory: false,
+        suppressEffect: false,
+    },
     idle: { canWriteToStore: true, canPushHistory: true, suppressEffect: false },
-    dragging: { canWriteToStore: true, canPushHistory: false, suppressEffect: true },
-    connecting: { canWriteToStore: true, canPushHistory: false, suppressEffect: true },
-    dropping: { canWriteToStore: true, canPushHistory: false, suppressEffect: true },
-    restoring: { canWriteToStore: true, canPushHistory: false, suppressEffect: true },
-    deleting: { canWriteToStore: true, canPushHistory: false, suppressEffect: true },
-    updating_node: { canWriteToStore: true, canPushHistory: false, suppressEffect: true }
+    dragging: {
+        canWriteToStore: true,
+        canPushHistory: false,
+        suppressEffect: true,
+    },
+    connecting: {
+        canWriteToStore: true,
+        canPushHistory: false,
+        suppressEffect: true,
+    },
+    dropping: {
+        canWriteToStore: true,
+        canPushHistory: false,
+        suppressEffect: true,
+    },
+    restoring: {
+        canWriteToStore: true,
+        canPushHistory: false,
+        suppressEffect: true,
+    },
+    deleting: {
+        canWriteToStore: true,
+        canPushHistory: false,
+        suppressEffect: true,
+    },
+    updating_node: {
+        canWriteToStore: true,
+        canPushHistory: false,
+        suppressEffect: true,
+    },
 };
 // ---------------------------------------------------------------------------
 // Factory
@@ -78,7 +110,7 @@ const permissions = {
  *
  * Each WorkflowEditor component instance should create its own machine.
  */
-export function createEditorStateMachine(initialState = 'uninitialized') {
+export function createEditorStateMachine(initialState = "uninitialized") {
     let _current = $state(initialState);
     let _permissions = $state(permissions[initialState]);
     const _listeners = new Set();
@@ -127,6 +159,6 @@ export function createEditorStateMachine(initialState = 'uninitialized') {
         },
         send,
         canSend,
-        onTransition
+        onTransition,
     };
 }

package/dist/stores/historyStore.svelte.d.ts

@@ -6,8 +6,8 @@
  *
  * @module stores/historyStore
  */
-import { type HistoryState, type PushOptions } from '../services/historyService.js';
-import type { Workflow } from '../types/index.js';
+import { type HistoryState, type PushOptions } from "../services/historyService.js";
+import type { Workflow } from "../types/index.js";
 /**
  * Clean up the historyService subscription created at module initialisation.
  * Call this when tearing down the history store (e.g., in tests or on app
@@ -132,5 +132,5 @@ export declare const historyActions: {
      */
     getState: () => HistoryState;
 };
-export type { HistoryEntry, HistoryState, PushOptions } from '../services/historyService.js';
-export { HistoryService, historyService } from '../services/historyService.js';
+export type { HistoryEntry, HistoryState, PushOptions, } from "../services/historyService.js";
+export { HistoryService, historyService } from "../services/historyService.js";

package/dist/stores/historyStore.svelte.js

@@ -6,7 +6,7 @@
  *
  * @module stores/historyStore
  */
-import { historyService } from '../services/historyService.js';
+import { historyService, } from "../services/historyService.js";
 // =========================================================================
 // Reactive State (Runes)
 // =========================================================================
@@ -18,7 +18,7 @@ let historyState = $state({
     canRedo: false,
     currentIndex: 0,
     historyLength: 0,
-    isInTransaction: false
+    isInTransaction: false,
 });
 // Subscribe to history service changes and update the rune state.
 // The unsubscribe function is stored so it can be called via
@@ -202,6 +202,6 @@ export const historyActions = {
      */
     getState: () => {
         return historyState;
-    }
+    },
 };
-export { HistoryService, historyService } from '../services/historyService.js';
+export { HistoryService, historyService } from "../services/historyService.js";

package/dist/stores/interruptStore.svelte.d.ts

@@ -6,9 +6,9 @@
  *
  * @module stores/interruptStore
  */
-import { SvelteMap } from 'svelte/reactivity';
-import type { Interrupt } from '../types/interrupt.js';
-import { type InterruptState, type TransitionResult } from '../types/interruptState.js';
+import { SvelteMap } from "svelte/reactivity";
+import type { Interrupt } from "../types/interrupt.js";
+import { type InterruptState, type TransitionResult } from "../types/interruptState.js";
 /**
  * Extended interrupt with state machine
  */

package/dist/stores/interruptStore.svelte.js

@@ -6,9 +6,9 @@
  *
  * @module stores/interruptStore
  */
-import { SvelteMap } from 'svelte/reactivity';
-import { initialState, transition, isTerminalState, isSubmitting as checkIsSubmitting, hasError as checkHasError, getErrorMessage, getResolvedValue, toLegacyStatus } from '../types/interruptState.js';
-import { logger } from '../utils/logger.js';
+import { SvelteMap } from "svelte/reactivity";
+import { initialState, transition, isTerminalState, isSubmitting as checkIsSubmitting, hasError as checkHasError, getErrorMessage, getResolvedValue, toLegacyStatus, } from "../types/interruptState.js";
+import { logger } from "../utils/logger.js";
 // =========================================================================
 // Core Reactive State
 // =========================================================================
@@ -64,7 +64,7 @@ export function getPendingInterruptCount() {
 export function getResolvedInterrupts() {
     const resolved = [];
     interrupts.forEach((interrupt) => {
-        if (interrupt.machineState.status === 'resolved') {
+        if (interrupt.machineState.status === "resolved") {
             resolved.push(interrupt);
         }
     });
@@ -97,7 +97,7 @@ function applyAction(interruptId, action) {
         return {
             state: initialState,
             valid: false,
-            error: `Interrupt not found: ${interruptId}`
+            error: `Interrupt not found: ${interruptId}`,
         };
     }
     const result = transition(interrupt.machineState, action);
@@ -110,11 +110,11 @@ function applyAction(interruptId, action) {
                 machineState: result.state,
                 status: toLegacyStatus(result.state),
                 responseValue: getResolvedValue(result.state) ?? current.responseValue,
-                resolvedAt: result.state.status === 'resolved'
+                resolvedAt: result.state.status === "resolved"
                     ? result.state.resolvedAt
-                    : result.state.status === 'cancelled'
+                    : result.state.status === "cancelled"
                         ? result.state.cancelledAt
-                        : current.resolvedAt
+                        : current.resolvedAt,
             };
             interrupts.set(interruptId, newInterrupt);
         }
@@ -142,7 +142,7 @@ export const interruptActions = {
         const machineState = existing?.machineState ?? initialState;
         const interruptWithState = {
             ...interrupt,
-            machineState
+            machineState,
         };
         interrupts.set(interrupt.id, interruptWithState);
     },
@@ -159,7 +159,7 @@ export const interruptActions = {
             const machineState = existing?.machineState ?? initialState;
             const interruptWithState = {
                 ...interrupt,
-                machineState
+                machineState,
             };
             interrupts.set(interrupt.id, interruptWithState);
         });
@@ -172,7 +172,7 @@ export const interruptActions = {
      * @returns Transition result
      */
     startSubmit: (interruptId, value) => {
-        return applyAction(interruptId, { type: 'SUBMIT', value });
+        return applyAction(interruptId, { type: "SUBMIT", value });
     },
     /**
      * Start cancelling an interrupt (user clicked cancel)
@@ -181,7 +181,7 @@ export const interruptActions = {
      * @returns Transition result
      */
     startCancel: (interruptId) => {
-        return applyAction(interruptId, { type: 'CANCEL' });
+        return applyAction(interruptId, { type: "CANCEL" });
     },
     /**
      * Mark submission as successful
@@ -190,7 +190,7 @@ export const interruptActions = {
      * @returns Transition result
      */
     submitSuccess: (interruptId) => {
-        return applyAction(interruptId, { type: 'SUCCESS' });
+        return applyAction(interruptId, { type: "SUCCESS" });
     },
     /**
      * Mark submission as failed
@@ -200,7 +200,7 @@ export const interruptActions = {
      * @returns Transition result
      */
     submitFailure: (interruptId, error) => {
-        return applyAction(interruptId, { type: 'FAILURE', error });
+        return applyAction(interruptId, { type: "FAILURE", error });
     },
     /**
      * Retry a failed submission
@@ -209,7 +209,7 @@ export const interruptActions = {
      * @returns Transition result
      */
     retry: (interruptId) => {
-        return applyAction(interruptId, { type: 'RETRY' });
+        return applyAction(interruptId, { type: "RETRY" });
     },
     /**
      * Reset an interrupt to idle state
@@ -218,7 +218,7 @@ export const interruptActions = {
      * @returns Transition result
      */
     resetInterrupt: (interruptId) => {
-        return applyAction(interruptId, { type: 'RESET' });
+        return applyAction(interruptId, { type: "RESET" });
     },
     /**
      * Mark an interrupt as resolved with the user's response
@@ -227,9 +227,9 @@ export const interruptActions = {
      * @param value - The resolved value
      */
     resolveInterrupt: (interruptId, value) => {
-        const submitResult = applyAction(interruptId, { type: 'SUBMIT', value });
+        const submitResult = applyAction(interruptId, { type: "SUBMIT", value });
         if (submitResult.valid) {
-            applyAction(interruptId, { type: 'SUCCESS' });
+            applyAction(interruptId, { type: "SUCCESS" });
         }
     },
     /**
@@ -238,9 +238,9 @@ export const interruptActions = {
      * @param interruptId - The interrupt ID
      */
     cancelInterrupt: (interruptId) => {
-        const cancelResult = applyAction(interruptId, { type: 'CANCEL' });
+        const cancelResult = applyAction(interruptId, { type: "CANCEL" });
         if (cancelResult.valid) {
-            applyAction(interruptId, { type: 'SUCCESS' });
+            applyAction(interruptId, { type: "SUCCESS" });
         }
     },
     /**
@@ -276,7 +276,7 @@ export const interruptActions = {
      */
     reset: () => {
         interrupts.clear();
-    }
+    },
 };
 // =========================================================================
 // Utilities

package/dist/stores/playgroundStore.svelte.d.ts

@@ -6,8 +6,8 @@
  *
  * @module stores/playgroundStore
  */
-import type { PlaygroundSession, PlaygroundMessage, PlaygroundInputField, PlaygroundSessionStatus, PlaygroundMessagesApiResponse } from '../types/playground.js';
-import type { Workflow } from '../types/index.js';
+import type { PlaygroundSession, PlaygroundMessage, PlaygroundInputField, PlaygroundSessionStatus, PlaygroundMessagesApiResponse } from "../types/playground.js";
+import type { Workflow } from "../types/index.js";
 /**
  * Get the current session
  */