feat: multi-purpose site

feat: editor
feat: plugin editor

src/lib/charrecorder/TrackChords.svelte

@@ -5,21 +5,21 @@
   import { ChordsReplayPlugin } from "./core/plugins/chords.js";
   import type { ReplayPlayer } from "./core/player.js";
 
-  const player: ReplayPlayer | undefined = getContext("replay");
+  const player: { player: ReplayPlayer | undefined } = getContext("replay");
 
   let {
     chords = $bindable([]),
     count = 1,
   }: {
     chords: InferredChord[];
-    count: number;
+    count?: number;
   } = $props();
 
   if (browser) {
     $effect(() => {
-      if (!player) return;
+      if (!player.player) return;
       const tracker = new ChordsReplayPlugin();
-      tracker.register(player);
+      tracker.register(player.player);
       const unsubscribe = tracker.subscribe((value) => {
         chords = value.slice(-count);
       });

src/lib/charrecorder/TrackRollingWpm.svelte

@@ -3,14 +3,14 @@
   import { RollingWpmReplayPlugin } from "./core/plugins/rolling-wpm";
   import type { ReplayPlayer } from "./core/player";
 
-  const player: ReplayPlayer | undefined = getContext("replay");
+  const player: { player: ReplayPlayer | undefined } = getContext("replay");
 
   let { wpm = $bindable(0) } = $props();
 
   $effect(() => {
-    if (!player) return;
+    if (!player.player) return;
     const tracker = new RollingWpmReplayPlugin();
-    tracker.register(player);
+    tracker.register(player.player);
     const unsubscribe = tracker.subscribe((value) => {
       wpm = value;
     });

src/lib/popup.ts

@@ -10,6 +10,7 @@ export const popup: Action<HTMLButtonElement, Component> = (
   let target: HTMLElement | undefined;
   const edit = tippy(node, {
     interactive: true,
+    placement: "right",
     trigger: "click",
     onShow(instance) {
       target = instance.popper.querySelector(".tippy-content") as HTMLElement;