lilylet-live-editor 0.0.4

package/src/lib/components/Preview.svelte

@@ -0,0 +1,496 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { editorStore } from '$lib/stores/editor';
+	import Player from './Player.svelte';
+	import { tick } from 'svelte';
+
+	let svgContainer: HTMLDivElement;
+	let previewContainer: HTMLDivElement;
+	let cursorElement: HTMLDivElement;
+	let cursorStyle = '';
+	let lastRenderedSvg = '';
+	let resizeObserver: ResizeObserver | null = null;
+	let exportMenuOpen = false;
+
+	/**
+	 * Safely inject SVG content using DOMParser.
+	 * This extracts only the SVG element from the content, avoiding potential XSS vectors.
+	 */
+	function safelyInjectSvg(container: HTMLDivElement, svgString: string) {
+		// Parse the SVG string
+		const parser = new DOMParser();
+		const doc = parser.parseFromString(svgString, 'image/svg+xml');
+
+		// Check for parse errors
+		const parseError = doc.querySelector('parsererror');
+		if (parseError) {
+			console.error('SVG parse error:', parseError.textContent);
+			return;
+		}
+
+		// Get the SVG element
+		const svgElement = doc.querySelector('svg');
+		if (!svgElement) {
+			console.error('No SVG element found in content');
+			return;
+		}
+
+		// Clear container and append the sanitized SVG
+		container.innerHTML = '';
+		container.appendChild(document.importNode(svgElement, true));
+	}
+
+	$: if (svgContainer && $editorStore.svg && $editorStore.svg !== lastRenderedSvg) {
+		safelyInjectSvg(svgContainer, $editorStore.svg);
+		lastRenderedSvg = $editorStore.svg;
+	}
+
+	// Update cursor position when cursorElementId changes
+	$: if ($editorStore.cursorElementId && svgContainer) {
+		updateCursorPosition($editorStore.cursorElementId);
+	} else {
+		cursorStyle = 'display: none;';
+	}
+
+	async function updateCursorPosition(elementId: string) {
+		await tick(); // Ensure DOM is updated
+
+		// Use scoped query within svgContainer for safety
+		const noteElement = svgContainer?.querySelector(`#${CSS.escape(elementId)}`);
+		if (!noteElement || !svgContainer) {
+			cursorStyle = 'display: none;';
+			return;
+		}
+
+		// Find the parent system element to get proper height bounds
+		let systemElement = noteElement.closest('.system');
+		if (!systemElement) {
+			// Fallback: try to find staff
+			systemElement = noteElement.closest('.staff');
+		}
+
+		const svgRect = svgContainer.getBoundingClientRect();
+		const noteRect = noteElement.getBoundingClientRect();
+
+		// Calculate x position relative to SVG container
+		const x = noteRect.left - svgRect.left;
+
+		// Calculate y and height based on system/staff bounds
+		let top = 0;
+		let height = svgRect.height;
+
+		if (systemElement) {
+			const systemRect = systemElement.getBoundingClientRect();
+			top = systemRect.top - svgRect.top;
+			height = systemRect.height;
+		}
+
+		cursorStyle = `left: ${x}px; top: ${top}px; height: ${height}px; display: block;`;
+	}
+
+	function downloadFile(content: string, filename: string, mimeType: string) {
+		const blob = new Blob([content], { type: mimeType });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = filename;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	}
+
+	function exportSVG() {
+		if ($editorStore.svg) {
+			downloadFile($editorStore.svg, 'lilylet-score.svg', 'image/svg+xml');
+		}
+	}
+
+	function exportMEI() {
+		if ($editorStore.mei) {
+			downloadFile($editorStore.mei, 'lilylet-score.mei', 'application/xml');
+		}
+	}
+
+	function exportLilyPond() {
+		// TODO:
+		//if ($editorStore.code) {
+		//}
+	}
+
+	function toggleExportMenu() {
+		exportMenuOpen = !exportMenuOpen;
+	}
+
+	function closeExportMenu() {
+		exportMenuOpen = false;
+	}
+
+	function handleExport(type: string) {
+		switch (type) {
+			case 'svg':
+				exportSVG();
+				break;
+			case 'lilypond':
+				exportLilyPond();
+				break;
+			case 'mei':
+				exportMEI();
+				break;
+		}
+		closeExportMenu();
+	}
+
+	function handleContainerResize() {
+		if (!previewContainer) return;
+		const newWidth = previewContainer.clientWidth;
+		// Only update if significant change (more than 20px)
+		if (Math.abs(newWidth - $editorStore.previewWidth) > 20) {
+			editorStore.setPreviewWidth(newWidth);
+		}
+	}
+
+	onMount(() => {
+		if (previewContainer) {
+			// Set initial width
+			editorStore.setPreviewWidth(previewContainer.clientWidth);
+
+			// Set up ResizeObserver
+			resizeObserver = new ResizeObserver(() => {
+				handleContainerResize();
+			});
+			resizeObserver.observe(previewContainer);
+		}
+	});
+
+	onDestroy(() => {
+		if (resizeObserver) {
+			resizeObserver.disconnect();
+			resizeObserver = null;
+		}
+	});
+</script>
+
+<div class="preview-wrapper">
+	<div class="preview-header">
+		<span class="title">Preview</span>
+		{#if $editorStore.isRendering}
+			<span class="rendering">Rendering...</span>
+		{/if}
+		<div class="spacer"></div>
+		<div class="export-dropdown">
+			<button class="export-toggle" on:click={toggleExportMenu}>
+				Export ▾
+			</button>
+			{#if exportMenuOpen}
+				<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+				<div class="export-backdrop" on:click={closeExportMenu}></div>
+				<div class="export-menu">
+					<button
+						class="export-item"
+						on:click={() => handleExport('svg')}
+					>
+						SVG
+					</button>
+					<button
+						class="export-item"
+						on:click={() => handleExport('lilypond')}
+						disabled
+						title="Not implemented yet"
+					>
+						LilyPond (.ly)
+					</button>
+					<button
+						class="export-item"
+						disabled
+						title="Not implemented yet"
+					>
+						MusicXML
+					</button>
+					<button
+						class="export-item"
+						on:click={() => handleExport('mei')}
+						disabled={!$editorStore.mei}
+					>
+						MEI
+					</button>
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<div class="preview-container" bind:this={previewContainer}>
+		{#if !$editorStore.verovioReady}
+			<div class="loading-container">
+				<div class="loading-spinner">
+					<div class="spinner-ring"></div>
+					<div class="spinner-ring"></div>
+					<div class="spinner-ring"></div>
+				</div>
+				<p class="loading-text">Loading Verovio...</p>
+			</div>
+		{:else if $editorStore.error}
+			<div class="error-message">
+				<div class="error-title">Error</div>
+				<pre>{$editorStore.error}</pre>
+			</div>
+		{:else if $editorStore.svg}
+			<div class="svg-wrapper">
+				<div class="svg-container" bind:this={svgContainer}></div>
+				<div class="playback-cursor" bind:this={cursorElement} style={cursorStyle}></div>
+			</div>
+		{:else}
+			<div class="placeholder">
+				<p>Enter Lilylet code to see the rendered score</p>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Player controls at bottom -->
+	{#if $editorStore.svg && !$editorStore.error}
+		<Player />
+	{/if}
+</div>
+
+<style>
+	.preview-wrapper {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		background: #1e1e1e;
+	}
+
+	.preview-header {
+		padding: 8px 16px;
+		background: #252526;
+		border-bottom: 1px solid #1e1e1e;
+		display: flex;
+		align-items: center;
+		gap: 16px;
+	}
+
+	.title {
+		color: #cccccc;
+		font-size: 14px;
+		font-weight: 500;
+	}
+
+	.rendering {
+		color: #569cd6;
+		font-size: 12px;
+		animation: pulse 1s infinite;
+	}
+
+	@keyframes pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.5;
+		}
+	}
+
+	.preview-container {
+		flex: 1;
+		overflow: auto;
+		padding: 16px;
+		display: flex;
+		justify-content: center;
+		align-items: flex-start;
+	}
+
+	.svg-wrapper {
+		position: relative;
+	}
+
+	.svg-container {
+		background: white;
+		padding: 20px;
+		border-radius: 4px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+	}
+
+	.svg-container :global(svg) {
+		max-width: 100%;
+		height: auto;
+	}
+
+	.playback-cursor {
+		position: absolute;
+		width: 2px;
+		background: rgba(0, 122, 204, 0.8);
+		pointer-events: none;
+		z-index: 10;
+		display: none;
+	}
+
+	.error-message {
+		background: #5a1d1d;
+		border: 1px solid #be1100;
+		border-radius: 4px;
+		padding: 16px;
+		max-width: 600px;
+	}
+
+	.error-title {
+		color: #f48771;
+		font-weight: 600;
+		margin-bottom: 8px;
+	}
+
+	.error-message pre {
+		color: #d4d4d4;
+		font-size: 12px;
+		white-space: pre-wrap;
+		word-break: break-all;
+		margin: 0;
+	}
+
+	.placeholder {
+		color: #858585;
+		text-align: center;
+		padding: 40px;
+	}
+
+	.loading-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 60px;
+	}
+
+	.loading-spinner {
+		position: relative;
+		width: 60px;
+		height: 60px;
+	}
+
+	.spinner-ring {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		border: 3px solid transparent;
+		animation: spin 1.5s linear infinite;
+	}
+
+	.spinner-ring:nth-child(1) {
+		border-top-color: #569cd6;
+		animation-delay: 0s;
+	}
+
+	.spinner-ring:nth-child(2) {
+		width: 80%;
+		height: 80%;
+		top: 10%;
+		left: 10%;
+		border-right-color: #4ec9b0;
+		animation-delay: 0.15s;
+		animation-direction: reverse;
+	}
+
+	.spinner-ring:nth-child(3) {
+		width: 60%;
+		height: 60%;
+		top: 20%;
+		left: 20%;
+		border-bottom-color: #ce9178;
+		animation-delay: 0.3s;
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	.loading-text {
+		margin-top: 20px;
+		color: #858585;
+		font-size: 14px;
+		animation: pulse 1.5s ease-in-out infinite;
+	}
+
+	.spacer {
+		flex: 1;
+	}
+
+	.export-dropdown {
+		position: relative;
+	}
+
+	.export-toggle {
+		background: #0e639c;
+		color: #ffffff;
+		border: none;
+		padding: 4px 12px;
+		border-radius: 3px;
+		font-size: 12px;
+		cursor: pointer;
+		transition: background 0.2s;
+	}
+
+	.export-toggle:hover {
+		background: #1177bb;
+	}
+
+	.export-backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 99;
+	}
+
+	.export-menu {
+		position: absolute;
+		top: 100%;
+		right: 0;
+		margin-top: 4px;
+		background: #252526;
+		border: 1px solid #3c3c3c;
+		border-radius: 4px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+		min-width: 160px;
+		z-index: 100;
+		overflow: hidden;
+	}
+
+	.export-item {
+		display: block;
+		width: 100%;
+		padding: 8px 16px;
+		background: transparent;
+		border: none;
+		color: #cccccc;
+		font-size: 13px;
+		text-align: left;
+		cursor: pointer;
+		transition: background 0.15s;
+	}
+
+	.export-item:hover:not(:disabled) {
+		background: #094771;
+	}
+
+	.export-item:disabled {
+		color: #5a5a5a;
+		cursor: not-allowed;
+	}
+
+	.export-item:not(:last-child) {
+		border-bottom: 1px solid #3c3c3c;
+	}
+
+	.not-impl {
+		font-size: 11px;
+		color: #858585;
+		margin-left: 4px;
+	}
+</style>

package/src/lib/index.ts

@@ -0,0 +1,8 @@
+// Reexport components and utilities
+export { default as Editor } from './components/Editor.svelte';
+export { default as Preview } from './components/Preview.svelte';
+export { default as Player } from './components/Player.svelte';
+export * from './stores/editor';
+export * from './lilylet';
+export * from './utils/share';
+export * from './verovio/toolkit';

package/src/lib/lilylet/highlight.ts

@@ -0,0 +1,179 @@
+// Lilylet syntax highlighting for CodeMirror 6
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+import { StreamLanguage } from '@codemirror/language';
+
+// Define the Lilylet language
+const lilyletLanguage = StreamLanguage.define({
+	token(stream) {
+		// Skip whitespace
+		if (stream.eatSpace()) return null;
+
+		// Comments: % to end of line
+		if (stream.match('%')) {
+			stream.skipToEnd();
+			return 'comment';
+		}
+
+		// Bar line: |
+		if (stream.match('|')) {
+			return 'separator';
+		}
+
+		// Commands starting with backslash
+		if (stream.match(/^\\[a-zA-Z]+/)) {
+			const cmd = stream.current();
+			// Context commands
+			if (/^\\(key|time|clef|tempo|ottava|staff)$/.test(cmd)) {
+				return 'keyword';
+			}
+			// Mode commands
+			if (/^\\(major|minor)$/.test(cmd)) {
+				return 'typeName';
+			}
+			// Articulation and expressive commands
+			if (/^\\(trill|turn|mordent|prall|fermata|shortfermata|arpeggio)$/.test(cmd)) {
+				return 'labelName';
+			}
+			// Dynamic commands
+			if (/^\\(ppp|pp|p|mp|mf|f|ff|fff|sfz|rfz)$/.test(cmd)) {
+				return 'labelName';
+			}
+			// Hairpin commands
+			if (/^\\(<|>|!)$/.test(cmd)) {
+				return 'labelName';
+			}
+			// Stem direction
+			if (/^\\(stemUp|stemDown|stemNeutral)$/.test(cmd)) {
+				return 'operator';
+			}
+			// Tuplet
+			if (/^\\times$/.test(cmd)) {
+				return 'keyword';
+			}
+			// Repeat/tremolo
+			if (/^\\repeat$/.test(cmd)) {
+				return 'keyword';
+			}
+			// Grace note
+			if (/^\\grace$/.test(cmd)) {
+				return 'special';
+			}
+			// Rest marker
+			if (/^\\rest$/.test(cmd)) {
+				return 'comment';
+			}
+			// Pedal
+			if (/^\\(sustainOn|sustainOff|sostenutoOn|sostenutoOff|unaCorda|treCorde)$/.test(cmd)) {
+				return 'labelName';
+			}
+			// Other commands
+			return 'meta';
+		}
+
+		// Chord: < ... >
+		if (stream.match('<')) {
+			return 'bracket';
+		}
+		if (stream.match('>')) {
+			return 'bracket';
+		}
+
+		// Tuplet braces
+		if (stream.match('{')) {
+			return 'brace';
+		}
+		if (stream.match('}')) {
+			return 'brace';
+		}
+
+		// Quoted strings (for clef names, titles, etc.)
+		if (stream.match(/"[^"]*"/)) {
+			return 'string';
+		}
+
+		// Numbers (for time signature, duration, etc.)
+		if (stream.match(/^\d+/)) {
+			return 'number';
+		}
+
+		// Tie ~
+		if (stream.match('~')) {
+			return 'operator';
+		}
+
+		// Slur ( )
+		if (stream.match('(') || stream.match(')')) {
+			return 'paren';
+		}
+
+		// Beam [ ]
+		if (stream.match('[') || stream.match(']')) {
+			return 'squareBracket';
+		}
+
+		// Articulation marks: -. -! -_ -^ ->
+		if (stream.match(/^[-_^][.!_^>]/)) {
+			return 'labelName';
+		}
+
+		// Pitch names with optional accidentals and octave marks
+		// Pitch: c, d, e, f, g, a, b followed by optional s/f/ss/ff/! and '/,
+		if (stream.match(/^[a-g](s|f|ss|ff|!)?[',]*/)) {
+			return 'variableName';
+		}
+
+		// Rest types: r, s, R (full measure)
+		if (stream.match(/^[rsR]/)) {
+			return 'comment';
+		}
+
+		// Dots after duration
+		if (stream.match('.')) {
+			return 'punctuation';
+		}
+
+		// Tremolo marker :
+		if (stream.match(':')) {
+			return 'operator';
+		}
+
+		// Fraction for tuplet ratio
+		if (stream.match('/')) {
+			return 'operator';
+		}
+
+		// Skip any other character
+		stream.next();
+		return null;
+	}
+});
+
+// Custom highlight style for Lilylet
+const lilyletHighlightStyle = HighlightStyle.define([
+	{ tag: t.keyword, color: '#c678dd', fontWeight: 'bold' },           // \key, \time, \clef
+	{ tag: t.typeName, color: '#56b6c2' },                               // \major, \minor
+	{ tag: t.separator, color: '#e06c75', fontWeight: 'bold' },         // |
+	{ tag: t.comment, color: '#5c6370', fontStyle: 'italic' },          // %, r, s, R
+	{ tag: t.string, color: '#98c379' },                                 // "..."
+	{ tag: t.number, color: '#d19a66' },                                 // 4, 8, 16
+	{ tag: t.variableName, color: '#e06c75', fontWeight: 'bold' },      // c, d, e, f, g, a, b
+	{ tag: t.bracket, color: '#61afef' },                                // < >
+	{ tag: t.brace, color: '#c678dd' },                                  // { }
+	{ tag: t.paren, color: '#98c379' },                                  // ( )
+	{ tag: t.squareBracket, color: '#61afef' },                          // [ ]
+	{ tag: t.operator, color: '#56b6c2' },                               // ~, :, /
+	{ tag: t.labelName, color: '#98c379' },                              // articulations, dynamics
+	{ tag: t.special(t.keyword), color: '#c678dd', fontStyle: 'italic' }, // \grace
+	{ tag: t.meta, color: '#abb2bf' },                                   // other commands
+	{ tag: t.punctuation, color: '#abb2bf' },                            // .
+	{ tag: t.invalid, color: '#e06c75', textDecoration: 'underline' }   // Unknown
+]);
+
+// Export the language and highlighting
+export const lilylet = () => [
+	lilyletLanguage,
+	syntaxHighlighting(lilyletHighlightStyle)
+];
+
+export { lilyletLanguage, lilyletHighlightStyle };