@flowdrop/flowdrop 1.0.1 → 1.2.0

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

@@ -1,7 +1,8 @@
-import type { NodeMetadata, Workflow } from '../types/index.js';
-import type { EndpointConfig } from '../config/endpoints.js';
-import type { AuthProvider } from '../types/auth.js';
-import type { FlowDropEventHandlers, FlowDropFeatures } from '../types/events.js';
+import type { NodeMetadata, Workflow } from "../types/index.js";
+import type { EndpointConfig } from "../config/endpoints.js";
+import type { AuthProvider } from "../types/auth.js";
+import type { FlowDropEventHandlers, FlowDropFeatures } from "../types/events.js";
+import type { FlowDropTheme, FlowDropThemeName } from "../types/theme.js";
 /**
  * Configuration props for runtime customization
  */
@@ -23,7 +24,7 @@ interface Props {
     /** Read-only mode */
     readOnly?: boolean;
     /** Node execution statuses */
-    nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
+    nodeStatuses?: Record<string, "pending" | "running" | "completed" | "error">;
     /** Pipeline ID for fetching node execution info */
     pipelineId?: string;
     /** Custom navbar title */
@@ -33,7 +34,7 @@ interface Props {
         label: string;
         href: string;
         icon?: string;
-        variant?: 'primary' | 'secondary' | 'outline';
+        variant?: "primary" | "secondary" | "outline";
         onclick?: (event: Event) => void;
     }>;
     /** Show settings gear icon in navbar */
@@ -48,6 +49,8 @@ interface Props {
     eventHandlers?: FlowDropEventHandlers;
     /** Feature configuration */
     features?: FlowDropFeatures;
+    /** Visual theme — named built-in ('default' | 'minimal') or custom theme object */
+    theme?: FlowDropTheme | FlowDropThemeName;
 }
 declare const App: import("svelte").Component<Props, {}, "">;
 type App = ReturnType<typeof App>;

package/dist/components/CanvasBanner.stories.svelte

@@ -1,29 +1,32 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import CanvasBanner from './CanvasBanner.svelte';
-	import CanvasDecorator from '../stories/CanvasDecorator.svelte';
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import CanvasBanner from "./CanvasBanner.svelte";
+  import CanvasDecorator from "../stories/CanvasDecorator.svelte";
 
-	const { Story } = defineMeta({
-		title: 'Display/CanvasBanner',
-		tags: ['autodocs'],
-		parameters: {
-			layout: 'centered'
-		}
-	});
+  const { Story } = defineMeta({
+    title: "Display/CanvasBanner",
+    tags: ["autodocs"],
+    parameters: {
+      layout: "centered",
+    },
+  });
 </script>
 
 <Story name="Default">
-	<CanvasDecorator>
-		<CanvasBanner
-			title="Empty Canvas"
-			description="Drag nodes from the sidebar to get started"
-			iconName="heroicons:squares-plus"
-		/>
-	</CanvasDecorator>
+  <CanvasDecorator>
+    <CanvasBanner
+      title="Empty Canvas"
+      description="Drag nodes from the sidebar to get started"
+      iconName="heroicons:squares-plus"
+    />
+  </CanvasDecorator>
 </Story>
 
 <Story name="No Icon">
-	<CanvasDecorator>
-		<CanvasBanner title="No Workflows" description="Create your first workflow to begin" />
-	</CanvasDecorator>
+  <CanvasDecorator>
+    <CanvasBanner
+      title="No Workflows"
+      description="Create your first workflow to begin"
+    />
+  </CanvasDecorator>
 </Story>

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

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

package/dist/components/CanvasBanner.svelte

@@ -1,57 +1,63 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	let {
-		title,
-		description,
-		iconName
-	}: {
-		title: string;
-		description: string;
-		iconName?: string;
-	} = $props();
+  import Icon from "@iconify/svelte";
+  let {
+    title,
+    description,
+    iconName,
+  }: {
+    title: string;
+    description: string;
+    iconName?: string;
+  } = $props();
 </script>
 
 <div class="flowdrop-canvas-banner">
-	<div class="flowdrop-card">
-		<div class="flowdrop-card__body flowdrop-text--center">
-			<div class="flowdrop-canvas-banner__icon">
-				{#if iconName}
-					<Icon icon={iconName} class="flowdrop-canvas-banner__icon-svg" />
-				{/if}
-			</div>
-			<h3 class="flowdrop-canvas-banner__title">{title}</h3>
-			<p class="flowdrop-canvas-banner__description">{description}</p>
-		</div>
-	</div>
+  <div class="flowdrop-card">
+    <div class="flowdrop-card__body flowdrop-text--center">
+      <div class="flowdrop-canvas-banner__icon">
+        {#if iconName}
+          <Icon icon={iconName} class="flowdrop-canvas-banner__icon-svg" />
+        {/if}
+      </div>
+      <h3 class="flowdrop-canvas-banner__title">{title}</h3>
+      <p class="flowdrop-canvas-banner__description">{description}</p>
+    </div>
+  </div>
 </div>
 
 <style>
-	.flowdrop-canvas-banner {
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		pointer-events: none;
-	}
+  .flowdrop-canvas-banner {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
 
-	.flowdrop-canvas-banner__icon {
-		font-size: 3.75rem;
-		margin-bottom: 1rem;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
+  @media (max-width: 768px) {
+    .flowdrop-canvas-banner {
+      left: var(--fd-canvas-left-offset, 0px);
+    }
+  }
 
-	.flowdrop-canvas-banner__title {
-		font-size: 1.125rem;
-		font-weight: 700;
-		margin-bottom: 0.5rem;
-		color: var(--fd-foreground, #111827);
-	}
+  .flowdrop-canvas-banner__icon {
+    font-size: 3.75rem;
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-	.flowdrop-canvas-banner__description {
-		font-size: 0.875rem;
-		color: var(--fd-muted-foreground, #6b7280);
-	}
+  .flowdrop-canvas-banner__title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: var(--fd-foreground, #111827);
+  }
+
+  .flowdrop-canvas-banner__description {
+    font-size: 0.875rem;
+    color: var(--fd-muted-foreground, #6b7280);
+  }
 </style>