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

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

@@ -0,0 +1,161 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { ChevronDownIcon } from "lucide-react";
+import {
+  type ReactNode,
+  type RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { cn } from "@/utils/cn";
+
+/** Pixels of scroll before the hint is considered dismissed. */
+const TOP_THRESHOLD_PX = 8;
+/** Ignore sub-pixel overflow from rounding / borders. */
+const OVERFLOW_TOLERANCE_PX = 1;
+
+/**
+ * Whether a scroll container should show a "more content below" affordance.
+ * Visible only when content overflows and the viewport is still near the top.
+ */
+export function shouldShowScrollHint(options: {
+  scrollHeight: number;
+  clientHeight: number;
+  scrollTop: number;
+}): boolean {
+  const { scrollHeight, clientHeight, scrollTop } = options;
+  const overflowing = scrollHeight > clientHeight + OVERFLOW_TOLERANCE_PX;
+  const atTop = scrollTop <= TOP_THRESHOLD_PX;
+  return overflowing && atTop;
+}
+
+/**
+ * Measure only up to the first unrevealed fragment so
+ * the hint reflects currently revealed content, not future fragment steps.
+ */
+function measureRevealedHeight(el: HTMLElement): number {
+  const firstUnrevealed = el.querySelector<HTMLElement>(
+    ".fragment:not(.visible)",
+  );
+  if (!firstUnrevealed) {
+    return el.scrollHeight;
+  }
+  const fragmentTop = firstUnrevealed.getBoundingClientRect().top;
+  return fragmentTop - el.getBoundingClientRect().top + el.scrollTop;
+}
+
+/**
+ * Tracks whether a scroll container is overflowing at the top, so we can
+ * surface a scroll affordance.
+ */
+function useScrollHint(
+  scrollRef: RefObject<HTMLElement | null>,
+  contentRef: RefObject<HTMLElement | null>,
+): boolean {
+  const [showHint, setShowHint] = useState(false);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    const content = contentRef.current;
+    if (!el || !content) {
+      return;
+    }
+
+    let frame = 0;
+    const update = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        setShowHint(
+          shouldShowScrollHint({
+            scrollHeight: measureRevealedHeight(el),
+            clientHeight: el.clientHeight,
+            scrollTop: el.scrollTop,
+          }),
+        );
+      });
+    };
+
+    update();
+
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(el);
+    resizeObserver.observe(content);
+
+    // Fragments reveal via class changes (opacity/visibility, no layout shift),
+    // which the ResizeObserver can't see, so re-check on class mutations. Only
+    // attach on slides that have fragments to avoid reacting to unrelated class
+    // churn (e.g. animating widgets) on the common non-fragment slide.
+    const fragmentObserver = content.querySelector(".fragment")
+      ? new MutationObserver(update)
+      : null;
+    fragmentObserver?.observe(content, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    el.addEventListener("scroll", update, { passive: true });
+
+    return () => {
+      cancelAnimationFrame(frame);
+      resizeObserver.disconnect();
+      fragmentObserver?.disconnect();
+      el.removeEventListener("scroll", update);
+    };
+  }, [scrollRef, contentRef]);
+
+  return showHint;
+}
+
+const ScrollHintOverlay = ({ className }: { className?: string }) => {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute inset-x-0 bottom-0 z-10 flex flex-col items-center",
+        "animate-in fade-in-0 duration-200",
+        className,
+      )}
+      data-testid="slide-scroll-hint"
+      aria-hidden={true}
+    >
+      <div className="h-16 w-full bg-linear-to-t from-background via-background/80 to-transparent" />
+      <div className="absolute bottom-3 flex items-center gap-1 rounded-full border border-border/60 bg-background/90 px-2.5 py-1 text-xs text-muted-foreground shadow-sm backdrop-blur-sm">
+        <ChevronDownIcon className="h-3.5 w-3.5" />
+        <span>Scroll for more</span>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Full-height scroll container for a slide. Shows a dismissible "Scroll for
+ * more" cue when content overflows the frame (easy to miss in fullscreen when
+ * OS overlay scrollbars are hidden).
+ */
+export const SlideScrollContainer = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const showHint = useScrollHint(scrollRef, contentRef);
+
+  return (
+    <div className={cn("relative h-full w-full", className)}>
+      <div
+        ref={scrollRef}
+        className="h-full w-full overflow-auto"
+        data-testid="slide-scroll-container"
+      >
+        <div ref={contentRef} className="flex w-full min-h-full">
+          {children}
+        </div>
+      </div>
+      {showHint && <ScrollHintOverlay />}
+    </div>
+  );
+};

package/src/components/slides/slides.css

@@ -15,8 +15,10 @@
     width: unset;
   }
 
-  /* If the first output is the only child, make it flex 1 */
-  > *:only-child > .output:only-child {
+  /* If the first output is the only child, make it flex 1. Cells are wrapped
+     in a `data-cell-id`/`data-cell-name` div (see `cellDomProps`), so `.output`
+     is a grandchild rather than a direct child here. */
+  > *:only-child:has(> .output:only-child, > * > .output:only-child) {
     flex: 1;
   }
 

package/src/components/static-html/share-modal.tsx

@@ -40,7 +40,7 @@ export const ShareStaticNotebookModal: React.FC<{
           e.preventDefault();
 
           onClose();
-          const html = await exportAsHTML({
+          const { contents: html } = await exportAsHTML({
             download: false,
             includeCode: true,
             files: VirtualFileTracker.INSTANCE.filenames(),

package/src/components/ui/input.tsx

@@ -195,7 +195,7 @@ export const OnBlurredInput = React.forwardRef<
       onChange={(event) => setInternalValue(event.target.value)}
       onBlur={() => setValue(internalValue || "")}
       onKeyDown={(event) => {
-        if (event.key !== "Enter") {
+        if (event.key !== "Enter" || event.shiftKey) {
           return;
         }
         setValue(internalValue || "");

package/src/core/codemirror/find-replace/__tests__/navigate.test.ts

@@ -20,6 +20,26 @@ vi.mock("@/core/cells/cells", () => ({
   getAllEditorViews: () => mockGetAllEditorViews(),
 }));
 
+/**
+ * A view stub that only carries what navigate needs
+ */
+function createMockView(state: EditorState): EditorView {
+  const cell = document.createElement("div");
+  cell.className = "marimo-cell";
+  // jsdom doesn't implement scrollIntoView.
+  cell.scrollIntoView = vi.fn();
+  const dom = document.createElement("div");
+  cell.append(dom);
+
+  return {
+    state,
+    dom,
+    // Don't actually apply changes; it's complex to mock properly and the
+    // assertions only care that dispatch was called.
+    dispatch: vi.fn(),
+  } as unknown as EditorView;
+}
+
 describe("navigate", () => {
   let view1: EditorView;
   let view2: EditorView;
@@ -36,20 +56,8 @@ describe("navigate", () => {
     });
 
     // Create mock views that track dispatch calls
-    view1 = {
-      state: state1,
-      dispatch: vi.fn(() => {
-        // Mock dispatch - in real tests we just need to verify it was called
-        // Don't actually apply changes as it's complex to mock properly
-      }),
-    } as unknown as EditorView;
-
-    view2 = {
-      state: state2,
-      dispatch: vi.fn(() => {
-        // Mock dispatch - in real tests we just need to verify it was called
-      }),
-    } as unknown as EditorView;
+    view1 = createMockView(state1);
+    view2 = createMockView(state2);
 
     mockViews = [view1, view2];
     mockGetAllEditorViews.mockReturnValue(mockViews);
@@ -234,6 +242,22 @@ describe("navigate", () => {
 
       expect(result).toBe(false);
     });
+
+    it("should scroll the cell owning the match into view", async () => {
+      const cell = view1.dom.closest(".marimo-cell");
+      invariant(cell, "mock view should be inside a cell");
+
+      expect(findNext()).toBeTruthy();
+
+      // The scroll is deferred a frame.
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+
+      expect(cell.scrollIntoView).toHaveBeenCalledWith({
+        behavior: "instant",
+        block: "nearest",
+        inline: "nearest",
+      });
+    });
   });
 
   describe("findPrev", () => {
@@ -319,10 +343,7 @@ describe("navigate", () => {
         extensions: [EditorState.readOnly.of(true)],
       });
 
-      const readOnlyView = {
-        state: readOnlyState,
-        dispatch: vi.fn(),
-      } as unknown as EditorView;
+      const readOnlyView = createMockView(readOnlyState);
 
       // Replace view1 with read-only view temporarily
       mockGetAllEditorViews.mockReturnValueOnce([readOnlyView, view2]);
@@ -568,10 +589,7 @@ describe("navigate", () => {
         doc: Text.of(["hello world hello there hello"]),
       });
 
-      const testView = {
-        state: testDoc,
-        dispatch: vi.fn(),
-      } as unknown as EditorView;
+      const testView = createMockView(testDoc);
 
       mockGetAllEditorViews.mockReturnValue([testView]);
 
@@ -613,10 +631,7 @@ describe("navigate", () => {
         doc: Text.of([""]),
       });
 
-      const emptyView = {
-        state: emptyState,
-        dispatch: vi.fn(),
-      } as unknown as EditorView;
+      const emptyView = createMockView(emptyState);
 
       mockGetAllEditorViews.mockReturnValue([emptyView]);
 
@@ -629,10 +644,7 @@ describe("navigate", () => {
         doc: Text.of(["orphan content"]),
       });
 
-      const orphanView = {
-        state: orphanState,
-        dispatch: vi.fn(),
-      } as unknown as EditorView;
+      const orphanView = createMockView(orphanState);
 
       store.set(findReplaceAtom, {
         type: "setCurrentView",

package/src/core/codemirror/find-replace/navigate.ts

@@ -6,6 +6,7 @@ import { EditorView } from "@codemirror/view";
 import { getAllEditorViews } from "@/core/cells/cells";
 import { replaceEditorContent } from "@/core/codemirror/replace-editor-content";
 import { store } from "@/core/state/jotai";
+import { scrollOwnerCell } from "../utils";
 import { asQueryCreator, type QueryType } from "./query";
 import { findReplaceAtom } from "./state";
 
@@ -85,6 +86,7 @@ const findInDirection = (direction: "next" | "prev") =>
         effects: [EditorView.scrollIntoView(selection.main, { y: "center" })],
         userEvent: "select.search",
       });
+      scrollOwnerCell(view);
       store.set(findReplaceAtom, {
         type: "setCurrentView",
         view,

package/src/core/codemirror/go-to-definition/__tests__/commands.test.ts

@@ -3,14 +3,14 @@
 import { python } from "@codemirror/lang-python";
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
-import { afterEach, describe, expect, test } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
 import { goToVariableDefinition } from "../commands";
 
 async function tick(): Promise<void> {
   await new Promise((resolve) => requestAnimationFrame(resolve));
 }
 
-function createEditor(content: string) {
+function createEditor(content: string, parent: HTMLElement = document.body) {
   const state = EditorState.create({
     doc: content,
     extensions: [python()],
@@ -18,7 +18,7 @@ function createEditor(content: string) {
 
   const view = new EditorView({
     state,
-    parent: document.body,
+    parent,
   });
 
   return view;
@@ -383,6 +383,27 @@ print('myVar')`);
       "
     `);
   });
+
+  test("scrolls the cell owning the definition into view", async () => {
+    const cell = document.createElement("div");
+    cell.className = "marimo-cell";
+    // jsdom doesn't implement scrollIntoView.
+    cell.scrollIntoView = vi.fn();
+    document.body.append(cell);
+
+    view = createEditor("myVar = 10\nprint(myVar)", cell);
+    expect(goToVariableDefinition(view, "myVar")).toBe(true);
+    // The jump and the scroll are both deferred to the next frame.
+    await tick();
+
+    expect(cell.scrollIntoView).toHaveBeenCalledWith({
+      behavior: "instant",
+      block: "nearest",
+      inline: "nearest",
+    });
+
+    cell.remove();
+  });
 });
 
 /**

package/src/core/codemirror/go-to-definition/commands.ts

@@ -4,6 +4,7 @@ import { syntaxTree } from "@codemirror/language";
 import type { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import type { SyntaxNode, Tree, TreeCursor } from "@lezer/common";
+import { scrollOwnerCell } from "../utils";
 
 const SCOPE_CREATING_NODES = new Set([
   "FunctionDefinition",
@@ -45,6 +46,8 @@ function goToPosition(view: EditorView, from: number): void {
       }),
     });
   });
+
+  scrollOwnerCell(view);
 }
 
 function findFirstMatchingVariable(

package/src/core/codemirror/keymaps/__tests__/keymaps.test.ts

@@ -1,8 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { defaultKeymap as originalDefaultKeymap } from "@codemirror/commands";
+import {
+  copyLineDown,
+  copyLineUp,
+  defaultKeymap as originalDefaultKeymap,
+} from "@codemirror/commands";
 import { describe, expect, it } from "vitest";
-import { HotkeyProvider } from "@/core/hotkeys/hotkeys";
+import {
+  HotkeyProvider,
+  OverridingHotkeyProvider,
+} from "@/core/hotkeys/hotkeys";
 import { visibleForTesting } from "../keymaps";
 
 const { defaultKeymap, defaultVimKeymap, overrideKeymap, OVERRIDDEN_COMMANDS } =
@@ -40,4 +47,26 @@ describe("keymaps", () => {
       expect(keys.some((k) => k.run === command)).toBe(true);
     }
   });
+
+  it.each([
+    ["cell.copyLineUp", copyLineUp, "Alt-Shift-ArrowUp"],
+    ["cell.copyLineDown", copyLineDown, "Alt-Shift-ArrowDown"],
+  ] as const)(
+    "%s is bound to the configured hotkey, not CodeMirror's default",
+    (action, command, defaultKey) => {
+      // Without an override, the binding matches CodeMirror's default key.
+      expect(
+        overrideKeymap(HotkeyProvider.create()).find((k) => k.run === command)
+          ?.key,
+      ).toBe(defaultKey);
+
+      // With an override, the binding follows the user's configured key.
+      // This is what `editable: true` on these hotkeys promises.
+      expect(
+        overrideKeymap(
+          new OverridingHotkeyProvider({ [action]: "Ctrl-d" }),
+        ).find((k) => k.run === command)?.key,
+      ).toBe("Ctrl-d");
+    },
+  );
 });

package/src/core/codemirror/keymaps/keymaps.ts

@@ -1,6 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import {
+  copyLineDown,
+  copyLineUp,
   cursorCharLeft,
   cursorCharRight,
   cursorLineDown,
@@ -94,6 +96,8 @@ export function keymapBundle(
 const OVERRIDDEN_COMMANDS = new Set<Command | undefined>([
   toggleComment,
   toggleBlockComment,
+  copyLineUp,
+  copyLineDown,
 ]);
 
 const defaultKeymap = once(() => {
@@ -111,6 +115,14 @@ const overrideKeymap = (keymap: HotkeyProvider): readonly KeyBinding[] => {
       key: keymap.getHotkey("cell.toggleBlockComment").key,
       run: toggleBlockComment,
     },
+    {
+      key: keymap.getHotkey("cell.copyLineUp").key,
+      run: copyLineUp,
+    },
+    {
+      key: keymap.getHotkey("cell.copyLineDown").key,
+      run: copyLineDown,
+    },
   ];
 };