@marimo-team/frontend 0.19.7-dev31 → 0.19.7-dev33

package/src/core/export/hooks.ts

@@ -64,9 +64,13 @@ export function useAutoExport() {
 
   useInterval(
     async () => {
+      const screenshotFn = () =>
+        takeScreenshots({
+          progress: ProgressState.indeterminate(),
+          snappy: true,
+        });
       await updateCellOutputsWithScreenshots({
-        progress: ProgressState.indeterminate(),
-        takeScreenshots,
+        takeScreenshots: screenshotFn,
         updateCellOutputs,
       });
       await autoExportAsIPYNB({
@@ -107,7 +111,13 @@ export function useEnrichCellOutputs() {
   const [richCellsOutput, setRichCellsOutput] = useAtom(richCellsToOutputAtom);
   const cellRuntimes = useAtomValue(cellsRuntimeAtom);
 
-  return async (progress: ProgressState): Promise<ScreenshotResults> => {
+  return async ({
+    progress,
+    snappy,
+  }: {
+    progress: ProgressState;
+    snappy: boolean;
+  }): Promise<ScreenshotResults> => {
     const trackedCellsOutput: Record<CellId, unknown> = {};
 
     const cellsToCaptureScreenshot: [CellId, unknown][] = [];
@@ -138,7 +148,7 @@ export function useEnrichCellOutputs() {
     const results: ScreenshotResults = {};
     for (const [cellId] of cellsToCaptureScreenshot) {
       try {
-        const dataUrl = await getImageDataUrlForCell(cellId, false);
+        const dataUrl = await getImageDataUrlForCell(cellId, snappy);
         if (!dataUrl) {
           Logger.error(`Failed to capture screenshot for cell ${cellId}`);
           continue;
@@ -159,13 +169,12 @@ export function useEnrichCellOutputs() {
  * Utility function to take screenshots of cells with HTML outputs and update the cell outputs.
  */
 export async function updateCellOutputsWithScreenshots(opts: {
-  progress: ProgressState;
-  takeScreenshots: (progress: ProgressState) => Promise<ScreenshotResults>;
+  takeScreenshots: () => Promise<ScreenshotResults>;
   updateCellOutputs: (request: UpdateCellOutputsRequest) => Promise<null>;
 }) {
-  const { progress, takeScreenshots, updateCellOutputs } = opts;
+  const { takeScreenshots, updateCellOutputs } = opts;
   try {
-    const cellIdsToOutput = await takeScreenshots(progress);
+    const cellIdsToOutput = await takeScreenshots();
     if (Objects.size(cellIdsToOutput) > 0) {
       await updateCellOutputs({ cellIdsToOutput });
     }

package/src/utils/__tests__/download.test.tsx

@@ -166,7 +166,7 @@ describe("getImageDataUrlForCell", () => {
     );
   });
 
-  it("should add printing classes before capture when enablePrintMode is true", async () => {
+  it("should add printing classes before capture when snappy is false", async () => {
     vi.mocked(toPng).mockImplementation(async () => {
       // Check classes are applied during capture
       expect(mockElement.classList.contains("printing-output")).toBe(true);
@@ -175,36 +175,36 @@ describe("getImageDataUrlForCell", () => {
       return mockDataUrl;
     });
 
-    await getImageDataUrlForCell("cell-1" as CellId, true);
+    await getImageDataUrlForCell("cell-1" as CellId, false);
   });
 
-  it("should remove printing classes after capture when enablePrintMode is true", async () => {
+  it("should remove printing classes after capture when snappy is false", async () => {
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
 
-    await getImageDataUrlForCell("cell-1" as CellId, true);
+    await getImageDataUrlForCell("cell-1" as CellId, false);
 
     expect(mockElement.classList.contains("printing-output")).toBe(false);
     expect(document.body.classList.contains("printing")).toBe(false);
   });
 
-  it("should add printing-output but NOT body.printing when enablePrintMode is false", async () => {
+  it("should add printing-output but NOT body.printing when snappy is true", async () => {
     vi.mocked(toPng).mockImplementation(async () => {
       // printing-output should still be added to the element
       expect(mockElement.classList.contains("printing-output")).toBe(true);
-      // but body.printing should NOT be added
+      // but body.printing should NOT be added when snappy mode is on
       expect(document.body.classList.contains("printing")).toBe(false);
       expect(mockElement.style.overflow).toBe("auto");
       return mockDataUrl;
     });
 
-    await getImageDataUrlForCell("cell-1" as CellId, false);
+    await getImageDataUrlForCell("cell-1" as CellId, true);
   });
 
-  it("should cleanup printing-output when enablePrintMode is false", async () => {
+  it("should cleanup printing-output when snappy is true", async () => {
     mockElement.style.overflow = "hidden";
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
 
-    await getImageDataUrlForCell("cell-1" as CellId, false);
+    await getImageDataUrlForCell("cell-1" as CellId, true);
 
     expect(mockElement.classList.contains("printing-output")).toBe(false);
     expect(document.body.classList.contains("printing")).toBe(false);
@@ -239,7 +239,7 @@ describe("getImageDataUrlForCell", () => {
     expect(mockElement.style.overflow).toBe("scroll");
   });
 
-  it("should maintain body.printing during concurrent captures when enablePrintMode is true", async () => {
+  it("should maintain body.printing during concurrent captures when snappy is false", async () => {
     // Create a second element
     const mockElement2 = document.createElement("div");
     mockElement2.id = CellOutputId.create("cell-2" as CellId);
@@ -273,9 +273,9 @@ describe("getImageDataUrlForCell", () => {
       return mockDataUrl;
     });
 
-    // Start both captures concurrently with enablePrintMode = true
-    const capture1 = getImageDataUrlForCell("cell-1" as CellId, true);
-    const capture2 = getImageDataUrlForCell("cell-2" as CellId, true);
+    // Start both captures concurrently with snappy = false (body.printing should be added)
+    const capture1 = getImageDataUrlForCell("cell-1" as CellId, false);
+    const capture2 = getImageDataUrlForCell("cell-2" as CellId, false);
 
     // Let second capture complete first
     resolveSecond!();
@@ -297,21 +297,21 @@ describe("getImageDataUrlForCell", () => {
     mockElement2.remove();
   });
 
-  it("should not interfere with body.printing during concurrent captures when enablePrintMode is false", async () => {
+  it("should not interfere with body.printing during concurrent captures when snappy is true", async () => {
     // Create a second element
     const mockElement2 = document.createElement("div");
     mockElement2.id = CellOutputId.create("cell-2" as CellId);
     document.body.append(mockElement2);
 
     vi.mocked(toPng).mockImplementation(async () => {
-      // body.printing should never be added when enablePrintMode is false
+      // body.printing should never be added when snappy is true
       expect(document.body.classList.contains("printing")).toBe(false);
       return mockDataUrl;
     });
 
-    // Start both captures concurrently with enablePrintMode = false
-    const capture1 = getImageDataUrlForCell("cell-1" as CellId, false);
-    const capture2 = getImageDataUrlForCell("cell-2" as CellId, false);
+    // Start both captures concurrently with snappy = true (body.printing should NOT be added)
+    const capture1 = getImageDataUrlForCell("cell-1" as CellId, true);
+    const capture2 = getImageDataUrlForCell("cell-2" as CellId, true);
 
     await Promise.all([capture1, capture2]);
 

package/src/utils/download.ts

@@ -70,16 +70,15 @@ function releaseBodyPrinting() {
  * Prepare a cell element for screenshot capture.
  *
  * @param element - The cell output element to prepare
- * @param enablePrintMode - When true, adds a 'printing' class to the body.
- *   This can cause layout shifts that cause the page to scroll.
+ * @param snappy - When true, avoids layout shifts and speeds up the capture.
  * @returns A cleanup function to restore the element's original state
  */
 function prepareCellElementForScreenshot(
   element: HTMLElement,
-  enablePrintMode: boolean,
+  snappy: boolean,
 ) {
   element.classList.add("printing-output");
-  if (enablePrintMode) {
+  if (!snappy) {
     acquireBodyPrinting();
   }
   const originalOverflow = element.style.overflow;
@@ -87,7 +86,7 @@ function prepareCellElementForScreenshot(
 
   return () => {
     element.classList.remove("printing-output");
-    if (enablePrintMode) {
+    if (!snappy) {
       releaseBodyPrinting();
     }
     element.style.overflow = originalOverflow;
@@ -100,13 +99,12 @@ const THRESHOLD_TIME_MS = 500;
  * Capture a cell output as a PNG data URL.
  *
  * @param cellId - The ID of the cell to capture
- * @param enablePrintMode - When true, enables print mode which adds a 'printing' class to the body.
- *   This can cause layout shifts that cause the page to scroll.
+ * @param snappy - When true, uses a faster method to capture the image. Avoids layout shifts.
  * @returns The PNG as a data URL, or undefined if the cell element wasn't found
  */
 export async function getImageDataUrlForCell(
   cellId: CellId,
-  enablePrintMode = true,
+  snappy = false,
 ): Promise<string | undefined> {
   const element = findElementForCell(cellId);
   if (!element) {
@@ -118,11 +116,11 @@ export async function getImageDataUrlForCell(
     return iframeDataUrl;
   }
 
-  const cleanup = prepareCellElementForScreenshot(element, enablePrintMode);
+  const cleanup = prepareCellElementForScreenshot(element, snappy);
 
   try {
     const startTime = Date.now();
-    const dataUrl = await toPng(element);
+    const dataUrl = await toPng(element, undefined, snappy);
     const timeTaken = Date.now() - startTime;
     if (timeTaken > THRESHOLD_TIME_MS) {
       Logger.debug(
@@ -159,7 +157,7 @@ export async function downloadCellOutputAsImage(
   await downloadHTMLAsImage({
     element,
     filename,
-    prepare: () => prepareCellElementForScreenshot(element, true),
+    prepare: () => prepareCellElementForScreenshot(element, false),
   });
 }
 

package/src/utils/html-to-image.ts

@@ -4,6 +4,143 @@ import { Logger } from "./Logger";
 
 export type HtmlToImageOptions = Parameters<typeof htmlToImageToPng>[1];
 
+// For improved performance, we include these styles that are likely to be present on the element.
+export const necessaryStyleProperties = [
+  // Sizing
+  "width",
+  "height",
+  "min-width",
+  "min-height",
+  "max-width",
+  "max-height",
+  "box-sizing",
+  "aspect-ratio",
+
+  // Display & Layout
+  "display",
+  "position",
+  "top",
+  "left",
+  "bottom",
+  "right",
+  "z-index",
+  "float",
+  "clear",
+
+  // Flexbox
+  "flex",
+  "flex-direction",
+  "flex-wrap",
+  "flex-grow",
+  "flex-shrink",
+  "flex-basis",
+  "align-items",
+  "align-self",
+  "justify-content",
+  "gap",
+  "order",
+
+  // Grid
+  "grid-template-columns",
+  "grid-template-rows",
+  "grid-column",
+  "grid-row",
+  "row-gap",
+  "column-gap",
+
+  // Spacing
+  "margin",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "padding",
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+
+  // Typography
+  "font",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "font-style",
+  "line-height",
+  "letter-spacing",
+  "word-spacing",
+  "text-align",
+  "text-decoration",
+  "text-transform",
+  "text-indent",
+  "text-shadow",
+  "white-space",
+  "text-wrap",
+  "word-break",
+  "text-overflow",
+  "vertical-align",
+  "color",
+
+  // Background
+  "background",
+  "background-color",
+  "background-image",
+  "background-size",
+  "background-position",
+  "background-repeat",
+  "background-clip",
+
+  // Borders
+  "border",
+  "border-width",
+  "border-style",
+  "border-color",
+  "border-top",
+  "border-right",
+  "border-bottom",
+  "border-left",
+  "border-radius",
+  "outline",
+
+  // Effects
+  "box-shadow",
+  "text-shadow",
+  "opacity",
+  "filter",
+  "backdrop-filter",
+  "mix-blend-mode",
+  "transform",
+  "clip-path",
+
+  // Overflow & Visibility
+  // We don't include overflow properties because they can include scrollbars
+  // "overflow",
+  // "overflow-x",
+  // "overflow-y",
+  "visibility",
+
+  // SVG
+  "fill",
+  "stroke",
+  "stroke-width",
+
+  // Images & Objects
+  "object-fit",
+  "object-position",
+
+  // Lists
+  "list-style",
+  "list-style-type",
+
+  // Tables
+  "border-collapse",
+  "border-spacing",
+
+  // Misc
+  "content",
+  "cursor",
+];
+
 /**
  * Default options for html-to-image conversions.
  * These handle common edge cases like filtering out toolbars and logging errors.
@@ -39,9 +176,11 @@ export const defaultHtmlToImageOptions: HtmlToImageOptions = {
 export async function toPng(
   element: HTMLElement,
   options?: HtmlToImageOptions,
+  snappy?: boolean,
 ): Promise<string> {
   return htmlToImageToPng(element, {
     ...defaultHtmlToImageOptions,
+    includeStyleProperties: snappy ? necessaryStyleProperties : undefined,
     ...options,
   });
 }

package/dist/assets/hooks-COmcm0X5.js

@@ -1 +0,0 @@
-import{l as S,p as j,u as E}from"./useEvent-DO6uJBas.js";import{o as T}from"./cells-Mf-pdsEh.js";import{t as I}from"./compiler-runtime-DeeZ7FnK.js";import{a as A,d as x}from"./hotkeys-BHHWjLlp.js";import{i as N}from"./utils-DXvhzCGS.js";import{A as _,w as F}from"./config-CIrPQIbt.js";import{r as P}from"./requests-BsVD4CdD.js";import{f as V}from"./layout-BJ9AHITN.js";import{l as D,o as $}from"./download-Cphyle83.js";import{t as z}from"./use-toast-rmUWldD_.js";import{t as C}from"./useInterval-Cu9ChZf-.js";var B=I(),k=5e3;function H(){let t=(0,B.c)(14),r=E(N),{state:d}=E(F),n=r.auto_download.includes("markdown"),o=r.auto_download.includes("html"),s=r.auto_download.includes("ipynb"),c=d===_.OPEN,l=!n||!c,p=!o||!c,u=!s||!c,{autoExportAsHTML:a,autoExportAsIPYNB:e,autoExportAsMarkdown:i,updateCellOutputs:m}=P(),b=M(),f;t[0]===i?f=t[1]:(f=async()=>{await i({download:!1})},t[0]=i,t[1]=f);let w;t[2]===l?w=t[3]:(w={delayMs:k,whenVisible:!0,disabled:l},t[2]=l,t[3]=w),C(f,w);let h;t[4]===a?h=t[5]:(h=async()=>{await a({download:!1,includeCode:!0,files:V.INSTANCE.filenames()})},t[4]=a,t[5]=h);let v;t[6]===p?v=t[7]:(v={delayMs:k,whenVisible:!0,disabled:p},t[6]=p,t[7]=v),C(h,v);let y;t[8]!==e||t[9]!==b||t[10]!==m?(y=async()=>{await O({progress:D.indeterminate(),takeScreenshots:b,updateCellOutputs:m}),await e({download:!1})},t[8]=e,t[9]=b,t[10]=m,t[11]=y):y=t[11];let g;t[12]===u?g=t[13]:(g={delayMs:k,whenVisible:!0,disabled:u,skipIfRunning:!0},t[12]=u,t[13]=g),C(y,g)}var L=j({}),R=new Set(["text/html","application/vnd.vegalite.v5+json","application/vnd.vega.v5+json","application/vnd.vegalite.v6+json","application/vnd.vega.v6+json"]);function M(){let[t,r]=S(L),d=E(T);return async n=>{var p,u;let o={},s=[];for(let[a,e]of A.entries(d)){let i=(p=e.output)==null?void 0:p.data,m=t[a]!==i;o[a]=i,(u=e.output)!=null&&u.mimetype&&R.has(e.output.mimetype)&&i&&m&&s.push([a,e])}if(r(o),s.length===0)return{};let c=s.length;n.addTotal(c);let l={};for(let[a]of s)try{let e=await $(a,!1);if(!e){x.error(`Failed to capture screenshot for cell ${a}`);continue}l[a]=["image/png",e]}catch(e){x.error(`Error screenshotting cell ${a}:`,e)}finally{n.increment(1)}return l}}async function O(t){let{progress:r,takeScreenshots:d,updateCellOutputs:n}=t;try{let o=await d(r);A.size(o)>0&&await n({cellIdsToOutput:o})}catch(o){x.error("Error updating cell outputs with screenshots:",o),z({title:"Failed to capture cell outputs",description:"Some outputs may not appear in the PDF. Continuing with export.",variant:"danger"})}}export{H as n,M as r,O as t};

package/dist/assets/html-to-image-DiZMGN_d.js

@@ -1,2 +0,0 @@
-import{i as B}from"./useEvent-DO6uJBas.js";import{bn as G,ri as $,y as Q}from"./cells-Mf-pdsEh.js";import{d as v}from"./hotkeys-BHHWjLlp.js";import{t as R}from"./requests-BsVD4CdD.js";function I({moduleName:e,variableName:t,onAddImport:r,appStore:n=B}){if(t in n.get(G))return!1;let{cellData:i,cellIds:a}=n.get(Q),o=RegExp(`import[ 	]+${e}[ 	]+as[ 	]+${t}`,"g");for(let l of a.inOrderIds)if(o.test(i[l].code))return!1;return r(`import ${e} as ${t}`),!0}function X({autoInstantiate:e,createNewCell:t,fromCellId:r,before:n}){let i=R(),a=null;return I({moduleName:"marimo",variableName:"mo",onAddImport:o=>{a=$.create(),t({cellId:r??"__end__",before:n??!1,code:o,lastCodeRun:e?o:void 0,newCellId:a,skipIfCodeExists:!0,autoFocus:!1}),e&&i.sendRun({cellIds:[a],codes:[o]})}})?a:null}function J({autoInstantiate:e,createNewCell:t,fromCellId:r}){let n=R(),i=null;return I({moduleName:"altair",variableName:"alt",onAddImport:a=>{i=$.create(),t({cellId:r??"__end__",before:!1,code:a,lastCodeRun:e?a:void 0,newCellId:i,skipIfCodeExists:!0,autoFocus:!1}),e&&n.sendRun({cellIds:[i],codes:[a]})}})?i:null}function K(e,t){if(e.match(/^[a-z]+:\/\//i))return e;if(e.match(/^\/\//))return window.location.protocol+e;if(e.match(/^[a-z]+:/i))return e;let r=document.implementation.createHTMLDocument(),n=r.createElement("base"),i=r.createElement("a");return r.head.appendChild(n),r.body.appendChild(i),t&&(n.href=t),i.href=e,i.href}const Y=(()=>{let e=0,t=()=>`0000${(Math.random()*36**4<<0).toString(36)}`.slice(-4);return()=>(e+=1,`u${t()}${e}`)})();function d(e){let t=[];for(let r=0,n=e.length;r<n;r++)t.push(e[r]);return t}var g=null;function P(e={}){return g||(e.includeStyleProperties?(g=e.includeStyleProperties,g):(g=d(window.getComputedStyle(document.documentElement)),g))}function p(e,t){let r=(e.ownerDocument.defaultView||window).getComputedStyle(e).getPropertyValue(t);return r?parseFloat(r.replace("px","")):0}function Z(e){let t=p(e,"border-left-width"),r=p(e,"border-right-width");return e.clientWidth+t+r}function ee(e){let t=p(e,"border-top-width"),r=p(e,"border-bottom-width");return e.clientHeight+t+r}function N(e,t={}){return{width:t.width||Z(e),height:t.height||ee(e)}}function te(){let e,t;try{t=process}catch{}let r=t&&t.env?t.env.devicePixelRatio:null;return r&&(e=parseInt(r,10),Number.isNaN(e)&&(e=1)),e||window.devicePixelRatio||1}var c=16384;function re(e){(e.width>c||e.height>c)&&(e.width>c&&e.height>c?e.width>e.height?(e.height*=c/e.width,e.width=c):(e.width*=c/e.height,e.height=c):e.width>c?(e.height*=c/e.width,e.width=c):(e.width*=c/e.height,e.height=c))}function w(e){return new Promise((t,r)=>{let n=new Image;n.onload=()=>{n.decode().then(()=>{requestAnimationFrame(()=>t(n))})},n.onerror=r,n.crossOrigin="anonymous",n.decoding="async",n.src=e})}async function ne(e){return Promise.resolve().then(()=>new XMLSerializer().serializeToString(e)).then(encodeURIComponent).then(t=>`data:image/svg+xml;charset=utf-8,${t}`)}async function ie(e,t,r){let n="http://www.w3.org/2000/svg",i=document.createElementNS(n,"svg"),a=document.createElementNS(n,"foreignObject");return i.setAttribute("width",`${t}`),i.setAttribute("height",`${r}`),i.setAttribute("viewBox",`0 0 ${t} ${r}`),a.setAttribute("width","100%"),a.setAttribute("height","100%"),a.setAttribute("x","0"),a.setAttribute("y","0"),a.setAttribute("externalResourcesRequired","true"),i.appendChild(a),a.appendChild(e),ne(i)}const u=(e,t)=>{if(e instanceof t)return!0;let r=Object.getPrototypeOf(e);return r===null?!1:r.constructor.name===t.name||u(r,t)};function ae(e){let t=e.getPropertyValue("content");return`${e.cssText} content: '${t.replace(/'|"/g,"")}';`}function oe(e,t){return P(t).map(r=>`${r}: ${e.getPropertyValue(r)}${e.getPropertyPriority(r)?" !important":""};`).join(" ")}function le(e,t,r,n){let i=`.${e}:${t}`,a=r.cssText?ae(r):oe(r,n);return document.createTextNode(`${i}{${a}}`)}function T(e,t,r,n){let i=window.getComputedStyle(e,r),a=i.getPropertyValue("content");if(a===""||a==="none")return;let o=Y();try{t.className=`${t.className} ${o}`}catch{return}let l=document.createElement("style");l.appendChild(le(o,r,i,n)),t.appendChild(l)}function se(e,t,r){T(e,t,":before",r),T(e,t,":after",r)}var A="application/font-woff",L="image/jpeg",ce={woff:A,woff2:A,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:L,jpeg:L,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml",webp:"image/webp"};function ue(e){let t=/\.([^./]*?)$/g.exec(e);return t?t[1]:""}function E(e){return ce[ue(e).toLowerCase()]||""}function de(e){return e.split(/,/)[1]}function S(e){return e.search(/^(data:)/)!==-1}function k(e,t){return`data:${t};base64,${e}`}async function H(e,t,r){let n=await fetch(e,t);if(n.status===404)throw Error(`Resource "${n.url}" not found`);let i=await n.blob();return new Promise((a,o)=>{let l=new FileReader;l.onerror=o,l.onloadend=()=>{try{a(r({res:n,result:l.result}))}catch(s){o(s)}},l.readAsDataURL(i)})}var C={};function he(e,t,r){let n=e.replace(/\?.*/,"");return r&&(n=e),/ttf|otf|eot|woff2?/i.test(n)&&(n=n.replace(/.*\//,"")),t?`[${t}]${n}`:n}async function x(e,t,r){let n=he(e,t,r.includeQueryParams);if(C[n]!=null)return C[n];r.cacheBust&&(e+=(/\?/.test(e)?"&":"?")+new Date().getTime());let i;try{i=k(await H(e,r.fetchRequestInit,({res:a,result:o})=>(t||(t=a.headers.get("Content-Type")||""),de(o))),t)}catch(a){i=r.imagePlaceholder||"";let o=`Failed to fetch resource: ${e}`;a&&(o=typeof a=="string"?a:a.message),o&&console.warn(o)}return C[n]=i,i}async function fe(e){let t=e.toDataURL();return t==="data:,"?e.cloneNode(!1):w(t)}async function me(e,t){if(e.currentSrc){let n=document.createElement("canvas"),i=n.getContext("2d");return n.width=e.clientWidth,n.height=e.clientHeight,i==null||i.drawImage(e,0,0,n.width,n.height),w(n.toDataURL())}let r=e.poster;return w(await x(r,E(r),t))}async function ge(e,t){var r;try{if((r=e==null?void 0:e.contentDocument)!=null&&r.body)return await y(e.contentDocument.body,t,!0)}catch{}return e.cloneNode(!1)}async function pe(e,t){return u(e,HTMLCanvasElement)?fe(e):u(e,HTMLVideoElement)?me(e,t):u(e,HTMLIFrameElement)?ge(e,t):e.cloneNode(F(e))}var we=e=>e.tagName!=null&&e.tagName.toUpperCase()==="SLOT",F=e=>e.tagName!=null&&e.tagName.toUpperCase()==="SVG";async function ye(e,t,r){if(F(t))return t;let n=[];return n=we(e)&&e.assignedNodes?d(e.assignedNodes()):d((e.shadowRoot??e).childNodes),n.length===0||u(e,HTMLVideoElement)||await n.reduce((i,a)=>i.then(()=>y(a,r)).then(o=>{o&&t.appendChild(o)}),Promise.resolve()),t}function be(e,t,r){let n=t.style;if(!n)return;let i=window.getComputedStyle(e);i.cssText?(n.cssText=i.cssText,n.transformOrigin=i.transformOrigin):P(r).forEach(a=>{let o=i.getPropertyValue(a);a==="font-size"&&o.endsWith("px")&&(o=`${Math.floor(parseFloat(o.substring(0,o.length-2)))-.1}px`),u(e,HTMLIFrameElement)&&a==="display"&&o==="inline"&&(o="block"),a==="d"&&t.getAttribute("d")&&(o=`path(${t.getAttribute("d")})`),n.setProperty(a,o,i.getPropertyPriority(a))})}function Ee(e,t){u(e,HTMLTextAreaElement)&&(t.innerHTML=e.value),u(e,HTMLInputElement)&&t.setAttribute("value",e.value)}function Se(e,t){if(u(e,HTMLSelectElement)){let r=t,n=Array.from(r.children).find(i=>e.value===i.getAttribute("value"));n&&n.setAttribute("selected","")}}function Ce(e,t,r){return u(t,Element)&&(be(e,t,r),se(e,t,r),Ee(e,t),Se(e,t)),t}async function xe(e,t){let r=e.querySelectorAll?e.querySelectorAll("use"):[];if(r.length===0)return e;let n={};for(let a=0;a<r.length;a++){let o=r[a].getAttribute("xlink:href");if(o){let l=e.querySelector(o),s=document.querySelector(o);!l&&s&&!n[o]&&(n[o]=await y(s,t,!0))}}let i=Object.values(n);if(i.length){let a="http://www.w3.org/1999/xhtml",o=document.createElementNS(a,"svg");o.setAttribute("xmlns",a),o.style.position="absolute",o.style.width="0",o.style.height="0",o.style.overflow="hidden",o.style.display="none";let l=document.createElementNS(a,"defs");o.appendChild(l);for(let s=0;s<i.length;s++)l.appendChild(i[s]);e.appendChild(o)}return e}async function y(e,t,r){return!r&&t.filter&&!t.filter(e)?null:Promise.resolve(e).then(n=>pe(n,t)).then(n=>ye(e,n,t)).then(n=>Ce(e,n,t)).then(n=>xe(n,t))}var M=/url\((['"]?)([^'"]+?)\1\)/g,$e=/url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g,ve=/src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;function Re(e){let t=e.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1");return RegExp(`(url\\(['"]?)(${t})(['"]?\\))`,"g")}function Ie(e){let t=[];return e.replace(M,(r,n,i)=>(t.push(i),r)),t.filter(r=>!S(r))}async function Pe(e,t,r,n,i){try{let a=r?K(t,r):t,o=E(t),l;return l=i?k(await i(a),o):await x(a,o,n),e.replace(Re(t),`$1${l}$3`)}catch{}return e}function Ne(e,{preferredFontFormat:t}){return t?e.replace(ve,r=>{for(;;){let[n,,i]=$e.exec(r)||[];if(!i)return"";if(i===t)return`src: ${n};`}}):e}function V(e){return e.search(M)!==-1}async function D(e,t,r){if(!V(e))return e;let n=Ne(e,r);return Ie(n).reduce((i,a)=>i.then(o=>Pe(o,a,t,r)),Promise.resolve(n))}async function f(e,t,r){var i;let n=(i=t.style)==null?void 0:i.getPropertyValue(e);if(n){let a=await D(n,null,r);return t.style.setProperty(e,a,t.style.getPropertyPriority(e)),!0}return!1}async function Te(e,t){await f("background",e,t)||await f("background-image",e,t),await f("mask",e,t)||await f("-webkit-mask",e,t)||await f("mask-image",e,t)||await f("-webkit-mask-image",e,t)}async function Ae(e,t){let r=u(e,HTMLImageElement);if(!(r&&!S(e.src))&&!(u(e,SVGImageElement)&&!S(e.href.baseVal)))return;let n=r?e.src:e.href.baseVal,i=await x(n,E(n),t);await new Promise((a,o)=>{e.onload=a,e.onerror=t.onImageErrorHandler?(...s)=>{try{a(t.onImageErrorHandler(...s))}catch(h){o(h)}}:o;let l=e;l.decode&&(l.decode=a),l.loading==="lazy"&&(l.loading="eager"),r?(e.srcset="",e.src=i):e.href.baseVal=i})}async function Le(e,t){let r=d(e.childNodes).map(n=>O(n,t));await Promise.all(r).then(()=>e)}async function O(e,t){u(e,Element)&&(await Te(e,t),await Ae(e,t),await Le(e,t))}function ke(e,t){let{style:r}=e;t.backgroundColor&&(r.backgroundColor=t.backgroundColor),t.width&&(r.width=`${t.width}px`),t.height&&(r.height=`${t.height}px`);let n=t.style;return n!=null&&Object.keys(n).forEach(i=>{r[i]=n[i]}),e}var _={};async function j(e){let t=_[e];return t??(t={url:e,cssText:await(await fetch(e)).text()},_[e]=t,t)}async function U(e,t){let r=e.cssText,n=/url\(["']?([^"')]+)["']?\)/g,i=(r.match(/url\([^)]+\)/g)||[]).map(async a=>{let o=a.replace(n,"$1");return o.startsWith("https://")||(o=new URL(o,e.url).href),H(o,t.fetchRequestInit,({result:l})=>(r=r.replace(a,`url(${l})`),[a,l]))});return Promise.all(i).then(()=>r)}function q(e){if(e==null)return[];let t=[],r=e.replace(/(\/\*[\s\S]*?\*\/)/gi,""),n=RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})","gi");for(;;){let o=n.exec(r);if(o===null)break;t.push(o[0])}r=r.replace(n,"");let i=/@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi,a=RegExp("((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})","gi");for(;;){let o=i.exec(r);if(o===null){if(o=a.exec(r),o===null)break;i.lastIndex=a.lastIndex}else a.lastIndex=i.lastIndex;t.push(o[0])}return t}async function He(e,t){let r=[],n=[];return e.forEach(i=>{if("cssRules"in i)try{d(i.cssRules||[]).forEach((a,o)=>{if(a.type===CSSRule.IMPORT_RULE){let l=o+1,s=a.href,h=j(s).then(m=>U(m,t)).then(m=>q(m).forEach(b=>{try{i.insertRule(b,b.startsWith("@import")?l+=1:i.cssRules.length)}catch(W){console.error("Error inserting rule from remote css",{rule:b,error:W})}})).catch(m=>{console.error("Error loading remote css",m.toString())});n.push(h)}})}catch(a){let o=e.find(l=>l.href==null)||document.styleSheets[0];i.href!=null&&n.push(j(i.href).then(l=>U(l,t)).then(l=>q(l).forEach(s=>{o.insertRule(s,o.cssRules.length)})).catch(l=>{console.error("Error loading remote stylesheet",l)})),console.error("Error inlining remote css file",a)}}),Promise.all(n).then(()=>(e.forEach(i=>{if("cssRules"in i)try{d(i.cssRules||[]).forEach(a=>{r.push(a)})}catch(a){console.error(`Error while reading CSS rules from ${i.href}`,a)}}),r))}function Fe(e){return e.filter(t=>t.type===CSSRule.FONT_FACE_RULE).filter(t=>V(t.style.getPropertyValue("src")))}async function Me(e,t){if(e.ownerDocument==null)throw Error("Provided element is not within a Document");return Fe(await He(d(e.ownerDocument.styleSheets),t))}function z(e){return e.trim().replace(/["']/g,"")}function Ve(e){let t=new Set;function r(n){(n.style.fontFamily||getComputedStyle(n).fontFamily).split(",").forEach(i=>{t.add(z(i))}),Array.from(n.children).forEach(i=>{i instanceof HTMLElement&&r(i)})}return r(e),t}async function De(e,t){let r=await Me(e,t),n=Ve(e);return(await Promise.all(r.filter(i=>n.has(z(i.style.fontFamily))).map(i=>{let a=i.parentStyleSheet?i.parentStyleSheet.href:null;return D(i.cssText,a,t)}))).join(`
-`)}async function Oe(e,t){let r=t.fontEmbedCSS==null?t.skipFonts?null:await De(e,t):t.fontEmbedCSS;if(r){let n=document.createElement("style"),i=document.createTextNode(r);n.appendChild(i),e.firstChild?e.insertBefore(n,e.firstChild):e.appendChild(n)}}async function _e(e,t={}){let{width:r,height:n}=N(e,t),i=await y(e,t,!0);return await Oe(i,t),await O(i,t),ke(i,t),await ie(i,r,n)}async function je(e,t={}){let{width:r,height:n}=N(e,t),i=await w(await _e(e,t)),a=document.createElement("canvas"),o=a.getContext("2d"),l=t.pixelRatio||te(),s=t.canvasWidth||r,h=t.canvasHeight||n;return a.width=s*l,a.height=h*l,t.skipAutoScale||re(a),a.style.width=`${s}`,a.style.height=`${h}`,t.backgroundColor&&(o.fillStyle=t.backgroundColor,o.fillRect(0,0,a.width,a.height)),o.drawImage(i,0,0,a.width,a.height),a}async function Ue(e,t={}){return(await je(e,t)).toDataURL()}const qe={filter:e=>{try{return!("classList"in e&&(e.classList.contains("mpl-toolbar")||e.classList.contains("no-print")))}catch(t){return v.error("Error filtering node:",t),!0}},onImageErrorHandler:e=>{v.error("Error loading image:",e)}};async function ze(e,t){return Ue(e,{...qe,...t})}export{J as n,X as r,ze as t};