lilylet-live-editor 0.0.4

package/src/lib/lilylet/index.ts

@@ -0,0 +1,93 @@
+// Lilylet conversion utilities
+import * as lilylet from '@k-l-lambda/lilylet';
+
+export type ConversionResult = {
+	success: true;
+	data: string;
+} | {
+	success: false;
+	error: string;
+};
+
+export type MEIResult = {
+	success: true;
+	mei: string;
+	measureCount: number;
+	staffCount: number;
+} | {
+	success: false;
+	error: string;
+};
+
+/**
+ * Convert Lilylet code to MEI XML
+ */
+export function lilyletToMEI(code: string): MEIResult {
+	try {
+		// Parse Lilylet code to LilyletDoc
+		const doc = lilylet.parseCode(code);
+
+		// Encode to MEI XML
+		const mei = lilylet.meiEncoder.encode(doc);
+
+		// Calculate total staff count
+		let staffCount = 1;
+		if (doc.measures && doc.measures.length > 0) {
+			const firstMeasure = doc.measures[0];
+			staffCount = firstMeasure.parts.reduce((total, part) => {
+				const maxStaff = part.voices.reduce((max, voice) => Math.max(max, voice.staff || 1), 1);
+				return total + maxStaff;
+			}, 0) || 1;
+		}
+
+		return {
+			success: true,
+			mei,
+			measureCount: doc.measures?.length || 1,
+			staffCount
+		};
+	} catch (error) {
+		const errorMessage = error instanceof Error ? error.message : String(error);
+		console.error('Lilylet parsing error:', error);
+		return { success: false, error: errorMessage };
+	}
+}
+
+/**
+ * Convert MusicXML to Lilylet code
+ */
+export function musicXmlToLilylet(xml: string): ConversionResult {
+	try {
+		const doc = lilylet.musicXmlDecoder.decode(xml);
+		const code = lilylet.serializeLilyletDoc(doc);
+		return { success: true, data: code };
+	} catch (error) {
+		const errorMessage = error instanceof Error ? error.message : String(error);
+		console.error('MusicXML conversion error:', error);
+		return { success: false, error: `MusicXML conversion failed: ${errorMessage}` };
+	}
+}
+
+/**
+ * Convert LilyPond to Lilylet code
+ * Note: lilypondDecoder requires optional @k-l-lambda/lotus dependency
+ */
+export function lilypondToLilylet(source: string): ConversionResult {
+	try {
+		// lilypondDecoder is not included in the main lilylet export
+		// It requires the optional @k-l-lambda/lotus dependency
+		const lilypondDecoder = (lilylet as any).lilypondDecoder;
+		if (!lilypondDecoder) {
+			return { success: false, error: 'LilyPond decoder not available (requires @k-l-lambda/lotus)' };
+		}
+		const doc = lilypondDecoder.decode(source);
+		const code = lilylet.serializeLilyletDoc(doc);
+		return { success: true, data: code };
+	} catch (error) {
+		const errorMessage = error instanceof Error ? error.message : String(error);
+		console.error('LilyPond conversion error:', error);
+		return { success: false, error: `LilyPond conversion failed: ${errorMessage}` };
+	}
+}
+
+export { lilylet } from './highlight';

package/src/lib/stores/editor.ts

@@ -0,0 +1,119 @@
+import { writable, derived, type Writable, type Readable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+const STORAGE_KEY = 'lilylet-editor-code';
+
+export interface LogEntry {
+	timestamp: Date;
+	level: 'info' | 'warning' | 'error';
+	message: string;
+}
+
+export interface EditorState {
+	code: string;
+	error: string | null;
+	mei: string | null;
+	svg: string | null;
+	pageCount: number;
+	isRendering: boolean;
+	verovioReady: boolean;
+	cursorElementId: string | null;
+	previewWidth: number;
+	logs: LogEntry[];
+	logsExpanded: boolean;
+}
+
+// Sample Lilylet code demonstrating basic syntax
+const defaultCode = `[title "Jesu, meine Freude"]
+[subtitle "BWV 610"]
+[composer "J.S. Bach"]
+
+\\staff "1" \\key c \\minor \\time 4/4 \\clef "treble" \\stemUp g'4 g f ef \\\\
+\\staff "1" \\stemDown ef16[ d ef8]~ ef16[ f ef d] c8[ d]~ d[ c] \\\\
+\\staff "2" \\clef "bass" c16[ b c8]~ c16[ b c g] a8[ g]~ g16[ g af ef] \\\\
+\\staff "3" \\clef "bass" r8 c,16[ d] ef[ d ef8]~ ef16[ a, b g] c[ b c8] | % 1
+
+\\staff "1" \\stemUp d2 c\\fermata \\\\
+\\staff "1" \\stemDown c8[ c4 b8] c8.[ \\staff "2" \\stemUp g16] \\staff "1" c[ b c d] \\\\
+\\staff "2" f,16[ ef f d] g[ af g f] ef[ d ef8]~ ef16[ f ef d] \\\\
+\\staff "3" r16 g,[ af f] g[ f g8] c,2 | % 2
+`;
+
+// Load saved code from localStorage (browser only)
+function loadSavedCode(): string {
+	if (browser) {
+		const saved = localStorage.getItem(STORAGE_KEY);
+		if (saved) return saved;
+	}
+	return defaultCode;
+}
+
+// Save code to localStorage (browser only)
+function saveCode(code: string): void {
+	if (browser) {
+		localStorage.setItem(STORAGE_KEY, code);
+	}
+}
+
+const initialState: EditorState = {
+	code: defaultCode, // Will be updated in browser
+	error: null,
+	mei: null,
+	svg: null,
+	pageCount: 0,
+	isRendering: false,
+	verovioReady: false,
+	cursorElementId: null,
+	previewWidth: 800,
+	logs: [],
+	logsExpanded: false
+};
+
+function createEditorStore() {
+	const { subscribe, set, update }: Writable<EditorState> = writable(initialState);
+
+	// Load saved code in browser
+	if (browser) {
+		const savedCode = loadSavedCode();
+		if (savedCode !== defaultCode) {
+			update((s) => ({ ...s, code: savedCode }));
+		}
+	}
+
+	return {
+		subscribe,
+		setCode: (code: string) => {
+			saveCode(code);
+			update((s) => ({ ...s, code }));
+		},
+		setMEI: (mei: string) => update((s) => ({ ...s, mei })),
+		setSVG: (svg: string, pageCount: number) =>
+			update((s) => ({ ...s, svg, pageCount, error: null })),
+		setError: (error: string) => update((s) => ({ ...s, error, svg: null })),
+		setRendering: (isRendering: boolean) => update((s) => ({ ...s, isRendering })),
+		setVerovioReady: (verovioReady: boolean) => update((s) => ({ ...s, verovioReady })),
+		setCursorElement: (cursorElementId: string | null) => update((s) => ({ ...s, cursorElementId })),
+		setPreviewWidth: (previewWidth: number) => update((s) => ({ ...s, previewWidth })),
+		addLog: (level: LogEntry['level'], message: string) => update((s) => {
+			const newLog: LogEntry = { timestamp: new Date(), level, message };
+			const newLogs = [...s.logs, newLog].slice(-100); // Keep last 100 logs
+			// Auto-expand on error
+			const shouldExpand = level === 'error' ? true : s.logsExpanded;
+			return { ...s, logs: newLogs, logsExpanded: shouldExpand };
+		}),
+		setLogsExpanded: (expanded: boolean) => update((s) => ({ ...s, logsExpanded: expanded })),
+		clearLogs: () => update((s) => ({ ...s, logs: [] })),
+		reset: () => set(initialState)
+	};
+}
+
+export const editorStore = createEditorStore();
+
+// Derived store for checking if we have valid output
+export const hasOutput: Readable<boolean> = derived(editorStore, ($state) => $state.svg !== null);
+
+// Derived store for checking if there's an error
+export const hasError: Readable<boolean> = derived(
+	editorStore,
+	($state) => $state.error !== null
+);

package/src/lib/utils/share.ts

@@ -0,0 +1,68 @@
+// URL sharing utilities with pako compression
+import pako from 'pako';
+import { Base64 } from 'js-base64';
+
+export interface ShareState {
+	code: string;
+}
+
+/**
+ * Encode the editor state into a compressed, URL-safe string
+ */
+export function encodeState(state: ShareState): string {
+	const json = JSON.stringify(state);
+	const compressed = pako.deflate(json, { level: 9 });
+	return Base64.fromUint8Array(compressed, true); // URL-safe base64
+}
+
+/**
+ * Decode a compressed, URL-safe string back into editor state
+ */
+export function decodeState(encoded: string): ShareState | null {
+	try {
+		const compressed = Base64.toUint8Array(encoded);
+		const json = pako.inflate(compressed, { to: 'string' });
+		return JSON.parse(json);
+	} catch (e) {
+		console.error('Failed to decode state:', e);
+		return null;
+	}
+}
+
+/**
+ * Get the current URL with the encoded state
+ */
+export function getShareUrl(state: ShareState): string {
+	const encoded = encodeState(state);
+	const url = new URL(window.location.href);
+	url.searchParams.set('code', encoded);
+	return url.toString();
+}
+
+/**
+ * Parse state from the current URL
+ */
+export function getStateFromUrl(): ShareState | null {
+	if (typeof window === 'undefined') return null;
+
+	const params = new URLSearchParams(window.location.search);
+	const encoded = params.get('code');
+
+	if (!encoded) return null;
+
+	return decodeState(encoded);
+}
+
+/**
+ * Copy the share URL to clipboard
+ */
+export async function copyShareUrl(state: ShareState): Promise<boolean> {
+	try {
+		const url = getShareUrl(state);
+		await navigator.clipboard.writeText(url);
+		return true;
+	} catch (e) {
+		console.error('Failed to copy URL:', e);
+		return false;
+	}
+}

package/src/lib/verovio/toolkit.ts

@@ -0,0 +1,83 @@
+// Verovio Toolkit wrapper for SvelteKit
+import type { VerovioToolkit } from 'verovio';
+
+let toolkit: VerovioToolkit | null = null;
+let initPromise: Promise<VerovioToolkit> | null = null;
+
+export interface RenderOptions {
+	pageWidth?: number;
+	pageHeight?: number;
+	scale?: number;
+	adjustPageHeight?: boolean;
+	breaks?: 'auto' | 'none' | 'encoded';
+}
+
+const defaultOptions: RenderOptions = {
+	pageWidth: 2100,
+	pageHeight: 2970,
+	scale: 40,
+	adjustPageHeight: true,
+	breaks: 'auto'
+};
+
+export async function initVerovio(): Promise<VerovioToolkit> {
+	if (toolkit) return toolkit;
+
+	if (initPromise) return initPromise;
+
+	initPromise = (async () => {
+		// Import the WASM module and toolkit separately for browser compatibility
+		const createVerovioModule = (await import('verovio/wasm')).default;
+		const { VerovioToolkit } = await import('verovio/esm');
+
+		// Initialize the WASM module
+		const VerovioModule = await createVerovioModule();
+
+		toolkit = new VerovioToolkit(VerovioModule);
+		toolkit.setOptions(defaultOptions);
+
+		console.log('Verovio initialized:', toolkit.getVersion());
+		return toolkit;
+	})();
+
+	return initPromise;
+}
+
+export function getToolkit(): VerovioToolkit | null {
+	return toolkit;
+}
+
+export async function renderMEI(
+	mei: string,
+	options?: Partial<RenderOptions>
+): Promise<{ svg: string; pageCount: number; midi?: string }> {
+	const tk = await initVerovio();
+
+	if (options) {
+		tk.setOptions({ ...defaultOptions, ...options });
+	}
+
+	const success = tk.loadData(mei);
+	if (!success) {
+		throw new Error('Failed to load MEI data');
+	}
+
+	const pageCount = tk.getPageCount();
+	const svg = tk.renderToSVG(1);
+
+	return { svg, pageCount };
+}
+
+export async function renderToMIDI(mei: string): Promise<string> {
+	const tk = await initVerovio();
+	tk.loadData(mei);
+	return tk.renderToMIDI();
+}
+
+export async function getElementsAtTime(millisec: number): Promise<{
+	notes: string[];
+	page: number;
+}> {
+	const tk = await initVerovio();
+	return tk.getElementsAtTime(millisec);
+}

package/src/modules.d.ts

@@ -0,0 +1,41 @@
+// Module declarations for packages without types
+declare module 'verovio' {
+	export interface VerovioToolkit {
+		loadData(data: string): boolean;
+		getPageCount(): number;
+		renderToSVG(page: number): string;
+		renderToMIDI(): string;
+		getElementsAtTime(millisec: number): { notes: string[]; page: number };
+		setOptions(options: any): void;
+		getVersion(): string;
+	}
+}
+
+declare module 'verovio/wasm' {
+	const createVerovioModule: () => Promise<any>;
+	export default createVerovioModule;
+}
+
+declare module 'verovio/esm' {
+	import type { VerovioToolkit as VT } from 'verovio';
+	export class VerovioToolkit implements VT {
+		constructor(module: any);
+		loadData(data: string): boolean;
+		getPageCount(): number;
+		renderToSVG(page: number): string;
+		renderToMIDI(): string;
+		getElementsAtTime(millisec: number): { notes: string[]; page: number };
+		setOptions(options: any): void;
+		getVersion(): string;
+	}
+}
+
+declare module '@k-l-lambda/music-widgets/dist/musicWidgetsBrowser.es.js' {
+	export const MidiAudio: {
+		loadPlugin(options: { soundfontUrl: string; api: string }): Promise<void>;
+		noteOn(channel: number, note: number | undefined, velocity: number | undefined, timestamp: number): void;
+		noteOff(channel: number, note: number | undefined, timestamp: number): void;
+		programChange(channel: number, program: number | undefined): void;
+		stopAllNotes?: () => void;
+	};
+}

package/src/routes/+layout.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+</script>
+
+<svelte:head>
+	<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎵</text></svg>" />
+</svelte:head>
+
+<slot />

package/src/routes/+layout.ts

@@ -0,0 +1,3 @@
+export const prerender = true;
+export const ssr = false;
+export const trailingSlash = 'never';