svelte-flexiboards 0.4.1 → 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/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.

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

@@ -623,16 +623,16 @@ 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.

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

@@ -1,4 +1,4 @@
-import { tick, untrack } from 'svelte';
+import { untrack } from 'svelte';
 import { FlexiGrid, FlowFlexiGrid } from '../grid/index.js';
 import { FlexiWidgetController } from '../widget/base.svelte.js';
 import { InternalFlexiWidgetController } from '../widget/controller.svelte.js';

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

@@ -1,11 +1,11 @@
 import type { FreeFormTargetLayout } from '../grid/free-grid.svelte.js';
 import type { FlexiGrid, FlowTargetLayout } from '../grid/index.js';
-import type { WidgetAction } from '../types.js';
+import type { InternalWidgetAction } from '../internal-types.js';
 import type { InternalFlexiWidgetController } from '../widget/controller.svelte.js';
 import type { FlexiWidgetDefaults } from '../widget/types.js';
 import type { FlexiTargetController } from './base.svelte.js';
 export type FlexiTargetActionWidget = {
-    action: WidgetAction['action'];
+    action: InternalWidgetAction['action'];
     widget: InternalFlexiWidgetController;
 };
 export type FlexiTargetState = {