@marimo-team/islands 0.25.3-dev235 → 0.25.3-dev238

package/package.json

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

package/src/components/ui/__tests__/fullscreen.test.tsx

@@ -1,8 +1,50 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { act, render } from "@testing-library/react";
+import { act, render, renderHook } from "@testing-library/react";
 import { useRef } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { useIsFullScreen } from "../fullscreen";
+import { useFullScreenClass, useIsFullScreen } from "../fullscreen";
+
+describe("useFullScreenClass", () => {
+  let fullscreenElement: Element | null = null;
+
+  beforeEach(() => {
+    fullscreenElement = null;
+    Object.defineProperty(document, "fullscreenElement", {
+      configurable: true,
+      get: () => fullscreenElement,
+    });
+  });
+
+  afterEach(() => {
+    Reflect.deleteProperty(document, "fullscreenElement");
+    document.documentElement.classList.remove("marimo-fullscreen");
+  });
+
+  it("reflects fullscreen state at mount and on entry and exit", () => {
+    fullscreenElement = document.body;
+    const { unmount } = renderHook(useFullScreenClass);
+    expect(document.documentElement).toHaveClass("marimo-fullscreen");
+
+    fullscreenElement = null;
+    act(() => document.dispatchEvent(new Event("fullscreenchange")));
+    expect(document.documentElement).not.toHaveClass("marimo-fullscreen");
+
+    fullscreenElement = document.body;
+    act(() => document.dispatchEvent(new Event("fullscreenchange")));
+    expect(document.documentElement).toHaveClass("marimo-fullscreen");
+    unmount();
+  });
+
+  it("removes the class and listener on unmount", () => {
+    fullscreenElement = document.body;
+    const { unmount } = renderHook(useFullScreenClass);
+    unmount();
+    expect(document.documentElement).not.toHaveClass("marimo-fullscreen");
+
+    act(() => document.dispatchEvent(new Event("fullscreenchange")));
+    expect(document.documentElement).not.toHaveClass("marimo-fullscreen");
+  });
+});
 
 const FullScreenFlag = ({ label }: { label: string }) => {
   const ref = useRef<HTMLDivElement>(null);

package/src/components/ui/fullscreen.tsx

@@ -4,7 +4,12 @@ import type { Popover } from "radix-ui";
 
 type PopoverContentProps = Popover.PopoverContentProps;
 
-import React, { type RefObject, useState, useSyncExternalStore } from "react";
+import React, {
+  type RefObject,
+  useLayoutEffect,
+  useState,
+  useSyncExternalStore,
+} from "react";
 import { isInVscodeExtension } from "@/core/vscode/is-in-vscode";
 import { useEventListener } from "@/hooks/useEventListener";
 
@@ -14,6 +19,25 @@ const VSCODE_OUTPUT_CONTAINER_SELECTOR = "[data-vscode-output-container]";
 // Otherwise, we give a 30px buffer to the max-height.
 export const MAX_HEIGHT_OFFSET = isInVscodeExtension() ? 0 : 30;
 
+// An explicit class avoids document-wide :has(:fullscreen) style invalidation.
+export function useFullScreenClass() {
+  useLayoutEffect(() => {
+    const syncFullScreenClass = () => {
+      document.documentElement.classList.toggle(
+        "marimo-fullscreen",
+        Boolean(document.fullscreenElement),
+      );
+    };
+
+    syncFullScreenClass();
+    document.addEventListener("fullscreenchange", syncFullScreenClass);
+    return () => {
+      document.removeEventListener("fullscreenchange", syncFullScreenClass);
+      document.documentElement.classList.remove("marimo-fullscreen");
+    };
+  }, []);
+}
+
 /**
  * Get the full screen element if we are in full screen mode
  */

package/src/core/MarimoApp.tsx

@@ -7,6 +7,7 @@ import { Provider as SlotzProvider } from "@marimo-team/react-slotz";
 import type React from "react";
 import { memo, type PropsWithChildren, Suspense } from "react";
 import { TailwindIndicator } from "@/components/debug/indicator";
+import { useFullScreenClass } from "@/components/ui/fullscreen";
 import { useAppConfig, useResolvedMarimoConfig } from "@/core/config/config";
 import { getInitialAppMode } from "@/core/mode";
 import { CssVariables } from "@/theme/ThemeProvider";
@@ -58,6 +59,7 @@ export function preloadPage(mode: string) {
  * The root component of the Marimo app.
  */
 export const MarimoApp: React.FC = memo(() => {
+  useFullScreenClass();
   const [userConfig] = useResolvedMarimoConfig();
   const appConfig = useAppConfig();
   const editorFontSize = toRem(userConfig.display.code_editor_font_size);

package/src/css/common.css

@@ -31,7 +31,7 @@
 }
 
 /* When any element is fullscreen, hide the element with this class */
-:root:has(:fullscreen) .hide-on-fullscreen {
+:root.marimo-fullscreen .hide-on-fullscreen {
   display: none !important;
 }
 

package/src/plugins/layout/DownloadPlugin.tsx

@@ -6,7 +6,7 @@ import { z } from "zod";
 import { buttonVariants } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
 import { cn } from "@/utils/cn";
-import { downloadByURL } from "@/utils/download";
+import { downloadByURL, isDownloadUrl } from "@/utils/download";
 import { Logger } from "@/utils/Logger";
 import { createPlugin } from "../core/builder";
 import { renderHTML } from "../core/RenderHTML";
@@ -80,7 +80,7 @@ const DownloadButton = ({
   const [isLoading, setIsLoading] = useState(false);
 
   const handleClick = async (e: React.MouseEvent) => {
-    if (data.disabled) {
+    if (data.disabled || isLoading) {
       e.preventDefault();
       e.stopPropagation();
       return;
@@ -88,15 +88,11 @@ const DownloadButton = ({
 
     e.preventDefault();
 
-    if (!data.lazy) {
-      downloadByURL(data.data, data.filename ?? undefined);
-      return;
-    }
-
-    setIsLoading(true);
-
     try {
-      const loadedData = await load({});
+      if (data.lazy) {
+        setIsLoading(true);
+      }
+      const loadedData = data.lazy ? await load({}) : data;
       downloadByURL(
         loadedData.data || data.data,
         loadedData.filename ?? data.filename ?? undefined,
@@ -117,7 +113,7 @@ const DownloadButton = ({
 
   return (
     <a
-      href={data.data}
+      href={isDownloadUrl(data.data) ? data.data : undefined}
       download={data.filename ?? ""}
       onClick={handleClick}
       className={buttonVariants({

package/src/plugins/layout/__test__/DownloadPlugin.test.tsx

@@ -0,0 +1,196 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  waitFor,
+} from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Mocks } from "@/__mocks__/common";
+import { toast } from "@/components/ui/use-toast";
+import { assertExists } from "@/utils/assertExists";
+import { Deferred } from "@/utils/Deferred";
+import { registerReactComponent } from "../../core/registerReactComponent";
+import { sanitizeHtml } from "../../core/sanitize-html";
+import { DownloadPlugin } from "../DownloadPlugin";
+
+vi.mock("@/components/ui/use-toast", () => ({ toast: vi.fn() }));
+vi.mock("@/utils/Logger", () => ({ Logger: Mocks.quietLogger() }));
+
+type DownloadData = Parameters<typeof DownloadPlugin.render>[0]["data"];
+type Load = Parameters<typeof DownloadPlugin.render>[0]["functions"]["load"];
+
+function renderDownload(
+  data: Partial<DownloadData> = {},
+  load = vi.fn<Load>(),
+) {
+  const result = render(
+    DownloadPlugin.render({
+      host: document.createElement("div"),
+      value: null,
+      setValue: vi.fn(),
+      data: DownloadPlugin.validator.parse({
+        data: "./@file/123-results.csv",
+        filename: "results.csv",
+        ...data,
+      }),
+      functions: { load },
+    }),
+  );
+  const button = result.getByText("Download").closest("a");
+  assertExists(button);
+  return { ...result, load, button };
+}
+
+describe("DownloadPlugin", () => {
+  const downloads: { href: string | null; filename: string | null }[] = [];
+
+  beforeEach(() => {
+    downloads.length = 0;
+    vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(function (
+      this: HTMLAnchorElement,
+    ) {
+      downloads.push({
+        href: this.getAttribute("href"),
+        filename: this.getAttribute("download"),
+      });
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+    vi.clearAllMocks();
+  });
+
+  it("downloads immediately without calling load", () => {
+    const { button, load } = renderDownload();
+    fireEvent.click(button);
+
+    expect(downloads).toEqual([
+      { href: "./@file/123-results.csv", filename: "results.csv" },
+    ]);
+    expect(load).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    { data: "data:text/plain,hello", filename: "loaded.txt" },
+    { data: "", filename: "renamed.csv" },
+    { data: "data:text/plain,hello", filename: null },
+  ])("downloads lazy data with metadata fallbacks: %j", async (loadedData) => {
+    const load = vi.fn<Load>().mockResolvedValue(loadedData);
+    const { button } = renderDownload({ lazy: true }, load);
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      expect(downloads).toEqual([
+        {
+          href: loadedData.data || "./@file/123-results.csv",
+          filename: loadedData.filename ?? "results.csv",
+        },
+      ]);
+    });
+    expect(load).toHaveBeenCalledExactlyOnceWith({});
+  });
+
+  it.each([false, true])("ignores disabled clicks (lazy=%s)", (lazy) => {
+    const { button, load } = renderDownload({ disabled: true, lazy });
+    fireEvent.click(button);
+    expect(downloads).toEqual([]);
+    expect(load).not.toHaveBeenCalled();
+    expect(toast).not.toHaveBeenCalled();
+  });
+
+  it.each([false, true])(
+    "handles an unsupported URL (lazy=%s)",
+    async (lazy) => {
+      const data = "java\nscript:alert(1)";
+      const load = vi.fn<Load>().mockResolvedValue({ data });
+      const { button } = renderDownload({ data, lazy }, load);
+      expect(button.hasAttribute("href")).toBe(false);
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(toast).toHaveBeenCalledWith({
+          title: "Failed to download",
+          description: "Please try again.",
+        });
+      });
+      expect(downloads).toEqual([]);
+    },
+  );
+
+  it("validates the lazy response even when the initial URL is valid", async () => {
+    const load = vi
+      .fn<Load>()
+      .mockResolvedValue({ data: "javascript:alert(1)" });
+    const { button } = renderDownload({ lazy: true }, load);
+    fireEvent.click(button);
+
+    await waitFor(() => expect(toast).toHaveBeenCalledOnce());
+    expect(downloads).toEqual([]);
+  });
+
+  it("validates the fallback URL when lazy loading only returns a filename", async () => {
+    const load = vi
+      .fn<Load>()
+      .mockResolvedValue({ data: "", filename: "file.txt" });
+    const { button } = renderDownload(
+      { data: "javascript:alert(1)", lazy: true },
+      load,
+    );
+    fireEvent.click(button);
+
+    await waitFor(() => expect(toast).toHaveBeenCalledOnce());
+    expect(downloads).toEqual([]);
+  });
+
+  it("ignores clicks while loading and allows retry after a failed load", async () => {
+    const pendingLoad = new Deferred<Awaited<ReturnType<Load>>>();
+    const load = vi
+      .fn<Load>()
+      .mockReturnValueOnce(pendingLoad.promise)
+      .mockResolvedValue({ data: "data:text/plain,retry" });
+    const { button } = renderDownload({ data: "", lazy: true }, load);
+    fireEvent.click(button);
+    fireEvent.click(button);
+    expect(load).toHaveBeenCalledOnce();
+
+    await act(async () => pendingLoad.reject(new Error("Load failed")));
+    expect(toast).toHaveBeenCalledOnce();
+    expect(downloads).toEqual([]);
+
+    fireEvent.click(button);
+    await waitFor(() =>
+      expect(downloads).toEqual([
+        { href: "data:text/plain,retry", filename: "results.csv" },
+      ]),
+    );
+    expect(load).toHaveBeenCalledTimes(2);
+  });
+
+  it("rejects an unsupported URL restored from sanitized output", async () => {
+    registerReactComponent(DownloadPlugin);
+    const container = document.createElement("div");
+    container.innerHTML = sanitizeHtml(
+      `<marimo-download data-data='"javascript:alert(1)"' data-initial-value='null' data-disabled='false' data-lazy='false'></marimo-download>`,
+    );
+    try {
+      await act(async () => {
+        document.body.append(container);
+      });
+      const button = container
+        .querySelector("marimo-download")
+        ?.shadowRoot?.querySelector("a");
+      assertExists(button);
+      expect(button.hasAttribute("href")).toBe(false);
+      fireEvent.click(button);
+      expect(toast).toHaveBeenCalledOnce();
+      expect(downloads).toEqual([]);
+    } finally {
+      await act(async () => container.remove());
+    }
+  });
+});

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

@@ -595,24 +595,77 @@ describe("downloadByURL", () => {
   });
 
   it("should create anchor, set attributes, click, and remove", () => {
-    downloadByURL("data:test", "filename.png");
+    downloadByURL("data:image/png;base64,AAA=", "filename.png");
 
     expect(document.createElement).toHaveBeenCalledWith("a");
-    expect(mockAnchor.href).toBe("data:test");
+    expect(mockAnchor.href).toBe("data:image/png;base64,AAA=");
     expect(mockAnchor.download).toBe("filename.png");
     expect(mockAnchor.click).toHaveBeenCalled();
     expect(mockAnchor.remove).toHaveBeenCalled();
   });
 
+  it.each([
+    "https://example.com/results.csv",
+    "http://example.com/results.csv",
+    "//example.com/results.csv",
+    "./@file/123-results.csv",
+    "/files/results.csv?download=1#data",
+    "../results.csv",
+    "blob:http://localhost/123",
+    "data:text/csv;charset=utf-8,a%2Cb",
+    "DATA:TEXT/PLAIN;base64,aGVsbG8=",
+    "data:application/json,%7B%7D",
+    "data:application/octet-stream;base64,AAA=",
+    "data:,hello",
+    "data:;base64,aGVsbG8=",
+    "data:text/plain,",
+    " https://example.com/results.csv ",
+  ])("downloads %s without an explicit filename", (url) => {
+    downloadByURL(url);
+
+    expect(mockAnchor.getAttribute("href")).toBe(url);
+    expect(mockAnchor.getAttribute("download")).toBe("");
+    expect(mockAnchor.click).toHaveBeenCalledOnce();
+  });
+
+  it.each([
+    "javascript:alert(1)",
+    "JaVaScRiPt:alert(1)",
+    " \u0000javascript:alert(1)",
+    "java\tscript:alert(1)",
+    "java\nscript:alert(1)",
+    "java\rscript:alert(1)",
+    "vbscript:msgbox(1)",
+    "file:///tmp/results.csv",
+    "ftp://example.com/results.csv",
+    "mailto:example@example.com",
+    "data:text/html,<h1>hello</h1>",
+    "data:TEXT/HTML;charset=utf-8;base64,AAA=",
+    "data:image/svg+xml,<svg/>",
+    "data:application/xhtml+xml,<html/>",
+    "data:text/javascript,alert(1)",
+    "data:text/plain",
+    "https://[invalid",
+    "",
+    " \n\t",
+  ])("rejects %j before creating a download link", (url) => {
+    expect(() => downloadByURL(url)).toThrow("Unsupported download URL");
+    expect(document.createElement).not.toHaveBeenCalled();
+    expect(mockAnchor.click).not.toHaveBeenCalled();
+  });
+
   it("downloads an exported file with its returned metadata", async () => {
     let downloadedBlob: Blob | undefined;
-    vi.stubGlobal("URL", {
-      createObjectURL: vi.fn((blob: Blob) => {
-        downloadedBlob = blob;
-        return "blob:export";
-      }),
-      revokeObjectURL: vi.fn(),
-    });
+    vi.stubGlobal(
+      "URL",
+      class extends URL {
+        public static override createObjectURL = vi.fn((blob: Blob) => {
+          downloadedBlob = blob;
+          return "blob:export";
+        });
+        public static override revokeObjectURL = vi.fn();
+      },
+    );
 
     downloadExportedFile({
       contents: "notebook",

package/src/utils/download.ts

@@ -12,6 +12,7 @@ import { captureExternalIframes } from "./iframe";
 import { Logger } from "./Logger";
 import { ProgressState } from "./progress";
 import { ToastProgress } from "./toast-progress";
+import { asURL } from "./url";
 
 const FINISH_TOAST_DURATION_MS = 1200;
 type ToastConfig = Omit<Parameters<typeof toast>[0], "id">;
@@ -177,12 +178,63 @@ export async function downloadHTMLAsImage(opts: {
   }
 }
 
+const DOWNLOAD_DATA_TYPES = new Set([
+  "text/plain",
+  "text/csv",
+  "text/tab-separated-values",
+  "application/json",
+  "application/octet-stream",
+  "application/pdf",
+  "application/zip",
+  "application/gzip",
+  "image/png",
+  "image/jpeg",
+  "image/gif",
+  "image/webp",
+  "image/avif",
+  "image/bmp",
+  "image/x-icon",
+]);
+
+export function isDownloadUrl(url: string): boolean {
+  if (!url.trim()) {
+    return false;
+  }
+  try {
+    const parsed = asURL(url);
+    switch (parsed.protocol) {
+      case "http:":
+      case "https:":
+      case "blob:":
+        return true;
+      case "data:": {
+        const comma = parsed.pathname.indexOf(",");
+        if (comma === -1) {
+          return false;
+        }
+        const mimeType = parsed.pathname
+          .slice(0, comma)
+          .split(";", 1)[0]
+          .trim()
+          .toLowerCase();
+        // An omitted MIME type defaults to text/plain.
+        return DOWNLOAD_DATA_TYPES.has(mimeType || "text/plain");
+      }
+      default:
+        return false;
+    }
+  } catch {
+    return false;
+  }
+}
+
 export function downloadByURL(url: string, filename?: string) {
+  if (!isDownloadUrl(url)) {
+    throw new Error("Unsupported download URL");
+  }
   const a = document.createElement("a");
   a.href = url;
-  if (filename) {
-    a.download = filename;
-  }
+  a.download = filename ?? "";
   a.click();
   a.remove();
 }