// Mella — Studio Dashboard (desktop-first), interactive workspace // Phase 1: functional nav + Requests inbox + Accept→board + cross-surface sync toasts. // Status palette (cohesion audit): teal = in progress, sienna = attention, // olive = done, ochre = money. Money: sans display, mono ledger. Built on mella-kit.jsx. const { useState, useEffect } = React; const { hexToRgba, ACCENTS, MONO, PALS, ART, resolveTheme, Painting, Field, inp, ta } = window; const ATTN = '#B05536'; // sienna — attention const DONE = '#5C6536'; // olive — done const MONEYC = '#9A6B2E'; // ochre — money const P_BODHI = ['#D9D4C6', '#9AA083', '#5C6347', '#2c3020']; const P_MOCHI = ['#E6D6BE', '#C3A37E', '#7C6046', '#3a2d1e']; // Generated commission imagery (Gemini). `photo` = the client's reference snapshot // of the live pet (shown small in the dashboard). WIP stage shots stay gradient // placeholders here; the real progression lives in the client portal. Final = the // real oil (co.art). Each carries a focal point + a fallback palette while it loads. const MAPLE_PHOTO = { src:'art/stbernard-head-photo.jpg', pos:'center 28%', pal:PALS.maple }; const JUNIPER_PHOTO = { src:'art/affenpinscher-photo.jpg', pos:'center 32%', pal:PALS.juniper }; const OTTO_PHOTO = { src:'art/terrier-up-photo.jpg', pos:'center 26%', pal:PALS.otto }; const DAISY_PHOTO = { src:'art/stbernard-pup-photo.jpg', pos:'center 35%', pal:PALS.daisy }; const BODHI_PHOTO = { src:'art/leonberger-head-photo.jpg',pos:'center 30%', pal:P_BODHI }; // Mochi — a two-pup request: one shot of both pups + a matching solo of each // (the solos generated img2img from crops of the together shot, so it's the same two dogs). const MOCHI_TOGETHER = { src:'art/mochi-together.jpg', pos:'center 62%', pal:P_MOCHI, ratio:0.806 }; const MOCHI_A = { src:'art/mochi-a.jpg', pos:'center 42%', pal:P_MOCHI, ratio:0.806 }; const MOCHI_B = { src:'art/mochi-b.jpg', pos:'center 42%', pal:P_MOCHI, ratio:0.806 }; /* commissions + requests ----------------------------------------------- */ const C = { maple: { id:'maple', name:'Maple', client:'Sarah M.', spec:'memorial, Saint Bernard, 11×14', pal:PALS.maple, art:ART.stbHead, total:260, dep:'paid', bal:'due on approval', due:'Jul 18', token:'xK9mP2', photo:MAPLE_PHOTO, brief:{ subject:'Saint Bernard', email:'sarah.m@gmail.com', refs:[MAPLE_PHOTO], note:"Maple was our girl for 13 years, we lost her this spring. This is the last portrait we have of her. I'd love to capture that softness in her eyes." } }, juniper: { id:'juniper',name:'Juniper', client:'Dana R.', spec:'scruffy terrier, 9×12', pal:PALS.juniper, art:ART.affen, total:340, dep:'paid', bal:'due on approval', due:'Jul 24', token:'pQ7nL4', photo:JUNIPER_PHOTO, brief:{ subject:'Terrier mix', email:'dana.r@gmail.com', refs:[JUNIPER_PHOTO], note:"Juniper is the most photogenic dog alive and has the most soulful eyes. Would love her on a 9×12 for the living room." } }, otto: { id:'otto', name:'Otto', client:'Marcus T.', spec:'Maltese, 8×10', pal:PALS.otto, art:ART.terrierUp, total:190, dep:'paid', bal:'due on approval', due:'Jul 12', token:'rT2bW8', sentFinal:true, photo:OTTO_PHOTO, brief:{ subject:'Maltese', email:'marcus.t@gmail.com', refs:[OTTO_PHOTO], note:"Otto turns 5 this month. I want to surprise my partner with a little portrait of our fluffy white boy. He loves to sit up and beg just like this." } }, daisy: { id:'daisy', name:'Daisy', client:'Priya S.', spec:'Saint Bernard pup, 11×14', pal:PALS.daisy, art:ART.stbPup, total:300, dep:'paid', bal:'paid', due:'shipped Jul 9', token:'kM5xZ1', photo:DAISY_PHOTO, brief:{ subject:'Saint Bernard', email:'priya.s@gmail.com', refs:[DAISY_PHOTO], note:"Daisy is our Saint Bernard pup, such a sweet face. An 11×14 would be perfect above the stairs." } }, // incoming requests (also become board cards on accept) bodhi: { id:'bodhi', name:'Bodhi', client:'Tom H.', spec:'Leonberger, 11×14', pal:P_BODHI, art:ART.leonberger,total:320, dep:'paid', bal:'paid', due:'shipped Jul 2', token:'wQ1aa2', photo:BODHI_PHOTO, req:{ when:'Jun 16', subject:'Leonberger', size:'11×14', options:['Memorial','Single pet'], timeline:'No deadline', email:'tomh@gmail.com', refs:[BODHI_PHOTO], note:"Bodhi was my hiking buddy for twelve years. I had you paint him from this photo up on the ridge. Thank you for capturing him." } }, mochi: { id:'mochi', name:'Mochi & Yuzu', client:'Aly P.', spec:'two pets, 12×16', pal:P_MOCHI, art:ART.litterDoor,total:380, dep:'unbilled', bal:'on approval', due:'Aug 11', token:'eR4bb5', req:{ when:'yesterday', subject:'Two pups', size:'12×16', options:['Two pets'], timeline:'No rush', email:'aly.p@gmail.com', refs:[MOCHI_TOGETHER, MOCHI_A, MOCHI_B], note:"Could you do both of my pups on one canvas? They're very different colors. Not in a rush at all." } }, }; const COLUMNS = [ { key:'open', label:'Open', tint:(c)=>c.faint }, { key:'wip', label:'In progress', tint:(c)=>c.a }, { key:'await', label:'Awaiting client', tint:()=>ATTN }, { key:'done', label:'Done', tint:()=>DONE }, ]; const INITIAL = { open:[], wip:['juniper'], await:['maple','otto'], done:['daisy','bodhi'] }; // invoices — one row per deposit / balance event const INVOICES = [ { key:'i1', co:'otto', kind:'Balance', amt:95, state:'overdue', when:'invoice sent 6 days ago' }, { key:'i2', co:'maple', kind:'Balance', amt:130, state:'pending', when:'final in review with client' }, { key:'i3', co:'bodhi', kind:'Balance', amt:160, state:'paid', when:'paid Jul 2' }, { key:'i4', co:'daisy', kind:'Balance', amt:150, state:'paid', when:'paid Jul 1' }, { key:'i5', co:'otto', kind:'Deposit', amt:95, state:'paid', when:'paid Jun 28' }, { key:'i6', co:'juniper', kind:'Deposit', amt:170, state:'paid', when:'paid Jun 26' }, { key:'i7', co:'maple', kind:'Deposit', amt:130, state:'paid', when:'paid Jun 24' }, { key:'i8', co:'bodhi', kind:'Deposit', amt:160, state:'paid', when:'paid Jun 20' }, { key:'i9', co:'daisy', kind:'Deposit', amt:150, state:'paid', when:'paid Jun 18' }, ]; // Commission thumbnail rule: prefer the client's reference PHOTO of the live pet // whenever we have one — that's the cover we want on the board. With no photo, a // DONE piece shows the real finished oil; otherwise fall back to the gradient. // Standardized placeholder gradient: every filler with no real image renders // this one sage/green (Bodhi's palette), so empty thumbnails look consistent. const FILLER = P_BODHI; const pieceImg = (co, done) => { if (co.photo) return { pal: co.photo.pal, src: co.photo.src, pos: co.photo.pos }; if (done && co.art) return { pal: co.art.pal, src: co.art.src, pos: co.art.pos }; return { pal: FILLER }; }; // Normalize a reference/stage entry (palette array OR {src,pos,pal}) for . // Real images (with src) pass through; any palette-only filler standardizes to FILLER. const refProps = (r) => (r && r.src) ? { pal: r.pal, src: r.src, pos: r.pos } : { pal: FILLER }; /* ============================================================== dashboard */ function Dashboard({ t }) { const c = resolveTheme(t); const { tier } = window.useViewport(); const compact = tier === 'tablet'; // iPad portrait (834): stacked layout const isNew = t.accountState === 'new'; const [view, setView] = useState('queue'); const [cols, setCols] = useState(INITIAL); const [requests, setRequests] = useState(['mochi']); const [setupDone, setSetupDone] = useState({}); const [drag, setDrag] = useState(null); const [over, setOver] = useState(null); const [detail, setDetail] = useState(null); const [posting, setPosting] = useState(null); const [adding, setAdding] = useState(false); const [confirm, setConfirm] = useState(null); const [toast, setToast] = useState(null); const askConfirm = (opts) => setConfirm(opts); useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') { setDetail(null); setAdding(false); setConfirm(null); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); useEffect(() => { setCols(isNew ? { open:[], wip:[], await:[], done:[] } : INITIAL); setRequests(isNew ? [] : ['mochi']); setView('queue'); }, [t.accountState]); const flash = (msg) => { setToast(msg); clearTimeout(window.__mt); window.__mt = setTimeout(() => setToast(null), 3000); }; const openCount = Math.max(0, 5 - (cols.wip.length + cols.await.length)); const inflight = cols.wip.concat(cols.await).reduce((s, id) => s + C[id].total, 0); const owedDue = INVOICES.filter(i => i.state==='overdue' || i.state==='pending'); const owedSum = owedDue.reduce((s,i) => s + i.amt, 0); const dropCard = (to) => { if (!drag) { setOver(null); return; } if (to === 'open') { setDrag(null); setOver(null); return; } // Open holds empty slots, not commissions const id = drag; setCols(prev => { const n = {}; Object.keys(prev).forEach(k => n[k] = prev[k].filter(x => x !== id)); n[to] = [...n[to], id]; return n; }); if (to === 'done') { const willOpen = Math.max(0, 5 - (cols.wip.filter(x => x !== id).length + cols.await.filter(x => x !== id).length)); flash(`${C[id].name} marked done. Your public page now shows ${willOpen} of 5 open.`); } setDrag(null); setOver(null); }; const performAccept = (id) => { C[id].dep = 'sent'; // deposit invoice goes out the moment you accept setRequests(r => r.filter(x => x !== id)); setCols(prev => ({ ...prev, wip: [...prev.wip, id] })); const willOpen = Math.max(0, 5 - (cols.wip.length + 1 + cols.await.length)); flash(`Accepted ${C[id].name}. Deposit invoice sent to ${C[id].client}. Public page now shows ${willOpen} of 5 open.`); setView('queue'); }; const accept = (id) => askConfirm({ title:'Accept this request?', body:`This reserves a slot and emails ${C[id].client} a deposit invoice for $${C[id].total/2}.`, label:'Accept and send', onYes:() => performAccept(id) }); const performDecline = (id) => { setRequests(r => r.filter(x => x !== id)); flash(`Declined ${C[id].name}. ${C[id].client} gets a kind note.`); }; const decline = (id) => askConfirm({ title:'Decline this request?', body:`${C[id].client} will get a kind, automatic note. This can't be undone.`, label:'Decline', danger:true, onYes:() => performDecline(id) }); const uploadWip = (co) => { setPosting(co.id); }; const postUpdate = (co, data) => { setPosting(null); flash(`${data.stage} posted to ${co.name}. ${co.client} just got a gentle heads-up to take a look.`); }; const remind = (inv) => flash(`Friendly reminder sent to ${C[inv.co].client} for the $${inv.amt} balance.`); const addCommission = (data) => { const id = 'c' + Date.now(); C[id] = { id, name:data.name, client:data.client, spec:data.spec, pal:PALS.juniper, total:Number(data.price)||0, dep:data.depPaid?'paid':'sent', bal:'on approval', due:'in progress', token:Math.random().toString(36).slice(2,8), brief:{ subject:data.spec, email:'', refs:[PALS.juniper], note:'Added by you while migrating your queue into Mella.' } }; setCols(prev => ({ ...prev, [data.stage]: [...prev[data.stage], id] })); setAdding(false); flash(`${data.name} added to your board.`); }; const NAV = [['queue','Queue',0],['requests','Requests',requests.length],['payments','Payments',0],['settings','Settings',0]]; return (
{/* ---- top bar ---- */}
mella.
Iris's Studio
mella.studio/iris ↗
{/* ---- body ---- */}
{view === 'settings' ? : isNew ? : ( {compact && view === 'queue' ? ( ) : (
{view === 'queue' && (
{COLUMNS.map(col => { const ids = cols[col.key]; const tint = col.tint(c); return (
{ if (col.key !== 'open') { e.preventDefault(); setOver(col.key); } }} onDragLeave={() => setOver(o => o === col.key ? null : o)} onDrop={() => dropCard(col.key)} style={{ flex:1, minWidth:0, display:'flex', flexDirection:'column', background: over===col.key ? c.aSoft : 'transparent', borderRadius:12, transition:'background .15s', padding:4 }}>
{col.label} {col.key==='open' ? openCount : ids.length}
{col.key==='open' ? Array.from({length: openCount}).map((_,i) => setAdding(true)} />) : ids.map(id => setDrag(id)} onDragEnd={() => { setDrag(null); setOver(null); }} onClick={() => setDetail(id)} />)} {col.key!=='open' && ids.length===0 &&
—
}
); })}
)} {view === 'requests' && } {view === 'payments' && }
{/* right rail */}
mella.studio/iris
Open flash('Link copied to clipboard.')}>Copy link setView('settings')}>Edit page
Slots showing{openCount} of 5 open
✓ Connected} /> ${inflight.toLocaleString()}.00} /> ${owedSum}.00} />
You keep your own payouts. Mella never holds your money.
 {[['Maple','final in review with Sarah', ATTN],['Otto','balance reminder sent', MONEYC],[`${requests.length} new request${requests.length===1?'':'s'}`,'from your public page', c.a]].map((r,i) => (
{r[0]}, {r[1]}
))}
)} )}
{detail && cols[k].includes(detail))} onClose={() => setDetail(null)} onUpload={uploadWip} />} {posting && setPosting(null)} onPost={(data) => postUpdate(C[posting], data)} />} {adding && setAdding(false)} onAdd={addCommission} />} {confirm && setConfirm(null)} />} {toast && }
); } /* ---- compact (iPad portrait) queue: stacked sections, 2-up cards, tap to open ---- */ function CompactQueue({ c, cols, openCount, inflight, owedSum, requests, setDetail, setAdding, setView, flash }) { const sec = { marginBottom: 24 }; const secHead = { display:'flex', alignItems:'center', gap:9, padding:'0 2px 11px' }; return (
{/* stat strip */}
{/* board as stacked sections */} {COLUMNS.map(col => { const ids = cols[col.key]; const tint = col.tint(c); const count = col.key==='open' ? openCount : ids.length; return (
{col.label} {count}
{col.key==='open' ? Array.from({length: openCount}).map((_,i) => setAdding(true)} />) : ids.map(id => setDetail(id)} />)} {col.key!=='open' && ids.length===0 &&
Nothing here yet
}
); })} {/* rail info, folded into sections below */}
mella.studio/iris
Open flash('Link copied to clipboard.')}>Copy link setView('settings')}>Edit page
Slots showing{openCount} of 5 open
✓ Connected} /> ${inflight.toLocaleString()}.00} /> ${owedSum}.00} />
); } /* ---- toast ---- */ function Toast({ c, msg }) { return (
{msg}
); } /* ---- new artist: onboarding + empty states ---- */ function NewArtistView({ view, c, flash, setView, setupDone, setSetupDone }) { if (view === 'queue') return ; const empty = { requests: ['No requests yet', 'When someone fills out your public page, their request lands here. Share your link to get the first one.'], payments: ['No payments yet', 'Once you accept a commission and take a deposit, your money shows up here.'], }[view] || ['Nothing here yet', '']; return (
◌
{empty[0]}
{empty[1]}
); } function Onboarding({ c, flash, setView, setupDone, setSetupDone }) { const mark = (k) => setSetupDone(p => ({ ...p, [k]: true })); const STEPS = [ { k:'stripe', title:'Connect Stripe', sub:'So you can take deposits and balances. About 2 minutes.', cta:'Connect', run:() => { mark('stripe'); /* STRIPE: launch Stripe Connect onboarding (OAuth/Account Link); on return, store the connected account id. See STRIPE-HANDOFF.md → "Connect". */ flash('Stripe connected. You can take payments now.'); } }, { k:'page', title:'Build your public page', sub:'Your art and portfolio, your prices, your colors, and your link.', cta:'Set up', run:() => { mark('page'); setView('settings'); } }, { k:'share', title:'Share your link', sub:'Put mella.studio/iris in your bio and start taking work.', cta:'Copy link', run:() => { mark('share'); flash('Link copied. Paste it in your Instagram or Bluesky bio.'); } }, ]; const doneCount = STEPS.filter(s => setupDone[s.k]).length; const allDone = doneCount === STEPS.length; return (
Welcome to Mella

Let's get your studio ready, Iris.

Three quick steps and your public page is live. You can change any of it later in Settings.

{/* progress */}
{doneCount} of {STEPS.length}
{allDone && (
✓
You're all set.
Your page is live. Your first request will land in this dashboard.
)} {/* steps */}
{STEPS.map((s, i) => { const done = !!setupDone[s.k]; return (
{done ? '✓' : i+1}
{s.title}
{s.sub}
); })}
Need a hand? Read the quick start guide
); } /* ---- requests inbox ---- */ function Fact({ c, label, value }) { return (
{label}
{value}
); } function Chip({ c, children, accent }) { return {children}; } function RequestsInbox({ c, ids, onAccept, onDecline }) { const [open, setOpen] = useState(null); // request id being reviewed const [viewer, setViewer] = useState(null); return (
Requests
New commission requests from your public page. Open one to read the full brief, then accept or decline.
{ids.length === 0 ? (
All caught up.
New requests from mella.studio/iris will land here.
) : (
{ids.map(id => { const co = C[id]; const nRefs = co.req.refs.length; return (
setOpen(id)} style={{ background:c.surface, border:`1px solid ${c.rule}`, borderRadius:12, padding:13, display:'flex', gap:15, alignItems:'center', cursor:'pointer', transition:'border-color .15s' }} onMouseEnter={e=>e.currentTarget.style.borderColor=hexToRgba(c.a,0.5)} onMouseLeave={e=>e.currentTarget.style.borderColor=c.rule}>
{nRefs > 1 &&
{nRefs}
}
{co.name} {co.client} {co.req.when}
{co.req.subject}, {co.req.size}, {co.req.options[0]}

{co.req.note}

${co.total}
est. quote
Review →
); })}
)} {open && setViewer(open)} onAccept={() => { onAccept(open); setOpen(null); }} onDecline={() => { onDecline(open); setOpen(null); }} onClose={() => setOpen(null)} />} {viewer && setViewer(null)} />}
); } /* ---- request review modal (full brief + decision) ---- */ function RequestModal({ c, co, onViewPhotos, onAccept, onDecline, onClose }) { const refs = co.req.refs; return (
e.stopPropagation()} style={{ width:480, maxHeight:'90%', overflowY:'auto', background:c.bg, borderRadius:16, boxShadow:'0 40px 90px -30px rgba(0,0,0,0.6)' }}> {/* header */}
New request, {co.req.when}
×
{/* who + what */}
{co.name}
from {co.client}
{/* reference photos */}
{refs.map((r,idx) => (
))}
View {refs.length} reference photos →
{/* facts */}
{/* full note */}
In their words

{co.req.note}

{co.req.email}
{/* quote + decision */}
Est. quote
${co.total}
${co.total/2} deposit to start
); } /* ---- reference photo viewer ---- */ function PhotoViewer({ c, co, onClose }) { const [i, setI] = useState(0); const refs = co.req.refs; return (
e.stopPropagation()} style={{ width:440, background:c.bg, borderRadius:16, overflow:'hidden', boxShadow:'0 40px 90px -30px rgba(0,0,0,0.6)' }}>
{co.name} {co.client}'s references
×
{refs.map((r, idx) => (
setI(idx)} style={{ cursor:'pointer', borderRadius:7, padding:2, border:`2px solid ${idx===i ? c.a : 'transparent'}` }}>
))}
{i+1} of {refs.length}
); } /* ---- payments ---- */ function PaymentsView({ c, onRemind }) { const owed = INVOICES.filter(i => i.state==='overdue' || i.state==='pending').reduce((s,i)=>s+i.amt,0); const inflight = ['maple','juniper','otto'].reduce((s,id)=>s+C[id].total/2,0); const awaiting = INVOICES.filter(i => i.state==='overdue' || i.state==='pending'); const paid = INVOICES.filter(i => i.state==='paid'); const SummaryCard = ({ label, value, tint, sub }) => (
{tint && }{label}
{value}
{sub}
); return (
Payments
What you are owed, what is overdue, and what you have earned. Paid out to your bank directly, Mella never holds your money.
{/* awaiting balance */} Awaiting balance
{awaiting.map((inv, i) => )}
{/* paid */} Recently paid
{paid.map((inv, i) => )}
{/* stripe strip */}
Stripe connected ✓
Payouts to your bank ending 4291, usually within 2 days.
Manage
); } function SectionLabel({ c, children }) { return
{children}
; } function InvoiceRow({ c, inv, first, onRemind }) { const co = C[inv.co]; const palette = { paid:DONE, overdue:ATTN, pending:MONEYC }[inv.state]; const label = { paid:'Paid', overdue:'Overdue', pending:'Pending approval' }[inv.state]; return (
{co.name} for {co.client}
{inv.kind} payment, {inv.when}
{label}
${inv.amt}
{inv.state==='overdue' && } {inv.state==='pending' && waiting on client}
); } /* ---- settings shell: sub-nav + panels ---- */ function SettingsShell({ c, flash, askConfirm }) { const [tab, setTab] = useState('public'); const TABS = [['public','Public page'],['commission','Commission setup'],['payments','Payment settings'],['account','Account'],['plan','Plan & billing']]; return (
Settings
{TABS.map(([k,label]) => { const on = tab===k; return
setTab(k)} style={{ fontSize:13, padding:'9px 10px', borderRadius:8, marginBottom:2, cursor:'pointer', color:on?c.text:c.muted, background:on?c.surface:'transparent', fontWeight:on?600:500, border:`1px solid ${on?c.rule:'transparent'}` }}>{label}
; })}
{tab==='public' && } {tab==='commission' && } {tab==='payments' && } {tab==='account' && } {tab==='plan' && }
); } function SettingsStub({ c, title, body }) { return (
{title}
{body}
◌
We build this panel in a later pass.
); } /* ---- settings: customize public page (the wedge) ---- */ function PublicPagePanel({ c, flash }) { const [s, setS] = useState({ name:'Iris Sandoval', specialty:'Oil portraits', tagline:'Hand-painted portraits of your pet, in oil on canvas, from your favorite photo.', location:'Portland, OR', handle:'iris', price:'260', statusNote:'', commissionsNote:"Every piece is quoted by hand. Size, number of pets, and detail all matter. Tell me what you have in mind and I'll send a price.", accent:'teal', tone:'warm', type:'editorial', showNames:false, showTiers:false, visibility:'public', }); const set = (k, v) => setS(p => ({ ...p, [k]: v })); const [portfolio, setPortfolio] = useState([ART.stbHead, ART.stbPup, ART.terrierUp, ART.leonberger]); const ART_LIST = Object.values(ART); const addWork = () => setPortfolio(p => [...p, ART_LIST[p.length % ART_LIST.length]]); const pc = resolveTheme(s); // preview theme, independent of dashboard chrome const { tier } = window.useViewport(); const showPreview = tier === 'desktop'; // inline preview only where it fits; else "Open live page" const grp = { marginBottom:22 }; const lab = { fontFamily:MONO, fontSize:9.5, letterSpacing:'0.12em', textTransform:'uppercase', color:c.faint, marginBottom:10 }; const field = (k, label, placeholder) => ( ); const Seg = ({ k, opts }) => (
{opts.map(([val,txt]) => { const on = s[k]===val; return ; })}
); const Toggle = ({ k }) => (
set(k,!s[k])} style={{ width:40, height:24, borderRadius:99, background: s[k]?c.a:c.rule, position:'relative', cursor:'pointer', flexShrink:0, transition:'background .15s' }}>
); const ToggleRow = ({ k, title, sub }) => (
{title}
{sub}
); return (
{/* controls */}
Your public page
{!showPreview && Open live page ↗}
This is the page clients see at your link. Make it feel like yours.
Visibility
{s.visibility==='public' ? 'Anyone with your link can request a slot.' : 'Hidden from search. Only people you share the link with can see it, good for a private waitlist.'}
mella.studio/ set('handle', e.target.value.replace(/[^a-z0-9]/gi,'').toLowerCase())} style={{ flex:1, fontFamily:MONO, fontSize:12, color:c.text, background:'transparent', border:'none', outline:'none', padding:0 }} />
Artwork
Profile photo
A small portrait of you
Change
Banner
A piece of your work, shown wide up top
Change
Recent work
Your portfolio gallery. Add past pieces so new clients can see your work.
{portfolio.map((p,i) => (
setPortfolio(arr => arr.filter((_,idx)=>idx!==i))} title="Remove" style={{ position:'absolute', top:3, right:3, width:16, height:16, borderRadius:'50%', background:hexToRgba('#000',0.5), color:'#fff', fontSize:10, lineHeight:'16px', textAlign:'center', cursor:'pointer' }}>×
))}
+
Identity
{field('name','Display name','Your name')}
The name clients see. It can differ from your account name.
{field('specialty','What you make','Oil portraits')} {field('tagline','Tagline','One warm line about your work')} {field('location','Location','City, State')}
Brand color
{Object.entries(ACCENTS).map(([key,hex]) => (
set('accent',key)} style={{ width:30, height:30, borderRadius:'50%', background:hex, cursor:'pointer', boxShadow: s.accent===key ? `0 0 0 2px ${c.bg}, 0 0 0 4px ${hex}` : `inset 0 0 0 1px ${hexToRgba('#000',0.08)}` }} /> ))}
Background
Typeface
Commissions
The "Starting at $X" price comes from your lowest tier in Commission setup. Write the line that sits beneath it in your own words.