From eb0043fd5fc1c0e659feb9ae0a18adb8a3ba8533 Mon Sep 17 00:00:00 2001
From: MattMcAdams <mattmcadams@outlook.com>
Date: Sat, 17 Feb 2024 19:34:41 -0600
Subject: [PATCH] Restructure data, add library

---
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 src/app/library/page.tsx                      |  47 ++
 src/app/page.tsx                              | 483 ++++++++++-----
 src/components/ColorRow.tsx                   |  39 +-
 src/components/LibraryRow.tsx                 |  47 ++
 src/components/generics/input.tsx             |  26 -
 src/components/inputs/BrightnessInput.tsx     |  51 --
 src/components/inputs/Configuration.tsx       |   2 +-
 src/components/inputs/CountInput.tsx          |  35 --
 src/components/inputs/EasingInput.tsx         |  50 +-
 src/components/inputs/KeyColorInput.tsx       |   6 +-
 .../inputs/LibraryConfiguration.tsx           |  62 ++
 src/components/inputs/NumberInput.tsx         |  46 ++
 src/components/inputs/RotationInput.tsx       |  51 --
 src/components/inputs/SaturationInput.tsx     |  51 --
 src/data/defaults.tsx                         |  39 ++
 src/data/limits.tsx                           |  20 +
 src/data/session.tsx                          | 564 ++++++++++--------
 src/functions/ease.ts                         |  29 +-
 src/functions/getColors.ts                    |  10 +-
 src/types/configObj.ts                        |  25 +
 src/types/context.ts                          |  31 +
 src/types/easing.ts                           |  28 +
 24 files changed, 1069 insertions(+), 679 deletions(-)
 create mode 100644 src/app/library/page.tsx
 create mode 100644 src/components/LibraryRow.tsx
 delete mode 100644 src/components/generics/input.tsx
 delete mode 100644 src/components/inputs/BrightnessInput.tsx
 delete mode 100644 src/components/inputs/CountInput.tsx
 create mode 100644 src/components/inputs/LibraryConfiguration.tsx
 create mode 100644 src/components/inputs/NumberInput.tsx
 delete mode 100644 src/components/inputs/RotationInput.tsx
 delete mode 100644 src/components/inputs/SaturationInput.tsx
 create mode 100644 src/data/defaults.tsx
 create mode 100644 src/data/limits.tsx
 create mode 100644 src/types/configObj.ts
 create mode 100644 src/types/context.ts
 create mode 100644 src/types/easing.ts

diff --git a/package-lock.json b/package-lock.json
index d395615..dd5bc8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "colorful",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "colorful",
-      "version": "1.3.1",
+      "version": "2.0.0",
       "license": "GPU-3.0",
       "dependencies": {
         "color": "^3.0.0",
diff --git a/package.json b/package.json
index 33f3bcd..c0919d2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "colorful",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "description": "A tool for creating and manipulating colors",
   "private": true,
   "license": "GPU-3.0",
diff --git a/src/app/library/page.tsx b/src/app/library/page.tsx
new file mode 100644
index 0000000..0f7f09e
--- /dev/null
+++ b/src/app/library/page.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+// load data
+import { useSessionContext } from "../../data/session";
+// load components
+import LibraryRow from "../../components/LibraryRow";
+import LibraryConfigInput from "../../components/inputs/LibraryConfiguration";
+
+const Library = () => {
+  const Session = useSessionContext();
+
+  // const check = arr.some((e) => e.name === obj.name);
+
+  return (
+    <main className="space-y-16 lg:p-16 md:p-8 p-4">
+      {Session.providerLoaded ? (
+        Session.libraryLoaded && Session.configLoaded ? (
+          <div className="md:flex gap-8 wrap space-y-8 md:space-y-0">
+            <div className="basis-1/2 space-y-16 grow overflow-x-scroll">
+              <h1>Library</h1>
+              {!Session.library.some(
+                (config) =>
+                  JSON.stringify(config) === JSON.stringify(Session.config)
+              ) ? (
+                <LibraryRow config={Session.config} exists={false} />
+              ) : null}
+              {Session.library.map((config, index) => (
+                <LibraryRow config={config} key={index} exists={true} />
+              ))}
+            </div>
+            <div>
+              <LibraryConfigInput />
+            </div>
+          </div>
+        ) : (
+          <>
+            <p>Loading Library & Configuration</p>
+          </>
+        )
+      ) : (
+        <p>The context provider has failed to load</p>
+      )}
+    </main>
+  );
+}
+
+export default Library;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2f49b6a..81c7d6b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,49 +1,54 @@
 "use client";
 
+// Load dependencies
 import Color from 'color';
-
-import { useSessionContext } from "../data/session";
+// load types
+import easingOptions from "../types/easing";
+// load functions
 import * as hex from "../functions/hex";
-import { getColorsList } from "../functions/getColors";
+import getColorsList from "../functions/getColors";
+// load data
+import { useSessionContext } from "../data/session";
+import limits from "../data/limits";
+// load inputs
+import NumberInput from "../components/inputs/NumberInput";
+import EasingInput from "../components/inputs/EasingInput";
 import ColorInput from "../components/inputs/KeyColorInput";
 import AdvColorInfoInput from "../components/inputs/AdvColorInfoInput";
-import CountInput from "../components/inputs/CountInput";
-import BrightnessInput from "../components/inputs/BrightnessInput";
-import RotationInput from "../components/inputs/RotationInput";
-import SaturationInput from "../components/inputs/SaturationInput";
+import CopyColorsButton from "../components/inputs/CopyColorsButton";
+import CopySvgButton from "../components/inputs/CopySvgButton";
 import ConfigInput from "../components/inputs/Configuration";
+// load components
 import ColorRow from "../components/ColorRow";
 import { ConnectedScatterplot } from "../components/Graph";
-import CopyColorsButton from "../components/inputs/CopyColorsButton";
-import CopySvgButton from "../components/inputs/CopySvgButton";
 
 export default function Home() {
   const Session = useSessionContext();
 
-  const mainColor = hex.isValid(hex.fromNumber(Session.keyColor)) ? hex.fromNumber(Session.keyColor) : "#000000";
+  const mainColor = hex.isValid(hex.fromNumber(Session.config.keyColor)) ? hex.fromNumber(Session.config.keyColor) : "#000000";
 
   const darkColors = getColorsList(
-    Session.darkCount,
+    Session.config.dark.count,
     "black",
-    Session.darkRotation,
-    Session.darkRotationEasing,
-    Session.darkSaturation,
-    Session.darkSaturationEasing,
-    Session.darkness,
-    Session.darknessEasing,
+    Session.config.dark.angle,
+    Session.config.dark.angleEase,
+    Session.config.dark.saturation,
+    Session.config.dark.saturationEase,
+    Session.config.dark.brightness,
+    Session.config.dark.brightnessEase,
     mainColor,
     '#FFFFFF'
   ).reverse();
 
   const lightColors = getColorsList(
-    Session.lightCount,
+    Session.config.light.count,
     'white',
-    Session.lightRotation,
-    Session.lightRotationEasing,
-    Session.lightSaturation,
-    Session.lightSaturationEasing,
-    Session.lightness,
-    Session.lightnessEasing,
+    Session.config.light.angle,
+    Session.config.light.angleEase,
+    Session.config.light.saturation,
+    Session.config.light.saturationEase,
+    Session.config.light.brightness,
+    Session.config.light.brightnessEase,
     mainColor,
     '#FFFFFF'
   );
@@ -52,127 +57,333 @@ export default function Home() {
 
   return (
     <main className="space-y-16 lg:p-16 md:p-8 p-4">
-      {Session.loaded ? (
-        <>
-          <div id="primaryControls" className="flex flex-wrap gap-x-8">
-            <ColorInput />
-            <div className="space-y-4">
-              <p className="block font-mono font-bold text-base">Options</p>
-              <AdvColorInfoInput />
-              <div className="flex gap-x-4">
-                <CopyColorsButton colors={allColors} />
-                <CopySvgButton colors={allColors} />
-              </div>
-            </div>
-            <div>
-              <span className="block font-mono font-bold text-base">About</span>
-              <p className="mt-4">Colorful v1.3.1</p>
-              <p>
+      {Session.providerLoaded ? (
+        Session.configLoaded ? (
+          <>
+            <div id="primaryControls" className="flex flex-wrap gap-x-8 gap-y-8">
+              <div className='space-y-7'>
+                <ColorInput />
                 <a
-                  href="https://www.mattmcadams.com"
-                  className="underline"
-                  target="_blank"
+                  href="/library"
+                  className="block text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 font-medium rounded-lg text-sm px-5 transform active:scale-90 transition-transform py-2.5"
                 >
-                  Matt McAdams
-                </a>{" "}
-                &middot;{" "}
-                <a
-                  href="https://github.com/MattMcAdams/color-tool"
-                  target="_blank"
-                  className="underline"
-                >
-                  Open Source
-                </a>{" "}
-                &middot;{" "}
-                <a
-                  className="underline"
-                  target="_blank"
-                  href="https://mattmcadams.com/donate"
-                >
-                  Donate
+                  Library
                 </a>
-              </p>
-            </div>
-          </div>
-          <div
-            id="colorScale"
-            className="sticky top-0 pt-8 pb-3 overflow-x-auto bg-white border-b border-gray-300"
-          >
-            <ColorRow
-              darkColors={darkColors}
-              mainColor={mainColor}
-              lightColors={lightColors}
-            />
-          </div>
-          <div id="colorControls" className="flex flex-wrap gap-x-8 gap-y-12">
-            <div className="space-y-12 w-80">
-              <CountInput type="dark" />
-              <BrightnessInput type="dark" />
-              <RotationInput type="dark" />
-              <SaturationInput type="dark" />
+              </div>
+              <div className="space-y-4">
+                <p className="block font-mono font-bold text-base">Options</p>
+                <AdvColorInfoInput />
+                <div className="flex gap-x-4">
+                  <CopyColorsButton colors={allColors} />
+                  <CopySvgButton colors={allColors} />
+                </div>
+              </div>
+              <div>
+                <span className="block font-mono font-bold text-base">
+                  About
+                </span>
+                <p className="mt-4">Colorful v2.0.0</p>
+                <p>
+                  <a
+                    href="https://www.mattmcadams.com"
+                    className="underline"
+                    target="_blank"
+                  >
+                    Matt McAdams
+                  </a>{" "}
+                  &middot;{" "}
+                  <a
+                    href="https://github.com/MattMcAdams/color-tool"
+                    target="_blank"
+                    className="underline"
+                  >
+                    Open Source
+                  </a>{" "}
+                  &middot;{" "}
+                  <a
+                    className="underline"
+                    target="_blank"
+                    href="https://mattmcadams.com/donate"
+                  >
+                    Donate
+                  </a>
+                </p>
+              </div>
             </div>
-            <div className="space-y-12 w-80">
-              <CountInput type="light" />
-              <BrightnessInput type="light" />
-              <RotationInput type="light" />
-              <SaturationInput type="light" />
+            <div
+              id="colorScale"
+              className="sticky top-0 pt-8 pb-3 overflow-x-auto bg-white border-b border-gray-300"
+            >
+              <ColorRow config={Session.config} />
             </div>
-            <div className="space-y-12">
-              <figure>
-                <figcaption className="block mb-2 text-sm font-bold text-gray-900 font-mono">
-                  Luminance · How bright is it?
-                </figcaption>
-                <ConnectedScatterplot
-                  width={320}
-                  height={150}
-                  yDomain={[0, 1]}
-                  data={allColors.map((s) => ({
-                    x: allColors.indexOf(s),
-                    y: Color(s).luminosity(),
-                    hex: s,
-                  }))}
-                />
-              </figure>
-              <figure>
-                <figcaption className="block mb-2 text-sm font-bold text-gray-900 font-mono">
-                  Chroma · How colorful is it?
-                </figcaption>
-                <ConnectedScatterplot
-                  width={320}
-                  height={150}
-                  yDomain={[0, 150]}
-                  data={allColors.map((s) => ({
-                    x: allColors.indexOf(s),
-                    y: Color(s).lch().object().c,
-                    hex: s,
-                  }))}
+            <div id="colorControls" className="flex flex-wrap gap-x-8 gap-y-12">
+              <div className="space-y-12 w-80">
+                <NumberInput
+                  name="darkCount"
+                  label="Dark Count"
+                  min={limits.count.min}
+                  max={limits.count.max}
+                  slider={false}
+                  value={Session.config.dark.count}
+                  changeHandler={(e) =>
+                    Session.updateConfig(
+                      "dark",
+                      "count",
+                      Number(e.target.value)
+                    )
+                  }
                 />
-              </figure>
-              <figure>
-                <figcaption className="block mb-2 text-sm font-bold text-gray-900 font-mono">
-                  Hue · What color is it?
-                </figcaption>
-                <ConnectedScatterplot
-                  width={320}
-                  height={150}
-                  yDomain={[0, 360]}
-                  data={allColors.map((s) => ({
-                    x: allColors.indexOf(s),
-                    y: Color(s).hsl().object().h,
-                    hex: s,
-                  }))}
+                <div>
+                  <NumberInput
+                    name="darkness"
+                    label="Darkness"
+                    min={limits.brightness.min}
+                    max={limits.brightness.max}
+                    slider={true}
+                    value={Session.config.dark.brightness}
+                    changeHandler={(e) =>
+                      Session.updateConfig(
+                        "dark",
+                        "brightness",
+                        Number(e.target.value)
+                      )
+                    }
+                  />
+                  <EasingInput
+                    name="darknessEase"
+                    label="Darkness Easing"
+                    value={Session.config.dark.brightnessEase}
+                    changeHandler={(e) =>
+                      Session.updateConfigEasing(
+                        "dark",
+                        "brightness",
+                        e.target.value as easingOptions
+                      )
+                    }
+                  />
+                </div>
+                <div>
+                  <NumberInput
+                    name="darkAngle"
+                    label="Dark color hue shift"
+                    min={limits.angle.min}
+                    max={limits.angle.max}
+                    slider={true}
+                    value={Session.config.dark.angle}
+                    changeHandler={(e) =>
+                      Session.updateConfig(
+                        "dark",
+                        "angle",
+                        Number(e.target.value)
+                      )
+                    }
+                  />
+                  <EasingInput
+                    name="darkAngleEase"
+                    label="Dark color hue shift easing"
+                    value={Session.config.dark.angleEase}
+                    changeHandler={(e) =>
+                      Session.updateConfigEasing(
+                        "dark",
+                        "angle",
+                        e.target.value as easingOptions
+                      )
+                    }
+                  />
+                </div>
+                <div>
+                  <NumberInput
+                    name="darkSaturation"
+                    label="Dark color saturation"
+                    min={limits.saturation.min}
+                    max={limits.saturation.max}
+                    slider={true}
+                    value={Session.config.dark.saturation}
+                    changeHandler={(e) =>
+                      Session.updateConfig(
+                        "dark",
+                        "saturation",
+                        Number(e.target.value)
+                      )
+                    }
+                  />
+                  <EasingInput
+                    name="darkSaturationEase"
+                    label="Dark saturation easing"
+                    value={Session.config.dark.saturationEase}
+                    changeHandler={(e) =>
+                      Session.updateConfigEasing(
+                        "dark",
+                        "saturation",
+                        e.target.value as easingOptions
+                      )
+                    }
+                  />
+                </div>
+              </div>
+              <div className="space-y-12 w-80">
+                <NumberInput
+                  name="lightCount"
+                  label="Light Count"
+                  min={limits.count.min}
+                  max={limits.count.max}
+                  slider={false}
+                  value={Session.config.light.count}
+                  changeHandler={(e) =>
+                    Session.updateConfig(
+                      "light",
+                      "count",
+                      Number(e.target.value)
+                    )
+                  }
                 />
-              </figure>
-            </div>
-            <div>
-              <ConfigInput />
+                <div>
+                  <NumberInput
+                    name="lightness"
+                    label="Lightness"
+                    min={limits.brightness.min}
+                    max={limits.brightness.max}
+                    slider={true}
+                    value={Session.config.light.brightness}
+                    changeHandler={(e) =>
+                      Session.updateConfig(
+                        "light",
+                        "brightness",
+                        Number(e.target.value)
+                      )
+                    }
+                  />
+                  <EasingInput
+                    name="lightnessEase"
+                    label="Lightness Easing"
+                    value={Session.config.light.brightnessEase}
+                    changeHandler={(e) =>
+                      Session.updateConfigEasing(
+                        "light",
+                        "brightness",
+                        e.target.value as easingOptions
+                      )
+                    }
+                  />
+                </div>
+                <div>
+                  <NumberInput
+                    name="lightAngle"
+                    label="Light color hue shift"
+                    min={limits.angle.min}
+                    max={limits.angle.max}
+                    slider={true}
+                    value={Session.config.light.angle}
+                    changeHandler={(e) =>
+                      Session.updateConfig(
+                        "light",
+                        "angle",
+                        Number(e.target.value)
+                      )
+                    }
+                  />
+                  <EasingInput
+                    name="lightAngleEase"
+                    label="Light color hue shift easing"
+                    value={Session.config.light.angleEase}
+                    changeHandler={(e) =>
+                      Session.updateConfigEasing(
+                        "light",
+                        "angle",
+                        e.target.value as easingOptions
+                      )
+                    }
+                  />
+                </div>
+                <div>
+                  <NumberInput
+                    name="lightSaturation"
+                    label="Light color saturation"
+                    min={limits.saturation.min}
+                    max={limits.saturation.max}
+                    slider={true}
+                    value={Session.config.light.saturation}
+                    changeHandler={(e) =>
+                      Session.updateConfig(
+                        "light",
+                        "saturation",
+                        Number(e.target.value)
+                      )
+                    }
+                  />
+                  <EasingInput
+                    name="lightSaturationEase"
+                    label="Light saturation easing"
+                    value={Session.config.light.saturationEase}
+                    changeHandler={(e) =>
+                      Session.updateConfigEasing(
+                        "light",
+                        "saturation",
+                        e.target.value as easingOptions
+                      )
+                    }
+                  />
+                </div>
+              </div>
+              <div className="space-y-12">
+                <figure>
+                  <figcaption className="block mb-2 text-sm font-bold text-gray-900 font-mono">
+                    Luminance · How bright is it?
+                  </figcaption>
+                  <ConnectedScatterplot
+                    width={320}
+                    height={150}
+                    yDomain={[0, 1]}
+                    data={allColors.map((s) => ({
+                      x: allColors.indexOf(s),
+                      y: Color(s).luminosity(),
+                      hex: s,
+                    }))}
+                  />
+                </figure>
+                <figure>
+                  <figcaption className="block mb-2 text-sm font-bold text-gray-900 font-mono">
+                    Chroma · How colorful is it?
+                  </figcaption>
+                  <ConnectedScatterplot
+                    width={320}
+                    height={150}
+                    yDomain={[0, 150]}
+                    data={allColors.map((s) => ({
+                      x: allColors.indexOf(s),
+                      y: Color(s).lch().object().c,
+                      hex: s,
+                    }))}
+                  />
+                </figure>
+                <figure>
+                  <figcaption className="block mb-2 text-sm font-bold text-gray-900 font-mono">
+                    Hue · What color is it?
+                  </figcaption>
+                  <ConnectedScatterplot
+                    width={320}
+                    height={150}
+                    yDomain={[0, 360]}
+                    data={allColors.map((s) => ({
+                      x: allColors.indexOf(s),
+                      y: Color(s).hsl().object().h,
+                      hex: s,
+                    }))}
+                  />
+                </figure>
+              </div>
+              <div>
+                <ConfigInput />
+              </div>
             </div>
-          </div>
-        </>
+          </>
+        ) : (
+          <>
+            <p>Loading Configuration</p>
+          </>
+        )
       ) : (
-        <>
-          <p>Loading Configuration</p>
-        </>
+        <p>The context provider has failed to load</p>
       )}
     </main>
   );
diff --git a/src/components/ColorRow.tsx b/src/components/ColorRow.tsx
index c2fee62..e51ea29 100644
--- a/src/components/ColorRow.tsx
+++ b/src/components/ColorRow.tsx
@@ -1,14 +1,45 @@
 import React from "react";
 import Swatch from "./Swatch";
+import config from "../types/configObj";
+import { getColorsList } from "../functions/getColors";
+import * as hex from "../functions/hex";
+
+export const ColorRow = (props: { config: config }) => {
+  const mainColor = hex.isValid(hex.fromNumber(props.config.keyColor)) ? props.config.keyColor : "#000000";
+
+  const darkColors = getColorsList(
+    props.config.dark.count,
+    "black",
+    props.config.dark.angle,
+    props.config.dark.angleEase,
+    props.config.dark.saturation,
+    props.config.dark.saturationEase,
+    props.config.dark.brightness,
+    props.config.dark.brightnessEase,
+    mainColor,
+    "#FFFFFF"
+  ).reverse();
+
+  const lightColors = getColorsList(
+    props.config.light.count,
+    "white",
+    props.config.light.angle,
+    props.config.light.angleEase,
+    props.config.light.saturation,
+    props.config.light.saturationEase,
+    props.config.light.brightness,
+    props.config.light.brightnessEase,
+    mainColor,
+    "#FFFFFF"
+  );
 
-export const ColorRow = (props: { darkColors: string[], mainColor: string, lightColors: string[] }) => {
   return (
     <div id="ColorRow" className="flex">
-      {props.darkColors.map((color: string, index: number) => (
+      {darkColors.map((color: string, index: number) => (
         <Swatch key={index} hex={color} />
       ))}
-      <Swatch hex={props.mainColor} primary={true} />
-      {props.lightColors.map((color: string, index: number) => (
+      <Swatch hex={mainColor} primary={true} />
+      {lightColors.map((color: string, index: number) => (
         <Swatch key={index} hex={color} />
       ))}
     </div>
diff --git a/src/components/LibraryRow.tsx b/src/components/LibraryRow.tsx
new file mode 100644
index 0000000..e7bfd9b
--- /dev/null
+++ b/src/components/LibraryRow.tsx
@@ -0,0 +1,47 @@
+"use client";
+import ColorRow from "./ColorRow";
+import config from "../types/configObj";
+import { useSessionContext } from "../data/session";
+import { useRouter } from "next/navigation";
+import LibraryConfigInput from "./inputs/LibraryConfiguration";
+
+const LibraryRow = (props: { config: config, exists: boolean }) => {
+  const Session = useSessionContext();
+  const router = useRouter();
+
+  function handleEdit() {
+    Session.loadConfig(JSON.stringify(props.config));
+    router.push("/");
+  }
+
+  return (
+    <div id="LibraryRow">
+        <ColorRow config={props.config} />
+        <div className="flex gap-4">
+          {props.exists ? (
+            <button
+              className="text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 font-medium rounded-lg text-sm px-5 transform active:scale-90 transition-transform py-2.5"
+              onClick={() => Session.deleteFromLibrary(props.config)}
+            >
+              Delete
+            </button>
+          ) : (
+            <button
+              className="text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 font-medium rounded-lg text-sm px-5 transform active:scale-90 transition-transform py-2.5"
+              onClick={() => Session.saveToLibrary(props.config)}
+            >
+              Save
+            </button>
+          )}
+          <button
+            className="text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 font-medium rounded-lg text-sm px-5 transform active:scale-90 transition-transform py-2.5"
+            onClick={handleEdit}
+          >
+            Edit
+          </button>
+        </div>
+      </div>
+  );
+};
+
+export default LibraryRow;
diff --git a/src/components/generics/input.tsx b/src/components/generics/input.tsx
deleted file mode 100644
index b01b51c..0000000
--- a/src/components/generics/input.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client";
-
-const NumberInput = (props: {name: string, label: string, value: number, changeHandler: () => void}) => {
-
-  return (
-    <div id={props.name + "InputField"} className="space-y-2">
-      <label
-        htmlFor={props.name + "Input"}
-        className="block mb-2 text-sm font-bold text-gray-900 font-mono"
-      >
-        {props.label}
-      </label>
-      <input
-        className="rounded-lg bg-gray-50 border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5"
-        type="number"
-        max="10"
-        min="0"
-        id={props.name + "Input"}
-        value={props.value}
-        onChange={props.changeHandler}
-      />
-    </div>
-  );
-};
-
-export default NumberInput;
diff --git a/src/components/inputs/BrightnessInput.tsx b/src/components/inputs/BrightnessInput.tsx
deleted file mode 100644
index b1dca6a..0000000
--- a/src/components/inputs/BrightnessInput.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-"use client";
-
-import { ChangeEvent } from "react";
-import { useSessionContext } from "../../data/session";
-import EasingInput from "./EasingInput";
-
-const DarknessInput = (props: {type: 'light' | 'dark'}) => {
-  const Session = useSessionContext();
-
-  function handleChange(e: ChangeEvent<HTMLInputElement>) {
-    let value = Number(e.target.value);
-    Session.updateBrightness(props.type, value);
-  }
-
-  return (
-    <div id={props.type + "BrightnessInputField"} className="space-y-2">
-      <label
-        htmlFor={props.type + "BrightnessInput"}
-        className="block mb-2 text-sm font-bold text-gray-900 font-mono"
-      >
-        {props.type === "light" ? "Light" : "Dark"}ness
-      </label>
-      <div className="flex">
-        <input
-          className="rounded-none rounded-e-0 bg-gray-50 border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 rounded-s-lg"
-          type="number"
-          min="0"
-          max="100"
-          id={props.type + "BrightnessInput"}
-          value={props.type === "light" ? Session.lightness : Session.darkness}
-          onChange={handleChange}
-        />
-        <span className="inline-flex rounded-e-lg items-center px-3 text-sm text-gray-900 bg-gray-200  border-gray-300">
-          <span className="w-4 h-5 font-bold text-gray-500">%</span>
-        </span>
-      </div>
-      <input
-        aria-hidden="true"
-        className="w-full h-1 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer range-sm"
-        type="range"
-        min="0"
-        max="100"
-        value={props.type === "light" ? Session.lightness : Session.darkness}
-        onChange={handleChange}
-      />
-      <EasingInput type={props.type} property="brightness" />
-    </div>
-  );
-};
-
-export default DarknessInput;
diff --git a/src/components/inputs/Configuration.tsx b/src/components/inputs/Configuration.tsx
index b0fcf38..02832f8 100644
--- a/src/components/inputs/Configuration.tsx
+++ b/src/components/inputs/Configuration.tsx
@@ -15,7 +15,7 @@ const ConfigInput = () => {
   }
 
   function applyConfig() {
-    Session.loadConfiguration(configString);
+    Session.loadConfig(configString);
   }
 
   function loadConfig() {
diff --git a/src/components/inputs/CountInput.tsx b/src/components/inputs/CountInput.tsx
deleted file mode 100644
index d034b4c..0000000
--- a/src/components/inputs/CountInput.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-
-import { ChangeEvent } from "react";
-import { useSessionContext } from "../../data/session";
-
-const DarkCountInput = (props: {type: 'light' | 'dark'}) => {
-  const Session = useSessionContext();
-
-  function handleChange(e: ChangeEvent<HTMLInputElement>) {
-    let value = Number(e.target.value);
-    Session.updateCount(props.type, value);
-  }
-
-  return (
-    <div id={props.type + "CountInputField"} className="space-y-2">
-      <label
-        htmlFor={props.type + "CountInput"}
-        className="block mb-2 text-sm font-bold text-gray-900 font-mono"
-      >
-        {props.type === 'light' ? 'Light' : 'Dark'} color steps
-      </label>
-      <input
-        className="rounded-lg bg-gray-50 border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5"
-        type="number"
-        max="50"
-        min="0"
-        id={props.type + "CountInput"}
-        value={props.type === 'light' ? Session.lightCount : Session.darkCount}
-        onChange={handleChange}
-      />
-    </div>
-  );
-};
-
-export default DarkCountInput;
diff --git a/src/components/inputs/EasingInput.tsx b/src/components/inputs/EasingInput.tsx
index 4f0e6cf..821f9f4 100644
--- a/src/components/inputs/EasingInput.tsx
+++ b/src/components/inputs/EasingInput.tsx
@@ -1,64 +1,38 @@
 "use client";
 
 import { ChangeEvent } from "react";
-import { useSessionContext } from "../../data/session";
-import { easingOptions, easingOptionsType } from "../../functions/ease";
+import { easingOptions } from "../../types/easing";
 
 const EasingInput = (props: {
-  type: "light" | "dark",
-  property: 'hue' | 'saturation' | 'brightness',
+  name: string;
+  label: string;
+  value: easingOptions;
+  changeHandler: (e: ChangeEvent<HTMLSelectElement>) => void;
 }) => {
-  const Session = useSessionContext();
-
-  let value = '';
-  if (props.type === 'light') {
-    if (props.property === 'hue') {
-      value = Session.lightRotationEasing;
-    } else if (props.property === 'saturation') {
-      value = Session.lightSaturationEasing;
-    } else {
-      value = Session.lightnessEasing;
-    }
-  } else {
-    if (props.property === 'hue') {
-      value = Session.darkRotationEasing;
-    } else if (props.property === 'saturation') {
-      value = Session.darkSaturationEasing;
-    } else {
-      value = Session.darknessEasing;
-    }
-  }
-
-  function handleChange(e: ChangeEvent<HTMLSelectElement>) {
-    let value = e.target.value as easingOptionsType;
-    Session.updateEasing(props.type, props.property, value);
-  }
 
   const easingKeys = [];
 
   for (let option in easingOptions) {
-    easingKeys.push(
-      <option value={option}>{option}</option>
-    );
+    easingKeys.push(<option value={option}>{option}</option>);
   }
 
   return (
     <div
-      id={props.type + "_" + props.property + "CountInputField"}
+      id={props.name + "InputField"}
       className="space-y-2"
     >
       <label
-        htmlFor={props.type + "_" + props.property + "CountInput"}
+        htmlFor={props.name + "Input"}
         className="block mb-2 text-sm font-medium text-gray-900 font-mono hidden"
       >
-        Easing
+        {props.label}
       </label>
       <select
         name="cars"
-        id={props.type + "_" + props.property + "CountInput"}
+        id={props.name + "Input"}
         className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-        value={value}
-        onChange={handleChange}
+        value={props.value}
+        onChange={props.changeHandler}
       >
         {easingOptions.map((type) => (
           <option key={`${type}`} value={type}>
diff --git a/src/components/inputs/KeyColorInput.tsx b/src/components/inputs/KeyColorInput.tsx
index 60fd4c0..35c087c 100644
--- a/src/components/inputs/KeyColorInput.tsx
+++ b/src/components/inputs/KeyColorInput.tsx
@@ -13,7 +13,7 @@ const KeyColorInput = () => {
   }
 
   return (
-    <div id="colorInput" className="space-y-4 w-80">
+    <div id="colorInput" className="w-80">
       <label
         htmlFor="colorInput"
         className="block font-mono font-bold text-base"
@@ -26,11 +26,11 @@ const KeyColorInput = () => {
           className="w-full font-mono text-3xl font-light text-gray-700"
           type="text"
           id="colorInput"
-          value={Session.keyColor}
+          value={Session.config.keyColor}
           onChange={handleChange}
         />
       </div>
-      {hex.isValid(hex.fromNumber(Session.keyColor)) ? (
+      {hex.isValid(hex.fromNumber(Session.config.keyColor)) ? (
         <p>&nbsp;</p>
       ) : (
         <p>Invalid color code</p>
diff --git a/src/components/inputs/LibraryConfiguration.tsx b/src/components/inputs/LibraryConfiguration.tsx
new file mode 100644
index 0000000..6e3f5b9
--- /dev/null
+++ b/src/components/inputs/LibraryConfiguration.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { ChangeEvent, useState } from "react";
+import { useSessionContext } from "../../data/session";
+
+const LibraryConfigInput = () => {
+  const Session = useSessionContext();
+  const [libraryString, setLibraryString] = useState(
+    localStorage.getItem("colorToolLibrary") || ""
+  );
+
+  function handleChange(e: ChangeEvent<HTMLTextAreaElement>) {
+    let value = e.target.value;
+    setLibraryString(value);
+  }
+
+  function applyConfig() {
+    Session.loadLibrary(libraryString);
+  }
+
+  function loadConfig() {
+    setLibraryString(localStorage.getItem("colorToolLibrary") || "");
+  }
+
+  return (
+    <div id={"CongifInputField"} className="space-y-2 w-80">
+      <label
+        htmlFor={"ConfigInput"}
+        className="block mb-2 text-sm font-bold text-gray-900 font-mono"
+      >
+        RAW Configuration
+      </label>
+      <textarea
+        className="rounded-lg bg-gray-50 border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5"
+        id={"ConfigInput"}
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck="false"
+        style={{ height: "35rem" }}
+        value={libraryString}
+        onChange={handleChange}
+      />
+      <div className="flex space-x-2">
+        <button
+          className="grow text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 transform active:scale-90 transition-transform"
+          onClick={applyConfig}
+        >
+          Apply Config
+        </button>
+        <button
+          className="grow text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 transform active:scale-90 transition-transform"
+          onClick={loadConfig}
+        >
+          Get Current
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default LibraryConfigInput;
diff --git a/src/components/inputs/NumberInput.tsx b/src/components/inputs/NumberInput.tsx
new file mode 100644
index 0000000..6e01f57
--- /dev/null
+++ b/src/components/inputs/NumberInput.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { ChangeEvent } from "react";
+
+const NumberInput = (props: {
+  name: string;
+  label: string;
+  min: number;
+  max: number;
+  value: number;
+  slider: boolean;
+  changeHandler: (e: ChangeEvent<HTMLInputElement>) => void;
+}) => {
+  return (
+    <div id={props.name + "InputField"} className="space-y-2">
+      <label
+        htmlFor={props.name + "Input"}
+        className="block mb-2 text-sm font-bold text-gray-900 font-mono"
+      >
+        {props.label}
+      </label>
+      <input
+        className="rounded-lg bg-gray-50 border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5"
+        type="number"
+        max={props.max}
+        min={props.min}
+        id={props.name + "Input"}
+        value={props.value}
+        onChange={props.changeHandler}
+      />
+      {props.slider ? (
+        <input
+          aria-hidden="true"
+          className="w-full h-1 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer range-sm"
+          type="range"
+          min={props.min}
+          max={props.max}
+          value={props.value}
+          onChange={props.changeHandler}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export default NumberInput;
diff --git a/src/components/inputs/RotationInput.tsx b/src/components/inputs/RotationInput.tsx
deleted file mode 100644
index 1c048f2..0000000
--- a/src/components/inputs/RotationInput.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-"use client";
-
-import { ChangeEvent } from "react";
-import { useSessionContext } from "../../data/session";
-import EasingInput from "./EasingInput";
-
-const RotationInput = (props: {type: 'light' | 'dark'}) => {
-  const Session = useSessionContext();
-
-  function handleChange(e: ChangeEvent<HTMLInputElement>) {
-    let value = Number(e.target.value);
-    Session.updateRotation(props.type, value);
-  }
-
-  return (
-    <div id={props.type + "RotationInputField"} className="space-y-2">
-      <label
-        htmlFor={props.type + "RotationInput"}
-        className="block mb-2 text-sm font-bold text-gray-900 font-mono"
-      >
-        {props.type === 'light' ? 'Light' : 'Dark'} color hue shift
-      </label>
-      <div className="flex">
-        <input
-          className="rounded-none rounded-e-0 bg-gray-50 border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 rounded-s-lg"
-          type="number"
-          min="-360"
-          max="360"
-          id="darkRotationInput"
-          value={props.type === 'light' ? Session.lightRotation : Session.darkRotation}
-          onChange={handleChange}
-        />
-        <span className="inline-flex rounded-e-lg items-center px-3 text-sm text-gray-900 bg-gray-200  border-gray-300">
-          <span className="w-4 h-5 font-bold text-gray-500">&deg;</span>
-        </span>
-      </div>
-      <input
-        aria-hidden="true"
-        className="w-full h-1 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer range-sm"
-        type="range"
-        min="-360"
-        max="360"
-        value={props.type === 'light' ? Session.lightRotation : Session.darkRotation}
-        onChange={handleChange}
-      />
-      <EasingInput type={props.type} property="hue" />
-    </div>
-  );
-};
-
-export default RotationInput;
diff --git a/src/components/inputs/SaturationInput.tsx b/src/components/inputs/SaturationInput.tsx
deleted file mode 100644
index 6ef0dd4..0000000
--- a/src/components/inputs/SaturationInput.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-"use client";
-
-import { ChangeEvent } from "react";
-import { useSessionContext } from "../../data/session";
-import EasingInput from "./EasingInput";
-
-const DarknessInput = (props: {type: 'light' | 'dark'}) => {
-  const Session = useSessionContext();
-
-  function handleChange(e: ChangeEvent<HTMLInputElement>) {
-    let value = Number(e.target.value);
-    Session.updateSaturation(props.type, value);
-  }
-
-  return (
-    <div id={props.type + "SaturationInputField"} className="space-y-2">
-      <label
-        htmlFor={props.type + "SaturationInput"}
-        className="block mb-2 text-sm font-bold text-gray-900 font-mono"
-      >
-        {props.type === 'light' ? 'Light' : 'Dark'} color saturation
-      </label>
-      <div className="flex">
-        <input
-          className="rounded-none rounded-e-0 bg-gray-50 border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 rounded-s-lg"
-          type="number"
-          min="-100"
-          max="100"
-          id={props.type + "SaturationInput"}
-          value={props.type === 'light' ? Session.lightSaturation : Session.darkSaturation}
-          onChange={handleChange}
-        />
-        <span className="inline-flex rounded-e-lg items-center px-3 text-sm text-gray-900 bg-gray-200  border-gray-300">
-          <span className="w-4 h-5 font-bold text-gray-500">%</span>
-        </span>
-      </div>
-      <input
-        aria-hidden="true"
-        className="w-full h-1 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer range-sm"
-        type="range"
-        min="-100"
-        max="200"
-        value={props.type === 'light' ? Session.lightSaturation : Session.darkSaturation}
-        onChange={handleChange}
-      />
-      <EasingInput type={props.type} property="saturation" />
-    </div>
-  );
-};
-
-export default DarknessInput;
diff --git a/src/data/defaults.tsx b/src/data/defaults.tsx
new file mode 100644
index 0000000..fd7bb0a
--- /dev/null
+++ b/src/data/defaults.tsx
@@ -0,0 +1,39 @@
+import type { easingOptions } from "../types/easing";
+import { config } from "../types/configObj";
+
+export const defaultConfig: config = {
+  keyColor: "0EA5E9",
+  dark: {
+    count: 4,
+    brightness: 50,
+    brightnessEase: "linear" as easingOptions,
+    angle: -10,
+    angleEase: "linear" as easingOptions,
+    saturation: 15,
+    saturationEase: "linear" as easingOptions,
+  },
+  light: {
+    count: 5,
+    brightness: 80,
+    brightnessEase: "linear" as easingOptions,
+    angle: 25,
+    angleEase: "linear" as easingOptions,
+    saturation: 0,
+    saturationEase: "linear" as easingOptions,
+  },
+};
+
+export const defaults= {
+  library: [],
+  providerLoaded: false,
+  configLoaded: false,
+  libraryLoaded: false,
+  advColorInfo: false,
+  config: defaultConfig,
+};
+
+export const nullProvider = () => {
+  console.error("Context Provider for the Session is not loaded")
+};
+
+export default defaults;
diff --git a/src/data/limits.tsx b/src/data/limits.tsx
new file mode 100644
index 0000000..f481aa5
--- /dev/null
+++ b/src/data/limits.tsx
@@ -0,0 +1,20 @@
+export const limits = {
+  count: {
+    min: 0,
+    max: 50,
+  },
+  brightness: {
+    min: 0,
+    max: 100,
+  },
+  angle: {
+    min: -360,
+    max: 360,
+  },
+  saturation: {
+    min: -100,
+    max: 200,
+  },
+};
+
+export default limits;
diff --git a/src/data/session.tsx b/src/data/session.tsx
index cb1f5b5..d62a98c 100644
--- a/src/data/session.tsx
+++ b/src/data/session.tsx
@@ -1,188 +1,49 @@
-import { createContext, useContext, useState, useEffect } from "react";
-import type { easingOptionsType } from "../functions/ease";
+import { createContext, useContext, useState, useEffect, useCallback } from "react";
+import { easingOptions } from "../types/easing";
+import type { config } from "../types/configObj";
+import type { context } from "../types/context";
+
+import { defaults, nullProvider } from "./defaults";
+import { limits } from "./limits";
 
 interface Props {
   children: React.ReactNode;
 }
 
-const defaults = {
-  loaded: false,
-  advColorInfo: false,
-  keyColor: "0ea5e9",
-  darkCount: 4,
-  lightCount: 5,
-  darkness: 50,
-  darknessEasing: "linear" as easingOptionsType,
-  lightness: 80,
-  lightnessEasing: "linear" as easingOptionsType,
-  darkRotation: -10,
-  darkRotationEasing: "linear" as easingOptionsType,
-  lightRotation: 25,
-  lightRotationEasing: "linear" as easingOptionsType,
-  darkSaturation: 15,
-  darkSaturationEasing: "linear" as easingOptionsType,
-  lightSaturation: 0,
-  lightSaturationEasing: "linear" as easingOptionsType,
-
-  nullProvider: () =>
-    console.error("Context Provider for the Session is not loaded"),
-};
-
-type contextType = {
-  loaded: boolean;
-  advColorInfo: boolean;
-  keyColor: string;
-  darkCount: number;
-  lightCount: number;
-  darkness: number;
-  darknessEasing: easingOptionsType;
-  lightness: number;
-  lightnessEasing: easingOptionsType;
-  darkRotation: number;
-  darkRotationEasing: easingOptionsType;
-  lightRotation: number;
-  lightRotationEasing: easingOptionsType;
-  darkSaturation: number;
-  darkSaturationEasing: easingOptionsType;
-  lightSaturation: number;
-  lightSaturationEasing: easingOptionsType;
-
-  load: (value: boolean) => void;
-  loadConfiguration: (configString: string) => void;
-  updateAdvColorInfo: (value: boolean) => void;
-  updateKeyColor: (hex: string) => void;
-  updateCount: (type: "light" | "dark", count: number) => void;
-  updateBrightness: (type: "light" | "dark", value: number) => void;
-  updateRotation: (type: "light" | "dark", value: number) => void;
-  updateSaturation: (type: "light" | "dark", value: number) => void;
-  updateEasing: (type: "light" | "dark", property: "brightness" | "saturation" | "hue", easing: easingOptionsType) => void;
-};
-
-const Context = createContext<contextType>({
-  loaded: defaults.loaded,
-  advColorInfo: defaults.advColorInfo,
-  keyColor: defaults.keyColor,
-  darkCount: defaults.darkCount,
-  lightCount: defaults.lightCount,
-  darkness: defaults.darkness,
-  darknessEasing: defaults.darknessEasing,
-  lightness: defaults.lightness,
-  lightnessEasing: defaults.lightnessEasing,
-  darkRotation: defaults.darkRotation,
-  darkRotationEasing: defaults.darkRotationEasing,
-  lightRotation: defaults.lightRotation,
-  lightRotationEasing: defaults.lightRotationEasing,
-  darkSaturation: defaults.darkSaturation,
-  darkSaturationEasing: defaults.darkSaturationEasing,
-  lightSaturation: defaults.lightSaturation,
-  lightSaturationEasing: defaults.lightSaturationEasing,
-
-  load: defaults.nullProvider,
-  loadConfiguration: defaults.nullProvider,
-  updateAdvColorInfo: defaults.nullProvider,
-  updateKeyColor: defaults.nullProvider,
-  updateCount: defaults.nullProvider,
-  updateBrightness: defaults.nullProvider,
-  updateRotation: defaults.nullProvider,
-  updateSaturation: defaults.nullProvider,
-  updateEasing: defaults.nullProvider,
+const Context = createContext<context>({
+  ...defaults,
+  loadConfig: nullProvider,
+  updateAdvColorInfo: nullProvider,
+  updateKeyColor: nullProvider,
+  updateConfig: nullProvider,
+  updateConfigEasing: nullProvider,
+  saveToLibrary: nullProvider,
+  deleteFromLibrary: nullProvider,
+  loadLibrary: nullProvider,
 });
 
 const Provider: React.FC<Props> = ({ children }) => {
-  const [loaded, setLoaded] = useState<boolean>(defaults.loaded);
-  const [advColorInfo, setAdvColorInfo] = useState<boolean>(defaults.advColorInfo);
-  const [keyColor, setKeyColor] = useState<string>(defaults.keyColor);
-  const [darkCount, setDarkCount] = useState<number>(defaults.darkCount);
-  const [lightCount, setLightCount] = useState<number>(defaults.lightCount);
-  const [darkness, setDarkness] = useState<number>(defaults.darkness);
-  const [darknessEasing, setDarknessEasing] = useState<easingOptionsType>(defaults.darknessEasing);
-  const [lightness, setLightness] = useState<number>(defaults.lightness);
-  const [lightnessEasing, setLightnessEasing] = useState<easingOptionsType>(defaults.lightnessEasing);
-  const [darkRotation, setDarkRotation] = useState<number>(defaults.darkRotation);
-  const [darkRotationEasing, setDarkRotationEasing] = useState<easingOptionsType>(defaults.darkRotationEasing);
-  const [lightRotation, setLightRotation] = useState<number>(defaults.lightRotation);
-  const [lightRotationEasing, setLightRotationEasing] = useState<easingOptionsType>(defaults.lightRotationEasing);
-  const [darkSaturation, setDarkSaturation] = useState<number>(defaults.darkSaturation);
-  const [darkSaturationEasing, setDarkSaturationEasing] = useState<easingOptionsType>(defaults.darkSaturationEasing);
-  const [lightSaturation, setLightSaturation] = useState<number>(defaults.lightSaturation);
-  const [lightSaturationEasing, setLightSaturationEasing] = useState<easingOptionsType>(defaults.lightSaturationEasing);
-
-  useEffect(() => {
-    const CONFIG = localStorage.getItem("colorToolConfig");
-    if (!loaded && CONFIG) {
-      loadConfiguration(CONFIG);
-    }
-    setLoaded(true);
-  }, [loaded]);
+  /* =================================================================
+  /* SECTION Stores
+  ================================================================= */
 
-  function loadConfiguration(configString: string) {
-    const CONFIG = JSON.parse(configString || "{}");
-    updateKeyColor(CONFIG.keyColor !== undefined ? CONFIG.keyColor : defaults.keyColor);
-    updateCount("dark", CONFIG.darkCount !== undefined ? CONFIG.darkCount : defaults.darkCount);
-    updateCount("light", CONFIG.lightCount !== undefined ? CONFIG.lightCount : defaults.lightCount);
-    updateBrightness("dark", CONFIG.darkness !== undefined ? CONFIG.darkness : defaults.darkness);
-    updateEasing(
-      "dark",
-      "brightness",
-      CONFIG.darknessEasing !== undefined
-        ? CONFIG.darknessEasing
-        : defaults.darknessEasing
-    );
-    updateBrightness("light", CONFIG.lightness !== undefined ? CONFIG.lightness : defaults.lightness);
-    updateEasing("light", "brightness", CONFIG.lightnessEasing !== undefined ? CONFIG.lightnessEasing : defaults.lightnessEasing);
-    updateRotation("dark", CONFIG.darkRotation !== undefined ? CONFIG.darkRotation : defaults.darkRotation);
-    updateEasing("dark", "hue", CONFIG.darkRotationEasing !== undefined ? CONFIG.darkRotationEasing : defaults.darkRotationEasing);
-    updateRotation("light", CONFIG.lightRotation !== undefined ? CONFIG.lightRotation : defaults.lightRotation);
-    updateEasing("light", "hue", CONFIG.lightRotationEasing !== undefined ? CONFIG.lightRotationEasing : defaults.lightRotationEasing);
-    updateSaturation("dark", CONFIG.darkSaturation !== undefined ? CONFIG.darkSaturation : defaults.darkSaturation);
-    updateEasing("dark", "saturation", CONFIG.darkSaturationEasing !== undefined ? CONFIG.darkSaturationEasing : defaults.darkSaturationEasing);
-    updateSaturation("light", CONFIG.lightSaturation !== undefined ? CONFIG.lightSaturation : defaults.lightSaturation);
-    updateEasing(
-      "light",
-      "saturation",
-      CONFIG.lightSaturationEasing !== undefined
-        ? CONFIG.lightSaturationEasing
-        : defaults.lightSaturationEasing
-    );
-  }
-
-  useEffect(() => {
-    function saveToLocalStorage() {
-      const data = {
-        keyColor: keyColor,
-        darkCount: darkCount,
-        lightCount: lightCount,
-        darkness: darkness,
-        darknessEasing: darknessEasing,
-        lightness: lightness,
-        lightnessEasing: lightnessEasing,
-        darkRotation: darkRotation,
-        darkRotationEasing: darkRotationEasing,
-        lightRotation: lightRotation,
-        lightRotationEasing: lightRotationEasing,
-        darkSaturation: darkSaturation,
-        darkSaturationEasing: darkSaturationEasing,
-        lightSaturation: lightSaturation,
-        lightSaturationEasing: lightSaturationEasing,
-      };
-      if (loaded) {
-        localStorage.setItem(
-          "colorToolConfig",
-          JSON.stringify(data, undefined, 4)
-        );
-      }
-    }
-    saveToLocalStorage();
-  }, [loaded, keyColor, darkCount, lightCount, darkness, darknessEasing, lightness, lightnessEasing, darkRotation, darkRotationEasing, lightRotation, lightRotationEasing, darkSaturation, darkSaturationEasing, lightSaturation, lightSaturationEasing]);
+  const providerLoaded = true;
+  const [configLoaded, setConfigLoaded] = useState<boolean>(defaults.configLoaded);
+  const [config, setConfig] = useState<config>({ ...defaults.config });
+  const [advColorInfo, setAdvColorInfo] = useState<boolean>(defaults.advColorInfo);
+  const [library, setLibrary] = useState<config[]>([]);
+  const [libraryLoaded, setLibraryLoaded] = useState<boolean>(false);
 
-  function load(value: boolean) {
-    setLoaded(value);
-  }
+  /* !SECTION Stores */
 
   function updateAdvColorInfo(value: boolean) {
     setAdvColorInfo(value);
   }
 
+  /* =================================================================
+  /* SECTION Update configuration functions
+  ================================================================= */
+
   function updateKeyColor(hex: string) {
     let value = hex.toUpperCase();
     if (value[0] === "#") {
@@ -191,104 +52,309 @@ const Provider: React.FC<Props> = ({ children }) => {
     if (value.length > 8) {
       value = value.substring(0, 8);
     }
-    setKeyColor(value);
+    setConfig({ ...config, keyColor: value });
   };
 
-  function updateCount(type: 'light' | 'dark', count: number) {
-    if (count < 0) { count = 0; }
-    if (count > 50) { count = 50; }
-    if (type === 'light') {
-      setLightCount(count);
-    } else if (type === 'dark') {
-      setDarkCount(count);
+  function updateConfig(
+    key: "light" | "dark",
+    property: "brightness" | "saturation" | "angle" | "count",
+    value: number
+  ) {
+    const newConfig = { ...config };
+    let sanitizedValue = value;
+    if (sanitizedValue < limits[property].min) {
+      sanitizedValue = limits[property].min;
+    }
+    if (sanitizedValue > limits[property].max) {
+      sanitizedValue = limits[property].max;
     }
+    newConfig[key][property] = sanitizedValue;
+    setConfig(newConfig);
   };
 
-  function updateBrightness(type: 'light' | 'dark', value: number) {
-    if (value < 0) { value = 0; }
-    if (value > 100) { value = 100; }
-    if (type === 'light') {
-      setLightness(value);
-    } else if (type === 'dark') {
-      setDarkness(value);
+  function updateConfigEasing(
+    key: "light" | "dark",
+    property: "brightness" | "saturation" | "angle",
+    easing: easingOptions
+  ) {
+    const newConfig = { ...config };
+    let sanitizedValue = easing;
+    if (!easingOptions.includes(easing)) {
+      sanitizedValue = "linear";
     }
-  }
+    newConfig[key][`${property}Ease`] = sanitizedValue;
+    setConfig(newConfig);
+  };
 
-  function updateRotation(type: 'light' | 'dark', value: number) {
-    if (value < -360) { value = -360; }
-    if (value > 360) { value = 360; }
-    if (type === 'light') {
-      setLightRotation(value);
-    } else if (type === 'dark') {
-      setDarkRotation(value);
-    }
-  }
+  /* !SECTION Update configuration functions */
+  /* =================================================================
+  /* SECTION Load configuration functions
+  ================================================================= */
 
-  function updateSaturation(type: 'light' | 'dark', value: number) {
-    if (value < -100) { value = -100; }
-    if (value > 200) { value = 200; }
-    if (type === 'light') {
-      setLightSaturation(value);
-    } else if (type === 'dark') {
-      setDarkSaturation(value);
+  function loadLegacyConfig(configString: string) {
+    const CONFIG = JSON.parse(configString || "{}");
+    const newConfig = {
+      keyColor: defaults.config.keyColor,
+      dark: {
+        count: defaults.config.dark.count,
+        brightness: defaults.config.dark.brightness,
+        brightnessEase: defaults.config.dark.brightnessEase,
+        angle: defaults.config.dark.angle,
+        angleEase: defaults.config.dark.angleEase,
+        saturation: defaults.config.dark.saturation,
+        saturationEase: defaults.config.dark.saturationEase,
+      },
+      light: {
+        count: defaults.config.light.count,
+        brightness: defaults.config.light.brightness,
+        brightnessEase: defaults.config.light.brightnessEase,
+        angle: defaults.config.light.angle,
+        angleEase: defaults.config.light.angleEase,
+        saturation: defaults.config.light.saturation,
+        saturationEase: defaults.config.light.saturationEase,
+      },
+    };
+    if (CONFIG.keyColor !== undefined) {
+      newConfig.keyColor = CONFIG.keyColor;
     }
-  }
+    if (CONFIG.darkCount !== undefined) {
+      newConfig.dark.count = CONFIG.darkCount;
+    }
+    if (CONFIG.lightCount !== undefined) {
+      newConfig.light.count = CONFIG.lightCount;
+    }
+    if (CONFIG.darkness !== undefined) {
+      newConfig.dark.brightness = CONFIG.darkness;
+    }
+    if (CONFIG.darknessEasing !== undefined) {
+      newConfig.dark.brightnessEase = CONFIG.darknessEasing;
+    }
+    if (CONFIG.lightness !== undefined) {
+      newConfig.light.brightness = CONFIG.lightness;
+    }
+    if (CONFIG.lightnessEasing !== undefined) {
+      newConfig.light.brightnessEase = CONFIG.lightnessEasing;
+    }
+    if (CONFIG.darkRotation !== undefined) {
+      newConfig.dark.angle = CONFIG.darkRotation;
+    }
+    if (CONFIG.darkRotationEasing !== undefined) {
+      newConfig.dark.angleEase = CONFIG.darkRotationEasing;
+    }
+    if (CONFIG.lightRotation !== undefined) {
+      newConfig.light.angle = CONFIG.lightRotation;
+    }
+    if (CONFIG.lightRotationEasing !== undefined) {
+      newConfig.light.angleEase = CONFIG.lightRotationEasing;
+    }
+    if (CONFIG.darkSaturation !== undefined) {
+      newConfig.dark.saturation = CONFIG.darkSaturation;
+    }
+    if (CONFIG.darkSaturationEasing !== undefined) {
+      newConfig.dark.saturationEase = CONFIG.darkSaturationEasing;
+    }
+    if (CONFIG.lightSaturation !== undefined) {
+      newConfig.light.saturation = CONFIG.lightSaturation;
+    }
+    if (CONFIG.lightSaturationEasing !== undefined) {
+      newConfig.light.saturationEase = CONFIG.lightSaturationEasing;
+    }
+    setConfig(newConfig);
+  };
 
-  function updateEasing(type: 'light' | 'dark', property: 'brightness' | 'saturation' | 'hue', easing: easingOptionsType) {
-    if (type === 'light') {
-      switch (property) {
-        case 'brightness':
-          setLightnessEasing(easing);
-          break;
-        case 'saturation':
-          setLightSaturationEasing(easing);
-          break;
-        case 'hue':
-          setLightRotationEasing(easing);
-          break;
+  const loadConfig = useCallback((configString: string) => {
+    const CONFIG = JSON.parse(configString || "{}");
+    const newConfig = {
+      keyColor: defaults.config.keyColor,
+      dark: {
+        count: defaults.config.dark.count,
+        brightness: defaults.config.dark.brightness,
+        brightnessEase: defaults.config.dark.brightnessEase,
+        angle: defaults.config.dark.angle,
+        angleEase: defaults.config.dark.angleEase,
+        saturation: defaults.config.dark.saturation,
+        saturationEase: defaults.config.dark.saturationEase,
+      },
+      light: {
+        count: defaults.config.light.count,
+        brightness: defaults.config.light.brightness,
+        brightnessEase: defaults.config.light.brightnessEase,
+        angle: defaults.config.light.angle,
+        angleEase: defaults.config.light.angleEase,
+        saturation: defaults.config.light.saturation,
+        saturationEase: defaults.config.light.saturationEase,
+      }
+    };
+    if (
+      CONFIG.darkCount ||
+      CONFIG.lightCount ||
+      CONFIG.darkness ||
+      CONFIG.darknessEasing ||
+      CONFIG.lightness ||
+      CONFIG.lightnessEasing ||
+      CONFIG.darkRotation ||
+      CONFIG.darkRotationEasing ||
+      CONFIG.lightRotation ||
+      CONFIG.lightRotationEasing ||
+      CONFIG.darkSaturation ||
+      CONFIG.darkSaturationEasing ||
+      CONFIG.lightSaturation ||
+      CONFIG.lightSaturationEasing)
+    {
+      loadLegacyConfig(configString);
+    } else {
+      if (CONFIG.keyColor !== undefined) {
+        newConfig.keyColor = CONFIG.keyColor;
+      }
+      if (CONFIG.dark !== undefined) {
+        if (CONFIG.dark.count !== undefined) {
+          newConfig.dark.count = CONFIG.dark.count;
+        }
+        if (CONFIG.dark.brightness !== undefined) {
+          newConfig.dark.brightness = CONFIG.dark.brightness;
+        }
+        if (CONFIG.dark.brightnessEase !== undefined) {
+          newConfig.dark.brightnessEase = CONFIG.dark.brightnessEase;
+        }
+        if (CONFIG.dark.angle !== undefined) {
+          newConfig.dark.angle = CONFIG.dark.angle;
+        }
+        if (CONFIG.dark.angleEase !== undefined) {
+          newConfig.dark.angleEase = CONFIG.dark.angleEase;
+        }
+        if (CONFIG.dark.saturation !== undefined) {
+          newConfig.dark.saturation = CONFIG.dark.saturation;
+        }
+        if (CONFIG.dark.saturationEase !== undefined) {
+          newConfig.dark.saturationEase = CONFIG.dark.saturationEase;
+        }
       }
-    } else if (type === 'dark') {
-      switch (property) {
-        case 'brightness':
-          setDarknessEasing(easing);
-          break;
-        case 'saturation':
-          setDarkSaturationEasing(easing);
-          break;
-        case 'hue':
-          setDarkRotationEasing(easing);
-          break;
+      if (CONFIG.light !== undefined) {
+        if (CONFIG.light.count !== undefined) {
+          newConfig.light.count = CONFIG.light.count;
+        }
+        if (CONFIG.light.brightness !== undefined) {
+          newConfig.light.brightness = CONFIG.light.brightness;
+        }
+        if (CONFIG.light.brightnessEase !== undefined) {
+          newConfig.light.brightnessEase = CONFIG.light.brightnessEase;
+        }
+        if (CONFIG.light.angle !== undefined) {
+          newConfig.light.angle = CONFIG.light.angle;
+        }
+        if (CONFIG.light.angleEase !== undefined) {
+          newConfig.light.angleEase = CONFIG.light.angleEase;
+        }
+        if (CONFIG.light.saturation !== undefined) {
+          newConfig.light.saturation = CONFIG.light.saturation;
+        }
+        if (CONFIG.light.saturationEase !== undefined) {
+          newConfig.light.saturationEase = CONFIG.light.saturationEase;
+        }
       }
+      setConfig(newConfig);
     }
+    setConfigLoaded(true);
+  }, []);
+
+  /* !SECTION Load configuration functions */
+  /* =================================================================
+  /* SECTION Load Config on page load
+  ================================================================= */
+
+  useEffect(() => {
+    const CONFIG = localStorage.getItem("colorToolConfig");
+    if (!configLoaded && CONFIG) {
+      loadConfig(CONFIG);
+    }
+  }, [configLoaded, loadConfig]);
+
+  /* !SECTION Load Config on page load */
+  /* =================================================================
+  /* SECTION Save config to local storage
+  ================================================================= */
+
+  const saveConfigToLocalStorage = useCallback((config: config) => {
+    if (configLoaded) {
+      localStorage.setItem("colorToolConfig", JSON.stringify(config, undefined, 4));
+    }
+  }, [configLoaded]);
+
+  useEffect(() => {
+    saveConfigToLocalStorage(config);
+  }, [config, saveConfigToLocalStorage]);
+
+  /* !SECTION Save config to local storage */
+  /* =================================================================
+  /* SECTION Library functions
+  ================================================================= */
+
+  function saveToLibrary(config: config) {
+    const newLibrary = [...library];
+    newLibrary.push(config);
+    setLibrary(newLibrary);
+  }
+
+  function deleteFromLibrary(config: config) {
+    const newLibrary = [...library];
+    const index = newLibrary.indexOf(config);
+    newLibrary.splice(index, 1);
+    setLibrary(newLibrary);
   }
 
+  /* !SECTION Library functions */
+  /* =================================================================
+  /* SECTION Save Library to local storage
+  ================================================================= */
+
+  const saveLibraryToLocalStorage = useCallback((library: config[]) => {
+    if (libraryLoaded) {
+      localStorage.setItem("colorToolLibrary", JSON.stringify(library, undefined, 4));
+    }
+  }, [libraryLoaded]);
+
+  useEffect(() => {
+    saveLibraryToLocalStorage(library);
+  }, [library, saveLibraryToLocalStorage]);
+
+  /* !SECTION Save Library to local storage */
+  /* =================================================================
+  /* SECTION Load library from local storage
+  ================================================================= */
+
+  const loadLibrary = useCallback((libraryString: string) => {
+    const localStore = JSON.parse(libraryString || "[]");
+    const library: config[] = [];
+    for (const key in localStore) {
+      library.push(localStore[key]);
+    }
+    setLibrary(library);
+    setLibraryLoaded(true);
+  }, []);
+
+  useEffect(() => {
+    if (!libraryLoaded) {
+      loadLibrary(localStorage.getItem("colorToolLibrary") || "[]");
+    }
+  }, [libraryLoaded, loadLibrary]);
+
+  /* !SECTION Load library from local storage */
+
   const exposed = {
-    loaded,
+    providerLoaded,
+    configLoaded,
+    libraryLoaded,
     advColorInfo,
-    keyColor,
-    darkCount,
-    lightCount,
-    darkness,
-    darknessEasing,
-    lightness,
-    lightnessEasing,
-    darkRotation,
-    darkRotationEasing,
-    lightRotation,
-    lightRotationEasing,
-    darkSaturation,
-    darkSaturationEasing,
-    lightSaturation,
-    lightSaturationEasing,
-    load,
-    loadConfiguration,
+    config,
+    library,
     updateAdvColorInfo,
     updateKeyColor,
-    updateCount,
-    updateBrightness,
-    updateRotation,
-    updateSaturation,
-    updateEasing,
+    updateConfig,
+    updateConfigEasing,
+    loadConfig,
+    loadLibrary,
+    saveToLibrary,
+    deleteFromLibrary,
   };
 
   return <Context.Provider value={exposed}>{children}</Context.Provider>;
diff --git a/src/functions/ease.ts b/src/functions/ease.ts
index c526099..738d916 100644
--- a/src/functions/ease.ts
+++ b/src/functions/ease.ts
@@ -22,35 +22,10 @@ import {
   easeInOutCirc,
 } from "js-easing-functions";
 
-export const easingOptions = [
-  'linear',
-  'easeInQuad',
-  'easeOutQuad',
-  'easeInOutQuad',
-  'easeInCubic',
-  'easeOutCubic',
-  'easeInOutCubic',
-  'easeInQuart',
-  'easeOutQuart',
-  'easeInOutQuart',
-  'easeInQuint',
-  'easeOutQuint',
-  'easeInOutQuint',
-  'easeInSine',
-  'easeOutSine',
-  'easeInOutSine',
-  'easeInExpo',
-  'easeOutExpo',
-  'easeInOutExpo',
-  'easeInCirc',
-  'easeOutCirc',
-  'easeInOutCirc',
-] as const;
-
-export type easingOptionsType = typeof easingOptions[number];
+import type { easingOptions } from "../types/easing";
 
 export function ease(
-  method: easingOptionsType,
+  method: easingOptions,
   step: number,
   end: number,
   steps: number
diff --git a/src/functions/getColors.ts b/src/functions/getColors.ts
index 3dd3d47..751b841 100644
--- a/src/functions/getColors.ts
+++ b/src/functions/getColors.ts
@@ -1,5 +1,5 @@
 import Color from "color";
-import type { easingOptionsType } from "./ease";
+import type { easingOptions } from "../types/easing";
 import { ease } from "./ease";
 import * as hex from "./hex";
 
@@ -11,15 +11,15 @@ export const getColorsList = (
   // Hue rotation -360 to 360
   hueRotation: number,
   // Hue easing
-  hueEasing: easingOptionsType,
+  hueEasing: easingOptions,
   // Saturation 0 to 100
   saturation: number,
   // Saturation easing
-  satEasing: easingOptionsType,
+  satEasing: easingOptions,
   // Darkness / Lightness 0 to 100
   mixAmount: number,
   // Brightness easing
-  brightEasing: easingOptionsType,
+  brightEasing: easingOptions,
   // Root color
   mainColor: string,
   // Error color
@@ -54,3 +54,5 @@ export const getColorsList = (
 
   return colorsList;
 };
+
+export default getColorsList;
diff --git a/src/types/configObj.ts b/src/types/configObj.ts
new file mode 100644
index 0000000..b4af5f3
--- /dev/null
+++ b/src/types/configObj.ts
@@ -0,0 +1,25 @@
+import { easingOptions } from './easing';
+
+export type config = {
+  keyColor: string,
+  dark: {
+    count: number,
+    brightness: number,
+    brightnessEase: easingOptions,
+    angle: number,
+    angleEase: easingOptions,
+    saturation: number,
+    saturationEase: easingOptions,
+  },
+  light: {
+    count: number,
+    brightness: number,
+    brightnessEase: easingOptions,
+    angle: number,
+    angleEase: easingOptions,
+    saturation: number,
+    saturationEase: easingOptions,
+  },
+};
+
+export default config;
diff --git a/src/types/context.ts b/src/types/context.ts
new file mode 100644
index 0000000..41f035e
--- /dev/null
+++ b/src/types/context.ts
@@ -0,0 +1,31 @@
+import { easingOptions } from "./easing";
+import type { config } from "./configObj";
+
+export type context = {
+  providerLoaded: boolean;
+  libraryLoaded: boolean;
+  loadLibrary: (libraryString: string) => void;
+
+  configLoaded: boolean;
+  loadConfig: (configString: string) => void;
+
+  advColorInfo: boolean;
+  updateAdvColorInfo: (value: boolean) => void;
+
+  config: config;
+  updateKeyColor: (hex: string) => void;
+  updateConfig: (
+    key: 'light' | 'dark',
+    property: 'brightness' | 'saturation' | 'angle' | 'count',
+    value: number
+  ) => void;
+  updateConfigEasing: (
+    key: 'light' | 'dark',
+    property: 'brightness' | 'saturation' | 'angle',
+    easing: easingOptions
+  ) => void;
+
+  library: config[];
+  saveToLibrary: (config: config) => void;
+  deleteFromLibrary: (config: config) => void;
+};
diff --git a/src/types/easing.ts b/src/types/easing.ts
new file mode 100644
index 0000000..f97b4ed
--- /dev/null
+++ b/src/types/easing.ts
@@ -0,0 +1,28 @@
+export const easingOptions = [
+  'linear',
+  'easeInQuad',
+  'easeOutQuad',
+  'easeInOutQuad',
+  'easeInCubic',
+  'easeOutCubic',
+  'easeInOutCubic',
+  'easeInQuart',
+  'easeOutQuart',
+  'easeInOutQuart',
+  'easeInQuint',
+  'easeOutQuint',
+  'easeInOutQuint',
+  'easeInSine',
+  'easeOutSine',
+  'easeInOutSine',
+  'easeInExpo',
+  'easeOutExpo',
+  'easeInOutExpo',
+  'easeInCirc',
+  'easeOutCirc',
+  'easeInOutCirc',
+] as const;
+
+export type easingOptions = typeof easingOptions[number];
+
+export default easingOptions;