@marimo-team/frontend 0.21.2-dev5 → 0.21.2-dev52

package/src/__mocks__/notebook.ts

@@ -22,16 +22,16 @@ export const MockNotebook = {
   },
 
   notebookState: (opts?: {
-    cellData: Record<string, Partial<CellData>>;
-    cellRuntime?: Record<string, Partial<CellRuntimeState>>;
+    cellData: Record<CellId, Partial<CellData>>;
+    cellRuntime?: Record<CellId, Partial<CellRuntimeState>>;
   }): NotebookState => {
-    const cellData = opts?.cellData || {};
-    const cellRuntime = opts?.cellRuntime || {};
+    const cellData = opts?.cellData ?? {};
+    const cellRuntime = opts?.cellRuntime ?? {};
     return {
-      cellData: Objects.mapValues(cellData, (data, cellId) => ({
-        id: cellId as CellId,
+      cellData: Objects.mapValues(cellData, (data, cid) => ({
+        id: cid,
         code: "",
-        name: `cell-${cellId}`,
+        name: `cell-${cid}`,
         config: {
           hide_code: false,
           disabled: false,
@@ -45,8 +45,8 @@ export const MockNotebook = {
         ...data,
       })),
       cellIds: MultiColumn.from([Object.keys(cellData) as CellId[]]),
-      cellRuntime: Objects.mapValues(cellData, (_data, cellId) =>
-        createCellRuntimeState({ ...cellRuntime[cellId] }),
+      cellRuntime: Objects.mapValues(cellData, (_data, cid) =>
+        createCellRuntimeState({ ...cellRuntime[cid] }),
       ),
       cellHandles: Objects.mapValues(cellData, (_data) => createRef()),
       cellLogs: [],

package/src/__tests__/branded.ts

@@ -0,0 +1,20 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * Test-only helpers for constructing branded ID types from plain strings.
+ *
+ * In production code, branded types flow from the API (via codegen) or
+ * from designated creation points (e.g. CellId.create()). Tests need to
+ * construct these from string literals, which requires a cast. These
+ * helpers centralise that cast so test files don't scatter `as CellId`
+ * everywhere.
+ */
+
+import type { CellId, UIElementId } from "@/core/cells/ids";
+import type { RequestId } from "@/core/network/DeferredRequestRegistry";
+import type { VariableName } from "@/core/variables/types";
+
+export const cellId = (s: string) => s as CellId;
+export const variableName = (s: string) => s as VariableName;
+export const requestId = (s: string) => s as RequestId;
+export const uiElementId = (s: string) => s as UIElementId;

package/src/components/app-config/user-config-form.tsx

@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { merge } from "lodash-es";
 import {
   AlertTriangleIcon,
   BrainIcon,
@@ -287,10 +288,10 @@ export const UserConfigForm: React.FC = () => {
       dirtyValues.ai = setAiModels(values.ai, dirtyValues.ai);
     }
 
-    await saveUserConfig({ config: dirtyValues }).then(() => {
-      // Update local state with form values
-      setConfig((prev) => ({ ...prev, ...values }));
-    });
+    await saveUserConfig({ config: dirtyValues });
+    // Only apply the changed keys; this avoids stale request responses
+    // overwriting newer config changes.
+    setConfig((prev) => merge({}, prev, dirtyValues));
   };
   const onSubmit = useDebouncedCallback(onSubmitNotDebounced, FORM_DEBOUNCE);
 

package/src/components/data-table/__tests__/utils.test.ts

@@ -1,7 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { Table } from "@tanstack/react-table";
 import { describe, expect, it } from "vitest";
-import { getPageIndexForRow } from "../utils";
+import {
+  getClipboardContent,
+  getPageIndexForRow,
+  getRawValue,
+  stringifyUnknownValue,
+} from "../utils";
 
 describe("getPageIndexForRow", () => {
   it("should return null when row is on current page", () => {
@@ -77,3 +83,134 @@ describe("getPageIndexForRow", () => {
     expect(getPageIndexForRow(999, 100, 10)).toBe(99);
   });
 });
+
+describe("stringifyUnknownValue", () => {
+  it("should stringify primitives", () => {
+    expect(stringifyUnknownValue({ value: "hello" })).toBe("hello");
+    expect(stringifyUnknownValue({ value: 42 })).toBe("42");
+    expect(stringifyUnknownValue({ value: true })).toBe("true");
+    expect(stringifyUnknownValue({ value: null })).toBe("null");
+    expect(stringifyUnknownValue({ value: undefined })).toBe("undefined");
+  });
+
+  it("should stringify null as empty string when flag is set", () => {
+    expect(
+      stringifyUnknownValue({ value: null, nullAsEmptyString: true }),
+    ).toBe("");
+  });
+
+  it("should JSON-stringify plain objects", () => {
+    expect(stringifyUnknownValue({ value: { x: 1 } })).toBe('{"x":1}');
+  });
+});
+
+describe("getClipboardContent", () => {
+  it("should use rawValue for text when it differs from displayedValue", () => {
+    const displayed = {
+      _serialized_mime_bundle: {
+        mimetype: "text/html",
+        data: '<a href="https://example.com">42</a>',
+      },
+    };
+    const result = getClipboardContent(42, displayed);
+    expect(result.text).toBe("42");
+    expect(result.html).toBe('<a href="https://example.com">42</a>');
+  });
+
+  it("should strip html for text when rawValue equals displayedValue", () => {
+    const mimeBundle = {
+      _serialized_mime_bundle: {
+        mimetype: "text/html",
+        data: "<b>bold</b>",
+      },
+    };
+    const result = getClipboardContent(mimeBundle, mimeBundle);
+    expect(result.text).toBe("bold");
+    expect(result.html).toBe("<b>bold</b>");
+  });
+
+  it("should handle undefined rawValue", () => {
+    const displayed = {
+      _serialized_mime_bundle: {
+        mimetype: "text/html",
+        data: "<b>hello</b>",
+      },
+    };
+    const result = getClipboardContent(undefined, displayed);
+    expect(result.text).toBe("hello");
+    expect(result.html).toBe("<b>hello</b>");
+  });
+
+  it("should return no html for plain values", () => {
+    const result = getClipboardContent(undefined, "plain text");
+    expect(result.text).toBe("plain text");
+    expect(result.html).toBeUndefined();
+  });
+
+  it("should treat text/markdown as html since mo.md() data is rendered html", () => {
+    const displayed = {
+      _serialized_mime_bundle: {
+        mimetype: "text/markdown",
+        data: '<span class="markdown"><strong>Hello</strong></span>',
+      },
+    };
+    const result = getClipboardContent(undefined, displayed);
+    expect(result.text).toBe("Hello");
+    expect(result.html).toBe(
+      '<span class="markdown"><strong>Hello</strong></span>',
+    );
+  });
+
+  it("should return no html for non-html mime bundles", () => {
+    const displayed = {
+      _serialized_mime_bundle: {
+        mimetype: "text/plain",
+        data: "just text",
+      },
+    };
+    const result = getClipboardContent(undefined, displayed);
+    expect(result.text).toBe("just text");
+    expect(result.html).toBeUndefined();
+  });
+
+  it("should handle null rawValue as a real value", () => {
+    const displayed = {
+      _serialized_mime_bundle: {
+        mimetype: "text/html",
+        data: "<i>N/A</i>",
+      },
+    };
+    const result = getClipboardContent(null, displayed);
+    expect(result.text).toBe("null");
+    expect(result.html).toBe("<i>N/A</i>");
+  });
+});
+
+function createMockTableWithMeta<TData>(rawData?: TData[]): Table<TData> {
+  return {
+    options: {
+      meta: { rawData },
+    },
+  } as unknown as Table<TData>;
+}
+
+describe("getRawValue", () => {
+  it("should return raw value when rawData is available", () => {
+    const table = createMockTableWithMeta([
+      { a: 10, b: 20 },
+      { a: 30, b: 40 },
+    ]);
+    expect(getRawValue(table, 0, "a")).toBe(10);
+    expect(getRawValue(table, 1, "b")).toBe(40);
+  });
+
+  it("should return undefined when rawData is not set", () => {
+    const table = createMockTableWithMeta(undefined);
+    expect(getRawValue(table, 0, "a")).toBeUndefined();
+  });
+
+  it("should return undefined when row index is out of bounds", () => {
+    const table = createMockTableWithMeta([{ a: 1 }]);
+    expect(getRawValue(table, 5, "a")).toBeUndefined();
+  });
+});

package/src/components/data-table/charts/__tests__/storage.test.ts

@@ -12,7 +12,7 @@ vi.mock("@/utils/storage/storage", () => ({
   },
 }));
 
-import type { CellId } from "@/core/cells/ids";
+import { cellId } from "@/__tests__/branded";
 import { availableStorage } from "@/utils/storage/storage";
 import { ChartSchema } from "../schemas";
 import type { TabName } from "../storage";
@@ -37,7 +37,7 @@ describe("Chart Transforms Storage", () => {
 
     it("should store and retrieve tab data", () => {
       const store = getDefaultStore();
-      const cellId = "cell-1" as CellId;
+      const cid = cellId("cell-1");
       const tabData = {
         tabName: "Tab 1" as TabName,
         chartType: ChartType.LINE,
@@ -51,17 +51,17 @@ describe("Chart Transforms Storage", () => {
 
       // Set the atom value
       const newMap = new Map();
-      newMap.set(cellId, [tabData]);
+      newMap.set(cid, [tabData]);
       store.set(tabsStorageAtom, newMap);
 
       // Verify the value was set
       const retrievedValue = store.get(tabsStorageAtom);
-      expect(retrievedValue.get(cellId)).toEqual([tabData]);
+      expect(retrievedValue.get(cid)).toEqual([tabData]);
     });
 
     it("should handle multiple tabs for the same cell", () => {
       const store = getDefaultStore();
-      const cellId = "cell-1" as CellId;
+      const cid = cellId("cell-1");
       const tabData1 = {
         tabName: "Tab 1" as TabName,
         chartType: ChartType.LINE,
@@ -85,12 +85,12 @@ describe("Chart Transforms Storage", () => {
 
       // Set the atom value
       const newMap = new Map();
-      newMap.set(cellId, [tabData1, tabData2]);
+      newMap.set(cid, [tabData1, tabData2]);
       store.set(tabsStorageAtom, newMap);
 
       // Verify the value was set
       const retrievedValue = store.get(tabsStorageAtom);
-      expect(retrievedValue.get(cellId)).toEqual([tabData1, tabData2]);
+      expect(retrievedValue.get(cid)).toEqual([tabData1, tabData2]);
     });
   });
 

package/src/components/data-table/context-menu.tsx

@@ -18,7 +18,7 @@ import {
 import { DATA_CELL_ID } from "./cell-utils";
 import { Filter } from "./filters";
 import { selectedCellsAtom } from "./range-focus/atoms";
-import { stringifyUnknownValue } from "./utils";
+import { getClipboardContent, getRawValue } from "./utils";
 
 export const DataTableContextMenu = <TData,>({
   contextMenuRef,
@@ -82,11 +82,15 @@ export const CellContextMenu = <TData,>({
     return;
   }
 
+  const table = cell.getContext().table;
+  const displayedValue = cell.getValue();
+  const rawValue =
+    getRawValue(table, cell.row.index, cell.column.id) ?? displayedValue;
+
   const handleCopyCell = () => {
     try {
-      const value = cell.getValue();
-      const stringValue = stringifyUnknownValue({ value });
-      copyToClipboard(stringValue);
+      const { text, html } = getClipboardContent(rawValue, displayedValue);
+      copyToClipboard(text, html);
     } catch (error) {
       Logger.error("Failed to copy context menu cell", error);
     }
@@ -98,7 +102,7 @@ export const CellContextMenu = <TData,>({
   const handleFilterCell = (operator: "in" | "not_in") => {
     column.setFilterValue(
       Filter.select({
-        options: [cell.getValue()],
+        options: [rawValue],
         operator,
       }),
     );

package/src/components/data-table/data-table.tsx

@@ -52,6 +52,7 @@ interface DataTableProps<TData> extends Partial<DownloadActionProps> {
   maxHeight?: number;
   columns: ColumnDef<TData>[];
   data: TData[];
+  rawData?: TData[]; // raw data for filtering/copying (present only if format_mapping is provided)
   // Sorting
   manualSorting?: boolean; // server-side sorting
   sorting?: SortingState; // controlled sorting
@@ -103,6 +104,7 @@ const DataTableInternal = <TData,>({
   maxHeight,
   columns,
   data,
+  rawData,
   selection,
   totalColumns,
   totalRows,
@@ -197,6 +199,7 @@ const DataTableInternal = <TData,>({
     ],
     data,
     columns,
+    meta: { rawData },
     getCoreRowModel: getCoreRowModel(),
     // pagination
     rowCount: totalRows === "too_many" ? undefined : totalRows,

package/src/components/data-table/range-focus/__tests__/atoms.test.ts

@@ -403,7 +403,10 @@ describe("cell selection atoms", () => {
     beforeEach(() => {
       // Reset mocks before each test
       vi.mocked(getCellValues).mockClear();
-      vi.mocked(getCellValues).mockReturnValue("mocked cell values");
+      vi.mocked(getCellValues).mockReturnValue({
+        text: "mocked cell values",
+        html: undefined,
+      });
     });
 
     afterEach(() => {
@@ -424,7 +427,10 @@ describe("cell selection atoms", () => {
       });
 
       expect(getCellValues).toHaveBeenCalledWith(mockTable, selectedCells);
-      expect(copyToClipboard).toHaveBeenCalledWith("mocked cell values");
+      expect(copyToClipboard).toHaveBeenCalledWith(
+        "mocked cell values",
+        undefined,
+      );
       expect(onCopyComplete).toHaveBeenCalledWith();
       expect(state.copiedCells).toEqual(selectedCells);
     });

package/src/components/data-table/range-focus/__tests__/test-utils.ts

@@ -56,12 +56,14 @@ export function createMockRow(
 export function createMockTable(
   rows: Row<unknown>[],
   columns: Column<unknown>[],
+  opts?: { rawData?: unknown[] },
 ): Table<unknown> {
   return {
     getRow: (id: string) => rows.find((row) => row.id === id),
     getRowModel: () => ({ rows }),
     getColumn: (columnId: string) => columns.find((col) => col.id === columnId),
     getAllColumns: () => columns,
+    options: { meta: { rawData: opts?.rawData } },
   } as unknown as Table<unknown>;
 }
 

package/src/components/data-table/range-focus/__tests__/utils.test.ts

@@ -20,7 +20,8 @@ describe("getCellValues", () => {
   it("should return empty string for empty selection", () => {
     const mockTable = createMockTable([], []);
     const result = getCellValues(mockTable, new Set());
-    expect(result).toBe("");
+    expect(result.text).toBe("");
+    expect(result.html).toBeUndefined();
   });
 
   it("should ignore select checkbox in tables", () => {
@@ -29,7 +30,8 @@ describe("getCellValues", () => {
     const table = createMockTable([row], []);
 
     const result = getCellValues(table, new Set());
-    expect(result).toBe("");
+    expect(result.text).toBe("");
+    expect(result.html).toBeUndefined();
   });
 
   it("should return single cell value", () => {
@@ -38,7 +40,8 @@ describe("getCellValues", () => {
     const table = createMockTable([row], []);
 
     const result = getCellValues(table, new Set(["0_0"]));
-    expect(result).toBe("test");
+    expect(result.text).toBe("test");
+    expect(result.html).toBeUndefined();
   });
 
   it("should return multiple cells from same row separated by tabs", () => {
@@ -48,7 +51,8 @@ describe("getCellValues", () => {
     const table = createMockTable([row], []);
 
     const result = getCellValues(table, new Set(["0_0", "0_1"]));
-    expect(result).toBe("value1\tvalue2");
+    expect(result.text).toBe("value1\tvalue2");
+    expect(result.html).toBeUndefined();
   });
 
   it("should return multiple rows separated by newlines", () => {
@@ -59,7 +63,8 @@ describe("getCellValues", () => {
     const table = createMockTable([row1, row2], []);
 
     const result = getCellValues(table, new Set(["0_0", "1_0"]));
-    expect(result).toBe("row1\nrow2");
+    expect(result.text).toBe("row1\nrow2");
+    expect(result.html).toBeUndefined();
   });
 
   it("should handle missing rows gracefully", () => {
@@ -69,7 +74,7 @@ describe("getCellValues", () => {
 
     // Row "999" doesn't exist and is skipped
     const result = getCellValues(table, new Set(["0_0", "999_0"]));
-    expect(result).toBe("test");
+    expect(result.text).toBe("test");
   });
 
   it("should include undefined for missing columns on existing rows", () => {
@@ -80,7 +85,7 @@ describe("getCellValues", () => {
 
     // Column "999" doesn't exist but row.getValue() returns undefined
     const result = getCellValues(table, new Set(["0_0", "0_1", "0_999"]));
-    expect(result).toBe("test1\ttest2\tundefined");
+    expect(result.text).toBe("test1\ttest2\tundefined");
   });
 
   it("should handle complex data types", () => {
@@ -91,7 +96,76 @@ describe("getCellValues", () => {
     const table = createMockTable([row], []);
 
     const result = getCellValues(table, new Set(["0_0", "0_1", "0_2"]));
-    expect(result).toBe('{"name":"test"}\tnull\tundefined');
+    expect(result.text).toBe('{"name":"test"}\tnull\tundefined');
+    expect(result.html).toBeUndefined();
+  });
+
+  it("should use raw values when rawData is available", () => {
+    const mimeBundle = {
+      _serialized_mime_bundle: {
+        mimetype: "text/html",
+        data: "<b>formatted_42</b>",
+      },
+    };
+    const cell1 = createMockCell("0_a", mimeBundle);
+    const cell2 = createMockCell("0_b", "displayed_b");
+    const row = createMockRow("0", [cell1, cell2]);
+    const table = createMockTable([row], [], {
+      rawData: [{ a: 42, b: "raw_b" }],
+    });
+
+    const result = getCellValues(table, new Set(["0_a", "0_b"]));
+    expect(result.text).toBe("42\traw_b");
+    expect(result.html).toBe(
+      "<table><tr><td><b>formatted_42</b></td><td>raw_b</td></tr></table>",
+    );
+  });
+
+  it("should fall back to displayed value when rawData is not set", () => {
+    const cell = createMockCell("0_name", "displayed");
+    const row = createMockRow("0", [cell]);
+    const table = createMockTable([row], []);
+
+    const result = getCellValues(table, new Set(["0_name"]));
+    expect(result.text).toBe("displayed");
+    expect(result.html).toBeUndefined();
+  });
+
+  it("should return html table when cells contain mime bundles", () => {
+    const mimeBundle = {
+      _serialized_mime_bundle: {
+        mimetype: "text/html",
+        data: '<a href="https://example.com">link</a>',
+      },
+    };
+    const cell1 = createMockCell("0_url", mimeBundle);
+    const cell2 = createMockCell("0_name", "plain text");
+    const row = createMockRow("0", [cell1, cell2]);
+    const table = createMockTable([row], []);
+
+    const result = getCellValues(table, new Set(["0_url", "0_name"]));
+    expect(result.text).toBe("link\tplain text");
+    expect(result.html).toBe(
+      '<table><tr><td><a href="https://example.com">link</a></td><td>plain text</td></tr></table>',
+    );
+  });
+
+  it("should escape html entities in non-mime cells within html table", () => {
+    const mimeBundle = {
+      _serialized_mime_bundle: {
+        mimetype: "text/html",
+        data: "<b>bold</b>",
+      },
+    };
+    const cell1 = createMockCell("0_html", mimeBundle);
+    const cell2 = createMockCell("0_text", "a < b & c > d");
+    const row = createMockRow("0", [cell1, cell2]);
+    const table = createMockTable([row], []);
+
+    const result = getCellValues(table, new Set(["0_html", "0_text"]));
+    expect(result.html).toBe(
+      "<table><tr><td><b>bold</b></td><td>a &lt; b &amp; c &gt; d</td></tr></table>",
+    );
   });
 });
 

package/src/components/data-table/range-focus/atoms.ts

@@ -167,8 +167,8 @@ const {
       return state;
     }
 
-    const text = getCellValues(table, state.selectedCells);
-    copyToClipboard(text);
+    const { text, html } = getCellValues(table, state.selectedCells);
+    copyToClipboard(text, html);
     onCopyComplete();
 
     return {

package/src/components/data-table/range-focus/utils.ts

@@ -2,17 +2,25 @@
 
 import type { Table } from "@tanstack/react-table";
 import { SELECT_COLUMN_ID } from "../types";
-import { stringifyUnknownValue } from "../utils";
+import { getClipboardContent, getRawValue } from "../utils";
 import type { SelectedCell } from "./atoms";
 
+export interface CellValuesResult {
+  text: string;
+  html: string | undefined;
+}
+
 /**
- * Get the values of the selected cells.
+ * Get the values of the selected cells, preferring raw (unformatted) values
+ * for plain text. If any cell contains HTML (e.g. a hyperlink), also builds
+ * an HTML table so rich content can be preserved on paste.
  */
 export function getCellValues<TData>(
   table: Table<TData>,
   selectedCellIds: Set<string>,
-): string {
-  const rowValues = new Map<string, string[]>();
+): CellValuesResult {
+  const rows = new Map<string, { text: string; html?: string }[]>();
+  let hasHtml = false;
 
   for (const cellId of selectedCellIds) {
     if (cellId.includes(SELECT_COLUMN_ID)) {
@@ -26,17 +34,46 @@ export function getCellValues<TData>(
       continue;
     }
 
-    const cellValue = row.getValue(columnId);
-    const values = rowValues.get(rowId) ?? [];
-    values.push(stringifyUnknownValue({ value: cellValue }));
-    rowValues.set(rowId, values);
+    const rawValue = getRawValue(table, row.index, columnId);
+    const { text, html } = getClipboardContent(
+      rawValue,
+      row.getValue(columnId),
+    );
+
+    if (html) {
+      hasHtml = true;
+    }
+    const cells = rows.get(rowId) ?? [];
+    cells.push({ text, html });
+    rows.set(rowId, cells);
+  }
+
+  const rowValues = [...rows.values()];
+  const tabSeparatedText = rowValues
+    .map((cells) => cells.map((c) => c.text).join("\t"))
+    .join("\n");
+
+  let htmlTable: string | undefined;
+  if (hasHtml) {
+    const htmlTableRows = rowValues
+      .map(
+        (cells) =>
+          `<tr>${cells.map((c) => `<td>${c.html ?? escapeHtml(c.text)}</td>`).join("")}</tr>`,
+      )
+      .join("");
+    htmlTable = `<table>${htmlTableRows}</table>`;
   }
 
-  return getTabSeparatedValues([...rowValues.values()]);
+  return {
+    text: tabSeparatedText,
+    html: htmlTable,
+  };
 }
 
-export function getTabSeparatedValues(values: string[][]) {
-  return values.map((row) => row.join("\t")).join("\n");
+function escapeHtml(str: string): string {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
 }
 
 /**
@@ -74,7 +111,8 @@ export function getNumericValuesFromSelectedCells<TData>(
       continue;
     }
 
-    const value = row.getValue(columnId);
+    const value =
+      getRawValue(table, row.index, columnId) ?? row.getValue(columnId);
 
     // Only accept numbers and strings
     // Skip booleans, null, etc.

package/src/components/data-table/types.ts

@@ -1,8 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { RowData } from "@tanstack/react-table";
 import type { DataType } from "@/core/kernel/messages";
 import { Objects } from "@/utils/objects";
 
+declare module "@tanstack/react-table" {
+  interface TableMeta<TData extends RowData> {
+    rawData?: TData[]; // raw data for filtering/copying (present only if format_mapping is provided)
+  }
+}
+
 export type ColumnName = string;
 
 export const ColumnHeaderStatsKeys = [