svelte-flexiboards 0.4.1 → 0.4.2

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Blakintosh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,15 +1,15 @@
-# Flexiboards
-
-Headless, reactive drag-and-drop components for Svelte. [https://svelte-flexiboards.vercel.app](https://svelte-flexiboards.vercel.app/)
-
-This version of Flexiboards is currently in an early preview stage, with development ongoing. If you encounter any issues, please report them on the [GitHub issues page](https://github.com/Blakintosh/svelte-flexiboards/issues).
-
-## Installation
-
-```
-npm i svelte-flexiboards
-```
-
-## Licence
-
-Flexiboards is open-source software licenced under the MIT licence. Please see [LICENSE.md](https://github.com/Blakintosh/svelte-flexiboards/blob/main/LICENSE.md) for more information.
+# Flexiboards
+
+Headless, reactive drag-and-drop components for Svelte. [https://svelte-flexiboards.vercel.app](https://svelte-flexiboards.vercel.app/)
+
+This version of Flexiboards is currently in an early preview stage, with development ongoing. If you encounter any issues, please report them on the [GitHub issues page](https://github.com/Blakintosh/svelte-flexiboards/issues).
+
+## Installation
+
+```
+npm i svelte-flexiboards
+```
+
+## Licence
+
+Flexiboards is open-source software licenced under the MIT licence. Please see [LICENSE.md](https://github.com/Blakintosh/svelte-flexiboards/blob/main/LICENSE.md) for more information.

package/dist/components/flexi-add.svelte

@@ -1,74 +1,74 @@
-<script module lang="ts">
-	import {
-		type FlexiAddController,
-		flexiadd,
-		type FlexiAddClasses,
-		type FlexiAddWidgetFn
-	} 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';
-
-	export type FlexiAddProps = FlexiCommonProps<FlexiAddController> & {
-		class?: FlexiAddClasses;
-		children?: Snippet<[{ adder: FlexiAddController }]>;
-		addWidget: FlexiAddWidgetFn;
-	};
-</script>
-
-<script lang="ts">
-	let {
-		children,
-		addWidget,
-		controller = $bindable(),
-		onfirstcreate,
-		class: className
-	}: FlexiAddProps = $props();
-
-	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>
-
-<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 })}
-</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>
+<script module lang="ts">
+	import {
+		type FlexiAddController,
+		flexiadd,
+		type FlexiAddClasses,
+		type FlexiAddWidgetFn
+	} 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';
+
+	export type FlexiAddProps = FlexiCommonProps<FlexiAddController> & {
+		class?: FlexiAddClasses;
+		children?: Snippet<[{ adder: FlexiAddController }]>;
+		addWidget: FlexiAddWidgetFn;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		children,
+		addWidget,
+		controller = $bindable(),
+		onfirstcreate,
+		class: className
+	}: FlexiAddProps = $props();
+
+	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>
+
+<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 })}
+</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>

package/dist/components/flexi-announcer.svelte

@@ -1,24 +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>
+<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-board.svelte

@@ -1,58 +1,58 @@
-<script module lang="ts">
-	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?: 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 = $bindable(), onfirstcreate, ...props }: FlexiBoardProps = $props();
-
-	const board = flexiboard(props);
-	controller = board;
-
-	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}
-	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. -->
-<FlexiLayoutLoader />
-
-<!-- Component that uses a shared portal for rendering grabbed widgets over the pointer. -->
-<FlexiPortal />
+<script module lang="ts">
+	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?: 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 = $bindable(), onfirstcreate, ...props }: FlexiBoardProps = $props();
+
+	const board = flexiboard(props);
+	controller = board;
+
+	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}
+	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. -->
+<FlexiLayoutLoader />
+
+<!-- Component that uses a shared portal for rendering grabbed widgets over the pointer. -->
+<FlexiPortal />

package/dist/components/flexi-delete.svelte

@@ -1,54 +1,54 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-	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';
-
-	export type FlexiDeleteProps = FlexiCommonProps<FlexiDeleteController> & {
-		class?: FlexiDeleteClasses;
-		children?: Snippet<[{ deleter: FlexiDeleteController }]>;
-	};
-</script>
-
-<script lang="ts">
-	let {
-		class: className,
-		children,
-		controller = $bindable(),
-		onfirstcreate
-	}: FlexiDeleteProps = $props();
-
-	const { deleter } = 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>
-
-<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 })}
-</div>
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+	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';
+
+	export type FlexiDeleteProps = FlexiCommonProps<FlexiDeleteController> & {
+		class?: FlexiDeleteClasses;
+		children?: Snippet<[{ deleter: FlexiDeleteController }]>;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		children,
+		controller = $bindable(),
+		onfirstcreate
+	}: FlexiDeleteProps = $props();
+
+	const { deleter } = 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>
+
+<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 })}
+</div>

package/dist/components/flexi-grab.svelte

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

package/dist/components/flexi-grid.svelte

@@ -1,27 +1,27 @@
-<script module lang="ts">
-	import { flexigrid } from '../system/grid/index.js';
-	import type { Snippet } from 'svelte';
-
-	export type FlexiGridProps = {
-		children?: Snippet;
-		class?: string;
-	};
-</script>
-
-<script lang="ts">
-	let { children, class: className }: FlexiGridProps = $props();
-
-	const { grid } = flexigrid();
-</script>
-
-<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>
+<script module lang="ts">
+	import { flexigrid } from '../system/grid/index.js';
+	import type { Snippet } from 'svelte';
+
+	export type FlexiGridProps = {
+		children?: Snippet;
+		class?: string;
+	};
+</script>
+
+<script lang="ts">
+	let { children, class: className }: FlexiGridProps = $props();
+
+	const { grid } = flexigrid();
+</script>
+
+<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,10 +1,10 @@
-<script lang="ts">
-	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
-	// the target layout of our Flexiboard.
-
-	const board = getInternalFlexiboardCtx();
-	board.oninitialloadcomplete();
-</script>
+<script lang="ts">
+	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
+	// the target layout of our Flexiboard.
+
+	const board = getInternalFlexiboardCtx();
+	board.oninitialloadcomplete();
+</script>

package/dist/components/flexi-portal.svelte

@@ -1,14 +1,14 @@
-<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.
-	onMount(() => {
-		flexiportal();
-
-		// Garbage collect on destroy
-		return () => {
-			destroyFlexiportal();
-		};
-	});
-</script>
+<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.
+	onMount(() => {
+		flexiportal();
+
+		// Garbage collect on destroy
+		return () => {
+			destroyFlexiportal();
+		};
+	});
+</script>