svelte-tweakpane-ui 1.0.0 → 1.0.2

package/dist/extra/AutoObject.svelte

@@ -12,18 +12,18 @@
 	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(/[_-]+/g, ' ')
+			.replaceAll(/([\da-z])([A-Z])/g, '$1 $2')
+			.replaceAll(/[_-]+/g, ' ')
 			.toLowerCase()
-			.replace(/\b[a-z]/g, (letter) => {
-				return letter.toUpperCase();
-			});
+			.replaceAll(/\b[a-z]/g, (letter) => letter.toUpperCase());
 	}
 </script>
 

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

@@ -7,11 +7,10 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: string | number | boolean | object;
-				};
+				object: import('@tweakpane/core').Bindable &
+					Record<string, string | number | boolean | object>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`
@@ -114,6 +113,9 @@ export type AutoValueSlots = typeof __propDef.slots;
  * <AutoValue bind:value={point} label="Point" />
  * <AutoValue bind:value={text} label="Text" />
  * ```
+ *
+ * @sourceLink
+ * [AutoValue.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/extra/AutoValue.svelte)
  */
 export default class AutoValue extends SvelteComponent<
 	AutoValueProps,

package/dist/extra/Element.svelte

@@ -9,9 +9,7 @@
 	};
 	let ref;
 	let sourceDiv;
-	$: if (ref && ref.element) {
-		ref.element.replaceChildren(sourceDiv);
-	}
+	$: ref?.element.replaceChildren(sourceDiv);
 </script>
 
 {#if BROWSER}
@@ -27,7 +25,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/index.js

@@ -1,16 +1,16 @@
-// components
+// Components
 // essentials (1st party plugins)
 export { default as ButtonGrid } from './control/ButtonGrid.svelte';
 export { default as Checkbox } from './control/Checkbox.svelte';
 export { default as Color } from './control/Color.svelte';
 export { default as CubicBezier } from './control/CubicBezier.svelte';
-// additional plugins (3rd party / community)
+// Additional plugins (3rd party / community)
 export { default as Image } from './control/Image.svelte';
 export { default as IntervalSlider } from './control/IntervalSlider.svelte';
 export { default as List } from './control/List.svelte';
 export { default as Point } from './control/Point.svelte';
 export { default as RadioGrid } from './control/RadioGrid.svelte';
-// camerakit (1st party plugins)
+// Camerakit (1st party plugins)
 export { default as Ring } from './control/Ring.svelte';
 export { default as RotationEuler } from './control/RotationEuler.svelte';
 export { default as RotationQuaternion } from './control/RotationQuaternion.svelte';
@@ -18,7 +18,7 @@ export { default as Slider } from './control/Slider.svelte';
 export { default as Text } from './control/Text.svelte';
 export { default as Textarea } from './control/Textarea.svelte';
 export { default as Wheel } from './control/Wheel.svelte';
-// core (tweakpane building blocks)
+// Core (tweakpane building blocks)
 export { default as Binding } from './core/Binding.svelte';
 export { default as Blade } from './core/Blade.svelte';
 export { default as Button } from './core/Button.svelte';
@@ -27,7 +27,7 @@ export { default as Pane } from './core/Pane.svelte';
 export { default as Separator } from './core/Separator.svelte';
 export { default as TabGroup } from './core/TabGroup.svelte';
 export { default as TabPage } from './core/TabPage.svelte';
-// extra (svelte convenience components)
+// Extra (svelte convenience components)
 export { default as AutoObject } from './extra/AutoObject.svelte';
 export { default as AutoValue } from './extra/AutoValue.svelte';
 export { default as Element } from './extra/Element.svelte';

package/dist/internal/ClsPad.svelte

@@ -10,16 +10,12 @@
 		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)));
-			}, 0) -
-			sub.reduce((acc, key) => {
-				return (acc += getPixelValue(getValueOrFallback(theme, key)));
-			}, 0) +
+			add.reduce((acc, key) => (acc += getPixelValue(getValueOrFallback(theme, key))), 0) -
+			sub.reduce((acc, key) => (acc += getPixelValue(getValueOrFallback(theme, key))), 0) +
 			extra2
 		);
 	}

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

@@ -91,5 +91,15 @@ declare const __propDef: {
 export type ClsPadProps = typeof __propDef.props;
 export type ClsPadEvents = typeof __propDef.events;
 export type ClsPadSlots = typeof __propDef.slots;
+/**
+ * This component is for internal use only.
+ *
+ * It's a utility to assist in estimating the rendered height of Tweakpane components for use during prerendering in an attempt to minimize layout shift upon hydration.
+ *
+ * The associated SSR / prerendering CLS prevention feature is experimental.
+ *
+ * @sourceLink
+ * [ClsPad.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/ClsPad.svelte)
+ */
 export default class ClsPad extends SvelteComponent<ClsPadProps, ClsPadEvents, ClsPadSlots> {}
 export {};

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

@@ -11,11 +11,9 @@ declare class __sveltets_Render<
 			 * The binding's target object with values to manipulate.
 			 * @bindable
 			 */
-			object: import('@tweakpane/core').Bindable & {
-				[x: string]: T;
-			};
+			object: import('@tweakpane/core').Bindable & Record<string, T>;
 			/** The key for the value in the target `object` that the control should manipulate. */
-			key: string | number;
+			key: string;
 			/**
 			 * Prevent interactivity and gray out the control.
 			 * @default `false`

package/dist/internal/GenericBladeFolding.svelte

@@ -14,15 +14,15 @@
 	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;
 		});
 	}
 	$: options = {
 		...options,
 		expanded: initialExpanded,
-		// only set once
+		// Only set once
 		picker
 	};
 	$: ref &&
@@ -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/GenericInput.svelte.d.ts

@@ -13,11 +13,9 @@ declare class __sveltets_Render<
 			 * The binding's target object with values to manipulate.
 			 * @bindable
 			 */
-			object: import('@tweakpane/core').Bindable & {
-				[x: string]: T;
-			};
+			object: import('@tweakpane/core').Bindable & Record<string, T>;
 			/** The key for the value in the target `object` that the control should manipulate. */
-			key: string | number;
+			key: string;
 			/**
 			 * Prevent interactivity and gray out the control.
 			 * @default `false`

package/dist/internal/GenericInputFolding.svelte

@@ -18,23 +18,23 @@
 	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;
 		});
 	}
 	$: optionsInternal = {
 		...options,
 		expanded: initialExpanded,
-		// only set once
+		// Only set once
 		picker
 	};
 	$: ref && buttonClass && updateCollapsibility(userExpandable ?? true, ref.element, buttonClass);
 	$: 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/GenericInputFolding.svelte.d.ts

@@ -15,11 +15,9 @@ declare class __sveltets_Render<
 			 * The binding's target object with values to manipulate.
 			 * @bindable
 			 */
-			object: import('@tweakpane/core').Bindable & {
-				[x: string]: T;
-			};
+			object: import('@tweakpane/core').Bindable & Record<string, T>;
 			/** The key for the value in the target `object` that the control should manipulate. */
-			key: string | number;
+			key: string;
 			/**
 			 * Prevent interactivity and gray out the control.
 			 * @default `false`

package/dist/internal/GenericMonitor.svelte

@@ -14,7 +14,7 @@
 	$: optionsInternal = {
 		bufferSize,
 		interval: interval ?? 0,
-		// zero confirmed as never updating (not same interface as setInterval())
+		// Zero confirmed as never updating (not same interface as setInterval())
 		rows,
 		...options,
 		readonly: true

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

@@ -13,11 +13,9 @@ declare class __sveltets_Render<
 			 * The binding's target object with values to manipulate.
 			 * @bindable
 			 */
-			object: import('@tweakpane/core').Bindable & {
-				[x: string]: T;
-			};
+			object: import('@tweakpane/core').Bindable & Record<string, T>;
 			/** The key for the value in the target `object` that the control should manipulate. */
-			key: string | number;
+			key: string;
 			/**
 			 * Prevent interactivity and gray out the control.
 			 * @default `false`

package/dist/internal/GenericPane.svelte

@@ -18,13 +18,10 @@
 	let pluginsRegistered = [];
 	const registerPlugin = (plugin) => {
 		if (paneRef === void 0) {
-			console.warn('`paneRef is undefined, failed to register plugin "${plugin.id}"');
-		} else {
-			if (pluginsRegistered.includes(plugin.id)) {
-			} else {
-				paneRef?.registerPlugin(plugin);
-				pluginsRegistered.push(plugin.id);
-			}
+			console.warn(`paneRef is undefined, failed to register plugin "${plugin.id}"`);
+		} else if (!pluginsRegistered.includes(plugin.id)) {
+			paneRef?.registerPlugin(plugin);
+			pluginsRegistered.push(plugin.id);
 		}
 	};
 	setContext('registerPlugin', registerPlugin);

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

@@ -9,11 +9,9 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 			 * The binding's target object with values to manipulate.
 			 * @bindable
 			 */
-			object: import('@tweakpane/core').Bindable & {
-				[x: string]: T;
-			};
+			object: import('@tweakpane/core').Bindable & Record<string, T>;
 			/** The key for the value in the target `object` that the control should manipulate. */
-			key: string | number;
+			key: string;
 			/**
 			 * Prevent interactivity and gray out the control.
 			 * @default `false`

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

@@ -9,11 +9,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: boolean;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, boolean>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -9,11 +9,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: number;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, number>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -9,11 +9,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: string;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, string>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`