svelte-flexiboards 0.3.2 → 0.4.0

package/dist/components/flexi-add.svelte

@@ -64,7 +64,6 @@
 	});
 </script>
 
-<!-- TODO: will probably need a breaking change, because we need a ref to get the start widget position -->
 <button
 	class={derivedClassName}
 	bind:this={adder.ref}

package/dist/components/flexi-delete.svelte

@@ -22,7 +22,7 @@
 
 	export type FlexiDeleteProps = FlexiCommonProps<FlexiDeleteController> & {
 		class?: FlexiDeleteClasses;
-		children?: Snippet<[{ deleter: FlexiDeleteController; props: FlexiDeleteChildrenProps }]>;
+		children?: Snippet<[{ deleter: FlexiDeleteController }]>;
 	};
 </script>
 
@@ -34,8 +34,7 @@
 		onfirstcreate
 	}: FlexiDeleteProps = $props();
 
-	// TODO: remove pointer events in v0.4
-	const { deleter, onpointerenter, onpointerleave } = flexidelete();
+	const { deleter } = flexidelete();
 	controller = deleter;
 	onfirstcreate?.(deleter);
 
@@ -63,5 +62,5 @@
 	<span style={assistiveTextStyle} id={assistiveTextId}>
 		Drag a widget here and press Enter to delete it.
 	</span>
-	{@render children?.({ deleter, props: { onpointerenter, onpointerleave } })}
+	{@render children?.({ deleter })}
 </div>

package/dist/components/flexi-delete.svelte.d.ts

@@ -1,22 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { FlexiCommonProps } from '../system/types.js';
 import { FlexiDeleteController, type FlexiDeleteClasses } from '../system/misc/deleter.svelte.js';
-/** @deprecated FlexiDelete's children props are now redundant and will be removed in v0.4. */
-type FlexiDeleteChildrenProps = {
-    /**
-     * @deprecated This has been replaced with internal pointer management and is redundant. These events will be removed in v0.4.
-     */
-    onpointerenter: (event: PointerEvent) => void;
-    /**
-     * @deprecated This has been replaced with internal pointer management and is redundant. These events will be removed in v0.4.
-     */
-    onpointerleave: (event: PointerEvent) => void;
-};
 export type FlexiDeleteProps = FlexiCommonProps<FlexiDeleteController> & {
     class?: FlexiDeleteClasses;
     children?: Snippet<[{
         deleter: FlexiDeleteController;
-        props: FlexiDeleteChildrenProps;
     }]>;
 };
 declare const FlexiDelete: import("svelte").Component<FlexiDeleteProps, {}, "controller">;

package/dist/components/flexi-grab.svelte

@@ -18,8 +18,8 @@
 
 <button
 	style={'user-select: none; touch-action: none;' +
-		(widget.draggable && widget.mounted ? 'cursor: grab;' : 'cursor: not-allowed;')}
-	disabled={!widget.draggable || !widget.mounted}
+		(widget.isGrabbable && widget.mounted ? 'cursor: grab;' : 'cursor: not-allowed;')}
+	disabled={!widget.isGrabbable || !widget.mounted}
 	class={className}
 	{onpointerdown}
 	{onkeydown}

package/dist/components/flexi-target.svelte

@@ -70,21 +70,6 @@
 	controller = target;
 	onfirstcreate?.(target);
 
-	// TODO: probable Svelte bug, causes browser freeze on production builds.
-	// Haven't been able to repro on REPL as yet.
-	// let orderedWidgets: InternalFlexiWidgetController[] = $derived.by(() => {
-	// 	return Array.from(target.internalWidgets).toSorted((a, b) => {
-	// 		if (a.y !== b.y) {
-	// 			return a.y - b.y;
-	// 		}
-
-	// 		if (a.x == b.x) {
-	// 			console.warn('[warning] collision detected between widgets ', a.id, ' and ', b.id);
-	// 		}
-	// 		return a.x - b.x;
-	// 	});
-	// });
-
 	// Cleanup target subscriptions when component is destroyed
 	onDestroy(() => {
 		target.destroy();
@@ -96,15 +81,19 @@
 
 	<!-- Allow user to specify components directly via a registration component. Once that's done, mount them to the actual target list dynamically -->
 	<FlexiGrid class={className}>
-		{#if !target.prepared && children}
-			{@render children()}
-		{:else if target.prepared}
+		{#if children}
+			<!-- Keep the initial widgets 'rendered' so that state inside children snippet doesn't get lost -->
+			<div style={target.prepared ? 'visibility: hidden;' : ''}>
+				{@render children()}
+			</div>
+		{/if}
+		{#if target.prepared}
 			<!-- Render widgets in deterministic order for tabbing and consistent DOM ordering -->
 			{#each target.orderedWidgets as widget (widget.id)}
 				<RenderedFlexiWidget {widget} />
 			{/each}
 
-			{#if target.dropzoneWidget}
+			{#if target.dropzoneWidget && target.shouldRenderDropzoneWidget}
 				<RenderedFlexiWidget widget={target.dropzoneWidget} />
 			{/if}
 		{/if}

package/dist/components/flexi-widget.svelte

@@ -28,8 +28,8 @@
 
 	let config: FlexiWidgetConfiguration = $state({
 		...propsConfig,
-		className: className,
-		snippet: children
+		...(className !== undefined && { className }),
+		...(children !== undefined && { snippet: children })
 	});
 
 	// Callback so that we still fulfil these props.

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

@@ -0,0 +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}

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

@@ -0,0 +1,34 @@
+import { 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]>;
+};
+declare const ResponsiveFlexiBoard: import("svelte").Component<ResponsiveFlexiBoardProps, {}, "controller">;
+type ResponsiveFlexiBoard = ReturnType<typeof ResponsiveFlexiBoard>;
+export default ResponsiveFlexiBoard;

package/dist/index.d.ts

@@ -5,10 +5,13 @@ import FlexiGrab from './components/flexi-grab.svelte';
 import FlexiResize from './components/flexi-resize.svelte';
 import FlexiAdd from './components/flexi-add.svelte';
 import FlexiDelete from './components/flexi-delete.svelte';
+import ResponsiveFlexiBoard, { type ResponsiveFlexiBoardProps, type BreakpointSnippetParams } from './components/responsive-flexi-board.svelte';
 import type { FlexiBoardConfiguration, FlexiBoardController } from './system/board/index.js';
 import type { FlexiTargetConfiguration, FlexiTargetController } from './system/target/index.js';
 import { type FlexiWidgetController, type FlexiWidgetChildrenSnippet, type FlexiWidgetChildrenSnippetParameters, type FlexiWidgetConfiguration, type FlexiWidgetTransitionConfiguration, type FlexiWidgetTransitionTypeConfiguration, type FlexiWidgetTriggerConfiguration, simpleTransitionConfig, getFlexiwidgetCtx } from './system/widget/index.js';
 import type { AdderWidgetConfiguration, FlexiAddController, FlexiAddWidgetFn } from './system/misc/adder.svelte.js';
 import { immediateTriggerConfig, longPressTriggerConfig, type PointerTriggerCondition } from './system/widget/triggers.svelte.js';
+import type { FlexiLayout, FlexiRegistryEntry, FlexiWidgetLayoutEntry, FlexiLoadLayoutFn, FlexiLayoutChangeFn } from './system/board/types.js';
+import type { ResponsiveFlexiBoardController, ResponsiveFlexiBoardConfiguration, ResponsiveFlexiLayout } from './system/responsive/index.js';
 export * from './system/types.js';
-export { FlexiBoard, type FlexiBoardConfiguration, type FlexiBoardProps, FlexiTarget, type FlexiTargetConfiguration, type FlexiTargetProps, FlexiWidget, type FlexiWidgetConfiguration, type FlexiWidgetProps, FlexiGrab, FlexiResize, FlexiAdd, FlexiDelete, type FlexiAddWidgetFn, type AdderWidgetConfiguration, type FlexiWidgetController, type FlexiBoardController, type FlexiTargetController, type FlexiAddController, type FlexiWidgetChildrenSnippet, type FlexiWidgetChildrenSnippetParameters, type PointerTriggerCondition, type FlexiWidgetTriggerConfiguration, type FlexiWidgetTransitionTypeConfiguration, type FlexiWidgetTransitionConfiguration, immediateTriggerConfig, longPressTriggerConfig, getFlexiwidgetCtx, simpleTransitionConfig };
+export { FlexiBoard, type FlexiBoardConfiguration, type FlexiBoardProps, type FlexiLayout, type FlexiWidgetLayoutEntry, type FlexiRegistryEntry, type FlexiLoadLayoutFn, type FlexiLayoutChangeFn, FlexiTarget, type FlexiTargetConfiguration, type FlexiTargetProps, FlexiWidget, type FlexiWidgetConfiguration, type FlexiWidgetProps, FlexiGrab, FlexiResize, FlexiAdd, FlexiDelete, type FlexiAddWidgetFn, type AdderWidgetConfiguration, type FlexiWidgetController, type FlexiBoardController, type FlexiTargetController, type FlexiAddController, type FlexiWidgetChildrenSnippet, type FlexiWidgetChildrenSnippetParameters, type PointerTriggerCondition, type FlexiWidgetTriggerConfiguration, type FlexiWidgetTransitionTypeConfiguration, type FlexiWidgetTransitionConfiguration, immediateTriggerConfig, longPressTriggerConfig, getFlexiwidgetCtx, simpleTransitionConfig, ResponsiveFlexiBoard, type ResponsiveFlexiBoardProps, type ResponsiveFlexiBoardController, type ResponsiveFlexiBoardConfiguration, type ResponsiveFlexiLayout, type BreakpointSnippetParams };

package/dist/index.js

@@ -7,7 +7,10 @@ import FlexiGrab from './components/flexi-grab.svelte';
 import FlexiResize from './components/flexi-resize.svelte';
 import FlexiAdd from './components/flexi-add.svelte';
 import FlexiDelete from './components/flexi-delete.svelte';
+import ResponsiveFlexiBoard, {} from './components/responsive-flexi-board.svelte';
 import { simpleTransitionConfig, getFlexiwidgetCtx } from './system/widget/index.js';
 import { immediateTriggerConfig, longPressTriggerConfig } from './system/widget/triggers.svelte.js';
 export * from './system/types.js';
-export { FlexiBoard, FlexiTarget, FlexiWidget, FlexiGrab, FlexiResize, FlexiAdd, FlexiDelete, immediateTriggerConfig, longPressTriggerConfig, getFlexiwidgetCtx, simpleTransitionConfig };
+export { FlexiBoard, FlexiTarget, FlexiWidget, FlexiGrab, FlexiResize, FlexiAdd, FlexiDelete, immediateTriggerConfig, longPressTriggerConfig, getFlexiwidgetCtx, simpleTransitionConfig, 
+// Responsive FlexiBoard
+ResponsiveFlexiBoard };

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

@@ -1,5 +1,6 @@
 import type { FlexiTargetController } from '../target/base.svelte.js';
 import type { FlexiWidgetController } from '../widget/base.svelte.js';
+import type { FlexiLayout } from './types.js';
 export interface FlexiBoardController {
     /**
      * The reactive styling to apply to the board's root element.
@@ -9,6 +10,10 @@ export interface FlexiBoardController {
      * The reactive DOM reference to the board's root element.
      */
     ref: HTMLElement | null;
+    /**
+     * The breakpoint that the board corresponds to, if the board is responsive.
+     */
+    readonly breakpoint?: string;
     /**
      * Moves an existing widget from one target to another.
      * @param widget The widget to move.
@@ -16,4 +21,14 @@ export interface FlexiBoardController {
      * @param to The target to move the widget to.
      */
     moveWidget(widget: FlexiWidgetController, from: FlexiTargetController | undefined, to: FlexiTargetController): void;
+    /**
+     * Imports a widget layout into the board.
+     * @param layout The widget layout to import.
+     */
+    importLayout(layout: FlexiLayout): void;
+    /**
+     * Exports the current widget layout of the board.
+     * @returns The current widget layout of the board.
+     */
+    exportLayout(): FlexiLayout;
 }

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

@@ -1,20 +1,24 @@
 import type { FlexiBoardProps } from '../../components/flexi-board.svelte';
 import type { AriaPoliteness, FlexiAnnouncerController } from '../announcer.svelte.js';
 import type { FlexiPortalController } from '../portal.js';
-import type { FlexiTargetController } from '../target/base.svelte.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 { FlexiWidgetController } from '../widget/base.svelte.js';
 import type { FlexiBoardController } from './base.svelte.js';
-import type { FlexiBoardConfiguration } from './types.js';
+import type { FlexiBoardConfiguration, FlexiRegistryEntry, FlexiLayout } from './types.js';
+import type { InternalFlexiWidgetController } from '../widget/controller.svelte.js';
+import type { InternalResponsiveFlexiBoardController } from '../responsive/controller.svelte.js';
 export declare class InternalFlexiBoardController implements FlexiBoardController {
     #private;
     hoveredTarget: InternalFlexiTargetController | null;
     config?: FlexiBoardConfiguration;
+    registry?: Record<string, FlexiRegistryEntry>;
     portal: FlexiPortalController | null;
+    readonly breakpoint?: string;
     constructor(props: FlexiBoardProps);
     style: string;
+    notifyInterpolationStarted(): void;
+    notifyInterpolationEnded(): void;
     get ref(): HTMLElement | null;
     set ref(ref: HTMLElement | null);
     createTarget(config?: FlexiTargetPartialConfiguration, key?: string): InternalFlexiTargetController;
@@ -29,14 +33,32 @@ export declare class InternalFlexiBoardController implements FlexiBoardControlle
     attachAnnouncer(announcer: FlexiAnnouncerController): void;
     announce(message: string, politeness?: AriaPoliteness): void;
     oninitialloadcomplete(): void;
+    /**
+     * Imports a layout into this board.
+     *
+     * **Note**: If this board is under a ResponsiveFlexiBoard, prefer using
+     * `responsiveBoard.importLayout()` to import layouts for all breakpoints.
+     */
+    importLayout(layout: FlexiLayout): void;
+    /**
+     * Exports the current layout from this board.
+     *
+     * **Note**: If this board is under a ResponsiveFlexiBoard, prefer using
+     * `responsiveBoard.exportLayout()` to export layouts for all breakpoints.
+     */
+    exportLayout(): FlexiLayout;
     /**
      * Moves a widget from one target to another.
      * @param widget The widget to move.
      * @param from The target to move the widget from.
      * @param to The target to move the widget to.
      */
-    moveWidget(widget: FlexiWidgetController, from: FlexiTargetController | undefined, to: FlexiTargetController): boolean;
+    moveWidget(widget: InternalFlexiWidgetController, from: InternalFlexiTargetController | undefined, to: InternalFlexiTargetController): boolean;
     get currentWidgetAction(): WidgetAction | null;
+    /**
+     * Returns the parent responsive controller if this board is within a ResponsiveFlexiBoard.
+     */
+    get responsiveController(): InternalResponsiveFlexiBoardController | null;
     /**
      * Cleanup method to be called when the board is destroyed
      */