// app.jsx — App shell + router + tweaks const { useState, useEffect, useMemo, useCallback, useRef } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "light", "accent": "sodium", "density": "regular", "heading": "display", "navStyle": "rail", "showGrid": false, "heroVariant": "editorial", "firstName": "Paul", "greetIndex": -1, "territoryPicker": "chips", "territoryGranularity": "tis", "fxMode": "wallets", "reportingCcy": "USD", "conflictStrictness": "warn", "showTerritoryMap": true } /*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [route, setRoute] = useState({ name: 'dashboard', payload: null }); const [paletteOpen, setPaletteOpen] = useState(false); const [auth, setAuth] = useState(() => window.AstroAuth?.state || { ready: false, signedIn: false }); // Hydrate from localStorage once on mount (so Settings/header changes survive reload) useEffect(() => { try { const ls = (k) => localStorage.getItem('astro_' + k); const next = {}; ['theme', 'accent', 'density', 'heading'].forEach((k) => {const v = ls(k);if (v) next[k] = v;}); Object.entries(next).forEach(([k, v]) => setTweak(k, v)); } catch {} // eslint-disable-next-line }, []); // Apply theme tokens to root — supports auto via prefers-color-scheme useEffect(() => { const r = document.documentElement; const apply = () => { const resolved = t.theme === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' : t.theme; r.dataset.theme = resolved; }; apply(); r.dataset.accent = t.accent; r.dataset.density = t.density; r.dataset.heading = t.heading; // Live updates from Settings page / header toggle const onPrefs = (e) => { const d = e.detail || {}; Object.entries(d).forEach(([k, v]) => setTweak(k, v)); }; window.addEventListener('astro-prefs', onPrefs); if (t.theme === 'auto') { const mq = window.matchMedia('(prefers-color-scheme: dark)'); mq.addEventListener('change', apply); return () => {mq.removeEventListener('change', apply);window.removeEventListener('astro-prefs', onPrefs);}; } return () => window.removeEventListener('astro-prefs', onPrefs); }, [t]); // Keyboard useEffect(() => { const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {e.preventDefault();setPaletteOpen((o) => !o);} if (e.key === 'Escape') setPaletteOpen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); // Body-scroll lock when any modal/drawer overlay is open. // Detection: any element in the DOM with computed position:fixed AND // (inset:0 backdrop OR z-index >= 50) — covers every modal pattern in this app // without each modal having to opt in. Counts overlays on every mutation; locks // overflow + preserves scrollbar gutter while ≥1 overlay is mounted. useEffect(() => { let prevOverflow = ''; let prevPaddingRight = ''; let locked = false; const lock = () => { if (locked) return; const sbw = window.innerWidth - document.documentElement.clientWidth; prevOverflow = document.body.style.overflow; prevPaddingRight = document.body.style.paddingRight; document.body.style.overflow = 'hidden'; if (sbw > 0) document.body.style.paddingRight = `${sbw}px`; locked = true; }; const unlock = () => { if (!locked) return; document.body.style.overflow = prevOverflow; document.body.style.paddingRight = prevPaddingRight; locked = false; }; const isOverlay = (el) => { if (!(el instanceof HTMLElement)) return false; const cs = getComputedStyle(el); if (cs.position !== 'fixed') return false; // Treat as overlay if it's a fullscreen backdrop OR has dialog-level z-index. const insetFull = cs.inset === '0px' || (cs.top === '0px' && cs.left === '0px' && cs.right === '0px' && cs.bottom === '0px'); const z = parseInt(cs.zIndex, 10); const highZ = !isNaN(z) && z >= 50; // Skip the always-mounted toolbar/HUD chrome by requiring either backdrop bg OR aria-modal. if (insetFull) { const bg = cs.backgroundColor || ''; const hasBg = bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent'; if (hasBg) return true; if (el.getAttribute('role') === 'dialog' || el.getAttribute('aria-modal') === 'true') return true; } // Side drawers / centered dialogs without a fullscreen wrapper. if (highZ && (el.getAttribute('role') === 'dialog' || el.tagName === 'ASIDE')) return true; return false; }; const scan = () => { // Look at every element with a `style="position: fixed"` inline style — fast filter. const candidates = document.querySelectorAll('[style*="fixed"], [role="dialog"], aside'); for (const el of candidates) { if (isOverlay(el)) { lock(); return; } } unlock(); }; const obs = new MutationObserver(scan); obs.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class', 'role', 'aria-modal'] }); scan(); return () => { obs.disconnect(); unlock(); }; }, []); // Open an artist profile from anywhere (writer typeahead, etc.) useEffect(() => { const onOpenArtist = (e) => { const p = e.detail?.profile || (window.ARTISTS || []).find((a) => a.id === e.detail?.id); if (p) setRoute({ name: 'public', payload: p }); }; window.addEventListener('astro-open-artist', onOpenArtist); return () => window.removeEventListener('astro-open-artist', onOpenArtist); }, []); // Deep-link via query string — used by typeahead "↗" buttons that open in a new tab // so in-progress work in the originating tab isn't lost. `aid` is the ASTRO ID // (canonical UUID) used by every entity type in the database — same column name, // not "artist id". We disambiguate which table to look in by also passing `kind`. // ?aid=&kind=writer → route to public artist profile // ?aid=&kind=publisher → fire astro-open-publisher (drawer) // Backwards-compat: bare ?aid= tries writers first, then publishers. useEffect(() => { const params = new URLSearchParams(window.location.search); const aid = params.get('aid'); const kind = params.get('kind'); if (aid) { const inWriters = window.findProfileByUuid(window.ARTISTS || [], aid); const inPublishers = window.findProfileByUuid(window.__PUBLISHERS || [], aid); if ((kind === 'writer' || !kind) && inWriters) { setRoute({ name: 'public', payload: inWriters }); } else if ((kind === 'publisher' || !kind) && inPublishers) { setTimeout(() => window.dispatchEvent(new CustomEvent('astro-open-publisher', { detail: { id: inPublishers.id } })), 0); } // Clean the URL so refreshes don't keep re-firing const url = new URL(window.location.href); url.searchParams.delete('aid'); url.searchParams.delete('kind'); window.history.replaceState({}, '', url.toString()); } }, []); const go = useCallback((name, payload = null) => { setRoute({ name, payload }); setPaletteOpen(false); window.scrollTo({ top: 0, behavior: 'instant' }); window.dispatchEvent(new CustomEvent('astro-route', { detail: { name, payload } })); }, []); // Expose `go` globally so deep components (SocietyLink etc.) can navigate without prop drilling useEffect(() => { window.__astroGo = go; }, [go]); useEffect(() => { const onAuth = (e) => setAuth(e.detail || { ready: false, signedIn: false }); window.addEventListener('astro-auth', onAuth); if (window.AstroAuth?.state) setAuth({ ...window.AstroAuth.state }); return () => window.removeEventListener('astro-auth', onAuth); }, []); const publicRoutes = new Set(['public']); if (!auth.signedIn && publicRoutes.has(route.name)) { return ; } if (!auth.signedIn) { return ; } return (

setPaletteOpen(true)} />

{t.navStyle === 'rail' && }

{route.name === 'dashboard' && = 0 ? t.greetIndex : undefined} />} {route.name === 'catalog' && } {route.name === 'directory' && } {route.name === 'work' && } {route.name === 'recording' && } {route.name === 'society' && } {route.name === 'claims' && } {route.name === 'cwr' && (window.ScreenCwrAcks ? : )} {route.name === 'caf' && (window.ScreenCaf ? : null)} {route.name === 'blackbox' && } {route.name === 'mlc' && window.ScreenMlcSync && } {route.name === 'inbox' && window.ScreenInbox && } {route.name === 'automations' && window.ScreenAutomations && } {route.name === 'notifications' && window.ScreenInbox && } {route.name === 'audit' && window.ScreenAudit && } {route.name === 'agreement' && } {route.name === 'agreement-templates' && window.ScreenAgreementTemplates && } {route.name === 'agreement-renewals' && window.ScreenAgreementRenewals && } {route.name === 'agreement-counterparty' && window.ScreenAgreementCounterparty && } {route.name === 'localization' && window.ScreenLocalization && } {route.name === 'analytics' && window.ScreenAnalytics && } {route.name === 'audience' && } {route.name === 'royalties' && } {route.name === 'reconciliation' && window.ScreenReconciliation && } {route.name === 'statement-out' && window.ScreenStatementOut && } {route.name === 'subpubs' && window.ScreenSubpubs && } {route.name === 'issues' && } {route.name === 'conformance' && window.ScreenConformance && } {route.name === 'copyright' && } {route.name === 'public' && } {route.name === 'settings' && ( )} {route.name === 'search' && (paletteOpen ? null : )} {route.name === 'rs-catalog' && window.ScreenRSCatalog && } {route.name === 'integrations' && window.ScreenIntegrations && } {route.name === 'enrichment-policy' && window.ScreenEnrichmentPolicy && } {route.name === 'insights' && window.ScreenInsights && } {route.name === 'reports' && window.ScreenReports && } {route.name === 'audio-fp' && window.ScreenAudioFP && } {route.name === 'cultural' && window.ScreenCulturalMarket && } {route.name === 'future-proof' && window.ScreenFutureProof && } {route.name === 'stmt-parser' && window.ScreenStmtParser && } {route.name === 'stmt-custom' && window.ScreenStmtCustom && } {route.name === 'fee-engine' && window.ScreenFeeEngine && } {route.name === 'writer-payments' && window.ScreenWriterPayments && } {route.name === 'royalty-viz' && window.ScreenRoyaltyViz && } {route.name === 'bulk-import' && window.ScreenBulkImport && } {route.name === 'dsp-import' && window.ScreenDspImport && } {route.name === 'bulk-reg' && window.ScreenBulkReg && } {route.name === 'mandate' && window.ScreenMandate && } {route.name === 'id-codes' && window.ScreenIdCodes && } {route.name === 'territory' && window.ScreenTerritory && } {route.name === 'imprints' && window.ScreenImprintHierarchy && } {route.name === 'releases-id' && window.ScreenReleasesId && } {route.name === 'mam' && window.ScreenMam && } {route.name === 'bulk-export' && window.ScreenBulkExport && } {route.name === 'mojibake' && window.ScreenMojibake && } {route.name === 'dedup' && window.ScreenDedup && } {route.name === 'api' && window.ScreenApi && } {route.name === 'pro-lookup' && window.ScreenPROLookup && }

); } // ───────────────────────── Workspace switcher (real dropdown) const WORKSPACES = [ { id: 'pluralis', name: 'Pluralis Music', glyph: 'P', role: 'Owner', kind: 'Publisher', ipi: '00578913241', members: 14, palette: '#FFE65A' }, { id: 'half-tone', name: 'Half-Tone Records', glyph: 'H', role: 'Admin', kind: 'Label', ipi: '00712054088', members: 6, palette: '#3F8F6E' }, { id: 'sk-pub', name: 'Solange Knowles Pub.', glyph: 'S', role: 'Contributor', kind: 'Writer admin', ipi: '00892331140', members: 3, palette: '#D9602B' }, { id: 'eos-coop', name: 'EOS Cooperative', glyph: 'E', role: 'Owner', kind: 'CMO group', ipi: '01122907615', members: 38, palette: '#3056C8' }]; function WorkspaceSwitcher() { const [cur, setCur] = useState(() => { try {const id = localStorage.getItem('astro_ws');return WORKSPACES.find((w) => w.id === id) || WORKSPACES[0];} catch {return WORKSPACES[0];} }); const [open, setOpen] = useState(false); const wrapRef = useRef(null); useEffect(() => { if (!open) return; const onDoc = (e) => {if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);}; const onKey = (e) => {if (e.key === 'Escape') setOpen(false);}; const onRoute = () => setOpen(false); document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onKey); window.addEventListener('astro-route', onRoute); window.addEventListener('hashchange', onRoute); return () => {document.removeEventListener('mousedown', onDoc);document.removeEventListener('keydown', onKey);window.removeEventListener('astro-route', onRoute);window.removeEventListener('hashchange', onRoute);}; }, [open]); const pick = (ws) => { setCur(ws); try {localStorage.setItem('astro_ws', ws.id);} catch {} setOpen(false); }; return (

{open &&

{/* Current header */}

CURRENT WORKSPACE

{cur.glyph}

{cur.name}

{cur.kind} · IPI {cur.ipi}

{cur.role}

{cur.members} members · Production env

{/* Switch list */}

SWITCH TO

{WORKSPACES.filter((w) => w.id !== cur.id).map((w) => )}

{/* Footer actions */}

}

); } // ───────────────────────── Theme toggle (sun/moon/auto cycle) function ThemeToggle() { const [pref, setPref] = useState(() => {try {return localStorage.getItem('astro_theme') || 'light';} catch {return 'light';}}); useEffect(() => { const onPrefs = (e) => {if (e.detail?.theme) setPref(e.detail.theme);}; window.addEventListener('astro-prefs', onPrefs); return () => window.removeEventListener('astro-prefs', onPrefs); }, []); const cycle = () => { const order = ['light', 'dark', 'auto']; const next = order[(order.indexOf(pref) + 1) % order.length]; setPref(next); try {localStorage.setItem('astro_theme', next);} catch {} window.dispatchEvent(new CustomEvent('astro-prefs', { detail: { theme: next } })); }; const Icon = pref === 'dark' ? Ic.Moon : pref === 'auto' ? Ic.ThemeAuto : Ic.Sun; const label = pref === 'dark' ? 'Dark' : pref === 'auto' ? 'Auto' : 'Light'; return ( ); } // ───────────────────────── User menu (account dropdown) function UserMenu({ go }) { const [open, setOpen] = useState(false); const wrapRef = useRef(null); useEffect(() => { if (!open) return; const onDoc = (e) => {if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);}; const onKey = (e) => {if (e.key === 'Escape') setOpen(false);}; const onRoute = () => setOpen(false); document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onKey); window.addEventListener('astro-route', onRoute); window.addEventListener('hashchange', onRoute); return () => {document.removeEventListener('mousedown', onDoc);document.removeEventListener('keydown', onKey);window.removeEventListener('astro-route', onRoute);window.removeEventListener('hashchange', onRoute);}; }, [open]); const close = () => setOpen(false); const item = (icon, label, kbd, onClick, danger) => ; return (

{open &&

{/* Identity card */}

Avery Cohen

avery@pluralis.music

RIGHTS OPS ADMIN 2FA ON

{/* Personal */}

{item(, 'Profile & preferences', null, () => go('settings', { tab: 'profile' }))} {item(, 'Notifications', null, () => go('settings', { tab: 'notifications' }))} {item(, 'Security & API tokens', null, () => go('settings', { tab: 'security' }))}

{/* Workspace context */}

{item(, 'Workspace settings', null, () => go('settings', { tab: 'workspace' }))} {item(, 'Platform mandate', null, () => go('mandate'))} {item(, 'Audit log', null, () => go('audit'))} {item(, 'Import & Conform', null, () => go('conformance'))} {item(, 'Bulk catalog import', null, () => go('bulk-import'))} {item(, 'DSP analytics import', null, () => go('dsp-import'))} {item(, 'Bulk registrations', null, () => go('bulk-reg'))} {item(, 'Identifier codes', null, () => go('id-codes'))} {item(, 'Territories & FX', null, () => go('territory'))} {item(, 'API integrations', null, () => go('integrations'))} {item(, 'Enrichment policy', null, () => go('enrichment-policy'))} {item(, 'Developer API', null, () => go('api'))} {item(, 'PRO Lookup', null, () => go('pro-lookup'))} {item(, 'Localization', null, () => go('localization'))} {item(, 'Billing & seats', null, () => go('settings', { tab: 'billing' }))}

{/* Operational surfaces — folded out of primary nav. Each warrants its own page; users reach them from Issues, Catalog, or this menu. */}

{item(, 'Claims & disputes', null, () => go('claims'))} {item(, 'CWR · DDEX transmissions', null, () => go('cwr'))} {item(, 'Black-box pools', null, () => go('blackbox'))} {item(, 'MLC sync', null, () => go('mlc'))} {item(, 'Copyright registrations', null, () => go('copyright'))} {item(, 'Sub-publisher deals', null, () => go('subpubs'))} {item(, 'Imprint hierarchy', null, () => go('imprints'))} {item(, 'Releases ID tracker', null, () => go('releases-id'))} {item(, 'Multimedia assets', null, () => go('mam'))} {item(, 'Bulk-registration exports', null, () => go('bulk-export'))} {item(, 'Mojibake decoder', null, () => go('mojibake'))} {item(, 'Catalog dedup', null, () => go('dedup'))}

{/* Help */}

{item(, 'Command menu', '⌘K', () => {window.dispatchEvent(new CustomEvent('astro-open-palette'));})} {item(, 'What\u2019s new', null)} {item(, 'Keyboard shortcuts', '?')}

{/* Sign out */}

{item(, 'Sign out', null, null, true)}

}

); } // ───────────────────────── Header function Header({ go, route, openPalette }) { return (

{/* Workspace switcher */} {/* Cmd-K trigger */}

); } function AuthStatus() { const userButtonRef = useRef(null); const [auth, setAuth] = useState(() => window.AstroAuth?.state || { ready: false, signedIn: false }); const [backend, setBackend] = useState({ ok: false, checks: {} }); const [live, setLive] = useState(null); useEffect(() => { const onAuth = (e) => setAuth(e.detail || {}); const onBackend = (e) => setBackend(e.detail || { ok: false, checks: {} }); const onLive = (e) => setLive(e.detail || null); window.addEventListener('astro-auth', onAuth); window.addEventListener('astro-backend', onBackend); window.addEventListener('astro-live-data', onLive); if (window.AstroAuth?.state) setAuth({ ...window.AstroAuth.state }); return () => { window.removeEventListener('astro-auth', onAuth); window.removeEventListener('astro-backend', onBackend); window.removeEventListener('astro-live-data', onLive); }; }, []); useEffect(() => { if (auth.signedIn && userButtonRef.current) { window.AstroAuth?.mountUserButton(userButtonRef.current); } }, [auth.signedIn]); const tone = auth.signedIn && backend.ok ? 'var(--ok)' : auth.error || backend.error ? 'var(--danger)' : 'var(--ink-3)'; const label = !auth.ready ? 'Auth…' : auth.signedIn ? 'Live' : 'Sign in'; const detail = auth.signedIn ? ( live?.counts ? `${(live.counts.works || 0).toLocaleString()} works` : backend.ok ? 'backend ready' : 'checking backend' ) : auth.error ? 'auth setup' : 'secure data'; return (

{auth.signedIn && }

); } function RequireSignedIn({ children, go }) { const [auth, setAuth] = useState(() => window.AstroAuth?.state || { ready: false, signedIn: false }); useEffect(() => { const onAuth = (e) => setAuth(e.detail || { ready: false, signedIn: false }); window.addEventListener('astro-auth', onAuth); if (window.AstroAuth?.state) setAuth({ ...window.AstroAuth.state }); return () => window.removeEventListener('astro-auth', onAuth); }, []); if (!auth.ready) { return (

Private workspace

Checking session.

); } if (!auth.signedIn) { return (

Private workspace

Sign in to open settings.

Workspace, billing, team, API, and security settings are only available to signed-in users.

window.AstroAuth?.signIn()}>Sign in go('dashboard')}>Back to home

); } return children; } function SignedOutGate({ auth }) { const checks = [ ['Works, recordings, releases', 'Catalog metadata and identifiers'], ['Royalties and analytics', 'Statements, charts, revenue streams'], ['CWR, CAF, DDEX delivery', 'Registrations and transmission tools'], ['R2 media assets', 'Artwork, audio, video, profile files'] ]; const status = !auth.ready ? 'Preparing secure workspace' : auth.error ? 'Authentication setup needs attention' : 'Secure workspace'; const canLaunchAuth = auth.ready && !auth.error; return (

ASTRO RIGHTS

Music rights operating system

{status}

Manage music rights with real catalog data.

Sign in to access works, recordings, releases, royalties, analytics, CWR delivery, agreements, profiles, and secured media assets.

{auth.error && (

{auth.error}

)}

window.AstroAuth?.signIn()}>Sign in window.AstroAuth?.signUp()}>Create account

); } function PublicRouteShell({ route, go, auth }) { return (

ASTRO RIGHTS

Public profile

{route.name === 'public' && }

); } // ───────────────────────── Ticker function Ticker() { const items = [ 'CWR · ASCAP · 144 works · ACK 99.2%', 'GEMA · awaiting ack · seq #003', 'Royalty parse complete · SoundExchange Q3', 'NEW conflict · 10% (T-998.221.001-4) · KAY vs Sony/ATV', 'Spotify import 71%', 'PRS rejected CW260418PRS.V30 · re-send queued', 'YouTube Channel UC0918 · 1,204 ISRCs matched', 'Apple Music DDEX ERN 4.3 delivered · EU', 'New profile claim · Solange Knowles · IPI 00578913241', 'Catalog +212 works (30d)']; const doubled = [...items, ...items]; return (

{doubled.map((it, i) => {it} )}

); } // ───────────────────────── Icon rail function Rail({ go, route }) { // Live counts from the central catalog-stats object const claimsBadge = window.CATALOG_STATS?.claims?.open || 0; const issuesBadge = window.__ISSUES_OPEN_COUNT || 0; const blackboxBadge = window.__BLACKBOX_URGENT || 0; // Simplified primary nav — five screens. // Cut from rail (still routable for back-compat / deep links): // claims, cwr, blackbox, copyright, subpubs → folded into Issues / Catalog / Settings. // royalties → folded into Earnings as side-panel ingest. // audience, public → moved to secondary surfaces. // Inbox lives in the top-bar bell — no rail entry. Bell badge below sums // today's tasks + unread messages. const items = [ { k: 'dashboard', i: Ic.Bar, l: 'Home' }, { k: 'catalog', i: Ic.Disc, l: 'Catalog' }, { k: 'directory', i: Ic.User, l: 'Directory' }, { k: 'royalties', i: Ic.Coin, l: 'Earnings' }, { k: 'analytics', i: Ic.Bar, l: 'Analytics' }, { k: 'insights', i: Ic.Spark, l: 'Insights' }, { k: 'reports', i: Ic.Doc || Ic.File || Ic.Bar, l: 'Reports' }, { k: 'automations', i: Ic.Settings, l: 'Automations' }, { k: 'issues', i: Ic.Eye, l: 'Issues', badge: issuesBadge }]; return (

{items.map((it) => { const Icon = it.i; const active = route === it.k || it.k === 'catalog' && route === 'work' || it.k === 'public' && route === 'public'; return ( ); })}

); } // ───────────────────────── Footer function Footer() { return ( ); } ReactDOM.createRoot(document.getElementById('root')).render();