@marimo-team/frontend 0.19.7-dev42 → 0.19.7-dev45

package/src/core/codemirror/language/__tests__/utils.test.ts

@@ -31,6 +31,7 @@ function createEditor(doc: string) {
           lspConfig: {},
         }),
         cellConfigExtension({
+          cellId: "cell1" as CellId,
           completionConfig: {
             activate_on_typing: true,
             signature_hint_on_typing: false,

package/src/core/codemirror/language/extension.ts

@@ -15,6 +15,7 @@ import type {
   LSPConfig,
 } from "@/core/config/config-schema";
 import type { HotkeyProvider } from "@/core/hotkeys/hotkeys";
+import { Logger } from "@/utils/Logger";
 import { clamp } from "@/utils/math";
 import {
   cellIdState,
@@ -310,6 +311,17 @@ export function reconfigureLanguageEffect(
   const language = view.state.field(languageAdapterState);
   const placeholderType = view.state.facet(placeholderState);
   const cellId = view.state.facet(cellIdState);
+
+  if (cellId === undefined) {
+    Logger.error("Cell ID is undefined in reconfigureLanguageEffect");
+  }
+  if (placeholderType === undefined) {
+    Logger.error("Placeholder type is undefined in reconfigureLanguageEffect");
+  }
+  if (completionConfig === undefined) {
+    Logger.error("Completion config is undefined in reconfigureLanguageEffect");
+  }
+
   return languageCompartment.reconfigure(
     language.getExtension(
       cellId,

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

@@ -401,13 +401,30 @@ describe("downloadCellOutputAsImage", () => {
     vi.restoreAllMocks();
   });
 
-  it("should return early if element not found", async () => {
+  it("should show error toast if element not found", async () => {
     await downloadCellOutputAsImage("nonexistent" as CellId, "test");
 
     expect(toPng).not.toHaveBeenCalled();
     expect(Logger.error).toHaveBeenCalledWith(
       "Output element not found for cell nonexistent",
     );
+    expect(toast).toHaveBeenCalledWith({
+      title: "Failed to download PNG",
+      description: expect.any(String),
+      variant: "danger",
+    });
+  });
+
+  it("should show error toast if toPng fails", async () => {
+    vi.mocked(toPng).mockRejectedValue(new Error("Screenshot failed"));
+
+    await downloadCellOutputAsImage("cell-1" as CellId, "result");
+
+    expect(toast).toHaveBeenCalledWith({
+      title: "Failed to download PNG",
+      description: expect.stringContaining("Screenshot failed"),
+      variant: "danger",
+    });
   });
 
   it("should download cell output as image", async () => {

package/src/utils/__tests__/iframe.test.ts

@@ -1,13 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { captureIframeAsImage } from "../iframe";
+import { captureExternalIframes } from "../iframe";
 
-// Mock html-to-image
-vi.mock("html-to-image", () => ({
-  toPng: vi.fn().mockResolvedValue("data:image/png;base64,mock"),
-}));
-
-describe("captureIframeAsImage", () => {
+describe("captureExternalIframes", () => {
   const originalCreateElement = document.createElement.bind(document);
 
   beforeEach(() => {
@@ -53,7 +48,7 @@ describe("captureIframeAsImage", () => {
     const element = document.createElement("div");
     element.innerHTML = "<p>No iframe here</p>";
 
-    const result = await captureIframeAsImage(element);
+    const result = await captureExternalIframes(element);
     expect(result).toBeNull();
   });
 
@@ -61,7 +56,7 @@ describe("captureIframeAsImage", () => {
     const element = document.createElement("div");
     element.innerHTML = '<iframe src="https://external.com/page"></iframe>';
 
-    const result = await captureIframeAsImage(element);
+    const result = await captureExternalIframes(element);
 
     expect(result).not.toBeNull();
     expect(result).toMatch(/^data:image\/png;base64,/);
@@ -72,7 +67,7 @@ describe("captureIframeAsImage", () => {
     element.innerHTML =
       '<iframe src="https://www.openstreetmap.org/export/embed.html"></iframe>';
 
-    const result = await captureIframeAsImage(element);
+    const result = await captureExternalIframes(element);
 
     expect(result).not.toBeNull();
     expect(result).toMatch(/^data:image\/png;base64,/);
@@ -85,7 +80,7 @@ describe("captureIframeAsImage", () => {
     element.append(iframe);
 
     // The iframe has no body accessible in jsdom
-    const result = await captureIframeAsImage(element);
+    const result = await captureExternalIframes(element);
 
     // In jsdom, contentDocument may not be accessible
     expect(result).toBeNull();
@@ -96,7 +91,7 @@ describe("captureIframeAsImage", () => {
     element.innerHTML = '<iframe src="./@file/123.html"></iframe>';
 
     // Same-origin relative URL, but contentDocument not accessible in jsdom
-    const result = await captureIframeAsImage(element);
+    const result = await captureExternalIframes(element);
 
     // Returns null because jsdom can't access contentDocument for file URLs
     expect(result).toBeNull();
@@ -113,7 +108,7 @@ describe("captureIframeAsImage", () => {
       const element = document.createElement("div");
       element.innerHTML = `<iframe src="${url}"></iframe>`;
 
-      const result = await captureIframeAsImage(element);
+      const result = await captureExternalIframes(element);
 
       expect(result).not.toBeNull();
       expect(result).toMatch(/^data:image\/png;base64,/);
@@ -128,7 +123,7 @@ describe("captureIframeAsImage", () => {
       const element = document.createElement("div");
       element.innerHTML = `<iframe src="${url}"></iframe>`;
 
-      const result = await captureIframeAsImage(element);
+      const result = await captureExternalIframes(element);
 
       // In jsdom, these return null because contentDocument isn't accessible
       // but they should NOT return a placeholder (which would indicate external detection)

package/src/utils/download.ts

@@ -8,7 +8,7 @@ import { Filenames } from "@/utils/filenames";
 import { Paths } from "@/utils/paths";
 import { prettyError } from "./errors";
 import { toPng } from "./html-to-image";
-import { captureIframeAsImage } from "./iframe";
+import { captureExternalIframes } from "./iframe";
 import { Logger } from "./Logger";
 import { ProgressState } from "./progress";
 import { ToastProgress } from "./toast-progress";
@@ -66,9 +66,11 @@ export async function getImageDataUrlForCell(
     return;
   }
 
-  const iframeDataUrl = await captureIframeAsImage(element);
-  if (iframeDataUrl) {
-    return iframeDataUrl;
+  // TODO: This doesn't handle external iframes + normal elements together (eg. in vstack).
+  // It will return the iframe only
+  const externalIframeDataUrl = await captureExternalIframes(element);
+  if (externalIframeDataUrl) {
+    return externalIframeDataUrl;
   }
 
   const startTime = Date.now();
@@ -100,11 +102,19 @@ export async function downloadCellOutputAsImage(
   cellId: CellId,
   filename: string,
 ) {
-  const dataUrl = await getImageDataUrlForCell(cellId);
-  if (!dataUrl) {
-    return;
+  try {
+    const dataUrl = await getImageDataUrlForCell(cellId);
+    if (!dataUrl) {
+      throw new Error("Failed to get image data URL");
+    }
+    downloadByURL(dataUrl, Filenames.toPNG(filename));
+  } catch (error) {
+    toast({
+      title: "Failed to download PNG",
+      description: prettyError(error),
+      variant: "danger",
+    });
   }
-  downloadByURL(dataUrl, Filenames.toPNG(filename));
 }
 
 export const ADD_PRINTING_CLASS = (): (() => void) => {

package/src/utils/iframe.ts

@@ -1,7 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { toPng } from "./html-to-image";
-
 const PLACEHOLDER_WIDTH = 320;
 const PLACEHOLDER_HEIGHT = 180;
 
@@ -95,11 +93,11 @@ function createPlaceholderImage(url: string | null): string {
 }
 
 /**
- * Capture an iframe as a PNG image. We need to do this because external iframes are not supported by html-to-image.
+ * Capture external iframes as a PNG image. External iframes are not supported by html-to-image.
  * @param element - The element to capture the iframe from
  * @returns The image data URL of the iframe, or a placeholder image if the iframe is external
  */
-export async function captureIframeAsImage(
+export async function captureExternalIframes(
   element: HTMLElement,
 ): Promise<string | null> {
   const iframe = element.querySelector("iframe");
@@ -133,10 +131,5 @@ export async function captureIframeAsImage(
     }
   }
 
-  // Capture the iframe content
-  try {
-    return await toPng(doc.body);
-  } catch {
-    return createPlaceholderImage(null);
-  }
+  return null;
 }

package/dist/assets/download-jMLcAPOc.js

@@ -1,9 +0,0 @@
-var ie=Object.defineProperty;var le=(r,e,t)=>e in r?ie(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var D=(r,e,t)=>le(r,typeof e!="symbol"?e+"":e,t);import{s as I,t as V}from"./chunk-LvLJmgfZ.js";import{t as G}from"./react-BGmjiNul.js";import{ii as se,zt as ue}from"./cells-BW_4R0Qw.js";import{t as q}from"./compiler-runtime-DeeZ7FnK.js";import{d as B}from"./hotkeys-BHHWjLlp.js";import{t as ce}from"./jsx-runtime-ZmTK25f3.js";import{t as H}from"./cn-BKtXLv3a.js";import{t as de}from"./requests-BsVD4CdD.js";import{t as fe}from"./createLucideIcon-CnW3RofX.js";import{t as k}from"./use-toast-rmUWldD_.js";import{d as me}from"./popover-Gz-GJzym.js";import{r as pe}from"./errors-2SszdW9t.js";import{t as W}from"./dist-CdxIjAOP.js";import{t as O}from"./html-to-image-BVbOFO17.js";var ve=fe("chevron-left",[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]]),z=r=>{let e,t=new Set,a=(l,s)=>{let c=typeof l=="function"?l(e):l;if(!Object.is(c,e)){let d=e;e=s??(typeof c!="object"||!c)?c:Object.assign({},e,c),t.forEach(u=>u(e,d))}},n=()=>e,i={setState:a,getState:n,getInitialState:()=>o,subscribe:l=>(t.add(l),()=>t.delete(l)),destroy:()=>{t.clear()}},o=e=r(a,n,i);return i},he=r=>r?z(r):z,ge=V((r=>{var e=G(),t=me();function a(d,u){return d===u&&(d!==0||1/d==1/u)||d!==d&&u!==u}var n=typeof Object.is=="function"?Object.is:a,i=t.useSyncExternalStore,o=e.useRef,l=e.useEffect,s=e.useMemo,c=e.useDebugValue;r.useSyncExternalStoreWithSelector=function(d,u,f,g,m){var p=o(null);if(p.current===null){var w={hasValue:!1,value:null};p.current=w}else w=p.current;p=s(function(){function A(y){if(!U){if(U=!0,S=y,y=g(y),m!==void 0&&w.hasValue){var N=w.value;if(m(N,y))return $=N}return $=y}if(N=$,n(S,y))return N;var F=g(y);return m!==void 0&&m(N,F)?(S=y,N):(S=y,$=F)}var U=!1,S,$,C=f===void 0?null:f;return[function(){return A(u())},C===null?void 0:function(){return A(C())}]},[u,f,g,m]);var b=i(d,p[0],p[1]);return l(function(){w.hasValue=!0,w.value=b},[b]),c(b),b}})),ye=V(((r,e)=>{e.exports=ge()}));const h={toMarkdown:r=>h.replace(r,"md"),toHTML:r=>h.replace(r,"html"),toPNG:r=>h.replace(r,"png"),toPDF:r=>h.replace(r,"pdf"),toPY:r=>h.replace(r,"py"),withoutExtension:r=>{let e=r.split(".");return e.length===1?r:e.slice(0,-1).join(".")},replace:(r,e)=>r.endsWith(`.${e}`)?r:`${h.withoutExtension(r)}.${e}`};var P=320,j=180;function X(r){if(!r||r==="about:blank")return null;try{let e=new URL(r,window.location.href);return e.origin===window.location.origin?null:e.href}catch{return r}}function xe(r,e,t){let a=[],n="";for(let i of e){let o=n+i;r.measureText(o).width<=t?n=o:(n&&a.push(n),n=i)}return n&&a.push(n),a}function L(r){let e=window.devicePixelRatio||1,t=document.createElement("canvas");t.width=P*e,t.height=j*e;let a=t.getContext("2d");if(!a)return t.toDataURL("image/png");a.scale(e,e),a.fillStyle="#f3f4f6",a.fillRect(0,0,P,j),a.strokeStyle="#d1d5db",a.strokeRect(.5,.5,P-1,j-1),a.fillStyle="#6b7280",a.font="8px sans-serif",a.textAlign="center",a.textBaseline="middle";let n=P-32,i=r?xe(a,r,n):[],o=(j-(1+i.length)*14)/2+14/2;a.fillText("External iframe",P/2,o),o+=14;for(let l of i)a.fillText(l,P/2,o),o+=14;return t.toDataURL("image/png")}async function we(r){var n;let e=r.querySelector("iframe");if(!e)return null;let t=X(e.getAttribute("src"));if(t)return L(t);let a;try{let i=e.contentDocument||((n=e.contentWindow)==null?void 0:n.document);if(!(i!=null&&i.body))return null;a=i}catch{return L(null)}for(let i of a.querySelectorAll("iframe")){let o=X(i.getAttribute("src"));if(o)return L(o)}try{return await O(a.body)}catch{return L(null)}}var Y=class oe{constructor(e){D(this,"progress",0);D(this,"listeners",new Set);this.total=e}static indeterminate(){return new oe("indeterminate")}addTotal(e){this.total==="indeterminate"?this.total=e:this.total+=e,this.notifyListeners()}increment(e){this.progress+=e,this.notifyListeners()}getProgress(){return this.total==="indeterminate"?"indeterminate":this.progress/this.total*100}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}notifyListeners(){let e=this.getProgress();for(let t of this.listeners)t(e)}},v=I(G(),1),x=I(ce(),1);function be(r,e=[]){let t=[];function a(i,o){let l=v.createContext(o);l.displayName=i+"Context";let s=t.length;t=[...t,o];let c=u=>{var b;let{scope:f,children:g,...m}=u,p=((b=f==null?void 0:f[r])==null?void 0:b[s])||l,w=v.useMemo(()=>m,Object.values(m));return(0,x.jsx)(p.Provider,{value:w,children:g})};c.displayName=i+"Provider";function d(u,f){var p;let g=((p=f==null?void 0:f[r])==null?void 0:p[s])||l,m=v.useContext(g);if(m)return m;if(o!==void 0)return o;throw Error(`\`${u}\` must be used within \`${i}\``)}return[c,d]}let n=()=>{let i=t.map(o=>v.createContext(o));return function(o){let l=(o==null?void 0:o[r])||i;return v.useMemo(()=>({[`__scope${r}`]:{...o,[r]:l}}),[o,l])}};return n.scopeName=r,[a,Ne(n,...e)]}function Ne(...r){let e=r[0];if(r.length===1)return e;let t=()=>{let a=r.map(n=>({useScope:n(),scopeName:n.scopeName}));return function(n){let i=a.reduce((o,{useScope:l,scopeName:s})=>{let c=l(n)[`__scope${s}`];return{...o,...c}},{});return v.useMemo(()=>({[`__scope${e.scopeName}`]:i}),[i])}};return t.scopeName=e.scopeName,t}var _="Progress",M=100,[Pe,rt]=be(_),[Se,$e]=Pe(_),J=v.forwardRef((r,e)=>{let{__scopeProgress:t,value:a=null,max:n,getValueLabel:i=je,...o}=r;(n||n===0)&&!ee(n)&&console.error(Le(`${n}`,"Progress"));let l=ee(n)?n:M;a!==null&&!te(a,l)&&console.error(Ee(`${a}`,"Progress"));let s=te(a,l)?a:null,c=E(s)?i(s,l):void 0;return(0,x.jsx)(Se,{scope:t,value:s,max:l,children:(0,x.jsx)(W.div,{"aria-valuemax":l,"aria-valuemin":0,"aria-valuenow":E(s)?s:void 0,"aria-valuetext":c,role:"progressbar","data-state":Z(s,l),"data-value":s??void 0,"data-max":l,...o,ref:e})})});J.displayName=_;var K="ProgressIndicator",Q=v.forwardRef((r,e)=>{let{__scopeProgress:t,...a}=r,n=$e(K,t);return(0,x.jsx)(W.div,{"data-state":Z(n.value,n.max),"data-value":n.value??void 0,"data-max":n.max,...a,ref:e})});Q.displayName=K;function je(r,e){return`${Math.round(r/e*100)}%`}function Z(r,e){return r==null?"indeterminate":r===e?"complete":"loading"}function E(r){return typeof r=="number"}function ee(r){return E(r)&&!isNaN(r)&&r>0}function te(r,e){return E(r)&&!isNaN(r)&&r<=e&&r>=0}function Le(r,e){return`Invalid prop \`max\` of value \`${r}\` supplied to \`${e}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${M}\`.`}function Ee(r,e){return`Invalid prop \`value\` of value \`${r}\` supplied to \`${e}\`. The \`value\` prop must be:
-  - a positive number
-  - less than the value passed to \`max\` (or ${M} if no \`max\` prop is set)
-  - \`null\` or \`undefined\` if the progress is indeterminate.
-
-Defaulting to \`null\`.`}var re=J,Re=Q,De=q(),T=v.forwardRef((r,e)=>{let t=(0,De.c)(20),a,n,i,o;t[0]===r?(a=t[1],n=t[2],i=t[3],o=t[4]):({className:a,value:o,indeterminate:n,...i}=r,t[0]=r,t[1]=a,t[2]=n,t[3]=i,t[4]=o);let l;t[5]===a?l=t[6]:(l=H("relative h-2 w-full overflow-hidden rounded-full bg-primary/20",a),t[5]=a,t[6]=l);let s=n?"w-1/3 animate-progress-indeterminate":"w-full transition-transform duration-300 ease-out",c;t[7]===s?c=t[8]:(c=H("h-full flex-1 bg-primary",s),t[7]=s,t[8]=c);let d;t[9]!==n||t[10]!==o?(d=n?void 0:{transform:`translateX(-${100-(o||0)}%)`},t[9]=n,t[10]=o,t[11]=d):d=t[11];let u;t[12]!==c||t[13]!==d?(u=(0,x.jsx)(Re,{className:c,style:d}),t[12]=c,t[13]=d,t[14]=u):u=t[14];let f;return t[15]!==i||t[16]!==e||t[17]!==l||t[18]!==u?(f=(0,x.jsx)(re,{ref:e,className:l,...i,children:u}),t[15]=i,t[16]=e,t[17]=l,t[18]=u,t[19]=f):f=t[19],f});T.displayName=re.displayName;var ke=q();const Oe=r=>{let e=(0,ke.c)(13),{progress:t,showPercentage:a}=r,n=a===void 0?!1:a,i,o;e[0]===t?(i=e[1],o=e[2]):(i=g=>t.subscribe(g),o=()=>t.getProgress(),e[0]=t,e[1]=i,e[2]=o);let l=(0,v.useSyncExternalStore)(i,o),s=l==="indeterminate"||l===100,c=s?void 0:l,d;e[3]!==s||e[4]!==c?(d=(0,x.jsx)(T,{value:c,indeterminate:s}),e[3]=s,e[4]=c,e[5]=d):d=e[5];let u;e[6]!==s||e[7]!==n||e[8]!==l?(u=!s&&n&&(0,x.jsxs)("div",{className:"mt-1 text-xs text-muted-foreground text-right",children:[Math.round(l),"%"]}),e[6]=s,e[7]=n,e[8]=l,e[9]=u):u=e[9];let f;return e[10]!==d||e[11]!==u?(f=(0,x.jsxs)("div",{className:"mt-2 w-full min-w-[200px]",children:[d,u]}),e[10]=d,e[11]=u,e[12]=f):f=e[12],f};async function _e(r,e){let t=Y.indeterminate(),a=k({title:r,description:v.createElement(Oe,{progress:t}),duration:1/0});try{let n=await e(t);return a.dismiss(),n}catch(n){throw a.dismiss(),n}}function Me(r){let e=document.getElementById(se.create(r));if(!e){B.error(`Output element not found for cell ${r}`);return}return e}var Te=500,Ae=`
-  * { scrollbar-width: none; -ms-overflow-style: none; }
-  *::-webkit-scrollbar { display: none; }
-`;async function ne(r){let e=Me(r);if(!e)return;let t=await we(e);if(t)return t;let a=Date.now(),n=await O(e,{extraStyleContent:Ae,style:{maxHeight:"none",overflow:"visible"},height:e.scrollHeight}),i=Date.now()-a;return i>Te&&B.debug("toPng operation for element",e,`took ${i} ms (exceeds threshold)`),n}async function Ue(r,e){let t=await ne(r);t&&R(t,h.toPNG(e))}const Ce=()=>(document.body.classList.add("printing"),()=>{document.body.classList.remove("printing")});async function Fe(r){let{element:e,filename:t,prepare:a}=r,n=document.getElementById("App"),i=(n==null?void 0:n.scrollTop)??0,o;a&&(o=a(e));try{R(await O(e),h.toPNG(t))}catch{k({title:"Error",description:"Failed to download as PNG.",variant:"danger"})}finally{o==null||o(),document.body.classList.contains("printing")&&document.body.classList.remove("printing"),requestAnimationFrame(()=>{n==null||n.scrollTo(0,i)})}}function R(r,e){let t=document.createElement("a");t.href=r,t.download=e,t.click(),t.remove()}function ae(r,e){let t=URL.createObjectURL(r);R(t,e),URL.revokeObjectURL(t)}async function Ie(r){let e=de(),{filename:t,webpdf:a}=r;try{let n=await e.exportAsPDF({webpdf:a}),i=ue.basename(t);ae(n,h.toPDF(i))}catch(n){throw k({title:"Failed to download",description:pe(n),variant:"danger"}),n}}export{Ue as a,_e as c,h as d,ye as f,R as i,T as l,ve as m,Ie as n,Fe as o,he as p,ae as r,ne as s,Ce as t,Y as u};