Refactor: Extract core logic, data models, MIDI, and P2P functionality into a new @notater/core package.

Author: mreshank

apps/web/package-lock.json

@@ -31,7 +31,7 @@
     "jszip": "^3.10.1",
     "lucide-react": "^0.563.0",
     "next": "16.1.4",
-    "notater": "0.1.1",
+    "@notater/core": "workspace:*",
     "peerjs": "^1.5.5",
     "react": "19.2.3",
     "react-dom": "19.2.3",

apps/web/package.json

@@ -1,12 +1,12 @@
 
 import { useState } from "react";
-import { p2p } from "@/lib/p2p";
+import { p2p, type Collaborator } from "@notater/core";
 import { Copy, Check, Share2, Radio, Users, Loader2, Wifi } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import { toast } from "sonner";
 import { useModal } from "./ui/ModalProvider";
 import { useUser } from "@clerk/nextjs";
-import { useStore, type Collaborator } from "@/lib/store";
+import { useStore } from "@/lib/store";
 
 const AVATAR_COLORS = [
     "bg-red-500", "bg-orange-500", "bg-amber-500", "bg-yellow-500",

apps/web/src/components/CollabMenu.tsx

@@ -2,7 +2,7 @@
 import { useState, useEffect, useRef } from "react";
 import { motion } from "framer-motion";
 import { useStore } from "@/lib/store";
-import { playDrum, DrumType, DRUM_TYPES } from "@/lib/audio/drums";
+import { playDrum, DrumType, DRUM_TYPES } from "@notater/core";
 // import { useToast } from "./ui/ToastProvider";
 
 // Simple drum labels

apps/web/src/components/DrumRoll.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useState, useEffect, useCallback, useRef } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { playDrum, DrumType, DRUM_TYPES, setDrumKit, DrumKit, DRUM_KITS } from "@/lib/audio/drums";
+import { playDrum, DrumType, DRUM_TYPES, setDrumKit, DrumKit, DRUM_KITS } from "@notater/core";
 import { useStore } from "@/lib/store";
 import { LucideIcon, Circle, Triangle, Square, Hexagon, Octagon, Star, Disc, Zap, Save, Trash2, X, Sparkles, Loader2 } from "lucide-react";
 import { useToast } from "./ui/ToastProvider";

apps/web/src/components/Drums.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { useStore } from "@/lib/store";
-import { SynthPreset } from "@/lib/audio/synth";
-import { DRUM_KITS } from "@/lib/audio/drums";
+import { DRUM_KITS, SynthPreset } from "@notater/core";
 import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Piano, Drum } from "lucide-react";

apps/web/src/components/InstrumentSelect.tsx

@@ -1,6 +1,6 @@
 import { useRef, useEffect, useState, useMemo } from "react";
 import { useStore } from "@/lib/store";
-import { getDrumFromPitch } from "@/lib/audio";
+import { getDrumFromPitch } from "@notater/core";
 import { motion, AnimatePresence } from "framer-motion";
 import { Music, Layers, Grid3X3, Eraser, ChevronsLeftRight, MousePointer2, Pencil, Trash2 } from "lucide-react";
 import { InstrumentSelect } from "./InstrumentSelect";

apps/web/src/components/PianoRoll.tsx

@@ -1,7 +1,8 @@
+"use client";
 import { useState, useRef, useEffect } from "react";
 import { useStore } from "@/lib/store";
 import { useProjects } from "@/lib/db-hooks";
-import { exportProjectPackage, importProjectPackage } from "@/lib/sync";
+import { db, saveProject, getProject, exportProjectPackage, importProjectPackage } from "@notater/core";
 import { pushProjectToCloud, pullProjectsFromCloud } from "@/lib/cloud-sync";
 import { loginToGoogle, logoutFromGoogle, listDriveProjects, downloadFromDrive, syncProjectToDrive } from "@/lib/drive";
 import { motion, AnimatePresence } from "framer-motion";
@@ -96,8 +97,8 @@ export function ProjectControl() {
     const handleSyncPush = async () => {
         try {
             await saveProject(); // Save local first
-            const db = await import("@/lib/db");
-            const dbProject = await db.getProject(project.id);
+            await saveProject(); // Save local first
+            const dbProject = await getProject(project.id);
             if (dbProject) {
                 await pushProjectToCloud(dbProject);
                 success("Project pushed to cloud!");
@@ -141,7 +142,8 @@ export function ProjectControl() {
         try {
             setIsDriveSyncing(true);
             await saveProject(); // Save local
-            const projectData = await import("@/lib/db").then(m => m.getProject(project.id));
+            await saveProject(); // Save local
+            const projectData = await getProject(project.id);
             if (projectData) {
                 await syncProjectToDrive(projectData);
                 success("Synced to 'Notater Projects' in Drive!");

apps/web/src/components/ProjectControl.tsx

@@ -1,72 +1,24 @@
-
 import { useEffect } from "react";
 import { useStore } from "@/lib/store";
-
-// Map MIDI note numbers to Note names
-const noteMap = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
-
-function midiToNote(midi: number) {
-    const octave = Math.floor(midi / 12) - 1;
-    const note = noteMap[midi % 12];
-    return `${note}${octave}`;
-}
+import { Utils } from "@notater/core";
 
 export function useMidi() {
-    // We access the synth via the store's audio engine reference if possible,
-    // but the store keeps audio logic encapsulated. 
-    // Ideally, we add a `triggerNote` action to the store or access the exported synth.
-    // The previous implementation had `globalSynth` exported from `lib/audio/index.ts`?
-    // Let's check imports. `lib/store.ts` imports `createSynth` but `globalSynth` is lazy.
-    
-    // Actually, `store.ts` has `setSynthPreset` but maybe not direct trigger actions exposed appropriately for real-time play 
-    // without React overhead.
-    
-    // For low latency, direct access is better.
-    // Let's assume we can import `globalSynth` or use a store action.
-    
-    // If I use `useStore` actions, it might trigger state updates which is fine for UI but maybe slow for audio?
-    // Not necessarily.
-    
-    // However, `lib/audio/index.ts` exports `globalSynth` variable? 
-    // Let's verify. If not, I'll update store to handle "noteOn" / "noteOff".
-    
     useEffect(() => {
-        if (!navigator.requestMIDIAccess) return;
-
-        const handleMidiMessage = (e: Event) => {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const event = e as any; // Cast to any because WebMIDI types are not standard in this env
-            if (!event.data) return;
-
-            const [command, note, velocity] = event.data;
-            
-            // Note On
-            if (command === 144 && velocity > 0) {
-                const noteName = midiToNote(note);
-                // Trigger Store Action
-                useStore.getState().triggerAttack(noteName);
-            }
-            
-            // Note Off
-            if (command === 128 || (command === 144 && velocity === 0)) {
-                 const noteName = midiToNote(note);
-                 useStore.getState().triggerRelease(noteName);
+        // Initialize Core MIDI Manager
+        const midi = Utils.midiManager;
+        midi.initialize();
+
+        // Set Handler to trigger Store Actions
+        midi.setHandler({
+            onNoteOn: (note, velocity) => {
+                useStore.getState().triggerAttack(note);
+            },
+            onNoteOff: (note) => {
+                useStore.getState().triggerRelease(note);
             }
-        };
-
-        navigator.requestMIDIAccess().then((access) => {
-            const inputs = access.inputs.values();
-            for (const input of inputs) {
-                input.onmidimessage = handleMidiMessage;
-            }
-
-            access.onstatechange = (e: Event) => {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const event = e as any;
-                // creating/removing connections
-                 console.log(event.port.name, event.port.state, event.port.connection);
-            };
         });
 
+        // Cleanup not strictly necessary for singleton, but good practice if we had unmount logic
+        // For now, we leave the handler attached or allow it to be overwritten.
     }, []);
 }

apps/web/src/hooks/useMidi.ts

@@ -1,4 +1,4 @@
-import { StoredProject } from "./db";
+import { StoredProject } from "@notater/core";
 import { PutBlobResult } from "@vercel/blob";
 
 // Simple sync hook (placeholder for future expansion)
@@ -65,7 +65,7 @@ export async function pullProjectsFromCloud(): Promise<StoredProject[]> {
 export async function saveAndPushToCloud(currentProjectId: string, options?: { keepalive?: boolean }) {
     // We dynamically import db to avoid server-side issues (though this runs on client)
     try {
-        const db = await import("./db");
+        const db = await import("@notater/core");
         // We assume the store has already saved to DB via persistence, 
         // but to be safe we might want to trigger a save. 
         // However, useStore.getState().saveProject() is a hook function usually.