svelte-tweakpane-ui 1.0.0

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

@@ -0,0 +1,84 @@
+import { SvelteComponent } from 'svelte';
+import { type Theme } from '../theme.js';
+import { Pane as TpPane } from 'tweakpane';
+declare const __propDef: {
+	props: {
+		/**
+		 * 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?: 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;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {
+		/**
+		 * Any Tweakpane component, except another `<Pane>`.
+		 */
+		default: {};
+	};
+};
+export type GenericPaneProps = typeof __propDef.props;
+export type GenericPaneEvents = typeof __propDef.events;
+export type GenericPaneSlots = typeof __propDef.slots;
+/**
+ * This component is for internal use only.
+ *
+ * @sourceLink
+ * [GenericPane.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/GenericPane.svelte)
+ */
+export default class GenericPane extends SvelteComponent<
+	GenericPaneProps,
+	GenericPaneEvents,
+	GenericPaneSlots
+> {}
+export {};

package/dist/internal/GenericSlider.svelte

@@ -0,0 +1,27 @@
+<script generics="T extends number | IntervalSliderValue">
+	import GenericInput from './GenericInput.svelte';
+	import { BROWSER } from 'esm-env';
+	export let value;
+	export let options = void 0;
+	export let min = void 0;
+	export let max = void 0;
+	export let step = void 0;
+	export let pointerScale = void 0;
+	export let keyScale = void 0;
+	export let format = void 0;
+	let formatProxy = format;
+	$: BROWSER && formatProxy !== format && (formatProxy = format);
+	let optionsInternal;
+	$: BROWSER &&
+		(optionsInternal = {
+			min,
+			max,
+			format: formatProxy,
+			keyScale,
+			pointerScale,
+			step,
+			...options
+		});
+</script>
+
+<GenericInput bind:value options={optionsInternal} {...$$restProps} />

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

@@ -0,0 +1,146 @@
+import { SvelteComponent } from 'svelte';
+import type { IntervalSliderValue } from '../control/IntervalSlider.svelte';
+import type { NumberInputParams as GenericSliderOptions } from 'tweakpane';
+import type { SliderInputBindingApi as GenericSliderRef } from 'tweakpane';
+declare class __sveltets_Render<T extends number | IntervalSliderValue> {
+	props(): Omit<
+		{
+			/**
+			 * The binding's target object with values to manipulate.
+			 * @bindable
+			 */
+			object: import('@tweakpane/core').Bindable & {
+				[x: string]: T;
+			};
+			/** The key for the value in the target `object` that the control should manipulate. */
+			key: string | number;
+			/**
+			 * Prevent interactivity and gray out the control.
+			 * @default `false`
+			 */
+			disabled?: boolean | undefined;
+			/**
+			 * Text displayed next to control.
+			 * @default `undefined`
+			 */
+			label?: string | undefined;
+			/**
+			 * Tweakpane's internal options object.
+			 *
+			 * See [`BindingParams`](https://tweakpane.github.io/docs/api/types/BindingParams.html).
+			 *
+			 * Valid types are contingent on the type of the value `key` points to in `object`.
+			 *
+			 * This is intended internal use, when implementing convenience components wrapping Binding's
+			 * functionality. Options of interest are instead exposed as top-level props in _Svelte
+			 * Tweakpane UI_.
+			 * @default `undefined`
+			 */
+			options?: GenericSliderOptions | 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
+			 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
+			 * this control.
+			 *
+			 * This is primarily for internal use, when implementing convenience components wrapping
+			 * Binding's functionality.
+			 * @bindable
+			 * @readonly
+			 */
+			ref?: GenericSliderRef | undefined;
+			/**
+			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+			 * the binding's containing `<Pane>`.
+			 *
+			 * This is primarily for internal use, when implementing convenience components wrapping
+			 * Binding's functionality in combination with a Tweakpane plugin.
+			 * @default `undefined`
+			 */
+			plugin?: import('tweakpane').TpPluginBundle | undefined;
+		},
+		'object' | 'key'
+	> & {
+		/**
+		 * The value to control.
+		 * @bindable
+		 */
+		value: T;
+	} & {
+		/**
+		 * Minimum value.
+		 *
+		 * Specifying both a `min` and a `max` prop turns the control into a slider.
+		 * @default `undefined`
+		 * */
+		min?: number | undefined;
+		/**
+		 * Maximum value.
+		 *
+		 * Specifying both a `min` and a `max` prop turns the control into a slider.
+		 * @default `undefined`
+		 * */
+		max?: number | undefined;
+		/**
+		 * A function to customize the point value's formatting (e.g. rounding, etc.).
+		 * @default `undefined`  \
+		 * Normal `.toString()` formatting.
+		 * */
+		format?: ((value: number) => string) | undefined;
+		/**
+		 * The unit scale for key-based input for all dimensions (e.g. the up and down arrow keys).
+		 * @default `1`  \
+		 * Or `stepValue` if defined.
+		 * */
+		keyScale?: number | undefined;
+		/**
+		 * The unit scale for pointer-based input for all dimensions.
+		 * @default `undefined`  \
+		 * [Dynamic based on magnitude of
+		 * `value`](https://github.com/cocopon/tweakpane/blob/66dfbea04bfe9b7f031673c955ceda1f92356e75/packages/core/src/common/number/util.ts#L54).
+		 * */
+		pointerScale?: number | undefined;
+		/**
+		 * The minimum step interval.
+		 * @default `undefined`  \
+		 * No step constraint.
+		 * */
+		step?: number | undefined;
+	};
+	events(): {} & {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots(): {};
+}
+export type GenericSliderProps<T extends number | IntervalSliderValue> = ReturnType<
+	__sveltets_Render<T>['props']
+>;
+export type GenericSliderEvents<T extends number | IntervalSliderValue> = ReturnType<
+	__sveltets_Render<T>['events']
+>;
+export type GenericSliderSlots<T extends number | IntervalSliderValue> = ReturnType<
+	__sveltets_Render<T>['slots']
+>;
+/**
+ * This component is for internal use only.
+ *
+ * Note that we go from a regular slider to a range / interval slider (via the essentials plugin) just
+ * by changing the input type For the sake of consistency and discoverability, `<IntervalSlider>` is
+ * implement as a separate component leveraging this generic implementation.
+ *
+ * @sourceLink
+ * [GenericSlider.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/GenericSlider.svelte)
+ */
+export default class GenericSlider<T extends number | IntervalSliderValue> extends SvelteComponent<
+	GenericSliderProps<T>,
+	GenericSliderEvents<T>,
+	GenericSliderSlots<T>
+> {}
+export {};

package/dist/internal/InternalMonitorBoolean.svelte

@@ -0,0 +1,17 @@
+<script context="module"></script>
+
+<script>
+	import ClsPad from './ClsPad.svelte';
+	import GenericMonitor from './GenericMonitor.svelte';
+	import { fillWith, rowsForMonitor } from '../utils';
+	import { BROWSER } from 'esm-env';
+	export let value;
+</script>
+
+<GenericMonitor {value} {...$$restProps} />
+{#if !BROWSER}
+	{@const totalRows = rowsForMonitor($$props.bufferSize, $$props.rows) - 1}
+	{#if totalRows > 0}
+		<ClsPad keysAdd={fillWith('containerUnitSize', totalRows)} theme={$$props.theme} />
+	{/if}
+{/if}

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

@@ -0,0 +1,154 @@
+import { SvelteComponent } from 'svelte';
+import type { BooleanMonitorParams } from '@tweakpane/core';
+export type InternalMonitorBooleanOptions = BooleanMonitorParams;
+declare const __propDef: {
+	props: Omit<
+		Omit<
+			{
+				/**
+				 * The binding's target object with values to manipulate.
+				 * @bindable
+				 */
+				object: import('@tweakpane/core').Bindable & {
+					[x: string]: boolean;
+				};
+				/** The key for the value in the target `object` that the control should manipulate. */
+				key: string | number;
+				/**
+				 * Prevent interactivity and gray out the control.
+				 * @default `false`
+				 */
+				disabled?: boolean | undefined;
+				/**
+				 * Text displayed next to control.
+				 * @default `undefined`
+				 */
+				label?: string | undefined;
+				/**
+				 * Tweakpane's internal options object.
+				 *
+				 * See [`BindingParams`](https://tweakpane.github.io/docs/api/types/BindingParams.html).
+				 *
+				 * Valid types are contingent on the type of the value `key` points to in `object`.
+				 *
+				 * This is intended internal use, when implementing convenience components wrapping Binding's
+				 * functionality. Options of interest are instead exposed as top-level props in _Svelte
+				 * Tweakpane UI_.
+				 * @default `undefined`
+				 */
+				options?: BooleanMonitorParams | 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
+				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
+				 * this control.
+				 *
+				 * This is primarily for internal use, when implementing convenience components wrapping
+				 * Binding's functionality.
+				 * @bindable
+				 * @readonly
+				 */
+				ref?: import('./GenericMonitor.svelte').GenericMonitorRef | undefined;
+				/**
+				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+				 * the binding's containing `<Pane>`.
+				 *
+				 * This is primarily for internal use, when implementing convenience components wrapping
+				 * Binding's functionality in combination with a Tweakpane plugin.
+				 * @default `undefined`
+				 */
+				plugin?: import('@tweakpane/core').TpPluginBundle | undefined;
+			},
+			'object' | 'key'
+		> & {
+			/**
+			 * A `boolean` value to monitor.
+			 */
+			value: boolean;
+		} & {
+			/**
+			 * Number of past states to retain.
+			 * @default `1`  \
+			 * Or `64` if value is `number` and `graph` is `true`.
+			 */
+			bufferSize?: number | undefined;
+			/**
+			 * Time between value samples in milliseconds.
+			 *
+			 * Useful when `graph` is true. Defaults to reactive value updates only (`interval={0}`).
+			 * @default `0`
+			 */
+			interval?: number | undefined;
+			/**
+			 * Number of visible rows of state history.
+			 *
+			 * If `bufferSize` is larger, then the value window will scroll once state history exceeds
+			 * row count.
+			 * @default `1`  \
+			 * Or `3` if value is `string` and `multiline` is `true`.
+			 */
+			rows?: number | undefined;
+		},
+		'options' | 'ref' | 'plugin' | 'interval'
+	> & {
+		/**
+		 * A `boolean` value to monitor.
+		 * */
+		value: boolean;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {};
+};
+export type InternalMonitorBooleanProps = typeof __propDef.props;
+export type InternalMonitorBooleanEvents = typeof __propDef.events;
+export type InternalMonitorBooleanSlots = typeof __propDef.slots;
+/**
+ * This component is for internal use only.
+ *
+ * Documentation retained in case of a return to the non-dynamic component approach.
+ *
+ * Wraps the Tweakpane [monitor binding](https://tweakpane.github.io/docs/monitor-bindings/)
+ * functionality for boolean values.
+ *
+ * Technically, any unbound value on a normal _Svelte Tweakpane UI_ component effectively acts as a
+ * monitor, but additional monitor-specific components are provided to expose additional view options
+ * (e.g. `rows`).
+ *
+ * Note that `interval` is not exposed because updates are driven by reactive changes in the `value`.
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the monitor in a `<Pane
+ * position='inline'>` component.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { InternalMonitorBoolean } from 'svelte-tweakpane-ui';
+ *
+ * let booleanToMonitor = false;
+ *
+ * setInterval(() => {
+ *   booleanToMonitor = Math.random() > 0.5;
+ * }, 100);
+ * </script>
+ *
+ * <InternalMonitorBoolean value={booleanToMonitor} bufferSize={5} rows={5} />
+ * ```
+ *
+ * @sourceLink
+ * [InternalMonitorBoolean.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/InternalMonitorBoolean.svelte)
+ */
+export default class InternalMonitorBoolean extends SvelteComponent<
+	InternalMonitorBooleanProps,
+	InternalMonitorBooleanEvents,
+	InternalMonitorBooleanSlots
+> {}
+export {};

package/dist/internal/InternalMonitorNumber.svelte

@@ -0,0 +1,31 @@
+<script context="module"></script>
+
+<script>
+	import ClsPad from './ClsPad.svelte';
+	import GenericMonitor from './GenericMonitor.svelte';
+	import { fillWith, rowsForMonitor } from '../utils.js';
+	import { BROWSER } from 'esm-env';
+	export let value;
+	export let graph = void 0;
+	export let format = void 0;
+	export let max = void 0;
+	export let min = void 0;
+	let options;
+	let formatProxy = format;
+	$: formatProxy !== format && (formatProxy = format);
+	$: options = {
+		min,
+		max,
+		format: formatProxy,
+		readonly: true,
+		view: graph ? 'graph' : void 0
+	};
+</script>
+
+<GenericMonitor {value} {options} {...$$restProps} />
+{#if !BROWSER}
+	{@const totalRows = rowsForMonitor($$props.bufferSize, $$props.rows, graph) - 1}
+	{#if totalRows > 0}
+		<ClsPad keysAdd={fillWith('containerUnitSize', totalRows)} theme={$$props.theme} />
+	{/if}
+{/if}

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

@@ -0,0 +1,178 @@
+import { SvelteComponent } from 'svelte';
+import type { NumberMonitorParams } from '@tweakpane/core';
+export type InternalMonitorNumberOptions = NumberMonitorParams;
+declare const __propDef: {
+	props: Omit<
+		Omit<
+			{
+				/**
+				 * The binding's target object with values to manipulate.
+				 * @bindable
+				 */
+				object: import('@tweakpane/core').Bindable & {
+					[x: string]: number;
+				};
+				/** The key for the value in the target `object` that the control should manipulate. */
+				key: string | number;
+				/**
+				 * Prevent interactivity and gray out the control.
+				 * @default `false`
+				 */
+				disabled?: boolean | undefined;
+				/**
+				 * Text displayed next to control.
+				 * @default `undefined`
+				 */
+				label?: string | undefined;
+				/**
+				 * Tweakpane's internal options object.
+				 *
+				 * See [`BindingParams`](https://tweakpane.github.io/docs/api/types/BindingParams.html).
+				 *
+				 * Valid types are contingent on the type of the value `key` points to in `object`.
+				 *
+				 * This is intended internal use, when implementing convenience components wrapping Binding's
+				 * functionality. Options of interest are instead exposed as top-level props in _Svelte
+				 * Tweakpane UI_.
+				 * @default `undefined`
+				 */
+				options?: NumberMonitorParams | 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
+				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
+				 * this control.
+				 *
+				 * This is primarily for internal use, when implementing convenience components wrapping
+				 * Binding's functionality.
+				 * @bindable
+				 * @readonly
+				 */
+				ref?: import('./GenericMonitor.svelte').GenericMonitorRef | undefined;
+				/**
+				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+				 * the binding's containing `<Pane>`.
+				 *
+				 * This is primarily for internal use, when implementing convenience components wrapping
+				 * Binding's functionality in combination with a Tweakpane plugin.
+				 * @default `undefined`
+				 */
+				plugin?: import('@tweakpane/core').TpPluginBundle | undefined;
+			},
+			'object' | 'key'
+		> & {
+			/**
+			 * A `number` value to monitor.
+			 */
+			value: number;
+		} & {
+			/**
+			 * Number of past states to retain.
+			 * @default `1`  \
+			 * Or `64` if value is `number` and `graph` is `true`.
+			 */
+			bufferSize?: number | undefined;
+			/**
+			 * Time between value samples in milliseconds.
+			 *
+			 * Useful when `graph` is true. Defaults to reactive value updates only (`interval={0}`).
+			 * @default `0`
+			 */
+			interval?: number | undefined;
+			/**
+			 * Number of visible rows of state history.
+			 *
+			 * If `bufferSize` is larger, then the value window will scroll once state history exceeds
+			 * row count.
+			 * @default `1`  \
+			 * Or `3` if value is `string` and `multiline` is `true`.
+			 */
+			rows?: number | undefined;
+		},
+		'options' | 'ref' | 'plugin'
+	> & {
+		/**
+		 * A `number` value to monitor.
+		 * */
+		value: number;
+		/**
+		 * Minimum bound when `graph` is true.
+		 * @default `0`
+		 */
+		min?: number | undefined;
+		/**
+		 * Maximum bound when `graph` is true.
+		 * @default `100`
+		 * */
+		max?: number | undefined;
+		/**
+		 * A function to customize the number's formatting (e.g. rounding, etc.).
+		 * @default `undefined`  \
+		 * Normal `.toString()` formatting.
+		 * */
+		format?: ((value: number) => string) | undefined;
+		/**
+		 * Display a graph of the value's changes over time.
+		 * @default `false`
+		 * */
+		graph?: boolean | undefined;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {};
+};
+export type InternalMonitorNumberProps = typeof __propDef.props;
+export type InternalMonitorNumberEvents = typeof __propDef.events;
+export type InternalMonitorNumberSlots = typeof __propDef.slots;
+/**
+ * This component is for internal use only.
+ *
+ * Documentation retained in case of a return to the non-dynamic component approach.
+ *
+ * Wraps the Tweakpane [monitor binding](https://tweakpane.github.io/docs/monitor-bindings/)
+ * functionality for number values.
+ *
+ * Technically, any unbound value on a normal _Svelte Tweakpane UI_ component effectively acts as a
+ * monitor, but additional monitor-specific components are provided to expose additional view options
+ * (e.g. `max` and `min`).
+ *
+ * Note that `interval` is exposed to allow separate control over the reactive value's update rate and
+ * the graph's update rate.
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the monitor in a `<Pane
+ * position='inline'>` component.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { InternalMonitorNumber } from 'svelte-tweakpane-ui';
+ *
+ * let numberToMonitor = 0;
+ * let t = 0;
+ *
+ * setInterval(() => {
+ *   numberToMonitor = Math.sin(t);
+ *   t += 0.3;
+ * }, 100);
+ * </script>
+ *
+ * <InternalMonitorNumber value={numberToMonitor} min={-1} max={1} graph={true} />
+ * ```
+ *
+ * @sourceLink
+ * [InternalMonitorNumber.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/InternalMonitorNumber.svelte)
+ */
+export default class InternalMonitorNumber extends SvelteComponent<
+	InternalMonitorNumberProps,
+	InternalMonitorNumberEvents,
+	InternalMonitorNumberSlots
+> {}
+export {};

package/dist/internal/InternalMonitorString.svelte

@@ -0,0 +1,23 @@
+<script context="module"></script>
+
+<script>
+	import ClsPad from './ClsPad.svelte';
+	import GenericMonitor from './GenericMonitor.svelte';
+	import { fillWith, rowsForMonitor } from '../utils';
+	import { BROWSER } from 'esm-env';
+	export let value;
+	export let multiline = void 0;
+	let options;
+	$: options = {
+		multiline,
+		readonly: true
+	};
+</script>
+
+<GenericMonitor {value} {options} {...$$restProps} />
+{#if !BROWSER}
+	{@const totalRows = rowsForMonitor($$props.bufferSize, $$props.rows, multiline) - 1}
+	{#if totalRows > 0}
+		<ClsPad keysAdd={fillWith('containerUnitSize', totalRows)} theme={$$props.theme} />
+	{/if}
+{/if}