@d34dman/flowdrop 0.0.20 → 0.0.22

package/dist/components/nodes/NotesNode.svelte

@@ -0,0 +1,348 @@
+<script lang="ts">
+	import type { ConfigValues, NodeMetadata } from "../../types/index.js";
+	import Icon from "@iconify/svelte";
+	import MarkdownDisplay from "../MarkdownDisplay.svelte";
+
+	/**
+	 * NotesNode component props
+	 * Displays a styled note with markdown content
+	 */
+	const props = $props<{
+		data: {
+			label: string;
+			config: ConfigValues;
+			metadata: NodeMetadata;
+			nodeId?: string;
+			onConfigOpen?: (node: {
+				id: string;
+				type: string;
+				data: { label: string; config: ConfigValues; metadata: NodeMetadata };
+			}) => void;
+		};
+		selected?: boolean;
+		isProcessing?: boolean;
+		isError?: boolean;
+	}>();
+
+	/** Note content derived from config */
+	const noteContent = $derived(
+		(props.data.config?.content as string) || "Add your notes here..."
+	);
+
+	/** Note type derived from config */
+	const noteType = $derived(
+		(props.data.config?.noteType as string) || "info"
+	);
+
+	/** Note type configuration with styling for each type */
+	const noteTypes = {
+		info: {
+			name: "Info",
+			bgColor: "bg-blue-50",
+			borderColor: "border-blue-200",
+			textColor: "text-blue-800",
+			iconColor: "text-blue-500",
+			icon: "mdi:information"
+		},
+		warning: {
+			name: "Warning",
+			bgColor: "bg-yellow-50",
+			borderColor: "border-yellow-200",
+			textColor: "text-yellow-800",
+			iconColor: "text-yellow-500",
+			icon: "mdi:alert"
+		},
+		success: {
+			name: "Success",
+			bgColor: "bg-green-50",
+			borderColor: "border-green-200",
+			textColor: "text-green-800",
+			iconColor: "text-green-500",
+			icon: "mdi:check-circle"
+		},
+		error: {
+			name: "Error",
+			bgColor: "bg-red-50",
+			borderColor: "border-red-200",
+			textColor: "text-red-800",
+			iconColor: "text-red-500",
+			icon: "mdi:close-circle"
+		},
+		note: {
+			name: "Note",
+			bgColor: "bg-gray-50",
+			borderColor: "border-gray-200",
+			textColor: "text-gray-800",
+			iconColor: "text-gray-500",
+			icon: "mdi:note-text"
+		}
+	};
+
+	/** Current note type configuration based on selected type */
+	const currentType = $derived(
+		noteTypes[noteType as keyof typeof noteTypes] || noteTypes.info
+	);
+
+	/**
+	 * Opens the configuration sidebar for editing note properties
+	 */
+	function openConfigSidebar(): void {
+		if (props.data.onConfigOpen) {
+			const nodeForConfig = {
+				id: props.data.nodeId || "unknown",
+				type: "note",
+				data: props.data
+			};
+			props.data.onConfigOpen(nodeForConfig);
+		}
+	}
+
+	/**
+	 * Handles double-click to open config sidebar
+	 */
+	function handleDoubleClick(): void {
+		openConfigSidebar();
+	}
+
+	/**
+	 * Handles keyboard events for accessibility
+	 * @param event - The keyboard event
+	 */
+	function handleKeydown(event: KeyboardEvent): void {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			handleDoubleClick();
+		}
+	}
+</script>
+
+<div
+	class="flowdrop-notes-node {currentType.bgColor}"
+	class:flowdrop-notes-node--selected={props.selected}
+	class:flowdrop-notes-node--processing={props.isProcessing}
+	class:flowdrop-notes-node--error={props.isError}
+	ondblclick={handleDoubleClick}
+	onkeydown={handleKeydown}
+	role="button"
+	tabindex="0"
+>
+	<!-- Display Mode -->
+	<div class="flowdrop-notes-node__content {currentType.borderColor} {currentType.textColor}">
+		<!-- Header with icon and type -->
+		<div class="flowdrop-notes-node__header">
+			<div class="flowdrop-notes-node__header-left">
+				<Icon icon={currentType.icon} class="flowdrop-notes-node__icon {currentType.iconColor}" />
+				<span class="flowdrop-notes-node__type">{currentType.name}</span>
+			</div>
+		</div>
+
+		<!-- Rendered markdown content -->
+		<div class="flowdrop-notes-node__body">
+			<MarkdownDisplay content={noteContent} className="flowdrop-notes-node__markdown" />
+		</div>
+
+		<!-- Processing indicator -->
+		{#if props.isProcessing}
+			<div class="flowdrop-notes-node__processing">
+				<div class="flowdrop-notes-node__spinner"></div>
+				<span>Processing...</span>
+			</div>
+		{/if}
+
+		<!-- Error indicator -->
+		{#if props.isError}
+			<div class="flowdrop-notes-node__error">
+				<Icon icon="mdi:alert-circle" class="flowdrop-notes-node__error-icon" />
+				<span>Error occurred</span>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Config button -->
+	<button
+		class="flowdrop-notes-node__config-btn"
+		onclick={openConfigSidebar}
+		title="Configure note"
+	>
+		<Icon icon="mdi:cog" />
+	</button>
+</div>
+
+<style>
+	.flowdrop-notes-node {
+		min-width: var(--notes-node-min-width);
+		max-width: var(--notes-node-max-width);
+		width: var(--notes-node-width);
+		border-radius: var(--notes-node-border-radius);
+		border: 1px solid;
+		background: var(--notes-node-background);
+		backdrop-filter: var(--notes-node-backdrop-filter);
+		box-shadow: var(--notes-node-box-shadow);
+		transition: var(--notes-node-transition);
+		overflow: hidden;
+		z-index: 5;
+	}
+
+	/* Background color overrides for different note types */
+	.flowdrop-notes-node.bg-blue-50 {
+		background-color: var(--notes-node-info-bg);
+		border-color: var(--notes-node-info-border);
+	}
+
+	.flowdrop-notes-node.bg-yellow-50 {
+		background-color: var(--notes-node-warning-bg);
+		border-color: var(--notes-node-warning-border);
+	}
+
+	.flowdrop-notes-node.bg-green-50 {
+		background-color: var(--notes-node-success-bg);
+		border-color: var(--notes-node-success-border);
+	}
+
+	.flowdrop-notes-node.bg-red-50 {
+		background-color: var(--notes-node-error-bg);
+		border-color: var(--notes-node-error-border);
+	}
+
+	.flowdrop-notes-node.bg-gray-50 {
+		background-color: var(--notes-node-note-bg);
+		border-color: var(--notes-node-note-border);
+	}
+
+	.flowdrop-notes-node:hover {
+		box-shadow: var(--notes-node-hover-box-shadow);
+		transform: translateY(-1px);
+	}
+
+	.flowdrop-notes-node--selected {
+		box-shadow: var(--notes-node-selected-box-shadow);
+	}
+
+	.flowdrop-notes-node--processing {
+		opacity: 0.7;
+	}
+
+	.flowdrop-notes-node--error {
+		border-color: #ef4444 !important;
+	}
+
+	/* Display Mode Styles */
+	.flowdrop-notes-node__content {
+		padding: var(--notes-node-padding);
+		border-radius: var(--notes-node-border-radius);
+		border: 1px solid;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.flowdrop-notes-node__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 0.75rem;
+		flex-shrink: 0;
+	}
+
+	.flowdrop-notes-node__header-left {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.flowdrop-notes-node__icon {
+		width: 1.75rem;
+		height: 1.75rem;
+		flex-shrink: 0;
+	}
+
+	.flowdrop-notes-node__type {
+		font-size: 0.875rem;
+		font-weight: 600;
+	}
+
+	.flowdrop-notes-node__body {
+		margin-bottom: 0.5rem;
+		flex: 1;
+		overflow-y: auto;
+	}
+
+	.flowdrop-notes-node__processing {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.75rem;
+		opacity: 0.7;
+	}
+
+	.flowdrop-notes-node__spinner {
+		width: 0.75rem;
+		height: 0.75rem;
+		border: 1px solid currentColor;
+		border-top-color: transparent;
+		border-radius: 50%;
+		animation: spin 1s linear infinite;
+	}
+
+	.flowdrop-notes-node__error {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.75rem;
+		color: #ef4444;
+	}
+
+	.flowdrop-notes-node__error-icon {
+		width: 0.75rem;
+		height: 0.75rem;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.flowdrop-notes-node__config-btn {
+		position: absolute;
+		top: 0.5rem;
+		right: 0.5rem;
+		width: 1.5rem;
+		height: 1.5rem;
+		background-color: rgba(255, 255, 255, 0.9);
+		border: 1px solid #e5e7eb;
+		border-radius: 0.25rem;
+		color: #6b7280;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0;
+		transition: all 0.2s ease-in-out;
+		backdrop-filter: blur(4px);
+		z-index: 15;
+		font-size: 0.875rem;
+	}
+
+	.flowdrop-notes-node:hover .flowdrop-notes-node__config-btn {
+		opacity: 1;
+	}
+
+	.flowdrop-notes-node__config-btn:hover {
+		background-color: #f9fafb;
+		border-color: #d1d5db;
+		color: #374151;
+	}
+
+	/* Responsive design */
+	@media (max-width: 640px) {
+		.flowdrop-notes-node {
+			min-width: 200px;
+			max-width: 350px;
+		}
+
+		.flowdrop-notes-node__content {
+			padding: 0.75rem;
+		}
+	}
+</style>

package/dist/components/nodes/NotesNode.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { ConfigValues, NodeMetadata } from "../../types/index.js";
+type $$ComponentProps = {
+    data: {
+        label: string;
+        config: ConfigValues;
+        metadata: NodeMetadata;
+        nodeId?: string;
+        onConfigOpen?: (node: {
+            id: string;
+            type: string;
+            data: {
+                label: string;
+                config: ConfigValues;
+                metadata: NodeMetadata;
+            };
+        }) => void;
+    };
+    selected?: boolean;
+    isProcessing?: boolean;
+    isError?: boolean;
+};
+declare const NotesNode: import("svelte").Component<$$ComponentProps, {}, "">;
+type NotesNode = ReturnType<typeof NotesNode>;
+export default NotesNode;

package/dist/components/{SimpleNode.svelte → nodes/SimpleNode.svelte}

@@ -6,9 +6,9 @@
 
 <script lang="ts">
 	import { Position, Handle } from '@xyflow/svelte';
-	import type { ConfigValues, NodeMetadata } from '../types/index.js';
+	import type { ConfigValues, NodeMetadata } from '../../types/index.js';
 	import Icon from '@iconify/svelte';
-	import { getDataTypeColor } from '../utils/colors.js';
+	import { getDataTypeColor } from '../../utils/colors.js';
 
 	const props = $props<{
 		data: {

package/dist/components/{SimpleNode.svelte.d.ts → nodes/SimpleNode.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { ConfigValues, NodeMetadata } from '../types/index.js';
+import type { ConfigValues, NodeMetadata } from '../../types/index.js';
 type $$ComponentProps = {
     data: {
         label: string;

package/dist/components/{SquareNode.svelte → nodes/SquareNode.svelte}

@@ -6,9 +6,9 @@
 
 <script lang="ts">
 	import { Position, Handle } from '@xyflow/svelte';
-	import type { ConfigValues, NodeMetadata } from '../types/index.js';
+	import type { ConfigValues, NodeMetadata } from '../../types/index.js';
 	import Icon from '@iconify/svelte';
-	import { getDataTypeColor } from '../utils/colors.js';
+	import { getDataTypeColor } from '../../utils/colors.js';
 
 	const props = $props<{
 		data: {

package/dist/components/{SquareNode.svelte.d.ts → nodes/SquareNode.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { ConfigValues, NodeMetadata } from '../types/index.js';
+import type { ConfigValues, NodeMetadata } from '../../types/index.js';
 type $$ComponentProps = {
     data: {
         label: string;

package/dist/components/{TerminalNode.svelte → nodes/TerminalNode.svelte}

@@ -10,9 +10,9 @@
 
 <script lang="ts">
 	import { Position, Handle } from '@xyflow/svelte';
-	import type { ConfigValues, NodeMetadata } from '../types/index.js';
+	import type { ConfigValues, NodeMetadata } from '../../types/index.js';
 	import Icon from '@iconify/svelte';
-	import { getDataTypeColor } from '../utils/colors.js';
+	import { getDataTypeColor } from '../../utils/colors.js';
 
 	/**
 	 * Terminal node variant types

package/dist/components/{TerminalNode.svelte.d.ts → nodes/TerminalNode.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { ConfigValues, NodeMetadata } from '../types/index.js';
+import type { ConfigValues, NodeMetadata } from '../../types/index.js';
 type $$ComponentProps = {
     data: {
         label: string;

package/dist/components/{ToolNode.svelte → nodes/ToolNode.svelte}

@@ -7,8 +7,8 @@
 <script lang="ts">
 	import { Position, Handle } from '@xyflow/svelte';
 	import Icon from '@iconify/svelte';
-	import { getDataTypeColor } from '../utils/colors';
-	import type { NodeMetadata } from '../types/index.js';
+	import { getDataTypeColor } from '../../utils/colors';
+	import type { NodeMetadata } from '../../types/index.js';
 
 	interface ToolNodeParameter {
 		name: string;

package/dist/components/{ToolNode.svelte.d.ts → nodes/ToolNode.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { NodeMetadata } from '../types/index.js';
+import type { NodeMetadata } from '../../types/index.js';
 interface ToolNodeParameter {
     name: string;
     type?: string;

package/dist/components/{WorkflowNode.svelte → nodes/WorkflowNode.svelte}

@@ -7,10 +7,10 @@
 
 <script lang="ts">
 	import { Position, Handle } from '@xyflow/svelte';
-	import type { WorkflowNode } from '../types/index.js';
+	import type { WorkflowNode } from '../../types/index.js';
 	import Icon from '@iconify/svelte';
-	import { getNodeIcon } from '../utils/icons.js';
-	import { getDataTypeColorToken, getCategoryColorToken } from '../utils/colors.js';
+	import { getNodeIcon } from '../../utils/icons.js';
+	import { getDataTypeColorToken, getCategoryColorToken } from '../../utils/colors.js';
 
 	interface Props {
 		data: WorkflowNode['data'] & {

package/dist/components/{WorkflowNode.svelte.d.ts → nodes/WorkflowNode.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { WorkflowNode } from '../types/index.js';
+import type { WorkflowNode } from '../../types/index.js';
 interface Props {
     data: WorkflowNode['data'] & {
         nodeId?: string;

package/dist/index.d.ts

@@ -14,14 +14,14 @@ export { FlowDropApiClient } from './api/client.js';
 export { EnhancedFlowDropApiClient } from './api/enhanced-client.js';
 export { default as WorkflowEditor } from './components/WorkflowEditor.svelte';
 export { default as NodeSidebar } from './components/NodeSidebar.svelte';
-export { default as WorkflowNodeComponent } from './components/WorkflowNode.svelte';
-export { default as SimpleNodeComponent } from './components/SimpleNode.svelte';
-export { default as ToolNodeComponent } from './components/ToolNode.svelte';
-export { default as NotesNodeComponent } from './components/NotesNode.svelte';
+export { default as WorkflowNodeComponent } from './components/nodes/WorkflowNode.svelte';
+export { default as SimpleNodeComponent } from './components/nodes/SimpleNode.svelte';
+export { default as ToolNodeComponent } from './components/nodes/ToolNode.svelte';
+export { default as NotesNodeComponent } from './components/nodes/NotesNode.svelte';
 export { default as CanvasBanner } from './components/CanvasBanner.svelte';
 export { default as UniversalNode } from './components/UniversalNode.svelte';
-export { default as GatewayNode } from './components/GatewayNode.svelte';
-export { default as SquareNode } from './components/SquareNode.svelte';
+export { default as GatewayNode } from './components/nodes/GatewayNode.svelte';
+export { default as SquareNode } from './components/nodes/SquareNode.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner.svelte';
 export { default as StatusIcon } from './components/StatusIcon.svelte';
 export { default as StatusLabel } from './components/StatusLabel.svelte';
@@ -29,7 +29,8 @@ export { default as NodeStatusOverlay } from './components/NodeStatusOverlay.sve
 export { default as MarkdownDisplay } from './components/MarkdownDisplay.svelte';
 export { default as ConfigForm } from './components/ConfigForm.svelte';
 export { default as ConfigModal } from './components/ConfigModal.svelte';
-export { default as ConfigSidebar } from './components/ConfigSidebar.svelte';
+export { default as ConfigPanel } from './components/ConfigPanel.svelte';
+export { default as ReadOnlyDetails } from './components/ReadOnlyDetails.svelte';
 export { default as ConnectionLine } from './components/ConnectionLine.svelte';
 export { default as LogsSidebar } from './components/LogsSidebar.svelte';
 export { default as PipelineStatus } from './components/PipelineStatus.svelte';

package/dist/index.js

@@ -15,14 +15,14 @@ export { EnhancedFlowDropApiClient } from './api/enhanced-client.js';
 // Export components
 export { default as WorkflowEditor } from './components/WorkflowEditor.svelte';
 export { default as NodeSidebar } from './components/NodeSidebar.svelte';
-export { default as WorkflowNodeComponent } from './components/WorkflowNode.svelte';
-export { default as SimpleNodeComponent } from './components/SimpleNode.svelte';
-export { default as ToolNodeComponent } from './components/ToolNode.svelte';
-export { default as NotesNodeComponent } from './components/NotesNode.svelte';
+export { default as WorkflowNodeComponent } from './components/nodes/WorkflowNode.svelte';
+export { default as SimpleNodeComponent } from './components/nodes/SimpleNode.svelte';
+export { default as ToolNodeComponent } from './components/nodes/ToolNode.svelte';
+export { default as NotesNodeComponent } from './components/nodes/NotesNode.svelte';
 export { default as CanvasBanner } from './components/CanvasBanner.svelte';
 export { default as UniversalNode } from './components/UniversalNode.svelte';
-export { default as GatewayNode } from './components/GatewayNode.svelte';
-export { default as SquareNode } from './components/SquareNode.svelte';
+export { default as GatewayNode } from './components/nodes/GatewayNode.svelte';
+export { default as SquareNode } from './components/nodes/SquareNode.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner.svelte';
 export { default as StatusIcon } from './components/StatusIcon.svelte';
 export { default as StatusLabel } from './components/StatusLabel.svelte';
@@ -30,7 +30,8 @@ export { default as NodeStatusOverlay } from './components/NodeStatusOverlay.sve
 export { default as MarkdownDisplay } from './components/MarkdownDisplay.svelte';
 export { default as ConfigForm } from './components/ConfigForm.svelte';
 export { default as ConfigModal } from './components/ConfigModal.svelte';
-export { default as ConfigSidebar } from './components/ConfigSidebar.svelte';
+export { default as ConfigPanel } from './components/ConfigPanel.svelte';
+export { default as ReadOnlyDetails } from './components/ReadOnlyDetails.svelte';
 export { default as ConnectionLine } from './components/ConnectionLine.svelte';
 export { default as LogsSidebar } from './components/LogsSidebar.svelte';
 export { default as PipelineStatus } from './components/PipelineStatus.svelte';

package/dist/registry/builtinNodes.js

@@ -6,13 +6,13 @@
  * ensuring all built-in node types are available without user action.
  */
 import { nodeComponentRegistry } from './nodeComponentRegistry.js';
-import WorkflowNode from '../components/WorkflowNode.svelte';
-import SimpleNode from '../components/SimpleNode.svelte';
-import SquareNode from '../components/SquareNode.svelte';
-import ToolNode from '../components/ToolNode.svelte';
-import GatewayNode from '../components/GatewayNode.svelte';
-import NotesNode from '../components/NotesNode.svelte';
-import TerminalNode from '../components/TerminalNode.svelte';
+import WorkflowNode from '../components/nodes/WorkflowNode.svelte';
+import SimpleNode from '../components/nodes/SimpleNode.svelte';
+import SquareNode from '../components/nodes/SquareNode.svelte';
+import ToolNode from '../components/nodes/ToolNode.svelte';
+import GatewayNode from '../components/nodes/GatewayNode.svelte';
+import NotesNode from '../components/nodes/NotesNode.svelte';
+import TerminalNode from '../components/nodes/TerminalNode.svelte';
 /**
  * Source identifier for built-in FlowDrop components
  */

package/dist/styles/base.css

@@ -375,6 +375,7 @@
 	0% {
 		transform: rotate(0deg);
 	}
+
 	100% {
 		transform: rotate(360deg);
 	}
@@ -1156,6 +1157,15 @@
 	--flowdrop-edge-data-color-hover: var(--color-ref-gray-500);
 	--flowdrop-edge-data-color-selected: var(--color-ref-violet-600);
 
+	/* Semantic text color tokens */
+	--flowdrop-text-color-error: var(--color-ref-red-600);
+	--flowdrop-text-color-success: var(--color-ref-green-600);
+	--flowdrop-text-color-warning: var(--color-ref-amber-600);
+	--flowdrop-text-color-info: var(--color-ref-blue-600);
+	--flowdrop-text-color-muted: var(--color-ref-gray-500);
+	--flowdrop-text-color-primary: var(--color-ref-gray-900);
+	--flowdrop-text-color-secondary: var(--color-ref-gray-600);
+
 	/* NotesNode component variables */
 	--notes-node-width: 500px;
 	--notes-node-min-width: 250px;
@@ -1362,9 +1372,11 @@
 .markdown-display--compact h1 {
 	font-size: 1.25rem;
 }
+
 .markdown-display--compact h2 {
 	font-size: 1.125rem;
 }
+
 .markdown-display--compact h3 {
 	font-size: 1rem;
 }
@@ -1377,9 +1389,11 @@
 .markdown-display--large h1 {
 	font-size: 1.75rem;
 }
+
 .markdown-display--large h2 {
 	font-size: 1.5rem;
 }
+
 .markdown-display--large h3 {
 	font-size: 1.25rem;
-}
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@d34dman/flowdrop",
   "license": "MIT",
   "private": false,
-  "version": "0.0.20",
+  "version": "0.0.22",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",