@marimo-team/islands 0.23.15-dev1 → 0.23.15-dev10

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

@@ -33,11 +33,14 @@ import { getReadonlyCodeDisplay } from "@/core/cells/readonly-code-display";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { CSSClasses, KnownQueryParams } from "@/core/constants";
-import type { MarimoError, OutputMessage } from "@/core/kernel/messages";
+import type { OutputMessage } from "@/core/kernel/messages";
 import { kernelStateAtom } from "@/core/kernel/state";
 import { useNotebookCodeAvailable } from "@/core/meta/code-visibility";
 import { showCodeInRunModeAtom } from "@/core/meta/state";
-import { isErrorMime } from "@/core/mime";
+import {
+  publishedCellClasses,
+  shouldHidePublishedCell,
+} from "@/core/cells/utils";
 import { type AppMode, kioskModeAtom } from "@/core/mode";
 import { useRequestClient } from "@/core/network/requests";
 import type { CellConfig } from "@/core/network/types";
@@ -362,12 +365,13 @@ const VerticalCell = memo(
     const className = cn(
       "marimo-cell",
       "hover-actions-parent empty:invisible",
-      {
-        published: published,
-        "has-error": errored,
-        stopped: stopped,
-        borderless: isPureMarkdown && !published,
-      },
+      published
+        ? publishedCellClasses({ errored, stopped })
+        : {
+            "has-error": errored,
+            stopped: stopped,
+            borderless: isPureMarkdown,
+          },
     );
 
     // Read mode and show code
@@ -419,19 +423,15 @@ const VerticalCell = memo(
       );
     }
 
-    const outputIsError = isErrorMime(output?.mimetype);
     // When show_tracebacks is enabled, show error outputs inline
     // instead of hiding them
-    const hasTraceback =
-      showErrorTracebacks &&
-      outputIsError &&
-      Array.isArray(output?.data) &&
-      output.data.some(
-        (e: MarimoError) =>
-          e.type === "exception" && "traceback" in e && e.traceback,
-      );
-    const hidden =
-      (errored || interrupted || stopped || outputIsError) && !hasTraceback;
+    const hidden = shouldHidePublishedCell({
+      errored,
+      interrupted,
+      stopped,
+      output,
+      showErrorTracebacks,
+    });
     if (hidden) {
       return null;
     }

package/src/core/cells/__tests__/utils.test.ts

@@ -8,11 +8,13 @@ import {
 } from "@/core/cells/cells";
 import { CellId } from "@/core/cells/ids";
 import type { CellData, CellRuntimeState } from "@/core/cells/types";
+import type { OutputMessage } from "@/core/kernel/messages";
 import { MultiColumn } from "@/utils/id-tree";
 import {
   disabledCellIds,
   enabledCellIds,
   isUninstantiated,
+  shouldHidePublishedCell,
   staleCellIds,
 } from "../utils";
 
@@ -426,3 +428,60 @@ describe("enabledCellIds", () => {
     expect(result).toEqual([cellId2, cellId3]);
   });
 });
+
+describe("shouldHidePublishedCell", () => {
+  const base = {
+    errored: false,
+    interrupted: false,
+    stopped: false,
+    output: null,
+    showErrorTracebacks: false,
+  };
+  const errorOutput = (traceback?: string): OutputMessage => ({
+    channel: "marimo-error",
+    mimetype: "application/vnd.marimo+error",
+    data: [
+      { type: "exception", exception_type: "ValueError", msg: "!", traceback },
+    ],
+    timestamp: 0,
+  });
+
+  it("does not hide a healthy cell", () => {
+    expect(shouldHidePublishedCell(base)).toBe(false);
+  });
+
+  it.each(["errored", "interrupted", "stopped"] as const)(
+    "hides a %s cell",
+    (key) => {
+      expect(shouldHidePublishedCell({ ...base, [key]: true })).toBe(true);
+    },
+  );
+
+  it("hides error outputs", () => {
+    expect(shouldHidePublishedCell({ ...base, output: errorOutput() })).toBe(
+      true,
+    );
+  });
+
+  it("shows error outputs with a traceback when show_tracebacks is enabled", () => {
+    expect(
+      shouldHidePublishedCell({
+        ...base,
+        errored: true,
+        output: errorOutput("Traceback (most recent call last) ..."),
+        showErrorTracebacks: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("hides error outputs without a traceback even when show_tracebacks is enabled", () => {
+    expect(
+      shouldHidePublishedCell({
+        ...base,
+        errored: true,
+        output: errorOutput(),
+        showErrorTracebacks: true,
+      }),
+    ).toBe(true);
+  });
+});

package/src/core/cells/utils.ts

@@ -2,6 +2,8 @@
 
 import type { EditorView } from "@codemirror/view";
 import { Objects } from "@/utils/objects";
+import type { MarimoError, OutputMessage } from "../kernel/messages";
+import { isErrorMime } from "../mime";
 import type { RuntimeState } from "../network/types";
 import type { NotebookState } from "./cells";
 import type { CellId } from "./ids";
@@ -196,3 +198,52 @@ export function cellStatusClasses({
     stale: status === "disabled-transitively",
   };
 }
+
+/**
+ * Status classes for a published cell (read or present mode, output only).
+ */
+export function publishedCellClasses({
+  errored,
+  stopped,
+}: {
+  errored: boolean;
+  stopped: boolean;
+}) {
+  return {
+    published: true,
+    "has-error": errored,
+    stopped: stopped,
+  };
+}
+
+/**
+ * Whether a published cell (read or present mode) should be hidden.
+ *
+ * Errored, interrupted, and stopped cells (and error outputs) are hidden in
+ * published views, unless `show_tracebacks` is enabled and the output carries
+ * an exception traceback to display inline.
+ */
+export function shouldHidePublishedCell({
+  errored,
+  interrupted,
+  stopped,
+  output,
+  showErrorTracebacks,
+}: {
+  errored: boolean;
+  interrupted: boolean;
+  stopped: boolean;
+  output: OutputMessage | null;
+  showErrorTracebacks: boolean;
+}): boolean {
+  const outputIsError = isErrorMime(output?.mimetype);
+  const hasTraceback =
+    showErrorTracebacks &&
+    outputIsError &&
+    Array.isArray(output?.data) &&
+    output.data.some(
+      (e: MarimoError) =>
+        e.type === "exception" && "traceback" in e && e.traceback,
+    );
+  return (errored || interrupted || stopped || outputIsError) && !hasTraceback;
+}

package/src/css/app/Cell.css

@@ -255,6 +255,12 @@
     border: none;
     box-shadow: none;
 
+    /* No dividers between sections. Tailwind v4's divide-y is structural
+     * (`> :not(:last-child)`), so hidden-but-mounted children (e.g. the tray
+     * while presenting) still count as siblings and would otherwise draw a
+     * stray rule under the output. */
+    @apply divide-y-0;
+
     .output-area {
       /* flow-root interferes with margin collapsing, but appears to be unneeded
             * when cell outlines are hidden; clear:both is sufficient.
@@ -443,6 +449,10 @@
   /* Set a fixed gutter width to ensure the hover area is always wide enough */
   /* And make the gutter bigger when the window is super wide */
   --gutter-width: 100px;
+
+  /* Vertical gap between notebook cells (gap-5). Overridable via custom css;
+   * zeroed while presenting, when published cells flow together. */
+  --notebook-cell-gap: 1.25rem;
 }
 
 /* ------------------------ CodeMirror Editor ----------------------------- */

package/src/hooks/__tests__/useHotkey.test.tsx

@@ -0,0 +1,88 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { renderHook } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it, vi } from "vitest";
+import { Functions } from "@/utils/functions";
+import { useHotkey } from "../useHotkey";
+
+// global.hideCode is bound to "Mod-." by default; "mod" accepts ctrl or meta.
+const SHORTCUT = "global.hideCode";
+
+function createWrapper() {
+  const store = createStore();
+  return ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+}
+
+function press() {
+  const event = new KeyboardEvent("keydown", {
+    key: ".",
+    ctrlKey: true,
+    cancelable: true,
+    bubbles: true,
+  });
+  document.dispatchEvent(event);
+  return event;
+}
+
+describe("useHotkey", () => {
+  it("invokes the callback and prevents default", () => {
+    const callback = vi.fn();
+    renderHook(() => useHotkey(SHORTCUT, callback), {
+      wrapper: createWrapper(),
+    });
+
+    const event = press();
+    expect(callback).toHaveBeenCalledOnce();
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it("does not prevent default when the callback returns false", () => {
+    const callback = vi.fn(() => false);
+    renderHook(() => useHotkey(SHORTCUT, callback), {
+      wrapper: createWrapper(),
+    });
+
+    const event = press();
+    expect(callback).toHaveBeenCalledOnce();
+    expect(event.defaultPrevented).toBe(false);
+  });
+
+  it("still swallows the keystroke for NOOP catch-all handlers", () => {
+    renderHook(() => useHotkey(SHORTCUT, Functions.NOOP), {
+      wrapper: createWrapper(),
+    });
+
+    const event = press();
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it("neither runs the callback nor prevents default when disabled", () => {
+    const callback = vi.fn();
+    renderHook(() => useHotkey(SHORTCUT, callback, { disabled: true }), {
+      wrapper: createWrapper(),
+    });
+
+    const event = press();
+    expect(callback).not.toHaveBeenCalled();
+    expect(event.defaultPrevented).toBe(false);
+  });
+
+  it("re-enables when disabled flips back to false", () => {
+    const callback = vi.fn();
+    const { rerender } = renderHook(
+      ({ disabled }: { disabled: boolean }) =>
+        useHotkey(SHORTCUT, callback, { disabled }),
+      { wrapper: createWrapper(), initialProps: { disabled: true } },
+    );
+
+    press();
+    expect(callback).not.toHaveBeenCalled();
+
+    rerender({ disabled: false });
+    const event = press();
+    expect(callback).toHaveBeenCalledOnce();
+    expect(event.defaultPrevented).toBe(true);
+  });
+});

package/src/hooks/useHotkey.ts

@@ -17,13 +17,31 @@ type HotkeyHandler = (
   // oxlint-disable-next-line typescript/no-invalid-void-type
 ) => boolean | void | undefined | Promise<void>;
 
+interface HotkeyOptions {
+  /**
+   * If true, the hotkey is not handled at all: the callback does not run, the
+   * event's default is not prevented, and the action is not registered in the
+   * shortcut registry.
+   *
+   * This differs from passing `Functions.NOOP` as the callback, which still
+   * swallows the keystroke (preventDefault) to suppress native browser/OS
+   * behavior.
+   */
+  disabled?: boolean;
+}
+
 /**
  * Registers a hotkey listener for the given shortcut.
  *
  * @param callback The callback to run when the shortcut is pressed. It does not need to be memoized as this hook will always use the latest callback.
  * If the callback returns false, preventDefault will not be called on the event.
  */
-export function useHotkey(shortcut: HotkeyAction, callback: HotkeyHandler) {
+export function useHotkey(
+  shortcut: HotkeyAction,
+  callback: HotkeyHandler,
+  options: HotkeyOptions = {},
+) {
+  const { disabled = false } = options;
   const { registerAction, unregisterAction } = useSetRegisteredAction();
   const hotkeys = useAtomValue(hotkeysAtom);
 
@@ -31,7 +49,7 @@ export function useHotkey(shortcut: HotkeyAction, callback: HotkeyHandler) {
   const memoizeCallback = useEvent((evt?: KeyboardEvent) => callback(evt));
 
   const listener = useEvent((e: KeyboardEvent) => {
-    if (e.defaultPrevented) {
+    if (disabled || e.defaultPrevented) {
       return;
     }
 
@@ -51,11 +69,18 @@ export function useHotkey(shortcut: HotkeyAction, callback: HotkeyHandler) {
 
   // Register with the shortcut registry
   useEffect(() => {
-    if (!isNOOP) {
+    if (!isNOOP && !disabled) {
       registerAction(shortcut, memoizeCallback);
       return () => unregisterAction(shortcut);
     }
-  }, [memoizeCallback, shortcut, isNOOP, registerAction, unregisterAction]);
+  }, [
+    memoizeCallback,
+    shortcut,
+    isNOOP,
+    disabled,
+    registerAction,
+    unregisterAction,
+  ]);
 }
 
 /**

package/src/plugins/impl/matplotlib/__tests__/matplotlib-renderer.test.ts

@@ -1,7 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { describe, expect, it } from "vitest";
-import type { Data } from "../matplotlib-renderer";
-import { visibleForTesting } from "../matplotlib-renderer";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  type Data,
+  MatplotlibRenderer,
+  type MatplotlibState,
+  visibleForTesting,
+} from "../matplotlib-renderer";
 
 const {
   pixelToData,
@@ -185,3 +189,67 @@ describe("isInAxes", () => {
     expect(isInAxes({ x: 300, y: 351 }, LINEAR_AXES)).toBe(false);
   });
 });
+
+describe("MatplotlibRenderer", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  it("restores a new selection when the chart changes", () => {
+    vi.stubGlobal(
+      "matchMedia",
+      vi.fn(() => ({ addEventListener: vi.fn() })),
+    );
+    vi.stubGlobal(
+      "requestAnimationFrame",
+      vi.fn(() => 1),
+    );
+    vi.stubGlobal("cancelAnimationFrame", vi.fn());
+    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(null);
+
+    const value = {
+      type: "box",
+      has_selection: true,
+      data: { x_min: 2, x_max: 4, y_min: 2, y_max: 4 },
+    } as const;
+    const state: MatplotlibState = {
+      ...LINEAR_AXES,
+      axesPixelBounds: [0, 0, 100, 100],
+      yBounds: [0, 10],
+      chartBase64: "first",
+      width: 100,
+      height: 100,
+      selectionColor: "blue",
+      selectionOpacity: 0.15,
+      strokeWidth: 2,
+      debounce: false,
+      value: { has_selection: false },
+      setValue: vi.fn(),
+    };
+    const container = document.createElement("div");
+    const controller = new AbortController();
+    const renderer = new MatplotlibRenderer(container, {
+      state,
+      signal: controller.signal,
+    });
+
+    // Cell reruns reuse the renderer, updating the chart and initial value together.
+    renderer.update({ ...state, chartBase64: "second", value });
+
+    const canvas = container.querySelector("canvas");
+    expect(canvas).not.toBeNull();
+    if (!canvas) {
+      return;
+    }
+    vi.spyOn(canvas, "getBoundingClientRect").mockReturnValue(
+      DOMRect.fromRect({ width: 100, height: 100 }),
+    );
+    canvas.dispatchEvent(
+      new MouseEvent("pointermove", { clientX: 30, clientY: 70 }),
+    );
+
+    expect(canvas.style.cursor).toBe("move");
+    controller.abort();
+  });
+});

package/src/plugins/impl/matplotlib/matplotlib-renderer.ts

@@ -377,6 +377,7 @@ export class MatplotlibRenderer {
 
     if (state.chartBase64 !== this.#currentChartBase64) {
       this.#loadImage(state.chartBase64);
+      this.#restoreSelection(state.value);
       return;
     }