svelte-flexiboards 0.3.2 → 0.4.1

package/dist/system/responsive/controller.svelte.d.ts

@@ -0,0 +1,78 @@
+import type { FlexiLayout } from '../board/types.js';
+import type { ResponsiveFlexiBoardController } from './base.svelte.js';
+import type { ResponsiveFlexiBoardConfiguration, ResponsiveFlexiLayout } from './types.js';
+import type { ResponsiveFlexiBoardProps } from '../../components/responsive-flexi-board.svelte';
+export declare class InternalResponsiveFlexiBoardController implements ResponsiveFlexiBoardController {
+    #private;
+    config?: ResponsiveFlexiBoardConfiguration;
+    /**
+     * The currently active breakpoint key.
+     * Determined by checking MediaQuery matches in descending order.
+     * Falls back to 'default' if no breakpoint matches.
+     */
+    currentBreakpoint: string;
+    constructor(props: ResponsiveFlexiBoardProps);
+    /**
+     * Gets the layout for the current breakpoint.
+     * Falls back to 'default' if no layout exists for the current breakpoint.
+     */
+    getLayoutForCurrentBreakpoint(): FlexiLayout | undefined;
+    /**
+     * Updates the layout for the current breakpoint.
+     * Called when the active FlexiBoard's layout changes.
+     */
+    setLayoutForCurrentBreakpoint(layout: FlexiLayout): void;
+    /**
+     * Gets the layout for a specific breakpoint.
+     */
+    getLayoutForBreakpoint(breakpoint: string): FlexiLayout | undefined;
+    /**
+     * Sets the layout for a specific breakpoint.
+     */
+    setLayoutForBreakpoint(breakpoint: string, layout: FlexiLayout): void;
+    /**
+     * Checks if a layout exists for a specific breakpoint.
+     */
+    hasLayoutForBreakpoint(breakpoint: string): boolean;
+    /**
+     * Imports all responsive layouts.
+     * Replaces any existing stored layouts.
+     */
+    importLayout(layout: ResponsiveFlexiLayout): void;
+    /**
+     * Exports all responsive layouts.
+     * Returns a copy of the stored layouts.
+     */
+    exportLayout(): ResponsiveFlexiLayout;
+    /**
+     * Returns all breakpoint keys that have stored layouts.
+     */
+    get definedBreakpoints(): string[];
+    /**
+     * Returns all configured breakpoint keys (from config).
+     */
+    get configuredBreakpoints(): string[];
+    /**
+     * Returns the sorted breakpoints (largest first, excluding 'default').
+     */
+    get sortedBreakpoints(): [string, number][];
+    /**
+     * Called when the responsive board is ready to load layouts.
+     * Triggers initial layout loading from the `loadLayouts` config.
+     */
+    oninitialloadcomplete(): void;
+    /**
+     * Whether the responsive board has completed initial loading.
+     */
+    get ready(): boolean;
+    /**
+     * Whether layouts have been imported via importLayout() or received from child boards.
+     * Child boards check this to know whether to auto-load from stored layouts
+     * or use their loadLayout callback.
+     */
+    get hasStoredLayouts(): boolean;
+    /**
+     * Cleanup method to be called when the responsive board is destroyed.
+     */
+    destroy(): void;
+}

package/dist/system/responsive/controller.svelte.js

@@ -0,0 +1,264 @@
+import { MediaQuery, SvelteMap } from 'svelte/reactivity';
+import { getFlexiEventBus } from '../shared/event-bus.js';
+const DEFAULT_BREAKPOINT = 'default';
+export class InternalResponsiveFlexiBoardController {
+    #rawProps = $state(undefined);
+    config = $derived(this.#rawProps?.config);
+    /**
+     * Stored layouts for all breakpoints.
+     * This is the source of truth - active board syncs to/from this.
+     */
+    #storedLayouts = $state({});
+    /**
+     * Whether initial layout loading has completed.
+     */
+    #ready = false;
+    /**
+     * Debounce timer for layout change callbacks.
+     */
+    #layoutChangeTimeout = null;
+    #layoutChangeDebounceMs = 150;
+    /**
+     * Whether initial layouts have been imported via importLayout().
+     * Used by child boards to determine whether to load from stored layouts or loadLayout callback.
+     */
+    #hasStoredLayouts = false;
+    /**
+     * Event bus for communication between controllers.
+     */
+    #eventBus;
+    /**
+     * Cleanup functions for event subscriptions.
+     */
+    #unsubscribers = [];
+    /**
+     * MediaQuery instances for each breakpoint.
+     * Created lazily when breakpoints config changes.
+     */
+    #mediaQueries = new SvelteMap();
+    /**
+     * Breakpoints sorted in descending order by min-width.
+     * Largest breakpoint first, so we match the largest applicable one.
+     */
+    #sortedBreakpoints = $derived.by(() => {
+        const breakpoints = this.config?.breakpoints ?? {};
+        return Object.entries(breakpoints)
+            .filter(([key]) => key !== DEFAULT_BREAKPOINT)
+            .sort((a, b) => b[1] - a[1]);
+    });
+    /**
+     * The currently active breakpoint key.
+     * Determined by checking MediaQuery matches in descending order.
+     * Falls back to 'default' if no breakpoint matches.
+     */
+    currentBreakpoint = $derived.by(() => {
+        // Check breakpoints in descending order (largest first)
+        for (const [key] of this.#sortedBreakpoints) {
+            const query = this.#mediaQueries.get(key);
+            if (query?.current) {
+                return key;
+            }
+        }
+        return DEFAULT_BREAKPOINT;
+    });
+    /**
+     * Previous breakpoint for detecting changes.
+     */
+    #previousBreakpoint = DEFAULT_BREAKPOINT;
+    constructor(props) {
+        this.#rawProps = props;
+        this.#eventBus = getFlexiEventBus();
+        // Subscribe to board layout changes
+        this.#unsubscribers.push(this.#eventBus.subscribe('board:layoutchange', this.#onBoardLayoutChange.bind(this)));
+        // Initialize media queries when breakpoints config changes
+        $effect(() => {
+            this.#initializeMediaQueries();
+        });
+        // Detect and handle breakpoint changes
+        $effect(() => {
+            const current = this.currentBreakpoint;
+            const previous = this.#previousBreakpoint;
+            if (previous !== current) {
+                this.#onBreakpointChange(previous, current);
+                this.#previousBreakpoint = current;
+            }
+        });
+    }
+    /**
+     * Handles layout change events from child boards.
+     */
+    #onBoardLayoutChange(event) {
+        // Only handle events from boards under our control
+        if (event.board.responsiveController !== this) {
+            return;
+        }
+        // Store the layout for this breakpoint
+        if (event.breakpoint) {
+            this.#storedLayouts[event.breakpoint] = event.layout;
+            this.#hasStoredLayouts = true;
+            this.#notifyLayoutChange();
+        }
+    }
+    /**
+     * Creates MediaQuery instances for each configured breakpoint.
+     */
+    #initializeMediaQueries() {
+        const breakpoints = this.config?.breakpoints ?? {};
+        // Clear existing queries
+        this.#mediaQueries.clear();
+        // Create min-width queries for each breakpoint (except 'default')
+        for (const [key, minWidth] of Object.entries(breakpoints)) {
+            if (key === DEFAULT_BREAKPOINT) {
+                continue;
+            }
+            this.#mediaQueries.set(key, new MediaQuery(`(min-width: ${minWidth}px)`, false));
+        }
+    }
+    /**
+     * Called when the active breakpoint changes.
+     */
+    #onBreakpointChange(oldBreakpoint, newBreakpoint) {
+        this.config?.onBreakpointChange?.(newBreakpoint, oldBreakpoint);
+    }
+    // =========================================================================
+    // Layout access for the active breakpoint (used by component)
+    // =========================================================================
+    /**
+     * Gets the layout for the current breakpoint.
+     * Falls back to 'default' if no layout exists for the current breakpoint.
+     */
+    getLayoutForCurrentBreakpoint() {
+        return this.#storedLayouts[this.currentBreakpoint] ?? this.#storedLayouts[DEFAULT_BREAKPOINT];
+    }
+    /**
+     * Updates the layout for the current breakpoint.
+     * Called when the active FlexiBoard's layout changes.
+     */
+    setLayoutForCurrentBreakpoint(layout) {
+        this.#storedLayouts[this.currentBreakpoint] = layout;
+        this.#notifyLayoutChange();
+    }
+    /**
+     * Debounced notification of layout changes.
+     */
+    #notifyLayoutChange() {
+        if (this.#layoutChangeTimeout) {
+            clearTimeout(this.#layoutChangeTimeout);
+        }
+        this.#layoutChangeTimeout = setTimeout(() => {
+            this.#layoutChangeTimeout = null;
+            this.config?.onLayoutsChange?.(this.exportLayout());
+        }, this.#layoutChangeDebounceMs);
+    }
+    // =========================================================================
+    // Per-breakpoint layout access
+    // =========================================================================
+    /**
+     * Gets the layout for a specific breakpoint.
+     */
+    getLayoutForBreakpoint(breakpoint) {
+        return this.#storedLayouts[breakpoint];
+    }
+    /**
+     * Sets the layout for a specific breakpoint.
+     */
+    setLayoutForBreakpoint(breakpoint, layout) {
+        this.#storedLayouts[breakpoint] = layout;
+    }
+    /**
+     * Checks if a layout exists for a specific breakpoint.
+     */
+    hasLayoutForBreakpoint(breakpoint) {
+        return breakpoint in this.#storedLayouts;
+    }
+    // =========================================================================
+    // Import/Export (ResponsiveFlexiBoardController interface)
+    // =========================================================================
+    /**
+     * Imports all responsive layouts.
+     * Replaces any existing stored layouts.
+     */
+    importLayout(layout) {
+        this.#storedLayouts = { ...layout };
+        this.#hasStoredLayouts = true;
+        // Notify child boards to reload their layout from the stored layouts
+        this.#eventBus.dispatch('responsive:layoutimport', {
+            responsiveController: this
+        });
+    }
+    /**
+     * Exports all responsive layouts.
+     * Returns a copy of the stored layouts.
+     */
+    exportLayout() {
+        return { ...this.#storedLayouts };
+    }
+    // =========================================================================
+    // Utility getters
+    // =========================================================================
+    /**
+     * Returns all breakpoint keys that have stored layouts.
+     */
+    get definedBreakpoints() {
+        return Object.keys(this.#storedLayouts);
+    }
+    /**
+     * Returns all configured breakpoint keys (from config).
+     */
+    get configuredBreakpoints() {
+        return Object.keys(this.config?.breakpoints ?? {});
+    }
+    /**
+     * Returns the sorted breakpoints (largest first, excluding 'default').
+     */
+    get sortedBreakpoints() {
+        return this.#sortedBreakpoints;
+    }
+    // =========================================================================
+    // Lifecycle
+    // =========================================================================
+    /**
+     * Called when the responsive board is ready to load layouts.
+     * Triggers initial layout loading from the `loadLayouts` config.
+     */
+    oninitialloadcomplete() {
+        if (this.#ready) {
+            return;
+        }
+        this.#ready = true;
+        const loadLayoutsFn = this.config?.loadLayouts;
+        if (loadLayoutsFn) {
+            const layouts = loadLayoutsFn();
+            if (layouts) {
+                this.importLayout(layouts);
+            }
+        }
+    }
+    /**
+     * Whether the responsive board has completed initial loading.
+     */
+    get ready() {
+        return this.#ready;
+    }
+    /**
+     * Whether layouts have been imported via importLayout() or received from child boards.
+     * Child boards check this to know whether to auto-load from stored layouts
+     * or use their loadLayout callback.
+     */
+    get hasStoredLayouts() {
+        return this.#hasStoredLayouts;
+    }
+    /**
+     * Cleanup method to be called when the responsive board is destroyed.
+     */
+    destroy() {
+        this.#mediaQueries.clear();
+        // Clean up event subscriptions
+        this.#unsubscribers.forEach((unsubscribe) => unsubscribe());
+        this.#unsubscribers = [];
+        if (this.#layoutChangeTimeout) {
+            clearTimeout(this.#layoutChangeTimeout);
+            this.#layoutChangeTimeout = null;
+        }
+    }
+}

package/dist/system/responsive/index.d.ts

@@ -0,0 +1,16 @@
+import type { ResponsiveFlexiBoardController } from './base.svelte.js';
+import { InternalResponsiveFlexiBoardController } from './controller.svelte.js';
+import type { ResponsiveFlexiBoardProps } from '../../components/responsive-flexi-board.svelte';
+import type { ResponsiveFlexiBoardConfiguration, ResponsiveFlexiLayout } from './types.js';
+export declare function responsiveflexiboard(props: ResponsiveFlexiBoardProps): InternalResponsiveFlexiBoardController;
+/**
+ * Checks if a responsive board context is available.
+ * @returns Whether a responsive board context is available.
+ */
+export declare function hasInternalResponsiveFlexiboardCtx(): boolean;
+/**
+ * Gets the current {@link ResponsiveFlexiBoardController} instance, if any.
+ * Throws an error if no responsive board is found.
+ */
+export declare function getResponsiveFlexiboardCtx(): ResponsiveFlexiBoardController;
+export { type ResponsiveFlexiBoardController, type ResponsiveFlexiBoardConfiguration, type ResponsiveFlexiLayout };

package/dist/system/responsive/index.js

@@ -0,0 +1,36 @@
+import { getContext, setContext } from 'svelte';
+import { InternalResponsiveFlexiBoardController } from './controller.svelte.js';
+const contextKey = Symbol('responsive-flexiboard');
+export function responsiveflexiboard(props) {
+    const board = new InternalResponsiveFlexiBoardController(props);
+    setContext(contextKey, board);
+    return board;
+}
+/**
+ * Gets the current {@link InternalResponsiveFlexiBoardController} instance, if any.
+ * Throws an error if no responsive board is found.
+ * @internal
+ */
+export function getInternalResponsiveFlexiboardCtx() {
+    const board = getContext(contextKey);
+    if (!board) {
+        throw new Error('Cannot get ResponsiveFlexiBoard context outside of a registered board. Ensure that responsiveflexiboard() (or <ResponsiveFlexiBoard>) is called.');
+    }
+    return board;
+}
+/**
+ * Checks if a responsive board context is available.
+ * @returns Whether a responsive board context is available.
+ */
+export function hasInternalResponsiveFlexiboardCtx() {
+    return !!getContext(contextKey);
+}
+/**
+ * Gets the current {@link ResponsiveFlexiBoardController} instance, if any.
+ * Throws an error if no responsive board is found.
+ */
+export function getResponsiveFlexiboardCtx() {
+    return getInternalResponsiveFlexiboardCtx();
+}
+/* Exports to go to root index.ts */
+export {};

package/dist/system/responsive/types.d.ts

@@ -0,0 +1,56 @@
+import type { FlexiLayout } from "../board/types.js";
+/**
+ * A responsive layout is a map of breakpoint keys to FlexiBoard layouts.
+ *
+ * @example
+ * ```ts
+ * const layout: ResponsiveFlexiLayout = {
+ *   lg: { "target-0": [{ type: "widget", x: 0, y: 0, width: 4, height: 2 }] },
+ *   md: { "target-0": [{ type: "widget", x: 0, y: 0, width: 6, height: 2 }] },
+ *   default: { "target-0": [{ type: "widget", x: 0, y: 0, width: 12, height: 2 }] },
+ * };
+ * ```
+ */
+export type ResponsiveFlexiLayout = {
+    [breakpoint: string]: FlexiLayout;
+};
+/**
+ * Callback fired when any breakpoint's layout changes.
+ */
+export type ResponsiveFlexiLayoutChangeFn = (layouts: ResponsiveFlexiLayout) => void;
+/**
+ * Function to load initial layouts for all breakpoints.
+ */
+export type ResponsiveFlexiLoadLayoutFn = () => ResponsiveFlexiLayout | undefined;
+export type ResponsiveFlexiBoardConfiguration = {
+    /**
+     * Breakpoint definitions mapping breakpoint keys to minimum viewport widths (in pixels).
+     * Breakpoints are evaluated in descending order - the largest matching breakpoint wins.
+     * Use 'default' as the fallback when no breakpoint matches.
+     *
+     * @example
+     * ```ts
+     * breakpoints: {
+     *   lg: 1200,  // >= 1200px
+     *   md: 900,   // >= 900px
+     *   sm: 600,   // >= 600px
+     *   // 'default' is implicit for < 600px
+     * }
+     * ```
+     */
+    breakpoints?: Record<string, number>;
+    /**
+     * Callback fired when the active breakpoint changes.
+     */
+    onBreakpointChange?: (newBreakpoint: string, oldBreakpoint: string) => void;
+    /**
+     * Callback fired when any layout changes (widget moved, resized, added, or removed).
+     * Receives all breakpoint layouts, including the updated current one.
+     */
+    onLayoutsChange?: ResponsiveFlexiLayoutChangeFn;
+    /**
+     * Function to load initial layouts on mount.
+     * Called once when the responsive board is ready.
+     */
+    loadLayouts?: ResponsiveFlexiLoadLayoutFn;
+};

package/dist/system/responsive/types.js

@@ -0,0 +1 @@
+export {};

package/dist/system/shared/event-bus.d.ts

@@ -1,4 +1,4 @@
-import type { AdderWidgetReadyEvent, PointerMovedEvent, TargetEvent, WidgetDroppedEvent, WidgetEvent, WidgetGrabbedEvent, WidgetResizingEvent } from '../types.js';
+import type { AdderWidgetReadyEvent, BoardLayoutChangeEvent, PointerMovedEvent, ResponsiveLayoutImportEvent, TargetEvent, WidgetDroppedEvent, WidgetEvent, WidgetGrabbedEvent, WidgetResizingEvent } from '../types.js';
 export interface EventMap {
     'widget:grabbed': WidgetGrabbedEvent;
     'widget:resizing': WidgetResizingEvent;
@@ -12,6 +12,8 @@ export interface EventMap {
     'widget:leavetarget': WidgetEvent;
     'adder:widgetready': AdderWidgetReadyEvent;
     'pointer:moved': PointerMovedEvent;
+    'board:layoutchange': BoardLayoutChangeEvent;
+    'responsive:layoutimport': ResponsiveLayoutImportEvent;
 }
 type EventListener<T> = (data: T) => void;
 export declare class FlexiEventBus {

package/dist/system/shared/utils.svelte.d.ts

@@ -60,6 +60,8 @@ export declare class GridDimensionTracker {
     refreshScrollListeners(): void;
     getCellFromPointerPosition(clientX: number, clientY: number): CellPosition | null;
 }
+export declare function contentSize(axisCoordinates: number[], gap: number): number;
+export declare function findCell(pointerLocation: number, start: number, size: number, gap: number, axisCoordinates: number[]): number;
 export declare function generateUniqueId(prefix?: string): string;
 export declare const assistiveTextStyle = "\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder-width: 0;\n";
 export declare function getElementMidpoint(element: HTMLElement): {

package/dist/system/shared/utils.svelte.js

@@ -48,7 +48,11 @@ export class PointerService {
     isPointerInside(element) {
         const rect = element.getBoundingClientRect();
         const { x, y } = this.#position;
-        return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+        // Use scrollWidth/scrollHeight to account for content that overflows the element
+        // (e.g. grid columns that extend beyond a scrollable parent with overflow: hidden).
+        const width = Math.max(rect.width, element.scrollWidth);
+        const height = Math.max(rect.height, element.scrollHeight);
+        return x >= rect.left && x <= rect.left + width && y >= rect.top && y <= rect.top + height;
     }
     get keyboardControlsActive() {
         return this.#keyboardController.active;
@@ -557,9 +561,9 @@ export class GridDimensionTracker {
             const style = window.getComputedStyle(parent);
             const overflowY = style.getPropertyValue('overflow-y');
             const overflowX = style.getPropertyValue('overflow-x');
-            const isScrollable = ((overflowY === 'auto' || overflowY === 'scroll') &&
+            const isScrollable = ((overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'hidden') &&
                 parent.scrollHeight > parent.clientHeight) ||
-                ((overflowX === 'auto' || overflowX === 'scroll') &&
+                ((overflowX === 'auto' || overflowX === 'scroll' || overflowX === 'hidden') &&
                     parent.scrollWidth > parent.clientWidth);
             if (isScrollable) {
                 ancestors.push(parent);
@@ -574,32 +578,45 @@ export class GridDimensionTracker {
         }
         this.#pointerPosition.x = clientX;
         this.#pointerPosition.y = clientY;
-        let xCell = this.#findCell(clientX, this.#dimensions.left, this.#dimensions.width, this.#dimensions.columnGap, this.#dimensions.columns);
-        let yCell = this.#findCell(clientY, this.#dimensions.top, this.#dimensions.height, this.#dimensions.rowGap, this.#dimensions.rows);
+        // DEBUG: trace scroll offset issue
+        const gridRef = this.#grid.ref;
+        const freshRect = gridRef.getBoundingClientRect();
+        // Walk up to find the scrollable parent (board element)
+        let scrollParent = gridRef.parentElement;
+        while (scrollParent && scrollParent.scrollLeft === 0 && scrollParent !== document.documentElement) {
+            scrollParent = scrollParent.parentElement;
+        }
+        let xCell = findCell(clientX, this.#dimensions.left, contentSize(this.#dimensions.columns, this.#dimensions.columnGap), this.#dimensions.columnGap, this.#dimensions.columns);
+        let yCell = findCell(clientY, this.#dimensions.top, contentSize(this.#dimensions.rows, this.#dimensions.rowGap), this.#dimensions.rowGap, this.#dimensions.rows);
         return {
             row: yCell,
             column: xCell
         };
     }
-    #findCell(pointerLocation, start, size, gap, axisCoordinates) {
-        // If outside the axis, then return the ends.
-        if (pointerLocation < start) {
-            return 0;
-        }
-        if (pointerLocation >= start + size) {
-            return axisCoordinates.length;
-        }
-        let subtotal = start - gap / 2;
-        for (let i = 0; i < axisCoordinates.length; i++) {
-            const base = subtotal;
-            subtotal += axisCoordinates[i] + gap;
-            const proportionAlong = (pointerLocation - base) / (subtotal - base);
-            if (pointerLocation < subtotal) {
-                return i + proportionAlong;
-            }
-        }
+}
+export function contentSize(axisCoordinates, gap) {
+    const totalCells = axisCoordinates.reduce((sum, size) => sum + size, 0);
+    const totalGaps = Math.max(0, axisCoordinates.length - 1) * gap;
+    return totalCells + totalGaps;
+}
+export function findCell(pointerLocation, start, size, gap, axisCoordinates) {
+    // If outside the axis, then return the ends.
+    if (pointerLocation < start) {
+        return 0;
+    }
+    if (pointerLocation >= start + size) {
         return axisCoordinates.length;
     }
+    let subtotal = start - gap / 2;
+    for (let i = 0; i < axisCoordinates.length; i++) {
+        const base = subtotal;
+        subtotal += axisCoordinates[i] + gap;
+        const proportionAlong = (pointerLocation - base) / (subtotal - base);
+        if (pointerLocation < subtotal) {
+            return i + proportionAlong;
+        }
+    }
+    return axisCoordinates.length;
 }
 let uniqueIdIndex = 0;
 export function generateUniqueId(prefix = 'flexi-') {

package/dist/system/target/controller.svelte.d.ts

@@ -7,11 +7,13 @@ import type { InternalFlexiBoardController } from '../board/controller.svelte.js
 import type { FlexiTargetController } from './base.svelte.js';
 import { SvelteSet } from 'svelte/reactivity';
 import type { FlexiTargetActionWidget, FlexiTargetConfiguration, FlexiTargetPartialConfiguration } from './types.js';
+import type { FlexiRegistryEntry, FlexiWidgetLayoutEntry } from '../board/types.js';
 export declare class InternalFlexiTargetController implements FlexiTargetController {
     #private;
     provider: InternalFlexiBoardController;
     providerWidgetDefaults?: FlexiWidgetDefaults;
     key: string;
+    registry?: Record<string, FlexiRegistryEntry>;
     config: FlexiTargetConfiguration;
     constructor(provider: InternalFlexiBoardController, key: string, config?: FlexiTargetPartialConfiguration);
     createGrid(): FlexiGrid;
@@ -25,18 +27,20 @@ export declare class InternalFlexiTargetController implements FlexiTargetControl
     deleteWidget(widget: FlexiWidgetController): boolean;
     /**
      * Imports a layout of widgets into this target, replacing any existing widgets.
+     * Widgets with types not found in the registry will be skipped with a warning.
      * @param layout The layout to import.
      */
-    importLayout(layout: FlexiWidgetConfiguration[]): void;
+    importLayout(layout: FlexiWidgetLayoutEntry[]): void;
     /**
      * Exports the current layout of widgets from this target.
      * @returns The layout of widgets.
      */
-    exportLayout(): FlexiWidgetConfiguration[];
+    exportLayout(): FlexiWidgetLayoutEntry[];
     onPointerEnterTarget(event: TargetEvent): void;
     onPointerLeaveTarget(event: TargetEvent): void;
     restorePreGrabSnapshot(): void;
     forgetPreGrabSnapshot(): void;
+    hasPreGrabSnapshot(): boolean;
     applyGridPostCompletionOperations(): void;
     cancelDrop(): void;
     tryDropWidget(widget: InternalFlexiWidgetController): boolean;
@@ -76,6 +80,7 @@ export declare class InternalFlexiTargetController implements FlexiTargetControl
     get grid(): FlexiGrid;
     get dropzoneWidget(): InternalFlexiWidgetController | null;
     set dropzoneWidget(value: InternalFlexiWidgetController | null);
+    get shouldRenderDropzoneWidget(): boolean;
     get widgets(): SvelteSet<FlexiWidgetController>;
     get internalWidgets(): SvelteSet<InternalFlexiWidgetController>;
     get orderedWidgets(): InternalFlexiWidgetController[];