svelte-tweakpane-ui 1.2.3 → 1.2.4

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

@@ -9,84 +9,21 @@ export type IntervalSliderValueObject = {
 export type IntervalSliderValue = Simplify<IntervalSliderValueObject | IntervalSliderValueTuple>;
 export type IntervalSliderChangeEvent = ValueChangeEvent<IntervalSliderValue>;
 declare const __propDef: {
-	props: Omit<
-		Omit<
-			{
-				/**
-				 * The binding's target object with values to manipulate.
-				 * @bindable
-				 */
-				object: import('@tweakpane/core').Bindable & Record<string, IntervalSliderValue>;
-				/** 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').NumberInputParams | 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('tweakpane').SliderInputBindingApi | 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'
-		> & {
-			/**
-			 * Interval value to control.
-			 *
-			 * Tuples are a convenience addition to the vanilla JS Tweakpane API.
-			 * @bindable
-			 */
-			value: IntervalSliderValue;
-		} & {
+	props: {
+		/**
+		 * Interval value to control.
+		 *
+		 * Tuples are a convenience addition to the vanilla JS Tweakpane API.
+		 * @bindable
+		 */
+		value: IntervalSliderValue;
+		/**
+		 * Midpoint of the interval range value.
+		 * @bindable
+		 * */
+		meanValue?: number | undefined;
+	} & Omit<
+		{
 			/**
 			 * Minimum value.
 			 *
@@ -119,29 +56,102 @@ declare const __propDef: {
 			 * [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 | undefined /**
+			 * Fires when `value` changes.
+			 *
+			 * _This event is provided for advanced use cases. It's usually preferred to bind to the `value` prop instead._
+			 *
+			 * The `event.details` payload includes a copy of the value and an `origin` field to distinguish between user-interactive changes (`internal`)
+			 * and changes resulting from programmatic manipulation of the `value` (`external`).
+			 *
+			 * @extends ValueChangeEvent
+			 * @event
+			 * */;
 			/**
 			 * The minimum step interval.
 			 * @default `undefined`  \
 			 * No step constraint.
 			 */
 			step?: number | undefined;
-		},
+		} & {
+			/**
+			 * Interval value to control.
+			 *
+			 * Tuples are a convenience addition to the vanilla JS Tweakpane API.
+			 * @bindable
+			 */
+			value: IntervalSliderValue;
+		} & Omit<
+				{
+					/**
+					 * The binding's target object with values to manipulate.
+					 * @bindable
+					 */
+					object: import('@tweakpane/core').Bindable & Record<string, IntervalSliderValue>;
+					/** 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').NumberInputParams | 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('tweakpane').SliderInputBindingApi | 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 value to control.
-		 *
-		 * Tuples are a convenience addition to the vanilla JS Tweakpane API.
-		 * @bindable
-		 */
-		value: IntervalSliderValue;
-		/**
-		 * Midpoint of the interval range value.
-		 * @bindable
-		 * */
-		meanValue?: number | undefined;
-	};
+	>;
 	slots: {};
 	events: {
 		/**
@@ -193,7 +203,7 @@ export type IntervalSliderSlots = typeof __propDef.slots;
  * max={100}
  * format={(v) => `${v.toFixed(0)}%`}
  * />
- * <div class="demo" style:--e="{value[1]}%" style:--s="{value[0]}%" />
+ * <div class="demo" style:--e="{value[1]}%" style:--s="{value[0]}%"></div>
  *
  * <style>
  * div.demo {

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

@@ -13,7 +13,25 @@ export type ListOptions<T> = Simplify<
 export type ListChangeEvent = ValueChangeEvent<unknown>;
 import type { ListBladeApi, ListBladeParams } from 'tweakpane';
 declare class __sveltets_Render<T extends any> {
-	props(): Omit<
+	props(): {
+		/**
+		 * Value of the selected `options` item.
+		 * @bindable
+		 * */
+		value: T;
+		/**
+		 * Text displayed next to list.
+		 * @default `undefined`
+		 * */
+		label?: string | undefined;
+		/**
+		 * A collection of options to select from.
+		 *
+		 * The arbitrary array list type is a convenience addition to to the vanilla JS Tweakpane
+		 * API.
+		 * */
+		options: ListOptions<T>;
+	} & Omit<
 		{
 			/**
 			 * A collection of options to select from.
@@ -61,25 +79,7 @@ declare class __sveltets_Render<T extends any> {
 			plugin?: import('tweakpane').TpPluginBundle | undefined;
 		},
 		'ref' | 'options' | 'plugin'
-	> & {
-		/**
-		 * Value of the selected `options` item.
-		 * @bindable
-		 * */
-		value: T;
-		/**
-		 * Text displayed next to list.
-		 * @default `undefined`
-		 * */
-		label?: string | undefined;
-		/**
-		 * A collection of options to select from.
-		 *
-		 * The arbitrary array list type is a convenience addition to to the vanilla JS Tweakpane
-		 * API.
-		 * */
-		options: ListOptions<T>;
-	};
+	>;
 	events(): {
 		/**
 		 * Fires when `value` changes.

package/dist/control/Point.svelte

@@ -95,7 +95,7 @@
 		{:else}
 			<!-- Without a label, the grid takes the full width of the control -->
 			<!-- TODO remove magic number -->
-			<div style="aspect-ratio: 1; width: calc(100% - 28px);" />
+			<div style="aspect-ratio: 1; width: calc(100% - 28px);"></div>
 		{/if}
 	{/if}
 {/if}

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

@@ -38,119 +38,7 @@ export type PointOptions<
 			: never;
 export type PointChangeEvent = ValueChangeEvent<PointValue2d | PointValue3d | PointValue4d>;
 declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointValue4d> {
-	props(): Omit<
-		Omit<
-			{
-				/**
-				 * The binding's target object with values to manipulate.
-				 * @bindable
-				 */
-				object: import('@tweakpane/core').Bindable & Record<string, T>;
-				/** 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?:
-					| (T extends PointValue4d
-							? Point4dInputParams
-							: T extends PointValue3d
-								? Point3dInputParams
-								: T extends PointValue2d
-									? Point2dInputParams
-									: unknown)
-					| 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/GenericInput.svelte').GenericInputRef | 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'
-		> & {
-			/**
-			 * A 2D, 3D, or 4D point object to control.
-			 *
-			 * Takes a tuple with a `number` value for each dimension, or an object with at least `x`
-			 * and `y` values, and optionally `z` and `w` values for additional dimensions.
-			 *
-			 * The type of this value will determine the availability of axis-specific option props.
-			 * @bindable
-			 */
-			value: T;
-		} & {
-			/**
-			 * DOM class name of the button used to expand and collapse the input's picker.
-			 * @default `undefined`
-			 */
-			buttonClass?: string | undefined;
-			/**
-			 * Expand or collapse the input's picker.
-			 * @default `false`
-			 * @bindable
-			 */
-			expanded?: boolean | undefined;
-			/**
-			 * The style of value "picker" to use in the input.
-			 * @default `'popup'`
-			 */
-			picker?: 'inline' | 'popup' | undefined;
-			/**
-			 * Allow users to interactively expand / contract the picker.
-			 * @default `true`
-			 */
-			userExpandable?: boolean | undefined;
-		},
-		'ref' | 'options' | 'plugin' | 'buttonClass'
-	> & {
+	props(): {
 		/**
 		 * A 2D, 3D, or 4D point object to control.
 		 *
@@ -198,7 +86,120 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 		 * No step constraint.
 		 * */
 		step?: number | undefined;
-	} & (T extends PointValue2d | PointValue3d | PointValue4d
+	} & Omit<
+		{
+			/**
+			 * DOM class name of the button used to expand and collapse the input's picker.
+			 * @default `undefined`
+			 */
+			buttonClass?: string | undefined;
+			/**
+			 * Expand or collapse the input's picker.
+			 * @default `false`
+			 * @bindable
+			 */
+			expanded?: boolean | undefined;
+			/**
+			 * The style of value "picker" to use in the input.
+			 * @default `'popup'`
+			 */
+			picker?: 'inline' | 'popup' | undefined;
+			/**
+			 * Allow users to interactively expand / contract the picker.
+			 * @default `true`
+			 */
+			userExpandable?: boolean | undefined;
+		} & {
+			/**
+			 * A 2D, 3D, or 4D point object to control.
+			 *
+			 * Takes a tuple with a `number` value for each dimension, or an object with at least `x`
+			 * and `y` values, and optionally `z` and `w` values for additional dimensions.
+			 *
+			 * The type of this value will determine the availability of axis-specific option props.
+			 * @bindable
+			 */
+			value: T;
+		} & Omit<
+				{
+					/**
+					 * The binding's target object with values to manipulate.
+					 * @bindable
+					 */
+					object: import('@tweakpane/core').Bindable & Record<string, T>;
+					/** 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?:
+						| (T extends PointValue4d
+								? Point4dInputParams
+								: T extends PointValue3d
+									? Point3dInputParams
+									: T extends PointValue2d
+										? Point2dInputParams
+										: unknown)
+						| 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/GenericInput.svelte').GenericInputRef | 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' | 'buttonClass'
+	> &
+		(T extends PointValue2d | PointValue3d | PointValue4d
 			? {
 					/**
 					 * Input parameters specific to the X dimension.

package/dist/control/RadioGrid.svelte

@@ -40,5 +40,5 @@
 <GenericInput bind:value on:change {options} plugin={pluginModule} {...$$restProps} />
 {#if !BROWSER}
 	<ClsPad keysAdd={fillWith('containerUnitSize', gridDimensions.rows - 1)} theme={$$props.theme} />
-	<div style:height={`${2 * (gridDimensions.rows - 1)}px`} />
+	<div style:height={`${2 * (gridDimensions.rows - 1)}px`}></div>
 {/if}

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

@@ -2,8 +2,61 @@ import { SvelteComponent } from 'svelte';
 import type { ValueChangeEvent } from '../utils.js';
 export type RadioGridChangeEvent = ValueChangeEvent<boolean | number | string>;
 declare class __sveltets_Render<T extends boolean | number | string> {
-	props(): Omit<
-		Omit<
+	props(): {
+		/**
+		 * Value of selected radio button.
+		 *
+		 * Bind to this prop to receive updates when the user clicks a radio button.
+		 * @bindable
+		 * @default `undefined` If undefined, the first value in the `values` array is assigned.
+		 *  */
+		value?: T | undefined;
+		/**
+		 * Number of columns to arrange the radio buttons into.
+		 * @default `undefined`
+		 * */
+		columns?: number | undefined;
+		/**
+		 * Name allowing multiple radio groups to share mutually exclusive selection state.
+		 *
+		 * Allows spanning exclusive selection state across multiple independent `<RadioGrid>`
+		 * components, but should remain `undefined` for most use cases to keep exclusivity scoped
+		 * to a single `<RadioGrid>`.
+		 * @default `undefined`  \
+		 * Uses a dynamically generated globally unique id internally.
+		 */
+		groupName?: string | undefined;
+		/**
+		 * Text to show in the radio button label before the value.
+		 * @default `undefined`
+		 * */
+		prefix?: string | undefined;
+		/**
+		 * Number of rows to arrange the radio buttons into.
+		 * @default `undefined`
+		 * */
+		rows?: number | undefined;
+		/**
+		 * Text to show in the radio button label after the value.
+		 * @default `undefined`
+		 * */
+		suffix?: string | undefined;
+		/**
+		 * Array of `number`, `string` or `boolean` values, each of which will become a button in
+		 * the radio grid.
+		 * */
+		values: T[];
+	} & Omit<
+		{
+			/**
+			 * Value of selected radio button.
+			 *
+			 * Bind to this prop to receive updates when the user clicks a radio button.
+			 * @bindable
+			 * @default `undefined` If undefined, the first value in the `values` array is assigned.
+			 */
+			value: T;
+		} & Omit<
 			{
 				/**
 				 * The binding's target object with values to manipulate.
@@ -35,7 +88,7 @@ declare class __sveltets_Render<T extends boolean | number | string> {
 				 * @default `undefined`
 				 */
 				options?:
-					| (import('@tweakpane/core').BaseInputParams & {
+					| ({
 							cells: (
 								x: number,
 								y: number
@@ -46,7 +99,7 @@ declare class __sveltets_Render<T extends boolean | number | string> {
 							groupName: string;
 							size: [number, number];
 							view: 'radiogrid';
-					  })
+					  } & import('@tweakpane/core').BaseInputParams)
 					| undefined;
 				/**
 				 * Custom color scheme.
@@ -84,62 +137,9 @@ declare class __sveltets_Render<T extends boolean | number | string> {
 				plugin?: import('tweakpane').TpPluginBundle | undefined;
 			},
 			'object' | 'key'
-		> & {
-			/**
-			 * Value of selected radio button.
-			 *
-			 * Bind to this prop to receive updates when the user clicks a radio button.
-			 * @bindable
-			 * @default `undefined` If undefined, the first value in the `values` array is assigned.
-			 */
-			value: T;
-		},
+		>,
 		'ref' | 'options' | 'plugin'
-	> & {
-		/**
-		 * Value of selected radio button.
-		 *
-		 * Bind to this prop to receive updates when the user clicks a radio button.
-		 * @bindable
-		 * @default `undefined` If undefined, the first value in the `values` array is assigned.
-		 *  */
-		value?: T | undefined;
-		/**
-		 * Number of columns to arrange the radio buttons into.
-		 * @default `undefined`
-		 * */
-		columns?: number | undefined;
-		/**
-		 * Name allowing multiple radio groups to share mutually exclusive selection state.
-		 *
-		 * Allows spanning exclusive selection state across multiple independent `<RadioGrid>`
-		 * components, but should remain `undefined` for most use cases to keep exclusivity scoped
-		 * to a single `<RadioGrid>`.
-		 * @default `undefined`  \
-		 * Uses a dynamically generated globally unique id internally.
-		 */
-		groupName?: string | undefined;
-		/**
-		 * Text to show in the radio button label before the value.
-		 * @default `undefined`
-		 * */
-		prefix?: string | undefined;
-		/**
-		 * Number of rows to arrange the radio buttons into.
-		 * @default `undefined`
-		 * */
-		rows?: number | undefined;
-		/**
-		 * Text to show in the radio button label after the value.
-		 * @default `undefined`
-		 * */
-		suffix?: string | undefined;
-		/**
-		 * Array of `number`, `string` or `boolean` values, each of which will become a button in
-		 * the radio grid.
-		 * */
-		values: T[];
-	};
+	>;
 	events(): {
 		/**
 		 * Fires when `value` changes.