svelte-tweakpane-ui 1.0.0 → 1.0.1

package/README.md

@@ -1,13 +1,20 @@
 # svelte-tweakpane-ui
 
+[![NPM Package](https://img.shields.io/npm/v/svelte-tweakpane-ui.svg)](https://npmjs.com/package/svelte-tweakpane-ui)
+[![Documentation](https://img.shields.io/badge/-documentation-ffdd00?logo=readthedocs&logoColor=222222)](https://kitschpatrol.com/svelte-tweakpane-ui)
+
 ## 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 [Svelte](https://svelte.dev) components.
+🎛️ **_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.
 
-The library makes it easy to quickly and declaratively add knobs and dials to your projects using components that feel like they belong in the DOM. It also augments Tweakpane with a few [extra features](https://kitschpatrol.com/svelte-tweakpane-ui/docs/features) for your convenience and enjoyment.
+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.
 
 [The components](https://kitschpatrol.com/svelte-tweakpane-ui/docs#components) should be useful for integrating controls and value monitoring in parametrically driven artworks or simulations.
 
+## Demo
+
+![Svelte Tweakpane UI quick demo](./docs/public/quick-demo.gif)
+
 ## Documentation
 
 **_Please see the documentation site for much more information:_**  
@@ -28,7 +35,7 @@ npm install svelte-tweakpane-ui
   import { Button } from 'svelte-tweakpane-ui';
 </script>
 
-<Button on:click={() => alert('Hi from STUI')} />
+<Button on:click={() => alert('🎛️')} />
 ```
 
 ---

package/dist/control/ButtonGrid.svelte

@@ -33,11 +33,11 @@
 		view: 'buttongrid'
 	};
 	$: gridBlade &&
-		gridBlade.on('click', (ev) => {
+		gridBlade.on('click', (event) => {
 			dispatch('click', {
-				cell: { x: ev.index[0], y: ev.index[1] },
-				index: ev.index[1] * gridDimensions.columns + ev.index[0],
-				label: ev.cell.title
+				cell: { x: event.index[0], y: event.index[1] },
+				index: event.index[1] * gridDimensions.columns + event.index[0],
+				label: event.cell.title
 			});
 		});
 </script>

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

@@ -128,7 +128,9 @@ export type ButtonGridSlots = typeof __propDef.slots;
  * } from 'svelte-tweakpane-ui';
  *
  * const keyboard = [
- *   ...Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i)),
+ *   ...Array.from({ length: 26 }, (_, index) =>
+ *     String.fromCodePoint(65 + index)
+ *   ),
  *   ',',
  *   '.',
  *   '!',
@@ -137,11 +139,11 @@ export type ButtonGridSlots = typeof __propDef.slots;
  *
  * let textBuffer = '';
  *
- * function handleClick(e: ButtonGridClickEvent) {
+ * function handleClick(event: ButtonGridClickEvent) {
  *   textBuffer =
- *     e.detail.label === '⌫'
+ *     event.detail.label === '⌫'
  *       ? textBuffer.slice(0, -1)
- *       : textBuffer + e.detail.label;
+ *       : textBuffer + event.detail.label;
  * }
  * </script>
  *

package/dist/control/CubicBezier.svelte

@@ -14,31 +14,23 @@
 	let cubicBezierBlade;
 	const buttonClass = 'tp-cbzv_b';
 	function getValue() {
-		if (Array.isArray(value)) {
-			return value;
-		} else {
-			return [value.x1, value.y1, value.x2, value.y2];
-		}
+		return Array.isArray(value) ? value : [value.x1, value.y1, value.x2, value.y2];
 	}
 	function setValue() {
-		if (Array.isArray(value)) {
-			cubicBezierBlade.value = new CubicBezier(value[0], value[1], value[2], value[3]);
-		} else {
-			cubicBezierBlade.value = new CubicBezier(value.x1, value.y1, value.x2, value.y2);
-		}
+		cubicBezierBlade.value = Array.isArray(value)
+			? new CubicBezier(value[0], value[1], value[2], value[3])
+			: new CubicBezier(value.x1, value.y1, value.x2, value.y2);
 	}
 	function addEvent() {
-		cubicBezierBlade.on('change', (ev) => {
-			if (Array.isArray(value)) {
-				value = [ev.value.x1, ev.value.y1, ev.value.x2, ev.value.y2];
-			} else {
-				value = {
-					x1: ev.value.x1,
-					y1: ev.value.y1,
-					x2: ev.value.x2,
-					y2: ev.value.y2
-				};
-			}
+		cubicBezierBlade.on('change', (event) => {
+			value = Array.isArray(value)
+				? [event.value.x1, event.value.y1, event.value.x2, event.value.y2]
+				: {
+						x1: event.value.x1,
+						y1: event.value.y1,
+						x2: event.value.x2,
+						y2: event.value.y2
+				  };
 		});
 	}
 	$: options = {

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

@@ -136,7 +136,7 @@ export type CubicBezierSlots = typeof __propDef.slots;
  * import { tweened } from 'svelte/motion';
  *
  * // could also be a tuple
- * let value: CubicBezierValue = { x1: 0.25, y1: 0.1, x2: 0.25, y2: 1.0 };
+ * let value: CubicBezierValue = { x1: 0.25, y1: 0.1, x2: 0.25, y2: 1 };
  * let duration = 1000;
  * let moods = ['Set', 'Rise'];
  * let mood: string = moods[0];
@@ -160,7 +160,7 @@ export type CubicBezierSlots = typeof __propDef.slots;
  * <Slider
  * bind:value={duration}
  * min={0}
- * max={10000}
+ * max={10_000}
  * format={(v) => `${(v / 1000).toFixed(1)}`}
  * label="Duration (Seconds)"
  * />

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

@@ -125,14 +125,14 @@ export type ImageSlots = typeof __propDef.slots;
  * <script lang="ts">
  * import { Button, Image } from 'svelte-tweakpane-ui';
  *
- * let src = 'placeholder';
+ * let source = 'placeholder';
  * let kittenIndex = 1;
  * </script>
  *
- * <Image bind:value={src} fit="contain" label="Image" />
+ * <Image bind:value={source} fit="contain" label="Image" />
  * <Button
  * on:click={() => {
- *   src = `https://placekitten.com/1024/1024?image=${kittenIndex}`;
+ *   source = `https://placekitten.com/1024/1024?image=${kittenIndex}`;
  *   kittenIndex = (kittenIndex % 16) + 1;
  * }}
  * label="Random Placeholder"
@@ -140,10 +140,10 @@ export type ImageSlots = typeof __propDef.slots;
  * />
  *
  * <div class="demo">
- * {#if src === 'placeholder'}
+ * {#if source === 'placeholder'}
  *   <p>Tap “No Image” above to load an image from disk.</p>
  * {:else}
- *   <img alt="" {src} />
+ *   <img alt="" src={source} />
  * {/if}
  * </div>
  *

package/dist/control/List.svelte

@@ -10,8 +10,8 @@
 	let listBlade;
 	let bladeOptions;
 	function addEvent() {
-		listBlade.on('change', (ev) => {
-			value = ev.value;
+		listBlade.on('change', (event) => {
+			value = event.value;
 		});
 	}
 	function getInitialValue() {
@@ -28,16 +28,16 @@
 			return value;
 		}
 	}
-	function isArrayStyleListOptions(obj) {
+	function isArrayStyleListOptions(object) {
 		return (
-			Array.isArray(obj) &&
-			obj.every(
+			Array.isArray(object) &&
+			object.every(
 				(item) => typeof item === 'object' && item !== null && 'text' in item && 'value' in item
 			)
 		);
 	}
-	function isObjectStyleListOptions(obj) {
-		return typeof obj === 'object' && obj !== null && !Array.isArray(obj);
+	function isObjectStyleListOptions(object) {
+		return typeof object === 'object' && object !== null && !Array.isArray(object);
 	}
 	function getInternalOptions(options2) {
 		if (isArrayStyleListOptions(options2)) {

package/dist/control/Text.svelte

@@ -13,7 +13,7 @@
 		}
 	}
 	function updateListeners(live2, destroy = false) {
-		let input = ref?.controller.valueController.view.element.getElementsByTagName('input')[0];
+		let input = ref?.controller.valueController.view.element.querySelector('input');
 		if (input) {
 			input.removeEventListener('input', onInput);
 			!destroy && live2 && input.addEventListener('input', onInput);

package/dist/control/Textarea.svelte

@@ -22,7 +22,7 @@
 		value = event.target.value;
 	}
 	function updateListeners(live2, destroy = false) {
-		var input = ref?.controller.valueController.view.element.getElementsByTagName('textarea')[0];
+		var input = ref?.controller.valueController.view.element.querySelector('textarea');
 		if (input) {
 			input.removeEventListener('blur', onBlur);
 			input.removeEventListener('input', onInput);

package/dist/core/TabGroup.svelte

@@ -22,15 +22,13 @@
 		$tabGroupStore?.dispose();
 	});
 	function setUpListeners(t) {
-		t?.on('select', (e) => {
-			selectedIndex = e.index;
+		t?.on('select', (event) => {
+			selectedIndex = event.index;
 		});
 	}
 	function setSelectedIndex(index) {
 		const tabPageApi = $tabGroupStore?.pages.at(index);
-		if (tabPageApi) {
-			if (!tabPageApi.selected) tabPageApi.selected = true;
-		}
+		if (tabPageApi && !tabPageApi.selected) tabPageApi.selected = true;
 	}
 	$: BROWSER && setUpListeners($tabGroupStore);
 	$: BROWSER && setSelectedIndex(selectedIndex);

package/dist/extra/AutoObject.svelte

@@ -12,13 +12,15 @@
 	export let prettyLabels = true;
 	export let object;
 	const parentStore = getContext('parentStore');
-	function isPointObject(obj) {
-		return Point2d.isObject(obj) || Point3d.isObject(obj) || Point4d.isObject(obj);
+	function isPointObject(testObject) {
+		return (
+			Point2d.isObject(testObject) || Point3d.isObject(testObject) || Point4d.isObject(testObject)
+		);
 	}
 	function prettify(value, active = true) {
 		if (!active) return value;
 		return value
-			.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+			.replace(/([\da-z])([A-Z])/g, '$1 $2')
 			.replace(/[_-]+/g, ' ')
 			.toLowerCase()
 			.replace(/\b[a-z]/g, (letter) => {

package/dist/extra/Element.svelte

@@ -27,7 +27,7 @@
 	<div
 		class="element-container"
 		style:height={BROWSER ? null : `${maxHeight}px`}
-		style:max-height={maxHeight !== undefined ? `${maxHeight}px` : null}
+		style:max-height={maxHeight === undefined ? null : `${maxHeight}px`}
 		style:overflow={BROWSER ? null : 'hidden'}
 	>
 		<div class:reset={resetStyle}>

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

@@ -44,20 +44,22 @@ declare const __propDef: {
 		'options' | 'disabled' | 'ref' | 'plugin'
 	> & {
 		/**
-		 * Maximum height of the element block, in pixels. By default, the element block will expand
-		 * vertically to fit its contents, but clip any horizontal excess.
+		 * Maximum height of the element block, in pixels. By default, the element
+		 * block will expand vertically to fit its contents, but clip any horizontal
+		 * excess.
 		 *
-		 * If a max height is set, it is used as the component height during SSR. If the actual
-		 * element content is less than the max, you will see CLS. If it is not set, the contents
-		 * are rendered... but keep in mind that style and other contextual changes during the
-		 * client render could result in CLS.
+		 * If a max height is set, it is used as the component height during SSR. If
+		 * the actual element content is less than the max, you will see CLS. If it
+		 * is not set, the contents are rendered... but keep in mind that style and
+		 * other contextual changes during the client render could result in CLS.
 		 * @default `undefined`  \
 		 * No max height.
 		 */
 		maxHeight?: number | undefined;
 		/**
-		 * Whether to reset the CSS of the element block to its default values. Avoids inheritance
-		 * of Tweakpane's CSS styles. Note that this uses a simple `all: initial;` rule.
+		 * Whether to reset the CSS of the element block to its default values.
+		 * Avoids inheritance of Tweakpane's CSS styles. Note that this uses a
+		 * simple `all: initial;` rule.
 		 * @default `true`
 		 */
 		resetStyle?: boolean | undefined;
@@ -78,25 +80,30 @@ export type ElementSlots = typeof __propDef.slots;
 /**
  * A component for embedding arbitrary HTML elements into a pane.
  *
- * Any children wrapped in this component will be rendered into the pane. Any content larger than the
- * pane in the horizontal axis will be clipped.
+ * Any children wrapped in this component will be rendered into the pane. Any
+ * content larger than the pane in the horizontal axis will be clipped.
  *
- * Useful for quickly prototyping UIs, or adding content to a pane that's not easily represented by the
- * built-in components.
+ * Useful for quickly prototyping UIs, or adding content to a pane that's not
+ * easily represented by the built-in components.
  *
- * Think of this component as an escape hatch for getting something into the pane that you couldn't
- * otherwise, but it's recommended to abstract new functionality for reuse by extending one of the
- * internal component types in 'svelte-tweakpane-ui', or better yet by creating a new [Tweakpane
- * Plugin](https://github.com/tweakpane/plugin-template).
+ * This component does not have a direct analog in the vanilla Tweakpane universe.
  *
- * In many cases, this component should not be necessary because _Svelte Tweakpane UI_ already makes it
- * easy to combine tweakpane components with other inline elements simply by not using a wrapping
- * `<Pane>` component. It should generally be the most useful when you're using `<Pane
- * position='draggable'>`   or `<Pane position='fixed'>` and you want a custom element embedded in the
- * pane.
+ * Think of `<Element>` as an escape hatch for getting something into the pane that
+ * you couldn't otherwise. Generally, it's recommended to abstract new
+ * functionality for reuse by extending one of the internal component types in
+ * 'svelte-tweakpane-ui', or better yet by creating a new [Tweakpane
+ * Plugin](https://github.com/tweakpane/plugin-template) — but sometimes you just
+ * need to get something into the pane quickly.
  *
- * Usage outside of a `<Pane>` component doesn't make a ton of sense, but in such a case the
- * `<Element>` will be implicitly wrapped in `<Pane position='inline'>`.
+ * In many cases, this component should not be necessary because _Svelte Tweakpane
+ * UI_ already makes it easy to combine tweakpane components with other inline
+ * elements simply by using stand-alone components or a `<Pane position='inline'>`
+ * component. `<Element>` should generally be the most useful when you're using
+ * `<Pane position='draggable'>` or `<Pane position='fixed'>` and you want a custom
+ * element embedded in the pane.
+ *
+ * Usage outside of a `<Pane>` component doesn't make a ton of sense, but in such a
+ * case the `<Element>` will be implicitly wrapped in `<Pane position='inline'>`.
  *
  * @example
  * ```svelte

package/dist/internal/ClsPad.svelte

@@ -10,15 +10,15 @@
 		return '#' + Math.floor(Math.random() * 16777215).toString(16);
 	}
 	function getPixelValue(s) {
-		return parseFloat(s.replace('px', ''));
+		return Number.parseFloat(s.replace('px', ''));
 	}
 	function getTotal(add, sub, extra2 = 0) {
 		return (
-			add.reduce((acc, key) => {
-				return (acc += getPixelValue(getValueOrFallback(theme, key)));
+			add.reduce((accumulator, key) => {
+				return (accumulator += getPixelValue(getValueOrFallback(theme, key)));
 			}, 0) -
-			sub.reduce((acc, key) => {
-				return (acc += getPixelValue(getValueOrFallback(theme, key)));
+			sub.reduce((accumulator, key) => {
+				return (accumulator += getPixelValue(getValueOrFallback(theme, key)));
 			}, 0) +
 			extra2
 		);

package/dist/internal/GenericBladeFolding.svelte

@@ -14,8 +14,8 @@
 	let internalExpanded = initialExpanded;
 	$: if (!gotBlade && ref) {
 		gotBlade = true;
-		ref.controller?.valueController?.foldable_?.value('expanded').emitter.on('change', (e) => {
-			internalExpanded = e.rawValue;
+		ref.controller?.valueController?.foldable_?.value('expanded').emitter.on('change', (event) => {
+			internalExpanded = event.rawValue;
 			expanded = internalExpanded;
 		});
 	}
@@ -31,8 +31,8 @@
 	$: ref &&
 		buttonClass !== void 0 &&
 		expanded !== internalExpanded &&
-		ref.element.getElementsByClassName(buttonClass).length > 0 &&
-		ref.element.getElementsByClassName(buttonClass)[0].click();
+		ref.element.querySelectorAll(`.${buttonClass}`).length > 0 &&
+		ref.element.querySelector(`.${buttonClass}`).click();
 </script>
 
 <Blade bind:ref {options} {...$$restProps} />

package/dist/internal/GenericInputFolding.svelte

@@ -18,8 +18,8 @@
 	let internalExpanded = initialExpanded;
 	$: if (!gotBinding && ref) {
 		gotBinding = true;
-		ref.controller?.valueController?.foldable_?.value('expanded').emitter.on('change', (e) => {
-			internalExpanded = e.rawValue;
+		ref.controller?.valueController?.foldable_?.value('expanded').emitter.on('change', (event) => {
+			internalExpanded = event.rawValue;
 			expanded = internalExpanded;
 		});
 	}
@@ -33,8 +33,8 @@
 	$: ref &&
 		buttonClass &&
 		expanded !== internalExpanded &&
-		ref.element.getElementsByClassName(buttonClass).length > 0 &&
-		ref.element.getElementsByClassName(buttonClass)[0].click();
+		ref.element.querySelectorAll(`.${buttonClass}`).length > 0 &&
+		ref.element.querySelector(`.${buttonClass}`).click();
 </script>
 
 <GenericInput bind:value bind:ref options={optionsInternal} {...$$restProps} />

package/dist/internal/InternalPaneDraggable.svelte

@@ -88,93 +88,97 @@
 			const dy = documentHeight - documentHeightPrevious;
 			const centerPercentX = (x + width / 2) / documentWidth;
 			const centerPercentY = (y + containerHeightScaled / 2) / documentHeight;
-			if (!isNaN(dx) && centerPercentX >= 0.5) {
+			if (!Number.isNaN(dx) && centerPercentX >= 0.5) {
 				x += dx;
 			}
-			if (!isNaN(dy) && centerPercentY >= 0.5) {
+			if (!Number.isNaN(dy) && centerPercentY >= 0.5) {
 				y += dy;
 			}
 		}
 	}
-	const clickBlocker = (e) => {
-		e.stopPropagation();
+	const clickBlocker = (event) => {
+		event.stopPropagation();
 	};
 	let startWidth = 0;
 	let startOffsetX = 0;
 	let startOffsetY = 0;
 	let moveDistance = 0;
-	const doubleClickListener = (e) => {
-		e.stopPropagation();
-		if (e.target) {
-			if (width !== void 0 && e.target === widthHandleElement) {
-				if (width < maxAvailablePanelWidth) {
-					width = maxAvailablePanelWidth;
-				} else {
-					width = minWidth;
-				}
-			} else if (TITLEBAR_WINDOW_SHADE_DOUBLE_CLICK && e.target === dragBarElement) {
+	const doubleClickListener = (event) => {
+		event.stopPropagation();
+		if (event.target) {
+			if (width !== void 0 && event.target === widthHandleElement) {
+				width = width < maxAvailablePanelWidth ? maxAvailablePanelWidth : minWidth;
+			} else if (TITLEBAR_WINDOW_SHADE_DOUBLE_CLICK && event.target === dragBarElement) {
 				paneRef.expanded = !paneRef.expanded;
 			}
 		}
 	};
-	const downListener = (e) => {
-		if (x !== void 0 && y !== void 0 && e.button === 0 && e.target instanceof HTMLElement) {
+	const downListener = (event) => {
+		if (x !== void 0 && y !== void 0 && event.button === 0 && event.target instanceof HTMLElement) {
 			moveDistance = 0;
-			e.target.setPointerCapture(e.pointerId);
-			e.target.addEventListener('pointermove', moveListener);
-			e.target.addEventListener('pointerup', upListener);
+			event.target.setPointerCapture(event.pointerId);
+			event.target.addEventListener('pointermove', moveListener);
+			event.target.addEventListener('pointerup', upListener);
 			startWidth = width ?? 0;
-			startOffsetX = x - e.pageX;
-			startOffsetY = y - e.pageY;
+			startOffsetX = x - event.pageX;
+			startOffsetY = y - event.pageY;
 		}
 	};
-	const moveListener = (e) => {
+	const moveListener = (event) => {
 		if (
-			e.target instanceof HTMLElement &&
+			event.target instanceof HTMLElement &&
 			width !== void 0 &&
 			minWidth !== void 0 &&
 			x !== void 0 &&
 			y !== void 0
 		) {
-			if (e.target === dragBarElement) {
-				moveDistance += Math.sqrt(e.movementX * e.movementX + e.movementY * e.movementY);
-				x = e.pageX + startOffsetX;
-				y = e.pageY + startOffsetY;
-			} else if (e.target === widthHandleElement) {
-				width = clamp(e.pageX + startOffsetX + startWidth - x, minWidth, maxAvailablePanelWidth);
+			if (event.target === dragBarElement) {
+				moveDistance += Math.hypot(event.movementX, event.movementY);
+				x = event.pageX + startOffsetX;
+				y = event.pageY + startOffsetY;
+			} else if (event.target === widthHandleElement) {
+				width = clamp(
+					event.pageX + startOffsetX + startWidth - x,
+					minWidth,
+					maxAvailablePanelWidth
+				);
 			}
 		}
 	};
-	const upListener = (e) => {
-		e.stopImmediatePropagation();
-		if (e.target instanceof HTMLElement) {
-			e.target.releasePointerCapture(e.pointerId);
-			e.target.removeEventListener('pointermove', moveListener);
-			e.target.removeEventListener('pointerup', upListener);
-			if (TITLEBAR_WINDOW_SHADE_SINGLE_CLICK && e.target === dragBarElement) {
-				if (moveDistance < 3 && userExpandable) paneRef.expanded = !paneRef.expanded;
-			}
+	const upListener = (event) => {
+		event.stopImmediatePropagation();
+		if (event.target instanceof HTMLElement) {
+			event.target.releasePointerCapture(event.pointerId);
+			event.target.removeEventListener('pointermove', moveListener);
+			event.target.removeEventListener('pointerup', upListener);
+			if (
+				TITLEBAR_WINDOW_SHADE_SINGLE_CLICK &&
+				event.target === dragBarElement &&
+				moveDistance < 3 &&
+				userExpandable
+			)
+				paneRef.expanded = !paneRef.expanded;
 		}
 	};
-	const touchScrollBlocker = (e) => {
-		e.preventDefault();
+	const touchScrollBlocker = (event) => {
+		event.preventDefault();
 	};
 	onMount(() => {
 		setDocumentSize();
 		if (paneRef) {
-			containerElement.appendChild(paneRef.element);
+			containerElement.append(paneRef.element);
 		} else {
 			console.warn('no pane ref in draggable');
 		}
 		containerElement.addEventListener('touchmove', touchScrollBlocker, { passive: false });
-		dragBarElement = containerElement.getElementsByClassName('tp-rotv_t')[0];
+		dragBarElement = containerElement.querySelector('.tp-rotv_t');
 		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.innerText = '\u2194';
+			widthHandleElement.textContent = '\u2194';
 			widthHandleElement.addEventListener('click', clickBlocker);
 			widthHandleElement.addEventListener('dblclick', doubleClickListener);
 			widthHandleElement.addEventListener('pointerdown', downListener);
@@ -204,18 +208,13 @@
 	});
 	function updateResizability(isResizable) {
 		if (widthHandleElement) {
-			if (isResizable) {
-				widthHandleElement.style.display = 'block';
-			} else {
-				widthHandleElement.style.display = 'none';
-			}
+			widthHandleElement.style.display = isResizable ? 'block' : 'none';
 		}
 	}
 	$: paneRef && resizable && updateResizability(resizable);
 	function recursiveCollapse(children, maxToCollapse = Number.MAX_SAFE_INTEGER) {
-		console.log(maxToCollapse);
 		if (maxToCollapse > 0) {
-			children.forEach((child) => {
+			for (const child of children) {
 				if ('expanded' in child) {
 					if (child.expanded) {
 						maxToCollapse--;
@@ -231,7 +230,7 @@
 						swatchButton.click();
 					}
 				}
-			});
+			}
 		}
 	}
 	$: if (
@@ -270,7 +269,8 @@
 				containerHeightScaled = containerHeight;
 			} else {
 				const style = window.getComputedStyle(containerElement);
-				const vPadding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+				const vPadding =
+					Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
 				containerHeightScaled = (containerHeight - vPadding) * scale + vPadding;
 			}
 		}
@@ -323,6 +323,11 @@ draggable-container"
 	/* stylelint-disable-next-line selector-class-pattern */
 	div.draggable-container :global(div.tp-rotv_t) {
 		cursor: grab;
+		overflow: hidden;
+		/* Ensure draggable hit zone does not collapse if title is missing */
+		/* Fixes #1 */
+		height: 100%;
+		text-overflow: ellipsis;
 	}
 
 	div.draggable-container.not-collapsable :global(div.tp-rotv_t) {

package/dist/internal/InternalPaneInline.svelte

@@ -14,7 +14,7 @@
 	onMount(() => {
 		if (paneRef) {
 			const fixedContainer = paneRef.element.parentElement;
-			containerElement.appendChild(paneRef.element);
+			containerElement.append(paneRef.element);
 			fixedContainer?.remove();
 		} else {
 			console.warn('paneRef is undefined');
@@ -22,7 +22,7 @@
 	});
 </script>
 
-<div bind:this={containerElement} style:width={width !== undefined ? `${width}px` : null}>
+<div bind:this={containerElement} style:width={width === undefined ? null : `${width}px`}>
 	<GenericPane bind:expanded bind:paneRef {theme} {...removeKeys($$restProps, 'position')}>
 		<slot />
 	</GenericPane>

package/dist/monitor/FpsGraph.svelte

@@ -50,8 +50,11 @@
 		observer = new MutationObserver((mutations) => {
 			for (const mutation of mutations) {
 				if (mutation.type === 'characterData' || mutation.type === 'childList') {
-					const fps = parseInt(mutation.target.innerText);
-					!isNaN(fps) && dispatch('change', fps);
+					const fpsText = mutation.target.textContent;
+					if (fpsText !== null) {
+						const fps = Number.parseInt(fpsText);
+						!Number.isNaN(fps) && dispatch('change', fps);
+					}
 				}
 			}
 		});

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

@@ -181,8 +181,8 @@ export type FpsGraphSlots = typeof __propDef.slots;
  * <Slider bind:value={rotationSpeed} label="Rotation Speed" />
  *
  * <div class="demo">
- * {#each Array.from({ length: gridSize }, (_, i) => i) as x}
- *   {#each Array.from({ length: gridSize }, (_, i) => i) as y}
+ * {#each Array.from({ length: gridSize }, (_, index) => index) as x}
+ *   {#each Array.from({ length: gridSize }, (_, index) => index) as y}
  *     <div
  *       class="box"
  *       style:left="{(x / gridSize) * 100}%"

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

@@ -501,7 +501,7 @@ export type MonitorSlots<W extends number | string | boolean | unknown> = Return
  *
  * setInterval(() => {
  *   booleanToMonitor = !booleanToMonitor;
- *   stringToMonitor = stringToMonitor.split('').reverse().join('');
+ *   stringToMonitor = [...stringToMonitor].reverse().join('');
  * }, 1000);
  * </script>
  *

package/dist/monitor/Profiler.svelte

@@ -7,11 +7,11 @@
 	import { fillWith } from '../utils';
 	import { BROWSER } from 'esm-env';
 	import { createEventDispatcher, onDestroy } from 'svelte';
-	function _measure(name, fn) {
-		profilerBlade?.measure(name, fn);
+	function _measure(name, functionToMeasure) {
+		profilerBlade?.measure(name, functionToMeasure);
 	}
-	async function _measureAsync(name, fn) {
-		profilerBlade?.measureAsync(name, fn);
+	async function _measureAsync(name, functionToMeasure) {
+		profilerBlade?.measureAsync(name, functionToMeasure);
 	}
 	export let label = void 0;
 	export let bufferSize = void 0;
@@ -37,8 +37,11 @@
 		observer = new MutationObserver((mutations) => {
 			for (const mutation of mutations) {
 				if (mutation.type === 'characterData' || mutation.type === 'childList') {
-					const delta = parseFloat(mutation.target.innerText);
-					!isNaN(delta) && dispatch('change', delta);
+					const fpsText = mutation.target.textContent;
+					if (fpsText !== null) {
+						const delta = Number.parseFloat(fpsText);
+						!Number.isNaN(delta) && dispatch('change', delta);
+					}
 				}
 			}
 		});

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

@@ -3,8 +3,11 @@ import type { ProfilerBladeMeasureHandler } from '@0b5vr/tweakpane-plugin-profil
 import type { Simplify } from '../utils';
 export type ProfilerCalcMode = 'frame' | 'mean' | 'median';
 export type ProfilerChangeEvent = CustomEvent<number>;
-export type ProfilerMeasure = (name: string, fn: () => void) => void;
-export type ProfilerMeasureAsync = (name: string, fn: () => Promise<void>) => Promise<void>;
+export type ProfilerMeasure = (name: string, functionToMeasure: () => void) => void;
+export type ProfilerMeasureAsync = (
+	name: string,
+	functionToMeasure: () => Promise<void>
+) => Promise<void>;
 export type ProfilerMeasureHandler = Simplify<ProfilerBladeMeasureHandler>;
 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';
@@ -201,10 +204,10 @@ export type ProfilerSlots = typeof __propDef.slots;
  * let loopExponent = 1;
  *
  * // helper to test Math functions
- * function hardWork(fn: (n: number) => number, exponent: number): void {
- *   measure(fn.name, () => {
+ * function hardWork(function_: (n: number) => number, exponent: number): void {
+ *   measure(function_.name, () => {
  *     for (let sum = 0; sum < Number('1e' + exponent); sum++) {
- *       fn(sum);
+ *       function_(sum);
  *     }
  *   });
  * }

package/dist/theme.js

@@ -36,9 +36,9 @@ const standard = {
 	// pluginThumbnailListHeight: '400px', pluginThumbnailListThumbSize: '20px',
 	// pluginThumbnailListWidth: '200px'
 };
-export const keys = Object.keys(standard).reduce((acc, key) => {
-	acc[key] = key;
-	return acc;
+export const keys = Object.keys(standard).reduce((accumulator, key) => {
+	accumulator[key] = key;
+	return accumulator;
 }, {});
 const light = {
 	baseBackgroundColor: 'hsla(230, 5%, 90%, 1.00)',
@@ -254,9 +254,9 @@ function expandVariableKey(name) {
 	if (name.startsWith('--tp-')) {
 		return name;
 	} else {
-		const varName = keyToCssVariableMap.get(name);
-		if (varName) {
-			return varName;
+		const variableName = keyToCssVariableMap.get(name);
+		if (variableName) {
+			return variableName;
 		} else {
 			throw new Error(`Unknown Tweakpane CSS theme map variable key: "${name}"`);
 		}
@@ -266,24 +266,22 @@ function expandVariableKey(name) {
  * Used during SSR to calculate metrics Returns CSS string.
  */
 export function getValueOrFallback(theme, key) {
-	if (theme === undefined || theme[key] === undefined) {
-		return stringToCssValue(standard[key]);
-	} else {
-		return stringToCssValue(theme[key]);
-	}
+	return theme === undefined || theme[key] === undefined
+		? stringToCssValue(standard[key])
+		: stringToCssValue(theme[key]);
 }
 export function applyTheme(element, theme) {
-	const rootDoc = getWindowDocument().documentElement;
+	const rootDocument = getWindowDocument().documentElement;
 	if (theme === undefined) {
-		Object.keys(standard).forEach((k) => {
+		for (const k of Object.keys(standard)) {
 			const key = expandVariableKey(k);
 			if (element.style.getPropertyValue(key).length > 0) {
 				// console.log(`Unsetting via undefined theme ${key}`);
 				element.style.removeProperty(key);
 			}
-		});
+		}
 	} else {
-		Object.entries(theme).forEach(([k, v]) => {
+		for (const [k, v] of Object.entries(theme)) {
 			const key = expandVariableKey(k);
 			const value = stringToCssValue(v);
 			// console.log(`Inspecting ${key}: ${value}`);
@@ -292,7 +290,7 @@ export function applyTheme(element, theme) {
 			// then apply it anyway so that any global theme is overridden TODO normalize color
 			// representation for comparison? TODO tests for this logic
 			const standardValue = standard[k] || undefined;
-			const rootValue = rootDoc.style.getPropertyValue(key) || undefined;
+			const rootValue = rootDocument.style.getPropertyValue(key) || undefined;
 			const isDeviationFromRoot = (rootValue && value !== rootValue) || false;
 			const isDeviationFromStandard = (standardValue && value !== standardValue) || false;
 			if (
@@ -308,7 +306,7 @@ export function applyTheme(element, theme) {
 					element.style.removeProperty(key);
 				}
 			}
-		});
+		}
 	}
 }
 /**

package/dist/utils.d.ts

@@ -65,13 +65,13 @@ export declare function enforceReadonly(
 	internal: unknown,
 	external: unknown,
 	componentName?: string,
-	propName?: string,
+	propertyName?: string,
 	allowAssignmentToUndefined?: boolean
 ): void;
 export declare function isRootPane(container: Container): boolean;
 export declare function clamp(value: number, min: number, max: number): number;
 export declare function getElementIndex(element: HTMLElement): number;
-export declare function removeKeys<T extends object>(obj: T, ...keys: string[]): T;
+export declare function removeKeys<T extends object>(object: T, ...keys: string[]): T;
 export declare function updateCollapsibility(
 	isUserExpandableEnabled: boolean,
 	element: HTMLElement,
@@ -103,19 +103,19 @@ export declare function tupleToObject<
 	}
 >(tuple: number[], keys: T[]): O;
 export declare function objectToTuple<T extends string, O extends Record<T, number>>(
-	obj: O,
+	object: O,
 	keys: [T]
 ): [number];
 export declare function objectToTuple<T extends string, O extends Record<T, number>>(
-	obj: O,
+	object: O,
 	keys: [T, T]
 ): [number, number];
 export declare function objectToTuple<T extends string, O extends Record<T, number>>(
-	obj: O,
+	object: O,
 	keys: [T, T, T]
 ): [number, number, number];
 export declare function objectToTuple<T extends string, O extends Record<T, number>>(
-	obj: O,
+	object: O,
 	keys: [T, T, T, T]
 ): [number, number, number, number];
 export declare function pickerIsOpen(blade: BladeApi<BladeController<View>>): boolean;

package/dist/utils.js

@@ -3,7 +3,7 @@
 /**
  * For CLS SSR calculation
  */
-export function rowsForMonitor(buffer = undefined, rows = undefined, graph = undefined) {
+export function rowsForMonitor(buffer, rows, graph) {
 	if (graph) {
 		return Math.max(rows ?? 3, 3);
 	} else if (buffer === undefined && rows === undefined) {
@@ -23,7 +23,7 @@ export function rowsForMonitor(buffer = undefined, rows = undefined, graph = und
  * Fills an array of length `quantity` with a `value`
  */
 export function fillWith(value, quantity) {
-	return [...Array(quantity).fill(value)];
+	return Array.from({ length: quantity }, () => value);
 }
 /**
  * There's no way to enforce readonly properties in Svelte components, so this is a workaround. See
@@ -52,7 +52,7 @@ export function enforceReadonly(
 	internal,
 	external,
 	componentName,
-	propName,
+	propertyName,
 	allowAssignmentToUndefined
 ) {
 	allowAssignmentToUndefined ??= false;
@@ -63,9 +63,9 @@ export function enforceReadonly(
 		)
 	) {
 		const componentString = componentName ? `<${componentName}> ` : '';
-		const propString = propName ? `property "${propName}" ` : '';
+		const propertyString = propertyName ? `property "${propertyName}" ` : '';
 		console.error(
-			`Svelte component ${componentString}property ${propString}is intended for readonly use.\nAssigning\n"${external}"\nto\n"${internal}"\nis not allowed.`
+			`Svelte component ${componentString}property ${propertyString}is intended for readonly use.\nAssigning\n"${external}"\nto\n"${internal}"\nis not allowed.`
 		);
 	}
 }
@@ -85,25 +85,25 @@ export function getElementIndex(element) {
 	return index;
 }
 // doesn't create a new object, only works with string keys
-export function removeKeys(obj, ...keys) {
-	keys.forEach((key) => {
-		if (key in obj) {
-			delete obj[key];
+export function removeKeys(object, ...keys) {
+	for (const key of keys) {
+		if (key in object) {
+			delete object[key];
 		}
-	});
-	return obj;
+	}
+	return object;
 }
-function clickBlocker(e) {
+function clickBlocker(event) {
 	// only block user clicks, not programmatic ones
-	console.log(e.detail);
-	if (e.isTrusted) e.stopPropagation();
+	console.log(event.detail);
+	if (event.isTrusted) event.stopPropagation();
 }
 // used by folder and pane TODO rewrite to use getSwatchButton etc.
 export function updateCollapsibility(isUserExpandableEnabled, element, titleBarClass, iconClass) {
 	if (element) {
-		const titleBarElement = element.getElementsByClassName(titleBarClass)[0];
+		const titleBarElement = element.querySelector(`.${titleBarClass}`);
 		if (titleBarElement !== undefined) {
-			const iconElement = iconClass ? element.getElementsByClassName(iconClass)[0] : undefined;
+			const iconElement = iconClass ? element.querySelector(`.${iconClass}`) : undefined;
 			if (isUserExpandableEnabled) {
 				titleBarElement.removeEventListener('click', clickBlocker, { capture: true });
 				titleBarElement.style.cursor = 'pointer';
@@ -152,14 +152,14 @@ export function getGridDimensions(itemCount, maxColumns, maxRows) {
 }
 export function tupleToObject(tuple, keys) {
 	const result = {};
-	keys.forEach((key, index) => {
+	for (const [index, key] of keys.entries()) {
 		// Assert that the assignment is safe
 		result[key] = tuple[index];
-	});
+	}
 	return result;
 }
-export function objectToTuple(obj, keys) {
-	return keys.map((key) => obj[key]);
+export function objectToTuple(object, keys) {
+	return keys.map((key) => object[key]);
 }
 // tweakpane  helpers
 export function pickerIsOpen(blade) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tweakpane-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "repository": {
     "type": "git",
@@ -191,51 +191,35 @@
     "@tweakpane/plugin-camerakit": "^0.3.0",
     "@tweakpane/plugin-essentials": "^0.2.0",
     "esm-env": "^1.0.0",
-    "nanoid": "^5.0.3",
+    "nanoid": "^5.0.4",
     "svelte-local-storage-store": "^0.6.4",
     "tweakpane": "^4.0.1",
     "tweakpane-plugin-waveform": "^1.0.0"
   },
   "devDependencies": {
+    "@kitschpatrol/shared-config": "^2.0.1",
     "@phenomnomnominal/tsquery": "^6.1.3",
     "@stkb/rewrap": "^0.1.0",
     "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.27.6",
+    "@sveltejs/kit": "^1.27.7",
     "@sveltejs/package": "^2.2.3",
     "@types/eslint": "^8.44.8",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.10.2",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
-    "cspell": "^8.1.0",
-    "eslint": "^8.55.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-perfectionist": "^2.5.0",
-    "eslint-plugin-svelte": "^2.35.1",
+    "@types/node": "^20.10.4",
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
-    "markdownlint": "^0.32.1",
-    "markdownlint-cli": "^0.37.0",
     "npm-run-all": "^4.1.5",
     "postcss-html": "^1.5.0",
-    "prettier": "^3.1.0",
-    "prettier-plugin-astro": "^0.12.2",
-    "prettier-plugin-pkg": "^0.18.0",
-    "prettier-plugin-svelte": "^3.1.2",
     "publint": "^0.2.6",
-    "stylelint": "^15.11.0",
-    "stylelint-config-clean-order": "^5.2.0",
-    "stylelint-config-html": "^1.1.0",
-    "stylelint-config-standard": "^34.0.0",
     "svelte": "^4.2.8",
     "svelte-check": "^3.6.2",
     "svelte-language-server": "^0.16.1",
     "svelte2tsx": "^0.6.27",
-    "ts-morph": "^20.0.0",
+    "ts-morph": "^21.0.1",
     "tslib": "^2.6.2",
-    "tsx": "^4.6.1",
-    "typescript": "^5.3.2",
-    "vite": "^4.5.0",
+    "tsx": "^4.6.2",
+    "typescript": "^5.3.3",
+    "vite": "^4.5.1",
     "yaml": "^2.3.4"
   },
   "scripts": {
@@ -246,9 +230,9 @@
     "build:04-format": "pnpm run format",
     "build:05-package": "svelte-package && publint",
     "build:06-heal-dts-comments": "tsx ./scripts/heal-dts-comments.ts",
-    "build:07-strip-component-docs": "tsx ./scripts/strip-component-docs.ts",
+    "build:07-strip-component-documentation": "tsx ./scripts/strip-component-documentation.ts",
     "build:08-format-library": "prettier --ignore-path --plugin prettier-plugin-svelte --write ./dist",
-    "build:09-doc-data": "tsx ./scripts/generate-doc-data.ts",
+    "build:09-doc-data": "tsx ./scripts/generate-documentation-data.ts",
     "build:10-examples-to-kit": "tsx ./scripts/generate-kit-examples.ts",
     "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",
@@ -260,21 +244,14 @@
     "docs-dev": "pnpm -C ./docs run dev",
     "docs-preview": "pnpm -C ./docs run preview",
     "format": "run-s --print-label format:*",
-    "format:1-eslint": "eslint --fix ./src ./scripts ./docs/src",
-    "format:2-stylelint": "stylelint --fix './src/**/*.{css,svelte,html}'",
-    "format:3-rewrap": "rewrap -i --column 100 `find src \\( -name '*.svelte' -o -name '*.ts'  -o -name '*.html' \\) -type f | grep -v src/examples`",
-    "format:4-prettier": "prettier --plugin=prettier-plugin-svelte --plugin=prettier-plugin-astro --write .",
-    "format:5-embedded": "tsx ./scripts/format-embedded-code.ts",
+    "format:1-shared": "shared-config --fix",
+    "format:2-embedded": "tsx ./scripts/format-embedded-code.ts",
     "kit-build": "pnpm run kit-examples && vite build",
     "kit-dev": " pnpm run kit-examples && vite dev",
     "kit-examples": "tsx ./scripts/generate-kit-examples.ts",
     "kit-preview": "vite preview",
-    "lint": "run-p --print-label lint:*",
-    "lint:eslint": "eslint ./src ./scripts ./docs/src",
-    "lint:markdown": "markdownlint **/*.{md,mdx} --ignore node_modules",
-    "lint:prettier": "prettier --plugin=prettier-plugin-svelte --plugin=prettier-plugin-astro --check .",
-    "lint:spelling": "cspell --quiet .",
-    "lint:stylelint": "stylelint './src/**/*.{css,svelte,html}'",
-    "lint:typescript": "tsc --noEmit"
+    "lint": "shared-config --check",
+    "rewrap": "rewrap -i --column 100 `find src \\( -name '*.svelte' -o -name '*.ts'  -o -name '*.html' \\) -type f | grep -v src/examples`",
+    "type-check": "tsc --noEmit"
   }
 }