@marimo-team/frontend 0.23.7-dev17 → 0.23.7-dev19

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-BmG6rFrZ.js"></script>
+    <script type="module" crossorigin src="./assets/index-BTq_h4uZ.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-DItdS47A.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-Bj1aDYRI.js">
@@ -133,7 +133,7 @@
     <link rel="modulepreload" crossorigin href="./assets/debounce-DhnxH9Rh.js">
     <link rel="modulepreload" crossorigin href="./assets/database-zap-kIkTfzTX.js">
     <link rel="modulepreload" crossorigin href="./assets/main-B0OX4z33.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-Vnv1zw09.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-CQvqgbJL.js">
     <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-DyYDV0HI.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-B3Breaz2.js">
     <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-CScpUItd.js">
@@ -147,33 +147,33 @@
     <link rel="modulepreload" crossorigin href="./assets/usePress-CfcdTqJM.js">
     <link rel="modulepreload" crossorigin href="./assets/input-DW6LU13i.js">
     <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-CvOOClOZ.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-sLKimSIQ.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-DieESi6t.js">
     <link rel="modulepreload" crossorigin href="./assets/multi-map-CUuNtzHt.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-DvqcBMUv.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-CG5QYXYk.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-CR7cnzLX.js">
     <link rel="modulepreload" crossorigin href="./assets/links-Dpap8NI2.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-C991pS4a.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-CHuy8C5z.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-DqHGjTAN.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-BwrPA9zQ.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-8abB4Lgh.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-CvnUbELu.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-BGeucDqU.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-DujssAPg.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-a81krr2r.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-BpHWX4lD.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-Cy8CWhme.js">
     <link rel="modulepreload" crossorigin href="./assets/sparkles-CZ5WmLPA.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-DyaTrW3L.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-hJIljqUO.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-Bhir8k53.js">
-    <link rel="modulepreload" crossorigin href="./assets/html-to-image-WbbYaIba.js">
-    <link rel="modulepreload" crossorigin href="./assets/focus-bWAnl_NC.js">
+    <link rel="modulepreload" crossorigin href="./assets/html-to-image-D1De-o9R.js">
+    <link rel="modulepreload" crossorigin href="./assets/focus-BOQLCb0u.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-BFC6lWG9.js">
     <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-CXbgDeVw.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-DzSMahmM.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-5FQGJX7Z-BReOK4Lg.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-CXVa5ubo.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-DDfK2Hm1.js">
     <link rel="modulepreload" crossorigin href="./assets/command-OHlV5HHD.js">
     <link rel="modulepreload" crossorigin href="./assets/popover-Bz_0Vkyf.js">
     <link rel="modulepreload" crossorigin href="./assets/errors-CPlNr33a.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-CHV3J2Ib.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-D37eAThw.js">
     <link rel="modulepreload" crossorigin href="./assets/table-DPyRV1LT.js">
     <link rel="modulepreload" crossorigin href="./assets/useIframeCapabilities-BfimgBBe.js">
     <link rel="modulepreload" crossorigin href="./assets/error-banner-JKAA0BVv.js">
@@ -191,27 +191,27 @@
     <link rel="modulepreload" crossorigin href="./assets/message-circle-CWm2KnSx.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-2-CKlZA04n.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-BUNcfKXO.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-BqavrgK2.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-JTrlf9N4.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-nqk474t8.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-D1dlJvD8.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-ByOlaO3e.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-vertical-CkwWkOQL.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-DHwG4Mac.js">
     <link rel="modulepreload" crossorigin href="./assets/tree-actions-Bzr5XDGx.js">
-    <link rel="modulepreload" crossorigin href="./assets/components-BA-LgiMU.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-DYtdLerF.js">
+    <link rel="modulepreload" crossorigin href="./assets/components-BLTMoYca.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-B59x-AoX.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-D9TuFTJG.js">
-    <link rel="modulepreload" crossorigin href="./assets/radio-group-BdIsm_qJ.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-CnVsBFJf.js">
+    <link rel="modulepreload" crossorigin href="./assets/radio-group-dnHLEMQN.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-CRNblX2_.js">
     <link rel="modulepreload" crossorigin href="./assets/objectWithoutPropertiesLoose-DaPAPabU.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-BmrwxxCo.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-n1Li95bE.js">
     <link rel="modulepreload" crossorigin href="./assets/plus-BgB18UzY.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-Dz8x4isw.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-B2nKkRm8.js">
     <link rel="modulepreload" crossorigin href="./assets/file-headphone-BrQspHac.js">
     <link rel="modulepreload" crossorigin href="./assets/file-BrdxGLRX.js">
     <link rel="modulepreload" crossorigin href="./assets/image-DQHXdEQn.js">
-    <link rel="modulepreload" crossorigin href="./assets/file-icons-Cisq31t9.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-icons-CJjHFZoa.js">
     <link rel="modulepreload" crossorigin href="./assets/switch-BT9Ki10B.js">
     <link rel="modulepreload" crossorigin href="./assets/events-BRAWQiYK.js">
     <link rel="modulepreload" crossorigin href="./assets/globals-B64vMQ0L.js">
@@ -220,11 +220,11 @@
     <link rel="modulepreload" crossorigin href="./assets/memoize-Tp7rARFe.js">
     <link rel="modulepreload" crossorigin href="./assets/get-C-qh_et5.js">
     <link rel="modulepreload" crossorigin href="./assets/_baseSet-CxV9N1bc.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-CZ60VH86.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-Qlb7fpYs.js">
     <link rel="modulepreload" crossorigin href="./assets/label-xHqFtfdz.js">
-    <link rel="modulepreload" crossorigin href="./assets/textarea-CUCKX5FP.js">
+    <link rel="modulepreload" crossorigin href="./assets/textarea-BIlunvBI.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-ccw-C-n2VFP5.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-iTIO7T75.js">
+    <link rel="modulepreload" crossorigin href="./assets/form-Zq0BEAeQ.js">
     <link rel="modulepreload" crossorigin href="./assets/renderShortcut-D_8sQXCD.js">
     <link rel="modulepreload" crossorigin href="./assets/field-CD7Io4xo.js">
     <link rel="modulepreload" crossorigin href="./assets/RSPContexts-eRifaAal.js">
@@ -247,7 +247,7 @@
     <link rel="stylesheet" crossorigin href="./assets/cells-jmgGt1lS.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DdDKmWlR.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B7vuddcd.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-BcFmKehD.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-DisN5cp_.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.23.7-dev17",
+  "version": "0.23.7-dev19",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -28,7 +28,6 @@ vi.mock("@/core/cells/pending-cut-service", () => ({
   }),
   usePendingCutState: () => ({
     cellIds: new Set(),
-    clipboardData: null,
   }),
 }));
 

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

@@ -42,9 +42,19 @@ const ClipboardCellDataSchema = z.object({
   version: z.literal("1.0"),
 });
 
-function buildClipboardPayload(
-  cells: Array<{ code: string; name?: string; config?: CellConfig }>,
-): { clipboardData: ClipboardCellData; plainText: string } {
+interface ClipboardCellInput {
+  code: string;
+  name?: string;
+  config?: CellConfig;
+}
+
+function toPlainText(cells: ClipboardCellInput[]): string {
+  return cells.map((cell) => cell.code).join("\n\n");
+}
+
+async function writeCellsToClipboard(
+  cells: ClipboardCellInput[],
+): Promise<void> {
   const clipboardData: ClipboardCellData = {
     cells: cells.map((cell) => ({
       code: cell.code,
@@ -53,17 +63,9 @@ function buildClipboardPayload(
     })),
     version: "1.0",
   };
-  const plainText = cells.map((cell) => cell.code).join("\n\n");
-  return { clipboardData, plainText };
-}
-
-async function writeCellsToClipboard(
-  clipboardData: ClipboardCellData,
-  plainText: string,
-): Promise<void> {
   const clipboardItem = new ClipboardItemBuilder()
     .add(MARIMO_CELL_MIMETYPE, clipboardData)
-    .add("text/plain", plainText)
+    .add("text/plain", toPlainText(cells))
     .build();
   await navigator.clipboard.write([clipboardItem]);
 }
@@ -80,14 +82,11 @@ export function useCellClipboard() {
       .filter(Boolean);
 
     if (cells.length === 0) {
-      // No cells to copy
       return;
     }
 
-    const { clipboardData, plainText } = buildClipboardPayload(cells);
-
     try {
-      await writeCellsToClipboard(clipboardData, plainText);
+      await writeCellsToClipboard(cells);
       pendingCutActions.clear();
       toastSuccess(cells.length);
     } catch (error) {
@@ -95,7 +94,7 @@ export function useCellClipboard() {
 
       // Fallback to simple text copy
       try {
-        await copyToClipboard(plainText);
+        await copyToClipboard(toPlainText(cells));
         pendingCutActions.clear();
         toastSuccess(cells.length);
       } catch {
@@ -110,21 +109,18 @@ export function useCellClipboard() {
     const cells = validCellIds.map((cellId) => notebook.cellData[cellId]);
 
     if (cells.length === 0) {
-      // No cells to cut
       return;
     }
 
-    const { clipboardData, plainText } = buildClipboardPayload(cells);
-
     try {
-      await writeCellsToClipboard(clipboardData, plainText);
-      pendingCutActions.markForCut({ cellIds: validCellIds, clipboardData });
+      await writeCellsToClipboard(cells);
+      pendingCutActions.markForCut({ cellIds: validCellIds });
     } catch (error) {
       Logger.error("Failed to cut cells to clipboard", error);
       try {
-        await copyToClipboard(plainText);
+        await copyToClipboard(toPlainText(cells));
         // Mark cells as pending cut instead of deleting immediately
-        pendingCutActions.markForCut({ cellIds: validCellIds, clipboardData });
+        pendingCutActions.markForCut({ cellIds: validCellIds });
       } catch {
         toastError();
       }

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

@@ -622,7 +622,7 @@ describe("cell reducer", () => {
       before: false,
     });
     actions.createNewCell({
-      cellId: "1" as CellId,
+      cellId: cellId("1"),
       before: false,
     });
     expect(formatCells(state)).toMatchInlineSnapshot(`
@@ -637,8 +637,8 @@ describe("cell reducer", () => {
 
     // Move first two cells after the third
     actions.moveCellsRelativeTo({
-      cellIds: [firstCellId, "1" as CellId],
-      targetCellId: "2" as CellId,
+      cellIds: [firstCellId, cellId("1")],
+      targetCellId: cellId("2"),
       position: "after",
     });
     expect(formatCells(state)).toMatchInlineSnapshot(`
@@ -658,7 +658,7 @@ describe("cell reducer", () => {
       before: false,
     });
     actions.createNewCell({
-      cellId: "1" as CellId,
+      cellId: cellId("1"),
       before: false,
     });
     expect(formatCells(state)).toMatchInlineSnapshot(`
@@ -682,14 +682,14 @@ describe("cell reducer", () => {
       {
         columnId: col.id,
         index: col.indexOfOrThrow(
-          "1" as CellId,
+          cellId("1"),
         ) as import("@/utils/id-tree").CellIndex,
       },
     ];
 
     actions.moveCellsRelativeTo({
-      cellIds: [firstCellId, "1" as CellId],
-      targetCellId: "2" as CellId,
+      cellIds: [firstCellId, cellId("1")],
+      targetCellId: cellId("2"),
       position: "after",
       previousPlacements,
     });
@@ -721,7 +721,7 @@ describe("cell reducer", () => {
       before: false,
     });
     actions.createNewCell({
-      cellId: "1" as CellId,
+      cellId: cellId("1"),
       before: false,
     });
 
@@ -736,14 +736,14 @@ describe("cell reducer", () => {
       {
         columnId: col.id,
         index: col.indexOfOrThrow(
-          "1" as CellId,
+          cellId("1"),
         ) as import("@/utils/id-tree").CellIndex,
       },
     ];
 
     actions.moveCellsRelativeTo({
-      cellIds: [firstCellId, "1" as CellId],
-      targetCellId: "2" as CellId,
+      cellIds: [firstCellId, cellId("1")],
+      targetCellId: cellId("2"),
       position: "after",
       previousPlacements,
     });
@@ -757,7 +757,7 @@ describe("cell reducer", () => {
       "
     `);
 
-    actions.deleteCell({ cellId: "2" as CellId });
+    actions.deleteCell({ cellId: cellId("2") });
     expect(formatCells(state)).toMatchInlineSnapshot(`
       "
       [0] ''

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

@@ -3,6 +3,7 @@
 import { act, renderHook } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
 import type { CellId } from "@/core/cells/ids";
 import {
   pendingCutStateAtom,
@@ -20,15 +21,10 @@ function createTestWrapper() {
   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", () => {
+  it("markForCut sets cellIds", () => {
     const { wrapper, store } = createTestWrapper();
-    const cellIds: CellId[] = ["cell-1" as CellId, "cell-2" as CellId];
+    const cellIds: CellId[] = [cellId("cell-1"), cellId("cell-2")];
 
     const { result } = renderHook(
       () => ({
@@ -39,20 +35,16 @@ describe("pending-cut-service", () => {
     );
 
     act(() => {
-      result.current.actions.markForCut({
-        cellIds,
-        clipboardData: mockClipboardData,
-      });
+      result.current.actions.markForCut({ cellIds });
     });
 
     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 cellIds: CellId[] = [cellId("cell-1")];
 
     const { result } = renderHook(
       () => ({
@@ -63,10 +55,7 @@ describe("pending-cut-service", () => {
     );
 
     act(() => {
-      result.current.actions.markForCut({
-        cellIds,
-        clipboardData: mockClipboardData,
-      });
+      result.current.actions.markForCut({ cellIds });
     });
     expect(store.get(pendingCutStateAtom).cellIds.size).toBe(1);
 
@@ -75,28 +64,24 @@ describe("pending-cut-service", () => {
     });
     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 targetCellId = cellId("cell-1");
 
     const { result: actionsResult } = renderHook(() => usePendingCutActions(), {
       wrapper,
     });
     const { result: isPendingResult } = renderHook(
-      () => useIsPendingCut(cellId),
+      () => useIsPendingCut(targetCellId),
       { wrapper },
     );
 
     expect(isPendingResult.current).toBe(false);
 
     act(() => {
-      actionsResult.current.markForCut({
-        cellIds: [cellId],
-        clipboardData: mockClipboardData,
-      });
+      actionsResult.current.markForCut({ cellIds: [targetCellId] });
     });
 
     expect(isPendingResult.current).toBe(true);
@@ -104,19 +89,15 @@ describe("pending-cut-service", () => {
 
   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 } = renderHook(() => useIsPendingCut(cellId("other-cell")), {
+      wrapper,
+    });
 
     const { result: actionsResult } = renderHook(() => usePendingCutActions(), {
       wrapper,
     });
     act(() => {
-      actionsResult.current.markForCut({
-        cellIds: ["cell-1" as CellId],
-        clipboardData: mockClipboardData,
-      });
+      actionsResult.current.markForCut({ cellIds: [cellId("cell-1")] });
     });
 
     expect(result.current).toBe(false);
@@ -134,10 +115,7 @@ describe("pending-cut-service", () => {
     expect(hasPendingResult.current).toBe(false);
 
     act(() => {
-      actionsResult.current.markForCut({
-        cellIds: ["cell-1" as CellId],
-        clipboardData: mockClipboardData,
-      });
+      actionsResult.current.markForCut({ cellIds: [cellId("cell-1")] });
     });
 
     expect(hasPendingResult.current).toBe(true);

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

@@ -1,31 +1,24 @@
 /* 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 },
-  ) => {
+  markForCut: (_state, action: { cellIds: CellId[] }) => {
     return {
       cellIds: new Set(action.cellIds),
-      clipboardData: action.clipboardData,
     };
   },
   clear: () => {
@@ -33,10 +26,8 @@ const {
   },
 });
 
-// Re-export the state atom
 export { pendingCutStateAtom };
 
-// Derived atom just for cell IDs (for easier consumption)
 export const pendingCutCellIdsAtom = atom(
   (get) => get(pendingCutStateAtom).cellIds,
 );

package/src/css/app/Cell.css

@@ -75,14 +75,11 @@
 
   /* 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);
+      background-color: var(--gray-2);
+      opacity: 0.55;
     }
   }