svelte-tweakpane-ui 1.1.4 → 1.2.0

package/dist/core/Blade.svelte.d.ts

@@ -25,17 +25,23 @@ declare class __sveltets_Render<U extends BladeOptions, V extends BladeRef> {
 		 * 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.
+		 * This property is exposed for advanced use cases only, such as when implementing convenience
+		 * components wrapping `<Blade>`'s functionality.
+		 *
+		 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+		 *
 		 * @bindable
 		 * @readonly
 		 * */ ref?: V | undefined;
 		/**
-		 * Imported Tweakpane `TpPluginBundle` (Aliased as `Plugin`) module to register before creating
-		 * the blade.
+		 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+		 * the `<Blade>`'s containing `<Pane>`.
+		 *
+		 * This property is exposed for advanced use cases only, such as when implementing convenience
+		 * components wrapping `<Blade>`'s functionality in combination with a Tweakpane plugin.
+		 *
+		 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 		 *
-		 * 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;
 	};
@@ -77,7 +83,11 @@ export type BladeSlots<U extends BladeOptions, V extends BladeRef> = ReturnType<
  * import { Blade } from 'svelte-tweakpane-ui';
  * </script>
  *
- * <Blade options={{ view: 'separator' }} />
+ * <Blade
+ * options={{
+ *   view: 'separator'
+ * }}
+ * />
  * ```
  *
  * @sourceLink

package/dist/core/Pane.svelte

@@ -10,6 +10,7 @@
 	export let expanded = void 0;
 	export let position = void 0;
 	export let width = void 0;
+	export let tpPane = void 0;
 	export let x = void 0;
 	export let y = void 0;
 	beforeUpdate(() => {
@@ -26,7 +27,7 @@
 -->
 {#if position === undefined || position === 'draggable'}
 	{#if BROWSER}
-		<InternalPaneDraggable bind:expanded bind:width bind:x bind:y {...$$restProps}>
+		<InternalPaneDraggable bind:expanded bind:tpPane bind:width bind:x bind:y {...$$restProps}>
 			<slot />
 		</InternalPaneDraggable>
 	{:else}
@@ -35,12 +36,17 @@
 		</div>
 	{/if}
 {:else if position === 'inline'}
-	<InternalPaneInline bind:expanded {width} {...removeKeys($$restProps, 'storePositionLocally')}>
+	<InternalPaneInline
+		bind:expanded
+		bind:tpPane
+		{width}
+		{...removeKeys($$restProps, 'storePositionLocally')}
+	>
 		<slot />
 	</InternalPaneInline>
 {:else if position === 'fixed'}
 	{#if BROWSER}
-		<InternalPaneFixed bind:expanded bind:x bind:y {width} {...$$restProps}>
+		<InternalPaneFixed bind:expanded bind:tpPane bind:x bind:y {width} {...$$restProps}>
 			<slot />
 		</InternalPaneFixed>
 	{:else}

package/dist/core/Pane.svelte.d.ts

@@ -60,12 +60,22 @@ declare const __propDef: {
 					/** Internal use only. */
 					userCreatedPane?: boolean | undefined;
 					/**
-					 * Internal use only.
+					 * The internal Tweakpane [`Pane`](https://tweakpane.github.io/docs/api/classes/Pane.html) object.
+					 *
+					 * This property is exposed for advanced use cases only.
+					 *
+					 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+					 *
+					 * Note that the `Pane` type for this property comes from the core Tweakpane library.
+					 * Creating an alias is suggested to avoid confusion with the _Svelte Tweakpane UI_ `Pane`
+					 * component: e.g. `import { type Pane as TpPane } from 'tweakpane'`
+					 *
+					 * @bindable
 					 * @readonly
 					 */
-					paneRef?: import('tweakpane').Pane | undefined;
+					tpPane?: import('tweakpane').Pane | undefined;
 				},
-				'userCreatedPane' | 'paneRef'
+				'userCreatedPane'
 		  > & {
 				/**
 				 * Horizontal position of the pane relative to the left edge of the window, in pixels.
@@ -219,12 +229,22 @@ declare const __propDef: {
 					/** Internal use only. */
 					userCreatedPane?: boolean | undefined;
 					/**
-					 * Internal use only.
+					 * The internal Tweakpane [`Pane`](https://tweakpane.github.io/docs/api/classes/Pane.html) object.
+					 *
+					 * This property is exposed for advanced use cases only.
+					 *
+					 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+					 *
+					 * Note that the `Pane` type for this property comes from the core Tweakpane library.
+					 * Creating an alias is suggested to avoid confusion with the _Svelte Tweakpane UI_ `Pane`
+					 * component: e.g. `import { type Pane as TpPane } from 'tweakpane'`
+					 *
+					 * @bindable
 					 * @readonly
 					 */
-					paneRef?: import('tweakpane').Pane | undefined;
+					tpPane?: import('tweakpane').Pane | undefined;
 				},
-				'userCreatedPane' | 'paneRef'
+				'userCreatedPane'
 		  > & {
 				/**
 				 * Horizontal position of the pane relative to the left edge of the window, in pixels.
@@ -275,71 +295,78 @@ declare const __propDef: {
 				position: 'fixed';
 		  })
 		| (Omit<
-				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?: import('tweakpane').Pane | undefined;
-					},
-					'paneRef'
-				> & {
+				{
+					/**
+					 * 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;
+					/**
+					 * The internal Tweakpane [`Pane`](https://tweakpane.github.io/docs/api/classes/Pane.html) object.
+					 *
+					 * This property is exposed for advanced use cases only.
+					 *
+					 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+					 *
+					 * Note that the `Pane` type for this property comes from the core Tweakpane library.
+					 * Creating an alias is suggested to avoid confusion with the _Svelte Tweakpane UI_ `Pane`
+					 * component: e.g. `import { type Pane as TpPane } from 'tweakpane'`
+					 *
+					 * @bindable
+					 * @readonly
+					 */
+					tpPane?: import('tweakpane').Pane | undefined;
+				} & {
 					/**
 					 * Width of the pane, in pixels.
 					 *

package/dist/core/Separator.svelte.d.ts

@@ -28,18 +28,24 @@ declare const __propDef: {
 			 * 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.
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Blade>`'s functionality.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+			 *
 			 * @bindable
 			 * @readonly
 			 */
 			ref?: SeparatorBladeRef | undefined;
 			/**
-			 * Imported Tweakpane `TpPluginBundle` (Aliased as `Plugin`) module to register before creating
-			 * the blade.
+			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+			 * the `<Blade>`'s containing `<Pane>`.
+			 *
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Blade>`'s functionality in combination with a Tweakpane plugin.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 			 *
-			 * 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;

package/dist/extra/AutoObject.svelte

@@ -1,3 +1,5 @@
+<script context="module"></script>
+
 <script>
 	import { isColorObject } from '@tweakpane/core';
 	import { Point2d } from '@tweakpane/core/dist/input-binding/point-2d/model/point-2d.js';
@@ -7,10 +9,12 @@
 	import Binding from '../core/Binding.svelte';
 	import Folder from '../core/Folder.svelte';
 	import InternalPaneInline from '../internal/InternalPaneInline.svelte';
-	import { getContext } from 'svelte';
+	import copy from 'fast-copy';
+	import { createEventDispatcher, getContext } from 'svelte';
 	export let theme = void 0;
 	export let prettyLabels = true;
 	export let object;
+	const dispatch = createEventDispatcher();
 	const parentStore = getContext('parentStore');
 	function isPointObject(testObject) {
 		return (
@@ -25,22 +29,41 @@
 			.toLowerCase()
 			.replaceAll(/\b[a-z]/g, (letter) => letter.toUpperCase());
 	}
+	function changeEventAggregator(event) {
+		dispatch('change', {
+			value: copy(object),
+			origin: event.detail.origin
+		});
+	}
 </script>
 
 {#if parentStore}
 	{#each Object.keys(object) as key (key)}
 		{#if object[key].constructor === Object && !isColorObject(object[key]) && !isPointObject(object[key])}
 			<Folder title={prettify(key, prettyLabels)}>
-				<svelte:self bind:object={object[key]} bind:prettyLabels />
+				<svelte:self
+					bind:object={object[key]}
+					bind:prettyLabels
+					on:change={changeEventAggregator}
+				/>
 			</Folder>
 		{:else if typeof object[key] === 'string'}
-			<Text bind:value={object[key]} label={prettify(key, prettyLabels)} />
+			<Text
+				bind:value={object[key]}
+				on:change={changeEventAggregator}
+				label={prettify(key, prettyLabels)}
+			/>
 		{:else}
-			<Binding bind:object {key} label={prettify(key, prettyLabels)} />
+			<Binding
+				bind:object
+				on:change={changeEventAggregator}
+				{key}
+				label={prettify(key, prettyLabels)}
+			/>
 		{/if}
 	{/each}
 {:else}
 	<InternalPaneInline {theme} userCreatedPane={false}>
-		<svelte:self bind:object bind:prettyLabels />
+		<svelte:self bind:object bind:prettyLabels on:change={changeEventAggregator} />
 	</InternalPaneInline>
 {/if}

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

@@ -1,6 +1,7 @@
 import { SvelteComponent } from 'svelte';
+import type { BindingObject, ValueChangeEvent } from '../utils.js';
+export type AutoObjectChangeEvent = ValueChangeEvent<BindingObject>;
 import type { Theme } from '../theme.js';
-import type { BindingObject } from '../utils.js';
 declare const __propDef: {
 	props: {
 		/**
@@ -22,10 +23,21 @@ declare const __propDef: {
 		 * @bindable
 		 * */ object: BindingObject;
 	};
+	slots: {};
 	events: {
-		[evt: string]: CustomEvent<any>;
+		/**
+		 * Fires when a value in the `object` changes.
+		 *
+		 * _This event is provided for advanced use cases. It's usually preferred to bind to the `object` prop instead._
+		 *
+		 * 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 `object` (`external`).
+		 *
+		 * @extends ValueChangeEvent
+		 * @event
+		 * */
+		change: AutoObjectChangeEvent;
 	};
-	slots: {};
 };
 export type AutoObjectProps = typeof __propDef.props;
 export type AutoObjectEvents = typeof __propDef.events;
@@ -59,6 +71,8 @@ export type AutoObjectSlots = typeof __propDef.slots;
  *
  * Plugin component behavior is not available in `<AutoObject>`.
  *
+ * @emits {AutoObjectChangeEvent} change - When `object` changes. (This event is provided for advanced use cases. Prefer binding to `object`.)
+ *
  * @example
  * ```svelte
  * <script lang="ts">

package/dist/extra/AutoValue.svelte

@@ -1,3 +1,5 @@
+<script context="module"></script>
+
 <script>
 	import Text from '../control/Text.svelte';
 	import GenericBinding from '../internal/GenericBinding.svelte';
@@ -5,7 +7,7 @@
 </script>
 
 {#if typeof value === 'string'}
-	<Text bind:value {...$$restProps} />
+	<Text bind:value on:change {...$$restProps} />
 {:else}
-	<GenericBinding bind:value {...$$restProps} />
+	<GenericBinding bind:value on:change {...$$restProps} />
 {/if}

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

@@ -1,4 +1,6 @@
 import { SvelteComponent } from 'svelte';
+import type { ValueChangeEvent } from '../utils.js';
+export type AutoValueChangeEvent = ValueChangeEvent<boolean | number | object | string>;
 declare const __propDef: {
 	props: Omit<
 		Omit<
@@ -47,18 +49,24 @@ declare const __propDef: {
 				 * [`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.
+				 * 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('..').BindingRef | undefined;
 				/**
 				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-				 * the binding's containing `<Pane>`.
+				 * 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.
 				 *
-				 * 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;
@@ -73,10 +81,21 @@ declare const __propDef: {
 		},
 		'ref' | 'options' | 'plugin'
 	>;
+	slots: {};
 	events: {
-		[evt: string]: CustomEvent<any>;
+		/**
+		 * Fires when `value` changes.
+		 *
+		 * _This event is provided for advanced use cases. It's usually preferred to bind to the `value` prop instead._
+		 *
+		 * 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: AutoValueChangeEvent;
 	};
-	slots: {};
 };
 export type AutoValueProps = typeof __propDef.props;
 export type AutoValueEvents = typeof __propDef.events;
@@ -89,14 +108,15 @@ export type AutoValueSlots = typeof __propDef.slots;
  * This component is intended for quick tests where you don't want to fuss with component selection or
  * customization.
  *
- * See `<AutoObject>` for a variation that works directly on a stand-alone value that isn't wrapped in
- * an object.
+ * See `<AutoObject>` for a variation that creates controls for multiple values in an object.
  *
  * The value is generally mapped to controls according to the logic outlined in the [Tweakpane input
  * binding documentation](https://tweakpane.github.io/docs/input-bindings/).
  *
  * Plugin component behavior is not available in `<AutoValue>`.
  *
+ * @emits {AutoValueChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
+ *
  * @example
  * ```svelte
  * <script lang="ts">

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

@@ -25,18 +25,24 @@ declare const __propDef: {
 			 * 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.
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Blade>`'s functionality.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+			 *
 			 * @bindable
 			 * @readonly
 			 */
 			ref?: BladeRef | undefined;
 			/**
-			 * Imported Tweakpane `TpPluginBundle` (Aliased as `Plugin`) module to register before creating
-			 * the blade.
+			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+			 * the `<Blade>`'s containing `<Pane>`.
+			 *
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Blade>`'s functionality in combination with a Tweakpane plugin.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 			 *
-			 * 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;
@@ -91,7 +97,7 @@ export type ElementSlots = typeof __propDef.slots;
  * 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
+ * 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.
  *

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 export { type ButtonClickEvent, default as Button } from './control/Button.svelte';
 export { type ButtonGridClickEvent, default as ButtonGrid } from './control/ButtonGrid.svelte';
-export { default as Checkbox } from './control/Checkbox.svelte';
+export { type CheckboxChangeEvent, default as Checkbox } from './control/Checkbox.svelte';
 export {
+	type ColorChangeEvent,
 	type ColorValue,
 	type ColorValueRgbObject,
 	type ColorValueRgbTuple,
@@ -11,19 +12,22 @@ export {
 	default as Color
 } from './control/Color.svelte';
 export {
+	type CubicBezierChangeEvent,
 	type CubicBezierValue,
 	type CubicBezierValueObject,
 	type CubicBezierValueTuple,
 	default as CubicBezier
 } from './control/CubicBezier.svelte';
-export { type ImageValue, default as Image } from './control/Image.svelte';
+export { type ImageChangeEvent, type ImageValue, default as Image } from './control/Image.svelte';
 export {
+	type IntervalSliderChangeEvent,
 	type IntervalSliderValue,
 	type IntervalSliderValueObject,
 	type IntervalSliderValueTuple,
 	default as IntervalSlider
 } from './control/IntervalSlider.svelte';
 export {
+	type ListChangeEvent,
 	type ListOptions,
 	type ListOptionsArray,
 	type ListOptionsObjectArray,
@@ -31,6 +35,7 @@ export {
 	default as List
 } from './control/List.svelte';
 export {
+	type PointChangeEvent,
 	type PointOptions,
 	type PointValue2d,
 	type PointValue2dObject,
@@ -43,9 +48,15 @@ export {
 	type PointValue4dTuple,
 	default as Point
 } from './control/Point.svelte';
-export { default as RadioGrid } from './control/RadioGrid.svelte';
-export { type RingSeries, type RingUnit, default as Ring } from './control/Ring.svelte';
+export { type RadioGridChangeEvent, default as RadioGrid } from './control/RadioGrid.svelte';
 export {
+	type RingChangeEvent,
+	type RingSeries,
+	type RingUnit,
+	default as Ring
+} from './control/Ring.svelte';
+export {
+	type RotationEulerChangeEvent,
 	type RotationEulerOptions,
 	type RotationEulerOrder,
 	type RotationEulerUnit,
@@ -55,25 +66,31 @@ export {
 	default as RotationEuler
 } from './control/RotationEuler.svelte';
 export {
+	type RotationQuaternionChangeEvent,
 	type RotationQuaternionOptions,
 	type RotationQuaternionValue,
 	type RotationQuaternionValueObject,
 	type RotationQuaternionValueTuple,
 	default as RotationQuaternion
 } from './control/RotationQuaternion.svelte';
-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';
-export { type BindingOptions, type BindingRef, default as Binding } from './core/Binding.svelte';
+export { type SliderChangeEvent, default as Slider } from './control/Slider.svelte';
+export { type TextChangeEvent, default as Text } from './control/Text.svelte';
+export { type TextareaChangeEvent, default as Textarea } from './control/Textarea.svelte';
+export { type WheelChangeEvent, default as Wheel } from './control/Wheel.svelte';
+export {
+	type BindingChangeEvent,
+	type BindingOptions,
+	type BindingRef,
+	default as Binding
+} from './core/Binding.svelte';
 export { type BladeOptions, type BladeRef, default as Blade } from './core/Blade.svelte';
 export { default as Folder } from './core/Folder.svelte';
 export { type PanePosition, 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';
-export { default as AutoObject } from './extra/AutoObject.svelte';
-export { default as AutoValue } from './extra/AutoValue.svelte';
+export { type AutoObjectChangeEvent, default as AutoObject } from './extra/AutoObject.svelte';
+export { type AutoValueChangeEvent, default as AutoValue } from './extra/AutoValue.svelte';
 export { default as Element } from './extra/Element.svelte';
 export { type FpsGraphChangeEvent, default as FpsGraph } from './monitor/FpsGraph.svelte';
 export { default as Monitor } from './monitor/Monitor.svelte';
@@ -90,5 +107,5 @@ export {
 } from './monitor/WaveformMonitor.svelte';
 export type { Theme, ThemeColorValue } from './theme.js';
 export { default as ThemeUtils } from './theme.js';
-export type { BindingObject, Plugin } from './utils.js';
+export type { BindingObject, Plugin, ValueChangeEvent } from './utils.js';
 export { default as Utils } from './utils.js';