From 5ad885e26cad1d22de32c59dc7ffda71fd104f41 Mon Sep 17 00:00:00 2001
From: Mark Evola <markevola24@gmail.com>
Date: Fri, 15 Aug 2025 12:53:37 -0500
Subject: [PATCH 1/5] util: tailwind merge

---
 components.json                               |  2 +-
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  7 ++++++
 src/components/ColorThumb/ColorThumb.tsx      |  4 ++--
 .../DrawingToolbar/DrawingToolbar.tsx         |  6 ++---
 src/components/LayerInfo/LayerInfo.tsx        |  6 ++---
 .../ReferenceWindow/ReferenceWindow.tsx       |  6 ++---
 .../ReferenceWindowContent.tsx                |  4 ++--
 src/components/ResizeGrid/ResizeGrid.tsx      |  4 ++--
 .../ScaleIndicator/ScaleIndicator.tsx         |  4 ++--
 src/components/ShapeOption/ShapeOption.tsx    |  4 ++--
 .../ToolbarButton/ToolbarButton.tsx           |  4 ++--
 src/components/Tooltip/Tooltip.tsx            |  4 ++--
 src/components/ui/menubar.tsx                 | 24 +++++++++----------
 src/lib/tailwind-utils.ts                     |  6 +++++
 15 files changed, 50 insertions(+), 36 deletions(-)
 create mode 100644 src/lib/tailwind-utils.ts

diff --git a/components.json b/components.json
index e3b8873..1ea8f66 100644
--- a/components.json
+++ b/components.json
@@ -12,7 +12,7 @@
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils",
+    "utils": "@/lib/tailwind-utils",
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
diff --git a/package.json b/package.json
index 9c55dfe..42a56f9 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
 		"react-dom": "^19.0.0",
 		"react-streaming": "^0.3.46",
 		"sirv": "^2.0.3",
+		"tailwind-merge": "^3.3.1",
 		"tailwindcss": "^3.4.17",
 		"tailwindcss-animate": "^1.0.7",
 		"ts-node": "^10.9.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 59c09bb..8821ce2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -107,6 +107,9 @@ dependencies:
   sirv:
     specifier: ^2.0.3
     version: 2.0.3
+  tailwind-merge:
+    specifier: ^3.3.1
+    version: 3.3.1
   tailwindcss:
     specifier: ^3.4.17
     version: 3.4.17(ts-node@10.9.2)
@@ -7736,6 +7739,10 @@ packages:
       '@pkgr/core': 0.2.9
     dev: true
 
+  /tailwind-merge@3.3.1:
+    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
+    dev: false
+
   /tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
diff --git a/src/components/ColorThumb/ColorThumb.tsx b/src/components/ColorThumb/ColorThumb.tsx
index a603f54..9d00e41 100644
--- a/src/components/ColorThumb/ColorThumb.tsx
+++ b/src/components/ColorThumb/ColorThumb.tsx
@@ -1,6 +1,6 @@
 // Components
 import { ColorThumb as AriaColorThumb } from "react-aria-components";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 
 // Types
 import type { ComponentProps, ReactNode } from "react";
@@ -8,7 +8,7 @@ import type { ComponentProps, ReactNode } from "react";
 function ColorThumb({ className, ...props }: ComponentProps<"div">): ReactNode {
 	return (
 		<AriaColorThumb
-			className={clsx(
+			className={cn(
 				"border-2 border-white shadow-[0_0_0_1px_black,inset_0_0_0_1px_black] w-5 h-5 rounded-full box-border data-[focus-visible]:w-6 data-[focus-visible]:h-6",
 				className
 			)}
diff --git a/src/components/DrawingToolbar/DrawingToolbar.tsx b/src/components/DrawingToolbar/DrawingToolbar.tsx
index f1459d3..3b8a77d 100644
--- a/src/components/DrawingToolbar/DrawingToolbar.tsx
+++ b/src/components/DrawingToolbar/DrawingToolbar.tsx
@@ -3,7 +3,7 @@ import { SHAPES } from "@/state/store";
 import { memo, Fragment } from "react";
 import useStore from "@/state/hooks/useStore";
 import { useShallow } from "zustand/react/shallow";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 
 // Type
 import type { ReactNode, ChangeEvent, MouseEvent, ReactElement } from "react";
@@ -86,7 +86,7 @@ function DrawingToolbar(): ReactNode {
 		>
 			<button
 				onClick={() => changeShapeMode("fill")}
-				className={clsx(
+				className={cn(
 					"border-none inline-flex justify-center w-full text-sm items-center bg-transparent h-[30px] mx-[0.5em] px-1 rounded-sm my-0 cursor-pointer transition-colors duration-100 hover:bg-[#505050]",
 					{
 						"bg-[#505050] outline outline-[3px] outline-[#7e83da] outline-offset-[2px]":
@@ -98,7 +98,7 @@ function DrawingToolbar(): ReactNode {
 			</button>
 			<button
 				onClick={() => changeShapeMode("stroke")}
-				className={clsx(
+				className={cn(
 					"border-none inline-flex justify-center w-full text-sm items-center bg-transparent h-[30px] mx-[0.5em] px-1 rounded-sm my-0 cursor-pointer transition-colors duration-100 hover:bg-[#505050]",
 					{
 						"bg-[#505050] outline outline-[3px] outline-[#7e83da] outline-offset-[2px]":
diff --git a/src/components/LayerInfo/LayerInfo.tsx b/src/components/LayerInfo/LayerInfo.tsx
index e5e289f..f9fbff2 100644
--- a/src/components/LayerInfo/LayerInfo.tsx
+++ b/src/components/LayerInfo/LayerInfo.tsx
@@ -1,6 +1,6 @@
 // Lib
 import { useState, memo } from "react";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 import useStore from "@/state/hooks/useStore";
 import { useShallow } from "zustand/react/shallow";
 import LayersStore from "@/state/stores/LayersStore";
@@ -122,7 +122,7 @@ function LayerInfo({
 	return (
 		<label
 			htmlFor={"layer-" + id}
-			className={clsx(
+			className={cn(
 				"flex items-center w-full max-w-full h-[2.6rem] py-[0.2rem] px-[0.5rem] whitespace-nowrap border border-[rgb(56,55,55)] last:rounded-b-[5px]",
 				"group",
 				{
@@ -212,7 +212,7 @@ function LayerInfo({
 				<div>
 					<Tooltip text={editingTooltipText}>
 						<button
-							className={clsx(
+							className={cn(
 								"hidden bg-transparent text-lg py-0 px-[0.2em] border-none rounded-full transition-opacity disabled:opacity-50 group-hover:inline group-focus:inline hover:bg-[rgba(255,255,255,0.1)]",
 								{
 									block: isEditing
diff --git a/src/components/ReferenceWindow/ReferenceWindow.tsx b/src/components/ReferenceWindow/ReferenceWindow.tsx
index 1a4430b..07448e1 100644
--- a/src/components/ReferenceWindow/ReferenceWindow.tsx
+++ b/src/components/ReferenceWindow/ReferenceWindow.tsx
@@ -1,6 +1,6 @@
 // Lib
 import { useState, memo, useRef } from "react";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 
 // Components
 import ReferenceWindowHeader from "@/components/ReferenceWindowHeader/ReferenceWindowHeader";
@@ -68,7 +68,7 @@ function ReferenceWindow(): ReactNode {
 	const controlsHeight = "70px";
 	const controlsPadding = "10px";
 
-	const cn = clsx(
+	const className = cn(
 		"fixed min-w-[300px] max-w-[60vw] min-h-[40px] max-h-full bg-[rgb(36,36,36)] border border-[rgb(56,55,55)] rounded-[5px] z-[100] overflow-hidden",
 		{
 			"relative border-none top-0 left-0 resize-none max-w-[300px]": pinned,
@@ -78,7 +78,7 @@ function ReferenceWindow(): ReactNode {
 
 	return (
 		<div
-			className={cn}
+			className={className}
 			data-testid="reference-window"
 			ref={windowRef}
 			style={{
diff --git a/src/components/ReferenceWindowContent/ReferenceWindowContent.tsx b/src/components/ReferenceWindowContent/ReferenceWindowContent.tsx
index 70d8e51..0ec75f6 100644
--- a/src/components/ReferenceWindowContent/ReferenceWindowContent.tsx
+++ b/src/components/ReferenceWindowContent/ReferenceWindowContent.tsx
@@ -2,7 +2,7 @@
 import { useState } from "react";
 
 // Types
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 import type {
 	ReactNode,
 	DragEvent,
@@ -82,7 +82,7 @@ function ReferenceWindowContent({
 
 	return (
 		<section
-			className={clsx(
+			className={cn(
 				"flex justify-center items-center m-[5px] border border-[rgb(56,55,55)] rounded-[5px] overflow-hidden text-sm",
 				{
 					"border-dashed border-white": isDraggingOver,
diff --git a/src/components/ResizeGrid/ResizeGrid.tsx b/src/components/ResizeGrid/ResizeGrid.tsx
index e555cd8..22cafb6 100644
--- a/src/components/ResizeGrid/ResizeGrid.tsx
+++ b/src/components/ResizeGrid/ResizeGrid.tsx
@@ -1,6 +1,6 @@
 // Lib
 import { useCallback, useState, forwardRef } from "react";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 
 // Types
 import type { CSSProperties, ReactNode } from "react";
@@ -119,7 +119,7 @@ const ResizeGrid = forwardRef<HTMLDivElement, ResizeGridProps>(
 			<div
 				ref={ref}
 				tabIndex={0}
-				className={clsx("absolute outline-none hover:cursor-move", {
+				className={cn("absolute outline-none hover:cursor-move", {
 					"outline-dotted outline-[#d1836a]": focused
 				})}
 				data-testid="resize-grid"
diff --git a/src/components/ScaleIndicator/ScaleIndicator.tsx b/src/components/ScaleIndicator/ScaleIndicator.tsx
index 9ae95dd..a1941e3 100644
--- a/src/components/ScaleIndicator/ScaleIndicator.tsx
+++ b/src/components/ScaleIndicator/ScaleIndicator.tsx
@@ -1,6 +1,6 @@
 // Lib
 import { useRef, useState, useEffect } from "react";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 
 // Types
 import type { ReactNode } from "react";
@@ -29,7 +29,7 @@ function ScaleIndicator({ scale }: ScaleIndicatorProps): ReactNode {
 
 	return (
 		<div
-			className={clsx(
+			className={cn(
 				"absolute left-2.5 bottom-2.5 p-1.5 z-10 bg-black rounded-md",
 				"transition-opacity duration-150 pointer-events-none",
 				{ "opacity-100": visible, "opacity-20": !visible }
diff --git a/src/components/ShapeOption/ShapeOption.tsx b/src/components/ShapeOption/ShapeOption.tsx
index 939d614..2959830 100644
--- a/src/components/ShapeOption/ShapeOption.tsx
+++ b/src/components/ShapeOption/ShapeOption.tsx
@@ -1,6 +1,6 @@
 // Lib
 import * as Utils from "@/lib/utils";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 import useStore from "@/state/hooks/useStore";
 
 // Types
@@ -29,7 +29,7 @@ function ShapeOption({ icon, name, isActive }: ShapeOptionProps) {
 			position="bottom"
 		>
 			<button
-				className={clsx(
+				className={cn(
 					"border-none inline-flex justify-center items-center bg-transparent w-[30px] h-[30px] rounded-full mx-[0.5em] my-0 cursor-pointer transition-colors duration-100 hover:bg-[#505050]",
 					{
 						"bg-[#505050] outline outline-[3px] outline-[#7e83da] outline-offset-[2px]":
diff --git a/src/components/ToolbarButton/ToolbarButton.tsx b/src/components/ToolbarButton/ToolbarButton.tsx
index e544d2f..3ce24eb 100644
--- a/src/components/ToolbarButton/ToolbarButton.tsx
+++ b/src/components/ToolbarButton/ToolbarButton.tsx
@@ -3,7 +3,7 @@ import { useCallback, useEffect } from "react";
 import useStore from "@/state/hooks/useStore";
 import { useShallow } from "zustand/react/shallow";
 import * as UTILS from "@/lib/utils";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 
 // Types
 import type { Mode, ToolbarMode } from "@/types";
@@ -112,7 +112,7 @@ function ToolbarButton({
 			position="right"
 		>
 			<button
-				className={clsx(
+				className={cn(
 					"p-[0.2em] text-2xl text-center cursor-pointer transition-colors duration-100",
 					"inline-flex justify-center",
 					"disabled:text-[#3b3b3b] disabled:cursor-not-allowed disabled:hover:bg-transparent",
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index f761768..1816a95 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -7,7 +7,7 @@ import {
 	Content as TooltipContent,
 	Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 
 // Types
 import type { FC, ReactNode } from "react";
@@ -47,7 +47,7 @@ const Tooltip: FC<TooltipProps> = ({
 				<TooltipPortal>
 					<TooltipContent
 						side={position}
-						className={clsx(
+						className={cn(
 							"z-[999] rounded px-2 py-1 text-sm leading-none text-white bg-[#3e3e3e] border border-[#242424]",
 							"shadow-[0_10px_38px_-10px_rgba(22,23,24,0.35),0_10px_20px_-15px_rgba(22,23,24,0.2)]",
 							"will-change-[transform,opacity]",
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
index f4c2615..676be7d 100644
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 
-import clsx from "clsx"
+import cn from "@/lib/tailwind-utils";
 
 function Menubar({
   className,
@@ -11,7 +11,7 @@ function Menubar({
   return (
     <MenubarPrimitive.Root
       data-slot="menubar"
-      className={clsx(
+      className={cn(
         "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
         className
       )}
@@ -53,7 +53,7 @@ function MenubarTrigger({
   return (
     <MenubarPrimitive.Trigger
       data-slot="menubar-trigger"
-      className={clsx(
+      className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
         className
       )}
@@ -76,7 +76,7 @@ function MenubarContent({
         align={align}
         alignOffset={alignOffset}
         sideOffset={sideOffset}
-        className={clsx(
+        className={cn(
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
           className
         )}
@@ -100,7 +100,7 @@ function MenubarItem({
       data-slot="menubar-item"
       data-inset={inset}
       data-variant={variant}
-      className={clsx(
+      className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
@@ -118,7 +118,7 @@ function MenubarCheckboxItem({
   return (
     <MenubarPrimitive.CheckboxItem
       data-slot="menubar-checkbox-item"
-      className={clsx(
+      className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
@@ -143,7 +143,7 @@ function MenubarRadioItem({
   return (
     <MenubarPrimitive.RadioItem
       data-slot="menubar-radio-item"
-      className={clsx(
+      className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
@@ -170,7 +170,7 @@ function MenubarLabel({
     <MenubarPrimitive.Label
       data-slot="menubar-label"
       data-inset={inset}
-      className={clsx(
+      className={cn(
         "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
         className
       )}
@@ -186,7 +186,7 @@ function MenubarSeparator({
   return (
     <MenubarPrimitive.Separator
       data-slot="menubar-separator"
-      className={clsx("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
   )
@@ -199,7 +199,7 @@ function MenubarShortcut({
   return (
     <span
       data-slot="menubar-shortcut"
-      className={clsx(
+      className={cn(
         "text-muted-foreground ml-auto text-xs tracking-widest",
         className
       )}
@@ -226,7 +226,7 @@ function MenubarSubTrigger({
     <MenubarPrimitive.SubTrigger
       data-slot="menubar-sub-trigger"
       data-inset={inset}
-      className={clsx(
+      className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
         className
       )}
@@ -245,7 +245,7 @@ function MenubarSubContent({
   return (
     <MenubarPrimitive.SubContent
       data-slot="menubar-sub-content"
-      className={clsx(
+      className={cn(
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
         className
       )}
diff --git a/src/lib/tailwind-utils.ts b/src/lib/tailwind-utils.ts
new file mode 100644
index 0000000..9b79d83
--- /dev/null
+++ b/src/lib/tailwind-utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export default function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
\ No newline at end of file

From 9cb5c9196cfd739afe06c2cdeeb3703d04641e60 Mon Sep 17 00:00:00 2001
From: Mark Evola <markevola24@gmail.com>
Date: Fri, 15 Aug 2025 13:05:43 -0500
Subject: [PATCH 2/5] fix: lint

---
 .eslintrc.cjs                                  |  3 ++-
 package.json                                   |  1 +
 pnpm-lock.yaml                                 | 17 +++++++++++++++--
 src/components/ThemeProvider/ThemeProvider.tsx |  2 +-
 src/lib/utils.ts                               |  3 ++-
 src/tests/integration/Navbar.test.tsx          |  2 --
 6 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 8e4eecf..1f67da3 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,6 +1,7 @@
 module.exports = {
 	rules: {
-		"react-refresh/only-export-components": "warn"
+		"react-refresh/only-export-components": "warn",
+		"react/prop-types": "off"
 	},
 	reportUnusedDisableDirectives: true,
 	ignorePatterns: [
diff --git a/package.json b/package.json
index 42a56f9..bf11e03 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
 		"@testing-library/react": "^16.0.1",
 		"@testing-library/user-event": "^14.5.2",
 		"@vitest/coverage-v8": "2.1.3",
+		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-prettier": "^5.5.3",
 		"fake-indexeddb": "^6.0.0",
 		"husky": "^9.1.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8821ce2..be477a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -148,9 +148,12 @@ devDependencies:
   '@vitest/coverage-v8':
     specifier: 2.1.3
     version: 2.1.3(vitest@2.1.3)
+  eslint-config-prettier:
+    specifier: ^10.1.8
+    version: 10.1.8(eslint@8.47.0)
   eslint-plugin-prettier:
     specifier: ^5.5.3
-    version: 5.5.3(eslint@8.47.0)(prettier@3.3.3)
+    version: 5.5.3(eslint-config-prettier@10.1.8)(eslint@8.47.0)(prettier@3.3.3)
   fake-indexeddb:
     specifier: ^6.0.0
     version: 6.0.0
@@ -5240,7 +5243,16 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  /eslint-plugin-prettier@5.5.3(eslint@8.47.0)(prettier@3.3.3):
+  /eslint-config-prettier@10.1.8(eslint@8.47.0):
+    resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+    dependencies:
+      eslint: 8.47.0
+    dev: true
+
+  /eslint-plugin-prettier@5.5.3(eslint-config-prettier@10.1.8)(eslint@8.47.0)(prettier@3.3.3):
     resolution: {integrity: sha512-NAdMYww51ehKfDyDhv59/eIItUVzU0Io9H2E8nHNGKEeeqlnci+1gCvrHib6EmZdf6GxF+LCV5K7UC65Ezvw7w==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -5255,6 +5267,7 @@ packages:
         optional: true
     dependencies:
       eslint: 8.47.0
+      eslint-config-prettier: 10.1.8(eslint@8.47.0)
       prettier: 3.3.3
       prettier-linter-helpers: 1.0.0
       synckit: 0.11.11
diff --git a/src/components/ThemeProvider/ThemeProvider.tsx b/src/components/ThemeProvider/ThemeProvider.tsx
index a0195b5..b14e2de 100644
--- a/src/components/ThemeProvider/ThemeProvider.tsx
+++ b/src/components/ThemeProvider/ThemeProvider.tsx
@@ -62,7 +62,7 @@ function ThemeProvider({
 		return () => {
 			root.classList.remove("light", "dark", "system");
 		};
-	}, []);
+	}, [theme]);
 
 	const updateTheme = useCallback(
 		(theme: Theme) => {
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 61a5760..2178102 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -197,7 +197,8 @@ function debounce<T, A extends unknown[]>(
  * @returns The value of the cookie, or null if the cookie does not exist.
  */
 function getCookie(name: string): string | null {
-	const match = document.cookie.match(/(^| )${name}=([^;]+)/);
+  const regexp = new RegExp(`(^| )${name}=([^;]+)`);
+	const match = document.cookie.match(regexp);
 	return match ? decodeURIComponent(match[2]) : null;
 }
 
diff --git a/src/tests/integration/Navbar.test.tsx b/src/tests/integration/Navbar.test.tsx
index 74a9fdb..c384e75 100644
--- a/src/tests/integration/Navbar.test.tsx
+++ b/src/tests/integration/Navbar.test.tsx
@@ -73,7 +73,6 @@ describe("Navbar functionality", () => {
 
 	it("should save the file when clicking Save File from File menu", async () => {
 		renderWithProviders(<Navbar />);
-		const alertSpy = vi.spyOn(window, "alert");
 		const fileTab = screen.getByRole("menuitem", { name: "File" });
 
 		await userEvent.click(fileTab);
@@ -112,7 +111,6 @@ describe("Navbar functionality", () => {
 
 	it("should perform a save when using CTRL S", async () => {
 		renderWithProviders(<Navbar />);
-		const alertSpy = vi.spyOn(window, "alert");
 		fireEvent.keyDown(document, { key: "s", ctrlKey: true });
 
 		await vi.waitFor(() => {

From 3db074b14e4e229f3bd0a5cd76bbed0ea81eceb7 Mon Sep 17 00:00:00 2001
From: Mark Evola <markevola24@gmail.com>
Date: Fri, 15 Aug 2025 13:38:05 -0500
Subject: [PATCH 3/5] fix: detecting os

---
 src/lib/utils.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 2178102..447fb53 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -212,11 +212,11 @@ function detectOperatingSystem(): OperatingSystem {
   if (typeof window === "undefined") {
    return "Windows"; // Default to Windows if not in a browser environment 
   }
-	const userAgent = window.navigator.userAgent;
+	const userAgent = window.navigator.userAgent.toLowerCase();
 
-	if (userAgent.indexOf("Win") !== -1) return "Windows";
-	if (userAgent.indexOf("Mac") !== -1) return "MacOS";
-	if (userAgent.indexOf("X11") !== -1 || userAgent.indexOf("Linux") !== -1)
+	if (userAgent.indexOf("win") !== -1) return "Windows";
+	if (userAgent.indexOf("mac") !== -1) return "MacOS";
+	if (userAgent.indexOf("x11") !== -1 || userAgent.indexOf("linux") !== -1)
 		return "Linux";
 
 	throw new Error(`Unsupported operating system detected: ${userAgent}`);

From 2b1dd27c3f5a9180d578a19d154621a948a17214 Mon Sep 17 00:00:00 2001
From: Mark Evola <markevola24@gmail.com>
Date: Fri, 15 Aug 2025 13:38:49 -0500
Subject: [PATCH 4/5] fmt

---
 src/components/ColorWheel/ColorWheel.tsx      |   2 +-
 .../icons/CloudUpload/CloudUpload.tsx         |  10 +-
 src/components/ui/menubar.tsx                 | 429 +++++++++---------
 src/lib/tailwind-utils.ts                     |   4 +-
 src/lib/utils.ts                              |  10 +-
 src/server/index.ts                           |   2 +-
 src/state/hooks/useTheme.ts                   |   4 +-
 src/state/slices/canvasSlice.ts               |   9 +-
 src/tests/integration/ColorWheel.test.tsx     |   2 +-
 src/types/Slices.types.ts                     |   2 +-
 10 files changed, 251 insertions(+), 223 deletions(-)

diff --git a/src/components/ColorWheel/ColorWheel.tsx b/src/components/ColorWheel/ColorWheel.tsx
index ae7e05f..aabad5c 100644
--- a/src/components/ColorWheel/ColorWheel.tsx
+++ b/src/components/ColorWheel/ColorWheel.tsx
@@ -29,7 +29,7 @@ function ColorWheel(props: ColorWheelProps): ReactNode {
 		}))
 	);
 
-	const onChange = (color: Color) => changeColor(color.toString('hex'));
+	const onChange = (color: Color) => changeColor(color.toString("hex"));
 	const wheelColor = parseColor(color).toString("hsl");
 
 	const COLOR_WHEEL_OUTER_RADIUS = 80;
diff --git a/src/components/icons/CloudUpload/CloudUpload.tsx b/src/components/icons/CloudUpload/CloudUpload.tsx
index 4d11ede..f5c35f0 100644
--- a/src/components/icons/CloudUpload/CloudUpload.tsx
+++ b/src/components/icons/CloudUpload/CloudUpload.tsx
@@ -2,10 +2,10 @@ import { CloudUpload as LucideCloudUpload } from "lucide-react";
 import type { ComponentProps } from "react";
 
 const CloudUpload = (props: ComponentProps<"svg">) => (
-  <LucideCloudUpload
-    size="1em"
-    {...props}
-  />
+	<LucideCloudUpload
+		size="1em"
+		{...props}
+	/>
 );
 
-export default CloudUpload;
\ No newline at end of file
+export default CloudUpload;
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
index 676be7d..4e3572d 100644
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -1,274 +1,297 @@
-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
 import cn from "@/lib/tailwind-utils";
 
 function Menubar({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Root>) {
-  return (
-    <MenubarPrimitive.Root
-      data-slot="menubar"
-      className={cn(
-        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<MenubarPrimitive.Root
+			data-slot="menubar"
+			className={cn(
+				"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function MenubarMenu({
-  ...props
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+	return (
+		<MenubarPrimitive.Menu
+			data-slot="menubar-menu"
+			{...props}
+		/>
+	);
 }
 
 function MenubarGroup({
-  ...props
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+	return (
+		<MenubarPrimitive.Group
+			data-slot="menubar-group"
+			{...props}
+		/>
+	);
 }
 
 function MenubarPortal({
-  ...props
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+	return (
+		<MenubarPrimitive.Portal
+			data-slot="menubar-portal"
+			{...props}
+		/>
+	);
 }
 
 function MenubarRadioGroup({
-  ...props
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return (
-    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
-  )
+	return (
+		<MenubarPrimitive.RadioGroup
+			data-slot="menubar-radio-group"
+			{...props}
+		/>
+	);
 }
 
 function MenubarTrigger({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
-  return (
-    <MenubarPrimitive.Trigger
-      data-slot="menubar-trigger"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<MenubarPrimitive.Trigger
+			data-slot="menubar-trigger"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function MenubarContent({
-  className,
-  align = "start",
-  alignOffset = -4,
-  sideOffset = 8,
-  ...props
+	className,
+	align = "start",
+	alignOffset = -4,
+	sideOffset = 8,
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Content>) {
-  return (
-    <MenubarPortal>
-      <MenubarPrimitive.Content
-        data-slot="menubar-content"
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </MenubarPortal>
-  )
+	return (
+		<MenubarPortal>
+			<MenubarPrimitive.Content
+				data-slot="menubar-content"
+				align={align}
+				alignOffset={alignOffset}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+					className
+				)}
+				{...props}
+			/>
+		</MenubarPortal>
+	);
 }
 
 function MenubarItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
+	className,
+	inset,
+	variant = "default",
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+	inset?: boolean;
+	variant?: "default" | "destructive";
 }) {
-  return (
-    <MenubarPrimitive.Item
-      data-slot="menubar-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<MenubarPrimitive.Item
+			data-slot="menubar-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function MenubarCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
+	className,
+	children,
+	checked,
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
-  return (
-    <MenubarPrimitive.CheckboxItem
-      data-slot="menubar-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.CheckboxItem>
-  )
+	return (
+		<MenubarPrimitive.CheckboxItem
+			data-slot="menubar-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<MenubarPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</MenubarPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</MenubarPrimitive.CheckboxItem>
+	);
 }
 
 function MenubarRadioItem({
-  className,
-  children,
-  ...props
+	className,
+	children,
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
-  return (
-    <MenubarPrimitive.RadioItem
-      data-slot="menubar-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.RadioItem>
-  )
+	return (
+		<MenubarPrimitive.RadioItem
+			data-slot="menubar-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<MenubarPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</MenubarPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</MenubarPrimitive.RadioItem>
+	);
 }
 
 function MenubarLabel({
-  className,
-  inset,
-  ...props
+	className,
+	inset,
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean
+	inset?: boolean;
 }) {
-  return (
-    <MenubarPrimitive.Label
-      data-slot="menubar-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<MenubarPrimitive.Label
+			data-slot="menubar-label"
+			data-inset={inset}
+			className={cn(
+				"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function MenubarSeparator({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
-  return (
-    <MenubarPrimitive.Separator
-      data-slot="menubar-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
+	return (
+		<MenubarPrimitive.Separator
+			data-slot="menubar-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
 }
 
 function MenubarShortcut({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="menubar-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<span
+			data-slot="menubar-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function MenubarSub({
-  ...props
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+	return (
+		<MenubarPrimitive.Sub
+			data-slot="menubar-sub"
+			{...props}
+		/>
+	);
 }
 
 function MenubarSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
+	className,
+	inset,
+	children,
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-  inset?: boolean
+	inset?: boolean;
 }) {
-  return (
-    <MenubarPrimitive.SubTrigger
-      data-slot="menubar-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto h-4 w-4" />
-    </MenubarPrimitive.SubTrigger>
-  )
+	return (
+		<MenubarPrimitive.SubTrigger
+			data-slot="menubar-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+				className
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto h-4 w-4" />
+		</MenubarPrimitive.SubTrigger>
+	);
 }
 
 function MenubarSubContent({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
-  return (
-    <MenubarPrimitive.SubContent
-      data-slot="menubar-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<MenubarPrimitive.SubContent
+			data-slot="menubar-sub-content"
+			className={cn(
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Menubar,
-  MenubarPortal,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarGroup,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarItem,
-  MenubarShortcut,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSub,
-  MenubarSubTrigger,
-  MenubarSubContent,
-}
+	Menubar,
+	MenubarPortal,
+	MenubarMenu,
+	MenubarTrigger,
+	MenubarContent,
+	MenubarGroup,
+	MenubarSeparator,
+	MenubarLabel,
+	MenubarItem,
+	MenubarShortcut,
+	MenubarCheckboxItem,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarSub,
+	MenubarSubTrigger,
+	MenubarSubContent
+};
diff --git a/src/lib/tailwind-utils.ts b/src/lib/tailwind-utils.ts
index 9b79d83..c3f1c55 100644
--- a/src/lib/tailwind-utils.ts
+++ b/src/lib/tailwind-utils.ts
@@ -2,5 +2,5 @@ import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export default function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
\ No newline at end of file
+	return twMerge(clsx(inputs));
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 447fb53..ecc0ef5 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -197,7 +197,7 @@ function debounce<T, A extends unknown[]>(
  * @returns The value of the cookie, or null if the cookie does not exist.
  */
 function getCookie(name: string): string | null {
-  const regexp = new RegExp(`(^| )${name}=([^;]+)`);
+	const regexp = new RegExp(`(^| )${name}=([^;]+)`);
 	const match = document.cookie.match(regexp);
 	return match ? decodeURIComponent(match[2]) : null;
 }
@@ -209,9 +209,9 @@ type OperatingSystem = "Windows" | "MacOS" | "Linux";
  * @returns The operating system.
  */
 function detectOperatingSystem(): OperatingSystem {
-  if (typeof window === "undefined") {
-   return "Windows"; // Default to Windows if not in a browser environment 
-  }
+	if (typeof window === "undefined") {
+		return "Windows"; // Default to Windows if not in a browser environment
+	}
 	const userAgent = window.navigator.userAgent.toLowerCase();
 
 	if (userAgent.indexOf("win") !== -1) return "Windows";
@@ -231,5 +231,5 @@ export {
 	isRectIntersecting,
 	debounce,
 	getCookie,
-	detectOperatingSystem,
+	detectOperatingSystem
 };
diff --git a/src/server/index.ts b/src/server/index.ts
index 3af06ca..9811c6f 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -56,7 +56,7 @@ async function startServer() {
 		const theme = req.cookies.theme || "dark";
 		const pageContextInit = {
 			urlOriginal: req.originalUrl,
-			theme,
+			theme
 		};
 		const pageContext = await renderPage(pageContextInit);
 		const { httpResponse } = pageContext;
diff --git a/src/state/hooks/useTheme.ts b/src/state/hooks/useTheme.ts
index 9ba46b0..6dd5b42 100644
--- a/src/state/hooks/useTheme.ts
+++ b/src/state/hooks/useTheme.ts
@@ -2,7 +2,7 @@ import { useContext } from "react";
 import { ThemeContext } from "@/components/ThemeProvider/ThemeProvider";
 
 function useTheme() {
-  return useContext(ThemeContext);
+	return useContext(ThemeContext);
 }
 
-export default useTheme;
\ No newline at end of file
+export default useTheme;
diff --git a/src/state/slices/canvasSlice.ts b/src/state/slices/canvasSlice.ts
index 72135d7..50912e9 100644
--- a/src/state/slices/canvasSlice.ts
+++ b/src/state/slices/canvasSlice.ts
@@ -317,7 +317,13 @@ export const createCanvasSlice: StateCreator<
 
 	function drawCanvas(canvas: HTMLCanvasElement, layerId?: string) {
 		let elements = get().elements;
-		const { background, layers, dpi, width: canvasWidth, height: canvasHeight } = get();
+		const {
+			background,
+			layers,
+			dpi,
+			width: canvasWidth,
+			height: canvasHeight
+		} = get();
 
 		if (layers.length === 0) {
 			throw new Error("No layers available to draw on the canvas.");
@@ -451,7 +457,6 @@ export const createCanvasSlice: StateCreator<
 		// by drawing behind existing content.
 		ctx.globalCompositeOperation = "destination-over";
 		ctx.fillRect(canvasX, canvasY, canvas.width, canvas.height);
-
 	}
 
 	return {
diff --git a/src/tests/integration/ColorWheel.test.tsx b/src/tests/integration/ColorWheel.test.tsx
index 9abf226..70b8851 100644
--- a/src/tests/integration/ColorWheel.test.tsx
+++ b/src/tests/integration/ColorWheel.test.tsx
@@ -139,7 +139,7 @@ describe("ColorWheel functionality", () => {
 
 		// Assert that dispatch was called with the correct action
 		expect(preloadedState.changeColor).toHaveBeenCalledWith(
-			mockColor.toString('hex')
+			mockColor.toString("hex")
 		);
 	});
 
diff --git a/src/types/Slices.types.ts b/src/types/Slices.types.ts
index edab189..df9d70d 100644
--- a/src/types/Slices.types.ts
+++ b/src/types/Slices.types.ts
@@ -56,7 +56,7 @@ export type CanvasStore = CanvasState & {
 	changeX: (payload: number) => void;
 	changeY: (payload: number) => void;
 	toggleReferenceWindow: () => void;
-  prepareForSave: () => SavedCanvasProperties;
+	prepareForSave: () => SavedCanvasProperties;
 	prepareForExport: (quality?: number) => Promise<Blob>;
 	drawCanvas: (canvas: HTMLCanvasElement, layerId?: string) => void;
 };

From b8fab5e842d6b34177670e9052475732b3b87d25 Mon Sep 17 00:00:00 2001
From: Mark Evola <markevola24@gmail.com>
Date: Fri, 15 Aug 2025 13:42:36 -0500
Subject: [PATCH 5/5] types

---
 package.json                           |  1 +
 pnpm-lock.yaml                         | 21 +++++++++++----------
 src/components/LayerPane/LayerPane.tsx |  1 -
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index bf11e03..594847b 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
 		"@testing-library/jest-dom": "^6.6.1",
 		"@testing-library/react": "^16.0.1",
 		"@testing-library/user-event": "^14.5.2",
+		"@types/cookie-parser": "^1.4.9",
 		"@vitest/coverage-v8": "2.1.3",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-prettier": "^5.5.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be477a6..629e5c4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -145,6 +145,9 @@ devDependencies:
   '@testing-library/user-event':
     specifier: ^14.5.2
     version: 14.5.2(@testing-library/dom@10.4.0)
+  '@types/cookie-parser':
+    specifier: ^1.4.9
+    version: 1.4.9(@types/express@4.17.17)
   '@vitest/coverage-v8':
     specifier: 2.1.3
     version: 2.1.3(vitest@2.1.3)
@@ -3878,7 +3881,6 @@ packages:
     dependencies:
       '@types/connect': 3.4.38
       '@types/node': 20.4.10
-    dev: false
 
   /@types/compression@1.7.2:
     resolution: {integrity: sha512-lwEL4M/uAGWngWFLSG87ZDr2kLrbuR8p7X+QZB1OQlT+qkHsCPDVFnHPyXf4Vyl4yDDorNY+mAhosxkCvppatg==}
@@ -3890,7 +3892,14 @@ packages:
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
     dependencies:
       '@types/node': 20.4.10
-    dev: false
+
+  /@types/cookie-parser@1.4.9(@types/express@4.17.17):
+    resolution: {integrity: sha512-tGZiZ2Gtc4m3wIdLkZ8mkj1T6CEHb35+VApbL2T14Dew8HA7c+04dmKqsKRNC+8RJPm16JEK0tFSwdZqubfc4g==}
+    peerDependencies:
+      '@types/express': '*'
+    dependencies:
+      '@types/express': 4.17.17
+    dev: true
 
   /@types/estree@1.0.6:
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
@@ -3903,7 +3912,6 @@ packages:
       '@types/qs': 6.9.18
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
-    dev: false
 
   /@types/express@4.17.17:
     resolution: {integrity: sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==}
@@ -3912,11 +3920,9 @@ packages:
       '@types/express-serve-static-core': 4.19.6
       '@types/qs': 6.9.18
       '@types/serve-static': 1.15.7
-    dev: false
 
   /@types/http-errors@2.0.4:
     resolution: {integrity: sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==}
-    dev: false
 
   /@types/json-schema@7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
@@ -3924,7 +3930,6 @@ packages:
 
   /@types/mime@1.3.5:
     resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
-    dev: false
 
   /@types/node@20.4.10:
     resolution: {integrity: sha512-vwzFiiy8Rn6E0MtA13/Cxxgpan/N6UeNYR9oUu6kuJWxu6zCk98trcDp8CBhbtaeuq9SykCmXkFr2lWLoPcvLg==}
@@ -3935,11 +3940,9 @@ packages:
 
   /@types/qs@6.9.18:
     resolution: {integrity: sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==}
-    dev: false
 
   /@types/range-parser@1.2.7:
     resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
-    dev: false
 
   /@types/react-dom@19.0.2(@types/react@19.0.2):
     resolution: {integrity: sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==}
@@ -3962,7 +3965,6 @@ packages:
     dependencies:
       '@types/mime': 1.3.5
       '@types/node': 20.4.10
-    dev: false
 
   /@types/serve-static@1.15.7:
     resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==}
@@ -3970,7 +3972,6 @@ packages:
       '@types/http-errors': 2.0.4
       '@types/node': 20.4.10
       '@types/send': 0.17.4
-    dev: false
 
   /@types/uuid@10.0.0:
     resolution: {integrity: sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==}
diff --git a/src/components/LayerPane/LayerPane.tsx b/src/components/LayerPane/LayerPane.tsx
index 64f48ed..8d13ab5 100644
--- a/src/components/LayerPane/LayerPane.tsx
+++ b/src/components/LayerPane/LayerPane.tsx
@@ -77,7 +77,6 @@ function LayerPane(): ReactNode {
 						key={layer.id}
 						canMoveUp={i > 0}
 						canMoveDown={i < totalLayers - 1}
-						idx={i}
 					/>
 				))}
 			</div>