naive clip to gamut

src/content-modules/ActionArea.svelte

@@ -10,13 +10,15 @@
   import AddColor from "./contextual-tools/AddColor.svelte";
   import Rotate from "./contextual-tools/Rotate.svelte";
   import Deduplicate from "./contextual-tools/Deduplicate.svelte";
+  import ClipToGamut from "./contextual-tools/ClipToGamut.svelte";
 </script>
 
 <div
   class="flex bg-slate-400 p-2 h-12 flex-none items-center overflow-x-scroll overflow-y-hidden"
 >
   <AddColor />
   <AdjustColor />
+  <ClipToGamut />
   <OpposingColor />
 
   <CreateAverage />

src/content-modules/contextual-tools/ClipToGamut.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import colorStore from "../../stores/color-store";
+
+  import { buttonStyle } from "../../lib/styles";
+
+  $: colors = $colorStore.currentPal.colors;
+
+  function clipToGamut() {
+    const newColors = colors.map((x) => {
+      if (x.inGamut()) {
+        return x;
+      } else {
+        const newChannels = x
+          .toColorIO()
+          .to("srgb")
+          .toGamut()
+          .to(x.spaceName).coords;
+        return x.fromChannels(newChannels);
+      }
+    });
+    colorStore.setCurrentPalColors(newColors);
+  }
+
+  $: outOfGamutColors = colors.map((x) => x.inGamut());
+</script>
+
+{#if outOfGamutColors.length >= 1}
+  <button class={buttonStyle} on:click={clipToGamut}>Clip to gamut</button>
+{/if}