@d34dman/flowdrop 0.0.60 → 0.0.62

package/dist/stories/CanvasDecorator.svelte

@@ -0,0 +1,50 @@
+<!--
+  CanvasDecorator: Renders child components inside an empty SvelteFlow canvas,
+  matching how overlay components (e.g. CanvasBanner) appear in the workflow editor.
+-->
+<script lang="ts">
+	import { SvelteFlow, Controls } from "@xyflow/svelte";
+	import type { ColorMode } from "@xyflow/svelte";
+	import "@xyflow/svelte/dist/style.css";
+	import type { Snippet } from "svelte";
+
+	let { children }: { children: Snippet } = $props();
+
+	// Watch the data-theme attribute set by Storybook's addon-themes
+	let colorMode = $state<ColorMode>(
+		(document.documentElement.getAttribute("data-theme") as ColorMode) || "light",
+	);
+
+	$effect(() => {
+		const observer = new MutationObserver(() => {
+			colorMode =
+				(document.documentElement.getAttribute("data-theme") as ColorMode) || "light";
+		});
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-theme"],
+		});
+		return () => observer.disconnect();
+	});
+</script>
+
+<div class="canvas-decorator-wrapper">
+	<SvelteFlow nodes={[]} edges={[]} {colorMode}>
+		<Controls />
+		{@render children()}
+	</SvelteFlow>
+</div>
+
+<style>
+	.canvas-decorator-wrapper {
+		width: 800px;
+		height: 400px;
+		position: relative;
+	}
+
+	/* Fix: SvelteFlow's scoped styles use non-prefixed --background-color-default
+	   which doesn't update with colorMode="dark". Map the --xy- themed value. */
+	.canvas-decorator-wrapper :global(.svelte-flow.dark) {
+		--background-color-default: var(--xy-background-color-default);
+	}
+</style>

package/dist/stories/CanvasDecorator.svelte.d.ts

@@ -0,0 +1,8 @@
+import "@xyflow/svelte/dist/style.css";
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const CanvasDecorator: import("svelte").Component<$$ComponentProps, {}, "">;
+type CanvasDecorator = ReturnType<typeof CanvasDecorator>;
+export default CanvasDecorator;

package/dist/stories/NodeDecorator.svelte

@@ -0,0 +1,74 @@
+<!--
+  NodeDecorator: Renders node components as real SvelteFlow nodes
+  inside a canvas, matching how they appear in the workflow editor.
+-->
+<script lang="ts">
+	import { SvelteFlow, Controls } from "@xyflow/svelte";
+	import type { Node, ColorMode } from "@xyflow/svelte";
+	import "@xyflow/svelte/dist/style.css";
+	import UniversalNode from "../components/UniversalNode.svelte";
+	import { registerBuiltinNodes } from "../registry/builtinNodes.js";
+
+	let { data, selected = false }: { data: Record<string, unknown>; selected?: boolean } = $props();
+
+	// Ensure built-in node components are registered
+	registerBuiltinNodes();
+
+	const nodeTypes = {
+		universalNode: UniversalNode,
+	};
+
+	let nodes = $derived<Node[]>([
+		{
+			id: "story-node",
+			type: "universalNode",
+			position: { x: 0, y: 0 },
+			selected,
+			data,
+		},
+	]);
+
+	// Watch the data-theme attribute set by Storybook's addon-themes
+	let colorMode = $state<ColorMode>(
+		(document.documentElement.getAttribute("data-theme") as ColorMode) || "light",
+	);
+
+	$effect(() => {
+		const observer = new MutationObserver(() => {
+			colorMode =
+				(document.documentElement.getAttribute("data-theme") as ColorMode) || "light";
+		});
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-theme"],
+		});
+		return () => observer.disconnect();
+	});
+</script>
+
+<div class="node-decorator-wrapper">
+	<SvelteFlow
+		{nodes}
+		edges={[]}
+		{nodeTypes}
+		fitView
+		fitViewOptions={{ maxZoom: 0.85, padding: 0.2 }}
+		{colorMode}
+	>
+		<Controls />
+	</SvelteFlow>
+</div>
+
+<style>
+	.node-decorator-wrapper {
+		width: 800px;
+		height: 400px;
+		position: relative;
+	}
+
+	/* Fix: SvelteFlow's scoped styles use non-prefixed --background-color-default
+	   which doesn't update with colorMode="dark". Map the --xy- themed value. */
+	.node-decorator-wrapper :global(.svelte-flow.dark) {
+		--background-color-default: var(--xy-background-color-default);
+	}
+</style>

package/dist/stories/NodeDecorator.svelte.d.ts

@@ -0,0 +1,8 @@
+import "@xyflow/svelte/dist/style.css";
+type $$ComponentProps = {
+    data: Record<string, unknown>;
+    selected?: boolean;
+};
+declare const NodeDecorator: import("svelte").Component<$$ComponentProps, {}, "">;
+type NodeDecorator = ReturnType<typeof NodeDecorator>;
+export default NodeDecorator;

package/dist/stories/utils.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Shared story utilities
+ * Reusable mock data factories for Storybook stories
+ */
+import type { ConfirmationConfig, ChoiceConfig, TextConfig, ReviewConfig, ReviewChange } from "../types/interrupt.js";
+export declare function createSampleNodeData(overrides?: Record<string, unknown>): {
+    label: string;
+    config: {};
+    metadata: {
+        id: string;
+        name: string;
+        description: string;
+        category: string;
+        version: string;
+        type: string;
+        inputs: {
+            id: string;
+            name: string;
+            type: string;
+            dataType: string;
+            required: boolean;
+        }[];
+        outputs: {
+            id: string;
+            name: string;
+            type: string;
+            dataType: string;
+        }[];
+    };
+};
+export declare function createTerminalNodeData(variant?: "start" | "end" | "exit"): {
+    label: string;
+    config: {};
+    metadata: {
+        id: string;
+        name: string;
+        description: string;
+        category: string;
+        version: string;
+        type: string;
+        inputs: never[];
+        outputs: {
+            id: string;
+            name: string;
+            type: string;
+            dataType: string;
+        }[];
+    };
+} | {
+    label: string;
+    config: {};
+    metadata: {
+        id: string;
+        name: string;
+        description: string;
+        category: string;
+        version: string;
+        type: string;
+        inputs: {
+            id: string;
+            name: string;
+            type: string;
+            dataType: string;
+            required: boolean;
+        }[];
+        outputs: never[];
+    };
+} | {
+    label: string;
+    config: {};
+    metadata: {
+        id: string;
+        name: string;
+        description: string;
+        category: string;
+        version: string;
+        type: string;
+        subType: string;
+        inputs: {
+            id: string;
+            name: string;
+            type: string;
+            dataType: string;
+            required: boolean;
+        }[];
+        outputs: never[];
+    };
+};
+export declare function createConfirmationConfig(overrides?: Partial<ConfirmationConfig>): ConfirmationConfig;
+export declare function createChoiceConfig(overrides?: Partial<ChoiceConfig>): ChoiceConfig;
+export declare function createTextConfig(overrides?: Partial<TextConfig>): TextConfig;
+export declare function createReviewConfig(overrides?: Partial<ReviewConfig>): ReviewConfig;
+export declare function createReviewChange(overrides?: Partial<ReviewChange>): ReviewChange;

package/dist/stories/utils.js

@@ -0,0 +1,122 @@
+/**
+ * Shared story utilities
+ * Reusable mock data factories for Storybook stories
+ */
+export function createSampleNodeData(overrides) {
+    return {
+        label: "Sample Node",
+        config: {},
+        metadata: {
+            id: "sample-node",
+            name: "Sample Node",
+            description: "A sample node for stories",
+            category: "processing",
+            version: "1.0.0",
+            type: "default",
+            inputs: [{ id: "input", name: "Input", type: "input", dataType: "any", required: false }],
+            outputs: [{ id: "output", name: "Output", type: "output", dataType: "any" }]
+        },
+        ...overrides
+    };
+}
+export function createTerminalNodeData(variant = "start") {
+    const configs = {
+        start: {
+            label: "Start",
+            config: {},
+            metadata: {
+                id: "start",
+                name: "Start",
+                description: "Workflow start point",
+                category: "terminal",
+                version: "1.0.0",
+                type: "terminal",
+                inputs: [],
+                outputs: [{ id: "output", name: "Output", type: "output", dataType: "any" }]
+            }
+        },
+        end: {
+            label: "End",
+            config: {},
+            metadata: {
+                id: "end",
+                name: "End",
+                description: "Workflow end point",
+                category: "terminal",
+                version: "1.0.0",
+                type: "terminal",
+                inputs: [{ id: "input", name: "Input", type: "input", dataType: "any", required: false }],
+                outputs: []
+            }
+        },
+        exit: {
+            label: "Exit",
+            config: {},
+            metadata: {
+                id: "exit",
+                name: "Exit",
+                description: "Early exit point",
+                category: "terminal",
+                version: "1.0.0",
+                type: "terminal",
+                subType: "exit",
+                inputs: [{ id: "input", name: "Input", type: "input", dataType: "any", required: false }],
+                outputs: []
+            }
+        }
+    };
+    return configs[variant];
+}
+export function createConfirmationConfig(overrides) {
+    return {
+        message: "Are you sure you want to proceed with this action?",
+        confirmLabel: "Yes, proceed",
+        cancelLabel: "Cancel",
+        ...overrides
+    };
+}
+export function createChoiceConfig(overrides) {
+    return {
+        message: "Select a priority level for this task:",
+        options: [
+            { value: "low", label: "Low", description: "Non-urgent task" },
+            { value: "medium", label: "Medium", description: "Normal priority" },
+            { value: "high", label: "High", description: "Urgent task" }
+        ],
+        multiple: false,
+        ...overrides
+    };
+}
+export function createTextConfig(overrides) {
+    return {
+        message: "Please provide additional details:",
+        placeholder: "Enter your response here...",
+        multiline: false,
+        ...overrides
+    };
+}
+export function createReviewConfig(overrides) {
+    return {
+        message: "Review the following changes before submitting:",
+        changes: [
+            { field: "title", label: "Title", original: "Old Title", proposed: "New Title" },
+            {
+                field: "description",
+                label: "Description",
+                original: "Old description text",
+                proposed: "Updated description text"
+            },
+            { field: "status", label: "Status", original: "draft", proposed: "published" }
+        ],
+        ...overrides
+    };
+}
+export function createReviewChange(overrides) {
+    return {
+        field: "title",
+        label: "Title",
+        original: "Original value",
+        proposed: "Proposed value",
+        ...overrides
+    };
+}