svelte-tweakpane-ui 1.6.0-preview.3 → 1.6.0-preview.5

package/dist/control/Button.svelte

@@ -1,11 +1,11 @@
 <script context="module"></script>
 
 <script>
+	import { BROWSER } from 'esm-env'
+	import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte'
 	import ClsPad from '../internal/ClsPad.svelte'
 	import InternalPaneInline from '../internal/InternalPaneInline.svelte'
 	import { getElementIndex, isRootPane } from '../utils.js'
-	import { BROWSER } from 'esm-env'
-	import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte'
 	export let title = 'Button'
 	export let label = void 0
 	export let disabled = false
@@ -18,13 +18,13 @@
 	let index
 	function create() {
 		if (button) button.dispose()
-		button = $parentStore.addButton({
+		button = $parentStore?.addButton({
 			disabled,
 			index,
 			label,
 			title,
 		})
-		button.on('click', () => {
+		button?.on('click', () => {
 			dispatch('click')
 		})
 	}
@@ -40,7 +40,7 @@
 	$: button && (button.disabled = disabled)
 	$: theme &&
 		$parentStore &&
-		(userCreatedPane || !isRootPane($parentStore)) &&
+		(userCreatedPane ?? !isRootPane($parentStore)) &&
 		console.warn(
 			'Set theme on the <Pane> component, not on its children! (Check nested <Button> components for a theme prop.)',
 		)

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

@@ -6,29 +6,29 @@ declare const __propDef: {
 		/**
 		 * Text inside of the button.
 		 * @default `'Button'`
-		 * */ title?: string
+		 */ title?: string
 		/**
 		 * Text displayed next to the button.
 		 * @default `undefined`
-		 * */ label?: string | undefined
+		 */ label?: string | undefined
 		/**
 		 * 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?: Theme | undefined
+		 */ theme?: Theme | undefined
 	}
 	slots: {}
 	events: {
 		/**
 		 * Fires when the button is clicked.
 		 * @event
-		 * */
+		 */
 		click: ButtonClickEvent
 	}
 }

package/dist/control/ButtonGrid.svelte

@@ -1,13 +1,13 @@
 <script context="module"></script>
 
 <script>
-	import Blade from '../core/Blade.svelte'
-	import ClsPad from '../internal/ClsPad.svelte'
-	import { fillWith } from '../utils'
-	import { getGridDimensions } from '../utils.js'
 	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-essentials'
 	import { BROWSER } from 'esm-env'
 	import { createEventDispatcher } from 'svelte'
+	import Blade from '../core/Blade.svelte'
+	import ClsPad from '../internal/ClsPad.svelte'
+	import { fillWith } from '../utils.js'
+	import { getGridDimensions } from '../utils.js'
 	export let columns = void 0
 	export let rows = void 0
 	export let buttons = []
@@ -20,7 +20,7 @@
 		const index = y * gridDimensions.columns + x
 		if (index >= 0 && index < buttons.length) {
 			return {
-				title: `${buttons[index]}`,
+				title: buttons[index],
 			}
 		}
 		return { title: '' }

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

@@ -10,35 +10,7 @@ export type ButtonGridClickEvent = CustomEvent<{
 import type { ButtonGridApi as ButtonGridRef } from '@kitschpatrol/tweakpane-plugin-essentials'
 import type { ButtonGridBladeParams as ButtonGridOptions } from '@kitschpatrol/tweakpane-plugin-essentials/dist/types/button-grid/plugin.d.ts'
 declare const __propDef: {
-	props: {
-		/**
-		 * Array of names, each of which will become the title of a button in the grid.
-		 * */
-		buttons: string[]
-		/**
-		 * Number of columns to arrange the buttons into.
-		 *
-		 * Setting `columns` without setting `rows` will lock the column count and allow the row
-		 * count to change dynamically based on the number of buttons.
-		 * @default `undefined`  \
-		 * Dynamic based on quantity of `buttons`.
-		 * */
-		columns?: number
-		/**
-		 * Text displayed next to the button grid.
-		 * @default `undefined`
-		 */
-		label?: string
-		/**
-		 * Number of rows to arrange the buttons into.
-		 *
-		 * Setting `rows` without setting `columns` will lock the column count and allow the column
-		 * count to change dynamically based on the number of buttons.
-		 * @default `undefined`  \
-		 * Dynamic based on quantity of `buttons`.
-		 * */
-		rows?: number
-	} & Omit<
+	props: Omit<
 		{
 			/**
 			 * Blade configuration exposing Tweakpane's internal
@@ -66,7 +38,6 @@ declare const __propDef: {
 			 * components wrapping `<Blade>`'s functionality.
 			 *
 			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
-			 *
 			 * @bindable
 			 * @readonly
 			 */
@@ -79,13 +50,40 @@ declare const __propDef: {
 			 * components wrapping `<Blade>`'s functionality in combination with a Tweakpane plugin.
 			 *
 			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
-			 *
 			 * @default `undefined`
 			 */
-			plugin?: import('../utils').Plugin | undefined
+			plugin?: import('../utils.js').Plugin | undefined
 		},
 		'ref' | 'options' | 'plugin'
-	>
+	> & {
+		/**
+		 * Array of names, each of which will become the title of a button in the grid.
+		 */
+		buttons: string[]
+		/**
+		 * Number of columns to arrange the buttons into.
+		 *
+		 * Setting `columns` without setting `rows` will lock the column count and allow the row
+		 * count to change dynamically based on the number of buttons.
+		 * @default `undefined`  \
+		 * Dynamic based on quantity of `buttons`.
+		 */
+		columns?: number
+		/**
+		 * Text displayed next to the button grid.
+		 * @default `undefined`
+		 */
+		label?: string
+		/**
+		 * Number of rows to arrange the buttons into.
+		 *
+		 * Setting `rows` without setting `columns` will lock the column count and allow the column
+		 * count to change dynamically based on the number of buttons.
+		 * @default `undefined`  \
+		 * Dynamic based on quantity of `buttons`.
+		 */
+		rows?: number
+	}
 	slots: {}
 	events: {
 		/**
@@ -94,7 +92,7 @@ declare const __propDef: {
 		 * Note that the values described in the `ButtonGridClickEvent` type are available on the
 		 * `event.detail` parameter.
 		 * @event
-		 * */
+		 */
 		click: ButtonGridClickEvent
 	}
 }

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

@@ -3,13 +3,7 @@ import type { ValueChangeEvent } from '../utils.js'
 export type CheckboxChangeEvent = ValueChangeEvent<boolean>
 declare const __propDef: {
 	props: Omit<
-		{
-			/**
-			 * The value to control.
-			 * @bindable
-			 */
-			value: boolean
-		} & Omit<
+		Omit<
 			{
 				/**
 				 * The binding's target object with values to manipulate.
@@ -43,7 +37,6 @@ declare const __propDef: {
 				options?: import('@tweakpane/core').BaseInputParams | undefined
 				/**
 				 * Custom color scheme.
-				 *
 				 * @default `undefined`  \
 				 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
 				 * set with `setGlobalDefaultTheme()`.
@@ -58,7 +51,6 @@ declare const __propDef: {
 				 * components wrapping `<Binding>`'s functionality.
 				 *
 				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
-				 *
 				 * @bindable
 				 * @readonly
 				 */
@@ -71,13 +63,18 @@ declare const __propDef: {
 				 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
 				 *
 				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
-				 *
 				 * @default `undefined`
 				 */
 				plugin?: import('../utils.js').Plugin | undefined
 			},
 			'object' | 'key'
-		>,
+		> & {
+			/**
+			 * The value to control.
+			 * @bindable
+			 */
+			value: boolean
+		},
 		'ref' | 'options' | 'plugin'
 	>
 	slots: {}
@@ -89,10 +86,9 @@ declare const __propDef: {
 		 *
 		 * The `event.details` payload includes a copy of the value and an `origin` field to distinguish between user-interactive changes (`internal`)
 		 * and changes resulting from programmatic manipulation of the `value` (`external`).
-		 *
 		 * @extends ValueChangeEvent
 		 * @event
-		 * */
+		 */
 		change: CheckboxChangeEvent
 	}
 }

package/dist/control/Color.svelte

@@ -1,13 +1,12 @@
 <script context="module"></script>
 
 <script>
-	import ClsPad from '../internal/ClsPad.svelte'
-	import GenericInputFolding from '../internal/GenericInputFolding.svelte'
-	import { objectToTuple } from '../utils'
-	import { fillWith } from '../utils'
 	import { isColorObject, isRgbaColorObject, isRgbColorObject } from '@tweakpane/core'
 	import { BROWSER } from 'esm-env'
 	import { shallowEqual } from 'fast-equals'
+	import ClsPad from '../internal/ClsPad.svelte'
+	import GenericInputFolding from '../internal/GenericInputFolding.svelte'
+	import { fillWith, objectToTuple } from '../utils.js'
 	export let value
 	export let expanded = void 0
 	export let type = void 0

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

@@ -1,10 +1,9 @@
 import { SvelteComponent } from 'svelte'
-import type { Simplify } from '../utils'
-import type { ValueChangeEvent } from '../utils.js'
 import type {
 	RgbaColorObject,
 	RgbColorObject,
 } from '@tweakpane/core/dist/input-binding/color/model/color.js'
+import type { Simplify, ValueChangeEvent } from '../utils.js'
 export type ColorValueRgbTuple = [r: number, g: number, b: number]
 export type ColorValueRgbaTuple = [r: number, g: number, b: number, a: number]
 export type ColorValueRgbObject = Simplify<RgbColorObject>
@@ -20,22 +19,82 @@ export type ColorValue = Simplify<
 export type ColorChangeEvent = ValueChangeEvent<ColorValue>
 import type { ColorInputParams as ColorOptions } from 'tweakpane'
 declare const __propDef: {
-	props: {
-		/**
-		 * A color value to control.
-		 *
-		 * Use either a color-like string (e.g. #ff00ff), or an object with `r`, `b`, `g`, and
-		 * optional `a` keys.
-		 * @bindable
-		 * */
-		value: ColorValue
-		/**
-		 * Whether to treat values as floats from 0.0 to 1.0, or integers from 0 to 255.
-		 * @default `'int'`
-		 * */
-		type?: 'float' | 'int'
-	} & Omit<
-		{
+	props: Omit<
+		Omit<
+			{
+				/**
+				 * The binding's target object with values to manipulate.
+				 * @bindable
+				 */
+				object: import('@tweakpane/core').Bindable & Record<string, ColorValue>
+				/** The key for the value in the target `object` that the control should manipulate. */
+				key: string
+				/**
+				 * Prevent interactivity and gray out the control.
+				 * @default `false`
+				 */
+				disabled?: boolean
+				/**
+				 * 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?: ColorOptions | 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 property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+				 * @bindable
+				 * @readonly
+				 */
+				ref?: import('../internal/GenericInput.svelte').GenericInputRef | undefined
+				/**
+				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+				 * the `<Binding>`'s containing `<Pane>`.
+				 *
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+				 * @default `undefined`
+				 */
+				plugin?: import('../utils.js').Plugin | undefined
+			},
+			'object' | 'key'
+		> & {
+			/**
+			 * A color value to control.
+			 *
+			 * Use either a color-like string (e.g. #ff00ff), or an object with `r`, `b`, `g`, and
+			 * optional `a` keys.
+			 * @bindable
+			 */
+			value: ColorValue
+		} & {
 			/**
 			 * DOM class name of the button used to expand and collapse the input's picker.
 			 * @default `undefined`
@@ -57,86 +116,23 @@ declare const __propDef: {
 			 * @default `true`
 			 */
 			userExpandable?: boolean
-		} & {
-			/**
-			 * A color value to control.
-			 *
-			 * Use either a color-like string (e.g. #ff00ff), or an object with `r`, `b`, `g`, and
-			 * optional `a` keys.
-			 * @bindable
-			 */
-			value: ColorValue
-		} & Omit<
-				{
-					/**
-					 * The binding's target object with values to manipulate.
-					 * @bindable
-					 */
-					object: import('@tweakpane/core').Bindable & Record<string, ColorValue>
-					/** The key for the value in the target `object` that the control should manipulate. */
-					key: string
-					/**
-					 * Prevent interactivity and gray out the control.
-					 * @default `false`
-					 */
-					disabled?: boolean
-					/**
-					 * 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?: ColorOptions | 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 property is exposed for advanced use cases only, such as when implementing convenience
-					 * components wrapping `<Binding>`'s functionality.
-					 *
-					 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
-					 *
-					 * @bindable
-					 * @readonly
-					 */
-					ref?: import('../internal/GenericInput.svelte').GenericInputRef | undefined
-					/**
-					 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-					 * the `<Binding>`'s containing `<Pane>`.
-					 *
-					 * This property is exposed for advanced use cases only, such as when implementing convenience
-					 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
-					 *
-					 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
-					 *
-					 * @default `undefined`
-					 */
-					plugin?: import('../utils').Plugin | undefined
-				},
-				'object' | 'key'
-			>,
+		},
 		'ref' | 'options' | 'plugin' | 'buttonClass'
-	>
+	> & {
+		/**
+		 * A color value to control.
+		 *
+		 * Use either a color-like string (e.g. #ff00ff), or an object with `r`, `b`, `g`, and
+		 * optional `a` keys.
+		 * @bindable
+		 */
+		value: ColorValue
+		/**
+		 * Whether to treat values as floats from 0.0 to 1.0, or integers from 0 to 255.
+		 * @default `'int'`
+		 */
+		type?: 'float' | 'int'
+	}
 	slots: {}
 	events: {
 		/**
@@ -146,10 +142,9 @@ declare const __propDef: {
 		 *
 		 * The `event.details` payload includes a copy of the value and an `origin` field to distinguish between user-interactive changes (`internal`)
 		 * and changes resulting from programmatic manipulation of the `value` (`external`).
-		 *
 		 * @extends ValueChangeEvent
 		 * @event
-		 * */
+		 */
 		change: ColorChangeEvent
 	}
 }

package/dist/control/ColorPlus.svelte

@@ -1,12 +1,12 @@
 <script context="module"></script>
 
 <script>
+	import { BROWSER } from 'esm-env'
 	import * as pluginModule from 'tweakpane-plugin-color-plus/lite'
 	import { ColorPlusModel } from 'tweakpane-plugin-color-plus/lite'
 	import ClsPad from '../internal/ClsPad.svelte'
 	import GenericInputFolding from '../internal/GenericInputFolding.svelte'
-	import { fillWith } from '../utils'
-	import { BROWSER } from 'esm-env'
+	import { fillWith } from '../utils.js'
 	export let value
 	export let expanded = void 0
 	export let type = void 0