@automattic/jetpack-image-guide 0.5.9 → 0.5.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/build/find-image-elements.d.ts +1 -1
  3. package/build/index.d.ts +6 -3
  4. package/build/index.js +1 -1
  5. package/build/stores/GuideState.d.ts +2 -1
  6. package/build/stores/MeasurableImageStore.d.ts +1 -1
  7. package/package.json +7 -7
  8. package/rollup.config.js +1 -1
package/CHANGELOG.md CHANGED
@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [0.5.11] - 2024-08-29
9
+ ### Changed
10
+ - Updated package dependencies. [#38287]
11
+
12
+ ### Fixed
13
+ - Fix: Handle uncaught exception for images with empty or no src attributes. [#39024]
14
+ - Fixed a bug where image guide would show up for svg images. [#38329]
15
+
16
+ ## [0.5.10] - 2024-07-10
17
+ ### Changed
18
+ - Updated package dependencies. [#38092]
19
+
8
20
  ## [0.5.9] - 2024-06-21
9
21
  ### Changed
10
22
  - Updated package dependencies. [#37796]
@@ -109,6 +121,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
109
121
  ### Removed
110
122
  - Minor package.json change - removing private entry.
111
123
 
124
+ [0.5.11]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.10...v0.5.11
125
+ [0.5.10]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.9...v0.5.10
112
126
  [0.5.9]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.8...v0.5.9
113
127
  [0.5.8]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.7...v0.5.8
114
128
  [0.5.7]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.6...v0.5.7
package/build/find-image-elements.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { FetchFn, MeasurableImage } from './MeasurableImage.js';
1
+ import { MeasurableImage, type FetchFn } from './MeasurableImage.js';
2
2
  /**
3
3
  * Get elements that either are image tags or have a background image.
4
4
  *
package/build/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { Dimensions, FetchFn, MeasurableImage, Weight } from './MeasurableImage.js';
2
- import { TracksCallback } from './analytics.js';
1
+ import { MeasurableImage, type Dimensions, type FetchFn, type Weight } from './MeasurableImage.js';
2
+ import { type TracksCallback } from './analytics.js';
3
3
  import { getMeasurableImages } from './find-image-elements.js';
4
4
  import AdminBarToggle from './ui/AdminBarToggle.svelte';
5
5
  export { MeasurableImage, getMeasurableImages };
@@ -19,4 +19,7 @@ type ImageGuideUIOptions = {
19
19
  * @param {Function} args.fetchFunction - The function to use to fetch the image weight.
20
20
  * @return {object} The Svelte component instance.
21
21
  */
22
- export declare function setupImageGuideUI(target: HTMLElement, { href, tracksCallback, fetchFunction }: ImageGuideUIOptions): AdminBarToggle;
22
+ export declare function setupImageGuideUI(target: HTMLElement, { href, tracksCallback, fetchFunction }: ImageGuideUIOptions): AdminBarToggle<{
23
+ href: string;
24
+ tracksCallback: TracksCallback;
25
+ }, any, any>;
package/build/index.js CHANGED
@@ -1 +1 @@
1
- class t{constructor(t,e,n=null){this.node=t,this.getURLCallback=e,this.fetch=null!=n?n:window.fetch.bind(window)}getURL(){return this.getURLCallback(this.node)}getSizeOnPage(){const{width:t,height:e}=this.node.getBoundingClientRect();return{width:Math.round(t),height:Math.round(e)}}async getFileSize(t){const[e,{width:n,height:i}]=await Promise.all([this.fetchFileWeight(t),this.fetchFileDimensions(t)]);return{width:n,height:i,weight:e}}getPotentialSavings(t,e){const n=this.getOversizedRatio(t,e);return n<=1?null:Math.round(t.weight-t.weight/n)}getExpectedSize(t){const e=window.devicePixelRatio||1;return{width:Math.round(t.width*e),height:Math.round(t.height*e)}}getOversizedRatio(t,e){if(0===t.width||0===t.height)return 1;const{width:n,height:i}=this.getExpectedSize(e);return 0===n||0===i?1:t.width*t.height/(n*i)}async fetchFileWeight(t){const e=await this.fetch(t);return e.ok?parseInt(e.headers.get("content-length"),10)/1024:(console.log(`Can't get image size for ${t} likely due to a CORS error.`),-1)}async fetchFileDimensions(t){const e=new Image;return e.src=t,new Promise(((t,n)=>{e.onload=()=>{t({width:Math.round(e.width),height:Math.round(e.height)})},e.onerror=()=>{n("Unable to load image.")}}))}async isImageTiny(){try{const t=65,e=await this.fetchFileDimensions(this.getURL());return e.width<t||e.height<t}catch(t){return!0}}}function e(t){return o(t.currentSrc)?t.currentSrc:o(t.src)?t.src:null}function n(t){const e=getComputedStyle(t).backgroundImage.match(/url\(\s*(['"])(.*?)\1\s*\)/i),n=window.location.href.split("#")[0];return e&&e[2]&&e[2]!==n&&o(e[2])?e[2]:null}async function i(i,o=null){return function(t){return t.filter((t=>t instanceof HTMLImageElement||t instanceof HTMLElement&&"none"!==getComputedStyle(t).backgroundImage))}(i).map((i=>i instanceof HTMLImageElement?new t(i,e,o):i instanceof HTMLElement&&n(i)?new t(i,n):null)).filter((t=>null!==t))}function o(t){if(t.startsWith("/")){return!t.split("?")[0].endsWith(".svg")}try{const e=new URL(t);return"http:"===e.protocol||"https:"===e.protocol}catch(t){return!1}}function r(){}const s=t=>t;function c(t){return t()}function l(){return Object.create(null)}function a(t){t.forEach(c)}function u(t){return"function"==typeof t}function d(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}let h;function f(t,e){return h||(h=document.createElement("a")),h.href=e,t===h.href}function p(t,...e){if(null==t)return r;const n=t.subscribe(...e);return n.unsubscribe?()=>n.unsubscribe():n}function g(t){let e;return p(t,(t=>e=t))(),e}function m(t,e,n){t.$$.on_destroy.push(p(e,n))}function $(t,e,n,i){return t[1]&&i?function(t,e){for(const n in e)t[n]=e[n];return t}(n.ctx.slice(),t[1](i(e))):n.ctx}function v(t){const e="string"==typeof t&&t.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);return e?[parseFloat(e[1]),e[2]||"px"]:[t,"px"]}const w="undefined"!=typeof window;let b=w?()=>window.performance.now():()=>Date.now(),y=w?t=>requestAnimationFrame(t):r;const x=new Set;function k(t){x.forEach((e=>{e.c(t)||(x.delete(e),e.f())})),0!==x.size&&y(k)}function _(t){let e;return 0===x.size&&y(k),{promise:new Promise((n=>{x.add(e={c:t,f:n})})),abort(){x.delete(e)}}}function z(t,e){t.appendChild(e)}function S(t){if(!t)return document;const e=t.getRootNode?t.getRootNode():t.ownerDocument;return e&&e.host?e:t.ownerDocument}function C(t){const e=P("style");return function(t,e){z(t.head||t,e),e.sheet}(S(t),e),e.sheet}function E(t,e,n){t.insertBefore(e,n||null)}function L(t){t.parentNode&&t.parentNode.removeChild(t)}function P(t){return document.createElement(t)}function T(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function M(t){return document.createTextNode(t)}function j(){return M(" ")}function O(){return M("")}function R(t,e,n,i){return t.addEventListener(e,n,i),()=>t.removeEventListener(e,n,i)}function I(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function U(t,e){e=""+e,t.data!==e&&(t.data=e)}function F(t,e,n,i){null===n?t.style.removeProperty(e):t.style.setProperty(e,n,i?"important":"")}function A(t,e,n){t.classList[n?"add":"remove"](e)}function H(t,e,{bubbles:n=!1,cancelable:i=!1}={}){const o=document.createEvent("CustomEvent");return o.initCustomEvent(t,n,i,e),o}const B=new Map;let N,D=0;function W(t,e,n,i,o,r,s,c=0){const l=16.666/i;let a="{\n";for(let t=0;t<=1;t+=l){const i=e+(n-e)*r(t);a+=100*t+`%{${s(i,1-i)}}\n`}const u=a+`100% {${s(n,1-n)}}\n}`,d=`__svelte_${function(t){let e=5381,n=t.length;for(;n--;)e=(e<<5)-e^t.charCodeAt(n);return e>>>0}(u)}_${c}`,h=S(t),{stylesheet:f,rules:p}=B.get(h)||function(t,e){const n={stylesheet:C(e),rules:{}};return B.set(t,n),n}(h,t);p[d]||(p[d]=!0,f.insertRule(`@keyframes ${d} ${u}`,f.cssRules.length));const g=t.style.animation||"";return t.style.animation=`${g?`${g}, `:""}${d} ${i}ms linear ${o}ms 1 both`,D+=1,d}function V(t,e){const n=(t.style.animation||"").split(", "),i=n.filter(e?t=>t.indexOf(e)<0:t=>-1===t.indexOf("__svelte")),o=n.length-i.length;o&&(t.style.animation=i.join(", "),D-=o,D||y((()=>{D||(B.forEach((t=>{const{ownerNode:e}=t.stylesheet;e&&L(e)})),B.clear())})))}function G(t){N=t}function q(){if(!N)throw new Error("Function called outside component initialization");return N}function Z(t){q().$$.on_mount.push(t)}function K(t,e){const n=t.$$.callbacks[e.type];n&&n.slice().forEach((t=>t.call(this,e)))}const X=[],Y=[];let J=[];const Q=[],tt=Promise.resolve();let et=!1;function nt(t){J.push(t)}const it=new Set;let ot,rt=0;function st(){if(0!==rt)return;const t=N;do{try{for(;rt<X.length;){const t=X[rt];rt++,G(t),ct(t.$$)}}catch(t){throw X.length=0,rt=0,t}for(G(null),X.length=0,rt=0;Y.length;)Y.pop()();for(let t=0;t<J.length;t+=1){const e=J[t];it.has(e)||(it.add(e),e())}J.length=0}while(X.length);for(;Q.length;)Q.pop()();et=!1,it.clear(),G(t)}function ct(t){if(null!==t.fragment){t.update(),a(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(nt)}}function lt(){return ot||(ot=Promise.resolve(),ot.then((()=>{ot=null}))),ot}function at(t,e,n){t.dispatchEvent(H(`${e?"intro":"outro"}${n}`))}const ut=new Set;let dt;function ht(){dt={r:0,c:[],p:dt}}function ft(){dt.r||a(dt.c),dt=dt.p}function pt(t,e){t&&t.i&&(ut.delete(t),t.i(e))}function gt(t,e,n,i){if(t&&t.o){if(ut.has(t))return;ut.add(t),dt.c.push((()=>{ut.delete(t),i&&(n&&t.d(1),i())})),t.o(e)}else i&&i()}const mt={duration:0};function $t(t,e,n){const i={direction:"in"};let o,c,l=e(t,n,i),a=!1,d=0;function h(){o&&V(t,o)}function f(){const{delay:e=0,duration:n=300,easing:i=s,tick:u=r,css:f}=l||mt;f&&(o=W(t,0,1,n,e,i,f,d++)),u(0,1);const p=b()+e,g=p+n;c&&c.abort(),a=!0,nt((()=>at(t,!0,"start"))),c=_((e=>{if(a){if(e>=g)return u(1,0),at(t,!0,"end"),h(),a=!1;if(e>=p){const t=i((e-p)/n);u(t,1-t)}}return a}))}let p=!1;return{start(){p||(p=!0,V(t),u(l)?(l=l(i),lt().then(f)):f())},invalidate(){p=!1},end(){a&&(h(),a=!1)}}}function vt(t,e,n,i){const o={direction:"both"};let c=e(t,n,o),l=i?0:1,d=null,h=null,f=null;function p(){f&&V(t,f)}function g(t,e){const n=t.b-l;return e*=Math.abs(n),{a:l,b:t.b,d:n,duration:e,start:t.start,end:t.start+e,group:t.group}}function m(e){const{delay:n=0,duration:i=300,easing:o=s,tick:u=r,css:m}=c||mt,$={start:b()+n,b:e};e||($.group=dt,dt.r+=1),d||h?h=$:(m&&(p(),f=W(t,l,e,i,n,o,m)),e&&u(0,1),d=g($,i),nt((()=>at(t,e,"start"))),_((e=>{if(h&&e>h.start&&(d=g(h,i),h=null,at(t,d.b,"start"),m&&(p(),f=W(t,l,d.b,d.duration,0,o,c.css))),d)if(e>=d.end)u(l=d.b,1-l),at(t,d.b,"end"),h||(d.b?p():--d.group.r||a(d.group.c)),d=null;else if(e>=d.start){const t=e-d.start;l=d.a+d.d*o(t/d.duration),u(l,1-l)}return!(!d&&!h)})))}return{run(t){u(c)?lt().then((()=>{c=c(o),m(t)})):m(t)},end(){p(),d=h=null}}}const wt="undefined"!=typeof window?window:"undefined"!=typeof globalThis?globalThis:global;function bt(t){t&&t.c()}function yt(t,e,n,i){const{fragment:o,after_update:r}=t.$$;o&&o.m(e,n),i||nt((()=>{const e=t.$$.on_mount.map(c).filter(u);t.$$.on_destroy?t.$$.on_destroy.push(...e):a(e),t.$$.on_mount=[]})),r.forEach(nt)}function xt(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];J.forEach((i=>-1===t.indexOf(i)?e.push(i):n.push(i))),n.forEach((t=>t())),J=e}(n.after_update),a(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function kt(t,e){-1===t.$$.dirty[0]&&(X.push(t),et||(et=!0,tt.then(st)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function _t(t,e,n,i,o,s,c,u=[-1]){const d=N;G(t);const h=t.$$={fragment:null,ctx:[],props:s,update:r,not_equal:o,bound:l(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(d?d.$$.context:[])),callbacks:l(),dirty:u,skip_bound:!1,root:e.target||d.$$.root};c&&c(h.root);let f=!1;if(h.ctx=n?n(t,e.props||{},((e,n,...i)=>{const r=i.length?i[0]:n;return h.ctx&&o(h.ctx[e],h.ctx[e]=r)&&(!h.skip_bound&&h.bound[e]&&h.bound[e](r),f&&kt(t,e)),n})):[],h.update(),f=!0,a(h.before_update),h.fragment=!!i&&i(h.ctx),e.target){if(e.hydrate){const t=function(t){return Array.from(t.childNodes)}(e.target);h.fragment&&h.fragment.l(t),t.forEach(L)}else h.fragment&&h.fragment.c();e.intro&&pt(t.$$.fragment),yt(t,e.target,e.anchor,e.customElement),st()}G(d)}class zt{$destroy(){xt(this,1),this.$destroy=r}$on(t,e){if(!u(e))return r;const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const St=[];function Ct(t,e=r){let n;const i=new Set;function o(e){if(d(t,e)&&(t=e,n)){const e=!St.length;for(const e of i)e[1](),St.push(e,t);if(e){for(let t=0;t<St.length;t+=2)St[t][0](St[t+1]);St.length=0}}}return{set:o,update:function(e){o(e(t))},subscribe:function(s,c=r){const l=[s,c];return i.add(l),1===i.size&&(n=e(o)||r),s(t),()=>{i.delete(l),0===i.size&&n&&(n(),n=null)}}}}function Et(t,e,n){const i=!Array.isArray(t),o=i?[t]:t,s=e.length<2;return c=t=>{let n=!1;const c=[];let l=0,d=r;const h=()=>{if(l)return;d();const n=e(i?c[0]:c,t);s?t(n):d=u(n)?n:r},f=o.map(((t,e)=>p(t,(t=>{c[e]=t,l&=~(1<<e),n&&h()}),(()=>{l|=1<<e}))));return n=!0,h(),function(){a(f),d(),n=!1}},{subscribe:Ct(n,c).subscribe};var c}const Lt="jetpack-boost-guide",Pt={active:"Active",paused:"Paused"};let Tt=localStorage.getItem(Lt);Tt&&Pt[Tt]||(localStorage.setItem(Lt,"Active"),Tt="active");const{set:Mt,update:jt,subscribe:Ot}=Ct(Tt);Ot((t=>{localStorage.setItem(Lt,t)}));const Rt={subscribe:Ot,set:Mt,update:jt,cycle:()=>{jt((t=>{const e=Object.keys(Pt),n=e.indexOf(t);return e[(n+1)%e.length]}))}},It=Et(Rt,(t=>Pt[t]));class Ut{static setTracksCallback(t){Ut.tracksCallback=t}static async trackImageOutcome(t){return new Promise((e=>{t.loading.subscribe((n=>{if(!n){const n=g(t.oversizedRatio),i=function(t){return t>4?"red":t>2.5?"yellow":"green"}(n),o=g(t.fileSize),r=g(t.sizeOnPage),s=g(t.expectedSize),c=g(t.potentialSavings),l=g(t.url),a={severity:i,oversized_ratio:n,file_weight:o.weight,file_width:o.width,file_height:o.height,size_on_page_width:r.width,size_on_page_height:r.height,expected_width:s.width,expected_height:s.height,potential_savings:c,image_url:l};Ut.tracksCallback("image_guide_image_outcome",{...a,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio}),e(a)}}))}))}static async trackPage(t){if(!t.length||Ut.trackingComplete)return;Ut.trackingComplete=!0;const e=t.map(Ut.trackImageOutcome),n=await Promise.all(e),i=n.reduce(((t,e)=>t+(e.potential_savings||0)),0);Ut.tracksCallback("image_guide_page_outcome",{total_potential_savings:i,red_severity_count:n.filter((t=>"red"===t.severity)).length,yellow_severity_count:n.filter((t=>"yellow"===t.severity)).length,green_severity_count:n.filter((t=>"green"===t.severity)).length,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio})}static trackInitialState(){Ut.tracksCallback("image_guide_initial_ui_state",{image_guide_state:g(Rt)})}static trackUIStateChange(){Ut.tracksCallback("image_guide_ui_state_change",{image_guide_state:g(Rt)})}}Ut.trackingComplete=!1;class Ft{constructor(t){this.loading=Ct(!0),this.currentSrc="",this.image=t,this.node=t.node;this.url=Ct(t.getURL()),this.fileSize=Ct({width:0,height:0,weight:0}),this.sizeOnPage=Ct({width:0,height:0}),this.potentialSavings=this.derivePotentialSavings(),this.oversizedRatio=this.deriveOversizedRatio(),this.expectedSize=this.deriveExpectedSize()}deriveOversizedRatio(){return Et([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getOversizedRatio(t,e)))}deriveExpectedSize(){return Et(this.sizeOnPage,(t=>this.image.getExpectedSize(t)))}derivePotentialSavings(){return Et([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getPotentialSavings(t,e)))}async updateDimensions(){const t=this.image.getSizeOnPage();this.sizeOnPage.set(t),await this.maybeUpdateWeight()}async maybeUpdateWeight(){if(this.image.getURL()===this.currentSrc)return;let t;this.loading.set(!0),this.currentSrc=this.image.getURL();try{t=await this.image.getFileSize(this.currentSrc)}catch(e){t={weight:-1,height:-1,width:-1}}this.url.set(this.currentSrc),this.fileSize.set(t),this.loading.set(!1)}}function At(t){const e=1.70158;return--t*t*((e+1)*t+e)+1}function Ht(t){const e=t-1;return e*e*e+1}function Bt(t,{delay:e=0,duration:n=400,easing:i=s}={}){const o=+getComputedStyle(t).opacity;return{delay:e,duration:n,easing:i,css:t=>"opacity: "+t*o}}function Nt(t,{delay:e=0,duration:n=400,easing:i=Ht,x:o=0,y:r=0,opacity:s=0}={}){const c=getComputedStyle(t),l=+c.opacity,a="none"===c.transform?"":c.transform,u=l*(1-s),[d,h]=v(o),[f,p]=v(r);return{delay:e,duration:n,easing:i,css:(t,e)=>`\n\t\t\ttransform: ${a} translate(${(1-t)*d}${h}, ${(1-t)*f}${p});\n\t\t\topacity: ${l-u*e}`}}function Dt(t){let e,n,i,o,s;return{c(){e=P("div"),n=T("svg"),i=T("path"),o=T("path"),s=T("path"),I(i,"d","M55.4 107.8C84.3397 107.8 107.8 84.3397 107.8 55.4C107.8 26.4603 84.3397 3 55.4 3C26.4603 3 3 26.4603 3 55.4C3 84.3397 26.4603 107.8 55.4 107.8Z"),I(i,"fill",t[1]),I(o,"d","M58 46.6V97.4L84.2 46.6H58Z"),I(o,"fill","white"),I(s,"d","M52.7 64.1V13.4L26.6 64.1H52.7Z"),I(s,"fill","white"),I(n,"viewBox","0 0 110 110"),I(n,"fill","none"),I(n,"xmlns","http://www.w3.org/2000/svg"),F(e,"width",t[0]+"px"),F(e,"height",t[0]+"px"),I(e,"class","svelte-f6jc8")},m(t,r){E(t,e,r),z(e,n),z(n,i),z(n,o),z(n,s)},p(t,[n]){2&n&&I(i,"fill",t[1]),1&n&&F(e,"width",t[0]+"px"),1&n&&F(e,"height",t[0]+"px")},i:r,o:r,d(t){t&&L(e)}}}function Wt(t,e,n){let{size:i=16}=e,{bg:o="#069E08"}=e;return t.$$set=t=>{"size"in t&&n(0,i=t.size),"bg"in t&&n(1,o=t.bg)},[i,o]}class Vt extends zt{constructor(t){super(),_t(this,t,Wt,Dt,d,{size:0,bg:1})}}function Gt(t){let e,n,i,o;return n=new Vt({props:{size:12,bg:"transparent"}}),{c(){e=P("div"),bt(n.$$.fragment),I(e,"class","spinner svelte-2eb8gc")},m(t,i){E(t,e,i),yt(n,e,null),o=!0},p:r,i(t){o||(pt(n.$$.fragment,t),i&&i.end(1),o=!0)},o(t){gt(n.$$.fragment,t),i=function(t,e,n){const i={direction:"out"};let o,c=e(t,n,i),l=!0;const d=dt;function h(){const{delay:e=0,duration:n=300,easing:i=s,tick:u=r,css:h}=c||mt;h&&(o=W(t,1,0,n,e,i,h));const f=b()+e,p=f+n;nt((()=>at(t,!1,"start"))),_((e=>{if(l){if(e>=p)return u(0,1),at(t,!1,"end"),--d.r||a(d.c),!1;if(e>=f){const t=i((e-f)/n);u(1-t,t)}}return l}))}return d.r+=1,u(c)?lt().then((()=>{c=c(i),h()})):h(),{end(e){e&&c.tick&&c.tick(1,0),l&&(o&&V(t,o),l=!1)}}}(e,Bt,{duration:300}),o=!1},d(t){t&&L(e),xt(n),t&&i&&i.end()}}}class qt extends zt{constructor(t){super(),_t(this,t,null,Gt,d,{})}}function Zt(t){let e,n;return{c(){e=T("svg"),n=T("path"),I(n,"stroke-linecap","round"),I(n,"stroke-linejoin","round"),I(n,"stroke-width","2"),I(n,"d","M5 13l4 4L19 7"),I(e,"class","w-6 h-6 svelte-jkeb2"),I(e,"fill","none"),I(e,"stroke","white"),I(e,"width","18"),I(e,"height","18"),I(e,"viewBox","0 0 24 24"),I(e,"xmlns","http://www.w3.org/2000/svg")},m(t,i){E(t,e,i),z(e,n)},p:r,i:r,o:r,d(t){t&&L(e)}}}class Kt extends zt{constructor(t){super(),_t(this,t,null,Zt,d,{})}}function Xt(t){let e,n,i;return n=new qt({}),{c(){e=P("div"),bt(n.$$.fragment),I(e,"class","bubble-inner svelte-18vhu7m")},m(t,o){E(t,e,o),yt(n,e,null),i=!0},p:r,i(t){i||(pt(n.$$.fragment,t),i=!0)},o(t){gt(n.$$.fragment,t),i=!1},d(t){t&&L(e),xt(n)}}}function Yt(t){let e,n,i,o,r,s;const c=[te,Qt,Jt],l=[];function a(t,e){return t[0]>9?0:t[0]>.99?1:2}return i=a(t),o=l[i]=c[i](t),{c(){e=P("div"),n=P("div"),o.c(),I(n,"class","label"),I(e,"class","bubble-inner svelte-18vhu7m")},m(t,o){E(t,e,o),z(e,n),l[i].m(n,null),s=!0},p(t,e){let r=i;i=a(t),i===r?l[i].p(t,e):(ht(),gt(l[r],1,1,(()=>{l[r]=null})),ft(),o=l[i],o?o.p(t,e):(o=l[i]=c[i](t),o.c()),pt(o,1),o.m(n,null))},i(t){s||(pt(o),r||nt((()=>{r=$t(n,Bt,{delay:200,duration:300}),r.start()})),s=!0)},o(t){gt(o),s=!1},d(t){t&&L(e),l[i].d()}}}function Jt(t){let e,n;return{c(){e=P("span"),e.textContent="<",n=M(" 1x"),F(e,"font-size","0.75em")},m(t,i){E(t,e,i),E(t,n,i)},p:r,i:r,o:r,d(t){t&&L(e),t&&L(n)}}}function Qt(t){let e,n,i,o;const r=[ne,ee],s=[];function c(t,e){return"normal"===t[1]?0:1}return e=c(t),n=s[e]=r[e](t),{c(){n.c(),i=O()},m(t,n){s[e].m(t,n),E(t,i,n),o=!0},p(t,o){let l=e;e=c(t),e===l?s[e].p(t,o):(ht(),gt(s[l],1,1,(()=>{s[l]=null})),ft(),n=s[e],n?n.p(t,o):(n=s[e]=r[e](t),n.c()),pt(n,1),n.m(i.parentNode,i))},i(t){o||(pt(n),o=!0)},o(t){gt(n),o=!1},d(t){s[e].d(t),t&&L(i)}}}function te(t){let e,n,i=Math.floor(t[0])+"";return{c(){e=M(i),n=M("x")},m(t,i){E(t,e,i),E(t,n,i)},p(t,n){1&n&&i!==(i=Math.floor(t[0])+"")&&U(e,i)},i:r,o:r,d(t){t&&L(e),t&&L(n)}}}function ee(t){let e,n,i=t[0].toFixed(1)+"";return{c(){e=M(i),n=M("x")},m(t,i){E(t,e,i),E(t,n,i)},p(t,n){1&n&&i!==(i=t[0].toFixed(1)+"")&&U(e,i)},i:r,o:r,d(t){t&&L(e),t&&L(n)}}}function ne(t){let e,n;return e=new Kt({}),{c(){bt(e.$$.fragment)},m(t,i){yt(e,t,i),n=!0},p:r,i(t){n||(pt(e.$$.fragment,t),n=!0)},o(t){gt(e.$$.fragment,t),n=!1},d(t){xt(e,t)}}}function ie(t){let e,n,i,o,r,s,c,l,a;const u=[Yt,Xt],d=[];function h(t,e){return!1===t[3]?0:1}return i=h(t),o=d[i]=u[i](t),{c(){e=P("div"),n=P("div"),o.c(),I(n,"class","bubble svelte-18vhu7m"),I(e,"class",r="interaction-area "+t[1]+" svelte-18vhu7m")},m(o,r){E(o,e,r),z(e,n),d[i].m(n,null),t[10](e),c=!0,l||(a=R(e,"mouseenter",t[7]),l=!0)},p(s,[l]){let a=i;i=h(t=s),i===a?d[i].p(t,l):(ht(),gt(d[a],1,1,(()=>{d[a]=null})),ft(),o=d[i],o?o.p(t,l):(o=d[i]=u[i](t),o.c()),pt(o,1),o.m(n,null)),(!c||2&l&&r!==(r="interaction-area "+t[1]+" svelte-18vhu7m"))&&I(e,"class",r)},i(n){c||(pt(o),nt((()=>{c&&(s||(s=vt(e,Nt,t[6],!0)),s.run(1))})),c=!0)},o(n){gt(o),s||(s=vt(e,Nt,t[6],!1)),s.run(0),c=!1},d(n){n&&L(e),d[i].d(),t[10](null),n&&s&&s.end(),l=!1,a()}}}function oe(t,e,n){let i,o,r,{index:s}=e,{store:c}=e;const l=c.oversizedRatio;m(t,l,(t=>n(0,i=t)));const a=c.loading;m(t,a,(t=>n(3,o=t)));const u={delay:150+50*s,duration:250,y:2,easing:At};let d;const h=function(){const t=q();return(e,n,{cancelable:i=!1}={})=>{const o=t.$$.callbacks[e];if(o){const r=H(e,n,{cancelable:i});return o.slice().forEach((e=>{e.call(t,r)})),!r.defaultPrevented}return!0}}();return t.$$set=t=>{"index"in t&&n(8,s=t.index),"store"in t&&n(9,c=t.store)},t.$$.update=()=>{1&t.$$.dirty&&n(1,r=i>4?"high":i>2.5?"medium":"normal")},[i,r,d,o,l,a,u,function(){const t=d.getBoundingClientRect();h("hover",{index:s,position:{top:t.top+t.height+10,left:t.left}})},s,c,function(t){Y[t?"unshift":"push"]((()=>{d=t,n(2,d)}))}]}class re extends zt{constructor(t){super(),_t(this,t,oe,ie,d,{index:8,store:9})}}function se(t){let e,n;const i=t[2].default,o=function(t,e,n,i){if(t){const o=$(t,e,n,i);return t[0](o)}}(i,t,t[1],null);return{c(){e=P("div"),o&&o.c(),I(e,"class","jetpack-boost-guide-portal")},m(i,r){E(i,e,r),o&&o.m(e,null),t[3](e),n=!0},p(t,[e]){o&&o.p&&(!n||2&e)&&function(t,e,n,i,o,r){if(o){const s=$(e,n,i,r);t.p(s,o)}}(o,i,t,t[1],n?function(t,e,n,i){if(t[2]&&i){const o=t[2](i(n));if(void 0===e.dirty)return o;if("object"==typeof o){const t=[],n=Math.max(e.dirty.length,o.length);for(let i=0;i<n;i+=1)t[i]=e.dirty[i]|o[i];return t}return e.dirty|o}return e.dirty}(i,t[1],e,null):function(t){if(t.ctx.length>32){const e=[],n=t.ctx.length/32;for(let t=0;t<n;t++)e[t]=-1;return e}return-1}(t[1]),null)},i(t){n||(pt(o,t),n=!0)},o(t){gt(o,t),n=!1},d(n){n&&L(e),o&&o.d(n),t[3](null)}}}function ce(t,e,n){let i,{$$slots:o={},$$scope:r}=e;var s;return Z((()=>{document.body.appendChild(i)})),s=()=>{document.body.removeChild(i)},q().$$.on_destroy.push(s),t.$$set=t=>{"$$scope"in t&&n(1,r=t.$$scope)},[i,r,o,function(t){Y[t?"unshift":"push"]((()=>{i=t,n(0,i)}))}]}class le extends zt{constructor(t){super(),_t(this,t,ce,se,d,{})}}function ae(t){let e,n;return{c(){e=T("svg"),n=T("path"),I(n,"d","M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"),I(e,"xmlns","http://www.w3.org/2000/svg"),I(e,"viewBox","0 0 24 24"),I(e,"class","svelte-1g2gjwn")},m(t,i){E(t,e,i),z(e,n)},p:r,i:r,o:r,d(t){t&&L(e)}}}class ue extends zt{constructor(t){super(),_t(this,t,null,ae,d,{})}}const{window:de}=wt;function he(t){let e,n,i,o,r=t[29]+"";return{c(){e=P("div"),n=M("The image file is "),i=M(r),o=M("x smaller than expected on this screen. This might be\n\t\t\t\t\t\tfine, but you may want to check if the image appears blurry."),I(e,"class","explanation svelte-52p8v6")},m(t,r){E(t,e,r),z(e,n),z(e,i),z(e,o)},p(t,e){8&e&&r!==(r=t[29]+"")&&U(i,r)},d(t){t&&L(e)}}}function fe(t){let e,n,i=t[6]>1&&me(t);return{c(){e=P("div"),n=M("The image size is very close to the size it appears in the browser.\n\t\t\t\t\t\t"),i&&i.c(),I(e,"class","explanation svelte-52p8v6")},m(t,o){E(t,e,o),z(e,n),i&&i.m(e,null)},p(t,n){t[6]>1?i?i.p(t,n):(i=me(t),i.c(),i.m(e,null)):i&&(i.d(1),i=null)},d(t){t&&L(e),i&&i.d()}}}function pe(t){let e;return{c(){e=P("div"),e.textContent="The image is exactly the correct size for this screen.",I(e,"class","explanation svelte-52p8v6")},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function ge(t){let e,n,i,o,r,s,c=t[4].weight>450&&$e();return{c(){e=P("div"),n=M("The image loaded is "),i=P("strong"),o=M(t[6]),r=M("x"),s=M(" larger than it appears in the browser.\n\t\t\t\t\t\t"),c&&c.c(),I(e,"class","explanation svelte-52p8v6")},m(t,l){E(t,e,l),z(e,n),z(e,i),z(i,o),z(i,r),z(e,s),c&&c.m(e,null)},p(t,n){64&n&&U(o,t[6]),t[4].weight>450?c||(c=$e(),c.c(),c.m(e,null)):c&&(c.d(1),c=null)},d(t){t&&L(e),c&&c.d()}}}function me(t){let e,n,i,o,r;return{c(){e=M("Because there are various screen sizes, it's okay for the image to be\n\t\t\t\t\t\t\t"),n=P("strong"),i=M(t[6]),o=M("x"),r=M(" than it appears on the page.")},m(t,s){E(t,e,s),E(t,n,s),z(n,i),z(n,o),E(t,r,s)},p(t,e){64&e&&U(i,t[6])},d(t){t&&L(e),t&&L(n),t&&L(r)}}}function $e(t){let e;return{c(){e=M("Try using a smaller image or reduce the file size by compressing it.")},m(t,n){E(t,e,n)},d(t){t&&L(e)}}}function ve(t){let e,n;return{c(){e=P("img"),f(e.src,n=t[5])||I(e,"src",n),I(e,"alt",t[8]),F(e,"width",t[2]+"px"),F(e,"height",t[7]+"px"),I(e,"width",t[2]),I(e,"height",t[7]),I(e,"class","svelte-52p8v6")},m(t,n){E(t,e,n)},p(t,i){32&i&&!f(e.src,n=t[5])&&I(e,"src",n),256&i&&I(e,"alt",t[8]),4&i&&F(e,"width",t[2]+"px"),128&i&&F(e,"height",t[7]+"px"),4&i&&I(e,"width",t[2]),128&i&&I(e,"height",t[7])},d(t){t&&L(e)}}}function we(t){let e;function n(t,e){return t[16]?xe:ye}let i=n(t),o=i(t);return{c(){e=P("div"),o.c(),I(e,"class","value")},m(t,n){E(t,e,n),o.m(e,null)},p(t,r){i!==(i=n(t))&&(o.d(1),o=i(t),o&&(o.c(),o.m(e,null)))},d(t){t&&L(e),o.d()}}}function be(t){let e,n,i,o,r=t[4].width+"",s=t[4].height+"";return{c(){e=P("div"),n=M(r),i=M(" x "),o=M(s),I(e,"class","value")},m(t,r){E(t,e,r),z(e,n),z(e,i),z(e,o)},p(t,e){16&e&&r!==(r=t[4].width+"")&&U(n,r),16&e&&s!==(s=t[4].height+"")&&U(o,s)},d(t){t&&L(e)}}}function ye(t){let e;return{c(){e=P("em"),e.textContent="Unknown"},m(t,n){E(t,e,n)},d(t){t&&L(e)}}}function xe(t){let e;return{c(){e=M("Loading...")},m(t,n){E(t,e,n)},d(t){t&&L(e)}}}function ke(t){let e;return{c(){e=P("em"),e.textContent="Unknown"},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function _e(t){let e;return{c(){e=M("Loading...")},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function ze(t){let e,n,i=Math.round(t[4].weight)+"";return{c(){e=M(i),n=M(" KB")},m(t,i){E(t,e,i),E(t,n,i)},p(t,n){16&n&&i!==(i=Math.round(t[4].weight)+"")&&U(e,i)},d(t){t&&L(e),t&&L(n)}}}function Se(t){let e;return{c(){e=P("em"),e.textContent="N/A"},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function Ce(t){let e;return{c(){e=M("Loading...")},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function Ee(t){let e,n,i;return{c(){e=P("strong"),n=M(t[19]),i=M(" KB")},m(t,o){E(t,e,o),z(e,n),z(e,i)},p(t,e){524288&e&&U(n,t[19])},d(t){t&&L(e)}}}function Le(t){let e,n,i,o,r,s,c,l,a,u,d,h,f,p,g,m,$,v,w,b,y,x,k,_,S,C,T,O,A,H,B,N,D,W,V,G,q,Z,K,X,Y,J,Q,tt,et,it,ot,rt,st,ct,lt,at=t[17].width+"",ut=t[17].height+"",dt=t[18].width+"",ht=t[18].height+"",ft=`${t[0].top}px`,mt=`${t[0].left}px`;function vt(t,e){return t[6]>=1.3?ge:1===t[6]?pe:t[6]>=.99&&t[6]<1.3?fe:he}function wt(t,e){return e===he?function(t){const e=t.slice(),n=Me(1/e[3]);return e[29]=n,e}(t):t}i=new Vt({props:{size:250}});let kt=vt(t),_t=kt(wt(t,kt)),zt=t[5]&&ve(t);function St(t,e){return t[4].width>0&&t[4].height>0?be:we}let Ct=St(t),Et=Ct(t);function Lt(t,e){return t[4].weight>0?ze:t[16]?_e:ke}let Pt=Lt(t),Tt=Pt(t);function Mt(t,e){return t[19]>0?Ee:t[16]?Ce:Se}let jt=Mt(t),Ot=jt(t);return ot=new ue({}),{c(){e=P("div"),n=P("div"),bt(i.$$.fragment),o=j(),r=P("div"),s=P("div"),c=P("div"),l=P("a"),a=M(t[8]),u=j(),_t.c(),d=j(),zt&&zt.c(),h=j(),f=P("div"),p=P("div"),g=P("div"),g.textContent="Image File Dimensions",m=j(),Et.c(),$=j(),v=P("div"),w=P("div"),w.textContent="Expected Dimensions",b=j(),y=P("div"),x=M(at),k=M(" x "),_=M(ut),S=j(),C=P("div"),T=P("div"),T.textContent="Size on screen",O=j(),A=P("div"),H=M(dt),B=M(" x "),N=M(ht),D=j(),W=P("div"),V=P("div"),V.textContent="Image Size",G=j(),q=P("div"),Tt.c(),Z=j(),K=P("div"),X=P("div"),X.textContent="Potential savings",Y=j(),J=P("div"),Ot.c(),Q=j(),tt=P("div"),et=P("a"),it=M("Learn how to improve site speed by optimizing images "),bt(ot.$$.fragment),I(n,"class","logo svelte-52p8v6"),I(l,"href",t[5]),I(l,"target","_blank noreferrer"),I(l,"class","svelte-52p8v6"),I(c,"class","title svelte-52p8v6"),I(s,"class","description svelte-52p8v6"),I(r,"class","preview svelte-52p8v6"),I(g,"class","label"),I(p,"class","row svelte-52p8v6"),I(w,"class","label"),I(y,"class","value"),I(v,"class","row svelte-52p8v6"),I(T,"class","label"),I(A,"class","value"),I(C,"class","row svelte-52p8v6"),I(V,"class","label"),I(q,"class","value"),I(W,"class","row svelte-52p8v6"),I(X,"class","label"),I(J,"class","value"),I(K,"class","row svelte-52p8v6"),I(et,"class","documentation svelte-52p8v6"),I(et,"href",Te),I(et,"target","_blank noreferrer"),I(tt,"class","info svelte-52p8v6"),I(f,"class","meta"),I(e,"class","jetpack-boost-guide-popup keep-guide-open svelte-52p8v6"),F(e,"top",ft),F(e,"left",mt)},m(L,P){E(L,e,P),z(e,n),yt(i,n,null),z(e,o),z(e,r),z(r,s),z(s,c),z(c,l),z(l,a),z(s,u),_t.m(s,null),z(r,d),zt&&zt.m(r,null),z(e,h),z(e,f),z(f,p),z(p,g),z(p,m),Et.m(p,null),z(f,$),z(f,v),z(v,w),z(v,b),z(v,y),z(y,x),z(y,k),z(y,_),z(f,S),z(f,C),z(C,T),z(C,O),z(C,A),z(A,H),z(A,B),z(A,N),z(f,D),z(f,W),z(W,V),z(W,G),z(W,q),Tt.m(q,null),z(f,Z),z(f,K),z(K,X),z(K,Y),z(K,J),Ot.m(J,null),z(f,Q),z(f,tt),z(tt,et),z(et,it),yt(ot,et,null),st=!0,ct||(lt=R(e,"mouseleave",t[22]),ct=!0)},p(n,i){t=n,(!st||256&i)&&U(a,t[8]),(!st||32&i)&&I(l,"href",t[5]),kt===(kt=vt(t))&&_t?_t.p(wt(t,kt),i):(_t.d(1),_t=kt(wt(t,kt)),_t&&(_t.c(),_t.m(s,null))),t[5]?zt?zt.p(t,i):(zt=ve(t),zt.c(),zt.m(r,null)):zt&&(zt.d(1),zt=null),Ct===(Ct=St(t))&&Et?Et.p(t,i):(Et.d(1),Et=Ct(t),Et&&(Et.c(),Et.m(p,null))),(!st||131072&i)&&at!==(at=t[17].width+"")&&U(x,at),(!st||131072&i)&&ut!==(ut=t[17].height+"")&&U(_,ut),(!st||262144&i)&&dt!==(dt=t[18].width+"")&&U(H,dt),(!st||262144&i)&&ht!==(ht=t[18].height+"")&&U(N,ht),Pt===(Pt=Lt(t))&&Tt?Tt.p(t,i):(Tt.d(1),Tt=Pt(t),Tt&&(Tt.c(),Tt.m(q,null))),jt===(jt=Mt(t))&&Ot?Ot.p(t,i):(Ot.d(1),Ot=jt(t),Ot&&(Ot.c(),Ot.m(J,null))),1&i&&ft!==(ft=`${t[0].top}px`)&&F(e,"top",ft),1&i&&mt!==(mt=`${t[0].left}px`)&&F(e,"left",mt)},i(t){st||(pt(i.$$.fragment,t),pt(ot.$$.fragment,t),rt||nt((()=>{rt=$t(e,Nt,{duration:150,y:4,easing:At}),rt.start()})),st=!0)},o(t){gt(i.$$.fragment,t),gt(ot.$$.fragment,t),st=!1},d(t){t&&L(e),xt(i),_t.d(),zt&&zt.d(),Et.d(),Tt.d(),Ot.d(),xt(ot),ct=!1,lt()}}}function Pe(t){let e,n,i,o,r,s=!1,c=()=>{s=!1};return nt(t[23]),n=new le({props:{$$slots:{default:[Le]},$$scope:{ctx:t}}}),{c(){bt(n.$$.fragment)},m(l,a){yt(n,l,a),i=!0,o||(r=R(de,"scroll",(()=>{s=!0,clearTimeout(e),e=setTimeout(c,100),t[23]()})),o=!0)},p(t,[i]){2&i&&!s&&(s=!0,clearTimeout(e),scrollTo(de.pageXOffset,t[1]),e=setTimeout(c,100));const o={};1074725373&i&&(o.$$scope={dirty:i,ctx:t}),n.$set(o)},i(t){i||(pt(n.$$.fragment,t),i=!0)},o(t){gt(n.$$.fragment,t),i=!1},d(t){xt(n,t),o=!1,r()}}}const Te="https://jetpack.com/support/jetpack-boost/image-performance-guide/";function Me(t){return t%1==0?t:parseFloat(t.toFixed(2))}function je(t,e,n){let i,o,s,c,l,a,u,d,h,f,g,m,$,v,w,b,y,x,k=r,_=r,z=r,S=r,C=r,E=r,L=r;t.$$.on_destroy.push((()=>k())),t.$$.on_destroy.push((()=>_())),t.$$.on_destroy.push((()=>z())),t.$$.on_destroy.push((()=>S())),t.$$.on_destroy.push((()=>C())),t.$$.on_destroy.push((()=>E())),t.$$.on_destroy.push((()=>L()));let{store:P}=e,{size:T}=e,{position:M}=e,j=0,O=0,R=0;return Z((()=>{O=j,R=M.top})),t.$$set=t=>{"store"in t&&n(20,P=t.store),"size"in t&&n(21,T=t.size),"position"in t&&n(0,M=t.position)},t.$$.update=()=>{var e;1048576&t.$$.dirty&&(n(15,i=P.loading),S(),S=p(i,(t=>n(16,w=t)))),1048576&t.$$.dirty&&(n(14,o=P.oversizedRatio),k(),k=p(o,(t=>n(3,m=t)))),1048576&t.$$.dirty&&(n(13,s=P.fileSize),_(),_=p(s,(t=>n(4,$=t)))),1048576&t.$$.dirty&&(n(12,c=P.sizeOnPage),E(),E=p(c,(t=>n(18,y=t)))),1048576&t.$$.dirty&&(n(11,l=P.potentialSavings),L(),L=p(l,(t=>n(19,x=t)))),1048576&t.$$.dirty&&(n(10,a=P.expectedSize),C(),C=p(a,(t=>n(17,b=t)))),1048576&t.$$.dirty&&(n(9,u=P.url),z(),z=p(u,(t=>n(5,v=t)))),32&t.$$.dirty&&n(8,d=v.split("/").pop()),32&t.$$.dirty&&new URL(v).origin,2097152&t.$$.dirty&&n(2,h="normal"===T?100:50),20&t.$$.dirty&&n(7,f=Math.floor(h/($.width/$.height))),8&t.$$.dirty&&n(6,g=Me(m)),2&t.$$.dirty&&0!==(e=j)&&O!==e&&n(0,M.top=R+(O-e),M)},new URL(window.location.href).origin,[M,j,h,m,$,v,g,f,d,u,a,l,c,s,o,i,w,b,y,x,P,T,function(e){K.call(this,t,e)},function(){n(1,j=de.pageYOffset)}]}class Oe extends zt{constructor(t){super(),_t(this,t,je,Pe,d,{store:20,size:21,position:0})}}function Re(t,e,n){const i=t.slice();return i[10]=e[n],i[12]=n,i}function Ie(t){let e,n,i,o,r,s,c,l=t[0],a=[];for(let e=0;e<l.length;e+=1)a[e]=Ue(Re(t,l,e));const u=t=>gt(a[t],1,1,(()=>{a[t]=null}));let d=!1!==t[1]&&Fe(t);return{c(){e=P("div"),n=P("div");for(let t=0;t<a.length;t+=1)a[t].c();i=j(),d&&d.c(),I(n,"class","previews svelte-1828btn"),I(e,"class",o="guide "+t[3]+" svelte-1828btn"),A(e,"show",!1!==t[1]),A(e,"keep-guide-open",!1!==t[1])},m(o,l){E(o,e,l),z(e,n);for(let t=0;t<a.length;t+=1)a[t]&&a[t].m(n,null);z(e,i),d&&d.m(e,null),r=!0,s||(c=R(e,"mouseleave",t[5]),s=!0)},p(t,i){if(129&i){let e;for(l=t[0],e=0;e<l.length;e+=1){const o=Re(t,l,e);a[e]?(a[e].p(o,i),pt(a[e],1)):(a[e]=Ue(o),a[e].c(),pt(a[e],1),a[e].m(n,null))}for(ht(),e=l.length;e<a.length;e+=1)u(e);ft()}!1!==t[1]?d?(d.p(t,i),2&i&&pt(d,1)):(d=Fe(t),d.c(),pt(d,1),d.m(e,null)):d&&(ht(),gt(d,1,1,(()=>{d=null})),ft()),(!r||8&i&&o!==(o="guide "+t[3]+" svelte-1828btn"))&&I(e,"class",o),(!r||10&i)&&A(e,"show",!1!==t[1]),(!r||10&i)&&A(e,"keep-guide-open",!1!==t[1])},i(t){if(!r){for(let t=0;t<l.length;t+=1)pt(a[t]);pt(d),r=!0}},o(t){a=a.filter(Boolean);for(let t=0;t<a.length;t+=1)gt(a[t]);gt(d),r=!1},d(t){t&&L(e),function(t,e){for(let n=0;n<t.length;n+=1)t[n]&&t[n].d(e)}(a,t),d&&d.d(),s=!1,c()}}}function Ue(t){let e,n;return e=new re({props:{index:t[12],store:t[10]}}),e.$on("hover",t[7]),{c(){bt(e.$$.fragment)},m(t,i){yt(e,t,i),n=!0},p(t,n){const i={};1&n&&(i.store=t[10]),e.$set(i)},i(t){n||(pt(e.$$.fragment,t),n=!0)},o(t){gt(e.$$.fragment,t),n=!1},d(t){xt(e,t)}}}function Fe(t){let e,n;return e=new Oe({props:{store:t[0][t[1]],size:t[3],position:t[2]}}),e.$on("mouseleave",t[5]),{c(){bt(e.$$.fragment)},m(t,i){yt(e,t,i),n=!0},p(t,n){const i={};3&n&&(i.store=t[0][t[1]]),8&n&&(i.size=t[3]),4&n&&(i.position=t[2]),e.$set(i)},i(t){n||(pt(e.$$.fragment,t),n=!0)},o(t){gt(e.$$.fragment,t),n=!1},d(t){xt(e,t)}}}function Ae(t){let e,n,i="active"===t[4]&&Ie(t);return{c(){i&&i.c(),e=O()},m(t,o){i&&i.m(t,o),E(t,e,o),n=!0},p(t,[n]){"active"===t[4]?i?(i.p(t,n),16&n&&pt(i,1)):(i=Ie(t),i.c(),pt(i,1),i.m(e.parentNode,e)):i&&(ht(),gt(i,1,1,(()=>{i=null})),ft())},i(t){n||(pt(i),n=!0)},o(t){gt(i),n=!1},d(t){i&&i.d(t),t&&L(e)}}}function He(t,e,n){let i,o,r;m(t,Rt,(t=>n(4,r=t)));let{stores:s}=e,c=!1;Z((()=>{s.forEach((t=>t.updateDimensions()))}));const l=s[0].sizeOnPage;m(t,l,(t=>n(8,o=t)));let a={top:0,left:0};return t.$$set=t=>{"stores"in t&&n(0,s=t.stores)},t.$$.update=()=>{256&t.$$.dirty&&n(3,i=function(t=-1,e=-1){return t<200||e<200?"micro":t<400||e<400?"small":"normal"}(o.width,o.height)),2&t.$$.dirty&&function(t=!1){t?s.forEach((t=>t.node.classList.add("jetpack-boost-guide__backdrop"))):s.forEach((t=>t.node.classList.remove("jetpack-boost-guide__backdrop")))}(!1!==c)},[s,c,a,i,r,function(t){t.relatedTarget&&t.relatedTarget.classList.contains("keep-guide-open")||n(1,c=!1)},l,function(t){const e=t.detail,i=e.index;n(2,a=e.position),n(1,c=i)},o]}class Be extends zt{constructor(t){super(),_t(this,t,He,Ae,d,{stores:0})}}const Ne=[];let De;function We(t){window.frameElement||(De=t,window.addEventListener("load",Ve))}function Ve(){window.addEventListener("resize",function(){let t;return()=>{t&&clearTimeout(t),t=setTimeout((()=>{Ne.forEach((t=>{t.updateDimensions()}))}),500)}}()),Ut.trackInitialState(),Rt.subscribe((async t=>{if("paused"===t)return;const e=await i(Array.from(document.querySelectorAll("body *:not(.jetpack-boost-guide > *):not(.jetpack-boost-guide)")),De),n=await Promise.all(e.map((t=>t.isImageTiny())));Ne.push(...function(t){const e=t.reduce(((t,e)=>{var n;if(!e.node.parentNode)return console.error("Image has no parent",e.node),t;const i=function(t){const e=t.node;if(!(t.node instanceof HTMLImageElement)&&["static","relative"].includes(getComputedStyle(e).position))return e.classList.contains("jetpack-boost-guide")||(e.classList.add("jetpack-boost-guide","relative"),e.dataset.jetpackBoostGuideId=(++Ge).toString()),e;if(!e.parentNode||!e.parentElement)return;const n=function(t){let e,n=t.parentElement;for(;n&&n instanceof HTMLElement&&n!==document.body;){const t=getComputedStyle(n),i="inline"!==t.display,o="static"===t.position,r="relative"===t.position,s="auto"!==t.zIndex;i&&(!e&&(o||r)||r&&s)&&(e=n),n=n.parentElement}return e}(e);if(null==n?void 0:n.classList.contains("jetpack-boost-guide"))return n;if(n){const e=getComputedStyle(n);if("relative"===e.position){const t=Array.from(n.children).find((t=>t.classList.contains("jetpack-boost-guide")));if(t&&t instanceof HTMLElement)return t}const i=document.createElement("div");return i.classList.add("jetpack-boost-guide"),i.dataset.jetpackBoostGuideId=(++Ge).toString(),"static"===e.position&&(n.style.position="relative"),t.node instanceof HTMLImageElement&&(i.style.top=`${t.node.offsetTop}px`),n.prepend(i),i}return e.parentElement}(e);if(!i)return console.error("Could not find a parent for image",e),t;const o=parseInt(i.dataset.jetpackBoostGuideId||""),r=(null===(n=t[o])||void 0===n?void 0:n.props.stores)||[],s=new Ft(e);return r.push(s),1===r.length&&(t[o]={target:i,intro:!0,props:{stores:r}}),t}),{});return Object.values(e).map((t=>(new Be(t),t.props.stores))).flat()}(e.filter(((t,e)=>!n[e])))),Ut.trackPage(Ne)}))}let Ge=0;function qe(t){let e,n,i,o,r,s,c,l,a,u;return n=new Vt({}),{c(){e=P("a"),bt(n.$$.fragment),i=j(),o=P("span"),r=M("Image Guide: "),s=M(t[2]),I(e,"id","jetpack-boost-guide-bar"),I(e,"href",t[0]),I(e,"class",c="ab-item "+t[1]+" svelte-itog5b")},m(c,d){var h;E(c,e,d),yt(n,e,null),z(e,i),z(e,o),z(o,r),z(o,s),l=!0,a||(u=R(e,"click",(h=t[3],function(t){return t.preventDefault(),h.call(this,t)})),a=!0)},p(t,[n]){(!l||4&n)&&U(s,t[2]),(!l||1&n)&&I(e,"href",t[0]),(!l||2&n&&c!==(c="ab-item "+t[1]+" svelte-itog5b"))&&I(e,"class",c)},i(t){l||(pt(n.$$.fragment,t),l=!0)},o(t){gt(n.$$.fragment,t),l=!1},d(t){t&&L(e),xt(n),a=!1,u()}}}function Ze(t,e,n){let i,o;m(t,Rt,(t=>n(1,i=t))),m(t,It,(t=>n(2,o=t)));let{href:r}=e,{tracksCallback:s}=e;return t.$$set=t=>{"href"in t&&n(0,r=t.href),"tracksCallback"in t&&n(4,s=t.tracksCallback)},t.$$.update=()=>{16&t.$$.dirty&&Ut.setTracksCallback(s)},[r,i,o,function(){Rt.cycle(),Ut.trackUIStateChange()},s]}class Ke extends zt{constructor(t){super(),_t(this,t,Ze,qe,d,{href:0,tracksCallback:4})}}function Xe(t,{href:e,tracksCallback:n,fetchFunction:i}){return We(i),new Ke({target:t,props:{href:e,tracksCallback:n}})}export{t as MeasurableImage,i as getMeasurableImages,Xe as setupImageGuideUI};
1
+ class t{constructor(t,e,n=null){this.node=t,this.getURLCallback=e,this.fetch=null!=n?n:window.fetch.bind(window)}getURL(){return this.getURLCallback(this.node)}getSizeOnPage(){const{width:t,height:e}=this.node.getBoundingClientRect();return{width:Math.round(t),height:Math.round(e)}}async getFileSize(t){const[e,{width:n,height:i}]=await Promise.all([this.fetchFileWeight(t),this.fetchFileDimensions(t)]);return{width:n,height:i,weight:e}}getPotentialSavings(t,e){const n=this.getOversizedRatio(t,e);return n<=1?null:Math.round(t.weight-t.weight/n)}getExpectedSize(t){const e=window.devicePixelRatio||1;return{width:Math.round(t.width*e),height:Math.round(t.height*e)}}getOversizedRatio(t,e){if(0===t.width||0===t.height)return 1;const{width:n,height:i}=this.getExpectedSize(e);return 0===n||0===i?1:t.width*t.height/(n*i)}async fetchFileWeight(t){const e=await this.fetch(t);return e.ok?parseInt(e.headers.get("content-length"),10)/1024:(console.log(`Can't get image size for ${t} likely due to a CORS error.`),-1)}async fetchFileDimensions(t){const e=new Image;return e.src=t,new Promise(((t,n)=>{e.onload=()=>{t({width:Math.round(e.width),height:Math.round(e.height)})},e.onerror=()=>{n("Unable to load image.")}}))}async isImageTiny(){try{const t=65,e=await this.fetchFileDimensions(this.getURL());return e.width<t||e.height<t}catch(t){return!0}}}function e(){}const n=t=>t;function i(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(i)}function s(t){return"function"==typeof t}function c(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}let l;function a(t,e){return t===e||(l||(l=document.createElement("a")),l.href=e,t===l.href)}function u(t,...n){if(null==t){for(const t of n)t(void 0);return e}const i=t.subscribe(...n);return i.unsubscribe?()=>i.unsubscribe():i}function d(t){let e;return u(t,(t=>e=t))(),e}function h(t,e,n){t.$$.on_destroy.push(u(e,n))}function f(t,e,n,i){return t[1]&&i?function(t,e){for(const n in e)t[n]=e[n];return t}(n.ctx.slice(),t[1](i(e))):n.ctx}function p(t){const e="string"==typeof t&&t.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);return e?[parseFloat(e[1]),e[2]||"px"]:[t,"px"]}const g="undefined"!=typeof window;let m=g?()=>window.performance.now():()=>Date.now(),$=g?t=>requestAnimationFrame(t):e;const v=new Set;function w(t){v.forEach((e=>{e.c(t)||(v.delete(e),e.f())})),0!==v.size&&$(w)}function y(t){let e;return 0===v.size&&$(w),{promise:new Promise((n=>{v.add(e={c:t,f:n})})),abort(){v.delete(e)}}}function b(t,e){t.appendChild(e)}function x(t){if(!t)return document;const e=t.getRootNode?t.getRootNode():t.ownerDocument;return e&&e.host?e:t.ownerDocument}function k(t){const e=S("style");return e.textContent="/* empty */",function(t,e){b(t.head||t,e),e.sheet}(x(t),e),e.sheet}function _(t,e,n){t.insertBefore(e,n||null)}function z(t){t.parentNode&&t.parentNode.removeChild(t)}function S(t){return document.createElement(t)}function C(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function E(t){return document.createTextNode(t)}function L(){return E(" ")}function P(){return E("")}function M(t,e,n,i){return t.addEventListener(e,n,i),()=>t.removeEventListener(e,n,i)}function j(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function O(t,e){e=""+e,t.data!==e&&(t.data=e)}function T(t,e,n,i){null==n?t.style.removeProperty(e):t.style.setProperty(e,n,i?"important":"")}function I(t,e,n){t.classList.toggle(e,!!n)}function R(t,e,{bubbles:n=!1,cancelable:i=!1}={}){return new CustomEvent(t,{detail:e,bubbles:n,cancelable:i})}const F=new Map;let U,A=0;function B(t,e,n,i,o,r,s,c=0){const l=16.666/i;let a="{\n";for(let t=0;t<=1;t+=l){const i=e+(n-e)*r(t);a+=100*t+`%{${s(i,1-i)}}\n`}const u=a+`100% {${s(n,1-n)}}\n}`,d=`__svelte_${function(t){let e=5381,n=t.length;for(;n--;)e=(e<<5)-e^t.charCodeAt(n);return e>>>0}(u)}_${c}`,h=x(t),{stylesheet:f,rules:p}=F.get(h)||function(t,e){const n={stylesheet:k(e),rules:{}};return F.set(t,n),n}(h,t);p[d]||(p[d]=!0,f.insertRule(`@keyframes ${d} ${u}`,f.cssRules.length));const g=t.style.animation||"";return t.style.animation=`${g?`${g}, `:""}${d} ${i}ms linear ${o}ms 1 both`,A+=1,d}function H(t,e){const n=(t.style.animation||"").split(", "),i=n.filter(e?t=>t.indexOf(e)<0:t=>-1===t.indexOf("__svelte")),o=n.length-i.length;o&&(t.style.animation=i.join(", "),A-=o,A||$((()=>{A||(F.forEach((t=>{const{ownerNode:e}=t.stylesheet;e&&z(e)})),F.clear())})))}function N(t){U=t}function D(){if(!U)throw new Error("Function called outside component initialization");return U}function W(t){D().$$.on_mount.push(t)}function V(t,e){const n=t.$$.callbacks[e.type];n&&n.slice().forEach((t=>t.call(this,e)))}const G=[],q=[];let Z=[];const K=[],X=Promise.resolve();let Y=!1;function J(t){Z.push(t)}const Q=new Set;let tt,et=0;function nt(){if(0!==et)return;const t=U;do{try{for(;et<G.length;){const t=G[et];et++,N(t),it(t.$$)}}catch(t){throw G.length=0,et=0,t}for(N(null),G.length=0,et=0;q.length;)q.pop()();for(let t=0;t<Z.length;t+=1){const e=Z[t];Q.has(e)||(Q.add(e),e())}Z.length=0}while(G.length);for(;K.length;)K.pop()();Y=!1,Q.clear(),N(t)}function it(t){if(null!==t.fragment){t.update(),r(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(J)}}function ot(){return tt||(tt=Promise.resolve(),tt.then((()=>{tt=null}))),tt}function rt(t,e,n){t.dispatchEvent(R(`${e?"intro":"outro"}${n}`))}const st=new Set;let ct;function lt(){ct={r:0,c:[],p:ct}}function at(){ct.r||r(ct.c),ct=ct.p}function ut(t,e){t&&t.i&&(st.delete(t),t.i(e))}function dt(t,e,n,i){if(t&&t.o){if(st.has(t))return;st.add(t),ct.c.push((()=>{st.delete(t),i&&(n&&t.d(1),i())})),t.o(e)}else i&&i()}const ht={duration:0};function ft(t,i,o){const r={direction:"in"};let c,l,a=i(t,o,r),u=!1,d=0;function h(){c&&H(t,c)}function f(){const{delay:i=0,duration:o=300,easing:r=n,tick:s=e,css:f}=a||ht;f&&(c=B(t,0,1,o,i,r,f,d++)),s(0,1);const p=m()+i,g=p+o;l&&l.abort(),u=!0,J((()=>rt(t,!0,"start"))),l=y((e=>{if(u){if(e>=g)return s(1,0),rt(t,!0,"end"),h(),u=!1;if(e>=p){const t=r((e-p)/o);s(t,1-t)}}return u}))}let p=!1;return{start(){p||(p=!0,H(t),s(a)?(a=a(r),ot().then(f)):f())},invalidate(){p=!1},end(){u&&(h(),u=!1)}}}function pt(t,i,o,c){let l,a=i(t,o,{direction:"both"}),u=c?0:1,d=null,h=null,f=null;function p(){f&&H(t,f)}function g(t,e){const n=t.b-u;return e*=Math.abs(n),{a:u,b:t.b,d:n,duration:e,start:t.start,end:t.start+e,group:t.group}}function $(i){const{delay:o=0,duration:s=300,easing:c=n,tick:$=e,css:v}=a||ht,w={start:m()+o,b:i};i||(w.group=ct,ct.r+=1),"inert"in t&&(i?void 0!==l&&(t.inert=l):(l=t.inert,t.inert=!0)),d||h?h=w:(v&&(p(),f=B(t,u,i,s,o,c,v)),i&&$(0,1),d=g(w,s),J((()=>rt(t,i,"start"))),y((e=>{if(h&&e>h.start&&(d=g(h,s),h=null,rt(t,d.b,"start"),v&&(p(),f=B(t,u,d.b,d.duration,0,c,a.css))),d)if(e>=d.end)$(u=d.b,1-u),rt(t,d.b,"end"),h||(d.b?p():--d.group.r||r(d.group.c)),d=null;else if(e>=d.start){const t=e-d.start;u=d.a+d.d*c(t/d.duration),$(u,1-u)}return!(!d&&!h)})))}return{run(t){s(a)?ot().then((()=>{a=a({direction:t?"in":"out"}),$(t)})):$(t)},end(){p(),d=h=null}}}function gt(t){return void 0!==t?.length?t:Array.from(t)}function mt(t){t&&t.c()}function $t(t,e,n){const{fragment:o,after_update:c}=t.$$;o&&o.m(e,n),J((()=>{const e=t.$$.on_mount.map(i).filter(s);t.$$.on_destroy?t.$$.on_destroy.push(...e):r(e),t.$$.on_mount=[]})),c.forEach(J)}function vt(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];Z.forEach((i=>-1===t.indexOf(i)?e.push(i):n.push(i))),n.forEach((t=>t())),Z=e}(n.after_update),r(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function wt(t,e){-1===t.$$.dirty[0]&&(G.push(t),Y||(Y=!0,X.then(nt)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function yt(t,n,i,s,c,l,a=null,u=[-1]){const d=U;N(t);const h=t.$$={fragment:null,ctx:[],props:l,update:e,not_equal:c,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(n.context||(d?d.$$.context:[])),callbacks:o(),dirty:u,skip_bound:!1,root:n.target||d.$$.root};a&&a(h.root);let f=!1;if(h.ctx=i?i(t,n.props||{},((e,n,...i)=>{const o=i.length?i[0]:n;return h.ctx&&c(h.ctx[e],h.ctx[e]=o)&&(!h.skip_bound&&h.bound[e]&&h.bound[e](o),f&&wt(t,e)),n})):[],h.update(),f=!0,r(h.before_update),h.fragment=!!s&&s(h.ctx),n.target){if(n.hydrate){const t=function(t){return Array.from(t.childNodes)}(n.target);h.fragment&&h.fragment.l(t),t.forEach(z)}else h.fragment&&h.fragment.c();n.intro&&ut(t.$$.fragment),$t(t,n.target,n.anchor),nt()}N(d)}class bt{$$=void 0;$$set=void 0;$destroy(){vt(this,1),this.$destroy=e}$on(t,n){if(!s(n))return e;const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(n),()=>{const t=i.indexOf(n);-1!==t&&i.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const xt=[];function kt(t,n=e){let i;const o=new Set;function r(e){if(c(t,e)&&(t=e,i)){const e=!xt.length;for(const e of o)e[1](),xt.push(e,t);if(e){for(let t=0;t<xt.length;t+=2)xt[t][0](xt[t+1]);xt.length=0}}}function s(e){r(e(t))}return{set:r,update:s,subscribe:function(c,l=e){const a=[c,l];return o.add(a),1===o.size&&(i=n(r,s)||e),c(t),()=>{o.delete(a),0===o.size&&i&&(i(),i=null)}}}}function _t(t,n,i){const o=!Array.isArray(t),c=o?[t]:t;if(!c.every(Boolean))throw new Error("derived() expects stores as input, got a falsy value");const l=n.length<2;return a=(t,i)=>{let a=!1;const d=[];let h=0,f=e;const p=()=>{if(h)return;f();const r=n(o?d[0]:d,t,i);l?t(r):f=s(r)?r:e},g=c.map(((t,e)=>u(t,(t=>{d[e]=t,h&=~(1<<e),a&&p()}),(()=>{h|=1<<e}))));return a=!0,p(),function(){r(g),f(),a=!1}},{subscribe:kt(i,a).subscribe};var a}const zt="jetpack-boost-guide",St={active:"Active",paused:"Paused"};let Ct=localStorage.getItem(zt);Ct&&St[Ct]||(localStorage.setItem(zt,"Active"),Ct="active");const{set:Et,update:Lt,subscribe:Pt}=kt(Ct);Pt((t=>{localStorage.setItem(zt,t)}));const Mt={subscribe:Pt,set:Et,update:Lt,cycle:()=>{Lt((t=>{const e=Object.keys(St),n=e.indexOf(t);return e[(n+1)%e.length]}))}},jt=_t(Mt,(t=>St[t]));class Ot{constructor(t){this.loading=kt(!0),this.currentSrc="",this.image=t,this.node=t.node;this.url=kt(t.getURL()),this.fileSize=kt({width:0,height:0,weight:0}),this.sizeOnPage=kt({width:0,height:0}),this.potentialSavings=this.derivePotentialSavings(),this.oversizedRatio=this.deriveOversizedRatio(),this.expectedSize=this.deriveExpectedSize()}deriveOversizedRatio(){return _t([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getOversizedRatio(t,e)))}deriveExpectedSize(){return _t(this.sizeOnPage,(t=>this.image.getExpectedSize(t)))}derivePotentialSavings(){return _t([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getPotentialSavings(t,e)))}async updateDimensions(){const t=this.image.getSizeOnPage();this.sizeOnPage.set(t),await this.maybeUpdateWeight()}async maybeUpdateWeight(){if(this.image.getURL()===this.currentSrc)return;let t;this.loading.set(!0),this.currentSrc=this.image.getURL();try{t=await this.image.getFileSize(this.currentSrc)}catch(e){t={weight:-1,height:-1,width:-1}}this.url.set(this.currentSrc),this.fileSize.set(t),this.loading.set(!1)}}class Tt{static setTracksCallback(t){Tt.tracksCallback=t}static async trackImageOutcome(t){return new Promise((e=>{t.loading.subscribe((n=>{if(!n){const n=d(t.oversizedRatio),i=function(t){return t>4?"red":t>2.5?"yellow":"green"}(n),o=d(t.fileSize),r=d(t.sizeOnPage),s=d(t.expectedSize),c=d(t.potentialSavings),l=d(t.url),a={severity:i,oversized_ratio:n,file_weight:o.weight,file_width:o.width,file_height:o.height,size_on_page_width:r.width,size_on_page_height:r.height,expected_width:s.width,expected_height:s.height,potential_savings:c,image_url:l};Tt.tracksCallback("image_guide_image_outcome",{...a,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio}),e(a)}}))}))}static async trackPage(t){if(!t.length||Tt.trackingComplete)return;Tt.trackingComplete=!0;const e=t.map(Tt.trackImageOutcome),n=await Promise.all(e),i=n.reduce(((t,e)=>t+(e.potential_savings||0)),0);Tt.tracksCallback("image_guide_page_outcome",{total_potential_savings:i,red_severity_count:n.filter((t=>"red"===t.severity)).length,yellow_severity_count:n.filter((t=>"yellow"===t.severity)).length,green_severity_count:n.filter((t=>"green"===t.severity)).length,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio})}static trackInitialState(){Tt.tracksCallback("image_guide_initial_ui_state",{image_guide_state:d(Mt)})}static trackUIStateChange(){Tt.tracksCallback("image_guide_ui_state_change",{image_guide_state:d(Mt)})}}function It(t){return t.filter((t=>{if(t instanceof HTMLImageElement){if(!t.src.trim())return!1;try{if(e=t.src,new URL(e).pathname.toLowerCase().endsWith(".svg"))return!1}catch(t){return!1}return!0}var e;if(t instanceof HTMLElement){return"none"!==getComputedStyle(t).backgroundImage}return!1}))}function Rt(t){return At(t.currentSrc)?t.currentSrc:At(t.src)?t.src:null}function Ft(t){const e=getComputedStyle(t).backgroundImage.match(/url\(\s*(['"])(.*?)\1\s*\)/i),n=window.location.href.split("#")[0];return e&&e[2]&&e[2]!==n&&At(e[2])?e[2]:null}async function Ut(e,n=null){return It(e).map((e=>e instanceof HTMLImageElement?new t(e,Rt,n):e instanceof HTMLElement&&Ft(e)?new t(e,Ft):null)).filter((t=>null!==t))}function At(t){if(t.startsWith("/")){return!t.split("?")[0].endsWith(".svg")}try{const e=new URL(t);return"http:"===e.protocol||"https:"===e.protocol}catch(t){return!1}}function Bt(t){const e=1.70158;return--t*t*((e+1)*t+e)+1}function Ht(t){const e=t-1;return e*e*e+1}function Nt(t,{delay:e=0,duration:i=400,easing:o=n}={}){const r=+getComputedStyle(t).opacity;return{delay:e,duration:i,easing:o,css:t=>"opacity: "+t*r}}function Dt(t,{delay:e=0,duration:n=400,easing:i=Ht,x:o=0,y:r=0,opacity:s=0}={}){const c=getComputedStyle(t),l=+c.opacity,a="none"===c.transform?"":c.transform,u=l*(1-s),[d,h]=p(o),[f,g]=p(r);return{delay:e,duration:n,easing:i,css:(t,e)=>`\n\t\t\ttransform: ${a} translate(${(1-t)*d}${h}, ${(1-t)*f}${g});\n\t\t\topacity: ${l-u*e}`}}function Wt(t){let n,i,o,r,s;return{c(){n=S("div"),i=C("svg"),o=C("path"),r=C("path"),s=C("path"),j(o,"d","M55.4 107.8C84.3397 107.8 107.8 84.3397 107.8 55.4C107.8 26.4603 84.3397 3 55.4 3C26.4603 3 3 26.4603 3 55.4C3 84.3397 26.4603 107.8 55.4 107.8Z"),j(o,"fill",t[1]),j(r,"d","M58 46.6V97.4L84.2 46.6H58Z"),j(r,"fill","white"),j(s,"d","M52.7 64.1V13.4L26.6 64.1H52.7Z"),j(s,"fill","white"),j(i,"viewBox","0 0 110 110"),j(i,"fill","none"),j(i,"xmlns","http://www.w3.org/2000/svg"),T(n,"width",t[0]+"px"),T(n,"height",t[0]+"px"),j(n,"class","svelte-f6jc8")},m(t,e){_(t,n,e),b(n,i),b(i,o),b(i,r),b(i,s)},p(t,[e]){2&e&&j(o,"fill",t[1]),1&e&&T(n,"width",t[0]+"px"),1&e&&T(n,"height",t[0]+"px")},i:e,o:e,d(t){t&&z(n)}}}function Vt(t,e,n){let{size:i=16}=e,{bg:o="#069E08"}=e;return t.$$set=t=>{"size"in t&&n(0,i=t.size),"bg"in t&&n(1,o=t.bg)},[i,o]}Tt.trackingComplete=!1,"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class Gt extends bt{constructor(t){super(),yt(this,t,Vt,Wt,c,{size:0,bg:1})}}function qt(t){let i,o,c,l;return o=new Gt({props:{size:12,bg:"transparent"}}),{c(){i=S("div"),mt(o.$$.fragment),j(i,"class","spinner svelte-2eb8gc")},m(t,e){_(t,i,e),$t(o,i,null),l=!0},p:e,i(t){l||(ut(o.$$.fragment,t),c&&c.end(1),l=!0)},o(t){dt(o.$$.fragment,t),t&&(c=function(t,i,o){const c={direction:"out"};let l,a=i(t,o,c),u=!0;const d=ct;let h;function f(){const{delay:i=0,duration:o=300,easing:s=n,tick:c=e,css:f}=a||ht;f&&(l=B(t,1,0,o,i,s,f));const p=m()+i,g=p+o;J((()=>rt(t,!1,"start"))),"inert"in t&&(h=t.inert,t.inert=!0),y((e=>{if(u){if(e>=g)return c(0,1),rt(t,!1,"end"),--d.r||r(d.c),!1;if(e>=p){const t=s((e-p)/o);c(1-t,t)}}return u}))}return d.r+=1,s(a)?ot().then((()=>{a=a(c),f()})):f(),{end(e){e&&"inert"in t&&(t.inert=h),e&&a.tick&&a.tick(1,0),u&&(l&&H(t,l),u=!1)}}}(i,Nt,{duration:300})),l=!1},d(t){t&&z(i),vt(o),t&&c&&c.end()}}}class Zt extends bt{constructor(t){super(),yt(this,t,null,qt,c,{})}}function Kt(t){let n,i;return{c(){n=C("svg"),i=C("path"),j(i,"stroke-linecap","round"),j(i,"stroke-linejoin","round"),j(i,"stroke-width","2"),j(i,"d","M5 13l4 4L19 7"),j(n,"class","w-6 h-6 svelte-jkeb2"),j(n,"fill","none"),j(n,"stroke","white"),j(n,"width","18"),j(n,"height","18"),j(n,"viewBox","0 0 24 24"),j(n,"xmlns","http://www.w3.org/2000/svg")},m(t,e){_(t,n,e),b(n,i)},p:e,i:e,o:e,d(t){t&&z(n)}}}class Xt extends bt{constructor(t){super(),yt(this,t,null,Kt,c,{})}}function Yt(t){let n,i,o;return i=new Zt({}),{c(){n=S("div"),mt(i.$$.fragment),j(n,"class","bubble-inner svelte-18vhu7m")},m(t,e){_(t,n,e),$t(i,n,null),o=!0},p:e,i(t){o||(ut(i.$$.fragment,t),o=!0)},o(t){dt(i.$$.fragment,t),o=!1},d(t){t&&z(n),vt(i)}}}function Jt(t){let e,n,i,o,r,s;const c=[ee,te,Qt],l=[];function a(t,e){return t[0]>9?0:t[0]>.99?1:2}return i=a(t),o=l[i]=c[i](t),{c(){e=S("div"),n=S("div"),o.c(),j(n,"class","label"),j(e,"class","bubble-inner svelte-18vhu7m")},m(t,o){_(t,e,o),b(e,n),l[i].m(n,null),s=!0},p(t,e){let r=i;i=a(t),i===r?l[i].p(t,e):(lt(),dt(l[r],1,1,(()=>{l[r]=null})),at(),o=l[i],o?o.p(t,e):(o=l[i]=c[i](t),o.c()),ut(o,1),o.m(n,null))},i(t){s||(ut(o),t&&(r||J((()=>{r=ft(n,Nt,{delay:200,duration:300}),r.start()}))),s=!0)},o(t){dt(o),s=!1},d(t){t&&z(e),l[i].d()}}}function Qt(t){let n,i;return{c(){n=S("span"),n.textContent="<",i=E(" 1x"),T(n,"font-size","0.75em")},m(t,e){_(t,n,e),_(t,i,e)},p:e,i:e,o:e,d(t){t&&(z(n),z(i))}}}function te(t){let e,n,i,o;const r=[ie,ne],s=[];function c(t,e){return"normal"===t[1]?0:1}return e=c(t),n=s[e]=r[e](t),{c(){n.c(),i=P()},m(t,n){s[e].m(t,n),_(t,i,n),o=!0},p(t,o){let l=e;e=c(t),e===l?s[e].p(t,o):(lt(),dt(s[l],1,1,(()=>{s[l]=null})),at(),n=s[e],n?n.p(t,o):(n=s[e]=r[e](t),n.c()),ut(n,1),n.m(i.parentNode,i))},i(t){o||(ut(n),o=!0)},o(t){dt(n),o=!1},d(t){t&&z(i),s[e].d(t)}}}function ee(t){let n,i,o=Math.floor(t[0])+"";return{c(){n=E(o),i=E("x")},m(t,e){_(t,n,e),_(t,i,e)},p(t,e){1&e&&o!==(o=Math.floor(t[0])+"")&&O(n,o)},i:e,o:e,d(t){t&&(z(n),z(i))}}}function ne(t){let n,i,o=t[0].toFixed(1)+"";return{c(){n=E(o),i=E("x")},m(t,e){_(t,n,e),_(t,i,e)},p(t,e){1&e&&o!==(o=t[0].toFixed(1)+"")&&O(n,o)},i:e,o:e,d(t){t&&(z(n),z(i))}}}function ie(t){let n,i;return n=new Xt({}),{c(){mt(n.$$.fragment)},m(t,e){$t(n,t,e),i=!0},p:e,i(t){i||(ut(n.$$.fragment,t),i=!0)},o(t){dt(n.$$.fragment,t),i=!1},d(t){vt(n,t)}}}function oe(t){let e,n,i,o,r,s,c,l,a;const u=[Jt,Yt],d=[];function h(t,e){return!1===t[3]?0:1}return i=h(t),o=d[i]=u[i](t),{c(){e=S("div"),n=S("div"),o.c(),j(n,"class","bubble svelte-18vhu7m"),j(e,"class",r="interaction-area "+t[1]+" svelte-18vhu7m")},m(o,r){_(o,e,r),b(e,n),d[i].m(n,null),t[10](e),c=!0,l||(a=M(e,"mouseenter",t[7]),l=!0)},p(s,[l]){let a=i;i=h(t=s),i===a?d[i].p(t,l):(lt(),dt(d[a],1,1,(()=>{d[a]=null})),at(),o=d[i],o?o.p(t,l):(o=d[i]=u[i](t),o.c()),ut(o,1),o.m(n,null)),(!c||2&l&&r!==(r="interaction-area "+t[1]+" svelte-18vhu7m"))&&j(e,"class",r)},i(n){c||(ut(o),n&&J((()=>{c&&(s||(s=pt(e,Dt,t[6],!0)),s.run(1))})),c=!0)},o(n){dt(o),n&&(s||(s=pt(e,Dt,t[6],!1)),s.run(0)),c=!1},d(n){n&&z(e),d[i].d(),t[10](null),n&&s&&s.end(),l=!1,a()}}}function re(t,e,n){let i,o,r,{index:s}=e,{store:c}=e;const l=c.oversizedRatio;h(t,l,(t=>n(0,i=t)));const a=c.loading;h(t,a,(t=>n(3,o=t)));const u={delay:150+50*s,duration:250,y:2,easing:Bt};let d;const f=function(){const t=D();return(e,n,{cancelable:i=!1}={})=>{const o=t.$$.callbacks[e];if(o){const r=R(e,n,{cancelable:i});return o.slice().forEach((e=>{e.call(t,r)})),!r.defaultPrevented}return!0}}();return t.$$set=t=>{"index"in t&&n(8,s=t.index),"store"in t&&n(9,c=t.store)},t.$$.update=()=>{1&t.$$.dirty&&n(1,r=i>4?"high":i>2.5?"medium":"normal")},[i,r,d,o,l,a,u,function(){const t=d.getBoundingClientRect();f("hover",{index:s,position:{top:t.top+t.height+10,left:t.left}})},s,c,function(t){q[t?"unshift":"push"]((()=>{d=t,n(2,d)}))}]}class se extends bt{constructor(t){super(),yt(this,t,re,oe,c,{index:8,store:9})}}function ce(t){let e,n;const i=t[2].default,o=function(t,e,n,i){if(t){const o=f(t,e,n,i);return t[0](o)}}(i,t,t[1],null);return{c(){e=S("div"),o&&o.c(),j(e,"class","jetpack-boost-guide-portal")},m(i,r){_(i,e,r),o&&o.m(e,null),t[3](e),n=!0},p(t,[e]){o&&o.p&&(!n||2&e)&&function(t,e,n,i,o,r){if(o){const s=f(e,n,i,r);t.p(s,o)}}(o,i,t,t[1],n?function(t,e,n,i){if(t[2]&&i){const o=t[2](i(n));if(void 0===e.dirty)return o;if("object"==typeof o){const t=[],n=Math.max(e.dirty.length,o.length);for(let i=0;i<n;i+=1)t[i]=e.dirty[i]|o[i];return t}return e.dirty|o}return e.dirty}(i,t[1],e,null):function(t){if(t.ctx.length>32){const e=[],n=t.ctx.length/32;for(let t=0;t<n;t++)e[t]=-1;return e}return-1}(t[1]),null)},i(t){n||(ut(o,t),n=!0)},o(t){dt(o,t),n=!1},d(n){n&&z(e),o&&o.d(n),t[3](null)}}}function le(t,e,n){let i,{$$slots:o={},$$scope:r}=e;var s;return W((()=>{document.body.appendChild(i)})),s=()=>{document.body.removeChild(i)},D().$$.on_destroy.push(s),t.$$set=t=>{"$$scope"in t&&n(1,r=t.$$scope)},[i,r,o,function(t){q[t?"unshift":"push"]((()=>{i=t,n(0,i)}))}]}class ae extends bt{constructor(t){super(),yt(this,t,le,ce,c,{})}}function ue(t){let n,i;return{c(){n=C("svg"),i=C("path"),j(i,"d","M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"),j(n,"xmlns","http://www.w3.org/2000/svg"),j(n,"viewBox","0 0 24 24"),j(n,"class","svelte-1g2gjwn")},m(t,e){_(t,n,e),b(n,i)},p:e,i:e,o:e,d(t){t&&z(n)}}}class de extends bt{constructor(t){super(),yt(this,t,null,ue,c,{})}}function he(t){let e,n,i,o,r=t[27]+"";return{c(){e=S("div"),n=E("The image file is "),i=E(r),o=E("x smaller than expected on this screen. This might be\n\t\t\t\t\t\tfine, but you may want to check if the image appears blurry."),j(e,"class","explanation svelte-52p8v6")},m(t,r){_(t,e,r),b(e,n),b(e,i),b(e,o)},p(t,e){8&e&&r!==(r=t[27]+"")&&O(i,r)},d(t){t&&z(e)}}}function fe(t){let e,n,i=t[6]>1&&me(t);return{c(){e=S("div"),n=E("The image size is very close to the size it appears in the browser.\n\t\t\t\t\t\t"),i&&i.c(),j(e,"class","explanation svelte-52p8v6")},m(t,o){_(t,e,o),b(e,n),i&&i.m(e,null)},p(t,n){t[6]>1?i?i.p(t,n):(i=me(t),i.c(),i.m(e,null)):i&&(i.d(1),i=null)},d(t){t&&z(e),i&&i.d()}}}function pe(t){let n;return{c(){n=S("div"),n.textContent="The image is exactly the correct size for this screen.",j(n,"class","explanation svelte-52p8v6")},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function ge(t){let e,n,i,o,r,s,c=t[4].weight>450&&$e();return{c(){e=S("div"),n=E("The image loaded is "),i=S("strong"),o=E(t[6]),r=E("x"),s=E(" larger than it appears in the browser.\n\t\t\t\t\t\t"),c&&c.c(),j(e,"class","explanation svelte-52p8v6")},m(t,l){_(t,e,l),b(e,n),b(e,i),b(i,o),b(i,r),b(e,s),c&&c.m(e,null)},p(t,n){64&n&&O(o,t[6]),t[4].weight>450?c||(c=$e(),c.c(),c.m(e,null)):c&&(c.d(1),c=null)},d(t){t&&z(e),c&&c.d()}}}function me(t){let e,n,i,o,r;return{c(){e=E("Because there are various screen sizes, it's okay for the image to be\n\t\t\t\t\t\t\t"),n=S("strong"),i=E(t[6]),o=E("x"),r=E(" than it appears on the page.")},m(t,s){_(t,e,s),_(t,n,s),b(n,i),b(n,o),_(t,r,s)},p(t,e){64&e&&O(i,t[6])},d(t){t&&(z(e),z(n),z(r))}}}function $e(t){let e;return{c(){e=E("Try using a smaller image or reduce the file size by compressing it.")},m(t,n){_(t,e,n)},d(t){t&&z(e)}}}function ve(t){let e,n;return{c(){e=S("img"),a(e.src,n=t[5])||j(e,"src",n),j(e,"alt",t[8]),T(e,"width",t[2]+"px"),T(e,"height",t[7]+"px"),j(e,"width",t[2]),j(e,"height",t[7]),j(e,"class","svelte-52p8v6")},m(t,n){_(t,e,n)},p(t,i){32&i&&!a(e.src,n=t[5])&&j(e,"src",n),256&i&&j(e,"alt",t[8]),4&i&&T(e,"width",t[2]+"px"),128&i&&T(e,"height",t[7]+"px"),4&i&&j(e,"width",t[2]),128&i&&j(e,"height",t[7])},d(t){t&&z(e)}}}function we(t){let e;function n(t,e){return t[16]?xe:be}let i=n(t),o=i(t);return{c(){e=S("div"),o.c(),j(e,"class","value")},m(t,n){_(t,e,n),o.m(e,null)},p(t,r){i!==(i=n(t))&&(o.d(1),o=i(t),o&&(o.c(),o.m(e,null)))},d(t){t&&z(e),o.d()}}}function ye(t){let e,n,i,o,r=t[4].width+"",s=t[4].height+"";return{c(){e=S("div"),n=E(r),i=E(" x "),o=E(s),j(e,"class","value")},m(t,r){_(t,e,r),b(e,n),b(e,i),b(e,o)},p(t,e){16&e&&r!==(r=t[4].width+"")&&O(n,r),16&e&&s!==(s=t[4].height+"")&&O(o,s)},d(t){t&&z(e)}}}function be(t){let e;return{c(){e=S("em"),e.textContent="Unknown"},m(t,n){_(t,e,n)},d(t){t&&z(e)}}}function xe(t){let e;return{c(){e=E("Loading...")},m(t,n){_(t,e,n)},d(t){t&&z(e)}}}function ke(t){let n;return{c(){n=S("em"),n.textContent="Unknown"},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function _e(t){let n;return{c(){n=E("Loading...")},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function ze(t){let e,n,i=Math.round(t[4].weight)+"";return{c(){e=E(i),n=E(" KB")},m(t,i){_(t,e,i),_(t,n,i)},p(t,n){16&n&&i!==(i=Math.round(t[4].weight)+"")&&O(e,i)},d(t){t&&(z(e),z(n))}}}function Se(t){let n;return{c(){n=S("em"),n.textContent="N/A"},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function Ce(t){let n;return{c(){n=E("Loading...")},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function Ee(t){let e,n,i;return{c(){e=S("strong"),n=E(t[19]),i=E(" KB")},m(t,o){_(t,e,o),b(e,n),b(e,i)},p(t,e){524288&e&&O(n,t[19])},d(t){t&&z(e)}}}function Le(t){let e,n,i,o,r,s,c,l,a,u,d,h,f,p,g,m,$,v,w,y,x,k,C,P,I,R,F,U,A,B,H,N,D,W,V,G,q,Z,K,X,Y,Q,tt,et,nt,it,ot,rt,st,ct,lt,at=t[17].width+"",ht=t[17].height+"",pt=t[18].width+"",gt=t[18].height+"",wt=`${t[0].top}px`,yt=`${t[0].left}px`;function bt(t,e){return t[6]>=1.3?ge:1===t[6]?pe:t[6]>=.99&&t[6]<1.3?fe:he}function xt(t,e){return e===he?function(t){const e=t.slice(),n=je(1/e[3]);return e[27]=n,e}(t):t}i=new Gt({props:{size:250}});let kt=bt(t),_t=kt(xt(t,kt)),zt=t[5]&&ve(t);function St(t,e){return t[4].width>0&&t[4].height>0?ye:we}let Ct=St(t),Et=Ct(t);function Lt(t,e){return t[4].weight>0?ze:t[16]?_e:ke}let Pt=Lt(t),Mt=Pt(t);function jt(t,e){return t[19]>0?Ee:t[16]?Ce:Se}let Ot=jt(t),Tt=Ot(t);return ot=new de({}),{c(){e=S("div"),n=S("div"),mt(i.$$.fragment),o=L(),r=S("div"),s=S("div"),c=S("div"),l=S("a"),a=E(t[8]),u=L(),_t.c(),d=L(),zt&&zt.c(),h=L(),f=S("div"),p=S("div"),g=S("div"),g.textContent="Image File Dimensions",m=L(),Et.c(),$=L(),v=S("div"),w=S("div"),w.textContent="Expected Dimensions",y=L(),x=S("div"),k=E(at),C=E(" x "),P=E(ht),I=L(),R=S("div"),F=S("div"),F.textContent="Size on screen",U=L(),A=S("div"),B=E(pt),H=E(" x "),N=E(gt),D=L(),W=S("div"),V=S("div"),V.textContent="Image Size",G=L(),q=S("div"),Mt.c(),Z=L(),K=S("div"),X=S("div"),X.textContent="Potential savings",Y=L(),Q=S("div"),Tt.c(),tt=L(),et=S("div"),nt=S("a"),it=E("Learn how to improve site speed by optimizing images "),mt(ot.$$.fragment),j(n,"class","logo svelte-52p8v6"),j(l,"href",t[5]),j(l,"target","_blank noreferrer"),j(l,"class","svelte-52p8v6"),j(c,"class","title svelte-52p8v6"),j(s,"class","description svelte-52p8v6"),j(r,"class","preview svelte-52p8v6"),j(g,"class","label"),j(p,"class","row svelte-52p8v6"),j(w,"class","label"),j(x,"class","value"),j(v,"class","row svelte-52p8v6"),j(F,"class","label"),j(A,"class","value"),j(R,"class","row svelte-52p8v6"),j(V,"class","label"),j(q,"class","value"),j(W,"class","row svelte-52p8v6"),j(X,"class","label"),j(Q,"class","value"),j(K,"class","row svelte-52p8v6"),j(nt,"class","documentation svelte-52p8v6"),j(nt,"href",Me),j(nt,"target","_blank noreferrer"),j(et,"class","info svelte-52p8v6"),j(f,"class","meta"),j(e,"class","jetpack-boost-guide-popup keep-guide-open svelte-52p8v6"),T(e,"top",wt),T(e,"left",yt)},m(z,S){_(z,e,S),b(e,n),$t(i,n,null),b(e,o),b(e,r),b(r,s),b(s,c),b(c,l),b(l,a),b(s,u),_t.m(s,null),b(r,d),zt&&zt.m(r,null),b(e,h),b(e,f),b(f,p),b(p,g),b(p,m),Et.m(p,null),b(f,$),b(f,v),b(v,w),b(v,y),b(v,x),b(x,k),b(x,C),b(x,P),b(f,I),b(f,R),b(R,F),b(R,U),b(R,A),b(A,B),b(A,H),b(A,N),b(f,D),b(f,W),b(W,V),b(W,G),b(W,q),Mt.m(q,null),b(f,Z),b(f,K),b(K,X),b(K,Y),b(K,Q),Tt.m(Q,null),b(f,tt),b(f,et),b(et,nt),b(nt,it),$t(ot,nt,null),st=!0,ct||(lt=M(e,"mouseleave",t[22]),ct=!0)},p(t,n){(!st||256&n)&&O(a,t[8]),(!st||32&n)&&j(l,"href",t[5]),kt===(kt=bt(t))&&_t?_t.p(xt(t,kt),n):(_t.d(1),_t=kt(xt(t,kt)),_t&&(_t.c(),_t.m(s,null))),t[5]?zt?zt.p(t,n):(zt=ve(t),zt.c(),zt.m(r,null)):zt&&(zt.d(1),zt=null),Ct===(Ct=St(t))&&Et?Et.p(t,n):(Et.d(1),Et=Ct(t),Et&&(Et.c(),Et.m(p,null))),(!st||131072&n)&&at!==(at=t[17].width+"")&&O(k,at),(!st||131072&n)&&ht!==(ht=t[17].height+"")&&O(P,ht),(!st||262144&n)&&pt!==(pt=t[18].width+"")&&O(B,pt),(!st||262144&n)&&gt!==(gt=t[18].height+"")&&O(N,gt),Pt===(Pt=Lt(t))&&Mt?Mt.p(t,n):(Mt.d(1),Mt=Pt(t),Mt&&(Mt.c(),Mt.m(q,null))),Ot===(Ot=jt(t))&&Tt?Tt.p(t,n):(Tt.d(1),Tt=Ot(t),Tt&&(Tt.c(),Tt.m(Q,null))),1&n&&wt!==(wt=`${t[0].top}px`)&&T(e,"top",wt),1&n&&yt!==(yt=`${t[0].left}px`)&&T(e,"left",yt)},i(t){st||(ut(i.$$.fragment,t),ut(ot.$$.fragment,t),t&&(rt||J((()=>{rt=ft(e,Dt,{duration:150,y:4,easing:Bt}),rt.start()}))),st=!0)},o(t){dt(i.$$.fragment,t),dt(ot.$$.fragment,t),st=!1},d(t){t&&z(e),vt(i),_t.d(),zt&&zt.d(),Et.d(),Mt.d(),Tt.d(),vt(ot),ct=!1,lt()}}}function Pe(t){let e,n,i,o,r,s=!1,c=()=>{s=!1};return J(t[23]),n=new ae({props:{$$slots:{default:[Le]},$$scope:{ctx:t}}}),{c(){mt(n.$$.fragment)},m(l,a){$t(n,l,a),i=!0,o||(r=M(window,"scroll",(()=>{s=!0,clearTimeout(e),e=setTimeout(c,100),t[23]()})),o=!0)},p(t,[i]){2&i&&!s&&(s=!0,clearTimeout(e),scrollTo(window.pageXOffset,t[1]),e=setTimeout(c,100));const o={};269419005&i&&(o.$$scope={dirty:i,ctx:t}),n.$set(o)},i(t){i||(ut(n.$$.fragment,t),i=!0)},o(t){dt(n.$$.fragment,t),i=!1},d(t){vt(n,t),o=!1,r()}}}const Me="https://jetpack.com/support/jetpack-boost/image-performance-guide/";function je(t){return t%1==0?t:parseFloat(t.toFixed(2))}function Oe(t,n,i){let o,r,s,c,l,a,d,h,f,p,g,m,$,v,w,y,b,x,k=e,_=e,z=e,S=e,C=e,E=e,L=e;t.$$.on_destroy.push((()=>k())),t.$$.on_destroy.push((()=>_())),t.$$.on_destroy.push((()=>z())),t.$$.on_destroy.push((()=>S())),t.$$.on_destroy.push((()=>C())),t.$$.on_destroy.push((()=>E())),t.$$.on_destroy.push((()=>L()));let{store:P}=n,{size:M}=n,{position:j}=n,O=0,T=0,I=0;return W((()=>{T=O,I=j.top})),t.$$set=t=>{"store"in t&&i(20,P=t.store),"size"in t&&i(21,M=t.size),"position"in t&&i(0,j=t.position)},t.$$.update=()=>{var e;1048576&t.$$.dirty&&(i(15,o=P.loading),S(),S=u(o,(t=>i(16,w=t)))),1048576&t.$$.dirty&&(i(14,r=P.oversizedRatio),k(),k=u(r,(t=>i(3,m=t)))),1048576&t.$$.dirty&&(i(13,s=P.fileSize),_(),_=u(s,(t=>i(4,$=t)))),1048576&t.$$.dirty&&(i(12,c=P.sizeOnPage),E(),E=u(c,(t=>i(18,b=t)))),1048576&t.$$.dirty&&(i(11,l=P.potentialSavings),L(),L=u(l,(t=>i(19,x=t)))),1048576&t.$$.dirty&&(i(10,a=P.expectedSize),C(),C=u(a,(t=>i(17,y=t)))),1048576&t.$$.dirty&&(i(9,d=P.url),z(),z=u(d,(t=>i(5,v=t)))),32&t.$$.dirty&&i(8,h=v.split("/").pop()),2097152&t.$$.dirty&&i(2,f="normal"===M?100:50),20&t.$$.dirty&&i(7,p=Math.floor(f/($.width/$.height))),8&t.$$.dirty&&i(6,g=je(m)),2&t.$$.dirty&&0!==(e=O)&&T!==e&&i(0,j.top=I+(T-e),j)},[j,O,f,m,$,v,g,p,h,d,a,l,c,s,r,o,w,y,b,x,P,M,function(e){V.call(this,t,e)},function(){i(1,O=window.pageYOffset)}]}class Te extends bt{constructor(t){super(),yt(this,t,Oe,Pe,c,{store:20,size:21,position:0})}}function Ie(t,e,n){const i=t.slice();return i[12]=e[n],i[14]=n,i}function Re(t){let e,n,i,o,r,s,c,l=gt(t[0]),a=[];for(let e=0;e<l.length;e+=1)a[e]=Fe(Ie(t,l,e));const u=t=>dt(a[t],1,1,(()=>{a[t]=null}));let d=!1!==t[1]&&Ue(t);return{c(){e=S("div"),n=S("div");for(let t=0;t<a.length;t+=1)a[t].c();i=L(),d&&d.c(),j(n,"class","previews svelte-1828btn"),j(e,"class",o="guide "+t[3]+" svelte-1828btn"),I(e,"show",!1!==t[1]),I(e,"keep-guide-open",!1!==t[1])},m(o,l){_(o,e,l),b(e,n);for(let t=0;t<a.length;t+=1)a[t]&&a[t].m(n,null);b(e,i),d&&d.m(e,null),r=!0,s||(c=M(e,"mouseleave",t[6]),s=!0)},p(t,i){if(257&i){let e;for(l=gt(t[0]),e=0;e<l.length;e+=1){const o=Ie(t,l,e);a[e]?(a[e].p(o,i),ut(a[e],1)):(a[e]=Fe(o),a[e].c(),ut(a[e],1),a[e].m(n,null))}for(lt(),e=l.length;e<a.length;e+=1)u(e);at()}!1!==t[1]?d?(d.p(t,i),2&i&&ut(d,1)):(d=Ue(t),d.c(),ut(d,1),d.m(e,null)):d&&(lt(),dt(d,1,1,(()=>{d=null})),at()),(!r||8&i&&o!==(o="guide "+t[3]+" svelte-1828btn"))&&j(e,"class",o),(!r||10&i)&&I(e,"show",!1!==t[1]),(!r||10&i)&&I(e,"keep-guide-open",!1!==t[1])},i(t){if(!r){for(let t=0;t<l.length;t+=1)ut(a[t]);ut(d),r=!0}},o(t){a=a.filter(Boolean);for(let t=0;t<a.length;t+=1)dt(a[t]);dt(d),r=!1},d(t){t&&z(e),function(t,e){for(let n=0;n<t.length;n+=1)t[n]&&t[n].d(e)}(a,t),d&&d.d(),s=!1,c()}}}function Fe(t){let e,n;return e=new se({props:{index:t[14],store:t[12]}}),e.$on("hover",t[8]),{c(){mt(e.$$.fragment)},m(t,i){$t(e,t,i),n=!0},p(t,n){const i={};1&n&&(i.store=t[12]),e.$set(i)},i(t){n||(ut(e.$$.fragment,t),n=!0)},o(t){dt(e.$$.fragment,t),n=!1},d(t){vt(e,t)}}}function Ue(t){let e,n;return e=new Te({props:{store:t[0][t[1]],size:t[3],position:t[2]}}),e.$on("mouseleave",t[6]),{c(){mt(e.$$.fragment)},m(t,i){$t(e,t,i),n=!0},p(t,n){const i={};3&n&&(i.store=t[0][t[1]]),8&n&&(i.size=t[3]),4&n&&(i.position=t[2]),e.$set(i)},i(t){n||(ut(e.$$.fragment,t),n=!0)},o(t){dt(e.$$.fragment,t),n=!1},d(t){vt(e,t)}}}function Ae(t){let e,n,i="active"===t[4]&&t[5]&&Re(t);return{c(){i&&i.c(),e=P()},m(t,o){i&&i.m(t,o),_(t,e,o),n=!0},p(t,[n]){"active"===t[4]&&t[5]?i?(i.p(t,n),48&n&&ut(i,1)):(i=Re(t),i.c(),ut(i,1),i.m(e.parentNode,e)):i&&(lt(),dt(i,1,1,(()=>{i=null})),at())},i(t){n||(ut(i),n=!0)},o(t){dt(i),n=!1},d(t){t&&z(e),i&&i.d(t)}}}function Be(t,e,n){let i,o,r,s;h(t,Mt,(t=>n(4,r=t)));let{stores:c}=e,l=!1;W((()=>{c.forEach((t=>t.updateDimensions()))}));const a=c[0].sizeOnPage;h(t,a,(t=>n(10,o=t)));let u={top:0,left:0};const d=_t(c.map((t=>t.fileSize)),(t=>t.some((t=>-1!==t.width&&-1!==t.height))));return h(t,d,(t=>n(5,s=t))),t.$$set=t=>{"stores"in t&&n(0,c=t.stores)},t.$$.update=()=>{1024&t.$$.dirty&&n(3,i=function(t=-1,e=-1){return t<200||e<200?"micro":t<400||e<400?"small":"normal"}(o.width,o.height)),2&t.$$.dirty&&function(t=!1){t?c.forEach((t=>t.node.classList.add("jetpack-boost-guide__backdrop"))):c.forEach((t=>t.node.classList.remove("jetpack-boost-guide__backdrop")))}(!1!==l)},[c,l,u,i,r,s,function(t){t.relatedTarget&&t.relatedTarget.classList.contains("keep-guide-open")||n(1,l=!1)},a,function(t){const e=t.detail,i=e.index;n(2,u=e.position),n(1,l=i)},d,o]}class He extends bt{constructor(t){super(),yt(this,t,Be,Ae,c,{stores:0})}}const Ne=[];let De;function We(t){window.frameElement||(De=t,window.addEventListener("load",Ve))}function Ve(){window.addEventListener("resize",function(){let t;return()=>{t&&clearTimeout(t),t=setTimeout((()=>{Ne.forEach((t=>{t.updateDimensions()}))}),500)}}()),Tt.trackInitialState(),Mt.subscribe((async t=>{if("paused"===t)return;const e=await Ut(Array.from(document.querySelectorAll("body *:not(.jetpack-boost-guide > *):not(.jetpack-boost-guide)")),De),n=await Promise.all(e.map((t=>t.isImageTiny())));Ne.push(...function(t){const e=t.reduce(((t,e)=>{var n;if(!e.node.parentNode)return console.error("Image has no parent",e.node),t;const i=function(t){const e=t.node;if(!(t.node instanceof HTMLImageElement)&&["static","relative"].includes(getComputedStyle(e).position))return e.classList.contains("jetpack-boost-guide")||(e.classList.add("jetpack-boost-guide","relative"),e.dataset.jetpackBoostGuideId=(++Ge).toString()),e;if(!e.parentNode||!e.parentElement)return;const n=function(t){let e,n=t.parentElement;for(;n&&n instanceof HTMLElement&&n!==document.body;){const t=getComputedStyle(n),i="inline"!==t.display,o="static"===t.position,r="relative"===t.position,s="auto"!==t.zIndex;i&&(!e&&(o||r)||r&&s)&&(e=n),n=n.parentElement}return e}(e);if(null==n?void 0:n.classList.contains("jetpack-boost-guide"))return n;if(n){const e=getComputedStyle(n);if("relative"===e.position){const t=Array.from(n.children).find((t=>t.classList.contains("jetpack-boost-guide")));if(t&&t instanceof HTMLElement)return t}const i=document.createElement("div");return i.classList.add("jetpack-boost-guide"),i.dataset.jetpackBoostGuideId=(++Ge).toString(),"static"===e.position&&(n.style.position="relative"),t.node instanceof HTMLImageElement&&(i.style.top=`${t.node.offsetTop}px`),n.prepend(i),i}return e.parentElement}(e);if(!i)return console.error("Could not find a parent for image",e),t;const o=parseInt(i.dataset.jetpackBoostGuideId||""),r=(null===(n=t[o])||void 0===n?void 0:n.props.stores)||[],s=new Ot(e);return r.push(s),1===r.length&&(t[o]={target:i,intro:!0,props:{stores:r}}),t}),{});return Object.values(e).map((t=>(new He(t),t.props.stores))).flat()}(e.filter(((t,e)=>!n[e])))),Tt.trackPage(Ne)}))}let Ge=0;function qe(t){let e,n,i,o,r,s,c,l,a,u;return n=new Gt({}),{c(){e=S("a"),mt(n.$$.fragment),i=L(),o=S("span"),r=E("Image Guide: "),s=E(t[2]),j(e,"id","jetpack-boost-guide-bar"),j(e,"href",t[0]),j(e,"class",c="ab-item "+t[1]+" svelte-itog5b")},m(c,d){var h;_(c,e,d),$t(n,e,null),b(e,i),b(e,o),b(o,r),b(o,s),l=!0,a||(u=M(e,"click",(h=t[3],function(t){return t.preventDefault(),h.call(this,t)})),a=!0)},p(t,[n]){(!l||4&n)&&O(s,t[2]),(!l||1&n)&&j(e,"href",t[0]),(!l||2&n&&c!==(c="ab-item "+t[1]+" svelte-itog5b"))&&j(e,"class",c)},i(t){l||(ut(n.$$.fragment,t),l=!0)},o(t){dt(n.$$.fragment,t),l=!1},d(t){t&&z(e),vt(n),a=!1,u()}}}function Ze(t,e,n){let i,o;h(t,Mt,(t=>n(1,i=t))),h(t,jt,(t=>n(2,o=t)));let{href:r}=e,{tracksCallback:s}=e;return t.$$set=t=>{"href"in t&&n(0,r=t.href),"tracksCallback"in t&&n(4,s=t.tracksCallback)},t.$$.update=()=>{16&t.$$.dirty&&Tt.setTracksCallback(s)},[r,i,o,function(){Mt.cycle(),Tt.trackUIStateChange()},s]}class Ke extends bt{constructor(t){super(),yt(this,t,Ze,qe,c,{href:0,tracksCallback:4})}}function Xe(t,{href:e,tracksCallback:n,fetchFunction:i}){return We(i),new Ke({target:t,props:{href:e,tracksCallback:n}})}export{t as MeasurableImage,Ut as getMeasurableImages,Xe as setupImageGuideUI};
package/build/stores/GuideState.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { Writable } from 'svelte/store';
1
+ /// <reference types="svelte" />
2
+ import { type Writable } from 'svelte/store';
2
3
  declare const store: {
3
4
  readonly active: "Active";
4
5
  readonly paused: "Paused";
package/build/stores/MeasurableImageStore.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Writable, Readable } from 'svelte/store';
1
+ import { type Writable, type Readable } from 'svelte/store';
2
2
  import { MeasurableImage } from '../MeasurableImage.js';
3
3
  import type { Dimensions, Weight } from '../MeasurableImage.js';
4
4
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-image-guide",
3
- "version": "0.5.9",
3
+ "version": "0.5.11",
4
4
  "description": "Go through the dom to analyze image size on screen vs actual file size.",
5
5
  "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/image-guide/#readme",
6
6
  "type": "module",
@@ -37,7 +37,7 @@
37
37
  "@babel/preset-react": "7.24.7",
38
38
  "@babel/preset-typescript": "7.24.7",
39
39
  "@rollup/plugin-babel": "5.3.1",
40
- "@rollup/plugin-commonjs": "25.0.7",
40
+ "@rollup/plugin-commonjs": "26.0.1",
41
41
  "@rollup/plugin-json": "4.1.0",
42
42
  "@rollup/plugin-node-resolve": "13.3.0",
43
43
  "@rollup/plugin-replace": "5.0.2",
@@ -49,14 +49,14 @@
49
49
  "postcss": "8.4.31",
50
50
  "rollup": "2.79.1",
51
51
  "rollup-plugin-postcss": "4.0.2",
52
- "rollup-plugin-svelte": "7.1.0",
53
- "rollup-plugin-svelte-svg": "0.2.3",
52
+ "rollup-plugin-svelte": "7.2.2",
53
+ "rollup-plugin-svelte-svg": "1.0.0-beta.6",
54
54
  "sass": "1.64.1",
55
- "svelte": "3.58.0",
56
- "svelte-preprocess": "5.0.4",
55
+ "svelte": "4.2.18",
56
+ "svelte-preprocess": "6.0.2",
57
57
  "tslib": "2.5.0",
58
58
  "typescript": "5.0.4",
59
- "webpack": "5.76.0",
59
+ "webpack": "5.94.0",
60
60
  "webpack-cli": "4.9.1"
61
61
  },
62
62
  "exports": {
package/rollup.config.js CHANGED
@@ -8,7 +8,7 @@ import terser from '@rollup/plugin-terser';
8
8
  import typescript from '@rollup/plugin-typescript';
9
9
  import postcss from 'rollup-plugin-postcss';
10
10
  import svelte from 'rollup-plugin-svelte';
11
- import svelteSVG from 'rollup-plugin-svelte-svg';
11
+ import { svelteSVG } from 'rollup-plugin-svelte-svg';
12
12
  import sveltePreprocess from 'svelte-preprocess';
13
13
  import tsconfig from './tsconfig.json';
14
14