/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE, CP_ACCENTS */ // Copilot feature page — Quick starts · Generative UI · Conversational editing · Publishing · Checkpoints. const { useState: czS } = React; const CPBadge = ({ label, ac = '#813CED', bg = CREAM }) =>
{label}
; const CPCard = ({ children, pad = 18 }) =>
{children}
; const CPSectionShell = ({ label, ac, h1, h2, sub, note, panel, flip = false, lean = 'right', bg = '#fff' }) => (

{h1}
{h2}

{sub}

 Join for free {note &&
{note}
}
{panel}
); // ---------- § 01 Quick starts ---------- const CP_STARTS = [ ['Create a photo for social', false], ['Create a photo for OnlyFans', false], ['Create a photoshoot for social', false], ['Create a photoshoot for OnlyFans', false], ['Create a video for social', false], ['Find reels to clone', true]]; const QuickstartsPanel = () => { const [sel, setSel] = czS(-1); return (
✦
What should we make?
Pick a starting point, or just type. Every thread binds to a Character.
{CP_STARTS.map(([s, plan], i) => setSel(i)} style={{ display: 'flex', alignItems: 'center', gap: 8, borderRadius: 12, padding: '11px 13px', fontSize: 11.5, fontWeight: sel === i ? 700 : 600, cursor: 'pointer', transition: 'all 0.18s', background: sel === i ? 'var(--brand-purple-50)' : 'rgb(250,247,247)', boxShadow: sel === i ? 'inset 0 0 0 1.5px var(--brand-purple-400)' : 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: INK }}> {s} {plan && PLAN MODE} )}
Scarlett
{sel >= 0 ? CP_STARTS[sel][0] : 'Or just type…'}
); }; // ---------- § 02 Generative UI ---------- const GenUIPanel = () => { const [opt, setOpt] = czS(0); const opts = [GENS[7], GENS[1], GENS[3]]; return (
Copilot suggests · Poolside, golden hour
{opts.map((g, i) => )}
{[-1, 1].map((d, j) => setOpt(o => (o + d + 3) % 3)} style={{ order: j ? 3 : 1, width: 26, height: 26, borderRadius: '50%', background: 'rgba(252,248,248,0.9)', display: 'grid', placeItems: 'center', cursor: 'pointer', boxShadow: '0 4px 12px rgba(28,27,27,0.25)' }}> )} Option {opt + 1} / 3
The full Create controls, inline
{[['Character', 'Scarlett'], ['Photo Control', 'Setting · Outfit · Shot'], ['Aspect', '4:5'], ['Resolution', '1K'], ['Quantity', '3 photos']].map(([k, v]) =>
{k} {v}
)} GENERATE ✦
); }; // ---------- § 03 Conversational editing ---------- const CP_TOOLS = ['Reimagine', 'Inpaint', 'Background', 'Expression', 'Crop', 'Filters']; const ChatEditPanel = () => { const [ref, on] = useReveal(0.35); const [done, setDone] = czS(false); React.useEffect(() => { if (!on) return; const t = setInterval(() => setDone(d => !d), 3600); return () => clearInterval(t); }, [on]); return (
make her top red
{done ? 'Edited — only the top changed' : 'Copilot targets the right image…'}
Or open the suite in-thread {CP_TOOLS.map(t => {t})}
); }; // ---------- § 04 Publishing ---------- const PublishPanel = () => (
Create Post · prefilled by Copilot @scarlett.day
{[['Instagram', '#E1306C', true], ['Twitter/X', '#5B6470', false], ['TikTok', '#1C1B1B', false], ['Fanvue', '#1FB85A', true], ['Reddit', '#FF4500', false]].map(([n, c, on]) => {n})}
Vault
poolside, golden light, zero meetings. new set live now ↗
✦ Rewrite in my voice
Publishing at
Tonight, 9:00 PM
Edit first Approve & schedule
); // ---------- § 05 Checkpoints ---------- const CP_NODES = [ { t: 'The brief', d: '“Make tonight’s post — poolside, golden hour.”', time: '8:02 PM' }, { t: 'Generated 3 options', d: 'Same setting, three reads · you picked option 1.', time: '8:03 PM' }, { t: 'Edit · top → red', d: 'Conversational edit, only the top changed.', time: '8:05 PM' }, { t: 'Post scheduled', d: 'Instagram + Fanvue · tonight, 9:00 PM.', time: '8:06 PM' }]; const CheckpointsPanel = () => { const [at, setAt] = czS(3); return (
Thread timeline Tap a step to roll back
{CP_NODES.map((n, i) => { const live = i <= at; return (
setAt(i)} style={{ display: 'flex', gap: 12, cursor: 'pointer' }}>
{i < CP_NODES.length - 1 && }
{n.t} {n.time} {i === at && Resume from here}
{n.d}
); })}
); }; const QuickstartsSection = () => } />; const GenUISection = () => } />; const ChatEditSection = () => } />; const PublishingSection = () => } />; const CheckpointsSection = () => } />; // ---------- § 06 — Everything it drives ---------- const CPP_PANEL = { borderRadius: '12px 12px 0 0', background: '#fff', boxShadow: '0 10px 24px rgba(28,27,27,0.10), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 10, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }; const CP_NEXT = [ { t: 'Create Image', d: 'The composer Copilot drives — type a scene, get the set.', kind: 'image', href: '/create-image' }, { t: 'Editing Suite', d: 'The tools it opens in-thread — inpaint to 4K upscale.', kind: 'edit', href: '/editing-suite' }, { t: 'Post & Analyze', d: 'Where approved posts land — queued, shipped, measured.', kind: 'sched', href: '/post-analyze' }]; const CPP_ROWS = [ { src: GENS[7].src, p: 'Instagram', time: '9:00 PM', st: 'Queued' }, { src: GENS[1].src, p: 'Fanvue', time: '9:00 PM', st: 'Queued' }, { src: GENS[3].src, p: 'TikTok', time: 'Yesterday', st: 'Posted' }]; const CPPipeMedia = ({ kind }) => (
{kind === 'image' &&
{['assets/create/out-mirror.webp', 'assets/create/out-garden.webp', 'assets/create/out-gym.webp'].map((src, i) =>
)}
poolside, golden hour GENERATE ✦
} {kind === 'edit' &&
Before After
make the top red APPLY ✦
} {kind === 'sched' &&
Tonight Approved in-thread
{CPP_ROWS.map((r) =>
{r.p} {r.time} {r.st}
)}
}
); const CPPipelineSection = () => (

One thread drives
the whole studio.

Everything Copilot does runs on the same tools you can drive yourself.

See the full tour →
{CP_NEXT.map((c, i) =>
{c.t}
{c.d}
 )}
); Object.assign(window, { QuickstartsSection, GenUISection, ChatEditSection, PublishingSection, CheckpointsSection, CPPipelineSection });