svelte-tweakpane-ui 1.5.3 → 1.5.5

package/dist/internal/GenericPane.svelte

@@ -1,76 +1,76 @@
 <script>
-	import ClsPad from './ClsPad.svelte';
-	import { applyTheme } from '../theme.js';
-	import { updateCollapsibility } from '../utils.js';
-	import { BROWSER } from 'esm-env';
-	import { getContext, onDestroy, setContext, tick } from 'svelte';
-	import { writable } from 'svelte/store';
-	import { Pane as TpPane } from 'tweakpane';
-	export let title = void 0;
-	export let userExpandable = true;
-	export let expanded = true;
-	export let theme = void 0;
-	export let scale = 1;
-	export let userCreatedPane = true;
-	export let tpPane = void 0;
-	const parentStore = writable();
-	const existingParentStore = getContext('parentStore');
-	let pluginsRegistered = [];
+	import ClsPad from './ClsPad.svelte'
+	import { applyTheme } from '../theme.js'
+	import { updateCollapsibility } from '../utils.js'
+	import { BROWSER } from 'esm-env'
+	import { getContext, onDestroy, setContext, tick } from 'svelte'
+	import { writable } from 'svelte/store'
+	import { Pane as TpPane } from 'tweakpane'
+	export let title = void 0
+	export let userExpandable = true
+	export let expanded = true
+	export let theme = void 0
+	export let scale = 1
+	export let userCreatedPane = true
+	export let tpPane = void 0
+	const parentStore = writable()
+	const existingParentStore = getContext('parentStore')
+	let pluginsRegistered = []
 	const registerPlugin = (plugin) => {
 		if (tpPane === void 0) {
-			console.warn(`tpPane is undefined, failed to register plugin "${plugin.id}"`);
+			console.warn(`tpPane is undefined, failed to register plugin "${plugin.id}"`)
 		} else if (!pluginsRegistered.includes(plugin.id)) {
-			tpPane?.registerPlugin(plugin);
-			pluginsRegistered.push(plugin.id);
+			tpPane?.registerPlugin(plugin)
+			pluginsRegistered.push(plugin.id)
 		}
-	};
-	setContext('registerPlugin', registerPlugin);
-	setContext('userCreatedPane', userCreatedPane);
+	}
+	setContext('registerPlugin', registerPlugin)
+	setContext('userCreatedPane', userCreatedPane)
 	if ($existingParentStore !== void 0) {
-		console.warn('<Panes> must not be nested');
+		console.warn('<Panes> must not be nested')
 	}
 	if (BROWSER) {
-		$parentStore = new TpPane({ expanded, title });
+		$parentStore = new TpPane({ expanded, title })
 		$parentStore.on('fold', () => {
 			if ($parentStore.expanded !== void 0 && expanded !== $parentStore.expanded) {
-				expanded = $parentStore.expanded;
+				expanded = $parentStore.expanded
 			}
-		});
-		tpPane = $parentStore;
-		setContext('parentStore', parentStore);
+		})
+		tpPane = $parentStore
+		setContext('parentStore', parentStore)
 		onDestroy(() => {
-			$parentStore.dispose();
-		});
+			$parentStore.dispose()
+		})
 	} else {
-		setContext('parentStore', writable(true));
+		setContext('parentStore', writable(true))
 	}
 	function setScale(scale2) {
 		if (tpPane) {
 			if (scale2 === 1) {
-				tpPane.element.style.removeProperty('transform-origin');
-				tpPane.element.style.removeProperty('transform');
-				tpPane.element.style.removeProperty('width');
+				tpPane.element.style.removeProperty('transform-origin')
+				tpPane.element.style.removeProperty('transform')
+				tpPane.element.style.removeProperty('width')
 			} else {
-				const clampedScale = Math.max(0, scale2);
-				tpPane.element.style.transformOrigin = '0 0';
-				tpPane.element.style.transform = `scale(${clampedScale})`;
-				tpPane.element.style.width = `${100 / clampedScale}%`;
+				const clampedScale = Math.max(0, scale2)
+				tpPane.element.style.transformOrigin = '0 0'
+				tpPane.element.style.transform = `scale(${clampedScale})`
+				tpPane.element.style.width = `${100 / clampedScale}%`
 			}
 		}
 	}
 	function updateExpanded(expanded2) {
 		void tick().then(() => {
 			if (tpPane?.expanded !== void 0 && expanded2 !== void 0 && tpPane.expanded !== expanded2) {
-				tpPane.expanded = expanded2;
+				tpPane.expanded = expanded2
 			}
-		});
+		})
 	}
-	$: tpPane?.element && tpPane?.element.classList.add('svelte-tweakpane-ui');
-	$: tpPane && setScale(scale);
-	$: tpPane && updateCollapsibility(userExpandable, tpPane.element, 'tp-rotv_b', 'tp-rotv_m');
-	$: tpPane && title !== void 0 && (tpPane.title = title.length > 0 ? title : ' ');
-	$: tpPane && applyTheme(tpPane.element, theme);
-	$: tpPane && updateExpanded(expanded);
+	$: tpPane?.element && tpPane?.element.classList.add('svelte-tweakpane-ui')
+	$: tpPane && setScale(scale)
+	$: tpPane && updateCollapsibility(userExpandable, tpPane.element, 'tp-rotv_b', 'tp-rotv_m')
+	$: tpPane && title !== void 0 && (tpPane.title = title.length > 0 ? title : ' ')
+	$: tpPane && applyTheme(tpPane.element, theme)
+	$: tpPane && updateExpanded(expanded)
 </script>
 
 {#if BROWSER}
@@ -84,7 +84,7 @@
 				'containerVerticalPadding',
 				'containerVerticalPadding',
 				'containerVerticalPadding',
-				'containerUnitSize'
+				'containerUnitSize',
 			]}
 			{theme}
 		/>

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

@@ -1,6 +1,6 @@
-import { SvelteComponent } from 'svelte';
-import { type Theme } from '../theme.js';
-import { Pane as TpPane } from 'tweakpane';
+import { SvelteComponent } from 'svelte'
+import { type Theme } from '../theme.js'
+import { Pane as TpPane } from 'tweakpane'
 declare const __propDef: {
 	props: {
 		/**
@@ -8,18 +8,18 @@ declare const __propDef: {
 		 * @default `Tweakpane`  \
 		 * Unless `position="inline"`, in which case the default is `undefined` and no title bar is
 		 * shown.
-		 * */ title?: string | undefined;
+		 * */ title?: string | undefined
 		/**
 		 * Allow users to interactively expand / contract the pane by clicking its title bar.
 		 *
 		 * Hides the collapse button from the title bar when `false`.
 		 * @default `true`
-		 * */ userExpandable?: boolean;
+		 * */ userExpandable?: boolean
 		/**
 		 * Expand or collapse the pane into its title bar.
 		 * @default `true`
 		 * @bindable
-		 * */ expanded?: boolean;
+		 * */ expanded?: boolean
 		/**
 		 * Custom color scheme.
 		 *
@@ -37,7 +37,7 @@ declare const __propDef: {
 		 * @default `undefined`  \
 		 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
 		 * set with `setGlobalDefaultTheme()`.
-		 * */ theme?: Theme | undefined;
+		 * */ theme?: Theme | undefined
 		/**
 		 * Scales the pane's elements by a factor of `scale` to make it easier to see.
 		 *
@@ -50,8 +50,8 @@ declare const __propDef: {
 		 *
 		 * Negative values are ignored.
 		 * @default `1`
-		 */ scale?: number;
-		/** Internal use only. */ userCreatedPane?: boolean;
+		 */ scale?: number
+		/** Internal use only. */ userCreatedPane?: boolean
 		/**
 		 * The internal Tweakpane [`Pane`](https://tweakpane.github.io/docs/api/classes/Pane.html) object.
 		 *
@@ -65,23 +65,23 @@ declare const __propDef: {
 		 *
 		 * @bindable
 		 * @readonly
-		 * */ tpPane?: TpPane | undefined;
-	};
+		 * */ tpPane?: TpPane | undefined
+	}
 	events: {
-		[evt: string]: CustomEvent<any>;
-	};
+		[evt: string]: CustomEvent<any>
+	}
 	slots: {
 		/**
 		 * Any Tweakpane component, except another `<Pane>`.
 		 */
-		default: {};
-	};
-	exports?: {} | undefined;
-	bindings?: string | undefined;
-};
-export type GenericPaneProps = typeof __propDef.props;
-export type GenericPaneEvents = typeof __propDef.events;
-export type GenericPaneSlots = typeof __propDef.slots;
+		default: {}
+	}
+	exports?: {} | undefined
+	bindings?: string | undefined
+}
+export type GenericPaneProps = typeof __propDef.props
+export type GenericPaneEvents = typeof __propDef.events
+export type GenericPaneSlots = typeof __propDef.slots
 /**
  * This component is for internal use only.
  *
@@ -93,4 +93,4 @@ export default class GenericPane extends SvelteComponent<
 	GenericPaneEvents,
 	GenericPaneSlots
 > {}
-export {};
+export {}

package/dist/internal/GenericSlider.svelte

@@ -1,17 +1,17 @@
 <script generics="T extends number | IntervalSliderValue">
-	import GenericInput from './GenericInput.svelte';
-	export let value;
-	export let options = void 0;
-	export let min = void 0;
-	export let max = void 0;
-	export let step = void 0;
-	export let pointerScale = void 0;
-	export let keyScale = void 0;
-	export let format = void 0;
-	export let ref = void 0;
-	let formatProxy = format;
-	$: formatProxy !== format && (formatProxy = format);
-	let optionsInternal;
+	import GenericInput from './GenericInput.svelte'
+	export let value
+	export let options = void 0
+	export let min = void 0
+	export let max = void 0
+	export let step = void 0
+	export let pointerScale = void 0
+	export let keyScale = void 0
+	export let format = void 0
+	export let ref = void 0
+	let formatProxy = format
+	$: formatProxy !== format && (formatProxy = format)
+	let optionsInternal
 	$: optionsInternal = {
 		min,
 		max,
@@ -19,8 +19,8 @@
 		keyScale,
 		pointerScale,
 		step,
-		...options
-	};
+		...options,
+	}
 </script>
 
 <GenericInput bind:value bind:ref on:change options={optionsInternal} {...$$restProps} />

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

@@ -1,7 +1,7 @@
-import { SvelteComponent } from 'svelte';
-import type { IntervalSliderValue } from '../control/IntervalSlider.svelte';
-import type { NumberInputParams as GenericSliderOptions } from 'tweakpane';
-import type { SliderInputBindingApi as GenericSliderRef } from 'tweakpane';
+import { SvelteComponent } from 'svelte'
+import type { IntervalSliderValue } from '../control/IntervalSlider.svelte'
+import type { NumberInputParams as GenericSliderOptions } from 'tweakpane'
+import type { SliderInputBindingApi as GenericSliderRef } from 'tweakpane'
 declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 	props(): {
 		/**
@@ -10,70 +10,70 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 		 * Specifying both a `min` and a `max` prop turns the control into a slider.
 		 * @default `undefined`
 		 * */
-		min?: number;
+		min?: number
 		/**
 		 * Maximum value.
 		 *
 		 * Specifying both a `min` and a `max` prop turns the control into a slider.
 		 * @default `undefined`
 		 * */
-		max?: number;
+		max?: number
 		/**
 		 * A function to customize the point value's string representation (e.g. rounding, etc.).
 		 * @default `undefined`  \
 		 * Normal `.toString()` formatting.
 		 * */
-		format?: ((value: number) => string) | undefined;
+		format?: ((value: number) => string) | undefined
 		/**
 		 * The unit scale for key-based input for all dimensions (e.g. the up and down arrow keys).
 		 * @default `1`  \
 		 * Or `stepValue` if defined.
 		 * */
-		keyScale?: number;
+		keyScale?: number
 		/**
 		 * The unit scale for pointer-based input for all dimensions.
 		 * @default `undefined`  \
 		 * [Dynamic based on magnitude of
 		 * `value`](https://github.com/cocopon/tweakpane/blob/66dfbea04bfe9b7f031673c955ceda1f92356e75/packages/core/src/common/number/util.ts#L54).
 		 * */
-		pointerScale?: number;
+		pointerScale?: number
 		/**
 		 * The minimum step interval.
 		 * @default `undefined`  \
 		 * No step constraint.
 		 * */
-		step?: number;
+		step?: number
 		/**
 		 * When `true`, expand the width of the control at the expense of the numeric input
 		 * field.
 		 * @default `false`
 		 * */
-		wide?: boolean;
+		wide?: boolean
 	} & {
 		/**
 		 * The value to control.
 		 * @bindable
 		 */
-		value: T;
+		value: T
 	} & Omit<
 			{
 				/**
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & Record<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;
+				key: string
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`
 				 */
-				disabled?: boolean;
+				disabled?: boolean
 				/**
 				 * Text displayed next to control.
 				 * @default `undefined`
 				 */
-				label?: string | undefined;
+				label?: string | undefined
 				/**
 				 * Tweakpane's internal options object.
 				 *
@@ -86,7 +86,7 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 				 * Tweakpane UI_.
 				 * @default `undefined`
 				 */
-				options?: GenericSliderOptions | undefined;
+				options?: GenericSliderOptions | undefined
 				/**
 				 * Custom color scheme.
 				 *
@@ -94,7 +94,7 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 				 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
 				 * set with `setGlobalDefaultTheme()`.
 				 */
-				theme?: import('..').Theme | undefined;
+				theme?: import('..').Theme | undefined
 				/**
 				 * Reference to internal Tweakpane
 				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
@@ -108,7 +108,7 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 				 * @bindable
 				 * @readonly
 				 */
-				ref?: GenericSliderRef | undefined;
+				ref?: GenericSliderRef | undefined
 				/**
 				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
 				 * the `<Binding>`'s containing `<Pane>`.
@@ -120,26 +120,26 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 				 *
 				 * @default `undefined`
 				 */
-				plugin?: import('..').Plugin | undefined;
+				plugin?: import('..').Plugin | undefined
 			},
 			'object' | 'key'
-		>;
+		>
 	events(): {
-		change: import('..').BindingChangeEvent;
+		change: import('..').BindingChangeEvent
 	} & {
-		[evt: string]: CustomEvent<any>;
-	};
-	slots(): {};
+		[evt: string]: CustomEvent<any>
+	}
+	slots(): {}
 }
 export type GenericSliderProps<T extends number | IntervalSliderValue> = ReturnType<
 	__sveltets_Render<T>['props']
->;
+>
 export type GenericSliderEvents<T extends number | IntervalSliderValue> = ReturnType<
 	__sveltets_Render<T>['events']
->;
+>
 export type GenericSliderSlots<T extends number | IntervalSliderValue> = ReturnType<
 	__sveltets_Render<T>['slots']
->;
+>
 /**
  * This component is for internal use only.
  *
@@ -155,4 +155,4 @@ export default class GenericSlider<T extends number | IntervalSliderValue> exten
 	GenericSliderEvents<T>,
 	GenericSliderSlots<T>
 > {}
-export {};
+export {}

package/dist/internal/InternalMonitorBoolean.svelte

@@ -1,11 +1,11 @@
 <script context="module"></script>
 
 <script>
-	import ClsPad from './ClsPad.svelte';
-	import GenericMonitor from './GenericMonitor.svelte';
-	import { fillWith, rowsForMonitor } from '../utils';
-	import { BROWSER } from 'esm-env';
-	export let value;
+	import ClsPad from './ClsPad.svelte'
+	import GenericMonitor from './GenericMonitor.svelte'
+	import { fillWith, rowsForMonitor } from '../utils'
+	import { BROWSER } from 'esm-env'
+	export let value
 </script>
 
 <GenericMonitor {value} {...$$restProps} />

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

@@ -1,12 +1,12 @@
-import { SvelteComponent } from 'svelte';
-import type { BooleanMonitorParams } from '@tweakpane/core';
-export type InternalMonitorBooleanOptions = BooleanMonitorParams;
+import { SvelteComponent } from 'svelte'
+import type { BooleanMonitorParams } from '@tweakpane/core'
+export type InternalMonitorBooleanOptions = BooleanMonitorParams
 declare const __propDef: {
 	props: {
 		/**
 		 * A `boolean` value to monitor.
 		 * */
-		value: boolean;
+		value: boolean
 	} & Omit<
 		{
 			/**
@@ -14,14 +14,14 @@ declare const __propDef: {
 			 * @default `1`  \
 			 * Or `64` if value is `number` and `graph` is `true`.
 			 */
-			bufferSize?: number;
+			bufferSize?: number
 			/**
 			 * Time between value samples in milliseconds.
 			 *
 			 * Useful when `graph` is true. Defaults to reactive value updates only (`interval={0}`).
 			 * @default `0`
 			 */
-			interval?: number;
+			interval?: number
 			/**
 			 * Number of visible rows of state history.
 			 *
@@ -30,31 +30,31 @@ declare const __propDef: {
 			 * @default `1`  \
 			 * Or `3` if value is `string` and `multiline` is `true`.
 			 */
-			rows?: number;
+			rows?: number
 		} & {
 			/**
 			 * A `boolean` value to monitor.
 			 */
-			value: boolean;
+			value: boolean
 		} & Omit<
 				{
 					/**
 					 * The binding's target object with values to manipulate.
 					 * @bindable
 					 */
-					object: import('@tweakpane/core').Bindable & Record<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;
+					key: string
 					/**
 					 * Prevent interactivity and gray out the control.
 					 * @default `false`
 					 */
-					disabled?: boolean;
+					disabled?: boolean
 					/**
 					 * Text displayed next to control.
 					 * @default `undefined`
 					 */
-					label?: string | undefined;
+					label?: string | undefined
 					/**
 					 * Tweakpane's internal options object.
 					 *
@@ -67,7 +67,7 @@ declare const __propDef: {
 					 * Tweakpane UI_.
 					 * @default `undefined`
 					 */
-					options?: BooleanMonitorParams | undefined;
+					options?: BooleanMonitorParams | undefined
 					/**
 					 * Custom color scheme.
 					 *
@@ -75,7 +75,7 @@ declare const __propDef: {
 					 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
 					 * set with `setGlobalDefaultTheme()`.
 					 */
-					theme?: import('..').Theme | undefined;
+					theme?: import('..').Theme | undefined
 					/**
 					 * Reference to internal Tweakpane
 					 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
@@ -89,7 +89,7 @@ declare const __propDef: {
 					 * @bindable
 					 * @readonly
 					 */
-					ref?: import('./GenericMonitor.svelte').GenericMonitorRef | undefined;
+					ref?: import('./GenericMonitor.svelte').GenericMonitorRef | undefined
 					/**
 					 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
 					 * the `<Binding>`'s containing `<Pane>`.
@@ -101,22 +101,22 @@ declare const __propDef: {
 					 *
 					 * @default `undefined`
 					 */
-					plugin?: import('../utils').Plugin | undefined;
+					plugin?: import('../utils').Plugin | undefined
 				},
 				'object' | 'key'
 			>,
 		'ref' | 'options' | 'plugin' | 'interval'
-	>;
+	>
 	events: {
-		[evt: string]: CustomEvent<any>;
-	};
-	slots: {};
-	exports?: {} | undefined;
-	bindings?: string | undefined;
-};
-export type InternalMonitorBooleanProps = typeof __propDef.props;
-export type InternalMonitorBooleanEvents = typeof __propDef.events;
-export type InternalMonitorBooleanSlots = typeof __propDef.slots;
+		[evt: string]: CustomEvent<any>
+	}
+	slots: {}
+	exports?: {} | undefined
+	bindings?: string | undefined
+}
+export type InternalMonitorBooleanProps = typeof __propDef.props
+export type InternalMonitorBooleanEvents = typeof __propDef.events
+export type InternalMonitorBooleanSlots = typeof __propDef.slots
 /**
  * This component is for internal use only.
  *
@@ -137,13 +137,13 @@ export type InternalMonitorBooleanSlots = typeof __propDef.slots;
  * @example
  * ```svelte
  * <script lang="ts">
- * import { InternalMonitorBoolean } from 'svelte-tweakpane-ui';
+ * import { InternalMonitorBoolean } from 'svelte-tweakpane-ui'
  *
- * let booleanToMonitor = false;
+ * let booleanToMonitor = false
  *
  * setInterval(() => {
- *   booleanToMonitor = Math.random() > 0.5;
- * }, 100);
+ *   booleanToMonitor = Math.random() > 0.5
+ * }, 100)
  * </script>
  *
  * <InternalMonitorBoolean value={booleanToMonitor} bufferSize={5} rows={5} />
@@ -157,4 +157,4 @@ export default class InternalMonitorBoolean extends SvelteComponent<
 	InternalMonitorBooleanEvents,
 	InternalMonitorBooleanSlots
 > {}
-export {};
+export {}

package/dist/internal/InternalMonitorNumber.svelte

@@ -1,25 +1,25 @@
 <script context="module"></script>
 
 <script>
-	import ClsPad from './ClsPad.svelte';
-	import GenericMonitor from './GenericMonitor.svelte';
-	import { fillWith, rowsForMonitor } from '../utils.js';
-	import { BROWSER } from 'esm-env';
-	export let value;
-	export let graph = void 0;
-	export let format = void 0;
-	export let max = void 0;
-	export let min = void 0;
-	let options;
-	let formatProxy = format;
-	$: formatProxy !== format && (formatProxy = format);
+	import ClsPad from './ClsPad.svelte'
+	import GenericMonitor from './GenericMonitor.svelte'
+	import { fillWith, rowsForMonitor } from '../utils.js'
+	import { BROWSER } from 'esm-env'
+	export let value
+	export let graph = void 0
+	export let format = void 0
+	export let max = void 0
+	export let min = void 0
+	let options
+	let formatProxy = format
+	$: formatProxy !== format && (formatProxy = format)
 	$: options = {
 		min,
 		max,
 		format: formatProxy,
 		readonly: true,
-		view: graph ? 'graph' : void 0
-	};
+		view: graph ? 'graph' : void 0,
+	}
 </script>
 
 <GenericMonitor {value} {options} {...$$restProps} />