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

package/CHANGELOG.md

@@ -7,6 +7,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.0.0-beta.4] - 2026-06-13
+
+Fourth 2.0 beta, published under the npm `beta` dist-tag (`npm install @flowdrop/flowdrop@beta`). `latest` remains 1.15.0 until 2.0.0 GA. This release is mostly an internal design-system consolidation pass — new shared `Button` / `IconButton` / `Input` / `Select` / `Textarea` primitives route every control through the `base.css` class system as the single source of truth, so themes (including Drafter) style fields and buttons consistently. User-visible changes are a navbar `end` snippet for embedding custom trailing controls, a new `--fd-control-radius` theming token, a range-slider fill fix, and opaque Drafter buttons. The archived Astro docs site is retired in favor of the Mintlify docs at `flowdrop.mintlify.app`.
+
+### Added
+
+- **`end` snippet on the navbar.** A new `end` snippet prop renders custom trailing content in the navbar (before the settings gear), letting consuming apps inject their own controls — e.g. a theme toggle — without forking the navbar.
+- **`--fd-control-radius` theming token.** Form controls (inputs, selects, textareas, the array action buttons, fieldset/checkbox-group/config-form borders) now read their corner radius from `--fd-control-radius`, so themes can tighten field corners independently of cards and panels. Drafter sets it to `2px` for its crisp blueprint look; other themes inherit the existing radius.
+
+### Fixed
+
+- **Range slider fill now tracks the thumb center.** The colored fill measured 0–100% of the raw track width while the browser keeps the thumb inside the track, so the fill and thumb drifted apart — worst at the extremes and visible on load. The fill now mirrors the thumb's actual travel (`thumb/2` to `100% − thumb/2`) via a new `--fd-range-fill` calc, with the thumb size tokenized.
+- **Drafter buttons are opaque and flat.** Several buttons in the Drafter skin (file-upload node config, canvas toggles) rendered with translucent backgrounds and read as see-through; they are now flat and opaque.
+
+### Changed (internal — no API change)
+
+- **Shared form-control and button primitives.** New typed `Button`, `IconButton`, `Input`, `Select`, and `Textarea` wrappers sit over the existing `.flowdrop-btn*` / `.flowdrop-input*` / `.flowdrop-btn--icon*` classes in `base.css`, making it the single source for control look (`:disabled` is the only muted state). `ThemeToggle`, the config form, sidebar search, the node swap picker, `FormArray` move/delete buttons, `InputCollector`, and the playground inputs were migrated onto them, dropping their hand-rolled, duplicated CSS. The primitives are internal (not exported), so their APIs aren't frozen before GA; public component prop APIs (e.g. `ThemeToggle`) are unchanged.
+- **`EditorStatusBar` extracted onto the shared button system.** The endpoint-error banner — previously inline in `App.svelte` with its own button CSS and a centered `80rem` layout — is now an `EditorStatusBar` component that routes actions through the `Button` primitive, spans the editor chrome flush, and uses a proper `CloseIcon` for dismissal. Added Storybook stories for `Button` and `EditorStatusBar`.
+- **Navbar control heights from one token.** Three hardcoded `height: 2.5rem` rules now use `var(--fd-size-btn-min)`, sharing a single source of truth with `.flowdrop-btn`.
+- **Extracted shared logic flagged by the duplication review.** `connections.ts` gains a shared `detectCycles()` (used by both `hasCycles` / `hasInvalidCycles`); `svelte-app.ts` extracts a `configureInstance()` shared by `mountFlowDropApp` / `mountWorkflowEditor`; and `FormField` / `FormFieldLight` share a `resolveBaseFieldType()` for the basic-type switch (with a unit test pinning resolution order) while keeping the deliberate full/light rendering split for the bundle-guard contract. No behavioral change.
+
+### Docs
+
+- **Retired the archived Astro/Starlight docs site (`apps/docs`)** and its docker-publish workflow; the Mintlify site at `flowdrop.mintlify.app` is canonical. All live documentation links (README, AGENTS, quick-start, i18n guide, API README, dev playground navbar, docker-playground landing, interrupt-feature doc) were repointed there. `apps/api-docs` is kept only to back the `api:lint` / `api:bundle` tooling and CI. Corrected the local dev-server port reference to the recommended Express demo.
+
 ## [2.0.0-beta.3] - 2026-06-12
 
 Third 2.0 beta, published under the npm `beta` dist-tag (`npm install @flowdrop/flowdrop@beta`). `latest` remains 1.15.0 until 2.0.0 GA. This release finishes the navbar/theme defaults pass started in beta.2 (navbar opt-in everywhere, light as the default theme, the FlowDrop wordmark in the header), adds the **Drafter** blueprint theme with per-theme canvas grids, and lands a keyboard-navigation and focus-ring overhaul alongside the 20px node-grid alignment.

package/README.md

@@ -23,10 +23,10 @@
 </p>
 
 <p align="center">
-  <a href="https://docs.flowdrop.io/getting-started/installation">Quickstart</a> •
+  <a href="https://flowdrop.mintlify.app/docs/quickstart">Quickstart</a> •
   <a href="#features">Features</a> •
   <a href="#integration">Integration</a> •
-  <a href="https://docs.flowdrop.io">Docs</a>
+  <a href="https://flowdrop.mintlify.app">Docs</a>
 </p>
 
 <p align="center">
@@ -139,7 +139,7 @@ Every user-facing string flows through a typed `Messages` tree. Pass a callback
 <App messages={() => ({ form: { schema: { save: 'Apply' } } })} />
 ```
 
-Wire the callback to your i18n library (paraglide-js, sveltekit-i18n, etc.) — locale changes propagate automatically. See the [i18n & Custom Messages guide](https://docs.flowdrop.io/guides/i18n) for the full shape and a paraglide-js worked example.
+Wire the callback to your i18n library (paraglide-js, sveltekit-i18n, etc.) — locale changes propagate automatically. See the [i18n & Custom Messages guide](https://flowdrop.mintlify.app/guides/i18n) for the full shape and a paraglide-js worked example.
 
 ## Sub-Module Exports
 
@@ -283,8 +283,8 @@ Runtime configuration means you build once and deploy to staging, production, or
 
 | Resource                                                                                     | Description              |
 | -------------------------------------------------------------------------------------------- | ------------------------ |
-| [QUICK_START.md](https://docs.flowdrop.io/getting-started/installation/)                     | Get running in 5 minutes |
-| [API Documentation](https://api.flowdrop.io/v1/)                                             | REST API specification   |
+| [QUICK_START.md](https://flowdrop.mintlify.app/docs/quickstart)                              | Get running in 5 minutes |
+| [API Documentation](https://flowdrop.mintlify.app/api-reference/introduction)                | REST API specification   |
 | [CHANGELOG.md](https://github.com/flowdrop-io/flowdrop/blob/main/libs/flowdrop/CHANGELOG.md) | Version history          |
 
 ## Development

package/dist/components/App.svelte

@@ -10,6 +10,7 @@
   import WorkflowEditor from './WorkflowEditor.svelte';
   import NodeSidebar from './NodeSidebar.svelte';
   import CanvasIconButton from './CanvasIconButton.svelte';
+  import EditorStatusBar from './EditorStatusBar.svelte';
   import MenuIcon from './icons/MenuIcon.svelte';
   import MenuOpenIcon from './icons/MenuOpenIcon.svelte';
   import ConfigForm from './ConfigForm.svelte';
@@ -1212,53 +1213,21 @@
     {/snippet}
 
     <!-- Main Content: Workflow Editor with Error Status -->
-    <!-- Status Display: aria-live announces API errors dynamically without requiring focus -->
     {#if error}
-      <div class="flowdrop-status flowdrop-status--error" aria-live="polite" aria-atomic="true">
-        <div class="flowdrop-status__content">
-          <div class="flowdrop-flex flowdrop-gap--3">
-            <div class="flowdrop-status__indicator flowdrop-status__indicator--error"></div>
-            <span class="flowdrop-text--sm flowdrop-font--medium">Error: {error}</span>
-          </div>
-          <div class="flowdrop-flex flowdrop-gap--2">
-            <button
-              class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--primary"
-              onclick={retryLoad}
-              type="button"
-            >
-              Retry
-            </button>
-            <button
-              class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--outline"
-              onclick={() => {
-                const defaultUrl = '/api/flowdrop';
-                const newUrl = prompt('Enter Backend API URL:', defaultUrl);
-                if (newUrl) {
-                  configureApi(createEndpointConfig(newUrl));
-                  fetchNodeTypes();
-                }
-              }}
-              type="button"
-            >
-              Set API URL
-            </button>
-            <button
-              class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--outline"
-              onclick={testApiConnection}
-              type="button"
-            >
-              Test API
-            </button>
-            <button
-              class="flowdrop-btn flowdrop-btn--ghost flowdrop-btn--sm"
-              onclick={() => (error = null)}
-              type="button"
-            >
-              ✕
-            </button>
-          </div>
-        </div>
-      </div>
+      <EditorStatusBar
+        {error}
+        onRetry={retryLoad}
+        onSetApiUrl={() => {
+          const defaultUrl = '/api/flowdrop';
+          const newUrl = prompt('Enter Backend API URL:', defaultUrl);
+          if (newUrl) {
+            configureApi(createEndpointConfig(newUrl));
+            fetchNodeTypes();
+          }
+        }}
+        onTestApi={testApiConnection}
+        onDismiss={() => (error = null)}
+      />
     {/if}
 
     <!-- Main Editor Area -->
@@ -1314,106 +1283,6 @@
   .flowdrop-root {
     display: contents;
   }
-  /* Status bar styles */
-  .flowdrop-status {
-    background-color: var(--fd-info-muted);
-    border-bottom: 1px solid var(--fd-info);
-    padding: 1rem;
-  }
-
-  .flowdrop-status--error {
-    background-color: var(--fd-error-muted);
-    border-bottom: 1px solid var(--fd-error);
-  }
-
-  .flowdrop-status__content {
-    max-width: 80rem;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .flowdrop-status__indicator {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 50%;
-  }
-
-  .flowdrop-status__indicator--error {
-    background-color: var(--fd-error);
-  }
-
-  /* Button styles */
-  .flowdrop-btn {
-    padding: 0.375rem 0.75rem;
-    border-radius: var(--fd-radius-md);
-    font-size: 0.75rem;
-    font-weight: 500;
-    cursor: pointer;
-    border: 1px solid transparent;
-    transition: all var(--fd-transition-fast);
-  }
-
-  .flowdrop-btn--sm {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.625rem;
-  }
-
-  .flowdrop-btn--outline {
-    background-color: transparent;
-    border-color: var(--fd-border);
-    color: var(--fd-foreground);
-  }
-
-  .flowdrop-btn--outline:hover {
-    background-color: var(--fd-muted);
-    border-color: var(--fd-border-strong);
-  }
-
-  .flowdrop-btn--primary {
-    background-color: var(--fd-primary);
-    border-color: var(--fd-primary);
-    color: var(--fd-primary-foreground);
-  }
-
-  .flowdrop-btn--primary:hover {
-    background-color: var(--fd-primary-hover);
-    border-color: var(--fd-primary-hover);
-  }
-
-  .flowdrop-btn--ghost {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--fd-muted-foreground);
-  }
-
-  .flowdrop-btn--ghost:hover {
-    background-color: var(--fd-muted);
-    color: var(--fd-foreground);
-  }
-
-  /* Utility classes */
-  .flowdrop-flex {
-    display: flex;
-  }
-
-  .flowdrop-gap--2 {
-    gap: 0.5rem;
-  }
-
-  .flowdrop-gap--3 {
-    gap: 0.75rem;
-  }
-
-  .flowdrop-text--sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
-  .flowdrop-font--medium {
-    font-weight: 500;
-  }
 
   /* Floating sidebar toggle button — placement only; visuals live in CanvasIconButton */
   :global(.flowdrop-sidebar-fab) {

package/dist/components/Button.stories.svelte

@@ -0,0 +1,65 @@
+<script module lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from './Button.svelte';
+  import { fn } from 'storybook/test';
+
+  const { Story } = defineMeta({
+    title: 'Display/Button',
+    component: Button,
+    tags: ['autodocs'],
+    parameters: {
+      layout: 'centered'
+    },
+    argTypes: {
+      variant: {
+        control: { type: 'select' },
+        options: ['primary', 'secondary', 'outline', 'ghost']
+      },
+      size: {
+        control: { type: 'select' },
+        options: ['sm', 'md', 'lg']
+      },
+      disabled: { control: 'boolean' }
+    },
+    args: {
+      variant: 'secondary',
+      size: 'md',
+      disabled: false,
+      onclick: fn()
+    }
+  });
+</script>
+
+<!-- Arg-driven template so the Controls panel can tweak variant/size/disabled live. -->
+{#snippet template(args: Omit<ComponentProps<typeof Button>, 'children'>)}
+  <Button {...args}>Button</Button>
+{/snippet}
+
+<Story name="Primary" args={{ variant: 'primary' }} {template} />
+
+<Story name="Secondary" args={{ variant: 'secondary' }} {template} />
+
+<Story name="Outline" args={{ variant: 'outline' }} {template} />
+
+<Story name="Ghost" args={{ variant: 'ghost' }} {template} />
+
+<Story name="Disabled" args={{ variant: 'primary', disabled: true }} {template} />
+
+<!-- Static showcases comparing every variant / size side by side. -->
+<Story name="Variants" asChild>
+  <div style="display: flex; gap: 0.75rem; align-items: center;">
+    <Button variant="primary">Primary</Button>
+    <Button variant="secondary">Secondary</Button>
+    <Button variant="outline">Outline</Button>
+    <Button variant="ghost">Ghost</Button>
+  </div>
+</Story>
+
+<Story name="Sizes" asChild>
+  <div style="display: flex; gap: 0.75rem; align-items: center;">
+    <Button variant="primary" size="sm">Small</Button>
+    <Button variant="primary" size="md">Medium</Button>
+    <Button variant="primary" size="lg">Large</Button>
+  </div>
+</Story>

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

@@ -0,0 +1,19 @@
+import Button from './Button.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;
+}
+declare const Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Button = InstanceType<typeof Button>;
+export default Button;

package/dist/components/Button.svelte

@@ -0,0 +1,62 @@
+<!--
+  Button — typed wrapper over the shared `.flowdrop-btn` system (base.css).
+
+  All button styling (variants, sizes, the --fd-size-btn-min height token and the
+  centralized focus ring) lives in base.css. This component is the ergonomic,
+  type-safe entry point so callers pick `variant`/`size` instead of hand-writing
+  class strings — the single place new buttons should route through.
+
+  Internal for now (not exported from any public entry) so the API isn't frozen
+  before GA. Existing hand-rolled buttons migrate onto it incrementally.
+-->
+
+<script lang="ts">
+  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;
+  }
+
+  let {
+    variant = 'secondary',
+    size = 'md',
+    type = 'button',
+    title,
+    ariaLabel,
+    disabled = false,
+    class: className = '',
+    onclick,
+    children
+  }: Props = $props();
+
+  // 'md' is the unmodified base class; only 'sm'/'lg' need a size modifier.
+  const sizeClass = $derived(size === 'md' ? '' : `flowdrop-btn--${size}`);
+</script>
+
+<button
+  class="flowdrop-btn flowdrop-btn--{variant} {sizeClass} {className}"
+  {type}
+  {title}
+  {disabled}
+  aria-label={ariaLabel}
+  {onclick}
+>
+  {@render children()}
+</button>

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;