Project views

A project opens as one calm dashboard: white and gray, with one color for what needs you. Click Customize to pick a different layout from a gallery of live previews, then change its colors, background and tiles. The bright colors are still under Colors. All data is illustrative.
---
title: Project views
template: sheet
---
A project opens as one calm dashboard: white and gray, with one color for what needs you. Click **Customize** to pick a different layout from a gallery of live previews, then change its colors, background and tiles. The bright colors are still under Colors. All data is illustrative.

## A Try it: pick a layout like you pick a look
```react h=860 css=src/design/theme.css title="Project page with a layout gallery"
import { useState, useRef, useEffect } from 'react';
import { SlidersHorizontal, Pin, Smartphone, Monitor, Send, Check, AlertTriangle, Sparkles, ChevronLeft, ChevronRight, FileText, FileImage, FileSpreadsheet, Globe, Plus, Loader2 } from 'lucide-react';

const INK='#15171c', MUTE='#5d6068', LINE='#e6e6e8', FILL='#f4f4f5';
const rgb=h=>[1,3,5].map(i=>parseInt(h.slice(i,i+2),16));
const lin=v=>{v/=255;return v<=.03928?v/12.92:((v+.055)/1.055)**2.4};
const lum=h=>{const [r,g,b]=rgb(h).map(lin);return .2126*r+.7152*g+.0722*b};
const on=c=>(1.05/(lum(c)+.05))>=4.5?'#fff':INK;
const alpha=(c,a)=>c+Math.round(a*255).toString(16).padStart(2,'0');
const lit=(c,m=.3)=>'#'+rgb(c).map(v=>Math.round(v+(255-v)*m).toString(16).padStart(2,'0')).join('');

const quiet=(k,n,b)=>({k,n,a:'#23252b',b,c:'#d3d6db',d:'#e1e3e6',e:'#eaebed',deep:'#191a1f'});
const PALETTES=[
  quiet('quiet','Quiet orange','#c8451f'),
  quiet('blue','Quiet blue','#2f54eb'),
  quiet('green','Quiet green','#0f7f57'),
  quiet('mono','Black and white','#3a3d45'),
  {k:'electric',n:'Bright',a:'#2f54eb',b:'#ff5a36',c:'#0fa876',d:'#ffc31f',e:'#d6338f',deep:'#0e1330'},
  {k:'sunset',n:'Sunset',a:'#e8402f',b:'#7b3ff2',c:'#ffa51f',d:'#e62e86',e:'#118f8f',deep:'#1f0f2e'},
];
const BACKGROUNDS=[
  {k:'clean',n:'Clean',css:()=>FILL},
  {k:'match',n:'Match colors',css:P=>`linear-gradient(135deg,${alpha(P.a,.28)},${alpha(P.e,.22)} 55%,${alpha(P.d,.28)})`},
  {k:'aurora',n:'Aurora',css:()=>'linear-gradient(135deg,#cfe0ff,#ecd4ff 50%,#ffd8e6)'},
  {k:'dusk',n:'Dusk',css:()=>'linear-gradient(160deg,#ff9d85,#f76da8 55%,#7f6cf5)',dark:true},
  {k:'dots',n:'Dots',css:()=>'radial-gradient(#c9cad0 1.2px,#fafafa 1.2px) 0 0/18px 18px'},
  {k:'night',n:'Night',css:()=>'#11131a',dark:true},
];
const TILES={decision:'Your decision',countdown:'Countdown',progress:'Progress',team:'Team',chart:'Bot activity',schedule:'Schedule',files:'Files',activity:'Latest changes'};
const ALL=Object.keys(TILES);

const BOTS=[
  {n:'Mira',r:'Research',s:'a',doing:'Comparing flour suppliers',st:'Working',load:3},
  {n:'Otto',r:'Operations',s:'b',doing:'Waiting on your budget',st:'Needs you',load:1},
  {n:'Pia',r:'Design',s:'c',doing:'Visitor guide, second draft',st:'Working',load:2},
  {n:'Sol',r:'Writing',s:'d',doing:'Idle since 9:40',st:'Idle',load:0},
];
const bc=(P,n)=>P[BOTS.find(b=>b.n===n).s];
const COLS={
  'Queued':[{t:'Book the sample table',b:'Otto'},{t:'Print 200 flyers',b:'Otto'}],
  'Working':[{t:'Compare flour suppliers',b:'Mira',p:60},{t:'Visitor guide draft 2',b:'Pia',p:80}],
  'Needs you':[{t:'Approve supplier budget',b:'Otto'}],
  'Done':[{t:'Sample menu',b:'Sol'},{t:'Opening hours',b:'Sol'},{t:'Launch date',b:'Mira'}],
};
const LOG=[['10:42','Otto','Asked you for the supplier budget'],['10:15','Pia','Updated the visitor guide'],['9:40','Sol','Finished the sample menu'],['9:02','Mira','Added two supplier quotes']];
const DATES=[['Today','Supplier chosen'],['Nov 3','Flyers printed'],['Nov 7','Guide final'],['Nov 14','Weekend launch']];
const WEEK=[['Mon',1],['Tue',2],['Wed',0],['Thu',3],['Fri',2]];
const DAILY=[4,9,7,12,3,2,8,15,11,6,13,5,17,14];
const FILES=[['Visitor guide','Document',FileText],['Weekend flyer','Image',FileImage],['Supplier quotes','Sheet',FileSpreadsheet],['Launch page','Site',Globe]];
const QUOTES=[['Rise & Co','$1,240'],['Millstone','$1,105']];

const Tile=({c='#fff',flex,h,style,children})=>{const fg=on(c);return <div style={{background:c,color:fg,flex,minHeight:h,borderRadius:20,padding:18,position:'relative',overflow:'hidden',minWidth:0,boxSizing:'border-box',...style}}>{children}</div>};
const Lab=({children,style})=><div style={{fontSize:12.5,fontWeight:600,letterSpacing:.1,...style}}>{children}</div>;
const Big=({children,size=64,style})=><div style={{fontSize:size,fontWeight:800,lineHeight:.95,letterSpacing:-size*.035,fontVariantNumeric:'tabular-nums',...style}}>{children}</div>;
const Face=({c,size=30,inv})=><svg width={size} height={size} viewBox="0 0 32 32" style={{flex:'none'}} aria-hidden="true"><line x1="16" y1="2" x2="16" y2="7" stroke={inv?'#fff':c} strokeWidth="2.4" strokeLinecap="round"/><rect x="3" y="7" width="26" height="22" rx="8" fill={inv?'#fff':c}/><circle cx="11" cy="17" r="2.8" fill={inv?c:on(c)}/><circle cx="21" cy="17" r="2.8" fill={inv?c:on(c)}/></svg>;
function Ring({pct,size=120,w=12,color,track,children}){const r=(size-w)/2,C=2*Math.PI*r;return <div style={{position:'relative',width:size,height:size,flex:'none'}}><svg width={size} height={size} style={{transform:'rotate(-90deg)'}} aria-hidden="true"><circle cx={size/2} cy={size/2} r={r} fill="none" stroke={track} strokeWidth={w}/><circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={w} strokeLinecap="round" strokeDasharray={`${C*pct/100} ${C}`}/></svg><div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center',flexDirection:'column',textAlign:'center'}}>{children}</div></div>}
const Pill=({bg,fg,children,onClick,style})=><button onClick={onClick} style={{border:'none',background:bg,color:fg,borderRadius:99,padding:'8px 14px',fontSize:13,fontWeight:600,cursor:'pointer',whiteSpace:'nowrap',...style}}>{children}</button>;
const Rows=({items,line})=><div>{items.map(([a,b],i)=><div key={b} style={{display:'flex',gap:12,padding:'7px 0',borderTop:i?`1px solid ${line}`:'none',fontSize:14,alignItems:'baseline'}}><span style={{width:52,flex:'none',fontWeight:700,fontSize:13}}>{a}</span><span style={{minWidth:0}}>{b}</span></div>)}</div>;
function Bars({fg,color,height=96}){const max=3;return <div style={{display:'flex',gap:8,alignItems:'flex-end',height}}>{WEEK.map(([d,v])=><div key={d} title={`${d}: ${v} step${v===1?'':'s'} finished`} style={{flex:1,height:'100%',display:'flex',flexDirection:'column',justifyContent:'flex-end',alignItems:'center',gap:5}}><span style={{fontSize:12,fontWeight:600,color:fg}}>{v}</span><div style={{width:'100%',maxWidth:26,height:`${Math.max(v/max*62,3)}%`,background:color,borderRadius:'5px 5px 2px 2px'}}/><span style={{fontSize:11.5,color:fg}}>{d}</span></div>)}</div>}
function Decide({D,fg,bg,sub}){
  if(D.pick) return <div style={{display:'flex',alignItems:'center',gap:8,flexWrap:'wrap',fontSize:14}}><Check size={17}/><span>You chose {D.pick}. Otto is booking it.</span><Pill bg="transparent" fg={fg} style={{padding:'4px 8px',textDecoration:'underline',fontWeight:500}} onClick={()=>D.setPick(null)}>Undo</Pill></div>;
  return <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>{QUOTES.map(([n,p])=><Pill key={n} bg={bg} fg={sub} onClick={()=>D.setPick(n)}>{n} {p}</Pill>)}</div>;
}
const Q=({D,size=26,style})=><div style={{fontSize:size,fontWeight:700,lineHeight:1.14,letterSpacing:-.3,...style}}>{D.pick?'Supplier chosen':'Which supplier do we go with?'}</div>;
const Banner=({P,D})=><Tile c={P.b} style={{display:'flex',flexWrap:'wrap',gap:'10px 18px',alignItems:'center',padding:'14px 18px'}}><span style={{display:'inline-flex',gap:6,alignItems:'center',fontSize:13,fontWeight:600}}>{D.pick?<Check size={15}/>:<AlertTriangle size={15}/>}{D.pick?'Decided':'Needs you'}</span><Q D={D} size={18} style={{flex:'1 1 220px'}}/><Decide D={D} fg={on(P.b)} bg={on(P.b)} sub={P.b}/></Tile>;

/* 1 Bento */
function Bento({P,phone,T,D}){
  const f=(w)=>phone?(w<=1?'1 1 40%':'1 1 100%'):`${w} 1 ${w*14}%`;
  return <div style={{display:'flex',flexWrap:'wrap',gap:12}}>
    {T.decision&&<Tile c={P.a} flex={f(3)} h={250} style={{display:'flex',flexDirection:'column',justifyContent:'space-between',gap:14}}><Lab style={{display:'inline-flex',gap:6,alignItems:'center'}}>{D.pick?<Check size={15}/>:<AlertTriangle size={15}/>}{D.pick?'Decided':'Needs you'}</Lab><Q D={D} size={phone?28:38}/><Decide D={D} fg={on(P.a)} bg={on(P.a)} sub={P.a}/></Tile>}
    {T.countdown&&<Tile c={P.d} flex={f(1)} h={250} style={{display:'flex',flexDirection:'column',justifyContent:'space-between'}}><Lab>Launch</Lab><div><Big size={phone?68:92}>15</Big><div style={{fontSize:14,marginTop:6,fontWeight:600}}>days to Nov 14</div></div></Tile>}
    {T.progress&&<Tile flex={f(1.6)} h={250} style={{display:'flex',flexDirection:'column',gap:12,alignItems:'flex-start'}}><Lab>Progress</Lab><div style={{flex:1,alignSelf:'center',display:'flex',alignItems:'center'}}><Ring pct={38} size={phone?112:150} w={phone?13:17} color={P.b} track={FILL}><Big size={phone?26:36}>3/8</Big><span style={{fontSize:12,color:MUTE,marginTop:3}}>steps done</span></Ring></div></Tile>}
    {T.team&&<Tile c={P.c} flex={f(2)} h={240}><Lab style={{marginBottom:10}}>Team</Lab>{BOTS.map(b=><div key={b.n} style={{display:'flex',gap:10,alignItems:'center',padding:'6px 0'}}><Face c={on(P.c)==='#fff'?P.c:INK} inv={on(P.c)==='#fff'} size={28}/><div style={{minWidth:0,fontSize:13.5,lineHeight:1.25}}><b>{b.n}</b><div style={{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{b.doing}</div></div></div>)}</Tile>}
    {T.chart&&<Tile flex={f(2)} h={240}><Lab style={{marginBottom:12}}>Steps finished this week</Lab><Bars fg={INK} color={P.a} height={165}/></Tile>}
    {T.schedule&&<Tile c={P.e} flex={f(2)} h={240}><Lab style={{marginBottom:8}}>Coming up</Lab><Rows items={DATES} line={alpha(on(P.e),.25)}/></Tile>}
    {T.files&&<Tile flex={f(3)} h={126}><Lab style={{marginBottom:10}}>Made so far</Lab><div style={{display:'grid',gridTemplateColumns:phone?'1fr 1fr':'repeat(4,1fr)',gap:8}}>{FILES.map(([n,t,I],i)=>{const c=[P.a,P.b,P.c,P.d][i];return <div key={n} style={{display:'flex',gap:8,alignItems:'center',background:FILL,borderRadius:12,padding:'9px 10px',minWidth:0}}><span style={{background:c,color:on(c),borderRadius:8,padding:5,display:'flex'}}><I size={15}/></span><div style={{minWidth:0,fontSize:12.5,lineHeight:1.2}}><b style={{display:'block',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{n}</b><span style={{color:MUTE}}>{t}</span></div></div>})}</div></Tile>}
    {T.activity&&<Tile flex={f(3)} h={126}><Lab style={{marginBottom:8}}>Latest changes</Lab>{LOG.slice(0,2).map(([t,b,x])=><div key={t} style={{display:'flex',gap:9,alignItems:'center',padding:'4px 0',fontSize:13.5}}><Face c={bc(P,b)} size={20}/><span style={{minWidth:0}}><b>{b}</b> {x.toLowerCase()}</span><span style={{marginLeft:'auto',color:MUTE,fontSize:12,flex:'none'}}>{t}</span></div>)}</Tile>}
  </div>;
}
/* 2 Mission control */
function Mission({P,phone,T,D}){
  const glow=c=>({color:c});
  const Panel=({children,style,flex})=><div style={{background:'rgba(255,255,255,.06)',border:'1px solid rgba(255,255,255,.1)',borderRadius:14,padding:16,flex,minWidth:0,boxSizing:'border-box',...style}}>{children}</div>;
  const mono={fontFamily:'ui-monospace,SFMono-Regular,Menlo,monospace'};
  const [a,b,c]=[lit(P.a,.35),lit(P.b,.25),lit(P.c,.3)];
  return <div style={{background:P.deep,color:'#eef0f6',borderRadius:22,padding:phone?14:20}}>
    <div style={{...mono,display:'flex',justifyContent:'space-between',flexWrap:'wrap',gap:6,fontSize:12.5,marginBottom:14,color:'#c8ccd8'}}><span>MISSION / HARBOR BAKERY</span><span style={glow(lit(P.d,.2))}>T-15 DAYS / {D.pick?'ON TRACK':'HOLD: NEEDS YOU'}</span></div>
    <div style={{display:'flex',flexWrap:'wrap',gap:12}}>
      <Panel flex={phone?'1 1 100%':'1 1 300px'} style={{display:'flex',alignItems:'center',gap:18,justifyContent:'center'}}>
        <div style={{position:'relative',width:170,height:170,flex:'none'}}>
          <div style={{position:'absolute',inset:0}}><Ring pct={38} size={170} w={12} color={a} track="rgba(255,255,255,.08)"/></div>
          <div style={{position:'absolute',inset:20}}><Ring pct={58} size={130} w={12} color={b} track="rgba(255,255,255,.08)"/></div>
          <div style={{position:'absolute',inset:40}}><Ring pct={40} size={90} w={12} color={c} track="rgba(255,255,255,.08)"/></div>
        </div>
        <div style={{...mono,fontSize:13,lineHeight:1.2,display:'grid',gap:12}}>{[[a,'38%','STEPS'],[b,'58%','TIME USED'],[c,'40%','RUNNING']].map(([k,v,l])=><div key={l}><div style={{fontSize:24,fontWeight:700,...glow(k)}}>{v}</div><div style={{color:'#c8ccd8',fontSize:11.5}}>{l}</div></div>)}</div>
      </Panel>
      {T.team&&<Panel flex={phone?'1 1 100%':'1.6 1 400px'}><div style={{...mono,fontSize:11.5,color:'#c8ccd8',marginBottom:10}}>CREW</div>{BOTS.map(x=>{const k=lit(P[x.s],.3);return <div key={x.n} style={{display:'flex',gap:12,alignItems:'center',padding:'8px 0'}}><Face c={k} size={30}/><div style={{flex:1,minWidth:0,fontSize:13.5}}><b>{x.n}</b> <span style={{color:'#c8ccd8'}}>{x.doing}</span></div><div style={{display:'flex',gap:3,flex:'none'}} title={`${x.load} of 3 tasks`}>{[0,1,2].map(i=><span key={i} style={{width:18,height:8,borderRadius:2,background:i<x.load?k:'rgba(255,255,255,.1)'}}/>)}</div></div>})}</Panel>}
      {T.decision&&<Tile c={P.b} flex={phone?'1 1 100%':'1 1 260px'} h={200} style={{borderRadius:14,display:'flex',flexDirection:'column',justifyContent:'space-between',gap:12}}><Lab style={{...mono,display:'inline-flex',gap:6,alignItems:'center'}}>{D.pick?<Check size={14}/>:<AlertTriangle size={14}/>}{D.pick?'CLEARED':'ACTION REQUIRED'}</Lab><Q D={D} size={24}/><Decide D={D} fg={on(P.b)} bg={on(P.b)} sub={P.b}/></Tile>}
      {T.schedule&&<Panel flex={phone?'1 1 100%':'1 1 260px'}><div style={{...mono,fontSize:11.5,color:'#c8ccd8',marginBottom:8}}>NEXT EVENTS</div><Rows items={DATES} line="rgba(255,255,255,.1)"/></Panel>}
      {T.activity&&<Panel flex={phone?'1 1 100%':'2 1 420px'} style={{...mono,fontSize:12.5}}><div style={{fontSize:11.5,color:'#c8ccd8',marginBottom:8}}>LIVE LOG</div>{LOG.map(([t,b,x])=><div key={t} style={{padding:'4px 0',display:'flex',gap:10,minWidth:0}}><span style={{color:'#c8ccd8',flex:'none'}}>{t}</span><span style={{...glow(lit(bc(P,b),.35)),flex:'none'}}>{b.toUpperCase()}</span><span style={{minWidth:0}}>{x}</span></div>)}</Panel>}
    </div>
  </div>;
}
/* 3 Scoreboard */
function Score({P,phone,T,D}){
  const running=COLS.Working;
  const Col=({c,n,l,children})=><Tile c={c} flex={phone?'1 1 100%':'1 1 22%'} h={phone?0:470} style={{display:'flex',flexDirection:'column',gap:16,padding:phone?18:22}}><div style={{display:phone?'flex':'block',alignItems:'baseline',gap:12}}><Big size={phone?76:118}>{n}</Big><div style={{fontSize:phone?15:17,fontWeight:700,marginTop:phone?0:8}}>{l}</div></div><div style={{borderTop:`2px solid ${alpha(on(c),.35)}`,paddingTop:12,fontSize:14,lineHeight:1.4}}>{children}</div></Tile>;
  return <div style={{display:'flex',flexWrap:'wrap',gap:10}}>
    {T.countdown&&<Col c={P.a} n="15" l="days to launch"><Rows items={DATES} line={alpha(on(P.a),.22)}/></Col>}
    {T.progress&&<Col c={P.c} n="3/8" l="steps done"><div style={{display:'flex',gap:4,marginBottom:12}}>{[...Array(8)].map((_,i)=><span key={i} style={{flex:1,height:12,borderRadius:3,background:i<3?on(P.c):alpha(on(P.c),.28)}}/>)}</div>{COLS.Done.map(x=><div key={x.t} style={{display:'flex',gap:7,alignItems:'center',padding:'4px 0'}}><Check size={15}/>{x.t}</div>)}</Col>}
    {T.decision&&<Col c={P.b} n={D.pick?0:1} l="needs you"><Q D={D} size={22} style={{marginBottom:14}}/><Decide D={D} fg={on(P.b)} bg={on(P.b)} sub={P.b}/></Col>}
    {T.team&&<Col c={P.d} n={running.length} l="bots working">{running.map(x=><div key={x.t} style={{padding:'6px 0'}}><b>{x.b}</b><div>{x.t}</div><div style={{height:6,background:alpha(on(P.d),.28),borderRadius:6,marginTop:6}}><div style={{width:`${x.p}%`,height:'100%',background:on(P.d),borderRadius:6}}/></div></div>)}</Col>}
  </div>;
}
/* 4 Cover */
function Cover({P,phone,T,D}){
  const serif={fontFamily:'Georgia,"Times New Roman",serif'};
  const S=({h,children})=><div style={{flex:phone?'1 1 100%':'1 1 28%',minWidth:0}}><div style={{...serif,fontSize:21,fontWeight:700,marginBottom:8,color:INK}}>{h}</div><div style={{fontSize:15,lineHeight:1.55,color:'#33353b'}}>{children}</div></div>;
  return <div style={{background:'#fff',borderRadius:22,overflow:'hidden'}}>
    <div style={{background:P.a,color:on(P.a),padding:phone?'26px 20px':'38px 40px',position:'relative',minHeight:phone?0:270,boxSizing:'border-box'}}>
      <div style={{fontSize:13,fontWeight:600,marginBottom:12}}>STATUS, OCTOBER 30</div>
      <div style={{...serif,fontSize:phone?36:66,lineHeight:1.03,maxWidth:phone?'100%':'76%',letterSpacing:-1}}>{D.pick?'The supplier is chosen. November 14 is in reach.':'One decision stands between you and November 14.'}</div>
      {!phone&&<div style={{position:'absolute',right:36,top:34,width:112,height:112,borderRadius:99,background:P.d,color:on(P.d),display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'}}><Big size={40}>15</Big><span style={{fontSize:13,fontWeight:700}}>days left</span></div>}
    </div>
    <div style={{padding:phone?20:'28px 40px',display:'flex',flexWrap:'wrap',gap:phone?20:32}}>
      <S h="Where things stand">Two suppliers have quoted. The third has not replied. Pia is on the second draft of the visitor guide, and Sol finished the sample menu this morning.</S>
      <S h="Already decided">Walk-ins are welcome. Hours are 9 AM to noon. The launch is Saturday, November 14.</S>
      {T.schedule&&<S h="What happens next"><Rows items={DATES.slice(1)} line={LINE}/></S>}
    </div>
    {(T.decision||T.files)&&<div style={{padding:phone?'0 20px 20px':'0 40px 32px',display:'flex',flexWrap:'wrap',gap:12}}>
      {T.decision&&<Tile c={P.b} flex={phone?'1 1 100%':'1 1 42%'} style={{display:'flex',flexDirection:'column',gap:12}}><Lab>Your call</Lab><Q D={D} size={26} style={serif}/><Decide D={D} fg={on(P.b)} bg={on(P.b)} sub={P.b}/></Tile>}
      {T.files&&FILES.slice(0,2).map(([n,t,I],i)=>{const c=[P.c,P.d][i];return <Tile key={n} c={c} flex={phone?'1 1 40%':'1 1 24%'} h={130} style={{display:'flex',flexDirection:'column',justifyContent:'space-between'}}><I size={22}/><div style={{fontSize:14,lineHeight:1.25}}><b>{n}</b><div>{t}</div></div></Tile>})}
    </div>}
  </div>;
}
/* 5 Runway */
const SPAN=[['Mira','Launch date',0,3,1],['Sol','Sample menu',1,4,1],['Mira','Compare suppliers',2,7],['Pia','Visitor guide',2,12],['Otto','Supplier budget',3,6],['Otto','Book the table',7,11],['Otto','Print flyers',8,12],['Sol','Launch post',14,18]];
function Runway({P,phone,T,D}){
  const days=20,today=4,x=d=>d/days*100;
  return <div style={{display:'grid',gap:12}}>
    {T.decision&&!D.pick&&<Banner P={P} D={D}/>}
    <div style={{background:'#fff',borderRadius:20,padding:phone?14:'18px 22px'}}>
      <div style={{display:'flex',alignItems:'baseline',gap:12,marginBottom:14,flexWrap:'wrap'}}><Big size={phone?40:54} style={{color:P.a}}>15 days</Big><span style={{fontSize:14,color:MUTE}}>of runway to the Nov 14 launch</span></div>
      <div style={{position:'relative'}}>
        <div style={{position:'relative',height:22,fontSize:12,color:MUTE,marginBottom:4}}>{[[0,'Oct 26'],[6,'Nov 1'],[13,'Nov 8'],[20,'Nov 14']].map(([d,l])=><span key={l} style={{position:'absolute',left:`${x(d)}%`,transform:d===20?'translateX(-100%)':'none',whiteSpace:'nowrap'}}>{l}</span>)}</div>
        <div style={{position:'absolute',left:`${x(today)}%`,top:20,bottom:0,borderLeft:`2px dashed ${INK}`}}><span style={{position:'absolute',top:-3,left:4,zIndex:3,background:INK,color:'#fff',fontSize:11,fontWeight:600,padding:'1px 6px',borderRadius:5}}>Today</span></div>
        {SPAN.map(([b,t,s,e,done],i)=>{const c=bc(P,b),bg=done?alpha(c,.2):c,fg=done?INK:on(c);const lbl=<>{done&&<Check size={13} style={{flex:'none'}}/>}<span style={{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}><b>{b}</b> {t}</span></>;
          return <div key={t} style={{position:'relative',height:phone?46:38,zIndex:2}}>{phone&&<div style={{fontSize:12,display:'flex',gap:4,alignItems:'center',paddingTop:4,paddingLeft:4,background:'#fff',width:'fit-content',borderRadius:5,paddingRight:5}}>{lbl}</div>}<div title={`${b}: ${t}`} style={{position:'absolute',left:`${x(s)}%`,width:`${x(e-s)}%`,top:phone?26:5,height:phone?14:28,background:bg,color:fg,borderRadius:8,display:'flex',alignItems:'center',gap:5,padding:phone?0:'0 10px',fontSize:13,boxSizing:'border-box',overflow:'hidden'}}>{!phone&&lbl}</div></div>})}
        <div style={{position:'absolute',left:`${x(19)}%`,top:22,bottom:0,width:4,background:P.b,borderRadius:3}} title="Launch, Nov 14"/>
      </div>
    </div>
    {T.schedule&&<div style={{display:'grid',gridTemplateColumns:phone?'1fr 1fr':'repeat(4,1fr)',gap:12}}>{DATES.map(([a,b],i)=>{const c=[P.b,P.c,P.d,P.a][i];return <Tile key={b} c={c} style={{padding:14}}><div style={{fontSize:22,fontWeight:800}}>{a}</div><div style={{fontSize:13.5}}>{b}</div></Tile>})}</div>}
  </div>;
}
/* 6 Board */
function Board({P,phone,T,D}){
  const map={'Queued':P.c,'Working':P.a,'Needs you':P.b,'Done':P.d};
  return <div style={{display:'grid',gap:12}}>
    <div style={{display:'flex',gap:10,overflowX:phone?'auto':'visible',paddingBottom:phone?4:0}}>{Object.entries(COLS).map(([col,items])=>{const c=map[col];const list=col==='Needs you'&&D.pick?[]:items;return <div key={col} style={{flex:phone?'0 0 250px':'1 1 0',background:c,color:on(c),borderRadius:20,padding:12,minHeight:phone?300:450,boxSizing:'border-box',minWidth:0}}><div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',padding:'2px 6px 10px'}}><span style={{fontSize:16,fontWeight:700}}>{col}</span><span style={{fontSize:24,fontWeight:800}}>{list.length}</span></div>
      <div style={{display:'grid',gap:8}}>{list.map(x=><div key={x.t} style={{background:'#fff',color:INK,borderRadius:13,padding:12}}><div style={{fontSize:14,fontWeight:600,marginBottom:8}}>{x.t}</div>{x.p!=null&&<div style={{height:6,background:FILL,borderRadius:6,marginBottom:8}}><div style={{width:`${x.p}%`,height:'100%',background:bc(P,x.b),borderRadius:6}}/></div>}<div style={{display:'flex',alignItems:'center',gap:6,fontSize:12.5,color:MUTE}}><Face c={bc(P,x.b)} size={18}/>{x.b}{x.p!=null&&<span style={{marginLeft:'auto'}}>{x.p}%</span>}</div>{col==='Needs you'&&T.decision&&<div style={{marginTop:10}}><Decide D={D} fg={INK} bg={P.b} sub={on(P.b)}/></div>}</div>)}{list.length===0&&<div style={{fontSize:14,padding:'4px 6px'}}>Nothing waiting on you.</div>}</div></div>})}</div>
  </div>;
}
/* 7 Crew */
function Crew({P,phone,T,D}){
  const tasks=n=>Object.entries(COLS).flatMap(([c,l])=>l.filter(x=>x.b===n&&c!=='Done'));
  return <div style={{display:'grid',gap:12}}>
    {T.decision&&!D.pick&&<Banner P={P} D={D}/>}
    <div style={{display:'grid',gridTemplateColumns:phone?'1fr 1fr':'repeat(4,1fr)',gap:12}}>{BOTS.map(b=>{const c=P[b.s],fg=on(c);return <Tile key={b.n} c={c} style={{padding:phone?14:20,minHeight:phone?290:430,display:'flex',flexDirection:'column'}}>
      <div style={{display:'flex',justifyContent:'center',padding:phone?'6px 0 10px':'14px 0 18px'}}><Face c={fg==='#fff'?c:INK} inv={fg==='#fff'} size={phone?68:112}/></div>
      <div style={{fontFamily:'Georgia,serif',fontSize:phone?24:34,lineHeight:1}}>{b.n}</div>
      <div style={{fontSize:13.5,fontWeight:600,marginTop:3}}>{b.r}</div>
      <div style={{fontSize:14,lineHeight:1.35,marginTop:12}}>{b.doing}</div>
      <div style={{marginTop:'auto',paddingTop:12}}>{!phone&&tasks(b.n).map(t=><div key={t.t} style={{fontSize:13,padding:'5px 0',borderTop:`1px solid ${alpha(fg,.28)}`}}>{t.t}</div>)}<div style={{display:'flex',alignItems:'center',gap:4,marginTop:8,fontSize:12.5,fontWeight:600}}>{[0,1,2].map(i=><span key={i} style={{flex:1,height:7,borderRadius:3,background:i<b.load?fg:alpha(fg,.28)}}/>)}<span style={{marginLeft:6}}>{b.st}</span></div></div>
    </Tile>})}</div>
    {T.activity&&<Tile><Lab style={{marginBottom:8}}>Latest changes</Lab>{LOG.slice(0,3).map(([t,b,x])=><div key={t} style={{display:'flex',gap:9,alignItems:'center',padding:'4px 0',fontSize:13.5}}><Face c={bc(P,b)} size={20}/><span style={{minWidth:0}}><b>{b}</b> {x.toLowerCase()}</span><span style={{marginLeft:'auto',color:MUTE,fontSize:12,flex:'none'}}>{t}</span></div>)}</Tile>}
  </div>;
}
/* 8 Orbit */
const OTASK={Mira:['Compare suppliers','Launch date done'],Otto:['Approve budget','Book the table','Print flyers'],Pia:['Visitor guide'],Sol:['Sample menu done','Opening hours done']};
function Orbit({P,phone,T,D}){
  const W=phone?390:1100,H=phone?700:600,cx=W/2,cy=H/2,R=phone?58:88;
  const pos=phone?[[100,190],[290,190],[290,510],[100,510]]:[[340,140],[760,140],[760,460],[340,460]];
  return <div style={{display:'grid',gap:12}}>
    {T.decision&&!D.pick&&<Banner P={P} D={D}/>}
    <div style={{background:P.deep,borderRadius:22,overflow:'hidden'}}><svg viewBox={`0 0 ${W} ${H}`} style={{width:'100%',display:'block'}} role="img" aria-label="Project at the center with four bots and their tasks around it">
      <ellipse cx={cx} cy={cy} rx={phone?150:330} ry={phone?225:200} fill="none" stroke="rgba(255,255,255,.14)" strokeDasharray="3 7"/>
      {BOTS.map((b,i)=>{const [x,y]=pos[i],k=lit(P[b.s],.25),left=x<cx,top=y<cy;const ts=OTASK[b.n];return <g key={b.n}>
        <line x1={cx} y1={cy} x2={x} y2={y} stroke={k} strokeWidth="2" opacity=".55"/>
        {ts.map((t,j)=>{const pw=phone?172:196,ph=phone?28:30;const px=phone?(left?12:206):(left?30:874);const py=phone?(top?12+j*33:H-12-ph-j*33):(y-((ts.length-1)*19)+j*38-ph/2);const done=t.endsWith('done');const attachX=left?px+pw:px;
          return <g key={t}><line x1={x} y1={y} x2={phone?px+pw/2:attachX} y2={phone?(top?py+ph:py):py+ph/2} stroke={k} strokeWidth="1.2" opacity=".5"/><rect x={px} y={py} width={pw} height={ph} rx={ph/2} fill={done?'rgba(255,255,255,.1)':k}/><text x={px+pw/2} y={py+ph/2+4.5} textAnchor="middle" fontSize={phone?12:13.5} fontWeight="600" fill={done?'#e6e8f0':on(k)}>{t}</text></g>})}
        <circle cx={x} cy={y} r={phone?27:34} fill={k}/><text x={x} y={y+5} textAnchor="middle" fontSize={phone?13:15} fontWeight="700" fill={on(k)}>{b.n}</text>
      </g>})}
      <circle cx={cx} cy={cy} r={R} fill={P.d}/><circle cx={cx} cy={cy} r={R+9} fill="none" stroke="rgba(255,255,255,.16)" strokeWidth="7"/><circle cx={cx} cy={cy} r={R+9} fill="none" stroke={lit(P.d,.2)} strokeWidth="7" strokeLinecap="round" strokeDasharray={`${2*Math.PI*(R+9)*.38} 9999`} transform={`rotate(-90 ${cx} ${cy})`}/>
      <text x={cx} y={cy-2} textAnchor="middle" fontSize={phone?26:38} fontWeight="800" fill={on(P.d)}>3/8</text><text x={cx} y={cy+(phone?18:24)} textAnchor="middle" fontSize={phone?12:14} fontWeight="600" fill={on(P.d)}>steps, 15 days</text>
    </svg></div>
  </div>;
}
/* 9 Pulse */
function Area({P,phone}){
  const [h,setH]=useState(DAILY.length-1),max=20,n=DAILY.length,W=800,H=200;
  const X=i=>i/(n-1)*W,Y=v=>H-v/max*H;
  const pts=DAILY.map((v,i)=>`${X(i)},${Y(v)}`).join(' ');
  const day=i=>`Oct ${17+i}`;
  return <div><div style={{display:'flex',alignItems:'baseline',gap:10,marginBottom:8}}><Big size={phone?38:52} style={{color:P.a}}>{DAILY[h]}</Big><span style={{fontSize:14,color:MUTE}}>bot actions on {day(h)}</span></div>
    <div style={{position:'relative',height:phone?130:190}} onMouseLeave={()=>setH(n-1)}>
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{width:'100%',height:'100%',display:'block'}} aria-hidden="true">
        {[5,10,15].map(v=><line key={v} x1="0" x2={W} y1={Y(v)} y2={Y(v)} stroke={LINE} vectorEffect="non-scaling-stroke"/>)}
        <polygon points={`0,${H} ${pts} ${W},${H}`} fill={alpha(P.a,.2)}/><polyline points={pts} fill="none" stroke={P.a} strokeWidth="2.5" vectorEffect="non-scaling-stroke" strokeLinejoin="round"/>
        <line x1={X(h)} x2={X(h)} y1="0" y2={H} stroke={INK} vectorEffect="non-scaling-stroke" strokeDasharray="3 3"/>
      </svg>
      <div style={{position:'absolute',left:`calc(${h/(n-1)*100}% - 6px)`,top:`calc(${Y(DAILY[h])/H*100}% - 6px)`,width:12,height:12,borderRadius:9,background:P.a,border:'2px solid #fff',boxSizing:'border-box',pointerEvents:'none'}}/>
      <div style={{position:'absolute',inset:0,display:'flex'}}>{DAILY.map((v,i)=><div key={i} style={{flex:1}} onMouseEnter={()=>setH(i)} onClick={()=>setH(i)}/>)}</div>
    </div>
    <div style={{display:'flex',justifyContent:'space-between',fontSize:12,color:MUTE,marginTop:4}}><span>Oct 17</span><span>Oct 30</span></div></div>;
}
function Pulse({P,phone,T,D}){
  const ev={3:[P.c,'Flyers'],7:[P.d,'Guide'],14:[P.b,'Launch']};
  return <div style={{display:'grid',gap:12}}>
    {T.decision&&!D.pick&&<Banner P={P} D={D}/>}
    <div style={{display:'flex',flexWrap:'wrap',gap:12}}>
      {T.chart&&<Tile flex="1 1 100%"><Area P={P} phone={phone}/></Tile>}
      {T.schedule&&<Tile flex={phone?'1 1 100%':'1 1 46%'}><Lab style={{marginBottom:10}}>November</Lab><div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:4,fontSize:12.5}}>{['S','M','T','W','T','F','S'].map((d,i)=><div key={i} style={{textAlign:'center',color:MUTE,fontSize:11.5}}>{d}</div>)}{[...Array(21)].map((_,i)=>{const d=i+1,e=ev[d];return <div key={d} title={e?`Nov ${d}: ${e[1]}`:undefined} style={{height:phone?44:50,borderRadius:9,background:e?e[0]:FILL,color:e?on(e[0]):INK,padding:'4px 5px',boxSizing:'border-box',overflow:'hidden'}}><div style={{fontWeight:e?700:400}}>{d}</div>{e&&<div style={{fontSize:phone?9.5:10.5,fontWeight:600,lineHeight:1.1}}>{e[1]}</div>}</div>})}</div></Tile>}
      {T.activity&&<Tile flex={phone?'1 1 100%':'1 1 46%'}><Lab style={{marginBottom:10}}>Stream</Lab>{LOG.map(([t,b,x])=>{const c=bc(P,b);return <div key={t} style={{display:'flex',gap:10,alignItems:'center',padding:'8px 0'}}><Face c={c} size={30}/><div style={{minWidth:0,fontSize:14,lineHeight:1.3}}><b>{b}</b> {x.toLowerCase()}<div style={{fontSize:12,color:MUTE}}>{t}</div></div></div>})}</Tile>}
    </div>
  </div>;
}
/* 10 Gallery */
function Gallery({P,phone,T,D}){
  const lines=(n,c)=>[...Array(n)].map((_,i)=><div key={i} style={{height:6,borderRadius:4,background:c,margin:'7px 0',width:`${92-i*9}%`}}/>);
  const Cap=({n,t,b,c})=><div style={{display:'flex',alignItems:'center',gap:8,padding:'10px 4px 2px',color:c||INK}}><Face c={bc(P,b)} size={20}/><div style={{fontSize:13,lineHeight:1.2,minWidth:0}}><b>{n}</b> <span>{t}</span></div></div>;
  const Item=({col,row,children,cap})=><div style={{gridColumn:`span ${col}`,gridRow:`span ${row}`,background:'#fff',borderRadius:20,padding:10,display:'flex',flexDirection:'column',minWidth:0}}><div style={{flex:1,borderRadius:13,overflow:'hidden',minHeight:0,position:'relative'}}>{children}</div>{cap}</div>;
  return <div style={{display:'grid',gap:12}}>
    {T.decision&&!D.pick&&<Banner P={P} D={D}/>}
    <div style={{display:'grid',gridTemplateColumns:phone?'1fr 1fr':'repeat(4,1fr)',gridAutoRows:phone?130:150,gap:12}}>
      <Item col={phone?1:1} row={2} cap={<Cap n="Weekend flyer" t="Image" b="Pia"/>}><div style={{background:P.d,color:on(P.d),height:'100%',padding:16,boxSizing:'border-box',display:'flex',flexDirection:'column',justifyContent:'space-between'}}><div style={{fontSize:13,fontWeight:700}}>Harbor Bakery</div><Big size={phone?36:52}>Open Nov 14</Big><div style={{fontSize:13,fontWeight:600}}>Samples, 9 to noon</div></div></Item>
      <Item col={phone?1:2} row={2} cap={<Cap n="Launch page" t="Site" b="Pia"/>}><div style={{background:P.a,color:on(P.a),height:'100%',display:'flex',flexDirection:'column'}}><div style={{display:'flex',gap:5,padding:'8px 10px',background:'rgba(0,0,0,.2)'}}>{[0,1,2].map(i=><span key={i} style={{width:9,height:9,borderRadius:9,background:'rgba(255,255,255,.6)'}}/>)}</div><div style={{padding:phone?12:24,flex:1,display:'flex',flexDirection:'column',justifyContent:'center'}}><div style={{fontFamily:'Georgia,serif',fontSize:phone?22:40,lineHeight:1.05}}>Fresh bread, down at the harbor.</div>{!phone&&<div style={{marginTop:14}}><span style={{background:on(P.a),color:P.a,fontSize:13,fontWeight:600,padding:'7px 14px',borderRadius:99}}>See the menu</span></div>}</div></div></Item>
      <Item col={1} row={1} cap={<Cap n="Visitor guide" t="Doc" b="Pia"/>}><div style={{background:FILL,height:'100%',padding:12,boxSizing:'border-box'}}><div style={{fontFamily:'Georgia,serif',fontSize:15,marginBottom:6,color:INK}}>Visitor guide</div>{lines(4,'#c9cad0')}</div></Item>
      <Item col={1} row={1} cap={<Cap n="Supplier quotes" t="Sheet" b="Mira"/>}><div style={{background:alpha(P.c,.16),height:'100%',padding:10,boxSizing:'border-box',fontSize:12.5,color:INK}}>{QUOTES.map(([n,p])=><div key={n} style={{display:'flex',justifyContent:'space-between',padding:'5px 0',borderBottom:`1px solid ${alpha(P.c,.4)}`}}><span>{n}</span><b>{p}</b></div>)}</div></Item>
      <Item col={phone?1:2} row={1} cap={<Cap n="Sample menu" t="Doc" b="Sol"/>}><div style={{background:P.b,color:on(P.b),height:'100%',padding:'10px 14px',boxSizing:'border-box',fontFamily:'Georgia,serif',fontSize:phone?14:18,lineHeight:1.3}}>Sourdough, rye,<br/>cardamom buns</div></Item>
      <Item col={phone?1:2} row={1} cap={<Cap n="Opening hours" t="Note" b="Sol"/>}><div style={{background:P.e,color:on(P.e),height:'100%',padding:'10px 14px',boxSizing:'border-box',display:'flex',alignItems:'center'}}><Big size={phone?22:40}>9 to noon</Big></div></Item>
    </div>
  </div>;
}

const LAYOUTS=[
  {k:'bento',n:'Bento',d:'Color blocks, everything at a glance',L:Bento,t:ALL},
  {k:'mission',n:'Mission control',d:'Dark, glowing, live',L:Mission,t:['decision','team','schedule','activity']},
  {k:'score',n:'Scoreboard',d:'Giant numbers',L:Score,t:['countdown','progress','decision','team']},
  {k:'cover',n:'Cover story',d:'Reads like a magazine',L:Cover,t:['decision','schedule','files']},
  {k:'runway',n:'Runway',d:'Everything on the way to launch',L:Runway,t:['decision','schedule']},
  {k:'board',n:'Color board',d:'Work moving across columns',L:Board,t:['decision']},
  {k:'crew',n:'Crew',d:'Your bots, front and center',L:Crew,t:['decision','activity']},
  {k:'orbit',n:'Orbit',d:'How bots and work connect',L:Orbit,t:['decision']},
  {k:'pulse',n:'Pulse',d:'Charts, calendar and stream',L:Pulse,t:['decision','chart','schedule','activity']},
  {k:'gallery',n:'Gallery',d:'What the bots made',L:Gallery,t:['decision']},
];
function Thumb({l,P,bg,T,D,phone}){
  const w=phone?390:1100,h=phone?640:720,s=phone?.235:.158;
  return <div style={{width:w*s,height:h*s,overflow:'hidden',borderRadius:9,background:bg.css(P)}} aria-hidden="true" inert="">
    <div style={{width:w,height:h,transform:`scale(${s})`,transformOrigin:'0 0',padding:14,boxSizing:'border-box',pointerEvents:'none'}}><l.L P={P} phone={phone} T={T} D={D}/></div>
  </div>;
}
const Chip=({on:sel,children,onClick,label})=><button onClick={onClick} aria-pressed={sel} aria-label={label} style={{border:'none',background:sel?INK:FILL,color:sel?'#fff':INK,borderRadius:99,padding:'7px 13px',fontSize:13,fontWeight:sel?600:500,cursor:'pointer',whiteSpace:'nowrap',display:'inline-flex',alignItems:'center',gap:6}}>{children}</button>;

function Tray({tab,setTab,onDone,phone,state}){
  const {layout,setLayout,pal,setPal,bg,setBg,tiles,toggle,D,yours,build,busy,P,bgo}=state;
  const ref=useRef(null);const [prompt,setPrompt]=useState(''),[scrolled,setScrolled]=useState(false);
  useEffect(()=>{if(ref.current)ref.current.scrollLeft=0},[yours&&yours.k]);
  const list=yours?[yours,...LAYOUTS]:LAYOUTS;const cur=list.find(l=>l.k===layout)||LAYOUTS[0];
  const allT=Object.fromEntries(ALL.map(k=>[k,true]));
  const lab={fontSize:13,color:MUTE};
  return <div style={{background:'#fff',boxShadow:'0 8px 24px rgba(0,0,0,.08)',borderBottom:`1px solid ${LINE}`,flex:'none',position:'relative',zIndex:5}}>
    <div style={{display:'flex',gap:4,alignItems:'center',padding:'10px 14px 8px'}}>
      <div style={{display:'flex',gap:4,overflowX:'auto',flex:1,minWidth:0}}>{['Layout','Colors','Background','Tiles','Details','Manage'].map(t=><Chip key={t} on={tab===t} onClick={()=>setTab(t)}>{t}</Chip>)}</div>
      <Pill bg={INK} fg="#fff" onClick={onDone} style={{flex:'none'}}>Done</Pill>
    </div>
    <div style={{padding:'2px 14px 14px',height:phone?222:190,boxSizing:'border-box',overflow:'auto'}}>
      {tab==='Layout'&&<div style={{position:'relative'}}>
        <div style={{display:'flex',gap:12,overflowX:'auto',paddingBottom:6}} ref={ref} onScroll={e=>setScrolled(e.currentTarget.scrollLeft>8)}>
          <div style={{flex:'none',width:phone?92:174,background:FILL,borderRadius:12,padding:10,boxSizing:'border-box',display:'flex',flexDirection:'column',gap:7}}>
            <div style={{fontSize:13,fontWeight:600,display:'flex',gap:5,alignItems:'center'}}><Sparkles size={14}/>Make one</div>
            <textarea aria-label="Describe a layout" value={prompt} onChange={e=>setPrompt(e.target.value)} placeholder="Just decisions and dates" style={{flex:1,resize:'none',border:`1px solid ${LINE}`,borderRadius:8,padding:6,fontSize:12.5,fontFamily:'inherit',minHeight:0,minWidth:0,background:'#fff',color:INK}}/>
            <button onClick={()=>build(prompt)} disabled={busy} style={{border:'none',background:INK,color:'#fff',borderRadius:8,padding:'6px 0',fontSize:12.5,fontWeight:600,cursor:'pointer',display:'flex',justifyContent:'center',alignItems:'center',gap:5}}>{busy?<><Loader2 size={13} className="pvSpin"/>Building</>:'Build it'}</button>
          </div>
          {list.map(l=>{const sel=l.k===layout;return <button key={l.k} onClick={()=>setLayout(l.k)} aria-pressed={sel} aria-label={`${l.n} layout`} style={{flex:'none',border:'none',background:'none',padding:0,cursor:'pointer',textAlign:'left'}}>
            <div style={{outline:sel?`2.5px solid ${INK}`:`1px solid ${LINE}`,outlineOffset:sel?1:0,borderRadius:10,margin:3}}><Thumb l={l} P={P} bg={bgo} T={l.tiles||allT} D={D} phone={phone}/></div>
            <div style={{fontSize:12.5,fontWeight:sel?700:500,marginTop:5,color:INK,paddingLeft:3,display:'flex',alignItems:'center',gap:4}}>{sel&&<Check size={13}/>}{l.n}</div>
          </button>})}
        </div>
        {!phone&&<>{scrolled&&<button aria-label="Scroll layouts left" onClick={()=>ref.current.scrollBy({left:-540,behavior:'smooth'})} style={{position:'absolute',left:-6,top:50,border:`1px solid ${LINE}`,background:'#fff',borderRadius:99,padding:5,display:'flex',cursor:'pointer',color:INK}}><ChevronLeft size={16}/></button>}<button aria-label="Scroll layouts right" onClick={()=>ref.current.scrollBy({left:540,behavior:'smooth'})} style={{position:'absolute',right:-6,top:50,border:`1px solid ${LINE}`,background:'#fff',borderRadius:99,padding:5,display:'flex',cursor:'pointer',color:INK}}><ChevronRight size={16}/></button></>}
      </div>}
      {tab==='Colors'&&<div style={{display:'flex',flexWrap:'wrap',gap:10}}>{PALETTES.map(p=>{const sel=p.k===pal;return <button key={p.k} onClick={()=>setPal(p.k)} aria-pressed={sel} aria-label={`${p.n} colors`} style={{background:'#fff',border:sel?`2.5px solid ${INK}`:`1px solid ${LINE}`,borderRadius:14,padding:10,cursor:'pointer',textAlign:'left',width:phone?150:170}}><div style={{display:'flex',height:44,borderRadius:8,overflow:'hidden',gap:2}}>{['a','b','c','d','e'].map(s=><span key={s} style={{flex:1,background:p[s]}}/>)}</div><div style={{fontSize:13,fontWeight:600,marginTop:7,color:INK}}>{p.n}</div></button>})}</div>}
      {tab==='Background'&&<div style={{display:'flex',flexWrap:'wrap',gap:10}}>{BACKGROUNDS.map(b=>{const sel=b.k===bg;return <button key={b.k} onClick={()=>setBg(b.k)} aria-pressed={sel} aria-label={`${b.n} background`} style={{background:'none',border:'none',padding:0,cursor:'pointer',textAlign:'left'}}><div style={{width:phone?106:140,height:phone?60:84,borderRadius:12,background:b.css(P),outline:sel?`2.5px solid ${INK}`:`1px solid ${LINE}`,outlineOffset:sel?1:0}}/><div style={{fontSize:13,fontWeight:sel?700:500,marginTop:6,color:INK}}>{b.n}</div></button>})}<button style={{width:phone?106:140,height:phone?60:84,borderRadius:12,border:`1.5px dashed #b9bbc2`,background:'#fff',color:INK,fontSize:13,cursor:'pointer',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:3}}><Plus size={16}/>Your image</button></div>}
      {tab==='Tiles'&&<div><div style={{...lab,marginBottom:10}}>Show on {cur.n}:</div><div style={{display:'flex',flexWrap:'wrap',gap:8}}>{cur.t.map(k=><Chip key={k} on={tiles[k]} onClick={()=>toggle(k)}>{tiles[k]&&<Check size={14}/>}{TILES[k]}</Chip>)}</div></div>}
      {tab==='Details'&&<div style={{display:'grid',gap:10,maxWidth:560}}><label style={lab}>Name<input defaultValue="Harbor Bakery launch" style={{display:'block',width:'100%',boxSizing:'border-box',marginTop:4,border:`1px solid ${LINE}`,borderRadius:9,padding:'8px 10px',fontSize:14,color:INK,background:'#fff'}}/></label><label style={lab}>Description<input defaultValue="Weekend launch on Nov 14" style={{display:'block',width:'100%',boxSizing:'border-box',marginTop:4,border:`1px solid ${LINE}`,borderRadius:9,padding:'8px 10px',fontSize:14,color:INK,background:'#fff'}}/></label></div>}
      {tab==='Manage'&&<div style={{display:'flex',flexWrap:'wrap',gap:8}}>{['Save as template','Close project','Archive'].map(x=><Chip key={x}>{x}</Chip>)}<button style={{border:'none',background:'#fdecea',color:'#b3261e',borderRadius:99,padding:'7px 13px',fontSize:13,fontWeight:500,cursor:'pointer'}}>Delete project</button></div>}
    </div>
  </div>;
}

export default function App(){
  const [phone,setPhone]=useState(false),[layout,setLayout]=useState('bento'),[pal,setPal]=useState('quiet'),[bg,setBg]=useState('clean');
  const [open,setOpen]=useState(false),[tab,setTab]=useState('Layout'),[pick,setPick]=useState(null);
  const [T,setT]=useState(Object.fromEntries(ALL.map(k=>[k,true])));
  const [yours,setYours]=useState(null),[busy,setBusy]=useState(false);
  const P=PALETTES.find(p=>p.k===pal),bgo=BACKGROUNDS.find(b=>b.k===bg),D={pick,setPick};
  const cur=(yours&&layout==='yours')?yours:LAYOUTS.find(l=>l.k===layout);
  const tiles=cur.tiles||T;
  const toggle=k=>{if(cur.tiles){const n={...cur.tiles,[k]:!cur.tiles[k]};setYours({...yours,tiles:n})}else setT({...T,[k]:!T[k]})};
  const build=txt=>{setBusy(true);setTimeout(()=>{const s=(txt||'decisions and dates').toLowerCase();const n={decision:/decision|need|decide/.test(s),countdown:/date|deadline|launch|countdown/.test(s),schedule:/date|schedule|calendar/.test(s),progress:/progress|step/.test(s),team:/team|bot|who/.test(s),chart:/chart|activity|number/.test(s),files:/file|made|asset/.test(s),activity:/change|log|latest/.test(s)};const tt=Object.values(n).some(Boolean)?n:{decision:true,countdown:true,schedule:true,progress:true};setYours({k:'yours',n:'Yours',L:Bento,t:ALL,tiles:tt});setLayout('yours');setBusy(false)},1000)};
  const L=cur.L,H=phone?780:800,dark=bgo.dark;
  return <div style={{background:'#e9e9eb',borderRadius:12,fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif',color:INK}}>
    <style>{`@keyframes pvIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.pvIn{animation:pvIn .28s ease-out}@keyframes pvS{to{transform:rotate(360deg)}}.pvSpin{animation:pvS 1s linear infinite}@media(prefers-reduced-motion:reduce){.pvIn,.pvSpin{animation:none}}`}</style>
    <div style={{display:'flex',justifyContent:'flex-end',gap:4,padding:8}}>{[[false,Monitor,'Desktop'],[true,Smartphone,'Phone']].map(([p,I,l])=><button key={l} onClick={()=>setPhone(p)} style={{display:'inline-flex',gap:5,alignItems:'center',border:'none',borderRadius:8,padding:'5px 10px',fontSize:13,cursor:'pointer',background:phone===p?'#fff':'transparent',color:INK}}><I size={14}/>{l}</button>)}</div>
    <div style={{padding:phone?'0 0 14px':0}}><div style={{position:'relative',width:phone?390:'100%',height:H,margin:'0 auto',overflow:'hidden',borderRadius:phone?26:'0 0 12px 12px',background:bgo.css(P),display:'flex',flexDirection:'column'}}>
      <div style={{padding:phone?'14px 14px 10px':'16px 22px 12px',display:'flex',alignItems:'center',gap:8,flex:'none'}}>
        <div style={{flex:1,minWidth:0}}><div style={{fontFamily:'Georgia,serif',fontSize:phone?22:27,lineHeight:1.15,color:dark?'#fff':INK,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>Harbor Bakery launch</div><div style={{fontSize:13,marginTop:2,color:dark?'#f4f4f6':MUTE}}>{phone?'Launch Nov 14 · 4 bots':'Weekend launch on Nov 14 · 4 bots'}</div></div>
        <button aria-label="Pin project" style={{border:'none',background:'transparent',padding:7,color:dark?'#fff':INK,cursor:'pointer',display:'flex'}}><Pin size={17}/></button>
        <button onClick={()=>{setOpen(o=>!o);setTab('Layout')}} aria-expanded={open} aria-label="Customize" style={{display:'inline-flex',alignItems:'center',gap:6,border:'none',background:open?INK:'#fff',color:open?'#fff':INK,borderRadius:99,padding:phone?9:'8px 13px',fontSize:13,fontWeight:600,cursor:'pointer',boxShadow:'0 1px 3px rgba(0,0,0,.14)',flex:'none'}}><SlidersHorizontal size={15}/>{!phone&&'Customize'}</button>
      </div>
      {open&&<Tray tab={tab} setTab={setTab} onDone={()=>setOpen(false)} phone={phone} state={{layout,setLayout,pal,setPal,bg,setBg,tiles,toggle,D,yours,build,busy,P,bgo}}/>}
      <div style={{flex:1,overflow:'auto',padding:phone?open?'12px 12px 14px':'2px 12px 14px':open?'14px 22px 16px':'2px 22px 16px',minHeight:0}}><div key={layout} className="pvIn"><L P={P} phone={phone} T={tiles} D={D}/></div></div>
      {!(open&&phone)&&<div style={{padding:phone?'8px 12px 12px':'8px 22px 14px',flex:'none'}}><div style={{background:'#fff',borderRadius:18,boxShadow:'0 2px 10px rgba(0,0,0,.1)',padding:'9px 10px 9px 15px',display:'flex',alignItems:'center',gap:10,maxWidth:760,margin:'0 auto'}}><span style={{flex:1,fontSize:14,color:MUTE}}>Ask your project bots...</span><span style={{background:INK,color:'#fff',borderRadius:99,padding:7,display:'flex'}}><Send size={15}/></span></div></div>}
    </div></div>
  </div>;
}
```

## B What is different from the last version
- No tab bar. The project shows one dashboard at a time.
- **Customize** is the only settings button. It replaces the gear, Customize appearance and the three dots.
- Pick a layout from live previews. The page behind changes when you click. Each project keeps its own pick.
- Colors, background and tiles work on top of any layout.
- **Make one** builds a layout from your words. This mockup uses a fixed result. The real one uses the Dashboards tiles and a bot.

## C Your picks
```ask
Which layout should a new project open with?
* Bento
- Mission control
- Scoreboard
- Cover story
- Crew
- Pulse
```
```ask
Is this the right direction?
* Yes, build it
- Still too much color
- Right idea, but the layouts need work
- No, show me something else
```