svelte-tweakpane-ui 1.5.2 → 1.5.4

package/dist/internal/InternalPaneDraggable.svelte

@@ -1,67 +1,67 @@
 <script context="module">
-	const localStorePrefix = 'svelte-tweakpane-ui-draggable-position-';
-	const localStoreDefaultId = '1';
-	const localStoreIds = [];
-	let zIndexGlobal = 1e3;
+	const localStorePrefix = 'svelte-tweakpane-ui-draggable-position-'
+	const localStoreDefaultId = '1'
+	const localStoreIds = []
+	let zIndexGlobal = 1e3
 </script>
 
 <script>
-	import GenericPane from './GenericPane.svelte';
-	import { clamp, getSwatchButton, pickerIsOpen, removeKeys } from '../utils.js';
-	import { onDestroy, onMount } from 'svelte';
-	import { persisted } from 'svelte-persisted-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;
-	let positionStore;
+	import GenericPane from './GenericPane.svelte'
+	import { clamp, getSwatchButton, pickerIsOpen, removeKeys } from '../utils.js'
+	import { onDestroy, onMount } from 'svelte'
+	import { persisted } from 'svelte-persisted-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
+	let positionStore
 	if (storePositionLocally) {
 		positionStore = persisted(`${localStorePrefix}${localStoreId}`, {
 			x: 0,
 			y: 0,
 			expanded: true,
-			width: 350
-		});
+			width: 350,
+		})
 	}
-	export let expanded = $positionStore?.expanded ?? true;
-	export let collapseChildrenToFit = false;
-	export let x = $positionStore?.x ?? 0;
-	export let y = $positionStore?.y ?? 0;
-	export let width = $positionStore?.width ?? 256;
-	export let resizable = true;
-	export let userExpandable = true;
-	export let minWidth = 200;
-	export let maxWidth = 600;
-	export let title = 'Tweakpane';
-	export let scale = 1;
-	export let padding = '0';
-	let containerElement;
-	let dragBarElement;
-	let widthHandleElement;
-	let containerHeight;
-	let containerHeightScaled;
-	let containerWidth;
-	let documentWidth;
-	let documentHeight;
-	let zIndexLocal = zIndexGlobal;
+	export let expanded = $positionStore?.expanded ?? true
+	export let collapseChildrenToFit = false
+	export let x = $positionStore?.x ?? 0
+	export let y = $positionStore?.y ?? 0
+	export let width = $positionStore?.width ?? 256
+	export let resizable = true
+	export let userExpandable = true
+	export let minWidth = 200
+	export let maxWidth = 600
+	export let title = 'Tweakpane'
+	export let scale = 1
+	export let padding = '0'
+	let containerElement
+	let dragBarElement
+	let widthHandleElement
+	let containerHeight
+	let containerHeightScaled
+	let containerWidth
+	let documentWidth
+	let documentHeight
+	let zIndexLocal = zIndexGlobal
 	function addStorageId() {
 		if (localStoreId !== void 0) {
 			if (localStoreIds.includes(localStoreId)) {
 				console.warn(
-					'Multiple instances of <Pane> with `mode="draggable"` and `storePositionLocally=true` detected. You must explicitly set unique localStoreId property on each component to avoid collisions.'
-				);
+					'Multiple instances of <Pane> with `mode="draggable"` and `storePositionLocally=true` detected. You must explicitly set unique localStoreId property on each component to avoid collisions.',
+				)
 			}
-			localStoreIds.push(localStoreId);
+			localStoreIds.push(localStoreId)
 		}
 	}
 	function removeStorageId() {
 		if (localStoreId) {
-			localStoreIds.splice(localStoreIds.indexOf(localStoreId), 1);
-			localStorage.removeItem(`${localStorePrefix}${localStoreId}`);
+			localStoreIds.splice(localStoreIds.indexOf(localStoreId), 1)
+			localStorage.removeItem(`${localStorePrefix}${localStoreId}`)
 		}
 	}
 	function updateLocalStoreId(id) {
@@ -77,40 +77,40 @@
 				x,
 				y,
 				expanded,
-				width
-			});
+				width,
+			})
 		}
 	}
 	function setDocumentSize() {
 		if (x !== void 0 && y !== void 0 && width !== void 0) {
-			const documentWidthPrevious = documentWidth;
-			const documentHeightPrevious = documentHeight;
-			documentWidth = document.documentElement.clientWidth;
-			documentHeight = document.documentElement.clientHeight;
-			const dx = documentWidth - documentWidthPrevious;
-			const dy = documentHeight - documentHeightPrevious;
-			const centerPercentX = (x + width / 2) / documentWidth;
-			const centerPercentY = (y + containerHeightScaled / 2) / documentHeight;
+			const documentWidthPrevious = documentWidth
+			const documentHeightPrevious = documentHeight
+			documentWidth = document.documentElement.clientWidth
+			documentHeight = document.documentElement.clientHeight
+			const dx = documentWidth - documentWidthPrevious
+			const dy = documentHeight - documentHeightPrevious
+			const centerPercentX = (x + width / 2) / documentWidth
+			const centerPercentY = (y + containerHeightScaled / 2) / documentHeight
 			if (!Number.isNaN(dx) && centerPercentX >= 0.5) {
-				x += dx;
+				x += dx
 			}
 			if (!Number.isNaN(dy) && centerPercentY >= 0.5) {
-				y += dy;
+				y += dy
 			}
 		}
 	}
 	const clickBlocker = (event) => {
-		event.stopPropagation();
-	};
-	let startWidth = 0;
-	let startOffsetX = 0;
-	let startOffsetY = 0;
-	let moveDistance = 0;
+		event.stopPropagation()
+	}
+	let startWidth = 0
+	let startOffsetX = 0
+	let startOffsetY = 0
+	let moveDistance = 0
 	const doubleClickListener = (event) => {
-		event.stopPropagation();
+		event.stopPropagation()
 		if (event.target) {
 			if (width !== void 0 && event.target === widthHandleElement) {
-				width = width < maxAvailablePanelWidth ? maxAvailablePanelWidth : minWidth;
+				width = width < maxAvailablePanelWidth ? maxAvailablePanelWidth : minWidth
 			} else if (
 				// Consider pointer movement threshold check...
 				// e.g. if (moveDistance < dragMovementDistanceThreshold && userExpandable)...
@@ -118,26 +118,26 @@
 				event.target === dragBarElement &&
 				tpPane
 			) {
-				tpPane.expanded = !tpPane.expanded;
+				tpPane.expanded = !tpPane.expanded
 			}
 		}
-	};
+	}
 	const dragStartListener = (event) => {
 		if (x !== void 0 && y !== void 0 && event.button === 0 && event.target instanceof HTMLElement) {
-			moveDistance = 0;
-			initialDragEvent = event;
-			removeDragStartListeners();
-			addDragMoveAndEndListeners();
+			moveDistance = 0
+			initialDragEvent = event
+			removeDragStartListeners()
+			addDragMoveAndEndListeners()
 			if (event.target === dragBarElement) {
-				dragBarElement.style.cursor = 'grabbing';
+				dragBarElement.style.cursor = 'grabbing'
 			}
-			containerElement.style.transition = 'width 0s ease';
-			event.target.setPointerCapture(event.pointerId);
-			startWidth = width ?? 0;
-			startOffsetX = x - event.pageX;
-			startOffsetY = y - event.pageY;
+			containerElement.style.transition = 'width 0s ease'
+			event.target.setPointerCapture(event.pointerId)
+			startWidth = width ?? 0
+			startOffsetX = x - event.pageX
+			startOffsetY = y - event.pageY
 		}
-	};
+	}
 	const dragMoveListener = (event) => {
 		if (
 			event.target instanceof HTMLElement &&
@@ -147,43 +147,39 @@
 			y !== void 0
 		) {
 			if (event.target === dragBarElement) {
-				moveDistance += Math.hypot(event.movementX, event.movementY);
-				x = event.pageX + startOffsetX;
-				y = event.pageY + startOffsetY;
+				moveDistance += Math.hypot(event.movementX, event.movementY)
+				x = event.pageX + startOffsetX
+				y = event.pageY + startOffsetY
 			} else if (event.target === widthHandleElement) {
-				width = clamp(
-					event.pageX + startOffsetX + startWidth - x,
-					minWidth,
-					maxAvailablePanelWidth
-				);
+				width = clamp(event.pageX + startOffsetX + startWidth - x, minWidth, maxAvailablePanelWidth)
 			}
 		}
-	};
+	}
 	const blurListener = () => {
 		if (pointerCancelOnWindowBlur && initialDragEvent?.target instanceof HTMLElement) {
-			const { target } = initialDragEvent;
-			const bounds = target.getBoundingClientRect();
+			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);
+				pointerType: initialDragEvent.pointerType,
+			})
+			target.dispatchEvent(pointerCancelEvent)
 		}
-	};
+	}
 	const dragEndListener = (event) => {
-		event.stopImmediatePropagation();
+		event.stopImmediatePropagation()
 		if (event.target instanceof HTMLElement) {
 			if (event.target.hasPointerCapture(event.pointerId)) {
-				event.target.releasePointerCapture(event.pointerId);
+				event.target.releasePointerCapture(event.pointerId)
 			}
 			if (event.target === dragBarElement) {
-				dragBarElement.style.removeProperty('cursor');
+				dragBarElement.style.removeProperty('cursor')
 			}
-			containerElement.style.removeProperty('transition');
+			containerElement.style.removeProperty('transition')
 			if (
 				event.type === 'pointerup' &&
 				titlebarWindowShadeSingleClick &&
@@ -192,99 +188,99 @@
 				userExpandable &&
 				tpPane
 			) {
-				tpPane.expanded = !tpPane.expanded;
+				tpPane.expanded = !tpPane.expanded
 			}
-			initialDragEvent = void 0;
-			removeDragMoveAndEndListeners();
-			addDragStartListeners();
+			initialDragEvent = void 0
+			removeDragMoveAndEndListeners()
+			addDragStartListeners()
 		}
-	};
+	}
 	const addDragStartListeners = () => {
-		dragBarElement.addEventListener('pointerdown', dragStartListener);
-		widthHandleElement?.addEventListener('pointerdown', dragStartListener);
-	};
+		dragBarElement.addEventListener('pointerdown', dragStartListener)
+		widthHandleElement?.addEventListener('pointerdown', dragStartListener)
+	}
 	const removeDragStartListeners = () => {
-		dragBarElement.removeEventListener('pointerdown', dragStartListener);
-		widthHandleElement?.removeEventListener('pointerdown', dragStartListener);
-	};
+		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);
-	};
+		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);
-	};
+		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();
-	};
+		event.preventDefault()
+	}
 	onMount(() => {
-		setDocumentSize();
+		setDocumentSize()
 		if (tpPane) {
-			containerElement.append(tpPane.element);
+			containerElement.append(tpPane.element)
 		} else {
-			console.warn('no tpPane in draggable');
+			console.warn('no tpPane in draggable')
 		}
-		containerElement.addEventListener('touchmove', touchScrollBlocker, { passive: false });
-		const dragBarElementCheck = containerElement.querySelector('.tp-rotv_t');
+		containerElement.addEventListener('touchmove', touchScrollBlocker, { passive: false })
+		const dragBarElementCheck = containerElement.querySelector('.tp-rotv_t')
 		if (dragBarElementCheck) {
-			dragBarElement = dragBarElementCheck;
-			dragBarElement.addEventListener('click', clickBlocker);
-			dragBarElement.addEventListener('dblclick', doubleClickListener);
-			widthHandleElement = dragBarElement.parentElement?.appendChild(document.createElement('div'));
+			dragBarElement = dragBarElementCheck
+			dragBarElement.addEventListener('click', clickBlocker)
+			dragBarElement.addEventListener('dblclick', doubleClickListener)
+			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.className = 'tp-custom-width-handle'
+				widthHandleElement.textContent = '\u2194'
+				widthHandleElement.addEventListener('click', clickBlocker)
+				widthHandleElement.addEventListener('dblclick', doubleClickListener)
 			}
-			addDragStartListeners();
+			addDragStartListeners()
 		}
-	});
+	})
 	onDestroy(() => {
-		removeDragStartListeners();
-		removeDragMoveAndEndListeners();
-		dragBarElement.removeEventListener('click', clickBlocker);
-		dragBarElement.removeEventListener('dblclick', doubleClickListener);
-		widthHandleElement?.removeEventListener('click', clickBlocker);
-		widthHandleElement?.removeEventListener('dblclick', doubleClickListener);
-		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);
+			localStoreIds.splice(localStoreIds.indexOf(localStoreId), 1)
 		}
-	});
+	})
 	function updateResizability(isResizable) {
 		if (widthHandleElement) {
-			widthHandleElement.style.display = isResizable ? 'block' : 'none';
+			widthHandleElement.style.display = isResizable ? 'block' : 'none'
 		}
 	}
-	$: tpPane && resizable && updateResizability(resizable);
+	$: tpPane && resizable && updateResizability(resizable)
 	function recursiveCollapse(children, maxToCollapse = Number.MAX_SAFE_INTEGER) {
 		if (maxToCollapse > 0) {
 			for (const child of children) {
 				if ('expanded' in child) {
 					if (child.expanded) {
-						maxToCollapse--;
-						child.expanded = false;
+						maxToCollapse--
+						child.expanded = false
 					}
 					if ('children' in child) {
-						recursiveCollapse(child.children, maxToCollapse);
+						recursiveCollapse(child.children, maxToCollapse)
 					}
 				} else {
-					const swatchButton = getSwatchButton(child);
+					const swatchButton = getSwatchButton(child)
 					if (swatchButton && pickerIsOpen(child)) {
-						maxToCollapse--;
-						swatchButton.click();
+						maxToCollapse--
+						swatchButton.click()
 					}
 				}
 			}
@@ -301,34 +297,34 @@
 		maxWidth !== void 0
 	) {
 		if (collapseChildrenToFit && containerHeightScaled > documentHeight && tpPane) {
-			recursiveCollapse(tpPane.children);
+			recursiveCollapse(tpPane.children)
 		}
-		x = clamp(x, 0, Math.max(0, documentWidth - containerWidth));
-		y = clamp(y, 0, Math.max(0, documentHeight - containerHeightScaled));
+		x = clamp(x, 0, Math.max(0, documentWidth - containerWidth))
+		y = clamp(y, 0, Math.max(0, documentHeight - containerHeightScaled))
 		if (documentWidth < containerWidth) {
-			width = Math.max(minWidth, Math.min(maxWidth, documentWidth));
+			width = Math.max(minWidth, Math.min(maxWidth, documentWidth))
 		}
 	}
-	$: maxAvailablePanelWidth = Math.min(maxWidth ?? 600, documentWidth - (x ?? 0));
-	$: localStoreId, storePositionLocally && addStorageId();
-	$: localStoreId, !storePositionLocally && removeStorageId();
-	$: localStoreId !== `${localStorePrefix}${localStoreId}` && updateLocalStoreId(localStoreId);
+	$: maxAvailablePanelWidth = Math.min(maxWidth ?? 600, documentWidth - (x ?? 0))
+	$: localStoreId, storePositionLocally && addStorageId()
+	$: localStoreId, !storePositionLocally && removeStorageId()
+	$: localStoreId !== `${localStorePrefix}${localStoreId}` && updateLocalStoreId(localStoreId)
 	$: storePositionLocally &&
 		localStoreId !== void 0 &&
 		x !== void 0 &&
 		y !== void 0 &&
 		width !== void 0 &&
 		expanded !== void 0 &&
-		positionStore?.set({ x, y, expanded, width });
+		positionStore?.set({ x, y, expanded, width })
 	$: {
 		if (containerElement) {
 			if (scale === void 0 || scale === 1) {
-				containerHeightScaled = containerHeight;
+				containerHeightScaled = containerHeight
 			} else {
-				const style = window.getComputedStyle(containerElement);
+				const style = window.getComputedStyle(containerElement)
 				const vPadding =
-					Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
-				containerHeightScaled = (containerHeight - vPadding) * scale + vPadding;
+					Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom)
+				containerHeightScaled = (containerHeight - vPadding) * scale + vPadding
 			}
 		}
 	}
@@ -341,10 +337,10 @@
 	bind:clientWidth={containerWidth}
 	bind:this={containerElement}
 	on:focus|capture={() => {
-		zIndexLocal = ++zIndexGlobal;
+		zIndexLocal = ++zIndexGlobal
 	}}
 	on:pointerdown|capture={() => {
-		zIndexLocal = ++zIndexGlobal;
+		zIndexLocal = ++zIndexGlobal
 	}}
 	class="draggable-container"
 	class:not-collapsable={!userExpandable}

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent } from 'svelte'
 declare const __propDef: {
 	props: {
 		/**
@@ -11,7 +11,7 @@ declare const __propDef: {
 		 * @default `0`
 		 * @bindable
 		 * */
-		x?: number;
+		x?: number
 		/**
 		 * Vertical position of the pane relative to the top of the window, in pixels.
 		 *
@@ -22,30 +22,30 @@ declare const __propDef: {
 		 * @default `0`
 		 * @bindable
 		 * */
-		y?: number;
+		y?: number
 		/**
 		 * Minimum pane width in pixels.
 		 * @default `200`
 		 * */
-		minWidth?: number;
+		minWidth?: number
 		/**
 		 * Maximum pane width in pixels.
 		 * @default `600`
 		 * */
-		maxWidth?: number;
+		maxWidth?: number
 		/**
 		 * Automatically collapse open panels when the available window size is less than the height
 		 * of the pane.
 		 *
 		 * @default `false`
 		 * */
-		collapseChildrenToFit?: boolean;
+		collapseChildrenToFit?: boolean
 		/**
 		 * Identifier to be used if multiple `<Pane position="draggable">` components with
 		 * `storePositionLocally` set to true are used on the same page.
 		 * @default `'1'`
 		 */
-		localStoreId?: string;
+		localStoreId?: string
 		/**
 		 * CSS [padding property string](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)
 		 * to apply to the draggable pane container to prevent it from being dragged all the way to
@@ -54,13 +54,13 @@ declare const __propDef: {
 		 * Useful for keeping the pane away from of menu bars, etc.
 		 * @default `'0'`
 		 */
-		padding?: string;
+		padding?: string
 		/**
 		 * Allow the user to resize the width of the pane by dragging the right corner of the title
 		 * bar.
 		 * @default `true`
 		 * */
-		resizable?: boolean;
+		resizable?: boolean
 		/**
 		 * Store the pane's position and width when the user changes it interactively.
 		 *
@@ -68,7 +68,7 @@ declare const __propDef: {
 		 * `storePositionLocally` set to `true`.
 		 * @default `true`
 		 * */
-		storePositionLocally?: boolean;
+		storePositionLocally?: boolean
 		/**
 		 * Width of the pane, in pixels.
 		 *
@@ -84,7 +84,7 @@ declare const __propDef: {
 		 * @default `256`
 		 * @bindable
 		 * */
-		width?: number;
+		width?: number
 	} & Omit<
 		{
 			/**
@@ -93,20 +93,20 @@ declare const __propDef: {
 			 * Unless `position="inline"`, in which case the default is `undefined` and no title bar is
 			 * shown.
 			 */
-			title?: string | undefined;
+			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;
+			userExpandable?: boolean
 			/**
 			 * Expand or collapse the pane into its title bar.
 			 * @default `true`
 			 * @bindable
 			 */
-			expanded?: boolean;
+			expanded?: boolean
 			/**
 			 * Custom color scheme.
 			 *
@@ -125,7 +125,7 @@ declare const __propDef: {
 			 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
 			 * set with `setGlobalDefaultTheme()`.
 			 */
-			theme?: import('..').Theme | undefined;
+			theme?: import('..').Theme | undefined
 			/**
 			 * Scales the pane's elements by a factor of `scale` to make it easier to see.
 			 *
@@ -139,9 +139,9 @@ declare const __propDef: {
 			 * Negative values are ignored.
 			 * @default `1`
 			 */
-			scale?: number;
+			scale?: number
 			/** Internal use only. */
-			userCreatedPane?: boolean;
+			userCreatedPane?: boolean
 			/**
 			 * The internal Tweakpane [`Pane`](https://tweakpane.github.io/docs/api/classes/Pane.html) object.
 			 *
@@ -156,25 +156,25 @@ declare const __propDef: {
 			 * @bindable
 			 * @readonly
 			 */
-			tpPane?: import('tweakpane').Pane | undefined;
+			tpPane?: import('tweakpane').Pane | undefined
 		},
 		'userCreatedPane'
-	>;
+	>
 	events: {
-		[evt: string]: CustomEvent<any>;
-	};
+		[evt: string]: CustomEvent<any>
+	}
 	slots: {
 		/**
 		 * Any Tweakpane component, except another `<Pane>`.
 		 */
-		default: {};
-	};
-	exports?: {} | undefined;
-	bindings?: string | undefined;
-};
-export type InternalPaneDraggableProps = typeof __propDef.props;
-export type InternalPaneDraggableEvents = typeof __propDef.events;
-export type InternalPaneDraggableSlots = typeof __propDef.slots;
+		default: {}
+	}
+	exports?: {} | undefined
+	bindings?: string | undefined
+}
+export type InternalPaneDraggableProps = typeof __propDef.props
+export type InternalPaneDraggableEvents = typeof __propDef.events
+export type InternalPaneDraggableSlots = typeof __propDef.slots
 /**
  * This component is for internal use only.
  *
@@ -186,4 +186,4 @@ export default class InternalPaneDraggable extends SvelteComponent<
 	InternalPaneDraggableEvents,
 	InternalPaneDraggableSlots
 > {}
-export {};
+export {}