@flowdrop/flowdrop 1.2.2 → 1.4.0

package/dist/components/NodeSidebar.svelte

@@ -16,10 +16,7 @@
   import { getCategoryColorToken } from "../utils/colors.js";
   import { getCategoryLabel } from "../stores/categoriesStore.svelte.js";
   import { SvelteSet } from "svelte/reactivity";
-  import {
-    getUiSettings,
-    updateSettings,
-  } from "../stores/settingsStore.svelte.js";
+  import { getUiSettings } from "../stores/settingsStore.svelte.js";
 
   interface Props {
     nodes: NodeMetadata[];
@@ -36,16 +33,6 @@
   // svelte-ignore state_referenced_locally — initial default, user selects interactively
   let selectedCategory = $state(props.selectedCategory || "all");
 
-  /**
-   * Toggle the sidebar collapsed state
-   * Persists the new state to settings
-   */
-  function toggleSidebar(): void {
-    updateSettings({
-      ui: { sidebarCollapsed: !getUiSettings().sidebarCollapsed },
-    });
-  }
-
   /**
    * Check if a node is compatible with the active workflow format.
    * Nodes without formats are universal (compatible with all formats).
@@ -217,165 +204,218 @@
   }
 </script>
 
-<!-- Components Sidebar - Always Visible -->
+<!-- Components Sidebar -->
 <aside
   class="flowdrop-sidebar flowdrop-sidebar--container"
   class:flowdrop-sidebar--collapsed={isCollapsed}
   class:flowdrop-sidebar--compact={getUiSettings().compactMode}
-  style:width="{isCollapsed ? 48 : getUiSettings().sidebarWidth}px"
+  style:width="{isCollapsed ? 0 : getUiSettings().sidebarWidth}px"
   aria-label="Components sidebar"
 >
-  <!-- Header — visibility controlled by --fd-sidebar-header-display -->
-  <div class="flowdrop-sidebar__header">
-    <button
-      class="flowdrop-sidebar__toggle"
-      onclick={toggleSidebar}
-      aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
-      title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
-    >
-      <Icon icon={isCollapsed ? "mdi:chevron-right" : "mdi:chevron-left"} />
-    </button>
-    {#if !isCollapsed}
-      <div class="flowdrop-sidebar__title">
-        <h2 class="flowdrop-text--lg flowdrop-font--bold">Components</h2>
+  <!-- Search Section — visibility controlled by --fd-sidebar-search-display -->
+  <div class="flowdrop-sidebar__search">
+    <div class="flowdrop-join flowdrop-w--full">
+      <div class="flowdrop-join__item flowdrop-flex--1">
+        <input
+          type="text"
+          placeholder="Search components..."
+          class="flowdrop-input flowdrop-join__item flowdrop-w--full"
+          bind:value={searchInput}
+          oninput={handleSearchChange}
+        />
       </div>
-    {/if}
+      <button
+        class="flowdrop-btn flowdrop-join__item"
+        aria-label="Search components"
+      >
+        <Icon icon="mdi:magnify" class="flowdrop-icon" />
+      </button>
+    </div>
   </div>
 
-  {#if !isCollapsed}
-    <!-- Search Section — visibility controlled by --fd-sidebar-search-display -->
-    <div class="flowdrop-sidebar__search">
-      <div class="flowdrop-join flowdrop-w--full">
-        <div class="flowdrop-join__item flowdrop-flex--1">
-          <input
-            type="text"
-            placeholder="Search components..."
-            class="flowdrop-input flowdrop-join__item flowdrop-w--full"
-            bind:value={searchInput}
-            oninput={handleSearchChange}
-          />
+  <!-- Node Types List -->
+  <div class="flowdrop-sidebar__content">
+    {#if props.nodes?.length === 0}
+      <!-- No node types available -->
+      <div class="flowdrop-hero">
+        <div class="flowdrop-hero__content">
+          {#if props.loading}
+            <div class="flowdrop-mb--4">
+              <LoadingSpinner size="md" text="Loading from server..." />
+            </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>
+            </div>
+            <h3 class="flowdrop-hero__title">No node types available</h3>
+            <p class="flowdrop-hero__description">
+              Node type definitions will appear here
+            </p>
+          {/if}
         </div>
-        <button
-          class="flowdrop-btn flowdrop-join__item"
-          aria-label="Search components"
-        >
-          <Icon icon="mdi:magnify" class="flowdrop-icon" />
-        </button>
       </div>
-    </div>
-
-    <!-- Node Types List -->
-    <div class="flowdrop-sidebar__content">
-      {#if props.nodes?.length === 0}
-        <!-- No node types available -->
-        <div class="flowdrop-hero">
-          <div class="flowdrop-hero__content">
-            {#if props.loading}
-              <div class="flowdrop-mb--4">
-                <LoadingSpinner size="md" text="Loading from server..." />
-              </div>
-            {:else}
+    {:else if searchInput.trim()}
+      <!-- Search Results -->
+      <div class="flowdrop-p--4">
+        <div class="flowdrop-divider">
+          <h3 class="flowdrop-divider__text">Search Results</h3>
+        </div>
+        {#if filteredNodes.length === 0}
+          <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">
-                  <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"
+                >
+                  <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 node types available</h3>
+              <h3 class="flowdrop-hero__title">No components found</h3>
               <p class="flowdrop-hero__description">
-                Node type definitions will appear here
+                Try adjusting your search
               </p>
-            {/if}
-          </div>
-        </div>
-      {:else if searchInput.trim()}
-        <!-- Search Results -->
-        <div class="flowdrop-p--4">
-          <div class="flowdrop-divider">
-            <h3 class="flowdrop-divider__text">Search Results</h3>
-          </div>
-          {#if filteredNodes.length === 0}
-            <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>
+              {#if props.loading}
+                <div class="flowdrop-mb--4">
+                  <LoadingSpinner size="sm" text="Loading components..." />
                 </div>
-                <h3 class="flowdrop-hero__title">No components found</h3>
-                <p class="flowdrop-hero__description">
-                  Try adjusting your search
-                </p>
-                {#if props.loading}
-                  <div class="flowdrop-mb--4">
-                    <LoadingSpinner size="sm" text="Loading components..." />
+              {/if}
+            </div>
+          </div>
+        {:else}
+          <div class="flowdrop-node-list">
+            {#each filteredNodes as nodeType (nodeType.id)}
+              <div
+                class="flowdrop-card flowdrop-card--compact flowdrop-node-item"
+                draggable="true"
+                ondragstart={(e) => handleNodeDragStart(e, nodeType)}
+                role="button"
+                tabindex="0"
+              >
+                <div class="flowdrop-card__body flowdrop-p--1 flowdrop-py--1">
+                  <div
+                    class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center"
+                  >
+                    <!-- Node Type Icon with Squircle Background -->
+                    <span
+                      class="flowdrop-node-icon"
+                      style="--_icon-color: {getCategoryColorToken(
+                        nodeType.category,
+                      )}"
+                    >
+                      <Icon
+                        icon={getNodeIcon(nodeType.icon, nodeType.category)}
+                      />
+                    </span>
+
+                    <!-- Node Type Info - Icon and Title only -->
+                    <h4
+                      class="flowdrop-text--sm flowdrop-font--medium flowdrop-truncate flowdrop-flex--1"
+                    >
+                      {nodeType.name}
+                    </h4>
                   </div>
-                {/if}
+                  <p
+                    class="flowdrop-text--xs flowdrop-text--gray flowdrop-truncate flowdrop-mt--1 flowdrop-ml--0"
+                  >
+                    {nodeType.description}
+                  </p>
+                </div>
               </div>
-            </div>
-          {:else}
-            <div class="flowdrop-node-list">
-              {#each filteredNodes as nodeType (nodeType.id)}
-                <div
-                  class="flowdrop-card flowdrop-card--compact flowdrop-node-item"
-                  draggable="true"
-                  ondragstart={(e) => handleNodeDragStart(e, nodeType)}
-                  role="button"
-                  tabindex="0"
-                >
-                  <div class="flowdrop-card__body flowdrop-p--1 flowdrop-py--1">
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {:else}
+      <!-- Show categories with details when no search is active -->
+      <div class="flowdrop-p--4">
+        <!-- Category-specific details -->
+        <div class="flowdrop-category-list">
+          {#each categories as category (category)}
+            {@const categoryNodes = getFilteredNodesForCategory(category)}
+            {#if categoryNodes.length > 0}
+              <!-- Flat style: label + dot+name rows (shown/hidden via CSS token) -->
+              <div class="fd-sidebar-flat-section">
+                <div class="fd-sidebar-flat-category">
+                  {getCategoryDisplayName(category).toUpperCase()}
+                </div>
+                <div class="fd-sidebar-flat-list">
+                  {#each categoryNodes as nodeType (nodeType.id)}
                     <div
-                      class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center"
+                      class="fd-sidebar-flat-item"
+                      draggable="true"
+                      ondragstart={(e) => handleNodeDragStart(e, nodeType)}
+                      onclick={() => handleNodeClick(nodeType)}
+                      role="button"
+                      tabindex="0"
+                      onkeydown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          handleNodeClick(nodeType);
+                        }
+                      }}
                     >
-                      <!-- Node Type Icon with Squircle Background -->
                       <span
-                        class="flowdrop-node-icon"
-                        style="--_icon-color: {getCategoryColorToken(
+                        class="fd-sidebar-flat-dot"
+                        style="background: {getCategoryColorToken(
                           nodeType.category,
                         )}"
-                      >
-                        <Icon
-                          icon={getNodeIcon(nodeType.icon, nodeType.category)}
-                        />
-                      </span>
-
-                      <!-- Node Type Info - Icon and Title only -->
-                      <h4
-                        class="flowdrop-text--sm flowdrop-font--medium flowdrop-truncate flowdrop-flex--1"
-                      >
-                        {nodeType.name}
-                      </h4>
+                      ></span>
+                      <span class="fd-sidebar-flat-name">{nodeType.name}</span>
                     </div>
-                    <p
-                      class="flowdrop-text--xs flowdrop-text--gray flowdrop-truncate flowdrop-mt--1 flowdrop-ml--0"
+                  {/each}
+                </div>
+              </div>
+              <!-- Card style: <details> accordion (shown/hidden via CSS token) -->
+              <details
+                class="flowdrop-details fd-sidebar-card-section"
+                open={props.categoriesDefaultOpen || undefined}
+              >
+                <summary class="flowdrop-details__summary">
+                  <div
+                    class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center"
+                  >
+                    <span
+                      class="flowdrop-node-icon"
+                      style="--_icon-color: {getCategoryColorToken(category)}"
                     >
-                      {nodeType.description}
-                    </p>
+                      <Icon icon={getCategoryIcon(category)} />
+                    </span>
+                    <span>{getCategoryDisplayName(category)}</span>
                   </div>
-                </div>
-              {/each}
-            </div>
-          {/if}
-        </div>
-      {:else}
-        <!-- Show categories with details when no search is active -->
-        <div class="flowdrop-p--4">
-          <!-- Category-specific details -->
-          <div class="flowdrop-category-list">
-            {#each categories as category (category)}
-              {@const categoryNodes = getFilteredNodesForCategory(category)}
-              {#if categoryNodes.length > 0}
-                <!-- Flat style: label + dot+name rows (shown/hidden via CSS token) -->
-                <div class="fd-sidebar-flat-section">
-                  <div class="fd-sidebar-flat-category">
-                    {getCategoryDisplayName(category).toUpperCase()}
+                  <div class="flowdrop-badge flowdrop-badge--secondary">
+                    {categoryNodes.length}
                   </div>
-                  <div class="fd-sidebar-flat-list">
+                </summary>
+                <div class="flowdrop-details__content">
+                  <div class="flowdrop-node-list">
                     {#each categoryNodes as nodeType (nodeType.id)}
                       <div
-                        class="fd-sidebar-flat-item"
+                        class="flowdrop-card flowdrop-card--compact flowdrop-node-item"
                         draggable="true"
                         ondragstart={(e) => handleNodeDragStart(e, nodeType)}
                         onclick={() => handleNodeClick(nodeType)}
@@ -388,122 +428,71 @@
                           }
                         }}
                       >
-                        <span
-                          class="fd-sidebar-flat-dot"
-                          style="background: {getCategoryColorToken(
-                            nodeType.category,
-                          )}"
-                        ></span>
-                        <span class="fd-sidebar-flat-name">{nodeType.name}</span
-                        >
-                      </div>
-                    {/each}
-                  </div>
-                </div>
-                <!-- Card style: <details> accordion (shown/hidden via CSS token) -->
-                <details
-                  class="flowdrop-details fd-sidebar-card-section"
-                  open={props.categoriesDefaultOpen || undefined}
-                >
-                  <summary class="flowdrop-details__summary">
-                    <div
-                      class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center"
-                    >
-                      <span
-                        class="flowdrop-node-icon"
-                        style="--_icon-color: {getCategoryColorToken(category)}"
-                      >
-                        <Icon icon={getCategoryIcon(category)} />
-                      </span>
-                      <span>{getCategoryDisplayName(category)}</span>
-                    </div>
-                    <div class="flowdrop-badge flowdrop-badge--secondary">
-                      {categoryNodes.length}
-                    </div>
-                  </summary>
-                  <div class="flowdrop-details__content">
-                    <div class="flowdrop-node-list">
-                      {#each categoryNodes as nodeType (nodeType.id)}
                         <div
-                          class="flowdrop-card flowdrop-card--compact flowdrop-node-item"
-                          draggable="true"
-                          ondragstart={(e) => handleNodeDragStart(e, nodeType)}
-                          onclick={() => handleNodeClick(nodeType)}
-                          role="button"
-                          tabindex="0"
-                          onkeydown={(e) => {
-                            if (e.key === "Enter" || e.key === " ") {
-                              e.preventDefault();
-                              handleNodeClick(nodeType);
-                            }
-                          }}
+                          class="flowdrop-card__body flowdrop-p--1 flowdrop-py--1"
                         >
                           <div
-                            class="flowdrop-card__body flowdrop-p--1 flowdrop-py--1"
+                            class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center"
                           >
-                            <div
-                              class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center"
+                            <!-- Node Type Icon with Squircle Background -->
+                            <span
+                              class="flowdrop-node-icon"
+                              style="--_icon-color: {getCategoryColorToken(
+                                nodeType.category,
+                              )}"
                             >
-                              <!-- Node Type Icon with Squircle Background -->
-                              <span
-                                class="flowdrop-node-icon"
-                                style="--_icon-color: {getCategoryColorToken(
+                              <Icon
+                                icon={getNodeIcon(
+                                  nodeType.icon,
                                   nodeType.category,
-                                )}"
-                              >
-                                <Icon
-                                  icon={getNodeIcon(
-                                    nodeType.icon,
-                                    nodeType.category,
-                                  )}
-                                />
-                              </span>
-
-                              <!-- Node Type Info - Icon and Title only -->
-                              <h4
-                                class="flowdrop-text--sm flowdrop-font--medium flowdrop-truncate flowdrop-flex--1"
-                              >
-                                {nodeType.name}
-                              </h4>
-                            </div>
-                            <p
-                              class="flowdrop-text--xs flowdrop-text--gray flowdrop-truncate flowdrop-mt--1 flowdrop-ml--0"
+                                )}
+                              />
+                            </span>
+
+                            <!-- Node Type Info - Icon and Title only -->
+                            <h4
+                              class="flowdrop-text--sm flowdrop-font--medium flowdrop-truncate flowdrop-flex--1"
                             >
-                              {nodeType.description}
-                            </p>
+                              {nodeType.name}
+                            </h4>
                           </div>
+                          <p
+                            class="flowdrop-text--xs flowdrop-text--gray flowdrop-truncate flowdrop-mt--1 flowdrop-ml--0"
+                          >
+                            {nodeType.description}
+                          </p>
                         </div>
-                      {/each}
-                    </div>
+                      </div>
+                    {/each}
                   </div>
-                </details>
-              {/if}
-            {/each}
-          </div>
+                </div>
+              </details>
+            {/if}
+          {/each}
         </div>
-      {/if}
-    </div>
+      </div>
+    {/if}
+  </div>
 
-    <!-- Footer -->
-    <div class="flowdrop-sidebar__footer">
+  <!-- Footer -->
+  <div class="flowdrop-sidebar__footer">
+    <div class="flowdrop-flex flowdrop-gap--4">
       <div class="flowdrop-flex flowdrop-gap--4">
-        <div class="flowdrop-flex flowdrop-gap--4">
-          {#if props.loading && props.nodes?.length === 0}
-            <span class="flowdrop-text--xs flowdrop-text--gray"
-              >Loading components...</span
-            >
-          {:else}
-            <span class="flowdrop-text--xs flowdrop-text--gray"
-              >Total: {props.nodes?.length || 0} components</span
-            >
-            <span class="flowdrop-text--xs flowdrop-text--gray"
-              >Showing: {filteredNodes.length}</span
-            >
-          {/if}
-        </div>
+        {#if props.loading && props.nodes?.length === 0}
+          <span class="flowdrop-text--xs flowdrop-text--gray"
+            >Loading components...</span
+          >
+        {:else}
+          <span class="flowdrop-text--xs flowdrop-text--gray"
+            >Total: {props.nodes?.length || 0} components</span
+          >
+          <span class="flowdrop-text--xs flowdrop-text--gray"
+            >Showing: {filteredNodes.length}</span
+          >
+        {/if}
       </div>
     </div>
-  {/if}
+  </div>
 </aside>
 
 <style>
@@ -527,21 +516,14 @@
     height: 100%;
   }
 
-  /* Collapsed state */
+  /* Collapsed state — fully hidden */
   .flowdrop-sidebar--collapsed {
     overflow: hidden;
-  }
-
-  .flowdrop-sidebar--collapsed .flowdrop-sidebar__header {
-    justify-content: center;
-    padding: 0.75rem 0.5rem;
+    border-right: none;
+    box-shadow: none;
   }
 
   /* Compact mode styles */
-  .flowdrop-sidebar--compact .flowdrop-sidebar__header {
-    padding: 0.5rem 0.75rem;
-  }
-
   .flowdrop-sidebar--compact .flowdrop-sidebar__search {
     padding: 0.5rem 0.75rem;
   }
@@ -569,56 +551,6 @@
     gap: 0.25rem;
   }
 
-  /* Toggle button */
-  .flowdrop-sidebar__toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    border: none;
-    background: transparent;
-    color: var(--fd-muted-foreground);
-    border-radius: var(--fd-radius-md);
-    cursor: pointer;
-    transition:
-      color var(--fd-transition-fast),
-      background-color var(--fd-transition-fast);
-    flex-shrink: 0;
-  }
-
-  .flowdrop-sidebar__toggle:hover {
-    color: var(--fd-foreground);
-    background-color: var(--fd-subtle);
-  }
-
-  .flowdrop-sidebar__toggle:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
-  }
-
-  .flowdrop-sidebar__header {
-    background: var(--fd-header);
-    border-bottom: 1px solid var(--fd-border);
-    padding: 0.75rem 1rem;
-    display: var(--fd-sidebar-header-display, flex);
-    align-items: center;
-    justify-content: space-between;
-    flex-shrink: 0;
-  }
-
-  .flowdrop-sidebar__title {
-    display: flex;
-    align-items: center;
-  }
-
-  .flowdrop-sidebar__title h2 {
-    font-size: 1rem;
-    font-weight: 600;
-    margin: 0;
-    color: var(--fd-foreground);
-  }
-
   .flowdrop-sidebar__search {
     padding: 0.75rem 1rem;
     background-color: var(--fd-background);

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>