@flowdrop/flowdrop 1.2.2 → 1.4.0

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>;