svelte-tweakpane-ui 1.2.2 → 1.2.4

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

@@ -1,9 +1,191 @@
 import { SvelteComponent } from 'svelte';
 export type PanePosition = 'draggable' | 'fixed' | 'inline';
 declare const __propDef: {
-	props: (
-		| (Omit<
+	props: {
+		/**
+		 * Pane mode, one of three options:
+		 * - **'draggable'** *(default)*  \
+		 *   The pane is draggable and resizable, and may be placed anywhere over the page.
+		 * - **'inline'**  \
+		 *   The pane appears inline with other content in the normal flow of the document.  \
+		 *   This is the default mode for components created outside of an explicit `<Pane>`
+		 *   component.*
+		 * - **'fixed'** \
+		 *   Standard Tweakpane behavior where the pane is shown in a fixed position over the page.
+		 *
+		 *   Note that `<Pane>` is a dynamic component, and availability of additional props will
+		 *   vary depending on the defined `position` value.
+		 * @default `'draggable'`
+		 * */
+		position?: PanePosition | undefined;
+	} & (
+		| ({
+				/**
+				 * Pane mode, one of three options:
+				 * - **'draggable'** *(default)*  \
+				 *   The pane is draggable and resizable, and may be placed anywhere over the page.
+				 * - **'inline'**  \
+				 *   The pane appears inline with other content in the normal flow of the document.  \
+				 *   This is the default mode for components created outside of an explicit `<Pane>`
+				 *   component.*
+				 * - **'fixed'** \
+				 *   Standard Tweakpane behavior where the pane is shown in a fixed position over the page.
+				 *
+				 *   Note that `<Pane>` is a dynamic component, and availability of additional props will
+				 *   vary depending on the defined `position` value.
+				 * @default `'draggable'`
+				 */
+				position: 'fixed';
+		  } & {
+				/**
+				 * 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.)
+				 *
+				 * By default, this position is saved to local storage for persistence across page loads.
+				 * @default `0`
+				 * @bindable
+				 */
+				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.)
+				 *
+				 * By default, this position is saved to local storage for persistence across page loads.
+				 * @default `0`
+				 * @bindable
+				 */
+				y?: number | undefined;
+				/**
+				 * Width of the pane, in pixels.
+				 *
+				 * Setting explicitly via a passed prop will override saved user-specified width.
+				 *
+				 * Use this prop to set a starting width, or to monitor changes in the the pane's width when
+				 * a user resizes it.
+				 *
+				 * Note that height is not exposed because it is determined dynamically by the pane's
+				 * contents and state of its foldable elements.
+				 *
+				 * By default, the width value is saved to local storage for persistence across page loads.
+				 * @default `256`
+				 * @bindable
+				 */
+				width?: number | undefined;
+		  } & 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;
+						/**
+						 * 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;
+					},
+					'userCreatedPane'
+				>)
+		| ({
+				/**
+				 * Pane mode, one of three options:
+				 * - **'draggable'** *(default)*  \
+				 *   The pane is draggable and resizable, and may be placed anywhere over the page.
+				 * - **'inline'**  \
+				 *   The pane appears inline with other content in the normal flow of the document.  \
+				 *   This is the default mode for components created outside of an explicit `<Pane>`
+				 *   component.*
+				 * - **'fixed'** \
+				 *   Standard Tweakpane behavior where the pane is shown in a fixed position over the page.
+				 *
+				 *   Note that `<Pane>` is a dynamic component, and availability of additional props will
+				 *   vary depending on the defined `position` value.
+				 * @default `'draggable'`
+				 */
+				position: 'inline';
+		  } & Omit<
 				{
+					/**
+					 * Width of the pane, in pixels.
+					 *
+					 * Setting explicitly via a passed prop will override saved user-specified width.
+					 *
+					 * Use this prop to set a starting width, or to monitor changes in the the pane's width when
+					 * a user resizes it.
+					 *
+					 * Note that height is not exposed because it is determined dynamically by the pane's
+					 * contents and state of its foldable elements.
+					 *
+					 * By default, the width value is saved to local storage for persistence across page loads.
+					 * @default `256`
+					 * @bindable
+					 */
+					width?: number | undefined;
+				} & {
 					/**
 					 * Text in the pane's title bar.
 					 * @default `Tweakpane`  \
@@ -76,14 +258,34 @@ declare const __propDef: {
 					tpPane?: import('tweakpane').Pane | undefined;
 				},
 				'userCreatedPane'
-		  > & {
+		  >)
+		| ({
+				/**
+				 * Pane mode, one of three options:
+				 * - **'draggable'** *(default)*  \
+				 *   The pane is draggable and resizable, and may be placed anywhere over the page.
+				 * - **'inline'**  \
+				 *   The pane appears inline with other content in the normal flow of the document.  \
+				 *   This is the default mode for components created outside of an explicit `<Pane>`
+				 *   component.*
+				 * - **'fixed'** \
+				 *   Standard Tweakpane behavior where the pane is shown in a fixed position over the page.
+				 *
+				 *   Note that `<Pane>` is a dynamic component, and availability of additional props will
+				 *   vary depending on the defined `position` value.
+				 * @default `'draggable'`
+				 */
+				position?: 'draggable' | undefined;
+		  } & {
 				/**
 				 * 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.
+				 *
+				 * By default, this position is saved to local storage for persistence across page loads.
+				 * @default `0`
+				 * @bindable
 				 */
 				x?: number | undefined;
 				/**
@@ -91,8 +293,10 @@ declare const __propDef: {
 				 *
 				 * 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.
+				 *
+				 * By default, this position is saved to local storage for persistence across page loads.
+				 * @default `0`
+				 * @bindable
 				 */
 				y?: number | undefined;
 				/**
@@ -144,279 +348,95 @@ declare const __propDef: {
 				/**
 				 * 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;
-		  } & {
-				/**
-				 * Pane mode, one of three options:
-				 * - **'draggable'** *(default)*  \
-				 *   The pane is draggable and resizable, and may be placed anywhere over the page.
-				 * - **'inline'**  \
-				 *   The pane appears inline with other content in the normal flow of the document.  \
-				 *   This is the default mode for components created outside of an explicit `<Pane>`
-				 *   component.*
-				 * - **'fixed'** \
-				 *   Standard Tweakpane behavior where the pane is shown in a fixed position over the page.
-				 *
-				 *   Note that `<Pane>` is a dynamic component, and availability of additional props will
-				 *   vary depending on the defined `position` value.
-				 * @default `'draggable'`
-				 */
-				position?: 'draggable' | undefined;
-		  })
-		| (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;
-					/**
-					 * 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;
-				},
-				'userCreatedPane'
-		  > & {
-				/**
-				 * 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.
+				 * Setting explicitly via a passed prop will override saved user-specified width.
 				 *
-				 * 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.
+				 * Use this prop to set a starting width, or to monitor changes in the the pane's width when
+				 * a user resizes it.
 				 *
-				 * If undefined, the pane will fill the width of its container. (This behavior is unique to
-				 * `position="inline"`.)
+				 * Note that height is not exposed because it is determined dynamically by the pane's
+				 * contents and state of its foldable elements.
 				 *
-				 * 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`
+				 * By default, the width value is saved to local storage for persistence across page loads.
+				 * @default `256`
+				 * @bindable
 				 */
 				width?: number | undefined;
-		  } & {
-				/**
-				 * Pane mode, one of three options:
-				 * - **'draggable'** *(default)*  \
-				 *   The pane is draggable and resizable, and may be placed anywhere over the page.
-				 * - **'inline'**  \
-				 *   The pane appears inline with other content in the normal flow of the document.  \
-				 *   This is the default mode for components created outside of an explicit `<Pane>`
-				 *   component.*
-				 * - **'fixed'** \
-				 *   Standard Tweakpane behavior where the pane is shown in a fixed position over the page.
-				 *
-				 *   Note that `<Pane>` is a dynamic component, and availability of additional props will
-				 *   vary depending on the defined `position` value.
-				 * @default `'draggable'`
-				 */
-				position: 'fixed';
-		  })
-		| (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;
-					/**
-					 * 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.
-					 *
-					 * 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;
-				},
-				'userCreatedPane'
-		  > & {
-				/**
-				 * Pane mode, one of three options:
-				 * - **'draggable'** *(default)*  \
-				 *   The pane is draggable and resizable, and may be placed anywhere over the page.
-				 * - **'inline'**  \
-				 *   The pane appears inline with other content in the normal flow of the document.  \
-				 *   This is the default mode for components created outside of an explicit `<Pane>`
-				 *   component.*
-				 * - **'fixed'** \
-				 *   Standard Tweakpane behavior where the pane is shown in a fixed position over the page.
-				 *
-				 *   Note that `<Pane>` is a dynamic component, and availability of additional props will
-				 *   vary depending on the defined `position` value.
-				 * @default `'draggable'`
-				 */
-				position: 'inline';
-		  })
-	) & {
-		/**
-		 * Pane mode, one of three options:
-		 * - **'draggable'** *(default)*  \
-		 *   The pane is draggable and resizable, and may be placed anywhere over the page.
-		 * - **'inline'**  \
-		 *   The pane appears inline with other content in the normal flow of the document.  \
-		 *   This is the default mode for components created outside of an explicit `<Pane>`
-		 *   component.*
-		 * - **'fixed'** \
-		 *   Standard Tweakpane behavior where the pane is shown in a fixed position over the page.
-		 *
-		 *   Note that `<Pane>` is a dynamic component, and availability of additional props will
-		 *   vary depending on the defined `position` value.
-		 * @default `'draggable'`
-		 * */
-		position?: PanePosition | undefined;
-	};
+		  } & 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;
+						/**
+						 * 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;
+					},
+					'userCreatedPane'
+				>)
+	);
 	events: {
 		[evt: string]: CustomEvent<any>;
 	};

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

@@ -3,7 +3,13 @@ import type { ValueChangeEvent } from '../utils.js';
 export type AutoValueChangeEvent = ValueChangeEvent<boolean | number | object | string>;
 declare const __propDef: {
 	props: Omit<
-		Omit<
+		{
+			/**
+			 * The value to control.
+			 * @bindable
+			 */
+			value: string | number | boolean | object;
+		} & Omit<
 			{
 				/**
 				 * The binding's target object with values to manipulate.
@@ -72,13 +78,7 @@ declare const __propDef: {
 				plugin?: import('tweakpane').TpPluginBundle | undefined;
 			},
 			'object' | 'key'
-		> & {
-			/**
-			 * The value to control.
-			 * @bindable
-			 */
-			value: string | number | boolean | object;
-		},
+		>,
 		'ref' | 'options' | 'plugin'
 	>;
 	slots: {};