@flowdrop/flowdrop 1.1.0 → 1.2.0

package/dist/components/App.svelte

@@ -137,7 +137,7 @@
     resolveTheme(themeProp ?? getUiSettings().theme),
   );
   let themeConfig = $derived(resolvedTheme.config);
-  
+
   // Inject skin tokens as a style tag so light/dark palettes can coexist.
   // tokens     → :root { ... }              (light mode / base)
   // darkTokens → [data-theme='dark'] { ... } (dark mode override)
@@ -180,6 +180,7 @@
   });
 
   let nodes = $state<NodeMetadata[]>([]);
+  let nodeTypesLoading = $state<boolean>(true);
   // Remove workflow prop - use global store directly
   // let workflow = $derived($workflowStore || initialWorkflow);
   let error = $state<string | null>(null);
@@ -259,6 +260,7 @@
         (n) => !existingIds.has(n.id),
       );
       nodes = [...propNodes, ...uniqueFormatNodes];
+      nodeTypesLoading = false;
       return;
     }
 
@@ -285,6 +287,7 @@
       );
       nodes = [...fetchedNodes, ...uniqueFormatNodes];
       error = null;
+      nodeTypesLoading = false;
 
       // Dismiss loading toast
       if (loadingToast) {
@@ -307,6 +310,7 @@
         if (suppressToast) {
           // Parent handled the error, keep nodes empty
           nodes = [];
+          nodeTypesLoading = false;
           return;
         }
       }
@@ -319,6 +323,7 @@
 
       // Set empty nodes array instead of fallback data
       nodes = [];
+      nodeTypesLoading = false;
     }
   }
 
@@ -765,6 +770,7 @@
     {#snippet leftSidebar()}
       <NodeSidebar
         {nodes}
+        loading={nodeTypesLoading}
         activeFormat={getWorkflowFormat()}
         categoriesDefaultOpen={themeConfig?.sidebar?.categoriesDefaultOpen ??
           false}
@@ -960,6 +966,9 @@
     <div
       class="flowdrop-editor-main"
       class:pipeline-view={!!pipelineId}
+      style="--fd-canvas-left-offset: {!disableSidebar
+        ? leftSidebarWidth + 'px'
+        : '0px'}"
       onclick={handleCanvasClick}
       onkeydown={(e) => e.key === "Escape" && closeConfigSidebar()}
       role="region"

package/dist/components/CanvasBanner.svelte

@@ -35,6 +35,12 @@
     pointer-events: none;
   }
 
+  @media (max-width: 768px) {
+    .flowdrop-canvas-banner {
+      left: var(--fd-canvas-left-offset, 0px);
+    }
+  }
+
   .flowdrop-canvas-banner__icon {
     font-size: 3.75rem;
     margin-bottom: 1rem;

package/dist/components/NodeSidebar.svelte

@@ -23,6 +23,8 @@
 
   interface Props {
     nodes: NodeMetadata[];
+    /** Whether node types are still being fetched. Default: false */
+    loading?: boolean;
     selectedCategory?: NodeCategory;
     activeFormat?: WorkflowFormat;
     /** Whether category <details> accordions start open (card mode). Default: false */
@@ -268,14 +270,17 @@
         <!-- No node types available -->
         <div class="flowdrop-hero">
           <div class="flowdrop-hero__content">
-            <div class="flowdrop-hero__icon">📦</div>
-            <h3 class="flowdrop-hero__title">No node types available</h3>
-            <p class="flowdrop-hero__description">
-              Node type definitions will appear here
-            </p>
-            <div class="flowdrop-mb--4">
-              <LoadingSpinner size="md" text="Loading from server..." />
-            </div>
+            {#if props.loading}
+              <div class="flowdrop-mb--4">
+                <LoadingSpinner size="md" text="Loading from server..." />
+              </div>
+            {:else}
+              <div class="flowdrop-hero__icon">📦</div>
+              <h3 class="flowdrop-hero__title">No node types available</h3>
+              <p class="flowdrop-hero__description">
+                Node type definitions will appear here
+              </p>
+            {/if}
           </div>
         </div>
       {:else if searchInput.trim()}

package/dist/components/NodeSidebar.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { NodeMetadata, NodeCategory, WorkflowFormat } from "../types/index.js";
 interface Props {
     nodes: NodeMetadata[];
+    /** Whether node types are still being fetched. Default: false */
+    loading?: boolean;
     selectedCategory?: NodeCategory;
     activeFormat?: WorkflowFormat;
     /** Whether category <details> accordions start open (card mode). Default: false */

package/dist/schemas/v1/workflow.schema.json

@@ -38,7 +38,13 @@
       "$ref": "#/$defs/WorkflowMetadata"
     }
   },
-  "required": ["id", "name", "nodes", "edges", "metadata"],
+  "required": [
+    "id",
+    "name",
+    "nodes",
+    "edges",
+    "metadata"
+  ],
   "$defs": {
     "AutocompleteConfig": {
       "type": "object",
@@ -89,7 +95,9 @@
           "description": "Whether to allow multiple selections.\nWhen true, users can select multiple values displayed as tags.\n"
         }
       },
-      "required": ["url"]
+      "required": [
+        "url"
+      ]
     },
     "Branch": {
       "type": "object",
@@ -117,7 +125,10 @@
           "description": "Whether this is the default/fallback branch"
         }
       },
-      "required": ["name", "label"]
+      "required": [
+        "name",
+        "label"
+      ]
     },
     "ConfigProperty": {
       "type": "object",
@@ -125,7 +136,14 @@
       "properties": {
         "type": {
           "type": "string",
-          "enum": ["string", "number", "boolean", "array", "object", "integer"],
+          "enum": [
+            "string",
+            "number",
+            "boolean",
+            "array",
+            "object",
+            "integer"
+          ],
           "description": "JSON Schema type"
         },
         "title": {
@@ -251,14 +269,18 @@
           ]
         }
       },
-      "required": ["type"]
+      "required": [
+        "type"
+      ]
     },
     "ConfigSchema": {
       "type": "object",
       "properties": {
         "type": {
           "type": "string",
-          "enum": ["object"]
+          "enum": [
+            "object"
+          ]
         },
         "properties": {
           "type": "object",
@@ -279,7 +301,10 @@
           "default": false
         }
       },
-      "required": ["type", "properties"]
+      "required": [
+        "type",
+        "properties"
+      ]
     },
     "DynamicPort": {
       "type": "object",
@@ -313,7 +338,11 @@
           "description": "Whether this port is required for execution"
         }
       },
-      "required": ["name", "label", "dataType"]
+      "required": [
+        "name",
+        "label",
+        "dataType"
+      ]
     },
     "NodeCategory": {
       "type": "string",
@@ -404,7 +433,11 @@
           "description": "Whether the node is currently being executed"
         }
       },
-      "required": ["status", "executionCount", "isExecuting"]
+      "required": [
+        "status",
+        "executionCount",
+        "isExecuting"
+      ]
     },
     "NodeExecutionStatus": {
       "type": "string",
@@ -548,7 +581,11 @@
         },
         "type": {
           "type": "string",
-          "enum": ["input", "output", "metadata"],
+          "enum": [
+            "input",
+            "output",
+            "metadata"
+          ],
           "description": "Port direction (input receives data, output sends data)"
         },
         "dataType": {
@@ -577,7 +614,12 @@
           ]
         }
       },
-      "required": ["id", "name", "type", "dataType"]
+      "required": [
+        "id",
+        "name",
+        "type",
+        "dataType"
+      ]
     },
     "NodeType": {
       "type": "string",
@@ -635,7 +677,9 @@
           "description": "Optional description for this option"
         }
       },
-      "required": ["const"]
+      "required": [
+        "const"
+      ]
     },
     "PortDataSchema": {
       "type": "object",
@@ -643,7 +687,14 @@
       "properties": {
         "type": {
           "type": "string",
-          "enum": ["object", "array", "string", "number", "integer", "boolean"],
+          "enum": [
+            "object",
+            "array",
+            "string",
+            "number",
+            "integer",
+            "boolean"
+          ],
           "description": "The JSON Schema type. Use `object` for nested properties,\n`array` for lists with `items` schema.\n"
         },
         "title": {
@@ -692,7 +743,10 @@
           "description": "Y coordinate"
         }
       },
-      "required": ["x", "y"]
+      "required": [
+        "x",
+        "y"
+      ]
     },
     "TemplateVariable": {
       "type": "object",
@@ -750,7 +804,10 @@
           "description": "Source node ID"
         }
       },
-      "required": ["name", "type"]
+      "required": [
+        "name",
+        "type"
+      ]
     },
     "TemplateVariablesConfig": {
       "type": "object",
@@ -797,7 +854,9 @@
           "description": "Map of available variables keyed by variable name"
         }
       },
-      "required": ["variables"]
+      "required": [
+        "variables"
+      ]
     },
     "WorkflowEdge": {
       "type": "object",
@@ -828,7 +887,12 @@
         "type": {
           "type": "string",
           "description": "Connection line type",
-          "enum": ["default", "straight", "step", "smoothstep"]
+          "enum": [
+            "default",
+            "straight",
+            "step",
+            "smoothstep"
+          ]
         },
         "selectable": {
           "type": "boolean",
@@ -855,7 +919,11 @@
               "properties": {
                 "edgeType": {
                   "type": "string",
-                  "enum": ["trigger", "tool", "data"],
+                  "enum": [
+                    "trigger",
+                    "tool",
+                    "data"
+                  ],
                   "description": "Edge type for visual styling"
                 },
                 "sourcePortDataType": {
@@ -879,7 +947,11 @@
           }
         }
       },
-      "required": ["id", "source", "target"]
+      "required": [
+        "id",
+        "source",
+        "target"
+      ]
     },
     "WorkflowMetadata": {
       "type": "object",
@@ -923,7 +995,11 @@
           "default": "flowdrop"
         }
       },
-      "required": ["version", "createdAt", "updatedAt"]
+      "required": [
+        "version",
+        "createdAt",
+        "updatedAt"
+      ]
     },
     "WorkflowNode": {
       "type": "object",
@@ -984,10 +1060,19 @@
               ]
             }
           },
-          "required": ["label", "config", "metadata"]
+          "required": [
+            "label",
+            "config",
+            "metadata"
+          ]
         }
       },
-      "required": ["id", "type", "position", "data"]
+      "required": [
+        "id",
+        "type",
+        "position",
+        "data"
+      ]
     }
   }
 }

package/dist/svelte-app.d.ts

@@ -10,6 +10,7 @@ import type { Workflow, NodeMetadata, PortConfig, CategoryDefinition } from "./t
 import type { EndpointConfig } from "./config/endpoints.js";
 import type { AuthProvider } from "./types/auth.js";
 import type { FlowDropEventHandlers, FlowDropFeatures } from "./types/events.js";
+import type { FlowDropTheme, FlowDropThemeName } from "./types/theme.js";
 import type { WorkflowFormatAdapter } from "./registry/workflowFormatRegistry.js";
 import "./registry/builtinFormats.js";
 import type { PartialSettings } from "./types/settings.js";
@@ -71,6 +72,8 @@ export interface FlowDropMountOptions {
     draftStorageKey?: string;
     /** Custom workflow format adapters to register */
     formatAdapters?: WorkflowFormatAdapter[];
+    /** Visual theme — named built-in ('default' | 'minimal') or custom theme object */
+    theme?: FlowDropTheme | FlowDropThemeName;
 }
 /**
  * Return type for mounted FlowDrop app

package/dist/svelte-app.js

@@ -47,7 +47,7 @@ import { globalSaveWorkflow, globalExportWorkflow, } from "./services/globalSave
  * ```
  */
 export async function mountFlowDropApp(container, options = {}) {
-    const { workflow, nodes, endpointConfig, portConfig, categories, height = "100vh", width = "100%", showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, showSettings, authProvider, eventHandlers, features: userFeatures, settings: initialSettings, draftStorageKey: customDraftKey, formatAdapters, } = options;
+    const { workflow, nodes, endpointConfig, portConfig, categories, height = "100vh", width = "100%", showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, showSettings, authProvider, eventHandlers, features: userFeatures, settings: initialSettings, draftStorageKey: customDraftKey, formatAdapters, theme, } = options;
     // Register custom format adapters before mounting
     if (formatAdapters) {
         for (const adapter of formatAdapters) {
@@ -136,6 +136,7 @@ export async function mountFlowDropApp(container, options = {}) {
             authProvider,
             eventHandlers,
             features,
+            theme,
         },
     });
     // Set up draft auto-save manager

package/package.json

@@ -3,7 +3,7 @@
   "description": "A drop-in visual workflow editor for any web application. You own the backend. You own the data. You own the orchestration.",
   "license": "MIT",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "Shibin Das (D34dMan)",
   "bugs": {
     "url": "https://github.com/flowdrop-io/flowdrop/issues"