@flowdrop/flowdrop 2.0.0-beta.2 → 2.0.0-beta.3

package/dist/components/form/FormTemplateEditor.svelte

@@ -623,7 +623,8 @@
     border: 1px solid var(--fd-border);
     border-radius: var(--fd-radius-lg);
     overflow: hidden;
-    background-color: var(--fd-muted);
+    /* Match plain form fields: rest on the input surface, not --fd-muted. */
+    background-color: var(--fd-background);
     transition: all var(--fd-transition-normal);
     box-shadow: var(--fd-shadow-sm);
   }
@@ -633,12 +634,13 @@
     background-color: var(--fd-background);
   }
 
+  /* Compound widget: ring drawn on the container via :focus-within, using the
+     standard --fd-ring tokens (outline isn't clipped by the container overflow). */
   .form-template-editor__container:focus-within {
     border-color: var(--fd-accent);
     background-color: var(--fd-background);
-    box-shadow:
-      0 0 0 3px rgba(168, 85, 247, 0.12),
-      var(--fd-shadow-sm);
+    outline: var(--fd-ring-width) solid var(--fd-ring);
+    outline-offset: var(--fd-ring-offset);
   }
 
   /* Dark theme overrides */

package/dist/components/form/FormTextField.svelte

@@ -66,7 +66,7 @@
     font-size: var(--fd-text-sm);
     font-family: inherit;
     color: var(--fd-foreground);
-    background-color: var(--fd-muted);
+    background-color: var(--fd-background);
     transition: all var(--fd-transition-normal);
     box-shadow: var(--fd-shadow-sm);
   }
@@ -81,11 +81,15 @@
   }
 
   .form-text-field:focus {
-    outline: none;
-    border-color: var(--fd-primary);
+    border-color: var(--fd-ring);
     background-color: var(--fd-background);
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.12),
-      var(--fd-shadow-sm);
+  }
+
+  .form-text-field:disabled {
+    background-color: var(--fd-muted);
+    border-color: var(--fd-border-muted);
+    color: var(--fd-muted-foreground);
+    cursor: not-allowed;
+    opacity: 1;
   }
 </style>

package/dist/components/form/FormTextarea.svelte

@@ -69,7 +69,7 @@
     font-size: var(--fd-text-sm);
     font-family: inherit;
     color: var(--fd-foreground);
-    background-color: var(--fd-muted);
+    background-color: var(--fd-background);
     transition: all var(--fd-transition-normal);
     box-shadow: var(--fd-shadow-sm);
     resize: vertical;
@@ -87,11 +87,15 @@
   }
 
   .form-textarea:focus {
-    outline: none;
-    border-color: var(--fd-primary);
+    border-color: var(--fd-ring);
     background-color: var(--fd-background);
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.12),
-      var(--fd-shadow-sm);
+  }
+
+  .form-textarea:disabled {
+    background-color: var(--fd-muted);
+    border-color: var(--fd-border-muted);
+    color: var(--fd-muted-foreground);
+    cursor: not-allowed;
+    opacity: 1;
   }
 </style>

package/dist/components/form/FormToggle.svelte

@@ -120,10 +120,6 @@
     transform: translateX(1.25rem);
   }
 
-  .form-toggle__input:focus-visible + .form-toggle__track {
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-  }
-
   .form-toggle__label {
     font-size: var(--fd-text-sm);
     color: var(--fd-muted-foreground);

package/dist/components/icons/CommandLineIcon.svelte

@@ -0,0 +1,15 @@
+<!-- Inline SVG equivalent of heroicons:command-line (outline) -->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.5"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <path
+    d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
+  />
+</svg>

package/dist/components/icons/CommandLineIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default CommandLineIcon;
+type CommandLineIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CommandLineIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/icons/MenuIcon.svelte

@@ -0,0 +1,4 @@
+<!-- Inline SVG equivalent of mdi:menu (Material Design Icons) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
+</svg>

package/dist/components/icons/MenuIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default MenuIcon;
+type MenuIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const MenuIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/icons/MenuOpenIcon.svelte

@@ -0,0 +1,6 @@
+<!-- Inline SVG equivalent of mdi:menu-open (Material Design Icons) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path
+    d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z"
+  />
+</svg>

package/dist/components/icons/MenuOpenIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default MenuOpenIcon;
+type MenuOpenIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const MenuOpenIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/interrupt/ChoicePrompt.svelte

@@ -313,11 +313,6 @@
     border: 0;
   }
 
-  .choice-prompt__option:focus-within {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .choice-prompt__checkmark {
     flex-shrink: 0;
     font-size: 1.25rem;
@@ -390,11 +385,6 @@
     transform: translateY(-1px);
   }
 
-  .choice-prompt__submit:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .choice-prompt__submit:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/interrupt/ConfirmationPrompt.svelte

@@ -184,11 +184,6 @@
     min-width: 100px;
   }
 
-  .confirmation-prompt__button:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .confirmation-prompt__button:disabled {
     cursor: not-allowed;
   }

package/dist/components/interrupt/InterruptBubble.svelte

@@ -561,11 +561,6 @@
     background-color: var(--fd-error-hover);
   }
 
-  .interrupt-bubble__retry-btn:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   /* Body - prompt content area, full width */
   .interrupt-bubble__body {
     padding: var(--fd-space-xl);
@@ -648,11 +643,6 @@
     background-color: var(--fd-error-muted);
   }
 
-  .interrupt-bubble__cancel-btn:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .interrupt-bubble__cancel-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/interrupt/ReviewPrompt.svelte

@@ -540,11 +540,6 @@
     color: var(--fd-error);
   }
 
-  .review-prompt__bulk-btn:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .review-prompt__bulk-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -642,11 +637,6 @@
     color: var(--fd-error-foreground);
   }
 
-  .review-prompt__toggle-btn:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .review-prompt__toggle-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -739,11 +729,6 @@
     border-color: var(--fd-border-strong);
   }
 
-  .review-prompt__html-toggle-btn:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   /* Raw HTML code display */
   .review-prompt__raw-html {
     font-family: var(--fd-review-font-mono);
@@ -842,11 +827,6 @@
     transform: translateY(-1px);
   }
 
-  .review-prompt__submit:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .review-prompt__submit:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/interrupt/TextInputPrompt.svelte

@@ -254,7 +254,6 @@
   .text-prompt__input:focus,
   .text-prompt__textarea:focus {
     border-color: var(--fd-interrupt-completed-border);
-    box-shadow: 0 0 0 3px var(--fd-interrupt-completed-shadow);
   }
 
   .text-prompt__input:disabled,
@@ -316,11 +315,6 @@
     transform: translateY(-1px);
   }
 
-  .text-prompt__submit:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .text-prompt__submit:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/layouts/MainLayout.svelte

@@ -510,12 +510,12 @@
 
   .flowdrop-main-layout__sidebar::-webkit-scrollbar-track {
     background: var(--fd-scrollbar-track);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .flowdrop-main-layout__sidebar::-webkit-scrollbar-thumb {
     background: var(--fd-scrollbar-thumb);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .flowdrop-main-layout__sidebar::-webkit-scrollbar-thumb:hover {
@@ -585,7 +585,6 @@
   }
 
   .flowdrop-main-layout__divider:focus {
-    outline: none;
     background-color: var(--fd-primary-muted);
   }
 
@@ -669,12 +668,12 @@
 
   .flowdrop-main-layout__panel--bottom::-webkit-scrollbar-track {
     background: var(--fd-scrollbar-track);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .flowdrop-main-layout__panel--bottom::-webkit-scrollbar-thumb {
     background: var(--fd-scrollbar-thumb);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .flowdrop-main-layout__panel--bottom::-webkit-scrollbar-thumb:hover {

package/dist/components/nodes/AtomNode.svelte

@@ -141,7 +141,7 @@
     return { text: atomCfg.placeholder ?? '', empty: true };
   });
 
-  // Pill height is content-driven (~28px), so fixed px offsets don't fit.
+  // Pill is a fixed 40px tall (20px grid), so a single port centers at 20px.
   // Distribute handles as a % of node height: 50% for one port, evenly otherwise.
   function portTopPct(index: number, count: number): number {
     return ((index + 1) / (count + 1)) * 100;
@@ -150,12 +150,6 @@
   function openConfig(): void {
     data.onConfigOpen?.({ id: nodeId, type: nodeType, data });
   }
-  function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      openConfig();
-    }
-  }
 </script>
 
 {#each inPorts as port, index (port.id)}
@@ -170,6 +164,11 @@
   />
 {/each}
 
+<!-- Presentational: focus, keyboard and selection live on xyflow's node wrapper
+     (see UniversalNode, which maps Enter/Space to opening config). click is a
+     mouse convenience. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
   class="flowdrop-atom-node"
   class:flowdrop-atom-node--selected={selected}
@@ -179,14 +178,13 @@
   class:flowdrop-atom-node--rect={isRect}
   style={nodeStyle}
   onclick={openConfig}
-  onkeydown={handleKeydown}
-  role="button"
-  tabindex="0"
 >
-  {#if atomCfg.prefix && !display.empty}
-    <span class="flowdrop-atom-node__prefix" aria-hidden="true">{atomCfg.prefix}</span>
-  {/if}
-  <span class="flowdrop-atom-node__body" title={display.text}>{display.text}</span>
+  <div class="flowdrop-atom-node__pill">
+    {#if atomCfg.prefix && !display.empty}
+      <span class="flowdrop-atom-node__prefix" aria-hidden="true">{atomCfg.prefix}</span>
+    {/if}
+    <span class="flowdrop-atom-node__body" title={display.text}>{display.text}</span>
+  </div>
 </div>
 
 {#each outPorts as port, index (port.id)}
@@ -202,54 +200,68 @@
 {/each}
 
 <style>
+  /* Transparent slot: defines the node's bounding box so handles anchor
+     consistently, while the pill sits narrow and vertically centered inside. */
   .flowdrop-atom-node {
     position: relative;
-    display: inline-flex;
+    box-sizing: border-box;
+    display: flex;
     align-items: center;
+    justify-content: center;
     width: fit-content;
-    min-width: 2rem;
-    min-height: 28px;
-    padding: 2px var(--fd-space-sm);
-    background-color: var(--fd-card);
+    /* 40px tall → a single port centers at 20px (50%); capped at 60px / 120px. */
+    min-height: 40px;
+    max-height: 60px;
+    max-width: 120px;
+    cursor: pointer;
+    z-index: 10;
+  }
+
+  /* The visible, themed pill — hugs its text and stays compact. */
+  .flowdrop-atom-node__pill {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    min-width: 32px;
+    padding: 4px 10px;
+    background-color: var(--fd-node-bg);
+    backdrop-filter: var(--fd-node-backdrop-filter);
     /* --fd-atom-node-color is set inline only when the server provides a color;
        otherwise it falls back to the neutral border token. */
-    border: 1.5px solid var(--fd-atom-node-color, var(--fd-node-border));
+    border: var(--fd-node-border-width) solid var(--fd-atom-node-color, var(--fd-node-border));
     border-radius: 999px;
     box-shadow: var(--fd-shadow-sm);
     color: var(--fd-foreground);
-    cursor: pointer;
     transition:
       box-shadow var(--fd-transition-fast),
       border-color var(--fd-transition-fast);
-    z-index: 10;
   }
 
-  .flowdrop-atom-node--rect {
+  .flowdrop-atom-node--rect .flowdrop-atom-node__pill {
     border-radius: var(--fd-radius-md);
   }
 
-  .flowdrop-atom-node:hover {
-    box-shadow: var(--fd-shadow-md);
+  .flowdrop-atom-node:hover .flowdrop-atom-node__pill {
+    box-shadow: var(--fd-node-shadow);
     border-color: var(--fd-atom-node-color, var(--fd-node-border-hover));
   }
 
-  .flowdrop-atom-node--selected {
+  .flowdrop-atom-node--selected .flowdrop-atom-node__pill {
     box-shadow:
       0 0 0 2px color-mix(in srgb, var(--fd-atom-node-color, var(--fd-primary)) 30%, transparent),
-      var(--fd-shadow-md);
+      var(--fd-node-shadow);
     border-color: var(--fd-atom-node-color, var(--fd-primary));
   }
 
-  .flowdrop-atom-node:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
+  /* Focus ring is centralized in base.css (drawn on the .svelte-flow__node
+     wrapper, which is the focusable element). */
 
   .flowdrop-atom-node--processing {
     opacity: 0.7;
   }
 
-  .flowdrop-atom-node--error {
+  .flowdrop-atom-node--error .flowdrop-atom-node__pill {
     border-color: var(--fd-error) !important;
     background-color: var(--fd-error-muted) !important;
   }
@@ -264,14 +276,14 @@
     margin-right: 2px;
     color: var(--fd-muted-foreground);
     font-size: var(--fd-text-sm);
-    line-height: 1.2;
+    line-height: 20px;
   }
 
   .flowdrop-atom-node__body {
     /* min-width:0 lets the body ellipsize as a flex sibling of the prefix */
     min-width: 0;
     font-size: var(--fd-text-sm);
-    line-height: 1.2;
+    line-height: 20px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;