/* ===== mod_develop ===== */ /* ============================================================ MODULE 1 — Development & Briefing Concept Brief Builder + Moodboard Canvas ============================================================ */ function BriefField({ label, icon, children, auto }) { return (
{auto && }
{children}
); } function ObjectiveRow({ text, done, onToggle, onEdit, onDelete }) { return (
); } /* ---- the full commercial brief — everything the client throws at you ---- */ const BRIEF_DEFAULTS = { vision: 'A cinematic 60-second flagship spot positioning Aether Aviation as the pinnacle of private flight — crimson dawn light, brushed-steel surfaces, and one fearless pilot. Restraint over spectacle; every frame should feel like a held breath.', message: 'Flight, distilled. One pilot, one dawn — the quietest way to cross the sky.', audience: 'Charter decision-makers 35–60 and the planners who book for them. They skip ads — the spot has to feel like cinema, not media.', tone: ['Cinematic', 'Restrained', 'Tactile', 'Premium'], budget: 85000, currency: '$', days: 4, budgetFull: true, objectives: [ { text: 'Establish "Crimson Skies" as a premium brand world', done: true }, { text: 'Deliver hero :60, :30 cutdown, and 6× social verticals', done: true }, { text: 'Capture real practical flare — minimal VFX augmentation', done: false }, { text: 'Lock principal photography to a 4-day window', done: false }, ], deliverables: [ { name: 'Hero film', dur: ':60', ratio: '16:9', ch: 'TV · Cinema', status: 'approved' }, { name: 'Cutdown', dur: ':30', ratio: '16:9', ch: 'TV · Pre-roll', status: 'client' }, { name: 'Social verticals', dur: ':15 × 6', ratio: '9:16', ch: 'IG · TikTok', status: 'draft' }, { name: 'Stills package', dur: '12 frames', ratio: '4:5 · 1:1', ch: 'OOH · Print', status: 'draft' }, ], mandatories: [ { text: 'Aether logo lockup on end card — hold ≥ 2 seconds', done: true }, { text: 'Legal super: "Professional pilot. Closed runway."', done: true }, { text: 'Brand crimson in every key frame of the grade', done: false }, { text: 'No competitor aircraft or liveries in frame', done: false }, ], usage: { territory: 'North America + EU', term: '18 months', channels: ['TV', 'Cinema', 'Online', 'Social'] }, approvals: [ { name: 'Marco Reyes', role: 'Client Lead · Aether', color: '#FFB020', status: 'signed' }, { name: 'Dahlia Mercer', role: 'Director', color: '#F57F45', status: 'review' }, { name: 'Noor Haddad', role: 'Producer', color: '#22D48A', status: 'signed' }, ], }; if (window.PROJ_BLANK) Object.assign(BRIEF_DEFAULTS, { vision: '', message: '', audience: '', tone: [], budget: 0, currency: '$', days: 1, objectives: [], deliverables: [], mandatories: [], usage: { territory: '', term: '', channels: [] }, approvals: [], }); /* ---- deliverable status: click to advance ---- */ const DELIV_STATUS = { draft: { label: 'Drafting', tone: 'neutral', next: 'client' }, client: { label: 'With client', tone: 'amber', next: 'approved' }, approved: { label: 'Approved', tone: 'mint', next: 'draft' }, }; function DeliverableRow({ d, onCycle, onEdit, onDelete, mobile }) { const st = DELIV_STATUS[d.status] || DELIV_STATUS.draft; return (
onEdit({ name: v })} className="text-[13px] font-600 text-zinc-200" />
onEdit({ dur: v })} /> · onEdit({ ratio: v })} /> {!mobile && ·} {!mobile && onEdit({ ch: v })} />}
); } /* ---- sign-off chain ---- */ const SIGN_STATUS = { pending: { label: 'Pending', tone: 'neutral', next: 'review' }, review: { label: 'In review', tone: 'amber', next: 'signed' }, signed: { label: 'Signed off', tone: 'mint', next: 'pending' }, }; function ApprovalRow({ a, onCycle }) { const st = SIGN_STATUS[a.status] || SIGN_STATUS.pending; return (
{a.name}
{a.role}
); } /* ---- removable keyword chips + adder ---- */ function KeywordChips({ items, onChange, placeholder = 'Add…' }) { const [v, setV] = useState(''); const add = () => { const t = v.trim(); if (!t || items.includes(t)) { setV(''); return; } onChange([...items, t]); setV(''); }; return (
{items.map(t => ( {t} ))} setV(e.target.value)} onKeyDown={e => e.key === 'Enter' && add()} onBlur={add} placeholder={placeholder} className="w-[70px] bg-transparent text-[11.5px] text-zinc-200 outline-none placeholder:text-zinc-600" />
); } const USAGE_CHANNELS = ['TV', 'Cinema', 'Online', 'Social', 'OOH']; function DevelopModule({ mobile }) { const [brief, setBriefState] = useState(() => { try { const raw = window.SLStore.get('silverlines.brief.v1', {}); /* migrate legacy budgets stored in thousands (K) to full amounts, once */ if (raw && !raw.budgetFull && typeof raw.budget === 'number' && raw.budget > 0 && raw.budget <= 2000) raw.budget *= 1000; return { ...BRIEF_DEFAULTS, ...raw }; } catch (e) { return { ...BRIEF_DEFAULTS }; } }); const setBrief = p => setBriefState(o => { const n = { ...o, ...p }; window.SLStore.set('silverlines.brief.v1', n); return n; }); const { vision, message, audience, tone, budget, currency, days, objectives, deliverables, mandatories, usage, approvals } = brief; const [newObj, setNewObj] = useState(''); const [newMand, setNewMand] = useState(''); const toggleObj = i => setBrief({ objectives: objectives.map((x, k) => k === i ? { ...x, done: !x.done } : x) }); const editObj = (i, text) => setBrief({ objectives: objectives.map((x, k) => k === i ? { ...x, text } : x) }); const delObj = i => setBrief({ objectives: objectives.filter((_, k) => k !== i) }); const addObj = () => { const t = newObj.trim(); if (!t) return; setBrief({ objectives: [...objectives, { text: t, done: false }] }); setNewObj(''); }; const fmtD = d => d.toLocaleDateString(slLocale(), { month: 'short', day: 'numeric' }); const dateRange = window.PROJ_BLANK ? 'Dates TBD' : `${fmtD(new Date(2026, 5, 22))} → ${fmtD(new Date(2026, 5, 22 + Math.max(0, days - 1)))}, 2026`; /* deliverables / mandatories / usage / sign-off handlers */ const patchDeliv = (i, p) => setBrief({ deliverables: deliverables.map((x, k) => k === i ? { ...x, ...p } : x) }); const cycleDeliv = i => patchDeliv(i, { status: (DELIV_STATUS[deliverables[i].status] || DELIV_STATUS.draft).next }); const delDeliv = i => setBrief({ deliverables: deliverables.filter((_, k) => k !== i) }); const addDeliv = () => setBrief({ deliverables: [...deliverables, { name: 'New deliverable', dur: ':15', ratio: '16:9', ch: 'Online', status: 'draft' }] }); const toggleMand = i => setBrief({ mandatories: mandatories.map((x, k) => k === i ? { ...x, done: !x.done } : x) }); const editMand = (i, text) => setBrief({ mandatories: mandatories.map((x, k) => k === i ? { ...x, text } : x) }); const delMand = i => setBrief({ mandatories: mandatories.filter((_, k) => k !== i) }); const addMand = () => { const t = newMand.trim(); if (!t) return; setBrief({ mandatories: [...mandatories, { text: t, done: false }] }); setNewMand(''); }; const cycleSign = i => setBrief({ approvals: approvals.map((x, k) => k === i ? { ...x, status: (SIGN_STATUS[x.status] || SIGN_STATUS.pending).next } : x) }); const setUsage = p => setBrief({ usage: { ...usage, ...p } }); const toggleChannel = c => setUsage({ channels: usage.channels.includes(c) ? usage.channels.filter(x => x !== c) : [...usage.channels, c] }); const { subtabs, setSubtab } = useContext(AccessContext); const [sbLive] = useStoryboard(); const unschedCount = sbLive.filter(s => sceneDay(s) === 0).length; const tab = (subtabs && subtabs.develop) || 'brief'; const tabs = [ { id: 'brief', label: 'Concept Brief', icon: 'FileText' }, { id: 'mood', label: 'Moodboard', icon: 'Images' }, ]; const approvedDeliv = deliverables.filter(d => d.status === 'approved').length; return (
{tab !== 'mood' && ProFlow synced} />} {/* tab bar */}
{tabs.map(t => ( ))}
{tab === 'brief' && (
{/* ---- left: the brief itself ---- */}

Concept Brief Builder

{PROJECT.code}