@flowdrop/flowdrop 1.0.1 → 1.2.0

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

@@ -1,8 +1,12 @@
-import type { NodeMetadata, NodeCategory, WorkflowFormat } from '../types/index.js';
+import type { NodeMetadata, NodeCategory, WorkflowFormat } from "../types/index.js";
 interface Props {
     nodes: NodeMetadata[];
+    /** Whether node types are still being fetched. Default: false */
+    loading?: boolean;
     selectedCategory?: NodeCategory;
     activeFormat?: WorkflowFormat;
+    /** Whether category <details> accordions start open (card mode). Default: false */
+    categoriesDefaultOpen?: boolean;
 }
 declare const NodeSidebar: import("svelte").Component<Props, {}, "">;
 type NodeSidebar = ReturnType<typeof NodeSidebar>;

package/dist/components/NodeStatusOverlay.stories.svelte

@@ -1,85 +1,97 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import NodeStatusOverlay from './NodeStatusOverlay.svelte';
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import NodeStatusOverlay from "./NodeStatusOverlay.svelte";
 
-	const { Story } = defineMeta({
-		title: 'Editor/NodeStatusOverlay',
-		tags: ['autodocs'],
-		parameters: {
-			layout: 'centered'
-		}
-	});
+  const { Story } = defineMeta({
+    title: "Editor/NodeStatusOverlay",
+    tags: ["autodocs"],
+    parameters: {
+      layout: "centered",
+    },
+  });
 </script>
 
 <Story name="Idle (with history)">
-	<div
-		style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);"
-	>
-		<NodeStatusOverlay
-			executionInfo={{
-				status: 'idle',
-				executionCount: 3,
-				isExecuting: false,
-				lastExecuted: new Date().toISOString()
-			}}
-			showDetails
-		/>
-		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">
-			Node Content
-		</div>
-	</div>
+  <div
+    style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);"
+  >
+    <NodeStatusOverlay
+      executionInfo={{
+        status: "idle",
+        executionCount: 3,
+        isExecuting: false,
+        lastExecuted: new Date().toISOString(),
+      }}
+      showDetails
+    />
+    <div
+      style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);"
+    >
+      Node Content
+    </div>
+  </div>
 </Story>
 
 <Story name="Running">
-	<div
-		style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);"
-	>
-		<NodeStatusOverlay
-			executionInfo={{
-				status: 'running',
-				executionCount: 1,
-				isExecuting: true
-			}}
-		/>
-		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">
-			Processing...
-		</div>
-	</div>
+  <div
+    style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);"
+  >
+    <NodeStatusOverlay
+      executionInfo={{
+        status: "running",
+        executionCount: 1,
+        isExecuting: true,
+      }}
+    />
+    <div
+      style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);"
+    >
+      Processing...
+    </div>
+  </div>
 </Story>
 
 <Story name="Completed">
-	<div
-		style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);"
-	>
-		<NodeStatusOverlay
-			executionInfo={{
-				status: 'completed',
-				executionCount: 5,
-				isExecuting: false,
-				lastExecuted: new Date().toISOString(),
-				lastExecutionDuration: 1250
-			}}
-			showDetails
-		/>
-		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">Done!</div>
-	</div>
+  <div
+    style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);"
+  >
+    <NodeStatusOverlay
+      executionInfo={{
+        status: "completed",
+        executionCount: 5,
+        isExecuting: false,
+        lastExecuted: new Date().toISOString(),
+        lastExecutionDuration: 1250,
+      }}
+      showDetails
+    />
+    <div
+      style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);"
+    >
+      Done!
+    </div>
+  </div>
 </Story>
 
 <Story name="Failed">
-	<div
-		style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);"
-	>
-		<NodeStatusOverlay
-			executionInfo={{
-				status: 'failed',
-				executionCount: 2,
-				isExecuting: false,
-				lastError: 'Connection timeout',
-				lastExecuted: new Date().toISOString(),
-				lastExecutionDuration: 30000
-			}}
-			showDetails
-		/>
-		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">Error</div>
-	</div>
+  <div
+    style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);"
+  >
+    <NodeStatusOverlay
+      executionInfo={{
+        status: "failed",
+        executionCount: 2,
+        isExecuting: false,
+        lastError: "Connection timeout",
+        lastExecuted: new Date().toISOString(),
+        lastExecutionDuration: 30000,
+      }}
+      showDetails
+    />
+    <div
+      style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);"
+    >
+      Error
+    </div>
+  </div>
 </Story>

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

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