@flowdrop/flowdrop 1.3.0 → 1.5.0

package/dist/components/CanvasController.svelte

@@ -0,0 +1,38 @@
+<!--
+  CanvasController Component
+  Provides viewport control methods (fitView, zoom, pan) via useSvelteFlow().
+  Must be rendered inside SvelteFlowProvider context.
+-->
+
+<script lang="ts">
+  import { useSvelteFlow } from "@xyflow/svelte";
+  import { getEditorSettings } from "../stores/settingsStore.svelte.js";
+
+  const { fitView, zoomIn, zoomOut, setZoom, setCenter, setViewport } =
+    useSvelteFlow();
+
+  export function canvasFitView(): void {
+    fitView({ padding: 0.2, duration: 300 });
+  }
+
+  export function canvasZoomIn(): void {
+    zoomIn({ duration: 300 });
+  }
+
+  export function canvasZoomOut(): void {
+    zoomOut({ duration: 300 });
+  }
+
+  export function canvasZoomTo(level: number): void {
+    setZoom(level, { duration: 300 });
+  }
+
+  export function canvasPanTo(x: number, y: number): void {
+    setCenter(x, y, { duration: 300 });
+  }
+
+  export function canvasResetView(): void {
+    const defaultZoom = getEditorSettings().defaultZoom;
+    setViewport({ x: 0, y: 0, zoom: defaultZoom }, { duration: 300 });
+  }
+</script>

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

@@ -0,0 +1,32 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CanvasController: $$__sveltets_2_IsomorphicComponent<{
+    canvasFitView?: () => void;
+    canvasZoomIn?: () => void;
+    canvasZoomOut?: () => void;
+    canvasZoomTo?: (level: number) => void;
+    canvasPanTo?: (x: number, y: number) => void;
+    canvasResetView?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    canvasFitView: () => void;
+    canvasZoomIn: () => void;
+    canvasZoomOut: () => void;
+    canvasZoomTo: (level: number) => void;
+    canvasPanTo: (x: number, y: number) => void;
+    canvasResetView: () => void;
+}, string>;
+type CanvasController = InstanceType<typeof CanvasController>;
+export default CanvasController;

package/dist/components/ConfigMappingRow.svelte

@@ -0,0 +1,130 @@
+<!--
+  ConfigMappingRow Component
+  A single row in the config mapping editor showing carry/reset toggle.
+  Styled with BEM syntax.
+-->
+
+<script lang="ts">
+  import type { EditableConfigMapping } from "../utils/nodeSwap.js";
+
+  interface Props {
+    mapping: EditableConfigMapping;
+    onToggle: (key: string) => void;
+  }
+
+  const { mapping, onToggle }: Props = $props();
+
+  function formatValue(value: unknown): string {
+    if (value === null || value === undefined) return "—";
+    if (typeof value === "string") return value || '""';
+    if (typeof value === "boolean") return value ? "true" : "false";
+    if (typeof value === "number") return String(value);
+    return JSON.stringify(value);
+  }
+</script>
+
+<div class="config-mapping-row">
+  <div class="config-mapping-row__info">
+    <span class="config-mapping-row__key">{mapping.title}</span>
+  </div>
+
+  {#if !mapping.isFlat}
+    <div class="config-mapping-row__complex">
+      Complex value — will use default
+    </div>
+  {:else}
+    <div class="config-mapping-row__values">
+      {#if mapping.carryOver}
+        <span class="config-mapping-row__value config-mapping-row__value--carried">
+          {formatValue(mapping.oldValue)}
+        </span>
+      {:else}
+        <span class="config-mapping-row__value config-mapping-row__value--default">
+          {formatValue(mapping.newDefault)}
+        </span>
+      {/if}
+    </div>
+
+    <button
+      class="config-mapping-row__toggle"
+      class:config-mapping-row__toggle--carry={mapping.carryOver}
+      onclick={() => onToggle(mapping.key)}
+      type="button"
+    >
+      {mapping.carryOver ? "Carry over" : "Use default"}
+    </button>
+  {/if}
+</div>
+
+<style>
+  .config-mapping-row {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    padding: var(--fd-space-xs) 0;
+    font-size: var(--fd-text-xs);
+  }
+
+  .config-mapping-row__info {
+    flex: 0 0 auto;
+    min-width: 4rem;
+  }
+
+  .config-mapping-row__key {
+    font-weight: 500;
+    color: var(--fd-foreground);
+  }
+
+  .config-mapping-row__complex {
+    flex: 1;
+    color: var(--fd-muted-foreground);
+    font-style: italic;
+    font-size: var(--fd-text-xs);
+  }
+
+  .config-mapping-row__values {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .config-mapping-row__value {
+    font-family: var(--fd-font-mono, monospace);
+    font-size: var(--fd-text-xs);
+  }
+
+  .config-mapping-row__value--carried {
+    color: var(--fd-success);
+  }
+
+  .config-mapping-row__value--default {
+    color: var(--fd-muted-foreground);
+  }
+
+  .config-mapping-row__toggle {
+    flex-shrink: 0;
+    padding: 0.1875rem 0.5rem;
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-sm);
+    background-color: var(--fd-background);
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-xs);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--fd-transition-fast);
+    white-space: nowrap;
+  }
+
+  .config-mapping-row__toggle:hover {
+    border-color: var(--fd-border-strong);
+    color: var(--fd-foreground);
+  }
+
+  .config-mapping-row__toggle--carry {
+    background-color: color-mix(in srgb, var(--fd-success) 10%, transparent);
+    border-color: color-mix(in srgb, var(--fd-success) 30%, transparent);
+    color: var(--fd-success);
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { EditableConfigMapping } from "../utils/nodeSwap.js";
+interface Props {
+    mapping: EditableConfigMapping;
+    onToggle: (key: string) => void;
+}
+declare const ConfigMappingRow: import("svelte").Component<Props, {}, "">;
+type ConfigMappingRow = ReturnType<typeof ConfigMappingRow>;
+export default ConfigMappingRow;

package/dist/components/ConfigPanel.svelte

@@ -8,6 +8,7 @@
 
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import Icon from "@iconify/svelte";
   import ReadOnlyDetails from "./ReadOnlyDetails.svelte";
   import { getUiSettings } from "../stores/settingsStore.svelte.js";
 
@@ -37,6 +38,8 @@
     configTitle?: string;
     /** Callback function when the panel is closed */
     onClose: () => void;
+    /** Optional callback to initiate node swap — when provided, shows swap button */
+    onSwap?: () => void;
     /** Slot content for the configuration form */
     children?: Snippet;
   }
@@ -48,6 +51,7 @@
     details = [],
     configTitle = "Configuration",
     onClose,
+    onSwap,
     children,
   }: Props = $props();
 
@@ -66,13 +70,25 @@
   <!-- Header -->
   <div class="config-panel__header">
     <h2 class="config-panel__title">{title}</h2>
-    <button
-      class="config-panel__close"
-      onclick={onClose}
-      aria-label="Close panel"
-    >
-      ×
-    </button>
+    <div class="config-panel__actions">
+      {#if onSwap}
+        <button
+          class="config-panel__action-btn"
+          onclick={onSwap}
+          aria-label="Swap node"
+          title="Swap node type"
+        >
+          <Icon icon="heroicons:arrows-right-left" />
+        </button>
+      {/if}
+      <button
+        class="config-panel__close"
+        onclick={onClose}
+        aria-label="Close panel"
+      >
+        ×
+      </button>
+    </div>
   </div>
 
   <!-- Details Section (between header and content) -->
@@ -118,6 +134,34 @@
     color: var(--fd-foreground);
   }
 
+  .config-panel__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .config-panel__action-btn {
+    background: none;
+    border: none;
+    font-size: 1rem;
+    line-height: 1;
+    cursor: pointer;
+    color: var(--fd-muted-foreground);
+    padding: 0.25rem;
+    border-radius: var(--fd-radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      color var(--fd-transition-fast),
+      background-color var(--fd-transition-fast);
+  }
+
+  .config-panel__action-btn:hover {
+    color: var(--fd-primary);
+    background-color: var(--fd-subtle);
+  }
+
   .config-panel__close {
     background: none;
     border: none;
@@ -179,6 +223,11 @@
     padding: 0.125rem;
   }
 
+  .config-panel--compact .config-panel__action-btn {
+    font-size: 0.875rem;
+    padding: 0.125rem;
+  }
+
   .config-panel--compact .config-panel__details {
     padding: 0.5rem 0.75rem;
   }

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

@@ -24,6 +24,8 @@ interface Props {
     configTitle?: string;
     /** Callback function when the panel is closed */
     onClose: () => void;
+    /** Optional callback to initiate node swap — when provided, shows swap button */
+    onSwap?: () => void;
     /** Slot content for the configuration form */
     children?: Snippet;
 }

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,39 +79,19 @@
       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
-    const [shortenedPath] = getBezierPath({
-      sourceX,
-      sourceY,
-      targetX: adjX,
-      targetY: adjY,
-      sourcePosition,
-      targetPosition,
-      curvature: pathOptions?.curvature,
-    });
+    // 5. Build shortened path from existing control points — no second getBezierPath() call
+    const shortenedPath = `M ${cp.p0x},${cp.p0y} C ${cp.p1x},${cp.p1y} ${cp.p2x},${cp.p2y} ${adjX},${adjY}`;
 
     return { path: shortenedPath, labelX: lx, labelY: ly, angleDeg };
   });

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/LogsSidebar.svelte

@@ -114,7 +114,7 @@
   /**
    * Filter logs by selected node
    */
-  let filteredLogs = $derived(() => {
+  let filteredLogs = $derived.by(() => {
     if (props.selectedNode) {
       return props.logs.filter((log) => log.nodeId === props.selectedNode?.id);
     }
@@ -132,7 +132,7 @@
    * Export logs
    */
   function exportLogs(): void {
-    const logText = filteredLogs()
+    const logText = filteredLogs
       .map(
         (log) =>
           `[${formatTimestamp(log.timestamp)}] ${log.level.toUpperCase()}: ${log.message}${log.nodeId ? ` (Node: ${log.nodeId})` : ""}`,
@@ -198,9 +198,9 @@
   <!-- Content -->
   <div class="logs-sidebar__content">
     <!-- Logs List -->
-    {#if filteredLogs().length > 0}
+    {#if filteredLogs.length > 0}
       <div class="logs-sidebar__logs" bind:this={logsContainer}>
-        {#each filteredLogs() as log, index (index)}
+        {#each filteredLogs as log, index (index)}
           <div
             class="logs-sidebar__log-entry"
             class:logs-sidebar__log-entry--error={log.level === "error"}
@@ -276,7 +276,7 @@
 
     {#if props.logs.length > 0}
       <p class="logs-sidebar__info-text">
-        {filteredLogs().length} of {props.logs.length} log entries
+        {filteredLogs.length} of {props.logs.length} log entries
       </p>
     {/if}
   </div>

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