@marimo-team/frontend 0.23.1-dev1 → 0.23.1-dev10

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

@@ -22,7 +22,11 @@ import { foldAllBulk, unfoldAllBulk } from "@/core/codemirror/editing/commands";
 import { adaptiveLanguageConfiguration } from "@/core/codemirror/language/extension";
 import { OverridingHotkeyProvider } from "@/core/hotkeys/hotkeys";
 import type { OutputMessage } from "@/core/kernel/messages";
-import { type CollapsibleTree, MultiColumn } from "@/utils/id-tree";
+import {
+  type CollapsibleTree,
+  MultiColumn,
+  type CellColumnId,
+} from "@/utils/id-tree";
 import type { Seconds } from "@/utils/time";
 import {
   exportedForTesting,
@@ -495,6 +499,106 @@ describe("cell reducer", () => {
     `);
   });
 
+  it("can move a cell to an exact index within a column", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+    });
+    actions.createNewCell({
+      cellId: cellId("1"),
+      before: false,
+    });
+
+    const columnId = state.cellIds.atOrThrow(0).id;
+    actions.moveCellToIndex({
+      cellId: firstCellId,
+      columnId,
+      index: 3,
+    });
+
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [1] ''
+
+      [2] ''
+
+      [0] ''
+      "
+    `);
+  });
+
+  it("can move a cell to an exact index across columns", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+    });
+    actions.createNewCell({
+      cellId: cellId("1"),
+      before: false,
+    });
+    actions.addColumnBreakpoint({ cellId: cellId("1") });
+
+    const secondColumnId = state.cellIds.atOrThrow(1).id;
+    actions.moveCellToIndex({
+      cellId: firstCellId,
+      columnId: secondColumnId,
+      index: 1,
+    });
+
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      > col 0
+
+
+      > col 1
+      [1] ''
+
+      [0] ''
+
+      [2] ''
+      "
+    `);
+  });
+
+  it("moveCellToIndex is a no-op when moving to the same position", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+    });
+    actions.createNewCell({
+      cellId: cellId("1"),
+      before: false,
+    });
+
+    const columnId = state.cellIds.atOrThrow(0).id;
+    const before = formatCells(state);
+
+    actions.moveCellToIndex({
+      cellId: firstCellId,
+      columnId,
+      index: 0,
+    });
+
+    expect(formatCells(state)).toBe(before);
+  });
+
+  it("moveCellToIndex is a no-op for an invalid columnId", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+    });
+
+    const before = formatCells(state);
+
+    actions.moveCellToIndex({
+      cellId: firstCellId,
+      columnId: "nonexistent-column" as CellColumnId,
+      index: 0,
+    });
+
+    expect(formatCells(state)).toBe(before);
+  });
+
   it("can run cell and receive cell messages", () => {
     // HAPPY PATH
     /////////////////

package/src/core/cells/cells.ts

@@ -338,6 +338,49 @@ const {
           scrollKey: cellId,
         };
   },
+  moveCellToIndex: (
+    state,
+    action: {
+      cellId: CellId;
+      columnId: CellColumnId;
+      index: number;
+    },
+  ) => {
+    const { cellId, columnId, index } = action;
+    const fromColumn = state.cellIds.findWithId(cellId);
+    const fromIndex = fromColumn.indexOfOrThrow(cellId);
+
+    const destinationColumn = state.cellIds.get(columnId);
+    if (!destinationColumn) {
+      return state;
+    }
+
+    const clampedIndex = Math.max(0, Math.min(index, destinationColumn.length));
+    const adjustedIndex =
+      fromColumn.id === columnId && fromIndex < clampedIndex
+        ? clampedIndex - 1
+        : clampedIndex;
+
+    if (fromColumn.id === columnId && fromIndex === adjustedIndex) {
+      return state;
+    }
+
+    const withoutCell = state.cellIds.deleteById(cellId);
+    const updatedColumn = withoutCell.get(columnId);
+    if (!updatedColumn) {
+      return state;
+    }
+
+    return {
+      ...state,
+      cellIds: withoutCell.insertId(
+        cellId,
+        columnId,
+        Math.max(0, Math.min(adjustedIndex, updatedColumn.length)),
+      ),
+      scrollKey: null,
+    };
+  },
   dropCellOverCell: (state, action: { cellId: CellId; overCellId: CellId }) => {
     const { cellId, overCellId } = action;
 

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

@@ -215,12 +215,13 @@ export function toDocumentChanges(
       ];
     }
 
-    // dropCellOverCell/dropCellOverColumn → set-config + reorder-cells
+    // dropCellOverCell/dropCellOverColumn/moveCellToIndex → 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":
       return columnChanges(prevState, newState);
 
     // updateCellCode → set-code

package/src/plugins/core/registerReactComponent.tsx

@@ -23,6 +23,7 @@ import React, {
 import ReactDOM, { type Root } from "react-dom/client";
 import useEvent from "react-use-event-hook";
 import { type ZodSchema, z } from "zod";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { notebookAtom } from "@/core/cells/cells.ts";
 import { HTMLCellId } from "@/core/cells/ids.ts";
 import { isUninstantiated } from "@/core/cells/utils";
@@ -250,14 +251,16 @@ function PluginSlotInternal<T>(
     <StyleNamespace>
       <div className={`contents ${theme}`}>
         <Suspense fallback={<div />}>
-          {plugin.render({
-            setValue: setValueAndSendInput,
-            value,
-            data: parsedResult.data,
-            children: childNodes,
-            host: hostElement,
-            functions: functionMethods,
-          })}
+          <TooltipProvider>
+            {plugin.render({
+              setValue: setValueAndSendInput,
+              value,
+              data: parsedResult.data,
+              children: childNodes,
+              host: hostElement,
+              functions: functionMethods,
+            })}
+          </TooltipProvider>
         </Suspense>
       </div>
     </StyleNamespace>

package/src/plugins/impl/ButtonPlugin.tsx

@@ -3,7 +3,7 @@
 import type { JSX } from "react";
 import { z } from "zod";
 import { KeyboardHotkeys } from "@/components/shortcuts/renderShortcut";
-import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
+import { Tooltip } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
 import { Button } from "../../components/ui/button";
 import { renderHTML } from "../core/RenderHTML";
@@ -69,11 +69,9 @@ export class ButtonPlugin implements IPlugin<number, Data> {
 
     if (tooltipContent) {
       return (
-        <TooltipProvider>
-          <Tooltip content={tooltipContent} delayDuration={200}>
-            {button}
-          </Tooltip>
-        </TooltipProvider>
+        <Tooltip content={tooltipContent} delayDuration={200}>
+          {button}
+        </Tooltip>
       );
     }
 

package/src/plugins/impl/CodeEditorPlugin.tsx

@@ -4,7 +4,6 @@ import { EditorView } from "@codemirror/view";
 import { type JSX, useEffect, useMemo, useState } from "react";
 import useEvent from "react-use-event-hook";
 import { z } from "zod";
-import { TooltipProvider } from "@/components/ui/tooltip";
 import { useDebounceControlledState } from "@/hooks/useDebounce";
 import { type Theme, useTheme } from "@/theme/useTheme";
 import type { IPlugin, IPluginProps, Setter } from "../types";
@@ -98,22 +97,20 @@ const CodeEditorComponent = (props: CodeEditorComponentProps) => {
   }, [props.debounce, onBlur]);
 
   return (
-    <TooltipProvider>
-      <Labeled label={props.label} align="top" fullWidth={true}>
-        <LazyAnyLanguageCodeMirror
-          className={`cm *:outline-hidden border rounded overflow-hidden ${finalTheme}`}
-          theme={finalTheme === "dark" ? "dark" : "light"}
-          minHeight={minHeight}
-          maxHeight={maxHeight}
-          placeholder={props.placeholder}
-          editable={!props.disabled}
-          value={localValue}
-          language={props.language}
-          onChange={handleChange}
-          showCopyButton={props.showCopyButton}
-          extensions={extensions}
-        />
-      </Labeled>
-    </TooltipProvider>
+    <Labeled label={props.label} align="top" fullWidth={true}>
+      <LazyAnyLanguageCodeMirror
+        className={`cm *:outline-hidden border rounded overflow-hidden ${finalTheme}`}
+        theme={finalTheme === "dark" ? "dark" : "light"}
+        minHeight={minHeight}
+        maxHeight={maxHeight}
+        placeholder={props.placeholder}
+        editable={!props.disabled}
+        value={localValue}
+        language={props.language}
+        onChange={handleChange}
+        showCopyButton={props.showCopyButton}
+        extensions={extensions}
+      />
+    </Labeled>
   );
 };

package/src/plugins/impl/DataEditorPlugin.tsx

@@ -1,10 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import glideCss from "@glideapps/glide-data-grid/dist/index.css?inline";
-import { Tooltip } from "radix-ui";
-
-const TooltipProvider = Tooltip.Provider;
-
 import React, { useState } from "react";
 import { z } from "zod";
 import { inferFieldTypes } from "@/components/data-table/columns";
@@ -63,16 +59,14 @@ export const DataEditorPlugin = createPlugin<Edits>("marimo-data-editor", {
   .withFunctions({})
   .renderer((props) => {
     return (
-      <TooltipProvider>
-        <LoadingDataEditor
-          data={props.data.data}
-          fieldTypes={props.data.fieldTypes}
-          edits={props.value}
-          onEdits={props.setValue}
-          host={props.host}
-          editableColumns={props.data.editableColumns}
-        />
-      </TooltipProvider>
+      <LoadingDataEditor
+        data={props.data.data}
+        fieldTypes={props.data.fieldTypes}
+        edits={props.value}
+        onEdits={props.setValue}
+        host={props.host}
+        editableColumns={props.data.editableColumns}
+      />
     );
   });
 

package/src/plugins/impl/DataTablePlugin.tsx

@@ -1,9 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { Provider as SlotzProvider } from "@marimo-team/react-slotz";
-import { Tooltip } from "radix-ui";
-
-const TooltipProvider = Tooltip.Provider;
 
 import type {
   ColumnFiltersState,
@@ -1123,9 +1120,7 @@ export const TableProviders: React.FC<{ children: React.ReactNode }> = ({
   return (
     <ErrorBoundary>
       <Provider store={store}>
-        <SlotzProvider controller={slotsController}>
-          <TooltipProvider>{children}</TooltipProvider>
-        </SlotzProvider>
+        <SlotzProvider controller={slotsController}>{children}</SlotzProvider>
       </Provider>
     </ErrorBoundary>
   );

package/src/plugins/impl/FileUploadPlugin.tsx

@@ -4,7 +4,7 @@ import { MousePointerSquareDashedIcon, Upload } from "lucide-react";
 import type { JSX } from "react";
 import { useDropzone } from "react-dropzone";
 import { z } from "zod";
-import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
+import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
@@ -184,42 +184,40 @@ export const FileUpload = (props: FileUploadProps): JSX.Element => {
     //   link button to the hidden input element
     const label = props.label ?? "Upload";
     return (
-      <TooltipProvider>
-        <div className="flex flex-row items-center justify-start gap-2">
-          <button
-            data-testid="marimo-plugin-file-upload-button"
-            {...getRootProps({})}
-            className={buttonVariants({
-              variant: "secondary",
-              size: "xs",
-            })}
-          >
-            {renderHTML({ html: label })}
-            <Upload size={14} className="ml-2" />
-          </button>
-          <input {...getInputProps({})} type="file" />
-          {uploaded ? (
-            <>
-              <Tooltip content={uploadedFiles}>
-                <span className="text-xs text-muted-foreground">
-                  Uploaded{" "}
-                  <span className="underline cursor-pointer">
-                    {value.length} {value.length === 1 ? "file" : "files"}.
-                  </span>
+      <div className="flex flex-row items-center justify-start gap-2">
+        <button
+          data-testid="marimo-plugin-file-upload-button"
+          {...getRootProps({})}
+          className={buttonVariants({
+            variant: "secondary",
+            size: "xs",
+          })}
+        >
+          {renderHTML({ html: label })}
+          <Upload size={14} className="ml-2" />
+        </button>
+        <input {...getInputProps({})} type="file" />
+        {uploaded ? (
+          <>
+            <Tooltip content={uploadedFiles}>
+              <span className="text-xs text-muted-foreground">
+                Uploaded{" "}
+                <span className="underline cursor-pointer">
+                  {value.length} {value.length === 1 ? "file" : "files"}.
                 </span>
-              </Tooltip>
+              </span>
+            </Tooltip>
 
-              <button
-                className={cn("text-xs text-destructive hover:underline")}
-                onClick={() => setValue([])}
-                type="button"
-              >
-                Click to clear files.
-              </button>
-            </>
-          ) : null}
-        </div>
-      </TooltipProvider>
+            <button
+              className={cn("text-xs text-destructive hover:underline")}
+              onClick={() => setValue([])}
+              type="button"
+            >
+              Click to clear files.
+            </button>
+          </>
+        ) : null}
+      </div>
     );
   }
 
@@ -274,14 +272,12 @@ export const FileUpload = (props: FileUploadProps): JSX.Element => {
         {uploaded ? (
           <div className="flex flex-row gap-1">
             <div className="text-xs text-muted-foreground">
-              <TooltipProvider>
-                Uploaded{" "}
-                <Tooltip content={uploadedFiles}>
-                  <span className="underline cursor-pointer">
-                    {value.length} {value.length === 1 ? "file" : "files"}.
-                  </span>
-                </Tooltip>
-              </TooltipProvider>
+              Uploaded{" "}
+              <Tooltip content={uploadedFiles}>
+                <span className="underline cursor-pointer">
+                  {value.length} {value.length === 1 ? "file" : "files"}.
+                </span>
+              </Tooltip>
             </div>
             <span className="text-xs text-destructive hover:underline hover:cursor-pointer">
               <button

package/src/plugins/impl/FormPlugin.tsx

@@ -3,7 +3,7 @@
 import { Loader2Icon } from "lucide-react";
 import { type JSX, useEffect, useRef, useState } from "react";
 import { z } from "zod";
-import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
+import { Tooltip } from "@/components/ui/tooltip";
 import type { UIElementId } from "@/core/cells/ids";
 import {
   MarimoValueInputEvent,
@@ -72,11 +72,7 @@ export const FormPlugin = createPlugin("marimo-form")
       .output(z.string().nullish()),
   })
   .renderer(({ data, functions, ...rest }) => {
-    return (
-      <TooltipProvider>
-        <Form {...data} {...rest} {...functions} />
-      </TooltipProvider>
-    );
+    return <Form {...data} {...rest} {...functions} />;
   });
 
 export interface FormWrapperProps<T>

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -3,7 +3,6 @@
 import type { UIMessage } from "ai";
 import React, { Suspense } from "react";
 import { z } from "zod";
-import { TooltipProvider } from "@/components/ui/tooltip";
 import { createPlugin } from "@/plugins/core/builder";
 import { rpc } from "@/plugins/core/rpc";
 import { Arrays } from "@/utils/arrays";
@@ -73,23 +72,21 @@ export const ChatPlugin = createPlugin<{ messages: UIMessage[] }>(
       .output(z.unknown()),
   })
   .renderer((props) => (
-    <TooltipProvider>
-      <Suspense>
-        <LazyChatbot
-          prompts={props.data.prompts}
-          showConfigurationControls={props.data.showConfigurationControls}
-          maxHeight={props.data.maxHeight}
-          allowAttachments={props.data.allowAttachments}
-          disabled={props.data.disabled}
-          config={props.data.config}
-          get_chat_history={props.functions.get_chat_history}
-          delete_chat_history={props.functions.delete_chat_history}
-          delete_chat_message={props.functions.delete_chat_message}
-          send_prompt={props.functions.send_prompt}
-          value={props.value?.messages || Arrays.EMPTY}
-          setValue={(messages) => props.setValue({ messages })}
-          host={props.host}
-        />
-      </Suspense>
-    </TooltipProvider>
+    <Suspense>
+      <LazyChatbot
+        prompts={props.data.prompts}
+        showConfigurationControls={props.data.showConfigurationControls}
+        maxHeight={props.data.maxHeight}
+        allowAttachments={props.data.allowAttachments}
+        disabled={props.data.disabled}
+        config={props.data.config}
+        get_chat_history={props.functions.get_chat_history}
+        delete_chat_history={props.functions.delete_chat_history}
+        delete_chat_message={props.functions.delete_chat_message}
+        send_prompt={props.functions.send_prompt}
+        value={props.value?.messages || Arrays.EMPTY}
+        setValue={(messages) => props.setValue({ messages })}
+        host={props.host}
+      />
+    </Suspense>
   ));

package/src/plugins/impl/data-explorer/DataExplorerPlugin.tsx

@@ -3,7 +3,6 @@ import "../vega/vega.css";
 
 import React from "react";
 import { z } from "zod";
-import { TooltipProvider } from "@/components/ui/tooltip";
 import { createPlugin } from "@/plugins/core/builder";
 import type { DataExplorerState } from "./ConnectedDataExplorerComponent";
 
@@ -21,11 +20,9 @@ export const DataExplorerPlugin = createPlugin<DataExplorerState>(
     }),
   )
   .renderer((props) => (
-    <TooltipProvider>
-      <LazyDataExplorerComponent
-        {...props.data}
-        value={props.value}
-        setValue={props.setValue}
-      />
-    </TooltipProvider>
+    <LazyDataExplorerComponent
+      {...props.data}
+      value={props.value}
+      setValue={props.setValue}
+    />
   ));

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

@@ -297,13 +297,7 @@ export class MatplotlibRenderer {
     // Create canvas
     const canvas = document.createElement("canvas");
     canvas.className = "block cursor-crosshair";
-    const dpr = globalThis.devicePixelRatio ?? 1;
-    canvas.width = this.#state.width * dpr;
-    canvas.height = this.#state.height * dpr;
-    canvas.style.width = `${this.#state.width}px`;
-    canvas.style.maxWidth = "100%";
-    canvas.style.height = "auto";
-    canvas.style.aspectRatio = `${this.#state.width} / ${this.#state.height}`;
+    this.#syncCanvasSize(canvas);
     canvas.style.touchAction = "none";
     container.append(canvas);
     this.#canvas = canvas;
@@ -322,6 +316,10 @@ export class MatplotlibRenderer {
       signal: options.signal,
     });
 
+    // Watch for devicePixelRatio changes (e.g. browser zoom, moving between
+    // displays). matchMedia fires exactly once per DPR transition.
+    this.#watchDevicePixelRatio(options.signal);
+
     // Clean up on abort
     options.signal.addEventListener("abort", () => {
       cancelAnimationFrame(this.#rafId);
@@ -333,6 +331,38 @@ export class MatplotlibRenderer {
     this.#restoreSelection(this.#state.value);
   }
 
+  /** Set the canvas buffer + CSS size to match current logical size and DPR. */
+  #syncCanvasSize(canvas: HTMLCanvasElement = this.#canvas): void {
+    const dpr = globalThis.devicePixelRatio ?? 1;
+    const { width, height } = this.#state;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    canvas.style.width = `${width}px`;
+    canvas.style.maxWidth = "100%";
+    canvas.style.height = "auto";
+    canvas.style.aspectRatio = `${width} / ${height}`;
+  }
+
+  /**
+   * Observe devicePixelRatio changes via matchMedia. Each listener fires once
+   * per transition, so we re-register after every change.
+   */
+  #watchDevicePixelRatio(signal: AbortSignal): void {
+    if (signal.aborted) {
+      return;
+    }
+    const mq = matchMedia(
+      `(resolution: ${globalThis.devicePixelRatio ?? 1}dppx)`,
+    );
+    const onChange = () => {
+      this.#syncCanvasSize();
+      this.#drawCanvas();
+      // Re-register for the next DPR transition
+      this.#watchDevicePixelRatio(signal);
+    };
+    mq.addEventListener("change", onChange, { once: true, signal });
+  }
+
   update(state: MatplotlibState): void {
     const prev = this.#state;
     this.#state = state;
@@ -341,13 +371,7 @@ export class MatplotlibRenderer {
 
     // Update canvas dimensions if changed
     if (state.width !== prev.width || state.height !== prev.height) {
-      const dpr = globalThis.devicePixelRatio ?? 1;
-      this.#canvas.width = state.width * dpr;
-      this.#canvas.height = state.height * dpr;
-      this.#canvas.style.width = `${state.width}px`;
-      this.#canvas.style.maxWidth = "100%";
-      this.#canvas.style.height = "auto";
-      this.#canvas.style.aspectRatio = `${state.width} / ${state.height}`;
+      this.#syncCanvasSize();
       needsRedraw = true;
     }
 

package/src/plugins/impl/vega/VegaPlugin.tsx

@@ -8,7 +8,6 @@ import type { Data, VegaComponentState } from "./vega-component";
 
 import "./vega.css";
 import React, { type JSX } from "react";
-import { TooltipProvider } from "@/components/ui/tooltip";
 
 const LazyVegaComponent = React.lazy(() => import("./vega-component"));
 
@@ -29,13 +28,11 @@ export class VegaPlugin implements IPlugin<VegaComponentState, Data> {
 
   render(props: IPluginProps<VegaComponentState, Data>): JSX.Element {
     return (
-      <TooltipProvider>
-        <LazyVegaComponent
-          value={props.value}
-          setValue={props.setValue}
-          {...props.data}
-        />
-      </TooltipProvider>
+      <LazyVegaComponent
+        value={props.value}
+        setValue={props.setValue}
+        {...props.data}
+      />
     );
   }
 }