svelte-tweakpane-ui 1.2.6 → 1.3.0

package/dist/control/IntervalSlider.svelte

@@ -5,6 +5,7 @@
 	import GenericSlider from '../internal/GenericSlider.svelte';
 	export let value;
 	export let meanValue = void 0;
+	export let wide = void 0;
 	let internalValue;
 	function updateInternalValue() {
 		if (Array.isArray(value)) {
@@ -28,10 +29,26 @@
 			internalValue = { min: meanValue - r / 2, max: meanValue + r / 2 };
 		}
 	}
+	let ref;
+	function updateWide(wide2) {
+		const inputField = ref?.element.querySelector('div.tp-rsltxtv_t');
+		if (wide2) {
+			inputField?.style.setProperty('display', 'none');
+		} else {
+			inputField?.style.removeProperty('display');
+		}
+	}
+	$: ref && wide !== void 0 && updateWide(wide);
 	$: value, updateInternalValue();
 	$: internalValue, updateValue();
 	$: meanValue = (internalValue.min + internalValue.max) / 2;
 	$: meanValue, updateValueFromMean();
 </script>
 
-<GenericSlider bind:value={internalValue} on:change plugin={pluginModule} {...$$restProps} />
+<GenericSlider
+	bind:value={internalValue}
+	bind:ref
+	on:change
+	plugin={pluginModule}
+	{...$$restProps}
+/>

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

@@ -1,6 +1,7 @@
 import { SvelteComponent } from 'svelte';
 import type { Simplify } from '../utils';
 import type { ValueChangeEvent } from '../utils.js';
+import type { SliderInputBindingApi as GenericSliderRef } from 'tweakpane';
 export type IntervalSliderValueTuple = [min: number, max: number];
 export type IntervalSliderValueObject = {
 	min: number;
@@ -63,6 +64,12 @@ declare const __propDef: {
 			 * No step constraint.
 			 */
 			step?: number | undefined;
+			/**
+			 * When `true`, expand the width of the control at the expense of the numeric input
+			 * field.
+			 * @default `false`
+			 */
+			wide?: boolean | undefined;
 		} & {
 			/**
 			 * Interval value to control.
@@ -124,7 +131,7 @@ declare const __propDef: {
 					 * @bindable
 					 * @readonly
 					 */
-					ref?: import('tweakpane').SliderInputBindingApi | undefined;
+					ref?: GenericSliderRef | undefined;
 					/**
 					 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
 					 * the `<Binding>`'s containing `<Pane>`.

package/dist/control/List.svelte

@@ -53,7 +53,10 @@
 			? options2
 			: isObjectStyleListOptions(options2)
 				? options2
-				: options2.map((value2) => ({ value: value2, text: JSON.stringify(value2) }));
+				: options2.map((value2) => ({
+						value: value2,
+						text: typeof value2 === 'object' ? JSON.stringify(value2) : String(value2)
+					}));
 	}
 	function setValue() {
 		if (!shallowEqual(listBlade.value, value)) {

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

@@ -44,12 +44,6 @@ declare const __propDef: {
 		 * @default `{ ticks: 5, pixels: 40, value: 10 }`
 		 * */
 		unit?: RingUnit | undefined;
-		/**
-		 * When `true`, expand the width of the ring control at the expense of the numeric input
-		 * field.
-		 * @default `false`
-		 * */
-		wide?: boolean | undefined;
 	} & Omit<
 		{
 			/**
@@ -91,6 +85,12 @@ declare const __propDef: {
 			 * No step constraint.
 			 */
 			step?: number | undefined;
+			/**
+			 * When `true`, expand the width of the control at the expense of the numeric input
+			 * field.
+			 * @default `false`
+			 */
+			wide?: boolean | undefined;
 		} & {
 			/**
 			 * A `number` value to control.

package/dist/control/Slider.svelte

@@ -3,6 +3,17 @@
 <script>
 	import GenericSlider from '../internal/GenericSlider.svelte';
 	export let value;
+	export let wide = void 0;
+	let ref;
+	function updateWide(wide2) {
+		const inputField = ref?.element.querySelector('div.tp-sldtxtv_t');
+		if (wide2) {
+			inputField?.style.setProperty('display', 'none');
+		} else {
+			inputField?.style.removeProperty('display');
+		}
+	}
+	$: ref && wide !== void 0 && updateWide(wide);
 </script>
 
-<GenericSlider bind:value on:change {...$$restProps} />
+<GenericSlider bind:value bind:ref bind:wide on:change {...$$restProps} />

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

@@ -1,5 +1,6 @@
 import { SvelteComponent } from 'svelte';
 import type { ValueChangeEvent } from '../utils.js';
+import type { SliderInputBindingApi as GenericSliderRef } from 'tweakpane';
 export type SliderChangeEvent = ValueChangeEvent<number>;
 declare const __propDef: {
 	props: {
@@ -49,6 +50,12 @@ declare const __propDef: {
 			 * No step constraint.
 			 */
 			step?: number | undefined;
+			/**
+			 * When `true`, expand the width of the control at the expense of the numeric input
+			 * field.
+			 * @default `false`
+			 */
+			wide?: boolean | undefined;
 		} & {
 			/**
 			 * A `number` value to control.
@@ -108,7 +115,7 @@ declare const __propDef: {
 					 * @bindable
 					 * @readonly
 					 */
-					ref?: import('tweakpane').SliderInputBindingApi | undefined;
+					ref?: GenericSliderRef | undefined;
 					/**
 					 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
 					 * the `<Binding>`'s containing `<Pane>`.

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

@@ -14,12 +14,6 @@ declare const __propDef: {
 		 * `value`](https://github.com/cocopon/tweakpane/blob/66dfbea04bfe9b7f031673c955ceda1f92356e75/packages/core/src/common/number/util.ts#L54).
 		 */
 		amount?: number | undefined;
-		/**
-		 * When `true`, expand the width of the wheel control at the expense of the numeric input
-		 * field.
-		 * @default `false`
-		 * */
-		wide?: boolean | undefined;
 	} & Omit<
 		{
 			/**
@@ -61,6 +55,12 @@ declare const __propDef: {
 			 * No step constraint.
 			 */
 			step?: number | undefined;
+			/**
+			 * When `true`, expand the width of the control at the expense of the numeric input
+			 * field.
+			 * @default `false`
+			 */
+			wide?: boolean | undefined;
 		} & {
 			/**
 			 * A `number` value to control.

package/dist/core/Binding.svelte

@@ -44,9 +44,13 @@
 		_ref?.dispose();
 	});
 	const dispatch = createEventDispatcher();
+	let lastObject = object;
 	let lastValue = copy(object[key]);
 	let internalChange = false;
 	function onBoundValueChange(object2) {
+		if (lastObject !== object2) {
+			internalChange = false;
+		}
 		if (!shallowEqual(object2[key], lastValue)) {
 			lastValue = copy(object2[key]);
 			dispatch('change', {
@@ -60,6 +64,10 @@
 			}
 		}
 		internalChange = false;
+		if (lastObject !== object2) {
+			lastObject = object2;
+			create();
+		}
 	}
 	function onTweakpaneChange() {
 		internalChange = true;

package/dist/core/Folder.svelte.d.ts

@@ -31,10 +31,7 @@ declare const __propDef: {
 		 * set with `setGlobalDefaultTheme()`.
 		 * */ theme?: Theme | undefined;
 	};
-	/**
-	 * Prevent interactivity and gray out the control.
-	 * @default `false`
-	 * */ events: {
+	events: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {
@@ -43,6 +40,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type FolderProps = typeof __propDef.props;
 export type FolderEvents = typeof __propDef.events;

package/dist/core/Pane.svelte.d.ts

@@ -446,6 +446,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type PaneProps = typeof __propDef.props;
 export type PaneEvents = typeof __propDef.events;

package/dist/core/Separator.svelte.d.ts

@@ -56,6 +56,8 @@ declare const __propDef: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type SeparatorProps = typeof __propDef.props;
 export type SeparatorEvents = typeof __propDef.events;

package/dist/core/TabGroup.svelte.d.ts

@@ -30,6 +30,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type TabGroupProps = typeof __propDef.props;
 export type TabGroupEvents = typeof __propDef.events;

package/dist/core/TabPage.svelte.d.ts

@@ -33,6 +33,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type TabPageProps = typeof __propDef.props;
 export type TabPageEvents = typeof __propDef.events;

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

@@ -79,6 +79,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type ElementProps = typeof __propDef.props;
 export type ElementEvents = typeof __propDef.events;

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

@@ -87,6 +87,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/GenericPane.svelte.d.ts

@@ -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

@@ -43,6 +43,12 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 		 * No step constraint.
 		 * */
 		step?: number | undefined;
+		/**
+		 * When `true`, expand the width of the control at the expense of the numeric input
+		 * field.
+		 * @default `false`
+		 * */
+		wide?: boolean | undefined;
 	} & {
 		/**
 		 * The value to control.

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

@@ -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

@@ -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

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

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

@@ -169,6 +169,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type InternalPaneDraggableProps = typeof __propDef.props;
 export type InternalPaneDraggableEvents = typeof __propDef.events;

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

@@ -108,6 +108,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type InternalPaneFixedProps = typeof __propDef.props;
 export type InternalPaneFixedEvents = typeof __propDef.events;

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

@@ -94,6 +94,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type InternalPaneInlineProps = typeof __propDef.props;
 export type InternalPaneInlineEvents = typeof __propDef.events;

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

@@ -134,6 +134,8 @@ declare const __propDef: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type WaveformMonitorProps = typeof __propDef.props;
 export type WaveformMonitorEvents = typeof __propDef.events;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tweakpane-ui",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "type": "module",
   "description": "A Svelte component library wrapping UI elements from Tweakpane, plus some additional functionality for convenience and flexibility.",
   "repository": {
@@ -200,34 +200,34 @@
     "tweakpane": "4.0.3"
   },
   "devDependencies": {
-    "@kitschpatrol/shared-config": "^4.6.3",
+    "@kitschpatrol/shared-config": "^4.6.6",
     "@phenomnomnominal/tsquery": "^6.1.3",
-    "@playwright/test": "^1.44.0",
+    "@playwright/test": "^1.44.1",
     "@stkb/rewrap": "^0.1.0",
     "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.5.8",
+    "@sveltejs/kit": "^2.5.10",
     "@sveltejs/package": "^2.3.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@types/eslint": "^8.56.10",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.12.11",
+    "@types/node": "^20.12.13",
     "bumpp": "^9.4.1",
     "eslint": "^8.57.0",
     "fs-extra": "^11.2.0",
-    "glob": "^10.3.15",
+    "glob": "^10.4.1",
     "npm-run-all": "^4.1.5",
     "postcss-html": "^1.7.0",
-    "publint": "^0.2.7",
+    "publint": "^0.2.8",
     "read-package-up": "^11.0.0",
     "svelte": "^4.2.17",
-    "svelte-check": "^3.7.1",
-    "svelte-language-server": "^0.16.9",
-    "svelte2tsx": "^0.7.8",
+    "svelte-check": "^3.8.0",
+    "svelte-language-server": "^0.16.10",
+    "svelte2tsx": "^0.7.9",
     "ts-morph": "^22.0.0",
     "tslib": "^2.6.2",
-    "tsx": "^4.10.2",
+    "tsx": "^4.11.0",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.2.12",
     "yaml": "^2.4.2"
   },
   "scripts": {
@@ -247,7 +247,7 @@
     "build:13-build-docs": "pnpm run docs-build",
     "check": "svelte-kit sync && svelte-check --ignore ./scratch --tsconfig ./tsconfig.json",
     "check-watch": "svelte-kit sync && svelte-check --ignore ./scratch --tsconfig ./tsconfig.json --watch",
-    "clean": "git clean -fdX",
+    "clean": "git clean -fdX && rm ./pnpm-lock.yaml",
     "docs-build": "pnpm -C ./docs run build",
     "docs-dev": "pnpm -C ./docs run dev",
     "docs-preview": "pnpm -C ./docs run preview",

package/readme.md

@@ -35,7 +35,7 @@
 
 ## Overview
 
-🎛️ **_Svelte Tweakpane UI_** wraps user-interface elements from the excellent [Tweakpane](https://tweakpane.github.io/docs/) library in a collection of 31 idiomatic, reactive, type-safe, carefully-crafted, and obsessively-documented [Svelte](https://svelte.dev) components.
+🎛️ **_Svelte Tweakpane UI_** wraps user-interface elements from the excellent [Tweakpane](https://tweakpane.github.io/docs/) library in a collection of <!-- component-count -->31<!-- /component-count --> idiomatic, reactive, type-safe, carefully-crafted, and obsessively-documented [Svelte](https://svelte.dev) components.
 
 The library makes it easy to quickly and declaratively add knobs and dials to your projects using components that feel like they were made for Svelte. It also augments Tweakpane with a few [extra features](https://kitschpatrol.com/svelte-tweakpane-ui/docs/features) for your convenience and enjoyment.
 
@@ -68,6 +68,86 @@ npm install svelte-tweakpane-ui
 <Button on:click={() => alert('🎛️')} />
 ```
 
+## Components
+
+<!-- component-list -->
+
+### Core
+
+- **[Binding](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/binding)**\
+  Wraps the Tweakpane [`addBinding`](https://tweakpane.github.io/docs/input-bindings/) method.
+- **[Blade](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/blade)**\
+  Wraps the Tweakpane [`addBlade`](https://tweakpane.github.io/docs/blades/) method.
+- **[Folder](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/folder)**\
+  Organize multiple controls into a collapsable folder.
+- **[Pane](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/pane)**\
+  The root `<Pane>` component, used for organizing controls into a single group and controlling how and where the Tweakpane is displayed.
+- **[Separator](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/separator)**\
+  A convenience component providing a subtle visual separator between controls, in the spirit of the HTML `<hr>` element.
+- **[TabGroup](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/tabgroup)**\
+  Contains a collection of `<TabPage>` components to be presented as a tabs.
+- **[TabPage](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/tabpage)**\
+  Contains a collection of Tweakpane controls to be presented as a single group inside a `<TabGroup>` component.
+
+### Control
+
+- **[Button](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/button)**\
+  A humble but effective push button.
+- **[ButtonGrid](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/buttongrid)**\
+  A grid of `<Button>` components.
+- **[Checkbox](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/checkbox)**\
+  A checkbox.
+- **[Color](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/color)**\
+  A color picker.
+- **[CubicBezier](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/cubicbezier)**\
+  A control for editing a bezier curve. Ideal for tweaking animation easing values.
+- **[Image](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/image)**\
+  An image input control.
+- **[IntervalSlider](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/intervalslider)**\
+  A twin-handled slider control for specifying range values.
+- **[List](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/list)**\
+  An option list picker, similar to an HTML `<select>` element.
+- **[Point](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/point)**\
+  Wraps the Tweakpane [point bindings](https://tweakpane.github.io/docs/input-bindings/#point).
+- **[RadioGrid](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/radiogrid)**\
+  A grid of radio buttons.
+- **[Ring](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/ring)**\
+  A control evoking the focus ring on a proper camera lens.
+- **[RotationEuler](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/rotationeuler)**\
+  Integrates the [euler rotation](https://github.com/0b5vr/tweakpane-plugin-rotation/blob/dev/src/RotationInputPluginEuler.ts) control from [0b5vr](https://0b5vr.com)'s [tweakpane-plugin-rotation](https://github.com/0b5vr/tweakpane-plugin-rotation).
+- **[RotationQuaternion](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/rotationquaternion)**\
+  Integrates the [quaternion rotation](https://github.com/0b5vr/tweakpane-plugin-rotation/blob/dev/src/RotationInputPluginQuaternion.ts) control from [0b5vr](https://0b5vr.com)'s [tweakpane-plugin-rotation](https://github.com/0b5vr/tweakpane-plugin-rotation).
+- **[Slider](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/slider)**\
+  A slider component providing fine-grained control over numeric values.
+- **[Text](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/text)**\
+  A text field, in the spirit of the HTML `<input type="text">` element.
+- **[Textarea](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/textarea)**\
+  A multi-line text input field, in the spirit of the HTML `<textarea>` element.
+- **[Wheel](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/wheel)**\
+  A control evoking a dial on a proper camera body.
+
+### Monitor
+
+- **[FpsGraph](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/fpsgraph)**\
+  A control for monitoring and graphing frame rates over time.
+- **[Monitor](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/monitor)**\
+  Wraps the Tweakpane [monitor binding](https://tweakpane.github.io/docs/monitor-bindings/) functionality for `boolean`, `number`, and `string` values.
+- **[Profiler](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/profiler)**\
+  Measure and visualize multiple quantities over time.
+- **[WaveformMonitor](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/waveformmonitor)**\
+  Visualize multiple numeric values as a waveform.
+
+### Extra
+
+- **[AutoObject](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/autoobject)**\
+  Rapid-development component which automatically creates a set of Tweakpane controls for an arbitrary object.
+- **[AutoValue](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/autovalue)**\
+  Rapid-development component which automatically creates a Tweakpane control for an arbitrary value.
+- **[Element](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/element)**\
+  A component for embedding arbitrary HTML elements into a pane.
+
+<!-- /component-list -->
+
 ## Maintainers
 
 [@kitschpatrol](https://github.com/kitschpatrol)