svelte-tweakpane-ui 1.1.4 → 1.2.0

package/dist/internal/InternalPaneInline.svelte

@@ -4,26 +4,26 @@
 	import { onMount } from 'svelte';
 	export let expanded = void 0;
 	export let width = void 0;
+	export let tpPane = void 0;
 	export let theme = {
 		baseBorderRadius: '0px',
 		baseShadowColor: 'hsla(0, 0%, 0%, 0)'
 		// BladeBorderRadius: '0px'
 	};
-	let paneRef;
 	let containerElement;
 	onMount(() => {
-		if (paneRef) {
-			const fixedContainer = paneRef.element.parentElement;
-			containerElement.append(paneRef.element);
+		if (tpPane) {
+			const fixedContainer = tpPane.element.parentElement;
+			containerElement.append(tpPane.element);
 			fixedContainer?.remove();
 		} else {
-			console.warn('paneRef is undefined');
+			console.warn('tpPane is undefined');
 		}
 	});
 </script>
 
 <div bind:this={containerElement} style:width={width === undefined ? null : `${width}px`}>
-	<GenericPane bind:expanded bind:paneRef {theme} {...removeKeys($$restProps, 'position')}>
+	<GenericPane bind:expanded bind:tpPane {theme} {...removeKeys($$restProps, 'position')}>
 		<slot />
 	</GenericPane>
 </div>

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

@@ -1,71 +1,77 @@
 import { SvelteComponent } from 'svelte';
-import type { Pane as TpPane } from 'tweakpane';
 declare const __propDef: {
-	props: Omit<
-		{
-			/**
-			 * Text in the pane's title bar.
-			 * @default `Tweakpane`  \
-			 * Unless `position='inline'`, in which case the default is `undefined` and no title bar is
-			 * shown.
-			 */
-			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 | undefined;
-			/**
-			 * Expand or collapse the pane into its title bar.
-			 * @default `true`
-			 * @bindable
-			 */
-			expanded?: boolean | undefined;
-			/**
-			 * Custom color scheme.
-			 *
-			 * Applies to all child components, but note that setting a different `theme` on a child
-			 * component's prop will **not** override the parent pane's theme.
-			 *
-			 * Note that `<Pane position="inline' ...>` squares off rounded corners by default to better
-			 * integrate with surrounding content.
-			 *
-			 * Simply pass a custom or default theme like `ThemeUtils.presets.standard` if you want rounded
-			 * corners on an `inline` pane.
-			 *
-			 * See also the `setGlobalDefaultTheme()` for a way to set a custom default theme for all panes
-			 * on the page.
-			 * @default `undefined`  \
-			 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
-			 * set with `setGlobalDefaultTheme()`.
-			 */
-			theme?: import('..').Theme | undefined;
-			/**
-			 * Scales the pane's elements by a factor of `scale` to make it easier to see.
-			 *
-			 * Holds the width of the pane constant, so the pane will grow taller as it is scaled and will
-			 * continue to respect position- and size-related props. If you need more breathing room, set
-			 * the `width` property on the pane.
-			 *
-			 * Note that the scaling prop is only available on `<Pane>`, not on stand-alone (implicitly
-			 * wrapped) inline elements.
-			 *
-			 * Negative values are ignored.
-			 * @default `1`
-			 */
-			scale?: number | undefined;
-			/** Internal use only. */
-			userCreatedPane?: boolean | undefined;
-			/**
-			 * Internal use only.
-			 * @readonly
-			 */
-			paneRef?: TpPane | undefined;
-		},
-		'paneRef'
-	> & {
+	props: {
+		/**
+		 * Text in the pane's title bar.
+		 * @default `Tweakpane`  \
+		 * Unless `position='inline'`, in which case the default is `undefined` and no title bar is
+		 * shown.
+		 */
+		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 | undefined;
+		/**
+		 * Expand or collapse the pane into its title bar.
+		 * @default `true`
+		 * @bindable
+		 */
+		expanded?: boolean | undefined;
+		/**
+		 * Custom color scheme.
+		 *
+		 * Applies to all child components, but note that setting a different `theme` on a child
+		 * component's prop will **not** override the parent pane's theme.
+		 *
+		 * Note that `<Pane position="inline' ...>` squares off rounded corners by default to better
+		 * integrate with surrounding content.
+		 *
+		 * Simply pass a custom or default theme like `ThemeUtils.presets.standard` if you want rounded
+		 * corners on an `inline` pane.
+		 *
+		 * See also the `setGlobalDefaultTheme()` for a way to set a custom default theme for all panes
+		 * on the page.
+		 * @default `undefined`  \
+		 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+		 * set with `setGlobalDefaultTheme()`.
+		 */
+		theme?: import('..').Theme | undefined;
+		/**
+		 * Scales the pane's elements by a factor of `scale` to make it easier to see.
+		 *
+		 * Holds the width of the pane constant, so the pane will grow taller as it is scaled and will
+		 * continue to respect position- and size-related props. If you need more breathing room, set
+		 * the `width` property on the pane.
+		 *
+		 * Note that the scaling prop is only available on `<Pane>`, not on stand-alone (implicitly
+		 * wrapped) inline elements.
+		 *
+		 * Negative values are ignored.
+		 * @default `1`
+		 */
+		scale?: number | undefined;
+		/** Internal use only. */
+		userCreatedPane?: boolean | undefined;
+		/**
+		 * The internal Tweakpane [`Pane`](https://tweakpane.github.io/docs/api/classes/Pane.html) object.
+		 *
+		 * This property is exposed for advanced use cases only.
+		 *
+		 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+		 *
+		 * Note that the `Pane` type for this property comes from the core Tweakpane library.
+		 * Creating an alias is suggested to avoid confusion with the _Svelte Tweakpane UI_ `Pane`
+		 * component: e.g. `import { type Pane as TpPane } from 'tweakpane'`
+		 *
+		 * @bindable
+		 * @readonly
+		 */
+		tpPane?: import('tweakpane').Pane | undefined;
+	} & {
 		/**
 		 * Width of the pane, in pixels.
 		 *

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

@@ -44,18 +44,24 @@ declare const __propDef: {
 			 * Reference to internal Tweakpane
 			 * [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
 			 *
-			 * This is primarily for internal use, when implementing convenience components wrapping Blade's
-			 * functionality.
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Blade>`'s functionality.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+			 *
 			 * @bindable
 			 * @readonly
 			 */
 			ref?: FpsGraphRef | undefined;
 			/**
-			 * Imported Tweakpane `TpPluginBundle` (Aliased as `Plugin`) module to register before creating
-			 * the blade.
+			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+			 * the `<Blade>`'s containing `<Pane>`.
+			 *
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Blade>`'s functionality in combination with a Tweakpane plugin.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 			 *
-			 * This is primarily for internal use, when implementing convenience components wrapping Blade's
-			 * functionality in combination with a Tweakpane plugin.
 			 * @default `undefined`
 			 */
 			plugin?: import('tweakpane').TpPluginBundle | undefined;

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

@@ -54,18 +54,24 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
 				 * this control.
 				 *
-				 * This is primarily for internal use, when implementing convenience components wrapping
-				 * Binding's functionality.
+				 * 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/GenericMonitor.svelte').GenericMonitorRef | undefined;
 				/**
 				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-				 * the binding's containing `<Pane>`.
+				 * 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.
 				 *
-				 * This is primarily for internal use, when implementing convenience components wrapping
-				 * Binding's functionality in combination with a Tweakpane plugin.
 				 * @default `undefined`
 				 */
 				plugin?: import('tweakpane').TpPluginBundle | undefined;
@@ -150,18 +156,24 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 							 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
 							 * this control.
 							 *
-							 * This is primarily for internal use, when implementing convenience components wrapping
-							 * Binding's functionality.
+							 * 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/GenericMonitor.svelte').GenericMonitorRef | undefined;
 							/**
 							 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-							 * the binding's containing `<Pane>`.
+							 * 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.
 							 *
-							 * This is primarily for internal use, when implementing convenience components wrapping
-							 * Binding's functionality in combination with a Tweakpane plugin.
 							 * @default `undefined`
 							 */
 							plugin?: import('tweakpane').TpPluginBundle | undefined;
@@ -257,18 +269,24 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 								 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
 								 * this control.
 								 *
-								 * This is primarily for internal use, when implementing convenience components wrapping
-								 * Binding's functionality.
+								 * 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/GenericMonitor.svelte').GenericMonitorRef | undefined;
 								/**
 								 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-								 * the binding's containing `<Pane>`.
+								 * 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.
 								 *
-								 * This is primarily for internal use, when implementing convenience components wrapping
-								 * Binding's functionality in combination with a Tweakpane plugin.
 								 * @default `undefined`
 								 */
 								plugin?: import('tweakpane').TpPluginBundle | undefined;
@@ -359,18 +377,24 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 									 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
 									 * this control.
 									 *
-									 * This is primarily for internal use, when implementing convenience components wrapping
-									 * Binding's functionality.
+									 * 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/GenericMonitor.svelte').GenericMonitorRef | undefined;
 									/**
 									 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-									 * the binding's containing `<Pane>`.
+									 * 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.
 									 *
-									 * This is primarily for internal use, when implementing convenience components wrapping
-									 * Binding's functionality in combination with a Tweakpane plugin.
 									 * @default `undefined`
 									 */
 									plugin?: import('tweakpane').TpPluginBundle | undefined;
@@ -424,7 +448,7 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 							 */
 							max?: number | undefined;
 							/**
-							 * A function to customize the number's formatting (e.g. rounding, etc.).
+							 * A function to customize the number's string representation (e.g. rounding, etc.).
 							 * @default `undefined`  \
 							 * Normal `.toString()` formatting.
 							 */

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

@@ -2,13 +2,13 @@ import { SvelteComponent } from 'svelte';
 import type { ProfilerBladeMeasureHandler } from '@0b5vr/tweakpane-plugin-profiler';
 import type { Simplify } from '../utils';
 export type ProfilerCalcMode = 'frame' | 'mean' | 'median';
-export type ProfilerChangeEvent = CustomEvent<number>;
 export type ProfilerMeasure = (name: string, functionToMeasure: () => void) => void;
 export type ProfilerMeasureAsync = (
 	name: string,
 	functionToMeasure: () => Promise<void>
 ) => Promise<void>;
 export type ProfilerMeasureHandler = Simplify<ProfilerBladeMeasureHandler>;
+export type ProfilerChangeEvent = CustomEvent<number>;
 import type { ProfilerBladeApi as ProfilerRef } from '@0b5vr/tweakpane-plugin-profiler/dist/types/ProfilerBladeApi.js';
 import type { ProfilerBladePluginParams as ProfilerOptions } from '@0b5vr/tweakpane-plugin-profiler/dist/types/ProfilerBladePluginParams.js';
 declare const __propDef: {
@@ -60,18 +60,24 @@ declare const __propDef: {
 			 * Reference to internal Tweakpane
 			 * [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
 			 *
-			 * This is primarily for internal use, when implementing convenience components wrapping Blade's
-			 * functionality.
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Blade>`'s functionality.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+			 *
 			 * @bindable
 			 * @readonly
 			 */
 			ref?: ProfilerRef | undefined;
 			/**
-			 * Imported Tweakpane `TpPluginBundle` (Aliased as `Plugin`) module to register before creating
-			 * the blade.
+			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+			 * the `<Blade>`'s containing `<Pane>`.
+			 *
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Blade>`'s functionality in combination with a Tweakpane plugin.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 			 *
-			 * This is primarily for internal use, when implementing convenience components wrapping Blade's
-			 * functionality in combination with a Tweakpane plugin.
 			 * @default `undefined`
 			 */
 			plugin?: import('tweakpane').TpPluginBundle | undefined;
@@ -195,7 +201,11 @@ export type ProfilerSlots = typeof __propDef.slots;
  * ```svelte
  * <script lang="ts">
  * import { onMount } from 'svelte';
- * import { Profiler, type ProfilerMeasure, Slider } from 'svelte-tweakpane-ui';
+ * import {
+ *   Profiler,
+ *   type ProfilerMeasure,
+ *   Slider
+ * } from 'svelte-tweakpane-ui';
  *
  * // this is a readonly function handle assigned by Profiler component
  * // first used in onMount since it is not bound until then
@@ -204,7 +214,10 @@ export type ProfilerSlots = typeof __propDef.slots;
  * let loopExponent = 1;
  *
  * // helper to test Math functions
- * function hardWork(function_: (n: number) => number, exponent: number): void {
+ * function hardWork(
+ *   function_: (n: number) => number,
+ *   exponent: number
+ * ): void {
  *   measure(function_.name, () => {
  *     for (let sum = 0; sum < Number('1e' + exponent); sum++) {
  *       function_(sum);

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

@@ -54,18 +54,24 @@ declare const __propDef: {
 				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
 				 * this control.
 				 *
-				 * This is primarily for internal use, when implementing convenience components wrapping
-				 * Binding's functionality.
+				 * 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/GenericMonitor.svelte').GenericMonitorRef | undefined;
 				/**
 				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-				 * the binding's containing `<Pane>`.
+				 * 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.
 				 *
-				 * This is primarily for internal use, when implementing convenience components wrapping
-				 * Binding's functionality in combination with a Tweakpane plugin.
 				 * @default `undefined`
 				 */
 				plugin?: import('tweakpane').TpPluginBundle | undefined;

package/dist/utils.d.ts

@@ -13,6 +13,21 @@ export type HasKey<U, V extends PropertyKey> = V extends keyof U ? U[V] : unknow
 import type { Bindable, BladeApi, BladeController, TpPluginBundle, View } from '@tweakpane/core';
 export type BindingObject = Bindable;
 export type Plugin = TpPluginBundle;
+/**
+ * The base event type for value change notification events emitted by various controls.
+ */
+export type ValueChangeEvent<V> = CustomEvent<{
+	/**
+	 * A copy of the value at the time of the event.
+	 */
+	value: V;
+	/**
+	 * The origin of the event.
+	 * Changes resulting from the user's direct manipulation of the control will are marked as `internal`.
+	 * Changes resulting from manipulation of the bound value from _outside_ the component are marked as `external`.
+	 */
+	origin: 'external' | 'internal';
+}>;
 /**
  * Needed to conveniently use $$Events as the single source of truth for component events Performs
  * the transformation necessary (extracting detail types) to pass the $$Events type into

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tweakpane-ui",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "type": "module",
   "description": "Wraps UI elements from Tweakpane in a collection of idiomatic Svelte components, and augments Tweakpane with a few extra features for your convenience and enjoyment.",
   "repository": {
@@ -192,39 +192,42 @@
     "@tweakpane/plugin-camerakit": "^0.3.0",
     "@tweakpane/plugin-essentials": "^0.2.1",
     "esm-env": "^1.0.0",
+    "fast-copy": "^3.0.1",
+    "fast-equals": "^5.0.1",
     "nanoid": "^5.0.4",
     "svelte-local-storage-store": "^0.6.4",
     "tweakpane": "^4.0.3",
     "tweakpane-plugin-waveform": "^1.0.0"
   },
   "devDependencies": {
-    "@kitschpatrol/shared-config": "^4.3.1",
+    "@kitschpatrol/shared-config": "^4.3.3",
     "@phenomnomnominal/tsquery": "^6.1.3",
+    "@playwright/test": "^1.41.1",
     "@stkb/rewrap": "^0.1.0",
     "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.0.6",
-    "@sveltejs/package": "^2.2.4",
+    "@sveltejs/kit": "^2.5.0",
+    "@sveltejs/package": "^2.2.6",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
-    "@types/eslint": "^8.56.0",
+    "@types/eslint": "^8.56.2",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.10.5",
-    "bumpp": "^9.2.1",
+    "@types/node": "^20.11.6",
+    "bumpp": "^9.3.0",
     "eslint": "^8.56.0",
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "npm-run-all": "^4.1.5",
-    "postcss-html": "^1.5.0",
+    "postcss-html": "^1.6.0",
     "publint": "^0.2.7",
     "read-package-up": "^11.0.0",
-    "svelte": "^4.2.8",
-    "svelte-check": "^3.6.2",
-    "svelte-language-server": "^0.16.1",
-    "svelte2tsx": "^0.6.27",
+    "svelte": "^4.2.9",
+    "svelte-check": "^3.6.3",
+    "svelte-language-server": "^0.16.3",
+    "svelte2tsx": "^0.7.0",
     "ts-morph": "^21.0.1",
     "tslib": "^2.6.2",
     "tsx": "^4.7.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.10",
+    "vite": "^5.0.12",
     "yaml": "^2.3.4"
   },
   "scripts": {
@@ -261,6 +264,8 @@
     "release:2-version": "pnpm bumpp --commit 'Release: %s' --tag 'v%s'",
     "release:3-publish": "pnpm publish --ignore-scripts --otp $(op read 'op://Personal/Npmjs/one-time password?attribute=otp')",
     "rewrap": "rewrap -i --column 100 `find src \\( -name '*.svelte' -o -name '*.ts'  -o -name '*.html' \\) -type f | grep -v src/examples`",
+    "test": "run-s --print-label test:*",
+    "test:integration": "playwright test",
     "type-check": "tsc --noEmit"
   }
 }

package/readme.md

@@ -5,7 +5,7 @@
 
 ## Overview
 
-🎛️ **_Svelte Tweakpane UI_** wraps user-interface elements from the excellent [Tweakpane](https://cocopon.github.io/tweakpane/) 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 31 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.