@d34dman/flowdrop 0.0.60 → 0.0.62

package/dist/components/ConfigForm.svelte

@@ -41,6 +41,7 @@
 	} from '../services/dynamicSchemaService.js';
 	import { globalSaveWorkflow } from '../services/globalSave.js';
 	import { getAvailableVariables } from '../services/variableService.js';
+	import { logger } from '../utils/logger.js';
 
 	interface Props {
 		/** Optional workflow node (if provided, schema and values are derived from it) */
@@ -404,7 +405,7 @@
 			try {
 				await globalSaveWorkflow();
 			} catch (error) {
-				console.error('Failed to save workflow after config save:', error);
+				logger.error('Failed to save workflow after config save:', error);
 			} finally {
 				isSavingWorkflow = false;
 			}
@@ -702,13 +703,13 @@
 	.config-form {
 		display: flex;
 		flex-direction: column;
-		gap: var(--fd-space-6);
+		gap: var(--fd-space-3xl);
 	}
 
 	.config-form__fields {
 		display: flex;
 		flex-direction: column;
-		gap: var(--fd-space-5);
+		gap: var(--fd-space-2xl);
 	}
 
 	/* ============================================
@@ -718,11 +719,11 @@
 
 	.config-form__footer {
 		display: flex;
-		gap: var(--fd-space-3);
+		gap: var(--fd-space-md);
 		justify-content: flex-end;
-		padding-top: var(--fd-space-4);
+		padding-top: var(--fd-space-xl);
 		border-top: 1px solid var(--fd-border-muted);
-		margin-top: var(--fd-space-2);
+		margin-top: var(--fd-space-xs);
 	}
 
 	/* Button Spinner */
@@ -744,8 +745,8 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--fd-space-2);
-		padding: 0.625rem var(--fd-space-4);
+		gap: var(--fd-space-xs);
+		padding: 0.625rem var(--fd-space-xl);
 		border-radius: var(--fd-radius-lg);
 		font-size: var(--fd-text-sm);
 		font-weight: 600;
@@ -816,14 +817,14 @@
 		border: 1px solid var(--fd-border);
 		border-radius: var(--fd-radius-lg);
 		overflow: hidden;
-		margin-top: var(--fd-space-2);
+		margin-top: var(--fd-space-xs);
 	}
 
 	.config-form__extensions-header {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-3) var(--fd-space-4);
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-md) var(--fd-space-xl);
 		background-color: var(--fd-subtle);
 		border-bottom: 1px solid var(--fd-border);
 		font-size: 0.8125rem;
@@ -838,10 +839,10 @@
 	}
 
 	.config-form__extensions-content {
-		padding: var(--fd-space-4);
+		padding: var(--fd-space-xl);
 		display: flex;
 		flex-direction: column;
-		gap: var(--fd-space-4);
+		gap: var(--fd-space-xl);
 	}
 
 	/* ============================================
@@ -858,8 +859,8 @@
 	.config-form__debug-header {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-3) var(--fd-space-4);
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-md) var(--fd-space-xl);
 		background-color: var(--fd-warning-muted);
 		border-bottom: 1px solid var(--fd-warning);
 		font-size: 0.8125rem;
@@ -874,7 +875,7 @@
 
 	.config-form__debug-content {
 		margin: 0;
-		padding: var(--fd-space-4);
+		padding: var(--fd-space-xl);
 		font-size: var(--fd-text-xs);
 		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
 		color: var(--fd-foreground);
@@ -892,14 +893,14 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		padding: var(--fd-space-12) var(--fd-space-6);
+		padding: var(--fd-space-6xl) var(--fd-space-3xl);
 		text-align: center;
 	}
 
 	.config-form__empty-icon {
 		width: 3rem;
 		height: 3rem;
-		margin-bottom: var(--fd-space-4);
+		margin-bottom: var(--fd-space-xl);
 		color: var(--fd-border);
 	}
 
@@ -917,7 +918,7 @@
 	}
 
 	.config-form__empty-button {
-		margin-top: var(--fd-space-4);
+		margin-top: var(--fd-space-xl);
 	}
 
 	/* ============================================
@@ -929,14 +930,14 @@
 		border: 1px solid var(--fd-primary);
 		border-radius: 0.625rem;
 		overflow: hidden;
-		margin-bottom: var(--fd-space-4);
+		margin-bottom: var(--fd-space-xl);
 	}
 
 	.config-form__admin-edit-header {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-3) var(--fd-space-4);
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-md) var(--fd-space-xl);
 		background: linear-gradient(135deg, var(--fd-primary-muted) 0%, var(--fd-primary-muted) 100%);
 		border-bottom: 1px solid var(--fd-primary);
 		font-size: 0.8125rem;
@@ -951,10 +952,10 @@
 	}
 
 	.config-form__admin-edit-content {
-		padding: var(--fd-space-4);
+		padding: var(--fd-space-xl);
 		display: flex;
 		flex-direction: column;
-		gap: var(--fd-space-3);
+		gap: var(--fd-space-md);
 	}
 
 	.config-form__admin-edit-description {
@@ -973,8 +974,8 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		padding: var(--fd-space-12) var(--fd-space-6);
-		gap: var(--fd-space-4);
+		padding: var(--fd-space-6xl) var(--fd-space-3xl);
+		gap: var(--fd-space-xl);
 	}
 
 	.config-form__loading-spinner {
@@ -1012,8 +1013,8 @@
 	.config-form__error-header {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-3) var(--fd-space-4);
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-md) var(--fd-space-xl);
 		background-color: var(--fd-error-muted);
 		border-bottom: 1px solid var(--fd-error);
 		font-size: 0.8125rem;
@@ -1028,10 +1029,10 @@
 	}
 
 	.config-form__error-content {
-		padding: var(--fd-space-4);
+		padding: var(--fd-space-xl);
 		display: flex;
 		flex-direction: column;
-		gap: var(--fd-space-3);
+		gap: var(--fd-space-md);
 	}
 
 	.config-form__error-message {
@@ -1043,7 +1044,7 @@
 
 	.config-form__error-actions {
 		display: flex;
-		gap: var(--fd-space-2);
+		gap: var(--fd-space-xs);
 		flex-wrap: wrap;
 	}
 
@@ -1053,9 +1054,9 @@
 
 	.config-form__schema-actions {
 		display: flex;
-		gap: var(--fd-space-2);
-		margin-bottom: var(--fd-space-4);
-		padding-bottom: var(--fd-space-3);
+		gap: var(--fd-space-xs);
+		margin-bottom: var(--fd-space-xl);
+		padding-bottom: var(--fd-space-md);
 		border-bottom: 1px solid var(--fd-border-muted);
 	}
 
@@ -1063,8 +1064,8 @@
 	.config-form__schema-external {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--fd-space-1);
-		padding: var(--fd-space-1) var(--fd-space-2);
+		gap: var(--fd-space-3xs);
+		padding: var(--fd-space-3xs) var(--fd-space-xs);
 		font-size: var(--fd-text-xs);
 		font-weight: 500;
 		font-family: inherit;

package/dist/components/ConfigPanel.stories.svelte

@@ -0,0 +1,38 @@
+<script module>
+	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(),
+		},
+	});
+</script>
+
+<Story 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" },
+	],
+}} />
+
+<Story name="Minimal" args={{
+	title: "Start Node",
+}} />

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

@@ -0,0 +1,27 @@
+export default ConfigPanel;
+type ConfigPanel = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ConfigPanel: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ConfigPanel.svelte

@@ -9,7 +9,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import ReadOnlyDetails from './ReadOnlyDetails.svelte';
-	import { uiSettings } from '../stores/settingsStore.js';
+	import { getUiSettings } from '../stores/settingsStore.svelte.js';
 
 	/**
 	 * A single detail item with label and value
@@ -57,7 +57,7 @@
 	const hasDetails = $derived(id !== undefined || details.length > 0 || description !== undefined);
 </script>
 
-<div class="config-panel" class:config-panel--compact={$uiSettings.compactMode}>
+<div class="config-panel" class:config-panel--compact={getUiSettings().compactMode}>
 	<!-- Header -->
 	<div class="config-panel__header">
 		<h2 class="config-panel__title">{title}</h2>

package/dist/components/ConnectionLine.svelte

@@ -18,7 +18,7 @@
 		fill="none"
 		stroke-width={1.5}
 		class="animated"
-		stroke={getDataTypeColor(connection.current.fromHandle.id)}
+		stroke={getDataTypeColor(connection.current.fromHandle.id ?? '')}
 		d={path}
 	/>
 	<circle
@@ -26,7 +26,7 @@
 		cy={connection.current.to.y}
 		fill="#fff"
 		r={3}
-		stroke={getDataTypeColor(connection.current.fromHandle.id)}
+		stroke={getDataTypeColor(connection.current.fromHandle.id ?? '')}
 		stroke-width={1.5}
 	/>
 {/if}

package/dist/components/FlowDropZone.svelte

@@ -10,6 +10,8 @@
 
 	interface Props {
 		ondrop: (nodeTypeData: string, position: { x: number; y: number }) => void;
+		/** Optional callback invoked when a JSON file is dropped onto the canvas. */
+		onfiledrop?: (file: File) => void;
 		children: Snippet;
 	}
 
@@ -29,12 +31,26 @@
 	}
 
 	/**
-	 * Handle drop event with proper coordinate transformation
+	 * Handle drop event with proper coordinate transformation.
+	 *
+	 * If the drag event carries a JSON file (e.g. a workflow file dragged from the OS),
+	 * the `onfiledrop` callback is invoked with the file.
+	 * Otherwise the node-type drop path is used as before.
 	 */
 	function handleDrop(e: DragEvent): void {
 		e.preventDefault();
 
-		// Get the data from the drag event
+		// Check if the drop contains files (e.g. a workflow JSON file from the OS)
+		const files = e.dataTransfer?.files;
+		if (files && files.length > 0) {
+			const file = files[0];
+			if (props.onfiledrop && (file.type === 'application/json' || file.name.endsWith('.json'))) {
+				props.onfiledrop(file);
+			}
+			return;
+		}
+
+		// Get the data from the drag event (node type dropped from sidebar)
 		const nodeTypeData = e.dataTransfer?.getData('application/json');
 		if (nodeTypeData) {
 			// Convert screen coordinates to flow coordinates (accounts for zoom and pan)

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

@@ -4,6 +4,8 @@ interface Props {
         x: number;
         y: number;
     }) => void;
+    /** Optional callback invoked when a JSON file is dropped onto the canvas. */
+    onfiledrop?: (file: File) => void;
     children: Snippet;
 }
 declare const FlowDropZone: import("svelte").Component<Props, {}, "">;

package/dist/components/LoadingSpinner.stories.svelte

@@ -0,0 +1,30 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import LoadingSpinner from "./LoadingSpinner.svelte";
+
+	const { Story } = defineMeta({
+		title: "Display/LoadingSpinner",
+		component: LoadingSpinner,
+		tags: ["autodocs"],
+		argTypes: {
+			size: {
+				control: { type: "select" },
+				options: ["xs", "sm", "md", "lg"],
+			},
+			text: { control: "text" },
+			showText: { control: "boolean" },
+		},
+	});
+</script>
+
+<Story name="Default" />
+
+<Story name="Extra Small" args={{ size: "xs" }} />
+
+<Story name="Small" args={{ size: "sm" }} />
+
+<Story name="Large" args={{ size: "lg" }} />
+
+<Story name="Custom Text" args={{ text: "Processing..." }} />
+
+<Story name="No Text" args={{ showText: false }} />

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

@@ -0,0 +1,27 @@
+export default LoadingSpinner;
+type LoadingSpinner = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const LoadingSpinner: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import LoadingSpinner from "./LoadingSpinner.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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/Logo.stories.svelte

@@ -0,0 +1,22 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Logo from "./Logo.svelte";
+
+	const { Story } = defineMeta({
+		title: "Display/Logo",
+		component: Logo,
+		tags: ["autodocs"],
+	});
+</script>
+
+<Story name="Default">
+	<div style="width: 64px; height: 64px;">
+		<Logo />
+	</div>
+</Story>
+
+<Story name="Large">
+	<div style="width: 128px; height: 128px;">
+		<Logo />
+	</div>
+</Story>

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

@@ -0,0 +1,27 @@
+export default Logo;
+type Logo = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Logo: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Logo from "./Logo.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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/Logo.svelte

@@ -10,7 +10,7 @@
 		<defs id="defs2"></defs>
 		<g id="g6669-7-7-3-3" transform="translate(472.2413,571.30469)">
 			<rect
-				style="fill:#f9f9f9;stroke:#000000;stroke-width:10px"
+				style="fill:var(--logo-bg);stroke:var(--logo-stroke);stroke-width:10px"
 				x="-462.2413"
 				y="-561.30469"
 				width="480"
@@ -21,39 +21,39 @@
 			/>
 			<g id="g6893-4-9-5-2" transform="matrix(1.2053353,0,0,1.2053353,-1246.7763,-599.46548)">
 				<path
-					style="fill:#000000;stroke-width:10;stroke-dasharray:none"
-					d="M 850,120 V 310 Z"
+					style="fill:var(--logo-line-fill);stroke:var(--logo-stroke);stroke-width:10;stroke-dasharray:none;stroke-opacity:1"
+					d="M 849.61489,153.69711 850,298.31429 Z"
 					id="path1152-1-7-1-4"
 				/>
 				<path
-					style="fill:#000000;stroke:#000000;stroke-width:8.29645;stroke-dasharray:none;stroke-opacity:1"
-					d="M 850,110 V 310"
+					style="fill:var(--logo-line-fill);stroke:var(--logo-stroke);stroke-width:8.29645;stroke-dasharray:none;stroke-opacity:1"
+					d="m 849.08332,152.77665 0.82965,145.18782"
 					id="path1160-08-5-7-1"
 				/>
 				<path
-					style="fill:none;stroke:#000000;stroke-width:7.49273;stroke-dasharray:none;stroke-opacity:1"
-					d="m 850,158.973 v 36.70355 8.15635 c 0,0 1.19184,39.5038 -36.01255,65.25076 -29.46481,20.39086 -52.3819,16.31269 -55.65576,65.25076 v 44.8599"
+					style="fill:none;stroke:var(--logo-stroke);stroke-width:7.49273;stroke-dasharray:none;stroke-opacity:1"
+					d="m 850,158.973 v 36.70355 8.15635 c 0,0 1.19184,39.5038 -36.01255,65.25076 -29.46481,20.39086 -52.3819,16.31269 -55.65576,65.25076 l -0.50928,5.11228"
 					id="path6610-14-5-4-8"
 				/>
 				<path
-					style="fill:none;stroke:#000000;stroke-width:7.5253;stroke-dasharray:none;stroke-opacity:1"
-					d="m 850,158.973 v 37.02335 8.22741 c 0,0 -1.19184,39.84799 36.01255,65.81929 29.46481,20.56853 52.3819,16.45482 55.65576,65.81929 v 45.25076"
+					style="fill:none;stroke:var(--logo-stroke);stroke-width:7.5253;stroke-dasharray:none;stroke-opacity:1"
+					d="m 850,158.973 v 37.02335 8.22741 c 0,0 -1.19184,39.84799 36.01255,65.81929 29.46481,20.56853 52.3819,16.45482 55.65576,65.81929 l -0.49443,4.414"
 					id="path6610-14-7-2-5-2"
 				/>
 				<path
 					d="m 849.41763,64.456369 25.36824,31.087262 c 6.23336,6.364119 10.06921,15.063569 10.06921,24.656839 0,19.50109 -15.85132,35.30988 -35.42373,35.30988 -19.57241,0 -35.43242,-15.80879 -35.43242,-35.30988 0,-9.49405 3.75813,-18.11351 9.87536,-24.458879 z"
-					style="fill:#009cde;stroke:#000000;stroke-width:8.29645;stroke-dasharray:none;paint-order:fill"
+					style="fill:var(--logo-drop);stroke:var(--logo-stroke);stroke-width:8.29645;stroke-dasharray:none;paint-order:fill"
 					id="path21-6-4-4-1-6"
 				/>
 				<circle
-					style="fill:#f46351;stroke:#000000;stroke-width:8.29645;stroke-dasharray:none"
+					style="fill:var(--logo-circle);stroke:var(--logo-stroke);stroke-width:8.29645;stroke-dasharray:none"
 					cx="849.427"
 					cy="326.5929"
 					id="ellipse23-6-57-9-4-0"
 					r="30"
 				/>
 				<ellipse
-					style="fill:#ccbaf4;stroke:#000000;stroke-width:8.29645;stroke-dasharray:none"
+					style="fill:var(--logo-left);stroke:var(--logo-stroke);stroke-width:8.29645;stroke-dasharray:none"
 					cx="759.99994"
 					cy="369.44669"
 					id="ellipse25-7-9-4-6-3"
@@ -61,7 +61,7 @@
 					ry="30.000004"
 				/>
 				<ellipse
-					style="fill:#ffc423;stroke:#000000;stroke-width:8.29645;stroke-dasharray:none"
+					style="fill:var(--logo-right);stroke:var(--logo-stroke);stroke-width:8.29645;stroke-dasharray:none"
 					cx="939.99963"
 					cy="369.44669"
 					id="ellipse27-8-8-4-0-9"
@@ -75,6 +75,26 @@
 </div>
 
 <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;
+	}
+
+	: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;
+	}
+
 	.flowdrop-logo :global(svg) {
 		width: 100%;
 		height: 100%;

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

@@ -4,7 +4,7 @@ type Logo = SvelteComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string;
+    $$bindings?: string | undefined;
 };
 declare const Logo: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;

package/dist/components/MarkdownDisplay.stories.svelte

@@ -0,0 +1,21 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import MarkdownDisplay from "./MarkdownDisplay.svelte";
+
+	const { Story } = defineMeta({
+		title: "Display/MarkdownDisplay",
+		component: MarkdownDisplay,
+		tags: ["autodocs"],
+		argTypes: {
+			content: { control: "text" },
+		},
+	});
+</script>
+
+<Story name="Simple" args={{ content: "Hello **world**! This is *italic* and `inline code`." }} />
+
+<Story name="Headings" args={{ content: "# Heading 1\n## Heading 2\n### Heading 3\n\nParagraph text below headings." }} />
+
+<Story name="Code Block" args={{ content: "Here is a code example:\n\n```javascript\nconst greeting = \"Hello\";\nconsole.log(greeting);\n```\n\nAnd some text after." }} />
+
+<Story name="Full Document" args={{ content: "# Workflow Guide\n\n## Getting Started\n\nFollow these steps:\n\n1. Create a new workflow\n2. Add nodes from the sidebar\n3. Connect nodes with edges\n\n> **Tip:** Use keyboard shortcuts for faster editing.\n\n### Supported Node Types\n\n| Type | Description |\n|------|-------------|\n| Start | Entry point |\n| End | Exit point |\n| Tool | Processing step |\n\nFor more info, visit [the docs](https://example.com)." }} />

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

@@ -0,0 +1,27 @@
+export default MarkdownDisplay;
+type MarkdownDisplay = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const MarkdownDisplay: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import MarkdownDisplay from "./MarkdownDisplay.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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/MarkdownDisplay.svelte

@@ -6,6 +6,7 @@
 
 <script lang="ts">
 	import { marked } from 'marked';
+	import { sanitizeHtml } from '../utils/sanitize.js';
 
 	interface Props {
 		content: string;
@@ -14,15 +15,15 @@
 
 	let props: Props = $props();
 
-	// Parse markdown content
-	let renderedContent = $derived(marked.parse(props.content || ''));
+	// Parse markdown content and sanitize to prevent XSS
+	let renderedContent = $derived(sanitizeHtml(marked.parse(props.content || '') as string));
 
 	// Default class name if none provided
 	let displayClass = $derived(props.className || 'markdown-display');
 </script>
 
 <div class={displayClass}>
-	<!-- marked.js sanitizes content by default to prevent XSS attacks -->
+	<!-- Content is sanitized with DOMPurify to prevent XSS -->
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html renderedContent}
 </div>