@marimo-team/frontend 0.23.16-dev3 → 0.23.16-dev34

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

@@ -25,11 +25,11 @@ import { copyToClipboard } from "@/utils/copy";
 import type { Base64String } from "@/utils/json/base64";
 import { downloadFile } from "./download";
 import { FilePreviewHeader } from "./file-header";
-import {
-  FileContentRenderer,
-  isMediaMime,
-  MIME_TO_LANGUAGE,
-} from "./renderers";
+import { FilePreviewMetadata } from "./file-preview-metadata";
+import { getFileRenderMode } from "./file-render-mode";
+import { FileContentRenderer } from "./renderers";
+
+export const MAX_FILE_PREVIEW_BYTES = 10 * 1024 * 1024;
 
 interface Props {
   file: FileInfo;
@@ -50,9 +50,15 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
 
   const { data, isPending, error, setData, refetch } =
     useAsyncData(async () => {
-      const details = await sendFileDetails({ path: file.path });
-      const contents = details.contents || "";
-      setInternalValue(unsavedContentsForFile.get(file.path) || contents);
+      const details = await sendFileDetails({
+        path: file.path,
+        maxBytes: MAX_FILE_PREVIEW_BYTES,
+      });
+      const mode = getFileRenderMode(details.mimeType, details.isBase64);
+      if (!details.isTooLarge && mode === "text") {
+        const contents = details.contents || "";
+        setInternalValue(unsavedContentsForFile.get(file.path) ?? contents);
+      }
       return details;
     }, [file.path]);
 
@@ -72,13 +78,19 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
     );
   };
 
-  // On file change or unmount, save the unsaved contents
+  // On file change or unmount, save the unsaved contents. Only editable text
+  // previews participate in editor state; oversized and non-text responses
+  // carry no draft to preserve.
   // We use a ref for internalValue so we don't call this effect on each keystroke
   const internalValueRef = useRef<string>(internalValue);
   internalValueRef.current = internalValue;
   useEffect(() => {
     return () => {
-      if (!data?.contents) {
+      if (
+        data?.contents == null ||
+        data.isTooLarge ||
+        getFileRenderMode(data.mimeType, data.isBase64) !== "text"
+      ) {
         return;
       }
       const draft = internalValueRef.current;
@@ -88,7 +100,13 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
         unsavedContentsForFile.set(file.path, draft);
       }
     };
-  }, [file.path, data?.contents]);
+  }, [
+    file.path,
+    data?.contents,
+    data?.isTooLarge,
+    data?.mimeType,
+    data?.isBase64,
+  ]);
 
   if (error) {
     return <ErrorBanner error={error} />;
@@ -99,7 +117,10 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   }
 
   const mimeType = data.mimeType || "text/plain";
-  const isEditable = mimeType in MIME_TO_LANGUAGE;
+  const renderMode = getFileRenderMode(data.mimeType, data.isBase64);
+  const isText = renderMode === "text";
+  const isCsv = renderMode === "csv";
+  const isMedia = renderMode === "media";
   const isActiveNotebook =
     currentNotebookFilename &&
     data.file.isMarimoFile &&
@@ -108,22 +129,27 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
       // but this is an okay heuristic for now.
       file.path.endsWith(`/${currentNotebookFilename}`));
 
-  if (!data.contents && !isEditable) {
-    // Show details instead of contents
-    return (
-      <div className="grid grid-cols-2 gap-2 p-6">
-        <div className="font-bold text-muted-foreground">Name</div>
-        <div>{data.file.name}</div>
-        <div className="font-bold text-muted-foreground">Type</div>
-        <div>{mimeType}</div>
-      </div>
-    );
-  }
-
   const handleDownload = async () => {
     await downloadFile(file.path, data.file.name);
   };
 
+  const saveKeymapExtension = keymap.of([
+    {
+      key: hotkeys.getHotkey("global.save").key,
+      stopPropagation: true,
+      run: () => {
+        if (internalValue !== data.contents) {
+          void handleSaveFile();
+          return true;
+        }
+        return false;
+      },
+    },
+  ]);
+
+  // Defined before the metadata-only returns so refresh, download, and
+  // open-notebook stay available while edit-only copy/save are withheld from
+  // non-text previews.
   const header = (
     <FilePreviewHeader
       filename={data.file.name}
@@ -142,7 +168,7 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
               </Button>
             </Tooltip>
           )}
-          {!isMediaMime(mimeType) && (
+          {isText && (
             <>
               <Tooltip content="Copy contents to clipboard">
                 <Button
@@ -172,8 +198,23 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
     />
   );
 
-  const isMedia = isMediaMime(mimeType);
-  const isText = !isMedia && mimeType !== "text/csv";
+  if (data.isTooLarge || renderMode === "unsupported") {
+    return (
+      <>
+        {header}
+        <FilePreviewMetadata
+          file={data.file}
+          mimeType={mimeType}
+          message={
+            data.isTooLarge
+              ? "File is too large to preview."
+              : "This file type cannot be previewed."
+          }
+          onDownload={disableFileDownloads ? undefined : handleDownload}
+        />
+      </>
+    );
+  }
 
   const warningBanner = isText && isActiveNotebook && (
     <Alert variant="warning" className="rounded-none">
@@ -192,35 +233,20 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
       <FileContentRenderer
         mimeType={mimeType}
         contents={
-          isMedia
-            ? undefined
-            : isText
-              ? internalValue
-              : (data.contents ?? undefined)
+          isText
+            ? internalValue
+            : isCsv
+              ? (data.contents ?? undefined)
+              : undefined
         }
         mediaSource={
-          isMedia
+          isMedia && data.contents
             ? { base64: data.contents as Base64String, mime: mimeType }
             : undefined
         }
         readOnly={!isText}
-        onChange={setInternalValue}
-        extensions={[
-          // Command S for save
-          keymap.of([
-            {
-              key: hotkeys.getHotkey("global.save").key,
-              stopPropagation: true,
-              run: () => {
-                if (internalValue !== data.contents) {
-                  handleSaveFile();
-                  return true;
-                }
-                return false;
-              },
-            },
-          ]),
-        ]}
+        onChange={isText ? setInternalValue : undefined}
+        extensions={isText ? [saveKeymapExtension] : []}
       />
     </>
   );

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

@@ -202,7 +202,7 @@ const ActionButtons: React.FC<{
     if (!app) {
       return;
     }
-    await downloadAsHTML({ filename: document.title, includeCode: true });
+    await downloadAsHTML({ includeCode: true });
   };
 
   const handleDownloadAsPython = async () => {

package/src/components/slides/__tests__/cell-output-block.test.tsx

@@ -0,0 +1,40 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { CellOutputId } from "@/core/cells/ids";
+import { createCell, createCellRuntimeState } from "@/core/cells/types";
+import { CellOutputBlock } from "../reveal-component";
+
+describe("CellOutputBlock", () => {
+  it("renders the cell's data-cell-id and data-cell-name so it can be targeted by custom CSS", () => {
+    const id = cellId("test");
+    const cell = {
+      ...createCell({ id, name: "title" }),
+      ...createCellRuntimeState({
+        output: {
+          channel: "output",
+          mimetype: "text/plain",
+          data: "hello",
+          timestamp: 0,
+        },
+      }),
+    };
+
+    const { container } = render(
+      <TooltipProvider>
+        <CellOutputBlock cell={cell} />
+      </TooltipProvider>,
+    );
+
+    const cellElement = container.querySelector(`[data-cell-id="${id}"]`);
+    expect(cellElement).toBeTruthy();
+    expect(cellElement?.getAttribute("data-cell-name")).toBe("title");
+
+    // The wrapper's `data-cell-id` must coexist with the output's own
+    // `CellOutputId`-derived id, without colliding.
+    expect(document.getElementById(CellOutputId.create(id))).toBeTruthy();
+  });
+});

package/src/components/slides/__tests__/slide-cell-view.test.tsx

@@ -0,0 +1,33 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { beforeAll, describe, expect, it } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { cellId } from "@/__tests__/branded";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { createCell, createCellRuntimeState } from "@/core/cells/types";
+import { SlideCellReadOnlyView } from "../slide-cell-view";
+
+beforeAll(() => {
+  SetupMocks.resizeObserver();
+});
+
+describe("SlideCellReadOnlyView", () => {
+  it("renders the cell's data-cell-id and data-cell-name so it can be targeted by custom CSS", () => {
+    const id = cellId("test");
+    const cell = {
+      ...createCell({ id, name: "title", code: "x = 1" }),
+      ...createCellRuntimeState(),
+    };
+
+    const { container } = render(
+      <TooltipProvider>
+        <SlideCellReadOnlyView cell={cell} />
+      </TooltipProvider>,
+    );
+
+    const cellElement = container.querySelector(`[data-cell-id="${id}"]`);
+    expect(cellElement).toBeTruthy();
+    expect(cellElement?.getAttribute("data-cell-name")).toBe("title");
+  });
+});

package/src/components/slides/__tests__/slide-scroll-hint.test.tsx

@@ -0,0 +1,198 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  shouldShowScrollHint,
+  SlideScrollContainer,
+} from "../slide-scroll-hint";
+
+describe("shouldShowScrollHint", () => {
+  it("shows when content overflows and scroll is at the top", () => {
+    expect(
+      shouldShowScrollHint({
+        scrollHeight: 800,
+        clientHeight: 400,
+        scrollTop: 0,
+      }),
+    ).toBe(true);
+  });
+
+  it("hides when content fits", () => {
+    expect(
+      shouldShowScrollHint({
+        scrollHeight: 300,
+        clientHeight: 400,
+        scrollTop: 0,
+      }),
+    ).toBe(false);
+  });
+
+  it("hides after the user scrolls down", () => {
+    expect(
+      shouldShowScrollHint({
+        scrollHeight: 800,
+        clientHeight: 400,
+        scrollTop: 40,
+      }),
+    ).toBe(false);
+  });
+
+  it("ignores sub-pixel overflow", () => {
+    expect(
+      shouldShowScrollHint({
+        scrollHeight: 401,
+        clientHeight: 400,
+        scrollTop: 0,
+      }),
+    ).toBe(false);
+  });
+
+  it("still shows within the top threshold", () => {
+    expect(
+      shouldShowScrollHint({
+        scrollHeight: 800,
+        clientHeight: 400,
+        scrollTop: 8,
+      }),
+    ).toBe(true);
+  });
+});
+
+describe("SlideScrollContainer", () => {
+  const resizeObservers: Array<{
+    callback: ResizeObserverCallback;
+    observe: ReturnType<typeof vi.fn>;
+    disconnect: ReturnType<typeof vi.fn>;
+  }> = [];
+
+  beforeEach(() => {
+    resizeObservers.length = 0;
+    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+      cb(0);
+      return 0;
+    });
+    vi.stubGlobal("cancelAnimationFrame", vi.fn());
+    vi.stubGlobal(
+      "ResizeObserver",
+      class MockResizeObserver {
+        callback: ResizeObserverCallback;
+        observe = vi.fn();
+        unobserve = vi.fn();
+        disconnect = vi.fn();
+
+        constructor(callback: ResizeObserverCallback) {
+          this.callback = callback;
+          resizeObservers.push(this);
+        }
+      },
+    );
+    vi.stubGlobal(
+      "MutationObserver",
+      class MockMutationObserver {
+        observe = vi.fn();
+        disconnect = vi.fn();
+        takeRecords = vi.fn(() => []);
+      },
+    );
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  function stubOverflow(
+    el: HTMLElement,
+    metrics: {
+      scrollHeight: number;
+      clientHeight: number;
+      scrollTop?: number;
+    },
+  ) {
+    Object.defineProperty(el, "scrollHeight", {
+      configurable: true,
+      get: () => metrics.scrollHeight,
+    });
+    Object.defineProperty(el, "clientHeight", {
+      configurable: true,
+      get: () => metrics.clientHeight,
+    });
+    Object.defineProperty(el, "scrollTop", {
+      configurable: true,
+      get: () => metrics.scrollTop ?? 0,
+      set: (value: number) => {
+        metrics.scrollTop = value;
+      },
+    });
+  }
+
+  it("renders a scroll hint when content overflows", () => {
+    render(
+      <SlideScrollContainer>
+        <div>tall content</div>
+      </SlideScrollContainer>,
+    );
+
+    const container = screen.getByTestId("slide-scroll-container");
+    stubOverflow(container, { scrollHeight: 900, clientHeight: 400 });
+
+    act(() => {
+      for (const observer of resizeObservers) {
+        observer.callback([], observer as unknown as ResizeObserver);
+      }
+    });
+
+    expect(screen.getByTestId("slide-scroll-hint")).toBeTruthy();
+    expect(screen.getByText("Scroll for more")).toBeTruthy();
+  });
+
+  it("hides the hint after scrolling", () => {
+    const metrics = {
+      scrollHeight: 900,
+      clientHeight: 400,
+      scrollTop: 0,
+    };
+
+    render(
+      <SlideScrollContainer>
+        <div>tall content</div>
+      </SlideScrollContainer>,
+    );
+
+    const container = screen.getByTestId("slide-scroll-container");
+    stubOverflow(container, metrics);
+
+    act(() => {
+      for (const observer of resizeObservers) {
+        observer.callback([], observer as unknown as ResizeObserver);
+      }
+    });
+    expect(screen.getByTestId("slide-scroll-hint")).toBeTruthy();
+
+    act(() => {
+      metrics.scrollTop = 50;
+      container.dispatchEvent(new Event("scroll"));
+    });
+
+    expect(screen.queryByTestId("slide-scroll-hint")).toBeNull();
+  });
+
+  it("does not show a hint when content fits", () => {
+    render(
+      <SlideScrollContainer>
+        <div>short content</div>
+      </SlideScrollContainer>,
+    );
+
+    const container = screen.getByTestId("slide-scroll-container");
+    stubOverflow(container, { scrollHeight: 200, clientHeight: 400 });
+
+    act(() => {
+      for (const observer of resizeObservers) {
+        observer.callback([], observer as unknown as ResizeObserver);
+      }
+    });
+
+    expect(screen.queryByTestId("slide-scroll-hint")).toBeNull();
+  });
+});

package/src/components/slides/reveal-component.tsx

@@ -13,7 +13,9 @@ import useEvent from "react-use-event-hook";
 import { CodeIcon, ExpandIcon, EyeOffIcon } from "lucide-react";
 import { Deck, Fragment, Slide, Stack } from "@revealjs/react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { cellDomProps } from "@/components/editor/common";
 import { Slide as CellOutputSlide } from "@/components/slides/slide";
+import { SlideScrollContainer } from "@/components/slides/slide-scroll-hint";
 import { Button } from "@/components/ui/button";
 import { useFullScreenElement } from "@/components/ui/fullscreen";
 import { Tooltip } from "@/components/ui/tooltip";
@@ -303,6 +305,25 @@ function resolveSlideContentStyle(
   }
 }
 
+/**
+ * Renders a cell's output wrapped in a `data-cell-id`/`data-cell-name` div
+ * (see `cellDomProps`), so it can be targeted by custom CSS in the slides
+ * view just like it can in the vertical layout. The wrapper is required
+ * because `CellOutputSlide` sets its own `id` from `CellOutputId` (a
+ * different scheme than `HTMLCellId`) and its inner `OutputArea` uses
+ * `display: contents`, which can't be targeted for background/border styling.
+ */
+export const CellOutputBlock = ({ cell }: { cell: RuntimeCell }) => (
+  <div className="flex flex-col" {...cellDomProps(cell.id, cell.name)}>
+    <CellOutputSlide
+      cellId={cell.id}
+      status={cell.status}
+      output={cell.output}
+      stale={outputIsStale(cell, false)}
+    />
+  </div>
+);
+
 const SubslideView = ({
   subslide,
   resolveShowCode,
@@ -327,7 +348,7 @@ const SubslideView = ({
 
   return (
     <Slide>
-      <div className="h-full w-full overflow-auto flex">
+      <SlideScrollContainer>
         <div
           className={
             anyCodeShown
@@ -339,15 +360,7 @@ const SubslideView = ({
           {subslide.blocks.map((block, i) => {
             const rendered = block.cells.map((cell) => {
               if (!resolveShowCode(cell.id)) {
-                return (
-                  <CellOutputSlide
-                    key={cell.id}
-                    cellId={cell.id}
-                    status={cell.status}
-                    output={cell.output}
-                    stale={outputIsStale(cell, false)}
-                  />
-                );
+                return <CellOutputBlock key={cell.id} cell={cell} />;
               }
               return isEditable ? (
                 <SlideCellView key={cell.id} cell={cell} />
@@ -367,7 +380,7 @@ const SubslideView = ({
             return <ReactFragment key={i}>{rendered}</ReactFragment>;
           })}
         </div>
-      </div>
+      </SlideScrollContainer>
       {/* Outside any `.fragment`: shown only before any fragment is revealed. */}
       {slideLevel && <NotesAside text={slideLevel} />}
     </Slide>
@@ -405,14 +418,7 @@ const ParkedPreviewContent = ({
       <SlideCellReadOnlyView cell={cell} />
     );
   }
-  return (
-    <CellOutputSlide
-      cellId={cell.id}
-      status={cell.status}
-      output={cell.output}
-      stale={outputIsStale(cell, false)}
-    />
-  );
+  return <CellOutputBlock cell={cell} />;
 };
 
 // There is an upstream react bug in dev mode (https://github.com/facebook/react/issues/34840)

package/src/components/slides/slide-cell-view.tsx

@@ -202,7 +202,7 @@ export const SlideCellReadOnlyView = ({ cell }: { cell: RuntimeCell }) => {
   );
 
   const editor = (
-    <div className="marimo-cell">
+    <div className="marimo-cell" {...cellDomProps(cell.id, cell.name)}>
       <ReadonlyCode
         code={display.code}
         language={display.language}