Launch Score Studio with Hugging Face sign-in and dedicated ZeroGPU API

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+.next
+.env*
+.git
+*.tsbuildinfo
+__pycache__
+test-results

.gitattributes

@@ -33,3 +33,8 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+public/performers/drums.png filter=lfs diff=lfs merge=lfs -text
+public/performers/guitar.png filter=lfs diff=lfs merge=lfs -text
+public/performers/piano.png filter=lfs diff=lfs merge=lfs -text
+public/performers/saxophone.png filter=lfs diff=lfs merge=lfs -text
+public/saxophonist-sprite.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,7 @@
+node_modules/
+.next/
+.env*
+!.env.example
+*.tsbuildinfo
+__pycache__/
+test-results/

Dockerfile

@@ -0,0 +1,23 @@
+FROM node:24-bookworm-slim AS build
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY . .
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN npm run build
+
+FROM node:24-bookworm-slim AS runtime
+RUN apt-get update && apt-get install -y --no-install-recommends python3 python3-venv ffmpeg ca-certificates \
+    && python3 -m venv /opt/python \
+    && /opt/python/bin/pip install --no-cache-dir yt-dlp==2026.8.19 \
+    && rm -rf /var/lib/apt/lists/* \
+    && useradd -m -u 1000 studio
+WORKDIR /app
+ENV NODE_ENV=production NEXT_TELEMETRY_DISABLED=1 HOSTNAME=0.0.0.0 PORT=7860 PYTHON_BIN=/opt/python/bin/python
+COPY --from=build --chown=studio:studio /app/.next/standalone ./
+COPY --from=build --chown=studio:studio /app/.next/static ./.next/static
+COPY --from=build --chown=studio:studio /app/public ./public
+COPY --from=build --chown=studio:studio /app/scripts ./scripts
+USER studio
+EXPOSE 7860
+CMD ["node", "--use-system-ca", "server.js"]

README.md

@@ -1,10 +1,76 @@
 ---
 title: Score Studio
-emoji: 🏃
-colorFrom: blue
-colorTo: blue
+emoji: 🎼
+colorFrom: yellow
+colorTo: red
 sdk: docker
-pinned: false
+app_port: 7860
+short_description: Turn audio and YouTube music into editable sheet music
+models:
+  - m-a-p/SheetSage2
+tags:
+  - audio-to-score
+  - sheet-music
+  - music-transcription
+  - audio-to-midi
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Score Studio
+
+Upload music, record with your microphone, or import a public YouTube video.
+Sign in with Hugging Face to use your own ZeroGPU allowance. Play the resulting
+lead sheet with a moving note highlight, edit its notation, undo/redo changes,
+restore the AI original, and download ABC, MIDI or PDF.
+
+The interface uses Supreme Regular and Bespoke Stencil Bold from Fontshare,
+follows your device's preferred theme until you choose one, and switches themes
+with an expanding circular wave. Reduced-motion preferences are respected.
+
+## Run locally
+
+Requires Node 24, Python 3 with `yt-dlp==2026.8.19`, and FFmpeg/FFprobe on PATH.
+Run `npm ci`, configure values from `env.example` in `.env.local`, then `npm run dev`.
+Open http://localhost:3000. The development-only animation preview is at
+http://localhost:3000/preview/transcribe.
+
+## Hosting
+
+The frontend runs on a CPU Docker Space. Inference runs separately on the public
+[Score Studio API](https://huggingface.co/spaces/Reubencf/Score-Studio-API)
+Gradio ZeroGPU Space. The original Audio-to-Score Space remains separate.
+
+Before deploying, configure these Space settings:
+
+- Secret `SESSION_SECRET`: 32 random bytes encoded as 64 hexadecimal characters.
+- Variable `APP_ORIGIN`: `https://reubencf-score-studio.hf.space`.
+- Optional `HF_API_SPACE`, `HF_API_ORIGIN`, `HF_OAUTH_CLIENT_ID`: defaults point to the dedicated API.
+
+The Dockerfile includes Python, yt-dlp, FFmpeg and the standalone Next.js build.
+No owner Hugging Face token is required or used for public requests. The login
+flow uses Hugging Face's Client ID Metadata Documents and authorization code
+with PKCE, requesting only `openid profile`. User access tokens are encrypted in
+HttpOnly cookies, expire within eight hours, and are never returned to frontend JavaScript.
+Serve the app over HTTPS and keep the session secret stable across restarts.
+Login opens the app at its own origin so it does not depend on third-party cookies.
+
+YouTube import and transcription routes require a valid session and same-origin
+submission. Imported audio is accessible only to the importing session's account
+and expires after an hour. Backend score downloads expire after 24 hours.
+
+## Limits
+
+Audio must be 5 seconds to 10 minutes and under 100 MB. The whole recording is
+validated and submitted; longer input is rejected, not silently truncated.
+Public YouTube videos may be unavailable to a hosted server because of YouTube's
+restrictions. The importer does not bypass login, age or access restrictions;
+users can upload their own audio when import is unavailable.
+
+SheetSage2 produces melody and chord lead sheets, not a complete orchestral score.
+Review AI notation before performing. The model weights are CC BY-NC 4.0
+(non-commercial). Fonts are distributed by [Fontshare](https://www.fontshare.com/licenses).
+
+## Checks
+
+`npm run typecheck` and `npm run build` verify the production frontend.
+Before publishing, verify real Hugging Face login, full audio/YouTube processing,
+score playback and editing, both themes, keyboard controls and reduced motion.

app/api/auth/route.ts

@@ -0,0 +1,12 @@
+import {cookies} from 'next/headers';
+import {authorize,cookieOptions,session,SESSION_COOKIE} from '@/lib/auth';
+export const runtime='nodejs';
+export async function GET(){
+ const current=await session();
+ return Response.json({user:current?.user??null},{headers:{'Cache-Control':'no-store'}});
+}
+export async function DELETE(req:Request){
+ const auth=await authorize(req);if(auth.error)return auth.error;
+ (await cookies()).set(SESSION_COOKIE,'',cookieOptions(0));
+ return Response.json({ok:true},{headers:{'Cache-Control':'no-store'}});
+}

app/api/media/route.ts

@@ -0,0 +1,15 @@
+import {readFile,stat} from 'node:fs/promises';
+import path from 'node:path';
+import {mediaRoot} from '@/lib/media';
+import {authorize} from '@/lib/auth';
+export const runtime='nodejs';
+export async function GET(req:Request){
+ const auth=await authorize(req);if(auth.error)return auth.error;
+ const id=new URL(req.url).searchParams.get('id')||'';
+ if(!/^[a-f0-9-]{36}$/.test(id))return new Response('Not found',{status:404});
+ try{if(await readFile(path.join(mediaRoot,id,'owner'),'utf8')!==auth.session.user.id)return new Response('Not found',{status:404});
+  const file=path.join(mediaRoot,id,'audio.wav');const info=await stat(file);
+  if(Date.now()-info.mtimeMs>3600000)return new Response('This import expired. Import the video again.',{status:410});
+  return new Response(await readFile(file),{headers:{'Content-Type':'audio/wav','Cache-Control':'private, no-store','Content-Disposition':'attachment; filename="youtube-excerpt.wav"'}});
+ }catch{return new Response('Not found',{status:404});}
+}

app/api/transcribe/route.ts

@@ -0,0 +1,61 @@
+import {Client,handle_file} from '@gradio/client';
+import type {ScoreResult,Download} from '@/lib/types';
+import {prepareAudio} from '@/lib/audio';
+import {authorize} from '@/lib/auth';
+export const runtime='nodejs';
+const SPACE=process.env.HF_API_SPACE||'Reubencf/Score-Studio-API';
+const ORIGIN=process.env.HF_API_ORIGIN||'https://reubencf-score-studio-api.hf.space';
+function file(value:unknown):Download|null {
+ if(!value||typeof value!=='object')return null;
+ const data=value as {url?:string;path?:string;orig_name?:string};
+ const url=data.url||(data.path?ORIGIN+'/gradio_api/file='+data.path:'');
+ try{if(new URL(url).origin!==ORIGIN)return null;}catch{return null;}
+ return {url,name:data.orig_name||data.path?.split('/').pop()||'download'};
+}
+export async function POST(req:Request){
+ const auth=await authorize(req);if(auth.error)return auth.error;
+ if(Number(req.headers.get('content-length')||0)>102*1024*1024)return Response.json({error:'Choose an audio file under 100 MB.'},{status:413});
+ const form=await req.formData().catch(()=>null);
+ const input=form?.get('audio');
+ if(!(input instanceof File)||input.size>100*1024*1024||!input.size)
+  return Response.json({error:'Choose an audio file under 100 MB.'},{status:400});
+ const enc=new TextEncoder();let cancelJob:(()=>void)|undefined,closed=false,client:Client|undefined;
+ const preparation=new AbortController();
+ const stream=new ReadableStream({
+  async start(controller){
+   const send=(type:string,data:unknown)=>{if(!closed)controller.enqueue(enc.encode(JSON.stringify({type,data})+'\n'));};
+   const abort=()=>{closed=true;preparation.abort();cancelJob?.();client?.close();};req.signal.addEventListener('abort',abort,{once:true});
+   try{
+    if(req.signal.aborted){abort();return;}
+    send('status','Reading the full recording…');
+    const {audio,duration}=await prepareAudio(input,preparation.signal);
+    if(closed)return;
+    send('status','Connecting to the transcription studio…');
+    client=await Client.connect(SPACE,{events:['status','data'],token:auth.session.token as `hf_${string}`});
+    if(req.signal.aborted||closed){client.close();return;}
+    const job=client.submit('/transcribe',[handle_file(audio),0,duration,false,true]);
+    cancelJob=()=>{job.cancel();};let result:ScoreResult|null=null;
+    for await(const event of job){
+     if(closed)break;
+     if(event.type==='status'){
+      if(event.stage==='error')throw new Error(typeof event.message==='string'?event.message:'Conversion failed. Please try again.');
+      const details=event as unknown as {progress_data?:{desc?:string}[];position?:number};
+      send('status',details.progress_data?.find(p=>p.desc)?.desc|| (event.stage==='pending'?'Waiting for an available GPU…':'Listening and writing your score…'));
+     }
+     if(event.type==='data'){
+      const data=event.data as unknown[];
+      if(typeof data[5]==='string'&&data[5].trim()){
+       result={abc:data[5],status:String(data[0]),downloads:Array.isArray(data[4])?data[4].map(file).filter((d):d is Download=>!!d):[],pdf:file(data[2])?.url,audio:file(data[3])?.url};
+      }
+     }
+    }
+    if(!closed){if(!result)throw new Error('No editable score was returned. Try another recording.');send('result',result);}
+   }catch(error){
+    let message=error instanceof Error?error.message:'Conversion could not finish. Please try again.';
+    if(/quota|GPU.*duration|exceeded/i.test(message))message='Your Hugging Face processing allowance is unavailable for this recording. Try a shorter recording or wait for your allowance to reset.';
+    send('error',message.slice(0,600));
+   }finally{client?.close();req.signal.removeEventListener('abort',abort);if(!closed)controller.close();}
+  },cancel(){closed=true;preparation.abort();cancelJob?.();client?.close();}
+ });
+ return new Response(stream,{headers:{'Content-Type':'application/x-ndjson','Cache-Control':'no-store','X-Accel-Buffering':'no'}});
+}

app/api/youtube/route.ts

@@ -0,0 +1,35 @@
+import {spawn} from 'node:child_process';
+import {mkdir,rm,writeFile} from 'node:fs/promises';
+import {authorize} from '@/lib/auth';
+import path from 'node:path';
+import {randomUUID} from 'node:crypto';
+import {youtubeId} from '@/lib/youtube';
+import {mediaRoot,prepareMedia} from '@/lib/media';
+export const runtime='nodejs';
+let active=0;
+export async function POST(req:Request){
+ const auth=await authorize(req);if(auth.error)return auth.error;
+ if(active>=2)return Response.json({error:'Two imports are in progress. Please try again shortly.'},{status:429});
+ const body=await req.json().catch(()=>null);
+ const id=typeof body?.url==='string'?youtubeId(body.url):null;
+ if(!id)return Response.json({error:'Enter a valid YouTube video link.'},{status:400});
+ active++; const ticket=randomUUID(),dir=path.join(mediaRoot,ticket);
+ try{
+  await prepareMedia();await mkdir(dir);
+  const result=await new Promise<Record<string,string>>((resolve,reject)=>{
+   const child=spawn(/*turbopackIgnore: true*/ process.env.PYTHON_BIN||'python',['scripts/youtube_audio.py',id,dir],{shell:false,windowsHide:true});
+   let output='';let settled=false;
+   const finish=(err?:Error,result?:Record<string,string>)=>{if(settled)return;settled=true;clearTimeout(timer);req.signal.removeEventListener('abort',abort);if(err)reject(err);else resolve(result!);};
+   const abort=()=>{child.kill();finish(new Error('Import cancelled.'));};
+   const timer=setTimeout(()=>{child.kill();finish(new Error('YouTube import timed out. Please try again or upload an audio file.'));},150000);
+   req.signal.addEventListener('abort',abort,{once:true});
+   child.stdout.on('data',data=>{output+=data.toString();if(output.length>100000){child.kill();finish(new Error('Import returned an invalid response.'));}});
+   child.stderr.resume();
+   child.on('error',()=>finish(new Error('YouTube importer is unavailable. Please use an audio file.')));
+   child.on('close',()=>{try{const result=JSON.parse(output.trim());if(result.error)finish(new Error(result.error));else finish(undefined,result);}catch{finish(new Error('YouTube import failed. Try another public video or upload your audio.'));}});
+  });
+  await writeFile(path.join(dir,'owner'),auth.session.user.id);
+  return Response.json({...result,audioUrl:'/api/media?id='+ticket},{headers:{'Cache-Control':'no-store'}});
+ }catch(error){await rm(dir,{recursive:true,force:true});return Response.json({error:error instanceof Error?error.message:'Could not import YouTube audio.'},{status:422});}
+ finally{active--;}
+}

app/auth/callback/route.ts

@@ -0,0 +1,23 @@
+import {cookies} from 'next/headers';
+import {NextResponse} from 'next/server';
+import {appOrigin,CLIENT_ID,FLOW_COOKIE,SESSION_COOKIE,seal,unseal,cookieOptions,type OAuthFlow} from '@/lib/auth';
+export const runtime='nodejs';
+export async function GET(req:Request){
+ const jar=await cookies(),params=new URL(req.url).searchParams;
+ const flow=unseal<OAuthFlow>(jar.get(FLOW_COOKIE)?.value);
+ jar.set(FLOW_COOKIE,'',cookieOptions(0));
+ const failure=()=>NextResponse.redirect(appOrigin()+'/?signIn=retry',{headers:{'Cache-Control':'no-store'}});
+ if(!flow||flow.expires<Date.now()||params.get('state')!==flow.state||!params.get('code')||params.has('error'))return failure();
+ try{
+  const response=await fetch('https://huggingface.co/oauth/token',{method:'POST',body:new URLSearchParams({client_id:CLIENT_ID,grant_type:'authorization_code',code:params.get('code')!,redirect_uri:appOrigin()+'/auth/callback',code_verifier:flow.verifier}),cache:'no-store',signal:AbortSignal.timeout(20000)});
+  if(!response.ok)return failure();
+  const tokens=await response.json();
+  if(typeof tokens.access_token!=='string'||!Number.isFinite(tokens.expires_in)||tokens.expires_in<=0)return failure();
+  const profile=await fetch('https://huggingface.co/oauth/userinfo',{headers:{Authorization:'Bearer '+tokens.access_token},cache:'no-store',signal:AbortSignal.timeout(15000)});
+  if(!profile.ok)return failure();
+  const user=await profile.json();if(typeof user.sub!=='string')return failure();
+  const age=Math.min(tokens.expires_in,28800);
+  jar.set(SESSION_COOKIE,seal({token:tokens.access_token,expires:Date.now()+age*1000,user:{id:user.sub,name:String(user.preferred_username||user.name||'Musician').slice(0,100)}}),cookieOptions(age));
+  return NextResponse.redirect(appOrigin(),{headers:{'Cache-Control':'no-store'}});
+ }catch{return failure();}
+}

app/auth/login/route.ts

@@ -0,0 +1,11 @@
+import {cookies} from 'next/headers';
+import {NextResponse} from 'next/server';
+import {appOrigin,CLIENT_ID,FLOW_COOKIE,seal,createFlow,challenge,cookieOptions} from '@/lib/auth';
+export const runtime='nodejs';
+export async function GET(){
+ const flow=createFlow();
+ (await cookies()).set(FLOW_COOKIE,seal(flow),cookieOptions(600));
+ const url=new URL('https://huggingface.co/oauth/authorize');
+ url.search=new URLSearchParams({client_id:CLIENT_ID,redirect_uri:appOrigin()+'/auth/callback',response_type:'code',scope:'openid profile',state:flow.state,code_challenge:challenge(flow.verifier),code_challenge_method:'S256'}).toString();
+ return NextResponse.redirect(url,{headers:{'Cache-Control':'no-store'}});
+}

app/globals.css

@@ -0,0 +1,15 @@
+@import 'abcjs/abcjs-audio.css';
+:root{color-scheme:dark;--paper:#101010;--panel:#181818;--surface:#232323;--ink:#f5f4f2;--muted:#a4a39f;--line:#333331;--accent:#fb5729;--blue:var(--accent);--yellow:var(--accent);--sans:Arial,Helvetica,sans-serif}
+:root[data-theme=light]{color-scheme:light;--paper:#fff;--panel:#fff;--surface:#f5f4f1;--ink:#20201e;--muted:#716f69;--line:#dedcd6}
+*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:16px var(--sans);-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}button,input,select,textarea{font:inherit}button,a,input,summary,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;background:none;color:inherit}button:disabled{opacity:.4;cursor:not-allowed}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}input[type=checkbox]{accent-color:var(--accent)}.app-shell{min-height:100svh}main{width:100%}.theme-toggle{position:fixed;right:25px;top:22px;z-index:10;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:var(--panel);color:var(--muted)}.theme-toggle:hover{color:var(--accent)}
+.input-view{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:75px 24px 28px}.upload-panel{width:100%;max-width:590px;padding:32px;background:transparent}.panel-intro h1{font-size:23px;font-weight:500;line-height:1.25;letter-spacing:-.7px;margin:0 0 10px}.panel-intro p{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 25px}.drop-zone{border:1px dashed #ffffff24;border-radius:21px;background:var(--surface);transition:border-color .2s,background .2s;overflow:hidden}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent)}.drop-zone.drag-over{background:color-mix(in srgb,var(--accent) 9%,var(--surface))}:root[data-theme=light] .drop-zone{border-color:#d1cec5}:root[data-theme=light] .drop-zone:hover,:root[data-theme=light] .drop-zone.drag-over{border-color:var(--accent)}.drop-area{width:100%;min-height:265px;padding:30px 18px 18px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.upload-symbol{width:62px;height:62px;border-radius:50%;background:var(--accent);color:white;display:grid;place-items:center;margin:6px 0 9px}.drop-area strong{font-size:17px;line-height:1.5;font-weight:400;max-width:100%;overflow-wrap:anywhere}.drop-area strong>span{color:var(--muted)}.file-hint{font-family:monospace;color:var(--muted);font-size:13px;line-height:1.9}.size-badge{background:var(--panel);border-radius:5px;padding:4px 7px;margin-left:4px;font-family:var(--sans)}.record-button{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:12px;margin:0 auto 21px;padding:4px}.record-button:hover{color:var(--ink)}.record-button.recording{color:var(--accent)}.recording svg{animation:record-pulse 1s ease infinite}@keyframes record-pulse{50%{opacity:.35}}
+.or-divider{display:flex;align-items:center;gap:12px;color:#767672;font-size:13px;margin:24px 0}.or-divider:before,.or-divider:after{content:'';height:1px;background:var(--line);flex:1}.url-label{display:block;font-size:15px;color:var(--muted);margin-bottom:10px}.youtube-input{width:100%;height:47px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);padding:0 15px;font-size:15px;box-shadow:inset 0 0 0 1px #ffffff03}.youtube-input::placeholder{color:#858580}.panel-actions{display:flex;align-items:center;gap:10px;margin-top:28px}.panel-actions>span{font-size:11px;color:var(--muted);margin-right:auto}.clear-button,.primary-button{height:45px;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 17px;border-radius:11px;font-size:14px;white-space:nowrap}.clear-button{background:var(--surface);border:1px solid var(--line)}.primary-button{background:var(--accent);border:1px solid #ff926c;color:white;box-shadow:inset 0 2px 4px #ffffff36,0 2px 6px #0002}.primary-button:hover:not(:disabled){background:#ff683c}.primary-button:disabled{opacity:.65}.input-footer{margin-top:24px;text-align:center}.text-button{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:7px}.text-button:hover{color:var(--ink)}.error-message{margin:18px 0;padding:12px 14px;border:1px solid #b752324f;background:color-mix(in srgb,var(--accent) 7%,var(--panel));border-radius:10px;color:var(--ink);font-size:13px;line-height:1.6;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.error-message p{margin:0}.error-message button{padding:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+.view-enter{animation:enter .5s ease both}.fade-out{animation:leave .32s ease both;pointer-events:none}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes leave{to{opacity:0;transform:translateY(-12px);filter:blur(5px)}}.processing{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px}.processing .musician-canvas{width:min(350px,85vw);height:auto;aspect-ratio:1;margin:-35px 0 8px}.process-label{font-family:monospace;letter-spacing:2px;font-size:12px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:8px 12px;border-radius:3px}.processing p{font-size:14px;color:var(--muted);max-width:430px;line-height:1.7;min-height:45px;margin:19px 0 9px}
+.workspace{max-width:1280px;margin:auto;padding:47px 36px 50px}.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:0 3px 25px}.workspace-heading h1{font-size:32px;letter-spacing:-1px;margin:13px 0 8px;line-height:1.3}.workspace-heading p{font-size:13px;color:var(--muted);margin:0}.workspace-heading p span{margin:0 7px}.quiet-button{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;white-space:nowrap}.transport{border-radius:14px;background:#252628;color:#cfd0d2;display:flex;align-items:center;gap:6px;padding:11px 14px;box-shadow:0 8px 22px #121a2417;min-height:68px}.transport-icon{height:36px;width:36px;min-width:32px;display:grid;place-items:center;border-radius:6px;color:#aaadb1}.transport-icon:hover{background:#383a3d;color:white}.transport-icon.active{color:var(--yellow);background:#393b33}.play-button{color:white}.cover{width:37px;height:37px;flex-shrink:0;border-radius:7px;overflow:hidden;background:#434749;display:grid;place-items:center;color:var(--yellow);margin:0 10px}.cover img{width:100%;height:100%;object-fit:cover}.track-progress{position:relative;border-radius:9px;height:39px;flex:1;min-width:80px;background:#353638;overflow:hidden}.progress-fill{position:absolute;inset:0 auto 0 0;background:var(--yellow);pointer-events:none}.track-label{position:absolute;inset:0;display:flex;gap:20px;align-items:center;justify-content:space-between;padding:0 13px;color:white;mix-blend-mode:difference;pointer-events:none;font-size:13px}.track-label strong{font-size:14px;font-weight:500;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-label span{white-space:nowrap;font-variant-numeric:tabular-nums}.track-progress input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.track-progress:focus-within{outline:3px solid #8390ff;outline-offset:2px}.volume{display:flex;align-items:center;border-radius:7px;background:#353638;margin-left:5px;padding:0 7px 0 0}.volume input{width:60px;accent-color:white}.under-player{display:flex;align-items:center;justify-content:space-between;padding:15px 3px 25px;font-size:12px;color:#8b9099}.under-player label{display:flex;gap:7px;align-items:center}.under-player select{font-size:12px;border:1px solid var(--line);border-radius:5px;background:white;padding:4px;color:#6a7079}.score-toolbar{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:#fff;border-radius:10px 10px 0 0;padding:9px 12px;gap:10px}.toolbar-group{display:flex;align-items:center;gap:4px}.toolbar-group>button,.download-menu summary{font-size:12px;padding:8px 10px;display:flex;align-items:center;gap:7px;white-space:nowrap}.toolbar-group button:hover,.download-menu summary:hover,.chosen{background:#f1f3f7;border-radius:5px}.divider{height:18px;width:1px;background:var(--line);margin:0 5px}.follow{display:flex;align-items:center;font-size:12px;color:#707780;gap:4px;margin-right:10px}.download-menu{position:relative}.download-menu summary{cursor:pointer;list-style:none}.download-menu summary::-webkit-details-marker{display:none}.download-menu>div{position:absolute;right:0;top:40px;background:white;border:1px solid var(--line);border-radius:8px;padding:7px;z-index:5;box-shadow:0 6px 20px #0001;min-width:210px}.download-menu a,.download-menu div button{font-size:13px;padding:12px;display:block;width:100%;text-align:left;border-radius:4px}.download-menu a:hover{background:#f0f2f7}.edit-help{display:flex;align-items:center;justify-content:space-between;min-height:46px;border:1px solid var(--line);border-top:0;background:#fafbfc;padding:8px 18px;font-size:12px;color:#969ca4;gap:15px}.note-actions{display:flex;align-items:center;gap:6px}.note-actions button{border:1px solid var(--line);background:white;display:flex;padding:5px 9px;border-radius:4px;font-size:12px;white-space:nowrap}.score-layout{display:flex;border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;overflow:hidden;background:#edeef1}.score-scroll{flex:1;min-width:0;height:620px;overflow:auto;padding:26px}.paper{background:white;min-height:560px;padding:20px 30px;box-shadow:0 4px 16px #2233440a;min-width:600px}.paper svg{width:100%;overflow:visible}.current-note{fill:#1d36d6!important;stroke:#1d36d6!important}.playhead{stroke:#d5b509;stroke-width:2;pointer-events:none}.selected-note{fill:#cd7815!important;stroke:#cd7815!important}.paper .abcjs-note{cursor:pointer}.notation-editor{width:350px;flex-shrink:0;background:#fafbfc;border-left:1px solid var(--line);padding:20px;display:flex;flex-direction:column;min-height:600px}.notation-editor>div{display:flex;justify-content:space-between;font-size:14px;align-items:center}.notation-editor p{font-size:12px;color:#9197a1;line-height:1.6}.notation-editor textarea{width:100%;flex:1;resize:vertical;min-height:360px;font:13px/1.8 monospace;border:1px solid var(--line);border-radius:5px;background:white;padding:13px;color:#4e596c;tab-size:2}.notation-editor>span{font-size:12px;line-height:1.6;color:#949aa3;margin-top:12px}.edit-notice{padding:10px 18px;margin:0;border:1px solid var(--line);font-size:13px;color:#6f7785;background:#fafbfc}.original-audio{margin-top:25px;color:var(--muted);font-size:13px}.original-audio summary{cursor:pointer}.original-audio p{font-size:12px}.original-audio audio{width:min(500px,100%)}.loading-score{padding:100px;text-align:center;color:var(--muted)}.spinner{height:17px;width:17px;border:2px solid #888;border-right-color:var(--yellow);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
+
+.eyebrow{font-size:11px;letter-spacing:1.6px;color:var(--accent)}.workspace{padding-top:78px}.score-toolbar,.download-menu>div,.note-actions button,.under-player select,.notation-editor textarea{background:var(--panel);color:var(--ink)}.toolbar-group button:hover,.download-menu summary:hover,.chosen,.download-menu a:hover{background:var(--surface)}.edit-help,.notation-editor,.edit-notice{background:var(--surface);color:var(--muted)}.score-layout{background:var(--surface)}.paper{color:#202020}.current-note{fill:#e34b1c!important;stroke:#e34b1c!important}.playhead{stroke:var(--accent)}.selected-note{fill:#b85319!important;stroke:#b85319!important}.track-progress:focus-within{outline-color:var(--accent)}.follow{color:var(--muted)}.track-label{mix-blend-mode:normal;text-shadow:0 1px 3px #0008}
+@media(max-width:900px){.workspace{padding:78px 18px 30px}.score-toolbar{flex-wrap:wrap}.with-editor{flex-direction:column}.notation-editor{width:100%;min-height:400px;border-left:0;border-top:1px solid var(--line)}}
+@media(max-width:600px){.theme-toggle{right:17px;top:16px;width:36px;height:36px}.input-view{padding:70px 16px 25px}.upload-panel{padding:25px 21px;border-radius:24px}.panel-intro h1{font-size:21px}.panel-intro p{font-size:14px}.drop-area{min-height:235px;padding:25px 12px 15px}.drop-area strong{font-size:15px}.drop-area strong>span{display:block}.file-hint{font-size:11px}.panel-actions{flex-wrap:wrap;gap:8px;margin-top:22px}.panel-actions>span{flex-basis:100%;margin:0 0 6px}.clear-button{margin-left:auto}.primary-button{flex:1;max-width:180px}.or-divider{margin:20px 0}.workspace-heading{align-items:flex-start;gap:10px}.workspace-heading h1{font-size:24px}.quiet-button{font-size:11px}.workspace-heading p{font-size:12px}.transport{padding:9px 7px;gap:1px;border-radius:10px;flex-wrap:wrap}.cover{margin:0 5px;width:30px;height:32px}.track-progress{height:36px;flex-basis:55%}.track-label{padding:0 9px;gap:8px;font-size:11px}.track-label strong{font-size:12px}.track-label span:last-child{display:none}.transport-icon{width:30px;min-width:26px}.volume{margin-left:auto;margin-top:6px}.transport>.transport-icon.active,.transport>.transport-icon:nth-last-child(2){margin-top:6px}.under-player{font-size:10px;gap:10px}.score-toolbar{padding:7px;gap:4px}.toolbar-group>button,.download-menu summary{font-size:11px;padding:8px 6px}.follow{font-size:11px;gap:3px;margin-right:2px}.score-scroll{padding:12px;height:540px}.paper{padding:15px;min-width:560px}.edit-help{font-size:11px;flex-wrap:wrap}}
+@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
+.process-label+.text-button{margin-top:16px}.performer-unavailable{min-height:350px;display:grid;place-items:center;color:var(--muted);font-size:13px}
+@media print{body{background:white}.theme-toggle,.workspace-heading,.transport,.under-player,.score-toolbar,.edit-help,.notation-editor,.edit-notice,.original-audio,.error-message{display:none!important}.workspace{padding:0;max-width:none}.score-layout{border:0;display:block;background:white}.score-scroll{height:auto;overflow:visible;padding:0}.paper{padding:0;box-shadow:none;min-width:0}.paper svg{break-inside:avoid}.playhead{display:none}.current-note,.selected-note{fill:black!important;stroke:black!important}}

app/identity.css

@@ -0,0 +1,37 @@
+@font-face{font-family:Supreme;src:url('/fonts/supreme-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
+@font-face{font-family:'Bespoke Stencil';src:url('/fonts/bespoke-stencil-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
+:root{--sans:Supreme,Arial,sans-serif;--display:'Bespoke Stencil',Supreme,sans-serif}
+body{transition:none}
+h1,h2,h3,.panel-intro h1{font-family:var(--display);font-weight:700;letter-spacing:-.025em}
+.panel-intro h1{font-size:27px;line-height:1.2}
+.file-hint,.process-label{font-family:var(--sans)}
+::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
+::view-transition-old(root){z-index:1}
+::view-transition-new(root){z-index:2}
+::view-transition-group(root){animation-duration:0s}
+.account-button{position:fixed;top:22px;right:77px;width:40px;height:40px;z-index:10;display:grid;place-items:center;color:var(--muted);border-radius:50%}
+.account-button:hover{color:var(--accent);background:var(--surface)}
+.auth-loading{min-height:100svh;display:grid;place-items:center;color:var(--accent)}
+.sign-in-view{min-height:100svh;display:flex;justify-content:center;align-items:center;padding:90px 28px 50px}
+.sign-in-content{width:100%;max-width:440px}
+.sign-in-symbol{display:grid;place-items:center;color:var(--accent);width:64px;height:64px;border-radius:20px;background:color-mix(in srgb,var(--accent) 12%,transparent);margin-bottom:28px}
+.sign-in-content h1{font-size:clamp(43px,7vw,61px);line-height:1.06;margin:0 0 23px}
+.sign-in-content>p{max-width:370px;font-size:18px;line-height:1.6;color:var(--muted);margin:0 0 29px}
+.hf-sign-in{display:inline-flex;gap:12px;align-items:center;justify-content:center;padding:17px 21px;border-radius:100px;background:var(--accent);color:white;font-size:16px;box-shadow:inset 0 1px 1px #ffffff50,0 4px 14px #0001;transition:transform .2s,background .2s}
+.hf-sign-in>span{font-size:23px;line-height:1}
+.hf-sign-in:hover{transform:translateY(-2px);background:#ed491d}
+.sign-in-content>.sign-in-note{font-size:13px;line-height:1.7;margin:20px 0 0}
+.create-score-pill{height:45px;width:182px;flex-shrink:0;position:relative;overflow:hidden;border-radius:100px;background:linear-gradient(#343434,#111 60%);border:1px solid #484848;color:#fff;font-size:13px;box-shadow:inset 0 1px 1px #ffffff38,0 3px 7px #0002;transition:box-shadow .3s,transform .3s}
+.pill-rest,.pill-hover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s,transform .4s cubic-bezier(.22,.61,.36,1)}
+.pill-rest{font-size:13px;letter-spacing:.07em;text-transform:uppercase}
+.pill-hover{gap:9px;opacity:0;transform:translateY(28px);font-size:12px;white-space:nowrap}
+.pill-circles{display:flex;padding-left:7px}
+.pill-circles>span{height:27px;width:27px;display:grid;place-items:center;border:2px solid #252525;border-radius:50%;background:#f9ab82;color:#27211e;margin-left:-7px;font-size:8px}
+.pill-circles>span:nth-child(2){background:var(--accent);color:white}.pill-circles>span:last-child{background:#fff;color:#191919}
+.create-score-pill:is(:hover,:focus-visible):not(:disabled) .pill-rest{opacity:0;transform:translateY(-28px)}
+.create-score-pill:is(:hover,:focus-visible):not(:disabled) .pill-hover{opacity:1;transform:translateY(0)}
+.create-score-pill:hover:not(:disabled){box-shadow:inset 0 1px 1px #ffffff38,0 5px 12px #0003;transform:translateY(-1px)}
+.create-score-pill:active:not(:disabled){transform:translateY(0)}
+.create-score-pill:disabled{opacity:.5}
+@media(max-width:560px){.panel-actions{flex-wrap:wrap}.panel-actions>span{width:100%;flex-basis:100%;margin-bottom:5px}.panel-actions>.clear-button{margin-right:auto}.create-score-pill{width:182px}.panel-intro h1{font-size:26px}.sign-in-content h1{font-size:46px}.hf-sign-in{font-size:14px;padding:16px 17px}}
+@media(prefers-reduced-motion:reduce){.pill-rest,.pill-hover,.create-score-pill,.hf-sign-in{transition:none}}

app/layout.tsx

@@ -0,0 +1,6 @@
+import type { Metadata } from 'next';
+import './globals.css';
+import './identity.css';
+export const metadata: Metadata = { title: 'Score Studio — audio into notation', description: 'Turn a recording or YouTube audio into editable sheet music. Listen, follow the notes, and make it your own.' };
+const themeScript=`try{const t=localStorage.getItem('score-theme');document.documentElement.dataset.theme=t==='dark'||t==='light'?t:matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}catch{document.documentElement.dataset.theme=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}`;
+export default function Layout({children}:{children:React.ReactNode}) { return <html lang="en" suppressHydrationWarning><head><script dangerouslySetInnerHTML={{__html:themeScript}}/></head><body>{children}</body></html>; }

app/page.tsx

@@ -0,0 +1,98 @@
+'use client';
+import {useEffect,useRef,useState} from 'react';
+import {Check,CloudUpload,Mic,Square,X,LogOut} from 'lucide-react';
+import ThemeToggle from '@/components/ThemeToggle';
+import SignIn from '@/components/SignIn';
+import CreateScoreButton from '@/components/CreateScoreButton';
+import dynamic from 'next/dynamic';
+import Processing from '@/components/Processing';
+import {choosePerformer,type PerformerId} from '@/lib/performers';
+import {youtubeId} from '@/lib/youtube';
+import {type Source,type ScoreResult} from '@/lib/types';
+const ScoreWorkspace=dynamic(()=>import('@/components/ScoreWorkspace'),{ssr:false,loading:()=> <p className="loading-score">Opening your score…</p>});
+type Stage='input'|'leaving'|'processing'|'score';
+export default function Home(){
+ const [stage,setStage]=useState<Stage>('input'),[file,setFile]=useState<File|null>(null),[url,setUrl]=useState(''),[error,setError]=useState(''),[message,setMessage]=useState('Preparing your music…');
+ const [drag,setDrag]=useState(false),[recording,setRecording]=useState(false),[recordTime,setRecordTime]=useState(0),[micPending,setMicPending]=useState(false);
+ const [user,setUser]=useState<{id:string;name:string}|null>(null),[authReady,setAuthReady]=useState(false);
+ const [source,setSource]=useState<Source>({title:''}),[result,setResult]=useState<ScoreResult|null>(null);
+ const [performer,setPerformer]=useState<PerformerId|null>(null);
+ const picker=useRef<HTMLInputElement>(null),abort=useRef<AbortController|null>(null),media=useRef<MediaRecorder|null>(null),tracks=useRef<MediaStream|null>(null),localURL=useRef<string|null>(null),busy=useRef(false),mounted=useRef(true);
+ useEffect(()=>{mounted.current=true;return()=>{mounted.current=false;abort.current?.abort();tracks.current?.getTracks().forEach(t=>t.stop());if(localURL.current)URL.revokeObjectURL(localURL.current);};},[]);
+ useEffect(()=>{let active=true;const check=()=>fetch('/api/auth',{cache:'no-store'}).then(r=>r.json()).then(data=>{if(active){setUser(data.user);setAuthReady(true);}}).catch(()=>{if(active)setAuthReady(true);});check();window.addEventListener('focus',check);return()=>{active=false;window.removeEventListener('focus',check);};},[]);
+ async function signOut(){const response=await fetch('/api/auth',{method:'DELETE'});if(response.ok||response.status===401){reset();setUser(null);setFile(null);setUrl('');}}
+ useEffect(()=>{if(!recording)return;const tick=setInterval(()=>setRecordTime(t=>t+1),1000);return()=>clearInterval(tick);},[recording]);
+ useEffect(()=>{if(recordTime>=600&&media.current?.state==='recording')media.current.stop();},[recordTime]);
+ function selectFile(next?:File){if(!next)return;if(next.size>100*1024*1024){setError('Choose an audio file under 100 MB.');return;}if(!next.type.startsWith('audio/')&&!/\.(wav|mp3|m4a|ogg|flac|aac|webm|mp4)$/i.test(next.name)){setError('Choose an audio recording, such as MP3, WAV, M4A, OGG, or FLAC.');return;}setFile(next);setUrl('');setError('');}
+ async function record(){
+  if(recording){media.current?.stop();return;}
+  if(!navigator.mediaDevices?.getUserMedia){setError('Recording needs a supported browser and a secure connection. You can upload a file instead.');return;}
+  setMicPending(true);setError('');
+  try{const stream=await navigator.mediaDevices.getUserMedia({audio:true});if(!mounted.current){stream.getTracks().forEach(t=>t.stop());return;}tracks.current=stream;
+   const recorder=new MediaRecorder(stream),parts:Blob[]=[];media.current=recorder;
+   recorder.ondataavailable=e=>{if(e.data.size)parts.push(e.data);};
+   recorder.onstop=()=>{const type=recorder.mimeType||'audio/webm';selectFile(new File(parts,`My recording.${type.includes('mp4')?'m4a':'webm'}`,{type}));stream.getTracks().forEach(t=>t.stop());setRecording(false);};
+   recorder.start(1000);setRecordTime(0);setRecording(true);
+  }catch{setError('Microphone access was not available. Allow it in your browser or upload a recording.');}finally{setMicPending(false);}
+ }
+ function reset(){abort.current?.abort();busy.current=false;setStage('input');setError('');setResult(null);if(localURL.current){URL.revokeObjectURL(localURL.current);localURL.current=null;}}
+ async function convert(kind:'file'|'youtube'){
+  if(busy.current||recording||!user)return;
+  if(kind==='file'&&!file){picker.current?.click();return;}
+  if(kind==='youtube'&&!youtubeId(url)){setError('Paste a link to a YouTube video, for example youtube.com/watch?v=… or youtu.be/…');return;}
+  busy.current=true;const controller=new AbortController();abort.current=controller;setPerformer(choosePerformer(performer));setError('');setStage('leaving');
+  await new Promise(r=>setTimeout(r,320));if(controller.signal.aborted)return;setStage('processing');
+  let submitted=file!,meta:Source={title:file?.name.replace(/\.[^.]+$/,'')||'Your recording'};
+  try{
+   if(kind==='youtube'){
+    setMessage('Getting the audio and artwork from YouTube…');
+    const response=await fetch('/api/youtube',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url}),signal:controller.signal});const data=await response.json();
+    if(!response.ok){if(response.status===401)setUser(null);throw new Error(data.error||'Could not import this video.');}meta=data;
+    const audioResponse=await fetch(data.audioUrl,{signal:controller.signal});if(!audioResponse.ok)throw new Error('The imported audio expired. Please try again.');
+    submitted=new File([await audioResponse.blob()],'youtube-audio.wav',{type:'audio/wav'});
+   }
+   if(localURL.current)URL.revokeObjectURL(localURL.current);localURL.current=URL.createObjectURL(submitted);meta.audioUrl=localURL.current;
+   setMessage('Preparing the full recording…');
+   const form=new FormData();form.append('audio',submitted);
+   const response=await fetch('/api/transcribe',{method:'POST',body:form,signal:controller.signal});
+   if(!response.ok){if(response.status===401)setUser(null);const data=await response.json();throw new Error(data.error||'Conversion could not start.');}
+   if(!response.body)throw new Error('The connection closed. Please try again.');
+   const reader=response.body.getReader(),decoder=new TextDecoder();let pending='',finished:ScoreResult|null=null;
+   while(true){const {done,value}=await reader.read();pending+=decoder.decode(value,{stream:!done});const lines=pending.split('\n');pending=lines.pop()||'';
+    for(const line of lines){if(!line.trim())continue;const event=JSON.parse(line);if(event.type==='error')throw new Error(event.data);if(event.type==='status')setMessage(event.data);if(event.type==='result')finished=event.data;}
+    if(done)break;
+   }
+   if(!finished)throw new Error('The connection ended before a score was ready. Please try again.');
+   if(!controller.signal.aborted){setResult(finished);setSource(meta);setStage('score');}
+  }catch(e){if(!controller.signal.aborted){setError(e instanceof Error?e.message:'Something went wrong. Please try again.');setStage('input');}}
+  finally{if(abort.current===controller)busy.current=false;}
+ }
+ return <div className="app-shell">
+  <ThemeToggle/>
+  {user&&stage==='input'&&<button className="account-button" onClick={signOut} aria-label={`Sign out ${user.name}`} title={`Signed in as ${user.name} · Sign out`}><LogOut size={17}/></button>}
+  <main>
+   {!authReady?<div className="auth-loading" aria-label="Checking sign-in" role="status"><span className="spinner"/></div>:!user?<SignIn/>:null}
+   {user&&(stage==='input'||stage==='leaving')&&<section className={`input-view ${stage==='leaving'?'fade-out':'view-enter'}`}>
+    <form className="upload-panel" onSubmit={e=>{e.preventDefault();convert(file?'file':'youtube');}}>
+     <div className="panel-intro"><h1>Turn audio into sheet music.</h1><p>Upload a recording or paste a YouTube link.<br/>Make the notes your own.</p></div>
+     <div className={`drop-zone ${drag?'drag-over':''} ${file?'has-file':''}`} onDragOver={e=>{e.preventDefault();if(!recording)setDrag(true);}} onDragLeave={e=>{if(!e.currentTarget.contains(e.relatedTarget as Node))setDrag(false);}} onDrop={e=>{e.preventDefault();setDrag(false);if(!recording&&stage==='input')selectFile(e.dataTransfer.files[0]);}}>
+      <button type="button" className="drop-area" onClick={()=>picker.current?.click()} disabled={recording||stage==='leaving'}>
+       <span className="upload-symbol">{file?<Check size={27}/>:<CloudUpload size={27}/>}</span>
+       <strong>{file?file.name:<>Click to upload <span>or just use drag &amp; drop.</span></>}</strong>
+       <span className="file-hint">{file?`${(file.size/1024/1024).toFixed(1)} MB · click to change`:<>MP3, WAV, M4A &amp; more <span className="size-badge">Max 100 MB</span></>}</span>
+      </button>
+      <input ref={picker} className="sr-only" type="file" accept="audio/*,.mp4,.webm" aria-label="Upload audio recording" onChange={e=>selectFile(e.target.files?.[0])}/>
+      <button type="button" className={`record-button ${recording?'recording':''}`} onClick={record} disabled={micPending||stage==='leaving'}>{recording?<Square size={13} fill="currentColor"/>:<Mic size={15}/>} {recording?`Stop recording · ${Math.floor(recordTime/60)}:${String(recordTime%60).padStart(2,'0')}`:micPending?'Connecting microphone…':'Or record with your microphone'}</button>
+     </div>
+     <div className="or-divider"><span>OR</span></div>
+     <label className="url-label" htmlFor="youtube-url">Import from YouTube</label>
+     <input className="youtube-input" id="youtube-url" type="url" placeholder="Paste a YouTube link here" value={url} onChange={e=>{setUrl(e.target.value);if(e.target.value)setFile(null);setError('');}} disabled={stage==='leaving'||recording}/>
+     {error&&<div className="error-message" role="alert"><p>{error}</p><button type="button" onClick={()=>setError('')} aria-label="Dismiss error"><X size={17}/></button></div>}
+     <div className="panel-actions"><span>Full audio · up to 10 min</span><button type="button" className="clear-button" disabled={(!file&&!url)||recording||stage==='leaving'} onClick={()=>{setFile(null);setUrl('');setError('');if(picker.current)picker.current.value='';}}>Clear</button><CreateScoreButton disabled={(!file&&!url)||recording||micPending||stage==='leaving'}/></div>
+    </form>
+   </section>}
+   {user&&stage==='processing'&&<Processing message={message} onCancel={reset} performer={performer??'saxophone'}/>}
+   {user&&stage==='score'&&result&&<ScoreWorkspace result={result} source={source} onNew={reset}/>}
+  </main>
+ </div>;
+}

app/preview/transcribe/page.tsx

@@ -0,0 +1,7 @@
+import {notFound} from 'next/navigation';
+import TranscriptionPreview from '@/components/TranscriptionPreview';
+
+export default function Page(){
+ if(process.env.NODE_ENV!=='development')notFound();
+ return <TranscriptionPreview/>;
+}

components/CreateScoreButton.tsx

@@ -0,0 +1,7 @@
+import {AudioLines,Music2} from 'lucide-react';
+export default function CreateScoreButton({disabled}:{disabled:boolean}){
+ return <button type="submit" className="create-score-pill" disabled={disabled} aria-label="Create score">
+  <span className="pill-rest" aria-hidden="true">Create score</span>
+  <span className="pill-hover" aria-hidden="true"><span className="pill-circles"><span><Music2 size={15}/></span><span><AudioLines size={16}/></span><span>YOU</span></span><span>Let’s transcribe</span></span>
+ </button>;
+}

components/Processing.tsx

@@ -0,0 +1,50 @@
+'use client';
+import {useEffect,useRef,useState} from 'react';
+import {coverageAt,GRID_SIZE,loadPerformer,LOOP_SECONDS,PERFORMERS,POSE_COUNT,type PerformerId} from '@/lib/performers';
+
+type Props={message?:string;onCancel:()=>void;cancelLabel?:string;performer?:PerformerId};
+export default function Processing({message,onCancel,cancelLabel='Cancel conversion',performer='saxophone'}:Props){
+ const canvas=useRef<HTMLCanvasElement>(null);
+ const [unavailable,setUnavailable]=useState(false);
+ const person=PERFORMERS.find(item=>item.id===performer)!.person;
+ useEffect(()=>{
+  const surface=canvas.current;if(!surface)return;
+  const ctx=surface.getContext('2d');if(!ctx){setUnavailable(true);return;}
+  const reduced=matchMedia('(prefers-reduced-motion: reduce)');
+  let frame=0,disposed=false;
+  setUnavailable(false);
+  delete surface.dataset.particles;
+  ctx.clearRect(0,0,GRID_SIZE,GRID_SIZE);
+  loadPerformer(performer).then(dots=>{
+   if(disposed)return;
+   const scale=Math.min(devicePixelRatio||1,2);
+   surface.width=GRID_SIZE*scale;surface.height=GRID_SIZE*scale;
+   ctx.setTransform(scale,0,0,scale,0,0);
+   surface.dataset.particles=String(dots.length);
+   surface.dataset.poses=String(POSE_COUNT);
+   const began=performance.now();
+   function draw(now:number){
+    if(disposed||!ctx)return;
+    const seconds=reduced.matches?0:Math.max(0,now-began)/1000;
+    const position=(seconds/LOOP_SECONDS%1)*POSE_COUNT;
+    ctx.clearRect(0,0,GRID_SIZE,GRID_SIZE);
+    ctx.fillStyle=getComputedStyle(surface!).getPropertyValue('--accent').trim()||'#fa5425';
+    for(const dot of dots){
+     const radius=3.35*Math.sqrt(coverageAt(dot.coverage,position));
+     if(radius<.08)continue;
+     ctx.beginPath();ctx.arc(dot.x,dot.y,radius,0,Math.PI*2);ctx.fill();
+    }
+    frame=requestAnimationFrame(draw);
+   }
+   frame=requestAnimationFrame(draw);
+  }).catch(()=>{if(!disposed)setUnavailable(true);});
+  return()=>{disposed=true;cancelAnimationFrame(frame);};
+ },[performer]);
+ return <section className="processing view-enter" aria-live="polite">
+  <canvas ref={canvas} className="musician-canvas" data-performer={performer} role="img" aria-label={`A ${person} animated by dots growing and shrinking on a fixed grid`} hidden={unavailable}/>
+  {unavailable&&<div className="performer-unavailable" role="status">The animation could not load.</div>}
+  <div className="process-label">PROCESSING</div>
+  {message&&<p>{message}</p>}
+  <button className="text-button" onClick={onCancel}>{cancelLabel}</button>
+ </section>;
+}

components/ScoreWorkspace.tsx

@@ -0,0 +1,121 @@
+'use client';
+import {useCallback,useEffect,useRef,useState} from 'react';
+import {ArrowDown,ArrowUp,ChevronDown,Code2,Download,Music2,Pause,Play,Printer,Redo2,Repeat2,RotateCcw,SkipBack,Undo2,Volume2,VolumeX,X} from 'lucide-react';
+import type {NoteTimingEvent,TuneObject} from 'abcjs';
+import type {Source,ScoreResult} from '@/lib/types';
+
+type AbcLibrary=typeof import('abcjs');
+type Selection={start:number;end:number;token:string};
+const clock=(seconds:number)=>`${Math.floor(seconds/60)}:${String(Math.floor(seconds%60)).padStart(2,'0')}`;
+function save(text:string,name:string,type='text/plain'){
+ const url=URL.createObjectURL(new Blob([text],{type})),a=document.createElement('a');a.href=url;a.download=name;a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);
+}
+
+export default function ScoreWorkspace({result,source,onNew}:{result:ScoreResult;source:Source;onNew:()=>void}){
+ const [history,setHistory]=useState([result.abc]),[index,setIndex]=useState(0);
+ const abc=history[index],edited=abc!==result.abc;
+ const [codeOpen,setCodeOpen]=useState(false),[selection,setSelection]=useState<Selection|null>(null);
+ const [playing,setPlaying]=useState(false),[loading,setLoading]=useState(false),[position,setPosition]=useState(0),[total,setTotal]=useState(0);
+ const [speed,setSpeed]=useState(100),[volume,setVolume]=useState(.7),[loop,setLoop]=useState(false),[follow,setFollow]=useState(true);
+ const [problem,setProblem]=useState(''),[notice,setNotice]=useState(''),[ready,setReady]=useState(false);
+ const paper=useRef<HTMLDivElement>(null),scoreScroll=useRef<HTMLDivElement>(null),textarea=useRef<HTMLTextAreaElement>(null);
+ const lib=useRef<AbcLibrary|null>(null),tune=useRef<TuneObject|null>(null),audio=useRef<AudioContext|null>(null),gain=useRef<GainNode|null>(null),node=useRef<AudioBufferSourceNode|null>(null),buffer=useRef<AudioBuffer|null>(null);
+ const timings=useRef<NoteTimingEvent[]>([]),offset=useRef(0),started=useRef(0),isPlaying=useRef(false),generation=useRef(0),loopRef=useRef(loop),followRef=useRef(follow),lastEvent=useRef(-1);
+ loopRef.current=loop;followRef.current=follow;
+ const mark=useCallback((seconds:number)=>{
+  const events=timings.current,ms=seconds*1000;let lo=0,hi=events.length-1,found=-1;
+  while(lo<=hi){const mid=(lo+hi)>>1;if(events[mid].milliseconds<=ms){found=mid;lo=mid+1;}else hi=mid-1;}
+  if(found===lastEvent.current)return;lastEvent.current=found;
+  paper.current?.querySelectorAll('.current-note').forEach(n=>n.classList.remove('current-note'));
+  const event=events[found];if(!event||event.type==='end'||event.left==null)return;
+  event.elements?.flat().forEach(el=>el?.classList.add('current-note'));
+  const svg=paper.current?.querySelector('svg');if(!svg)return;
+  let line=svg.querySelector('.playhead');if(!line){line=document.createElementNS('http://www.w3.org/2000/svg','line');line.setAttribute('class','playhead');svg.append(line);}
+  line.setAttribute('x1',String(event.left-3));line.setAttribute('x2',String(event.left-3));line.setAttribute('y1',String(event.top||0));line.setAttribute('y2',String((event.top||0)+(event.height||0)));
+  const pane=scoreScroll.current;if(followRef.current&&pane){const rect=line.getBoundingClientRect(),bound=pane.getBoundingClientRect();if(rect.top<bound.top+30||rect.bottom>bound.bottom-30)pane.scrollBy({top:rect.top-bound.top-70,behavior:matchMedia('(prefers-reduced-motion: reduce)').matches?'instant':'smooth'});}
+ },[]);
+ const stop=useCallback(()=>{
+  if(isPlaying.current&&audio.current)offset.current=Math.min((buffer.current?.duration||0),offset.current+audio.current.currentTime-started.current);
+  if(node.current){node.current.onended=null;try{node.current.stop();}catch{}node.current.disconnect();node.current=null;}
+  isPlaying.current=false;setPlaying(false);
+ },[]);
+ const startBuffer=useCallback((at:number)=>{
+  const ctx=audio.current,buf=buffer.current;if(!ctx||!buf||!gain.current)return;
+  const src=ctx.createBufferSource();src.buffer=buf;src.connect(gain.current);node.current=src;
+  offset.current=Math.max(0,Math.min(at,buf.duration-.001));started.current=ctx.currentTime;isPlaying.current=true;setPlaying(true);
+  src.onended=()=>{if(node.current!==src)return;if(loopRef.current){isPlaying.current=false;node.current=null;startBuffer(0);}else{isPlaying.current=false;node.current=null;offset.current=0;setPlaying(false);setPosition(0);lastEvent.current=-1;paper.current?.querySelectorAll('.current-note,.playhead').forEach(n=>n.classList.contains('playhead')?n.remove():n.classList.remove('current-note'));}};
+  src.start(0,offset.current);
+ },[]);
+ const commit=useCallback((next:string)=>{if(next===abc)return;stop();setHistory(h=>[...h.slice(0,index+1),next]);setIndex(index+1);setNotice('Edits applied. Playback uses this version.');},[abc,index,stop]);
+ const undo=useCallback(()=>{if(index>0){stop();setIndex(i=>i-1);setSelection(null);}},[index,stop]);
+ const redo=useCallback(()=>{if(index<history.length-1){stop();setIndex(i=>i+1);setSelection(null);}},[index,history.length,stop]);
+ useEffect(()=>{const key=(e:KeyboardEvent)=>{if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='z'){e.preventDefault();if(e.shiftKey)redo();else undo();}else if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='y'){e.preventDefault();redo();}};window.addEventListener('keydown',key);return()=>window.removeEventListener('keydown',key);},[undo,redo]);
+ useEffect(()=>{
+  const revision=++generation.current;stop();buffer.current=null;offset.current=0;setPosition(0);setTotal(0);setLoading(false);setReady(false);setProblem('');lastEvent.current=-1;
+  const timer=setTimeout(async()=>{
+   const ABC=await import('abcjs');if(revision!==generation.current||!paper.current)return;lib.current=ABC;
+   try{
+    if(!/\nK:/.test(abc)||!abc.trim())throw new Error('The score needs a K: key field and some notes. Undo or restore the AI score.');
+    const visual=ABC.renderAbc(paper.current,abc,{add_classes:true,selectTypes:['note'],selectionColor:'#cd7815',responsive:'resize',staffwidth:850,paddingtop:30,paddingbottom:40,
+     clickListener:(el,_n,_classes,analysis)=>{if(el.el_type!=='note'||typeof el.startChar!=='number'||typeof el.endChar!=='number')return;
+      const selected={start:el.startChar,end:el.endChar,token:abc.slice(el.startChar,el.endChar)};setSelection(selected);
+      paper.current?.querySelectorAll('.selected-note').forEach(n=>n.classList.remove('selected-note'));analysis.selectableElement?.classList.add('selected-note');
+      if(textarea.current){textarea.current.focus({preventScroll:true});textarea.current.setSelectionRange(selected.start,selected.end);}
+     }})[0];
+    if(!visual||!paper.current.querySelector('.abcjs-note'))throw new Error('No playable notes found. Check the notation, undo, or restore the AI score.');
+    tune.current=visual;setReady(true);
+    setNotice(visual.warnings?.length?'Some notation could not be read. Check your edit before playing.':'');
+   }catch(e){setProblem(e instanceof Error?e.message:'This notation could not be read.');tune.current=null;}
+  },180);return()=>clearTimeout(timer);
+ },[abc,speed,stop]);
+ useEffect(()=>{let frame=0;const tick=()=>{if(isPlaying.current&&audio.current){const time=offset.current+audio.current.currentTime-started.current;setPosition(time);mark(time);}frame=requestAnimationFrame(tick);};frame=requestAnimationFrame(tick);return()=>cancelAnimationFrame(frame);},[mark]);
+ useEffect(()=>{if(gain.current)gain.current.gain.value=volume;},[volume]);
+ useEffect(()=>()=>{generation.current++;stop();gain.current?.disconnect();},[stop]);
+ async function toggle(){
+  if(playing){stop();return;}if(!ready||loading||!lib.current||!tune.current)return;
+  const rev=generation.current;
+  try{
+   if(!audio.current){audio.current=new AudioContext();gain.current=audio.current.createGain();gain.current.gain.value=volume;gain.current.connect(audio.current.destination);}
+   await audio.current.resume();
+   if(!buffer.current){
+    setLoading(true);setProblem('');const synth=new lib.current.synth.CreateSynth();
+    const load=await synth.init({audioContext:audio.current,visualObj:tune.current,millisecondsPerMeasure:tune.current.millisecondsPerMeasure()*100/speed,options:{soundFontUrl:location.origin+'/soundfonts/',program:0}});
+    if(load.error?.length)throw new Error('Some piano sounds could not load. Please try again.');
+    await synth.prime();if(rev!==generation.current)return;
+    buffer.current=synth.getAudioBuffer()||null;if(!buffer.current)throw new Error('Could not prepare piano playback.');
+    const timer=new lib.current.TimingCallbacks(tune.current,{qpm:tune.current.getBpm(tune.current.metaText.tempo)*speed/100});timings.current=timer.noteTimings;
+    setTotal(buffer.current.duration);setLoading(false);
+   }
+   if(rev===generation.current)startBuffer(offset.current);
+  }catch(e){if(rev===generation.current){setLoading(false);setProblem(e instanceof Error?e.message:'Playback failed. Please try again.');}}
+ }
+ function seek(value:number){const was=isPlaying.current;stop();offset.current=value;setPosition(value);lastEvent.current=-1;mark(value);if(was)startBuffer(value);}
+ function noteEdit(action:'up'|'down'|'longer'|'shorter'){
+  if(!selection)return;const match=selection.token.match(/^(\s*(?:"[^"]*"\s*)*)([_^=]*)([A-Ga-g])([,']*)(\d*(?:\/\d*)?)(-?)(\s*)$/);
+  if(!match){setCodeOpen(true);setNotice('Use the notation editor for this chord, rest, or decorated note.');return;}
+  let [,prefix,acc,note,oct,length,tie,suffix]=match;
+  if(action==='up'||action==='down'){
+   const names='CDEFGAB';let pitch=names.indexOf(note.toUpperCase())+(note===note.toLowerCase()?7:0)+7*([...oct].filter(x=>x==="'").length-[...oct].filter(x=>x===',').length)+(action==='up'?1:-1);
+   const octave=Math.floor(pitch/7);note=names[((pitch%7)+7)%7];oct=octave<0?', '.trim().repeat(-octave):octave>1?"'".repeat(octave-1):'';if(octave>=1)note=note.toLowerCase();
+  }else{const [n,d]=length.split('/');let num=Number(n||1),den=d===undefined?1:Number(d||2);if(action==='longer')num*=2;else den*=2;while(num%2===0&&den%2===0){num/=2;den/=2;}length=den===1?(num===1?'':String(num)):`${num===1?'':num}/${den===2?'':den}`;}
+  const token=prefix+acc+note+oct+length+tie+suffix;commit(abc.slice(0,selection.start)+token+abc.slice(selection.end));setSelection({...selection,end:selection.start+token.length,token});
+ }
+ function midi(){if(!lib.current)return;try{const uri=lib.current.synth.getMidiFile(abc,{midiOutputType:'encoded'}) as string;const a=document.createElement('a');a.href=uri;a.download='edited-score.mid';a.click();}catch{setProblem('MIDI export failed. Check the notation.');}}
+ return <section className="workspace view-enter">
+  <div className="workspace-heading"><div><div className="eyebrow">YOUR MUSIC, ON PAPER</div><h1>{source.title}</h1><p>{source.artist||'Your recording'} <span>·</span> {edited?'Edited score':'Original AI score'}</p></div><button className="quiet-button" onClick={onNew}><X size={16}/> New score</button></div>
+  <div className="transport" aria-label="Score playback controls">
+   <button className="transport-icon" onClick={()=>seek(0)} title="Restart" aria-label="Restart playback"><SkipBack size={18}/></button>
+   <button className="transport-icon play-button" onClick={toggle} disabled={!ready||loading} aria-label={playing?'Pause score':'Play score'}>{loading?<span className="spinner"/>:playing?<Pause size={22} fill="currentColor"/>:<Play size={22} fill="currentColor"/>}</button>
+   <div className="cover">{source.thumbnail?<img src={source.thumbnail} alt="Video thumbnail" onError={e=>{e.currentTarget.style.display='none';}}/>:<Music2 size={21}/>}</div>
+   <div className="track-progress"><div className="progress-fill" style={{width:total?`${Math.min(100,position/total*100)}%`:'0%'}}/><div className="track-label"><span>{clock(position)}</span><strong>{source.title}</strong><span>{total?`−${clock(Math.max(0,total-position))}`:'SCORE'}</span></div><input type="range" min="0" max={total||1} step=".05" value={Math.min(position,total||1)} disabled={!total} onChange={e=>seek(Number(e.target.value))} aria-label="Playback position"/></div>
+   <button className={`transport-icon ${loop?'active':''}`} onClick={()=>setLoop(!loop)} aria-label="Loop score" aria-pressed={loop} title="Loop"><Repeat2 size={20}/></button>
+   <div className="volume"><button className="transport-icon" onClick={()=>setVolume(volume?0:.7)} aria-label={volume?'Mute':'Unmute'}>{volume?<Volume2 size={18}/>:<VolumeX size={18}/>}</button><input aria-label="Volume" type="range" min="0" max="1" step=".05" value={volume} onChange={e=>setVolume(Number(e.target.value))}/></div>
+  </div>
+  <div className="under-player"><span>{loading?'Preparing piano sounds…':'Piano playback follows your written score'}</span><label>Speed <select aria-label="Playback speed" value={speed} onChange={e=>{stop();setSpeed(Number(e.target.value));}}><option value="50">0.5×</option><option value="75">0.75×</option><option value="100">1×</option><option value="125">1.25×</option><option value="150">1.5×</option></select></label></div>
+  <div className="score-toolbar"><div className="toolbar-group"><button onClick={undo} disabled={index===0} title="Undo (Ctrl Z)" aria-label="Undo"><Undo2 size={18}/></button><button onClick={redo} disabled={index===history.length-1} title="Redo (Ctrl Shift Z)" aria-label="Redo"><Redo2 size={18}/></button><span className="divider"/><button onClick={()=>{commit(result.abc);setSelection(null);}} disabled={!edited}><RotateCcw size={16}/><span>Restore AI score</span></button></div><div className="toolbar-group"><label className="follow"><input type="checkbox" checked={follow} onChange={e=>setFollow(e.target.checked)}/> Follow notes</label><button className={codeOpen?'chosen':''} onClick={()=>setCodeOpen(!codeOpen)} aria-expanded={codeOpen}><Code2 size={17}/><span>Edit notation</span></button><button onClick={()=>window.print()} title="Print current score" aria-label="Print current score"><Printer size={17}/></button><details className="download-menu"><summary><Download size={17}/><span>Download</span><ChevronDown size={13}/></summary><div><button onClick={()=>save(abc,'score.abc')}>Current score · ABC</button><button onClick={midi}>Current score · MIDI</button>{result.pdf&&<a href={result.pdf} target="_blank" rel="noreferrer">Original AI score · PDF</a>}{result.downloads.find(d=>d.name.endsWith('.zip'))&&<a href={result.downloads.find(d=>d.name.endsWith('.zip'))!.url} target="_blank" rel="noreferrer">Original AI files · ZIP</a>}</div></details></div></div>
+  <div className="edit-help"><span>{selection?`Selected: ${selection.token.trim()}`:'Click a note to edit its pitch or length.'}</span>{selection&&<div className="note-actions"><button onClick={()=>noteEdit('down')} aria-label="Lower selected note"><ArrowDown size={14}/></button><button onClick={()=>noteEdit('up')} aria-label="Raise selected note"><ArrowUp size={14}/></button><button onClick={()=>noteEdit('shorter')}>½ length</button><button onClick={()=>noteEdit('longer')}>2× length</button></div>}</div>
+  {problem&&<p role="alert" className="error-message">{problem}</p>}{notice&&<p role="status" className="edit-notice">{notice}</p>}
+  <div className={`score-layout ${codeOpen?'with-editor':''}`}><div className="score-scroll" ref={scoreScroll}><div className="paper" ref={paper}/></div>{codeOpen&&<aside className="notation-editor"><div><strong>ABC notation</strong><button onClick={()=>setCodeOpen(false)} aria-label="Close notation editor"><X size={16}/></button></div><p>Change notes, rhythm, chords, title, or tempo. Playback updates with your edits.</p><textarea ref={textarea} aria-label="Edit ABC notation" spellCheck={false} value={abc} onChange={e=>commit(e.target.value)}/><span>Undo and redo work here too. Print to save an edited PDF.</span></aside>}</div>
+  {source.audioUrl&&<details className="original-audio"><summary>Listen to the original audio</summary><p>The original recording is separate from the score player.</p><audio controls src={source.audioUrl} onPlay={stop}/></details>}
+ </section>;
+}

components/SignIn.tsx

@@ -0,0 +1,17 @@
+'use client';
+import {useEffect,useState} from 'react';
+import {ArrowUpRight,Music2} from 'lucide-react';
+export default function SignIn(){
+ const [retry,setRetry]=useState(false);
+ useEffect(()=>setRetry(new URLSearchParams(location.search).get('signIn')==='retry'),[]);
+ return <section className="sign-in-view view-enter">
+  <div className="sign-in-content">
+   <span className="sign-in-symbol"><Music2 size={31}/></span>
+   <h1>Your music.<br/>Written down.</h1>
+   <p>Turn a recording or YouTube audio into a score you can play, edit, and make your own.</p>
+   <a className="hf-sign-in" href="/auth/login" target="_top"><span aria-hidden="true">🤗</span> Sign in with Hugging Face <ArrowUpRight size={18}/></a>
+   <p className="sign-in-note">Use your account’s free processing allowance.<br/>New here? You can create an account when you sign in.</p>
+   {retry&&<p className="error-message" role="alert">Sign-in didn’t complete. Please try again.</p>}
+  </div>
+ </section>;
+}

components/ThemeToggle.tsx

@@ -0,0 +1,33 @@
+'use client';
+import {useEffect,useRef,useState} from 'react';
+import {flushSync} from 'react-dom';
+import {Moon,Sun} from 'lucide-react';
+type Theme='dark'|'light';
+export default function ThemeToggle(){
+ const [theme,setTheme]=useState<Theme>('light'),[ready,setReady]=useState(false);
+ const transitioning=useRef(false);
+ useEffect(()=>{
+  const media=matchMedia('(prefers-color-scheme: dark)');
+  const sync=()=>{let saved:string|null=null;try{saved=localStorage.getItem('score-theme');}catch{}
+   const next:Theme=saved==='light'||saved==='dark'?saved:media.matches?'dark':'light';
+   document.documentElement.dataset.theme=next;setTheme(next);setReady(true);
+  };sync();media.addEventListener('change',sync);window.addEventListener('storage',sync);
+  return()=>{media.removeEventListener('change',sync);window.removeEventListener('storage',sync);};
+ },[]);
+ async function toggle(event:React.MouseEvent<HTMLButtonElement>){
+  if(transitioning.current)return;
+  const next:Theme=theme==='dark'?'light':'dark';
+  const change=()=>{document.documentElement.dataset.theme=next;flushSync(()=>setTheme(next));try{localStorage.setItem('score-theme',next);}catch{}};
+  if(!document.startViewTransition||matchMedia('(prefers-reduced-motion: reduce)').matches){change();return;}
+  const box=event.currentTarget.getBoundingClientRect(),x=box.left+box.width/2,y=box.top+box.height/2;
+  const radius=Math.hypot(Math.max(x,innerWidth-x),Math.max(y,innerHeight-y));
+  transitioning.current=true;
+  try{
+   const transition=document.startViewTransition(change);
+   await transition.ready;
+   await document.documentElement.animate({clipPath:[`circle(0px at ${x}px ${y}px)`,`circle(${radius}px at ${x}px ${y}px)`]},{duration:800,easing:'cubic-bezier(.22,.61,.36,1)',pseudoElement:'::view-transition-new(root)',fill:'both'}).finished;
+   await transition.finished;
+  }catch{}finally{transitioning.current=false;}
+ }
+ return <button className="theme-toggle" onClick={toggle} aria-label={theme==='dark'?'Switch to white mode':'Switch to dark mode'} style={{visibility:ready?'visible':'hidden'}}>{theme==='dark'?<Sun size={19}/>:<Moon size={19}/>}</button>;
+}

components/TranscriptionPreview.tsx

@@ -0,0 +1,18 @@
+'use client';
+import {useEffect,useState} from 'react';
+import {useRouter} from 'next/navigation';
+import ThemeToggle from './ThemeToggle';
+import {choosePerformer,type PerformerId} from '@/lib/performers';
+import Processing from './Processing';
+
+export default function TranscriptionPreview(){
+ const router=useRouter();
+ const [performer,setPerformer]=useState<PerformerId|null>(null);
+ useEffect(()=>{
+  setPerformer(choosePerformer(null));
+ },[]);
+ return <>
+  <ThemeToggle/>
+  {performer&&<Processing cancelLabel="Back to upload" performer={performer} onCancel={()=>router.push('/')}/>}
+ </>;
+}

env.example

@@ -0,0 +1,9 @@
+APP_ORIGIN=http://localhost:3000
+HF_API_SPACE=Reubencf/Score-Studio-API
+HF_API_ORIGIN=https://reubencf-score-studio-api.hf.space
+HF_OAUTH_CLIENT_ID=https://reubencf-score-studio-api.hf.space/.well-known/oauth-cimd
+# Required in production: a 64-character random hex string, stored as a Space secret.
+# Generate with: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
+SESSION_SECRET=
+# Optional local path to Python with yt-dlp installed. ffmpeg/ffprobe must be on PATH.
+PYTHON_BIN=python

lib/audio.ts

@@ -0,0 +1,26 @@
+import {execFile} from 'node:child_process';
+import {promisify} from 'node:util';
+import {mkdtemp,writeFile,readFile,rm} from 'node:fs/promises';
+import {tmpdir} from 'node:os';
+import path from 'node:path';
+const run=promisify(execFile);
+
+/** Decode the entire input and measure it server-side; never trust client duration. */
+export async function prepareAudio(input:File,signal:AbortSignal){
+ const dir=await mkdtemp(path.join(tmpdir(),'score-audio-'));
+ try{
+  const source=path.join(dir,'source'),wav=path.join(dir,'audio.wav');
+  await writeFile(source,new Uint8Array(await input.arrayBuffer()));
+  // One extra second detects overlong recordings without decoding unbounded input.
+  await run('ffmpeg',['-nostdin','-v','error','-protocol_whitelist','file,pipe','-format_whitelist','wav,mp3,mov,matroska,webm,ogg,flac,aac,aiff','-i',source,'-map','0:a:0','-vn','-t','601','-ac','1','-ar','24000','-y',wav],{windowsHide:true,timeout:90000,signal,maxBuffer:1024*1024});
+  const {stdout}=await run('ffprobe',['-v','error','-show_entries','format=duration','-of','default=noprint_wrappers=1:nokey=1',wav],{windowsHide:true,timeout:15000,signal});
+  const duration=Number(stdout.trim());
+  if(!Number.isFinite(duration)||duration<5)throw new Error('Use a recording with at least five seconds of audio.');
+  if(duration>600)throw new Error('This recording is longer than the current ten-minute limit. Nothing was cut or submitted.');
+  const bytes=await readFile(wav);
+  return {audio:new File([new Uint8Array(bytes)],'recording.wav',{type:'audio/wav'}),duration};
+ }catch(error){
+  if(error instanceof Error&&(/five seconds|ten-minute/.test(error.message)||error.name==='AbortError'))throw error;
+  throw new Error('This recording could not be read. Try an MP3, WAV, M4A, OGG, or FLAC file.');
+ }finally{await rm(dir,{recursive:true,force:true});}
+}

lib/auth.ts

@@ -0,0 +1,47 @@
+import './server-tls';
+import {createCipheriv,createDecipheriv,randomBytes,createHash} from 'node:crypto';
+import {cookies} from 'next/headers';
+
+export const SESSION_COOKIE='score-session';
+export const FLOW_COOKIE='score-oauth';
+export const CLIENT_ID=process.env.HF_OAUTH_CLIENT_ID||'https://reubencf-score-studio-api.hf.space/.well-known/oauth-cimd';
+type Session={token:string;expires:number;user:{id:string;name:string}};
+export type OAuthFlow={state:string;verifier:string;expires:number};
+const devGlobal=globalThis as typeof globalThis & {scoreSessionKey?:Buffer};
+function key(){
+ const secret=process.env.SESSION_SECRET;
+ if(secret){if(!/^[a-f\d]{64}$/i.test(secret))throw new Error('SESSION_SECRET must contain 32 random bytes encoded as hex.');return Buffer.from(secret,'hex');}
+ if(process.env.NODE_ENV==='production')throw new Error('SESSION_SECRET is required.');
+ return devGlobal.scoreSessionKey??=(randomBytes(32));
+}
+export function seal(value:unknown){
+ const iv=randomBytes(12),cipher=createCipheriv('aes-256-gcm',key(),iv);
+ const encrypted=Buffer.concat([cipher.update(JSON.stringify(value),'utf8'),cipher.final()]);
+ return Buffer.concat([iv,cipher.getAuthTag(),encrypted]).toString('base64url');
+}
+export function unseal<T>(value?:string):T|null{
+ if(!value)return null;
+ try{const bytes=Buffer.from(value,'base64url');if(bytes.length<29)return null;
+  const decipher=createDecipheriv('aes-256-gcm',key(),bytes.subarray(0,12));decipher.setAuthTag(bytes.subarray(12,28));
+  return JSON.parse(Buffer.concat([decipher.update(bytes.subarray(28)),decipher.final()]).toString('utf8')) as T;
+ }catch{return null;}
+}
+export function appOrigin(){
+ const configured=process.env.APP_ORIGIN||(process.env.SPACE_HOST?'https://'+process.env.SPACE_HOST:undefined);
+ if(!configured&&process.env.NODE_ENV==='production')throw new Error('APP_ORIGIN is required.');
+ return new URL(configured||'http://localhost:3000').origin;
+}
+export function cookieOptions(maxAge:number){return {httpOnly:true,secure:appOrigin().startsWith('https:'),sameSite:'lax' as const,path:'/',maxAge};}
+export async function session(){
+ const value=unseal<Session>((await cookies()).get(SESSION_COOKIE)?.value);
+ return value&&typeof value.token==='string'&&value.expires>Date.now()&&value.user?.id?value:null;
+}
+export async function authorize(req:Request){
+ const user=await session();
+ if(!user)return {error:Response.json({error:'Sign in with Hugging Face to continue.',signIn:true},{status:401})} as const;
+ if(req.method!=='GET'&&(req.headers.get('origin')!==appOrigin()||req.headers.get('sec-fetch-site')==='cross-site'))
+  return {error:Response.json({error:'Please submit from Score Studio.'},{status:403})} as const;
+ return {session:user} as const;
+}
+export function createFlow():OAuthFlow{return {state:randomBytes(32).toString('base64url'),verifier:randomBytes(32).toString('base64url'),expires:Date.now()+600000};}
+export function challenge(verifier:string){return createHash('sha256').update(verifier).digest('base64url');}

lib/media.ts

@@ -0,0 +1,12 @@
+import {tmpdir} from 'node:os';
+import path from 'node:path';
+import {mkdir,readdir,stat,rm} from 'node:fs/promises';
+export const mediaRoot=path.join(tmpdir(),'score-studio-media');
+export async function prepareMedia(){
+ await mkdir(mediaRoot,{recursive:true});
+ for(const id of await readdir(mediaRoot)){
+  if(!/^[a-f0-9-]{36}$/.test(id))continue;
+  const dir=path.join(mediaRoot,id);
+  try{if(Date.now()-(await stat(dir)).mtimeMs>3600000)await rm(dir,{recursive:true,force:true});}catch{}
+ }
+}

lib/performers.ts

@@ -0,0 +1,70 @@
+export const PERFORMERS=[
+ {id:'saxophone',label:'Saxophone',person:'saxophonist'},
+ {id:'guitar',label:'Guitar',person:'guitarist'},
+ {id:'piano',label:'Piano',person:'pianist'},
+ {id:'drums',label:'Drums',person:'drummer'},
+] as const;
+export type PerformerId=typeof PERFORMERS[number]['id'];
+export const POSE_COUNT=16;
+export const LOOP_SECONDS=5.7;
+export const GRID_SIZE=512;
+export const GRID_SPACING=9;
+export type PerformerDot={x:number;y:number;coverage:Float32Array};
+const cache=new Map<PerformerId,Promise<PerformerDot[]>>();
+
+export function choosePerformer(previous:PerformerId|null):PerformerId{
+ const options=PERFORMERS.filter(item=>item.id!==previous);
+ return options[Math.floor(Math.random()*options.length)].id;
+}
+
+// Continuous slopes avoid a stop/start at each illustrated pose.
+export function coverageAt(poses:Float32Array,position:number){
+ const index=Math.floor(position),t=position-index,n=poses.length;
+ const p0=poses[(index+n-1)%n],p1=poses[index%n],p2=poses[(index+1)%n],p3=poses[(index+2)%n];
+ const value=.5*(2*p1+(-p0+p2)*t+(2*p0-5*p1+4*p2-p3)*t*t+(-p0+3*p1-3*p2+p3)*t*t*t);
+ return Math.max(0,Math.min(1,value));
+}
+
+export function loadPerformer(id:PerformerId):Promise<PerformerDot[]>{
+ const cached=cache.get(id);if(cached)return cached;
+ const pending=new Promise<PerformerDot[]>((resolve,reject)=>{
+  const img=new Image();
+  img.onload=()=>{
+   try{
+    const sample=document.createElement('canvas');sample.width=GRID_SIZE;sample.height=GRID_SIZE;
+    const scan=sample.getContext('2d',{willReadFrequently:true});
+    if(!scan)throw new Error('Canvas is unavailable.');
+    const grid:PerformerDot[]=[];
+    for(let y=9;y<504;y+=GRID_SPACING)for(let x=9;x<504;x+=GRID_SPACING)
+     grid.push({x,y,coverage:new Float32Array(POSE_COUNT)});
+    const cellWidth=img.naturalWidth/4,cellHeight=img.naturalHeight/4;
+    for(let pose=0;pose<POSE_COUNT;pose++){
+     scan.clearRect(0,0,GRID_SIZE,GRID_SIZE);
+     scan.drawImage(img,(pose%4)*cellWidth,Math.floor(pose/4)*cellHeight,cellWidth,cellHeight,0,0,GRID_SIZE,GRID_SIZE);
+     const pixels=scan.getImageData(0,0,GRID_SIZE,GRID_SIZE).data;
+     for(const dot of grid){
+      let coverage=0;
+      // Preserve the generated alpha silhouette, including dark clothing.
+      // Discard faint matte fringes. The grid never moves between poses.
+      for(let dy=-4;dy<=4;dy++)for(let dx=-4;dx<=4;dx++){
+       const p=((dot.y+dy)*GRID_SIZE+dot.x+dx)*4;
+       const alpha=Math.max(0,(pixels[p+3]-32)/223);
+       // Keep the acoustic guitar's soundhole and the strumming hand legible.
+       const detail=id==='guitar'?Math.max(0,((pixels[p]+pixels[p+1]+pixels[p+2])/3-24)/231):1;
+       coverage+=alpha*detail;
+      }
+      dot.coverage[pose]=Math.min(1,coverage/81);
+     }
+    }
+    const dots=grid.filter(dot=>dot.coverage.some(value=>value>.01));
+    if(!dots.length)throw new Error('The performer artwork is empty.');
+    resolve(dots);
+   }catch(error){reject(error);}
+  };
+  img.onerror=()=>reject(new Error('The performer artwork could not load.'));
+  img.src='/performers/'+id+'.png';
+ });
+ cache.set(id,pending);
+ pending.catch(()=>cache.delete(id));
+ return pending;
+}

lib/server-tls.ts

@@ -0,0 +1,7 @@
+import {getCACertificates,setDefaultCACertificates} from 'node:tls';
+
+// Include certificates trusted by the host OS without disabling verification.
+// This also covers Gradio's HTTPS calls on Windows development machines.
+if (typeof setDefaultCACertificates==='function') {
+ setDefaultCACertificates([...new Set([...getCACertificates('default'),...getCACertificates('system')])]);
+}

lib/types.ts

@@ -0,0 +1,4 @@
+export type Download = {name:string;url:string};
+export type Source = {title:string;artist?:string;thumbnail?:string;url?:string;audioUrl?:string};
+export type ScoreResult = {abc:string;status:string;downloads:Download[];pdf?:string;audio?:string};
+export const DEMO_ABC = 'X:1\nT:A little room for music\nC:Score Studio demo\nM:4/4\nL:1/8\nQ:1/4=96\nK:C\n"C" E2 G2 c2 B2 | "Am" A3 G E2 C2 | "F" F2 A2 c2 A2 | "G" B2 G2 D4 |\n"C" E2 G2 c2 e2 | "Am" d2 c2 A4 | "F" A2 G2 F2 E2 | "C" D2 E2 C4 |]';

lib/youtube.ts

@@ -0,0 +1,13 @@
+export function youtubeId(value:string):string|null {
+ try {
+  const u=new URL(value.trim()); if(u.protocol!=='https:' && u.protocol!=='http:')return null;
+  if(u.username||u.password||u.port)return null;
+  const host=u.hostname.toLowerCase();let id:string|null=null;
+  if(host==='youtu.be')id=u.pathname.slice(1).split('/')[0];
+  else if(['youtube.com','www.youtube.com','m.youtube.com','music.youtube.com'].includes(host)) {
+   if(u.pathname==='/watch')id=u.searchParams.get('v');
+   else if(/^\/(shorts|embed|live)\//.test(u.pathname))id=u.pathname.split('/')[2];
+  }
+  return id && /^[A-Za-z0-9_-]{11}$/.test(id)?id:null;
+ }catch{return null;}
+}

next-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+import "./.next/types/root-params.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,3 @@
+import type { NextConfig } from 'next';
+const config: NextConfig = { output: 'standalone', poweredByHeader: false };
+export default config;

package-lock.json

@@ -0,0 +1,1116 @@
+{
+  "name": "score-studio",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "score-studio",
+      "version": "1.0.0",
+      "dependencies": {
+        "@gradio/client": "2.6.0",
+        "abcjs": "6.6.3",
+        "lucide-react": "^0.577.0",
+        "next": "16.3.4",
+        "react": "19.2.4",
+        "react-dom": "19.2.4"
+      },
+      "devDependencies": {
+        "@types/node": "^24.0.0",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "typescript": "^5.9.3"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.3.tgz",
+      "integrity": "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@gradio/client": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@gradio/client/-/client-2.6.0.tgz",
+      "integrity": "sha512-6UEzLru4kHI1zrnIVM1TEo9R6Qn3M9Ov+AySbonaCb57X5R7wesne9sXT7tbrGLiGFKeLnC7UgEGF6QaJoTHrw==",
+      "license": "ISC",
+      "dependencies": {
+        "fetch-event-stream": "^0.1.5"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.35.4.tgz",
+      "integrity": "sha512-Uhfl4V4lhP2nbUVF9+hyH1+luj86f1gUFeo8ALYxFoULoU+G87D43BfeMP8XHsk9boxAnCY/bf2EHwhA7MuGsA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.4.tgz",
+      "integrity": "sha512-hWniXY3bG5qKpkKrAwPe4y+VTPmf086YQAnkxWh7uA1YrlRouWGa0M0Mxj3ZjnXFkv7/TD1bTy9lGUK26vRvWw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-freebsd-wasm32": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.4.tgz",
+      "integrity": "sha512-lIsKw/BU+kjB4eZjxrYrZmwOJYi3Ajrv66iAlBmUPyKc3HpnloevB1g3wxGD9P/5BbQ1brBGl65VRRrCvQDEqA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "dependencies": {
+        "@img/sharp-wasm32": "0.35.4"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.3.3.tgz",
+      "integrity": "sha512-suTBPTDGrI9WodccaDdwZItTSaBYASlBk1NSfElSHrUfzu3szG6lvIF58+WiFvnfzuK8ZBFS5zE00PxqxnRiPg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.3.tgz",
+      "integrity": "sha512-FVJZ5mITMobmXIz/hPDTw0EintTW5H3WfrxwLqEqjiIihlu+hVRyGrFQ60xl0Lxn7Bt3zdpevPaQi0HEzqz9fw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.3.tgz",
+      "integrity": "sha512-3rbU4vqXXc3hY/OiXdl52xZvT0F1yEngWfvqudtPJg/KkyiaQw2DRsFrNzpmLvfavbwOq3qXn36GP8obHRULQA==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.3.tgz",
+      "integrity": "sha512-0DaL0A6Xu6sQSQFwe4iVCrKWU2cCTItnRsYsCdxAMm9NF6twAA9BKnoqy4hqz4+azQ0JHuA26qiUKsf1XJ/v5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.3.tgz",
+      "integrity": "sha512-cdn1OvUBwsXhbC0zSzJnNzf5MZ/mTrobawDvNXBTxe8VtqKAm0sRuEY2Evzovb/w9JMk4TvRxqt1mekSuJz64w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.3.tgz",
+      "integrity": "sha512-HjPVx7yKz+0lqdhDlTw1tt90wamBoxhiXpvl1XZpJLiHH4RCJ5yDTqH+VlYPv2fwFs89JFw4c1IexYOcQUi4IQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.3.tgz",
+      "integrity": "sha512-neWLh+3yCNThxnfy3c4BbVBeGgt9aftno+XbT56iK28RgeDs3UOFWviLWlUu0bArYVYJaFDK+RRohbicUNCm8Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.3.tgz",
+      "integrity": "sha512-4vKmvAst9nrowcqquKFAyZJUDolUaIp8uRiN0mWFguJ1IplC9/pitXtlnnlU4aa/eJw3J7i67V+pwUL+wZGdsA==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.3.tgz",
+      "integrity": "sha512-Y9kQaLMuNoB0bPYOOdcZMaseNrFpPodIWWMrx+CZyydf2xn68j9WYc6sWWRrDwNkzCQjKYfc68L7jKjGlHMibw==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.3.tgz",
+      "integrity": "sha512-fj8Mv0HHfD1Rr+4I68+3agJynxDWtBFgicTbSOb9Bke6pIwzGcJ+RX/yHjmiEGFMCavY/dxvem7MyNaJF+wDiw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.4.tgz",
+      "integrity": "sha512-7OAS8gI0EReKGVN2HssHlM6umJgxF5VI3xN0p9FA91p/YO+ou5hiNghLdZ5BEHztwaaK5+bLKRf8x/o2L2nk9A==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.4.tgz",
+      "integrity": "sha512-De4jpEnAU8Hd5oT0j1G3uL4ZvTuipVMn7YC6vPaJhy6/7EwEae0SVAoBrUMYQbkLGDm85taVWwuPc1a44LTzCQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.4.tgz",
+      "integrity": "sha512-2oYZJeIl4kCcMGk4ouZVjnkCtFrpQFlNEtJ6GbxzhHQchwH0NH/qEb9ykmOl29dqwMq+JhFdZn+1ak2FKhI9fQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.4.tgz",
+      "integrity": "sha512-cPbNChoRURAWdebDIHSenxRpgEdy7JkPydSnUxRm9VvKD7m0/xVaR/8Fzlu81pk5nHEvHH87UZUA7cTtwnbJSA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.4.tgz",
+      "integrity": "sha512-RY0JFY8Fd6RonCBtHz+DvadaPkXDSI1AUn6yWL9TipqkZ1vY8w8evqdgyDFnkm4/K1ve1TvZiaePP5oSd4+WVQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.4.tgz",
+      "integrity": "sha512-9qvvEAuk8k89TfWUoX2htWjbAMX8p+NxCppjpcg5k6xMsjhBQPTsoIh36h9Qde4WRuGpJeYnOjdosDn/cnv+OA==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.4.tgz",
+      "integrity": "sha512-KB5jxpfWQTr0nc3xdHtWChdbifHrBGsd2SM62Eyxrl8afikm+f5qGBU75SJIZBT/S1MC8XyacdlXBMSWq6OURA==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.4.tgz",
+      "integrity": "sha512-f+eZJZIQNEEd26RPSW+76chwOf1XtA2Y/O+5ocVyLliHkeih3e+jhLVBdNTd2rS3IbNXK8+ug93Vf5ZXtF5Lxg==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.35.4.tgz",
+      "integrity": "sha512-zQnl4Kwp7Q6NHsENtU2T/00Zi+w3AQNwz3+UaTyVBy2FpXrzXzGjndpK61onhZjRtRpQXxCTeqw19bVyXOh7jA==",
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.11.3"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-webcontainers-wasm32": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.4.tgz",
+      "integrity": "sha512-ESfNkywmCfPNyaZjxooddJQiQ+l/nTpGEOGthxiLnIHXC/CmcBixnfwUleX9mCz9ovrUUvKMap/pm8RYbzfwaA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/sharp-wasm32": "0.35.4"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.4.tgz",
+      "integrity": "sha512-iNdlBX9gLVvqe2I3uIJSIKTq6wckP/DYxZtcqxm09x5Gi24DnFBmPAWZmr60ZyYMG0xlzo6goG3670ar+RXvRw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.4.tgz",
+      "integrity": "sha512-kqRsbaa5CS6KHlpxnN7WhE6vAAugXyZButpRdvDWetlv6Qv4N9WTcrWzF7tXfB9T7MsoadqdI8hmwLq6UlLvtw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.4.tgz",
+      "integrity": "sha512-XtmnYhBcrORsJ4XJngyzr/EWP0hRZLAZRFaApdKuviyqF78+ylxh2y06ZmtULAMOnObJ3ucpN0AcwSWnMowTRg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.3.4.tgz",
+      "integrity": "sha512-cjWZnUUa6jZq2kFaNe/ZyJdZonOZ/QoN0Zka2nz/FLOrfx14pQuM9c5RaSVkWMqgdt4ksgPAMWPyHSs/CyV48Q==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.3.4.tgz",
+      "integrity": "sha512-iBr3I5LZNk5/bgl5//iTgD2tcym14MX0Xo7fD//u9dYAEgGzza1y9oywluPtf74YnOswVdH1908aK9xVz7zQTw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.3.4.tgz",
+      "integrity": "sha512-2dpiSyl2Jw/NrBPaU2MAKGSa+2MR82pJIn4Sm5Rjr+gxAeuh0z158Su3Z2O8zn7UNNq+ej4bToed6RcRN/Lydg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.3.4.tgz",
+      "integrity": "sha512-+t+U8HZT+fApePCS5h89CSH3datz29MkzyfCn+6fpsZBG/oiEOhINcb9rtkv6sdpToLGFn2e6146NzaKCXkqrA==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.3.4.tgz",
+      "integrity": "sha512-mx03GNs1ocQA5JQ4FxDMmIsNkdrZh8cuezKCrId28e5/gIPU/l7Kcy2+vmCCzdjnnmXJy+iOAu+7K0QppO6Urg==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.3.4.tgz",
+      "integrity": "sha512-YIhGY6fSMfha52bnVxnzc9zaVBzJg+cqQTOD8tXIBSx4fuv0pVMxQTE0PaS59YhnMOiYiG09IMwxJAf/CFm/Dw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.3.4.tgz",
+      "integrity": "sha512-+eaaX6axpDb0yF1GCpiERe6njplvdC+nks/fKfcHu3XPGRrald8P3/X7yv7QLdjA51knnxwl9pxdIJsg+w1L+Q==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.3.4.tgz",
+      "integrity": "sha512-0jcXW7Xs/uzICrmgV3MhDYDeRy++1CqnpDIerlPIqYO4bhzB4WNbX/aRnQclustsAyTkFKB0z6rbcjmNg5tR8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.3.4.tgz",
+      "integrity": "sha512-vvBzwu1pYQCp92maZCFCIw/XgOTMR5tur9GjakwIo2cmwRTMKajRZZDS9+e4KsUZWKu1E007WUeAFXRRjZeuzw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.23",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+      "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "24.13.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.4.tgz",
+      "integrity": "sha512-YJ7EqCstVTzIr0fMr7qul/977en+pQHrfmuKIo6Zr9i75Be21dr3MovcfvGtyvi2HAUrRerWps5sMO9I7WaxDw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.3.0.tgz",
+      "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.3.0.tgz",
+      "integrity": "sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.3.0"
+      }
+    },
+    "node_modules/abcjs": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/abcjs/-/abcjs-6.6.3.tgz",
+      "integrity": "sha512-BerGJCY8+pvJV1+VxZn1Y/VNcuSAk8BysCbBICY0W8fgE5g4W6sA/zB5pKxcgqzY5/gObh8ugl++4ZoaTqUCkw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/paulrosen"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.11.22",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.22.tgz",
+      "integrity": "sha512-pWc4w51fBFd7mav43/zKRC+RI6f4yfzQoVlfvE8dECePyfkn1bzLp01Fj0QACcyCZyFhiEMyD2qScfKRWgWibA==",
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001810",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001810.tgz",
+      "integrity": "sha512-TITQPUkaz+aVk5GL6NhOdwk1aEaNTSDPsGFWrTuhKGtjTF70jL/Oht2W4c6rXUe5fu7Ie19VIahAXHIIiWWNeg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fetch-event-stream": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/fetch-event-stream/-/fetch-event-stream-0.1.6.tgz",
+      "integrity": "sha512-GREtJ5HNikdU2AXtZ6E/5bk+aslMU6ie5mPG6H9nvsdDkkHQ6m5lHwmmmDTOBexok9hApQ7EprsXCdmz9ZC68w==",
+      "license": "MIT"
+    },
+    "node_modules/lucide-react": {
+      "version": "0.577.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.577.0.tgz",
+      "integrity": "sha512-4LjoFv2eEPwYDPg/CUdBJQSDfPyzXCRrVW1X7jrx/trgxnxkHFjnVZINbzvzxjN70dxychOfg+FTYwBiS3pQ5A==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.19",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz",
+      "integrity": "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.3.4.tgz",
+      "integrity": "sha512-/Ztf6CeRH+ejEXUrYtqI4gkS66eFIHuSwqi60RgcpWKodxFZx2/dqVCMKBwILfAHXQ+F1b1vAudgj3mnxqtoIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "16.3.4",
+        "@swc/helpers": "0.5.23",
+        "baseline-browser-mapping": "^2.9.19",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.5.23",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "16.3.4",
+        "@next/swc-darwin-x64": "16.3.4",
+        "@next/swc-linux-arm64-gnu": "16.3.4",
+        "@next/swc-linux-arm64-musl": "16.3.4",
+        "@next/swc-linux-x64-gnu": "16.3.4",
+        "@next/swc-linux-x64-musl": "16.3.4",
+        "@next/swc-win32-arm64-msvc": "16.3.4",
+        "@next/swc-win32-x64-msvc": "16.3.4",
+        "sharp": "^0.35.4"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.51.1",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.23.tgz",
+      "integrity": "sha512-g50586zr4bZmwFiTlflMu8E0bDTb5I5gertgwAKmsdUlTQIhZtunzUlD1WSzwcVWPoAVpsrA6vlfCD7oXvRwgg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.16",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
+      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.4"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.4.tgz",
+      "integrity": "sha512-n++8XWcj+jCOr2IOl7h8LbKnGBDY4aPbmprMONBNFdn0ImXqpGVv5zliDs0V9HbmbCQLpbuo2ej9rAoOQTvMDA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/colour": "^1.1.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.8.5"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.35.4",
+        "@img/sharp-darwin-x64": "0.35.4",
+        "@img/sharp-freebsd-wasm32": "0.35.4",
+        "@img/sharp-libvips-darwin-arm64": "1.3.3",
+        "@img/sharp-libvips-darwin-x64": "1.3.3",
+        "@img/sharp-libvips-linux-arm": "1.3.3",
+        "@img/sharp-libvips-linux-arm64": "1.3.3",
+        "@img/sharp-libvips-linux-ppc64": "1.3.3",
+        "@img/sharp-libvips-linux-riscv64": "1.3.3",
+        "@img/sharp-libvips-linux-s390x": "1.3.3",
+        "@img/sharp-libvips-linux-x64": "1.3.3",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.3",
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.3",
+        "@img/sharp-linux-arm": "0.35.4",
+        "@img/sharp-linux-arm64": "0.35.4",
+        "@img/sharp-linux-ppc64": "0.35.4",
+        "@img/sharp-linux-riscv64": "0.35.4",
+        "@img/sharp-linux-s390x": "0.35.4",
+        "@img/sharp-linux-x64": "0.35.4",
+        "@img/sharp-linuxmusl-arm64": "0.35.4",
+        "@img/sharp-linuxmusl-x64": "0.35.4",
+        "@img/sharp-webcontainers-wasm32": "0.35.4",
+        "@img/sharp-win32-arm64": "0.35.4",
+        "@img/sharp-win32-ia32": "0.35.4",
+        "@img/sharp-win32-x64": "0.35.4"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}

package.json

@@ -0,0 +1 @@
+{"name":"score-studio","version":"1.0.0","private":true,"scripts":{"dev":"next dev --hostname 0.0.0.0","build":"next build","start":"next start --hostname 0.0.0.0","typecheck":"tsc --noEmit"},"dependencies":{"next":"16.3.4","react":"19.2.4","react-dom":"19.2.4","@gradio/client":"2.6.0","abcjs":"6.6.3","lucide-react":"^0.577.0"},"devDependencies":{"typescript":"^5.9.3","@types/node":"^24.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"}}

public/LICENSE.abcjs

@@ -0,0 +1,21 @@
+Copyright (c) 2009-2024 Paul Rosen and Gregory Dyke
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+**This text is from: http://opensource.org/licenses/MIT**

public/fonts/README.md

@@ -0,0 +1,6 @@
+# Fonts
+
+Supreme Regular and Bespoke Stencil Bold by Indian Type Foundry, distributed by Fontshare.
+Official sources: https://www.fontshare.com/fonts/supreme and https://www.fontshare.com/fonts/bespoke-stencil
+Fontshare licensing: https://www.fontshare.com/licenses
+Downloaded from the official Fontshare CSS/CDN for self-hosted web use.

public/soundfonts/ATTRIBUTION.md

@@ -0,0 +1,11 @@
+# Piano samples
+
+FluidR3 GM by Frank Wen. License: Creative Commons Attribution 3.0 US.
+https://creativecommons.org/licenses/by/3.0/us/
+
+Pre-rendered MP3 samples from Paul Rosen's fork of gleitz/midi-js-soundfonts:
+https://github.com/paulrosen/midi-js-soundfonts
+https://raw.githubusercontent.com/paulrosen/midi-js-soundfonts/gh-pages/FluidR3_GM/acoustic_grand_piano-mp3.js
+
+The base64 samples were unpacked into individual MP3 files without changing the
+audio, for same-origin/offline ABCJS score playback. Only piano is bundled.