@marimo-team/frontend 0.20.2 → 0.20.3-dev77

package/src/components/dependency-graph/utils/__tests__/cell-preview.test.ts

@@ -0,0 +1,143 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { extractCellPreview } from "../cell-preview";
+
+describe("extractCellPreview", () => {
+  describe("markdown cells", () => {
+    it("extracts heading from f-string triple-double-quoted markdown", () => {
+      expect(extractCellPreview('mo.md(f"""# Heading\nbody""")')).toEqual({
+        text: "# Heading",
+        type: "markdown",
+      });
+    });
+
+    it("extracts text from r-prefixed triple-double-quoted markdown", () => {
+      expect(extractCellPreview('mo.md(r"""text""")')).toEqual({
+        text: "text",
+        type: "markdown",
+      });
+    });
+
+    it("skips leading empty lines", () => {
+      expect(extractCellPreview('mo.md(f"""\n# Heading\n""")')).toEqual({
+        text: "# Heading",
+        type: "markdown",
+      });
+    });
+
+    it("returns undefined text for empty markdown", () => {
+      expect(extractCellPreview('mo.md("")')).toEqual({
+        text: undefined,
+        type: "markdown",
+      });
+    });
+
+    it("works with single-quoted strings", () => {
+      expect(extractCellPreview("mo.md('single line')")).toEqual({
+        text: "single line",
+        type: "markdown",
+      });
+    });
+
+    it("works with triple-single-quoted strings", () => {
+      expect(extractCellPreview("mo.md('''some text''')")).toEqual({
+        text: "some text",
+        type: "markdown",
+      });
+    });
+
+    it("works with fr prefix", () => {
+      expect(extractCellPreview('mo.md(fr"""# Title\n{x}""")')).toEqual({
+        text: "# Title",
+        type: "markdown",
+      });
+    });
+
+    it("works with no prefix", () => {
+      expect(extractCellPreview('mo.md("""plain text""")')).toEqual({
+        text: "plain text",
+        type: "markdown",
+      });
+    });
+  });
+
+  describe("SQL cells", () => {
+    it("extracts SQL from assignment with f-string", () => {
+      expect(
+        extractCellPreview('_df = mo.sql(f"""SELECT * FROM cars""")'),
+      ).toEqual({
+        text: "SELECT * FROM cars",
+        type: "sql",
+      });
+    });
+
+    it("skips leading newlines in SQL", () => {
+      expect(
+        extractCellPreview('_df = mo.sql(f"""\nSELECT * FROM t\n""")'),
+      ).toEqual({
+        text: "SELECT * FROM t",
+        type: "sql",
+      });
+    });
+
+    it("returns first line of multi-line SQL", () => {
+      expect(
+        extractCellPreview(
+          '_df = mo.sql(f"""SELECT *\nFROM users\nWHERE id = 1""")',
+        ),
+      ).toEqual({
+        text: "SELECT *",
+        type: "sql",
+      });
+    });
+
+    it("handles SQL with engine kwarg after string", () => {
+      expect(
+        extractCellPreview('_df = mo.sql(f"""SELECT 1""", engine=my_engine)'),
+      ).toEqual({
+        text: "SELECT 1",
+        type: "sql",
+      });
+    });
+
+    it("returns undefined text for empty SQL string", () => {
+      expect(extractCellPreview('_df = mo.sql(f"""""")')).toEqual({
+        text: undefined,
+        type: "sql",
+      });
+    });
+  });
+
+  describe("Python fallback", () => {
+    it("returns first line of Python code", () => {
+      expect(extractCellPreview("import pandas as pd")).toEqual({
+        text: "import pandas as pd",
+        type: "python",
+      });
+    });
+
+    it("returns first line of multi-line Python", () => {
+      expect(extractCellPreview("x = 1\ny = 2")).toEqual({
+        text: "x = 1",
+        type: "python",
+      });
+    });
+
+    it("returns undefined text for empty string", () => {
+      // MarkdownParser.isSupported("") returns true, so empty cells
+      // are classified as markdown — the text is undefined either way.
+      expect(extractCellPreview("")).toEqual({
+        text: undefined,
+        type: "markdown",
+      });
+    });
+
+    it("returns undefined text for whitespace-only string", () => {
+      expect(extractCellPreview("   \n  ")).toEqual({
+        text: undefined,
+        type: "markdown",
+      });
+    });
+  });
+});

package/src/components/dependency-graph/utils/cell-preview.ts

@@ -0,0 +1,46 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { MarkdownParser, SQLParser } from "@marimo-team/smart-cells";
+
+export interface CellPreview {
+  text: string | undefined;
+  type: "python" | "markdown" | "sql";
+}
+
+const markdownParser = new MarkdownParser();
+const sqlParser = new SQLParser();
+
+function firstNonEmptyLine(content: string): string | undefined {
+  for (const line of content.split("\n")) {
+    const trimmed = line.trim();
+    if (trimmed.length > 0) {
+      return trimmed;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Extract a human-readable preview and cell type from raw cell code.
+ *
+ * For markdown cells (`mo.md(...)`) and SQL cells (`mo.sql(...)`),
+ * returns the inner content's first non-empty line instead of the
+ * Python wrapper boilerplate.
+ */
+export function extractCellPreview(code: string): CellPreview {
+  const trimmed = code.trim();
+
+  if (markdownParser.isSupported(trimmed)) {
+    const { code: inner } = markdownParser.transformIn(trimmed);
+    return { text: firstNonEmptyLine(inner), type: "markdown" };
+  }
+
+  if (sqlParser.isSupported(trimmed)) {
+    const { code: inner } = sqlParser.transformIn(trimmed);
+    return { text: firstNonEmptyLine(inner), type: "sql" };
+  }
+
+  // Python fallback: first line of raw code
+  const firstLine = trimmed.split("\n")[0]?.trim();
+  return { text: firstLine || undefined, type: "python" };
+}

package/src/components/editor/Output.tsx

@@ -1,12 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import React, {
-  memo,
-  Suspense,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { memo, Suspense, useMemo, useRef } from "react";
 import { type CellId, CellOutputId } from "@/core/cells/ids";
 import type { CellOutput, OutputMessage } from "@/core/kernel/messages";
 import { cn } from "@/utils/cn";
@@ -30,6 +23,7 @@ import { tooltipHandler } from "@/components/charts/tooltip";
 import { useExpandedOutput } from "@/core/cells/outputs";
 import { viewStateAtom } from "@/core/mode";
 import { useIframeCapabilities } from "@/hooks/useIframeCapabilities";
+import { useOverflowDetection } from "@/hooks/useOverflowDetection";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { Banner } from "@/plugins/impl/common/error-banner";
 import type { TopLevelFacetedUnitSpec } from "@/plugins/impl/data-explorer/queries/types";
@@ -427,28 +421,9 @@ const ExpandableOutput = React.memo(
   }) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const [isExpanded, setIsExpanded] = useExpandedOutput(cellId);
-    const [isOverflowing, setIsOverflowing] = useState(false);
+    const isOverflowing = useOverflowDetection(containerRef);
     const { hasFullscreen } = useIframeCapabilities();
 
-    // Create resize observer to detect overflow
-    useEffect(() => {
-      if (!containerRef.current) {
-        return;
-      }
-      const el = containerRef.current;
-
-      const detectOverflow = () => {
-        setIsOverflowing(el.scrollHeight > el.clientHeight);
-      };
-
-      const resizeObserver = new ResizeObserver(detectOverflow);
-      resizeObserver.observe(el);
-
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }, [props.id]);
-
     return (
       <>
         <div>

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/cell/cell-actions.tsx

@@ -64,6 +64,10 @@ const CellActionsDropdownInternal = (
   const buttonRef = useRef<HTMLButtonElement>(null);
   const actions = useCellActionButtons({ cell: props, closePopover });
 
+  const visibleActions = actions
+    .map((group) => group.filter((action) => !action.redundant))
+    .filter((group) => group.length > 0);
+
   // store the last focused element so we can restore it when the popover closes
   const restoreFocus = useRestoreFocus();
 
@@ -112,13 +116,10 @@ const CellActionsDropdownInternal = (
         />
         <CommandList>
           <CommandEmpty>No results</CommandEmpty>
-          {actions.map((group, i) => (
+          {visibleActions.map((group, i) => (
             <Fragment key={i}>
               <CommandGroup key={i}>
                 {group.map((action) => {
-                  if (action.redundant) {
-                    return null;
-                  }
                   let body = (
                     <div className="flex items-center flex-1">
                       {action.icon && (
@@ -162,7 +163,7 @@ const CellActionsDropdownInternal = (
                   );
                 })}
               </CommandGroup>
-              {i < actions.length - 1 && <CommandSeparator />}
+              {i < visibleActions.length - 1 && <CommandSeparator />}
             </Fragment>
           ))}
         </CommandList>

package/src/components/editor/cell/cell-context-menu.tsx

@@ -26,6 +26,7 @@ import { isOutputEmpty } from "@/core/cells/outputs";
 import { goToDefinitionAtCursorPosition } from "@/core/codemirror/go-to-definition/utils";
 import { sendToPanelManager } from "@/core/vscode/vscode-bindings";
 import { copyToClipboard } from "@/utils/copy";
+import { getImageExtension } from "@/utils/filenames";
 import { Logger } from "@/utils/Logger";
 import type { ActionButton } from "../actions/types";
 import {
@@ -154,8 +155,9 @@ export const CellActionsContextMenu = ({
       handle: () => {
         if (imageRightClicked) {
           const link = document.createElement("a");
-          link.download = "image.png";
           link.href = imageRightClicked.src;
+          const ext = getImageExtension(imageRightClicked.src) || "png";
+          link.download = `image.${ext}`;
           link.click();
         }
       },
@@ -174,6 +176,12 @@ export const CellActionsContextMenu = ({
 
   const allActions: ActionButton[][] = [DEFAULT_CONTEXT_MENU_ITEMS, ...actions];
 
+  const visibleActions = allActions
+    .map((group) =>
+      group.filter((action) => !action.hidden && !action.redundant),
+    )
+    .filter((group) => group.length > 0);
+
   return (
     <ContextMenu>
       <ContextMenuTrigger
@@ -189,13 +197,9 @@ export const CellActionsContextMenu = ({
         {children}
       </ContextMenuTrigger>
       <ContextMenuContent className="w-[300px]" scrollable={true}>
-        {allActions.map((group, i) => (
+        {visibleActions.map((group, i) => (
           <Fragment key={i}>
             {group.map((action) => {
-              if (action.hidden || action.redundant) {
-                return null;
-              }
-
               let body = (
                 <div className="flex items-center flex-1">
                   {action.icon && (
@@ -256,7 +260,7 @@ export const CellActionsContextMenu = ({
                 </Fragment>
               );
             })}
-            {i < allActions.length - 1 && <ContextMenuSeparator />}
+            {i < visibleActions.length - 1 && <ContextMenuSeparator />}
           </Fragment>
         ))}
       </ContextMenuContent>

package/src/components/editor/chrome/panels/components.tsx

@@ -0,0 +1,88 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import * as React from "react";
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/utils/cn";
+
+/**
+ * Styled AccordionItem for sidebar panels.
+ * Applies border-b by default; set `lastItem` to remove it on the final item.
+ */
+const PanelAccordionItem = React.forwardRef<
+  React.ComponentRef<typeof AccordionItem>,
+  React.ComponentPropsWithoutRef<typeof AccordionItem> & {
+    lastItem?: boolean;
+  }
+>(({ className, lastItem, ...props }, ref) => (
+  <AccordionItem
+    ref={ref}
+    className={cn(lastItem && "border-b-0", className)}
+    {...props}
+  />
+));
+PanelAccordionItem.displayName = "PanelAccordionItem";
+
+/**
+ * Styled AccordionTrigger for sidebar panels.
+ * Applies compact uppercase styling and wraps children in a flex container
+ * with gap for icon + label layout.
+ */
+const PanelAccordionTrigger = React.forwardRef<
+  React.ComponentRef<typeof AccordionTrigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionTrigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionTrigger
+    ref={ref}
+    className={cn(
+      "px-3 py-2 text-xs font-semibold uppercase tracking-wide hover:no-underline",
+      className,
+    )}
+    {...props}
+  >
+    <span className="flex items-center gap-2">{children}</span>
+  </AccordionTrigger>
+));
+PanelAccordionTrigger.displayName = "PanelAccordionTrigger";
+
+/**
+ * Styled AccordionContent for sidebar panels.
+ * Removes default wrapper padding.
+ */
+const PanelAccordionContent = React.forwardRef<
+  React.ComponentRef<typeof AccordionContent>,
+  React.ComponentPropsWithoutRef<typeof AccordionContent>
+>(({ wrapperClassName, ...props }, ref) => (
+  <AccordionContent
+    ref={ref}
+    wrapperClassName={cn("p-0", wrapperClassName)}
+    {...props}
+  />
+));
+PanelAccordionContent.displayName = "PanelAccordionContent";
+
+/**
+ * Styled Badge for sidebar panels.
+ */
+const PanelBadge = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Badge>) => (
+  <Badge
+    variant="secondary"
+    className={cn("py-0 px-1.5 text-[10px]", className)}
+    {...props}
+  />
+);
+PanelBadge.displayName = "PanelBadge";
+
+export {
+  PanelAccordionItem,
+  PanelAccordionTrigger,
+  PanelAccordionContent,
+  PanelBadge,
+};