@automattic/jetpack-image-guide 0.5.4 → 0.5.5

package/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.5] - 2024-01-22
+### Changed
+- Updated package dependencies. [#34427]
+
 ## [0.5.4] - 2023-10-26
 ### Changed
 - Updated package dependencies. [#32957]
@@ -84,6 +88,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 - Minor package.json change - removing private entry.
 
+[0.5.5]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.4...v0.5.5
 [0.5.4]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.3...v0.5.4
 [0.5.3]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.2...v0.5.3
 [0.5.2]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.1...v0.5.2

package/build/MeasurableImage.d.ts

@@ -6,7 +6,7 @@ export type Dimensions = {
 export type Weight = {
     weight: number;
 };
-export type FetchFn = (input: URL | RequestInfo, init?: RequestInit) => Promise<Response>;
+export type FetchFn = (url: string) => Promise<Response>;
 /**
  * A class that represents a DOM Element that
  * has an image that should be measured and
@@ -19,9 +19,9 @@ export declare class MeasurableImage {
     /**
      * Constructor.
      *
-     * @param {HTMLElement | HTMLImageElement} node -  The DOM Element that contains the image.
-     * @param {SourceCallbackFn} getURL             -  A function that takes in the node and returns the URL of the image.
-     * @param {FetchFn} fetchFn                     -  A function that fetches a URL and returns a Promise.
+     * @param {HTMLElement | HTMLImageElement} node    - The DOM Element that contains the image.
+     * @param {SourceCallbackFn}               getURL  - A function that takes in the node and returns the URL of the image.
+     * @param {FetchFn}                        fetchFn - A function that fetches a URL and returns a Promise.
      */
     constructor(node: HTMLElement | HTMLImageElement, getURL: SourceCallbackFn, fetchFn?: FetchFn | null);
     getURL(): string;
@@ -40,7 +40,7 @@ export declare class MeasurableImage {
      * the image size on page has to be multiplied by the device pixel ratio.
      *
      * @param {Dimensions} sizeOnPage - The size of the image on the page.
-     * @returns {object} - The expected size of the image.
+     * @return {object} - The expected size of the image.
      */
     getExpectedSize(sizeOnPage: Dimensions): {
         width: number;
@@ -51,23 +51,23 @@ export declare class MeasurableImage {
      * Fetches the weight of the image at the given URL,
      * by reading the Content-Length header.
      *
-     * @param {string} url -  string The URL of the image.
-     * @returns {number} Weight.
+     * @param {string} url - string The URL of the image.
+     * @return {number} Weight.
      */
     private fetchFileWeight;
     /**
      * Fetches the dimensions of the image at the given URL,
      * This creates a new image element and loads the image.
      *
-     * @param {string} url -  image url
-     * @returns {object} dimensions File dimensions.
+     * @param {string} url - image url
+     * @return {object} dimensions File dimensions.
      */
     private fetchFileDimensions;
     /**
      * Checks if the image is too small and should be ignored. Will return true on images
      * that don't load at all - we can't establish they're tiny!
      *
-     * @returns {boolean} - if the image is smaller than 65 pixels width and height return true
+     * @return {boolean} - if the image is smaller than 65 pixels width and height return true
      */
     isImageTiny(): Promise<boolean>;
 }

package/build/_unused-image-observer.d.ts

@@ -0,0 +1,15 @@
+/**
+ *
+ *
+ * ! MutationObserver is currently not used.
+ * ! This needs significant improvement before we can use it.
+ *
+ *
+ */
+type ImageCallback = (images: HTMLElement[]) => void;
+/**
+ *
+ * @param callback
+ */
+export declare function createImageObserver(callback: ImageCallback): Promise<MutationObserver>;
+export {};

package/build/analytics.d.ts

@@ -0,0 +1,47 @@
+import { MeasurableImageStore } from './stores/MeasurableImageStore';
+/**
+ * Image properties sent to tracks.
+ */
+type ImageProperties = {
+    severity: 'red' | 'yellow' | 'green';
+    oversized_ratio: number;
+    file_weight: number;
+    file_width: number;
+    file_height: number;
+    size_on_page_width: number;
+    size_on_page_height: number;
+    expected_width: number;
+    expected_height: number;
+    potential_savings: number | null;
+    image_url: string;
+};
+export type TracksCallback = (event: string, props: {
+    [key: string]: string | number;
+}) => void;
+export default class ImageGuideAnalytics {
+    static trackingComplete: boolean;
+    static tracksCallback: TracksCallback;
+    static setTracksCallback(callback: any): void;
+    /**
+     * Track the image guide analytics for a single image.
+     *
+     * @param { MeasurableImageStore } imageStore - The image store to track.
+     * @return { Promise< ImageProperties > } Promise that resolves with the properties of the image.
+     */
+    static trackImageOutcome(imageStore: MeasurableImageStore): Promise<ImageProperties>;
+    /**
+     * Track events to record the outcome of the image guide for the current page.
+     *
+     * @param {MeasurableImageStore[]} imageStores - The image stores to track.
+     */
+    static trackPage(imageStores: MeasurableImageStore[]): Promise<void>;
+    /**
+     * Track the state of the UI when the user loads a page.
+     */
+    static trackInitialState(): void;
+    /**
+     * Track the state of the UI when the user changes it.
+     */
+    static trackUIStateChange(): void;
+}
+export {};

package/build/find-image-elements.d.ts

@@ -2,30 +2,30 @@ import { FetchFn, MeasurableImage } from './MeasurableImage';
 /**
  * Get elements that either are image tags or have a background image.
  *
- * @param {Element[]} nodes -  A list of nodes to filter
- * @returns {HTMLElement[] | HTMLImageElement[]} - A list of nodes that are either image tags or have a background image.
+ * @param {Element[]} nodes - A list of nodes to filter
+ * @return {HTMLElement[] | HTMLImageElement[]} - A list of nodes that are either image tags or have a background image.
  */
 export declare function findMeasurableElements(nodes: Element[]): HTMLElement[] | HTMLImageElement[];
 /**
  * Get the current image source from a node.
  *
- * @param {HTMLImageElement} node -  HTMLImageElement
- * @returns {string | null} - The URL of the image or null if it can't be determined.
+ * @param {HTMLImageElement} node - HTMLImageElement
+ * @return {string | null} - The URL of the image or null if it can't be determined.
  */
 export declare function imageTagSource(node: HTMLImageElement): string;
 /**
  * Get the background image URL from a node.
  *
  * @param {HTMLImageElement} node - HTMLElement
- * @returns {string | null} - The URL of the image or null if it can't be determined.
+ * @return {string | null} - The URL of the image or null if it can't be determined.
  */
 export declare function backgroundImageSource(node: HTMLElement): string;
 /**
  * Create MeasurableImage objects from a list of nodes
  * and remove any nodes that can't be measured.
  *
- * @param {Element[]} domNodes - A list of nodes to measure
- * @param {(input: string, init?: Array) => Promise<Response>} fetchFn -  A function that fetches a URL and returns a Promise.
- * @returns {MeasurableImage[]} - A list of MeasurableImage objects.
+ * @param {Element[]}                                          domNodes - A list of nodes to measure
+ * @param {(input: string, init?: Array) => Promise<Response>} fetchFn  - A function that fetches a URL and returns a Promise.
+ * @return {MeasurableImage[]} - A list of MeasurableImage objects.
  */
 export declare function getMeasurableImages(domNodes: Element[], fetchFn?: FetchFn | null): Promise<MeasurableImage[]>;

package/build/guide.css

@@ -0,0 +1 @@
+div.svelte-f6jc8{align-items:center;display:flex;justify-content:center}.spinner.svelte-2eb8gc{animation:svelte-2eb8gc-pulse 1.25s ease-in-out infinite reverse}@keyframes svelte-2eb8gc-pulse{0%{transform:scale(1) rotate(0deg)}70%{transform:scale(1.4) rotate(30deg)}to{transform:scale(.9) rotate(-190deg)}}svg.svelte-jkeb2{transform:translateY(2px)}.interaction-area.svelte-18vhu7m.svelte-18vhu7m{margin-bottom:-15px;margin-left:-15px;margin-top:-15px;padding:15px}.bubble.svelte-18vhu7m.svelte-18vhu7m{background-color:#069e08;border:1px solid hsla(0,0%,100%,.05);border-radius:50%;color:#fff;cursor:default;font-family:sans-serif;font-size:.8em;font-weight:600;height:32px;position:relative;text-align:center;text-shadow:0 0 1px rgba(0,0,0,.15);transition:background-color .3s ease;width:32px}.high.svelte-18vhu7m .bubble.svelte-18vhu7m{background-color:#e52e00}.medium.svelte-18vhu7m .bubble.svelte-18vhu7m{background-color:#e98800}.bubble-inner.svelte-18vhu7m.svelte-18vhu7m{align-items:center;bottom:0;display:flex;height:100%;justify-content:center;left:0;margin:auto;position:absolute;right:0;top:0;width:100%}.guide.small .interaction-area.svelte-18vhu7m.svelte-18vhu7m{padding:15px}.guide.small .bubble.svelte-18vhu7m.svelte-18vhu7m{font-size:10px;height:28px;width:28px}.guide.micro .interaction-area.svelte-18vhu7m.svelte-18vhu7m{margin-left:-10px;margin-top:-10px;padding:10px}.guide.micro .bubble.svelte-18vhu7m.svelte-18vhu7m{border:1px solid hsla(0,0%,100%,.3);font-size:0;height:10px;width:10px}.guide.micro .bubble.svelte-18vhu7m svg{display:none}svg.svelte-1g2gjwn{height:1em;margin:0;vertical-align:middle;width:1em;fill:currentcolor}a.svelte-12bm513.svelte-12bm513{color:#3c434a!important;font-weight:600!important}a.documentation.svelte-12bm513.svelte-12bm513{color:#3c434a!important;font-weight:500!important}.preview.svelte-12bm513.svelte-12bm513{align-items:flex-start;display:flex;gap:15px;margin-bottom:15px;max-width:360px;width:100%}.preview.svelte-12bm513 img.svelte-12bm513{border-radius:3px;box-shadow:0 0 2px 1px #f2f2f2}.info.svelte-12bm513.svelte-12bm513{font-size:.9em;margin-top:15px}.jetpack-boost-guide-popup.svelte-12bm513.svelte-12bm513{background-color:#fff;background:linear-gradient(159.87deg,#f6f6f4 7.24%,#f7f4ea 64.73%,#ddedd5 116.53%);border-radius:6px;color:#3c434a;font-family:sans-serif;margin-bottom:10px;min-width:320px;overflow:hidden;padding:25px;position:fixed;text-align:left;width:fit-content;z-index:90000}.title.svelte-12bm513.svelte-12bm513{font-weight:600}.explanation.svelte-12bm513.svelte-12bm513{margin-top:5px}.description.svelte-12bm513.svelte-12bm513{font-size:.9em}.row.svelte-12bm513.svelte-12bm513{border-bottom:1px dotted #d9d9d9;display:flex;font-size:14px;gap:10px;justify-content:space-between;margin-bottom:5px}.row.svelte-12bm513.svelte-12bm513:last-child{border-bottom:none}.logo.svelte-12bm513.svelte-12bm513{bottom:-25px;opacity:.04;pointer-events:none;position:absolute;right:-50px;transform:rotate(15deg)}.guide.small .preview.svelte-12bm513.svelte-12bm513{gap:8px}.jetpack-boost-guide:not(.relative){left:0;position:absolute;top:0}.jetpack-boost-guide.relative{position:relative}.guide.svelte-1828btn{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif!important;font-size:15px!important;left:0;line-height:1.55;padding:20px;position:absolute;top:0;z-index:8000}.guide.small.svelte-1828btn{font-size:13px}.guide.micro.svelte-1828btn{font-size:13px;padding:10px}.guide.show.svelte-1828btn{z-index:9000}.previews.svelte-1828btn{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:15px;width:100%}.jetpack-boost-guide__backdrop{filter:brightness(.3);transition:opacity .2s ease-in-out,filter .2s ease-in-out}#jetpack-boost-guide-bar.ab-item.svelte-itog5b{align-items:center;display:flex;gap:10px}#jetpack-boost-guide-bar.ab-item.paused.svelte-itog5b svg{filter:grayscale(100%) contrast(1.7)}

package/build/index.d.ts

@@ -1,4 +1,22 @@
-import { Dimensions, MeasurableImage, Weight } from './MeasurableImage';
+import { Dimensions, FetchFn, MeasurableImage, Weight } from './MeasurableImage';
+import { TracksCallback } from './analytics';
 import { getMeasurableImages } from './find-image-elements';
+import AdminBarToggle from './ui/AdminBarToggle.svelte';
 export { MeasurableImage, getMeasurableImages };
 export type { Weight, Dimensions };
+type ImageGuideUIOptions = {
+    href: string;
+    tracksCallback: TracksCallback;
+    fetchFunction: FetchFn;
+};
+/**
+ * Set up the Image Guide UI in the given target parent.
+ *
+ * @param {string}   target              - The parent element to mount the UI in.
+ * @param {object}   args                - The arguments to pass to the UI.
+ * @param {string}   args.href           - The URL to the image guide.
+ * @param {Function} args.tracksCallback - The callback to call when tracking an event.
+ * @param {Function} args.fetchFunction  - The function to use to fetch the image weight.
+ * @return {object} The Svelte component instance.
+ */
+export declare function setupImageGuideUI(target: HTMLElement, { href, tracksCallback, fetchFunction }: ImageGuideUIOptions): AdminBarToggle;

package/build/index.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ImageGuideLibrary=e():t.ImageGuideLibrary=e()}(self,(()=>(()=>{"use strict";var t={38:(t,e,n)=>{n.d(e,{z:()=>i});var r=function(t,e,n,r){return new(n||(n=Promise))((function(o,i){function u(t){try{c(r.next(t))}catch(t){i(t)}}function a(t){try{c(r.throw(t))}catch(t){i(t)}}function c(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(u,a)}c((r=r.apply(t,e||[])).next())}))},o=function(t,e){var n,r,o,i,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function a(a){return function(c){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,a[0]&&(u=0)),u;)try{if(n=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return u.label++,{value:a[1],done:!1};case 5:u.label++,r=a[1],a=[0];continue;case 7:a=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){u=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){u.label=a[1];break}if(6===a[0]&&u.label<o[1]){u.label=o[1],o=a;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(a);break}o[2]&&u.ops.pop(),u.trys.pop();continue}a=e.call(t,u)}catch(t){a=[6,t],r=0}finally{n=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,c])}}},i=function(){function t(t,e,n){void 0===n&&(n=null),this.node=t,this.getURLCallback=e,this.fetch=null!=n?n:window.fetch.bind(window)}return t.prototype.getURL=function(){return this.getURLCallback(this.node)},t.prototype.getSizeOnPage=function(){var t=this.node.getBoundingClientRect(),e=t.width,n=t.height;return{width:Math.round(e),height:Math.round(n)}},t.prototype.getFileSize=function(t){return r(this,void 0,void 0,(function(){var e,n,r,i,u;return o(this,(function(o){switch(o.label){case 0:return[4,Promise.all([this.fetchFileWeight(t),this.fetchFileDimensions(t)])];case 1:return e=o.sent(),n=e[0],r=e[1],i=r.width,u=r.height,[2,{width:i,height:u,weight:n}]}}))}))},t.prototype.getPotentialSavings=function(t,e){var n=this.getOversizedRatio(t,e);return n<=1?null:Math.round(t.weight-t.weight/n)},t.prototype.getExpectedSize=function(t){var e=window.devicePixelRatio||1;return{width:Math.round(t.width*e),height:Math.round(t.height*e)}},t.prototype.getOversizedRatio=function(t,e){if(0===t.width||0===t.height)return 1;var n=this.getExpectedSize(e),r=n.width,o=n.height;return 0===r||0===o?1:t.width*t.height/(r*o)},t.prototype.fetchFileWeight=function(t){return r(this,void 0,void 0,(function(){var e;return o(this,(function(n){switch(n.label){case 0:return[4,this.fetch(t)];case 1:return(e=n.sent()).ok?[2,parseInt(e.headers.get("content-length"),10)/1024]:(console.log("Can't get image size for ".concat(t," likely due to a CORS error.")),[2,-1])}}))}))},t.prototype.fetchFileDimensions=function(t){return r(this,void 0,void 0,(function(){var e;return o(this,(function(n){return(e=new Image).src=t,[2,new Promise((function(t,n){e.onload=function(){t({width:Math.round(e.width),height:Math.round(e.height)})},e.onerror=function(){n("Unable to load image.")}}))]}))}))},t.prototype.isImageTiny=function(){return r(this,void 0,void 0,(function(){var t,e;return o(this,(function(n){switch(n.label){case 0:return n.trys.push([0,2,,3]),t=65,[4,this.fetchFileDimensions(this.getURL())];case 1:return[2,(e=n.sent()).width<t||e.height<t];case 2:return n.sent(),[2,!0];case 3:return[2]}}))}))},t}()},705:(t,e,n)=>{n.d(e,{RK:()=>c});var r=n(38),o=function(t,e,n,r){return new(n||(n=Promise))((function(o,i){function u(t){try{c(r.next(t))}catch(t){i(t)}}function a(t){try{c(r.throw(t))}catch(t){i(t)}}function c(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(u,a)}c((r=r.apply(t,e||[])).next())}))},i=function(t,e){var n,r,o,i,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function a(a){return function(c){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,a[0]&&(u=0)),u;)try{if(n=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return u.label++,{value:a[1],done:!1};case 5:u.label++,r=a[1],a=[0];continue;case 7:a=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){u=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){u.label=a[1];break}if(6===a[0]&&u.label<o[1]){u.label=o[1],o=a;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(a);break}o[2]&&u.ops.pop(),u.trys.pop();continue}a=e.call(t,u)}catch(t){a=[6,t],r=0}finally{n=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,c])}}};function u(t){return l(t.currentSrc)?t.currentSrc:l(t.src)?t.src:null}function a(t){var e=getComputedStyle(t).backgroundImage.match(/url\(\s*(['"])(.*?)\1\s*\)/i),n=window.location.href.split("#")[0];return e&&e[2]&&e[2]!==n&&l(e[2])?e[2]:null}function c(t,e){return void 0===e&&(e=null),o(this,void 0,void 0,(function(){var n;return i(this,(function(o){return n=function(t){return t.filter((function(t){return t instanceof HTMLImageElement||t instanceof HTMLElement&&"none"!==getComputedStyle(t).backgroundImage}))}(t),[2,n.map((function(t){return t instanceof HTMLImageElement?new r.z(t,u,e):t instanceof HTMLElement&&a(t)?new r.z(t,a):null})).filter((function(t){return null!==t}))]}))}))}function l(t){if(t.startsWith("/"))return!t.split("?")[0].endsWith(".svg");try{var e=new URL(t);return"http:"===e.protocol||"https:"===e.protocol}catch(t){return!1}}}},e={};function n(r){var o=e[r];if(void 0!==o)return o.exports;var i=e[r]={exports:{}};return t[r](i,i.exports,n),i.exports}n.d=(t,e)=>{for(var r in e)n.o(e,r)&&!n.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{n.r(r),n.d(r,{MeasurableImage:()=>t.z,getMeasurableImages:()=>e.RK});var t=n(38),e=n(705)})(),r})()));
+function t(t,e,n,i){return new(n||(n=Promise))((function(o,r){function s(t){try{l(i.next(t))}catch(t){r(t)}}function c(t){try{l(i.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(s,c)}l((i=i.apply(t,e||[])).next())}))}class e{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)}}getFileSize(e){return t(this,void 0,void 0,(function*(){const[t,{width:n,height:i}]=yield Promise.all([this.fetchFileWeight(e),this.fetchFileDimensions(e)]);return{width:n,height:i,weight:t}}))}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)}fetchFileWeight(e){return t(this,void 0,void 0,(function*(){const t=yield this.fetch(e);return t.ok?parseInt(t.headers.get("content-length"),10)/1024:(console.log(`Can't get image size for ${e} likely due to a CORS error.`),-1)}))}fetchFileDimensions(e){return t(this,void 0,void 0,(function*(){const t=new Image;return t.src=e,new Promise(((e,n)=>{t.onload=()=>{e({width:Math.round(t.width),height:Math.round(t.height)})},t.onerror=()=>{n("Unable to load image.")}}))}))}isImageTiny(){return t(this,void 0,void 0,(function*(){try{const t=65,e=yield this.fetchFileDimensions(this.getURL());return e.width<t||e.height<t}catch(t){return!0}}))}}function n(t){return r(t.currentSrc)?t.currentSrc:r(t.src)?t.src:null}function i(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&&r(e[2])?e[2]:null}function o(o,r=null){return t(this,void 0,void 0,(function*(){return function(t){return t.filter((t=>t instanceof HTMLImageElement||t instanceof HTMLElement&&"none"!==getComputedStyle(t).backgroundImage))}(o).map((t=>t instanceof HTMLImageElement?new e(t,n,r):t instanceof HTMLElement&&i(t)?new e(t,i):null)).filter((t=>null!==t))}))}function r(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 s(){}const c=t=>t;function l(t){return t()}function a(){return Object.create(null)}function u(t){t.forEach(l)}function d(t){return"function"==typeof t}function h(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}let f;function g(t,e){return f||(f=document.createElement("a")),f.href=e,t===f.href}function p(t,...e){if(null==t)return s;const n=t.subscribe(...e);return n.unsubscribe?()=>n.unsubscribe():n}function m(t){let e;return p(t,(t=>e=t))(),e}function $(t,e,n){t.$$.on_destroy.push(p(e,n))}function v(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 w(t){const e="string"==typeof t&&t.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);return e?[parseFloat(e[1]),e[2]||"px"]:[t,"px"]}const b="undefined"!=typeof window;let y=b?()=>window.performance.now():()=>Date.now(),x=b?t=>requestAnimationFrame(t):s;const k=new Set;function _(t){k.forEach((e=>{e.c(t)||(k.delete(e),e.f())})),0!==k.size&&x(_)}function z(t){let e;return 0===k.size&&x(_),{promise:new Promise((n=>{k.add(e={c:t,f:n})})),abort(){k.delete(e)}}}function S(t,e){t.appendChild(e)}function C(t){if(!t)return document;const e=t.getRootNode?t.getRootNode():t.ownerDocument;return e&&e.host?e:t.ownerDocument}function E(t){const e=j("style");return function(t,e){S(t.head||t,e),e.sheet}(C(t),e),e.sheet}function L(t,e,n){t.insertBefore(e,n||null)}function P(t){t.parentNode&&t.parentNode.removeChild(t)}function j(t){return document.createElement(t)}function O(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function T(t){return document.createTextNode(t)}function M(){return T(" ")}function R(){return T("")}function I(t,e,n,i){return t.addEventListener(e,n,i),()=>t.removeEventListener(e,n,i)}function U(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function F(t,e){e=""+e,t.data!==e&&(t.data=e)}function A(t,e,n,i){null===n?t.style.removeProperty(e):t.style.setProperty(e,n,i?"important":"")}function H(t,e,n){t.classList[n?"add":"remove"](e)}function B(t,e,{bubbles:n=!1,cancelable:i=!1}={}){const o=document.createEvent("CustomEvent");return o.initCustomEvent(t,n,i,e),o}const N=new Map;let D,W=0;function V(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=C(t),{stylesheet:f,rules:g}=N.get(h)||function(t,e){const n={stylesheet:E(e),rules:{}};return N.set(t,n),n}(h,t);g[d]||(g[d]=!0,f.insertRule(`@keyframes ${d} ${u}`,f.cssRules.length));const p=t.style.animation||"";return t.style.animation=`${p?`${p}, `:""}${d} ${i}ms linear ${o}ms 1 both`,W+=1,d}function G(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(", "),W-=o,W||x((()=>{W||(N.forEach((t=>{const{ownerNode:e}=t.stylesheet;e&&P(e)})),N.clear())})))}function q(t){D=t}function Z(){if(!D)throw new Error("Function called outside component initialization");return D}function K(t){Z().$$.on_mount.push(t)}function X(t,e){const n=t.$$.callbacks[e.type];n&&n.slice().forEach((t=>t.call(this,e)))}const Y=[],J=[];let Q=[];const tt=[],et=Promise.resolve();let nt=!1;function it(t){Q.push(t)}const ot=new Set;let rt,st=0;function ct(){if(0!==st)return;const t=D;do{try{for(;st<Y.length;){const t=Y[st];st++,q(t),lt(t.$$)}}catch(t){throw Y.length=0,st=0,t}for(q(null),Y.length=0,st=0;J.length;)J.pop()();for(let t=0;t<Q.length;t+=1){const e=Q[t];ot.has(e)||(ot.add(e),e())}Q.length=0}while(Y.length);for(;tt.length;)tt.pop()();nt=!1,ot.clear(),q(t)}function lt(t){if(null!==t.fragment){t.update(),u(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(it)}}function at(){return rt||(rt=Promise.resolve(),rt.then((()=>{rt=null}))),rt}function ut(t,e,n){t.dispatchEvent(B(`${e?"intro":"outro"}${n}`))}const dt=new Set;let ht;function ft(){ht={r:0,c:[],p:ht}}function gt(){ht.r||u(ht.c),ht=ht.p}function pt(t,e){t&&t.i&&(dt.delete(t),t.i(e))}function mt(t,e,n,i){if(t&&t.o){if(dt.has(t))return;dt.add(t),ht.c.push((()=>{dt.delete(t),i&&(n&&t.d(1),i())})),t.o(e)}else i&&i()}const $t={duration:0};function vt(t,e,n){const i={direction:"in"};let o,r,l=e(t,n,i),a=!1,u=0;function h(){o&&G(t,o)}function f(){const{delay:e=0,duration:n=300,easing:i=c,tick:d=s,css:f}=l||$t;f&&(o=V(t,0,1,n,e,i,f,u++)),d(0,1);const g=y()+e,p=g+n;r&&r.abort(),a=!0,it((()=>ut(t,!0,"start"))),r=z((e=>{if(a){if(e>=p)return d(1,0),ut(t,!0,"end"),h(),a=!1;if(e>=g){const t=i((e-g)/n);d(t,1-t)}}return a}))}let g=!1;return{start(){g||(g=!0,G(t),d(l)?(l=l(i),at().then(f)):f())},invalidate(){g=!1},end(){a&&(h(),a=!1)}}}function wt(t,e,n,i){const o={direction:"both"};let r=e(t,n,o),l=i?0:1,a=null,h=null,f=null;function g(){f&&G(t,f)}function p(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=c,tick:d=s,css:m}=r||$t,$={start:y()+n,b:e};e||($.group=ht,ht.r+=1),a||h?h=$:(m&&(g(),f=V(t,l,e,i,n,o,m)),e&&d(0,1),a=p($,i),it((()=>ut(t,e,"start"))),z((e=>{if(h&&e>h.start&&(a=p(h,i),h=null,ut(t,a.b,"start"),m&&(g(),f=V(t,l,a.b,a.duration,0,o,r.css))),a)if(e>=a.end)d(l=a.b,1-l),ut(t,a.b,"end"),h||(a.b?g():--a.group.r||u(a.group.c)),a=null;else if(e>=a.start){const t=e-a.start;l=a.a+a.d*o(t/a.duration),d(l,1-l)}return!(!a&&!h)})))}return{run(t){d(r)?at().then((()=>{r=r(o),m(t)})):m(t)},end(){g(),a=h=null}}}const bt="undefined"!=typeof window?window:"undefined"!=typeof globalThis?globalThis:global;function yt(t){t&&t.c()}function xt(t,e,n,i){const{fragment:o,after_update:r}=t.$$;o&&o.m(e,n),i||it((()=>{const e=t.$$.on_mount.map(l).filter(d);t.$$.on_destroy?t.$$.on_destroy.push(...e):u(e),t.$$.on_mount=[]})),r.forEach(it)}function kt(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];Q.forEach((i=>-1===t.indexOf(i)?e.push(i):n.push(i))),n.forEach((t=>t())),Q=e}(n.after_update),u(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function _t(t,e){-1===t.$$.dirty[0]&&(Y.push(t),nt||(nt=!0,et.then(ct)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function zt(t,e,n,i,o,r,c,l=[-1]){const d=D;q(t);const h=t.$$={fragment:null,ctx:[],props:r,update:s,not_equal:o,bound:a(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(d?d.$$.context:[])),callbacks:a(),dirty:l,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&&_t(t,e)),n})):[],h.update(),f=!0,u(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(P)}else h.fragment&&h.fragment.c();e.intro&&pt(t.$$.fragment),xt(t,e.target,e.anchor,e.customElement),ct()}q(d)}class St{$destroy(){kt(this,1),this.$destroy=s}$on(t,e){if(!d(e))return s;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 Ct=[];function Et(t,e=s){let n;const i=new Set;function o(e){if(h(t,e)&&(t=e,n)){const e=!Ct.length;for(const e of i)e[1](),Ct.push(e,t);if(e){for(let t=0;t<Ct.length;t+=2)Ct[t][0](Ct[t+1]);Ct.length=0}}}return{set:o,update:function(e){o(e(t))},subscribe:function(r,c=s){const l=[r,c];return i.add(l),1===i.size&&(n=e(o)||s),r(t),()=>{i.delete(l),0===i.size&&n&&(n(),n=null)}}}}function Lt(t,e,n){const i=!Array.isArray(t),o=i?[t]:t,r=e.length<2;return c=t=>{let n=!1;const c=[];let l=0,a=s;const h=()=>{if(l)return;a();const n=e(i?c[0]:c,t);r?t(n):a=d(n)?n:s},f=o.map(((t,e)=>p(t,(t=>{c[e]=t,l&=~(1<<e),n&&h()}),(()=>{l|=1<<e}))));return n=!0,h(),function(){u(f),a(),n=!1}},{subscribe:Et(n,c).subscribe};var c}const Pt="jetpack-boost-guide",jt={active:"Active",paused:"Paused"};let Ot=localStorage.getItem(Pt);Ot&&jt[Ot]||(localStorage.setItem(Pt,"Active"),Ot="active");const{set:Tt,update:Mt,subscribe:Rt}=Et(Ot);Rt((t=>{localStorage.setItem(Pt,t)}));const It={subscribe:Rt,set:Tt,update:Mt,cycle:()=>{Mt((t=>{const e=Object.keys(jt),n=e.indexOf(t);return e[(n+1)%e.length]}))}},Ut=Lt(It,(t=>jt[t]));class Ft{static setTracksCallback(t){Ft.tracksCallback=t}static trackImageOutcome(e){return t(this,void 0,void 0,(function*(){return new Promise((t=>{e.loading.subscribe((n=>{if(!n){const n=m(e.oversizedRatio),i=function(t){return t>4?"red":t>2.5?"yellow":"green"}(n),o=m(e.fileSize),r=m(e.sizeOnPage),s=m(e.expectedSize),c=m(e.potentialSavings),l=m(e.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};Ft.tracksCallback("image_guide_image_outcome",Object.assign(Object.assign({},a),{window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio})),t(a)}}))}))}))}static trackPage(e){return t(this,void 0,void 0,(function*(){if(!e.length||Ft.trackingComplete)return;Ft.trackingComplete=!0;const t=e.map(Ft.trackImageOutcome),n=yield Promise.all(t),i=n.reduce(((t,e)=>t+(e.potential_savings||0)),0);Ft.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(){Ft.tracksCallback("image_guide_initial_ui_state",{image_guide_state:m(It)})}static trackUIStateChange(){Ft.tracksCallback("image_guide_ui_state_change",{image_guide_state:m(It)})}}Ft.trackingComplete=!1;class At{constructor(t){this.loading=Et(!0),this.currentSrc="",this.image=t,this.node=t.node;this.url=Et(t.getURL()),this.fileSize=Et({width:0,height:0,weight:0}),this.sizeOnPage=Et({width:0,height:0}),this.potentialSavings=this.derivePotentialSavings(),this.oversizedRatio=this.deriveOversizedRatio(),this.expectedSize=this.deriveExpectedSize()}deriveOversizedRatio(){return Lt([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getOversizedRatio(t,e)))}deriveExpectedSize(){return Lt(this.sizeOnPage,(t=>this.image.getExpectedSize(t)))}derivePotentialSavings(){return Lt([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getPotentialSavings(t,e)))}updateDimensions(){return t(this,void 0,void 0,(function*(){const t=this.image.getSizeOnPage();this.sizeOnPage.set(t),yield this.maybeUpdateWeight()}))}maybeUpdateWeight(){return t(this,void 0,void 0,(function*(){if(this.image.getURL()===this.currentSrc)return;let t;this.loading.set(!0),this.currentSrc=this.image.getURL();try{t=yield 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 Ht(t){const e=1.70158;return--t*t*((e+1)*t+e)+1}function Bt(t){const e=t-1;return e*e*e+1}function Nt(t,{delay:e=0,duration:n=400,easing:i=c}={}){const o=+getComputedStyle(t).opacity;return{delay:e,duration:n,easing:i,css:t=>"opacity: "+t*o}}function Dt(t,{delay:e=0,duration:n=400,easing:i=Bt,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]=w(o),[f,g]=w(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 e,n,i,o,r;return{c(){e=j("div"),n=O("svg"),i=O("path"),o=O("path"),r=O("path"),U(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"),U(i,"fill",t[1]),U(o,"d","M58 46.6V97.4L84.2 46.6H58Z"),U(o,"fill","white"),U(r,"d","M52.7 64.1V13.4L26.6 64.1H52.7Z"),U(r,"fill","white"),U(n,"viewBox","0 0 110 110"),U(n,"fill","none"),U(n,"xmlns","http://www.w3.org/2000/svg"),A(e,"width",t[0]+"px"),A(e,"height",t[0]+"px"),U(e,"class","svelte-f6jc8")},m(t,s){L(t,e,s),S(e,n),S(n,i),S(n,o),S(n,r)},p(t,[n]){2&n&&U(i,"fill",t[1]),1&n&&A(e,"width",t[0]+"px"),1&n&&A(e,"height",t[0]+"px")},i:s,o:s,d(t){t&&P(e)}}}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]}class Gt extends St{constructor(t){super(),zt(this,t,Vt,Wt,h,{size:0,bg:1})}}function qt(t){let e,n,i,o;return n=new Gt({props:{size:12,bg:"transparent"}}),{c(){e=j("div"),yt(n.$$.fragment),U(e,"class","spinner svelte-2eb8gc")},m(t,i){L(t,e,i),xt(n,e,null),o=!0},p:s,i(t){o||(pt(n.$$.fragment,t),i&&i.end(1),o=!0)},o(t){mt(n.$$.fragment,t),i=function(t,e,n){const i={direction:"out"};let o,r=e(t,n,i),l=!0;const a=ht;function h(){const{delay:e=0,duration:n=300,easing:i=c,tick:d=s,css:h}=r||$t;h&&(o=V(t,1,0,n,e,i,h));const f=y()+e,g=f+n;it((()=>ut(t,!1,"start"))),z((e=>{if(l){if(e>=g)return d(0,1),ut(t,!1,"end"),--a.r||u(a.c),!1;if(e>=f){const t=i((e-f)/n);d(1-t,t)}}return l}))}return a.r+=1,d(r)?at().then((()=>{r=r(i),h()})):h(),{end(e){e&&r.tick&&r.tick(1,0),l&&(o&&G(t,o),l=!1)}}}(e,Nt,{duration:300}),o=!1},d(t){t&&P(e),kt(n),t&&i&&i.end()}}}class Zt extends St{constructor(t){super(),zt(this,t,null,qt,h,{})}}function Kt(t){let e,n;return{c(){e=O("svg"),n=O("path"),U(n,"stroke-linecap","round"),U(n,"stroke-linejoin","round"),U(n,"stroke-width","2"),U(n,"d","M5 13l4 4L19 7"),U(e,"class","w-6 h-6 svelte-jkeb2"),U(e,"fill","none"),U(e,"stroke","white"),U(e,"width","18"),U(e,"height","18"),U(e,"viewBox","0 0 24 24"),U(e,"xmlns","http://www.w3.org/2000/svg")},m(t,i){L(t,e,i),S(e,n)},p:s,i:s,o:s,d(t){t&&P(e)}}}class Xt extends St{constructor(t){super(),zt(this,t,null,Kt,h,{})}}function Yt(t){let e,n,i;return n=new Zt({}),{c(){e=j("div"),yt(n.$$.fragment),U(e,"class","bubble-inner svelte-18vhu7m")},m(t,o){L(t,e,o),xt(n,e,null),i=!0},p:s,i(t){i||(pt(n.$$.fragment,t),i=!0)},o(t){mt(n.$$.fragment,t),i=!1},d(t){t&&P(e),kt(n)}}}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=j("div"),n=j("div"),o.c(),U(n,"class","label"),U(e,"class","bubble-inner svelte-18vhu7m")},m(t,o){L(t,e,o),S(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):(ft(),mt(l[r],1,1,(()=>{l[r]=null})),gt(),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||it((()=>{r=vt(n,Nt,{delay:200,duration:300}),r.start()})),s=!0)},o(t){mt(o),s=!1},d(t){t&&P(e),l[i].d()}}}function Qt(t){let e,n;return{c(){e=j("span"),e.textContent="<",n=T(" 1x"),A(e,"font-size","0.75em")},m(t,i){L(t,e,i),L(t,n,i)},p:s,i:s,o:s,d(t){t&&P(e),t&&P(n)}}}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=R()},m(t,n){s[e].m(t,n),L(t,i,n),o=!0},p(t,o){let l=e;e=c(t),e===l?s[e].p(t,o):(ft(),mt(s[l],1,1,(()=>{s[l]=null})),gt(),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){mt(n),o=!1},d(t){s[e].d(t),t&&P(i)}}}function ee(t){let e,n,i=Math.floor(t[0])+"";return{c(){e=T(i),n=T("x")},m(t,i){L(t,e,i),L(t,n,i)},p(t,n){1&n&&i!==(i=Math.floor(t[0])+"")&&F(e,i)},i:s,o:s,d(t){t&&P(e),t&&P(n)}}}function ne(t){let e,n,i=t[0].toFixed(1)+"";return{c(){e=T(i),n=T("x")},m(t,i){L(t,e,i),L(t,n,i)},p(t,n){1&n&&i!==(i=t[0].toFixed(1)+"")&&F(e,i)},i:s,o:s,d(t){t&&P(e),t&&P(n)}}}function ie(t){let e,n;return e=new Xt({}),{c(){yt(e.$$.fragment)},m(t,i){xt(e,t,i),n=!0},p:s,i(t){n||(pt(e.$$.fragment,t),n=!0)},o(t){mt(e.$$.fragment,t),n=!1},d(t){kt(e,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=j("div"),n=j("div"),o.c(),U(n,"class","bubble svelte-18vhu7m"),U(e,"class",r="interaction-area "+t[1]+" svelte-18vhu7m")},m(o,r){L(o,e,r),S(e,n),d[i].m(n,null),t[10](e),c=!0,l||(a=I(e,"mouseenter",t[7]),l=!0)},p(s,[l]){let a=i;i=h(t=s),i===a?d[i].p(t,l):(ft(),mt(d[a],1,1,(()=>{d[a]=null})),gt(),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"))&&U(e,"class",r)},i(n){c||(pt(o),it((()=>{c&&(s||(s=wt(e,Dt,t[6],!0)),s.run(1))})),c=!0)},o(n){mt(o),s||(s=wt(e,Dt,t[6],!1)),s.run(0),c=!1},d(n){n&&P(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;$(t,l,(t=>n(0,i=t)));const a=c.loading;$(t,a,(t=>n(3,o=t)));const u={delay:150+50*s,duration:250,y:2,easing:Ht};let d;const h=function(){const t=Z();return(e,n,{cancelable:i=!1}={})=>{const o=t.$$.callbacks[e];if(o){const r=B(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){J[t?"unshift":"push"]((()=>{d=t,n(2,d)}))}]}class se extends St{constructor(t){super(),zt(this,t,re,oe,h,{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=v(t,e,n,i);return t[0](o)}}(i,t,t[1],null);return{c(){e=j("div"),o&&o.c(),U(e,"class","jetpack-boost-guide-portal")},m(i,r){L(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=v(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){mt(o,t),n=!1},d(n){n&&P(e),o&&o.d(n),t[3](null)}}}function le(t,e,n){let i,{$$slots:o={},$$scope:r}=e;var s;return K((()=>{document.body.appendChild(i)})),s=()=>{document.body.removeChild(i)},Z().$$.on_destroy.push(s),t.$$set=t=>{"$$scope"in t&&n(1,r=t.$$scope)},[i,r,o,function(t){J[t?"unshift":"push"]((()=>{i=t,n(0,i)}))}]}class ae extends St{constructor(t){super(),zt(this,t,le,ce,h,{})}}function ue(t){let e,n;return{c(){e=O("svg"),n=O("path"),U(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"),U(e,"xmlns","http://www.w3.org/2000/svg"),U(e,"viewBox","0 0 24 24"),U(e,"class","svelte-1g2gjwn")},m(t,i){L(t,e,i),S(e,n)},p:s,i:s,o:s,d(t){t&&P(e)}}}class de extends St{constructor(t){super(),zt(this,t,null,ue,h,{})}}const{window:he}=bt;function fe(t){let e,n,i,o,r=t[29]+"";return{c(){e=j("div"),n=T("The image file is "),i=T(r),o=T("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."),U(e,"class","explanation svelte-12bm513")},m(t,r){L(t,e,r),S(e,n),S(e,i),S(e,o)},p(t,e){8&e&&r!==(r=t[29]+"")&&F(i,r)},d(t){t&&P(e)}}}function ge(t){let e,n,i=t[6]>1&&$e(t);return{c(){e=j("div"),n=T("The image size is very close to the size it appears in the browser.\n\t\t\t\t\t\t"),i&&i.c(),U(e,"class","explanation svelte-12bm513")},m(t,o){L(t,e,o),S(e,n),i&&i.m(e,null)},p(t,n){t[6]>1?i?i.p(t,n):(i=$e(t),i.c(),i.m(e,null)):i&&(i.d(1),i=null)},d(t){t&&P(e),i&&i.d()}}}function pe(t){let e;return{c(){e=j("div"),e.textContent="The image is exactly the correct size for this screen.",U(e,"class","explanation svelte-12bm513")},m(t,n){L(t,e,n)},p:s,d(t){t&&P(e)}}}function me(t){let e,n,i,o,r,s,c=t[4].weight>450&&ve();return{c(){e=j("div"),n=T("The image loaded is "),i=j("strong"),o=T(t[6]),r=T("x"),s=T(" larger than it appears in the browser.\n\t\t\t\t\t\t"),c&&c.c(),U(e,"class","explanation svelte-12bm513")},m(t,l){L(t,e,l),S(e,n),S(e,i),S(i,o),S(i,r),S(e,s),c&&c.m(e,null)},p(t,n){64&n&&F(o,t[6]),t[4].weight>450?c||(c=ve(),c.c(),c.m(e,null)):c&&(c.d(1),c=null)},d(t){t&&P(e),c&&c.d()}}}function $e(t){let e,n,i,o,r;return{c(){e=T("Because there are various screen sizes, it's okay for the image to be\n\t\t\t\t\t\t\t"),n=j("strong"),i=T(t[6]),o=T("x"),r=T(" than it appears on the page.")},m(t,s){L(t,e,s),L(t,n,s),S(n,i),S(n,o),L(t,r,s)},p(t,e){64&e&&F(i,t[6])},d(t){t&&P(e),t&&P(n),t&&P(r)}}}function ve(t){let e;return{c(){e=T("Try using a smaller image or reduce the file size by compressing it.")},m(t,n){L(t,e,n)},d(t){t&&P(e)}}}function we(t){let e,n;return{c(){e=j("img"),g(e.src,n=t[5])||U(e,"src",n),U(e,"alt",t[8]),A(e,"width",t[2]+"px"),A(e,"height",t[7]+"px"),U(e,"width",t[2]),U(e,"height",t[7]),U(e,"class","svelte-12bm513")},m(t,n){L(t,e,n)},p(t,i){32&i&&!g(e.src,n=t[5])&&U(e,"src",n),256&i&&U(e,"alt",t[8]),4&i&&A(e,"width",t[2]+"px"),128&i&&A(e,"height",t[7]+"px"),4&i&&U(e,"width",t[2]),128&i&&U(e,"height",t[7])},d(t){t&&P(e)}}}function be(t){let e;function n(t,e){return t[16]?ke:xe}let i=n(t),o=i(t);return{c(){e=j("div"),o.c(),U(e,"class","value")},m(t,n){L(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&&P(e),o.d()}}}function ye(t){let e,n,i,o,r=t[4].width+"",s=t[4].height+"";return{c(){e=j("div"),n=T(r),i=T(" x "),o=T(s),U(e,"class","value")},m(t,r){L(t,e,r),S(e,n),S(e,i),S(e,o)},p(t,e){16&e&&r!==(r=t[4].width+"")&&F(n,r),16&e&&s!==(s=t[4].height+"")&&F(o,s)},d(t){t&&P(e)}}}function xe(t){let e;return{c(){e=j("em"),e.textContent="Unknown"},m(t,n){L(t,e,n)},d(t){t&&P(e)}}}function ke(t){let e;return{c(){e=T("Loading...")},m(t,n){L(t,e,n)},d(t){t&&P(e)}}}function _e(t){let e;return{c(){e=j("em"),e.textContent="Unknown"},m(t,n){L(t,e,n)},p:s,d(t){t&&P(e)}}}function ze(t){let e;return{c(){e=T("Loading...")},m(t,n){L(t,e,n)},p:s,d(t){t&&P(e)}}}function Se(t){let e,n,i=Math.round(t[4].weight)+"";return{c(){e=T(i),n=T(" KB")},m(t,i){L(t,e,i),L(t,n,i)},p(t,n){16&n&&i!==(i=Math.round(t[4].weight)+"")&&F(e,i)},d(t){t&&P(e),t&&P(n)}}}function Ce(t){let e;return{c(){e=j("em"),e.textContent="N/A"},m(t,n){L(t,e,n)},p:s,d(t){t&&P(e)}}}function Ee(t){let e;return{c(){e=T("Loading...")},m(t,n){L(t,e,n)},p:s,d(t){t&&P(e)}}}function Le(t){let e,n,i;return{c(){e=j("strong"),n=T(t[19]),i=T(" KB")},m(t,o){L(t,e,o),S(e,n),S(e,i)},p(t,e){524288&e&&F(n,t[19])},d(t){t&&P(e)}}}function Pe(t){let e,n,i,o,r,s,c,l,a,u,d,h,f,g,p,m,$,v,w,b,y,x,k,_,z,C,E,O,R,H,B,N,D,W,V,G,q,Z,K,X,Y,J,Q,tt,et,nt,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`,gt=`${t[0].left}px`;function $t(t,e){return t[6]>=1.3?me:1===t[6]?pe:t[6]>=.99&&t[6]<1.3?ge:fe}function wt(t,e){return e===fe?function(t){const e=t.slice(),n=Te(1/e[3]);return e[29]=n,e}(t):t}i=new Gt({props:{size:250}});let bt=$t(t),_t=bt(wt(t,bt)),zt=t[5]&&we(t);function St(t,e){return t[4].width>0&&t[4].height>0?ye:be}let Ct=St(t),Et=Ct(t);function Lt(t,e){return t[4].weight>0?Se:t[16]?ze:_e}let Pt=Lt(t),jt=Pt(t);function Ot(t,e){return t[19]>0?Le:t[16]?Ee:Ce}let Tt=Ot(t),Mt=Tt(t);return ot=new de({}),{c(){e=j("div"),n=j("div"),yt(i.$$.fragment),o=M(),r=j("div"),s=j("div"),c=j("div"),l=j("a"),a=T(t[8]),u=M(),_t.c(),d=M(),zt&&zt.c(),h=M(),f=j("div"),g=j("div"),p=j("div"),p.textContent="Image File Dimensions",m=M(),Et.c(),$=M(),v=j("div"),w=j("div"),w.textContent="Expected Dimensions",b=M(),y=j("div"),x=T(at),k=T(" x "),_=T(ut),z=M(),C=j("div"),E=j("div"),E.textContent="Size on screen",O=M(),R=j("div"),H=T(dt),B=T(" x "),N=T(ht),D=M(),W=j("div"),V=j("div"),V.textContent="Image Size",G=M(),q=j("div"),jt.c(),Z=M(),K=j("div"),X=j("div"),X.textContent="Potential savings",Y=M(),J=j("div"),Mt.c(),Q=M(),tt=j("div"),et=j("a"),nt=T("Learn how to improve site speed by optimizing images "),yt(ot.$$.fragment),U(n,"class","logo svelte-12bm513"),U(l,"href",t[5]),U(l,"target","_blank noreferrer"),U(l,"class","svelte-12bm513"),U(c,"class","title svelte-12bm513"),U(s,"class","description svelte-12bm513"),U(r,"class","preview svelte-12bm513"),U(p,"class","label"),U(g,"class","row svelte-12bm513"),U(w,"class","label"),U(y,"class","value"),U(v,"class","row svelte-12bm513"),U(E,"class","label"),U(R,"class","value"),U(C,"class","row svelte-12bm513"),U(V,"class","label"),U(q,"class","value"),U(W,"class","row svelte-12bm513"),U(X,"class","label"),U(J,"class","value"),U(K,"class","row svelte-12bm513"),U(et,"class","documentation svelte-12bm513"),U(et,"href",Oe),U(et,"target","_blank noreferrer"),U(tt,"class","info svelte-12bm513"),U(f,"class","meta"),U(e,"class","jetpack-boost-guide-popup keep-guide-open svelte-12bm513"),A(e,"top",ft),A(e,"left",gt)},m(P,j){L(P,e,j),S(e,n),xt(i,n,null),S(e,o),S(e,r),S(r,s),S(s,c),S(c,l),S(l,a),S(s,u),_t.m(s,null),S(r,d),zt&&zt.m(r,null),S(e,h),S(e,f),S(f,g),S(g,p),S(g,m),Et.m(g,null),S(f,$),S(f,v),S(v,w),S(v,b),S(v,y),S(y,x),S(y,k),S(y,_),S(f,z),S(f,C),S(C,E),S(C,O),S(C,R),S(R,H),S(R,B),S(R,N),S(f,D),S(f,W),S(W,V),S(W,G),S(W,q),jt.m(q,null),S(f,Z),S(f,K),S(K,X),S(K,Y),S(K,J),Mt.m(J,null),S(f,Q),S(f,tt),S(tt,et),S(et,nt),xt(ot,et,null),st=!0,ct||(lt=I(e,"mouseleave",t[22]),ct=!0)},p(n,i){t=n,(!st||256&i)&&F(a,t[8]),(!st||32&i)&&U(l,"href",t[5]),bt===(bt=$t(t))&&_t?_t.p(wt(t,bt),i):(_t.d(1),_t=bt(wt(t,bt)),_t&&(_t.c(),_t.m(s,null))),t[5]?zt?zt.p(t,i):(zt=we(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(g,null))),(!st||131072&i)&&at!==(at=t[17].width+"")&&F(x,at),(!st||131072&i)&&ut!==(ut=t[17].height+"")&&F(_,ut),(!st||262144&i)&&dt!==(dt=t[18].width+"")&&F(H,dt),(!st||262144&i)&&ht!==(ht=t[18].height+"")&&F(N,ht),Pt===(Pt=Lt(t))&&jt?jt.p(t,i):(jt.d(1),jt=Pt(t),jt&&(jt.c(),jt.m(q,null))),Tt===(Tt=Ot(t))&&Mt?Mt.p(t,i):(Mt.d(1),Mt=Tt(t),Mt&&(Mt.c(),Mt.m(J,null))),1&i&&ft!==(ft=`${t[0].top}px`)&&A(e,"top",ft),1&i&&gt!==(gt=`${t[0].left}px`)&&A(e,"left",gt)},i(t){st||(pt(i.$$.fragment,t),pt(ot.$$.fragment,t),rt||it((()=>{rt=vt(e,Dt,{duration:150,y:4,easing:Ht}),rt.start()})),st=!0)},o(t){mt(i.$$.fragment,t),mt(ot.$$.fragment,t),st=!1},d(t){t&&P(e),kt(i),_t.d(),zt&&zt.d(),Et.d(),jt.d(),Mt.d(),kt(ot),ct=!1,lt()}}}function je(t){let e,n,i,o,r,s=!1,c=()=>{s=!1};return it(t[23]),n=new ae({props:{$$slots:{default:[Pe]},$$scope:{ctx:t}}}),{c(){yt(n.$$.fragment)},m(l,a){xt(n,l,a),i=!0,o||(r=I(he,"scroll",(()=>{s=!0,clearTimeout(e),e=setTimeout(c,100),t[23]()})),o=!0)},p(t,[i]){2&i&&!s&&(s=!0,clearTimeout(e),scrollTo(he.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){mt(n.$$.fragment,t),i=!1},d(t){kt(n,t),o=!1,r()}}}const Oe="https://jetpack.com/support/jetpack-boost/image-performance-guide/";function Te(t){return t%1==0?t:parseFloat(t.toFixed(2))}function Me(t,e,n){let i,o,r,c,l,a,u,d,h,f,g,m,$,v,w,b,y,x,k=s,_=s,z=s,S=s,C=s,E=s,L=s;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:j}=e,{position:O}=e,T=0,M=0,R=0;return K((()=>{M=T,R=O.top})),t.$$set=t=>{"store"in t&&n(20,P=t.store),"size"in t&&n(21,j=t.size),"position"in t&&n(0,O=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,r=P.fileSize),_(),_=p(r,(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"===j?100:50),20&t.$$.dirty&&n(7,f=Math.floor(h/($.width/$.height))),8&t.$$.dirty&&n(6,g=Te(m)),2&t.$$.dirty&&0!==(e=T)&&M!==e&&n(0,O.top=R+(M-e),O)},new URL(window.location.href).origin,[O,T,h,m,$,v,g,f,d,u,a,l,c,r,o,i,w,b,y,x,P,j,function(e){X.call(this,t,e)},function(){n(1,T=he.pageYOffset)}]}class Re extends St{constructor(t){super(),zt(this,t,Me,je,h,{store:20,size:21,position:0})}}function Ie(t,e,n){const i=t.slice();return i[10]=e[n],i[12]=n,i}function Ue(t){let e,n,i,o,r,s,c,l=t[0],a=[];for(let e=0;e<l.length;e+=1)a[e]=Fe(Ie(t,l,e));const u=t=>mt(a[t],1,1,(()=>{a[t]=null}));let d=!1!==t[1]&&Ae(t);return{c(){e=j("div"),n=j("div");for(let t=0;t<a.length;t+=1)a[t].c();i=M(),d&&d.c(),U(n,"class","previews svelte-1828btn"),U(e,"class",o="guide "+t[3]+" svelte-1828btn"),H(e,"show",!1!==t[1]),H(e,"keep-guide-open",!1!==t[1])},m(o,l){L(o,e,l),S(e,n);for(let t=0;t<a.length;t+=1)a[t]&&a[t].m(n,null);S(e,i),d&&d.m(e,null),r=!0,s||(c=I(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=Ie(t,l,e);a[e]?(a[e].p(o,i),pt(a[e],1)):(a[e]=Fe(o),a[e].c(),pt(a[e],1),a[e].m(n,null))}for(ft(),e=l.length;e<a.length;e+=1)u(e);gt()}!1!==t[1]?d?(d.p(t,i),2&i&&pt(d,1)):(d=Ae(t),d.c(),pt(d,1),d.m(e,null)):d&&(ft(),mt(d,1,1,(()=>{d=null})),gt()),(!r||8&i&&o!==(o="guide "+t[3]+" svelte-1828btn"))&&U(e,"class",o),(!r||10&i)&&H(e,"show",!1!==t[1]),(!r||10&i)&&H(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)mt(a[t]);mt(d),r=!1},d(t){t&&P(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[12],store:t[10]}}),e.$on("hover",t[7]),{c(){yt(e.$$.fragment)},m(t,i){xt(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){mt(e.$$.fragment,t),n=!1},d(t){kt(e,t)}}}function Ae(t){let e,n;return e=new Re({props:{store:t[0][t[1]],size:t[3],position:t[2]}}),e.$on("mouseleave",t[5]),{c(){yt(e.$$.fragment)},m(t,i){xt(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){mt(e.$$.fragment,t),n=!1},d(t){kt(e,t)}}}function He(t){let e,n,i="active"===t[4]&&Ue(t);return{c(){i&&i.c(),e=R()},m(t,o){i&&i.m(t,o),L(t,e,o),n=!0},p(t,[n]){"active"===t[4]?i?(i.p(t,n),16&n&&pt(i,1)):(i=Ue(t),i.c(),pt(i,1),i.m(e.parentNode,e)):i&&(ft(),mt(i,1,1,(()=>{i=null})),gt())},i(t){n||(pt(i),n=!0)},o(t){mt(i),n=!1},d(t){i&&i.d(t),t&&P(e)}}}function Be(t,e,n){let i,o,r;$(t,It,(t=>n(4,r=t)));let{stores:s}=e,c=!1;K((()=>{s.forEach((t=>t.updateDimensions()))}));const l=s[0].sizeOnPage;$(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 Ne extends St{constructor(t){super(),zt(this,t,Be,He,h,{stores:0})}}const De=[];let We;function Ve(t){window.frameElement||(We=t,window.addEventListener("load",Ge))}function Ge(){window.addEventListener("resize",function(){let t;return()=>{t&&clearTimeout(t),t=setTimeout((()=>{De.forEach((t=>{t.updateDimensions()}))}),500)}}()),Ft.trackInitialState(),It.subscribe((e=>t(this,void 0,void 0,(function*(){if("paused"===e)return;const t=yield o(Array.from(document.querySelectorAll("body *:not(.jetpack-boost-guide > *):not(.jetpack-boost-guide)")),We),n=yield Promise.all(t.map((t=>t.isImageTiny())));De.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=(++qe).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=(++qe).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 At(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 Ne(t),t.props.stores))).flat()}(t.filter(((t,e)=>!n[e])))),Ft.trackPage(De)}))))}let qe=0;function Ze(t){let e,n,i,o,r,s,c,l,a,u;return n=new Gt({}),{c(){e=j("a"),yt(n.$$.fragment),i=M(),o=j("span"),r=T("Image Guide: "),s=T(t[2]),U(e,"id","jetpack-boost-guide-bar"),U(e,"href",t[0]),U(e,"class",c="ab-item "+t[1]+" svelte-itog5b")},m(c,d){var h;L(c,e,d),xt(n,e,null),S(e,i),S(e,o),S(o,r),S(o,s),l=!0,a||(u=I(e,"click",(h=t[3],function(t){return t.preventDefault(),h.call(this,t)})),a=!0)},p(t,[n]){(!l||4&n)&&F(s,t[2]),(!l||1&n)&&U(e,"href",t[0]),(!l||2&n&&c!==(c="ab-item "+t[1]+" svelte-itog5b"))&&U(e,"class",c)},i(t){l||(pt(n.$$.fragment,t),l=!0)},o(t){mt(n.$$.fragment,t),l=!1},d(t){t&&P(e),kt(n),a=!1,u()}}}function Ke(t,e,n){let i,o;$(t,It,(t=>n(1,i=t))),$(t,Ut,(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&&Ft.setTracksCallback(s)},[r,i,o,function(){It.cycle(),Ft.trackUIStateChange()},s]}class Xe extends St{constructor(t){super(),zt(this,t,Ke,Ze,h,{href:0,tracksCallback:4})}}function Ye(t,{href:e,tracksCallback:n,fetchFunction:i}){return Ve(i),new Xe({target:t,props:{href:e,tracksCallback:n}})}export{e as MeasurableImage,o as getMeasurableImages,Ye as setupImageGuideUI};

package/build/initialize.d.ts

@@ -0,0 +1,22 @@
+import { MeasurableImageStore } from './stores/MeasurableImageStore';
+import type { FetchFn, MeasurableImage } from './MeasurableImage';
+/**
+ * Set up a listener to initialize stuff on window load.
+ *
+ * @param {Function} fetchFn - An optional custom function to use when fetching the URL weights.
+ */
+export declare function setupLoadListener(fetchFn?: FetchFn): void;
+/**
+ * This gets a little tricky because of the various layout positions
+ * the images can be in.
+ *
+ * For example, images can be positioned with static, absolute, fixed, etc.
+ * But on top of that, they can be a part of a parent that has that positioning.
+ * And to make things even more complex, they can change dynamically, for example in a slider.
+ *
+ * This function attempts to attach the Svelte Components to the DOM in a non-destructive way.
+ *
+ * @param {MeasurableImage[]} measuredImages - The images to attach the guides to.
+ * @return {MeasurableImageStore[]} The stores for the attached images.
+ */
+export declare function attachGuides(measuredImages: MeasurableImage[]): MeasurableImageStore[];

package/build/stores/GuideState.d.ts

@@ -0,0 +1,12 @@
+import { Writable } from 'svelte/store';
+declare const store: {
+    readonly active: "Active";
+    readonly paused: "Paused";
+};
+type State = keyof typeof store;
+type CyclableStore = Writable<State> & {
+    cycle: () => void;
+};
+export declare const guideState: CyclableStore;
+export declare const guideLabel: import("svelte/store").Readable<"Active" | "Paused">;
+export {};

package/build/stores/MeasurableImageStore.d.ts

@@ -0,0 +1,29 @@
+import { Writable, Readable } from 'svelte/store';
+import { MeasurableImage } from '../MeasurableImage';
+import type { Dimensions, Weight } from '../MeasurableImage';
+/**
+ * Each measurable image has its own set of Svelte stores.
+ *
+ * This class relies on MeasurableImage to calculate the values
+ * and stores them in multiple Svelte stores,
+ * so that the dimensions are easily
+ * accessible in the components.
+ */
+export declare class MeasurableImageStore {
+    readonly fileSize: Writable<Dimensions & Weight>;
+    readonly sizeOnPage: Writable<Dimensions>;
+    readonly potentialSavings: Readable<number | null>;
+    readonly expectedSize: Readable<Dimensions>;
+    readonly oversizedRatio: Readable<number>;
+    readonly url: Writable<string>;
+    readonly loading: Writable<boolean>;
+    readonly image: MeasurableImage;
+    readonly node: MeasurableImage['node'];
+    private currentSrc;
+    constructor(measurableImage: MeasurableImage);
+    private deriveOversizedRatio;
+    private deriveExpectedSize;
+    private derivePotentialSavings;
+    updateDimensions(): Promise<void>;
+    private maybeUpdateWeight;
+}

package/build/types.d.ts

@@ -0,0 +1,9 @@
+import type { MeasurableImageStore } from './stores/MeasurableImageStore';
+import type { ComponentConstructorOptions } from 'svelte';
+export type GuideSize = 'normal' | 'small' | 'micro';
+export interface ImageGuideConfig extends ComponentConstructorOptions {
+    target: HTMLElement;
+    props: {
+        stores: MeasurableImageStore[];
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-image-guide",
-	"version": "0.5.4",
+	"version": "0.5.5",
 	"description": "Go through the dom to analyze image size on screen vs actual file size.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/image-guide/#readme",
 	"type": "module",
@@ -15,17 +15,47 @@
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
 	"scripts": {
-		"build": "pnpm run clean && webpack",
-		"clean": "rm -rf build/",
-		"watch": "pnpm run build && pnpm webpack watch",
+		"build": "rollup -c && tsc --emitDeclarationOnly",
+		"build-concurrently": "pnpm run clear-dist && concurrently 'pnpm:validate-ts' 'rollup -c'",
+		"build-development": "pnpm run build-concurrently",
+		"build-production": "NODE_ENV=production BABEL_ENV=production pnpm run build-concurrently",
+		"validate-ts": "tsc --pretty --strict false",
+		"dev-validate-ts": "tsc --watch --pretty --strict false # Note: Disable Strict mode to avoid noisy development, while keeping strict errors visible in IDEs.",
+		"dev-compile": "pnpm run clear-dist && rollup -c -w",
+		"dev": "concurrently 'pnpm:dev-validate-ts' 'pnpm:dev-compile'",
+		"reformat-files": "../../../tools/js-tools/node_modules/.bin/prettier --ignore-path .eslintignore --write --plugin-search-dir=. ./**/*.{svelte,js,ts,json}",
+		"lint": "pnpm run reformat-files && echo 'Running eslint...' && pnpm eslint app/assets/src/js tests/e2e --fix && echo '✔ prettier and eslint ran successfully.'",
+		"clear-dist": "rm -rf app/assets/dist/*",
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest"
 	},
+	"browser": {
+		"@automattic/jetpack-image-guide": false
+	},
 	"devDependencies": {
-		"@automattic/jetpack-webpack-config": "workspace:*",
+		"@babel/core": "^7.0.0",
+		"@babel/preset-env": "7.23.5",
+		"@babel/preset-react": "7.23.3",
+		"@babel/preset-typescript": "7.23.3",
+		"@rollup/plugin-babel": "5.3.1",
+		"@rollup/plugin-commonjs": "19.0.2",
+		"@rollup/plugin-json": "4.1.0",
+		"@rollup/plugin-node-resolve": "13.3.0",
+		"@rollup/plugin-replace": "5.0.2",
+		"@rollup/plugin-terser": "0.4.3",
+		"@rollup/plugin-typescript": "8.3.3",
 		"@typescript-eslint/parser": "6.7.5",
 		"eslint": "8.51.0",
-		"jest": "29.4.3",
+		"jest": "29.7.0",
+		"postcss": "8.4.31",
+		"rollup": "2.79.1",
+		"rollup-plugin-postcss": "4.0.2",
+		"rollup-plugin-svelte": "7.1.0",
+		"rollup-plugin-svelte-svg": "0.2.3",
+		"sass": "1.64.1",
+		"svelte": "3.58.0",
+		"svelte-preprocess": "5.0.4",
 		"ts-loader": "9.4.2",
+		"tslib": "2.5.0",
 		"typescript": "5.0.4",
 		"webpack": "5.76.0",
 		"webpack-cli": "4.9.1"
@@ -36,6 +66,5 @@
 			"default": "./build/index.js"
 		}
 	},
-	"main": "./build/index.js",
-	"types": "./build/index.d.ts"
+	"main": "./src/index.ts"
 }

package/rollup.config.js

@@ -0,0 +1,122 @@
+import path from 'path';
+import { babel } from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import terser from '@rollup/plugin-terser';
+import typescript from '@rollup/plugin-typescript';
+import postcss from 'rollup-plugin-postcss';
+import svelte from 'rollup-plugin-svelte';
+import svelteSVG from 'rollup-plugin-svelte-svg';
+import sveltePreprocess from 'svelte-preprocess';
+import tsconfig from './tsconfig.json';
+
+const production = process.env.NODE_ENV === 'production';
+
+const exportConditions = process.env.npm_config_jetpack_webpack_config_resolve_conditions
+	? process.env.npm_config_jetpack_webpack_config_resolve_conditions.split( ',' )
+	: [];
+
+/**
+ *
+ *
+ * Jetpack Boost Image Guide
+ *
+ *
+ */
+export default {
+	input: `./src/index.ts`,
+	output: {
+		sourcemap: ! production,
+		format: 'esm',
+		name: 'app',
+		file: `./build/index.js`,
+	},
+	plugins: [
+		replace( {
+			preventAssignment: true,
+			delimiters: [ '', '' ],
+			values: {
+				"@import '@automattic": "@import '~@automattic",
+				'process.env.NODE_ENV': '"production"',
+			},
+		} ),
+
+		resolve( {
+			browser: true,
+			preferBuiltins: false,
+			dedupe: [ 'svelte' ],
+			exportConditions,
+		} ),
+
+		commonjs(),
+		json(),
+
+		babel( {
+			presets: [ '@babel/preset-react' ],
+			babelHelpers: 'bundled',
+			compact: true,
+		} ),
+
+		// we'll extract any component CSS out into
+		// a separate file - better for performance
+		postcss( {
+			extensions: [ '.css', '.sss', '.pcss', '.sass', '.scss' ],
+			extract: path.resolve( `./build/guide.css` ),
+			minimize: production,
+		} ),
+
+		svelteSVG(),
+		svelte( {
+			preprocess: sveltePreprocess( { sourceMap: ! production } ),
+			compilerOptions: {
+				// enable run-time checks when not in production
+				dev: ! production,
+			},
+		} ),
+
+		typescript( {
+			sourceMap: ! production,
+			inlineSources: ! production,
+			// In order to let @rollup/plugin-typescript hanlde TS files from js-packages
+			// we need to include those here and pass the custom tsconfig as well
+			include: tsconfig.include,
+			tsconfig: 'tsconfig.json',
+			declaration: true,
+		} ),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser(),
+	],
+
+	watch: {
+		clearScreen: false,
+	},
+
+	onwarn: ( warning, defaultHandler ) => {
+		// Ignore unused external imports for known problem React / ReactDOM imports.
+		if ( warning.code === 'UNUSED_EXTERNAL_IMPORT' ) {
+			const ignoredImports = [
+				'createPortal',
+				'findDOMNode',
+				'render',
+				'unmountComponentAtNode',
+				'createRef',
+				'memo',
+				'useImperativeHandle',
+				'useDebugValue',
+				'lazy',
+				'Suspense',
+			];
+
+			const unignoredWarnings = warning.names.filter( name => ! ignoredImports.includes( name ) );
+			if ( unignoredWarnings.length === 0 ) {
+				return;
+			}
+		}
+
+		defaultHandler( warning );
+	},
+};

package/build/index.asset.php

@@ -1 +0,0 @@
-<?php return array('dependencies' => array(), 'version' => 'e657184e174bd13a2997');