Send feedback

_{Anything counts. A confusing button, a wish, something that looks off.}

What is this about?

{['This page','Something I made','An idea'].map(o => )}

setText(e.target.value)} placeholder="Write it the way you would text it"
        style={{width:'100%',boxSizing:'border-box',height:110,padding:12,fontFamily:T.body,fontSize:13.5,color:T.ink,border:'1px solid rgba(62,71,97,.2)',resize:'vertical',outline:'none',borderRadius:8}}/>
      <div style={{display:'flex',justifyContent:'flex-end',gap:10,marginTop:16}}>
        <Btn kind="ghost" onClick={onClose}>Cancel</Btn>
        <Btn disabled={!text.trim()} onClick={()=>setSent(true)}>Send</Btn>
      </div>
    </div>}
  </Modal>;
}
function DeleteBtn({ onClick, title }) {
  const [h,setH] = React.useState(false);
  return <button title={title||'Delete'} onClick={(e)=>{e.stopPropagation();onClick();}} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
    style={{background:h?'rgba(194,0,0,.08)':'transparent',border:'1px solid '+(h?'var(--sitm-sale-text)':T.border),color:h?'var(--sitm-sale-text)':T.ink,
      cursor:'pointer',padding:'6px 8px',borderRadius:8,display:'inline-flex',alignItems:'center',transition:'all .15s ease'}}>
    <Icon name="trash" size={14}/>
  </button>;
}
function ConfirmDeleteModal({ item, onCancel, onConfirm }) {
  return <Modal open={!!item} onClose={onCancel} width={440}>
    {item && <div>
      <H2 style={{fontSize:20}}>Delete this?</H2>
      <Sub style={{marginTop:10}}><b>{item.name}</b> will be gone for good. There is no undo.</Sub>
      <div style={{display:'flex',justifyContent:'flex-end',gap:10,marginTop:22}}>
        <Btn kind="ghost" onClick={onCancel}>Keep it</Btn>
        <Btn kind="danger" icon="trash" onClick={onConfirm}>Delete</Btn>
      </div>
    </div>}
  </Modal>;
}
function Toast({ msg }) {
  if (!msg) return null;
  return <div style={{position:'fixed',bottom:24,left:'50%',transform:'translateX(-50%)',zIndex:90,background:T.navy,color:'#fff',padding:'12px 22px',fontFamily:T.body,fontSize:13.5,fontWeight:500,boxShadow:'0 6px 20px rgba(12,12,29,.3)',borderRadius:10,display:'flex',alignItems:'center',gap:10}}>
    <span style={{color:'var(--sitm-teal)'}}><Icon name="check" size={16} stroke={2.4}/></span>{msg}
  </div>;
}
// Guided tour: dims the page, outlines one element at a time
const TOUR_STEPS = [
  { target:'cs-nav', title:'Five tabs, five jobs', body:'Everything in the studio lives in these tabs. Home shows your shortcuts, and you can jump between tools any time. Nothing here has an order you have to follow.' },
  { target:'tool-create', title:'Make materials', body:'This is the big one. Pick what you want to make, pick a look, pick questions from your bank, and the studio builds it for you.' },
  { target:'tool-pdf', title:'Edit a PDF', body:'Open any of your existing PDFs and edit it right on the page, like a document. Save it back as a PDF when you are done.' },
  { target:'tool-templates', title:'Templates', body:'Templates are the looks your materials come out in. Browse the built in ones, or add your own from any PDF and reuse it whenever you like.' },
  { target:'tool-elements', title:'Elements', body:'Little pieces you can drop onto any page: header bands, waves, word art, your logo. Save your own from the editor and build up a library that is all yours.' },
  { target:'tool-files', title:'My files', body:'Everything you make lands here. Come back any time to download a file again or open it in the editor and keep working on it.' },
  { target:'home-types', title:'What you can make today', body:'These are the material types that work right now. Each one tells you how it saves. More are coming, and this list will grow.' },
  { target:'cs-feedback', title:'Tell us everything', body:'This button is on every page. If something is confusing or you wish it worked differently, send a note. Keith reads all of it.' }
];
function Tour({ active, onDone }) {
  const [step, setStep] = React.useState(0);
  const [rect, setRect] = React.useState(null);
  React.useEffect(()=>{ if(active) setStep(0); },[active]);
  React.useEffect(()=>{
    if (!active) return;
    const el = document.getElementById(TOUR_STEPS[step].target);
    if (el) {
      const r = el.getBoundingClientRect();
      if (r.top < 0 || r.bottom > window.innerHeight) window.scrollTo({top: window.scrollY + r.top - 120, behavior:'smooth'});
      const t = setTimeout(()=>{ const r2 = el.getBoundingClientRect(); setRect({top:r2.top,left:r2.left,width:r2.width,height:r2.height}); }, 320);
      return ()=>clearTimeout(t);
    }
  },[active, step]);
  if (!active || !rect) return null;
  const s = TOUR_STEPS[step];
  const below = rect.top + rect.height + 190 < window.innerHeight;
  const cardTop = below ? rect.top + rect.height + 14 : Math.max(14, rect.top - 196);
  const cardLeft = Math.min(Math.max(16, rect.left + rect.width/2 - 180), window.innerWidth - 380);
  return <div style={{position:'fixed',inset:0,zIndex:100}}>
    <div style={{position:'absolute',inset:0,background:'rgba(12,12,29,.45)'}}></div>
    <div style={{position:'fixed',top:rect.top-6,left:rect.left-6,width:rect.width+12,height:rect.height+12,background:'transparent',outline:'3px solid var(--sitm-teal)',boxShadow:'0 0 0 9999px rgba(12,12,29,.45)',borderRadius:12,pointerEvents:'none'}}></div>
    <div style={{position:'fixed',top:cardTop,left:cardLeft,width:360,background:'#fff',padding:22,boxShadow:'0 10px 36px rgba(12,12,29,.35)',borderRadius:14,fontFamily:'var(--sitm-font-body)'}}>
      <div style={{fontSize:11,fontWeight:600,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--sitm-teal-deep)',marginBottom:6}}>{step+1} of {TOUR_STEPS.length}</div>
      <div style={{fontFamily:'var(--sitm-font-heading)',fontSize:18,color:'var(--sitm-navy)',marginBottom:8}}>{s.title}</div>
      <div style={{fontSize:13,lineHeight:1.55,color:'var(--sitm-text)'}}>{s.body}</div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:18}}>
        <Btn kind="quiet" size="sm" onClick={onDone}>Skip</Btn>
        <div style={{display:'flex',gap:8}}>
          {step > 0 && <Btn kind="ghost" size="sm" onClick={()=>setStep(step-1)}>Back</Btn>}
          {step < TOUR_STEPS.length-1
            ? <Btn size="sm" onClick={()=>setStep(step+1)}>Next</Btn>
            : <Btn size="sm" onClick={onDone}>Got it</Btn>}
        </div>
      </div>
    </div>
  </div>;
}
Object.assign(window, { T, Icon, Btn, Chip, Modal, H2, Sub, TopNav, HelpMenu, FeedbackFab, FeedbackModal, Toast, Tour, DeleteBtn, ConfirmDeleteModal });

Thank you

Send feedback