@marimo-team/islands 0.20.3-dev76 → 0.20.3-dev77

package/package.json

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

package/src/components/editor/actions/__tests__/pdf-export.test.ts

@@ -0,0 +1,42 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it, vi } from "vitest";
+import { runServerSidePDFDownload } from "../pdf-export";
+
+describe("runServerSidePDFDownload", () => {
+  it("downloads document preset via backend PDF endpoint", async () => {
+    const downloadPDF = vi.fn().mockResolvedValue(undefined);
+
+    await runServerSidePDFDownload({
+      filename: "slides.py",
+      preset: "document",
+      downloadPDF,
+    });
+
+    expect(downloadPDF).toHaveBeenCalledWith({
+      filename: "slides.py",
+      webpdf: true,
+      preset: "document",
+      includeInputs: false,
+      rasterServer: "live",
+    });
+  });
+
+  it("downloads slides preset via backend PDF endpoint", async () => {
+    const downloadPDF = vi.fn().mockResolvedValue(undefined);
+
+    await runServerSidePDFDownload({
+      filename: "slides.py",
+      preset: "slides",
+      downloadPDF,
+    });
+
+    expect(downloadPDF).toHaveBeenCalledWith({
+      filename: "slides.py",
+      webpdf: true,
+      preset: "slides",
+      includeInputs: false,
+      rasterServer: "live",
+    });
+  });
+});

package/src/components/editor/actions/pdf-export.ts

@@ -0,0 +1,26 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+type Preset = "document" | "slides";
+type DownloadPDF = (opts: {
+  filename: string;
+  webpdf: boolean;
+  preset: Preset;
+  includeInputs: boolean;
+  rasterServer: "live" | "static";
+}) => Promise<void>;
+
+export async function runServerSidePDFDownload(opts: {
+  filename: string;
+  preset: Preset;
+  downloadPDF: DownloadPDF;
+}): Promise<void> {
+  const { filename, preset, downloadPDF } = opts;
+
+  await downloadPDF({
+    filename,
+    webpdf: true,
+    preset,
+    includeInputs: false,
+    rasterServer: "live",
+  });
+}

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

@@ -56,10 +56,6 @@ 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";
@@ -78,7 +74,6 @@ import {
 } from "@/utils/download";
 import { Filenames } from "@/utils/filenames";
 import { Objects } from "@/utils/objects";
-import type { ProgressState } from "@/utils/progress";
 import { newNotebookURL } from "@/utils/urls";
 import { useRunAllCells } from "../cell/useRunCells";
 import { useChromeActions, useChromeState } from "../chrome/state";
@@ -88,6 +83,7 @@ import { commandPaletteAtom } from "../controls/state";
 import { AddDatabaseDialogContent } from "../database/add-database-form";
 import { displayLayoutName, getLayoutIcon } from "../renderers/layout-select";
 import { LAYOUT_TYPES } from "../renderers/types";
+import { runServerSidePDFDownload } from "./pdf-export";
 import type { ActionButton } from "./types";
 import { useCopyNotebook } from "./useCopyNotebook";
 import { useHideAllMarkdownCode } from "./useHideAllMarkdownCode";
@@ -122,16 +118,13 @@ export function useNotebookActions() {
   const setCommandPaletteOpen = useSetAtom(commandPaletteAtom);
   const setSettingsDialogOpen = useSetAtom(settingDialogAtom);
   const setKeyboardShortcutsOpen = useSetAtom(keyboardShortcutsAtom);
-  const { exportAsMarkdown, readCode, saveCellConfig, updateCellOutputs } =
-    useRequestClient();
+  const { exportAsMarkdown, readCode, saveCellConfig } = 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;
   const sharingWasmEnabled = resolvedConfig.sharing?.wasm ?? true;
@@ -141,6 +134,7 @@ export function useNotebookActions() {
   // Default export uses browser print, which is better in present mode
   const pdfDownloadEnabled =
     isServerSidePdfExportEnabled || viewState.mode === "present";
+  const isSlidesLayout = selectedLayout === "slides";
 
   const renderCheckboxElement = (checked: boolean) => (
     <div className="w-8 flex justify-end">
@@ -148,6 +142,39 @@ export function useNotebookActions() {
     </div>
   );
 
+  const renderRecommendedElement = (recommended: boolean) => {
+    if (!recommended) {
+      return null;
+    }
+    return (
+      <span className="ml-3 shrink-0 rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-700">
+        Recommended
+      </span>
+    );
+  };
+
+  const downloadServerSidePDF = async ({
+    preset,
+    title,
+  }: {
+    preset: "document" | "slides";
+    title: string;
+  }) => {
+    if (!filename) {
+      toastNotebookMustBeNamed();
+      return;
+    }
+
+    const runDownload = async () => {
+      await runServerSidePDFDownload({
+        filename,
+        preset,
+        downloadPDF: downloadAsPDF,
+      });
+    };
+    await withLoadingToast(title, runDownload);
+  };
+
   const actions: ActionButton[] = [
     {
       icon: <DownloadIcon size={14} strokeWidth={1.5} />,
@@ -226,45 +253,60 @@ export function useNotebookActions() {
           },
         },
         {
+          divider: true,
           icon: <FileIcon size={14} strokeWidth={1.5} />,
           label: "Download as PDF",
-          disabled: !pdfDownloadEnabled,
-          tooltip: pdfDownloadEnabled ? undefined : (
-            <span>
-              Only available in app view. <br />
-              Toggle with: {renderShortcut("global.hideCode", false)}
-            </span>
-          ),
-          handle: async () => {
-            if (isServerSidePdfExportEnabled) {
-              if (!filename) {
-                toastNotebookMustBeNamed();
-                return;
-              }
+          handle: NOOP_HANDLER,
+          disabled: !pdfDownloadEnabled && !isServerSidePdfExportEnabled,
+          dropdown: [
+            {
+              icon: <FileIcon size={14} strokeWidth={1.5} />,
+              label: "Document Layout",
+              rightElement: renderRecommendedElement(!isSlidesLayout),
+              disabled: !pdfDownloadEnabled,
+              tooltip: pdfDownloadEnabled ? undefined : (
+                <span>
+                  Only available in app view. <br />
+                  Toggle with: {renderShortcut("global.hideCode", false)}
+                </span>
+              ),
+              handle: async () => {
+                if (isServerSidePdfExportEnabled) {
+                  await downloadServerSidePDF({
+                    preset: "document",
+                    title: "Downloading Document PDF...",
+                  });
+                  return;
+                }
 
-              const downloadPDF = async (progress: ProgressState) => {
-                await updateCellOutputsWithScreenshots({
-                  takeScreenshots: () => takeScreenshots({ progress }),
-                  updateCellOutputs,
-                });
-                await downloadAsPDF({
-                  filename: filename,
-                  webpdf: false,
+                const beforeprint = new Event("export-beforeprint");
+                const afterprint = new Event("export-afterprint");
+                function print() {
+                  window.dispatchEvent(beforeprint);
+                  setTimeout(() => window.print(), 0);
+                  setTimeout(() => window.dispatchEvent(afterprint), 0);
+                }
+                print();
+              },
+            },
+            {
+              icon: <FileIcon size={14} strokeWidth={1.5} />,
+              label: "Slides Layout",
+              rightElement: renderRecommendedElement(isSlidesLayout),
+              disabled: !isServerSidePdfExportEnabled,
+              tooltip: isServerSidePdfExportEnabled ? undefined : (
+                <span>
+                  Requires Better PDF Export in Settings &gt; Experimental.
+                </span>
+              ),
+              handle: async () => {
+                await downloadServerSidePDF({
+                  preset: "slides",
+                  title: "Downloading Slides PDF...",
                 });
-              };
-              await withLoadingToast("Downloading PDF...", downloadPDF);
-              return;
-            }
-
-            const beforeprint = new Event("export-beforeprint");
-            const afterprint = new Event("export-afterprint");
-            function print() {
-              window.dispatchEvent(beforeprint);
-              setTimeout(() => window.print(), 0);
-              setTimeout(() => window.dispatchEvent(afterprint), 0);
-            }
-            print();
-          },
+              },
+            },
+          ],
         },
       ],
     },

package/src/components/editor/controls/notebook-menu-dropdown.tsx

@@ -106,6 +106,37 @@ export const NotebookMenuDropdown: React.FC<Props> = ({
     return item;
   };
 
+  const renderAction = (action: ActionButton) => {
+    if (action.hidden || action.redundant) {
+      return null;
+    }
+
+    if (action.dropdown) {
+      return (
+        <DropdownMenuSub key={action.label}>
+          <DropdownMenuSubTrigger
+            data-testid={`notebook-menu-dropdown-${action.label}`}
+            disabled={action.disabled}
+          >
+            {renderLabel(action)}
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              {action.dropdown.map((childAction) => (
+                <React.Fragment key={childAction.label}>
+                  {childAction.divider && <DropdownMenuSeparator />}
+                  {renderAction(childAction)}
+                </React.Fragment>
+              ))}
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+      );
+    }
+
+    return renderLeafAction(action);
+  };
+
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild={true} disabled={disabled}>
@@ -113,38 +144,10 @@ export const NotebookMenuDropdown: React.FC<Props> = ({
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="print:hidden w-[240px]">
         {actions.map((action) => {
-          if (action.hidden || action.redundant) {
-            return null;
-          }
-
-          if (action.dropdown) {
-            return (
-              <DropdownMenuSub key={action.label}>
-                <DropdownMenuSubTrigger
-                  data-testid={`notebook-menu-dropdown-${action.label}`}
-                >
-                  {renderLabel(action)}
-                </DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent>
-                    {action.dropdown.map((action) => {
-                      return (
-                        <React.Fragment key={action.label}>
-                          {action.divider && <DropdownMenuSeparator />}
-                          {renderLeafAction(action)}
-                        </React.Fragment>
-                      );
-                    })}
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
-            );
-          }
-
           return (
             <React.Fragment key={action.label}>
               {action.divider && <DropdownMenuSeparator />}
-              {renderLeafAction(action)}
+              {renderAction(action)}
             </React.Fragment>
           );
         })}

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

@@ -92,5 +92,26 @@ describe("createNetworkRequests", () => {
 
       process.env.NODE_ENV = originalEnv;
     });
+
+    it("exportAsPDF should pass preset through to the API", async () => {
+      const requests = createNetworkRequests();
+      await requests.exportAsPDF({
+        webpdf: false,
+        preset: "slides",
+        includeInputs: false,
+      } as any);
+
+      expect(mockClient.POST).toHaveBeenCalledWith(
+        "/api/export/pdf",
+        expect.objectContaining({
+          body: expect.objectContaining({
+            webpdf: false,
+            preset: "slides",
+            includeInputs: false,
+          }),
+          parseAs: "blob",
+        }),
+      );
+    });
   });
 });

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

@@ -3,6 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { CellId } from "@/core/cells/ids";
 import { CellOutputId } from "@/core/cells/ids";
 import {
+  downloadAsPDF,
   downloadByURL,
   downloadCellOutputAsImage,
   downloadHTMLAsImage,
@@ -10,11 +11,21 @@ import {
   withLoadingToast,
 } from "../download";
 
+const { mockExportAsPDF } = vi.hoisted(() => ({
+  mockExportAsPDF: vi.fn(),
+}));
+
 // Mock html-to-image
 vi.mock("html-to-image", () => ({
   toPng: vi.fn(),
 }));
 
+vi.mock("@/core/network/requests", () => ({
+  getRequestClient: () => ({
+    exportAsPDF: mockExportAsPDF,
+  }),
+}));
+
 // Mock the toast module
 const mockDismiss = vi.fn();
 const mockUpdate = vi.fn();
@@ -41,6 +52,7 @@ vi.mock("@/utils/Logger", () => ({
 vi.mock("@/utils/filenames", () => ({
   Filenames: {
     toPNG: (name: string) => `${name}.png`,
+    toPDF: (name: string) => `${name}.pdf`,
   },
 }));
 
@@ -174,6 +186,33 @@ describe("withLoadingToast", () => {
   });
 });
 
+describe("downloadAsPDF", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should send the preset in export request payload", async () => {
+    mockExportAsPDF.mockRejectedValue(new Error("network"));
+
+    await expect(
+      downloadAsPDF({
+        filename: "path/to/notebook.py",
+        webpdf: false,
+        preset: "slides",
+      }),
+    ).rejects.toThrow("network");
+
+    expect(mockExportAsPDF).toHaveBeenCalledWith({
+      webpdf: false,
+      preset: "slides",
+      includeInputs: false,
+      rasterizeOutputs: true,
+      rasterScale: 4,
+      rasterServer: "static",
+    });
+  });
+});
+
 describe("getImageDataUrlForCell", () => {
   const mockDataUrl = "data:image/png;base64,mockbase64data";
   let mockElement: HTMLElement;

package/src/utils/download.ts

@@ -188,6 +188,8 @@ export function downloadBlob(blob: Blob, filename: string) {
   URL.revokeObjectURL(url);
 }
 
+export type PDFExportPreset = "document" | "slides";
+
 /**
  * Download the current notebook as a PDF file.
  *
@@ -197,13 +199,31 @@ export function downloadBlob(blob: Blob, filename: string) {
 export async function downloadAsPDF(opts: {
   filename: string;
   webpdf: boolean;
+  preset?: PDFExportPreset;
+  includeInputs?: boolean;
+  rasterizeOutputs?: boolean;
+  rasterScale?: number;
+  rasterServer?: "static" | "live";
 }) {
   const client = getRequestClient();
-  const { filename, webpdf } = opts;
+  const {
+    filename,
+    webpdf,
+    preset = "document",
+    includeInputs = false,
+    rasterizeOutputs = true,
+    rasterScale = 4,
+    rasterServer = "static",
+  } = opts;
 
   try {
     const pdfBlob = await client.exportAsPDF({
       webpdf,
+      preset,
+      includeInputs,
+      rasterizeOutputs,
+      rasterScale,
+      rasterServer,
     });
 
     const filenameWithoutPath = Paths.basename(filename);