svelte-flexiboards 0.3.2 → 0.4.1

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

@@ -6,8 +6,9 @@ import { WidgetPointerEventWatcher } from './triggers.svelte.js';
 export class InternalFlexiWidgetController extends FlexiWidgetController {
     #pointerService = getPointerService();
     // Grabber and resizer tracking
-    #grabbers = $state(0);
-    #resizers = $state(0);
+    #grabbers = 0;
+    #resizers = 0;
+    #disposed = false;
     // Movement interpolation
     interpolator;
     internalTarget = undefined;
@@ -15,6 +16,16 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
     mounted = $state(false);
     #eventBus;
     #unsubscribers = [];
+    #lastActionType = null;
+    #interpolationAnimationHint = null;
+    #type;
+    #userProvidedId;
+    get type() {
+        return this.#type;
+    }
+    get userProvidedId() {
+        return this.#userProvidedId;
+    }
     /**
      * The styling to apply to the widget.
      */
@@ -38,7 +49,7 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
         if (!this.mounted) {
             return '';
         }
-        if (!this.draggable) {
+        if (!this.isGrabbable) {
             return '';
         }
         if (this.isGrabbed) {
@@ -67,10 +78,42 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
         return `pointer-events: none; user-select: none; cursor: grabbing; position: absolute; top: ${locationOffsetY}px; left: ${locationOffsetX}px; height: ${height}px; width: ${width}px;`;
     }
     #getResizingWidgetStyle(action) {
+        const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+        const parseGap = (value) => {
+            if (!value || value === 'normal') {
+                return 0;
+            }
+            const numeric = Number.parseFloat(value);
+            return Number.isFinite(numeric) ? numeric : 0;
+        };
+        const toPx = (units, unitSize, gapSize) => {
+            if (!Number.isFinite(units)) {
+                return Infinity;
+            }
+            return units * unitSize + Math.max(0, units - 1) * gapSize;
+        };
+        const gridRef = this.internalTarget?.grid?.ref;
+        const gridColumns = this.internalTarget?.columns ?? 0;
+        const gridRows = this.internalTarget?.rows ?? 0;
+        const gridStyle = gridRef && typeof window !== 'undefined' ? window.getComputedStyle(gridRef) : null;
+        const columnGapPx = parseGap(gridStyle?.columnGap);
+        const rowGapPx = parseGap(gridStyle?.rowGap);
         // Calculate size of one grid unit in pixels
-        const unitSizeY = action.capturedHeightPx / action.initialHeightUnits;
+        const fallbackUnitSizeY = (action.capturedHeightPx - Math.max(0, action.initialHeightUnits - 1) * rowGapPx) /
+            action.initialHeightUnits;
         // Guard against division by zero if initial width is somehow 0
-        const unitSizeX = action.initialWidthUnits > 0 ? action.capturedWidthPx / action.initialWidthUnits : 1;
+        const fallbackUnitSizeX = action.initialWidthUnits > 0
+            ? (action.capturedWidthPx - Math.max(0, action.initialWidthUnits - 1) * columnGapPx) /
+                action.initialWidthUnits
+            : 1;
+        const liveUnitSizeX = gridRef && gridColumns > 0
+            ? (gridRef.clientWidth - Math.max(0, gridColumns - 1) * columnGapPx) / gridColumns
+            : NaN;
+        const liveUnitSizeY = gridRef && gridRows > 0
+            ? (gridRef.clientHeight - Math.max(0, gridRows - 1) * rowGapPx) / gridRows
+            : NaN;
+        const unitSizeX = Number.isFinite(liveUnitSizeX) && liveUnitSizeX > 0 ? liveUnitSizeX : fallbackUnitSizeX;
+        const unitSizeY = Number.isFinite(liveUnitSizeY) && liveUnitSizeY > 0 ? liveUnitSizeY : fallbackUnitSizeY;
         const deltaX = this.#pointerService.position.x - action.offsetX - action.left;
         const deltaY = this.#pointerService.position.y - action.offsetY - action.top;
         // For resizing, top and left should remain fixed at their initial positions.
@@ -79,19 +122,31 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
         // Calculate new dimensions based on resizability
         let height = action.capturedHeightPx;
         let width = action.capturedWidthPx;
+        const minWidthPx = toPx(this.minWidth, unitSizeX, columnGapPx);
+        const minHeightPx = toPx(this.minHeight, unitSizeY, rowGapPx);
+        const gridMaxWidthUnits = this.internalTarget && this.internalTarget.columns > 0
+            ? Math.max(1, this.internalTarget.columns - this.x)
+            : Infinity;
+        const gridMaxHeightUnits = this.internalTarget && this.internalTarget.rows > 0
+            ? Math.max(1, this.internalTarget.rows - this.y)
+            : Infinity;
+        const configMaxWidthUnits = Number.isFinite(this.maxWidth) ? this.maxWidth : Infinity;
+        const configMaxHeightUnits = Number.isFinite(this.maxHeight) ? this.maxHeight : Infinity;
+        const maxWidthPx = toPx(Math.min(configMaxWidthUnits, gridMaxWidthUnits), unitSizeX, columnGapPx);
+        const maxHeightPx = toPx(Math.min(configMaxHeightUnits, gridMaxHeightUnits), unitSizeY, rowGapPx);
         switch (this.resizability) {
             case 'horizontal':
                 // NOTE: Use the pre-calculated deltaX here
-                width = Math.max(action.capturedWidthPx + deltaX, unitSizeX);
+                width = clamp(action.capturedWidthPx + deltaX, minWidthPx, maxWidthPx);
                 break;
             case 'vertical':
                 // NOTE: Use the pre-calculated deltaY here
-                height = Math.max(action.capturedHeightPx + deltaY, unitSizeY);
+                height = clamp(action.capturedHeightPx + deltaY, minHeightPx, maxHeightPx);
                 break;
             case 'both':
                 // NOTE: Use the pre-calculated deltaX and deltaY here
-                height = Math.max(action.capturedHeightPx + deltaY, unitSizeY);
-                width = Math.max(action.capturedWidthPx + deltaX, unitSizeX);
+                height = clamp(action.capturedHeightPx + deltaY, minHeightPx, maxHeightPx);
+                width = clamp(action.capturedWidthPx + deltaX, minWidthPx, maxWidthPx);
                 break;
         }
         // Return the style string for the absolutely positioned widget
@@ -113,6 +168,8 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
             this.internalTarget = params.target;
         }
         this.provider = params.provider;
+        this.#type = params.type;
+        this.#userProvidedId = params.config.id;
         // Create the widget's interpolator
         this.interpolator = new WidgetMoveInterpolator(this.provider, this);
         this.#eventBus = getFlexiEventBus();
@@ -128,6 +185,7 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
         if (event.widget !== this) {
             return;
         }
+        this.#lastActionType = 'grab';
         // We probably need to wait for the widget to be portalled before we can acquire its focus.
         setTimeout(() => {
             this.ref?.focus();
@@ -145,6 +203,7 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
         if (event.widget !== this) {
             return;
         }
+        this.#lastActionType = 'resize';
         // We probably need to wait for the widget to be portalled before we can acquire its focus.
         setTimeout(() => {
             this.ref?.focus();
@@ -177,15 +236,26 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
      * @param height The height of the widget.
      */
     setBounds(x, y, width, height, interpolate = true) {
-        if (this.x == x && this.y == y && this.width == width && this.height == height) {
+        const previousDimensions = {
+            width: this.width,
+            height: this.height
+        };
+        const positionUnchanged = this.x == x && this.y == y && this.width == width && this.height == height;
+        if (positionUnchanged) {
+            // Still interpolate for drop animations even when position is unchanged
+            if (interpolate && this.backingState.currentAction?.action === 'grab') {
+                this.#interpolateMove(x, y, this.width, this.height, previousDimensions);
+            }
             return;
         }
+        const constrainedWidth = Math.max(this.minWidth, Math.min(this.maxWidth, width));
+        const constrainedHeight = Math.max(this.minHeight, Math.min(this.maxHeight, height));
         this.backingState.x = x;
         this.backingState.y = y;
-        this.backingState.width = width;
-        this.backingState.height = height;
+        this.backingState.width = constrainedWidth;
+        this.backingState.height = constrainedHeight;
         if (interpolate) {
-            this.#interpolateMove(x, y, width, height);
+            this.#interpolateMove(x, y, constrainedWidth, constrainedHeight, previousDimensions);
         }
     }
     #getMovementAnimation() {
@@ -194,11 +264,19 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
                 return 'drop';
             case 'resize':
                 return 'resize';
-            default:
-                return 'move';
         }
+        // If action state has already been released but this update is part of a drop placement,
+        // preserve the last interaction animation type for interpolation.
+        if (this.backingState.isBeingDropped) {
+            return this.#lastActionType === 'resize' ? 'resize' : 'drop';
+        }
+        // Shadow/dropzone widgets can hint the desired interpolation mode even without an action state.
+        if (this.#interpolationAnimationHint) {
+            return this.#interpolationAnimationHint;
+        }
+        return 'move';
     }
-    #interpolateMove(x, y, width, height) {
+    #interpolateMove(x, y, width, height, previousDimensions) {
         const rect = this.ref?.getBoundingClientRect();
         if (!rect || !this.interpolator) {
             return;
@@ -213,7 +291,7 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
             top: rect.top,
             width: rect.width,
             height: rect.height
-        }, this.#getMovementAnimation());
+        }, this.#getMovementAnimation(), previousDimensions);
         this.backingState.isBeingDropped = false;
     }
     /**
@@ -228,6 +306,9 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
      * Unregisters a grabber from the widget.
      */
     removeGrabber() {
+        if (this.#disposed) {
+            return 0;
+        }
         this.#grabbers--;
         this.backingState.hasGrabbers = this.#grabbers > 0;
         return this.#grabbers;
@@ -244,6 +325,9 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
      * Unregisters a resizer from the widget.
      */
     removeResizer() {
+        if (this.#disposed) {
+            return 0;
+        }
         this.#resizers--;
         this.backingState.hasResizers = this.#resizers > 0;
         return this.#resizers;
@@ -299,6 +383,8 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
      * Cleanup method to be called when the widget is destroyed
      */
     destroy() {
+        // Mark as disposed to ignore any deferred cleanup callbacks
+        this.#disposed = true;
         // Reset counters
         this.#grabbers = 0;
         this.#resizers = 0;
@@ -312,4 +398,7 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
     get shouldDrawPlaceholder() {
         return this.interpolator?.active ?? false;
     }
+    set interpolationAnimationHint(value) {
+        this.#interpolationAnimationHint = value;
+    }
 }

package/dist/system/widget/events.js

@@ -30,6 +30,8 @@ export function widgetGrabberEvents(widget) {
     const grabWatcher = new WidgetPointerEventWatcher(widget, 'grab');
     return {
         onpointerdown: (event) => {
+            // Don't propagate to parent widget, preventing double-grab dispatch
+            event.stopPropagation();
             // Use the trigger watcher which respects trigger configuration (immediate vs long press)
             grabWatcher.onstartpointerdown(event);
         },
@@ -40,12 +42,17 @@ export function widgetResizerEvents(widget) {
     const eventBus = getFlexiEventBusCtx();
     const board = getInternalFlexiboardCtx();
     const resizeWatcher = new WidgetPointerEventWatcher(widget, 'resize');
+    // Don't propagate events upwards, so that it never also triggers a grab action.
     return {
         onpointerdown: (event) => {
+            event.stopPropagation();
             // Invoke the trigger watcher which respects trigger configuration (immediate vs long press).
             resizeWatcher.onstartpointerdown(event);
         },
-        onkeydown: (event) => dispatchKeyDownResize(eventBus, widget, board, event)
+        onkeydown: (event) => {
+            event.stopPropagation();
+            dispatchKeyDownResize(eventBus, widget, board, event);
+        }
     };
 }
 /**
@@ -55,7 +62,7 @@ export function widgetResizerEvents(widget) {
  * @param event The keyboard event.
  */
 function dispatchKeyDownGrab(eventBus, widget, board, event) {
-    if (!widget.draggable || !widget.ref || event.key !== 'Enter') {
+    if (!widget.isGrabbable || !widget.ref || event.key !== 'Enter') {
         return;
     }
     // If an action is already active, do not intercept Enter.
@@ -80,7 +87,7 @@ function dispatchKeyDownGrab(eventBus, widget, board, event) {
  * @param clientY The y-coordinate of the pointer event.
  */
 function dispatchGrab(eventBus, widget, board, { clientX, clientY }) {
-    if (!widget.draggable || !widget.ref) {
+    if (!widget.isGrabbable || !widget.ref) {
         return;
     }
     const rect = widget.ref?.getBoundingClientRect();

package/dist/system/widget/interpolation-utils.d.ts

@@ -0,0 +1,14 @@
+export type InterpolationAnimation = 'move' | 'drop' | 'resize';
+export type InterpolationSize = {
+    width: number;
+    height: number;
+};
+export type PlaceholderMinDimensionLocks = {
+    lockMinWidth: boolean;
+    lockMinHeight: boolean;
+};
+/**
+ * Keep min dimensions by default so auto-sized tracks remain stable while the placeholder is hidden.
+ * During resize, only unlock min dimensions on axes that actually changed.
+ */
+export declare function getPlaceholderMinDimensionLocks(animation: InterpolationAnimation, newSize: InterpolationSize, previousSize?: InterpolationSize): PlaceholderMinDimensionLocks;

package/dist/system/widget/interpolation-utils.js

@@ -0,0 +1,32 @@
+/**
+ * Keep min dimensions by default so auto-sized tracks remain stable while the placeholder is hidden.
+ * During resize, only unlock min dimensions on axes that actually changed.
+ */
+export function getPlaceholderMinDimensionLocks(animation, newSize, previousSize) {
+    if (animation !== 'resize') {
+        return {
+            lockMinWidth: true,
+            lockMinHeight: true
+        };
+    }
+    if (!previousSize) {
+        // Fallback for legacy call sites: unlock both so shrinking resize animations still work.
+        return {
+            lockMinWidth: false,
+            lockMinHeight: false
+        };
+    }
+    const widthChanged = newSize.width !== previousSize.width;
+    const heightChanged = newSize.height !== previousSize.height;
+    // Nothing resized (e.g. clamped), keep both mins in place.
+    if (!widthChanged && !heightChanged) {
+        return {
+            lockMinWidth: true,
+            lockMinHeight: true
+        };
+    }
+    return {
+        lockMinWidth: !widthChanged,
+        lockMinHeight: !heightChanged
+    };
+}

package/dist/system/widget/interpolator.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { InternalFlexiBoardController } from '../board/controller.svelte.js';
 import type { Position } from '../types.js';
 import type { FlexiWidgetController } from './base.svelte.js';
+import { type InterpolationSize } from './interpolation-utils.js';
 export declare class WidgetMoveInterpolator {
     #private;
     active: boolean;
@@ -8,7 +9,7 @@ export declare class WidgetMoveInterpolator {
     widgetStyle: string;
     placeholderStyle: string;
     constructor(provider: InternalFlexiBoardController, widget: FlexiWidgetController);
-    interpolateMove(newDimensions: Dimensions, oldPosition: InterpolationPosition, animation?: WidgetMovementAnimation): void;
+    interpolateMove(newDimensions: Dimensions, oldPosition: InterpolationPosition, animation?: WidgetMovementAnimation, previousDimensions?: InterpolationSize): void;
     onPlaceholderMove(rect: DOMRect): void;
     onPlaceholderMount(ref: HTMLElement): () => void;
     onPlaceholderUnmount(): void;

package/dist/system/widget/interpolator.svelte.js

@@ -1,4 +1,4 @@
-import { onMount } from 'svelte';
+import { getPlaceholderMinDimensionLocks } from './interpolation-utils.js';
 export class WidgetMoveInterpolator {
     active = $state(false);
     #timeout;
@@ -12,7 +12,9 @@ export class WidgetMoveInterpolator {
         width: 1,
         height: 1,
         heightPx: 0,
-        widthPx: 0
+        widthPx: 0,
+        lockMinWidth: true,
+        lockMinHeight: true
     });
     #interpolatedWidgetPosition = $state({
         left: 0,
@@ -32,7 +34,13 @@ export class WidgetMoveInterpolator {
         return `transition: all ${transitionConfig.duration}ms ${transitionConfig.easing}; position: absolute; top: ${this.#interpolatedWidgetPosition.top}px; left: ${this.#interpolatedWidgetPosition.left}px; width: ${this.#interpolatedWidgetPosition.width}px; height: ${this.#interpolatedWidgetPosition.height}px;`;
     });
     placeholderStyle = $derived.by(() => {
-        return `grid-column: ${this.#placeholderPosition.x + 1} / span ${this.#placeholderPosition.width}; grid-row: ${this.#placeholderPosition.y + 1} / span ${this.#placeholderPosition.height}; visibility: hidden;`;
+        const minHeight = this.#placeholderPosition.lockMinHeight
+            ? ` min-height: ${this.#placeholderPosition.heightPx}px;`
+            : '';
+        const minWidth = this.#placeholderPosition.lockMinWidth
+            ? ` min-width: ${this.#placeholderPosition.widthPx}px;`
+            : '';
+        return `grid-column: ${this.#placeholderPosition.x + 1} / span ${this.#placeholderPosition.width}; grid-row: ${this.#placeholderPosition.y + 1} / span ${this.#placeholderPosition.height};${minHeight}${minWidth} visibility: hidden;`;
     });
     constructor(provider, widget) {
         this.#provider = provider;
@@ -40,7 +48,13 @@ export class WidgetMoveInterpolator {
         this.onPlaceholderMount = this.onPlaceholderMount.bind(this);
         this.onPlaceholderUnmount = this.onPlaceholderUnmount.bind(this);
     }
-    interpolateMove(newDimensions, oldPosition, animation = 'move') {
+    #notifyStart() {
+        this.#provider?.notifyInterpolationStarted();
+    }
+    #notifyEnd() {
+        this.#provider?.notifyInterpolationEnded();
+    }
+    interpolateMove(newDimensions, oldPosition, animation = 'move', previousDimensions) {
         const containerRect = this.#containerRef?.getBoundingClientRect();
         if (!containerRect) {
             return;
@@ -50,29 +64,56 @@ export class WidgetMoveInterpolator {
         if (!transitionConfig || !transitionConfig.duration || !transitionConfig.easing) {
             return;
         }
-        if (this.active) {
-            clearTimeout(this.#timeout);
-        }
-        this.active = true;
-        this.#animation = animation;
-        this.#placeholderPosition = {
-            x: newDimensions.x,
-            y: newDimensions.y,
+        const minDimensionLocks = getPlaceholderMinDimensionLocks(animation, {
             width: newDimensions.width,
-            height: newDimensions.height,
-            heightPx: oldPosition.height,
-            widthPx: oldPosition.width
-        };
-        this.#interpolatedWidgetPosition.top =
-            oldPosition.top - containerRect.top + (this.#containerRef?.scrollTop ?? 0);
-        this.#interpolatedWidgetPosition.left =
-            oldPosition.left - containerRect.left + (this.#containerRef?.scrollLeft ?? 0);
-        this.#interpolatedWidgetPosition.width = oldPosition.width;
-        this.#interpolatedWidgetPosition.height = oldPosition.height;
+            height: newDimensions.height
+        }, previousDimensions);
+        const isInterruption = this.active;
+        clearTimeout(this.#timeout);
+        if (isInterruption) {
+            // INTERRUPTION PATH - only update target, keep transition flowing
+            // Don't change #animation to preserve CSS transition property
+            // Don't reset #interpolatedWidgetPosition
+            this.#placeholderPosition = {
+                x: newDimensions.x,
+                y: newDimensions.y,
+                width: newDimensions.width,
+                height: newDimensions.height,
+                heightPx: this.#interpolatedWidgetPosition.height,
+                widthPx: this.#interpolatedWidgetPosition.width,
+                lockMinWidth: minDimensionLocks.lockMinWidth,
+                lockMinHeight: minDimensionLocks.lockMinHeight
+            };
+        }
+        else {
+            // INITIAL MOVE PATH - set up starting position, then animate
+            this.#inInitialFrame = true; // Disable CSS transition for initial position
+            this.active = true;
+            this.#animation = animation;
+            this.#notifyStart();
+            this.#placeholderPosition = {
+                x: newDimensions.x,
+                y: newDimensions.y,
+                width: newDimensions.width,
+                height: newDimensions.height,
+                heightPx: oldPosition.height,
+                widthPx: oldPosition.width,
+                lockMinWidth: minDimensionLocks.lockMinWidth,
+                lockMinHeight: minDimensionLocks.lockMinHeight
+            };
+            this.#interpolatedWidgetPosition.top =
+                oldPosition.top - containerRect.top + (this.#containerRef?.scrollTop ?? 0);
+            this.#interpolatedWidgetPosition.left =
+                oldPosition.left - containerRect.left + (this.#containerRef?.scrollLeft ?? 0);
+            this.#interpolatedWidgetPosition.width = oldPosition.width;
+            this.#interpolatedWidgetPosition.height = oldPosition.height;
+        }
+        // Reset timeout for both paths
         requestAnimationFrame(() => {
             this.#timeout = setTimeout(() => {
                 this.active = false;
                 this.#animation = 'move';
+                this.#notifyEnd();
             }, transitionConfig.duration);
         });
     }

package/dist/system/widget/triggers.svelte.js

@@ -112,7 +112,7 @@ export class WidgetPointerEventWatcher {
             });
             return;
         }
-        if (!this.#widget.draggable) {
+        if (!this.#widget.isGrabbable) {
             return;
         }
         this.#eventBus.dispatch('widget:grabbed', {

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

@@ -2,7 +2,7 @@ import type { ClassValue } from 'svelte/elements';
 import type { FlexiWidgetController } from './base.svelte.js';
 import type { Component, Snippet } from 'svelte';
 import { type PointerTriggerCondition } from './triggers.svelte.js';
-import type { WidgetAction, WidgetResizability } from '../types.js';
+import type { WidgetAction, WidgetDraggability, WidgetResizability } from '../types.js';
 import type { InternalFlexiTargetController } from '../target/controller.svelte.js';
 import type { InternalFlexiBoardController } from '../board/controller.svelte.js';
 export type FlexiWidgetChildrenSnippetParameters = {
@@ -24,18 +24,25 @@ export type FlexiWidgetTriggerConfiguration = Record<string, PointerTriggerCondi
 export type FlexiWidgetDefaults = {
     /**
      * Whether the widget is draggable.
+     * @deprecated Prefer the use of `draggability` instead for finer control. When `true`, `draggability = 'full'`, when `false`, `draggability = 'none'`.
      */
     draggable?: boolean;
+    /**
+     * The draggability of the widget.
+     */
+    draggability?: WidgetDraggability;
     /**
      * The resizability of the widget.
      */
     resizability?: WidgetResizability;
     /**
      * The width of the widget in units.
+     * @deprecated This property does not work and will be removed in the next version.
      */
     width?: number;
     /**
      * The height of the widget in units.
+     * @deprecated This property does not work and will be removed in the next version.
      */
     height?: number;
     /**
@@ -68,10 +75,30 @@ export type FlexiWidgetDefaults = {
      * on the widget. E.g. a long press.
      */
     resizeTrigger?: FlexiWidgetTriggerConfiguration;
+    /**
+     * The minimum width of the widget in units. Defaults to 1, cannot be less than 1.
+     */
+    minWidth?: number;
+    /**
+     * The minimum height of the widget in units. Defaults to 1, cannot be less than 1.
+     */
+    minHeight?: number;
+    /**
+     * The maximum width of the widget in units. Defaults to Infinity, cannot be less than 1.
+     */
+    maxWidth?: number;
+    /**
+     * The maximum height of the widget in units. Defaults to Infinity, cannot be less than 1.
+     */
+    maxHeight?: number;
 };
 export type FlexiWidgetConfiguration = FlexiWidgetDefaults & {
+    id?: string;
+    type?: string;
     x?: number;
     y?: number;
+    width?: number;
+    height?: number;
     metadata?: Record<string, any>;
 };
 export type FlexiWidgetState = {
@@ -82,10 +109,6 @@ export type FlexiWidgetState = {
     y: number;
 };
 export type FlexiWidgetDerivedConfiguration = {
-    /**
-     * The name of the widget, which can be used to identify it in exported layouts.
-     */
-    name?: string;
     /**
      * The component that is rendered by this item. This is optional if a snippet is provided.
      */
@@ -103,9 +126,14 @@ export type FlexiWidgetDerivedConfiguration = {
      */
     resizability: WidgetResizability;
     /**
-     * Whether the item is draggable.
+     * Whether the widget is draggable.
+     * @deprecated Prefer the use of `draggability` instead for finer control. When `true`, `draggability = 'full'`, when `false`, `draggability = 'none'`.
      */
     draggable: boolean;
+    /**
+     * The draggability of the widget.
+     */
+    draggability: WidgetDraggability;
     /**
      * The class name that is applied to this widget.
      */
@@ -128,11 +156,28 @@ export type FlexiWidgetDerivedConfiguration = {
      * The transition configuration for this widget.
      */
     transition: FlexiWidgetTransitionConfiguration;
+    /**
+     * The minimum width of the widget in units. Defaults to 1, cannot be less than 1.
+     */
+    minWidth: number;
+    /**
+     * The minimum height of the widget in units. Defaults to 1, cannot be less than 1.
+     */
+    minHeight: number;
+    /**
+     * The maximum width of the widget in units. Defaults to Infinity, cannot be less than 1.
+     */
+    maxWidth: number;
+    /**
+     * The maximum height of the widget in units. Defaults to Infinity, cannot be less than 1.
+     */
+    maxHeight: number;
 };
 export type FlexiWidgetConstructorParams = {
     config: FlexiWidgetConfiguration;
     provider: InternalFlexiBoardController;
     target?: InternalFlexiTargetController;
+    type?: string;
     isShadow?: boolean;
 };
 export declare const defaultTriggerConfig: FlexiWidgetTriggerConfiguration;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "svelte-flexiboards",
 	"licence": "MIT",
-	"version": "0.3.2",
+	"version": "0.4.1",
 	"description": "The headless drag-and-drop toolkit for Svelte.",
 	"scripts": {
 		"dev": "pnpm watch",