added share link.

app.py

@@ -450,6 +450,66 @@ function (value) {
 }
 '''
 
+# Share button: copy the current deep-link URL to the clipboard and flash a hint.
+#
+# iframe notes (this app is embedded in a cross-origin iframe on HF Spaces):
+#  - location.href ALWAYS reads THIS frame's own document URL — the Gradio app's
+#    direct URL incl. the #score=<file> hash — even inside a cross-origin iframe.
+#    The same-origin policy only blocks reading window.parent/window.top.location,
+#    not your own frame's. So this is exactly the shareable deep-link; the outer
+#    huggingface.co/spaces URL is both unreadable AND wrong (it has no hash).
+#  - navigator.clipboard.writeText may be blocked by Permissions-Policy in a
+#    cross-origin iframe (needs allow="clipboard-write", which the HF embed may not
+#    grant). So we try the async Clipboard API first and fall back to a hidden
+#    <textarea> + document.execCommand('copy'), which works from a user gesture.
+_JS_SHARE = '''
+function () {
+	const url = location.href;
+	const flash = (msg, ok) => {
+		const btn = document.getElementById('ls-share-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';
+			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);
+	};
+	// No score selected yet -> no #score= hash; the bare URL isn't a useful share link.
+	if (!/(?:^#|&|#)score=/.test(location.hash || '')) {
+		flash('Select a score first', false);
+		return [];
+	}
+	const fallback = () => {
+		try {
+			const ta = document.createElement('textarea');
+			ta.value = url; ta.style.position = 'fixed'; ta.style.opacity = '0';
+			document.body.appendChild(ta); ta.focus(); ta.select();
+			const ok = document.execCommand('copy');
+			document.body.removeChild(ta);
+			flash(ok ? 'Link copied!' : 'Copy failed — select & copy manually', ok);
+		} catch (e) {
+			flash('Copy failed — select & copy manually', false);
+		}
+	};
+	try {
+		if (navigator.clipboard && navigator.clipboard.writeText) {
+			navigator.clipboard.writeText(url).then(
+				() => flash('Link copied!', true),
+				() => fallback()
+			);
+		} else { fallback(); }
+	} catch (e) { fallback(); }
+	return [];
+}
+'''
+
 # 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,
@@ -687,6 +747,12 @@ 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)
 							# 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
@@ -744,6 +810,9 @@ def build_ui ():
 		file_list.select(load_file, inputs=[file_list, store], outputs=[editor])
 		# separate js-only listener: mirror the selected file into location.hash for deep-linking
 		file_list.select(None, inputs=[file_list], outputs=None, js=_JS_SELECT_HASH)
+		# 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)
 
 	return demo
 

web/lyl-editor.css

@@ -30,3 +30,27 @@
 #ls-editor-mount .cm-editor.cm-focused {
 	outline: none;
 }
+
+/* Share button: a compact, unobtrusive button under the "Lilylet editor" title. */
+#ls-share-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. */
+.ls-share-hint {
+	display: inline-block;
+	margin-left: 8px;
+	font-size: 12px;
+	color: #2b7;
+	opacity: 0;
+	transition: opacity 0.2s ease;
+	vertical-align: middle;
+}
+.ls-share-hint.show { opacity: 1; }
+.ls-share-hint.ls-share-err { color: #c0392b; }