@marimo-team/frontend 0.23.7-dev6 → 0.23.7-dev61

package/src/components/home/components.tsx

@@ -16,6 +16,7 @@ import {
   LinkIcon,
   MessagesSquareIcon,
   OrbitIcon,
+  PackageIcon,
   YoutubeIcon,
 } from "lucide-react";
 import type React from "react";
@@ -58,6 +59,11 @@ const TUTORIALS: Record<
     FileIcon,
     "Understand marimo's pure-Python file format",
   ],
+  "external-dependencies": [
+    "External dependencies",
+    PackageIcon,
+    "Declare dependencies with Python script metadata",
+  ],
   "for-jupyter-users": [
     "For Jupyter users",
     OrbitIcon,

package/src/components/pages/run-page.tsx

@@ -34,7 +34,10 @@ const RunPage = (props: Props) => {
 
 const Watermark = () => {
   return (
-    <div className="fixed bottom-0 right-0 z-50" data-testid="watermark">
+    <div
+      className="fixed bottom-0 right-0 z-50 print:hidden"
+      data-testid="watermark"
+    >
       <a
         href={Constants.githubPage}
         target="_blank"

package/src/components/ui/combobox.tsx

@@ -39,6 +39,7 @@ interface ComboboxCommonProps<TValue> {
   className?: string;
   id?: string;
   keepPopoverOpenOnSelect?: boolean;
+  disabled?: boolean;
 }
 
 type ComboboxFilterProps =
@@ -95,6 +96,7 @@ export const Combobox = <TValue,>({
   chipsClassName,
   keepPopoverOpenOnSelect,
   id,
+  disabled = false,
   ...rest
 }: ComboboxProps<TValue>) => {
   const [open = false, setOpen] = useControllableState({
@@ -168,19 +170,30 @@ export const Combobox = <TValue,>({
 
   return (
     <div className={cn("relative")} {...rest}>
-      <Popover open={open} onOpenChange={setOpen}>
+      <Popover
+        open={open}
+        onOpenChange={(v) => {
+          if (disabled && v) {
+            return;
+          }
+          setOpen(v);
+        }}
+      >
         <PopoverTrigger asChild={true}>
-          <div
+          <button
             id={id}
+            type="button"
             className={cn(
-              "flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50",
+              "flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid",
+              disabled && "cursor-not-allowed opacity-50",
               className,
             )}
             aria-expanded={open}
+            aria-disabled={disabled}
           >
             <span className="truncate flex-1 min-w-0">{renderValue()}</span>
             <ChevronDownIcon className="ml-3 w-4 h-4 opacity-50 shrink-0" />
-          </div>
+          </button>
         </PopoverTrigger>
         <PopoverContent
           className="w-full min-w-(--radix-popover-trigger-width) p-0"
@@ -215,9 +228,15 @@ export const Combobox = <TValue,>({
                   {displayValue?.(val) ?? String(val)}
                   <XCircle
                     onClick={() => {
+                      if (disabled) {
+                        return;
+                      }
                       handleSelect(val);
                     }}
-                    className="w-3 h-3 opacity-50 hover:opacity-100 ml-1 cursor-pointer"
+                    className={cn(
+                      "w-3 h-3 opacity-50 hover:opacity-100 ml-1 cursor-pointer",
+                      disabled && "pointer-events-none",
+                    )}
                   />
                 </Badge>
               );

package/src/components/ui/number-field.tsx

@@ -62,6 +62,7 @@ export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
               slot="increment"
               isDisabled={props.isDisabled}
               variant={variant}
+              excludeFromTabOrder={true}
             >
               <ChevronUp
                 aria-hidden={true}
@@ -73,6 +74,7 @@ export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
               slot="decrement"
               isDisabled={props.isDisabled}
               variant={variant}
+              excludeFromTabOrder={true}
             >
               <ChevronDown
                 aria-hidden={true}

package/src/core/ai/tools/__tests__/registry.test.ts

@@ -18,13 +18,11 @@ describe("FrontendToolRegistry", () => {
 
   it("invokes a tool with valid args and validates input/output", async () => {
     const registry = new FrontendToolRegistry([new TestFrontendTool()]);
-    const response = await registry.invoke(
-      "test_frontend_tool",
-      {
-        name: "Alice",
-      },
-      {} as never,
-    );
+    const response = await registry.invoke({
+      toolName: "test_frontend_tool",
+      rawArgs: { name: "Alice" },
+      toolContext: {} as never,
+    });
 
     // Check InvokeResult wrapper
     expect(response.tool_name).toBe("test_frontend_tool");
@@ -47,11 +45,11 @@ describe("FrontendToolRegistry", () => {
 
   it("returns a structured error on invalid args", async () => {
     const registry = new FrontendToolRegistry([new TestFrontendTool()]);
-    const response = await registry.invoke(
-      "test_frontend_tool",
-      {},
-      {} as never,
-    );
+    const response = await registry.invoke({
+      toolName: "test_frontend_tool",
+      rawArgs: {},
+      toolContext: {} as never,
+    });
 
     // Check InvokeResult wrapper
     expect(response.tool_name).toBe("test_frontend_tool");

package/src/core/ai/tools/registry.ts

@@ -52,11 +52,15 @@ export class FrontendToolRegistry {
     return tool;
   }
 
-  async invoke<TName extends string>(
-    toolName: TName,
-    rawArgs: unknown,
-    toolContext: ToolNotebookContext,
-  ): Promise<InvokeResult<TName>> {
+  async invoke<TName extends string>({
+    toolName,
+    rawArgs,
+    toolContext,
+  }: {
+    toolName: TName;
+    rawArgs: unknown;
+    toolContext: ToolNotebookContext;
+  }): Promise<InvokeResult<TName>> {
     const tool = this.getToolOrThrow(toolName);
     const handler = tool.handler;
     const inputSchema = tool.schema;

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

@@ -212,6 +212,20 @@ describe("cell reducer", () => {
     `);
   });
 
+  it("can add a cell with name and config", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+      code: "x = 1",
+      name: "My Cell",
+      config: { hide_code: true, disabled: false },
+    });
+    const newCellId = state.cellIds.inOrderIds[1];
+    expect(state.cellData[newCellId].name).toBe("My Cell");
+    expect(state.cellData[newCellId].config.hide_code).toBe(true);
+    expect(state.cellData[newCellId].config.disabled).toBe(false);
+  });
+
   it("can delete a Python cell and undo delete", () => {
     actions.createNewCell({
       cellId: firstCellId,
@@ -602,6 +616,179 @@ describe("cell reducer", () => {
     expect(formatCells(state)).toBe(before);
   });
 
+  it("can move multiple cells relative to target", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+    });
+    actions.createNewCell({
+      cellId: cellId("1"),
+      before: false,
+    });
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [0] ''
+
+      [1] ''
+
+      [2] ''
+      "
+    `);
+
+    // Move first two cells after the third
+    actions.moveCellsRelativeTo({
+      cellIds: [firstCellId, cellId("1")],
+      targetCellId: cellId("2"),
+      position: "after",
+    });
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [2] ''
+
+      [0] ''
+
+      [1] ''
+      "
+    `);
+  });
+
+  it("can undo cut-paste (move with previousPlacements)", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+    });
+    actions.createNewCell({
+      cellId: cellId("1"),
+      before: false,
+    });
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [0] ''
+
+      [1] ''
+
+      [2] ''
+      "
+    `);
+
+    const col = state.cellIds.findWithId(firstCellId);
+    const previousPlacements = [
+      {
+        columnId: col.id,
+        index: col.indexOfOrThrow(
+          firstCellId,
+        ) as import("@/utils/id-tree").CellIndex,
+      },
+      {
+        columnId: col.id,
+        index: col.indexOfOrThrow(
+          cellId("1"),
+        ) as import("@/utils/id-tree").CellIndex,
+      },
+    ];
+
+    actions.moveCellsRelativeTo({
+      cellIds: [firstCellId, cellId("1")],
+      targetCellId: cellId("2"),
+      position: "after",
+      previousPlacements,
+    });
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [2] ''
+
+      [0] ''
+
+      [1] ''
+      "
+    `);
+
+    actions.undoDeleteCell();
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [0] ''
+
+      [1] ''
+
+      [2] ''
+      "
+    `);
+  });
+
+  it("undo order: cut-paste then delete — first undo restores delete, second undo undoes move", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+    });
+    actions.createNewCell({
+      cellId: cellId("1"),
+      before: false,
+    });
+
+    const col = state.cellIds.findWithId(firstCellId);
+    const previousPlacements = [
+      {
+        columnId: col.id,
+        index: col.indexOfOrThrow(
+          firstCellId,
+        ) as import("@/utils/id-tree").CellIndex,
+      },
+      {
+        columnId: col.id,
+        index: col.indexOfOrThrow(
+          cellId("1"),
+        ) as import("@/utils/id-tree").CellIndex,
+      },
+    ];
+
+    actions.moveCellsRelativeTo({
+      cellIds: [firstCellId, cellId("1")],
+      targetCellId: cellId("2"),
+      position: "after",
+      previousPlacements,
+    });
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [2] ''
+
+      [0] ''
+
+      [1] ''
+      "
+    `);
+
+    actions.deleteCell({ cellId: cellId("2") });
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [0] ''
+
+      [1] ''
+      "
+    `);
+
+    actions.undoDeleteCell();
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [3] ''
+
+      [0] ''
+
+      [1] ''
+      "
+    `);
+
+    actions.undoDeleteCell();
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [0] ''
+
+      [1] ''
+
+      [3] ''
+      "
+    `);
+  });
+
   it("can run cell and receive cell messages", () => {
     // HAPPY PATH
     /////////////////

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

@@ -0,0 +1,123 @@
+/* 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 { cellId } from "@/__tests__/branded";
+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 };
+}
+
+describe("pending-cut-service", () => {
+  it("markForCut sets cellIds", () => {
+    const { wrapper, store } = createTestWrapper();
+    const cellIds: CellId[] = [cellId("cell-1"), cellId("cell-2")];
+
+    const { result } = renderHook(
+      () => ({
+        actions: usePendingCutActions(),
+        state: usePendingCutState(),
+      }),
+      { wrapper },
+    );
+
+    act(() => {
+      result.current.actions.markForCut({ cellIds });
+    });
+
+    const state = store.get(pendingCutStateAtom);
+    expect(state.cellIds).toEqual(new Set(cellIds));
+  });
+
+  it("clear resets to initial state", () => {
+    const { wrapper, store } = createTestWrapper();
+    const cellIds: CellId[] = [cellId("cell-1")];
+
+    const { result } = renderHook(
+      () => ({
+        actions: usePendingCutActions(),
+        state: usePendingCutState(),
+      }),
+      { wrapper },
+    );
+
+    act(() => {
+      result.current.actions.markForCut({ cellIds });
+    });
+    expect(store.get(pendingCutStateAtom).cellIds.size).toBe(1);
+
+    act(() => {
+      result.current.actions.clear();
+    });
+    const state = store.get(pendingCutStateAtom);
+    expect(state.cellIds.size).toBe(0);
+  });
+
+  it("useIsPendingCut returns true when cellId is marked for cut", () => {
+    const { wrapper } = createTestWrapper();
+    const targetCellId = cellId("cell-1");
+
+    const { result: actionsResult } = renderHook(() => usePendingCutActions(), {
+      wrapper,
+    });
+    const { result: isPendingResult } = renderHook(
+      () => useIsPendingCut(targetCellId),
+      { wrapper },
+    );
+
+    expect(isPendingResult.current).toBe(false);
+
+    act(() => {
+      actionsResult.current.markForCut({ cellIds: [targetCellId] });
+    });
+
+    expect(isPendingResult.current).toBe(true);
+  });
+
+  it("useIsPendingCut returns false when cellId is not marked for cut", () => {
+    const { wrapper } = createTestWrapper();
+    const { result } = renderHook(() => useIsPendingCut(cellId("other-cell")), {
+      wrapper,
+    });
+
+    const { result: actionsResult } = renderHook(() => usePendingCutActions(), {
+      wrapper,
+    });
+    act(() => {
+      actionsResult.current.markForCut({ cellIds: [cellId("cell-1")] });
+    });
+
+    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: [cellId("cell-1")] });
+    });
+
+    expect(hasPendingResult.current).toBe(true);
+  });
+});