svelte-tweakpane-ui 1.0.1 → 1.1.0

package/dist/theme.js

@@ -33,12 +33,12 @@ 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((accumulator, key) => {
-	accumulator[key] = key;
-	return accumulator;
+export const keys = Object.keys(standard).reduce((acc, key) => {
+	acc[key] = key;
+	return acc;
 }, {});
 const light = {
 	baseBackgroundColor: 'hsla(230, 5%, 90%, 1.00)',
@@ -239,34 +239,33 @@ 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 variableName = keyToCssVariableMap.get(name);
-		if (variableName) {
-			return variableName;
-		} 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) {
-	return theme === undefined || theme[key] === undefined
+	return theme?.[key] === undefined
 		? stringToCssValue(standard[key])
 		: stringToCssValue(theme[key]);
 }
@@ -276,7 +275,6 @@ export function applyTheme(element, theme) {
 		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);
 			}
 		}
@@ -284,27 +282,22 @@ export function applyTheme(element, theme) {
 		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 = rootDocument.style.getPropertyValue(key) || undefined;
-			const isDeviationFromRoot = (rootValue && value !== rootValue) || false;
-			const isDeviationFromStandard = (standardValue && value !== standardValue) || false;
+			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);
 			}
 		}
 	}
@@ -314,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

package/dist/utils.d.ts

@@ -8,7 +8,7 @@ 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;
@@ -71,7 +71,10 @@ export declare function enforceReadonly(
 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>(object: T, ...keys: string[]): T;
+export declare function removeKeys<T extends Record<string, unknown>>(
+	object: T,
+	...keys: string[]
+): T;
 export declare function updateCollapsibility(
 	isUserExpandableEnabled: boolean,
 	element: HTMLElement,

package/dist/utils.js

@@ -1,23 +1,26 @@
-// type aliases and utility functions
-// utility functions
+/* eslint-disable @typescript-eslint/no-unnecessary-type-arguments */
+// Utility functions
 /**
  * For CLS SSR calculation
  */
 export function rowsForMonitor(buffer, rows, graph) {
 	if (graph) {
 		return Math.max(rows ?? 3, 3);
-	} else if (buffer === undefined && rows === undefined) {
+	}
+	if (buffer === undefined && rows === undefined) {
 		return 1;
-	} else if (buffer === undefined && rows !== undefined) {
+	}
+	if (buffer === undefined && rows !== undefined) {
 		return 1;
-	} else if (buffer !== undefined && rows === undefined) {
+	}
+	if (buffer !== undefined && rows === undefined) {
 		return buffer > 1 ? 3 : 1;
-	} else if (buffer === 1) {
+	}
+	if (buffer === 1) {
 		return 1;
-	} else {
-		// both defined
-		return rows ?? 1; // TODO
 	}
+	// Both defined
+	return rows ?? 1; // TODO
 }
 /**
  * Fills an array of length `quantity` with a `value`
@@ -65,7 +68,9 @@ export function enforceReadonly(
 		const componentString = componentName ? `<${componentName}> ` : '';
 		const propertyString = propertyName ? `property "${propertyName}" ` : '';
 		console.error(
-			`Svelte component ${componentString}property ${propertyString}is intended for readonly use.\nAssigning\n"${external}"\nto\n"${internal}"\nis not allowed.`
+			`Svelte component "${componentString}" property "${propertyString}" is intended for readonly use.\nAssigning\n"${String(
+				external
+			)}"\nto\n"${String(internal)}"\nis not allowed.`
 		);
 	}
 }
@@ -73,43 +78,44 @@ export function isRootPane(container) {
 	return container.constructor.name === 'Pane';
 }
 export function clamp(value, min, max) {
-	// prioritize min over max
+	// Prioritize min over max
 	return Math.min(Math.max(value, min), max);
 }
 export function getElementIndex(element) {
 	let index = 0;
+	// eslint-disable-next-line @typescript-eslint/ban-types
 	let sibling = element;
 	while ((sibling = sibling.previousElementSibling) !== null) {
 		index++;
 	}
 	return index;
 }
-// doesn't create a new object, only works with string keys
+// Doesn't create a new object, only works with string keys
 export function removeKeys(object, ...keys) {
 	for (const key of keys) {
 		if (key in object) {
+			// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
 			delete object[key];
 		}
 	}
 	return object;
 }
 function clickBlocker(event) {
-	// only block user clicks, not programmatic ones
-	console.log(event.detail);
+	// Only block user clicks, not programmatic ones
 	if (event.isTrusted) event.stopPropagation();
 }
-// used by folder and pane TODO rewrite to use getSwatchButton etc.
+// Used by folder and pane TODO rewrite to use getSwatchButton etc.
 export function updateCollapsibility(isUserExpandableEnabled, element, titleBarClass, iconClass) {
 	if (element) {
 		const titleBarElement = element.querySelector(`.${titleBarClass}`);
-		if (titleBarElement !== undefined) {
+		if (titleBarElement) {
 			const iconElement = iconClass ? element.querySelector(`.${iconClass}`) : undefined;
 			if (isUserExpandableEnabled) {
 				titleBarElement.removeEventListener('click', clickBlocker, { capture: true });
 				titleBarElement.style.cursor = 'pointer';
 				if (iconElement) iconElement.style.display = 'block';
 			} else {
-				//expanded = true;
+				// Expanded = true;
 				titleBarElement.addEventListener('click', clickBlocker, { capture: true });
 				titleBarElement.style.cursor = 'default';
 				if (iconElement) iconElement.style.display = 'none';
@@ -130,7 +136,8 @@ export function updateCollapsibility(isUserExpandableEnabled, element, titleBarC
  * If both constraints are provided, values may be clipped.
  */
 export function getGridDimensions(itemCount, maxColumns, maxRows) {
-	let rows, columns;
+	let rows;
+	let columns;
 	if (maxColumns && maxRows) {
 		// No flexing; items can exceed the available slots
 		rows = Math.min(Math.ceil(itemCount / maxColumns), maxRows);
@@ -151,6 +158,7 @@ export function getGridDimensions(itemCount, maxColumns, maxRows) {
 	return { columns, rows };
 }
 export function tupleToObject(tuple, keys) {
+	// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 	const result = {};
 	for (const [index, key] of keys.entries()) {
 		// Assert that the assignment is safe
@@ -161,7 +169,7 @@ export function tupleToObject(tuple, keys) {
 export function objectToTuple(object, keys) {
 	return keys.map((key) => object[key]);
 }
-// tweakpane  helpers
+// Tweakpane  helpers
 export function pickerIsOpen(blade) {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	return blade.controller.valueController?.foldable_?.valMap_?.expanded?.value_;
@@ -174,7 +182,7 @@ export function getSwatchButton(blade) {
 		blade.controller?.valueController?.view?.buttonElement;
 	return swatch;
 }
-// utility functions
+// Utility functions
 function quaternionToCssTransform(quaternion) {
 	const [x, y, z, w] = Array.isArray(quaternion)
 		? quaternion
@@ -197,22 +205,20 @@ function quaternionToCssTransform(quaternion) {
 }
 function eulerToCssTransform(
 	rotation,
-	units = 'rad' // rad is component default
+	units = 'rad' // Rad is component default
 ) {
 	const [x, y, z] = Array.isArray(rotation) ? rotation : [rotation.x, rotation.y, rotation.z];
-	// note negative z
+	// Note negative z
 	return `rotateX(${x}${units}) rotateY(${y}${units}) rotateZ(${-z}${units})`;
 }
 function cubicBezierToEaseFunction(cubicBezier) {
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const [x1, y1, x2, y2] = Array.isArray(cubicBezier)
+	const [_x1, y1, _x2, y2] = Array.isArray(cubicBezier)
 		? cubicBezier
 		: [cubicBezier.x1, cubicBezier.y1, cubicBezier.x2, cubicBezier.y2];
-	return (t) => {
-		return (1 - t) ** 3 * 0 + (1 - t) ** 2 * t * 3 * y1 + (1 - t) * t ** 2 * 3 * y2 + t ** 3 * 1;
-	};
+	return (t) =>
+		(1 - t) ** 3 * 0 + (1 - t) ** 2 * t * 3 * y1 + (1 - t) * t ** 2 * 3 * y2 + t ** 3 * 1;
 }
-// library exports
+// Library exports
 export default {
 	/**
 	 * Convenience function for creating easing functions ready for Svelte's tween and animation

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "svelte-tweakpane-ui",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
+  "description": "Wraps UI elements from Tweakpane in a collection of idiomatic Svelte components, and augments Tweakpane with a few extra features for your convenience and enjoyment.",
   "repository": {
     "type": "git",
-    "url": "https://github.com/kitschpatrol/svelte-tweakpane-ui"
+    "url": "git+https://github.com/kitschpatrol/svelte-tweakpane-ui.git"
   },
   "homepage": "https:///kitschpatrol.com/svelte-tweakpane-ui",
   "bugs": {
@@ -187,30 +188,34 @@
     "@0b5vr/tweakpane-plugin-rotation": "^0.2.0",
     "@kitschpatrol/tweakpane-image-plugin": "^2.0.0",
     "@kitschpatrol/tweakpane-textarea-plugin": "^2.0.1",
-    "@tweakpane/core": "^2.0.1",
+    "@tweakpane/core": "^2.0.2",
     "@tweakpane/plugin-camerakit": "^0.3.0",
-    "@tweakpane/plugin-essentials": "^0.2.0",
+    "@tweakpane/plugin-essentials": "^0.2.1",
     "esm-env": "^1.0.0",
     "nanoid": "^5.0.4",
     "svelte-local-storage-store": "^0.6.4",
-    "tweakpane": "^4.0.1",
+    "tweakpane": "^4.0.2",
     "tweakpane-plugin-waveform": "^1.0.0"
   },
   "devDependencies": {
-    "@kitschpatrol/shared-config": "^2.0.1",
+    "@kitschpatrol/shared-config": "^4.0.0",
     "@phenomnomnominal/tsquery": "^6.1.3",
     "@stkb/rewrap": "^0.1.0",
-    "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.27.7",
+    "@sveltejs/adapter-static": "^3.0.0",
+    "@sveltejs/kit": "^2.0.1",
     "@sveltejs/package": "^2.2.3",
-    "@types/eslint": "^8.44.8",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@types/eslint": "^8.44.9",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.10.4",
+    "@types/node": "^20.10.5",
+    "bumpp": "^9.2.1",
+    "eslint": "^8.56.0",
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "npm-run-all": "^4.1.5",
     "postcss-html": "^1.5.0",
     "publint": "^0.2.6",
+    "read-package-up": "^11.0.0",
     "svelte": "^4.2.8",
     "svelte-check": "^3.6.2",
     "svelte-language-server": "^0.16.1",
@@ -219,7 +224,7 @@
     "tslib": "^2.6.2",
     "tsx": "^4.6.2",
     "typescript": "^5.3.3",
-    "vite": "^4.5.1",
+    "vite": "^5.0.10",
     "yaml": "^2.3.4"
   },
   "scripts": {
@@ -251,6 +256,7 @@
     "kit-examples": "tsx ./scripts/generate-kit-examples.ts",
     "kit-preview": "vite preview",
     "lint": "shared-config --check",
+    "release": "pnpm bumpp --commit 'Release: %s' --tag '%s' && pnpm publish --otp $(op read 'op://Personal/Npmjs/one-time password?attribute=otp')",
     "rewrap": "rewrap -i --column 100 `find src \\( -name '*.svelte' -o -name '*.ts'  -o -name '*.html' \\) -type f | grep -v src/examples`",
     "type-check": "tsc --noEmit"
   }

package/{README.md → readme.md}

@@ -9,7 +9,7 @@
 
 The library makes it easy to quickly and declaratively add knobs and dials to your projects using components that feel like they were made for Svelte. It also augments Tweakpane with a few [extra features](https://kitschpatrol.com/svelte-tweakpane-ui/docs/features) for your convenience and enjoyment.
 
-[The components](https://kitschpatrol.com/svelte-tweakpane-ui/docs#components) should be useful for integrating controls and value monitoring in parametrically driven artworks or simulations.
+[The components](https://kitschpatrol.com/svelte-tweakpane-ui/docs#components) should be useful for integrating controls and value monitoring in parametrically driven artworks, data visualizations, creative tools, simulations, etc.
 
 ## Demo