https://tresda.institute/assets/AdminTraceCard-D20xui2J.js

1import{u as _,r as g,b as j,a as S,j as e,k as h,h as v,m as u}from"./index-u0HMC9Vb.js";const f={bg_color:"#f0ede8",primary_text_color:"#2a2520",secondary_text_color:"#7a7065",border_color:"#a0998e",header_label:"inside.tresda.institute · TRACE",footer_label:"inside.tresda.institute",font_family:'"Anonymous Pro", monospace',default_ratio:"9:16"},C=["9:16","4:5","1:1"],b={"9:16":16/9,"4:5":5/4,"1:1":1};function T({cfg:a}){const r={...f,...a},n=r.default_ratio||"9:16",o=260,c=Math.round(o*b[n]);return e.jsxs("div",{style:{width:o,height:c,backgroundColor:r.bg_color,fontFamily:r.font_family,display:"flex",flexDirection:"column",padding:21,boxSizing:"border-box",flexShrink:0,border:"1px solid #ccc",overflow:"hidden",transition:"height 0.2s ease"},children:[e.jsxs("div",{style:{borderBottom:`1px solid ${r.border_color}`,paddingBottom:8,marginBottom:13},children:[e.jsx("p",{style:{fontSize:6,letterSpacing:"0.3em",textTransform:"uppercase",color:r.secondary_text_color,margin:"0 0 3px"},children:r.header_label}),e.jsxs("p",{style:{fontSize:9,letterSpacing:"0.08em",textTransform:"uppercase",color:r.primary_text_color,margin:0},children:["Sample Project ",e.jsx("span",{style:{color:r.secondary_text_color,fontSize:7},children:"/ Sub-project"})]})]}),e.jsx("div",{style:{height:80,backgroundColor:r.border_color+"44",marginBottom:13,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:e.jsx("span",{style:{fontSize:7,letterSpacing:"0.2em",color:r.secondary_text_color,textTransform:"uppercase"},children:"Image"})}),e.jsx("div",{style:{flex:1,overflow:"hidden"},children:e.jsx("p",{style:{fontSize:8,lineHeight:1.75,color:r.primary_text_color,margin:0},children:"This is a sample trace entry showing how text will appear inside the share card when a designer exports their spatial thinking observation."})}),e.jsxs("div",{style:{borderTop:`1px solid ${r.border_color}`,paddingTop:8,display:"flex",justifyContent:"space-between",alignItems:"flex-end",flexShrink:0},children:[e.jsxs("div",{children:[e.jsx("p",{style:{fontSize:6,letterSpacing:"0.15em",color:r.primary_text_color,margin:"0 0 2px"},children:"Designer Name"}),e.jsx("p",{style:{fontSize:5,letterSpacing:"0.25em",textTransform:"uppercase",color:r.secondary_text_color,margin:0},children:r.footer_label})]}),e.jsx("p",{style:{fontSize:5,letterSpacing:"0.25em",textTransform:"uppercase",color:r.secondary_text_color,margin:0},children:"v1"})]})]})}function w({cfg:a}){const r={...f,...a},n=r.default_ratio||"9:16",o=260,c=Math.round(o*b[n]);return e.jsxs("div",{style:{width:o,height:c,backgroundColor:r.bg_color,fontFamily:r.font_family,display:"flex",flexDirection:"column",padding:21,boxSizing:"border-box",flexShrink:0,border:"1px solid #ccc",overflow:"hidden",transition:"height 0.2s ease"},children:[e.jsxs("div",{style:{marginBottom:13},children:[e.jsx("p",{style:{fontSize:6,letterSpacing:"0.3em",textTransform:"uppercase",color:r.secondary_text_color,margin:"0 0 5px"},children:r.header_label}),e.jsx("p",{style:{fontSize:14,letterSpacing:"0.06em",textTransform:"uppercase",color:r.primary_text_color,margin:0,lineHeight:1.2},children:"Sample Project"})]}),e.jsxs("div",{style:{display:"flex",gap:13,marginBottom:13,flexShrink:0},children:[e.jsxs("div",{children:[e.jsx("p",{style:{fontSize:5,letterSpacing:"0.3em",textTransform:"uppercase",color:r.secondary_text_color,margin:"0 0 2px"},children:"Traces"}),e.jsx("p",{style:{fontSize:13,color:r.primary_text_color,margin:0},children:"12"})]}),e.jsxs("div",{style:{borderLeft:`1px solid ${r.border_color}`,paddingLeft:13},children:[e.jsx("p",{style:{fontSize:5,letterSpacing:"0.3em",textTransform:"uppercase",color:r.secondary_text_color,margin:"0 0 2px"},children:"Sub-projects"}),e.jsx("p",{style:{fontSize:13,color:r.primary_text_color,margin:0},children:"3"})]})]}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:4,marginBottom:10,flexShrink:0},children:["Interior","Urban","Light"].map(l=>e.jsx("span",{style:{fontSize:6,letterSpacing:"0.2em",textTransform:"uppercase",color:r.secondary_text_color,border:`1px solid ${r.border_color}`,padding:"1px 5px"},children:l},l))}),e.jsx("div",{style:{marginBottom:10,borderLeft:`2px solid ${r.border_color}`,paddingLeft:8,flexShrink:0},children:e.jsx("p",{style:{fontSize:7,lineHeight:1.7,color:r.primary_text_color,margin:0},children:"A brief description of the project and its spatial inquiry goals."})}),e.jsxs("div",{style:{flex:1,backgroundColor:r.border_color+"33",padding:9,overflow:"hidden",minHeight:0},children:[e.jsx("p",{style:{fontSize:6,letterSpacing:"0.2em",textTransform:"uppercase",color:r.secondary_text_color,margin:"0 0 5px"},children:"Featured Trace"}),e.jsx("p",{style:{fontSize:7,lineHeight:1.7,color:r.primary_text_color,margin:0},children:"The light in the corridor shifts at 3pm and completely transforms the feeling of arrival…"})]}),e.jsxs("div",{style:{borderTop:`1px solid ${r.border_color}`,paddingTop:8,flexShrink:0},children:[e.jsx("p",{style:{fontSize:6,letterSpacing:"0.15em",color:r.primary_text_color,margin:"0 0 2px"},children:"Designer Name"}),e.jsx("p",{style:{fontSize:5,letterSpacing:"0.25em",textTransform:"uppercase",color:r.secondary_text_color,margin:0},children:r.footer_label})]})]})}function d({label:a,children:r}){return e.jsxs("div",{children:[e.jsx("p",{className:"text-[9px] font-meta uppercase tracking-widest text-muted-foreground mb-1.5",children:a}),r]})}function p({label:a,value:r,onChange:n}){return e.jsx(d,{label:a,children:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("input",{type:"color",value:r||"#000000",onChange:o=>

1n(o.target.value),className:"w-8 h-8 border border-border cursor-pointer bg-transparent p-0.5"}),e.jsx("input",{type:"text",value:r||"",onChange:o=>n(o.target.value),className:"flex-1 text-xs bg-transparent border border-border px-2 py-1.5 text-foreground font-mono focus:outline-none focus:border-foreground/40"})]})})}function N(){const a=_(),[r,n]=g.useState(f),[o,c]=g.useState(!1),{data:l=[],isLoading:y}=j({queryKey:["trace-card-config"],queryFn:()=>u.entities.TraceCardConfig.list("-created_date",1)});g.useEffect(()=>{l[0]&&n({...f,...l[0]})},[l]);const m=S({mutationFn:async t=>{var x;const i={...t};return delete i.id,delete i.created_date,delete i.updated_date,delete i.created_by,(x=l[0])!=null&&x.id?u.entities.TraceCardConfig.update(l[0].id,i):u.entities.TraceCardConfig.create(i)},onSuccess:()=>{a.invalidateQueries({queryKey:["trace-card-config"]}),c(!0),setTimeout(()=>c(!1),2500)}}),s=(t,i)=>n(x=>({...x,[t]:i}));return y?e.jsx("div",{className:"flex items-center justify-center h-64",children:e.jsx(h,{className:"w-5 h-5 animate-spin text-muted-foreground"})}):e.jsxs("div",{className:"px-5 lg:px-10 py-8 max-w-5xl",children:[e.jsx("h1",{className:"text-2xl font-display uppercase tracking-tight text-foreground mb-1",children:"Trace Share Card"}),e.jsx("p",{className:"text-xs text-muted-foreground mb-8",children:"Customise the visual design of the shareable image card."}),e.jsxs("div",{className:"flex flex-col lg:flex-row gap-10",children:[e.jsxs("div",{className:"flex-1 space-y-5",children:[e.jsx(p,{label:"Background Color",value:r.bg_color,onChange:t=>s("bg_color",t)}),e.jsx(p,{label:"Primary Text Color",value:r.primary_text_color,onChange:t=>s("primary_text_color",t)}),e.jsx(p,{label:"Secondary / Label Color",value:r.secondary_text_color,onChange:t=>s("secondary_text_color",t)}),e.jsx(p,{label:"Border / Divider Color",value:r.border_color,onChange:t=>s("border_color",t)}),e.jsx(d,{label:"Header Label",children:e.jsx("input",{value:r.header_label||"",onChange:t=>s("header_label",t.target.value),className:"w-full text-xs bg-transparent border border-border px-3 py-2 text-foreground focus:outline-none focus:border-foreground

1/40"})}),e.jsx(d,{label:"Footer Label",children:e.jsx("input",{value:r.footer_label||"",onChange:t=>s("footer_label",t.target.value),className:"w-full text-xs bg-transparent border border-border px-3 py-2 text-foreground focus:outline-none focus:border-foreground/40"})}),e.jsx(d,{label:"Font Family (CSS)",children:e.jsx("input",{value:r.font_family||"",onChange:t=>s("font_family",t.target.value),className:"w-full text-xs bg-transparent border border-border px-3 py-2 text-foreground font-mono focus:outline-none focus:border-foreground/40"})}),e.jsx(d,{label:"Default Aspect Ratio (Trace Card)",children:e.jsx("div",{className:"flex gap-1",children:C.map(t=>e.jsx("button",{type:"button",onClick:()=>s("default_ratio",t),className:`px-4 py-2 text-[9px] font-meta uppercase tracking-widest border transition-all ${(r.default_ratio||"9:16")===t?"border-foreground bg-foreground text-background":"border-border text-muted-foreground hover:border-foreground/40"}`,children:t},t))})}),e.jsxs("button",{onClick:()=>m.mutate(r),disabled:m.isPending,className:"flex items-center gap-2 px-6 py-2.5 bg-foreground text-background text-[9px] font-meta uppercase tracking-widest hover:opacity-80 transition-opacity disabled:opacity-40",children:[m.isPending?e.jsx(h,{className:"w-3 h-3 animate-spin"}):o?e.jsx(v,{className:"w-3 h-3"}):null,o?"Saved!":"Save Design"]})]}),e.jsxs("div",{className:"flex flex-col items-start gap-6",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-[9px] font-meta uppercase tracking-widest text-muted-foreground mb-2",children:"Trace Card"}),e.jsx(T,{cfg:r})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-[9px] font-meta uppercase tracking-widest text-muted-foreground mb-2",children:"Project Card"}),e.jsx(w,{cfg:r})]}),e.jsx("p",{className:"text-[9px] text-muted-foreground/50",children:"Scaled to 65% — actual card is 400×700px"})]})]})]})}export{N as default};