@flowdrop/flowdrop 1.2.1 → 1.3.0

package/dist/components/ConfigForm.svelte

@@ -25,9 +25,12 @@
     WorkflowNode,
     WorkflowEdge,
     NodeUIExtensions,
+    NodePort,
+    DynamicPort,
     ConfigEditOptions,
     AuthProvider,
   } from "../types/index.js";
+  import { dynamicPortToNodePort } from "../types/index.js";
   import type { UISchemaElement } from "../types/uischema.js";
   import {
     FormField,
@@ -46,6 +49,11 @@
   import { globalSaveWorkflow } from "../services/globalSave.js";
   import { getAvailableVariables } from "../services/variableService.js";
   import { logger } from "../utils/logger.js";
+  import {
+    getDataTypeColorToken,
+    getPortBackgroundColor,
+  } from "../utils/colors.js";
+  import { applyPortOrder } from "../utils/portUtils.js";
 
   interface Props {
     /** Optional workflow node (if provided, schema and values are derived from it) */
@@ -338,9 +346,118 @@
     uiExtensionValues = {
       hideUnconnectedHandles:
         initialUIExtensions.hideUnconnectedHandles ?? false,
+      portOrder: initialUIExtensions.portOrder
+        ? {
+            inputs: initialUIExtensions.portOrder.inputs
+              ? [...initialUIExtensions.portOrder.inputs]
+              : undefined,
+            outputs: initialUIExtensions.portOrder.outputs
+              ? [...initialUIExtensions.portOrder.outputs]
+              : undefined,
+          }
+        : undefined,
+      hiddenPorts: initialUIExtensions.hiddenPorts
+        ? {
+            inputs: initialUIExtensions.hiddenPorts.inputs
+              ? [...initialUIExtensions.hiddenPorts.inputs]
+              : undefined,
+            outputs: initialUIExtensions.hiddenPorts.outputs
+              ? [...initialUIExtensions.hiddenPorts.outputs]
+              : undefined,
+          }
+        : undefined,
     };
   });
 
+  /**
+   * All input ports in current display order for the port management UI.
+   * Combines static metadata inputs + dynamic config inputs, sorted by portOrder.
+   */
+  const allInputPortsForUI = $derived.by<NodePort[]>(() => {
+    if (!node) return [];
+    const staticInputs = node.data.metadata.inputs ?? [];
+    const dynInputs = (
+      (node.data.config?.dynamicInputs as DynamicPort[]) || []
+    ).map((p) => dynamicPortToNodePort(p, "input"));
+    return applyPortOrder(
+      [...staticInputs, ...dynInputs],
+      uiExtensionValues.portOrder?.inputs,
+    );
+  });
+
+  /**
+   * All output ports in current display order for the port management UI.
+   * Combines static metadata outputs + dynamic config outputs, sorted by portOrder.
+   */
+  const allOutputPortsForUI = $derived.by<NodePort[]>(() => {
+    if (!node) return [];
+    const staticOutputs = node.data.metadata.outputs ?? [];
+    const dynOutputs = (
+      (node.data.config?.dynamicOutputs as DynamicPort[]) || []
+    ).map((p) => dynamicPortToNodePort(p, "output"));
+    return applyPortOrder(
+      [...staticOutputs, ...dynOutputs],
+      uiExtensionValues.portOrder?.outputs,
+    );
+  });
+
+  /**
+   * Move a port one position up or down in the display order.
+   */
+  function movePort(
+    direction: "inputs" | "outputs",
+    portId: string,
+    delta: -1 | 1,
+  ): void {
+    const list =
+      direction === "inputs" ? allInputPortsForUI : allOutputPortsForUI;
+    const idx = list.findIndex((p) => p.id === portId);
+    if (idx === -1) return;
+    const newIdx = idx + delta;
+    if (newIdx < 0 || newIdx >= list.length) return;
+    const newOrder = list.map((p) => p.id);
+    [newOrder[idx], newOrder[newIdx]] = [newOrder[newIdx], newOrder[idx]];
+    uiExtensionValues.portOrder = {
+      ...uiExtensionValues.portOrder,
+      [direction]: newOrder,
+    };
+    handleFormBlur();
+  }
+
+  /**
+   * Toggle manual visibility of a port. Required ports cannot be hidden.
+   */
+  function togglePortHidden(
+    direction: "inputs" | "outputs",
+    portId: string,
+  ): void {
+    const current = uiExtensionValues.hiddenPorts?.[direction] ?? [];
+    const isHidden = current.includes(portId);
+    const next = isHidden
+      ? current.filter((id) => id !== portId)
+      : [...current, portId];
+    uiExtensionValues.hiddenPorts = {
+      ...uiExtensionValues.hiddenPorts,
+      [direction]: next.length > 0 ? next : undefined,
+    };
+    handleFormBlur();
+  }
+
+  /**
+   * Reset all port customizations (order + hidden) for a direction back to defaults.
+   */
+  function resetPortCustomizations(direction: "inputs" | "outputs"): void {
+    const order = { ...uiExtensionValues.portOrder };
+    const hidden = { ...uiExtensionValues.hiddenPorts };
+    delete order[direction];
+    delete hidden[direction];
+    uiExtensionValues.portOrder =
+      Object.keys(order).length > 0 ? order : undefined;
+    uiExtensionValues.hiddenPorts =
+      Object.keys(hidden).length > 0 ? hidden : undefined;
+    handleFormBlur();
+  }
+
   /**
    * Check if a field is required based on schema
    */
@@ -708,6 +825,176 @@
               }}
             />
           </FormFieldWrapper>
+
+          <!-- Input Port Order & Visibility -->
+          {#if allInputPortsForUI.length > 0}
+            <div class="config-form__port-order">
+              <div class="config-form__port-order-header">
+                <span class="config-form__port-order-label">Input Ports</span>
+                {#if uiExtensionValues.portOrder?.inputs?.length || uiExtensionValues.hiddenPorts?.inputs?.length}
+                  <button
+                    type="button"
+                    class="config-form__port-order-reset"
+                    onclick={() => resetPortCustomizations("inputs")}
+                    title="Reset to default order and visibility"
+                  >
+                    <Icon icon="heroicons:arrow-uturn-left" />
+                    Reset
+                  </button>
+                {/if}
+              </div>
+              <ul class="config-form__port-order-list">
+                {#each allInputPortsForUI as port, i (port.id)}
+                  {@const isHidden =
+                    uiExtensionValues.hiddenPorts?.inputs?.includes(port.id) ??
+                    false}
+                  {@const isRequired = port.required ?? false}
+                  <li
+                    class="config-form__port-order-item"
+                    class:config-form__port-order-item--hidden={isHidden}
+                  >
+                    <span class="config-form__port-order-name">{port.name}</span
+                    >
+                    <span
+                      class="config-form__port-order-badge"
+                      style="background-color:{getPortBackgroundColor(
+                        port.dataType,
+                        15,
+                      )};color:{getDataTypeColorToken(
+                        port.dataType,
+                      )};border:1px solid {getPortBackgroundColor(
+                        port.dataType,
+                        30,
+                      )}"
+                    >
+                      {port.dataType}
+                    </span>
+                    <div class="config-form__port-order-actions">
+                      <button
+                        type="button"
+                        disabled={isRequired}
+                        title={isRequired
+                          ? "Required ports cannot be hidden"
+                          : isHidden
+                            ? "Show port"
+                            : "Hide port"}
+                        class:active={isHidden}
+                        onclick={() => togglePortHidden("inputs", port.id)}
+                      >
+                        <Icon
+                          icon={isHidden
+                            ? "heroicons:eye-slash"
+                            : "heroicons:eye"}
+                        />
+                      </button>
+                      <button
+                        type="button"
+                        disabled={i === 0 || allInputPortsForUI.length === 1}
+                        onclick={() => movePort("inputs", port.id, -1)}
+                        title="Move up"
+                      >
+                        <Icon icon="heroicons:chevron-up" />
+                      </button>
+                      <button
+                        type="button"
+                        disabled={i === allInputPortsForUI.length - 1 ||
+                          allInputPortsForUI.length === 1}
+                        onclick={() => movePort("inputs", port.id, 1)}
+                        title="Move down"
+                      >
+                        <Icon icon="heroicons:chevron-down" />
+                      </button>
+                    </div>
+                  </li>
+                {/each}
+              </ul>
+            </div>
+          {/if}
+
+          <!-- Output Port Order & Visibility -->
+          {#if allOutputPortsForUI.length > 0}
+            <div class="config-form__port-order">
+              <div class="config-form__port-order-header">
+                <span class="config-form__port-order-label">Output Ports</span>
+                {#if uiExtensionValues.portOrder?.outputs?.length || uiExtensionValues.hiddenPorts?.outputs?.length}
+                  <button
+                    type="button"
+                    class="config-form__port-order-reset"
+                    onclick={() => resetPortCustomizations("outputs")}
+                    title="Reset to default order and visibility"
+                  >
+                    <Icon icon="heroicons:arrow-uturn-left" />
+                    Reset
+                  </button>
+                {/if}
+              </div>
+              <ul class="config-form__port-order-list">
+                {#each allOutputPortsForUI as port, i (port.id)}
+                  {@const isHidden =
+                    uiExtensionValues.hiddenPorts?.outputs?.includes(port.id) ??
+                    false}
+                  {@const isRequired = port.required ?? false}
+                  <li
+                    class="config-form__port-order-item"
+                    class:config-form__port-order-item--hidden={isHidden}
+                  >
+                    <span class="config-form__port-order-name">{port.name}</span
+                    >
+                    <span
+                      class="config-form__port-order-badge"
+                      style="background-color:{getPortBackgroundColor(
+                        port.dataType,
+                        15,
+                      )};color:{getDataTypeColorToken(
+                        port.dataType,
+                      )};border:1px solid {getPortBackgroundColor(
+                        port.dataType,
+                        30,
+                      )}"
+                    >
+                      {port.dataType}
+                    </span>
+                    <div class="config-form__port-order-actions">
+                      <button
+                        type="button"
+                        disabled={isRequired}
+                        title={isRequired
+                          ? "Required ports cannot be hidden"
+                          : isHidden
+                            ? "Show port"
+                            : "Hide port"}
+                        class:active={isHidden}
+                        onclick={() => togglePortHidden("outputs", port.id)}
+                      >
+                        <Icon
+                          icon={isHidden
+                            ? "heroicons:eye-slash"
+                            : "heroicons:eye"}
+                        />
+                      </button>
+                      <button
+                        type="button"
+                        disabled={i === 0 || allOutputPortsForUI.length === 1}
+                        onclick={() => movePort("outputs", port.id, -1)}
+                        title="Move up"
+                      >
+                        <Icon icon="heroicons:chevron-up" />
+                      </button>
+                      <button
+                        type="button"
+                        disabled={i === allOutputPortsForUI.length - 1 ||
+                          allOutputPortsForUI.length === 1}
+                        onclick={() => movePort("outputs", port.id, 1)}
+                        title="Move down"
+                      >
+                        <Icon icon="heroicons:chevron-down" />
+                      </button>
+                    </div>
+                  </li>
+                {/each}
+              </ul>
+            </div>
+          {/if}
         </div>
       </div>
     {/if}
@@ -928,6 +1215,140 @@
     gap: var(--fd-space-xl);
   }
 
+  /* ============================================
+     PORT ORDER & VISIBILITY
+     ============================================ */
+
+  .config-form__port-order {
+    border-top: 1px solid var(--fd-border-muted);
+    padding-top: var(--fd-space-md);
+    margin-top: calc(var(--fd-space-xl) * -0.25);
+  }
+
+  .config-form__port-order-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--fd-space-xs);
+  }
+
+  .config-form__port-order-label {
+    font-size: var(--fd-text-xs);
+    font-weight: 600;
+    color: var(--fd-muted-foreground);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .config-form__port-order-reset {
+    background: none;
+    border: none;
+    font-size: var(--fd-text-xs);
+    color: var(--fd-muted-foreground);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    padding: 0;
+    transition: color var(--fd-transition-fast);
+  }
+
+  .config-form__port-order-reset:hover {
+    color: var(--fd-foreground);
+  }
+
+  .config-form__port-order-reset :global(svg) {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .config-form__port-order-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--fd-space-3xs);
+  }
+
+  .config-form__port-order-item {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    padding: var(--fd-space-3xs) var(--fd-space-xs);
+    background: var(--fd-muted);
+    border-radius: var(--fd-radius-sm);
+    border: 1px solid var(--fd-border-muted);
+    transition: opacity var(--fd-transition-fast);
+  }
+
+  .config-form__port-order-item--hidden {
+    opacity: 0.4;
+  }
+
+  .config-form__port-order-name {
+    flex: 1;
+    font-size: var(--fd-text-xs);
+    font-weight: 500;
+    color: var(--fd-foreground);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .config-form__port-order-badge {
+    padding: 0.125rem var(--fd-space-3xs);
+    border-radius: var(--fd-radius-sm);
+    font-size: 0.625rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    flex-shrink: 0;
+  }
+
+  .config-form__port-order-actions {
+    display: flex;
+    gap: var(--fd-space-3xs);
+    flex-shrink: 0;
+  }
+
+  .config-form__port-order-actions button {
+    width: 1.25rem;
+    height: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--fd-card);
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-sm);
+    color: var(--fd-muted-foreground);
+    cursor: pointer;
+    padding: 0;
+    transition: all var(--fd-transition-fast);
+  }
+
+  .config-form__port-order-actions button:hover:not(:disabled) {
+    background: var(--fd-backdrop);
+    color: var(--fd-foreground);
+    border-color: var(--fd-border-strong);
+  }
+
+  .config-form__port-order-actions button:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .config-form__port-order-actions button.active {
+    color: var(--fd-foreground);
+    border-color: var(--fd-border-strong);
+  }
+
+  .config-form__port-order-actions button :global(svg) {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
   /* ============================================
 	   DEBUG SECTION
 	   ============================================ */

package/dist/components/NodeSidebar.svelte

@@ -276,10 +276,22 @@
               </div>
             {:else}
               <div class="flowdrop-hero__icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
-                  <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
-                  <line x1="12" y1="22.08" x2="12" y2="12"/>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path
+                    d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+                  />
+                  <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+                  <line x1="12" y1="22.08" x2="12" y2="12" />
                 </svg>
               </div>
               <h3 class="flowdrop-hero__title">No node types available</h3>
@@ -299,9 +311,19 @@
             <div class="flowdrop-hero">
               <div class="flowdrop-hero__content">
                 <div class="flowdrop-hero__icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-                    <circle cx="11" cy="11" r="8"/>
-                    <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="1em"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <circle cx="11" cy="11" r="8" />
+                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
                   </svg>
                 </div>
                 <h3 class="flowdrop-hero__title">No components found</h3>

package/dist/components/WorkflowEditor.svelte

@@ -859,12 +859,22 @@
               description="Use the sidebar to add components to your workflow"
             >
               {#snippet icon()}
-                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-                  <circle cx="18" cy="5" r="3"/>
-                  <circle cx="6" cy="12" r="3"/>
-                  <circle cx="18" cy="19" r="3"/>
-                  <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
-                  <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <circle cx="18" cy="5" r="3" />
+                  <circle cx="6" cy="12" r="3" />
+                  <circle cx="18" cy="19" r="3" />
+                  <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
+                  <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
                 </svg>
               {/snippet}
             </CanvasBanner>

package/dist/components/nodes/GatewayNode.svelte

@@ -57,12 +57,11 @@
    * Get the hideUnconnectedHandles setting from extensions
    * Merges node type defaults with instance overrides
    */
-  const hideUnconnectedHandles = $derived(() => {
-    const typeDefault =
-      props.data.metadata?.extensions?.ui?.hideUnconnectedHandles ?? false;
-    const instanceOverride = props.data.extensions?.ui?.hideUnconnectedHandles;
-    return instanceOverride ?? typeDefault;
-  });
+  const hideUnconnectedHandles = $derived(
+    props.data.extensions?.ui?.hideUnconnectedHandles ??
+      props.data.metadata?.extensions?.ui?.hideUnconnectedHandles ??
+      false,
+  );
 
   /**
    * Check if a port should be visible based on connection state and settings
@@ -72,7 +71,7 @@
    */
   function isPortVisible(port: NodePort, type: "input" | "output"): boolean {
     // Always show if hideUnconnectedHandles is disabled
-    if (!hideUnconnectedHandles()) {
+    if (!hideUnconnectedHandles) {
       return true;
     }
 
@@ -100,7 +99,7 @@
    */
   function isBranchVisible(branchName: string): boolean {
     // Always show if hideUnconnectedHandles is disabled
-    if (!hideUnconnectedHandles()) {
+    if (!hideUnconnectedHandles) {
       return true;
     }
 
@@ -211,7 +210,7 @@
   {#if visibleInputPorts.length > 0}
     <div class="flowdrop-workflow-node__ports">
       <div class="flowdrop-workflow-node__ports-list">
-        {#each visibleInputPorts as port, inputIndex (port.id)}
+        {#each visibleInputPorts as port (port.id)}
           <div class="flowdrop-workflow-node__port">
             <!-- Input Handle: centered in row, at node edge (ports have no padding) -->
             <Handle