svelte-tweakpane-ui 1.2.7 → 1.3.1

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from 'svelte';
-import { type Theme } from '../theme.js';
+import { getValueOrFallback, type Theme } from '../theme.js';
 declare const __propDef: {
 	props: {
 		/**
@@ -7,78 +7,10 @@ declare const __propDef: {
 		 */ theme?: Theme | undefined;
 		/**
 		 * Theme keys to add to the height estimate.
-		 */ keysAdd?:
-			| (keyof {
-					baseBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					baseBorderRadius?: string | undefined;
-					baseFontFamily?: string | undefined;
-					baseShadowColor?: import('../theme.js').ThemeColorValue | undefined;
-					bladeBorderRadius?: string | undefined;
-					bladeHorizontalPadding?: string | undefined;
-					bladeValueWidth?: string | undefined;
-					buttonBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					buttonBackgroundColorActive?: import('../theme.js').ThemeColorValue | undefined;
-					buttonBackgroundColorFocus?: import('../theme.js').ThemeColorValue | undefined;
-					buttonBackgroundColorHover?: import('../theme.js').ThemeColorValue | undefined;
-					buttonForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					containerBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					containerBackgroundColorActive?: import('../theme.js').ThemeColorValue | undefined;
-					containerBackgroundColorFocus?: import('../theme.js').ThemeColorValue | undefined;
-					containerBackgroundColorHover?: import('../theme.js').ThemeColorValue | undefined;
-					containerForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					containerHorizontalPadding?: string | undefined;
-					containerUnitSize?: string | undefined;
-					containerUnitSpacing?: string | undefined;
-					containerVerticalPadding?: string | undefined;
-					grooveForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					inputBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					inputBackgroundColorActive?: import('../theme.js').ThemeColorValue | undefined;
-					inputBackgroundColorFocus?: import('../theme.js').ThemeColorValue | undefined;
-					inputBackgroundColorHover?: import('../theme.js').ThemeColorValue | undefined;
-					inputForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					labelForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					monitorBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					monitorForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					pluginImageDraggingColor?: import('../theme.js').ThemeColorValue | undefined;
-			  })[]
-			| undefined;
+		 */ keysAdd?: Array<Parameters<typeof getValueOrFallback>[1]>;
 		/**
 		 * Theme keys to subtract from the height estimate.
-		 */ keysSubtract?:
-			| (keyof {
-					baseBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					baseBorderRadius?: string | undefined;
-					baseFontFamily?: string | undefined;
-					baseShadowColor?: import('../theme.js').ThemeColorValue | undefined;
-					bladeBorderRadius?: string | undefined;
-					bladeHorizontalPadding?: string | undefined;
-					bladeValueWidth?: string | undefined;
-					buttonBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					buttonBackgroundColorActive?: import('../theme.js').ThemeColorValue | undefined;
-					buttonBackgroundColorFocus?: import('../theme.js').ThemeColorValue | undefined;
-					buttonBackgroundColorHover?: import('../theme.js').ThemeColorValue | undefined;
-					buttonForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					containerBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					containerBackgroundColorActive?: import('../theme.js').ThemeColorValue | undefined;
-					containerBackgroundColorFocus?: import('../theme.js').ThemeColorValue | undefined;
-					containerBackgroundColorHover?: import('../theme.js').ThemeColorValue | undefined;
-					containerForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					containerHorizontalPadding?: string | undefined;
-					containerUnitSize?: string | undefined;
-					containerUnitSpacing?: string | undefined;
-					containerVerticalPadding?: string | undefined;
-					grooveForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					inputBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					inputBackgroundColorActive?: import('../theme.js').ThemeColorValue | undefined;
-					inputBackgroundColorFocus?: import('../theme.js').ThemeColorValue | undefined;
-					inputBackgroundColorHover?: import('../theme.js').ThemeColorValue | undefined;
-					inputForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					labelForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					monitorBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					monitorForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
-					pluginImageDraggingColor?: import('../theme.js').ThemeColorValue | undefined;
-			  })[]
-			| undefined;
+		 */ keysSubtract?: Array<Parameters<typeof getValueOrFallback>[1]>;
 		/**
 		 * Extra arbitrary space to add to the height estimate, in pixels.
 		 */ extra?: number | undefined;
@@ -87,6 +19,8 @@ declare const __propDef: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type ClsPadProps = typeof __propDef.props;
 export type ClsPadEvents = typeof __propDef.events;

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

@@ -24,7 +24,7 @@ declare class __sveltets_Render<
 			 * Prevent interactivity and gray out the control.
 			 * @default `false`
 			 */
-			disabled?: boolean | undefined;
+			disabled?: boolean;
 			/**
 			 * Text displayed next to control.
 			 * @default `undefined`
@@ -76,7 +76,7 @@ declare class __sveltets_Render<
 			 *
 			 * @default `undefined`
 			 */
-			plugin?: import('tweakpane').TpPluginBundle | undefined;
+			plugin?: import('../utils.js').Plugin | undefined;
 		},
 		'object' | 'key'
 	>;

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

@@ -6,25 +6,25 @@ declare class __sveltets_Render<T extends BladeOptions, U extends BladeRef> {
 		 * DOM class name of the button used to expand and collapse the blade's picker.
 		 * @default `undefined`
 		 * */
-		buttonClass?: string | undefined;
+		buttonClass?: string;
 		/**
 		 * Expand or collapse the blade's picker.
 		 * @default `true`
 		 * @bindable
 		 * */
-		expanded?: boolean | undefined;
+		expanded?: boolean;
 		/**
 		 * The style of value "picker" to use in the blade.
 		 * @default `'popup'`
 		 */
-		picker?: 'inline' | 'popup' | undefined;
+		picker?: 'inline' | 'popup';
 		/**
 		 * Allow users to interactively expand / contract the value picker by clicking its icon.
 		 *
 		 * Most useful when `picker` is `inline`.
 		 * @default `true`
 		 * */
-		userExpandable?: boolean | undefined;
+		userExpandable?: boolean;
 	} & {
 		/**
 		 * Blade configuration exposing Tweakpane's internal
@@ -36,7 +36,7 @@ declare class __sveltets_Render<T extends BladeOptions, U extends BladeRef> {
 		 * Prevent interactivity and gray out the control.
 		 * @default `false`
 		 */
-		disabled?: boolean | undefined;
+		disabled?: boolean;
 		/**
 		 * Custom color scheme.
 		 * @default `undefined`  \
@@ -68,7 +68,7 @@ declare class __sveltets_Render<T extends BladeOptions, U extends BladeRef> {
 		 *
 		 * @default `undefined`
 		 */
-		plugin?: import('tweakpane').TpPluginBundle | undefined;
+		plugin?: import('../utils').Plugin | undefined;
 	};
 	events(): {} & {
 		[evt: string]: CustomEvent<any>;

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

@@ -26,7 +26,7 @@ declare class __sveltets_Render<
 			 * Prevent interactivity and gray out the control.
 			 * @default `false`
 			 */
-			disabled?: boolean | undefined;
+			disabled?: boolean;
 			/**
 			 * Text displayed next to control.
 			 * @default `undefined`
@@ -78,7 +78,7 @@ declare class __sveltets_Render<
 			 *
 			 * @default `undefined`
 			 */
-			plugin?: import('@tweakpane/core').TpPluginBundle | undefined;
+			plugin?: import('..').Plugin | undefined;
 		},
 		'object' | 'key'
 	>;

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

@@ -14,23 +14,23 @@ declare class __sveltets_Render<
 		 * DOM class name of the button used to expand and collapse the input's picker.
 		 * @default `undefined`
 		 * */
-		buttonClass?: string | undefined;
+		buttonClass?: string;
 		/**
 		 * Expand or collapse the input's picker.
 		 * @default `false`
 		 * @bindable
 		 * */
-		expanded?: boolean | undefined;
+		expanded?: boolean;
 		/**
 		 * The style of value "picker" to use in the input.
 		 * @default `'popup'`
 		 */
-		picker?: 'inline' | 'popup' | undefined;
+		picker?: 'inline' | 'popup';
 		/**
 		 * Allow users to interactively expand / contract the picker.
 		 * @default `true`
 		 * */
-		userExpandable?: boolean | undefined;
+		userExpandable?: boolean;
 	} & {
 		/**
 		 * The value to control.
@@ -50,7 +50,7 @@ declare class __sveltets_Render<
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`
 				 */
-				disabled?: boolean | undefined;
+				disabled?: boolean;
 				/**
 				 * Text displayed next to control.
 				 * @default `undefined`
@@ -102,7 +102,7 @@ declare class __sveltets_Render<
 				 *
 				 * @default `undefined`
 				 */
-				plugin?: import('tweakpane').TpPluginBundle | undefined;
+				plugin?: import('../utils.js').Plugin | undefined;
 			},
 			'object' | 'key'
 		>;

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

@@ -13,14 +13,14 @@ declare class __sveltets_Render<
 		 * @default `1`  \
 		 * Or `64` if value is `number` and `graph` is `true`.
 		 * */
-		bufferSize?: number | undefined;
+		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 | undefined;
+		interval?: number;
 		/**
 		 * Number of visible rows of state history.
 		 *
@@ -29,7 +29,7 @@ declare class __sveltets_Render<
 		 * @default `1`  \
 		 * Or `3` if value is `string` and `multiline` is `true`.
 		 * */
-		rows?: number | undefined;
+		rows?: number;
 	} & {
 		/**
 		 * The value to control.
@@ -49,7 +49,7 @@ declare class __sveltets_Render<
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`
 				 */
-				disabled?: boolean | undefined;
+				disabled?: boolean;
 				/**
 				 * Text displayed next to control.
 				 * @default `undefined`
@@ -101,7 +101,7 @@ declare class __sveltets_Render<
 				 *
 				 * @default `undefined`
 				 */
-				plugin?: import('@tweakpane/core').TpPluginBundle | undefined;
+				plugin?: import('..').Plugin | undefined;
 			},
 			'object' | 'key'
 		>;

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

@@ -14,12 +14,12 @@ declare const __propDef: {
 		 *
 		 * Hides the collapse button from the title bar when `false`.
 		 * @default `true`
-		 * */ userExpandable?: boolean | undefined;
+		 * */ userExpandable?: boolean;
 		/**
 		 * Expand or collapse the pane into its title bar.
 		 * @default `true`
 		 * @bindable
-		 * */ expanded?: boolean | undefined;
+		 * */ expanded?: boolean;
 		/**
 		 * Custom color scheme.
 		 *
@@ -50,8 +50,8 @@ declare const __propDef: {
 		 *
 		 * Negative values are ignored.
 		 * @default `1`
-		 */ scale?: number | undefined;
-		/** Internal use only. */ userCreatedPane?: boolean | undefined;
+		 */ scale?: number;
+		/** Internal use only. */ userCreatedPane?: boolean;
 		/**
 		 * The internal Tweakpane [`Pane`](https://tweakpane.github.io/docs/api/classes/Pane.html) object.
 		 *
@@ -76,6 +76,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type GenericPaneProps = typeof __propDef.props;
 export type GenericPaneEvents = typeof __propDef.events;

package/dist/internal/GenericSlider.svelte

@@ -8,6 +8,7 @@
 	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;
@@ -22,4 +23,4 @@
 	};
 </script>
 
-<GenericInput bind:value on:change options={optionsInternal} {...$$restProps} />
+<GenericInput bind:value bind:ref on:change options={optionsInternal} {...$$restProps} />

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

@@ -10,14 +10,14 @@ 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 | undefined;
+		min?: number;
 		/**
 		 * Maximum value.
 		 *
 		 * Specifying both a `min` and a `max` prop turns the control into a slider.
 		 * @default `undefined`
 		 * */
-		max?: number | undefined;
+		max?: number;
 		/**
 		 * A function to customize the point value's string representation (e.g. rounding, etc.).
 		 * @default `undefined`  \
@@ -29,20 +29,26 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 		 * @default `1`  \
 		 * Or `stepValue` if defined.
 		 * */
-		keyScale?: number | undefined;
+		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 | undefined;
+		pointerScale?: number;
 		/**
 		 * The minimum step interval.
 		 * @default `undefined`  \
 		 * No step constraint.
 		 * */
-		step?: number | undefined;
+		step?: number;
+		/**
+		 * When `true`, expand the width of the control at the expense of the numeric input
+		 * field.
+		 * @default `false`
+		 * */
+		wide?: boolean;
 	} & {
 		/**
 		 * The value to control.
@@ -62,7 +68,7 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`
 				 */
-				disabled?: boolean | undefined;
+				disabled?: boolean;
 				/**
 				 * Text displayed next to control.
 				 * @default `undefined`
@@ -114,7 +120,7 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 				 *
 				 * @default `undefined`
 				 */
-				plugin?: import('tweakpane').TpPluginBundle | undefined;
+				plugin?: import('..').Plugin | undefined;
 			},
 			'object' | 'key'
 		>;

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

@@ -14,14 +14,14 @@ declare const __propDef: {
 			 * @default `1`  \
 			 * Or `64` if value is `number` and `graph` is `true`.
 			 */
-			bufferSize?: number | undefined;
+			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 | undefined;
+			interval?: number;
 			/**
 			 * Number of visible rows of state history.
 			 *
@@ -30,7 +30,7 @@ declare const __propDef: {
 			 * @default `1`  \
 			 * Or `3` if value is `string` and `multiline` is `true`.
 			 */
-			rows?: number | undefined;
+			rows?: number;
 		} & {
 			/**
 			 * A `boolean` value to monitor.
@@ -49,7 +49,7 @@ declare const __propDef: {
 					 * Prevent interactivity and gray out the control.
 					 * @default `false`
 					 */
-					disabled?: boolean | undefined;
+					disabled?: boolean;
 					/**
 					 * Text displayed next to control.
 					 * @default `undefined`
@@ -101,7 +101,7 @@ declare const __propDef: {
 					 *
 					 * @default `undefined`
 					 */
-					plugin?: import('@tweakpane/core').TpPluginBundle | undefined;
+					plugin?: import('../utils').Plugin | undefined;
 				},
 				'object' | 'key'
 			>,
@@ -111,6 +111,8 @@ declare const __propDef: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type InternalMonitorBooleanProps = typeof __propDef.props;
 export type InternalMonitorBooleanEvents = typeof __propDef.events;

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

@@ -11,23 +11,23 @@ declare const __propDef: {
 		 * Minimum bound when `graph` is true.
 		 * @default `0`
 		 */
-		min?: number | undefined;
+		min?: number;
 		/**
 		 * Maximum bound when `graph` is true.
 		 * @default `100`
 		 * */
-		max?: number | undefined;
+		max?: number;
 		/**
 		 * A function to customize the number's string representation (e.g. rounding, etc.).
 		 * @default `undefined`  \
 		 * Normal `.toString()` formatting.
 		 * */
-		format?: ((value: number) => string) | undefined;
+		format?: (value: number) => string;
 		/**
 		 * Display a graph of the value's changes over time.
 		 * @default `false`
 		 * */
-		graph?: boolean | undefined;
+		graph?: boolean;
 	} & Omit<
 		{
 			/**
@@ -35,14 +35,14 @@ declare const __propDef: {
 			 * @default `1`  \
 			 * Or `64` if value is `number` and `graph` is `true`.
 			 */
-			bufferSize?: number | undefined;
+			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 | undefined;
+			interval?: number;
 			/**
 			 * Number of visible rows of state history.
 			 *
@@ -51,7 +51,7 @@ declare const __propDef: {
 			 * @default `1`  \
 			 * Or `3` if value is `string` and `multiline` is `true`.
 			 */
-			rows?: number | undefined;
+			rows?: number;
 		} & {
 			/**
 			 * A `number` value to monitor.
@@ -70,7 +70,7 @@ declare const __propDef: {
 					 * Prevent interactivity and gray out the control.
 					 * @default `false`
 					 */
-					disabled?: boolean | undefined;
+					disabled?: boolean;
 					/**
 					 * Text displayed next to control.
 					 * @default `undefined`
@@ -122,7 +122,7 @@ declare const __propDef: {
 					 *
 					 * @default `undefined`
 					 */
-					plugin?: import('@tweakpane/core').TpPluginBundle | undefined;
+					plugin?: import('../utils.js').Plugin | undefined;
 				},
 				'object' | 'key'
 			>,
@@ -132,6 +132,8 @@ declare const __propDef: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type InternalMonitorNumberProps = typeof __propDef.props;
 export type InternalMonitorNumberEvents = typeof __propDef.events;

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

@@ -11,7 +11,7 @@ declare const __propDef: {
 		 * Display multiline strings.
 		 * @default `false`
 		 * */
-		multiline?: boolean | undefined;
+		multiline?: boolean;
 	} & Omit<
 		{
 			/**
@@ -19,14 +19,14 @@ declare const __propDef: {
 			 * @default `1`  \
 			 * Or `64` if value is `number` and `graph` is `true`.
 			 */
-			bufferSize?: number | undefined;
+			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 | undefined;
+			interval?: number;
 			/**
 			 * Number of visible rows of state history.
 			 *
@@ -35,7 +35,7 @@ declare const __propDef: {
 			 * @default `1`  \
 			 * Or `3` if value is `string` and `multiline` is `true`.
 			 */
-			rows?: number | undefined;
+			rows?: number;
 		} & {
 			/**
 			 * A `string` value to monitor.
@@ -54,7 +54,7 @@ declare const __propDef: {
 					 * Prevent interactivity and gray out the control.
 					 * @default `false`
 					 */
-					disabled?: boolean | undefined;
+					disabled?: boolean;
 					/**
 					 * Text displayed next to control.
 					 * @default `undefined`
@@ -106,7 +106,7 @@ declare const __propDef: {
 					 *
 					 * @default `undefined`
 					 */
-					plugin?: import('@tweakpane/core').TpPluginBundle | undefined;
+					plugin?: import('../utils').Plugin | undefined;
 				},
 				'object' | 'key'
 			>,
@@ -116,6 +116,8 @@ declare const __propDef: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type InternalMonitorStringProps = typeof __propDef.props;
 export type InternalMonitorStringEvents = typeof __propDef.events;
@@ -142,7 +144,7 @@ export type InternalMonitorStringSlots = typeof __propDef.slots;
  * <script lang="ts">
  * import { InternalMonitorString } from 'svelte-tweakpane-ui';
  *
- * let stringToMonitor = 'bla\n\bla\nbla';
+ * let stringToMonitor = 'so\nit\ngoes';
  *
  * setInterval(() => {
  *   stringToMonitor = stringToMonitor

package/dist/internal/InternalPaneDraggable.svelte

@@ -9,7 +9,7 @@
 	import GenericPane from './GenericPane.svelte';
 	import { clamp, getSwatchButton, pickerIsOpen, removeKeys } from '../utils.js';
 	import { onDestroy, onMount } from 'svelte';
-	import { persisted } from 'svelte-local-storage-store';
+	import { persisted } from 'svelte-persisted-store';
 	const titlebarWindowShadeSingleClick = true;
 	const titlebarWindowShadeDoubleClick = false;
 	const pointerCancelOnWindowBlur = true;