@flowdrop/flowdrop 1.0.1 → 1.2.0

package/dist/components/ConfigPanel.svelte

@@ -7,176 +7,187 @@
 -->
 
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import ReadOnlyDetails from './ReadOnlyDetails.svelte';
-	import { getUiSettings } from '../stores/settingsStore.svelte.js';
-
-	/**
-	 * A single detail item with label and value
-	 */
-	interface DetailItem {
-		/** The label to display */
-		label: string;
-		/** The value to display */
-		value: string;
-	}
-
-	/**
-	 * Props interface for ConfigPanel component
-	 */
-	interface Props {
-		/** Panel title displayed in the header */
-		title: string;
-		/** Unique identifier to display with copy button */
-		id?: string;
-		/** Optional description text */
-		description?: string;
-		/** Array of label-value pairs to display */
-		details?: DetailItem[];
-		/** Title for the configuration section */
-		configTitle?: string;
-		/** Callback function when the panel is closed */
-		onClose: () => void;
-		/** Slot content for the configuration form */
-		children?: Snippet;
-	}
-
-	const {
-		title,
-		id,
-		description,
-		details = [],
-		configTitle = 'Configuration',
-		onClose,
-		children
-	}: Props = $props();
-
-	/**
-	 * Check if details section should be shown
-	 */
-	const hasDetails = $derived(id !== undefined || details.length > 0 || description !== undefined);
+  import type { Snippet } from "svelte";
+  import ReadOnlyDetails from "./ReadOnlyDetails.svelte";
+  import { getUiSettings } from "../stores/settingsStore.svelte.js";
+
+  /**
+   * A single detail item with label and value
+   */
+  interface DetailItem {
+    /** The label to display */
+    label: string;
+    /** The value to display */
+    value: string;
+  }
+
+  /**
+   * Props interface for ConfigPanel component
+   */
+  interface Props {
+    /** Panel title displayed in the header */
+    title: string;
+    /** Unique identifier to display with copy button */
+    id?: string;
+    /** Optional description text */
+    description?: string;
+    /** Array of label-value pairs to display */
+    details?: DetailItem[];
+    /** Title for the configuration section */
+    configTitle?: string;
+    /** Callback function when the panel is closed */
+    onClose: () => void;
+    /** Slot content for the configuration form */
+    children?: Snippet;
+  }
+
+  const {
+    title,
+    id,
+    description,
+    details = [],
+    configTitle = "Configuration",
+    onClose,
+    children,
+  }: Props = $props();
+
+  /**
+   * Check if details section should be shown
+   */
+  const hasDetails = $derived(
+    id !== undefined || details.length > 0 || description !== undefined,
+  );
 </script>
 
-<div class="config-panel" class:config-panel--compact={getUiSettings().compactMode}>
-	<!-- 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>
-
-	<!-- Details Section (between header and content) -->
-	{#if hasDetails && id}
-		<div class="config-panel__details">
-			<ReadOnlyDetails {id} {description} {details} />
-		</div>
-	{/if}
-
-	<!-- Content -->
-	<div class="config-panel__content">
-		{#if children}
-			<div class="config-panel__section">
-				<h3 class="config-panel__section-title">{configTitle}</h3>
-				{@render children()}
-			</div>
-		{/if}
-	</div>
+<div
+  class="config-panel"
+  class:config-panel--compact={getUiSettings().compactMode}
+>
+  <!-- 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>
+
+  <!-- Details Section (between header and content) -->
+  {#if hasDetails && id}
+    <div class="config-panel__details">
+      <ReadOnlyDetails {id} {description} {details} />
+    </div>
+  {/if}
+
+  <!-- Content -->
+  <div class="config-panel__content">
+    {#if children}
+      <div class="config-panel__section">
+        <h3 class="config-panel__section-title">{configTitle}</h3>
+        {@render children()}
+      </div>
+    {/if}
+  </div>
 </div>
 
 <style>
-	.config-panel {
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		background-color: var(--fd-background);
-	}
-
-	.config-panel__header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 0.875rem 1rem;
-		border-bottom: 1px solid var(--fd-border);
-		background-color: var(--fd-muted);
-		flex-shrink: 0;
-	}
-
-	.config-panel__title {
-		margin: 0;
-		font-size: 1rem;
-		font-weight: 600;
-		color: var(--fd-foreground);
-	}
-
-	.config-panel__close {
-		background: none;
-		border: none;
-		font-size: 1.25rem;
-		line-height: 1;
-		cursor: pointer;
-		color: var(--fd-muted-foreground);
-		padding: 0.25rem;
-		border-radius: var(--fd-radius-sm);
-		transition:
-			color var(--fd-transition-fast),
-			background-color var(--fd-transition-fast);
-	}
-
-	.config-panel__close:hover {
-		color: var(--fd-foreground);
-		background-color: var(--fd-subtle);
-	}
-
-	.config-panel__details {
-		padding: 0.75rem 1rem;
-		border-bottom: 1px solid var(--fd-border-muted);
-		background-color: var(--fd-muted);
-		flex-shrink: 0;
-	}
-
-	.config-panel__content {
-		flex: 1;
-		overflow-y: auto;
-		padding: 1rem;
-	}
-
-	.config-panel__section {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-	}
-
-	.config-panel__section-title {
-		margin: 0;
-		font-size: var(--fd-text-xs);
-		font-weight: 600;
-		color: var(--fd-muted-foreground);
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-	}
-
-	/* Compact Mode Styles */
-	.config-panel--compact .config-panel__header {
-		padding: 0.5rem 0.75rem;
-	}
-
-	.config-panel--compact .config-panel__title {
-		font-size: 0.875rem;
-	}
-
-	.config-panel--compact .config-panel__close {
-		font-size: 1rem;
-		padding: 0.125rem;
-	}
-
-	.config-panel--compact .config-panel__details {
-		padding: 0.5rem 0.75rem;
-	}
-
-	.config-panel--compact .config-panel__content {
-		padding: 0.75rem;
-	}
-
-	.config-panel--compact .config-panel__section {
-		gap: 0.5rem;
-	}
+  .config-panel {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--fd-background);
+  }
+
+  .config-panel__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.875rem 1rem;
+    border-bottom: 1px solid var(--fd-border);
+    background-color: var(--fd-muted);
+    flex-shrink: 0;
+  }
+
+  .config-panel__title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--fd-foreground);
+  }
+
+  .config-panel__close {
+    background: none;
+    border: none;
+    font-size: 1.25rem;
+    line-height: 1;
+    cursor: pointer;
+    color: var(--fd-muted-foreground);
+    padding: 0.25rem;
+    border-radius: var(--fd-radius-sm);
+    transition:
+      color var(--fd-transition-fast),
+      background-color var(--fd-transition-fast);
+  }
+
+  .config-panel__close:hover {
+    color: var(--fd-foreground);
+    background-color: var(--fd-subtle);
+  }
+
+  .config-panel__details {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--fd-border-muted);
+    background-color: var(--fd-muted);
+    flex-shrink: 0;
+  }
+
+  .config-panel__content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+  }
+
+  .config-panel__section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .config-panel__section-title {
+    margin: 0;
+    font-size: var(--fd-text-xs);
+    font-weight: 600;
+    color: var(--fd-muted-foreground);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  /* Compact Mode Styles */
+  .config-panel--compact .config-panel__header {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .config-panel--compact .config-panel__title {
+    font-size: 0.875rem;
+  }
+
+  .config-panel--compact .config-panel__close {
+    font-size: 1rem;
+    padding: 0.125rem;
+  }
+
+  .config-panel--compact .config-panel__details {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .config-panel--compact .config-panel__content {
+    padding: 0.75rem;
+  }
+
+  .config-panel--compact .config-panel__section {
+    gap: 0.5rem;
+  }
 </style>

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import type { Snippet } from "svelte";
 /**
  * A single detail item with label and value
  */

package/dist/components/ConnectionLine.svelte

@@ -1,32 +1,32 @@
 <script lang="ts">
-	import { getDataTypeColor } from '../utils/colors';
-	import { useConnection } from '@xyflow/svelte';
+  import { getDataTypeColor } from "../utils/colors";
+  import { useConnection } from "@xyflow/svelte";
 
-	const connection = useConnection();
+  const connection = useConnection();
 
-	let path: string | null = $derived.by(() => {
-		if (connection.current.inProgress) {
-			const { from, to } = connection.current;
-			return `M${from.x},${from.y} C ${from.x} ${to.y} ${from.x} ${to.y} ${to.x},${to.y}`;
-		}
-		return null;
-	});
+  let path: string | null = $derived.by(() => {
+    if (connection.current.inProgress) {
+      const { from, to } = connection.current;
+      return `M${from.x},${from.y} C ${from.x} ${to.y} ${from.x} ${to.y} ${to.x},${to.y}`;
+    }
+    return null;
+  });
 </script>
 
 {#if connection.current.inProgress}
-	<path
-		fill="none"
-		stroke-width={1.5}
-		class="animated"
-		stroke={getDataTypeColor(connection.current.fromHandle.id ?? '')}
-		d={path}
-	/>
-	<circle
-		cx={connection.current.to.x}
-		cy={connection.current.to.y}
-		fill="#fff"
-		r={3}
-		stroke={getDataTypeColor(connection.current.fromHandle.id ?? '')}
-		stroke-width={1.5}
-	/>
+  <path
+    fill="none"
+    stroke-width={1.5}
+    class="animated"
+    stroke={getDataTypeColor(connection.current.fromHandle.id ?? "")}
+    d={path}
+  />
+  <circle
+    cx={connection.current.to.x}
+    cy={connection.current.to.y}
+    fill="#fff"
+    r={3}
+    stroke={getDataTypeColor(connection.current.fromHandle.id ?? "")}
+    stroke-width={1.5}
+  />
 {/if}

package/dist/components/EdgeRefresher.svelte

@@ -5,37 +5,37 @@
 -->
 
 <script lang="ts">
-	import { useUpdateNodeInternals } from '@xyflow/svelte';
+  import { useUpdateNodeInternals } from "@xyflow/svelte";
 
-	interface Props {
-		/** Node ID to refresh - when this changes, edges are recalculated */
-		nodeIdToRefresh: string | null;
-		/** Callback when refresh is complete */
-		onRefreshComplete?: () => void;
-	}
+  interface Props {
+    /** Node ID to refresh - when this changes, edges are recalculated */
+    nodeIdToRefresh: string | null;
+    /** Callback when refresh is complete */
+    onRefreshComplete?: () => void;
+  }
 
-	let { nodeIdToRefresh, onRefreshComplete }: Props = $props();
+  let { nodeIdToRefresh, onRefreshComplete }: Props = $props();
 
-	/**
-	 * Get the updateNodeInternals function from Svelte Flow context
-	 * This recalculates handle positions and forces edge path updates
-	 */
-	const updateNodeInternals = useUpdateNodeInternals();
+  /**
+   * Get the updateNodeInternals function from Svelte Flow context
+   * This recalculates handle positions and forces edge path updates
+   */
+  const updateNodeInternals = useUpdateNodeInternals();
 
-	/**
-	 * Watch for nodeIdToRefresh changes and trigger edge recalculation
-	 */
-	$effect(() => {
-		if (nodeIdToRefresh) {
-			// Tell Svelte Flow to recalculate node internals (handle positions)
-			updateNodeInternals(nodeIdToRefresh);
+  /**
+   * Watch for nodeIdToRefresh changes and trigger edge recalculation
+   */
+  $effect(() => {
+    if (nodeIdToRefresh) {
+      // Tell Svelte Flow to recalculate node internals (handle positions)
+      updateNodeInternals(nodeIdToRefresh);
 
-			// Notify parent that refresh is complete
-			if (onRefreshComplete) {
-				onRefreshComplete();
-			}
-		}
-	});
+      // Notify parent that refresh is complete
+      if (onRefreshComplete) {
+        onRefreshComplete();
+      }
+    }
+  });
 </script>
 
 <!-- This component renders nothing - it's just for the hook logic -->