function ElementArt({ kind, w = 120, h = 66 }) {
const box = { width:w, height:h, display:'flex', alignItems:'center', justifyContent:'center', overflow:'hidden' };
if (kind==='band-teal') return ;
if (kind==='band-navy') return ;
if (kind==='wave-teal') return ;
if (kind==='arcs') return ;
if (kind==='dots-gold') return {[10,14,10].map((s,i)=>
)}
You'll Rock This!
;
if (kind==='futuresono') return future sonographer
;
if (kind==='logo') return ;
if (kind==='frame-dash') return ;
return ;
}
function CustomElementArt({ obj, w = 120, h = 66 }) {
const pad = 8, sc = Math.min((w-pad)/obj.w, (h-pad)/obj.h, 1);
return
{obj.type==='shape' &&
}
{obj.type==='element' &&
}
{obj.type==='text' && {obj.text}
}
;
}
function ElementTile({ el, onClick, onDelete, small, extra }) {
const [h,setH] = React.useState(false);
return setH(true)} onMouseLeave={()=>setH(false)}
style={{background:'#fff',border:'1px solid var(--sitm-border)',borderRadius:10,padding:small?6:10,cursor:'pointer',position:'relative',textAlign:'center',
boxShadow:h?'0 4px 12px rgba(62,71,97,.12)':'none',transition:'box-shadow .15s ease'}}>
{el.obj ? : }
{el.name}
{!small &&
{el.cat}
}
{(onDelete||extra) &&
{extra}{onDelete && onDelete(el)}/>}}
Move to
{cats.filter(c=>c!=='All'&&c!==el.cat).map(c=>
)}
}
;
}
function ManageCategoriesModal({ open, onClose, cats, counts, onAdd, onRename, onDelete, onMoveCat }) {
const [newName,setNewName] = React.useState('');
const real = cats.filter(c=>c!=='All');
return
Your categories
Rename, reorder, add, or delete. Deleting a category keeps its elements and moves them to the first category.
{real.map((c,i)=>
onRename(c,e.target.value)} style={{flex:1,fontFamily:'var(--sitm-font-body)',fontSize:13,fontWeight:500,color:'var(--sitm-text-price)',border:'1px solid transparent',borderRadius:6,padding:'5px 8px',outline:'none',background:'transparent'}}
onFocus={e=>e.target.style.borderColor='var(--sitm-teal)'} onBlur={e=>e.target.style.borderColor='transparent'}/>
{counts[c]||0} item{(counts[c]||0)===1?'':'s'}
onDelete(c)} title={'Delete '+c}/>
)}
setNewName(e.target.value)} placeholder="New category name"
style={{flex:1,fontFamily:'var(--sitm-font-body)',fontSize:13,padding:'8px 11px',border:'1px solid rgba(62,71,97,.2)',borderRadius:8,outline:'none',color:'var(--sitm-text)'}}/>
{onAdd(newName.trim());setNewName('');}}>Add
Done
;
}
function ElementsPage({ elements, onDeleteElement, go, cats, catApi, onMoveElement }) {
const [q,setQ] = React.useState('');
const [cat,setCat] = React.useState('All');
const [manage,setManage] = React.useState(false);
const counts = elements.reduce((m,e)=>{m[e.cat]=(m[e.cat]||0)+1;return m;},{});
React.useEffect(()=>{ if(cat!=='All' && !cats.includes(cat)) setCat('All'); },[cats]);
const list = elements.filter(e => (cat==='All'||e.cat===cat) && e.name.toLowerCase().includes(q.toLowerCase()));
return
setManage(true)}>Manage categoriesgo('pdfpick')}>Open the editor}/>
{cats.map(c => )}
{list.length===0 ?
Nothing matches that. Try another word or category.
:
{list.map(e => }/>)}
}
setManage(false)} cats={cats} counts={counts}
onAdd={catApi.add} onRename={catApi.rename} onDelete={catApi.remove} onMoveCat={catApi.move}/>
;
}
function ElementsPanel({ elements, onPlace, onPlaceShape, onSaveNew, cats }) {
const [q,setQ] = React.useState('');
const [cat,setCat] = React.useState('All');
const list = elements.filter(e => (cat==='All'||e.cat===cat) && e.name.toLowerCase().includes(q.toLowerCase()));
return
{!q && cat==='All' &&
Basic shapes
{CS_SHAPES.map(s=>
)}
Your elements
}
{list.map(e =>
onPlace(e)}/>)}
{list.length===0 && Nothing matches that.
}
Save as element
Select something on the page first, then save it here to reuse it anywhere.
;
}
function PlacedElement({ p, onMove, onRemove }) {
const [h,setH] = React.useState(false);
const drag = (e) => {
e.preventDefault();
const sx = e.clientX - p.x, sy = e.clientY - p.y;
const mm = (ev)=> onMove(p.id, ev.clientX - sx, ev.clientY - sy);
const up = ()=>{ window.removeEventListener('mousemove',mm); window.removeEventListener('mouseup',up); };
window.addEventListener('mousemove',mm); window.addEventListener('mouseup',up);
};
return setH(true)} onMouseLeave={()=>setH(false)}
style={{position:'absolute',left:p.x,top:p.y,cursor:'grab',zIndex:5,outline:h?'2px solid var(--sitm-teal)':'none',outlineOffset:2,borderRadius:6}}>
{h && }
;
}
Object.assign(window, { ElementArt, CustomElementArt, ElementTile, ElementsPage, ElementsPanel, PlacedElement, MoveMenu, ManageCategoriesModal });
