@marimo-team/islands 0.19.5-dev4 → 0.19.5-dev40

package/src/core/config/config.ts

@@ -125,3 +125,7 @@ export const snippetsEnabledAtom = atom<boolean>((get) => {
   const includeDefaultSnippets = config.snippets?.include_default_snippets;
   return customPaths.length > 0 || includeDefaultSnippets === true;
 });
+
+export const disableFileDownloadsAtom = atom<boolean>((get) => {
+  return get(resolvedMarimoConfigAtom).server?.disable_file_downloads ?? false;
+});

package/src/core/config/feature-flag.tsx

@@ -13,6 +13,7 @@ export interface ExperimentalFeatures {
   chat_modes: boolean;
   cache_panel: boolean;
   external_agents: boolean;
+  server_side_pdf_export: boolean;
   // Add new feature flags here
 }
 
@@ -24,6 +25,7 @@ const defaultValues: ExperimentalFeatures = {
   chat_modes: false,
   cache_panel: false,
   external_agents: import.meta.env.DEV,
+  server_side_pdf_export: false,
 };
 
 export function getFeatureFlag<T extends keyof ExperimentalFeatures>(

package/src/core/export/__tests__/hooks.test.ts

@@ -8,7 +8,10 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { CellId } from "@/core/cells/ids";
 import { CellOutputId } from "@/core/cells/ids";
 import type { CellRuntimeState } from "@/core/cells/types";
-import { useEnrichCellOutputs } from "../hooks";
+import {
+  updateCellOutputsWithScreenshots,
+  useEnrichCellOutputs,
+} from "../hooks";
 
 // Mock html-to-image
 vi.mock("html-to-image", () => ({
@@ -22,6 +25,11 @@ vi.mock("@/utils/Logger", () => ({
   },
 }));
 
+// Mock toast
+vi.mock("@/components/ui/use-toast", () => ({
+  toast: vi.fn(),
+}));
+
 // Mock cellsRuntimeAtom - must be defined inline in the factory function
 vi.mock("@/core/cells/cells", async () => {
   const { atom } = await import("jotai");
@@ -31,6 +39,7 @@ vi.mock("@/core/cells/cells", async () => {
 });
 
 import { toPng } from "html-to-image";
+import { toast } from "@/components/ui/use-toast";
 import { cellsRuntimeAtom } from "@/core/cells/cells";
 import { Logger } from "@/utils/Logger";
 
@@ -502,3 +511,113 @@ describe("useEnrichCellOutputs", () => {
     }
   });
 });
+
+describe("updateCellOutputsWithScreenshots", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should call updateCellOutputs when there are screenshots", async () => {
+    const cellId = "cell-1" as CellId;
+    const mockScreenshots = {
+      [cellId]: ["image/png", "data:image/png;base64,test"] as [
+        "image/png",
+        string,
+      ],
+    };
+
+    const takeScreenshots = vi.fn().mockResolvedValue(mockScreenshots);
+    const updateCellOutputs = vi.fn().mockResolvedValue(null);
+
+    await updateCellOutputsWithScreenshots(takeScreenshots, updateCellOutputs);
+
+    expect(takeScreenshots).toHaveBeenCalledTimes(1);
+    expect(updateCellOutputs).toHaveBeenCalledTimes(1);
+    expect(updateCellOutputs).toHaveBeenCalledWith({
+      cellIdsToOutput: mockScreenshots,
+    });
+  });
+
+  it("should not call updateCellOutputs when there are no screenshots", async () => {
+    const takeScreenshots = vi.fn().mockResolvedValue({});
+    const updateCellOutputs = vi.fn().mockResolvedValue(null);
+
+    await updateCellOutputsWithScreenshots(takeScreenshots, updateCellOutputs);
+
+    expect(takeScreenshots).toHaveBeenCalledTimes(1);
+    expect(updateCellOutputs).not.toHaveBeenCalled();
+  });
+
+  it("should handle multiple cell screenshots", async () => {
+    const cell1 = "cell-1" as CellId;
+    const cell2 = "cell-2" as CellId;
+    const mockScreenshots = {
+      [cell1]: ["image/png", "data:image/png;base64,image1"] as [
+        "image/png",
+        string,
+      ],
+      [cell2]: ["image/png", "data:image/png;base64,image2"] as [
+        "image/png",
+        string,
+      ],
+    };
+
+    const takeScreenshots = vi.fn().mockResolvedValue(mockScreenshots);
+    const updateCellOutputs = vi.fn().mockResolvedValue(null);
+
+    await updateCellOutputsWithScreenshots(takeScreenshots, updateCellOutputs);
+
+    expect(updateCellOutputs).toHaveBeenCalledWith({
+      cellIdsToOutput: mockScreenshots,
+    });
+  });
+
+  it("should catch errors from takeScreenshots and show toast", async () => {
+    const error = new Error("Screenshot failed");
+    const takeScreenshots = vi.fn().mockRejectedValue(error);
+    const updateCellOutputs = vi.fn().mockResolvedValue(null);
+
+    // Should not throw - errors are caught and shown via toast
+    await updateCellOutputsWithScreenshots(takeScreenshots, updateCellOutputs);
+
+    expect(updateCellOutputs).not.toHaveBeenCalled();
+    expect(Logger.error).toHaveBeenCalledWith(
+      "Error updating cell outputs with screenshots:",
+      error,
+    );
+    expect(toast).toHaveBeenCalledWith({
+      title: "Failed to capture cell outputs",
+      description:
+        "Some outputs may not appear in the PDF. Continuing with export.",
+      variant: "danger",
+    });
+  });
+
+  it("should catch errors from updateCellOutputs and show toast", async () => {
+    const cellId = "cell-1" as CellId;
+    const mockScreenshots = {
+      [cellId]: ["image/png", "data:image/png;base64,test"] as [
+        "image/png",
+        string,
+      ],
+    };
+    const error = new Error("Update failed");
+
+    const takeScreenshots = vi.fn().mockResolvedValue(mockScreenshots);
+    const updateCellOutputs = vi.fn().mockRejectedValue(error);
+
+    // Should not throw - errors are caught and shown via toast
+    await updateCellOutputsWithScreenshots(takeScreenshots, updateCellOutputs);
+
+    expect(Logger.error).toHaveBeenCalledWith(
+      "Error updating cell outputs with screenshots:",
+      error,
+    );
+    expect(toast).toHaveBeenCalledWith({
+      title: "Failed to capture cell outputs",
+      description:
+        "Some outputs may not appear in the PDF. Continuing with export.",
+      variant: "danger",
+    });
+  });
+});

package/src/core/export/hooks.ts

@@ -1,6 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { toPng } from "html-to-image";
 import { atom, useAtom, useAtomValue } from "jotai";
+import type { MimeType } from "@/components/editor/Output";
+import { toast } from "@/components/ui/use-toast";
 import { appConfigAtom } from "@/core/config/config";
 import { useInterval } from "@/hooks/useInterval";
 import { Logger } from "@/utils/Logger";
@@ -9,6 +11,7 @@ import { cellsRuntimeAtom } from "../cells/cells";
 import { type CellId, CellOutputId } from "../cells/ids";
 import { connectionAtom } from "../network/connection";
 import { useRequestClient } from "../network/requests";
+import type { UpdateCellOutputsRequest } from "../network/types";
 import { VirtualFileTracker } from "../static/virtual-file-tracker";
 import { WebSocketState } from "../websocket/types";
 
@@ -60,12 +63,10 @@ export function useAutoExport() {
 
   useInterval(
     async () => {
-      const cellsToOutput = await takeScreenshots();
-      if (Object.keys(cellsToOutput).length > 0) {
-        await updateCellOutputs({
-          cellIdsToOutput: cellsToOutput,
-        });
-      }
+      await updateCellOutputsWithScreenshots(
+        takeScreenshots,
+        updateCellOutputs,
+      );
       await autoExportAsIPYNB({
         download: false,
       });
@@ -85,6 +86,15 @@ export function useAutoExport() {
 // We track cells that need screenshots, these will be exported to IPYNB
 const richCellsToOutputAtom = atom<Record<CellId, unknown>>({});
 
+// MIME types to capture screenshots for
+const MIME_TYPES_TO_CAPTURE_SCREENSHOTS = new Set<MimeType>([
+  "text/html",
+  "application/vnd.vegalite.v5+json",
+  "application/vnd.vega.v5+json",
+  "application/vnd.vegalite.v6+json",
+  "application/vnd.vega.v6+json",
+]);
+
 /**
  * Take screenshots of cells with HTML outputs. These images will be sent to the backend to be exported to IPYNB.
  * @returns A map of cell IDs to their screenshots data.
@@ -103,7 +113,8 @@ export function useEnrichCellOutputs() {
       // Track latest output for this cell
       trackedCellsOutput[cellId] = outputData;
       if (
-        runtime.output?.mimetype === "text/html" &&
+        runtime.output?.mimetype &&
+        MIME_TYPES_TO_CAPTURE_SCREENSHOTS.has(runtime.output.mimetype) &&
         outputData &&
         outputHasChanged
       ) {
@@ -148,3 +159,26 @@ export function useEnrichCellOutputs() {
     );
   };
 }
+
+/**
+ * Utility function to take screenshots of cells with HTML outputs and update the cell outputs.
+ */
+export async function updateCellOutputsWithScreenshots(
+  takeScreenshots: () => Promise<Record<CellId, ["image/png", string]>>,
+  updateCellOutputs: (request: UpdateCellOutputsRequest) => Promise<null>,
+) {
+  try {
+    const cellIdsToOutput = await takeScreenshots();
+    if (Object.keys(cellIdsToOutput).length > 0) {
+      await updateCellOutputs({ cellIdsToOutput });
+    }
+  } catch (error) {
+    Logger.error("Error updating cell outputs with screenshots:", error);
+    toast({
+      title: "Failed to capture cell outputs",
+      description:
+        "Some outputs may not appear in the PDF. Continuing with export.",
+      variant: "danger",
+    });
+  }
+}

package/src/core/islands/bridge.ts

@@ -168,6 +168,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   openTutorial = throwNotImplemented;
   exportAsHTML = throwNotImplemented;
   exportAsMarkdown = throwNotImplemented;
+  exportAsPDF = throwNotImplemented;
   autoExportAsHTML = throwNotImplemented;
   autoExportAsMarkdown = throwNotImplemented;
   autoExportAsIPYNB = throwNotImplemented;

package/src/core/lsp/__tests__/transport.test.ts

@@ -41,6 +41,8 @@ describe("ReconnectingWebSocketTransport", () => {
       this.connect = vi.fn().mockResolvedValue(undefined);
       this.close = vi.fn();
       this.sendData = vi.fn().mockResolvedValue({ result: "success" });
+      this.subscribe = vi.fn();
+      this.unsubscribe = vi.fn();
     });
   });
 
@@ -287,4 +289,151 @@ describe("ReconnectingWebSocketTransport", () => {
       "Reconnect callback failed",
     );
   });
+
+  describe("subscribe", () => {
+    it("should track subscriptions", () => {
+      const getWsUrl = vi.fn(() => mockWsUrl);
+      const transport = new ReconnectingWebSocketTransport({ getWsUrl });
+
+      const handler = vi.fn();
+      transport.subscribe("notification", handler);
+
+      expect((transport as any).pendingSubscriptions).toHaveLength(1);
+      expect((transport as any).pendingSubscriptions[0]).toEqual({
+        event: "notification",
+        handler,
+      });
+    });
+
+    it("should register handler on delegate if it exists", async () => {
+      const getWsUrl = vi.fn(() => mockWsUrl);
+      const transport = new ReconnectingWebSocketTransport({ getWsUrl });
+
+      await transport.connect();
+
+      const handler = vi.fn();
+      transport.subscribe("notification", handler);
+
+      const delegate = (transport as any).delegate;
+      expect(delegate.subscribe).toHaveBeenCalledWith("notification", handler);
+    });
+
+    it("should register pending subscriptions when delegate is created", async () => {
+      const getWsUrl = vi.fn(() => mockWsUrl);
+      const transport = new ReconnectingWebSocketTransport({ getWsUrl });
+
+      const handler1 = vi.fn();
+      const handler2 = vi.fn();
+      transport.subscribe("notification", handler1);
+      transport.subscribe("response", handler2);
+
+      await transport.connect();
+
+      const delegate = (transport as any).delegate;
+      expect(delegate.subscribe).toHaveBeenCalledWith("notification", handler1);
+      expect(delegate.subscribe).toHaveBeenCalledWith("response", handler2);
+    });
+
+    it("should re-register subscriptions on reconnection", async () => {
+      const getWsUrl = vi.fn(() => mockWsUrl);
+      const transport = new ReconnectingWebSocketTransport({ getWsUrl });
+
+      // Add subscription before connection
+      const handler = vi.fn();
+      transport.subscribe("notification", handler);
+
+      // First connection
+      await transport.connect();
+      const firstDelegate = (transport as any).delegate;
+      expect(firstDelegate.subscribe).toHaveBeenCalledWith(
+        "notification",
+        handler,
+      );
+
+      // Clear mock calls
+      firstDelegate.subscribe.mockClear();
+
+      // Simulate connection loss
+      mockConnection.readyState = WebSocket.CLOSED;
+
+      // Reconnect by sending data
+      const data: any = { method: "test", params: [] };
+      await transport.sendData(data, 5000);
+
+      // New delegate should have been created
+      const secondDelegate = (transport as any).delegate;
+      expect(secondDelegate).not.toBe(firstDelegate);
+
+      // Subscription should be re-registered on new delegate
+      expect(secondDelegate.subscribe).toHaveBeenCalledWith(
+        "notification",
+        handler,
+      );
+    });
+  });
+
+  describe("unsubscribe", () => {
+    it("should remove subscription from tracking", () => {
+      const getWsUrl = vi.fn(() => mockWsUrl);
+      const transport = new ReconnectingWebSocketTransport({ getWsUrl });
+
+      const handler = vi.fn();
+      transport.subscribe("notification", handler);
+      expect((transport as any).pendingSubscriptions).toHaveLength(1);
+
+      transport.unsubscribe("notification", handler);
+      expect((transport as any).pendingSubscriptions).toHaveLength(0);
+    });
+
+    it("should unregister from delegate if it exists", async () => {
+      const getWsUrl = vi.fn(() => mockWsUrl);
+      const transport = new ReconnectingWebSocketTransport({ getWsUrl });
+
+      await transport.connect();
+
+      const handler = vi.fn();
+      transport.subscribe("notification", handler);
+
+      const delegate = (transport as any).delegate;
+      delegate.unsubscribe.mockClear();
+
+      transport.unsubscribe("notification", handler);
+
+      expect(delegate.unsubscribe).toHaveBeenCalledWith(
+        "notification",
+        handler,
+      );
+    });
+
+    it("should not re-register unsubscribed handlers on reconnection", async () => {
+      const getWsUrl = vi.fn(() => mockWsUrl);
+      const transport = new ReconnectingWebSocketTransport({ getWsUrl });
+
+      const handler1 = vi.fn();
+      const handler2 = vi.fn();
+      transport.subscribe("notification", handler1);
+      transport.subscribe("response", handler2);
+
+      await transport.connect();
+
+      // Unsubscribe handler1
+      transport.unsubscribe("notification", handler1);
+
+      // Simulate connection loss
+      mockConnection.readyState = WebSocket.CLOSED;
+
+      // Reconnect by sending data
+      const data: any = { method: "test", params: [] };
+      await transport.sendData(data, 5000);
+
+      const newDelegate = (transport as any).delegate;
+
+      // Only handler2 should be registered on the new delegate
+      expect(newDelegate.subscribe).not.toHaveBeenCalledWith(
+        "notification",
+        handler1,
+      );
+      expect(newDelegate.subscribe).toHaveBeenCalledWith("response", handler2);
+    });
+  });
 });

package/src/core/lsp/transport.ts

@@ -23,6 +23,11 @@ export interface ReconnectingWebSocketTransportOptions {
   onReconnect?: () => Promise<void>;
 }
 
+interface Subscription {
+  event: "pending" | "notification" | "response" | "error";
+  handler: Parameters<Transport["subscribe"]>[1];
+}
+
 /**
  * A WebSocket transport that automatically reconnects when the connection is lost.
  * This handles cases like computer sleep/wake or network interruptions.
@@ -33,6 +38,7 @@ export class ReconnectingWebSocketTransport extends Transport {
   private connectionPromise: Promise<void> | undefined;
   private isClosed = false;
   private hasConnectedBefore = false;
+  private pendingSubscriptions: Subscription[] = [];
 
   constructor(options: ReconnectingWebSocketTransportOptions) {
     super();
@@ -55,6 +61,12 @@ export class ReconnectingWebSocketTransport extends Transport {
 
     // Create a new delegate
     this.delegate = new WebSocketTransport(this.options.getWsUrl());
+
+    // Re-register all pending subscriptions on the new delegate
+    for (const { event, handler } of this.pendingSubscriptions) {
+      this.delegate.subscribe(event, handler);
+    }
+
     return this.delegate;
   }
 
@@ -134,6 +146,42 @@ export class ReconnectingWebSocketTransport extends Transport {
     this.connectionPromise = undefined;
   }
 
+  override subscribe(...args: Parameters<Transport["subscribe"]>): void {
+    // Register handler on parent Transport
+    super.subscribe(...args);
+
+    const [event, handler] = args;
+
+    // Track the subscription
+    this.pendingSubscriptions.push({ event, handler });
+
+    // Also register on delegate if it exists
+    if (this.delegate) {
+      this.delegate.subscribe(event, handler);
+    }
+  }
+
+  override unsubscribe(
+    ...args: Parameters<Transport["unsubscribe"]>
+  ): import("events").EventEmitter | undefined {
+    // Unregister from parent
+    const result = super.unsubscribe(...args);
+
+    const [event, handler] = args;
+
+    // Remove from pending subscriptions
+    this.pendingSubscriptions = this.pendingSubscriptions.filter(
+      (sub) => !(sub.event === event && sub.handler === handler),
+    );
+
+    // Also unregister from delegate if it exists
+    if (this.delegate) {
+      this.delegate.unsubscribe(event, handler);
+    }
+
+    return result;
+  }
+
   override async sendData(
     data: JSONRPCRequestData,
     timeout: number | null | undefined,

package/src/core/network/requests-lazy.ts

@@ -50,6 +50,7 @@ const ACTIONS: Record<keyof AllRequests, Action> = {
   // Export operations start a connection
   exportAsHTML: "startConnection",
   exportAsMarkdown: "startConnection",
+  exportAsPDF: "startConnection",
   readCode: "startConnection",
   sendCopy: "throwError",
 

package/src/core/network/requests-network.ts

@@ -381,6 +381,15 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         })
         .then(handleResponse);
     },
+    exportAsPDF: async (request) => {
+      return getClient()
+        .POST("/api/export/pdf", {
+          body: request,
+          parseAs: "blob",
+          params: getParams(),
+        })
+        .then(handleResponse);
+    },
     autoExportAsHTML: async (request) => {
       return getClient()
         .POST("/api/export/auto_export/html", {

package/src/core/network/requests-static.ts

@@ -76,6 +76,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
     shutdownSession: throwNotInEditMode,
     exportAsHTML: throwNotInEditMode,
     exportAsMarkdown: throwNotInEditMode,
+    exportAsPDF: throwNotInEditMode,
     autoExportAsHTML: throwNotInEditMode,
     autoExportAsMarkdown: throwNotInEditMode,
     autoExportAsIPYNB: throwNotInEditMode,

package/src/core/network/requests-toasting.tsx

@@ -61,6 +61,7 @@ export function createErrorToastingRequests(
     shutdownSession: "Failed to shutdown session",
     exportAsHTML: "Failed to export HTML",
     exportAsMarkdown: "Failed to export Markdown",
+    exportAsPDF: "Failed to export PDF",
     autoExportAsHTML: "", // No toast
     autoExportAsMarkdown: "", // No toast
     autoExportAsIPYNB: "", // No toast

package/src/core/network/types.ts

@@ -21,6 +21,7 @@ export type ExportAsHTMLRequest = schemas["ExportAsHTMLRequest"];
 export type ExportAsMarkdownRequest = schemas["ExportAsMarkdownRequest"];
 export type ExportAsIPYNBRequest = schemas["ExportAsIPYNBRequest"];
 export type ExportAsScriptRequest = schemas["ExportAsScriptRequest"];
+export type ExportAsPDFRequest = schemas["ExportAsPDFRequest"];
 export type UpdateCellOutputsRequest = schemas["UpdateCellOutputsRequest"];
 export type FileCreateRequest = schemas["FileCreateRequest"];
 export type FileCreateResponse = schemas["FileCreateResponse"];
@@ -173,6 +174,7 @@ export interface EditRequests {
   // Export requests
   exportAsHTML: (request: ExportAsHTMLRequest) => Promise<string>;
   exportAsMarkdown: (request: ExportAsMarkdownRequest) => Promise<string>;
+  exportAsPDF: (request: ExportAsPDFRequest) => Promise<Blob>;
   autoExportAsHTML: (request: ExportAsHTMLRequest) => Promise<null>;
   autoExportAsMarkdown: (request: ExportAsMarkdownRequest) => Promise<null>;
   autoExportAsIPYNB: (request: ExportAsIPYNBRequest) => Promise<null>;

package/src/core/wasm/bridge.ts

@@ -586,6 +586,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
   getWorkspaceFiles = throwNotImplemented;
   getRunningNotebooks = throwNotImplemented;
   shutdownSession = throwNotImplemented;
+  exportAsPDF = throwNotImplemented;
   autoExportAsHTML = throwNotImplemented;
   autoExportAsMarkdown = throwNotImplemented;
   autoExportAsIPYNB = throwNotImplemented;

package/src/css/app/Cell.css

@@ -249,7 +249,6 @@
   }
 
   /* Borderless styles for Cell */
-
   &.borderless {
     border-color: transparent;
 
@@ -258,7 +257,6 @@
     }
 
     /* Apply the original styles */
-    &:hover,
     &:focus {
       border: 1px solid var(--gray-4);
     }

package/src/plugins/layout/TexPlugin.tsx

@@ -115,16 +115,18 @@ const TexComponent = ({
   // isn't a simple way to do that in Python without bringing in a new
   // dependency.
   //
-  // The number of children is always 1 (the LaTeX) or 3 redundant ||(, ||)
-  // delimiters as the first and third child, another marimo-tex tag as the
-  // second. Only try to render latex in the former case.
+  // When nested, the inner marimo-tex should not render because the outer
+  // marimo-tex's textContent includes the nested delimiters (||(||(x||)||))
+  // and will render correctly with displayMode: true. We detect this by
+  // checking if the parent element is also a marimo-tex.
+  const isNested = host.parentElement?.tagName.toLowerCase() === "marimo-tex";
 
   // Re-render when the text content changes.
   useLayoutEffect(() => {
-    if (ref.current) {
+    if (ref.current && !isNested) {
       renderLatex(ref.current, currentTex);
     }
-  }, [currentTex]);
+  }, [currentTex, isNested]);
 
   return <span ref={ref} />;
 };