	Recording	→ Work	Reason	Conf.
toggle(c.id)} onClick={(e) => e.stopPropagation()} />	{c.recording} {c.artist} · {c.isrc}	{c.work} {window.iswcDisplay ? window.iswcDisplay(c.iswc) : c.iswc}	{c.reason}	= 0.9 ? '#2d6a4f' : 'var(--ink)' }}> {Math.round(c.conf * 100)}%

	Title	ISWC	Writers	Shares	Status	Plays	Soc.
e.stopPropagation()} />	{String(i + 1).padStart(2, '0')} {w.title}	{window.iswcDisplay ? window.iswcDisplay(w.iswc) : w.iswc}	{w.writers.join(' · ')}	{w.shares}	{w.status}	{(w.plays / 1e6).toFixed(1)}M	{w.societies}

{/* Waveform with click-to-seek + live progress overlay */}

{/* Progress vertical line — no transition, drawn fresh every frame for smooth tracking */}

{fmt(time)} / {fmt(totalDur)}

{src ? src.kind === 'demo' ? 'DEMO PREVIEW' : src.kind === 'upload' ? 'UPLOADED' : src.kind === 'memo' ? 'VOICE MEMO' : src.kind === 'recording' ? 'LINKED RECORDING' : 'PREVIEW' : '—'}

{/* Source menu */}

{menuOpen && <>

{setMenuOpen(false);setMenuView('main');}} style={{ position: 'fixed', inset: 0, zIndex: 80 }} />

{menuView === 'main' && <>

AUDIO SOURCE

{src ? src.label : '—'}

{src && src.kind === 'demo' && 'Synthesized preview · click upload to attach a real reference'} {src && src.kind === 'upload' && `User upload · ${src.filename}`} {src && src.kind === 'recording' && 'Linked recording from this work'} {src && src.kind === 'memo' && 'Voice memo captured from microphone'}

{recCount > 0 && } {src && src.kind !== 'demo' && } } {menuView === 'recordings' && <>

LINKED RECORDINGS · {recCount}

{(typeof recordingsForWork === 'function' ? recordingsForWork(w.id) : []).map((rec) => { const active = src && src.kind === 'recording' && src.recordingId === rec.id; return ( ); })}

}

{/* Recording bar */} {recState.active &&

REC

{Math.floor(recState.elapsed / 60)}:{String(Math.floor(recState.elapsed % 60)).padStart(2, '0')} .{String(Math.floor(recState.elapsed % 1 * 10))}

Capturing from microphone…

} {recState.error &&

⚠ {recState.error}

} {/* Audio source line */}

NOW PLAYING: {src ? src.label : '—'}

{src && src.kind === 'demo' && ⓪ No real audio attached — preview only} {src && src.kind === 'upload' && ● File loaded locally · not yet synced to server} {src && src.kind === 'recording' && ● From linked recording} {src && src.kind === 'memo' && ● Voice memo · captured locally}

); } // ───────────────────────────────────────────────────────────── WORK DETAIL function ScreenWork({ go, work }) { const w = work || WORKS[0]; const [tab, setTab] = useS1('overview'); const [editing, setEditing] = useS1(false); const [historyOpen, setHistoryOpen] = useS1(false); const [cwrModalOpen, setCwrModalOpen] = useS1(false); const [ddexModalOpen, setDdexModalOpen] = useS1(false); const [publicModalOpen, setPublicModalOpen] = useS1(false); // Initial editable model — derived from the static work row const sharesStr = (w && typeof w.shares === 'string') ? w.shares : ''; const initialSplits = sharesStr.includes('/') ? sharesStr.split('/').map(n => Number(n) || 0) : [100]; const initialModel = useM1(() => ({ title: w.title, iswc: w.iswc, catalog: w.catalog, copyright: w.copyright, status: w.status, pro: w.pro, writers: w.writers.map((wr, i) => { const sh = initialSplits[i] != null ? initialSplits[i] : Math.round(100 / w.writers.length); // First writer is self-published (writer keeps publisher share); others are signed // to the work's catalog admin. const isSelf = i === 0; return { name: wr, share: sh, ipi: String(883112 + i * 23), pro: w.pro, role: i === 0 ? 'Composer/Author' : 'Composer', splitShares: false, perfShare: sh, mechShare: sh, syncShare: sh, territories: ['World'], workForHire: false, reversionary: false, firstRecRefusal: false, pubs: [{ name: isSelf ? '' : w.catalog || 'Pluralis Music', pro: w.pro, ipi: isSelf ? '' : String(551020 + i * 47), selfPub: isSelf, unknown: false, controlled: true, role: 'Original Publisher', share: sh, territories: ['World'], admins: isSelf ? [] : [{ role: 'Sub-pub', name: 'Kobalt Music Services', pro: 'PRS', ipi: '00214477331', controlled: true, pubRole: 'Original Publisher', share: Math.round(sh * 0.5), territories: ['UK / Ireland'] }] }] }; }), societyIds: [ { society: 'BMI', workId: '22-441-883' }, { society: 'ASCAP', workId: '884220551' }, { society: 'MusicBrainz', workId: 'e8a9f2-c1b3-4e88-a7d2-991c' }], altTitles: [ { title: w.title.toUpperCase(), type: 'Original Title', language: 'English' }], musicalKey: ['C minor', 'A minor', 'F# minor', 'D major', 'G major', 'E minor', 'B♭ major'][w.id.charCodeAt(2) % 7], tempo: 60 + w.id.charCodeAt(2) * 7 % 80, language: 'English', category: 'Original', instrumental: false, lyricsLanguage: 'English', lyrics: w.title.toUpperCase().includes('INSTRUMENTAL') ? '' : `[Verse 1] Walking through the city lights tonight Counting all the reasons we'll be alright Every street a story we can write Every shadow holding on to light [Chorus] And the world keeps turning slowly Holding everything we've known We're just trying to find our way home Find our way home [Verse 2] Memory is a river running deep All the promises we couldn't keep Folding into hours that we sleep Quiet seasons, quiet things to keep [Chorus] And the world keeps turning slowly Holding everything we've known We're just trying to find our way home Find our way home [Bridge] If the morning ever finds us Standing in the same old place We will know it by the kindness Living in each other's face [Outro] We're just trying to find our way home We're just trying to find our way home`, lyricsUpdated: '2026-03-14T11:42:00Z', rights: [ { id: 'reg-1', type: 'PA', certNumber: `PA 2-${402 + w.id.charCodeAt(2) % 9 * 100}-${311 + w.id.charCodeAt(2) % 17 * 7}`, registrationDate: '2024-08-19', effectiveDate: '2024-08-12', jurisdiction: 'United States · USCO', claimType: 'Original work', workForHire: false, published: true, firstPubDate: '2024-09-04', firstPubNation: 'United States', depositCopies: 2, depositFormat: 'Lead sheet · digital · WAV demo', certHolder: 'Pluralis Music LLC' }], syncPolicy: 'Pre-cleared with publisher — agency-approved', syncWithholding: [], territorialNotes: 'Worldwide control via Pluralis Music — sub-publishing in JP/KR via Plural Tokyo K.K.', reversionaryClause: '35-year termination per 17 U.S.C. § 203 — eligible 2059-08-19', astroId: `${w.id.toUpperCase()}_AST_2026_4392` }), [w.id]); const { data: m, setData, commit, history, cursor, undo, redo, revertTo } = useEditHistory(initialModel); const { pulseId, trigger: pulse } = useSavedPulse(); // ⌘Z / ⌘⇧Z useE1(() => { if (!editing) return; const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'z') { e.preventDefault(); if (e.shiftKey) redo();else undo(); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [editing, undo, redo]); const editProps = (id) => ({ 'data-edit-pulse': pulseId === id ? '1' : undefined, style: pulseId === id ? { transition: 'background .9s', background: 'oklch(0.92 0.06 80 / 0.5)' } : undefined }); // Splits drag — intermediate setData without history, final snapshot on mouse-up const handleDragSplits = (next, isFinal) => { if (isFinal) { // commit current data as a single history entry commit('Adjusted writer splits', (d) => d); return; } setData((d) => ({ ...d, writers: next })); }; return (

{/* Title block */}

WORK · {window.iswcDisplay ? window.iswcDisplay(m.iswc) : m.iswc}

{editing ? {commit(`Title → "${v}"`, (d) => ({ ...d, title: v }));pulse('title');}} className="heading-swap ff-display" style={{ fontSize: 'clamp(56px,8vw,128px)', fontWeight: 700, letterSpacing: '-0.05em', lineHeight: 0.88, margin: 0, display: 'block' }} placeholder="Untitled work" /> :

{m.title}

} {/* Alternate titles — sit just under the main title */} {((m.altTitles || []).length > 0 || editing) &&

ALSO KNOWN AS

{(m.altTitles || []).length === 0 && editing &&

No alternate titles

}

{(m.altTitles || []).map((a, i) =>

{editing ? commit(`Alt title → "${v}"`, (d) => ({ ...d, altTitles: d.altTitles.map((x, j) => j === i ? { ...x, title: v } : x) }))} style={{ fontSize: 18, fontWeight: 500, fontFamily: 'inherit', display: 'inline-block', letterSpacing: '-0.01em' }} placeholder="Alternate title" /> : {a.title} } {editing ? commit(`Alt title type → ${v}`, (d) => ({ ...d, altTitles: d.altTitles.map((x, j) => j === i ? { ...x, type: v } : x) }))} style={{ fontSize: 9, letterSpacing: '.1em' }} /> : a.type} · {editing ? commit(`Alt title language → ${v}`, (d) => ({ ...d, altTitles: d.altTitles.map((x, j) => j === i ? { ...x, language: v } : x) }))} style={{ fontSize: 9, letterSpacing: '.1em' }} /> : a.language} {editing && }

)}

{editing && }

} {/* Composition meta strip — key, tempo, language */}

KEY {editing ? {const val = v.startsWith('—') ? '' : v;commit(`Key → ${val || 'unspecified'}`, (d) => ({ ...d, musicalKey: val }));pulse('key');}} style={{ fontSize: 12 }} /> : m.musicalKey || unspecified} TEMPO {editing ? {const t = +v.replace(/\D/g, '').slice(0, 3) || 0;commit(`Tempo → ${t} BPM`, (d) => ({ ...d, tempo: t }));pulse('tempo');}} style={{ fontSize: 12, fontFamily: 'inherit', display: 'inline-block', maxWidth: 50 }} placeholder="—" /> : {m.tempo || '—'}} BPM {m.tempo > 0 && · {+m.tempo < 70 ? 'Slow' : +m.tempo < 100 ? 'Moderate' : +m.tempo < 130 ? 'Up-tempo' : 'Fast'}} METADATA LANGUAGE {editing ? {commit(`Language → ${v}`, (d) => ({ ...d, language: v }));pulse('lang');}} style={{ fontSize: 12 }} /> : m.language} LYRICS {m.instrumental ? instrumental : editing ? {commit(`Lyrics language → ${v}`, (d) => ({ ...d, lyricsLanguage: v }));pulse('llang');}} style={{ fontSize: 12 }} /> : m.lyricsLanguage}

{editing ? {commit(`Status → ${v}`, (d) => ({ ...d, status: v }));pulse('status');}} style={{ fontSize: 10, letterSpacing: '.08em', textTransform: 'uppercase', padding: '4px 10px' }} /> : {m.status} } {w.duration ? `${Math.floor(w.duration / 60)}:${String(w.duration % 60).padStart(2, '0')}` : '—'} {w.societies} societies {(w.plays / 1e6).toFixed(1)}M plays {editing ? {commit(`Catalog → ${v}`, (d) => ({ ...d, catalog: v }));pulse('catalog');}} /> : {m.catalog} } {editing ? {commit(`Copyright → "${v}"`, (d) => ({ ...d, copyright: v }));pulse('copyright');}} className="ff-mono" style={{ fontSize: 11, color: 'var(--ink-2)', padding: '4px 10px', display: 'inline-block' }} placeholder="© year, owner" /> : {m.copyright} }

} onClick={() => setCwrModalOpen(true)}>Generate CWR } onClick={() => setDdexModalOpen(true)}>Export DDEX {editing ? <> setHistoryOpen(true)}> {history.length} change{history.length === 1 ? '' : 's'} · history } onClick={() => setEditing(false)}>Done editing : } onClick={() => setEditing(true)}>Edit Work } } onClick={() => window.dispatchEvent(new CustomEvent('astro-add-song', { detail: { workId: w.id } }))}>Open full editor } onClick={() => setPublicModalOpen(true)}>Public page go && go('catalog')} />

{/* Edit-mode floating pill (bottom-right). Quiet, out of layout. */} {editing &&

EDITING · AUTO-SAVE

} {/* Audio lives on Recordings — not Works (a Work is the abstract composition). The "Recordings" tab below lists every master cut of this work, each with its own player. */} {/* Tabs */}

{['overview', 'splits', 'splitsheet', 'lyrics', 'recordings', 'rights', 'registrations', 'royalties', 'history'].map((t) => )}

{tab === 'overview' &&

{editing && m.writers.length > 1 && } {m.writers.map((wr, i) =>

0 ? 'none' : '1px solid var(--rule-soft)', display: 'grid', gridTemplateColumns: editing ? '1fr 200px 80px 24px' : '1fr 200px 60px', gap: 14, alignItems: 'center' }}>

{editing && window.WriterTypeahead ? { commit(`Writer ${i + 1} → "${patch.name}"`, (d) => ({ ...d, writers: d.writers.map((x, j) => j === i ? { ...x, ...patch } : x) })); pulse(`w-${i}`); }} /> :

{wr.name}

}

{(wr.role || 'writer').toLowerCase()} · {wr.pro} · IPI {(window.ipiDisplayCompact ? window.ipiDisplayCompact(wr.ipi) : wr.ipi)}

{editing ? { const v = Math.max(0, Math.min(100, +e.target.value || 0)); setData((d) => ({ ...d, writers: d.writers.map((x, j) => j === i ? { ...x, share: v } : x) })); }} onBlur={() => {commit(`Adjusted ${wr.name || `writer ${i + 1}`}'s share`, (d) => d);pulse(`w-${i}-share`);}} className="ff-mono num" style={{ width: 70, padding: '6px 8px', fontSize: 14, textAlign: 'right', border: 'none', borderRadius: 3, background: 'var(--edit-fill)' }} /> : {wr.share}% } {editing && }

{/* Publisher / sub-pub chain (read-only here — full edit on Splits tab) */} {(wr.pubs || []).length > 0 &&

{(wr.pubs || []).map((p, pi) =>

{p.unknown ? PUBLISHER UNKNOWN : p.selfPub ? <> SELF-PUB writer retains pub share : <> {p.name} publisher · · IPI {(window.ipiDisplayCompact ? window.ipiDisplayCompact(p.ipi) : p.ipi) || '—'} }

{p.share}%

{(p.admins || []).map((a, ai) =>

{a.name} {(a.role || 'sub-pub').toLowerCase()} · · {(a.territories || []).join(', ') || '—'}

{a.share}%

)}

} )} {editing && }

TOTAL {(() => { const tot = m.writers.reduce((a, x) => a + (+x.share || 0), 0); return ( {tot}%{tot !== 100 && (tot < 100 ? ` · ${100 - tot}% short` : ` · ${tot - 100}% over`)} ); })()} {editing && }

Identifiers

ISWC {editing ? { const canonical = window.iswcNormalize ? window.iswcNormalize(v) : v; if (canonical) { commit(`ISWC → ${canonical}`, (d) => ({ ...d, iswc: canonical })); pulse('iswc'); } else if (v && v.trim() && v.trim() !== (m.iswc || '')) { // Invalid format — surface a toast and revert. window.dispatchEvent(new CustomEvent('astro-toast',{detail:{msg:`Invalid ISWC "${v}" — expected T followed by 10 digits`,tone:'warn'}})); } }} style={{ fontSize: 12, fontFamily: 'inherit', display: 'inline-block', maxWidth: 240 }} placeholder="T0000000000" /> : {window.iswcDisplay ? window.iswcDisplay(m.iswc) : m.iswc}{window.IdChip && m.iswc ? commit(`ISWC fix → ${fix}`,(d)=>({...d,iswc:fix}))}/> : null}} ASTRO ID {m.astroId} {m.societyIds.map((row, i) => {editing ? commit(`Society label → ${v}`, (d) => ({ ...d, societyIds: d.societyIds.map((x, j) => j === i ? { ...x, society: v } : x) }))} style={{ fontSize: 11, maxWidth: 130 }} /> : {row.society === 'BMI' ? 'BMI Work#' : row.society === 'ASCAP' ? 'ASCAP TWID' : row.society === 'MusicBrainz' ? 'MusicBrainz' : row.society} }

{editing ? {commit(`${row.society} ID → ${v}`, (d) => ({ ...d, societyIds: d.societyIds.map((x, j) => j === i ? { ...x, workId: v } : x) }));pulse(`sid-${i}`);}} style={{ fontSize: 12, fontFamily: 'inherit', display: 'inline-block', flex: 1 }} placeholder="—" /> : {row.workId}} {editing && }

)} {editing && <> }

Recent activity

Society registrations

Earnings · 12mo

} {tab === 'recordings' && } {tab === 'splitsheet' && window.SplitSheetWorkshop && } {tab === 'splits' && } {tab === 'lyrics' && } {tab === 'rights' && } {tab === 'registrations' && } {tab === 'history' && } {tab === 'royalties' && } {tab !== 'overview' && tab !== 'recordings' && tab !== 'splits' && tab !== 'splitsheet' && tab !== 'lyrics' && tab !== 'rights' && tab !== 'registrations' && tab !== 'history' && tab !== 'royalties' &&

{tab}

Detailed {tab} pane.

} setHistoryOpen(false)} history={history} cursor={cursor} onUndo={undo} onRedo={redo} onRevert={revertTo} /> {/* Export modals */} {cwrModalOpen && setCwrModalOpen(false)} commit={commit}/>} {ddexModalOpen && setDdexModalOpen(false)} commit={commit}/>} {publicModalOpen && setPublicModalOpen(false)}/>}

); } function WorkRecordingsTab({ w, go }) { const [sub, setSub] = React.useState('recordings'); const recs = typeof recordingsForWork === 'function' ? recordingsForWork(w.id) : []; const sampledBy = typeof recordingsThatSampleOrInterpolate === 'function' ? recordingsThatSampleOrInterpolate(w.id) : []; // Inbound samples — works/recordings THIS work borrows from. Pulled from the recordings' // alsoWorks/derivesFrom edges where the source IS NOT w.id. const samplesUsed = React.useMemo(() => { const out = []; const seen = new Set(); recs.forEach((rec) => { (rec.alsoWorks || []).filter((aw) => aw.workId !== w.id).forEach((aw) => { const key = rec.id + '|' + aw.workId; if (seen.has(key)) return; seen.add(key); const sourceWork = typeof WORK_BY_ID !== 'undefined' ? WORK_BY_ID[aw.workId] : null; out.push({ inRecording: rec, sourceWork, sourceWorkId: aw.workId, share: aw.share, clearance: aw.clearance, kind: 'sample' }); }); (rec.derivesFrom || []).forEach((d) => { const key = rec.id + '|d|' + (d.recId || ''); if (seen.has(key)) return; seen.add(key); out.push({ inRecording: rec, sourceRecording: typeof REC_BY_ID !== 'undefined' && d.recId ? REC_BY_ID[d.recId] : null, sourceWork: d.workId && typeof WORK_BY_ID !== 'undefined' ? WORK_BY_ID[d.workId] : null, kind: d.kind || 'sample', clearance: d.clearance || 'cleared', share: d.share }); }); }); return out; }, [recs, w.id]); return (

{/* Sub-tabs */}

{[ { k: 'recordings', l: 'Recordings', n: recs.length }, { k: 'sampled by', l: 'Sampled by', n: sampledBy.length }, { k: 'samples', l: 'Samples', n: samplesUsed.length }]. map((t) => )}

{sub === 'recordings' && <_RecordingsList w={w} recs={recs} go={go} />} {sub === 'sampled by' && <_SampledByList w={w} recs={sampledBy} go={go} />} {sub === 'samples' && <_SamplesUsedList w={w} items={samplesUsed} go={go} />}

); } function _RecordingsList({ w, recs, go }) { if (recs.length === 0) { return (

No recordings yet

This composition is registered but has not been commercially released. Pitch it, attach a demo, or link an existing recording.

window.dispatchEvent(new CustomEvent('astro-add-recording', { detail: { workId: w.id } }))}>+ Add recording

); } const groups = typeof groupRecordingsByArtist === 'function' ? groupRecordingsByArtist(recs) : [['', recs]]; return (

{recs.length} RECORDING{recs.length > 1 ? 'S' : ''} · {groups.length} ARTIST{groups.length > 1 ? 'S' : ''}

{groups.map(([artist, list]) =>

{artist}

{list.map((rec) => { const releases = (rec.releaseIds || []).map((id) => REL_BY_ID?.[id]).filter(Boolean); const derivBadge = rec.derivesFrom && rec.derivesFrom[0]; return (

window.dispatchEvent(new CustomEvent('astro-open-recording', { detail: { id: rec.id } }))} style={{ display: 'grid', gridTemplateColumns: '52px 1fr 1fr 90px 90px 14px', gap: 14, padding: '14px 0', borderBottom: '1px solid var(--rule-soft)', alignItems: 'center', cursor: 'pointer' }}>

{rec.title} {derivBadge && {derivBadge.kind}} {rec.explicit && E}

{rec.isrc} · {Math.floor(rec.duration / 60)}:{String(rec.duration % 60).padStart(2, '0')}

{rec.album}

{rec.label} · {rec.year}

{rec.plays}M

plays

{releases.length}

releases

); })}

)}

); } function _SampledByList({ w, recs, go }) { if (recs.length === 0) { return (

Not sampled yet

No third-party recordings currently sample or interpolate this work.

); } const totalShare = recs.reduce((s, r) => s + ((r.alsoWorks || []).find((a) => a.workId === w.id)?.share || 0), 0); return (

{[ { l: 'RECORDINGS', v: recs.length }, { l: 'CLEARED', v: recs.filter((r) => (r.alsoWorks || []).find((a) => a.workId === w.id)?.clearance === 'cleared').length }, { l: 'AVG SHARE', v: `${(totalShare / recs.length).toFixed(0)}%` }]. map((s, i) =>

{s.l}

{s.v}

)}

{recs.map((rec) => { const aw = (rec.alsoWorks || []).find((a) => a.workId === w.id); const cColor = aw.clearance === 'cleared' ? '#5b8a3a' : aw.clearance === 'pending' ? '#b78113' : '#c0392b'; return (

window.dispatchEvent(new CustomEvent('astro-open-recording', { detail: { id: rec.id } }))} style={{ display: 'grid', gridTemplateColumns: '56px 1fr 130px 100px 110px 14px', gap: 14, padding: '16px 0', borderBottom: '1px solid var(--rule-soft)', alignItems: 'center', cursor: 'pointer' }}>

{rec.title}

{rec.artist} · {rec.album}

{rec.isrc} · {rec.label} · {rec.year}

{aw.type} {aw.share}% {aw.clearance}

); })}

); } // ───────────────────────────────────────────────────────────── SPLITS TAB // ─── Ref-backed lists. These are getters so they pick up window.REF as soon as // it loads — the prototype boots before fetch() resolves, so we can't capture // the list once at module scope. Hardcoded values are the offline fallback. const _WRITER_ROLES_FALLBACK = ['Composer', 'Composer/Author', 'Author', 'Arranger', 'Adaptor', 'Translator', 'Sub-Arranger', 'Sub-Author', 'Income Participant']; const _PUB_ROLES_FALLBACK = ['Original Publisher', 'Substituted Publisher', 'Income Participant', 'Acquirer']; const _ADMIN_ROLES_FALLBACK = ['Sub-pub', 'Administrator', 'Co-publisher']; const _PRO_FALLBACK = ['ASCAP', 'BMI', 'SESAC', 'GMR', 'PRS', 'GEMA', 'SACEM', 'SOCAN', 'APRA', 'JASRAC']; const _TERR_FALLBACK = ['World', 'World ex. US', 'US/Canada', 'UK / Ireland', 'EU', 'Latin America', 'Asia-Pacific', 'Japan', 'Australia', 'Africa']; // `WRITER_ROLES` / `PUB_ROLES` / etc. are referenced as plain arrays throughout // the splits UI — so we expose Proxy-ish arrays that re-resolve on every read. // Cheap because the lists are tiny (~10 items) and caller code spreads them once. function _refLabels(kind, filterFn, fallback) { const REF = window.REF; if (!REF || !REF.ready) return fallback; const rows = REF.raw[kind]; if (!Array.isArray(rows) || !rows.length) return fallback; const labels = rows.filter(filterFn || (() => true)).map(r => r.label).filter(Boolean); return labels.length ? labels : fallback; } // Splits-tab role lists. writer_roles in the DB has 9 rows that map 1:1 to the // prototype's hardcoded list (Composer, Author, Arranger, Adaptor, Translator…). // publisher_roles has 6 rows; we split them into "publisher" vs "admin" buckets // using the cwr_code convention (E/SE = orig/substituted publisher → PUB_ROLES; // AM/SA/AQ = administrator/sub-pub/acquirer → ADMIN_ROLES). Object.defineProperty(window, 'WRITER_ROLES', { configurable: true, get: () => _refLabels('writer_roles', null, _WRITER_ROLES_FALLBACK) }); // publisher_roles codes (verified against db/ref/all.json): // E = Original Publisher → PUB // ES = Substituted Publisher → PUB // AQ = Acquirer → PUB // PA = Income Participant → PUB // SE = Sub-Publisher → ADMIN // AM = Administrator → ADMIN Object.defineProperty(window, 'PUB_ROLES', { configurable: true, get: () => _refLabels('publisher_roles', r => /^(E|ES|AQ|PA)$/i.test(r.code), _PUB_ROLES_FALLBACK) }); Object.defineProperty(window, 'ADMIN_ROLES', { configurable: true, get: () => _refLabels('publisher_roles', r => /^(SE|AM)$/i.test(r.code), _ADMIN_ROLES_FALLBACK) }); // Local refs (renamed to avoid shadowing window.WRITER_ROLES/PUB_ROLES/ADMIN_ROLES, // which causes "configurable attribute" errors on Babel re-eval). The window-level // getters above are still the public API; these are local-scope wrappers. const _LWRITER_ROLES = new Proxy({}, { get: (_, k) => window.WRITER_ROLES[k] }); const _LPUB_ROLES = new Proxy({}, { get: (_, k) => window.PUB_ROLES[k] }); const _LADMIN_ROLES = new Proxy({}, { get: (_, k) => window.ADMIN_ROLES[k] }); // PROS — society acronyms filtered to PRO/MIX/HUB types (writer-side perf rights). // REF.societies has 407 rows; the most active ~30 (ASCAP, BMI, …) are the practical // dropdown. Sort by membership count would be ideal; for now just alphabetical. const PROS_LIST = new Proxy({}, { get(_, k) { const list = (window.SOC_WRITER && window.SOC_WRITER.length) ? window.SOC_WRITER : _PRO_FALLBACK; const arr = [...list, '—']; return arr[k]; }, has(_, k) { return k in [...(_PRO_FALLBACK), '—']; }, ownKeys() { const a = [...(window.SOC_WRITER || _PRO_FALLBACK), '—']; return Object.keys(a); }, getOwnPropertyDescriptor() { return { enumerable: true, configurable: true }; }, }); // Territory presets (W/Wx-US/etc.) live in ref.territory_groups. 12 rows there, // but the prototype only uses ~10 broad presets — fall back if missing. const TERRITORY_OPTS = new Proxy({}, { get(_, k) { const REF = window.REF; const groups = REF && REF.ready && REF.raw.territory_groups; if (Array.isArray(groups) && groups.length) { const arr = groups.map(g => g.group_name).filter(Boolean); return arr.length ? arr[k] : _TERR_FALLBACK[k]; } return _TERR_FALLBACK[k]; }, ownKeys() { const REF = window.REF; const groups = REF && REF.ready && REF.raw.territory_groups; const arr = (Array.isArray(groups) && groups.length) ? groups.map(g => g.group_name).filter(Boolean) : _TERR_FALLBACK; return Object.keys(arr); }, getOwnPropertyDescriptor() { return { enumerable: true, configurable: true }; }, }); function SplitsBar({ label, p, m, s, share, splitShares }) { // 3-stripe bar showing perf/mech/sync as percentage of overall share. // When splitShares is off, it's a single bar. if (!splitShares) { return (

{share}%

); } return (

{[['perf', p, 'Performing'], ['mech', m, 'Mechanical'], ['sync', s, 'Sync']].map(([k, v, name]) =>

{name}

{v}%

)}

); } function CbInline({ checked, onChange, children, editing }) { if (!editing) { return checked ? {children} : null; } return ( onChange(e.target.checked)} style={{ margin: 0 }} /> {children} ); } function TerritoryEditor({ value, onChange, editing }) { const list = value || []; if (!editing) { return (

{list.length === 0 && —} {list.map((t) => {t} )}

); } return (

{list.map((t) => {t} )}

); } function AdminRow({ a, ai, onPatch, onRemove, editing, parentShare }) { return (

SUB-PUBLISHER / ADMIN {ai + 1}

{editing ? onPatch({ name: v })} style={{ fontSize: 13, fontWeight: 500, display: 'inline-block' }} placeholder="Admin name" /> :

{a.name || (unnamed)}

}

{editing ? onPatch({ role: v })} style={{ fontSize: 10 }} /> : a.role} {' · '} · IPI {(window.ipiDisplayCompact ? window.ipiDisplayCompact(a.ipi) : a.ipi) || '—'}

TERRITORY

onPatch({ territories: t })} editing={editing} />

{editing ? onPatch({ share: Math.max(0, Math.min(parentShare, +e.target.value || 0)) })} className="ff-mono num" style={{ width: '100%', padding: '4px 6px', fontSize: 12, textAlign: 'right', border: 'none', borderRadius: 3, background: 'var(--edit-fill)' }} /> : {a.share}% }

{editing ? onPatch({ controlled: v })} editing={editing}>CTRL : (window.ControlledLabel && )} {editing && }

); } function PubRow({ p, pi, onPatch, onRemove, onAddAdmin, onPatchAdmin, onRemoveAdmin, editing, writerShare }) { const isOpaque = p.unknown || p.selfPub; const adminUsed = (p.admins || []).reduce((s, a) => s + (+a.share || 0), 0); const adminOver = adminUsed > p.share; return (

PUBLISHER {pi + 1}

{p.unknown ? PUBLISHER UNKNOWN : p.selfPub ?

SELF-PUBLISHED

Writer retains publisher share

: editing ? onPatch({ name: v })} style={{ fontSize: 14, fontWeight: 600, display: 'inline-block' }} placeholder="Publisher name" /> :

{window.PartyIndicator && }{p.name}

}

{editing ? onPatch({ role: v })} style={{ fontSize: 10 }} /> : p.role} {!isOpaque && <> · · IPI {(window.ipiDisplayCompact ? window.ipiDisplayCompact(p.ipi) : p.ipi) || '—'}}

TERRITORY

{!isOpaque ? onPatch({ territories: t })} editing={editing} /> : —}

{editing ? onPatch({ share: Math.max(0, Math.min(writerShare, +e.target.value || 0)) })} className="ff-mono num" style={{ width: '100%', padding: '5px 8px', fontSize: 13, textAlign: 'right', border: 'none', borderRadius: 3, background: 'var(--edit-fill)' }} /> : {p.share}% }

{editing ? onPatch({ controlled: v })} editing={editing}>CTRL : (window.ControlledLabel && )} {editing && }

{/* Admins */} {(p.admins || []).length > 0 &&

SUB-PUBLISHERS · {adminUsed}% of {p.share}%{adminOver && · over by {adminUsed - p.share}%}

{(p.admins || []).map((a, ai) => onPatchAdmin(ai, patch)} onRemove={() => onRemoveAdmin(ai)} /> )}

} {editing && !isOpaque && }

); } function _SamplesUsedList({ w, items, go }) { if (items.length === 0) { return (

No samples used

This work does not sample, interpolate, or derive material from another composition.

); } const cleared = items.filter((i) => i.clearance === 'cleared').length; const pending = items.filter((i) => i.clearance === 'pending').length; const blocked = items.filter((i) => i.clearance && i.clearance !== 'cleared' && i.clearance !== 'pending').length; const totalShareOut = items.reduce((s, i) => s + (+i.share || 0), 0); return (

{[ { l: 'SOURCES', v: items.length }, { l: 'CLEARED', v: cleared }, { l: 'PENDING', v: pending, c: pending > 0 ? '#b78113' : null }, { l: 'SHARE OUT', v: `${totalShareOut.toFixed(0)}%` }]. map((s, i) =>

{s.l}

{s.v}

)}

SOURCE WORKS / RECORDINGS

{items.map((it, i) => { const cColor = it.clearance === 'cleared' ? '#5b8a3a' : it.clearance === 'pending' ? '#b78113' : '#c0392b'; const cBg = it.clearance === 'cleared' ? '#eef3e6' : it.clearance === 'pending' ? '#faf0d8' : '#f6e0dc'; const sw = it.sourceWork; const sr = it.sourceRecording; const handleClick = () => { if (sw) window.dispatchEvent(new CustomEvent('astro-open-work', { detail: { id: sw.id } }));else if (sr) window.dispatchEvent(new CustomEvent('astro-open-recording', { detail: { id: sr.id } })); }; return (

{sw ? sw.title : sr ? sr.title : '(unknown source)'} {it.kind}

{sw ? sw.iswc || 'no ISWC' : sr ? sr.isrc : '—'} {sw && sw.writers && sw.writers[0] && · {sw.writers.map((x) => x.name).slice(0, 2).join(', ')}{sw.writers.length > 2 ? ` +${sw.writers.length - 2}` : ''}}

used in

{it.inRecording.title}

{it.inRecording.album} · {it.inRecording.year}

{it.clearance || 'unknown'}

{it.share != null ? `${it.share}%` : '—'}

share out

); })}

Add a sample source

Link an existing work or upload a new clearance contract.

window.toast && window.toast('Add a sample / interpolation source — link an existing work or upload a contract', 'soft')}>+ Add source

); } function SplitsGraph({ writers, writerTotal }) { // Color palette — distinct hues for each writer, with publisher slices a darker shade. const HUES = [ { writer: '#1f3d5c', pub: '#4a6f93', kept: '#a9c2d8' }, { writer: '#7d3da8', pub: '#a36cc8', kept: '#d8c0e6' }, { writer: '#b8541b', pub: '#d4824a', kept: '#ecc3a3' }, { writer: '#3a6b3e', pub: '#6b9b6f', kept: '#bcd6bf' }, { writer: '#8a2c4f', pub: '#b35878', kept: '#dfb1c2' }, { writer: '#0f5e6e', pub: '#3f8d9d', kept: '#a8cad2' }]; // Build segments. Each writer becomes a colored cluster of (publisher segments... | kept segment). const segments = []; writers.forEach((w, wi) => { const hue = HUES[wi % HUES.length]; const pubs = w.pubs || []; const pubsUsed = pubs.reduce((s, p) => s + (+p.share || 0), 0); const kept = Math.max(0, (+w.share || 0) - pubsUsed); pubs.forEach((p, pi) => { if ((+p.share || 0) <= 0) return; segments.push({ share: +p.share, color: hue.pub, label: `${p.name || 'Unnamed publisher'} (${w.name})`, sub: `${p.share}% via ${p.role || 'pub'}`, writerIdx: wi, kind: 'pub' }); }); if (kept > 0) { segments.push({ share: kept, color: hue.kept, label: `${w.name} — kept`, sub: `${kept}% writer share`, writerIdx: wi, kind: 'kept' }); } if (pubs.length === 0 && kept === 0 && (+w.share || 0) > 0) { // edge case: writer has share but no pubs and kept is 0 (shouldn't happen, but guard) segments.push({ share: +w.share, color: hue.writer, label: w.name, sub: `${w.share}%`, writerIdx: wi, kind: 'writer' }); } }); const denom = Math.max(100, writerTotal); // never compress under 100; show overflow if any const [hover, setHover] = React.useState(null); return (

OWNERSHIP DISTRIBUTION

{hover ? {hover.label} · {hover.sub} : Hover any segment for detail}

{/* Stacked bar */}

{segments.map((s, i) =>

setHover(s)} onMouseLeave={() => setHover(null)} style={{ width: `${s.share / denom * 100}%`, background: s.color, borderRight: i < segments.length - 1 ? '1px solid rgba(255,255,255,.35)' : 'none', position: 'relative', cursor: 'default', transition: 'filter 120ms', filter: hover && hover !== s ? 'opacity(.55)' : 'none' }} title={`${s.label} · ${s.sub}`}> {s.share >= 8 &&

{s.share}%

}

)} {writerTotal < 100 &&

}

{/* Writer-level secondary bar (just shows writer split, no pubs) */}

{writers.map((w, wi) => { const hue = HUES[wi % HUES.length]; return (

); })}

{/* Legend */}

{writers.map((w, wi) => { const hue = HUES[wi % HUES.length]; const pubsUsed = (w.pubs || []).reduce((s, p) => s + (+p.share || 0), 0); const kept = Math.max(0, (+w.share || 0) - pubsUsed); return (

{w.name} {w.share}%

{pubsUsed > 0 && {pubsUsed}% pub} {pubsUsed > 0 && kept > 0 && ·} {kept > 0 && {kept}% kept}

); })} {writerTotal < 100 &&

Unallocated {100 - writerTotal}%

shares do not sum to 100%

}

); } function WorkSplitsTab({ m, setData, commit, editing, pulse, pulseId }) { const writers = m.writers || []; const writerTotal = writers.reduce((s, w) => s + (+w.share || 0), 0); // Aggregate publishers across all writers const allPubs = writers.flatMap((w) => (w.pubs || []).map((p) => ({ ...p, _ofWriter: w.name, _writerShare: w.share }))); const pubsAggregateShare = allPubs.reduce((s, p) => s + (+p.share || 0), 0); // Controlled aggregate — DERIVED from publisher.indicator per spec 4.1. // Counts publisher share that flows through ★/◆ publishers, expressed as // a % of the song (out of 100% writer share). const ctrlAgg = (() => { if (!window.getShareControlled) return null; let ctrl = 0; for (const p of allPubs) { if (window.getShareControlled(p).controlled) ctrl += (+p.share || 0); } const total = writerTotal || 100; return { controlledPct: Math.round((ctrl / total) * 100), nonControlledPct: Math.round(((total - ctrl) / total) * 100), }; })(); const writerKeptShare = writers.reduce((s, w) => { const used = (w.pubs || []).reduce((a, p) => a + (+p.share || 0), 0); return s + Math.max(0, (+w.share || 0) - used); }, 0); // helpers — all flow through commit() so changes hit history const setWriterField = (i, patch, label) => commit(label, (d) => ({ ...d, writers: d.writers.map((w, j) => j === i ? { ...w, ...patch } : w) })); const setWriterLive = (i, patch) => setData((d) => ({ ...d, writers: d.writers.map((w, j) => j === i ? { ...w, ...patch } : w) })); const setPubField = (wi, pi, patch, label) => commit(label, (d) => ({ ...d, writers: d.writers.map((w, j) => j !== wi ? w : { ...w, pubs: w.pubs.map((p, k) => k === pi ? { ...p, ...patch } : p) }) })); const setPubLive = (wi, pi, patch) => setData((d) => ({ ...d, writers: d.writers.map((w, j) => j !== wi ? w : { ...w, pubs: w.pubs.map((p, k) => k === pi ? { ...p, ...patch } : p) }) })); const addPub = (wi) => commit('Added publisher', (d) => ({ ...d, writers: d.writers.map((w, j) => j !== wi ? w : { ...w, pubs: [...(w.pubs || []), { name: '', pro: w.pro, ipi: '', selfPub: false, unknown: false, controlled: true, role: 'Original Publisher', share: Math.max(0, w.share - (w.pubs || []).reduce((s, p) => s + (+p.share || 0), 0)), territories: ['World'], admins: [] }] }) })); const removePub = (wi, pi, name) => commit(`Removed publisher ${name || ''}`.trim(), (d) => ({ ...d, writers: d.writers.map((w, j) => j !== wi ? w : { ...w, pubs: w.pubs.filter((_, k) => k !== pi) }) })); const setAdminField = (wi, pi, ai, patch, label) => commit(label, (d) => ({ ...d, writers: d.writers.map((w, j) => j !== wi ? w : { ...w, pubs: w.pubs.map((p, k) => k !== pi ? p : { ...p, admins: p.admins.map((a, m) => m === ai ? { ...a, ...patch } : a) }) }) })); const addAdmin = (wi, pi) => commit('Added sub-publisher', (d) => ({ ...d, writers: d.writers.map((w, j) => j !== wi ? w : { ...w, pubs: w.pubs.map((p, k) => k !== pi ? p : { ...p, admins: [...(p.admins || []), { role: 'Sub-pub', name: '', pro: 'PRS', ipi: '', controlled: true, pubRole: 'Original Publisher', share: Math.max(0, p.share - (p.admins || []).reduce((s, a) => s + (+a.share || 0), 0)), territories: ['UK / Ireland'] }] }) }) })); const removeAdmin = (wi, pi, ai) => commit('Removed sub-publisher', (d) => ({ ...d, writers: d.writers.map((w, j) => j !== wi ? w : { ...w, pubs: w.pubs.map((p, k) => k !== pi ? p : { ...p, admins: p.admins.filter((_, m) => m !== ai) }) }) })); return (

{/* Stats strip */} {(() => { const cells = [ { l: 'WRITERS', v: writers.length }, { l: 'WRITER SHARE', v: `${writerTotal}%`, bad: writerTotal !== 100 }, { l: 'TO PUBLISHERS', v: `${pubsAggregateShare}%` }, { l: 'KEPT BY WRITERS', v: `${writerKeptShare}%` }, { l: 'PUBLISHERS', v: allPubs.length }, ]; if (ctrlAgg) { cells.push({ l: 'CONTROLLED', v: `${ctrlAgg.controlledPct}%`, sub: `${ctrlAgg.nonControlledPct}% non-ctrl`, tip: 'Derived from publisher indicators (★ Owned / ◆ Administered). Non-controlled shares need their own publisher to register.', }); } return (

{cells.map((s, i) =>

{s.l}

{s.v}

{s.sub &&

{s.sub}

}

)}

); })()} {/* Visual share graph */} {/* Per-writer cards */} {writers.map((wr, wi) => { const pubsUsed = (wr.pubs || []).reduce((s, p) => s + (+p.share || 0), 0); const writerKept = Math.max(0, (+wr.share || 0) - pubsUsed); const pubsOver = pubsUsed > (+wr.share || 0); return (

{/* Writer header */}

WRITER {wi + 1} OF {writers.length}

{editing && window.WriterTypeahead ? setWriterField(wi, patch, `Writer ${wi + 1} → "${patch.name}"`)} /> :

{wr.name}

}

{editing ? setWriterField(wi, { role: v }, `Role → ${v}`)} style={{ fontSize: 11 }} /> : wr.role || 'Composer'} {editing ? setWriterField(wi, { pro: v }, `PRO → ${v}`)} style={{ fontSize: 11 }} /> : wr.pro} IPI {(window.ipiDisplayCompact ? window.ipiDisplayCompact(wr.ipi) : wr.ipi)}

OWNERSHIP SHARE {editing && }

{editing ? {const v = Math.max(0, Math.min(100, +e.target.value || 0));setWriterLive(wi, { share: v, ...(wr.splitShares ? {} : { perfShare: v, mechShare: v, syncShare: v }) });}} onBlur={() => commit(`Adjusted ${wr.name || `writer ${wi + 1}`}'s share`, (d) => d)} className="ff-mono num" style={{ width: '100%', padding: '6px 8px', fontSize: 18, textAlign: 'right', fontWeight: 600, border: 'none', borderRadius: 3, background: 'var(--edit-fill)' }} /> : {wr.share}% }

{editing && writers.length > 1 && }

{/* Territory + flags row */}

TERRITORY setWriterField(wi, { territories: t }, 'Territory updated')} editing={editing} />

setWriterField(wi, { workForHire: v }, `Work-for-hire → ${v ? 'on' : 'off'}`)} editing={editing}>WORK FOR HIRE setWriterField(wi, { reversionary: v }, `Reversionary → ${v ? 'on' : 'off'}`)} editing={editing}>REVERSIONARY setWriterField(wi, { firstRecRefusal: v }, `First-rec refusal → ${v ? 'on' : 'off'}`)} editing={editing}>FIRST REC REFUSAL

{/* Publisher allocation summary */}

OF {(wr.name || 'WRITER').toUpperCase()}'S {wr.share}%

0 ? Math.min(100, pubsUsed / wr.share * 100) : 0}%`, background: pubsOver ? '#c0392b' : 'var(--accent)' }} />

{pubsOver ? `publishers claim ${pubsUsed}% — over by ${pubsUsed - wr.share}%` : writerKept > 0 ? `${pubsUsed}% to publishers · ${writerKept}% kept by writer` : `${wr.share}% fully assigned to publishers`}

{/* Publishers */}

{(wr.pubs || []).map((p, pi) => { // share field uses live setter + commit on blur via input — for everything else, commit immediately if ('share' in patch) setPubLive(wi, pi, patch);else setPubField(wi, pi, patch, `Publisher updated`); }} onRemove={() => removePub(wi, pi, p.name)} onAddAdmin={() => addAdmin(wi, pi)} onPatchAdmin={(ai, patch) => setAdminField(wi, pi, ai, patch, 'Sub-publisher updated')} onRemoveAdmin={(ai) => removeAdmin(wi, pi, ai)} /> )} {editing && }

); })} {editing && }

); } // ───────────────────────────────────────────────────────────── LYRICS TAB function WorkLyricsTab({ m, commit, editing }) { const lines = (m.lyrics || '').split('\n'); const lineCount = lines.filter((l) => l.trim() && !l.trim().startsWith('[')).length; const charCount = (m.lyrics || '').length; const sectionCount = lines.filter((l) => /^\s*\[/.test(l)).length; const updated = m.lyricsUpdated ? new Date(m.lyricsUpdated).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : '—'; if (m.instrumental) { return (

Instrumental work

This work has no lyrics. Toggle the instrumental flag off to add a lyric sheet.

); } return (

{/* Toolbar */}

LYRIC SHEET · {m.lyricsLanguage || 'English'}

Last updated {updated}

{/* Lyrics body */} {editing ?

commit('Lyrics edited', (d) => ({ ...d, lyrics: e.target.value, lyricsUpdated: new Date().toISOString() }))}
          spellCheck={false}
          style={{
            width: '100%', minHeight: 520, padding: '18px 20px',
            background: 'var(--bg)', border: '1px solid var(--rule)',
            fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 14, lineHeight: 1.7,
            color: 'var(--ink)', resize: 'vertical', outline: 'none'
          }}
          placeholder="[Verse 1]
Type your lyrics here…" /> :

(m.lyrics || '').trim() === '' ?
        <div style={{ padding: '80px 20px', textAlign: 'center', color: 'var(--ink-3)', border: '1px dashed var(--rule)' }}>
              <div className="ff-display" style={{ fontSize: 24, marginBottom: 6, fontWeight: 600, color: 'var(--ink-2)' }}>No lyrics on file</div>
              <p style={{ fontSize: 13 }}>Click <b>Edit Work</b> in the toolbar to add lyrics.</p>
            </div> :

<div style={{ maxWidth: 680 }}>
              {lines.map((line, i) => {
            const isSection = /^\s*\[.+\]\s*$/.test(line);
            const isBlank = line.trim() === '';
            if (isSection) {
              return (
                <div key={i} className="ff-mono upper" style={{
                  fontSize: 10, letterSpacing: '.18em', color: 'var(--ink-3)',
                  padding: i === 0 ? '0 0 12px' : '24px 0 12px',
                  borderTop: i === 0 ? 'none' : '1px solid var(--rule-soft)',
                  marginTop: i === 0 ? 0 : 4
                }}>
                      {line.trim().replace(/^\[|\]$/g, '')}
                    </div>);

}
            if (isBlank) return <div key={i} style={{ height: 8 }} />;
            return (
              <div key={i} className="ff-display" style={{
                fontSize: 18, lineHeight: 1.55, fontWeight: 400, letterSpacing: '-0.005em',
                padding: '2px 0', color: 'var(--ink)'
              }}>{line}</div>);

})}
            </div>

}
      </div>

{/* Side rail */}
      <div>
        <div className="ff-mono upper" style={{ fontSize: 9, letterSpacing: '.14em', color: 'var(--ink-3)', marginBottom: 12, paddingBottom: 10, borderBottom: '1px solid var(--rule)' }}>
          DETAILS
        </div>
        <div className="ff-mono" style={{ fontSize: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', rowGap: 14, marginBottom: 24 }}>
          <div>
            <div style={{ fontSize: 9, letterSpacing: '.1em', color: 'var(--ink-3)', marginBottom: 3 }}>LANGUAGE</div>
            {editing ?
            <InlineSelect value={m.lyricsLanguage || 'English'}
            options={refLanguageOptions()}
            onCommit={(v) => commit(`Lyrics language → ${v}`, (d) => ({ ...d, lyricsLanguage: v }))}
            style={{ fontSize: 12 }} /> :
            <div style={{ fontSize: 13, color: 'var(--ink)' }}>{m.lyricsLanguage || 'English'}</div>}
          </div>
          <div>
            <div style={{ fontSize: 9, letterSpacing: '.1em', color: 'var(--ink-3)', marginBottom: 3 }}>SECTIONS</div>
            <div className="num" style={{ fontSize: 13, color: 'var(--ink)' }}>{sectionCount || '—'}</div>
          </div>
          <div>
            <div style={{ fontSize: 9, letterSpacing: '.1em', color: 'var(--ink-3)', marginBottom: 3 }}>LINES</div>
            <div className="num" style={{ fontSize: 13, color: 'var(--ink)' }}>{lineCount || '—'}</div>
          </div>
          <div>
            <div style={{ fontSize: 9, letterSpacing: '.1em', color: 'var(--ink-3)', marginBottom: 3 }}>CHARACTERS</div>
            <div className="num" style={{ fontSize: 13, color: 'var(--ink)' }}>{charCount.toLocaleString()}</div>
          </div>
        </div>

<div className="ff-mono upper" style={{ fontSize: 9, letterSpacing: '.14em', color: 'var(--ink-3)', marginBottom: 12, paddingBottom: 10, borderBottom: '1px solid var(--rule)' }}>
          USAGE NOTES
        </div>
        <div className="ff-mono" style={{ fontSize: 11, lineHeight: 1.6, color: 'var(--ink-2)', marginBottom: 18 }}>
          Lyrics are reproduced under the underlying composition copyright. Sync requests using full or substantial lyric content require explicit clearance — coordinate with Pluralis Music admin desk.
        </div>

<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <button onClick={() => {
            const txt = `${m.title}\n${'='.repeat(m.title.length)}\n\n${m.lyrics || '(no lyrics on file)'}\n\n— ${(m.writers||[]).map(w=>w.name).join(', ')}\nISWC ${m.iswc||''}`;
            const blob = new Blob([txt], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url; a.download = `${m.title.replace(/[^A-Za-z0-9]+/g,'_')}_lyrics.txt`; a.click();
            setTimeout(()=>URL.revokeObjectURL(url), 2000);
          }} className="ff-mono upper" style={{ padding: '10px 14px', fontSize: 10, letterSpacing: '.08em', background: 'var(--bg)', border: '1px solid var(--rule)', cursor: 'pointer', textAlign: 'left' }}>
            Export as .txt
          </button>
          <button onClick={() => {
            const w = window.open('', '_blank');
            if (!w) return;
            const safeLyrics = (m.lyrics || '(no lyrics on file)').replace(/&/g,'&').replace(/</g,'<');
            w.document.write(`<!doctype html><html><head><title>${m.title} — lyric sheet</title><style>
              @page { size: letter; margin: 0.75in; }
              body { font-family: Georgia, serif; font-size: 12pt; line-height: 1.6; color: #111; }
              h1 { font-size: 28pt; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4pt; }
              .meta { font-family: ui-monospace, monospace; font-size: 9pt; color: #666; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 24pt; }
              .lyrics { white-space: pre-wrap; font-size: 13pt; }
              .footer { margin-top: 36pt; padding-top: 12pt; border-top: 1px solid #ccc; font-family: ui-monospace, monospace; font-size: 8pt; color: #888; }
            </style></head><body>
              <h1>${m.title}</h1>
              <div class="meta">${(m.writers||[]).map(wr=>wr.name).join(' · ')} ${m.iswc?'· ISWC '+m.iswc:''}</div>
              <div class="lyrics">${safeLyrics}</div>
              <div class="footer">© ${m.copyright||'—'} · Lyric sheet generated by ASTRO</div>
              <script>setTimeout(()=>window.print(), 300);</script>
            </body></html>`);
            w.document.close();
          }} className="ff-mono upper" style={{ padding: '10px 14px', fontSize: 10, letterSpacing: '.08em', background: 'var(--bg)', border: '1px solid var(--rule)', cursor: 'pointer', textAlign: 'left' }}>
            Print lyric sheet
          </button>
        </div>
      </div>
    </div>);

}

// ───────────────────────────────────────────────────────────── RIGHTS TAB
function WorkRightsTab({ m, commit, editing }) {
  const regs = m.rights || [];
  // REF-driven option lists for copyright registrations.
  const REF = window.REF;
  const _refReady = REF && REF.ready;
  const typeCodes = (_refReady && Array.isArray(REF.copyrightTypes) && REF.copyrightTypes.length)
    ? REF.copyrightTypes.map(r => r.code).filter(Boolean)
    : ['PA', 'SR', 'VA', 'TX', 'SE'];
  const jurisdictionLabels = (_refReady && Array.isArray(REF.copyrightJurisdictions) && REF.copyrightJurisdictions.length)
    ? REF.copyrightJurisdictions.map(j => j.label).filter(Boolean)
    : ['United States (eCO)', 'Canada', 'United Kingdom', 'European Union (EUIPO)', 'Australia', 'Japan'];
  const defaultJurisdictionLabel = jurisdictionLabels[0] || 'United States (eCO)';

return (
    <div>
      {/* Header strip */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '0 0 14px', marginBottom: 18, borderBottom: '1px solid var(--rule)' }}>
        <div>
          <div className="ff-mono upper" style={{ fontSize: 10, letterSpacing: '.12em', color: 'var(--ink-3)', marginBottom: 4 }}>
            COPYRIGHT REGISTRATIONS
          </div>
          <div className="ff-display" style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em' }}>
            {regs.length} active {regs.length === 1 ? 'registration' : 'registrations'}
          </div>
        </div>
        {editing &&
        <button onClick={addReg}
        style={{ padding: '8px 14px', fontSize: 11, background: 'var(--ink)', color: 'var(--bg)', border: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6 }}>
            <Ic.Plus width={12} height={12} /> Add registration
          </button>
        }
      </div>

{/* Registration cards */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 32 }}>
        {regs.length === 0 &&
        <div style={{ padding: '60px 20px', textAlign: 'center', color: 'var(--ink-3)', border: '1px dashed var(--rule)' }}>
            <div className="ff-display" style={{ fontSize: 22, marginBottom: 6, fontWeight: 600, color: 'var(--ink-2)' }}>No registrations on file</div>
            <p style={{ fontSize: 13 }}>{editing ? 'Use "Add registration" above.' : 'Switch to edit mode to add a USCO or jurisdictional copyright registration.'}</p>
          </div>
        }
        {regs.map((r, i) =>
        <div key={r.id} style={{ border: '1px solid var(--rule)', background: 'var(--bg)' }}>
            {/* Card header */}
            <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--rule-soft)', display: 'flex', alignItems: 'center', gap: 14, background: 'var(--bg-2)' }}>
              <div className="ff-mono upper" style={{
              padding: '4px 10px', fontSize: 10, letterSpacing: '.1em',
              background: r.type === 'PA' ? 'var(--ink)' : 'var(--ink-2)',
              color: 'var(--bg)', fontWeight: 600
            }}>
                {editing ?
              <InlineSelect value={r.type} options={typeCodes}
              onCommit={(v) => setReg(i, { type: v }, `Registration type → ${v}`)}
              style={{ fontSize: 10, letterSpacing: '.1em', color: 'var(--bg)' }} /> :
              r.type}
              </div>
              <div style={{ flex: 1 }}>
                <div className="ff-mono num" style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.01em' }}>
                  {editing ?
                <InlineText value={r.certNumber} onCommit={(v) => setReg(i, { certNumber: v }, `Cert # → ${v}`)}
                placeholder="PA 0-000-000" style={{ fontSize: 14, fontWeight: 600, fontFamily: 'inherit' }} /> :
                r.certNumber || <em style={{ color: 'var(--ink-3)', fontStyle: 'italic' }}>(unfiled)</em>}
                </div>
                <div className="ff-mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 2, letterSpacing: '.04em' }}>
                  {editing ?
                <InlineSelect value={r.jurisdiction} options={jurisdictionLabels}
                onCommit={(v) => setReg(i, { jurisdiction: v }, `Jurisdiction → ${v}`)}
                style={{ fontSize: 10, fontFamily: 'inherit' }} /> :
                r.jurisdiction}
                </div>
              </div>
              <Pill tone={r.certNumber ? 'ok' : 'soft'} dot>{r.certNumber ? 'registered' : 'pending'}</Pill>
              {editing &&
            <button onClick={() => removeReg(i)}
            style={{ background: 'transparent', border: 0, color: 'var(--ink-3)', cursor: 'pointer', padding: 6 }}
            title="Remove registration">
                  <Ic.X width={14} height={14} />
                </button>
            }
            </div>

{/* Card body — grid of fields */}
            <div className="ff-mono" style={{ padding: '18px 20px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', rowGap: 18, columnGap: 24, fontSize: 12 }}>
              <div>
                <div style={{ fontSize: 9, letterSpacing: '.12em', color: 'var(--ink-3)', marginBottom: 4 }}>REGISTRATION DATE</div>
                {editing ?
              <DateField value={r.registrationDate} editing={true} onChange={(v) => setReg(i, { registrationDate: v }, `Reg date → ${v}`)}
              size="sm" style={{ display:'inline-block' }} /> :
              <span className="num">{formatDate(r.registrationDate) || '—'}</span>}
              </div>
              <div>
                <div style={{ fontSize: 9, letterSpacing: '.12em', color: 'var(--ink-3)', marginBottom: 4 }}>EFFECTIVE DATE</div>
                {editing ?
              <DateField value={r.effectiveDate} editing={true} onChange={(v) => setReg(i, { effectiveDate: v }, `Effective → ${v}`)}
              size="sm" style={{ display:'inline-block' }} /> :
              <span className="num">{formatDate(r.effectiveDate) || '—'}</span>}
              </div>
              <div>
                <div style={{ fontSize: 9, letterSpacing: '.12em', color: 'var(--ink-3)', marginBottom: 4 }}>CLAIM TYPE</div>
                {editing ?
              <InlineSelect value={r.claimType}
              options={['Original work', 'Compilation', 'Derivative work', 'Translation', 'Arrangement']}
              onCommit={(v) => setReg(i, { claimType: v }, `Claim → ${v}`)}
              style={{ fontSize: 12 }} /> :
              r.claimType}
              </div>

<div>
                <div style={{ fontSize: 9, letterSpacing: '.12em', color: 'var(--ink-3)', marginBottom: 4 }}>CERTIFICATE HOLDER</div>
                {editing ?
              <InlineText value={r.certHolder} onCommit={(v) => setReg(i, { certHolder: v }, `Holder → ${v}`)}
              style={{ fontSize: 13, fontFamily: 'inherit' }} /> :
              r.certHolder}
              </div>
              <div>
                <div style={{ fontSize: 9, letterSpacing: '.12em', color: 'var(--ink-3)', marginBottom: 4 }}>WORK MADE FOR HIRE</div>
                {editing ?
              <InlineSelect value={r.workForHire ? 'Yes' : 'No'} options={['No', 'Yes']}
              onCommit={(v) => setReg(i, { workForHire: v === 'Yes' }, `WFH → ${v}`)}
              style={{ fontSize: 12 }} /> :
              r.workForHire ? 'Yes' : 'No'}
              </div>
              <div>
                <div style={{ fontSize: 9, letterSpacing: '.12em', color: 'var(--ink-3)', marginBottom: 4 }}>PUBLISHED</div>
                {editing ?
              <InlineSelect value={r.published ? 'Yes' : 'No'} options={['No', 'Yes']}
              onCommit={(v) => setReg(i, { published: v === 'Yes' }, `Published → ${v}`)}
              style={{ fontSize: 12 }} /> :
              r.published ? 'Yes' : 'No'}
              </div>

{r.published &&
            <>
                  <div>
                    <div style={{ fontSize: 9, letterSpacing: '.12em', color: 'var(--ink-3)', marginBottom: 4 }}>FIRST PUBLICATION</div>
                    {editing ?
                <DateField value={r.firstPubDate} editing={true} onChange={(v) => setReg(i, { firstPubDate: v }, `1st pub → ${v}`)}
                size="sm" style={{ display:'inline-block' }} /> :
                <span className="num">{formatDate(r.firstPubDate) || '—'}</span>}
                  </div>
                  <div>
                    <div style={{ fontSize: 9, letterSpacing: '.12em', color: 'var(--ink-3)', marginBottom: 4 }}>NATION OF 1ST PUB.</div>
                    {editing ?
                <InlineText value={r.firstPubNation} onCommit={(v) => setReg(i, { firstPubNation: v }, `Nation → ${v}`)}
                style={{ fontSize: 13, fontFamily: 'inherit' }} /> :
                r.firstPubNation || '—'}
                  </div>
                  <div />
                </>
            }

<div style={{ gridColumn: '1 / 4', paddingTop: 14, borderTop: '1px solid var(--rule-soft)', display: 'grid', gridTemplateColumns: '140px 1fr', rowGap: 10, alignItems: 'baseline' }}>
                <span style={{ fontSize: 9, letterSpacing: '.12em', color: 'var(--ink-3)' }}>DEPOSIT COPIES</span>
                <span>
                  {editing ?
                <InlineText value={String(r.depositCopies)}
                onCommit={(v) => setReg(i, { depositCopies: +v.replace(/\D/g, '') || 0 }, `Deposit → ${v}`)}
                style={{ fontSize: 13, fontFamily: 'inherit', display: 'inline-block', maxWidth: 60 }} /> :
                <span className="num">{r.depositCopies}</span>}
                  <span style={{ color: 'var(--ink-3)', marginLeft: 6 }}>
                    on file ·{' '}
                    {editing ?
                  <InlineText value={r.depositFormat} onCommit={(v) => setReg(i, { depositFormat: v }, `Deposit format → ${v}`)}
                  style={{ fontSize: 13, fontFamily: 'inherit' }} /> :
                  r.depositFormat || '—'}
                  </span>
                </span>
              </div>
            </div>
          </div>
        )}
      </div>

{/* Territorial control + sync policy + reversionary — supplementary */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
        <div style={{ border: '1px solid var(--rule)', padding: '18px 20px' }}>
          <div className="ff-mono upper" style={{ fontSize: 9, letterSpacing: '.14em', color: 'var(--ink-3)', marginBottom: 10, paddingBottom: 10, borderBottom: '1px solid var(--rule-soft)' }}>
            TERRITORIAL CONTROL
          </div>
          {editing ?
          <textarea value={m.territorialNotes || ''}
          onChange={(e) => commit('Territorial notes edited', (d) => ({ ...d, territorialNotes: e.target.value }))}
          style={{ width: '100%', minHeight: 80, padding: '8px 10px', background: 'var(--bg)', border: '1px solid var(--rule)',
            fontFamily: 'inherit', fontSize: 12, lineHeight: 1.5, color: 'var(--ink)', resize: 'vertical' }} /> :

<div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--ink-2)' }}>{m.territorialNotes || <em style={{ color: 'var(--ink-3)' }}>—  no notes</em>}</div>
          }
        </div>
        <div style={{ border: '1px solid var(--rule)', padding: '18px 20px' }}>
          <div className="ff-mono upper" style={{ fontSize: 9, letterSpacing: '.14em', color: 'var(--ink-3)', marginBottom: 10, paddingBottom: 10, borderBottom: '1px solid var(--rule-soft)' }}>
            REVERSIONARY CLAUSE
          </div>
          {editing ?
          <textarea value={m.reversionaryClause || ''}
          onChange={(e) => commit('Reversionary clause edited', (d) => ({ ...d, reversionaryClause: e.target.value }))}
          style={{ width: '100%', minHeight: 80, padding: '8px 10px', background: 'var(--bg)', border: '1px solid var(--rule)',
            fontFamily: 'inherit', fontSize: 12, lineHeight: 1.5, color: 'var(--ink)', resize: 'vertical' }} /> :

<div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--ink-2)' }}>{m.reversionaryClause || <em style={{ color: 'var(--ink-3)' }}>—  none</em>}</div>
          }
        </div>
      </div>

<div style={{ border: '1px solid var(--rule)', padding: '18px 20px' }}>
        <div className="ff-mono upper" style={{ fontSize: 9, letterSpacing: '.14em', color: 'var(--ink-3)', marginBottom: 10, paddingBottom: 10, borderBottom: '1px solid var(--rule-soft)' }}>
          SYNC POLICY
        </div>
        {editing ?
        <InlineText value={m.syncPolicy || ''}
        onCommit={(v) => commit(`Sync policy → ${v}`, (d) => ({ ...d, syncPolicy: v }))}
        style={{ fontSize: 14, fontFamily: 'inherit' }} /> :

<div style={{ fontSize: 14, color: 'var(--ink-2)' }}>{m.syncPolicy || <em style={{ color: 'var(--ink-3)' }}>—  no policy on file</em>}</div>
        }
      </div>
    </div>);

}

// ───────────────────────────────────────────────────────────── REGISTRATIONS TAB
// Live from Directory → Societies (kept rich for territory coverage on registration target picks)
const SOC_LIST = (window.SOC_CWR || ['ASCAP','BMI','SESAC','GMR','PRS','SACEM','GEMA','SIAE','JASRAC','SOCAN','APRA','STIM','BUMA','SUISA','SOZA','SACVEN','UCMR','CASH','MCSC']);

const counts = rows.reduce((a,r)=>(a[r.status]=(a[r.status]||0)+1,a),{});
  const ackedCount = counts.acknowledged || 0;
  const totalCount = rows.length;

return (
    <div>
      {/* Header */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', padding:'0 0 14px', marginBottom:18, borderBottom:'1px solid var(--rule)' }}>
        <div>
          <div className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.12em', color:'var(--ink-3)', marginBottom:4 }}>SOCIETY REGISTRATIONS</div>
          <div className="ff-display" style={{ fontSize:22, fontWeight:600, letterSpacing:'-0.01em' }}>
            {ackedCount} of {totalCount} acknowledged
          </div>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          {editing &&
            <button onClick={addRow}
              style={{ padding:'8px 14px', fontSize:11, background:'var(--bg)', color:'var(--ink)', border:'1px solid var(--rule)', cursor:'pointer', display:'flex', alignItems:'center', gap:6 }}>
              <Ic.Plus width={12} height={12}/> Add society
            </button>
          }
          <button onClick={()=>setRetransmitOpen(true)}
            style={{ padding:'8px 14px', fontSize:11, background:'var(--ink)', color:'var(--bg)', border:0, cursor:'pointer', display:'flex', alignItems:'center', gap:6 }}>
            <Ic.Send width={12} height={12}/> Retransmit all
          </button>
        </div>
      </div>

{/* Status tally strip */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12, marginBottom:24 }}>
        {[
          {k:'acknowledged', l:'Acknowledged', tone:'#5b8a3a'},
          {k:'submitted',    l:'Submitted',    tone:'var(--ink-2)'},
          {k:'pending',      l:'Pending',      tone:'#b78113'},
          {k:'rejected',     l:'Rejected',     tone:'#c0392b'},
        ].map(s => (
          <div key={s.k} style={{ padding:'12px 14px', border:'1px solid var(--rule)', background:'var(--bg)' }}>
            <div className="ff-mono upper" style={{ fontSize:9, letterSpacing:'.12em', color:'var(--ink-3)' }}>{s.l}</div>
            <div className="ff-display num" style={{ fontSize:28, fontWeight:600, letterSpacing:'-0.02em', color:s.tone, marginTop:2 }}>{counts[s.k] || 0}</div>
          </div>
        ))}
      </div>

{/* Rows */}
      {rows.length === 0 ? (
        <div style={{ padding:'60px 20px', textAlign:'center', color:'var(--ink-3)', border:'1px dashed var(--rule)' }}>
          <div className="ff-display" style={{ fontSize:22, marginBottom:6, fontWeight:600, color:'var(--ink-2)' }}>No society registrations</div>
          <p style={{ fontSize:13 }}>{editing ? 'Use "Add society" to register this work with a PRO/CMO.' : 'Switch to edit mode to add society registrations, or generate CWR to register with multiple societies at once.'}</p>
        </div>
      ) : (
        <div style={{ border:'1px solid var(--rule)' }}>
          {/* Header row */}
          <div className="ff-mono upper" style={{
            display:'grid', gridTemplateColumns:'90px 1fr 130px 120px 100px 100px 80px',
            gap:14, padding:'10px 14px', fontSize:10, color:'var(--ink-3)',
            background:'var(--bg-2)', borderBottom:'1px solid var(--rule)' }}>
            <span>SOCIETY</span><span>WORK ID / CWR FILE</span><span>SENT</span><span>ACKNOWLEDGED</span><span>STATUS</span><span style={{textAlign:'right'}}>VERSION</span><span/>
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'90px 1fr 130px 120px 100px 100px 80px',
              gap:14, padding:'14px', alignItems:'center',
              borderBottom: i < rows.length-1 ? '1px solid var(--rule-soft)' : 'none' }}>
              {/* Society */}
              {editing ? (
                <select value={r.society} onChange={e=>setRow(i,{society:e.target.value},`Changed society to ${e.target.value}`)}
                  className="ff-mono" style={{ padding:'6px 8px', background:'var(--edit-fill)', border:'1px solid var(--rule-soft)', fontSize:11, fontWeight:600, color:'var(--ink)' }}>
                  {SOC_LIST.map(s=><option key={s}>{s}</option>)}
                </select>
              ) : (
                <span className="ff-mono" style={{ fontSize:13, fontWeight:600 }}>{r.society}</span>
              )}
              {/* Work ID + filename */}
              <div>
                {editing ? (
                  <input value={r.workId} onChange={e=>setRow(i,{workId:e.target.value}, `Set ${r.society} work ID`)} placeholder="—"
                    className="ff-mono" style={{ padding:'5px 7px', background:'var(--edit-fill)', border:'1px solid var(--rule-soft)', fontSize:12, color:'var(--ink)', width:'100%', boxSizing:'border-box' }}/>
                ) : (
                  <div className="ff-mono" style={{ fontSize:12, color:'var(--ink)' }}>{r.workId || <span style={{color:'var(--ink-3)'}}>— no work ID assigned —</span>}</div>
                )}
                <div className="ff-mono" style={{ fontSize:9, color:'var(--ink-3)', marginTop:3, letterSpacing:'.04em' }}>{r.filename}</div>
              </div>
              {/* Sent */}
              <span className="ff-mono num" style={{ fontSize:11, color:'var(--ink-2)' }}>{r.sentDate}</span>
              {/* Acked */}
              <span className="ff-mono num" style={{ fontSize:11, color: r.status==='acknowledged' ? 'var(--ink-2)' : 'var(--ink-3)' }}>{r.ackDate}</span>
              {/* Status */}
              <span className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.08em', color:tone(r.status), display:'inline-flex', alignItems:'center', gap:5, fontWeight:600 }}>
                <span style={{ width:6, height:6, borderRadius:'50%', background:tone(r.status), display:'inline-block' }}/>
                {r.status}
              </span>
              {/* Version */}
              <span className="ff-mono" style={{ fontSize:10, color:'var(--ink-3)', textAlign:'right' }}>{r.cwrVer}</span>
              {/* Action */}
              <div style={{ display:'flex', gap:4, justifyContent:'flex-end' }}>
                {editing ? (
                  <button onClick={()=>removeRow(i)} aria-label="Remove"
                    style={{ width:24, height:24, padding:0, background:'transparent', border:'1px solid var(--rule-soft)', cursor:'pointer', color:'var(--ink-3)', fontSize:12 }}>×</button>
                ) : (
                  <button onClick={()=>setResendRow(r)} aria-label={`Resend to ${r.society}`}
                    style={{ width:26, height:26, padding:0, background:'transparent', border:'1px solid var(--rule)', cursor:'pointer', color:'var(--ink-2)', display:'inline-flex', alignItems:'center', justifyContent:'center' }}>
                    <Ic.Send width={11} height={11}/>
                  </button>
                )}
              </div>
            </div>
          ))}
        </div>
      )}

{/* Activity feed */}
      <div style={{ marginTop:32 }}>
        <div className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.12em', color:'var(--ink-3)', marginBottom:10 }}>RECENT TRANSMISSIONS</div>
        <div style={{ borderTop:'1px solid var(--rule-soft)' }}>
          {rows.slice(0, 5).map((r, i) => (
            <div key={i} style={{ display:'grid', gridTemplateColumns:'120px 80px 1fr 100px', gap:12, padding:'10px 0', borderBottom:'1px solid var(--rule-soft)', alignItems:'baseline' }}>
              <span className="ff-mono num" style={{ fontSize:10, color:'var(--ink-3)' }}>{r.sentDate}</span>
              <span className="ff-mono" style={{ fontSize:11, fontWeight:600 }}>{r.society}</span>
              <span style={{ fontSize:12, color:'var(--ink-2)' }}>
                Sent <span className="ff-mono" style={{ color:'var(--ink)' }}>{r.filename}</span>
                {r.status==='acknowledged' && <> · ack’d on <span className="ff-mono">{r.ackDate}</span></>}
                {r.status==='rejected' && <> · <span style={{color:'#c0392b'}}>rejected</span> — invalid PRO affiliation in writer record</>}
                {r.status==='pending' && <> · awaiting ack ({r.days}d)</>}
                {r.status==='submitted' && <> · queued in society inbox</>}
              </span>
              <button onClick={()=>go && go('cwr')}
                className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.06em', padding:'4px 8px', background:'transparent', color:'var(--ink-2)', border:'1px solid var(--rule)', cursor:'pointer', justifySelf:'end' }}>
                View transmission →
              </button>
            </div>
          ))}
        </div>
      </div>

{/* Help footer */}
      <div style={{ marginTop:28, padding:16, background:'var(--bg-2)', border:'1px solid var(--rule-soft)', display:'flex', gap:14, alignItems:'flex-start' }}>
        <div className="ff-display" style={{ width:28, height:28, border:'1px solid var(--rule)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, background:'var(--bg)', fontSize:14, fontStyle:'italic', fontWeight:600 }}>
          i
        </div>
        <div>
          <div style={{ fontSize:13, fontWeight:600, marginBottom:4 }}>About society registrations</div>
          <div style={{ fontSize:12, color:'var(--ink-2)', lineHeight:1.55 }}>
            Each PRO/CMO assigns its own work ID after a CWR transmission is accepted. The ISWC stays the same across all societies. Use <span className="ff-mono" style={{color:'var(--ink)'}}>Generate CWR</span> on the work header to send registration files; replies appear here as they arrive (typically within 2–14 days depending on society).
          </div>
        </div>
      </div>

{retransmitOpen && (
        <RetransmitModal
          title={m.title}
          rows={rows}
          onClose={()=>setRetransmitOpen(false)}
          onConfirm={(selected)=>{
            setRetransmitOpen(false);
            window.dispatchEvent(new CustomEvent('astro-toast',{detail:{msg:`Queued CWR retransmission for "${m.title}" to ${selected.length} societ${selected.length===1?'y':'ies'}`,tone:'ok'}}));
          }}
        />
      )}
      {resendRow && (
        <RetransmitModal
          title={m.title}
          rows={[resendRow]}
          single
          onClose={()=>setResendRow(null)}
          onConfirm={()=>{
            const soc = resendRow.society;
            setResendRow(null);
            window.dispatchEvent(new CustomEvent('astro-toast',{detail:{msg:`Queued CWR resend to ${soc}`,tone:'ok'}}));
          }}
        />
      )}
    </div>);
}

// ───────────────────────────────────────────────────────────── ROYALTIES TAB
function WorkRoyaltiesTab({ m, go }) {
  const [period, setPeriod] = useS1('12mo');
  const [view, setView] = useS1('source'); // source | territory | writer

const seed = (m.iswc || m.id || m.title || '').split('').reduce((s,c)=>s+c.charCodeAt(0),0);
  const r = (n) => ((Math.sin(seed*0.137 + n) + 1) / 2);

// Period totals
  const totals = {
    'q':   { l:'This quarter', earned: 12480 + Math.round(r(1)*8000), pending: 3210 + Math.round(r(2)*1500), period:'Apr–Jun 2026' },
    '12mo':{ l:'Last 12 months', earned: 48210 + Math.round(r(3)*15000), pending: 6840 + Math.round(r(4)*2000), period:'May 2025 – Apr 2026' },
    'all': { l:'All time', earned: 184220 + Math.round(r(5)*40000), pending: 11200 + Math.round(r(6)*3000), period:`Since ${(m.dateCreated || m.created || '2023').slice(0,4)}` },
  };
  const T = totals[period];
  const fmt = (n) => '$' + n.toLocaleString();

// Source breakdown — performance, mechanical, sync, neighboring, other
  const sourceRows = [
    { k:'performance', l:'Performance', detail:'Public performance · radio · venues · DSPs PRO',     pct: 0.41 + r(7)*0.04 },
    { k:'mechanical',  l:'Mechanical',  detail:'Streams · downloads · physical · sync mechanicals', pct: 0.34 + r(8)*0.03 },
    { k:'sync',        l:'Sync',        detail:'Film · TV · advertising · games',                    pct: 0.14 + r(9)*0.05 },
    { k:'neighboring', l:'Neighboring', detail:'Master rights · digital performance',                pct: 0.07 + r(10)*0.02 },
    { k:'print',       l:'Print & other', detail:'Sheet music · lyrics licensing',                   pct: 0.04 + r(11)*0.01 },
  ];
  // Normalize
  const sourceTotal = sourceRows.reduce((a,b)=>a+b.pct,0);
  sourceRows.forEach(s => { s.pct = s.pct/sourceTotal; s.amt = Math.round(T.earned * s.pct); });

// Territory breakdown
  const territoryRows = [
    { k:'us', l:'United States', flag:'🇺🇸', pct:0.42 + r(12)*0.05 },
    { k:'gb', l:'United Kingdom', flag:'🇬🇧', pct:0.13 + r(13)*0.03 },
    { k:'de', l:'Germany',        flag:'🇩🇪', pct:0.09 + r(14)*0.02 },
    { k:'fr', l:'France',         flag:'🇫🇷', pct:0.07 + r(15)*0.02 },
    { k:'jp', l:'Japan',          flag:'🇯🇵', pct:0.06 + r(16)*0.02 },
    { k:'ca', l:'Canada',         flag:'🇨🇦', pct:0.05 + r(17)*0.01 },
    { k:'au', l:'Australia',      flag:'🇦🇺', pct:0.04 + r(18)*0.01 },
    { k:'ww', l:'Rest of world',  flag:'🌐', pct:0.14 + r(19)*0.02 },
  ];
  const tTotal = territoryRows.reduce((a,b)=>a+b.pct,0);
  territoryRows.forEach(s => { s.pct = s.pct/tTotal; s.amt = Math.round(T.earned * s.pct); });

// Writer breakdown — derived from m.writers + their share %
  const writers = (m.writers || []).map((w, i) => ({
    name: w.name || `Writer ${i+1}`,
    role: w.role || 'Writer',
    share: +w.share || 0,
    amt: Math.round(T.earned * (+w.share || 0) / 100),
  }));

// Recent statements
  const statements = [
    { soc:'BMI',   ts:'2026-04-12', amount: Math.round(T.earned * 0.22), period:'Q1 2026', status:'parsed' },
    { soc:'ASCAP', ts:'2026-03-30', amount: Math.round(T.earned * 0.19), period:'Q1 2026', status:'parsed' },
    { soc:'PRS',   ts:'2026-03-18', amount: Math.round(T.earned * 0.11), period:'Q4 2025', status:'parsed' },
    { soc:'GEMA',  ts:'2026-02-22', amount: Math.round(T.earned * 0.08), period:'Q4 2025', status:'parsed' },
    { soc:'SACEM', ts:'2026-02-11', amount: Math.round(T.earned * 0.06), period:'Q4 2025', status:'pending' },
    { soc:'SIAE',  ts:'2026-01-28', amount: Math.round(T.earned * 0.04), period:'Q4 2025', status:'parsed' },
  ];

// 12mo trend (use sparkRoyalty if available)
  const trend = (typeof sparkRoyalty !== 'undefined' ? sparkRoyalty : Array.from({length:30},(_,i)=>20+i*3+r(i)*10));

const PALETTE = ['oklch(0.62 0.16 50)','oklch(0.55 0.13 240)','oklch(0.68 0.14 140)','oklch(0.58 0.17 25)','oklch(0.50 0.10 290)','oklch(0.65 0.12 85)','oklch(0.45 0.08 200)','oklch(0.72 0.10 60)'];

const rowsByView = view === 'source' ? sourceRows : view === 'territory' ? territoryRows : writers;

return (
    <div>
      {/* Header */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', padding:'0 0 14px', marginBottom:18, borderBottom:'1px solid var(--rule)' }}>
        <div>
          <div className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.12em', color:'var(--ink-3)', marginBottom:4 }}>ROYALTIES</div>
          <div className="ff-display" style={{ fontSize:22, fontWeight:600, letterSpacing:'-0.01em' }}>
            Earnings & statements
          </div>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          <button onClick={()=>go && go('analytics')}
            className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.08em', padding:'8px 14px', background:'var(--bg)', color:'var(--ink-2)', border:'1px solid var(--rule)', cursor:'pointer', display:'flex', alignItems:'center', gap:6 }}>
            <Ic.Bar width={12} height={12}/> Open analytics
          </button>
          <button onClick={()=>window.dispatchEvent(new CustomEvent('astro-toast',{detail:{msg:`Royalty statement for "${m.title}" exported as CSV`,tone:'ok'}}))}
            className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.08em', padding:'8px 14px', background:'var(--ink)', color:'var(--bg)', border:0, cursor:'pointer', display:'flex', alignItems:'center', gap:6 }}>
            <Ic.File width={12} height={12}/> Export statement
          </button>
        </div>
      </div>

{/* Period selector */}
      <div style={{ display:'flex', gap:6, marginBottom:24 }}>
        {Object.entries(totals).map(([k, v]) => {
          const active = period === k;
          return (
            <button key={k} onClick={()=>setPeriod(k)}
              className="ff-mono upper" style={{
                fontSize:10, letterSpacing:'.08em', padding:'8px 14px',
                background: active ? 'var(--ink)' : 'var(--bg)',
                color: active ? 'var(--bg)' : 'var(--ink-2)',
                border:'1px solid '+(active ? 'var(--ink)' : 'var(--rule)'),
                cursor:'pointer'
              }}>{v.l}</button>
          );
        })}
      </div>

{/* Hero KPIs */}
      <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap:0, border:'1px solid var(--rule)', marginBottom:28 }}>
        <div style={{ padding:'22px 24px', borderRight:'1px solid var(--rule)' }}>
          <div className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.12em', color:'var(--ink-3)', marginBottom:6 }}>EARNED · {T.period}</div>
          <div className="ff-display num" style={{ fontSize:48, fontWeight:600, letterSpacing:'-0.04em', lineHeight:1 }}>{fmt(T.earned)}</div>
          <div className="ff-mono num" style={{ fontSize:11, color:'var(--ok, #5b8a3a)', marginTop:6 }}>▲ +{(8 + r(20)*15).toFixed(1)}% vs prior period</div>
          <div style={{ marginTop:14, marginLeft:-4 }}>
            <Spark data={trend} w={400} h={68} stroke="var(--ink)" area fill="var(--ink-2)" strokeWidth={1.5} responsive />
          </div>
        </div>
        <div style={{ padding:'22px 24px', borderRight:'1px solid var(--rule)' }}>
          <div className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.12em', color:'var(--ink-3)', marginBottom:6 }}>PENDING</div>
          <div className="ff-display num" style={{ fontSize:36, fontWeight:600, letterSpacing:'-0.03em', lineHeight:1 }}>{fmt(T.pending)}</div>
          <div className="ff-mono" style={{ fontSize:11, color:'var(--ink-3)', marginTop:6 }}>across {Math.round(2 + r(21)*4)} societies</div>
          <div className="ff-mono upper" style={{ fontSize:9, letterSpacing:'.1em', color:'var(--ink-3)', marginTop:18 }}>NEXT PAYOUT</div>
          <div className="ff-mono" style={{ fontSize:13, color:'var(--ink)', marginTop:2 }}>BMI · 2026-05-15</div>
        </div>
        <div style={{ padding:'22px 24px' }}>
          <div className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.12em', color:'var(--ink-3)', marginBottom:6 }}>STREAMS · 12MO</div>
          <div className="ff-display num" style={{ fontSize:36, fontWeight:600, letterSpacing:'-0.03em', lineHeight:1 }}>{(2.4 + r(22)*1.8).toFixed(1)}M</div>
          <div className="ff-mono" style={{ fontSize:11, color:'var(--ink-3)', marginTop:6 }}>${(T.earned/2400).toFixed(4)} per stream</div>
          <div className="ff-mono upper" style={{ fontSize:9, letterSpacing:'.1em', color:'var(--ink-3)', marginTop:18 }}>TOP DSP</div>
          <div className="ff-mono" style={{ fontSize:13, color:'var(--ink)', marginTop:2 }}>Spotify · 58%</div>
        </div>
      </div>

{/* Breakdown view toggle */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:14 }}>
        <div className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.12em', color:'var(--ink-3)' }}>BREAKDOWN</div>
        <div style={{ display:'flex', gap:0, border:'1px solid var(--rule)' }}>
          {[{k:'source',l:'By source'},{k:'territory',l:'By territory'},{k:'writer',l:'By writer'}].map((v, i) => {
            const active = view === v.k;
            return (
              <button key={v.k} onClick={()=>setView(v.k)}
                className="ff-mono upper" style={{
                  fontSize:10, letterSpacing:'.08em', padding:'7px 12px',
                  background: active ? 'var(--ink)' : 'var(--bg)',
                  color: active ? 'var(--bg)' : 'var(--ink-2)',
                  border:0, borderRight: i<2 ? '1px solid var(--rule)' : 0,
                  cursor:'pointer'
                }}>{v.l}</button>
            );
          })}
        </div>
      </div>

{/* Stacked bar */}
      <div style={{ display:'flex', height:32, border:'1px solid var(--ink)', marginBottom:2, overflow:'hidden' }}>
        {rowsByView.map((row, i) => {
          const pct = view==='writer' ? (row.share/100) : row.pct;
          if (pct < 0.001) return null;
          return (
            <div key={i} title={`${view==='writer'?row.name:row.l}: ${(pct*100).toFixed(1)}%`}
              style={{ width: (pct*100)+'%', background: PALETTE[i%PALETTE.length], borderRight: i < rowsByView.length-1 ? '1px solid var(--bg)' : 0 }}/>
          );
        })}
      </div>

{/* Breakdown rows */}
      <div style={{ border:'1px solid var(--rule)', borderTop:0, marginBottom:32 }}>
        {rowsByView.length === 0 ? (
          <div style={{ padding:30, textAlign:'center', color:'var(--ink-3)', fontSize:13 }}>No writers on this work yet.</div>
        ) : rowsByView.map((row, i) => {
          const pct = view==='writer' ? (row.share/100) : row.pct;
          const amt = view==='writer' ? row.amt : row.amt;
          const labelL = view==='writer' ? row.name : row.l;
          const labelR = view==='source' ? row.detail : view==='territory' ? row.k.toUpperCase() : row.role;
          return (
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'12px 1.4fr 1fr 80px 110px',
              gap:14, padding:'12px 14px', alignItems:'center',
              borderBottom: i < rowsByView.length-1 ? '1px solid var(--rule-soft)' : 'none',
            }}>
              <span style={{ width:10, height:10, background:PALETTE[i%PALETTE.length], display:'inline-block' }}/>
              <div>
                <div style={{ fontSize:13, fontWeight:600 }}>
                  {view==='territory' && <span style={{marginRight:6}}>{row.flag}</span>}
                  {labelL}
                </div>
                <div className="ff-mono" style={{ fontSize:10, color:'var(--ink-3)', marginTop:2, letterSpacing:'.04em' }}>{labelR}</div>
              </div>
              {/* Inline mini-bar */}
              <div style={{ height:4, background:'var(--rule-soft)', position:'relative' }}>
                <div style={{ position:'absolute', inset:0, width:(pct*100)+'%', background:PALETTE[i%PALETTE.length] }}/>
              </div>
              <span className="ff-mono num" style={{ fontSize:12, color:'var(--ink-2)', textAlign:'right' }}>{(pct*100).toFixed(1)}%</span>
              <span className="ff-mono num" style={{ fontSize:13, fontWeight:600, textAlign:'right' }}>{fmt(amt)}</span>
            </div>
          );
        })}
      </div>

{/* Recent statements */}
      <div style={{ marginBottom:28 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:14 }}>
          <div className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.12em', color:'var(--ink-3)' }}>RECENT STATEMENTS</div>
          <button onClick={()=>go && go('cwr')}
            className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.06em', padding:'4px 8px', background:'transparent', color:'var(--ink-2)', border:'1px solid var(--rule)', cursor:'pointer' }}>
            View all in transmissions →
          </button>
        </div>
        <div style={{ border:'1px solid var(--rule)' }}>
          <div className="ff-mono upper" style={{
            display:'grid', gridTemplateColumns:'90px 1fr 130px 100px 100px',
            gap:14, padding:'10px 14px', fontSize:10, color:'var(--ink-3)',
            background:'var(--bg-2)', borderBottom:'1px solid var(--rule)' }}>
            <span>SOCIETY</span><span>PERIOD</span><span>RECEIVED</span><span>STATUS</span><span style={{textAlign:'right'}}>AMOUNT</span>
          </div>
          {statements.map((s, i) => (
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'90px 1fr 130px 100px 100px',
              gap:14, padding:'12px 14px', alignItems:'center',
              borderBottom: i < statements.length-1 ? '1px solid var(--rule-soft)' : 'none',
            }}>
              <span className="ff-mono" style={{ fontSize:13, fontWeight:600 }}>{s.soc}</span>
              <span style={{ fontSize:13, color:'var(--ink)' }}>{s.period}</span>
              <span className="ff-mono num" style={{ fontSize:11, color:'var(--ink-2)' }}>{s.ts}</span>
              <span className="ff-mono upper" style={{ fontSize:9, letterSpacing:'.1em', fontWeight:600,
                color: s.status==='parsed' ? '#5b8a3a' : '#b78113',
                display:'inline-flex', alignItems:'center', gap:5 }}>
                <span style={{ width:6, height:6, borderRadius:'50%', background: s.status==='parsed' ? '#5b8a3a' : '#b78113', display:'inline-block' }}/>
                {s.status}
              </span>
              <span className="ff-mono num" style={{ fontSize:13, fontWeight:600, textAlign:'right' }}>{fmt(s.amount)}</span>
            </div>
          ))}
        </div>
      </div>

{/* Help footer */}
      <div style={{ padding:16, background:'var(--bg-2)', border:'1px solid var(--rule-soft)', display:'flex', gap:14, alignItems:'flex-start' }}>
        <div className="ff-display" style={{ width:28, height:28, border:'1px solid var(--rule)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, background:'var(--bg)', fontSize:14, fontStyle:'italic', fontWeight:600 }}>
          i
        </div>
        <div>
          <div style={{ fontSize:13, fontWeight:600, marginBottom:4 }}>About these figures</div>
          <div style={{ fontSize:12, color:'var(--ink-2)', lineHeight:1.55 }}>
            Earnings reflect parsed royalty statements only. Pending amounts are accrued from ingested statements awaiting payout schedules. Writer amounts are calculated from the splits on this work — see the <span className="ff-mono" style={{color:'var(--ink)'}}>Splits</span> tab to adjust.
          </div>
        </div>
      </div>
    </div>);
}

// ───────────────────────────────────────────────────────────── HISTORY TAB
function WorkHistoryTab({ m, history, cursor, onRevert, go }) {
  const [filter, setFilter] = useS1('all');

// Synthesize lifecycle events from work data so history tab is meaningful
  // even before the user makes any local edits.
  const lifecycle = React.useMemo(() => {
    const seed = (m.iswc || m.id || m.title || '').split('').reduce((s,c)=>s+c.charCodeAt(0),0);
    const ev = [];
    const created = m.dateCreated || m.created || '2023-08-14';
    ev.push({ ts: new Date(created).getTime(), kind:'lifecycle', actor:m.writers?.[0]?.name || 'Original writer', label:'Work created', detail:`Initial registration with ${m.writers?.length || 0} writer${m.writers?.length===1?'':'s'}` });
    ev.push({ ts: new Date(created).getTime() + 86400000*2, kind:'rights', actor:'System', label:'ISWC assigned', detail:m.iswc || 'Pending' });
    if (m.recordings?.length) {
      m.recordings.slice(0, 2).forEach((r, i) => {
        ev.push({ ts: new Date(created).getTime() + 86400000*(45+i*30), kind:'recordings', actor:'A&R', label:`Recording linked: "${r.title || 'Untitled'}"`, detail:`ISRC ${r.isrc || '—'}${r.artist?` · ${r.artist}`:''}` });
      });
    }
    (m.societyIds || []).slice(0, 4).forEach((s, i) => {
      const k = (seed + i*7) % 100;
      const baseDate = new Date(created).getTime() + 86400000*(60+i*22);
      ev.push({ ts: baseDate, kind:'registrations', actor:'CWR engine', label:`CWR sent to ${s.society}`, detail:`Work ID ${s.workId || 'pending'}` });
      if (k < 80) ev.push({ ts: baseDate + 86400000*(2+(k%6)), kind:'registrations', actor:s.society, label:`${s.society} acknowledged registration`, detail:`Work ID confirmed${s.workId?` · ${s.workId}`:''}` });
      else if (k < 92) ev.push({ ts: baseDate + 86400000*5, kind:'registrations', actor:s.society, label:`${s.society} registration pending`, detail:'Awaiting acknowledgment' });
      else ev.push({ ts: baseDate + 86400000*4, kind:'registrations', actor:s.society, label:`${s.society} rejected registration`, detail:'Invalid PRO affiliation in writer record' });
    });
    // Royalty milestones
    [['First royalties received', 0.18], ['Crossed $10K earned', 0.42], ['Crossed $25K earned', 0.71]].forEach(([lbl, frac], i) => {
      ev.push({ ts: new Date(created).getTime() + (Date.now()-new Date(created).getTime())*frac, kind:'royalties', actor:'System', label:lbl, detail:'Earnings milestone' });
    });
    return ev.sort((a,b)=>b.ts-a.ts);
  }, [m]);

// Map edit-history (local, in-session edits) into the same shape
  const edits = (history || []).map((h, i) => ({
    ts: h.ts, kind:'edit', actor:'You', label:h.label, detail:'In-session edit',
    editIndex: i, isCurrent: i === cursor - 1, isFuture: i >= cursor,
  }));
  const merged = [...edits, ...lifecycle].sort((a,b)=>b.ts-a.ts);
  const filtered = filter === 'all' ? merged : merged.filter(e => e.kind === filter);

const kindMeta = {
    edit:          { l:'Edits',         tone:'var(--ink)' },
    lifecycle:     { l:'Lifecycle',     tone:'#5b8a3a' },
    rights:        { l:'Rights',        tone:'#7a4ca0' },
    recordings:    { l:'Recordings',    tone:'#3d6da3' },
    registrations: { l:'Registrations', tone:'#b78113' },
    royalties:     { l:'Royalties',     tone:'#5b8a3a' },
  };

// Group by date for visual rhythm
  const groups = filtered.reduce((acc, e) => {
    const k = fmtDate(e.ts);
    (acc[k] = acc[k] || []).push(e);
    return acc;
  }, {});
  const groupKeys = Object.keys(groups);

return (
    <div>
      {/* Header */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', padding:'0 0 14px', marginBottom:18, borderBottom:'1px solid var(--rule)' }}>
        <div>
          <div className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.12em', color:'var(--ink-3)', marginBottom:4 }}>WORK HISTORY</div>
          <div className="ff-display" style={{ fontSize:22, fontWeight:600, letterSpacing:'-0.01em' }}>
            {merged.length} event{merged.length===1?'':'s'} · {edits.length} edit{edits.length===1?'':'s'} this session
          </div>
        </div>
        <button onClick={()=>window.dispatchEvent(new CustomEvent('astro-toast',{detail:{msg:`Audit log for "${m.title}" exported as CSV`,tone:'ok'}}))}
          className="ff-mono upper" style={{ fontSize:10, letterSpacing:'.08em', padding:'8px 14px', background:'var(--bg)', color:'var(--ink)', border:'1px solid var(--rule)', cursor:'pointer', display:'flex', alignItems:'center', gap:6 }}>
          <Ic.File width={12} height={12}/> Export audit log
        </button>
      </div>

{/* Filter chips */}
      <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginBottom:20 }}>
        {[{k:'all',l:'All'}, ...Object.keys(kindMeta).map(k=>({k, l:kindMeta[k].l}))].map(f => {
          const active = filter === f.k;
          const n = f.k === 'all' ? merged.length : (counts[f.k] || 0);
          return (
            <button key={f.k} onClick={()=>setFilter(f.k)}
              className="ff-mono upper" style={{
                fontSize:10, letterSpacing:'.08em', padding:'7px 11px',
                background: active ? 'var(--ink)' : 'var(--bg)',
                color: active ? 'var(--bg)' : 'var(--ink-2)',
                border: '1px solid '+(active ? 'var(--ink)' : 'var(--rule)'),
                cursor:'pointer', display:'inline-flex', alignItems:'center', gap:6
              }}>
              {f.l} <span style={{opacity:.6, fontWeight:400}}>{n}</span>
            </button>
          );
        })}
      </div>

{/* Timeline */}
      {filtered.length === 0 ? (
        <div style={{ padding:'60px 20px', textAlign:'center', color:'var(--ink-3)', border:'1px dashed var(--rule)' }}>
          <div className="ff-display" style={{ fontSize:22, marginBottom:6, fontWeight:600, color:'var(--ink-2)' }}>No events for this filter</div>
          <p style={{ fontSize:13 }}>Try a different filter or make an edit to record a change.</p>
        </div>
      ) : (
        <div style={{ borderTop:'1px solid var(--rule)' }}>
          {groupKeys.map((dateKey, gi) => (
            <div key={dateKey}>
              {/* Date header */}
              <div className="ff-mono upper" style={{
                display:'flex', justifyContent:'space-between', alignItems:'baseline',
                padding:'14px 0 10px', borderBottom:'1px solid var(--rule-soft)',
                fontSize:10, letterSpacing:'.12em', color:'var(--ink-3)' }}>
                <span>{dateKey}</span>
                <span style={{ color:'var(--ink-4)' }}>{groups[dateKey].length} event{groups[dateKey].length===1?'':'s'}</span>
              </div>
              {/* Events */}
              {groups[dateKey].map((e, i) => {
                const meta = kindMeta[e.kind] || kindMeta.edit;
                return (
                  <div key={i} style={{
                    display:'grid', gridTemplateColumns:'70px 14px 1fr auto',
                    gap:14, padding:'14px 0', borderBottom: i < groups[dateKey].length-1 ? '1px solid var(--rule-soft)' : '1px solid var(--rule-soft)',
                    alignItems:'flex-start',
                    opacity: e.isFuture ? 0.42 : 1,
                  }}>
                    {/* Time */}
                    <span className="ff-mono num" style={{ fontSize:11, color:'var(--ink-3)', paddingTop:1 }}>{fmtTime(e.ts)}</span>
                    {/* Bullet */}
                    <span style={{
                      width:8, height:8, borderRadius:'50%',
                      background: e.isCurrent ? 'var(--ink)' : meta.tone,
                      marginTop:6, justifySelf:'center',
                      boxShadow: e.isCurrent ? '0 0 0 3px var(--bg), 0 0 0 4px var(--ink)' : 'none',
                    }}/>
                    {/* Content */}
                    <div>
                      <div style={{ display:'flex', gap:8, alignItems:'baseline', flexWrap:'wrap' }}>
                        <span className="ff-mono upper" style={{
                          fontSize:9, letterSpacing:'.1em', padding:'2px 6px',
                          background:'var(--bg-2)', border:'1px solid var(--rule-soft)', color:meta.tone, fontWeight:600,
                        }}>{meta.l}</span>
                        <span style={{ fontSize:14, fontWeight: e.isCurrent ? 600 : 500, color:'var(--ink)' }}>{e.label}</span>
                        {e.isCurrent && (
                          <span className="ff-mono upper" style={{ fontSize:9, letterSpacing:'.1em', color:'var(--ink-3)' }}>· current</span>
                        )}
                      </div>
                      <div style={{ fontSize:12, color:'var(--ink-2)', marginTop:3 }}>
                        {e.detail} · <span className="ff-mono">by {e.actor}</span>
                      </div>
                    </div>
                    {/* Action */}
                    <div style={{ paddingTop:2 }}>
                      {e.kind === 'edit' && !e.isCurrent && onRevert && (
                        <button onClick={()=>onRevert(e.editIndex)}
                          className="ff-mono upper" style={{ fontSize:9, letterSpacing:'.08em', padding:'5px 9px', background:'transparent', color:'var(--ink-2)', border:'1px solid var(--rule)', cursor:'pointer' }}>
                          {e.isFuture ? 'Redo to here' : 'Revert to here'}
                        </button>
                      )}
                      {e.kind === 'registrations' && go && (
                        <button onClick={()=>{}}
                          className="ff-mono upper" style={{ fontSize:9, letterSpacing:'.08em', padding:'5px 9px', background:'transparent', color:'var(--ink-3)', border:'1px solid var(--rule-soft)', cursor:'pointer' }}>
                          View →
                        </button>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      )}

{/* Help footer */}
      <div style={{ marginTop:28, padding:16, background:'var(--bg-2)', border:'1px solid var(--rule-soft)', display:'flex', gap:14, alignItems:'flex-start' }}>
        <div className="ff-display" style={{ width:28, height:28, border:'1px solid var(--rule)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, background:'var(--bg)', fontSize:14, fontStyle:'italic', fontWeight:600 }}>
          i
        </div>
        <div>
          <div style={{ fontSize:13, fontWeight:600, marginBottom:4 }}>About this audit log</div>
          <div style={{ fontSize:12, color:'var(--ink-2)', lineHeight:1.55 }}>
            History records every change to this work — edits made by collaborators, society acknowledgments, recording links, and royalty milestones. In-session edits can be reverted directly. External events (society replies, royalty payments) are immutable. Export the full log as CSV for compliance reviews or splits-dispute resolution.
          </div>
        </div>
      </div>
    </div>);
}

// ───────────────────────────────────────────────────────────── RETRANSMIT MODAL
function RetransmitModal({ title, rows, single, onClose, onConfirm }) {
  const [selected, setSelected] = useS1(rows.map((_,i)=>i));
  const [reason, setReason] = useS1('updated-shares');
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);
  const toggle = (i) => setSelected(s => s.includes(i) ? s.filter(x=>x!==i) : [...s, i]);
  const allOn = selected.length === rows.length;
  const dateStr = new Date().toISOString().slice(0,10).replace(/-/g,'').slice(2);
  const tone = (s) => s==='acknowledged' ? '#5b8a3a' : s==='submitted' ? 'var(--ink-2)' : s==='pending' ? '#b78113' : '#c0392b';
  const reasons = [
    { k:'updated-shares', l:'Updated splits / shares' },
    { k:'corrected-metadata', l:'Corrected metadata or writer info' },
    { k:'rejection-fix', l:'Resubmitting after rejection' },
    { k:'new-territory', l:'Added territory or sub-publisher' },
    { k:'admin', l:'Administrative reissue' },
  ];
  const chosen = rows.filter((_,i)=>selected.includes(i));
  return (
    <div onClick={onClose} style={{position:'fixed',inset:0,background:'rgba(0,0,0,.45)',zIndex:200,display:'flex',alignItems:'center',justifyContent:'center',padding:24}}>
      <div onClick={(e)=>e.stopPropagation()}
        style={{background:'var(--bg)',width:'min(680px,100%)',maxHeight:'85vh',overflow:'auto',border:'1px solid var(--ink)',boxShadow:'8px 8px 0 rgba(0,0,0,.12)',position:'relative'}}>
        <div style={{position:'sticky',top:0,background:'var(--bg)',borderBottom:'1px solid var(--rule)',padding:'18px 24px',display:'flex',alignItems:'center',justifyContent:'space-between',zIndex:1}}>
          <div>
            <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)'}}>CWR · RETRANSMIT</div>
            <div className="ff-display" style={{fontSize:24,fontWeight:600,letterSpacing:'-0.02em',marginTop:2}}>
              {single ? `Resend to ${rows[0].society}` : 'Retransmit registrations'}
            </div>
            <div style={{fontSize:12,color:'var(--ink-2)',marginTop:4}}>"{title}"</div>
          </div>
          <button onClick={onClose} style={{background:'transparent',border:'1px solid var(--ink)',width:32,height:32,cursor:'pointer',display:'inline-flex',alignItems:'center',justifyContent:'center'}}>
            <Ic.X width={14} height={14}/>
          </button>
        </div>

<div style={{padding:'20px 24px'}}>
          {/* Reason */}
          <div style={{marginBottom:20}}>
            <div className="ff-mono upper" style={{fontSize:10,letterSpacing:'.12em',color:'var(--ink-3)',marginBottom:8}}>REASON FOR RETRANSMISSION</div>
            <div style={{display:'flex',flexDirection:'column',gap:6}}>
              {reasons.map(r => (
                <label key={r.k} style={{display:'flex',alignItems:'center',gap:8,padding:'8px 10px',border:'1px solid '+(reason===r.k?'var(--ink)':'var(--rule)'),background:reason===r.k?'var(--bg-2)':'var(--bg)',cursor:'pointer',fontSize:13}}>
                  <input type="radio" name="cwr-reason" checked={reason===r.k} onChange={()=>setReason(r.k)} style={{margin:0}}/>
                  <span>{r.l}</span>
                </label>
              ))}
            </div>
          </div>

{/* Society selection */}
          {!single && (
            <div style={{marginBottom:20}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
                <div className="ff-mono upper" style={{fontSize:10,letterSpacing:'.12em',color:'var(--ink-3)'}}>SOCIETIES ({selected.length} of {rows.length})</div>
                <button onClick={()=>setSelected(allOn?[]:rows.map((_,i)=>i))}
                  className="ff-mono upper" style={{fontSize:10,letterSpacing:'.06em',padding:'4px 8px',background:'transparent',border:'1px solid var(--rule)',cursor:'pointer',color:'var(--ink-2)'}}>
                  {allOn ? 'Deselect all' : 'Select all'}
                </button>
              </div>
              <div style={{border:'1px solid var(--rule)',maxHeight:220,overflow:'auto'}}>
                {rows.map((r,i) => (
                  <label key={i} style={{display:'grid',gridTemplateColumns:'24px 80px 1fr 90px',gap:10,alignItems:'center',padding:'10px 12px',borderBottom:i<rows.length-1?'1px solid var(--rule-soft)':'none',cursor:'pointer',fontSize:12}}>
                    <input type="checkbox" checked={selected.includes(i)} onChange={()=>toggle(i)} style={{margin:0}}/>
                    <span className="ff-mono" style={{fontSize:12,fontWeight:600}}>{r.society}</span>
                    <span className="ff-mono" style={{fontSize:11,color:'var(--ink-2)'}}>{r.workId || <span style={{color:'var(--ink-3)'}}>— no work ID —</span>}</span>
                    <span className="ff-mono upper" style={{fontSize:9,letterSpacing:'.08em',color:tone(r.status),display:'inline-flex',alignItems:'center',gap:5,fontWeight:600,justifyContent:'flex-end'}}>
                      <span style={{width:5,height:5,borderRadius:'50%',background:tone(r.status),display:'inline-block'}}/>
                      {r.status}
                    </span>
                  </label>
                ))}
              </div>
            </div>
          )}

{/* Summary */}
          <div style={{padding:'14px 16px',background:'var(--bg-2)',border:'1px solid var(--rule-soft)',marginBottom:8}}>
            <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)',marginBottom:8}}>TRANSMISSION PREVIEW</div>
            <div style={{display:'grid',gridTemplateColumns:'auto 1fr',gap:'4px 16px',fontSize:12}}>
              <span style={{color:'var(--ink-3)'}}>Files</span>
              <span className="ff-mono" style={{color:'var(--ink)'}}>{chosen.length} CWR file{chosen.length===1?'':'s'} ({chosen.map(c=>`CW${dateStr}${c.society}`).slice(0,3).join(', ')}{chosen.length>3?`, +${chosen.length-3} more`:''})</span>
              <span style={{color:'var(--ink-3)'}}>Format</span>
              <span className="ff-mono" style={{color:'var(--ink)'}}>CWR V2.1 / V3.0.0 (per-society)</span>
              <span style={{color:'var(--ink-3)'}}>Schedule</span>
              <span className="ff-mono" style={{color:'var(--ink)'}}>Immediately, batched per-society inbox</span>
              <span style={{color:'var(--ink-3)'}}>Acks</span>
              <span style={{color:'var(--ink-2)'}}>Replies will appear in this tab as they arrive (2–14 days typical)</span>
            </div>
          </div>
        </div>

<div style={{position:'sticky',bottom:0,background:'var(--bg)',borderTop:'1px solid var(--rule)',padding:'14px 24px',display:'flex',gap:8,justifyContent:'flex-end'}}>
          <button onClick={onClose}
            style={{padding:'9px 16px',fontSize:12,background:'transparent',color:'var(--ink)',border:'1px solid var(--rule)',cursor:'pointer'}}>
            Cancel
          </button>
          <button onClick={()=>onConfirm(chosen)}
            disabled={chosen.length===0}
            style={{padding:'9px 16px',fontSize:12,background:chosen.length===0?'var(--ink-3)':'var(--ink)',color:'var(--bg)',border:0,cursor:chosen.length===0?'not-allowed':'pointer',display:'flex',alignItems:'center',gap:6}}>
            <Ic.Send width={12} height={12}/> Queue {chosen.length} transmission{chosen.length===1?'':'s'}
          </button>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────── EXPORT MODALS

function CwrGenerationModal({ m, onClose, commit }) {
  const SOC_OPTIONS = (window.SOC_CWR || ['ASCAP','BMI','SESAC','PRS','GEMA','SACEM','SOCAN','APRA','JASRAC','SIAE','SGAE']);
  const [selected, setSelected] = React.useState(() => {
    const fromIds = (m.societyIds||[]).map(s => s.society).filter(s => SOC_OPTIONS.includes(s));
    return new Set(fromIds.length ? fromIds : ['ASCAP']);
  });
  const [version, setVersion] = React.useState('v2.2');
  const [transmissionType, setTransmissionType] = React.useState('NWR');
  const [stage, setStage] = React.useState('config'); // 'config' | 'generating' | 'done'
  const [progress, setProgress] = React.useState(0);

const toggle = (s) => {
    const next = new Set(selected);
    if (next.has(s)) next.delete(s); else next.add(s);
    setSelected(next);
  };

return (
    <ExportModalShell kind="CWR REGISTRATION" title="Generate CWR file" onClose={onClose}>
      <div style={{padding:24}}>
        {stage === 'config' && (
          <>
            {/* Work summary */}
            <div style={{padding:14,background:'var(--bg-2)',border:'1px solid var(--rule)',marginBottom:24}}>
              <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:4}}>WORK</div>
              <div style={{fontSize:18,fontWeight:600}}>{m.title}</div>
              <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)',marginTop:4,display:'flex',gap:14,flexWrap:'wrap'}}>
                <span>ISWC: {m.iswc||'—'}</span>
                <span>·</span>
                <span>{(m.writers||[]).length} writer{(m.writers||[]).length===1?'':'s'}</span>
                <span>·</span>
                <span>{(m.writers||[]).flatMap(w=>w.pubs||[]).length} publisher entr{(m.writers||[]).flatMap(w=>w.pubs||[]).length===1?'y':'ies'}</span>
                <span>·</span>
                <span>shares: {(m.writers||[]).reduce((s,w)=>s+(+w.share||0),0)}%</span>
                {(() => {
                  if (!window.getShareControlled) return null;
                  const allPubs = (m.writers||[]).flatMap(w=>w.pubs||[]);
                  const ctrl = allPubs.filter(p => window.getShareControlled(p).controlled).length;
                  const nonCtrl = allPubs.length - ctrl;
                  if (!allPubs.length) return null;
                  return (
                    <>
                      <span>·</span>
                      <span title="Only controlled publisher shares (★ Owned / ◆ Administered) are emitted. Non-controlled shares must register via their own publisher.">
                        <strong style={{color:'var(--ink)'}}>{ctrl}</strong> controlled
                        {nonCtrl > 0 && <span style={{color:'#c79538',marginLeft:6}}>· {nonCtrl} excluded (non-ctrl)</span>}
                      </span>
                    </>
                  );
                })()}
              </div>
            </div>

{/* Non-controlled banner */}
            {(() => {
              if (!window.getShareControlled) return null;
              const allPubs = (m.writers||[]).flatMap(w=>w.pubs||[]);
              const nonCtrl = allPubs.filter(p => !window.getShareControlled(p).controlled);
              if (!nonCtrl.length) return null;
              return (
                <div style={{padding:'10px 14px',background:'rgba(199,149,56,0.08)',border:'1px solid #c79538',marginBottom:24,fontSize:12,color:'var(--ink-2)',display:'flex',gap:10,alignItems:'flex-start'}}>
                  <span style={{color:'#c79538',fontWeight:700,fontSize:13,lineHeight:1.2}}>!</span>
                  <div>
                    <div style={{fontWeight:600,marginBottom:2}}>{nonCtrl.length} non-controlled share{nonCtrl.length===1?'':'s'} excluded</div>
                    <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)'}}>
                      {nonCtrl.slice(0,3).map(p=>p.name||'(unnamed)').join(' · ')}{nonCtrl.length>3?` +${nonCtrl.length-3} more`:''}
                      {' '}— these need to register independently through their own publisher.
                    </div>
                  </div>
                </div>
              );
            })()}

{/* Recipient societies */}
            <div style={{marginBottom:24}}>
              <div className="ff-mono upper" style={{fontSize:10,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:10}}>RECIPIENT SOCIETIES <span style={{color:'var(--ink)',fontWeight:600,marginLeft:6}}>{selected.size} selected</span></div>
              <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:8}}>
                {SOC_OPTIONS.map(s => {
                  const on = selected.has(s);
                  return (
                    <button key={s} onClick={()=>toggle(s)}
                      style={{padding:'10px 12px',border:'1px solid '+(on?'var(--ink)':'var(--rule)'),background:on?'var(--ink)':'var(--bg)',color:on?'var(--bg)':'var(--ink)',cursor:'pointer',fontSize:12,fontWeight:600,textAlign:'left',display:'flex',alignItems:'center',gap:6}}>
                      <span style={{width:10,height:10,border:'1px solid '+(on?'var(--bg)':'var(--ink)'),background:on?'var(--bg)':'transparent',display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:9,color:on?'var(--ink)':'transparent'}}>✓</span>
                      {s}
                    </button>
                  );
                })}
              </div>
            </div>

{/* Options */}
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginBottom:24}}>
              <div>
                <div className="ff-mono upper" style={{fontSize:10,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:8}}>CWR VERSION</div>
                <div style={{display:'flex',gap:6}}>
                  {['v2.1','v2.2','v3.0'].map(v => (
                    <button key={v} onClick={()=>setVersion(v)}
                      style={{padding:'8px 14px',border:'1px solid '+(version===v?'var(--ink)':'var(--rule)'),background:version===v?'var(--ink)':'var(--bg)',color:version===v?'var(--bg)':'var(--ink)',cursor:'pointer',fontSize:11,fontWeight:600}}>
                      {v}
                    </button>
                  ))}
                </div>
              </div>
              <div>
                <div className="ff-mono upper" style={{fontSize:10,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:8}}>TRANSACTION TYPE</div>
                <div style={{display:'flex',gap:6}}>
                  {[{k:'NWR',l:'New work'},{k:'REV',l:'Revision'},{k:'ISW',l:'ISWC notify'}].map(t=>(
                    <button key={t.k} onClick={()=>setTransmissionType(t.k)}
                      style={{padding:'8px 14px',border:'1px solid '+(transmissionType===t.k?'var(--ink)':'var(--rule)'),background:transmissionType===t.k?'var(--ink)':'var(--bg)',color:transmissionType===t.k?'var(--bg)':'var(--ink)',cursor:'pointer',fontSize:11,fontWeight:600}}>
                      {t.k} <span style={{fontWeight:400,opacity:.7,marginLeft:4}}>{t.l}</span>
                    </button>
                  ))}
                </div>
              </div>
            </div>

{/* Validation checks */}
            <div style={{padding:12,border:'1px solid var(--rule)',marginBottom:24}}>
              <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:8}}>PRE-FLIGHT CHECKS</div>
              {[
                { ok: !!m.iswc, label: 'ISWC present' },
                { ok: (m.writers||[]).reduce((s,w)=>s+(+w.share||0),0) === 100, label: 'Writer shares total 100%' },
                { ok: (m.writers||[]).every(w => w.ipi), label: 'All writers have IPI numbers' },
                { ok: (m.writers||[]).every(w => (w.pubs||[]).length > 0), label: 'All writers have at least one publisher' },
                { ok: selected.size > 0, label: 'At least one recipient society' },
              ].map((c,i)=>(
                <div key={i} style={{display:'flex',alignItems:'center',gap:8,padding:'4px 0',fontSize:12}}>
                  <span style={{color:c.ok?'#5b8a3a':'#b78113',fontWeight:600,width:14,display:'inline-flex',justifyContent:'center'}}>{c.ok?'✓':'⚠'}</span>
                  <span style={{color:c.ok?'var(--ink-2)':'var(--ink)'}}>{c.label}</span>
                  {!c.ok && <span className="ff-mono upper" style={{fontSize:9,letterSpacing:'.08em',color:'#b78113',marginLeft:'auto'}}>warning</span>}
                </div>
              ))}
            </div>

<div style={{display:'flex',gap:8,justifyContent:'flex-end'}}>
              <Btn variant="ghost" onClick={onClose}>Cancel</Btn>
              <Btn variant="primary" icon={<Ic.Send/>} onClick={generate}>
                Generate CWR ({selected.size})
              </Btn>
            </div>
          </>
        )}

{stage === 'generating' && (
          <div style={{padding:'40px 0',textAlign:'center'}}>
            <div className="ff-mono upper" style={{fontSize:10,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:14}}>BUILDING CWR FILE…</div>
            <div style={{height:6,background:'var(--bg-2)',border:'1px solid var(--rule)',marginBottom:12,position:'relative',overflow:'hidden'}}>
              <div style={{height:'100%',background:'var(--ink)',width:`${progress}%`,transition:'width 80ms linear'}}/>
            </div>
            <div className="ff-mono num" style={{fontSize:14,fontWeight:600}}>{Math.floor(progress)}%</div>
            <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)',marginTop:8}}>
              {progress < 30 && 'Validating shares…'}
              {progress >= 30 && progress < 60 && 'Encoding writer/publisher records…'}
              {progress >= 60 && progress < 90 && 'Building transmission header…'}
              {progress >= 90 && 'Finalizing trailer record…'}
            </div>
          </div>
        )}

{stage === 'done' && (
          <>
            <div style={{padding:14,background:'#eef3e6',border:'1px solid #5b8a3a',marginBottom:18,display:'flex',alignItems:'center',gap:12}}>
              <span style={{width:32,height:32,background:'#5b8a3a',color:'#fff',display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:16,fontWeight:600,flex:'0 0 32px'}}>✓</span>
              <div>
                <div style={{fontWeight:600,fontSize:13}}>CWR file generated</div>
                <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)',marginTop:2}}>{fileLines.length} records · {[...selected].join(', ')}</div>
              </div>
            </div>

<div className="ff-mono upper" style={{fontSize:10,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:8}}>FILE PREVIEW</div>
            <pre style={{padding:12,background:'#0f1115',color:'#e8eaee',fontFamily:'JetBrains Mono, ui-monospace, monospace',fontSize:10.5,lineHeight:1.5,overflow:'auto',maxHeight:200,marginBottom:18,whiteSpace:'pre'}}>
{fileLines.join('\n')}
            </pre>

<div style={{display:'flex',gap:8,justifyContent:'flex-end'}}>
              <Btn variant="ghost" onClick={onClose}>Close</Btn>
              <Btn variant="secondary" onClick={()=>setStage('config')}>← Back</Btn>
              <Btn variant="primary" icon={<Ic.Send/>} onClick={downloadFile}>Download .V21 file</Btn>
            </div>
          </>
        )}
      </div>
    </ExportModalShell>
  );
}

function DdexExportModal({ m, onClose, commit }) {
  const [profile, setProfile] = React.useState('ERN-4.3');
  const [done, setDone] = React.useState(false);

const xml = `<?xml version="1.0" encoding="UTF-8"?>
<NewReleaseMessage xmlns="http://ddex.net/xml/ern/43" MessageSchemaVersionId="ern/43">
  <MessageHeader>
    <MessageThreadId>PLURALIS-${(m.iswc||'').replace(/[^A-Za-z0-9]/g,'')}</MessageThreadId>
    <MessageId>MSG-${Date.now()}</MessageId>
    <MessageSender><PartyId>PA-PLURALIS</PartyId><PartyName><FullName>Pluralis Music</FullName></PartyName></MessageSender>
    <MessageRecipient><PartyId>RECIPIENT-DSP</PartyId></MessageRecipient>
    <MessageCreatedDateTime>${new Date().toISOString()}</MessageCreatedDateTime>
  </MessageHeader>
  <WorkList>
    <MusicalWork ISWC="${m.iswc||''}">
      <ReferenceTitle><TitleText>${m.title}</TitleText></ReferenceTitle>
      <Duration>PT${Math.floor((m.duration||0)/60)}M${(m.duration||0)%60}S</Duration>
${(m.writers||[]).map(wr => `      <Contributor>
        <ContributorPartyReference><PartyId IsDPID="false">${wr.ipi||''}</PartyId><PartyName><FullName>${wr.name}</FullName></PartyName></ContributorPartyReference>
        <Role>${wr.role||'Composer'}</Role>
        <RightShare><Percentage>${wr.share||0}</Percentage></RightShare>
      </Contributor>`).join('\n')}
    </MusicalWork>
  </WorkList>
</NewReleaseMessage>`;

return (
    <ExportModalShell kind="DDEX EXPORT" title="Export DDEX message" onClose={onClose}>
      <div style={{padding:24}}>
        <div style={{padding:14,background:'var(--bg-2)',border:'1px solid var(--rule)',marginBottom:20}}>
          <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:4}}>WORK</div>
          <div style={{fontSize:18,fontWeight:600}}>{m.title}</div>
          <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)',marginTop:4}}>ISWC {window.iswcDisplay ? window.iswcDisplay(m.iswc) : m.iswc||'—'} · {(m.writers||[]).length} contributors</div>
        </div>

<div className="ff-mono upper" style={{fontSize:10,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:8}}>DDEX PROFILE</div>
        <div style={{display:'flex',gap:6,marginBottom:20,flexWrap:'wrap'}}>
          {['ERN-4.3','ERN-4.2','MWN-1.0','RDR-N-1.0'].map(p => (
            <button key={p} onClick={()=>setProfile(p)}
              style={{padding:'8px 14px',border:'1px solid '+(profile===p?'var(--ink)':'var(--rule)'),background:profile===p?'var(--ink)':'var(--bg)',color:profile===p?'var(--bg)':'var(--ink)',cursor:'pointer',fontSize:11,fontWeight:600}}>
              {p}
            </button>
          ))}
        </div>

<div className="ff-mono upper" style={{fontSize:10,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:8}}>XML PREVIEW</div>
        <pre style={{padding:12,background:'#0f1115',color:'#e8eaee',fontFamily:'JetBrains Mono, ui-monospace, monospace',fontSize:10.5,lineHeight:1.5,overflow:'auto',maxHeight:280,marginBottom:18,whiteSpace:'pre'}}>
{xml}
        </pre>

{done && (
          <div style={{padding:10,background:'#eef3e6',border:'1px solid #5b8a3a',marginBottom:14,fontSize:12,fontWeight:600,color:'#3a6b3e'}}>
            ✓ XML downloaded.
          </div>
        )}

<div style={{display:'flex',gap:8,justifyContent:'flex-end'}}>
          <Btn variant="ghost" onClick={onClose}>Close</Btn>
          <Btn variant="primary" icon={<Ic.File/>} onClick={downloadXml}>Download .xml</Btn>
        </div>
      </div>
    </ExportModalShell>
  );
}

<div className="ff-mono upper" style={{fontSize:10,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:8}}>PUBLIC URL</div>
        <div style={{display:'flex',gap:0,marginBottom:18}}>
          <input readOnly value={url} className="ff-mono"
            style={{flex:1,padding:'10px 12px',border:'1px solid var(--ink)',background:'var(--bg-2)',fontSize:12}}/>
          <button onClick={copy} className="ff-mono upper" style={{padding:'10px 16px',border:'1px solid var(--ink)',borderLeft:'none',background:copied?'#5b8a3a':'var(--ink)',color:'var(--bg)',cursor:'pointer',fontSize:10,letterSpacing:'.08em',fontWeight:600,minWidth:80}}>
            {copied ? '✓ COPIED' : 'COPY'}
          </button>
        </div>

<div style={{padding:14,border:'1px solid var(--rule)',marginBottom:18}}>
          <div className="ff-mono upper" style={{fontSize:10,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:10}}>PUBLIC PAGE INCLUDES</div>
          {[
            'Title, ISWC, alternate titles',
            'Writer credits (names + roles, no IPI numbers)',
            'Linked recordings + streaming services',
            'Lyrics (if marked public)',
          ].map((l,i)=>(
            <div key={i} style={{padding:'4px 0',fontSize:12,display:'flex',alignItems:'center',gap:8}}>
              <span style={{color:'#5b8a3a',width:14,display:'inline-flex',justifyContent:'center'}}>✓</span>
              <span>{l}</span>
            </div>
          ))}
          {[
            'Earnings, splits, identifiers',
            'Society work IDs',
          ].map((l,i)=>(
            <div key={'h'+i} style={{padding:'4px 0',fontSize:12,display:'flex',alignItems:'center',gap:8,color:'var(--ink-3)'}}>
              <span style={{color:'var(--ink-3)',width:14,display:'inline-flex',justifyContent:'center'}}>×</span>
              <span style={{textDecoration:'line-through'}}>{l}</span>
              <span className="ff-mono upper" style={{fontSize:9,letterSpacing:'.08em',marginLeft:'auto',color:'var(--ink-3)'}}>private</span>
            </div>
          ))}
        </div>

<div style={{display:'flex',gap:8,justifyContent:'flex-end'}}>
          <Btn variant="ghost" onClick={onClose}>Close</Btn>
          <Btn variant="primary" icon={<Ic.Ext/>} onClick={()=>window.open(url,'_blank')}>Open public page</Btn>
        </div>
      </div>
    </ExportModalShell>
  );
}

Object.assign(window, { ScreenDashboard, ScreenCatalog, ScreenWork, makeDemoToneWav, getDemoAudioUrl, _DEMO_AUDIO_CACHE });