svelte-tweakpane-ui 1.0.1 → 1.0.2

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);

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,9 +283,9 @@
 <svelte:window on:resize={setDocumentSize} />
 
 <div
-	bind:this={containerElement}
 	bind:clientHeight={containerHeight}
 	bind:clientWidth={containerWidth}
+	bind:this={containerElement}
 	on:focus|capture={() => {
 		zIndexLocal = ++zIndexGlobal;
 	}}

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. */

package/dist/theme.js

@@ -33,12 +33,12 @@ const standard = {
 	monitorBackgroundColor: 'rgba(0, 0, 0, 0.2)',
 	monitorForegroundColor: 'rgba(187, 188, 196, 0.7)',
 	pluginImageDraggingColor: 'hsla(230, 100%, 66%, 1)'
-	// pluginThumbnailListHeight: '400px', pluginThumbnailListThumbSize: '20px',
+	// PluginThumbnailListHeight: '400px', pluginThumbnailListThumbSize: '20px',
 	// pluginThumbnailListWidth: '200px'
 };
-export const keys = Object.keys(standard).reduce((accumulator, key) => {
-	accumulator[key] = key;
-	return accumulator;
+export const keys = Object.keys(standard).reduce((acc, key) => {
+	acc[key] = key;
+	return acc;
 }, {});
 const light = {
 	baseBackgroundColor: 'hsla(230, 5%, 90%, 1.00)',
@@ -239,34 +239,33 @@ const keyToCssVariableMap = new Map([
 function stringToCssValue(v) {
 	if (v === undefined) {
 		return undefined;
-	} else if (typeof v === 'string') {
+	}
+	if (typeof v === 'string') {
 		return v;
-	} else if (isRgbaColorObject(v)) {
+	}
+	if (isRgbaColorObject(v)) {
 		return `rgba(${v.r}, ${v.g}, ${v.b}, ${v.a})`;
-	} else if (isRgbColorObject(v)) {
+	}
+	if (isRgbColorObject(v)) {
 		return `rgb(${v.r}, ${v.g}, ${v.b})`;
-	} else {
-		throw new Error(`Unknown CSS theme value object: ${v}`);
 	}
 }
 function expandVariableKey(name) {
-	// pass explicit variables through
+	// Pass explicit variables through
 	if (name.startsWith('--tp-')) {
 		return name;
-	} else {
-		const variableName = keyToCssVariableMap.get(name);
-		if (variableName) {
-			return variableName;
-		} else {
-			throw new Error(`Unknown Tweakpane CSS theme map variable key: "${name}"`);
-		}
 	}
+	const variableName = keyToCssVariableMap.get(name);
+	if (variableName) {
+		return variableName;
+	}
+	throw new Error(`Unknown Tweakpane CSS theme map variable key: "${name}"`);
 }
 /**
  * Used during SSR to calculate metrics Returns CSS string.
  */
 export function getValueOrFallback(theme, key) {
-	return theme === undefined || theme[key] === undefined
+	return theme?.[key] === undefined
 		? stringToCssValue(standard[key])
 		: stringToCssValue(theme[key]);
 }
@@ -276,7 +275,6 @@ export function applyTheme(element, theme) {
 		for (const k of Object.keys(standard)) {
 			const key = expandVariableKey(k);
 			if (element.style.getPropertyValue(key).length > 0) {
-				// console.log(`Unsetting via undefined theme ${key}`);
 				element.style.removeProperty(key);
 			}
 		}
@@ -284,27 +282,22 @@ export function applyTheme(element, theme) {
 		for (const [k, v] of Object.entries(theme)) {
 			const key = expandVariableKey(k);
 			const value = stringToCssValue(v);
-			// console.log(`Inspecting ${key}: ${value}`);
-			// only set the variable if it deviates from the standard theme or  the root theme (set
+			// Only set the variable if it deviates from the standard theme or  the root theme (set
 			// by setGlobalDefaultTheme).... but if theme is explicitly standard and not undefined,
 			// then apply it anyway so that any global theme is overridden TODO normalize color
 			// representation for comparison? TODO tests for this logic
 			const standardValue = standard[k] || undefined;
 			const rootValue = rootDocument.style.getPropertyValue(key) || undefined;
-			const isDeviationFromRoot = (rootValue && value !== rootValue) || false;
-			const isDeviationFromStandard = (standardValue && value !== standardValue) || false;
+			const isDeviationFromRoot = (rootValue && value !== rootValue) ?? false;
+			const isDeviationFromStandard = (standardValue && value !== standardValue) ?? false;
 			if (
 				theme !== undefined &&
 				value !== undefined &&
 				(isDeviationFromRoot || (!rootValue && isDeviationFromStandard))
 			) {
-				// console.log(`Setting ${key} to ${value}`);
 				element.style.setProperty(key, value);
-			} else {
-				if (element.style.getPropertyValue(key).length > 0) {
-					// console.log(`Unsetting ${key}`);
-					element.style.removeProperty(key);
-				}
+			} else if (element.style.getPropertyValue(key).length > 0) {
+				element.style.removeProperty(key);
 			}
 		}
 	}
@@ -314,12 +307,12 @@ export function applyTheme(element, theme) {
  * mode toggle.
  */
 export function setGlobalDefaultTheme(theme) {
-	// wait for dom ready... better outside?
-	if (typeof window !== 'undefined' && window.document) {
+	// Wait for dom ready... better outside?
+	if (window?.document) {
 		applyTheme(getWindowDocument().documentElement, theme);
 	}
 }
-// library exports
+// Library exports
 export default {
 	/**
 	 * A collection of default theme color schemes, matching those provided in the Tweakpane

package/dist/utils.d.ts

@@ -8,7 +8,7 @@ export type SimplifyDeep<Type> = Type extends Theme
 	? Type
 	: {
 			[TypeKey in keyof Type]: SimplifyDeep<Type[TypeKey]>;
-	  };
+		};
 export type HasKey<U, V extends PropertyKey> = V extends keyof U ? U[V] : unknown;
 import type { Bindable, BladeApi, BladeController, TpPluginBundle, View } from '@tweakpane/core';
 export type BindingObject = Bindable;
@@ -71,7 +71,10 @@ export declare function enforceReadonly(
 export declare function isRootPane(container: Container): boolean;
 export declare function clamp(value: number, min: number, max: number): number;
 export declare function getElementIndex(element: HTMLElement): number;
-export declare function removeKeys<T extends object>(object: T, ...keys: string[]): T;
+export declare function removeKeys<T extends Record<string, unknown>>(
+	object: T,
+	...keys: string[]
+): T;
 export declare function updateCollapsibility(
 	isUserExpandableEnabled: boolean,
 	element: HTMLElement,