added live-editor link.

app.py

@@ -350,6 +350,11 @@ def build_head ():
 		# the mount/bridge script that wires it to the hidden #ls-editor-state textbox.
 		os.path.join(vendor, 'lyl-editor.bundle.js'),
 		os.path.join(WEB_DIR, 'lyl-editor-mount.js'),
+		# pako (deflate) + js-base64: used by the "Open in live-editor" share link to
+		# compress+url-safe-base64 the editor text into a ?code= param, matching
+		# lilylet-live-editor's share.ts encoding exactly. Expose window.pako/Base64.
+		os.path.join(vendor, 'pako_deflate.min.js'),
+		os.path.join(vendor, 'js-base64.js'),
 		# computes --ls-fill-h so the bottom Score List | editor row fills the height
 		# left under Compose + Logs (robust against Gradio's flex-nesting quirks).
 		os.path.join(WEB_DIR, 'layout-fit.js'),
@@ -510,13 +515,62 @@ function () {
 }
 '''
 
+# Open the current editor text in lilylet-live-editor. We compress the text exactly
+# as the editor's share.ts does — JSON.stringify({code}) -> pako.deflate(level 9) ->
+# URL-safe base64 — and put it in ?code=<...>, then open the deployed editor in a new
+# tab. window.pako / window.Base64 come from the vendored UMD bundles (build_head).
+# Reads the text from the hidden #ls-editor-state <textarea> (the canonical editor
+# value). No-op with a hint if empty or the libs failed to load.
+_LIVE_EDITOR_URL = 'https://k-l-lambda.github.io/lilylet-live-editor/'
+_JS_LIVE_EDITOR = '''
+function () {
+	const flash = (msg, ok) => {
+		const btn = document.getElementById('ls-live-btn');
+		if (!btn) return;
+		let hint = document.getElementById('ls-share-hint');
+		if (!hint) {
+			hint = document.createElement('span');
+			hint.id = 'ls-share-hint';
+			hint.className = 'ls-share-hint';
+			const sb = document.getElementById('ls-share-btn');
+			(sb || btn).insertAdjacentElement('afterend', hint);
+		}
+		hint.textContent = msg;
+		hint.classList.toggle('ls-share-err', !ok);
+		hint.classList.add('show');
+		clearTimeout(hint._t);
+		hint._t = setTimeout(() => hint.classList.remove('show'), 2200);
+	};
+	try {
+		const ta = document.querySelector('#ls-editor-state textarea');
+		const code = ta && ta.value;
+		if (!code || !code.trim()) { flash('Editor is empty', false); return []; }
+		if (!window.pako || !window.Base64) { flash('Encoder not loaded', false); return []; }
+		const json = JSON.stringify({ code: code });
+		const compressed = window.pako.deflate(json, { level: 9 });
+		const encoded = window.Base64.fromUint8Array(compressed, true);   // URL-safe
+		const url = '%s' + '?code=' + encoded;
+		window.open(url, '_blank', 'noopener');
+	} catch (e) {
+		flash('Could not build link', false);
+	}
+	return [];
+}
+''' % _LIVE_EDITOR_URL
+
+
 # Render the editor text to SVG. The text is passed in by Gradio as the event's
 # input value (the hidden #ls-editor-state textbox, kept in sync with the embedded
 # CodeMirror editor) — taking the value as an argument gives the full text directly,
-# no DOM scraping needed.
+# no DOM scraping needed. Also toggles the "Open in live-editor" button: shown only
+# when the editor has non-empty text (the link needs content to encode).
 _JS_RENDER = '''
 function (text) {
 	if (window.LilyScore) window.LilyScore.render(text || '');
+	try {
+		const live = document.getElementById('ls-live-btn');
+		if (live) live.classList.toggle('ls-hidden', !(text && text.trim()));
+	} catch (e) {}
 	return [];
 }
 '''
@@ -747,12 +801,19 @@ def build_ui ():
 					with gr.Column(scale=5, elem_id='editor-col'):
 						with gr.Group():
 							gr.Markdown('## Lilylet editor')
-							# Share button: copies the current deep-link URL (#score=<file>)
-							# to the clipboard. js-only handler (_JS_SHARE) — see its comment
-							# for the iframe URL/clipboard caveats. A transient hint span next
-							# to it shows the copy result.
-							share_btn = gr.Button('🔗 Share link', elem_id='ls-share-btn',
-								size='sm', scale=0, min_width=110)
+							with gr.Row(elem_id='ls-editor-actions'):
+								# Share button: copies the current deep-link URL (#score=<file>)
+								# to the clipboard. js-only handler (_JS_SHARE) — see its comment
+								# for the iframe URL/clipboard caveats. A transient hint span next
+								# to it shows the copy result.
+								share_btn = gr.Button('🔗 Share link', elem_id='ls-share-btn',
+									size='sm', scale=0, min_width=110)
+								# Open the current editor text in lilylet-live-editor: builds a
+								# ?code=<pako+base64> URL (matching the editor's share.ts) and
+								# opens it in a new tab. Hidden via CSS until the editor has text
+								# (toggled by _JS_RENDER, which receives the full text each change).
+								live_btn = gr.Button('🎹 Open in live-editor', elem_id='ls-live-btn',
+									size='sm', scale=0, min_width=150, elem_classes=['ls-hidden'])
 							# Our own CodeMirror 6 editor (lyl-editor.bundle.js) mounts into
 							# this div and bridges to the hidden textbox below — Gradio's
 							# gr.Code can't be syntax-highlighted (its CM is sealed), so we
@@ -813,6 +874,8 @@ def build_ui ():
 		# Share: copy the current deep-link URL (the #score hash kept current by the
 		# select listener above) to the clipboard. js-only — see _JS_SHARE.
 		share_btn.click(None, inputs=None, outputs=None, js=_JS_SHARE)
+		# Open in live-editor: encode the editor text into a ?code= URL and open it.
+		live_btn.click(None, inputs=None, outputs=None, js=_JS_LIVE_EDITOR)
 
 	return demo
 

web/lyl-editor.css

@@ -31,18 +31,28 @@
 	outline: none;
 }
 
-/* Share button: a compact, unobtrusive button under the "Lilylet editor" title. */
-#ls-share-btn {
+/* Editor action buttons row (Share link + Open in live-editor) under the title. */
+#ls-editor-actions {
+	flex: 0 0 auto;
+	gap: 6px;
+	align-items: center;
+	margin: 0 0 6px 2px;
+}
+
+/* Share / live-editor buttons: compact and unobtrusive. */
+#ls-share-btn,
+#ls-live-btn {
 	flex: 0 0 auto;
 	width: auto;
 	min-width: 0;
-	align-self: flex-start;
-	margin: 0 0 6px 2px;
 	font-size: 12px;
 	padding: 3px 10px;
 }
 
-/* Transient "Link copied!" hint shown beside the share button. Fades in on .show. */
+/* "Open in live-editor" is hidden until the editor has content (toggled in JS). */
+#ls-live-btn.ls-hidden { display: none !important; }
+
+/* Transient "Link copied!" hint shown beside the buttons. Fades in on .show. */
 .ls-share-hint {
 	display: inline-block;
 	margin-left: 8px;

web/vendor/js-base64.js

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cc4803fc4f373cbbeecac84bad8ccfefe791062191a6675141f7df870652989f
+size 13006

web/vendor/pako_deflate.min.js

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9429785d1e7f805d46640c4155957fd0f286144dec05cea09f6f2eaa646adb21
+size 27876