svelte-flexiboards 0.4.0 → 0.4.2

package/dist/components/responsive-flexi-board.svelte

@@ -1,83 +1,83 @@
-<script module lang="ts">
-	import { onDestroy, type Snippet } from 'svelte';
-	import type { FlexiCommonProps } from '../system/types.js';
-	import type { ResponsiveFlexiBoardController } from '../system/responsive/base.svelte.js';
-	import type { ResponsiveFlexiBoardConfiguration } from '../system/responsive/types.js';
-
-	export type BreakpointSnippetParams = { currentBreakpoint: string };
-
-	export type ResponsiveFlexiBoardProps = FlexiCommonProps<ResponsiveFlexiBoardController> & {
-		config?: ResponsiveFlexiBoardConfiguration;
-		/**
-		 * Snippet for large breakpoint (no params - breakpoint is implicit).
-		 */
-		lg?: Snippet;
-		/**
-		 * Snippet for medium breakpoint (no params - breakpoint is implicit).
-		 */
-		md?: Snippet;
-		/**
-		 * Snippet for small breakpoint (no params - breakpoint is implicit).
-		 */
-		sm?: Snippet;
-		/**
-		 * Snippet for extra-small breakpoint (no params - breakpoint is implicit).
-		 */
-		xs?: Snippet;
-		/**
-		 * Children snippet used as fallback when no specific breakpoint snippet matches.
-		 * Receives `{ currentBreakpoint: string }` as a parameter.
-		 */
-		children?: Snippet<[BreakpointSnippetParams]>;
-	};
-</script>
-
-<script lang="ts">
-	import { responsiveflexiboard } from '../system/responsive/index.js';
-
-	let {
-		controller = $bindable(),
-		onfirstcreate,
-		config,
-		lg,
-		md,
-		sm,
-		xs,
-		children
-	}: ResponsiveFlexiBoardProps = $props();
-
-	const board = responsiveflexiboard({ config });
-	controller = board;
-
-	// Load layouts immediately so child FlexiBoards can access them
-	board.oninitialloadcomplete();
-
-	onfirstcreate?.(board);
-
-	// Map breakpoint names to snippets (without params)
-	const snippets: Record<string, Snippet | undefined> = $derived({
-		lg,
-		md,
-		sm,
-		xs
-	});
-
-	// Cleanup when component is destroyed
-	onDestroy(() => {
-		board.destroy();
-	});
-</script>
-
-<!--
-	Key on currentBreakpoint to force re-render when breakpoint changes.
-	This ensures the board is re-created with the correct breakpoint context.
--->
-{#key board.currentBreakpoint}
-	{#if snippets[board.currentBreakpoint]}
-		<!-- Specific breakpoint snippet (no params) -->
-		{@render snippets[board.currentBreakpoint]!()}
-	{:else if children}
-		<!-- Children snippet receives { currentBreakpoint } -->
-		{@render children({ currentBreakpoint: board.currentBreakpoint })}
-	{/if}
-{/key}
+<script module lang="ts">
+	import { onDestroy, type Snippet } from 'svelte';
+	import type { FlexiCommonProps } from '../system/types.js';
+	import type { ResponsiveFlexiBoardController } from '../system/responsive/base.svelte.js';
+	import type { ResponsiveFlexiBoardConfiguration } from '../system/responsive/types.js';
+
+	export type BreakpointSnippetParams = { currentBreakpoint: string };
+
+	export type ResponsiveFlexiBoardProps = FlexiCommonProps<ResponsiveFlexiBoardController> & {
+		config?: ResponsiveFlexiBoardConfiguration;
+		/**
+		 * Snippet for large breakpoint (no params - breakpoint is implicit).
+		 */
+		lg?: Snippet;
+		/**
+		 * Snippet for medium breakpoint (no params - breakpoint is implicit).
+		 */
+		md?: Snippet;
+		/**
+		 * Snippet for small breakpoint (no params - breakpoint is implicit).
+		 */
+		sm?: Snippet;
+		/**
+		 * Snippet for extra-small breakpoint (no params - breakpoint is implicit).
+		 */
+		xs?: Snippet;
+		/**
+		 * Children snippet used as fallback when no specific breakpoint snippet matches.
+		 * Receives `{ currentBreakpoint: string }` as a parameter.
+		 */
+		children?: Snippet<[BreakpointSnippetParams]>;
+	};
+</script>
+
+<script lang="ts">
+	import { responsiveflexiboard } from '../system/responsive/index.js';
+
+	let {
+		controller = $bindable(),
+		onfirstcreate,
+		config,
+		lg,
+		md,
+		sm,
+		xs,
+		children
+	}: ResponsiveFlexiBoardProps = $props();
+
+	const board = responsiveflexiboard({ config });
+	controller = board;
+
+	// Load layouts immediately so child FlexiBoards can access them
+	board.oninitialloadcomplete();
+
+	onfirstcreate?.(board);
+
+	// Map breakpoint names to snippets (without params)
+	const snippets: Record<string, Snippet | undefined> = $derived({
+		lg,
+		md,
+		sm,
+		xs
+	});
+
+	// Cleanup when component is destroyed
+	onDestroy(() => {
+		board.destroy();
+	});
+</script>
+
+<!--
+	Key on currentBreakpoint to force re-render when breakpoint changes.
+	This ensures the board is re-created with the correct breakpoint context.
+-->
+{#key board.currentBreakpoint}
+	{#if snippets[board.currentBreakpoint]}
+		<!-- Specific breakpoint snippet (no params) -->
+		{@render snippets[board.currentBreakpoint]!()}
+	{:else if children}
+		<!-- Children snippet receives { currentBreakpoint } -->
+		{@render children({ currentBreakpoint: board.currentBreakpoint })}
+	{/if}
+{/key}

package/dist/components/widget-transition-placeholder.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-	import { getFlexiwidgetInterpolatorCtx } from '../system/widget/index.js';
-	import { onMount } from 'svelte';
-
-	const interpolator = getFlexiwidgetInterpolatorCtx();
-
-	let ref: HTMLElement;
-
-	onMount(() => interpolator.onPlaceholderMount(ref));
-</script>
-
-<div style={interpolator.placeholderStyle} bind:this={ref}></div>
+<script lang="ts">
+	import { getFlexiwidgetInterpolatorCtx } from '../system/widget/index.js';
+	import { onMount } from 'svelte';
+
+	const interpolator = getFlexiwidgetInterpolatorCtx();
+
+	let ref: HTMLElement;
+
+	onMount(() => interpolator.onPlaceholderMount(ref));
+</script>
+
+<div style={interpolator.placeholderStyle} bind:this={ref}></div>

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

@@ -3,7 +3,7 @@ import type { AriaPoliteness, FlexiAnnouncerController } from '../announcer.svel
 import type { FlexiPortalController } from '../portal.js';
 import { InternalFlexiTargetController } from '../target/controller.svelte.js';
 import type { FlexiTargetPartialConfiguration } from '../target/types.js';
-import type { TargetEvent, WidgetAction, WidgetEvent, WidgetGrabbedEvent, WidgetResizingEvent } from '../types.js';
+import type { InternalTargetEvent, InternalWidgetAction, InternalWidgetEvent, InternalWidgetGrabbedEvent, InternalWidgetResizingEvent } from '../internal-types.js';
 import type { FlexiBoardController } from './base.svelte.js';
 import type { FlexiBoardConfiguration, FlexiRegistryEntry, FlexiLayout } from './types.js';
 import type { InternalFlexiWidgetController } from '../widget/controller.svelte.js';
@@ -22,14 +22,14 @@ export declare class InternalFlexiBoardController implements FlexiBoardControlle
     get ref(): HTMLElement | null;
     set ref(ref: HTMLElement | null);
     createTarget(config?: FlexiTargetPartialConfiguration, key?: string): InternalFlexiTargetController;
-    onPointerEnterTarget(event: TargetEvent): void;
-    onPointerLeaveTarget(event: TargetEvent): void;
+    onPointerEnterTarget(event: InternalTargetEvent): void;
+    onPointerLeaveTarget(event: InternalTargetEvent): void;
     onenterdeleter(): void;
     onleavedeleter(): void;
-    onWidgetGrabbed(event: WidgetGrabbedEvent): void;
-    onWidgetResizing(event: WidgetResizingEvent): void;
-    handleWidgetRelease(event: WidgetEvent): void;
-    handleWidgetCancel(event: WidgetEvent): void;
+    onWidgetGrabbed(event: InternalWidgetGrabbedEvent): void;
+    onWidgetResizing(event: InternalWidgetResizingEvent): void;
+    handleWidgetRelease(event: InternalWidgetEvent): void;
+    handleWidgetCancel(event: InternalWidgetEvent): void;
     attachAnnouncer(announcer: FlexiAnnouncerController): void;
     announce(message: string, politeness?: AriaPoliteness): void;
     oninitialloadcomplete(): void;
@@ -54,7 +54,7 @@ export declare class InternalFlexiBoardController implements FlexiBoardControlle
      * @param to The target to move the widget to.
      */
     moveWidget(widget: InternalFlexiWidgetController, from: InternalFlexiTargetController | undefined, to: InternalFlexiTargetController): boolean;
-    get currentWidgetAction(): WidgetAction | null;
+    get currentWidgetAction(): InternalWidgetAction | null;
     /**
      * Returns the parent responsive controller if this board is within a ResponsiveFlexiBoard.
      */

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

@@ -58,6 +58,10 @@ export class InternalFlexiBoardController {
         if (event.board !== this) {
             return;
         }
+        // No point exporting if nobody is listening
+        if (!this.config?.onLayoutChange && !this.#responsiveController) {
+            return;
+        }
         // Debounce the callback
         if (this.#layoutChangeTimeout) {
             clearTimeout(this.#layoutChangeTimeout);

package/dist/system/internal-types.d.ts

@@ -0,0 +1,109 @@
+import type { FlexiLayout } from './board/types.js';
+import type { InternalFlexiBoardController } from './board/controller.svelte.js';
+import type { InternalFlexiAddController } from './misc/adder.svelte.js';
+import type { InternalResponsiveFlexiBoardController } from './responsive/controller.svelte.js';
+import type { InternalFlexiTargetController } from './target/controller.svelte.js';
+import type { InternalFlexiWidgetController } from './widget/controller.svelte.js';
+import type { Position } from './types.js';
+export type InternalWidgetGrabAction = {
+    action: 'grab';
+    widget: InternalFlexiWidgetController;
+    offsetX: number;
+    offsetY: number;
+    capturedHeightPx: number;
+    capturedWidthPx: number;
+};
+export type InternalWidgetResizeAction = {
+    action: 'resize';
+    widget: InternalFlexiWidgetController;
+    offsetX: number;
+    offsetY: number;
+    left: number;
+    top: number;
+    capturedHeightPx: number;
+    capturedWidthPx: number;
+    initialHeightUnits: number;
+    initialWidthUnits: number;
+};
+export type InternalWidgetAction = InternalWidgetGrabAction | InternalWidgetResizeAction;
+export type InternalWidgetGrabbedParams = {
+    widget: InternalFlexiWidgetController;
+    ref: HTMLElement;
+    xOffset: number;
+    yOffset: number;
+    clientX: number;
+    clientY: number;
+    capturedHeight: number;
+    capturedWidth: number;
+};
+export type InternalWidgetStartResizeParams = {
+    widget: InternalFlexiWidgetController;
+    xOffset: number;
+    yOffset: number;
+    left: number;
+    top: number;
+    heightPx: number;
+    widthPx: number;
+};
+export type InternalAdderWidgetReadyEvent = {
+    adder: InternalFlexiAddController;
+    widget: InternalFlexiWidgetController;
+};
+export type InternalWidgetEvent = {
+    target?: InternalFlexiTargetController;
+    board: InternalFlexiBoardController;
+    widget: InternalFlexiWidgetController;
+};
+export type InternalWidgetGrabbedEvent = InternalWidgetEvent & {
+    clientX: number;
+    clientY: number;
+    xOffset: number;
+    yOffset: number;
+    capturedHeightPx: number;
+    capturedWidthPx: number;
+};
+export type InternalWidgetResizingEvent = InternalWidgetEvent & {
+    target: InternalFlexiTargetController;
+    offsetX: number;
+    offsetY: number;
+    clientX: number;
+    clientY: number;
+    left: number;
+    top: number;
+    capturedHeightPx: number;
+    capturedWidthPx: number;
+};
+export type InternalWidgetDroppedEvent = {
+    widget: InternalFlexiWidgetController;
+    board: InternalFlexiBoardController;
+    oldTarget?: InternalFlexiTargetController;
+    newTarget?: InternalFlexiTargetController;
+};
+export type InternalWidgetStartResizeEvent = InternalWidgetStartResizeParams & {
+    target: InternalFlexiTargetController;
+};
+export type InternalWidgetOverEvent = {
+    widget: InternalFlexiWidgetController;
+    mousePosition: Position;
+};
+export type InternalWidgetOutEvent = {
+    widget: InternalFlexiWidgetController;
+};
+export type InternalTargetEvent = {
+    board: InternalFlexiBoardController;
+    target: InternalFlexiTargetController;
+};
+export type InternalGrabbedWidgetMouseEvent = {
+    widget: InternalFlexiWidgetController;
+};
+export type InternalHoveredTargetEvent = {
+    target: InternalFlexiTargetController;
+};
+export type InternalBoardLayoutChangeEvent = {
+    board: InternalFlexiBoardController;
+    layout: FlexiLayout;
+    breakpoint?: string;
+};
+export type InternalResponsiveLayoutImportEvent = {
+    responsiveController: InternalResponsiveFlexiBoardController;
+};

package/dist/system/internal-types.js

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

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

@@ -1,6 +1,6 @@
 import type { ClassValue } from 'svelte/elements';
 import type { InternalFlexiBoardController } from '../board/controller.svelte.js';
-import type { AdderWidgetReadyEvent } from '../types.js';
+import type { InternalAdderWidgetReadyEvent } from '../internal-types.js';
 import { InternalFlexiWidgetController } from '../widget/controller.svelte.js';
 import type { FlexiWidgetConfiguration } from '../widget/index.js';
 export type FlexiAddWidgetFn = () => AdderWidgetConfiguration | null;
@@ -29,7 +29,7 @@ export declare class InternalFlexiAddController implements FlexiAddController {
     constructor(provider: InternalFlexiBoardController, addWidgetFn: FlexiAddWidgetFn);
     onpointerdown(event: PointerEvent): void;
     onkeydown(event: KeyboardEvent): void;
-    onWidgetReady(event: AdderWidgetReadyEvent): void;
+    onWidgetReady(event: InternalAdderWidgetReadyEvent): void;
     onWidgetDragInComplete(event: {
         widget: InternalFlexiWidgetController;
     }): void;

package/dist/system/portal.d.ts

@@ -1,4 +1,4 @@
-import type { WidgetGrabbedEvent, WidgetEvent } from './types.js';
+import type { InternalWidgetEvent, InternalWidgetGrabbedEvent } from './internal-types.js';
 import type { FlexiWidgetController } from './widget/index.js';
 /**
  * GrabbedPortal manages a single container in the DOM where grabbed/resizing
@@ -8,8 +8,8 @@ export declare class FlexiPortalController {
     #private;
     constructor();
     createPortal(): void;
-    onWidgetGrabbed(event: WidgetGrabbedEvent): void;
-    onWidgetRelease(event: WidgetEvent): void;
+    onWidgetGrabbed(event: InternalWidgetGrabbedEvent): void;
+    onWidgetRelease(event: InternalWidgetEvent): void;
     /**
      * Moves a widget's DOM element to the portal container
      */

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

@@ -1,19 +1,20 @@
-import type { AdderWidgetReadyEvent, BoardLayoutChangeEvent, PointerMovedEvent, ResponsiveLayoutImportEvent, TargetEvent, WidgetDroppedEvent, WidgetEvent, WidgetGrabbedEvent, WidgetResizingEvent } from '../types.js';
+import type { InternalAdderWidgetReadyEvent, InternalBoardLayoutChangeEvent, InternalResponsiveLayoutImportEvent, InternalTargetEvent, InternalWidgetDroppedEvent, InternalWidgetEvent, InternalWidgetGrabbedEvent, InternalWidgetResizingEvent } from '../internal-types.js';
+import type { PointerMovedEvent } from '../types.js';
 export interface EventMap {
-    'widget:grabbed': WidgetGrabbedEvent;
-    'widget:resizing': WidgetResizingEvent;
-    'widget:release': WidgetEvent;
-    'widget:cancel': WidgetEvent;
-    'widget:dropped': WidgetDroppedEvent;
-    'widget:delete': WidgetEvent;
-    'target:pointerenter': TargetEvent;
-    'target:pointerleave': TargetEvent;
-    'widget:entertarget': WidgetEvent;
-    'widget:leavetarget': WidgetEvent;
-    'adder:widgetready': AdderWidgetReadyEvent;
+    'widget:grabbed': InternalWidgetGrabbedEvent;
+    'widget:resizing': InternalWidgetResizingEvent;
+    'widget:release': InternalWidgetEvent;
+    'widget:cancel': InternalWidgetEvent;
+    'widget:dropped': InternalWidgetDroppedEvent;
+    'widget:delete': InternalWidgetEvent;
+    'target:pointerenter': InternalTargetEvent;
+    'target:pointerleave': InternalTargetEvent;
+    'widget:entertarget': InternalWidgetEvent;
+    'widget:leavetarget': InternalWidgetEvent;
+    'adder:widgetready': InternalAdderWidgetReadyEvent;
     'pointer:moved': PointerMovedEvent;
-    'board:layoutchange': BoardLayoutChangeEvent;
-    'responsive:layoutimport': ResponsiveLayoutImportEvent;
+    'board:layoutchange': InternalBoardLayoutChangeEvent;
+    'responsive:layoutimport': InternalResponsiveLayoutImportEvent;
 }
 type EventListener<T> = (data: T) => void;
 export declare class FlexiEventBus {

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

@@ -1,4 +1,5 @@
-import type { Position, ProxiedValue, WidgetEvent } from '../types.js';
+import type { InternalWidgetEvent } from '../internal-types.js';
+import type { Position, ProxiedValue } from '../types.js';
 import type { FlexiGrid } from '../grid/base.svelte.js';
 import type { FlexiTargetConfiguration } from '../target/types.js';
 /**
@@ -34,8 +35,8 @@ export declare class AutoScrollService {
     #private;
     shouldAutoScroll: boolean;
     constructor(ref: ProxiedValue<HTMLElement | null>);
-    startAutoScroll(event: WidgetEvent): void;
-    stopAutoScroll(event: WidgetEvent): void;
+    startAutoScroll(event: InternalWidgetEvent): void;
+    stopAutoScroll(event: InternalWidgetEvent): void;
     get ref(): HTMLElement | null;
     /**
      * Manually stop continuous scrolling. Useful for external control.
@@ -60,6 +61,8 @@ export declare class GridDimensionTracker {
     refreshScrollListeners(): void;
     getCellFromPointerPosition(clientX: number, clientY: number): CellPosition | null;
 }
+export declare function contentSize(axisCoordinates: number[], gap: number): number;
+export declare function findCell(pointerLocation: number, start: number, size: number, gap: number, axisCoordinates: number[]): number;
 export declare function generateUniqueId(prefix?: string): string;
 export declare const assistiveTextStyle = "\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder-width: 0;\n";
 export declare function getElementMidpoint(element: HTMLElement): {

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

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

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

@@ -1,5 +1,6 @@
 import { FlexiGrid } from '../grid/index.js';
-import type { MouseGridCellMoveEvent, TargetEvent, WidgetDroppedEvent, WidgetEvent, WidgetGrabbedEvent, WidgetResizingEvent } from '../types.js';
+import type { InternalTargetEvent, InternalWidgetDroppedEvent, InternalWidgetEvent, InternalWidgetGrabbedEvent, InternalWidgetResizingEvent } from '../internal-types.js';
+import type { MouseGridCellMoveEvent } from '../types.js';
 import { FlexiWidgetController } from '../widget/base.svelte.js';
 import { InternalFlexiWidgetController } from '../widget/controller.svelte.js';
 import type { FlexiWidgetConfiguration, FlexiWidgetDefaults } from '../widget/types.js';
@@ -19,7 +20,7 @@ export declare class InternalFlexiTargetController implements FlexiTargetControl
     createGrid(): FlexiGrid;
     createWidget(config: FlexiWidgetConfiguration): InternalFlexiWidgetController | undefined;
     registerWidget(config: FlexiWidgetConfiguration, onCreated?: (widget: FlexiWidgetController) => void): void;
-    onWidgetDelete(event: WidgetEvent): void;
+    onWidgetDelete(event: InternalWidgetEvent): void;
     /**
      * Deletes the given widget from this target, if it exists.
      * @returns Whether the widget was deleted.
@@ -36,8 +37,8 @@ export declare class InternalFlexiTargetController implements FlexiTargetControl
      * @returns The layout of widgets.
      */
     exportLayout(): FlexiWidgetLayoutEntry[];
-    onPointerEnterTarget(event: TargetEvent): void;
-    onPointerLeaveTarget(event: TargetEvent): void;
+    onPointerEnterTarget(event: InternalTargetEvent): void;
+    onPointerLeaveTarget(event: InternalTargetEvent): void;
     restorePreGrabSnapshot(): void;
     forgetPreGrabSnapshot(): void;
     hasPreGrabSnapshot(): boolean;
@@ -45,13 +46,13 @@ export declare class InternalFlexiTargetController implements FlexiTargetControl
     cancelDrop(): void;
     tryDropWidget(widget: InternalFlexiWidgetController): boolean;
     onmousegridcellmove(event: MouseGridCellMoveEvent): void;
-    onWidgetGrabbed(event: WidgetGrabbedEvent): void;
-    onWidgetResizing(event: WidgetResizingEvent): void;
-    onWidgetCancel(event: WidgetEvent): void;
-    onWidgetRelease(event: WidgetEvent): void;
-    onWidgetDropped(event: WidgetDroppedEvent): void;
-    onWidgetEnterTarget(event: WidgetEvent): void;
-    onWidgetLeaveTarget(event: WidgetEvent): void;
+    onWidgetGrabbed(event: InternalWidgetGrabbedEvent): void;
+    onWidgetResizing(event: InternalWidgetResizingEvent): void;
+    onWidgetCancel(event: InternalWidgetEvent): void;
+    onWidgetRelease(event: InternalWidgetEvent): void;
+    onWidgetDropped(event: InternalWidgetDroppedEvent): void;
+    onWidgetEnterTarget(event: InternalWidgetEvent): void;
+    onWidgetLeaveTarget(event: InternalWidgetEvent): void;
     oninitialloadcomplete(): void;
     /**
      * Whether the target is currently being hovered over by the mouse.