const app2 = (() => { const P={A4:[210,297],Letter:[215.9,279.4],A5:[148,210],Legal:[215.9,355.6]},M=["January","February","March","April","May","June","July","August","September","October","November","December"],W=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],root=document.createElement("section");root.style.cssText="font:14px/1.5 system-ui,sans-serif;color:#17233b;background:#fbfaf6;padding:22px;border:1px solid #dfe6e8;border-radius:14px;max-width:1050px;margin:auto"; const css=document.createElement("style");css.textContent=".s2ctrl{display:flex;gap:12px;flex-wrap:wrap}.s2ctrl label{display:grid;font-size:12px;gap:3px}.s2ctrl select,.s2ctrl input{padding:7px;border:1px solid #bac7cf;border-radius:7px;background:white}.s2grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.s2grid span{background:#edf3f3;padding:4px;text-align:center;font-size:11px}.s2card{background:white;border:1px solid #dce3e7;border-radius:10px;padding:14px;margin:12px 0}.s2small{color:#536174;font-size:13px}";root.append(css); const h=document.createElement("h2");h.textContent="Constraint solver";root.append(h);const bar=document.createElement("div");bar.className="s2ctrl";function select(label,values){const l=document.createElement("label");l.textContent=label;const s=document.createElement("select");values.forEach(x=>{const o=document.createElement("option");o.value=x;o.textContent=x;s.append(o)});l.append(s);bar.append(l);return s} const paper=select("Paper",Object.keys(P)),orient=select("Orientation",["Portrait","Landscape"]),month=select("Month",M),week=select("Week starts",W),rowsMode=select("Rows",["Natural","Fixed 42"]);function range(label,min,max,val,step){const l=document.createElement("label");l.textContent=label;const x=document.createElement("input");x.type="range";x.min=min;x.max=max;x.value=val;x.step=step;l.append(x);bar.append(l);return x} const margin=range("Margin · mm",5,30,12,1),titleH=range("Title · mm",8,35,18,1),headerH=range("Weekday header · mm",6,20,9,1),notesH=range("Notes · mm",0,70,28,2);root.append(bar);const result=document.createElement("div");result.className="s2card";root.append(result);const compare=document.createElement("div");compare.className="s2card";root.append(compare);const pareto=document.createElement("div");pareto.className="s2card";root.append(pareto); function leap(y){return y%4===0&&(y%100!==0||y%400===0)}function days(y,m){return[31,leap(y)?29:28,31,30,31,30,31,31,30,31,30,31][m-1]}function wd(y,m,d){return new Date(Date.UTC(y,m-1,d)).getUTCDay()}function off(y,m,w){return(wd(y,m,1)-w+7)%7}function nr(y,m,w){return Math.ceil((off(y,m,w)+days(y,m))/7)} function calc(name,ori,mar,tit,head,note,m,ws,fix){let [pw,ph]=P[name];if(ori==="Landscape")[pw,ph]=[ph,pw];const iw=pw-2*mar,ih=ph-2*mar-tit-head-note,r=fix?6:nr(2027,m,ws),gh=ih/r,cw=iw/7,area=cw*gh;return {pw,ph,iw,ih,r,gh,cw,area,valid:iw>0&&ih>0&&cw>=12&&gh>=12}} function draw(){let m=M.indexOf(month.value)+1,ws=W.indexOf(week.value),fix=rowsMode.value==="Fixed 42",q=calc(paper.value,orient.value,+margin.value,+titleH.value,+headerH.value,+notesH.value,m,ws,fix);result.replaceChildren();const hh=document.createElement("h3");hh.textContent=M[m-1]+" 2027 · "+paper.value+" "+orient.value.toLowerCase();result.append(hh);const p=document.createElement("p");p.className="s2small";p.textContent=q.valid?"Printable bounds: "+q.iw.toFixed(1)+" × "+q.ih.toFixed(1)+" mm · "+q.r+" rows · cell "+q.cw.toFixed(1)+" × "+q.gh.toFixed(1)+" mm · cell area "+q.area.toFixed(0)+" mm² · grid area "+(q.iw*q.ih).toFixed(0)+" mm²":"Invalid geometry: margins and reserved regions exceed the paper, or cells fall below the 12 mm minimum.";p.style.color=q.valid?"#36576b":"#a33";result.append(p); const svg=document.createElementNS("http://www.w3.org/2000/svg","svg");svg.setAttribute("viewBox","0 0 440 300");svg.setAttribute("role","img");svg.setAttribute("aria-label","Normalized paper layout preview");const ns="http://www.w3.org/2000/svg",sc=Math.min(360/q.pw,235/q.ph),x0=40,y0=25,pw=q.pw*sc,ph=q.ph*sc;function rect(x,y,w,h,fill,stroke){const e=document.createElementNS(ns,"rect");[["x",x],["y",y],["width",w],["height",h],["fill",fill],["stroke",stroke||"#728696"]].forEach(a=>e.setAttribute(a[0],a[1]));svg.append(e)}rect(x0,y0,pw,ph,"#fff","#263c52");const mx=+margin.value*sc,top=+titleH.value*sc,head=+headerH.value*sc,notes=+notesH.value*sc;rect(x0+mx,y0+mx,q.iw*sc,top,"#dfeeed");rect(x0+mx,y0+mx+top,q.iw*sc,head,"#b9d8d5");const gy=y0+mx+top+head,gh=q.ih*sc;for(let i=0;i<7;i++)for(let j=0;jLayoutCell area mm²Cell shapeStatus";const tb=document.createElement("tbody");[["A4","Portrait"],["Letter","Portrait"],["A4","Landscape"],["Letter","Landscape"]].forEach(([p,o])=>{const a=calc(p,o,+margin.value,+titleH.value,+headerH.value,+notesH.value,m,ws,fix),tr=document.createElement("tr");tr.innerHTML=""+p+" "+o+""+a.area.toFixed(0)+""+(a.cw/a.gh).toFixed(2)+":1"+(a.valid?"Feasible":"Invalid")+"";tb.append(tr)});table.append(tb);compare.append(table); pareto.replaceChildren();const phh=document.createElement("h3");phh.textContent="Margin–notes trade-off";pareto.append(phh);const candidates=[];for(let mar=6;mar<=24;mar+=3)for(let note=8;note<=56;note+=8){const a=calc(paper.value,orient.value,mar,+titleH.value,+headerH.value,note,m,ws,fix);if(a.valid)candidates.push({mar,note,area:a.area})}const front=candidates.filter(a=>!candidates.some(b=>b.area>=a.area&&b.note>=a.note&&(b.area>a.area||b.note>a.note)));const svg2=document.createElementNS(ns,"svg");svg2.setAttribute("viewBox","0 0 600 190");svg2.setAttribute("role","img");svg2.setAttribute("aria-label","Feasible Pareto trade-off between notes height and day cell area");candidates.forEach(a=>{const c=document.createElementNS(ns,"circle");c.setAttribute("cx",30+a.note*8);c.setAttribute("cy",170-a.area/20);c.setAttribute("r",front.includes(a)?5:3);c.setAttribute("fill",front.includes(a)?"#176f76":"#9cb9bf");svg2.append(c)});pareto.append(svg2);const pp=document.createElement("p");pp.className="s2small";pp.textContent="Each point is a feasible margin/notes candidate. Larger cells trade against larger notes regions; highlighted points are nondominated within this sampled grid, not a universal optimum.";pareto.append(pp) } [paper,orient,month,week,rowsMode,margin,titleH,headerH,notesH].forEach(x=>x.addEventListener("input",draw));[paper,orient,month,week,rowsMode].forEach(x=>x.addEventListener("change",draw));draw();return root; })(); app2