svelte-tweakpane-ui 1.0.0

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

@@ -0,0 +1,162 @@
+import { SvelteComponent } from 'svelte';
+import type { StringMonitorParams } from '@tweakpane/core';
+export type InternalMonitorStringOptions = StringMonitorParams;
+declare const __propDef: {
+	props: Omit<
+		Omit<
+			{
+				/**
+				 * The binding's target object with values to manipulate.
+				 * @bindable
+				 */
+				object: import('@tweakpane/core').Bindable & {
+					[x: string]: string;
+				};
+				/** The key for the value in the target `object` that the control should manipulate. */
+				key: string | number;
+				/**
+				 * Prevent interactivity and gray out the control.
+				 * @default `false`
+				 */
+				disabled?: boolean | undefined;
+				/**
+				 * Text displayed next to control.
+				 * @default `undefined`
+				 */
+				label?: string | undefined;
+				/**
+				 * Tweakpane's internal options object.
+				 *
+				 * See [`BindingParams`](https://tweakpane.github.io/docs/api/types/BindingParams.html).
+				 *
+				 * Valid types are contingent on the type of the value `key` points to in `object`.
+				 *
+				 * This is intended internal use, when implementing convenience components wrapping Binding's
+				 * functionality. Options of interest are instead exposed as top-level props in _Svelte
+				 * Tweakpane UI_.
+				 * @default `undefined`
+				 */
+				options?: StringMonitorParams | 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
+				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
+				 * this control.
+				 *
+				 * This is primarily for internal use, when implementing convenience components wrapping
+				 * Binding's functionality.
+				 * @bindable
+				 * @readonly
+				 */
+				ref?: import('./GenericMonitor.svelte').GenericMonitorRef | undefined;
+				/**
+				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+				 * the binding's containing `<Pane>`.
+				 *
+				 * This is primarily for internal use, when implementing convenience components wrapping
+				 * Binding's functionality in combination with a Tweakpane plugin.
+				 * @default `undefined`
+				 */
+				plugin?: import('@tweakpane/core').TpPluginBundle | undefined;
+			},
+			'object' | 'key'
+		> & {
+			/**
+			 * A `string` value to monitor.
+			 */
+			value: string;
+		} & {
+			/**
+			 * Number of past states to retain.
+			 * @default `1`  \
+			 * Or `64` if value is `number` and `graph` is `true`.
+			 */
+			bufferSize?: number | undefined;
+			/**
+			 * Time between value samples in milliseconds.
+			 *
+			 * Useful when `graph` is true. Defaults to reactive value updates only (`interval={0}`).
+			 * @default `0`
+			 */
+			interval?: number | undefined;
+			/**
+			 * Number of visible rows of state history.
+			 *
+			 * If `bufferSize` is larger, then the value window will scroll once state history exceeds
+			 * row count.
+			 * @default `1`  \
+			 * Or `3` if value is `string` and `multiline` is `true`.
+			 */
+			rows?: number | undefined;
+		},
+		'options' | 'ref' | 'plugin' | 'interval'
+	> & {
+		/**
+		 * A `string` value to monitor.
+		 * */
+		value: string;
+		/**
+		 * Display multiline strings.
+		 * @default `false`
+		 * */
+		multiline?: boolean | undefined;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {};
+};
+export type InternalMonitorStringProps = typeof __propDef.props;
+export type InternalMonitorStringEvents = typeof __propDef.events;
+export type InternalMonitorStringSlots = typeof __propDef.slots;
+/**
+ * This component is for internal use only.
+ *
+ * Documentation retained in case of a return to the non-dynamic component approach.
+ *
+ * Wraps the Tweakpane [monitor binding](https://tweakpane.github.io/docs/monitor-bindings/)
+ * functionality for string values.
+ *
+ * Technically, any unbound value on a normal _Svelte Tweakpane UI_ component effectively acts as a
+ * monitor, but additional monitor-specific components are provided to expose additional view options
+ * (e.g. `multiline`).
+ *
+ * Note that `interval` is not exposed because updates are driven by reactive changes in the `value`.
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the monitor in a `<Pane
+ * position='inline'>` component.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { InternalMonitorString } from 'svelte-tweakpane-ui';
+ *
+ * let stringToMonitor = 'bla\n\bla\nbla';
+ *
+ * setInterval(() => {
+ *   stringToMonitor = stringToMonitor
+ *     .split('\n')
+ *     .map(() => Math.round(Math.random() * 100).toString())
+ *     .join('\n');
+ * }, 100);
+ * </script>
+ *
+ * <InternalMonitorString value={stringToMonitor} multiline={true} />
+ * ```
+ *
+ * @sourceLink
+ * [InternalMonitorString.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/InternalMonitorString.svelte)
+ */
+export default class InternalMonitorString extends SvelteComponent<
+	InternalMonitorStringProps,
+	InternalMonitorStringEvents,
+	InternalMonitorStringSlots
+> {}
+export {};

package/dist/internal/InternalPaneDraggable.svelte

@@ -0,0 +1,368 @@
+<script context="module">
+	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-local-storage-store';
+	const TITLEBAR_WINDOW_SHADE_SINGLE_CLICK = true;
+	const TITLEBAR_WINDOW_SHADE_DOUBLE_CLICK = false;
+	export let storePositionLocally = true;
+	export let localStoreId = localStoreDefaultId;
+	let positionStore;
+	if (storePositionLocally) {
+		positionStore = persisted(`${localStorePrefix}${localStoreId}`, {
+			x: 0,
+			y: 0,
+			expanded: true,
+			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 paneRef;
+	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.'
+				);
+			}
+			localStoreIds.push(localStoreId);
+		}
+	}
+	function removeStorageId() {
+		if (localStoreId) {
+			localStoreIds.splice(localStoreIds.indexOf(localStoreId), 1);
+			localStorage.removeItem(`${localStorePrefix}${localStoreId}`);
+		}
+	}
+	function updateLocalStoreId(id) {
+		if (
+			id !== void 0 &&
+			positionStore !== void 0 &&
+			expanded !== void 0 &&
+			width !== void 0 &&
+			x !== void 0 &&
+			y !== void 0
+		) {
+			positionStore = persisted(`${localStorePrefix}${localStoreId}`, {
+				x,
+				y,
+				expanded,
+				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;
+			if (!isNaN(dx) && centerPercentX >= 0.5) {
+				x += dx;
+			}
+			if (!isNaN(dy) && centerPercentY >= 0.5) {
+				y += dy;
+			}
+		}
+	}
+	const clickBlocker = (e) => {
+		e.stopPropagation();
+	};
+	let startWidth = 0;
+	let startOffsetX = 0;
+	let startOffsetY = 0;
+	let moveDistance = 0;
+	const doubleClickListener = (e) => {
+		e.stopPropagation();
+		if (e.target) {
+			if (width !== void 0 && e.target === widthHandleElement) {
+				if (width < maxAvailablePanelWidth) {
+					width = maxAvailablePanelWidth;
+				} else {
+					width = minWidth;
+				}
+			} else if (TITLEBAR_WINDOW_SHADE_DOUBLE_CLICK && e.target === dragBarElement) {
+				paneRef.expanded = !paneRef.expanded;
+			}
+		}
+	};
+	const downListener = (e) => {
+		if (x !== void 0 && y !== void 0 && e.button === 0 && e.target instanceof HTMLElement) {
+			moveDistance = 0;
+			e.target.setPointerCapture(e.pointerId);
+			e.target.addEventListener('pointermove', moveListener);
+			e.target.addEventListener('pointerup', upListener);
+			startWidth = width ?? 0;
+			startOffsetX = x - e.pageX;
+			startOffsetY = y - e.pageY;
+		}
+	};
+	const moveListener = (e) => {
+		if (
+			e.target instanceof HTMLElement &&
+			width !== void 0 &&
+			minWidth !== void 0 &&
+			x !== void 0 &&
+			y !== void 0
+		) {
+			if (e.target === dragBarElement) {
+				moveDistance += Math.sqrt(e.movementX * e.movementX + e.movementY * e.movementY);
+				x = e.pageX + startOffsetX;
+				y = e.pageY + startOffsetY;
+			} else if (e.target === widthHandleElement) {
+				width = clamp(e.pageX + startOffsetX + startWidth - x, minWidth, maxAvailablePanelWidth);
+			}
+		}
+	};
+	const upListener = (e) => {
+		e.stopImmediatePropagation();
+		if (e.target instanceof HTMLElement) {
+			e.target.releasePointerCapture(e.pointerId);
+			e.target.removeEventListener('pointermove', moveListener);
+			e.target.removeEventListener('pointerup', upListener);
+			if (TITLEBAR_WINDOW_SHADE_SINGLE_CLICK && e.target === dragBarElement) {
+				if (moveDistance < 3 && userExpandable) paneRef.expanded = !paneRef.expanded;
+			}
+		}
+	};
+	const touchScrollBlocker = (e) => {
+		e.preventDefault();
+	};
+	onMount(() => {
+		setDocumentSize();
+		if (paneRef) {
+			containerElement.appendChild(paneRef.element);
+		} else {
+			console.warn('no pane ref in draggable');
+		}
+		containerElement.addEventListener('touchmove', touchScrollBlocker, { passive: false });
+		dragBarElement = containerElement.getElementsByClassName('tp-rotv_t')[0];
+		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.innerText = '\u2194';
+			widthHandleElement.addEventListener('click', clickBlocker);
+			widthHandleElement.addEventListener('dblclick', doubleClickListener);
+			widthHandleElement.addEventListener('pointerdown', downListener);
+		}
+	});
+	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);
+		}
+		if (localStoreId !== void 0) {
+			localStoreIds.splice(localStoreIds.indexOf(localStoreId), 1);
+		}
+	});
+	function updateResizability(isResizable) {
+		if (widthHandleElement) {
+			if (isResizable) {
+				widthHandleElement.style.display = 'block';
+			} else {
+				widthHandleElement.style.display = 'none';
+			}
+		}
+	}
+	$: paneRef && resizable && updateResizability(resizable);
+	function recursiveCollapse(children, maxToCollapse = Number.MAX_SAFE_INTEGER) {
+		console.log(maxToCollapse);
+		if (maxToCollapse > 0) {
+			children.forEach((child) => {
+				if ('expanded' in child) {
+					if (child.expanded) {
+						maxToCollapse--;
+						child.expanded = false;
+					}
+					if ('children' in child) {
+						recursiveCollapse(child.children, maxToCollapse);
+					}
+				} else {
+					const swatchButton = getSwatchButton(child);
+					if (swatchButton && pickerIsOpen(child)) {
+						maxToCollapse--;
+						swatchButton.click();
+					}
+				}
+			});
+		}
+	}
+	$: if (
+		containerHeightScaled !== void 0 &&
+		documentWidth !== void 0 &&
+		documentHeight !== void 0 &&
+		x !== void 0 &&
+		y !== void 0 &&
+		width !== void 0 &&
+		minWidth !== void 0 &&
+		maxWidth !== void 0
+	) {
+		if (collapseChildrenToFit && containerHeightScaled > documentHeight) {
+			recursiveCollapse(paneRef.children);
+		}
+		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));
+		}
+	}
+	$: 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 });
+	$: {
+		if (containerElement) {
+			if (scale === void 0 || scale === 1) {
+				containerHeightScaled = containerHeight;
+			} else {
+				const style = window.getComputedStyle(containerElement);
+				const vPadding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+				containerHeightScaled = (containerHeight - vPadding) * scale + vPadding;
+			}
+		}
+	}
+</script>
+
+<svelte:window on:resize={setDocumentSize} />
+
+<div
+	bind:this={containerElement}
+	bind:clientHeight={containerHeight}
+	bind:clientWidth={containerWidth}
+	on:focus|capture={() => {
+		zIndexLocal = ++zIndexGlobal;
+	}}
+	on:pointerdown|capture={() => {
+		zIndexLocal = ++zIndexGlobal;
+	}}
+	class="svelte-tweakpane-ui
+draggable-container"
+	class:not-collapsable={!userExpandable}
+	class:not-resizable={!resizable}
+	style:left="{x}px"
+	style:padding
+	style:top="{y}px"
+	style:width="{width}px"
+	style:z-index={zIndexLocal}
+>
+	<GenericPane bind:expanded bind:paneRef {scale} {title} {...removeKeys($$restProps, 'position')}>
+		<slot />
+	</GenericPane>
+</div>
+
+<style>
+	div.draggable-container {
+		position: fixed;
+		z-index: auto;
+		padding: 20px;
+		/* 0.2s matches Tweakpane's internal animation duration */
+		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;
+	}
+
+	div.draggable-container.not-collapsable :global(div.tp-rotv_t) {
+		/* TODO remove the magic numbers */
+		/* Expand the drag bar to fill the missing window shade icon space */
+		margin-left: -28px;
+		padding-left: 28px;
+	}
+
+	div.draggable-container.not-resizable :global(div.tp-rotv_t) {
+		/* TODO remove the magic numbers */
+		/* Expand the drag bar to fill the missing width drag icon space */
+		margin-right: -28px;
+		padding-right: 28px;
+	}
+
+	div.draggable-container :global(div.tp-lblv_l) {
+		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;
+		/* inflate the icon into a better hit zone */
+		margin: auto calc((var(--cnt-usz) + (var(--cnt-hp)) - 6px) / 2);
+	}
+
+	div.draggable-container :global(div.tp-custom-width-handle) {
+		cursor: col-resize;
+		position: absolute;
+		top: 0;
+		right: 0;
+		aspect-ratio: 1;
+		height: 100%;
+		font-size: 1.5em;
+		color: var(--tp-container-fg);
+		opacity: 0.5;
+	}
+</style>

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

@@ -0,0 +1,178 @@
+import { SvelteComponent } from 'svelte';
+import type { Pane as TpPane } from 'tweakpane';
+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;
+			/**
+			 * Internal use only.
+			 * @readonly
+			 */
+			paneRef?: TpPane | undefined;
+		},
+		'userCreatedPane' | 'paneRef'
+	> & {
+		/**
+		 * 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.)
+		 *
+		 * By default, this position is saved to local storage for persistence across page loads.
+		 * @default `0`
+		 * @bindable
+		 * */
+		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.)
+		 *
+		 * By default, this position is saved to local storage for persistence across page loads.
+		 * @default `0`
+		 * @bindable
+		 * */
+		y?: number | undefined;
+		/**
+		 * Minimum pane width in pixels.
+		 * @default `200`
+		 * */
+		minWidth?: number | undefined;
+		/**
+		 * Maximum pane width in pixels.
+		 * @default `600`
+		 * */
+		maxWidth?: number | undefined;
+		/**
+		 * Automatically collapse open panels when the available window size is less than the height
+		 * of the pane.
+		 *
+		 * @default `false`
+		 * */
+		collapseChildrenToFit?: boolean | undefined;
+		/**
+		 * 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 | undefined;
+		/**
+		 * 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
+		 * the edge of the window.
+		 *
+		 * Useful for keeping the pane away from of menu bars, etc.
+		 * @default `'0'`
+		 */
+		padding?: string | undefined;
+		/**
+		 * Allow the user to resize the width of the pane by dragging the right corner of the title
+		 * bar.
+		 * @default `true`
+		 * */
+		resizable?: boolean | undefined;
+		/**
+		 * Store the pane's position and width when the user changes it interactively.
+		 *
+		 * Set the `localStoreId` prop if you have multiple draggable panes on the same page with
+		 * `storePositionLocally` set to `true`.
+		 * @default `true`
+		 * */
+		storePositionLocally?: boolean | undefined;
+		/**
+		 * Width of the pane, in pixels.
+		 *
+		 * Setting explicitly via a passed prop will override saved user-specified width.
+		 *
+		 * Use this prop to set a starting width, or to monitor changes in the the pane's width when
+		 * a user resizes it.
+		 *
+		 * Note that height is not exposed because it is determined dynamically by the pane's
+		 * contents and state of its foldable elements.
+		 *
+		 * By default, the width value is saved to local storage for persistence across page loads.
+		 * @default `256`
+		 * @bindable
+		 * */
+		width?: number | undefined;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {
+		/**
+		 * Any Tweakpane component, except another `<Pane>`.
+		 */
+		default: {};
+	};
+};
+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.
+ *
+ * @sourceLink
+ * [InternalPaneDraggable.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/InternalPaneDraggable.svelte)
+ */
+export default class InternalPaneDraggable extends SvelteComponent<
+	InternalPaneDraggableProps,
+	InternalPaneDraggableEvents,
+	InternalPaneDraggableSlots
+> {}
+export {};