feat(themeCreator): add svelte theme creator

src/svelte-interface/components/CodeEditor.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<div>Code Editor Here</div>

src/svelte-interface/components/ColourPicker.css

@@ -1,8 +1,8 @@
-.dark {
-  div:has(> #rbgcp-wrapper) {
-    background: transparent !important;
-  }
+div:has(> #rbgcp-wrapper) {
+  background: transparent !important;
+}
 
+.dark {
   #rbgcp-wrapper {
     div[style="padding-top: 11px; position: relative;"] div {
       color: white !important;
@@ -31,11 +31,14 @@
       #rbgcp-radial-btn,
       #rbgcp-linear-btn {
         &[style*="background: white;"] {
-          background-color: #28282B !important;
+          background-color: #28282b !important;
         }
 
         svg {
-          path, g, polyline, circle {
+          path,
+          g,
+          polyline,
+          circle {
             stroke: white !important;
             fill: transparent !important;
           }
@@ -80,4 +83,4 @@
       background-color: #37373b !important;
     }
   }
-}
+}

src/svelte-interface/components/ColourPicker.svelte

@@ -5,14 +5,17 @@
   import { animate, spring } from 'motion';
   import { delay } from '@/seqta/utils/delay.ts'
 
-  const { hidePicker } = $props<{
-    hidePicker: () => void
+  const { hidePicker, standalone = false } = $props<{
+    hidePicker?: () => void,
+    standalone?: boolean
   }>();
 
   let background: HTMLDivElement;
   let content: HTMLDivElement;
 
   const closePicker = async () => {
+    if (standalone) return;
+
     animate(
       content,
       { scale: [1, 0.4], opacity: [1, 0] },
@@ -25,29 +28,36 @@
       { easing: [0.4, 0, 0.2, 1] }
     );
 
-
     await delay(400);
     hidePicker();
   }
-  
+
   onMount(() => {
+    if (standalone) return;
+
     animate(
       background,
       { opacity: [0, 1] },
       { duration: 0.3, easing: [0.4, 0, 0.2, 1] }
     );
-  
+
     animate(
       content,
       { scale: [0.4, 1], opacity: [0, 1] },
       { easing: spring({ stiffness: 400, damping: 30 }) }
     );
 
-    document.addEventListener('keydown', (e) => {
+    const handleEscapeKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         closePicker();
       }
-    });
+    };
+
+    document.addEventListener('keydown', handleEscapeKey);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
   });
 
   function handleBackgroundClick(event: MouseEvent) {
@@ -57,17 +67,23 @@
   }
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  bind:this={background}
-  class="absolute top-0 left-0 z-50 flex items-center justify-center w-full h-full cursor-pointer bg-black/20"
-  onclick={handleBackgroundClick}
-  onkeydown={(e) => { e.key === 'Enter' && handleBackgroundClick }}
->
-  <div
-    bind:this={content}
-    class="h-auto p-4 bg-white border shadow-lg cursor-auto rounded-xl dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
-  >
+{#if standalone}
+  <div class="h-auto rounded-xl overflow-clip">
     <ReactAdapter el={ColourPicker} />
   </div>
-</div>
+{:else}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={background}
+    class="absolute top-0 left-0 z-50 flex items-center justify-center w-full h-full cursor-pointer bg-black/20"
+    onclick={handleBackgroundClick}
+    onkeydown={(e) => { e.key === 'Enter' && handleBackgroundClick }}
+  >
+    <div
+      bind:this={content}
+      class="h-auto p-4 bg-white border shadow-lg cursor-auto rounded-xl dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
+    >
+      <ReactAdapter el={ColourPicker} />
+    </div>
+  </div>
+{/if}

src/svelte-interface/components/themeCreator/divider.svelte

@@ -0,0 +1,3 @@
+<script lang="ts"></script>
+
+<div class='w-full h-0.5 my-4 bg-zinc-200 dark:bg-zinc-700'></div>