8 files changed, 100 insertions, 0 deletions
diff --git a/apps/web/src/utils/browser.ts b/apps/web/src/utils/browser.ts
new file mode 100644
index 00000000..2b9aa297
--- /dev/null
+++ b/apps/web/src/utils/browser.ts
@@ -0,0 +1,17 @@
+export function isTypableDOMElement({
+	element,
+}: {
+	element: HTMLElement;
+}): boolean {
+	if (element.isContentEditable) return true;
+
+	if (element.tagName === "INPUT") {
+		return !(element as HTMLInputElement).disabled;
+	}
+
+	if (element.tagName === "TEXTAREA") {
+		return !(element as HTMLTextAreaElement).disabled;
+	}
+
+	return false;
+}
diff --git a/apps/web/src/utils/date.ts b/apps/web/src/utils/date.ts
new file mode 100644
index 00000000..6a7e9ca5
--- /dev/null
+++ b/apps/web/src/utils/date.ts
@@ -0,0 +1,7 @@
+export function formatDate({ date }: { date: Date }): string {
+	return date.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric",
+	});
+}
diff --git a/apps/web/src/utils/geometry.ts b/apps/web/src/utils/geometry.ts
new file mode 100644
index 00000000..23fc4f46
--- /dev/null
+++ b/apps/web/src/utils/geometry.ts
@@ -0,0 +1,13 @@
+export function dimensionToAspectRatio({
+	width,
+	height,
+}: {
+	width: number;
+	height: number;
+}): string {
+	const gcd = (a: number, b: number): number => (b === 0 ? a : gcd(b, a % b));
+	const divisor = gcd(width, height);
+	const aspectWidth = width / divisor;
+	const aspectHeight = height / divisor;
+	return `${aspectWidth}:${aspectHeight}`;
+}
diff --git a/apps/web/src/utils/id.ts b/apps/web/src/utils/id.ts
new file mode 100644
index 00000000..e452af43
--- /dev/null
+++ b/apps/web/src/utils/id.ts
@@ -0,0 +1,28 @@
+export function generateUUID(): string {
+	if (
+		typeof crypto !== "undefined" &&
+		typeof crypto.randomUUID === "function"
+	) {
+		return crypto.randomUUID();
+	}
+
+	const bytes = new Uint8Array(16);
+	crypto.getRandomValues(bytes);
+
+	bytes[6] = (bytes[6] & 0x0f) | 0x40;
+	bytes[8] = (bytes[8] & 0x3f) | 0x80;
+
+	const hex = [...bytes].map((b) => b.toString(16).padStart(2, "0"));
+
+	return (
+		hex.slice(0, 4).join("") +
+		"-" +
+		hex.slice(4, 6).join("") +
+		"-" +
+		hex.slice(6, 8).join("") +
+		"-" +
+		hex.slice(8, 10).join("") +
+		"-" +
+		hex.slice(10, 16).join("")
+	);
+}
diff --git a/apps/web/src/utils/math.ts b/apps/web/src/utils/math.ts
new file mode 100644
index 00000000..012ac747
--- /dev/null
+++ b/apps/web/src/utils/math.ts
@@ -0,0 +1,11 @@
+export function clamp({
+	value,
+	min,
+	max,
+}: {
+	value: number;
+	min: number;
+	max: number;
+}): number {
+	return Math.max(min, Math.min(max, value));
+}
diff --git a/apps/web/src/utils/platform.ts b/apps/web/src/utils/platform.ts
new file mode 100644
index 00000000..3b1f748b
--- /dev/null
+++ b/apps/web/src/utils/platform.ts
@@ -0,0 +1,11 @@
+export function getPlatformSpecialKey(): string {
+	return isAppleDevice() ? "⌘" : "Ctrl";
+}
+
+export function getPlatformAlternateKey(): string {
+	return isAppleDevice() ? "⌥" : "Alt";
+}
+
+export function isAppleDevice(): boolean {
+	return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+}
diff --git a/apps/web/src/utils/string.ts b/apps/web/src/utils/string.ts
new file mode 100644
index 00000000..893456ed
--- /dev/null
+++ b/apps/web/src/utils/string.ts
@@ -0,0 +1,7 @@
+export function capitalizeFirstLetter({ string }: { string: string }) {
+	return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export function uppercase({ string }: { string: string }) {
+	return string.toUpperCase();
+}
diff --git a/apps/web/src/utils/ui.ts b/apps/web/src/utils/ui.ts
new file mode 100644
index 00000000..a92aab43
--- /dev/null
+++ b/apps/web/src/utils/ui.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+	return twMerge(clsx(inputs));
+}