@automattic/jetpack-image-guide 1.0.21 → 2.0.0

package/CHANGELOG.md

@@ -5,6 +5,18 @@ 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).
 
+## [2.0.0] - 2026-11-06
+### Added
+- Support React 19.
+
+### Changed
+- Add @wordpress/data dependency and React peer dependencies.
+- Update package dependencies.
+- Use React to render the Image Guide overlay. Change setupImageGuideUI to return an object with an unmount method, and use the host's React, ReactDOM and JSX runtime in the built file. Prevent bubble entrances and label fades from replaying when a hidden container is shown again.
+
+### Fixed
+- Fix popup links to open in separate new tabs.
+
 ## [1.0.21] - 2026-09-28
 ### Changed
 - Update package dependencies. [#52297]
@@ -15,10 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.0.19] - 2026-08-14
 ### Changed
-- Update package dependencies. [#50510]
-- Update package dependencies. [#50751]
-- Update package dependencies. [#50753]
-- Update package dependencies. [#51008]
+- Update package dependencies. [#50510] [#50751] [#50753] [#51008]
 
 ## [1.0.18] - 2026-06-26
 ### Changed
@@ -26,8 +35,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.0.17] - 2026-06-24
 ### Changed
-- Update package dependencies. [#49757]
-- Update package dependencies. [#49831]
+- Update package dependencies. [#49757] [#49831]
 
 ## [1.0.16] - 2026-06-10
 ### Changed
@@ -36,16 +44,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.0.15] - 2026-06-08
 ### Changed
 - Internal: No longer require automattic/jetpack-changelogger as a per-project dev dependency. [#48225]
-- Update package dependencies. [#48302]
-- Update package dependencies. [#48695]
-- Update package dependencies. [#48844]
-- Update package dependencies. [#49012]
+- Update package dependencies. [#48302] [#48695] [#48844] [#49012]
 
 ## [1.0.14] - 2026-04-13
 ### Changed
-- Update package dependencies. [#47610]
-- Update package dependencies. [#47799]
-- Update package dependencies. [#47998]
+- Update package dependencies. [#47610] [#47799] [#47998]
 
 ## [1.0.13] - 2026-03-09
 ### Changed
@@ -75,8 +78,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.0.7] - 2025-09-17
 ### Changed
-- Update package dependencies. [#45097]
-- Update package dependencies. [#45127]
+- Update package dependencies. [#45097] [#45127]
 
 ## [1.0.6] - 2025-08-21
 ### Added
@@ -274,6 +276,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 - Minor package.json change - removing private entry.
 
+[2.0.0]: https://github.com/Automattic/jetpack-image-guide/compare/v1.0.21...v2.0.0
 [1.0.21]: https://github.com/Automattic/jetpack-image-guide/compare/v1.0.20...v1.0.21
 [1.0.20]: https://github.com/Automattic/jetpack-image-guide/compare/v1.0.19...v1.0.20
 [1.0.19]: https://github.com/Automattic/jetpack-image-guide/compare/v1.0.18...v1.0.19

package/README.md

@@ -6,6 +6,15 @@ Go through the dom to analyze image size on screen vs actual file size.
 
 ### Installation From Git Repo
 
+## UI setup
+
+`setupImageGuideUI( target, { href, tracksCallback, fetchFunction } )` mounts the
+React toolbar in a new wrapper inside `target`, preserving its existing children.
+Call it before the window `load` event; tracking is registered synchronously.
+It returns `{ unmount() }`, which removes the toolbar and its wrapper and can be
+called repeatedly. Page guides and their listeners live until the page unloads;
+this handle only controls the toolbar. Boost ignores the return value.
+
 ## Contribute
 
 ## Get Help

package/build/guide.css

@@ -1 +1 @@
-div.svelte-1yjr9q3{align-items:center;display:flex;justify-content:center}.spinner.svelte-q7ue1b{animation:svelte-q7ue1b-pulse 1.25s ease-in-out infinite reverse}@keyframes svelte-q7ue1b-pulse{0%{transform:scale(1) rotate(0deg)}70%{transform:scale(1.4) rotate(30deg)}to{transform:scale(.9) rotate(-190deg)}}svg.svelte-qy5udj{transform:translateY(2px)}.interaction-area.svelte-1vido64{margin-bottom:-15px;margin-left:-15px;margin-top:-15px;padding:15px}.bubble.svelte-1vido64{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-1vido64 .bubble:where(.svelte-1vido64){background-color:#e52e00}.medium.svelte-1vido64 .bubble:where(.svelte-1vido64){background-color:#e98800}.bubble-inner.svelte-1vido64{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-1vido64{padding:15px}.guide.small .bubble.svelte-1vido64{font-size:10px;height:28px;width:28px}.guide.micro .interaction-area.svelte-1vido64{margin-left:-10px;margin-top:-10px;padding:10px}.guide.micro .bubble.svelte-1vido64{border:1px solid hsla(0,0%,100%,.3);font-size:0;height:10px;width:10px}.guide.micro .bubble.svelte-1vido64 svg{display:none}svg.svelte-1b220d7{fill:currentcolor;height:1em;margin:0;vertical-align:middle;width:1em}a.svelte-1okxgd8{color:#3c434a!important;font-weight:600!important}a.documentation.svelte-1okxgd8{color:#3c434a!important;font-weight:500!important}.preview.svelte-1okxgd8{align-items:flex-start;display:flex;gap:15px;margin-bottom:15px;max-width:360px;width:100%}.preview.svelte-1okxgd8 img:where(.svelte-1okxgd8){border-radius:3px;box-shadow:0 0 2px 1px #f2f2f2}.info.svelte-1okxgd8{font-size:.9em;margin-top:15px}.jetpack-boost-guide-popup.svelte-1okxgd8{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-1okxgd8{font-weight:600;overflow-wrap:anywhere}.explanation.svelte-1okxgd8{margin-top:5px}.description.svelte-1okxgd8{font-size:.9em}.row.svelte-1okxgd8{border-bottom:1px dotted #d9d9d9;display:flex;font-size:14px;gap:10px;justify-content:space-between;margin-bottom:5px}.row.svelte-1okxgd8:last-child{border-bottom:none}.logo.svelte-1okxgd8{bottom:-25px;opacity:.04;pointer-events:none;position:absolute;right:-50px;transform:rotate(15deg)}.guide.small .preview.svelte-1okxgd8{gap:8px}.jetpack-boost-guide:not(.relative){left:0;position:absolute;top:0}.jetpack-boost-guide.relative{position:relative}.guide.svelte-6tsow1{left:0;line-height:1.55;padding:20px;position:absolute;top:0;z-index:8000}.guide.small.svelte-6tsow1{font-size:13px}.guide.micro.svelte-6tsow1{font-size:13px;padding:10px}.guide.show.svelte-6tsow1{z-index:9000}.guide.svelte-6tsow1{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif!important;font-size:15px!important}.previews.svelte-6tsow1{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-1km5e3e{align-items:center;display:flex;gap:10px}#jetpack-boost-guide-bar.ab-item.paused.svelte-1km5e3e svg{filter:grayscale(100%) contrast(1.7)}
+div.jb-ig-logo{align-items:center;display:flex;justify-content:center}.spinner.jb-ig-spinner{animation:jb-ig-spinner-pulse 1.25s ease-in-out infinite reverse}@keyframes jb-ig-spinner-pulse{0%{transform:scale(1) rotate(0deg)}70%{transform:scale(1.4) rotate(30deg)}to{transform:scale(.9) rotate(-190deg)}}svg.jb-ig-checkmark{transform:translateY(2px)}.interaction-area.jb-ig-bubble{margin-bottom:-15px;margin-left:-15px;margin-top:-15px;padding:15px}.bubble.jb-ig-bubble{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.jb-ig-bubble .bubble:where(.jb-ig-bubble){background-color:#e52e00}.medium.jb-ig-bubble .bubble:where(.jb-ig-bubble){background-color:#e98800}.bubble-inner.jb-ig-bubble{align-items:center;bottom:0;display:flex;height:100%;justify-content:center;left:0;margin:auto;position:absolute;right:0;top:0;width:100%}.jb-ig-main.small .interaction-area.jb-ig-bubble{padding:15px}.jb-ig-main.small .bubble.jb-ig-bubble{font-size:10px;height:28px;width:28px}.jb-ig-main.micro .interaction-area.jb-ig-bubble{margin-left:-10px;margin-top:-10px;padding:10px}.jb-ig-main.micro .bubble.jb-ig-bubble{border:1px solid hsla(0,0%,100%,.3);font-size:0;height:10px;width:10px}.jb-ig-main.micro .bubble.jb-ig-bubble svg{display:none}svg.jb-ig-external{fill:currentColor;height:1em;margin:0;vertical-align:middle;width:1em}a.jb-ig-popup{color:#3c434a!important;font-weight:600!important}a.documentation.jb-ig-popup{color:#3c434a!important;font-weight:500!important}.preview.jb-ig-popup{align-items:flex-start;display:flex;gap:15px;margin-bottom:15px;max-width:360px;width:100%}.preview.jb-ig-popup img:where(.jb-ig-popup){border-radius:3px;box-shadow:0 0 2px 1px #f2f2f2}.info.jb-ig-popup{font-size:.9em;margin-top:15px}.jetpack-boost-guide-popup.jb-ig-popup{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.jb-ig-popup{font-weight:600;overflow-wrap:anywhere}.explanation.jb-ig-popup{margin-top:5px}.description.jb-ig-popup{font-size:.9em}.row.jb-ig-popup{border-bottom:1px dotted #d9d9d9;display:flex;font-size:14px;gap:10px;justify-content:space-between;margin-bottom:5px}.row.jb-ig-popup:last-child{border-bottom:none}.logo.jb-ig-popup{bottom:-25px;opacity:.04;pointer-events:none;position:absolute;right:-50px;transform:rotate(15deg)}.jb-ig-main.small .preview.jb-ig-popup{gap:8px}.jetpack-boost-guide:not(.relative){left:0;position:absolute;top:0}.jetpack-boost-guide.relative{position:relative}.guide.jb-ig-main{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.jb-ig-main{font-size:13px}.guide.micro.jb-ig-main{font-size:13px;padding:10px}.guide.show.jb-ig-main{z-index:9000}.previews.jb-ig-main{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.jb-ig-toggle{align-items:center;display:flex;gap:10px;padding-block:0;padding-inline:7px 8px}#jetpack-boost-guide-bar.ab-item.paused.jb-ig-toggle svg{filter:grayscale(100%) contrast(1.7)}#wpadminbar .ab-top-menu>li.hover #jetpack-boost-guide-bar,#wpadminbar.nojq #jetpack-boost-guide-bar:focus,#wpadminbar:not(.mobile) #jetpack-boost-guide-bar:focus,#wpadminbar:not(.mobile) .ab-top-menu>li:hover #jetpack-boost-guide-bar{background:#2c3338;color:#72aee6}.jb-ig-popup.jb-ig-fly{animation:jb-ig-fly-in .15s cubic-bezier(.333333,1.567193,.666667,1) backwards}.jb-ig-label-fade{animation:jb-ig-fade-in .3s linear .2s both}.jb-ig-bubble-fly{animation:jb-ig-bubble-fly-in .25s cubic-bezier(.333333,1.567193,.666667,1) both}.jb-ig-spinner-fade{animation:jb-ig-fade-in .3s linear reverse both}@keyframes jb-ig-fly-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes jb-ig-fade-in{0%{opacity:0}to{opacity:1}}@keyframes jb-ig-bubble-fly-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}

package/build/index.d.ts

@@ -11,14 +11,13 @@ type ImageGuideUIOptions = {
 /**
  * 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.
+ * @param {HTMLElement} 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} An idempotent unmount handle for the toolbar UI.
  */
 export declare function setupImageGuideUI(target: HTMLElement, { href, tracksCallback, fetchFunction }: ImageGuideUIOptions): {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Record<string, any>>): void;
-} & Record<string, any>;
+    unmount(): void;
+};

package/build/index.js

@@ -1 +1 @@
-const e=globalThis.process?.env?.NODE_ENV;var t=e&&!e.toLowerCase().startsWith("prod"),n=Array.isArray,r=Array.prototype.indexOf,i=Array.prototype.includes,s=Array.from,o=Object.defineProperty,a=Object.getOwnPropertyDescriptor,l=Object.getOwnPropertyDescriptors,c=Object.prototype,f=Array.prototype,u=Object.getPrototypeOf,d=Object.isExtensible;const h=()=>{};function v(e){return e()}function p(e){for(var t=0;t<e.length;t++)e[t]()}function g(){var e,t;return{promise:new Promise((n,r)=>{e=n,t=r}),resolve:e,reject:t}}const _=16,m=32,w=64,y=512,b=1024,k=2048,x=4096,S=8192,$=16384,E=32768,z=1<<25,M=65536,T=1<<17,L=1<<19,O=1<<25,j=65536,C=1<<21,P=1<<22,A=1<<23,R=Symbol("$state"),I=Symbol("legacy props"),W=Symbol(""),D=Symbol("proxy path"),F=Symbol("attributes"),q=Symbol("class"),U=Symbol("style"),H=Symbol("text"),N=Symbol("hmr anchor"),B=new class extends Error{name="StaleReactionError";message="The reaction that called `getAbortSignal()` was re-run or destroyed"};function V(e){if(t){const t=new Error(`lifecycle_outside_component\n\`${e}(...)\` can only be used during component initialisation\nhttps://svelte.dev/e/lifecycle_outside_component`);throw t.name="Svelte error",t}throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function K(e,n,r){if(t){const t=new Error(`each_key_duplicate\n${r?`Keyed each block has duplicate key \`${r}\` at indexes ${e} and ${n}`:`Keyed each block has duplicate key at indexes ${e} and ${n}`}\nhttps://svelte.dev/e/each_key_duplicate`);throw t.name="Svelte error",t}throw new Error("https://svelte.dev/e/each_key_duplicate")}function Z(e,n,r){if(t){const t=new Error(`each_key_volatile\nKeyed each block has key that is not idempotent — the key for item at index ${e} was \`${n}\` but is now \`${r}\`. Keys must be the same each time for a given item\nhttps://svelte.dev/e/each_key_volatile`);throw t.name="Svelte error",t}throw new Error("https://svelte.dev/e/each_key_volatile")}const G=Symbol(),X=Symbol("filename"),Y="http://www.w3.org/1999/xhtml";var J="font-weight: bold",Q="font-weight: normal";function ee(e){t?console.warn(`%c[svelte] state_proxy_equality_mismatch\n%cReactive \`$state(...)\` proxies and the values they proxy have different identities. Because of this, comparisons with \`${e}\` will produce unexpected results\nhttps://svelte.dev/e/state_proxy_equality_mismatch`,J,Q):console.warn("https://svelte.dev/e/state_proxy_equality_mismatch")}function te(e){return e===this.v}function ne(e,t){return e!=e?t==t:e!==t||null!==e&&"object"==typeof e||"function"==typeof e}function re(e){return!ne(e,this.v)}let ie=!1;function se(e,t){return e.label=t,oe(e.v,t),e}function oe(e,t){return e?.[D]?.(t),e}function ae(e){const t=new Error,n=function(){const e=Error.stackTraceLimit;Error.stackTraceLimit=1/0;const t=(new Error).stack;if(Error.stackTraceLimit=e,!t)return[];const n=t.split("\n"),r=[];for(let e=0;e<n.length;e++){const t=n[e],i=t.replaceAll("\\","/");if("Error"!==t.trim()){if(t.includes("validate_each_keys"))return[];i.includes("svelte/src/internal")||i.includes("node_modules/.vite")||r.push(t)}}return r}();return 0===n.length?null:(n.unshift("\n"),o(t,"stack",{value:n.join("\n")}),o(t,"name",{value:e}),t)}function le(e,n){if(!t)throw new Error("invariant(...) was not guarded by if (DEV)");e||function(e){if(t){const t=new Error(`invariant_violation\nAn invariant violation occurred, meaning Svelte's internal assumptions were flawed. This is a bug in Svelte, not your app — please open an issue at https://github.com/sveltejs/svelte, citing the following message: "${e}"\nhttps://svelte.dev/e/invariant_violation`);throw t.name="Svelte error",t}throw new Error("https://svelte.dev/e/invariant_violation")}(n)}let ce=null;function fe(e){ce=e}let ue=null;function de(e){ue=e}let he=null;function ve(e){he=e}function pe(e,n=!1,r){ce={p:ce,i:!1,c:null,e:null,s:e,x:null,r:En,l:ie&&!n?{s:null,u:null,$:[]}:null},t&&(ce.function=r,he=r)}function ge(e){var n=ce,r=n.e;if(null!==r)for(var i of(n.e=null,r))tn(i);return void 0!==e&&(n.x=e),n.i=!0,ce=n.p,t&&(he=ce?.function??null),e??{}}function _e(){return!ie||null!==ce&&null===ce.l}let me=[];function we(e){if(0===me.length&&!Be){var t=me;queueMicrotask(()=>{t===me&&function(){var e=me;me=[],p(e)}()})}me.push(e)}const ye=new WeakMap;function be(e){var n=En;if(null===n)return xn.f|=A,e;if(t&&e instanceof Error&&!ye.has(e)&&ye.set(e,function(e,t){const n=a(e,"message");if(n&&!n.configurable)return;var r=Dt?"  ":"\t",i=`\n${r}in ${t.fn?.name||"<unknown>"}`,s=t.ctx;for(;null!==s;)i+=`\n${r}in ${s.function?.[X].split("/").pop()}`,s=s.p;return{message:e.message+`\n${i}\n`,stack:e.stack?.split("\n").filter(e=>!e.includes("svelte/src/internal")).join("\n")}}(e,n)),0===(n.f&E)&&!(4&n.f))throw t&&!n.parent&&e instanceof Error&&xe(e),e;ke(e,n)}function ke(e,n){for(;null!==n;){if(128&n.f){if(0===(n.f&E))throw e;try{return void n.b.error(e)}catch(t){e=t}}n=n.parent}throw t&&e instanceof Error&&xe(e),e}function xe(e){const t=ye.get(e);t&&(o(e,"message",{value:t.message}),o(e,"stack",{value:t.stack}))}const Se=-7169;function $e(e,t){e.f=e.f&Se|t}function Ee(e){0!==(e.f&y)||null===e.deps?$e(e,b):$e(e,x)}function ze(e){if(null!==e)for(const t of e)2&t.f&&0!==(t.f&j)&&(t.f^=j,ze(t.deps))}function Me(e,t,n){0!==(e.f&k)?t.add(e):0!==(e.f&x)&&n.add(e),ze(e.deps),$e(e,b)}function Te(e,t,n){if(null==e)return t(void 0),n&&n(void 0),h;const r=Vn(()=>e.subscribe(t,n));return r.unsubscribe?()=>r.unsubscribe():r}const Le=[];function Oe(e,t=h){let n=null;const r=new Set;function i(t){if(ne(e,t)&&(e=t,n)){const t=!Le.length;for(const t of r)t[1](),Le.push(t,e);if(t){for(let e=0;e<Le.length;e+=2)Le[e][0](Le[e+1]);Le.length=0}}}function s(t){i(t(e))}return{set:i,update:s,subscribe:function(o,a=h){const l=[o,a];return r.add(l),1===r.size&&(n=t(i,s)||h),o(e),()=>{r.delete(l),0===r.size&&n&&(n(),n=null)}}}}function je(e,t,n){const r=!Array.isArray(e),i=r?[e]:e;if(!i.every(Boolean))throw new Error("derived() expects stores as input, got a falsy value");const s=t.length<2;return o=(e,n)=>{let o=!1;const a=[];let l=0,c=h;const f=()=>{if(l)return;c();const i=t(r?a[0]:a,e,n);s?e(i):c="function"==typeof i?i:h},u=i.map((e,t)=>Te(e,e=>{a[t]=e,l&=~(1<<t),o&&f()},()=>{l|=1<<t}));return o=!0,f(),function(){p(u),c(),o=!1}},{subscribe:Oe(n,o).subscribe};var o}function Ce(e){let t;return Te(e,e=>t=e)(),t}let Pe=!1,Ae=Symbol();function Re(e,n,r){const i=r[n]??={store:null,source:zt(void 0),unsubscribe:h};if(t&&(i.source.label=n),i.store!==e&&!(Ae in r))if(i.unsubscribe(),i.store=e??null,null==e)i.source.v=void 0,i.unsubscribe=h;else{var s=!0;i.unsubscribe=Te(e,e=>{s?i.source.v=e:Mt(i.source,e)}),s=!1}return e&&Ae in r?Ce(e):Hn(i.source)}function Ie(e,t,n){let r=n[t];return r&&r.store!==e&&(r.unsubscribe(),r.unsubscribe=h),e}function We(){const e={};return[e,function(){Qt(()=>{for(var t in e){e[t].unsubscribe()}o(e,Ae,{enumerable:!1,value:!0})})}]}let De=null,Fe=null,qe=null,Ue=null,He=null,Ne=null,Be=!1,Ve=!1,Ke=null,Ze=null;var Ge=0,Xe=new Set;let Ye=1;class Je{id=Ye++;#e=!1;linked=!0;#t=null;#n=null;async_deriveds=new Map;current=new Map;previous=new Map;unblocked=new Set;#r=new Set;#i=new Set;#s=new Set;#o=0;#a=new Map;#l=null;#c=[];#f=[];#u=new Set;#d=new Set;#h=new Map;#v=new Set;is_fork=!1;#p=!1;#g(){if(this.is_fork)return!0;for(const n of this.#a.keys()){for(var e=n,t=!1;null!==e.parent;){if(this.#h.has(e)){t=!0;break}e=e.parent}if(!t)return!0}return!1}skip_effect(e){this.#h.has(e)||this.#h.set(e,{d:[],m:[]}),this.#v.delete(e)}unskip_effect(e,t=e=>this.schedule(e)){var n=this.#h.get(e);if(n){for(var r of(this.#h.delete(e),n.d))$e(r,k),t(r);for(r of n.m)$e(r,x),t(r)}this.#v.add(e)}#_(){if(this.#e=!0,Ge++>1e3&&(this.#m(),function(){if(t){var e=new Map;for(const t of qe.current.keys())for(const[r,i]of t.updated??[]){var n=e.get(r);n||(n={error:i.error,count:0},e.set(r,n)),n.count+=i.count}for(const t of e.values())t.error&&console.error(t.error)}try{!function(){if(t){const e=new Error("effect_update_depth_exceeded\nMaximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state\nhttps://svelte.dev/e/effect_update_depth_exceeded");throw e.name="Svelte error",e}throw new Error("https://svelte.dev/e/effect_update_depth_exceeded")}()}catch(e){t&&o(e,"stack",{value:""}),ke(e,Ne)}}()),t)for(const e of this.current.keys())Xe.add(e);if(!this.#g()){for(const e of this.#u)this.#d.delete(e),$e(e,k),this.schedule(e);for(const e of this.#d)$e(e,x),this.schedule(e)}const e=this.#c;this.#c=[],this.apply();var n=Ke=[],r=[],i=Ze=[];for(const t of e)try{this.#w(t,n,r)}catch(e){throw st(t),e}if(qe=null,i.length>0){var s=Je.ensure();for(const e of i)s.schedule(e)}if(Ke=null,Ze=null,this.#g()){this.#y(r),this.#y(n);for(const[e,t]of this.#h)it(e,t);return void(i.length>0&&qe.#_())}const a=this.#b();if(a)a.#k(this);else{this.#u.clear(),this.#d.clear();for(const e of this.#r)e(this);this.#r.clear(),Ue=this,et(r),et(n),Ue=null,this.#l?.resolve();var l=qe;if(this.linked&&0===this.#o&&this.#m(),this.#c.length>0){null===l&&(l=this,this.#x());const e=l;e.#c.push(...this.#c.filter(t=>!e.#c.includes(t)))}null!==l&&l.#_()}}#w(e,t,n){e.f^=b;for(var r=e.first;null!==r;){var i=r.f,s=!!(96&i);if(!(s&&0!==(i&b)||0!==(i&S)||this.#h.has(r))&&null!==r.fn){s?r.f^=b:4&i?t.push(r):In(r)&&(0!==(i&_)&&this.#d.add(r),Un(r));var o=r.first;if(null!==o){r=o;continue}}for(;null!==r;){var a=r.next;if(null!==a){r=a;break}r=r.parent}}}#b(){for(var e=this.#t;null!==e;){if(!e.is_fork)for(const[t,[,n]]of this.current)if(e.current.has(t)&&!n)return e;e=e.#t}return null}#k(e){for(const[t,n]of e.current)!this.previous.has(t)&&e.previous.has(t)&&this.previous.set(t,e.previous.get(t)),this.current.set(t,n);for(const[t,n]of e.async_deriveds){const e=this.async_deriveds.get(t);e&&n.promise.then(e.resolve)}const t=e=>{var n=e.reactions;if(null!==n)for(const e of n){var r=e.f;if(2&r)t(e);else{var i=e;4194320&r&&!this.async_deriveds.has(i)&&(this.#d.delete(i),$e(i,k),this.schedule(i))}}};for(const e of this.current.keys())t(e);this.oncommit(()=>e.discard()),e.#m(),qe=this,this.#_()}#y(e){for(var t=0;t<e.length;t+=1)Me(e[t],this.#u,this.#d)}capture(e,t,n=!1){e.v===G||this.previous.has(e)||this.previous.set(e,e.v),0===(e.f&A)&&(this.current.set(e,[t,n]),He?.set(e,t)),this.is_fork||(e.v=t)}activate(){qe=this}deactivate(){qe=null,He=null}flush(){try{t&&Xe.clear(),Ve=!0,qe=this,this.#_()}finally{if(Ge=0,Ne=null,Ke=null,Ze=null,Ve=!1,qe=null,He=null,kt.clear(),t)for(const e of Xe)e.updated=null}}discard(){for(const e of this.#i)e(this);this.#i.clear(),this.#s.clear(),this.#m()}register_created_effect(e){this.#f.push(e)}#S(){this.#m();for(let f=De;null!==f;f=f.#n){var e=f.id<this.id,n=[];for(const[t,[i,s]]of this.current){if(f.current.has(t)){var r=f.current.get(t)[0];if(!e||i===r)continue;f.current.set(t,[i,s])}n.push(t)}if(e)for(const[e,t]of this.async_deriveds){const n=f.async_deriveds.get(e);n&&t.promise.then(n.resolve)}if(f.#e){var i=[...f.current.keys()].filter(e=>!this.current.has(e));if(0===i.length)e&&f.discard();else if(n.length>0){if(t&&le(0===f.#c.length,"Batch has scheduled roots"),e)for(const e of this.#v)f.unskip_effect(e,e=>{4194320&e.f?f.schedule(e):f.#y([e])});f.activate();var s=new Set,o=new Map;for(var a of n)tt(a,i,s,o);o=new Map;var l=[...f.current.keys()].filter(e=>!this.current.has(e)||this.current.get(e)[0]!==e.v);if(l.length>0)for(const e of this.#f)155648&e.f||!nt(e,l,o)||(4194320&e.f?($e(e,k),f.schedule(e)):f.#u.add(e));if(f.#c.length>0){for(var c of(f.apply(),f.#c))f.#w(c,[],[]);f.#c=[]}f.deactivate()}}}}increment(e,t){if(this.#o+=1,e){let e=this.#a.get(t)??0;this.#a.set(t,e+1)}}decrement(e,t){if(this.#o-=1,e){let e=this.#a.get(t)??0;1===e?this.#a.delete(t):this.#a.set(t,e-1)}this.#p||(this.#p=!0,we(()=>{this.#p=!1,this.linked&&this.flush()}))}transfer_effects(e,t){for(const t of e)this.#u.add(t);for(const e of t)this.#d.add(e);e.clear(),t.clear()}oncommit(e){this.#r.add(e)}ondiscard(e){this.#i.add(e)}on_fork_commit(e){this.#s.add(e)}run_fork_commit_callbacks(){for(const e of this.#s)e(this);this.#s.clear()}settled(){return(this.#l??=g()).promise}static ensure(){if(null===qe){const e=qe=new Je;e.#x(),Ve||Be||we(()=>{e.#e||e.flush()})}return qe}apply(){He=null}schedule(e){if(Ne=e,e.b?.is_pending&&16777228&e.f&&0===(e.f&E))e.b.defer_effect(e);else{for(var t=e;null!==t.parent;){var n=(t=t.parent).f;if(!(null===Ke||t!==En||null!==xn&&2&xn.f))return;if(96&n){if(0===(n&b))return;t.f^=b}}this.#c.push(t)}}#x(){null===Fe?De=Fe=this:(Fe.#n=this,this.#t=Fe),Fe=this}#m(){var e=this.#t,t=this.#n;null===e?De=t:e.#n=t,null===t?Fe=e:t.#t=e,this.linked=!1}}let Qe=null;function et(e){var t=e.length;if(0!==t){for(var n=0;n<t;){var r=e[n++];if(!(24576&r.f)&&In(r)&&(Qe=new Set,Un(r),null===r.deps&&null===r.first&&null===r.nodes&&null===r.teardown&&null===r.ac&&hn(r),Qe?.size>0)){kt.clear();for(const e of Qe){if(24576&e.f)continue;const t=[e];let n=e.parent;for(;null!==n;)Qe.has(n)&&(Qe.delete(n),t.push(n)),n=n.parent;for(let e=t.length-1;e>=0;e--){const n=t[e];24576&n.f||Un(n)}}Qe.clear()}}Qe=null}}function tt(e,t,n,r){if(!n.has(e)&&(n.add(e),null!==e.reactions))for(const i of e.reactions){const e=i.f;2&e?tt(i,t,n,r):4194320&e&&0===(e&k)&&nt(i,t,r)&&($e(i,k),rt(i))}}function nt(e,t,n){const r=n.get(e);if(void 0!==r)return r;if(null!==e.deps)for(const r of e.deps){if(i.call(t,r))return!0;if(2&r.f&&nt(r,t,n))return n.set(r,!0),!0}return n.set(e,!1),!1}function rt(e){qe.schedule(e)}function it(e,t){if(0===(e.f&m)||0===(e.f&b)){0!==(e.f&k)?t.d.push(e):0!==(e.f&x)&&t.m.push(e),$e(e,b);for(var n=e.first;null!==n;)it(n,t),n=n.next}}function st(e){$e(e,b);for(var t=e.first;null!==t;)st(t),t=t.next}class ot{parent;is_pending=!1;transform_error;#$;#E=null;#z;#M;#T;#L=null;#O=null;#j=null;#C=null;#P=0;#A=0;#R=!1;#u=new Set;#d=new Set;#I=null;#W=function(e){let n,r=0,i=$t(0);return t&&se(i,"createSubscriber version"),()=>{Jt()&&(Hn(i),on(()=>(0===r&&(n=Vn(()=>e(()=>Ot(i)))),r+=1,()=>{we(()=>{r-=1,0===r&&(n?.(),n=void 0,Ot(i))})})))}}(()=>(this.#I=$t(this.#P),t&&se(this.#I,"$effect.pending()"),()=>{this.#I=null}));constructor(e,t,n,r){this.#$=e,this.#z=t,this.#M=e=>{var t=En;t.b=this,t.f|=128,n(e)},this.parent=En.b,this.transform_error=r??this.parent?.transform_error??(e=>e),this.#T=ln(()=>{this.#D()},589824)}#F(){try{this.#L=cn(()=>this.#M(this.#$))}catch(e){this.error(e)}}#q(e){const t=this.#z.failed;t&&(this.#j=cn(()=>{t(this.#$,()=>e,()=>()=>{})}))}#U(){const e=this.#z.pending;e&&(this.is_pending=!0,this.#O=cn(()=>e(this.#$)),we(()=>{var e=this.#C=document.createDocumentFragment(),t=Ht();e.append(t),this.#L=this.#H(()=>cn(()=>this.#M(t))),0===this.#A&&(this.#$.before(e),this.#C=null,vn(this.#O,()=>{this.#O=null}),this.#N(qe))}))}#D(){try{if(this.is_pending=this.has_pending_snippet(),this.#A=0,this.#P=0,this.#L=cn(()=>{this.#M(this.#$)}),this.#A>0){var e=this.#C=document.createDocumentFragment();wn(this.#L,e);const t=this.#z.pending;this.#O=cn(()=>t(this.#$))}else this.#N(qe)}catch(e){this.error(e)}}#N(e){this.is_pending=!1,e.transfer_effects(this.#u,this.#d)}defer_effect(e){Me(e,this.#u,this.#d)}is_rendered(){return!this.is_pending&&(!this.parent||this.parent.is_rendered())}has_pending_snippet(){return!!this.#z.pending}#H(e){var t=En,n=xn,r=ce;zn(this.#T),$n(this.#T),fe(this.#T.ctx);try{return Je.ensure(),e()}catch(e){return be(e),null}finally{zn(t),$n(n),fe(r)}}#B(e,t){this.has_pending_snippet()?(this.#A+=e,0===this.#A&&(this.#N(t),this.#O&&vn(this.#O,()=>{this.#O=null}),this.#C&&(this.#$.before(this.#C),this.#C=null))):this.parent&&this.parent.#B(e,t)}update_pending_count(e,t){this.#B(e,t),this.#P+=e,this.#I&&!this.#R&&(this.#R=!0,we(()=>{this.#R=!1,this.#I&&Tt(this.#I,this.#P)}))}get_effect_pending(){return this.#W(),Hn(this.#I)}error(e){if(!this.#z.onerror&&!this.#z.failed)throw e;qe?.is_fork?(this.#L&&qe.skip_effect(this.#L),this.#O&&qe.skip_effect(this.#O),this.#j&&qe.skip_effect(this.#j),qe.on_fork_commit(()=>{this.#V(e)})):this.#V(e)}#V(e){this.#L&&(dn(this.#L),this.#L=null),this.#O&&(dn(this.#O),this.#O=null),this.#j&&(dn(this.#j),this.#j=null);var n=this.#z.onerror;let r=this.#z.failed;var i=!1,s=!1;const o=()=>{i?t?console.warn("%c[svelte] svelte_boundary_reset_noop\n%cA `<svelte:boundary>` `reset` function only resets the boundary the first time it is called\nhttps://svelte.dev/e/svelte_boundary_reset_noop",J,Q):console.warn("https://svelte.dev/e/svelte_boundary_reset_noop"):(i=!0,s&&function(){if(t){const e=new Error("svelte_boundary_reset_onerror\nA `<svelte:boundary>` `reset` function cannot be called while an error is still being handled\nhttps://svelte.dev/e/svelte_boundary_reset_onerror");throw e.name="Svelte error",e}throw new Error("https://svelte.dev/e/svelte_boundary_reset_onerror")}(),null!==this.#j&&vn(this.#j,()=>{this.#j=null}),this.#H(()=>{this.#D()}))},a=e=>{try{s=!0,n?.(e,o),s=!1}catch(e){ke(e,this.#T&&this.#T.parent)}r&&(this.#j=this.#H(()=>{try{return cn(()=>{var t=En;t.b=this,t.f|=128,r(this.#$,()=>e,()=>o)})}catch(e){return ke(e,this.#T.parent),null}}))};we(()=>{var t;try{t=this.transform_error(e)}catch(e){return void ke(e,this.#T&&this.#T.parent)}null!==t&&"object"==typeof t&&"function"==typeof t.then?t.then(a,e=>ke(e,this.#T&&this.#T.parent)):a(t)})}}function at(e,n,r,i){const s=_e()?ht:pt;var o=e.filter(e=>!e.settled);if(0!==r.length||0!==o.length){var a=En,l=function(){var e=En,n=xn,r=ce,i=qe;if(t)var s=ue;return function(o=!0){zn(e),$n(n),fe(r),o&&0===(e.f&$)&&(i?.activate(),i?.apply()),t&&(ut(null),de(s))}}(),c=1===o.length?o[0].promise:o.length>1?Promise.all(o.map(e=>e.promise)):null,f=ct();0!==r.length?c?c.then(()=>{l(),d(),lt()}):d():c.then(()=>u(n.map(s))).finally(f)}else i(n.map(s));function u(e){if(0===(a.f&$)){l();try{i(e)}catch(e){ke(e,a)}lt()}}function d(){Promise.all(r.map(e=>function(e,n,r){let i=En;null===i&&function(){if(t){const e=new Error("async_derived_orphan\nCannot create a `$derived(...)` with an `await` expression outside of an effect tree\nhttps://svelte.dev/e/async_derived_orphan");throw e.name="Svelte error",e}throw new Error("https://svelte.dev/e/async_derived_orphan")}();var s=void 0,o=$t(G);t&&(o.label=n??e.toString());var a=!xn,l=new Set;(function(e){Yt(4718592,e)})(()=>{var n=En;t&&(ft={effect:n,effect_deps:new Set,warned:!1});var c=g();s=c.promise;try{Promise.resolve(e()).then(c.resolve,e=>{e!==B&&c.reject(e)}).finally(lt)}catch(e){c.reject(e),lt()}if(t){if(ft){if(null!==n.deps)for(let e=0;e<Ln;e+=1)ft.effect_deps.add(n.deps[e]);if(null!==Tn)for(let e=0;e<Tn.length;e+=1)ft.effect_deps.add(Tn[e])}ft=null}var f=qe;if(a){if(0!==(n.f&E))var u=ct();if(i.b.is_rendered())f.async_deriveds.get(n)?.reject(vt);else for(const e of l.values())e.reject(vt);l.add(c),f.async_deriveds.set(n,c)}const d=(e,i=void 0)=>{t&&(ft=null),u?.(),l.delete(c),i!==vt&&(f.activate(),i?(o.f|=A,Tt(o,i)):(0!==(o.f&A)&&(o.f^=A),Tt(o,e),t&&void 0!==r&&(dt.add(o),setTimeout(()=>{dt.has(o)&&0===(n.f&$)&&(!function(e,n){t?console.warn(`%c[svelte] await_waterfall\n%cAn async derived, \`${e}\` (${n}) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app\nhttps://svelte.dev/e/await_waterfall`,J,Q):console.warn("https://svelte.dev/e/await_waterfall")}(o.label,r),dt.delete(o))}))),f.deactivate())};c.promise.then(d,e=>d(null,e||"unknown"))}),Qt(()=>{for(const e of l)e.reject(vt)}),t&&(o.f|=P);return new Promise(e=>{function t(n){function r(){n===s?e(o):t(s)}n.then(r,r)}t(s)})}(e))).then(e=>u([...n.map(s),...e])).catch(e=>ke(e,a)).finally(f)}}function lt(e=!0){zn(null),$n(null),fe(null),e&&qe?.deactivate(),t&&(ut(null),de(null))}function ct(){var e=En,t=e.b,n=qe,r=t.is_rendered();return t.update_pending_count(1,n),n.increment(r,e),()=>{t.update_pending_count(-1,n),n.decrement(r,e)}}let ft=null;function ut(e){ft=e}const dt=new Set;function ht(e){null!==En&&(En.f|=L);const t={ctx:ce,deps:null,effects:null,equals:te,f:2050,fn:e,reactions:null,rv:0,v:G,wv:0,parent:En,ac:null};return t}const vt=Symbol("obsolete");function pt(e){const t=ht(e);return t.equals=re,t}function gt(e){var t=e.effects;if(null!==t){e.effects=null;for(var n=0;n<t.length;n+=1)dn(t[n])}}let _t=[];function mt(e){var n,r=En,s=e.parent;if(!bn&&null!==s&&24576&s.f)return t?console.warn("%c[svelte] derived_inert\n%cReading a derived belonging to a now-destroyed effect may result in stale values\nhttps://svelte.dev/e/derived_inert",J,Q):console.warn("https://svelte.dev/e/derived_inert"),e.v;if(zn(s),t){let s=bt;xt(new Set);try{i.call(_t,e)&&function(){if(t){const e=new Error("derived_references_self\nA derived value cannot reference itself recursively\nhttps://svelte.dev/e/derived_references_self");throw e.name="Svelte error",e}throw new Error("https://svelte.dev/e/derived_references_self")}(),_t.push(e),e.f&=-65537,gt(e),n=Dn(e)}finally{zn(r),xt(s),_t.pop()}}else try{e.f&=-65537,gt(e),n=Dn(e)}finally{zn(r)}return n}function wt(e){var t=mt(e);e.equals(t)||(e.wv=Rn(),qe?.is_fork&&null!==e.deps||(null!==qe?(qe.capture(e,t,!0),Ue?.capture(e,t,!0)):e.v=t,null!==e.deps))?bn||(null!==He?(Jt()||qe?.is_fork)&&He.set(e,t):Ee(e)):$e(e,b)}function yt(e){if(null!==e.effects)for(const t of e.effects)t.teardown&&Un(t)}let bt=new Set;const kt=new Map;function xt(e){bt=e}let St=!1;function $t(e,t){var n={f:0,v:e,reactions:null,equals:te,rv:0,wv:0};return n}function Et(e,t){const n=$t(e);var r;return r=n,null!==xn&&(null===Mn?Mn=[r]:Mn.push(r)),n}function zt(e,t=!1,n=!0){const r=$t(e);return t||(r.equals=re),ie&&n&&null!==ce&&null!==ce.l&&(ce.l.s??=[]).push(r),r}function Mt(e,n,r=!1){null===xn||Sn&&0===(xn.f&T)||!_e()||!(4325394&xn.f)||null!==Mn&&i.call(Mn,e)||function(){if(t){const e=new Error("state_unsafe_mutation\nUpdating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`\nhttps://svelte.dev/e/state_unsafe_mutation");throw e.name="Svelte error",e}throw new Error("https://svelte.dev/e/state_unsafe_mutation")}();let s=r?Pt(n):n;return t&&oe(s,e.label),Tt(e,s,Ze)}function Tt(e,n,r=null){if(!e.equals(n)){kt.set(e,bn?n:e.v);var i=Je.ensure();if(i.capture(e,n),t){if(null!==En){e.updated??=new Map;const t=(e.updated.get("")?.count??0)+1;if(e.updated.set("",{error:null,count:t}),t>5){const t=ae("updated at");if(null!==t){let n=e.updated.get(t.stack);n||(n={error:t,count:0},e.updated.set(t.stack,n)),n.count++}}}null!==En&&(e.set_during_effect=!0)}if(2&e.f){const t=e;0!==(e.f&k)&&mt(t),null===He&&Ee(t)}e.wv=Rn(),jt(e,k,r),!_e()||null===En||0===(En.f&b)||96&En.f||(null===On?function(e){On=e}([e]):On.push(e)),!i.is_fork&&bt.size>0&&!St&&Lt()}return n}function Lt(){St=!1;for(const e of bt){let t;0!==(e.f&b)&&$e(e,x);try{t=In(e)}catch{t=!0}t&&Un(e)}bt.clear()}function Ot(e){Mt(e,e.v+1)}function jt(e,t,n){var r=e.reactions;if(null!==r)for(var i=_e(),s=r.length,o=0;o<s;o++){var a=r[o],l=a.f;if(i||a!==En){var c=0===(l&k);if(c&&$e(a,t),0!==(l&T))bt.add(a);else if(2&l){var f=a;He?.delete(f),0===(l&j)&&(l&y&&(null===En||0===(En.f&C))&&(a.f|=j),jt(f,x,n))}else if(c){var u=a;0!==(l&_)&&null!==Qe&&Qe.add(u),null!==n?n.push(u):rt(u)}}}}const Ct=/^[a-zA-Z_$][a-zA-Z_$0-9]*$/;function Pt(e){if("object"!=typeof e||null===e||R in e)return e;const r=u(e);if(r!==c&&r!==f)return e;var i=new Map,s=n(e),o=Et(0),l=Pn,d=e=>{if(Pn===l)return e();var t=xn,n=Pn;$n(null),An(l);var r=e();return $n(t),An(n),r};s&&(i.set("length",Et(e.length)),t&&(e=new Proxy(e,{get(e,t,n){var r=Reflect.get(e,t,n);return It.has(t)?function(...e){St=!0;var t=r.apply(this,e);return Lt(),t}:r}})));var h="";let v=!1;function p(e){if(!v){v=!0,se(o,`${h=e} version`);for(const[e,t]of i)se(t,At(h,e));v=!1}}return new Proxy(e,{defineProperty(e,n,r){"value"in r&&!1!==r.configurable&&!1!==r.enumerable&&!1!==r.writable||function(){if(t){const e=new Error("state_descriptors_fixed\nProperty descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.\nhttps://svelte.dev/e/state_descriptors_fixed");throw e.name="Svelte error",e}throw new Error("https://svelte.dev/e/state_descriptors_fixed")}();var s=i.get(n);return void 0===s?d(()=>{var e=Et(r.value);return i.set(n,e),t&&"string"==typeof n&&se(e,At(h,n)),e}):Mt(s,r.value,!0),!0},deleteProperty(e,n){var r=i.get(n);if(void 0===r){if(n in e){const e=d(()=>Et(G));i.set(n,e),Ot(o),t&&se(e,At(h,n))}}else Mt(r,G),Ot(o);return!0},get(n,r,s){if(r===R)return e;if(t&&r===D)return p;var o=i.get(r),l=r in n;if(void 0!==o||l&&!a(n,r)?.writable||(o=d(()=>{var e=Et(Pt(l?n[r]:G));return t&&se(e,At(h,r)),e}),i.set(r,o)),void 0!==o){var c=Hn(o);return c===G?void 0:c}return Reflect.get(n,r,s)},getOwnPropertyDescriptor(e,t){var n=Reflect.getOwnPropertyDescriptor(e,t);if(n&&"value"in n){var r=i.get(t);r&&(n.value=Hn(r))}else if(void 0===n){var s=i.get(t),o=s?.v;if(void 0!==s&&o!==G)return{enumerable:!0,configurable:!0,value:o,writable:!0}}return n},has(e,n){if(n===R)return!0;var r=i.get(n),s=void 0!==r&&r.v!==G||Reflect.has(e,n);if((void 0!==r||null!==En&&(!s||a(e,n)?.writable))&&(void 0===r&&(r=d(()=>{var r=Et(s?Pt(e[n]):G);return t&&se(r,At(h,n)),r}),i.set(n,r)),Hn(r)===G))return!1;return s},set(e,n,r,l){var c=i.get(n),f=n in e;if(s&&"length"===n)for(var u=r;u<c.v;u+=1){var v=i.get(u+"");void 0!==v?Mt(v,G):u in e&&(v=d(()=>Et(G)),i.set(u+"",v),t&&se(v,At(h,u)))}void 0===c?f&&!a(e,n)?.writable||(c=d(()=>Et(void 0)),t&&se(c,At(h,n)),Mt(c,Pt(r)),i.set(n,c)):(f=c.v!==G,Mt(c,d(()=>Pt(r))));var p=Reflect.getOwnPropertyDescriptor(e,n);if(p?.set&&p.set.call(l,r),!f){if(s&&"string"==typeof n){var g=i.get("length"),_=Number(n);Number.isInteger(_)&&_>=g.v&&Mt(g,_+1)}Ot(o)}return!0},ownKeys(e){Hn(o);var t=Reflect.ownKeys(e).filter(e=>{var t=i.get(e);return void 0===t||t.v!==G});for(var[n,r]of i)r.v===G||n in e||t.push(n);return t},setPrototypeOf(){!function(){if(t){const e=new Error("state_prototype_fixed\nCannot set prototype of `$state` object\nhttps://svelte.dev/e/state_prototype_fixed");throw e.name="Svelte error",e}throw new Error("https://svelte.dev/e/state_prototype_fixed")}()}})}function At(e,t){return"symbol"==typeof t?`${e}[Symbol(${t.description??""})]`:Ct.test(t)?`${e}.${t}`:/^\d+$/.test(t)?`${e}[${t}]`:`${e}['${t}']`}function Rt(e){try{if(null!==e&&"object"==typeof e&&R in e)return e[R]}catch{}return e}const It=new Set(["copyWithin","fill","pop","push","reverse","shift","sort","splice","unshift"]);var Wt,Dt,Ft,qt;function Ut(){if(void 0===Wt){Wt=window,Dt=/Firefox/.test(navigator.userAgent);var e=Element.prototype,n=Node.prototype,r=Text.prototype;Ft=a(n,"firstChild").get,qt=a(n,"nextSibling").get,d(e)&&(e[q]=void 0,e[F]=null,e[U]=void 0,e.__e=void 0),d(r)&&(r[H]=void 0),t&&(e.__svelte_meta=null,function(){const e=Array.prototype,t=Array.__svelte_cleanup;t&&t();const{indexOf:n,lastIndexOf:r,includes:i}=e;e.indexOf=function(e,t){const r=n.call(this,e,t);if(-1===r)for(let n=t??0;n<this.length;n+=1)if(Rt(this[n])===e){ee("array.indexOf(...)");break}return r},e.lastIndexOf=function(e,t){const n=r.call(this,e,t??this.length-1);if(-1===n)for(let n=0;n<=(t??this.length-1);n+=1)if(Rt(this[n])===e){ee("array.lastIndexOf(...)");break}return n},e.includes=function(e,t){const n=i.call(this,e,t);if(!n)for(let t=0;t<this.length;t+=1)if(Rt(this[t])===e){ee("array.includes(...)");break}return n},Array.__svelte_cleanup=()=>{e.indexOf=n,e.lastIndexOf=r,e.includes=i}}())}}function Ht(e=""){return document.createTextNode(e)}function Nt(e){return Ft.call(e)}function Bt(e){return qt.call(e)}function Vt(e,t){return Nt(e)}function Kt(e,t=!1){var n=Nt(e);return n instanceof Comment&&""===n.data?Bt(n):n}function Zt(e,t=1,n=!1){let r=e;for(;t--;)r=Bt(r);return r}function Gt(e){var t=xn,n=En;$n(null),zn(null);try{return e()}finally{$n(t),zn(n)}}function Xt(e){null===En&&(null===xn&&function(e){if(t){const t=new Error(`effect_orphan\n\`${e}\` can only be used inside an effect (e.g. during component initialisation)\nhttps://svelte.dev/e/effect_orphan`);throw t.name="Svelte error",t}throw new Error("https://svelte.dev/e/effect_orphan")}(e),function(){if(t){const e=new Error("effect_in_unowned_derived\nEffect cannot be created inside a `$derived` value that was not itself created inside an effect\nhttps://svelte.dev/e/effect_in_unowned_derived");throw e.name="Svelte error",e}throw new Error("https://svelte.dev/e/effect_in_unowned_derived")}()),bn&&function(e){if(t){const t=new Error(`effect_in_teardown\n\`${e}\` cannot be used inside an effect cleanup function\nhttps://svelte.dev/e/effect_in_teardown`);throw t.name="Svelte error",t}throw new Error("https://svelte.dev/e/effect_in_teardown")}(e)}function Yt(e,n){var r=En;if(t)for(;null!==r&&0!==(r.f&T);)r=r.parent;null!==r&&0!==(r.f&S)&&(e|=S);var i={ctx:ce,deps:null,nodes:null,f:e|k|y,first:null,fn:n,last:null,next:null,parent:r,b:r&&r.b,prev:null,teardown:null,wv:0,ac:null};t&&(i.component_function=he),qe?.register_created_effect(i);var s=i;if(4&e)null!==Ke?Ke.push(i):Je.ensure().schedule(i);else if(null!==n){try{Un(i)}catch(s){throw dn(i),s}null===s.deps&&null===s.teardown&&null===s.nodes&&s.first===s.last&&0===(s.f&L)&&(s=s.first,0!==(e&_)&&0!==(e&M)&&null!==s&&(s.f|=M))}if(null!==s&&(s.parent=r,null!==r&&function(e,t){var n=t.last;null===n?t.last=t.first=e:(n.next=e,e.prev=n,t.last=e)}(s,r),null!==xn&&2&xn.f&&0===(e&w))){var o=xn;(o.effects??=[]).push(s)}return i}function Jt(){return null!==xn&&!Sn}function Qt(e){const t=Yt(8,null);return $e(t,b),t.teardown=e,t}function en(e){Xt("$effect"),t&&o(e,"name",{value:"$effect"});var n=En.f;if(!(!xn&&0!==(n&m)&&0===(n&E)))return tn(e);var r=ce;(r.e??=[]).push(e)}function tn(e){return Yt(1048580,e)}function nn(e){return Yt(4,e)}function rn(e,t){var n={effect:null,ran:!1,deps:e};ce.l.$.push(n),n.effect=on(()=>{if(e(),!n.ran){n.ran=!0;var r=En;try{zn(r.parent),Vn(t)}finally{zn(r)}}})}function sn(){var e=ce;on(()=>{for(var t of e.l.$){t.deps();var n=t.effect;0!==(n.f&b)&&null!==n.deps&&$e(n,x),In(n)&&Un(n),t.ran=!1}})}function on(e,t=0){return Yt(8|t,e)}function an(e,t=[],n=[],r=[]){at(r,t,n,t=>{Yt(8,()=>e(...t.map(Hn)))})}function ln(e,n=0){var r=Yt(_|n,e);return t&&(r.dev_stack=ue),r}function cn(e){return Yt(524320,e)}function fn(e){var t=e.teardown;if(null!==t){const e=bn,n=xn;kn(!0),$n(null);try{t.call(null)}finally{kn(e),$n(n)}}}function un(e,t=!1){var n=e.first;for(e.first=e.last=null;null!==n;){const e=n.ac;null!==e&&Gt(()=>{e.abort(B)});var r=n.next;0!==(n.f&w)?n.parent=null:dn(n,t),n=r}}function dn(e,n=!0){var r=!1;(n||262144&e.f)&&null!==e.nodes&&null!==e.nodes.end&&(!function(e,t){for(;null!==e;){var n=e===t?null:Bt(e);e.remove(),e=n}}(e.nodes.start,e.nodes.end),r=!0),$e(e,z),un(e,n&&!r),qn(e,0);var i=e.nodes&&e.nodes.t;if(null!==i)for(const e of i)e.stop();fn(e),e.f^=z,e.f|=$;var s=e.parent;null!==s&&null!==s.first&&hn(e),t&&(e.component_function=null),e.next=e.prev=e.teardown=e.ctx=e.deps=e.fn=e.nodes=e.ac=e.b=null}function hn(e){var t=e.parent,n=e.prev,r=e.next;null!==n&&(n.next=r),null!==r&&(r.prev=n),null!==t&&(t.first===e&&(t.first=r),t.last===e&&(t.last=n))}function vn(e,t,n=!0){var r=[];pn(e,r,!0);var i=()=>{n&&dn(e),t&&t()},s=r.length;if(s>0){var o=()=>--s||i();for(var a of r)a.out(o)}else i()}function pn(e,t,n){if(0===(e.f&S)){e.f^=S;var r=e.nodes&&e.nodes.t;if(null!==r)for(const e of r)(e.is_global||n)&&t.push(e);for(var i=e.first;null!==i;){var s=i.next;if(0===(i.f&w))pn(i,t,!!(0!==(i.f&M)||0!==(i.f&m)&&0!==(e.f&_))&&n);i=s}}}function gn(e){mn(e,!0)}function mn(e,t){if(0!==(e.f&S)){e.f^=S,0===(e.f&b)&&($e(e,k),Je.ensure().schedule(e));for(var n=e.first;null!==n;){var r=n.next;mn(n,!!(0!==(n.f&M)||0!==(n.f&m))&&t),n=r}var i=e.nodes&&e.nodes.t;if(null!==i)for(const e of i)(e.is_global||t)&&e.in()}}function wn(e,t){if(e.nodes)for(var n=e.nodes.start,r=e.nodes.end;null!==n;){var i=n===r?null:Bt(n);t.append(n),n=i}}let yn=!1,bn=!1;function kn(e){bn=e}let xn=null,Sn=!1;function $n(e){xn=e}let En=null;function zn(e){En=e}let Mn=null;let Tn=null,Ln=0,On=null;let jn=1,Cn=0,Pn=Cn;function An(e){Pn=e}function Rn(){return++jn}function In(e){var t=e.f;if(0!==(t&k))return!0;if(2&t&&(e.f&=-65537),0!==(t&x)){for(var n=e.deps,r=n.length,i=0;i<r;i++){var s=n[i];if(In(s)&&wt(s),s.wv>e.wv)return!0}0!==(t&y)&&null===He&&$e(e,b)}return!1}function Wn(e,t,n=!0){var r=e.reactions;if(null!==r&&(null===Mn||!i.call(Mn,e)))for(var s=0;s<r.length;s++){var o=r[s];2&o.f?Wn(o,t,!1):t===o&&(n?$e(o,k):0!==(o.f&b)&&$e(o,x),rt(o))}}function Dn(e){var t=Tn,n=Ln,r=On,i=xn,s=Mn,o=ce,a=Sn,l=Pn,c=e.f;Tn=null,Ln=0,On=null,xn=96&c?null:e,Mn=null,fe(e.ctx),Sn=!1,Pn=++Cn,null!==e.ac&&(Gt(()=>{e.ac.abort(B)}),e.ac=null);try{e.f|=C;var f=(0,e.fn)();e.f|=E;var u=e.deps,d=qe?.is_fork;if(null!==Tn){var h;if(d||qn(e,Ln),null!==u&&Ln>0)for(u.length=Ln+Tn.length,h=0;h<Tn.length;h++)u[Ln+h]=Tn[h];else e.deps=u=Tn;if(Jt()&&0!==(e.f&y))for(h=Ln;h<u.length;h++)(u[h].reactions??=[]).push(e)}else!d&&null!==u&&Ln<u.length&&(qn(e,Ln),u.length=Ln);if(_e()&&null!==On&&!Sn&&null!==u&&!(6146&e.f))for(h=0;h<On.length;h++)Wn(On[h],e);if(null!==i&&i!==e){if(Cn++,null!==i.deps)for(let e=0;e<n;e+=1)i.deps[e].rv=Cn;if(null!==t)for(const e of t)e.rv=Cn;null!==On&&(null===r?r=On:r.push(...On))}return 0!==(e.f&A)&&(e.f^=A),f}catch(e){return be(e)}finally{e.f^=C,Tn=t,Ln=n,On=r,xn=i,Mn=s,fe(o),Sn=a,Pn=l}}function Fn(e,t){let n=t.reactions;if(null!==n){var s=r.call(n,e);if(-1!==s){var o=n.length-1;0===o?n=t.reactions=null:(n[s]=n[o],n.pop())}}if(null===n&&2&t.f&&(null===Tn||!i.call(Tn,t))){var a=t;0!==(a.f&y)&&(a.f^=y,a.f&=-65537),a.v!==G&&Ee(a),function(e){if(null!==e.effects)for(const t of e.effects)(t.teardown||t.ac)&&(t.teardown?.(),t.ac?.abort(B),t.teardown=h,t.ac=null,qn(t,0),un(t))}(a),qn(a,0)}}function qn(e,t){var n=e.deps;if(null!==n)for(var r=t;r<n.length;r++)Fn(e,n[r])}function Un(e){var n=e.f;if(0===(n&$)){$e(e,b);var r=En,i=yn;if(En=e,yn=!0,t){var s=he;ve(e.component_function);var o=ue;de(e.dev_stack??ue)}try{16777232&n?function(e){for(var t=e.first;null!==t;){var n=t.next;0===(t.f&m)&&dn(t),t=n}}(e):un(e),fn(e);var a=Dn(e);e.teardown="function"==typeof a?a:null,e.wv=jn}finally{yn=i,En=r,t&&(ve(s),de(o))}}}function Hn(e){var n,r=!!(2&e.f);if(null!==xn&&!Sn&&!(null!==En&&0!==(En.f&$)||null!==Mn&&i.call(Mn,e))){var s=xn.deps;if(0!==(xn.f&C))e.rv<Cn&&(e.rv=Cn,null===Tn&&null!==s&&s[Ln]===e?Ln++:null===Tn?Tn=[e]:Tn.push(e));else{(xn.deps??=[]).push(e);var o=e.reactions;null===o?e.reactions=[xn]:i.call(o,xn)||o.push(xn)}}if(t){if(!Sn&&ft&&!ft.warned&&0===(ft.effect.f&C)&&!ft.effect_deps.has(e)){ft.warned=!0,n=e.label,t?console.warn(`%c[svelte] await_reactivity_loss\n%cDetected reactivity loss when reading \`${n}\`. This happens when state is read in an async function after an earlier \`await\`\nhttps://svelte.dev/e/await_reactivity_loss`,J,Q):console.warn("https://svelte.dev/e/await_reactivity_loss");var a=ae("traced at");a&&console.warn(a)}dt.delete(e)}if(bn&&kt.has(e))return kt.get(e);if(r){var l=e;if(bn){var c=l.v;return(0===(l.f&b)&&null!==l.reactions||Bn(l))&&(c=mt(l)),kt.set(l,c),c}var f=0===(l.f&y)&&!Sn&&null!==xn&&(yn||0!==(xn.f&y)),u=0===(l.f&E);In(l)&&(f&&(l.f|=y),wt(l)),f&&!u&&(yt(l),Nn(l))}if(He?.has(e))return He.get(e);if(0!==(e.f&A))throw e.v;return e.v}function Nn(e){if(e.f|=y,null!==e.deps)for(const t of e.deps)(t.reactions??=[]).push(e),2&t.f&&0===(t.f&y)&&(yt(t),Nn(t))}function Bn(e){if(e.v===G)return!0;if(null===e.deps)return!1;for(const t of e.deps){if(kt.has(t))return!0;if(2&t.f&&Bn(t))return!0}return!1}function Vn(e){var t=Sn;try{return Sn=!0,e()}finally{Sn=t}}function Kn(e){if("object"==typeof e&&e&&!(e instanceof EventTarget))if(R in e)Zn(e);else if(!Array.isArray(e))for(let t in e){const n=e[t];"object"==typeof n&&n&&R in n&&Zn(n)}}function Zn(e,t=new Set){if(!("object"!=typeof e||null===e||e instanceof EventTarget||t.has(e))){t.add(e),e instanceof Date&&e.getTime();for(let n in e)try{Zn(e[n],t)}catch(e){}const n=u(e);if(n!==Object.prototype&&n!==Array.prototype&&n!==Map.prototype&&n!==Set.prototype&&n!==Date.prototype){const t=l(n);for(let n in t){const r=t[n].get;if(r)try{r.call(e)}catch(e){}}}}}const Gn=["touchstart","touchmove"];function Xn(e){return Gn.includes(e)}const Yn=Symbol("events"),Jn=new Set,Qn=new Set;function er(e,t,n,r,i){var s={capture:r,passive:i},o=function(e,t,n,r={}){function i(e){if(r.capture||nr.call(t,e),!e.cancelBubble)return Gt(()=>n?.call(this,e))}return e.startsWith("pointer")||e.startsWith("touch")||"wheel"===e?we(()=>{t.addEventListener(e,i,r)}):t.addEventListener(e,i,r),i}(e,t,n,s);(t===document.body||t===window||t===document||t instanceof HTMLMediaElement)&&Qt(()=>{t.removeEventListener(e,o,s)})}let tr=null;function nr(e){var t=this,n=t.ownerDocument,r=e.type,i=e.composedPath?.()||[],s=i[0]||e.target;tr=e;var a=0,l=tr===e&&e[Yn];if(l){var c=i.indexOf(l);if(-1!==c&&(t===document||t===window))return void(e[Yn]=t);var f=i.indexOf(t);if(-1===f)return;c<=f&&(a=c)}if((s=i[a]||e.target)!==t){o(e,"currentTarget",{configurable:!0,get:()=>s||n});var u=xn,d=En;$n(null),zn(null);try{for(var h,v=[];null!==s;){var p=s.assignedSlot||s.parentNode||s.host||null;try{var g=s[Yn]?.[r];null==g||s.disabled&&e.target!==s||g.call(s,e)}catch(e){h?v.push(e):h=e}if(e.cancelBubble||p===t||null===p)break;s=p}if(h){for(let e of v)queueMicrotask(()=>{throw e});throw h}}finally{e[Yn]=t,delete e.currentTarget,$n(u),zn(d)}}}const rr=globalThis?.window?.trustedTypes&&globalThis.window.trustedTypes.createPolicy("svelte-trusted-html",{createHTML:e=>e});function ir(e){var t=function(e,t,n){let r=n?{is:n}:void 0;return document.createElementNS(t??Y,e,r)}("template");return t.innerHTML=function(e){return rr?.createHTML(e)??e}(e.replaceAll("<!>","\x3c!----\x3e")),t.content}function sr(e,t){var n=En;null===n.nodes&&(n.nodes={start:e,end:t,a:null,t:null})}function or(e,t){var n,r=!!(1&t),i=!!(2&t),s=!e.startsWith("<!>");return()=>{void 0===n&&(n=ir(s?e:"<!>"+e),r||(n=Nt(n)));var t=i||Dt?document.importNode(n,!0):n.cloneNode(!0);r?sr(Nt(t),t.lastChild):sr(t,t);return t}}function ar(e,t){return function(e,t,n="svg"){var r,i=!e.startsWith("<!>"),s=!!(1&t),o=`<${n}>${i?e:"<!>"+e}</${n}>`;return()=>{if(!r){var e=Nt(ir(o));if(s)for(r=document.createDocumentFragment();Nt(e);)r.appendChild(Nt(e));else r=Nt(e)}var t=r.cloneNode(!0);return s?sr(Nt(t),t.lastChild):sr(t,t),t}}(e,t,"svg")}function lr(e=""){var t=Ht(e+"");return sr(t,t),t}function cr(){var e=document.createDocumentFragment(),t=document.createComment(""),n=Ht();return e.append(t,n),sr(t,n),e}function fr(e,t){null!==e&&e.before(t)}let ur=!0;function dr(e,t){var n=null==t?"":"object"==typeof t?`${t}`:t;n!==(e[H]??=e.nodeValue)&&(e[H]=n,e.nodeValue=`${n}`)}function hr(e,t){return function(e,{target:t,anchor:n,props:r={},events:i,context:o,intro:a=!0,transformError:l}){Ut();var c=void 0,f=function(e){Je.ensure();const t=Yt(524352,e);return(e={})=>new Promise(n=>{e.outro?vn(t,()=>{dn(t),n(void 0)}):(dn(t),n(void 0))})}(()=>{var f=n??t.appendChild(Ht());!function(e,t,n,r){new ot(e,t,n,r)}(f,{pending:()=>{}},t=>{pe({}),o&&(ce.c=o),i&&(r.$$events=i),ur=a,c=e(t,r)||{},ur=!0,ge()},l);var u=new Set,d=e=>{for(var n=0;n<e.length;n++){var r=e[n];if(!u.has(r)){u.add(r);var i=Xn(r);for(const e of[t,document]){var s=vr.get(e);void 0===s&&(s=new Map,vr.set(e,s));var o=s.get(r);void 0===o?(e.addEventListener(r,nr,{passive:i}),s.set(r,1)):s.set(r,o+1)}}}};return d(s(Jn)),Qn.add(d),()=>{for(var e of u)for(const n of[t,document]){var r=vr.get(n),i=r.get(e);0==--i?(n.removeEventListener(e,nr),r.delete(e),0===r.size&&vr.delete(n)):r.set(e,i)}Qn.delete(d),f!==n&&f.parentNode?.removeChild(f)}});return pr.set(c,f),c}(e,t)}const vr=new Map;let pr=new WeakMap;class gr{anchor;#K=new Map;#Z=new Map;#G=new Map;#X=new Set;#Y=!0;constructor(e,t=!0){this.anchor=e,this.#Y=t}#S=e=>{if(this.#K.has(e)){var n=this.#K.get(e),r=this.#Z.get(n);if(r)gn(r),this.#X.delete(n);else{var i=this.#G.get(n);i&&(this.#Z.set(n,i.effect),this.#G.delete(n),t&&(i.fragment.lastChild[N]=this.anchor),i.fragment.lastChild.remove(),this.anchor.before(i.fragment),r=i.effect)}for(const[t,n]of this.#K){if(this.#K.delete(t),t===e)break;const r=this.#G.get(n);r&&(dn(r.effect),this.#G.delete(n))}for(const[e,t]of this.#Z){if(e===n||this.#X.has(e))continue;const i=()=>{if(Array.from(this.#K.values()).includes(e)){var n=document.createDocumentFragment();wn(t,n),n.append(Ht()),this.#G.set(e,{effect:t,fragment:n})}else dn(t);this.#X.delete(e),this.#Z.delete(e)};this.#Y||!r?(this.#X.add(e),vn(t,i,!1)):i()}}};#J=e=>{this.#K.delete(e);const t=Array.from(this.#K.values());for(const[e,n]of this.#G)t.includes(e)||(dn(n.effect),this.#G.delete(e))};ensure(e,t){var n=qe;!t||this.#Z.has(e)||this.#G.has(e)||this.#Z.set(e,cn(()=>t(this.anchor)));this.#K.set(n,e),this.#S(n)}}function _r(e,t,n=!1){var r=new gr(e);function i(e,t){r.ensure(e,t)}ln(()=>{var e=!1;t((t,n=0)=>{e=!0,i(n,t)}),e||i(-1,null)},n?M:0)}function mr(e,t){return t}function wr(e,t,n=!0){var r;if(e.pending.size>0){r=new Set;for(const t of e.pending.values())for(const n of t)r.add(e.items.get(n).e)}for(var i=0;i<t.length;i++){var s=t[i];if(r?.has(s)){s.f|=O;wn(s,document.createDocumentFragment())}else dn(t[i],n)}}var yr;function br(e,r,i,o,a,l=null){var c=e,f=new Map;!(4&r)||(c=e.appendChild(Ht()));var u,d=null,h=pt(()=>{var e=i();return n(e)?e:null==e?[]:s(e)});t&&se(h,"{#each ...}");var v=new Map,p=!0;function g(e){0===(m.effect.f&$)&&(m.pending.delete(e),m.fallback=d,function(e,t,n,r,i){var o,a,l,c,f,u=!!(8&r),d=t.length,h=e.items,v=kr(e.effect.first),p=null,g=[],_=[];if(u)for(f=0;f<d;f+=1)l=i(t[f],f),0===((c=h.get(l).e).f&O)&&(c.nodes?.a?.measure(),(a??=new Set).add(c));for(f=0;f<d;f+=1){if(l=i(t[f],f),c=h.get(l).e,null!==e.outrogroups)for(const t of e.outrogroups)t.pending.delete(c),t.done.delete(c);if(0!==(c.f&S)&&(gn(c),u&&(c.nodes?.a?.unfix(),(a??=new Set).delete(c))),0!==(c.f&O)){if(c.f^=O,c!==v){var m=p?p.next:v;c===e.effect.last&&(e.effect.last=c.prev),c.prev&&(c.prev.next=c.next),c.next&&(c.next.prev=c.prev),$r(e,p,c),$r(e,c,m),Sr(c,m,n),g=[],_=[],v=kr((p=c).next);continue}Sr(c,null,n)}if(c!==v){if(void 0!==o&&o.has(c)){if(g.length<_.length){var w,y=_[0];p=y.prev;var b=g[0],k=g[g.length-1];for(w=0;w<g.length;w+=1)Sr(g[w],y,n);for(w=0;w<_.length;w+=1)o.delete(_[w]);$r(e,b.prev,k.next),$r(e,p,b),$r(e,k,y),v=y,p=k,f-=1,g=[],_=[]}else o.delete(c),Sr(c,v,n),$r(e,c.prev,c.next),$r(e,c,null===p?e.effect.first:p.next),$r(e,p,c),p=c;continue}for(g=[],_=[];null!==v&&v!==c;)(o??=new Set).add(v),_.push(v),v=kr(v.next);if(null===v)continue}0===(c.f&O)&&g.push(c),p=c,v=kr(c.next)}if(null!==e.outrogroups){for(const t of e.outrogroups)0===t.pending.size&&(wr(e,s(t.done)),e.outrogroups?.delete(t));0===e.outrogroups.size&&(e.outrogroups=null)}if(null!==v||void 0!==o){var x=[];if(void 0!==o)for(c of o)0===(c.f&S)&&x.push(c);for(;null!==v;)0===(v.f&S)&&v!==e.fallback&&x.push(v),v=kr(v.next);var $=x.length;if($>0){var E=4&r&&0===d?n:null;if(u){for(f=0;f<$;f+=1)x[f].nodes?.a?.measure();for(f=0;f<$;f+=1)x[f].nodes?.a?.fix()}!function(e,t,n){for(var r,i=t.length,o=t.length,a=0;a<i;a++){let n=t[a];vn(n,()=>{if(r){if(r.pending.delete(n),r.done.add(n),0===r.pending.size){var t=e.outrogroups;wr(e,s(r.done)),t.delete(r),0===t.size&&(e.outrogroups=null)}}else o-=1},!1)}if(0===o){var l=null!==n;if(l){var c=n,f=c.parentNode;f.textContent="",f.append(c),e.items.clear()}wr(e,t,!l)}else r={pending:new Set(t),done:new Set},(e.outrogroups??=new Set).add(r)}(e,x,E)}}u&&we(()=>{if(void 0!==a)for(c of a)c.nodes?.a?.apply()})}(m,u,c,r,o),null!==d&&(0===u.length?0===(d.f&O)?gn(d):(d.f^=O,Sr(d,null,c)):vn(d,()=>{d=null})))}var _=ln(()=>{for(var e=(u=Hn(h)).length,n=new Set,s=qe,_=0;_<e;_+=1){var m=u[_],w=o(m,_);if(t){var y=o(m,_);w!==y&&Z(String(_),String(w),String(y))}var b=p?null:f.get(w);b?(b.v&&Tt(b.v,m),b.i&&Tt(b.i,_)):(b=xr(f,p?c:yr??=Ht(),m,w,_,a,r,i),p||(b.e.f|=O),f.set(w,b)),n.add(w)}0===e&&l&&!d&&(p?d=cn(()=>l(c)):(d=cn(()=>l(yr??=Ht()))).f|=O),e>n.size&&(t?function(e,t){const n=new Map,r=e.length;for(let i=0;i<r;i++){const r=t(e[i],i);if(n.has(r)){const e=String(n.get(r)),t=String(i);let s=String(r);s.startsWith("[object ")&&(s=null),K(e,t,s)}n.set(r,i)}}(u,o):K("","","")),p||(v.set(s,n),g(s)),Hn(h)}),m={effect:_,flags:r,items:f,pending:v,outrogroups:null,fallback:d};p=!1}function kr(e){for(;null!==e&&0===(e.f&m);)e=e.next;return e}function xr(e,n,r,i,s,o,a,l){var c=1&a?16&a?$t(r):zt(r,!1,!1):null,f=2&a?$t(s):null;return t&&c&&(c.trace=()=>{l()[f?.v??s]}),{v:c,i:f,e:cn(()=>(o(n,c??r,f??s,l),()=>{e.delete(i)}))}}function Sr(e,t,n){if(e.nodes)for(var r=e.nodes.start,i=e.nodes.end,s=t&&0===(t.f&O)?t.nodes.start:n;null!==r;){var o=Bt(r);if(s.before(r),r===i)return;r=o}}function $r(e,t,n){null===t?e.effect.first=n:t.next=n,null===n?e.effect.last=t:n.prev=t}const Er={tick:e=>requestAnimationFrame(e),now:()=>performance.now(),tasks:new Set};function zr(){const e=Er.now();Er.tasks.forEach(t=>{t.c(e)||(Er.tasks.delete(t),t.f())}),0!==Er.tasks.size&&Er.tick(zr)}function Mr(e,t){Gt(()=>{e.dispatchEvent(new CustomEvent(t))})}function Tr(e){if("float"===e)return"cssFloat";if("offset"===e)return"cssOffset";if(e.startsWith("--"))return e;const t=e.split("-");return 1===t.length?t[0]:t[0]+t.slice(1).map(e=>e[0].toUpperCase()+e.slice(1)).join("")}function Lr(e){const t={},n=e.split(";");for(const e of n){const[n,r]=e.split(":");if(!n||void 0===r)break;t[Tr(n.trim())]=r.trim()}return t}const Or=e=>e;function jr(e,t,n,r){var i,s,o,a=!!(1&e),l=!!(2&e),c=!!(4&e),f=a&&l?"both":a?"in":"out",u=t.inert,d=t.style.overflow;function h(){return Gt(()=>i??=n()(t,r?.()??{},{direction:f}))}var v={is_global:c,in(){if(t.inert=u,!a)return o?.abort(),void o?.reset?.();l||s?.abort(),s=Cr(t,h(),o,1,()=>{Mr(t,"introstart")},()=>{Mr(t,"introend"),s?.abort(),s=i=void 0,t.style.overflow=d})},out(e){if(!l)return e?.(),void(i=void 0);t.inert=!0,o=Cr(t,h(),s,0,()=>{Mr(t,"outrostart")},()=>{Mr(t,"outroend"),e?.()})},stop:()=>{s?.abort(),o?.abort()}},p=En;if((p.nodes.t??=[]).push(v),a&&ur){var g=c;if(!g){for(var m=p.parent;m&&0!==(m.f&M);)for(;(m=m.parent)&&0===(m.f&_););g=!m||0!==(m.f&E)}g&&nn(()=>{Vn(()=>v.in())})}}function Cr(e,t,n,r,i,s){var o=1===r;if("function"==typeof t){var a,l=!1;return we(()=>{if(!l){var c=t({direction:o?"in":"out"});a=Cr(e,c,n,r,i,s)}}),{abort:()=>{l=!0,a?.abort()},deactivate:()=>a.deactivate(),reset:()=>a.reset(),t:()=>a.t()}}if(n?.deactivate(),!t?.duration&&!t?.delay)return i(),s(),{abort:h,deactivate:h,reset:h,t:()=>r};const{delay:c=0,css:f,tick:u,easing:d=Or}=t;var v=[];if(o&&void 0===n&&(u&&u(0,1),f)){var p=Lr(f(0,1));v.push(p,p)}var g=()=>1-r,_=e.animate(v,{duration:c,fill:"forwards"});return _.onfinish=()=>{_.cancel(),i();var o=n?.t()??1-r;n?.abort();var a=r-o,l=t.duration*Math.abs(a),c=[];if(l>0){var h=!1;if(f)for(var v=Math.ceil(l/(1e3/60)),p=0;p<=v;p+=1){var m=o+a*d(p/v),w=Lr(f(m,1-m));c.push(w),h||="hidden"===w.overflow}h&&(e.style.overflow="hidden"),g=()=>{var e=_.currentTime;return o+a*d(e/l)},u&&function(e){let t;0===Er.tasks.size&&Er.tick(zr),new Promise(n=>{Er.tasks.add(t={c:e,f:n})})}(()=>{if("running"!==_.playState)return!1;var e=g();return u(e,1-e),!0})}(_=e.animate(c,{duration:l,fill:"forwards"})).onfinish=()=>{g=()=>r,u?.(r,1-r),s()}},{abort:()=>{_&&(_.cancel(),_.effect=null,_.onfinish=h)},deactivate:()=>{s=h},reset:()=>{0===r&&u?.(1,0)},t:()=>g()}}const Pr=[..." \t\n\r\f \v\ufeff"];function Ar(e,t=!1){var n=t?" !important;":";",r="";for(var i of Object.keys(e)){var s=e[i];null!=s&&""!==s&&(r+=" "+i+": "+s+n)}return r}function Rr(e){return"-"!==e[0]||"-"!==e[1]?e.toLowerCase():e}function Ir(e,t,n,r,i,s){var o=e[q];if(o!==n||void 0===o){var a=function(e,t,n){var r=null==e?"":""+e;if(t&&(r=r?r+" "+t:t),n)for(var i of Object.keys(n))if(n[i])r=r?r+" "+i:i;else if(r.length)for(var s=i.length,o=0;(o=r.indexOf(i,o))>=0;){var a=o+s;0!==o&&!Pr.includes(r[o-1])||a!==r.length&&!Pr.includes(r[a])?o=a:r=(0===o?"":r.substring(0,o))+r.substring(a+1)}return""===r?null:r}(n,r,s);null==a?e.removeAttribute("class"):t?e.className=a:e.setAttribute("class",a),e[q]=n}else if(s&&i!==s)for(var l in s){var c=!!s[l];null!=i&&c===!!i[l]||e.classList.toggle(l,c)}return s}function Wr(e,t={},n,r){for(var i in n){var s=n[i];t[i]!==s&&(null==n[i]?e.style.removeProperty(i):e.style.setProperty(i,s,r))}}function Dr(e,t,n,r){if(e[U]!==t){var i=function(e,t){if(t){var n,r,i="";if(Array.isArray(t)?(n=t[0],r=t[1]):n=t,e){e=String(e).replaceAll(/\s*\/\*.*?\*\/\s*/g,"").trim();var s=!1,o=0,a=!1,l=[];n&&l.push(...Object.keys(n).map(Rr)),r&&l.push(...Object.keys(r).map(Rr));var c=0,f=-1;const t=e.length;for(var u=0;u<t;u++){var d=e[u];if(a?"/"===d&&"*"===e[u-1]&&(a=!1):s?s===d&&(s=!1):"/"===d&&"*"===e[u+1]?a=!0:'"'===d||"'"===d?s=d:"("===d?o++:")"===d&&o--,!a&&!1===s&&0===o)if(":"===d&&-1===f)f=u;else if(";"===d||u===t-1){if(-1!==f){var h=Rr(e.substring(c,f).trim());l.includes(h)||(";"!==d&&u++,i+=" "+e.substring(c,u).trim()+";")}c=u+1,f=-1}}}return n&&(i+=Ar(n)),r&&(i+=Ar(r,!0)),""===(i=i.trim())?null:i}return null==e?null:String(e)}(t,r);null==i?e.removeAttribute("style"):e.style.cssText=i,e[U]=t}else r&&(Array.isArray(r)?(Wr(e,n?.[0],r[0]),Wr(e,n?.[1],r[1],"important")):Wr(e,n,r));return r}const Fr=Symbol("is custom element"),qr=Symbol("is html");function Ur(e,t,n,r){var i=function(e){return e[F]??={[Fr]:e.nodeName.includes("-"),[qr]:e.namespaceURI===Y}}(e);i[t]!==(i[t]=n)&&("loading"===t&&(e[W]=n),null==n?e.removeAttribute(t):"string"!=typeof n&&function(e){var t,n=e.getAttribute("is")||e.nodeName,r=Hr.get(n);if(r)return r;Hr.set(n,r=[]);var i=e,s=Element.prototype;for(;s!==i;){for(var o in t=l(i))t[o].set&&"innerHTML"!==o&&"textContent"!==o&&"innerText"!==o&&r.push(o);i=u(i)}return r}(e).includes(t)?e[t]=n:e.setAttribute(t,n))}var Hr=new Map;function Nr(e,t){return e===t||e?.[R]===t}function Br(e={},t,n,r){var i=ce.r,s=En;return nn(()=>{var o,a;return on(()=>{o=a,a=r?.()||[],Vn(()=>{Nr(n(...a),e)||(t(e,...a),o&&Nr(n(...o),e)&&t(null,...o))})}),()=>{let r=s;for(;r!==i&&null!==r.parent&&r.parent.f&z;)r=r.parent;const o=r.teardown;r.teardown=()=>{a&&Nr(n(...a),e)&&t(null,...a),o?.()}}}),e}function Vr(e=!1){const n=ce,r=n.l.u;if(!r)return;let i=()=>Kn(n.s);if(e){let e=0,t={};const r=ht(()=>{let r=!1;const i=n.s;for(const e in i)i[e]!==t[e]&&(t[e]=i[e],r=!0);return r&&e++,e});i=()=>Hn(r)}var s;r.b.length&&(s=()=>{Kr(n,i),p(r.b)},Xt("$effect.pre"),t&&o(s,"name",{value:"$effect.pre"}),Yt(1048584,s)),en(()=>{const e=Vn(()=>r.m.map(v));return()=>{for(const t of e)"function"==typeof t&&t()}}),r.a.length&&en(()=>{Kr(n,i),p(r.a)})}function Kr(e,t){if(e.l.s)for(const t of e.l.s)Hn(t);t()}function Zr(e,t){var r=e.$$events?.[t.type],i=n(r)?r.slice():null==r?[]:[r];for(var s of i)s.call(this,t)}function Gr(e,n,r,i){var s=!ie||!!(2&r),o=!!(8&r),l=!!(16&r),c=i,f=!0,u=void 0,d=()=>l&&s?(u??=ht(i),Hn(u)):(f&&(f=!1,c=l?Vn(i):i),c);let h;if(o){var v=R in e||I in e;h=a(e,n)?.set??(v&&n in e?t=>e[n]=t:void 0)}var p,g,_=!1;if(o?[p,_]=function(e){var t=Pe;try{return Pe=!1,[e(),Pe]}finally{Pe=t}}(()=>e[n]):p=e[n],void 0===p&&void 0!==i&&(p=d(),h&&(s&&function(e){if(t){const t=new Error(`props_invalid_value\nCannot do \`bind:${e}={undefined}\` when \`${e}\` has a fallback value\nhttps://svelte.dev/e/props_invalid_value`);throw t.name="Svelte error",t}throw new Error("https://svelte.dev/e/props_invalid_value")}(n),h(p))),g=s?()=>{var t=e[n];return void 0===t?d():(f=!0,t)}:()=>{var t=e[n];return void 0!==t&&(c=void 0),void 0===t?c:t},s&&!(4&r))return g;if(h){var m=e.$$legacy;return function(e,t){return arguments.length>0?(s&&t&&!m&&!_||h(t?g():e),e):g()}}var w=!1,y=(1&r?ht:pt)(()=>(w=!1,g()));t&&(y.label=n),o&&Hn(y);var b=En;return function(e,t){if(arguments.length>0){const n=t?Hn(y):s&&o?Pt(e):e;return Mt(y,n),w=!0,void 0!==c&&(c=n),e}return bn&&w||0!==(b.f&$)?y.v:Hn(y)}}if(t){function es(e){if(!(e in globalThis)){let n;Object.defineProperty(globalThis,e,{configurable:!0,get:()=>{if(void 0!==n)return n;!function(e){if(t){const t=new Error(`rune_outside_svelte\nThe \`${e}\` rune is only available inside \`.svelte\` and \`.svelte.js/ts\` files\nhttps://svelte.dev/e/rune_outside_svelte`);throw t.name="Svelte error",t}throw new Error("https://svelte.dev/e/rune_outside_svelte")}(e)},set:e=>{n=e}})}}es("$state"),es("$effect"),es("$derived"),es("$inspect"),es("$props"),es("$bindable")}function Xr(e){var t,n;null===ce&&V("onMount"),ie&&null!==ce.l?(t=ce,n=t.l,n.u??={a:[],b:[],m:[]}).m.push(e):en(()=>{const t=Vn(e);if("function"==typeof t)return t})}function Yr(){const e=ce;return null===e&&V("createEventDispatcher"),(t,r,i)=>{const s=e.s.$$events?.[t];if(s){const o=n(s)?s.slice():[s],a=function(e,t,{bubbles:n=!1,cancelable:r=!1}={}){return new CustomEvent(e,{detail:t,bubbles:n,cancelable:r})}(t,r,i);for(const t of o)t.call(e.x,a);return!a.defaultPrevented}return!0}}class Jr{constructor(e,t,n=null){this.node=e,this.getURLCallback=t,this.fetch=null!=n?n:window.fetch.bind(window)}getURL(){return this.getURLCallback(this.node)}getSizeOnPage(){const{width:e,height:t}=this.node.getBoundingClientRect();return{width:Math.round(e),height:Math.round(t)}}async getFileSize(e){const{width:t,height:n}=await this.fetchFileDimensions(e);return{width:t,height:n}}async getWeight(e){return await this.fetchFileWeight(e)}getPotentialSavings(e,t,n){const r=this.getOversizedRatio(e,n);return r<=1?null:Math.round(t.weight-t.weight/r)}getExpectedSize(e){const t=window.devicePixelRatio||1;return{width:Math.round(e.width*t),height:Math.round(e.height*t)}}getOversizedRatio(e,t){if(0===e.width||0===e.height)return 1;const{width:n,height:r}=this.getExpectedSize(t);return 0===n||0===r?1:e.width*e.height/(n*r)}async fetchFileWeight(e){const t=await 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)}async fetchFileDimensions(e){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.")}})}async isImageTiny(){try{const e=65,t=await this.fetchFileDimensions(this.getURL());return t.width<e||t.height<e}catch{return!0}}}const Qr="jetpack-boost-guide",ei={active:"Active",paused:"Paused"};let ti=localStorage.getItem(Qr);ti&&ei[ti]||(localStorage.setItem(Qr,"Active"),ti="active");const{set:ni,update:ri,subscribe:ii}=Oe(ti);ii(e=>{localStorage.setItem(Qr,e)});const si={subscribe:ii,set:ni,update:ri,cycle:()=>{ri(e=>{const t=Object.keys(ei),n=t.indexOf(e);return t[(n+1)%t.length]})}},oi=je(si,e=>ei[e]);class ai{constructor(e){this.loading=Oe(!0),this.weightMap={},this.currentSrc="",this.image=e,this.node=e.node;this.url=Oe(e.getURL()),this.fileSize=Oe({width:0,height:0}),this.fileWeight=Oe({weight:-1},()=>{this.maybeUpdateWeight()}),this.sizeOnPage=Oe({width:0,height:0}),this.potentialSavings=this.derivePotentialSavings(),this.oversizedRatio=this.deriveOversizedRatio(),this.expectedSize=this.deriveExpectedSize()}deriveOversizedRatio(){return je([this.fileSize,this.sizeOnPage],([e,t])=>this.image.getOversizedRatio(e,t))}deriveExpectedSize(){return je(this.sizeOnPage,e=>this.image.getExpectedSize(e))}derivePotentialSavings(){return je([this.fileSize,this.fileWeight,this.sizeOnPage],([e,t,n])=>this.image.getPotentialSavings(e,t,n))}async updateDimensions(){const e=this.image.getSizeOnPage();this.sizeOnPage.set(e),await this.updateFileDimensions()}async updateFileDimensions(){if(this.image.getURL()===this.currentSrc)return;let e;this.currentSrc=this.image.getURL();try{e=await this.image.getFileSize(this.currentSrc)}catch{e={height:-1,width:-1}}this.url.set(this.currentSrc),this.fileSize.set(e)}async maybeUpdateWeight(){const e=this.currentSrc;if(void 0===this.weightMap[e]){this.loading.set(!0);try{const t=await this.image.getWeight(e);this.weightMap[e]=t,this.fileWeight.set({weight:t})}catch{this.fileWeight.set({weight:-1})}this.loading.set(!1)}else this.fileWeight.set({weight:this.weightMap[e]})}}class li{static setTracksCallback(e){li.tracksCallback=e}static async trackImageOutcome(e){return new Promise(t=>{e.loading.subscribe(n=>{if(!n){const n=Ce(e.oversizedRatio),r=function(e){return e>4?"red":e>2.5?"yellow":"green"}(n),i=Ce(e.fileSize),s=Ce(e.sizeOnPage),o=Ce(e.expectedSize),a=Ce(e.potentialSavings),l=Ce(e.url),c={severity:r,oversized_ratio:n,file_width:i.width,file_height:i.height,size_on_page_width:s.width,size_on_page_height:s.height,expected_width:o.width,expected_height:o.height,potential_savings:a,image_url:l};li.tracksCallback("image_guide_image_outcome",{...c,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio}),t(c)}})})}static async trackPage(e){if(!e.length||li.trackingComplete)return;li.trackingComplete=!0;const t=e.map(li.trackImageOutcome),n=await Promise.all(t),r=n.reduce((e,t)=>e+(t.potential_savings||0),0);li.tracksCallback("image_guide_page_outcome",{total_potential_savings:r,red_severity_count:n.filter(e=>"red"===e.severity).length,yellow_severity_count:n.filter(e=>"yellow"===e.severity).length,green_severity_count:n.filter(e=>"green"===e.severity).length,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio})}static trackInitialState(){li.tracksCallback("image_guide_initial_ui_state",{image_guide_state:Ce(si)})}static trackUIStateChange(){li.tracksCallback("image_guide_ui_state_change",{image_guide_state:Ce(si)})}}function ci(e){return e.filter(e=>{if(e instanceof HTMLImageElement){if(!e.src.trim())return!1;try{if(t=e.src,new URL(t).pathname.toLowerCase().endsWith(".svg"))return!1}catch{return!1}return!0}var t;if(e instanceof HTMLElement){return"none"!==getComputedStyle(e).backgroundImage}return!1})}function fi(e){return hi(e.currentSrc)?e.currentSrc:hi(e.src)?e.src:null}function ui(e){const t=getComputedStyle(e).backgroundImage.match(/url\(\s*(['"])(.*?)\1\s*\)/i),n=window.location.href.split("#")[0];return t&&t[2]&&t[2]!==n&&hi(t[2])?t[2]:null}async function di(e,t=null){return ci(e).map(e=>e instanceof HTMLImageElement?new Jr(e,fi,t):e instanceof HTMLElement&&ui(e)?new Jr(e,ui):null).filter(e=>null!==e)}function hi(e){if(e.startsWith("/")){return!e.split("?")[0].endsWith(".svg")}try{const t=new URL(e);return"http:"===t.protocol||"https:"===t.protocol}catch{return!1}}li.trackingComplete=!1;function vi(e){const t=1.70158;return--e*e*((t+1)*e+t)+1}"undefined"!=typeof window&&((window.__svelte??={}).v??=new Set).add("5"),ie=!0;const pi=e=>e;function gi(e){const t=e-1;return t*t*t+1}function _i(e){const t="string"==typeof e&&e.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);return t?[parseFloat(t[1]),t[2]||"px"]:[e,"px"]}function mi(e,{delay:t=0,duration:n=400,easing:r=pi}={}){const i=+getComputedStyle(e).opacity;return{delay:t,duration:n,easing:r,css:e=>"opacity: "+e*i}}function wi(e,{delay:t=0,duration:n=400,easing:r=gi,x:i=0,y:s=0,opacity:o=0}={}){const a=getComputedStyle(e),l=+a.opacity,c="none"===a.transform?"":a.transform,f=l*(1-o),[u,d]=_i(i),[h,v]=_i(s);return{delay:t,duration:n,easing:r,css:(e,t)=>`\n\t\t\ttransform: ${c} translate(${(1-e)*u}${d}, ${(1-e)*h}${v});\n\t\t\topacity: ${l-f*t}`}}var yi=or('<div class="svelte-1yjr9q3"><svg viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg"><path 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"></path><path d="M58 46.6V97.4L84.2 46.6H58Z" fill="white"></path><path d="M52.7 64.1V13.4L26.6 64.1H52.7Z" fill="white"></path></svg></div>');function bi(e,t){let n=Gr(t,"size",8,16),r=Gr(t,"bg",8,"#069E08");var i=yi(),s=Vt(i),o=Vt(s);an(()=>{Dr(i,`width: ${n()??""}px; height: ${n()??""}px;`),Ur(o,"fill",r())}),fr(e,i)}var ki=or('<div class="spinner svelte-q7ue1b"><!></div>');var xi=ar('<svg class="w-6 h-6 svelte-qy5udj" fill="none" stroke="white" width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>');var Si=or('<span style="font-size: 0.75em;">&lt;</span> 1x',1),$i=or('<div class="bubble-inner svelte-1vido64"><div class="label"><!></div></div>'),Ei=or('<div class="bubble-inner svelte-1vido64"><!></div>'),zi=or('<div><div class="bubble svelte-1vido64"><!></div></div>');function Mi(e,t){pe(t,!1);const n=()=>Re(l,"$oversizedRatio",r),[r,i]=We();let s=Gr(t,"index",8),o=Gr(t,"store",8),a=zt();const l=o().oversizedRatio,c=o().loading,f={delay:150+50*s(),duration:250,y:2,easing:vi};let u=zt();const d=Yr();rn(()=>n(),()=>{Mt(a,n()>4?"high":n()>2.5?"medium":"normal")}),sn(),Vr();var h=zi(),v=Vt(h),p=Vt(v),g=e=>{var t=$i(),r=Vt(t),i=Vt(r),s=e=>{var t=lr();an(e=>dr(t,`${e??""}x`),[()=>(n(),Vn(()=>Math.floor(n())))]),fr(e,t)},o=e=>{var t=cr(),r=Kt(t),i=e=>{!function(e){fr(e,xi())}(e)},s=e=>{var t=lr();an(e=>dr(t,`${e??""}x`),[()=>(n(),Vn(()=>n().toFixed(1)))]),fr(e,t)};_r(r,e=>{"normal"===Hn(a)?e(i):e(s,-1)}),fr(e,t)},l=e=>{fr(e,Si())};_r(i,e=>{n()>9?e(s):n()>.99?e(o,1):e(l,-1)}),jr(1,r,()=>mi,()=>({delay:200,duration:300})),fr(e,t)},_=e=>{var t=Ei();!function(e){var t=ki();bi(Vt(t),{size:12,bg:"transparent"}),jr(2,t,()=>mi,()=>({duration:300})),fr(e,t)}(Vt(t)),fr(e,t)};_r(p,e=>{!1===Re(c,"$isLoading",r)?e(g):e(_,-1)}),Br(h,e=>Mt(u,e),()=>Hn(u)),an(()=>Ir(h,1,`interaction-area ${Hn(a)??""}`,"svelte-1vido64")),er("mouseenter",h,function(){const e=Hn(u).getBoundingClientRect();d("hover",{index:s(),position:{top:e.top+e.height+10,left:e.left}})}),jr(3,h,()=>wi,()=>f),fr(e,h),ge(),i()}var Ti=ar('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svelte-1b220d7"><path 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"></path></svg>');var Li=or('<div class="explanation svelte-1okxgd8">The image loaded is <strong> </strong> larger than it appears in the browser. <!></div>'),Oi=or('<div class="explanation svelte-1okxgd8">The image is exactly the correct size for this screen.</div>'),ji=or("Because there are various screen sizes, it's okay for the image to be <strong> </strong> than it appears on the page.",1),Ci=or('<div class="explanation svelte-1okxgd8">The image size is very close to the size it appears in the browser. <!></div>'),Pi=or('<div class="explanation svelte-1okxgd8"> </div>'),Ai=or('<img class="svelte-1okxgd8"/>'),Ri=or('<div class="value"> </div>'),Ii=or("<em>Unknown</em>"),Wi=or('<div class="value"><!></div>'),Di=or("<em>Unknown</em>"),Fi=or("<strong> </strong>"),qi=or("<em>N/A</em>"),Ui=or('<div class="jetpack-boost-guide-popup keep-guide-open svelte-1okxgd8"><div class="logo svelte-1okxgd8"><!></div> <div class="preview svelte-1okxgd8"><div class="description svelte-1okxgd8"><div class="title svelte-1okxgd8"><a target="_blank noreferrer" class="svelte-1okxgd8"> </a></div> <!></div> <!></div> <div class="meta"><div class="row svelte-1okxgd8"><div class="label">Image File Dimensions</div> <!></div> <div class="row svelte-1okxgd8"><div class="label">Expected Dimensions</div> <div class="value"> </div></div> <div class="row svelte-1okxgd8"><div class="label">Size on screen</div> <div class="value"> </div></div> <div class="row svelte-1okxgd8"><div class="label">Image Size</div> <div class="value"><!></div></div> <div class="row svelte-1okxgd8"><div class="label">Potential savings</div> <div class="value"><!></div></div> <div class="info svelte-1okxgd8"><a class="documentation svelte-1okxgd8" target="_blank noreferrer">Learn how to improve site speed by optimizing images <!></a></div></div></div>');function Hi(e,t){pe(t,!1);const n=()=>Re(Hn(w),"$imageURL",f),r=()=>Re(Hn(v),"$fileSize",f),i=()=>Re(Hn(h),"$oversizedRatio",f),s=()=>Re(Hn(d),"$isLoading",f),o=()=>Re(Hn(m),"$expectedSize",f),a=()=>Re(Hn(g),"$sizeOnPage",f),l=()=>Re(Hn(p),"$fileWeight",f),c=()=>Re(Hn(_),"$potentialSavings",f),[f,u]=We(),d=zt(),h=zt(),v=zt(),p=zt(),g=zt(),_=zt(),m=zt(),w=zt(),y=zt(),b=zt(),k=zt(),x=zt();let S=Gr(t,"store",8),$=Gr(t,"size",8),E=Gr(t,"position",8);function z(e){return e%1==0?e:parseFloat(e.toFixed(2))}let M=zt(0),T=0,L=0,O=zt(E().top);Xr(()=>{T=Hn(M),L=E().top,Mt(O,E().top)});rn(()=>Kn(S()),()=>{Ie(Mt(d,S().loading),"$isLoading",f)}),rn(()=>Kn(S()),()=>{Ie(Mt(h,S().oversizedRatio),"$oversizedRatio",f)}),rn(()=>Kn(S()),()=>{Ie(Mt(v,S().fileSize),"$fileSize",f)}),rn(()=>Kn(S()),()=>{Ie(Mt(p,S().fileWeight),"$fileWeight",f)}),rn(()=>Kn(S()),()=>{Ie(Mt(g,S().sizeOnPage),"$sizeOnPage",f)}),rn(()=>Kn(S()),()=>{Ie(Mt(_,S().potentialSavings),"$potentialSavings",f)}),rn(()=>Kn(S()),()=>{Ie(Mt(m,S().expectedSize),"$expectedSize",f)}),rn(()=>Kn(S()),()=>{Ie(Mt(w,S().url),"$imageURL",f)}),rn(()=>n(),()=>{Mt(y,n().split("/").pop())}),rn(()=>Kn($()),()=>{Mt(b,"normal"===$()?100:50)}),rn(()=>(Hn(b),r()),()=>{Mt(k,Math.floor(Hn(b)/(r().width/r().height)))}),rn(()=>i(),()=>{Mt(x,z(i()))}),rn(()=>Hn(M),()=>{var e;0!==(e=Hn(M))&&T!==e&&Mt(O,L+(T-e))}),sn(),Vr();var j=Ui();let C;var P=Vt(j);bi(Vt(P),{size:250});var A=Zt(P,2),R=Vt(A),I=Vt(R),W=Vt(I),D=Vt(W),F=Zt(I,2),q=e=>{var t=Li(),n=Zt(Vt(t)),i=Vt(n),s=Zt(n,2),o=e=>{fr(e,lr("Try using a smaller image or reduce the file size by compressing it."))};_r(s,e=>{r(),Vn(()=>r().weight>450)&&e(o)}),an(()=>dr(i,`${Hn(x)??""}x`)),fr(e,t)},U=e=>{fr(e,Oi())},H=e=>{var t=Ci(),n=Zt(Vt(t)),r=e=>{var t=ji(),n=Vt(Zt(Kt(t)));an(()=>dr(n,`${Hn(x)??""}x`)),fr(e,t)};_r(n,e=>{Hn(x)>1&&e(r)}),fr(e,t)},N=e=>{const t=pt(()=>(i(),Vn(()=>z(1/i()))));var n=Pi(),r=Vt(n);an(()=>dr(r,`The image file is ${Hn(t)??""}x smaller than expected on this screen. This might be fine,\n\t\t\t\t\tbut you may want to check if the image appears blurry.`)),fr(e,n)};_r(F,e=>{Hn(x)>=1.3?e(q):1===Hn(x)?e(U,1):Hn(x)>=.99&&Hn(x)<1.3?e(H,2):e(N,-1)});var B=Zt(R,2),V=e=>{var t=Ai();an(()=>{Ur(t,"src",n()),Ur(t,"alt",Hn(y)),Dr(t,`width: ${Hn(b)??""}px; height: ${Hn(k)??""}px;`),Ur(t,"width",Hn(b)),Ur(t,"height",Hn(k))}),fr(e,t)};_r(B,e=>{n()&&e(V)});var K=Vt(Zt(A,2)),Z=Zt(Vt(K),2),G=e=>{var t=Ri(),n=Vt(t);an(()=>dr(n,`${r(),Vn(()=>r().width)??""} x ${r(),Vn(()=>r().height)??""}`)),fr(e,t)},X=e=>{var t=Wi(),n=Vt(t),r=e=>{fr(e,lr("Loading..."))},i=e=>{fr(e,Ii())};_r(n,e=>{s()?e(r):e(i,-1)}),fr(e,t)};_r(Z,e=>{r(),Vn(()=>r().width>0&&r().height>0)?e(G):e(X,-1)});var Y=Zt(K,2),J=Zt(Vt(Y),2),Q=Vt(J),ee=Zt(Y,2),te=Zt(Vt(ee),2),ne=Vt(te),re=Zt(ee,2),ie=Zt(Vt(re),2),se=Vt(ie),oe=e=>{var t=lr();an(e=>dr(t,`${e??""} KB`),[()=>(l(),Vn(()=>Math.round(l().weight)))]),fr(e,t)},ae=e=>{fr(e,lr("Loading..."))},le=e=>{fr(e,Di())};_r(se,e=>{l(),Vn(()=>l().weight>0)?e(oe):s()?e(ae,1):e(le,-1)});var ce=Zt(re,2),fe=Zt(Vt(ce),2),ue=Vt(fe),de=e=>{var t=Fi(),n=Vt(t);an(()=>dr(n,`${c()??""} KB`)),fr(e,t)},he=e=>{fr(e,lr("Loading..."))},ve=e=>{fr(e,qi())};_r(ue,e=>{c()>0?e(de):s()?e(he,1):e(ve,-1)});var _e=Vt(Zt(ce,2));Ur(_e,"href","https://jetpack.com/support/jetpack-boost/image-performance-guide/"),function(e){fr(e,Ti())}(Zt(Vt(_e))),an(()=>{C=Dr(j,"",C,{top:`${Hn(O)??""}px`,left:`${Kn(E()),Vn(()=>E().left)??""}px`}),Ur(W,"href",n()),dr(D,Hn(y)),dr(Q,`${o(),Vn(()=>o().width)??""} x ${o(),Vn(()=>o().height)??""}`),dr(ne,`${a(),Vn(()=>a().width)??""} x ${a(),Vn(()=>a().height)??""}`)}),function(e,t,n=t){var r="x"===e,i=()=>Gt(()=>{o=!0,clearTimeout(s),s=setTimeout(a,100),n(window[r?"scrollX":"scrollY"])});addEventListener("scroll",i,{passive:!0});var s,o=!1,a=()=>{o=!1},l=!0;on(()=>{var e=t();l?l=!1:o||null==e||(o=!0,clearTimeout(s),r?scrollTo(e,window.scrollY):scrollTo(window.scrollX,e),s=setTimeout(a,100))}),nn(i),Qt(()=>{removeEventListener("scroll",i)})}("y",()=>Hn(M),e=>Mt(M,e)),jr(1,j,()=>wi,()=>({duration:150,y:4,easing:vi})),er("mouseleave",j,function(e){Zr.call(this,t,e)}),fr(e,j),ge(),u()}var Ni=or('<div><div class="previews svelte-6tsow1"></div> <!></div>');function Bi(e,t){pe(t,!1);const n=()=>Re(c,"$sizeOnPage",r),[r,i]=We(),s=zt();let o=Gr(t,"stores",8),a=zt(!1);function l(e){e.relatedTarget&&e.relatedTarget.classList.contains("keep-guide-open")||Mt(a,!1)}Xr(()=>{o().forEach(e=>e.updateDimensions())});const c=o()[0].sizeOnPage;let f=zt({top:0,left:0});function u(e){const t=e.detail,n=t.index;Mt(f,t.position),Mt(a,n)}const d=je(o().map(e=>e.fileSize),e=>e.some(e=>-1!==e.width&&-1!==e.height));rn(()=>n(),()=>{Mt(s,function(e=-1,t=-1){return e<200||t<200?"micro":e<400||t<400?"small":"normal"}(n().width,n().height))}),rn(()=>Hn(a),()=>{!function(e=!1){e?o().forEach(e=>e.node.classList.add("jetpack-boost-guide__backdrop")):o().forEach(e=>e.node.classList.remove("jetpack-boost-guide__backdrop"))}(!1!==Hn(a))}),sn(),Vr();var h=cr(),v=Kt(h),p=e=>{var t=Ni();let n;var r=Vt(t);br(r,5,o,mr,(e,t,n)=>{Mi(e,{index:n,get store(){return Hn(t)},$$events:{hover:u}})});var i=Zt(r,2),c=e=>{Hi(e,{get store(){return Kn(o()),Hn(a),Vn(()=>o()[Hn(a)])},get size(){return Hn(s)},get position(){return Hn(f)},$$events:{mouseleave:l}})};_r(i,e=>{!1!==Hn(a)&&e(c)}),an(()=>n=Ir(t,1,`guide ${Hn(s)??""}`,"svelte-6tsow1",n,{show:!1!==Hn(a),"keep-guide-open":!1!==Hn(a)})),er("mouseleave",t,l),fr(e,t)};_r(v,e=>{"active"===Re(si,"$guideState",r)&&Re(d,"$hasItemsWithFileSize",r)&&e(p)}),fr(e,h),ge(),i()}const Vi=[];let Ki;function Zi(e){window.frameElement||(Ki=e,window.addEventListener("load",Gi))}function Gi(){window.addEventListener("resize",function(){let e;return()=>{e&&clearTimeout(e),e=setTimeout(()=>{Vi.forEach(e=>{e.updateDimensions()})},500)}}()),li.trackInitialState(),si.subscribe(async e=>{if("paused"===e)return;const t=await di(Array.from(document.querySelectorAll("body *:not(.jetpack-boost-guide > *):not(.jetpack-boost-guide):not(#wpadminbar *)")),Ki),n=await Promise.all(t.map(e=>e.isImageTiny()));Vi.push(...function(e){const t=e.reduce((e,t)=>{var n;if(!t.node.parentNode)return console.error("Image has no parent",t.node),e;const r=function(e){const t=e.node;if(!(e.node instanceof HTMLImageElement)&&["static","relative"].includes(getComputedStyle(t).position))return t.classList.contains("jetpack-boost-guide")||(t.classList.add("jetpack-boost-guide","relative"),t.dataset.jetpackBoostGuideId=(++Xi).toString()),t;if(!t.parentNode||!t.parentElement)return;const n=function(e){let t,n=e.parentElement;for(;n&&n instanceof HTMLElement&&n!==document.body;){const e=getComputedStyle(n),r="inline"!==e.display,i="static"===e.position,s="relative"===e.position,o="auto"!==e.zIndex;r&&(!t&&(i||s)||s&&o)&&(t=n),n=n.parentElement}return t}(t);if(null==n?void 0:n.classList.contains("jetpack-boost-guide"))return n;if(n){const t=getComputedStyle(n);if("relative"===t.position){const e=Array.from(n.children).find(e=>e.classList.contains("jetpack-boost-guide"));if(e&&e instanceof HTMLElement)return e}const r=document.createElement("div");return r.classList.add("jetpack-boost-guide"),r.dataset.jetpackBoostGuideId=(++Xi).toString(),"static"===t.position&&(n.style.position="relative"),e.node instanceof HTMLImageElement&&(r.style.top=`${e.node.offsetTop}px`),n.prepend(r),r}return t.parentElement}(t);if(!r)return console.error("Could not find a parent for image",t),e;const i=parseInt(r.dataset.jetpackBoostGuideId||""),s=(null===(n=e[i])||void 0===n?void 0:n.props.stores)||[],o=new ai(t);return s.push(o),1===s.length&&(e[i]={target:r,intro:!0,props:{stores:s}}),e},{});return Object.values(t).map(e=>(hr(Bi,e),e.props.stores)).flat()}(t.filter((e,t)=>!n[t]))),li.trackPage(Vi)})}let Xi=0;var Yi=or('<a id="jetpack-boost-guide-bar"><!> <span> </span></a>');function Ji(e,t){pe(t,!1);const[n,r]=We();let i=Gr(t,"href",8),s=Gr(t,"tracksCallback",8);rn(()=>Kn(s()),()=>{li.setTracksCallback(s())}),sn(),Vr();var o=Yi(),a=Vt(o);bi(a,{});var l,c=Vt(Zt(a,2));an(()=>{Ur(o,"href",i()),Ir(o,1,`ab-item ${Re(si,"$guideState",n)??""}`,"svelte-1km5e3e"),dr(c,`Image Guide: ${Re(oi,"$guideLabel",n)??""}`)}),er("click",o,(l=function(){si.cycle(),li.trackUIStateChange()},function(...e){return e[0].preventDefault(),l?.apply(this,e)})),fr(e,o),ge(),r()}function Qi(e,{href:t,tracksCallback:n,fetchFunction:r}){return Zi(r),hr(Ji,{target:e,props:{href:t,tracksCallback:n}})}export{Jr as MeasurableImage,di as getMeasurableImages,Qi as setupImageGuideUI};
+import{createElement as e,useCallback as t,useEffect as i,useLayoutEffect as n,useRef as a,useState as s,useSyncExternalStore as r}from"react";import{createRoot as o}from"react-dom/client";import{createReduxStore as c,createSelector as l,dispatch as d,register as g,select as h,subscribe as u}from"@wordpress/data";import{Fragment as m,jsx as p,jsxs as f}from"react/jsx-runtime";class w{node;getURLCallback;fetch;constructor(e,t,i=null){this.node=e,this.getURLCallback=t,this.fetch=i??window.fetch.bind(window)}getURL(){return this.getURLCallback(this.node)}getSizeOnPage(){const{width:e,height:t}=this.node.getBoundingClientRect();return{width:Math.round(e),height:Math.round(t)}}async getFileSize(e){const{width:t,height:i}=await this.fetchFileDimensions(e);return{width:t,height:i}}async getWeight(e){return await this.fetchFileWeight(e)}getPotentialSavings(e,t,i){const n=this.getOversizedRatio(e,i);return n<=1?null:Math.round(t.weight-t.weight/n)}getExpectedSize(e){const t=window.devicePixelRatio||1;return{width:Math.round(e.width*t),height:Math.round(e.height*t)}}getOversizedRatio(e,t){if(0===e.width||0===e.height)return 1;const{width:i,height:n}=this.getExpectedSize(t);return 0===i||0===n?1:e.width*e.height/(i*n)}async fetchFileWeight(e){const t=await 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)}async fetchFileDimensions(e){const t=new Image;return t.src=e,new Promise((e,i)=>{t.onload=()=>{e({width:Math.round(t.width),height:Math.round(t.height)})},t.onerror=()=>{i("Unable to load image.")}})}async isImageTiny(){try{const e=65,t=await this.fetchFileDimensions(this.getURL());return t.width<e||t.height<e}catch{return!0}}}const v="jetpack-boost-guide",b={active:"Active",paused:"Paused"},S=localStorage.getItem(v),y={guideState:S&&b[S]?S:"active",images:{},imageChange:{revision:0}},k=c("jetpack/image-guide",{reducer(e=y,t){switch(t.type){case"SET_GUIDE_STATE":return{...e,guideState:t.value};case"CYCLE_GUIDE_STATE":return{...e,guideState:"active"===e.guideState?"paused":"active"};case"SET_IMAGE":return{...e,images:{...e.images,[t.id]:t.facts},imageChange:{id:t.id,revision:e.imageChange.revision+1}};case"UPDATE_IMAGE":return{...e,imageChange:{id:t.id,revision:e.imageChange.revision+1},images:{...e.images,[t.id]:{...e.images[t.id],...t.facts}}};default:return e}},actions:{setGuideState:e=>({type:"SET_GUIDE_STATE",value:e}),cycleGuideState:()=>({type:"CYCLE_GUIDE_STATE"}),setImage:(e,t)=>({type:"SET_IMAGE",id:e,facts:t}),updateImage:(e,t)=>({type:"UPDATE_IMAGE",id:e,facts:t})},selectors:{getGuideState:e=>e.guideState,getGuideLabel:e=>b[e.guideState],getImageFacts:(e,t)=>e.images[t],getImageChange:e=>e.imageChange,getExpectedSize:l((e,t)=>w.prototype.getExpectedSize(e.images[t].sizeOnPage),(e,t)=>[e.images[t].sizeOnPage,window.devicePixelRatio]),getOversizedRatio:l((e,t)=>{const{fileSize:i,sizeOnPage:n}=e.images[t];return w.prototype.getOversizedRatio(i,n)},(e,t)=>[e.images[t].fileSize,e.images[t].sizeOnPage,window.devicePixelRatio]),getPotentialSavings:l((e,t)=>{const{fileSize:i,fileWeight:n,sizeOnPage:a}=e.images[t];return w.prototype.getPotentialSavings(i,n,a)},(e,t)=>[e.images[t].fileSize,e.images[t].fileWeight,e.images[t].sizeOnPage,window.devicePixelRatio])}});g(k);const E=h(k),_=d(k),z=new Set,I=new Map;function j(e,t){if(void 0===t)return z.add(e),()=>z.delete(e);let i=I.get(t);i||(i={facts:E.getImageFacts(t),listeners:new Set},I.set(t,i)),i.listeners.add(e);let n=!0;return()=>{n&&(n=!1,i.listeners.delete(e),i.listeners.size||I.delete(t))}}function x(e){const t=I.get(e),i=E.getImageFacts(e);t&&i!==t.facts&&(t.facts=i,t.listeners.forEach(e=>e()))}let L=E.getImageChange(),C=E.getGuideState();localStorage.setItem(v,C),u(()=>{const e=E.getGuideState();e!==C&&(C=e,localStorage.setItem(v,e),z.forEach(e=>e()));const t=E.getImageChange();if(t!==L){const e=t.revision!==L.revision+1;L=t,e?I.forEach((e,t)=>x(t)):void 0!==t.id&&x(t.id)}},k);class N{static trackingComplete=!1;static tracksCallback;static setTracksCallback(e){N.tracksCallback=e}static async trackImageOutcome(e){return new Promise(t=>{let i=()=>{},n=!1;const a=()=>{if(!E.getImageFacts(e.id).loading&&!n){n=!0;const{oversizedRatio:a,fileSize:s,sizeOnPage:r,expectedSize:o,potentialSavings:c,url:l}=e.getSnapshot(),d=function(e){return e>4?"red":e>2.5?"yellow":"green"}(a),g={severity:d,oversized_ratio:a,file_width:s.width,file_height:s.height,size_on_page_width:r.width,size_on_page_height:r.height,expected_width:o.width,expected_height:o.height,potential_savings:c,image_url:l};N.tracksCallback("image_guide_image_outcome",{...g,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio}),t(g),i()}};i=j(a,e.id),a()})}static async trackPage(e){if(!e.length||N.trackingComplete)return;N.trackingComplete=!0;const t=e.map(N.trackImageOutcome),i=await Promise.all(t),n=i.reduce((e,t)=>e+(t.potential_savings||0),0);N.tracksCallback("image_guide_page_outcome",{total_potential_savings:n,red_severity_count:i.filter(e=>"red"===e.severity).length,yellow_severity_count:i.filter(e=>"yellow"===e.severity).length,green_severity_count:i.filter(e=>"green"===e.severity).length,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio})}static trackInitialState(){N.tracksCallback("image_guide_initial_ui_state",{image_guide_state:E.getGuideState()})}static trackUIStateChange(){N.tracksCallback("image_guide_ui_state_change",{image_guide_state:E.getGuideState()})}}function T(e){return e.filter(e=>{if(e instanceof HTMLImageElement){if(!e.src.trim())return!1;try{if(t=e.src,new URL(t).pathname.toLowerCase().endsWith(".svg"))return!1}catch{return!1}return!0}var t;if(e instanceof HTMLElement){return"none"!==getComputedStyle(e).backgroundImage}return!1})}function M(e){return G(e.currentSrc)?e.currentSrc:G(e.src)?e.src:null}function P(e){const t=getComputedStyle(e).backgroundImage.match(/url\(\s*(['"])(.*?)\1\s*\)/i),i=window.location.href.split("#")[0];return t&&t[2]&&t[2]!==i&&G(t[2])?t[2]:null}async function R(e,t=null){return T(e).map(e=>e instanceof HTMLImageElement?new w(e,M,t):e instanceof HTMLElement&&P(e)?new w(e,P):null).filter(e=>null!==e)}function G(e){if(e.startsWith("/")){return!e.split("?")[0].endsWith(".svg")}try{const t=new URL(e);return"http:"===t.protocol||"https:"===t.protocol}catch{return!1}}class F{id;static nextId=0;image;node;weightMap={};currentSrc="";consumers=0;constructor(e){this.image=e,this.node=e.node,this.id=String(F.nextId++),_.setImage(this.id,{fileSize:{width:0,height:0},sizeOnPage:{width:0,height:0},fileWeight:{weight:-1},url:e.getURL(),loading:!0})}getSnapshot(){return{...E.getImageFacts(this.id),expectedSize:E.getExpectedSize(this.id),oversizedRatio:E.getOversizedRatio(this.id),potentialSavings:E.getPotentialSavings(this.id)}}acquire(){0===this.consumers++&&this.maybeUpdateWeight();let e=!0;return()=>{e&&(e=!1,this.consumers--)}}async updateDimensions(){const e=this.image.getSizeOnPage();_.updateImage(this.id,{sizeOnPage:e}),await this.updateFileDimensions()}async updateFileDimensions(){if(this.image.getURL()===this.currentSrc)return;let e;this.currentSrc=this.image.getURL();try{e=await this.image.getFileSize(this.currentSrc)}catch{e={height:-1,width:-1}}_.updateImage(this.id,{url:this.currentSrc,fileSize:e})}async maybeUpdateWeight(){const e=this.currentSrc;if(void 0===this.weightMap[e]){_.updateImage(this.id,{loading:!0});try{const t=await this.image.getWeight(e);this.weightMap[e]=t,_.updateImage(this.id,{fileWeight:{weight:t},loading:!1})}catch{_.updateImage(this.id,{fileWeight:{weight:-1},loading:!1})}}else _.updateImage(this.id,{fileWeight:{weight:this.weightMap[e]}})}}function U(){return r(j,E.getGuideState)}function O(e){const i=t(t=>j(t,e.id),[e]),n=t(()=>E.getImageFacts(e.id),[e]);return r(i,n),e.getSnapshot()}function W({size:e=16,bg:t="#069E08"}){return p("div",{style:{width:e,height:e},className:"jb-ig-logo",children:f("svg",{viewBox:"0 0 110 110",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[p("path",{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",fill:t}),p("path",{d:"M58 46.6V97.4L84.2 46.6H58Z",fill:"white"}),p("path",{d:"M52.7 64.1V13.4L26.6 64.1H52.7Z",fill:"white"})]})})}function D(){return p("svg",{className:"jb-ig-checkmark w-6 h-6",fill:"none",stroke:"white",width:"18",height:"18",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:p("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M5 13l4 4L19 7"})})}function $(){return p("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",className:"jb-ig-external",children:p("path",{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"})})}function A({href:e}){const i=U(),n=t(e=>{e.preventDefault(),_.cycleGuideState(),N.trackUIStateChange()},[]);return f("a",{id:"jetpack-boost-guide-bar",href:e,className:`jb-ig-toggle ab-item ${i}`,onClick:n,children:[p(W,{}),p("span",{children:`Image Guide: ${E.getGuideLabel()}`})]})}function H({index:e,store:r,onHover:o,intro:c=!0}){const{oversizedRatio:l,loading:d}=O(r),[g,h]=s(c),u=a(null),w=a(null),v=a(d),[b,S]=s(!1);n(()=>{S(v.current&&!d),v.current=d},[d]);const y=function(e,t){const[n,a]=s(e);return i(()=>{if(e)return void a(!0);const i=setTimeout(()=>a(!1),t);return()=>clearTimeout(i)},[e,t]),e||n}(d,300),k=t(e=>{e.target===e.currentTarget&&"jb-ig-bubble-fly-in"===e.animationName&&h(!1)},[]),E=t(e=>{"jb-ig-fade-in"===e.animationName&&S(!1)},[]);n(()=>{const e=u.current,t=w.current;return e?.addEventListener("animationcancel",k),t?.addEventListener("animationcancel",E),()=>{e?.removeEventListener("animationcancel",k),t?.removeEventListener("animationcancel",E)}},[d,k,E]);const _=l>4?"high":l>2.5?"medium":"normal",z=t(t=>{const i=t.currentTarget.getBoundingClientRect();o(e,{top:i.top+i.height+10,left:i.left})},[e,o]);return p("div",{className:`jb-ig-bubble interaction-area ${_}${g?" jb-ig-bubble-fly":""}`,style:g?{animationDelay:150+50*e+"ms"}:void 0,ref:u,onAnimationEnd:k,onMouseEnter:z,children:f("div",{className:"jb-ig-bubble bubble",children:[!d&&p("div",{className:"jb-ig-bubble bubble-inner",children:p("div",{className:"label"+(b?" jb-ig-label-fade":""),ref:w,onAnimationEnd:E,children:l>9?`${Math.floor(l)}x`:l>.99?"normal"===_?p(D,{}):`${l.toFixed(1)}x`:f(m,{children:[p("span",{style:{fontSize:"0.75em"},children:"<"})," 1x"]})})}),y&&p("div",{className:"jb-ig-bubble bubble-inner"+(d?"":" jb-ig-spinner-fade"),children:p("div",{className:"jb-ig-spinner spinner",children:p(W,{size:12,bg:"transparent"})})})]})})}function B(e){return e%1==0?e:parseFloat(e.toFixed(2))}function Y({store:e,size:t,position:n,onMouseLeave:r}){const{loading:o,oversizedRatio:c,fileSize:l,fileWeight:d,sizeOnPage:g,potentialSavings:h,expectedSize:u,url:w}=O(e);i(()=>e.acquire(),[e]);const v=a({scrollY:window.scrollY,top:n.top}),[b,S]=s(n.top);i(()=>{const e=()=>{0!==window.scrollY&&v.current.scrollY!==window.scrollY&&S(v.current.top+v.current.scrollY-window.scrollY)};return window.addEventListener("scroll",e),()=>window.removeEventListener("scroll",e)},[]);const y=w.split("/").pop(),k="normal"===t?100:50,E=Math.floor(k/(l.width/l.height)),_=B(c),z=o?"Loading...":p("em",{children:"Unknown"});return f("div",{className:"jb-ig-popup jetpack-boost-guide-popup keep-guide-open jb-ig-fly",style:{top:b,left:n.left},onMouseLeave:r,children:[p("div",{className:"jb-ig-popup logo",children:p(W,{size:250})}),f("div",{className:"jb-ig-popup preview",children:[f("div",{className:"jb-ig-popup description",children:[p("div",{className:"jb-ig-popup title",children:p("a",{href:w,target:"_blank",rel:"noopener noreferrer",className:"jb-ig-popup",children:y})}),p("div",{className:"jb-ig-popup explanation",children:_>=1.3?f(m,{children:["The image loaded is ",f("strong",{children:[_,"x"]})," larger than it appears in the browser."]}):1===_?"The image is exactly the correct size for this screen.":f(m,_>=.99&&_<1.3?{children:["The image size is very close to the size it appears in the browser.",_>1&&f(m,{children:[" ","Because there are various screen sizes, it's okay for the image to be"," ",f("strong",{children:[_,"x"]})," than it appears on the page."]})]}:{children:["The image file is ",B(1/c),"x smaller than expected on this screen. This might be fine, but you may want to check if the image appears blurry."]})})]}),w&&p("img",{src:w,alt:y,style:{width:k,height:`${E}px`},width:k,height:String(E),className:"jb-ig-popup"})]}),f("div",{className:"meta",children:[f("div",{className:"jb-ig-popup row",children:[p("div",{className:"label",children:"Image File Dimensions"}),p("div",{className:"value",children:l.width>0&&l.height>0?`${l.width} x ${l.height}`:z})]}),f("div",{className:"jb-ig-popup row",children:[p("div",{className:"label",children:"Expected Dimensions"}),p("div",{className:"value",children:`${u.width} x ${u.height}`})]}),f("div",{className:"jb-ig-popup row",children:[p("div",{className:"label",children:"Size on screen"}),p("div",{className:"value",children:`${g.width} x ${g.height}`})]}),f("div",{className:"jb-ig-popup row",children:[p("div",{className:"label",children:"Image Size"}),p("div",{className:"value",children:d.weight>0?`${Math.round(d.weight)} KB`:z})]}),f("div",{className:"jb-ig-popup row",children:[p("div",{className:"label",children:"Potential savings"}),p("div",{className:"value",children:h>0?f("strong",{children:[h," KB"]}):o?"Loading...":p("em",{children:"N/A"})})]}),p("div",{className:"jb-ig-popup info",children:f("a",{className:"jb-ig-popup documentation",href:"https://jetpack.com/support/jetpack-boost/image-performance-guide/",target:"_blank",rel:"noopener noreferrer",children:["Learn how to improve site speed by optimizing images ",p($,{})]})})]})]})}function V({stores:e}){const r=U(),o=O(e[0]),[c,l]=s(!1),[d,g]=s({top:0,left:0}),h=t(()=>e.some(e=>{const{fileSize:t}=E.getImageFacts(e.id);return-1!==t.width&&-1!==t.height}),[e]),[u,m]=s(h),w=a(!1);i(()=>{"active"===r&&u&&(w.current=!0)},[r,u]),n(()=>{const t=e.map(e=>j(()=>m(h()),e.id));return e.forEach(e=>e.updateDimensions()),()=>t.forEach(e=>e())},[e,h]),n(()=>(e.forEach(e=>e.node.classList.toggle("jetpack-boost-guide__backdrop",!1!==c)),()=>e.forEach(e=>e.node.classList.remove("jetpack-boost-guide__backdrop"))),[e,c]);const{width:v,height:b}=o.sizeOnPage,S=v<200||b<200?"micro":v<400||b<400?"small":"normal",y=t(e=>{e.relatedTarget instanceof Element&&e.relatedTarget.classList.contains("keep-guide-open")||l(!1)},[]),k=t((e,t)=>{g(t),l(e)},[]);return"active"===r&&u?f("div",{className:`jb-ig-main guide ${S}${!1!==c?" show keep-guide-open":""}`,onMouseLeave:y,children:[p("div",{className:"jb-ig-main previews",children:e.map((e,t)=>p(H,{index:t,store:e,onHover:k,intro:!w.current},e.id))}),!1!==c&&p(Y,{store:e[c],size:S,position:d,onMouseLeave:y})]}):null}const q=[];let Z;const K=new WeakSet,J=new Map;function Q(e){window.frameElement||(Z=e,window.addEventListener("load",X))}function X(){window.addEventListener("resize",function(){let e;return()=>{e&&clearTimeout(e),e=setTimeout(()=>{q.forEach(e=>{e.updateDimensions()})},500)}}()),N.trackInitialState();const t=async()=>{if("paused"===E.getGuideState())return;q.forEach(e=>e.updateDimensions());const t=await R(Array.from(document.querySelectorAll("body *:not(.jetpack-boost-guide > *):not(.jetpack-boost-guide):not(#wpadminbar *)")),Z),i=await Promise.all(t.map(e=>e.isImageTiny()));q.push(...function(t){const i=[],n=new Set;for(const e of t){if(K.has(e.node)||!e.node.parentNode)continue;const t=te(e);if(!t)continue;let a=J.get(t);if(!a){const e=document.createElement("div");e.style.display="contents",t.append(e),a={root:o(e),stores:[]},J.set(t,a)}const s=new F(e);a.stores=[...a.stores,s],i.push(s),K.add(e.node),n.add(t)}for(const t of n){const{root:i,stores:n}=J.get(t);i.render(e(V,{stores:n}))}return i}(t.filter((e,t)=>!i[t]))),N.trackPage(q)};j(t),t()}let ee=0;function te(e){const t=e.node;if(!(e.node instanceof HTMLImageElement)&&["static","relative"].includes(getComputedStyle(t).position))return t.classList.contains("jetpack-boost-guide")||(t.classList.add("jetpack-boost-guide","relative"),t.dataset.jetpackBoostGuideId=(++ee).toString()),t;if(!t.parentNode||!t.parentElement)return;const i=function(e){let t,i=e.parentElement;for(;i&&i instanceof HTMLElement&&i!==document.body;){const e=getComputedStyle(i),n="inline"!==e.display,a="static"===e.position,s="relative"===e.position,r="auto"!==e.zIndex;n&&(!t&&(a||s)||s&&r)&&(t=i),i=i.parentElement}return t}(t);if(i?.classList.contains("jetpack-boost-guide"))return i;if(i){const t=getComputedStyle(i);if("relative"===t.position){const e=Array.from(i.children).find(e=>e.classList.contains("jetpack-boost-guide"));if(e&&e instanceof HTMLElement)return e}const n=document.createElement("div");return n.classList.add("jetpack-boost-guide"),n.dataset.jetpackBoostGuideId=(++ee).toString(),"static"===t.position&&(i.style.position="relative"),e.node instanceof HTMLImageElement&&(n.style.top=`${e.node.offsetTop}px`),i.prepend(n),n}return t.parentElement}function ie(t,{href:i,tracksCallback:n,fetchFunction:a}){N.setTracksCallback(n),Q(a);const s=document.createElement("div");s.style.display="contents",t.append(s);const r=o(s);r.render(e(A,{href:i}));let c=!0;return{unmount(){c&&(c=!1,r.unmount(),s.remove())}}}export{w as MeasurableImage,R as getMeasurableImages,ie as setupImageGuideUI};

package/build/initialize.d.ts

@@ -7,16 +7,9 @@ import type { FetchFn, MeasurableImage } from './MeasurableImage.ts';
  */
 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.
+ * Attach guides once per image without replacing page content.
  *
  * @param {MeasurableImage[]} measuredImages - The images to attach the guides to.
- * @return {MeasurableImageStore[]} The stores for the attached images.
+ * @return {MeasurableImageStore[]} The stores for newly attached images.
  */
 export declare function attachGuides(measuredImages: MeasurableImage[]): MeasurableImageStore[];

package/build/stores/MeasurableImageStore.d.ts

@@ -1,31 +1,27 @@
-import { type Writable, type Readable } from 'svelte/store';
 import { MeasurableImage } from '../MeasurableImage.ts';
-import type { Dimensions, Weight } from '../MeasurableImage.ts';
-/**
- * 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.
- */
+/** Keep image nodes, source tracking and the weight cache outside reducer state. */
 export declare class MeasurableImageStore {
-    readonly fileSize: Writable<Dimensions>;
-    readonly fileWeight: Writable<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 id: string;
+    private static nextId;
     readonly image: MeasurableImage;
     readonly node: MeasurableImage['node'];
     private weightMap;
     private currentSrc;
+    private consumers;
     constructor(measurableImage: MeasurableImage);
-    private deriveOversizedRatio;
-    private deriveExpectedSize;
-    private derivePotentialSavings;
+    /** Read current image facts and derived measurements without activating fetching. */
+    getSnapshot(): {
+        fileSize: import("../MeasurableImage.ts").Dimensions;
+        fileWeight: import("../MeasurableImage.ts").Weight;
+        sizeOnPage: import("../MeasurableImage.ts").Dimensions;
+        url: string;
+        loading: boolean;
+        expectedSize: import("../MeasurableImage.ts").Dimensions;
+        oversizedRatio: number;
+        potentialSavings: number;
+    };
+    /** Acquire weight measurements until the returned idempotent release is called. */
+    acquire(): () => void;
     updateDimensions(): Promise<void>;
     private updateFileDimensions;
     private maybeUpdateWeight;

package/build/stores/store.d.ts

@@ -0,0 +1,87 @@
+import { type Dimensions, type Weight } from '../MeasurableImage.ts';
+declare const labels: {
+    readonly active: 'Active';
+    readonly paused: 'Paused';
+};
+export type GuideState = keyof typeof labels;
+export type ImageFacts = {
+    fileSize: Dimensions;
+    fileWeight: Weight;
+    sizeOnPage: Dimensions;
+    url: string;
+    loading: boolean;
+};
+type State = {
+    guideState: GuideState;
+    images: Record<string, ImageFacts>;
+    imageChange: {
+        id?: string;
+        revision: number;
+    };
+};
+declare const actions: {
+    setGuideState: (value: GuideState) => {
+        type: 'SET_GUIDE_STATE';
+        value: "active" | "paused";
+    };
+    cycleGuideState: () => {
+        type: 'CYCLE_GUIDE_STATE';
+    };
+    setImage: (id: string, facts: ImageFacts) => {
+        type: 'SET_IMAGE';
+        id: string;
+        facts: ImageFacts;
+    };
+    updateImage: (id: string, facts: Partial<ImageFacts>) => {
+        type: 'UPDATE_IMAGE';
+        id: string;
+        facts: Partial<ImageFacts>;
+    };
+};
+export declare const store: import("@wordpress/data").StoreDescriptor<import("@wordpress/data").ReduxStoreConfig<unknown, {
+    setGuideState: (value: GuideState) => {
+        type: 'SET_GUIDE_STATE';
+        value: "active" | "paused";
+    };
+    cycleGuideState: () => {
+        type: 'CYCLE_GUIDE_STATE';
+    };
+    setImage: (id: string, facts: ImageFacts) => {
+        type: 'SET_IMAGE';
+        id: string;
+        facts: ImageFacts;
+    };
+    updateImage: (id: string, facts: Partial<ImageFacts>) => {
+        type: 'UPDATE_IMAGE';
+        id: string;
+        facts: Partial<ImageFacts>;
+    };
+}, {
+    getGuideState: (state: State) => "active" | "paused";
+    getGuideLabel: (state: State) => "Active" | "Paused";
+    getImageFacts: (state: State, id: string) => ImageFacts;
+    getImageChange: (state: State) => {
+        id?: string;
+        revision: number;
+    };
+    getExpectedSize: ((state: State, id: string) => {
+        width: number;
+        height: number;
+    }) & import("@wordpress/data").EnhancedSelector;
+    getOversizedRatio: ((state: State, id: string) => number) & import("@wordpress/data").EnhancedSelector;
+    getPotentialSavings: ((state: State, id: string) => number) & import("@wordpress/data").EnhancedSelector;
+}>>;
+export declare const selectors: {
+    getGuideState: () => GuideState;
+    getGuideLabel: () => string;
+    getImageFacts: (id: string) => ImageFacts;
+    getImageChange: () => State['imageChange'];
+    getExpectedSize: (id: string) => Dimensions;
+    getOversizedRatio: (id: string) => number;
+    getPotentialSavings: (id: string) => number | null;
+};
+export declare const commands: {
+    [K in keyof typeof actions]: (...args: Parameters<(typeof actions)[K]>) => unknown;
+};
+export declare function subscribeToFacts(listener: () => void, id?: string): () => void;
+export {};

package/build/types.d.ts

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

package/build/ui/React.d.ts

@@ -0,0 +1,32 @@
+import { MeasurableImageStore } from '../stores/MeasurableImageStore.ts';
+import type { GuideSize } from '../types.ts';
+import './style.scss';
+import './react-transitions.scss';
+type Position = {
+    top: number;
+    left: number;
+};
+type MouseLeave = React.MouseEventHandler<HTMLDivElement>;
+export declare function JetpackLogo({ size, bg }: {
+    bg?: string;
+    size?: number;
+}): import("react").JSX.Element;
+export declare function AdminBarToggle({ href }: {
+    href: string;
+}): import("react").JSX.Element;
+export declare function Bubble({ index, store, onHover, intro, }: {
+    index: number;
+    store: MeasurableImageStore;
+    onHover: (index: number, position: Position) => void;
+    intro?: boolean;
+}): import("react").JSX.Element;
+export declare function Popup({ store, size, position, onMouseLeave, }: {
+    store: MeasurableImageStore;
+    size: GuideSize;
+    position: Position;
+    onMouseLeave: MouseLeave;
+}): import("react").JSX.Element;
+export declare function Main({ stores }: {
+    stores: MeasurableImageStore[];
+}): import("react").JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-image-guide",
-	"version": "1.0.21",
+	"version": "2.0.0",
 	"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",
 	"bugs": {
@@ -21,13 +21,12 @@
 	},
 	"main": "./src/index.ts",
 	"scripts": {
-		"build": "rollup -c && tsgo --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",
-		"clear-dist": "rm -rf app/assets/dist/*",
-		"dev": "concurrently 'pnpm:dev-validate-ts' 'pnpm:dev-compile'",
-		"dev-compile": "pnpm run clear-dist && rollup -c -w",
+		"build": "pnpm run clear-dist && webpack && tsgo --emitDeclarationOnly",
+		"build-development": "pnpm run build",
+		"build-production": "NODE_ENV=production BABEL_ENV=production pnpm run build",
+		"clear-dist": "rm -rf build/",
+		"dev": "pnpm run clear-dist && concurrently 'pnpm:dev-validate-ts' 'pnpm:dev-compile'",
+		"dev-compile": "webpack --watch",
 		"dev-validate-ts": "tsgo --watch --pretty --strict false # Note: Disable Strict mode to avoid noisy development, while keeping strict errors visible in IDEs.",
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest --config=tests/jest.config.cjs",
 		"test-coverage": "pnpm run test --coverage",
@@ -35,31 +34,28 @@
 		"validate-ts": "tsgo --pretty --strict false",
 		"watch": "pnpm run dev"
 	},
+	"dependencies": {
+		"@wordpress/data": "11.1.0"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
+	},
 	"devDependencies": {
+		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@babel/core": "^7.0.0",
 		"@babel/preset-env": "7.29.7",
-		"@babel/preset-react": "7.29.7",
 		"@babel/preset-typescript": "7.29.7",
-		"@rollup/plugin-babel": "6.0.4",
-		"@rollup/plugin-commonjs": "26.0.1",
-		"@rollup/plugin-json": "6.1.0",
-		"@rollup/plugin-node-resolve": "15.3.0",
-		"@rollup/plugin-replace": "5.0.2",
-		"@rollup/plugin-terser": "1.0.0",
-		"@rollup/plugin-typescript": "12.1.0",
+		"@types/react": "19.3.0",
+		"@types/react-dom": "19.3.0",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"concurrently": "10.0.5",
-		"jest": "30.5.1",
-		"postcss": "8.5.23",
-		"rollup": "3.30.0",
-		"rollup-plugin-postcss": "4.0.2",
-		"rollup-plugin-svelte": "7.2.2",
-		"sass": "npm:sass-embedded@^1.97.2",
-		"svelte": "5.55.7",
-		"svelte-preprocess": "6.0.5",
-		"tslib": "2.8.1",
-		"typescript": "6.0.3",
-		"webpack": "5.107.2",
+		"jest": "30.5.2",
+		"react": "19.3.0",
+		"react-dom": "19.3.0",
+		"sass-embedded": "1.97.3",
+		"sass-loader": "16.0.5",
+		"webpack": "5.112.2",
 		"webpack-cli": "7.2.1"
 	}
 }

package/build/src/MeasurableImage.d.ts

@@ -1,73 +0,0 @@
-export type SourceCallbackFn = (node: HTMLElement) => string | null;
-export type Dimensions = {
-    width: number;
-    height: number;
-};
-export type Weight = {
-    weight: number;
-};
-export type FetchFn = (url: string) => Promise<Response>;
-/**
- * A class that represents a DOM Element that
- * has an image that should be measured and
- * provides measurement utilities.
- */
-export declare class MeasurableImage {
-    readonly node: HTMLElement | HTMLImageElement;
-    private getURLCallback;
-    fetch: FetchFn;
-    /**
-     * 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.
-     */
-    constructor(node: HTMLElement | HTMLImageElement, getURL: SourceCallbackFn, fetchFn?: FetchFn | null);
-    getURL(): string;
-    getSizeOnPage(): {
-        width: number;
-        height: number;
-    };
-    getFileSize(url: string): Promise<{
-        width: number;
-        height: number;
-    }>;
-    getWeight(url: string): Promise<number>;
-    getPotentialSavings(fileSize: Dimensions, fileWeight: Weight, sizeOnPage: Dimensions): number;
-    /**
-     * To get the expected size of the image,
-     * 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.
-     * @return {object} - The expected size of the image.
-     */
-    getExpectedSize(sizeOnPage: Dimensions): {
-        width: number;
-        height: number;
-    };
-    getOversizedRatio(fileSize: Dimensions, sizeOnPage: Dimensions): number;
-    /**
-     * 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.
-     * @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
-     * @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!
-     *
-     * @return {boolean} - if the image is smaller than 65 pixels width and height return true
-     */
-    isImageTiny(): Promise<boolean>;
-}

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

@@ -1,15 +0,0 @@
-/**
- *
- *
- * ! 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/src/analytics.d.ts

@@ -1,46 +0,0 @@
-import { MeasurableImageStore } from './stores/MeasurableImageStore.ts';
-/**
- * Image properties sent to tracks.
- */
-type ImageProperties = {
-    severity: 'red' | 'yellow' | 'green';
-    oversized_ratio: 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/src/find-image-elements.d.ts

@@ -1,31 +0,0 @@
-import { MeasurableImage, type FetchFn } from './MeasurableImage.ts';
-/**
- * Get elements that either are 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
- * @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
- * @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.
- * @return {MeasurableImage[]} - A list of MeasurableImage objects.
- */
-export declare function getMeasurableImages(domNodes: Element[], fetchFn?: FetchFn | null): Promise<MeasurableImage[]>;

package/build/src/index.d.ts

@@ -1,24 +0,0 @@
-import { MeasurableImage, type Dimensions, type FetchFn, type Weight } from './MeasurableImage.ts';
-import { type TracksCallback } from './analytics.ts';
-import { getMeasurableImages } from './find-image-elements.ts';
-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): {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Record<string, any>>): void;
-} & Record<string, any>;

package/build/src/initialize.d.ts

@@ -1,22 +0,0 @@
-import { MeasurableImageStore } from './stores/MeasurableImageStore.ts';
-import type { FetchFn, MeasurableImage } from './MeasurableImage.ts';
-/**
- * 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/src/stores/GuideState.d.ts

@@ -1,12 +0,0 @@
-import { type 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/src/stores/MeasurableImageStore.d.ts

@@ -1,32 +0,0 @@
-import { type Writable, type Readable } from 'svelte/store';
-import { MeasurableImage } from '../MeasurableImage.ts';
-import type { Dimensions, Weight } from '../MeasurableImage.ts';
-/**
- * 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>;
-    readonly fileWeight: Writable<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 weightMap;
-    private currentSrc;
-    constructor(measurableImage: MeasurableImage);
-    private deriveOversizedRatio;
-    private deriveExpectedSize;
-    private derivePotentialSavings;
-    updateDimensions(): Promise<void>;
-    private updateFileDimensions;
-    private maybeUpdateWeight;
-}

package/build/src/types.d.ts

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

package/build/stores/GuideState.d.ts

@@ -1,12 +0,0 @@
-import { type 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/rollup.config.js

@@ -1,130 +0,0 @@
-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 sveltePreprocess from 'svelte-preprocess';
-
-const production = process.env.NODE_ENV === 'production';
-
-const exportConditions = [ 'jetpack:src' ];
-
-/**
- *
- *
- * 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: {
-				'process.env.NODE_ENV': '"production"',
-			},
-		} ),
-
-		resolve( {
-			browser: true,
-			preferBuiltins: false,
-			dedupe: [ 'svelte' ],
-			exportConditions,
-		} ),
-
-		commonjs(),
-		json(),
-
-		babel( {
-			presets: [ [ '@babel/preset-react', { runtime: 'automatic' } ] ],
-			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,
-		} ),
-
-		svelte( {
-			preprocess: sveltePreprocess( {
-				sourceMap: ! production,
-				typescript: {
-					compilerOptions: {
-						module: 'esnext',
-						moduleResolution: 'bundler',
-					},
-				},
-			} ),
-			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: [ './src/**/*' ],
-			tsconfig: 'tsconfig.rollup.json',
-			declaration: true,
-		} ),
-
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production &&
-			terser( {
-				mangle: {
-					// Preserve WP i18n methods.
-					reserved: [ '__', '_n', '_nx', '_x' ],
-				},
-			} ),
-	],
-
-	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 );
-	},
-};