svelte-tweakpane-ui 1.3.3 → 1.4.0

package/dist/control/Color.svelte

@@ -3,10 +3,11 @@
 <script>
 	import ClsPad from '../internal/ClsPad.svelte';
 	import GenericInputFolding from '../internal/GenericInputFolding.svelte';
-	import { objectToTuple, tupleToObject } from '../utils';
+	import { objectToTuple } from '../utils';
 	import { fillWith } from '../utils';
-	import { isColorObject, isObject, isRgbaColorObject, isRgbColorObject } from '@tweakpane/core';
+	import { isColorObject, isRgbaColorObject, isRgbColorObject } from '@tweakpane/core';
 	import { BROWSER } from 'esm-env';
+	import { shallowEqual } from 'fast-equals';
 	export let value;
 	export let expanded = void 0;
 	export let type = void 0;
@@ -14,34 +15,53 @@
 	let options;
 	let ref;
 	const buttonClass = 'tp-colswv_b';
-	function updateInternalValue() {
-		if (Array.isArray(value)) {
-			if (value.length === 4) {
-				internalValue = tupleToObject(value, ['r', 'g', 'b', 'a']);
-			} else if (value.length === 3) {
-				internalValue = tupleToObject(value, ['r', 'g', 'b']);
-			} else {
+	function updateInternalValueFromValue() {
+		if (typeof value === 'string') {
+			if (internalValue !== value) {
+				internalValue = value;
+			}
+		} else if (isColorObject(value)) {
+			if (!shallowEqual(value, internalValue)) {
+				internalValue = { ...value };
+			}
+		} else if (Array.isArray(value)) {
+			let newInternalValue =
+				value.length === 4
+					? { r: value[0], g: value[1], b: value[2], a: value[3] }
+					: value.length === 3
+						? { r: value[0], g: value[1], b: value[2] }
+						: void 0;
+			if (newInternalValue === void 0) {
 				console.error('Unreachable');
+			} else if (!shallowEqual(newInternalValue, internalValue)) {
+				internalValue = newInternalValue;
 			}
 		} else {
-			internalValue = value;
+			console.error('Unreachable');
 		}
 	}
-	function updateValue() {
-		if (Array.isArray(value) && isColorObject(internalValue)) {
-			if (isRgbaColorObject(internalValue)) {
-				value = objectToTuple(internalValue, ['r', 'g', 'b', 'a']);
-			} else if (isRgbColorObject(internalValue)) {
-				value = objectToTuple(internalValue, ['r', 'g', 'b']);
-			} else {
-				console.error('Unreachable');
+	function updateValueFromInternalValue() {
+		if (typeof value === 'string' && typeof internalValue === 'string') {
+			if (internalValue !== value) {
+				value = internalValue;
+			}
+		} else if (Array.isArray(value) && isColorObject(internalValue)) {
+			const newValue = isRgbaColorObject(internalValue)
+				? objectToTuple(internalValue, ['r', 'g', 'b', 'a'])
+				: isRgbColorObject(internalValue)
+					? objectToTuple(internalValue, ['r', 'g', 'b'])
+					: void 0;
+			if (newValue === void 0) {
+				console.error('Unreachable color type mismatch');
+			} else if (!shallowEqual(newValue, value)) {
+				value = newValue;
+			}
+		} else if (isColorObject(value) && isColorObject(internalValue)) {
+			if (!shallowEqual(internalValue, value)) {
+				value = { ...internalValue };
 			}
-		} else if (typeof value === 'string') {
-			value = internalValue;
-		} else if (isObject(value)) {
-			value = internalValue;
 		} else {
-			console.error('Unreachable');
+			console.error('Unreachable color type mismatch');
 		}
 	}
 	function addListeners() {
@@ -49,8 +69,8 @@
 			ref.refresh();
 		});
 	}
-	$: value, updateInternalValue();
-	$: internalValue, updateValue();
+	$: value, updateInternalValueFromValue();
+	$: internalValue, updateValueFromInternalValue();
 	$: ref !== void 0 && addListeners();
 	$: options = {
 		color: {

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

@@ -147,10 +147,10 @@ export type ImageSlots = typeof __propDef.slots;
  * let source = 'placeholder';
  *
  * async function getRandomKittenUrl() {
- *   const { url } = await fetch(
- *     'https://source.unsplash.com/800x800/?kitten',
- *     { method: 'HEAD', redirect: 'follow' }
- *   );
+ *   const { url } = await fetch('https://loremflickr.com/800/800/kitten', {
+ *     method: 'HEAD',
+ *     redirect: 'follow'
+ *   });
  *   return url;
  * }
  * </script>

package/dist/control/IntervalSlider.svelte

@@ -3,30 +3,34 @@
 <script>
 	import GenericSlider from '../internal/GenericSlider.svelte';
 	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-essentials';
+	import { shallowEqual } from 'fast-equals';
 	export let value;
 	export let meanValue = void 0;
 	export let wide = void 0;
 	let internalValue;
-	function updateInternalValue() {
-		if (Array.isArray(value)) {
-			const [min, max] = value;
-			internalValue = { min, max };
-		} else {
-			internalValue = value;
+	function updateInternalValueFromValue() {
+		const newInternalValue = Array.isArray(value) ? { min: value[0], max: value[1] } : value;
+		if (!shallowEqual(internalValue, newInternalValue)) {
+			internalValue = { ...newInternalValue };
 		}
 	}
-	function updateValue() {
+	function updateValueFromInternalValue() {
 		if (Array.isArray(value)) {
-			const { min, max } = internalValue;
-			value = [min, max];
-		} else {
-			value = internalValue;
+			const newValue = [internalValue.min, internalValue.max];
+			if (!shallowEqual(value, newValue)) {
+				value = newValue;
+			}
+		} else if (!shallowEqual(value, internalValue)) {
+			value = { ...internalValue };
 		}
 	}
 	function updateValueFromMean() {
 		if (meanValue !== void 0) {
 			const r = internalValue.max - internalValue.min;
-			internalValue = { min: meanValue - r / 2, max: meanValue + r / 2 };
+			const valueFromMean = { min: meanValue - r / 2, max: meanValue + r / 2 };
+			if (!shallowEqual(valueFromMean, internalValue)) {
+				internalValue = valueFromMean;
+			}
 		}
 	}
 	let ref;
@@ -39,8 +43,8 @@
 		}
 	}
 	$: ref && wide !== void 0 && updateWide(wide);
-	$: value, updateInternalValue();
-	$: internalValue, updateValue();
+	$: value, updateInternalValueFromValue();
+	$: internalValue, updateValueFromInternalValue();
 	$: meanValue = (internalValue.min + internalValue.max) / 2;
 	$: meanValue, updateValueFromMean();
 </script>

package/dist/control/Point.svelte

@@ -5,6 +5,7 @@
 	import GenericInputFolding from '../internal/GenericInputFolding.svelte';
 	import { removeKeys } from '../utils';
 	import { BROWSER } from 'esm-env';
+	import { shallowEqual } from 'fast-equals';
 	export let value;
 	export let expanded = $$props.expanded ?? void 0;
 	let pointerScale = $$props['pointerScale'] ?? void 0;
@@ -20,40 +21,38 @@
 	let internalValue;
 	let options;
 	const buttonClass = 'tp-p2dv_b';
-	function updateInternalValue() {
+	function updateInternalValueFromValue() {
 		if (Array.isArray(value)) {
-			if (value.length === 4) {
-				const [x, y, z, w] = value;
-				internalValue = { x, y, z, w };
-			} else if (value.length === 3) {
-				const [x, y, z] = value;
-				internalValue = { x, y, z };
-			} else {
-				const [x, y] = value;
-				internalValue = { x, y };
+			const newInternalValue =
+				value.length === 4
+					? { x: value[0], y: value[1], z: value[2], w: value[3] }
+					: value.length === 3
+						? { x: value[0], y: value[1], z: value[2] }
+						: { x: value[0], y: value[1] };
+			if (!shallowEqual(internalValue, newInternalValue)) {
+				internalValue = newInternalValue;
 			}
-		} else {
-			internalValue = value;
+		} else if (!shallowEqual(internalValue, value)) {
+			internalValue = { ...value };
 		}
 	}
-	function updateValue() {
+	function updateValueFromInternalValue() {
 		if (Array.isArray(value)) {
-			if ('w' in internalValue) {
-				const { x, y, z, w } = internalValue;
-				value = [x, y, z, w];
-			} else if ('z' in internalValue) {
-				const { x, y, z } = internalValue;
-				value = [x, y, z];
-			} else {
-				const { x, y } = internalValue;
-				value = [x, y];
+			const newValue =
+				'w' in internalValue
+					? [internalValue.x, internalValue.y, internalValue.z, internalValue.w]
+					: 'z' in internalValue
+						? [internalValue.x, internalValue.y, internalValue.z]
+						: [internalValue.x, internalValue.y];
+			if (!shallowEqual(value, newValue)) {
+				value = newValue;
 			}
-		} else {
-			value = internalValue;
+		} else if (!shallowEqual(value, internalValue)) {
+			value = { ...internalValue };
 		}
 	}
-	$: value, updateInternalValue();
-	$: internalValue, updateValue();
+	$: value, updateInternalValueFromValue();
+	$: internalValue, updateValueFromInternalValue();
 	$: options = {
 		x: optionsX,
 		y: optionsY,

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/core/Binding.svelte

@@ -71,7 +71,7 @@
 	}
 	function onTweakpaneChange() {
 		internalChange = true;
-		object = object;
+		object[key] = copy(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/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>
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tweakpane-ui",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "type": "module",
   "description": "A Svelte component library wrapping UI elements from Tweakpane, plus some additional functionality for convenience and flexibility.",
   "repository": {
@@ -19,7 +19,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">=18.0.0",
+    "node": ">=18.0.0 <23.0.0",
     "pnpm": ">=9.0.0"
   },
   "exports": {
@@ -182,7 +182,7 @@
     "npm-package"
   ],
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
     "@kitschpatrol/tweakpane-plugin-camerakit": "0.3.1-beta.2",
@@ -196,48 +196,47 @@
     "esm-env": "1.0.0",
     "fast-copy": "3.0.2",
     "fast-equals": "5.0.1",
-    "nanoid": "5.0.6",
+    "nanoid": "5.0.7",
     "svelte-persisted-store": "0.11.0",
     "tweakpane": "4.0.4"
   },
   "devDependencies": {
-    "@kitschpatrol/shared-config": "^4.7.10",
-    "@phenomnomnominal/tsquery": "^6.1.3",
-    "@playwright/test": "^1.47.1",
-    "@stkb/rewrap": "^0.1.0",
-    "@sveltejs/adapter-static": "^3.0.5",
-    "@sveltejs/kit": "^2.5.28",
-    "@sveltejs/package": "^2.3.5",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "@types/eslint": "^8.56.12",
-    "@types/fs-extra": "^11.0.4",
-    "@types/node": "18.0.0",
-    "bumpp": "^9.5.2",
-    "eslint": "^8.57.1",
-    "fs-extra": "^11.2.0",
-    "glob": "^11.0.0",
-    "npm-run-all": "^4.1.5",
-    "postcss-html": "^1.7.0",
-    "publint": "^0.2.11",
-    "read-package-up": "^11.0.0",
-    "remark-mdat": "^0.7.3",
-    "svelte": "^4.2.19",
-    "svelte-check": "^4.0.2",
-    "svelte-language-server": "^0.17.0",
-    "svelte2tsx": "^0.7.19",
-    "ts-morph": "^23.0.0",
-    "tslib": "^2.7.0",
-    "tsx": "^4.19.1",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.6",
-    "yaml": "^2.5.1"
+    "@kitschpatrol/shared-config": "4.7.11",
+    "@phenomnomnominal/tsquery": "6.1.3",
+    "@playwright/test": "1.48.1",
+    "@stkb/rewrap": "0.1.0",
+    "@sveltejs/adapter-static": "3.0.5",
+    "@sveltejs/kit": "2.7.2",
+    "@sveltejs/package": "2.3.5",
+    "@sveltejs/vite-plugin-svelte": "3.1.2",
+    "@types/eslint": "8.56.12",
+    "@types/fs-extra": "11.0.4",
+    "@types/node": "18.19.57",
+    "bumpp": "9.7.1",
+    "eslint": "8.57.1",
+    "fs-extra": "11.2.0",
+    "glob": "11.0.0",
+    "postcss-html": "1.7.0",
+    "publint": "0.2.11",
+    "read-package-up": "11.0.0",
+    "remark-mdat": "0.7.3",
+    "svelte": "4.2.19",
+    "svelte-check": "4.0.5",
+    "svelte-language-server": "0.17.0",
+    "svelte2tsx": "0.7.22",
+    "ts-morph": "24.0.0",
+    "tslib": "2.8.0",
+    "tsx": "4.19.1",
+    "typescript": "5.6.3",
+    "vite": "5.4.9",
+    "yaml": "2.6.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "run-s --print-label build:*",
-    "build:01-sync": "pnpm run check",
+    "build": "pnpm run --sequential /^build:/",
+    "build:01-sync": "pnpm run check && pnpm run svelte-5-check",
     "build:02-exports": "tsx ./scripts/generate-exports.ts",
     "build:03-add-source-links": "tsx ./scripts/add-source-links.ts",
     "build:04-format": "pnpm run format && prettier-config --fix ./readme.md",
@@ -250,6 +249,8 @@
     "build:11-examples-to-docs": "tsx ./scripts/generate-example-components.ts",
     "build:12-acknowledgments-data": "mkdir -p ./docs/src/content/acknowledgments && pnpm licenses list --json > ./docs/src/content/acknowledgments/acknowledgments-lib.json",
     "build:13-build-docs": "pnpm run docs-build",
+    "build:14-build-kit": "pnpm run kit-build",
+    "build:15-build-svelte-5": "pnpm run svelte-5-build",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check-watch": "svelte-kit sync && svelte-check --ignore ./scratch --tsconfig ./tsconfig.json --watch",
     "clean": "rm pnpm-lock.yaml ; git clean -fdX",
@@ -257,7 +258,7 @@
     "docs-dev": "pnpm -C ./docs run dev",
     "docs-preview": "pnpm -C ./docs run preview",
     "fix": "shared-config --fix",
-    "format": "run-s --print-label format:*",
+    "format": "pnpm run --sequential /^format:/",
     "format:1-shared": "shared-config --fix",
     "format:2-embedded": "tsx ./scripts/format-embedded-code.ts",
     "kit-build": "pnpm run kit-examples && vite build",
@@ -265,12 +266,16 @@
     "kit-examples": "tsx ./scripts/generate-kit-examples.ts",
     "kit-preview": "vite preview",
     "lint": "shared-config --check",
-    "release": "run-s --print-label release:*",
+    "release": "pnpm run --sequential /^release:/",
     "release:1-build": "pnpm run build",
     "release:2-version": "bumpp --commit 'Release: %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:*",
+    "svelte-5-build": "pnpm -C ./svelte-5 run build",
+    "svelte-5-check": "pnpm -C ./svelte-5 run check",
+    "svelte-5-dev": "pnpm -C ./svelte-5 run dev",
+    "svelte-5-preview": "pnpm -C ./svelte-5 run preview",
+    "test": "pnpm run --sequential /^test:/",
     "test:integration": "playwright test",
     "type-check": "tsc --noEmit"
   }

package/readme.md

@@ -40,6 +40,8 @@ The library makes it easy to quickly and declaratively add knobs and dials to yo
 
 [The components](https://kitschpatrol.com/svelte-tweakpane-ui/docs#components) should be useful for integrating controls and value monitoring in parametrically driven artworks, data visualizations, creative tools, simulations, etc.
 
+The library is compatible with both Svelte 4 and Svelte 5.
+
 ## Demo
 
 ![Svelte Tweakpane UI quick demo](./docs/public/quick-demo.gif)