Use @ alias imports. Formatted files.

src/App.tsx

@@ -1,11 +1,14 @@
-import clsx from "clsx";
 import { useState } from "react";
 
+import clsx from "clsx";
+
+import ColorPicker from "@components/ColorPicker/ColorPicker";
+import ColorValues from "@components/ColorValues/ColorValues";
+import { LeftMenu, RightMenu } from "@components/SideMenu";
+
+import { useMediaQuery } from "@providers/hooks";
+
 import styles from "./App.module.css";
-import ColorPicker from "./components/ColorPicker/ColorPicker";
-import ColorValues from "./components/ColorValues/ColorValues";
-import { LeftMenu, RightMenu } from "./components/SideMenu";
-import { useMediaQuery } from "./providers/hooks";
 
 // Menu Button Components
 

src/components/ColorValues/ColorValues.module.css

@@ -6,6 +6,11 @@
 .valueItem {
 }
 
+/* Component Editor */
+
+.componentWrapper {
+}
+
 /* Large - Landscape Tablets / Desktops */
 /* Medium - Portrait Tablets */
 /* Horizontal layout, vertically scrolling picker and palette content */

src/components/SideMenu/SideMenu.tsx

@@ -1,6 +1,7 @@
-import clsx from "clsx";
 import type { ReactNode } from "react";
 
+import clsx from "clsx";
+
 import styles from "./SideMenu.module.css";
 
 interface SideMenuProps {

src/components/SideMenu/index.ts

@@ -1,2 +1,3 @@
 import { LeftMenu, RightMenu } from "./SideMenu";
+
 export { LeftMenu, RightMenu };

src/hooks/animation.ts

@@ -1,4 +1,4 @@
-import { useRef, useCallback } from "react";
+import { useCallback, useRef } from "react";
 
 export function useSmoothAnimation() {
   const animationRef = useRef<number | null>(null);

src/hooks/crosshair.tsx

@@ -1,13 +1,13 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { Dispatch, SetStateAction } from "react";
 
-import type { CartesianSpace } from "../types";
+import type { CartesianSpace } from "@/types";
 import {
   extractEventCoordinates,
   isLeftMouseButton,
   isTouchEvent,
   minmax,
-} from "../util";
+} from "@/util";
 
 if (typeof TouchEvent === "undefined") {
   // @ts-ignore - intentionally creating global

src/hooks/dragAndDrop.tsx

@@ -5,7 +5,7 @@ import {
   extractEventCoordinates,
   isLeftMouseButton,
   isTouchEvent,
-} from "../util";
+} from "@/util";
 
 type DragAction<T> =
   | { type: "resetItems"; items: T[] }

src/hooks/scroll.ts

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { RefObject } from "react";
 
 export function handleScroll(

src/hooks/slider.tsx

@@ -1,13 +1,14 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { Dispatch, SetStateAction } from "react";
 
-import type { CartesianSpace } from "../types";
+import type { CartesianSpace } from "@/types";
 import {
   extractEventCoordinates,
   isLeftMouseButton,
   isTouchEvent,
   minmax,
-} from "../util";
+} from "@/util";
+
 import { useScroll } from "./scroll";
 
 if (typeof TouchEvent === "undefined") {

src/hooks/tests/crosshairTest.cy.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
-import type { CartesianSpace } from "../../types";
+import type { CartesianSpace } from "@/types";
+
 import { useCrosshair } from "../crosshair";
 
 // Test Fixtures

src/hooks/tests/dragAndDropTest.cy.tsx

@@ -1,6 +1,7 @@
+import { useState } from "react";
+
 import clsx from "clsx";
 import { motion } from "motion/react";
-import { useState } from "react";
 
 import { useDragAndDrop } from "../dragAndDrop";
 import styles from "./dragAndDropTest.module.css";

src/hooks/tests/sliderTest.cy.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
-import type { CartesianSpace } from "../../types";
+import type { CartesianSpace } from "@/types";
+
 import { Direction, useSlider } from "../slider";
 
 // Test Fixtures

src/main.tsx

@@ -1,4 +1,5 @@
 import { StrictMode } from "react";
+
 import { createRoot } from "react-dom/client";
 
 import App from "./App.tsx";

src/providers/hooks.ts

@@ -1,4 +1,5 @@
 import { useContext } from "react";
+
 import { MediaQueryContext } from "./MediaQueryProvider";
 
 function useMediaQuery() {