feat: add transparent terminal

src/App.svelte

@@ -51,7 +51,7 @@
                 </Modal>
                 <Card title="Get Started" titleCentered>
                     <div class="grid grid-cols-2 gap-4 self-stretch">
-                        <Button onClick={pickWorkspace} class="flex-1"
+                        <Button on:click={pickWorkspace} class="flex-1"
                             >Open workspace</Button
                         >
                         <p class="secondary flex-1 text-center">

src/lib/Button.svelte

@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
     export type ButtonContext =
         | {
-              large: boolean;
+              plain: boolean;
           }
         | undefined;
     export const buttonStyle = Symbol("button-style");
@@ -11,10 +11,10 @@
     import { twMerge } from "tailwind-merge";
     import { getContext, onMount } from "svelte";
     const context = getContext<ButtonContext | undefined>(buttonStyle);
-    export let onClick: () => void;
-    export let large = context?.large ?? false;
+    export let large = false;
     export let primary = false;
     export let disabled = false;
+    export let plain = context?.plain ?? false;
     let className = "";
     export { className as class };
 
@@ -46,11 +46,13 @@
         primary && "font-semibold",
         disabled &&
             "pointer-events-none bg-neutral-100 text-black/50 shadow-neutral-500/10 transition-colors dark:bg-neutral-800 dark:text-white/50",
+        plain &&
+            "self-baseline bg-transparent shadow-none dark:border-solid dark:border-white/20 dark:bg-transparent dark:active:bg-neutral-500/50",
         className,
     )}
     type="button"
     {disabled}
-    on:click={onClick}
+    on:click
 >
     <slot />
 </button>

src/lib/Card.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+    import { setContext } from "svelte";
     import { twMerge } from "tailwind-merge";
+    import Button, { buttonStyle, type ButtonContext } from "./Button.svelte";
+    import WithContext from "./WithContext.svelte";
     export let title: string | undefined = undefined;
     export let titleCentered = false;
     let className = "";
@@ -16,15 +19,17 @@
         {#if title}
             <h2
                 class={twMerge(
-                    "mb-1 text-xl font-bold",
+                    "mb-1 flex-1 text-xl font-bold",
                     titleCentered && "self-center",
                 )}
             >
                 {title}
             </h2>
         {/if}
-        <div class="flex-1">
-            <slot name="actions" />
+        <div class="flex flex-1 justify-end">
+            <WithContext ctx={buttonStyle} value={{ plain: true }}>
+                <slot name="actions" />
+            </WithContext>
         </div>
     </div>
     <slot />

src/lib/Console.svelte

@@ -14,6 +14,10 @@
     export const terminal = new Terminal({
         convertEol: true,
         fontFamily: "ui-monospace, monospace",
+        allowTransparency: true,
+        theme: {
+            background: "#00000000",
+        },
     });
     const fitAddon = new FitAddon();
     const webgl = new WebglAddon();
@@ -50,9 +54,18 @@
         terminal.open(term!);
         fitAddon.fit();
         resize.observe(term!);
+        terminal.focus();
+        const focused = document.activeElement;
+        terminal.focus();
+        if (focused instanceof HTMLElement) {
+            focused.focus();
+        }
     });
 </script>
 
 <div class="relative h-full w-full">
-    <div class="absolute inset-0 bg-black" bind:this={term} />
+    <div
+        class="absolute inset-0 overflow-hidden rounded-md bg-black bg-transparent p-2"
+        bind:this={term}
+    />
 </div>

src/lib/FirstTimeSetup.svelte

@@ -8,7 +8,7 @@
     import TransitionHeight from "./TransitionHeight.svelte";
     import type { Action } from "svelte/action";
     import type { TransitionConfig } from "svelte/transition";
-    import { downloadServer } from '../sidecar.ts';
+    import { downloadServer } from "../sidecar.ts";
 
     const dismiss = getContext<ctx.DismissContext>(ctx.dismiss);
     enum Page {
@@ -79,14 +79,14 @@
 <Divider />
 <div class="sticky bottom-0 flex justify-between gap-3 self-stretch px-6 py-3">
     <Button
-        onClick={() => {
+        on:click={() => {
             exit(0);
         }}
         large>Quit</Button
     >
     <div class="flex-1" />
     <Button
-        onClick={() => {
+        on:click={() => {
             page -= 1;
         }}
         large
@@ -95,19 +95,21 @@
         Back
     </Button>
     <Button
-        onClick={() => {
+        on:click={() => {
             if (page === Page.Welcome) {
                 page += 1;
                 if (!download) {
                     download = downloadServer((progress) => {
                         downloadProgress = progress;
-                    }).then(() => {
-                        downloadFinished = true;
-                        downloadProgress = 100;
-                    }).catch((err) => {
-                        error = err;
-                        downloadProgress = 0;
-                    });
+                    })
+                        .then(() => {
+                            downloadFinished = true;
+                            downloadProgress = 100;
+                        })
+                        .catch((err) => {
+                            error = err;
+                            downloadProgress = 0;
+                        });
                 }
             } else {
                 dismiss?.();

src/lib/WithContext.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import { setContext } from "svelte";
+
+    export let ctx: unknown;
+    export let value: unknown;
+
+    setContext(ctx, value);
+</script>
+
+<slot />

src/lib/WorkspaceView.svelte

@@ -104,13 +104,13 @@
                 <div class="grid grid-cols-2 grid-rows-2 gap-4 self-stretch">
                     <Button
                         large
-                        onClick={() => {
+                        on:click={() => {
                             Workspace.close();
                         }}
                     >
                         Close workspace
                     </Button>
-                    <Button large onClick={start}>Start simulator</Button>
+                    <Button large on:click={start}>Start simulator</Button>
                 </div>
             </Card>
             <Card title="LCD Display" class="">
@@ -119,7 +119,16 @@
         </div>
     </Pane>
     <Pane minSize={25}>
-        <Card title="Console" class="flex-1">
+        <Card title="Console" class="flex-1 gap-2">
+            <svelte:fragment slot="actions">
+                <Button
+                    on:click={() => {
+                        terminal.clear();
+                    }}
+                >
+                    Clear
+                </Button>
+            </svelte:fragment>
             <Console bind:terminal />
         </Card>
     </Pane>