@flowdrop/flowdrop 1.4.0 → 1.6.0

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

@@ -1,9 +1,10 @@
-import type { NodeMetadata, Workflow } from "../types/index.js";
-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";
+import type { NodeMetadata, Workflow } from '../types/index.js';
+import type { SwapStrategy } from '../utils/nodeSwap.js';
+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
  */
@@ -25,7 +26,7 @@ interface Props {
     /** Read-only mode */
     readOnly?: boolean;
     /** Node execution statuses */
-    nodeStatuses?: Record<string, "pending" | "running" | "completed" | "error">;
+    nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
     /** Pipeline ID for fetching node execution info */
     pipelineId?: string;
     /** Custom navbar title */
@@ -35,7 +36,7 @@ interface Props {
         label: string;
         href: string;
         icon?: string;
-        variant?: "primary" | "secondary" | "outline";
+        variant?: 'primary' | 'secondary' | 'outline';
         onclick?: (event: Event) => void;
     }>;
     /** Show settings gear icon in navbar */
@@ -58,6 +59,8 @@ interface Props {
     showSettingsSyncButton?: boolean;
     /** Show the reset buttons in the settings modal */
     showSettingsResetButton?: boolean;
+    /** Pluggable swap strategies — instance-scoped, checked in order */
+    swapStrategies?: SwapStrategy[];
 }
 declare const App: import("svelte").Component<Props, {}, "">;
 type App = ReturnType<typeof App>;

package/dist/components/CanvasBanner.stories.svelte

@@ -1,24 +1,21 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import CanvasBanner from "./CanvasBanner.svelte";
-  import CanvasDecorator from "../stories/CanvasDecorator.svelte";
-  import Icon from "@iconify/svelte";
+  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",
-    tags: ["autodocs"],
+    title: 'Display/CanvasBanner',
+    tags: ['autodocs'],
     parameters: {
-      layout: "centered",
-    },
+      layout: 'centered'
+    }
   });
 </script>
 
 <Story name="Default">
   <CanvasDecorator>
-    <CanvasBanner
-      title="Empty Canvas"
-      description="Drag nodes from the sidebar to get started"
-    >
+    <CanvasBanner title="Empty Canvas" description="Drag nodes from the sidebar to get started">
       {#snippet icon()}
         <Icon icon="heroicons:squares-plus" />
       {/snippet}
@@ -28,9 +25,6 @@
 
 <Story name="No Icon">
   <CanvasDecorator>
-    <CanvasBanner
-      title="No Workflows"
-      description="Create your first workflow to begin"
-    />
+    <CanvasBanner title="No Workflows" description="Create your first workflow to begin" />
   </CanvasDecorator>
 </Story>

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

@@ -11,7 +11,7 @@ declare const CanvasBanner: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import CanvasBanner from "./CanvasBanner.svelte";
+import CanvasBanner from './CanvasBanner.svelte';
 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;

package/dist/components/CanvasBanner.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import type { Snippet } from "svelte";
+  import type { Snippet } from 'svelte';
   let {
     title,
     description,
-    icon,
+    icon
   }: {
     title: string;
     description: string;

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

@@ -1,4 +1,4 @@
-import type { Snippet } from "svelte";
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     title: string;
     description: string;

package/dist/components/CanvasController.svelte

@@ -0,0 +1,37 @@
+<!--
+  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;