svelte-tweakpane-ui 1.0.0

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

@@ -0,0 +1,149 @@
+import { SvelteComponent } from 'svelte';
+import type { TextareaPluginInputParams } from '@kitschpatrol/tweakpane-textarea-plugin/dist/types/plugin.js';
+import { type GenericInputRef } from '../internal/GenericInput.svelte';
+declare const __propDef: {
+	props: Omit<
+		Omit<
+			{
+				/**
+				 * The binding's target object with values to manipulate.
+				 * @bindable
+				 */
+				object: import('@tweakpane/core').Bindable & {
+					[x: string]: string;
+				};
+				/** 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?: TextareaPluginInputParams | 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?: GenericInputRef | 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'
+		> & {
+			/**
+			 * A `string` value to control.
+			 * @bindable
+			 */
+			value: string;
+		},
+		'options' | 'ref' | 'plugin'
+	> & {
+		/**
+		 * A `string` value to control.
+		 * @bindable
+		 * */
+		value: string;
+		/**
+		 * Whether to provide live updates to the bound `value` on every keystroke.
+		 * @default `true`
+		 * */
+		live?: boolean | undefined;
+		/**
+		 * Placeholder text to display when the `value` is empty.
+		 * @default `'Enter text here'`
+		 */
+		placeholder?: string | undefined;
+		/**
+		 * The number of lines of text to display.
+		 *
+		 * If lines of input exceed this value, then the text area will scroll.
+		 * @default `3`
+		 */
+		rows?: number | undefined;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {};
+};
+export type TextareaProps = typeof __propDef.props;
+export type TextareaEvents = typeof __propDef.events;
+export type TextareaSlots = typeof __propDef.slots;
+/**
+ * A multi-line text input field, in the spirit of the HTML `<textarea>` element.
+ *
+ * Integrates the
+ * [tweakpane-textarea-plugin](https://github.com/panGenerator/tweakpane-textarea-plugin) by [Krzysztof
+ * Goliński](http://www.golinski.org) and [Jakub Koźniewski](https://pangenerator.com).
+ *
+ * Extends the underlying implementation with the `live` property to match the behavior of the `<Text>`
+ * component.
+ *
+ * Note that _Svelte Tweakpane UI_ embeds a
+ * [fork](https://github.com/kitschpatrol/tweakpane-textarea-plugin) of the plugin with support for
+ * Tweakpane 4. The dependency will be updated to point to the source repository if / when the open
+ * [pull request](https://github.com/panGenerator/tweakpane-textarea-plugin/pull/4) with Tweakpane 4
+ * support is merged.
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the text area in `<Pane
+ * position='inline'>`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { Textarea } from 'svelte-tweakpane-ui';
+ *
+ * let text = '';
+ * </script>
+ *
+ * <Textarea bind:value={text} placeholder="The void" rows={8} />
+ * <pre>{text}</pre>
+ * ```
+ *
+ * @sourceLink
+ * [Textarea.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/Textarea.svelte)
+ */
+export default class Textarea extends SvelteComponent<
+	TextareaProps,
+	TextareaEvents,
+	TextareaSlots
+> {}
+export {};

package/dist/control/Wheel.svelte

@@ -0,0 +1,15 @@
+<script>
+	import * as pluginModule from '@tweakpane/plugin-camerakit';
+	import GenericSlider from '../internal/GenericSlider.svelte';
+	export let value;
+	export let amount = void 0;
+	export let wide = void 0;
+	let options;
+	$: options = {
+		amount,
+		view: 'camerawheel',
+		wide
+	};
+</script>
+
+<GenericSlider bind:value {options} plugin={pluginModule} {...$$restProps} />

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

@@ -0,0 +1,186 @@
+import { SvelteComponent } from 'svelte';
+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?: import('tweakpane').NumberInputParams | 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('tweakpane').SliderInputBindingApi | 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'
+		> & {
+			/**
+			 * A `number` value to control.
+			 * @bindable
+			 */
+			value: number;
+		} & {
+			/**
+			 * Minimum value.
+			 *
+			 * Specifying both a `min` and a `max` prop turns the control into a slider.
+			 * @default `undefined`
+			 */
+			min?: number | undefined /**
+			 * When `true`, expand the width of the wheel control at the expense of the numerical input
+			 * field.
+			 * @default `false`
+			 * */;
+			/**
+			 * 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;
+		},
+		'options' | 'ref' | 'plugin'
+	> & {
+		/**
+		 * A `number` value to control.
+		 * @bindable
+		 * */
+		value: number;
+		/** The amount of the value to change per pixel of movement.
+		 * @default `undefined`  \
+		 * [Dynamic based on magnitude of
+		 * `value`](https://github.com/cocopon/tweakpane/blob/66dfbea04bfe9b7f031673c955ceda1f92356e75/packages/core/src/common/number/util.ts#L54).
+		 */
+		amount?: number | undefined;
+		/**
+		 * When `true`, expand the width of the wheel control at the expense of the numerical input
+		 * field.
+		 * @default `false`
+		 * */
+		wide?: boolean | undefined;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {};
+};
+export type WheelProps = typeof __propDef.props;
+export type WheelEvents = typeof __propDef.events;
+export type WheelSlots = typeof __propDef.slots;
+/**
+ * A control evoking a dial on a proper camera body.
+ *
+ * Similar in functionality to a `<Slider>`.
+ *
+ * Integrates the [Wheel](https://github.com/tweakpane/plugin-camerakit/blob/main/src/plugin-wheel.ts)
+ * control from Tweakpane-creator [Hiroki Kokubun's](https://cocopon.me) [Camerakit
+ * plugin](https://github.com/tweakpane/plugin-camerakit).
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the wheel in `<Pane position='inline'>`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { Wheel } from 'svelte-tweakpane-ui';
+ *
+ * let angle = 45;
+ * </script>
+ *
+ * <Wheel
+ * bind:value={angle}
+ * format={(v) => `${(Math.abs(v) % 360).toFixed(0)}°`}
+ * />
+ *
+ * <div class="demo" style:--a="{angle}deg" />
+ *
+ * <style>
+ * div.demo {
+ *   aspect-ratio: 1;
+ *   width: 100%;
+ *   background: linear-gradient(var(--a), magenta, orange);
+ * }
+ * </style>
+ * ```
+ *
+ * @sourceLink
+ * [Wheel.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/Wheel.svelte)
+ */
+export default class Wheel extends SvelteComponent<WheelProps, WheelEvents, WheelSlots> {}
+export {};

package/dist/core/Binding.svelte

@@ -0,0 +1,68 @@
+<script context="module"></script>
+
+<script generics="T extends BindingObject, U extends BindingOptions, V extends BindingRef">
+	import ClsPad from '../internal/ClsPad.svelte';
+	import InternalPaneInline from '../internal/InternalPaneInline.svelte';
+	import { enforceReadonly, getElementIndex, isRootPane } from '../utils.js';
+	import { BROWSER, DEV } from 'esm-env';
+	import { getContext, onDestroy, onMount } from 'svelte';
+	export let object;
+	export let key;
+	export let disabled = false;
+	export let label = void 0;
+	export let options = void 0;
+	export let theme = void 0;
+	export let ref = void 0;
+	export let plugin = void 0;
+	const registerPlugin = getContext('registerPlugin');
+	const parentStore = getContext('parentStore');
+	const userCreatedPane = getContext('userCreatedPane');
+	let _ref;
+	let indexElement;
+	let index;
+	function create() {
+		if (_ref) _ref.dispose();
+		if (plugin !== void 0) {
+			registerPlugin(plugin);
+		}
+		_ref = $parentStore.addBinding(object, key, {
+			index,
+			label,
+			...options,
+			disabled
+		});
+		ref = _ref;
+		_ref.on('change', () => {
+			object = object;
+		});
+	}
+	onMount(() => {
+		index = indexElement ? getElementIndex(indexElement) : 0;
+	});
+	onDestroy(() => {
+		_ref?.dispose();
+	});
+	$: DEV && enforceReadonly(_ref, ref, 'Binding', 'ref', true);
+	$: options, $parentStore !== void 0 && index !== void 0 && create();
+	$: object, _ref !== void 0 && _ref.refresh();
+	$: _ref !== void 0 && (_ref.disabled = disabled);
+	$: _ref !== void 0 && (_ref.label = label);
+	$: theme &&
+		$parentStore &&
+		(userCreatedPane || !isRootPane($parentStore)) &&
+		console.warn(
+			'Set theme on the <Pane> component, not on its children! (Check nested <Binding> components for a theme prop.)'
+		);
+</script>
+
+{#if parentStore}
+	{#if BROWSER}
+		<div bind:this={indexElement} style="display: none;" />
+	{:else}
+		<ClsPad keysAdd={['containerVerticalPadding', 'containerUnitSize']} {theme} />
+	{/if}
+{:else}
+	<InternalPaneInline {theme} userCreatedPane={false}>
+		<svelte:self bind:disabled bind:key bind:label bind:object bind:options bind:plugin bind:ref />
+	</InternalPaneInline>
+{/if}

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

@@ -0,0 +1,116 @@
+import { SvelteComponent } from 'svelte';
+import type { BindingApi, BindingParams } from '@tweakpane/core';
+import type { BindingObject } from '../utils';
+export type BindingOptions = BindingParams;
+export type BindingRef = BindingApi;
+import type { Theme } from '../theme.js';
+declare class __sveltets_Render<
+	T extends BindingObject,
+	U extends BindingOptions,
+	V extends BindingRef
+> {
+	props(): {
+		/**
+		 * The binding's target object with values to manipulate.
+		 * @bindable
+		 * */ object: T;
+		/** The key for the value in the target `object` that the control should manipulate. */ key: keyof T;
+		/**
+		 * 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?: U | undefined;
+		/**
+		 * Custom color scheme.
+		 *
+		 * @default `undefined`  \
+		 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+		 * set with `setGlobalDefaultTheme()`.
+		 * */ theme?: 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?: V | 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;
+	};
+	events(): {} & {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots(): {};
+}
+export type BindingProps<
+	T extends BindingObject,
+	U extends BindingOptions,
+	V extends BindingRef
+> = ReturnType<__sveltets_Render<T, U, V>['props']>;
+export type BindingEvents<
+	T extends BindingObject,
+	U extends BindingOptions,
+	V extends BindingRef
+> = ReturnType<__sveltets_Render<T, U, V>['events']>;
+export type BindingSlots<
+	T extends BindingObject,
+	U extends BindingOptions,
+	V extends BindingRef
+> = ReturnType<__sveltets_Render<T, U, V>['slots']>;
+/**
+ * Wraps the Tweakpane [`addBinding`](https://tweakpane.github.io/docs/input-bindings/) method.
+ *
+ * Important: This component is provided for consistency with Tweakpane's API, but is not recommended
+ * for general use in _Svelte Tweakpane UI_ because more helpful abstractions are available.
+ *
+ * Please consider convenience components like `<Slider>`, `<Color>`, etc. etc. before using this
+ * component directly.
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the component in `<Pane
+ * position='inline'>`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { Binding, type BindingObject } from 'svelte-tweakpane-ui';
+ *
+ * let object: BindingObject = { r: 0 };
+ * </script>
+ *
+ * <Binding bind:object key={'r'} label="Reticulation" />
+ * <pre>Value: {object.r}</pre>
+ * ```
+ *
+ * @sourceLink
+ * [Binding.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/core/Binding.svelte)
+ */
+export default class Binding<
+	T extends BindingObject,
+	U extends BindingOptions,
+	V extends BindingRef
+> extends SvelteComponent<BindingProps<T, U, V>, BindingEvents<T, U, V>, BindingSlots<T, U, V>> {}
+export {};

package/dist/core/Blade.svelte

@@ -0,0 +1,61 @@
+<script context="module"></script>
+
+<script generics="U extends BladeOptions, V extends BladeRef">
+	import ClsPad from '../internal/ClsPad.svelte';
+	import InternalPaneInline from '../internal/InternalPaneInline.svelte';
+	import { enforceReadonly, getElementIndex, isRootPane } from '../utils.js';
+	import { BROWSER, DEV } from 'esm-env';
+	import { getContext, onDestroy, onMount } from 'svelte';
+	export let options;
+	export let disabled = false;
+	export let theme = void 0;
+	export let ref = void 0;
+	export let plugin = void 0;
+	const registerPlugin = getContext('registerPlugin');
+	const parentStore = getContext('parentStore');
+	const userCreatedPane = getContext('userCreatedPane');
+	let indexElement;
+	let index;
+	let _ref;
+	function create() {
+		if (_ref) _ref.dispose();
+		if (plugin !== void 0) {
+			registerPlugin(plugin);
+		}
+		_ref = $parentStore.addBlade({
+			index,
+			...options,
+			disabled
+			// why last?
+		});
+		ref = _ref;
+	}
+	onMount(() => {
+		index = indexElement ? getElementIndex(indexElement) : 0;
+	});
+	onDestroy(() => {
+		_ref?.dispose();
+	});
+	$: DEV && BROWSER && enforceReadonly(_ref, ref, 'Blade', 'ref', true);
+	$: options, BROWSER && $parentStore && index !== void 0 && create();
+	$: BROWSER && _ref && (_ref.disabled = disabled);
+	$: BROWSER &&
+		theme &&
+		$parentStore &&
+		(userCreatedPane || !isRootPane($parentStore)) &&
+		console.warn(
+			'Set theme on the <Pane> component, not on its children! (Check nested <Blade> components for a theme prop.)'
+		);
+</script>
+
+{#if parentStore}
+	{#if BROWSER}
+		<div bind:this={indexElement} style="display: none;" />
+	{:else}
+		<ClsPad keysAdd={['containerVerticalPadding']} {theme} />
+	{/if}
+{:else}
+	<InternalPaneInline {theme} userCreatedPane={false}>
+		<svelte:self bind:disabled bind:options bind:plugin bind:ref />
+	</InternalPaneInline>
+{/if}

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

@@ -0,0 +1,90 @@
+import { SvelteComponent } from 'svelte';
+import type { BaseBladeParams, BladeApi } from 'tweakpane';
+export type BladeRef = BladeApi;
+export type BladeOptions = BaseBladeParams;
+export type { Plugin } from '../utils.js';
+import type { Theme } from '../theme.js';
+declare class __sveltets_Render<U extends BladeOptions, V extends BladeRef> {
+	props(): {
+		/**
+		 * Blade configuration exposing Tweakpane's internal
+		 * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
+		 *
+		 * */ options: U;
+		/**
+		 * 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?: 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?: V | 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;
+	};
+	events(): {} & {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots(): {};
+}
+export type BladeProps<U extends BladeOptions, V extends BladeRef> = ReturnType<
+	__sveltets_Render<U, V>['props']
+>;
+export type BladeEvents<U extends BladeOptions, V extends BladeRef> = ReturnType<
+	__sveltets_Render<U, V>['events']
+>;
+export type BladeSlots<U extends BladeOptions, V extends BladeRef> = ReturnType<
+	__sveltets_Render<U, V>['slots']
+>;
+/**
+ * Wraps the Tweakpane [`addBlade`](https://tweakpane.github.io/docs/blades/) method.
+ *
+ * Important: This component is provided for consistency with Tweakpane's API, but is not recommended
+ * for general use in _Svelte Tweakpane UI_ because more helpful abstractions are available.
+ *
+ * Please consider convenience components like `<Separator>`, etc. before using this component
+ * directly.
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the component in `<Pane
+ * position='inline'>`.
+ *
+ * Tweakpane's vanilla JS API offers Blades as as a way to create unbound components, but in Svelte the
+ * same is achieved by simply not binding the component's value.
+ *
+ * In the example, a `<Separator>` component would be preferred over `<Blade>`, and would  obviate the
+ * need for the options param.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { Blade } from 'svelte-tweakpane-ui';
+ * </script>
+ *
+ * <Blade options={{ view: 'separator' }} />
+ * ```
+ *
+ * @sourceLink
+ * [Blade.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/core/Blade.svelte)
+ */
+export default class Blade<U extends BladeOptions, V extends BladeRef> extends SvelteComponent<
+	BladeProps<U, V>,
+	BladeEvents<U, V>,
+	BladeSlots<U, V>
+> {}