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

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Visual style — maps to `.flowdrop-btn--{variant}` in base.css */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    /** Size — `md` is the base `.flowdrop-btn`; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Native button type */
+    type?: 'button' | 'submit' | 'reset';
+    /** Tooltip text */
+    title?: string;
+    /** Accessible label (use when the button is icon-only) */
+    ariaLabel?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Extra classes appended to the root button */
+    class?: string;
+    /** Click handler */
+    onclick?: (event: MouseEvent) => void;
+    /** Button contents (icon, label, or both) */
+    children: Snippet;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/ConfigForm.svelte

@@ -1044,7 +1044,7 @@
     justify-content: center;
     gap: var(--fd-space-xs);
     padding: 0.625rem var(--fd-space-xl);
-    border-radius: var(--fd-radius-lg);
+    border-radius: var(--fd-control-radius);
     font-size: var(--fd-text-sm);
     font-weight: 600;
     font-family: inherit;
@@ -1100,7 +1100,7 @@
   .config-form__extensions {
     background-color: var(--fd-muted);
     border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-lg);
+    border-radius: var(--fd-control-radius);
     overflow: hidden;
     margin-top: var(--fd-space-xs);
   }
@@ -1271,7 +1271,7 @@
   .config-form__debug {
     background-color: var(--fd-warning-muted);
     border: 1px solid var(--fd-warning);
-    border-radius: var(--fd-radius-lg);
+    border-radius: var(--fd-control-radius);
     overflow: hidden;
   }
 
@@ -1425,7 +1425,7 @@
   .config-form__error {
     background-color: var(--fd-error-muted);
     border: 1px solid var(--fd-error);
-    border-radius: var(--fd-radius-lg);
+    border-radius: var(--fd-control-radius);
     overflow: hidden;
   }
 

package/dist/components/EditorStatusBar.stories.svelte

@@ -0,0 +1,44 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import EditorStatusBar from './EditorStatusBar.svelte';
+  import { fn } from 'storybook/test';
+
+  const { Story } = defineMeta({
+    title: 'Editor/EditorStatusBar',
+    component: EditorStatusBar,
+    tags: ['autodocs'],
+    parameters: {
+      // The banner is full-width editor chrome — show it edge to edge.
+      layout: 'fullscreen'
+    },
+    args: {
+      onRetry: fn(),
+      onSetApiUrl: fn(),
+      onTestApi: fn(),
+      onDismiss: fn()
+    }
+  });
+</script>
+
+<Story
+  name="Default"
+  args={{
+    error: 'API Error: Failed to fetch. No node types available.'
+  }}
+/>
+
+<!-- The real message when the endpoint serves HTML (e.g. a 404 page) instead of JSON. -->
+<Story
+  name="Long Message"
+  args={{
+    error:
+      'API Error: Unexpected token \'<\', "<!doctype "... is not valid JSON. No node types available.'
+  }}
+/>
+
+<Story
+  name="Endpoint Unreachable"
+  args={{
+    error: 'API Error: NetworkError when attempting to fetch resource. No node types available.'
+  }}
+/>

package/dist/components/EditorStatusBar.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default EditorStatusBar;
+type EditorStatusBar = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const EditorStatusBar: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import EditorStatusBar from './EditorStatusBar.svelte';
+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/EditorStatusBar.svelte

@@ -0,0 +1,99 @@
+<!--
+  EditorStatusBar — the dismissible error banner shown above the editor canvas
+  when node types fail to load (endpoint missing or unreachable).
+
+  Extracted from App.svelte so it can be storied/tested in isolation. The action
+  buttons route through the shared Button primitive; all colours come from design
+  tokens, so the banner stays in sync with the rest of the editor chrome.
+-->
+<script lang="ts">
+  import Button from './Button.svelte';
+  import CloseIcon from './icons/CloseIcon.svelte';
+
+  interface Props {
+    /** The error message to display (rendered after an "Error:" prefix). */
+    error: string;
+    /** Retry loading node types. */
+    onRetry: () => void;
+    /** Prompt for / set a new backend API URL. */
+    onSetApiUrl: () => void;
+    /** Run a connectivity test against the configured endpoint. */
+    onTestApi: () => void;
+    /** Dismiss the banner. */
+    onDismiss: () => void;
+  }
+
+  let { error, onRetry, onSetApiUrl, onTestApi, onDismiss }: Props = $props();
+</script>
+
+<!-- aria-live announces the API error dynamically without requiring focus -->
+<div class="flowdrop-status flowdrop-status--error" aria-live="polite" aria-atomic="true">
+  <div class="flowdrop-status__content">
+    <div class="flowdrop-status__message">
+      <div class="flowdrop-status__indicator"></div>
+      <span class="flowdrop-status__text">Error: {error}</span>
+    </div>
+    <div class="flowdrop-status__actions">
+      <Button variant="primary" size="sm" onclick={onRetry}>Retry</Button>
+      <Button variant="outline" size="sm" onclick={onSetApiUrl}>Set API URL</Button>
+      <Button variant="outline" size="sm" onclick={onTestApi}>Test API</Button>
+      <Button variant="ghost" size="sm" ariaLabel="Dismiss error" onclick={onDismiss}>
+        <span class="flowdrop-status__dismiss-icon"><CloseIcon /></span>
+      </Button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .flowdrop-status {
+    padding: var(--fd-space-xl);
+  }
+
+  .flowdrop-status--error {
+    background-color: var(--fd-error-muted);
+    border-bottom: 1px solid var(--fd-error);
+  }
+
+  .flowdrop-status__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--fd-space-md);
+  }
+
+  .flowdrop-status__message {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-md);
+    min-width: 0;
+  }
+
+  .flowdrop-status__indicator {
+    flex-shrink: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background-color: var(--fd-error);
+  }
+
+  .flowdrop-status__text {
+    font-size: var(--fd-text-sm);
+    line-height: 1.25rem;
+    font-weight: 500;
+  }
+
+  .flowdrop-status__actions {
+    display: flex;
+    gap: var(--fd-space-xs);
+    flex-shrink: 0;
+  }
+
+  .flowdrop-status__dismiss-icon {
+    display: inline-flex;
+  }
+
+  .flowdrop-status__dismiss-icon :global(svg) {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+interface Props {
+    /** The error message to display (rendered after an "Error:" prefix). */
+    error: string;
+    /** Retry loading node types. */
+    onRetry: () => void;
+    /** Prompt for / set a new backend API URL. */
+    onSetApiUrl: () => void;
+    /** Run a connectivity test against the configured endpoint. */
+    onTestApi: () => void;
+    /** Dismiss the banner. */
+    onDismiss: () => void;
+}
+declare const EditorStatusBar: import("svelte").Component<Props, {}, "">;
+type EditorStatusBar = ReturnType<typeof EditorStatusBar>;
+export default EditorStatusBar;

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>;