svelte-tweakpane-ui 1.0.0

package/dist/theme.js

@@ -0,0 +1,332 @@
+import { getWindowDocument, isRgbColorObject, isRgbaColorObject } from '@tweakpane/core';
+// Standard Tweakpane themes from https://tweakpane.github.io/docs/theming/#builder Must be kept in
+// sync with TP...
+const standard = {
+	baseBackgroundColor: 'hsl(230, 7%, 17%)',
+	baseBorderRadius: '6px',
+	baseFontFamily: 'Roboto Mono, Source Code Pro, Menlo, Courier, monospace',
+	baseShadowColor: 'rgba(0, 0, 0, 0.2)',
+	bladeBorderRadius: '2px',
+	bladeHorizontalPadding: '4px',
+	bladeValueWidth: '160px',
+	buttonBackgroundColor: 'hsl(230, 7%, 70%)',
+	buttonBackgroundColorActive: '#d6d7db',
+	buttonBackgroundColorFocus: '#c8cad0',
+	buttonBackgroundColorHover: '#bbbcc4',
+	buttonForegroundColor: 'hsl(230, 7%, 17%)',
+	containerBackgroundColor: 'rgba(187, 188, 196, 0.1)',
+	containerBackgroundColorActive: 'rgba(187, 188, 196, 0.25)',
+	containerBackgroundColorFocus: 'rgba(187, 188, 196, 0.2)',
+	containerBackgroundColorHover: 'rgba(187, 188, 196, 0.15)',
+	containerForegroundColor: 'hsl(230, 7%, 75%)',
+	containerHorizontalPadding: '4px',
+	containerUnitSize: '20px',
+	containerUnitSpacing: '4px',
+	containerVerticalPadding: '4px',
+	grooveForegroundColor: 'rgba(187, 188, 196, 0.1)',
+	inputBackgroundColor: 'rgba(187, 188, 196, 0.1)',
+	inputBackgroundColorActive: 'rgba(187, 188, 196, 0.25)',
+	inputBackgroundColorFocus: 'rgba(187, 188, 196, 0.2)',
+	inputBackgroundColorHover: 'rgba(187, 188, 196, 0.15)',
+	inputForegroundColor: 'hsl(230, 7%, 75%)',
+	labelForegroundColor: 'rgba(187, 188, 196, 0.7)',
+	monitorBackgroundColor: 'rgba(0, 0, 0, 0.2)',
+	monitorForegroundColor: 'rgba(187, 188, 196, 0.7)',
+	pluginImageDraggingColor: 'hsla(230, 100%, 66%, 1)'
+	// pluginThumbnailListHeight: '400px', pluginThumbnailListThumbSize: '20px',
+	// pluginThumbnailListWidth: '200px'
+};
+export const keys = Object.keys(standard).reduce((acc, key) => {
+	acc[key] = key;
+	return acc;
+}, {});
+const light = {
+	baseBackgroundColor: 'hsla(230, 5%, 90%, 1.00)',
+	baseShadowColor: 'hsla(0, 0%, 0%, 0.10)',
+	buttonBackgroundColor: 'hsla(230, 7%, 75%, 1.00)',
+	buttonBackgroundColorActive: 'hsla(230, 7%, 60%, 1.00)',
+	buttonBackgroundColorFocus: 'hsla(230, 7%, 65%, 1.00)',
+	buttonBackgroundColorHover: 'hsla(230, 7%, 70%, 1.00)',
+	buttonForegroundColor: 'hsla(230, 10%, 30%, 1.00)',
+	containerBackgroundColor: 'hsla(230, 15%, 30%, 0.20)',
+	containerBackgroundColorActive: 'hsla(230, 15%, 30%, 0.32)',
+	containerBackgroundColorFocus: 'hsla(230, 15%, 30%, 0.28)',
+	containerBackgroundColorHover: 'hsla(230, 15%, 30%, 0.24)',
+	containerForegroundColor: 'hsla(230, 10%, 30%, 1.00)',
+	grooveForegroundColor: 'hsla(230, 15%, 30%, 0.10)',
+	inputBackgroundColor: 'hsla(230, 15%, 30%, 0.10)',
+	inputBackgroundColorActive: 'hsla(230, 15%, 30%, 0.22)',
+	inputBackgroundColorFocus: 'hsla(230, 15%, 30%, 0.18)',
+	inputBackgroundColorHover: 'hsla(230, 15%, 30%, 0.14)',
+	inputForegroundColor: 'hsla(230, 10%, 30%, 1.00)',
+	labelForegroundColor: 'hsla(230, 10%, 30%, 0.70)',
+	monitorBackgroundColor: 'hsla(230, 15%, 30%, 0.10)',
+	monitorForegroundColor: 'hsla(230, 10%, 30%, 0.50)'
+};
+const iceberg = {
+	baseBackgroundColor: 'hsla(230, 20%, 11%, 1.00)',
+	baseShadowColor: 'hsla(0, 0%, 0%, 0.20)',
+	buttonBackgroundColor: 'hsla(230, 10%, 80%, 1.00)',
+	buttonBackgroundColorActive: 'hsla(230, 10%, 95%, 1.00)',
+	buttonBackgroundColorFocus: 'hsla(230, 10%, 90%, 1.00)',
+	buttonBackgroundColorHover: 'hsla(230, 10%, 85%, 1.00)',
+	buttonForegroundColor: 'hsla(230, 20%, 11%, 1.00)',
+	containerBackgroundColor: 'hsla(230, 25%, 16%, 1.00)',
+	containerBackgroundColorActive: 'hsla(230, 25%, 31%, 1.00)',
+	containerBackgroundColorFocus: 'hsla(230, 25%, 26%, 1.00)',
+	containerBackgroundColorHover: 'hsla(230, 25%, 21%, 1.00)',
+	containerForegroundColor: 'hsla(230, 10%, 80%, 1.00)',
+	grooveForegroundColor: 'hsla(230, 20%, 8%, 1.00)',
+	inputBackgroundColor: 'hsla(230, 20%, 8%, 1.00)',
+	inputBackgroundColorActive: 'hsla(230, 28%, 23%, 1.00)',
+	inputBackgroundColorFocus: 'hsla(230, 28%, 18%, 1.00)',
+	inputBackgroundColorHover: 'hsla(230, 20%, 13%, 1.00)',
+	inputForegroundColor: 'hsla(230, 10%, 80%, 1.00)',
+	labelForegroundColor: 'hsla(230, 12%, 48%, 1.00)',
+	monitorBackgroundColor: 'hsla(230, 20%, 8%, 1.00)',
+	monitorForegroundColor: 'hsla(230, 12%, 48%, 1.00)'
+};
+const jetblack = {
+	baseBackgroundColor: 'hsla(0, 0%, 0%, 1.00)',
+	baseShadowColor: 'hsla(0, 0%, 0%, 0.2)',
+	buttonBackgroundColor: 'hsla(0, 0%, 70%, 1.00)',
+	buttonBackgroundColorActive: 'hsla(0, 0%, 85%, 1.00)',
+	buttonBackgroundColorFocus: 'hsla(0, 0%, 80%, 1.00)',
+	buttonBackgroundColorHover: 'hsla(0, 0%, 75%, 1.00)',
+	buttonForegroundColor: 'hsla(0, 0%, 0%, 1.00)',
+	containerBackgroundColor: 'hsla(0, 0%, 10%, 1.00)',
+	containerBackgroundColorActive: 'hsla(0, 0%, 25%, 1.00)',
+	containerBackgroundColorFocus: 'hsla(0, 0%, 20%, 1.00)',
+	containerBackgroundColorHover: 'hsla(0, 0%, 15%, 1.00)',
+	containerForegroundColor: 'hsla(0, 0%, 50%, 1.00)',
+	grooveForegroundColor: 'hsla(0, 0%, 10%, 1.00)',
+	inputBackgroundColor: 'hsla(0, 0%, 10%, 1.00)',
+	inputBackgroundColorActive: 'hsla(0, 0%, 25%, 1.00)',
+	inputBackgroundColorFocus: 'hsla(0, 0%, 20%, 1.00)',
+	inputBackgroundColorHover: 'hsla(0, 0%, 15%, 1.00)',
+	inputForegroundColor: 'hsla(0, 0%, 70%, 1.00)',
+	labelForegroundColor: 'hsla(0, 0%, 50%, 1.00)',
+	monitorBackgroundColor: 'hsla(0, 0%, 8%, 1.00)',
+	monitorForegroundColor: 'hsla(0, 0%, 48%, 1.00)'
+};
+const retro = {
+	baseBackgroundColor: 'hsla(40, 3%, 90%, 1.00)',
+	baseShadowColor: 'hsla(0, 0%, 0%, 0.30)',
+	buttonBackgroundColor: 'hsla(40, 3%, 70%, 1.00)',
+	buttonBackgroundColorActive: 'hsla(40, 3%, 55%, 1.00)',
+	buttonBackgroundColorFocus: 'hsla(40, 3%, 60%, 1.00)',
+	buttonBackgroundColorHover: 'hsla(40, 3%, 65%, 1.00)',
+	buttonForegroundColor: 'hsla(40, 3%, 20%, 1.00)',
+	containerBackgroundColor: 'hsla(40, 3%, 70%, 1.00)',
+	containerBackgroundColorActive: 'hsla(40, 3%, 55%, 1.00)',
+	containerBackgroundColorFocus: 'hsla(40, 3%, 60%, 1.00)',
+	containerBackgroundColorHover: 'hsla(40, 3%, 65%, 1.00)',
+	containerForegroundColor: 'hsla(40, 3%, 20%, 1.00)',
+	grooveForegroundColor: 'hsla(40, 3%, 40%, 1.00)',
+	inputBackgroundColor: 'hsla(120, 3%, 20%, 1.00)',
+	inputBackgroundColorActive: 'hsla(120, 3%, 35%, 1.00)',
+	inputBackgroundColorFocus: 'hsla(120, 3%, 30%, 1.00)',
+	inputBackgroundColorHover: 'hsla(120, 3%, 25%, 1.00)',
+	inputForegroundColor: 'hsla(120, 40%, 60%, 1.00)',
+	labelForegroundColor: 'hsla(40, 3%, 50%, 1.00)',
+	monitorBackgroundColor: 'hsla(120, 3%, 20%, 1.00)',
+	monitorForegroundColor: 'hsla(120, 40%, 60%, 0.80)'
+};
+const translucent = {
+	baseBackgroundColor: 'hsla(0, 0%, 10%, 0.80)',
+	baseShadowColor: 'hsla(0, 0%, 0%, 0.20)',
+	buttonBackgroundColor: 'hsla(0, 0%, 80%, 1.00)',
+	buttonBackgroundColorActive: 'hsla(0, 0%, 100%, 1.00)',
+	buttonBackgroundColorFocus: 'hsla(0, 0%, 95%, 1.00)',
+	buttonBackgroundColorHover: 'hsla(0, 0%, 85%, 1.00)',
+	buttonForegroundColor: 'hsla(0, 0%, 0%, 0.80)',
+	containerBackgroundColor: 'hsla(0, 0%, 0%, 0.30)',
+	containerBackgroundColorActive: 'hsla(0, 0%, 0%, 0.60)',
+	containerBackgroundColorFocus: 'hsla(0, 0%, 0%, 0.50)',
+	containerBackgroundColorHover: 'hsla(0, 0%, 0%, 0.40)',
+	containerForegroundColor: 'hsla(0, 0%, 100%, 0.50)',
+	grooveForegroundColor: 'hsla(0, 0%, 0%, 0.20)',
+	inputBackgroundColor: 'hsla(0, 0%, 0%, 0.30)',
+	inputBackgroundColorActive: 'hsla(0, 0%, 0%, 0.60)',
+	inputBackgroundColorFocus: 'hsla(0, 0%, 0%, 0.50)',
+	inputBackgroundColorHover: 'hsla(0, 0%, 0%, 0.40)',
+	inputForegroundColor: 'hsla(0, 0%, 100%, 0.50)',
+	labelForegroundColor: 'hsla(0, 0%, 100%, 0.50)',
+	monitorBackgroundColor: 'hsla(0, 0%, 0%, 0.30)',
+	monitorForegroundColor: 'hsla(0, 0%, 100%, 0.30)'
+};
+const vivid = {
+	baseBackgroundColor: 'hsla(0, 80%, 40%, 1)',
+	baseShadowColor: 'hsla(0, 0%, 0%, 0.2)',
+	buttonBackgroundColor: 'hsla(0, 0%, 100%, 1)',
+	buttonBackgroundColorActive: 'hsla(0, 0%, 85%, 1)',
+	buttonBackgroundColorFocus: 'hsla(0, 0%, 90%, 1)',
+	buttonBackgroundColorHover: 'hsla(0, 0%, 95%, 1)',
+	buttonForegroundColor: 'hsla(230, 20%, 11%, 1)',
+	containerBackgroundColor: 'hsla(0, 0%, 0%, 0.2)',
+	containerBackgroundColorActive: 'hsla(0, 0%, 0%, 0.35)',
+	containerBackgroundColorFocus: 'hsla(0, 0%, 0%, 0.3)',
+	containerBackgroundColorHover: 'hsla(0, 0%, 0%, 0.25)',
+	containerForegroundColor: 'hsla(0, 0%, 100%, 0.9)',
+	grooveForegroundColor: 'hsla(0, 0%, 0%, 0.5)',
+	inputBackgroundColor: 'hsla(0, 0%, 0%, 0.5)',
+	inputBackgroundColorActive: 'hsla(0, 0%, 0%, 0.65)',
+	inputBackgroundColorFocus: 'hsla(0, 0%, 0%, 0.60)',
+	inputBackgroundColorHover: 'hsla(0, 0%, 0%, 0.55)',
+	inputForegroundColor: 'hsla(0, 0%, 100%, 0.9)',
+	labelForegroundColor: 'hsla(0, 0%, 100%, 0.9)',
+	monitorBackgroundColor: 'hsla(0, 0%, 0%, 0.5)',
+	monitorForegroundColor: 'hsla(0, 0%, 100%, 0.5)'
+};
+export const presets = {
+	/** Dark blue theme. */
+	iceberg,
+	/** Extra dark theme. */
+	jetblack,
+	/** Standard Tweakpane light theme. */
+	light,
+	/** Light theme with CRT vibes. */
+	retro,
+	/** Standard Tweakpane dark theme. This is the default theme. */
+	standard,
+	/** Dark translucent theme. */
+	translucent,
+	/** Red theme. */
+	vivid
+};
+// More humane theme names... Note that the shorthand variables don't work
+const keyToCssVariableMap = new Map([
+	// Tweakpane
+	['baseBackgroundColor', '--tp-base-background-color'],
+	['baseBorderRadius', '--tp-base-border-radius'],
+	['baseFontFamily', '--tp-base-font-family'],
+	['baseShadowColor', '--tp-base-shadow-color'],
+	['bladeBorderRadius', '--tp-blade-border-radius'],
+	['bladeHorizontalPadding', '--tp-blade-horizontal-padding'],
+	['bladeValueWidth', '--tp-blade-value-width'],
+	['buttonBackgroundColor', '--tp-button-background-color'],
+	['buttonBackgroundColorActive', '--tp-button-background-color-active'],
+	['buttonBackgroundColorFocus', '--tp-button-background-color-focus'],
+	['buttonBackgroundColorHover', '--tp-button-background-color-hover'],
+	['buttonForegroundColor', '--tp-button-foreground-color'],
+	['containerBackgroundColor', '--tp-container-background-color'],
+	['containerBackgroundColorActive', '--tp-container-background-color-active'],
+	['containerBackgroundColorFocus', '--tp-container-background-color-focus'],
+	['containerBackgroundColorHover', '--tp-container-background-color-hover'],
+	['containerForegroundColor', '--tp-container-foreground-color'],
+	['containerHorizontalPadding', '--tp-container-horizontal-padding'],
+	['containerUnitSize', '--tp-container-unit-size'],
+	['containerUnitSpacing', '--tp-container-unit-spacing'],
+	['containerVerticalPadding', '--tp-container-vertical-padding'],
+	['grooveForegroundColor', '--tp-groove-foreground-color'],
+	['inputBackgroundColor', '--tp-input-background-color'],
+	['inputBackgroundColorActive', '--tp-input-background-color-active'],
+	['inputBackgroundColorFocus', '--tp-input-background-color-focus'],
+	['inputBackgroundColorHover', '--tp-input-background-color-hover'],
+	['inputForegroundColor', '--tp-input-foreground-color'],
+	['labelForegroundColor', '--tp-label-foreground-color'],
+	['monitorBackgroundColor', '--tp-monitor-background-color'],
+	['monitorForegroundColor', '--tp-monitor-foreground-color'],
+	// Plugins
+	['pluginImageDraggingColor', '--tp-plugin-image-dragging-color']
+	// ['pluginThumbnailListHeight', '--tp-plugin-thumbnail-list-height'],
+	// ['pluginThumbnailListThumbSize', '--tp-plugin-thumbnail-list-thumb-size'],
+	// ['pluginThumbnailListWidth', '--tp-plugin-thumbnail-list-width']
+]);
+// Just do it dynamically instead of the map? function transformToCustomProperty(str: string):
+// string { return '--tp-' + str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();
+// }
+function stringToCssValue(v) {
+	if (v === undefined) {
+		return undefined;
+	} else if (typeof v === 'string') {
+		return v;
+	} else if (isRgbaColorObject(v)) {
+		return `rgba(${v.r}, ${v.g}, ${v.b}, ${v.a})`;
+	} else if (isRgbColorObject(v)) {
+		return `rgb(${v.r}, ${v.g}, ${v.b})`;
+	} else {
+		throw new Error(`Unknown CSS theme value object: ${v}`);
+	}
+}
+function expandVariableKey(name) {
+	// pass explicit variables through
+	if (name.startsWith('--tp-')) {
+		return name;
+	} else {
+		const varName = keyToCssVariableMap.get(name);
+		if (varName) {
+			return varName;
+		} else {
+			throw new Error(`Unknown Tweakpane CSS theme map variable key: "${name}"`);
+		}
+	}
+}
+/**
+ * Used during SSR to calculate metrics Returns CSS string.
+ */
+export function getValueOrFallback(theme, key) {
+	if (theme === undefined || theme[key] === undefined) {
+		return stringToCssValue(standard[key]);
+	} else {
+		return stringToCssValue(theme[key]);
+	}
+}
+export function applyTheme(element, theme) {
+	const rootDoc = getWindowDocument().documentElement;
+	if (theme === undefined) {
+		Object.keys(standard).forEach((k) => {
+			const key = expandVariableKey(k);
+			if (element.style.getPropertyValue(key).length > 0) {
+				// console.log(`Unsetting via undefined theme ${key}`);
+				element.style.removeProperty(key);
+			}
+		});
+	} else {
+		Object.entries(theme).forEach(([k, v]) => {
+			const key = expandVariableKey(k);
+			const value = stringToCssValue(v);
+			// console.log(`Inspecting ${key}: ${value}`);
+			// only set the variable if it deviates from the standard theme or  the root theme (set
+			// by setGlobalDefaultTheme).... but if theme is explicitly standard and not undefined,
+			// then apply it anyway so that any global theme is overridden TODO normalize color
+			// representation for comparison? TODO tests for this logic
+			const standardValue = standard[k] || undefined;
+			const rootValue = rootDoc.style.getPropertyValue(key) || undefined;
+			const isDeviationFromRoot = (rootValue && value !== rootValue) || false;
+			const isDeviationFromStandard = (standardValue && value !== standardValue) || false;
+			if (
+				theme !== undefined &&
+				value !== undefined &&
+				(isDeviationFromRoot || (!rootValue && isDeviationFromStandard))
+			) {
+				// console.log(`Setting ${key} to ${value}`);
+				element.style.setProperty(key, value);
+			} else {
+				if (element.style.getPropertyValue(key).length > 0) {
+					// console.log(`Unsetting ${key}`);
+					element.style.removeProperty(key);
+				}
+			}
+		});
+	}
+}
+/**
+ * Sets a default theme for all Tweakpane components on the page. Useful if you have a light / dark
+ * mode toggle.
+ */
+export function setGlobalDefaultTheme(theme) {
+	// wait for dom ready... better outside?
+	if (typeof window !== 'undefined' && window.document) {
+		applyTheme(getWindowDocument().documentElement, theme);
+	}
+}
+// library exports
+export default {
+	/**
+	 * A collection of default theme color schemes, matching those provided in the Tweakpane
+	 * [Panebuilder presets](https://tweakpane.github.io/docs/theming/#builder).
+	 * */
+	presets,
+	setGlobalDefaultTheme
+};

package/dist/utils.d.ts

@@ -0,0 +1,157 @@
+import type { Theme } from './theme';
+import type { FolderApi, Pane, TabPageApi } from 'tweakpane';
+export type Container = FolderApi | Pane | TabPageApi;
+export type Simplify<T> = {
+	[KeyType in keyof T]: T[KeyType];
+} & NonNullable<unknown>;
+export type SimplifyDeep<Type> = Type extends Theme
+	? Type
+	: {
+			[TypeKey in keyof Type]: SimplifyDeep<Type[TypeKey]>;
+	  };
+export type HasKey<U, V extends PropertyKey> = V extends keyof U ? U[V] : unknown;
+import type { Bindable, BladeApi, BladeController, TpPluginBundle, View } from '@tweakpane/core';
+export type BindingObject = Bindable;
+export type Plugin = TpPluginBundle;
+/**
+ * Needed to conveniently use $$Events as the single source of truth for component events Performs
+ * the transformation necessary (extracting detail types) to pass the $$Events type into
+ * createEventDispatcher(). See
+ * [documentation](https://svelte.dev/docs/typescript#script-lang-ts-events).
+ *
+ * An alternative would be to use a custom dispatcher, like [Threlte
+ * does])https://github.com/threlte/threlte/blob/main/packages/core/src/lib/lib/createRawEventDispatcher.ts_.
+ *
+ */
+export type UnwrapCustomEvents<T> = {
+	[P in keyof T]: T[P] extends CustomEvent<infer detail> ? detail : never;
+};
+/**
+ * For CLS SSR calculation
+ */
+export declare function rowsForMonitor(
+	buffer?: number | undefined,
+	rows?: number | undefined,
+	graph?: boolean | undefined
+): number;
+/**
+ * Fills an array of length `quantity` with a `value`
+ */
+export declare function fillWith<T>(value: T, quantity: number): T[];
+/**
+ * There's no way to enforce readonly properties in Svelte components, so this is a workaround. See
+ * [general approach](https://github.com/sveltejs/svelte/issues/7712#issuecomment-1642470141) and
+ * [runtime error approach](https://github.com/sveltejs/svelte/issues/7712#issuecomment-1642817764)
+ *
+ * Generally:
+ * ```svelte
+ * <script>
+ *   export let value = "foo"
+ *   let _value;
+ *   // if you want to set init value from outside
+ *   // uncomment this line:
+ *   // _value = value;
+ *   $: value = _value;
+ *   $: enforceReadonly(_value, value, "value");
+ * </script>
+ *
+ * <input bind:value={_value} />
+ *
+ * This is not perfect and there are some edge cases it doesn't catch because we have to
+ * allow assignment to undefined in some internal cases (via the `allowAssignmentToUndefined` flag).
+ *
+ */
+export declare function enforceReadonly(
+	internal: unknown,
+	external: unknown,
+	componentName?: string,
+	propName?: string,
+	allowAssignmentToUndefined?: boolean
+): void;
+export declare function isRootPane(container: Container): boolean;
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function getElementIndex(element: HTMLElement): number;
+export declare function removeKeys<T extends object>(obj: T, ...keys: string[]): T;
+export declare function updateCollapsibility(
+	isUserExpandableEnabled: boolean,
+	element: HTMLElement,
+	titleBarClass: string,
+	iconClass?: string
+): void;
+/**
+ * Infers grid dimensions for a given number of items, respecting optional maximums for rows and
+ * columns.
+ *
+ * If no constraints are provided, it creates the most square grid possible.
+ *
+ * If a single constraint is provided, it lets the undefined axis grow / shrink as needed.
+ *
+ * If both constraints are provided, values may be clipped.
+ */
+export declare function getGridDimensions(
+	itemCount: number,
+	maxColumns?: number,
+	maxRows?: number
+): {
+	columns: number;
+	rows: number;
+};
+export declare function tupleToObject<
+	T extends string,
+	O extends {
+		[K in T]: number;
+	}
+>(tuple: number[], keys: T[]): O;
+export declare function objectToTuple<T extends string, O extends Record<T, number>>(
+	obj: O,
+	keys: [T]
+): [number];
+export declare function objectToTuple<T extends string, O extends Record<T, number>>(
+	obj: O,
+	keys: [T, T]
+): [number, number];
+export declare function objectToTuple<T extends string, O extends Record<T, number>>(
+	obj: O,
+	keys: [T, T, T]
+): [number, number, number];
+export declare function objectToTuple<T extends string, O extends Record<T, number>>(
+	obj: O,
+	keys: [T, T, T, T]
+): [number, number, number, number];
+export declare function pickerIsOpen(blade: BladeApi<BladeController<View>>): boolean;
+export declare function getSwatchButton(
+	blade: BladeApi<BladeController<View>>
+): HTMLButtonElement | undefined;
+import type { CubicBezierValue } from './control/CubicBezier.svelte';
+import type { RotationEulerUnit, RotationEulerValue } from './control/RotationEuler.svelte';
+import type { RotationQuaternionValue } from './control/RotationQuaternion.svelte';
+declare function quaternionToCssTransform(quaternion: RotationQuaternionValue): string;
+declare function eulerToCssTransform(
+	rotation: RotationEulerValue,
+	units?: RotationEulerUnit
+): string;
+declare function cubicBezierToEaseFunction(cubicBezier: CubicBezierValue): (t: number) => number;
+declare const _default: {
+	/**
+	 * Convenience function for creating easing functions ready for Svelte's tween and animation
+	 * systems
+	 * @param cubicBezier - `CubicBezierValue`, probably from a `<CubicBezier>` component
+	 * @returns Tween function
+	 */
+	cubicBezierToEaseFunction: typeof cubicBezierToEaseFunction;
+	/**
+	 * Convenience function for creating CSS-ready euler rotation transforms
+	 * @param rotation - `RotationEulerValue`, probably from a `<RotationEuler>` component
+	 * @param quaternion
+	 * @returns CSS rotateX/Y/Z string ready to be passed into a CSS transform
+	 */
+	eulerToCssTransform: typeof eulerToCssTransform;
+	/**
+	 * Convenience function for creating CSS-ready quaternion rotation transforms
+	 * @param rotation - RotationQuaternionValue, probably from a <RotationQuaternionValue>
+	 * component
+	 * @returns CSS matrix3d string ready to be passed into a CSS transform
+	 */
+	quaternionToCssTransform: typeof quaternionToCssTransform;
+};
+export default _default;