svelte-flexiboards 0.3.2 → 0.4.1

package/dist/system/grid/flow-grid.svelte.js

@@ -25,6 +25,7 @@ export class FlowFlexiGrid extends FlexiGrid {
         disallowInsert: this.#rawLayoutConfig.disallowInsert ?? false
     });
     #coordinateSystem = new FlowGridCoordinateSystem(this);
+    #dragSnapshot = null;
     constructor(target, targetConfig) {
         super(target, targetConfig);
         this.#targetConfig = targetConfig;
@@ -47,60 +48,82 @@ export class FlowFlexiGrid extends FlexiGrid {
         else if (!isRowFlow && height > this.rows) {
             height = this.rows;
         }
+        // Additionally, constrain the width/height of the widget to the min/max values.
+        width = Math.max(widget.minWidth, Math.min(widget.maxWidth, width));
+        height = Math.max(widget.minHeight, Math.min(widget.maxHeight, height));
         // Find the nearest widget to the proposed position, and determine the precise location based on it.
         const [index, nearestWidget] = this.#coordinateSystem.findNearestWidget(cellPosition, 0, this.#widgets.length - 1);
         // If there's no widgets in the grid, just trivially add ours to the start.
         if (!nearestWidget) {
-            return this.#placeWidgetAt(widget, 0, 0);
+            return this.#placeWidgetAt(widget, 0, 0, width, height);
         }
         const nearestWidgetPosition = this.#coordinateSystem.to1D(nearestWidget.x, nearestWidget.y);
         // If the found widget's position is before our desired one, then our widget will be placed adjacent to it along the flow axis.
         if (nearestWidgetPosition < cellPosition) {
-            return this.#placeWidgetAt(widget, nearestWidgetPosition + this.#coordinateSystem.getWidgetLength(nearestWidget), index + 1);
+            return this.#placeWidgetAt(widget, nearestWidgetPosition + this.#coordinateSystem.getWidgetLength(nearestWidget), index + 1, width, height);
         }
         // Otherwise, it'll look at the predecessor of the nearest widget and place it after it.
         // This prevents gaps from being persisted if widgets can fit adjacent to the predecessor.
         if (index > 0) {
             const predecessor = this.#widgets[index - 1];
             return this.#placeWidgetAt(widget, this.#coordinateSystem.to1D(predecessor.x, predecessor.y) +
-                this.#coordinateSystem.getWidgetLength(predecessor), index);
+                this.#coordinateSystem.getWidgetLength(predecessor), index, width, height);
         }
-        return this.#placeWidgetAt(widget, nearestWidgetPosition, index);
+        return this.#placeWidgetAt(widget, nearestWidgetPosition, index, width, height);
     }
     #commitOperations(operations) {
-        const isRowFlow = this.isRowFlow;
         for (const operation of operations) {
             const [newX, newY] = this.#coordinateSystem.to2D(operation.newPosition);
-            operation.widget.setBounds(newX, newY, isRowFlow ? operation.widget.width : 1, isRowFlow ? 1 : operation.widget.height);
+            operation.widget.setBounds(newX, newY, operation.width, operation.height);
         }
         return true;
     }
-    #placeWidgetAt(widget, position, index) {
+    #placeWidgetAt(widget, position, index, width, height) {
         const operations = [];
         this.#widgets.splice(index, 0, widget);
-        if (!this.#shiftWidget(index, position, operations)) {
+        if (!this.#shiftWidget(index, position, operations, width, height)) {
             // Undo the insertion.
             this.#widgets.splice(index, 1);
             return false;
         }
         return this.#commitOperations(operations);
     }
-    #shiftWidget(index, position, operations) {
+    #shiftWidget(index, position, operations, width, height) {
         const widget = this.#widgets[index];
-        const finalPosition = this.#coordinateSystem.findPositionToFitWidget(widget, position);
+        const isRowFlow = this.isRowFlow;
+        // Determine the dimensions to use for this widget.
+        // For flow grids, the cross-axis dimension is always 1.
+        // For the primary widget (first in chain), use provided flow-axis dimension if given.
+        // For displaced widgets, use their current flow-axis dimension.
+        let effectiveWidth;
+        let effectiveHeight;
+        if (isRowFlow) {
+            effectiveWidth = width ?? widget.width;
+            effectiveHeight = 1; // Cross-axis is always 1 for row flow
+        }
+        else {
+            effectiveWidth = 1; // Cross-axis is always 1 for column flow
+            effectiveHeight = height ?? widget.height;
+        }
+        // The "length" along the flow axis for positioning calculations.
+        const effectiveLength = isRowFlow ? effectiveWidth : effectiveHeight;
+        const finalPosition = this.#coordinateSystem.findPositionToFitWidget(widget, position, effectiveLength);
         // Expand the grid if the widget is being added past the current flow axis end.
         if (!this.#coordinateSystem.expandIfNeededToFit(finalPosition)) {
             return false;
         }
         operations.push({
             widget,
-            newPosition: finalPosition
+            newPosition: finalPosition,
+            width: effectiveWidth,
+            height: effectiveHeight
         });
         if (index + 1 >= this.#widgets.length) {
             return true;
         }
         // Prepare to shift the remaining widgets along relative to this one.
-        return this.#shiftWidget(index + 1, finalPosition + this.#coordinateSystem.getWidgetLength(widget), operations);
+        // Displaced widgets use their current dimensions (no width/height override).
+        return this.#shiftWidget(index + 1, finalPosition + effectiveLength, operations);
     }
     #resolveNextPlacementPosition() {
         if (!this.#widgets.length) {
@@ -159,10 +182,23 @@ export class FlowFlexiGrid extends FlexiGrid {
         const widget = this.#widgets[index];
         this.#widgets.splice(index, 1);
         const operations = [];
-        const widgetPosition = this.#coordinateSystem.to1D(widget.x, widget.y);
-        // Shift the remaining widgets back if possible.
-        if (index < this.#widgets.length && !this.#shiftWidget(index, widgetPosition, operations)) {
-            return false;
+        // When removing a widget, we need to re-compact all remaining widgets
+        // starting from the beginning. This is because there may be gaps before
+        // the removed widget that widgets after it can now fill.
+        //
+        // Example: In a 3-column grid with [A(2-wide), B(2-wide), C(1-wide)]:
+        // - A occupies positions 0-1
+        // - B can't fit at position 2 (only 1 cell), so it goes to position 3
+        // - C goes to position 5
+        // State: AA- / BBC
+        //
+        // When B is removed, C should move to position 2 (the gap after A),
+        // NOT to position 3 (where B was).
+        if (this.#widgets.length > 0) {
+            // Start compaction from position 0
+            if (!this.#shiftWidget(0, 0, operations)) {
+                return false;
+            }
         }
         return this.#commitOperations(operations);
     }
@@ -190,31 +226,64 @@ export class FlowFlexiGrid extends FlexiGrid {
     restoreFromSnapshot(snapshot) {
         this.clear();
         for (const widget of snapshot.widgets) {
-            widget.widget.setBounds(widget.x, widget.y, widget.width, widget.height);
+            widget.widget.setBounds(widget.x, widget.y, widget.width, widget.height, false);
             this.#widgets.push(widget.widget);
         }
         this.rows = snapshot.rows;
         this.columns = snapshot.columns;
     }
+    setDragSnapshot(snapshot) {
+        this.#dragSnapshot = snapshot;
+    }
+    clearDragSnapshot() {
+        this.#dragSnapshot = null;
+    }
     mapRawCellToFinalCell(x, y) {
-        // This gets us most of the way there, but we need to account for the cases where different flow axis indexes may have different pixel sizes.
         const position = this.#coordinateSystem.getNormalisedHoverPosition(x, y);
-        // This is somewhat hacky, but we're basically saying that if the shadow widget is anywhere before the current index,
-        // then we need to adjust the drop position to offset the shadow widget's length.
-        // This is pre-emptive as when the final placement happens, the shadow won't be present.
-        // We do this to factor for different pixel sizes, as if we do not factor this then variable pixel sizes will cause flickering.
-        // NEXT: This doesn't play very nice with 2D flow logic, because it's weird to displace widgets when the one we're moving doesn't fit anyway.
-        const [index, _] = this.#coordinateSystem.findNearestWidgetFrom2D(position[0], position[1]);
-        let position1D = this.#coordinateSystem.to1D(position[0], position[1]);
-        // Hack: find if there's a shadow widget anywhere before the current index
-        for (let i = 0; i < index; i++) {
-            const widget = this.#widgets[i];
-            if (widget.isShadow) {
-                position1D -= this.#coordinateSystem.getWidgetLength(widget);
-                break;
+        // Without a drag snapshot, just return the normalized position directly.
+        if (!this.#dragSnapshot) {
+            return position;
+        }
+        const position1D = this.#coordinateSystem.to1D(position[0], position[1]);
+        // Find the nearest widget to the cursor in the CURRENT (live) grid.
+        let [index, nearestWidget] = this.#coordinateSystem.findNearestWidgetFrom2D(position[0], position[1]);
+        // If the nearest widget is the shadow, look at neighbors and pick the closest non-shadow.
+        if (nearestWidget && nearestWidget.isShadow) {
+            nearestWidget = null;
+            // Check the widget after the shadow first, then before.
+            if (index + 1 < this.#widgets.length && !this.#widgets[index + 1].isShadow) {
+                nearestWidget = this.#widgets[index + 1];
+                index = index + 1;
+            }
+            else if (index - 1 >= 0 && !this.#widgets[index - 1].isShadow) {
+                nearestWidget = this.#widgets[index - 1];
+                index = index - 1;
             }
         }
-        return this.#coordinateSystem.to2D(position1D);
+        // If we couldn't find a non-shadow widget, fall back to the normalized position.
+        if (!nearestWidget) {
+            return position;
+        }
+        // Look up this widget in the snapshot by identity (same object reference).
+        const snapshotEntry = this.#dragSnapshot.widgets.find((s) => s.widget === nearestWidget);
+        if (!snapshotEntry) {
+            return position;
+        }
+        // Determine: is the cursor BEFORE or AFTER the midpoint of this widget in the current grid?
+        const widgetPosition1D = this.#coordinateSystem.to1D(nearestWidget.x, nearestWidget.y);
+        const widgetLength = this.#coordinateSystem.getWidgetLength(nearestWidget);
+        const widgetMidpoint1D = widgetPosition1D + widgetLength / 2;
+        if (position1D < widgetMidpoint1D) {
+            // Cursor is before the widget → return the widget's snapshot position.
+            return [snapshotEntry.x, snapshotEntry.y];
+        }
+        else {
+            // Cursor is at or after the widget → return snapshot position + widget length.
+            const snapshotCoords = this.#coordinateSystem;
+            const snapshotPosition1D = snapshotCoords.to1D(snapshotEntry.x, snapshotEntry.y) +
+                (this.isRowFlow ? snapshotEntry.width : snapshotEntry.height);
+            return snapshotCoords.to2D(snapshotPosition1D);
+        }
     }
     get rows() {
         return this.#state.rows;
@@ -320,8 +389,8 @@ class FlowGridCoordinateSystem {
         }
         return !(!this.#isRowFlow && y !== undefined && y > this.#rows);
     }
-    findPositionToFitWidget(widget, basePosition) {
-        const widgetLength = this.getWidgetLength(widget);
+    findPositionToFitWidget(widget, basePosition, overrideLength) {
+        const widgetLength = overrideLength ?? this.getWidgetLength(widget);
         const crossPosition = this.getCrossAxisCoordinate(basePosition);
         const crossAxisLength = this.getCrossAxisLength();
         if (crossPosition + widgetLength <= crossAxisLength) {
@@ -369,11 +438,11 @@ class FlowGridCoordinateSystem {
             if (Math.ceil(x) == this.#grid.columns && y % 1 > 0.5) {
                 return [0, Math.round(y)];
             }
-            return [Math.round(x), Math.floor(y)];
+            return [Math.min(Math.round(x), this.#grid.columns - 1), Math.floor(y)];
         }
         if (Math.ceil(y) == this.#grid.rows && x % 1 > 0.5) {
             return [Math.round(x), 0];
         }
-        return [Math.floor(x), Math.round(y)];
+        return [Math.floor(x), Math.min(Math.round(y), this.#grid.rows - 1)];
     }
 }

package/dist/system/grid/free-grid.svelte.d.ts

@@ -13,6 +13,7 @@ export declare class FreeFormFlexiGrid extends FlexiGrid {
     constructor(target: InternalFlexiTargetController, targetConfig: FlexiTargetConfiguration);
     tryPlaceWidget(widget: InternalFlexiWidgetController, inputX?: number, inputY?: number, inputWidth?: number, inputHeight?: number, isGrabbedWidget?: boolean): boolean;
     removeWidget(widget: InternalFlexiWidgetController): boolean;
+    applyPackingIfNeeded(): void;
     /**
      * Applies row and column collapsing, if needed.
      */
@@ -29,19 +30,22 @@ export declare class FreeFormFlexiGrid extends FlexiGrid {
     get rows(): number;
     get columns(): number;
     get collapsibility(): FreeGridCollapsibility;
+    get packing(): FreeGridPacking;
     get minRows(): number;
     get minColumns(): number;
     getWidgetsForModification(): InternalFlexiWidgetController[];
 }
 type FreeGridLayout = (InternalFlexiWidgetController | null)[][];
 type FreeGridCollapsibility = 'none' | 'leading' | 'trailing' | 'endings' | 'any';
+type FreeGridPacking = 'none' | 'horizontal' | 'vertical';
 export type FreeFormTargetLayout = {
     type: 'free';
     minRows?: number;
     minColumns?: number;
     maxRows?: number;
     maxColumns?: number;
-    colllapsibility?: FreeGridCollapsibility;
+    collapsibility?: FreeGridCollapsibility;
+    packing?: FreeGridPacking;
 };
 type FreeFormGridSnapshot = {
     layout: FreeGridLayout;
@@ -49,6 +53,6 @@ type FreeFormGridSnapshot = {
     rows: number;
     columns: number;
     widgets: WidgetSnapshot[];
-    needsCollapsing: boolean;
+    needsPostEditOperations: boolean;
 };
 export {};

package/dist/system/grid/free-grid.svelte.js

@@ -16,13 +16,14 @@ export class FreeFormFlexiGrid extends FlexiGrid {
         minRows: this.#rawLayoutConfig?.minRows ?? 1,
         maxColumns: this.#rawLayoutConfig?.maxColumns ?? Infinity,
         maxRows: this.#rawLayoutConfig?.maxRows ?? Infinity,
-        colllapsibility: this.#rawLayoutConfig?.colllapsibility ?? 'any'
+        collapsibility: this.#rawLayoutConfig?.collapsibility ?? 'any',
+        packing: this.#rawLayoutConfig?.packing ?? 'none'
     });
     #rows = $state();
     #columns = $state();
     #coordinateSystem = $state();
     // Track whether collapsing is needed to defer it until operations complete
-    #needsCollapsing = false;
+    #needsPostEditOperations = false;
     constructor(target, targetConfig) {
         super(target, targetConfig);
         this.#targetConfig = targetConfig;
@@ -34,6 +35,9 @@ export class FreeFormFlexiGrid extends FlexiGrid {
     }
     tryPlaceWidget(widget, inputX, inputY, inputWidth, inputHeight, isGrabbedWidget = false) {
         let [x, y, width, height] = this.#normalisePlacementDimensions(inputX, inputY, inputWidth, inputHeight, isGrabbedWidget);
+        // Constrain the width/height of the widget to the min/max values.
+        width = Math.max(widget.minWidth, Math.min(widget.maxWidth, width));
+        height = Math.max(widget.minHeight, Math.min(widget.maxHeight, height));
         // We need to try expand the grid if the widget is moving beyond the current bounds,
         // but if this is not possible then the operation fails.
         if (!this.adjustGridDimensionsToFit(x, y, width, height)) {
@@ -53,6 +57,7 @@ export class FreeFormFlexiGrid extends FlexiGrid {
         this.#coordinateSystem.addWidget(widget, x, y, width, height);
         widget.setBounds(x, y, width, height);
         this.#widgets.add(widget);
+        this.#needsPostEditOperations = true;
         return true;
     }
     #resolveCollisions(move, operations, displaceX = true, displaceY = true) {
@@ -71,7 +76,7 @@ export class FreeFormFlexiGrid extends FlexiGrid {
                 if (!collidingWidget) {
                     continue;
                 }
-                if (!collidingWidget.draggable) {
+                if (!collidingWidget.isMovable) {
                     return false;
                 }
                 // Before relocating the colliding widget, remove it from the coordinate system so it can't collide with itself.
@@ -131,27 +136,34 @@ export class FreeFormFlexiGrid extends FlexiGrid {
         this.#widgets.delete(widget);
         this.#coordinateSystem.removeWidget(widget);
         // Mark that collapsing is needed, but don't apply it immediately
-        this.#needsCollapsing = true;
+        this.#needsPostEditOperations = true;
         return true;
     }
+    applyPackingIfNeeded() {
+        if (!this.#needsPostEditOperations) {
+            return;
+        }
+        this.#coordinateSystem.applyPacking();
+    }
     /**
      * Applies row and column collapsing, if needed.
      */
     applyCollapsingIfNeeded() {
-        if (!this.#needsCollapsing) {
+        if (!this.#needsPostEditOperations) {
             return;
         }
         const newRows = this.#coordinateSystem.applyRowCollapsibility();
         this.#setRows(newRows);
         const newColumns = this.#coordinateSystem.applyColumnCollapsibility();
         this.#setColumns(newColumns);
-        this.#needsCollapsing = false;
     }
     /**
      * Collapse rows and columns if needed.
      */
     applyPostCompletionOperations() {
+        this.applyPackingIfNeeded();
         this.applyCollapsingIfNeeded();
+        this.#needsPostEditOperations = false;
     }
     takeSnapshot() {
         return {
@@ -166,7 +178,7 @@ export class FreeFormFlexiGrid extends FlexiGrid {
                 width: widget.width,
                 height: widget.height
             })),
-            needsCollapsing: this.#needsCollapsing
+            needsPostEditOperations: this.#needsPostEditOperations
         };
     }
     clear() {
@@ -176,7 +188,7 @@ export class FreeFormFlexiGrid extends FlexiGrid {
         this.#rows = this.#layoutConfig.minRows;
         this.#columns = this.#layoutConfig.minColumns;
         this.#coordinateSystem.clear();
-        this.#needsCollapsing = false;
+        this.#needsPostEditOperations = false;
     }
     restoreFromSnapshot(snapshot) {
         // Must deep copy these again, as the snapshot may be re-used.
@@ -192,7 +204,7 @@ export class FreeFormFlexiGrid extends FlexiGrid {
             widget.widget.setBounds(widget.x, widget.y, widget.width, widget.height);
         }
         // Restore the collapsing flag
-        this.#needsCollapsing = snapshot.needsCollapsing;
+        this.#needsPostEditOperations = snapshot.needsPostEditOperations;
     }
     mapRawCellToFinalCell(x, y) {
         return [Math.floor(x), Math.floor(y)];
@@ -260,7 +272,10 @@ export class FreeFormFlexiGrid extends FlexiGrid {
         return this.#columns;
     }
     get collapsibility() {
-        return this.#layoutConfig.colllapsibility;
+        return this.#layoutConfig.collapsibility;
+    }
+    get packing() {
+        return this.#layoutConfig.packing;
     }
     get minRows() {
         return this.#layoutConfig.minRows;
@@ -376,6 +391,95 @@ class FreeFormGridCoordinateSystem {
     #isRowEmpty(row) {
         return this.bitmaps[row] === 0;
     }
+    applyPacking() {
+        if (this.#grid.packing === 'none') {
+            return;
+        }
+        if (this.#grid.packing === 'horizontal') {
+            this.applyHorizontalPacking();
+        }
+        if (this.#grid.packing === 'vertical') {
+            this.applyVerticalPacking();
+        }
+    }
+    applyHorizontalPacking() {
+        // Pack the widgets that are closest to the left first.
+        const sortedWidgets = Array.from(this.#grid.getWidgetsForModification()).toSorted((a, b) => {
+            if (a.x == b.x) {
+                return a.y - b.y;
+            }
+            return a.x - b.x;
+        });
+        for (const widget of sortedWidgets) {
+            // We can already automatically eliminate any widget that's at x = 0.
+            if (widget.x === 0) {
+                continue;
+            }
+            const x = widget.x;
+            const y = widget.y;
+            let minimumAvailableShift = 0;
+            // Compute the best shift to the left we can achieve for this widget.
+            let blocked = false;
+            for (let j = x - 1; j >= 0; j--) {
+                for (let i = y; i < y + widget.height; i++) {
+                    if (this.layout[i][j] !== null) {
+                        blocked = true;
+                        break;
+                    }
+                }
+                if (blocked) {
+                    break;
+                }
+                minimumAvailableShift++;
+            }
+            if (minimumAvailableShift == 0) {
+                continue;
+            }
+            // Remove and re-add the widget so the bitmaps are updated correctly.
+            this.removeWidget(widget);
+            widget.setBounds(widget.x - minimumAvailableShift, widget.y, widget.width, widget.height);
+            this.addWidget(widget, widget.x, widget.y, widget.width, widget.height);
+        }
+    }
+    applyVerticalPacking() {
+        // Pack the widgets that are closest to the top first.
+        const sortedWidgets = Array.from(this.#grid.getWidgetsForModification()).toSorted((a, b) => {
+            if (a.y == b.y) {
+                return a.x - b.x;
+            }
+            return a.y - b.y;
+        });
+        for (const widget of sortedWidgets) {
+            // We can already automatically eliminate any widget that's at y = 0.
+            if (widget.y === 0) {
+                continue;
+            }
+            const x = widget.x;
+            const y = widget.y;
+            let minimumAvailableShift = 0;
+            // Compute the best shift to the top we can achieve for this widget.
+            let blocked = false;
+            for (let i = y - 1; i >= 0; i--) {
+                for (let j = x; j < x + widget.width; j++) {
+                    if (this.layout[i][j] !== null) {
+                        blocked = true;
+                        break;
+                    }
+                }
+                if (blocked) {
+                    break;
+                }
+                minimumAvailableShift++;
+            }
+            if (minimumAvailableShift == 0) {
+                continue;
+            }
+            // Remove and re-add the widget so the bitmaps are updated correctly.
+            this.removeWidget(widget);
+            widget.setBounds(widget.x, widget.y - minimumAvailableShift, widget.width, widget.height);
+            this.addWidget(widget, widget.x, widget.y, widget.width, widget.height);
+        }
+    }
     applyRowCollapsibility() {
         const currentRows = this.#rows;
         const minRows = this.#grid.minRows;
@@ -424,14 +528,22 @@ class FreeFormGridCoordinateSystem {
         rowsToRemove.sort((a, b) => b - a);
         // Remove rows and update widget positions
         for (const rowIndex of rowsToRemove) {
+            // Collect widgets to shift BEFORE modifying arrays
+            const widgetsToShift = this.#grid
+                .getWidgetsForModification()
+                .filter((widget) => widget.y > rowIndex);
+            // Remove widgets from coordinate system BEFORE splicing
+            for (const widget of widgetsToShift) {
+                this.removeWidget(widget);
+            }
+            // Splice the row from layout and bitmaps
             this.layout.splice(rowIndex, 1);
             this.bitmaps.splice(rowIndex, 1);
-            // Update widget positions for all widgets that were below the removed row
-            const widgetsToShift = this.#grid.getWidgetsForModification();
+            // Update widget positions and re-add to coordinate system
             for (const widget of widgetsToShift) {
-                if (widget.y > rowIndex) {
-                    widget.setBounds(widget.x, widget.y - 1, widget.width, widget.height);
-                }
+                const newY = widget.y - 1;
+                widget.setBounds(widget.x, newY, widget.width, widget.height);
+                this.addWidget(widget, widget.x, newY, widget.width, widget.height);
             }
         }
         return newRows;
@@ -484,18 +596,25 @@ class FreeFormGridCoordinateSystem {
         columnsToRemove.sort((a, b) => b - a);
         // Remove columns and update widget positions
         for (const columnIndex of columnsToRemove) {
+            // Collect widgets to shift BEFORE modifying arrays
+            const widgetsToShift = this.#grid
+                .getWidgetsForModification()
+                .filter((widget) => widget.x > columnIndex);
+            // Remove widgets from coordinate system BEFORE splicing
+            for (const widget of widgetsToShift) {
+                this.removeWidget(widget);
+            }
             // Remove the column from the layout
             this.layout.forEach((row) => row.splice(columnIndex, 1));
             // Update bitmaps by removing the column bit and shifting
             for (let rowIndex = 0; rowIndex < this.bitmaps.length; rowIndex++) {
                 this.bitmaps[rowIndex] = this.#removeColumnFromBitmap(this.bitmaps[rowIndex], columnIndex);
             }
-            // Update widget positions for all widgets that were to the right of the removed column
-            const widgetsToShift = this.#grid.getWidgetsForModification();
+            // Update widget positions and re-add to coordinate system
             for (const widget of widgetsToShift) {
-                if (widget.x > columnIndex) {
-                    widget.setBounds(widget.x - 1, widget.y, widget.width, widget.height);
-                }
+                const newX = widget.x - 1;
+                widget.setBounds(newX, widget.y, widget.width, widget.height);
+                this.addWidget(widget, newX, widget.y, widget.width, widget.height);
             }
         }
         return newColumns;

package/dist/system/misc/deleter.svelte.d.ts

@@ -10,8 +10,4 @@ export declare class FlexiDeleteController {
 }
 export declare function flexidelete(): {
     deleter: FlexiDeleteController;
-    /** @deprecated */
-    onpointerenter: () => void;
-    /** @deprecated */
-    onpointerleave: () => void;
 };

package/dist/system/misc/deleter.svelte.js

@@ -39,11 +39,6 @@ export function flexidelete() {
     const provider = getInternalFlexiboardCtx();
     const deleter = new FlexiDeleteController(provider);
     return {
-        deleter,
-        // TODO: remove in v0.4
-        /** @deprecated */
-        onpointerenter: () => { },
-        /** @deprecated */
-        onpointerleave: () => { }
+        deleter
     };
 }

package/dist/system/portal.js

@@ -45,7 +45,6 @@ export class FlexiPortalController {
      */
     moveWidgetToPortal(widget) {
         if (!widget.ref) {
-            console.warn('moveWidgetToPortal() was called on a widget that has no ref. No widget will appear under the pointer.');
             return;
         }
         // Store original position info

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

@@ -0,0 +1,46 @@
+import type { FlexiLayout } from '../board/types.js';
+import type { ResponsiveFlexiLayout } from './types.js';
+/**
+ * Public interface for the ResponsiveFlexiBoard controller.
+ * Manages multiple FlexiBoard layouts across different viewport breakpoints.
+ */
+export interface ResponsiveFlexiBoardController {
+    /**
+     * The currently active breakpoint key.
+     */
+    readonly currentBreakpoint: string;
+    /**
+     * All breakpoint keys that have stored layouts.
+     */
+    readonly definedBreakpoints: string[];
+    /**
+     * All breakpoint keys from configuration.
+     */
+    readonly configuredBreakpoints: string[];
+    /**
+     * Imports layouts for all breakpoints.
+     * @param layout The responsive layout to import.
+     */
+    importLayout(layout: ResponsiveFlexiLayout): void;
+    /**
+     * Exports layouts for all breakpoints.
+     * @returns The complete responsive layout.
+     */
+    exportLayout(): ResponsiveFlexiLayout;
+    /**
+     * Gets the layout for a specific breakpoint.
+     * @param breakpoint The breakpoint key.
+     */
+    getLayoutForBreakpoint(breakpoint: string): FlexiLayout | undefined;
+    /**
+     * Sets the layout for a specific breakpoint.
+     * @param breakpoint The breakpoint key.
+     * @param layout The layout to set.
+     */
+    setLayoutForBreakpoint(breakpoint: string, layout: FlexiLayout): void;
+    /**
+     * Checks if a layout exists for a specific breakpoint.
+     * @param breakpoint The breakpoint key.
+     */
+    hasLayoutForBreakpoint(breakpoint: string): boolean;
+}

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

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