svelte-tweakpane-ui 1.3.3 → 1.5.0

package/dist/control/RotationEuler.svelte

@@ -5,6 +5,7 @@
 	import GenericInputFolding from '../internal/GenericInputFolding.svelte';
 	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-rotation';
 	import { BROWSER } from 'esm-env';
+	import { shallowEqual } from 'fast-equals';
 	export let value;
 	export let order = void 0;
 	export let unit = void 0;
@@ -15,24 +16,28 @@
 	let options;
 	let internalValue;
 	const buttonClass = 'tp-rotationswatchv_b';
-	function updateInternalValue() {
+	function updateInternalValueFromValue() {
 		if (Array.isArray(value)) {
-			const [x, y, z] = value;
-			internalValue = { x, y, z };
-		} else {
-			internalValue = value;
+			const newInternalValue = { x: value[0], y: value[1], z: value[2] };
+			if (!shallowEqual(newInternalValue, internalValue)) {
+				internalValue = newInternalValue;
+			}
+		} else if (!shallowEqual(value, internalValue)) {
+			internalValue = { ...value };
 		}
 	}
-	function updateValue() {
+	function updateValueFromInternalValue() {
 		if (Array.isArray(value)) {
-			const { x, y, z } = internalValue;
-			value = [x, y, z];
-		} else {
-			value = internalValue;
+			const newValue = [internalValue.x, internalValue.y, internalValue.z];
+			if (!shallowEqual(newValue, value)) {
+				value = newValue;
+			}
+		} else if (!shallowEqual(internalValue, value)) {
+			value = { ...internalValue };
 		}
 	}
-	$: value, updateInternalValue();
-	$: internalValue, updateValue();
+	$: value, updateInternalValueFromValue();
+	$: internalValue, updateValueFromInternalValue();
 	$: options = {
 		x: optionsX,
 		y: optionsY,

package/dist/control/RotationQuaternion.svelte

@@ -5,6 +5,7 @@
 	import GenericInputFolding from '../internal/GenericInputFolding.svelte';
 	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-rotation';
 	import { BROWSER } from 'esm-env';
+	import { shallowEqual } from 'fast-equals';
 	export let value;
 	export let optionsX = void 0;
 	export let optionsY = void 0;
@@ -14,24 +15,28 @@
 	let options;
 	let internalValue;
 	const buttonClass = 'tp-rotationswatchv_b';
-	function updateInternalValue() {
+	function updateInternalValueFromValue() {
 		if (Array.isArray(value)) {
-			const [x, y, z, w] = value;
-			internalValue = { x, y, z, w };
-		} else {
-			internalValue = value;
+			const newInternalValue = { x: value[0], y: value[1], z: value[2], w: value[3] };
+			if (!shallowEqual(newInternalValue, internalValue)) {
+				internalValue = newInternalValue;
+			}
+		} else if (!shallowEqual(value, internalValue)) {
+			internalValue = { ...value };
 		}
 	}
-	function updateValue() {
+	function updateValueFromInternalValue() {
 		if (Array.isArray(value)) {
-			const { x, y, z, w } = internalValue;
-			value = [x, y, z, w];
-		} else {
-			value = internalValue;
+			const newValue = [internalValue.x, internalValue.y, internalValue.z, internalValue.w];
+			if (!shallowEqual(newValue, value)) {
+				value = newValue;
+			}
+		} else if (!shallowEqual(internalValue, value)) {
+			value = { ...internalValue };
 		}
 	}
-	$: value, updateInternalValue();
-	$: internalValue, updateValue();
+	$: value, updateInternalValueFromValue();
+	$: internalValue, updateValueFromInternalValue();
 	$: options = {
 		x: optionsX,
 		y: optionsY,

package/dist/control/Slider.svelte

@@ -2,6 +2,7 @@
 
 <script>
 	import GenericSlider from '../internal/GenericSlider.svelte';
+	import {} from 'svelte';
 	export let value;
 	export let wide = void 0;
 	let ref;
@@ -16,4 +17,4 @@
 	$: ref && wide !== void 0 && updateWide(wide);
 </script>
 
-<GenericSlider bind:value bind:ref bind:wide on:change {...$$restProps} />
+<GenericSlider bind:value bind:ref on:change {...$$restProps} />

package/dist/control/Stepper.svelte

@@ -0,0 +1,30 @@
+<script context="module"></script>
+
+<script>
+	import GenericSlider from '../internal/GenericSlider.svelte';
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-inputs';
+	export let value;
+	export let wide = void 0;
+	let options;
+	$: options = {
+		view: 'stepper'
+	};
+	let ref;
+	function updateWide(wide2) {
+		const inputField = ref?.element.querySelector('div.tp-stepv_t');
+		const buttonContainer = ref?.element.querySelector('div.tp-stepv_s');
+		const buttons = buttonContainer?.querySelectorAll('button');
+		if (wide2) {
+			inputField?.style.setProperty('display', 'none');
+			buttonContainer?.style.setProperty('flex', '1');
+			for (const button of buttons ?? []) {
+				button.style.setProperty('flex', '1');
+			}
+		} else {
+			inputField?.style.removeProperty('display');
+		}
+	}
+	$: ref && wide !== void 0 && updateWide(wide);
+</script>
+
+<GenericSlider bind:value bind:ref on:change {options} plugin={pluginModule} {...$$restProps} />

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

@@ -0,0 +1,194 @@
+import { SvelteComponent } from 'svelte';
+import type { ValueChangeEvent } from '../utils.js';
+import type { SliderInputBindingApi as GenericSliderRef } from 'tweakpane';
+export type StepperChangeEvent = ValueChangeEvent<number>;
+declare const __propDef: {
+	props: {
+		/**
+		 * A `number` value to control.
+		 * @bindable
+		 * */
+		value: number;
+	} & Omit<
+		{
+			/**
+			 * Minimum value.
+			 *
+			 * Specifying both a `min` and a `max` prop turns the control into a slider.
+			 * @default `undefined`
+			 */
+			min?: number;
+			/**
+			 * Maximum value.
+			 *
+			 * Specifying both a `min` and a `max` prop turns the control into a slider.
+			 * @default `undefined`
+			 */
+			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;
+			/**
+			 * 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;
+			/**
+			 * 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;
+			/**
+			 * The minimum step interval.
+			 * @default `undefined`  \
+			 * No step constraint.
+			 */
+			step?: number;
+			/**
+			 * When `true`, expand the width of the control at the expense of the numeric input
+			 * field.
+			 * @default `false`
+			 */
+			wide?: boolean;
+		} & {
+			/**
+			 * A `number` value to control.
+			 * @bindable
+			 */
+			value: number;
+		} & Omit<
+				{
+					/**
+					 * The binding's target object with values to manipulate.
+					 * @bindable
+					 */
+					object: import('@tweakpane/core').Bindable & Record<string, number>;
+					/** 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;
+					/**
+					 * 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?: GenericSliderRef | 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('../utils.js').Plugin | undefined;
+				},
+				'object' | 'key'
+			>,
+		'ref' | 'options' | 'plugin' | 'amount'
+	>;
+	slots: {};
+	events: {
+		/**
+		 * 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
+		 * */
+		change: StepperChangeEvent;
+	};
+};
+export type StepperProps = typeof __propDef.props;
+export type StepperEvents = typeof __propDef.events;
+export type StepperSlots = typeof __propDef.slots;
+/**
+ * A control for simple incremental value changes.
+ *
+ * Similar in functionality to a `<Slider>`, but with nice big buttons to increment and decrement the value.
+ *
+ * Integrates the [Stepper](https://github.com/tallneil/tweakpane-plugin-inputs/blob/main/src/stepper/plugin.ts)
+ * control from [Neil Shankar's](https://tallneil.io/) ["Inputs for Tweakpane
+ * " plugin](https://github.com/tallneil/tweakpane-plugin-inputs).
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the stepper in `<Pane position="inline">`.
+ *
+ * Note that _Svelte Tweakpane UI_ embeds a functionally identical [fork](https://github.com/kitschpatrol/tweakpane-plugin-inputs) of the plugin with build optimizations.
+ *
+ * @emits {StepperChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { Stepper } from 'svelte-tweakpane-ui';
+ * let angle = 45;
+ * </script>
+ *
+ * <Stepper bind:value={angle} label="Angle" step={45} />
+ *
+ * <div class="demo" style:--a="{angle}deg"></div>
+ *
+ * <style>
+ * div.demo {
+ *   aspect-ratio: 1;
+ *   width: 100%;
+ *   background: linear-gradient(var(--a), magenta, orange);
+ * }
+ * </style>
+ * ```
+ *
+ * @sourceLink
+ * [Stepper.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/Stepper.svelte)
+ */
+export default class Stepper extends SvelteComponent<StepperProps, StepperEvents, StepperSlots> {}
+export {};

package/dist/core/Binding.svelte

@@ -44,17 +44,31 @@
 		_ref?.dispose();
 	});
 	const dispatch = createEventDispatcher();
+	function safeCopy(value) {
+		if (value instanceof File) {
+			return new File([value], value.name, {
+				lastModified: value.lastModified,
+				type: value.type
+			});
+		}
+		if (BROWSER && value instanceof HTMLImageElement) {
+			const copy2 = new Image();
+			copy2.src = value.src;
+			return copy2;
+		}
+		return copy(value);
+	}
 	let lastObject = object;
-	let lastValue = copy(object[key]);
+	let lastValue = safeCopy(object[key]);
 	let internalChange = false;
 	function onBoundValueChange(object2) {
 		if (lastObject !== object2) {
 			internalChange = false;
 		}
 		if (!shallowEqual(object2[key], lastValue)) {
-			lastValue = copy(object2[key]);
+			lastValue = safeCopy(object2[key]);
 			dispatch('change', {
-				value: copy(object2[key]),
+				value: safeCopy(object2[key]),
 				origin: internalChange ? 'internal' : 'external'
 			});
 			if (!internalChange && _ref) {
@@ -71,7 +85,7 @@
 	}
 	function onTweakpaneChange() {
 		internalChange = true;
-		object = object;
+		object[key] = safeCopy(object[key]);
 	}
 	$: DEV && enforceReadonly(_ref, ref, 'Binding', 'ref', true);
 	$: options, $parentStore !== void 0 && index !== void 0 && create();

package/dist/extra/AutoValue.svelte.d.ts

@@ -123,7 +123,7 @@ export type AutoValueSlots = typeof __propDef.slots;
  * import { AutoValue } from 'svelte-tweakpane-ui';
  *
  * let number = 0;
- * let color = '#ff00ff';
+ * let color = { r: 255, g: 0, b: 255 };
  * let point = { x: 0, y: 0 };
  * let text = 'Cosmic manifold';
  * </script>

package/dist/extra/Element.svelte.d.ts

@@ -151,7 +151,7 @@ export type ElementSlots = typeof __propDef.slots;
  *     gradientAngle = 45;
  *     textAngle = 0;
  *   }}
- *   disabled={gradientAngle == 45 && textAngle == 0}
+ *   disabled={gradientAngle === 45 && textAngle === 0}
  *   title="Reset"
  * />
  * </Pane>

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export {
 	type CubicBezierValueTuple,
 	default as CubicBezier
 } from './control/CubicBezier.svelte';
+export { default as File, type FileChangeEvent, type FileValue } from './control/File.svelte';
 export { default as Image, type ImageChangeEvent, type ImageValue } from './control/Image.svelte';
 export {
 	default as IntervalSlider,
@@ -74,6 +75,7 @@ export {
 	type RotationQuaternionValueTuple
 } from './control/RotationQuaternion.svelte';
 export { default as Slider, type SliderChangeEvent } from './control/Slider.svelte';
+export { default as Stepper, type StepperChangeEvent } from './control/Stepper.svelte';
 export { default as Text, type TextChangeEvent } from './control/Text.svelte';
 export { default as Textarea, type TextareaChangeEvent } from './control/Textarea.svelte';
 export { default as Wheel, type WheelChangeEvent } from './control/Wheel.svelte';

package/dist/index.js

@@ -1,11 +1,9 @@
-// Components
 export { default as Button } from './control/Button.svelte';
-// Essentials (1st party plugins)
 export { default as ButtonGrid } from './control/ButtonGrid.svelte';
 export { default as Checkbox } from './control/Checkbox.svelte';
 export { default as Color } from './control/Color.svelte';
 export { default as CubicBezier } from './control/CubicBezier.svelte';
-// Additional plugins (3rd party / community)
+export { default as File } from './control/File.svelte';
 export { default as Image } from './control/Image.svelte';
 export { default as IntervalSlider } from './control/IntervalSlider.svelte';
 export { default as List } from './control/List.svelte';
@@ -16,10 +14,10 @@ export { default as Ring } from './control/Ring.svelte';
 export { default as RotationEuler } from './control/RotationEuler.svelte';
 export { default as RotationQuaternion } from './control/RotationQuaternion.svelte';
 export { default as Slider } from './control/Slider.svelte';
+export { default as Stepper } from './control/Stepper.svelte';
 export { default as Text } from './control/Text.svelte';
 export { default as Textarea } from './control/Textarea.svelte';
 export { default as Wheel } from './control/Wheel.svelte';
-// Core (tweakpane building blocks)
 export { default as Binding } from './core/Binding.svelte';
 export { default as Blade } from './core/Blade.svelte';
 export { default as Folder } from './core/Folder.svelte';
@@ -27,7 +25,6 @@ export { default as Pane } from './core/Pane.svelte';
 export { default as Separator } from './core/Separator.svelte';
 export { default as TabGroup } from './core/TabGroup.svelte';
 export { default as TabPage } from './core/TabPage.svelte';
-// Extra (svelte convenience components)
 export { default as AutoObject } from './extra/AutoObject.svelte';
 export { default as AutoValue } from './extra/AutoValue.svelte';
 export { default as Element } from './extra/Element.svelte';

package/dist/internal/GenericBinding.svelte

@@ -4,6 +4,7 @@
 	generics="T extends any, U extends BindingOptions = BindingOptions, V extends BindingRef = BindingRef"
 >
 	import Binding from '../core/Binding.svelte';
+	import { shallowEqual } from 'fast-equals';
 	export let value;
 	export let ref = void 0;
 	export let options = void 0;
@@ -12,7 +13,9 @@
 		return value;
 	}
 	function setValue() {
-		object[key] = value;
+		if (!shallowEqual(value, object[key])) {
+			object[key] = value;
+		}
 	}
 	$: object = { [key]: getValue() };
 	$: value = object[key];

package/dist/internal/GenericPane.svelte

@@ -3,7 +3,7 @@
 	import { applyTheme } from '../theme.js';
 	import { updateCollapsibility } from '../utils.js';
 	import { BROWSER } from 'esm-env';
-	import { getContext, onDestroy, setContext } from 'svelte';
+	import { getContext, onDestroy, setContext, tick } from 'svelte';
 	import { writable } from 'svelte/store';
 	import { Pane as TpPane } from 'tweakpane';
 	export let title = void 0;
@@ -29,11 +29,12 @@
 	if ($existingParentStore !== void 0) {
 		console.warn('<Panes> must not be nested');
 	}
-	let _expanded = expanded;
 	if (BROWSER) {
 		$parentStore = new TpPane({ expanded, title });
 		$parentStore.on('fold', () => {
-			_expanded = $parentStore.expanded;
+			if ($parentStore.expanded !== void 0 && expanded !== $parentStore.expanded) {
+				expanded = $parentStore.expanded;
+			}
 		});
 		tpPane = $parentStore;
 		setContext('parentStore', parentStore);
@@ -57,19 +58,19 @@
 			}
 		}
 	}
-	function syncFolded() {
-		if (tpPane && tpPane.expanded !== _expanded) {
-			tpPane.expanded = _expanded;
-		}
-		expanded = _expanded;
+	function updateExpanded(expanded2) {
+		void tick().then(() => {
+			if (tpPane?.expanded !== void 0 && expanded2 !== void 0 && 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 && (tpPane.title = title);
+	$: tpPane && title !== void 0 && (tpPane.title = title.length > 0 ? title : ' ');
 	$: tpPane && applyTheme(tpPane.element, theme);
-	$: _expanded, tpPane && expanded !== void 0 && syncFolded();
-	$: tpPane && (_expanded = expanded);
+	$: tpPane && updateExpanded(expanded);
 </script>
 
 {#if BROWSER}

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

@@ -224,6 +224,8 @@ export type ProfilerSlots = typeof __propDef.slots;
  * }
  *
  * onMount(() => {
+ *   let animationFrameHandle: number;
+ *
  *   (function tick() {
  *     // Nesting measurements creates a hierarchy
  *     // in the Profile visualization
@@ -252,6 +254,10 @@ export type ProfilerSlots = typeof __propDef.slots;
  *
  *     requestAnimationFrame(tick);
  *   })();
+ *
+ *   return () => {
+ *     cancelAnimationFrame(animationFrameHandle);
+ *   };
  * });
  * </script>
  *