@d34dman/flowdrop 0.0.62 → 0.0.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (115) hide show
  1. package/README.md +2 -0
  2. package/dist/adapters/agentspec/AgentSpecAdapter.js +1 -40
  3. package/dist/api/enhanced-client.d.ts +19 -0
  4. package/dist/api/enhanced-client.js +9 -0
  5. package/dist/components/App.svelte +31 -35
  6. package/dist/components/CanvasBanner.stories.svelte +12 -8
  7. package/dist/components/CanvasBanner.stories.svelte.d.ts +1 -1
  8. package/dist/components/ConfigPanel.stories.svelte +35 -26
  9. package/dist/components/ConfigPanel.stories.svelte.d.ts +1 -1
  10. package/dist/components/LoadingSpinner.stories.svelte +13 -13
  11. package/dist/components/LoadingSpinner.stories.svelte.d.ts +1 -1
  12. package/dist/components/Logo.stories.svelte +4 -4
  13. package/dist/components/Logo.stories.svelte.d.ts +1 -1
  14. package/dist/components/MarkdownDisplay.stories.svelte +25 -10
  15. package/dist/components/MarkdownDisplay.stories.svelte.d.ts +1 -1
  16. package/dist/components/Navbar.stories.svelte +42 -30
  17. package/dist/components/Navbar.stories.svelte.d.ts +1 -1
  18. package/dist/components/Navbar.svelte +6 -3
  19. package/dist/components/NodeStatusOverlay.stories.svelte +61 -50
  20. package/dist/components/NodeStatusOverlay.stories.svelte.d.ts +1 -1
  21. package/dist/components/PipelineStatus.svelte +9 -12
  22. package/dist/components/PipelineStatus.svelte.d.ts +2 -2
  23. package/dist/components/SchemaForm.stories.svelte +97 -82
  24. package/dist/components/SchemaForm.stories.svelte.d.ts +1 -1
  25. package/dist/components/SchemaForm.svelte +6 -2
  26. package/dist/components/SettingsPanel.svelte +5 -1
  27. package/dist/components/StatusIcon.stories.svelte +15 -15
  28. package/dist/components/StatusIcon.stories.svelte.d.ts +1 -1
  29. package/dist/components/StatusLabel.stories.svelte +8 -8
  30. package/dist/components/StatusLabel.stories.svelte.d.ts +1 -1
  31. package/dist/components/ThemeToggle.stories.svelte +10 -10
  32. package/dist/components/ThemeToggle.stories.svelte.d.ts +1 -1
  33. package/dist/components/WorkflowEditor.svelte +23 -9
  34. package/dist/components/form/FormCheckboxGroup.stories.svelte +13 -13
  35. package/dist/components/form/FormCheckboxGroup.stories.svelte.d.ts +1 -1
  36. package/dist/components/form/FormField.svelte +2 -2
  37. package/dist/components/form/FormFieldLight.svelte +4 -4
  38. package/dist/components/form/FormFieldWrapper.stories.svelte +38 -16
  39. package/dist/components/form/FormFieldWrapper.stories.svelte.d.ts +1 -1
  40. package/dist/components/form/FormNumberField.stories.svelte +21 -18
  41. package/dist/components/form/FormNumberField.stories.svelte.d.ts +1 -1
  42. package/dist/components/form/FormRangeField.stories.svelte +13 -13
  43. package/dist/components/form/FormRangeField.stories.svelte.d.ts +1 -1
  44. package/dist/components/form/FormSelect.stories.svelte +21 -21
  45. package/dist/components/form/FormSelect.stories.svelte.d.ts +1 -1
  46. package/dist/components/form/FormTemplateEditor.svelte +0 -13
  47. package/dist/components/form/FormTemplateEditor.svelte.d.ts +1 -7
  48. package/dist/components/form/FormTextField.stories.svelte +17 -17
  49. package/dist/components/form/FormTextField.stories.svelte.d.ts +1 -1
  50. package/dist/components/form/FormTextarea.stories.svelte +21 -18
  51. package/dist/components/form/FormTextarea.stories.svelte.d.ts +1 -1
  52. package/dist/components/form/FormToggle.stories.svelte +13 -13
  53. package/dist/components/form/FormToggle.stories.svelte.d.ts +1 -1
  54. package/dist/components/form/index.d.ts +2 -1
  55. package/dist/components/form/index.js +1 -2
  56. package/dist/components/form/types.d.ts +8 -20
  57. package/dist/components/form/types.js +3 -8
  58. package/dist/components/interrupt/ChoicePrompt.stories.svelte +37 -28
  59. package/dist/components/interrupt/ChoicePrompt.stories.svelte.d.ts +1 -1
  60. package/dist/components/interrupt/ConfirmationPrompt.stories.svelte +57 -35
  61. package/dist/components/interrupt/ConfirmationPrompt.stories.svelte.d.ts +1 -1
  62. package/dist/components/interrupt/ReviewPrompt.stories.svelte +52 -31
  63. package/dist/components/interrupt/ReviewPrompt.stories.svelte.d.ts +1 -1
  64. package/dist/components/interrupt/ReviewPrompt.svelte +42 -25
  65. package/dist/components/interrupt/TextInputPrompt.stories.svelte +32 -19
  66. package/dist/components/interrupt/TextInputPrompt.stories.svelte.d.ts +1 -1
  67. package/dist/components/nodes/GatewayNode.stories.svelte +96 -64
  68. package/dist/components/nodes/IdeaNode.stories.svelte +40 -36
  69. package/dist/components/nodes/NotesNode.stories.svelte +61 -54
  70. package/dist/components/nodes/SimpleNode.stories.svelte +141 -83
  71. package/dist/components/nodes/SquareNode.stories.svelte +70 -44
  72. package/dist/components/nodes/TerminalNode.stories.svelte +10 -10
  73. package/dist/components/nodes/TerminalNode.svelte +7 -3
  74. package/dist/components/nodes/ToolNode.stories.svelte +177 -59
  75. package/dist/components/nodes/WorkflowNode.stories.svelte +43 -38
  76. package/dist/components/playground/MessageBubble.stories.svelte +51 -38
  77. package/dist/components/playground/MessageBubble.stories.svelte.d.ts +1 -1
  78. package/dist/components/playground/Playground.svelte +1 -4
  79. package/dist/config/constants.d.ts +21 -0
  80. package/dist/config/constants.js +9 -0
  81. package/dist/core/index.d.ts +7 -5
  82. package/dist/core/index.js +5 -5
  83. package/dist/editor/index.d.ts +4 -4
  84. package/dist/editor/index.js +3 -4
  85. package/dist/form/code.js +16 -4
  86. package/dist/form/fieldRegistry.d.ts +8 -82
  87. package/dist/form/fieldRegistry.js +9 -101
  88. package/dist/form/full.d.ts +4 -1
  89. package/dist/form/full.js +6 -1
  90. package/dist/form/index.d.ts +1 -1
  91. package/dist/form/index.js +0 -2
  92. package/dist/form/markdown.js +11 -3
  93. package/dist/helpers/workflowEditorHelper.d.ts +0 -3
  94. package/dist/helpers/workflowEditorHelper.js +12 -50
  95. package/dist/index.js +3 -0
  96. package/dist/schemas/v1/workflow.schema.json +950 -1076
  97. package/dist/services/apiVariableService.d.ts +1 -3
  98. package/dist/services/apiVariableService.js +3 -4
  99. package/dist/services/dynamicSchemaService.js +3 -4
  100. package/dist/stories/CanvasDecorator.svelte +7 -8
  101. package/dist/stories/CanvasDecorator.svelte.d.ts +2 -2
  102. package/dist/stories/NodeDecorator.svelte +13 -14
  103. package/dist/stories/NodeDecorator.svelte.d.ts +1 -1
  104. package/dist/stories/utils.d.ts +2 -2
  105. package/dist/stories/utils.js +55 -55
  106. package/dist/styles/base.css +12 -4
  107. package/dist/styles/tokens.css +138 -130
  108. package/dist/types/interrupt.d.ts +1 -4
  109. package/dist/utils/errors.d.ts +28 -0
  110. package/dist/utils/errors.js +44 -0
  111. package/dist/utils/handleIds.d.ts +35 -0
  112. package/dist/utils/handleIds.js +58 -0
  113. package/package.json +53 -12
  114. package/dist/api/client.d.ts +0 -110
  115. package/dist/api/client.js +0 -240
@@ -28,9 +28,7 @@ export interface ApiVariableResult {
28
28
  /** Whether the schema was loaded from cache */
29
29
  fromCache?: boolean;
30
30
  }
31
- /**
32
- * Default cache TTL in milliseconds (5 minutes)
33
- */
31
+ /** Default cache TTL for variable data */
34
32
  export declare const DEFAULT_VARIABLE_CACHE_TTL: number;
35
33
  /**
36
34
  * Replaces {workflowId} and {nodeId} placeholders in URL template.
@@ -7,15 +7,14 @@
7
7
  */
8
8
  import { getEndpointConfig } from './api.js';
9
9
  import { logger } from '../utils/logger.js';
10
+ import { DEFAULT_CACHE_TTL_MS } from '../config/constants.js';
10
11
  /**
11
12
  * Variable schema cache with TTL support
12
13
  * Key format: `variables:{workflowId}:{nodeId}`
13
14
  */
14
15
  const variableCache = new Map();
15
- /**
16
- * Default cache TTL in milliseconds (5 minutes)
17
- */
18
- export const DEFAULT_VARIABLE_CACHE_TTL = 5 * 60 * 1000;
16
+ /** Default cache TTL for variable data */
17
+ export const DEFAULT_VARIABLE_CACHE_TTL = DEFAULT_CACHE_TTL_MS;
19
18
  /**
20
19
  * Replaces {workflowId} and {nodeId} placeholders in URL template.
21
20
  *
@@ -6,15 +6,14 @@
6
6
  * @module services/dynamicSchemaService
7
7
  */
8
8
  import { getEndpointConfig } from './api.js';
9
+ import { DEFAULT_CACHE_TTL_MS } from '../config/constants.js';
9
10
  /**
10
11
  * Schema cache with TTL support
11
12
  * Key format: `{nodeTypeId}:{instanceId}` or `{nodeTypeId}` for type-level caching
12
13
  */
13
14
  const schemaCache = new Map();
14
- /**
15
- * Default cache TTL in milliseconds (5 minutes)
16
- */
17
- const DEFAULT_CACHE_TTL = 5 * 60 * 1000;
15
+ /** Local alias for cache TTL */
16
+ const DEFAULT_CACHE_TTL = DEFAULT_CACHE_TTL_MS;
18
17
  /**
19
18
  * Resolves a template variable path from the node context.
20
19
  * Supports dot-notation paths like "metadata.id", "config.apiKey", "id"
@@ -3,26 +3,25 @@
3
3
  matching how overlay components (e.g. CanvasBanner) appear in the workflow editor.
4
4
  -->
5
5
  <script lang="ts">
6
- import { SvelteFlow, Controls } from "@xyflow/svelte";
7
- import type { ColorMode } from "@xyflow/svelte";
8
- import "@xyflow/svelte/dist/style.css";
9
- import type { Snippet } from "svelte";
6
+ import { SvelteFlow, Controls } from '@xyflow/svelte';
7
+ import type { ColorMode } from '@xyflow/svelte';
8
+ import '@xyflow/svelte/dist/style.css';
9
+ import type { Snippet } from 'svelte';
10
10
 
11
11
  let { children }: { children: Snippet } = $props();
12
12
 
13
13
  // Watch the data-theme attribute set by Storybook's addon-themes
14
14
  let colorMode = $state<ColorMode>(
15
- (document.documentElement.getAttribute("data-theme") as ColorMode) || "light",
15
+ (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light'
16
16
  );
17
17
 
18
18
  $effect(() => {
19
19
  const observer = new MutationObserver(() => {
20
- colorMode =
21
- (document.documentElement.getAttribute("data-theme") as ColorMode) || "light";
20
+ colorMode = (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light';
22
21
  });
23
22
  observer.observe(document.documentElement, {
24
23
  attributes: true,
25
- attributeFilter: ["data-theme"],
24
+ attributeFilter: ['data-theme']
26
25
  });
27
26
  return () => observer.disconnect();
28
27
  });
@@ -1,5 +1,5 @@
1
- import "@xyflow/svelte/dist/style.css";
2
- import type { Snippet } from "svelte";
1
+ import '@xyflow/svelte/dist/style.css';
2
+ import type { Snippet } from 'svelte';
3
3
  type $$ComponentProps = {
4
4
  children: Snippet;
5
5
  };
@@ -3,11 +3,11 @@
3
3
  inside a canvas, matching how they appear in the workflow editor.
4
4
  -->
5
5
  <script lang="ts">
6
- import { SvelteFlow, Controls } from "@xyflow/svelte";
7
- import type { Node, ColorMode } from "@xyflow/svelte";
8
- import "@xyflow/svelte/dist/style.css";
9
- import UniversalNode from "../components/UniversalNode.svelte";
10
- import { registerBuiltinNodes } from "../registry/builtinNodes.js";
6
+ import { SvelteFlow, Controls } from '@xyflow/svelte';
7
+ import type { Node, ColorMode } from '@xyflow/svelte';
8
+ import '@xyflow/svelte/dist/style.css';
9
+ import UniversalNode from '../components/UniversalNode.svelte';
10
+ import { registerBuiltinNodes } from '../registry/builtinNodes.js';
11
11
 
12
12
  let { data, selected = false }: { data: Record<string, unknown>; selected?: boolean } = $props();
13
13
 
@@ -15,32 +15,31 @@
15
15
  registerBuiltinNodes();
16
16
 
17
17
  const nodeTypes = {
18
- universalNode: UniversalNode,
18
+ universalNode: UniversalNode
19
19
  };
20
20
 
21
21
  let nodes = $derived<Node[]>([
22
22
  {
23
- id: "story-node",
24
- type: "universalNode",
23
+ id: 'story-node',
24
+ type: 'universalNode',
25
25
  position: { x: 0, y: 0 },
26
26
  selected,
27
- data,
28
- },
27
+ data
28
+ }
29
29
  ]);
30
30
 
31
31
  // Watch the data-theme attribute set by Storybook's addon-themes
32
32
  let colorMode = $state<ColorMode>(
33
- (document.documentElement.getAttribute("data-theme") as ColorMode) || "light",
33
+ (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light'
34
34
  );
35
35
 
36
36
  $effect(() => {
37
37
  const observer = new MutationObserver(() => {
38
- colorMode =
39
- (document.documentElement.getAttribute("data-theme") as ColorMode) || "light";
38
+ colorMode = (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light';
40
39
  });
41
40
  observer.observe(document.documentElement, {
42
41
  attributes: true,
43
- attributeFilter: ["data-theme"],
42
+ attributeFilter: ['data-theme']
44
43
  });
45
44
  return () => observer.disconnect();
46
45
  });
@@ -1,4 +1,4 @@
1
- import "@xyflow/svelte/dist/style.css";
1
+ import '@xyflow/svelte/dist/style.css';
2
2
  type $$ComponentProps = {
3
3
  data: Record<string, unknown>;
4
4
  selected?: boolean;
@@ -2,7 +2,7 @@
2
2
  * Shared story utilities
3
3
  * Reusable mock data factories for Storybook stories
4
4
  */
5
- import type { ConfirmationConfig, ChoiceConfig, TextConfig, ReviewConfig, ReviewChange } from "../types/interrupt.js";
5
+ import type { ConfirmationConfig, ChoiceConfig, TextConfig, ReviewConfig, ReviewChange } from '../types/interrupt.js';
6
6
  export declare function createSampleNodeData(overrides?: Record<string, unknown>): {
7
7
  label: string;
8
8
  config: {};
@@ -28,7 +28,7 @@ export declare function createSampleNodeData(overrides?: Record<string, unknown>
28
28
  }[];
29
29
  };
30
30
  };
31
- export declare function createTerminalNodeData(variant?: "start" | "end" | "exit"): {
31
+ export declare function createTerminalNodeData(variant?: 'start' | 'end' | 'exit'): {
32
32
  label: string;
33
33
  config: {};
34
34
  metadata: {
@@ -4,63 +4,63 @@
4
4
  */
5
5
  export function createSampleNodeData(overrides) {
6
6
  return {
7
- label: "Sample Node",
7
+ label: 'Sample Node',
8
8
  config: {},
9
9
  metadata: {
10
- id: "sample-node",
11
- name: "Sample Node",
12
- description: "A sample node for stories",
13
- category: "processing",
14
- version: "1.0.0",
15
- type: "default",
16
- inputs: [{ id: "input", name: "Input", type: "input", dataType: "any", required: false }],
17
- outputs: [{ id: "output", name: "Output", type: "output", dataType: "any" }]
10
+ id: 'sample-node',
11
+ name: 'Sample Node',
12
+ description: 'A sample node for stories',
13
+ category: 'processing',
14
+ version: '1.0.0',
15
+ type: 'default',
16
+ inputs: [{ id: 'input', name: 'Input', type: 'input', dataType: 'any', required: false }],
17
+ outputs: [{ id: 'output', name: 'Output', type: 'output', dataType: 'any' }]
18
18
  },
19
19
  ...overrides
20
20
  };
21
21
  }
22
- export function createTerminalNodeData(variant = "start") {
22
+ export function createTerminalNodeData(variant = 'start') {
23
23
  const configs = {
24
24
  start: {
25
- label: "Start",
25
+ label: 'Start',
26
26
  config: {},
27
27
  metadata: {
28
- id: "start",
29
- name: "Start",
30
- description: "Workflow start point",
31
- category: "terminal",
32
- version: "1.0.0",
33
- type: "terminal",
28
+ id: 'start',
29
+ name: 'Start',
30
+ description: 'Workflow start point',
31
+ category: 'terminal',
32
+ version: '1.0.0',
33
+ type: 'terminal',
34
34
  inputs: [],
35
- outputs: [{ id: "output", name: "Output", type: "output", dataType: "any" }]
35
+ outputs: [{ id: 'output', name: 'Output', type: 'output', dataType: 'any' }]
36
36
  }
37
37
  },
38
38
  end: {
39
- label: "End",
39
+ label: 'End',
40
40
  config: {},
41
41
  metadata: {
42
- id: "end",
43
- name: "End",
44
- description: "Workflow end point",
45
- category: "terminal",
46
- version: "1.0.0",
47
- type: "terminal",
48
- inputs: [{ id: "input", name: "Input", type: "input", dataType: "any", required: false }],
42
+ id: 'end',
43
+ name: 'End',
44
+ description: 'Workflow end point',
45
+ category: 'terminal',
46
+ version: '1.0.0',
47
+ type: 'terminal',
48
+ inputs: [{ id: 'input', name: 'Input', type: 'input', dataType: 'any', required: false }],
49
49
  outputs: []
50
50
  }
51
51
  },
52
52
  exit: {
53
- label: "Exit",
53
+ label: 'Exit',
54
54
  config: {},
55
55
  metadata: {
56
- id: "exit",
57
- name: "Exit",
58
- description: "Early exit point",
59
- category: "terminal",
60
- version: "1.0.0",
61
- type: "terminal",
62
- subType: "exit",
63
- inputs: [{ id: "input", name: "Input", type: "input", dataType: "any", required: false }],
56
+ id: 'exit',
57
+ name: 'Exit',
58
+ description: 'Early exit point',
59
+ category: 'terminal',
60
+ version: '1.0.0',
61
+ type: 'terminal',
62
+ subType: 'exit',
63
+ inputs: [{ id: 'input', name: 'Input', type: 'input', dataType: 'any', required: false }],
64
64
  outputs: []
65
65
  }
66
66
  }
@@ -69,19 +69,19 @@ export function createTerminalNodeData(variant = "start") {
69
69
  }
70
70
  export function createConfirmationConfig(overrides) {
71
71
  return {
72
- message: "Are you sure you want to proceed with this action?",
73
- confirmLabel: "Yes, proceed",
74
- cancelLabel: "Cancel",
72
+ message: 'Are you sure you want to proceed with this action?',
73
+ confirmLabel: 'Yes, proceed',
74
+ cancelLabel: 'Cancel',
75
75
  ...overrides
76
76
  };
77
77
  }
78
78
  export function createChoiceConfig(overrides) {
79
79
  return {
80
- message: "Select a priority level for this task:",
80
+ message: 'Select a priority level for this task:',
81
81
  options: [
82
- { value: "low", label: "Low", description: "Non-urgent task" },
83
- { value: "medium", label: "Medium", description: "Normal priority" },
84
- { value: "high", label: "High", description: "Urgent task" }
82
+ { value: 'low', label: 'Low', description: 'Non-urgent task' },
83
+ { value: 'medium', label: 'Medium', description: 'Normal priority' },
84
+ { value: 'high', label: 'High', description: 'Urgent task' }
85
85
  ],
86
86
  multiple: false,
87
87
  ...overrides
@@ -89,34 +89,34 @@ export function createChoiceConfig(overrides) {
89
89
  }
90
90
  export function createTextConfig(overrides) {
91
91
  return {
92
- message: "Please provide additional details:",
93
- placeholder: "Enter your response here...",
92
+ message: 'Please provide additional details:',
93
+ placeholder: 'Enter your response here...',
94
94
  multiline: false,
95
95
  ...overrides
96
96
  };
97
97
  }
98
98
  export function createReviewConfig(overrides) {
99
99
  return {
100
- message: "Review the following changes before submitting:",
100
+ message: 'Review the following changes before submitting:',
101
101
  changes: [
102
- { field: "title", label: "Title", original: "Old Title", proposed: "New Title" },
102
+ { field: 'title', label: 'Title', original: 'Old Title', proposed: 'New Title' },
103
103
  {
104
- field: "description",
105
- label: "Description",
106
- original: "Old description text",
107
- proposed: "Updated description text"
104
+ field: 'description',
105
+ label: 'Description',
106
+ original: 'Old description text',
107
+ proposed: 'Updated description text'
108
108
  },
109
- { field: "status", label: "Status", original: "draft", proposed: "published" }
109
+ { field: 'status', label: 'Status', original: 'draft', proposed: 'published' }
110
110
  ],
111
111
  ...overrides
112
112
  };
113
113
  }
114
114
  export function createReviewChange(overrides) {
115
115
  return {
116
- field: "title",
117
- label: "Title",
118
- original: "Original value",
119
- proposed: "Proposed value",
116
+ field: 'title',
117
+ label: 'Title',
118
+ original: 'Original value',
119
+ proposed: 'Proposed value',
120
120
  ...overrides
121
121
  };
122
122
  }
@@ -72,10 +72,18 @@
72
72
  }
73
73
 
74
74
  /* Centralized handle edge positioning — offset derived from --fd-handle-size */
75
- .svelte-flow .svelte-flow__handle-left { left: var(--fd-handle-offset); }
76
- .svelte-flow .svelte-flow__handle-right { right: var(--fd-handle-offset); }
77
- .svelte-flow .svelte-flow__handle-top { top: var(--fd-handle-offset); }
78
- .svelte-flow .svelte-flow__handle-bottom { bottom: var(--fd-handle-offset); }
75
+ .svelte-flow .svelte-flow__handle-left {
76
+ left: var(--fd-handle-offset);
77
+ }
78
+ .svelte-flow .svelte-flow__handle-right {
79
+ right: var(--fd-handle-offset);
80
+ }
81
+ .svelte-flow .svelte-flow__handle-top {
82
+ top: var(--fd-handle-offset);
83
+ }
84
+ .svelte-flow .svelte-flow__handle-bottom {
85
+ bottom: var(--fd-handle-offset);
86
+ }
79
87
 
80
88
  /* Button styles */
81
89
  .flowdrop-btn {