svelte-flexiboards 0.2.0 → 0.3.0

package/dist/components/flexi-add.svelte

@@ -1,41 +1,87 @@
 <script module lang="ts">
 	import {
-		FlexiAddController,
+		type FlexiAddController,
 		flexiadd,
+		type FlexiAddClasses,
 		type FlexiAddWidgetFn
-	} from '../system/manage.svelte.js';
-	import FlexiWidget from './rendered-flexi-widget.svelte';
-	import type { FlexiWidgetConfiguration } from '../system/widget.svelte.js';
-	import type { Snippet } from 'svelte';
+	} from '../system/misc/adder.svelte.js';
+	import { onDestroy, type Snippet } from 'svelte';
 	import type { FlexiCommonProps } from '../system/types.js';
 	import RenderedFlexiWidget from './rendered-flexi-widget.svelte';
+	import { assistiveTextStyle, generateUniqueId } from '../system/shared/utils.svelte.js';
 
+	/** @deprecated FlexiAdd's children props are now redundant and will be removed in v0.4. */
 	type FlexiAddChildrenProps = {
+		/**
+		 * @deprecated This has been replaced with internal pointer management and is redundant. This event will be removed in v0.4.
+		 */
 		onpointerdown: (event: PointerEvent) => void;
+		/**
+		 * @deprecated This has been moved to the internal button so is now redundant. It will be removed in v0.4.
+		 */
 		style: string;
 	};
 
 	export type FlexiAddProps = FlexiCommonProps<FlexiAddController> & {
+		class?: FlexiAddClasses;
 		children?: Snippet<[{ adder: FlexiAddController; props: FlexiAddChildrenProps }]>;
 		addWidget: FlexiAddWidgetFn;
 	};
 </script>
 
 <script lang="ts">
-	let { children, addWidget, controller }: FlexiAddProps = $props();
+	let {
+		children,
+		addWidget,
+		controller = $bindable(),
+		onfirstcreate,
+		class: className
+	}: FlexiAddProps = $props();
 
-	const { adder, onpointerdown } = flexiadd(addWidget);
+	const { adder, onpointerdown, onkeydown } = flexiadd(addWidget);
 	controller = adder;
+	onfirstcreate?.(adder);
+
+	const dummyOnpointerdown = (event: PointerEvent) => {};
+
+	let derivedClassName = $derived.by(() => {
+		if (!adder) {
+			return '';
+		}
+
+		if (typeof className === 'function') {
+			return className(adder);
+		}
+
+		return className;
+	});
+
+	let assistiveTextId = generateUniqueId();
+
+	// Cleanup adder subscriptions when component is destroyed
+	onDestroy(() => {
+		adder.destroy();
+	});
 </script>
 
-{@render children?.({ adder, props: {
-	onpointerdown,
-	style: 'touch-action: none;'
-} })}
+<!-- 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}
+	aria-describedby={assistiveTextId}
+	style={'touch-action: none;'}
+	{onpointerdown}
+	{onkeydown}
+>
+	<span style={assistiveTextStyle} id={assistiveTextId}>
+		Press Enter to drag a new widget into this board.
+	</span>
+	{@render children?.({ adder, props: { style: '', onpointerdown: dummyOnpointerdown } })}
+</button>
 
 <div style="display: none;">
 	<!-- Mimics the behaviour of a FlexiTarget, as we need to render the widget so that we can "drag it in" from -->
 	{#if adder.newWidget}
 		<RenderedFlexiWidget widget={adder.newWidget} />
-	{/if}	
-</div>
+	{/if}
+</div>

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

@@ -1,17 +1,25 @@
-import { FlexiAddController, type FlexiAddWidgetFn } from '../system/manage.svelte.js';
-import type { Snippet } from 'svelte';
+import { type FlexiAddController, type FlexiAddClasses, type FlexiAddWidgetFn } from '../system/misc/adder.svelte.js';
+import { type Snippet } from 'svelte';
 import type { FlexiCommonProps } from '../system/types.js';
+/** @deprecated FlexiAdd's children props are now redundant and will be removed in v0.4. */
 type FlexiAddChildrenProps = {
+    /**
+     * @deprecated This has been replaced with internal pointer management and is redundant. This event will be removed in v0.4.
+     */
     onpointerdown: (event: PointerEvent) => void;
+    /**
+     * @deprecated This has been moved to the internal button so is now redundant. It will be removed in v0.4.
+     */
     style: string;
 };
 export type FlexiAddProps = FlexiCommonProps<FlexiAddController> & {
+    class?: FlexiAddClasses;
     children?: Snippet<[{
         adder: FlexiAddController;
         props: FlexiAddChildrenProps;
     }]>;
     addWidget: FlexiAddWidgetFn;
 };
-declare const FlexiAdd: import("svelte").Component<FlexiAddProps, {}, "">;
+declare const FlexiAdd: import("svelte").Component<FlexiAddProps, {}, "controller">;
 type FlexiAdd = ReturnType<typeof FlexiAdd>;
 export default FlexiAdd;

package/dist/components/flexi-announcer.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { flexiannouncer } from '../system/announcer.svelte.js';
+	import type { InternalFlexiBoardController } from '../system/board/controller.svelte.js';
+	import { assistiveTextStyle } from '../system/shared/utils.svelte.js';
+
+	type FlexiAnnouncerProps = {
+		provider: InternalFlexiBoardController;
+	};
+
+	let { provider }: FlexiAnnouncerProps = $props();
+
+	const controller = flexiannouncer(provider);
+</script>
+
+<div
+	role="region"
+	aria-live={controller.politeness}
+	aria-label="Drag-and-drop announcer"
+	aria-atomic="true"
+	style={assistiveTextStyle}
+	id={controller.id}
+>
+	{controller.message}
+</div>

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

@@ -0,0 +1,7 @@
+import type { InternalFlexiBoardController } from '../system/board/controller.svelte.js';
+type FlexiAnnouncerProps = {
+    provider: InternalFlexiBoardController;
+};
+declare const FlexiAnnouncer: import("svelte").Component<FlexiAnnouncerProps, {}, "">;
+type FlexiAnnouncer = ReturnType<typeof FlexiAnnouncer>;
+export default FlexiAnnouncer;

package/dist/components/flexi-board.svelte

@@ -1,31 +1,54 @@
 <script module lang="ts">
-	import {
-		flexiboard,
-		type FlexiBoardConfiguration,
-		type FlexiBoardController
-	} from '../system/provider.svelte.js';
-	import type { Snippet } from 'svelte';
-	import type { FlexiCommonProps, SvelteClassValue } from '../system/types.js';
+	import { flexiboard } from '../system/board/index.js';
+	import type { FlexiBoardController } from '../system/board/base.svelte.js';
+	import type { FlexiBoardConfiguration } from '../system/board/types.js';
+	import { onDestroy, type Snippet } from 'svelte';
+	import type { FlexiCommonProps } from '../system/types.js';
 	import FlexiLayoutLoader from './flexi-layout-loader.svelte';
 
 	export type FlexiBoardProps = FlexiCommonProps<FlexiBoardController> & {
 		children: Snippet;
 		config?: FlexiBoardConfiguration;
-		class?: SvelteClassValue;
+		class?: ClassValue;
 	};
 </script>
 
 <script lang="ts">
 	import FlexiPortal from './flexi-portal.svelte';
+	import type { ClassValue } from 'svelte/elements';
+	import { generateUniqueId, assistiveTextStyle } from '../system/shared/utils.svelte.js';
+	import FlexiAnnouncer from './flexi-announcer.svelte';
 
-	let { controller: board = $bindable(), onfirstcreate, ...props }: FlexiBoardProps = $props();
+	let { controller = $bindable(), onfirstcreate, ...props }: FlexiBoardProps = $props();
+
+	const board = flexiboard(props);
+	controller = board;
 
-	board = flexiboard(props);
 	onfirstcreate?.(board);
+
+	let assistiveTextId = generateUniqueId();
+
+	// Cleanup board subscriptions when component is destroyed
+	onDestroy(() => {
+		board.destroy();
+	});
 </script>
 
-<div class={props.class} bind:this={board.ref} style={board.style}>
+<div
+	class={props.class}
+	bind:this={board.ref}
+	style={board.style}
+	role="application"
+	aria-label="Interactive drag-and-drop interface"
+	aria-describedby={assistiveTextId}
+>
+	<span style={assistiveTextStyle} id={assistiveTextId}>
+		Press Enter to grab or resize widgets. Once grabbed, use Arrow keys to move/resize the widget,
+		Enter to confirm the action, or Esc to cancel it.
+	</span>
 	{@render props.children()}
+
+	<FlexiAnnouncer provider={board} />
 </div>
 
 <!-- Component that tells the board it can start importing stuff, if needed. -->

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

@@ -1,11 +1,13 @@
-import { type FlexiBoardConfiguration, type FlexiBoardController } from '../system/provider.svelte.js';
-import type { Snippet } from 'svelte';
-import type { FlexiCommonProps, SvelteClassValue } from '../system/types.js';
+import type { FlexiBoardController } from '../system/board/base.svelte.js';
+import type { FlexiBoardConfiguration } from '../system/board/types.js';
+import { type Snippet } from 'svelte';
+import type { FlexiCommonProps } from '../system/types.js';
 export type FlexiBoardProps = FlexiCommonProps<FlexiBoardController> & {
     children: Snippet;
     config?: FlexiBoardConfiguration;
-    class?: SvelteClassValue;
+    class?: ClassValue;
 };
+import type { ClassValue } from 'svelte/elements';
 declare const FlexiBoard: import("svelte").Component<FlexiBoardProps, {}, "controller">;
 type FlexiBoard = ReturnType<typeof FlexiBoard>;
 export default FlexiBoard;

package/dist/components/flexi-delete.svelte

@@ -1,22 +1,67 @@
 <script module lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { FlexiCommonProps, SvelteClassValue } from '../system/types.js';
-	import { flexidelete } from '../system/manage.svelte.js';
+	import type { FlexiCommonProps } from '../system/types.js';
+	import {
+		flexidelete,
+		FlexiDeleteController,
+		type FlexiDeleteClasses
+	} from '../system/misc/deleter.svelte.js';
+	import { assistiveTextStyle, generateUniqueId } from '../system/shared/utils.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 = {
-		children?: Snippet<[{ props: FlexiDeleteChildrenProps }]>;
+	export type FlexiDeleteProps = FlexiCommonProps<FlexiDeleteController> & {
+		class?: FlexiDeleteClasses;
+		children?: Snippet<[{ deleter: FlexiDeleteController; props: FlexiDeleteChildrenProps }]>;
 	};
 </script>
 
 <script lang="ts">
-	let { children }: FlexiDeleteProps = $props();
+	let {
+		class: className,
+		children,
+		controller = $bindable(),
+		onfirstcreate
+	}: FlexiDeleteProps = $props();
 
-	const { onpointerenter, onpointerleave } = flexidelete();
+	// TODO: remove pointer events in v0.4
+	const { deleter, onpointerenter, onpointerleave } = flexidelete();
+	controller = deleter;
+	onfirstcreate?.(deleter);
+
+	let derivedClassName = $derived.by(() => {
+		if (!deleter) {
+			return '';
+		}
+
+		if (typeof className === 'function') {
+			return className(deleter);
+		}
+
+		return className;
+	});
+
+	let assistiveTextId = generateUniqueId();
 </script>
 
-{@render children?.({ props: { onpointerenter, onpointerleave } })}
+<div
+	role="region"
+	bind:this={deleter.ref}
+	class={derivedClassName}
+	aria-describedby={assistiveTextId}
+>
+	<span style={assistiveTextStyle} id={assistiveTextId}>
+		Drag a widget here and press Enter to delete it.
+	</span>
+	{@render children?.({ deleter, props: { onpointerenter, onpointerleave } })}
+</div>

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

@@ -1,13 +1,24 @@
 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 = {
+export type FlexiDeleteProps = FlexiCommonProps<FlexiDeleteController> & {
+    class?: FlexiDeleteClasses;
     children?: Snippet<[{
+        deleter: FlexiDeleteController;
         props: FlexiDeleteChildrenProps;
     }]>;
 };
-declare const FlexiDelete: import("svelte").Component<FlexiDeleteProps, {}, "">;
+declare const FlexiDelete: import("svelte").Component<FlexiDeleteProps, {}, "controller">;
 type FlexiDelete = ReturnType<typeof FlexiDelete>;
 export default FlexiDelete;

package/dist/components/flexi-grab.svelte

@@ -1,20 +1,28 @@
 <script module lang="ts">
-	import { flexigrab, type FlexiWidgetController } from '../system/widget.svelte.js';
+	import { flexigrab } from '../system/widget/index.js';
+	import type { FlexiWidgetController } from '../system/widget/base.svelte.js';
 	import type { Snippet } from 'svelte';
-	import type { SvelteClassValue } from '../system/types.js';
+	import type { ClassValue } from 'svelte/elements';
 
 	type FlexiGrabProps = {
 		children?: Snippet<[{ widget: FlexiWidgetController }]>;
-		class?: SvelteClassValue;
+		class?: ClassValue;
 	};
 </script>
 
 <script lang="ts">
 	let { class: className, children }: FlexiGrabProps = $props();
 
-	const { widget, onpointerdown } = flexigrab();
+	const { widget, onpointerdown, onkeydown } = flexigrab();
 </script>
 
-<button style={"user-select: none; cursor: grab; touch-action: none;"} class={className} {onpointerdown}>
+<button
+	style={'user-select: none; touch-action: none;' +
+		(widget.draggable && widget.mounted ? 'cursor: grab;' : 'cursor: not-allowed;')}
+	disabled={!widget.draggable || !widget.mounted}
+	class={className}
+	{onpointerdown}
+	{onkeydown}
+>
 	{@render children?.({ widget })}
 </button>

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

@@ -1,11 +1,11 @@
-import { type FlexiWidgetController } from '../system/widget.svelte.js';
+import type { FlexiWidgetController } from '../system/widget/base.svelte.js';
 import type { Snippet } from 'svelte';
-import type { SvelteClassValue } from '../system/types.js';
+import type { ClassValue } from 'svelte/elements';
 type FlexiGrabProps = {
     children?: Snippet<[{
         widget: FlexiWidgetController;
     }]>;
-    class?: SvelteClassValue;
+    class?: ClassValue;
 };
 declare const FlexiGrab: import("svelte").Component<FlexiGrabProps, {}, "">;
 type FlexiGrab = ReturnType<typeof FlexiGrab>;

package/dist/components/flexi-grid.svelte

@@ -14,6 +14,14 @@
 	const { grid } = flexigrid();
 </script>
 
-<div class={className} bind:this={grid.ref} style={grid?.style}>
+<div
+	class={className}
+	role="grid"
+	aria-label="Drag-and-drop grid"
+	aria-colcount={grid.columns}
+	aria-rowcount={grid.rows}
+	bind:this={grid.ref}
+	style={grid?.style}
+>
 	{@render children?.()}
 </div>

package/dist/components/flexi-layout-loader.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getInternalFlexiboardCtx } from '../system/provider.svelte.js';
+	import { getInternalFlexiboardCtx } from '../system/board/index.js';
 
 	// This is a simple component that triggers the initial layout load.
 	// We must do this after instantiating all other components, otherwise we won't have established

package/dist/components/flexi-portal.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { flexiportal, destroyFlexiportal } from '../system/portal.js';
+	import { onMount } from 'svelte';
 
 	// Simply just wait until we're mounted to the DOM before initialising the portal.
-	$effect(() => {
+	onMount(() => {
 		flexiportal();
 
 		// Garbage collect on destroy

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

@@ -1,3 +1,18 @@
-declare const FlexiPortal: import("svelte").Component<Record<string, never>, {}, "">;
-type FlexiPortal = ReturnType<typeof FlexiPortal>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FlexiPortal: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FlexiPortal = InstanceType<typeof FlexiPortal>;
 export default FlexiPortal;

package/dist/components/flexi-resize.svelte

@@ -1,20 +1,30 @@
 <script module lang="ts">
-	import { flexiresize, type FlexiWidgetController } from '../system/widget.svelte.js';
+	import { flexiresize } from '../system/widget/index.js';
+	import type { FlexiWidgetController } from '../system/widget/base.svelte.js';
 	import type { Snippet } from 'svelte';
-	import type { SvelteClassValue } from '../system/types.js';
+	import type { ClassValue } from 'svelte/elements';
 
 	type FlexiResizeProps = {
 		children?: Snippet<[{ widget: FlexiWidgetController }]>;
-		class?: SvelteClassValue;
+		class?: ClassValue;
 	};
 </script>
 
 <script lang="ts">
 	let { class: className, children }: FlexiResizeProps = $props();
 
-	const { widget, onpointerdown } = flexiresize();
+	const { widget, onpointerdown, onkeydown } = flexiresize();
 </script>
 
-<button style={"user-select: none; cursor: nwse-resize; touch-action: none;"} class={className} {onpointerdown}>
+<button
+	style={'user-select: none; touch-action: none;' +
+		(widget.resizability != 'none' && widget.mounted
+			? 'cursor: nwse-resize'
+			: 'cursor: not-allowed')}
+	class={className}
+	disabled={widget.resizability == 'none' || !widget.mounted}
+	{onpointerdown}
+	{onkeydown}
+>
 	{@render children?.({ widget })}
 </button>

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

@@ -1,11 +1,11 @@
-import { type FlexiWidgetController } from '../system/widget.svelte.js';
+import type { FlexiWidgetController } from '../system/widget/base.svelte.js';
 import type { Snippet } from 'svelte';
-import type { SvelteClassValue } from '../system/types.js';
+import type { ClassValue } from 'svelte/elements';
 type FlexiResizeProps = {
     children?: Snippet<[{
         widget: FlexiWidgetController;
     }]>;
-    class?: SvelteClassValue;
+    class?: ClassValue;
 };
 declare const FlexiResize: import("svelte").Component<FlexiResizeProps, {}, "">;
 type FlexiResize = ReturnType<typeof FlexiResize>;

package/dist/components/flexi-target-loader.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getInternalFlexitargetCtx } from '../system/target.svelte.js';
+	import { getInternalFlexitargetCtx } from '../system/target/index.js';
 
 	// This is a simple component that triggers the initial layout load.
 	// We must do this after instantiating all other components, otherwise we won't have established

package/dist/components/flexi-target.svelte

@@ -1,11 +1,9 @@
 <script module lang="ts">
-	import type { Snippet } from 'svelte';
-	import {
-		flexitarget,
-		type FlexiTargetConfiguration,
-		type FlexiTargetController,
-		type FlexiTargetPartialConfiguration
-	} from '../system/target.svelte.js';
+	import { onDestroy, tick, untrack, type Snippet } from 'svelte';
+	import { flexitarget } from '../system/target/index.js';
+	import type { FlexiTargetController } from '../system/target/base.svelte.js';
+	import type { FlexiTargetPartialConfiguration } from '../system/target/types.js';
+
 	import type { FlexiCommonProps } from '../system/types.js';
 
 	export type FlexiTargetProps = FlexiCommonProps<FlexiTargetController> & {
@@ -52,6 +50,7 @@
 	import FlexiGrid from './flexi-grid.svelte';
 	import FlexiTargetLoader from './flexi-target-loader.svelte';
 	import RenderedFlexiWidget from './rendered-flexi-widget.svelte';
+	import type { InternalFlexiWidgetController } from '../system/widget/controller.svelte.js';
 
 	let {
 		children,
@@ -65,24 +64,49 @@
 		onfirstcreate
 	}: FlexiTargetProps = $props();
 
-	const { onpointerenter, onpointerleave, target } = flexitarget(config, key);
+	const { target } = flexitarget(config, key);
 
 	// Target created, allow the caller to access it.
 	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();
+	});
 </script>
 
-<div class={containerClass} {onpointerenter} {onpointerleave} role="grid" tabindex={0}>
-	{@render header?.({ target })}
+<div class={containerClass}>
+	{@render header?.({ target: target as FlexiTargetController })}
 
 	<!-- 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}
-			{#each target.widgets as widget (widget)}
+			<!-- Render widgets in deterministic order for tabbing and consistent DOM ordering -->
+			{#each target.orderedWidgets as widget (widget.id)}
 				<RenderedFlexiWidget {widget} />
 			{/each}
+
+			{#if target.dropzoneWidget}
+				<RenderedFlexiWidget widget={target.dropzoneWidget} />
+			{/if}
 		{/if}
 	</FlexiGrid>
 	{@render footer?.({ target })}

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

@@ -1,5 +1,6 @@
-import type { Snippet } from 'svelte';
-import { type FlexiTargetController, type FlexiTargetPartialConfiguration } from '../system/target.svelte.js';
+import { type Snippet } from 'svelte';
+import type { FlexiTargetController } from '../system/target/base.svelte.js';
+import type { FlexiTargetPartialConfiguration } from '../system/target/types.js';
 import type { FlexiCommonProps } from '../system/types.js';
 export type FlexiTargetProps = FlexiCommonProps<FlexiTargetController> & {
     /**