@flowdrop/flowdrop 1.15.0 → 2.0.0-beta.2

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,10 +42,14 @@
   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';
+  import type { WorkflowNode, WorkflowEdge } from '../../types/index.js';
+  import type { AuthProvider } from '../../types/auth.js';
 
   interface Props {
     /** Unique key/id for the field */
@@ -58,11 +62,33 @@
     required?: boolean;
     /** Animation delay index for staggered animations */
     animationIndex?: number;
+    /** Current workflow node (optional, forwarded to registered editors for template variable API mode) */
+    node?: WorkflowNode;
+    /** All workflow nodes (optional, forwarded to registered editors for port-derived variables) */
+    nodes?: WorkflowNode[];
+    /** All workflow edges (optional, forwarded to registered editors for port-derived variables) */
+    edges?: WorkflowEdge[];
+    /** Workflow ID (optional, forwarded to registered editors for template variable API mode) */
+    workflowId?: string;
+    /** Auth provider (optional, forwarded to registered editors for API requests) */
+    authProvider?: AuthProvider;
     /** Callback when the field value changes */
     onChange: (value: unknown) => void;
   }
 
-  let { fieldKey, schema, value, required = false, animationIndex = 0, onChange }: Props = $props();
+  let {
+    fieldKey,
+    schema,
+    value,
+    required = false,
+    animationIndex = 0,
+    node,
+    nodes,
+    edges,
+    workflowId,
+    authProvider,
+    onChange
+  }: Props = $props();
 
   /**
    * Computed description ID for ARIA association
@@ -84,7 +110,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)
@@ -244,6 +270,11 @@
         variables={schema.variables}
         placeholderExample={schema.placeholderExample as string | undefined}
         autocomplete={schema.autocomplete}
+        {node}
+        {nodes}
+        {edges}
+        {workflowId}
+        {authProvider}
         onChange={(val: unknown) => onChange(val)}
       />
     {:else if fieldType === 'checkbox-group'}

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

@@ -1,4 +1,6 @@
 import type { FieldSchema } from './types.js';
+import type { WorkflowNode, WorkflowEdge } from '../../types/index.js';
+import type { AuthProvider } from '../../types/auth.js';
 interface Props {
     /** Unique key/id for the field */
     fieldKey: string;
@@ -10,6 +12,16 @@ interface Props {
     required?: boolean;
     /** Animation delay index for staggered animations */
     animationIndex?: number;
+    /** Current workflow node (optional, forwarded to registered editors for template variable API mode) */
+    node?: WorkflowNode;
+    /** All workflow nodes (optional, forwarded to registered editors for port-derived variables) */
+    nodes?: WorkflowNode[];
+    /** All workflow edges (optional, forwarded to registered editors for port-derived variables) */
+    edges?: WorkflowEdge[];
+    /** Workflow ID (optional, forwarded to registered editors for template variable API mode) */
+    workflowId?: string;
+    /** Auth provider (optional, forwarded to registered editors for API requests) */
+    authProvider?: AuthProvider;
     /** Callback when the field value changes */
     onChange: (value: unknown) => void;
 }

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/FormUISchemaRenderer.svelte

@@ -16,7 +16,9 @@
   import type { ConfigSchema, WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
   import type { FieldSchema } from './types.js';
   import { resolveScopeToKey } from '../../utils/uischema.js';
-  import FormField from './FormField.svelte';
+  // Use the registry-based light field factory so the UISchema renderer (and
+  // SchemaForm/ConfigForm above it) never statically pull in CodeMirror.
+  import FormField from './FormFieldLight.svelte';
   import FormFieldset from './FormFieldset.svelte';
   import Self from './FormUISchemaRenderer.svelte';
 

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,24 @@
 
     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,
+          fd.api.authProvider
+        );
       }
 
       // 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 +225,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 +233,23 @@
 
     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,
+          fd.api.authProvider
+        );
       }
 
       // 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 +258,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 */