svelte-tweakpane-ui 1.5.3 → 1.5.4

package/dist/internal/InternalPaneFixed.svelte

@@ -1,22 +1,22 @@
 <script>
-	import GenericPane from './GenericPane.svelte';
-	import { removeKeys } from '../utils.js';
-	export let expanded = void 0;
-	export let x = void 0;
-	export let y = void 0;
-	export let width = void 0;
-	export let title = 'Tweakpane';
-	export let tpPane = void 0;
-	let paneContainer;
-	$: tpPane?.element.parentElement && (paneContainer = tpPane.element.parentElement);
+	import GenericPane from './GenericPane.svelte'
+	import { removeKeys } from '../utils.js'
+	export let expanded = void 0
+	export let x = void 0
+	export let y = void 0
+	export let width = void 0
+	export let title = 'Tweakpane'
+	export let tpPane = void 0
+	let paneContainer
+	$: tpPane?.element.parentElement && (paneContainer = tpPane.element.parentElement)
 	$: paneContainer !== void 0 &&
 		x !== void 0 &&
 		(paneContainer.style.setProperty('right', 'unset'),
-		paneContainer.style.setProperty('left', `${x}px`));
-	$: paneContainer !== void 0 && y !== void 0 && paneContainer.style.setProperty('top', `${y}px`);
+		paneContainer.style.setProperty('left', `${x}px`))
+	$: paneContainer !== void 0 && y !== void 0 && paneContainer.style.setProperty('top', `${y}px`)
 	$: paneContainer !== void 0 &&
 		width !== void 0 &&
-		paneContainer.style.setProperty('width', `${width}px`);
+		paneContainer.style.setProperty('width', `${width}px`)
 </script>
 
 <div style="display: none;">

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent } from 'svelte'
 declare const __propDef: {
 	props: {
 		/**
@@ -9,7 +9,7 @@ declare const __propDef: {
 		 * @default `undefined`  \
 		 * 8 pixels from the right edge of the window.
 		 * */
-		x?: number;
+		x?: number
 		/**
 		 * Vertical position of the pane relative to the top of the window, in pixels.
 		 *
@@ -18,12 +18,12 @@ declare const __propDef: {
 		 * @default `undefined`  \
 		 * 8 pixels from the top edge of the window.
 		 * */
-		y?: number;
+		y?: number
 		/**
 		 * Width of the pane, in pixels.
 		 * @default `256`
 		 * */
-		width?: number;
+		width?: number
 	} & Omit<
 		{
 			/**
@@ -32,20 +32,20 @@ declare const __propDef: {
 			 * Unless `position="inline"`, in which case the default is `undefined` and no title bar is
 			 * shown.
 			 */
-			title?: string | undefined;
+			title?: string | undefined
 			/**
 			 * Allow users to interactively expand / contract the pane by clicking its title bar.
 			 *
 			 * Hides the collapse button from the title bar when `false`.
 			 * @default `true`
 			 */
-			userExpandable?: boolean;
+			userExpandable?: boolean
 			/**
 			 * Expand or collapse the pane into its title bar.
 			 * @default `true`
 			 * @bindable
 			 */
-			expanded?: boolean;
+			expanded?: boolean
 			/**
 			 * Custom color scheme.
 			 *
@@ -64,7 +64,7 @@ declare const __propDef: {
 			 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
 			 * set with `setGlobalDefaultTheme()`.
 			 */
-			theme?: import('..').Theme | undefined;
+			theme?: import('..').Theme | undefined
 			/**
 			 * Scales the pane's elements by a factor of `scale` to make it easier to see.
 			 *
@@ -78,9 +78,9 @@ declare const __propDef: {
 			 * Negative values are ignored.
 			 * @default `1`
 			 */
-			scale?: number;
+			scale?: number
 			/** Internal use only. */
-			userCreatedPane?: boolean;
+			userCreatedPane?: boolean
 			/**
 			 * The internal Tweakpane [`Pane`](https://tweakpane.github.io/docs/api/classes/Pane.html) object.
 			 *
@@ -95,25 +95,25 @@ declare const __propDef: {
 			 * @bindable
 			 * @readonly
 			 */
-			tpPane?: import('tweakpane').Pane | undefined;
+			tpPane?: import('tweakpane').Pane | undefined
 		},
 		'userCreatedPane'
-	>;
+	>
 	events: {
-		[evt: string]: CustomEvent<any>;
-	};
+		[evt: string]: CustomEvent<any>
+	}
 	slots: {
 		/**
 		 * Any Tweakpane component, except another `<Pane>`.
 		 */
-		default: {};
-	};
-	exports?: {} | undefined;
-	bindings?: string | undefined;
-};
-export type InternalPaneFixedProps = typeof __propDef.props;
-export type InternalPaneFixedEvents = typeof __propDef.events;
-export type InternalPaneFixedSlots = typeof __propDef.slots;
+		default: {}
+	}
+	exports?: {} | undefined
+	bindings?: string | undefined
+}
+export type InternalPaneFixedProps = typeof __propDef.props
+export type InternalPaneFixedEvents = typeof __propDef.events
+export type InternalPaneFixedSlots = typeof __propDef.slots
 /**
  * This component is for internal use only.
  *
@@ -127,4 +127,4 @@ export default class InternalPaneFixed extends SvelteComponent<
 	InternalPaneFixedEvents,
 	InternalPaneFixedSlots
 > {}
-export {};
+export {}

package/dist/internal/InternalPaneInline.svelte

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

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent } from 'svelte'
 declare const __propDef: {
 	props: {
 		/**
@@ -12,7 +12,7 @@ declare const __propDef: {
 		 * element is not provided.
 		 * @default `undefined`
 		 * */
-		width?: number;
+		width?: number
 	} & {
 		/**
 		 * Text in the pane's title bar.
@@ -20,20 +20,20 @@ declare const __propDef: {
 		 * Unless `position="inline"`, in which case the default is `undefined` and no title bar is
 		 * shown.
 		 */
-		title?: string | undefined;
+		title?: string | undefined
 		/**
 		 * Allow users to interactively expand / contract the pane by clicking its title bar.
 		 *
 		 * Hides the collapse button from the title bar when `false`.
 		 * @default `true`
 		 */
-		userExpandable?: boolean;
+		userExpandable?: boolean
 		/**
 		 * Expand or collapse the pane into its title bar.
 		 * @default `true`
 		 * @bindable
 		 */
-		expanded?: boolean;
+		expanded?: boolean
 		/**
 		 * Custom color scheme.
 		 *
@@ -52,7 +52,7 @@ declare const __propDef: {
 		 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
 		 * set with `setGlobalDefaultTheme()`.
 		 */
-		theme?: import('..').Theme | undefined;
+		theme?: import('..').Theme | undefined
 		/**
 		 * Scales the pane's elements by a factor of `scale` to make it easier to see.
 		 *
@@ -66,9 +66,9 @@ declare const __propDef: {
 		 * Negative values are ignored.
 		 * @default `1`
 		 */
-		scale?: number;
+		scale?: number
 		/** Internal use only. */
-		userCreatedPane?: boolean;
+		userCreatedPane?: boolean
 		/**
 		 * The internal Tweakpane [`Pane`](https://tweakpane.github.io/docs/api/classes/Pane.html) object.
 		 *
@@ -83,23 +83,23 @@ declare const __propDef: {
 		 * @bindable
 		 * @readonly
 		 */
-		tpPane?: import('tweakpane').Pane | undefined;
-	};
+		tpPane?: import('tweakpane').Pane | undefined
+	}
 	events: {
-		[evt: string]: CustomEvent<any>;
-	};
+		[evt: string]: CustomEvent<any>
+	}
 	slots: {
 		/**
 		 * Any Tweakpane component, except another `<Pane>`.
 		 */
-		default: {};
-	};
-	exports?: {} | undefined;
-	bindings?: string | undefined;
-};
-export type InternalPaneInlineProps = typeof __propDef.props;
-export type InternalPaneInlineEvents = typeof __propDef.events;
-export type InternalPaneInlineSlots = typeof __propDef.slots;
+		default: {}
+	}
+	exports?: {} | undefined
+	bindings?: string | undefined
+}
+export type InternalPaneInlineProps = typeof __propDef.props
+export type InternalPaneInlineEvents = typeof __propDef.events
+export type InternalPaneInlineSlots = typeof __propDef.slots
 /**
  * This component is for internal use only.
  *
@@ -111,4 +111,4 @@ export default class InternalPaneInline extends SvelteComponent<
 	InternalPaneInlineEvents,
 	InternalPaneInlineSlots
 > {}
-export {};
+export {}

package/dist/monitor/FpsGraph.svelte

@@ -1,64 +1,64 @@
 <script context="module"></script>
 
 <script>
-	import Blade from '../core/Blade.svelte';
-	import ClsPad from '../internal/ClsPad.svelte';
-	import { fillWith } from '../utils';
-	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-essentials';
-	import { BROWSER } from 'esm-env';
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-	export let rows = void 0;
-	export let interval = void 0;
-	export let max = void 0;
-	export let min = void 0;
-	export let label = void 0;
-	let implicitMode = true;
+	import Blade from '../core/Blade.svelte'
+	import ClsPad from '../internal/ClsPad.svelte'
+	import { fillWith } from '../utils'
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-essentials'
+	import { BROWSER } from 'esm-env'
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
+	export let rows = void 0
+	export let interval = void 0
+	export let max = void 0
+	export let min = void 0
+	export let label = void 0
+	let implicitMode = true
 	export function begin() {
-		implicitMode = false;
-		ref?.begin();
+		implicitMode = false
+		ref?.begin()
 	}
 	export function end() {
-		implicitMode = false;
-		ref?.end();
+		implicitMode = false
+		ref?.end()
 	}
-	let ref;
-	let requestId;
-	const dispatch = createEventDispatcher();
+	let ref
+	let requestId
+	const dispatch = createEventDispatcher()
 	onMount(() => {
-		startInternalLoop();
-	});
+		startInternalLoop()
+	})
 	onDestroy(() => {
-		stopInternalLoop();
-	});
+		stopInternalLoop()
+	})
 	function startInternalLoop() {
-		loop();
+		loop()
 	}
 	function loop() {
-		ref?.end();
-		ref?.begin();
-		requestId = requestAnimationFrame(loop);
+		ref?.end()
+		ref?.begin()
+		requestId = requestAnimationFrame(loop)
 	}
 	function stopInternalLoop() {
-		requestId && cancelAnimationFrame(requestId);
+		requestId && cancelAnimationFrame(requestId)
 	}
 	function addListeners() {
 		ref.on('tick', () => {
 			if (ref.fps !== null) {
-				dispatch('change', ref.fps);
+				dispatch('change', ref.fps)
 			}
-		});
+		})
 	}
-	let options;
+	let options
 	$: options = {
 		min,
 		max,
 		interval,
 		label,
 		rows,
-		view: 'fpsgraph'
-	};
-	$: ref !== void 0 && addListeners();
-	$: !implicitMode && stopInternalLoop();
+		view: 'fpsgraph',
+	}
+	$: ref !== void 0 && addListeners()
+	$: !implicitMode && stopInternalLoop()
 </script>
 
 <Blade bind:ref {options} plugin={pluginModule} {...$$restProps} />

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 '@kitschpatrol/tweakpane-plugin-essentials';
-import type { FpsGraphBladeParams as FpsGraphOptions } from '@kitschpatrol/tweakpane-plugin-essentials/dist/types/fps-graph/plugin.js';
+import { SvelteComponent } from 'svelte'
+export type FpsGraphChangeEvent = CustomEvent<number>
+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: {
 		/**
@@ -11,7 +11,7 @@ declare const __propDef: {
 		 * the page.
 		 * @default `undefined`
 		 */
-		begin?: () => void;
+		begin?: () => void
 		/**
 		 * Function to end a single frame measurement sample.
 		 *
@@ -19,18 +19,18 @@ declare const __propDef: {
 		 * the page.
 		 * @default `undefined`
 		 */
-		end?: () => void;
+		end?: () => void
 	} & ({
 		/**
 		 * Lower bound of the FPS graph.
 		 * @default `0`
 		 * */
-		min?: number;
+		min?: number
 		/**
 		 * Upper bound of the FPS graph.
 		 * @default `90`
 		 * */
-		max?: number;
+		max?: number
 		/**
 		 * Function to start a single frame measurement sample.
 		 *
@@ -38,7 +38,7 @@ declare const __propDef: {
 		 * the page.
 		 * @default `undefined`
 		 * */
-		begin?: () => void;
+		begin?: () => void
 		/**
 		 * Function to end a single frame measurement sample.
 		 *
@@ -46,22 +46,22 @@ declare const __propDef: {
 		 * the page.
 		 * @default `undefined`
 		 * */
-		end?: () => void;
+		end?: () => void
 		/**
 		 * Time in milliseconds between updates to the graph.
 		 * @default `1000`
 		 * */
-		interval?: number;
+		interval?: number
 		/**
 		 * Text displayed next to the FPS graph.
 		 * @default `undefined`
 		 * */
-		label?: string;
+		label?: string
 		/**
 		 * Height of the FPS graph, in rows.
 		 * @default `2`
 		 * */
-		rows?: number;
+		rows?: number
 	} & Omit<
 		{
 			/**
@@ -69,19 +69,19 @@ declare const __propDef: {
 			 * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
 			 *
 			 */
-			options: FpsGraphOptions;
+			options: FpsGraphOptions
 			/**
 			 * Prevent interactivity and gray out the control.
 			 * @default `false`
 			 */
-			disabled?: boolean;
+			disabled?: boolean
 			/**
 			 * Custom color scheme.
 			 * @default `undefined`  \
 			 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
 			 * set with `setGlobalDefaultTheme()`.
 			 */
-			theme?: import('..').Theme | undefined;
+			theme?: import('..').Theme | undefined
 			/**
 			 * Reference to internal Tweakpane
 			 * [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
@@ -94,7 +94,7 @@ declare const __propDef: {
 			 * @bindable
 			 * @readonly
 			 */
-			ref?: FpsGraphRef | undefined;
+			ref?: FpsGraphRef | undefined
 			/**
 			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
 			 * the `<Blade>`'s containing `<Pane>`.
@@ -106,11 +106,11 @@ declare const __propDef: {
 			 *
 			 * @default `undefined`
 			 */
-			plugin?: import('../utils.js').Plugin | undefined;
+			plugin?: import('../utils.js').Plugin | undefined
 		},
 		'ref' | 'options' | 'plugin'
-	>);
-	slots: {};
+	>)
+	slots: {}
 	events: {
 		/**
 		 * Fires when the FPS value changes, passing the latest FPS measurement.
@@ -119,12 +119,12 @@ declare const __propDef: {
 		 * `event.detail` parameter.
 		 * @event
 		 * */
-		change: FpsGraphChangeEvent;
-	};
-};
-export type FpsGraphProps = typeof __propDef.props;
-export type FpsGraphEvents = typeof __propDef.events;
-export type FpsGraphSlots = typeof __propDef.slots;
+		change: FpsGraphChangeEvent
+	}
+}
+export type FpsGraphProps = typeof __propDef.props
+export type FpsGraphEvents = typeof __propDef.events
+export type FpsGraphSlots = typeof __propDef.slots
 /**
  * A control for monitoring and graphing frame rates over time.
  *
@@ -152,23 +152,31 @@ export type FpsGraphSlots = typeof __propDef.slots;
  * @example
  * ```svelte
  * <script lang="ts">
- * import { onMount } from 'svelte';
- * import { FpsGraph, Monitor, Slider } from 'svelte-tweakpane-ui';
+ * import { onMount } from 'svelte'
+ * import { FpsGraph, Monitor, Slider } from 'svelte-tweakpane-ui'
  *
- * let rotation = 0;
- * let rotationSpeed = 3;
- * let phase = 500;
- * let scale = 1.25;
- * let intensity = 4;
+ * let rotation = 0
+ * let rotationSpeed = 3
+ * let phase = 500
+ * let scale = 1.25
+ * let intensity = 4
  *
  * onMount(() => {
- *   (function tick() {
- *     rotation += rotationSpeed;
- *     requestAnimationFrame(tick);
- *   })();
- * });
+ *   let animationFrameHandle: number
+ *
+ *   function tick() {
+ *     rotation += rotationSpeed
+ *     animationFrameHandle = requestAnimationFrame(tick)
+ *   }
+ *
+ *   tick()
+ *
+ *   return () => {
+ *     cancelAnimationFrame(animationFrameHandle)
+ *   }
+ * })
  *
- * $: gridSize = intensity ** 2;
+ * $: gridSize = intensity ** 2
  * </script>
  *
  * <FpsGraph interval={50} label="FPS" rows={5} />
@@ -232,7 +240,7 @@ export default class FpsGraph extends SvelteComponent<
 	FpsGraphEvents,
 	FpsGraphSlots
 > {
-	get begin(): (() => void) & (() => void);
-	get end(): (() => void) & (() => void);
+	get begin(): (() => void) & (() => void)
+	get end(): (() => void) & (() => void)
 }
-export {};
+export {}

package/dist/monitor/Monitor.svelte

@@ -1,8 +1,8 @@
 <script generics="W extends number | string | boolean | unknown">
-	import InternalMonitorBoolean from '../internal/InternalMonitorBoolean.svelte';
-	import InternalMonitorNumber from '../internal/InternalMonitorNumber.svelte';
-	import InternalMonitorString from '../internal/InternalMonitorString.svelte';
-	export let value;
+	import InternalMonitorBoolean from '../internal/InternalMonitorBoolean.svelte'
+	import InternalMonitorNumber from '../internal/InternalMonitorNumber.svelte'
+	import InternalMonitorString from '../internal/InternalMonitorString.svelte'
+	export let value
 </script>
 
 {#if typeof value === 'number'}