svelte-tweakpane-ui 1.0.1 → 1.1.0

package/dist/control/ButtonGrid.svelte

@@ -32,14 +32,13 @@
 		size: [gridDimensions.columns, gridDimensions.rows],
 		view: 'buttongrid'
 	};
-	$: gridBlade &&
-		gridBlade.on('click', (event) => {
-			dispatch('click', {
-				cell: { x: event.index[0], y: event.index[1] },
-				index: event.index[1] * gridDimensions.columns + event.index[0],
-				label: event.cell.title
-			});
+	$: gridBlade?.on('click', (event) => {
+		dispatch('click', {
+			cell: { x: event.index[0], y: event.index[1] },
+			index: event.index[1] * gridDimensions.columns + event.index[0],
+			label: event.cell.title
 		});
+	});
 </script>
 
 <Blade bind:ref={gridBlade} {options} plugin={pluginModule} {...$$restProps} />

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

@@ -7,11 +7,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: boolean;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, boolean>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -25,11 +25,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: ColorValue;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, ColorValue>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

package/dist/control/CubicBezier.svelte

@@ -30,7 +30,7 @@
 						y1: event.value.y1,
 						x2: event.value.x2,
 						y2: event.value.y2
-				  };
+					};
 		});
 	}
 	$: options = {
@@ -60,7 +60,7 @@
 
 <style>
 	/* Fix overflow bug from the plugin TODO PR */
-	:global(div.tp-cbzv:not(tp-cbzv-expanded) div.tp-cbzv_p) {
+	:global(div.svelte-tweakpane-ui div.tp-cbzv:not(tp-cbzv-expanded) div.tp-cbzv_p) {
 		overflow: hidden !important;
 	}
 </style>

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

@@ -8,11 +8,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: ImageValue;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, ImageValue>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -14,11 +14,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: IntervalSliderValue;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, IntervalSliderValue>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

package/dist/control/List.svelte

@@ -20,13 +20,11 @@
 			if (Array.isArray(internalOptions)) {
 				value = internalOptions[0].value;
 				return value;
-			} else {
-				value = internalOptions[Object.keys(internalOptions)[0]];
-				return value;
 			}
-		} else {
+			value = internalOptions[Object.keys(internalOptions)[0]];
 			return value;
 		}
+		return value;
 	}
 	function isArrayStyleListOptions(object) {
 		return (
@@ -40,15 +38,11 @@
 		return typeof object === 'object' && object !== null && !Array.isArray(object);
 	}
 	function getInternalOptions(options2) {
-		if (isArrayStyleListOptions(options2)) {
-			return options2;
-		} else if (isObjectStyleListOptions(options2)) {
-			return options2;
-		} else {
-			return options2.map((value2) => {
-				return { value: value2, text: JSON.stringify(value2) };
-			});
-		}
+		return isArrayStyleListOptions(options2)
+			? options2
+			: isObjectStyleListOptions(options2)
+				? options2
+				: options2.map((value2) => ({ value: value2, text: JSON.stringify(value2) }));
 	}
 	function setValue() {
 		listBlade.value = value;

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

@@ -1,13 +1,11 @@
 import { SvelteComponent } from 'svelte';
 import type { Simplify } from '../utils';
 export type ListOptionsArray<T> = T[];
-export type ListOptionsObjectArray<T> = {
+export type ListOptionsObjectArray<T> = Array<{
 	value: T;
 	text: string;
-}[];
-export type ListOptionsRecord<T> = {
-	[text: string]: T;
-};
+}>;
+export type ListOptionsRecord<T> = Record<string, T>;
 export type ListOptions<T> = Simplify<
 	ListOptionsArray<T> | ListOptionsObjectArray<T> | ListOptionsRecord<T>
 >;

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

@@ -31,10 +31,10 @@ export type PointOptions<
 > = Dimensions extends '4'
 	? Point4dInputParams[Axis]
 	: Dimensions extends '3'
-	  ? Point3dInputParams[Axis]
-	  : Dimensions extends '2'
-	    ? Point2dInputParams[Axis]
-	    : never;
+		? Point3dInputParams[Axis]
+		: Dimensions extends '2'
+			? Point2dInputParams[Axis]
+			: never;
 declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointValue4d> {
 	props(): Omit<
 		Omit<
@@ -43,11 +43,9 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: T;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, T>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`
@@ -74,10 +72,10 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 					| (T extends PointValue4d
 							? Point4dInputParams
 							: T extends PointValue3d
-							  ? Point3dInputParams
-							  : T extends PointValue2d
-							    ? Point2dInputParams
-							    : unknown)
+								? Point3dInputParams
+								: T extends PointValue2d
+									? Point2dInputParams
+									: unknown)
 					| undefined;
 				/**
 				 * Custom color scheme.
@@ -207,10 +205,10 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 									? T_1 extends PointValue4d
 										? Point4dInputParams
 										: T_1 extends PointValue3d
-										  ? Point3dInputParams
-										  : T_1 extends PointValue2d
-										    ? Point2dInputParams
-										    : unknown
+											? Point3dInputParams
+											: T_1 extends PointValue2d
+												? Point2dInputParams
+												: unknown
 									: never
 								: never)['x']
 						| undefined;
@@ -231,14 +229,14 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 									? T_2 extends PointValue4d
 										? Point4dInputParams
 										: T_2 extends PointValue3d
-										  ? Point3dInputParams
-										  : T_2 extends PointValue2d
-										    ? Point2dInputParams
-										    : unknown
+											? Point3dInputParams
+											: T_2 extends PointValue2d
+												? Point2dInputParams
+												: unknown
 									: never
 								: never)['y']
 						| undefined;
-			  }
+				}
 			: unknown) &
 		(T extends PointValue3d | PointValue4d
 			? {
@@ -255,14 +253,14 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 									? T_3 extends PointValue4d
 										? Point4dInputParams
 										: T_3 extends PointValue3d
-										  ? Point3dInputParams
-										  : T_3 extends PointValue2d
-										    ? Point2dInputParams
-										    : unknown
+											? Point3dInputParams
+											: T_3 extends PointValue2d
+												? Point2dInputParams
+												: unknown
 									: never
 								: never)['z']
 						| undefined;
-			  }
+				}
 			: unknown) &
 		(T extends PointValue4d
 			? {
@@ -279,14 +277,14 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 									? T_4 extends PointValue4d
 										? Point4dInputParams
 										: T_4 extends PointValue3d
-										  ? Point3dInputParams
-										  : T_4 extends PointValue2d
-										    ? Point2dInputParams
-										    : unknown
+											? Point3dInputParams
+											: T_4 extends PointValue2d
+												? Point2dInputParams
+												: unknown
 									: never
 								: never)['w']
 						| undefined;
-			  }
+				}
 			: unknown);
 	events(): {} & {
 		[evt: string]: CustomEvent<any>;

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

@@ -7,11 +7,9 @@ declare class __sveltets_Render<T extends number | string | boolean> {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: T;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, T>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -33,11 +33,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: number;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, number>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -22,11 +22,73 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: RotationEulerValue;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, RotationEulerValue>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string /**
+				 * Integrates the [euler
+				 * rotation](https://github.com/0b5vr/tweakpane-plugin-rotation/blob/dev/src/RotationInputPluginEuler.ts)
+				 * control from [0b5vr's](https://0b5vr.com)
+				 * [tweakpane-plugin-rotation](https://github.com/0b5vr/tweakpane-plugin-rotation).
+				 *
+				 * _Svelte Tweakpane UI_ extends the original API to support tuple values in addition to object values.
+				 * (Useful when working with frameworks like [three.js](https://threejs.org) /
+				 * [threlte](https://threlte.xyz).)
+				 *
+				 * A utility function `Utils.eulerToCssTransform()` is also provided to easily convert a quaternion
+				 * value object or tuple into a CSS transform string.
+				 *
+				 * See also <RotationQuaternion> if you're feeling gimbal locked.
+				 *
+				 * Usage outside of a `<Pane>` component will implicitly wrap the profiler in `<Pane
+				 * position='inline'>`.
+				 *
+				 * @example
+				 * ```svelte
+				 * <script lang="ts">
+				 * import {
+				 *   Button,
+				 *   RotationEuler,
+				 *   type RotationEulerValueObject,
+				 *   Utils
+				 * } from 'svelte-tweakpane-ui';
+				 *
+				 * // Value could also be a tuple
+				 * // e.g. [0, 0, 0]
+				 * let value: RotationEulerValueObject = { x: 0, y: 0, z: 0 };
+				 *
+				 * $: transform = Utils.eulerToCssTransform(value);
+				 * $: valueRows = Object.values(value)
+				 *   .map((v) => `${v >= 0 ? '+' : ''}${v.toFixed(6)}`)
+				 *   .join('\n');
+				 * </script>
+				 *
+				 * <RotationEuler
+				 * bind:value
+				 * expanded={true}
+				 * label="CSS Rotation"
+				 * picker={'inline'}
+				 * />
+				 * <Button on:click={() => (value = { x: 0, y: 0, z: 0 })} title="Reset" />
+				 *
+				 * <div class="billboard" style:transform>
+				 * <pre>{valueRows}</pre>
+				 * </div>
+				 *
+				 * <style>
+				 * div.billboard {
+				 *   display: flex;
+				 *   align-items: center;
+				 *   justify-content: center;
+				 *   aspect-ratio: 1;
+				 *   width: 100%;
+				 *   background: linear-gradient(45deg, magenta, orange);
+				 * }
+				 * </style>
+				 * ```
+				 *
+				 * @sourceLink
+				 * [RotationEuler.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/RotationEuler.svelte)
+				 */;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -21,11 +21,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: RotationQuaternionValue;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, RotationQuaternionValue>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -7,11 +7,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: number;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, number>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -8,11 +8,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: string;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, string>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

package/dist/control/Textarea.svelte

@@ -14,15 +14,13 @@
 		updateListeners(live ?? true, true);
 	});
 	function onBlur(event) {
-		console.log('onblur');
 		value = event.target.value;
 	}
 	function onInput(event) {
-		console.log('input');
 		value = event.target.value;
 	}
 	function updateListeners(live2, destroy = false) {
-		var input = ref?.controller.valueController.view.element.querySelector('textarea');
+		const input = ref?.controller.valueController.view.element.querySelector('textarea');
 		if (input) {
 			input.removeEventListener('blur', onBlur);
 			input.removeEventListener('input', onInput);

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

@@ -9,11 +9,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: string;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, string>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -7,11 +7,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: number;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, number>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`
@@ -78,11 +76,7 @@ declare const __propDef: {
 			 * 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`
-			 * */;
+			min?: number | undefined;
 			/**
 			 * Maximum value.
 			 *

package/dist/core/Blade.svelte

@@ -26,7 +26,7 @@
 			index,
 			...options,
 			disabled
-			// why last?
+			// Why last?
 		});
 		ref = _ref;
 	}
@@ -36,11 +36,10 @@
 	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 &&
+	$: DEV && enforceReadonly(_ref, ref, 'Blade', 'ref', true);
+	$: options && $parentStore && index !== void 0 && create();
+	$: _ref && (_ref.disabled = disabled);
+	$: theme &&
 		$parentStore &&
 		(userCreatedPane || !isRootPane($parentStore)) &&
 		console.warn(

package/dist/core/TabGroup.svelte

@@ -30,11 +30,10 @@
 		const tabPageApi = $tabGroupStore?.pages.at(index);
 		if (tabPageApi && !tabPageApi.selected) tabPageApi.selected = true;
 	}
-	$: BROWSER && setUpListeners($tabGroupStore);
-	$: BROWSER && setSelectedIndex(selectedIndex);
-	$: BROWSER && $tabGroupStore && ($tabGroupStore.disabled = disabled);
-	$: BROWSER &&
-		theme &&
+	$: setUpListeners($tabGroupStore);
+	$: setSelectedIndex(selectedIndex);
+	$: $tabGroupStore && ($tabGroupStore.disabled = disabled);
+	$: theme &&
 		$parentStore &&
 		(userCreatedPane || !isRootPane($parentStore)) &&
 		console.warn(

package/dist/core/TabPage.svelte

@@ -24,10 +24,10 @@
 	function create() {
 		if (!$tabGroupStore) {
 			$tabGroupStore = $parentStore.addTab({
-				// tabs MUST be created with at least one page how to handle tabs with no children?
+				// Tabs MUST be created with at least one page how to handle tabs with no children?
 				disabled: false,
 				index: $tabIndexStore,
-				// could be cleaner to have children create the tab as needed?
+				// Could be cleaner to have children create the tab as needed?
 				pages: [{ title }]
 			});
 			$tabPageStore = $tabGroupStore.pages[0];

package/dist/extra/AutoObject.svelte

@@ -20,12 +20,10 @@
 	function prettify(value, active = true) {
 		if (!active) return value;
 		return value
-			.replace(/([\da-z])([A-Z])/g, '$1 $2')
-			.replace(/[_-]+/g, ' ')
+			.replaceAll(/([\da-z])([A-Z])/g, '$1 $2')
+			.replaceAll(/[_-]+/g, ' ')
 			.toLowerCase()
-			.replace(/\b[a-z]/g, (letter) => {
-				return letter.toUpperCase();
-			});
+			.replaceAll(/\b[a-z]/g, (letter) => letter.toUpperCase());
 	}
 </script>
 

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

@@ -7,11 +7,10 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: string | number | boolean | object;
-				};
+				object: import('@tweakpane/core').Bindable &
+					Record<string, string | number | boolean | object>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`
@@ -114,6 +113,9 @@ export type AutoValueSlots = typeof __propDef.slots;
  * <AutoValue bind:value={point} label="Point" />
  * <AutoValue bind:value={text} label="Text" />
  * ```
+ *
+ * @sourceLink
+ * [AutoValue.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/extra/AutoValue.svelte)
  */
 export default class AutoValue extends SvelteComponent<
 	AutoValueProps,

package/dist/extra/Element.svelte

@@ -9,9 +9,7 @@
 	};
 	let ref;
 	let sourceDiv;
-	$: if (ref && ref.element) {
-		ref.element.replaceChildren(sourceDiv);
-	}
+	$: ref?.element.replaceChildren(sourceDiv);
 </script>
 
 {#if BROWSER}

package/dist/index.js

@@ -1,16 +1,16 @@
-// components
+// Components
 // essentials (1st party plugins)
 export { default as ButtonGrid } from './control/ButtonGrid.svelte';
 export { default as Checkbox } from './control/Checkbox.svelte';
 export { default as Color } from './control/Color.svelte';
 export { default as CubicBezier } from './control/CubicBezier.svelte';
-// additional plugins (3rd party / community)
+// Additional plugins (3rd party / community)
 export { default as Image } from './control/Image.svelte';
 export { default as IntervalSlider } from './control/IntervalSlider.svelte';
 export { default as List } from './control/List.svelte';
 export { default as Point } from './control/Point.svelte';
 export { default as RadioGrid } from './control/RadioGrid.svelte';
-// camerakit (1st party plugins)
+// Camerakit (1st party plugins)
 export { default as Ring } from './control/Ring.svelte';
 export { default as RotationEuler } from './control/RotationEuler.svelte';
 export { default as RotationQuaternion } from './control/RotationQuaternion.svelte';
@@ -18,7 +18,7 @@ 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';
-// core (tweakpane building blocks)
+// Core (tweakpane building blocks)
 export { default as Binding } from './core/Binding.svelte';
 export { default as Blade } from './core/Blade.svelte';
 export { default as Button } from './core/Button.svelte';
@@ -27,7 +27,7 @@ export { 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';
-// extra (svelte convenience components)
+// Extra (svelte convenience components)
 export { default as AutoObject } from './extra/AutoObject.svelte';
 export { default as AutoValue } from './extra/AutoValue.svelte';
 export { default as Element } from './extra/Element.svelte';

package/dist/internal/ClsPad.svelte

@@ -14,12 +14,8 @@
 	}
 	function getTotal(add, sub, extra2 = 0) {
 		return (
-			add.reduce((accumulator, key) => {
-				return (accumulator += getPixelValue(getValueOrFallback(theme, key)));
-			}, 0) -
-			sub.reduce((accumulator, key) => {
-				return (accumulator += getPixelValue(getValueOrFallback(theme, key)));
-			}, 0) +
+			add.reduce((acc, key) => (acc += getPixelValue(getValueOrFallback(theme, key))), 0) -
+			sub.reduce((acc, key) => (acc += getPixelValue(getValueOrFallback(theme, key))), 0) +
 			extra2
 		);
 	}