@d34dman/flowdrop 0.0.21 → 0.0.22

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.
@@ -1,11 +1,12 @@
1
1
  <script lang="ts">
2
- import type { ConfigValues, NodeMetadata } from '../../types/index.js';
3
- import Icon from '@iconify/svelte';
4
- import { createEventDispatcher } from 'svelte';
5
- import MarkdownDisplay from '../MarkdownDisplay.svelte';
6
-
7
- const dispatch = createEventDispatcher();
8
-
2
+ import type { ConfigValues, NodeMetadata } from "../../types/index.js";
3
+ import Icon from "@iconify/svelte";
4
+ import MarkdownDisplay from "../MarkdownDisplay.svelte";
5
+
6
+ /**
7
+ * NotesNode component props
8
+ * Displays a styled note with markdown content
9
+ */
9
10
  const props = $props<{
10
11
  data: {
11
12
  label: string;
@@ -21,131 +22,94 @@
21
22
  selected?: boolean;
22
23
  isProcessing?: boolean;
23
24
  isError?: boolean;
24
- isEditing?: boolean;
25
25
  }>();
26
26
 
27
- // Internal state for edit mode
28
- let isInternalEditing = $state(false);
29
-
30
- // Reactive values that update when props change
31
- let noteContent = $state((props.data.config?.content as string) || 'Add your notes here...');
32
- let noteType = $state((props.data.config?.noteType as string) || 'info');
27
+ /** Note content derived from config */
28
+ const noteContent = $derived(
29
+ (props.data.config?.content as string) || "Add your notes here..."
30
+ );
33
31
 
34
- // Update reactive values when props change
35
- $effect(() => {
36
- const newContent = (props.data.config?.content as string) || 'Add your notes here...';
37
- const newType = (props.data.config?.noteType as string) || 'info';
38
-
39
- if (noteContent !== newContent) {
40
- noteContent = newContent;
41
- }
42
- if (noteType !== newType) {
43
- noteType = newType;
44
- }
45
- });
32
+ /** Note type derived from config */
33
+ const noteType = $derived(
34
+ (props.data.config?.noteType as string) || "info"
35
+ );
46
36
 
47
- // Note type configuration
37
+ /** Note type configuration with styling for each type */
48
38
  const noteTypes = {
49
39
  info: {
50
- name: 'Info',
51
- bgColor: 'bg-blue-50',
52
- borderColor: 'border-blue-200',
53
- textColor: 'text-blue-800',
54
- iconColor: 'text-blue-500',
55
- icon: 'mdi:information'
40
+ name: "Info",
41
+ bgColor: "bg-blue-50",
42
+ borderColor: "border-blue-200",
43
+ textColor: "text-blue-800",
44
+ iconColor: "text-blue-500",
45
+ icon: "mdi:information"
56
46
  },
57
47
  warning: {
58
- name: 'Warning',
59
- bgColor: 'bg-yellow-50',
60
- borderColor: 'border-yellow-200',
61
- textColor: 'text-yellow-800',
62
- iconColor: 'text-yellow-500',
63
- icon: 'mdi:alert'
48
+ name: "Warning",
49
+ bgColor: "bg-yellow-50",
50
+ borderColor: "border-yellow-200",
51
+ textColor: "text-yellow-800",
52
+ iconColor: "text-yellow-500",
53
+ icon: "mdi:alert"
64
54
  },
65
55
  success: {
66
- name: 'Success',
67
- bgColor: 'bg-green-50',
68
- borderColor: 'border-green-200',
69
- textColor: 'text-green-800',
70
- iconColor: 'text-green-500',
71
- icon: 'mdi:check-circle'
56
+ name: "Success",
57
+ bgColor: "bg-green-50",
58
+ borderColor: "border-green-200",
59
+ textColor: "text-green-800",
60
+ iconColor: "text-green-500",
61
+ icon: "mdi:check-circle"
72
62
  },
73
63
  error: {
74
- name: 'Error',
75
- bgColor: 'bg-red-50',
76
- borderColor: 'border-red-200',
77
- textColor: 'text-red-800',
78
- iconColor: 'text-red-500',
79
- icon: 'mdi:close-circle'
64
+ name: "Error",
65
+ bgColor: "bg-red-50",
66
+ borderColor: "border-red-200",
67
+ textColor: "text-red-800",
68
+ iconColor: "text-red-500",
69
+ icon: "mdi:close-circle"
80
70
  },
81
71
  note: {
82
- name: 'Note',
83
- bgColor: 'bg-gray-50',
84
- borderColor: 'border-gray-200',
85
- textColor: 'text-gray-800',
86
- iconColor: 'text-gray-500',
87
- icon: 'mdi:note-text'
72
+ name: "Note",
73
+ bgColor: "bg-gray-50",
74
+ borderColor: "border-gray-200",
75
+ textColor: "text-gray-800",
76
+ iconColor: "text-gray-500",
77
+ icon: "mdi:note-text"
88
78
  }
89
79
  };
90
80
 
91
- // Reactive derived values
92
- let currentType = $derived(noteTypes[noteType as keyof typeof noteTypes] || noteTypes.info);
93
-
94
- // Handle content updates
95
- function handleContentChange(event: Event) {
96
- const target = event.target as HTMLTextAreaElement;
97
- noteContent = target.value;
98
- if (props.data.config) {
99
- props.data.config.content = target.value;
100
- // Dispatch event to notify parent of config change
101
- dispatch('configChange', { config: props.data.config });
102
- }
103
- }
104
-
105
- // Handle note type changes
106
- function handleTypeChange(event: Event) {
107
- const target = event.target as HTMLSelectElement;
108
- noteType = target.value;
109
- if (props.data.config) {
110
- props.data.config.noteType = target.value;
111
- // Dispatch event to notify parent of config change
112
- dispatch('configChange', { config: props.data.config });
113
- }
114
- }
81
+ /** Current note type configuration based on selected type */
82
+ const currentType = $derived(
83
+ noteTypes[noteType as keyof typeof noteTypes] || noteTypes.info
84
+ );
115
85
 
116
- // Toggle edit mode
117
- function toggleEditMode() {
118
- isInternalEditing = !isInternalEditing;
119
- // Dispatch event to notify parent of state change
120
- dispatch('editModeChange', { isEditing: isInternalEditing });
121
- }
122
-
123
- // Handle configuration sidebar - now using global ConfigSidebar
86
+ /**
87
+ * Opens the configuration sidebar for editing note properties
88
+ */
124
89
  function openConfigSidebar(): void {
125
90
  if (props.data.onConfigOpen) {
126
- // Create a WorkflowNodeType-like object for the global ConfigSidebar
127
91
  const nodeForConfig = {
128
- id: props.data.nodeId || 'unknown',
129
- type: 'note',
92
+ id: props.data.nodeId || "unknown",
93
+ type: "note",
130
94
  data: props.data
131
95
  };
132
96
  props.data.onConfigOpen(nodeForConfig);
133
97
  }
134
98
  }
135
99
 
136
- // Handle node click - only handle selection, no config opening
137
- function handleNodeClick(): void {
138
- // Node selection is handled by Svelte Flow
139
- }
140
-
141
- // Handle double-click to open config
100
+ /**
101
+ * Handles double-click to open config sidebar
102
+ */
142
103
  function handleDoubleClick(): void {
143
104
  openConfigSidebar();
144
105
  }
145
106
 
146
- // Handle keyboard events
107
+ /**
108
+ * Handles keyboard events for accessibility
109
+ * @param event - The keyboard event
110
+ */
147
111
  function handleKeydown(event: KeyboardEvent): void {
148
- if (event.key === 'Enter' || event.key === ' ') {
112
+ if (event.key === "Enter" || event.key === " ") {
149
113
  event.preventDefault();
150
114
  handleDoubleClick();
151
115
  }
@@ -157,96 +121,42 @@
157
121
  class:flowdrop-notes-node--selected={props.selected}
158
122
  class:flowdrop-notes-node--processing={props.isProcessing}
159
123
  class:flowdrop-notes-node--error={props.isError}
160
- onclick={handleNodeClick}
161
124
  ondblclick={handleDoubleClick}
162
125
  onkeydown={handleKeydown}
163
126
  role="button"
164
127
  tabindex="0"
165
128
  >
166
- {#if isInternalEditing || props.isEditing}
167
- <!-- Edit Mode -->
168
- <div class="flowdrop-notes-node__edit">
169
- <!-- Note Type Selector -->
170
- <div class="flowdrop-notes-node__type-selector">
171
- <label for="note-type" class="flowdrop-notes-node__label">Note Type:</label>
172
- <select
173
- id="note-type"
174
- class="flowdrop-notes-node__select"
175
- value={noteType}
176
- onchange={handleTypeChange}
177
- >
178
- {#each Object.entries(noteTypes) as [key, type] (key)}
179
- <option value={key}>{type.name}</option>
180
- {/each}
181
- </select>
182
- </div>
183
-
184
- <!-- Markdown Textarea -->
185
- <div class="flowdrop-notes-node__textarea-container">
186
- <label for="note-content" class="flowdrop-notes-node__label">Content (Markdown):</label>
187
- <textarea
188
- id="note-content"
189
- class="flowdrop-notes-node__textarea"
190
- placeholder="Write your note in Markdown..."
191
- value={noteContent}
192
- oninput={handleContentChange}
193
- ></textarea>
129
+ <!-- Display Mode -->
130
+ <div class="flowdrop-notes-node__content {currentType.borderColor} {currentType.textColor}">
131
+ <!-- Header with icon and type -->
132
+ <div class="flowdrop-notes-node__header">
133
+ <div class="flowdrop-notes-node__header-left">
134
+ <Icon icon={currentType.icon} class="flowdrop-notes-node__icon {currentType.iconColor}" />
135
+ <span class="flowdrop-notes-node__type">{currentType.name}</span>
194
136
  </div>
137
+ </div>
195
138
 
196
- <!-- Save/Cancel Buttons -->
197
- <div class="flowdrop-notes-node__edit-actions">
198
- <button
199
- class="flowdrop-notes-node__btn flowdrop-notes-node__btn--save"
200
- onclick={toggleEditMode}
201
- >
202
- <Icon icon="mdi:check" />
203
- Save
204
- </button>
205
- <button
206
- class="flowdrop-notes-node__btn flowdrop-notes-node__btn--cancel"
207
- onclick={toggleEditMode}
208
- >
209
- <Icon icon="mdi:close" />
210
- Cancel
211
- </button>
212
- </div>
139
+ <!-- Rendered markdown content -->
140
+ <div class="flowdrop-notes-node__body">
141
+ <MarkdownDisplay content={noteContent} className="flowdrop-notes-node__markdown" />
213
142
  </div>
214
- {:else}
215
- <!-- Display Mode -->
216
- <div class="flowdrop-notes-node__content {currentType.borderColor} {currentType.textColor}">
217
- <!-- Header with icon, type, and edit button -->
218
- <div class="flowdrop-notes-node__header">
219
- <div class="flowdrop-notes-node__header-left">
220
- <Icon icon={currentType.icon} class="flowdrop-notes-node__icon {currentType.iconColor}" />
221
- <span class="flowdrop-notes-node__type">{currentType.name}</span>
222
- </div>
223
- <button class="flowdrop-notes-node__edit-btn" onclick={toggleEditMode} title="Edit note">
224
- <Icon icon="mdi:pencil" />
225
- </button>
226
- </div>
227
143
 
228
- <!-- Rendered markdown content -->
229
- <div class="flowdrop-notes-node__body">
230
- <MarkdownDisplay content={noteContent} className="flowdrop-notes-node__markdown" />
144
+ <!-- Processing indicator -->
145
+ {#if props.isProcessing}
146
+ <div class="flowdrop-notes-node__processing">
147
+ <div class="flowdrop-notes-node__spinner"></div>
148
+ <span>Processing...</span>
231
149
  </div>
150
+ {/if}
232
151
 
233
- <!-- Processing indicator -->
234
- {#if props.isProcessing}
235
- <div class="flowdrop-notes-node__processing">
236
- <div class="flowdrop-notes-node__spinner"></div>
237
- <span>Processing...</span>
238
- </div>
239
- {/if}
240
-
241
- <!-- Error indicator -->
242
- {#if props.isError}
243
- <div class="flowdrop-notes-node__error">
244
- <Icon icon="mdi:alert-circle" class="flowdrop-notes-node__error-icon" />
245
- <span>Error occurred</span>
246
- </div>
247
- {/if}
248
- </div>
249
- {/if}
152
+ <!-- Error indicator -->
153
+ {#if props.isError}
154
+ <div class="flowdrop-notes-node__error">
155
+ <Icon icon="mdi:alert-circle" class="flowdrop-notes-node__error-icon" />
156
+ <span>Error occurred</span>
157
+ </div>
158
+ {/if}
159
+ </div>
250
160
 
251
161
  <!-- Config button -->
252
162
  <button
@@ -258,9 +168,6 @@
258
168
  </button>
259
169
  </div>
260
170
 
261
- <!-- Configuration Sidebar -->
262
- <!-- ConfigSidebar removed - now using global ConfigSidebar in WorkflowEditor -->
263
-
264
171
  <style>
265
172
  .flowdrop-notes-node {
266
173
  min-width: var(--notes-node-min-width);
@@ -319,106 +226,6 @@
319
226
  border-color: #ef4444 !important;
320
227
  }
321
228
 
322
- /* Edit Mode Styles */
323
- .flowdrop-notes-node__edit {
324
- padding: var(--notes-node-padding);
325
- height: 100%;
326
- display: flex;
327
- flex-direction: column;
328
- }
329
-
330
- .flowdrop-notes-node__type-selector {
331
- margin-bottom: 1rem;
332
- flex-shrink: 0;
333
- }
334
-
335
- .flowdrop-notes-node__label {
336
- display: block;
337
- font-size: 0.875rem;
338
- font-weight: 600;
339
- margin-bottom: 0.5rem;
340
- color: #374151;
341
- }
342
-
343
- .flowdrop-notes-node__select {
344
- width: 100%;
345
- padding: 0.5rem;
346
- border: 1px solid #d1d5db;
347
- border-radius: 0.375rem;
348
- font-size: 0.875rem;
349
- background-color: white;
350
- }
351
-
352
- .flowdrop-notes-node__textarea-container {
353
- margin-bottom: 1rem;
354
- flex: 1;
355
- display: flex;
356
- flex-direction: column;
357
- }
358
-
359
- .flowdrop-notes-node__textarea {
360
- width: 100%;
361
- min-height: 120px;
362
- flex: 1;
363
- padding: 0.75rem;
364
- border: 1px solid #d1d5db;
365
- border-radius: 0.375rem;
366
- font-size: 0.875rem;
367
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
368
- line-height: 1.5;
369
- resize: none; /* Prevent resizing to maintain consistent size */
370
- background-color: white;
371
- }
372
-
373
- .flowdrop-notes-node__textarea:focus {
374
- outline: none;
375
- border-color: #3b82f6;
376
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
377
- }
378
-
379
- .flowdrop-notes-node__edit-actions {
380
- display: flex;
381
- gap: 0.5rem;
382
- margin-top: 1rem;
383
- justify-content: flex-end;
384
- flex-shrink: 0;
385
- }
386
-
387
- .flowdrop-notes-node__btn {
388
- display: flex;
389
- align-items: center;
390
- gap: 0.25rem;
391
- padding: 0.5rem 1rem;
392
- border: 1px solid;
393
- border-radius: 0.375rem;
394
- font-size: 0.875rem;
395
- font-weight: 500;
396
- cursor: pointer;
397
- transition: all 0.2s ease-in-out;
398
- }
399
-
400
- .flowdrop-notes-node__btn--save {
401
- background-color: #10b981;
402
- border-color: #10b981;
403
- color: white;
404
- }
405
-
406
- .flowdrop-notes-node__btn--save:hover {
407
- background-color: #059669;
408
- border-color: #059669;
409
- }
410
-
411
- .flowdrop-notes-node__btn--cancel {
412
- background-color: transparent;
413
- border-color: #d1d5db;
414
- color: #374151;
415
- }
416
-
417
- .flowdrop-notes-node__btn--cancel:hover {
418
- background-color: #f3f4f6;
419
- border-color: #9ca3af;
420
- }
421
-
422
229
  /* Display Mode Styles */
423
230
  .flowdrop-notes-node__content {
424
231
  padding: var(--notes-node-padding);
@@ -443,26 +250,6 @@
443
250
  gap: 0.5rem;
444
251
  }
445
252
 
446
- .flowdrop-notes-node__edit-btn {
447
- display: flex;
448
- align-items: center;
449
- justify-content: center;
450
- width: 2rem;
451
- height: 2rem;
452
- border: none;
453
- background: transparent;
454
- color: currentColor;
455
- opacity: 0.7;
456
- cursor: pointer;
457
- border-radius: 0.25rem;
458
- transition: all 0.2s ease-in-out;
459
- }
460
-
461
- .flowdrop-notes-node__edit-btn:hover {
462
- opacity: 1;
463
- background-color: rgba(0, 0, 0, 0.1);
464
- }
465
-
466
253
  .flowdrop-notes-node__icon {
467
254
  width: 1.75rem;
468
255
  height: 1.75rem;
@@ -554,13 +341,8 @@
554
341
  max-width: 350px;
555
342
  }
556
343
 
557
- .flowdrop-notes-node__edit,
558
344
  .flowdrop-notes-node__content {
559
345
  padding: 0.75rem;
560
346
  }
561
-
562
- .flowdrop-notes-node__textarea {
563
- min-height: 100px;
564
- }
565
347
  }
566
348
  </style>
@@ -1,4 +1,4 @@
1
- import type { ConfigValues, NodeMetadata } from '../../types/index.js';
1
+ import type { ConfigValues, NodeMetadata } from "../../types/index.js";
2
2
  type $$ComponentProps = {
3
3
  data: {
4
4
  label: string;
@@ -18,26 +18,7 @@ type $$ComponentProps = {
18
18
  selected?: boolean;
19
19
  isProcessing?: boolean;
20
20
  isError?: boolean;
21
- isEditing?: boolean;
22
21
  };
23
- 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> {
24
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
25
- $$bindings?: Bindings;
26
- } & Exports;
27
- (internal: unknown, props: Props & {
28
- $$events?: Events;
29
- $$slots?: Slots;
30
- }): Exports & {
31
- $set?: any;
32
- $on?: any;
33
- };
34
- z_$$bindings?: Bindings;
35
- }
36
- declare const NotesNode: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
37
- configChange: CustomEvent<any>;
38
- editModeChange: CustomEvent<any>;
39
- } & {
40
- [evt: string]: CustomEvent<any>;
41
- }, {}, {}, "">;
42
- type NotesNode = InstanceType<typeof NotesNode>;
22
+ declare const NotesNode: import("svelte").Component<$$ComponentProps, {}, "">;
23
+ type NotesNode = ReturnType<typeof NotesNode>;
43
24
  export default NotesNode;
package/dist/index.d.ts CHANGED
@@ -29,7 +29,8 @@ export { default as NodeStatusOverlay } from './components/NodeStatusOverlay.sve
29
29
  export { default as MarkdownDisplay } from './components/MarkdownDisplay.svelte';
30
30
  export { default as ConfigForm } from './components/ConfigForm.svelte';
31
31
  export { default as ConfigModal } from './components/ConfigModal.svelte';
32
- export { default as ConfigSidebar } from './components/ConfigSidebar.svelte';
32
+ export { default as ConfigPanel } from './components/ConfigPanel.svelte';
33
+ export { default as ReadOnlyDetails } from './components/ReadOnlyDetails.svelte';
33
34
  export { default as ConnectionLine } from './components/ConnectionLine.svelte';
34
35
  export { default as LogsSidebar } from './components/LogsSidebar.svelte';
35
36
  export { default as PipelineStatus } from './components/PipelineStatus.svelte';
package/dist/index.js CHANGED
@@ -30,7 +30,8 @@ export { default as NodeStatusOverlay } from './components/NodeStatusOverlay.sve
30
30
  export { default as MarkdownDisplay } from './components/MarkdownDisplay.svelte';
31
31
  export { default as ConfigForm } from './components/ConfigForm.svelte';
32
32
  export { default as ConfigModal } from './components/ConfigModal.svelte';
33
- export { default as ConfigSidebar } from './components/ConfigSidebar.svelte';
33
+ export { default as ConfigPanel } from './components/ConfigPanel.svelte';
34
+ export { default as ReadOnlyDetails } from './components/ReadOnlyDetails.svelte';
34
35
  export { default as ConnectionLine } from './components/ConnectionLine.svelte';
35
36
  export { default as LogsSidebar } from './components/LogsSidebar.svelte';
36
37
  export { default as PipelineStatus } from './components/PipelineStatus.svelte';
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@d34dman/flowdrop",
3
3
  "license": "MIT",
4
4
  "private": false,
5
- "version": "0.0.21",
5
+ "version": "0.0.22",
6
6
  "scripts": {
7
7
  "dev": "vite dev",
8
8
  "build": "vite build && npm run prepack",