@vanilla-bean/components 1.0.0

package/utils/README.md

@@ -0,0 +1,176 @@
+# Utils
+
+General-purpose utility functions shared across components. All are available as named exports from the top-level package.
+
+```js
+import { debounce, orderBy, toCamelCase } from '@vanilla-bean/components';
+```
+
+## String
+
+### `capitalize(string, recursive?, split?)`
+
+Capitalizes the first letter of each word. Set `recursive` to also capitalize after digits. `split` defaults to a space.
+
+```js
+capitalize('hello world'); // → 'Hello World'
+capitalize('step1thing', true); // → 'Step1Thing'
+```
+
+### `toCamelCase(string, splitter?)` / `fromCamelCase(string, joiner?)`
+
+Round-trip between prose and camelCase.
+
+```js
+toCamelCase('component options'); // → 'componentOptions'
+fromCamelCase('componentOptions'); // → 'component options'
+```
+
+### `toPascalCase(string)`
+
+Like `toCamelCase` but capitalizes the first word too. Useful for generated class names.
+
+```js
+toPascalCase('my component'); // → 'MyComponent'
+```
+
+### `removeExcessIndentation(string)`
+
+Strips the minimum common leading whitespace from every line. Useful for cleaning up indented template literals before rendering.
+
+## Data
+
+### `orderBy(orders)`
+
+Returns an `Array.sort` comparator. `orders` is a single `{ property, direction }` object or an array of them for multi-key sorting.
+
+```js
+items.sort(orderBy({ property: 'name', direction: 'asc' }));
+items.sort(
+	orderBy([
+		{ property: 'group', direction: 'asc' },
+		{ property: 'name', direction: 'asc' },
+	]),
+);
+```
+
+### `debounce(callback, delay?)` / `throttle(callback, delay?)`
+
+Standard debounce and throttle. Default delay is 400ms.
+
+```js
+const save = debounce(value => api.save(value), 300);
+const onScroll = throttle(() => updatePosition(), 100);
+```
+
+### `delay(ms)`
+
+A promise that resolves after `ms` milliseconds.
+
+```js
+await delay(500); // pause for 500ms
+```
+
+### `retry(callback, options?)`
+
+Retries an async function on failure. Options: `{ attempts, interval }`.
+
+```js
+const data = await retry(() => fetch('/api/data'), { attempts: 3, interval: 1000 });
+```
+
+### `convertRange(value, sourceRange, targetRange)`
+
+Maps a number from one numeric range to another.
+
+```js
+convertRange(0.5, [0, 1], [0, 100]); // → 50
+convertRange(128, [0, 255], [0, 1]); // → 0.502
+```
+
+### `conditionalList(items)`
+
+Builds a flat array from `{ if, thenItem, alwaysItem }` entries, keeping only those where `if` is truthy. Used internally for conditional component content.
+
+```js
+conditionalList([
+	{ alwaysItem: 'home' },
+	{ if: isLoggedIn, thenItem: 'dashboard' },
+	{ if: isAdmin, thenItem: 'settings' },
+]); // → ['home', 'dashboard'] when isLoggedIn, not isAdmin
+```
+
+### `getCustomProperties(object)`
+
+Returns all own enumerable properties of an object, excluding prototype members.
+
+## Random
+
+### `rand(min?, max?)` / `randInt(min?, max?)` / `randFromArray(array)`
+
+```js
+rand(0, 1); // float in [0, 1)
+randInt(1, 6); // integer in [1, 6]
+randFromArray(['a', 'b', 'c']); // random element
+```
+
+## Color
+
+### `stringToColor(string, config?)`
+
+Deterministic color from any string. Same input always produces the same hue. Useful for avatars or tag coloring.
+
+```js
+stringToColor('alice'); // always the same hue for 'alice'
+stringToColor('bob'); // different but stable hue
+```
+
+### `rgbDelta(rgbA, rgbB)`
+
+Perceptual distance between two RGB arrays `[r, g, b]`. Used internally by ColorPicker to score color accuracy in ShapeMatchGame.
+
+```js
+rgbDelta([255, 0, 0], [200, 0, 0]); // → ~55
+```
+
+## Element
+
+### `isDescendantOf(element, parentElement)`
+
+Whether `element` is anywhere inside `parentElement` in the DOM tree.
+
+### `getElementsContainingText(text, options?)`
+
+Returns all DOM elements whose visible text content matches `text`. Useful for testing and demo navigation.
+
+## Browser
+
+### `copyToClipboard(text)` / `readClipboard()`
+
+Clipboard read/write. `copyToClipboard` returns `true` on success.
+
+### `vibrate(durationPattern?)` / `tactileResponse()`
+
+Haptic feedback on mobile. `tactileResponse` is a 30ms pulse shorthand.
+
+### `isMac()`
+
+Whether the current user agent is macOS. Useful for displaying ⌘ vs Ctrl keybindings.
+
+### `isDev`
+
+`true` outside production bundles. Guards dev-only warnings.
+
+## Class
+
+### `buildClassList(...classNames)` / `buildClassName(...classNames)`
+
+Flatten nested arrays, filter falsy values, and produce a class name list or space-joined string. Used internally by `addClass`.
+
+```js
+buildClassName('btn', isActive && 'active', null, ['size-lg']); // → 'btn active size-lg'
+```
+
+### `classSafeNanoid(size?)`
+
+Generates a nanoid that is safe to use as a CSS class name: no leading digits, no special characters.

package/utils/browser.js

@@ -0,0 +1,92 @@
+/**
+ * Whether the current runtime is in development mode.
+ * Checks both process.env.NODE_ENV (Node/Bun/webpack) and import.meta.env (Vite/ESBuild).
+ * Defaults to false (production-safe) when neither is set.
+ */
+export const isDev = (() => {
+	try {
+		if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'production') return false;
+		if (typeof import.meta !== 'undefined' && import.meta.env?.PROD === true) return false;
+		if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') return true;
+		if (
+			typeof import.meta !== 'undefined' &&
+			(import.meta.env?.DEV === true || import.meta.env?.NODE_ENV === 'development')
+		)
+			return true;
+		// Bare browser import with no bundler — treat localhost as dev so warnings surface
+		if (typeof location !== 'undefined' && (location.hostname === 'localhost' || location.hostname === '127.0.0.1'))
+			return true;
+		return false;
+	} catch {
+		return false;
+	}
+})();
+
+/**
+ * Check if the current device is a mac
+ * @returns {boolean} isMac
+ */
+export const isMac = () =>
+	// eslint-disable-next-line compat/compat
+	(window.navigator?.userAgentData?.platform || window.navigator.platform).toLowerCase().startsWith('mac');
+
+/**
+ * Copy a piece of text to the clipboard
+ * @param {string} text - The text to copy to the clipboard
+ * @returns {boolean} A boolean indicating the success of the action
+ */
+export const copyToClipboard = text => {
+	if (window.isSecureContext && navigator.clipboard) {
+		navigator.clipboard.writeText(text);
+
+		return true;
+	}
+
+	const textarea = document.createElement('textarea');
+
+	textarea.value = text ?? '';
+	textarea.style.position = 'fixed';
+	textarea.style.opacity = '0';
+	document.body.appendChild(textarea);
+	textarea.select();
+
+	let ok = false;
+
+	try {
+		ok = document.execCommand('copy');
+	} catch {
+		// execCommand not supported
+	}
+
+	textarea.remove();
+
+	return ok;
+};
+
+/**
+ * Get the current text from the clipboard
+ * @returns {string} The current clipboard content
+ */
+export const readClipboard = async () => {
+	if (!window.isSecureContext || !navigator.clipboard) return false;
+
+	return await window.navigator.clipboard.readText();
+};
+
+/**
+ * Vibrate the device (if supported)
+ * @param {number|[...number]} durationPattern - The duration(s) to vibrate (for an array: odd indexes are vibrate and even are pause)
+ * @returns {void}
+ */
+export const vibrate = (durationPattern = 30) => {
+	if (!navigator.vibrate) return;
+
+	// eslint-disable-next-line compat/compat
+	navigator.vibrate(durationPattern);
+};
+
+/**
+ * Vibrate the device for a short burst to serve as a tactile response (if supported)
+ * @returns {void}
+ */
+export const tactileResponse = () => vibrate(30);

package/utils/class.js

@@ -0,0 +1,30 @@
+import { customAlphabet } from 'nanoid';
+
+/**
+ * Generate secure unique ID that is safe to use as a class name or id
+ * @param {number} size - The size of the ID. The default size is 10
+ * @returns {string} Random id string
+ */
+export const classSafeNanoid = (size = 10) =>
+	// eslint-disable-next-line spellcheck/spell-checker
+	customAlphabet('ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz-', size)();
+
+/**
+ * Convert any number of strings or arrays into a single array with no duplicates
+ * @param {...any} classNames - strings or arrays of strings
+ * @returns {Array} classList
+ */
+export const buildClassList = (...classNames) => [
+	...new Set(
+		classNames
+			.flat(Number.POSITIVE_INFINITY)
+			.filter(className => typeof className === 'string' && className.length > 0 && !/^\s+$/.test(className)),
+	),
+];
+
+/**
+ * Convert any number of strings or arrays into a single space delineated string with no duplicates
+ * @param {...any} classNames - strings or arrays of strings
+ * @returns {string} className
+ */
+export const buildClassName = (...classNames) => buildClassList(...classNames).join(' ');

package/utils/color.js

@@ -0,0 +1,81 @@
+import { random as randomColor } from '@ctrl/tinycolor';
+
+/**
+ * Create a hsl color string using a string as the seed
+ * @param {string} string - The string to use as the color seed
+ * @param {object} config - Min/Max constraints for the color
+ * @param {[number, number]} config.h - The hue constraints [min, max]
+ * @param {[number, number]} config.s - The saturation constraints [min, max]
+ * @param {[number, number]} config.l - The lightness constraints [min, max]
+ * @returns {string} hsl color string
+ */
+export const stringToColor = (string, config = {}) => {
+	const { h, s, l } = { h: [0, 360], s: [75, 100], l: [40, 60], ...config };
+
+	if (!string) return randomColor().toRgbString();
+
+	const range = (hash, min, max) => {
+		const diff = max - min;
+		const x = ((hash % diff) + diff) % diff;
+
+		return x + min;
+	};
+
+	let hash = 0;
+
+	for (let x = 0; x < string.length; ++x) {
+		hash = string.codePointAt(x) + ((hash << 5) - hash);
+		hash &= hash;
+	}
+
+	return `hsl(${range(hash, h[0], h[1])}, ${range(hash, s[0], s[1])}%, ${range(hash, l[0], l[1])}%)`;
+};
+
+const rgb2lab = rgb => {
+	let r = rgb[0] / 255,
+		g = rgb[1] / 255,
+		b = rgb[2] / 255,
+		x,
+		y,
+		z;
+	r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
+	g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
+	b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
+	x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
+	y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1;
+	z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
+	x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
+	y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
+	z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
+	return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+};
+
+/**
+ * Get the delta between 2 rgb colors
+ * @param {[number, number, number]} rgbA - The rgb values (0-255) in an array [r, g, b]
+ * @param {[number, number, number]} rgbB - The rgb values (0-255) in an array [r, g, b]
+ * @returns {number} The color delta
+ */
+export const rgbDelta = (rgbA, rgbB) => {
+	const labA = rgb2lab(rgbA);
+	const labB = rgb2lab(rgbB);
+	const deltaL = labA[0] - labB[0];
+	const deltaA = labA[1] - labB[1];
+	const deltaB = labA[2] - labB[2];
+	const c1 = Math.hypot(labA[1], labA[2]);
+	const c2 = Math.hypot(labB[1], labB[2]);
+	const deltaC = c1 - c2;
+	let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
+	deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
+	const sh = 1 + 0.015 * c1;
+
+	/* eslint-disable spellcheck/spell-checker */
+	const sc = 1 + 0.045 * c1;
+	const deltaLKlsl = deltaL / 1;
+	const deltaCkcsc = deltaC / sc;
+	const deltaHkhsh = deltaH / sh;
+	const index = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;
+	/* eslint-enable spellcheck/spell-checker */
+
+	return index < 0 ? 0 : Math.sqrt(index);
+};

package/utils/data.js

@@ -0,0 +1,164 @@
+import { isDev } from './browser';
+
+/**
+ * Creates debounced version of function that delays execution until after delay period of inactivity.
+ * @param {Function} callback - Function to debounce
+ * @param {number} [delay] - Milliseconds to delay after last invocation
+ * @returns {Function} Debounced function that cancels previous invocations
+ */
+export const debounce = (callback, delay = 400) => {
+	let timerId;
+
+	return (...args) => {
+		clearTimeout(timerId);
+
+		timerId = setTimeout(() => callback(...args), delay);
+	};
+};
+
+/**
+ * Creates throttled version of function that limits execution to once per delay period.
+ * @param {Function} callback - Function to throttle
+ * @param {number} [delay] - Minimum milliseconds between function invocations
+ * @returns {Function} Throttled function that enforces rate limiting
+ */
+export const throttle = (callback, delay = 400) => {
+	let previousCall = 0;
+
+	return function () {
+		const time = Date.now();
+
+		if (time - previousCall >= delay) {
+			previousCall = time;
+			Reflect.apply(callback, null, arguments);
+		}
+	};
+};
+
+/**
+ * Creates promise that resolves after specified delay.
+ * @param {number} ms - Milliseconds to delay before promise resolution
+ * @returns {Promise<void>} Promise that resolves after delay period
+ */
+export const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+/**
+ * Executes function with automatic retry on failure, with configurable delay and attempt limits.
+ * @param {Function} callback - Function to execute and retry on failure
+ * @param {object} [options] - Retry configuration
+ * @param {number|Function} [options.delay] - Delay in milliseconds between retries, or function receiving attempt index
+ * @param {number} [options.max] - Maximum number of retry attempts
+ * @param {number} [options.index] - Internal retry counter, do not provide
+ * @returns {Promise<*>} Promise resolving to callback return value
+ * @throws {Error} Final error if all retry attempts fail
+ */
+export const retry = async (callback, options = {}) => {
+	const { index = 0, max = 3 } = options;
+	const delayMs = (typeof options.delay === 'function' ? options.delay(index) : options.delay) ?? 500;
+
+	try {
+		return await callback();
+	} catch (error) {
+		// eslint-disable-next-line no-console
+		if (isDev) console.warn('[DEV] retry error', error);
+
+		if (index >= max) throw error;
+
+		await delay(delayMs);
+
+		return retry(callback, { ...options, index: index + 1 });
+	}
+};
+
+/**
+ * Converts number from source range to equivalent value in target range using linear interpolation.
+ * @param {number} value - Number to convert between ranges
+ * @param {[number, number]} sourceRange - Source range as [min, max] array
+ * @param {[number, number]} targetRange - Target range as [min, max] array
+ * @returns {number} Value converted to target range maintaining proportional position
+ */
+export const convertRange = (value, sourceRange, targetRange) =>
+	((value - sourceRange[0]) * (targetRange[1] - targetRange[0])) / (sourceRange[1] - sourceRange[0]) + targetRange[0];
+
+/**
+ * Extracts non-native property names from object and its prototype chain.
+ *
+ * Filters out built-in JavaScript object methods and properties like constructor,
+ * toString, hasOwnProperty, etc.
+ * @param {object} object - Object to extract custom properties from
+ * @returns {string[]} Array of custom property names excluding native methods
+ */
+export const getCustomProperties = object =>
+	[
+		...new Set(object ? [...Reflect.ownKeys(object), ...getCustomProperties(Object.getPrototypeOf(object))] : []),
+	].filter(
+		key =>
+			typeof key !== 'string' ||
+			!/^(?:constructor|prototype|arguments|caller|name|length|toString|toLocaleString|valueOf|apply|bind|call|__proto__|__defineGetter__|__defineSetter__|hasOwnProperty|__lookupGetter__|__lookupSetter__|isPrototypeOf|propertyIsEnumerable)$/.test(
+				key,
+			),
+	);
+
+/**
+ * Builds array from conditional item descriptors, supporting conditional inclusion and arrays.
+ * @param {object[]} conditionalItems - Array of conditional item descriptors
+ * @param {boolean} conditionalItems[].if - Condition determining item inclusion
+ * @param {*} [conditionalItems[].thenItem] - Single item added when condition is true
+ * @param {*[]} [conditionalItems[].thenItems] - Array of items spread when condition is true
+ * @param {*} [conditionalItems[].elseItem] - Single item added when condition is false
+ * @param {*[]} [conditionalItems[].elseItems] - Array of items spread when condition is false
+ * @param {*} [conditionalItems[].alwaysItem] - Single item always added regardless of condition
+ * @param {*[]} [conditionalItems[].alwaysItems] - Array of items always spread regardless of condition
+ * @returns {*[]} Flattened array of items matching their conditions
+ */
+export const conditionalList = conditionalItems =>
+	conditionalItems
+		.filter(
+			item =>
+				item.if ||
+				item.elseItem ||
+				Array.isArray(item.elseItems) ||
+				Array.isArray(item.alwaysItems) ||
+				item.alwaysItem !== undefined,
+		)
+		.flatMap(item => {
+			if (item.alwaysItem !== undefined) return [item.alwaysItem];
+			if (item.if && item.thenItem !== undefined) return [item.thenItem];
+			if (!item.if && item.elseItem !== undefined) return [item.elseItem];
+
+			if (Array.isArray(item.alwaysItems)) return item.alwaysItems;
+			if (item.if && Array.isArray(item.thenItems)) return item.thenItems;
+			if (!item.if && Array.isArray(item.elseItems)) return item.elseItems;
+
+			return [];
+		});
+
+/**
+ * Creates multi-level sorting function for Array.sort() with locale-aware comparison.
+ * @param {object|object[]} orders - Sort configuration, single object or array for multi-level sorting
+ * @param {string} [orders.property] - Object property to sort by, undefined sorts primitive values directly
+ * @param {'asc'|'desc'} [orders.direction] - Sort direction: ascending or descending
+ * @returns {Function} Comparator function for Array.sort() with multi-level sorting support
+ */
+export const orderBy = orders => (a, b) => {
+	const sortDirection = { asc: -1, desc: 1 };
+	const sortCollator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+
+	if (!Array.isArray(orders)) orders = [orders];
+
+	const totalOrders = orders.length;
+
+	for (let index = 0; index < totalOrders; index++) {
+		const { property, direction = 'asc' } = orders[index];
+		const directionInt = sortDirection[direction];
+		const compare = sortCollator.compare(
+			property === undefined ? a : a[property],
+			property === undefined ? b : b[property],
+		);
+
+		if (compare < 0) return directionInt;
+		if (compare > 0) return -directionInt;
+	}
+
+	return 0;
+};

package/utils/element.js

@@ -0,0 +1,55 @@
+/**
+ * Calculates zero-based index position of element within parent's children.
+ * @param {HTMLElement} element - Element to find index of
+ * @param {number} [index] - Internal recursion accumulator, do not provide
+ * @returns {number} Zero-based index position within parent element
+ */
+export const getElementIndex = (element, index = 0) => {
+	if (element.previousElementSibling) return getElementIndex(element.previousElementSibling, ++index);
+
+	return index;
+};
+
+/**
+ * Determines if element is a descendant of specified parent element.
+ * @param {HTMLElement} element - Element to test descendant relationship
+ * @param {HTMLElement} parentElement - Potential ancestor element
+ * @returns {boolean} True if element is descendant of parentElement, false otherwise
+ */
+export const isDescendantOf = (element, parentElement) => {
+	const isTheParent = element.parentElement === parentElement;
+
+	return !isTheParent && element.parentElement?.parentElement
+		? isDescendantOf(element.parentElement, parentElement)
+		: isTheParent;
+};
+
+/**
+ * Finds elements containing specified text using XPath evaluation.
+ *
+ * Uses XPath contains() function with optional case-insensitive matching.
+ * Returns deepest matching elements to avoid duplicate parent/child results.
+ * @param {string} text - Text content to search for within elements
+ * @param {object} [options] - Search configuration options
+ * @param {string} [options.xPathElement] - Element selector for XPath evaluation
+ * @param {Node} [options.scope] - Context node to scope the search query
+ * @param {boolean} [options.caseSensitive] - Whether to perform case-sensitive text matching
+ * @returns {Node[]} Array of elements containing the text, with duplicate parent/child pairs resolved to deepest match
+ */
+export const getElementsContainingText = (text, options = {}) => {
+	const { xPathElement = '*', scope = document.body, caseSensitive = false } = options;
+
+	const esc = str => (!str.includes("'") ? `'${str}'` : `concat('${str.replace(/'/g, "',\"'\",'")}')`);
+
+	const xPath = `.//${xPathElement}[contains(${caseSensitive ? `text(),${esc(text)}` : `translate(.,${esc(text.toUpperCase())},${esc(text.toLowerCase())}),${esc(text.toLowerCase())}`})]`;
+	const result = document.evaluate(xPath, scope, null, XPathResult.ANY_TYPE, null);
+
+	let node = null;
+	const nodes = [];
+	while ((node = result.iterateNext())) {
+		if (nodes.length > 0 && nodes.at(-1).contains(node)) nodes[nodes.length - 1] = node;
+		else nodes.push(node);
+	}
+
+	return nodes;
+};

package/utils/index.js

@@ -0,0 +1,7 @@
+export * from './browser';
+export * from './class';
+export * from './color';
+export * from './data';
+export * from './element';
+export * from './rand';
+export * from './string';

package/utils/rand.js

@@ -0,0 +1,12 @@
+/** @type {(min: number, max: number) => number} Generate a random number from a range (min inclusive, max exclusive) */
+export const rand = (min = -999, max = 999) => Math.random() * (max - min) + min;
+
+/** @type {(min: number, max: number) => number} Generate a random integer from a range (min & max inclusive) */
+export const randInt = (min = -999, max = 999) => {
+	min = Math.ceil(min);
+
+	return Math.floor(Math.random() * (Math.floor(max) - min + 1) + min);
+};
+
+/** @type {(array: Array) => number} Choose a random item from an array */
+export const randFromArray = array => array[randInt(0, array.length - 1)];

package/utils/string.js

@@ -0,0 +1,72 @@
+/**
+ * Capitalize the string
+ * @param {string} string - The source string
+ * @param {boolean} recursive - Weather or not to recurse over every word in the string
+ * @param {string} split - The string used to split apart the source string (if using recursive)
+ * @returns {string} The capitalized string
+ */
+export const capitalize = (string, recursive, split = ' ') => {
+	const words = string.split(split);
+	const wordCount = words.length;
+
+	for (let x = 0, word; x < (recursive ? wordCount : 1); ++x) {
+		word = words[x];
+
+		words[x] = word.charAt(0).toUpperCase() + word.slice(1);
+	}
+
+	return words.join(split);
+};
+
+/**
+ * Reformat a camelCase or PascalCase string with a custom joiner
+ * @param {string} string - The source string
+ * @param {string} joiner - The string used to re-join the words
+ * @returns {string} The re-formatted string
+ */
+export const fromCamelCase = (string, joiner = ' ') => {
+	return string.split(/(?=[A-Z][a-z])/).join(joiner);
+};
+
+/**
+ * Reformat string to a camelCase
+ * @param {string} string - The source string
+ * @param {string} splitter - The string used to split the source into words
+ * @returns {string} The re-formatted string
+ */
+export const toCamelCase = (string, splitter = ' ') => {
+	return (string.charAt(0).toLowerCase() + string.slice(1))
+		.split(splitter)
+		.map((item, index) => (index > 0 ? capitalize(item) : item))
+		.join('');
+};
+
+/**
+ * Reformat string to a PascalCase
+ * @param {string} string - The source string
+ * @returns {string} The re-formatted string
+ */
+export const toPascalCase = (string = '') => capitalize(toCamelCase(string));
+
+/**
+ * Strip all excess newline and indentation whitespace from the source string
+ * @param {string} string - The source string
+ * @returns {string} The re-formatted string
+ */
+export const removeExcessIndentation = string => {
+	if (!string.includes('\t')) return string;
+	if (!string.includes('\n')) return string.replace(/^\t+/, '');
+
+	const lines = string.split('\n');
+
+	const minIndentation = lines
+		.map(line => line.match(/^\t+/) || [])
+		.reduce((a, b) => {
+			if (!a?.length) return b;
+			if (!b?.length) return a;
+
+			return a[0].length <= b[0].length ? a : b;
+		});
+
+	return lines.join('\n').replaceAll(new RegExp(`^${minIndentation[0]}`, 'gm'), '');
+};