@marimo-team/islands 0.23.7-dev16 → 0.23.7-dev17

package/src/core/cells/__tests__/pending-cut-service.test.tsx

@@ -0,0 +1,145 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it } from "vitest";
+import type { CellId } from "@/core/cells/ids";
+import {
+  pendingCutStateAtom,
+  useHasPendingCut,
+  useIsPendingCut,
+  usePendingCutActions,
+  usePendingCutState,
+} from "../pending-cut-service";
+
+function createTestWrapper() {
+  const store = createStore();
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+  return { wrapper, store };
+}
+
+const mockClipboardData = {
+  cells: [{ code: "x = 1", name: "cell1" }],
+  version: "1.0" as const,
+};
+
+describe("pending-cut-service", () => {
+  it("markForCut sets cellIds and clipboardData", () => {
+    const { wrapper, store } = createTestWrapper();
+    const cellIds: CellId[] = ["cell-1" as CellId, "cell-2" as CellId];
+
+    const { result } = renderHook(
+      () => ({
+        actions: usePendingCutActions(),
+        state: usePendingCutState(),
+      }),
+      { wrapper },
+    );
+
+    act(() => {
+      result.current.actions.markForCut({
+        cellIds,
+        clipboardData: mockClipboardData,
+      });
+    });
+
+    const state = store.get(pendingCutStateAtom);
+    expect(state.cellIds).toEqual(new Set(cellIds));
+    expect(state.clipboardData).toEqual(mockClipboardData);
+  });
+
+  it("clear resets to initial state", () => {
+    const { wrapper, store } = createTestWrapper();
+    const cellIds: CellId[] = ["cell-1" as CellId];
+
+    const { result } = renderHook(
+      () => ({
+        actions: usePendingCutActions(),
+        state: usePendingCutState(),
+      }),
+      { wrapper },
+    );
+
+    act(() => {
+      result.current.actions.markForCut({
+        cellIds,
+        clipboardData: mockClipboardData,
+      });
+    });
+    expect(store.get(pendingCutStateAtom).cellIds.size).toBe(1);
+
+    act(() => {
+      result.current.actions.clear();
+    });
+    const state = store.get(pendingCutStateAtom);
+    expect(state.cellIds.size).toBe(0);
+    expect(state.clipboardData).toBeNull();
+  });
+
+  it("useIsPendingCut returns true when cellId is marked for cut", () => {
+    const { wrapper } = createTestWrapper();
+    const cellId = "cell-1" as CellId;
+
+    const { result: actionsResult } = renderHook(() => usePendingCutActions(), {
+      wrapper,
+    });
+    const { result: isPendingResult } = renderHook(
+      () => useIsPendingCut(cellId),
+      { wrapper },
+    );
+
+    expect(isPendingResult.current).toBe(false);
+
+    act(() => {
+      actionsResult.current.markForCut({
+        cellIds: [cellId],
+        clipboardData: mockClipboardData,
+      });
+    });
+
+    expect(isPendingResult.current).toBe(true);
+  });
+
+  it("useIsPendingCut returns false when cellId is not marked for cut", () => {
+    const { wrapper } = createTestWrapper();
+    const { result } = renderHook(
+      () => useIsPendingCut("other-cell" as CellId),
+      { wrapper },
+    );
+
+    const { result: actionsResult } = renderHook(() => usePendingCutActions(), {
+      wrapper,
+    });
+    act(() => {
+      actionsResult.current.markForCut({
+        cellIds: ["cell-1" as CellId],
+        clipboardData: mockClipboardData,
+      });
+    });
+
+    expect(result.current).toBe(false);
+  });
+
+  it("useHasPendingCut returns true when any cells are marked for cut", () => {
+    const { wrapper } = createTestWrapper();
+    const { result: hasPendingResult } = renderHook(() => useHasPendingCut(), {
+      wrapper,
+    });
+    const { result: actionsResult } = renderHook(() => usePendingCutActions(), {
+      wrapper,
+    });
+
+    expect(hasPendingResult.current).toBe(false);
+
+    act(() => {
+      actionsResult.current.markForCut({
+        cellIds: ["cell-1" as CellId],
+        clipboardData: mockClipboardData,
+      });
+    });
+
+    expect(hasPendingResult.current).toBe(true);
+  });
+});

package/src/core/cells/cells.ts

@@ -23,6 +23,7 @@ import {
   splitEditor,
   updateEditorCodeFromPython,
 } from "../codemirror/language/utils";
+import type { SerializedEditorState } from "../codemirror/types";
 import { findCollapseRange, mergeOutlines } from "../dom/outline";
 import type { CellMessage } from "../kernel/messages";
 import { isErrorMime } from "../mime";
@@ -50,11 +51,36 @@ import {
   canUndoDeletes,
   disabledCellIds,
   enabledCellIds,
+  getUndoLabel,
   notebookIsRunning,
   notebookNeedsRun,
   notebookQueueOrRunningCount,
 } from "./utils";
 
+/**
+ * History entry for undoing a cell deletion.
+ */
+export interface UndoDeleteEntry {
+  type: "delete";
+  name: string;
+  serializedEditorState: SerializedEditorState;
+  column: CellColumnId;
+  index: CellIndex;
+  isSetupCell: boolean;
+  config: CellConfig;
+}
+
+/**
+ * History entry for undoing a cut-paste (move).
+ */
+export interface UndoMoveEntry {
+  type: "move";
+  cellIds: CellId[];
+  placements: Array<{ columnId: CellColumnId; index: CellIndex }>;
+}
+
+export type HistoryEntry = UndoDeleteEntry | UndoMoveEntry;
+
 /**
  * The state of the notebook.
  */
@@ -76,19 +102,9 @@ export interface NotebookState {
    */
   cellHandles: Record<CellId, React.RefObject<CellHandle | null>>;
   /**
-   * Array of deleted cells (with their data and index) so that cell deletion can be undone
-   *
-   * (CodeMirror types the serialized config as any.)
+   * Undo stack: deleted cells and cut-paste moves, in chronological order.
    */
-  history: {
-    name: string;
-    // oxlint-disable-next-line typescript/no-explicit-any
-    serializedEditorState: any;
-    column: CellColumnId;
-    index: CellIndex;
-    isSetupCell: boolean;
-    config: CellConfig;
-  }[];
+  history: HistoryEntry[];
   /**
    * Key of cell to scroll to; typically set by actions that re-order the cell
    * array. Call the SCROLL_TO_TARGET action to scroll to the specified cell
@@ -158,6 +174,10 @@ export interface CreateNewCellAction {
   before: boolean;
   /** Initial code content for the new cell */
   code?: string;
+  /** Optional name for the new cell */
+  name?: string;
+  /** Optional cell configuration */
+  config?: CellConfig;
   /** The last executed code for the new cell */
   lastCodeRun?: string;
   /** Timestamp of the last execution */
@@ -187,11 +207,13 @@ const {
       cellId,
       before,
       code,
+      name,
+      config,
       lastCodeRun = null,
       lastExecutionTime = null,
       autoFocus = true,
       skipIfCodeExists = false,
-      hideCode = false,
+      hideCode = undefined,
     } = action;
 
     let columnId: CellColumnId;
@@ -234,8 +256,12 @@ const {
         [newCellId]: createCell({
           id: newCellId,
           code,
+          name,
           lastCodeRun,
-          config: createCellConfig({ hide_code: hideCode }),
+          config: createCellConfig({
+            ...config,
+            ...(hideCode != null && { hide_code: hideCode }),
+          }),
           lastExecutionTime,
           edited: Boolean(code) && code !== lastCodeRun,
         }),
@@ -417,6 +443,40 @@ const {
       scrollKey: null,
     };
   },
+  moveCellsRelativeTo: (
+    state,
+    action: {
+      cellIds: CellId[];
+      targetCellId: CellId;
+      position: "before" | "after";
+      previousPlacements?: Array<{ columnId: CellColumnId; index: CellIndex }>;
+    },
+  ) => {
+    const { cellIds, targetCellId, position, previousPlacements } = action;
+    if (cellIds.length === 0) {
+      return state;
+    }
+    const newCellIds = state.cellIds.moveCellsRelativeTo(
+      cellIds,
+      targetCellId,
+      position,
+    );
+    // Only record undo when caller provided full before-state
+    const canUndoMove =
+      previousPlacements && previousPlacements.length === cellIds.length;
+    const history = canUndoMove
+      ? [
+          ...state.history,
+          { type: "move" as const, cellIds, placements: previousPlacements },
+        ]
+      : state.history;
+    return {
+      ...state,
+      cellIds: newCellIds,
+      history,
+      scrollKey: null,
+    };
+  },
   dropCellOverColumn: (
     state,
     action: { cellId: CellId; columnId: CellColumnId },
@@ -659,6 +719,7 @@ const {
       history: [
         ...state.history,
         {
+          type: "delete",
           name: prevData.name,
           serializedEditorState: serializedEditorState,
           column: column.id,
@@ -675,7 +736,29 @@ const {
       return state;
     }
 
-    const mostRecentlyDeleted = state.history[state.history.length - 1];
+    const last = state.history[state.history.length - 1];
+
+    if (last.type === "move") {
+      const { cellIds, placements } = last;
+      if (
+        cellIds.length === 0 ||
+        placements.length !== cellIds.length ||
+        cellIds.some((id) => !state.cellData[id])
+      ) {
+        return { ...state, history: state.history.slice(0, -1) };
+      }
+      const toRestore = cellIds.map((id, i) => ({
+        id,
+        columnId: placements[i].columnId,
+        index: placements[i].index,
+      }));
+      return {
+        ...state,
+        cellIds: state.cellIds.placeCells(toRestore),
+        history: state.history.slice(0, -1),
+        scrollKey: cellIds[0] ?? null,
+      };
+    }
 
     const {
       name,
@@ -684,7 +767,7 @@ const {
       index,
       isSetupCell,
       config,
-    } = mostRecentlyDeleted;
+    } = last;
 
     const cellId = isSetupCell ? SETUP_CELL_ID : CellId.create();
     const undoCell = createCell({
@@ -790,7 +873,7 @@ const {
       cellReducer: (cell) => {
         return {
           ...cell,
-          config: { ...cell.config, ...config },
+          config: createCellConfig({ ...cell.config, ...config }),
         };
       },
     });
@@ -1633,6 +1716,8 @@ export const canUndoDeletesAtom = atom((get) =>
   canUndoDeletes(get(notebookAtom)),
 );
 
+export const undoLabelAtom = atom((get) => getUndoLabel(get(notebookAtom)));
+
 export const needsRunAtom = atom((get) => notebookNeedsRun(get(notebookAtom)));
 
 export const cellErrorsAtom = atom((get) => {

package/src/core/cells/document-changes.ts

@@ -218,13 +218,14 @@ export function toDocumentChanges(
       ];
     }
 
-    // dropCellOverCell/dropCellOverColumn/moveCellToIndex → set-config + reorder-cells
+    // dropCellOverCell/dropCellOverColumn/moveCellToIndex/moveCellsRelativeTo → set-config + reorder-cells
     // Drag-and-drop reorders can move cells within or across columns.
     // We emit config changes for cells whose column changed, then
     // the full ordering.
     case "dropCellOverCell":
     case "dropCellOverColumn":
     case "moveCellToIndex":
+    case "moveCellsRelativeTo":
       return columnChanges(prevState, newState);
 
     // updateCellCode → set-code
@@ -302,6 +303,10 @@ export function toDocumentChanges(
     case "undoDeleteCell": {
       const changes = newCellChanges(prevState, newState);
       const colChanges = columnChanges(prevState, newState);
+      // Undo-cut has no new cells — always emit reorder to sync the move.
+      if (changes.length === 0) {
+        return colChanges;
+      }
       // Only include column changes if layout actually changed
       // (colChanges always has at least a reorder-cells change)
       return colChanges.length > 1 ? [...changes, ...colChanges] : changes;

package/src/core/cells/pending-cut-service.ts

@@ -0,0 +1,64 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { atom, useAtomValue } from "jotai";
+import type { ClipboardCellData } from "@/components/editor/navigation/clipboard";
+import type { CellId } from "@/core/cells/ids";
+import { createReducerAndAtoms } from "@/utils/createReducer";
+
+interface PendingCutState {
+  cellIds: Set<CellId>;
+  clipboardData: ClipboardCellData | null;
+}
+
+const initialState = (): PendingCutState => ({
+  cellIds: new Set(),
+  clipboardData: null,
+});
+
+const {
+  valueAtom: pendingCutStateAtom,
+  useActions: usePendingCutActionsInternal,
+} = createReducerAndAtoms(initialState, {
+  markForCut: (
+    _state,
+    action: { cellIds: CellId[]; clipboardData: ClipboardCellData },
+  ) => {
+    return {
+      cellIds: new Set(action.cellIds),
+      clipboardData: action.clipboardData,
+    };
+  },
+  clear: () => {
+    return initialState();
+  },
+});
+
+// Re-export the state atom
+export { pendingCutStateAtom };
+
+// Derived atom just for cell IDs (for easier consumption)
+export const pendingCutCellIdsAtom = atom(
+  (get) => get(pendingCutStateAtom).cellIds,
+);
+
+export const clearPendingCutAtom = atom(null, (_get, set) => {
+  set(pendingCutStateAtom, initialState());
+});
+
+export function usePendingCutActions() {
+  return usePendingCutActionsInternal();
+}
+
+export function useIsPendingCut(cellId: CellId): boolean {
+  const cellIds = useAtomValue(pendingCutCellIdsAtom);
+  return cellIds.has(cellId);
+}
+
+export function usePendingCutState() {
+  return useAtomValue(pendingCutStateAtom);
+}
+
+export function useHasPendingCut(): boolean {
+  const state = useAtomValue(pendingCutStateAtom);
+  return state.cellIds.size > 0;
+}

package/src/core/cells/utils.ts

@@ -65,6 +65,17 @@ export function canUndoDeletes(state: NotebookState) {
   return state.history.length > 0;
 }
 
+/**
+ * Label for the undo action based on the last history entry type.
+ */
+export function getUndoLabel(state: NotebookState): string {
+  const last = state.history[state.history.length - 1];
+  if (!last) {
+    return "Undo cell deletion";
+  }
+  return last.type === "move" ? "Undo move" : "Undo cell deletion";
+}
+
 /**
  * Get the status of the descendants of the given cell.
  */

package/src/core/codemirror/cells/extensions.ts

@@ -10,6 +10,10 @@ import {
 } from "@codemirror/view";
 import { createTracebackInfoAtom } from "@/core/cells/cells";
 import { type CellId, HTMLCellId, SCRATCH_CELL_ID } from "@/core/cells/ids";
+import {
+  clearPendingCutAtom,
+  pendingCutCellIdsAtom,
+} from "@/core/cells/pending-cut-service";
 import { loroSyncAnnotation } from "@/core/codemirror/rtc/loro/sync";
 import type { KeymapConfig } from "@/core/config/config-schema";
 import type { HotkeyProvider } from "@/core/hotkeys/hotkeys";
@@ -326,6 +330,12 @@ function cellCodeEditing(hotkeys: HotkeyProvider): Extension[] {
         code: nextCode,
         formattingChange: isFormattingChange,
       });
+
+      // Clear pending cut state if this cell was marked for cut
+      const pendingCutCellIds = store.get(pendingCutCellIdsAtom);
+      if (pendingCutCellIds.has(cellId)) {
+        store.set(clearPendingCutAtom);
+      }
     }
   });
 

package/src/core/hotkeys/hotkeys.ts

@@ -442,6 +442,11 @@ const DEFAULT_HOT_KEY = {
     group: "Command",
     key: "c",
   },
+  "command.cutCell": {
+    name: "Cut cell",
+    group: "Command",
+    key: "x",
+  },
   "command.pasteCell": {
     name: "Paste cell",
     group: "Command",

package/src/css/app/Cell.css

@@ -73,6 +73,19 @@
     }
   }
 
+  /* Styling for cells marked for cut */
+  &.pending-cut {
+    opacity: 0.6;
+    border-style: dashed;
+    border-color: var(--amber-7);
+
+    .output-area,
+    .cm-gutters,
+    .cm {
+      background-color: var(--amber-2);
+    }
+  }
+
   &:focus-within {
     z-index: 20;
   }

package/src/utils/__tests__/id-tree.test.ts

@@ -957,6 +957,77 @@ describe("MultiColumn", () => {
     expect(inserted.topLevelIds[1]).toEqual(["B1", "D1", "B2"]);
   });
 
+  describe("moveCellsRelativeTo", () => {
+    it("moves a single cell before target in same column", () => {
+      const moved = multiColumn.moveCellsRelativeTo(["A3"], "A1", "before");
+      expect(moved.topLevelIds).toEqual([
+        ["A3", "A1", "A2"],
+        ["B1", "B2"],
+        ["C1", "C2", "C3", "C4"],
+      ]);
+    });
+
+    it("moves a single cell after target in same column", () => {
+      const moved = multiColumn.moveCellsRelativeTo(["A1"], "A3", "after");
+      expect(moved.topLevelIds).toEqual([
+        ["A2", "A3", "A1"],
+        ["B1", "B2"],
+        ["C1", "C2", "C3", "C4"],
+      ]);
+    });
+
+    it("moves multiple cells before target", () => {
+      const moved = multiColumn.moveCellsRelativeTo(
+        ["A1", "A2"],
+        "B2",
+        "before",
+      );
+      expect(moved.topLevelIds).toEqual([
+        ["A3"],
+        ["B1", "A1", "A2", "B2"],
+        ["C1", "C2", "C3", "C4"],
+      ]);
+    });
+
+    it("moves multiple cells after target", () => {
+      const moved = multiColumn.moveCellsRelativeTo(
+        ["A2", "A3"],
+        "B1",
+        "after",
+      );
+      expect(moved.topLevelIds).toEqual([
+        ["A1"],
+        ["B1", "A2", "A3", "B2"],
+        ["C1", "C2", "C3", "C4"],
+      ]);
+    });
+
+    it("returns same MultiColumn when cellIds is empty", () => {
+      const moved = multiColumn.moveCellsRelativeTo([], "A1", "before");
+      expect(moved).toBe(multiColumn);
+    });
+
+    it("inserts at end when target is among moved cells", () => {
+      const moved = multiColumn.moveCellsRelativeTo(
+        ["A1", "A2"],
+        "A2",
+        "after",
+      );
+      // Target A2 was removed; insert at end of column 0
+      expect(moved.topLevelIds).toEqual([
+        ["A3", "A1", "A2"],
+        ["B1", "B2"],
+        ["C1", "C2", "C3", "C4"],
+      ]);
+    });
+
+    it("throws when node not found", () => {
+      expect(() =>
+        multiColumn.moveCellsRelativeTo(["Z1"], "A1", "before"),
+      ).toThrow("Cell Z1 not found in any column");
+    });
+  });
+
   it("deletes by id", () => {
     const deleted = multiColumn.deleteById("B1");
     expect(deleted.topLevelIds[1]).toEqual(["B2"]);

package/src/utils/id-tree.tsx

@@ -861,6 +861,67 @@ export class MultiColumn<T> {
     return new MultiColumn(newColumns);
   }
 
+  /**
+   * Move multiple cells to be immediately before (or after) a target cell.
+   * Cells are inserted in their original order.
+   *
+   * @throws Error if any cellId is not found in any column.
+   * If targetId is among the moved cells, cells are inserted at the end of the target column.
+   */
+  moveCellsRelativeTo(
+    cellIds: T[],
+    targetId: T,
+    position: "before" | "after",
+  ): MultiColumn<T> {
+    if (cellIds.length === 0) {
+      return this;
+    }
+
+    const cellIdSet = new Set(cellIds);
+    const targetColumn = this.findWithId(targetId);
+    const targetColIndex = this.indexOfOrThrow(targetColumn.id);
+
+    // Collect nodes to move
+    const nodesToMove: TreeNode<T>[] = [];
+    for (const id of cellIds) {
+      const col = this.findWithId(id);
+      const node = col.nodes.find((n) => n.value === id);
+      if (!node) {
+        throw new Error(`Node ${id} not found in column ${col.id}`);
+      }
+      nodesToMove.push(node);
+    }
+
+    // Remove moved cells from all columns
+    const columnsWithRemovals = this.columns.map((col) =>
+      col.withNodes(col.nodes.filter((n) => !cellIdSet.has(n.value))),
+    );
+
+    // Find target index in the cleaned column
+    const cleanedTargetCol = columnsWithRemovals[targetColIndex];
+    let insertIndex = cleanedTargetCol.nodes.findIndex(
+      (n) => n.value === targetId,
+    );
+
+    // If target was one of the moved cells, insert at end
+    if (insertIndex === -1) {
+      insertIndex = cleanedTargetCol.nodes.length;
+    } else if (position === "after") {
+      insertIndex += 1;
+    }
+
+    // Insert all moved nodes at target position
+    const newTargetNodes = arrayInsertMany(
+      cleanedTargetCol.nodes,
+      insertIndex,
+      nodesToMove,
+    );
+    columnsWithRemovals[targetColIndex] =
+      cleanedTargetCol.withNodes(newTargetNodes);
+
+    return new MultiColumn(columnsWithRemovals);
+  }
+
   indexOfOrThrow(id: CellColumnId): number {
     const index = this.columns.findIndex((c) => c.id === id);
     if (index === -1) {
@@ -963,6 +1024,34 @@ export class MultiColumn<T> {
     return this.transformWithCellId(cellId, (c) => c.delete(cellId));
   }
 
+  /**
+   * Remove the given cells from the tree, then re-insert each at its
+   * (columnId, index). Used to undo a move (e.g. cut-paste) by restoring
+   * cells to their previous positions. Placements are sorted by
+   * (columnId, index) so insert order keeps indices valid.
+   */
+  placeCells(
+    placements: Array<{ id: T; columnId: CellColumnId; index: CellIndex }>,
+  ): MultiColumn<T> {
+    if (placements.length === 0) {
+      return this;
+    }
+    let result = this.deleteById(placements[0].id);
+    for (const { id } of placements.slice(1)) {
+      result = result.deleteById(id);
+    }
+    const sorted = [...placements].toSorted((a, b) => {
+      if (a.columnId !== b.columnId) {
+        return a.columnId.localeCompare(b.columnId);
+      }
+      return (a.index as number) - (b.index as number);
+    });
+    for (const { id, columnId, index } of sorted) {
+      result = result.insertId(id, columnId, index);
+    }
+    return result;
+  }
+
   compact(): MultiColumn<T> {
     // Don't compact if there's only one column
     if (this.columns.length === 1) {