@marimo-team/islands 0.19.7-dev34 → 0.19.7-dev36

package/dist/{types-DBsIRhMX.js → types-CzEZ3EWT.js}

@@ -5183,7 +5183,7 @@ var DropdownMenuContent = import_react.forwardRef((e4, t) => {
   let n = (0, import_compiler_runtime$3.c)(17), r, i, a, o;
   n[0] === e4 ? (r = n[1], i = n[2], a = n[3], o = n[4]) : ({ className: r, scrollable: a, sideOffset: o, ...i } = e4, n[0] = e4, n[1] = r, n[2] = i, n[3] = a, n[4] = o);
   let s = a === void 0 ? true : a, c = o === void 0 ? 4 : o, l;
-  n[5] !== r || n[6] !== s ? (l = cn(menuContentCommon(), "animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", s && "overflow-auto", r), n[5] = r, n[6] = s, n[7] = l) : l = n[7];
+  n[5] !== r || n[6] !== s ? (l = cn(menuContentCommon(), "animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden", s && "overflow-auto", r), n[5] = r, n[6] = s, n[7] = l) : l = n[7];
   let u = s ? `calc(var(--radix-dropdown-menu-content-available-height) - ${MAX_HEIGHT_OFFSET}px)` : void 0, d;
   n[8] !== i.style || n[9] !== u ? (d = {
     ...i.style,

package/package.json

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

package/src/components/data-table/TableActions.tsx

@@ -107,13 +107,13 @@ export const TableActions = <TData,>({
   };
 
   return (
-    <div className="flex items-center shrink-0 pt-1 no-print">
+    <div className="flex items-center shrink-0 pt-1">
       {onSearchQueryChange && enableSearch && (
         <Tooltip content="Search">
           <Button
             variant="text"
             size="xs"
-            className="mb-0"
+            className="mb-0 print:hidden"
             onClick={() => setIsSearchEnabled(!isSearchEnabled)}
           >
             <SearchIcon className="w-4 h-4 text-muted-foreground" />
@@ -125,7 +125,7 @@ export const TableActions = <TData,>({
           <Button
             variant="text"
             size="xs"
-            className="mb-0"
+            className="mb-0 print:hidden"
             onClick={toggleDisplayHeader}
           >
             <ChartSplineIcon className="w-4 h-4 text-muted-foreground" />
@@ -140,6 +140,7 @@ export const TableActions = <TData,>({
                 variant="text"
                 size="xs"
                 onClick={() => togglePanel("row-viewer")}
+                className="print:hidden"
               >
                 <PanelRightIcon
                   className={cn(
@@ -156,6 +157,7 @@ export const TableActions = <TData,>({
                 variant="text"
                 size="xs"
                 onClick={() => togglePanel("column-explorer")}
+                className="print:hidden"
               >
                 <ChartColumnStacked
                   className={cn(

package/src/components/data-table/download-actions.tsx

@@ -87,7 +87,12 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
   const { locale } = useLocale();
 
   const button = (
-    <Button data-testid="download-as-button" size="xs" variant="link">
+    <Button
+      data-testid="download-as-button"
+      size="xs"
+      variant="link"
+      className="print:hidden"
+    >
       Download <ChevronDownIcon className="w-3 h-3 ml-1" />
     </Button>
   );
@@ -146,7 +151,7 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild={true}>{button}</DropdownMenuTrigger>
-      <DropdownMenuContent side="bottom" className="no-print">
+      <DropdownMenuContent side="bottom" className="print:hidden">
         {options.map((option) => (
           <DropdownMenuItem
             key={option.label}

package/src/components/data-table/pagination.tsx

@@ -67,7 +67,7 @@ export const DataTablePagination = <TData,>({
             size="xs"
             data-testid="select-all-button"
             variant="link"
-            className="h-4"
+            className="h-4 print:hidden"
             onMouseDown={Events.preventFocus}
             onClick={() => {
               if (onSelectAllRowsChange) {
@@ -91,7 +91,7 @@ export const DataTablePagination = <TData,>({
             size="xs"
             data-testid="clear-selection-button"
             variant="link"
-            className="h-4"
+            className="h-4 print:hidden"
             onMouseDown={Events.preventFocus}
             onClick={() => {
               if (!isCellSelection) {
@@ -139,7 +139,7 @@ export const DataTablePagination = <TData,>({
 
   const renderPageSizeSelector = () => {
     return (
-      <div className="flex items-center gap-1 text-xs whitespace-nowrap mr-1">
+      <div className="flex items-center gap-1 text-xs whitespace-nowrap mr-1 print:hidden">
         <Select
           value={pageSize.toString()}
           onValueChange={(value) => table.setPageSize(Number(value))}
@@ -173,7 +173,7 @@ export const DataTablePagination = <TData,>({
         {showPageSizeSelector && renderPageSizeSelector()}
       </div>
 
-      <div className="flex items-end space-x-2">
+      <div className="flex items-end space-x-2 print:hidden">
         <Button
           size="xs"
           variant="outline"

package/src/components/debug/indicator.tsx

@@ -5,7 +5,7 @@ export const TailwindIndicator = () => {
   }
 
   return (
-    <div className="fixed bottom-10 right-0 z-50 flex items-center justify-center bg-gray-800 py-[2px] px-1 font-mono text-[10px] text-white font-semibold">
+    <div className="fixed bottom-10 right-0 z-50 flex items-center justify-center bg-gray-800 py-[2px] px-1 font-mono text-[10px] text-white font-semibold print:hidden">
       <div className="block sm:hidden">xs</div>
       <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
         sm

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

@@ -70,6 +70,7 @@ import { createShareableLink } from "@/core/wasm/share";
 import { isWasm } from "@/core/wasm/utils";
 import { copyToClipboard } from "@/utils/copy";
 import {
+  ADD_PRINTING_CLASS,
   downloadAsPDF,
   downloadBlob,
   downloadHTMLAsImage,
@@ -219,6 +220,8 @@ export function useNotebookActions() {
             await downloadHTMLAsImage({
               element: app,
               filename: document.title,
+              // Add body.printing ONLY when converting the whole notebook to a screenshot
+              prepare: ADD_PRINTING_CLASS,
             });
           },
         },
@@ -241,8 +244,7 @@ export function useNotebookActions() {
 
               const downloadPDF = async (progress: ProgressState) => {
                 await updateCellOutputsWithScreenshots({
-                  takeScreenshots: () =>
-                    takeScreenshots({ progress, snappy: false }),
+                  takeScreenshots: () => takeScreenshots({ progress }),
                   updateCellOutputs,
                 });
                 await downloadAsPDF({

package/src/components/editor/chrome/panels/context-aware-panel/context-aware-panel.tsx

@@ -123,7 +123,7 @@ export const ContextAwarePanel: React.FC = () => {
     <>
       <PanelResizeHandle
         onDragging={handleDragging}
-        className="resize-handle border-border z-20 no-print border-l"
+        className="resize-handle border-border z-20 print:hidden border-l"
       />
       <Panel defaultSize={20} minSize={15} maxSize={80}>
         {renderBody()}

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -227,7 +227,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     <PanelResizeHandle
       onDragging={handleDragging}
       className={cn(
-        "border-border no-print z-10",
+        "border-border print:hidden z-10",
         isSidebarOpen ? "resize-handle" : "resize-handle-collapsed",
         "vertical",
       )}
@@ -238,7 +238,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     <PanelResizeHandle
       onDragging={handleDragging}
       className={cn(
-        "border-border no-print z-20",
+        "border-border print:hidden z-20",
         isDeveloperPanelOpen ? "resize-handle" : "resize-handle-collapsed",
         "horizontal",
       )}
@@ -382,7 +382,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
       collapsedSize={0}
       collapsible={true}
       className={cn(
-        "dark:bg-(--slate-1) no-print print:hidden hide-on-fullscreen",
+        "dark:bg-(--slate-1) print:hidden hide-on-fullscreen",
         isSidebarOpen && "border-r border-l border-(--slate-7)",
       )}
       minSize={10}
@@ -427,7 +427,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
       collapsedSize={0}
       collapsible={true}
       className={cn(
-        "dark:bg-(--slate-1) no-print print:hidden hide-on-fullscreen",
+        "dark:bg-(--slate-1) print:hidden hide-on-fullscreen",
         isDeveloperPanelOpen && "border-t",
       )}
       minSize={10}

package/src/components/editor/chrome/wrapper/footer.tsx

@@ -57,7 +57,7 @@ export const Footer: React.FC = () => {
   });
 
   return (
-    <footer className="h-10 py-1 gap-1 bg-background flex items-center text-muted-foreground text-md pl-2 pr-1 border-t border-border select-none no-print text-sm z-50 print:hidden hide-on-fullscreen overflow-x-auto overflow-y-hidden scrollbar-thin">
+    <footer className="h-10 py-1 gap-1 bg-background flex items-center text-muted-foreground text-md pl-2 pr-1 border-t border-border select-none print:hidden text-sm z-50 hide-on-fullscreen overflow-x-auto overflow-y-hidden scrollbar-thin">
       <FooterItem
         className="h-full"
         tooltip={

package/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -115,7 +115,7 @@ export const Sidebar: React.FC = () => {
   ]);
 
   return (
-    <div className="h-full pt-4 pb-1 px-1 flex flex-col items-start text-muted-foreground text-md select-none no-print text-sm z-50 dark:bg-background print:hidden hide-on-fullscreen">
+    <div className="h-full pt-4 pb-1 px-1 flex flex-col items-start text-muted-foreground text-md select-none text-sm z-50 dark:bg-background print:hidden hide-on-fullscreen">
       <ReorderableList<PanelDescriptor>
         value={sidebarItems}
         setValue={handleSetSidebarItems}

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

@@ -212,7 +212,7 @@ const StopControlButton = ({
 };
 
 const topRightControls =
-  "absolute top-3 right-5 m-0 flex items-center gap-2 min-h-[28px] no-print pointer-events-auto z-30 print:hidden";
+  "absolute top-3 right-5 m-0 flex items-center gap-2 min-h-[28px] print:hidden pointer-events-auto z-30";
 
 const bottomRightControls =
-  "absolute bottom-5 right-5 flex flex-col gap-2 items-center no-print pointer-events-auto z-30 print:hidden";
+  "absolute bottom-5 right-5 flex flex-col gap-2 items-center print:hidden pointer-events-auto z-30";

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

@@ -111,7 +111,7 @@ export const NotebookMenuDropdown: React.FC<Props> = ({
       <DropdownMenuTrigger asChild={true} disabled={disabled}>
         {button}
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="no-print w-[240px]">
+      <DropdownMenuContent align="end" className="print:hidden w-[240px]">
         {actions.map((action) => {
           if (action.hidden || action.redundant) {
             return null;

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

@@ -510,7 +510,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
     return (
       <DropdownMenuContent
         align="end"
-        className="no-print w-[220px]"
+        className="print:hidden w-[220px]"
         onClick={(e) => e.stopPropagation()}
         onCloseAutoFocus={(e) => e.preventDefault()}
       >

package/src/components/editor/header/status.tsx

@@ -34,7 +34,7 @@ export const StatusOverlay: React.FC<{
   );
 };
 
-const topLeftStatus = "no-print pointer-events-auto hover:cursor-pointer";
+const topLeftStatus = "print:hidden pointer-events-auto hover:cursor-pointer";
 
 const DisconnectedIcon = () => (
   <Tooltip content="App disconnected">

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -41,7 +41,11 @@ import { downloadAsHTML } from "@/core/static/download-html";
 import { isStaticNotebook } from "@/core/static/static-state";
 import { isWasm } from "@/core/wasm/utils";
 import { cn } from "@/utils/cn";
-import { downloadBlob, downloadHTMLAsImage } from "@/utils/download";
+import {
+  ADD_PRINTING_CLASS,
+  downloadBlob,
+  downloadHTMLAsImage,
+} from "@/utils/download";
 import { Filenames } from "@/utils/filenames";
 import { FloatingOutline } from "../../chrome/panels/outline/floating-outline";
 import { cellDomProps } from "../../common";
@@ -185,7 +189,12 @@ const ActionButtons: React.FC<{
     if (!app) {
       return;
     }
-    await downloadHTMLAsImage({ element: app, filename: document.title });
+    await downloadHTMLAsImage({
+      element: app,
+      filename: document.title,
+      // Add body.printing ONLY when converting the whole notebook to a screenshot
+      prepare: ADD_PRINTING_CLASS,
+    });
   };
 
   const handleDownloadAsHTML = async () => {
@@ -271,7 +280,7 @@ const ActionButtons: React.FC<{
     <div
       data-testid="notebook-actions-dropdown"
       className={cn(
-        "right-0 top-0 z-50 m-4 no-print flex gap-2 print:hidden",
+        "right-0 top-0 z-50 m-4 print:hidden flex gap-2",
         // If the notebook is static, we have a banner at the top, so
         // we can't use fixed positioning. Ideally this is sticky, but the
         // current dom structure makes that difficult.
@@ -284,7 +293,7 @@ const ActionButtons: React.FC<{
             <MoreHorizontalIcon className="w-4 h-4" />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="no-print w-[220px]">
+        <DropdownMenuContent align="end" className="print:hidden w-[220px]">
           {actions}
         </DropdownMenuContent>
       </DropdownMenu>

package/src/components/home/components.tsx

@@ -80,7 +80,7 @@ export const OpenTutorialDropDown: React.FC = () => {
           <CaretDownIcon className="w-3 h-3 ml-1" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent side="bottom" align="end" className="no-print">
+      <DropdownMenuContent side="bottom" align="end" className="print:hidden">
         {Objects.entries(TUTORIALS).map(
           ([tutorialId, [label, Icon, description]]) => (
             <DropdownMenuItem

package/src/components/static-html/static-banner.tsx

@@ -36,7 +36,7 @@ export const StaticBanner: React.FC = () => {
 
   return (
     <div
-      className="px-4 py-2 bg-(--sky-2) border-b border-(--sky-7) text-(--sky-11) flex justify-between items-center gap-4 no-print text-sm"
+      className="px-4 py-2 bg-(--sky-2) border-b border-(--sky-7) text-(--sky-11) flex justify-between items-center gap-4 print:hidden text-sm"
       data-testid="static-notebook-banner"
     >
       <span>

package/src/components/ui/dropdown-menu.tsx

@@ -83,7 +83,7 @@ const DropdownMenuContent = React.forwardRef<
         sideOffset={sideOffset}
         className={cn(
           menuContentCommon(),
-          "animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden",
           scrollable && "overflow-auto",
           className,
         )}

package/src/components/ui/table.tsx

@@ -7,7 +7,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="w-full overflow-auto scrollbar-thin flex-1">
+  <div className="w-full overflow-auto scrollbar-thin flex-1 print:overflow-hidden">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}

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

@@ -25,7 +25,7 @@ const defaultValues: ExperimentalFeatures = {
   chat_modes: false,
   cache_panel: false,
   external_agents: import.meta.env.DEV,
-  server_side_pdf_export: false,
+  server_side_pdf_export: true,
 };
 
 export function getFeatureFlag<T extends keyof ExperimentalFeatures>(

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

@@ -10,6 +10,7 @@ import { CellOutputId } from "@/core/cells/ids";
 import type { CellRuntimeState } from "@/core/cells/types";
 import { ProgressState } from "@/utils/progress";
 import {
+  captureTracker,
   updateCellOutputsWithScreenshots,
   useEnrichCellOutputs,
 } from "../hooks";
@@ -52,6 +53,7 @@ describe("useEnrichCellOutputs", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     store = createStore();
+    captureTracker.reset();
   });
 
   const wrapper = ({ children }: { children: ReactNode }) =>
@@ -103,7 +105,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     expect(output).toEqual({});
     expect(document.getElementById).not.toHaveBeenCalled();
@@ -135,7 +137,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     expect(document.getElementById).toHaveBeenCalledWith(
       CellOutputId.create(cellId),
@@ -152,50 +154,6 @@ describe("useEnrichCellOutputs", () => {
     });
   });
 
-  it("should pass snappy=true to toPng with includeStyleProperties", async () => {
-    const cellId = "cell-1" as CellId;
-    const mockElement = document.createElement("div");
-    const mockDataUrl = "data:image/png;base64,mockImageData";
-
-    // Mock document.getElementById
-    vi.spyOn(document, "getElementById").mockReturnValue(mockElement);
-    vi.mocked(toPng).mockResolvedValue(mockDataUrl);
-
-    setCellsRuntime(
-      createMockCellRuntimes({
-        [cellId]: {
-          output: {
-            channel: "output",
-            mimetype: "text/html",
-            data: "<div>Chart</div>",
-            timestamp: 0,
-          },
-        },
-      }),
-    );
-
-    const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
-
-    const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: true });
-
-    expect(document.getElementById).toHaveBeenCalledWith(
-      CellOutputId.create(cellId),
-    );
-    // When snappy=true, includeStyleProperties should be set
-    expect(toPng).toHaveBeenCalledWith(
-      mockElement,
-      expect.objectContaining({
-        filter: expect.any(Function),
-        onImageErrorHandler: expect.any(Function),
-        includeStyleProperties: expect.any(Array),
-      }),
-    );
-    expect(output).toEqual({
-      [cellId]: ["image/png", mockDataUrl],
-    });
-  });
-
   it("should skip cells where output has not changed", async () => {
     const cellId = "cell-1" as CellId;
     const mockElement = document.createElement("div");
@@ -224,7 +182,7 @@ describe("useEnrichCellOutputs", () => {
 
     // First call - should capture
     let takeScreenshots = result.current;
-    let output = await takeScreenshots({ progress, snappy: false });
+    let output = await takeScreenshots({ progress });
     expect(output).toEqual({ [cellId]: ["image/png", mockDataUrl] });
     expect(toPng).toHaveBeenCalledTimes(1);
 
@@ -233,7 +191,7 @@ describe("useEnrichCellOutputs", () => {
 
     // Second call with same output - should not capture again
     takeScreenshots = result.current;
-    output = await takeScreenshots({ progress, snappy: false });
+    output = await takeScreenshots({ progress });
     expect(output).toEqual({}); // Empty because output hasn't changed
     expect(toPng).toHaveBeenCalledTimes(1); // Still only 1 call
   });
@@ -262,7 +220,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     expect(output).toEqual({}); // Failed screenshot should be filtered out
     expect(Logger.error).toHaveBeenCalledWith(
@@ -271,6 +229,50 @@ describe("useEnrichCellOutputs", () => {
     );
   });
 
+  it("should retry failed screenshots on next call", async () => {
+    const cellId = "cell-1" as CellId;
+    const mockElement = document.createElement("div");
+    const error = new Error("Screenshot failed");
+    const mockDataUrl = "data:image/png;base64,retrySuccess";
+
+    vi.spyOn(document, "getElementById").mockReturnValue(mockElement);
+    // First call fails, second call succeeds
+    vi.mocked(toPng)
+      .mockRejectedValueOnce(error)
+      .mockResolvedValueOnce(mockDataUrl);
+
+    setCellsRuntime(
+      createMockCellRuntimes({
+        [cellId]: {
+          output: {
+            channel: "output",
+            mimetype: "text/html",
+            data: "<div>Chart</div>",
+            timestamp: 0,
+          },
+        },
+      }),
+    );
+
+    const { result, rerender } = renderHook(() => useEnrichCellOutputs(), {
+      wrapper,
+    });
+
+    // First call - screenshot fails
+    let takeScreenshots = result.current;
+    let output = await takeScreenshots({ progress });
+    expect(output).toEqual({});
+    expect(Logger.error).toHaveBeenCalled();
+
+    rerender();
+
+    // Second call - should retry since the first one failed
+    takeScreenshots = result.current;
+    output = await takeScreenshots({ progress });
+    expect(output).toEqual({ [cellId]: ["image/png", mockDataUrl] });
+    expect(toPng).toHaveBeenCalledTimes(2);
+  });
+
   it("should handle missing DOM elements", async () => {
     const cellId = "cell-1" as CellId;
 
@@ -292,7 +294,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     expect(output).toEqual({});
     expect(Logger.error).toHaveBeenCalledWith(
@@ -341,7 +343,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     expect(output).toEqual({
       [cell1]: ["image/png", mockDataUrl1],
@@ -387,7 +389,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     // Only the successful screenshot should be in the result
     expect(output).toEqual({
@@ -429,13 +431,13 @@ describe("useEnrichCellOutputs", () => {
 
     // First screenshot
     let takeScreenshots = result.current;
-    let output = await takeScreenshots({ progress, snappy: false });
+    let output = await takeScreenshots({ progress });
     expect(output).toEqual({ [cellId]: ["image/png", mockDataUrl1] });
 
     // Second call - same output, should not be captured
     rerender();
     takeScreenshots = result.current;
-    output = await takeScreenshots({ progress, snappy: false });
+    output = await takeScreenshots({ progress });
     expect(output).toEqual({});
 
     // Third call - output changed, should be captured
@@ -454,7 +456,7 @@ describe("useEnrichCellOutputs", () => {
 
     rerender();
     takeScreenshots = result.current;
-    output = await takeScreenshots({ progress, snappy: false });
+    output = await takeScreenshots({ progress });
     expect(output).toEqual({ [cellId]: ["image/png", mockDataUrl2] });
     expect(toPng).toHaveBeenCalledTimes(2);
   });
@@ -494,7 +496,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     // None of these should trigger screenshots
     expect(output).toEqual({});
@@ -519,7 +521,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     expect(output).toEqual({});
     expect(document.getElementById).not.toHaveBeenCalled();
@@ -551,7 +553,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     // Verify the exact return type structure
     expect(output).toHaveProperty(cellId);