svelte-tweakpane-ui 1.0.0

package/dist/internal/InternalPaneFixed.svelte

@@ -0,0 +1,28 @@
+<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';
+	let paneRef;
+	let paneContainer;
+	$: paneRef !== void 0 &&
+		paneRef.element.parentElement &&
+		(paneContainer = paneRef.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 !== void 0 &&
+		width !== void 0 &&
+		paneContainer.style.setProperty('width', `${width}px`);
+</script>
+
+<div style="display: none;">
+	<GenericPane bind:expanded bind:paneRef {title} {...removeKeys($$restProps, 'position')}>
+		<slot />
+	</GenericPane>
+</div>

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

@@ -0,0 +1,119 @@
+import { SvelteComponent } from 'svelte';
+import type { Pane as TpPane } from 'tweakpane';
+declare const __propDef: {
+	props: Omit<
+		{
+			/**
+			 * Text in the pane's title bar.
+			 * @default `Tweakpane`  \
+			 * Unless `position='inline'`, in which case the default is `undefined` and no title bar is
+			 * shown.
+			 */
+			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 | undefined;
+			/**
+			 * Expand or collapse the pane into its title bar.
+			 * @default `true`
+			 * @bindable
+			 */
+			expanded?: boolean | undefined;
+			/**
+			 * Custom color scheme.
+			 *
+			 * Applies to all child components, but note that setting a different `theme` on a child
+			 * component's prop will **not** override the parent pane's theme.
+			 *
+			 * Note that `<Pane position="inline' ...>` squares off rounded corners by default to better
+			 * integrate with surrounding content.
+			 *
+			 * Simply pass a custom or default theme like `ThemeUtils.presets.standard` if you want rounded
+			 * corners on an `inline` pane.
+			 *
+			 * See also the `setGlobalDefaultTheme()` for a way to set a custom default theme for all panes
+			 * on the page.
+			 * @default `undefined`  \
+			 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+			 * set with `setGlobalDefaultTheme()`.
+			 */
+			theme?: import('..').Theme | undefined;
+			/**
+			 * Scales the pane's elements by a factor of `scale` to make it easier to see.
+			 *
+			 * Holds the width of the pane constant, so the pane will grow taller as it is scaled and will
+			 * continue to respect position- and size-related props. If you need more breathing room, set
+			 * the `width` property on the pane.
+			 *
+			 * Note that the scaling prop is only available on `<Pane>`, not on stand-alone (implicitly
+			 * wrapped) inline elements.
+			 *
+			 * Negative values are ignored.
+			 * @default `1`
+			 */
+			scale?: number | undefined;
+			/** Internal use only. */
+			userCreatedPane?: boolean | undefined;
+			/**
+			 * Internal use only.
+			 * @readonly
+			 */
+			paneRef?: TpPane | undefined;
+		},
+		'userCreatedPane' | 'paneRef'
+	> & {
+		/**
+		 * Horizontal position of the pane relative to the left edge of the window, in pixels.
+		 *
+		 * Not to be confused with the `position` prop which defines _how_, not _where_, the pane is
+		 * positioned on the page. (So-named because of its similarity to CSS `position` property.)
+		 * @default `undefined`  \
+		 * 8 pixels from the right edge of the window.
+		 * */
+		x?: number | undefined;
+		/**
+		 * Vertical position of the pane relative to the top of the window, in pixels.
+		 *
+		 * Not to be confused with the `position` prop which defines _how_, not _where_, the pane is
+		 * positioned on the page. (So-named because of its similarity to CSS `position` property.)
+		 * @default `undefined`  \
+		 * 8 pixels from the top edge of the window.
+		 * */
+		y?: number | undefined;
+		/**
+		 * Width of the pane, in pixels.
+		 * @default `256`
+		 * */
+		width?: number | undefined;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {
+		/**
+		 * Any Tweakpane component, except another `<Pane>`.
+		 */
+		default: {};
+	};
+};
+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.
+ *
+ * Implements the default tweakpane behavior... opens in a fixed position.
+ *
+ * @sourceLink
+ * [InternalPaneFixed.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/InternalPaneFixed.svelte)
+ */
+export default class InternalPaneFixed extends SvelteComponent<
+	InternalPaneFixedProps,
+	InternalPaneFixedEvents,
+	InternalPaneFixedSlots
+> {}
+export {};

package/dist/internal/InternalPaneInline.svelte

@@ -0,0 +1,29 @@
+<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 theme = {
+		baseBorderRadius: '0px',
+		baseShadowColor: 'hsla(0, 0%, 0%, 0)'
+		// bladeBorderRadius: '0px'
+	};
+	let paneRef;
+	let containerElement;
+	onMount(() => {
+		if (paneRef) {
+			const fixedContainer = paneRef.element.parentElement;
+			containerElement.appendChild(paneRef.element);
+			fixedContainer?.remove();
+		} else {
+			console.warn('paneRef is undefined');
+		}
+	});
+</script>
+
+<div bind:this={containerElement} style:width={width !== undefined ? `${width}px` : null}>
+	<GenericPane bind:expanded bind:paneRef {theme} {...removeKeys($$restProps, 'position')}>
+		<slot />
+	</GenericPane>
+</div>

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

@@ -0,0 +1,106 @@
+import { SvelteComponent } from 'svelte';
+import type { Pane as TpPane } from 'tweakpane';
+declare const __propDef: {
+	props: Omit<
+		{
+			/**
+			 * Text in the pane's title bar.
+			 * @default `Tweakpane`  \
+			 * Unless `position='inline'`, in which case the default is `undefined` and no title bar is
+			 * shown.
+			 */
+			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 | undefined;
+			/**
+			 * Expand or collapse the pane into its title bar.
+			 * @default `true`
+			 * @bindable
+			 */
+			expanded?: boolean | undefined;
+			/**
+			 * Custom color scheme.
+			 *
+			 * Applies to all child components, but note that setting a different `theme` on a child
+			 * component's prop will **not** override the parent pane's theme.
+			 *
+			 * Note that `<Pane position="inline' ...>` squares off rounded corners by default to better
+			 * integrate with surrounding content.
+			 *
+			 * Simply pass a custom or default theme like `ThemeUtils.presets.standard` if you want rounded
+			 * corners on an `inline` pane.
+			 *
+			 * See also the `setGlobalDefaultTheme()` for a way to set a custom default theme for all panes
+			 * on the page.
+			 * @default `undefined`  \
+			 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+			 * set with `setGlobalDefaultTheme()`.
+			 */
+			theme?: import('..').Theme | undefined;
+			/**
+			 * Scales the pane's elements by a factor of `scale` to make it easier to see.
+			 *
+			 * Holds the width of the pane constant, so the pane will grow taller as it is scaled and will
+			 * continue to respect position- and size-related props. If you need more breathing room, set
+			 * the `width` property on the pane.
+			 *
+			 * Note that the scaling prop is only available on `<Pane>`, not on stand-alone (implicitly
+			 * wrapped) inline elements.
+			 *
+			 * Negative values are ignored.
+			 * @default `1`
+			 */
+			scale?: number | undefined;
+			/** Internal use only. */
+			userCreatedPane?: boolean | undefined;
+			/**
+			 * Internal use only.
+			 * @readonly
+			 */
+			paneRef?: TpPane | undefined;
+		},
+		'paneRef'
+	> & {
+		/**
+		 * Width of the pane, in pixels.
+		 *
+		 * If undefined, the pane will fill the width of its container. (This behavior is unique to
+		 * `position="inline"`.)
+		 *
+		 * This value is particularly important in combination with `scale`, since a scaled inline
+		 * pane will grow indefinitely wider if an intrinsic width is not specified and a containing
+		 * element is not provided.
+		 * @default `undefined`
+		 * */
+		width?: number | undefined;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {
+		/**
+		 * Any Tweakpane component, except another `<Pane>`.
+		 */
+		default: {};
+	};
+};
+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.
+ *
+ * @sourceLink
+ * [InternalPaneInline.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/InternalPaneInline.svelte)
+ */
+export default class InternalPaneInline extends SvelteComponent<
+	InternalPaneInlineProps,
+	InternalPaneInlineEvents,
+	InternalPaneInlineSlots
+> {}
+export {};

package/dist/monitor/FpsGraph.svelte

@@ -0,0 +1,86 @@
+<script context="module"></script>
+
+<script>
+	import * as pluginModule from '@tweakpane/plugin-essentials';
+	import Blade from '../core/Blade.svelte';
+	import ClsPad from '../internal/ClsPad.svelte';
+	import { fillWith } from '../utils';
+	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;
+		fpsBlade?.begin();
+	}
+	export function end() {
+		implicitMode = false;
+		fpsBlade?.end();
+	}
+	let fpsBlade;
+	let requestId;
+	const dispatch = createEventDispatcher();
+	onMount(() => {
+		startInternalLoop();
+	});
+	onDestroy(() => {
+		stopInternalLoop();
+		stopObservingMeasuredFpsValue();
+	});
+	function startInternalLoop() {
+		loop();
+	}
+	function loop() {
+		fpsBlade?.end();
+		fpsBlade?.begin();
+		requestId = requestAnimationFrame(loop);
+	}
+	function stopInternalLoop() {
+		requestId && cancelAnimationFrame(requestId);
+	}
+	let observer = void 0;
+	function startObservingMeasuredFpsValue() {
+		stopObservingMeasuredFpsValue();
+		const targetNode = fpsBlade.controller.valueController.view.valueElement;
+		if (!targetNode || !targetNode.innerHTML) return;
+		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);
+				}
+			}
+		});
+		observer.observe(targetNode, { characterData: true, childList: true, subtree: true });
+	}
+	function stopObservingMeasuredFpsValue() {
+		if (observer) {
+			observer.disconnect();
+			observer = void 0;
+		}
+	}
+	$: fpsBlade && startObservingMeasuredFpsValue();
+	let options;
+	$: options = {
+		min,
+		max,
+		interval,
+		label,
+		rows,
+		view: 'fpsgraph'
+	};
+	$: !implicitMode && stopInternalLoop();
+</script>
+
+<Blade bind:ref={fpsBlade} {options} plugin={pluginModule} {...$$restProps} />
+{#if !BROWSER}
+	{#if rows}
+		<ClsPad keysAdd={fillWith('containerUnitSize', rows)} theme={$$props.theme} />
+	{:else}
+		<ClsPad keysAdd={fillWith('containerUnitSize', 2)} theme={$$props.theme} />
+	{/if}
+{/if}

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

@@ -0,0 +1,230 @@
+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';
+declare const __propDef: {
+	props: {
+		/**
+		 * Function to start a single frame measurement sample.
+		 *
+		 * If undefined, a `requestAnimationFrame` is used to indicate the overall performance of
+		 * the page.
+		 * @default `undefined`
+		 */
+		begin?: (() => void) | undefined;
+		/**
+		 * Function to end a single frame measurement sample.
+		 *
+		 * If undefined, a `requestAnimationFrame` is used to indicate the overall performance of
+		 * the page.
+		 * @default `undefined`
+		 */
+		end?: (() => void) | undefined;
+	} & Omit<
+		{
+			/**
+			 * Blade configuration exposing Tweakpane's internal
+			 * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
+			 *
+			 */
+			options: FpsGraphOptions;
+			/**
+			 * Prevent interactivity and gray out the control.
+			 * @default `false`
+			 */
+			disabled?: boolean | undefined;
+			/**
+			 * Custom color scheme.
+			 * @default `undefined`  \
+			 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+			 * set with `setGlobalDefaultTheme()`.
+			 */
+			theme?: import('..').Theme | undefined;
+			/**
+			 * Reference to internal Tweakpane
+			 * [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
+			 *
+			 * This is primarily for internal use, when implementing convenience components wrapping Blade's
+			 * functionality.
+			 * @bindable
+			 * @readonly
+			 */
+			ref?: FpsGraphRef | undefined;
+			/**
+			 * Imported Tweakpane `TpPluginBundle` (Aliased as `Plugin`) module to register before creating
+			 * the blade.
+			 *
+			 * This is primarily for internal use, when implementing convenience components wrapping Blade's
+			 * functionality in combination with a Tweakpane plugin.
+			 * @default `undefined`
+			 */
+			plugin?: import('tweakpane').TpPluginBundle | undefined;
+		},
+		'options' | 'ref' | 'plugin'
+	> & {
+			/**
+			 * Lower bound of the FPS graph.
+			 * @default `0`
+			 * */
+			min?: number | undefined;
+			/**
+			 * Upper bound of the FPS graph.
+			 * @default `90`
+			 * */
+			max?: number | undefined;
+			/**
+			 * Function to start a single frame measurement sample.
+			 *
+			 * If undefined, a `requestAnimationFrame` is used to indicate the overall performance of
+			 * the page.
+			 * @default `undefined`
+			 * */
+			begin?: (() => void) | undefined;
+			/**
+			 * Function to end a single frame measurement sample.
+			 *
+			 * If undefined, a `requestAnimationFrame` is used to indicate the overall performance of
+			 * the page.
+			 * @default `undefined`
+			 * */
+			end?: (() => void) | undefined;
+			/**
+			 * Time in milliseconds between updates to the graph.
+			 * @default `1000`
+			 * */
+			interval?: number | undefined;
+			/**
+			 * Text displayed next to the FPS graph.
+			 * @default `undefined`
+			 * */
+			label?: string | undefined;
+			/**
+			 * Height of the FPS graph, in rows.
+			 * @default `2`
+			 * */
+			rows?: number | undefined;
+		};
+	slots: {};
+	events: {
+		/**
+		 * Fires when the FPS value changes, passing the latest FPS measurement.
+		 *
+		 * Note that the values described in the `FpsGraphChangeEvent` type are available on the
+		 * `event.detail` parameter.
+		 * @event
+		 * */
+		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.
+ *
+ * Integrates the [FPS Graph](https://github.com/tweakpane/plugin-essentials#fps-graph) control from
+ * Tweakpane-creator [Hiroki Kokubun's](https://cocopon.me)  [Essentials
+ * plugin](https://github.com/tweakpane/plugin-essentials).
+ *
+ * By default, the component creates an internal `requestAnimationFrame` loop to measure the overall
+ * performance of the page. If you want to measure the performance of a specific block of code, you can
+ * bind the `begin` and `end` props for access to functions to fence the code of interest. (The default
+ * internal loop will be cleaned up automatically on the bound functions first use.)
+ *
+ * See the `<Profiler>` component for a more advanced measurement and visualization strategies.
+ *
+ * If you'd like to observe or visualize the frame rate data elsewhere, a `change` event is provided to
+ * notify when the FPS value changes.
+ *
+ * @emits {number} change - When the FPS value changes.
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the FPS graph in `<Pane
+ * position='inline'>`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * 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;
+ *
+ * onMount(() => {
+ *   (function tick() {
+ *     rotation += rotationSpeed;
+ *     requestAnimationFrame(tick);
+ *   })();
+ * });
+ *
+ * $: gridSize = intensity ** 2;
+ * </script>
+ *
+ * <FpsGraph interval={50} label="FPS" rows={5} />
+ * <Slider
+ * bind:value={intensity}
+ * min={1}
+ * max={10}
+ * label="Intensity (Careful)"
+ * step={1}
+ * />
+ * <Monitor
+ * value={gridSize ** 2}
+ * format={(v) => v.toFixed(0)}
+ * label="Boxes (Monitor)"
+ * />
+ * <Slider bind:value={scale} min={0.25} max={2} label="Scale" />
+ * <Slider bind:value={phase} min={0} max={2000} label="Phase" />
+ * <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}
+ *     <div
+ *       class="box"
+ *       style:left="{(x / gridSize) * 100}%"
+ *       style:scale
+ *       style:top="{(y / gridSize) * 100}%"
+ *       style:transform="rotateZ({rotation +
+ *         (x / gridSize) * phase +
+ *         (y / gridSize) * phase}deg)"
+ *       style:width="{100 / gridSize}%"
+ *     />
+ *   {/each}
+ * {/each}
+ * </div>
+ *
+ * <style>
+ * .demo {
+ *   position: relative;
+ *   overflow: hidden;
+ *   aspect-ratio: 1;
+ *   width: 100%;
+ *   background: linear-gradient(to top, gold, rebeccapurple);
+ * }
+ *
+ * .box {
+ *   position: absolute;
+ *   transform-origin: center;
+ *   aspect-ratio: 1;
+ *   opacity: 0.5;
+ *   background: linear-gradient(to bottom, orange, magenta);
+ * }
+ * </style>
+ * ```
+ *
+ * @sourceLink
+ * [FpsGraph.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/monitor/FpsGraph.svelte)
+ */
+export default class FpsGraph extends SvelteComponent<
+	FpsGraphProps,
+	FpsGraphEvents,
+	FpsGraphSlots
+> {
+	get begin(): (() => void) & (() => void);
+	get end(): (() => void) & (() => void);
+}
+export {};

package/dist/monitor/Monitor.svelte

@@ -0,0 +1,14 @@
+<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;
+</script>
+
+{#if typeof value === 'number'}
+	<InternalMonitorNumber {value} {...$$restProps} />
+{:else if typeof value === 'boolean'}
+	<InternalMonitorBoolean {value} {...$$restProps} />
+{:else if typeof value === 'string'}
+	<InternalMonitorString {value} {...$$restProps} />
+{/if}