svelte-tweakpane-ui 1.0.0 → 1.0.2

package/dist/internal/InternalPaneDraggable.svelte

@@ -10,8 +10,8 @@
 	import { clamp, getSwatchButton, pickerIsOpen, removeKeys } from '../utils.js';
 	import { onDestroy, onMount } from 'svelte';
 	import { persisted } from 'svelte-local-storage-store';
-	const TITLEBAR_WINDOW_SHADE_SINGLE_CLICK = true;
-	const TITLEBAR_WINDOW_SHADE_DOUBLE_CLICK = false;
+	const titlebarWindowShadeSingleClick = true;
+	const titlebarWindowShadeDoubleClick = false;
 	export let storePositionLocally = true;
 	export let localStoreId = localStoreDefaultId;
 	let positionStore;
@@ -88,96 +88,103 @@
 			const dy = documentHeight - documentHeightPrevious;
 			const centerPercentX = (x + width / 2) / documentWidth;
 			const centerPercentY = (y + containerHeightScaled / 2) / documentHeight;
-			if (!isNaN(dx) && centerPercentX >= 0.5) {
+			if (!Number.isNaN(dx) && centerPercentX >= 0.5) {
 				x += dx;
 			}
-			if (!isNaN(dy) && centerPercentY >= 0.5) {
+			if (!Number.isNaN(dy) && centerPercentY >= 0.5) {
 				y += dy;
 			}
 		}
 	}
-	const clickBlocker = (e) => {
-		e.stopPropagation();
+	const clickBlocker = (event) => {
+		event.stopPropagation();
 	};
 	let startWidth = 0;
 	let startOffsetX = 0;
 	let startOffsetY = 0;
 	let moveDistance = 0;
-	const doubleClickListener = (e) => {
-		e.stopPropagation();
-		if (e.target) {
-			if (width !== void 0 && e.target === widthHandleElement) {
-				if (width < maxAvailablePanelWidth) {
-					width = maxAvailablePanelWidth;
-				} else {
-					width = minWidth;
-				}
-			} else if (TITLEBAR_WINDOW_SHADE_DOUBLE_CLICK && e.target === dragBarElement) {
+	const doubleClickListener = (event) => {
+		event.stopPropagation();
+		if (event.target) {
+			if (width !== void 0 && event.target === widthHandleElement) {
+				width = width < maxAvailablePanelWidth ? maxAvailablePanelWidth : minWidth;
+			} else if (titlebarWindowShadeDoubleClick && event.target === dragBarElement) {
 				paneRef.expanded = !paneRef.expanded;
 			}
 		}
 	};
-	const downListener = (e) => {
-		if (x !== void 0 && y !== void 0 && e.button === 0 && e.target instanceof HTMLElement) {
+	const downListener = (event) => {
+		if (x !== void 0 && y !== void 0 && event.button === 0 && event.target instanceof HTMLElement) {
 			moveDistance = 0;
-			e.target.setPointerCapture(e.pointerId);
-			e.target.addEventListener('pointermove', moveListener);
-			e.target.addEventListener('pointerup', upListener);
+			event.target.setPointerCapture(event.pointerId);
+			event.target.addEventListener('pointermove', moveListener);
+			event.target.addEventListener('pointerup', upListener);
 			startWidth = width ?? 0;
-			startOffsetX = x - e.pageX;
-			startOffsetY = y - e.pageY;
+			startOffsetX = x - event.pageX;
+			startOffsetY = y - event.pageY;
 		}
 	};
-	const moveListener = (e) => {
+	const moveListener = (event) => {
 		if (
-			e.target instanceof HTMLElement &&
+			event.target instanceof HTMLElement &&
 			width !== void 0 &&
 			minWidth !== void 0 &&
 			x !== void 0 &&
 			y !== void 0
 		) {
-			if (e.target === dragBarElement) {
-				moveDistance += Math.sqrt(e.movementX * e.movementX + e.movementY * e.movementY);
-				x = e.pageX + startOffsetX;
-				y = e.pageY + startOffsetY;
-			} else if (e.target === widthHandleElement) {
-				width = clamp(e.pageX + startOffsetX + startWidth - x, minWidth, maxAvailablePanelWidth);
+			if (event.target === dragBarElement) {
+				moveDistance += Math.hypot(event.movementX, event.movementY);
+				x = event.pageX + startOffsetX;
+				y = event.pageY + startOffsetY;
+			} else if (event.target === widthHandleElement) {
+				width = clamp(
+					event.pageX + startOffsetX + startWidth - x,
+					minWidth,
+					maxAvailablePanelWidth
+				);
 			}
 		}
 	};
-	const upListener = (e) => {
-		e.stopImmediatePropagation();
-		if (e.target instanceof HTMLElement) {
-			e.target.releasePointerCapture(e.pointerId);
-			e.target.removeEventListener('pointermove', moveListener);
-			e.target.removeEventListener('pointerup', upListener);
-			if (TITLEBAR_WINDOW_SHADE_SINGLE_CLICK && e.target === dragBarElement) {
-				if (moveDistance < 3 && userExpandable) paneRef.expanded = !paneRef.expanded;
-			}
+	const upListener = (event) => {
+		event.stopImmediatePropagation();
+		if (event.target instanceof HTMLElement) {
+			event.target.releasePointerCapture(event.pointerId);
+			event.target.removeEventListener('pointermove', moveListener);
+			event.target.removeEventListener('pointerup', upListener);
+			if (
+				titlebarWindowShadeSingleClick &&
+				event.target === dragBarElement &&
+				moveDistance < 3 &&
+				userExpandable
+			)
+				paneRef.expanded = !paneRef.expanded;
 		}
 	};
-	const touchScrollBlocker = (e) => {
-		e.preventDefault();
+	const touchScrollBlocker = (event) => {
+		event.preventDefault();
 	};
 	onMount(() => {
 		setDocumentSize();
 		if (paneRef) {
-			containerElement.appendChild(paneRef.element);
+			containerElement.append(paneRef.element);
 		} else {
 			console.warn('no pane ref in draggable');
 		}
 		containerElement.addEventListener('touchmove', touchScrollBlocker, { passive: false });
-		dragBarElement = containerElement.getElementsByClassName('tp-rotv_t')[0];
-		dragBarElement.addEventListener('click', clickBlocker);
-		dragBarElement.addEventListener('dblclick', doubleClickListener);
-		dragBarElement.addEventListener('pointerdown', downListener);
-		widthHandleElement = dragBarElement.parentElement?.appendChild(document.createElement('div'));
-		if (widthHandleElement) {
-			widthHandleElement.className = 'tp-custom-width-handle';
-			widthHandleElement.innerText = '\u2194';
-			widthHandleElement.addEventListener('click', clickBlocker);
-			widthHandleElement.addEventListener('dblclick', doubleClickListener);
-			widthHandleElement.addEventListener('pointerdown', downListener);
+		const dragBarElementCheck = containerElement.querySelector('.tp-rotv_t');
+		if (dragBarElementCheck) {
+			dragBarElement = dragBarElementCheck;
+			dragBarElement.addEventListener('click', clickBlocker);
+			dragBarElement.addEventListener('dblclick', doubleClickListener);
+			dragBarElement.addEventListener('pointerdown', downListener);
+			widthHandleElement = dragBarElement.parentElement?.appendChild(document.createElement('div'));
+			if (widthHandleElement) {
+				widthHandleElement.className = 'tp-custom-width-handle';
+				widthHandleElement.textContent = '\u2194';
+				widthHandleElement.addEventListener('click', clickBlocker);
+				widthHandleElement.addEventListener('dblclick', doubleClickListener);
+				widthHandleElement.addEventListener('pointerdown', downListener);
+			}
 		}
 	});
 	onDestroy(() => {
@@ -204,18 +211,13 @@
 	});
 	function updateResizability(isResizable) {
 		if (widthHandleElement) {
-			if (isResizable) {
-				widthHandleElement.style.display = 'block';
-			} else {
-				widthHandleElement.style.display = 'none';
-			}
+			widthHandleElement.style.display = isResizable ? 'block' : 'none';
 		}
 	}
 	$: paneRef && resizable && updateResizability(resizable);
 	function recursiveCollapse(children, maxToCollapse = Number.MAX_SAFE_INTEGER) {
-		console.log(maxToCollapse);
 		if (maxToCollapse > 0) {
-			children.forEach((child) => {
+			for (const child of children) {
 				if ('expanded' in child) {
 					if (child.expanded) {
 						maxToCollapse--;
@@ -231,7 +233,7 @@
 						swatchButton.click();
 					}
 				}
-			});
+			}
 		}
 	}
 	$: if (
@@ -270,7 +272,8 @@
 				containerHeightScaled = containerHeight;
 			} else {
 				const style = window.getComputedStyle(containerElement);
-				const vPadding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+				const vPadding =
+					Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
 				containerHeightScaled = (containerHeight - vPadding) * scale + vPadding;
 			}
 		}
@@ -280,9 +283,9 @@
 <svelte:window on:resize={setDocumentSize} />
 
 <div
-	bind:this={containerElement}
 	bind:clientHeight={containerHeight}
 	bind:clientWidth={containerWidth}
+	bind:this={containerElement}
 	on:focus|capture={() => {
 		zIndexLocal = ++zIndexGlobal;
 	}}
@@ -323,6 +326,11 @@ draggable-container"
 	/* stylelint-disable-next-line selector-class-pattern */
 	div.draggable-container :global(div.tp-rotv_t) {
 		cursor: grab;
+		overflow: hidden;
+		/* Ensure draggable hit zone does not collapse if title is missing */
+		/* Fixes #1 */
+		height: 100%;
+		text-overflow: ellipsis;
 	}
 
 	div.draggable-container.not-collapsable :global(div.tp-rotv_t) {

package/dist/internal/InternalPaneFixed.svelte

@@ -8,9 +8,7 @@
 	export let title = 'Tweakpane';
 	let paneRef;
 	let paneContainer;
-	$: paneRef !== void 0 &&
-		paneRef.element.parentElement &&
-		(paneContainer = paneRef.element.parentElement);
+	$: paneRef?.element.parentElement && (paneContainer = paneRef.element.parentElement);
 	$: paneContainer !== void 0 &&
 		x !== void 0 &&
 		(paneContainer.style.setProperty('right', 'unset'),

package/dist/internal/InternalPaneInline.svelte

@@ -7,14 +7,14 @@
 	export let theme = {
 		baseBorderRadius: '0px',
 		baseShadowColor: 'hsla(0, 0%, 0%, 0)'
-		// bladeBorderRadius: '0px'
+		// BladeBorderRadius: '0px'
 	};
 	let paneRef;
 	let containerElement;
 	onMount(() => {
 		if (paneRef) {
 			const fixedContainer = paneRef.element.parentElement;
-			containerElement.appendChild(paneRef.element);
+			containerElement.append(paneRef.element);
 			fixedContainer?.remove();
 		} else {
 			console.warn('paneRef is undefined');
@@ -22,7 +22,7 @@
 	});
 </script>
 
-<div bind:this={containerElement} style:width={width !== undefined ? `${width}px` : null}>
+<div bind:this={containerElement} style:width={width === undefined ? null : `${width}px`}>
 	<GenericPane bind:expanded bind:paneRef {theme} {...removeKeys($$restProps, 'position')}>
 		<slot />
 	</GenericPane>

package/dist/monitor/FpsGraph.svelte

@@ -46,12 +46,15 @@
 	function startObservingMeasuredFpsValue() {
 		stopObservingMeasuredFpsValue();
 		const targetNode = fpsBlade.controller.valueController.view.valueElement;
-		if (!targetNode || !targetNode.innerHTML) return;
+		if (!targetNode?.innerHTML) return;
 		observer = new MutationObserver((mutations) => {
 			for (const mutation of mutations) {
 				if (mutation.type === 'characterData' || mutation.type === 'childList') {
-					const fps = parseInt(mutation.target.innerText);
-					!isNaN(fps) && dispatch('change', fps);
+					const fpsText = mutation.target.textContent;
+					if (fpsText !== null) {
+						const fps = Number.parseInt(fpsText, 10);
+						!Number.isNaN(fps) && dispatch('change', fps);
+					}
 				}
 			}
 		});

package/dist/monitor/FpsGraph.svelte.d.ts

@@ -181,8 +181,8 @@ export type FpsGraphSlots = typeof __propDef.slots;
  * <Slider bind:value={rotationSpeed} label="Rotation Speed" />
  *
  * <div class="demo">
- * {#each Array.from({ length: gridSize }, (_, i) => i) as x}
- *   {#each Array.from({ length: gridSize }, (_, i) => i) as y}
+ * {#each Array.from({ length: gridSize }, (_, index) => index) as x}
+ *   {#each Array.from({ length: gridSize }, (_, index) => index) as y}
  *     <div
  *       class="box"
  *       style:left="{(x / gridSize) * 100}%"

package/dist/monitor/Monitor.svelte.d.ts

@@ -7,11 +7,9 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: W;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, W>;
 				/** 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`
@@ -38,10 +36,10 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 					| (W extends string
 							? import('tweakpane').StringMonitorParams
 							: W extends boolean
-							  ? import('tweakpane').BooleanMonitorParams
-							  : W extends number
-							    ? import('tweakpane').NumberMonitorParams
-							    : import('@tweakpane/core').BaseMonitorParams)
+								? import('tweakpane').BooleanMonitorParams
+								: W extends number
+									? import('tweakpane').NumberMonitorParams
+									: import('@tweakpane/core').BaseMonitorParams)
 					| undefined;
 				/**
 				 * Custom color scheme.
@@ -113,11 +111,9 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 							 * 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`
@@ -202,7 +198,7 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 						rows?: number | undefined;
 					},
 					'options' | 'ref' | 'plugin' | 'interval'
-			  > & {
+				> & {
 					/**
 					 * A value to monitor.
 					 * @bindable
@@ -213,20 +209,18 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 					 * @default `false`
 					 */
 					multiline?: boolean | undefined;
-			  }
+				}
 			: W extends boolean
-			  ? Omit<
+				? Omit<
 						Omit<
 							{
 								/**
 								 * 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`
@@ -311,26 +305,24 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 							rows?: number | undefined;
 						},
 						'options' | 'ref' | 'plugin' | 'interval'
-			    > & {
+					> & {
 						/**
 						 * A value to monitor.
 						 * @bindable
 						 */
 						value: boolean;
-			    }
-			  : W extends number
-			    ? Omit<
+					}
+				: W extends number
+					? Omit<
 							Omit<
 								{
 									/**
 									 * 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`
@@ -415,7 +407,7 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 								rows?: number | undefined;
 							},
 							'options' | 'ref' | 'plugin'
-			      > & {
+						> & {
 							/**
 							 * A value to monitor.
 							 * @bindable
@@ -442,14 +434,14 @@ declare class __sveltets_Render<W extends number | string | boolean | unknown> {
 							 * @default `false`
 							 */
 							graph?: boolean | undefined;
-			      }
-			    : {
+						}
+					: {
 							/**
 							 * A value to monitor.
 							 * @bindable
 							 * */
 							value: string | number | boolean;
-			      });
+						});
 	events(): {} & {
 		[evt: string]: CustomEvent<any>;
 	};
@@ -501,7 +493,7 @@ export type MonitorSlots<W extends number | string | boolean | unknown> = Return
  *
  * setInterval(() => {
  *   booleanToMonitor = !booleanToMonitor;
- *   stringToMonitor = stringToMonitor.split('').reverse().join('');
+ *   stringToMonitor = [...stringToMonitor].reverse().join('');
  * }, 1000);
  * </script>
  *

package/dist/monitor/Profiler.svelte

@@ -7,11 +7,11 @@
 	import { fillWith } from '../utils';
 	import { BROWSER } from 'esm-env';
 	import { createEventDispatcher, onDestroy } from 'svelte';
-	function _measure(name, fn) {
-		profilerBlade?.measure(name, fn);
+	function _measure(name, functionToMeasure) {
+		profilerBlade?.measure(name, functionToMeasure);
 	}
-	async function _measureAsync(name, fn) {
-		profilerBlade?.measureAsync(name, fn);
+	async function _measureAsync(name, functionToMeasure) {
+		await profilerBlade?.measureAsync(name, functionToMeasure);
 	}
 	export let label = void 0;
 	export let bufferSize = void 0;
@@ -33,12 +33,15 @@
 	function startObservingMeasuredValue() {
 		stopObservingMeasuredValue();
 		const targetNode = profilerBlade.controller.view.valueElement;
-		if (!targetNode || !targetNode.innerHTML) return;
+		if (!targetNode?.innerHTML) return;
 		observer = new MutationObserver((mutations) => {
 			for (const mutation of mutations) {
 				if (mutation.type === 'characterData' || mutation.type === 'childList') {
-					const delta = parseFloat(mutation.target.innerText);
-					!isNaN(delta) && dispatch('change', delta);
+					const fpsText = mutation.target.textContent;
+					if (fpsText !== null) {
+						const delta = Number.parseFloat(fpsText);
+						!Number.isNaN(delta) && dispatch('change', delta);
+					}
 				}
 			}
 		});

package/dist/monitor/Profiler.svelte.d.ts

@@ -3,8 +3,11 @@ import type { ProfilerBladeMeasureHandler } from '@0b5vr/tweakpane-plugin-profil
 import type { Simplify } from '../utils';
 export type ProfilerCalcMode = 'frame' | 'mean' | 'median';
 export type ProfilerChangeEvent = CustomEvent<number>;
-export type ProfilerMeasure = (name: string, fn: () => void) => void;
-export type ProfilerMeasureAsync = (name: string, fn: () => Promise<void>) => Promise<void>;
+export type ProfilerMeasure = (name: string, functionToMeasure: () => void) => void;
+export type ProfilerMeasureAsync = (
+	name: string,
+	functionToMeasure: () => Promise<void>
+) => Promise<void>;
 export type ProfilerMeasureHandler = Simplify<ProfilerBladeMeasureHandler>;
 import type { ProfilerBladeApi as ProfilerRef } from '@0b5vr/tweakpane-plugin-profiler/dist/types/ProfilerBladeApi.js';
 import type { ProfilerBladePluginParams as ProfilerOptions } from '@0b5vr/tweakpane-plugin-profiler/dist/types/ProfilerBladePluginParams.js';
@@ -201,10 +204,10 @@ export type ProfilerSlots = typeof __propDef.slots;
  * let loopExponent = 1;
  *
  * // helper to test Math functions
- * function hardWork(fn: (n: number) => number, exponent: number): void {
- *   measure(fn.name, () => {
+ * function hardWork(function_: (n: number) => number, exponent: number): void {
+ *   measure(function_.name, () => {
  *     for (let sum = 0; sum < Number('1e' + exponent); sum++) {
- *       fn(sum);
+ *       function_(sum);
  *     }
  *   });
  * }

package/dist/monitor/WaveformMonitor.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]: WaveformMonitorValue;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, WaveformMonitorValue>;
 				/** 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/theme.d.ts

@@ -35,9 +35,7 @@ type ThemeKeys = {
 	monitorForegroundColor?: ThemeColorValue;
 	pluginImageDraggingColor?: ThemeColorValue;
 };
-type CustomThemeKeys = {
-	[key: string]: ThemeColorValue;
-};
+type CustomThemeKeys = Record<string, ThemeColorValue>;
 export declare const keys: Record<string, string>;
 export declare const presets: {
 	/** Dark blue theme. */

package/dist/theme.js

@@ -33,7 +33,7 @@ const standard = {
 	monitorBackgroundColor: 'rgba(0, 0, 0, 0.2)',
 	monitorForegroundColor: 'rgba(187, 188, 196, 0.7)',
 	pluginImageDraggingColor: 'hsla(230, 100%, 66%, 1)'
-	// pluginThumbnailListHeight: '400px', pluginThumbnailListThumbSize: '20px',
+	// PluginThumbnailListHeight: '400px', pluginThumbnailListThumbSize: '20px',
 	// pluginThumbnailListWidth: '200px'
 };
 export const keys = Object.keys(standard).reduce((acc, key) => {
@@ -239,76 +239,67 @@ const keyToCssVariableMap = new Map([
 function stringToCssValue(v) {
 	if (v === undefined) {
 		return undefined;
-	} else if (typeof v === 'string') {
+	}
+	if (typeof v === 'string') {
 		return v;
-	} else if (isRgbaColorObject(v)) {
+	}
+	if (isRgbaColorObject(v)) {
 		return `rgba(${v.r}, ${v.g}, ${v.b}, ${v.a})`;
-	} else if (isRgbColorObject(v)) {
+	}
+	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
+	// 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}"`);
-		}
 	}
+	const variableName = keyToCssVariableMap.get(name);
+	if (variableName) {
+		return variableName;
+	}
+	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]);
-	}
+	return theme?.[key] === undefined
+		? stringToCssValue(standard[key])
+		: stringToCssValue(theme[key]);
 }
 export function applyTheme(element, theme) {
-	const rootDoc = getWindowDocument().documentElement;
+	const rootDocument = getWindowDocument().documentElement;
 	if (theme === undefined) {
-		Object.keys(standard).forEach((k) => {
+		for (const k of Object.keys(standard)) {
 			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]) => {
+		for (const [k, v] of Object.entries(theme)) {
 			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
+			// 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;
+			const rootValue = rootDocument.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);
-				}
+			} else if (element.style.getPropertyValue(key).length > 0) {
+				element.style.removeProperty(key);
 			}
-		});
+		}
 	}
 }
 /**
@@ -316,12 +307,12 @@ export function applyTheme(element, theme) {
  * mode toggle.
  */
 export function setGlobalDefaultTheme(theme) {
-	// wait for dom ready... better outside?
-	if (typeof window !== 'undefined' && window.document) {
+	// Wait for dom ready... better outside?
+	if (window?.document) {
 		applyTheme(getWindowDocument().documentElement, theme);
 	}
 }
-// library exports
+// Library exports
 export default {
 	/**
 	 * A collection of default theme color schemes, matching those provided in the Tweakpane