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

package/dist/main.js

@@ -18703,7 +18703,7 @@ ${JSON.stringify(e2, null, 4)}`);
   }
   function singleFacet() {
     return Facet$1.define({
-      combine: (e) => e[0]
+      combine: (e) => e.find((e2) => e2 !== void 0)
     });
   }
   singleFacet(), singleFacet(), singleFacet();
@@ -73168,7 +73168,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.7-dev42"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.7-dev45"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$88 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.7-dev42",
+  "version": "0.19.7-dev45",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/core/ai/tools/__tests__/edit-notebook-tool.test.ts

@@ -44,6 +44,7 @@ function createMockEditorView(code: string): EditorView {
           lspConfig: {},
         }),
         cellConfigExtension({
+          cellId: "cell1" as CellId,
           completionConfig: {
             copilot: false,
             activate_on_typing: true,

package/src/core/codemirror/cm.ts

@@ -115,6 +115,7 @@ export const setupCodeMirror = (opts: CodeMirrorSetupOpts): Extension[] => {
     jupyterHelpExtension(),
     // Cell editing
     cellConfigExtension({
+      cellId,
       completionConfig,
       hotkeys,
       placeholderType,

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

@@ -41,12 +41,14 @@ export const lspConfigState = singleFacet<
  * Extension for cell config
  */
 export function cellConfigExtension({
+  cellId,
   completionConfig,
   hotkeys,
   placeholderType,
   lspConfig,
   diagnosticsConfig,
 }: {
+  cellId: CellId;
   completionConfig: CompletionConfig;
   hotkeys: HotkeyProvider;
   placeholderType: PlaceholderType;
@@ -55,6 +57,7 @@ export function cellConfigExtension({
 }) {
   return [
     // Store state
+    cellIdState.of(cellId),
     completionConfigState.of(completionConfig),
     hotkeysProviderState.of(hotkeys),
     placeholderState.of(placeholderType),

package/src/core/codemirror/copilot/__tests__/getCodes.test.ts

@@ -45,6 +45,7 @@ function createMockEditorView(code: string) {
           lspConfig: {},
         }),
         cellConfigExtension({
+          cellId: "cell1" as CellId,
           completionConfig: {
             copilot: false,
             activate_on_typing: true,

package/src/core/codemirror/facet.ts

@@ -14,6 +14,9 @@ import { Facet } from "@codemirror/state";
  */
 export function singleFacet<T>() {
   return Facet.define<T, T>({
-    combine: (values) => values[0],
+    combine: (values) => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      return values.find((v) => v !== undefined)!;
+    },
   });
 }

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

@@ -49,6 +49,7 @@ function createState(content: string, selection?: { anchor: number }) {
         placeholderType: "marimo-import",
       }),
       cellConfigExtension({
+        cellId: "cell1" as CellId,
         completionConfig: {
           copilot: false,
           activate_on_typing: true,

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;
 }