@flowdrop/flowdrop 1.0.1 → 1.2.0

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

@@ -1,5 +1,5 @@
-import type { ConfigSchema, WorkflowNode, WorkflowEdge, NodeUIExtensions, AuthProvider } from '../types/index.js';
-import type { UISchemaElement } from '../types/uischema.js';
+import type { ConfigSchema, WorkflowNode, WorkflowEdge, NodeUIExtensions, AuthProvider } from "../types/index.js";
+import type { UISchemaElement } from "../types/uischema.js";
 interface Props {
     /** Optional workflow node (if provided, schema and values are derived from it) */
     node?: WorkflowNode;

package/dist/components/ConfigModal.svelte

@@ -1,188 +1,188 @@
 <script lang="ts">
-	import type { ConfigSchema, ConfigValues } from '../types';
-	import ConfigForm from './ConfigForm.svelte';
-
-	interface Props {
-		isOpen: boolean;
-		nodeLabel: string;
-		configSchema: ConfigSchema;
-		configValues: ConfigValues;
-		onClose?: () => void;
-		onSave?: (values: ConfigValues) => void;
-		onCancel?: () => void;
-	}
-
-	let { onClose, onSave, onCancel, ...props }: Props = $props();
-	let localConfigValues = $derived.by(() => ({ ...props.configValues }));
-
-	function handleCancel() {
-		onCancel?.();
-	}
-
-	function handleClose() {
-		onClose?.();
-	}
-
-	// Close modal on escape key
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			handleClose();
-		}
-	}
-
-	// Close modal when clicking outside
-	function handleBackdropClick(event: MouseEvent) {
-		if (event.target === event.currentTarget) {
-			handleClose();
-		}
-	}
+  import type { ConfigSchema, ConfigValues } from "../types";
+  import ConfigForm from "./ConfigForm.svelte";
+
+  interface Props {
+    isOpen: boolean;
+    nodeLabel: string;
+    configSchema: ConfigSchema;
+    configValues: ConfigValues;
+    onClose?: () => void;
+    onSave?: (values: ConfigValues) => void;
+    onCancel?: () => void;
+  }
+
+  let { onClose, onSave, onCancel, ...props }: Props = $props();
+  let localConfigValues = $derived.by(() => ({ ...props.configValues }));
+
+  function handleCancel() {
+    onCancel?.();
+  }
+
+  function handleClose() {
+    onClose?.();
+  }
+
+  // Close modal on escape key
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      handleClose();
+    }
+  }
+
+  // Close modal when clicking outside
+  function handleBackdropClick(event: MouseEvent) {
+    if (event.target === event.currentTarget) {
+      handleClose();
+    }
+  }
 </script>
 
 {#if props.isOpen}
-	<!-- Modal Backdrop -->
-	<div
-		class="config-modal-backdrop"
-		onclick={handleBackdropClick}
-		onkeydown={handleKeydown}
-		role="dialog"
-		aria-modal="true"
-		aria-labelledby="config-modal-title"
-		tabindex="-1"
-	>
-		<!-- Modal Container -->
-		<div class="config-modal">
-			<!-- Modal Header -->
-			<div class="config-modal__header">
-				<h2 id="config-modal-title" class="config-modal__title">
-					Configure: {props.nodeLabel}
-				</h2>
-				<button
-					type="button"
-					class="config-modal__close-btn"
-					onclick={handleClose}
-					aria-label="Close configuration modal"
-				>
-					<span aria-hidden="true">×</span>
-				</button>
-			</div>
-
-			<!-- Modal Content -->
-			<div class="config-modal__content">
-				<ConfigForm
-					schema={props.configSchema}
-					values={localConfigValues}
-					showUIExtensions={false}
-					onSave={(config) => {
-						onSave?.(config);
-					}}
-					onCancel={handleCancel}
-				/>
-			</div>
-		</div>
-	</div>
+  <!-- Modal Backdrop -->
+  <div
+    class="config-modal-backdrop"
+    onclick={handleBackdropClick}
+    onkeydown={handleKeydown}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="config-modal-title"
+    tabindex="-1"
+  >
+    <!-- Modal Container -->
+    <div class="config-modal">
+      <!-- Modal Header -->
+      <div class="config-modal__header">
+        <h2 id="config-modal-title" class="config-modal__title">
+          Configure: {props.nodeLabel}
+        </h2>
+        <button
+          type="button"
+          class="config-modal__close-btn"
+          onclick={handleClose}
+          aria-label="Close configuration modal"
+        >
+          <span aria-hidden="true">×</span>
+        </button>
+      </div>
+
+      <!-- Modal Content -->
+      <div class="config-modal__content">
+        <ConfigForm
+          schema={props.configSchema}
+          values={localConfigValues}
+          showUIExtensions={false}
+          onSave={(config) => {
+            onSave?.(config);
+          }}
+          onCancel={handleCancel}
+        />
+      </div>
+    </div>
+  </div>
 {/if}
 
 <style>
-	.config-modal-backdrop {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: rgba(0, 0, 0, 0.5);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 1000;
-		padding: 1rem;
-	}
-
-	.config-modal {
-		background: white;
-		border-radius: 0.75rem;
-		box-shadow:
-			0 20px 25px -5px rgba(0, 0, 0, 0.1),
-			0 10px 10px -5px rgba(0, 0, 0, 0.04);
-		width: 100%;
-		max-width: 80vw;
-		min-width: 40rem;
-		max-height: 90vh;
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-	}
-
-	.config-modal__header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 1.5rem 1.5rem 1rem 1.5rem;
-		border-bottom: 1px solid #e5e7eb;
-	}
-
-	.config-modal__title {
-		margin: 0;
-		font-size: 1.125rem;
-		font-weight: 600;
-		color: #111827;
-	}
-
-	.config-modal__close-btn {
-		width: 2rem;
-		height: 2rem;
-		border: none;
-		background: transparent;
-		border-radius: 0.375rem;
-		color: #6b7280;
-		font-size: 1.5rem;
-		font-weight: 400;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: all 0.2s;
-	}
-
-	.config-modal__close-btn:hover {
-		background-color: #f3f4f6;
-		color: #374151;
-	}
-
-	.config-modal__content {
-		padding: 1.5rem;
-		overflow-y: auto;
-		flex: 1;
-		min-height: 0;
-	}
-
-	/* Responsive adjustments */
-	@media (max-width: 1024px) {
-		.config-modal {
-			max-width: 90vw;
-			min-width: 32rem;
-		}
-	}
-
-	@media (max-width: 768px) {
-		.config-modal {
-			max-width: 95vw;
-			min-width: 24rem;
-		}
-
-		.config-modal__header {
-			padding: 1rem 1rem 0.75rem 1rem;
-		}
-
-		.config-modal__content {
-			padding: 1rem;
-		}
-	}
-
-	@media (max-width: 640px) {
-		.config-modal {
-			max-width: 100%;
-			min-width: auto;
-			margin: 0.5rem;
-		}
-	}
+  .config-modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 1rem;
+  }
+
+  .config-modal {
+    background: white;
+    border-radius: 0.75rem;
+    box-shadow:
+      0 20px 25px -5px rgba(0, 0, 0, 0.1),
+      0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    width: 100%;
+    max-width: 80vw;
+    min-width: 40rem;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .config-modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem 1.5rem 1rem 1.5rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  .config-modal__title {
+    margin: 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: #111827;
+  }
+
+  .config-modal__close-btn {
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    background: transparent;
+    border-radius: 0.375rem;
+    color: #6b7280;
+    font-size: 1.5rem;
+    font-weight: 400;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+  }
+
+  .config-modal__close-btn:hover {
+    background-color: #f3f4f6;
+    color: #374151;
+  }
+
+  .config-modal__content {
+    padding: 1.5rem;
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 1024px) {
+    .config-modal {
+      max-width: 90vw;
+      min-width: 32rem;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .config-modal {
+      max-width: 95vw;
+      min-width: 24rem;
+    }
+
+    .config-modal__header {
+      padding: 1rem 1rem 0.75rem 1rem;
+    }
+
+    .config-modal__content {
+      padding: 1rem;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .config-modal {
+      max-width: 100%;
+      min-width: auto;
+      margin: 0.5rem;
+    }
+  }
 </style>

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

@@ -1,4 +1,4 @@
-import type { ConfigSchema, ConfigValues } from '../types';
+import type { ConfigSchema, ConfigValues } from "../types";
 interface Props {
     isOpen: boolean;
     nodeLabel: string;

package/dist/components/ConfigPanel.stories.svelte

@@ -1,47 +1,47 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import ConfigPanel from './ConfigPanel.svelte';
-	import { fn } from 'storybook/test';
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import ConfigPanel from "./ConfigPanel.svelte";
+  import { fn } from "storybook/test";
 
-	const { Story } = defineMeta({
-		title: 'Editor/ConfigPanel',
-		component: ConfigPanel,
-		tags: ['autodocs'],
-		parameters: {
-			layout: 'padded'
-		},
-		args: {
-			onClose: fn()
-		}
-	});
+  const { Story } = defineMeta({
+    title: "Editor/ConfigPanel",
+    component: ConfigPanel,
+    tags: ["autodocs"],
+    parameters: {
+      layout: "padded",
+    },
+    args: {
+      onClose: fn(),
+    },
+  });
 </script>
 
 <Story
-	name="Default"
-	args={{
-		title: 'HTTP Request',
-		id: 'node-abc-123',
-		description: 'Send HTTP requests to external APIs',
-		configTitle: 'Configuration'
-	}}
+  name="Default"
+  args={{
+    title: "HTTP Request",
+    id: "node-abc-123",
+    description: "Send HTTP requests to external APIs",
+    configTitle: "Configuration",
+  }}
 />
 
 <Story
-	name="With Details"
-	args={{
-		title: 'OpenAI Chat',
-		id: 'node-def-456',
-		description: 'Chat completion using OpenAI models',
-		details: [
-			{ label: 'Category', value: 'AI' },
-			{ label: 'Version', value: '1.2.0' }
-		]
-	}}
+  name="With Details"
+  args={{
+    title: "OpenAI Chat",
+    id: "node-def-456",
+    description: "Chat completion using OpenAI models",
+    details: [
+      { label: "Category", value: "AI" },
+      { label: "Version", value: "1.2.0" },
+    ],
+  }}
 />
 
 <Story
-	name="Minimal"
-	args={{
-		title: 'Start Node'
-	}}
+  name="Minimal"
+  args={{
+    title: "Start Node",
+  }}
 />

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

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