@marimo-team/islands 0.25.3-dev20 → 0.25.3-dev201

package/src/components/tracing/tracing.tsx

@@ -52,6 +52,7 @@ export const Tracing: React.FC = () => {
 
   const { theme } = useTheme();
   const [chartPosition, setChartPosition] = useState<ChartPosition>("above");
+  const chartPositionId = React.useId();
   const panelSection = usePanelSection();
 
   const toggleChartPosition = () => {
@@ -76,11 +77,12 @@ export const Tracing: React.FC = () => {
     <div className="py-1 px-2 overflow-y-scroll h-full">
       <div className="flex flex-row justify-start gap-3">
         <div className="flex flex-row gap-1 items-center">
-          <label htmlFor="chartPosition" className="text-xs">
+          <label htmlFor={chartPositionId} className="text-xs">
             Inline chart
           </label>
           <input
             type="checkbox"
+            id={chartPositionId}
             name="chartPosition"
             data-testid="chartPosition"
             onClick={toggleChartPosition}
@@ -145,11 +147,11 @@ const TraceBlock: React.FC<{
   isMostRecentRun: boolean;
   chartPosition: ChartPosition;
   theme: ResolvedTheme;
-}> = ({ run, isMostRecentRun, chartPosition, isExpanded, theme }) => {
+}> = ({ run, isMostRecentRun, chartPosition, isExpanded: expanded, theme }) => {
   const setExpandedRuns = useSetAtom(expandedRunsAtom);
   // We prefer the user's last click, but if they haven't clicked on this run,
   // we expand the most recent run by default, otherwise we collapse it.
-  isExpanded = isExpanded ?? isMostRecentRun;
+  const isExpanded = expanded ?? isMostRecentRun;
 
   const onToggleExpanded = () => {
     setExpandedRuns((prev) => {
@@ -163,28 +165,31 @@ const TraceBlock: React.FC<{
   const chevron = <Icon height={16} className="inline" />;
 
   const traceTitle = (
-    <span className="text-sm cursor-pointer" onClick={onToggleExpanded}>
+    <button
+      type="button"
+      aria-expanded={isExpanded}
+      className="text-sm cursor-pointer"
+      onClick={onToggleExpanded}
+    >
       Run - {formatLogTimestamp(run.runStartTime)}
       {chevron}
-    </span>
+    </button>
   );
 
-  if (!isExpanded) {
-    return (
-      <div key={run.runId} className="flex flex-col">
-        <pre className="font-mono font-semibold">{traceTitle}</pre>
-      </div>
-    );
-  }
-
   return (
-    <TraceBlockBody
-      key={run.runId}
-      run={run}
-      chartPosition={chartPosition}
-      theme={theme}
-      title={traceTitle}
-    />
+    <div
+      className={cn(
+        "grid grid-cols-1",
+        isExpanded &&
+          chartPosition === "sideBySide" &&
+          "grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_1fr]",
+      )}
+    >
+      <pre className="font-mono font-semibold">{traceTitle}</pre>
+      {isExpanded && (
+        <TraceBlockBody run={run} chartPosition={chartPosition} theme={theme} />
+      )}
+    </div>
   );
 };
 
@@ -192,8 +197,7 @@ const TraceBlockBody: React.FC<{
   run: Run;
   chartPosition: ChartPosition;
   theme: ResolvedTheme;
-  title: React.ReactNode;
-}> = ({ run, chartPosition, theme, title }) => {
+}> = ({ run, chartPosition, theme }) => {
   const [hoveredCellId, setHoveredCellId] = useState<CellId | null>();
   const vegaRef = useRef<HTMLDivElement>(null);
   const { ref, width = 300 } = useResizeObserver<HTMLDivElement>();
@@ -205,7 +209,7 @@ const TraceBlockBody: React.FC<{
       const elapsedTime = cellRun.elapsedTime ?? 0;
       return {
         cell: cellRun.cellId,
-        cellNum: cellIds.inOrderIds.indexOf(cellRun.cellId),
+        cellNum: cellIds.indexOf(cellRun.cellId),
         startTimestamp: formatChartTime(cellRun.startTime),
         endTimestamp: formatChartTime(cellRun.startTime + elapsedTime),
         elapsedTime: formatElapsedTime(elapsedTime * 1000),
@@ -264,16 +268,22 @@ const TraceBlockBody: React.FC<{
   }, [embed]);
 
   const traceRows = (
-    <TraceRows
-      run={run}
-      hoveredCellId={hoveredCellId}
-      hiddenInputElementId={hiddenInputElementId}
-    />
+    <div className="font-mono font-semibold">
+      <TraceRows
+        run={run}
+        hoveredCellId={hoveredCellId}
+        hiddenInputElementId={hiddenInputElementId}
+      />
+    </div>
   );
 
   const chartElement = (
     <div
-      className={chartPosition === "sideBySide" ? "-mt-0.5 flex-1" : ""}
+      className={
+        chartPosition === "sideBySide"
+          ? "-mt-0.5 col-start-2 row-start-1 row-span-2 min-w-0"
+          : "min-w-0"
+      }
       ref={ref}
     >
       <Suspense>
@@ -284,24 +294,18 @@ const TraceBlockBody: React.FC<{
 
   if (chartPosition === "above") {
     return (
-      <div key={run.runId} className="flex flex-col">
-        <pre className="font-mono font-semibold">
-          {title}
-          {chartElement}
-          {traceRows}
-        </pre>
-      </div>
+      <>
+        {chartElement}
+        {traceRows}
+      </>
     );
   }
 
   return (
-    <div key={run.runId} className="flex flex-row">
-      <pre className="font-mono font-semibold">
-        {title}
-        {traceRows}
-      </pre>
+    <>
+      {traceRows}
       {chartElement}
-    </div>
+    </>
   );
 };
 

package/src/components/ui/__tests__/draggable-popover.test.tsx

@@ -0,0 +1,24 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { expect, it } from "vitest";
+import { DraggablePopover } from "../draggable-popover";
+
+it("moves from the keyboard handle without intercepting child input arrows", () => {
+  render(
+    <DraggablePopover open={true}>
+      <input aria-label="Filter" />
+    </DraggablePopover>,
+  );
+  const handle = screen.getByRole("button", {
+    name: "Move popup with arrow keys",
+  });
+  const popup = screen.getByRole("dialog");
+  fireEvent.keyDown(handle, { key: "ArrowRight" });
+  fireEvent.keyDown(handle, { key: "ArrowDown" });
+  expect(popup).toHaveStyle({ left: "10px", top: "10px" });
+  expect(
+    fireEvent.keyDown(screen.getByRole("textbox"), { key: "ArrowLeft" }),
+  ).toBe(true);
+  expect(popup).toHaveStyle({ left: "10px", top: "10px" });
+});

package/src/components/ui/__tests__/range-slider.test.tsx

@@ -0,0 +1,165 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import * as React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { RangeSlider } from "../range-slider";
+
+vi.mock("react-aria", () => ({
+  useLocale: () => ({ locale: "en-US" }),
+}));
+
+vi.mock("../tooltip", () => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  );
+  const Content = ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  );
+
+  return {
+    TooltipContent: Content,
+    TooltipPortal: Wrapper,
+    TooltipProvider: Wrapper,
+    TooltipRoot: Wrapper,
+    TooltipTrigger: Wrapper,
+  };
+});
+
+vi.mock("radix-ui", () => {
+  const Primitive = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+  >(({ children, ...props }, ref) => (
+    <div ref={ref} {...props}>
+      {children}
+    </div>
+  ));
+  Primitive.displayName = "Primitive";
+
+  return {
+    Slider: {
+      Root: Primitive,
+      Track: Primitive,
+      Range: Primitive,
+      Thumb: Primitive,
+    },
+  };
+});
+
+describe("RangeSlider", () => {
+  it("formats both tooltip values without floating-point artifacts", () => {
+    const { getAllByText, queryByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={10}
+        step={0.01}
+        value={[1.2, 1.500000000000001]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getAllByText("1.2")).toHaveLength(1);
+    expect(getAllByText("1.5")).toHaveLength(1);
+    expect(queryByText("1.500000000000001")).toBeNull();
+  });
+
+  it("keeps the legacy precision when no step is supplied", () => {
+    const { getAllByText, queryByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={10}
+        value={[1.2, 1.500000000000001]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getAllByText("1.2")).toHaveLength(1);
+    expect(getAllByText("1.5")).toHaveLength(1);
+    expect(queryByText("1.500000000000001")).toBeNull();
+  });
+
+  it("retains value precision when no step is supplied", () => {
+    const { getByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={10}
+        value={[1.2345, 1.500000000000001]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getByText("1.2345")).toBeDefined();
+    expect(getByText("1.5")).toBeDefined();
+  });
+
+  it("preserves precision from finer-grained steps", () => {
+    const { getAllByText, queryByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={10}
+        step={0.001}
+        value={[1.234, 1.235000000000001]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getAllByText("1.234")).toHaveLength(1);
+    expect(getAllByText("1.235")).toHaveLength(1);
+    expect(queryByText("1.23")).toBeNull();
+  });
+
+  it("preserves precision for small tooltip values", () => {
+    const { getByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={0.01}
+        step={0.00001}
+        value={[0.00123, 0.0012400000000000002]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getByText("1.23e-3")).toBeDefined();
+    expect(getByText("1.24e-3")).toBeDefined();
+  });
+
+  it("infers precision from custom mapped steps", () => {
+    const steps = [1, 1.234, 2];
+    const { getAllByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={steps.length - 1}
+        step={1}
+        steps={steps}
+        value={[0, 1]}
+        valueMap={(value) => steps[value]}
+      />,
+    );
+
+    expect(getAllByText("1")).toHaveLength(1);
+    expect(getAllByText("1.234")).toHaveLength(1);
+  });
+
+  it("preserves decimals from the slider origin", () => {
+    const { getAllByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0.5}
+        max={10.5}
+        step={1}
+        value={[0.5, 1.5]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getAllByText("0.5")).toHaveLength(1);
+    expect(getAllByText("1.5")).toHaveLength(1);
+  });
+});

package/src/components/ui/alert-dialog.tsx

@@ -28,7 +28,7 @@ AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, children, ...props }, ref) => (
+>(({ className, children: _children, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-background/80 backdrop-blur-xs transition-opacity animate-in fade-in",

package/src/components/ui/draggable-popover.tsx

@@ -53,14 +53,36 @@ export const DraggablePopover = ({
           top: position.y,
         }}
       >
-        <div
+        <button
+          type="button"
+          aria-label="Move popup with arrow keys"
           onMouseDown={handleMouseDown}
+          onKeyDown={(e) => {
+            const directions: Record<
+              string,
+              { x: number; y: number } | undefined
+            > = {
+              ArrowLeft: { x: -10, y: 0 },
+              ArrowRight: { x: 10, y: 0 },
+              ArrowUp: { x: 0, y: -10 },
+              ArrowDown: { x: 0, y: 10 },
+            };
+            const offset = directions[e.key];
+            if (offset) {
+              e.preventDefault();
+              e.stopPropagation();
+              setPosition((previous) => ({
+                x: previous.x + offset.x,
+                y: previous.y + offset.y,
+              }));
+            }
+          }}
           className={`flex items-center justify-center absolute top-0 left-1/2 -translate-x-1/2 ${
             isDragging ? "cursor-grabbing" : "cursor-grab"
           }`}
         >
           <GripHorizontalIcon className="h-5 w-5 mt-1 text-muted-foreground/40" />
-        </div>
+        </button>
         {children}
       </PopoverContent>
     </Popover>

package/src/components/ui/range-slider.tsx

@@ -4,7 +4,10 @@ import { Slider as SliderPrimitive } from "radix-ui";
 import * as React from "react";
 import { useLocale } from "react-aria";
 import { cn } from "@/utils/cn";
-import { prettyScientificNumber } from "@/utils/numbers";
+import {
+  fractionDigitsForSlider,
+  prettyScientificNumber,
+} from "@/utils/numbers";
 import { useBoolean } from "../../hooks/useBoolean";
 import {
   TooltipContent,
@@ -20,9 +23,15 @@ const RangeSlider = React.forwardRef<
     valueMap: (sliderValue: number) => number;
     steps?: number[];
   }
->(({ className, valueMap, ...props }, ref) => {
+>(({ className, steps, valueMap, ...props }, ref) => {
   const [open, openActions] = useBoolean(false);
   const { locale } = useLocale();
+  const fractionDigits = fractionDigitsForSlider(
+    props.step,
+    steps,
+    props.min,
+    props.value?.map(valueMap),
+  );
 
   const isDraggingRange = React.useRef(false);
   const dragStartX = React.useRef(0);
@@ -94,11 +103,9 @@ const RangeSlider = React.forwardRef<
     const [origLeft, origRight] = dragStartValue.current;
     const rangeWidth = origRight - origLeft;
 
-    const steps = props.steps;
-    const step: number =
-      steps && steps.length > 1
-        ? Math.min(...steps.slice(1).map((s, i) => s - steps[i]))
-        : (props.step ?? 1);
+    // `steps` contains mapped display values, while pointer movement happens
+    // in the slider's index/value space. Use the Radix step for snapping.
+    const step = props.step ?? 1;
     const snappedDelta = Math.round(delta / step) * step;
 
     const clampedDelta = Math.max(
@@ -177,7 +184,10 @@ const RangeSlider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 2 && (
               <TooltipContent key={props.value[0]}>
-                {prettyScientificNumber(valueMap(props.value[0]), { locale })}
+                {prettyScientificNumber(valueMap(props.value[0]), {
+                  maximumFractionDigits: fractionDigits,
+                  locale,
+                })}
               </TooltipContent>
             )}
           </TooltipPortal>
@@ -198,7 +208,10 @@ const RangeSlider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 2 && (
               <TooltipContent key={props.value[1]}>
-                {prettyScientificNumber(valueMap(props.value[1]), { locale })}
+                {prettyScientificNumber(valueMap(props.value[1]), {
+                  maximumFractionDigits: fractionDigits,
+                  locale,
+                })}
               </TooltipContent>
             )}
           </TooltipPortal>

package/src/core/MarimoApp.tsx

@@ -59,7 +59,7 @@ export function preloadPage(mode: string) {
  */
 export const MarimoApp: React.FC = memo(() => {
   const [userConfig] = useResolvedMarimoConfig();
-  const [appConfig] = useAppConfig();
+  const appConfig = useAppConfig();
   const editorFontSize = toRem(userConfig.display.code_editor_font_size);
 
   const renderBody = () => {

package/src/core/ai/__tests__/staged-cells.test.ts

@@ -7,7 +7,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { cellId } from "@/__tests__/branded";
 import { CellId } from "@/core/cells/ids";
 import { getCellEditorView } from "../../cells/cells";
-import { updateEditorCodeFromPython } from "../../codemirror/language/utils";
+import { prepareCellCodeUpdate } from "../../codemirror/language/cell-code";
 import {
   stagedAICellsAtom,
   stagedGenerationInProgressAtom,
@@ -21,7 +21,7 @@ const { stagedGenerationAtom, createActions, reducer, initialState } =
   visibleForTesting;
 
 // Mock the dependencies
-const mockCreateNewCell = vi.fn();
+const mockCreateCell = vi.fn();
 const mockUpdateCellCode = vi.fn();
 const mockDeleteCellCallback = vi.fn();
 
@@ -34,14 +34,16 @@ const mockCellHandle = {
   },
 };
 
+vi.mock("../../cells/actions", () => ({
+  useCellActions: () => ({
+    createCell: mockCreateCell,
+    updateCellCode: mockUpdateCellCode,
+  }),
+}));
 vi.mock("../../cells/cells", async () => {
   const { atom } = await import("jotai");
   return {
-    notebookAtom: atom({ cellData: {}, cellIds: { inOrderIds: [] } }),
-    useCellActions: () => ({
-      createNewCell: mockCreateNewCell,
-      updateCellCode: mockUpdateCellCode,
-    }),
+    notebookAtom: atom({ cellData: {}, cellIds: [] }),
     cellHandleAtom: vi.fn(() => ({
       read: vi.fn(() => mockCellHandle),
     })),
@@ -57,8 +59,8 @@ vi.mock("@/core/network/requests", () => ({
   getRequestClient: () => ({ sendRun: vi.fn() }),
 }));
 
-vi.mock("../../codemirror/language/utils", () => ({
-  updateEditorCodeFromPython: vi.fn(),
+vi.mock("../../codemirror/language/cell-code", () => ({
+  prepareCellCodeUpdate: vi.fn(() => ({ effects: [] })),
 }));
 
 // Mock CellId.create
@@ -261,11 +263,9 @@ describe("staged-cells", () => {
       const returnedCellId = result.current.createStagedCell(testCode);
 
       expect(returnedCellId).toBe(mockCellId);
-      expect(mockCreateNewCell).toHaveBeenCalledWith({
-        cellId: "__end__",
+      expect(mockCreateCell).toHaveBeenCalledWith({
         code: testCode,
-        before: false,
-        newCellId: mockCellId,
+        id: mockCellId,
       });
     });
 
@@ -330,7 +330,7 @@ describe("staged-cells", () => {
 
       // Verify it was created and added
       expect(createdCellId).toBe(mockCellId);
-      expect(mockCreateNewCell).toHaveBeenCalled();
+      expect(mockCreateCell).toHaveBeenCalled();
 
       let state = store.get(stagedAICellsAtom);
       expect(state.has(mockCellId)).toBe(true);
@@ -401,8 +401,8 @@ describe("staged cell generation", () => {
     result.current.beginStagedCellGeneration();
 
     // No cell or cell update should have been called
-    expect(mockCreateNewCell).not.toHaveBeenCalled();
-    expect(updateEditorCodeFromPython).not.toHaveBeenCalled();
+    expect(mockCreateCell).not.toHaveBeenCalled();
+    expect(prepareCellCodeUpdate).not.toHaveBeenCalled();
     expect(store.get(stagedGenerationInProgressAtom)).toBe(true);
   });
 
@@ -610,11 +610,9 @@ describe("staged cell generation", () => {
       },
     });
 
-    expect(mockCreateNewCell).toHaveBeenCalledWith({
-      cellId: "__end__",
+    expect(mockCreateCell).toHaveBeenCalledWith({
       code: "print('```')",
-      before: false,
-      newCellId: "mock-cell-id",
+      id: "mock-cell-id",
     });
   });
 
@@ -636,16 +634,16 @@ describe("staged cell generation", () => {
       },
     });
 
-    expect(mockCreateNewCell).toHaveBeenCalledWith(
+    expect(mockCreateCell).toHaveBeenCalledWith(
       expect.objectContaining({
         code: "value = 1",
-        newCellId: "first-cell",
+        id: "first-cell",
       }),
     );
-    expect(mockCreateNewCell).toHaveBeenCalledWith(
+    expect(mockCreateCell).toHaveBeenCalledWith(
       expect.objectContaining({
         code: "value",
-        newCellId: "second-cell",
+        id: "second-cell",
       }),
     );
   });
@@ -683,10 +681,13 @@ describe("staged cell generation", () => {
       },
     });
 
-    expect(mockCreateNewCell).toHaveBeenCalledTimes(2);
+    expect(mockCreateCell).toHaveBeenCalledTimes(2);
     expect(store.get(stagedAICellsAtom).has(cellId("first-cell"))).toBe(true);
     expect(store.get(stagedAICellsAtom).has(cellId("second-cell"))).toBe(true);
-    expect(updateEditorCodeFromPython).toHaveBeenCalledTimes(2);
+    expect(prepareCellCodeUpdate).toHaveBeenCalledTimes(2);
+    expect(
+      mockCellHandle.current.editorViewOrNull.dispatch,
+    ).toHaveBeenCalledTimes(2);
   });
 
   it("should update notebook state when the cell editor is not mounted", () => {

package/src/core/ai/context/providers/__tests__/cell-output.test.ts

@@ -34,9 +34,7 @@ describe("CellOutputContextProvider", () => {
   beforeEach(() => {
     // Create a basic mock notebook state
     mockNotebook = {
-      cellIds: {
-        inOrderIds: ["cell1", "cell2", "cell3"],
-      },
+      cellIds: ["cell1", "cell2", "cell3"],
       cellData: {
         cell1: {
           id: "cell1",
@@ -207,7 +205,7 @@ describe("Cell output utility functions", () => {
 
     beforeEach(() => {
       const mockNotebook = {
-        cellIds: { inOrderIds: [] },
+        cellIds: [],
         cellData: {},
         cellRuntime: {},
       } as unknown as NotebookState;
@@ -226,7 +224,7 @@ describe("Cell output utility functions", () => {
 
       for (const testCase of testCases) {
         mockStore = createMockStore({
-          cellIds: { inOrderIds: ["test"] },
+          cellIds: ["test"],
           cellData: {
             test: { id: "test", name: "", code: "" },
           },
@@ -261,7 +259,7 @@ describe("Cell output utility functions", () => {
 
       for (const testCase of testCases) {
         mockStore = createMockStore({
-          cellIds: { inOrderIds: ["test"] },
+          cellIds: ["test"],
           cellData: {
             test: { id: "test", name: "", code: "" },
           },
@@ -295,7 +293,7 @@ describe("Cell output utility functions", () => {
 
       for (const testCase of testCases) {
         mockStore = createMockStore({
-          cellIds: { inOrderIds: ["test"] },
+          cellIds: ["test"],
           cellData: {
             test: { id: "test", name: "", code: "" },
           },
@@ -338,7 +336,7 @@ describe("Cell output utility functions", () => {
       } as unknown as Document;
 
       const mockNotebook = {
-        cellIds: { inOrderIds: [] },
+        cellIds: [],
         cellData: {},
         cellRuntime: {},
       } as unknown as NotebookState;
@@ -369,7 +367,7 @@ describe("Cell output utility functions", () => {
       ).mockReturnValue(mockDiv);
 
       mockStore = createMockStore({
-        cellIds: { inOrderIds: ["test"] },
+        cellIds: ["test"],
         cellData: {
           test: { id: "test", name: "", code: "" },
         },
@@ -395,9 +393,7 @@ describe("Cell output utility functions", () => {
 
     beforeEach(() => {
       mockNotebook = {
-        cellIds: {
-          inOrderIds: ["cell1", "cell2"],
-        },
+        cellIds: ["cell1", "cell2"],
         cellData: {
           cell1: {
             id: "cell1",