svelte-flexiboards 0.3.0 → 0.3.2-alpha.0

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

@@ -26,6 +26,7 @@ export class InternalFlexiTargetController {
         value: null
     });
     #isDropzoneWidgetAdded = $state(false);
+    #dropzoneWidgetEffectCleanup = null;
     #mouseCellPosition = $state({
         x: 0,
         y: 0
@@ -100,11 +101,7 @@ export class InternalFlexiTargetController {
             this.#updateOrderedWidgets();
             widget.target = this;
             widget.internalTarget = this;
-            // Ensure reactive state is created immediately for proper grid integration
-            // This is especially important for adder widgets that weren't created via target.createWidget()
-            if (!widget.interpolator) {
-                widget.createReactiveState();
-            }
+            // Widget is now fully reactive by default - no additional setup needed
         }
         return added;
     }
@@ -388,7 +385,12 @@ export class InternalFlexiTargetController {
         const grid = this.grid;
         // Take a snapshot of the grid so we can restore its state if the hover stops.
         this.#gridSnapshot = grid.takeSnapshot();
-        this.dropzoneWidget = this.#createShadow(this.actionWidget.widget);
+        // Wrap only the widget creation in $effect.root to ensure proper reactivity context
+        let shadowWidget;
+        this.#dropzoneWidgetEffectCleanup = $effect.root(() => {
+            shadowWidget = this.#createShadow(this.actionWidget.widget);
+        });
+        this.dropzoneWidget = shadowWidget;
         let [x, y, width, height] = this.#getDropzoneLocation(this.actionWidget);
         const added = this.grid.tryPlaceWidget(this.dropzoneWidget, x, y, width, height, true);
         if (added) {
@@ -478,6 +480,11 @@ export class InternalFlexiTargetController {
         }
         grid.restoreFromSnapshot(this.#gridSnapshot);
         this.#gridSnapshot = null;
+        // Cleanup the effect root
+        if (this.#dropzoneWidgetEffectCleanup) {
+            this.#dropzoneWidgetEffectCleanup();
+            this.#dropzoneWidgetEffectCleanup = null;
+        }
         this.dropzoneWidget = null;
     }
     // State-related getters and setters
@@ -553,6 +560,11 @@ export class InternalFlexiTargetController {
             }
         });
         this.widgets.clear();
+        // Clean up dropzone widget effect
+        if (this.#dropzoneWidgetEffectCleanup) {
+            this.#dropzoneWidgetEffectCleanup();
+            this.#dropzoneWidgetEffectCleanup = null;
+        }
         // Clean up event subscriptions
         this.#unsubscribers.forEach((unsubscribe) => unsubscribe());
         this.#unsubscribers = [];

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

@@ -2,8 +2,7 @@ import type { Component } from 'svelte';
 import type { FlexiTargetController } from '../target/index.js';
 import type { WidgetAction, WidgetResizability } from '../types.js';
 import { type FlexiWidgetChildrenSnippet, type FlexiWidgetClasses, type FlexiWidgetConstructorParams } from './types.js';
-import type { WidgetReactiveState } from './state.svelte.js';
-export declare class FlexiWidgetController {
+export declare abstract class FlexiWidgetController {
     #private;
     /**
      * The target this widget is under. This is not defined if the widget has not yet been dropped in the board.
@@ -16,24 +15,24 @@ export declare class FlexiWidgetController {
     /**
      * Whether this widget is a shadow dropzone widget.
      */
-    isShadow: boolean;
+    abstract get isShadow(): boolean;
+    abstract get currentAction(): WidgetAction | null;
+    abstract get width(): number;
+    abstract get height(): number;
+    abstract get x(): number;
+    abstract get y(): number;
+    abstract get isBeingDropped(): boolean;
+    abstract get hasGrabbers(): boolean;
+    abstract get hasResizers(): boolean;
     /**
      * Whether this widget is grabbed.
      */
-    isGrabbed: boolean;
+    abstract get isGrabbed(): boolean;
     /**
      * Whether this widget is being resized.
      */
-    isResizing: boolean;
-    protected reactiveState?: WidgetReactiveState;
-    backingState: WidgetStateData;
-    constructor(state: WidgetStateData, params: FlexiWidgetConstructorParams);
-    /**
-     * When the widget is being grabbed, this contains information that includes its position, size and offset.
-     * When this is null, the widget is not being grabbed.
-     */
-    get currentAction(): WidgetAction | null;
-    set currentAction(value: WidgetAction | null);
+    abstract get isResizing(): boolean;
+    constructor(params: FlexiWidgetConstructorParams);
     /**
      * Whether the widget is draggable.
      */
@@ -48,14 +47,6 @@ export declare class FlexiWidgetController {
      * Whether the widget is resizable.
      */
     get resizable(): boolean;
-    /**
-     * The width in units of the widget.
-     */
-    get width(): number;
-    /**
-     * The height in units of the widget.
-     */
-    get height(): number;
     /**
      * The component that is rendered by this widget.
      */
@@ -76,14 +67,6 @@ export declare class FlexiWidgetController {
      */
     get className(): FlexiWidgetClasses | undefined;
     set className(value: FlexiWidgetClasses | undefined);
-    /**
-     * Gets the column (x-coordinate) of the widget. This value is readonly and is managed by the target.
-     */
-    get x(): number;
-    /**
-     * Gets the row (y-coordinate) of the widget. This value is readonly and is managed by the target.
-     */
-    get y(): number;
     /**
      * The metadata associated with this widget, if any.
      */
@@ -102,18 +85,6 @@ export declare class FlexiWidgetController {
      * Gets the transition configuration for this widget.
      */
     get transitionConfig(): import("./types.js").FlexiWidgetTransitionConfiguration;
-    /**
-     * Whether the widget has any grabbers attached.
-     */
-    get hasGrabbers(): boolean;
-    /**
-     * Whether the widget has any resizers attached
-     */
-    get hasResizers(): boolean;
-    /**
-     * Whether the widget is currently being dropped after a drag operation.
-     */
-    get isBeingDropped(): boolean;
 }
 export type WidgetStateData = {
     currentAction: WidgetAction | null;

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

@@ -13,18 +13,6 @@ export class FlexiWidgetController {
     #providerWidgetDefaults = $derived(this.target?.providerWidgetDefaults);
     #targetWidgetDefaults = $derived(this.target?.config.widgetDefaults);
     #rawConfig = $state();
-    /**
-     * Whether this widget is a shadow dropzone widget.
-     */
-    isShadow = $state(false);
-    /**
-     * Whether this widget is grabbed.
-     */
-    isGrabbed = $derived(this.currentAction?.action == 'grab');
-    /**
-     * Whether this widget is being resized.
-     */
-    isResizing = $derived(this.currentAction?.action == 'resize');
     /**
      * The reactive configuration of the widget. When these properties are changed, either due to a change in the widget's configuration,
      * or a change in the target's, or the board's, they will be updated to reflect the new values.
@@ -64,33 +52,13 @@ export class FlexiWidgetController {
             this.#providerWidgetDefaults?.resizeTrigger ??
             defaultTriggerConfig
     });
-    reactiveState;
-    backingState;
-    constructor(state, params) {
-        this.backingState = state;
+    constructor(params) {
         this.#rawConfig = params.config;
         if (params.target) {
             this.target = params.target;
-            this.isShadow = params.isShadow ?? false;
         }
     }
     // Getters and setters
-    /**
-     * When the widget is being grabbed, this contains information that includes its position, size and offset.
-     * When this is null, the widget is not being grabbed.
-     */
-    get currentAction() {
-        if (this.reactiveState) {
-            return this.reactiveState.currentAction;
-        }
-        return this.backingState.currentAction;
-    }
-    set currentAction(value) {
-        if (this.reactiveState) {
-            this.reactiveState.currentAction = value;
-        }
-        this.backingState.currentAction = value;
-    }
     /**
      * Whether the widget is draggable.
      */
@@ -115,24 +83,6 @@ export class FlexiWidgetController {
     get resizable() {
         return this.resizability !== 'none';
     }
-    /**
-     * The width in units of the widget.
-     */
-    get width() {
-        if (this.reactiveState) {
-            return this.reactiveState.width;
-        }
-        return this.backingState.width;
-    }
-    /**
-     * The height in units of the widget.
-     */
-    get height() {
-        if (this.reactiveState) {
-            return this.reactiveState.height;
-        }
-        return this.backingState.height;
-    }
     /**
      * The component that is rendered by this widget.
      */
@@ -169,24 +119,6 @@ export class FlexiWidgetController {
     set className(value) {
         this.#rawConfig.className = value;
     }
-    /**
-     * Gets the column (x-coordinate) of the widget. This value is readonly and is managed by the target.
-     */
-    get x() {
-        if (this.reactiveState) {
-            return this.reactiveState.x;
-        }
-        return this.backingState.x;
-    }
-    /**
-     * Gets the row (y-coordinate) of the widget. This value is readonly and is managed by the target.
-     */
-    get y() {
-        if (this.reactiveState) {
-            return this.reactiveState.y;
-        }
-        return this.backingState.y;
-    }
     /**
      * The metadata associated with this widget, if any.
      */
@@ -215,31 +147,4 @@ export class FlexiWidgetController {
     get transitionConfig() {
         return this.#config.transition;
     }
-    /**
-     * Whether the widget has any grabbers attached.
-     */
-    get hasGrabbers() {
-        if (this.reactiveState) {
-            return this.reactiveState.hasGrabbers;
-        }
-        return this.backingState.hasGrabbers;
-    }
-    /**
-     * Whether the widget has any resizers attached
-     */
-    get hasResizers() {
-        if (this.reactiveState) {
-            return this.reactiveState.hasResizers;
-        }
-        return this.backingState.hasResizers;
-    }
-    /**
-     * Whether the widget is currently being dropped after a drag operation.
-     */
-    get isBeingDropped() {
-        if (this.reactiveState) {
-            return this.reactiveState.isBeingDropped;
-        }
-        return this.backingState.isBeingDropped;
-    }
 }

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

@@ -1,12 +1,14 @@
-import type { WidgetDroppedEvent, WidgetEvent, WidgetGrabbedEvent, WidgetResizingEvent } from '../types.js';
+import type { WidgetAction, WidgetDroppedEvent, WidgetEvent, WidgetGrabbedEvent, WidgetResizingEvent } from '../types.js';
 import { FlexiWidgetController } from './base.svelte.js';
 import type { InternalFlexiTargetController } from '../target/controller.svelte.js';
+import { WidgetMoveInterpolator } from './interpolator.svelte.js';
 import type { FlexiWidgetConstructorParams } from './types.js';
 import type { InternalFlexiBoardController } from '../board/controller.svelte.js';
 export declare class InternalFlexiWidgetController extends FlexiWidgetController {
     #private;
     internalTarget?: InternalFlexiTargetController;
     provider: InternalFlexiBoardController;
+    interpolator: WidgetMoveInterpolator;
     mounted: boolean;
     /**
      * The styling to apply to the widget.
@@ -39,47 +41,25 @@ export declare class InternalFlexiWidgetController extends FlexiWidgetController
      */
     delete(): void;
     onDelete(event: WidgetEvent): void;
-    /**
-     * Creates the reactive state container when the widget component mounts.
-     * This should be called from the component's onMount lifecycle.
-     */
-    createReactiveState(): void;
     /**
      * Cleanup method to be called when the widget is destroyed
      */
     destroy(): void;
-    /**
-     * Destroys the reactive state container when the widget component unmounts.
-     * This should be called from the component's onDestroy lifecycle.
-     */
-    destroyReactiveState(): void;
-    /**
-     * The width in units of the widget.
-     */
+    get currentAction(): WidgetAction | null;
     get width(): number;
-    /**
-     * The height in units of the widget.
-     */
     get height(): number;
-    set width(value: number);
-    set height(value: number);
-    /**
-     * Gets the column (x-coordinate) of the widget. This value is readonly and is managed by the target.
-     */
     get x(): number;
-    /**
-     * Gets the row (y-coordinate) of the widget. This value is readonly and is managed by the target.
-     */
     get y(): number;
-    set x(value: number);
-    set y(value: number);
-    /**
-     * Gets the widget's interpolator for transitions.
-     */
-    get interpolator(): import("./interpolator.svelte.js").WidgetMoveInterpolator | undefined;
+    get isBeingDropped(): boolean;
+    get hasGrabbers(): boolean;
+    get hasResizers(): boolean;
+    get isShadow(): boolean;
+    get isGrabbed(): boolean;
+    get isResizing(): boolean;
+    set currentAction(value: WidgetAction | null);
+    set isBeingDropped(value: boolean);
     /**
      * Whether the widget should draw a placeholder widget in the DOM.
      */
     get shouldDrawPlaceholder(): boolean;
-    set isBeingDropped(value: boolean);
 }

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

@@ -1,19 +1,28 @@
 import { getFlexiEventBus } from '../shared/event-bus.js';
 import { generateUniqueId, getElementMidpoint, getPointerService } from '../shared/utils.svelte.js';
 import { FlexiWidgetController } from './base.svelte.js';
-import {} from './interpolator.svelte.js';
+import { WidgetMoveInterpolator } from './interpolator.svelte.js';
 import { WidgetPointerEventWatcher } from './triggers.svelte.js';
-import { WidgetReactiveState } from './state.svelte.js';
 export class InternalFlexiWidgetController extends FlexiWidgetController {
     #pointerService = getPointerService();
-    // Legacy non-reactive state tracking (for when reactive state is not available)
-    #grabbersCount = 0;
-    #resizersCount = 0;
     internalTarget = undefined;
     provider;
-    // hasGrabbers and hasResizers are now implemented in the base class
-    // TODO: the "state-subclass" system is quite hacky, and isn't really achieving what we want right now anyway.
+    // Private reactive state properties
+    #currentAction = $state(null);
+    #width = $state(1);
+    #height = $state(1);
+    #x = $state(0);
+    #y = $state(0);
+    #isBeingDropped = $state(false);
+    #hasGrabbers = $state(false);
+    #hasResizers = $state(false);
+    #isShadow = $state(false);
+    // Movement interpolation
+    interpolator;
     mounted = $state(false);
+    // Grabber and resizer tracking
+    #grabbersCount = 0;
+    #resizersCount = 0;
     #eventBus;
     #unsubscribers = [];
     /**
@@ -48,7 +57,7 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
         if (this.isResizing) {
             return 'pointer-events: none; user-select: none; cursor: nwse-resize;';
         }
-        const grabberCount = this.reactiveState?.grabberCount ?? this.#grabbersCount;
+        const grabberCount = this.#grabbersCount;
         if (grabberCount == 0) {
             return 'user-select: none; cursor: grab; touch-action: none;';
         }
@@ -100,21 +109,18 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
         return `pointer-events: none; user-select: none; cursor: nwse-resize; position: absolute; top: ${top}px; left: ${left}px; height: ${height}px; width: ${width}px;`;
     }
     constructor(params) {
-        // Initialise the state proxy.
-        super({
-            currentAction: null,
-            width: params.config.width ?? 1,
-            height: params.config.height ?? 1,
-            x: 0,
-            y: 0,
-            hasGrabbers: false,
-            hasResizers: false,
-            isBeingDropped: false
-        }, params);
+        // Initialize base class
+        super(params);
+        // Initialize private state with config values
+        this.#width = params.config.width ?? 1;
+        this.#height = params.config.height ?? 1;
         if (params.target) {
             this.internalTarget = params.target;
+            this.#isShadow = params.isShadow ?? false;
         }
         this.provider = params.provider;
+        // Create the widget's interpolator.
+        this.interpolator = new WidgetMoveInterpolator(params.provider, this);
         this.#eventBus = getFlexiEventBus();
         this.#unsubscribers.push(this.#eventBus.subscribe('widget:grabbed', this.onGrabbed.bind(this)), this.#eventBus.subscribe('widget:resizing', this.onResizing.bind(this)), this.#eventBus.subscribe('widget:release', this.onReleased.bind(this)), this.#eventBus.subscribe('widget:cancel', this.onReleased.bind(this)), this.#eventBus.subscribe('widget:delete', this.onDelete.bind(this)), this.#eventBus.subscribe('widget:dropped', this.onDropped.bind(this)));
     }
@@ -132,7 +138,7 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
         setTimeout(() => {
             this.ref?.focus();
         }, 0);
-        this.currentAction = {
+        this.#currentAction = {
             action: 'grab',
             widget: this,
             offsetX: event.xOffset,
@@ -149,7 +155,7 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
         setTimeout(() => {
             this.ref?.focus();
         }, 0);
-        this.currentAction = {
+        this.#currentAction = {
             action: 'resize',
             widget: this,
             offsetX: event.offsetX,
@@ -166,7 +172,7 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
         if (event.widget !== this) {
             return;
         }
-        this.currentAction = null;
+        this.#currentAction = null;
     }
     /**
      * Sets the bounds of the widget.
@@ -180,10 +186,10 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
         if (this.x == x && this.y == y && this.width == width && this.height == height) {
             return;
         }
-        this.x = x;
-        this.y = y;
-        this.width = width;
-        this.height = height;
+        this.#x = x;
+        this.#y = y;
+        this.#width = width;
+        this.#height = height;
         if (interpolate) {
             this.#interpolateMove(x, y, width, height);
         }
@@ -214,55 +220,35 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
             width: rect.width,
             height: rect.height
         }, this.#getMovementAnimation());
-        this.isBeingDropped = false;
+        this.#isBeingDropped = false;
     }
     /**
      * Registers a grabber to the widget.
      */
     addGrabber() {
-        if (this.reactiveState) {
-            this.reactiveState.addGrabber();
-        }
-        else {
-            this.#grabbersCount++;
-            this.backingState.hasGrabbers = this.#grabbersCount > 0;
-        }
+        this.#grabbersCount++;
+        this.#hasGrabbers = this.#grabbersCount > 0;
     }
     /**
      * Unregisters a grabber from the widget.
      */
     removeGrabber() {
-        if (this.reactiveState) {
-            this.reactiveState.removeGrabber();
-        }
-        else {
-            this.#grabbersCount--;
-            this.backingState.hasGrabbers = this.#grabbersCount > 0;
-        }
+        this.#grabbersCount--;
+        this.#hasGrabbers = this.#grabbersCount > 0;
     }
     /**
      * Registers a resizer to the widget.
      */
     addResizer() {
-        if (this.reactiveState) {
-            this.reactiveState.addResizer();
-        }
-        else {
-            this.#resizersCount++;
-            this.backingState.hasResizers = this.#resizersCount > 0;
-        }
+        this.#resizersCount++;
+        this.#hasResizers = this.#resizersCount > 0;
     }
     /**
      * Unregisters a resizer from the widget.
      */
     removeResizer() {
-        if (this.reactiveState) {
-            this.reactiveState.removeResizer();
-        }
-        else {
-            this.#resizersCount--;
-            this.backingState.hasResizers = this.#resizersCount > 0;
-        }
+        this.#resizersCount--;
+        this.#hasResizers = this.#resizersCount > 0;
     }
     /**
      * Deletes this widget from its target and board.
@@ -295,124 +281,66 @@ export class InternalFlexiWidgetController extends FlexiWidgetController {
         if (event.widget != this) {
             return;
         }
-        this.currentAction = null;
+        this.#currentAction = null;
         // Clean up event subscriptions when widget is deleted
         this.destroy();
     }
-    /**
-     * Creates the reactive state container when the widget component mounts.
-     * This should be called from the component's onMount lifecycle.
-     */
-    createReactiveState() {
-        // Create the reactive state with current backing state
-        this.reactiveState = new WidgetReactiveState(this, this.backingState);
-        // Transfer current grabber/resizer counts to reactive state
-        for (let i = 0; i < this.#grabbersCount; i++) {
-            this.reactiveState.addGrabber();
-        }
-        for (let i = 0; i < this.#resizersCount; i++) {
-            this.reactiveState.addResizer();
-        }
-    }
     /**
      * Cleanup method to be called when the widget is destroyed
      */
     destroy() {
-        // Clean up reactive state first
-        this.destroyReactiveState();
         // Clean up event subscriptions
         this.#unsubscribers.forEach((unsubscribe) => unsubscribe());
         this.#unsubscribers = [];
+        // Reset counters
+        this.#grabbersCount = 0;
+        this.#resizersCount = 0;
     }
-    /**
-     * Destroys the reactive state container when the widget component unmounts.
-     * This should be called from the component's onDestroy lifecycle.
-     */
-    destroyReactiveState() {
-        if (this.reactiveState) {
-            this.reactiveState.destroy();
-            this.reactiveState = undefined;
-        }
+    // Implement abstract getters from base class
+    get currentAction() {
+        return this.#currentAction;
     }
-    /**
-     * The width in units of the widget.
-     */
     get width() {
-        if (this.reactiveState) {
-            return this.reactiveState.width;
-        }
-        return this.backingState.width;
+        return this.#width;
     }
-    /**
-     * The height in units of the widget.
-     */
     get height() {
-        if (this.reactiveState) {
-            return this.reactiveState.height;
-        }
-        return this.backingState.height;
-    }
-    set width(value) {
-        if (this.reactiveState) {
-            this.reactiveState.width = value;
-        }
-        this.backingState.width = value;
+        return this.#height;
     }
-    set height(value) {
-        if (this.reactiveState) {
-            this.reactiveState.height = value;
-        }
-        this.backingState.height = value;
-    }
-    /**
-     * Gets the column (x-coordinate) of the widget. This value is readonly and is managed by the target.
-     */
     get x() {
-        if (this.reactiveState) {
-            return this.reactiveState.x;
-        }
-        return this.backingState.x;
+        return this.#x;
     }
-    /**
-     * Gets the row (y-coordinate) of the widget. This value is readonly and is managed by the target.
-     */
     get y() {
-        if (this.reactiveState) {
-            return this.reactiveState.y;
-        }
-        return this.backingState.y;
+        return this.#y;
     }
-    set x(value) {
-        if (this.reactiveState) {
-            this.reactiveState.x = value;
-        }
-        this.backingState.x = value;
+    get isBeingDropped() {
+        return this.#isBeingDropped;
     }
-    set y(value) {
-        if (this.reactiveState) {
-            this.reactiveState.y = value;
-        }
-        this.backingState.y = value;
+    get hasGrabbers() {
+        return this.#hasGrabbers;
     }
-    /**
-     * Gets the widget's interpolator for transitions.
-     */
-    get interpolator() {
-        return this.reactiveState?.interpolator;
+    get hasResizers() {
+        return this.#hasResizers;
+    }
+    get isShadow() {
+        return this.#isShadow;
+    }
+    get isGrabbed() {
+        return this.#currentAction?.action == 'grab';
+    }
+    get isResizing() {
+        return this.#currentAction?.action == 'resize';
+    }
+    // Internal setters for these properties
+    set currentAction(value) {
+        this.#currentAction = value;
+    }
+    set isBeingDropped(value) {
+        this.#isBeingDropped = value;
     }
     /**
      * Whether the widget should draw a placeholder widget in the DOM.
      */
     get shouldDrawPlaceholder() {
-        if (this.reactiveState) {
-            return this.reactiveState.interpolator?.active ?? false;
-        }
         return this.interpolator?.active ?? false;
     }
-    set isBeingDropped(value) {
-        if (this.reactiveState) {
-            this.reactiveState.isBeingDropped = value;
-        }
-        this.backingState.isBeingDropped = value;
-    }
 }

package/dist/system/widget/events.js

@@ -5,14 +5,15 @@ import { WidgetPointerEventWatcher } from './triggers.svelte.js';
 export function widgetEvents(widget) {
     const eventBus = getFlexiEventBusCtx();
     const board = getInternalFlexiboardCtx();
-    const eventWatcher = new WidgetPointerEventWatcher(widget, 'grab');
+    const grabWatcher = new WidgetPointerEventWatcher(widget, 'grab');
     return {
         onpointerdown: (event) => {
             // Grabbing the widget directly only works if the widget does not have grabbers.
             if (widget.hasGrabbers) {
                 return;
             }
-            dispatchPointerDownGrab(eventBus, widget, board, event);
+            // Invoke the trigger watcher which respects trigger configuration (immediate vs long press).
+            grabWatcher.onstartpointerdown(event);
         },
         onkeydown: (event) => {
             // Grabbing the widget directly only works if the widget does not have grabbers.
@@ -26,39 +27,27 @@ export function widgetEvents(widget) {
 export function widgetGrabberEvents(widget) {
     const eventBus = getFlexiEventBusCtx();
     const board = getInternalFlexiboardCtx();
+    const grabWatcher = new WidgetPointerEventWatcher(widget, 'grab');
     return {
-        onpointerdown: (event) => dispatchPointerDownGrab(eventBus, widget, board, event),
+        onpointerdown: (event) => {
+            // Use the trigger watcher which respects trigger configuration (immediate vs long press)
+            grabWatcher.onstartpointerdown(event);
+        },
         onkeydown: (event) => dispatchKeyDownGrab(eventBus, widget, board, event)
     };
 }
 export function widgetResizerEvents(widget) {
     const eventBus = getFlexiEventBusCtx();
     const board = getInternalFlexiboardCtx();
+    const resizeWatcher = new WidgetPointerEventWatcher(widget, 'resize');
     return {
-        onpointerdown: (event) => dispatchPointerDownResize(eventBus, widget, board, event),
+        onpointerdown: (event) => {
+            // Invoke the trigger watcher which respects trigger configuration (immediate vs long press).
+            resizeWatcher.onstartpointerdown(event);
+        },
         onkeydown: (event) => dispatchKeyDownResize(eventBus, widget, board, event)
     };
 }
-/**
- * Releases the pointer capture on the event target, before dispatching a 'widget:grabbed' event.
- * @param eventBus The event bus to dispatch the event to.
- * @param widget The widget that was grabbed.
- * @param event The pointer event.
- */
-function dispatchPointerDownGrab(eventBus, widget, board, event) {
-    if (!widget.draggable || !widget.ref || !isGrabPointerEvent(event)) {
-        return;
-    }
-    // TODO: this MIGHT not be necessary anymore, due to our simulated pointer watcher.
-    // Don't implicitly keep the pointer capture, as then mobile can't move the widget in and out of targets.
-    // (event.target as HTMLElement).releasePointerCapture(event.pointerId);
-    // event.stopPropagation();
-    // event.preventDefault();
-    dispatchGrab(eventBus, widget, board, {
-        clientX: event.clientX,
-        clientY: event.clientY
-    });
-}
 /**
  * Resolves clientX/clientY coordinates from a keyboard event, before dispatching a 'widget:grabbed' event.
  * @param eventBus The event bus to dispatch the event to.
@@ -110,25 +99,6 @@ function dispatchGrab(eventBus, widget, board, { clientX, clientY }) {
         yOffset: clientY - rect.top
     });
 }
-/**
- * Releases the pointer capture on the event target, before dispatching a 'widget:resizing' event.
- * @param eventBus The event bus to dispatch the event to.
- * @param widget The widget that was resized.
- * @param event The pointer event.
- */
-function dispatchPointerDownResize(eventBus, widget, board, event) {
-    if (!widget.resizable || !widget.ref) {
-        return;
-    }
-    // Don't implicitly keep the pointer capture, as then mobile can't move the widget in and out of targets.
-    // (event.target as HTMLElement).releasePointerCapture(event.pointerId);
-    // event.stopPropagation();
-    // event.preventDefault();
-    dispatchResize(eventBus, widget, board, {
-        clientX: event.clientX,
-        clientY: event.clientY
-    });
-}
 /**
  * Resolves clientX/clientY coordinates from a keyboard event, before dispatching a 'widget:resizing' event.
  * @param eventBus The event bus to dispatch the event to.
@@ -146,24 +116,7 @@ function dispatchKeyDownResize(eventBus, widget, board, event) {
     }
     event.stopPropagation();
     event.preventDefault();
-    const { x, y } = getElementMidpoint(event.target);
-    dispatchResize(eventBus, widget, board, {
-        clientX: x,
-        clientY: y
-    });
-}
-/**
- * Dispatches a 'widget:resizing' event to the event bus.
- * @param eventBus The event bus to dispatch the event to.
- * @param widget The widget that was resized.
- * @param clientX The x-coordinate of the pointer event.
- * @param clientY The y-coordinate of the pointer event.
- */
-function dispatchResize(eventBus, widget, board, { clientX, clientY }) {
-    if (!widget.resizable || !widget.ref) {
-        return;
-    }
-    const rect = widget.ref?.getBoundingClientRect();
+    const rect = widget.ref.getBoundingClientRect();
     if (!rect) {
         return;
     }
@@ -171,17 +124,18 @@ function dispatchResize(eventBus, widget, board, { clientX, clientY }) {
     if (!boardRect) {
         return;
     }
+    const { x, y } = getElementMidpoint(event.target);
+    // Calculate position relative to board container (same as resize trigger logic)
     const left = rect.left - boardRect.left + board.ref.scrollLeft;
     const top = rect.top - boardRect.top + board.ref.scrollTop;
-    // TODO: resizing event schema
     eventBus.dispatch('widget:resizing', {
         widget,
         board,
         target: widget.internalTarget,
-        offsetX: clientX - left,
-        offsetY: clientY - top,
-        clientX,
-        clientY,
+        offsetX: x - left,
+        offsetY: y - top,
+        clientX: x,
+        clientY: y,
         left,
         top,
         capturedHeightPx: rect.height,

package/dist/system/widget/index.js

@@ -13,7 +13,6 @@ export function flexiwidget(config) {
         throw new Error("Failed to create widget. Check that the widget's x and y coordinates do not lead to an unresolvable collision.");
     }
     setContext(contextKey, widget);
-    widget.createReactiveState();
     return {
         widget
     };
@@ -27,11 +26,7 @@ export function renderedflexiwidget(widget) {
         widget.mounted = true;
     });
     const events = widgetEvents(widget);
-    // Only create reactive state if it doesn't already exist
-    // (it may have been created earlier when widget was added to target)
-    if (!widget.interpolator) {
-        widget.createReactiveState();
-    }
+    // Widget is now fully reactive by default - no additional setup needed
     return {
         widget,
         ...events

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

@@ -90,16 +90,23 @@ export class WidgetPointerEventWatcher {
             if (!this.#widget.resizable) {
                 return;
             }
+            // For resize, calculate position relative to board container.
+            const boardRect = this.#board.ref?.getBoundingClientRect();
+            if (!boardRect) {
+                return;
+            }
+            const left = rect.left - boardRect.left + this.#board.ref.scrollLeft;
+            const top = rect.top - boardRect.top + this.#board.ref.scrollTop;
             this.#eventBus.dispatch('widget:resizing', {
                 widget: this.#widget,
                 board: this.#board,
                 target: this.#widget.target,
-                offsetX: event.clientX - rect.left,
-                offsetY: event.clientY - rect.top,
+                offsetX: event.clientX - left,
+                offsetY: event.clientY - top,
                 clientX: event.clientX,
                 clientY: event.clientY,
-                left: rect.left,
-                top: rect.top,
+                left,
+                top,
                 capturedHeightPx: rect.height,
                 capturedWidthPx: rect.width
             });

package/package.json

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

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

@@ -1,59 +0,0 @@
-import type { WidgetAction } from '../types.js';
-import type { WidgetStateData } from './base.svelte.js';
-import type { InternalFlexiWidgetController } from './controller.svelte.js';
-import { WidgetMoveInterpolator } from './interpolator.svelte.js';
-/**
- * Reactive state container for FlexiWidgets.
- * Constructed separately from the widget controller, as each state container
- * is bound to the lifecycle of a widget component.
- */
-export declare class WidgetReactiveState {
-    #private;
-    currentAction: WidgetAction | null;
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-    isBeingDropped: boolean;
-    hasGrabbers: boolean;
-    hasResizers: boolean;
-    interpolator: WidgetMoveInterpolator;
-    constructor(widget: InternalFlexiWidgetController, initialState: WidgetStateData);
-    /**
-     * Adds a grabber and returns the current count
-     */
-    addGrabber(): number;
-    /**
-     * Removes a grabber and returns the current count
-     */
-    removeGrabber(): number;
-    /**
-     * Adds a resizer and returns the current count
-     */
-    addResizer(): number;
-    /**
-     * Removes a resizer and returns the current count
-     */
-    removeResizer(): number;
-    /**
-     * Gets the current grabber count
-     */
-    get grabberCount(): number;
-    /**
-     * Gets the current resizer count
-     */
-    get resizerCount(): number;
-    /**
-     * Syncs this reactive state back to the widget's backing state.
-     */
-    syncToBackingState(): void;
-    /**
-     * Clean up resources when state is destroyed
-     */
-    destroy(): void;
-}
-/**
- * Legacy export for backwards compatibility
- * @deprecated Use WidgetReactiveState instead
- */
-export declare const WidgetState: typeof WidgetReactiveState;

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

@@ -1,102 +0,0 @@
-import { WidgetMoveInterpolator } from './interpolator.svelte.js';
-/**
- * Reactive state container for FlexiWidgets.
- * Constructed separately from the widget controller, as each state container
- * is bound to the lifecycle of a widget component.
- */
-export class WidgetReactiveState {
-    // Core state data
-    currentAction = $state(null);
-    width = $state(1);
-    height = $state(1);
-    x = $state(0);
-    y = $state(0);
-    isBeingDropped = $state(false);
-    // Grabber and resizer tracking
-    #grabbers = $state(0);
-    #resizers = $state(0);
-    // Derived reactive properties
-    hasGrabbers = $derived(this.#grabbers > 0);
-    hasResizers = $derived(this.#resizers > 0);
-    // Movement interpolation
-    interpolator;
-    // Reference to the controller (for callbacks, not state)
-    #widget;
-    constructor(widget, initialState) {
-        this.#widget = widget;
-        // Initialize with backing state values
-        this.currentAction = initialState.currentAction;
-        this.width = initialState.width;
-        this.height = initialState.height;
-        this.x = initialState.x;
-        this.y = initialState.y;
-        this.isBeingDropped = initialState.isBeingDropped;
-        // Create the widget's interpolator.
-        this.interpolator = new WidgetMoveInterpolator(widget.provider, widget);
-    }
-    /**
-     * Adds a grabber and returns the current count
-     */
-    addGrabber() {
-        return ++this.#grabbers;
-    }
-    /**
-     * Removes a grabber and returns the current count
-     */
-    removeGrabber() {
-        return --this.#grabbers;
-    }
-    /**
-     * Adds a resizer and returns the current count
-     */
-    addResizer() {
-        return ++this.#resizers;
-    }
-    /**
-     * Removes a resizer and returns the current count
-     */
-    removeResizer() {
-        return --this.#resizers;
-    }
-    /**
-     * Gets the current grabber count
-     */
-    get grabberCount() {
-        return this.#grabbers;
-    }
-    /**
-     * Gets the current resizer count
-     */
-    get resizerCount() {
-        return this.#resizers;
-    }
-    /**
-     * Syncs this reactive state back to the widget's backing state.
-     */
-    syncToBackingState() {
-        const backing = this.#widget.backingState;
-        backing.currentAction = this.currentAction;
-        backing.width = this.width;
-        backing.height = this.height;
-        backing.x = this.x;
-        backing.y = this.y;
-        backing.isBeingDropped = this.isBeingDropped;
-        backing.hasGrabbers = this.hasGrabbers;
-        backing.hasResizers = this.hasResizers;
-    }
-    /**
-     * Clean up resources when state is destroyed
-     */
-    destroy() {
-        // Sync final state back to backing store
-        this.syncToBackingState();
-        // Reset counters
-        this.#grabbers = 0;
-        this.#resizers = 0;
-    }
-}
-/**
- * Legacy export for backwards compatibility
- * @deprecated Use WidgetReactiveState instead
- */
-export const WidgetState = WidgetReactiveState;