import {C} from './design-lib.mjs';
export const esc=s=>String(s).replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;').replaceAll('"','&quot;');
export const darkPalette={canvas:'#0D1E17',paper:'#172E24',ink:'#E6EEE7',muted:'#ADBDB1',subtle:'#879D8D',line:'#304A3B',controlBorder:'#769281',soft:'#203B2D',green:'#86D7AA',onPrimary:'#11271E',onDanger:'#11271E',greenSoft:'#1D4230',lime:'#DEEF8E',dark:'#11271E',nav:'#0B1913',navMuted:'#A9BAAF',navActive:'#294638',amber:'#F0CA7B',amberSoft:'#40351B',red:'#FFA8A4',redSoft:'#412520',blue:'#A9C6FA',blueSoft:'#203653',purple:'#D1BEF2',purpleSoft:'#352B45'};
export function recolor(v,theme,type){if(theme!=='dark'||!v||v==='none')return v;if(type==='TEXT'&&v===C.paper)return C.paper;const entry=Object.entries(C).find(([,c])=>c===v);return entry?darkPalette[entry[0]]:v;}
export function renderNode(n,theme='light',links=true){const f=v=>esc(recolor(v,theme,n.type)||'none');let s='';const name=` data-node="${esc(n.id)}" data-name="${esc(n.name||'')}"`;if(n.type==='FRAME'){s=`<g transform="translate(${n.x} ${n.y})"${name}>${n.children.map(c=>renderNode(c,theme,links)).join('')}</g>`;}else if(n.type==='RECTANGLE'){s=`<rect x="${n.x}" y="${n.y}" width="${n.w}" height="${n.h}" rx="${n.r||0}" fill="${f(n.fill)}" stroke="${f(n.stroke)}" stroke-width="${n.sw||1}"${name}/>`;}else if(n.type==='ELLIPSE'){s=`<ellipse cx="${n.x+n.w/2}" cy="${n.y+n.h/2}" rx="${n.w/2}" ry="${n.h/2}" fill="${f(n.fill)}" stroke="${f(n.stroke)}" stroke-width="${n.sw||1}"${name}/>`;}else if(n.type==='VECTOR'){s=`<svg x="${n.x}" y="${n.y}" width="${n.w}" height="${n.h}" viewBox="0 0 ${n.viewW||24} ${n.viewH||24}" overflow="visible"${name}><path d="${esc(n.d)}" fill="${f(n.fill)}" stroke="${f(n.stroke)}" stroke-width="${n.sw||1.5}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;}else if(n.type==='TEXT'){s=`<text xml:space="preserve" x="${n.x}" y="${n.y+n.size*.99}" font-family="${esc(n.font)}, ${n.font==='Roboto Mono'?'monospace':'Arial, sans-serif'}" font-size="${n.size}" font-weight="${n.weight}" fill="${f(n.color)}" letter-spacing="${n.tracking||0}"${name}>${n.text.split('\n').map((l,i)=>`<tspan x="${n.x}" dy="${i?n.lineHeight:0}">${esc(l)}</tspan>`).join('')}</text>`;}if(links&&n.target)s=`<a href="#screen/${esc(n.target)}" data-target="${esc(n.target)}">${s}</a>`;return s;}
export function frameSvg(b,{links=false}={}){return `<svg xmlns="http://www.w3.org/2000/svg" width="${b.w}" height="${b.h}" viewBox="0 0 ${b.w} ${b.h}" role="img" aria-label="${esc(b.title)}"><title>${esc(b.title)}</title><rect width="${b.w}" height="${b.h}" fill="${recolor(b.bg,b.theme,'FRAME')}"/>${b.children.map(n=>renderNode(n,b.theme,links)).join('')}</svg>`;}
export function boardSvg(boards,layout){return `<svg xmlns="http://www.w3.org/2000/svg" width="${layout.w}" height="${layout.h}" viewBox="0 0 ${layout.w} ${layout.h}"><title>Ankra — Complete redesign board</title><rect width="${layout.w}" height="${layout.h}" fill="#E6EBE3"/>${layout.sections.map(s=>`<text x="80" y="${s.y+55}" font-family="Inter,Arial,sans-serif" font-size="34" font-weight="600" fill="#152B22">${esc(s.title)}</text><text x="80" y="${s.y+88}" font-family="Inter,Arial,sans-serif" font-size="16" fill="#617168">${s.count} frames · Ankra next-generation platform redesign</text>`).join('')}${boards.map(b=>`<g transform="translate(${b.x} ${b.y})"><text y="-15" font-family="Inter,Arial,sans-serif" font-size="16" font-weight="500" fill="#152B22">${esc(b.id+' / '+b.title)}</text>${frameSvg(b)}</g>`).join('')}</svg>`;}
