1import{r as i,j as e}from"./react-vendor-D653VjAu.js";const xt={iceServers:[{urls:"stun:stun.l.google.com:19302"},{urls:"stun:stun1.l.google.com:19302"}]},Pt=7e3,ut="Couldn't open a direct connection â one of the networks is blocking peer-to-peer. Try a different network, or put both devices on the same Wi-Fi.",ht=n=>btoa(unescape(encodeURIComponent(JSON.stringify(n)))),ft=n=>JSON.parse(decodeURIComponent(escape(atob(n.trim())))),we=()=>Math.random().toString(36).slice(2,10),mt=n=>new Promise(l=>{if(n.iceGatheringState==="complete")return l();const d=()=>{n.iceGatheringState==="complete"&&(n.removeEventListener("icegatheringstatechange",d),l())};n.addEventListener("icegatheringstatechange",d),setTimeout(l,Pt)}),k=1920,E=1080,J=20,ve=(n,l)=>{const d=n.getBoundingClientRect(),x=l.touches?l.touches[0]:l;return{x:Math.round((x.clientX-d.left)/d.width*k),y:Math.round((x.clientY-d.top)/d.height*E)}},Dt=n=>n.touches?{x:n.touches[0].clientX,y:n.touches[0].clientY}:{x:n.clientX,y:n.clientY},ee=n=>{if(!n?.points?.length)return null;const l=n.points;if(n.tool==="text"){const p=n.fontSize||22,g=(n.text?.length||8)*p*.62;return{x:l[0].x-4,y:l[0].y-p-4,w:g+8,h:p+14}}let d=1/0,x=1/0,a=-1/0,h=-1/0;for(const p of l)p.x<d&&(d=p.x),p.y<x&&(x=p.y),p.x>a&&(a=p.x),p.y>h&&(h=p.y);const f=Math.max((n.width||2)/2+6,8);return{x:d-f,y:x-f,w:Math.max(J,a-d)+f*2,h:Math.max(J,h-x)+f*2}},vt=(n,l)=>l&&n.x>=l.x&&n.x<=l.x+l.w&&n.y>=l.y&&n.y<=l.y+l.h,$t=(n,l)=>{for(let d=n.length-1;d>=0;d--){const x=ee(n[d]);if(vt(l,x))return n[d].id}return null},Ot=(n,l,d,x)=>{const{x:a,y:h,w:f,h:p}=n,g=x.x-d.x,b=x.y-d.y;let j=a,R=h,S=f,w=p;if(l.cx===0){const T=a+f;j=a+g,S=T-j,S<J&&(S=J,j=T-J)}else l.cx===1&&(S=Math.max(J,f+g));if(l.cy===0){const T=h+p;R=h+b,w=T-R,w<J&&(w=J,R=T-J)}else l.cy===1&&(w=Math.max(J,p+b));return{x:j,y:R,w:S,h:w}},Lt=(n,l,d)=>{if(l.w===0||l.h===0)return n;const x=d.w/l.w,a=d.h/l.h;return n.map(h=>({x:d.x+(h.x-l.x)*x,y:d.y+(h.y-l.y)*a}))},de=(n,l)=>{if(!l?.points?.length)return;const d=l.points,x=d[0],a=d[d.length-1];if(n.save(),n.lineCap="round",n.lineJoin="round",l.tool==="eraser"){n.globalCompositeOperation="destination-out",n.lineWidth=l.width,n.beginPath(),d.length===1?(n.arc(x.x,x.y,l.width/2,0,Math.PI*2),n.fill()):(n.moveTo(x.x,x.y),d.slice(1).forEach(h=>n.lineTo(h.x,h.y)),n.stroke()),n.restore();return}switch(n.strokeStyle=l.color,n.fillStyle=l.color,n.lineWidth=l.width,l.tool==="highlighter"&&(n.globalAlpha=.38),l.tool){case"pen":case"highlighter":if(n.beginPath(),d.length===1)n.arc(x.x,x.y,l.width/2,0,Math.PI*2),n.fill();else{n.moveTo(x.x,x.y);for(let h=1;h<d.length-1;h++){const f=(d[h].x+d[h+1].x)/2,p=(d[h].y+d[h+1].y)/2;n.quadraticCurveTo(d[h].x,d[h].y,f,p)}n.lineTo(a.x,a.y),n.stroke()}break;case"line":n.beginPath(),n.moveTo(x.x,x.y),n.lineTo(a.x,a.y),n.stroke();break;case"rect":n.strokeRect(x.x,x.y,a.x-x.x,a.y-x.y);break;case"circle":n.beginPath(),n.ellipse((x.x+a.x)/2,(x.y+a.y)/2,Math.max(1,Math.abs(a.x-x.x)/2),Math.max(1,Math.abs(a.y-x.y)/2),0,0,Math.PI*2),n.stroke();break;case"arrow":{const h=a.x-x.x,f=a.y-x.y,p=Math.sqrt(h*h+f*f),g=Math.atan2(f,h),b=Math.min(22,p*.35);n.beginPath(),n.moveTo(x.x,x.y),n.lineTo(a.x,a.y),n.lineTo(a.x-b*Math.cos(g-Math.PI/6),a.y-b*Math.sin(g-Math.PI/6)),n.moveTo(a.x,a.y),n.lineTo(a.x-b*Math.cos(g+Math.PI/6),a.y-b*Math.sin(g+Math.PI/6)),n.stroke();break}case"text":l.text&&(n.font=`${l.fontSize||22}px Inter, system-ui, sans-serif`,n.fillText(l.text,x.x,x.y));break}n.restore()},ze=(n,l)=>{if(!n)return;const d=n.getContext("2d");d.clearRect(0,0,k,E),l.forEach(x=>de(d,x))},Ne=(n,l,d)=>{if(!n)return;const x=n.getContext("2d");x.clearRect(0,0,k,E),l.filter(a=>a.id!==d).forEach(a=>de(x,a))},C=({children:n,className:l})=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",className:l,children:n}),u={Select:n=>e.jsxs(C,{...n,children:[e.jsx("path",{d:"m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z"}),e.jsx("path",{d:"m13 13 6 6"})]}),Pen:n=>e.jsxs(C,{...n,children:[e.jsx("path",{d:"M12 20h9"}),e.jsx("path",{d:"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"})]}),Marker:n=>e.jsxs(C,{...n,children:[e.jsx("path",{d:"m9 11-6 6v3h9l3-3"}),e.jsx("path",{d:"m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"})]}),Eraser:n=>e.jsxs(C,{...n,children:[e.jsx("path",{d:"m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"}),e.jsx("path",{d:"M22 21H7"}),e.jsx("path",{d:"m5 11 9 9"})]}),Line:n=>e.jsx(C,{...n,children:e.jsx("line",{x1:"5",y1:"19",x2:"19",y2:"5"})}),Rect:n=>e.jsx(C,{...n,children:e.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"})}),Circle:n=>e.jsx(C,{...n,children:e.jsx("circle",{cx:"12",cy:"12",r:"10"})}),Arrow:n=>e.jsxs(C,{...n,children:[e.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),e.jsx("polyline",{points:"12 5 19 12 12 19"})]}),Text:n=>e.jsxs(C,{...n,children:[e.jsx("polyline",{points:"4 7 4 4 20 4 20 7"}),e.jsx("line",{x1:"9",y1:"20",x2:"15",y2:"20"}),e.jsx("line",{x1:"12",y1:"4",x2:"12",y2:"20"})]}),Undo:n=>e.jsxs(C,{...n,children:[e.jsx("path",{d:"M3 7v6h6"}),e.jsx("path",{d:"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"})]}),Redo:n=>e.jsxs(C,{...n,children:[e.jsx("path",{d:"M21 7v6h-6"}),e.jsx("path",{d:"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"})]}
1),Trash:n=>e.jsxs(C,{...n,children:[e.jsx("path",{d:"M3 6h18"}),e.jsx("path",{d:"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"}),e.jsx("path",{d:"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"})]}),Download:n=>e.jsxs(C,{...n,children:[e.jsx("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),e.jsx("polyline",{points:"7 10 12 15 17 10"}),e.jsx("line",{x1:"12",y1:"15",x2:"12",y2:"3"})]}),Users:n=>e.jsxs(C,{...n,children:[e.jsx("path",{d:"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"}),e.jsx("circle",{cx:"9",cy:"7",r:"4"}),e.jsx("path",{d:"M23 21v-2a4 4 0 0 0-3-3.87"}),e.jsx("path",{d:"M16 3.13a4 4 0 0 1 0 7.75"})]}),Plus:n=>e.jsxs(C,{...n,children:[e.jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),e.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]}),Copy:n=>e.jsxs(C,{...n,children:[e.jsx("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2"}),e.jsx("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]}),Check:n=>e.jsx(C,{...n,children:e.jsx("polyline",{points:"20 6 9 17 4 12"})}),X:n=>e.jsxs(C,{...n,children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),ChevD:n=>e.jsx(C,{...n,children:e.jsx("path",{d:"m6 9 6 6 6-6"})}),ChevU:n=>e.jsx(C,{...n,children:e.jsx("path",{d:"m18 15-6-6-6 6"})}),Chat:n=>e.jsx(C,{...n,children:e.jsx("path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"})}),ArrowR:n=>e.jsxs(C,{...n,children:[e.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),e.jsx("polyline",{points:"12 5 19 12 12 19"})]}),Grid:n=>e.jsxs(C,{...n,children:[e.jsx("rect",{x:"3",y:"3",width:"7",height:"7"}),e.jsx("rect",{x:"14",y:"3",width:"7",height:"7"}),e.jsx("rect",{x:"14",y:"14",width:"7",height:"7"}),e.jsx("rect",{x:"3",y:"14",width:"7",height:"7"})]}),Send:n=>e.jsxs(C,{...n,children:[e.jsx("line",{x1:"22",y1:"2",x2:"11",y2:"13"}),e.jsx("polygon",{points:"22 2 15 22 11 13 2 9 22 2"})]}),Menu:n=>e.jsxs(C,{...n,children:[e.jsx("line",{x1:"4",y1:"8",x2:"20",y2:"8"}),e.jsx("line",{x1:"4",y1:"16",x2:"20",y2:"16"})]})},$e=[{id:"select",icon:u.Select,label:"Select",key:"v"},{id:"pen",icon:u.Pen,label:"Pen",key:"p"},{id:"highlighter",icon:u.Marker,label:"Highlighter",key:"h"},{id:"eraser",icon:u.Eraser,label:"Eraser",key:"e"},{id:"line",icon:u.Line,label:"Line",key:"l"},{id:"rect",icon:u.Rect,label:"Rect",key:"r"},{id:"circle",icon:u.Circle,label:"Circle",key:"c"},{id:"arrow",icon:u.Arrow,label:"Arrow",key:"a"},{id:"text",icon:u.Text,label:"Text",key:"t"}],bt=["#ffffff","#ef4444","#f97316","#eab308","#22c55e","#3b82f6","#a855f7","#ec4899","#94a3b8","#000000"],pt=[2,4,8,16,28],It=[{id:"tl",cx:0,cy:0,cursor:"nw-resize"},{id:"tc",cx:.5,cy:0,cursor:"n-resize"},{id:"tr",cx:1,cy:0,cursor:"ne-resize"},{id:"ml",cx:0,cy:.5,cursor:"w-resize"},{id:"mr",cx:1,cy:.5,cursor:"e-resize"},{id:"bl",cx:0,cy:1,cursor:"sw-resize"}
1,{id:"bc",cx:.5,cy:1,cursor:"s-resize"},{id:"br",cx:1,cy:1,cursor:"se-resize"}],At={waitAnswer:"Waiting for answer",connecting:"Connectingâ¦",connected:"Connected",failed:"Connection failed",disconnected:"Disconnected",error:"Error"},Bt={connected:"bg-white",failed:"bg-zinc-500",error:"bg-zinc-500",disconnected:"bg-zinc-600",connecting:"bg-zinc-300 animate-pulse",waitAnswer:"bg-zinc-600"};function gt({n,done:l}){return e.jsx("div",{className:`w-5 h-5 rounded-full flex items-center justify-center border flex-shrink-0 2 ${l?"bg-white border-white":"bg-transparent border-zinc-700"}`,children:l?e.jsx(u.Check,{className:"w-2.5 h-2.5 text-zinc-900"}):e.jsx("span",{className:"text-[10px] font-bold text-zinc-500",children:n})})}function Oe({text:n,id:l,label:d="Copy",small:x=!1,copied:a,onCopy:h}){return e.jsxs("button",{"aria-label":"Copy",onClick:()=>h(n,l),className:`inline-flex items-center gap-1.5 rounded border transition-all font-medium tracking-tight 3 ${x?"px-2 py-1 text-[11px]":"px-3 py-1.5 text-xs"} 4 ${a?"bg-white/10 border-white/30 text-white":"bg-transparent border-zinc-700 text-zinc-400 hover:border-zinc-500 hover:text-zinc-200 active:bg-zinc-800"}`,children:[a?e.jsx(u.Check,{className:"w-3 h-3"}):e.jsx(u.Copy,{className:"w-3 h-3"}),a?"Copied":d]})}function jt({open:n,onClose:l,title:d,children:x,tall:a=!1}){const h=i.useRef(null),f=i.useRef(null),[p,g]=i.useState(0),b=w=>{f.current=w.touches[0].clientY,g(0)},j=w=>{const T=Math.max(0,w.touches[0].clientY-f.current);g(T)},R=()=>{p>90&&l(),g(0),f.current=null},S=a?"82svh":"60svh";return e.jsxs(e.Fragment,{children:[e.jsx("div",{onClick:l,className:"fixed inset-0 z-40 md:hidden transition-opacity duration-300",style:{background:"rgba(0,0,0,0.55)",opacity:n?1:0,pointerEvents:n?"auto":"none"}}),e.jsxs("div",{ref:h,className:"fixed left-0 right-0 bottom-0 z-50 md:hidden bg-zinc-900 border-t border-zinc-800 rounded-t-2xl flex flex-col",style:{maxHeight:S,transform:n?`translateY(${p}px)`:"translateY(110%)",transition:p>0?"none":"transform 0.3s cubic-bezier(0.32,0.72,0,1)",willChange:"transform"},children:[e.jsxs("div",{className:"flex-shrink-0 flex flex-col items-center pt-3 pb-2 cursor-grab active:cursor-grabbing",onTouchStart:b,onTouchMove:j,onTouchEnd:R,children:[e.jsx("div",{className:"w-9 h-1 rounded-full bg-zinc-700"}),d&&e.jsx("p",{className:"text-xs font-semibold text-zinc-400 mt-2.5",children:d})]}),e.jsx("div",{className:"overflow-y-auto flex-1 overscroll-contain",style:{WebkitOverflowScrolling:"touch"},children:x})]})]})}function Ut({bbox:n,onMoveStart:l,onResizeStart:d,onDelete:x,isMobile:a,interactive:h=!0}){const{x:f,y:p,w:g,h:b}=n,j=(N,L)=>`${N/L*100}%`,R=a?16:10,S=R/2,w=a?14:0,T=h?"auto":"none";return e.jsxs("div",{className:"absolute inset-0 pointer-events-none",style:{zIndex:25},children:[e.jsx("div",{className:"absolute",style:{left:j(f,k),top:j(p,E),width:j(g,k),height:j(b,E),border:"1.5px dashed rgba(255,255,255,0.75)",boxShadow:"0 0 0 1px rgba(0,0,0,0.35)",cursor:"move",pointerEvents:T},onMouseDown:N=>{N.stopPropagation(),l(N)},onTouchStart:N=>{N.stopPropagation(),l(N)}}),h&&It.map(N=>e.jsx("div",{style:{position:"absolute",width:R+w*2,height:R+w*2,left:`calc(${j(f+g*N.cx,k)} - ${S+w}px)`,top:`calc(${j(p+b*N.cy,E)} - ${S+w}px)`,cursor:N.cursor,pointerEvents:T,zIndex:26,display:"flex",alignItems:"center",justifyContent:"center"},onMouseDown:L=>{L.stopPropagation(),d(L,N)},onTouchStart:L=>{L.stopPropagation(),d(L,N)},children:e.jsx("div",{style:{width:R,height:R,background:"#09090b",border:"2px solid white",borderRadius:3,pointerEvents:"none"}})},N.id)),e.jsx("button",{style:{position:"absolute",width:a?28:20,height:a?28:20,left:`calc(${j(f+g,k)} + ${a?6:3}px)`,top:`calc(${j(p,E)} - ${a?14:10}px)`,zIndex:27,pointerEvents:"auto",background:"#18181b",border:"1px solid #3f3f46",borderRadius:5,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:a?16:13,color:"#a1a1aa",fontWeight:"bold",lineHeight:1},onMouseDown:N=>{N.stopPropagation(),x()},onTouchStart:N=>{N.stopPropagation(),N.preventDefault(),x()},title:"Delete",children:"Ã"}),e.jsxs("div",{style:{position:"absolute",left:j(f,k),top:`calc(${j(p+b,E)} + 4px)`,fontSize:9,fontFamily:"inherit",color:"#52525b",background:"rgba(9,9,11,0.88)",padding:"0 3px",borderRadius:3,pointerEvents:"none",whiteSpace:"nowrap",zIndex:27},children:[Math.round(g)," à ",Math.round(b)]})]})}function Wt({cssX:n,cssY:l,color:d,fontSize:x,onCommit:a,onCancel:h}){const[f,p]=i.useState(""),g=i.useRef(null);i.useEffect(()=>{g.current?.focus()},[]);const b=Math.max(16,x);return e.jsx("input",{ref:g,value:f,onChange:j=>p(j.target.value),onKeyDown:j=>{j.key==="Enter"&&(j.preventDefault(),a(f)),j.key==="Escape"&&h()},onBlur:()=>a(f),placeholder:"Typeâ¦",className:"absolute z-30 bg-transparent border-b border-white/50 focus:outline-none placeholder:text-white/30",style:{left:n,top:l,color:d,fontSize:b,minWidth:80,maxWidth:"75vw",fontFamily:"Inter, system-ui, sans-serif",transform:"translateY(-0.85em)"}})}function yt({messages:n,onSend:l}){const[d,x]=i.useState(""),a=i.useRef(null);i.useEffect(()=>{a.current?.scrollIntoView({behavior:"smooth"})},[n]);const h=()=>
4{d.trim()&&(l(d),x(""))};return e.jsxs("div",{className:"flex flex-col h-full",children:[e.jsxs("div",{className:"flex-1 overflow-y-auto p-3 space-y-2 min-h-0",children:[n.length===0&&e.jsx("p",{className:"text-[11px] text-zinc-700 text-center pt-8",children:"No messages yet"}),n.map((f,p)=>{const g=f.from==="me";return e.jsxs("div",{className:`flex flex-col ${g?"items-end":"items-start"}`,children:[!g&&e.jsx("span",{className:"text-[10px] text-zinc-600 mb-0.5 px-1",children:f.from}),e.jsx("div",{className:`text-xs px-3 py-1.5 rounded-lg max-w-[85%] break-words 5 ${g?"bg-zinc-700 text-zinc-200":"bg-zinc-950 border border-zinc-800 text-zinc-300"}`,children:f.text})]},p)}),e.jsx("div",{ref:a})]}),e.jsxs("div",{className:"flex border-t border-zinc-800 flex-shrink-0",children:[e.jsx("input",{value:d,onChange:f=>x(f.target.value),onKeyDown:f=>f.key==="Enter"&&h(),placeholder:"Messageâ¦",style:{fontSize:16},className:"flex-1 bg-zinc-900 text-zinc-300 placeholder:text-zinc-700 px-3 py-2.5 focus:outline-none"}),e.jsx("button",{"aria-label":"Send",onClick:h,className:"px-3 text-zinc-600 hover:text-zinc-300 active:text-white bg-zinc-900 border-l border-zinc-800 transition-colors",children:e.jsx(u.Send,{className:"w-3.5 h-3.5"})})]})]})}function wt({peers:n,activePeer:l,setActivePeer:d,createPeer:x,applyAnswer:a,updatePeer:h,shareURL:f,copiedMap:p,onCopy:g}){return e.jsxs("div",{className:"p-3 space-y-3",children:[e.jsxs("button",{onClick:x,className:"w-full inline-flex items-center justify-center gap-1.5 px-3 py-2.5 bg-white hover:bg-zinc-100 active:bg-zinc-200 text-zinc-900 text-xs font-semibold rounded-lg transition-colors",children:[e.jsx(u.Plus,{className:"w-3.5 h-3.5"})," Add collaborator"]}),n.length===0&&e.jsxs("div",{className:"text-center py-8",children:[e.jsx(u.Users,{className:"w-6 h-6 text-zinc-800 mx-auto mb-2"}),e.jsxs("p",{className:"text-xs text-zinc-700",children:['Click "Add collaborator"',e.jsx("br",{}),"to invite someone"]})]}),n.map(b=>{const j=l===b.id;return e.jsxs("div",{className:`border rounded-xl overflow-hidden transition-all ${j?"border-zinc-600":"border-zinc-800"}`,children:[e.jsxs("button",{onClick:()=>d(j?null:b.id),className:"w-full flex items-center gap-3 px-3 py-3 text-left",children:[e.jsx("div",{className:"w-7 h-7 rounded-full border border-zinc-700 flex items-center justify-center flex-shrink-0",children:e.jsx(u.Users,{className:"w-3 h-3 text-zinc-500"})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("p",{className:"text-xs font-medium text-zinc-200",children:b.label}),e.jsxs("div",{className:"flex items-center gap-1.5 mt-0.5",children:[e.jsx("span",{className:`w-1.5 h-1.5 rounded-full ${Bt[b.status]||"bg-zinc-600"}`}),e.jsx("p",{className:"text-[11px] text-zinc-500",children:At[b.status]||b.status})]})]}),j?e.jsx(u.ChevU,{className:"w-3 h-3 text-zinc-600"}):e.jsx(u.ChevD,{className:"w-3 h-3 text-zinc-600"})]}),j&&e.jsxs("div",{className:"border-t border-zinc-800 p-3 space-y-3",children:[["waitAnswer","connecting"].includes(b.status)&&b.offerCode&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center justify-between mb-1.5",children:[e.jsx("p",{className:"text-[10px] text-zinc-500 uppercase tracking-widest",children:"Offer code"}),e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx(Oe,{text:b.offerCode,id:`oc-${b.id}`,label:"Code",small:!0,copied:p[`oc-${b.id}`],onCopy:g}),e.jsx(Oe,{text:f(b.offerCode),id:`ul-${b.id}`,label:"Link",small:!0,copied:p[`ul-${b.id}`],onCopy:g})]})]}),e.jsx("textarea",{readOnly:!0,value:b.offerCode,rows:3,className:"w-full bg-zinc-950 border border-zinc-800 rounded-lg px-2 py-1.5 text-[10px] font-mono text-zinc-600 resize-none focus:outline-none"})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-[10px] text-zinc-500 uppercase tracking-widest mb-1.5",children:"Paste answer"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("textarea",{rows:2,placeholder:"Paste answerâ¦",style:{fontSize:16},onChange:R=>h(b.id,{answerInput:R.target.value}),className:"flex-1 bg-zinc-950 border border-zinc-800 rounded-lg px-2 py-1.5 font-mono text-zinc-300 placeholder:text-zinc-700 resize-none focus:outline-none focus:border-zinc-600 transition-colors"}),e.jsx("button",{onClick:()=>a(b.id,b.answerInput),disabled:!b.answerInput?.trim(),className:"px-3 bg-white hover:bg-zinc-100 disabled:bg-zinc-800 disabled:text-zinc-600 text-zinc-900 text-xs font-semibold rounded-lg transition-colors",children:"Connect"})]})]})]}),b.status==="connected"&&e.jsxs("p",{className:"text-[11px] text-zinc-400 flex items-center gap-1.5",children:[e.jsx(u.Check,{className:"w-3 h-3"})," Drawing in sync"]})]})]},b.id)})]})}function Jt({showNotification:n}){const l=i.useRef(we()),[d,x]=i.useState(()=>typeof window<"u"&&window.innerWidth<768);i.useEffect(()=>{const t=window.matchMedia("(max-width: 767px)"),r=s=>x(s.matches);return t.addEventListener("change",r),()=>t.removeEventListener("change",r)},[]);const[a,h]=i.useState(()=>window.location.hash.startsWith("#wb=")?"join":"home"),[f,p]=i.useState("pen"),[g,b]=i.useState("#ffffff"),[j,R]=i.useState(4),[S,w]=i.useState([]),[T,N]=i.useState([]),[L,te]=i.useState([]),[ne,Le]=i.useState(!1),[H,P]=i.useState(null),[zt,$]=i.useState(null),[Ie,Ae]=i.useState(!1),[Nt,se]=i.useState(!1),[xe,Ct]=i.useState({width:0,height:0}),[K,ue]=i.useState(null),[Ce,Be]=i.useState([]),[Ue,ke]=i.useState(null),[re,We]=i.useState(()=>window.location.hash.startsWith("#wb=")?window.location.hash.slice(4):""),[he,Ye]=i.useState(""),[U,F]=i.useState("idle"),[kt,Je]=i.useState({}),[He,Xe]=i.useState([]),[ce,Z]=i.useState(!1),[W,ie]=i.useState("peers"),[D,X]=i.useState(null),[Se,Ge]=i.useState({}),G=i.useRef(null),A=i.useRef(null),y=i.useRef([]),V=i.useRef("pen"),Ee=i.useRef("#ffffff"),oe=i.useRef(4),fe=i.useRef(!1),q=i.useRef(null),v=i.useRef(null),B=i.useRef(null),Re=i.useRef(null),I=i.useRef({}),Me=i.useRef(null),Te=i.useRef(null),_e=i.useRef([]),Ke=i.useRef([]),Ve=i.useRef("Host"),Fe=i.useRef(n);i.useEffect(()=>{Fe.current=n},[n]);const Ze=i.useCallback((t,r)=>Fe.current?.(t,r),[]);i.useEffect(()=>{y.current=S},[S]),i.useEffect(()=>{_e.current=T},[T]),i.useEffect(()=>{Ke.current=L},[L]),i.useEffect(()=>{V.current=f},[f]),i.useEffect(()=>{Ee.current=g},[g]),i.useEffect(()=>{oe.current=j},[j]),i.useEffect(()=>{v.current=H},[H]),i.useEffect(()=>{ze(G.current,S)},[S]),i.useEffect(()=>{const t=A.current;if(!t||typeof ResizeObserver>"u")return;const r=new ResizeObserver(s=>{const c=s[0]?.contentRect;c&&Ct({width:c.width,height:c.height})});return r.observe(t),()=>r.disconnect()},[a]),i.useEffect(()=>{window.location.hash.startsWith("#wb=")&&window.history.replaceState(null,"",window.location.pathname+window.location.search)},[]);const M=i.useCallback(t=>{if(Object.values(I.current).forEach(r=>{if(r.dc?.readyState==="open")try{r.dc.send(t)}catch{}}),Me.current?.readyState==="open")try{Me.current.send(t)}catch{}},[]),qe=i.useCallback((t,r)=>{Object.values(I.current).forEach(s=>{if(s.id!==r&&s.dc?.readyState==="open")try{s.dc.send(t)}catch{}})},[]),Y=i.useCallback(t=>{N(r=>[...r,t].slice(-100)),te([])},[]),Qe=i.useCallback((t,r)=>{const s=A.current;if(!s)return{x:0,y:0};const c=s.getBoundingClientRect();return{x:Math.round((t-c.left)/c.width*k),y:Math.round((r-c.top)/c.height*E)}},[]),me=i.useCallback(t=>{const r=B.current;if(!r)return;const s=A.current?.getContext("2d");if(!s)return;s.clearRect(0,0,k,E);let c;if(r.type==="move"){const o=t.x-r.startPos.x,m=t.y-r.startPos.y;c={...r.origStroke,points:r.origStroke.points.map(z=>({x:z.x+o,y:z.y+m}))}}else{const o=Ot(r.origBBox,r.handle,r.startPos,t);c={...r.origStroke,points:Lt(r.origStroke.points,r.origBBox,o)}}
5r.currentTransformed=c,de(s,c),$({...c})},[]),et=i.useCallback(()=>{const t=B.current;B.current=null,se(!1);const r=A.current?.getContext("2d");if(r&&r.clearRect(0,0,k,E),!t?.currentTransformed){ze(G.current,y.current),$(null);return}const s=t.currentTransformed,c=y.current.map(o=>o.id===s.id?s:o);y.current=c,ze(G.current,c),w([...c]),P(s.id),v.current=s.id,$(null),Y({type:"update",before:t.origStroke,after:s}),M(`UPDATE:${JSON.stringify(s)}`)},[M,Y]);i.useEffect(()=>{const t=s=>{if(!B.current)return;const{x:c,y:o}=Dt(s);me(Qe(c,o))},r=()=>{B.current&&et()};return window.addEventListener("mousemove",t),window.addEventListener("mouseup",r),window.addEventListener("touchmove",t,{passive:!1}),window.addEventListener("touchend",r),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",r),window.removeEventListener("touchmove",t),window.removeEventListener("touchend",r)}},[me,et,Qe]);const be=i.useCallback(t=>{const r=A.current;if(!r)return;const s=r.getContext("2d");s.clearRect(0,0,k,E),t.tool==="eraser"?ze(G.current,[...y.current,t]):de(s,t)},[]),tt=i.useCallback(t=>{if(t.preventDefault(),t.touches?.length>1)return;const r=A.current;if(!r)return;const s=ve(r,t);if(v.current){if(V.current==="select"){const o=y.current.find(m=>m.id===v.current);if(o){const m=ee(o);if(vt(s,m)){B.current={type:"move",startPos:s,origStroke:o,origBBox:m},se(!0),Ne(G.current,y.current,v.current);return}}}P(null),v.current=null,$(null)}if(V.current==="select"){const o=$t(y.current,s);if(o){P(o),v.current=o;const m=y.current.find(z=>z.id===o);B.current={type:"move",startPos:s,origStroke:m,origBBox:ee(m)},se(!0),Ne(G.current,y.current,o)}return}if(V.current==="text"){const o=r.getBoundingClientRect();ue({canvasX:s.x,canvasY:s.y,cssX:s.x/k*o.width,cssY:s.y/E*o.height});return}fe.current=!0,Ae(!0);const c={id:we(),tool:V.current,color:V.current==="eraser"?"#000":Ee.current,width:V.current==="eraser"?oe.current*3:oe.current,points:[s]};q.current=c,be(c)},[be]),nt=i.useCallback(t=>{if(t.preventDefault(),t.touches?.length>1)return;const r=A.current;if(!r)return;const s=ve(r,t);if(B.current){me(s);return}if(!fe.current||!q.current)return;const c=q.current;["pen","highlighter","eraser"].includes(c.tool)?c.points.push(s):c.points=[c.points[0],s],be(c),Re.current||(M(`CURSOR:${l.current}:${s.x}:${s.y}`),Re.current=setTimeout(()=>{Re.current=null},60))},[me,M,be]),Pe=i.useCallback(()=>{if(B.current||!fe.current||!q.current)return;fe.current=!1,Ae(!1);const t=q.current;q.current=null;const r=A.current?.getContext("2d");r&&r.clearRect(0,0,k,E);const s=[...y.current,t];y.current=s,w([...s]),Y({type:"add",stroke:t}),t.tool!=="eraser"&&(P(t.id),v.current=t.id,$(null)),M(`STROKE:${JSON.stringify(t)}`)},[M,Y]),St=i.useCallback(t=>{if(!K||!t?.trim()){ue(null);return}const r={id:we(),tool:"text",color:Ee.current,width:oe.current,fontSize:Math.max(14,oe.current*
55),text:t.trim(),points:[{x:K.canvasX,y:K.canvasY}]},s=[...y.current,r];y.current=s,w([...s]),Y({type:"add",stroke:r}),P(r.id),v.current=r.id,M(`STROKE:${JSON.stringify(r)}`),ue(null)},[K,M,Y]),Et=i.useCallback(t=>{t.preventDefault();const r=ve(A.current,t),s=y.current.find(o=>o.id===v.current);if(!s)return;const c=ee(s);B.current={type:"move",startPos:r,origStroke:s,origBBox:c},se(!0),Ne(G.current,y.current,v.current)},[]),Rt=i.useCallback((t,r)=>{t.preventDefault();const s=ve(A.current,t),c=y.current.find(m=>m.id===v.current);if(!c)return;const o=ee(c);B.current={type:"resize",handle:r,startPos:s,origStroke:c,origBBox:o},se(!0),Ne(G.current,y.current,v.current)},[]),le=i.useCallback(()=>{const t=v.current;if(!t)return;const r=y.current.findIndex(o=>o.id===t);if(r===-1)return;const s=y.current[r],c=y.current.filter(o=>o.id!==t);y.current=c,w([...c]),Y({type:"delete",stroke:s,index:r}),P(null),v.current=null,$(null),M(`DELETE:${t}`),n?.("Stroke deleted")},[M,n,Y]),pe=i.useCallback((t,r)=>{const s=y.current;let c=s,o=null;switch(t.type){case"add":r?(c=s.filter(m=>m.id!==t.stroke.id),o=`DELETE:${t.stroke.id}`):(c=[...s,t.stroke],o=`STROKE:${JSON.stringify(t.stroke)}`);break;case"update":{const m=r?t.before:t.after;c=s.map(z=>z.id===m.id?m:z),o=`UPDATE:${JSON.stringify(m)}`;break}case"delete":r?(c=[...s],c.splice(Math.min(t.index,c.length),0,t.stroke),o=`INSERT:${JSON.stringify({index:t.index,stroke:t.stroke})}`):(c=s.filter(m=>m.id!==t.stroke.id),o=`DELETE:${t.stroke.id}`);break;case"clear":r?(c=t.strokes,o=`SYNC:${JSON.stringify(c)}`):(c=[],o="CLEAR");break;default:return}y.current=c,w([...c]),v.current&&!c.some(m=>m.id===v.current)&&(P(null),v.current=null,$(null)),o&&M(o)},[M]),ge=i.useCallback(()=>{const t=_e.current;if(!t.length)return;const r=t[t.length-1];pe(r,!0),N(s=>s.slice(0,-1)),te(s=>[...s,r])},[pe]),ae=i.useCallback(()=>{const t=Ke.current;if(!t.length)return;const r=t[t.length-1];pe(r,!1),te(s=>s.slice(0,-1)),N(s=>[...s,r])},[pe]),st=i.useCallback(()=>{const t=y.current;t.length&&Y({type:"clear",strokes:t}),w([]),y.current=[],P(null),v.current=null,$(null),M("CLEAR"),n?.("Canvas cleared â Ctrl+Z to undo")},[M,n,Y]),rt=i.useCallback(()=>{const t=document.createElement("canvas");t.width=k,t.height=E;const r=t.getContext("2d");y.current.forEach(o=>de(r,o));const s=document.createElement("canvas");s.width=k,s.height=E;const c=s.getContext("2d");c.fillStyle="#09090b",c.fillRect(0,0,k,E),c.drawImage(t,0,0),s.toBlob(o=>{if(!o)return;const m=URL.createObjectURL(o),z=document.createElement("a");z.href=m,z.download=`whiteboard-${Date.now()}.png`,document.body.appendChild(z),z.click(),setTimeout(()=>{document.body.removeChild(z),URL.revokeObjectURL(m)},1e3),n?.("Exported as PNG","success")},"image/png")},[n]),je=i.useCallback((t,r)=>{if(typeof t=="string"){if(t.startsWith("STROKE:")){const s=JSON.parse(t.slice(7));w(c=>{const o=[...c,s];return y.current=o,o});return}if(t.startsWith("UNDO:")){const s=t.slice(5);w(c=>{const o=c.filter(m=>m.id!==s);return y.current=o,o});return}if(t.startsWith("UPDATE:")){const s=JSON.parse(t.slice(7));w(c=>{const o=c.map(m=>m.id===s.id?s:m);return y.current=o,o});return}if(t.startsWith("DELETE:")){const s=t.slice(7);w(c=>{const o=c.filter(m=>m.id!==s);return y.current=o,o});return}if(t.startsWith("INSERT:")){const{index:s,stroke:c}=JSON.parse(t.slice(7));w(o=>{if(o.some(z=>z.id===c.id))return o;const m=[...o];return m.splice(Math.min(s,m.length),0,c),y.current=m,m});return}if(t==="CLEAR"){w([]),y.current=[],N([]),te([]),P(null),v.current=null;return}if(t.startsWith("SYNC:")){const s=JSON.parse(t.slice(5));w(s),y.current=s,N([]),te([]),P(null),v.current=null;return}if(t.startsWith("YOU:")){Ve.current=t.slice(4)||"Peer";return}if(t.startsWith("CURSOR:")){const[,s,c,o]=t.split(":"),m=I.current[s]?.label||"Peer";Je(z=>({...z,[s]:{x:+c,y:+o,label:m}})),setTimeout(()=>Je(z=>{const O={...z};return delete O[s],O}),3e3);return}if(t.startsWith("CHAT:")){const s=JSON.parse(t.slice(5)),c=s.from||I.current[r]?.label||(r==="host"?"Host":"Peer");Xe(o=>[...o,{...s,from:c}]);return}if(t==="HELLO"){const s=I.current[r];s?.dc?.readyState==="open"&&s.dc.send(`SYNC:${JSON.stringify(y.current)}`);return}}},[]),_=i.useCallback((t,r)=>{Be(s=>s.map(c=>{if(c.id!==t)return c;const o=typeof r=="function"?r(c):r;return{...c,...o}}))},[]),ct=i.useCallback(async()=>{const t=we(),r=`Peer ${(Object.keys(I.current).length+1).toString().padStart(2,"0")}
5`,s=new RTCPeerConnection(xt),c=s.createDataChannel("wb",{ordered:!0}),o={id:t,label:r,pc:s,dc:c,status:"waitAnswer",offerCode:"",answerInput:"",waitingBC:!1};I.current[t]=o,c.onopen=()=>{_(t,{status:"connected"}),c.send(`YOU:${r}`),c.send(`SYNC:${JSON.stringify(y.current)}`),n?.(`${r} connected`,"success")},c.onclose=()=>_(t,O=>O.status==="connected"?{status:"disconnected"}:{}),c.onmessage=O=>{je(O.data,t),typeof O.data=="string"&&O.data!=="HELLO"&&!O.data.startsWith("SYNC:")&&!O.data.startsWith("YOU:")&&qe(O.data,t)},s.oniceconnectionstatechange=()=>{["failed","disconnected"].includes(s.iceConnectionState)&&(_(t,{status:"failed"}),s.iceConnectionState==="failed"&&n?.(ut,"error"))};const m=await s.createOffer();await s.setLocalDescription(m),await mt(s);const z=ht(s.localDescription);I.current[t].offerCode=z,I.current[t].waitingBC=!0;try{Te.current?.postMessage({type:"offer",data:z})}catch{}Be(O=>[...O,{...o,offerCode:z}]),ke(t),d?X("peers"):(Z(!0),ie("peers"))},[_,je,qe,n,d]),ye=i.useCallback(async(t,r)=>{const s=I.current[t];if(!(!s||!r?.trim())){_(t,{status:"connecting"});try{await s.pc.setRemoteDescription(new RTCSessionDescription(ft(r))),I.current[t].waitingBC=!1}catch{_(t,{status:"error"})}}},[_]),Mt=i.useCallback(async()=>{if(re.trim()){F("connecting"),Ye("");try{const t=new RTCPeerConnection(xt);t.ondatachannel=c=>{Me.current=c.channel,c.channel.onopen=()=>{F("connected"),c.channel.send("HELLO"),n?.("Connected!","success")},c.channel.onmessage=o=>je(o.data,"host"),c.channel.onclose=()=>F("disconnected")},t.oniceconnectionstatechange=()=>{["failed","disconnected"].includes(t.iceConnectionState)&&(F("failed"),t.iceConnectionState==="failed"&&n?.(ut,"error"))},await t.setRemoteDescription(new RTCSessionDescription(ft(re)));const r=await t.createAnswer();await t.setLocalDescription(r),await mt(t);const s=ht(t.localDescription);Ye(s),F("waitConnect");try{Te.current?.postMessage({type:"answer",data:s})}catch{}}catch{F("error")}}},[re,je,n]),it=i.useCallback(t=>{if(!t.trim())return;const r={text:t.trim(),time:Date.now(),from:Ve.current};M(`CHAT:${JSON.stringify(r)}`),Xe(s=>[...s,{...r,from:"me"}])},[M]);i.useEffect(()=>{const t=r=>{if(r.target.tagName==="INPUT"||r.target.tagName==="TEXTAREA")return;if((r.ctrlKey||r.metaKey)&&r.key.toLowerCase()==="z"){r.preventDefault(),r.shiftKey?ae():ge();return}if((r.ctrlKey||r.metaKey)&&r.key.toLowerCase()==="y"){r.preventDefault(),ae();return}if((r.key==="Delete"||r.key==="Backspace")&&v.current){r.preventDefault(),le();return}if(r.key==="Escape"){P(null),v.current=null,$(null);return}const s=$e.find(c=>c.key===r.key.toLowerCase());s&&(p(s.id),s.id!=="select"&&(P(null),v.current=null,$(null)))};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[ge,ae,le]),i.useEffect(()=>{try{const t=new BroadcastChannel("ihatepdf_wb_signal");return Te.current=t,t.onmessage=r=>{const{type:s,data:c}=r.data||{};if(s==="offer"&&a==="join"&&(We(c),Ze("Offer loaded!","success")),s==="answer"){const o=Object.values(I.current).find(m=>m.waitingBC);o&&ye(o.id,c)}},()=>t.close()}catch{}},[a,ye,Ze]);const De=i.useCallback(async(t,r)=>{try{await navigator.clipboard.writeText(t)}catch{const s=document.createElement("textarea");s.value=t,document.body.appendChild(s),s.select(),document.execCommand("copy"),document.body.removeChild(s)}Ge(s=>({...s,[r]:!0})),setTimeout(()=>Ge(s=>({...s,[r]:!1})),2e3)},[]),ot=t=>`${window.location.origin}${window.location.pathname}#wb=${t}`,lt=zt??S.find(t=>t.id===H),at=H&<?ee(lt):null,Q=Ce.filter(t=>t.status==="connected").length,Tt=f==="select"?"default":f==="eraser"?"cell":f==="text"?"text":Nt?"grabbing":"crosshair",dt=t=>{p(t),t!=="select"&&(P(null),v.current=null,$(null))};return a==="home"?e.jsxs("div",{className:"max-w-2xl mx-auto pb-16",children:[e.jsx("div",{className:"flex items-start justify-between mb-8 md:mb-10",children:e.jsx("div",{children:e.jsx("div",{className:"flex items-center gap-3 mb-1.5",children:e.jsx("h1",{className:"text-4xl md:text-3xl font-semibold text-white tracking-tight",children:"Collab Whiteboard"})})})}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4",children:[{icon:u.Pen,title:"Create session",desc:"Start a new whiteboard and invite others to draw together in real time.",tags:["Select & resize","Move strokes","Multi-peer","Export PNG"],action:()=>h("draw"),cta:"Start drawing"},{icon:u.Users,title:"Join session",desc:"Paste an invite code or open a shared link to join someone's whiteboard.",tags:["Paste offer","Auto-link","Live sync","Chat"],action:()=>h("join"),cta:"Join board"}
5].map(({icon:t,title:r,desc:s,tags:c,action:o,cta:m})=>e.jsxs("button",{onClick:o,className:"group bg-zinc-900 border border-zinc-800 hover:border-zinc-600 active:border-zinc-500 rounded-xl p-5 md:p-6 text-left transition-all duration-200",children:[e.jsx("div",{className:"w-10 h-10 rounded-lg border border-zinc-700 group-hover:border-zinc-500 flex items-center justify-center mb-4 md:mb-5 transition-colors",children:e.jsx(t,{className:"w-4 h-4 text-zinc-400 group-hover:text-zinc-200 transition-colors"})}),e.jsx("h2",{className:"text-sm font-semibold text-white tracking-tight mb-1.5",children:r}),e.jsx("p",{className:"text-xs text-zinc-600 leading-relaxed",children:s}),e.jsx("div",{className:"mt-4 flex flex-wrap gap-1.5",children:c.map(z=>e.jsx("span",{className:"text-[10px] px-2 py-0.5 rounded border border-zinc-800 text-zinc-600 font-mono",children:z},z))}),e.jsxs("div",{className:"mt-4 flex items-center gap-1 text-xs text-zinc-600 group-hover:text-zinc-400 transition-colors",children:[e.jsx("span",{children:m}),e.jsx(u.ArrowR,{className:"w-3 h-3 ml-0.5"})]})]},r))}),e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-2",children:[{icon:u.Select,label:"Select & transform",desc:"Move, resize, delete any stroke"},{icon:u.Pen,label:"9 draw tools",desc:"Pen, shapes, text, eraser"},{icon:u.Users,label:"Multi-peer",desc:"Mesh via manual handshake"},{icon:u.Download,label:"PNG export",desc:"Full-res 1920Ã1080"}].map(({icon:t,label:r,desc:s})=>e.jsxs("div",{className:"bg-zinc-950 border border-zinc-800/60 rounded-xl p-3 md:p-3.5",children:[e.jsx(t,{className:"w-3.5 h-3.5 text-zinc-600 mb-2 md:mb-2.5"}),e.jsx("p",{className:"text-[11px] md:text-xs font-medium text-zinc-400",children:r}),e.jsx("p",{className:"text-[10px] md:text-[11px] text-zinc-600 mt-0.5",children:s})]},r))})]}):a==="join"&&U!=="connected"?e.jsxs("div",{className:"max-w-xl mx-auto pb-16 space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-6 md:mb-8",children:[e.jsx("button",{"aria-label":"Close",onClick:()=>h("home"),className:"text-zinc-600 hover:text-zinc-300 transition-colors p-1 -ml-1",children:e.jsx(u.X,{className:"w-4 h-4"})}),e.jsx("h1",{className:"text-sm font-semibold text-white",children:"Join whiteboard session"})]}),e.jsxs("div",{className:"bg-zinc-900 border border-zinc-800 rounded-xl overflow-hidden",children:[e.jsxs("div",{className:"flex items-center gap-2.5 px-4 py-3 border-b border-zinc-800",children:[e.jsx(gt,{n:"1",done:!!he}),e.jsx("span",{className:"text-sm font-medium text-zinc-200",children:"Paste offer code"})]}),e.jsxs("div",{className:"p-4 space-y-3",children:[e.jsx("textarea",{rows:4,value:re,onChange:t=>We(t.target.value),placeholder:"Paste the offer code from the hostâ¦",style:{fontSize:16},className:"w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2.5 font-mono text-zinc-300 placeholder:text-zinc-700 resize-none focus:outline-none focus:border-zinc-600 transition-colors leading-relaxed"}),e.jsx("button",{onClick:Mt,disabled:!re.trim()||U==="connecting",className:"w-full sm:w-auto px-4 py-2.5 bg-white hover:bg-zinc-100 active:bg-zinc-200 disabled:bg-zinc-800 disabled:text-zinc-600 text-zinc-900 text-sm font-semibold rounded-lg transition-colors",children:U==="connecting"?"Generatingâ¦":"Generate answer"})]})]}),he&&e.jsxs("div",{className:"bg-zinc-900 border border-zinc-800 rounded-xl overflow-hidden",children:[e.jsxs("div",{className:"flex items-center gap-2.5 px-4 py-3 border-b border-zinc-800",children:[e.jsx(gt,{n:"2",done:U==="connected"}),e.jsx("span",{className:"text-sm font-medium text-zinc-200",children:"Send answer to host"})]}),e.jsxs("div",{className:"p-4 space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between mb-1",children:[e.jsx("p",{className:"text-xs text-zinc-500 uppercase tracking-widest",children:"Answer code"}),e.jsx(Oe,{text:he,id:"join-ans",label:"Copy answer",copied:Se["join-ans"],onCopy:De})]}),e.jsx("textarea",{rows:4,readOnly:!0,value:he,className:"w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2.5 text-[11px] font-mono text-zinc-500 resize-none focus:outline-none leading-relaxed"}),e.jsxs("div",{className:`flex items-center gap-2 text-xs px-3 py-2 rounded-lg border 6 ${U==="connected"?"text-white bg-white/5 border-zinc-600":"text-zinc-500 bg-zinc-950 border-zinc-800"}`,children:[e.jsx("span",{className:`w-1.5 h-1.5 rounded-full flex-shrink-0 ${U==="connected"?"bg-white":"bg-zinc-600 animate-pulse"}`}),U==="waitConnect"&&"Waiting for host to connectâ¦",U==="connected"&&"Connected!",U==="failed"&&"Connection failed â try again"]})]})]})]}):e.jsxs("div",{className:"-m-4 md:-m-8 flex flex-col overflow-hidden bg-zinc-950",style:{height:"calc(100svh - 3.5rem)"},children:[e.jsxs("div",{className:"hidden md:flex items-center gap-2 px-2 py-1.5 bg-zinc-900 border-b border-zinc-800 flex-shrink-0 flex-wrap z-10",children:[e.jsx("div",{className:"flex items-center gap-0.5 bg-zinc-950 rounded-lg p-0.5 border border-zinc-800",children:$e.map(({id:t,icon:r,label:s,key:c})=>e.jsxs("button",{onClick:()=>dt(t),title:`${s} (${c})`,className:`w-7 h-7 rounded-md flex items-center justify-center transition-colors relative 7 ${f===t?"bg-zinc-700 text-white":"text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800"}`,children:[e.jsx(r,{className:"w-3.5 h-3.5"}),t==="select"&&e.jsx("span",{className:"absolute -right-1 top-1 bottom-1 w-px bg-zinc-700"})]},t))}),e.jsx("div",{className:"w-px h-5 bg-zinc-800"}),e.jsxs("div",{className:"flex items-center gap-0.5",children:[bt.map(t=>e.jsx("button",{onClick:()=>b(t),title:t,className:`w-4 h-4 rounded-full border transition-all flex-shrink-0 8 ${g===t?"scale-125 border-zinc-300":"border-zinc-700 hover:scale-110"}`,style:{backgroundColor:t}},t)),e.jsx("input",{type:"color",value:g,onChange:t=>b(t.target.value),className:"w-4 h-4 rounded-full border border-zinc-700 cursor-pointer ml-0.5",title:"Custom"})]}),e.jsx("div",{className:"w-px h-5 bg-zinc-800"}),e.jsx("div",{className:"flex items-center gap-0.5 bg-zinc-950 rounded-lg p-0.5 border border-zinc-800",children:pt.map(t=>e.jsx("button",{onClick:()=>R(t),title:`${t}px`,className:`w-7 h-7 rounded-md flex items-center justify-center transition-colors 9 ${j===t?"bg-zinc-700 text-white":"text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800"}`,children:e.jsx("div",{className:"rounded-full bg-current",style:{width:Math.min(t,16),height:Math.min(t,16),opacity:j===t?1:.5}})},t))}),e.jsx("div",{className:"w-px h-5 bg-zinc-800"}),e.jsxs("div",{className:"flex items-center gap-0.5 bg-zinc-950 rounded-lg p-0.5 border border-zinc-800",children:[e.jsx("button",{onClick:ge,title:"Undo (Ctrl+Z)","aria-label":"Undo",disabled:T.length===0,className:"w-7 h-7 rounded-md flex items-center justify-center text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800 disabled:opacity-30 transition-colors",children:e.jsx(u.Undo,{className:"w-3.5 h-3.5"})}),e.jsx("button",{onClick:ae,title:"Redo (Ctrl+Shift+Z)","aria-label":"Redo",disabled:L.length===0,className:"w-7 h-7 rounded-md flex items-center justify-center text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800 disabled:opacity-30 transition-colors",children:e.jsx(u.Redo,{className:"w-3.5 h-3.5"})}),e.jsx("button",{onClick:st,title:"Clear",className:"w-7 h-7 rounded-md flex items-center justify-center text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800 transition-colors",children:e.jsx(u.Trash,{className:"w-3.5 h-3.5"})}),e.jsx("button",{onClick:rt,title:"Export PNG",className:"w-7 h-7 rounded-md flex items-center justify-center text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800 transition-colors",children:e.jsx(u.Download,{className:"w-3.5 h-3.5"})}),e.jsx("button",{onClick:()=>Le(!ne),title:"Grid",className:`w-7 h-7 rounded-md flex items-center justify-center transition-colors 10 ${ne?"bg-zinc-700 text-white":"text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800"}`,children:e.jsx(u.Grid,{className:"w-3.5 h-3.5"})})]}),H&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"w-px h-5 bg-zinc-800"}),e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("span",{className:"text-[10px] text-zinc-600 font-mono px-1",children:"1 selected"}),e.jsx("button",{onClick:le,title:"Delete (Del)",className:"w-7 h-7 rounded-md flex items-center justify-center text-zinc-500 hover:text-red-400 hover:bg-zinc-800 transition-colors bg-zinc-950 border border-zinc-800",children:e.jsx(u.Trash,{className:"w-3.5 h-3.5"})}),e.jsx("button",{onClick:()=>{P(null),v.current=null,$(null)},title:"Deselect (Esc)",className:"w-7 h-7 rounded-md flex items-center justify-center text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800 transition-colors bg-zinc-950 border border-zinc-800",children:e.jsx(u.X,{className:"w-3.5 h-3.5"})})]})]}),e.jsx("div",{className:"flex-1"}),e.jsxs("div",{className:"flex items-center gap-1.5",children:[U==="connected"&&e.jsxs("span",{className:"text-[11px] text-zinc-400 flex items-center gap-1.5 px-2 py-1 rounded border border-zinc-800",children:[e.jsx("span",{className:"w-1.5 h-1.5 rounded-full bg-white"}),"Live"]}),e.jsx("button",{"aria-label":"Open chat",onClick:()=>{W!=="chat"||!ce?(Z(!0),ie("chat")):Z(!1)},className:`w-7 h-7 rounded-lg flex items-center justify-center border transition-colors 11 ${ce&&W==="chat"?"bg-zinc-800 border-zinc-600 text-zinc-200":"border-zinc-800 text-zinc-600 hover:text-zinc-300 hover:border-zinc-700"}`,children:e.jsx(u.Chat,{className:"w-3.5 h-3.5"})}),a!=="join"&&e.jsxs("button",{onClick:()=>{W!=="peers"||!ce?(Z(!0),ie("peers")):Z(!1)},className:`inline-flex items-center gap-1.5 px-2 py-1.5 rounded-lg border text-xs transition-colors 12 ${ce&&W==="peers"?"bg-zinc-800 border-zinc-600 text-zinc-200":"border-zinc-800 text-zinc-600 hover:text-zinc-300 hover:border-zinc-700"}`,children:[e.jsx(u.Users,{className:"w-3.5 h-3.5"}),e.jsx("span",{className:"font-mono",children:Q})]}),e.jsx("button",{"aria-label":"Close",onClick:()=>h("home"),className:"w-7 h-7 rounded-lg flex items-center justify-center border border-zinc-800 text-zinc-600 hover:text-zinc-300 hover:border-zinc-700 transition-colors",children:e.jsx(u.X,{className:"w-3.5 h-3.5"})})]})]}),e.jsxs("div",{className:"flex md:hidden items-center gap-0 bg-zinc-900 border-b border-zinc-800 flex-shrink-0 z-10",style:{height:48},children:[e.jsx("button",{onClick:()=>h("home"),"aria-label":"Close",className:"flex-shrink-0 w-11 h-12 flex items-center justify-center text-zinc-600 active:text-zinc-200 active:bg-zinc-800 transition-colors",children:e.jsx(u.X,{className:"w-4 h-4"})}),e.jsx("div",{className:"w-px h-6 bg-zinc-800 flex-shrink-0"}),e.jsx("div",{className:"flex-1 overflow-x-auto overflow-y-hidden",style:{scrollbarWidth:"none",WebkitOverflowScrolling:"touch"},onTouchStart:t=>t.stopPropagation(),onTouchMove:t=>t.stopPropagation(),children:e.jsx("div",{className:"flex items-center h-12 px-1 gap-0.5 w-max",children:$e.map(({id:t,icon:r,label:s})=>e.jsx("button",{onClick:()=>dt(t),"aria-label":s,className:`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 transition-colors 13 ${f===t?"bg-zinc-700 text-white":"text-zinc-500 active:bg-zinc-800 active:text-zinc-200"}`,children:e.jsx(r,{className:"w-4 h-4"})},t))})}),e.jsx("div",{className:"w-px h-6 bg-zinc-800 flex-shrink-0"}),e.jsx("button",{onClick:()=>X(D==="style"?null:"style"),"aria-label":"Colors & style",className:`flex-shrink-0 w-11 h-12 flex items-center justify-center transition-colors 14 ${D==="style"?"bg-zinc-800":"active:bg-zinc-800"}`,children:e.jsx("div",{className:"w-5 h-5 rounded-full border-2 border-zinc-500 shadow",style:{backgroundColor:g}})}),e.jsx("button",{onClick:ge,disabled:T.length===0,"aria-label":"Undo",className:"flex-shrink-0 w-11 h-12 flex items-center justify-center text-zinc-500 active:text-zinc-200 active:bg-zinc-800 disabled:opacity-30 transition-colors",children:e.jsx(u.Undo,{className:"w-4 h-4"})}),e.jsx("button",{onClick:ae,disabled:L.length===0,"aria-label":"Redo",className:"flex-shrink-0 w-11 h-12 flex items-center justify-center text-zinc-500 active:text-zinc-200 active:bg-zinc-800 disabled:opacity-30 transition-colors",children:e.jsx(u.Redo,{className:"w-4 h-4"})}),e.jsxs("button",{onClick:()=>X(D==="peers"||D==="chat"?null:"peers"),"aria-label":"People & chat",className:`flex-shrink-0 w-11 h-12 flex items-center justify-center relative transition-colors 15 ${D==="peers"||D==="chat"?"bg-zinc-800 text-zinc-200":"text-zinc-500 active:bg-zinc-800 active:text-zinc-200"}`,children:[e.jsx(u.Menu,{className:"w-4 h-4"}),Q>0&&e.jsx("span",{className:"absolute top-2.5 right-2.5 w-2 h-2 rounded-full bg-white"})]})]}),e.jsxs("div",{className:"flex flex-1 min-h-0 overflow-hidden",children:[e.jsxs("div",{className:"flex-1 relative overflow-hidden bg-zinc-950",style:{cursor:Tt},children:[ne&&e.jsx("div",{className:"absolute inset-0 pointer-events-none z-0",style:{backgroundImage:"linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px)",backgroundSize:"40px 40px"}}),e.jsx("canvas",{ref:G,width:k,height:E,className:"absolute inset-0 w-full h-full"}),e.jsx("canvas",{ref:A,width:k,height:E,className:"absolute inset-0 w-full h-full",style:{touchAction:"none"},onMouseDown:tt,onMouseMove:nt,onMouseUp:Pe,onMouseLeave:Pe,onTouchStart:tt,onTouchMove:nt,onTouchEnd:Pe}),at&&!Ie&&e.jsx(Ut,{bbox:at,onMoveStart:Et,onResizeStart:Rt,onDelete:le,isMobile:d,interactive:f==="select"}),Object.entries(kt).map(([t,r])=>
15{if(!xe.width)return null;const s=r.x/k*xe.width,c=r.y/E*xe.height;return e.jsxs("div",{className:"absolute pointer-events-none z-20",style:{left:s,top:c,transform:"translate(-2px,-2px)"},children:[e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",children:e.jsx("path",{d:"M0 0 L14 5 L7 7 L5 14 Z",fill:"white",opacity:"0.9"})}),e.jsx("span",{className:"absolute left-4 top-0 bg-zinc-800 text-white text-[10px] px-1.5 py-0.5 rounded border border-zinc-700 whitespace-nowrap",children:r.label})]},t)}),K&&e.jsx(Wt,{cssX:K.cssX,cssY:K.cssY,color:g,fontSize:Math.max(16,j*5*((xe.width||k)/k)),onCommit:St,onCancel:()=>ue(null)}),S.length===0&&!Ie&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center pointer-events-none select-none",children:e.jsxs("div",{className:"text-center px-6",children:[e.jsx(u.Pen,{className:"w-8 h-8 text-zinc-800 mx-auto mb-3"}),e.jsx("p",{className:"text-zinc-700 text-sm",children:"Start drawing"}),e.jsxs("p",{className:"text-zinc-800 text-xs mt-1 hidden md:block",children:["Stroke auto-selects · ",e.jsx("kbd",{className:"font-mono",children:"V"})," to select · ",e.jsx("kbd",{className:"font-mono",children:"Del"})," to delete"]}),e.jsx("p",{className:"text-zinc-800 text-xs mt-1 md:hidden",children:"Stroke auto-selects after drawing"})]})}),e.jsxs("div",{className:"absolute bottom-2 left-3 hidden md:block pointer-events-none",children:[S.length>0&&!H&&e.jsxs("span",{className:"text-[10px] text-zinc-700 font-mono",children:[S.length," stroke",S.length!==1?"s":""," · V=select · Del=delete"]}),H&&e.jsx("span",{className:"text-[10px] text-zinc-500 font-mono",children:"Drag=move · handles=resize · Del=delete · Esc=deselect"})]}),H&&d&&e.jsx("div",{className:"absolute bottom-3 left-1/2 -translate-x-1/2 pointer-events-none z-20",children:e.jsx("div",{className:"bg-zinc-900/95 border border-zinc-700 rounded-full px-3 py-1.5 text-[11px] text-zinc-400 whitespace-nowrap shadow-lg",children:"Drag to move · handles to resize"})}),H&&d&&e.jsx("div",{className:"absolute top-3 left-1/2 -translate-x-1/2 z-30 pointer-events-auto",children:e.jsxs("div",{className:"flex items-center gap-1.5 bg-zinc-900/95 border border-zinc-700 rounded-xl px-2 py-1.5 shadow-lg",children:[e.jsxs("button",{onClick:le,className:"flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-zinc-800 active:bg-zinc-700 text-zinc-400 active:text-red-400 text-xs font-medium transition-colors",children:[e.jsx(u.Trash,{className:"w-3.5 h-3.5"}),"Delete"]}),e.jsxs("button",{onClick:()=>{P(null),v.current=null,$(null)},className:"flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-zinc-800 active:bg-zinc-700 text-zinc-400 active:text-zinc-200 text-xs font-medium transition-colors",children:[e.jsx(u.X,{className:"w-3.5 h-3.5"}),"Done"]})]})})]}),ce&&e.jsxs("div",{className:"hidden md:flex w-72 bg-zinc-900 border-l border-zinc-800 flex-col flex-shrink-0 overflow-hidden",children:[e.jsxs("div",{className:"flex items-center border-b border-zinc-800 flex-shrink-0",children:[a!=="join"&&e.jsxs("button",{onClick:()=>ie("peers"),className:`flex-1 py-2.5 text-xs font-medium transition-colors relative 16 ${W==="peers"?"text-white":"text-zinc-600 hover:text-zinc-300"}`,children:["People ",Q>0&&`(${Q})`,W==="peers"&&e.jsx("span",{className:"absolute bottom-0 left-0 right-0 h-px bg-white"})]}),e.jsxs("button",{onClick:()=>ie("chat"),className:`flex-1 py-2.5 text-xs font-medium transition-colors relative 17 ${W==="chat"?"text-white":"text-zinc-600 hover:text-zinc-300"}`,children:["Chat",W==="chat"&&e.jsx("span",{className:"absolute bottom-0 left-0 right-0 h-px bg-white"})]}),e.jsx("button",{"aria-label":"Close",onClick:()=>Z(!1),className:"px-3 text-zinc-700 hover:text-zinc-300 transition-colors flex-shrink-0",children:e.jsx(u.X,{className:"w-3.5 h-3.5"})})]}),W==="peers"&&a!=="join"&&e.jsx("div",{className:"flex-1 overflow-y-auto",children:e.jsx(wt,{peers:Ce,activePeer:Ue,setActivePeer:ke,createPeer:ct,applyAnswer:ye,updatePeer:_,shareURL:ot,copiedMap:Se,onCopy:De})}),W==="chat"&&e.jsx("div",{className:"flex-1 overflow-hidden",children:e.jsx(yt,{messages:He,onSend:it})})]})]}),e.jsx("div",{className:"hidden md:flex px-3 py-1 bg-zinc-900 border-t border-zinc-800 items-center gap-4 flex-shrink-0",children:[{key:"V",label:"Select"},{key:"P",label:"Pen"},{key:"E",label:"Eraser"},{key:"R",label:"Rect"},{key:"C",label:"Circle"},{key:"T",label:"Text"},{key:"Ctrl+Z",label:"Undo"},{key:"Ctrl+Shift+Z",label:"Redo"},{key:"Del",label:"Delete"},{key:"Esc",label:"Deselect"}].map(({key:t,label:r})=>e.jsxs("span",{className:"text-[10px] text-zinc-700 flex items-center gap-1 whitespace-nowrap",children:[e.jsx("kbd",{className:"font-mono bg-zinc-800 border border-zinc-700 rounded px-1 text-zinc-500",children:t}),r]},t))}),e.jsx(jt,{open:D==="style",onClose:()=>X(null),title:"Style",children:e.jsxs("div",{className:"px-4 pb-6 pt-1 space-y-5",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-[10px] text-zinc-500 uppercase tracking-widest mb-3",children:"Color"}
17),e.jsxs("div",{className:"grid grid-cols-5 gap-2.5",children:[bt.map(t=>e.jsx("button",{onClick:()=>b(t),className:`h-11 rounded-xl border-2 active:scale-95 transition-all flex items-center justify-center 18 ${g===t?"border-white ring-1 ring-white/30":"border-zinc-700 active:border-zinc-500"}`,style:{backgroundColor:t},children:g===t&&e.jsx(u.Check,{className:"w-4 h-4",style:{color:t==="#000000"||t==="#000"?"#fff":"#000",mixBlendMode:"difference"}})},t)),e.jsxs("label",{className:"h-11 rounded-xl border-2 border-dashed border-zinc-700 flex items-center justify-center cursor-pointer active:scale-95 transition-all overflow-hidden relative",children:[e.jsx("span",{className:"text-[10px] text-zinc-600 font-mono select-none",children:"+"}),e.jsx("input",{type:"color",value:g,onChange:t=>b(t.target.value),className:"absolute inset-0 opacity-0 cursor-pointer w-full h-full"})]})]})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-[10px] text-zinc-500 uppercase tracking-widest mb-3",children:"Stroke width"}),e.jsx("div",{className:"flex items-center gap-2",children:pt.map(t=>e.jsx("button",{onClick:()=>R(t),className:`flex-1 h-11 rounded-xl border flex items-center justify-center active:scale-95 transition-all 19 ${j===t?"bg-zinc-700 border-zinc-500":"border-zinc-800 active:bg-zinc-800"}`,children:e.jsx("div",{className:"rounded-full bg-white",style:{width:Math.min(t,20),height:Math.min(t,20),opacity:j===t?1:.4}})},t))})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-[10px] text-zinc-500 uppercase tracking-widest mb-3",children:"Actions"}),e.jsxs("div",{className:"grid grid-cols-3 gap-2",children:[e.jsxs("button",{onClick:()=>Le(!ne),className:`h-12 rounded-xl border flex flex-col items-center justify-center gap-1 text-[11px] active:scale-95 transition-all 20 ${ne?"bg-zinc-700 border-zinc-500 text-white":"border-zinc-800 text-zinc-500 active:bg-zinc-800"}`,children:[e.jsx(u.Grid,{className:"w-4 h-4"}),"Grid"]}),e.jsxs("button",{onClick:()=>{rt(),X(null)},className:"h-12 rounded-xl border border-zinc-800 flex flex-col items-center justify-center gap-1 text-[11px] text-zinc-500 active:bg-zinc-800 active:text-zinc-200 active:scale-95 transition-all",children:[e.jsx(u.Download,{className:"w-4 h-4"}),"Export"]}),e.jsxs("button",{onClick:()=>{st(),X(null)},className:"h-12 rounded-xl border border-zinc-800 flex flex-col items-center justify-center gap-1 text-[11px] text-zinc-500 active:bg-zinc-800 active:text-red-400 active:scale-95 transition-all",children:[e.jsx(u.Trash,{className:"w-4 h-4"}),"Clear"]})]})]})]})}),e.jsxs(jt,{open:D==="peers"||D==="chat",onClose:()=>X(null),tall:!0,children:[e.jsxs("div",{className:"flex border-b border-zinc-800 mx-4 flex-shrink-0",children:[a!=="join"&&e.jsxs("button",{onClick:()=>X("peers"),className:`flex-1 py-2.5 text-xs font-medium transition-colors relative 21 ${D==="peers"?"text-white":"text-zinc-600"}`,children:["People ",Q>0&&`(${Q})`,D==="peers"&&e.jsx("span",{className:"absolute bottom-0 left-0 right-0 h-px bg-white"})]}),e.jsxs("button",{onClick:()=>X("chat"),className:`flex-1 py-2.5 text-xs font-medium transition-colors relative 22 ${D==="chat"?"text-white":"text-zinc-600"}`,children:["Chat",D==="chat"&&e.jsx("span",{className:"absolute bottom-0 left-0 right-0 h-px bg-white"})]})]}),D==="peers"&&a!=="join"&&e.jsx(wt,{peers:Ce,activePeer:Ue,setActivePeer:ke,createPeer:ct,applyAnswer:ye,updatePeer:_,shareURL:ot,copiedMap:Se,onCopy:De}),D==="chat"&&e.jsx("div",{style:{height:"50svh"},children:e.jsx(yt,{messages:He,onSend:it})})]})]})}export{Jt as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.