Added packages. Reformatted files.

cypress/support/component.ts

@@ -12,12 +12,11 @@
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
-
 // Import commands.js using ES2015 syntax:
-import "./commands";
-
 import { mount } from "cypress/react";
 
+import "./commands";
+
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
 // Alternatively, can be defined in cypress/support/component.d.ts

package-lock.json

@@ -8,12 +8,14 @@
       "name": "luminance",
       "version": "0.0.0",
       "dependencies": {
+        "motion": "^12.23.12",
         "react": "^19.1.0",
         "react-dom": "^19.1.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
         "@rollup/plugin-wasm": "^6.2.2",
+        "@trivago/prettier-plugin-sort-imports": "^5.2.2",
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.2",
         "@vitejs/plugin-react": "^4.4.1",
@@ -1719,6 +1721,41 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@trivago/prettier-plugin-sort-imports": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-5.2.2.tgz",
+      "integrity": "sha512-fYDQA9e6yTNmA13TLVSA+WMQRc5Bn/c0EUBditUHNfMMxN7M82c38b1kEggVE3pLpZ0FwkwJkUEKMiOi52JXFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/generator": "^7.26.5",
+        "@babel/parser": "^7.26.7",
+        "@babel/traverse": "^7.26.7",
+        "@babel/types": "^7.26.7",
+        "javascript-natural-sort": "^0.7.1",
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">18.12"
+      },
+      "peerDependencies": {
+        "@vue/compiler-sfc": "3.x",
+        "prettier": "2.x - 3.x",
+        "prettier-plugin-svelte": "3.x",
+        "svelte": "4.x || 5.x"
+      },
+      "peerDependenciesMeta": {
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -3662,6 +3699,33 @@
         "node": ">= 6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
+      "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.12",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -4142,6 +4206,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4547,6 +4618,47 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/motion": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.12.tgz",
+      "integrity": "sha512-8jCD8uW5GD1csOoqh1WhH1A6j5APHVE15nuBkFeRiMzYBdRwyAHmSP/oXSuW0WJPZRXTFdBoG4hY9TFWNhhwng==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.23.12",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
+      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5514,7 +5626,6 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
       "license": "0BSD"
     },
     "node_modules/tunnel-agent": {

package.json

@@ -14,12 +14,14 @@
     "test:wasmdoc": "cargo test --doc --manifest-path colorlib/Cargo.toml"
   },
   "dependencies": {
+    "motion": "^12.23.12",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
     "@rollup/plugin-wasm": "^6.2.2",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
@@ -37,5 +39,18 @@
     "vite": "^6.3.5",
     "vite-plugin-top-level-await": "^1.5.0",
     "vite-plugin-wasm": "^3.4.1"
+  },
+  "prettier": {
+    "importOrder": [
+      "^@core/(.*)$",
+      "^@server/(.*)$",
+      "^@ui/(.*)$",
+      "^[./]"
+    ],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true,
+    "plugins": [
+      "@trivago/prettier-plugin-sort-imports"
+    ]
   }
 }

src/App.tsx

@@ -1,10 +1,11 @@
+import clsx from "clsx";
 import { useState } from "react";
+
 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";
-import clsx from "clsx";
 
 // Menu Button Components
 

src/components/SideMenu/SideMenu.tsx

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

src/components/SideMenu/tests/SideMenuTest.cy.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+
 import { LeftMenu, RightMenu } from "../SideMenu";
 
 // Test Fixtures

src/hooks/slider.tsx

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

src/hooks/tests/crosshairTest.cy.tsx

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

src/main.tsx

@@ -1,7 +1,8 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import "./index.css";
+
 import App from "./App.tsx";
+import "./index.css";
 import { MediaQueryProvider } from "./providers";
 
 createRoot(document.getElementById("root")!).render(

src/providers/MediaQueryProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useState, useEffect } from "react";
+import { createContext, useEffect, useState } from "react";
 import type { ReactNode } from "react";
 
 enum ViewportMode {