svelte-tweakpane-ui 1.2.4 → 1.2.5

package/dist/control/Image.svelte.d.ts

@@ -149,14 +149,20 @@ export type ImageSlots = typeof __propDef.slots;
  * import { Button, Image } from 'svelte-tweakpane-ui';
  *
  * let source = 'placeholder';
- * let kittenIndex = 1;
+ *
+ * async function getRandomKittenUrl() {
+ *   const { url } = await fetch(
+ *     'https://source.unsplash.com/800x800/?kitten',
+ *     { method: 'HEAD', redirect: 'follow' }
+ *   );
+ *   return url;
+ * }
  * </script>
  *
  * <Image bind:value={source} fit="contain" label="Image" />
  * <Button
- * on:click={() => {
- *   source = `https://placekitten.com/1024/1024?image=${kittenIndex}`;
- *   kittenIndex = (kittenIndex % 16) + 1;
+ * on:click={async () => {
+ *   source = await getRandomKittenUrl();
  * }}
  * label="Random Placeholder"
  * title="Load Kitten"

package/dist/core/Folder.svelte.d.ts

@@ -31,7 +31,10 @@ declare const __propDef: {
 		 * set with `setGlobalDefaultTheme()`.
 		 * */ theme?: Theme | undefined;
 	};
-	events: {
+	/**
+	 * Prevent interactivity and gray out the control.
+	 * @default `false`
+	 * */ events: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {

package/dist/internal/InternalPaneDraggable.svelte

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

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

@@ -1,471 +1,592 @@
 import { SvelteComponent } from 'svelte';
 declare class __sveltets_Render<W extends number | string | boolean | unknown> {
-	props(): Omit<
-		{
-			/**
-			 * 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;
-		} & {
-			/**
-			 * A value to monitor.
-			 * @bindable
-			 */
-			value: W;
-		} & Omit<
+	props(): W extends string | number | boolean
+		? Omit<
 				{
 					/**
-					 * The binding's target object with values to manipulate.
-					 * @bindable
-					 */
-					object: import('@tweakpane/core').Bindable & Record<string, W>;
-					/** The key for the value in the target `object` that the control should manipulate. */
-					key: string;
-					/**
-					 * Prevent interactivity and gray out the control.
-					 * @default `false`
-					 */
-					disabled?: boolean | undefined;
-					/**
-					 * Text displayed next to control.
-					 * @default `undefined`
+					 * Number of past states to retain.
+					 * @default `1`  \
+					 * Or `64` if value is `number` and `graph` is `true`.
 					 */
-					label?: string | undefined;
+					bufferSize?: number | undefined;
 					/**
-					 * Tweakpane's internal options object.
-					 *
-					 * See [`BindingParams`](https://tweakpane.github.io/docs/api/types/BindingParams.html).
+					 * Time between value samples in milliseconds.
 					 *
-					 * 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`
+					 * Useful when `graph` is true. Defaults to reactive value updates only (`interval={0}`).
+					 * @default `0`
 					 */
-					options?:
-						| (W extends string
-								? import('tweakpane').StringMonitorParams
-								: W extends boolean
-									? import('tweakpane').BooleanMonitorParams
-									: W extends number
-										? import('tweakpane').NumberMonitorParams
-										: import('@tweakpane/core').BaseMonitorParams)
-						| undefined;
+					interval?: number | undefined;
 					/**
-					 * Custom color scheme.
+					 * Number of visible rows of state history.
 					 *
-					 * @default `undefined`  \
-					 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
-					 * set with `setGlobalDefaultTheme()`.
+					 * 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`.
 					 */
-					theme?: import('..').Theme | undefined;
-					/**
-					 * Reference to internal Tweakpane
-					 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
-					 * this control.
-					 *
-					 * 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>`.
-					 *
-					 * 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.
-					 *
-					 * @default `undefined`
-					 */
-					plugin?: import('tweakpane').TpPluginBundle | undefined;
-				},
-				'object' | 'key'
-			>,
-		'ref' | 'options' | 'plugin'
-	> &
-		(W extends string
-			? {
+					rows?: number | undefined;
+				} & {
 					/**
 					 * A value to monitor.
 					 * @bindable
 					 */
-					value: string;
-					/**
-					 * Display multiline strings.
-					 * @default `false`
-					 */
-					multiline?: boolean | undefined;
+					value: W;
 				} & Omit<
-					{
-						/**
-						 * 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;
-					} & {
-						/**
-						 * A value to monitor.
-						 * @bindable
-						 */
-						value: string;
-					} & Omit<
-							{
-								/**
-								 * The binding's target object with values to manipulate.
-								 * @bindable
-								 */
-								object: import('@tweakpane/core').Bindable & Record<string, string>;
-								/** The key for the value in the target `object` that the control should manipulate. */
-								key: string;
-								/**
-								 * 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?: import('tweakpane').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 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>`.
-								 *
-								 * 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.
-								 *
-								 * @default `undefined`
-								 */
-								plugin?: import('tweakpane').TpPluginBundle | undefined;
-							},
-							'object' | 'key'
-						>,
-					'ref' | 'options' | 'plugin' | 'interval'
-				>
-			: W extends boolean
-				? {
-						/**
-						 * A value to monitor.
-						 * @bindable
-						 */
-						value: boolean;
-					} & Omit<
 						{
 							/**
-							 * Number of past states to retain.
-							 * @default `1`  \
-							 * Or `64` if value is `number` and `graph` is `true`.
+							 * The binding's target object with values to manipulate.
+							 * @bindable
+							 */
+							object: import('@tweakpane/core').Bindable & Record<string, W>;
+							/** The key for the value in the target `object` that the control should manipulate. */
+							key: string;
+							/**
+							 * Prevent interactivity and gray out the control.
+							 * @default `false`
+							 */
+							disabled?: boolean | undefined;
+							/**
+							 * Text displayed next to control.
+							 * @default `undefined`
 							 */
-							bufferSize?: number | undefined;
+							label?: string | undefined;
 							/**
-							 * Time between value samples in milliseconds.
+							 * Tweakpane's internal options object.
 							 *
-							 * Useful when `graph` is true. Defaults to reactive value updates only (`interval={0}`).
-							 * @default `0`
+							 * 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`
 							 */
-							interval?: number | undefined;
+							options?:
+								| (W extends infer T
+										? T extends W
+											? T extends string
+												? import('tweakpane').StringMonitorParams
+												: T extends boolean
+													? import('tweakpane').BooleanMonitorParams
+													: T extends number
+														? import('tweakpane').NumberMonitorParams
+														: import('@tweakpane/core').BaseMonitorParams
+											: never
+										: never)
+								| undefined;
 							/**
-							 * Number of visible rows of state history.
+							 * Custom color scheme.
 							 *
-							 * 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`.
+							 * @default `undefined`  \
+							 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+							 * set with `setGlobalDefaultTheme()`.
 							 */
-							rows?: number | undefined;
-						} & {
+							theme?: import('..').Theme | undefined;
 							/**
-							 * A value to monitor.
+							 * Reference to internal Tweakpane
+							 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
+							 * this control.
+							 *
+							 * 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>`.
+							 *
+							 * 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.
+							 *
+							 * @default `undefined`
 							 */
-							value: boolean;
-						} & Omit<
-								{
+							plugin?: import('tweakpane').TpPluginBundle | undefined;
+						},
+						'object' | 'key'
+					>,
+				'ref' | 'options' | 'plugin'
+			> &
+				(W extends infer T_1
+					? T_1 extends W
+						? T_1 extends string
+							? {
 									/**
-									 * The binding's target object with values to manipulate.
+									 * A value to monitor.
 									 * @bindable
 									 */
-									object: import('@tweakpane/core').Bindable & Record<string, boolean>;
-									/** The key for the value in the target `object` that the control should manipulate. */
-									key: string;
+									value: string;
 									/**
-									 * Prevent interactivity and gray out the control.
+									 * Display multiline strings.
 									 * @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?: import('tweakpane').BooleanMonitorParams | 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 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>`.
-									 *
-									 * 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.
-									 *
-									 * @default `undefined`
-									 */
-									plugin?: import('tweakpane').TpPluginBundle | undefined;
-								},
-								'object' | 'key'
-							>,
-						'ref' | 'options' | 'plugin' | 'interval'
-					>
-				: W extends number
-					? {
-							/**
-							 * A value to monitor.
-							 * @bindable
-							 */
-							value: number;
-							/**
-							 * Minimum bound when `graph` is true.
-							 * @default `0`
-							 */
-							min?: number | undefined;
-							/**
-							 * Maximum bound when `graph` is true.
-							 * @default `100`
-							 */
-							max?: number | undefined;
-							/**
-							 * A function to customize the number's string representation (e.g. rounding, etc.).
-							 * @default `undefined`  \
-							 * Normal `.toString()` formatting.
-							 */
-							format?: ((value: number) => string) | undefined;
-							/**
-							 * Display a graph of the value's changes over time.
-							 * @default `false`
-							 */
-							graph?: boolean | undefined;
-						} & Omit<
-							{
-								/**
-								 * 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;
-							} & {
-								/**
-								 * A value to monitor.
-								 * @bindable
-								 */
-								value: number;
-							} & Omit<
+									multiline?: boolean | undefined;
+								} & Omit<
 									{
 										/**
-										 * The binding's target object with values to manipulate.
-										 * @bindable
-										 */
-										object: import('@tweakpane/core').Bindable & Record<string, number>;
-										/** The key for the value in the target `object` that the control should manipulate. */
-										key: string;
-										/**
-										 * Prevent interactivity and gray out the control.
-										 * @default `false`
-										 */
-										disabled?: boolean | undefined;
-										/**
-										 * Text displayed next to control.
-										 * @default `undefined`
+										 * Number of past states to retain.
+										 * @default `1`  \
+										 * Or `64` if value is `number` and `graph` is `true`.
 										 */
-										label?: string | undefined;
+										bufferSize?: number | undefined;
 										/**
-										 * Tweakpane's internal options object.
+										 * Time between value samples in milliseconds.
 										 *
-										 * 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`
+										 * Useful when `graph` is true. Defaults to reactive value updates only (`interval={0}`).
+										 * @default `0`
 										 */
-										options?: import('tweakpane').NumberMonitorParams | undefined;
+										interval?: number | undefined;
 										/**
-										 * Custom color scheme.
+										 * Number of visible rows of state history.
 										 *
-										 * @default `undefined`  \
-										 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
-										 * set with `setGlobalDefaultTheme()`.
+										 * 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`.
 										 */
-										theme?: import('..').Theme | undefined;
+										rows?: number | undefined;
+									} & {
 										/**
-										 * Reference to internal Tweakpane
-										 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
-										 * this control.
-										 *
-										 * 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.
-										 *
+										 * A value to monitor.
 										 * @bindable
-										 * @readonly
 										 */
-										ref?: import('../internal/GenericMonitor.svelte').GenericMonitorRef | undefined;
+										value: string;
+									} & Omit<
+											{
+												/**
+												 * The binding's target object with values to manipulate.
+												 * @bindable
+												 */
+												object: import('@tweakpane/core').Bindable & Record<string, string>;
+												/** The key for the value in the target `object` that the control should manipulate. */
+												key: string;
+												/**
+												 * 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?: import('tweakpane').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 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>`.
+												 *
+												 * 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.
+												 *
+												 * @default `undefined`
+												 */
+												plugin?: import('tweakpane').TpPluginBundle | undefined;
+											},
+											'object' | 'key'
+										>,
+									'ref' | 'options' | 'plugin' | 'interval'
+								>
+							: T_1 extends boolean
+								? {
 										/**
-										 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-										 * 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.
-										 *
-										 * @default `undefined`
+										 * A value to monitor.
+										 * @bindable
 										 */
-										plugin?: import('tweakpane').TpPluginBundle | undefined;
-									},
-									'object' | 'key'
-								>,
-							'ref' | 'options' | 'plugin'
-						>
-					: {
+										value: boolean;
+									} & Omit<
+										{
+											/**
+											 * 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;
+										} & {
+											/**
+											 * A value to monitor.
+											 * @bindable
+											 */
+											value: boolean;
+										} & Omit<
+												{
+													/**
+													 * The binding's target object with values to manipulate.
+													 * @bindable
+													 */
+													object: import('@tweakpane/core').Bindable & Record<string, boolean>;
+													/** The key for the value in the target `object` that the control should manipulate. */
+													key: string;
+													/**
+													 * 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?: import('tweakpane').BooleanMonitorParams | 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 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>`.
+													 *
+													 * 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.
+													 *
+													 * @default `undefined`
+													 */
+													plugin?: import('tweakpane').TpPluginBundle | undefined;
+												},
+												'object' | 'key'
+											>,
+										'ref' | 'options' | 'plugin' | 'interval'
+									>
+								: T_1 extends number
+									? {
+											/**
+											 * A value to monitor.
+											 * @bindable
+											 */
+											value: number;
+											/**
+											 * Minimum bound when `graph` is true.
+											 * @default `0`
+											 */
+											min?: number | undefined;
+											/**
+											 * Maximum bound when `graph` is true.
+											 * @default `100`
+											 */
+											max?: number | undefined;
+											/**
+											 * A function to customize the number's string representation (e.g. rounding, etc.).
+											 * @default `undefined`  \
+											 * Normal `.toString()` formatting.
+											 */
+											format?: ((value: number) => string) | undefined;
+											/**
+											 * Display a graph of the value's changes over time.
+											 * @default `false`
+											 */
+											graph?: boolean | undefined;
+										} & Omit<
+											{
+												/**
+												 * 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;
+											} & {
+												/**
+												 * A value to monitor.
+												 * @bindable
+												 */
+												value: number;
+											} & Omit<
+													{
+														/**
+														 * The binding's target object with values to manipulate.
+														 * @bindable
+														 */
+														object: import('@tweakpane/core').Bindable & Record<string, number>;
+														/** The key for the value in the target `object` that the control should manipulate. */
+														key: string;
+														/**
+														 * 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?: import('tweakpane').NumberMonitorParams | 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 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>`.
+														 *
+														 * 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.
+														 *
+														 * @default `undefined`
+														 */
+														plugin?: import('tweakpane').TpPluginBundle | undefined;
+													},
+													'object' | 'key'
+												>,
+											'ref' | 'options' | 'plugin'
+										>
+									: {
+											/**
+											 * A value to monitor.
+											 * @bindable
+											 * */
+											value: string | number | boolean;
+										}
+						: never
+					: never)
+		: Omit<
+				{
+					/**
+					 * 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;
+				} & {
+					/**
+					 * A value to monitor.
+					 * @bindable
+					 */
+					value: string | number | boolean;
+				} & Omit<
+						{
 							/**
-							 * A value to monitor.
+							 * The binding's target object with values to manipulate.
 							 * @bindable
-							 * */
-							value: string | number | boolean;
-						});
+							 */
+							object: import('@tweakpane/core').Bindable &
+								Record<string, string | number | boolean>;
+							/** The key for the value in the target `object` that the control should manipulate. */
+							key: string;
+							/**
+							 * 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?:
+								| import('tweakpane').BooleanMonitorParams
+								| import('tweakpane').NumberMonitorParams
+								| import('tweakpane').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 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>`.
+							 *
+							 * 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.
+							 *
+							 * @default `undefined`
+							 */
+							plugin?: import('tweakpane').TpPluginBundle | undefined;
+						},
+						'object' | 'key'
+					>,
+				'ref' | 'options' | 'plugin'
+			>;
 	events(): {} & {
 		[evt: string]: CustomEvent<any>;
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tweakpane-ui",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "type": "module",
   "description": "A Svelte component library wrapping UI elements from Tweakpane, plus some additional functionality for convenience and flexibility.",
   "repository": {
@@ -202,33 +202,33 @@
   "devDependencies": {
     "@kitschpatrol/shared-config": "^4.6.3",
     "@phenomnomnominal/tsquery": "^6.1.3",
-    "@playwright/test": "^1.43.1",
+    "@playwright/test": "^1.44.0",
     "@stkb/rewrap": "^0.1.0",
     "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.5.6",
+    "@sveltejs/kit": "^2.5.8",
     "@sveltejs/package": "^2.3.1",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@types/eslint": "^8.56.10",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.12.7",
-    "bumpp": "^9.4.0",
+    "@types/node": "^20.12.11",
+    "bumpp": "^9.4.1",
     "eslint": "^8.57.0",
     "fs-extra": "^11.2.0",
-    "glob": "^10.3.12",
+    "glob": "^10.3.15",
     "npm-run-all": "^4.1.5",
-    "postcss-html": "^1.6.0",
+    "postcss-html": "^1.7.0",
     "publint": "^0.2.7",
     "read-package-up": "^11.0.0",
-    "svelte": "^4.2.15",
-    "svelte-check": "^3.6.9",
-    "svelte-language-server": "^0.16.7",
-    "svelte2tsx": "^0.7.6",
-    "ts-morph": "^21.0.1",
+    "svelte": "^4.2.17",
+    "svelte-check": "^3.7.1",
+    "svelte-language-server": "^0.16.9",
+    "svelte2tsx": "^0.7.8",
+    "ts-morph": "^22.0.0",
     "tslib": "^2.6.2",
-    "tsx": "^4.7.2",
-    "typescript": "~5.3.3",
-    "vite": "^5.2.9",
-    "yaml": "^2.4.1"
+    "tsx": "^4.10.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "yaml": "^2.4.2"
   },
   "scripts": {
     "build": "run-s --print-label build:*",
@@ -262,7 +262,7 @@
     "release": "run-s --print-label release:*",
     "release:1-build": "pnpm run build",
     "release:2-version": "pnpm bumpp --commit 'Release: %s' --tag 'v%s'",
-    "release:3-publish": "pnpm publish --ignore-scripts --otp $(op read 'op://Personal/Npmjs/one-time password?attribute=otp')",
+    "release:3-publish": "pnpm publish --no-git-checks --ignore-scripts --otp $(op read 'op://Personal/Npmjs/one-time password?attribute=otp')",
     "rewrap": "rewrap -i --column 100 `find src \\( -name '*.svelte' -o -name '*.ts'  -o -name '*.html' \\) -type f | grep -v src/examples`",
     "test": "run-s --print-label test:*",
     "test:integration": "playwright test",

package/readme.md

@@ -29,7 +29,7 @@
 [![NPM Package svelte-tweakpane-ui](https://img.shields.io/npm/v/svelte-tweakpane-ui.svg)](https://npmjs.com/package/svelte-tweakpane-ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![MadeWithSvelte](https://madewithsvelte.com/storage/repo-shields/4860-shield.svg)](https://madewithsvelte.com/p/svelte-tweakpane-ui/shield-link)
-[![Documentation](https://img.shields.io/badge/-Documentation-ffdd00?logo=readthedocs&logoColor=222222)](https://kitschpatrol.com/svelte-tweakpane-ui)
+[![Documentation](https://img.shields.io/badge/-Documentation-ffdd00?logo=readthedocs\&logoColor=222222)](https://kitschpatrol.com/svelte-tweakpane-ui)
 
 <!-- /badges -->
 
@@ -84,6 +84,6 @@ npm install svelte-tweakpane-ui
 
 <!-- /footer -->
 
----
+***
 
 _Note: This library is not to be confused with Karl Moore's [`svelte-tweakpane`](https://github.com/pierogis/svelte-tweakpane)._