webtty 1.11.4 → 1.12.0

package/dist/client-browser.js

@@ -1,3 +1,5 @@
-import{FitAddon as P,init as L,Terminal as W}from"/dist/ghostty-web.js";var m=new RegExp("\x1B\\[(\\d*) q","g");function S(e,t){let o=e.options.cursorStyle,l=e.options.cursorBlink;m.lastIndex=0;let a=m.exec(t);while(a!==null){let i=a[1]===""?0:Number(a[1]);if(!Number.isNaN(i)&&i>=0&&i<=6)e.options.cursorStyle=i===0||i===1||i===2?"block":i===3||i===4?"underline":"bar",e.options.cursorBlink=i===0||i===1||i===3||i===5;a=m.exec(t)}if((e.options.cursorStyle!==o||e.options.cursorBlink!==l)&&e.renderer&&e.wasmTerm)e.renderer.render(e.wasmTerm,!0,e.viewportY)}function v(e,t){if(t&&e.startsWith("\x1B[<32;"))return"\x1B[<35;"+e.slice(6);return e}function E(e,t){return e.startsWith("\x1B[<32;")&&e===t}var x=window.location.pathname.split("/s/")[1]??"main",c=await fetch("/api/config").then((e)=>e.json());document.title=`${x} | webtty`;await L();var n=new W({cols:c.cols,rows:c.rows,cursorStyle:c.cursorStyle,cursorBlink:c.cursorStyleBlink,fontSize:c.fontSize,fontFamily:c.fontFamily,scrollback:Math.ceil(c.scrollback/80),theme:c.theme}),M=new P;n.loadAddon(M);var s=document.getElementById("terminal");if(c.theme?.background)s.style.background=c.theme.background;await n.open(s);function T(){s.style.padding="0",M.fit();let e=s.querySelector("canvas");if(!e)return;let t=Math.max(0,s.clientWidth-e.offsetWidth),o=Math.max(0,s.clientHeight-e.offsetHeight);s.style.paddingLeft=`${Math.floor(t/2)}px`,s.style.paddingRight=`${Math.ceil(t/2)}px`,s.style.paddingTop=`${Math.floor(o/2)}px`,s.style.paddingBottom=`${Math.ceil(o/2)}px`}var p=null;function y(){if(p!==null)return;p=window.requestAnimationFrame(()=>{p=null,T()})}y();new ResizeObserver(()=>y()).observe(s,{box:"border-box"});window.addEventListener("resize",y);document.fonts.ready.then(()=>n.renderer?.remeasureFont());document.addEventListener("visibilitychange",()=>{if(document.visibilityState!=="visible")return;if(n.renderer&&n.wasmTerm)n.renderer.render(n.wasmTerm,!0,n.viewportY)});function D(e){if(e.style.cursor==="text")e.style.cursor="default"}D(s);new MutationObserver((e)=>{for(let t of e)D(t.target)}).observe(s,{attributes:!0,attributeFilter:["style"],subtree:!0});var z=window.location.protocol==="https:"?"wss:":"ws:",r;function C(){let e=`${z}//${window.location.host}/ws/${x}/pty?cols=${n.cols}&rows=${n.rows}`;r=new WebSocket(e);let t="\x1B[2m",o="\x1B[1;33m",l="\x1B[3m",a="\x1B[0m",i=`${t}[${a} ${o}webtty${a} ${t}]${a}`,u=(d)=>`\r
-${i} ${t}${l}${d}${a}\r
-`;r.onopen=()=>{r.send(JSON.stringify({type:"resize",cols:n.cols,rows:n.rows}))},r.onmessage=(d)=>{S(n,d.data),n.write(d.data)},r.onclose=(d)=>{if(d.code===4001){n.write(u("Session removed.")),setTimeout(()=>window.close(),500);return}if(d.code===1001){n.write(u("Server stopped.")),setTimeout(()=>window.close(),500);return}n.write(u("Connection lost. Reconnecting in 2s...")),setTimeout(C,2000)},r.onerror=()=>{n.write(u("WebSocket error."))}}C();var g=0,k=0;n.attachCustomWheelEventHandler((e)=>{if(!n.hasMouseTracking())return!1;let t=n.renderer?.getMetrics();if(!t)return!1;let o=e.deltaY<0?-1:1;if(o!==k)g=0,k=o;g+=c.mouseScrollSpeed;let l=Math.trunc(g);if(l===0)return!0;g-=l;let a=e.target.getBoundingClientRect(),i=Math.max(1,Math.floor((e.clientX-a.left)/t.width)+1),u=Math.max(1,Math.floor((e.clientY-a.top)/t.height)+1),R=`\x1B[<${o<0?64:65};${i};${u}M`;if(r&&r.readyState===WebSocket.OPEN)for(let w=0;w<l;w++)r.send(R);return!0});s.addEventListener("keydown",(e)=>{let t=e.key.toLowerCase(),o=new Set([...e.shiftKey?["shift"]:[],...e.ctrlKey?["ctrl"]:[],...e.altKey?["alt"]:[],...e.metaKey?["meta"]:[]]),l=c.keyboardBindings.find((a)=>{if(a.key.toLowerCase()!==t)return!1;let i=new Set((Array.isArray(a.mods)?a.mods:[]).map((u)=>u.toLowerCase()));if(i.size!==o.size)return!1;for(let u of i)if(!o.has(u))return!1;return!0});if(!l)return;if(e.preventDefault(),e.stopPropagation(),l.chars&&r.readyState===WebSocket.OPEN)r.send(l.chars)},{capture:!0});var f=Math.min(32,Math.max(6,c.fontSize));window.addEventListener("keydown",(e)=>{if(!e.ctrlKey&&!e.metaKey)return;let t=e.code==="Equal"||e.code==="NumpadAdd",o=e.code==="Minus"&&!e.shiftKey||e.code==="NumpadSubtract",l=e.code==="Digit0"&&!e.shiftKey||e.code==="Numpad0";if(!t&&!o&&!l)return;if(e.preventDefault(),e.stopPropagation(),t)f=Math.min(32,f+1);else if(o)f=Math.max(6,f-1);else f=Math.min(32,Math.max(6,c.fontSize));n.options.fontSize=f,T()},{capture:!0});var b=!1,h="";s.addEventListener("mousemove",(e)=>{if(b=n.hasMouseTracking()&&e.buttons===0,b)h=""},{capture:!0});n.onData((e)=>{let t=v(e,b);if(t!==e){if(r&&r.readyState===WebSocket.OPEN)r.send(t);return}if(E(e,h))return;if(h=e.startsWith("\x1B[<32;")?e:"",r&&r.readyState===WebSocket.OPEN)r.send(e)});n.onResize(({cols:e,rows:t})=>{if(r&&r.readyState===WebSocket.OPEN)r.send(JSON.stringify({type:"resize",cols:e,rows:t}))});if(c.copyOnSelect)n.onSelectionChange(()=>{let e=n.getSelection();if(!e)return;navigator.clipboard.writeText(e).catch(()=>{})});if(c.rightClickBehavior==="copyPaste")s.addEventListener("contextmenu",(e)=>{let t=n.getSelection();if(!t)return;e.preventDefault(),navigator.clipboard.writeText(t).catch(()=>{}),n.clearSelection()});s.addEventListener("paste",(e)=>{let t=e.clipboardData;if(!t)return;let o=t.getData("text/plain");if(!o){if(e.preventDefault(),e.stopImmediatePropagation(),r&&r.readyState===WebSocket.OPEN)r.send("\x16");return}e.preventDefault(),e.stopImmediatePropagation();let l=n.getMode(2004)?`\x1B[200~${o}\x1B[201~`:o;if(r&&r.readyState===WebSocket.OPEN)r.send(l)},{capture:!0});
+import{FitAddon as be,init as we,Terminal as ve}from"/dist/ghostty-web.js";var P=new RegExp("\x1B\\[(\\d*) q","g");function X(e,t){let i=e.options.cursorStyle,n=e.options.cursorBlink;P.lastIndex=0;let s=P.exec(t);while(s!==null){let r=s[1]===""?0:Number(s[1]);if(!Number.isNaN(r)&&r>=0&&r<=6)e.options.cursorStyle=r===0||r===1||r===2?"block":r===3||r===4?"underline":"bar",e.options.cursorBlink=r===0||r===1||r===3||r===5;s=P.exec(t)}if((e.options.cursorStyle!==i||e.options.cursorBlink!==n)&&e.renderer&&e.wasmTerm)e.renderer.render(e.wasmTerm,!0,e.viewportY)}var G=new RegExp("[\x1B\x18\x1A]","g");class S{maxBytes;state="text";parts=[];head="";size=0;overflow=!1;constructor(e=67108864){this.maxBytes=e}feed(e){let t=[],i="",n=0;while(n<e.length)if(this.state==="text"){let s=e.indexOf("\x1B",n);if(s<0){i+=e.slice(n);break}i+=e.slice(n,s),n=s+1,this.state="esc"}else if(this.state==="esc")if(e[n]==="_"){if(i)t.push({type:"text",text:i});i="",this.begin(),n++}else i+="\x1B",this.state="text";else if(this.state==="apc"){G.lastIndex=n;let s=G.exec(e),r=s?s.index:e.length;if(this.append(e.slice(n,r)),n=r,s)if(n++,s[0]==="\x1B")this.state="apc-esc";else this.reset()}else if(e[n]==="\\")t.push(this.overflow?{type:"apc",body:this.head,overflow:!0}:{type:"apc",body:this.parts.join("")}),this.reset(),n++;else this.reset(),this.state="esc";if(i)t.push({type:"text",text:i});return t}begin(){this.reset(),this.state="apc"}append(e){if(!e)return;if(this.head.length<4096)this.head+=e.slice(0,4096-this.head.length);if(this.overflow)return;if(this.size+=e.length,this.size>this.maxBytes){this.overflow=!0,this.parts=[];return}this.parts.push(e)}reset(){this.state="text",this.parts=[],this.head="",this.size=0,this.overflow=!1}}function V(e){if(e[0]!=="G")return null;let t=e.indexOf(";"),i=t<0?e.slice(1):e.slice(1,t),n=t<0?"":e.slice(t+1),s={};for(let r of i.split(",")){let a=r.indexOf("=");if(a>0)s[r.slice(0,a)]=r.slice(a+1)}return{keys:s,payload:n}}var x=67108864;class E{maxBytes;pending=null;discarding=null;constructor(e=x){this.maxBytes=e}reject(e){let t=this.pending?.keys??this.discarding??e.keys;if(this.pending=null,e.keys.m==="1")return this.discarding=t,null;return this.discarding=null,{keys:t,data:"",tooBig:!0}}push(e){let t=e.keys.m==="1";if(this.discarding){if(t)return null;let s=this.discarding;return this.discarding=null,{keys:s,data:"",tooBig:!0}}let i=(this.pending?.size??0)+e.payload.length;if(i>this.maxBytes){let s=this.pending?.keys??e.keys;if(this.pending=null,t)return this.discarding=s,null;return{keys:s,data:"",tooBig:!0}}if(!this.pending){if(!t)return{keys:e.keys,data:e.payload};return this.pending={keys:e.keys,parts:[e.payload],size:i},null}if(this.pending.parts.push(e.payload),this.pending.size=i,t)return null;let n={keys:this.pending.keys,data:this.pending.parts.join("")};return this.pending=null,n}}function u(e,t,i=0){let n=Number(e[t]);return e[t]!==void 0&&Number.isFinite(n)?n:i}function K(e,t,i){if(e.i===void 0&&e.I===void 0)return null;let n=u(e,"q");if(n===2||n===1&&!i)return null;let s=[`i=${t}`];if(e.I!==void 0)s.push(`I=${e.I}`);if(e.p!==void 0)s.push(`p=${e.p}`);let r=i?`${i.code}:${i.message}`:"OK";return`\x1B_G${s.join(",")};${r}\x1B\\`}var U=[137,80,78,71,13,10,26,10];function N(e){if(e.length<24)return null;for(let s=0;s<U.length;s++)if(e[s]!==U[s])return null;let t=(s)=>(e[s]<<24|e[s+1]<<16|e[s+2]<<8|e[s+3])>>>0;if(t(8)!==13)return null;if(t(12)!==1229472850)return null;let i=t(16),n=t(20);if(i===0||n===0||i>2147483647||n>2147483647)return null;return{width:i,height:n}}function j(e){if(e.length<32)return null;let t;try{t=atob(e.slice(0,32))}catch{return null}return N(Uint8Array.from(t,(i)=>i.charCodeAt(0)))}var le=new RegExp("\x1B\\[[23]J|\x1B\\[\\?(?:1049|1047|47)[hl]|\x1Bc");function he(e){return le.test(e)}var L=new RegExp("\x1B\\[(14|16|18)t","g");function ue(e){let t=[];L.lastIndex=0;for(let i=L.exec(e);i!==null;i=L.exec(e))t.push(Number(i[1]));return t}function I(e,t){return Math.max(1,Math.round(e*t))}function R(e,t){return e>0?I(e,t)/e:t}var de=new RegExp("\x1B(?:\\[[0-9;?]{0,16})?$");class T{carry="";scan(e){let t=this.carry+e,i=de.exec(t);return this.carry=i?i[0]:"",{clears:he(t),queries:ue(t)}}}function J(e,t){let i=Math.round(t.cols*t.cellWidth),n=Math.round(t.rows*t.cellHeight);if(e===14)return`\x1B[4;${n};${i}t`;if(e===16)return`\x1B[6;${Math.round(t.cellHeight)};${Math.round(t.cellWidth)}t`;return`\x1B[8;${t.rows};${t.cols}t`}function z(e,t,i,n){let s=u(e,"c"),r=u(e,"r"),{width:a,height:c}=t;if(s&&r)return{cols:s,rows:r};if(s)return{cols:s,rows:v(s*i*c/a,n)};if(r)return{cols:v(r*n*a/c,i),rows:r};return{cols:v(a,i),rows:v(c,n)}}function v(e,t){return Math.max(1,Math.ceil(e/t-0.000001))}var me={maxImages:256,maxImagePixels:33554432,maxTotalBytes:536870912,maxTransmissionBytes:x},fe=1073741824;class p extends Error{code;constructor(e,t){super(t);this.code=e}}function pe(e){let t=atob(e),i=new Uint8Array(t.length);for(let n=0;n<t.length;n++)i[n]=t.charCodeAt(n);return i}async function ge(e,t){let i=new Blob([e]).stream().pipeThrough(new DecompressionStream("deflate")).getReader(),n=[],s=0;for(;;){let{done:c,value:o}=await i.read();if(c)break;if(s+=o.length,s>t)throw await i.cancel(),new p("EINVAL","decompressed data too large");n.push(o)}let r=new Uint8Array(s),a=0;for(let c of n)r.set(c,a),a+=c.length;return r}async function ye(e,t,i){let n=u(e,"f",32),s=u(e,"s"),r=u(e,"v"),a=n===24?3:4,c=pe(t);if(e.o==="z")c=await ge(c,n===100?x:s*r*a);if(n===100){let m=N(c);if(!m)throw new p("EINVAL","not a PNG");if(m.width*m.height>i)throw new p("EINVAL","image too large");return createImageBitmap(new Blob([c],{type:"image/png"}))}if(c.length<s*r*a)throw new p("ENODATA","not enough pixel data");let o=new Uint8ClampedArray(s*r*4);if(n===32)o.set(c.subarray(0,s*r*4));else for(let m=0,d=0;d<o.length;m+=3,d+=4)o[d]=c[m],o[d+1]=c[m+1],o[d+2]=c[m+2],o[d+3]=255;return createImageBitmap(new ImageData(o,s,r))}class O{term;container;send;splitter;assembler;scanner=new T;images=new Map;totalBytes=0;inFlightBytes=0;placements=new Map;anonymousId=0;generation=0;limits;overlay;dirty=!1;lastSignature="";constructor(e,t,i,n={}){this.term=e;this.container=t;this.send=i;this.limits={...me,...n},this.splitter=new S(this.limits.maxTransmissionBytes),this.assembler=new E(this.limits.maxTransmissionBytes),this.overlay=document.createElement("canvas"),this.overlay.dataset.kitty="",this.overlay.style.cssText="position:absolute;pointer-events:none;",t.appendChild(this.overlay),requestAnimationFrame(this.tick),document.addEventListener("visibilitychange",()=>{if(document.visibilityState==="visible")this.invalidate()})}invalidate(){this.dirty=!0,this.lastSignature=""}reset(){this.generation++,this.splitter=new S(this.limits.maxTransmissionBytes),this.assembler=new E(this.limits.maxTransmissionBytes),this.scanner=new T,this.dropImages(),this.clear()}feed(e){for(let t of this.splitter.feed(e))if(t.type==="text")this.writeText(t.text);else this.handleApc(t.body,t.overflow)}writeText(e){this.term.write(e);let{clears:t,queries:i}=this.scanner.scan(e);if(t)this.clear();for(let n of i)this.send(J(n,this.terminalSize()))}handleApc(e,t=!1){let i=V(e);if(!i)return;let n=t?this.assembler.reject(i):this.assembler.push(i);if(!n)return;let s=n.keys.a??"t";try{if(n.tooBig)throw new p("EINVAL","transmission too large");if(s==="q")this.query(n);else if(s==="t"||s==="T")this.transmit(n,s==="T");else if(s==="p"){let r=this.requireImage(n.keys);this.place(n.keys,r),this.reply(n.keys,r)}else if(s==="d")this.delete(n.keys)}catch(r){this.replyError(n.keys,r)}}imageIdOf(e){if(e.i!==void 0)return u(e,"i");if(e.I!==void 0)return fe+u(e,"I");return 0}requireImage(e){let t=this.imageIdOf(e);if(!this.images.has(t))throw new p("ENOENT","no such image");return t}assertSupported(e){let t=e.t??"d";if(t!=="d")throw new p("EINVAL",`unsupported transmission medium t=${t}`);let i=u(e,"f",32);if(i!==24&&i!==32&&i!==100)throw new p("EINVAL",`unsupported format f=${i}`)}query(e){this.assertSupported(e.keys),this.reply(e.keys,this.imageIdOf(e.keys))}assertWithinLimits(e,t){if(u(e,"f",32)!==100){let{width:i,height:n}=t;if(!Number.isInteger(i)||!Number.isInteger(n)||i<=0||n<=0)throw new p("EINVAL","raw image needs positive integer s and v")}if(t.width*t.height>this.limits.maxImagePixels)throw new p("EINVAL","image too large")}transmit(e,t){this.assertSupported(e.keys);let i=this.dimensions(e);if(this.assertWithinLimits(e.keys,i),t)this.assertCursorMovable(e.keys,i);let n=i.width&&i.height,s=e.data.length+(n?i.width*i.height:this.limits.maxImagePixels)*4;if(!this.enforceBudget(!1,s))throw new p("EINVAL","too many images being decoded");let r=this.imageIdOf(e.keys),a=r||--this.anonymousId,c=this.generation;this.removePlacements((d)=>d.imageId===a);let o=this.images.get(a)??{width:0,height:0,bytes:0,latest:0,applied:0};this.images.delete(a),this.images.set(a,o),o.width=i.width,o.height=i.height,this.evict();let m=++o.latest;if(t)this.place(e.keys,a);this.inFlightBytes+=s,ye(e.keys,e.data,this.limits.maxImagePixels).then((d)=>{if(this.inFlightBytes-=s,c!==this.generation){d.close();return}if(this.images.get(a)!==o){d.close(),this.replyError(e.keys,new p("EINVAL","image was removed before it finished decoding"));return}if(m<=o.applied){d.close(),this.reply(e.keys,r?a:0);return}if(o.bitmap?.close(),o.bitmap=d,o.applied=m,m===o.latest)o.width=d.width,o.height=d.height;let y=d.width*d.height*4;this.totalBytes+=y-o.bytes,o.bytes=y,this.enforceBudget(),this.dirty=!0,this.reply(e.keys,r?a:0)},(d)=>{if(this.inFlightBytes-=s,c!==this.generation)return;if(this.images.get(a)===o&&m===o.latest){if(this.removePlacements((y)=>y.imageId===a),!o.bitmap)this.dropImage(a)}this.replyError(e.keys,d)})}dimensions(e){if(u(e.keys,"f",32)!==100)return{width:u(e.keys,"s"),height:u(e.keys,"v")};if(e.keys.o==="z")return{width:0,height:0};let t=j(e.data);if(!t)throw new p("EINVAL","not a PNG");return t}assertCursorMovable(e,t){if(u(e,"C")===1||t.width&&t.height)return;throw new p("EINVAL","size of a compressed PNG is unknown until decoded: use C=1")}place(e,t){let i=this.images.get(t)??{width:0,height:0};this.assertCursorMovable(e,i);let n=this.term.buffer.active,s=this.cell(),r=this.scale(),a={imageId:t,placementId:u(e,"p"),absRow:this.scrollbackLength()+n.cursorY,col:n.cursorX,srcX:u(e,"x"),srcY:u(e,"y"),srcW:u(e,"w"),srcH:u(e,"h"),offX:u(e,"X"),offY:u(e,"Y"),scale:r};if(e.c!==void 0)a.cols=u(e,"c");if(e.r!==void 0)a.rows=u(e,"r");if(this.placements.set(`${t}:${a.placementId}`,a),this.dirty=!0,u(e,"C")===1)return;let c={width:(a.srcW||Math.max(1,i.width-a.srcX))/r.x,height:(a.srcH||Math.max(1,i.height-a.srcY))/r.y},o=z(e,c,s.width,s.height);this.term.write(`${`
+`.repeat(o.rows-1)}\x1B[${a.col+o.cols+1}G`)}delete(e){let t=e.d??"a";if(t==="a"||t==="A"){if(this.removePlacements(()=>!0),t==="A")this.dropImages()}else if(t==="i"||t==="I"){let i=this.imageIdOf(e),n=e.p!==void 0?u(e,"p"):void 0;if(this.removePlacements((s)=>s.imageId===i&&(n===void 0||s.placementId===n)),t==="I")this.dropImage(i)}}removePlacements(e){for(let[t,i]of this.placements){if(!e(i))continue;this.placements.delete(t),this.dirty=!0}}dropImage(e){let t=this.images.get(e);if(!t)return;t.bitmap?.close(),this.totalBytes-=t.bytes,this.images.delete(e),this.removePlacements((i)=>i.imageId===e)}dropImages(){for(let e of[...this.images.keys()])this.dropImage(e)}clear(){this.placements.clear(),this.dirty=!0}evict(){while(this.images.size>this.limits.maxImages)this.dropImage(this.images.keys().next().value)}enforceBudget(e=!0,t=0){let i=()=>this.totalBytes+this.inFlightBytes+t<=this.limits.maxTotalBytes,n=[...this.images.keys()];if(e)n.pop();for(let s of n){if(i())return!0;this.dropImage(s)}return i()}reply(e,t){let i=K(e,t);if(i)this.send(i)}replyError(e,t){let i=t instanceof p?t.code:"EBADF",n=t instanceof Error?t.message:"decode failed",s=K(e,this.imageIdOf(e),{code:i,message:n});if(s)this.send(s)}scale(){let e=this.cell(),t=window.devicePixelRatio||1;return{x:R(e.width,t),y:R(e.height,t)}}cell(){let e=this.term.renderer?.getMetrics();return{width:e?.width??8,height:e?.height??16}}terminalSize(){let e=this.cell(),t=window.devicePixelRatio||1;return{cols:this.term.cols,rows:this.term.rows,cellWidth:I(e.width,t),cellHeight:I(e.height,t)}}scrollbackLength(){let e=this.term.wasmTerm;if(!e||e.isAlternateScreen())return 0;return e.getScrollbackLength()}terminalCanvas(){return this.container.querySelector("canvas:not([data-kitty])")}tick=()=>{if(requestAnimationFrame(this.tick),this.placements.size===0&&!this.overlay.width)return;let e=this.terminalCanvas();if(!e)return;let t=this.cell(),i=[this.scrollbackLength(),this.term.viewportY,t.width,t.height,e.offsetLeft,e.offsetTop,e.offsetWidth,e.offsetHeight,window.devicePixelRatio].join("|");if(!this.dirty&&i===this.lastSignature)return;this.dirty=!1,this.lastSignature=i,this.draw(e,t)};draw(e,t){let i=window.devicePixelRatio||1,{offsetWidth:n,offsetHeight:s}=e,r=this.overlay;if(r.width!==Math.round(n*i)||r.height!==Math.round(s*i))r.width=Math.round(n*i),r.height=Math.round(s*i);r.style.left=`${e.offsetLeft}px`,r.style.top=`${e.offsetTop}px`,r.style.width=`${n}px`,r.style.height=`${s}px`;let a=r.getContext("2d");if(!a)return;a.setTransform(i,0,0,i,0,0),a.clearRect(0,0,n,s);let c=this.scrollbackLength()-this.term.viewportY;for(let o of this.placements.values()){let m=this.images.get(o.imageId)?.bitmap;if(!m)continue;let{srcX:d,srcY:y}=o,C=o.srcW||m.width-d,A=o.srcH||m.height-y,w=o.cols!==void 0||o.rows!==void 0?z({c:String(o.cols??0),r:String(o.rows??0)},{width:C/o.scale.x,height:A/o.scale.y},t.width,t.height):null,Y=w?w.cols*t.width:C/o.scale.x,q=w?w.rows*t.height:A/o.scale.y,B=o.col*t.width+o.offX/o.scale.x,M=(o.absRow-c)*t.height+o.offY/o.scale.y;if(M+q<0||M>s||B+Y<0||B>n)continue;a.drawImage(m,d,y,C,A,B,M,Y,q)}}}function Q(e,t){if(t&&e.startsWith("\x1B[<32;"))return"\x1B[<35;"+e.slice(6);return e}function Z(e,t){return e.startsWith("\x1B[<32;")&&e===t}var ie=window.location.pathname.split("/s/")[1]??"main",g=await fetch("/api/config").then((e)=>e.json());document.title=`${ie} | webtty`;await we();var h=new ve({cols:g.cols,rows:g.rows,cursorStyle:g.cursorStyle,cursorBlink:g.cursorStyleBlink,fontSize:g.fontSize,fontFamily:g.fontFamily,scrollback:Math.ceil(g.scrollback/80),theme:g.theme}),ne=new be;h.loadAddon(ne);var f=document.getElementById("terminal");if(g.theme?.background)f.style.background=g.theme.background;await h.open(f);function se(){f.style.padding="0",ne.fit();let e=f.querySelector("canvas");if(!e)return;let t=Math.max(0,f.clientWidth-e.offsetWidth),i=Math.max(0,f.clientHeight-e.offsetHeight);f.style.paddingLeft=`${Math.floor(t/2)}px`,f.style.paddingRight=`${Math.ceil(t/2)}px`,f.style.paddingTop=`${Math.floor(i/2)}px`,f.style.paddingBottom=`${Math.ceil(i/2)}px`}var D=null;function _(){if(D!==null)return;D=window.requestAnimationFrame(()=>{D=null,se()})}_();new ResizeObserver(()=>_()).observe(f,{box:"border-box"});window.addEventListener("resize",_);document.fonts.ready.then(()=>h.renderer?.remeasureFont());document.addEventListener("visibilitychange",()=>{if(document.visibilityState!=="visible")return;if(h.renderer&&h.wasmTerm)h.renderer.render(h.wasmTerm,!0,h.viewportY)});function re(e){if(e.style.cursor==="text")e.style.cursor="default"}re(f);new MutationObserver((e)=>{for(let t of e)re(t.target)}).observe(f,{attributes:!0,attributeFilter:["style"],subtree:!0});var Se=window.location.protocol==="https:"?"wss:":"ws:",l,ee=new O(h,f,(e)=>{if(l&&l.readyState===WebSocket.OPEN)l.send(e)});function oe(){let e=`${Se}//${window.location.host}/ws/${ie}/pty?cols=${h.cols}&rows=${h.rows}`;l=new WebSocket(e);let t="\x1B[2m",i="\x1B[1;33m",n="\x1B[3m",s="\x1B[0m",r=`${t}[${s} ${i}webtty${s} ${t}]${s}`,a=(c)=>`\r
+${r} ${t}${n}${c}${s}\r
+`;l.onopen=()=>{ee.reset(),l.send(JSON.stringify({type:"resize",cols:h.cols,rows:h.rows}))},l.onmessage=(c)=>{X(h,c.data),ee.feed(c.data)},l.onclose=(c)=>{if(c.code===4001){h.write(a("Session removed.")),setTimeout(()=>window.close(),500);return}if(c.code===1001){h.write(a("Server stopped.")),setTimeout(()=>window.close(),500);return}h.write(a("Connection lost. Reconnecting in 2s...")),setTimeout(oe,2000)},l.onerror=()=>{h.write(a("WebSocket error."))}}oe();var k=0,te=0;h.attachCustomWheelEventHandler((e)=>{if(!h.hasMouseTracking())return!1;let t=h.renderer?.getMetrics();if(!t)return!1;let i=e.deltaY<0?-1:1;if(i!==te)k=0,te=i;k+=g.mouseScrollSpeed;let n=Math.trunc(k);if(n===0)return!0;k-=n;let s=e.target.getBoundingClientRect(),r=Math.max(1,Math.floor((e.clientX-s.left)/t.width)+1),a=Math.max(1,Math.floor((e.clientY-s.top)/t.height)+1),o=`\x1B[<${i<0?64:65};${r};${a}M`;if(l&&l.readyState===WebSocket.OPEN)for(let m=0;m<n;m++)l.send(o);return!0});function ae(e){let t=e.key.toLowerCase(),i=new Set([...e.shiftKey?["shift"]:[],...e.ctrlKey?["ctrl"]:[],...e.altKey?["alt"]:[],...e.metaKey?["meta"]:[]]);return g.keyboardBindings.find((n)=>{if(n.key.toLowerCase()!==t)return!1;let s=new Set((Array.isArray(n.mods)?n.mods:[]).map((r)=>r.toLowerCase()));if(s.size!==i.size)return!1;for(let r of s)if(!i.has(r))return!1;return!0})}f.addEventListener("keydown",(e)=>{let t=ae(e);if(!t)return;if(e.preventDefault(),e.stopPropagation(),t.chars&&l.readyState===WebSocket.OPEN)l.send(t.chars)},{capture:!0});var b=Math.min(32,Math.max(6,g.fontSize));window.addEventListener("keydown",(e)=>{if(!e.ctrlKey&&!e.metaKey)return;let t=e.code==="Equal"||e.code==="NumpadAdd",i=e.code==="Minus"&&!e.shiftKey||e.code==="NumpadSubtract",n=e.code==="Digit0"&&!e.shiftKey||e.code==="Numpad0";if(!t&&!i&&!n)return;if(e.preventDefault(),e.stopPropagation(),t)b=Math.min(32,b+1);else if(i)b=Math.max(6,b-1);else b=Math.min(32,Math.max(6,g.fontSize));h.options.fontSize=b,se()},{capture:!0});var W=!1,F="";f.addEventListener("mousemove",(e)=>{if(W=h.hasMouseTracking()&&e.buttons===0,W)F=""},{capture:!0});h.onData((e)=>{let t=Q(e,W);if(t!==e){if(l&&l.readyState===WebSocket.OPEN)l.send(t);return}if(Z(e,F))return;if(F=e.startsWith("\x1B[<32;")?e:"",l&&l.readyState===WebSocket.OPEN)l.send(e)});h.onResize(({cols:e,rows:t})=>{if(l&&l.readyState===WebSocket.OPEN)l.send(JSON.stringify({type:"resize",cols:e,rows:t}))});if(g.copyOnSelect)h.onSelectionChange(()=>{let e=h.getSelection();if(!e)return;navigator.clipboard.writeText(e).catch(()=>{})});if(g.rightClickBehavior==="copyPaste")f.addEventListener("contextmenu",(e)=>{let t=h.getSelection();if(!t)return;e.preventDefault(),navigator.clipboard.writeText(t).catch(()=>{}),h.clearSelection()});function H(){if(l&&l.readyState===WebSocket.OPEN)l.send("\x16")}function ce(e){if(!e){H();return}if(!e.includes(`
+`)){if(l&&l.readyState===WebSocket.OPEN)l.send(e);return}if(!h.getMode(2004)){H();return}if(l&&l.readyState===WebSocket.OPEN)l.send(`\x1B[200~${e}\x1B[201~`)}f.addEventListener("keydown",(e)=>{if(!e.ctrlKey||e.metaKey||e.code!=="KeyV")return;if(ae(e))return;if(!navigator.clipboard?.readText)return;e.preventDefault(),e.stopImmediatePropagation(),navigator.clipboard.readText().then(ce,H)},{capture:!0});f.addEventListener("paste",(e)=>{let t=e.clipboardData;if(!t)return;e.preventDefault(),e.stopImmediatePropagation(),ce(t.getData("text/plain"))},{capture:!0});

package/dist/client.css

@@ -13,6 +13,10 @@ body,
   background: #000;
 }
 
+#terminal {
+  position: relative;
+}
+
 #terminal canvas {
   display: block;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webtty",
-  "version": "1.11.4",
+  "version": "1.12.0",
   "description": "Web TTY for running CLI/TUI applications in a browser tab, across platforms",
   "license": "MIT",
   "bin": {