@flowdrop/flowdrop 1.2.2 → 1.4.0

package/dist/components/App.svelte

@@ -9,6 +9,7 @@
   import MainLayout from "./layouts/MainLayout.svelte";
   import WorkflowEditor from "./WorkflowEditor.svelte";
   import NodeSidebar from "./NodeSidebar.svelte";
+  import Icon from "@iconify/svelte";
   import ConfigForm from "./ConfigForm.svelte";
   import ConfigPanel from "./ConfigPanel.svelte";
   import Navbar from "./Navbar.svelte";
@@ -46,12 +47,16 @@
   } from "../services/globalSave.js";
   import { apiToasts, dismissToast } from "../services/toastService.js";
   import { initAutoSave } from "../services/autoSaveService.js";
-  import { getUiSettings } from "../stores/settingsStore.svelte.js";
+  import {
+    getUiSettings,
+    updateSettings,
+  } from "../stores/settingsStore.svelte.js";
   import { initializePortCompatibility } from "../utils/connections.js";
   import { DEFAULT_PORT_CONFIG } from "../config/defaultPortConfig.js";
   import { workflowFormatRegistry } from "../registry/workflowFormatRegistry.js";
   import { logger } from "../utils/logger.js";
   import { validateWorkflowData } from "../utils/validation.js";
+  import type { SettingsCategory } from "../types/settings.js";
 
   /**
    * Configuration props for runtime customization
@@ -104,6 +109,12 @@
     features?: FlowDropFeatures;
     /** Visual theme — named built-in ('default' | 'minimal') or custom theme object */
     theme?: FlowDropTheme | FlowDropThemeName;
+    /** Which settings tabs to show in the modal */
+    settingsCategories?: SettingsCategory[];
+    /** Show the "Sync to Cloud" button in the settings modal */
+    showSettingsSyncButton?: boolean;
+    /** Show the reset buttons in the settings modal */
+    showSettingsResetButton?: boolean;
   }
 
   let {
@@ -126,6 +137,9 @@
     eventHandlers,
     features: propFeatures,
     theme: themeProp,
+    settingsCategories,
+    showSettingsSyncButton,
+    showSettingsResetButton,
   }: Props = $props();
 
   // svelte-ignore state_referenced_locally — feature flags don't change at runtime
@@ -667,12 +681,22 @@
 
   /**
    * Calculate left sidebar width based on collapsed state
-   * When collapsed, use 48px; otherwise use user-configured width
+   * When collapsed, use 0; otherwise use user-configured width
    */
   const leftSidebarWidth = $derived(
-    getUiSettings().sidebarCollapsed ? 48 : getUiSettings().sidebarWidth,
+    getUiSettings().sidebarCollapsed ? 0 : getUiSettings().sidebarWidth,
   );
 
+  /** Whether the sidebar is collapsed */
+  const isSidebarCollapsed = $derived(getUiSettings().sidebarCollapsed);
+
+  /** Toggle sidebar collapsed state */
+  function toggleSidebar(): void {
+    updateSettings({
+      ui: { sidebarCollapsed: !getUiSettings().sidebarCollapsed },
+    });
+  }
+
   // File input reference for workflow import
   let fileInputRef = $state<HTMLInputElement | null>(null);
 </script>
@@ -705,8 +729,8 @@
     headerHeight={60}
     {leftSidebarWidth}
     rightSidebarWidth={400}
-    leftSidebarMinWidth={getUiSettings().sidebarCollapsed ? 48 : 280}
-    leftSidebarMaxWidth={getUiSettings().sidebarCollapsed ? 48 : 450}
+    leftSidebarMinWidth={getUiSettings().sidebarCollapsed ? 0 : 280}
+    leftSidebarMaxWidth={getUiSettings().sidebarCollapsed ? 0 : 450}
     rightSidebarMinWidth={320}
     rightSidebarMaxWidth={550}
     enableLeftSplitPane={false}
@@ -763,6 +787,9 @@
             ]}
         showStatus={true}
         {showSettings}
+        {settingsCategories}
+        {showSettingsSyncButton}
+        {showSettingsResetButton}
       />
     {/snippet}
 
@@ -974,6 +1001,20 @@
       role="region"
       aria-label="Workflow canvas"
     >
+      <!-- Floating sidebar toggle — always visible on the canvas top-left -->
+      {#if !disableSidebar}
+        <button
+          class="flowdrop-sidebar-fab"
+          onclick={toggleSidebar}
+          aria-label={isSidebarCollapsed
+            ? "Expand sidebar"
+            : "Collapse sidebar"}
+          title={isSidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+        >
+          <Icon icon={isSidebarCollapsed ? "mdi:menu" : "mdi:menu-open"} />
+        </button>
+      {/if}
+
       <WorkflowEditor
         bind:this={workflowEditorRef}
         {nodes}
@@ -1098,6 +1139,40 @@
     font-weight: 500;
   }
 
+  /* Floating sidebar toggle button */
+  .flowdrop-sidebar-fab {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-md);
+    background-color: var(--fd-background);
+    color: var(--fd-muted-foreground);
+    cursor: pointer;
+    box-shadow: var(--fd-shadow-md);
+    transition:
+      color var(--fd-transition-fast),
+      background-color var(--fd-transition-fast),
+      box-shadow var(--fd-transition-fast);
+  }
+
+  .flowdrop-sidebar-fab:hover {
+    color: var(--fd-foreground);
+    background-color: var(--fd-subtle);
+    box-shadow: var(--fd-shadow-lg);
+  }
+
+  .flowdrop-sidebar-fab:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--fd-ring);
+  }
+
   /* Main editor area */
   .flowdrop-editor-main {
     flex: 1;

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

@@ -3,6 +3,7 @@ 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";
+import type { SettingsCategory } from "../types/settings.js";
 /**
  * Configuration props for runtime customization
  */
@@ -51,6 +52,12 @@ interface Props {
     features?: FlowDropFeatures;
     /** Visual theme — named built-in ('default' | 'minimal') or custom theme object */
     theme?: FlowDropTheme | FlowDropThemeName;
+    /** Which settings tabs to show in the modal */
+    settingsCategories?: SettingsCategory[];
+    /** Show the "Sync to Cloud" button in the settings modal */
+    showSettingsSyncButton?: boolean;
+    /** Show the reset buttons in the settings modal */
+    showSettingsResetButton?: boolean;
 }
 declare const App: import("svelte").Component<Props, {}, "">;
 type App = ReturnType<typeof App>;

package/dist/components/CanvasBanner.stories.svelte

@@ -2,6 +2,7 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import CanvasBanner from "./CanvasBanner.svelte";
   import CanvasDecorator from "../stories/CanvasDecorator.svelte";
+  import Icon from "@iconify/svelte";
 
   const { Story } = defineMeta({
     title: "Display/CanvasBanner",
@@ -17,8 +18,11 @@
     <CanvasBanner
       title="Empty Canvas"
       description="Drag nodes from the sidebar to get started"
-      iconName="heroicons:squares-plus"
-    />
+    >
+      {#snippet icon()}
+        <Icon icon="heroicons:squares-plus" />
+      {/snippet}
+    </CanvasBanner>
   </CanvasDecorator>
 </Story>
 

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
 	   ============================================ */