@flowdrop/flowdrop 1.0.1 → 1.2.0

package/dist/components/PortCoordinateTracker.svelte

@@ -8,51 +8,53 @@
 -->
 
 <script lang="ts">
-	import { useSvelteFlow, type InternalNode } from '@xyflow/svelte';
-	import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
-	import {
-		rebuildAllPortCoordinates,
-		updateNodePortCoordinates
-	} from '../stores/portCoordinateStore.svelte.js';
-
-	interface Props {
-		/** Node to update coordinates for (e.g., during drag). Set to null when not dragging. */
-		nodeToUpdate: WorkflowNodeType | null;
-		/** Set to trigger a full rebuild of all port coordinates */
-		rebuildTrigger: number;
-		/** All workflow nodes - used for full rebuild */
-		nodes: WorkflowNodeType[];
-	}
-
-	let { nodeToUpdate, rebuildTrigger, nodes }: Props = $props();
-
-	const { getInternalNode } = useSvelteFlow();
-
-	// Cast the getInternalNode function for our use
-	const getInternal = getInternalNode as (id: string) => InternalNode | undefined;
-
-	/**
-	 * Rebuild all port coordinates when rebuildTrigger changes.
-	 * Debounced to batch rapid position updates (e.g., animated auto-layout,
-	 * magnetic child nodes following a parent drag).
-	 */
-	$effect(() => {
-		const _trigger = rebuildTrigger;
-		if (_trigger > 0) {
-			const timeout = setTimeout(() => {
-				rebuildAllPortCoordinates(nodes, getInternal);
-			}, 150);
-			return () => clearTimeout(timeout);
-		}
-	});
-
-	/**
-	 * Update a single node's coordinates when nodeToUpdate changes.
-	 * This is used during drag for efficient per-node updates.
-	 */
-	$effect(() => {
-		if (nodeToUpdate) {
-			updateNodePortCoordinates(nodeToUpdate, getInternal);
-		}
-	});
+  import { useSvelteFlow, type InternalNode } from "@xyflow/svelte";
+  import type { WorkflowNode as WorkflowNodeType } from "../types/index.js";
+  import {
+    rebuildAllPortCoordinates,
+    updateNodePortCoordinates,
+  } from "../stores/portCoordinateStore.svelte.js";
+
+  interface Props {
+    /** Node to update coordinates for (e.g., during drag). Set to null when not dragging. */
+    nodeToUpdate: WorkflowNodeType | null;
+    /** Set to trigger a full rebuild of all port coordinates */
+    rebuildTrigger: number;
+    /** All workflow nodes - used for full rebuild */
+    nodes: WorkflowNodeType[];
+  }
+
+  let { nodeToUpdate, rebuildTrigger, nodes }: Props = $props();
+
+  const { getInternalNode } = useSvelteFlow();
+
+  // Cast the getInternalNode function for our use
+  const getInternal = getInternalNode as (
+    id: string,
+  ) => InternalNode | undefined;
+
+  /**
+   * Rebuild all port coordinates when rebuildTrigger changes.
+   * Debounced to batch rapid position updates (e.g., animated auto-layout,
+   * magnetic child nodes following a parent drag).
+   */
+  $effect(() => {
+    const _trigger = rebuildTrigger;
+    if (_trigger > 0) {
+      const timeout = setTimeout(() => {
+        rebuildAllPortCoordinates(nodes, getInternal);
+      }, 150);
+      return () => clearTimeout(timeout);
+    }
+  });
+
+  /**
+   * Update a single node's coordinates when nodeToUpdate changes.
+   * This is used during drag for efficient per-node updates.
+   */
+  $effect(() => {
+    if (nodeToUpdate) {
+      updateNodePortCoordinates(nodeToUpdate, getInternal);
+    }
+  });
 </script>

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

@@ -1,4 +1,4 @@
-import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
+import type { WorkflowNode as WorkflowNodeType } from "../types/index.js";
 interface Props {
     /** Node to update coordinates for (e.g., during drag). Set to null when not dragging. */
     nodeToUpdate: WorkflowNodeType | null;

package/dist/components/ReadOnlyDetails.svelte

@@ -5,166 +5,166 @@
 -->
 
 <script lang="ts">
-	/**
-	 * 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 ReadOnlyDetails component
-	 */
-	interface Props {
-		/** The unique identifier to display with a copy button */
-		id: string;
-		/** Optional section title */
-		title?: string;
-		/** Optional description text */
-		description?: string;
-		/** Array of label-value pairs to display */
-		details: DetailItem[];
-	}
-
-	const { id, title, description, details }: Props = $props();
-
-	/**
-	 * Copy the ID to clipboard
-	 */
-	function copyId(): void {
-		navigator.clipboard.writeText(id);
-	}
+  /**
+   * 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 ReadOnlyDetails component
+   */
+  interface Props {
+    /** The unique identifier to display with a copy button */
+    id: string;
+    /** Optional section title */
+    title?: string;
+    /** Optional description text */
+    description?: string;
+    /** Array of label-value pairs to display */
+    details: DetailItem[];
+  }
+
+  const { id, title, description, details }: Props = $props();
+
+  /**
+   * Copy the ID to clipboard
+   */
+  function copyId(): void {
+    navigator.clipboard.writeText(id);
+  }
 </script>
 
 <div class="readonly-details">
-	{#if title}
-		<h3 class="readonly-details__title">{title}</h3>
-	{/if}
-
-	<div class="readonly-details__grid">
-		<!-- ID row -->
-		<span class="readonly-details__label">ID</span>
-		<div class="readonly-details__id-row">
-			<code class="readonly-details__id">{id}</code>
-			<button
-				class="readonly-details__copy-btn"
-				onclick={copyId}
-				title="Copy ID"
-				aria-label="Copy ID to clipboard"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					width="12"
-					height="12"
-					viewBox="0 0 24 24"
-					stroke-width="2"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
-					/>
-				</svg>
-			</button>
-		</div>
-
-		<!-- Dynamic label-value pairs -->
-		{#each details as detail (detail.label)}
-			<span class="readonly-details__label">{detail.label}</span>
-			<span class="readonly-details__value">{detail.value}</span>
-		{/each}
-	</div>
-
-	<!-- Description (if provided) -->
-	{#if description}
-		<p class="readonly-details__description">{description}</p>
-	{/if}
+  {#if title}
+    <h3 class="readonly-details__title">{title}</h3>
+  {/if}
+
+  <div class="readonly-details__grid">
+    <!-- ID row -->
+    <span class="readonly-details__label">ID</span>
+    <div class="readonly-details__id-row">
+      <code class="readonly-details__id">{id}</code>
+      <button
+        class="readonly-details__copy-btn"
+        onclick={copyId}
+        title="Copy ID"
+        aria-label="Copy ID to clipboard"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+          />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Dynamic label-value pairs -->
+    {#each details as detail (detail.label)}
+      <span class="readonly-details__label">{detail.label}</span>
+      <span class="readonly-details__value">{detail.value}</span>
+    {/each}
+  </div>
+
+  <!-- Description (if provided) -->
+  {#if description}
+    <p class="readonly-details__description">{description}</p>
+  {/if}
 </div>
 
 <style>
-	.readonly-details {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.readonly-details__title {
-		margin: 0;
-		font-size: 0.75rem;
-		font-weight: 600;
-		color: var(--fd-muted-foreground);
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-	}
-
-	.readonly-details__grid {
-		display: grid;
-		grid-template-columns: auto 1fr;
-		gap: 0.25rem 0.75rem;
-		align-items: center;
-	}
-
-	.readonly-details__label {
-		font-size: 0.75rem;
-		font-weight: 500;
-		color: var(--fd-muted-foreground);
-	}
-
-	.readonly-details__value {
-		font-size: 0.8125rem;
-		color: var(--fd-foreground);
-		font-weight: 500;
-	}
-
-	.readonly-details__id-row {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-	}
-
-	.readonly-details__id {
-		font-size: 0.75rem;
-		font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
-		color: var(--fd-muted-foreground);
-		background-color: var(--fd-subtle);
-		padding: 0.125rem 0.375rem;
-		border-radius: var(--fd-radius-sm);
-		word-break: break-all;
-	}
-
-	.readonly-details__copy-btn {
-		background: transparent;
-		border: none;
-		padding: 0.25rem;
-		cursor: pointer;
-		color: var(--fd-muted-foreground);
-		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);
-	}
-
-	.readonly-details__copy-btn:hover {
-		color: var(--fd-foreground);
-		background-color: var(--fd-subtle);
-	}
-
-	.readonly-details__copy-btn:active {
-		color: var(--fd-foreground);
-	}
-
-	.readonly-details__description {
-		margin: 0;
-		font-size: 0.8125rem;
-		color: var(--fd-muted-foreground);
-		line-height: 1.5;
-	}
+  .readonly-details {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .readonly-details__title {
+    margin: 0;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--fd-muted-foreground);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .readonly-details__grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.25rem 0.75rem;
+    align-items: center;
+  }
+
+  .readonly-details__label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--fd-muted-foreground);
+  }
+
+  .readonly-details__value {
+    font-size: 0.8125rem;
+    color: var(--fd-foreground);
+    font-weight: 500;
+  }
+
+  .readonly-details__id-row {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .readonly-details__id {
+    font-size: 0.75rem;
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+    color: var(--fd-muted-foreground);
+    background-color: var(--fd-subtle);
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--fd-radius-sm);
+    word-break: break-all;
+  }
+
+  .readonly-details__copy-btn {
+    background: transparent;
+    border: none;
+    padding: 0.25rem;
+    cursor: pointer;
+    color: var(--fd-muted-foreground);
+    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);
+  }
+
+  .readonly-details__copy-btn:hover {
+    color: var(--fd-foreground);
+    background-color: var(--fd-subtle);
+  }
+
+  .readonly-details__copy-btn:active {
+    color: var(--fd-foreground);
+  }
+
+  .readonly-details__description {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--fd-muted-foreground);
+    line-height: 1.5;
+  }
 </style>

package/dist/components/SchemaForm.stories.svelte

@@ -1,116 +1,124 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import SchemaForm from './SchemaForm.svelte';
-	import { fn } from 'storybook/test';
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import SchemaForm from "./SchemaForm.svelte";
+  import { fn } from "storybook/test";
 
-	const { Story } = defineMeta({
-		title: 'Form/SchemaForm',
-		component: SchemaForm,
-		tags: ['autodocs'],
-		args: {
-			onChange: fn(),
-			onSave: fn(),
-			onCancel: fn()
-		}
-	});
+  const { Story } = defineMeta({
+    title: "Form/SchemaForm",
+    component: SchemaForm,
+    tags: ["autodocs"],
+    args: {
+      onChange: fn(),
+      onSave: fn(),
+      onCancel: fn(),
+    },
+  });
 </script>
 
 <Story
-	name="Simple Form"
-	args={{
-		schema: {
-			type: 'object',
-			properties: {
-				name: { type: 'string', title: 'Name', description: 'Enter your full name' },
-				age: { type: 'number', title: 'Age', minimum: 0, maximum: 120 },
-				active: { type: 'boolean', title: 'Active', default: true }
-			},
-			required: ['name']
-		},
-		values: { name: 'Alice', age: 30, active: true }
-	}}
+  name="Simple Form"
+  args={{
+    schema: {
+      type: "object",
+      properties: {
+        name: {
+          type: "string",
+          title: "Name",
+          description: "Enter your full name",
+        },
+        age: { type: "number", title: "Age", minimum: 0, maximum: 120 },
+        active: { type: "boolean", title: "Active", default: true },
+      },
+      required: ["name"],
+    },
+    values: { name: "Alice", age: 30, active: true },
+  }}
 />
 
 <Story
-	name="Select Fields"
-	args={{
-		schema: {
-			type: 'object',
-			properties: {
-				model: {
-					type: 'string',
-					title: 'AI Model',
-					oneOf: [
-						{ const: 'gpt-4', title: 'GPT-4' },
-						{ const: 'gpt-3.5', title: 'GPT-3.5 Turbo' },
-						{ const: 'claude-3', title: 'Claude 3' }
-					]
-				},
-				temperature: {
-					type: 'number',
-					title: 'Temperature',
-					format: 'range',
-					minimum: 0,
-					maximum: 2,
-					step: 0.1,
-					default: 0.7
-				},
-				prompt: {
-					type: 'string',
-					title: 'System Prompt',
-					format: 'multiline',
-					description: 'The system prompt for the AI model'
-				}
-			}
-		},
-		values: { model: 'gpt-4', temperature: 0.7, prompt: 'You are a helpful assistant.' }
-	}}
+  name="Select Fields"
+  args={{
+    schema: {
+      type: "object",
+      properties: {
+        model: {
+          type: "string",
+          title: "AI Model",
+          oneOf: [
+            { const: "gpt-4", title: "GPT-4" },
+            { const: "gpt-3.5", title: "GPT-3.5 Turbo" },
+            { const: "claude-3", title: "Claude 3" },
+          ],
+        },
+        temperature: {
+          type: "number",
+          title: "Temperature",
+          format: "range",
+          minimum: 0,
+          maximum: 2,
+          step: 0.1,
+          default: 0.7,
+        },
+        prompt: {
+          type: "string",
+          title: "System Prompt",
+          format: "multiline",
+          description: "The system prompt for the AI model",
+        },
+      },
+    },
+    values: {
+      model: "gpt-4",
+      temperature: 0.7,
+      prompt: "You are a helpful assistant.",
+    },
+  }}
 />
 
 <Story
-	name="With Actions"
-	args={{
-		schema: {
-			type: 'object',
-			properties: {
-				email: { type: 'string', title: 'Email' },
-				notifications: { type: 'boolean', title: 'Enable Notifications' }
-			},
-			required: ['email']
-		},
-		values: { email: '', notifications: true },
-		showActions: true,
-		saveLabel: 'Save Settings',
-		cancelLabel: 'Reset'
-	}}
+  name="With Actions"
+  args={{
+    schema: {
+      type: "object",
+      properties: {
+        email: { type: "string", title: "Email" },
+        notifications: { type: "boolean", title: "Enable Notifications" },
+      },
+      required: ["email"],
+    },
+    values: { email: "", notifications: true },
+    showActions: true,
+    saveLabel: "Save Settings",
+    cancelLabel: "Reset",
+  }}
 />
 
 <Story
-	name="Loading"
-	args={{
-		schema: {
-			type: 'object',
-			properties: {
-				name: { type: 'string', title: 'Name' }
-			}
-		},
-		values: { name: 'Test' },
-		showActions: true,
-		loading: true
-	}}
+  name="Loading"
+  args={{
+    schema: {
+      type: "object",
+      properties: {
+        name: { type: "string", title: "Name" },
+      },
+    },
+    values: { name: "Test" },
+    showActions: true,
+    loading: true,
+  }}
 />
 
 <Story
-	name="Disabled"
-	args={{
-		schema: {
-			type: 'object',
-			properties: {
-				name: { type: 'string', title: 'Name' },
-				role: { type: 'string', title: 'Role' }
-			}
-		},
-		values: { name: 'Admin', role: 'Super User' },
-		disabled: true
-	}}
+  name="Disabled"
+  args={{
+    schema: {
+      type: "object",
+      properties: {
+        name: { type: "string", title: "Name" },
+        role: { type: "string", title: "Role" },
+      },
+    },
+    values: { name: "Admin", role: "Super User" },
+    disabled: true,
+  }}
 />