svelte-tweakpane-ui 1.0.1 → 1.1.0

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

@@ -91,5 +91,15 @@ declare const __propDef: {
 export type ClsPadProps = typeof __propDef.props;
 export type ClsPadEvents = typeof __propDef.events;
 export type ClsPadSlots = typeof __propDef.slots;
+/**
+ * This component is for internal use only.
+ *
+ * It's a utility to assist in estimating the rendered height of Tweakpane components for use during prerendering in an attempt to minimize layout shift upon hydration.
+ *
+ * The associated SSR / prerendering CLS prevention feature is experimental.
+ *
+ * @sourceLink
+ * [ClsPad.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/ClsPad.svelte)
+ */
 export default class ClsPad extends SvelteComponent<ClsPadProps, ClsPadEvents, ClsPadSlots> {}
 export {};

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

@@ -11,11 +11,9 @@ declare class __sveltets_Render<
 			 * The binding's target object with values to manipulate.
 			 * @bindable
 			 */
-			object: import('@tweakpane/core').Bindable & {
-				[x: string]: T;
-			};
+			object: import('@tweakpane/core').Bindable & Record<string, T>;
 			/** The key for the value in the target `object` that the control should manipulate. */
-			key: string | number;
+			key: string;
 			/**
 			 * Prevent interactivity and gray out the control.
 			 * @default `false`

package/dist/internal/GenericBladeFolding.svelte

@@ -22,7 +22,7 @@
 	$: options = {
 		...options,
 		expanded: initialExpanded,
-		// only set once
+		// Only set once
 		picker
 	};
 	$: ref &&

package/dist/internal/GenericInput.svelte

@@ -4,16 +4,14 @@
 	generics="T extends any, U extends GenericInputOptions = GenericInputOptions, V extends GenericInputRef = GenericInputRef"
 >
 	import GenericBinding from './GenericBinding.svelte';
-	import { BROWSER } from 'esm-env';
 	export let options = void 0;
 	export let ref = void 0;
 	export let value;
 	let optionsInternal;
-	$: BROWSER &&
-		(optionsInternal = {
-			...options,
-			readonly: false
-		});
+	$: optionsInternal = {
+		...options,
+		readonly: false
+	};
 </script>
 
 <GenericBinding bind:value bind:ref options={optionsInternal} {...$$restProps} />

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

@@ -13,11 +13,9 @@ declare class __sveltets_Render<
 			 * The binding's target object with values to manipulate.
 			 * @bindable
 			 */
-			object: import('@tweakpane/core').Bindable & {
-				[x: string]: T;
-			};
+			object: import('@tweakpane/core').Bindable & Record<string, T>;
 			/** The key for the value in the target `object` that the control should manipulate. */
-			key: string | number;
+			key: string;
 			/**
 			 * Prevent interactivity and gray out the control.
 			 * @default `false`

package/dist/internal/GenericInputFolding.svelte

@@ -26,7 +26,7 @@
 	$: optionsInternal = {
 		...options,
 		expanded: initialExpanded,
-		// only set once
+		// Only set once
 		picker
 	};
 	$: ref && buttonClass && updateCollapsibility(userExpandable ?? true, ref.element, buttonClass);
@@ -34,7 +34,7 @@
 		buttonClass &&
 		expanded !== internalExpanded &&
 		ref.element.querySelectorAll(`.${buttonClass}`).length > 0 &&
-		ref.element.querySelector(`.${buttonClass}`).click();
+		ref.element.querySelector(`.${buttonClass}`)?.click();
 </script>
 
 <GenericInput bind:value bind:ref options={optionsInternal} {...$$restProps} />

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

@@ -15,11 +15,9 @@ declare class __sveltets_Render<
 			 * The binding's target object with values to manipulate.
 			 * @bindable
 			 */
-			object: import('@tweakpane/core').Bindable & {
-				[x: string]: T;
-			};
+			object: import('@tweakpane/core').Bindable & Record<string, T>;
 			/** The key for the value in the target `object` that the control should manipulate. */
-			key: string | number;
+			key: string;
 			/**
 			 * Prevent interactivity and gray out the control.
 			 * @default `false`

package/dist/internal/GenericMonitor.svelte

@@ -14,7 +14,7 @@
 	$: optionsInternal = {
 		bufferSize,
 		interval: interval ?? 0,
-		// zero confirmed as never updating (not same interface as setInterval())
+		// Zero confirmed as never updating (not same interface as setInterval())
 		rows,
 		...options,
 		readonly: true

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

@@ -13,11 +13,9 @@ declare class __sveltets_Render<
 			 * The binding's target object with values to manipulate.
 			 * @bindable
 			 */
-			object: import('@tweakpane/core').Bindable & {
-				[x: string]: T;
-			};
+			object: import('@tweakpane/core').Bindable & Record<string, T>;
 			/** The key for the value in the target `object` that the control should manipulate. */
-			key: string | number;
+			key: string;
 			/**
 			 * Prevent interactivity and gray out the control.
 			 * @default `false`

package/dist/internal/GenericPane.svelte

@@ -18,13 +18,10 @@
 	let pluginsRegistered = [];
 	const registerPlugin = (plugin) => {
 		if (paneRef === void 0) {
-			console.warn('`paneRef is undefined, failed to register plugin "${plugin.id}"');
-		} else {
-			if (pluginsRegistered.includes(plugin.id)) {
-			} else {
-				paneRef?.registerPlugin(plugin);
-				pluginsRegistered.push(plugin.id);
-			}
+			console.warn(`paneRef is undefined, failed to register plugin "${plugin.id}"`);
+		} else if (!pluginsRegistered.includes(plugin.id)) {
+			paneRef?.registerPlugin(plugin);
+			pluginsRegistered.push(plugin.id);
 		}
 	};
 	setContext('registerPlugin', registerPlugin);
@@ -66,14 +63,13 @@
 		}
 		expanded = _expanded;
 	}
-	$: BROWSER && paneRef && setScale(scale);
-	$: BROWSER &&
-		paneRef &&
-		updateCollapsibility(userExpandable, paneRef.element, 'tp-rotv_b', 'tp-rotv_m');
-	$: BROWSER && paneRef && title && (paneRef.title = title);
-	$: BROWSER && paneRef && applyTheme(paneRef.element, theme);
-	$: _expanded, BROWSER && paneRef && syncFolded();
-	$: BROWSER && paneRef && (_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);
 </script>
 
 {#if BROWSER}
@@ -98,3 +94,18 @@
 {:else}
 	<ClsPad keysAdd={['containerVerticalPadding', 'containerUnitSize']} {theme} />
 {/if}
+
+<style>
+	/* Blade labels */
+	:global(div.svelte-tweakpane-ui div.tp-lblv_l) {
+		overflow: hidden;
+		padding-right: var(--cnt-hp);
+		text-overflow: ellipsis;
+	}
+
+	/* Pane title label */
+	:global(div.svelte-tweakpane-ui div.tp-rotv_t) {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+</style>

package/dist/internal/GenericSlider.svelte

@@ -1,6 +1,5 @@
 <script generics="T extends number | IntervalSliderValue">
 	import GenericInput from './GenericInput.svelte';
-	import { BROWSER } from 'esm-env';
 	export let value;
 	export let options = void 0;
 	export let min = void 0;
@@ -10,18 +9,17 @@
 	export let keyScale = void 0;
 	export let format = void 0;
 	let formatProxy = format;
-	$: BROWSER && formatProxy !== format && (formatProxy = format);
+	$: formatProxy !== format && (formatProxy = format);
 	let optionsInternal;
-	$: BROWSER &&
-		(optionsInternal = {
-			min,
-			max,
-			format: formatProxy,
-			keyScale,
-			pointerScale,
-			step,
-			...options
-		});
+	$: optionsInternal = {
+		min,
+		max,
+		format: formatProxy,
+		keyScale,
+		pointerScale,
+		step,
+		...options
+	};
 </script>
 
 <GenericInput bind:value options={optionsInternal} {...$$restProps} />

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

@@ -9,11 +9,9 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 			 * The binding's target object with values to manipulate.
 			 * @bindable
 			 */
-			object: import('@tweakpane/core').Bindable & {
-				[x: string]: T;
-			};
+			object: import('@tweakpane/core').Bindable & Record<string, T>;
 			/** The key for the value in the target `object` that the control should manipulate. */
-			key: string | number;
+			key: string;
 			/**
 			 * Prevent interactivity and gray out the control.
 			 * @default `false`

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

@@ -9,11 +9,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: boolean;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, boolean>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -9,11 +9,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: number;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, number>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -9,11 +9,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: string;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, string>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

package/dist/internal/InternalPaneDraggable.svelte

@@ -10,8 +10,8 @@
 	import { clamp, getSwatchButton, pickerIsOpen, removeKeys } from '../utils.js';
 	import { onDestroy, onMount } from 'svelte';
 	import { persisted } from 'svelte-local-storage-store';
-	const TITLEBAR_WINDOW_SHADE_SINGLE_CLICK = true;
-	const TITLEBAR_WINDOW_SHADE_DOUBLE_CLICK = false;
+	const titlebarWindowShadeSingleClick = true;
+	const titlebarWindowShadeDoubleClick = false;
 	export let storePositionLocally = true;
 	export let localStoreId = localStoreDefaultId;
 	let positionStore;
@@ -108,7 +108,7 @@
 		if (event.target) {
 			if (width !== void 0 && event.target === widthHandleElement) {
 				width = width < maxAvailablePanelWidth ? maxAvailablePanelWidth : minWidth;
-			} else if (TITLEBAR_WINDOW_SHADE_DOUBLE_CLICK && event.target === dragBarElement) {
+			} else if (titlebarWindowShadeDoubleClick && event.target === dragBarElement) {
 				paneRef.expanded = !paneRef.expanded;
 			}
 		}
@@ -152,7 +152,7 @@
 			event.target.removeEventListener('pointermove', moveListener);
 			event.target.removeEventListener('pointerup', upListener);
 			if (
-				TITLEBAR_WINDOW_SHADE_SINGLE_CLICK &&
+				titlebarWindowShadeSingleClick &&
 				event.target === dragBarElement &&
 				moveDistance < 3 &&
 				userExpandable
@@ -171,17 +171,20 @@
 			console.warn('no pane ref in draggable');
 		}
 		containerElement.addEventListener('touchmove', touchScrollBlocker, { passive: false });
-		dragBarElement = containerElement.querySelector('.tp-rotv_t');
-		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);
+		const dragBarElementCheck = containerElement.querySelector('.tp-rotv_t');
+		if (dragBarElementCheck) {
+			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);
+			}
 		}
 	});
 	onDestroy(() => {
@@ -280,17 +283,16 @@
 <svelte:window on:resize={setDocumentSize} />
 
 <div
-	bind:this={containerElement}
 	bind:clientHeight={containerHeight}
 	bind:clientWidth={containerWidth}
+	bind:this={containerElement}
 	on:focus|capture={() => {
 		zIndexLocal = ++zIndexGlobal;
 	}}
 	on:pointerdown|capture={() => {
 		zIndexLocal = ++zIndexGlobal;
 	}}
-	class="svelte-tweakpane-ui
-draggable-container"
+	class="draggable-container"
 	class:not-collapsable={!userExpandable}
 	class:not-resizable={!resizable}
 	style:left="{x}px"
@@ -327,7 +329,6 @@ draggable-container"
 		/* Ensure draggable hit zone does not collapse if title is missing */
 		/* Fixes #1 */
 		height: 100%;
-		text-overflow: ellipsis;
 	}
 
 	div.draggable-container.not-collapsable :global(div.tp-rotv_t) {

package/dist/internal/InternalPaneFixed.svelte

@@ -8,9 +8,7 @@
 	export let title = 'Tweakpane';
 	let paneRef;
 	let paneContainer;
-	$: paneRef !== void 0 &&
-		paneRef.element.parentElement &&
-		(paneContainer = paneRef.element.parentElement);
+	$: paneRef?.element.parentElement && (paneContainer = paneRef.element.parentElement);
 	$: paneContainer !== void 0 &&
 		x !== void 0 &&
 		(paneContainer.style.setProperty('right', 'unset'),

package/dist/internal/InternalPaneInline.svelte

@@ -7,7 +7,7 @@
 	export let theme = {
 		baseBorderRadius: '0px',
 		baseShadowColor: 'hsla(0, 0%, 0%, 0)'
-		// bladeBorderRadius: '0px'
+		// BladeBorderRadius: '0px'
 	};
 	let paneRef;
 	let containerElement;

package/dist/monitor/FpsGraph.svelte

@@ -46,13 +46,13 @@
 	function startObservingMeasuredFpsValue() {
 		stopObservingMeasuredFpsValue();
 		const targetNode = fpsBlade.controller.valueController.view.valueElement;
-		if (!targetNode || !targetNode.innerHTML) return;
+		if (!targetNode?.innerHTML) return;
 		observer = new MutationObserver((mutations) => {
 			for (const mutation of mutations) {
 				if (mutation.type === 'characterData' || mutation.type === 'childList') {
 					const fpsText = mutation.target.textContent;
 					if (fpsText !== null) {
-						const fps = Number.parseInt(fpsText);
+						const fps = Number.parseInt(fpsText, 10);
 						!Number.isNaN(fps) && dispatch('change', fps);
 					}
 				}

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

@@ -7,11 +7,9 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: W;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, W>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`
@@ -38,10 +36,10 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 					| (W extends string
 							? import('tweakpane').StringMonitorParams
 							: W extends boolean
-							  ? import('tweakpane').BooleanMonitorParams
-							  : W extends number
-							    ? import('tweakpane').NumberMonitorParams
-							    : import('@tweakpane/core').BaseMonitorParams)
+								? import('tweakpane').BooleanMonitorParams
+								: W extends number
+									? import('tweakpane').NumberMonitorParams
+									: import('@tweakpane/core').BaseMonitorParams)
 					| undefined;
 				/**
 				 * Custom color scheme.
@@ -113,11 +111,9 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 							 * The binding's target object with values to manipulate.
 							 * @bindable
 							 */
-							object: import('@tweakpane/core').Bindable & {
-								[x: string]: string;
-							};
+							object: import('@tweakpane/core').Bindable & Record<string, string>;
 							/** The key for the value in the target `object` that the control should manipulate. */
-							key: string | number;
+							key: string;
 							/**
 							 * Prevent interactivity and gray out the control.
 							 * @default `false`
@@ -202,7 +198,7 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 						rows?: number | undefined;
 					},
 					'options' | 'ref' | 'plugin' | 'interval'
-			  > & {
+				> & {
 					/**
 					 * A value to monitor.
 					 * @bindable
@@ -213,20 +209,18 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 					 * @default `false`
 					 */
 					multiline?: boolean | undefined;
-			  }
+				}
 			: W extends boolean
-			  ? Omit<
+				? Omit<
 						Omit<
 							{
 								/**
 								 * The binding's target object with values to manipulate.
 								 * @bindable
 								 */
-								object: import('@tweakpane/core').Bindable & {
-									[x: string]: boolean;
-								};
+								object: import('@tweakpane/core').Bindable & Record<string, boolean>;
 								/** The key for the value in the target `object` that the control should manipulate. */
-								key: string | number;
+								key: string;
 								/**
 								 * Prevent interactivity and gray out the control.
 								 * @default `false`
@@ -311,26 +305,24 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 							rows?: number | undefined;
 						},
 						'options' | 'ref' | 'plugin' | 'interval'
-			    > & {
+					> & {
 						/**
 						 * A value to monitor.
 						 * @bindable
 						 */
 						value: boolean;
-			    }
-			  : W extends number
-			    ? Omit<
+					}
+				: W extends number
+					? Omit<
 							Omit<
 								{
 									/**
 									 * The binding's target object with values to manipulate.
 									 * @bindable
 									 */
-									object: import('@tweakpane/core').Bindable & {
-										[x: string]: number;
-									};
+									object: import('@tweakpane/core').Bindable & Record<string, number>;
 									/** The key for the value in the target `object` that the control should manipulate. */
-									key: string | number;
+									key: string;
 									/**
 									 * Prevent interactivity and gray out the control.
 									 * @default `false`
@@ -415,7 +407,7 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 								rows?: number | undefined;
 							},
 							'options' | 'ref' | 'plugin'
-			      > & {
+						> & {
 							/**
 							 * A value to monitor.
 							 * @bindable
@@ -442,14 +434,14 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 							 * @default `false`
 							 */
 							graph?: boolean | undefined;
-			      }
-			    : {
+						}
+					: {
 							/**
 							 * A value to monitor.
 							 * @bindable
 							 * */
 							value: string | number | boolean;
-			      });
+						});
 	events(): {} & {
 		[evt: string]: CustomEvent<any>;
 	};

package/dist/monitor/Profiler.svelte

@@ -11,7 +11,7 @@
 		profilerBlade?.measure(name, functionToMeasure);
 	}
 	async function _measureAsync(name, functionToMeasure) {
-		profilerBlade?.measureAsync(name, functionToMeasure);
+		await profilerBlade?.measureAsync(name, functionToMeasure);
 	}
 	export let label = void 0;
 	export let bufferSize = void 0;
@@ -33,7 +33,7 @@
 	function startObservingMeasuredValue() {
 		stopObservingMeasuredValue();
 		const targetNode = profilerBlade.controller.view.valueElement;
-		if (!targetNode || !targetNode.innerHTML) return;
+		if (!targetNode?.innerHTML) return;
 		observer = new MutationObserver((mutations) => {
 			for (const mutation of mutations) {
 				if (mutation.type === 'characterData' || mutation.type === 'childList') {

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

@@ -9,11 +9,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: WaveformMonitorValue;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, WaveformMonitorValue>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

package/dist/theme.d.ts

@@ -35,9 +35,7 @@ type ThemeKeys = {
 	monitorForegroundColor?: ThemeColorValue;
 	pluginImageDraggingColor?: ThemeColorValue;
 };
-type CustomThemeKeys = {
-	[key: string]: ThemeColorValue;
-};
+type CustomThemeKeys = Record<string, ThemeColorValue>;
 export declare const keys: Record<string, string>;
 export declare const presets: {
 	/** Dark blue theme. */