@flowdrop/flowdrop 1.4.0 → 1.6.0

package/dist/components/console/ConsoleInput.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { NodeMetadata } from '../../types/index.js';
+interface Props {
+    /** Whether the console is currently visible/open */
+    open: boolean;
+    /** Available node types for autocomplete suggestions */
+    nodeTypes?: NodeMetadata[];
+    /** Called when user submits a command (Enter key) */
+    onSubmit: (value: string) => void;
+    /** Called when user pastes multiple lines */
+    onBatchSubmit?: (lines: string[]) => void;
+    /** Called when user presses Escape to close the console */
+    onClose: () => void;
+}
+declare const ConsoleInput: import("svelte").Component<Props, {}, "">;
+type ConsoleInput = ReturnType<typeof ConsoleInput>;
+export default ConsoleInput;

package/dist/components/console/ConsoleOutput.svelte

@@ -0,0 +1,116 @@
+<!--
+  ConsoleOutput Component
+  Scrollable output area for displaying command results in the console
+  Styled with BEM syntax matching CommandConsole pattern
+-->
+
+<script lang="ts">
+  import { tick } from 'svelte';
+
+  export interface ConsoleEntry {
+    type: 'input' | 'success' | 'error' | 'formatted';
+    text: string;
+  }
+
+  interface Props {
+    /** Output entries to display */
+    entries: ConsoleEntry[];
+  }
+
+  let { entries }: Props = $props();
+
+  let outputElement: HTMLDivElement | undefined = $state();
+
+  $effect(() => {
+    // Track entries length to auto-scroll on new entries
+    const _count = entries.length;
+    tick().then(() => {
+      if (outputElement) {
+        outputElement.scrollTop = outputElement.scrollHeight;
+      }
+    });
+  });
+</script>
+
+<div class="console-output" bind:this={outputElement} role="log" aria-live="polite">
+  {#each entries as entry}
+    <div class="console-output__entry console-output__entry--{entry.type}">
+      {#if entry.type === 'input'}
+        <span class="console-output__prefix">&gt;</span>
+        <span class="console-output__text">{entry.text}</span>
+      {:else if entry.type === 'formatted'}
+        <pre class="console-output__pre">{entry.text}</pre>
+      {:else}
+        <span class="console-output__text">{entry.text}</span>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .console-output {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5rem 1rem;
+    font-family: monospace;
+    font-size: 0.875rem;
+    line-height: 1.6;
+
+    /* Custom scrollbar styling matching MainLayout pattern */
+    scrollbar-width: thin;
+    scrollbar-color: var(--fd-scrollbar-thumb) var(--fd-scrollbar-track);
+  }
+
+  .console-output::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .console-output::-webkit-scrollbar-track {
+    background: var(--fd-scrollbar-track);
+    border-radius: 4px;
+  }
+
+  .console-output::-webkit-scrollbar-thumb {
+    background: var(--fd-scrollbar-thumb);
+    border-radius: 4px;
+  }
+
+  .console-output::-webkit-scrollbar-thumb:hover {
+    background: var(--fd-scrollbar-thumb-hover);
+  }
+
+  .console-output__entry {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .console-output__entry--input {
+    color: var(--fd-muted-foreground);
+  }
+
+  .console-output__entry--success {
+    color: var(--fd-success);
+  }
+
+  .console-output__entry--error {
+    color: var(--fd-error);
+  }
+
+  .console-output__entry--formatted {
+    color: var(--fd-foreground);
+  }
+
+  .console-output__pre {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    white-space: pre;
+    overflow-x: auto;
+  }
+
+  .console-output__prefix {
+    margin-right: 0.5rem;
+    user-select: none;
+  }
+</style>

package/dist/components/console/ConsoleOutput.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface ConsoleEntry {
+    type: 'input' | 'success' | 'error' | 'formatted';
+    text: string;
+}
+interface Props {
+    /** Output entries to display */
+    entries: ConsoleEntry[];
+}
+declare const ConsoleOutput: import("svelte").Component<Props, {}, "">;
+type ConsoleOutput = ReturnType<typeof ConsoleOutput>;
+export default ConsoleOutput;

package/dist/components/console/formatters.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Pure formatting functions for rich command result display.
+ * Converts CommandResult data into aligned table strings for console output.
+ */
+import type { ListNodesResultData, ListEdgesResultData, ListTypesResultData, InfoResultData, HelpResultData } from '../../commands/types.js';
+/**
+ * Formats list nodes result as an aligned table: ID, Label, Type.
+ */
+export declare function formatListNodes(data: ListNodesResultData): string;
+/**
+ * Formats list edges result as a table: Source, Port, ->, Target, Port.
+ */
+export declare function formatListEdges(data: ListEdgesResultData): string;
+/**
+ * Formats list types result as a table: Type ID, Name, Category.
+ */
+export declare function formatListTypes(data: ListTypesResultData): string;
+/**
+ * Formats info result as structured output with header fields,
+ * config section, ports section, and edges section.
+ */
+export declare function formatInfo(data: InfoResultData): string;
+/**
+ * Formats help result as a table: Name, Syntax, Description.
+ */
+export declare function formatHelp(data: HelpResultData): string;

package/dist/components/console/formatters.js

@@ -0,0 +1,116 @@
+/**
+ * Pads a string to a given width (right-padded with spaces).
+ */
+function pad(str, width) {
+    return str.length >= width ? str : str + ' '.repeat(width - str.length);
+}
+/**
+ * Formats a simple table from rows with headers.
+ * Each column is auto-sized to fit the widest value.
+ */
+function formatTable(headers, rows) {
+    const colWidths = headers.map((h, i) => Math.max(h.length, ...rows.map((r) => (r[i] ?? '').length)));
+    const headerLine = headers.map((h, i) => pad(h, colWidths[i])).join('  ');
+    const separator = colWidths.map((w) => '-'.repeat(w)).join('  ');
+    const dataLines = rows.map((row) => row.map((cell, i) => pad(cell, colWidths[i])).join('  '));
+    return [headerLine, separator, ...dataLines].join('\n');
+}
+/**
+ * Formats list nodes result as an aligned table: ID, Label, Type.
+ */
+export function formatListNodes(data) {
+    if (data.nodes.length === 0) {
+        return 'No nodes in workflow';
+    }
+    const rows = data.nodes.map((n) => [n.nodeId, n.label, n.type]);
+    return formatTable(['ID', 'Label', 'Type'], rows);
+}
+/**
+ * Formats list edges result as a table: Source, Port, ->, Target, Port.
+ */
+export function formatListEdges(data) {
+    if (data.edges.length === 0) {
+        return 'No edges in workflow';
+    }
+    const rows = data.edges.map((e) => [
+        e.sourceNodeId,
+        e.sourcePort,
+        '->',
+        e.targetNodeId,
+        e.targetPort
+    ]);
+    return formatTable(['Source', 'Port', '', 'Target', 'Port'], rows);
+}
+/**
+ * Formats list types result as a table: Type ID, Name, Category.
+ */
+export function formatListTypes(data) {
+    if (data.types.length === 0) {
+        return 'No node types available';
+    }
+    const rows = data.types.map((t) => [t.typeId, t.name, t.category]);
+    return formatTable(['Type ID', 'Name', 'Category'], rows);
+}
+/**
+ * Formats info result as structured output with header fields,
+ * config section, ports section, and edges section.
+ */
+export function formatInfo(data) {
+    const lines = [];
+    // Header fields
+    lines.push(`Node:     ${data.nodeId}`);
+    lines.push(`Label:    ${data.label}`);
+    lines.push(`Type:     ${data.type}`);
+    lines.push(`Position: (${Math.round(data.position.x)}, ${Math.round(data.position.y)})`);
+    // Config section
+    const configEntries = Object.entries(data.config);
+    if (configEntries.length > 0) {
+        lines.push('');
+        lines.push('Config:');
+        for (const [key, value] of configEntries) {
+            const display = typeof value === 'string' ? `"${value}"` : (JSON.stringify(value) ?? 'null');
+            lines.push(`  ${key}: ${display}`);
+        }
+    }
+    // Ports section
+    if (data.inputs.length > 0 || data.outputs.length > 0) {
+        lines.push('');
+        lines.push('Ports:');
+        if (data.inputs.length > 0) {
+            lines.push('  Inputs:');
+            for (const port of data.inputs) {
+                lines.push(`    ${port.portId} (${port.dataType})`);
+            }
+        }
+        if (data.outputs.length > 0) {
+            lines.push('  Outputs:');
+            for (const port of data.outputs) {
+                lines.push(`    ${port.portId} (${port.dataType})`);
+            }
+        }
+    }
+    // Connected edges section
+    if (data.connectedEdges.length > 0) {
+        lines.push('');
+        lines.push('Edges:');
+        for (const edge of data.connectedEdges) {
+            if (edge.direction === 'incoming') {
+                lines.push(`  ${edge.remoteNodeId}:${edge.remotePort} -> ${edge.localPort}`);
+            }
+            else {
+                lines.push(`  ${edge.localPort} -> ${edge.remoteNodeId}:${edge.remotePort}`);
+            }
+        }
+    }
+    return lines.join('\n');
+}
+/**
+ * Formats help result as a table: Name, Syntax, Description.
+ */
+export function formatHelp(data) {
+    if (data.commands.length === 0) {
+        return 'No commands available';
+    }
+    const rows = data.commands.map((c) => [c.name, c.syntax, c.description]);
+    return formatTable(['Name', 'Syntax', 'Description'], rows);
+}