add cc1 visual layout

src/lib/components/layout/GenericLayout.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import rawLayout from "$lib/assets/layouts/cc1.yml"
   import {compileLayout} from "$lib/serialization/visual-layout"
   import type {VisualLayout, CompiledLayoutKey} from "$lib/serialization/visual-layout"
   import {changes, layout} from "$lib/serial/connection"
@@ -25,7 +24,8 @@
     console.assert(iconFontSize % 1 === 0, "Icon font size must be an integer")
   }
 
-  const layoutInfo = compileLayout(rawLayout as VisualLayout)
+  export let visualLayout: VisualLayout
+  $: layoutInfo = compileLayout(visualLayout)
 
   function getCenter(key: CompiledLayoutKey): [x: number, y: number] {
     return [key.pos[0] + key.size[0] / 2, key.pos[1] + key.size[1] / 2]

src/lib/components/layout/KeyboardKey.svelte

@@ -44,6 +44,7 @@
     {@const multiplier = 1.4}
     <g style:transform="rotateZ({key.rotate}rad) translate({innerMargin}px, {innerMargin}px)">
       <path
+        opacity="0.4"
         d="M{posX + p1},{posY} a{r1},{r1} 0 0,1 {-p1},{p1} l0,{-(p1 - p2)} a{r2},{r2} 0 0,0 {p2},{-p2}z"
       />
       <KeyText
@@ -83,6 +84,12 @@
     stroke: currentcolor;
   }
 
+  path {
+    fill: currentcolor;
+    fill-opacity: 0.2;
+    stroke-opacity: 0.6;
+  }
+
   g:hover {
     cursor: default;
     opacity: 0.6;

src/lib/components/layout/Layout.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import {serialPort} from "$lib/serial/connection"
-  import LayoutCC1 from "$lib/components/layout/LayoutCC1.svelte"
   import {action} from "$lib/title"
   import GenericLayout from "$lib/components/layout/GenericLayout.svelte"
   import {getContext} from "svelte"
   import type {Writable} from "svelte/store"
 
+  export let layoutOverride: "ONE" | "LITE" | undefined
+
   $: device = $serialPort?.device ?? "ONE"
   const activeLayer = getContext<Writable<number>>("active-layer")
 
@@ -14,6 +15,11 @@
     ["Primary Layer", "abc", 0],
     ["Function Layer", "function", 2],
   ] as const
+
+  const layouts = {
+    ONE: () => import("$lib/assets/layouts/one.yml"),
+    LITE: () => import("$lib/assets/layouts/lite.yml"),
+  }
 </script>
 
 <div class="container">
@@ -30,12 +36,9 @@
     {/each}
   </fieldset>
 
-  {#if device === "ONE"}
-    <GenericLayout />
-    <!-- <LayoutCC1 bind:activeLayer /> -->
-  {:else}
-    <p>Unsupported device ({$serialPort?.device})</p>
-  {/if}
+  {#await layouts[layoutOverride || device]() then { default: visualLayout }}
+    <GenericLayout {visualLayout} />
+  {/await}
 </div>
 
 <style lang="scss">