refactor: port KeyboardButton and VirtualKeyboard to runes mode

src/App.svelte

@@ -35,7 +35,7 @@
   import DropOverlay from "./DropOverlay.svelte";
   import UpdateAvailable from "./UpdateAvailable.svelte";
   import VirtualKeyboard from "./VirtualKeyboard.svelte";
-  import { keyboards } from "./keyboard/Keyboard";
+  import { keyboards } from "./keyboard/Keyboard.svelte";
   import { Workbox } from "workbox-window";
   import { MathfieldElement } from "mathlive";
 
@@ -2732,7 +2732,7 @@ Please include a link to this sheet in the email to assist in debugging the prob
   >
     <VirtualKeyboard
       keyboards={keyboards}
-      on:customMatrix={handleCustomMatrix}
+      customMatrix={handleCustomMatrix}
     />
   </div>
 

src/KeyboardButton.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
-  import { onMount, createEventDispatcher } from "svelte";
+  import { onMount } from "svelte";
   import { onMobile, activeMathField } from "./stores";
   import { renderMathInElement } from "mathlive";
-  import type { Button } from "./keyboard/Keyboard";
+  import type { Button } from "./keyboard/Keyboard.svelte";
   import type { MathField } from "./cells/MathField";
 
-  export let button: Button;
-  export let flex = false;
+  interface Props {
+    button: Button;
+    flex?: boolean;
+    customMatrix?: (arg: {detail: {targetMathField: MathField}}) => void;
+  }
 
-  let buttonElement: HTMLButtonElement;
+  let { button, flex = false, customMatrix }: Props = $props();
 
-  const dispatchCustomMatrix = createEventDispatcher<{customMatrix: {targetMathField: MathField}}>();
+  let buttonElement: HTMLButtonElement;
 
   onMount(() => {
     renderMathInElement(buttonElement);
@@ -19,7 +22,7 @@
   function handleButtonClick() {
     const event = button.click($activeMathField);
     if (event === "customMatrix") {
-      dispatchCustomMatrix("customMatrix", {targetMathField: $activeMathField});
+      customMatrix?.( {detail: {targetMathField: $activeMathField}} );
     }
   }
 
@@ -54,7 +57,7 @@
   class:mobile={$onMobile}
   class:flex
   bind:this={buttonElement}
-  on:click={handleButtonClick}
+  onclick={handleButtonClick}
   style={button.fontSize ? `font-size: ${button.fontSize};` : ''}
   tabindex="-1"
 >

src/VirtualKeyboard.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
   import { onMobile } from "./stores";
-  import { type Keyboards, type Buttons, Button } from "./keyboard/Keyboard";
+  import { type Keyboards, type Buttons, Button } from "./keyboard/Keyboard.svelte";
   import KeyboardButton from './KeyboardButton.svelte';
+  import Self from './VirtualKeyboard.svelte';
+  import type { MathField } from "./cells/MathField";
 
+  interface Props {
+    keyboards: Keyboards;
+    nested?: boolean;
+    customMatrix?: (arg: {detail: {targetMathField: MathField}}) => void;
+  }
   
-  export let keyboards: Keyboards;
-  export let nested = false;
-
-  let content: Buttons | Keyboards;
+  let { keyboards, nested = false, customMatrix }: Props = $props();
 
-  $: tabs = keyboards.keyboards.map( item => item.tabText );
-  $: content = keyboards.keyboards[keyboards.selectedTab].content;
+  let tabs = $derived(keyboards.keyboards.map( item => item.tabText ));
+  let content = $derived(keyboards.keyboards[keyboards.selectedTab].content);
 
 </script>
 
@@ -111,7 +115,7 @@
         class:mobile={$onMobile}
         class:nested
         class:selected={keyboards.selectedTab === i}
-        on:click={() => (keyboards.selectedTab = i)}
+        onclick={() => (keyboards.selectedTab = i)}
         tabindex="-1"
       >
         {tab}
@@ -129,7 +133,7 @@
 
   <div class="tab-content" class:nested>
     {#if content.type === "Keyboards"}
-      <svelte:self keyboards={content} nested={true} />
+      <Self keyboards={content} nested={true} />
     {:else }
       {#each content.buttons as buttonRow}
         <div 
@@ -141,7 +145,7 @@
             {#if "click" in button}
               <KeyboardButton
                 button={button}
-                on:customMatrix
+                {customMatrix}
               />
             {:else}
               <div class="blank"></div>

src/keyboard/Keyboard.svelte.ts

@@ -452,7 +452,7 @@ const unitsKeyboards: Keyboards = {
 };
 
 
-export const keyboards: Keyboards = {
+export const keyboards: Keyboards = $state({
   selectedTab: 0,
   type: "Keyboards",
   keyboards: [
@@ -790,4 +790,4 @@ export const keyboards: Keyboards = {
       content: unitsKeyboards
     }
   ]
-};
+});