/* ============================================================ PRODUCTION STATUS — owner-only financial control room · Gated behind a simple "boss login" (the creator/owner) · NEVER visible to invited crew — entry only from the owner's top-right menu; numbers live outside the project · Portfolio P&L across all of the owner's productions + four health gauges: budget · days · work intensity · crew ============================================================ */ /* ---------- global open/close store (called from the avatar menu) ---------- */ const psSubs = new Set(); let psOpen = false; window.openProductionStatus = () => { psOpen = true; psSubs.forEach(f => f()); }; window.closeProductionStatus = () => { psOpen = false; psSubs.forEach(f => f()); }; function usePSOpen() { const [, force] = useState(0); useEffect(() => { const fn = () => force(n => n + 1); psSubs.add(fn); return () => psSubs.delete(fn); }, []); return psOpen; } /* ---------- helpers ---------- */ const ps$ = n => '$' + Math.round(Number(n) || 0).toLocaleString('en-US'); const psK = n => { /* compact for tickers */ const v = Math.round(Number(n) || 0); if (Math.abs(v) >= 1000000) return '$' + (v / 1000000).toFixed(2) + 'M'; if (Math.abs(v) >= 1000) return '$' + (v / 1000).toFixed(0) + 'K'; return '$' + v; }; const pctOf = (a, b) => b ? (a / b) * 100 : 0; const clamp = (v, a, b) => Math.max(a, Math.min(b, v)); /* health → tone: 'good' | 'watch' | 'risk' (lower ratio is better for spend) */ const tone3 = (ratio, warn = 0.85, bad = 1) => ratio >= bad ? 'risk' : ratio >= warn ? 'watch' : 'good'; const TONE = { good: { t: 'text-mint', b: 'bg-mint', soft: 'bg-mint/12 text-mint', ring: 'border-mint/40', hex: '#22D48A', label: 'Healthy' }, watch: { t: 'text-amber', b: 'bg-amber', soft: 'bg-amber/12 text-amber', ring: 'border-amber/40', hex: '#FFB020', label: 'Watch' }, risk: { t: 'text-[#FF6B8A]',b: 'bg-[#FF4D6D]', soft: 'bg-[#FF4D6D]/12 text-[#FF6B8A]',ring: 'border-[#FF4D6D]/40',hex: '#FF4D6D', label: 'At risk' }, }; /* ============================================================ THE OWNER'S SLATE — confidential financials (not in project) dep rows: [budget, spent, committed] ============================================================ */ const PS_DEPTS = ['Camera', 'Lighting & Grip', 'Art Dept', 'Wardrobe & HMU', 'Cast', 'Production & Crew', 'Locations', 'Post', 'Travel & Catering', 'Insurance & Contingency']; const OWNER_SLATE = [ { code: 'CRSK', name: 'Crimson Skies', client: 'Aether Aviation Co.', type: 'Commercial', status: 'In Production', color: '#5B0952', fg: '#F7A8CF', fee: 420000, daysUsed: 1, daysPlanned: 4, intensity: 72, crewLoad: 64, dep: [[38000, 22000, 9000], [30000, 18000, 6000], [42000, 25000, 12000], [18000, 11000, 3000], [35000, 20000, 8000], [46000, 28000, 7000], [22000, 14000, 4000], [25000, 4000, 6000], [12000, 7000, 2000], [15000, 9000, 0]], }, { code: 'NTDE', name: 'Northern Tide', client: 'Meridian Public Media', type: 'Documentary Series', status: 'In Post', color: '#16323A', fg: '#7FD7C4', fee: 680000, daysUsed: 18, daysPlanned: 18, intensity: 41, crewLoad: 38, dep: [[52000, 50000, 1000], [40000, 39000, 0], [30000, 28000, 1000], [16000, 15000, 0], [44000, 44000, 0], [88000, 82000, 4000], [34000, 33000, 0], [120000, 61000, 38000], [26000, 24000, 1000], [22000, 18000, 0]], }, { code: 'VLVT', name: 'Velvet Hours', client: 'Maison Lëa', type: 'Brand Film', status: 'Delivered', color: '#200248', fg: '#C9A9FF', fee: 295000, daysUsed: 3, daysPlanned: 3, intensity: 30, crewLoad: 22, dep: [[30000, 31500, 0], [24000, 24800, 0], [38000, 41000, 0], [14000, 14200, 0], [22000, 22000, 0], [34000, 35500, 0], [18000, 18600, 0], [22000, 21000, 0], [10000, 11200, 0], [12000, 12000, 0]], }, { code: 'HRBR', name: 'Harbor & Co.', client: 'Still Water Spirits', type: 'Campaign', status: 'In Prep', color: '#1F2A3D', fg: '#9FC1E8', fee: 240000, daysUsed: 0, daysPlanned: 5, intensity: 12, crewLoad: 18, dep: [[34000, 0, 14000], [26000, 0, 8000], [40000, 2000, 16000], [16000, 0, 4000], [30000, 5000, 12000], [42000, 3000, 9000], [20000, 0, 6000], [24000, 0, 0], [12000, 1000, 3000], [14000, 0, 0]], }, ]; /* derive everything for one production at a given VAT + protected margin */ function derive(p, vatRate, protectPct) { const budget = p.dep.reduce((s, d) => s + d[0], 0); const spent = p.dep.reduce((s, d) => s + d[1], 0); const committed = p.dep.reduce((s, d) => s + d[2], 0); const projFinal = p.dep.reduce((s, d) => s + Math.max(d[0], d[1] + d[2]), 0); /* lands at budget, or higher if over-ordered */ const vat = p.fee - p.fee / (1 + vatRate); /* fee is gross, incl. VAT */ const net = p.fee - vat; /* net revenue available to make the film + profit */ const profit = net - projFinal; /* top budget − VAT − all production */ const margin = pctOf(profit, net); const protectReserve = net * protectPct; /* profit the owner refuses to spend into */ const safeToSpend = net - protectReserve - (spent + committed); const budgetTone = tone3((spent + committed) / Math.max(1, net - protectReserve)); const daysTone = tone3(p.daysPlanned ? p.daysUsed / p.daysPlanned : 0, 0.8, 1.001); const intensityTone = tone3(p.intensity / 100, 0.7, 0.9); const crewTone = tone3(p.crewLoad / 100, 0.7, 0.9); return { budget, spent, committed, projFinal, vat, net, profit, margin, protectReserve, safeToSpend, budgetTone, daysTone, intensityTone, crewTone }; } /* ============================================================ LIVE SLATE — derive each owned production's financials from its real per-project stores (budget, purchasing, brief, DPR, board). Reads across productions with the raw (un-proxied) localStorage. ============================================================ */ function psReadRaw(pid, key) { try { const k = (pid === 'crimson') ? key : '@' + pid + '.' + key; const raw = window.__lsRaw ? window.__lsRaw.get(k) : localStorage.getItem(k); return raw == null ? null : JSON.parse(raw); } catch (e) { return null; } } const PS_DEPT_RX = [ [/camera|cinematograph|\bdop\b|\bdp\b/i, 'Camera'], [/light|grip|gaffer|electric/i, 'Lighting & Grip'], [/art|set dress|dressing|prop|design|construction/i, 'Art Dept'], [/wardrobe|costume|make ?up|hmu|hair|styling/i, 'Wardrobe & HMU'], [/cast|talent|actor|extra|background/i, 'Cast'], [/location|permit|scout/i, 'Locations'], [/post|edit|colou?r|grade|vfx|sound|music|\bmix\b|online|offline/i, 'Post'], [/travel|transport|cater|craft|logist|hotel|flight|meal/i, 'Travel & Catering'], [/insurance|contingency|legal|misc|bond/i, 'Insurance & Contingency'], ]; function deptIndexFor(name) { for (let i = 0; i < PS_DEPT_RX.length; i++) if (PS_DEPT_RX[i][0].test(name || '')) return PS_DEPTS.indexOf(PS_DEPT_RX[i][1]); return PS_DEPTS.indexOf('Production & Crew'); // above-the-line, producer, crew & anything unmatched } function deriveSlateEntry(prod) { const pid = prod.pid; const brief = psReadRaw(pid, 'silverlines.brief.v1') || {}; const cats = psReadRaw(pid, 'silverlines.budget.' + pid + '.v1'); const purchase = psReadRaw(pid, 'silverlines.purchase.' + pid + '.v1') || {}; const dpr = psReadRaw(pid, 'silverlines.dpr.' + pid + '.v1'); const sb = psReadRaw(pid, 'silverlines.storyboard.v1'); const crewlog = psReadRaw(pid, 'silverlines.crewlog.' + pid + '.v1'); const dep = PS_DEPTS.map(() => [0, 0, 0]); (Array.isArray(cats) ? cats : []).forEach(c => { const est = (c.lines || []).reduce((a, l) => a + (+l.qty || 0) * (+l.rate || 0), 0); const act = (c.lines || []).reduce((a, l) => a + (+l.actual || 0), 0); const idx = deptIndexFor(c.name); dep[idx][0] += est; dep[idx][1] += act; }); const pAll = (purchase.sets || []).flatMap(s => s.items || []); const pSum = st => pAll.filter(i => i.status === st).reduce((a, i) => a + (+i.qty || 0) * (+i.price || 0), 0); const ai = PS_DEPTS.indexOf('Art Dept'); dep[ai][1] += pSum('purchased'); dep[ai][2] += pSum('approved'); const budget = dep.reduce((s, d) => s + d[0], 0); const spent = dep.reduce((s, d) => s + d[1], 0); const daysUsed = (Array.isArray(dpr) ? dpr : []).filter(d => d.wrap).length; const daysPlanned = +brief.days || (Array.isArray(sb) ? sb.reduce((m, s) => Math.max(m, (s.sched && +s.sched.day) || 0), 0) : 0) || daysUsed || 0; return { code: prod.code || (prod.name || 'Untitled').slice(0, 4).toUpperCase(), name: prod.name || 'Untitled', client: brief.client || prod.client || '—', type: brief.type || prod.type || 'Production', status: prod.status || brief.status || 'In Prep', color: prod.color || prod.bg || '#1F2A3D', fg: prod.fg || '#9FC1E8', fee: +brief.budget || budget || 0, daysUsed, daysPlanned, intensity: clamp(Math.round(pctOf(spent, budget || 1)), 0, 100), crewLoad: clamp((Array.isArray(crewlog) ? crewlog.length : 0) * 6, 0, 100), dep, _real: true, }; } /* the real productions (with data) + the Crimson demo; falls back to the fictional slate as clearly-badged demo garnish when the owner has no real productions yet. */ function ownerSlate() { const prods = (window.slProductions ? window.slProductions() : []) || []; const real = prods.filter(p => !p.demo && p.pid && p.pid !== 'crimson'); const realEntries = real.map(deriveSlateEntry); const crsk = OWNER_SLATE.find(p => p.code === 'CRSK'); if (realEntries.length) return [...realEntries, ...(crsk ? [{ ...crsk, _demo: true }] : [])]; return OWNER_SLATE.map(p => ({ ...p, _demo: true })); } /* ============================================================ SMALL UI PARTS ============================================================ */ function StatBlock({ label, value, sub, tone, big }) { const tn = tone && TONE[tone]; return (
{label}
{value}
{sub != null &&
{sub}
}
); } /* ---------- department icons + per-production teams (people, not just money) ---------- */ const DEPT_META = { 'Camera': 'Video', 'Lighting & Grip': 'Lightbulb', 'Art Dept': 'Palette', 'Wardrobe & HMU': 'Shirt', 'Cast': 'Drama', 'Production & Crew': 'ClipboardList', 'Locations': 'MapPin', 'Post': 'Scissors', 'Travel & Catering': 'UtensilsCrossed', 'Insurance & Contingency': 'ShieldCheck', }; const CAST_STATUS = { confirmed: { t: 'text-mint', d: 'bg-mint', label: 'Confirmed' }, hold: { t: 'text-amber', d: 'bg-amber', label: 'On hold' }, optioned: { t: 'text-electric-soft', d: 'bg-electric', label: 'Optioned' }, wrapped: { t: 'text-zinc-400', d: 'bg-zinc-500', label: 'Wrapped' }, }; /* crew: [name, role, dayRate, days] · cast: [name, character, fee, status] */ const PS_TEAMS = { CRSK: { cast: [ ['Lena Frost', '“The Aviator” · Lead', 14000, 'confirmed'], ['Marcus Vane', '“Ground Control”', 6500, 'confirmed'], ['Iris Cole', '“The Engineer”', 4200, 'confirmed'], ['Theo Mraz', '“Tower Operator”', 2800, 'hold'], ['Background · 6 pilots', 'Featured extras', 1600, 'confirmed'], ], crew: { 'Camera': [['Idris Vance', 'Director of Photography', 1800, 4], ['Mia Sorenson', '1st AC', 700, 4], ['Owen Pike', '2nd AC', 520, 4], ['Dana Reuben', 'DIT', 640, 4]], 'Lighting & Grip': [['Theo Nkemelu', 'Gaffer', 850, 4], ['Russ Calderon', 'Key Grip', 800, 4], ['Sam Iversen', 'Best Boy', 520, 4]], 'Art Dept': [['Ravi Anand', 'Production Designer', 1100, 6], ['Cleo Banks', 'Set Decorator', 680, 6], ['Hugo Pratt', 'Props Master', 620, 5], ['Nina Sol', 'Set Dresser', 420, 6]], 'Wardrobe & HMU': [['Juno Park', 'Costume Designer', 700, 4], ['Coraline Bisset', 'Key MUA', 650, 4], ['Remy Dax', 'Hair', 480, 4]], 'Production & Crew': [['Suki Tanaka', '1st AD', 950, 4], ['Priya Raman', '2nd AD', 620, 4], ['Noah Vega', 'Coordinator', 560, 5], ['Jess Okoro', 'Runner', 240, 4], ['Diego Salas', 'Runner', 240, 4], ['Amy Chen', 'Set Runner', 240, 4]], 'Travel & Catering': [['Goldspoon Catering', 'Craft & hot meals', 2400, 1], ['Bea Lumen', 'Craft Service', 360, 4], ['Carl Otis', 'Driver Captain', 420, 4]], 'Locations': [['Marble & Co.', 'Locations + permits', 1800, 1], ['Wes Hark', 'Location Manager', 700, 3]], 'Post': [['Edit Bay 4', 'Offline suite', 1500, 1]], }, }, NTDE: { cast: [['Aria Voss', 'Narrator', 9000, 'confirmed'], ['Documentary subjects', '7 interviewees', 3500, 'confirmed']], crew: { 'Camera': [['Sana Mehre', 'DP / Operator', 1400, 18], ['Lou Brandt', 'AC', 600, 18]], 'Production & Crew': [['Noor Haddad', 'Producer', 1500, 18], ['Kit Yarrow', 'Field Producer', 800, 18], ['Tess Vu', 'Runner', 240, 12]], 'Post': [['Mara Silva', 'Lead Editor', 1100, 40], ['Owen Hale', 'Assistant Editor', 620, 30], ['Sound House', 'Mix & master', 6000, 1]], 'Travel & Catering': [['Roadhouse Catering', 'Location meals', 1800, 6]], }, }, VLVT: { cast: [['Noé Saint', '“The Muse” · Lead', 12000, 'wrapped'], ['Elise Mar', '“The Watcher”', 5000, 'wrapped']], crew: { 'Camera': [['Idris Vance', 'DP', 1900, 3], ['Mia Sorenson', '1st AC', 720, 3]], 'Art Dept': [['Ravi Anand', 'Production Designer', 1200, 3], ['Nina Sol', 'Set Dresser', 440, 3]], 'Production & Crew': [['Suki Tanaka', '1st AD', 1000, 3], ['Amy Chen', 'Runner', 260, 3]], }, }, HRBR: { cast: [['Casting in progress', '2 leads optioned', 0, 'optioned']], crew: { 'Camera': [['TBD', 'DP — quoting', 0, 0]], 'Production & Crew': [['Noor Haddad', 'Producer', 1500, 5], ['Priya Raman', '1st AD — held', 950, 5]], 'Art Dept': [['Cleo Banks', 'Designer — prepping', 720, 4]], }, }, }; const teamCost = m => (m.fee != null ? m.fee : (m.rate || 0) * (m.days || 1)); /* ---------- one department row, expandable to its people ---------- */ function DeptRow({ name, fin, members, open, onToggle }) { const [budget, spent, committed] = fin; const used = spent + committed, rem = budget - used; const t = tone3(used / Math.max(1, budget)); const isCast = name === 'Cast'; const head = members && members[0]; return (
{open && (
{members && members.length ? (
{members.map((m, i) => { const cost = teamCost(m); const st = isCast && CAST_STATUS[m.status]; return (
{m.name} {m.sub} {st && {st.label}} {!isCast && (m.rate ? {ps$(m.rate)}/d · {m.days}d : null)} {cost ? ps$(cost) : '—'}
); })}
) : (
Roster not itemised · {psK(used)} committed
)}
)}
); } function DeptOverview({ p, depFin }) { const team = PS_TEAMS[p.code] || { cast: [], crew: {} }; const cast = (team.cast || []).map(c => ({ name: c[0], sub: c[1], fee: c[2], status: c[3] })); const crewOf = name => (team.crew[name] || []).map(c => ({ name: c[0], sub: c[1], rate: c[2], days: c[3] })); const [open, setOpen] = useState(() => new Set(['Cast'])); const toggle = name => setOpen(s => { const n = new Set(s); n.has(name) ? n.delete(name) : n.add(name); return n; }); const heads = PS_DEPTS.reduce((a, name) => a + (name === 'Cast' ? cast.length : crewOf(name).length), 0); return (
Departments & people · {p.name} {heads} people click a dept to expand
{PS_DEPTS.map((name, i) => ( toggle(name)} /> ))}
spent committed right column = remaining vs budget
); } function Gauge({ icon, label, value, caption, tone, pct }) { const tn = TONE[tone]; return (
{label} {tn.label}
{value}
{caption}
); } /* ============================================================ BOSS LOGIN — the gate ============================================================ */ function BossLogin({ onUnlock }) { const acct = window.Auth ? window.Auth.current() : null; const [email] = useState((acct && acct.email) || 'owner@silverlines.app'); const [pw, setPw] = useState(''); const [show, setShow] = useState(false); const [shake, setShake] = useState(false); const [err, setErr] = useState(''); const submit = () => { /* verify the owner's real password (salted SHA-256) — not a length check */ const res = window.Auth ? window.Auth.signIn(email, pw) : { ok: false, reason: 'no-auth' }; if (!res.ok) { setErr(res.reason === 'password' ? 'That password does not match the owner account.' : res.reason === 'no-account' ? 'No owner account is set up on this device.' : 'Could not verify — please sign in again.'); setShake(true); setTimeout(() => setShake(false), 420); return; } setErr(''); try { sessionStorage.setItem('silverlines.boss.session', '1'); } catch (e) {} onUnlock(); }; return (
Owner access only

Production Status

The real books — fees, costs and profit across your slate. Invited crew never see this. Sign in as the production owner to continue.

{email} Owner
setPw(e.target.value)} onKeyDown={e => e.key === 'Enter' && submit()} placeholder="Enter owner password" className="min-w-0 flex-1 bg-transparent text-[13px] tracking-wide text-zinc-100 outline-none placeholder:text-zinc-600" />
{err &&
{err}
}
Owner-verified · session locks on exit
); } /* ============================================================ THE TERMINAL ============================================================ */ function StatusTerminal() { const { theme } = useContext(AccessContext) || {}; const [vatRate, setVatRate] = useState(0.20); const [protectPct, setProtectPct] = useState(0.15); const SLATE = useMemo(() => ownerSlate(), []); const [sel, setSel] = useState(SLATE[0].code); const [clock, setClock] = useState(() => new Date()); useEffect(() => { const t = setInterval(() => setClock(new Date()), 1000); return () => clearInterval(t); }, []); const rows = SLATE.map(p => ({ p, d: derive(p, vatRate, protectPct) })); /* portfolio active = everything not delivered counts toward live exposure; totals span the whole slate */ const T = rows.reduce((a, { p, d }) => ({ fee: a.fee + p.fee, vat: a.vat + d.vat, net: a.net + d.net, spent: a.spent + d.spent, committed: a.committed + d.committed, projFinal: a.projFinal + d.projFinal, profit: a.profit + d.profit, safe: a.safe + d.safeToSpend, }), { fee: 0, vat: 0, net: 0, spent: 0, committed: 0, projFinal: 0, profit: 0, safe: 0 }); const portMargin = pctOf(T.profit, T.net); const portTone = tone3((T.spent + T.committed) / Math.max(1, T.net - T.net * protectPct)); const current = rows.find(r => r.p.code === sel) || rows[0]; const cp = current.p, cd = current.d; const burn = cp.daysUsed ? cd.spent / cp.daysUsed : 0; const fmtTime = clock.toLocaleTimeString('en-US', { hour12: false }); const fmtDate = clock.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }); return (
{/* ===== terminal header ===== */}

Production Status

Confidential
Owner & finance only · {SLATE.length} production{SLATE.length === 1 ? '' : 's'} on slate{SLATE.every(p => p._demo) ? ' · demo data' : ''}
LIVE ·{fmtTime} {fmtDate}
{/* ===== KPI ticker strip ===== */}
{/* ===== body ===== */}
{/* controls */}
Owner controls
VAT
{[0, 0.1, 0.2].map(r => ( ))}
Protected profit setProtectPct(+e.target.value / 100)} className="min-w-0 flex-1 accent-proflow" /> {(protectPct * 100).toFixed(0)}%
Headroom = fee − VAT − all production
{/* health gauges for the selected production */}
Health status {cp.name} {cp.code} · {cp.status}
= cp.daysPlanned ? 'Shoot complete' : `${cp.daysPlanned - cp.daysUsed} day(s) to go`} /> = 90 ? 'Overloaded schedule' : cp.intensity >= 70 ? 'Heavy but holding' : 'Comfortable pace'} /> = 90 ? 'Burnout risk' : cp.crewLoad >= 70 ? 'Near capacity' : 'Within limits'} />
{/* portfolio P&L table */}
Portfolio P&L · all productions click a row to drill in
{rows.map(({ p, d }) => { const on = p.code === sel; return ( setSel(p.code)} className={cx('cursor-pointer border-t border-line/60 font-mono text-[12px] tabular-nums transition-colors', on ? 'bg-ink-800' : 'hover:bg-ink-900')}> ); })}
Production Fee Net Spent Committed Proj. cost Profit Margin Health
{p.code.slice(0, 2)} {p.name} {p.status}
{psK(p.fee)} {psK(d.net)} {psK(d.spent)} {psK(d.committed)} {psK(d.projFinal)} = 0 ? 'text-mint' : 'text-[#FF6B8A]')}>{psK(d.profit)} = 15 ? 'text-mint' : d.margin >= 0 ? 'text-amber' : 'text-[#FF6B8A]')}>{d.margin.toFixed(1)}%
Portfolio {psK(T.fee)} {psK(T.net)} {psK(T.spent)} {psK(T.committed)} {psK(T.projFinal)} = 0 ? 'text-mint' : 'text-[#FF6B8A]')}>{psK(T.profit)} = 15 ? 'text-mint' : 'text-amber')}>{portMargin.toFixed(1)}%
{/* drill-in: departments & people + headroom math */}
{/* headroom / income waterfall */}
Income → profit · {cp.code}
{[ ['Client fee (gross)', cp.fee, 'text-zinc-200', false], [`VAT ${(vatRate * 100).toFixed(0)}%`, -cd.vat, 'text-zinc-400', false], ['Net revenue', cd.net, 'text-zinc-100 font-700', true], ['Spent to date', -cd.spent, 'text-zinc-400', false], ['Committed', -cd.committed, 'text-zinc-400', false], ['Est. to complete', -(cd.projFinal - cd.spent - cd.committed), 'text-zinc-400', false], ].map(([l, v, c, rule], i) => (
{l} {v < 0 ? '−' : ''}{psK(Math.abs(v))}
))}
Projected profit = 0 ? 'text-mint' : 'text-[#FF6B8A]')}>{psK(cd.profit)}
Margin on net = 15 ? 'text-mint' : 'text-amber')}>{cd.margin.toFixed(1)}%
Safe to spend today
= 0 ? 'text-head' : 'text-[#FF6B8A]')}>{ps$(cd.safeToSpend)}
After protecting {(protectPct * 100).toFixed(0)}% margin · burn {ps$(burn)}/day

Confidential — owner & designated finance only. These figures are not shared with crew, clients or invited collaborators.

); } /* ============================================================ ROOT — overlay + gate, mounted once in the App ============================================================ */ function ProductionStatusRoot() { const open = usePSOpen(); const [unlocked, setUnlocked] = useState(() => { try { return sessionStorage.getItem('silverlines.boss.session') === '1'; } catch (e) { return false; } }); useEffect(() => { const onKey = e => { if (e.key === 'Escape' && psOpen) window.closeProductionStatus(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); if (!open) return null; return (
{unlocked ? :
setUnlocked(true)} />
}
); } window.ProductionStatusRoot = ProductionStatusRoot; /* tiny styles (shake + fade) */ (function () { if (document.getElementById('ps-styles')) return; const s = document.createElement('style'); s.id = 'ps-styles'; s.textContent = '@keyframes psShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}.ps-shake{animation:psShake .42s cubic-bezier(.36,.07,.19,.97) both}@keyframes psFade{from{opacity:0;transform:scale(.99)}to{opacity:1;transform:none}}.ps-fade{animation:psFade .22s ease both}'; document.head.appendChild(s); })();