svelte-tweakpane-ui 1.0.0 → 1.0.2

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;
@@ -65,13 +65,16 @@ export declare function enforceReadonly(
 	internal: unknown,
 	external: unknown,
 	componentName?: string,
-	propName?: string,
+	propertyName?: 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 removeKeys<T extends Record<string, unknown>>(
+	object: T,
+	...keys: string[]
+): T;
 export declare function updateCollapsibility(
 	isUserExpandableEnabled: boolean,
 	element: HTMLElement,
@@ -103,19 +106,19 @@ export declare function tupleToObject<
 	}
 >(tuple: number[], keys: T[]): O;
 export declare function objectToTuple<T extends string, O extends Record<T, number>>(
-	obj: O,
+	object: O,
 	keys: [T]
 ): [number];
 export declare function objectToTuple<T extends string, O extends Record<T, number>>(
-	obj: O,
+	object: O,
 	keys: [T, T]
 ): [number, number];
 export declare function objectToTuple<T extends string, O extends Record<T, number>>(
-	obj: O,
+	object: O,
 	keys: [T, T, T]
 ): [number, number, number];
 export declare function objectToTuple<T extends string, O extends Record<T, number>>(
-	obj: O,
+	object: O,
 	keys: [T, T, T, T]
 ): [number, number, number, number];
 export declare function pickerIsOpen(blade: BladeApi<BladeController<View>>): boolean;

package/dist/utils.js

@@ -1,29 +1,32 @@
-// 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 = undefined, rows = undefined, graph = undefined) {
+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`
  */
 export function fillWith(value, quantity) {
-	return [...Array(quantity).fill(value)];
+	return Array.from({ length: quantity }, () => value);
 }
 /**
  * There's no way to enforce readonly properties in Svelte components, so this is a workaround. See
@@ -52,7 +55,7 @@ export function enforceReadonly(
 	internal,
 	external,
 	componentName,
-	propName,
+	propertyName,
 	allowAssignmentToUndefined
 ) {
 	allowAssignmentToUndefined ??= false;
@@ -63,9 +66,11 @@ export function enforceReadonly(
 		)
 	) {
 		const componentString = componentName ? `<${componentName}> ` : '';
-		const propString = propName ? `property "${propName}" ` : '';
+		const propertyString = propertyName ? `property "${propertyName}" ` : '';
 		console.error(
-			`Svelte component ${componentString}property ${propString}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,45 @@ 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
-export function removeKeys(obj, ...keys) {
-	keys.forEach((key) => {
-		if (key in obj) {
-			delete obj[key];
+// 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 obj;
+	}
+	return object;
 }
-function clickBlocker(e) {
-	// only block user clicks, not programmatic ones
-	console.log(e.detail);
-	if (e.isTrusted) e.stopPropagation();
+function clickBlocker(event) {
+	// Only block user clicks, not programmatic ones
+	console.log(event.detail);
+	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.getElementsByClassName(titleBarClass)[0];
-		if (titleBarElement !== undefined) {
-			const iconElement = iconClass ? element.getElementsByClassName(iconClass)[0] : undefined;
+		const titleBarElement = element.querySelector(`.${titleBarClass}`);
+		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 +137,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,17 +159,18 @@ 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 = {};
-	keys.forEach((key, index) => {
+	for (const [index, key] of keys.entries()) {
 		// Assert that the assignment is safe
 		result[key] = tuple[index];
-	});
+	}
 	return result;
 }
-export function objectToTuple(obj, keys) {
-	return keys.map((key) => obj[key]);
+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 +183,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 +206,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,10 @@
 {
   "name": "svelte-tweakpane-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "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,57 +187,46 @@
     "@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",
+    "bumpp": "^9.2.1",
     "esm-env": "^1.0.0",
-    "nanoid": "^5.0.3",
+    "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": "^4.0.0",
     "@phenomnomnominal/tsquery": "^6.1.3",
     "@stkb/rewrap": "^0.1.0",
     "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.27.6",
+    "@sveltejs/kit": "^1.30.3",
     "@sveltejs/package": "^2.2.3",
-    "@types/eslint": "^8.44.8",
+    "@types/eslint": "^8.44.9",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.10.2",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
-    "cspell": "^8.1.0",
-    "eslint": "^8.55.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-perfectionist": "^2.5.0",
-    "eslint-plugin-svelte": "^2.35.1",
+    "@types/node": "^20.10.4",
+    "eslint": "^8.56.0",
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
-    "markdownlint": "^0.32.1",
-    "markdownlint-cli": "^0.37.0",
     "npm-run-all": "^4.1.5",
     "postcss-html": "^1.5.0",
-    "prettier": "^3.1.0",
-    "prettier-plugin-astro": "^0.12.2",
-    "prettier-plugin-pkg": "^0.18.0",
-    "prettier-plugin-svelte": "^3.1.2",
     "publint": "^0.2.6",
-    "stylelint": "^15.11.0",
-    "stylelint-config-clean-order": "^5.2.0",
-    "stylelint-config-html": "^1.1.0",
-    "stylelint-config-standard": "^34.0.0",
+    "read-package-up": "^11.0.0",
     "svelte": "^4.2.8",
     "svelte-check": "^3.6.2",
     "svelte-language-server": "^0.16.1",
     "svelte2tsx": "^0.6.27",
-    "ts-morph": "^20.0.0",
+    "ts-morph": "^21.0.1",
     "tslib": "^2.6.2",
-    "tsx": "^4.6.1",
-    "typescript": "^5.3.2",
-    "vite": "^4.5.0",
+    "tsx": "^4.6.2",
+    "typescript": "^5.3.3",
+    "vite": "^4.5.1",
     "yaml": "^2.3.4"
   },
+  "_id": "svelte-tweakpane-ui@1.0.2",
+  "readme": "ERROR: No README data found!",
   "scripts": {
     "build": "run-s --print-label build:*",
     "build:01-sync": "pnpm run check",
@@ -246,9 +235,9 @@
     "build:04-format": "pnpm run format",
     "build:05-package": "svelte-package && publint",
     "build:06-heal-dts-comments": "tsx ./scripts/heal-dts-comments.ts",
-    "build:07-strip-component-docs": "tsx ./scripts/strip-component-docs.ts",
+    "build:07-strip-component-documentation": "tsx ./scripts/strip-component-documentation.ts",
     "build:08-format-library": "prettier --ignore-path --plugin prettier-plugin-svelte --write ./dist",
-    "build:09-doc-data": "tsx ./scripts/generate-doc-data.ts",
+    "build:09-doc-data": "tsx ./scripts/generate-documentation-data.ts",
     "build:10-examples-to-kit": "tsx ./scripts/generate-kit-examples.ts",
     "build:11-examples-to-docs": "tsx ./scripts/generate-example-components.ts",
     "build:12-acknowledgments-data": "mkdir -p ./docs/src/content/acknowledgments && pnpm licenses list --json > ./docs/src/content/acknowledgments/acknowledgments-lib.json",
@@ -260,21 +249,15 @@
     "docs-dev": "pnpm -C ./docs run dev",
     "docs-preview": "pnpm -C ./docs run preview",
     "format": "run-s --print-label format:*",
-    "format:1-eslint": "eslint --fix ./src ./scripts ./docs/src",
-    "format:2-stylelint": "stylelint --fix './src/**/*.{css,svelte,html}'",
-    "format:3-rewrap": "rewrap -i --column 100 `find src \\( -name '*.svelte' -o -name '*.ts'  -o -name '*.html' \\) -type f | grep -v src/examples`",
-    "format:4-prettier": "prettier --plugin=prettier-plugin-svelte --plugin=prettier-plugin-astro --write .",
-    "format:5-embedded": "tsx ./scripts/format-embedded-code.ts",
+    "format:1-shared": "shared-config --fix",
+    "format:2-embedded": "tsx ./scripts/format-embedded-code.ts",
     "kit-build": "pnpm run kit-examples && vite build",
     "kit-dev": " pnpm run kit-examples && vite dev",
     "kit-examples": "tsx ./scripts/generate-kit-examples.ts",
     "kit-preview": "vite preview",
-    "lint": "run-p --print-label lint:*",
-    "lint:eslint": "eslint ./src ./scripts ./docs/src",
-    "lint:markdown": "markdownlint **/*.{md,mdx} --ignore node_modules",
-    "lint:prettier": "prettier --plugin=prettier-plugin-svelte --plugin=prettier-plugin-astro --check .",
-    "lint:spelling": "cspell --quiet .",
-    "lint:stylelint": "stylelint './src/**/*.{css,svelte,html}'",
-    "lint:typescript": "tsc --noEmit"
+    "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}

@@ -1,13 +1,20 @@
 # svelte-tweakpane-ui
 
+[![NPM Package](https://img.shields.io/npm/v/svelte-tweakpane-ui.svg)](https://npmjs.com/package/svelte-tweakpane-ui)
+[![Documentation](https://img.shields.io/badge/-documentation-ffdd00?logo=readthedocs&logoColor=222222)](https://kitschpatrol.com/svelte-tweakpane-ui)
+
 ## Overview
 
-🎛️ **_Svelte Tweakpane UI_** wraps user-interface elements from the excellent [Tweakpane](https://cocopon.github.io/tweakpane/) library in a collection of 31 idiomatic, reactive, type-safe, carefully-crafted [Svelte](https://svelte.dev) components.
+🎛️ **_Svelte Tweakpane UI_** wraps user-interface elements from the excellent [Tweakpane](https://cocopon.github.io/tweakpane/) library in a collection of 31 idiomatic, reactive, type-safe, carefully-crafted, and obsessively-documented [Svelte](https://svelte.dev) components.
 
-The library makes it easy to quickly and declaratively add knobs and dials to your projects using components that feel like they belong in the DOM. It also augments Tweakpane with a few [extra features](https://kitschpatrol.com/svelte-tweakpane-ui/docs/features) for your convenience and enjoyment.
+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.
 
+## Demo
+
+![Svelte Tweakpane UI quick demo](./docs/public/quick-demo.gif)
+
 ## Documentation
 
 **_Please see the documentation site for much more information:_**  
@@ -28,7 +35,7 @@ npm install svelte-tweakpane-ui
   import { Button } from 'svelte-tweakpane-ui';
 </script>
 
-<Button on:click={() => alert('Hi from STUI')} />
+<Button on:click={() => alert('🎛️')} />
 ```
 
 ---