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

package/dist/components/IconButton.svelte

@@ -0,0 +1,80 @@
+<!--
+  IconButton — typed wrapper over the `.flowdrop-btn--icon` system (base.css).
+
+  The icon-only sibling of Button.svelte: a square button that holds a single
+  glyph (Icon, inline SVG, or character). All geometry, variants, sizes and the
+  centralized focus ring live in base.css; this component is the ergonomic,
+  type-safe entry point so callers pick `variant`/`size` instead of hand-writing
+  class strings and re-declaring widths/tints in scoped styles.
+
+  Internal for now (not exported from any public entry) so the API isn't frozen
+  before GA. Existing hand-rolled square buttons migrate onto it incrementally.
+  Canvas-overlay buttons keep their bespoke components (CanvasIconButton,
+  NodeConfigButton) — those add absolute positioning, shadows and backdrop blur
+  this primitive deliberately stays out of.
+-->
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /**
+     * Visual style. `ghost` (default) is transparent until hover; `default` is a
+     * flat surface with a resting border; `primary`/`danger`/`success` are quiet
+     * semantic tints (muted fill + coloured border) that go solid on press.
+     */
+    variant?: 'ghost' | 'default' | 'primary' | 'danger' | 'success';
+    /** Square size — `md` (32px) is the base; `sm` (28px) / `lg` (36px) add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Native button type */
+    type?: 'button' | 'submit' | 'reset';
+    /** Tooltip text */
+    title?: string;
+    /** Accessible label — required, since the button is icon-only */
+    ariaLabel: string;
+    /** Toggle/pressed state — applies the active tint and sets `aria-pressed` */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Extra classes appended to the root button */
+    class?: string;
+    /** Click handler */
+    onclick?: (event: MouseEvent) => void;
+    /** The glyph (icon, svg, or character) */
+    children: Snippet;
+  }
+
+  let {
+    variant = 'ghost',
+    size = 'md',
+    type = 'button',
+    title,
+    ariaLabel,
+    active = false,
+    disabled = false,
+    class: className = '',
+    onclick,
+    children
+  }: Props = $props();
+
+  // `ghost` reuses the shared `.flowdrop-btn--ghost`; the other variants have
+  // icon-specific tint classes so they don't collide with the solid text buttons.
+  const variantClass = $derived(
+    variant === 'ghost' ? 'flowdrop-btn--ghost' : `flowdrop-btn--icon-${variant}`
+  );
+  // 'md' is the unmodified base size; only 'sm'/'lg' need a size modifier.
+  const sizeClass = $derived(size === 'md' ? '' : `flowdrop-btn--${size}`);
+</script>
+
+<button
+  class="flowdrop-btn flowdrop-btn--icon {variantClass} {sizeClass} {className}"
+  class:is-active={active}
+  {type}
+  {title}
+  {disabled}
+  aria-label={ariaLabel}
+  aria-pressed={active ? true : undefined}
+  {onclick}
+>
+  {@render children()}
+</button>

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

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /**
+     * Visual style. `ghost` (default) is transparent until hover; `default` is a
+     * flat surface with a resting border; `primary`/`danger`/`success` are quiet
+     * semantic tints (muted fill + coloured border) that go solid on press.
+     */
+    variant?: 'ghost' | 'default' | 'primary' | 'danger' | 'success';
+    /** Square size — `md` (32px) is the base; `sm` (28px) / `lg` (36px) add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Native button type */
+    type?: 'button' | 'submit' | 'reset';
+    /** Tooltip text */
+    title?: string;
+    /** Accessible label — required, since the button is icon-only */
+    ariaLabel: string;
+    /** Toggle/pressed state — applies the active tint and sets `aria-pressed` */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Extra classes appended to the root button */
+    class?: string;
+    /** Click handler */
+    onclick?: (event: MouseEvent) => void;
+    /** The glyph (icon, svg, or character) */
+    children: Snippet;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/Input.svelte

@@ -0,0 +1,74 @@
+<!--
+  Input — typed wrapper over the shared `.flowdrop-input` system (base.css).
+
+  All control styling (surface, border, radius, sizes, focus ring, disabled =
+  the only muted state) lives in base.css. This component is the ergonomic,
+  type-safe entry point so callers pick `size`/`invalid`/`leading`/`trailing`
+  instead of hand-writing class strings — the single place text-like fields
+  should route through. Mirrors Button.svelte.
+
+  Native attributes (type, value, placeholder, disabled, id, aria-*, oninput…)
+  are forwarded verbatim to the underlying <input>.
+
+  Internal for now (not exported from any public entry) so the API isn't frozen
+  before GA. Existing hand-rolled inputs migrate onto it incrementally.
+-->
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  // Omit native numeric `size` so our design-token size (matching Button) wins.
+  interface Props extends Omit<HTMLInputAttributes, 'size'> {
+    /** Size — `md` is the base `.flowdrop-input`; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Renders the error-border state */
+    invalid?: boolean;
+    /** Extra classes appended to the input */
+    class?: string;
+    /** Optional leading affordance (e.g. a search icon) */
+    leading?: Snippet;
+    /** Optional trailing affordance */
+    trailing?: Snippet;
+  }
+
+  let {
+    size = 'md',
+    invalid = false,
+    class: className = '',
+    leading,
+    trailing,
+    ...rest
+  }: Props = $props();
+
+  const inputClass = $derived(
+    [
+      'flowdrop-input',
+      size === 'md' ? '' : `flowdrop-input--${size}`,
+      invalid ? 'flowdrop-input--invalid' : '',
+      leading ? 'flowdrop-input--has-leading' : '',
+      trailing ? 'flowdrop-input--has-trailing' : '',
+      className
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+{#if leading || trailing}
+  <div class="flowdrop-input-wrap">
+    {#if leading}
+      <span class="flowdrop-input-wrap__icon flowdrop-input-wrap__icon--leading">
+        {@render leading()}
+      </span>
+    {/if}
+    <input class={inputClass} {...rest} />
+    {#if trailing}
+      <span class="flowdrop-input-wrap__icon flowdrop-input-wrap__icon--trailing">
+        {@render trailing()}
+      </span>
+    {/if}
+  </div>
+{:else}
+  <input class={inputClass} {...rest} />
+{/if}

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'size'> {
+    /** Size — `md` is the base `.flowdrop-input`; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Renders the error-border state */
+    invalid?: boolean;
+    /** Extra classes appended to the input */
+    class?: string;
+    /** Optional leading affordance (e.g. a search icon) */
+    leading?: Snippet;
+    /** Optional trailing affordance */
+    trailing?: Snippet;
+}
+declare const Input: import("svelte").Component<Props, {}, "">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/Navbar.svelte

@@ -7,6 +7,7 @@
 -->
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import Icon from '@iconify/svelte';
   import LogoWordmark from './LogoWordmark.svelte';
   import SettingsModal from './SettingsModal.svelte';
@@ -37,6 +38,8 @@
     showSettingsSyncButton?: boolean;
     /** Show the reset buttons in the settings modal */
     showSettingsResetButton?: boolean;
+    /** Custom content rendered in the trailing (right) region, before the settings gear */
+    end?: Snippet;
   }
 
   let {
@@ -47,7 +50,8 @@
     showSettings = true,
     settingsCategories,
     showSettingsSyncButton,
-    showSettingsResetButton
+    showSettingsResetButton,
+    end
   }: Props = $props();
 
   // Dropdown state
@@ -271,6 +275,7 @@
   </div>
 
   <div class="flowdrop-navbar__end">
+    {@render end?.()}
     {#if showSettings}
       <button
         class="flowdrop-navbar__settings-btn"
@@ -519,7 +524,7 @@
     transition: all var(--fd-transition-normal);
     font-weight: 500;
     font-size: var(--fd-text-sm);
-    height: 2.5rem;
+    height: var(--fd-size-btn-min);
     box-sizing: border-box;
     background-color: var(--fd-background);
     color: var(--fd-foreground);
@@ -535,7 +540,7 @@
     position: relative;
     display: flex;
     align-items: center;
-    height: 2.5rem;
+    height: var(--fd-size-btn-min);
   }
 
   .flowdrop-navbar__dropdown-trigger {
@@ -543,7 +548,7 @@
     align-items: center;
     justify-content: center;
     width: 2rem;
-    height: 2.5rem;
+    height: var(--fd-size-btn-min);
     border: 1px solid var(--fd-border-strong);
     border-left: none;
     border-radius: 0 var(--fd-radius-md) var(--fd-radius-md) 0;

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

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { SettingsCategory } from '../types/settings.js';
 import type { NavbarAction } from '../types/navbar.js';
 interface BreadcrumbItem {
@@ -22,6 +23,8 @@ interface Props {
     showSettingsSyncButton?: boolean;
     /** Show the reset buttons in the settings modal */
     showSettingsResetButton?: boolean;
+    /** Custom content rendered in the trailing (right) region, before the settings gear */
+    end?: Snippet;
 }
 declare const Navbar: import("svelte").Component<Props, {}, "">;
 type Navbar = ReturnType<typeof Navbar>;

package/dist/components/NodeSidebar.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
   import type { NodeMetadata, NodeCategory, WorkflowFormat } from '../types/index.js';
   import LoadingSpinner from './LoadingSpinner.svelte';
+  import Input from './Input.svelte';
   import Icon from '@iconify/svelte';
   import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
   import { getCategoryColorToken } from '../utils/colors.js';
@@ -161,19 +162,17 @@
 >
   <!-- 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={m().layout.searchComponents}
-          class="flowdrop-input flowdrop-join__item flowdrop-w--full"
-          bind:value={searchInput}
-        />
-      </div>
-      <button class="flowdrop-btn flowdrop-join__item" aria-label={m().layout.searchComponents}>
-        <Icon icon="mdi:magnify" class="flowdrop-icon" />
-      </button>
-    </div>
+    <Input
+      type="text"
+      placeholder={m().layout.searchComponents}
+      aria-label={m().layout.searchComponents}
+      value={searchInput}
+      oninput={(e) => (searchInput = e.currentTarget.value)}
+    >
+      {#snippet leading()}
+        <Icon icon="mdi:magnify" />
+      {/snippet}
+    </Input>
   </div>
 
   <!-- Node Types List -->
@@ -594,106 +593,9 @@
     margin-left: 0;
   }
 
-  /* Form Elements - Matching App Design System */
-  .flowdrop-input {
-    padding: 0.625rem 0.75rem;
-    border: 1px solid var(--fd-border-strong);
-    border-radius: var(--fd-radius-md);
-    font-size: var(--fd-text-sm);
-    color: var(--fd-foreground);
-    background-color: var(--fd-background);
-    transition:
-      border-color var(--fd-transition-normal),
-      box-shadow var(--fd-transition-normal);
-    width: 100%;
-    height: 2.5rem;
-    box-sizing: border-box;
-  }
-
-  .flowdrop-input:focus {
-    border-color: var(--fd-ring);
-  }
-
-  .flowdrop-input::placeholder {
-    color: var(--fd-muted-foreground);
-  }
-
-  .flowdrop-btn {
-    padding: 0.625rem 0.75rem;
-    border-radius: var(--fd-radius-md);
-    font-size: var(--fd-text-sm);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all var(--fd-transition-normal);
-    border: 1px solid var(--fd-border-strong);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    background-color: var(--fd-muted);
-    color: var(--fd-foreground);
-    height: 2.5rem;
-    min-width: 2.5rem;
-    box-sizing: border-box;
-  }
-
-  .flowdrop-btn:hover {
-    background-color: var(--fd-subtle);
-    border-color: var(--fd-border-strong);
-  }
-
-  .flowdrop-btn:active {
-    background-color: var(--fd-border);
-    border-color: var(--fd-muted-foreground);
-  }
-
-  .flowdrop-btn:disabled {
-    background-color: var(--fd-muted-foreground);
-    border-color: var(--fd-muted-foreground);
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-
-  /* Join component styles - Seamless integration */
-  .flowdrop-join {
-    display: flex;
-    width: 100%;
-    border-radius: var(--fd-radius-md);
-    overflow: hidden;
-    border: 1px solid var(--fd-border-strong);
-    background-color: var(--fd-background);
-  }
-
-  .flowdrop-join__item {
-    border: none;
-    border-radius: 0;
-    background-color: transparent;
-  }
-
-  .flowdrop-join__item:first-child {
-    border-right: 1px solid var(--fd-border-strong);
-    flex: 1;
-  }
-
-  .flowdrop-join__item:last-child {
-    border-left: none;
-    background-color: var(--fd-muted);
-    color: var(--fd-foreground);
-  }
-
-  .flowdrop-join__item:last-child:hover {
-    background-color: var(--fd-subtle);
-  }
-
-  .flowdrop-join:focus-within {
-    border-color: var(--fd-ring);
-  }
+  /* Search field renders through the shared Input primitive (base.css). */
 
   /* Utility classes */
-  .flowdrop-w--full {
-    width: 100%;
-  }
-
   .flowdrop-flex--1 {
     flex: 1;
   }

package/dist/components/NodeSwapPicker.svelte

@@ -8,6 +8,7 @@
 <script lang="ts">
   import type { NodeMetadata, NodeCategory, WorkflowFormat, WorkflowNode } from '../types/index.js';
   import Icon from '@iconify/svelte';
+  import Input from './Input.svelte';
   import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
   import { getCategoryColorToken } from '../utils/colors.js';
   import { m } from '../messages/index.js';
@@ -115,12 +116,17 @@
 
   <!-- Search (hidden in minimal via --fd-sidebar-search-display) -->
   <div class="swap-picker__search">
-    <input
+    <Input
       type="text"
       placeholder="Search node types..."
-      class="swap-picker__input"
-      bind:value={searchInput}
-    />
+      aria-label="Search node types"
+      value={searchInput}
+      oninput={(e) => (searchInput = e.currentTarget.value)}
+    >
+      {#snippet leading()}
+        <Icon icon="mdi:magnify" />
+      {/snippet}
+    </Input>
   </div>
 
   <!-- Node list -->
@@ -298,28 +304,6 @@
     flex-shrink: 0;
   }
 
-  .swap-picker__input {
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-    border: 1px solid var(--fd-border-strong);
-    border-radius: var(--fd-radius-md);
-    font-size: var(--fd-text-sm);
-    color: var(--fd-foreground);
-    background-color: var(--fd-background);
-    box-sizing: border-box;
-    transition:
-      border-color var(--fd-transition-normal),
-      box-shadow var(--fd-transition-normal);
-  }
-
-  .swap-picker__input:focus {
-    border-color: var(--fd-ring);
-  }
-
-  .swap-picker__input::placeholder {
-    color: var(--fd-muted-foreground);
-  }
-
   .swap-picker__list {
     flex: 1;
     overflow-y: auto;

package/dist/components/Select.svelte

@@ -0,0 +1,53 @@
+<!--
+  Select — typed wrapper over the shared `.flowdrop-input` system (base.css).
+
+  Renders the field shell (`.flowdrop-input .flowdrop-input--select`) plus a
+  built-in chevron overlay (`.flowdrop-select-wrap`), so selects match the exact
+  look of Input/Textarea. The native arrow is removed; the chevron tints to
+  --fd-primary on focus. Pass <option>/<optgroup> as children. Native attributes
+  (value, disabled, id, aria-*, onchange…) forward to the underlying <select>.
+
+  Internal for now; see Button.svelte / Input.svelte for the pattern.
+-->
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLSelectAttributes } from 'svelte/elements';
+
+  // Omit native numeric `size` so our design-token size (matching Button) wins.
+  interface Props extends Omit<HTMLSelectAttributes, 'size'> {
+    /** Size — `md` is the base; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Renders the error-border state */
+    invalid?: boolean;
+    /** Extra classes appended to the <select> */
+    class?: string;
+    /** The <option>/<optgroup> elements */
+    children: Snippet;
+  }
+
+  let { size = 'md', invalid = false, class: className = '', children, ...rest }: Props = $props();
+
+  const selectClass = $derived(
+    [
+      'flowdrop-input',
+      'flowdrop-input--select',
+      size === 'md' ? '' : `flowdrop-input--${size}`,
+      invalid ? 'flowdrop-input--invalid' : '',
+      className
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<div class="flowdrop-select-wrap">
+  <select class={selectClass} {...rest}>
+    {@render children()}
+  </select>
+  <span class="flowdrop-select-wrap__icon" aria-hidden="true">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
+    </svg>
+  </span>
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLSelectAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLSelectAttributes, 'size'> {
+    /** Size — `md` is the base; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Renders the error-border state */
+    invalid?: boolean;
+    /** Extra classes appended to the <select> */
+    class?: string;
+    /** The <option>/<optgroup> elements */
+    children: Snippet;
+}
+declare const Select: import("svelte").Component<Props, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/Textarea.svelte

@@ -0,0 +1,39 @@
+<!--
+  Textarea — typed wrapper over the shared `.flowdrop-input` system (base.css),
+  with the `.flowdrop-input--textarea` modifier (min-height + vertical resize).
+
+  Shares the exact field look of Input/Select so multiline fields render
+  identically. All styling lives in base.css. Native attributes (value,
+  placeholder, rows, disabled, id, aria-*, oninput…) forward to <textarea>.
+
+  Internal for now; see Button.svelte / Input.svelte for the pattern.
+-->
+
+<script lang="ts">
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLTextareaAttributes {
+    /** Size — `md` is the base; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Renders the error-border state */
+    invalid?: boolean;
+    /** Extra classes appended to the textarea */
+    class?: string;
+  }
+
+  let { size = 'md', invalid = false, class: className = '', ...rest }: Props = $props();
+
+  const textareaClass = $derived(
+    [
+      'flowdrop-input',
+      'flowdrop-input--textarea',
+      size === 'md' ? '' : `flowdrop-input--${size}`,
+      invalid ? 'flowdrop-input--invalid' : '',
+      className
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<textarea class={textareaClass} {...rest}></textarea>

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

@@ -0,0 +1,12 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+interface Props extends HTMLTextareaAttributes {
+    /** Size — `md` is the base; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Renders the error-border state */
+    invalid?: boolean;
+    /** Extra classes appended to the textarea */
+    class?: string;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;