From b05909fdbc71b96235d145476d4dec44e61bc531 Mon Sep 17 00:00:00 2001
From: Andrew McNutt <mcnutt.andrew@gmail.com>
Date: Sat, 13 Jan 2024 11:44:45 -0800
Subject: [PATCH] Ugh (#6)

* Rework color storage

* clean up

* .

* aesthetic adjustments

* refactor color info

* abstract out the xyguides

* extract zoom

* rework visual apperance

* fix types
---
 README.md                                     |  14 +-
 src/App.svelte                                |   2 -
 src/components/ColorScatterPlot.svelte        | 247 ++++++------------
 .../ColorScatterPlotXYGuides.svelte           | 109 ++++++++
 src/components/ColorScatterPlotZGuide.svelte  |  46 ++++
 src/components/KeyboardHooks.svelte           |   5 +-
 src/content-modules/Examples.svelte           |  14 +-
 src/content-modules/LeftPanel.svelte          |   2 +
 src/content-modules/SetColorSpace.svelte      |  14 +-
 src/content-modules/Swatches.svelte           |  31 ++-
 .../context-free-tools/AddFamiliarPal.svelte  |   3 -
 .../context-free-tools/Zoom.svelte            |  52 ++++
 src/lib/Color.ts                              | 178 +++++++------
 src/lib/lints/sequential-order.ts             |   3 +-
 src/stores/example-store.ts                   |  40 +--
 src/stores/nav-store.ts                       |   8 +
 16 files changed, 461 insertions(+), 307 deletions(-)
 create mode 100644 src/components/ColorScatterPlotXYGuides.svelte
 create mode 100644 src/components/ColorScatterPlotZGuide.svelte
 create mode 100644 src/content-modules/context-free-tools/Zoom.svelte

diff --git a/README.md b/README.md
index 19e5c2a8..01d4b79f 100644
--- a/README.md
+++ b/README.md
@@ -19,8 +19,8 @@ The basic UX for editing has the following components
 The 2D graph displays hue/chroma graph and the 1D graph displays lightness. You can map any of a number of colorspaces onto this pair of graphs. (in the code, the lightness graph is "Z"). I propose the following changes
 
 - [x] Reduce the visual impact of the axes and labels by making them transparent gray. Set the colors, made them adaptive, set the luminance flip to .3 (50% visually)
-- [ ] Flip the Y axis (zero at the bottom)
-- [ ] Make the labels integers for CIELAB
+- [x] Flip the Y axis (zero at the bottom)
+- [x] Make the labels integers for CIELAB
 - [x] Make the axis scale sliders less visualy prominent.
 - [ ] Consider removing the axis sliders, replace them with zoom controls in the same panel as the background color selection. Changing these values is rare, they don't need to take up so much UX space.
 - [ ] The 2D graph should always be a centered hue/chroma graph. CIELAB and CIELCH would therefore use the same graph. Leave the LAB vs LCH distinction for slider based editing.
@@ -57,18 +57,16 @@ To raise the sliders, you need to click on one of the examples that are displaye
 - [ ] Vega/Vega-Lite Specification
 - [ ] Bug: changing the color frame fucks everything up???? (particularly for HSV/HSL)
 - [ ] Eval response options
-- [ ] Coat of paint
-- [ ] add color analysis
 - [ ] higher card. vis examples
-- [ ] order as diverging
 - [ ] Distribute radially
-- [ ] Rearrange some of the colors in the color area eg make rg on xy and b on z etc
-- [ ] "opposing color" to "Convert selection to opposing"
+- [?] Rearrange some of the colors in the color area eg make rg on xy and b on z etc
 - [ ] Insert color theory options, eg insert opposing, inserting analogous color, etc, mine from the adobe picker
 - [ ] NTH: Rest of basic geometry manipulations: flip (horizontal, vertical), scale
-- [ ] Meta: figure out all the other features in maureen's setup
 - [ ] Examples held as assets somewhere that are downloaded rather than components (for consistency)
 - [ ] Labels, tooltips, etc
+- [x] "opposing color" to "Convert selection to opposing"
+- [x] Meta: figure out all the other features in maureen's setup
+- [x] order as diverging
 - [x] Make it possible to ignore / dismiss lints
 - [x] Touch events polish
 - [x] drag box in z channel should work
diff --git a/src/App.svelte b/src/App.svelte
index 89353f92..7c2d7f83 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -5,7 +5,6 @@
   import LeftPanel from "./content-modules/LeftPanel.svelte";
   import ActionArea from "./content-modules/ActionArea.svelte";
   import Examples from "./content-modules/Examples.svelte";
-  import Swatches from "./content-modules/Swatches.svelte";
   import Eval from "./content-modules/Eval.svelte";
   import KeyboardHooks from "./components/KeyboardHooks.svelte";
   import ComparePal from "./content-modules/ComparePal.svelte";
@@ -32,7 +31,6 @@
           startDragging={() => colorStore.pausePersistance()}
           stopDragging={() => colorStore.resumePersistance()}
         />
-        <Swatches />
       </div>
       <div class="grow">
         <nav
diff --git a/src/components/ColorScatterPlot.svelte b/src/components/ColorScatterPlot.svelte
index 4dfd3a8e..b0b84b63 100644
--- a/src/components/ColorScatterPlot.svelte
+++ b/src/components/ColorScatterPlot.svelte
@@ -9,9 +9,9 @@
   import { makeExtents, deDup, toggleElement } from "../lib/utils";
   import navStore from "../stores/nav-store";
   import { scaleLinear } from "d3-scale";
-  import DoubleRangeSlider from "../components/DoubleRangeSlider.svelte";
-  import VerticalDoubleRangeSlider from "../components/VerticalDoubleRangeSlider.svelte";
   import simulate_cvd from "../lib/blindness";
+  import ColorScatterPlotXyGuides from "./ColorScatterPlotXYGuides.svelte";
+  import ColorScatterPlotZGuide from "./ColorScatterPlotZGuide.svelte";
 
   export let scatterPlotMode: "moving" | "looking";
 
@@ -37,7 +37,11 @@
   const margin = { top: 15, right: 15, bottom: 15, left: 15 };
   const plotWidth = width - margin.left - margin.right;
   const plotHeight = height - margin.top - margin.bottom;
-  let extents = { x: [0, 1], y: [0, 1], z: [0, 1] };
+  $: extents = {
+    x: $navStore.xZoom,
+    y: $navStore.yZoom,
+    z: $navStore.zZoom,
+  };
   $: pickedColors = focusedColors.map((x) => colors[x].toChannels());
   $: selectionExtents = makeExtents(pickedColors);
   $: xPos = xScale(selectionExtents.x[0] - 7.5);
@@ -57,23 +61,34 @@
   $: xRange = config.xDomain;
   $: domainXScale = scaleLinear().domain([0, 1]).range(xRange);
   $: xScale = scaleLinear()
-    .domain([domainXScale(extents.x[0]), domainXScale(extents.x[1])])
+    .domain([
+      xRange[0] > xRange[1]
+        ? domainXScale(extents.x[1])
+        : domainXScale(extents.x[0]),
+      xRange[0] > xRange[1]
+        ? domainXScale(extents.x[0])
+        : domainXScale(extents.x[1]),
+    ])
     .range([0, plotWidth]);
-  $: xNonDimScale = scaleLinear().domain([0, 1]).range(xScale.domain());
 
   $: yRange = config.yDomain;
   $: domainYScale = scaleLinear().domain([0, 1]).range(yRange);
   $: yScale = scaleLinear()
-    .domain([domainYScale(extents.y[0]), domainYScale(extents.y[1])])
+    .domain([
+      yRange[0] > yRange[1]
+        ? domainYScale(extents.y[1])
+        : domainYScale(extents.y[0]),
+      yRange[0] > yRange[1]
+        ? domainYScale(extents.y[0])
+        : domainYScale(extents.y[1]),
+    ])
     .range([0, plotHeight]);
-  $: yNonDimScale = scaleLinear().domain([0, 1]).range(yScale.domain());
 
   $: zRange = config.zDomain;
   $: domainLScale = scaleLinear().domain([0, 1]).range(zRange);
   $: zScale = scaleLinear()
     .domain([domainLScale(extents.z[0]), domainLScale(extents.z[1])])
     .range([0, plotHeight]);
-  $: [zMin, zMax] = zScale.domain();
 
   let dragging: false | { x: number; y: number } = false;
   let dragBox: false | { x: number; y: number } = false;
@@ -224,131 +239,46 @@
     onFocusedColorsChange([...newFocusedColors]);
   }
 
-  $: points = {
-    centerTop: {
-      x: (xScale.range()[1] - xScale.range()[0]) / 2,
-      y: yScale.range()[0],
-      labelAdjust: { x: -5, y: 15 },
-      anchor: "end",
-      label: `${config.yChannel}: ${yScale.domain()[0].toFixed(1)}`,
-    },
-    centerBottom: {
-      x: (xScale.range()[1] - xScale.range()[0]) / 2,
-      y: yScale.range()[1],
-      anchor: "start",
-      labelAdjust: { x: 0, y: -3 },
-      label: yScale.domain()[1].toFixed(1),
-    },
-    centerLeft: {
-      x: xScale.range()[0],
-      y: (yScale.range()[1] - yScale.range()[0]) / 2,
-      anchor: "start",
-      labelAdjust: { x: 5, y: 15 },
-      label: xScale.domain()[0].toFixed(1),
-    },
-    centerRight: {
-      x: xScale.range()[1],
-      y: (yScale.range()[1] - yScale.range()[0]) / 2,
-      anchor: "end",
-      labelAdjust: { x: -5, y: 0 },
-      label: `${config.xChannel}: ${xScale.domain()[1].toFixed(1)}`,
-    },
-  };
-  $: zPoints = {
-    top: {
-      y: zScale.range()[0] + 15,
-      label: `${config.zChannel.toUpperCase()}: ${zScale
-        .domain()[0]
-        .toFixed(1)}`,
-    },
-    bottom: {
-      y: zScale.range()[1] - 5,
-      label: zScale.domain()[1].toFixed(1),
-    },
-  };
-  $: axisColor = bg.luminance() > 0.5 ? "gray" : "white";
+  // $: axisColor = bg.luminance() > 0.5 ? "gray" : "white";
+  $: luminance = bg.toChroma().luminance();
+  $: axisColor = luminance > 0.4 ? "#00000022" : "#ffffff55";
+  $: textColor = luminance > 0.4 ? "#00000066" : "#ffffffaa";
+  $: selectionColor = luminance > 0.35 ? "#55330066" : "#ffeeccaa";
 
   let hoveredPoint: Color | false = false;
   $: x = (point: Color) => xScale(point.toChannels()[1]);
   $: y = (point: Color) => yScale(point.toChannels()[2]);
   $: z = (point: Color) => zScale(point.toChannels()[0]);
-
-  const avgNums = (nums: number[]) =>
-    nums.reduce((acc, x) => acc + x, 0) / nums.length;
-
-  const bgResolution = 25;
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="flex">
+<div class="flex" style="background: {bg.toHex()}">
   <div class="flex flex-col">
-    {config.xyTitle}
+    <span class="text-2xl" style="color: {textColor}">
+      {config.title}
+    </span>
     <div class="flex h-full">
-      <div class="h-full py-4" style="max-height: {height}px">
-        <VerticalDoubleRangeSlider
-          bind:start={extents.y[0]}
-          bind:end={extents.y[1]}
-        />
-      </div>
+      <div class="h-full py-4" style="max-height: {height}px"></div>
       <svg
         {width}
         {height}
+        class="ml-2"
         on:mouseleave={stopDrag}
         on:mouseup={stopDrag}
         on:touchend={stopDrag}
       >
-        <g transform={`translate(${margin.left}, ${margin.top})`}>
-          {#each [...new Array(bgResolution)] as _, i}
-            {#each [...new Array(bgResolution)] as _, j}
-              <rect
-                x={xScale(xNonDimScale(i / bgResolution))}
-                y={yScale(yNonDimScale(j / bgResolution))}
-                width={plotWidth / bgResolution}
-                height={plotHeight / bgResolution}
-                opacity="1"
-                fill={dragging && focusedColors.length
-                  ? colorFromChannels(
-                      [
-                        avgNums(
-                          focusedColors.map((x) => colors[x].toChannels()[0])
-                        ),
-                        xNonDimScale(i / bgResolution),
-                        yNonDimScale(j / bgResolution),
-                      ],
-                      colorSpace
-                    ).toHex()
-                  : bg.toHex()}
-              />
-            {/each}
-          {/each}
-
-          <line
-            x1={points.centerTop.x}
-            y1={points.centerTop.y}
-            x2={points.centerBottom.x}
-            y2={points.centerBottom.y}
-            stroke={axisColor}
-            stroke-width="1"
-          />
-          <line
-            x1={points.centerLeft.x}
-            y1={points.centerLeft.y}
-            x2={points.centerRight.x}
-            y2={points.centerRight.y}
-            stroke={axisColor}
-            stroke-width="1"
+        <g transform={`translate(${margin.left}, ${margin.top}`}>
+          <ColorScatterPlotXyGuides
+            {xScale}
+            {yScale}
+            {plotHeight}
+            {plotWidth}
+            {axisColor}
+            {textColor}
+            {colorSpace}
+            dragging={!!dragging}
           />
-          {#each Object.values(points) as point}
-            <text
-              text-anchor={point.anchor}
-              x={point.x + point.labelAdjust.x}
-              y={point.y + point.labelAdjust.y}
-              fill={bg.luminance() > 0.5 ? "black" : "white"}
-            >
-              {point.label}
-            </text>
-          {/each}
 
           <!-- svelte-ignore a11y-no-static-element-interactions -->
           <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -383,6 +313,11 @@
                 class="cursor-pointer"
                 r={10 + (focusSet.has(i) ? 5 : 0)}
                 fill={color.toHex()}
+                stroke={focusedColors.length === 1 &&
+                focusedColors[0] === i &&
+                dragging
+                  ? axisColor
+                  : color.toHex()}
                 on:click={(e) => {
                   if (e.metaKey || e.shiftKey) {
                     onFocusedColorsChange(toggleElement(focusedColors, i));
@@ -403,7 +338,7 @@
                 fill={color.toHex()}
               />
             {/if}
-            <!-- {#if !color.inGamut()}
+            {#if !color.inGamut()}
               <g
                 pointer-events="none"
                 transform={`translate(${x(color)} ${y(color)})`}
@@ -411,7 +346,7 @@
                 <line stroke="black" x1={-7} y1={-7} x2={7} y2={7}></line>
                 <line stroke="black" x1={-7} y1={7} x2={7} y2={-7}></line>
               </g>
-            {/if} -->
+            {/if}
           {/each}
           {#each blindColors as blindColor, i}
             <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -441,15 +376,23 @@
               transform={`translate(${xScale(hoveredPoint.toChannels()[1])},
                 ${yScale(hoveredPoint.toChannels()[2])})`}
             >
-              <text>{hoveredPoint.toHex()}</text>
+              <text fill={textColor}>{hoveredPoint.toHex()}</text>
             </g>
           {/if}
+          <circle
+            cx={x(bg)}
+            cy={y(bg)}
+            r={15}
+            stroke={axisColor}
+            fill={bg.toHex()}
+          />
           <text
             x={xScale(bg.toChannels()[1])}
             y={yScale(bg.toChannels()[2])}
-            fill={bg.luminance() > 0.5 ? "black" : "white"}
+            fill={textColor}
+            font-size={12}
             text-anchor="middle"
-            alignment-baseline="middle"
+            dominant-baseline="central"
             class="pointer-events-none"
           >
             BG
@@ -460,35 +403,32 @@
               y={Math.min(dragging.y, dragBox.y) - parentPos.y}
               width={Math.abs(dragging.x - dragBox.x)}
               height={Math.abs(dragging.y - dragBox.y)}
-              fill="steelblue"
+              fill={selectionColor}
               fill-opacity="0.5"
               class="pointer-events-none"
             />
           {/if}
-          {#if pickedColors.length}
+          {#if pickedColors.length > 1}
             <rect
               x={xPos - 5}
               y={yPos - 5}
               width={selectionWidth + 10}
               height={selectionHeight + 10}
-              stroke="steelblue"
+              stroke={selectionColor}
               fill="white"
               fill-opacity="0"
               pointer-events="none"
               stroke-dasharray="5,5"
-              stroke-width="2"
+              stroke-width="1"
               cursor="grab"
             />
           {/if}
         </g>
       </svg>
     </div>
-    <div style="width: {width}px;" class="w-full px-4 ml-5">
-      <DoubleRangeSlider bind:start={extents.x[0]} bind:end={extents.x[1]} />
-    </div>
   </div>
   <div class="h-full">
-    <span>{config.zTitle}</span>
+    <span class=" text-xl opacity-0">{config.zTitle}</span>
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div class="flex h-full">
       <div class="flex flex-col">
@@ -499,7 +439,13 @@
           on:mouseup={stopDrag}
           on:touchend={stopDrag}
         >
-          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <ColorScatterPlotZGuide
+            {yScale}
+            {zScale}
+            {textColor}
+            {colorSpace}
+            {axisColor}
+          />
           <g transform={`translate(${margin.left}, ${margin.top})`}>
             <!-- svelte-ignore a11y-no-static-element-interactions -->
             <rect
@@ -507,9 +453,8 @@
               y={0}
               width={80}
               height={yScale.range()[1]}
-              fill={bg.toHex()}
-              stroke="gray"
-              stroke-width="1"
+              fill="white"
+              opacity="0"
               class:cursor-pointer={dragging}
               on:touchstart|preventDefault={startDrag(false)}
               on:mousedown|preventDefault={startDrag(false)}
@@ -518,23 +463,13 @@
               on:touchend|preventDefault={rectMoveEnd(true)}
               on:mouseup|preventDefault={rectMoveEnd(true)}
             />
-            {#each Object.values(zPoints) as point}
-              <text
-                pointer-events="none"
-                text-anchor={"middle"}
-                x={40}
-                y={point.y}
-                fill={bg.luminance() > 0.5 ? "black" : "white"}
-              >
-                {point.label}
-              </text>
-            {/each}
+
             {#each deDup(colors) as color, i}
               <!-- svelte-ignore a11y-no-static-element-interactions -->
               <!-- svelte-ignore a11y-click-events-have-key-events -->
               <rect
                 x={10 - (focusSet.has(i) ? 5 : 0)}
-                class="cursor-pointer color-bricks"
+                class="cursor-pointer"
                 y={z(color)}
                 width={80 - 10 * 2 + (focusSet.has(i) ? 10 : 0)}
                 height={5}
@@ -551,7 +486,7 @@
               <!-- svelte-ignore a11y-click-events-have-key-events -->
               <rect
                 x={10 - (focusSet.has(i) ? 5 : 0)}
-                class="cursor-pointer color-bricks"
+                class="cursor-pointer"
                 y={z(color)}
                 width={80 - 10 * 2 + (focusSet.has(i) ? 10 : 0)}
                 height={5}
@@ -570,8 +505,7 @@
                 y={Math.min(dragging.y, dragBox.y) - parentPos.y}
                 width={80 - 10}
                 height={Math.abs(dragging.y - dragBox.y)}
-                fill="steelblue"
-                fill-opacity="0.5"
+                fill={selectionColor}
                 class="pointer-events-none"
               />
             {/if}
@@ -581,30 +515,17 @@
                 y={zPos - 5}
                 width={80 - 10}
                 height={selectionDepth + 15}
-                stroke="steelblue"
+                stroke={selectionColor}
                 fill="white"
                 fill-opacity="0"
                 pointer-events="none"
                 stroke-dasharray="5,5"
-                stroke-width="2"
+                stroke-width="1"
                 cursor="grab"
               />
             {/if}
           </g>
         </svg>
-        <button
-          on:click={() => {
-            extents = { x: [0, 1], y: [0, 1], z: [0, 1] };
-          }}
-        >
-          Reset
-        </button>
-      </div>
-      <div class="py-4" style="height: {height}px">
-        <VerticalDoubleRangeSlider
-          bind:start={extents.z[0]}
-          bind:end={extents.z[1]}
-        />
       </div>
     </div>
   </div>
@@ -616,4 +537,8 @@
     -webkit-transition: r 0.2s ease-in-out;
     -moz-transition: r 0.2s ease-in-out;
   }
+
+  svg {
+    overflow: visible;
+  }
 </style>
diff --git a/src/components/ColorScatterPlotXYGuides.svelte b/src/components/ColorScatterPlotXYGuides.svelte
new file mode 100644
index 00000000..bdc01437
--- /dev/null
+++ b/src/components/ColorScatterPlotXYGuides.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { colorPickerConfig, colorFromChannels } from "../lib/Color";
+  import focusStore from "../stores/focus-store";
+  import colorStore from "../stores/color-store";
+  import { scaleLinear } from "d3-scale";
+  export let xScale: any;
+  export let yScale: any;
+  export let plotHeight: number;
+  export let plotWidth: number;
+  export let colorSpace: string;
+  export let dragging: boolean;
+  export let axisColor: string;
+  export let textColor: string;
+
+  $: config = colorPickerConfig[colorSpace as keyof typeof colorPickerConfig];
+  $: xNonDimScale = scaleLinear().domain([0, 1]).range(xScale.domain());
+  $: yNonDimScale = scaleLinear().domain([0, 1]).range(yScale.domain());
+  $: focusedColors = $focusStore.focusedColors;
+  $: colors = $colorStore.currentPal.colors;
+  $: axisFormatter =
+    colorPickerConfig[colorSpace as keyof typeof colorPickerConfig].axisLabel;
+
+  $: points = {
+    centerTop: {
+      x: (xScale.range()[1] - xScale.range()[0]) / 2,
+      y: yScale.range()[0],
+      labelAdjust: { x: 0, y: -5 },
+      anchor: "middle",
+      label: `${config.yChannel}: ${axisFormatter(yScale.domain()[0])}`,
+    },
+    centerBottom: {
+      x: (xScale.range()[1] - xScale.range()[0]) / 2,
+      y: yScale.range()[1],
+      anchor: "middle",
+      labelAdjust: { x: 0, y: 15 },
+      label: axisFormatter(yScale.domain()[1]),
+    },
+    centerLeft: {
+      x: xScale.range()[0],
+      y: (yScale.range()[1] - yScale.range()[0]) / 2,
+      anchor: "start",
+      labelAdjust: { x: 5, y: -3 },
+      label: axisFormatter(xScale.domain()[0]),
+    },
+    centerRight: {
+      x: xScale.range()[1],
+      y: (yScale.range()[1] - yScale.range()[0]) / 2,
+      anchor: "end",
+      labelAdjust: { x: -5, y: -3 },
+      label: `${config.xChannel}: ${axisFormatter(xScale.domain()[1])}`,
+    },
+  };
+  const bgResolution = 25;
+  const avgNums = (nums: number[]) =>
+    nums.reduce((acc, x) => acc + x, 0) / nums.length;
+  $: bg = $colorStore.currentPal.background;
+  $: fillColor = (i: number, j: number) => {
+    if (dragging && focusedColors.length === 1) {
+      const avgColor = [
+        avgNums(focusedColors.map((x) => colors[x].toChannels()[0])),
+        xNonDimScale(i / bgResolution),
+        yNonDimScale(j / bgResolution),
+      ] as [number, number, number];
+      return colorFromChannels(avgColor, colorSpace as any).toHex();
+    }
+    return bg.toHex();
+  };
+</script>
+
+<!-- colorful background select -->
+{#each [...new Array(bgResolution)] as _, i}
+  {#each [...new Array(bgResolution)] as _, j}
+    <rect
+      x={xScale(xNonDimScale(i / bgResolution))}
+      y={yScale(yNonDimScale(j / bgResolution))}
+      width={plotWidth / bgResolution}
+      height={plotHeight / bgResolution}
+      opacity="1"
+      fill={fillColor(i, j)}
+    />
+  {/each}
+{/each}
+
+<line
+  x1={points.centerTop.x}
+  y1={points.centerTop.y}
+  x2={points.centerBottom.x}
+  y2={points.centerBottom.y}
+  stroke={axisColor}
+  stroke-width="1"
+/>
+<line
+  x1={points.centerLeft.x}
+  y1={points.centerLeft.y}
+  x2={points.centerRight.x}
+  y2={points.centerRight.y}
+  stroke={axisColor}
+  stroke-width="1"
+/>
+{#each Object.values(points) as point}
+  <text
+    text-anchor={point.anchor}
+    x={point.x + point.labelAdjust.x}
+    y={point.y + point.labelAdjust.y}
+    fill={textColor}
+  >
+    {point.label}
+  </text>
+{/each}
diff --git a/src/components/ColorScatterPlotZGuide.svelte b/src/components/ColorScatterPlotZGuide.svelte
new file mode 100644
index 00000000..bc8fdfcd
--- /dev/null
+++ b/src/components/ColorScatterPlotZGuide.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  //   import colorStore from "../stores/color-store";
+  import { colorPickerConfig } from "../lib/Color";
+  export let yScale: any;
+  export let zScale: any;
+  export let textColor: string;
+  export let colorSpace: string;
+  export let axisColor: string;
+
+  $: config = colorPickerConfig[colorSpace];
+
+  $: zPoints = {
+    top: {
+      y: zScale.range()[0] + 0,
+      label: `${config.zChannel.toUpperCase()}: ${zScale
+        .domain()[0]
+        .toFixed(1)}`,
+    },
+    bottom: {
+      y: zScale.range()[1] + 15,
+      label: zScale.domain()[1].toFixed(1),
+    },
+  };
+  $: plotHeight = yScale.range()[1];
+</script>
+
+<line
+  x1={10}
+  y1={0}
+  x2={10}
+  y2={plotHeight}
+  stroke={axisColor}
+  stroke-width="1"
+/>
+
+{#each Object.values(zPoints) as point}
+  <text
+    pointer-events="none"
+    text-anchor={"middle"}
+    x={40 + 15}
+    y={point.y}
+    fill={textColor}
+  >
+    {point.label}
+  </text>
+{/each}
diff --git a/src/components/KeyboardHooks.svelte b/src/components/KeyboardHooks.svelte
index d8c7c165..7719be5e 100644
--- a/src/components/KeyboardHooks.svelte
+++ b/src/components/KeyboardHooks.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { Color, stepSize } from "../lib/Color";
+  import { Color, colorPickerConfig } from "../lib/Color";
   import colorStore from "../stores/color-store";
   import focusStore from "../stores/focus-store";
   $: focusedSet = new Set($focusStore.focusedColors);
   $: copiedData = [] as Color[];
   $: colorSpace = $colorStore.currentPal.colorSpace;
-  $: [_zStep, xStep, yStep] = stepSize[colorSpace];
+  $: xStep = colorPickerConfig[colorSpace].xStep;
+  $: yStep = colorPickerConfig[colorSpace].yStep;
   function onKeyDown(e: any) {
     if (e.target.tagName.toLowerCase() === "input") {
       const isUIElement =
diff --git a/src/content-modules/Examples.svelte b/src/content-modules/Examples.svelte
index f6d52002..32528b0b 100644
--- a/src/content-modules/Examples.svelte
+++ b/src/content-modules/Examples.svelte
@@ -12,6 +12,7 @@
   import CodeMirror from "svelte-codemirror-editor";
   import Tooltip from "../components/Tooltip.svelte";
   import Example from "../components/Example.svelte";
+  import Swatches from "../content-modules/Swatches.svelte";
 
   let modalState: "closed" | "input-svg" | "edit-colors" = "closed";
   let modifyingExample: number | false = false;
@@ -40,6 +41,11 @@
   }
 
   $: detectedColors = [] as string[];
+  $: sections = $exampleStore.sections as any;
+  function onToggle(group: string) {
+    exampleStore.toggleSection(group as keyof typeof $exampleStore.sections);
+  }
+  $: console.log(sections);
 </script>
 
 <div class="flex items-center bg-slate-200 px-4">
@@ -49,7 +55,8 @@
       <input
         id={`${group}-checkbox`}
         type="checkbox"
-        bind:checked={$exampleStore.sections[group]}
+        checked={sections[group]}
+        on:change={(e) => onToggle(group)}
       />
     </div>
   {/each}
@@ -104,12 +111,15 @@
       </div>
     {/each}
   {/if}
+  {#if $exampleStore.sections["swatches"]}
+    <Swatches />
+  {/if}
   {#if $exampleStore.sections.pages}
     <TinyWebpage />
     <TextBlock />
   {/if}
   {#each charts as { chart, group }}
-    {#if $exampleStore.sections[group]}
+    {#if sections[group]}
       <div class="flex flex-col border-2 border-dashed rounded w-min mr-4">
         <Vega spec={chart($colorStore.currentPal)} />
       </div>
diff --git a/src/content-modules/LeftPanel.svelte b/src/content-modules/LeftPanel.svelte
index 49001156..bc019717 100644
--- a/src/content-modules/LeftPanel.svelte
+++ b/src/content-modules/LeftPanel.svelte
@@ -11,6 +11,7 @@
   import PickAi from "./context-free-tools/PickAI.svelte";
   import { buttonStyle } from "../lib/styles";
   import ShortCuts from "./context-free-tools/ShortCuts.svelte";
+  import Zoom from "./context-free-tools/Zoom.svelte";
 
   import SavedPals from "./SavedPals.svelte";
   import SetColorSpace from "./SetColorSpace.svelte";
@@ -66,6 +67,7 @@
     <PalPreview pal={$colorStore.currentPal} />
 
     <Background />
+    <Zoom />
     <GetColorsFromString />
     <SetColorSpace />
   </section>
diff --git a/src/content-modules/SetColorSpace.svelte b/src/content-modules/SetColorSpace.svelte
index c0f8d0be..a496d0e6 100644
--- a/src/content-modules/SetColorSpace.svelte
+++ b/src/content-modules/SetColorSpace.svelte
@@ -3,19 +3,15 @@
   import { colorPickerConfig } from "../lib/Color";
   $: colorSpace = $colorStore.currentPal.colorSpace;
   const notAllowed = new Set(["rgb", "hsv", "hsl"]);
+  const onChange = (e: any) => colorStore.setColorSpace(e.target.value);
 </script>
 
 <div class="w-full flex flex-col">
   <label for="color-space-select">Color Space</label>
-  <select
-    id="color-space-select"
-    value={colorSpace}
-    on:change={(e) => {
-      // @ts-ignore
-      colorStore.setColorSpace(e.target.value);
-    }}
-  >
-    {#each Object.entries(colorPickerConfig).filter((x) => !notAllowed.has(x[0])) as [space, { title }]}
+  <select id="color-space-select" value={colorSpace} on:change={onChange}>
+    {#each Object.entries(colorPickerConfig)
+      .sort()
+      .filter((x) => !notAllowed.has(x[0].toLowerCase())) as [space, { title }]}
       <option value={space}>{title}</option>
     {/each}
   </select>
diff --git a/src/content-modules/Swatches.svelte b/src/content-modules/Swatches.svelte
index f578a0a0..27fc492f 100644
--- a/src/content-modules/Swatches.svelte
+++ b/src/content-modules/Swatches.svelte
@@ -14,16 +14,16 @@
   let common = "cursor-pointer mr-2 mb-2 transition-all";
   let classes = [
     {
-      className: `${common} w-14 h-14 `,
+      className: `${common} w-8 h-8 `,
       styleMap: (color: Color): string => `background-color: ${color.toHex()};`,
     },
     {
-      className: `${common} w-8 h-8`,
+      className: `${common} w-6 h-6`,
       styleMap: (color: Color): string => `background-color: ${color.toHex()};`,
     },
     {
-      className: `${common} w-8 h-8 rounded-full`,
-      styleMap: (color: Color): string => `border: 4px solid ${color.toHex()};`,
+      className: `${common} w-4 h-4 rounded-full`,
+      styleMap: (color: Color): string => `border: 2px solid ${color.toHex()};`,
     },
   ];
 </script>
@@ -33,11 +33,11 @@
   style={`background-color: ${bg.toHex()}; max-width: 600px`}
 >
   <div class="flex mb-2 justify-between items-center">
-    <span class="text-sm flex flex-col" class:text-white={bg.luminance() < 0.5}>
+    <!-- <span class="text-sm flex flex-col" class:text-white={bg.luminance() < 0.5}>
       <span>Click to modify colors</span>
       <span>Hold shift to select multiple</span>
-    </span>
-    {#if focused.length === 1}
+    </span> -->
+    <!-- {#if focused.length === 1}
       {#if focused[0] > 0}
         <button
           class="{buttonStyle} mr-2"
@@ -62,8 +62,8 @@
           Move backward
         </button>
       {/if}
-    {/if}
-    {#if focused.length > 0}
+    {/if} -->
+    <!-- {#if focused.length > 0}
       <button
         class={buttonStyle}
         on:click={() => {
@@ -72,7 +72,7 @@
       >
         Clear Selection
       </button>
-    {/if}
+    {/if} -->
   </div>
   {#each classes as { className, styleMap }}
     <div class="flex justify-center flex-wrap">
@@ -86,7 +86,7 @@
             let:tooltipOpen
             slot="target"
             class={className}
-            style={styleMap(color)}
+            style={`${styleMap(color)}`}
             on:click={(e) => {
               const isFocused = focusSet.has(idx);
               const shiftKey = e.shiftKey;
@@ -104,7 +104,6 @@
                   focusStore.clearColors();
                 }
               } else if (tooltipOpen && !isFocused) {
-                console.log("C");
                 if (shiftKey) {
                   focusStore.addColor(idx);
                 } else {
@@ -126,8 +125,12 @@
     </div>
   {/each}
   <div class="flex flex-wrap justify-center">
-    {#each colors as color}
-      <div style={`color: ${color.toHex()}`} class="mr-2">
+    {#each colors as color, i}
+      <div
+        style={`color: ${color.toHex()}`}
+        class="mr-2"
+        class:mt-2={focusSet.has(i)}
+      >
         {color.toHex()}
       </div>
     {/each}
diff --git a/src/content-modules/context-free-tools/AddFamiliarPal.svelte b/src/content-modules/context-free-tools/AddFamiliarPal.svelte
index c55f22e4..a22450ca 100644
--- a/src/content-modules/context-free-tools/AddFamiliarPal.svelte
+++ b/src/content-modules/context-free-tools/AddFamiliarPal.svelte
@@ -39,9 +39,6 @@
       });
     });
     Object.entries(chroma.brewer).forEach(([name, colors]) => {
-      if (!colorBrewerMapToType[name.toLowerCase()]) {
-        console.log(name);
-      }
       newPals.push({
         name,
         colors: colors.map((x) => colorFromString(x, colorSpace)),
diff --git a/src/content-modules/context-free-tools/Zoom.svelte b/src/content-modules/context-free-tools/Zoom.svelte
new file mode 100644
index 00000000..196921e5
--- /dev/null
+++ b/src/content-modules/context-free-tools/Zoom.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import Tooltip from "../../components/Tooltip.svelte";
+  import { buttonStyle } from "../../lib/styles";
+  import { colorPickerConfig } from "../../lib/Color";
+  import DoubleRangeSlider from "../../components/DoubleRangeSlider.svelte";
+  import navStore from "../../stores/nav-store";
+  import colorStore from "../../stores/color-store";
+
+  $: xZoom = $navStore.xZoom;
+  $: xZoom && navStore.setZoom("x", xZoom);
+  $: yZoom = $navStore.yZoom;
+  $: yZoom && navStore.setZoom("y", yZoom);
+  $: zZoom = $navStore.zZoom;
+  $: zZoom && navStore.setZoom("z", zZoom);
+
+  $: colorSpace = $colorStore.currentPal.colorSpace;
+  $: config = colorPickerConfig[colorSpace as keyof typeof colorPickerConfig];
+
+  $: xName = config.xChannel.toUpperCase();
+  $: yName = config.yChannel.toUpperCase();
+  $: zName = config.zChannel.toUpperCase();
+</script>
+
+<Tooltip>
+  <button class={buttonStyle} slot="target" let:toggle on:click={toggle}>
+    Zoom
+  </button>
+  <div slot="content" class="w-48">
+    <div class="font-bold">Zoom levels</div>
+    <div class="flex">
+      <div class="mr-4">{xName}</div>
+      <DoubleRangeSlider bind:start={xZoom[0]} bind:end={xZoom[1]} />
+    </div>
+    <div class="flex">
+      <div class="mr-4">{yName}</div>
+      <DoubleRangeSlider bind:start={yZoom[0]} bind:end={yZoom[1]} />
+    </div>
+    <div class="flex">
+      <div class="mr-4">{zName}</div>
+      <DoubleRangeSlider bind:start={zZoom[0]} bind:end={zZoom[1]} />
+    </div>
+    <button
+      on:click={() => {
+        navStore.setZoom("x", [0, 1]);
+        navStore.setZoom("y", [0, 1]);
+        navStore.setZoom("z", [0, 1]);
+      }}
+    >
+      Reset
+    </button>
+  </div>
+</Tooltip>
diff --git a/src/lib/Color.ts b/src/lib/Color.ts
index 0fb2692f..c51476f3 100644
--- a/src/lib/Color.ts
+++ b/src/lib/Color.ts
@@ -2,12 +2,25 @@ import type { Color as ChromaColor } from "chroma-js";
 import chroma from "chroma-js";
 import ColorIO from "colorjs.io";
 
+type Domain = Record<string, [number, number]>;
+type Channels = [number, number, number];
 const hexCache = new Map<string, string>();
 export class Color {
   name: string = "";
   channels: Record<string, number> = {};
+  // todo finish removing chroma bind
   chromaBind: typeof chroma.lab = chroma.rgb;
   spaceName: keyof typeof colorDirectory = "rgb";
+  domains: Domain;
+  stepSize: Channels = [1, 1, 1];
+  xyTitle: string = "";
+  zTitle: string = "";
+  dimensionToChannel: Record<"x" | "y" | "z", string> = { x: "", y: "", z: "" };
+  axisLabel: (num: number) => string = (x) => x.toFixed(1).toString();
+
+  constructor() {
+    this.domains = {};
+  }
 
   toHex(): string {
     const str = this.toString();
@@ -33,8 +46,8 @@ export class Color {
   toChroma(): ChromaColor {
     return this.chromaBind(...this.toChannels());
   }
-  toChannels(): [number, number, number] {
-    return Object.values(this.channels) as [number, number, number];
+  toChannels(): Channels {
+    return Object.values(this.channels) as Channels;
   }
   setChannel(channel: keyof typeof this.channels, value: number) {
     this.channels[channel] = value;
@@ -49,7 +62,12 @@ export class Color {
     return x === y;
   }
   toColorIO(): ColorIO {
-    return new ColorIO(this.toString());
+    try {
+      return new ColorIO(this.toString());
+    } catch (e) {
+      console.log("error", e);
+      return new ColorIO("black");
+    }
   }
 
   fromString(colorString: string): Color {
@@ -59,7 +77,7 @@ export class Color {
     }
     return this.fromChannels(stringToChannels(this.spaceName, colorString));
   }
-  fromChannels(channels: [number, number, number]): Color {
+  fromChannels(channels: Channels): Color {
     const newColor = new (this.constructor as typeof Color)();
     Object.keys(this.channels).forEach((channel, i) => {
       newColor.setChannel(channel, channels[i]);
@@ -80,7 +98,12 @@ export class Color {
   }
 }
 
+const colorStringCache = new Map<string, Channels>();
 export function stringToChannels(spaceName: string, str: string) {
+  const key = `${spaceName}(${str})`;
+  if (colorStringCache.has(key)) {
+    return colorStringCache.get(key)!;
+  }
   let channels = str
     .replace(`${spaceName}(`, "")
     .replace(")", "")
@@ -94,14 +117,22 @@ export function stringToChannels(spaceName: string, str: string) {
   if (!(channels.length === 3 && allNumbers)) {
     throw new Error(`Invalid color string: ${str}`);
   }
-  return channels.map((x) => Number(x) * 1) as [number, number, number];
+  const result = channels.map((x) => Number(x) * 1) as Channels;
+  colorStringCache.set(key, result);
+  return result;
 }
 
 export class CIELAB extends Color {
   name = "CIELAB";
   channels = { L: 0, a: 0, b: 0 };
+  domains = { L: [100, 0], a: [-125, 125], b: [125, -125] } as Domain;
   chromaBind = chroma.lab;
   spaceName = "lab" as const;
+  stepSize: Channels = [1, 1, 1];
+  xyTitle: string = "CIELAB: a* b*";
+  zTitle: string = "CIELAB: L*";
+  dimensionToChannel = { x: "a", y: "b", z: "L" };
+  axisLabel = (num: number) => `${Math.round(num)}`;
 
   toString(): string {
     const [L, a, b] = Object.values(this.channels).map((x) => x || 0);
@@ -112,8 +143,13 @@ export class CIELAB extends Color {
 export class HSV extends Color {
   name = "HSV";
   channels = { h: 0, s: 0, v: 0 };
+  domains = { h: [0, 360], s: [0, 1], v: [0, 1] } as Domain;
   chromaBind = chroma.hsv;
   spaceName = "hsv" as const;
+  stepSize: Channels = [1, 0.01, 0.01];
+  xyTitle: string = "HSV: Saturation Value";
+  zTitle: string = "HSV: Hue";
+  dimensionToChannel = { x: "s", y: "v", z: "h" };
   toString(): string {
     const [h, s, v] = Object.values(this.channels);
     return `color(hsv ${h} ${s} ${v})`;
@@ -125,6 +161,12 @@ export class RGB extends Color {
   channels = { r: 0, g: 0, b: 0 };
   chromaBind = chroma.rgb;
   spaceName = "rgb" as const;
+  domains = { r: [0, 255], g: [0, 255], b: [0, 255] } as Domain;
+  stepSize: Channels = [1, 1, 1];
+  xyTitle: string = "RGB: Green Blue";
+  zTitle: string = "RGB: Red";
+  dimensionToChannel = { x: "g", y: "b", z: "r" };
+  axisLabel = (num: number) => `${Math.round(num)}`;
 }
 
 export class HSL extends Color {
@@ -132,6 +174,11 @@ export class HSL extends Color {
   channels = { h: 0, s: 0, l: 0 };
   chromaBind = chroma.hsl;
   spaceName = "hsl" as const;
+  domains = { h: [0, 360], s: [0, 1], l: [0, 1] } as Domain;
+  stepSize: Channels = [1, 0.01, 0.01];
+  xyTitle: string = "HSL: Saturation Lightness";
+  zTitle: string = "HSL: Hue";
+  dimensionToChannel = { x: "s", y: "l", z: "h" };
 
   toString(): string {
     const [h, s, l] = Object.values(this.channels).map((x) => x || 0);
@@ -143,6 +190,12 @@ export class LCH extends Color {
   channels = { l: 0, c: 0, h: 0 };
   chromaBind = chroma.lch;
   spaceName = "lch" as const;
+  domains = { l: [100, 0], c: [0, 150], h: [360, 0] } as Domain;
+  stepSize: Channels = [1, 1, 1];
+  xyTitle: string = "LCH: Chroma Hue";
+  zTitle: string = "LCH: Lightness";
+  dimensionToChannel = { x: "c", y: "h", z: "l" };
+  axisLabel = (num: number) => `${Math.round(num)}`;
 }
 
 export class OKLAB extends Color {
@@ -150,6 +203,11 @@ export class OKLAB extends Color {
   channels = { l: 0, a: 0, b: 0 };
   chromaBind = chroma.oklab;
   spaceName = "oklab" as const;
+  domains = { l: [1, 0], a: [-0.4, 0.4], b: [0.4, -0.4] } as Domain;
+  stepSize: Channels = [0.01, 0.01, 0.01];
+  xyTitle: string = "OKLAB: a* b*";
+  zTitle: string = "OKLAB: L*";
+  dimensionToChannel = { x: "a", y: "b", z: "l" };
 }
 
 export class OKLCH extends Color {
@@ -157,12 +215,22 @@ export class OKLCH extends Color {
   channels = { l: 0, c: 0, h: 0 };
   chromaBind = chroma.oklch;
   spaceName = "oklch" as const;
+  domains = { l: [1, 0], c: [0, 0.4], h: [360, 0] } as Domain;
+  stepSize: Channels = [0.01, 0.01, 1];
+  xyTitle: string = "OKLCH: Chroma Hue";
+  zTitle: string = "OKLCH: Lightness";
+  dimensionToChannel = { x: "c", y: "h", z: "l" };
 }
 
 export class JZAZBZ extends Color {
   name = "JZAZBZ";
   channels = { jz: 0, az: 0, bz: 0 };
   spaceName = "jzazbz" as const;
+  domains = { jz: [1, 0], az: [-0.5, 0.5], bz: [0.5, -0.5] } as Domain;
+  stepSize: Channels = [0.01, 0.01, 0.01];
+  xyTitle: string = "JzAzBz: Az Bz";
+  zTitle: string = "JzAzBz: Jz";
+  dimensionToChannel = { x: "az", y: "bz", z: "jz" };
   constructor() {
     super();
     this.chromaBind = (jz, az, bz) => {
@@ -198,7 +266,7 @@ export function colorFromHex(
 }
 
 export function colorFromChannels(
-  channels: [number, number, number],
+  channels: Channels,
   colorSpace: keyof typeof colorDirectory
 ): Color {
   return new colorDirectory[colorSpace]().fromChannels(channels);
@@ -211,7 +279,7 @@ export function toColorSpace(
   if (color.spaceName === colorSpace) {
     return color;
   }
-  const channels = new ColorIO(color.toString()).to(colorSpace).coords;
+  const channels = color.toColorIO().to(colorSpace).coords;
   return new colorDirectory[colorSpace]().fromChannels(channels);
 }
 
@@ -228,91 +296,27 @@ export const colorDirectory = {
 };
 
 type ColorSpace = keyof typeof colorDirectory | string;
-const domains = {
-  lab: { a: [-125, 125], b: [-125, 125], l: [0, 100] },
-  oklab: { a: [-0.4, 0.4], b: [-0.4, 0.4], l: [0, 1] },
-  rgb: { r: [0, 255], g: [0, 255], b: [0, 255] },
-  // srgb: { r: [0, 255], g: [255, 0], b: [0, 255] },
-  hsv: { h: [0, 360], s: [0, 1], v: [0, 1] },
-  hsl: { h: [0, 360], s: [0, 1], l: [0, 1] },
-  lch: { l: [0, 100], c: [0, 150], h: [0, 360] },
-  oklch: { l: [0, 1], c: [0, 0.4], h: [0, 360] },
-  jzazbz: { jz: [0, 1], az: [-0.5, 0.5], bz: [-0.5, 0.5] },
-} as Record<ColorSpace, Record<string, [number, number]>>;
-export const stepSize = {
-  lab: [1, 1, 1],
-  oklab: [0.01, 0.01, 0.01],
-  rgb: [1, 1, 1],
-  // srgb: [1, 1, 1],
-  hsv: [1, 0.01, 0.01],
-  hsl: [1, 0.01, 0.01],
-  lch: [1, 1, 1],
-  oklch: [0.01, 0.01, 1],
-  jzazbz: [0.01, 0.01, 0.01],
-} as Record<ColorSpace, [number, number, number]>;
-
-const dimensionToChannel = {
-  lab: { x: "a", y: "b", z: "l" },
-  oklab: { x: "a", y: "b", z: "l" },
-  rgb: { x: "g", y: "b", z: "r" },
-  // srgb: { x: "g", y: "b", z: "r" },
-  hsv: { x: "s", y: "v", z: "h" },
-  hsl: { x: "s", y: "l", z: "h" },
-  lch: { x: "c", y: "h", z: "l" },
-  oklch: { x: "c", y: "h", z: "l" },
-  jzazbz: { x: "az", y: "bz", z: "jz" },
-} as Record<ColorSpace, Record<string, string>>;
-const xyTitles = {
-  lab: "CIELAB: a* b*",
-  oklab: "OKLAB: a* b*",
-  rgb: "RGB: Green Blue",
-  // srgb: "sRGB: Green Blue",
-  hsv: "HSV: Saturation Value",
-  hsl: "HSL: Saturation Lightness",
-  lch: "LCH: Chroma Hue",
-  oklch: "OKLCH: Chroma Hue",
-  jzazbz: "JzAzBz: Az Bz",
-} as Record<ColorSpace, string>;
-const zTitles = {
-  lab: "CIELAB: L*",
-  oklab: "OKLAB: L*",
-  rgb: "RGB: Red",
-  // srgb: "sRGB: Red",
-  hsv: "HSV: Hue",
-  hsl: "HSL: Hue",
-  lch: "LCH: Lightness",
-  oklch: "OKLCH: Lightness",
-  jzazbz: "JzAzBz: Jz",
-} as Record<ColorSpace, string>;
-const titleMap = {
-  lab: "CIELAB",
-  oklab: "OKLAB",
-  rgb: "RGB",
-  // srgb: "sRGB",
-  hsv: "HSV",
-  hsl: "HSL",
-  lch: "LCH",
-  oklch: "OKLCH",
-  jzazbz: "JzAzBz",
-} as Record<ColorSpace, string>;
 
 export const colorPickerConfig = Object.fromEntries(
-  (Object.keys(domains) as ColorSpace[]).map((name) => {
+  (Object.keys(colorDirectory) as ColorSpace[]).map((name: ColorSpace) => {
+    const exampleColor = new (colorDirectory as any)[name]() as Color;
+    const dimensionToChannel = exampleColor.dimensionToChannel;
     return [
       name,
       {
-        title: titleMap[name],
-        xyTitle: xyTitles[name],
-        zTitle: zTitles[name],
-        xDomain: domains[name][dimensionToChannel[name].x],
-        yDomain: domains[name][dimensionToChannel[name].y],
-        zDomain: domains[name][dimensionToChannel[name].z],
-        xChannel: dimensionToChannel[name].x,
-        yChannel: dimensionToChannel[name].y,
-        zChannel: dimensionToChannel[name].z,
-        xStep: stepSize[name][1],
-        yStep: stepSize[name][2],
-        zStep: stepSize[name][0],
+        title: exampleColor.name,
+        xyTitle: exampleColor.xyTitle,
+        zTitle: exampleColor.zTitle,
+        xDomain: exampleColor.domains[dimensionToChannel.x],
+        yDomain: exampleColor.domains[dimensionToChannel.y],
+        zDomain: exampleColor.domains[dimensionToChannel.z],
+        xChannel: dimensionToChannel.x,
+        yChannel: dimensionToChannel.y,
+        zChannel: dimensionToChannel.z,
+        xStep: exampleColor.stepSize[1],
+        yStep: exampleColor.stepSize[2],
+        zStep: exampleColor.stepSize[0],
+        axisLabel: exampleColor.axisLabel,
       },
     ];
   })
diff --git a/src/lib/lints/sequential-order.ts b/src/lib/lints/sequential-order.ts
index 728a1939..2e7ba3eb 100644
--- a/src/lib/lints/sequential-order.ts
+++ b/src/lib/lints/sequential-order.ts
@@ -3,8 +3,7 @@ import type { TaskType } from "./ColorLint";
 import ColorIO from "colorjs.io";
 import { Color } from "../Color";
 
-const getLightness = (color: Color) =>
-  new ColorIO(color.toHex()).to("lab").coords[0];
+const getLightness = (color: Color) => color.toColorIO().to("lab").coords[0];
 export default class SequentialOrder extends ColorLint<boolean, false> {
   name = "Sequential Palettes should be ordered by lightness";
   taskTypes = ["sequential"] as TaskType[];
diff --git a/src/stores/example-store.ts b/src/stores/example-store.ts
index 26a98a20..68f9a910 100644
--- a/src/stores/example-store.ts
+++ b/src/stores/example-store.ts
@@ -4,33 +4,34 @@ import * as idb from "idb-keyval";
 type Example = { svg: string; numColors: number };
 interface StoreData {
   examples: Example[];
-  sections: Record<string, boolean>;
+  sections: typeof InitialSections;
 }
-
+const InitialSections = {
+  pages: true,
+  ordinal: true,
+  categorical: true,
+  custom: true,
+  swatches: true,
+};
 const InitialStore: StoreData = {
   examples: [],
-  sections: {
-    pages: true,
-    ordinal: true,
-    categorical: true,
-    custom: true,
-  },
+  sections: InitialSections,
 };
 
 const storeName = "color-pal-examples";
 function createStore() {
-  const storeData: StoreData = JSON.parse(JSON.stringify(InitialStore));
-  // install defaults if not present
-  Object.keys(InitialStore).forEach((key) => {
-    if (!(key in storeData)) {
-      const Key: keyof StoreData = key as any;
-      storeData[Key] = InitialStore[Key] as any;
-    }
-  });
+  let storeData: StoreData = JSON.parse(JSON.stringify(InitialStore));
 
   const { subscribe, set, update } = writable<StoreData>(storeData);
   idb.get(storeName).then((x) => {
-    if (x) set(x);
+    if (x) {
+      const newStore = {
+        ...InitialStore,
+        ...x,
+        sections: { ...InitialSections, ...(x.sections || {}) },
+      };
+      set(newStore);
+    }
   });
   const persistUpdate = (updateFunc: (old: StoreData) => StoreData) =>
     update((oldStore) => {
@@ -43,6 +44,11 @@ function createStore() {
     subscribe,
     set: (newStore: StoreData) => persistUpdate(() => newStore),
     reset: () => persistUpdate(() => ({ ...InitialStore })),
+    toggleSection: (section: keyof typeof InitialSections) =>
+      persistUpdate((old) => ({
+        ...old,
+        sections: { ...old.sections, [section]: !old.sections[section] },
+      })),
     updateExample: (example: Example, idx: number) =>
       persistUpdate((old) => {
         const newExamples = [...old.examples];
diff --git a/src/stores/nav-store.ts b/src/stores/nav-store.ts
index 685953fa..4b10e81f 100644
--- a/src/stores/nav-store.ts
+++ b/src/stores/nav-store.ts
@@ -5,6 +5,9 @@ interface StoreData {
   comparePal: string | undefined;
   colorSim: "deuteranopia" | "protanopia" | "tritanopia" | "none";
   includeQuotes: boolean;
+  xZoom: [number, number];
+  yZoom: [number, number];
+  zZoom: [number, number];
 }
 
 const InitialStore: StoreData = {
@@ -12,6 +15,9 @@ const InitialStore: StoreData = {
   comparePal: undefined,
   colorSim: "none",
   includeQuotes: false,
+  xZoom: [0, 1],
+  yZoom: [0, 1],
+  zZoom: [0, 1],
 };
 const storeName = "color-pal-nav-store";
 
@@ -47,6 +53,8 @@ function createStore() {
       persistUpdate((old) => ({ ...old, colorSim })),
     setIncludeQuotes: (includeQuotes: StoreData["includeQuotes"]) =>
       persistUpdate((old) => ({ ...old, includeQuotes })),
+    setZoom: (axis: "x" | "y" | "z", zoom: [number, number]) =>
+      persistUpdate((old) => ({ ...old, [axis + "Zoom"]: zoom })),
   };
 }