svelte-tweakpane-ui 1.1.4 → 1.2.0

package/dist/internal/GenericBinding.svelte

@@ -19,4 +19,4 @@
 	$: value, setValue();
 </script>
 
-<Binding bind:object bind:ref {key} {options} {...$$restProps} />
+<Binding bind:object bind:ref on:change {key} {options} {...$$restProps} />

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

@@ -50,18 +50,24 @@ declare class __sveltets_Render<
 			 * [`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.
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Binding>`'s functionality.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+			 *
 			 * @bindable
 			 * @readonly
 			 */
 			ref?: V | undefined;
 			/**
 			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-			 * the binding's containing `<Pane>`.
+			 * the `<Binding>`'s containing `<Pane>`.
+			 *
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 			 *
-			 * 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').TpPluginBundle | undefined;
@@ -74,7 +80,9 @@ declare class __sveltets_Render<
 		 * */
 		value: T;
 	};
-	events(): {} & {
+	events(): {
+		change: import('../core/Binding.svelte').BindingChangeEvent;
+	} & {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots(): {};

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

@@ -24,18 +24,24 @@ declare class __sveltets_Render<T extends BladeOptions, U extends BladeRef> {
 		 * Reference to internal Tweakpane
 		 * [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
 		 *
-		 * This is primarily for internal use, when implementing convenience components wrapping Blade's
-		 * functionality.
+		 * 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?: U | undefined;
 		/**
-		 * Imported Tweakpane `TpPluginBundle` (Aliased as `Plugin`) module to register before creating
-		 * the blade.
+		 * 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.
 		 *
-		 * This is primarily for internal use, when implementing convenience components wrapping Blade's
-		 * functionality in combination with a Tweakpane plugin.
 		 * @default `undefined`
 		 */
 		plugin?: import('tweakpane').TpPluginBundle | undefined;

package/dist/internal/GenericInput.svelte

@@ -14,4 +14,4 @@
 	};
 </script>
 
-<GenericBinding bind:value bind:ref options={optionsInternal} {...$$restProps} />
+<GenericBinding bind:value bind:ref on:change options={optionsInternal} {...$$restProps} />

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

@@ -52,18 +52,24 @@ declare class __sveltets_Render<
 			 * [`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.
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Binding>`'s functionality.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+			 *
 			 * @bindable
 			 * @readonly
 			 */
 			ref?: V | undefined;
 			/**
 			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-			 * the binding's containing `<Pane>`.
+			 * the `<Binding>`'s containing `<Pane>`.
+			 *
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 			 *
-			 * 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;
@@ -76,7 +82,9 @@ declare class __sveltets_Render<
 		 */
 		value: T;
 	};
-	events(): {} & {
+	events(): {
+		change: import('..').BindingChangeEvent;
+	} & {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots(): {};

package/dist/internal/GenericInputFolding.svelte

@@ -37,4 +37,4 @@
 		ref.element.querySelector(`.${buttonClass}`)?.click();
 </script>
 
-<GenericInput bind:value bind:ref options={optionsInternal} {...$$restProps} />
+<GenericInput bind:value bind:ref on:change options={optionsInternal} {...$$restProps} />

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

@@ -54,18 +54,24 @@ declare class __sveltets_Render<
 			 * [`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.
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Binding>`'s functionality.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+			 *
 			 * @bindable
 			 * @readonly
 			 */
 			ref?: V | undefined;
 			/**
 			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-			 * the binding's containing `<Pane>`.
+			 * the `<Binding>`'s containing `<Pane>`.
+			 *
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 			 *
-			 * 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').TpPluginBundle | undefined;
@@ -100,7 +106,9 @@ declare class __sveltets_Render<
 		 * */
 		userExpandable?: boolean | undefined;
 	};
-	events(): {} & {
+	events(): {
+		change: import('..').BindingChangeEvent;
+	} & {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots(): {};

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

@@ -52,18 +52,24 @@ declare class __sveltets_Render<
 			 * [`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.
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Binding>`'s functionality.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+			 *
 			 * @bindable
 			 * @readonly
 			 */
 			ref?: V | undefined;
 			/**
 			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-			 * the binding's containing `<Pane>`.
+			 * the `<Binding>`'s containing `<Pane>`.
+			 *
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 			 *
-			 * 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;

package/dist/internal/GenericPane.svelte

@@ -12,15 +12,15 @@
 	export let theme = void 0;
 	export let scale = 1;
 	export let userCreatedPane = true;
-	export let paneRef = void 0;
+	export let tpPane = void 0;
 	const parentStore = writable();
 	const existingParentStore = getContext('parentStore');
 	let pluginsRegistered = [];
 	const registerPlugin = (plugin) => {
-		if (paneRef === void 0) {
-			console.warn(`paneRef is undefined, failed to register plugin "${plugin.id}"`);
+		if (tpPane === void 0) {
+			console.warn(`tpPane is undefined, failed to register plugin "${plugin.id}"`);
 		} else if (!pluginsRegistered.includes(plugin.id)) {
-			paneRef?.registerPlugin(plugin);
+			tpPane?.registerPlugin(plugin);
 			pluginsRegistered.push(plugin.id);
 		}
 	};
@@ -35,7 +35,7 @@
 		$parentStore.on('fold', () => {
 			_expanded = $parentStore.expanded;
 		});
-		paneRef = $parentStore;
+		tpPane = $parentStore;
 		setContext('parentStore', parentStore);
 		onDestroy(() => {
 			$parentStore.dispose();
@@ -44,32 +44,32 @@
 		setContext('parentStore', writable(true));
 	}
 	function setScale(scale2) {
-		if (paneRef) {
+		if (tpPane) {
 			if (scale2 === 1) {
-				paneRef.element.style.removeProperty('transform-origin');
-				paneRef.element.style.removeProperty('transform');
-				paneRef.element.style.removeProperty('width');
+				tpPane.element.style.removeProperty('transform-origin');
+				tpPane.element.style.removeProperty('transform');
+				tpPane.element.style.removeProperty('width');
 			} else {
 				const clampedScale = Math.max(0, scale2);
-				paneRef.element.style.transformOrigin = '0 0';
-				paneRef.element.style.transform = `scale(${clampedScale})`;
-				paneRef.element.style.width = `${100 / clampedScale}%`;
+				tpPane.element.style.transformOrigin = '0 0';
+				tpPane.element.style.transform = `scale(${clampedScale})`;
+				tpPane.element.style.width = `${100 / clampedScale}%`;
 			}
 		}
 	}
 	function syncFolded() {
-		if (paneRef) {
-			paneRef.expanded = _expanded;
+		if (tpPane) {
+			tpPane.expanded = _expanded;
 		}
 		expanded = _expanded;
 	}
-	$: paneRef?.element && paneRef?.element.classList.add('svelte-tweakpane-ui');
-	$: paneRef && setScale(scale);
-	$: paneRef && updateCollapsibility(userExpandable, paneRef.element, 'tp-rotv_b', 'tp-rotv_m');
-	$: paneRef && title && (paneRef.title = title);
-	$: paneRef && applyTheme(paneRef.element, theme);
-	$: _expanded, paneRef && syncFolded();
-	$: paneRef && (_expanded = expanded);
+	$: tpPane?.element && tpPane?.element.classList.add('svelte-tweakpane-ui');
+	$: tpPane && setScale(scale);
+	$: tpPane && updateCollapsibility(userExpandable, tpPane.element, 'tp-rotv_b', 'tp-rotv_m');
+	$: tpPane && title && (tpPane.title = title);
+	$: tpPane && applyTheme(tpPane.element, theme);
+	$: _expanded, tpPane && expanded !== void 0 && syncFolded();
+	$: tpPane && (_expanded = expanded);
 </script>
 
 {#if BROWSER}

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

@@ -53,9 +53,19 @@ declare const __propDef: {
 		 */ scale?: number | undefined;
 		/** Internal use only. */ userCreatedPane?: boolean | undefined;
 		/**
-		 * Internal use only.
+		 * 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
-		 * */ paneRef?: TpPane | undefined;
+		 * */ tpPane?: TpPane | undefined;
 	};
 	events: {
 		[evt: string]: CustomEvent<any>;

package/dist/internal/GenericSlider.svelte

@@ -22,4 +22,4 @@
 	};
 </script>
 
-<GenericInput bind:value options={optionsInternal} {...$$restProps} />
+<GenericInput bind:value on:change options={optionsInternal} {...$$restProps} />

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

@@ -48,18 +48,24 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 			 * [`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.
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Binding>`'s functionality.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+			 *
 			 * @bindable
 			 * @readonly
 			 */
 			ref?: GenericSliderRef | undefined;
 			/**
 			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-			 * the binding's containing `<Pane>`.
+			 * the `<Binding>`'s containing `<Pane>`.
+			 *
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 			 *
-			 * 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').TpPluginBundle | undefined;
@@ -87,7 +93,7 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 		 * */
 		max?: number | undefined;
 		/**
-		 * A function to customize the point value's formatting (e.g. rounding, etc.).
+		 * A function to customize the point value's string representation (e.g. rounding, etc.).
 		 * @default `undefined`  \
 		 * Normal `.toString()` formatting.
 		 * */
@@ -112,7 +118,9 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 		 * */
 		step?: number | undefined;
 	};
-	events(): {} & {
+	events(): {
+		change: import('..').BindingChangeEvent;
+	} & {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots(): {};

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

@@ -48,18 +48,24 @@ declare const __propDef: {
 				 * [`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.
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+				 *
 				 * @bindable
 				 * @readonly
 				 */
 				ref?: import('./GenericMonitor.svelte').GenericMonitorRef | undefined;
 				/**
 				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-				 * the binding's containing `<Pane>`.
+				 * the `<Binding>`'s containing `<Pane>`.
+				 *
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 				 *
-				 * 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;

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

@@ -48,18 +48,24 @@ declare const __propDef: {
 				 * [`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.
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+				 *
 				 * @bindable
 				 * @readonly
 				 */
 				ref?: import('./GenericMonitor.svelte').GenericMonitorRef | undefined;
 				/**
 				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-				 * the binding's containing `<Pane>`.
+				 * the `<Binding>`'s containing `<Pane>`.
+				 *
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 				 *
-				 * 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;
@@ -111,7 +117,7 @@ declare const __propDef: {
 		 * */
 		max?: number | undefined;
 		/**
-		 * A function to customize the number's formatting (e.g. rounding, etc.).
+		 * A function to customize the number's string representation (e.g. rounding, etc.).
 		 * @default `undefined`  \
 		 * Normal `.toString()` formatting.
 		 * */
@@ -162,7 +168,12 @@ export type InternalMonitorNumberSlots = typeof __propDef.slots;
  * }, 100);
  * </script>
  *
- * <InternalMonitorNumber value={numberToMonitor} min={-1} max={1} graph={true} />
+ * <InternalMonitorNumber
+ * value={numberToMonitor}
+ * min={-1}
+ * max={1}
+ * graph={true}
+ * />
  * ```
  *
  * @sourceLink

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

@@ -48,18 +48,24 @@ declare const __propDef: {
 				 * [`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.
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+				 *
 				 * @bindable
 				 * @readonly
 				 */
 				ref?: import('./GenericMonitor.svelte').GenericMonitorRef | undefined;
 				/**
 				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-				 * the binding's containing `<Pane>`.
+				 * the `<Binding>`'s containing `<Pane>`.
+				 *
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 				 *
-				 * 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;

package/dist/internal/InternalPaneDraggable.svelte

@@ -14,6 +14,7 @@
 	const titlebarWindowShadeDoubleClick = false;
 	export let storePositionLocally = true;
 	export let localStoreId = localStoreDefaultId;
+	export let tpPane = void 0;
 	let positionStore;
 	if (storePositionLocally) {
 		positionStore = persisted(`${localStorePrefix}${localStoreId}`, {
@@ -35,7 +36,6 @@
 	export let title = 'Tweakpane';
 	export let scale = 1;
 	export let padding = '0';
-	let paneRef;
 	let containerElement;
 	let dragBarElement;
 	let widthHandleElement;
@@ -108,8 +108,13 @@
 		if (event.target) {
 			if (width !== void 0 && event.target === widthHandleElement) {
 				width = width < maxAvailablePanelWidth ? maxAvailablePanelWidth : minWidth;
-			} else if (titlebarWindowShadeDoubleClick && event.target === dragBarElement) {
-				paneRef.expanded = !paneRef.expanded;
+			} else if (
+				// If (moveDistance < 3 && userExpandable)
+				titlebarWindowShadeDoubleClick &&
+				event.target === dragBarElement && //
+				tpPane
+			) {
+				tpPane.expanded = !tpPane.expanded;
 			}
 		}
 	};
@@ -155,9 +160,10 @@
 				titlebarWindowShadeSingleClick &&
 				event.target === dragBarElement &&
 				moveDistance < 3 &&
-				userExpandable
+				userExpandable &&
+				tpPane
 			)
-				paneRef.expanded = !paneRef.expanded;
+				tpPane.expanded = !tpPane.expanded;
 		}
 	};
 	const touchScrollBlocker = (event) => {
@@ -165,10 +171,10 @@
 	};
 	onMount(() => {
 		setDocumentSize();
-		if (paneRef) {
-			containerElement.append(paneRef.element);
+		if (tpPane) {
+			containerElement.append(tpPane.element);
 		} else {
-			console.warn('no pane ref in draggable');
+			console.warn('no tpPane in draggable');
 		}
 		containerElement.addEventListener('touchmove', touchScrollBlocker, { passive: false });
 		const dragBarElementCheck = containerElement.querySelector('.tp-rotv_t');
@@ -214,7 +220,7 @@
 			widthHandleElement.style.display = isResizable ? 'block' : 'none';
 		}
 	}
-	$: paneRef && resizable && updateResizability(resizable);
+	$: tpPane && resizable && updateResizability(resizable);
 	function recursiveCollapse(children, maxToCollapse = Number.MAX_SAFE_INTEGER) {
 		if (maxToCollapse > 0) {
 			for (const child of children) {
@@ -246,8 +252,8 @@
 		minWidth !== void 0 &&
 		maxWidth !== void 0
 	) {
-		if (collapseChildrenToFit && containerHeightScaled > documentHeight) {
-			recursiveCollapse(paneRef.children);
+		if (collapseChildrenToFit && containerHeightScaled > documentHeight && tpPane) {
+			recursiveCollapse(tpPane.children);
 		}
 		x = clamp(x, 0, Math.max(0, documentWidth - containerWidth));
 		y = clamp(y, 0, Math.max(0, documentHeight - containerHeightScaled));
@@ -301,7 +307,7 @@
 	style:width="{width}px"
 	style:z-index={zIndexLocal}
 >
-	<GenericPane bind:expanded bind:paneRef {scale} {title} {...removeKeys($$restProps, 'position')}>
+	<GenericPane bind:expanded bind:tpPane {scale} {title} {...removeKeys($$restProps, 'position')}>
 		<slot />
 	</GenericPane>
 </div>

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

@@ -1,5 +1,4 @@
 import { SvelteComponent } from 'svelte';
-import type { Pane as TpPane } from 'tweakpane';
 declare const __propDef: {
 	props: Omit<
 		{
@@ -59,12 +58,22 @@ declare const __propDef: {
 			/** Internal use only. */
 			userCreatedPane?: boolean | undefined;
 			/**
-			 * Internal use only.
+			 * 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
 			 */
-			paneRef?: TpPane | undefined;
+			tpPane?: import('tweakpane').Pane | undefined;
 		},
-		'userCreatedPane' | 'paneRef'
+		'userCreatedPane'
 	> & {
 		/**
 		 * Horizontal position of the pane relative to the left edge of the window, in pixels.

package/dist/internal/InternalPaneFixed.svelte

@@ -6,9 +6,9 @@
 	export let y = void 0;
 	export let width = void 0;
 	export let title = 'Tweakpane';
-	let paneRef;
+	export let tpPane = void 0;
 	let paneContainer;
-	$: paneRef?.element.parentElement && (paneContainer = paneRef.element.parentElement);
+	$: tpPane?.element.parentElement && (paneContainer = tpPane.element.parentElement);
 	$: paneContainer !== void 0 &&
 		x !== void 0 &&
 		(paneContainer.style.setProperty('right', 'unset'),
@@ -20,7 +20,7 @@
 </script>
 
 <div style="display: none;">
-	<GenericPane bind:expanded bind:paneRef {title} {...removeKeys($$restProps, 'position')}>
+	<GenericPane bind:expanded bind:tpPane {title} {...removeKeys($$restProps, 'position')}>
 		<slot />
 	</GenericPane>
 </div>

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

@@ -1,5 +1,4 @@
 import { SvelteComponent } from 'svelte';
-import type { Pane as TpPane } from 'tweakpane';
 declare const __propDef: {
 	props: Omit<
 		{
@@ -59,12 +58,22 @@ declare const __propDef: {
 			/** Internal use only. */
 			userCreatedPane?: boolean | undefined;
 			/**
-			 * Internal use only.
+			 * 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
 			 */
-			paneRef?: TpPane | undefined;
+			tpPane?: import('tweakpane').Pane | undefined;
 		},
-		'userCreatedPane' | 'paneRef'
+		'userCreatedPane'
 	> & {
 		/**
 		 * Horizontal position of the pane relative to the left edge of the window, in pixels.