@hazem3500/palette 0.9.111 → 0.9.112

package/dist/setup.js

@@ -1 +1 @@
-import{a as n,d as o}from"./chunk-DDYHX4RZ.js";import"./chunk-KLPQTFVH.js";import"./chunk-RBHY7UDS.js";import"./chunk-LMXFSXO6.js";import"./chunk-DU7H4TEX.js";import"./chunk-5HZI7HRR.js";import"./chunk-2BS2OWWH.js";import"./chunk-J47R52WX.js";import"./chunk-VX6XCU4E.js";import"./chunk-4HBBEVFK.js";function r(r){return(t={})=>o(n({...r,...t}))}var t=r;export{t as defineKomo,r as definePalette};
+import{a as n,d as o}from"./chunk-CF4GJN3B.js";import"./chunk-KLPQTFVH.js";import"./chunk-RBHY7UDS.js";import"./chunk-LMXFSXO6.js";import"./chunk-DU7H4TEX.js";import"./chunk-5HZI7HRR.js";import"./chunk-2BS2OWWH.js";import"./chunk-J47R52WX.js";import"./chunk-VX6XCU4E.js";import"./chunk-4HBBEVFK.js";function r(r){return(t={})=>o(n({...r,...t}))}var t=r;export{t as defineKomo,r as definePalette};

package/dist/{snapshot-3PSQKXUV.js → snapshot-YYM5GW6I.js}

@@ -1 +1 @@
-var e="data-palette-no-snapshot",t=`[${e}],[data-komo-no-snapshot]`,a=e=>e.matches(t),n="[data-branch-comments],[data-palette-move-clone],[data-palette-viewport],[data-palette-snapshot-sandbox]",r="[redacted]",o=new Set(["script","noscript","template","style","link","meta","base","title"]),i=/^(?:href|src|action|formaction|xlink:href|poster|data|background)$/i,l=e=>"textarea"===e.localName||"input"===e.localName&&!/^(?:button|submit|reset|image|checkbox|radio|range|color)$/i.test(e.getAttribute("type")??""),s=2e4,c=200,h=500,d=(e,t)=>e.length>t?`${e.slice(0,t-1)}…`:e,u=e=>(new TextEncoder).encode(e).length,m=e=>!!e.closest(`${t},${n}`);function f(e,t=1/0){for(let{name:a,value:n}of[...e.attributes])/^on/i.test(a)||"srcdoc"===a||/^data-(palette|komo)-/.test(a)&&!/-no-snapshot$/.test(a)||i.test(a)&&/^\s*(?:javascript|vbscript):/i.test(n)?e.removeAttribute(a):n.length>t&&e.setAttribute(a,d(n,t))}function p(e,t,i=s){let c=e.ownerDocument,h=i,m=e=>{if(3===e.nodeType){let t=d(e.nodeValue??"",500);return h-=t.length,c.createTextNode(t)}if(1!==e.nodeType)return null;let i=e;if(o.has(i.localName)||i.matches(n))return null;let s=i.cloneNode(!1);if(f(s,200),l(i)&&function(e,t){let a=e.value??e.getAttribute("value")??"";"textarea"===e.localName?t.textContent=a?r:"":(a||t.hasAttribute("value"))&&t.setAttribute("value",r)}(i,s),h-=s.outerHTML.length,a(i))return s;if(t?.(i))return l(i)||(s.textContent=r),s;if("textarea"===i.localName)return s;for(let e of i.childNodes){if(h<=0){s.append(c.createComment(" trimmed "));break}let t=m(e);t&&s.append(t)}return s},p=m(e);if(!p)return"";let g=p.outerHTML;if(u(g)<=i)return g;let w=c.createComment(" trimmed ");p.append(w);for(let e=u(p.outerHTML)-i;e>0&&p.firstChild!==w;e=u(p.outerHTML)-i)for(;e>0&&p.firstChild!==w;){let t=w.previousSibling;for(;t.lastChild;)t=t.lastChild;e-=1===t.nodeType?t.outerHTML.length:(t.nodeValue?.length??0)+7,t.parentNode.removeChild(t)}return g=p.outerHTML,u(g)>i?"":g}var g=class extends Error{constructor(e){super(e),this.reason=e}reason},w=25e4,y=e=>new Promise((t,a)=>{let n=new FileReader;n.onload=()=>t(n.result),n.onerror=()=>a(n.error),n.readAsDataURL(e)});async function b(e,t){if(e.startsWith("data:"))return e;let a=new URL(e,t.document.baseURI);try{let e=await fetch(a,{mode:"cors",signal:AbortSignal.timeout(5e3)});return e.ok?await y(await e.blob()):""}catch{if(a.origin!==t.location.origin)throw new g("cross-origin");return""}}function x(e,t,a){let n="";for(let r=0;r<e.length;r++){let o=e[r];if(o.startsWith("--"))continue;let i=e.getPropertyValue(o);(i!==t.get(o)||a&&i!==a.getPropertyValue(o))&&(n+=`${o}:${i};`)}return n}var v=/url\((['"]?)(.*?)\1\)/g;async function $(e,t,i){let s=e.ownerDocument,c=s.defaultView,h=e.getBoundingClientRect(),d=e.offsetWidth??h.width,u=Math.min(e.offsetHeight??h.height,2e3);if(!d||!u)throw new g("failed");let m=function(){let e=document.createElement("iframe");e.setAttribute("data-palette-snapshot-sandbox",""),e.setAttribute("aria-hidden","true"),e.tabIndex=-1,e.style.cssText="position:fixed;left:-10px;top:0;width:1px;height:1px;border:0;opacity:0;pointer-events:none",document.documentElement.append(e);let t=e.contentDocument;try{t.open(),t.write("<!doctype html><html><head></head><body></body></html>"),t.close()}catch{}let a=new Map;return{of(e){let n=`${e.namespaceURI} ${e.localName}`,r=a.get(n);if(!r){let o=t.createElementNS(e.namespaceURI,e.localName);(t.body??t.documentElement).append(o);let i=t.defaultView.getComputedStyle(o);r=new Map;for(let e=0;e<i.length;e++)r.set(i[e],i.getPropertyValue(i[e]));o.remove(),a.set(n,r)}return r},dispose:()=>e.remove()}}(),p=[],w=new Set,y=new Map,$=[],M="",C=0,T=e=>(e.catch(()=>{}),e),A=e=>{for(let[,,t]of e.matchAll(v))t&&!t.startsWith("data:")&&!y.has(t)&&y.set(t,T(b(t,c)));return e},E=(e,h)=>{if(3===e.nodeType)return s.createTextNode(e.nodeValue??"");if(1!==e.nodeType)return null;let y=e,v=y.localName;if(o.has(v)||y.matches(n))return null;if(++C>3e3)throw new g("too-large");let I,L=c.getComputedStyle(y);if("none"===L.display)return null;if("canvas"===v||"video"===v){I=s.createElement("img");let e=document.createElement("canvas");e.width=y.width||y.videoWidth||1,e.height=y.height||y.videoHeight||1;try{e.getContext("2d").drawImage(y,0,0,e.width,e.height),I.setAttribute("src",e.toDataURL("image/png"))}catch{throw new g("cross-origin")}}else if("iframe"===v||"embed"===v||"object"===v)I=s.createElement("div");else{I=y.cloneNode(!1),f(I);for(let e of["id","class","srcset","sizes","loading","style"])I.removeAttribute(e)}l(y)&&(I.removeAttribute("value"),I.hasAttribute("placeholder")&&t?.(y)&&I.setAttribute("placeholder",r)),"img"===v&&p.push(T(async function(e,t,a){let n=e.currentSrc||e.src;if(!n||n.startsWith("data:"))return n;await e.decode().catch(()=>{});let r=Math.min(e.naturalWidth,Math.ceil(e.offsetWidth*t)||e.naturalWidth),o=Math.round(r*e.naturalHeight/(e.naturalWidth||1));if(r&&o){let t=document.createElement("canvas");t.width=r,t.height=o;try{return t.getContext("2d").drawImage(e,0,0,r,o),t.toDataURL("image/png")}catch{}}return b(n,a)}(y,i,c).then(e=>I.setAttribute("src",e)))),w.add(L.fontFamily.split(",")[0].replace(/["']/g,"").trim().toLowerCase());let R=x(L,m.of(y),h);h||(R+=`${"inline"===L.display?"display:inline-block;":""}margin:0;position:relative;inset:auto;float:none;transform:none;translate:none;rotate:none;scale:none;flex:none;box-sizing:border-box;width:${d}px;height:${u}px;max-width:none;max-height:none;min-width:0;min-height:0;`);let P=a(y)&&!!h;P&&(R+="color:transparent;background:#e5e5e5;background-image:none;"),$.push([I,A(R)]);for(let e of["::before","::after"]){let t=c.getComputedStyle(y,e);P||/^(?:none|normal)$/.test(t.content)||(I.setAttribute("data-snapshot",String(C)),M+=`[data-snapshot="${C}"]${e}{${A(x(t,m.of(y),L))}content:${t.content};}`)}if(P)return I;if(t?.(y))return l(y)||(I.textContent=r),I;if("textarea"===v)return I;for(let e of y.childNodes){if("picture"===v&&"img"!==e.localName)continue;let t=E(e,L);t&&I.append(t)}return I};try{await(s.fonts?.ready);let t=E(e),a=new Map(await Promise.all([...y].map(async([e,t])=>[e,await t]))),n=e=>e.replace(v,(e,t,n)=>a.has(n)?`url("${a.get(n)}")`:e);for(let[e,t]of $)e.setAttribute("style",n(t));M=n(M),await Promise.all(p);let r=s.createElement("div");r.setAttribute("style",`width:${d+32}px;height:${u+32}px;padding:16px;box-sizing:border-box;overflow:hidden;background:${function(e,t){for(let a=e.parentElement;a;a=a.parentElement){let e=t.getComputedStyle(a).backgroundColor;if(e&&!/^(?:transparent|rgba\(.*,\s*0\))$/.test(e))return e}return"#fff"}(e,c)}`);let o=s.createElement("style");o.textContent=await async function(e,t,a){let n=[],r=2e6,o=async(e,i)=>{for(let l of e){if(l.cssRules&&await o(l.cssRules,i),!l.cssText.startsWith("@font-face"))continue;let e=l.style,s=e.getPropertyValue("font-family").replace(/["']/g,"").trim().toLowerCase(),c=e.getPropertyValue("src").match(/url\((['"]?)(.*?)\1\)/)?.[2];if(!t.has(s)||!c||r<=0)continue;let h=await b(new URL(c,i).href,a).catch(()=>"");h&&(r-=h.length,n.push(`@font-face{font-family:"${s}";src:url("${h}");${["font-weight","font-style","font-stretch","unicode-range"].map(t=>e.getPropertyValue(t)?`${t}:${e.getPropertyValue(t)};`:"").join("")}}`))}};for(let t of e.styleSheets){let a;try{a=t.cssRules}catch{continue}await o(a,t.href??e.baseURI)}return n.join("")}(s,w,c)+M,r.append(o,t);let i={width:d+32,height:u+32},l=`<svg xmlns="http://www.w3.org/2000/svg" width="${i.width}" height="${i.height}"><foreignObject x="0" y="0" width="100%" height="100%">${(new XMLSerializer).serializeToString(r)}</foreignObject></svg>`,h=new Image;return h.src=`data:image/svg+xml;charset=utf-8,${encodeURIComponent(l)}`,await h.decode(),{image:h,...i}}finally{m.dispose()}}var M=(e,t)=>new Promise((a,n)=>{try{e.toBlob(a,"image/webp",t)}catch(e){n(e)}});async function C(e,t={}){let a=t.maxBytes??w,n=e.ownerDocument.defaultView??window,r=e.offsetWidth||e.getBoundingClientRect().width,o=Math.min(n.devicePixelRatio||1,2,1200/(r+32)),i=await $(e,t.redact,o),l=document.createElement("canvas"),s=.8;for(let e=0;e<12&&i.width*o>=48;e++){l.width=Math.max(1,Math.round(i.width*o)),l.height=Math.max(1,Math.round(i.height*o));let e,t=l.getContext("2d");if(!t)throw new g("unsupported");t.drawImage(i.image,0,0,l.width,l.height);try{e=await M(l,s)}catch{throw new g("cross-origin")}if(!e||"image/webp"!==e.type)throw new g("unsupported");if(e.size<=a)return y(e);s>.5?s=Math.round(100*(s-.15))/100:o*=Math.min(.85,Math.max(.3,.95*Math.sqrt(a/e.size)))}throw new g("too-large")}var T={"cross-origin":"the element shows images from another origin","too-large":"the element is too large to draw",unsupported:"this browser can't encode WebP",failed:"it couldn't be drawn"},A=e=>`\x3c!-- palette: no image snapshot, ${T[e]}. --\x3e`;async function E(e,t,a=s){if(!e?.isConnected||m(e))return null;let n={},r=()=>p(e,t.redact,a-120);if(t.html&&(n.html=r()),t.image){await new Promise(e=>"function"==typeof requestIdleCallback?requestIdleCallback(e,{timeout:500}):setTimeout(e));try{n.image=await C(e,t)}catch(e){n.note=e instanceof g?e.reason:"failed","cross-origin"===n.note&&(n.html??=r()),n.html&&(n.html=A(n.note)+n.html)}}return n.image||n.html?n:null}var I=e=>{let[t,a]=e.split(","),n=atob(a),r=new Uint8Array(n.length);for(let e=0;e<n.length;e++)r[e]=n.charCodeAt(e);return new Blob([r],{type:t.slice(5,t.indexOf(";"))})},L=new WeakMap;function R(e,t,a,n,r){let o=L.get(e);if(!o){let r={...a,maxBytes:Math.min(a.maxBytes??w,n.maxImageBytes||1/0)};o=a.image||a.html?E(t(e),r,Math.min(s,n.maxHtmlBytes||1/0)).catch(()=>null):Promise.resolve(null),L.set(e,o)}return r&&o.then(async e=>{for(let t of["image","html"])e?.[t]&&await r(t,"image"===t?I(e.image):new Blob([e.html],{type:"text/html;charset=utf-8"})).catch(e=>console.info(`Palette: the comment posted without its ${t} snapshot.`,e instanceof Error?e.message:e))}),o}export{c as ATTRIBUTE_LIMIT,s as HTML_LIMIT,w as IMAGE_BYTES,e as OPT_OUT,r as PLACEHOLDER,h as TEXT_LIMIT,E as captureSnapshot,A as noteComment,m as skipped,R as snapshotFor,p as snapshotHtml,C as snapshotImage};
+var e="data-palette-no-snapshot",t=`[${e}],[data-komo-no-snapshot]`,a=e=>e.matches(t),n="[data-branch-comments],[data-palette-move-clone],[data-palette-viewport],[data-palette-snapshot-sandbox]",r="[redacted]",o=new Set(["script","noscript","template","style","link","meta","base","title"]),i=/^(?:href|src|action|formaction|xlink:href|poster|data|background)$/i,l=e=>"textarea"===e.localName||"input"===e.localName&&!/^(?:button|submit|reset|image|checkbox|radio|range|color)$/i.test(e.getAttribute("type")??""),s=2e4,c=200,h=500,d=(e,t)=>e.length>t?`${e.slice(0,t-1)}…`:e,u=e=>(new TextEncoder).encode(e).length,m=e=>!!e.closest(`${t},${n}`);function f(e,t=1/0){for(let{name:a,value:n}of[...e.attributes])/^on/i.test(a)||"srcdoc"===a||/^data-(palette|komo)-/.test(a)&&!/-no-snapshot$/.test(a)||i.test(a)&&/^\s*(?:javascript|vbscript):/i.test(n)?e.removeAttribute(a):n.length>t&&e.setAttribute(a,d(n,t))}function p(e,t,i=s){let c=e.ownerDocument,h=i,m=e=>{if(3===e.nodeType){let t=d(e.nodeValue??"",500);return h-=t.length,c.createTextNode(t)}if(1!==e.nodeType)return null;let i=e;if(o.has(i.localName)||i.matches(n))return null;let s=i.cloneNode(!1);if(f(s,200),l(i)&&function(e,t){let a=e.value??e.getAttribute("value")??"";"textarea"===e.localName?t.textContent=a?r:"":(a||t.hasAttribute("value"))&&t.setAttribute("value",r)}(i,s),h-=s.outerHTML.length,a(i))return s;if(t?.(i))return l(i)||(s.textContent=r),s;if("textarea"===i.localName)return s;for(let e of i.childNodes){if(h<=0){s.append(c.createComment(" trimmed "));break}let t=m(e);t&&s.append(t)}return s},p=m(e);if(!p)return"";let g=p.outerHTML;if(u(g)<=i)return g;let w=c.createComment(" trimmed ");p.append(w);for(let e=u(p.outerHTML)-i;e>0&&p.firstChild!==w;e=u(p.outerHTML)-i)for(;e>0&&p.firstChild!==w;){let t=w.previousSibling;for(;t.lastChild;)t=t.lastChild;e-=1===t.nodeType?t.outerHTML.length:(t.nodeValue?.length??0)+7,t.parentNode.removeChild(t)}return g=p.outerHTML,u(g)>i?"":g}var g=class extends Error{constructor(e){super(e),this.reason=e}reason},w=25e4,y=e=>new Promise((t,a)=>{let n=new FileReader;n.onload=()=>t(n.result),n.onerror=()=>a(n.error),n.readAsDataURL(e)});async function b(e,t){if(e.startsWith("data:"))return e;let a=new URL(e,t.document.baseURI);try{let e=await fetch(a,{mode:"cors",signal:AbortSignal.timeout(5e3)});return e.ok?await y(await e.blob()):""}catch{if(a.origin!==t.location.origin)throw new g("cross-origin");return""}}function x(e,t,a){let n="";for(let r=0;r<e.length;r++){let o=e[r];if(o.startsWith("--"))continue;let i=e.getPropertyValue(o);(i!==t.get(o)||a&&i!==a.getPropertyValue(o))&&(n+=`${o}:${i};`)}return n}var v=/url\((['"]?)(.*?)\1\)/g;async function $(e,t,i){let s=e.ownerDocument,c=s.defaultView,h=e.getBoundingClientRect(),d=e.offsetWidth??h.width,u=Math.min(e.offsetHeight??h.height,2e3);if(!d||!u)throw new g("failed");let m=function(){let e=document.createElement("iframe");e.setAttribute("data-palette-snapshot-sandbox",""),e.setAttribute("aria-hidden","true"),e.tabIndex=-1,e.style.cssText="position:fixed;left:-10px;top:0;width:1px;height:1px;border:0;opacity:0;pointer-events:none",document.documentElement.append(e);let t=e.contentDocument;try{t.open(),t.write("<!doctype html><html><head></head><body></body></html>"),t.close()}catch{}let a=new Map;return{of(e){let n=`${e.namespaceURI} ${e.localName}`,r=a.get(n);if(!r){let o=t.createElementNS(e.namespaceURI,e.localName);(t.body??t.documentElement).append(o);let i=t.defaultView.getComputedStyle(o);r=new Map;for(let e=0;e<i.length;e++)r.set(i[e],i.getPropertyValue(i[e]));o.remove(),a.set(n,r)}return r},dispose:()=>e.remove()}}(),p=[],w=new Set,y=new Map,$=[],M="",C=0,T=e=>(e.catch(()=>{}),e),A=e=>{for(let[,,t]of e.matchAll(v))t&&!t.startsWith("data:")&&!y.has(t)&&y.set(t,T(b(t,c)));return e},I=(e,h)=>{if(3===e.nodeType)return s.createTextNode(e.nodeValue??"");if(1!==e.nodeType)return null;let y=e,v=y.localName;if(o.has(v)||y.matches(n))return null;if(++C>3e3)throw new g("too-large");let E,L=c.getComputedStyle(y);if("none"===L.display)return null;if("canvas"===v||"video"===v){E=s.createElement("img");let e=document.createElement("canvas");e.width=y.width||y.videoWidth||1,e.height=y.height||y.videoHeight||1;try{e.getContext("2d").drawImage(y,0,0,e.width,e.height),E.setAttribute("src",e.toDataURL("image/png"))}catch{throw new g("cross-origin")}}else if("iframe"===v||"embed"===v||"object"===v)E=s.createElement("div");else{E=y.cloneNode(!1),f(E);for(let e of["id","class","srcset","sizes","loading","style"])E.removeAttribute(e)}l(y)&&(E.removeAttribute("value"),E.hasAttribute("placeholder")&&t?.(y)&&E.setAttribute("placeholder",r)),"img"===v&&p.push(T(async function(e,t,a){let n=e.currentSrc||e.src;if(!n||n.startsWith("data:"))return n;await e.decode().catch(()=>{});let r=Math.min(e.naturalWidth,Math.ceil(e.offsetWidth*t)||e.naturalWidth),o=Math.round(r*e.naturalHeight/(e.naturalWidth||1));if(r&&o){let t=document.createElement("canvas");t.width=r,t.height=o;try{return t.getContext("2d").drawImage(e,0,0,r,o),t.toDataURL("image/png")}catch{}}return b(n,a)}(y,i,c).then(e=>E.setAttribute("src",e)))),w.add(L.fontFamily.split(",")[0].replace(/["']/g,"").trim().toLowerCase());let R=x(L,m.of(y),h);h||(R+=`${"inline"===L.display?"display:inline-block;":""}margin:0;position:relative;inset:auto;float:none;transform:none;translate:none;rotate:none;scale:none;flex:none;box-sizing:border-box;width:${d}px;height:${u}px;max-width:none;max-height:none;min-width:0;min-height:0;`);let k=a(y)&&!!h;k&&(R+="color:transparent;background:#e5e5e5;background-image:none;"),$.push([E,A(R)]);for(let e of["::before","::after"]){let t=c.getComputedStyle(y,e);k||/^(?:none|normal)$/.test(t.content)||(E.setAttribute("data-snapshot",String(C)),M+=`[data-snapshot="${C}"]${e}{${A(x(t,m.of(y),L))}content:${t.content};}`)}if(k)return E;if(t?.(y))return l(y)||(E.textContent=r),E;if("textarea"===v)return E;for(let e of y.childNodes){if("picture"===v&&"img"!==e.localName)continue;let t=I(e,L);t&&E.append(t)}return E};try{await(s.fonts?.ready);let t=I(e),a=new Map(await Promise.all([...y].map(async([e,t])=>[e,await t]))),n=e=>e.replace(v,(e,t,n)=>a.has(n)?`url("${a.get(n)}")`:e);for(let[e,t]of $)e.setAttribute("style",n(t));M=n(M),await Promise.all(p);let r=s.createElement("div");r.setAttribute("style",`width:${d+32}px;height:${u+32}px;padding:16px;box-sizing:border-box;overflow:hidden;background:${function(e,t){for(let a=e.parentElement;a;a=a.parentElement){let e=t.getComputedStyle(a).backgroundColor;if(e&&!/^(?:transparent|rgba\(.*,\s*0\))$/.test(e))return e}return"#fff"}(e,c)}`);let o=s.createElement("style");o.textContent=await async function(e,t,a){let n=[],r=2e6,o=async(e,i)=>{for(let l of e){if(l.cssRules&&await o(l.cssRules,i),!l.cssText.startsWith("@font-face"))continue;let e=l.style,s=e.getPropertyValue("font-family").replace(/["']/g,"").trim().toLowerCase(),c=e.getPropertyValue("src").match(/url\((['"]?)(.*?)\1\)/)?.[2];if(!t.has(s)||!c||r<=0)continue;let h=await b(new URL(c,i).href,a).catch(()=>"");h&&(r-=h.length,n.push(`@font-face{font-family:"${s}";src:url("${h}");${["font-weight","font-style","font-stretch","unicode-range"].map(t=>e.getPropertyValue(t)?`${t}:${e.getPropertyValue(t)};`:"").join("")}}`))}};for(let t of e.styleSheets){let a;try{a=t.cssRules}catch{continue}await o(a,t.href??e.baseURI)}return n.join("")}(s,w,c)+M,r.append(o,t);let i={width:d+32,height:u+32},l=`<svg xmlns="http://www.w3.org/2000/svg" width="${i.width}" height="${i.height}"><foreignObject x="0" y="0" width="100%" height="100%">${(new XMLSerializer).serializeToString(r)}</foreignObject></svg>`,h=new Image;return h.src=`data:image/svg+xml;charset=utf-8,${encodeURIComponent(l)}`,await h.decode(),{image:h,...i}}finally{m.dispose()}}var M=(e,t)=>new Promise((a,n)=>{try{e.toBlob(a,"image/webp",t)}catch(e){n(e)}});async function C(e,t={}){let a=t.maxBytes??w,n=e.ownerDocument.defaultView??window,r=e.offsetWidth||e.getBoundingClientRect().width,o=Math.min(n.devicePixelRatio||1,2,1200/(r+32)),i=await $(e,t.redact,o),l=document.createElement("canvas"),s=.8;for(let e=0;e<12&&i.width*o>=48;e++){l.width=Math.max(1,Math.round(i.width*o)),l.height=Math.max(1,Math.round(i.height*o));let e,t=l.getContext("2d");if(!t)throw new g("unsupported");t.drawImage(i.image,0,0,l.width,l.height);try{e=await M(l,s)}catch{throw new g("cross-origin")}if(!e||"image/webp"!==e.type)throw new g("unsupported");if(e.size<=a)return y(e);s>.5?s=Math.round(100*(s-.15))/100:o*=Math.min(.85,Math.max(.3,.95*Math.sqrt(a/e.size)))}throw new g("too-large")}var T={"cross-origin":"cross-origin images","too-large":"the element is too large to draw",unsupported:"this browser can't encode WebP",failed:"it couldn't be drawn"},A=e=>`\x3c!-- palette: no image snapshot, ${T[e]}. --\x3e`;async function I(e,t,a=s){if(!e?.isConnected||m(e))return null;let n={},r=()=>p(e,t.redact,a-120);if(t.html&&(n.html=r()),t.image){await new Promise(e=>"function"==typeof requestIdleCallback?requestIdleCallback(e,{timeout:500}):setTimeout(e));try{n.image=await C(e,t)}catch(e){n.note=e instanceof g?e.reason:"failed","cross-origin"===n.note&&(n.html??=r()),n.html&&(n.html=A(n.note)+n.html)}}return n}var E=e=>{let[t,a]=e.split(","),n=Uint8Array.from(atob(a),e=>e.charCodeAt(0));return new Blob([n],{type:t.slice(5,-7)})},L=new WeakMap;function R(e,t,a,n,r){let o=L.get(e);if(!o){let r={...a,maxBytes:Math.min(a.maxBytes??w,n.maxImageBytes||1/0)};o=a.image||a.html?I(t(e),r,Math.min(s,n.maxHtmlBytes||1/0)).catch(()=>({note:"failed"})):Promise.resolve(null),L.set(e,o)}return r&&o.then(async e=>{let t="failed"===e?.note;for(let a of["image","html"]){let n=e?.[a];n&&await r(a,"image"===a?E(n):new Blob([n],{type:"text/html;charset=utf-8"})).catch(()=>t=!0)}if(n.readiness&&(t||!e?.image&&!e?.html))return r("status",new Blob([`{"status":"${t?"failed":"skipped"}"}`],{type:"application/json"})).catch(()=>{})}),o}export{c as ATTRIBUTE_LIMIT,s as HTML_LIMIT,w as IMAGE_BYTES,e as OPT_OUT,r as PLACEHOLDER,h as TEXT_LIMIT,I as captureSnapshot,A as noteComment,m as skipped,R as snapshotFor,p as snapshotHtml,C as snapshotImage};

package/dist/snapshot.d.ts

@@ -28,6 +28,7 @@ export declare const IMAGE_BYTES = 250000;
 export declare function snapshotImage(element: Element, options?: PaletteSnapshots): Promise<string>;
 /** The server's snapshot support, from `/config`. */
 export interface SnapshotLimits {
+    readiness?: boolean;
     /** Whether guest sessions may attach snapshots. */
     guests: boolean;
     maxImageBytes: number;
@@ -44,6 +45,6 @@ export declare function captureSnapshot(element: Element | null, options: Palett
 /**
  * The snapshot of a draft's target, captured once per anchor: the composer reads it
  * for a preview, and posting passes `post` to upload each kind as its raw file after
- * the thread is saved. Never rejects; a failed upload is logged and the comment stays posted.
+ * the thread is saved. Never rejects; failed uploads are reported when supported and the comment stays posted.
  */
-export declare function snapshotFor<Anchor extends object>(anchor: Anchor, resolve: (anchor: Anchor) => Element | null, options: PaletteSnapshots, limits: SnapshotLimits, post?: (kind: "image" | "html", body: Blob) => Promise<unknown>): Promise<CapturedSnapshot | null>;
+export declare function snapshotFor<Anchor extends object>(anchor: Anchor, resolve: (anchor: Anchor) => Element | null, options: PaletteSnapshots, limits: SnapshotLimits, post?: (kind: "image" | "html" | "status", body: Blob) => Promise<unknown>): Promise<CapturedSnapshot | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazem3500/palette",
-  "version": "0.9.111",
+  "version": "0.9.112",
   "description": "Point, area, and threaded comments for website branches.",
   "type": "module",
   "license": "MIT",

package/server/index.ts

@@ -20,7 +20,8 @@ import { authOptions, type ProxyAuthProvider, type ProxyIdentity } from "./proxy
 import { paletteEnv } from "./public-env";
 import setupClient from "./setup-client.txt";
 import {
-  dispatchWebhook,
+  enqueueWebhook,
+  drainWebhooks,
   type WebhookEvent,
 } from "./webhooks";
 import {
@@ -202,14 +203,16 @@ async function body(request: Request): Promise<Record<string, unknown>> {
                       : path === "/me"
                         ? ["name", "avatarUrl", "accentColor"]
                         : path === "/threads"
-                          ? ["body", "page", "anchor", "tags", "scope"]
+                          ? ["body", "page", "anchor", "tags", "scope", "snapshotIntent"]
                           : path.endsWith("/comments")
                             ? ["body"]
                             : path.includes("/comments/")
                               ? ["body"]
-                              : path.startsWith("/threads/")
-                                ? ["anchor", "resolved", "tag", "untag", "scope"]
-                                : [];
+                              : path.endsWith("/snapshot")
+                                ? ["status"]
+                                : path.startsWith("/threads/")
+                                  ? ["anchor", "resolved", "tag", "untag", "scope"]
+                                  : [];
     check(
       Object.keys(result).every((key) => allowed.includes(key)),
       400,
@@ -1149,6 +1152,7 @@ async function route(
       tokens: !auth.proxy || auth.proxyAccessTokens,
       // Element snapshots are opt-in on the client; guests need project consent.
       snapshots: {
+        readiness: true,
         guests: auth.allowGuests && config.allowGuestSnapshots === true,
         maxImageBytes: SNAPSHOT_LIMITS.image,
         maxHtmlBytes: SNAPSHOT_LIMITS.html,
@@ -1537,6 +1541,8 @@ async function route(
     }
     const id = crypto.randomUUID();
     const firstCommentId = crypto.randomUUID();
+    check(data.snapshotIntent === undefined || typeof data.snapshotIntent === "boolean", 400, "Invalid snapshot intent.");
+    const snapshotStatus = data.snapshotIntent === undefined ? null : data.snapshotIntent ? "pending" : "skipped";
     await env.DB.batch([
       // Page-only threads rely on the column default, as before the scope column existed.
       scope === "all"
@@ -1549,18 +1555,8 @@ async function route(
       env.DB.prepare(
         "INSERT INTO comments(id,thread_id,user_id,body,created_at) VALUES(?,?,?,?,?)"
       ).bind(firstCommentId, id, user.id, text, now),
-      ...retainReviewerComments(
-        env.DB,
-        project,
-        user.id,
-        config.retainedCommentsPerUser
-      ),
-    ]);
-    ctx.waitUntil(
-      dispatchWebhook(
-        env,
-        project,
-        webhookEvent(
+      env.DB.prepare("UPDATE threads SET snapshot_status=? WHERE id=?").bind(snapshotStatus, id),
+      enqueueWebhook(env.DB, project, { ...webhookEvent(
           "comment.created",
           project,
           repo,
@@ -1571,9 +1567,15 @@ async function route(
           user.name,
           text,
           origin || url.origin
-        )
-      ).catch(() => {})
-    );
+        ), ...(snapshotStatus ? { snapshotStatus } : {}) }, firstCommentId),
+      ...retainReviewerComments(
+        env.DB,
+        project,
+        user.id,
+        config.retainedCommentsPerUser
+      ),
+    ]);
+    ctx.waitUntil(drainWebhooks(env));
     return json({ id, commentId: firstCommentId }, 201);
   }
   const snapshotRoute = url.pathname.match(
@@ -1582,12 +1584,18 @@ async function route(
   if (snapshotRoute) {
     const [, threadId, pathKind] = snapshotRoute;
     const thread = await env.DB.prepare(
-      "SELECT id FROM threads WHERE id=? AND project=? AND repo=? AND branch=?"
+      "SELECT id,snapshot_status,created_at FROM threads WHERE id=? AND project=? AND repo=? AND branch=?"
     )
       .bind(threadId, project, repo, branch)
-      .first<{ id: string }>();
+      .first<{ id: string; snapshot_status: string | null; created_at: number }>();
     check(thread, 404, "Thread not found on this branch.");
     if (request.method === "GET") {
+      if (!pathKind) {
+        const rows = await env.DB.prepare("SELECT kind FROM snapshots WHERE thread_id=?").bind(threadId).all<{kind:string}>();
+        let status = rows.results.length ? "ready" : thread.snapshot_status ?? "unknown";
+        if (status === "pending" && now - thread.created_at > 600000) status = "failed";
+        return json({ status, kinds: rows.results.map(row => row.kind) });
+      }
       const kind = snapshotKind(pathKind);
       const row = await env.DB.prepare(
         "SELECT mime,bytes FROM snapshots WHERE thread_id=? AND kind=?"
@@ -1635,13 +1643,20 @@ async function route(
           threadId,
           kind
         ),
-        env.DB.prepare("UPDATE threads SET updated_at=? WHERE id=?").bind(
+        env.DB.prepare("UPDATE threads SET snapshot_status=CASE WHEN EXISTS (SELECT 1 FROM snapshots WHERE thread_id=?) THEN 'ready' ELSE 'skipped' END,updated_at=? WHERE id=?").bind(
+          threadId,
           now,
           threadId
         ),
       ]);
       return json({ ok: true, deleted: deleted.meta.changes });
     }
+    if (!pathKind && request.headers.get("Content-Type")?.startsWith("application/json")) {
+      const data = await body(request);
+      check(data.status === "skipped" || data.status === "failed", 400, "Report skipped or failed capture.");
+      await env.DB.prepare("UPDATE threads SET snapshot_status=?,updated_at=? WHERE id=? AND snapshot_status='pending'").bind(data.status, now, threadId).run();
+      return json({ ok: true });
+    }
     await limit(env, `${project}:snapshot:${user.id}`, 60, 600);
     const snapshot = await readSnapshot(
       request,
@@ -1657,8 +1672,9 @@ async function route(
         snapshotCap(config.maxSnapshotBytes),
         true
       ),
-      env.DB.prepare("UPDATE threads SET updated_at=? WHERE id=?").bind(
+      env.DB.prepare("UPDATE threads SET snapshot_status='ready',updated_at=? WHERE id=? AND EXISTS (SELECT 1 FROM snapshots WHERE thread_id=?)").bind(
         now,
+        threadId,
         threadId
       ),
     ]);
@@ -1774,35 +1790,20 @@ async function route(
     );
     check(typeof data.resolved === "boolean", 400, "Invalid resolved state.");
     const becameResolved = !thread.resolved && data.resolved;
-    await env.DB.prepare(
-      "UPDATE threads SET resolved=?,resolved_by=?,updated_at=? WHERE id=?"
-    )
-      .bind(
-        Number(data.resolved),
-        data.resolved ? user.id : null,
-        now,
-        threadId
-      )
-      .run();
-    if (becameResolved)
-      ctx.waitUntil(
-        dispatchWebhook(
-          env,
-          project,
-          webhookEvent(
-            "comment.resolved",
-            project,
-            repo,
-            branch,
-            threadId,
-            thread.page,
-            thread.anchor,
-            user.name,
-            null,
-            origin || url.origin
-          )
-        ).catch(() => {})
-      );
+    const firstComment = becameResolved
+      ? await env.DB.prepare("SELECT id FROM comments WHERE thread_id=? ORDER BY created_at,id LIMIT 1")
+          .bind(threadId).first<{ id: string }>()
+      : null;
+    await env.DB.batch([
+      env.DB.prepare(
+        "UPDATE threads SET resolved=?,resolved_by=?,updated_at=? WHERE id=?"
+      ).bind(Number(data.resolved), data.resolved ? user.id : null, now, threadId),
+      ...(firstComment ? [enqueueWebhook(env.DB, project, webhookEvent(
+        "comment.resolved", project, repo, branch, threadId, thread.page,
+        thread.anchor, user.name, null, origin || url.origin
+      ), firstComment.id)] : []),
+    ]);
+    ctx.waitUntil(drainWebhooks(env));
     return json({ ok: true });
   }
   if (
@@ -1820,6 +1821,18 @@ async function route(
         now,
         threadId
       ),
+      enqueueWebhook(env.DB, project, webhookEvent(
+          "comment.replied",
+          project,
+          repo,
+          branch,
+          threadId,
+          thread.page,
+          thread.anchor,
+          user.name,
+          text,
+          origin || url.origin
+        ), replyId),
       ...retainReviewerComments(
         env.DB,
         project,
@@ -1832,24 +1845,7 @@ async function route(
       409,
       "This thread has reached 200 comments. Start another thread."
     );
-    ctx.waitUntil(
-      dispatchWebhook(
-        env,
-        project,
-        webhookEvent(
-          "comment.replied",
-          project,
-          repo,
-          branch,
-          threadId,
-          thread.page,
-          thread.anchor,
-          user.name,
-          text,
-          origin || url.origin
-        )
-      ).catch(() => {})
-    );
+    ctx.waitUntil(drainWebhooks(env));
     return json({ ok: true, id: replyId }, 201);
   }
   check(commentId, 405, "Method not allowed.");
@@ -1954,6 +1950,7 @@ const settingsFor = new WeakMap<Env, Env>();
 export default {
   async scheduled(_event, env, ctx) {
     ctx.waitUntil(maintain(env.DB, true));
+    ctx.waitUntil(drainWebhooks(paletteEnv(env)));
   },
   async fetch(request, settings, ctx) {
     // Deployments configured before the rename set KOMO_ names. One copy per
@@ -2044,3 +2041,5 @@ export default {
     return new Response(response.body, { status: response.status, headers });
   },
 } satisfies ExportedHandler<Env>;
+
+export { drainWebhooks } from "./webhooks";

package/server/migrations/0022_webhook_outbox.sql

@@ -0,0 +1,14 @@
+CREATE TABLE webhook_outbox (
+ id TEXT PRIMARY KEY,
+ project TEXT NOT NULL,
+ body TEXT NOT NULL,
+ url TEXT NOT NULL,
+ secret TEXT NOT NULL,
+ attempts INTEGER NOT NULL DEFAULT 0,
+ next_attempt BIGINT NOT NULL,
+ claim_until BIGINT NOT NULL DEFAULT 0,
+ claim_token TEXT NOT NULL DEFAULT '',
+ state TEXT NOT NULL DEFAULT 'pending'
+);
+CREATE INDEX webhook_outbox_due ON webhook_outbox(state,next_attempt,claim_until);
+ALTER TABLE threads ADD COLUMN snapshot_status TEXT;

package/server/node-webhooks.ts

@@ -101,6 +101,11 @@ export async function sendWebhookPinned(
           lookup: pinnedLookup(address),
         },
         (response) => {
+          if (!response.statusCode || response.statusCode < 200 || response.statusCode >= 300) {
+            response.destroy();
+            finish(new Error("Webhook returned a non-success status."));
+            return;
+          }
           // Read and discard a bounded amount. Never follow redirects or log bodies.
           let read = 0;
           response.on("data", (chunk: Buffer) => {