svelte-tweakpane-ui 1.1.4 → 1.2.1

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.

package/dist/internal/InternalPaneInline.svelte

@@ -4,26 +4,26 @@
 	import { onMount } from 'svelte';
 	export let expanded = void 0;
 	export let width = void 0;
+	export let tpPane = void 0;
 	export let theme = {
 		baseBorderRadius: '0px',
 		baseShadowColor: 'hsla(0, 0%, 0%, 0)'
 		// BladeBorderRadius: '0px'
 	};
-	let paneRef;
 	let containerElement;
 	onMount(() => {
-		if (paneRef) {
-			const fixedContainer = paneRef.element.parentElement;
-			containerElement.append(paneRef.element);
+		if (tpPane) {
+			const fixedContainer = tpPane.element.parentElement;
+			containerElement.append(tpPane.element);
 			fixedContainer?.remove();
 		} else {
-			console.warn('paneRef is undefined');
+			console.warn('tpPane is undefined');
 		}
 	});
 </script>
 
 <div bind:this={containerElement} style:width={width === undefined ? null : `${width}px`}>
-	<GenericPane bind:expanded bind:paneRef {theme} {...removeKeys($$restProps, 'position')}>
+	<GenericPane bind:expanded bind:tpPane {theme} {...removeKeys($$restProps, 'position')}>
 		<slot />
 	</GenericPane>
 </div>

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

@@ -1,71 +1,77 @@
 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;
-		},
-		'paneRef'
-	> & {
+	props: {
+		/**
+		 * 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;
+	} & {
 		/**
 		 * Width of the pane, in pixels.
 		 *

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

@@ -44,18 +44,24 @@ declare const __propDef: {
 			 * 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?: FpsGraphRef | 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/monitor/Monitor.svelte.d.ts

@@ -54,18 +54,24 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 				 * [`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('../internal/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').TpPluginBundle | undefined;
@@ -150,18 +156,24 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 							 * [`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('../internal/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').TpPluginBundle | undefined;
@@ -257,18 +269,24 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 								 * [`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('../internal/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').TpPluginBundle | undefined;
@@ -359,18 +377,24 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 									 * [`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('../internal/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').TpPluginBundle | undefined;
@@ -424,7 +448,7 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 							 */
 							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.
 							 */

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

@@ -2,13 +2,13 @@ import { SvelteComponent } from 'svelte';
 import type { ProfilerBladeMeasureHandler } from '@0b5vr/tweakpane-plugin-profiler';
 import type { Simplify } from '../utils';
 export type ProfilerCalcMode = 'frame' | 'mean' | 'median';
-export type ProfilerChangeEvent = CustomEvent<number>;
 export type ProfilerMeasure = (name: string, functionToMeasure: () => void) => void;
 export type ProfilerMeasureAsync = (
 	name: string,
 	functionToMeasure: () => Promise<void>
 ) => Promise<void>;
 export type ProfilerMeasureHandler = Simplify<ProfilerBladeMeasureHandler>;
+export type ProfilerChangeEvent = CustomEvent<number>;
 import type { ProfilerBladeApi as ProfilerRef } from '@0b5vr/tweakpane-plugin-profiler/dist/types/ProfilerBladeApi.js';
 import type { ProfilerBladePluginParams as ProfilerOptions } from '@0b5vr/tweakpane-plugin-profiler/dist/types/ProfilerBladePluginParams.js';
 declare const __propDef: {
@@ -60,18 +60,24 @@ declare const __propDef: {
 			 * 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?: ProfilerRef | 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;
@@ -195,7 +201,11 @@ export type ProfilerSlots = typeof __propDef.slots;
  * ```svelte
  * <script lang="ts">
  * import { onMount } from 'svelte';
- * import { Profiler, type ProfilerMeasure, Slider } from 'svelte-tweakpane-ui';
+ * import {
+ *   Profiler,
+ *   type ProfilerMeasure,
+ *   Slider
+ * } from 'svelte-tweakpane-ui';
  *
  * // this is a readonly function handle assigned by Profiler component
  * // first used in onMount since it is not bound until then
@@ -204,7 +214,10 @@ export type ProfilerSlots = typeof __propDef.slots;
  * let loopExponent = 1;
  *
  * // helper to test Math functions
- * function hardWork(function_: (n: number) => number, exponent: number): void {
+ * function hardWork(
+ *   function_: (n: number) => number,
+ *   exponent: number
+ * ): void {
  *   measure(function_.name, () => {
  *     for (let sum = 0; sum < Number('1e' + exponent); sum++) {
  *       function_(sum);

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

@@ -54,18 +54,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('../internal/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').TpPluginBundle | undefined;

package/dist/utils.d.ts

@@ -13,6 +13,21 @@ export type HasKey<U, V extends PropertyKey> = V extends keyof U ? U[V] : unknow
 import type { Bindable, BladeApi, BladeController, TpPluginBundle, View } from '@tweakpane/core';
 export type BindingObject = Bindable;
 export type Plugin = TpPluginBundle;
+/**
+ * The base event type for value change notification events emitted by various controls.
+ */
+export type ValueChangeEvent<V> = CustomEvent<{
+	/**
+	 * A copy of the value at the time of the event.
+	 */
+	value: V;
+	/**
+	 * The origin of the event.
+	 * Changes resulting from the user's direct manipulation of the control will are marked as `internal`.
+	 * Changes resulting from manipulation of the bound value from _outside_ the component are marked as `external`.
+	 */
+	origin: 'external' | 'internal';
+}>;
 /**
  * Needed to conveniently use $$Events as the single source of truth for component events Performs
  * the transformation necessary (extracting detail types) to pass the $$Events type into

package/license.txt

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Eric Mika
+Copyright (c) 2023-2024 Eric Mika
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal