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

package/src/components/editor/actions/useNotebookActions.tsx

@@ -54,7 +54,12 @@ import {
 } from "@/core/cells/cells";
 import { disabledCellIds } from "@/core/cells/utils";
 import { useResolvedMarimoConfig } from "@/core/config/config";
+import { getFeatureFlag } from "@/core/config/feature-flag";
 import { Constants } from "@/core/constants";
+import {
+  updateCellOutputsWithScreenshots,
+  useEnrichCellOutputs,
+} from "@/core/export/hooks";
 import { useLayoutActions, useLayoutState } from "@/core/layout/layout";
 import { useTogglePresenting } from "@/core/layout/useTogglePresenting";
 import { kioskModeAtom, viewStateAtom } from "@/core/mode";
@@ -64,7 +69,12 @@ import { downloadAsHTML } from "@/core/static/download-html";
 import { createShareableLink } from "@/core/wasm/share";
 import { isWasm } from "@/core/wasm/utils";
 import { copyToClipboard } from "@/utils/copy";
-import { downloadBlob, downloadHTMLAsImage } from "@/utils/download";
+import {
+  downloadAsPDF,
+  downloadBlob,
+  downloadHTMLAsImage,
+  withLoadingToast,
+} from "@/utils/download";
 import { Filenames } from "@/utils/filenames";
 import { Objects } from "@/utils/objects";
 import { newNotebookURL } from "@/utils/urls";
@@ -110,13 +120,15 @@ export function useNotebookActions() {
   const setCommandPaletteOpen = useSetAtom(commandPaletteAtom);
   const setSettingsDialogOpen = useSetAtom(settingDialogAtom);
   const setKeyboardShortcutsOpen = useSetAtom(keyboardShortcutsAtom);
-  const { exportAsMarkdown, readCode, saveCellConfig } = useRequestClient();
+  const { exportAsMarkdown, readCode, saveCellConfig, updateCellOutputs } =
+    useRequestClient();
 
   const hasDisabledCells = useAtomValue(hasDisabledCellsAtom);
   const canUndoDeletes = useAtomValue(canUndoDeletesAtom);
   const { selectedLayout } = useLayoutState();
   const { setLayoutView } = useLayoutActions();
   const togglePresenting = useTogglePresenting();
+  const takeScreenshots = useEnrichCellOutputs();
 
   // Fallback: if sharing is undefined, both are enabled by default
   const sharingHtmlEnabled = resolvedConfig.sharing?.html ?? true;
@@ -139,11 +151,7 @@ export function useNotebookActions() {
           label: "Download as HTML",
           handle: async () => {
             if (!filename) {
-              toast({
-                variant: "danger",
-                title: "Error",
-                description: "Notebooks must be named to be exported.",
-              });
+              toastNotebookMustBeNamed();
               return;
             }
             await downloadAsHTML({ filename, includeCode: true });
@@ -154,11 +162,7 @@ export function useNotebookActions() {
           label: "Download as HTML (exclude code)",
           handle: async () => {
             if (!filename) {
-              toast({
-                variant: "danger",
-                title: "Error",
-                description: "Notebooks must be named to be exported.",
-              });
+              toastNotebookMustBeNamed();
               return;
             }
             await downloadAsHTML({ filename, includeCode: false });
@@ -220,6 +224,26 @@ export function useNotebookActions() {
               </span>
             ),
           handle: async () => {
+            if (getFeatureFlag("server_side_pdf_export")) {
+              if (!filename) {
+                toastNotebookMustBeNamed();
+                return;
+              }
+
+              const downloadPDF = async () => {
+                await updateCellOutputsWithScreenshots(
+                  takeScreenshots,
+                  updateCellOutputs,
+                );
+                await downloadAsPDF({
+                  filename: filename,
+                  webpdf: false,
+                });
+              };
+              await withLoadingToast("Downloading PDF...", downloadPDF);
+              return;
+            }
+
             const beforeprint = new Event("export-beforeprint");
             const afterprint = new Event("export-afterprint");
             function print() {
@@ -527,3 +551,11 @@ export function useNotebookActions() {
       return action;
     });
 }
+
+function toastNotebookMustBeNamed() {
+  toast({
+    title: "Error",
+    description: "Notebooks must be named to be exported.",
+    variant: "danger",
+  });
+}

package/src/components/editor/cell/cell-actions.tsx

@@ -12,6 +12,7 @@ import React, {
   useState,
 } from "react";
 import useEvent from "react-use-event-hook";
+import { getCellForDomProps } from "@/components/data-table/cell-utils";
 import {
   renderMinimalShortcut,
   renderShortcut,
@@ -104,7 +105,11 @@ const CellActionsDropdownInternal = (
       {...restoreFocus}
     >
       <Command>
-        <CommandInput placeholder="Search actions..." className="h-6 m-1" />
+        <CommandInput
+          placeholder="Search actions..."
+          className="h-6 m-1"
+          {...getCellForDomProps(props.cellId)}
+        />
         <CommandList>
           <CommandEmpty>No results</CommandEmpty>
           {actions.map((group, i) => (

package/src/components/editor/controls/Controls.tsx

@@ -54,9 +54,7 @@ export const Controls = ({
   onRun,
   connectionState,
   running,
-  appConfig,
 }: ControlsProps): JSX.Element => {
-  const appWidth = appConfig.width;
   const undoAvailable = useAtomValue(canUndoDeletesAtom);
   const needsRun = useAtomValue(needsRunAtom);
   const { undoDeleteCell } = useCellActions();
@@ -103,12 +101,7 @@ export const Controls = ({
         </div>
       )}
 
-      <div
-        className={cn(
-          bottomRightControls,
-          appWidth === "compact" && "xl:flex-row items-end",
-        )}
-      >
+      <div className={cn(bottomRightControls)}>
         <HideInKioskMode>
           <SaveComponent kioskMode={false} />
         </HideInKioskMode>

package/src/components/editor/file-tree/file-explorer.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import {
   ArrowLeftIcon,
@@ -47,6 +47,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { useCellActions } from "@/core/cells/cells";
 import { useLastFocusedCellId } from "@/core/cells/focus";
+import { disableFileDownloadsAtom } from "@/core/config/config";
 import { useRequestClient } from "@/core/network/requests";
 import type { FileInfo } from "@/core/network/types";
 import { isWasm } from "@/core/wasm/utils";
@@ -396,6 +397,7 @@ const Edit = ({ node }: { node: NodeApi<FileInfo> }) => {
 const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
   const { openFile, sendCreateFileOrFolder, sendFileDetails } =
     useRequestClient();
+  const disableFileDownloads = useAtomValue(disableFileDownloadsAtom);
 
   const fileType: FileType = node.data.isDirectory
     ? "directory"
@@ -611,7 +613,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
           </>
         )}
         <DropdownMenuSeparator />
-        {!node.data.isDirectory && (
+        {!node.data.isDirectory && !disableFileDownloads && (
           <>
             <DropdownMenuItem
               onSelect={async () => {

package/src/components/editor/file-tree/file-viewer.tsx

@@ -15,7 +15,7 @@ import { Suspense, useEffect, useRef, useState } from "react";
 import { renderShortcut } from "@/components/shortcuts/renderShortcut";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Tooltip } from "@/components/ui/tooltip";
-import { hotkeysAtom } from "@/core/config/config";
+import { disableFileDownloadsAtom, hotkeysAtom } from "@/core/config/config";
 import { useRequestClient } from "@/core/network/requests";
 import type { FileInfo } from "@/core/network/types";
 import { filenameAtom } from "@/core/saving/file-state";
@@ -49,6 +49,7 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   const { theme } = useTheme();
   const { sendFileDetails, sendUpdateFile } = useRequestClient();
   const hotkeys = useAtomValue(hotkeysAtom);
+  const disableFileDownloads = useAtomValue(disableFileDownloadsAtom);
   const currentNotebookFilename = useAtomValue(filenameAtom);
   // undefined value means not modified yet
   const [internalValue, setInternalValue] = useState<string>("");
@@ -152,11 +153,13 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
           </Button>
         </Tooltip>
       )}
-      <Tooltip content="Download">
-        <Button size="small" onClick={handleDownload}>
-          <DownloadIcon />
-        </Button>
-      </Tooltip>
+      {!disableFileDownloads && (
+        <Tooltip content="Download">
+          <Button size="small" onClick={handleDownload}>
+            <DownloadIcon />
+          </Button>
+        </Tooltip>
+      )}
       {!isMedia(mimeType) && (
         <>
           <Tooltip content="Copy contents to clipboard">

package/src/components/editor/navigation/navigation.ts

@@ -10,6 +10,7 @@ import {
 import { useAtomValue, useSetAtom, useStore } from "jotai";
 import { useMemo } from "react";
 import { mergeProps, useFocusWithin, useKeyboard } from "react-aria";
+import { DATA_FOR_CELL_ID } from "@/components/data-table/cell-utils";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import { cellIdsAtom, notebookAtom, useCellActions } from "@/core/cells/cells";
 import { useCellFocusActions } from "@/core/cells/focus";
@@ -101,7 +102,23 @@ function useCellFocusProps(
       // On focus, set the last focused cell id.
       focusActions.focusCell({ cellId });
     },
-    onBlurWithin: () => {
+    onBlurWithin: (e) => {
+      // Check if blur is happening because of vim search panel interaction
+      if (isInVimPanel(e.relatedTarget) || isInVimPanel(e.target)) {
+        // Don't hide code if we're just interacting with vim search
+        return;
+      }
+
+      // If the related target is for a cell id (data-for-cell-id), then we don't want to hide the code, otherwise it might
+      // close the dropdown.
+      if (
+        getDataForCellId(e.relatedTarget) === cellId ||
+        getDataForCellId(e.relatedTarget?.closest(`[${DATA_FOR_CELL_ID}]`)) ===
+          cellId
+      ) {
+        return;
+      }
+
       // On blur, hide the code if it was temporarily shown.
       temporarilyShownCodeActions.remove(cellId);
       actions.markTouched({ cellId });
@@ -116,6 +133,27 @@ function useCellFocusProps(
   return focusWithinProps;
 }
 
+function isInVimPanel(element: Element | null): boolean {
+  if (!element) {
+    return false;
+  }
+  if (element instanceof HTMLElement) {
+    return element.closest(".cm-vim-panel") !== null;
+  }
+  return false;
+}
+
+function getDataForCellId(element: Element | null | undefined): CellId | null {
+  if (!element) {
+    return null;
+  }
+  const cellId = element.getAttribute(DATA_FOR_CELL_ID);
+  if (!cellId) {
+    return null;
+  }
+  return cellId as CellId;
+}
+
 type KeymapHandlers = Record<string, () => boolean>;
 
 /**

package/src/components/editor/renderMimeIcon.tsx

@@ -29,6 +29,8 @@ export function renderMimeIcon(mime: string) {
       return "📝";
     case "application/vnd.vegalite.v5+json":
     case "application/vnd.vega.v5+json":
+    case "application/vnd.vegalite.v6+json":
+    case "application/vnd.vega.v6+json":
       return "📊";
     case "application/vnd.marimo+mimebundle":
       return "📦";

package/src/core/codemirror/language/panel/panel.tsx

@@ -8,6 +8,7 @@ import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
 import { normalizeName } from "@/core/cells/names";
 import { type ConnectionName, DUCKDB_ENGINE } from "@/core/datasets/engines";
 import { useAutoGrowInputProps } from "@/hooks/useAutoGrowInputProps";
+import { cellIdState } from "../../cells/state";
 import { formatSQL } from "../../format";
 import { languageAdapterState } from "../extension";
 import { MarkdownLanguageAdapter } from "../languages/markdown";
@@ -31,6 +32,7 @@ export const LanguagePanelComponent: React.FC<{
 }> = ({ view }) => {
   const { spanProps, inputProps } = useAutoGrowInputProps({ minWidth: 50 });
   const languageAdapter = view.state.field(languageAdapterState);
+  const cellId = view.state.facet(cellIdState);
 
   let actions: React.ReactNode = <div />;
   let showDivider = false;
@@ -93,6 +95,7 @@ export const LanguagePanelComponent: React.FC<{
         <SQLEngineSelect
           selectedEngine={metadata.engine}
           onChange={switchEngine}
+          cellId={cellId}
         />
         <div className="flex items-center gap-2 ml-auto">
           {metadata.engine === DUCKDB_ENGINE && <SQLModeSelect />}

package/src/core/codemirror/language/panel/sql.tsx

@@ -8,6 +8,7 @@ import {
   DatabaseBackup,
   SearchCheck,
 } from "lucide-react";
+import { getCellForDomProps } from "@/components/data-table/cell-utils";
 import { transformDisplayName } from "@/components/databases/display";
 import { DatabaseLogo } from "@/components/databases/icon";
 import { Button } from "@/components/ui/button";
@@ -22,6 +23,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Tooltip } from "@/components/ui/tooltip";
+import type { CellId } from "@/core/cells/ids";
 import {
   dataConnectionsMapAtom,
   setLatestEngineSelected,
@@ -38,11 +40,13 @@ import { type SQLMode, useSQLMode } from "../languages/sql/sql-mode";
 interface SelectProps {
   selectedEngine: ConnectionName;
   onChange: (engine: ConnectionName) => void;
+  cellId: CellId;
 }
 
 export const SQLEngineSelect: React.FC<SelectProps> = ({
   selectedEngine,
   onChange,
+  cellId,
 }) => {
   const connectionsMap = useAtomValue(dataConnectionsMapAtom);
 
@@ -98,10 +102,10 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
   return (
     <div className="flex flex-row gap-1 items-center">
       <Select value={selectedEngine} onValueChange={handleSelectEngine}>
-        <SQLSelectTrigger>
+        <SQLSelectTrigger {...getCellForDomProps(cellId)}>
           <SelectValue placeholder="Select an engine" />
         </SQLSelectTrigger>
-        <SelectContent>
+        <SelectContent {...getCellForDomProps(cellId)}>
           <SelectGroup>
             <SelectLabel>Database connections</SelectLabel>
             {engineIsDisconnected && (

package/src/core/config/config-schema.ts

@@ -190,7 +190,11 @@ export const UserConfigSchema = z
       })
       // Pass through so that we don't remove any extra keys that the user has added.
       .prefault(() => ({})),
-    server: z.looseObject({}).prefault(() => ({})),
+    server: z
+      .looseObject({
+        disable_file_downloads: z.boolean().optional(),
+      })
+      .prefault(() => ({})),
     diagnostics: z
       .looseObject({
         enabled: z.boolean().optional(),

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;