feat: Implement ColorSwitcher component and integrate it into logo cards for enhanced color selection

ToDo.md

@@ -1,4 +1,4 @@
-[ ] Improove: To the tiny card add the color chooser. It should be one circle that display current color, on click it should open color picker.
+[v] Improove: To the tiny card add the color chooser. It should be one circle that display current color, on click it should open color picker.
 [ ] Improove: In the preview page, add full header.
 [ ] Improove: Split header into two parts: static top and dynamic bottom.
 [ ] Improove: In the preview page, add possibility select custom color for each target.

src/components/CardFull.svelte

@@ -2,8 +2,8 @@
   import { onMount } from "svelte";
   import InlineSvg from "./InlineSvg.svelte";
   import Actions from "./Actions.svelte";
+  import ColorSwitcher from "./ColorSwitcher.svelte";
   import { getDefaultLogoColor, getThemeColor } from "../utils/colorTheme.js";
-  import { generateColorSetCircle } from "../utils/colorCircles.js";
   import { fetchSvgSource } from "../utils/svgSource.js";
 
   export let show = false;
@@ -27,7 +27,7 @@
 
   // Watch for color changes and update SVG source
   function updateSvgSource() {
-    if (inlineSvgRef && typeof inlineSvgRef.getSvgSource === 'function') {
+    if (inlineSvgRef && typeof inlineSvgRef.getSvgSource === "function") {
       const newSource = inlineSvgRef.getSvgSource();
       if (newSource) {
         svgSource = newSource;
@@ -39,16 +39,16 @@
     return logo && logo.format && logo.format.toLowerCase() === "svg";
   }
   function copySvgSourceFromTextarea() {
-    if (inlineSvgRef && typeof inlineSvgRef.getSvgSource === 'function') {
+    if (inlineSvgRef && typeof inlineSvgRef.getSvgSource === "function") {
       // Get the updated SVG source with all color changes applied
       const updatedSource = inlineSvgRef.getSvgSource();
 
       try {
-        const tempEl = document.createElement('textarea');
+        const tempEl = document.createElement("textarea");
         tempEl.value = updatedSource || svgSource;
         document.body.appendChild(tempEl);
         tempEl.select();
-        document.execCommand('copy');
+        document.execCommand("copy");
         document.body.removeChild(tempEl);
         return true;
       } catch (err) {
@@ -157,91 +157,12 @@
       </div>
       <div class="right-column">
         <div class="logo-details fullscreen-details">
-          {#if isSvgLogo(logo) && logo.colors}
-            <div class="color-switcher-preview">
-              <span
-                class="color-circle color-reset"
-                title="Reset to theme color"
-                tabindex="0"
-                role="button"
-                aria-label="Reset to theme color"
-                style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
-                on:click|stopPropagation={() => {
-                      logo._activeColor = undefined;
-                      logo._activeSet = undefined; // Reset activeSet too
-                      setTimeout(updateSvgSource, 100); // Update SVG source after color reset
-                    }}
-                on:keydown|stopPropagation={(e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    logo._activeColor = undefined;
-                    logo._activeSet = undefined;
-                    setTimeout(updateSvgSource, 100);
-                  }
-                }}
-              >
-                <svg
-                  width="100%"
-                  height="100%"
-                  viewBox="0 0 800 800"
-                  xmlns="http://www.w3.org/2000/svg"
-                  ><path
-                    d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z"
-                    fill="#33363f"
-                  /></svg
-                >
-              </span>
-              {#if logo.sets}
-                {#each Object.entries(logo.sets) as [setName, setConfig], i}
-                  <span
-                    class="color-circle set-circle"
-                    title={`Color Set ${i + 1}: ${setName}`}
-                    tabindex="0"
-                    role="button"
-                    on:click|stopPropagation={() => {
-                      logo._activeColor = Object.values(logo.colors)[
-                        i % Object.keys(logo.colors).length
-                      ];
-                      logo._activeSet = setName;
-                      setTimeout(updateSvgSource, 100); // Update SVG source after color change
-                    }}
-                    on:keydown|stopPropagation={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        logo._activeColor = Object.values(logo.colors)[
-                          i % Object.keys(logo.colors).length
-                        ];
-                        logo._activeSet = setName;
-                        setTimeout(updateSvgSource, 100); // Update SVG source after color change
-                      }
-                    }}
-                    style="padding: 0; overflow: hidden;"
-                  >
-                    {@html generateColorSetCircle(logo.colors, setConfig)}
-                  </span>
-                {/each}
-              {:else}
-                {#each Object.entries(logo.colors) as [colorName, colorValue]}
-                  <span
-                    class="color-circle"
-                    title={colorName.replace("_", " ")}
-                    style={`background:${colorValue}`}
-                    tabindex="0"
-                    role="button"
-                    on:click|stopPropagation={() => {
-                      logo._activeColor = colorValue;
-                      logo._activeSet = undefined; // Clear any active set when setting individual color
-                      setTimeout(updateSvgSource, 100); // Update SVG source after color change
-                    }}
-                    on:keydown|stopPropagation={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        logo._activeColor = colorValue;
-                        logo._activeSet = undefined; // Clear any active set
-                        setTimeout(updateSvgSource, 100); // Update SVG source after color change
-                      }
-                    }}
-                  ></span>
-                {/each}
-              {/if}
-            </div>
+          {#if logo.colors}
+            <ColorSwitcher {logo} {theme} mode="standard" onSelect={(color, setName) => {
+              logo._activeColor = color;
+              logo._activeSet = setName;
+              setTimeout(updateSvgSource, 100);
+            }} />
           {/if}
           {#if logo.brand}
             <p><strong>Brand:</strong> <span>{logo.brand}</span></p>
@@ -304,20 +225,6 @@
     width: 100%;
   }
 
-  .set-circle {
-    background: var(--color-border);
-    color: var(--color-text);
-    font-size: 10px;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  :global(.dark-theme) .set-circle {
-    background: #444;
-    color: #eee;
-  }
   .preview-wrapper {
     position: relative;
     width: 100%;
@@ -406,7 +313,6 @@
     gap: 0.5rem;
   }
 
-
   .preview-actions-container {
     margin-top: 2rem;
     border-top: 1px solid var(--color-border);
@@ -417,7 +323,7 @@
       overflow-y: auto;
     }
 
-    .preview-body {
+    .preview_body {
       flex-direction: column;
       align-items: stretch;
       overflow: visible;
@@ -504,7 +410,6 @@
     overflow-y: auto;
   }
 
-
   .logo-details {
     margin-top: 1rem;
     color: var(--color-text);
@@ -520,4 +425,5 @@
   .logo-details span {
     color: var(--color-text);
   }
+
 </style>

src/components/CardMiddle.svelte

@@ -1,8 +1,8 @@
 <script>
-  import InlineSvg from './InlineSvg.svelte';
-  import Actions from './Actions.svelte';
-  import { getDefaultLogoColor } from '../utils/colorTheme.js';
-  import { generateColorSetCircle } from '../utils/colorCircles.js';
+  import InlineSvg from "./InlineSvg.svelte";
+  import Actions from "./Actions.svelte";
+  import ColorSwitcher from "./ColorSwitcher.svelte";
+  import { getDefaultLogoColor } from "../utils/colorTheme.js";
 
   export let logo;
   export let theme;
@@ -14,12 +14,12 @@
 
   function openPreview(logo) {
     // Navigate to preview page using router
-    const routerPath = `/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
+    const routerPath = `/preview/${encodeURIComponent(logo.name.replace(/\s+/g, "-").toLowerCase())}`;
     window.location.hash = routerPath;
   }
 
   function isSvgLogo(logo) {
-    return logo && logo.format && logo.format.toLowerCase() === 'svg';
+    return logo && logo.format && logo.format.toLowerCase() === "svg";
   }
 
   $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
@@ -32,17 +32,20 @@
     tabindex="0"
     aria-label="Preview {logo.name}"
     on:click={() => {
-      console.log('CardSquare: Logo clicked, calling openPreview');
+      console.log("CardSquare: Logo clicked, calling openPreview");
       openPreview(logo);
     }}
-    on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
+    on:keydown={(e) =>
+      (e.key === "Enter" || e.key === " ") && openPreview(logo)}
     style="cursor:pointer;"
   >
     {#if isSvgLogo(logo)}
-      {#key theme + (logo._activeColor || '')}
+      {#key theme + (logo._activeColor || "")}
         <InlineSvg
           path={logo.path}
-          color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
+          color={logo.colors
+            ? logo._activeColor || getLogoThemeColor(logo)
+            : undefined}
           colorConfig={logo.colors ? logo.colorConfig : undefined}
           targets={logo.targets}
           sets={logo.sets}
@@ -63,15 +66,22 @@
           class="brand-filter-btn"
           title="Filter by brand"
           on:click={() => {
-            console.log('CardMiddle: Filtering by brand:', logo.brand);
+            console.log("CardMiddle: Filtering by brand:", logo.brand);
             addBrand(logo.brand);
           }}
         >
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-            <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z" />
+            <path
+              stroke="currentColor"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z"
+            />
           </svg>
           {#if allLogos && allLogos.filter((l) => l.brand === logo.brand).length > 1}
-            <span class="brand-count">{allLogos.filter((l) => l.brand === logo.brand).length}</span>
+            <span class="brand-count"
+              >{allLogos.filter((l) => l.brand === logo.brand).length}</span
+            >
           {/if}
         </button>
       {/if}
@@ -79,61 +89,10 @@
     <div class="format-row">
       <span><strong>Format:</strong> {logo.format}</span>
       {#if logo.colors}
-        <div class="color-switcher-preview align-right">
-          <span
-            class="color-circle color-reset"
-            title="Reset to theme color"
-            tabindex="0"
-            role="button"
-            aria-label="Reset to theme color"
-            style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
-            on:click|stopPropagation={() => (logo._activeColor = undefined)}
-            on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}
-          >
-            <svg width="100%" height="100%" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z"
-                fill="#33363f"
-              />
-            </svg>
-          </span>
-          {#if logo.sets}
-            {#each Object.entries(logo.sets) as [setName, setConfig], i}
-              <span
-                class="color-circle set-circle"
-                title={`Color Set ${i + 1}: ${setName}`}
-                tabindex="0"
-                role="button"
-                on:click|stopPropagation={() => {
-                  logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
-                  logo._activeSet = setName;
-                }}
-                on:keydown|stopPropagation={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
-                    logo._activeSet = setName;
-                  }
-                }}
-                style="padding: 0; overflow: hidden;"
-              >
-                {@html generateColorSetCircle(logo.colors, setConfig)}
-              </span>
-            {/each}
-          {:else}
-            {#each Object.entries(logo.colors) as [colorName, colorValue], i}
-              <span
-                class="color-circle"
-                title={colorName.replace('_', ' ')}
-                style="background:{colorValue}"
-                tabindex="0"
-                role="button"
-                on:click|stopPropagation={() => (logo._activeColor = colorValue)}
-                on:keydown|stopPropagation={(e) =>
-                  (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorValue)}
-              ></span>
-            {/each}
-          {/if}
-        </div>
+        <ColorSwitcher {logo} {theme} mode="standard" onSelect={(color, setName) => {
+          logo._activeColor = color;
+          logo._activeSet = setName;
+        }} />
       {/if}
     </div>
     <div class="logo-actions">
@@ -148,7 +107,11 @@
     color: var(--color-text);
     border: 1px solid var(--color-border);
     border-radius: 8px;
-    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
+    transition:
+      background 0.2s,
+      color 0.2s,
+      transform 0.2s,
+      box-shadow 0.2s;
   }
 
   .logo-image {
@@ -180,7 +143,9 @@
     cursor: pointer;
     padding: 0.3em 0.8em 0.1em 0.3em;
     border-radius: 4px;
-    transition: background 0.2s, color 0.2s;
+    transition:
+      background 0.2s,
+      color 0.2s;
     z-index: 2;
     margin-left: 0.5em;
     position: relative;
@@ -211,4 +176,5 @@
     font-size: 1.2rem;
     line-height: 1.2;
   }
+
 </style>

src/components/CardSmall.svelte

@@ -1,8 +1,8 @@
 <script>
-  import InlineSvg from './InlineSvg.svelte';
-  import Actions from './Actions.svelte';
-  import { getDefaultLogoColor } from '../utils/colorTheme.js';
-  import { generateColorSetCircle } from '../utils/colorCircles.js';
+  import InlineSvg from "./InlineSvg.svelte";
+  import Actions from "./Actions.svelte";
+  import ColorSwitcher from "./ColorSwitcher.svelte";
+  import { getDefaultLogoColor } from "../utils/colorTheme.js";
 
   export let logo;
   export let theme;
@@ -14,12 +14,12 @@
 
   function openPreview(logo) {
     // Navigate to preview page using router
-    const routerPath = `/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
+    const routerPath = `/preview/${encodeURIComponent(logo.name.replace(/\s+/g, "-").toLowerCase())}`;
     window.location.hash = routerPath;
   }
 
   function isSvgLogo(logo) {
-    return logo && logo.format && logo.format.toLowerCase() === 'svg';
+    return logo && logo.format && logo.format.toLowerCase() === "svg";
   }
 
   $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
@@ -32,17 +32,20 @@
     tabindex="0"
     aria-label="Preview {logo.name}"
     on:click={() => {
-      console.log('CardList: Logo clicked, calling openPreview');
+      console.log("CardList: Logo clicked, calling openPreview");
       openPreview(logo);
     }}
-    on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
+    on:keydown={(e) =>
+      (e.key === "Enter" || e.key === " ") && openPreview(logo)}
     style="cursor:pointer;"
   >
     {#if isSvgLogo(logo)}
-      {#key theme + (logo._activeColor || '')}
+      {#key theme + (logo._activeColor || "")}
         <InlineSvg
           path={logo.path}
-          color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
+          color={logo.colors
+            ? logo._activeColor || getLogoThemeColor(logo)
+            : undefined}
           colorConfig={logo.colors ? logo.colorConfig : undefined}
           targets={logo.targets}
           sets={logo.sets}
@@ -63,15 +66,22 @@
           class="brand-filter-btn"
           title="Filter by brand"
           on:click={() => {
-            console.log('CardList: Filtering by brand:', logo.brand);
+            console.log("CardList: Filtering by brand:", logo.brand);
             addBrand(logo.brand);
           }}
         >
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-            <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z" />
+            <path
+              stroke="currentColor"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z"
+            />
           </svg>
           {#if allLogos && allLogos.filter((l) => l.brand === logo.brand).length > 1}
-            <span class="brand-count">{allLogos.filter((l) => l.brand === logo.brand).length}</span>
+            <span class="brand-count"
+              >{allLogos.filter((l) => l.brand === logo.brand).length}</span
+            >
           {/if}
         </button>
       {/if}
@@ -79,63 +89,10 @@
 
     <div class="logo-details">
       {#if logo.colors}
-        <div class="color-switcher-container">
-          <div class="color-switcher-preview">
-            <span
-              class="color-circle color-reset"
-              title="Reset to theme color"
-              tabindex="0"
-              role="button"
-              aria-label="Reset to theme color"
-              style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
-              on:click|stopPropagation={() => (logo._activeColor = undefined)}
-              on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}
-            >
-              <svg width="100%" height="100%" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z"
-                  fill="#33363f"
-                />
-              </svg>
-            </span>
-            {#if logo.sets}
-              {#each Object.entries(logo.sets) as [setName, setConfig], i}
-                <span
-                  class="color-circle set-circle"
-                  title={`Color Set ${i + 1}: ${setName}`}
-                  tabindex="0"
-                  role="button"
-                  on:click|stopPropagation={() => {
-                    logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
-                    logo._activeSet = setName;
-                  }}
-                  on:keydown|stopPropagation={(e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                      logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
-                      logo._activeSet = setName;
-                    }
-                  }}
-                  style="padding: 0; overflow: hidden;"
-                >
-                  {@html generateColorSetCircle(logo.colors, setConfig)}
-                </span>
-              {/each}
-            {:else}
-              {#each Object.entries(logo.colors) as [colorName, colorValue], i}
-                <span
-                  class="color-circle"
-                  title={colorName.replace('_', ' ')}
-                  style="background:{colorValue}"
-                  tabindex="0"
-                  role="button"
-                  on:click|stopPropagation={() => (logo._activeColor = colorValue)}
-                  on:keydown|stopPropagation={(e) =>
-                    (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorValue)}
-                ></span>
-              {/each}
-            {/if}
-          </div>
-        </div>
+        <ColorSwitcher {logo} {theme} mode="standard" onSelect={(color, setName) => {
+          logo._activeColor = color;
+          logo._activeSet = setName;
+        }} />
       {/if}
     </div>
 
@@ -211,10 +168,6 @@
     z-index: 20; /* Higher than the list item */
   }
 
-  /* Apply higher z-index to the dropdown menus */
-  /* :global(.logo-list-item .dropdown-menu) { */
-    /* z-index: 100000 !important;  */
-  /* } */
 
   .brand-filter-btn {
     background: none;
@@ -223,7 +176,9 @@
     cursor: pointer;
     padding: 0.2em 0.5em;
     border-radius: 4px;
-    transition: background 0.2s, color 0.2s;
+    transition:
+      background 0.2s,
+      color 0.2s;
     position: relative;
     display: flex;
     align-items: center;
@@ -279,5 +234,4 @@
   :global(.list-item:hover) {
     z-index: 2; /* Raise the z-index when hovered */
   }
-
 </style>

src/components/CardTiny.svelte

@@ -1,18 +1,19 @@
 <script>
-  import InlineSvg from './InlineSvg.svelte';
-  import { getDefaultLogoColor } from '../utils/colorTheme.js';
+  import InlineSvg from "./InlineSvg.svelte";
+  import { getDefaultLogoColor } from "../utils/colorTheme.js";
+  import ColorSwitcher from './ColorSwitcher.svelte';
 
   export let logo;
   export let theme;
 
   function openPreview(logo) {
     // Navigate to preview page using router
-    const routerPath = `/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
+    const routerPath = `/preview/${encodeURIComponent(logo.name.replace(/\s+/g, "-").toLowerCase())}`;
     window.location.hash = routerPath;
   }
 
   function handleClick() {
-    console.log('CardTiny: Logo clicked, calling openPreview');
+    console.log("CardTiny: Logo clicked, calling openPreview");
     openPreview(logo);
   }
 
@@ -24,10 +25,11 @@
   }
 
   function isSvgLogo(logo) {
-    return logo && logo.format && logo.format.toLowerCase() === 'svg';
+    return logo && logo.format && logo.format.toLowerCase() === "svg";
   }
 
   $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
+
 </script>
 
 <div
@@ -37,6 +39,7 @@
   role="button"
   tabindex="0"
   aria-label={`View ${logo.name} logo`}
+  style="position: relative;"
 >
   <div class="image-container">
     {#if isSvgLogo(logo)}
@@ -54,6 +57,12 @@
       <img src={logo.path} alt={logo.name} />
     {/if}
   </div>
+  {#if logo.colors}
+    <ColorSwitcher {logo} {theme} mode="compact" onSelect={(color, setName) => {
+      logo._activeColor = color;
+      logo._activeSet = setName;
+    }} />
+  {/if}
   <div class="name">{logo.name}</div>
 </div>
 
@@ -66,10 +75,16 @@
     border-radius: 8px;
     padding: 12px;
     cursor: pointer;
-    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
+    transition:
+      background 0.2s,
+      color 0.2s,
+      transform 0.2s,
+      box-shadow 0.2s;
     display: flex;
     flex-direction: column;
     gap: 8px;
+    position: relative; /* Ensure absolute children are positioned correctly */
+    overflow: visible;
   }
 
   .card-tiny:hover {
@@ -88,6 +103,7 @@
     align-items: center;
     justify-content: center;
     overflow: hidden;
+    position: relative; /* Needed for color chooser absolute positioning */
   }
 
   .image-container img {

src/components/ColorSwitcher.svelte

@@ -0,0 +1,168 @@
+<script>
+  import { generateColorSetCircle, getNoColorCircle } from '../utils/colorCircles.js';
+  import ColorsVariants from './ColorsVariants.svelte';
+  export let logo;
+  export let theme;
+  export let mode = 'standard'; // 'standard' or 'compact'
+  export let onSelect = (color, setName) => {};
+
+  let showDropdown = false;
+  let colorDropdownRef;
+
+  function handleCircleClick(color, setName = undefined, event) {
+    event?.stopPropagation();
+    onSelect(color, setName);
+    showDropdown = false;
+  }
+
+  function handleDropdownBlur(event) {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      showDropdown = false;
+    }
+  }
+
+  // Returns the SVG for the current color set for the chooser button in compact mode
+  function getCurrentColorCircle() {
+    if (logo.sets && logo._activeSet && logo.sets[logo._activeSet]) {
+      return generateColorSetCircle(logo.colors, logo.sets[logo._activeSet], 24);
+    }
+    return getNoColorCircle();
+  }
+
+  // Helper to check if a color/set is active
+  function isActive(color, setName) {
+    if (logo.sets && setName) {
+      return logo._activeSet === setName;
+    } else if (!logo.sets && color) {
+      return logo._activeColor === color;
+    } else if (!color && !setName) {
+      // Only active if both are strictly undefined, null, or empty
+      return (!logo._activeColor && !logo._activeSet) || (logo._activeColor === undefined && logo._activeSet === undefined);
+    }
+    return false;
+  }
+</script>
+
+{#if logo.colors}
+  {#if mode === 'compact'}
+    <div class="color-chooser-wrapper">
+      <span
+        class="color-circle {logo._activeSet ? '' : 'color-reset'}"
+        title="Choose color"
+        tabindex="0"
+        role="button"
+        aria-label="Choose logo color"
+        on:click|stopPropagation={() => (showDropdown = !showDropdown)}
+        on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (showDropdown = !showDropdown)}
+      >
+        {@html logo._activeSet && logo.sets && logo.sets[logo._activeSet]
+          ? generateColorSetCircle(logo.colors, logo.sets[logo._activeSet], 24)
+          : getNoColorCircle()}
+      </span>
+      {#if showDropdown}
+        <div
+          class="color-dropdown"
+          tabindex="-1"
+          bind:this={colorDropdownRef}
+          on:blur={handleDropdownBlur}
+        >
+          <div class="color-switcher-preview">
+            <span
+              class="color-circle color-reset"
+              class:active={isActive(undefined, undefined)}
+              title="Reset to theme color"
+              tabindex="0"
+              role="button"
+              aria-label="Reset to theme color"
+              on:click|stopPropagation={(e) => handleCircleClick(undefined, undefined, e)}
+              on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && handleCircleClick(undefined, undefined, e)}
+            >
+              {@html getNoColorCircle()}
+            </span>
+            {#if logo.sets}
+              <ColorsVariants sets={logo.sets} colors={logo.colors} activeSet={logo._activeSet} onSelect={(setName) => handleCircleClick(Object.values(logo.colors)[Object.keys(logo.sets).indexOf(setName) % Object.keys(logo.colors).length], setName)} />
+            {/if}
+          </div>
+        </div>
+      {/if}
+    </div>
+  {:else}
+    <div class="color-switcher-preview">
+      <span
+        class="color-circle color-reset"
+        class:active={isActive(undefined, undefined)}
+        title="Reset to theme color"
+        tabindex="0"
+        role="button"
+        aria-label="Reset to theme color"
+        on:click|stopPropagation={(e) => handleCircleClick(undefined, undefined, e)}
+        on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && handleCircleClick(undefined, undefined, e)}
+      >
+        {@html getNoColorCircle()}
+      </span>
+      {#if logo.sets}
+        <ColorsVariants sets={logo.sets} colors={logo.colors} activeSet={logo._activeSet} onSelect={(setName) => handleCircleClick(Object.values(logo.colors)[Object.keys(logo.sets).indexOf(setName) % Object.keys(logo.colors).length], setName)} />
+      {/if}
+    </div>
+  {/if}
+{/if}
+
+<style>
+  .color-chooser-wrapper {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    pointer-events: auto;
+  }
+  .color-circle {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 1px solid var(--color-border, #ddd);
+    cursor: pointer;
+    transition: transform 0.2s;
+    box-sizing: border-box;
+    display: inline-block;
+  }
+  .color-circle:hover {
+    transform: scale(1.1);
+  }
+  .color-circle.active {
+    box-shadow: 0 0 8px 7px rgba(70, 25, 194, 0.68);
+  }
+  .color-dropdown {
+    position: absolute;
+    bottom: 32px;
+    right: 0;
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    padding: 8px 10px 6px 10px;
+    display: flex;
+    flex-direction: row;
+    gap: 6px;
+    z-index: 100;
+    min-width: 120px;
+    flex-wrap: wrap;
+  }
+  .color-option {
+    border: 1px solid var(--color-border, #ddd);
+    margin: 0 2px 2px 0;
+  }
+  .color-reset {
+    background: none !important;
+    width: 24px;
+    height: 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+    border: none;
+  }
+</style>

src/components/ColorsVariants.svelte

@@ -0,0 +1,54 @@
+<script>
+  import { generateColorSetCircle } from '../utils/colorCircles.js';
+  export let sets = {};
+  export let colors = {};
+  export let activeSet = undefined;
+  export let onSelect = (setName) => {};
+</script>
+
+{#if sets && Object.keys(sets).length}
+  <div class="colors-variants-list">
+    {#each Object.entries(sets) as [setName, setConfig], i}
+      <span
+        class="color-circle set-circle"
+        class:active={activeSet === setName}
+        title={`Color Set ${i + 1}: ${setName}`}
+        tabindex="0"
+        role="button"
+        on:click|stopPropagation={() => onSelect(setName)}
+        on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && onSelect(setName)}
+        style="padding: 0; overflow: hidden;"
+      >
+        {@html generateColorSetCircle(colors, sets[setName], 24)}
+      </span>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .colors-variants-list {
+    display: flex;
+    gap: 0.4em;
+    align-items: center;
+    justify-content: center;
+  }
+  .color-circle {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 1px solid var(--color-border, #ddd);
+    cursor: pointer;
+    transition: transform 0.2s;
+    box-sizing: border-box;
+    display: inline-block;
+  }
+  .color-circle:hover {
+    transform: scale(1.1);
+  }
+  .color-circle.active {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-accent), 0 1px 4px rgba(0,0,0,0.12);
+    background: rgba(var(--color-accent-rgb, 70,25,194), 0.08);
+  }
+</style>