svelte-tweakpane-ui 1.2.4 → 1.2.6

package/dist/control/ButtonGrid.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>
-	import * as pluginModule from '@tweakpane/plugin-essentials';
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-essentials';
 	import Blade from '../core/Blade.svelte';
 	import ClsPad from '../internal/ClsPad.svelte';
 	import { fillWith } from '../utils';

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

@@ -7,8 +7,8 @@ export type ButtonGridClickEvent = CustomEvent<{
 	index: number;
 	label: string;
 }>;
-import type { ButtonGridApi as ButtonGridRef } from '@tweakpane/plugin-essentials';
-import type { ButtonGridBladeParams as ButtonGridOptions } from '@tweakpane/plugin-essentials/dist/types/button-grid/plugin.d.ts';
+import type { ButtonGridApi as ButtonGridRef } from '@kitschpatrol/tweakpane-plugin-essentials';
+import type { ButtonGridBladeParams as ButtonGridOptions } from '@kitschpatrol/tweakpane-plugin-essentials/dist/types/button-grid/plugin.d.ts';
 declare const __propDef: {
 	props: {
 		/**
@@ -121,6 +121,8 @@ export type ButtonGridSlots = typeof __propDef.slots;
  * Usage outside of a `<Pane>` component will implicitly wrap the button grid in `<Pane
  * position="inline">`.
  *
+ * Note that _Svelte Tweakpane UI_ embeds a functionally identical [fork](https://github.com/kitschpatrol/tweakpane-plugin-essentials) of the plugin with build optimizations. The fork also changes the package name from `@tweakpane/plugin-essentials` to `@kitschpatrol/tweakpane-plugin-essentials` for consistency with other plugins.
+ *
  * @emits {ButtonGridClickEvent} click - When a button in the grid is clicked.
  *
  * @example

package/dist/control/CubicBezier.svelte

@@ -1,8 +1,8 @@
 <script context="module"></script>
 
 <script>
-	import * as pluginModule from '@tweakpane/plugin-essentials';
-	import { CubicBezier } from '@tweakpane/plugin-essentials';
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-essentials';
+	import { CubicBezier } from '@kitschpatrol/tweakpane-plugin-essentials';
 	import ClsPad from '../internal/ClsPad.svelte';
 	import GenericBladeFolding from '../internal/GenericBladeFolding.svelte';
 	import { fillWith } from '../utils';

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

@@ -10,8 +10,8 @@ export type CubicBezierValueObject = {
 export type CubicBezierValueTuple = [x1: number, y1: number, x2: number, y2: number];
 export type CubicBezierValue = Simplify<CubicBezierValueObject | CubicBezierValueTuple>;
 export type CubicBezierChangeEvent = ValueChangeEvent<CubicBezierValue>;
-import type { CubicBezierApi as CubicBezierRef } from '@tweakpane/plugin-essentials';
-import type { CubicBezierBladeParams as CubicBezierOptions } from '@tweakpane/plugin-essentials/dist/types/cubic-bezier/plugin.d.ts';
+import type { CubicBezierApi as CubicBezierRef } from '@kitschpatrol/tweakpane-plugin-essentials';
+import type { CubicBezierBladeParams as CubicBezierOptions } from '@kitschpatrol/tweakpane-plugin-essentials/dist/types/cubic-bezier/plugin.d.ts';
 declare const __propDef: {
 	props: {
 		/**
@@ -137,11 +137,7 @@ export type CubicBezierSlots = typeof __propDef.slots;
  * Usage outside of a `<Pane>` component will implicitly wrap the cubic bezier control in `<Pane
  * position="inline">`.
  *
- * _Note: An issue with unreleased resources has been observed in situations when the `value` prop is
- * set frequently. A [PR on the Plugin Essentials repo with a
- * fix](https://github.com/tweakpane/plugin-essentials/pull/21) is currently pending a review and
- * merge. Consider monitoring the performance of this component in the context of your use case until
- * this issue is resolved._
+ * Note that _Svelte Tweakpane UI_ embeds a [fork](https://github.com/kitschpatrol/tweakpane-plugin-essentials) of the plugin with build optimizations and [a fix for a performance issue](https://github.com/tweakpane/plugin-essentials/pull/21). The fork also changes the package name from `@tweakpane/plugin-essentials` to `@kitschpatrol/tweakpane-plugin-essentials` for consistency with other plugins.
  *
  * @emits {CubicBezierChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *

package/dist/control/Image.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>
-	import * as pluginModule from '@kitschpatrol/tweakpane-image-plugin';
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-image';
 	import ClsPad from '../internal/ClsPad.svelte';
 	import GenericInput from '../internal/GenericInput.svelte';
 	import { fillWith } from '../utils';

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

@@ -130,17 +130,13 @@ export type ImageSlots = typeof __propDef.slots;
  * Dias](https://www.linkedin.com/in/matheusdbs/), [Palash Bansal](https://github.com/repalash), and
  * others.
  *
- * Note that _Svelte Tweakpane UI_ embeds a
- * [fork](https://github.com/kitschpatrol/tweakpane-image-plugin) of the plugin with support for
- * Tweakpane 4. The dependency will be updated to point to the source repository if / when the open
- * [pull request](https://github.com/metehus/tweakpane-image-plugin/pull/1) with Tweakpane 4 support is
- * merged.
- *
  * There is currently a known bug where change events' `origin` values are sometimes incorrect. (This issue is limited to this component.)
  *
  * Usage outside of a `<Pane>` component will implicitly wrap the image control in `<Pane
  * position="inline">`.
  *
+ * Note that _Svelte Tweakpane UI_ embeds a functionally identical [fork](https://github.com/kitschpatrol/tweakpane-plugin-image) of the plugin with build optimizations. The fork also changes the package name to `@kitschpatrol/tweakpane-plugin-image` for consistency with other plugins.
+ *
  * @emits {ImageChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example
@@ -149,14 +145,20 @@ export type ImageSlots = typeof __propDef.slots;
  * import { Button, Image } from 'svelte-tweakpane-ui';
  *
  * let source = 'placeholder';
- * let kittenIndex = 1;
+ *
+ * async function getRandomKittenUrl() {
+ *   const { url } = await fetch(
+ *     'https://source.unsplash.com/800x800/?kitten',
+ *     { method: 'HEAD', redirect: 'follow' }
+ *   );
+ *   return url;
+ * }
  * </script>
  *
  * <Image bind:value={source} fit="contain" label="Image" />
  * <Button
- * on:click={() => {
- *   source = `https://placekitten.com/1024/1024?image=${kittenIndex}`;
- *   kittenIndex = (kittenIndex % 16) + 1;
+ * on:click={async () => {
+ *   source = await getRandomKittenUrl();
  * }}
  * label="Random Placeholder"
  * title="Load Kitten"

package/dist/control/IntervalSlider.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>
-	import * as pluginModule from '@tweakpane/plugin-essentials';
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-essentials';
 	import GenericSlider from '../internal/GenericSlider.svelte';
 	export let value;
 	export let meanValue = void 0;

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

@@ -56,17 +56,7 @@ 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 /**
-			 * 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
-			 * */;
+			pointerScale?: number | undefined;
 			/**
 			 * The minimum step interval.
 			 * @default `undefined`  \
@@ -185,6 +175,8 @@ export type IntervalSliderSlots = typeof __propDef.slots;
  * Usage outside of a `<Pane>` component will implicitly wrap the interval slider in `<Pane
  * position="inline">`.
  *
+ * Note that _Svelte Tweakpane UI_ embeds a functionally identical [fork](https://github.com/kitschpatrol/tweakpane-plugin-essentials) of the plugin with build optimizations. The fork also changes the package name from `@tweakpane/plugin-essentials` to `@kitschpatrol/tweakpane-plugin-essentials` for consistency with other plugins.
+ *
  * @emits {IntervalSliderChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example

package/dist/control/RadioGrid.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script generics="T extends boolean | number | string">
-	import * as pluginModule from '@tweakpane/plugin-essentials';
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-essentials';
 	import ClsPad from '../internal/ClsPad.svelte';
 	import GenericInput from '../internal/GenericInput.svelte';
 	import { fillWith } from '../utils';

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

@@ -190,6 +190,8 @@ export type RadioGridSlots<T extends boolean | number | string> = ReturnType<
  * Usage outside of a `<Pane>` component will implicitly wrap the radio grid in `<Pane
  * position="inline">`.
  *
+ * Note that _Svelte Tweakpane UI_ embeds a functionally identical [fork](https://github.com/kitschpatrol/tweakpane-plugin-essentials) of the plugin with build optimizations. The fork also changes the package name from `@tweakpane/plugin-essentials` to `@kitschpatrol/tweakpane-plugin-essentials` for consistency with other plugins.
+ *
  * @emits {RadioGridChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example

package/dist/control/Ring.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>
-	import * as pluginModule from '@tweakpane/plugin-camerakit';
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-camerakit';
 	import GenericSlider from '../internal/GenericSlider.svelte';
 	export let value;
 	export let series = void 0;

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from 'svelte';
-import type { RingSeries } from '@tweakpane/plugin-camerakit/dist/types/util.js';
+import type { RingSeries } from '@kitschpatrol/tweakpane-plugin-camerakit/dist/types/util.js';
 import type { ValueChangeEvent } from '../utils.js';
 type RingUnit = {
 	/**
@@ -198,6 +198,8 @@ export type RingSlots = typeof __propDef.slots;
  *
  * Usage outside of a `<Pane>` component will implicitly wrap the ring in `<Pane position="inline">`.
  *
+ * Note that _Svelte Tweakpane UI_ embeds a functionally identical [fork](https://github.com/kitschpatrol/tweakpane-plugin-camerakit) of the plugin with build optimizations. The fork also changes the package name from `@tweakpane/plugin-camerakit` to `@kitschpatrol/tweakpane-plugin-camerakit` for consistency with other plugins.
+ *
  * @emits {RingChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example

package/dist/control/RotationEuler.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>
-	import * as pluginModule from '@0b5vr/tweakpane-plugin-rotation';
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-rotation';
 	import ClsPad from '../internal/ClsPad.svelte';
 	import GenericInputFolding from '../internal/GenericInputFolding.svelte';
 	import { BROWSER } from 'esm-env';

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from 'svelte';
-import type { EulerOrder } from '@0b5vr/tweakpane-plugin-rotation/dist/types/EulerOrder.js';
-import type { EulerUnit } from '@0b5vr/tweakpane-plugin-rotation/dist/types/EulerUnit.js';
+import type { EulerOrder } from '@kitschpatrol/tweakpane-plugin-rotation/dist/types/EulerOrder.js';
+import type { EulerUnit } from '@kitschpatrol/tweakpane-plugin-rotation/dist/types/EulerUnit.js';
 import type { PointDimensionParams } from '@tweakpane/core';
 import type { Simplify } from '../utils';
 import type { ValueChangeEvent } from '../utils.js';
@@ -15,7 +15,7 @@ export type RotationEulerValueObject = {
 export type RotationEulerValueTuple = [x: number, y: number, z: number];
 export type RotationEulerValue = Simplify<RotationEulerValueObject | RotationEulerValueTuple>;
 export type RotationEulerChangeEvent = ValueChangeEvent<RotationEulerValue>;
-import type { RotationInputPluginEulerParams as RotationEulerOptionsInternal } from '@0b5vr/tweakpane-plugin-rotation/dist/types/RotationInputPluginEulerParams';
+import type { RotationInputPluginEulerParams as RotationEulerOptionsInternal } from '@kitschpatrol/tweakpane-plugin-rotation/dist/types/RotationInputPluginEulerParams';
 declare const __propDef: {
 	props: {
 		/**
@@ -220,8 +220,7 @@ export type RotationEulerSlots = typeof __propDef.slots;
 /**
  * Integrates the [euler
  * rotation](https://github.com/0b5vr/tweakpane-plugin-rotation/blob/dev/src/RotationInputPluginEuler.ts)
- * control from [0b5vr's](https://0b5vr.com)
- * [tweakpane-plugin-rotation](https://github.com/0b5vr/tweakpane-plugin-rotation).
+ * control from [0b5vr](https://0b5vr.com)'s [tweakpane-plugin-rotation](https://github.com/0b5vr/tweakpane-plugin-rotation).
  *
  * _Svelte Tweakpane UI_ extends the original API to support tuple values in addition to object values.
  * (Useful when working with frameworks like [three.js](https://threejs.org) /
@@ -230,11 +229,13 @@ export type RotationEulerSlots = typeof __propDef.slots;
  * A utility function `Utils.eulerToCssTransform()` is also provided to easily convert a quaternion
  * value object or tuple into a CSS transform string.
  *
- * See also <RotationQuaternion> if you're feeling gimbal locked.
+ * See also `<RotationQuaternion>` if you're feeling gimbal locked.
  *
  * Usage outside of a `<Pane>` component will implicitly wrap the profiler in `<Pane
  * position="inline">`.
  *
+ * Note that _Svelte Tweakpane UI_ embeds a functionally identical [fork](https://github.com/kitschpatrol/tweakpane-plugin-rotation) of the plugin with build optimizations.
+ *
  * @emits {RotationEulerChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example

package/dist/control/RotationQuaternion.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>
-	import * as pluginModule from '@0b5vr/tweakpane-plugin-rotation';
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-rotation';
 	import ClsPad from '../internal/ClsPad.svelte';
 	import GenericInputFolding from '../internal/GenericInputFolding.svelte';
 	import { BROWSER } from 'esm-env';

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

@@ -14,7 +14,7 @@ export type RotationQuaternionValue = Simplify<
 	RotationQuaternionValueObject | RotationQuaternionValueTuple
 >;
 export type RotationQuaternionChangeEvent = ValueChangeEvent<RotationQuaternionValue>;
-import type { RotationInputPluginQuaternionParams as RotationQuaternionOptionsInternal } from '@0b5vr/tweakpane-plugin-rotation/dist/types/RotationInputPluginQuaternionParams';
+import type { RotationInputPluginQuaternionParams as RotationQuaternionOptionsInternal } from '@kitschpatrol/tweakpane-plugin-rotation/dist/types/RotationInputPluginQuaternionParams';
 declare const __propDef: {
 	props: {
 		/**
@@ -218,8 +218,7 @@ export type RotationQuaternionSlots = typeof __propDef.slots;
 /**
  * Integrates the [quaternion
  * rotation](https://github.com/0b5vr/tweakpane-plugin-rotation/blob/dev/src/RotationInputPluginQuaternion.ts)
- * control from [0b5vr's](https://0b5vr.com)
- * [tweakpane-plugin-rotation](https://github.com/0b5vr/tweakpane-plugin-rotation).
+ * control from [0b5vr](https://0b5vr.com)'s [tweakpane-plugin-rotation](https://github.com/0b5vr/tweakpane-plugin-rotation).
  *
  * _Svelte Tweakpane UI_ extends the original API to support tuple values in addition to object values.
  * (Useful when working with frameworks like [three.js](https://threejs.org) /
@@ -228,11 +227,13 @@ export type RotationQuaternionSlots = typeof __propDef.slots;
  * A utility function `Utils.quaternionToCssTransform()` is also provided to easily convert a euler
  * rotation value object or tuple into a CSS transform string.
  *
- * See also <RotationEuler> if you're not into the whole `w` thing.
+ * See also `<RotationEuler>` if you're not into the whole `w` thing.
  *
  * Usage outside of a `<Pane>` component will implicitly wrap the profiler in `<Pane
  * position="inline">`.
  *
+ * Note that _Svelte Tweakpane UI_ embeds a functionally identical [fork](https://github.com/kitschpatrol/tweakpane-plugin-rotation) of the plugin with build optimizations.
+ *
  * @emits {RotationQuaternionChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example

package/dist/control/Textarea.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>
-	import * as pluginModule from '@pangenerator/tweakpane-textarea-plugin';
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-textarea';
 	import GenericInput from '../internal/GenericInput.svelte';
 	import {} from '../utils.js';
 	import { BROWSER } from 'esm-env';

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from 'svelte';
 import type { ValueChangeEvent } from '../utils.js';
 export type TextareaChangeEvent = ValueChangeEvent<string>;
-import type { TextareaPluginInputParams } from '@pangenerator/tweakpane-textarea-plugin/dist/types/plugin.js';
+import type { TextareaPluginInputParams } from '@kitschpatrol/tweakpane-plugin-textarea/dist/types/plugin.js';
 import { type GenericInputRef } from '../internal/GenericInput.svelte';
 declare const __propDef: {
 	props: {
@@ -139,6 +139,8 @@ export type TextareaSlots = typeof __propDef.slots;
  * Usage outside of a `<Pane>` component will implicitly wrap the text area in
  * `<Pane position="inline">`.
  *
+ * Note that _Svelte Tweakpane UI_ embeds a functionally identical [fork](https://github.com/kitschpatrol/tweakpane-plugin-textarea) of the plugin with build optimizations. The fork also changes the package name from `@pangenerator/tweakpane-textarea-plugin` to `@kitschpatrol/tweakpane-plugin-textarea` for consistency with other plugins.
+ *
  * @emits {TextareaChangeEvent} change - When `value` changes. (This event is
  * provided for advanced use cases. Prefer binding to `value`.)
  *

package/dist/control/Wheel.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>
-	import * as pluginModule from '@tweakpane/plugin-camerakit';
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-camerakit';
 	import GenericSlider from '../internal/GenericSlider.svelte';
 	export let value;
 	export let amount = void 0;

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

@@ -168,6 +168,8 @@ export type WheelSlots = typeof __propDef.slots;
  *
  * Usage outside of a `<Pane>` component will implicitly wrap the wheel in `<Pane position="inline">`.
  *
+ * Note that _Svelte Tweakpane UI_ embeds a functionally identical [fork](https://github.com/kitschpatrol/tweakpane-plugin-camerakit) of the plugin with build optimizations. The fork also changes the package name from `@tweakpane/plugin-camerakit` to `@kitschpatrol/tweakpane-plugin-camerakit` for consistency with other plugins.
+ *
  * @emits {WheelChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example

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

@@ -31,7 +31,10 @@ declare const __propDef: {
 		 * set with `setGlobalDefaultTheme()`.
 		 * */ theme?: Theme | undefined;
 	};
-	events: {
+	/**
+	 * Prevent interactivity and gray out the control.
+	 * @default `false`
+	 * */ events: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {

package/dist/internal/InternalPaneDraggable.svelte

@@ -12,6 +12,9 @@
 	import { persisted } from 'svelte-local-storage-store';
 	const titlebarWindowShadeSingleClick = true;
 	const titlebarWindowShadeDoubleClick = false;
+	const pointerCancelOnWindowBlur = true;
+	const dragMovementDistanceThreshold = 3;
+	let initialDragEvent;
 	export let storePositionLocally = true;
 	export let localStoreId = localStoreDefaultId;
 	export let tpPane = void 0;
@@ -109,27 +112,33 @@
 			if (width !== void 0 && event.target === widthHandleElement) {
 				width = width < maxAvailablePanelWidth ? maxAvailablePanelWidth : minWidth;
 			} else if (
-				// If (moveDistance < 3 && userExpandable)
+				// Consider pointer movement threshold check...
+				// e.g. if (moveDistance < dragMovementDistanceThreshold && userExpandable)...
 				titlebarWindowShadeDoubleClick &&
-				event.target === dragBarElement && //
+				event.target === dragBarElement &&
 				tpPane
 			) {
 				tpPane.expanded = !tpPane.expanded;
 			}
 		}
 	};
-	const downListener = (event) => {
+	const dragStartListener = (event) => {
 		if (x !== void 0 && y !== void 0 && event.button === 0 && event.target instanceof HTMLElement) {
 			moveDistance = 0;
+			initialDragEvent = event;
+			removeDragStartListeners();
+			addDragMoveAndEndListeners();
+			if (event.target === dragBarElement) {
+				dragBarElement.style.cursor = 'grabbing';
+			}
+			containerElement.style.transition = 'width 0s ease';
 			event.target.setPointerCapture(event.pointerId);
-			event.target.addEventListener('pointermove', moveListener);
-			event.target.addEventListener('pointerup', upListener);
 			startWidth = width ?? 0;
 			startOffsetX = x - event.pageX;
 			startOffsetY = y - event.pageY;
 		}
 	};
-	const moveListener = (event) => {
+	const dragMoveListener = (event) => {
 		if (
 			event.target instanceof HTMLElement &&
 			width !== void 0 &&
@@ -150,22 +159,72 @@
 			}
 		}
 	};
-	const upListener = (event) => {
+	const blurListener = () => {
+		if (pointerCancelOnWindowBlur && initialDragEvent?.target instanceof HTMLElement) {
+			const { target } = initialDragEvent;
+			const bounds = target.getBoundingClientRect();
+			const pointerCancelEvent = new PointerEvent('pointercancel', {
+				bubbles: true,
+				clientX: bounds.left + bounds.width / 2,
+				clientY: bounds.top + bounds.height / 2,
+				composed: true,
+				pointerId: initialDragEvent.pointerId,
+				pointerType: initialDragEvent.pointerType
+			});
+			target.dispatchEvent(pointerCancelEvent);
+		}
+	};
+	const dragEndListener = (event) => {
 		event.stopImmediatePropagation();
 		if (event.target instanceof HTMLElement) {
-			event.target.releasePointerCapture(event.pointerId);
-			event.target.removeEventListener('pointermove', moveListener);
-			event.target.removeEventListener('pointerup', upListener);
+			if (event.target.hasPointerCapture(event.pointerId)) {
+				event.target.releasePointerCapture(event.pointerId);
+			}
+			if (event.target === dragBarElement) {
+				dragBarElement.style.removeProperty('cursor');
+			}
+			containerElement.style.removeProperty('transition');
 			if (
+				event.type === 'pointerup' &&
 				titlebarWindowShadeSingleClick &&
 				event.target === dragBarElement &&
-				moveDistance < 3 &&
+				moveDistance < dragMovementDistanceThreshold &&
 				userExpandable &&
 				tpPane
-			)
+			) {
 				tpPane.expanded = !tpPane.expanded;
+			}
+			initialDragEvent = void 0;
+			removeDragMoveAndEndListeners();
+			addDragStartListeners();
 		}
 	};
+	const addDragStartListeners = () => {
+		dragBarElement.addEventListener('pointerdown', dragStartListener);
+		widthHandleElement?.addEventListener('pointerdown', dragStartListener);
+	};
+	const removeDragStartListeners = () => {
+		dragBarElement.removeEventListener('pointerdown', dragStartListener);
+		widthHandleElement?.removeEventListener('pointerdown', dragStartListener);
+	};
+	const addDragMoveAndEndListeners = () => {
+		window.addEventListener('blur', blurListener);
+		dragBarElement.addEventListener('pointermove', dragMoveListener);
+		dragBarElement.addEventListener('pointerup', dragEndListener);
+		dragBarElement.addEventListener('pointercancel', dragEndListener);
+		widthHandleElement?.addEventListener('pointermove', dragMoveListener);
+		widthHandleElement?.addEventListener('pointerup', dragEndListener);
+		widthHandleElement?.addEventListener('pointercancel', dragEndListener);
+	};
+	const removeDragMoveAndEndListeners = () => {
+		window.removeEventListener('blur', blurListener);
+		dragBarElement.removeEventListener('pointermove', dragMoveListener);
+		dragBarElement.removeEventListener('pointerup', dragEndListener);
+		dragBarElement.removeEventListener('pointercancel', dragEndListener);
+		widthHandleElement?.removeEventListener('pointermove', dragMoveListener);
+		widthHandleElement?.removeEventListener('pointerup', dragEndListener);
+		widthHandleElement?.removeEventListener('pointercancel', dragEndListener);
+	};
 	const touchScrollBlocker = (event) => {
 		event.preventDefault();
 	};
@@ -182,35 +241,24 @@
 			dragBarElement = dragBarElementCheck;
 			dragBarElement.addEventListener('click', clickBlocker);
 			dragBarElement.addEventListener('dblclick', doubleClickListener);
-			dragBarElement.addEventListener('pointerdown', downListener);
 			widthHandleElement = dragBarElement.parentElement?.appendChild(document.createElement('div'));
 			if (widthHandleElement) {
 				widthHandleElement.className = 'tp-custom-width-handle';
 				widthHandleElement.textContent = '\u2194';
 				widthHandleElement.addEventListener('click', clickBlocker);
 				widthHandleElement.addEventListener('dblclick', doubleClickListener);
-				widthHandleElement.addEventListener('pointerdown', downListener);
 			}
+			addDragStartListeners();
 		}
 	});
 	onDestroy(() => {
-		if (dragBarElement) {
-			dragBarElement.removeEventListener('click', clickBlocker);
-			dragBarElement.removeEventListener('dblclick', doubleClickListener);
-			dragBarElement.removeEventListener('pointerdown', downListener);
-			dragBarElement.removeEventListener('pointermove', moveListener);
-			dragBarElement.removeEventListener('pointerup', upListener);
-		}
-		if (widthHandleElement) {
-			widthHandleElement.removeEventListener('click', clickBlocker);
-			widthHandleElement.removeEventListener('dblclick', doubleClickListener);
-			widthHandleElement.removeEventListener('pointerdown', downListener);
-			widthHandleElement.removeEventListener('pointermove', moveListener);
-			widthHandleElement.removeEventListener('pointerup', upListener);
-		}
-		if (containerElement) {
-			containerElement.removeEventListener('touchmove', touchScrollBlocker);
-		}
+		removeDragStartListeners();
+		removeDragMoveAndEndListeners();
+		dragBarElement.removeEventListener('click', clickBlocker);
+		dragBarElement.removeEventListener('dblclick', doubleClickListener);
+		widthHandleElement?.removeEventListener('click', clickBlocker);
+		widthHandleElement?.removeEventListener('dblclick', doubleClickListener);
+		containerElement?.removeEventListener('touchmove', touchScrollBlocker);
 		if (localStoreId !== void 0) {
 			localStoreIds.splice(localStoreIds.indexOf(localStoreId), 1);
 		}
@@ -321,13 +369,6 @@
 		transition: width 0.2s ease;
 	}
 
-	div.draggable-container:active {
-		/* prevent animation during direct manipulation */
-		transition: width 0s ease;
-		/* alternate less specific approach */
-		/* transition: none; */
-	}
-
 	/* stylelint-disable-next-line selector-class-pattern */
 	div.draggable-container :global(div.tp-rotv_t) {
 		cursor: grab;
@@ -355,10 +396,6 @@
 		white-space: nowrap;
 	}
 
-	div.draggable-container :global(div.tp-rotv_t:active) {
-		cursor: grabbing;
-	}
-
 	div.draggable-container :global(div.tp-rotv_m) {
 		right: unset;
 		left: 0;

package/dist/monitor/FpsGraph.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>
-	import * as pluginModule from '@tweakpane/plugin-essentials';
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-essentials';
 	import Blade from '../core/Blade.svelte';
 	import ClsPad from '../internal/ClsPad.svelte';
 	import { fillWith } from '../utils';

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from 'svelte';
 export type FpsGraphChangeEvent = CustomEvent<number>;
-import type { FpsGraphBladeApi as FpsGraphRef } from '@tweakpane/plugin-essentials';
-import type { FpsGraphBladeParams as FpsGraphOptions } from '@tweakpane/plugin-essentials/dist/types/fps-graph/plugin.js';
+import type { FpsGraphBladeApi as FpsGraphRef } from '@kitschpatrol/tweakpane-plugin-essentials';
+import type { FpsGraphBladeParams as FpsGraphOptions } from '@kitschpatrol/tweakpane-plugin-essentials/dist/types/fps-graph/plugin.js';
 declare const __propDef: {
 	props: {
 		/**
@@ -145,6 +145,8 @@ export type FpsGraphSlots = typeof __propDef.slots;
  * Usage outside of a `<Pane>` component will implicitly wrap the FPS graph in `<Pane
  * position="inline">`.
  *
+ * Note that _Svelte Tweakpane UI_ embeds a functionally identical [fork](https://github.com/kitschpatrol/tweakpane-plugin-essentials) of the plugin with build optimizations. The fork also changes the package name from `@tweakpane/plugin-essentials` to `@kitschpatrol/tweakpane-plugin-essentials` for consistency with other plugins.
+ *
  * @emits {number} change - When the FPS value changes.
  *
  * @example