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

package/dist/components/CanvasIconButton.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /**
+     * The icon to render — an inline-SVG snippet (offline-safe). Pass a local
+     * icon component from `$lib/components/icons/`, not a network-fetched one.
+     */
+    icon: Snippet;
+    /** Accessible label — drives both aria-label and the hover title. */
+    label: string;
+    /** Renders the active/toggled-on visual state (e.g. the panel it controls is open). */
+    active?: boolean;
+    onclick: () => void;
+    /** Caller-supplied class for positioning (top/left/bottom/z-index). */
+    class?: string;
+  }
+
+  let { icon, label, active = false, onclick, class: klass = '' }: Props = $props();
+</script>
+
+<button
+  class="flowdrop-canvas-btn {klass}"
+  class:flowdrop-canvas-btn--active={active}
+  {onclick}
+  aria-label={label}
+  title={label}
+  type="button"
+>
+  {@render icon()}
+</button>
+
+<style>
+  .flowdrop-canvas-btn {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-md);
+    background-color: var(--fd-background);
+    color: var(--fd-muted-foreground);
+    cursor: pointer;
+    box-shadow: var(--fd-shadow-md);
+    transition:
+      color var(--fd-transition-fast),
+      background-color var(--fd-transition-fast),
+      box-shadow var(--fd-transition-fast),
+      border-color var(--fd-transition-fast);
+  }
+
+  /* Size whatever inline SVG the caller renders. */
+  .flowdrop-canvas-btn :global(svg) {
+    width: 18px;
+    height: 18px;
+  }
+
+  .flowdrop-canvas-btn:hover {
+    color: var(--fd-foreground);
+    background-color: var(--fd-subtle);
+    box-shadow: var(--fd-shadow-lg);
+  }
+
+  .flowdrop-canvas-btn--active {
+    color: var(--fd-primary);
+    background-color: var(--fd-primary-muted);
+    border-color: var(--fd-primary);
+  }
+
+  .flowdrop-canvas-btn--active:hover {
+    color: var(--fd-primary);
+    background-color: var(--fd-primary-muted);
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /**
+     * The icon to render — an inline-SVG snippet (offline-safe). Pass a local
+     * icon component from `$lib/components/icons/`, not a network-fetched one.
+     */
+    icon: Snippet;
+    /** Accessible label — drives both aria-label and the hover title. */
+    label: string;
+    /** Renders the active/toggled-on visual state (e.g. the panel it controls is open). */
+    active?: boolean;
+    onclick: () => void;
+    /** Caller-supplied class for positioning (top/left/bottom/z-index). */
+    class?: string;
+}
+declare const CanvasIconButton: import("svelte").Component<Props, {}, "">;
+type CanvasIconButton = ReturnType<typeof CanvasIconButton>;
+export default CanvasIconButton;

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;
@@ -1073,11 +1073,6 @@
     color: var(--fd-foreground);
   }
 
-  .config-form__button--secondary:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-  }
-
   .config-form__button--primary {
     background: linear-gradient(135deg, var(--fd-primary) 0%, var(--fd-primary-hover) 100%);
     color: var(--fd-primary-foreground);
@@ -1098,13 +1093,6 @@
     transform: translateY(0);
   }
 
-  .config-form__button--primary:focus-visible {
-    outline: none;
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.4),
-      0 4px 12px rgba(59, 130, 246, 0.35);
-  }
-
   /* ============================================
 	   UI EXTENSIONS SECTION
 	   ============================================ */
@@ -1112,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);
   }
@@ -1283,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;
   }
 
@@ -1437,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;
   }
 
@@ -1559,11 +1547,4 @@
   .config-form__button--external:active {
     transform: translateY(0);
   }
-
-  .config-form__button--external:focus-visible {
-    outline: none;
-    box-shadow:
-      0 0 0 3px rgba(99, 102, 241, 0.4),
-      0 4px 12px rgba(99, 102, 241, 0.35);
-  }
 </style>

package/dist/components/ConfigPanel.svelte

@@ -110,7 +110,8 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    background-color: var(--fd-background);
+    background-color: var(--fd-panel-bg);
+    backdrop-filter: var(--fd-panel-backdrop-filter);
   }
 
   .config-panel__header {
@@ -119,7 +120,7 @@
     align-items: center;
     padding: 0.875rem 1rem;
     border-bottom: 1px solid var(--fd-border);
-    background-color: var(--fd-muted);
+    background-color: var(--fd-card);
     flex-shrink: 0;
   }
 
@@ -180,7 +181,7 @@
   .config-panel__details {
     padding: 0.75rem 1rem;
     border-bottom: 1px solid var(--fd-border-muted);
-    background-color: var(--fd-muted);
+    background-color: var(--fd-card);
     flex-shrink: 0;
   }
 

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;