@marimo-team/islands 0.25.3-dev18 → 0.25.3-dev182

package/src/components/editor/navigation/clipboard.ts

@@ -3,7 +3,8 @@
 import useEvent from "react-use-event-hook";
 import { z } from "zod";
 import { toast } from "@/components/ui/use-toast";
-import { getNotebook, useCellActions } from "@/core/cells/cells";
+import { getNotebook } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import type { CellId } from "@/core/cells/ids";
 import {
   usePendingCutActions,
@@ -73,6 +74,7 @@ async function writeCellsToClipboard(
 
 export function useCellClipboard() {
   const actions = useCellActions();
+  const { createCell } = actions;
   const pendingCutActions = usePendingCutActions();
   const pendingCutState = usePendingCutState();
 
@@ -178,14 +180,15 @@ export function useCellClipboard() {
             const currentCellId = cellId;
             const reversedCells = clipboardData.cells.toReversed();
             for (const cell of reversedCells) {
-              actions.createNewCell({
-                cellId: currentCellId,
-                before,
+              // The pasted cell joins the column it is pasted into.
+              const { column: _column, ...config } = cell.config ?? {};
+              createCell({
+                ...(before
+                  ? { before: currentCellId }
+                  : { after: currentCellId }),
                 code: cell.code,
                 name: cell.name,
-                config: cell.config,
-                hideCode: cell.config?.hide_code,
-                autoFocus: true,
+                config,
               });
             }
 
@@ -199,11 +202,9 @@ export function useCellClipboard() {
       // Fallback to plain text
       const text = await navigator.clipboard.readText();
       if (text.trim()) {
-        actions.createNewCell({
-          cellId,
-          before,
+        createCell({
+          ...(before ? { before: cellId } : { after: cellId }),
           code: text,
-          autoFocus: true,
         });
       } else {
         toastNothingToPaste();

package/src/components/editor/navigation/focus-utils.ts

@@ -19,10 +19,10 @@ export function focusCellEditor(
   }
 }
 
-export function focusCell(cellId: CellId): void {
+export function focusCell(cellId: CellId, options?: FocusOptions): void {
   const element = document.getElementById(HTMLCellId.create(cellId));
   if (element) {
-    tryFocus(element);
+    tryFocus(element, options);
   } else {
     Logger.warn(`[CellFocusManager] focusCell: element not found: ${cellId}`);
   }
@@ -48,9 +48,9 @@ export function isAnyCellFocused(): boolean {
   );
 }
 
-export function tryFocus(dom: HTMLElement) {
+export function tryFocus(dom: HTMLElement, options?: FocusOptions) {
   try {
-    dom.focus();
+    dom.focus(options);
   } catch {
     Logger.warn("[CellFocusManager] element may not be focusable", dom);
   }

package/src/components/editor/navigation/multi-cell-action-toolbar.tsx

@@ -34,14 +34,14 @@ import {
   getCellEditorView,
   hasOnlyOneCellAtom,
   notebookAtom,
-  useCellActions,
 } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
+import { useNotebookDocumentEdit } from "@/core/notebook/document";
 import type { CellId } from "@/core/cells/ids";
 import { usePendingDeleteService } from "@/core/cells/pending-delete-service";
 import { formatEditorViews } from "@/core/codemirror/format";
 import { userConfigAtom } from "@/core/config/config";
 import type { HotkeyAction } from "@/core/hotkeys/hotkeys";
-import { useRequestClient } from "@/core/network/requests";
 import type { CellConfig } from "@/core/network/types";
 import { store } from "@/core/state/jotai";
 import { useEventListener } from "@/hooks/useEventListener";
@@ -112,20 +112,15 @@ const CellStateDropdown: React.FC<{
 };
 
 export function useMultiCellActionButtons(cellIds: CellId[]) {
-  const {
-    updateCellConfig,
-    moveCell,
-    clearCellOutput,
-    sendToTop,
-    sendToBottom,
-  } = useCellActions();
+  const { moveCell, clearCellOutput, sendToTop, sendToBottom } =
+    useCellActions();
+  const edit = useNotebookDocumentEdit();
   const deleteCell = useDeleteManyCellsCallback();
   const hasOnlyOneCell = useAtomValue(hasOnlyOneCellAtom);
   const selectionActions = useCellSelectionActions();
   const runCells = useRunCells();
   const pendingDeleteService = usePendingDeleteService();
   const userConfig = useAtomValue(userConfigAtom);
-  const { saveCellConfig } = useRequestClient();
 
   const selectedCount = cellIds.length;
 
@@ -205,16 +200,12 @@ export function useMultiCellActionButtons(cellIds: CellId[]) {
   });
 
   const toggleSelectedCellsProperty = useEvent(
-    async (cellIds: CellId[], property: keyof CellConfig, value: boolean) => {
-      const configs: Record<CellId, Partial<CellConfig>> = {};
-      cellIds.forEach((cellId) => {
-        configs[cellId] = { [property]: value };
-      });
-
-      await saveCellConfig({ configs });
-
-      cellIds.forEach((cellId) => {
-        updateCellConfig({ cellId, config: configs[cellId] });
+    (cellIds: CellId[], property: keyof CellConfig, value: boolean) => {
+      edit((tx) => {
+        for (const cellId of cellIds) {
+          const config: Partial<CellConfig> = { [property]: value };
+          tx.updateConfig(cellId, config);
+        }
       });
     },
   );

package/src/components/editor/navigation/navigation.ts

@@ -13,7 +13,9 @@ import { mergeProps, useFocusWithin, useKeyboard } from "react-aria";
 import { DATA_FOR_CELL_ID } from "@/components/data-table/cell-utils";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
-import { cellIdsAtom, notebookAtom, useCellActions } from "@/core/cells/cells";
+import { cellIdsAtom, notebookAtom } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
+import { useNotebookDocumentEdit } from "@/core/notebook/document";
 import { useCellFocusActions } from "@/core/cells/focus";
 import type { CellId } from "@/core/cells/ids";
 import { HTMLCellId } from "@/core/cells/ids";
@@ -36,7 +38,6 @@ import {
 } from "@/core/config/config";
 import type { HotkeyAction } from "@/core/hotkeys/hotkeys";
 import { parseShortcut } from "@/core/hotkeys/shortcuts";
-import { useRequestClient } from "@/core/network/requests";
 import { useSaveNotebook } from "@/core/saving/save-component";
 import { Events } from "@/utils/events";
 import type { CollapsibleTree } from "@/utils/id-tree";
@@ -189,9 +190,10 @@ export function useCellNavigationProps(
   },
 ) {
   const { saveOrNameNotebook } = useSaveNotebook();
-  const { saveCellConfig } = useRequestClient();
+  const edit = useNotebookDocumentEdit();
   const setAiCompletionCell = useSetAtom(aiCompletionCellAtom);
   const actions = useCellActions();
+  const { createCell, moveToNextCell } = useCellActions();
   const store = useStore();
   const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
   const runCells = useRunCells();
@@ -376,21 +378,21 @@ export function useCellNavigationProps(
         "cell.runAndNewBelow": addSingleHandler((cellIds) => {
           runCells(cellIds);
           const lastCellId = cellIds[cellIds.length - 1];
-          actions.moveToNextCell({ cellId: lastCellId, before: false });
+          moveToNextCell({ cellId: lastCellId, before: false });
           return true;
         }),
         "cell.runAndNewAbove": addSingleHandler((cellIds) => {
           runCells(cellIds);
           const firstCellId = cellIds[0];
-          actions.moveToNextCell({ cellId: firstCellId, before: true });
+          moveToNextCell({ cellId: firstCellId, before: true });
           return true;
         }),
         "cell.createAbove": (cellId) => {
-          actions.createNewCell({ cellId, before: true });
+          createCell({ before: cellId });
           return true;
         },
         "cell.createBelow": (cellId) => {
-          actions.createNewCell({ cellId, before: false });
+          createCell({ after: cellId });
           return true;
         },
         "cell.moveUp": addSingleHandler((cellIds) => {
@@ -453,20 +455,12 @@ export function useCellNavigationProps(
             (config) => config?.hide_code,
           );
 
-          // Fire-and-forget
-          void saveCellConfig({
-            configs: Object.fromEntries(
-              cellIds.map((cellId) => [cellId, { hide_code: nextHideCode }]),
-            ),
+          edit((tx) => {
+            for (const cellId of cellIds) {
+              tx.updateConfig(cellId, { hide_code: nextHideCode });
+            }
           });
 
-          for (const cellId of cellIds) {
-            actions.updateCellConfig({
-              cellId,
-              config: { hide_code: nextHideCode },
-            });
-          }
-
           // Only focus if it is a single cell
           if (cellIds.length === 1) {
             const cellId = cellIds[0];
@@ -543,14 +537,14 @@ export function useCellNavigationProps(
           if (Events.hasModifier(evt)) {
             return false;
           }
-          actions.createNewCell({ cellId, before: true, autoFocus: true });
+          createCell({ before: cellId });
           return true;
         },
         "command.createCellAfter": (cellId) => {
           if (Events.hasModifier(evt)) {
             return false;
           }
-          actions.createNewCell({ cellId, before: false, autoFocus: true });
+          createCell({ after: cellId });
           return true;
         },
         "command.createSqlCellAfter": (cellId) => {
@@ -559,14 +553,12 @@ export function useCellNavigationProps(
           }
           maybeAddMarimoImport({
             autoInstantiate: true,
-            createNewCell: actions.createNewCell,
+            createCell: createCell,
             fromCellId: cellId,
             before: true,
           });
-          actions.createNewCell({
-            cellId,
-            before: false,
-            autoFocus: true,
+          createCell({
+            after: cellId,
             code: LanguageAdapters.sql.defaultCode,
           });
           return true;
@@ -635,11 +627,11 @@ export function useCellNavigationProps(
             return true;
           },
           o: () => {
-            actions.createNewCell({ cellId, before: false, autoFocus: true });
+            createCell({ after: cellId });
             return true;
           },
           "shift+o": () => {
-            actions.createNewCell({ cellId, before: true, autoFocus: true });
+            createCell({ before: cellId });
             return true;
           },
           u: () => {

package/src/components/editor/notebook-banner.tsx

@@ -41,6 +41,7 @@ export const NotebookBanner: React.FC<Props> = ({ width }) => {
               {banner.title}
             </span>
             <Button
+              aria-label={`Dismiss ${banner.title}`}
               data-testid="remove-banner-button"
               variant="text"
               size="icon"

package/src/components/editor/notebook-cell.tsx

@@ -43,13 +43,12 @@ import { useResizeObserver } from "@/hooks/useResizeObserver";
 import { cn } from "@/utils/cn";
 import type { Milliseconds, Seconds } from "@/utils/time";
 import {
-  type CellActions,
   createUntouchedCellAtom,
-  useCellActions,
   useCellData,
   useCellHandle,
   useCellRuntime,
 } from "../../core/cells/cells";
+import { type CellActions, useCellActions } from "../../core/cells/actions";
 import { type CellId, SETUP_CELL_ID } from "../../core/cells/ids";
 import {
   cellNeedsRun,
@@ -59,7 +58,7 @@ import {
   shouldHidePublishedCell,
 } from "../../core/cells/utils";
 import type { UserConfig } from "../../core/config/config-schema";
-import { isAppInteractionDisabled } from "../../core/websocket/connection-utils";
+import { isAppInteractionDisabled } from "../../core/session/connection-utils";
 import { useCellRenderCount } from "../../hooks/useCellRenderCount";
 import type { Theme } from "../../theme/useTheme";
 import { Functions } from "../../utils/functions";
@@ -216,13 +215,10 @@ function useCellHiddenLogic({
 export type CellComponentActions = Pick<
   CellActions,
   | "updateCellCode"
-  | "createNewCell"
   | "focusCell"
   | "moveCell"
   | "collapseCell"
   | "expandCell"
-  | "moveToNextCell"
-  | "updateCellConfig"
   | "clearSerializedEditorState"
   | "setStdinResponse"
   | "clearCellConsoleOutput"
@@ -525,13 +521,22 @@ const EditableCellComponent = ({
     isMarkdownCodeHidden &&
     isEmptyMarkdownContent &&
     !needsRun && (
+      // Preserve pointer double-click editing; keyboard and assistive clicks activate directly.
+      // react-doctor-disable-next-line react-doctor/prefer-tag-over-role
       <div
+        // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
         role="button"
-        aria-label="Double-click to edit markdown"
+        aria-label="Edit markdown"
         className="relative cursor-pointer px-3 py-2"
         onDoubleClick={showHiddenCodeIfMarkdown}
+        onClick={(e) => {
+          if (e.detail === 0) {
+            showHiddenCodeIfMarkdown();
+          }
+        }}
         onKeyDown={(e) => {
-          if (e.key === "Enter") {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
             showHiddenCodeIfMarkdown();
           }
         }}
@@ -919,15 +924,16 @@ const CellLeftSideActions = memo(
     actions: CellComponentActions;
   }) => {
     const connection = useAtomValue(connectionAtom);
-    const { className, actions, cellId } = props;
+    const { className, cellId } = props;
+    const { createCell } = useCellActions();
 
     const createBelow = useEvent(
-      (opts: { code?: string; hideCode?: boolean } = {}) =>
-        actions.createNewCell({ cellId, before: false, ...opts }),
+      ({ code, hideCode }: { code?: string; hideCode?: boolean } = {}) =>
+        createCell({ after: cellId, code, config: { hide_code: hideCode } }),
     );
     const createAbove = useEvent(
-      (opts: { code?: string; hideCode?: boolean } = {}) =>
-        actions.createNewCell({ cellId, before: true, ...opts }),
+      ({ code, hideCode }: { code?: string; hideCode?: boolean } = {}) =>
+        createCell({ before: cellId, code, config: { hide_code: hideCode } }),
     );
 
     const oneClickShortcut = "mod";

package/src/components/editor/output/MarimoErrorOutput.tsx

@@ -207,7 +207,8 @@ export const MarimoErrorOutput = ({
       e.type === "ancestor-stopped",
   );
   const syntaxErrors = errors.filter(
-    (e): e is Extract<MarimoError, { type: "syntax" }> => e.type === "syntax",
+    (e): e is Extract<MarimoError, { type: "syntax" | "lazy-import" }> =>
+      e.type === "syntax" || e.type === "lazy-import",
   );
   const unknownErrors = errors.filter(
     (e): e is Extract<MarimoError, { type: "unknown" }> => e.type === "unknown",

package/src/components/editor/output/MarimoTracebackOutput.tsx

@@ -248,21 +248,22 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
             <Tooltip content={tooltipContent}>
               <button
                 type="button"
-                className="ml-1 p-1 rounded-sm hover:bg-muted transition-all inline"
+                aria-label={
+                  debuggerEnabled ? "Toggle breakpoint" : "Insert breakpoint"
+                }
+                className="ml-1 p-1 rounded-sm hover:bg-muted transition-colors inline"
+                onClick={() => {
+                  if (debuggerEnabled && !isStaticNotebook()) {
+                    toggleBreakpoint(info.cellId, info.lineNumber);
+                    return;
+                  }
+                  const view = getCellEditorView(info.cellId);
+                  if (view) {
+                    insertDebuggerAtLine(view, info.lineNumber);
+                  }
+                }}
               >
-                <BugPlayIcon
-                  onClick={() => {
-                    if (debuggerEnabled && !isStaticNotebook()) {
-                      toggleBreakpoint(info.cellId, info.lineNumber);
-                      return;
-                    }
-                    const view = getCellEditorView(info.cellId);
-                    if (view) {
-                      insertDebuggerAtLine(view, info.lineNumber);
-                    }
-                  }}
-                  className="h-3 w-3"
-                />
+                <BugPlayIcon className="h-3 w-3" />
               </button>
             </Tooltip>
           )}
@@ -272,9 +273,10 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
   }
   if (info?.kind === "file") {
     return (
-      <div
+      <button
+        type="button"
         className="inline-block cursor-pointer text-destructive hover:underline"
-        onClick={(_) => {
+        onClick={() => {
           getRequestClient().openFile({
             path: info.filePath,
             lineNumber: info.lineNumber,
@@ -282,7 +284,7 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
         }}
       >
         <span className="nb">"{info.filePath}"</span>
-      </div>
+      </button>
     );
   }
 };

package/src/components/editor/output/Outputs.css

@@ -24,6 +24,14 @@
   max-width: 100%;
 }
 
+.output audio,
+.output-area audio,
+.media audio {
+  width: 100%;
+  max-width: 100%;
+  transform: translateZ(0);
+}
+
 .output {
   position: relative;
 

package/src/components/editor/output/__tests__/traceback.test.tsx

@@ -1,11 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Provider } from "jotai";
 import { beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { Tracebacks } from "@/__mocks__/tracebacks";
 import { cellId } from "@/__tests__/branded";
+import { toggleBreakpoint } from "@/core/codemirror/cells/debugger-state";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { initialModeAtom } from "@/core/mode";
 import { requestClientAtom } from "@/core/network/requests";
@@ -19,7 +20,32 @@ import {
 
 const cid = cellId("1");
 
+vi.mock("@/core/config/feature-flag", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/core/config/feature-flag")>()),
+  getFeatureFlag: (flag: string) => flag === "debugger",
+}));
+vi.mock("@/core/codemirror/cells/debugger-state", async (importOriginal) => ({
+  ...(await importOriginal<
+    typeof import("@/core/codemirror/cells/debugger-state")
+  >()),
+  toggleBreakpoint: vi.fn(),
+}));
+
 describe("traceback component", () => {
+  test("activates the breakpoint from the named button itself", () => {
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cid} />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const buttons = screen.getAllByRole("button", {
+      name: "Toggle breakpoint",
+    });
+    fireEvent.click(buttons[0]);
+    expect(toggleBreakpoint).toHaveBeenCalledOnce();
+  });
   beforeEach(() => {
     vi.resetAllMocks();
     store.set(initialModeAtom, "edit");

package/src/components/editor/output/ansi-reduce.ts

@@ -358,6 +358,7 @@ export class AnsiReducer {
 
 export type StringOutputMessage = Omit<OutputMessage, "data"> & {
   data: string;
+  id?: number;
 };
 
 /**
@@ -369,6 +370,7 @@ export class StatefulOutputMessage implements OutputMessage {
   public readonly channel: OutputMessage["channel"];
   public readonly timestamp: OutputMessage["timestamp"];
   public readonly code: OutputMessage["code"];
+  public readonly id: StringOutputMessage["id"];
   private ansiReducer = new AnsiReducer();
   private _data: string;
 
@@ -379,39 +381,50 @@ export class StatefulOutputMessage implements OutputMessage {
   public static create(message: StringOutputMessage): StatefulOutputMessage {
     const ansiReducer = new AnsiReducer();
     ansiReducer.append(message.data);
-    return new StatefulOutputMessage(
-      message.mimetype,
-      message.channel,
-      message.timestamp,
+    return new StatefulOutputMessage({
+      mimetype: message.mimetype,
+      channel: message.channel,
+      timestamp: message.timestamp,
       ansiReducer,
-      message.code,
-    );
+      code: message.code,
+      id: message.id,
+    });
   }
 
-  private constructor(
-    mimetype: OutputMessage["mimetype"],
-    channel: OutputMessage["channel"],
-    timestamp: OutputMessage["timestamp"],
-    ansiReducer: AnsiReducer,
-    code: OutputMessage["code"],
-  ) {
+  private constructor({
+    mimetype,
+    channel,
+    timestamp,
+    ansiReducer,
+    code,
+    id,
+  }: {
+    mimetype: OutputMessage["mimetype"];
+    channel: OutputMessage["channel"];
+    timestamp: OutputMessage["timestamp"];
+    ansiReducer: AnsiReducer;
+    code: OutputMessage["code"];
+    id: StringOutputMessage["id"];
+  }) {
     this.mimetype = mimetype;
     this.channel = channel;
     this.timestamp = timestamp;
     this.code = code;
+    this.id = id;
     this.ansiReducer = ansiReducer;
     this._data = this.ansiReducer.render();
   }
 
   public appendData(chunk: string): StatefulOutputMessage {
     this.ansiReducer.append(chunk);
-    return new StatefulOutputMessage(
-      this.mimetype,
-      this.channel,
-      this.timestamp,
-      this.ansiReducer,
-      this.code,
-    );
+    return new StatefulOutputMessage({
+      mimetype: this.mimetype,
+      channel: this.channel,
+      timestamp: this.timestamp,
+      ansiReducer: this.ansiReducer,
+      code: this.code,
+      id: this.id,
+    });
   }
 
   public toJSON(): StringOutputMessage {