@flowdrop/flowdrop 1.3.0 → 1.4.0

package/dist/components/App.svelte

@@ -9,6 +9,7 @@
   import MainLayout from "./layouts/MainLayout.svelte";
   import WorkflowEditor from "./WorkflowEditor.svelte";
   import NodeSidebar from "./NodeSidebar.svelte";
+  import Icon from "@iconify/svelte";
   import ConfigForm from "./ConfigForm.svelte";
   import ConfigPanel from "./ConfigPanel.svelte";
   import Navbar from "./Navbar.svelte";
@@ -46,12 +47,16 @@
   } from "../services/globalSave.js";
   import { apiToasts, dismissToast } from "../services/toastService.js";
   import { initAutoSave } from "../services/autoSaveService.js";
-  import { getUiSettings } from "../stores/settingsStore.svelte.js";
+  import {
+    getUiSettings,
+    updateSettings,
+  } from "../stores/settingsStore.svelte.js";
   import { initializePortCompatibility } from "../utils/connections.js";
   import { DEFAULT_PORT_CONFIG } from "../config/defaultPortConfig.js";
   import { workflowFormatRegistry } from "../registry/workflowFormatRegistry.js";
   import { logger } from "../utils/logger.js";
   import { validateWorkflowData } from "../utils/validation.js";
+  import type { SettingsCategory } from "../types/settings.js";
 
   /**
    * Configuration props for runtime customization
@@ -104,6 +109,12 @@
     features?: FlowDropFeatures;
     /** Visual theme — named built-in ('default' | 'minimal') or custom theme object */
     theme?: FlowDropTheme | FlowDropThemeName;
+    /** Which settings tabs to show in the modal */
+    settingsCategories?: SettingsCategory[];
+    /** Show the "Sync to Cloud" button in the settings modal */
+    showSettingsSyncButton?: boolean;
+    /** Show the reset buttons in the settings modal */
+    showSettingsResetButton?: boolean;
   }
 
   let {
@@ -126,6 +137,9 @@
     eventHandlers,
     features: propFeatures,
     theme: themeProp,
+    settingsCategories,
+    showSettingsSyncButton,
+    showSettingsResetButton,
   }: Props = $props();
 
   // svelte-ignore state_referenced_locally — feature flags don't change at runtime
@@ -667,12 +681,22 @@
 
   /**
    * Calculate left sidebar width based on collapsed state
-   * When collapsed, use 48px; otherwise use user-configured width
+   * When collapsed, use 0; otherwise use user-configured width
    */
   const leftSidebarWidth = $derived(
-    getUiSettings().sidebarCollapsed ? 48 : getUiSettings().sidebarWidth,
+    getUiSettings().sidebarCollapsed ? 0 : getUiSettings().sidebarWidth,
   );
 
+  /** Whether the sidebar is collapsed */
+  const isSidebarCollapsed = $derived(getUiSettings().sidebarCollapsed);
+
+  /** Toggle sidebar collapsed state */
+  function toggleSidebar(): void {
+    updateSettings({
+      ui: { sidebarCollapsed: !getUiSettings().sidebarCollapsed },
+    });
+  }
+
   // File input reference for workflow import
   let fileInputRef = $state<HTMLInputElement | null>(null);
 </script>
@@ -705,8 +729,8 @@
     headerHeight={60}
     {leftSidebarWidth}
     rightSidebarWidth={400}
-    leftSidebarMinWidth={getUiSettings().sidebarCollapsed ? 48 : 280}
-    leftSidebarMaxWidth={getUiSettings().sidebarCollapsed ? 48 : 450}
+    leftSidebarMinWidth={getUiSettings().sidebarCollapsed ? 0 : 280}
+    leftSidebarMaxWidth={getUiSettings().sidebarCollapsed ? 0 : 450}
     rightSidebarMinWidth={320}
     rightSidebarMaxWidth={550}
     enableLeftSplitPane={false}
@@ -763,6 +787,9 @@
             ]}
         showStatus={true}
         {showSettings}
+        {settingsCategories}
+        {showSettingsSyncButton}
+        {showSettingsResetButton}
       />
     {/snippet}
 
@@ -974,6 +1001,20 @@
       role="region"
       aria-label="Workflow canvas"
     >
+      <!-- Floating sidebar toggle — always visible on the canvas top-left -->
+      {#if !disableSidebar}
+        <button
+          class="flowdrop-sidebar-fab"
+          onclick={toggleSidebar}
+          aria-label={isSidebarCollapsed
+            ? "Expand sidebar"
+            : "Collapse sidebar"}
+          title={isSidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+        >
+          <Icon icon={isSidebarCollapsed ? "mdi:menu" : "mdi:menu-open"} />
+        </button>
+      {/if}
+
       <WorkflowEditor
         bind:this={workflowEditorRef}
         {nodes}
@@ -1098,6 +1139,40 @@
     font-weight: 500;
   }
 
+  /* Floating sidebar toggle button */
+  .flowdrop-sidebar-fab {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-md);
+    background-color: var(--fd-background);
+    color: var(--fd-muted-foreground);
+    cursor: pointer;
+    box-shadow: var(--fd-shadow-md);
+    transition:
+      color var(--fd-transition-fast),
+      background-color var(--fd-transition-fast),
+      box-shadow var(--fd-transition-fast);
+  }
+
+  .flowdrop-sidebar-fab:hover {
+    color: var(--fd-foreground);
+    background-color: var(--fd-subtle);
+    box-shadow: var(--fd-shadow-lg);
+  }
+
+  .flowdrop-sidebar-fab:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--fd-ring);
+  }
+
   /* Main editor area */
   .flowdrop-editor-main {
     flex: 1;

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

@@ -3,6 +3,7 @@ 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 { SettingsCategory } from "../types/settings.js";
 /**
  * Configuration props for runtime customization
  */
@@ -51,6 +52,12 @@ interface Props {
     features?: FlowDropFeatures;
     /** Visual theme — named built-in ('default' | 'minimal') or custom theme object */
     theme?: FlowDropTheme | FlowDropThemeName;
+    /** Which settings tabs to show in the modal */
+    settingsCategories?: SettingsCategory[];
+    /** Show the "Sync to Cloud" button in the settings modal */
+    showSettingsSyncButton?: boolean;
+    /** Show the reset buttons in the settings modal */
+    showSettingsResetButton?: boolean;
 }
 declare const App: import("svelte").Component<Props, {}, "">;
 type App = ReturnType<typeof App>;

package/dist/components/CanvasBanner.stories.svelte

@@ -2,6 +2,7 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import CanvasBanner from "./CanvasBanner.svelte";
   import CanvasDecorator from "../stories/CanvasDecorator.svelte";
+  import Icon from "@iconify/svelte";
 
   const { Story } = defineMeta({
     title: "Display/CanvasBanner",
@@ -17,8 +18,11 @@
     <CanvasBanner
       title="Empty Canvas"
       description="Drag nodes from the sidebar to get started"
-      iconName="heroicons:squares-plus"
-    />
+    >
+      {#snippet icon()}
+        <Icon icon="heroicons:squares-plus" />
+      {/snippet}
+    </CanvasBanner>
   </CanvasDecorator>
 </Story>
 

package/dist/components/FlowDropEdge.svelte

@@ -6,7 +6,7 @@
   Approach:
   1. Compute the full bezier path (xyflow's getBezierPath)
   2. Parse the SVG path to extract the cubic bezier control points
-  3. Evaluate the curve near the end to get the true visual tangent
+  3. Compute exact tangent at endpoint via bezier derivative P'(1) = 3(P3-P2)
   4. Shorten the path along that tangent and draw the arrowhead at the target
 -->
 
@@ -42,32 +42,6 @@
     return match ? match[1].trim() : "var(--fd-edge-data, #64748b)";
   });
 
-  /**
-   * Evaluate a cubic bezier at parameter t.
-   * P(t) = (1-t)^3 * P0 + 3(1-t)^2 * t * P1 + 3(1-t) * t^2 * P2 + t^3 * P3
-   */
-  function bezierAt(
-    p0x: number,
-    p0y: number,
-    p1x: number,
-    p1y: number,
-    p2x: number,
-    p2y: number,
-    p3x: number,
-    p3y: number,
-    t: number,
-  ): { x: number; y: number } {
-    const u = 1 - t;
-    const uu = u * u;
-    const uuu = uu * u;
-    const tt = t * t;
-    const ttt = tt * t;
-    return {
-      x: uuu * p0x + 3 * uu * t * p1x + 3 * u * tt * p2x + ttt * p3x,
-      y: uuu * p0y + 3 * uu * t * p1y + 3 * u * tt * p2y + ttt * p3y,
-    };
-  }
-
   /**
    * Parse the SVG cubic bezier path "M x0,y0 C x1,y1 x2,y2 x3,y3"
    * into the four control points.
@@ -87,9 +61,6 @@
     };
   }
 
-  // Parameter near the end of the curve for tangent sampling
-  const T_SAMPLE = 0.9;
-
   let computed = $derived.by(() => {
     // 1. Get the full bezier path from xyflow
     const [fullPath, lx, ly] = getBezierPath({
@@ -108,30 +79,18 @@
       return { path: fullPath, labelX: lx, labelY: ly, angleDeg: 0 };
     }
 
-    // 3. Evaluate the curve at T_SAMPLE to get a reference point
-    const ref = bezierAt(
-      cp.p0x,
-      cp.p0y,
-      cp.p1x,
-      cp.p1y,
-      cp.p2x,
-      cp.p2y,
-      cp.p3x,
-      cp.p3y,
-      T_SAMPLE,
-    );
-
-    // 4. Tangent direction: from reference point to the target
-    const dx = targetX - ref.x;
-    const dy = targetY - ref.y;
+    // 3. Compute exact tangent at curve endpoint using bezier derivative:
+    //    P'(1) = 3 * (P3 - P2), giving the true arrival direction
+    const dx = cp.p3x - cp.p2x;
+    const dy = cp.p3y - cp.p2y;
     const angleDeg = (Math.atan2(dy, dx) * 180) / Math.PI;
     const angleRad = Math.atan2(dy, dx);
 
-    // 5. Shorten: move the endpoint back along the tangent
+    // 4. Shorten: move the endpoint back along the tangent
     const adjX = targetX - Math.cos(angleRad) * ARROW_LENGTH_PX;
     const adjY = targetY - Math.sin(angleRad) * ARROW_LENGTH_PX;
 
-    // 6. Recompute the bezier path with the shortened target
+    // 5. Recompute the bezier path with the shortened target
     const [shortenedPath] = getBezierPath({
       sourceX,
       sourceY,

package/dist/components/Logo.svelte

@@ -82,23 +82,23 @@
 
 <style>
   .flowdrop-logo {
-    --logo-bg: #f9f9f9;
-    --logo-stroke: #000000;
-    --logo-line-fill: #000000;
-    --logo-drop: #009cde;
-    --logo-circle: #f46351;
-    --logo-left: #ccbaf4;
-    --logo-right: #ffc423;
+    --logo-bg: var(--fd-logo-bg, #f9f9f9);
+    --logo-stroke: var(--fd-logo-stroke, #000000);
+    --logo-line-fill: var(--fd-logo-line-fill, #000000);
+    --logo-drop: var(--fd-logo-drop, #009cde);
+    --logo-circle: var(--fd-logo-circle, #f46351);
+    --logo-left: var(--fd-logo-left, #ccbaf4);
+    --logo-right: var(--fd-logo-right, #ffc423);
   }
 
   :global([data-theme="dark"]) .flowdrop-logo {
-    --logo-bg: none;
-    --logo-stroke: #ffffff;
-    --logo-line-fill: none;
-    --logo-drop: none;
-    --logo-circle: none;
-    --logo-left: none;
-    --logo-right: none;
+    --logo-bg: var(--fd-logo-bg, none);
+    --logo-stroke: var(--fd-logo-stroke, #ffffff);
+    --logo-line-fill: var(--fd-logo-line-fill, none);
+    --logo-drop: var(--fd-logo-drop, none);
+    --logo-circle: var(--fd-logo-circle, none);
+    --logo-left: var(--fd-logo-left, none);
+    --logo-right: var(--fd-logo-right, none);
   }
 
   .flowdrop-logo :global(svg) {

package/dist/components/Navbar.svelte

@@ -10,6 +10,7 @@
   import Icon from "@iconify/svelte";
   import Logo from "./Logo.svelte";
   import SettingsModal from "./SettingsModal.svelte";
+  import type { SettingsCategory } from "../types/settings.js";
 
   interface NavbarAction {
     label: string;
@@ -38,6 +39,12 @@
     breadcrumbs?: BreadcrumbItem[];
     /** Show settings gear icon */
     showSettings?: boolean;
+    /** Which settings tabs to show in the modal */
+    settingsCategories?: SettingsCategory[];
+    /** Show the "Sync to Cloud" button in the settings modal */
+    showSettingsSyncButton?: boolean;
+    /** Show the reset buttons in the settings modal */
+    showSettingsResetButton?: boolean;
   }
 
   let {
@@ -46,6 +53,9 @@
     title,
     breadcrumbs = [],
     showSettings = true,
+    settingsCategories,
+    showSettingsSyncButton,
+    showSettingsResetButton,
   }: Props = $props();
 
   // Dropdown state
@@ -263,7 +273,16 @@
 
 <!-- Settings Modal -->
 {#if showSettings}
-  <SettingsModal bind:open={isSettingsOpen} />
+  {@const settingsModalProps = {
+    ...(settingsCategories !== undefined && { categories: settingsCategories }),
+    ...(showSettingsSyncButton !== undefined && {
+      showSyncButton: showSettingsSyncButton,
+    }),
+    ...(showSettingsResetButton !== undefined && {
+      showResetButton: showSettingsResetButton,
+    }),
+  }}
+  <SettingsModal bind:open={isSettingsOpen} {...settingsModalProps} />
 {/if}
 
 <style>
@@ -739,16 +758,50 @@
     }
 
     .flowdrop-navbar__start {
-      width: 280px;
-      min-width: 280px;
+      width: auto;
+      min-width: auto;
+      flex-shrink: 0;
     }
 
-    .flowdrop-navbar__actions {
+    .flowdrop-navbar__center {
+      min-width: 0;
+      overflow: hidden;
+    }
+
+    .flowdrop-navbar__breadcrumb-list {
+      overflow: hidden;
+    }
+
+    /* Show only icons for non-current breadcrumb items */
+    .flowdrop-navbar__breadcrumb-link .flowdrop-navbar__breadcrumb-text {
+      display: none;
+    }
+
+    .flowdrop-navbar__breadcrumb-current .flowdrop-navbar__breadcrumb-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* Force dropdown mode on small screens regardless of theme */
+    .flowdrop-navbar__split-actions {
+      display: none;
+    }
+
+    .flowdrop-navbar__dropdown-mode {
+      display: flex;
+    }
+
+    .flowdrop-navbar__action-label {
       display: none;
     }
 
+    .flowdrop-navbar__primary-action {
+      padding: 0.5rem;
+      border-radius: var(--fd-radius-md) 0 0 var(--fd-radius-md);
+    }
+
     .flowdrop-text--logo {
-      font-size: 1rem;
+      display: none;
     }
 
     .flowdrop-text--tagline {
@@ -767,11 +820,6 @@
   }
 
   @media (max-width: 480px) {
-    .flowdrop-navbar__start {
-      width: 240px;
-      min-width: 240px;
-    }
-
     .flowdrop-navbar__title-text {
       font-size: 0.75rem;
       max-width: 200px;

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

@@ -1,3 +1,4 @@
+import type { SettingsCategory } from "../types/settings.js";
 interface NavbarAction {
     label: string;
     href: string;
@@ -23,6 +24,12 @@ interface Props {
     breadcrumbs?: BreadcrumbItem[];
     /** Show settings gear icon */
     showSettings?: boolean;
+    /** Which settings tabs to show in the modal */
+    settingsCategories?: SettingsCategory[];
+    /** Show the "Sync to Cloud" button in the settings modal */
+    showSettingsSyncButton?: boolean;
+    /** Show the reset buttons in the settings modal */
+    showSettingsResetButton?: boolean;
 }
 declare const Navbar: import("svelte").Component<Props, {}, "">;
 type Navbar = ReturnType<typeof Navbar>;