@flowdrop/flowdrop 1.1.0 → 1.2.1

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

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import Icon from "@iconify/svelte";
+  import type { Snippet } from "svelte";
   let {
     title,
     description,
-    iconName,
+    icon,
   }: {
     title: string;
     description: string;
-    iconName?: string;
+    icon?: Snippet;
   } = $props();
 </script>
 
@@ -15,8 +15,8 @@
   <div class="flowdrop-card">
     <div class="flowdrop-card__body flowdrop-text--center">
       <div class="flowdrop-canvas-banner__icon">
-        {#if iconName}
-          <Icon icon={iconName} class="flowdrop-canvas-banner__icon-svg" />
+        {#if icon}
+          {@render icon()}
         {/if}
       </div>
       <h3 class="flowdrop-canvas-banner__title">{title}</h3>
@@ -35,12 +35,19 @@
     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;
     display: flex;
     justify-content: center;
     align-items: center;
+    color: var(--fd-muted-foreground);
   }
 
   .flowdrop-canvas-banner__title {

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

@@ -1,7 +1,8 @@
+import type { Snippet } from "svelte";
 type $$ComponentProps = {
     title: string;
     description: string;
-    iconName?: string;
+    icon?: Snippet;
 };
 declare const CanvasBanner: import("svelte").Component<$$ComponentProps, {}, "">;
 type CanvasBanner = ReturnType<typeof CanvasBanner>;

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,23 @@
         <!-- 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">
+                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
+                  <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
+                  <line x1="12" y1="22.08" x2="12" y2="12"/>
+                </svg>
+              </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()}
@@ -287,12 +298,17 @@
           {#if filteredNodes.length === 0}
             <div class="flowdrop-hero">
               <div class="flowdrop-hero__content">
-                <div class="flowdrop-hero__icon">🔍</div>
+                <div class="flowdrop-hero__icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="11" cy="11" r="8"/>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+                  </svg>
+                </div>
                 <h3 class="flowdrop-hero__title">No components found</h3>
                 <p class="flowdrop-hero__description">
                   Try adjusting your search
                 </p>
-                {#if props.nodes?.length === 0}
+                {#if props.loading}
                   <div class="flowdrop-mb--4">
                     <LoadingSpinner size="sm" text="Loading components..." />
                   </div>
@@ -472,7 +488,7 @@
     <div class="flowdrop-sidebar__footer">
       <div class="flowdrop-flex flowdrop-gap--4">
         <div class="flowdrop-flex flowdrop-gap--4">
-          {#if props.nodes?.length === 0}
+          {#if props.loading && props.nodes?.length === 0}
             <span class="flowdrop-text--xs flowdrop-text--gray"
               >Loading components...</span
             >

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/components/WorkflowEditor.svelte

@@ -857,8 +857,17 @@
             <CanvasBanner
               title="Drag components here to start building"
               description="Use the sidebar to add components to your workflow"
-              iconName="mdi:graph"
-            />
+            >
+              {#snippet icon()}
+                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="18" cy="5" r="3"/>
+                  <circle cx="6" cy="12" r="3"/>
+                  <circle cx="18" cy="19" r="3"/>
+                  <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
+                  <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
+                </svg>
+              {/snippet}
+            </CanvasBanner>
           {/if}
         </FlowDropZone>
       </div>

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/styles/base.css

@@ -333,6 +333,7 @@
 .flowdrop-hero__icon {
   font-size: 3.75rem;
   margin-bottom: var(--fd-space-xl);
+  color: var(--fd-muted-foreground);
 }
 
 .flowdrop-hero__title {

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.1",
   "author": "Shibin Das (D34dMan)",
   "bugs": {
     "url": "https://github.com/flowdrop-io/flowdrop/issues"