svelte-tweakpane-ui 1.2.3 → 1.2.5

package/dist/internal/InternalPaneDraggable.svelte

@@ -12,6 +12,9 @@
 	import { persisted } from 'svelte-local-storage-store';
 	const titlebarWindowShadeSingleClick = true;
 	const titlebarWindowShadeDoubleClick = false;
+	const pointerCancelOnWindowBlur = true;
+	const dragMovementDistanceThreshold = 3;
+	let initialDragEvent;
 	export let storePositionLocally = true;
 	export let localStoreId = localStoreDefaultId;
 	export let tpPane = void 0;
@@ -109,27 +112,33 @@
 			if (width !== void 0 && event.target === widthHandleElement) {
 				width = width < maxAvailablePanelWidth ? maxAvailablePanelWidth : minWidth;
 			} else if (
-				// If (moveDistance < 3 && userExpandable)
+				// Consider pointer movement threshold check...
+				// e.g. if (moveDistance < dragMovementDistanceThreshold && userExpandable)...
 				titlebarWindowShadeDoubleClick &&
-				event.target === dragBarElement && //
+				event.target === dragBarElement &&
 				tpPane
 			) {
 				tpPane.expanded = !tpPane.expanded;
 			}
 		}
 	};
-	const downListener = (event) => {
+	const dragStartListener = (event) => {
 		if (x !== void 0 && y !== void 0 && event.button === 0 && event.target instanceof HTMLElement) {
 			moveDistance = 0;
+			initialDragEvent = event;
+			removeDragStartListeners();
+			addDragMoveAndEndListeners();
+			if (event.target === dragBarElement) {
+				dragBarElement.style.cursor = 'grabbing';
+			}
+			containerElement.style.transition = 'width 0s ease';
 			event.target.setPointerCapture(event.pointerId);
-			event.target.addEventListener('pointermove', moveListener);
-			event.target.addEventListener('pointerup', upListener);
 			startWidth = width ?? 0;
 			startOffsetX = x - event.pageX;
 			startOffsetY = y - event.pageY;
 		}
 	};
-	const moveListener = (event) => {
+	const dragMoveListener = (event) => {
 		if (
 			event.target instanceof HTMLElement &&
 			width !== void 0 &&
@@ -150,22 +159,72 @@
 			}
 		}
 	};
-	const upListener = (event) => {
+	const blurListener = () => {
+		if (pointerCancelOnWindowBlur && initialDragEvent?.target instanceof HTMLElement) {
+			const { target } = initialDragEvent;
+			const bounds = target.getBoundingClientRect();
+			const pointerCancelEvent = new PointerEvent('pointercancel', {
+				bubbles: true,
+				clientX: bounds.left + bounds.width / 2,
+				clientY: bounds.top + bounds.height / 2,
+				composed: true,
+				pointerId: initialDragEvent.pointerId,
+				pointerType: initialDragEvent.pointerType
+			});
+			target.dispatchEvent(pointerCancelEvent);
+		}
+	};
+	const dragEndListener = (event) => {
 		event.stopImmediatePropagation();
 		if (event.target instanceof HTMLElement) {
-			event.target.releasePointerCapture(event.pointerId);
-			event.target.removeEventListener('pointermove', moveListener);
-			event.target.removeEventListener('pointerup', upListener);
+			if (event.target.hasPointerCapture(event.pointerId)) {
+				event.target.releasePointerCapture(event.pointerId);
+			}
+			if (event.target === dragBarElement) {
+				dragBarElement.style.removeProperty('cursor');
+			}
+			containerElement.style.removeProperty('transition');
 			if (
+				event.type === 'pointerup' &&
 				titlebarWindowShadeSingleClick &&
 				event.target === dragBarElement &&
-				moveDistance < 3 &&
+				moveDistance < dragMovementDistanceThreshold &&
 				userExpandable &&
 				tpPane
-			)
+			) {
 				tpPane.expanded = !tpPane.expanded;
+			}
+			initialDragEvent = void 0;
+			removeDragMoveAndEndListeners();
+			addDragStartListeners();
 		}
 	};
+	const addDragStartListeners = () => {
+		dragBarElement.addEventListener('pointerdown', dragStartListener);
+		widthHandleElement?.addEventListener('pointerdown', dragStartListener);
+	};
+	const removeDragStartListeners = () => {
+		dragBarElement.removeEventListener('pointerdown', dragStartListener);
+		widthHandleElement?.removeEventListener('pointerdown', dragStartListener);
+	};
+	const addDragMoveAndEndListeners = () => {
+		window.addEventListener('blur', blurListener);
+		dragBarElement.addEventListener('pointermove', dragMoveListener);
+		dragBarElement.addEventListener('pointerup', dragEndListener);
+		dragBarElement.addEventListener('pointercancel', dragEndListener);
+		widthHandleElement?.addEventListener('pointermove', dragMoveListener);
+		widthHandleElement?.addEventListener('pointerup', dragEndListener);
+		widthHandleElement?.addEventListener('pointercancel', dragEndListener);
+	};
+	const removeDragMoveAndEndListeners = () => {
+		window.removeEventListener('blur', blurListener);
+		dragBarElement.removeEventListener('pointermove', dragMoveListener);
+		dragBarElement.removeEventListener('pointerup', dragEndListener);
+		dragBarElement.removeEventListener('pointercancel', dragEndListener);
+		widthHandleElement?.removeEventListener('pointermove', dragMoveListener);
+		widthHandleElement?.removeEventListener('pointerup', dragEndListener);
+		widthHandleElement?.removeEventListener('pointercancel', dragEndListener);
+	};
 	const touchScrollBlocker = (event) => {
 		event.preventDefault();
 	};
@@ -182,35 +241,24 @@
 			dragBarElement = dragBarElementCheck;
 			dragBarElement.addEventListener('click', clickBlocker);
 			dragBarElement.addEventListener('dblclick', doubleClickListener);
-			dragBarElement.addEventListener('pointerdown', downListener);
 			widthHandleElement = dragBarElement.parentElement?.appendChild(document.createElement('div'));
 			if (widthHandleElement) {
 				widthHandleElement.className = 'tp-custom-width-handle';
 				widthHandleElement.textContent = '\u2194';
 				widthHandleElement.addEventListener('click', clickBlocker);
 				widthHandleElement.addEventListener('dblclick', doubleClickListener);
-				widthHandleElement.addEventListener('pointerdown', downListener);
 			}
+			addDragStartListeners();
 		}
 	});
 	onDestroy(() => {
-		if (dragBarElement) {
-			dragBarElement.removeEventListener('click', clickBlocker);
-			dragBarElement.removeEventListener('dblclick', doubleClickListener);
-			dragBarElement.removeEventListener('pointerdown', downListener);
-			dragBarElement.removeEventListener('pointermove', moveListener);
-			dragBarElement.removeEventListener('pointerup', upListener);
-		}
-		if (widthHandleElement) {
-			widthHandleElement.removeEventListener('click', clickBlocker);
-			widthHandleElement.removeEventListener('dblclick', doubleClickListener);
-			widthHandleElement.removeEventListener('pointerdown', downListener);
-			widthHandleElement.removeEventListener('pointermove', moveListener);
-			widthHandleElement.removeEventListener('pointerup', upListener);
-		}
-		if (containerElement) {
-			containerElement.removeEventListener('touchmove', touchScrollBlocker);
-		}
+		removeDragStartListeners();
+		removeDragMoveAndEndListeners();
+		dragBarElement.removeEventListener('click', clickBlocker);
+		dragBarElement.removeEventListener('dblclick', doubleClickListener);
+		widthHandleElement?.removeEventListener('click', clickBlocker);
+		widthHandleElement?.removeEventListener('dblclick', doubleClickListener);
+		containerElement?.removeEventListener('touchmove', touchScrollBlocker);
 		if (localStoreId !== void 0) {
 			localStoreIds.splice(localStoreIds.indexOf(localStoreId), 1);
 		}
@@ -321,13 +369,6 @@
 		transition: width 0.2s ease;
 	}
 
-	div.draggable-container:active {
-		/* prevent animation during direct manipulation */
-		transition: width 0s ease;
-		/* alternate less specific approach */
-		/* transition: none; */
-	}
-
 	/* stylelint-disable-next-line selector-class-pattern */
 	div.draggable-container :global(div.tp-rotv_t) {
 		cursor: grab;
@@ -355,10 +396,6 @@
 		white-space: nowrap;
 	}
 
-	div.draggable-container :global(div.tp-rotv_t:active) {
-		cursor: grabbing;
-	}
-
 	div.draggable-container :global(div.tp-rotv_m) {
 		right: unset;
 		left: 0;

package/dist/internal/InternalPaneDraggable.svelte.d.ts

@@ -1,80 +1,6 @@
 import { SvelteComponent } from 'svelte';
 declare const __propDef: {
-	props: Omit<
-		{
-			/**
-			 * Text in the pane's title bar.
-			 * @default `Tweakpane`  \
-			 * Unless `position="inline"`, in which case the default is `undefined` and no title bar is
-			 * shown.
-			 */
-			title?: string | undefined;
-			/**
-			 * Allow users to interactively expand / contract the pane by clicking its title bar.
-			 *
-			 * Hides the collapse button from the title bar when `false`.
-			 * @default `true`
-			 */
-			userExpandable?: boolean | undefined;
-			/**
-			 * Expand or collapse the pane into its title bar.
-			 * @default `true`
-			 * @bindable
-			 */
-			expanded?: boolean | undefined;
-			/**
-			 * Custom color scheme.
-			 *
-			 * Applies to all child components, but note that setting a different `theme` on a child
-			 * component's prop will **not** override the parent pane's theme.
-			 *
-			 * Note that `<Pane position="inline' ...>` squares off rounded corners by default to better
-			 * integrate with surrounding content.
-			 *
-			 * Simply pass a custom or default theme like `ThemeUtils.presets.standard` if you want rounded
-			 * corners on an `inline` pane.
-			 *
-			 * See also the `setGlobalDefaultTheme()` for a way to set a custom default theme for all panes
-			 * on the page.
-			 * @default `undefined`  \
-			 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
-			 * set with `setGlobalDefaultTheme()`.
-			 */
-			theme?: import('..').Theme | undefined;
-			/**
-			 * Scales the pane's elements by a factor of `scale` to make it easier to see.
-			 *
-			 * Holds the width of the pane constant, so the pane will grow taller as it is scaled and will
-			 * continue to respect position- and size-related props. If you need more breathing room, set
-			 * the `width` property on the pane.
-			 *
-			 * Note that the scaling prop is only available on `<Pane>`, not on stand-alone (implicitly
-			 * wrapped) inline elements.
-			 *
-			 * Negative values are ignored.
-			 * @default `1`
-			 */
-			scale?: number | undefined;
-			/** Internal use only. */
-			userCreatedPane?: boolean | undefined;
-			/**
-			 * The internal Tweakpane [`Pane`](https://tweakpane.github.io/docs/api/classes/Pane.html) object.
-			 *
-			 * This property is exposed for advanced use cases only.
-			 *
-			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
-			 *
-			 * Note that the `Pane` type for this property comes from the core Tweakpane library.
-			 * Creating an alias is suggested to avoid confusion with the _Svelte Tweakpane UI_ `Pane`
-			 * component: e.g. `import { type Pane as TpPane } from 'tweakpane'`
-			 *
-			 * @bindable
-			 * @readonly
-			 */
-			tpPane?: import('tweakpane').Pane | undefined;
-		},
-		'userCreatedPane'
-	> & {
+	props: {
 		/**
 		 * Horizontal position of the pane relative to the left edge of the window, in pixels.
 		 *
@@ -159,7 +85,81 @@ declare const __propDef: {
 		 * @bindable
 		 * */
 		width?: number | undefined;
-	};
+	} & Omit<
+		{
+			/**
+			 * Text in the pane's title bar.
+			 * @default `Tweakpane`  \
+			 * Unless `position="inline"`, in which case the default is `undefined` and no title bar is
+			 * shown.
+			 */
+			title?: string | undefined;
+			/**
+			 * Allow users to interactively expand / contract the pane by clicking its title bar.
+			 *
+			 * Hides the collapse button from the title bar when `false`.
+			 * @default `true`
+			 */
+			userExpandable?: boolean | undefined;
+			/**
+			 * Expand or collapse the pane into its title bar.
+			 * @default `true`
+			 * @bindable
+			 */
+			expanded?: boolean | undefined;
+			/**
+			 * Custom color scheme.
+			 *
+			 * Applies to all child components, but note that setting a different `theme` on a child
+			 * component's prop will **not** override the parent pane's theme.
+			 *
+			 * Note that `<Pane position="inline' ...>` squares off rounded corners by default to better
+			 * integrate with surrounding content.
+			 *
+			 * Simply pass a custom or default theme like `ThemeUtils.presets.standard` if you want rounded
+			 * corners on an `inline` pane.
+			 *
+			 * See also the `setGlobalDefaultTheme()` for a way to set a custom default theme for all panes
+			 * on the page.
+			 * @default `undefined`  \
+			 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+			 * set with `setGlobalDefaultTheme()`.
+			 */
+			theme?: import('..').Theme | undefined;
+			/**
+			 * Scales the pane's elements by a factor of `scale` to make it easier to see.
+			 *
+			 * Holds the width of the pane constant, so the pane will grow taller as it is scaled and will
+			 * continue to respect position- and size-related props. If you need more breathing room, set
+			 * the `width` property on the pane.
+			 *
+			 * Note that the scaling prop is only available on `<Pane>`, not on stand-alone (implicitly
+			 * wrapped) inline elements.
+			 *
+			 * Negative values are ignored.
+			 * @default `1`
+			 */
+			scale?: number | undefined;
+			/** Internal use only. */
+			userCreatedPane?: boolean | undefined;
+			/**
+			 * The internal Tweakpane [`Pane`](https://tweakpane.github.io/docs/api/classes/Pane.html) object.
+			 *
+			 * This property is exposed for advanced use cases only.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+			 *
+			 * Note that the `Pane` type for this property comes from the core Tweakpane library.
+			 * Creating an alias is suggested to avoid confusion with the _Svelte Tweakpane UI_ `Pane`
+			 * component: e.g. `import { type Pane as TpPane } from 'tweakpane'`
+			 *
+			 * @bindable
+			 * @readonly
+			 */
+			tpPane?: import('tweakpane').Pane | undefined;
+		},
+		'userCreatedPane'
+	>;
 	events: {
 		[evt: string]: CustomEvent<any>;
 	};

package/dist/internal/InternalPaneFixed.svelte.d.ts

@@ -1,6 +1,30 @@
 import { SvelteComponent } from 'svelte';
 declare const __propDef: {
-	props: Omit<
+	props: {
+		/**
+		 * Horizontal position of the pane relative to the left edge of the window, in pixels.
+		 *
+		 * Not to be confused with the `position` prop which defines _how_, not _where_, the pane is
+		 * positioned on the page. (So-named because of its similarity to CSS `position` property.)
+		 * @default `undefined`  \
+		 * 8 pixels from the right edge of the window.
+		 * */
+		x?: number | undefined;
+		/**
+		 * Vertical position of the pane relative to the top of the window, in pixels.
+		 *
+		 * Not to be confused with the `position` prop which defines _how_, not _where_, the pane is
+		 * positioned on the page. (So-named because of its similarity to CSS `position` property.)
+		 * @default `undefined`  \
+		 * 8 pixels from the top edge of the window.
+		 * */
+		y?: number | undefined;
+		/**
+		 * Width of the pane, in pixels.
+		 * @default `256`
+		 * */
+		width?: number | undefined;
+	} & Omit<
 		{
 			/**
 			 * Text in the pane's title bar.
@@ -74,31 +98,7 @@ declare const __propDef: {
 			tpPane?: import('tweakpane').Pane | undefined;
 		},
 		'userCreatedPane'
-	> & {
-		/**
-		 * Horizontal position of the pane relative to the left edge of the window, in pixels.
-		 *
-		 * Not to be confused with the `position` prop which defines _how_, not _where_, the pane is
-		 * positioned on the page. (So-named because of its similarity to CSS `position` property.)
-		 * @default `undefined`  \
-		 * 8 pixels from the right edge of the window.
-		 * */
-		x?: number | undefined;
-		/**
-		 * Vertical position of the pane relative to the top of the window, in pixels.
-		 *
-		 * Not to be confused with the `position` prop which defines _how_, not _where_, the pane is
-		 * positioned on the page. (So-named because of its similarity to CSS `position` property.)
-		 * @default `undefined`  \
-		 * 8 pixels from the top edge of the window.
-		 * */
-		y?: number | undefined;
-		/**
-		 * Width of the pane, in pixels.
-		 * @default `256`
-		 * */
-		width?: number | undefined;
-	};
+	>;
 	events: {
 		[evt: string]: CustomEvent<any>;
 	};

package/dist/internal/InternalPaneInline.svelte.d.ts

@@ -1,6 +1,19 @@
 import { SvelteComponent } from 'svelte';
 declare const __propDef: {
 	props: {
+		/**
+		 * Width of the pane, in pixels.
+		 *
+		 * If undefined, the pane will fill the width of its container. (This behavior is unique to
+		 * `position="inline"`.)
+		 *
+		 * This value is particularly important in combination with `scale`, since a scaled inline
+		 * pane will grow indefinitely wider if an intrinsic width is not specified and a containing
+		 * element is not provided.
+		 * @default `undefined`
+		 * */
+		width?: number | undefined;
+	} & {
 		/**
 		 * Text in the pane's title bar.
 		 * @default `Tweakpane`  \
@@ -71,19 +84,6 @@ declare const __propDef: {
 		 * @readonly
 		 */
 		tpPane?: import('tweakpane').Pane | undefined;
-	} & {
-		/**
-		 * Width of the pane, in pixels.
-		 *
-		 * If undefined, the pane will fill the width of its container. (This behavior is unique to
-		 * `position="inline"`.)
-		 *
-		 * This value is particularly important in combination with `scale`, since a scaled inline
-		 * pane will grow indefinitely wider if an intrinsic width is not specified and a containing
-		 * element is not provided.
-		 * @default `undefined`
-		 * */
-		width?: number | undefined;
 	};
 	events: {
 		[evt: string]: CustomEvent<any>;

package/dist/monitor/FpsGraph.svelte.d.ts

@@ -20,96 +20,96 @@ declare const __propDef: {
 		 * @default `undefined`
 		 */
 		end?: (() => void) | undefined;
+	} & {
+		/**
+		 * Lower bound of the FPS graph.
+		 * @default `0`
+		 * */
+		min?: number | undefined;
+		/**
+		 * Upper bound of the FPS graph.
+		 * @default `90`
+		 * */
+		max?: number | undefined;
+		/**
+		 * Function to start a single frame measurement sample.
+		 *
+		 * If undefined, a `requestAnimationFrame` is used to indicate the overall performance of
+		 * the page.
+		 * @default `undefined`
+		 * */
+		begin?: (() => void) | undefined;
+		/**
+		 * Function to end a single frame measurement sample.
+		 *
+		 * If undefined, a `requestAnimationFrame` is used to indicate the overall performance of
+		 * the page.
+		 * @default `undefined`
+		 * */
+		end?: (() => void) | undefined;
+		/**
+		 * Time in milliseconds between updates to the graph.
+		 * @default `1000`
+		 * */
+		interval?: number | undefined;
+		/**
+		 * Text displayed next to the FPS graph.
+		 * @default `undefined`
+		 * */
+		label?: string | undefined;
+		/**
+		 * Height of the FPS graph, in rows.
+		 * @default `2`
+		 * */
+		rows?: number | undefined;
 	} & Omit<
-		{
-			/**
-			 * Blade configuration exposing Tweakpane's internal
-			 * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
-			 *
-			 */
-			options: FpsGraphOptions;
-			/**
-			 * Prevent interactivity and gray out the control.
-			 * @default `false`
-			 */
-			disabled?: boolean | undefined;
-			/**
-			 * Custom color scheme.
-			 * @default `undefined`  \
-			 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
-			 * set with `setGlobalDefaultTheme()`.
-			 */
-			theme?: import('..').Theme | undefined;
-			/**
-			 * Reference to internal Tweakpane
-			 * [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
-			 *
-			 * This property is exposed for advanced use cases only, such as when implementing convenience
-			 * components wrapping `<Blade>`'s functionality.
-			 *
-			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
-			 *
-			 * @bindable
-			 * @readonly
-			 */
-			ref?: FpsGraphRef | undefined;
-			/**
-			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-			 * the `<Blade>`'s containing `<Pane>`.
-			 *
-			 * This property is exposed for advanced use cases only, such as when implementing convenience
-			 * components wrapping `<Blade>`'s functionality in combination with a Tweakpane plugin.
-			 *
-			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
-			 *
-			 * @default `undefined`
-			 */
-			plugin?: import('tweakpane').TpPluginBundle | undefined;
-		},
-		'ref' | 'options' | 'plugin'
-	> & {
-			/**
-			 * Lower bound of the FPS graph.
-			 * @default `0`
-			 * */
-			min?: number | undefined;
-			/**
-			 * Upper bound of the FPS graph.
-			 * @default `90`
-			 * */
-			max?: number | undefined;
-			/**
-			 * Function to start a single frame measurement sample.
-			 *
-			 * If undefined, a `requestAnimationFrame` is used to indicate the overall performance of
-			 * the page.
-			 * @default `undefined`
-			 * */
-			begin?: (() => void) | undefined;
-			/**
-			 * Function to end a single frame measurement sample.
-			 *
-			 * If undefined, a `requestAnimationFrame` is used to indicate the overall performance of
-			 * the page.
-			 * @default `undefined`
-			 * */
-			end?: (() => void) | undefined;
-			/**
-			 * Time in milliseconds between updates to the graph.
-			 * @default `1000`
-			 * */
-			interval?: number | undefined;
-			/**
-			 * Text displayed next to the FPS graph.
-			 * @default `undefined`
-			 * */
-			label?: string | undefined;
-			/**
-			 * Height of the FPS graph, in rows.
-			 * @default `2`
-			 * */
-			rows?: number | undefined;
-		};
+			{
+				/**
+				 * Blade configuration exposing Tweakpane's internal
+				 * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
+				 *
+				 */
+				options: FpsGraphOptions;
+				/**
+				 * Prevent interactivity and gray out the control.
+				 * @default `false`
+				 */
+				disabled?: boolean | undefined;
+				/**
+				 * Custom color scheme.
+				 * @default `undefined`  \
+				 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+				 * set with `setGlobalDefaultTheme()`.
+				 */
+				theme?: import('..').Theme | undefined;
+				/**
+				 * Reference to internal Tweakpane
+				 * [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
+				 *
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Blade>`'s functionality.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+				 *
+				 * @bindable
+				 * @readonly
+				 */
+				ref?: FpsGraphRef | undefined;
+				/**
+				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+				 * the `<Blade>`'s containing `<Pane>`.
+				 *
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Blade>`'s functionality in combination with a Tweakpane plugin.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+				 *
+				 * @default `undefined`
+				 */
+				plugin?: import('tweakpane').TpPluginBundle | undefined;
+			},
+			'ref' | 'options' | 'plugin'
+		>;
 	slots: {};
 	events: {
 		/**
@@ -198,7 +198,7 @@ export type FpsGraphSlots = typeof __propDef.slots;
  *         (x / gridSize) * phase +
  *         (y / gridSize) * phase}deg)"
  *       style:width="{100 / gridSize}%"
- *     />
+ *     ></div>
  *   {/each}
  * {/each}
  * </div>