@flowdrop/flowdrop 1.2.0 → 1.2.1

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>
@@ -47,6 +47,7 @@
     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

@@ -275,7 +275,13 @@
                 <LoadingSpinner size="md" text="Loading from server..." />
               </div>
             {:else}
-              <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">
+                  <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
@@ -292,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>
@@ -477,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/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/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/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.2.0",
+  "version": "1.2.1",
   "author": "Shibin Das (D34dMan)",
   "bugs": {
     "url": "https://github.com/flowdrop-io/flowdrop/issues"