@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

package/dist/components/form/FormAutocomplete.svelte

@@ -121,7 +121,8 @@
   // Stable fingerprint — any change triggers selection clearing.
   // JSON.stringify gives a canonical string without null-byte ambiguity.
   const depFingerprint = $derived(JSON.stringify(depParamValues));
-  // svelte-ignore state_referenced_locally — intentional initial snapshot; the effect below tracks subsequent changes
+  // intentional initial snapshot; the effect below tracks subsequent changes
+  // svelte-ignore state_referenced_locally
   let prevDepFingerprint = depFingerprint;
 
   $effect(() => {
@@ -135,9 +136,9 @@
   });
 
   // Generate unique IDs for accessibility
-  // svelte-ignore state_referenced_locally — id prop never changes
-  const listboxId = `${id}-listbox`;
+  // id prop never changes
   // svelte-ignore state_referenced_locally
+  const listboxId = `${id}-listbox`;
   const getOptionId = (index: number): string => `${id}-option-${index}`;
 
   /**
@@ -309,10 +310,9 @@
     // Open dropdown
     showDropdown();
 
-    // If allowFreeText and single mode, update the value immediately
-    if (allowFreeText && !multiple) {
-      onChange(inputValue);
-    }
+    // Free-text single mode commits on intent signals (Enter, blur, option select),
+    // NOT per keystroke — see issue #32. Treating the search-box text as the field's
+    // committed value pollutes the parent form's edits buffer and history.
 
     // Fetch suggestions with debounce
     debouncedFetch(inputValue);
@@ -353,6 +353,19 @@
           inputValue = '';
         }
       }
+
+      // Free-text single mode — commit on blur if the user typed something
+      // that differs from the current value. An empty inputValue is just the
+      // resting state of the search box (the value lives in the chip), so it
+      // is NOT an intent signal; clearing happens via the X button or
+      // Backspace-on-empty. Replaces the per-keystroke commit dropped from
+      // handleInput; see issue #32.
+      if (allowFreeText && !multiple && inputValue !== '') {
+        const currentSingle = selectedValues[0] ?? '';
+        if (inputValue !== currentSingle) {
+          onChange(inputValue);
+        }
+      }
     }, 200);
   }
 
@@ -592,12 +605,14 @@
     const current = depFingerprint;
     if (current === prevDepFingerprint) return;
     prevDepFingerprint = current;
-    // A dependency field changed — abort any in-flight fetch, clear state
+    // A dependency field changed — abort any in-flight fetch and invalidate
+    // cached suggestions/labels (they were keyed by the previous dependency
+    // values). Do NOT clear this field's value here: that policy lives in the
+    // parent form's handleFieldChange so it only fires on user-driven changes,
+    // not on undo/redo, programmatic resets, or collaborative edits (#33).
     abortController?.abort();
     suggestions = [];
     labelCache = new Map();
-    if (multiple) onChange([]);
-    else onChange('');
   });
 
   /**
@@ -625,7 +640,7 @@
   class:form-autocomplete--has-value={selectedValues.length > 0}
 >
   <!-- Main input container styled like a textfield/textarea -->
-  <!-- svelte-ignore a11y_no_static_element_interactions — role="presentation"; keyboard interaction is handled by the <input> inside -->
+  <!-- role="presentation"; keyboard interaction is handled by the <input> inside -->
   <div
     class="form-autocomplete__field"
     class:form-autocomplete__field--focused={isOpen}
@@ -712,7 +727,7 @@
   </div>
 
   <!-- Dropdown popover (uses Popover API to render in top layer, bypassing stacking contexts) -->
-  <!-- svelte-ignore a11y_no_static_element_interactions — role="presentation" container; onmousedown prevents focus loss from input -->
+  <!-- role="presentation" container; onmousedown prevents focus loss from input -->
   <div
     bind:this={popoverElement}
     id={listboxId}
@@ -743,7 +758,8 @@
         </li>
       {:else}
         {#each suggestions as option, index (option.value)}
-          <!-- svelte-ignore a11y_click_events_have_key_events — WAI-ARIA combobox: keyboard nav handled on input, not individual options -->
+          <!-- WAI-ARIA combobox: keyboard nav handled on input, not individual options -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
           <li
             id={getOptionId(index)}
             class="form-autocomplete__option"

package/dist/components/form/FormField.svelte

@@ -45,7 +45,9 @@
   import { getSchemaOptions } from './types.js';
   import type { WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
   import { getResolvedTheme } from '../../stores/settingsStore.svelte.js';
-  import { fieldComponentRegistry } from '../../form/fieldRegistry.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
+
+  const fd = getInstance();
 
   interface Props {
     /** Unique key/id for the field */
@@ -226,7 +228,7 @@
   });
 
   const registeredAutocompleteComponent = $derived(
-    fieldType === 'autocomplete' ? fieldComponentRegistry.resolveFieldComponent(schema) : null
+    fieldType === 'autocomplete' ? fd.fields.resolveFieldComponent(schema) : null
   );
 
   /**

package/dist/components/form/FormFieldLight.svelte

@@ -42,8 +42,10 @@
   import FormSelect from './FormSelect.svelte';
   import FormCheckboxGroup from './FormCheckboxGroup.svelte';
   import FormArray from './FormArray.svelte';
-  import { fieldComponentRegistry } from '../../form/fieldRegistry.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { getResolvedTheme } from '../../stores/settingsStore.svelte.js';
+
+  const fd = getInstance();
   import type { FieldSchema } from './types.js';
   import { getSchemaOptions } from './types.js';
 
@@ -84,7 +86,7 @@
   /**
    * Check if there's a registered custom component for this schema
    */
-  const registeredComponent = $derived(fieldComponentRegistry.resolveFieldComponent(schema));
+  const registeredComponent = $derived(fd.fields.resolveFieldComponent(schema));
 
   /**
    * Determine the field type to render (for non-registered components)

package/dist/components/form/FormMarkdownEditor.svelte

@@ -409,11 +409,12 @@
       }),
       EditorView.lineWrapping,
 
-      // Accessibility
+      // Accessibility + browser spellcheck (off by default, opt-in via spellChecker)
       ariaLabelCompartment.of(
         EditorView.contentAttributes.of({
           'aria-label': m().form.markdown.editor,
-          'aria-multiline': 'true'
+          'aria-multiline': 'true',
+          spellcheck: String(spellChecker)
         })
       )
     ];
@@ -495,7 +496,8 @@
         ariaLabelCompartment.reconfigure(
           EditorView.contentAttributes.of({
             'aria-label': ariaLabel,
-            'aria-multiline': 'true'
+            'aria-multiline': 'true',
+            spellcheck: String(spellChecker)
           })
         )
       ]
@@ -525,7 +527,8 @@
       role="toolbar"
       aria-label={m().form.markdown.toolbar}
     >
-      {#each toolbarActions as item}
+      <!-- Separators have no identity of their own — disambiguate repeats by position -->
+      {#each toolbarActions as item, i (item === '|' ? `separator-${i}` : item.id)}
         {#if item === '|'}
           <span class="form-markdown-editor__separator"></span>
         {:else}
@@ -536,6 +539,8 @@
             onclick={item.action}
           >
             {#if item.isSvg}
+              <!-- item.icon is a compile-time SVG constant from toolbarActions, never user input -->
+              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
               <span class="form-markdown-editor__btn-svg">{@html item.icon}</span>
             {:else}
               <span

package/dist/components/form/FormRangeField.svelte

@@ -88,6 +88,7 @@
       {max}
       {step}
       {disabled}
+      {required}
       aria-describedby={ariaDescribedBy}
       aria-valuemin={min}
       aria-valuemax={max}

package/dist/components/form/FormTemplateEditor.svelte

@@ -30,7 +30,8 @@
     tooltips,
     Decoration,
     ViewPlugin,
-    MatchDecorator
+    MatchDecorator,
+    placeholder as cmPlaceholder
   } from '@codemirror/view';
   import { EditorState, Compartment } from '@codemirror/state';
   import { history, historyKeymap, defaultKeymap, indentWithTab } from '@codemirror/commands';
@@ -45,6 +46,7 @@
   } from '../../types/index.js';
   import { createTemplateAutocomplete } from './templateAutocomplete.js';
   import { getVariableSchema } from '../../services/variableService.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { logger } from '../../utils/logger.js';
   import { m } from '../../messages/index.js';
 
@@ -105,6 +107,9 @@
     authProvider
   }: Props = $props();
 
+  // Active instance — supplies endpoint configuration for API variable fetching.
+  const fd = getInstance();
+
   /** Loading state for API variable fetching */
   let isLoadingVariables = $state(false);
 
@@ -139,6 +144,7 @@
       try {
         isLoadingVariables = true;
         effectiveVariableSchema = await getVariableSchema(
+          fd.api.config,
           node,
           nodes,
           edges,
@@ -350,7 +356,9 @@
         }
       }),
       EditorView.lineWrapping,
-      EditorState.tabSize.of(2)
+      EditorState.tabSize.of(2),
+      // Shown inside the editor while the document is empty
+      cmPlaceholder(placeholder)
     ];
 
     // Add autocomplete compartment (can be reconfigured dynamically)
@@ -570,7 +578,7 @@
             onclick={() => insertVariable(varName)}
             title={`Insert {{ ${varName} }}`}
           >
-            <code>{'{{ '}{varName}{' }}'}</code>
+            <code>{`{{ ${varName} }}`}</code>
           </button>
         {/each}
       </div>

package/dist/components/form/FormToggle.svelte

@@ -9,7 +9,7 @@
 -->
 
 <script lang="ts">
-  import { m, warnDeprecatedProp } from '../../messages/index.js';
+  import { m } from '../../messages/index.js';
 
   interface Props {
     /** Field identifier */
@@ -17,11 +17,13 @@
     /** Current value */
     value: boolean;
     /**
-     * @deprecated since v1.8 — use `messages.form.toggle.enabled`. Removed in v2.0.
+     * Per-instance label for the on state (e.g. "Hidden" for a visibility
+     * toggle). Falls back to the global `messages.form.toggle.enabled`.
      */
     onLabel?: string;
     /**
-     * @deprecated since v1.8 — use `messages.form.toggle.disabled`. Removed in v2.0.
+     * Per-instance label for the off state. Falls back to the global
+     * `messages.form.toggle.disabled`.
      */
     offLabel?: string;
     /** Whether the field is disabled (read-only) */
@@ -42,15 +44,6 @@
     onChange
   }: Props = $props();
 
-  // svelte-ignore state_referenced_locally — deprecation warns once per mount; later prop rebinds aren't relevant
-  if (onLabel !== undefined) {
-    warnDeprecatedProp('FormToggle', 'onLabel', 'messages.form.toggle.enabled');
-  }
-  // svelte-ignore state_referenced_locally
-  if (offLabel !== undefined) {
-    warnDeprecatedProp('FormToggle', 'offLabel', 'messages.form.toggle.disabled');
-  }
-
   const resolvedOnLabel = $derived(onLabel ?? m().form.toggle.enabled);
   const resolvedOffLabel = $derived(offLabel ?? m().form.toggle.disabled);
 

package/dist/components/form/FormToggle.svelte.d.ts

@@ -4,11 +4,13 @@ interface Props {
     /** Current value */
     value: boolean;
     /**
-     * @deprecated since v1.8 — use `messages.form.toggle.enabled`. Removed in v2.0.
+     * Per-instance label for the on state (e.g. "Hidden" for a visibility
+     * toggle). Falls back to the global `messages.form.toggle.enabled`.
      */
     onLabel?: string;
     /**
-     * @deprecated since v1.8 — use `messages.form.toggle.disabled`. Removed in v2.0.
+     * Per-instance label for the off state. Falls back to the global
+     * `messages.form.toggle.disabled`.
      */
     offLabel?: string;
     /** Whether the field is disabled (read-only) */

package/dist/components/form/templateAutocomplete.js

@@ -11,7 +11,7 @@
  * @module components/form/templateAutocomplete
  */
 import { autocompletion } from '@codemirror/autocomplete';
-import { getChildVariables, getArrayIndexSuggestions, isArrayVariable, hasChildren } from '../../services/variableService.js';
+import { getChildVariables, getArrayIndexSuggestions, isArrayVariable } from '../../services/variableService.js';
 /**
  * Icon type hints for different variable types in autocomplete dropdown.
  */
@@ -56,10 +56,6 @@ function extractVariablePath(text, pos) {
     if (openBracePos === -1) {
         return null;
     }
-    // Check if there's a closing }} after cursor (still inside expression)
-    const afterCursor = text.slice(pos);
-    const closingMatch = afterCursor.match(/^\s*\}\}/);
-    const hasClosing = closingMatch !== null;
     // Extract the content between {{ and cursor
     const contentStart = openBracePos + 2;
     const content = text.slice(contentStart, pos).trimStart();

package/dist/components/form/types.d.ts

@@ -95,8 +95,7 @@ export interface BaseFieldProps<T = unknown> {
 /**
  * Properties for text input fields
  */
-export interface TextFieldProps extends BaseFieldProps<string> {
-}
+export type TextFieldProps = BaseFieldProps<string>;
 /**
  * Properties for multiline text fields (textarea)
  */
@@ -432,18 +431,6 @@ export interface SchemaFormProps {
      * @default false
      */
     showActions?: boolean;
-    /**
-     * Label text for the save button.
-     * Only used when showActions is true.
-     * @default "Save"
-     */
-    saveLabel?: string;
-    /**
-     * Label text for the cancel button.
-     * Only used when showActions is true.
-     * @default "Cancel"
-     */
-    cancelLabel?: string;
     /**
      * Callback fired when the Save button is clicked.
      * Receives the final form values after collecting from DOM.

package/dist/components/interrupt/FormPrompt.svelte

@@ -44,7 +44,8 @@
   }: Props = $props();
 
   /** Local state for form values */
-  // svelte-ignore state_referenced_locally — initial default, user fills the form
+  // initial default, user fills the form
+  // svelte-ignore state_referenced_locally
   let formValues = $state<Record<string, unknown>>(config.defaultValues ?? {});
 
   /** Display values - either resolved or current form values */
@@ -131,7 +132,7 @@
     <div class="form-prompt__resolved-values">
       <h4 class="form-prompt__resolved-title">{interrupt.form.submittedValuesTitle}</h4>
       <div class="form-prompt__values-list">
-        {#each Object.entries(config.schema.properties ?? {}) as [key, field]}
+        {#each Object.entries(config.schema.properties ?? {}) as [key, field] (key)}
           {@const value = displayValues[key]}
           {@const fieldTitle = ((field as Record<string, unknown>).title as string) ?? key}
           <div class="form-prompt__value-item">

package/dist/components/interrupt/InterruptBubble.svelte

@@ -33,11 +33,8 @@
     getErrorMessage,
     getResolvedValue
   } from '../../types/interruptState.js';
-  import {
-    getInterruptsMap,
-    interruptActions,
-    type InterruptWithState
-  } from '../../stores/interruptStore.svelte.js';
+  import { type InterruptWithState } from '../../stores/interruptStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { interruptService } from '../../services/interruptService.js';
   import { logger } from '../../utils/logger.js';
   import { m } from '../../messages/index.js';
@@ -72,12 +69,14 @@
     tags
   }: Props = $props();
 
+  const fd = getInstance();
+
   /**
    * Get the current interrupt state from the store.
    * This ensures we react to store updates (like status changes).
    */
   const currentInterrupt = $derived(
-    getInterruptsMap().get(initialInterrupt.id) ?? addMachineState(initialInterrupt)
+    fd.interrupts.getMap().get(initialInterrupt.id) ?? addMachineState(initialInterrupt)
   );
 
   const hierarchyItems = $derived(hierarchy ?? []);
@@ -191,7 +190,7 @@
    */
   async function handleResolve(value: unknown): Promise<void> {
     // Start the submission - state machine validates this transition
-    const startResult = interruptActions.startSubmit(currentInterrupt.id, value);
+    const startResult = fd.interrupts.startSubmit(currentInterrupt.id, value);
     if (!startResult.valid) {
       logger.warn('[InterruptBubble] Cannot submit:', startResult.error);
       return;
@@ -199,19 +198,19 @@
 
     try {
       // Call API if service is configured
-      if (interruptService.isConfigured()) {
-        await interruptService.resolveInterrupt(currentInterrupt.id, value);
+      if (interruptService.isConfigured(fd.api.config)) {
+        await interruptService.resolveInterrupt(fd.api.config, currentInterrupt.id, value);
       }
 
       // Mark as successful - transitions to resolved state
-      interruptActions.submitSuccess(currentInterrupt.id);
+      fd.interrupts.submitSuccess(currentInterrupt.id);
 
       // Notify parent to refresh messages
       onResolved?.();
     } catch (err) {
       // Mark as failed - transitions to error state (can retry)
       const errorMessage = err instanceof Error ? err.message : 'Failed to submit response';
-      interruptActions.submitFailure(currentInterrupt.id, errorMessage);
+      fd.interrupts.submitFailure(currentInterrupt.id, errorMessage);
       logger.error('[InterruptBubble] Resolve error:', err);
     }
   }
@@ -221,7 +220,7 @@
    */
   async function handleCancel(): Promise<void> {
     // Start the cancel - state machine validates this transition
-    const startResult = interruptActions.startCancel(currentInterrupt.id);
+    const startResult = fd.interrupts.startCancel(currentInterrupt.id);
     if (!startResult.valid) {
       logger.warn('[InterruptBubble] Cannot cancel:', startResult.error);
       return;
@@ -229,19 +228,19 @@
 
     try {
       // Call API if service is configured
-      if (interruptService.isConfigured()) {
-        await interruptService.cancelInterrupt(currentInterrupt.id);
+      if (interruptService.isConfigured(fd.api.config)) {
+        await interruptService.cancelInterrupt(fd.api.config, currentInterrupt.id);
       }
 
       // Mark as successful - transitions to cancelled state
-      interruptActions.submitSuccess(currentInterrupt.id);
+      fd.interrupts.submitSuccess(currentInterrupt.id);
 
       // Notify parent to refresh messages
       onResolved?.();
     } catch (err) {
       // Mark as failed - transitions to error state (can retry)
       const errorMessage = err instanceof Error ? err.message : 'Failed to cancel';
-      interruptActions.submitFailure(currentInterrupt.id, errorMessage);
+      fd.interrupts.submitFailure(currentInterrupt.id, errorMessage);
       logger.error('[InterruptBubble] Cancel error:', err);
     }
   }
@@ -250,7 +249,7 @@
    * Handle retry after error
    */
   function handleRetry(): void {
-    interruptActions.retry(currentInterrupt.id);
+    fd.interrupts.retry(currentInterrupt.id);
   }
 
   // Typed config getters for each prompt type

package/dist/components/interrupt/ReviewPrompt.svelte

@@ -51,7 +51,8 @@
   }: Props = $props();
 
   /** Local state: map of field -> accepted boolean. Default all to true (accept). */
-  // svelte-ignore state_referenced_locally — initial default, user toggles during review
+  // initial default, user toggles during review
+  // svelte-ignore state_referenced_locally
   let decisions = $state<Record<string, boolean>>(
     Object.fromEntries(config.changes.map((c) => [c.field, true]))
   );
@@ -346,9 +347,12 @@
           <div class="review-prompt__diff-row">
             <span class="review-prompt__diff-label">{t.original}</span>
             {#if isHtml && !isRawView}
+              <!-- Output of sanitizeHtml() (DOMPurify allowlist) — see utils/sanitize.ts -->
+              <!-- eslint-disable svelte/no-at-html-tags -->
               <span class="review-prompt__diff-value review-prompt__html-content"
                 >{@html sanitizeHtml(String(change.original))}</span
               >
+              <!-- eslint-enable svelte/no-at-html-tags -->
             {:else if isHtml && isRawView}
               <code class="review-prompt__diff-value review-prompt__raw-html"
                 >{change.original}</code
@@ -362,10 +366,13 @@
           <div class="review-prompt__diff-row">
             <span class="review-prompt__diff-label">{t.proposed}</span>
             {#if isHtml && !isRawView}
+              <!-- Output of sanitizeHtml() (DOMPurify allowlist) — see utils/sanitize.ts -->
+              <!-- eslint-disable svelte/no-at-html-tags -->
               <span
                 class="review-prompt__diff-value review-prompt__diff-value--proposed review-prompt__html-content"
                 >{@html sanitizeHtml(String(change.proposed))}</span
               >
+              <!-- eslint-enable svelte/no-at-html-tags -->
             {:else if isHtml && isRawView}
               <code
                 class="review-prompt__diff-value review-prompt__diff-value--proposed review-prompt__raw-html"
@@ -382,14 +389,14 @@
               <span class="review-prompt__diff-label">{t.diff}</span>
               {#if isMultiLineDiff(diff)}
                 <pre
-                  class="review-prompt__diff-value review-prompt__diff-block">{#each diff as part}{#if part.added}<span
+                  class="review-prompt__diff-value review-prompt__diff-block">{#each diff as part, i (i)}{#if part.added}<span
                         class="review-prompt__diff-token--added">{part.value}</span
                       >{:else if part.removed}<span class="review-prompt__diff-token--removed"
                         >{part.value}</span
                       >{:else}<span>{part.value}</span>{/if}{/each}</pre>
               {:else}
                 <span class="review-prompt__diff-value review-prompt__diff-inline">
-                  {#each diff as part}
+                  {#each diff as part, i (i)}
                     {#if part.added}
                       <span class="review-prompt__diff-token--added">{part.value}</span>
                     {:else if part.removed}

package/dist/components/interrupt/TextInputPrompt.svelte

@@ -47,7 +47,8 @@
   const t = $derived(m().interrupt.text);
 
   /** Local state for input value */
-  // svelte-ignore state_referenced_locally — initial default, user edits the input
+  // initial default, user edits the input
+  // svelte-ignore state_referenced_locally
   let inputValue = $state(config.defaultValue ?? '');
 
   /** Display value - either resolved or current input */

package/dist/components/layouts/MainLayout.svelte

@@ -17,6 +17,10 @@
    * Configuration props for the MainLayout component
    */
   interface Props {
+    /** Overall layout height (CSS length, or a number of pixels) */
+    height?: string | number;
+    /** Overall layout width (CSS length, or a number of pixels) */
+    width?: string | number;
     /** Height of the header in pixels */
     headerHeight?: number;
     /** Height of the footer in pixels */
@@ -74,6 +78,8 @@
   }
 
   let {
+    height = '100vh',
+    width = '100%',
     headerHeight = 60,
     footerHeight = 48,
     showHeader = true,
@@ -103,9 +109,12 @@
     children
   }: Props = $props();
 
-  /** Current width of the left sidebar */
-  // svelte-ignore state_referenced_locally — initial default, component owns draggable state
-  let leftSidebarWidth = $state(initialLeftWidth);
+  /**
+   * Current width of the left sidebar.
+   * Writable derived: recomputes when the prop changes (external control,
+   * e.g. collapsed state), while drag/keyboard resizing assigns over it.
+   */
+  let leftSidebarWidth = $derived(initialLeftWidth);
 
   /** Current width of the right sidebar */
   // svelte-ignore state_referenced_locally
@@ -115,14 +124,6 @@
   // svelte-ignore state_referenced_locally
   let bottomPanelHeightState = $state(initialBottomHeight);
 
-  /**
-   * Sync left sidebar width with prop changes
-   * This allows external control (e.g., collapsed state) to update the width
-   */
-  $effect(() => {
-    leftSidebarWidth = initialLeftWidth;
-  });
-
   /** Whether the user is currently dragging the left divider */
   let isDraggingLeft = $state(false);
 
@@ -298,6 +299,10 @@
 
   /** Computed CSS variable for bottom panel height */
   const bottomHeightVar = $derived(`${bottomPanelHeightState}px`);
+
+  /** Bare numbers mean pixels; strings pass through as CSS lengths */
+  const layoutHeightVar = $derived(typeof height === 'number' ? `${height}px` : height);
+  const layoutWidthVar = $derived(typeof width === 'number' ? `${width}px` : width);
 </script>
 
 <div
@@ -306,6 +311,8 @@
   class:flowdrop-main-layout--dragging={isDraggingLeft || isDraggingRight || isDraggingBottom}
   class:flowdrop-main-layout--dragging-vertical={isDraggingBottom}
   style="
+		--layout-height: {layoutHeightVar};
+		--layout-width: {layoutWidthVar};
 		--layout-header-height: {headerHeightVar};
 		--layout-footer-height: {footerHeightVar};
 		--layout-left-sidebar-width: {leftWidthVar};
@@ -437,8 +444,8 @@
   .flowdrop-main-layout {
     display: flex;
     flex-direction: column;
-    height: 100vh;
-    width: 100%;
+    height: var(--layout-height, 100vh);
+    width: var(--layout-width, 100%);
     background: var(
       --fd-layout-background,
       linear-gradient(135deg, #f9fafb 0%, #e0e7ff 50%, #c7d2fe 100%)

package/dist/components/layouts/MainLayout.svelte.d.ts

@@ -2,6 +2,10 @@
  * Configuration props for the MainLayout component
  */
 interface Props {
+    /** Overall layout height (CSS length, or a number of pixels) */
+    height?: string | number;
+    /** Overall layout width (CSS length, or a number of pixels) */
+    width?: string | number;
     /** Height of the header in pixels */
     headerHeight?: number;
     /** Height of the footer in pixels */